*{margin:0;padding:0;box-sizing:border-box}
:root{
--paper:#F2F0EB;--panel:#FBFAF7;--ink:#0B1610;--ink2:#4A574F;--ink3:#8A958D;
--deep:#071A11;--deep2:#0C2417;
--lime:#AEE930;--evaa:#E01C8C;--green:#0A7A1C;
--line:rgba(11,22,16,.1);--line2:rgba(11,22,16,.06);
--sans:'DM Sans',-apple-system,BlinkMacSystemFont,sans-serif;--mono:'DM Mono',monospace;
--shadow:0 1px 2px rgba(11,22,16,.04),0 12px 28px -14px rgba(11,22,16,.18);
--shadow-lg:0 2px 4px rgba(11,22,16,.05),0 32px 64px -24px rgba(11,22,16,.3);
}
html{background:var(--paper);-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--paper);color:var(--ink);line-height:1.5;overflow-x:hidden;
letter-spacing:-.011em}
.wrap{max-width:1240px;margin:0 auto;padding:0 40px}
.wide{max-width:1400px;margin:0 auto;padding:0 40px}
.narrow{max-width:800px;margin:0 auto;padding:0 40px}
h1{font-size:clamp(40px,5.4vw,74px);font-weight:600;letter-spacing:-.042em;line-height:1.02}
h2{font-size:clamp(31px,4.2vw,54px);font-weight:600;letter-spacing:-.038em;line-height:1.06}
h3{font-size:clamp(19px,2.1vw,25px);font-weight:600;letter-spacing:-.028em;line-height:1.18}
p{color:var(--ink2)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:600;
color:var(--green);letter-spacing:.11em;text-transform:lowercase;margin-bottom:18px}
.eyebrow::before{content:'';width:18px;height:1.5px;background:currentColor;opacity:.5}
.eyebrow.pink{color:var(--evaa)}
.sub{font-size:17.5px;color:var(--ink2);line-height:1.6;letter-spacing:-.012em}
.head{max-width:730px;margin:0 auto 62px;text-align:center}
.head .eyebrow::before{display:none}
.head .sub{margin-top:16px}
a{color:inherit}

nav{position:fixed;top:0;left:0;right:0;z-index:200;height:70px;display:flex;align-items:center;
background:rgba(242,240,235,.7);backdrop-filter:saturate(180%) blur(20px);
-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid transparent;transition:.35s}
nav.stuck{border-bottom-color:var(--line);background:rgba(242,240,235,.94);box-shadow:0 1px 20px -8px rgba(11,22,16,.14)}
nav .wide{display:flex;align-items:center;justify-content:space-between;width:100%}
.brand{display:flex;flex-direction:column;gap:1px}
.brand img{height:21px;width:auto}
.brand span{font-size:8.5px;color:var(--ink3);letter-spacing:.06em;text-transform:lowercase}
.brand span b{color:var(--evaa);font-weight:600}
.nl{display:flex;gap:28px;list-style:none;align-items:center}
.nl a{text-decoration:none;font-size:13.5px;font-weight:500;position:relative;padding:4px 0}
.nl a::after{content:'';position:absolute;left:0;right:100%;bottom:0;height:1.5px;
background:var(--evaa);transition:right .3s cubic-bezier(.2,.7,.2,1)}
.nl a:hover::after{right:0}
.ncta{background:var(--ink);color:var(--paper);padding:10px 22px;border-radius:100px;
text-decoration:none;font-size:13.5px;font-weight:600;transition:.25s}
.ncta:hover{background:var(--evaa);transform:translateY(-1px);box-shadow:0 8px 20px -8px rgba(224,28,140,.6)}

.hero{padding:122px 0 86px;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;width:1000px;height:1000px;border-radius:50%;
background:radial-gradient(circle,rgba(174,233,48,.16),transparent 64%);top:-380px;right:-260px;pointer-events:none}
.hero::after{content:'';position:absolute;width:820px;height:820px;border-radius:50%;
background:radial-gradient(circle,rgba(224,28,140,.11),transparent 64%);bottom:-400px;left:-280px;pointer-events:none}
.hero .wide{position:relative;z-index:2}
.hcopy h1{margin-bottom:22px}
.hcopy h1 em{font-style:normal;background:linear-gradient(96deg,var(--green),var(--evaa));
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hcopy p{font-size:18px;line-height:1.6;margin-bottom:32px;max-width:560px}
.hbtn{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.b-dark{background:var(--ink);color:var(--paper);padding:15px 32px;border-radius:100px;
text-decoration:none;font-size:15px;font-weight:600;transition:.25s;
box-shadow:0 10px 24px -12px rgba(11,22,16,.6)}
.b-dark:hover{transform:translateY(-2px);box-shadow:0 16px 32px -12px rgba(11,22,16,.7)}
.b-line{border:1.5px solid var(--line);padding:13.5px 30px;border-radius:100px;
text-decoration:none;font-size:15px;font-weight:600;transition:.25s;background:rgba(255,255,255,.5)}
.b-line:hover{border-color:var(--ink);background:#fff}

.sec{padding:112px 0;position:relative}
.sec+.sec{border-top:1px solid var(--line2)}
.sec.tint{background:linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,.28))}
.sec.dark{background:var(--deep);color:var(--paper);border-top:none;overflow:hidden}
.sec.dark::before{content:'';position:absolute;inset:0;pointer-events:none;
background:radial-gradient(900px 500px at 82% 12%,rgba(224,28,140,.16),transparent 62%),
radial-gradient(700px 460px at 10% 92%,rgba(174,233,48,.11),transparent 62%)}
.sec.dark>*{position:relative;z-index:1}
.sec.dark p,.sec.dark .sub{color:rgba(242,240,235,.6)}
.sec.dark .eyebrow{color:var(--lime)}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:34px 32px 30px;
display:flex;flex-direction:column;position:relative;overflow:hidden;
transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s,border-color .3s}
.card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;
background:linear-gradient(90deg,var(--lime),transparent);opacity:0;transition:opacity .3s}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:transparent}
.card:hover::before{opacity:1}
.card.ai::before{background:linear-gradient(90deg,var(--evaa),transparent);opacity:.75}
.card.ai{background:linear-gradient(168deg,rgba(224,28,140,.07),var(--panel) 46%);
border-color:rgba(224,28,140,.24)}
.card .num{font-family:var(--mono);font-size:11px;color:var(--ink3);margin-bottom:14px;display:block}
.card h3{margin-bottom:9px}
.card .lede{font-size:14px;color:var(--ink2);margin-bottom:20px;line-height:1.5}
.card ul{list-style:none;margin-bottom:24px}
.card li{font-size:13.5px;color:var(--ink2);padding:6px 0 6px 18px;position:relative;line-height:1.4;
border-top:1px solid var(--line2)}
.card li:first-child{border-top:none}
.card li::before{content:'';position:absolute;left:0;top:13px;width:5px;height:5px;
border-radius:50%;background:var(--lime)}
.card.ai li::before{background:var(--evaa)}
.card .go{margin-top:auto;font-size:13.5px;font-weight:600;color:var(--green);text-decoration:none;
display:inline-flex;align-items:center;gap:6px;transition:gap .25s}
.card:hover .go{gap:11px}
.card.ai .go{color:var(--evaa)}

.rail{position:relative;margin-top:20px}
.rail::before{content:'';position:absolute;left:2%;right:2%;top:26px;height:2px;
background:linear-gradient(90deg,transparent,var(--lime) 12%,var(--evaa) 88%,transparent)}
.steps{display:grid;grid-template-columns:repeat(12,1fr);gap:6px;position:relative}
.stp{text-align:center;cursor:default}
.stp .d{width:14px;height:14px;border-radius:50%;background:var(--paper);
border:2px solid var(--ink3);margin:20px auto 14px;position:relative;z-index:2;
transition:transform .28s cubic-bezier(.2,.7,.2,1),border-color .28s,background .28s,box-shadow .28s}
.stp:hover .d{border-color:var(--evaa);background:var(--evaa);transform:scale(1.5);
box-shadow:0 0 0 6px rgba(224,28,140,.14)}
.stp .n{font-size:11.5px;font-weight:600;line-height:1.25;letter-spacing:-.012em}
.stp .m{font-family:var(--mono);font-size:8.5px;color:var(--ink3);margin-top:5px;line-height:1.3;
transition:color .25s}
.stp:hover .m{color:var(--evaa)}

.teams{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);
border:1px solid var(--line);border-radius:20px;overflow:hidden}
.team{background:var(--panel);padding:30px 24px;transition:background .3s}
.team:hover{background:#fff}
.team h4{font-size:16px;font-weight:600;margin-bottom:4px;letter-spacing:-.022em}
.team .r{font-family:var(--mono);font-size:9px;color:var(--ink3);letter-spacing:.11em;
text-transform:lowercase;margin-bottom:18px}
.team ul{list-style:none}
.team li{font-size:12.5px;color:var(--ink2);padding:7px 0;border-top:1px solid var(--line2)}
.team li:first-child{border-top:none}

.eflow{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:10px}
.ef{background:rgba(255,255,255,.045);border:1px solid rgba(242,240,235,.12);
border-radius:18px;padding:26px 22px;transition:.3s;position:relative;overflow:hidden}
.ef:hover{background:rgba(255,255,255,.08);border-color:rgba(224,28,140,.42);transform:translateY(-4px)}
.ef .trig{font-family:var(--mono);font-size:9px;color:rgba(242,240,235,.4);
letter-spacing:.11em;text-transform:lowercase}
.ef .arw{color:var(--evaa);font-size:16px;margin:11px 0}
.ef h4{font-size:16.5px;font-weight:600;color:var(--paper);letter-spacing:-.024em}
.ef p{font-size:12.5px;margin-top:9px;line-height:1.5}

.stack{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:40px}
.stk{background:var(--panel);border:1px solid var(--line);border-radius:100px;padding:12px 24px;
font-size:14.5px;font-weight:500;box-shadow:var(--shadow);transition:.25s}
.stk:hover{transform:translateY(-2px)}
.stk.hi{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.plus{color:var(--ink3);font-size:16px}
.outcome{text-align:center;font-size:clamp(20px,2.4vw,28px);font-weight:600;letter-spacing:-.03em}
.outcome span{background:linear-gradient(96deg,var(--green),var(--evaa));
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

.devs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.dev{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:26px 22px;
transition:.28s}
.dev:hover{border-color:var(--green);transform:translateY(-3px);box-shadow:var(--shadow)}
.dev b{display:block;font-size:15px;font-weight:600;letter-spacing:-.022em}
.dev i{display:block;font-style:normal;font-size:12px;color:var(--ink3);margin-top:5px}

.why{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(242,240,235,.12);
border:1px solid rgba(242,240,235,.12);border-radius:20px;overflow:hidden}
.wy{background:rgba(255,255,255,.035);padding:34px 28px;transition:background .3s}
.wy:hover{background:rgba(255,255,255,.075)}
.wy b{display:block;font-size:16.5px;font-weight:600;letter-spacing:-.026em;margin-bottom:9px;color:var(--paper)}
.wy p{font-size:13px;line-height:1.55}

.stories{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.story{background:var(--panel);border:1px solid var(--line);border-radius:20px;overflow:hidden;
text-decoration:none;color:inherit;display:flex;flex-direction:column;transition:.3s}
.story:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:transparent}
.story .band{height:5px;background:linear-gradient(90deg,var(--lime),var(--evaa))}
.story .in{padding:30px}
.story .tagr{font-family:var(--mono);font-size:9px;color:var(--green);letter-spacing:.11em;text-transform:lowercase}
.story .met{font-size:44px;font-weight:600;letter-spacing:-.04em;margin:14px 0 8px;line-height:1;
background:linear-gradient(150deg,var(--green),var(--evaa));
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.story .q{font-size:14px;color:var(--ink2);line-height:1.55}
.story .by{font-size:12px;color:var(--ink3);margin-top:16px}

.rgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.rcard{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:28px;
text-decoration:none;color:inherit;display:flex;flex-direction:column;min-height:180px;transition:.3s}
.rcard:hover{border-color:transparent;transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.rcard .kind{font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;text-transform:lowercase;color:var(--green)}
.rcard .t{font-size:18px;font-weight:500;letter-spacing:-.024em;margin-top:14px;line-height:1.3}
.rcard .d{font-size:13px;color:var(--ink2);margin-top:9px;line-height:1.5}
.rcard .go{margin-top:auto;padding-top:18px;font-size:13px;color:var(--green);
display:inline-flex;align-items:center;gap:6px;transition:gap .25s}
.rcard:hover .go{gap:11px}

.fph{height:32px;width:auto;display:block;margin:22px auto 0}

.cta{text-align:center;padding:132px 24px;background:var(--deep);color:var(--paper);
position:relative;overflow:hidden}
.cta::before{content:'';position:absolute;inset:0;
background:radial-gradient(760px 480px at 50% 46%,rgba(174,233,48,.16),transparent 66%)}
.cta>*{position:relative;z-index:1}
.cta p{color:rgba(242,240,235,.62);margin-top:16px}
.btns{display:flex;gap:14px;justify-content:center;margin-top:36px;flex-wrap:wrap}
.b1{background:var(--lime);color:var(--deep);padding:15px 34px;border-radius:100px;
text-decoration:none;font-weight:600;font-size:15px;transition:.25s}
.b1:hover{transform:translateY(-2px);box-shadow:0 14px 30px -10px rgba(174,233,48,.6)}
.b2{border:1px solid rgba(242,240,235,.28);color:var(--paper);padding:15px 34px;
border-radius:100px;text-decoration:none;font-size:15px;transition:.25s}
.b2:hover{border-color:var(--paper);background:rgba(255,255,255,.06)}
footer{padding:44px 0 56px;background:var(--deep);color:rgba(242,240,235,.38);font-size:12.5px;
border-top:1px solid rgba(242,240,235,.08)}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px}
.rv{opacity:0;transform:translateY(26px);transition:opacity .85s cubic-bezier(.2,.7,.2,1),transform .85s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
/* ---- interactive practice room ---- */
.roomwrap{position:relative;margin-top:8px}
.scene{position:relative;width:100%}
.scene img{width:100%;height:auto;display:block;image-rendering:auto;
filter:drop-shadow(0 26px 44px rgba(11,22,16,.2))}
.veil{position:absolute;inset:0;z-index:4;pointer-events:none;
background:rgba(242,240,235,.6);
opacity:0;transition:opacity .35s}
.scene.open .veil,.scene.peeking .veil{opacity:0}
/* clickable room areas */
.zone{position:absolute;z-index:6;cursor:pointer;pointer-events:auto;
transform:translate(-50%,-50%) rotate(-30deg) skewX(18deg);
background:rgba(224,28,140,.05);border:1px dashed rgba(224,28,140,.42);
border-radius:10px;padding:0;
transition:background .25s,box-shadow .25s,border-color .25s}
.zone:hover{background:rgba(224,28,140,.16);border-color:rgba(224,28,140,.9);
box-shadow:0 0 22px -4px rgba(224,28,140,.6)}
.zone.on{background:rgba(224,28,140,.22);border:1.5px solid var(--evaa);
box-shadow:0 0 26px -4px rgba(224,28,140,.75)}
.scene.open .veil,.scene.peeking .veil{opacity:0}

.hot{position:absolute;width:38px;height:38px;border-radius:50%;cursor:pointer;pointer-events:auto;
transform:translate(-50%,-50%);display:grid;place-items:center;z-index:7;border:none;background:none;padding:0}
.hot::after{content:'';width:26px;height:26px;border-radius:50%;
background:var(--evaa);border:2.5px solid #fff;
box-shadow:0 3px 12px rgba(14,26,20,.35);transition:transform .22s}
.hot::before{content:'';position:absolute;width:26px;height:26px;border-radius:50%;
background:rgba(224,28,140,.45);animation:hp 2.4s ease-out infinite}
@keyframes hp{0%{transform:scale(1);opacity:.6}100%{transform:scale(2.6);opacity:0}}
.hot:hover::after{transform:scale(1.16)}
.hot.on::after{transform:scale(1.24);background:#fff;border-color:var(--evaa)}
.hot.on::before{animation:none}
.hot i{position:relative;z-index:2;font-style:normal;font-size:13px;font-weight:700;
color:#fff;line-height:1;pointer-events:none;transition:color .22s}
.hot.on i{color:var(--evaa)}

/* click-to-open popovers */
.gcard{position:absolute;width:300px;z-index:9;pointer-events:none;
background:linear-gradient(155deg,rgba(10,23,16,.94),rgba(6,16,11,.97));
border:1px solid rgba(224,28,140,.42);border-radius:16px;padding:0;overflow:hidden;
box-shadow:0 0 0 1px rgba(255,255,255,.05),0 0 34px -6px rgba(224,28,140,.5),
0 30px 60px -20px rgba(0,0,0,.6);
opacity:0;visibility:hidden;transform:translateY(14px) scale(.94);transform-origin:50% 0;
transition:opacity .3s cubic-bezier(.2,.7,.2,1),transform .34s cubic-bezier(.16,.9,.3,1.06),visibility .3s}
.gcard::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;
background:linear-gradient(90deg,transparent,rgba(224,28,140,.9),transparent)}
.gcard.on,.gcard.peek{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.gcard.peek{pointer-events:none}
.gcard.peek .x{display:none}
.gcard::after{content:'';position:absolute;top:-6px;left:26px;width:12px;height:12px;
background:#0a1710;border-left:1px solid rgba(224,28,140,.42);
border-top:1px solid rgba(224,28,140,.42);transform:rotate(45deg)}
.gc-h{display:flex;align-items:center;gap:9px;padding:14px 16px 12px;
border-bottom:1px solid rgba(255,255,255,.08)}
.gc-h .ico{width:26px;height:26px;border-radius:8px;flex-shrink:0;display:grid;place-items:center;
background:rgba(224,28,140,.16);border:1px solid rgba(224,28,140,.4);
font-size:11px;font-weight:700;color:var(--evaa);font-family:var(--mono)}
.gc-h .tx .rm{font-family:var(--mono);font-size:8.5px;letter-spacing:.13em;
text-transform:lowercase;color:rgba(244,242,238,.42);display:block}
.gc-h .tx h4{font-size:15px;font-weight:600;letter-spacing:-.02em;color:#F4F2EE;margin-top:2px}
.gcard ul{list-style:none;padding:12px 16px 15px}
.gcard li{font-size:12.5px;color:rgba(244,242,238,.72);line-height:1.45;
padding:4px 0 4px 16px;position:relative}
.gcard li::before{content:'';position:absolute;left:2px;top:11px;width:5px;height:5px;
border-radius:50%;background:var(--evaa);box-shadow:0 0 6px rgba(224,28,140,.8)}
.gcard .x{position:absolute;top:11px;right:11px;width:22px;height:22px;border:none;
background:rgba(255,255,255,.08);border-radius:50%;cursor:pointer;color:rgba(244,242,238,.7);
font-size:13px;line-height:1;display:grid;place-items:center;padding:0;z-index:2}
.gcard .x:hover{background:rgba(255,255,255,.18);color:#fff}
.gc-fph{display:flex;align-items:center;gap:7px;margin:0 16px 14px;padding-top:11px;
border-top:1px solid rgba(255,255,255,.08)}
.gc-fph span{font-family:var(--mono);font-size:8.5px;letter-spacing:.11em;
text-transform:lowercase;color:rgba(244,242,238,.4)}
.gc-fph img{height:15px;width:auto;filter:brightness(1.7) saturate(1.15)}

/* pill tabbar */
.hot{position:absolute;width:38px;height:38px;border-radius:50%;cursor:pointer;pointer-events:auto;
transform:translate(-50%,-50%);display:grid;place-items:center;z-index:7;border:none;background:none;padding:0}
.hot::after{content:'';width:26px;height:26px;border-radius:50%;
background:var(--evaa);border:2.5px solid #fff;
box-shadow:0 3px 12px rgba(14,26,20,.35);transition:transform .22s}
.hot::before{content:'';position:absolute;width:26px;height:26px;border-radius:50%;
background:rgba(224,28,140,.45);animation:hp 2.4s ease-out infinite}
@keyframes hp{0%{transform:scale(1);opacity:.6}100%{transform:scale(2.6);opacity:0}}
.hot:hover::after{transform:scale(1.16)}
.hot.on::after{transform:scale(1.24);background:#fff;border-color:var(--evaa)}
.hot.on::before{animation:none}
.hot i{position:relative;z-index:2;font-style:normal;font-size:13px;font-weight:700;
color:#fff;line-height:1;pointer-events:none;transition:color .22s}
.hot.on i{color:var(--evaa)}
.tabbar{position:relative;z-index:8;display:flex;justify-content:center;margin-top:22px;padding-bottom:10px}
.tabs{display:flex;gap:2px;background:var(--panel);border:1px solid var(--line);
border-radius:100px;padding:5px;box-shadow:0 16px 40px -16px rgba(14,26,20,.28);flex-wrap:wrap;justify-content:center}
.tab{font-family:var(--sans);font-size:14px;font-weight:500;color:var(--ink2);
background:none;border:none;padding:11px 22px;border-radius:100px;cursor:pointer;transition:.22s;white-space:nowrap}
.tab:hover{color:var(--ink)}
.tab.on{background:var(--ink);color:var(--paper);font-weight:600}
.hint{text-align:center;font-size:12.5px;color:var(--ink3);font-family:var(--mono);margin-bottom:8px}
@media(max-width:900px){
.hot,.zone{display:none}
.gcard{position:static!important;width:100%!important;margin-top:16px;transform:none!important}
.gcard::after{display:none}
.gcard:not(.on){display:none}
.veil{display:none}
}


@media(max-width:1080px){
.cards{grid-template-columns:repeat(2,1fr)}
.teams,.eflow,.why,.devs{grid-template-columns:repeat(2,1fr)}
.steps{grid-template-columns:repeat(4,1fr);gap:20px}
.rail::before{display:none}
.stories,.rgrid{grid-template-columns:1fr 1fr}
}
@media(max-width:860px){.nl{display:none}.sec{padding:78px 0}}
@media(max-width:620px){
.cards,.teams,.eflow,.why,.devs,.stories,.rgrid{grid-template-columns:1fr}
.steps{grid-template-columns:1fr 1fr}
}
#top p, #top ul li{
	font-size: 16px;
}