/* XPanel One product site
   The brand is the logo: black, one electric blue, white, and glow. Everything
   here is built from those three so the page and the mark look like one thing. */

:root{
  --bg:#04060b;
  --bg-2:#070b13;
  --card:#0b1119;
  --card-2:#0e1520;
  --line:rgba(255,255,255,.085);
  --line-2:rgba(255,255,255,.14);
  --txt:#e9eef7;
  --dim:#8b98ab;
  --dim-2:#5f6b7d;
  --acc:#0b9dff;
  --acc-2:#5ec2ff;
  --acc-dim:rgba(11,157,255,.14);
  --ok:#2ec4b6;
  --r:14px;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:'Space Grotesk',system-ui,-apple-system,Segoe UI,sans-serif;
  --max:1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{
  margin:0;background:var(--bg);color:var(--txt);font-family:var(--sans);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
code,.mono{font-family:var(--mono)}
h1,h2,h3{line-height:1.12;letter-spacing:-.025em;margin:0;font-weight:600}
p{margin:0}

/* ------------------------------------------------------------ backdrop -- */
.bg-grid{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:58px 58px;
  mask-image:radial-gradient(ellipse 90% 60% at 50% 0%,#000 30%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 90% 60% at 50% 0%,#000 30%,transparent 78%);
}
.bg-glow{
  position:fixed;top:-380px;left:50%;transform:translateX(-50%);
  width:1200px;height:780px;z-index:0;pointer-events:none;
  background:radial-gradient(closest-side,rgba(11,157,255,.20),transparent 72%);
  filter:blur(30px);
}

/* ----------------------------------------------------------------- nav -- */
.nav{
  position:sticky;top:0;z-index:60;
  display:flex;align-items:center;gap:28px;
  max-width:var(--max);margin:0 auto;padding:18px 26px;
  transition:.25s ease;
}
.nav.stuck{
  background:rgba(4,6,11,.82);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);max-width:none;padding-inline:calc(50vw - var(--max)/2 + 26px);
}
/* No drop-shadow here. The mark is already drawn with its own glow, and a
   second one on top of it is what turns the wordmark to mush at header size. */
.brand img{display:block}
.nav-links{display:flex;gap:26px;margin-left:auto;font-size:14.5px;color:var(--dim)}
.nav-links a{transition:color .18s}
.nav-links a:hover{color:var(--txt)}
.nav-cta{display:flex;gap:10px;align-items:center}

/* --------------------------------------------------------------- btns -- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:10px 18px;border-radius:11px;font-size:14.5px;font-weight:500;
  border:1px solid transparent;cursor:pointer;transition:.2s ease;font-family:inherit;
  white-space:nowrap;
}
.btn-lg{padding:14px 26px;font-size:16px;border-radius:13px}
.btn-block{width:100%}
.btn-primary{
  background:linear-gradient(180deg,var(--acc-2),var(--acc));color:#02121f;font-weight:600;
  box-shadow:0 0 0 1px rgba(255,255,255,.14) inset,0 10px 30px -8px rgba(11,157,255,.65);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(255,255,255,.2) inset,0 16px 40px -8px rgba(11,157,255,.8)}
.btn-ghost{border-color:var(--line-2);color:var(--txt);background:rgba(255,255,255,.02)}
.btn-ghost:hover{border-color:var(--acc);color:var(--acc-2);background:var(--acc-dim)}
.btn[disabled]{opacity:.5;pointer-events:none}

/* ---------------------------------------------------------------- hero -- */
.hero{
  position:relative;z-index:1;max-width:var(--max);margin:0 auto;
  padding:56px 26px 40px;
  display:grid;grid-template-columns:1.02fr 1fr;gap:56px;align-items:center;
}
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  padding:6px 14px;border:1px solid var(--line-2);border-radius:99px;
  font-size:12.5px;color:var(--dim);font-family:var(--mono);margin-bottom:26px;
}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--ok);box-shadow:0 0 10px var(--ok)}
.hero h1{font-size:clamp(38px,5.1vw,62px);font-weight:700}
.grad{
  background:linear-gradient(100deg,var(--acc-2),var(--acc) 55%,#a9dcff);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 26px rgba(11,157,255,.3));
}
.lede{color:var(--dim);font-size:17.5px;margin-top:22px;max-width:56ch}
.lede.sm{font-size:16px}
.hero-cta{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap}
.hero-facts{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:11px;font-size:14.5px;color:var(--dim)}
.hero-facts li{display:flex;align-items:center;gap:11px}
.tick{width:17px;height:17px;flex:none;color:var(--acc);filter:drop-shadow(0 0 8px rgba(11,157,255,.6))}

/* --------------------------------------------------- the panel mock ----- */
.hero-panel{
  border:1px solid var(--line);border-radius:18px;background:linear-gradient(180deg,var(--card-2),var(--card));
  box-shadow:0 40px 90px -30px #000,0 0 0 1px rgba(11,157,255,.08),0 0 70px -20px rgba(11,157,255,.22);
  overflow:hidden;
}
.panel-chrome{
  display:flex;align-items:center;gap:14px;padding:13px 16px;
  border-bottom:1px solid var(--line);background:rgba(255,255,255,.015);
}
.chrome-dots{display:flex;gap:6px}
.chrome-dots i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.14)}
.chrome-title{font-size:13px;color:var(--dim);font-family:var(--mono)}
.chrome-title .sep{color:var(--dim-2);margin:0 3px}
.chrome-live{
  margin-left:auto;display:flex;align-items:center;gap:7px;
  font-size:11.5px;font-family:var(--mono);color:var(--ok);text-transform:uppercase;letter-spacing:.09em;
}
.pulse{width:7px;height:7px;border-radius:50%;background:var(--ok);animation:pulse 1.9s infinite}
@keyframes pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(46,196,182,.5)}50%{opacity:.55;box-shadow:0 0 0 6px rgba(46,196,182,0)}}

.panel-stats{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line)}
.panel-stats div{padding:15px 8px;text-align:center;border-right:1px solid var(--line)}
.panel-stats div:last-child{border-right:0}
.panel-stats b{display:block;font-size:23px;font-weight:600;font-family:var(--mono);color:var(--txt)}
.panel-stats span{font-size:10.5px;color:var(--dim-2);text-transform:uppercase;letter-spacing:.075em}

.wall-rows{padding:8px 6px;max-height:330px;overflow:hidden}
.wrow{display:grid;grid-template-columns:26px 1fr auto;gap:12px;align-items:center;padding:9px 12px;border-radius:9px;transition:background .2s}
.wrow:hover{background:rgba(255,255,255,.028)}
.wlogo{
  width:26px;height:26px;border-radius:7px;display:grid;place-items:center;
  font-family:var(--mono);font-size:10px;font-weight:500;color:#02121f;
}
.wmain{min-width:0}
.wname{font-size:13.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wep{font-size:11px;color:var(--dim-2);font-family:var(--mono);margin-top:2px}
.wbar{height:3px;border-radius:2px;background:rgba(255,255,255,.07);margin-top:7px;overflow:hidden}
.wbar i{display:block;height:100%;background:linear-gradient(90deg,var(--acc),var(--acc-2));border-radius:2px;box-shadow:0 0 10px rgba(11,157,255,.7)}
.wtime{font-family:var(--mono);font-size:11.5px;color:var(--dim);white-space:nowrap}
.panel-foot{
  display:flex;justify-content:space-between;padding:11px 18px;
  border-top:1px solid var(--line);font-size:11.5px;color:var(--dim-2);background:rgba(0,0,0,.25);
}

/* ------------------------------------------------------------ marquee -- */
.marquee{
  position:relative;z-index:1;overflow:hidden;border-block:1px solid var(--line);
  padding:15px 0;margin-top:34px;background:rgba(255,255,255,.012);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.marquee-track{display:flex;align-items:center;gap:22px;width:max-content;animation:slide 46s linear infinite}
.marquee-track span{font-size:13.5px;color:var(--dim);white-space:nowrap;font-family:var(--mono)}
.marquee-track i{width:4px;height:4px;border-radius:50%;background:var(--acc);opacity:.55;flex:none}
@keyframes slide{to{transform:translateX(-50%)}}

/* --------------------------------------------------------- sections ----- */
.section{position:relative;z-index:1;max-width:var(--max);margin:0 auto;padding:96px 26px}
.section.band{
  max-width:none;padding-inline:calc(50vw - var(--max)/2 + 26px);
  background:linear-gradient(180deg,transparent,rgba(11,157,255,.035),transparent);
  border-block:1px solid var(--line);
}
.sec-head{max-width:660px;margin-bottom:52px}
.kicker{
  display:block;font-family:var(--mono);font-size:12px;color:var(--acc);
  text-transform:uppercase;letter-spacing:.14em;margin-bottom:14px;
}
.sec-head h2,.grid-2 h2,.trial-left h2,.buy-box h2{font-size:clamp(27px,3.5vw,41px)}
.sec-head p{color:var(--dim);margin-top:16px;font-size:17px}
.note{color:var(--dim-2);font-size:14.5px;margin-top:26px;font-family:var(--mono)}

/* ------------------------------------------------------------- cards --- */
.cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{
  border:1px solid var(--line);border-radius:var(--r);padding:26px;
  background:linear-gradient(180deg,var(--card-2),var(--card));transition:.25s ease;
}
.card:hover{border-color:rgba(11,157,255,.4);transform:translateY(-4px);box-shadow:0 24px 50px -22px rgba(11,157,255,.35)}
.ico{
  width:42px;height:42px;border-radius:11px;display:grid;place-items:center;margin-bottom:18px;
  background:var(--acc-dim);border:1px solid rgba(11,157,255,.28);color:var(--acc-2);
}
.ico svg{width:21px;height:21px}
.card h3{font-size:18.5px;margin-bottom:10px}
.card p{color:var(--dim);font-size:14.8px}
.card code,.ticks code,.card b{color:var(--acc-2)}
.card code,.ticks code{font-size:12.8px;background:rgba(11,157,255,.1);padding:1px 6px;border-radius:5px}
.card b{font-weight:600}

.builder-strip{
  margin-top:22px;border:1px solid var(--line);border-radius:var(--r);padding:34px;
  background:linear-gradient(115deg,rgba(11,157,255,.07),transparent 62%),var(--card);
  display:grid;grid-template-columns:1.25fr 1fr;gap:44px;align-items:center;
}
.builder-strip h3{font-size:25px;margin:6px 0 14px}
.builder-strip p{color:var(--dim);font-size:15.5px}
.builder-vis{display:grid;gap:9px}
.bpick{display:flex;align-items:center;gap:12px;opacity:0;animation:bin .5s ease forwards;animation-delay:var(--d)}
@keyframes bin{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
.bbox{
  width:19px;height:19px;flex:none;border-radius:5px;display:grid;place-items:center;
  background:var(--acc);color:#02121f;box-shadow:0 0 12px rgba(11,157,255,.55);
}
.bbox svg{width:12px;height:12px}
.bbar{height:8px;border-radius:4px;background:linear-gradient(90deg,rgba(11,157,255,.5),rgba(11,157,255,.1))}
.bout{margin-top:8px;font-size:13px;color:var(--acc-2);opacity:0;animation:bin .5s ease .82s forwards}

.cards-4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:42px}
.mini{border:1px solid var(--line);border-radius:11px;padding:19px;background:var(--card);transition:.22s}
.mini:hover{border-color:rgba(11,157,255,.35);background:var(--card-2)}
.mini b{display:block;font-size:15px;margin-bottom:7px}
.mini p{color:var(--dim);font-size:13.6px;line-height:1.55}

/* ----------------------------------------------------------- timeline -- */
.tl-demo{display:grid;grid-template-columns:1fr auto 1fr;gap:26px;align-items:center;margin-bottom:52px}
.tl-screen{border:1px solid var(--line);border-radius:var(--r);padding:18px;background:var(--card)}
.tl-label{font-size:11.5px;color:var(--dim-2);display:flex;justify-content:space-between;gap:12px;margin-bottom:12px}
.tl-label span{color:var(--acc)}
.tl-frame{
  position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;
  background:linear-gradient(135deg,#0d1826,#050a12);border:1px solid var(--line);
  display:grid;place-items:center;
}
.tl-fill{position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(11,157,255,.34),transparent 68%);transition:opacity .3s}
.tl-ep{position:relative;font-size:19px;color:var(--txt);letter-spacing:.06em;text-shadow:0 0 24px rgba(11,157,255,.9)}
.tl-mid{display:grid;justify-items:center;gap:10px}
.tl-eq{display:flex;gap:4px;align-items:flex-end;height:30px}
.tl-eq span{width:4px;background:var(--acc);border-radius:2px;animation:eq 1.1s ease-in-out infinite}
.tl-eq span:nth-child(1){height:40%;animation-delay:0s}
.tl-eq span:nth-child(2){height:100%;animation-delay:.18s}
.tl-eq span:nth-child(3){height:62%;animation-delay:.36s}
@keyframes eq{0%,100%{transform:scaleY(.45)}50%{transform:scaleY(1)}}
.tl-same{font-size:11px;color:var(--ok);text-transform:uppercase;letter-spacing:.12em}

.modes{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.mode{border:1px solid var(--line);border-radius:11px;padding:18px;background:var(--card);display:grid;gap:10px}
.mode.on{border-color:rgba(11,157,255,.45);background:linear-gradient(180deg,rgba(11,157,255,.09),var(--card))}
.mode .num{
  width:24px;height:24px;border-radius:7px;display:grid;place-items:center;font-size:11.5px;
  background:rgba(255,255,255,.05);color:var(--dim);
}
.mode.on .num{background:var(--acc);color:#02121f}
.mode b{font-size:14.5px}
.mode p{color:var(--dim);font-size:13px;margin-top:5px;line-height:1.5}

/* --------------------------------------------------------- grid-2 ------ */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.ticks{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:13px}
.ticks li{position:relative;padding-left:28px;color:var(--dim);font-size:15.3px}
.ticks.sm li{font-size:14.3px}
.ticks li:before{
  content:'';position:absolute;left:0;top:.55em;width:7px;height:7px;border-radius:50%;
  background:var(--acc);box-shadow:0 0 11px rgba(11,157,255,.85);
}

.code-card,.term{
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#05080e;
  box-shadow:0 30px 70px -30px #000;
}
.code-head,.term-head{
  display:flex;align-items:center;gap:12px;padding:11px 15px;
  border-bottom:1px solid var(--line);font-size:12.5px;color:var(--dim);background:rgba(255,255,255,.02);
}
.code-ok{margin-left:auto;color:var(--ok)}
.term-head span{color:var(--dim-2)}
.code-card pre,.term pre{margin:0;padding:20px;font-size:12.9px;line-height:1.75;overflow-x:auto;color:var(--dim)}
.code-card code{color:#a9c6e2}
.term .p{color:var(--acc);user-select:none}
.term .c{color:var(--dim-2)}
.term .o{color:var(--dim)}
.term .hl{color:var(--acc-2);font-weight:500}

.req{display:grid;gap:11px;margin-top:28px}
.req div{
  display:flex;gap:14px;align-items:baseline;font-size:14.6px;color:var(--dim);
  padding-bottom:11px;border-bottom:1px solid var(--line);
}
.req span{color:var(--acc);font-size:11.5px;text-transform:uppercase;letter-spacing:.1em;width:66px;flex:none}

/* --------------------------------------------------------- the arch ---- */
.arch{margin-bottom:20px}
.arch-master{display:flex;justify-content:center}
.node{
  border:1px solid var(--line);border-radius:12px;padding:16px 20px;background:var(--card);
  display:grid;gap:5px;min-width:190px;text-align:center;
}
.node.master{border-color:rgba(11,157,255,.45);box-shadow:0 0 44px -14px rgba(11,157,255,.55);background:linear-gradient(180deg,rgba(11,157,255,.1),var(--card))}
.node-kind{font-size:10px;text-transform:uppercase;letter-spacing:.13em;color:var(--dim-2)}
.node.master .node-kind{color:var(--acc)}
.node b{font-size:15px}
.node-loc{font-size:11.5px;color:var(--dim-2)}
.node-bars{display:flex;gap:4px;justify-content:center;margin-top:8px}
.node-bars i{
  height:4px;width:var(--w);max-width:100%;flex:1;border-radius:2px;
  background:linear-gradient(90deg,var(--acc),rgba(11,157,255,.2));
}
.arch-lines{color:var(--line-2);height:70px}
.arch-lines svg{width:100%;height:100%}
.arch-nodes{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}

/* ---------------------------------------------------------- the trial -- */
.trial-sec{padding-top:40px}
.trial-box{
  border:1px solid rgba(11,157,255,.3);border-radius:20px;overflow:hidden;
  display:grid;grid-template-columns:1fr 1fr;
  background:linear-gradient(125deg,rgba(11,157,255,.11),transparent 55%),var(--card);
  box-shadow:0 40px 100px -40px rgba(11,157,255,.5);
}
.trial-left{padding:44px}
.trial-left p{color:var(--dim);margin-top:16px;font-size:16px}
.trial-left .ticks{margin-top:24px}
.trial-proof{
  margin-top:26px;font-size:12.5px;color:var(--dim-2);
  border-top:1px solid var(--line);padding-top:18px;
}
.trial-proof b{color:var(--acc-2);font-size:16px}

.trial-form{padding:44px;background:rgba(0,0,0,.3);border-left:1px solid var(--line);display:grid;gap:16px;align-content:start}
.trial-form label{display:grid;gap:7px;font-size:13.2px;color:var(--dim);font-weight:500}
.trial-form .opt{color:var(--dim-2);font-weight:400}
.trial-form input[type=text],.trial-form textarea{
  background:rgba(255,255,255,.035);border:1px solid var(--line-2);border-radius:10px;
  padding:12px 14px;color:var(--txt);font-family:inherit;font-size:14.6px;width:100%;
  transition:.18s;resize:vertical;
}
.trial-form input:focus,.trial-form textarea:focus{
  outline:0;border-color:var(--acc);background:rgba(11,157,255,.07);box-shadow:0 0 0 3px rgba(11,157,255,.14);
}
.trial-form input::placeholder,.trial-form textarea::placeholder{color:var(--dim-2)}
.tf-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tf-choice{display:grid;gap:9px}
.tf-legend{font-size:13.2px;color:var(--dim);font-weight:500}
.seg{display:flex;gap:8px}
.seg-btn{
  flex:1;display:flex;align-items:center;justify-content:center;gap:8px;
  padding:11px;border-radius:10px;border:1px solid var(--line-2);background:rgba(255,255,255,.02);
  color:var(--dim);font-family:inherit;font-size:14px;cursor:pointer;transition:.18s;
}
.seg-btn:hover{border-color:var(--line-2);color:var(--txt)}
.seg-btn.on{border-color:var(--acc);background:var(--acc-dim);color:var(--acc-2)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.tf-fine{font-size:12px;color:var(--dim-2);text-align:center;line-height:1.5}

/* ------------------------------------------------------------- buy ----- */
.buy{padding-top:20px}
.buy-box{
  border:1px solid var(--line);border-radius:20px;padding:60px 40px;text-align:center;
  background:radial-gradient(ellipse 70% 130% at 50% 0%,rgba(11,157,255,.13),transparent 70%),var(--card);
}
.buy-box p{color:var(--dim);margin:18px auto 30px;max-width:52ch;font-size:16.5px}

/* ------------------------------------------------------------ footer --- */
.foot{
  position:relative;z-index:1;border-top:1px solid var(--line);margin-top:60px;
  max-width:var(--max);margin-inline:auto;padding:36px 26px;
  display:flex;justify-content:space-between;align-items:center;gap:26px;flex-wrap:wrap;
}
.foot p{color:var(--dim-2);font-size:12.5px;margin-top:12px}
.foot-links{display:flex;gap:24px;font-size:14px;color:var(--dim)}
.foot-links a:hover{color:var(--acc-2)}

/* ------------------------------------------------------------- modal --- */
.modal{
  position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:22px;
  background:rgba(2,4,8,.82);backdrop-filter:blur(8px);animation:fade .2s ease;
}
/* The dialog carries the hidden attribute until there is something to show, and
   a bare display:grid quietly beats it: the browser's own rule for [hidden] is
   display:none, but it loses to any class that sets display. Without this line
   the overlay sits over the whole page from the first paint, dimmed and
   blurred, and the site looks broken before anybody has clicked anything. */
.modal[hidden]{display:none}
@keyframes fade{from{opacity:0}}
.modal-card{
  position:relative;width:min(620px,100%);max-height:88vh;overflow:auto;
  border:1px solid rgba(11,157,255,.3);border-radius:18px;padding:38px;
  background:linear-gradient(160deg,var(--card-2),var(--card));
  box-shadow:0 40px 110px -30px #000,0 0 70px -24px rgba(11,157,255,.45);
  animation:pop .28s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.97)}}
.modal-x{
  position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:9px;
  border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--dim);
  cursor:pointer;display:grid;place-items:center;transition:.18s;
}
.modal-x:hover{color:var(--txt);border-color:var(--line-2)}
.m-ico{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;margin-bottom:20px;
  background:var(--acc-dim);border:1px solid rgba(11,157,255,.3);color:var(--acc-2)}
.m-ico svg{width:26px;height:26px}
.modal h3{font-size:24px;margin-bottom:12px}
.modal p{color:var(--dim);font-size:15px}
.m-key{
  margin:22px 0;padding:18px;border-radius:12px;text-align:center;
  border:1px dashed rgba(11,157,255,.45);background:rgba(11,157,255,.07);
}
.m-key span{display:block;font-size:11px;color:var(--dim-2);text-transform:uppercase;letter-spacing:.13em;margin-bottom:9px}
.m-key b{font-family:var(--mono);font-size:22px;color:var(--acc-2);letter-spacing:.06em;word-break:break-all}
.m-cmd{
  position:relative;margin:18px 0;border-radius:11px;border:1px solid var(--line);
  background:#05080e;padding:16px 52px 16px 16px;
}
.m-cmd code{font-size:12.4px;color:#a9c6e2;word-break:break-all;line-height:1.7;display:block}
.m-copy{
  position:absolute;top:11px;right:11px;width:32px;height:32px;border-radius:8px;
  border:1px solid var(--line-2);background:rgba(255,255,255,.04);color:var(--dim);
  cursor:pointer;display:grid;place-items:center;transition:.18s;
}
.m-copy:hover{color:var(--acc-2);border-color:var(--acc)}
.m-copy.done{color:var(--ok);border-color:var(--ok)}
.m-steps{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:14px;counter-reset:s}
.m-steps li{
  position:relative;padding-left:38px;color:var(--dim);font-size:14.4px;counter-increment:s;
}
.m-steps li:before{
  content:counter(s);position:absolute;left:0;top:-1px;width:25px;height:25px;border-radius:8px;
  display:grid;place-items:center;background:rgba(11,157,255,.15);color:var(--acc-2);
  font-family:var(--mono);font-size:12px;border:1px solid rgba(11,157,255,.3);
}
.m-err{color:#ff8088}
.m-actions{display:flex;gap:10px;margin-top:26px;flex-wrap:wrap}

/* ------------------------------------------------------------ reveal --- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1;transform:none}

/* ----------------------------------------------------------- responsive - */
@media(max-width:1000px){
  .hero{grid-template-columns:1fr;gap:44px;padding-top:34px}
  .grid-2,.builder-strip,.trial-box{grid-template-columns:1fr;gap:32px}
  .cards-3,.arch-nodes{grid-template-columns:1fr}
  .cards-4{grid-template-columns:repeat(2,1fr)}
  .modes{grid-template-columns:repeat(2,1fr)}
  .tl-demo{grid-template-columns:1fr}
  .tl-mid{transform:rotate(90deg);margin:-8px 0}
  .nav-links{display:none}
  .trial-form{border-left:0;border-top:1px solid var(--line)}
  .trial-left,.trial-form{padding:30px}
  .section{padding:64px 22px}
  .section.band{padding-inline:22px}
  .nav.stuck{padding-inline:22px}
}
@media(max-width:600px){
  .panel-stats{grid-template-columns:repeat(2,1fr)}
  .panel-stats div:nth-child(2){border-right:0}
  .cards-4,.modes,.tf-row{grid-template-columns:1fr}
  .nav-cta .btn-ghost{display:none}
  .foot{flex-direction:column;align-items:flex-start}
  .modal-card{padding:26px}
  .m-key b{font-size:17px}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
  .reveal{opacity:1;transform:none}
}