@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/anton-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/anton-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('./fonts/outfit-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('./fonts/outfit-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('./fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('./fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  :root {
    --bg: #080809; --surface: #0f0f12; --surface2: #161619; --border: #252529;
    --accent: #f0a500; --accent2: #ff6b35; --accent-glow: rgba(240,165,0,0.15);
    --text: #e2e2e8; --muted: #a3a3b4; --green: #22c55e; --cyan: #06b6d4; --red: #ef4444;
    --font-head: 'Anton', sans-serif; --font-body: 'Outfit', sans-serif; --font-mono: 'JetBrains Mono', monospace;
    --radius: 4px; --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  html { scroll-behavior: smooth; }
  body { background: var(--bg); color: var(--text); font-family: var(--font-body); min-height: 100vh; overflow-x: hidden; }
  body::before {
    content:''; position:fixed; inset:0;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
    pointer-events:none; z-index:0;
  }

  /* HEADER */
  header { position:relative; padding:60px 24px 48px; text-align:center; border-bottom:1px solid var(--border); overflow:hidden; }
  header::before { content:''; position:absolute; top:-120px; left:50%; transform:translateX(-50%); width:600px; height:300px; background:radial-gradient(ellipse,rgba(240,165,0,0.08) 0%,transparent 70%); pointer-events:none; }
  .header-label { font-family:var(--font-mono); font-size:13px; letter-spacing:4px; text-transform:uppercase; color:var(--accent); margin-bottom:16px; display:flex; align-items:center; justify-content:center; gap:12px; }
  .header-label::before,.header-label::after { content:''; width:40px; height:1px; background:var(--accent); opacity:0.5; }
  header h1 { font-family:var(--font-head); font-size:clamp(42px,8vw,88px); letter-spacing:2px; line-height:1; background:linear-gradient(135deg,#fff 30%,var(--accent) 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; margin-bottom:16px; }
  header p { color:var(--muted); font-size:15px; max-width:480px; margin:0 auto 32px; line-height:1.7; font-weight:300; }
  .progress-bar-wrap { max-width:500px; margin:0 auto; }
  .progress-info { display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:11px; color:var(--muted); margin-bottom:8px; }
  .progress-track { height:3px; background:var(--border); border-radius:2px; overflow:hidden; }
  .progress-fill { height:100%; width:0%; background:linear-gradient(90deg,var(--accent),var(--accent2)); border-radius:2px; transition:width 0.6s cubic-bezier(0.4,0,0.2,1); }

  /* STATS */
  .stats-row { display:flex; justify-content:center; gap:40px; padding:20px 24px; border-bottom:1px solid var(--border); flex-wrap:wrap; }
  .stat { text-align:center; }
  .stat-val { font-family:var(--font-head); font-size:28px; letter-spacing:1px; color:var(--accent); line-height:1; }
  .stat-label { font-family:var(--font-mono); font-size:10px; letter-spacing:2px; color:var(--muted); text-transform:uppercase; margin-top:4px; }

  /* TOOLBAR */
  .toolbar { display:flex; align-items:center; justify-content:space-between; padding:14px 24px; border-bottom:1px solid var(--border); gap:12px; flex-wrap:wrap; position:sticky; top:0; background:rgba(8,8,9,0.95); backdrop-filter:blur(12px); z-index:100; }
  .toolbar-title { font-family:var(--font-mono); font-size:11px; color:var(--muted); letter-spacing:2px; text-transform:uppercase; }
  .toolbar-actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
  .btn { font-family:var(--font-mono); font-size:11px; letter-spacing:1px; padding:7px 14px; border-radius:var(--radius); border:1px solid var(--border); background:transparent; color:var(--muted); cursor:pointer; transition:var(--transition); text-transform:uppercase; }
  .btn:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-glow); }
  .btn-toggle-all { display:flex; align-items:center; justify-content:center; gap:8px; inline-size:188px; white-space:nowrap; border-color:rgba(6,182,212,0.35); color:var(--cyan); background:rgba(6,182,212,0.08); box-shadow:inset 0 0 0 1px rgba(6,182,212,0.15); }
  .btn-toggle-all:hover { border-color:rgba(6,182,212,0.55); color:#67e8f9; background:rgba(6,182,212,0.14); }
  .btn-toggle-all .btn-toggle-icon { width:18px; height:18px; border-radius:50%; border:1px solid currentColor; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .btn-toggle-all .btn-toggle-icon svg { width:10px; height:10px; transition:transform var(--transition); }
  .btn-toggle-all.active { border-color:rgba(34,197,94,0.45); color:var(--green); background:rgba(34,197,94,0.08); box-shadow:inset 0 0 0 1px rgba(34,197,94,0.18); }
  .btn-toggle-all.active:hover { border-color:rgba(34,197,94,0.6); background:rgba(34,197,94,0.14); }
  .btn-toggle-all.active .btn-toggle-icon svg { transform:rotate(180deg); }
  .filters { display:flex; gap:6px; flex-wrap:wrap; }
  .filter-chip { font-family:var(--font-mono); font-size:11px; letter-spacing:1px; padding:7px 14px; border-radius:2px; border:1px solid var(--border); background:transparent; color:var(--muted); cursor:pointer; transition:var(--transition); text-transform:uppercase; }
  .filter-chip:hover,.filter-chip.active { border-color:var(--accent); color:var(--accent); background:var(--accent-glow); }

  /* MAIN */
  main { max-width:1190px; margin:0 auto; padding:32px 16px 80px; position:relative; z-index:1; }

  /* STEP CARDS */
  .steps-list { display:flex; flex-direction:column; gap:4px; }
  .step-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; transition:border-color var(--transition); }
  .step-card:hover { border-color:#3a3a40; }
  .step-card.open { border-color:rgba(240,165,0,0.3); }
  .step-card.done .step-header { opacity:0.6; }
  .step-header { display:grid; grid-template-columns:72px 1fr auto auto; align-items:stretch; cursor:pointer; user-select:none; transition:background var(--transition); width:100%; border:0; background:transparent; color:inherit; font:inherit; text-align:left; padding:0; }
  .step-header:hover { background:rgba(255,255,255,0.02); }
  .step-header:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
  .step-num { font-family:var(--font-head); font-size:32px; letter-spacing:1px; color:var(--accent); text-align:center; border-right:1px solid var(--border); display:flex; align-items:center; justify-content:center; transition:color var(--transition); min-height:64px; }
  .step-card.done .step-num { color:var(--green); }
  .step-info { padding:14px 18px; display:flex; flex-direction:column; justify-content:center; }
  .step-info-top { display:flex; align-items:center; gap:8px; margin-bottom:4px; }
  .step-name { font-size:15px; font-weight:600; color:var(--text); letter-spacing:0.3px; line-height:1.3; }
  .step-meta { display:flex; gap:8px; margin-top:5px; flex-wrap:wrap; }
  .tag { font-family:var(--font-mono); font-size:9px; letter-spacing:1.5px; text-transform:uppercase; padding:2px 7px; border-radius:2px; border:1px solid; }
  .tag-hw { color:var(--cyan); border-color:rgba(6,182,212,0.3); background:rgba(6,182,212,0.05); }
  .tag-sw { color:#a78bfa; border-color:rgba(167,139,250,0.3); background:rgba(167,139,250,0.05); }
  .tag-other { color:#f59e0b; border-color:rgba(245,158,11,0.35); background:rgba(245,158,11,0.08); }
  .tag-priority-1 { color:var(--accent); border-color:rgba(240,165,0,0.3); background:rgba(240,165,0,0.05); }
  .step-price { font-family:var(--font-mono); font-size:12px; color:var(--muted); padding:14px 14px 14px 0; white-space:nowrap; display:flex; align-items:center; }
  .step-price span { color:var(--green); font-weight:700; }
  .step-toggle { width:52px; display:flex; align-items:center; justify-content:center; padding:14px; border-left:1px solid var(--border); }
  .toggle-icon { width:18px; height:18px; border:1.5px solid var(--muted); border-radius:50%; display:flex; align-items:center; justify-content:center; transition:var(--transition); flex-shrink:0; }
  .toggle-icon svg { transition:transform var(--transition); }
  .step-card.open .toggle-icon { border-color:var(--accent); background:var(--accent-glow); }
  .step-card.open .toggle-icon svg { transform:rotate(180deg); }
  .step-body { max-height:0; overflow:hidden; transition:max-height 0.55s cubic-bezier(0.4,0,0.2,1); }
  .step-card.open .step-body { max-height:1500px; }
  .step-body-inner { border-top:1px solid var(--border); padding:22px; }
  .content-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
  .content-full { grid-column:1/-1; }
  .step-image { grid-column:1/-1; height:175px; border-radius:var(--radius); overflow:hidden; position:relative; border:1px solid var(--border); cursor:zoom-in; }
  .step-image img { width:100%; height:100%; object-fit:cover; filter:brightness(0.7) saturate(0.8); transition:filter 0.4s; }
  .step-image:hover img { filter:brightness(0.85) saturate(1); }
  .step-image-overlay { position:absolute; inset:0; background:linear-gradient(to right,rgba(8,8,9,0.6) 0%,transparent 60%); pointer-events:none; }
  .step-image-cta { position:absolute; right:10px; bottom:10px; font-family:var(--font-mono); font-size:10px; letter-spacing:1px; color:#f7f7fb; text-transform:uppercase; border:1px solid rgba(255,255,255,0.25); background:rgba(8,8,9,0.45); backdrop-filter:blur(6px); padding:5px 9px; border-radius:999px; pointer-events:none; transition:var(--transition); }
  .step-image:hover .step-image-cta { background:rgba(8,8,9,0.62); border-color:rgba(255,255,255,0.4); }
  .desc-block { background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius); padding:13px 15px; }
  .block-label { font-family:var(--font-mono); font-size:9px; letter-spacing:3px; text-transform:uppercase; color:var(--muted); margin-bottom:9px; display:flex; align-items:center; gap:8px; }
  .block-label::after { content:''; flex:1; height:1px; background:var(--border); }
  .desc-block p { font-size:14px; line-height:1.75; color:#b0b0be; font-weight:300; }
  .hw-list { list-style:none; display:flex; flex-direction:column; gap:5px; }
  .hw-list li { display:flex; align-items:flex-start; gap:10px; font-family:var(--font-mono); font-size:12px; line-height:1.5; color:#9898a8; padding:6px 10px; border-radius:var(--radius); background:rgba(255,255,255,0.02); border:1px solid transparent; transition:border-color var(--transition); }
  .hw-list li:hover { border-color:var(--border); }
  .hw-list li .dot { width:5px; height:5px; border-radius:50%; background:var(--accent); flex-shrink:0; margin-top:5px; }
  .hw-list li .dot.sw { background:#a78bfa; }
  .hw-list li strong { color:var(--text); font-weight:500; }
  .price-block { background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius); padding:13px 15px; display:flex; flex-direction:column; gap:6px; }
  .price-main { font-family:var(--font-head); font-size:32px; letter-spacing:1px; color:var(--green); line-height:1; }
  .price-note { font-size:12px; color:var(--muted); line-height:1.5; }
  .alt-block { display:flex; flex-direction:column; gap:7px; }
  .alt-item { background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius); padding:10px 12px; display:flex; gap:11px; align-items:flex-start; }
  .alt-num { font-family:var(--font-head); font-size:20px; color:var(--muted); line-height:1; flex-shrink:0; width:22px; }
  .alt-info .alt-name { font-size:13px; font-weight:600; color:var(--text); margin-bottom:3px; }
  .alt-info .alt-desc { font-size:12px; color:var(--muted); line-height:1.5; }
  .tip-block { background:linear-gradient(135deg,rgba(240,165,0,0.06),rgba(255,107,53,0.04)); border:1px solid rgba(240,165,0,0.2); border-radius:var(--radius); padding:12px 14px; display:flex; gap:11px; align-items:flex-start; }
  .tip-icon { font-size:16px; flex-shrink:0; margin-top:2px; }
  .tip-text { font-size:13px; color:#d4c08a; line-height:1.65; }
  .tip-text strong { color:var(--accent); font-weight:600; }
  .done-btn { display:flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:11px; letter-spacing:1px; text-transform:uppercase; color:var(--muted); background:transparent; border:1px solid var(--border); border-radius:var(--radius); padding:8px 14px; cursor:pointer; transition:var(--transition); margin-top:8px; }
  .done-btn:hover { border-color:var(--green); color:var(--green); }
  .step-card.done .done-btn { border-color:var(--green); color:var(--green); background:rgba(34,197,94,0.05); }
  .led { width:6px; height:6px; border-radius:50%; background:var(--border); flex-shrink:0; transition:var(--transition); }
  .step-card.done .step-header .led { background:var(--green); box-shadow:0 0 6px var(--green); }
  .step-card.open .step-header .led { background:var(--accent); box-shadow:0 0 6px var(--accent); }

  /* COST FOOTER */
  .cost-footer { margin-top:32px; background:var(--surface); border:1px solid rgba(240,165,0,0.2); border-radius:var(--radius); padding:22px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; }
  .cost-footer-label { font-family:var(--font-mono); font-size:11px; letter-spacing:3px; text-transform:uppercase; color:var(--muted); margin-bottom:6px; }
  .cost-total { font-family:var(--font-head); font-size:44px; letter-spacing:2px; background:linear-gradient(135deg,var(--green),#86efac); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; line-height:1; }
  .cost-meta { font-size:12px; color:var(--muted); margin-top:6px; }
  .cost-breakdown { display:flex; flex-direction:column; gap:5px; font-family:var(--font-mono); font-size:11px; }
  .cost-row { display:flex; gap:16px; align-items:center; justify-content:space-between; color:var(--muted); min-width:220px; }
  .cost-row .cr-name { color:#7a7a8a; }
  .cost-row .cr-val { color:var(--text); }

  /* EXPORT/IMPORT */
  .io-section { margin-top:16px; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); overflow:hidden; }
  .io-header { display:flex; align-items:center; justify-content:space-between; padding:14px 20px; cursor:pointer; border:0; border-bottom:1px solid transparent; transition:var(--transition); user-select:none; width:100%; background:transparent; color:inherit; font:inherit; text-align:left; }
  .io-header:hover { background:rgba(255,255,255,0.02); }
  .io-header:focus-visible { outline:2px solid var(--cyan); outline-offset:-2px; }
  .io-section.open .io-header { border-bottom-color:var(--border); }
  .io-header-left { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
  .io-title { font-family:var(--font-mono); font-size:11px; letter-spacing:3px; text-transform:uppercase; color:var(--muted); }
  .io-badge { font-family:var(--font-mono); font-size:9px; letter-spacing:1px; padding:2px 8px; border-radius:2px; border:1px solid rgba(6,182,212,0.3); color:var(--cyan); background:rgba(6,182,212,0.05); text-transform:uppercase; }
  .io-toggle-icon { width:16px; height:16px; border:1px solid var(--border); border-radius:50%; display:flex; align-items:center; justify-content:center; transition:var(--transition); color:var(--muted); flex-shrink:0; }
  .io-section.open .io-toggle-icon { border-color:var(--cyan); color:var(--cyan); }
  .io-toggle-icon svg { transition:transform var(--transition); }
  .io-section.open .io-toggle-icon svg { transform:rotate(180deg); }
  .io-body { max-height:0; overflow:hidden; transition:max-height 0.45s cubic-bezier(0.4,0,0.2,1); }
  .io-section.open .io-body { max-height:800px; }
  .io-body-inner { padding:20px; display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  .io-col { display:flex; flex-direction:column; gap:10px; }
  .io-col-title { font-family:var(--font-mono); font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--muted); display:flex; align-items:center; gap:8px; }
  .io-col-title::after { content:''; flex:1; height:1px; background:var(--border); }
  .io-textarea { width:100%; height:155px; background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius); color:var(--text); font-family:var(--font-mono); font-size:11px; line-height:1.6; padding:11px; resize:vertical; outline:none; transition:border-color var(--transition); }
  .io-textarea:focus { border-color:rgba(6,182,212,0.4); }
  .io-textarea::placeholder { color:var(--muted); }
  .io-actions { display:flex; gap:8px; flex-wrap:wrap; }
  .io-btn { font-family:var(--font-mono); font-size:11px; letter-spacing:1px; padding:7px 14px; border-radius:var(--radius); border:1px solid; cursor:pointer; transition:var(--transition); text-transform:uppercase; display:flex; align-items:center; gap:5px; }
  .io-btn-export { border-color:rgba(240,165,0,0.4); color:var(--accent); background:rgba(240,165,0,0.05); }
  .io-btn-export:hover { background:rgba(240,165,0,0.12); }
  .io-btn-import { border-color:rgba(34,197,94,0.4); color:var(--green); background:rgba(34,197,94,0.05); }
  .io-btn-import:hover { background:rgba(34,197,94,0.12); }
  .io-btn-download { border-color:rgba(6,182,212,0.4); color:var(--cyan); background:rgba(6,182,212,0.05); }
  .io-btn-download:hover { background:rgba(6,182,212,0.12); }
  .io-btn-clear { border-color:rgba(239,68,68,0.35); color:var(--red); background:rgba(239,68,68,0.04); }
  .io-btn-clear:hover { background:rgba(239,68,68,0.1); }
  .io-btn-copy { border-color:var(--border); color:var(--muted); background:transparent; }
  .io-btn-copy:hover { border-color:var(--muted); color:var(--text); }
  .io-status { font-family:var(--font-mono); font-size:11px; padding:8px 12px; border-radius:var(--radius); border:1px solid; display:none; align-items:center; gap:8px; }
  .io-status.success { border-color:rgba(34,197,94,0.3); color:var(--green); background:rgba(34,197,94,0.06); display:flex; }
  .io-status.error { border-color:rgba(239,68,68,0.3); color:var(--red); background:rgba(239,68,68,0.06); display:flex; }
  .io-info { font-size:12px; color:var(--muted); line-height:1.6; padding:9px 11px; background:rgba(255,255,255,0.02); border:1px solid var(--border); border-radius:var(--radius); }
  .file-input-label { color:var(--cyan); cursor:pointer; text-decoration:underline; }
  .file-input-label:hover { color:#67e8f9; }
  .ls-indicator { display:flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:10px; color:var(--muted); padding:5px 10px; border:1px solid var(--border); border-radius:var(--radius); background:rgba(255,255,255,0.01); }
  .ls-dot { width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 5px var(--green); animation:blink 2s infinite; }
  @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.3} }

  /* DEV CLEAR BUTTON */
  .dev-clear-btn { position:fixed; top:12px; right:12px; z-index:340; font-family:var(--font-mono); font-size:11px; letter-spacing:1px; text-transform:uppercase; padding:7px 12px; border-radius:var(--radius); border:1px solid rgba(239,68,68,0.45); background:rgba(239,68,68,0.12); color:#fca5a5; cursor:pointer; transition:var(--transition); }
  .dev-clear-btn:hover { border-color:rgba(239,68,68,0.75); background:rgba(239,68,68,0.2); color:#fecaca; }
  .dev-clear-btn:focus-visible { outline:2px solid var(--red); outline-offset:2px; }

  /* LIGHTBOX */
  body.lightbox-open { overflow:hidden; }
  .lightbox { position:fixed; inset:0; z-index:250; display:grid; place-items:center; opacity:0; pointer-events:none; transition:opacity 0.28s ease; }
  .lightbox.open { opacity:1; pointer-events:auto; }
  .lightbox-backdrop { position:absolute; inset:0; background:radial-gradient(circle at 50% 10%,rgba(240,165,0,0.1),rgba(8,8,9,0.92) 42%,rgba(6,6,8,0.98) 100%); backdrop-filter:blur(10px); }
  .lightbox-dialog { position:relative; width:min(1100px,92vw); margin:0; border:1px solid rgba(255,255,255,0.16); border-radius:16px; overflow:hidden; background:linear-gradient(160deg,rgba(18,18,24,0.98),rgba(10,10,14,0.98)); box-shadow:0 26px 80px rgba(0,0,0,0.65); transform:translateY(16px) scale(0.985); transition:transform 0.28s cubic-bezier(0.2,0.7,0.2,1); }
  .lightbox.open .lightbox-dialog { transform:translateY(0) scale(1); }
  .lightbox-img { display:block; width:100%; max-height:82vh; object-fit:contain; background:#070709; }
  .lightbox-caption { min-height:44px; font-size:13px; color:#cfd0d8; padding:12px 16px 14px; border-top:1px solid rgba(255,255,255,0.08); background:linear-gradient(to right,rgba(255,255,255,0.03),rgba(255,255,255,0.01)); }
  .lightbox-close { position:absolute; top:12px; right:12px; width:34px; height:34px; border-radius:50%; border:1px solid rgba(255,255,255,0.35); background:rgba(8,8,9,0.62); color:#f4f4f8; font-size:16px; cursor:pointer; transition:var(--transition); display:flex; align-items:center; justify-content:center; }
  .lightbox-close:hover { border-color:#ffffff; background:rgba(8,8,9,0.85); }
  .lightbox-close:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

  /* RESPONSIVE */
  @media (max-width:640px) {
    .content-grid,.io-body-inner { grid-template-columns:1fr; }
    .step-header { grid-template-columns:56px 1fr auto; }
    .step-price { display:none; }
    .step-num { font-size:24px; }
    .step-name { font-size:14px; }
    header h1 { font-size:42px; }
    .stats-row { gap:24px; }
  }

  /* ANIMATIONS */
  @keyframes fadeIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
  .step-card { animation:fadeIn 0.35s ease both; }
  .step-card:nth-child(1){animation-delay:.04s} .step-card:nth-child(2){animation-delay:.08s}
  .step-card:nth-child(3){animation-delay:.12s} .step-card:nth-child(4){animation-delay:.16s}
  .step-card:nth-child(5){animation-delay:.20s} .step-card:nth-child(6){animation-delay:.24s}
  .step-card:nth-child(7){animation-delay:.28s} .step-card:nth-child(8){animation-delay:.32s}
  .step-card:nth-child(9){animation-delay:.36s} .step-card:nth-child(10){animation-delay:.40s}
  .step-card:nth-child(11){animation-delay:.44s} .step-card:nth-child(12){animation-delay:.48s}
  .step-card:nth-child(13){animation-delay:.52s} .step-card:nth-child(14){animation-delay:.56s}
  .step-card:nth-child(15){animation-delay:.60s} .step-card:nth-child(16){animation-delay:.64s}