/* Layout: one centered 1120px column of stacked sections on a near-black ground; glass cards with a warm corner glow; heavy tight headlines. */
:root{
  --bg:#050505; --panel:#0E0E0E; --panel-2:#141210; --line:rgba(245,243,238,.11); --line-2:rgba(245,243,238,.2);
  --fg:#F5F3EE; --muted:#B4AFA6; --dim:#8E897F;
  --orange:#E8682A; --orange-hi:#FF8A3D; --orange-btn:#C8501A; --orange-btn-2:#B34012;
  --green:#39D98A; --red:#F87171;
  --display:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif; --body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color-scheme:dark; box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 88px); -webkit-text-size-adjust:100%; background:var(--bg)}
body{margin:0; background:var(--bg); color:var(--fg); font-family:var(--body); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
a{color:var(--orange-hi)}
:focus-visible{outline:3px solid var(--green); outline-offset:3px; border-radius:6px}
.wrap{max-width:1168px; margin:0 auto; padding-inline:24px}
.narrow{max-width:820px}
.skip{position:absolute; left:-999px; top:8px; background:var(--fg); color:var(--bg); padding:8px 12px; z-index:60; border-radius:8px}
.skip:focus{left:8px}

/* header */
.top{position:sticky; top:env(safe-area-inset-top,0px); z-index:40; background:rgba(5,5,5,.86); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.top .wrap{display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:76px}
.logo{display:inline-flex; align-items:center; gap:9px; background:#fff; color:#0A0A0A; border-radius:14px; padding:9px 16px 9px 13px; text-decoration:none; line-height:1}
.logo b{display:block; font-size:14px; font-weight:900; letter-spacing:.01em}
.logo small{display:block; font-size:8.5px; font-weight:600; letter-spacing:.28em; margin-top:3px}
.nav{display:flex; align-items:center; gap:26px}
.nav a.l{color:var(--muted); text-decoration:none; font-size:15px; font-weight:500}
.nav a.l:hover,.nav a.l[aria-current="page"]{color:var(--fg)}
.menu{display:none; position:relative}
.menu summary{list-style:none; cursor:pointer; color:var(--fg); font-weight:700; font-size:15px; border:1px solid var(--line-2); border-radius:999px; padding:9px 16px}
.menu summary::-webkit-details-marker{display:none}
.menu .sheet{position:absolute; right:0; top:calc(100% + 10px); width:min(300px,82vw); background:var(--panel); border:1px solid var(--line-2); border-radius:18px; padding:10px; display:flex; flex-direction:column}
.menu .sheet a{color:var(--fg); text-decoration:none; padding:12px 14px; border-radius:12px; font-weight:600}
.menu .sheet a:hover{background:rgba(245,243,238,.06)}
@media (max-width:1020px){ .nav a.l{display:none} .menu{display:block} }
@media (max-width:520px){ .top .btn{display:none} }

/* buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:999px; padding:14px 26px; font:inherit; font-size:16px; font-weight:800; text-decoration:none; cursor:pointer; border:0; color:#fff; background:linear-gradient(180deg,var(--orange-btn),var(--orange-btn-2)); box-shadow:0 0 0 1px rgba(255,138,61,.55) inset, 0 10px 34px rgba(232,104,42,.42); transition:transform .15s, box-shadow .15s}
.btn:hover{transform:translateY(-1px); box-shadow:0 0 0 1px rgba(255,138,61,.8) inset, 0 14px 44px rgba(232,104,42,.6)}
.btn.sm{padding:11px 20px; font-size:15px}
.btn.lg{padding:17px 34px; font-size:18px}
.btn.ghost{background:rgba(245,243,238,.05); color:var(--fg); box-shadow:0 0 0 1px var(--line-2) inset}
.btn.ghost:hover{background:rgba(245,243,238,.1); box-shadow:0 0 0 1px rgba(245,243,238,.4) inset}
.btn.block{width:100%}

/* type */
.eyebrow{display:inline-flex; align-items:center; gap:9px; font-size:12px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:var(--green); margin:0 0 14px}
.eyebrow.o{color:var(--orange-hi)}
.eyebrow.pill{border:1px solid var(--line-2); background:rgba(245,243,238,.04); color:var(--muted); border-radius:999px; padding:9px 16px; font-weight:600}
.eyebrow.pill::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 10px var(--green)}
h1,h2,h3{font-family:var(--display); margin:0; text-wrap:balance}
h1{font-size:clamp(40px,7.4vw,84px); line-height:.96; font-weight:900; letter-spacing:-.055em; text-shadow:0 0 44px rgba(232,104,42,.5)}
h2{font-size:clamp(30px,4.4vw,52px); line-height:1.02; font-weight:900; letter-spacing:-.045em}
h2.big{font-size:clamp(36px,5.6vw,68px)}
h3{font-size:19px; line-height:1.25; font-weight:800; letter-spacing:-.01em}
.g{color:var(--green); display:block}
.o{color:var(--orange); display:block}
.lede{font-size:clamp(17px,1.7vw,20px); color:var(--muted); max-width:38em; margin:18px 0 0}
p{margin:0 0 14px}
section{padding-block:72px}
section.tight{padding-block:40px}
.center{text-align:center}
.center .lede{margin-inline:auto}

/* hero */
.hero{padding-block:64px 40px; text-align:center; position:relative; overflow:hidden}
.hero::before{content:""; position:absolute; inset:-20% 10% auto; height:520px; background:radial-gradient(closest-side,rgba(232,104,42,.2),transparent); pointer-events:none}
.hero .wrap{position:relative}
.hero h1{max-width:13em; margin-inline:auto}
.hero .rule{height:1px; max-width:860px; margin:26px auto 0; background:linear-gradient(90deg,transparent,var(--orange),transparent)}
.hero .lede{margin-inline:auto}
.hero .strong{font-weight:700; color:var(--fg); margin:10px 0 0}
.cta-row{display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:center; margin-top:30px}
.tags{display:flex; flex-wrap:wrap; gap:8px 22px; justify-content:center; margin:26px 0 0; padding:0; list-style:none; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--dim); font-weight:600}
.fine{font-size:13.5px; color:var(--dim); margin:14px 0 0}

/* cards */
.card{position:relative; background:linear-gradient(180deg,rgba(245,243,238,.045),rgba(245,243,238,.02)); border:1px solid var(--line); border-radius:22px; padding:24px}
.card.glow{background:radial-gradient(120% 90% at 0% 0%,rgba(232,104,42,.16),transparent 55%),radial-gradient(90% 80% at 100% 100%,rgba(57,217,138,.07),transparent 60%),var(--panel)}
.card.link{display:flex; flex-direction:column; gap:8px; text-decoration:none; color:var(--fg); transition:border-color .2s, transform .2s}
.card.link:hover{border-color:rgba(232,104,42,.7); transform:translateY(-2px)}
.card.link .go{margin-top:auto; padding-top:10px; color:var(--orange-hi); font-weight:800; font-size:15px}
.card p{color:var(--muted); font-size:15.5px; margin:0}
.grid{display:grid; gap:16px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1000px){ .g4{grid-template-columns:repeat(2,minmax(0,1fr))} .g3{grid-template-columns:1fr} }
@media (max-width:700px){ .g2,.g4{grid-template-columns:1fr} }
.split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px; align-items:center}
@media (max-width:920px){ .split{grid-template-columns:1fr; gap:32px} }
.label{font-size:11.5px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--dim); margin:0 0 6px}
.label.o{color:var(--orange-hi); display:block}
.label.g{color:var(--green); display:block}

/* automation / conversation card */
.auto{max-width:860px; margin:44px auto 0; text-align:left; border-radius:30px; padding:26px}
.auto-head{display:flex; justify-content:space-between; align-items:center; gap:12px; padding-bottom:18px; margin-bottom:18px; border-bottom:1px solid var(--line)}
.auto-head strong{display:block; font-size:19px; font-weight:500}
.chip{flex:none; font-size:12px; font-weight:800; letter-spacing:.06em; color:var(--green); border:1px solid rgba(57,217,138,.45); background:rgba(57,217,138,.1); border-radius:999px; padding:6px 12px}
.msgs{display:grid; gap:14px}
.msg{border:1px solid var(--line); border-radius:20px; padding:16px 20px; background:rgba(245,243,238,.025)}
.msg p{margin:0; color:var(--fg); font-size:17px}
.msg.out{background:rgba(245,243,238,.06)}
.msg.in{justify-self:end; max-width:min(100%,30em); background:rgba(232,104,42,.14); border-color:rgba(232,104,42,.4)}
.msg.win{background:rgba(57,217,138,.09); border-color:rgba(57,217,138,.4)}
.pair{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px}
@media (max-width:600px){ .pair{grid-template-columns:1fr} }
.js .seq .msg{opacity:0; transform:translateY(10px)}
.js .seq.play .msg{opacity:1; transform:none; transition:opacity .5s ease, transform .5s ease; transition-delay:calc(var(--i,0) * .55s)}

/* demo trigger */
.trigger .quote{border:1px solid var(--line-2); border-radius:16px; padding:14px 18px; margin:0 0 14px; color:var(--fg)}
.trigger .sim{display:grid; gap:10px; margin:0 0 14px}
.trigger .sim[hidden]{display:none}
.linkbtn{background:none; border:0; padding:0; font:inherit; font-size:14.5px; color:var(--orange-hi); font-weight:700; cursor:pointer; text-decoration:underline; text-underline-offset:4px}

/* lists */
.checks{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.checks li{display:flex; gap:12px; align-items:flex-start; color:var(--fg)}
.checks li::before{content:""; flex:none; width:14px; height:14px; margin-top:6px; border-radius:50%; background:var(--green); box-shadow:0 0 12px rgba(57,217,138,.7)}
.checks.x li::before{background:none; box-shadow:none; content:"✕"; color:var(--orange); width:auto; height:auto; margin-top:0; font-weight:800}
.checks.v li::before{background:none; box-shadow:none; content:"✓"; color:var(--green); width:auto; height:auto; margin-top:0; font-weight:800}
.note-o{color:var(--orange-hi); font-weight:700; margin:18px 0 0}

/* stats */
.stats{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; max-width:880px; margin-inline:auto}
@media (max-width:640px){ .stats{grid-template-columns:repeat(2,minmax(0,1fr))} }
.stat{border:1px solid var(--line); border-radius:18px; padding:16px 10px; text-align:center; background:rgba(245,243,238,.03)}
.stat b{display:block; font-size:28px; font-weight:900; letter-spacing:-.03em; color:var(--orange); font-variant-numeric:tabular-nums}
.stat:nth-child(even) b{color:var(--green)}
.stat span{font-size:13px; color:var(--muted)}
.inds{max-width:880px; margin:14px auto 0; text-align:center}
.inds ul{list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:6px 22px; margin:10px 0 14px; padding:0; color:var(--muted); font-size:15.5px}
.inds blockquote{margin:0 auto; max-width:30em; color:var(--fg)}

/* steps */
.steps{list-style:none; margin:28px 0 0; padding:0; counter-reset:s}
.steps li{counter-increment:s}
.steps li::before{content:"Step " counter(s); display:block; font-size:11.5px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:var(--green); margin-bottom:8px}
.steps h3{margin-bottom:6px}

/* voice */
.callbox .num{display:block; font-size:clamp(30px,4.4vw,44px); font-weight:900; letter-spacing:-.03em; color:var(--green); line-height:1.1; margin:6px 0 16px; text-decoration:none; font-variant-numeric:tabular-nums}
.phone{max-width:420px; margin-inline:auto; border-radius:34px}
.phone-head{display:flex; align-items:center; gap:12px; padding-bottom:16px; margin-bottom:16px; border-bottom:1px solid var(--line)}
.avatar{flex:none; width:44px; height:44px; border-radius:50%; background:linear-gradient(180deg,var(--orange-hi),var(--orange-btn-2)); display:grid; place-items:center; font-weight:900; font-size:15px; color:#fff}
.bars{display:flex; gap:6px; justify-content:center; align-items:center; height:56px; margin-bottom:14px}
.bars i{width:6px; border-radius:3px; background:var(--orange); animation:bar 1.3s ease-in-out infinite}
.bars i:nth-child(1){height:28px}.bars i:nth-child(2){height:40px; animation-delay:.15s}.bars i:nth-child(3){height:18px; animation-delay:.3s}.bars i:nth-child(4){height:50px; animation-delay:.45s}.bars i:nth-child(5){height:34px; animation-delay:.6s}.bars i:nth-child(6){height:46px; animation-delay:.75s}
@keyframes bar{50%{transform:scaleY(.45)}}

/* case study */
.nums{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:22px 0}
.nums div{border:1px solid var(--line); border-radius:16px; padding:14px 16px; background:rgba(245,243,238,.03)}
.nums div:nth-child(2){background:rgba(232,104,42,.12); border-color:rgba(232,104,42,.4)}
.nums div:nth-child(3){background:rgba(57,217,138,.09); border-color:rgba(57,217,138,.4)}
.nums b{display:block; font-size:30px; font-weight:900; letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.nums div:nth-child(2) b{color:var(--orange)} .nums div:nth-child(3) b{color:var(--green)}
.quote-card blockquote{margin:0; font-size:clamp(19px,2.3vw,25px); line-height:1.4}
.quote-card footer{margin-top:18px; padding-top:16px; border-top:1px solid var(--line); color:var(--dim); font-size:14.5px}

/* band */
.band{border-radius:30px; padding:64px 28px; text-align:center}
.band .lede{margin-inline:auto}

/* compare */
.compare{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:28px}
@media (max-width:760px){ .compare{grid-template-columns:1fr} }
.flow{list-style:none; margin:10px 0 0; padding:0; counter-reset:f; display:grid; gap:14px}
.flow li{counter-increment:f; display:grid; grid-template-columns:34px minmax(0,1fr); column-gap:6px}
.flow li::before{content:counter(f,decimal-leading-zero); font-weight:900; font-size:14px; grid-row:span 2}
.flow b{font-weight:600}
.flow span{font-size:14px}
.flow.bad li::before,.flow.bad span{color:var(--red)} .flow.bad b{color:var(--dim); text-decoration:line-through}
.flow.good li::before,.flow.good span{color:var(--green)}

/* faq */
.faq details{border-bottom:1px solid var(--line); padding:20px 0}
.faq summary{cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:16px; font-weight:800; font-size:19px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--orange-hi); font-size:26px; line-height:1; transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:12px 0 0; color:var(--muted); max-width:44em}

/* legal + simple pages */
.doc h1{font-size:clamp(34px,5vw,56px); text-shadow:none}
.doc h2{font-size:22px; letter-spacing:-.02em; margin:34px 0 8px}
.doc p{color:var(--muted); max-width:42em}
.crumb{font-size:14px; color:var(--dim); margin:0 0 18px}
.crumb a{color:var(--dim)}
.embed{border-radius:20px; overflow:hidden; background:#000; border:1px solid var(--line)}
.embed iframe{display:block; width:100%; min-height:640px; border:0}
.placeholder{padding:40px 24px; text-align:center; color:var(--muted)}

/* footer */
.foot{border-top:1px solid var(--line); padding-block:48px 56px; margin-top:40px; color:var(--muted); font-size:15px}
.foot .cols{display:grid; grid-template-columns:1.4fr repeat(3,minmax(0,1fr)); gap:32px}
@media (max-width:860px){ .foot .cols{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:480px){ .foot .cols{grid-template-columns:1fr} }
.foot h2{font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--dim); font-weight:800; margin:0 0 12px}
.foot ul{list-style:none; margin:0; padding:0; display:grid; gap:9px}
.foot a{color:var(--muted); text-decoration:none}
.foot a:hover{color:var(--fg)}
.foot .base{margin-top:36px; padding-top:20px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; font-size:14px; color:var(--dim)}
@media (prefers-reduced-motion: reduce){ *{animation:none !important; transition:none !important} .js .seq .msg{opacity:1; transform:none} }

/* specificity fixes: labels and notes keep their own size and color inside cards and messages */
.card p.label,.msg p.label{font-size:11.5px; color:var(--dim); margin:0 0 6px}
.card p.label.o,.msg p.label.o{color:var(--orange-hi)}
.card p.label.g,.msg p.label.g{color:var(--green)}
.card p.note-o{color:var(--orange-hi); font-size:16px; margin:18px 0 0}
.card p.fine{font-size:13.5px; color:var(--dim); margin:14px 0 0}
h1 .ln{display:block}

/* ---------- polish + motion ---------- */
@view-transition{navigation:auto}
html{scroll-behavior:smooth}
section{padding-block:clamp(56px,8.5vw,112px)}
section.tight{padding-block:clamp(32px,4vw,48px)}
.progress{position:fixed; top:0; left:0; right:0; height:3px; z-index:70; transform-origin:0 50%; transform:scaleX(0); background:linear-gradient(90deg,var(--orange),var(--orange-hi),var(--green)); pointer-events:none}
.top{transition:background .3s, box-shadow .3s}
.top .wrap{transition:min-height .3s}
.top.scrolled{background:rgba(5,5,5,.94); box-shadow:0 10px 40px rgba(0,0,0,.55)}
.top.scrolled .wrap{min-height:62px}

/* headline sheen */
h1{text-shadow:none; filter:drop-shadow(0 0 30px rgba(232,104,42,.42)); background:linear-gradient(100deg,var(--fg) 0%,var(--fg) 42%,#FFC9A3 50%,var(--fg) 58%,var(--fg) 100%); background-size:260% 100%; background-position:100% 0; -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; animation:sheen 7s ease-in-out 1.2s infinite}
@keyframes sheen{0%,55%{background-position:100% 0} 85%,100%{background-position:0 0}}
.doc h1{filter:none; animation:none}

/* drifting ambient light */
.hero::before{animation:drift 18s ease-in-out infinite alternate}
.hero::after{content:""; position:absolute; right:-12%; top:28%; width:560px; height:560px; background:radial-gradient(closest-side,rgba(57,217,138,.11),transparent); pointer-events:none; animation:drift2 22s ease-in-out infinite alternate}
@keyframes drift{from{transform:translate3d(-6%,0,0) scale(1)} to{transform:translate3d(8%,6%,0) scale(1.15)}}
@keyframes drift2{from{transform:translate3d(0,0,0)} to{transform:translate3d(-14%,-10%,0) scale(1.2)}}
.rule{background-size:200% 100%; animation:rule 5s linear infinite}
.hero .rule{background-image:linear-gradient(90deg,transparent,var(--orange),var(--orange-hi),var(--orange),transparent)}
@keyframes rule{from{background-position:200% 0} to{background-position:-200% 0}}

/* cards: light follows the pointer */
.card{--mx:50%; --my:0%; transition:border-color .35s, transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s}
.card::after{content:""; position:absolute; inset:0; border-radius:inherit; background:radial-gradient(380px circle at var(--mx) var(--my),rgba(255,138,61,.16),transparent 62%); opacity:0; transition:opacity .4s; pointer-events:none}
.card:hover::after{opacity:1}
.card.glow:hover{border-color:rgba(232,104,42,.38); box-shadow:0 24px 70px rgba(0,0,0,.5)}
.steps .card:hover,.g2>.card.glow:hover{transform:translateY(-3px)}

/* buttons: sheen on hover */
.btn{position:relative; overflow:hidden; transition:transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s}
.btn::before{content:""; position:absolute; inset:0; background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%); transform:translateX(-120%); transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.btn:hover::before{transform:translateX(120%)}
.btn:active{transform:translateY(1px) scale(.985)}

/* industries marquee */
.mqw{overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.inds ul.mq{flex-wrap:nowrap; justify-content:flex-start; width:max-content; gap:0 34px; white-space:nowrap; animation:mq 30s linear infinite}
.inds ul.mq li::after{content:"✦"; color:var(--orange); margin-left:34px; font-size:11px}
.mqw:hover ul.mq{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}

/* sections ease in as you scroll */
.js .rv{opacity:0; transform:translateY(26px); transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); transition-delay:calc(var(--d,0) * 80ms)}
.js .rv.in{opacity:1; transform:none}
.live-dot{display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 0 0 rgba(57,217,138,.6); animation:ping 2s infinite; margin-right:7px; vertical-align:1px}
@keyframes ping{70%{box-shadow:0 0 0 9px rgba(57,217,138,0)} 100%{box-shadow:0 0 0 0 rgba(57,217,138,0)}}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} .js .rv{opacity:1; transform:none} h1{background-position:100% 0} }

/* try the voice agent */
.ring{display:inline-block; width:10px; height:10px; border-radius:50%; background:var(--green); box-shadow:0 0 0 0 rgba(57,217,138,.6); animation:ring 2s infinite; flex:none}
.btn .ring{background:#fff; margin-right:10px; box-shadow:0 0 0 0 rgba(255,255,255,.6)}
@keyframes ring{70%{box-shadow:0 0 0 10px rgba(57,217,138,0)}100%{box-shadow:0 0 0 0 rgba(57,217,138,0)}}
.callline{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:18px 0 0; color:var(--dim); font-size:16px}
.hero .callline{justify-content:center}
.callline a{color:var(--green); font-weight:800; text-decoration:none; font-variant-numeric:tabular-nums; white-space:nowrap}
.tryit{display:grid; grid-template-columns:1.25fr 1fr; gap:36px; align-items:center; padding:48px 40px; border-radius:30px; border-color:rgba(57,217,138,.35); background:radial-gradient(600px 300px at 0% 0%,rgba(57,217,138,.12),transparent 70%),rgba(245,243,238,.03)}
.tryit .num{display:block; font-size:clamp(34px,5.4vw,58px); font-weight:900; letter-spacing:-.03em; color:var(--green); line-height:1.1; margin:18px 0 20px; text-decoration:none; font-variant-numeric:tabular-nums; white-space:nowrap}
.asks{border:1px solid var(--line); border-radius:22px; padding:22px; background:rgba(0,0,0,.35)}
.asks ul{list-style:none; margin:12px 0 0; padding:0; display:grid; gap:10px}
.asks li{padding:12px 14px; border-radius:14px 14px 14px 4px; background:rgba(245,243,238,.06); color:var(--fg); font-size:15.5px}
.fab{position:fixed; right:18px; bottom:18px; z-index:40; display:flex; align-items:center; gap:12px; padding:11px 18px 11px 16px; border-radius:999px; background:rgba(10,10,10,.88); backdrop-filter:blur(10px); border:1px solid rgba(57,217,138,.5); color:var(--fg); font-weight:800; font-size:15px; text-decoration:none; line-height:1.2; font-variant-numeric:tabular-nums; box-shadow:0 10px 30px rgba(0,0,0,.5); transition:transform .2s}
.fab:hover{transform:translateY(-2px)}
.fab small{display:block; font-weight:600; font-size:11.5px; color:var(--green); letter-spacing:.04em; text-transform:uppercase}
footer{padding-bottom:84px}
@media(max-width:820px){.tryit{grid-template-columns:1fr; padding:32px 22px}}
@media(prefers-reduced-motion:reduce){.ring{animation:none}}
.tryit h2{margin-bottom:16px}
.fab{transition:transform .2s,opacity .3s}
header.top:not(.scrolled)+.fab{opacity:0; pointer-events:none}

/* new logo */
.logo{background:#0E0E0E; color:#fff; border:1px solid rgba(245,243,238,.14); border-radius:16px; padding:8px 18px 8px 12px; gap:10px; font-family:Poppins,Inter,sans-serif}
.logo b{font-size:19px; font-weight:700; letter-spacing:.01em}
.logo small{font-size:8.5px; font-weight:400; letter-spacing:.3em; margin-top:3px; color:#D9D6CF}