/* ─────────────────────────────────────────────────────────────
   a11y: visible keyboard focus + skip link (prepend, additive)
   ───────────────────────────────────────────────────────────── */
:focus{outline:2px solid #2dd4bf;outline-offset:2px}
:focus:not(:focus-visible){outline:none}
:focus-visible{outline:2px solid #2dd4bf;outline-offset:2px;border-radius:4px}
.skip-link{position:absolute;top:-60px;left:16px;z-index:200;padding:10px 18px;border-radius:10px;background:var(--teal-700,#0f766e);color:#fff;font-family:var(--display);font-weight:600;font-size:14px;text-decoration:none;transition:top .2s ease}
.skip-link:focus{top:12px}
[id]{scroll-margin-top:76px}


/* ─────────────────────────────────────────────
   Self-hosted type — no CDN, no network at render
   ───────────────────────────────────────────── */
@font-face{font-family:'Inter';src:url('/assets/fonts/inter/400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Inter';src:url('/assets/fonts/inter/600-normal.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Inter';src:url('/assets/fonts/inter/700-normal.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('/assets/fonts/jetbrains-mono/600-normal.woff2') format('woff2');font-weight:600;font-display:swap}

:root{
  --teal-900:#04211f; --teal-800:#0a3a35; --teal-700:#0f766e; --teal-600:#0d9488;
  --teal-500:#14b8a6; --teal-400:#2dd4bf; --teal-300:#5eead4; --teal-200:#99f6e4; --teal-100:#ccfbf1;
  --ink:#0a1512; --ink-soft:#132420;
  --slate-900:#0f172a; --slate-700:#334155; --slate-600:#475569; --slate-500:#64748b; --slate-400:#94a3b8;
  --line:#e3ece9; --paper:#fff; --paper-2:#f6faf9;
  --violet:#4f46e5; --amber:#f59e0b; --rose:#e11d48; --sky:#0ea5e9;
  --display:'Inter',system-ui,-apple-system,sans-serif;
  --body:'Inter',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --r:14px; --r-lg:22px;
  --shadow:0 1px 2px rgba(4,33,31,.05),0 12px 40px -12px rgba(4,33,31,.16);
  --shadow-lg:0 40px 90px -30px rgba(4,33,31,.42);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;overflow-x:hidden;font-family:var(--body);color:var(--slate-700);background:var(--paper);
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--display);color:var(--slate-900);margin:0;
  letter-spacing:-.032em;line-height:1.06;font-weight:700}
p{margin:0}

/* ── layout ── */
.wrap{width:min(1180px,calc(100% - clamp(28px,7vw,44px)));margin-inline:auto}
.sec{padding:clamp(78px,9.5vw,138px) 0}
.dark{background:var(--ink);color:#a7c4bd;position:relative;overflow:hidden}
.dark h1,.dark h2,.dark h3,.dark h4{color:#fff}
.tint{background:var(--paper-2)}

.aurora::before,.aurora::after{content:'';position:absolute;border-radius:50%;
  filter:blur(90px);opacity:.5;pointer-events:none;z-index:0}
.aurora::before{width:660px;height:660px;top:-260px;left:-140px;
  background:radial-gradient(circle,#0d9488,transparent 68%)}
.aurora::after{width:560px;height:560px;bottom:-260px;right:-120px;
  background:radial-gradient(circle,#134e4a,transparent 66%)}
.dark > *{position:relative;z-index:1}

/* ── type ── */
.eyebrow{font-family:var(--mono);font-weight:600;font-size:11px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--teal-700);display:flex;align-items:center;gap:9px;margin-bottom:18px}
.eyebrow::before{content:'';width:22px;height:1.5px;background:currentColor;opacity:.55}
.dark .eyebrow{color:var(--teal-300)}
h1,.h1{font-size:clamp(2.6rem,6.1vw,4.5rem);letter-spacing:-.042em}
h2,.h2{font-size:clamp(2rem,4.1vw,3.05rem);letter-spacing:-.038em}
h3,.h3{font-size:clamp(1.16rem,1.7vw,1.36rem);letter-spacing:-.024em}
.lead{font-size:clamp(1.06rem,1.6vw,1.26rem);line-height:1.6;color:var(--slate-600);max-width:62ch}
.dark .lead{color:#9fbfb8}
.sec-head{max-width:720px;margin-bottom:clamp(42px,5vw,68px)}
.grad{background:linear-gradient(103deg,var(--teal-400) 4%,var(--teal-200) 52%,#bff5ea 96%);
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* ── buttons ── */
.btn{display:inline-flex;align-items:center;gap:9px;padding:13px 24px;border-radius:999px;
  font-family:var(--display);font-weight:600;font-size:15px;text-decoration:none;
  border:1px solid transparent;cursor:pointer;transition:transform .18s,box-shadow .18s,background .18s;letter-spacing:-.01em}
.btn:hover{transform:translateY(-2px)}
.btn-p{background:linear-gradient(180deg,var(--teal-600),var(--teal-700));color:#fff;
  box-shadow:0 10px 26px -8px rgba(13,148,136,.62)}
.btn-p:hover{box-shadow:0 16px 34px -8px rgba(13,148,136,.72)}
.btn-g{background:rgba(255,255,255,.07);color:#fff;border-color:rgba(255,255,255,.19);backdrop-filter:blur(9px)}
.btn-g:hover{background:rgba(255,255,255,.13)}

/* ── nav ── */
nav{position:sticky;top:0;z-index:60;background:rgba(4,33,31,.72);backdrop-filter:blur(18px) saturate(150%);
  border-bottom:1px solid rgba(255,255,255,.08);transition:background .3s}
.navi{display:flex;align-items:center;gap:26px;height:66px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;font-family:var(--display);
  font-weight:700;font-size:18px;color:#fff;letter-spacing:-.03em;margin-right:auto}
.brand svg{width:29px;height:29px;flex:none}
.navlinks{display:flex;gap:26px}
.navlinks a{color:#9fbfb8;text-decoration:none;font-size:14.5px;font-weight:500;transition:color .16s}
.navlinks a:hover{color:#fff}
@media(max-width:980px){.navlinks{display:none}}

/* ── hero ── */
.hero{padding:clamp(70px,9vw,116px) 0 clamp(80px,10vw,130px)}
.hero .lead{margin-top:24px;font-size:clamp(1.08rem,1.65vw,1.3rem)}
.hero-cta{display:flex;gap:13px;flex-wrap:wrap;margin-top:36px}
.hero-note{margin-top:20px;font-size:13.5px;color:#7ea79e;max-width:56ch;line-height:1.6}
.hero-note a{color:var(--teal-300)}
.badge{display:inline-flex;align-items:center;gap:9px;padding:7px 15px 7px 9px;border-radius:999px;
  background:rgba(45,212,191,.1);border:1px solid rgba(45,212,191,.24);color:var(--teal-200);
  font-size:12.5px;font-weight:600;margin-bottom:26px;font-family:var(--display)}
.badge b{background:var(--teal-400);color:#04211f;padding:2px 9px;border-radius:999px;font-size:11px;letter-spacing:.02em}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;margin-top:64px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-lg);overflow:hidden}
.stat{background:rgba(4,33,31,.62);padding:24px 22px;backdrop-filter:blur(8px)}
.stat b{display:block;font-family:var(--display);font-size:clamp(1.7rem,3vw,2.3rem);
  font-weight:700;color:#fff;letter-spacing:-.04em;line-height:1}
.stat span{display:block;margin-top:7px;font-size:12.5px;color:#8fb3ab;line-height:1.4}
@media(max-width:760px){.stats{grid-template-columns:repeat(2,1fr)}}

/* ── real product screenshots ── */
.shot{margin:0;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-lg);
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05)}
.shot img{width:100%;height:auto;display:block}
.shot-bar{display:flex;align-items:center;gap:7px;padding:11px 15px;
  background:rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.09)}
.shot figcaption{padding:12px 17px;font-size:12.5px;line-height:1.5;color:#7ea79e;
  background:rgba(0,0,0,.26);border-top:1px solid rgba(255,255,255,.07)}
.shot-light{border-color:var(--line);background:#fff}
.shot-light figcaption{background:var(--paper-2);color:var(--slate-500);border-top-color:var(--line)}
.shot-light .shot-bar{background:var(--paper-2);border-bottom-color:var(--line)}

/* ── glass mock UI ── */
.mock{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-lg);
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);backdrop-filter:blur(16px)}
.mock-bar{display:flex;align-items:center;gap:7px;padding:11px 15px;
  background:rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.09)}
.dot{width:10px;height:10px;border-radius:50%;flex:none}
.mock-url{margin-left:12px;font-family:var(--mono);font-size:11px;color:#89aaa3;
  background:rgba(0,0,0,.26);padding:4px 12px;border-radius:6px}
.mock-body{display:grid;grid-template-columns:1fr 292px;min-height:390px}
@media(max-width:860px){.mock-body{grid-template-columns:1fr}.mock-side{display:none}}

.dash{padding:17px;display:grid;grid-template-columns:repeat(6,1fr);gap:11px;align-content:start;
  background:linear-gradient(150deg,rgba(13,148,136,.16),rgba(4,33,31,.5) 62%)}
.tile{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.13);border-radius:12px;
  padding:12px;backdrop-filter:blur(11px)}
.tile h5{margin:0 0 8px;font-family:var(--display);font-size:11.5px;font-weight:600;color:#d6ece7;
  letter-spacing:.01em;display:flex;align-items:center;gap:6px}
.tile h5 i{width:5px;height:5px;border-radius:50%;background:var(--teal-400);flex:none}
.bar{height:6px;border-radius:3px;background:rgba(255,255,255,.16);margin-bottom:6px}
.bar.w80{width:80%}.bar.w60{width:60%}.bar.w45{width:45%}.bar.w70{width:70%}.bar.w35{width:35%}
.bar.tealbar{background:linear-gradient(90deg,var(--teal-400),var(--teal-300))}
.tile-num{font-family:var(--display);font-size:22px;font-weight:700;color:#fff;letter-spacing:-.03em}
.tile-sub{font-size:10.5px;color:#8fb3ab;margin-top:2px}
.spark{display:flex;align-items:flex-end;gap:3px;height:34px;margin-top:8px}
.spark i{flex:1;background:linear-gradient(180deg,var(--teal-400),rgba(45,212,191,.22));border-radius:2px 2px 0 0}

.mock-side{background:rgba(4,33,31,.62);border-left:1px solid rgba(255,255,255,.1);
  padding:15px;display:flex;flex-direction:column;gap:10px}
.eli-head{display:flex;align-items:center;gap:9px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.09)}
.eli-head img{width:24px;height:24px}
.eli-head b{font-family:var(--display);font-size:13.5px;color:#fff;font-weight:600}
.eli-head span{margin-left:auto;font-family:var(--mono);font-size:9.5px;color:var(--teal-300);
  background:rgba(45,212,191,.13);padding:3px 8px;border-radius:5px}
.msg{font-size:12.3px;line-height:1.55;padding:10px 12px;border-radius:11px}
.msg.u{background:rgba(255,255,255,.1);color:#dcefeb;border-bottom-right-radius:3px;align-self:flex-end;max-width:88%}
.msg.a{background:rgba(45,212,191,.1);border:1px solid rgba(45,212,191,.19);color:#bfe6df;border-bottom-left-radius:3px}
.toolchip{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10px;
  color:var(--teal-300);background:rgba(0,0,0,.3);border:1px solid rgba(45,212,191,.16);
  padding:6px 10px;border-radius:7px}
.toolchip::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--teal-400);
  box-shadow:0 0 0 0 rgba(45,212,191,.7);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 7px rgba(45,212,191,0)}100%{box-shadow:0 0 0 0 rgba(45,212,191,0)}}
.typing{display:flex;gap:4px;padding:9px 12px}
.typing i{width:5px;height:5px;border-radius:50%;background:var(--teal-300);animation:blink 1.4s infinite}
.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,60%,100%{opacity:.25}30%{opacity:1}}

.floaters{position:absolute;inset:0;pointer-events:none;z-index:2}
.floaters img{position:absolute;width:52px;filter:drop-shadow(0 14px 26px rgba(0,0,0,.42));
  animation:bob 7s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-13px)}}
@media(max-width:1120px){.floaters{display:none}}

/* ── cards / grids ── */
.grid{display:grid;gap:22px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1000px){.g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.g2,.g3,.g4{grid-template-columns:1fr}}

.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;
  box-shadow:var(--shadow);transition:transform .22s,box-shadow .22s;position:relative}
.card:hover{transform:translateY(-4px);box-shadow:0 24px 54px -20px rgba(4,33,31,.24)}
.card h3{margin-bottom:9px}
.card p{font-size:15px;color:var(--slate-600);line-height:1.6}
.dark .card{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.1);backdrop-filter:blur(12px)}
.dark .card p{color:#9fbfb8}
.dark .card:hover{box-shadow:0 24px 54px -20px rgba(0,0,0,.5)}

.appicon{width:52px;height:52px;margin-bottom:17px;filter:drop-shadow(0 7px 14px rgba(4,33,31,.16))}
.appicon-sm{width:38px;height:38px}

.kv{list-style:none;padding:0;margin:17px 0 0;display:flex;flex-direction:column;gap:9px}
/* NOTE: not display:flex — an inline <b>/<code> inside the li would become its
   own flex item and break onto a second column. Absolute marker keeps normal flow. */
.kv li{position:relative;padding-left:25px;font-size:14.3px;line-height:1.5;color:var(--slate-600)}
.kv li::before{content:'';position:absolute;left:0;top:4px;width:15px;height:15px;border-radius:5px;
  background:var(--teal-100);border:1.5px solid var(--teal-500);box-sizing:border-box;
  background-image:linear-gradient(135deg,transparent 42%,var(--teal-600) 42%,var(--teal-600) 58%,transparent 58%)}
.dark .kv li{color:#9fbfb8}
.dark .kv li::before{background:rgba(45,212,191,.16);border-color:var(--teal-400)}
/* planned-item variant: hollow marker, no check */
.kv li.plan::before{background:transparent;background-image:none;border-color:var(--slate-400);border-style:dashed}
.dark .kv li.plan::before{border-color:#5c8880;background:transparent}
.kv li.plan{color:var(--slate-500)}
.dark .kv li.plan{color:#7ea79e}

.pill{display:inline-block;font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;padding:5px 11px;border-radius:6px;background:var(--paper-2);
  color:var(--slate-500);border:1px solid var(--line);margin:0 5px 5px 0}
.dark .pill{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.11);color:#9fbfb8}

/* shipped / planned markers */
.mark{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  padding:3px 8px;border-radius:5px;white-space:nowrap;vertical-align:middle}
.mark.ship{background:#ecfdf5;color:#047857;border:1px solid #a7f3d0}
.mark.plan{background:#f1f5f9;color:var(--slate-500);border:1px solid #e2e8f0}
.mark.part{background:#fffbeb;color:#b45309;border:1px solid #fde68a}
.dark .mark.ship{background:rgba(45,212,191,.14);color:var(--teal-300);border-color:rgba(45,212,191,.3)}
.dark .mark.plan{background:rgba(255,255,255,.06);color:#8fb3ab;border-color:rgba(255,255,255,.14)}
.dark .mark.part{background:rgba(245,158,11,.13);color:#fcd34d;border-color:rgba(245,158,11,.3)}
.card > .mark{position:absolute;top:22px;right:22px}

.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(38px,5.5vw,80px);align-items:center}
@media(max-width:900px){.split{grid-template-columns:1fr}}

/* ── bloat comparison ── */
.bloat{display:grid;grid-template-columns:1fr auto 1fr;gap:30px;align-items:center}
@media(max-width:900px){.bloat{grid-template-columns:1fr;gap:20px}.bloat .arrow{transform:rotate(90deg);margin-inline:auto}}
.stack{display:flex;flex-direction:column;gap:8px}
.line-item{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);
  border-radius:11px;padding:11px 15px;font-size:14px;box-shadow:0 1px 2px rgba(4,33,31,.04)}
.line-item .nm{flex:1;color:var(--slate-600)}
.line-item .amt{font-family:var(--mono);font-size:12.5px;color:var(--rose);font-weight:600}
.line-item.tot{background:#fff5f5;border-color:#fecdd3}
.line-item.tot .nm{color:var(--slate-900);font-weight:600}
.arrow{width:44px;height:44px;border-radius:50%;background:var(--teal-700);color:#fff;
  display:grid;place-items:center;font-size:19px;box-shadow:0 10px 22px -8px rgba(15,118,110,.6)}
.one-bill{background:linear-gradient(160deg,var(--teal-700),var(--teal-900));border-radius:var(--r-lg);
  padding:32px;color:#cdeee7;box-shadow:var(--shadow-lg)}
.one-bill b{display:block;font-family:var(--display);font-size:2.5rem;color:#fff;letter-spacing:-.04em;line-height:1}
.one-bill .sub{font-size:13.5px;margin-top:8px;color:#8fc9c0}
.one-bill .apps{display:flex;flex-wrap:wrap;gap:7px;margin-top:22px}
.one-bill .apps img{width:31px;height:31px}


/* ── document w/ agent caret ── */
.doc{background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow-lg);overflow:hidden;border:1px solid var(--line)}
.doc-bar{display:flex;align-items:center;gap:8px;padding:10px 15px;background:var(--paper-2);
  border-bottom:1px solid var(--line);flex-wrap:wrap}
.who{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;font-family:var(--display);
  padding:4px 10px;border-radius:999px;color:#fff}
.who i{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.85}
.doc-page{padding:26px 30px;font-size:14px;line-height:1.85;color:var(--slate-700)}
.doc-page h4{font-size:19px;margin-bottom:12px;letter-spacing:-.02em}
.caret{display:inline-block;width:2px;height:1.05em;vertical-align:-2px;background:var(--rose);
  animation:caret 1.05s steps(1) infinite;position:relative;margin:0 1px}
@keyframes caret{50%{opacity:0}}
.caret::after{content:'Eli';position:absolute;top:-17px;left:-1px;background:var(--rose);color:#fff;
  font-family:var(--display);font-size:9.5px;font-weight:600;padding:1.5px 6px;border-radius:4px;
  white-space:nowrap;letter-spacing:0;opacity:1}
.hl{background:linear-gradient(180deg,transparent 62%,rgba(45,212,191,.36) 0)}

/* ── security stack ── */
.layers{display:flex;flex-direction:column;gap:11px}
.layer{display:flex;align-items:flex-start;gap:15px;padding:16px 20px;border-radius:14px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(10px)}
.layer .n{font-family:var(--mono);font-size:10.5px;color:var(--teal-300);flex:none;width:26px;padding-top:3px}
.layer b{font-family:var(--display);font-size:14.5px;color:#fff;display:block;font-weight:600;letter-spacing:-.015em}
.layer span{font-size:12.8px;color:#8fb3ab;display:block;margin-top:2px;line-height:1.5}

/* ── entity tree ── */
.tree{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;box-shadow:var(--shadow)}
.node{border:1px solid var(--line);border-radius:11px;padding:11px 14px;font-size:13.5px;background:var(--paper-2)}
.node b{font-family:var(--display);font-weight:600;color:var(--slate-900);font-size:14px;display:block;letter-spacing:-.015em}
.node span.role{font-size:11.5px;color:var(--slate-500)}
.node.root{background:linear-gradient(150deg,var(--teal-700),var(--teal-800));border-color:transparent}
.node.root b{color:#fff}.node.root span.role{color:var(--teal-200)}
.ledger{font-family:var(--mono);font-size:9.5px;color:var(--teal-700);background:var(--teal-100);
  padding:2px 7px;border-radius:5px;float:right;margin-top:2px}
.kids{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin-top:14px;position:relative;padding-top:16px}
.kids::before{content:'';position:absolute;top:0;left:12%;right:12%;height:1px;background:var(--line)}
@media(max-width:640px){.kids{grid-template-columns:1fr}}

/* ── app wall ── */
.wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:13px}
.wapp{display:flex;flex-direction:column;align-items:center;gap:9px;padding:20px 12px;border-radius:15px;
  background:#fff;border:1px solid var(--line);text-align:center;transition:transform .2s,box-shadow .2s}
.wapp:hover{transform:translateY(-4px);box-shadow:0 18px 36px -16px rgba(4,33,31,.24)}
.wapp img{width:42px;height:42px}
.wapp b{font-family:var(--display);font-size:13px;font-weight:600;color:var(--slate-900);letter-spacing:-.015em}
.wapp span{font-size:11.2px;color:var(--slate-500);line-height:1.4}

/* ── status table ── */
.tablewrap{overflow-x:auto}
.status{width:100%;border-collapse:collapse;font-size:14.5px;min-width:640px}
.status th{text-align:left;font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--slate-500);font-weight:600;padding:0 14px 12px;border-bottom:1px solid var(--line)}
.status td{padding:14px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--slate-600)}
.status tr:last-child td{border-bottom:none}
.status td:first-child{font-family:var(--display);font-weight:600;color:var(--slate-900)}
.legend{display:flex;gap:22px;flex-wrap:wrap;margin-bottom:26px;font-size:13.5px;color:var(--slate-500)}
.legend div{display:flex;align-items:center;gap:9px}

.illus{padding:11px 16px;font-size:12px;line-height:1.5;color:var(--slate-500);
  background:var(--paper-2);border-top:1px solid var(--line);font-style:italic}
.illus b{font-style:normal;font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--slate-400);display:block;margin-bottom:3px}

.note{border-left:3px solid var(--teal-500);padding:4px 0 4px 26px;font-size:clamp(1.02rem,1.5vw,1.16rem);
  line-height:1.66;color:var(--slate-600)}
.dark .note{color:#9fbfb8;border-color:var(--teal-400)}

.finale{text-align:center;max-width:760px;margin-inline:auto}
.finale .hero-cta{justify-content:center}
.finale .lead{margin-inline:auto}

footer{background:var(--ink);color:#7ea79e;padding:56px 0 40px;font-size:14px}
.fgrid{display:flex;gap:34px;flex-wrap:wrap;align-items:flex-start;justify-content:space-between}
footer .brand{margin-right:0}
.fnote{max-width:400px;margin-top:14px;font-size:13.5px;line-height:1.65;color:#7ea79e}
.flinks{display:flex;gap:44px;flex-wrap:wrap}
.flinks h6{font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  color:#5c8880;margin:0 0 13px;font-weight:600}
.flinks a{display:block;color:#a7c4bd;text-decoration:none;margin-bottom:9px;font-size:13.5px}
.flinks a:hover{color:#fff}
.fbot{margin-top:44px;padding-top:24px;border-top:1px solid rgba(255,255,255,.08);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12.5px;color:#5c8880}

/* ── entry effects ──
   Reveal animates `transform`; parallax below animates the separate `translate`
   property. They compose instead of overwriting each other, so a single element
   can both fade up on entry and drift on scroll. */
.rv{opacity:0;transform:translateY(30px) scale(.988);
  transition:opacity .85s cubic-bezier(.16,1,.3,1),transform .85s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--i,0)*75ms)}
.rv.in{opacity:1;transform:none}
.rv-l{transform:translateX(-34px)}
.rv-r{transform:translateX(34px)}

/* headline clip-reveal */
.h-rise{display:block;overflow:hidden}
.h-rise > span{display:block;transform:translateY(105%);
  transition:transform .95s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i,0)*95ms)}
.in .h-rise > span,.h-rise.in > span{transform:none}

/* scroll parallax — uses `translate`, never `transform` */
[data-px]{will-change:translate}

/* reading-progress bar */
#prog{position:fixed;top:0;left:0;height:2px;width:100%;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,var(--teal-500),var(--teal-200));z-index:80;pointer-events:none}

/* decorative parallax glow */
.glow{position:absolute;border-radius:50%;filter:blur(100px);opacity:.42;pointer-events:none;z-index:0}

@media(prefers-reduced-motion:reduce){
  .rv,.rv-l,.rv-r{opacity:1;transform:none;transition:none}
  .h-rise > span{transform:none;transition:none}
  [data-px]{translate:none!important}
  #prog{display:none}
  *{animation-duration:.001ms!important;animation-iteration-count:1!important}
  html{scroll-behavior:auto}
}

/* ── logo mark + paired / detail screenshot layouts ── */
.brand img{width:30px;height:30px;flex:none;object-fit:contain}
footer .brand img{width:30px;height:30px}

.pair{display:grid;grid-template-columns:340px 1fr;gap:26px;align-items:start}
.pair-side{display:flex;flex-direction:column}
@media(max-width:900px){.pair{grid-template-columns:1fr}}

.details{display:grid;grid-template-columns:1.2fr .8fr 1.2fr;gap:22px;align-items:start}
@media(max-width:1000px){.details{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.details{grid-template-columns:1fr}}
/* ── animated overlays on top of real screenshots ──
   Everything here is positioned in % of the image, so it stays aligned at any
   width. The screenshot underneath is untouched; the motion is added on top. */
.shot{position:relative}
.ov{position:absolute;pointer-events:none}

/* a soft light sweep, as if the panel just refreshed */
.sweep::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.13) 47%,transparent 62%);
  transform:translateX(-100%)}
.sweep.in::after{animation:sweep 2.6s cubic-bezier(.4,0,.2,1) .5s 1 forwards}
@keyframes sweep{to{transform:translateX(100%)}}

/* pulsing focus ring over a region of interest */
.ring{border:2px solid var(--teal-400);border-radius:6px;opacity:0;
  box-shadow:0 0 0 0 rgba(45,212,191,.5)}
.in .ring{animation:ringpulse 3.4s ease-out 1.1s infinite}
@keyframes ringpulse{
  0%{opacity:0;box-shadow:0 0 0 0 rgba(45,212,191,.5)}
  12%{opacity:1}
  45%{opacity:1;box-shadow:0 0 0 9px rgba(45,212,191,0)}
  70%,100%{opacity:0;box-shadow:0 0 0 0 rgba(45,212,191,0)}
}

/* blinking text caret, as if someone is still typing */
.tcaret{width:2px;background:var(--teal-600);opacity:0}
.in .tcaret{animation:tcaret 1.05s steps(1) 1.4s infinite}
@keyframes tcaret{0%,49%{opacity:1}50%,100%{opacity:0}}

/* little floating tag that names what you are looking at */
.tag-note{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;padding:4px 9px;border-radius:6px;white-space:nowrap;
  background:var(--teal-700);color:#fff;box-shadow:0 6px 16px -6px rgba(4,33,31,.6);
  opacity:0;transform:translateY(6px)}
.in .tag-note{animation:tagin .7s cubic-bezier(.16,1,.3,1) 1.5s forwards}
@keyframes tagin{to{opacity:1;transform:none}}

/* ═══════════ PRODUCT UI, REBUILT TO MEASURE ═══════════
   Values below are measured from the running product (exported DOM + computed
   styles), not eyeballed: tile radius 8px, border rgba(148,163,184,.24),
   fill rgba(1,4,16,.44), backdrop blur 36px, header 14.4px/600, body 13.1–14.1px,
   Inter throughout. Rebuilt rather than embedded so it is fluid at every width. */
:root{
  --t-fill:rgba(1,4,16,.44); --t-line:rgba(148,163,184,.24); --t-r:8px;
  --t-head:rgb(248,250,252); --t-text:rgb(232,232,232); --t-muted:rgb(203,213,225);
  --t-shadow:rgba(2,6,23,.42) 0 24px 70px, rgba(255,255,255,.06) 0 1px 0 inset;
  --t-blue:rgb(3,105,161); --t-amber:rgb(180,83,9); --t-violet:rgb(158,158,255);
}
.wsx{padding:clamp(10px,2.4vw,16px);border-radius:14px;
  background:linear-gradient(155deg,rgba(13,148,136,.22),rgba(4,33,31,.62) 62%)}
.wsx-bar{display:flex;gap:clamp(10px,2.4vw,20px);align-items:center;flex-wrap:wrap;
  padding:10px 13px;border-radius:var(--t-r);background:var(--t-fill);
  border:1px solid var(--t-line);margin-bottom:10px}
.wsx-bar span{display:flex;align-items:center;gap:6px;font-size:clamp(11px,2.6vw,12.5px);
  font-weight:600;color:var(--t-head)}
.wsx-bar img{width:18px;height:18px;flex:none}
.wsx-tabs{display:flex;gap:7px;padding:8px;border-radius:var(--t-r);background:rgba(0,0,0,.3);
  border:1px solid var(--t-line);margin-bottom:10px;overflow-x:auto;scrollbar-width:none}
.wsx-tabs::-webkit-scrollbar{display:none}
.wsx-tab{flex:none;font-size:clamp(11px,2.6vw,12.5px);font-weight:600;color:var(--t-muted);
  padding:5px 12px;border-radius:999px;border:1px solid transparent;display:flex;align-items:center;gap:5px}
.wsx-tab.on{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.18);color:#fff}
.wsx-tab img{width:13px;height:13px}
.wsx-grid{display:grid;grid-template-columns:1fr;gap:10px}
@media(min-width:760px){.wsx-grid{grid-template-columns:repeat(3,1fr)}.wsx-grid .span3{grid-column:1/-1}}

.tile{background:var(--t-fill);border:1px solid var(--t-line);border-radius:var(--t-r);
  box-shadow:var(--t-shadow);backdrop-filter:blur(36px) saturate(1.12) contrast(1.08);
  overflow:hidden;opacity:0;transform:translateY(12px)}
@keyframes wtin{to{opacity:1;transform:none}}
.in .tile{animation:wtin .65s cubic-bezier(.16,1,.3,1) forwards;animation-delay:calc(var(--d,0)*100ms + .2s)}
.tile-h{display:flex;align-items:center;gap:8px;padding:9px 13px;
  border-bottom:1px solid var(--t-line);font-size:clamp(12px,2.7vw,14.4px);font-weight:600;color:var(--t-head)}
.tile-h svg{width:15px;height:15px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;opacity:.75}
.tile-h .go{margin-left:auto;width:19px;height:19px;border-radius:50%;
  border:1px solid var(--t-line);display:grid;place-items:center;font-size:10px;color:var(--t-muted);flex:none}
.tile-b{padding:4px 13px 10px}
.trow{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-bottom:1px solid rgba(148,163,184,.14)}
.trow:last-child{border-bottom:none}
.t-t{font-size:clamp(12.5px,2.9vw,14.08px);color:var(--t-text);line-height:1.35}
.t-s{font-size:clamp(11px,2.6vw,12.48px);color:var(--t-muted);margin-top:3px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.t-ico{width:15px;height:15px;flex:none;margin-top:2px;stroke:var(--t-muted);fill:none;stroke-width:1.6;opacity:.8}
.t-box{width:14px;height:14px;border-radius:3px;border:1.5px solid rgb(100,116,139);flex:none;margin-top:2px;position:relative}
.t-box.on{background:var(--teal-600);border-color:var(--teal-600)}
.t-box.on::after{content:'';position:absolute;left:4px;top:1px;width:4px;height:8px;
  border:solid #04211f;border-width:0 2px 2px 0;transform:rotate(45deg)}
.in .t-box.tick{animation:tick .45s cubic-bezier(.16,1,.3,1) 1.9s forwards}
.chip{font-size:clamp(9.5px,2.2vw,10.88px);font-weight:600;letter-spacing:.04em;padding:2px 7px;border-radius:5px}
.chip.hi{color:#fca5a5;background:rgba(190,18,60,.18)}
.chip.md{color:#fcd34d;background:rgba(180,83,9,.22)}
.chip.doc{color:#7cc4f5;background:rgba(3,105,161,.22)}
.chip.sheet{color:#6ee7b7;background:rgba(5,150,105,.2)}
.chip.deck{color:#c4b5fd;background:rgba(158,158,255,.18)}
.t-thumb{width:26px;height:32px;flex:none;border-radius:3px;background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.5);position:relative;overflow:hidden}
.t-thumb::before{content:'';position:absolute;left:4px;right:4px;top:5px;height:1.5px;background:#c9d3de;
  box-shadow:0 5px 0 #dde3ea,0 10px 0 #dde3ea,0 15px 0 #e7ebf0}
.briefing-ico{width:30px;height:30px;border-radius:7px;flex:none;
  background:linear-gradient(140deg,#6366f1,#3b82f6);display:grid;place-items:center;color:#fff;font-size:15px}

/* sheet — fluid, scrolls only when it truly cannot fit */
.sheetx{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--t-r)}
.sheetx table{width:100%;min-width:430px;border-collapse:collapse;
  font-family:var(--mono);font-size:clamp(10.5px,2.4vw,12.5px)}
.sheetx th,.sheetx td{padding:clamp(6px,1.6vw,9px) clamp(7px,1.8vw,12px);
  border-bottom:1px solid var(--line);border-right:1px solid var(--line);text-align:left;white-space:nowrap}
.sheetx thead th{background:var(--paper-2);color:var(--slate-400);font-weight:600;font-size:10px;text-align:center}
.sheetx td.rh{background:var(--paper-2);color:var(--slate-400);text-align:center;width:1%;font-size:10px}
.sheetx tbody tr:first-child td:not(.rh){font-weight:700;color:var(--slate-900)}
.sheetx td.num{text-align:right;color:var(--slate-700)}
.sheetx tr.total td{border-top:2px solid var(--teal-600);font-weight:700;color:var(--slate-900);background:rgba(13,148,136,.05)}
.sheetx .pos{color:#047857}.sheetx .neg{color:#be123c}
.sheetx tbody tr{opacity:0}
.in .sheetx tbody tr{animation:rowin .5s ease-out forwards;animation-delay:calc(var(--d,0)*95ms + .25s)}
.sheetx .flash{position:relative}
.in .sheetx .flash::after{content:'';position:absolute;inset:0;background:rgba(45,212,191,.38);
  opacity:0;animation:cellflash 3s ease-out 1.4s infinite;pointer-events:none}

/* document page */
.pagex{background:#fff;padding:clamp(20px,4vw,34px) clamp(18px,4vw,38px)}
.pagex h4{font-family:var(--display);font-size:clamp(19px,4.4vw,26px);color:#12233b;
  letter-spacing:-.03em;margin-bottom:16px;font-weight:700;line-height:1.15}
.pagex p{font-size:clamp(12.5px,3vw,13.5px);line-height:1.72;color:#31445c;margin-bottom:12px}
.pagex .cur{display:inline-block;width:2px;height:1.02em;background:var(--rose);
  vertical-align:-3px;position:relative;margin-left:1px}
.in .pagex .cur{animation:tcaret 1.05s steps(1) infinite}
.pagex .cur::after{content:'Eli';position:absolute;top:-15px;left:-2px;background:var(--rose);color:#fff;
  font-family:var(--display);font-size:8.5px;font-weight:600;padding:1px 5px;border-radius:4px;white-space:nowrap}

/* ═══════════ SIMPLIFIED UI RECREATIONS ═══════════
   Drawn from real screenshots of the running product — same content, same
   palette and type — with toolbars, scrollbars and micro-controls removed so
   the thing being demonstrated is the only thing on screen. */
.ui{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-lg);
  border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.05);backdrop-filter:blur(14px)}
.ui-light{border-color:var(--line);background:#fff}
.ui-cap{padding:12px 17px;font-size:12.5px;line-height:1.5;color:#7ea79e;
  background:rgba(0,0,0,.26);border-top:1px solid rgba(255,255,255,.07)}
.ui-light .ui-cap{background:var(--paper-2);color:var(--slate-500);border-top-color:var(--line)}

/* ── workspace (dashboard) ── */
.ws{padding:16px;background:linear-gradient(155deg,rgba(13,148,136,.22),rgba(4,33,31,.62) 62%)}

.in .wt-box.tick{animation:tick .5s cubic-bezier(.16,1,.3,1) 2.1s forwards}
@keyframes tick{to{background:var(--teal-500);border-color:var(--teal-500)}}



/* ── sheet ── */
@keyframes rowin{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
@keyframes cellflash{0%{opacity:0}14%{opacity:.85}45%,100%{opacity:0}}

/* ── document page ── */

/* ── eli panel ── */
.elip{background:#141414;display:flex;flex-direction:column}
.elip-h{display:flex;align-items:center;gap:9px;padding:13px 15px;border-bottom:1px solid rgba(255,255,255,.09)}
.elip-h img{width:20px;height:20px}
.elip-h b{font-family:var(--display);font-size:14px;color:#fff}
.elip-h i{width:6px;height:6px;border-radius:50%;background:#22c55e;margin-left:-6px;align-self:flex-start;margin-top:2px}
.elip-sub{padding:10px 15px;font-size:11.5px;color:#9aa;border-bottom:1px solid rgba(255,255,255,.07)}
.elip-sub b{color:#e6f4f1;font-weight:600}
.elip-body{padding:15px;display:flex;flex-direction:column;gap:11px;flex:1}
.elip-q{align-self:flex-end;max-width:86%;background:rgba(255,255,255,.09);color:#dfeeeb;
  font-size:12px;line-height:1.5;padding:9px 12px;border-radius:11px;border-bottom-right-radius:3px}
.elip-a{font-size:12px;line-height:1.6;color:#c8ded9;opacity:0}
.in .elip-a{animation:fadein .8s ease-out 2.4s forwards}
@keyframes fadein{to{opacity:1}}
.elip-a b{color:#fff;font-weight:600}
.elip-left{font-size:10.5px;color:#6f8b86;text-align:center;font-style:italic;opacity:0}
.in .elip-left{animation:fadein .6s ease-out 3.4s forwards}
.elip-think{display:flex;gap:4px;padding:8px 0}
.in .elip-think{animation:fadeout .3s ease-out 2.4s forwards}
@keyframes fadeout{to{opacity:0;height:0;padding:0}}
.elip-think i{width:6px;height:6px;border-radius:50%;background:var(--teal-300);animation:blink 1.4s infinite}
.elip-think i:nth-child(2){animation-delay:.2s}.elip-think i:nth-child(3){animation-delay:.4s}
.elip-in{margin:0 15px 15px;padding:10px 13px;border-radius:9px;background:rgba(255,255,255,.05);
  border:1px solid #2563eb;font-size:11.5px;color:#7e8c8a}

/* slide-inspector rows */
.prop{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:9px 0;
  border-bottom:1px solid var(--line);font-size:13px}
.prop:last-of-type{border-bottom:none}
.prop span{color:var(--slate-500)}
.prop b{font-family:var(--display);font-weight:600;color:var(--slate-900);font-size:13.5px}
.slider{height:5px;border-radius:3px;background:var(--line);margin-top:8px;position:relative}
.slider i{position:absolute;left:0;top:-4px;width:13px;height:13px;border-radius:50%;
  background:var(--teal-600);box-shadow:0 2px 6px rgba(4,33,31,.3)}
.in .slider i{animation:slide 3.6s cubic-bezier(.5,0,.5,1) 1.2s infinite}
@keyframes slide{0%,100%{left:6%}50%{left:34%}}

/* numbered gate list */
.gates{list-style:none;counter-reset:g;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.gates li{counter-increment:g;position:relative;padding:13px 16px 13px 52px;border-radius:12px;
  background:#fff;border:1px solid var(--line);box-shadow:0 1px 2px rgba(4,33,31,.04);
  transition:transform .2s,box-shadow .2s}
.gates li:hover{transform:translateX(3px);box-shadow:0 10px 26px -14px rgba(4,33,31,.3)}
.gates li::before{content:counter(g);position:absolute;left:14px;top:13px;width:24px;height:24px;
  border-radius:7px;background:var(--teal-700);color:#fff;font-family:var(--mono);font-size:11px;
  font-weight:600;display:grid;place-items:center}
.gates b{font-family:var(--display);font-size:14.5px;color:var(--slate-900);letter-spacing:-.015em}
.gates span{display:block;font-size:13px;color:var(--slate-500);margin-top:1px;line-height:1.45}

/* ── micro-interactions ── */
.eyebrow::before{transition:width .7s cubic-bezier(.16,1,.3,1) .15s}
.rv:not(.in) .eyebrow::before,.sec-head:not(.in) .eyebrow::before{width:0}
.wapp img{transition:transform .28s cubic-bezier(.16,1,.3,1)}
.wapp:hover img{transform:scale(1.13) translateY(-2px)}
.card{overflow:hidden}
.card::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(13,148,136,.09),transparent 62%);
  transition:opacity .35s}
.card:hover::after{opacity:1}
.dark .card::after{background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(45,212,191,.11),transparent 62%)}
.pill{transition:transform .2s,border-color .2s,color .2s}
.pill:hover{transform:translateY(-2px);border-color:var(--teal-500);color:var(--teal-700)}
.stat{transition:background .3s}
.stat:hover{background:rgba(13,148,136,.16)}
.btn-p{position:relative;overflow:hidden}
.btn-p::after{content:'';position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);
  transform:translateX(-100%)}
.btn-p:hover::after{animation:sweep 1.1s ease-out 1 forwards}

.duo{display:grid;grid-template-columns:1fr;gap:22px;align-items:start}
@media(min-width:860px){.duo{grid-template-columns:1.35fr 1fr}}
@media(max-width:520px){
  .prop{flex-direction:column;align-items:flex-start;gap:2px}
  .prop b{font-size:14px}
}
.story{list-style:none;counter-reset:st;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.story li{counter-increment:st;position:relative;padding:15px 18px 15px 56px;border-radius:14px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(10px)}
.story li::before{content:counter(st);position:absolute;left:16px;top:15px;width:26px;height:26px;
  border-radius:8px;background:rgba(45,212,191,.16);border:1px solid rgba(45,212,191,.3);
  color:var(--teal-300);font-family:var(--mono);font-size:12px;font-weight:600;display:grid;place-items:center}
.story b{display:block;font-family:var(--display);font-size:15px;color:#fff;letter-spacing:-.015em}
.story span{display:block;font-size:13.5px;color:#9fbfb8;margin-top:3px;line-height:1.5}
.deck{background:#f4f7f9;padding:16px;display:grid;grid-template-columns:1fr;gap:12px}
.slide-main{background:#fff;border:1px solid var(--line);border-radius:6px;padding:clamp(16px,3.4vw,26px);
  box-shadow:0 6px 18px -10px rgba(4,33,31,.28);aspect-ratio:16/9;display:flex;flex-direction:column}
.s-title{font-family:var(--display);font-weight:700;color:#12233b;letter-spacing:-.025em;
  font-size:clamp(15px,3.4vw,22px)}
.s-sub{font-size:clamp(10px,2.2vw,12px);color:var(--slate-500);margin-top:3px}
.s-bars{display:flex;align-items:flex-end;gap:clamp(8px,2.4vw,18px);flex:1;margin-top:auto;padding-top:12px}
.s-bars i{flex:1;height:var(--h);background:linear-gradient(180deg,var(--teal-500),var(--teal-700));
  border-radius:3px 3px 0 0;position:relative;transform-origin:bottom;transform:scaleY(0)}
.in .s-bars i{animation:barup .8s cubic-bezier(.16,1,.3,1) forwards}
.in .s-bars i:nth-child(2){animation-delay:.1s}
.in .s-bars i:nth-child(3){animation-delay:.2s}
.in .s-bars i:nth-child(4){animation-delay:.3s}
@keyframes barup{to{transform:scaleY(1)}}
.s-bars em{position:absolute;bottom:-16px;left:0;right:0;text-align:center;font-style:normal;
  font-size:clamp(7.5px,1.7vw,9.5px);color:var(--slate-500);white-space:nowrap}
.slide-rail{display:flex;gap:7px}
.s-thumb{width:38px;height:24px;border-radius:3px;background:#fff;border:1px solid var(--line)}
.s-thumb.on{border-color:var(--teal-600);box-shadow:0 0 0 2px rgba(13,148,136,.18)}
.vid{margin:0;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-lg);
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05)}
.vid video{width:100%;height:auto;display:block;background:#0d1117}
.vid-bar{display:flex;align-items:center;gap:7px;padding:11px 15px;
  background:rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.09)}
.vid figcaption{padding:13px 17px;font-size:12.5px;line-height:1.55;color:#7ea79e;
  background:rgba(0,0,0,.26);border-top:1px solid rgba(255,255,255,.07)}

/* secondary demo clips */
.clips{display:grid;grid-template-columns:1fr;gap:20px}
@media(min-width:780px){.clips{grid-template-columns:1fr 1fr}}
.clip{margin:0;border-radius:var(--r-lg);overflow:hidden;border:1px solid rgba(255,255,255,.13);
  background:rgba(255,255,255,.05);box-shadow:var(--shadow-lg);position:relative}
.clip video{width:100%;height:auto;display:block;background:#0d1117}
.clip figcaption{padding:12px 16px;background:rgba(0,0,0,.28);border-top:1px solid rgba(255,255,255,.07)}
.clip figcaption b{display:block;font-family:var(--display);font-size:14.5px;font-weight:600;color:#fff;
  letter-spacing:-.015em;margin-bottom:3px}
.clip figcaption span{display:block;font-size:12.5px;line-height:1.5;color:#7ea79e}
.clip-tag{position:absolute;top:12px;left:12px;font-family:var(--mono);font-size:9.5px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;padding:4px 9px;border-radius:6px;
  background:rgba(4,33,31,.82);color:var(--teal-300);border:1px solid rgba(45,212,191,.3)}
.stackcol{display:flex;flex-direction:column}
.toolset{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:9px}
.ts-app{font-family:var(--display);font-size:11.5px;font-weight:600;color:#fff;
  min-width:98px;letter-spacing:-.01em}
.toolset code{font-family:var(--mono);font-size:10.5px;padding:3px 8px;border-radius:5px;
  background:rgba(45,212,191,.12);border:1px solid rgba(45,212,191,.22);color:var(--teal-300)}

.details figcaption code,.shot figcaption code{font-family:var(--mono);font-size:.9em;
  background:rgba(13,148,136,.1);padding:1px 5px;border-radius:4px;color:var(--teal-700)}
.dark .shot figcaption code{background:rgba(45,212,191,.13);color:var(--teal-300)}


/* ── dashboard light/dark morph preview (Make it yours) ── */
.dash-shot{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-lg);
  aspect-ratio:16/9;background:#0a3a35;isolation:isolate}
.dash-shot-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.dash-shot-img--overlay{clip-path:circle(0% at var(--mx,50%) var(--my,50%));
  transition:clip-path .62s cubic-bezier(.65,0,.35,1)}
.dash-shot[data-state="dark"] .dash-shot-img--overlay{clip-path:circle(150% at var(--mx,50%) var(--my,50%))}
.dash-shot-toggle{position:absolute;top:16px;right:16px;z-index:2;width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(255,255,255,.28);background:rgba(4,33,31,.55);backdrop-filter:blur(6px);
  color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:transform .18s ease,background .18s ease}
.dash-shot-toggle:hover{background:rgba(4,33,31,.75);transform:scale(1.06)}
.dash-shot-toggle:focus-visible{outline:2px solid var(--teal-300);outline-offset:2px}
.dash-shot-toggle .ico{width:20px;height:20px;position:absolute;transition:opacity .25s ease,transform .35s ease}
.dash-shot-toggle .ico-moon{opacity:0;transform:rotate(-40deg) scale(.6)}
.dash-shot-toggle .ico-sun{opacity:1;transform:rotate(0) scale(1)}
.dash-shot[data-state="dark"] .dash-shot-toggle .ico-sun{opacity:0;transform:rotate(40deg) scale(.6)}
.dash-shot[data-state="dark"] .dash-shot-toggle .ico-moon{opacity:1;transform:rotate(0) scale(1)}
@media (prefers-reduced-motion:reduce){
  .dash-shot-img--overlay{transition:none}
  .dash-shot-toggle,.dash-shot-toggle .ico{transition:none}
}
@media (max-width:640px){.dash-shot{aspect-ratio:4/3}}