:root{
  --bg:#050607; --fg:#f5f5f6; --dim:#a1a1aa; --faint:#6b6b74;
  --panel:#0b0d10; --fill:rgba(255,255,255,.04); --line:rgba(255,255,255,.08);
  --green:#29b457; --blue:#3777f2; --amber:#f5a623; --red:#f05050; --purple:#9b6be8; --claude:#e05a4e;
  --disp:"Bricolage Grotesque","Hanken Grotesk",-apple-system,system-ui,sans-serif;
  --body:"Hanken Grotesk",-apple-system,system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --ease:cubic-bezier(.22,.8,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--fg);font:400 16px/1.65 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden;letter-spacing:-.01em}
a{color:inherit;text-decoration:none}
::selection{background:rgba(245,166,35,.35)}
::-webkit-scrollbar{width:11px}
::-webkit-scrollbar-thumb{background:#1c1c22;border:3px solid #050607;border-radius:9px}
.wrap{max-width:1140px;margin:0 auto;padding:0 28px}
.mono{font-family:var(--mono)}
code{font-family:var(--mono);font-size:.86em;background:var(--fill);border:1px solid var(--line);border-radius:6px;padding:1px 6px}
em{font-style:normal;color:var(--fg)}

/* ── atmosphere ── */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(900px 480px at 50% -140px, rgba(55,119,242,.14), transparent 60%),
    radial-gradient(700px 420px at 85% 8%, rgba(41,180,87,.07), transparent 60%),
    radial-gradient(760px 480px at 10% 30%, rgba(155,107,232,.05), transparent 60%)}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.055) 1px, transparent 1px);background-size:26px 26px;
  mask-image:linear-gradient(to bottom, black, transparent 42%)}
nav,header,section,footer,#notch{position:relative;z-index:1}

/* ── the live notch ── */
#notch{position:fixed;top:0;left:50%;transform:translateX(-50%);z-index:50;
  display:flex;align-items:center;height:36px;background:#000;
  border:1px solid rgba(255,255,255,.1);border-top:none;border-radius:0 0 14px 14px;
  box-shadow:0 14px 44px rgba(0,0,0,.6);padding:0 14px;font-family:var(--mono);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease)}
#notch:hover{transform:translateX(-50%) scale(1.05);box-shadow:0 18px 54px rgba(0,0,0,.8)}
.n-left{display:flex;align-items:center;gap:7px;min-width:150px}
#notch-creature{width:17px;height:17px}
.n-glyph{font-size:12px;font-weight:800;color:var(--amber);display:none}
#notch.attention .n-glyph{display:inline}
#notch-text{font-size:11px;color:rgba(255,255,255,.9);white-space:nowrap}
.n-gap{width:120px}
.n-right{font-size:9.5px;color:rgba(255,255,255,.6);min-width:76px;text-align:right;white-space:nowrap}
#notch.attention .n-right{color:#000;background:var(--amber);border-radius:9px;padding:2px 7px;font-weight:700;min-width:0;box-shadow:0 0 10px rgba(245,166,35,.5)}
@media(max-width:820px){.n-gap{width:24px}.n-left{min-width:0}#notch{height:32px}}

/* ── nav ── */
nav{padding:52px 0 0}
nav .wrap{display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:9px;font:700 17px var(--disp)}
.brand img{width:24px;height:24px;border-radius:6px}
.navlinks{display:flex;align-items:center;gap:26px}
.muted{color:var(--dim);font-size:14px;transition:color .2s}
.muted:hover{color:var(--fg)}
@media(max-width:680px){.navlinks .muted{display:none}}

/* ── buttons ── */
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:99px;font:600 14px var(--body);padding:9px 20px;transition:all .22s var(--ease);cursor:pointer}
.btn.big{font-size:15.5px;padding:13px 28px}
.btn-buy{background:var(--fg);color:#000;box-shadow:0 4px 24px rgba(255,255,255,.14)}
.btn-buy:hover{transform:translateY(-2px);box-shadow:0 10px 34px rgba(255,255,255,.22)}
.btn-ghost{border:1px solid var(--line);color:var(--dim);background:var(--fill)}
.btn-ghost:hover{color:var(--fg);border-color:rgba(255,255,255,.22)}

/* ── hero (centered — the video right below is the one and only demo) ── */
header{padding:96px 0 44px;text-align:center}
.hero-copy{max-width:760px;margin:0 auto}
h1{font:800 clamp(44px,6vw,76px)/1.02 var(--disp);letter-spacing:-.03em}
.eyebrow{font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:18px}
.sub{color:var(--dim);font-size:17.5px;max-width:590px;margin:24px auto 32px}
.cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center;justify-content:center}
.micro{font:500 11.5px var(--mono);color:var(--faint);margin-top:18px}

/* entrance */
.rise{opacity:0;transform:translateY(18px);animation:rise .8s var(--ease) forwards}
.d1{animation-delay:.08s}.d2{animation-delay:.16s}.d3{animation-delay:.26s}.d4{animation-delay:.36s}
@keyframes rise{to{opacity:1;transform:none}}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ── shared card bits (used by the bento visuals) ── */
.creature-mini.big{width:48px;height:48px;margin:0 auto 18px;display:block}
.d-row{display:flex;align-items:baseline;font-size:10px;padding:2px 0;white-space:pre}
.d-row .sg{width:16px;text-align:center;font-weight:700;flex:none}
.d-row.del{background:rgba(240,80,80,.13);color:var(--red)}
.d-row.add{background:rgba(41,180,87,.11);color:var(--green)}
.cbtn{flex:1;display:flex;justify-content:center;align-items:center;gap:5px;padding:7px 0;border-radius:99px;font:600 11px var(--body);white-space:nowrap}
.cbtn.dim{background:rgba(255,255,255,.08);color:rgba(255,255,255,.85);border:.5px solid rgba(255,255,255,.1)}
.cbtn.white{background:rgba(255,255,255,.92);color:#000}
.cbtn.amber{background:rgba(245,166,35,.85);color:#fff}
.cbtn.red{background:rgba(240,80,80,.72);color:#fff}

/* ── compat strip ── */
.compat{display:flex;gap:10px 18px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:56px}
.compat span{font:500 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-right:8px}
.compat b{font:600 13px var(--body);color:var(--dim)}

/* ── sections ── */
section{padding:96px 0}
.sec-head{max-width:680px;margin-bottom:44px}
.sec-head.center{margin:0 auto 44px;text-align:center}
.sec-head h2, .final h2{font:700 clamp(28px,3.6vw,42px)/1.12 var(--disp);letter-spacing:-.02em;margin-bottom:14px}
.sec-head p{color:var(--dim)}

/* ── video showcase ── */
#watch{padding-top:16px}
#watch .wrap{max-width:1500px}
.showcase{display:flex;flex-direction:column;align-items:center;gap:26px}
.videoframe{width:min(80vw,1300px);border-radius:18px;overflow:hidden;border:1px solid var(--line);
  box-shadow:0 50px 140px rgba(0,0,0,.7);background:#000}
.videoframe video{display:block;width:100%;height:auto}
.chapters{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;width:min(80vw,1300px)}
.chapter{position:relative;padding:16px 16px 14px;border-radius:14px;background:var(--fill);border:1px solid transparent;cursor:pointer;transition:all .25s var(--ease)}
.chapter::before{content:"";position:absolute;top:0;left:16px;right:16px;height:2px;border-radius:2px;background:transparent;transition:background .25s}
.chapter:hover{background:rgba(255,255,255,.07)}
.chapter.active{border-color:var(--line);background:rgba(255,255,255,.06)}
.chapter.active::before{background:var(--green)}
.ci{font:700 10px var(--mono);color:var(--faint);display:block;margin-bottom:7px}
.chapter b{display:block;font-size:13.5px;margin-bottom:4px}
.chapter p{font-size:11.5px;color:var(--faint);line-height:1.5}
@media(max-width:900px){.chapters{grid-template-columns:repeat(2,1fr)}.videoframe,.chapters{width:100%}}

/* ── bento ── */
.bento{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.bcard{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:22px;transition:transform .3s var(--ease), border-color .3s}
.bcard:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.16)}
.bcard>b{display:block;font:700 17px var(--disp);margin-bottom:7px}
.bcard>p{font-size:13.5px;color:var(--dim)}
.b-visual{background:rgba(0,0,0,.45);border:1px solid var(--line);border-radius:14px;padding:18px;margin-bottom:18px;min-height:140px;display:flex;flex-direction:column;justify-content:center;gap:10px}
.mini-diff{font-family:var(--mono);border-radius:8px;overflow:hidden}
.mini-diff .d-row{font-size:10.5px;padding:3px 10px}
.mini-btnrow{display:flex;gap:6px}
.mini-btnrow .cbtn{font-size:10px;padding:6px 0}
#creatures-wall{display:grid;grid-template-columns:repeat(8,1fr);gap:10px}
#creatures-wall canvas{width:100%;aspect-ratio:1;border-radius:8px}
.b-usage .u-row{display:flex;align-items:center;gap:12px;font-size:11.5px;color:var(--dim)}
.b-usage .u-row span{width:88px;flex:none}
.b-usage .u-row em{font:500 10.5px var(--mono);font-style:normal;color:var(--faint);width:56px;text-align:right;flex:none}
.u-bar{flex:1;height:5px;background:rgba(255,255,255,.09);border-radius:9px;overflow:hidden}
.u-bar i{display:block;height:100%;width:var(--w);background:var(--green);border-radius:9px}
.u-bar i.g{background:rgba(255,255,255,.28)}
.u-row.proj span{font-family:var(--mono);font-size:10.5px}
.b-jump{gap:8px}
.j-row{display:flex;align-items:center;gap:9px;font:600 12px var(--body);background:var(--fill);border-radius:10px;padding:9px 12px}
.j-dot{width:6px;height:6px;border-radius:50%;flex:none}
.j-tool{font:700 10px var(--mono);color:var(--blue)}
.j-term{margin-left:auto;font:500 10.5px var(--body);color:var(--faint)}
@media(max-width:820px){.bento{grid-template-columns:1fr}}

/* ── how ── */
.how{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.step{background:var(--fill);border:1px solid var(--line);border-radius:16px;padding:20px;font-size:13.5px;color:var(--dim)}
.step b{color:var(--fg)}
.step .n{display:block;font:700 11px var(--mono);color:var(--green);margin-bottom:10px}
@media(max-width:820px){.how{grid-template-columns:1fr}}

/* ── pricing: one calm centered card ── */
.price-card{max-width:480px;margin:0 auto;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.12);border-radius:24px;padding:40px 36px 30px;
  box-shadow:0 40px 110px rgba(0,0,0,.5)}
.price{font:800 68px/1 var(--disp);letter-spacing:-.03em;display:flex;align-items:baseline}
.price .cur{font-size:32px;color:var(--dim);margin-right:2px}
.price small{font:500 12px var(--mono);color:var(--faint);margin-left:10px}
.tag{font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--green)}
.price-card ul{list-style:none;display:grid;gap:9px;text-align:left;margin:6px 0 4px}
.price-card li{font-size:14px;color:var(--dim);padding-left:24px;position:relative}
.price-card li::before{content:"✓";position:absolute;left:0;color:var(--green);font-weight:700}
.price-card .btn{width:100%;justify-content:center}
.install-cmd{position:relative;width:100%;font:500 12px var(--mono);color:var(--dim);
  background:rgba(0,0,0,.5);border:1px solid var(--line);border-radius:10px;
  padding:11px 58px 11px 14px;text-align:left;cursor:pointer;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;transition:border-color .2s,color .2s}
.install-cmd:hover{border-color:rgba(255,255,255,.24);color:var(--fg)}
.install-cmd .dollar{color:var(--green);user-select:none}
.copy-hint{position:absolute;right:10px;top:50%;transform:translateY(-50%);
  font-size:9.5px;color:var(--faint);background:var(--fill);border-radius:6px;padding:3px 8px}
.req{font-size:12.5px;color:var(--dim);line-height:1.6}
.req b{color:var(--fg)}
.note{font:500 10.5px var(--mono);color:var(--faint)}

/* ── faq ── */
.faq{max-width:720px;display:grid;gap:10px}
details{background:var(--fill);border:1px solid var(--line);border-radius:14px;padding:16px 20px}
summary{cursor:pointer;font:600 14.5px var(--body);list-style:none;display:flex;justify-content:space-between;align-items:center}
summary::after{content:"+";font:400 18px var(--mono);color:var(--faint);transition:transform .25s}
details[open] summary::after{transform:rotate(45deg)}
details p{margin-top:10px;font-size:13.5px;color:var(--dim)}

/* ── final CTA ── */
.final{text-align:center;padding:110px 0 130px}
.final .micro{margin-top:16px}
.final .btn{margin-top:26px}

/* ── post-purchase panel ── */
#post-buy[hidden], #buy-pill[hidden]{display:none}
#post-buy{position:fixed;inset:0;z-index:80;display:grid;place-items:center;
  background:rgba(4,5,7,.8);backdrop-filter:blur(8px);animation:rise .4s var(--ease)}
.pb-card{width:min(460px,calc(100vw - 40px));text-align:center;
  background:var(--panel);border:1px solid rgba(255,255,255,.14);border-radius:24px;
  padding:36px 32px 28px;box-shadow:0 50px 140px rgba(0,0,0,.8);
  display:flex;flex-direction:column;align-items:center;gap:14px}
.pb-card h3{font:700 26px var(--disp);letter-spacing:-.02em}
.pb-card p{font-size:13.5px;color:var(--dim)}
.pb-steps{font-size:12.5px}
.pb-card .btn{margin-top:4px}
.pb-key{position:relative;width:100%;text-align:left;cursor:pointer;
  background:rgba(41,180,87,.08);border:1px solid rgba(41,180,87,.3);border-radius:10px;
  padding:9px 58px 9px 14px;transition:border-color .2s}
.pb-key:hover{border-color:rgba(41,180,87,.55)}
.pb-key-label{display:block;font:600 9px var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--green);margin-bottom:3px}
.pb-key-value{display:block;font:600 12.5px var(--mono);color:var(--fg);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── pinned "installed yet?" pill for buyers ── */
#buy-pill{position:fixed;right:20px;bottom:20px;z-index:70;display:flex;align-items:center;gap:6px;
  background:var(--panel);border:1px solid rgba(255,255,255,.16);border-radius:99px;
  padding:6px 8px 6px 14px;box-shadow:0 18px 60px rgba(0,0,0,.6);animation:rise .5s var(--ease)}
#buy-pill button{background:none;border:none;cursor:pointer;color:var(--dim);font:600 12px var(--body)}
#buy-pill .bp-open{display:flex;align-items:center;gap:8px}
#buy-pill .bp-open:hover{color:var(--fg)}
.bp-dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 8px rgba(41,180,87,.6)}
#buy-pill .bp-dismiss{font-size:11px;color:var(--faint);padding:4px 7px;border-radius:50%}
#buy-pill .bp-dismiss:hover{color:var(--fg);background:var(--fill)}

footer{border-top:1px solid var(--line);padding:26px 0 34px}
footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;font-size:13px;color:var(--faint)}
.heart{color:var(--red)}
.flink{color:var(--dim);transition:color .2s}
.flink:hover{color:var(--fg)}
footer .mono{font-size:12px}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .rise,.reveal{opacity:1;transform:none}
}