/* ============================================================
   Koryomi — koryomi.com landing
   True-black OLED · violet→magenta · glass · grain · motion
   ============================================================ */

:root{
  --ink-950:#000000; --ink-900:#060608; --ink-850:#0b0b0f; --ink-800:#111116;
  --ink-700:#1a1a22; --ink-600:#26262f; --ink-500:#3a3a45;
  --fog-50:#f7f7fb; --fog-100:#ececf2; --fog-300:#b9b9c6; --fog-400:#9292a3; --fog-500:#6f6f81;
  --accent:124 92 255;            /* #7c5cff */
  --v:#7c5cff; --m:#c33bff; --p:#ff4dd2;
  --grad:linear-gradient(100deg,#9d86ff 0%, #c33bff 52%, #ff4dd2 100%);
  --grad-soft:linear-gradient(100deg, rgba(124,92,255,.9), rgba(195,59,255,.85) 55%, rgba(255,77,210,.8));
  --maxw:1320px;
  --ease:cubic-bezier(.22,1,.36,1);
  --font-brand:'Unbounded',system-ui,sans-serif;
  --font:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:#000}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{
  background:var(--ink-950); color:var(--fog-100);
  font-family:var(--font); font-size:17px; line-height:1.6; letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:rgb(var(--accent)/.35)}
*{scrollbar-width:thin;scrollbar-color:#26262f transparent}
*::-webkit-scrollbar{width:8px;height:8px}
*::-webkit-scrollbar-thumb{background:#26262f;border-radius:99px}

/* ───── cinematic field (fixed overlays) ───── */
.fx-mesh{position:fixed;inset:-25%;z-index:0;pointer-events:none;filter:blur(90px) saturate(1.25);opacity:.6;
  background:
    radial-gradient(38% 40% at 16% 24%, rgb(var(--accent)/.22), transparent 70%),
    radial-gradient(36% 44% at 84% 16%, rgba(195,59,255,.16), transparent 70%),
    radial-gradient(48% 50% at 64% 96%, rgba(255,77,210,.12), transparent 70%);
  animation:mesh-drift 26s ease-in-out infinite alternate}
@keyframes mesh-drift{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(2%,-3%,0) scale(1.14)}}
.fx-vignette{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(130% 100% at 50% 0%, transparent 50%, rgba(0,0,0,.6) 100%)}
.fx-grain{position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.045;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:170px 170px}
.aurora{background:
  radial-gradient(60% 80% at 18% 0%, rgb(var(--accent)/.22), transparent 60%),
  radial-gradient(50% 60% at 88% 8%, rgba(195,59,255,.12), transparent 58%)}

/* glass + gradient border */
.glass{background:rgba(12,12,18,.55);backdrop-filter:blur(20px) saturate(1.3);-webkit-backdrop-filter:blur(20px) saturate(1.3);border:1px solid rgba(255,255,255,.07)}
.grad-border{position:relative}
.grad-border::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(140deg, rgb(var(--accent)/.6), rgba(255,255,255,.06) 42%, transparent 72%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}

/* ───── shared bits ───── */
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 28px;position:relative;z-index:3}
.section{position:relative;z-index:3;padding:clamp(5rem,11vh,9rem) 0}
.eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--fog-400);display:inline-flex;align-items:center;gap:.6em}
.eyebrow.center{justify-content:center;width:100%;text-align:center}
.ping{width:7px;height:7px;border-radius:50%;background:var(--v);box-shadow:0 0 0 0 rgb(var(--accent)/.6);animation:ping 2.4s var(--ease) infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgb(var(--accent)/.5)}70%,100%{box-shadow:0 0 0 9px rgb(var(--accent)/0)}}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.wordmark{font-family:var(--font-brand);font-weight:800;letter-spacing:-.04em}
.wordmark .dot{color:var(--v)}
.wordmark--lg{font-size:clamp(1.6rem,4vw,2.4rem)}
.wordmark.sm{font-size:1.05rem}

.mark img{border-radius:11px;display:block}
.mark--sm img{border-radius:9px}
.mark--xl img{border-radius:22px}
.mark--lg img{border-radius:18px}
.mark{position:relative;display:inline-grid;place-items:center}
.mark::after{content:'';position:absolute;inset:-22%;border-radius:50%;background:radial-gradient(closest-side, rgb(var(--accent)/.5), transparent 75%);filter:blur(14px);z-index:-1}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;border-radius:999px;font-weight:600;
  font-size:.96rem;padding:.85rem 1.5rem;cursor:pointer;border:1px solid transparent;transition:transform .25s var(--ease),box-shadow .25s,background .25s,border-color .25s;will-change:transform}
.btn:active{transform:scale(.97)}
.btn-accent{background:var(--v);color:#0a0810;box-shadow:0 10px 34px -10px rgb(var(--accent)/.8)}
.btn-accent:hover{transform:translateY(-2px);box-shadow:0 16px 44px -10px rgb(var(--accent)/.9)}
.btn-ghost{background:rgba(20,20,28,.6);border-color:var(--ink-600);color:var(--fog-100);backdrop-filter:blur(8px)}
.btn-ghost:hover{border-color:var(--ink-500);transform:translateY(-2px);background:rgba(28,28,38,.7)}

.sec-head{max-width:760px;margin-bottom:3.2rem}
.sec-title{font-size:clamp(1.9rem,4.4vw,3.1rem);line-height:1.06;letter-spacing:-.035em;font-weight:800;color:#fff;margin-top:.7rem}
.sec-lede{margin-top:1.2rem;color:var(--fog-300);font-size:clamp(1rem,1.6vw,1.18rem);max-width:64ch}
.sec-lede strong,.caveat strong{color:var(--fog-50)}
code{font-family:var(--mono);font-size:.86em;background:rgba(124,92,255,.12);color:#cfc4ff;padding:.1em .4em;border-radius:5px}

/* reveal — cinematic focus-in (rise + de-blur) */
.reveal,[data-reveal]{opacity:0;transform:translateY(34px) scale(.984);filter:blur(7px);transition:opacity .85s var(--ease),transform .9s var(--ease),filter .85s var(--ease)}
.is-in.reveal,[data-reveal].is-in{opacity:1;transform:none;filter:blur(0)}
/* big section titles wipe up from a hidden line */
.sec-title[data-reveal]{filter:none;transform:translateY(18px);clip-path:inset(0 -6% 100% -6%);transition:opacity .8s var(--ease),transform .95s var(--ease),clip-path 1.05s var(--ease)}
.sec-title[data-reveal].is-in{filter:none;clip-path:inset(-16% -6% -16% -6%)}
@media(prefers-reduced-motion:reduce){.reveal,[data-reveal],.sec-title[data-reveal]{filter:none!important;clip-path:none!important}}

/* scroll progress beam */
#progress{position:fixed;top:0;left:0;height:3px;width:100%;z-index:60;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,#7c5cff,#c33bff,#ff4dd2);box-shadow:0 0 14px rgb(var(--accent)/.7);will-change:transform}

/* ════════ NAV ════════ */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;
  padding:1rem 0;transition:background .4s,backdrop-filter .4s,border-color .4s,padding .4s;border-bottom:1px solid transparent}
.nav-wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 28px;display:flex;align-items:center;gap:1.4rem}
.nav.scrolled{background:rgba(6,6,9,.72);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);border-bottom-color:rgba(255,255,255,.06);padding-top:.7rem;padding-bottom:.7rem}
.nav-brand{display:inline-flex;align-items:center;gap:.6rem;font-size:1.25rem}
.nav-links{display:flex;gap:.3rem;margin-left:1rem}
.nav-links a{font-size:.92rem;color:var(--fog-400);padding:.5rem .8rem;border-radius:999px;transition:color .2s,background .2s}
.nav-links a:hover,.nav-links a.active{color:#fff;background:rgba(255,255,255,.05)}
.nav-cta{margin-left:auto;padding:.6rem 1.1rem;font-size:.9rem}
.nav-burger{display:none;margin-left:auto;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.nav-burger span{width:22px;height:2px;background:var(--fog-100);border-radius:2px;transition:.3s}

/* ════════ HERO ════════ */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;padding:8rem 0 4rem;overflow:hidden}
.hero-aurora{position:absolute;inset:0;z-index:0;opacity:.9}
.hero-inner{position:relative;z-index:3;width:100%;max-width:var(--maxw);margin:0 auto;padding:0 28px;
  display:grid;grid-template-columns:1.05fr .95fr;gap:2.5rem;align-items:center}
.hero-copy{max-width:36rem}
.hero-h1{font-size:clamp(2.9rem,7.2vw,5.4rem);line-height:.98;letter-spacing:-.045em;font-weight:800;color:#fff;margin:1.3rem 0 0}
.hero-h1 span{display:block}
.hero-h1 .grad{display:inline}
.hero-sub{margin-top:1.5rem;font-size:clamp(1.05rem,1.7vw,1.28rem);color:var(--fog-300);max-width:34rem}
.hero-sub strong{color:#fff}
.hero-cta{margin-top:2.1rem;display:flex;gap:.9rem;flex-wrap:wrap}
.hero-meta{margin-top:2.3rem;display:flex;flex-wrap:wrap;gap:.5rem .55rem}
.hero-meta span{font-family:var(--mono);font-size:.68rem;letter-spacing:.04em;color:var(--fog-400);
  border:1px solid var(--ink-700);background:rgba(17,17,22,.5);padding:.32rem .6rem;border-radius:7px}

.hero-stage{position:relative;height:min(72vh,620px)}
.hero-glow{position:absolute;inset:6% 0;background:radial-gradient(45% 55% at 60% 45%, rgb(var(--accent)/.4), transparent 70%);filter:blur(50px);z-index:0}
.device{position:relative;border-radius:16px;overflow:hidden;background:var(--ink-850);
  border:1px solid rgba(255,255,255,.08);box-shadow:0 40px 90px -30px rgba(0,0,0,.9),0 0 0 1px rgba(0,0,0,.5)}
.device-bar{display:flex;align-items:center;gap:6px;padding:9px 13px;background:rgba(18,18,24,.92);border-bottom:1px solid rgba(255,255,255,.05)}
.device-bar i{width:9px;height:9px;border-radius:50%;background:#34343f}
.device-bar i:nth-child(1){background:#ff5f57}.device-bar i:nth-child(2){background:#febc2e}.device-bar i:nth-child(3){background:#28c840}
.device-url{margin-left:10px;font-family:var(--mono);font-size:.66rem;color:var(--fog-500)}
.device-shot{width:100%;height:auto;display:block}
.hero-stage .device--browser{position:absolute;top:6%;left:0;width:100%;z-index:2;transform:none}
.hero-stage .device--phone{position:absolute;bottom:-1%;right:-1%;width:30%;aspect-ratio:9/18.5;overflow:hidden;z-index:3;border-radius:26px;box-shadow:0 30px 70px -20px rgba(0,0,0,.95)}
.hero-stage .device--phone .device-shot{width:100%;height:100%;object-fit:cover;object-position:top center;border-radius:24px}
.float{animation:float 6s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateZ(70px) translateY(0)}50%{transform:translateZ(70px) translateY(-13px)}}

.scroll-hint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);width:24px;height:38px;border:1.5px solid var(--ink-600);border-radius:14px;z-index:4;display:grid;place-items:start center}
.scroll-hint span{width:4px;height:8px;border-radius:3px;background:var(--v);margin-top:7px;animation:scroll 1.8s var(--ease) infinite}
@keyframes scroll{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(12px)}}

/* ════════ STACK COLLAPSE ════════ */
.collapse{position:relative;height:230vh;z-index:3}
.collapse-stage{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2rem;padding:5rem 1rem}
.collapse-arena{position:relative;width:100%;max-width:760px;height:min(54vh,460px)}
.svc{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) translate(var(--x),var(--y));
  display:flex;flex-direction:column;align-items:center;gap:.15rem;padding:.85rem 1.05rem;border-radius:15px;
  background:rgba(14,14,20,.7);border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(10px);white-space:nowrap;
  box-shadow:0 20px 50px -24px rgba(0,0,0,.9);will-change:transform,opacity}
.svc-ic{font-size:1.15rem;filter:grayscale(.2)}
.svc-name{font-size:.82rem;font-weight:700;color:var(--fog-50)}
.svc-role{font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--fog-500)}
.collapse-core{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:5}
.collapse-core-in{display:flex;flex-direction:column;align-items:center;gap:1rem;will-change:transform}
.collapse-core .mark--xl::after{inset:-30%;background:radial-gradient(closest-side, rgb(var(--accent)/.6), transparent 72%);filter:blur(26px)}
.collapse-head{position:relative;text-align:center;font-size:clamp(1.3rem,3.2vw,2.2rem);line-height:1.18;font-weight:700;color:var(--fog-300);min-height:3.6em}
.collapse-head b{color:#fff;font-weight:800}
.collapse-head .ch{display:block;transition:opacity .5s var(--ease),transform .5s var(--ease)}
.collapse-head .ch-b{font-size:clamp(1.7rem,4.6vw,3rem);margin-top:.35rem}
.collapse-head .ch-b b{font-weight:800}
/* JS path: stack the two lines in one cell to crossfade */
.collapse-head.anim{display:grid;place-items:center}
.collapse-head.anim .ch{grid-area:1/1;text-align:center}

/* ════════ MAPS / PIPELINE ════════ */
.maps{list-style:none;display:flex;flex-direction:column;gap:.9rem;margin-top:1rem}
.map{display:grid;grid-template-columns:minmax(200px,250px) auto 1fr;align-items:center;gap:1.4rem;
  padding:1.15rem 1.4rem;border-radius:18px;background:rgba(11,11,16,.6);border:1px solid rgba(255,255,255,.06);transition:border-color .3s,background .3s,transform .3s}
.map:hover{border-color:rgba(124,92,255,.35);background:rgba(16,14,26,.7);transform:translateX(4px)}
.map-old{display:flex;flex-direction:column;gap:.15rem;opacity:.62}
.map-tool{font-weight:700;color:var(--fog-100);font-size:1rem}
.map-job{font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--fog-500)}
.map-arrow{font-size:1.3rem;color:var(--v);opacity:.7}
.map-new{display:flex;align-items:flex-start;gap:.6rem;color:var(--fog-200,#d6d6e0);font-size:1.02rem}
.map-new{color:#d6d6e0}
.check{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:.72rem;font-weight:800;
  color:#0a0810;background:var(--grad);box-shadow:0 0 18px -3px rgb(var(--accent)/.7);margin-top:.12rem}

.pipe{margin-top:2.6rem;display:flex;align-items:stretch;gap:.6rem;flex-wrap:wrap}
.pipe-seg{flex:1;min-width:120px;display:flex;align-items:center;justify-content:center;gap:.5rem;padding:1rem;border-radius:14px;
  font-weight:700;color:var(--fog-400);background:rgba(11,11,16,.6);border:1px solid rgba(255,255,255,.06);position:relative;transition:.5s var(--ease)}
.pipe-seg.lit{color:#fff;border-color:rgba(124,92,255,.5);background:rgba(20,15,32,.8);box-shadow:0 0 30px -8px rgb(var(--accent)/.5)}
.pipe-ic{font-size:1.1rem}

/* ════════ SHOWCASE ════════ */
.panel{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(2rem,5vw,4.5rem);align-items:center;padding:clamp(2.5rem,6vh,5rem) 0}
.panel.reverse{grid-template-columns:1.15fr 1fr}
.panel.reverse .panel-text{order:2}
.panel.reverse .panel-media{order:1}
.kick{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--v);margin-bottom:.7rem}
.panel-text h3{font-size:clamp(1.5rem,2.8vw,2.15rem);line-height:1.1;letter-spacing:-.03em;font-weight:800;color:#fff}
.panel-text p{margin-top:1rem;color:var(--fog-300)}
.ticks{list-style:none;margin-top:1.4rem;display:flex;flex-direction:column;gap:.6rem}
.ticks li{display:flex;align-items:flex-start;gap:.6rem;color:var(--fog-100);font-size:.96rem}
.ticks li::before{content:'';flex:none;width:18px;height:18px;margin-top:.16rem;border-radius:50%;background:var(--grad);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/76% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/76% no-repeat}
.panel-media{position:relative}
.panel-media .device{box-shadow:0 50px 110px -40px rgba(0,0,0,.95)}
.device--phone.tall{max-width:280px;margin:0 auto;border-radius:34px;padding:0;border:8px solid #16161d}
.device--phone.tall .phone-scroll{aspect-ratio:9/18;overflow:hidden;border-radius:26px;position:relative}
.device--phone.tall .phone-scroll img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.stackshots{height:auto}
.stackshots .shot-a{position:relative;z-index:1;width:88%}
.stackshots .shot-b{position:relative;z-index:2;width:64%;margin:-22% 0 0 auto;box-shadow:0 40px 90px -30px rgba(0,0,0,.95)}

/* ════════ WHY / COMPARE ════════ */
.compare{margin-top:.5rem;overflow-x:auto;border-radius:20px;border:1px solid rgba(255,255,255,.07);background:rgba(9,9,13,.6)}
.cmp{width:100%;border-collapse:collapse;min-width:680px}
.cmp th,.cmp td{padding:1rem 1.1rem;text-align:center;border-bottom:1px solid rgba(255,255,255,.05);font-size:.92rem}
.cmp thead th{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--fog-400);font-weight:600;border-bottom-color:rgba(255,255,255,.1)}
.cmp tbody td:first-child,.cmp thead th:first-child{text-align:left;color:var(--fog-100);font-weight:600;font-family:var(--font);font-size:.95rem;min-width:230px}
.cmp .me{background:linear-gradient(180deg, rgba(124,92,255,.12), rgba(124,92,255,.05));color:#fff}
.cmp thead th.me{color:#fff;font-family:var(--font-brand);font-weight:800;letter-spacing:-.02em;text-transform:none;font-size:1rem}
.cmp i{font-style:normal;font-size:1.1rem;font-weight:800}
.cmp i.y{color:#43e0a0}
.cmp i.n{color:#5b5b69}
.cmp small{display:block;font-size:.66rem;color:var(--fog-500);margin-top:.1rem}
.cmp tbody tr:last-child td{border-bottom:0}
.caveat{margin-top:1.6rem;color:var(--fog-400);font-size:.96rem;max-width:80ch;line-height:1.7;padding-left:1rem;border-left:2px solid rgba(124,92,255,.4)}
.caveat em{color:var(--fog-200);font-style:italic}

/* ════════ BENTO ════════ */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.cell{padding:1.7rem;border-radius:20px;background:rgba(11,11,16,.6);border:1px solid rgba(255,255,255,.06);transition:.35s var(--ease);position:relative;overflow:hidden}
.cell::after{content:'';position:absolute;inset:0;background:radial-gradient(60% 80% at 80% -10%, rgb(var(--accent)/.16), transparent 60%);opacity:0;transition:.4s}
.cell:hover{transform:translateY(-4px);border-color:rgba(124,92,255,.3)}
.cell:hover::after{opacity:1}
.cell.big{background:linear-gradient(160deg, rgba(28,18,48,.75), rgba(11,11,16,.6))}
.cell-ic{font-size:1.6rem;display:block;margin-bottom:1rem}
.cell h3{font-size:1.15rem;font-weight:800;color:#fff;letter-spacing:-.02em}
.cell p{margin-top:.5rem;color:var(--fog-400);font-size:.92rem}

/* ════════ SELF-HOST ════════ */
.self-wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.self-copy{max-width:30rem}
.self-links{margin-top:1.8rem;display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.self-note{font-family:var(--mono);font-size:.72rem;color:var(--fog-500)}
.term{border-radius:16px;overflow:hidden;background:rgba(6,6,10,.92);box-shadow:0 50px 110px -40px rgba(0,0,0,.95)}
.term-bar{display:flex;align-items:center;gap:7px;padding:.7rem 1rem;background:rgba(16,16,22,.95);border-bottom:1px solid rgba(255,255,255,.06)}
.term-bar i{width:10px;height:10px;border-radius:50%;background:#34343f}
.term-bar i:nth-child(1){background:#ff5f57}.term-bar i:nth-child(2){background:#febc2e}.term-bar i:nth-child(3){background:#28c840}
.term-bar span{margin-left:8px;font-family:var(--mono);font-size:.72rem;color:var(--fog-500)}
.copy{margin-left:auto;font-family:var(--mono);font-size:.72rem;color:var(--fog-300);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:7px;padding:.25rem .6rem;cursor:pointer;transition:.2s}
.copy:hover{color:#fff;background:rgba(124,92,255,.25)}
.copy.done{color:#43e0a0}
.term-body{padding:1.4rem 1.5rem;overflow-x:auto;font-family:var(--mono);font-size:.86rem;line-height:1.85;color:var(--fog-100)}
.term-body .p{color:var(--v);user-select:none}
.term-body .c{color:var(--fog-500)}
.term-body .ok{color:#43e0a0}

/* ════════ INSTALL / APP ════════ */
.install-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:1.5rem}
.install-card{padding:1.8rem;border-radius:20px;background:rgba(11,11,16,.6);border:1px solid rgba(255,255,255,.06)}
.install-ic{display:grid;place-items:center;width:50px;height:50px;border-radius:14px;color:#c2b4ff;background:rgba(124,92,255,.12);border:1px solid rgba(124,92,255,.18);margin-bottom:1.1rem}
.install-ic svg{width:27px;height:27px}
.install-card h3{font-size:1.18rem;font-weight:800;color:#fff;letter-spacing:-.02em}
.steps{list-style:none;counter-reset:step;margin-top:1.1rem;display:flex;flex-direction:column;gap:.75rem}
.steps li{counter-increment:step;display:flex;align-items:flex-start;gap:.7rem;color:var(--fog-300);font-size:.95rem;line-height:1.45}
.steps li::before{content:counter(step);flex:none;width:23px;height:23px;border-radius:50%;background:rgba(124,92,255,.16);color:#b6a6ff;font-size:.74rem;font-weight:800;display:grid;place-items:center;font-family:var(--mono);margin-top:.05rem}
.steps strong{color:var(--fog-50);font-weight:600}
.ico.inline{display:inline-block;width:15px;height:15px;vertical-align:-2px;margin-left:.1rem}
.install-native{display:flex;align-items:center;gap:2rem;justify-content:space-between;flex-wrap:wrap;padding:2.2rem;border-radius:22px;background:linear-gradient(120deg,rgba(24,16,44,.85),rgba(11,11,16,.7))}
.install-native-txt{max-width:62ch}
.install-native .kick{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--v)}
.install-native h3{font-size:clamp(1.3rem,2.6vw,1.9rem);font-weight:800;color:#fff;letter-spacing:-.025em;margin-top:.5rem}
.install-native p{margin-top:.7rem;color:var(--fog-300)}
.install-native .btn{flex:none}
@media(max-width:760px){
  .install-grid{grid-template-columns:1fr}
  .install-native{flex-direction:column;align-items:flex-start;padding:1.7rem}
}

/* ════════ ROADMAP ════════ */
.road-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:.5rem}
.road-card{padding:1.8rem;border-radius:20px;background:rgba(11,11,16,.6);border:1px solid rgba(255,255,255,.06);position:relative}
.road-card::before{content:'';position:absolute;left:1.8rem;top:1.8rem;width:46px;height:46px;border-radius:13px;background:rgba(124,92,255,.12);z-index:0}
.road-ic{position:relative;font-size:1.45rem;display:grid;place-items:center;width:46px;height:46px;margin-bottom:1.1rem}
.road-card h3{font-size:1.18rem;font-weight:800;color:#fff;letter-spacing:-.02em}
.road-card p{margin-top:.5rem;color:var(--fog-400);font-size:.94rem}
.road-also{margin-top:1.6rem;font-family:var(--mono);font-size:.8rem;letter-spacing:.02em;color:var(--fog-500);text-align:center}

/* ════════ FOOTER ════════ */
.foot{position:relative;z-index:3;padding:clamp(5rem,12vh,8rem) 0 3rem;overflow:hidden;border-top:1px solid rgba(255,255,255,.06)}
.foot-aurora{position:absolute;inset:0;top:auto;height:120%;z-index:0;opacity:.7;transform:rotate(180deg)}
.foot-wrap{text-align:center;display:flex;flex-direction:column;align-items:center}
.foot-cta{font-size:clamp(2.2rem,6vw,4rem);font-weight:800;letter-spacing:-.04em;color:#fff;margin:1.3rem 0 0;display:flex;gap:.4ch;align-items:baseline;flex-wrap:wrap;justify-content:center}
.foot-cta .wordmark{font-size:inherit}
.foot-sub{margin-top:1rem;color:var(--fog-400);max-width:46ch}
.foot-btns{margin-top:2rem;display:flex;gap:.9rem;flex-wrap:wrap;justify-content:center}
.foot-meta{margin-top:3.5rem;width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding-top:1.6rem;border-top:1px solid rgba(255,255,255,.06)}
.foot-meta nav{display:flex;gap:1.3rem;flex-wrap:wrap}
.foot-meta nav a{color:var(--fog-400);font-size:.88rem;transition:color .2s}
.foot-meta nav a:hover{color:#fff}
.foot-meta .lic{font-family:var(--mono);font-size:.72rem;color:var(--fog-600,#56566a)}

/* ════════ CINEMATIC 3D ════════ */
#bg3d{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.85}
#spotlight{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .6s ease;
  background:radial-gradient(520px circle at var(--sx,50%) var(--sy,38%), rgba(124,92,255,.13), rgba(195,59,255,.05) 42%, transparent 66%);
  mix-blend-mode:screen}
.hero-stage{perspective:1500px}
.hero-3d{position:relative;width:100%;height:100%;transform-style:preserve-3d;will-change:transform}
.hero-glow{transform:translateZ(-170px)}
[data-tilt]{transition:transform .45s cubic-bezier(.22,1,.36,1);transform-style:preserve-3d;will-change:transform}
.collapse-arena{perspective:1200px}
.collapse-core,.svc{transform-style:preserve-3d}
@keyframes corePulse{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.14)}}
@media(prefers-reduced-motion:reduce){
  #bg3d,#spotlight{display:none}
  .hero-3d{transform:none!important}
}

/* ════════ ICONS ════════ */
.ico{display:block;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.svc-ic{display:grid;place-items:center;color:#b6a6ff;filter:none}
.svc-ic .ico{width:22px;height:22px}
.pipe-ic{display:grid;place-items:center;color:#b6a6ff}
.pipe-ic .ico{width:20px;height:20px}
.pipe-seg.lit .pipe-ic{color:#fff}
.cell-ic{display:grid;place-items:center;width:48px;height:48px;border-radius:13px;color:#c2b4ff;margin-bottom:1rem;
  background:rgba(124,92,255,.12);border:1px solid rgba(124,92,255,.18)}
.cell-ic .ico{width:25px;height:25px}
.road-ic{color:#c9bcff;z-index:1}
.road-ic .ico{width:24px;height:24px}

/* ════════ RESPONSIVE ════════ */
@media(max-width:980px){
  .nav-links{display:none}
  .nav-cta{display:none}
  .nav-burger{display:flex}
  .nav.open{background:rgba(6,6,9,.94);backdrop-filter:blur(18px) saturate(1.3);border-bottom-color:rgba(255,255,255,.06)}
  .nav.open .nav-wrap{flex-wrap:wrap}
  .nav.open .nav-links{display:flex;flex-direction:column;order:3;width:100%;margin:.4rem 0 .2rem;gap:.1rem}
  .nav.open .nav-links a{padding:.7rem .9rem}
  .nav.open .nav-cta{display:inline-flex;order:4;margin:0 0 .4rem}
  .hero-inner{grid-template-columns:1fr;gap:1rem}
  .hero-stage{height:auto;margin-top:1rem}
  .hero-stage .device--browser{position:relative;width:100%;transform:none;top:0}
  .hero-stage .device--phone{display:none}
  .panel,.panel.reverse{grid-template-columns:1fr;gap:1.6rem}
  .panel.reverse .panel-text{order:1}.panel.reverse .panel-media{order:2}
  .map{grid-template-columns:1fr;gap:.5rem}
  .map-arrow{display:none}
  .grid{grid-template-columns:repeat(2,1fr)}
  .cell.big{grid-row:span 1}
  .road-grid{grid-template-columns:1fr}
  .self-wrap{grid-template-columns:1fr}
}
@media(max-width:560px){
  body{font-size:16px}
  .wrap{padding:0 20px}
  .grid{grid-template-columns:1fr}
  .svc{padding:.7rem .8rem}
  .svc-name{font-size:.86rem}
  .svc-role{font-size:.66rem}
  .foot-meta{flex-direction:column;text-align:center}
  .term-body{font-size:.64rem;padding:1rem;line-height:1.75}
  .term-bar span{font-size:.62rem}
}

/* ── touch / small screens: flatten ALL 3D (iOS Safari preserve-3d/WebGL safety) ── */
@media(max-width:980px){
  #spotlight{display:none!important}
  .hero-stage{perspective:none}
  .hero-3d{transform:none!important;transform-style:flat}
  .hero-glow{transform:none}
  [data-tilt]{transform:none!important;transform-style:flat}
  .collapse-arena{perspective:none}
  .collapse-core,.svc{transform-style:flat}
}
/* ── phones: replace the sticky orbit with a clean, compact static block ── */
@media(max-width:760px){
  .hero{min-height:100svh}
  .collapse{height:auto}
  .collapse-stage{position:static;height:auto;min-height:auto;padding:4rem 1.2rem;gap:1.6rem}
  .collapse-arena{position:static;transform:none;height:auto;width:100%;max-width:none;
    display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.7rem}
  .collapse-core{position:static;transform:none;order:-1;width:100%;margin-bottom:.3rem}
  .svc{position:static;transform:none;flex:0 0 auto}
  .collapse-head{min-height:auto}
  /* cinematic staggered entrance (2D, Safari-safe) */
  .cine .collapse-arena .svc,.cine .collapse-arena .collapse-core{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
  .collapse-arena.lit .svc,.collapse-arena.lit .collapse-core{opacity:1;transform:none}
  .collapse-arena.lit .svc:nth-child(1){transition-delay:.12s}
  .collapse-arena.lit .svc:nth-child(2){transition-delay:.19s}
  .collapse-arena.lit .svc:nth-child(3){transition-delay:.26s}
  .collapse-arena.lit .svc:nth-child(4){transition-delay:.33s}
  .collapse-arena.lit .svc:nth-child(5){transition-delay:.40s}
  .collapse-arena.lit .mark--xl::after{animation:corePulse 3.2s ease-in-out infinite}
  /* comparison table → stacked feature cards (no horizontal scroll) */
  .compare{overflow:visible;border:0;background:none;border-radius:0}
  .cmp{min-width:0}
  .cmp thead{display:none}
  .cmp,.cmp tbody,.cmp tr,.cmp td{display:block;width:100%}
  .cmp tr{border:1px solid rgba(255,255,255,.08);border-radius:16px;margin-bottom:.9rem;padding:.2rem 1rem 1rem;background:rgba(13,13,20,.7)}
  .cmp td{border:0;padding:.5rem 0;display:flex;align-items:center;justify-content:space-between;gap:1rem;min-width:0}
  .cmp td:first-child{display:block;text-align:left;font-size:1.05rem;font-weight:700;color:#fff;padding:.9rem 0 .55rem;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:.3rem}
  .cmp td:first-child::before{display:none}
  .cmp td::before{content:attr(data-label);color:var(--fog-400);font-family:var(--mono);font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;text-align:left;flex:1}
  .cmp td.me{background:linear-gradient(90deg,rgba(124,92,255,.16),rgba(124,92,255,.05));border-radius:10px;padding:.55rem .7rem;margin:.25rem 0}
  .cmp td.me::before{color:#fff;font-weight:700;font-family:var(--font);text-transform:none;font-size:.92rem;letter-spacing:0}
  .cmp i{font-size:1.05rem}
  .cmp small{display:inline;margin:0 0 0 .45rem;color:var(--fog-500)}
}

/* ════════ LARGE / ULTRAWIDE SCREENS — scale up to fill ════════ */
/* widen the content column AND grow the root size so rem/clamp typography + spacing scale together */
@media(min-width:1650px){ :root{--maxw:1520px} html{font-size:17px} body{font-size:18px} }
@media(min-width:2000px){ :root{--maxw:1780px} html{font-size:18.5px} body{font-size:19px} }
@media(min-width:2400px){ :root{--maxw:2040px} html{font-size:20px} body{font-size:20.5px} }
@media(min-width:2900px){ :root{--maxw:2360px} html{font-size:22px} body{font-size:22.5px} }
@media(min-width:3600px){ :root{--maxw:2760px} html{font-size:25.5px} body{font-size:25px} }
/* keep reading measure comfortable even as the column grows */
@media(min-width:2000px){ .sec-lede,.caveat,.panel-text p,.hero-sub{max-width:46ch} }

@media(prefers-reduced-motion:reduce){
  .fx-mesh,.float,.ping,.scroll-hint span,.svc{animation:none!important}
  .reveal,[data-reveal]{opacity:1;transform:none}
  html{scroll-behavior:auto}
}