/* ---------- nav override ---------- */
.nav .wrap{max-width:1400px}
.nav-links{gap:2px}
.nav-links a{font-size:11.5px}
.status{font-size:11px;letter-spacing:.12em}

/* ---------- reveal / boot ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.reveal.in{opacity:1;transform:none}
@keyframes popIn{from{opacity:0;transform:translateY(46px) scale(.88);filter:blur(8px)}to{opacity:1;filter:blur(0)}}
@keyframes dropIn{0%{opacity:0;transform:translateY(-260px) rotate(-14deg) scale(.7)}60%{opacity:1;transform:translateY(14px) rotate(2deg) scale(1.02)}80%{transform:translateY(-6px) rotate(-1deg)}100%{transform:none}}
.pop{animation:popIn .9s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--d,0s)}
.drop{animation:dropIn 1.1s cubic-bezier(.3,.8,.3,1) both}
body.booting .pop,body.booting .drop{animation-play-state:paused}

/* ---------- hero ---------- */
.hero{position:relative;padding:22px 0 10px;overflow:hidden}
.hero::after{content:'';position:absolute;left:0;right:0;bottom:0;height:46%;background:linear-gradient(transparent,rgba(255,255,255,.35)),repeating-linear-gradient(90deg,rgba(0,0,0,.045) 0 1px,transparent 1px 80px),repeating-linear-gradient(0deg,rgba(0,0,0,.045) 0 1px,transparent 1px 80px);transform:perspective(700px) rotateX(62deg);transform-origin:bottom;pointer-events:none;mask-image:linear-gradient(transparent,#000 50%);-webkit-mask-image:linear-gradient(transparent,#000 50%);z-index:-1}
.hero-head{text-align:center;max-width:820px;margin:0 auto;padding:0 20px;position:relative;z-index:3}
.hero-head h1{font-family:var(--disp);font-weight:700;font-size:clamp(40px,5.2vw,74px);line-height:.95;letter-spacing:-.05em;margin:10px 0 14px}
.grad{background:linear-gradient(100deg,#1b1c1e 0%,#5f6166 45%,#1b1c1e 90%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sheen 6s linear infinite}
@keyframes sheen{to{background-position:-200% 0}}
.hero-head p{font-size:13.5px;line-height:1.65;color:var(--ink2);max-width:600px;margin:0 auto}

.stage-wrap{position:relative;width:100%;max-width:1400px;margin:8px auto 0;height:640px}
.stage{position:absolute;left:50%;top:0;width:1400px;height:640px;transform-origin:top center;transform:translateX(-50%) scale(var(--s,1))}
.obj{position:absolute;will-change:transform;transition:transform .25s ease-out}
.wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.wire-base path{fill:none;stroke:url(#wg);stroke-width:2;stroke-dasharray:1200;stroke-dashoffset:1200;animation:draw 1.6s ease forwards .9s}
@keyframes draw{to{stroke-dashoffset:0}}
.wire-pulse use{fill:none;stroke:var(--green);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:10 600;stroke-dashoffset:610;filter:drop-shadow(0 0 4px rgba(34,197,94,.9));animation:pulseRun 3.2s linear infinite;animation-delay:var(--o)}
@keyframes pulseRun{to{stroke-dashoffset:0}}
body.booting .wire-base path,body.booting .wire-pulse use{animation-play-state:paused}

.side-l,.side-l2,.side-r1,.side-r2{position:absolute;font-size:10.5px;letter-spacing:.14em;color:var(--mut2);line-height:2}
.side-l{left:6px;top:70px;list-style:none;margin:0;padding:0}
.side-l li{transition:color .3s}
.side-l li::before{content:'• ';opacity:.6}
.side-l li.on{color:var(--ink)}.side-l li.on::before{content:'▸ ';color:var(--green2);opacity:1}
.side-l li.dn{color:var(--slate)}
.side-l2{left:6px;top:540px;letter-spacing:.06em;line-height:1.6}
.side-r1{right:6px;top:4px;text-align:left;color:var(--ink2)}
.side-r1 small{color:var(--mut2);font-size:10.5px}
.side-r2{right:6px;top:560px}

.pedestal{height:120px;position:relative}
.pedestal::before{content:'';position:absolute;left:0;right:0;top:10px;height:70px;border-radius:14px;background:linear-gradient(#f6f6f5,#d9d9d7);box-shadow:inset 0 1px 0 #fff,0 2px 0 #cfcfcd,0 26px 40px -16px rgba(0,0,0,.35);transform:perspective(500px) rotateX(48deg)}
.pedestal i{position:absolute;left:8%;right:8%;top:58px;height:3px;border-radius:3px;background:#fff;box-shadow:0 0 10px 2px rgba(255,255,255,.95),0 0 26px 6px rgba(190,255,215,.55);animation:glow 2.4s ease-in-out infinite}
@keyframes glow{50%{opacity:.55}}
.hero-logo{all:unset;cursor:pointer;display:block;width:100%;height:100%;transform-style:preserve-3d;transition:transform .2s ease-out}
.hero-logo img{width:100%;height:auto;display:block;filter:drop-shadow(0 34px 34px rgba(0,0,0,.28));transition:transform .5s cubic-bezier(.3,1.5,.5,1)}
.hero-logo:hover img{transform:translateY(-6px) scale(1.02)}
.hero-logo.spin img{animation:spinY 1s cubic-bezier(.4,0,.2,1)}
@keyframes spinY{50%{transform:rotateY(180deg) scale(.92)}100%{transform:rotateY(360deg)}}
.hero-logo:focus-visible{outline:2px solid var(--ink);outline-offset:6px;border-radius:30px}

.tl .win, .win.tl{transform:perspective(1200px) rotateY(13deg)}
.win.tl2{transform:perspective(1200px) rotateY(7deg)}
.win.tr{transform:perspective(1200px) rotateY(-13deg)}
.win.tr2{transform:perspective(1200px) rotateY(-7deg)}
.win-body{font-size:12px}
.term{padding:12px 16px 14px;min-height:196px;line-height:1.85;font-size:12.5px}
.t-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.t-h b{font-size:20px;letter-spacing:-.02em;color:#fafafa}
.t-h span{font-size:10px;color:#8c8e92}
.term .ln{white-space:nowrap;overflow:hidden;color:#d9d9d9}
.term .ln.ok{color:var(--green);font-weight:600}
.term .cur::after{content:'▍';color:#bdbdbd;animation:blink 1s steps(1) infinite}
.tree{padding:10px 14px 12px;min-height:172px;color:var(--ink2);line-height:1.75}
.tr-h{font-weight:600;margin-bottom:2px}
.tree .it{display:flex;gap:7px;align-items:center;animation:popIn .4s both}
.tree .it svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.8}
.code{padding:10px 12px;min-height:186px;font-size:11.5px;line-height:1.75}
.code .row{display:flex;gap:12px;white-space:nowrap}
.code .row b{width:12px;text-align:right;color:#6d6f73;font-weight:400}
.code .k{color:#c792ea}.code .s{color:#c3e88d}.code .f{color:#82aaff}.code .c{color:#6d6f73}.code .p{color:#89ddff}.code .t{color:#f78c6c}
.live{background:#fbfbfa}
.lv-nav{display:flex;align-items:center;gap:12px;padding:8px 12px;font-size:8.5px;color:var(--ink2);border-bottom:1px solid #ececea}
.lv-nav svg{width:14px;height:14px;stroke:var(--ink);fill:none;stroke-width:1.8}
.lv-nav b{margin-left:auto;background:var(--ink);color:#fff;padding:5px 8px;border-radius:4px;font-weight:600}
.lv-body{display:grid;grid-template-columns:1.2fr 1fr;align-items:center;padding:14px 14px 18px;gap:6px}
.lv-h{font-family:var(--disp);font-weight:700;font-size:23px;line-height:1.02;letter-spacing:-.03em}
.lv-body p{font-size:8.5px;color:var(--mut);margin:8px 0 0;line-height:1.5}
.globe{width:100%;height:auto;fill:none;stroke:#9a9c9f;stroke-width:.8}
.globe .m1{animation:mer 6s linear infinite}.globe .m2{animation:mer 6s linear infinite -3s}
@keyframes mer{0%{rx:38}50%{rx:2}100%{rx:38}}
.deploy{padding:12px 16px 14px;min-height:150px}
.dp-h{font-size:15px;font-weight:700;letter-spacing:.04em;margin-bottom:8px;color:#fafafa}
.dp-row{display:grid;grid-template-columns:12px 1fr 62px 34px;white-space:nowrap;align-items:center;gap:8px;font-size:11.5px;line-height:2;color:#d6d6d6}
.dp-row i{width:8px;height:8px;border-radius:50%;background:#3a3b3e}
.dp-row.dn i{background:var(--green);box-shadow:0 0 6px rgba(34,197,94,.8)}
.dp-row .bar{height:5px;background:#333437;border-radius:3px;overflow:hidden}
.dp-row .bar span{display:block;height:100%;width:0;background:var(--green);border-radius:3px;transition:width .5s linear}
.dp-row em{font-style:normal;text-align:right;color:#9c9ea2}

.prompt{padding:14px;background:linear-gradient(#fbfbfa,#f1f1f0)}
.pr-row{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #dcdcda;border-radius:12px;padding:8px 8px 8px 14px;box-shadow:inset 0 1px 2px rgba(0,0,0,.04)}
.prompt:focus-within .pr-row{border-color:var(--ink2);box-shadow:0 0 0 4px rgba(0,0,0,.05)}
.spark{width:22px;height:22px;fill:var(--ink);flex:none;animation:twinkle 2.6s ease-in-out infinite}
@keyframes twinkle{50%{transform:scale(.8) rotate(20deg)}}
.pr-pre{font-size:17px;font-weight:500;white-space:nowrap}
#heroInput{flex:1;min-width:0;border:0;outline:0;background:none;font-size:17px;padding:6px 0}
#heroInput::placeholder{color:#9b9da0}
.pr-go{width:42px;height:42px;border:0;border-radius:10px;background:linear-gradient(#5a5c60,#3e4043);color:#fff;display:grid;place-items:center;box-shadow:0 3px 0 #2c2d30,0 8px 16px -6px rgba(0,0,0,.4);transition:transform .15s}
.pr-go:hover{transform:translateY(-1px)}.pr-go:active{transform:translateY(2px);box-shadow:0 1px 0 #2c2d30}
.pr-go svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.pr-chips{display:flex;gap:7px;margin-top:11px;flex-wrap:wrap}
.pr-chips button{border:1px solid #d2d2d0;background:#fff;border-radius:8px;padding:7px 11px;font-size:11.5px;box-shadow:0 2px 0 #e0e0de;transition:transform .15s,border-color .15s}
.pr-chips button:hover{transform:translateY(-2px);border-color:var(--ink2)}

.f1{animation:popIn .9s both var(--d),bob 5s ease-in-out infinite 2s}
.f2{animation:popIn .9s both var(--d),bob 6s ease-in-out infinite 2.4s}
.f3{animation:popIn .9s both var(--d),bob 5.5s ease-in-out infinite 2.8s}
@keyframes bob{50%{translate:0 -9px}}

.hero-foot{display:flex;align-items:center;justify-content:space-between;max-width:1240px;margin:6px auto 0;padding:0 24px;gap:20px;flex-wrap:wrap}
.stats{display:flex;gap:44px}
.stats b{display:block;font-family:var(--disp);font-size:30px;letter-spacing:-.04em;line-height:1}
.stats span{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.scroll-cue{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);animation:bob 2.4s ease-in-out infinite}

/* mobile stage */
.stage.m{position:relative;left:auto;width:auto;height:auto;transform:none;display:flex;flex-direction:column;align-items:stretch;gap:16px;padding:0 16px}
.stage.m .obj{position:relative!important;left:auto!important;top:auto!important;width:auto!important;height:auto!important;transform:none!important}
.stage.m .wires,.stage.m .side-l,.stage.m .side-l2,.stage.m .side-r1,.stage.m .side-r2,.stage.m .tile3d,.stage.m .tl2,.stage.m .tr2{display:none}
.stage.m .obj:has(.tile3d),.stage.m .obj:has(.tl2),.stage.m .obj:has(.tr2){display:none}
.stage.m .win{transform:none!important}
.stage.m .logo-obj{order:-2;width:200px!important;margin:0 auto}
.stage.m .obj:has(.pedestal){order:-1;width:240px!important;margin:-40px auto -60px}
.stage.m .prompt-obj{order:-3}
.stage.m .pr-pre,#heroInput{font-size:15px}
.stage-wrap.m{height:auto}

/* ---------- marquee ---------- */
.marquee{margin:36px 0 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--panel2);overflow:hidden;white-space:nowrap}
.mq-track{display:inline-flex;gap:40px;padding:14px 0;animation:mq 40s linear infinite;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.mq-track span b{color:var(--ink);font-weight:600}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---------- sections ---------- */
.sec{margin-top:96px}
.sec-sub{max-width:620px;color:var(--ink2);margin:-4px 0 24px;font-size:13.5px;line-height:1.7}

/* try */
.try{display:grid;grid-template-columns:1fr 1.25fr;gap:18px;align-items:stretch}
.try-chat{display:flex;flex-direction:column;min-height:460px}
.try-ideas{display:flex;gap:6px;padding:12px 14px;border-bottom:1px solid var(--line);flex-wrap:wrap;background:var(--panel)}
.try-ideas button{border:1px solid var(--line2);background:#fff;border-radius:8px;padding:7px 11px;font-size:11.5px;box-shadow:0 2px 0 #e2e2e0;transition:.15s}
.try-ideas button.on{background:var(--ink);color:#fff;border-color:var(--ink);box-shadow:0 2px 0 #000}
.try-msgs{flex:1;padding:16px;display:flex;flex-direction:column;gap:12px;overflow:hidden}
.tm{max-width:88%;padding:10px 13px;border-radius:12px;font-size:12.5px;line-height:1.6;animation:popIn .4s both}
.tm.me{align-self:flex-end;background:#fff;border:1px solid var(--line)}
.tm.ai{background:var(--term);color:#e6e6e6}
.tm .att{display:flex;gap:6px;margin-top:8px}.tm .att i{width:40px;height:30px;border-radius:5px;background:linear-gradient(135deg,#9a9c9f,#5f6166)}
.tm .dots{display:inline-flex;gap:4px}.tm .dots i{width:5px;height:5px;border-radius:50%;background:var(--green);animation:dt 1s infinite}.tm .dots i:nth-child(2){animation-delay:.15s}.tm .dots i:nth-child(3){animation-delay:.3s}
@keyframes dt{50%{opacity:.2}}
.try-input{margin:0 14px 14px;display:flex;align-items:center;gap:10px;border:1px solid var(--line2);background:#fff;border-radius:12px;padding:8px 8px 8px 14px;color:var(--mut);font-size:12.5px}
.try-input span:first-child{flex:1}
.try-input .send{width:32px;height:32px;border-radius:8px;background:var(--ink);display:grid;place-items:center}
.try-input svg{width:15px;height:15px;stroke:#fff;fill:none;stroke-width:2.2}
.try-prev{display:flex;flex-direction:column;min-height:460px}
.try-screen{flex:1;position:relative;overflow:hidden;background:#fff}
.try-bar{height:30px;border-top:1px solid var(--line);display:flex;align-items:center;gap:12px;padding:0 12px;font-size:11px;color:var(--mut);background:var(--panel)}
.try-bar i{flex:1;height:4px;border-radius:3px;background:linear-gradient(var(--green),var(--green)) 0/var(--p,0%) 100% no-repeat,#e3e3e1;transition:background-size .3s}
.skel{position:absolute;inset:0;padding:22px;display:flex;flex-direction:column;gap:12px;background:#fafaf9}
.skel i{display:block;border-radius:8px;background:linear-gradient(90deg,#ececea 0,#f6f6f5 40%,#ececea 80%);background-size:200% 100%;animation:shim 1.2s linear infinite}
@keyframes shim{to{background-position:-200% 0}}
.demo-site{position:absolute;inset:0;animation:popIn .6s both}

/* demo sites */
.ds-frog{background:#0f1a12;color:#d6ffd9;display:flex;flex-direction:column}
.ds-nav{display:flex;align-items:center;gap:16px;padding:14px 20px;font-size:10px;letter-spacing:.12em}
.ds-nav b{font-size:15px;margin-right:auto;letter-spacing:0}
.ds-frog .ds-nav b{color:#7CFC9A}.ds-frog .ds-nav .bx{background:#7CFC9A;color:#0f1a12;padding:6px 10px;border-radius:4px;font-weight:700}
.ds-hero{flex:1;display:grid;grid-template-columns:1.2fr 1fr;align-items:center;padding:10px 26px;gap:10px}
.ds-frog h3{font-family:var(--disp);font-size:58px;line-height:.86;margin:0;color:#7CFC9A;letter-spacing:-.04em}
.ds-frog p{font-size:12px;color:#9ccaa3}
.ds-ca{display:inline-flex;border:1px solid #2c4b33;border-radius:5px;font-size:11px;overflow:hidden}.ds-ca code{padding:7px 10px}.ds-ca b{background:#7CFC9A;color:#0f1a12;padding:7px 9px}
.frog{position:relative;width:150px;height:126px;margin:auto;background:#3fbf5c;border-radius:50% 50% 40% 40%;box-shadow:inset -14px -14px 0 #2f9a48;animation:bob 3s ease-in-out infinite}
.frog i{position:absolute;background:#fff;border-radius:50%;width:38px;height:38px;top:-14px}
.frog i:nth-child(1){left:16px}.frog i:nth-child(2){right:16px}
.frog i:nth-child(3),.frog i:nth-child(4){width:15px;height:15px;background:#0f1a12;top:-2px;border-radius:3px}
.frog i:nth-child(3){left:28px}.frog i:nth-child(4){right:28px}
.frog::after{content:'';position:absolute;left:32px;right:32px;top:64px;height:12px;border-bottom:4px solid #0f1a12;border-radius:0 0 50% 50%}
.ds-stats{display:flex;border-top:1px solid #1f3324}.ds-stats span{flex:1;padding:12px 18px;font-size:9px;letter-spacing:.12em;color:#8fd49a;border-right:1px solid #1f3324}.ds-stats b{display:block;font-size:16px;color:#e9ffe9;letter-spacing:0}
.ds-pad{background:#f6f6f4;color:var(--ink);display:flex;flex-direction:column}
.ds-pad .ds-nav b{font-family:var(--disp)}
.ds-pad .bx{background:var(--ink);color:#fff;padding:6px 10px;border-radius:6px}
.pad-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:6px 20px 20px}
.pad-card{background:#fff;border:1px solid #e3e3e1;border-radius:12px;padding:12px;font-size:11px;animation:popIn .5s both}
.pad-card .av{width:34px;height:34px;border-radius:9px;margin-bottom:8px}
.pad-card b{display:block;font-size:12.5px}
.pad-card .mc{height:5px;border-radius:3px;background:#ececea;margin-top:8px;overflow:hidden}.pad-card .mc i{display:block;height:100%;background:var(--green)}
.pad-top{display:flex;align-items:center;justify-content:space-between;padding:4px 20px 12px}
.pad-top h3{font-family:var(--disp);font-size:30px;margin:0;letter-spacing:-.04em}
.ds-game{background:#120f24;color:#fff;display:flex;flex-direction:column}
.ds-game canvas{flex:1;width:100%;display:block}
.ds-game .ds-nav b{color:#ffd23f}
.ds-game .hud{position:absolute;left:20px;right:20px;top:54px;display:flex;justify-content:space-between;font-size:11px;letter-spacing:.12em;color:#ffd23f}
.ds-ai{background:linear-gradient(160deg,#1b1c1e,#2f3136);color:#eee;display:flex;flex-direction:column}
.ai-chat{flex:1;display:flex;flex-direction:column;gap:10px;padding:10px 22px 18px;justify-content:flex-end}
.ai-chat .q{align-self:flex-end;background:#3a3c41;padding:9px 12px;border-radius:12px 12px 2px 12px;font-size:12px}
.ai-chat .a{display:flex;gap:10px;align-items:flex-end;font-size:12px}
.ai-chat .a span{background:#fff;color:#1b1c1e;padding:9px 12px;border-radius:12px 12px 12px 2px;max-width:80%}
.ai-face{width:36px;height:36px;border-radius:11px;background:linear-gradient(150deg,#77797d,#55575b);display:grid;place-items:center;flex:none;box-shadow:0 3px 0 #404245}
.ai-face i{width:6px;height:6px;background:#fff;border-radius:50%;margin:0 2px;display:inline-block;animation:blinkEye 3s infinite}
@keyframes blinkEye{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}

/* references */
.lref-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.lref{background:var(--white);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;transition:transform .2s}
.lref:hover{transform:translateY(-4px)}
.lref .cv{height:170px;background:linear-gradient(135deg,#e9e9e8,#d8d8d6) center/cover no-repeat;position:relative;border-bottom:1px solid var(--line)}
.lref .cv span{position:absolute;left:12px;top:12px;background:rgba(27,28,30,.85);color:#fff;font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:4px 8px;border-radius:6px}
.lref .bd{padding:16px;display:flex;flex-direction:column;gap:8px;flex:1}
.lref h4{margin:0;font-family:var(--disp);font-size:20px;letter-spacing:-.03em}
.lref p{margin:0;font-size:12px;color:var(--mut);line-height:1.6}
.lref .ft{display:flex;flex-wrap:wrap;gap:5px;margin-top:auto}
.lref .ft i{font-style:normal;font-size:10.5px;border:1px solid var(--line2);border-radius:6px;padding:2px 7px;background:var(--panel2)}
@media (max-width:1020px){.lref-grid{grid-template-columns:1fr 1fr}}
@media (max-width:680px){.lref-grid{grid-template-columns:1fr}}

/* caps */
.caps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.cap{padding:22px;transition:transform .2s ease-out,box-shadow .2s;transform-style:preserve-3d}
.cap h4{font-family:var(--disp);font-size:20px;letter-spacing:-.03em;margin:18px 0 6px}
.cap p{margin:0 0 14px;color:var(--mut);font-size:12.5px;line-height:1.65}
.cap code{font-size:11.5px;background:var(--term);color:#c3e88d;padding:6px 9px;border-radius:7px;display:inline-block}

/* steps */
.steps{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.step{padding:22px;position:relative;z-index:1}
.step .n{position:absolute;right:16px;top:14px;font-size:12px;color:var(--mut2);font-weight:600}
.step h3{font-family:var(--disp);font-size:22px;letter-spacing:-.03em;margin:18px 0 6px}
.step p{margin:0;color:var(--mut);font-size:12.5px;line-height:1.65}
.steps-line{position:absolute;left:4%;right:4%;top:50%;width:92%;height:10px;z-index:0}
.steps-line path{stroke:var(--line2);stroke-width:2;stroke-dasharray:6 6;fill:none}

/* live */
.live-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.pcard{overflow:hidden;display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);transition:transform .2s}
.pcard:hover{transform:translateY(-3px)}
.pcard .thumb{position:relative;height:210px;overflow:hidden;background:var(--bg2);border-bottom:1px solid var(--line)}
.pcard .thumb iframe{position:absolute;left:0;top:0;width:1280px;height:800px;border:0;transform:scale(.3);transform-origin:0 0;pointer-events:none}
.pcard .meta{padding:12px 14px;display:flex;align-items:center;gap:10px}
.pcard .meta h4{margin:0;font-size:13px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.empty{grid-column:1/-1;border:1px dashed var(--line2);border-radius:12px;padding:40px;text-align:center;color:var(--mut);background:var(--panel2)}

/* cta */
.cta{display:grid;grid-template-columns:1.4fr 1fr;align-items:center;gap:30px;padding:44px;background:linear-gradient(135deg,#fbfbfa,#ececeb)}
.cta h2{font-family:var(--disp);font-size:clamp(40px,5.4vw,70px);line-height:.95;letter-spacing:-.05em;margin:10px 0 12px}
.cta-btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.cta-r{display:grid;place-items:center}
.cta-r img{width:min(300px,100%);filter:drop-shadow(0 30px 30px rgba(0,0,0,.25));animation:bob 5s ease-in-out infinite;transition:transform .2s ease-out}

@media (max-width:1020px){
  .try,.cta{grid-template-columns:1fr}
  .caps,.live-grid{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr}.steps-line{display:none}
  .cta-r{display:none}
}
@media (max-width:680px){
  .caps,.live-grid,.steps{grid-template-columns:1fr}
  .sec{margin-top:70px}
  .sec-h h2{font-size:30px}
  .stats{gap:26px}
  .cta{padding:26px}
  .pad-grid{grid-template-columns:1fr 1fr}
  .ds-frog h3{font-size:42px}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01s!important;animation-iteration-count:1!important;transition:none!important}.reveal{opacity:1;transform:none}}