@font-face{font-family:"FluidHand";src:url("https://ik.imagekit.io/fluid/980191006/fc-fluidhand_P4ldC7L9M.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap}
  *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
  :root{
    --bg:#07080a; --bg2:#0d0f13; --ink:#eeede8; --dim:#9a9fa8; --line:rgba(255,255,255,.09);
    --accent:#077bff; --accent-2:#5aa8ff; --accent-soft:rgba(7,123,255,.14);
    --paper:#f5f4ef; --ink-d:#141519; --dim-d:#5d6067; --line-d:rgba(20,21,25,.12);
    --panel:#0e1117; --panel2:#12161d;
    --green:#69d29a; --amber:#e8b34d; --coral:#f27a6d; --faint:#4b505a;
    --sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter","Segoe UI",Helvetica,Arial,sans-serif;
    --serif:Georgia,"Times New Roman",serif;
    --mono:"SF Mono",ui-monospace,"JetBrains Mono",Menlo,monospace;

    /* scroll-scrubbed "sunrise": --lit interpolates 0 (dark) -> 1 (light) as the
       platform/native zone scrolls through the viewport. --litnav does the same,
       but only while that zone sits under the fixed nav. */
    --lit:0;
    --litnav:0;
    --z-bg: color-mix(in oklab, #f8f9fb calc(var(--lit)*100%), #07080a);
    --z-surface: color-mix(in oklab, #ffffff calc(var(--lit)*100%), #0e1117);
    --z-ink: color-mix(in oklab, #12141a calc(var(--lit)*100%), #eeede8);
    --z-dim: color-mix(in oklab, #5c626b calc(var(--lit)*100%), #9a9fa8);
    --z-line: color-mix(in srgb, rgba(12,16,22,.12) calc(var(--lit)*100%), rgba(255,255,255,.08));
  }
  
  html{scroll-behavior:smooth;overflow-x:clip}
  body{font-family:var(--sans);background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.5;overflow-x:clip;transition:background-color 0.8s cubic-bezier(.2,.8,.2,1),color 0.8s cubic-bezier(.2,.8,.2,1)}
  ::selection{background:var(--accent);color:#fff}
  a{color:inherit;text-decoration:none}
  button{font:inherit;color:inherit;background:transparent}
  .wrap{max-width:1160px;margin:0 auto;padding:0 24px}

  /* ---------- type ---------- */
  .eyebrow{font-family:var(--mono);font-size:.74rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--accent-2)}
  h1{font-weight:650;letter-spacing:-.035em;line-height:1.02}
  h2{font-weight:650;letter-spacing:-.03em;line-height:1.06}
  .display{font-size:clamp(2.5rem,6.2vw,5rem);font-weight:650;letter-spacing:-.042em;line-height:1.0}
  .display .soft{color:var(--dim)}
  .quiet{color:var(--dim);font-size:clamp(1.14rem,1.9vw,1.44rem);font-weight:450;letter-spacing:-.012em;line-height:1.5}
  .quiet b{color:var(--ink);font-weight:550}

  /* ---------- buttons ---------- */
  .btn{display:inline-flex;align-items:center;gap:9px;padding:14px 26px;border-radius:999px;font-size:.98rem;font-weight:600;letter-spacing:-.01em;cursor:pointer;border:1px solid transparent;transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease,color .18s ease;white-space:nowrap}
  .btn:hover{transform:translateY(-1px)}
  .btn--primary{background:var(--accent);color:#fff;box-shadow:0 8px 30px -8px rgba(7,123,255,.55)}
  .btn--primary:hover{box-shadow:0 14px 40px -8px rgba(7,123,255,.72)}
  .btn--ghost{border-color:var(--line);color:var(--ink)}
  .btn--ghost:hover{border-color:var(--accent);color:var(--accent-2)}
  .lightzone .btn--ghost{color:var(--z-ink);border-color:var(--z-line)}
  .lightzone .btn--ghost:hover{border-color:var(--accent);color:var(--accent)}
  .btn--sm{padding:9px 17px;font-size:.86rem}
  .btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

  /* ---------- nav ---------- */
  nav{position:fixed;top:0;left:0;right:0;z-index:100;transition:background .3s,border-color .3s;border-bottom:1px solid transparent}
  nav.scrolled{background:rgba(7,8,10,.82);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom-color:var(--line)}
  .nav-inner{display:flex;align-items:center;justify-content:space-between;height:68px}
  .nav-logo{display:flex;align-items:center;flex:0 0 auto;height:68px}
  .nav-logo img{display:block;width:auto;height:36px;max-width:208px;object-fit:contain}
  .logo{font-weight:700;font-size:1.05rem;letter-spacing:-.02em;display:flex;align-items:center;gap:10px;white-space:nowrap}
  .logo .dot{width:10px;height:10px;border-radius:3px;background:var(--accent);box-shadow:0 0 14px rgba(7,123,255,.9)}
  .nav-links{display:flex;gap:30px;font-size:.92rem;color:var(--dim)}
  .nav-links a:hover{color:var(--ink)}
  .nav-links a.active{color:var(--ink)}
  .tdd{position:relative;display:inline-flex;align-items:center}
  .tdd-trigger{display:inline-flex;align-items:center;gap:6px;color:var(--dim);font-size:.92rem;font-family:inherit;background:none;border:0;padding:0;cursor:pointer;transition:color .18s ease}
  .tdd:hover .tdd-trigger,.tdd:focus-within .tdd-trigger{color:var(--ink)}
  .tdd-trigger svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease}
  .tdd:hover .tdd-trigger svg,.tdd:focus-within .tdd-trigger svg{transform:rotate(180deg)}
  .tdd-panel{position:absolute;top:calc(100% + 15px);left:50%;transform:translateX(-50%) translateY(-6px);width:340px;padding:10px;border:1px solid rgba(255,255,255,.1);border-radius:18px;background:linear-gradient(180deg,rgba(17,21,29,.97),rgba(10,13,18,.97));box-shadow:0 44px 96px -36px #000,inset 0 1px 0 rgba(255,255,255,.06);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);opacity:0;visibility:hidden;transition:opacity .24s ease,transform .24s cubic-bezier(.2,.8,.2,1),visibility .24s;z-index:120}
  .tdd:hover .tdd-panel,.tdd:focus-within .tdd-panel{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
  .tdd-panel::before{content:"";position:absolute;top:-15px;left:0;right:0;height:15px}
  .tdd-item{display:flex;gap:13px;align-items:center;padding:11px 12px;border-radius:12px;transition:background .18s ease}
  .tdd-item:hover{background:rgba(255,255,255,.06)}
  .tdd-ic{flex:0 0 36px;height:36px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(160deg,rgba(7,123,255,.22),rgba(7,123,255,.06));border:1px solid rgba(7,123,255,.32);color:var(--accent-2)}
  .tdd-ic svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
  .tdd-tt{display:block;color:#fff;font-size:.92rem;font-weight:600;line-height:1.2}
  .tdd-ds{display:block;color:#9aa0a8;font-size:.75rem;line-height:1.3;margin-top:3px}
  @media(max-width:880px){.nav-links{display:none}}
  @media(max-width:480px){.nav-inner .btn{padding:9px 14px;font-size:.82rem}.logo{font-size:.95rem}.nav-logo img{height:28px;max-width:158px}}

  /* mega-tdd */
  .tdd--mega .tdd-panel{width:min(720px,calc(100vw - 28px));left:auto;right:0;transform:translateY(-6px);padding:14px;border-radius:18px;border:1px solid rgba(255,255,255,.12);background:radial-gradient(135% 130% at 100% -12%,rgba(7,123,255,.12),transparent 52%),linear-gradient(180deg,#0d121b,#0a0e14);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 44px 100px -26px rgba(0,0,0,.85)}
  .tdd--mega:hover .tdd-panel,.tdd--mega:focus-within .tdd-panel{transform:translateY(0)}
  .tdd-sec{display:flex;align-items:baseline;justify-content:space-between;font-family:"SF Mono",ui-monospace,Menlo,monospace;font-size:.6rem;letter-spacing:.15em;text-transform:uppercase;color:var(--dim);padding:2px 10px 9px}
  .tdd-sec:not(:first-child){margin-top:8px;border-top:1px solid rgba(255,255,255,.08);padding-top:13px}
  .tdd-secnote{color:var(--faint);letter-spacing:.12em}
  .tdd-report{display:grid;grid-template-columns:46px 1fr auto;align-items:center;gap:12px;padding:10px 11px;border-radius:12px;background:linear-gradient(100deg,rgba(7,123,255,.17),rgba(7,123,255,.05));border:1px solid rgba(7,123,255,.26);transition:background .2s ease,border-color .2s ease}
  .tdd-report:hover{background:linear-gradient(100deg,rgba(7,123,255,.28),rgba(7,123,255,.1));border-color:rgba(7,123,255,.48)}
  .tdd-rthumb{width:46px;height:46px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(150deg,#12365f,#0a1826);border:1px solid rgba(107,176,255,.3)}
  .tdd-rthumb svg{width:26px;height:26px}
  .tdd-rbadge{font-family:"SF Mono",ui-monospace,Menlo,monospace;font-size:.55rem;letter-spacing:.1em;text-transform:uppercase;color:#8cc0ff;background:rgba(7,123,255,.2);border:1px solid rgba(7,123,255,.4);border-radius:999px;padding:4px 9px;white-space:nowrap}
  .tdd--mega .tdd-grid{display:grid;grid-template-columns:1fr 1fr;gap:3px}
  .tdd--mega .tdd-item{display:grid;grid-template-columns:46px 1fr 18px;align-items:center;gap:12px;padding:8px 10px;border-radius:12px;transition:background .2s ease}
  .tdd--mega .tdd-item:hover{background:rgba(255,255,255,.055)}
  .tdd-thumb{width:46px;height:46px;border-radius:11px;overflow:hidden;display:grid;place-items:center;border:1px solid rgba(255,255,255,.09)}
  .tdd-thumb img{max-width:78%;max-height:78%;object-fit:contain;filter:drop-shadow(0 6px 10px rgba(0,0,0,.4));transition:transform .3s cubic-bezier(.2,.7,.2,1)}
  .tdd--mega .tdd-item:hover .tdd-thumb img{transform:scale(1.1)}
  .tdd-txt{display:flex;flex-direction:column;min-width:0}
  .tdd--mega .tdd-tt{font-family:var(--sans);font-size:.92rem;font-weight:600;color:var(--ink);line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .tdd--mega .tdd-ds{font-size:.76rem;color:var(--dim);line-height:1.25;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .tdd-go{width:16px;height:16px;fill:none;stroke:var(--faint);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:translateX(-5px);transition:opacity .2s ease,transform .2s ease,stroke .2s ease}
  .tdd--mega .tdd-item:hover .tdd-go{opacity:1;transform:translateX(0);stroke:var(--blue-2)}
  .tdd-all{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:11px;padding:13px 15px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid var(--line);transition:background .2s ease,border-color .2s ease}
  .tdd-all:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.2)}
  .tdd-all-l{font-family:var(--sans);font-size:.9rem;font-weight:600;color:var(--ink)}
  .tdd-all-r{display:inline-flex;align-items:center;gap:7px;font-family:"SF Mono",ui-monospace,Menlo,monospace;font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--blue-2)}
  .tdd-all-r svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease}
  .tdd-all:hover .tdd-all-r svg{transform:translateX(4px)}
  @keyframes tddIn{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
  .tdd--mega .tdd-item{opacity:0}
  .tdd--mega:hover .tdd-item,.tdd--mega:focus-within .tdd-item{animation:tddIn .4s both cubic-bezier(.2,.7,.2,1)}
  .tdd--mega .tdd-item:nth-child(1){animation-delay:0.03s}.tdd--mega .tdd-item:nth-child(2){animation-delay:0.06s}.tdd--mega .tdd-item:nth-child(3){animation-delay:0.09s}.tdd--mega .tdd-item:nth-child(4){animation-delay:0.12s}.tdd--mega .tdd-item:nth-child(5){animation-delay:0.15s}.tdd--mega .tdd-item:nth-child(6){animation-delay:0.18s}.tdd--mega .tdd-item:nth-child(7){animation-delay:0.21s}.tdd--mega .tdd-item:nth-child(8){animation-delay:0.24s}.tdd--mega .tdd-item:nth-child(9){animation-delay:0.27s}
  @media (prefers-reduced-motion:reduce){.tdd--mega .tdd-item{opacity:1;animation:none}}
  @media(max-width:760px){.tdd--mega .tdd-panel{width:min(360px,calc(100vw - 20px))}.tdd--mega .tdd-grid{grid-template-columns:1fr}}

  /* ---------- hero ---------- */
  .hero{position:relative;min-height:100svh;display:flex;align-items:flex-start;justify-content:center;text-align:center;overflow:hidden;padding:clamp(82px,10vh,128px) 0 64px;background:
    linear-gradient(180deg,transparent 77%,rgba(7,8,10,.92) 100%),
    url("https://ik.imagekit.io/fluid/980191006/fp-hero-utopia_MOm85Y9cQ.png?tr=w-2400,q-80") center 46%/cover no-repeat,
    #07080a}
  .hero::before{content:"";position:absolute;left:0;right:0;top:0;height:56%;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(6,8,12,.5),rgba(6,8,12,.18) 46%,transparent)}
  #heroCanvas{display:none}
  .hero-inner{position:relative;z-index:2;max-width:1060px;margin:0 auto;padding:0 24px;will-change:transform}
  .hero h1{font-size:clamp(1.6rem,3.4vw,2.75rem);font-weight:600;letter-spacing:-.02em;line-height:1.16;color:#fff;text-shadow:0 2px 22px rgba(0,0,0,.42),0 1px 3px rgba(0,0,0,.42)}
  .hero-flip{display:inline-block;margin-top:.02em}
  .hero-flip .rot{display:inline-block;font-family:"FluidHand",var(--sans);font-style:italic;font-weight:700;font-size:clamp(2rem,5vw,4.3rem);line-height:1;letter-spacing:0;color:#fff;text-shadow:0 8px 34px rgba(0,0,0,.5),0 0 34px rgba(90,168,255,.3);transition:opacity .2s ease;will-change:opacity}
  .hero-flip .rot.swap{opacity:0}
  .hero-ctas{margin-top:clamp(12px,1.5vw,20px);display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:center}
  .hero-ctas .btn{padding:11px 20px;font-size:.9rem}
  .hero-ctas .btn svg{width:15px;height:15px}
  .hero .btn--ghost{border-color:rgba(255,255,255,.42);color:#fff}
  .hero .btn--ghost:hover{border-color:#fff;color:#fff;background:rgba(255,255,255,.08)}
  @media(prefers-reduced-motion:reduce){.hero-flip .rot{transition:none}}
  .scrollcue{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:1px;height:74px;background:rgba(255,255,255,.1);overflow:hidden;z-index:2}
  .scrollcue::after{content:"";position:absolute;left:0;top:-45%;width:100%;height:45%;background:linear-gradient(180deg,transparent,var(--accent));animation:cue 2.4s cubic-bezier(.55,0,.3,1) infinite}
  @keyframes cue{to{top:115%}}

  /* ---------- section shell ---------- */
  .sx{position:relative;padding:clamp(96px,13vw,190px) 0;background:var(--bg);overflow:hidden}
  .sx .wrap{position:relative;z-index:2}

  /* ---------- scroll-scrubbed light zone (dark -> light sunrise) ---------- */
  .sx.lightzone{background:var(--z-bg);color:var(--z-ink)}
  .lightzone .quiet{color:var(--z-dim)}
  .lightzone .display .soft{color:var(--z-dim)}
  .lightzone .mod-head h2{color:var(--z-ink)}
  .lightzone .mod p{color:var(--z-dim)}
  .lightzone .mod .tags span{color:var(--z-dim);border-color:var(--z-line);background:color-mix(in srgb,rgba(0,0,0,.02) calc(var(--lit)*100%),transparent)}
  .lightzone .mod:hover .tags span{color:var(--z-ink);border-color:rgba(7,123,255,.32)}
  .lightzone .pairs{border-top-color:var(--z-line)}
  .lightzone .pair{border-bottom-color:var(--z-line)}
  .lightzone .pair .old{color:var(--z-dim)}
  .lightzone .pair .new{border-left-color:var(--z-line)}
  .lightzone .pair .new b{color:var(--z-ink)}
  .lightzone .pair:hover{background:color-mix(in srgb,rgba(0,0,0,.025) calc(var(--lit)*100%),rgba(255,255,255,.012))}
  .kick{display:flex;align-items:center;gap:16px;margin-bottom:26px}
  .kick .n{font-family:var(--mono);font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
  .kick .n b{color:var(--accent-2);font-weight:700}
  .kick .ln{flex:1;height:1px;background:var(--line);transition:background-color 0.8s ease}

  /* ---------- reveal ---------- */
  .rv{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.6,.2,1),transform .8s cubic-bezier(.2,.6,.2,1)}
  .rv.on{opacity:1;transform:none}
  .rv2{transition-delay:.1s}.rv3{transition-delay:.2s}.rv4{transition-delay:.3s}
  @media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.scrollcue::after{animation:none}}

  /* ---------- teardown ticker (under hero) ---------- */
  .tdstrip{position:relative;background:var(--bg);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:clamp(15px,2vw,22px) 0;overflow:hidden}
  .tdstrip-lead{max-width:1160px;margin:0 auto 13px;padding:0 24px;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
  .tdstrip-lead .k{font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-2)}
  .tdstrip-lead .s{font-size:.84rem;color:var(--dim)}
  .tdstrip-marq{position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
  .tdstrip-row{display:flex;gap:12px;width:max-content;will-change:transform;animation:tdmarq 60s linear infinite}
  .tdstrip-marq:hover .tdstrip-row{animation-play-state:paused}
  @keyframes tdmarq{to{transform:translateX(-50%)}}
  .tdchip{flex:0 0 auto;display:flex;align-items:center;gap:11px;padding:7px 17px 7px 7px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.025);transition:border-color .25s ease,background .25s ease,transform .25s ease}
  .tdchip:hover{border-color:rgba(7,123,255,.42);background:rgba(7,123,255,.07);transform:translateY(-2px)}
  .tdchip-thumb{width:38px;height:38px;border-radius:50%;overflow:hidden;flex:0 0 38px;background:#111;border:1px solid rgba(255,255,255,.1)}
  .tdchip-thumb img{width:100%;height:100%;object-fit:cover;display:block}
  .tdchip-txt{display:flex;flex-direction:column;line-height:1.16;white-space:nowrap}
  .tdchip-txt b{font-size:.9rem;font-weight:650;color:var(--ink);letter-spacing:-.01em}
  .tdchip-txt span{font-size:.72rem;color:var(--dim)}
  @media(prefers-reduced-motion:reduce){.tdstrip-row{animation:none;flex-wrap:wrap;justify-content:center}.tdstrip-marq{-webkit-mask-image:none;mask-image:none}}

  /* ---------- problem / disconnect ---------- */
  .prob .display{max-width:17ch}
  .prob-body{margin:clamp(40px,6vw,72px) 0 0 auto;max-width:640px;font-size:clamp(1.12rem,1.6vw,1.34rem);line-height:1.62;color:var(--dim)}
  .prob-body b{color:var(--ink);font-weight:550}
  .stackwall{margin:clamp(48px,7vw,88px) 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
  @media(max-width:800px){.stackwall{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:520px){.stackwall{grid-template-columns:1fr}}
  .brick{position:relative;display:flex;align-items:center;gap:12px;padding:18px 20px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.02);color:var(--dim);font-size:1rem;font-weight:500;overflow:hidden;transition:color .6s ease,border-color .6s ease,opacity .6s ease}
  .brick .dot{width:8px;height:8px;border-radius:50%;background:var(--faint);flex-shrink:0;transition:background .6s ease}
  .brick::after{content:"";position:absolute;left:16px;right:16px;top:50%;height:2px;background:var(--coral);border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.6,0,.15,1)}
  .brick.cut{color:var(--faint);border-color:rgba(242,122,109,.24)}
  .brick.cut .dot{background:var(--coral)}
  .brick.cut::after{transform:scaleX(1)}
  .prob-punch{margin-top:clamp(46px,6vw,80px);font-size:clamp(1.8rem,4vw,3rem);font-weight:650;letter-spacing:-.035em;line-height:1.12;max-width:22ch}
  .prob-punch .soft{color:var(--dim)}
  .prob-punch b{color:var(--accent-2);font-weight:650}

  /* ---------- assembly (signature scroll) ---------- */
  .assemble{position:relative;height:460vh;background:linear-gradient(180deg,var(--bg),#05070b 30%,#05070b 70%,var(--bg));isolation:isolate}
  .assemble-sticky{position:sticky;top:0;height:100svh;overflow:hidden;display:grid;place-items:center;perspective:1500px}
  .assemble-sticky::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse 60% 50% at 50% 50%,rgba(7,123,255,.10),transparent 62%)}
  #assembleCanvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
  .assemble-stage{position:relative;z-index:2;width:min(880px,92vw);height:min(560px,64vh);transform-style:preserve-3d}
  .atile{position:absolute;left:50%;top:50%;width:var(--w,140px);display:grid;justify-items:center;gap:9px;transform-style:preserve-3d;will-change:transform,opacity}
  .atile-ic{width:clamp(46px,4.6vw,60px);height:clamp(46px,4.6vw,60px);border-radius:13px;display:grid;place-items:center;color:#fff;position:relative;overflow:hidden;
    background-image:linear-gradient(155deg,rgba(255,255,255,.2),rgba(255,255,255,.03) 40%,rgba(1,4,10,.42)),var(--art,linear-gradient(145deg,#2a5fa0,#0a0e14));
    background-size:cover,var(--art-size,cover);background-position:center,var(--art-pos,center);
    border:1px solid rgba(255,255,255,.24);box-shadow:0 20px 44px -18px rgba(0,0,0,.96),0 0 30px color-mix(in srgb,var(--pc,#77b5ff) 22%,transparent),inset 0 1px 0 rgba(255,255,255,.3)}
  .atile-ic svg{position:relative;z-index:2;width:44%;height:44%;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))}
  .atile-nm{font-size:clamp(.62rem,.9vw,.78rem);font-weight:600;color:var(--ink);white-space:nowrap;opacity:var(--label-o,0);transition:opacity .2s linear, color 0.8s ease}
  .assemble-core{position:absolute;left:50%;top:50%;z-index:3;translate:-50% -50%;display:grid;place-items:center;text-align:center;opacity:var(--core-o,0);transform:scale(var(--core-s,.6));filter:blur(var(--core-blur,6px))}
  .assemble-core-mark{width:clamp(74px,7vw,100px);height:clamp(74px,7vw,100px);border-radius:22px;display:grid;place-items:center;background:radial-gradient(circle at 40% 30%,#2c8aff,#052350 66%);border:1px solid rgba(176,211,250,.4);box-shadow:0 0 0 14px rgba(83,139,207,.04),0 0 80px rgba(39,127,235,.4),inset 0 1px 0 rgba(255,255,255,.32)}
  .assemble-core-mark img{width:58%;height:58%;object-fit:contain;display:block;filter:drop-shadow(0 2px 8px rgba(0,0,0,.4))}
  .assemble-copy{position:absolute;left:0;right:0;z-index:4;text-align:center;padding:0 24px;pointer-events:none}
  .assemble-copy.top{top:clamp(88px,13vh,150px)}
  .assemble-copy.bot{bottom:clamp(78px,12vh,130px)}
  .assemble-copy h2{font-size:clamp(2rem,4.8vw,3.7rem);font-weight:680;letter-spacing:-.035em;line-height:1.04;color:var(--ink);opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s ease,color 0.8s ease}
  .assemble-copy p{max-width:600px;margin:18px auto 0;color:var(--dim);font-size:clamp(1rem,1.5vw,1.2rem);line-height:1.6;opacity:0;transform:translateY(20px);transition:opacity .7s ease .1s,transform .7s ease .1s,color 0.8s ease}
  .assemble-copy.show h2,.assemble-copy.show p{opacity:1;transform:none}
  .assemble-hint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:4;font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);opacity:.7;transition:opacity .4s, color 0.8s ease}
  @media(max-width:640px){.assemble{height:420vh}.assemble-stage{width:94vw;height:70vh}}
  @media(prefers-reduced-motion:reduce){
    .assemble{height:auto}.assemble-sticky{position:relative;height:auto;padding:80px 0}
    .atile{position:relative;left:auto;top:auto;transform:none!important;opacity:1!important}.assemble-stage{height:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
    .assemble-core{position:relative;translate:0;opacity:1;transform:none;filter:none;margin:30px auto 0}
    .assemble-copy{position:relative;top:auto;bottom:auto;margin:24px 0}.assemble-copy h2,.assemble-copy p{opacity:1;transform:none}.atile-nm{opacity:1}
  }

  /* ---------- modules grid ---------- */
  .mod-head{max-width:760px}
  .mod-head h2{font-size:clamp(2.1rem,4.4vw,3.4rem)}
  .mod-head .quiet{margin-top:22px}
  .mods{margin-top:clamp(40px,5vw,60px);display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
  @media(max-width:900px){.mods{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:560px){.mods{grid-template-columns:1fr}}
  .mod{position:relative;display:flex;flex-direction:column;min-height:252px;padding:26px 26px 22px;border-radius:18px;overflow:hidden}
  .mod-ic{width:54px;height:54px;border-radius:14px;display:grid;place-items:center;position:relative;overflow:hidden;isolation:isolate;color:#fff;
    background-image:linear-gradient(155deg,rgba(255,255,255,.18) 0%,rgba(255,255,255,.035) 29%,rgba(1,5,12,.12) 58%,rgba(1,4,10,.48) 100%),radial-gradient(circle at 28% 18%,rgba(255,255,255,.2),transparent 34%),var(--art,linear-gradient(145deg,color-mix(in srgb,var(--pc,#77b5ff) 34%,#151a22),#080b10));
    background-position:center,center,var(--art-pos,50% 50%);background-size:cover,cover,var(--art-size,cover);background-repeat:no-repeat;
    border:1px solid rgba(255,255,255,.27);box-shadow:0 20px 44px -18px rgba(0,0,0,.96),0 0 30px color-mix(in srgb,var(--pc,#77b5ff) 24%,transparent),inset 0 1px 0 rgba(255,255,255,.32),inset 0 -10px 20px rgba(0,0,0,.18);transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
  .mod:hover .mod-ic{transform:translateY(-3px) scale(1.05)}
  .mod-ic::before{content:"";position:absolute;z-index:0;left:-20%;top:-32%;width:86%;height:66%;border-radius:50%;background:linear-gradient(105deg,transparent 10%,rgba(255,255,255,.38) 48%,transparent 76%);filter:blur(5px);rotate:-18deg;opacity:.58;mix-blend-mode:screen;pointer-events:none}
  .mod-ic::after{content:"";position:absolute;z-index:3;inset:2px;border:1px solid rgba(255,255,255,.2);border-radius:9px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);pointer-events:none}
  .mod-ic .ill-svg{position:relative;z-index:2;width:46%;height:46%;color:#fff;filter:drop-shadow(0 2px 6px rgba(0,0,0,.55)) drop-shadow(0 0 6px rgba(255,255,255,.15))}
  .mods .mod:nth-child(1){--pc:#9fb9ff}.mods .mod:nth-child(2){--pc:#ffd36e}.mods .mod:nth-child(3){--pc:#78bbff}
  .mods .mod:nth-child(4){--pc:#ff9de2}.mods .mod:nth-child(5){--pc:#87edbd}.mods .mod:nth-child(6){--pc:#ff9c7e}
  .mods .mod:nth-child(7){--pc:#73d4ff}.mods .mod:nth-child(8){--pc:#8de7dd}.mods .mod:nth-child(9){--pc:#c8d9ef}
  .mod h4{margin-top:20px;font-size:1.15rem;font-weight:650;letter-spacing:-.02em}
  .mod p{margin-top:9px;color:var(--dim);font-size:.95rem;line-height:1.56;max-width:33ch}
  .mod .tags{margin-top:auto;padding-top:20px;display:flex;flex-wrap:wrap;gap:7px}
  .mod .tags span{font-family:var(--mono);font-size:.7rem;letter-spacing:.02em;color:var(--dim);border:1px solid var(--line);border-radius:7px;padding:5px 9px;transition:color .25s,border-color .25s,background .25s}
  .mod:hover .tags span{color:var(--ink);border-color:rgba(7,123,255,.3)}

  
  /* ---------- award-winning studio polish ---------- */
  .ill-svg { width: 46%; height: 46%; overflow: visible; fill: none; }
  .atile-ic .ill-svg { filter: drop-shadow(0 2px 6px rgba(0,0,0,0.3)); }
  .ill-svg * { transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1); transform-origin: center; }

  /* Storefronts */
  .ill-store-ui { transform-origin: bottom; }
  .mod:hover .ill-store-ui { transform: scaleY(1.08) translateY(-1px); fill-opacity: 0.3; }

  /* Checkout */
  .mod:hover .ill-chk-check { stroke-dashoffset: 0; }

  /* Autoship */
  .mod:hover .ill-auto-spin { transform: rotate(180deg); }

  /* Field */
  .mod:hover .ill-field-node { fill-opacity: 0.7; r: 4; }
  .mod:hover .ill-field-line { stroke-dashoffset: 0; }

  /* Customers */
  .mod:hover .ill-cust-ring { transform: scale(1.15) rotate(90deg); stroke-opacity: 0.5; }

  /* Offers */
  .mod:hover .ill-offer-tag { transform: rotate(-8deg) scale(1.05); fill-opacity: 0.3; }

  /* Payments */
  .mod:hover .ill-pay-card { transform: translateY(-2px) rotate(4deg); fill-opacity: 0.3; }

  /* Analytics */
  .ill-data-bar { transform-origin: bottom; }
  .mod:hover .ill-data-bar.b1 { transform: scaleY(1.3); fill-opacity: 0.5; }
  .mod:hover .ill-data-bar.b2 { transform: scaleY(1.2); fill-opacity: 0.5; }
  .mod:hover .ill-data-bar.b3 { transform: scaleY(1.1); fill-opacity: 0.5; }

  /* Commissions */
  .ill-comm-coin { transform: translateY(-8px); opacity: 0; }
  .mod:hover .ill-comm-coin { transform: translateY(4px); opacity: 1; }

  /* Spotlight Cards */
  .mod {
    border: 1px solid var(--z-line);
    background: var(--z-surface);
    box-shadow: 0 10px 34px -18px color-mix(in srgb, rgba(18,22,30,.5) calc(var(--lit)*100%), transparent);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
  }
  .mod::before, .mod::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 0.5s ease;
  }
  .mod::before {
    background: radial-gradient(600px circle at var(--x, 50%) var(--y, 50%), color-mix(in srgb, rgba(7,123,255,0.05) calc(var(--lit)*100%), rgba(255,255,255,0.04)), transparent 40%);
    z-index: 0;
  }
  .mod::after {
    padding: 1px;
    background: radial-gradient(400px circle at var(--x, 50%) var(--y, 50%), color-mix(in srgb, rgba(7,123,255,0.3) calc(var(--lit)*100%), rgba(255,255,255,0.3)), transparent 40%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    z-index: 1;
  }
  .mod:hover::before, .mod:hover::after { opacity: 1; }
  .mod > * { position: relative; z-index: 2; }
  .mod:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -30px color-mix(in srgb, rgba(0,0,0,.16) calc(var(--lit)*100%), rgba(0,0,0,.85)); }

  /* ---------- built for direct selling (contrast) ---------- */
  .native .display{max-width:16ch}
  .native .quiet{margin-top:24px;max-width:640px}
  .pairs{margin-top:clamp(44px,5vw,68px);border-top:1px solid var(--line)}
  .pair{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line);transition:background .3s}
  .pair:hover{background:rgba(255,255,255,.015)}
  @media(max-width:720px){.pair{grid-template-columns:1fr}}
  .pair>div{padding:24px 26px}
  .pair .old{color:var(--dim);font-size:1.04rem;line-height:1.45;display:flex;gap:12px;align-items:baseline}
  .pair .old .x{color:var(--coral);font-weight:700;flex-shrink:0}
  .pair .old s{text-decoration-color:rgba(242,122,109,.5);text-decoration-thickness:1.5px}
  .pair .new{font-size:1.1rem;font-weight:550;line-height:1.4;border-left:1px solid var(--line);display:flex;gap:12px;align-items:baseline}
  @media(max-width:720px){.pair .new{border-left:0;padding-top:0}}
  .pair .new .c{color:var(--accent-2);font-weight:700;flex-shrink:0}
  .pair .new b{color:var(--ink);font-weight:650}

  /* ---------- mist bridge ---------- */
  .mist{position:relative;padding:clamp(96px,13vw,180px) 0;background:linear-gradient(180deg,#07080a,#080b12 44%,#07080a);overflow:hidden}
  .mist::before{content:"";position:absolute;left:50%;top:44%;width:min(900px,120vw);aspect-ratio:1;translate:-50% -50%;z-index:0;border-radius:50%;background:radial-gradient(circle,rgba(7,123,255,.14),transparent 60%);filter:blur(6px)}
  .mist-inner{position:relative;z-index:2;max-width:820px;margin:0 auto;text-align:center}
  .mist-badge{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-2);border:1px solid rgba(7,123,255,.3);background:rgba(7,123,255,.08);border-radius:999px;padding:8px 15px}
  .mist-badge .spark{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .mist h2{margin-top:26px;font-size:clamp(2.2rem,5.2vw,4rem);letter-spacing:-.04em;line-height:1.03}
  .mist h2 .grad{background:linear-gradient(100deg,#5aa8ff,#a5c8ff);-webkit-background-clip:text;background-clip:text;color:transparent}
  .mist .quiet{margin:26px auto 0;max-width:640px}
  .mist-ctas{margin-top:40px;display:flex;gap:14px;flex-wrap:wrap;justify-content:center}

  /* ---------- stats band ---------- */
  .stats{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#07080a}
  .stats-grid{display:grid;grid-template-columns:repeat(4,1fr)}
  @media(max-width:820px){.stats-grid{grid-template-columns:repeat(2,1fr)}}
  .stat{padding:clamp(30px,4vw,52px) 26px;border-right:1px solid var(--line)}
  .stat:last-child{border-right:0}
  @media(max-width:820px){.stat:nth-child(2){border-right:0}.stat:nth-child(1),.stat:nth-child(2){border-bottom:1px solid var(--line)}}
  .stat .m{font-size:clamp(2.4rem,4.4vw,3.4rem);font-weight:680;letter-spacing:-.04em;line-height:1;color:#fff}
  .stat .m .u{color:var(--accent-2)}
  .stat .l{margin-top:12px;color:rgba(255,255,255,.6);font-size:.96rem;line-height:1.45}

  /* ---------- capability marquee ---------- */
  .capabilities-sx{background:#07080a}
  .marq{margin:clamp(20px,3vw,40px) 0 0;display:grid;gap:14px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
  .mrow{display:flex;gap:14px;width:max-content;will-change:transform}
  .mrow.a{animation:mL 40s linear infinite}
  .mrow.b{animation:mR 46s linear infinite}
  @keyframes mL{to{transform:translateX(-50%)}}
  @keyframes mR{from{transform:translateX(-50%)}to{transform:translateX(0)}}
  .mword{display:flex;align-items:center;gap:14px;font-size:clamp(1.4rem,3vw,2.4rem);font-weight:650;letter-spacing:-.03em;color:rgba(255,255,255,.4);white-space:nowrap}
  .mword::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);opacity:.6}
  .mword.hot{color:#fff}
  @media(prefers-reduced-motion:reduce){.mrow.a,.mrow.b{animation:none}}

  /* ---------- finale ---------- */
  .finale{position:relative;padding:0;background:#06080b;overflow:hidden}
  .finale-scene{position:relative;width:100%;aspect-ratio:1672/941;isolation:isolate;overflow:hidden}
  .finale-visual{position:absolute;inset:0;z-index:0}
  .finale-visual>img{display:block;width:100%;height:100%;object-fit:cover}
  .finale-visual::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(3,5,8,.92) 0%,rgba(3,5,8,.74) 26%,rgba(3,5,8,.4) 48%,rgba(3,5,8,.06) 72%),linear-gradient(180deg,rgba(3,5,8,.28),transparent 46%,rgba(3,5,8,.8) 100%)}
  .finale-copy{position:relative;z-index:3;height:100%;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding-left:clamp(24px,6vw,90px);max-width:min(640px,60vw)}
  .finale .eyebrow{margin-bottom:22px;color:var(--accent-2)}
  .finale h2{font-size:clamp(2.4rem,5.6vw,5rem);letter-spacing:-.045em;line-height:1.0;color:#fff;text-shadow:0 20px 64px rgba(0,0,0,.55);max-width:12ch}
  .finale .fp{margin-top:clamp(20px,2.6vw,32px);color:rgba(255,255,255,.76);font-size:clamp(1.02rem,1.4vw,1.24rem);line-height:1.55;max-width:34ch;text-shadow:0 3px 24px rgba(0,0,0,.5)}
  .finale .fp b{color:#fff;font-weight:550}
  .finale .hero-ctas{margin-top:clamp(28px,3.4vw,44px);justify-content:flex-start}
  .finale .btn--ghost{color:#fff;border-color:rgba(255,255,255,.2)}
  .finale .btn--ghost:hover{border-color:#5aa8ff}
  @media(max-width:860px){
    .finale-scene{aspect-ratio:auto;min-height:660px;background:linear-gradient(180deg,#06080b,#0b1118)}
    .finale-visual{inset:auto;bottom:0;left:calc(50% - 640px);width:1040px;aspect-ratio:1672/941;opacity:.5}
    .finale-visual::after{background:linear-gradient(180deg,#06080b 0%,rgba(6,8,11,.2) 40%,#06080b 100%)}
    .finale-copy{max-width:none;height:auto;padding:96px 24px 60px}
    .finale h2{max-width:14ch}.finale .fp{max-width:40ch}
  }

  /* ---------- faq ---------- */
  .faq-sx{background:#07080a;color:#fff}
  .faq-head{max-width:640px}
  .faq-sx .display{color:#fff}
  .faq-sx .kick .n{color:rgba(255,255,255,.5)}
  .faq-sx .kick .ln{background:rgba(255,255,255,.1)}
  .faq-sx details{border-top:1px solid rgba(255,255,255,.1)}
  .faq-sx details:last-of-type{border-bottom:1px solid rgba(255,255,255,.1)}
  summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:26px 4px;font-size:clamp(1.06rem,1.7vw,1.28rem);font-weight:600;letter-spacing:-.01em}
  summary::-webkit-details-marker{display:none}
  summary .pm{flex-shrink:0;width:30px;height:30px;border:1px solid rgba(255,255,255,.15);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.1rem;font-weight:400;color:rgba(255,255,255,.5);transition:transform .3s,color .3s,border-color .3s}
  details[open] summary .pm{transform:rotate(45deg);color:var(--accent-2);border-color:var(--accent)}
  .faq-a{padding:0 4px 30px;color:rgba(255,255,255,.6);max-width:660px;line-height:1.65}
  .faq-a b{color:#fff;font-weight:600}
  .faq-a a{color:var(--accent-2)}

  /* ---------- footer ---------- */
  footer{position:relative;background:#050608;border-top:1px solid rgba(255,255,255,.1);padding:clamp(72px,9vw,120px) 0 32px;overflow:hidden;color:#fff}
  footer::before{content:"";position:absolute;top:0;left:0;width:34%;height:2px;background:var(--accent)}
  .foot-main{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(300px,.6fr);gap:clamp(48px,9vw,120px);align-items:end}
  .foot-statement{max-width:13ch;font-size:clamp(2.5rem,5.4vw,5rem);font-weight:650;letter-spacing:-.045em;line-height:.98;color:#fff}
  .foot-statement span{display:block;color:#717681}
  .foot-side p{max-width:34ch;color:rgba(255,255,255,.5);font-size:clamp(1rem,1.3vw,1.14rem);line-height:1.6}
  .foot-actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:28px}
  .foot-link{color:#fff;font-size:.95rem;font-weight:600;border-bottom:1px solid rgba(255,255,255,.35);padding-bottom:4px;transition:color .2s,border-color .2s}
  .foot-link:hover{color:#fff;border-color:var(--accent)}
  .foot-bar{display:flex;justify-content:space-between;align-items:center;gap:28px;margin-top:clamp(64px,9vw,110px);padding-top:28px;border-top:1px solid rgba(255,255,255,.1);flex-wrap:wrap}
  .foot-brand{display:flex;align-items:center;gap:16px;min-width:0}
  .foot-brand img{display:block;width:auto;height:30px;max-width:180px;object-fit:contain;filter:brightness(0) invert(1)}
  .foot-brand span{color:#656a74;font-size:.76rem}
  .foot-nav{display:flex;align-items:center;gap:clamp(16px,2.4vw,32px);flex-wrap:wrap}
  .foot-nav a{color:rgba(255,255,255,.5);font-size:.86rem;transition:color .2s}
  .foot-nav a:hover{color:#fff}
  @media(max-width:760px){.foot-main{grid-template-columns:1fr;gap:36px}.foot-statement{max-width:11ch}.foot-bar{flex-direction:column;align-items:flex-start}}

  /* ===== experts UGC carousel (9:16) ===== */
  .ugc{position:relative;padding:clamp(66px,8vw,120px) 0;background:linear-gradient(180deg,var(--bg),#0a0c11 42%,var(--bg));overflow:hidden}
  .ugc-wrap{max-width:1580px;margin:0 auto;padding:0 clamp(20px,5vw,72px)}
  .ugc-head{display:flex;align-items:flex-end;justify-content:space-between;gap:36px;margin-bottom:clamp(30px,4vw,54px)}
  .ugc-head h2{font-size:clamp(2rem,4.4vw,3.4rem);font-weight:650;letter-spacing:-.032em;line-height:1.06;color:var(--ink);max-width:15ch}
  .ugc-head p{margin-top:18px;font-size:clamp(1rem,1.2vw,1.08rem);line-height:1.55;color:var(--dim);max-width:50ch}
  .ugc-nav{display:flex;gap:12px;flex-shrink:0;padding-bottom:6px}
  .ugc-arrow{width:52px;height:52px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.02);color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .25s,border-color .25s,opacity .25s,transform .25s}
  .ugc-arrow:hover:not(:disabled){background:var(--accent);border-color:var(--accent);color:#fff;transform:translateY(-2px)}
  .ugc-arrow:disabled{opacity:.3;cursor:default}
  .ugc-arrow svg{width:20px;height:20px}
  .ugc-track{display:flex;gap:clamp(14px,1.4vw,22px);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:10px 0 20px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .ugc-track::-webkit-scrollbar{display:none}
  .ucard{position:relative;flex:0 0 auto;width:clamp(230px,23vw,298px);aspect-ratio:9/16;margin:0;padding:0;border-radius:20px;overflow:hidden;background:#0a0b0e;border:1px solid rgba(255,255,255,.07);box-shadow:0 30px 60px -22px rgba(0,0,0,.72);scroll-snap-align:start;cursor:pointer;opacity:0;translate:0 32px;transition:opacity .6s ease var(--d,0ms),translate .7s cubic-bezier(.2,.7,.2,1) var(--d,0ms),transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s,border-color .4s}
  .ugc.in .ucard{opacity:1;translate:0 0}
  .ucard:hover{transform:translateY(-6px);box-shadow:0 46px 88px -24px rgba(0,0,0,.84),0 0 0 1px rgba(7,123,255,.34);border-color:rgba(7,123,255,.42)}
  .ucard video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#0a0b0e}
  .ucard::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;background:linear-gradient(180deg,rgba(4,5,9,.14),transparent 24%,transparent 60%,rgba(4,5,9,.52));transition:opacity .35s}
  .ucard.playing::after{opacity:.2}
  .uplay{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;pointer-events:none;transition:opacity .3s}
  .uplay svg{width:56px;height:56px;filter:drop-shadow(0 6px 16px rgba(0,0,0,.55));transition:transform .3s}
  .ucard:hover .uplay svg{transform:scale(1.09)}
  .ucard.playing .uplay{opacity:0}
  @media(max-width:640px){.ugc-head{flex-direction:column;align-items:flex-start;gap:20px}.ugc-nav{display:none}.ucard{width:73vw}}
  @media(prefers-reduced-motion:reduce){.ucard{opacity:1;translate:0 0}}

  /* portrait video lightbox (self-contained) */
  .lightbox{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:clamp(16px,4vw,60px);background:rgba(4,5,8,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);opacity:0;pointer-events:none;transition:opacity .35s}
  .lightbox.open{opacity:1;pointer-events:auto}
  .lb-inner{position:relative;border-radius:16px;overflow:hidden;background:#000;box-shadow:0 50px 130px rgba(0,0,0,.85);transform:scale(.95);transition:transform .4s cubic-bezier(.2,.7,.2,1);width:min(92vw,460px);height:min(88vh,818px);max-width:460px;aspect-ratio:9/16}
  .lightbox.open .lb-inner{transform:none}
  .lb-inner video{width:100%;height:100%;object-fit:contain;display:block;background:#000}
  .lb-close{position:absolute;top:14px;right:14px;z-index:4;width:46px;height:46px;border-radius:50%;background:rgba(10,12,16,.6);border:1px solid rgba(255,255,255,.2);color:#fff;font-size:1.4rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s}
  .lb-close:hover{background:var(--accent);border-color:transparent}

  /* ===== recent teardowns carousel ===== */
  .tdc{position:relative;padding:clamp(66px,8vw,120px) 0;background:var(--bg);overflow:hidden}
  .tdc-wrap{max-width:1580px;margin:0 auto;padding:0 clamp(20px,5vw,72px)}
  .tdc-head{display:flex;align-items:flex-end;justify-content:space-between;gap:36px;margin-bottom:clamp(30px,4vw,54px)}
  .tdc-headtext{max-width:60ch}
  .tdc-head h2{font-size:clamp(2rem,4.4vw,3.4rem);font-weight:650;letter-spacing:-.032em;line-height:1.06;color:var(--ink);max-width:16ch}
  .tdc-head p{margin-top:18px;font-size:clamp(1rem,1.2vw,1.08rem);line-height:1.55;color:var(--dim);max-width:52ch}
  .tdc-browse{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-size:.9rem;font-weight:600;color:var(--accent-2)}
  .tdc-browse svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
  .tdc-browse:hover svg{transform:translateX(4px)}
  .tdc-nav{display:flex;gap:12px;flex-shrink:0;padding-bottom:6px}
  .tdc-track{display:flex;gap:clamp(14px,1.4vw,22px);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:10px 0 20px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .tdc-track::-webkit-scrollbar{display:none}
  .tdc-card{position:relative;flex:0 0 auto;width:clamp(240px,24vw,308px);border-radius:20px;overflow:hidden;background:var(--panel);border:1px solid rgba(255,255,255,.07);box-shadow:0 30px 60px -22px rgba(0,0,0,.72);scroll-snap-align:start;display:flex;flex-direction:column;opacity:0;translate:0 32px;transition:opacity .6s ease var(--d,0ms),translate .7s cubic-bezier(.2,.7,.2,1) var(--d,0ms),transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s,border-color .4s}
  .tdc.in .tdc-card{opacity:1;translate:0 0}
  .tdc-card:hover{transform:translateY(-6px);box-shadow:0 46px 88px -24px rgba(0,0,0,.84),0 0 0 1px rgba(7,123,255,.34);border-color:rgba(7,123,255,.42)}
  .tdc-media{position:relative;aspect-ratio:4/5;overflow:hidden}
  .tdc-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
  .tdc-card:hover .tdc-media img{transform:scale(1.05)}
  .tdc-media::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 52%,rgba(6,8,12,.74))}
  .tdc-cat{position:absolute;left:12px;top:12px;z-index:2;font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:#cfe0f6;background:rgba(8,12,20,.55);border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:5px 10px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
  .tdc-body{padding:16px 18px 20px;display:flex;flex-direction:column;gap:6px}
  .tdc-brand{font-size:1.12rem;font-weight:650;letter-spacing:-.02em;color:var(--ink)}
  .tdc-angle{font-size:.9rem;line-height:1.45;color:var(--dim)}
  .tdc-foot{margin-top:8px;display:flex;align-items:center;justify-content:space-between;gap:10px}
  .tdc-stat{font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;color:var(--accent-2)}
  .tdc-read{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:600;color:var(--ink);opacity:.72;transition:opacity .2s,gap .2s}
  .tdc-read svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .tdc-card:hover .tdc-read{opacity:1;gap:9px}
  @media(max-width:640px){.tdc-head{flex-direction:column;align-items:flex-start;gap:20px}.tdc-nav{display:none}.tdc-card{width:74vw}}
  @media(prefers-reduced-motion:reduce){.tdc-card{opacity:1;translate:0 0}}