/* qGateway landing — dark theme on the qCloudy palette */
:root{
  --bg:#060B0E; --bg-2:#0A1418; --bg-3:#0E1C21;
  --surface:rgba(255,255,255,.035); --surface-2:rgba(255,255,255,.06);
  --border:rgba(255,255,255,.08); --border-2:rgba(255,255,255,.14);
  --text:#E8EEF2; --muted:#8C9CA7; --dim:#5E6E78;
  --forest:#0A5240; --forest-2:#0F6B53; --mint:#3DDC97; --mint-dim:rgba(61,220,151,.14);
  --coral:#E8564A; --coral-hover:#D9473B; --coral-dim:rgba(232,86,74,.15);
  --aws:#5C8DDB; --aws-dim:rgba(92,141,219,.15);
  --warn:#F2B84B;
  --radius-card:18px; --radius-ctl:10px;
  --font:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --max:1180px; --gutter:clamp(16px,4vw,32px);
  --ease:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:84px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:400 16px/1.6 var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden;
  background-image:
    radial-gradient(900px 520px at 85% -10%,rgba(15,107,83,.35),transparent 60%),
    radial-gradient(700px 420px at -10% 20%,rgba(92,141,219,.12),transparent 60%),
    radial-gradient(800px 600px at 50% 110%,rgba(232,86,74,.08),transparent 60%);
  background-attachment:fixed}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:56px 56px;mask-image:radial-gradient(ellipse at 50% 0%,#000 30%,transparent 75%)}
img,svg{display:block;max-width:100%}
svg{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4{margin:0;line-height:1.15;letter-spacing:-.02em}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
mark{background:none;color:inherit}
:focus-visible{outline:2px solid var(--mint);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--coral);color:#fff;padding:8px 12px;border-radius:8px}
.skip:focus{left:16px}

.container{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.container.narrow{max-width:860px}
.section{padding:clamp(64px,10vw,120px) 0;position:relative}
.sec-head{max-width:760px;margin-bottom:clamp(28px,4vw,48px)}
.sec-head h2,.price h2,.final h2{font-size:clamp(28px,4.2vw,44px);font-weight:700;margin:14px 0 12px}
.sec-head p{color:var(--muted);font-size:17px}
.lead{color:var(--muted);font-size:clamp(16px,1.6vw,18.5px);line-height:1.6}

/* Primitives */
.glass{background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02));border:1px solid var(--border);border-radius:var(--radius-card);
  backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);box-shadow:0 20px 60px -30px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.05)}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);padding:24px;position:relative}
.tag{display:inline-flex;align-items:center;gap:8px;font:600 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mint);
  padding:7px 11px;border:1px solid rgba(61,220,151,.25);background:var(--mint-dim);border-radius:999px}
.pulse{width:8px;height:8px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 0 rgba(61,220,151,.6);animation:pulse 2s infinite;flex:none;display:inline-block}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(61,220,151,.55)}70%{box-shadow:0 0 0 9px rgba(61,220,151,0)}100%{box-shadow:0 0 0 0 rgba(61,220,151,0)}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:13px 20px;border-radius:var(--radius-ctl);font-weight:600;font-size:15px;
  background:var(--coral);color:#fff;border:1px solid var(--coral);transition:background .2s,transform .2s var(--ease),box-shadow .2s;box-shadow:0 8px 28px -10px rgba(232,86,74,.7);white-space:nowrap}
.btn:hover{background:var(--coral-hover);transform:translateY(-1px)}
.btn svg{width:17px;height:17px}
.btn.ghost{background:var(--surface-2);border-color:var(--border-2);color:var(--text);box-shadow:none}
.btn.ghost:hover{background:rgba(255,255,255,.1)}
.btn.sm{padding:9px 14px;font-size:14px}
.btn.lg{padding:16px 26px;font-size:16px}
.btn[disabled]{opacity:.4;pointer-events:none}
.chip-beta,.chip-soon{font:600 10.5px/1 var(--mono);font-style:normal;padding:3px 6px;border-radius:6px;vertical-align:middle;margin-left:4px;letter-spacing:.02em}
.chip-beta{background:var(--coral-dim);color:#FF8A7F}
.chip-soon{background:rgba(242,184,75,.14);color:var(--warn)}
.dots3{display:flex;gap:6px}.dots3 i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.14)}
.dots3 i:first-child{background:#E8564A99}.dots3 i:nth-child(2){background:#F2B84B88}.dots3 i:nth-child(3){background:#3DDC9788}
.mono{font-family:var(--mono)}
mark.pii{color:#FFB4AC;background:var(--coral-dim);border-radius:5px;padding:0 3px}
mark.tok{color:var(--mint);background:var(--mint-dim);border-radius:5px;padding:0 3px;font-family:var(--mono);font-size:.92em}
mark.ok{color:#BFF3DA;background:rgba(61,220,151,.1);border-radius:5px;padding:0 3px}

/* Spotlight cards */
.spot{--mx:50%;--my:50%;overflow:hidden;isolation:isolate}
.spot::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;opacity:0;transition:opacity .3s;
  background:radial-gradient(420px circle at var(--mx) var(--my),rgba(61,220,151,.10),transparent 45%)}
.spot::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(300px circle at var(--mx) var(--my),rgba(61,220,151,.65),transparent 50%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.spot:hover::before,.spot:hover::after{opacity:1}

/* Reveal */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:calc(var(--i,0) * 70ms)}
.js .rv.in{opacity:1;transform:none}

/* Header */
.hdr{position:sticky;top:0;z-index:50;border-bottom:1px solid transparent;transition:background .3s,border-color .3s}
.hdr.scrolled{background:rgba(6,11,14,.72);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-color:var(--border)}
.hdr-in{display:flex;align-items:center;gap:18px;height:68px}
.brand{display:flex;align-items:center;gap:9px;font-weight:700;white-space:nowrap}
.live-pill,.nav a{white-space:nowrap}
.brand,.live-pill,.hdr-cta{flex:none}
@media (max-width:1240px){.brand-by{display:none}}
.brand img{width:28px;height:28px}
.brand-name{font-size:18px;letter-spacing:-.01em}
.brand-by{font:500 12px var(--mono);color:var(--muted);margin-left:2px}
.live-pill{display:inline-flex;align-items:center;gap:8px;font:500 12px var(--mono);color:var(--mint);padding:6px 10px;border:1px solid rgba(61,220,151,.25);border-radius:999px;background:rgba(61,220,151,.06)}
.nav{display:flex;gap:4px;margin-left:auto}
.nav a{padding:8px 12px;border-radius:8px;color:var(--muted);font-size:14.5px;font-weight:500;transition:color .2s,background .2s}
.nav a:hover{color:var(--text);background:var(--surface-2)}
.nav .nav-cta-m{display:none}
.nav-toggle{display:none;width:40px;height:40px;border-radius:10px;border:1px solid var(--border-2);align-items:center;justify-content:center}
.nav-toggle svg{width:20px;height:20px}

/* Hero */
.hero{padding:clamp(40px,7vw,90px) 0 40px}
.hero-in{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(28px,5vw,64px);align-items:center}
.badge{display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border-radius:999px;font-size:13.5px;font-weight:500;color:#CFE9DE;
  background:linear-gradient(90deg,rgba(61,220,151,.14),rgba(92,141,219,.12));border:1px solid rgba(61,220,151,.28)}
.badge svg{color:var(--mint);width:15px;height:15px}
.hero h1{font-size:clamp(30px,3.6vw,46px);font-weight:800;letter-spacing:-.035em;margin:20px 0 20px;line-height:1.05}
.grad{background:linear-gradient(100deg,#7DF0BE 0%,#3DDC97 40%,#5C8DDB 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.hero-note{color:var(--dim);font-size:13.5px;margin-top:14px;font-family:var(--mono)}

.connect{padding:18px;position:relative}
.connect-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.connect-title{font-weight:600;font-size:14px}
.illus{font:500 11px var(--mono);color:var(--dim);border:1px dashed var(--border-2);padding:3px 7px;border-radius:6px}
.tabs{display:flex;gap:4px;padding:4px;background:rgba(0,0,0,.25);border-radius:12px;border:1px solid var(--border);margin-bottom:14px;overflow-x:auto}
.tabs [role=tab]{flex:1;padding:8px 10px;border-radius:9px;font-size:13.5px;font-weight:500;color:var(--muted);white-space:nowrap;transition:background .2s,color .2s}
.tabs [role=tab][aria-selected=true]{background:var(--surface-2);color:var(--text);box-shadow:inset 0 0 0 1px var(--border-2)}
.term{background:#071014;border:1px solid var(--border);border-radius:12px;min-height:186px}
.term pre{margin:0;padding:18px;font:13.5px/1.9 var(--mono);color:#D6E2E8;white-space:pre-wrap;word-break:break-word}
.c-mut{color:var(--dim)}.c-ok{color:var(--mint)}
.appwin{background:#071014;border:1px solid var(--border);border-radius:12px;min-height:186px;overflow:hidden}
.appwin-bar{display:flex;align-items:center;gap:12px;padding:9px 12px;border-bottom:1px solid var(--border);font:12px var(--mono);color:var(--dim)}
.appwin-body{padding:16px 18px;display:grid;gap:10px;justify-items:start}
.appwin-btn{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:9px;background:var(--surface-2);border:1px solid var(--border-2);font-size:13.5px}
.appwin-ok{display:flex;align-items:center;gap:7px;color:var(--mint);font-size:13.5px}
.appwin-k{font:500 11px var(--mono);color:var(--dim);text-transform:uppercase;letter-spacing:.06em}
.appwin-models{display:flex;flex-wrap:wrap;gap:6px}
.appwin-models span{font-size:12.5px;padding:4px 9px;border-radius:999px;background:var(--aws-dim);color:#B9CFF2}
.appwin-foot{font-size:12.5px;color:var(--dim)}

.works{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:clamp(40px,6vw,72px);padding-top:24px;border-top:1px solid var(--border)}
.works-k{font:500 12px var(--mono);color:var(--dim);text-transform:uppercase;letter-spacing:.08em}
.works-list{display:flex;flex-wrap:wrap;gap:8px 22px;color:#B6C3CB;font-weight:500;font-size:15px}

/* Playground */
.pg-k{display:flex;align-items:center;gap:7px;font:500 11.5px var(--mono);color:var(--dim);text-transform:uppercase;letter-spacing:.07em;margin-bottom:9px}
.pg-k svg{width:14px;height:14px}


@keyframes blink{50%{opacity:0}}

/* Bento */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.bento .card{grid-column:span 2;padding:26px;transition:transform .3s var(--ease),border-color .3s}
.bento .card:hover{transform:translateY(-3px)}
.bento .b-shield{grid-column:span 4}
.bento .b-wide{grid-column:span 3}
.ico{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--mint-dim);color:var(--mint);border:1px solid rgba(61,220,151,.22);margin-bottom:16px}
.ico svg{width:21px;height:21px}
.card h3{font-size:19px;font-weight:650;margin-bottom:8px}
.card p{color:var(--muted);font-size:15px}
.ba{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center;margin-top:20px}
.ba>div{border:1px solid var(--border);border-radius:12px;padding:12px;background:rgba(0,0,0,.2);font-size:14px}
.ba-k{display:block;font:11px var(--mono);color:var(--dim);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}
.ba-arr{width:22px;height:22px;color:var(--mint)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.chips span,.chips li{font-size:13px;padding:5px 10px;border-radius:999px;background:var(--surface-2);border:1px solid var(--border);color:#C5D1D8}
.chips .loc{border-color:rgba(61,220,151,.3);color:var(--mint)}
.chips.lg li{display:inline-flex;align-items:center;gap:8px;font-size:15px;padding:10px 14px;border-radius:12px}
.chips.lg svg{color:var(--mint);width:17px;height:17px}

/* Architecture */
.arch{display:grid;grid-template-columns:1fr 64px 1.25fr 64px 1fr;align-items:center}
.arch-col{display:grid;gap:10px}
.arch-k{font:500 12px var(--mono);color:var(--dim);text-transform:uppercase;letter-spacing:.08em}
.arch-node{text-align:left;padding:14px 16px;border-radius:14px;border:1px solid var(--border-2);background:var(--surface);font-weight:650;font-size:16px;transition:all .25s var(--ease)}
.arch-node small{display:block;color:var(--muted);font-weight:400;font-size:13px;margin-top:3px}
.arch-node.dashed{border-style:dashed}
.arch-node.accent{border-color:rgba(61,220,151,.4);background:var(--mint-dim)}
.arch-node.aws{border-color:rgba(92,141,219,.4);background:var(--aws-dim)}
.arch-node:hover,.arch-node:focus-visible,.arch-node.lit{border-color:var(--mint);box-shadow:0 0 0 1px var(--mint),0 0 28px -6px rgba(61,220,151,.6);transform:translateY(-2px)}
.arch-core{padding:20px;display:grid;gap:4px;background:linear-gradient(160deg,rgba(15,107,83,.38),rgba(7,61,48,.25) 60%,rgba(6,11,14,.4));border-color:rgba(61,220,151,.28)}
.arch-core-h{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.arch-core-h b{font-size:22px;letter-spacing:-.02em}
.arch-core-h small{font:12px var(--mono);color:#A9D9C4;margin-left:auto}
.arch-feat{display:flex;align-items:center;gap:10px;text-align:left;padding:8px 10px;border-radius:9px;font-size:14.5px;color:#DCE8E3;transition:background .2s}
.arch-feat svg{width:17px;height:17px;color:var(--mint)}
.arch-feat:hover,.arch-feat:focus-visible,.arch-feat.lit{background:rgba(61,220,151,.12)}
.arch-sep{display:flex;align-items:center;gap:10px;margin:8px 0 4px;font:600 11px var(--mono);color:var(--mint);text-transform:uppercase;letter-spacing:.1em}
.arch-sep::before,.arch-sep::after{content:"";flex:1;height:1px;background:rgba(61,220,151,.25)}
.arch-link{height:2px;background:linear-gradient(90deg,rgba(61,220,151,.15),rgba(61,220,151,.5));position:relative;margin:0 6px;transition:box-shadow .3s}
.arch-link::after{content:"";position:absolute;right:-2px;top:-4px;border:5px solid transparent;border-left:7px solid rgba(61,220,151,.7);border-right:0}
.arch-link span{position:absolute;top:-3px;left:0;width:8px;height:8px;border-radius:50%;background:var(--mint);box-shadow:0 0 10px var(--mint);animation:flow 1.8s linear infinite}
.arch-link.lit{box-shadow:0 0 14px rgba(61,220,151,.8)}
@keyframes flow{from{left:0;opacity:0}15%{opacity:1}85%{opacity:1}to{left:calc(100% - 8px);opacity:0}}
.arch-note{margin-top:22px;text-align:center;color:var(--muted);font-size:15px;min-height:3.2em;max-width:720px;margin-inline:auto}

/* Who */
.who{display:grid;grid-template-columns:1.4fr 1fr;gap:28px;margin-bottom:28px}
.who .chips{margin-top:0}
.roles{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.roles .card{padding:18px}
.roles b{display:block;font-size:15.5px;margin-bottom:6px}
.roles p{font-size:14px}

/* Security */
.sec-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:28px;align-items:start}
.sec-list{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sec-list li{display:flex;gap:12px;padding:16px;border-radius:14px;border:1px solid var(--border);background:var(--surface)}
.sec-list svg{width:20px;height:20px;color:var(--mint);margin-top:2px}
.sec-list b{display:block;font-size:15.5px;margin-bottom:3px}
.sec-list span{color:var(--muted);font-size:14px;line-height:1.5}
.sla{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.stat{padding:20px}
.stat .num{display:block;font:700 clamp(30px,4vw,40px)/1 var(--font);letter-spacing:-.03em;background:linear-gradient(100deg,#fff,#9FEFCB);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:8px}
.stat span{color:var(--muted);font-size:14px}
.creds{grid-column:span 1;padding:16px;display:grid;gap:8px;align-content:center}
.creds span{font-size:13px;color:#C5D1D8;display:flex;gap:8px;align-items:center}
.creds span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--mint);flex:none}
.reg{margin-top:24px;font:13px/1.6 var(--mono);color:var(--dim)}

/* Pricing */
.price{display:grid;grid-template-columns:1.2fr 1fr;gap:32px;padding:clamp(24px,4vw,44px);align-items:center}
.price h2{margin-top:14px}
.price-r{display:grid;gap:16px;justify-items:start}
.ticks{display:grid;gap:10px}
.ticks li{display:flex;gap:10px;align-items:center;font-size:15.5px}
.ticks svg{width:18px;height:18px;color:var(--mint)}
.price-r small{color:var(--dim);font-size:13px}

/* Steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;counter-reset:s}
.steps .card{padding:26px}
.step-n{font:600 13px var(--mono);color:var(--mint);display:block;margin-bottom:14px}
.steps b{display:block;font-size:18px;margin-bottom:6px}

/* FAQ */
.faq{display:grid;gap:10px}
.faq details{border:1px solid var(--border);border-radius:14px;background:var(--surface);transition:border-color .2s}
.faq details[open]{border-color:var(--border-2)}
.faq summary{list-style:none;cursor:pointer;padding:18px 52px 18px 20px;font-weight:600;font-size:16px;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:20px;top:50%;transform:translateY(-50%);font:400 22px var(--mono);color:var(--mint);transition:transform .25s}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq details p{padding:0 20px 18px;color:var(--muted)}

/* Final */
.final{padding-top:40px}
.final-box{text-align:center;padding:clamp(36px,6vw,72px) clamp(20px,5vw,60px);position:relative;overflow:hidden;
  background:radial-gradient(600px 260px at 50% 0%,rgba(61,220,151,.18),transparent 70%),linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015))}
.final-box p{color:var(--muted);max-width:620px;margin:0 auto 28px;font-size:17px}
.final-box h2{max-width:760px;margin-inline:auto}

/* Footer */
.foot{border-top:1px solid var(--border);padding:56px 0 28px;margin-top:40px;background:rgba(0,0,0,.25)}
.foot-in{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:28px}
.foot-brand img{width:120px;height:auto;margin-bottom:14px}
.foot-brand p{color:var(--muted);font-size:14px;max-width:320px}
.foot h4{font:600 12px var(--mono);color:var(--dim);text-transform:uppercase;letter-spacing:.08em;margin-bottom:12px}
.foot li{font-size:14px;color:#B6C3CB;margin-bottom:8px}
.foot a:hover{color:var(--mint)}
.foot-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:40px;padding-top:20px;border-top:1px solid var(--border);font-size:13px;color:var(--dim)}

/* Mobile CTA bar */
.cta-bar{display:none}

/* Responsive */
@media (max-width:1080px){
  .nav{display:none}
  .nav-toggle{display:inline-flex;margin-left:auto}
  .hdr-cta{display:none}
  .nav.open{display:flex;position:absolute;top:68px;left:0;right:0;flex-direction:column;padding:12px var(--gutter) 20px;background:rgba(6,11,14,.96);backdrop-filter:blur(16px);border-bottom:1px solid var(--border)}
  .nav.open a{padding:12px}
  .nav.open .nav-cta-m{display:inline-flex;margin-top:8px;color:#fff}
  .roles{grid-template-columns:repeat(3,1fr)}
  .arch{grid-template-columns:1fr;gap:0}
  .arch-link{width:2px;height:40px;margin:6px auto;background:linear-gradient(180deg,rgba(61,220,151,.15),rgba(61,220,151,.5))}
  .arch-link::after{right:auto;left:-4px;top:auto;bottom:-3px;border:5px solid transparent;border-top:7px solid rgba(61,220,151,.7);border-bottom:0}
  .arch-link span{left:-3px;top:0;animation-name:flowv}
  .arch-col{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
  .arch-k{grid-column:1/-1}
}
@media (max-width:900px){
  .hero-in,.sec-grid,.price,.who{grid-template-columns:1fr}
  .bento .card,.bento .b-shield,.bento .b-wide{grid-column:span 3}
  .foot-in{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .live-pill{display:none}
  .brand-by{display:none}
  .bento{grid-template-columns:1fr}
  .bento .card,.bento .b-shield,.bento .b-wide{grid-column:auto}
  .ba{grid-template-columns:1fr}
  .ba-arr{transform:rotate(90deg);margin:0 auto}
  .roles,.steps,.sec-list,.sla{grid-template-columns:1fr}
  .foot-in{grid-template-columns:1fr}
  .hero-actions .btn{width:100%}
  .btn{white-space:normal;text-align:center}
  .cta-bar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:40;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(6,11,14,.92);backdrop-filter:blur(12px);border-top:1px solid var(--border);transition:transform .3s var(--ease)}
  .cta-bar .btn{width:100%}
  body.cta-visible .cta-bar{transform:translateY(110%)}
  .foot{padding-bottom:90px}
  .tabs [role=tab]{padding:8px 6px;font-size:12.5px}
  .connect{padding:14px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .rv{opacity:1;transform:none}
}

/* Product previews (console mockups) */
.feat{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,5vw,64px);align-items:center;margin-top:clamp(48px,7vw,88px)}
.sec-head+.feat{margin-top:0}
.feat.rev{grid-template-columns:1.15fr .85fr}
.feat.rev .feat-text{order:2}
.feat-n{font:600 12px var(--mono);color:var(--mint);text-transform:uppercase;letter-spacing:.08em}
.feat h3{font-size:clamp(24px,3vw,32px);font-weight:700;margin:12px 0 12px}
.feat-text>p{color:var(--muted);font-size:16.5px;margin-bottom:20px}
.ui{padding:12px;min-width:0}
.ui-tabs{display:flex;gap:4px;padding:4px;background:rgba(0,0,0,.25);border:1px solid var(--border);border-radius:12px;margin-bottom:10px;overflow-x:auto;scrollbar-width:none}
.ui-tabs [role=tab]{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:9px;font-size:13.5px;font-weight:500;color:var(--muted);white-space:nowrap;transition:background .2s,color .2s}
.ui-tabs [role=tab] svg{width:15px;height:15px}
.ui-tabs [role=tab][aria-selected=true]{background:var(--surface-2);color:var(--text);box-shadow:inset 0 0 0 1px var(--border-2)}
.ui-tabs [role=tab][aria-selected=true] svg{color:var(--mint)}
.ui-card{background:#081115;border:1px solid var(--border);border-radius:12px;overflow:hidden}
.ui-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid var(--border)}
.ui-head b{font-size:15px;display:inline-flex;align-items:center;gap:10px}
.live{display:inline-flex;align-items:center;gap:6px;font:500 11.5px var(--mono);color:var(--mint)}
.live .pulse{width:6px;height:6px}
.ui-ghost{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:#C5D1D8;padding:6px 10px;border:1px solid var(--border-2);border-radius:8px;white-space:nowrap}
.ui-ghost svg{width:14px;height:14px}
.ui-tool{display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid var(--border)}
.ui-search{flex:1;display:flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid var(--border);border-radius:8px;font-size:13px;color:var(--dim);min-width:0;white-space:nowrap;overflow:hidden}
.ui-search svg{width:14px;height:14px}
.ui-count{font-size:12.5px;color:var(--muted);white-space:nowrap}
.ui-count b{color:var(--text)}
.ui-table{width:100%;border-collapse:collapse;font-size:13.5px}
.ui-table th{text-align:left;font:500 10.5px var(--mono);color:var(--dim);text-transform:uppercase;letter-spacing:.07em;padding:9px 16px;background:rgba(255,255,255,.02);border-bottom:1px solid var(--border)}
.ui-table td{padding:10px 16px;border-bottom:1px solid var(--border);vertical-align:middle;color:#C5D1D8}
.ui-table tr:last-child td{border-bottom:0}
.ui-table .r{text-align:right}
.ui-table td b{display:block;color:var(--text);font-weight:600;font-size:13.5px}
.ui-table small{display:block;color:var(--dim);font-size:12px;margin-top:1px}
.ui-table code{font:12.5px var(--mono);color:#B6C3CB}
.ui-table tr.sel td{background:rgba(61,220,151,.06)}
.ui-table tr.exp td{background:rgba(61,220,151,.06);padding-top:0}
.ui-ledger{display:grid;gap:10px;padding:12px;border:1px solid var(--border);border-radius:10px;background:rgba(0,0,0,.25)}
.ui-k{display:block;font:500 10.5px var(--mono);color:var(--dim);text-transform:uppercase;letter-spacing:.07em;margin-bottom:4px}
.ui-ledger p{font-size:13.5px;color:var(--text);min-height:1.6em}
.ui-ledger p.caret::after{content:"";display:inline-block;width:7px;height:1em;background:var(--mint);vertical-align:-2px;margin-left:2px;animation:blink 1s steps(2) infinite}
.ui-ledger p[data-led=sent]{transition:opacity .3s}
.st{display:inline-block;font:500 11.5px var(--font);padding:3px 8px;border-radius:6px;white-space:nowrap}
.st.ok{background:var(--mint-dim);color:var(--mint)}
.st.block{background:var(--coral-dim);color:#FF8A7F}
.st.warn{background:rgba(242,184,75,.14);color:var(--warn)}
.st.off{background:rgba(255,255,255,.07);color:var(--muted)}
.ui-table td b+.st{margin-top:4px}
.ui-switch{width:34px;height:20px;border-radius:999px;background:rgba(255,255,255,.12);position:relative;transition:background .2s;vertical-align:middle}
.ui-switch::after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:#fff;transition:transform .2s var(--ease)}
.ui-switch.on{background:var(--forest-2);box-shadow:0 0 12px rgba(61,220,151,.3)}
.ui-switch.on::after{transform:translateX(14px)}
.ui-pager{display:flex;justify-content:space-between;gap:12px;padding:10px 16px;border-top:1px solid var(--border);font-size:12px;color:var(--dim)}
.ui-kpis{display:grid;grid-template-columns:1fr 1fr}
.ui-kpis>div{padding:14px 16px;border-bottom:1px solid var(--border)}
.ui-kpis>div:nth-child(odd){border-right:1px solid var(--border)}
.ui-kpis b{display:block;font:700 24px var(--font);letter-spacing:-.02em;margin:2px 0}
.ui-kpis small{font-size:12px;color:var(--dim)}
.ui-kpis small.up{color:var(--mint)}
.ui-chart{padding:14px 16px 16px}
.ui-bars{display:flex;align-items:flex-end;gap:5px;height:110px;margin-top:10px}
.ui-bars i{flex:1;height:var(--h);border-radius:4px 4px 2px 2px;background:linear-gradient(180deg,rgba(61,220,151,.35),rgba(61,220,151,.08));border-top:2px solid rgba(61,220,151,.6);transform-origin:bottom;transition:transform .6s var(--ease)}
.ui-bars i.hi{background:linear-gradient(180deg,var(--mint),var(--forest-2));border-top-color:var(--mint)}
.js .ui-card:not(.shown) .ui-bars i{transform:scaleY(.05)}
.money{font:600 13.5px var(--mono);color:var(--text)}
.of{font:12px var(--mono);color:var(--dim)}
.meter-l{display:block;height:4px;border-radius:2px;background:rgba(255,255,255,.08);margin-top:6px;overflow:hidden}
.meter-l i{display:block;height:100%;width:var(--w);background:var(--mint);border-radius:2px}
.meter-l.warn i{background:var(--warn)}
.meter-l.off i{background:var(--dim)}
.ui-note{text-align:center;font-size:12px;color:var(--dim);margin-top:10px}
.ui-card.rows-in tbody tr,.ui-card.rows-in .ui-kpis>div{animation:rowin .45s var(--ease) both;animation-delay:calc(var(--i,0) * 50ms)}
@keyframes rowin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (max-width:900px){
  .feat,.feat.rev{grid-template-columns:1fr}
  .feat.rev .feat-text{order:0}
}
@media (max-width:640px){
  .ui{padding:8px}
  .ui-table th,.ui-table td{padding:9px 10px}
  .ui-head,.ui-tool,.ui-pager{padding-left:10px;padding-right:10px}
  .ui-count{display:none}
  .hide-s{display:none}
  .ui-kpis b{font-size:20px}
  .ui-tabs [role=tab]{padding:7px 9px;font-size:12.5px}
}
@media (prefers-reduced-motion:reduce){.js .ui-card:not(.shown) .ui-bars i{transform:none}}
@media (max-width:440px){
  .ui-tabs [role=tab] svg{display:none}
  .ui-tabs [role=tab]{padding:7px 8px}
  .ui-table{font-size:12.5px}
  .ui-table th,.ui-table td{padding:8px 7px}
  .ui-table td b{font-size:12.5px}
  .ui-table code{font-size:11.5px}
  .st{font-size:10.5px;padding:2px 6px}
  .ui-card{overflow-x:auto}
}
.roles-k{margin-bottom:12px}

/* Playground, single column */
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 15px) 50%,calc(100% - 10px) 50%;background-size:5px 5px;background-repeat:no-repeat}
@media (max-width:640px){
}
.aws-li{display:inline-flex;align-items:center;gap:8px}
.aws-li img{height:18px;width:auto}
.creds-logo{height:30px;width:auto;margin-bottom:6px}

/* Playground: three-step flow */
@media (max-width:900px){
}
.tabs{scrollbar-width:none}

/* Hero trust line */
.badge img{width:26px;height:auto}
.trust{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;margin-top:22px;padding-top:18px;border-top:1px solid var(--border)}
.trust-aws{display:inline-flex;align-items:center;gap:10px;font-size:13.5px;font-weight:600;color:#DCE6EC}
.trust-aws img{width:38px;height:auto}
.trust-pilots{font-size:13.5px;color:var(--muted);max-width:420px}
.trust-pilots b{color:var(--text)}
/* Why now */
.why{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.why .card{padding:24px}
.why-note{margin-top:22px;font-size:17px;color:#DCE6EC;max-width:760px}
/* Industries with example tasks */
.inds{display:grid;gap:10px}
.inds li{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:12px;border:1px solid var(--border);background:var(--surface)}
.inds svg{width:18px;height:18px;color:var(--mint);margin-top:3px}
.inds b{display:block;font-size:15px}
.inds span{display:block;color:var(--muted);font-size:13.5px}
.works{row-gap:12px}
@media (max-width:900px){.why{grid-template-columns:1fr}}
@keyframes pop{0%{transform:scale(.8);opacity:0}100%{transform:none;opacity:1}}
@keyframes flowv{from{top:0;opacity:0}15%{opacity:1}85%{opacity:1}to{top:calc(100% - 8px);opacity:0}}
.works-list+.works-k{margin-left:6px;padding-left:18px;border-left:1px solid var(--border-2)}
@media (max-width:640px){.works-list+.works-k{margin-left:0;padding-left:0;border-left:0;width:100%}}
.trust{gap:6px 10px}
.trust-aws+.trust-pilots::before{content:"·";margin-right:10px;color:var(--dim)}
.term{min-height:0}
.works-list li{display:inline-flex;align-items:center;gap:7px}
.works-list .wl{width:16px;height:16px;flex:none;opacity:.9}
.works{flex-direction:column;align-items:flex-start;gap:14px}
.works-row{display:flex;align-items:center;gap:10px 18px;flex-wrap:wrap}
.works-row .works-k{min-width:92px;margin:0;padding:0;border:0}
@media (max-width:1080px){.why{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.why{grid-template-columns:1fr}}
.foot-bottom a{color:var(--muted)}
.foot-bottom a:hover{color:var(--mint)}
@media (max-width:1080px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.steps{grid-template-columns:1fr}}