/* process.html — page-specific styles (extracted from inline) */

.page-hero { padding:10rem 0 6rem; position:relative; overflow:hidden; background:var(--bg); }
    .page-hero .blob--1{width:500px;height:500px;top:-120px;left:-80px;}
    .page-hero .blob--2{width:380px;height:380px;top:20%;right:-60px;animation-delay:-5s;}

    /* STEP SECTIONS */
    .step-section {
      padding:6rem 0; position:relative;
    }
    .step-section:nth-child(even) { background:var(--bg-alt); }
    .step-section:nth-child(odd)  { background:var(--bg); }

    .step-layout { display:grid; grid-template-columns:1fr 1fr; gap:6rem; align-items:center; }
    .step-layout--flip { direction:rtl; }
    .step-layout--flip > * { direction:ltr; }

    .step-num-big {
      font-family:var(--font-display); font-size:10rem; line-height:.85;
      opacity:.05; color:var(--text); letter-spacing:.02em;
      margin-bottom:-2rem; display:block;
    }
    .step-badge {
      display:inline-flex; align-items:center; gap:.7rem;
      font-family:var(--font-mono); font-size:.68rem; letter-spacing:.12em;
      text-transform:uppercase; color:var(--orange); margin-bottom:1.2rem;
    }
    .step-badge__dot {
      width:24px; height:24px; border-radius:50%;
      display:flex; align-items:center; justify-content:center;
      font-size:.75rem; font-weight:bold; color:#fff;
    }
    .step-badge__dot--1 { background:linear-gradient(135deg,var(--orange),#e06c00); }
    .step-badge__dot--2 { background:linear-gradient(135deg,#a78bfa,var(--purple)); }
    .step-badge__dot--3 { background:linear-gradient(135deg,#7dd3a8,#059669); }
    .step-badge__dot--4 { background:linear-gradient(135deg,var(--purple),#5a3de0); }

    .step-title { font-family:var(--font-display); font-size:clamp(2.8rem,5vw,5rem); line-height:.92; letter-spacing:.02em; color:var(--text); margin-bottom:1.4rem; }
    .step-desc { font-size:1rem; font-weight:300; line-height:1.75; color:var(--text-muted); margin-bottom:2rem; }

    .step-checklist { display:flex; flex-direction:column; gap:.8rem; }
    .step-check {
      display:flex; align-items:flex-start; gap:1rem;
      padding:1rem 1.2rem; border-radius:var(--radius-md);
      background:var(--surface); border:1px solid var(--border);
      transition:border-color .25s;
    }
    .step-check:hover { border-color:rgba(108,78,243,.3); }
    .step-check__icon { font-size:1rem; flex-shrink:0; margin-top:1px; }
    .step-check__title { font-size:.9rem; font-weight:500; color:var(--text); margin-bottom:.25rem; }
    .step-check__desc { font-size:.82rem; font-weight:300; color:var(--text-muted); line-height:1.55; }

    /* Visual panels */
    .step-visual { border-radius:var(--radius-xl); overflow:hidden; position:relative; }

    .sv-discover {
      background:var(--code-bg); border:1px solid var(--border);
      padding:2rem; display:flex; flex-direction:column; gap:1rem; min-height:340px;
    }
    .disc-header { font-family:var(--font-mono); font-size:.65rem; letter-spacing:.1em; text-transform:uppercase; color:var(--orange); margin-bottom:.5rem; }
    .disc-item {
      padding:1rem 1.2rem; border-radius:var(--radius-md);
      background:var(--surface); border:1px solid var(--border);
    }
    .disc-item__label { font-family:var(--font-mono); font-size:.62rem; color:var(--text-muted); letter-spacing:.08em; text-transform:uppercase; margin-bottom:.4rem; }
    .disc-item__value { font-size:.88rem; color:var(--text); font-weight:400; }
    .disc-bar { height:6px; border-radius:3px; background:var(--border); overflow:hidden; margin-top:.6rem; }
    .disc-bar__fill { height:100%; border-radius:3px; }
    .fill-orange { background:linear-gradient(to right,var(--orange),#e06c00); }
    .fill-purple { background:linear-gradient(to right,var(--purple),#a78bfa); }
    .fill-green  { background:linear-gradient(to right,#4ade80,#059669); }

    .sv-design {
      background:linear-gradient(160deg,#0a0a1e,#150a2e);
      border:1px solid var(--border); min-height:340px;
      display:flex; align-items:center; justify-content:center; padding:2rem;
    }
    [data-theme="light"] .sv-design { background:linear-gradient(160deg,#e0d8f8,#d0c8f0); }
    .figma-mock { width:100%; max-width:340px; display:flex; flex-direction:column; gap:.8rem; }
    .fm-toolbar {
      height:36px; border-radius:8px; background:var(--surface); border:1px solid var(--border);
      display:flex; align-items:center; padding:0 .8rem; gap:.5rem;
    }
    .fm-tool { width:18px;height:18px;border-radius:4px;background:var(--border); }
    .fm-tool--active { background:rgba(108,78,243,.4); border:1px solid rgba(108,78,243,.4); }
    .fm-canvas {
      aspect-ratio:16/10; border-radius:10px; background:var(--code-bg); border:1px solid var(--border);
      position:relative; overflow:hidden; padding:1rem;
    }
    .fm-component {
      position:absolute; border-radius:6px;
    }
    .fm-c1 { top:12%;left:8%;width:35%;height:18%;background:rgba(108,78,243,.3);border:1px solid rgba(108,78,243,.4); }
    .fm-c2 { top:12%;left:50%;width:42%;height:18%;background:rgba(249,130,25,.2);border:1px solid rgba(249,130,25,.3); }
    .fm-c3 { top:40%;left:8%;width:84%;height:10%;background:rgba(255,255,255,.05);border:1px solid var(--border); }
    .fm-c4 { top:58%;left:8%;width:84%;height:8%;background:rgba(255,255,255,.04);border:1px solid var(--border); }
    .fm-c5 { top:74%;left:8%;width:30%;height:12%;background:linear-gradient(135deg,var(--orange),#e06c00); border-radius:20px; }
    .fm-cursor { position:absolute; top:38%;left:51%; font-size:1rem; animation:cursorMove 3s ease-in-out infinite; }
    @keyframes cursorMove { 0%,100%{transform:translate(0,0)} 50%{transform:translate(40px,20px)} }

    .sv-build {
      background:var(--code-bg); border:1px solid var(--border);
      padding:0; min-height:340px; display:flex; flex-direction:column; overflow:hidden;
    }
    .build-bar { display:flex;align-items:center;gap:.4rem;padding:.55rem .8rem;background:rgba(255,255,255,.03);border-bottom:1px solid var(--border); }
    .bd { width:10px;height:10px;border-radius:50%; }
    .bd-r{background:#ff5f56;} .bd-y{background:#ffbd2e;} .bd-g{background:#27c93f;}
    .build-fn { font-family:var(--font-mono);font-size:.65rem;color:var(--text-muted);margin-left:.4rem; }
    .build-code { padding:.6rem 0; flex:1; display:flex; flex-direction:column; }
    .bl {
      font-family:var(--font-mono);font-size:.82rem;line-height:1.9;
      color:var(--text-muted);display:flex;align-items:center;padding:0 1rem 0 0;white-space:pre;
    }
    .bl-n { display:inline-block;min-width:2.2rem;padding:0 .6rem;color:rgba(255,255,255,.18);text-align:right;user-select:none;border-right:1px solid rgba(255,255,255,.05);margin-right:.7rem;font-size:.76rem; }
    [data-theme="light"] .bl-n { color:rgba(0,0,0,.18);border-right-color:rgba(0,0,0,.07); }
    [data-theme="light"] .bl   { color:rgba(13,13,26,.5); }
    .bk{color:var(--purple);} .bf{color:var(--orange);} .bs{color:#7dd3a8;} .bc{color:rgba(255,255,255,.25);font-style:italic;}
    [data-theme="light"] .bc { color:rgba(0,0,0,.3); }
    .bi  { padding-left:1.4em; } .bi2 { padding-left:2.8em; }
    .build-cur { display:inline-block;width:8px;height:.9em;background:var(--orange);border-radius:1px;animation:blink 1.1s step-end infinite;vertical-align:middle; }
    @keyframes blink { 0%,100%{opacity:1}50%{opacity:0} }

    .sv-launch {
      background:linear-gradient(160deg,#08080e,#120820);
      border:1px solid var(--border); min-height:340px;
      display:flex; flex-direction:column; align-items:center; justify-content:center;
      gap:1.5rem; padding:2.5rem;
    }
    [data-theme="light"] .sv-launch { background:linear-gradient(160deg,#e8e0f8,#d0c8f0); }
    .launch-status { display:flex;flex-direction:column;gap:.8rem;width:100%;max-width:320px; }
    .ls-item { display:flex;align-items:center;gap:.8rem;padding:.8rem 1rem;border-radius:var(--radius-md);background:var(--surface);border:1px solid var(--border); }
    .ls-icon { font-size:.9rem;flex-shrink:0; }
    .ls-text { font-family:var(--font-mono);font-size:.72rem;color:var(--text-muted);flex:1; }
    .ls-badge { font-family:var(--font-mono);font-size:.6rem;padding:.2rem .55rem;border-radius:var(--radius-pill); }
    .ls-badge--green { background:rgba(74,222,128,.15);border:1px solid rgba(74,222,128,.25);color:#4ade80; }
    .ls-badge--orange { background:rgba(249,130,25,.15);border:1px solid rgba(249,130,25,.25);color:var(--orange); }
    .launch-domain {
      font-family:var(--font-mono);font-size:.8rem;color:var(--text-muted);
      background:var(--surface);border:1px solid var(--border);
      padding:.6rem 1.2rem;border-radius:var(--radius-pill);
      display:flex;align-items:center;gap:.6rem;
    }
    .ld-dot { width:8px;height:8px;border-radius:50%;background:#4ade80;box-shadow:0 0 8px rgba(74,222,128,.8);animation:pulse 2s ease-in-out infinite; }

    /* TIMELINE */
    .timeline-section { padding:6rem 0; background:var(--bg); }
    .timeline { position:relative; max-width:700px; margin:4rem auto 0; }
    .timeline::before {
      content:''; position:absolute; left:50%; top:0; bottom:0; width:1px;
      background:linear-gradient(to bottom,var(--orange),var(--purple));
      transform:translateX(-50%); opacity:.3;
    }
    .tl-item { display:flex; gap:3rem; margin-bottom:3rem; align-items:flex-start; }
    .tl-item:nth-child(even) { flex-direction:row-reverse; }
    .tl-item:nth-child(even) .tl-content { text-align:right; }
    .tl-dot {
      width:36px;height:36px;border-radius:50%;flex-shrink:0;
      background:linear-gradient(135deg,var(--orange),var(--purple));
      display:flex;align-items:center;justify-content:center;
      font-family:var(--font-display);font-size:.9rem;color:#fff;
      box-shadow:0 0 20px rgba(108,78,243,.3);
      position:relative;z-index:1;margin-top:.2rem;
    }
    .tl-content { flex:1; }
    .tl-day { font-family:var(--font-mono);font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;color:var(--orange);margin-bottom:.4rem; }
    .tl-title { font-family:var(--font-display);font-size:1.4rem;letter-spacing:.04em;color:var(--text);margin-bottom:.4rem; }
    .tl-desc { font-size:.88rem;font-weight:300;color:var(--text-muted);line-height:1.6; }

    /* FAQ */
    .faq-section { padding:6rem 0; background:var(--bg-alt); }
    .faq-grid { display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-top:4rem; }
    .faq-item {
      background:var(--surface);border:1px solid var(--border);
      border-radius:var(--radius-lg);padding:1.8rem;
      cursor:pointer;transition:border-color .25s;
    }
    .faq-item:hover { border-color:rgba(108,78,243,.3); }
    .faq-q { font-size:.95rem;font-weight:500;color:var(--text);margin-bottom:0;display:flex;justify-content:space-between;align-items:center;gap:1rem; }
    .faq-toggle { color:var(--orange);font-size:1.2rem;flex-shrink:0;transition:transform .3s;line-height:1; }
    .faq-item.open .faq-toggle { transform:rotate(45deg); }
    .faq-a { font-size:.88rem;font-weight:300;color:var(--text-muted);line-height:1.65;margin-top:.9rem;display:none; }
    .faq-item.open .faq-a { display:block; }

    @media(max-width:1024px) {
      .step-layout { grid-template-columns:1fr; gap:3rem; }
      .step-layout--flip { direction:ltr; }
      .timeline::before { left:18px; }
      .tl-item { flex-direction:row !important; gap:1.5rem; }
      .tl-item .tl-content { text-align:left !important; }
      .faq-grid { grid-template-columns:1fr; }
    }
    @media(max-width:640px) {
      .step-section,.timeline-section,.faq-section { padding:5rem 0; }
      .step-num-big { font-size:6rem; }
      .page-hero { padding:8rem 0 4rem; }
    }
  
    /* Force nav links visible on desktop */
    @media(min-width:901px) {
      .nav__links { display:flex !important; }
      .nav__hamburger { display:none !important; }
    }