:root{
    /* ——— sky / dawn palette, lifted from the rocket-launch sunrise ——— */
    --night-0:#04050d;
    --night-1:#080b1e;
    --indigo:#10122f;
    --violet:#241d49;
    --mauve:#5b3559;
    --ember:#b14f4a;
    --orange:#e87a3c;
    --amber:#ffab5c;
    --peach:#ffd6a6;
    --moon:#f7ecd4;

    --ink:#fdf7ee;            /* warm near-white text */
    --ink-soft:rgba(253,247,238,.74);
    --ink-faint:rgba(253,247,238,.50);
    --line:rgba(253,247,238,.14);
    --success:#67d6a3;

    --accent:#ff8a3d;
    --accent-hi:#ffb066;

    --font-display:"Bricolage Grotesque",system-ui,sans-serif;
    --font-brand:"Onest",system-ui,sans-serif;
    --font-text:"Hanken Grotesk",system-ui,sans-serif;
    --font-mono:"JetBrains Mono",ui-monospace,monospace;

    --maxw:1240px;
  }

  *{box-sizing:border-box;margin:0;padding:0}
  html{-webkit-text-size-adjust:100%}
  body{
    font-family:var(--font-text);
    color:var(--ink);
    background:var(--night-0);
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    overflow-x:hidden;
  }
  ::selection{background:rgba(255,138,61,.32);color:#fff}

  /* ============================ HERO ============================ */
  .hero{
    position:relative;
    min-height:100svh;
    display:flex;
    flex-direction:column;
    isolation:isolate;
    overflow:hidden;
  }

  /* ——— the painted sky ——— */
  .sky{
    position:absolute;
    inset:0;
    z-index:-3;
    background:
      linear-gradient(180deg,
        var(--night-0) 0%,
        var(--night-1) 16%,
        var(--indigo) 32%,
        var(--violet) 48%,
        var(--mauve) 62%,
        var(--ember) 75%,
        var(--orange) 86%,
        var(--amber) 95%,
        var(--peach) 100%);
  }
  /* warm dawn glow rising off the horizon */
  .sky::after{
    content:"";
    position:absolute;
    left:50%; bottom:-10%;
    width:160vw; height:80vh;
    transform:translateX(-50%);
    background:radial-gradient(60% 100% at 50% 100%,
      rgba(255,198,120,1) 0%,
      rgba(255,150,72,.74) 28%,
      rgba(235,112,64,.42) 50%,
      rgba(208,90,58,.16) 68%,
      transparent 82%);
    filter:blur(6px);
    z-index:-1;
  }

  /* ——— stars ——— */
  .stars{position:absolute;inset:0;z-index:-2;pointer-events:none}
  .star{
    position:absolute;
    width:2px;height:2px;border-radius:50%;
    background:#fff;
    opacity:var(--o,.7);
  }
  @media (prefers-reduced-motion:no-preference){
    .star.tw{animation:tw var(--d,4s) ease-in-out infinite alternate}
  }
  @keyframes tw{from{opacity:.15}to{opacity:var(--o,.9)}}

  /* ——— moon (larger, soft cream — adapted from the variant the user liked) ——— */
  .moon{
    position:absolute;
    top:clamp(48px,8vw,116px); right:clamp(40px,9vw,150px);
    width:clamp(150px,14vw,220px); aspect-ratio:1;
    border-radius:50%;
    z-index:-2;
    background:
      radial-gradient(circle at 38% 36%, #fbf5e6 0%, var(--moon) 55%, #d8cdb4 100%);
    box-shadow:
      0 0 80px 26px rgba(247,236,212,.28),
      0 0 170px 54px rgba(247,236,212,.14),
      inset -16px -14px 38px rgba(120,104,76,.30),
      inset 10px 8px 28px rgba(255,252,242,.42);
    opacity:.97;
  }
  .moon::before{ /* faint craters, just soft tonal dabs */
    content:"";position:absolute;inset:0;border-radius:50%;
    background:
      radial-gradient(circle at 62% 30%, rgba(150,134,104,.26) 0 6%, transparent 9%),
      radial-gradient(circle at 42% 62%, rgba(150,134,104,.20) 0 9%, transparent 12%),
      radial-gradient(circle at 70% 68%, rgba(150,134,104,.16) 0 5%, transparent 8%);
    mix-blend-mode:multiply;
  }

  /* ——— soft cloud banks — few large, heavily-blurred two-tone masses
     (cool blue-grey bodies + warm cream highlights). They melt together and
     read as cloud, with no hard sphere edges. ——— */
  .clouds{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
  .cloud{position:absolute;border-radius:50%}
  .cloud.lo{filter:blur(38px);background:radial-gradient(circle at 42% 38%,rgba(150,156,188,.84),rgba(120,126,160,.5) 58%,transparent 75%)}
  .cloud.hi{filter:blur(34px);background:radial-gradient(circle at 44% 42%,rgba(250,238,222,.92),rgba(245,222,194,.6) 54%,transparent 74%)}
  .cloud.warm{filter:blur(36px);background:radial-gradient(circle at 50% 58%,rgba(255,236,206,.9),rgba(255,212,170,.5) 54%,transparent 76%)}
  /* crisper cauliflower lobes that read as cumulus, not haze */
  .cloud.puff{filter:blur(10px);background:radial-gradient(circle at 46% 40%,rgba(253,245,233,.99),rgba(246,224,194,.74) 46%,rgba(206,194,202,.22) 68%,transparent 80%)}
  .cloud.puffw{filter:blur(12px);background:radial-gradient(circle at 50% 52%,rgba(255,240,214,.97),rgba(255,211,168,.64) 48%,rgba(220,180,168,.16) 70%,transparent 80%)}
  /* cool shadow tucked between lobes to carve relief */
  .cloud.tuck{filter:blur(14px);background:radial-gradient(circle at 50% 46%,rgba(116,116,156,.66),rgba(100,102,144,.3) 52%,transparent 74%)}

  /* two independent banks: left & right, each scaled by its own slider (amount → opacity + height).
     cumulus-leaning puffs; right is the accent, left is kept light so orange shows through. */
  /* clouds locked to the chosen scene — left 0 · center 60 · right 80 */
  .side{position:absolute;inset:0;pointer-events:none;transform-origin:bottom center}
  .side.left{opacity:0;transform:scaleY(.66)}
  .side.center{opacity:.726;transform:scaleY(.936)}
  .side.right{opacity:.868;transform:scaleY(1.028)}

  /* warm full-bleed floor so the very bottom never shows a hard edge; its own light opacity
     keeps it from washing the scene — sliders sit on top of it per-side. */
  .clouds .haze{position:absolute;left:0;right:0;bottom:0;height:20%;border-radius:0;filter:blur(16px);
    background:linear-gradient(0deg,rgba(255,170,96,.34),rgba(255,150,84,.1) 58%,transparent)}

  /* ——— launch contrail + rocket ember ———
     the trail streams DOWN from the ember and fades out; nothing exists above the ember. */
  .launch{
    position:absolute;
    left:81%; top:0; bottom:0; width:200px;
    z-index:-1; pointer-events:none;
    transform:rotate(4deg);
    transform-origin:bottom center;
  }
  .trail{
    position:absolute; left:50%; top:38px; bottom:0; transform:translateX(-50%);
    width:3px;                              /* ember (top) is fixed above the moon; trail streams down */
    background:linear-gradient(180deg,
      rgba(255,226,182,.72) 0%,            /* brightest at the ember */
      rgba(255,186,124,.5) 16%,
      rgba(255,152,94,.22) 48%,
      transparent 82%);                    /* fades downward, toward the origin */
    filter:blur(1.1px);
  }
  .ember{
    position:absolute; left:50%; top:38px; transform:translate(-50%,-50%);
    width:12px;height:12px;border-radius:50%;
    background:radial-gradient(circle,#fff 0%,#ffd9a0 38%,#ff9a4d 70%,transparent 100%);
    box-shadow:0 0 26px 10px rgba(255,170,90,.7), 0 0 60px 22px rgba(255,140,70,.30);
  }
  @media (prefers-reduced-motion:no-preference){
    .ember{animation:emberPulse 3.4s ease-in-out infinite}
  }
  @keyframes emberPulse{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.95}50%{transform:translate(-50%,-50%) scale(1.22);opacity:1}}

  /* vignette to seat the type */
  .scrim{
    position:absolute;inset:0;z-index:-1;pointer-events:none;
    background:radial-gradient(120% 80% at 30% 38%, rgba(4,5,13,.55) 0%, transparent 56%);
  }

  /* ============================ HEADER ============================ */
  header{
    position:relative; z-index:5;
    width:100%;
  }
  .nav{
    max-width:var(--maxw); margin:0 auto;
    padding:clamp(20px,2.4vw,30px) clamp(20px,4vw,40px);
    display:flex; align-items:center; gap:22px;
  }
  .brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
  .brand .mark{
    width:38px;height:38px;border-radius:11px;
    display:grid;place-items:center;font-size:19px;line-height:1;
    background:linear-gradient(135deg,#7b5cff 0%,#c64ff0 48%,#ff8a5c 100%);
    box-shadow:0 6px 20px -6px rgba(198,79,240,.6), inset 0 1px 0 rgba(255,255,255,.35);
  }
  .brand .wm{font-family:var(--font-brand);font-weight:700;font-size:18px;letter-spacing:-.01em}
  .brand .wm .d{color:var(--amber)}

  .nav-spacer{flex:1}

  .nav-links{display:flex;align-items:center;gap:6px}
  .nav-links a{
    font-size:14px;color:var(--ink-soft);text-decoration:none;
    padding:8px 12px;border-radius:8px;transition:color .18s,background .18s;
  }
  .nav-links a:hover{color:var(--ink);background:rgba(255,255,255,.06)}

  /* language switcher */
  .lang{
    display:flex;align-items:center;gap:2px;
    padding:3px;border-radius:999px;
    background:rgba(255,255,255,.06);
    border:1px solid var(--line);
    backdrop-filter:blur(8px);
  }
  .lang button{
    font-family:var(--font-mono);
    font-size:12px;font-weight:500;letter-spacing:.04em;
    color:var(--ink-faint);
    background:none;border:none;cursor:pointer;
    padding:6px 11px;border-radius:999px;
    transition:color .18s,background .18s;
  }
  .lang button:hover{color:var(--ink-soft)}
  .lang button[aria-pressed="true"]{
    color:#1a120a;
    background:linear-gradient(180deg,var(--accent-hi),var(--accent));
    box-shadow:0 2px 10px rgba(255,138,61,.4);
  }

  /* ============================ HERO CONTENT ============================ */
  .hero-body{
    flex:1;
    display:flex; align-items:center;
    max-width:var(--maxw); width:100%; margin:0 auto;
    padding:clamp(24px,5vh,64px) clamp(20px,4vw,40px) clamp(40px,8vh,90px);
  }
  .hero-inner{max-width:760px}

  .kicker{
    display:inline-flex;align-items:center;gap:9px;
    font-family:var(--font-mono);font-size:12.5px;letter-spacing:.02em;
    color:var(--ink-soft);
    padding:7px 14px 7px 12px;border-radius:999px;
    border:1px solid var(--line);
    background:rgba(12,12,30,.32);
    backdrop-filter:blur(8px);
    margin-bottom:26px;
    white-space:nowrap;
  }
  .kicker .dot{width:8px;height:8px;border-radius:50%;background:var(--success);
    box-shadow:0 0 0 0 rgba(103,214,163,.55)}
  @media (prefers-reduced-motion:no-preference){
    .kicker .dot{animation:kpulse 2.6s ease-out infinite}
  }
  @keyframes kpulse{0%{box-shadow:0 0 0 0 rgba(103,214,163,.55)}70%{box-shadow:0 0 0 9px rgba(103,214,163,0)}100%{box-shadow:0 0 0 0 rgba(103,214,163,0)}}

  h1{
    font-family:var(--font-display);
    font-weight:700;
    font-size:clamp(2.7rem,6.6vw,5.3rem);
    line-height:.99;
    letter-spacing:-.025em;
    text-wrap:balance;
    margin-bottom:24px;
  }
  h1 .br{display:block}
  h1 .accent{
    background:linear-gradient(94deg,var(--peach) 0%,var(--amber) 42%,var(--accent) 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }

  /* ——— 24/7 uptime block ——— */
  .uptime{
    display:inline-flex; align-items:center; gap:16px;
    margin:2px 0 28px;
  }
  .uptime .num{
    display:inline-flex; align-items:center; justify-content:center;
    font-family:var(--font-display);
    font-weight:800;
    font-size:clamp(1.9rem,3.4vw,2.8rem);
    line-height:1;
    letter-spacing:-.01em;
    padding:.2em .4em .26em;
    border-radius:.32em;
    color:#1a1206;                 /* dark numerals on a bright badge — inverted contrast */
  }
  /* badge: locked to gradient */
  .uptime .num{ background:linear-gradient(118deg,var(--peach) 0%,var(--amber) 48%,var(--accent) 100%); }
  .uptime .rule{ width:1px; height:38px;
    background:linear-gradient(180deg,transparent,rgba(255,255,255,.24),transparent); }
  .uptime .lbl{
    font-family:var(--font-mono);
    font-size:12px; letter-spacing:.03em; text-transform:lowercase;
    color:var(--ink-soft);
    line-height:1.35; max-width:21ch;
  }

  .sub{
    font-size:clamp(1.04rem,1.55vw,1.3rem);
    line-height:1.5;
    color:var(--ink-soft);
    max-width:600px;
    text-wrap:pretty;
    margin-bottom:38px;
  }

  .cta-row{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
  .btn{
    font-family:var(--font-text);
    font-size:19px;font-weight:600;
    text-decoration:none;cursor:pointer;
    padding:21px 40px;border-radius:16px;
    display:inline-flex;align-items:center;gap:11px;
    transition:transform .16s ease, box-shadow .2s ease, background .2s ease, border-color .2s;
    border:1px solid transparent;
    white-space:nowrap;
  }
  .btn-primary{
    color:#1d1206;
    background:linear-gradient(180deg,var(--accent-hi),var(--accent));
    box-shadow:0 16px 44px -8px rgba(255,138,61,.9), inset 0 1px 0 rgba(255,255,255,.55);
  }
  .btn-primary:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 20px 50px -10px rgba(255,138,61,.95), inset 0 1px 0 rgba(255,255,255,.6)}
  .btn-primary .arr{transition:transform .18s ease}
  .btn-primary:hover .arr{transform:translateX(3px)}
  @keyframes ctaPulse{
    0%,100%{ box-shadow:0 16px 44px -8px rgba(255,138,61,.9), inset 0 1px 0 rgba(255,255,255,.55), 0 0 0 0 rgba(255,150,80,.55); }
    60%{ box-shadow:0 18px 48px -8px rgba(255,138,61,.95), inset 0 1px 0 rgba(255,255,255,.6), 0 0 0 16px rgba(255,150,80,0); }
  }
  @media (prefers-reduced-motion:no-preference){
    .btn-primary{ animation:ctaPulse 2.4s ease-in-out infinite; }
    .btn-primary:hover{ animation:none; }
  }
  .btn-ghost{
    color:var(--ink);
    background:rgba(255,255,255,.05);
    border-color:var(--line);
    backdrop-filter:blur(8px);
  }
  .btn-ghost:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.28);transform:translateY(-2px)}

  /* terminal log flourish */
  .log{
    margin-top:40px;
    display:inline-flex;align-items:center;gap:0;
    font-family:var(--font-mono);font-size:13.5px;letter-spacing:.01em;
    color:var(--ink-soft);
    padding:11px 16px;border-radius:11px;
    background:rgba(6,8,18,.5);
    border:1px solid var(--line);
    backdrop-filter:blur(10px);
    box-shadow:0 8px 30px -12px rgba(0,0,0,.6);
    max-width:100%;
    overflow-x:auto;
    white-space:nowrap;
  }
  .log .tag{color:var(--success);font-weight:600;margin-right:10px;
    text-shadow:0 0 14px rgba(103,214,163,.5)}
  .log .arrow{color:var(--ink-faint);margin:0 7px}
  .log .bot{color:var(--accent-hi)}
  .log .sep{color:var(--ink-faint);margin:0 9px}
  .log .cur{display:inline-block;width:7px;height:15px;margin-left:9px;
    background:var(--success);vertical-align:-2px;border-radius:1px}
  @media (prefers-reduced-motion:no-preference){
    .log .cur{animation:blink 1.1s steps(1) infinite}
  }
  @keyframes blink{50%{opacity:0}}

  /* entrance */
  /* content is always visible; no opacity-based entrance (preview compositor freezes transitions) */
  .reveal{opacity:1}

  /* scroll hint */
  .scroll-hint{
    position:absolute;left:50%;bottom:22px;transform:translateX(-50%);
    z-index:4;display:flex;flex-direction:column;align-items:center;gap:8px;
    font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;
    color:rgba(29,18,6,.62);text-transform:uppercase;
  }
  .scroll-hint .ln{width:1px;height:30px;background:linear-gradient(rgba(29,18,6,.55),transparent)}
  @media (prefers-reduced-motion:no-preference){
    .scroll-hint .ln{animation:drop 1.8s ease-in-out infinite}
  }
  @keyframes drop{0%,100%{opacity:.35;transform:scaleY(.7);transform-origin:top}50%{opacity:.9;transform:scaleY(1)}}

  @media (max-width:680px){
    .nav-links{display:none}
    .moon{width:84px;height:84px;top:9%;right:8%}
    .log{font-size:12px;padding:10px 13px}
    .launch{left:70%}
  }

  /* textured backdrop INSIDE main (absolute, spans full page height) so it composits & captures reliably */
  .page-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
  .page-bg .lyr{position:absolute;inset:0;opacity:0;transition:opacity .6s ease}
  .page-bg[data-bg="stars"] .lyr-stars{opacity:1}
  .page-bg[data-bg="trail"] .lyr-trail{opacity:1}
  .page-bg[data-bg="glow"]  .lyr-glow{opacity:1}
  .lyr-stars .bgstar{position:absolute;width:2px;height:2px;border-radius:50%;background:#fff}
  @media (prefers-reduced-motion:no-preference){ .lyr-stars .bgstar.tw{animation:bgtw 5s ease-in-out infinite alternate} }
  @keyframes bgtw{from{opacity:.15}to{opacity:.85}}
  /* contrail — a faint vertical launch line running the whole page */
  .lyr-trail .rail{position:absolute;top:0;bottom:0;left:74%;width:2px;
    background:linear-gradient(180deg,rgba(255,185,125,.34) 0%,rgba(255,155,100,.2) 50%,rgba(255,140,90,.1) 85%,transparent 100%);
    box-shadow:0 0 30px 7px rgba(255,160,100,.14)}
  .lyr-trail .emberdot{position:absolute;left:74%;width:6px;height:6px;border-radius:50%;transform:translateX(-50%);
    background:radial-gradient(circle,#ffe6c2,#ff9a4d 60%,transparent);opacity:.8;box-shadow:0 0 14px 3px rgba(255,160,90,.4)}
  /* soft warm dawn echoes down the page */
  .lyr-glow .blob{position:absolute;border-radius:50%;filter:blur(70px)}
  .lyr-glow .g1{width:58vw;height:520px;left:-10vw;top:120px;background:radial-gradient(closest-side,rgba(255,138,61,.22),transparent 70%)}
  .lyr-glow .g2{width:52vw;height:520px;right:-12vw;top:1500px;background:radial-gradient(closest-side,rgba(178,104,232,.18),transparent 70%)}
  .lyr-glow .g3{width:60vw;height:560px;left:4vw;top:2900px;background:radial-gradient(closest-side,rgba(255,150,90,.18),transparent 70%)}
  .lyr-glow .g4{width:54vw;height:520px;right:-10vw;top:4200px;background:radial-gradient(closest-side,rgba(255,138,61,.16),transparent 70%)}

  main{position:relative;background:#06070f;display:block}
  main > .dawn-dissolve, main > .sec, main > .foot{position:relative;z-index:1}
  /* ——— dawn dissolve: a mirror of the hero (orange-left + cloud-haze-right) that melts down into the starry night ——— */
  .dawn-dissolve{display:block;position:relative;height:clamp(560px,88vh,1000px);margin-top:-2px;
    pointer-events:none;overflow:hidden}
  .dawn-dissolve > div{position:absolute;inset:0}
  /* base vertical sky: bright warm horizon (= hero floor) → deep night → transparent (stars bleed through) */
  .dd-sky{background:linear-gradient(180deg,
    #ffe9cb 0%, #ffd9a6 4%, #f6b074 12%, #dc8a52 23%, #b5654f 37%, #864e5b 50%,
    #5a4060 63%, #382c4d 74%, #201b33 84%, #11111d 92%, rgba(6,7,15,0) 100%)}
  /* strong orange wash on the LEFT, fading down & toward the right */
  .dd-left{background:radial-gradient(75% 70% at -8% -6%, rgba(255,134,52,.72), rgba(255,120,50,.28) 38%, transparent 66%);
    -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.6) 32%,transparent 62%);
            mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.6) 32%,transparent 62%)}
  /* soft warm cloud haze on the RIGHT, fading down (echoes the hero clouds) */
  .dd-clouds{-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 24%,transparent 58%);
             mask-image:linear-gradient(180deg,#000 0%,#000 24%,transparent 58%)}
  .dd-clouds i{position:absolute;border-radius:50%;filter:blur(46px)}
  .dd-clouds .dc1{right:-8%;top:-6%;width:46vw;height:300px;background:radial-gradient(closest-side,rgba(255,224,186,.85),rgba(255,196,150,.3) 60%,transparent 78%)}
  .dd-clouds .dc2{right:8%;top:4%;width:32vw;height:240px;background:radial-gradient(closest-side,rgba(255,232,200,.7),transparent 72%)}
  .dd-clouds .dc3{right:24%;top:-3%;width:26vw;height:210px;background:radial-gradient(closest-side,rgba(248,210,180,.5),transparent 72%);opacity:.8}
  .dd-clouds .dc4{left:30%;top:1%;width:30vw;height:200px;background:radial-gradient(closest-side,rgba(255,210,165,.42),transparent 74%)}
  /* a couple of cool wisps low-left, hinting the coming night */
  .dd-clouds .dc5{left:-6%;top:30%;width:34vw;height:180px;background:radial-gradient(closest-side,rgba(150,140,180,.3),transparent 74%);opacity:.6}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,4vw,40px)}
  .sec{position:relative;padding:clamp(80px,11vh,150px) 0}
  .sec.tight{padding:clamp(56px,7vh,96px) 0}

  .eyebrow{display:inline-flex;align-items:center;gap:10px;
    font-family:var(--font-mono);font-size:12.5px;letter-spacing:.08em;color:var(--accent-hi);
    text-transform:uppercase;margin-bottom:20px}
  .eyebrow::before{content:"";width:18px;height:1px;background:var(--accent);opacity:.7}
  .sec-head.center .eyebrow::after{content:"";width:18px;height:1px;background:var(--accent);opacity:.7}
  .sec-head{max-width:760px;margin-bottom:clamp(40px,6vh,68px)}
  .sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
  .sec-head.center .eyebrow{justify-content:center}
  h2{font-family:var(--font-display);font-weight:700;letter-spacing:-.025em;line-height:1.02;
    font-size:clamp(2rem,4.4vw,3.3rem);text-wrap:balance}
  h2 .hl{background:linear-gradient(96deg,var(--peach),var(--amber) 45%,var(--accent));
    -webkit-background-clip:text;background-clip:text;color:transparent}
  .sec-lead{margin-top:18px;font-size:clamp(1.02rem,1.4vw,1.22rem);line-height:1.55;
    color:var(--ink-soft);max-width:620px;text-wrap:pretty}
  .sec-head.center .sec-lead{margin-left:auto;margin-right:auto}

  /* ——— scenes (story features) ——— */
  .scene{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,90px);align-items:center;
    padding:clamp(40px,7vh,80px) 0}
  .scene+.scene{border-top:1px solid var(--line)}
  .scene.flip .scene-media{order:2}
  .scene-num{font-family:var(--font-mono);font-size:13px;color:var(--accent-hi);letter-spacing:.1em;margin-bottom:16px}
  .scene-body h3{font-family:var(--font-display);font-weight:700;font-size:clamp(1.6rem,2.6vw,2.3rem);
    line-height:1.05;letter-spacing:-.02em;margin-bottom:16px}
  .scene-body p{color:var(--ink-soft);font-size:clamp(1rem,1.25vw,1.12rem);line-height:1.6;text-wrap:pretty;max-width:30em}
  .scene-body .kbd{color:var(--amber);font-family:var(--font-mono);font-size:.9em;
    background:rgba(255,138,61,.1);border:1px solid rgba(255,138,61,.22);border-radius:7px;padding:.16em .5em;
    display:inline-block;white-space:nowrap;vertical-align:baseline;line-height:1.35}

  /* ——— phone + telegram mock ——— */
  .phone{width:min(360px,84%);margin:0 auto;border-radius:42px;padding:13px;
    background:linear-gradient(160deg,#23253a,#0e0f1c);
    box-shadow:0 40px 90px -30px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.06),inset 0 0 0 1.5px rgba(255,255,255,.04);}
  .phone-scr{position:relative;border-radius:30px;overflow:hidden;background:#0d1622;min-height:460px;
    display:flex;flex-direction:column}
  .tg-top{display:flex;align-items:center;gap:11px;padding:13px 15px;background:#17212b;border-bottom:1px solid rgba(255,255,255,.05)}
  .tg-ava{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:18px;flex:none;
    background:radial-gradient(120% 120% at 20% 12%,#8a6bff,#c558c0 45%,#ff7a59 85%,#ffae5c)}
  .tg-name{font-family:var(--font-text);font-weight:600;font-size:15px;color:#fff;line-height:1.15;white-space:nowrap}
  .tg-sub{font-size:11.5px;color:#6d8aa5}
  .tg-sub b{color:var(--success);font-weight:600}
  .tg-body{flex:1;padding:16px 13px;display:flex;flex-direction:column;gap:9px;
    background:linear-gradient(180deg,#0e1621,#0c131c)}
  .bub{max-width:90%;padding:11px 13px;border-radius:16px 16px 16px 5px;background:#1c2b3a;
    font-size:13.5px;line-height:1.45;color:#e6eef6;box-shadow:0 1px 0 rgba(0,0,0,.2)}
  .bub .h{font-weight:700;color:#fff;margin-bottom:8px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
  .bub .h .clock{font-family:var(--font-mono);font-size:11px;color:#7da0bd;font-weight:500;margin-left:auto}
  .mail{display:flex;gap:9px;padding:8px 0;border-top:1px solid rgba(255,255,255,.07)}
  .mail:first-of-type{border-top:0}
  .mail .dot{width:8px;height:8px;border-radius:50%;margin-top:5px;flex:none;background:var(--accent);
    box-shadow:0 0 8px 1px rgba(255,138,61,.6)}
  .mail .mt{font-weight:600;color:#fff;font-size:13px;line-height:1.25}
  .mail .mm{color:#9bb3c8;font-size:11.5px;margin-top:2px}
  .noise{margin-top:7px;font-size:11.5px;color:#7da0bd;font-family:var(--font-mono);
    display:flex;align-items:center;gap:7px}
  .noise .pill{background:rgba(255,255,255,.06);border-radius:20px;padding:2px 9px}
  .tg-actions{display:flex;gap:7px;margin-top:4px}
  .tg-btn{flex:1;text-align:center;font-size:12px;font-weight:600;padding:9px;border-radius:10px;
    background:rgba(103,214,163,.14);color:#9be9c4;border:1px solid rgba(103,214,163,.25)}
  .tg-btn.alt{background:rgba(255,255,255,.06);color:#bcd0e2;border-color:rgba(255,255,255,.1)}
  .tg-input{display:flex;align-items:center;gap:9px;padding:11px 14px;background:#17212b;
    border-top:1px solid rgba(255,255,255,.05);font-size:13px;color:#6d8aa5}
  .tg-input .field{flex:1}
  .tg-input .send{width:30px;height:30px;border-radius:50%;background:var(--accent);display:grid;place-items:center;color:#1a1206;font-weight:700}

  /* user query bubble (right) */
  .bub.me{align-self:flex-end;background:linear-gradient(180deg,#3a6ea5,#2f5c8c);color:#fff;
    border-radius:16px 16px 5px 16px}
  .tg-search{align-self:flex-start;display:inline-flex;align-items:center;gap:7px;
    font-family:var(--font-mono);font-size:11.5px;color:#7da0bd;padding:2px 2px 2px}
  .tg-search .sp-ic{opacity:.9}

  /* ——— browser / cockpit mock ——— */
  .brow{border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.1);
    background:#0f1118;box-shadow:0 40px 90px -34px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.04)}
  .brow-bar{display:flex;align-items:center;gap:8px;padding:11px 14px;background:#171a24;border-bottom:1px solid rgba(255,255,255,.06)}
  .brow-bar .dots{display:flex;gap:6px}
  .brow-bar .dots i{width:11px;height:11px;border-radius:50%;display:block}
  .brow-bar .url{flex:1;margin-left:8px;font-family:var(--font-mono);font-size:12px;color:#8da2b8;
    background:#0c0e15;border:1px solid rgba(255,255,255,.06);border-radius:8px;padding:6px 11px;
    display:flex;align-items:center;gap:8px;overflow:hidden;white-space:nowrap}
  .brow-bar .url .lk{color:var(--success)}
  .brow-body{position:relative;aspect-ratio:16/10;background:
    radial-gradient(120% 90% at 80% 0,rgba(120,90,200,.18),transparent 60%),linear-gradient(160deg,#11131c,#0a0b12)}
  .cockpit-task{position:absolute;top:16px;left:16px;right:16px;display:flex;gap:11px;align-items:center;
    background:rgba(10,12,20,.7);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:11px 14px;backdrop-filter:blur(8px)}
  .cockpit-task .ai{width:30px;height:30px;border-radius:8px;flex:none;display:grid;place-items:center;font-size:15px;
    background:radial-gradient(120% 120% at 20% 12%,#8a6bff,#ff7a59 90%)}
  .cockpit-task .q{font-size:13.5px;color:#e6eef6}.cockpit-task .q b{color:var(--amber)}
  .cockpit-steps{position:absolute;left:16px;right:16px;bottom:16px;display:flex;flex-direction:column;gap:7px}
  .cstep{display:flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:12px;color:#9bb3c8;
    background:rgba(10,12,20,.55);border:1px solid rgba(255,255,255,.06);border-radius:9px;padding:8px 12px}
  .cstep .ok{color:var(--success)}.cstep.run{color:#fff;border-color:rgba(255,138,61,.4)}
  .cstep .sp{margin-left:auto;color:var(--accent-hi)}

  /* ——— steps (how it works) ——— */
  .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;counter-reset:st}
  .step{position:relative;background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:20px;padding:30px 26px}
  .step::before{counter-increment:st;content:"0" counter(st);font-family:var(--font-mono);font-size:13px;
    color:var(--accent-hi);letter-spacing:.1em}
  .step h3{font-family:var(--font-display);font-weight:700;font-size:1.32rem;margin:14px 0 10px;letter-spacing:-.01em}
  .step p{color:var(--ink-soft);font-size:.99rem;line-height:1.55;text-wrap:pretty}
  .step .ico{position:absolute;top:26px;right:26px;font-size:22px;opacity:.9}

  /* ——— trust / privacy ——— */
  .trust-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,64px);align-items:start}
  .trust-points{display:flex;flex-direction:column;gap:18px;margin-top:8px}
  .tp{display:flex;gap:14px;align-items:flex-start}
  .tp .ic{width:40px;height:40px;border-radius:11px;flex:none;display:grid;place-items:center;font-size:19px;
    background:rgba(255,138,61,.12);border:1px solid rgba(255,138,61,.22)}
  .tp h4{font-family:var(--font-display);font-weight:600;font-size:1.12rem;margin-bottom:4px}
  .tp p{color:var(--ink-soft);font-size:.99rem;line-height:1.5}
  .compare{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:20px;padding:8px;display:flex;flex-direction:column;gap:8px}
  .crow{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:20px 22px;border-radius:14px}
  .crow.them{background:rgba(255,255,255,.02)}
  .crow.us{background:linear-gradient(120deg,rgba(255,138,61,.16),rgba(255,138,61,.06));border:1px solid rgba(255,138,61,.28)}
  .crow .who{font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint)}
  .crow.us .who{color:var(--accent-hi)}
  .crow .what{font-weight:600;font-size:1rem;margin-top:6px;color:var(--ink)}
  .crow .price{font-family:var(--font-display);font-weight:700;font-size:clamp(1.3rem,2.2vw,1.7rem);text-align:right;line-height:1}
  .crow.us .price{color:var(--amber)}.crow .price small{display:block;font-family:var(--font-mono);font-size:11px;font-weight:400;color:var(--ink-faint);margin-top:5px;letter-spacing:0}

  /* ——— pricing ——— */
  .price-card{max-width:560px;margin:0 auto;background:
    radial-gradient(120% 80% at 50% 0,rgba(255,138,61,.14),transparent 60%),rgba(255,255,255,.03);
    border:1px solid rgba(255,138,61,.26);border-radius:26px;padding:clamp(32px,5vw,52px);text-align:center;
    box-shadow:0 40px 90px -40px rgba(255,138,61,.4)}
  .price-tag{font-family:var(--font-display);font-weight:800;letter-spacing:-.03em;line-height:1;
    font-size:clamp(3.4rem,8vw,5rem);background:linear-gradient(100deg,var(--peach),var(--amber) 45%,var(--accent));
    -webkit-background-clip:text;background-clip:text;color:transparent}
  .price-tag sup{font-size:.4em;vertical-align:.7em;-webkit-text-fill-color:var(--accent-hi)}
  .price-was{font-family:var(--font-mono);font-size:13px;color:var(--ink-faint);margin-top:8px}
  .price-was s{opacity:.7}
  .price-note{margin-top:18px;color:var(--ink-soft);font-size:1.02rem;line-height:1.55;text-wrap:pretty}
  .price-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:24px}
  .price-meta span{font-family:var(--font-mono);font-size:12px;color:var(--ink-soft);
    background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:20px;padding:7px 14px}
  .price-card .btn{margin-top:30px}

  /* ——— faq ——— */
  .faq{max-width:820px;margin:0 auto}
  .qa{border-bottom:1px solid var(--line)}
  .qa summary{list-style:none;cursor:pointer;padding:24px 0;display:flex;align-items:center;gap:16px;
    font-family:var(--font-display);font-weight:600;font-size:clamp(1.05rem,1.7vw,1.28rem);color:var(--ink)}
  .qa summary::-webkit-details-marker{display:none}
  .qa summary::marker{content:"";font-size:0}
  .qa[open]{overflow:hidden}
  .qa summary .pm{margin-left:auto;flex:none;width:26px;height:26px;border-radius:50%;border:1px solid var(--line);
    display:grid;place-items:center;color:var(--accent-hi);transition:transform .25s,background .25s;font-size:16px}
  .qa[open] summary .pm{transform:rotate(45deg);background:rgba(255,138,61,.14)}
  .qa .a{padding:0 0 24px 0;color:var(--ink-soft);font-size:1.02rem;line-height:1.6;max-width:64ch;text-wrap:pretty}
  .qa .a code{font-family:var(--font-mono);font-size:.9em;color:var(--amber);background:rgba(255,138,61,.1);padding:.1em .4em;border-radius:5px}

  /* ——— apply form ——— */
  .apply-wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(32px,5vw,68px);align-items:start}
  .apply-card{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:24px;padding:clamp(26px,3.4vw,40px)}
  .fgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .field-l{display:flex;flex-direction:column;gap:7px}
  .field-l.full{grid-column:1/-1}
  .field-l label{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft)}
  .field-l label .req{color:var(--accent)}
  .field-l input,.field-l textarea{font-family:var(--font-text);font-size:15px;color:var(--ink);
    background:rgba(8,10,20,.6);border:1px solid var(--line);border-radius:12px;padding:13px 15px;width:100%;
    transition:border-color .18s,box-shadow .18s}
  .field-l input::placeholder,.field-l textarea::placeholder{color:rgba(253,247,238,.32)}
  .field-l input:focus,.field-l textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,138,61,.16)}
  .field-l textarea{resize:vertical;min-height:84px}
  .apply-card .btn{width:100%;justify-content:center;margin-top:22px}
  .apply-note{font-family:var(--font-mono);font-size:12px;color:var(--ink-faint);text-align:center;margin-top:14px;line-height:1.5}
  /* promo + price summary + pay methods */
  .promo-row{display:flex;gap:10px}
  .promo-row input{flex:1}
  .promo-btn{font-family:var(--font-text);font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;
    background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:12px;padding:0 18px;white-space:nowrap;
    transition:background .16s,border-color .16s}
  .promo-btn:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.28)}
  .promo-msg{font-family:var(--font-mono);font-size:12px;margin-top:8px;min-height:1px}
  .promo-msg.ok{color:var(--success)}
  .promo-msg.bad{color:#ff9a6b}
  .price-sum{margin-top:22px;background:rgba(8,10,20,.5);border:1px solid var(--line);border-radius:16px;padding:18px 20px}
  .ps-row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;font-size:14px;color:var(--ink-soft);padding:4px 0}
  .ps-row .ps-base{font-family:var(--font-mono)}
  .ps-disc{color:var(--success)}
  .ps-total{margin-top:6px;padding-top:12px;border-top:1px solid var(--line);font-size:15px;color:var(--ink);font-weight:600}
  .ps-total span:last-child{font-family:var(--font-display);font-weight:800;font-size:1.7rem;
    background:linear-gradient(100deg,var(--peach),var(--amber) 45%,var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}
  .ps-after{font-family:var(--font-mono);font-size:11.5px;color:var(--ink-faint);margin-top:8px;text-align:right}
  .pay-methods{display:flex;flex-wrap:wrap;align-items:center;gap:8px;justify-content:center;margin-top:18px}
  .pay-methods .pm-label{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint)}
  .pay-methods .pm-chip{font-family:var(--font-mono);font-size:12px;color:var(--ink-soft);white-space:nowrap;
    background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:18px;padding:6px 12px}
  .apply-side h2{margin-bottom:18px}
  .apply-side .chk{display:flex;gap:12px;align-items:flex-start;margin-top:16px;color:var(--ink-soft);font-size:1rem;line-height:1.5}
  .apply-side .chk .c{color:var(--success);flex:none;margin-top:2px}
  .form-sent{display:none;text-align:center;padding:30px 10px}
  .form-sent.show{display:block}
  .form-sent .big{font-family:var(--font-display);font-weight:700;font-size:1.5rem;margin:14px 0 8px}
  .form-sent p{color:var(--ink-soft);line-height:1.55}
  .form-sent .em{width:60px;height:60px;border-radius:50%;margin:0 auto;display:grid;place-items:center;font-size:28px;
    background:rgba(103,214,163,.16);border:1px solid rgba(103,214,163,.3)}

  /* ——— footer ——— */
  .foot{border-top:1px solid var(--line);padding:44px 0 60px;background:#05060d}
  .foot .wrap{display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between}
  .foot .fb{display:flex;align-items:center;gap:11px}
  .foot .fcopy{font-family:var(--font-mono);font-size:12px;color:var(--ink-faint);line-height:1.6}
  .foot .flinks{display:flex;gap:20px}
  .foot .flinks a{color:var(--ink-soft);text-decoration:none;font-size:14px}
  .foot .flinks a:hover{color:var(--ink)}

  @media (max-width:860px){
    .scene{grid-template-columns:1fr;gap:30px}
    .scene.flip .scene-media{order:0}
    .steps{grid-template-columns:1fr}
    .trust-grid{grid-template-columns:1fr}
    .apply-wrap{grid-template-columns:1fr}
  }
  @media (max-width:520px){
    .fgrid{grid-template-columns:1fr}
  }