/* ==========================================================================
   FileInize — the site, 2026 edition ("Molten").

   One idea carried through every surface: a warm black, lit from one side.
   The dashboard in the app is drawn the same way — sunrise arcs, eclipses,
   beams of light on dark glass — so the site borrows its language rather
   than inventing a second one.

   Palette is read from the dashboard itself (orange accent on warm black).
   System fonts only: the site makes no request to any third party, which is
   the same promise the app makes.
   ========================================================================== */

:root{
  --bg:#06050B;
  --bg-2:#0C0A14;
  --ink:#F6F4FB;
  --ink-2:#B1ACC4;
  --ink-3:#7B7692;

  --o0:#4F4099;
  --o1:#8A66FF;
  --o2:#A98BFF;
  --o3:#E7B4FA;
  --pos:#4EE2A2;

  --line:rgba(255,255,255,.085);
  --line-2:rgba(255,255,255,.14);

  --card-a:rgba(38,29,66,.74);
  --card-b:rgba(13,10,24,.78);

  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --col:1180px;

  /* FileKind.color — straight from the app */
  --k-audio:#FF453A; --k-video:#5E9BFF; --k-image:#FFB340; --k-doc:#E0E0E0;
  --k-archive:#C792EA; --k-code:#4FD1C5; --k-folder:#8E8E93;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:90px; overscroll-behavior-x:none}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:400 16px/1.6 var(--sans); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* nothing may pan the page sideways: `clip` clips without making a scroll container, so the pinned scenes keep sticking */
@supports (overflow:clip){ html{overflow-x:clip} body{overflow-x:clip} }
img,svg{max-width:100%; display:block}
p{margin:0}
a{color:inherit}
::selection{background:rgba(138,102,255,.35)}
.wrap{width:100%; max-width:var(--col); margin:0 auto; padding:0 28px}
.ic{width:1em; height:1em; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex:none}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* the page's own atmosphere: a low warm haze that never moves */
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(70% 50% at 50% 110%, rgba(138,102,255,.10), transparent 70%),
    linear-gradient(180deg,#05040A 0%,#080610 50%,#0B0814 100%);
}

/* ---------------- type ---------------- */
h1,h2,h3{margin:0; font-weight:600; text-wrap:balance}
h1{font-size:clamp(44px,7.4vw,96px); line-height:.98; letter-spacing:-.048em}
h2{font-size:clamp(34px,4.6vw,60px); line-height:1.02; letter-spacing:-.042em}
h3{font-size:19px; line-height:1.25; letter-spacing:-.018em}
.metal{
  background:linear-gradient(180deg,#fff 0%,#EEE9FA 38%,#8D87A8 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.metal em,h1 em,h2 em{
  font-style:normal;
  background:linear-gradient(100deg,#F3C4FA 0%,var(--o2) 42%,var(--o1) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.lede{font-size:clamp(17px,1.5vw,20px); line-height:1.55; color:var(--ink-2); max-width:56ch; text-wrap:pretty}
.eyebrow{
  display:inline-flex; align-items:center; gap:9px; height:32px; padding:0 15px 0 12px; border-radius:99px;
  font:500 12.5px/1 var(--sans); letter-spacing:.02em; color:var(--ink-2);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid var(--line); box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.eyebrow .ic{font-size:14px; color:var(--o2)}
.dot{width:7px; height:7px; border-radius:50%; background:var(--o2); box-shadow:0 0 0 3px rgba(160,124,255,.18), 0 0 14px 2px rgba(138,102,255,.8); animation:pulse 2.8s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 5px rgba(160,124,255,.06), 0 0 20px 4px rgba(138,102,255,.55)}}
.sec-head{text-align:center; display:flex; flex-direction:column; align-items:center; gap:22px; margin-bottom:64px}
.sec-head .lede{margin:0 auto}
.num{font-weight:300; letter-spacing:-.03em; font-variant-numeric:tabular-nums}

/* ---------------- buttons ---------------- */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  height:52px; padding:0 26px; border-radius:99px; border:1px solid transparent;
  font:600 16px/1 var(--sans); letter-spacing:-.01em; text-decoration:none; cursor:pointer; overflow:hidden;
  transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, background .25s, border-color .25s;
}
.btn .ic{font-size:18px; transition:transform .25s}
.btn:hover .ic.go{transform:translateX(3px)}
.btn-primary{
  color:#FFFFFF;
  background:linear-gradient(180deg,#B08CFF 0%,#8B62F4 55%,#7648E8 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 6px rgba(60,30,140,.35),
             0 10px 34px -6px rgba(138,102,255,.62), 0 0 0 1px rgba(146,112,255,.5);
}
.btn-primary::after{
  content:""; position:absolute; top:0; bottom:0; width:60%; left:-80%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent); transform:skewX(-18deg);
  transition:left .7s cubic-bezier(.2,.8,.2,1);
}
.btn-primary:hover{transform:translateY(-2px); box-shadow:inset 0 1px 0 rgba(255,255,255,.6), inset 0 -2px 6px rgba(60,30,140,.35), 0 16px 44px -6px rgba(138,102,255,.8), 0 0 0 1px rgba(150,118,255,.7)}
.btn-primary:hover::after{left:130%}
.btn-primary .amt{font-weight:500; opacity:.7}
.btn-ghost{
  color:var(--ink); background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.025));
  border-color:var(--line-2); box-shadow:inset 0 1px 0 rgba(255,255,255,.07); backdrop-filter:blur(10px);
}
.btn-ghost:hover{transform:translateY(-2px); border-color:rgba(165,132,255,.45); background:linear-gradient(180deg,rgba(150,118,255,.14),rgba(255,255,255,.03))}
.btn-sm{height:40px; padding:0 18px; font-size:14.5px}
.btn[aria-disabled=true]{opacity:.5; pointer-events:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--o2); outline-offset:3px; border-radius:12px}

/* ---------------- nav ---------------- */
.nav{
  position:fixed; z-index:60; top:14px; left:50%; transform:translateX(-50%);
  width:min(1120px, calc(100% - 28px)); height:58px; padding:0 8px 0 20px;
  display:flex; align-items:center; gap:24px; border-radius:99px;
  background:rgba(19,15,34,.52); backdrop-filter:blur(22px) saturate(160%); -webkit-backdrop-filter:blur(22px) saturate(160%);
  border:1px solid var(--line); box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 18px 50px -20px #000;
  transition:background .3s, border-color .3s;
}
.nav.scrolled{background:rgba(11,9,22,.78); border-color:var(--line-2)}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none; margin-right:auto; font-weight:600; font-size:17px; letter-spacing:-.025em}
.brand svg{width:26px; height:26px}
.nav-links{display:flex; gap:4px}
.nav-links a{font-size:14.5px; color:var(--ink-2); text-decoration:none; padding:8px 14px; border-radius:99px; transition:color .2s, background .2s}
.nav-links a:hover{color:var(--ink); background:rgba(255,255,255,.06)}
.nav-cta{margin-left:6px}
.menu-btn{display:none; width:42px; height:42px; border-radius:50%; border:1px solid var(--line-2); background:rgba(255,255,255,.05); color:var(--ink); place-items:center; cursor:pointer}
.menu-btn .ic{font-size:20px}
.sheet{
  position:fixed; z-index:59; inset:0; padding:88px 16px 24px; display:none; flex-direction:column; gap:6px;
  background:rgba(6,5,11,.9); backdrop-filter:blur(26px); -webkit-backdrop-filter:blur(26px);
}
.sheet.open{display:flex}
.sheet a{font-size:26px; font-weight:600; letter-spacing:-.03em; text-decoration:none; padding:14px 12px; border-bottom:1px solid var(--line)}
.sheet .btn{margin-top:18px; font-size:17px; border:1px solid transparent}
body.locked{overflow:hidden}

/* ---------------- reveal ---------------- */
/* hidden only where a script will reveal them again: the `js` class is set in the <head> (without scripting the page just shows) */
.js .rv{opacity:0; translate:0 34px; scale:.985; filter:blur(8px); transition:opacity 1s cubic-bezier(.2,.7,.2,1) var(--d,0s), translate 1.1s cubic-bezier(.16,.8,.2,1) var(--d,0s), scale 1.1s cubic-bezier(.16,.8,.2,1) var(--d,0s), filter 1s var(--d,0s)}
.rv.in{opacity:1; translate:none; scale:1; filter:none}
/* headings rise word by word instead */
.rv.split{opacity:1; translate:none; scale:1; filter:none; transition:none}
.split .w{display:inline-block; overflow:hidden; vertical-align:top; padding:0 .04em .16em; margin:0 -.04em -.16em}
.split .wi{display:inline-block; transform:translateY(112%) rotate(5deg); transform-origin:0 100%; transition:transform 1.15s cubic-bezier(.16,.8,.16,1) calc(var(--d,0s) + var(--i)*62ms)}
.split.in .wi{transform:none}
.metal.split{background:none; color:inherit}
.metal.split .wi{background:linear-gradient(180deg,#fff 10%,#EEE9FA 46%,#8D87A8 130%); -webkit-background-clip:text; background-clip:text; color:transparent}
.split em{background:none !important; color:inherit !important}
.metal.split em .wi,.split em .wi{background:linear-gradient(100deg,#F3C4FA 0%,#A98BFF 45%,#8A66FF 100%); -webkit-background-clip:text; background-clip:text; color:transparent}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{position:relative; padding:172px 0 300px; text-align:center; overflow-x:clip; overflow-y:visible; isolation:isolate}
.hero::after{content:""; position:absolute; left:0; right:0; bottom:0; height:260px; z-index:4; pointer-events:none; background:linear-gradient(180deg,transparent,var(--bg) 88%)}
.hero-fx{position:absolute; inset:0; z-index:-1; pointer-events:none}
.beam{
  position:absolute; top:-30px; left:50%; width:1500px; height:1100px; margin-left:-750px;
  background:conic-gradient(from 0deg at 50% 0%, transparent 0 148deg, rgba(146,112,255,0) 151deg,
    rgba(142,106,255,.36) 166deg, rgba(232,190,250,.78) 180deg, rgba(142,106,255,.36) 194deg, rgba(146,112,255,0) 209deg, transparent 212deg);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.72) 40%,transparent 88%);
  mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.72) 40%,transparent 88%);
  filter:blur(9px); animation:breathe 7s ease-in-out infinite;
}
.beam.b2{transform:rotate(-26deg); transform-origin:50% 0; opacity:.55; animation-delay:-2s; width:1100px; margin-left:-550px}
.beam.b3{transform:rotate(24deg); transform-origin:50% 0; opacity:.42; animation-delay:-4.5s; width:1100px; margin-left:-550px}
@keyframes breathe{50%{opacity:.62}}
.beam.b2{animation-name:breathe2}.beam.b3{animation-name:breathe2}
@keyframes breathe2{50%{opacity:.25}}
.lamp{
  position:absolute; top:-46px; left:50%; width:640px; height:120px; margin-left:-320px;
  background:radial-gradient(50% 50% at 50% 50%, rgba(246,224,252,.98) 0%, rgba(150,118,255,.6) 34%, transparent 72%);
  filter:blur(12px);
}
.lamp::after{
  content:""; position:absolute; left:26%; right:26%; top:56px; height:3px; border-radius:3px;
  background:linear-gradient(90deg,transparent,#fff 30%,#fff 70%,transparent); box-shadow:0 0 22px 6px rgba(225,180,250,.85);
}
.dots{
  position:absolute; inset:0;
  background-image:radial-gradient(rgba(176,146,255,.42) 1px, transparent 1.6px); background-size:24px 24px;
  -webkit-mask-image:radial-gradient(58% 46% at 50% 26%, #000 0%, transparent 78%);
  mask-image:radial-gradient(58% 46% at 50% 26%, #000 0%, transparent 78%);
  opacity:.55;
}
.hero .eyebrow{margin-bottom:28px}
.hero h1{max-width:13ch; margin:0 auto}
.hero .lede{margin:28px auto 0; text-align:center}
.cta{display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin-top:38px}
.fine{font-size:13.5px; color:var(--ink-3); margin-top:18px}

.stats{display:flex; justify-content:center; margin-top:64px}
.stats > div{padding:0 clamp(18px,3.4vw,46px); text-align:left; border-left:1px solid var(--line)}
.stats > div:first-child{border-left:0}
.stats b{display:block; font-size:clamp(28px,3.6vw,46px); line-height:1; font-weight:300; letter-spacing:-.04em; color:var(--ink); font-variant-numeric:tabular-nums}
.stats > div > span{display:block; margin-top:8px; font-size:13px; color:var(--ink-3); line-height:1.35}

/* the window */
.stage{position:relative; margin:84px auto 0; max-width:1180px; padding:0 20px; perspective:1800px}
.win{
  position:relative; z-index:1; border-radius:22px; overflow:hidden; background:#0B0912;
  transform-origin:50% 0; transform:rotateX(var(--rx,16deg)) translateY(var(--ty,0px)) scale(var(--sc,.94));
  box-shadow:0 0 0 1px rgba(255,255,255,.1), inset 0 1px 0 rgba(255,255,255,.14);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 58%,rgba(0,0,0,.55) 82%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 58%,rgba(0,0,0,.55) 82%,transparent 100%);
  will-change:transform;
}
.win::after{ /* rim light, top edge */
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(180deg,rgba(225,180,250,.16),transparent 22%);
}
.win-bar{display:flex; align-items:center; gap:8px; height:34px; padding:0 16px; background:linear-gradient(180deg,#161226,#100C1C); border-bottom:1px solid var(--line)}
.win-bar i{width:11px; height:11px; border-radius:50%; background:#3A3352}
.win-bar i:nth-child(1){background:#FF5F57}.win-bar i:nth-child(2){background:#FEBC2E}.win-bar i:nth-child(3){background:#28C840}
.win-bar span{margin:0 auto; transform:translateX(-24px); font-size:12px; color:var(--ink-3); letter-spacing:.01em}
.win img{width:100%; height:auto}
.stage::before{content:""; position:absolute; left:6%; right:6%; top:8%; bottom:26%; z-index:0; background:radial-gradient(60% 55% at 50% 50%, rgba(138,102,255,.22), transparent 72%); filter:blur(30px); pointer-events:none} /* ends behind the window, not at its foot: a glow that stops at a box's edge is a seam */
.horizon{ /* cords grow out of the window's foot and run down the page, drawn the way the app draws them on its dashboard cards: a glow, a dark channel, the colour, a bright core; round corners; a flare where one forks; a pill on the way; a glass node where it ends; a faint field of dots beneath. Still. */
  position:absolute; left:0; right:0; top:calc(100% - 16px); height:470px; z-index:0; pointer-events:none;
}
.horizon::before{ /* the dots beneath, brightest under the window */
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,.2) 0.6px, transparent 1.1px); background-size:14px 14px; background-position:50% 0;
  -webkit-mask-image:radial-gradient(52% 90% at 50% 0%, #000 0%, transparent 92%);
  mask-image:radial-gradient(52% 90% at 50% 0%, #000 0%, transparent 92%);
  opacity:.8;
}
.branches{position:absolute; left:50%; top:0; width:1200px; max-width:none; height:470px; margin-left:-600px; overflow:visible; mix-blend-mode:screen;
  /* in from the window's foot, and out into the next section: the cords are gone before they end */
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,0.000) 0.0%,rgba(0,0,0,0.074) 4.3%,rgba(0,0,0,0.259) 8.7%,rgba(0,0,0,0.500) 13.0%,rgba(0,0,0,0.741) 17.3%,rgba(0,0,0,0.926) 21.7%,rgba(0,0,0,1.000) 26.0%,rgba(0,0,0,1.000) 34.0%,rgba(0,0,0,0.876) 37.7%,rgba(0,0,0,0.750) 41.4%,rgba(0,0,0,0.627) 45.1%,rgba(0,0,0,0.509) 48.9%,rgba(0,0,0,0.401) 52.6%,rgba(0,0,0,0.304) 56.3%,rgba(0,0,0,0.220) 60.0%,rgba(0,0,0,0.150) 63.7%,rgba(0,0,0,0.094) 67.4%,rgba(0,0,0,0.053) 71.1%,rgba(0,0,0,0.025) 74.9%,rgba(0,0,0,0.009) 78.6%,rgba(0,0,0,0.001) 82.3%,rgba(0,0,0,0.000) 86.0%); mask-image:linear-gradient(180deg,rgba(0,0,0,0.000) 0.0%,rgba(0,0,0,0.074) 4.3%,rgba(0,0,0,0.259) 8.7%,rgba(0,0,0,0.500) 13.0%,rgba(0,0,0,0.741) 17.3%,rgba(0,0,0,0.926) 21.7%,rgba(0,0,0,1.000) 26.0%,rgba(0,0,0,1.000) 34.0%,rgba(0,0,0,0.876) 37.7%,rgba(0,0,0,0.750) 41.4%,rgba(0,0,0,0.627) 45.1%,rgba(0,0,0,0.509) 48.9%,rgba(0,0,0,0.401) 52.6%,rgba(0,0,0,0.304) 56.3%,rgba(0,0,0,0.220) 60.0%,rgba(0,0,0,0.150) 63.7%,rgba(0,0,0,0.094) 67.4%,rgba(0,0,0,0.053) 71.1%,rgba(0,0,0,0.025) 74.9%,rgba(0,0,0,0.009) 78.6%,rgba(0,0,0,0.001) 82.3%,rgba(0,0,0,0.000) 86.0%); opacity:.5}
@media (max-width:1200px){.branches{width:100%; margin-left:0; left:0}}
.branches g{opacity:calc(var(--k,1))}
.branches path{fill:none; stroke-linecap:round; stroke-linejoin:round}
.branches .c-glow{stroke:#8A66FF; stroke-width:8; opacity:.5}
.branches .c-dark{stroke:#000; stroke-width:6; opacity:.55}
.branches .c-halo{stroke:#A98BFF; stroke-width:3; opacity:.6}
.branches .c-core{stroke:#F3EAFF; stroke-width:1.2; opacity:.85}
.branches .flare path{stroke:#EBDDFF; stroke-width:2; opacity:.7}

/* floating glass notes around the window */
.float{
  position:absolute; z-index:5; display:flex; align-items:center; gap:12px; padding:12px 18px 12px 12px; border-radius:18px;
  background:linear-gradient(180deg,rgba(58,46,94,.72),rgba(19,15,34,.78)); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.12); box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 30px 60px -20px #000, 0 0 50px -14px rgba(138,102,255,.5);
  text-align:left; animation:bob 8s ease-in-out infinite;
}
.float .fi{width:40px; height:40px; border-radius:12px; display:grid; place-items:center; flex:none; color:#FFFFFF; background:linear-gradient(180deg,#B08CFF,#7B52EE); box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 0 22px -2px rgba(138,102,255,.7)}
.float .fi .ic{font-size:20px}
.float .fi.g{color:var(--pos); background:rgba(78,226,162,.12); border:1px solid rgba(78,226,162,.3); box-shadow:0 0 22px -6px rgba(78,226,162,.6)}
.float b{display:block; font-size:14px; font-weight:600; color:var(--ink); letter-spacing:-.01em; line-height:1.2}
.float small{display:block; font-size:12px; color:var(--ink-3); margin-top:3px; line-height:1.2}
.f1{left:-9%; top:-8%; animation-delay:-1s}
.f2{right:-9.5%; top:63%; animation-delay:-4s}
.f3{left:-6.5%; bottom:12%; animation-delay:-6s}
@keyframes bob{50%{transform:translateY(-12px)}}
@media (max-width:1360px){.float{display:none}}

/* ==========================================================================
   MARQUEE
   ========================================================================== */
.marquee{position:relative; padding:64px 0 24px; overflow:hidden}
.marquee small{display:block; text-align:center; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-bottom:26px}
.track{display:flex; gap:14px; width:max-content; animation:slide 60s linear infinite}
.marquee:hover .track{animation-play-state:paused}
/* the ends fade by mask, not by a bar of background colour laid over the strip: that bar painted the page's black over the light behind it, top to bottom, and showed as a box where the section began */
.marquee{-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent); mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
@keyframes slide{to{transform:translateX(-50%)}}
.chip{
  display:inline-flex; align-items:center; gap:10px; height:44px; padding:0 20px 0 16px; border-radius:99px; white-space:nowrap;
  font-size:15px; color:var(--ink-2); background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.015)); border:1px solid var(--line);
}
.chip .ic{font-size:17px; color:var(--o2)}

/* ==========================================================================
   SECTIONS
   ========================================================================== */
section{position:relative}
.pad{padding:130px 0}

/* ---------- glass card ---------- */
.gl{
  position:relative; border-radius:28px; overflow:hidden; isolation:isolate;
  background:linear-gradient(180deg,var(--card-a),var(--card-b));
  border:1px solid rgba(255,255,255,.07);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 40px 90px -50px #000;
}
.gl::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:0; transition:opacity .35s;
  background:radial-gradient(460px circle at var(--mx,50%) var(--my,0%), rgba(146,112,255,.17), transparent 62%);
}
.gl::after{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none; opacity:0; transition:opacity .35s;
  background:radial-gradient(280px circle at var(--mx,50%) var(--my,0%), rgba(172,140,255,.85), transparent 62%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.gl:hover::before,.gl:hover::after{opacity:1}
.bento{perspective:1600px}
.gl[data-tilt]{transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition:transform .5s cubic-bezier(.2,.8,.2,1); will-change:transform}
.gl[data-tilt]:hover{transition:transform .12s linear}
.glow{position:absolute; left:-10%; right:-10%; bottom:-46%; height:72%; z-index:-1; pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%, rgba(138,102,255,.42), transparent 70%); filter:blur(24px)}

/* ---------- dashboard camera ---------- */
.cam-sec{height:700vh}
/* the pinned frame centres its copy in the window, which leaves a wide empty band at the top of the section — drawn up into the section above, which has its own air at the foot */
@media (min-width:901px){
  .cam-sec{margin-top:calc(-1 * clamp(90px, 24vh, 260px)); margin-bottom:calc(-1 * clamp(50px, 14vh, 150px))}
  /* the air between sections: each section brings its own at top and foot, and two of them end up side by side */
  #filemanager{padding-bottom:84px}
  #features{padding-bottom:64px}
  #privacy{padding-bottom:84px}
}
.cam-stick{
  position:sticky; top:0; height:100vh; min-height:640px; display:grid; grid-template-columns:minmax(300px,400px) minmax(0,1fr);
  gap:clamp(32px,5vw,72px); align-items:center; max-width:1320px; margin:0 auto; padding:80px 28px 40px;
}
.cam-copy h2{font-size:clamp(34px,3.9vw,54px)}
.cam-copy .lede{margin-top:22px; font-size:17px}
.cam-list{list-style:none; margin:38px 0 0; padding:0; position:relative}
.cam-list::before{content:""; position:absolute; left:5px; top:10px; bottom:10px; width:2px; background:var(--line); border-radius:2px}
.cam-list::after{content:""; position:absolute; left:5px; top:10px; width:2px; border-radius:2px; height:var(--cpx,0px); max-height:calc(100% - 20px);
  background:linear-gradient(180deg,var(--o2),var(--o1)); box-shadow:0 0 14px 2px rgba(138,102,255,.7)}
.cam-list li{position:relative; padding:0 0 22px 32px; opacity:.38; transition:opacity .45s}
.cam-list li:last-child{padding-bottom:0}
.cam-list li::before{content:""; position:absolute; left:0; top:6px; width:12px; height:12px; border-radius:50%; background:#251D3E; border:2px solid #3B3070; transition:all .4s; z-index:1}
.cam-list li.on{opacity:1}
.cam-list li.on::before{background:var(--o2); border-color:var(--o3); box-shadow:0 0 0 4px rgba(160,124,255,.18), 0 0 18px 3px rgba(138,102,255,.85)}
.cam-list h3{font-size:18px}
.cam-list p{font-size:14.5px; line-height:1.55; color:var(--ink-2); margin-top:6px; max-height:0; overflow:hidden; opacity:0; transition:max-height .5s, opacity .5s}
.cam-list li.on p{max-height:150px; opacity:1}
.cam-list .tag{display:inline-block; margin-left:8px; font:500 11px/1 var(--mono); padding:4px 8px; border-radius:99px; color:var(--pos); background:rgba(78,226,162,.1); border:1px solid rgba(78,226,162,.22); vertical-align:2px}
.cam-view{
  position:relative; width:100%; height:min(74vh,700px); border-radius:26px; overflow:hidden; background:#0B0912;
  box-shadow:0 0 0 1px rgba(255,255,255,.1), inset 0 1px 0 rgba(255,255,255,.12), 0 60px 120px -30px #000, 0 0 140px -30px rgba(138,102,255,.4);
}
.cam-m{display:none}

/* ---------- bento ---------- */
.bento{display:grid; grid-template-columns:repeat(6,1fr); gap:16px}
.bento .gl{padding:30px 30px 32px; display:flex; flex-direction:column; min-height:400px}
.b4{grid-column:span 4}.b3{grid-column:span 3}.b2{grid-column:span 2}
.bento h3{font-size:22px; letter-spacing:-.025em}
.bento p.d{margin-top:10px; font-size:15px; line-height:1.55; color:var(--ink-2); max-width:44ch; text-wrap:pretty}
.viz{flex:1; display:flex; align-items:center; justify-content:center; padding:6px 0 26px; position:relative; min-height:170px}
.bento .txt{margin-top:auto}

/* mini UI shared */
.mini{width:100%; border-radius:16px; background:rgba(8,6,17,.7); border:1px solid var(--line); box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 20px 40px -20px #000; font-size:12.5px; overflow:hidden}
.mini .h{display:grid; grid-template-columns:1fr 70px 64px 66px; gap:8px; padding:10px 14px; color:var(--ink-3); font-size:11px; letter-spacing:.06em; text-transform:uppercase; border-bottom:1px solid var(--line)}
.mini .r{display:grid; grid-template-columns:1fr 70px 64px 66px; gap:8px; align-items:center; padding:9px 14px; border-bottom:1px solid rgba(255,255,255,.04); color:var(--ink-2)}
.mini .r:last-child{border-bottom:0}
.mini .r.sel{background:linear-gradient(90deg,rgba(138,102,255,.22),rgba(138,102,255,.08)); box-shadow:inset 2px 0 0 var(--o2)}
.mini .nm{display:flex; align-items:center; gap:10px; color:var(--ink); min-width:0}
.mini .nm span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mini .ki{width:24px; height:24px; border-radius:7px; display:grid; place-items:center; flex:none; background:color-mix(in srgb,var(--c) 22%,transparent); color:var(--c)}
.mini .ki .ic{font-size:13px}
.mini .bpm{color:var(--o3); font-variant-numeric:tabular-nums}
.mini .mut{color:var(--ink-3)}
.mini .sz{text-align:right;font-variant-numeric:tabular-nums}

.qbar{width:100%; display:grid; gap:14px}
.q{padding:16px 18px}
.q .top{display:flex; justify-content:space-between; align-items:center; color:var(--ink); font-size:13.5px; font-weight:500}
.q .top small{color:var(--ink-3); font-weight:400}
.q .pb{height:8px; border-radius:8px; background:rgba(255,255,255,.07); margin:14px 0 12px; overflow:hidden}
.q .pb i{display:block; height:100%; width:62%; border-radius:8px; background:linear-gradient(90deg,var(--o1),var(--o3)); box-shadow:0 0 16px rgba(138,102,255,.7); animation:fill 6s ease-in-out infinite}
@keyframes fill{0%{width:8%}55%,80%{width:92%}100%{width:8%}}
.q .row{display:flex; gap:8px}
.pill{display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 12px; border-radius:99px; font-size:12px; color:var(--ink-2); background:rgba(255,255,255,.06); border:1px solid var(--line)}
.pill .ic{font-size:13px}
.pill.hot{color:var(--o3); background:rgba(138,102,255,.14); border-color:rgba(150,118,255,.32)}
.toast{align-self:flex-start; display:inline-flex; align-items:center; gap:12px; padding:10px 10px 10px 16px; border-radius:99px; font-size:13px; color:var(--ink); background:rgba(25,19,44,.9); border:1px solid var(--line-2); box-shadow:0 14px 34px -12px #000}
.toast b{display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 12px; border-radius:99px; background:rgba(138,102,255,.18); color:var(--o3); font-weight:500}

.ren{width:100%}
.ren .steps{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px}
.ren .pair{display:grid; grid-template-columns:1fr 18px 1.25fr; gap:10px; align-items:center; padding:9px 14px; font-family:var(--mono); font-size:11.5px; border-bottom:1px solid rgba(255,255,255,.04)}
.ren .pair:last-child{border:0}
.ren .pair span:first-child{color:var(--ink-3); text-decoration:line-through; text-decoration-color:rgba(255,255,255,.2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ren .pair .ic{color:var(--o2); font-size:14px}
.ren .pair span:last-child{color:var(--o3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

.sleeves{position:relative; width:100%; height:190px}
.sleeve{position:absolute; width:128px; height:128px; border-radius:18px; border:1px solid rgba(255,255,255,.16); box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 26px 40px -14px #000; display:grid; place-items:center; color:rgba(255,255,255,.9); transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.sleeve .ic{font-size:34px; opacity:.9}
.sleeve:nth-child(1){left:calc(50% - 130px); top:34px; background:linear-gradient(150deg,#2E2266,#8A66FF); transform:rotate(-9deg)}
.sleeve:nth-child(2){left:calc(50% - 64px); top:12px; background:linear-gradient(150deg,#1D2C4A,#5E9BFF); transform:rotate(2deg); z-index:1}
.sleeve:nth-child(3){left:calc(50% + 0px); top:36px; background:linear-gradient(150deg,#3A1C4E,#C792EA); transform:rotate(11deg)}
.gl:hover .sleeve:nth-child(1){transform:rotate(-15deg) translateX(-14px)}
.gl:hover .sleeve:nth-child(3){transform:rotate(17deg) translateX(14px)}
.gl:hover .sleeve:nth-child(2){transform:rotate(0) translateY(-8px)}
.sleeve-label{position:absolute; left:50%; bottom:-6px; transform:translateX(-50%); white-space:nowrap}

.player{width:100%; padding:16px 18px 18px}
.player .meta{display:flex; align-items:center; gap:12px}
.player .art{width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:linear-gradient(150deg,#3A2A85,var(--o1)); color:#fff}
.player .art .ic{font-size:20px}
.player .t{color:var(--ink); font-weight:600; font-size:14px; line-height:1.2}
.player .s{display:flex; gap:6px; margin-top:6px}
.wave{display:flex; align-items:center; gap:3px; height:64px; margin-top:16px}
.wave i{flex:1; border-radius:3px; background:rgba(255,255,255,.14); height:var(--h,20px); transition:background .3s}
.wave i.p{background:linear-gradient(180deg,var(--o3),var(--o1)); box-shadow:0 0 10px rgba(138,102,255,.5)}
.player .tm{display:flex; justify-content:space-between; margin-top:10px; font:11px/1 var(--mono); color:var(--ink-3)}

.cmdk{width:100%}
.cmdk .in{display:flex; align-items:center; gap:12px; padding:14px 16px; border-bottom:1px solid var(--line); color:var(--ink); font-size:15px}
.cmdk .in .ic{color:var(--ink-3); font-size:17px}
.cmdk .in kbd{margin-left:auto; font:500 11px/1 var(--mono); color:var(--ink-3); border:1px solid var(--line-2); border-radius:6px; padding:4px 6px}
.caret{display:inline-block; width:2px; height:1.1em; vertical-align:-3px; background:var(--o2); margin-left:2px; animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.cmdk .grp{padding:10px 16px 4px; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}
.cmdk .it{display:flex; align-items:center; gap:12px; margin:0 8px; padding:9px 10px; border-radius:10px; color:var(--ink-2); font-size:13.5px}
.cmdk .it .ic{font-size:16px; color:var(--ink-3)}
.cmdk .it.on{background:linear-gradient(90deg,rgba(138,102,255,.24),rgba(138,102,255,.08)); color:var(--ink)}
.cmdk .it.on .ic{color:var(--o2)}
.cmdk .it em{margin-left:auto; font-style:normal; font-size:11.5px; color:var(--ink-3)}
.cmdk .pad2{height:8px}

.gitv{width:100%; display:grid; gap:12px}
.gitv .hd{display:flex; align-items:center; gap:10px; padding:14px 16px; color:var(--ink); font-size:14px; font-weight:500}
.gitv .hd .ic{color:var(--o2)}
.gitv .hd small{margin-left:auto; color:var(--ink-3); font-weight:400}
.gitv .f{display:flex; align-items:center; gap:12px; padding:9px 16px; border-top:1px solid rgba(255,255,255,.05); color:var(--ink-2); font-size:13px}
.gitv .f b{width:20px; height:20px; border-radius:6px; display:grid; place-items:center; font:600 11px/1 var(--mono); flex:none}
.gitv .m{color:#FFB340; background:rgba(255,179,64,.14)}
.gitv .a{color:var(--pos); background:rgba(78,226,162,.14)}
.gitv .u{color:var(--ink-3); background:rgba(255,255,255,.08)}
.gitv .ev{display:flex; gap:8px; flex-wrap:wrap}

/* ---------- three passes — the flow ---------- */
.flow{position:relative; max-width:1040px; margin:0 auto; display:grid; gap:64px; padding:6px 0}
.flow::before,.flow .fill{content:""; position:absolute; left:50%; top:0; bottom:0; width:2px; margin-left:-1px; border-radius:2px; background:rgba(255,255,255,.08)}
.flow .fill{bottom:auto; height:calc(100% * var(--fp,0)); background:linear-gradient(180deg,var(--o3),var(--o1)); box-shadow:0 0 18px 3px rgba(138,102,255,.85), 0 0 60px 6px rgba(120,84,240,.4)}
.step{position:relative; display:grid; grid-template-columns:1fr 1fr}
.step .node{position:absolute; left:50%; top:52px; width:16px; height:16px; margin:-8px 0 0 -8px; border-radius:50%; background:#251D3E; border:2px solid #4D4088; transition:all .5s; z-index:2}
.step.on .node{background:var(--o2); border-color:#F6DDFD; box-shadow:0 0 0 6px rgba(160,124,255,.16), 0 0 26px 6px rgba(138,102,255,.9)}
.step .gl{padding:30px 30px 28px; width:calc(100% - 60px)}
.step:nth-child(odd) .gl{grid-column:1; justify-self:start}
.step:nth-child(even) .gl{grid-column:2; justify-self:end}
.step .gl::marker{content:none}
.step .br{position:absolute; top:51px; height:2px; width:60px; background:linear-gradient(90deg,rgba(255,255,255,.08),rgba(255,255,255,.08)); transition:background .5s, box-shadow .5s}
.step:nth-child(odd) .br{left:calc(50% - 60px)}
.step:nth-child(even) .br{left:50%}
.step.on .br{background:linear-gradient(90deg,var(--o1),var(--o3)); box-shadow:0 0 14px rgba(138,102,255,.8)}
.step:nth-child(odd).on .br{background:linear-gradient(270deg,var(--o1),var(--o3))}
.step .no{font:600 12px/1 var(--mono); letter-spacing:.14em; color:var(--o2); text-transform:uppercase; margin-bottom:14px}
.step p{margin-top:10px; font-size:15px; color:var(--ink-2); line-height:1.6}
.sv{margin:22px 0 4px; height:74px; border-radius:14px; background:rgba(6,5,11,.6); border:1px solid var(--line); padding:14px 16px; display:flex; align-items:center}
.grid24{display:grid; grid-template-columns:repeat(16,1fr); gap:5px; width:100%}
.grid24 i{aspect-ratio:1; border-radius:3px; background:rgba(255,255,255,.1); transition:all .6s calc(var(--i)*22ms)}
.step.on .grid24 i:not(.k){opacity:.25}
.grid24 i.k{background:var(--o2)}
.step.on .grid24 i.k{box-shadow:0 0 10px rgba(138,102,255,.85)}
.blk{display:flex; width:100%; height:16px; border-radius:6px; overflow:hidden; background:rgba(255,255,255,.08); gap:2px}
.blk i{flex:1; background:rgba(255,255,255,.1)}
.blk i.h{flex:0 0 12%; background:linear-gradient(90deg,var(--o1),var(--o3)); box-shadow:0 0 14px rgba(138,102,255,.8)}
.blk i.mid{flex:1}
.full{width:100%}
.full .bar{height:16px; border-radius:6px; background:rgba(255,255,255,.08); overflow:hidden}
.full .bar i{display:block; height:100%; width:0; background:linear-gradient(90deg,var(--o1),var(--o3)); transition:width 1.6s cubic-bezier(.3,.7,.2,1) .3s; box-shadow:0 0 14px rgba(138,102,255,.7)}
.step.on .full .bar i{width:100%}
.full small{display:flex; justify-content:space-between; margin-top:8px; font:11px/1 var(--mono); color:var(--ink-3)}
.full small b{color:var(--pos); font-weight:500}

/* ---------- privacy ---------- */
.priv{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(40px,7vw,110px); align-items:center}
.eclipse-wrap{position:relative; display:grid; place-items:center; aspect-ratio:1; max-width:520px; margin:0 auto; width:100%}
.eclipse{
  position:relative; width:74%; aspect-ratio:1; border-radius:50%; background:#03020A;
  box-shadow:inset -34px 0 46px -20px var(--o1), inset -8px 0 10px -3px #F0CBFB, inset -70px 10px 90px -50px rgba(110,70,235,.75),
             0 0 0 1px rgba(150,118,255,.12), 0 0 140px -10px rgba(120,84,240,.5), 0 0 320px -40px rgba(110,70,235,.35);
  display:grid; place-items:center; text-align:center; animation:rot 24s ease-in-out infinite alternate;
}
@keyframes rot{from{box-shadow:inset -34px 0 46px -20px var(--o1), inset -8px 0 10px -3px #F0CBFB, inset -70px 10px 90px -50px rgba(110,70,235,.75), 0 0 0 1px rgba(150,118,255,.12), 0 0 140px -10px rgba(120,84,240,.5), 0 0 320px -40px rgba(110,70,235,.35)}
  to{box-shadow:inset -44px 6px 56px -22px var(--o1), inset -10px 2px 12px -3px #F0CBFB, inset -90px 20px 110px -50px rgba(110,70,235,.85), 0 0 0 1px rgba(150,118,255,.14), 0 0 170px -10px rgba(120,84,240,.6), 0 0 360px -40px rgba(110,70,235,.4)}}
.eclipse b{display:block; font-size:clamp(90px,13vw,168px); line-height:.9; font-weight:200; letter-spacing:-.06em; color:var(--ink); transform:translateX(-6%)}
.eclipse > div > span{display:block; margin-top:8px; font-size:14px; color:var(--ink-2); max-width:16ch; transform:translateX(-6%); line-height:1.4}
.ring{position:absolute; inset:0; border-radius:50%; border:1px dashed rgba(172,140,255,.22); animation:spin 90s linear infinite}
.ring.r2{inset:9%; border-color:rgba(172,140,255,.12); animation-duration:140s; animation-direction:reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.pts{display:grid; gap:14px; margin-top:34px}
.pt{display:grid; grid-template-columns:44px 1fr; gap:18px; padding:20px 22px; align-items:start}
.pt .ico{width:44px; height:44px; border-radius:13px; display:grid; place-items:center; color:var(--o2); background:linear-gradient(180deg,rgba(138,102,255,.2),rgba(138,102,255,.06)); border:1px solid rgba(150,118,255,.28); box-shadow:0 0 24px -6px rgba(138,102,255,.6)}
.pt .ico .ic{font-size:21px}
.pt h3{font-size:17px}
.pt p{margin-top:6px; font-size:14.5px; color:var(--ink-2); line-height:1.55}

/* ---------- numbers ---------- */
.specs{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:96px}
.spec{padding:26px 28px}
.spec small{display:block; font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--o2); margin-bottom:12px; font-weight:600}
.spec p{font-size:15px; line-height:1.55; color:var(--ink-2)}
.spec p b{color:var(--ink); font-weight:600}
.spec code{font:12.5px var(--mono); color:var(--o3); background:rgba(138,102,255,.1); padding:2px 6px; border-radius:6px}

/* ---------- pricing ---------- */
.buy{position:relative; padding:150px 0 130px; text-align:center; overflow:hidden; isolation:isolate}
.buy .horizon2{
  position:absolute; left:50%; top:210px; width:2400px; height:2400px; margin-left:-1200px; border-radius:50%; z-index:-1; background:var(--bg);
  box-shadow:0 -3px 0 rgba(240,196,250,.95), 0 -14px 40px rgba(150,118,255,.85), 0 -70px 170px rgba(120,84,240,.5), 0 -190px 340px rgba(110,70,235,.24);
}
.buy .beam{opacity:.5; top:-60px}
.buy-card{position:relative; max-width:640px; margin:0 auto; padding:52px 44px 44px}
.price{font-size:clamp(96px,15vw,168px); line-height:.9; font-weight:200; letter-spacing:-.06em; background:linear-gradient(180deg,#fff,#D9C9F7 55%,var(--o2)); -webkit-background-clip:text; background-clip:text; color:transparent}
.price sup{font-size:.4em; vertical-align:top; position:relative; top:.16em; margin-right:4px; font-weight:300}
.buy-card .lede{margin:22px auto 0; font-size:17px}
.ticks{list-style:none; margin:32px 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:12px 22px; text-align:left}
.ticks li{display:flex; gap:10px; align-items:flex-start; font-size:14.5px; color:var(--ink-2); line-height:1.4}
.ticks .ic{color:var(--pos); font-size:18px; margin-top:0; stroke-width:2.2}
.buy-card .cta{margin-top:34px}
.avail{margin-top:20px; font-size:13.5px; color:var(--ink-3)}
.avail b{color:var(--o2); font-weight:600}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line); padding:44px 0 56px; background:linear-gradient(180deg,transparent,rgba(138,102,255,.04))}
.foot{display:flex; align-items:center; gap:30px; flex-wrap:wrap}
.foot a{font-size:14px; color:var(--ink-2); text-decoration:none; transition:color .2s}
.foot a:hover{color:var(--ink)}
.foot .brand{margin-right:12px; color:var(--ink)}
.foot small{margin-left:auto; font-size:13px; color:var(--ink-3)}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1040px){
  .nav-links{display:none}
  .menu-btn{display:grid}
  .nav-cta{display:none}
  .nav{padding:0 8px 0 18px}
  .menu-btn{margin-left:auto}
  .brand{margin-right:0}
  .b4,.b3{grid-column:span 6}
  .b2{grid-column:span 3}
  .specs{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .cam-sec{height:auto}
  .cam-stick{position:static; height:auto; min-height:0; display:block; padding:0 20px}
  .cam-view{display:none}
  .cam-list{margin-top:44px}
  .cam-list::before,.cam-list::after{display:none}
  .cam-list li{opacity:1; padding:0 0 44px 0}
  .cam-list li::before{display:none}
  .cam-list p{max-height:none; opacity:1}
  .cam-m{display:block; margin-top:18px; width:100%; height:auto; border-radius:18px; border:1px solid var(--line-2); box-shadow:0 30px 60px -30px #000, 0 0 60px -20px rgba(138,102,255,.4)}
  .priv{grid-template-columns:1fr}
}
@media (max-width:760px){
  .wrap{padding:0 20px}
  .pad{padding:88px 0}
  .hero{padding-top:128px}
  .stats{flex-wrap:wrap; gap:26px 0}
  .stats > div{flex:0 0 50%; padding:0 0 0 20px}
  .stats > div:nth-child(3){border-left:0; padding-left:0}
  .stats > div:nth-child(1){padding-left:0}
  .stage{margin-top:56px; padding:0 10px}
  .win{border-radius:14px}
  .win-bar{height:26px} .win-bar i{width:8px;height:8px}
  .bento{grid-template-columns:1fr}
  .b4,.b3,.b2{grid-column:auto}
  .bento .gl{min-height:0; padding:24px}
  .step{grid-template-columns:1fr; padding-left:34px}
  .flow::before,.flow .fill{left:11px}
  .step .node{left:11px}
  .step .gl,.step:nth-child(odd) .gl,.step:nth-child(even) .gl{grid-column:1; width:100%; justify-self:stretch}
  .step .br,.step:nth-child(odd) .br,.step:nth-child(even) .br{left:11px; width:24px}
  .step:nth-child(odd).on .br{background:linear-gradient(90deg,var(--o1),var(--o3))}
  .specs{grid-template-columns:1fr; margin-top:64px}
  .ticks{grid-template-columns:1fr}
  .buy-card{padding:40px 24px 32px}
  .foot small{margin-left:0; width:100%}
  .sec-head{margin-bottom:44px}
  .mini .h,.mini .r{grid-template-columns:1fr 58px 62px}
  .mini .h span:nth-child(3),.mini .r span:nth-child(3){display:none}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important; transition-duration:.01ms !important}
  .js .rv{opacity:1; translate:none; scale:1; filter:none}
  .track{animation:none}
}

/* ==========================================================================
   SUBPAGES — trial page and the two legal documents
   ========================================================================== */
.hero.compact{padding:158px 0 90px}
.hero.compact h1{font-size:clamp(40px,6vw,76px); max-width:14ch}
.hero.compact .beam{opacity:.8}
.try{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:24px; max-width:1040px; margin:0 auto; align-items:start}
.act{padding:38px 36px 34px}
.act h3{font-size:24px; letter-spacing:-.03em}
.act .actions{display:grid; gap:12px; margin-top:26px}
.act .btn{width:100%}
.act .or{display:flex; align-items:center; gap:14px; margin:6px 0; font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}
.act .or::before,.act .or::after{content:""; flex:1; height:1px; background:var(--line)}
.act .note{margin-top:22px; padding-top:20px; border-top:1px solid var(--line); font-size:14px; color:var(--ink-2); line-height:1.55}
.act .note b{color:var(--ink); font-weight:600}
.act .avail{margin-top:14px; text-align:center}
.tnotes{display:grid; gap:14px}
.tnote{padding:24px 26px; display:grid; grid-template-columns:44px 1fr; gap:18px; align-items:start}
.tnote .ico{width:44px; height:44px; border-radius:13px; display:grid; place-items:center; color:var(--o2); background:linear-gradient(180deg,rgba(138,102,255,.2),rgba(138,102,255,.06)); border:1px solid rgba(150,118,255,.28)}
.tnote .ico .ic{font-size:21px}
.tnote h3{font-size:17px}
.tnote p{margin-top:6px; font-size:14.5px; color:var(--ink-2); line-height:1.55}
.tshot{max-width:1040px; margin:56px auto 0; padding:0 0}
.tshot .win{transform:none; -webkit-mask-image:none; mask-image:none}
.tshot .win::after{display:none}

.doc-wrap{max-width:780px; margin:0 auto; padding:150px 28px 120px}
.doc h1{font-size:clamp(38px,5.4vw,60px); max-width:none; background:linear-gradient(180deg,#fff,#A8A2C2); -webkit-background-clip:text; background-clip:text; color:transparent}
.doc h2{font-size:24px; letter-spacing:-.03em; margin:56px 0 0}
.doc h3{font-size:18px; margin:34px 0 0}
.doc p,.doc ul,.doc ol{margin:18px 0 0; color:var(--ink-2); max-width:68ch; line-height:1.7}
.doc li{margin:9px 0}
.doc strong{color:var(--ink); font-weight:600}
.doc code{font:13.5px var(--mono); color:var(--o3); background:rgba(138,102,255,.1); padding:2px 6px; border-radius:6px}
.doc a{color:var(--o2)}
.doc blockquote{margin:26px 0 0; padding:16px 20px; border-left:2px solid rgba(150,118,255,.5); background:rgba(138,102,255,.05); border-radius:0 12px 12px 0}
.doc blockquote p{margin:0; font-size:14.5px}
.doc hr{border:0; border-top:1px solid var(--line); margin:48px 0 0}
.doc .updated{font:12.5px/1 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); margin:24px 0 0}

@media (max-width:900px){
  .try{grid-template-columns:1fr}
  .hero.compact{padding:126px 0 60px}
  .doc-wrap{padding:118px 20px 90px}
}

/* ==========================================================================
   ODOMETER — digits that roll to their value
   ========================================================================== */
[data-roll]{display:inline-flex; align-items:flex-start; line-height:1; font-variant-numeric:tabular-nums}
.stats b[data-roll]{display:flex}
.dg{display:inline-block; height:1em; overflow:hidden; vertical-align:top}
.dg .col{display:flex; flex-direction:column; transform:translateY(0); transition:transform 2.1s cubic-bezier(.12,.9,.14,1) calc(var(--k)*.14s + .05s)}
.dg .col i{display:block; height:1em; line-height:1em; font-style:normal; text-align:center}
.ch{display:inline-block; height:1em; line-height:1em}
.price[data-x]{}
.price .col i,.price .ch{background:linear-gradient(180deg,#fff,#E4D5FA 55%,var(--o2)); -webkit-background-clip:text; background-clip:text; color:transparent}
.price{background:none !important; -webkit-background-clip:border-box !important; color:inherit !important; display:flex; justify-content:center; align-items:flex-start}
.price sup{background:linear-gradient(180deg,#fff,#E4D5FA); -webkit-background-clip:text; background-clip:text; color:transparent}

/* ==========================================================================
   THE LIGHT — the fixed shader canvas, and what it replaces
   ========================================================================== */
#fx{position:fixed; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none; display:none}
html.fx-on #fx{display:block}
html.fx-on .hero-fx .beam, html.fx-on .hero-fx .lamp{display:none}
html.fx-on .hero::after{display:none}
html.fx-on .buy .horizon2{box-shadow:0 -3px 0 rgba(240,196,250,.95), 0 -10px 30px rgba(150,118,255,.7), 0 -40px 90px rgba(120,84,240,.25)}

/* ==========================================================================
   THE DASHBOARD SCENE — plate, layers, camera
   ========================================================================== */
.cam-view{background:radial-gradient(90% 70% at 50% 40%, rgba(60,44,110,.28), rgba(8,6,16,.9))}
.cam-view .persp{position:absolute; inset:0; perspective:1500px; perspective-origin:50% 42%}
.cam-view .tilt{position:absolute; inset:0; transform-style:preserve-3d; will-change:transform}
.cam-view .rig{position:absolute; left:0; top:0; transform-origin:0 0; transform-style:preserve-3d; will-change:transform}
.cam-view .plate{position:absolute; inset:0; width:100%; height:100%; display:block}
.lyr{position:absolute; transform-style:preserve-3d; will-change:transform,opacity; opacity:0}
.lyr img{position:absolute; inset:0; width:100%; height:100%; display:block}
.lyr .dim{position:absolute; inset:0; border-radius:var(--r,20px); background:#07060E; opacity:var(--d,0); pointer-events:none}
.lyr::after{content:""; position:absolute; inset:-1px; border-radius:calc(var(--r,20px) + 1px); pointer-events:none; opacity:var(--g,0);
  box-shadow:0 0 0 1.5px rgba(200,170,255,.75), 0 0 46px 2px rgba(138,102,255,.55), 0 30px 80px -10px rgba(0,0,0,.8)}
.cam-view .glare{position:absolute; inset:0; pointer-events:none; z-index:3; border-radius:inherit;
  background:linear-gradient(115deg,rgba(255,255,255,.07),transparent 28%, transparent 72%, rgba(190,160,255,.06)), radial-gradient(60% 40% at 50% 0%, rgba(255,255,255,.07), transparent 70%)}

/* the window arrives, rather than appearing */
.stage{animation:arrive 1.6s cubic-bezier(.16,.8,.2,1) .55s both}
@keyframes arrive{from{opacity:0; translate:0 110px}to{opacity:1; translate:0 0}}
.track{animation:none}
@media (prefers-reduced-motion:reduce){.stage{animation:none}.split .wi{transform:none}}

/* ==========================================================================
   THE THREAD — one line of light that runs the whole page
   ========================================================================== */
main{position:relative}
.thread{position:absolute; left:0; top:0; width:100%; height:100%; z-index:0; pointer-events:none; overflow:visible}
.thread path,.thread line{fill:none; stroke-linecap:round}
.thread #thbase path,.thread #thbase line{stroke:rgba(190,170,255,.10); stroke-width:1.5}
.thread #thlit path,.thread #thlit line{stroke:url(#thr); stroke-width:2.2; filter:drop-shadow(0 0 5px rgba(150,118,255,.95)) drop-shadow(0 0 16px rgba(138,102,255,.55))}
.thread #thlit .tr{stroke-width:1.4; opacity:.9; filter:drop-shadow(0 0 4px rgba(150,118,255,.8))}
.thread .jn{fill:#EADCFF; filter:drop-shadow(0 0 6px rgba(160,130,255,1))}
main > section, main > .marquee{position:relative; z-index:1}
.eyebrow.lit{border-color:rgba(170,140,255,.6); box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 0 0 4px rgba(138,102,255,.14), 0 0 34px rgba(138,102,255,.55); color:#EEE6FF}
.eyebrow{transition:border-color .5s, box-shadow .6s, color .5s}
.buy .horizon2{transition:box-shadow 1.2s}
.buy.lit .horizon2{box-shadow:0 -3px 0 rgba(255,232,255,1), 0 -14px 44px rgba(190,150,255,.95), 0 -70px 170px rgba(138,102,255,.6), 0 -190px 340px rgba(120,84,240,.32)}

/* ==========================================================================
   DUPLICATES — pinned, scrubbed
   ========================================================================== */
.dupe{height:420vh; position:relative}
.dupe-stick{position:sticky; top:0; height:100vh; min-height:640px; display:grid; grid-template-columns:minmax(300px,410px) minmax(0,1fr);
  gap:clamp(32px,5vw,72px); align-items:center; max-width:1320px; margin:0 auto; padding:80px 28px 40px}
.dupe-copy h2{font-size:clamp(32px,3.7vw,52px)}
.dupe-copy .lede{margin-top:22px; font-size:17px}
.dupe-list{list-style:none; margin:34px 0 0; padding:0; position:relative}
.dupe-list::before{content:""; position:absolute; left:5px; top:10px; bottom:10px; width:2px; background:var(--line); border-radius:2px}
.dupe-list::after{content:""; position:absolute; left:5px; top:10px; width:2px; border-radius:2px; height:calc((100% - 20px) * var(--dp,0));
  background:linear-gradient(180deg,var(--o2),var(--o1)); box-shadow:0 0 14px 2px rgba(138,102,255,.7)}
.dupe-list li{position:relative; padding:0 0 22px 32px; opacity:.38; transition:opacity .45s}
.dupe-list li:last-child{padding-bottom:0}
.dupe-list li::before{content:""; position:absolute; left:0; top:6px; width:12px; height:12px; border-radius:50%; background:#251D3E; border:2px solid #3B3070; transition:all .4s; z-index:1}
.dupe-list li.on{opacity:1}
.dupe-list li.on::before{background:var(--o2); border-color:var(--o3); box-shadow:0 0 0 4px rgba(138,102,255,.2), 0 0 18px 3px rgba(138,102,255,.85)}
.dupe-list .no{display:block; font:600 11px/1 var(--mono); letter-spacing:.14em; color:var(--o2); text-transform:uppercase; margin-bottom:8px}
.dupe-list h3{font-size:18px}
.dupe-list p{font-size:14.5px; line-height:1.55; color:var(--ink-2); margin-top:6px; max-height:0; overflow:hidden; opacity:0; transition:max-height .5s, opacity .5s}
.dupe-list li.on p{max-height:160px; opacity:1}

.dupe-view{height:min(74vh,660px); min-height:460px; --a:0; --b:0; --c:0; padding:0}
.dv-cap{position:absolute; left:28px; right:28px; top:22px; display:flex; justify-content:space-between; align-items:baseline; z-index:3}
.dv-cap b{font:600 12px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--o2)}
.dv-cap span{font-size:13px; color:var(--ink-3)}
.dv-grid{position:absolute; left:28px; right:28px; top:66px; bottom:30px; display:grid; grid-template-columns:repeat(10,1fr); grid-auto-rows:min(76px,11.5%); align-content:center; gap:8px;
  opacity:calc(1 - clamp(0, var(--b) * 2.6, 1) * .9); scale:calc(1 - var(--b) * .04)}
.dv-grid i{display:grid; place-items:center; border-radius:10px; font:500 10px/1 var(--mono); font-style:normal; color:var(--ink-3);
  background:rgba(255,255,255,.045); border:1px solid var(--line);
  opacity:calc(1 - .93 * clamp(0, var(--a) * 1.75 - var(--o), 1)); scale:calc(1 - .2 * clamp(0, var(--a) * 1.75 - var(--o), 1))}
.dv-grid i.k{opacity:1; scale:1; color:#E9DFFF; border-color:rgba(170,140,255,calc(.15 + var(--a) * .5)); background:rgba(138,102,255,calc(.05 + var(--a) * .16));
  box-shadow:0 0 calc(var(--a) * 20px) rgba(138,102,255,calc(var(--a) * .6))}
.dv-rows{position:absolute; left:28px; right:28px; top:76px; bottom:calc(30px + clamp(0, var(--c) * 2.6 - .6, 1) * 92px); display:grid; grid-template-rows:repeat(4, minmax(0, 1fr)); gap:12px; opacity:clamp(0, (var(--b) - .18) * 2.4, 1); translate:0 calc((1 - clamp(0, var(--b) * 1.6, 1)) * 26px); pointer-events:none}
.dv-row{display:grid; grid-template-columns:118px 1fr 84px; gap:16px; align-items:center; padding:16px 18px; border-radius:16px; background:rgba(8,6,16,.78); border:1px solid var(--line-2); box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.dv-row .nm{font:500 14px/1 var(--sans); color:var(--ink)}
.dv-row .nm em{font-style:normal; color:var(--ink-3); font-size:12px; margin-left:4px}
.dv-bar{display:flex; gap:4px; height:16px}
.dv-bar i{border-radius:5px; background:rgba(255,255,255,.09)}
.dv-bar .e{flex:0 0 13%; background:linear-gradient(90deg,var(--o1),var(--o3)); box-shadow:0 0 calc(var(--b) * 14px) rgba(138,102,255,.8)}
.dv-bar .e.x{background:linear-gradient(90deg,#6b5a9a,#8d7cc0); box-shadow:none}
.dv-bar .m{flex:1; position:relative; overflow:hidden}
.dv-bar .m::after{content:""; position:absolute; inset:0; width:calc(var(--c) * 100%); background:linear-gradient(90deg,var(--o1),var(--o3)); box-shadow:0 0 14px rgba(138,102,255,.7)}
.dv-row[data-ok="0"] .m::after{display:none}
.dv-row .st{font:600 11px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; text-align:right; opacity:clamp(0, var(--b) * 3 - 1.9, 1)}
.dv-row .st.ok{color:var(--pos)} .dv-row .st.no{color:#FF8C7A}
.dv-row[data-ok="0"]{opacity:calc(1 - clamp(0, (var(--b) - .72) * 6, 1) * .7 - var(--c) * .0); transition:none}
.dv-row[data-ok="0"]{scale:calc(1 - clamp(0, (var(--b) - .72) * 6, 1) * .03)}
.dv-row[data-ok="1"]{border-color:rgba(170,140,255,calc(.14 + var(--c) * .45)); box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 0 calc(var(--c) * 30px) rgba(138,102,255,calc(var(--c) * .35))}
.dv-res{position:absolute; left:28px; right:28px; bottom:26px; display:flex; align-items:center; gap:16px; padding:16px 20px; border-radius:18px;
  background:linear-gradient(180deg,rgba(60,44,110,.85),rgba(20,14,40,.9)); border:1px solid rgba(190,160,255,.4); box-shadow:0 0 44px -6px rgba(138,102,255,.6), inset 0 1px 0 rgba(255,255,255,.12);
  opacity:clamp(0, var(--c) * 2.6 - 1.4, 1); translate:0 calc((1 - clamp(0, var(--c) * 2.6 - 1.4, 1)) * 30px)}
.dv-res .ico{width:40px; height:40px; border-radius:12px; display:grid; place-items:center; color:var(--pos); background:rgba(78,226,162,.12); border:1px solid rgba(78,226,162,.32); flex:none}
.dv-res .ico .ic{font-size:20px; stroke-width:2.2}
.dv-res b{display:block; font-size:15px; font-weight:600}
.dv-res small{display:block; margin-top:3px; font-size:13px; color:var(--ink-2)}
.dv-note{position:absolute; right:22px; bottom:8px; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); opacity:.7}

/* things that are scrubbed by scroll own their own translate/scale/opacity */
[data-scrub]{will-change:translate,scale,opacity}
.bento .viz{will-change:translate}

@media (max-width:900px){
  .dupe{height:auto}
  .dupe-stick{position:static; height:auto; min-height:0; display:block; padding:88px 20px 0}
  .dupe-view{display:none}
  .dupe-list::before,.dupe-list::after{display:none}
  .dupe-list li{opacity:1; padding:22px 24px; margin-top:14px; border-radius:22px; background:linear-gradient(180deg,var(--card-a),var(--card-b)); border:1px solid var(--line)}
  .dupe-list li::before{display:none}
  .dupe-list p{max-height:none; opacity:1}
  .thread{display:none}
}

.eclipse-wrap .ring{transition:border-color 1s}
.eclipse-wrap.lit .ring{border-color:rgba(190,160,255,.55)}
.eclipse-wrap.lit .eclipse{filter:brightness(1.22)}
.eclipse{transition:filter 1s}

/* the composed page inside the scene: a ground, the app's own top bar, and the cards on top */
.cam-view .rig{background:none}   /* the frame below is the window's one edge: nothing else for a lifted card to cross */
.cam-view .rig .topbar{position:absolute; left:0; top:0; width:100%; height:auto; display:block}
/* the app's window: a frame with room around the page, so the cards do not sit hard against the edge */
.cam-view .rig::before{
  content:""; position:absolute; inset:calc(var(--r,24px) * -2.2); z-index:-1; transform:translateZ(-3px);
  border-radius:calc(var(--r,24px) * 1.7);
  background:linear-gradient(180deg,#171122 0%,#100c1a 100%);
  border:1px solid color-mix(in srgb,var(--o2) 38%,rgba(255,255,255,.12));
  box-shadow:0 0 0 1px rgba(0,0,0,.5), 0 30px 80px rgba(0,0,0,.55), 0 0 60px color-mix(in srgb,var(--o1) 14%,transparent);
  pointer-events:none; opacity:var(--fr,0);
}

/* ==========================================================================
   FILE MANAGER — the real window, three views
   ========================================================================== */
.fm{padding-bottom:150px}
.fm-stage{position:relative; max-width:1240px; margin:0 auto; padding:0 20px}
.fm-stage::before{ /* a bloom of the accent behind the window, and a floor it stands on */
  content:""; position:absolute; left:2%; right:2%; top:14%; bottom:-6%; z-index:0; pointer-events:none;
  background:radial-gradient(52% 50% at 50% 46%, rgba(150,110,255,.36), rgba(110,70,235,.12) 55%, transparent 74%); filter:blur(46px);
}
.fm-tabs{position:relative; z-index:6; display:flex; gap:6px; width:max-content; max-width:100%; margin:0 auto 30px; padding:5px; border-radius:99px;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02)); border:1px solid var(--line); box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.fm-tabs button{display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 18px 0 14px; border-radius:99px; border:0; background:transparent; color:var(--ink-3);
  font:inherit; font-size:14.5px; letter-spacing:-.005em; cursor:pointer; transition:color .3s, background .4s, box-shadow .4s}
.fm-tabs button .ic{font-size:16px}
.fm-tabs button:hover{color:var(--ink)}
.fm-tabs button.on{color:#fff; background:linear-gradient(180deg,#A47DFF,#7A50EE); box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 0 26px -4px rgba(138,102,255,.8)}
.fm-win{position:relative; z-index:1; border-radius:20px; overflow:hidden; background:#0B0912; aspect-ratio:2880/1800;
  box-shadow:0 0 0 1px rgba(255,255,255,.12), inset 0 1px 0 rgba(255,255,255,.16), 0 70px 120px -40px rgba(0,0,0,.9), 0 0 120px -30px rgba(138,102,255,.55)}
.fm-win picture{position:absolute; inset:0; opacity:0; transform:scale(1.012); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform 1.1s cubic-bezier(.16,.8,.2,1)}
.fm-win picture.on{opacity:1; transform:none}
.fm-win img{display:block; width:100%; height:100%; object-fit:cover}
.fm-win::after{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:linear-gradient(180deg,rgba(225,180,250,.14),transparent 20%)}
.fm1{left:-6%; top:12%; animation-delay:-2s}
.fm2{left:-4.5%; bottom:11%; animation-delay:-7s}
.fm3{right:-7%; top:33%; animation-delay:-5s}
.fm4{right:-5%; bottom:13%; animation-delay:-3.5s}
/* each view brings its own four notes */
.fmc{opacity:0; visibility:hidden; transition:opacity .6s ease, visibility 0s linear .6s}
.fmc.on{opacity:1; visibility:visible; transition:opacity .7s ease .15s, visibility 0s}
@media (max-width:760px){
  .fm{padding-bottom:96px}
  .fm-stage{padding:0 12px}
  .fm-tabs button{height:34px; padding:0 12px 0 10px; font-size:13.5px}
  .fm-win{border-radius:12px}
}

/* ==========================================================================
   PLAYER — a shelf of covers, a wide level meter, the deck
   ========================================================================== */
.pl{padding-bottom:64px; overflow:hidden; --c:138,102,255}
.pl-stage{position:relative; height:clamp(300px,34vw,450px); max-width:1240px; margin:0 auto; perspective:1700px; perspective-origin:50% 38%}
.pl-glow{position:absolute; left:6%; right:6%; top:-4%; bottom:-10%; z-index:0; pointer-events:none;
  background:radial-gradient(46% 56% at 50% 50%, rgba(var(--c),.5), rgba(var(--c),.14) 58%, transparent 76%); filter:blur(34px)}
.pl-shelf{position:absolute; inset:0; z-index:1; transform-style:preserve-3d}
.pl-c{--s:clamp(190px,26vw,320px); position:absolute; left:50%; top:46%; width:var(--s); height:var(--s); margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  padding:0; border:0; border-radius:16px; overflow:hidden; cursor:pointer; background:#120E1E;
  box-shadow:0 0 0 1px rgba(255,255,255,.1), 0 34px 70px -26px #000;
  transition:transform .9s cubic-bezier(.2,.9,.25,1.06), opacity .6s, filter .6s, box-shadow .9s; will-change:transform}
.pl-shelf{touch-action:pan-y}
.pl-shelf.drag .pl-c{transition:none}
.pl-c img{display:block; width:100%; height:100%; object-fit:cover; pointer-events:none}
.pl-c::after{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:linear-gradient(135deg,rgba(255,255,255,.18),transparent 34%, transparent 70%, rgba(0,0,0,.18))}
.pl-c.cur{box-shadow:0 0 0 1px rgba(255,255,255,.18), 0 40px 110px -20px rgba(var(--c),.7), 0 30px 60px -24px #000}
.pl-c:focus-visible{outline:2px solid #B9A2FF; outline-offset:4px}
.pl-spec{display:block; position:relative; z-index:2; width:100%; max-width:1560px; height:250px; margin:-64px auto 0; pointer-events:none; filter:drop-shadow(0 0 14px rgba(var(--c),.55));
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.pl-deck{position:relative; z-index:3; max-width:980px; margin:20px auto 0; display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:28px; align-items:center; padding:20px 28px; border-radius:24px;
  background:linear-gradient(180deg,rgba(58,46,94,.5),rgba(19,15,34,.72)); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.12); box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 40px 80px -30px #000, 0 0 70px -24px rgba(138,102,255,.45)}
.pl-now{display:flex; flex-direction:column; align-items:flex-start; gap:4px; min-width:0}
.pl-now b{font-size:19px; font-weight:600; letter-spacing:-.015em; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%}
.pl-now > span:not(.pill){font-size:14px; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%}
.pl-now .pill{margin-top:8px}
.pl-ctl{display:flex; align-items:center; gap:10px}
.pl-ctl button{width:44px; height:44px; display:grid; place-items:center; border-radius:50%; border:1px solid var(--line); background:rgba(255,255,255,.04); color:var(--ink-2); cursor:pointer; transition:background .3s, color .3s, transform .3s}
.pl-ctl button:hover{background:rgba(255,255,255,.1); color:#fff}
.pl-ctl button:active{transform:scale(.94)}
.pl-ctl svg{width:20px; height:20px; fill:currentColor}
.pl-ctl .main{width:56px; height:56px; color:#fff; border:0; background:linear-gradient(180deg,#A47DFF,#7A50EE); box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 0 30px -4px rgba(138,102,255,.8)}
.pl-ctl .main:hover{background:linear-gradient(180deg,#B28FFF,#8660F2)}
.pl-time{display:flex; align-items:center; gap:12px; font-size:13px; color:var(--ink-3); font-variant-numeric:tabular-nums}
.pl-time .bar{flex:1; height:4px; border-radius:99px; background:rgba(255,255,255,.12); overflow:hidden}
.pl-time .bar i{display:block; height:100%; width:0; border-radius:inherit; background:linear-gradient(90deg,#8A66FF,#E7A5F5); box-shadow:0 0 14px rgba(180,140,255,.8)}
.pl-note{text-align:center; margin-top:22px}
@media (max-width:860px){
  .pl-deck{grid-template-columns:1fr; gap:16px; text-align:center; padding:18px 18px}
  .pl-now{align-items:center}
  .pl-ctl{justify-content:center}
}
@media (max-width:760px){ .pl-spec{height:150px; margin-top:-40px} }

/* ===== file manager tabs: a Liquid Glass puck — slides between views, swells into a lens when held ===== */
.fm-tabs.has-lens{touch-action:pan-y; user-select:none; -webkit-user-select:none; cursor:grab;
  -webkit-backdrop-filter:blur(22px) saturate(1.7); backdrop-filter:blur(22px) saturate(1.7);
  background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.025));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(255,255,255,.04), 0 22px 44px -20px rgba(0,0,0,.75)}
.fm-tabs.has-lens.pressed{cursor:grabbing}
.fm-tabs.has-lens button, .fm-tabs.has-lens button.on{background:none; box-shadow:none; color:var(--ink-3); position:relative; z-index:1}
.fm-tabs.has-lens button:hover{color:var(--ink)}
.fm-thumb{position:absolute; z-index:3; left:5px; top:5px; height:38px; width:var(--w,96px); border-radius:99px; overflow:hidden; pointer-events:none;
  transform:translateX(var(--x,0px)) scale(var(--s,1)); transform-origin:50% 50%;
  transition:transform .62s cubic-bezier(.3,1.45,.5,1), width .62s cubic-bezier(.3,1.45,.5,1), background .35s, box-shadow .45s;
  background:
    radial-gradient(120% 90% at 22% -10%, rgba(255,255,255,.5), rgba(255,255,255,0) 52%),
    linear-gradient(180deg, rgba(255,255,255,.2) 0%, rgba(176,150,255,.18) 48%, rgba(138,102,255,.3) 100%),
    rgba(22,16,44,.7);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.34),
    inset 0 1.5px 1px rgba(255,255,255,.8),
    inset 0 -12px 18px -10px rgba(170,135,255,.7),
    inset 0 10px 16px -10px rgba(255,255,255,.4),
    0 12px 28px -10px rgba(0,0,0,.7),
    0 0 34px -8px rgba(138,102,255,.8)}
.fm-lens{position:absolute; left:0; top:-5px; display:flex; gap:6px; padding:5px; width:max-content;
  transform:translateX(calc(var(--x,0px) * -1 - 5px)); transition:transform .62s cubic-bezier(.3,1.45,.5,1)}
.fm-lb{display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 18px 0 14px; color:#fff; font:inherit; font-size:14.5px; letter-spacing:-.005em; white-space:nowrap;
  text-shadow:0 1px 8px rgba(120,80,255,.55)}
.fm-lb .ic{font-size:16px}
/* held: the puck swells, clears and magnifies what is under it */
.fm-tabs.pressed{--s:1.2}
.fm-tabs.pressed .fm-thumb{
  background:
    radial-gradient(120% 90% at 22% -10%, rgba(255,255,255,.62), rgba(255,255,255,0) 55%),
    linear-gradient(180deg, rgba(255,255,255,.12) 0%, rgba(176,150,255,.08) 50%, rgba(138,102,255,.2) 100%),
    rgba(22,16,44,.5);
  box-shadow:
    inset 0 0 0 1.2px rgba(255,255,255,.55),
    inset 0 2px 1.5px rgba(255,255,255,.95),
    inset 0 -14px 20px -10px rgba(190,160,255,.85),
    inset 0 12px 18px -10px rgba(255,255,255,.55),
    0 20px 40px -12px rgba(0,0,0,.75),
    0 0 52px -6px rgba(150,115,255,.95)}
/* dragging: the puck follows the finger exactly, no easing in the way */
.fm-tabs.drag .fm-thumb, .fm-tabs.drag .fm-lens{transition:background .35s, box-shadow .45s, transform .12s linear, width .12s linear}
.fm-tabs.noanim .fm-thumb, .fm-tabs.noanim .fm-lens{transition:none}
@media (prefers-reduced-motion:reduce){
  .fm-thumb, .fm-lens{transition:transform .01s, width .01s}
}
@media (max-width:760px){
  .fm-lb{height:34px; padding:0 12px 0 10px; font-size:13.5px}
  .fm-thumb{height:34px}
}

/* ===== top bar: the same Liquid Glass — a lit rim, a sheen, and a puck that follows the pointer along the links ===== */
.nav{
  background:
    radial-gradient(130% 240% at 16% -70%, rgba(255,255,255,.2), rgba(255,255,255,0) 56%),
    linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.02)),
    rgba(19,15,34,.5);
  -webkit-backdrop-filter:blur(26px) saturate(1.9) brightness(1.08); backdrop-filter:blur(26px) saturate(1.9) brightness(1.08);
  border:1px solid rgba(255,255,255,.06);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.2),
    inset 0 -12px 20px -14px rgba(170,135,255,.3),
    inset 0 12px 20px -14px rgba(255,255,255,.2),
    0 18px 50px -18px #000, 0 0 70px -30px rgba(138,102,255,.7);
}
.nav.scrolled{
  background:
    radial-gradient(130% 240% at 16% -70%, rgba(255,255,255,.17), rgba(255,255,255,0) 56%),
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.015)),
    rgba(11,9,22,.7);
  border-color:rgba(255,255,255,.08)}
.nav-links{position:relative}
.nav-links a, .brand, .nav-cta, .menu-btn{position:relative; z-index:1}
.nav-cta{transition:transform .5s cubic-bezier(.3,1.35,.45,1), box-shadow .4s, filter .4s}
.nav.cta-hot .nav-cta{transform:scale(1.045); filter:brightness(1.08)}
.nav-links a:hover{background:none}
.nav-links a.on, .nav-links a.hot{color:#fff}
.nav-puck{position:absolute; z-index:0; left:0; top:0; height:var(--ph,36px); width:var(--pw,80px); border-radius:99px; pointer-events:none; opacity:0;
  transform:translate(var(--px,0px), var(--py,0px)) scale(var(--ps,1)); transform-origin:50% 50%;
  transition:transform .6s cubic-bezier(.3,1.35,.45,1), width .6s cubic-bezier(.3,1.35,.45,1), height .6s cubic-bezier(.3,1.35,.45,1), opacity .3s, background .3s, box-shadow .4s;
  background:
    radial-gradient(120% 90% at 22% -10%, rgba(255,255,255,.46), rgba(255,255,255,0) 52%),
    linear-gradient(180deg, rgba(255,255,255,.17) 0%, rgba(176,150,255,.16) 50%, rgba(138,102,255,.26) 100%),
    rgba(22,16,44,.4);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.3), inset 0 1.5px 1px rgba(255,255,255,.75),
    inset 0 -10px 16px -10px rgba(170,135,255,.65), 0 8px 20px -8px rgba(0,0,0,.65), 0 0 26px -8px rgba(138,102,255,.75)}
.nav-puck.show{opacity:1}
.nav-puck.noanim{transition:opacity .3s}
.nav.pressed{--ps:1.14}
.nav.pressed .nav-puck{
  background:
    radial-gradient(120% 90% at 22% -10%, rgba(255,255,255,.6), rgba(255,255,255,0) 55%),
    linear-gradient(180deg, rgba(255,255,255,.12) 0%, rgba(176,150,255,.07) 50%, rgba(138,102,255,.2) 100%),
    rgba(22,16,44,.26);
  box-shadow:
    inset 0 0 0 1.2px rgba(255,255,255,.5), inset 0 2px 1.5px rgba(255,255,255,.95),
    inset 0 -12px 18px -10px rgba(190,160,255,.85), 0 14px 30px -10px rgba(0,0,0,.7), 0 0 40px -6px rgba(150,115,255,.95)}
/* the call to action and the menu button take the same rim light */
.nav .btn-primary{box-shadow:inset 0 1.5px 1px rgba(255,255,255,.55), inset 0 -8px 14px -8px rgba(60,30,160,.5), 0 8px 24px -8px rgba(138,102,255,.8)}
.menu-btn{background:radial-gradient(120% 90% at 22% -10%, rgba(255,255,255,.32), rgba(255,255,255,0) 55%), rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.18); box-shadow:inset 0 1.5px 1px rgba(255,255,255,.5), inset 0 -8px 12px -8px rgba(170,135,255,.5)}
@media (prefers-reduced-motion:reduce){ .nav-puck{transition:opacity .2s} }

/* ===== top bar, wide screens: brand on the left, the links in the true middle of the bar, the call to action on the right ===== */
@media (min-width:1041px){
  .nav{display:grid; grid-template-columns:1fr auto 1fr; align-items:center}
  .nav .brand{justify-self:start; margin-right:0}
  .nav .nav-links{justify-self:center; margin-right:12px}   /* the bar pads 20px on the left and 8px on the right; 12px puts the links on the true middle */
  .nav .nav-cta{justify-self:end; margin-left:0}
  .nav .nav-right{justify-self:end}
}
.nav-right{display:flex; align-items:center; gap:8px; margin-left:auto}
@media (max-width:1040px){ .nav-right{margin-left:auto} .menu-btn{margin-left:8px !important} }

/* what the lens covers is read from the lens itself, so the label underneath steps aside instead of showing through twice */
.fm-tabs.has-lens button.cover{color:transparent}
.fm-tabs.has-lens button{transition:color .18s}

/* leaving the bar: the glass dissolves over half a second instead of switching off */
.nav-puck.fading{transition:opacity .5s ease-out, transform .6s cubic-bezier(.3,1.35,.45,1), width .6s cubic-bezier(.3,1.35,.45,1), height .6s cubic-bezier(.3,1.35,.45,1), background .3s, box-shadow .4s}
.nav.fading .nav-cta{transition-duration:.5s, .6s, .5s}
.nav-links a{transition:color .5s ease-out, background .2s}
.nav-links a.hot{transition:color .25s}

/* legal pages: the text itself stays in English; a line says so, in the reader's language */
.doc-note{font-size:13px; color:var(--ink-3); margin:0 0 22px; padding:10px 14px; border-radius:12px; border:1px solid var(--line); background:rgba(255,255,255,.03)}

/* ===== right to left (Arabic, Persian, Urdu) ===== */
/* flex, grid and logical alignment mirror by themselves; these are the places where a physical left or right was drawn in */
html[dir=rtl] .nav{padding:0 20px 0 8px}
html[dir=rtl] .nav .nav-links{margin-right:0; margin-left:12px}
html[dir=rtl] .nav-right{margin-left:0; margin-right:auto}
@media (max-width:1040px){ html[dir=rtl] .nav{padding:0 18px 0 8px} html[dir=rtl] .menu-btn{margin-left:0 !important; margin-right:8px} html[dir=rtl] .brand{margin-left:auto} }
html[dir=rtl] .cam-list::before,html[dir=rtl] .cam-list::after,html[dir=rtl] .dupe-list::before,html[dir=rtl] .dupe-list::after{left:auto; right:5px}
html[dir=rtl] .cam-list li,html[dir=rtl] .dupe-list li{padding-left:0; padding-right:32px}
html[dir=rtl] .cam-list li::before,html[dir=rtl] .dupe-list li::before{left:auto; right:0}
html[dir=rtl] .eyebrow,html[dir=rtl] .hero h1,html[dir=rtl] .lede{text-align:inherit}
/* playback stays left to right, as it does in macOS; numbers with a unit are not turned around */
html[dir=rtl] .pl-ctl,html[dir=rtl] .pl-time,html[dir=rtl] .pl-spec,html[dir=rtl] #plbpm{direction:ltr}
html[dir=rtl] [data-roll]{direction:ltr; unicode-bidi:isolate; display:block; text-align:right}