/* GitHub in 3D — dark design study. Original stylesheet. */
:root{
  --bg:#07090d;
  --bg-2:#0d1117;
  --card:#0f141b;
  --ink:#e6edf3;
  --ink-70:rgba(230,237,243,.7);
  --ink-50:rgba(230,237,243,.5);
  --ink-30:rgba(230,237,243,.3);
  --line:rgba(240,246,252,.12);
  --line-2:rgba(240,246,252,.2);
  --green:#3fb950;
  --green-hi:#56d364;
  --blue:#2f81f7;
  --purple:#a371f7;
  --pink:#f778ba;

  --pad:clamp(20px,2.6vw,40px);
  --hdr-h:92px;
  --col:min(640px,84vw);
  --wide:min(1120px,92vw);

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --display:"Mona Sans","Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Consolas,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);color-scheme:dark}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,canvas,svg{display:block;max-width:100%}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
::selection{background:var(--green);color:#04120a}
:focus-visible{outline:2px solid var(--green);outline-offset:4px;border-radius:6px}

/* backdrop: two very soft brand glows + vignette, fixed so it never travels */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(60vw 50vh at 12% 8%,rgba(47,129,247,.10),transparent 70%),
    radial-gradient(55vw 55vh at 92% 88%,rgba(63,185,80,.08),transparent 70%),
    radial-gradient(120vw 90vh at 50% 50%,transparent 55%,rgba(0,0,0,.55) 100%);
}
/* film grain */
body::after{
  content:"";position:fixed;inset:-50%;z-index:90;pointer-events:none;
  opacity:.07;
  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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1s steps(6) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}
  60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}
}

.wrap{width:100%;padding-inline:var(--pad);display:flex;flex-direction:column;align-items:center;text-align:center}
.sec{position:relative;padding-block:clamp(90px,13vh,170px)}

/* mark */
.mark{width:30px;height:30px;fill:var(--ink)}
.mark--lg{width:64px;height:64px}

/* ------------------------------------------------------------ pills */
.pill{
  position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;
  height:48px;padding-inline:26px;border-radius:99px;
  background:var(--ink);color:#05070a;
  font:600 .9rem/1 var(--sans);letter-spacing:.04em;white-space:nowrap;
  transition:transform .5s var(--ease-out),background-color .3s var(--ease),color .3s var(--ease),box-shadow .4s var(--ease);
}
.pill::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:var(--green);transform:translateY(101%);
  transition:transform .55s var(--ease-out);
}
.pill:hover,.pill:focus-visible{color:#04120a;box-shadow:0 0 0 1px rgba(63,185,80,.4),0 18px 50px -12px rgba(63,185,80,.55)}
.pill:hover::before,.pill:focus-visible::before{transform:translateY(0)}
.pill:active{transform:scale(.97)!important}
.pill--lg{height:64px;padding-inline:40px;font-size:1rem}
.pill span{display:block;pointer-events:none}

.ghost{
  font:500 .95rem/1 var(--sans);color:var(--ink-70);
  padding-bottom:3px;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;
  transition:background-size .5s var(--ease-out),color .3s var(--ease);
}
.ghost:hover,.ghost:focus-visible{color:var(--ink);background-size:100% 1px}

/* ------------------------------------------------------------ header */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:60;height:var(--hdr-h);
  display:flex;align-items:center;justify-content:center;gap:100px;
  padding-inline:var(--pad);pointer-events:none;
}
.hdr::before{
  content:"";position:absolute;inset:0 0 -30px;z-index:-1;pointer-events:none;
  background:linear-gradient(var(--bg) 0%,rgba(7,9,13,.75) 45%,transparent);
}
.hdr > *{pointer-events:auto}
.hdr__side{flex:1;min-width:0;display:flex;align-items:center;gap:clamp(40px,5.5vw,100px)}
.hdr__side--l{justify-content:flex-end}
.hdr__side--r{justify-content:flex-start}
.hdr__mark{display:grid;place-items:center;width:46px;height:46px;border-radius:50%}
.hdr__mark .mark{transition:transform .7s var(--ease-out),filter .5s var(--ease)}
.hdr__mark:focus-visible .mark{transform:rotate(-12deg) scale(1.08);filter:drop-shadow(0 0 14px rgba(63,185,80,.55))}
@media (hover:hover) and (pointer:fine){.hdr__mark:hover .mark{transform:rotate(-12deg) scale(1.08);filter:drop-shadow(0 0 14px rgba(63,185,80,.55))}}

.navlink{
  position:relative;display:inline-flex;align-items:center;height:46px;
  color:var(--ink-70);font:500 .86rem/1 var(--sans);letter-spacing:.12em;white-space:nowrap;
  transition:color .3s var(--ease);
}
.navlink::after{
  content:"";position:absolute;left:0;right:0;bottom:10px;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease-out);
}
.navlink:hover,.navlink:focus-visible,.navlink.is-active{color:var(--ink)}
.navlink:hover::after,.navlink:focus-visible::after,.navlink.is-active::after{transform:scaleX(1);transform-origin:left}

@property --orbit{syntax:'<angle>';initial-value:0deg;inherits:false}
.navcta{
  isolation:isolate;height:42px;padding-inline:22px;border-radius:99px;
  color:var(--ink);border:1px solid var(--line-2);background:rgba(13,17,23,.6);
  transition:color .35s var(--ease),background-color .35s var(--ease),border-color .35s var(--ease);
}
.navcta::after{display:none}
.navcta::before{
  content:"";position:absolute;inset:-5px;border-radius:inherit;z-index:-1;
  background:conic-gradient(from var(--orbit),transparent 0deg,var(--green) 40deg,var(--blue) 80deg,transparent 130deg,transparent 360deg);
  filter:blur(8px);opacity:.55;animation:orbit 4.2s linear infinite;
}
@keyframes orbit{to{--orbit:360deg}}
.navcta:hover,.navcta:focus-visible{background:var(--green);border-color:var(--green);color:#04120a}

.hdr__progress{position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line);pointer-events:none}
.hdr__progress span{display:block;height:100%;background:linear-gradient(90deg,var(--blue),var(--green));transform-origin:left;transform:scaleX(0)}

/* section HUD, bottom corners */
.hud{position:fixed;left:0;right:0;bottom:0;z-index:55;pointer-events:none;
  display:flex;justify-content:space-between;align-items:flex-end;padding:0 var(--pad) 22px;
  font:400 .74rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-50)}
.hud__sec{display:flex;align-items:center;gap:10px}
.hud__dot{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 12px var(--green);animation:pulse 2s var(--ease) infinite}
@keyframes pulse{50%{opacity:.35}}
#hudsec{display:inline-block;min-width:12ch}
.hud__hint{color:var(--ink-30)}

/* ------------------------------------------------------------ preloader */
.preloader{
  position:fixed;inset:0;z-index:200;display:grid;place-items:center;align-content:center;gap:22px;
  background:var(--bg);
}
.preloader .mark{animation:markIn 2.2s var(--ease-out) infinite;filter:drop-shadow(0 0 30px rgba(63,185,80,.35))}
@keyframes markIn{0%,100%{transform:scale(1);opacity:.8}50%{transform:scale(1.08);opacity:1}}
.preloader__count{font:400 .78rem/1 var(--mono);letter-spacing:.2em;color:var(--ink-50)}
html.no-js .preloader{display:none}

/* ------------------------------------------------------------ 3D stage + poster */
.stage{position:fixed;inset:0;z-index:20;pointer-events:none;opacity:0;transition:opacity 1.4s var(--ease-out)}
.stage canvas{width:100%!important;height:100%!important}
body.is-3d .stage{opacity:1}
.poster{position:fixed;inset:0;z-index:1;pointer-events:none;display:grid;place-items:center}
.poster__mark{width:min(34vh,30vw);height:min(34vh,30vw);fill:url(#g-chrome);opacity:.16;filter:drop-shadow(0 30px 60px rgba(0,0,0,.6))}
body.is-3d .poster{display:none}

/* ------------------------------------------------------------ material lines */
.matlines{position:fixed;inset:0;z-index:30;pointer-events:none}
.matline{
  position:absolute;left:0;right:0;top:0;height:0;
  display:flex;align-items:center;justify-content:space-between;padding-inline:var(--pad);
  will-change:transform;
}
.matline::before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;margin-top:-1px;
  background:linear-gradient(90deg,transparent,var(--green) 12%,var(--green-hi) 50%,var(--green) 88%,transparent);
  box-shadow:0 0 24px 2px rgba(63,185,80,.9),0 0 80px 14px rgba(63,185,80,.35);
}
.matline__label,.matline__name{
  position:relative;font:500 .74rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:#04120a;background:var(--green);border-radius:99px;padding:8px 16px;
}
.matline__label{background:transparent;color:var(--green-hi);border:1px solid rgba(63,185,80,.5);backdrop-filter:blur(6px)}
.sec--materials{padding-block:0}
.mat__intro{
  text-align:center;padding-top:12vh;padding-bottom:16vh;
  font:400 .78rem/1.6 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-50);
}
.matanchor{height:95vh}
.matanchor:last-child{height:30vh}

/* ------------------------------------------------------------ hero */
.sec--hero{
  min-height:100vh;display:grid;place-items:center;align-content:center;
  padding-top:calc(var(--hdr-h) + clamp(40px,7vh,88px));padding-bottom:var(--hdr-h);text-align:center;
}
.hero__title{
  font-family:var(--display);font-weight:900;font-stretch:115%;
  font-size:clamp(4.6rem,min(15vw,19vh),16rem);line-height:.86;letter-spacing:-.05em;
  color:#f0f6fc;text-shadow:0 30px 80px rgba(0,0,0,.5);
}
.hero__title > span{display:block}
.hero__title .ch{display:inline-block;will-change:transform}
.hero__title .ln{display:block;overflow:hidden;padding-bottom:.04em}
.lede{
  margin-top:clamp(28px,4.5vh,56px);max-width:var(--col);
  font-size:clamp(1.02rem,1.3vw,1.22rem);line-height:1.5;color:var(--ink-70);
}
.hero__cta{margin-top:clamp(28px,4vh,48px);display:flex;align-items:center;justify-content:center;gap:32px}

/* ------------------------------------------------------------ type */
.title{
  font-family:var(--display);font-weight:300;font-stretch:110%;
  font-size:clamp(3rem,7.6vw,7rem);line-height:.95;letter-spacing:-.03em;
  margin-bottom:clamp(56px,9vh,120px);
}
.statement{
  font-family:var(--display);font-weight:300;font-stretch:110%;
  font-size:clamp(2.6rem,6.4vw,6rem);line-height:1;letter-spacing:-.03em;text-align:center;
}
.statement > span{display:block}
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.w > span{display:inline-block;will-change:transform}

/* ------------------------------------------------------------ steps */
.steps{width:var(--wide);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px);text-align:left}
.step,.case__box{
  position:relative;isolation:isolate;
  background:linear-gradient(180deg,rgba(22,27,34,.9),rgba(13,17,23,.9));
  border:1px solid var(--line);border-radius:24px;
  transition:border-color .4s var(--ease),transform .6s var(--ease-out);
}
/* pointer-follow glow */
[data-glow] > *:first-child,[data-glow].step{--mx:50%;--my:50%}
.step::after,.case__box::after{
  content:"";position:absolute;inset:-1px;border-radius:inherit;z-index:-1;pointer-events:none;opacity:0;
  background:radial-gradient(380px circle at var(--mx) var(--my),rgba(63,185,80,.16),transparent 60%);
  transition:opacity .4s var(--ease);
}
@media (hover:hover) and (pointer:fine){.step:hover,.case:hover .case__box{border-color:rgba(63,185,80,.35);transform:translateY(-4px)}}
.step:hover::after,.case:hover .case__box::after{opacity:1}
.step{padding:clamp(26px,2.6vw,40px);display:grid;gap:12px;align-content:start}
.step__num{font:300 clamp(2.4rem,3.6vw,3.4rem)/1 var(--display);letter-spacing:-.03em;color:var(--ink-30);margin-bottom:10px}
.step:hover .step__num{color:var(--green)}
.step__name{font:500 clamp(1.25rem,1.6vw,1.5rem)/1.15 var(--display);letter-spacing:-.01em}
.step__copy{font-size:1rem;line-height:1.5;color:var(--ink-70)}
.step__code{
  margin-top:14px;display:block;padding:12px 14px;border-radius:12px;background:rgba(1,4,9,.7);border:1px solid var(--line);
  font:400 .8rem/1.45 var(--mono);color:var(--green-hi);white-space:normal;overflow-wrap:anywhere;
}

/* ------------------------------------------------------------ rows */
.rows{width:var(--col);text-align:left}
.row{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(16px,3vw,44px);padding-block:clamp(28px,4.2vh,46px);
}
.row::before,.row:last-child::after{
  content:"";position:absolute;left:0;right:0;height:1px;background:var(--line);
  transform-origin:left;transform:scaleX(var(--line-s,1));
}
.row::before{top:0}
.row:last-child::after{bottom:0}
.row__name{font:400 clamp(1.4rem,2.1vw,1.95rem)/1.12 var(--display);letter-spacing:-.015em}
.row__name small{display:block;margin-top:10px;font:400 .74rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--green)}
.row__list{display:grid;gap:clamp(12px,1.6vh,18px);align-content:start}
.row__list li{position:relative;padding-left:28px;font-size:1rem;line-height:1.4;color:var(--ink-70)}
.row__list li::before{content:"—";position:absolute;left:0;top:0;color:var(--ink-30)}
.row__copy{font-size:1rem;line-height:1.55;color:var(--ink-70)}
.row:hover .row__name{color:var(--green-hi)}
.row__name{transition:color .35s var(--ease)}

/* ------------------------------------------------------------ marquee */
.sec--examples{padding-block:clamp(70px,10vh,130px)}
.marquee{overflow:hidden;padding-block:10px;
  -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee__row{display:flex;gap:clamp(14px,1.6vw,24px);width:max-content;will-change:transform}
.tile{
  position:relative;flex:0 0 auto;height:clamp(320px,46vh,520px);aspect-ratio:9/16;border-radius:20px;overflow:hidden;
  border:1px solid var(--line);background:var(--tile-bg,#0d1117);
  display:grid;place-items:center;perspective:900px;
  transition:transform .6s var(--ease-out),border-color .4s var(--ease);
}
@media (hover:hover) and (pointer:fine){.tile:hover{transform:translateY(-6px);border-color:var(--line-2)}}
.tile__obj{position:relative;width:58%;aspect-ratio:1;transform-style:preserve-3d;animation:spinY var(--dur,5s) linear infinite;animation-direction:var(--dir,normal)}
.tile__obj svg{position:absolute;inset:0;width:100%;height:100%}
.tile__obj svg:not(:last-child){filter:brightness(.42)}
.tile__floor{position:absolute;left:18%;right:18%;bottom:20%;height:16px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.6),transparent);filter:blur(4px)}
.tile__meta{position:absolute;left:16px;right:16px;bottom:16px;display:flex;flex-direction:column;gap:7px;
  font:400 .64rem/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-50)}
.tile__meta b{font-weight:500;font-size:.78rem;color:var(--ink)}
@keyframes spinY{to{transform:rotateY(360deg)}}
.tile--burst .tile__obj{animation-name:burst}
@keyframes burst{0%{transform:rotateY(0)}35%{transform:rotateY(540deg)}100%{transform:rotateY(720deg)}}
.tile--wave .tile__obj{animation-name:wave}
@keyframes wave{0%{transform:rotateY(0) rotateX(12deg)}50%{transform:rotateY(180deg) rotateX(-12deg)}100%{transform:rotateY(360deg) rotateX(12deg)}}
.tile--flip .tile__obj{animation-name:flip}
@keyframes flip{to{transform:rotateX(360deg)}}

/* ------------------------------------------------------------ use cases */
.cases{width:var(--wide);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.case__box{padding:18px 16px 16px;display:grid;gap:14px;justify-items:center}
.case__label{font:400 .74rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-50)}
.mock{width:100%;aspect-ratio:4/3.2;border-radius:14px;background:#010409;border:1px solid var(--line);padding:14px;display:flex;flex-direction:column;gap:8px;overflow:hidden;perspective:500px}
.bar{display:block;height:7px;border-radius:4px;background:rgba(240,246,252,.1)}
.bar--w30{width:30%}.bar--w40{width:40%}.bar--w50{width:50%}.bar--w60{width:60%}.bar--w70{width:70%}.bar--w80{width:80%}.bar--w90{width:90%}
.spin3d{fill:url(#g-chrome);animation:spinY 4s linear infinite}
.mock__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;width:70%;margin-top:4px}
.mock__grid i{aspect-ratio:1;border-radius:2px;background:#0e4429}
.mock__grid i:nth-child(3n){background:#006d32}.mock__grid i:nth-child(5n){background:#26a641}.mock__grid i:nth-child(7n){background:#39d353}.mock__grid i:nth-child(4n+1){background:#161b22}
.mock__bar{display:flex;gap:5px;margin-bottom:4px}
.mock__bar i{width:7px;height:7px;border-radius:50%;background:rgba(240,246,252,.18)}
/* ------------------------------------------------------------ cta + footer */
.sec--cta{display:grid;place-items:center;gap:clamp(40px,7vh,80px);padding-block:clamp(120px,18vh,220px)}
.foot{position:relative;display:grid;place-items:center;gap:18px;padding:clamp(40px,7vh,90px) var(--pad) clamp(80px,12vh,130px);text-align:center}
.foot__socials{display:flex;gap:30px}
.foot__social{display:grid;place-items:center;width:40px;height:40px;color:var(--ink-70);transition:transform .5s var(--ease-out),color .3s var(--ease)}
.foot__social:focus-visible{color:var(--green-hi)}@media (hover:hover) and (pointer:fine){.foot__social:hover{transform:translateY(-3px);color:var(--green-hi)}}
.foot__social svg{width:24px;height:24px;fill:currentColor}
.foot__copy{font:400 .78rem/1.4 var(--mono);letter-spacing:.06em;color:var(--ink-50)}

/* ============================================================ sales page */
kbd{font:500 .78em/1 var(--mono);padding:3px 7px;border-radius:6px;border:1px solid var(--line-2);border-bottom-width:2px;background:rgba(240,246,252,.06);color:var(--ink)}
code{font-family:var(--mono);font-size:.9em}

/* hero additions */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;margin-bottom:clamp(20px,3.4vh,40px);
  padding:9px 16px;border-radius:99px;border:1px solid rgba(63,185,80,.35);background:rgba(13,17,23,.6);
  font:500 .76rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--green-hi);
  backdrop-filter:blur(8px);
}
.proof{margin-top:clamp(26px,4vh,44px);display:grid;gap:18px;justify-items:center}
.proof__line{font:400 .8rem/1.4 var(--mono);letter-spacing:.06em;color:var(--ink-50)}
.tick{color:var(--green);margin-inline:6px 4px}
.ides{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(14px,2vw,30px)}
.ides li{display:flex;align-items:center;gap:8px;font:500 .82rem/1 var(--sans);color:var(--ink-70);opacity:.75;transition:opacity .3s var(--ease),color .3s var(--ease)}
.ides li:hover{opacity:1;color:var(--ink)}

/* problem manifesto: words light up with scroll */
.sec--manifesto{padding-block:clamp(110px,18vh,220px)}
.kicker{font:500 .76rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--green);margin-bottom:34px}
.manifesto{
  max-width:min(1040px,80vw);text-align:center;
  font:400 clamp(2rem,4.1vw,4.1rem)/1.12 var(--display);font-stretch:108%;letter-spacing:-.025em;color:var(--ink);
}
.manifesto .sw{opacity:.14;transition:none}
.manifesto .sw--hi{color:var(--green-hi)}
html.no-js .manifesto .sw{opacity:1}

/* IDE demo */
.sec--demo .title{margin-bottom:clamp(40px,6vh,80px)}
.ide-stage{width:min(1120px,92vw);perspective:1600px}
.ide{
  --ry:0deg;--rx:0deg;
  margin:0;text-align:left;border-radius:18px;overflow:hidden;transform-origin:50% 0;
  background:#0b0f15;border:1px solid var(--line-2);
  box-shadow:0 60px 140px -40px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.02),0 0 120px -30px rgba(47,129,247,.35);
}
.ide__bar{display:flex;align-items:center;gap:4px;height:42px;padding-inline:14px;background:#0d1117;border-bottom:1px solid var(--line);font:400 .76rem/1 var(--sans);color:var(--ink-50)}
.ide__dots{display:flex;gap:7px;margin-right:16px}
.ide__dots i{width:11px;height:11px;border-radius:50%;background:#30363d}
.ide__dots i:nth-child(1){background:#f85149}.ide__dots i:nth-child(2){background:#d29922}.ide__dots i:nth-child(3){background:#3fb950}
.ide__tab{padding:9px 14px;border-radius:8px 8px 0 0;align-self:flex-end}
.ide__tab.is-on{background:#0b0f15;color:var(--ink);box-shadow:inset 0 2px 0 var(--blue)}
.ide__title{margin-left:auto}
.ide__body{display:grid;grid-template-columns:180px minmax(0,1fr) 330px;min-height:clamp(340px,44vh,440px)}
.ide__tree{padding:16px 14px;border-right:1px solid var(--line);font:400 .78rem/1 var(--sans);color:var(--ink-50)}
.ide__tree p{font:500 .66rem/1 var(--sans);letter-spacing:.12em;margin-bottom:14px}
.ide__tree li{padding:6px 6px;border-radius:5px}
.ide__tree .in{padding-left:18px}.ide__tree .in2{padding-left:30px}
.ide__tree .is-on{background:rgba(47,129,247,.15);color:var(--ink)}
.ide__tree .new{color:var(--green-hi)}
.ide__code{position:relative;padding:20px 22px;overflow:hidden}
.ide__code pre{margin:0;font:400 clamp(.78rem,.9vw,.92rem)/1.75 var(--mono);color:#c9d1d9;white-space:pre-wrap}
.ide__code .ln{display:inline-block;width:2.2em;color:#484f58;user-select:none}
.c-com{color:#8b949e;font-style:italic}.c-key{color:#ff7b72}.c-fn{color:#d2a8ff}.c-typ{color:#ffa657}.c-str{color:#a5d6ff}
.ghost-code{color:#6e7681;font-style:italic;transition:color .4s var(--ease)}
.ghost-code.is-accepted{color:#c9d1d9;font-style:normal}
.caret{display:inline-block;width:2px;height:1.1em;vertical-align:-.15em;background:var(--blue);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.ide__hint{position:absolute;left:22px;bottom:18px;font:400 .74rem/1 var(--sans);color:var(--ink-50);opacity:0;transition:opacity .4s var(--ease)}
.ide__hint.is-on{opacity:1}
.ide__chat{border-left:1px solid var(--line);background:#0d1117;padding:16px;display:flex;flex-direction:column;gap:12px;font:400 .84rem/1.45 var(--sans)}
.chat__head{display:flex;align-items:center;gap:8px;font:500 .66rem/1 var(--sans);letter-spacing:.12em;color:var(--ink-50)}
.chat__msg{padding:12px 14px;border-radius:12px}
.chat__msg--me{background:rgba(47,129,247,.14);border:1px solid rgba(47,129,247,.3);align-self:flex-end;max-width:92%}
.chat__msg--ai{background:rgba(240,246,252,.04);border:1px solid var(--line);color:var(--ink-70)}
.chat__msg code{color:var(--ink);font-size:.82em}
.agent{margin-top:10px;display:grid;gap:8px}
.agent li{display:flex;align-items:flex-start;gap:9px;opacity:.35;transition:opacity .4s var(--ease)}
.agent li.is-run,.agent li.is-done{opacity:1}
.agent__s{flex:0 0 14px;height:14px;margin-top:3px;border-radius:50%;border:1.5px solid var(--ink-30);position:relative}
.agent li.is-run .agent__s{border-color:var(--blue);border-top-color:transparent;animation:spin .8s linear infinite}
.agent li.is-done .agent__s{border-color:var(--green);background:var(--green)}
.agent li.is-done .agent__s::after{content:"";position:absolute;left:3.5px;top:1px;width:3px;height:6px;border:solid #04120a;border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
@keyframes spin{to{transform:rotate(360deg)}}
.agent__done{margin-top:12px;padding-top:10px;border-top:1px solid var(--line);font:500 .76rem/1.4 var(--mono);color:var(--green-hi);opacity:0;transform:translateY(6px);transition:opacity .5s var(--ease),transform .5s var(--ease-out)}
.agent__done.is-on{opacity:1;transform:none}
.demo__note{margin-top:26px;font:400 .74rem/1.4 var(--mono);color:var(--ink-30);letter-spacing:.04em}

/* models strip in the finishes intro */
.mat__intro p{margin-bottom:20px}
.models{display:flex;justify-content:center;flex-wrap:wrap;gap:12px}
.models li{display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:99px;border:1px solid var(--line);background:rgba(13,17,23,.6);letter-spacing:.1em;color:var(--ink-70)}

/* stats: an editorial ledger, numbers set light like the titles */
.ledger{width:var(--wide);text-align:left;border-bottom:1px solid var(--line)}
.led{
  --ls:1;position:relative;display:grid;align-items:center;
  grid-template-columns:44px minmax(0,1fr) minmax(0,1fr) minmax(0,1.15fr);gap:clamp(20px,2.6vw,44px);
  padding-block:clamp(30px,5vh,52px);
}
.led::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--line-2);transform-origin:left;transform:scaleX(var(--ls))}
.led::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .5s var(--ease);
  background:radial-gradient(60% 120% at 18% 50%,rgba(63,185,80,.09),transparent 70%)}
@media (hover:hover) and (pointer:fine){.led:hover::after{opacity:1}}
.led__idx{align-self:start;padding-top:.9em;font:400 .72rem/1 var(--mono);letter-spacing:.14em;color:var(--ink-30)}
.led__num{
  font:300 clamp(3.6rem,5.8vw,6.2rem)/.9 var(--display);font-stretch:105%;letter-spacing:-.045em;white-space:nowrap;
  font-variant-numeric:lining-nums proportional-nums;color:var(--ink);
}
.led__num sup{position:relative;top:.16em;margin-left:.06em;vertical-align:top;font-size:.34em;font-weight:400;letter-spacing:-.01em;color:var(--green-hi)}
.led__label{font-size:1.02rem;line-height:1.5;color:var(--ink-70);max-width:30ch;text-wrap:pretty}
.led .viz{margin:0}
.viz{display:grid;gap:10px}
.vbar{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;white-space:nowrap;font:400 .66rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-50);font-variant-numeric:tabular-nums}
.vbar span{width:8.6em}
.vbar i{position:relative;height:8px;border-radius:99px;background:rgba(240,246,252,.06);overflow:hidden}
.vbar i::after{content:"";position:absolute;inset:0 auto 0 0;width:calc(var(--v) * 100%);border-radius:inherit;background:rgba(240,246,252,.28);transform-origin:left;transform:scaleX(var(--k,1))}
.vbar--hi{color:var(--ink)}
.vbar--hi i::after{background:linear-gradient(90deg,#238636,#3fb950 70%,#56d364);box-shadow:0 0 14px rgba(63,185,80,.55)}
.vbar b{font-weight:500;text-align:right;color:inherit;min-width:4.2em}
.vgrid{display:grid;grid-template-columns:repeat(25,1fr);gap:4px}
.vgrid i{aspect-ratio:1;border-radius:2px;background:#0e4429;box-shadow:inset 0 0 0 1px rgba(240,246,252,.04)}
.vgrid i:nth-child(3n){background:#006d32}.vgrid i:nth-child(5n+2){background:#26a641}.vgrid i:nth-child(7n+1){background:#39d353}
.viz__cap{font:400 .62rem/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-30)}
.stat__src{margin-top:14px;font:400 .68rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--green)}

/* before / after: each old habit gets struck out and replaced as you scroll */
.swaps{--swc:minmax(140px,.55fr) minmax(0,1.2fr) 28px minmax(0,1.45fr);position:relative;width:var(--wide);text-align:left}
.swaps__head{display:grid;grid-template-columns:var(--swc);gap:0 24px;padding-bottom:16px;border-bottom:1px solid var(--line-2);
  font:400 .68rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-30)}
.swaps__head span:nth-child(4){display:flex;align-items:center;gap:8px;color:var(--green-hi)}
.swaps__count{position:absolute;right:0;top:-38px;font-variant-numeric:tabular-nums;color:var(--ink-50)}
.swaps__count b{font-weight:500;color:var(--green-hi)}
.swap{position:relative;display:grid;grid-template-columns:var(--swc);gap:0 24px;align-items:center;padding-block:clamp(20px,3.2vh,30px);border-bottom:1px solid var(--line)}
.swap__task{display:flex;align-items:center;gap:12px;font:500 .78rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-50)}
.swap__task iconify-icon{color:var(--ink-30)}
.swap__old{font-size:clamp(1rem,1.15vw,1.12rem);line-height:1.45;color:var(--ink-70)}
.strike{--s:1;background:linear-gradient(rgba(248,81,73,.75),rgba(248,81,73,.75)) no-repeat 0 60%/calc(var(--s) * 100%) 1.5px}
.swap__arrow{font:400 1.1rem/1 var(--mono);color:var(--ink-30);text-align:center}
.swap__new{font:400 clamp(1.08rem,1.3vw,1.28rem)/1.4 var(--display);letter-spacing:-.005em;color:var(--ink)}
.swap.is-on .swap__task,.swap.is-on .swap__task iconify-icon,.swap.is-on .swap__arrow{color:var(--green-hi)}
.swap__task,.swap__task iconify-icon,.swap__arrow{transition:color .35s var(--ease)}
.swap::before{content:"";position:absolute;left:0;top:-1px;width:100%;height:1px;transform-origin:left;transform:scaleX(0);
  background:linear-gradient(90deg,var(--green),transparent);transition:transform .7s var(--ease-out)}
.swap.is-on::before{transform:scaleX(1)}

/* who it's for: equal cards, each with its own little story */
.cases > li{display:flex}
.case__box{flex:1;align-content:start}
.mock > *{flex-shrink:0}
.case__copy{font-size:.92rem;line-height:1.5;color:var(--ink-70);text-align:left;padding-inline:4px;text-wrap:pretty}

.mock--learn{justify-content:space-between;padding:16px}
.learn__row{display:flex;align-items:center;gap:14px}
.learn__ring{position:relative;flex:0 0 46px;height:46px;border-radius:50%;display:grid;place-items:center;color:var(--green-hi);background:#0d1117}
.learn__ring::before{content:"";position:absolute;inset:-3px;border-radius:50%;
  background:conic-gradient(var(--green) 0 72%,rgba(240,246,252,.08) 0);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 0);mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 0);
  animation:spin 6s linear infinite}
.learn__meta{flex:1;display:grid;gap:8px}
.learn__meta .bar{margin:0}
.wave{width:100%!important;margin:0!important}
.wave i{animation:cell 3.2s var(--ease) infinite;animation-delay:calc(var(--i) * 90ms)}
@keyframes cell{0%,60%,100%{opacity:.35;transform:scale(.82)}25%{opacity:1;transform:scale(1)}}

.mock--merge{position:relative;justify-content:space-between}
.merge{width:100%;flex:1!important;min-height:0;overflow:visible}
.merge__main{fill:none;stroke:rgba(240,246,252,.22);stroke-width:3;stroke-linecap:round}
.merge__br{fill:none;stroke:var(--purple);stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:branch 5s var(--ease-out) infinite}
.merge__n{fill:#010409;stroke:rgba(240,246,252,.45);stroke-width:2.5;transform-box:fill-box;transform-origin:center}
.merge__n.n2{animation:n2 5s var(--ease-out) infinite}.merge__n.n3{animation:n3 5s var(--ease-out) infinite}.merge__n.n4{animation:n4 5s var(--ease-out) infinite}
.merge__badge{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:99px;background:#8957e5;color:#fff;
  font:500 .66rem/1 var(--sans);letter-spacing:.02em;animation:badge 5s var(--ease-out) infinite}
@keyframes branch{0%,8%{stroke-dashoffset:1;opacity:1}55%,88%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes n2{0%,22%{opacity:0;transform:scale(.6)}30%,88%{opacity:1;transform:scale(1);stroke:var(--purple)}100%{opacity:0}}
@keyframes n3{0%,34%{opacity:0;transform:scale(.6)}42%,88%{opacity:1;transform:scale(1);stroke:var(--purple)}100%{opacity:0}}
@keyframes n4{0%,52%{transform:scale(.8);fill:#010409}60%,88%{transform:scale(1);fill:var(--purple);stroke:#d2a8ff}100%{transform:scale(.8);fill:#010409}}
@keyframes badge{0%,56%{opacity:0;transform:translateY(6px) scale(.95)}64%,88%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-4px)}}

.mock--term{gap:7px;font:400 .74rem/1.45 var(--mono);color:var(--ink-70)}
.mock--term .mock__bar{margin-bottom:8px}
.term__l{white-space:nowrap;overflow:hidden;clip-path:inset(0 100% 0 0)}
.term__l b{font-weight:500;color:var(--green-hi)}
.term__l em{font-style:normal;color:var(--green)}
.t1{animation:t1 6s steps(10) infinite}.t2{animation:t2 6s steps(28) infinite}.t3{animation:t3 6s var(--ease-out) infinite}.t4{animation:t4 6s var(--ease-out) infinite}
@keyframes t1{0%{clip-path:inset(0 100% 0 0)}8%,92%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 0 0 0);opacity:0}}
@keyframes t2{0%,14%{clip-path:inset(0 100% 0 0)}38%,92%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 0 0 0);opacity:0}}
@keyframes t3{0%,50%{clip-path:inset(0 100% 0 0)}55%,92%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 0 0 0);opacity:0}}
@keyframes t4{0%,62%{clip-path:inset(0 100% 0 0)}67%,92%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 0 0 0);opacity:0}}

.mock--team{gap:0;justify-content:center}
.team__stack{display:flex;align-items:center;margin-bottom:12px}
.team__stack b{width:26px;height:26px;border-radius:50%;border:2px solid #010409;margin-left:-8px;
  background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--c) 55%,#fff),var(--c) 70%)}
.team__stack b:first-child{margin-left:0}
.team__stack span{margin-left:10px;font:400 .66rem/1 var(--mono);letter-spacing:.06em;color:var(--ink-50)}
.team__row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--line);
  font:400 .74rem/1 var(--sans);color:var(--ink-70);white-space:nowrap}
.tog{position:relative;flex:0 0 28px;height:16px;border-radius:99px;background:rgba(240,246,252,.14);animation:togbg 6s var(--ease) infinite}
.tog::after{content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:#fff;animation:togk 6s var(--ease-out) infinite}
.r2 .tog,.r2 .tog::after{animation-delay:.6s}.r3 .tog,.r3 .tog::after{animation-delay:1.2s}
@keyframes togbg{0%,12%{background:rgba(240,246,252,.14)}18%,80%{background:var(--green)}86%,100%{background:rgba(240,246,252,.14)}}
@keyframes togk{0%,12%{transform:none}18%,80%{transform:translateX(12px)}86%,100%{transform:none}}
/* pricing */
.plans{width:var(--wide);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.6vw,22px);perspective:1400px;align-items:stretch}
.plans > li{display:flex}
.plan{
  --rx:0deg;--ry:0deg;--mx:50%;--my:50%;
  position:relative;flex:1;display:flex;flex-direction:column;gap:14px;text-align:left;
  padding:clamp(24px,2.4vw,34px);border-radius:24px;border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(22,27,34,.95),rgba(10,13,18,.95));
  transform:rotateX(var(--rx)) rotateY(var(--ry));transform-style:preserve-3d;
  transition:transform .5s var(--ease-out),border-color .4s var(--ease),box-shadow .5s var(--ease);
}
.plan::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s var(--ease);
  background:radial-gradient(420px circle at var(--mx) var(--my),rgba(255,255,255,.08),transparent 55%)}
.plan:hover{border-color:var(--line-2);box-shadow:0 40px 90px -40px rgba(0,0,0,.9)}
.plan:hover::after{opacity:1}
.plan--hot{border-color:rgba(63,185,80,.55);background:linear-gradient(170deg,rgba(35,134,54,.22),rgba(10,13,18,.96) 50%);box-shadow:0 40px 120px -40px rgba(63,185,80,.5)}
.plan__badge{position:absolute;top:-13px;left:24px;padding:6px 12px;border-radius:99px;background:var(--green);color:#04120a;font:600 .68rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.plan__name{font:500 1.5rem/1 var(--display);letter-spacing:-.01em}
.plan__price{display:flex;align-items:baseline;gap:10px}
.plan__price b{font:700 clamp(2.6rem,3.6vw,3.4rem)/1 var(--display);letter-spacing:-.04em}
.plan__price span{font:400 .78rem/1.2 var(--mono);color:var(--ink-50)}
.plan__for{font-size:.95rem;color:var(--ink-70);padding-bottom:14px;border-bottom:1px solid var(--line)}
.plan__list{display:grid;gap:10px;flex:1;align-content:start}
.plan__list li{position:relative;padding-left:24px;font-size:.93rem;line-height:1.4;color:var(--ink-70)}
.plan__list li::before{content:"✓";position:absolute;left:0;color:var(--green)}
.plan__cta{
  margin-top:8px;display:grid;place-items:center;height:48px;border-radius:99px;border:1px solid var(--line-2);
  font:600 .88rem/1 var(--sans);letter-spacing:.03em;transition:background-color .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.plan__cta:hover,.plan__cta:focus-visible{background:var(--ink);color:#05070a;border-color:var(--ink)}
.plan--hot .plan__cta{background:var(--green);border-color:var(--green);color:#04120a}
.plan--hot .plan__cta:hover,.plan--hot .plan__cta:focus-visible{background:var(--green-hi)}
.plans__more{margin-top:34px;max-width:min(900px,90vw);font-size:.95rem;line-height:1.7;color:var(--ink-50)}
.plans__more b{color:var(--ink);font-weight:600}
.plans__more .ghost{margin-left:6px;font-size:.95rem}

/* final cta */
.cta__row{display:flex;align-items:center;gap:32px}
.sec--cta .proof__line{margin-top:-20px}

/* ------------------------------------------------------------ cursor */
.cursor{position:fixed;left:0;top:0;z-index:150;pointer-events:none;display:none}
html.has-cursor .cursor{display:block}
.cursor__dot,.cursor__ring{position:absolute;left:0;top:0;border-radius:50%;transform:translate(-50%,-50%)}
.cursor__dot{width:6px;height:6px;background:var(--ink)}
.cursor__ring{width:36px;height:36px;border:1px solid rgba(230,237,243,.45);transition:width .35s var(--ease-out),height .35s var(--ease-out),border-color .35s var(--ease),background-color .35s var(--ease)}
.cursor.is-link .cursor__ring{width:62px;height:62px;border-color:rgba(63,185,80,.8);background:rgba(63,185,80,.08)}
.cursor.is-down .cursor__ring{width:26px;height:26px}

/* the duplicated tail of the loop */
.loop-tail{height:100vh;overflow:hidden}

/* ------------------------------------------------------------ reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  body::after{animation:none}
  .loop-tail{display:none}
  .manifesto .sw{opacity:1}
  .caret{display:none}
}

/* press feedback on every pressable */
.navcta,.plan__cta,.ghost{transition-property:color,background,border-color,background-size,transform}
.navcta:active,.plan__cta:active,.ghost:active{transform:scale(.97);transition-duration:100ms}