/* Shared site styles.
   Extracted verbatim from index.html so the new pages are the SAME site, not a
   redesign. The chrome partials (header/footer) style themselves but read the
   palette from here — a page that carries the chrome must load this file or the
   nav renders with undefined colors.

   Page-specific rules stay in the page's own <style> block. */

:root{
  --bg:#080b11; --bg2:#0b0f17; --card:#0e1420; --card2:#121a28; --line:#1e293b;
  --txt:#e7ebf2; --mut:#94a3b8; --dim:#64748b;
  --blue:#3b82f6; --blue2:#60a5fa; --red:#ef4444; --red2:#f43f5e; --ok:#22c55e;
  --grad:linear-gradient(100deg,var(--blue),var(--red2));
  --maxw:1140px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);color:var(--txt);line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
h1,h2,h3{line-height:1.1;margin:0;letter-spacing:-.02em}
img,video{max-width:100%}
/* [hidden] is a UA-stylesheet rule and loses to any author rule that sets display.
   Every layout class below sets display, so without this an empty hidden block
   still renders. Learned the hard way on watch.html. */
[hidden]{display:none!important}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px;width:100%}
.accent{color:var(--blue2)}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:9px;padding:10px 18px;font-size:14.5px;
  font-weight:600;cursor:pointer;border:1px solid transparent;white-space:nowrap}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 6px 20px rgba(59,130,246,.3)}
.btn-primary:hover{filter:brightness(1.08)}
.btn-ghost{border-color:var(--line);color:var(--txt)}
.btn-ghost:hover{border-color:var(--blue)}
.btn-lg{padding:13px 24px;font-size:16px}
.btn:focus-visible{outline:2px solid var(--blue2);outline-offset:2px}

/* sections */
section{padding:74px 0}
.sec-head{text-align:center;max-width:680px;margin:0 auto 46px}
.kicker{color:var(--red2);font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase}
.sec-head h2{font-size:clamp(27px,3.4vw,38px);font-weight:800;margin:12px 0;text-wrap:balance}
.sec-head p{color:var(--mut);font-size:16.5px;margin:0}
.band{background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

.wedge{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg2)}
.wedge .wrap{padding-top:30px;padding-bottom:30px;text-align:center}
.wedge p{margin:0;font-size:clamp(18px,2.2vw,24px);font-weight:600}

/* page hero (no video frame — that lives on the homepage) */
.phero{position:relative;overflow:hidden;padding:66px 0 52px;text-align:center}
.phero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(60% 50% at 78% 0%,rgba(244,63,94,.14),transparent 60%),
    radial-gradient(55% 50% at 12% 0%,rgba(59,130,246,.18),transparent 60%)}
.phero h1{font-size:clamp(31px,4.4vw,50px);font-weight:800;max-width:21ch;margin:14px auto 0;text-wrap:balance}
.phero .lead{color:var(--mut);font-size:clamp(16px,1.6vw,19px);margin:20px auto 28px;max-width:62ch}
.phero .cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.phero .note{margin-top:16px;font-size:13px;color:var(--dim)}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mut);border:1px solid var(--line);border-radius:999px;padding:6px 14px}
.eyebrow .live{width:7px;height:7px;border-radius:50%;background:var(--red);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(239,68,68,.55)}70%{box-shadow:0 0 0 9px rgba(239,68,68,0)}100%{box-shadow:0 0 0 0 rgba(239,68,68,0)}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* cards */
.grid{display:grid;gap:18px}
.cols-2{grid-template-columns:repeat(2,1fr)}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-4{grid-template-columns:repeat(4,1fr)}
.feature{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:24px;
  transition:border-color .2s,transform .2s}
.feature:hover{border-color:#2b3b55;transform:translateY(-3px)}
.ficon{width:42px;height:42px;border-radius:10px;display:grid;place-items:center;font-size:20px;margin-bottom:14px;
  background:rgba(59,130,246,.12);border:1px solid rgba(59,130,246,.25)}
.feature.red .ficon{background:rgba(244,63,94,.12);border-color:rgba(244,63,94,.28)}
.feature h3{font-size:17.5px;margin-bottom:7px}
.feature p{color:var(--mut);font-size:14.5px;margin:0}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;counter-reset:step}
.step{position:relative;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:26px 24px}
.step .n{counter-increment:step;font-size:13px;font-weight:800;color:#fff;width:30px;height:30px;border-radius:8px;
  background:var(--grad);display:grid;place-items:center;margin-bottom:14px}
.step .n::before{content:counter(step)}
.step h3{font-size:18px;margin-bottom:7px}
.step p{color:var(--mut);font-size:14.5px;margin:0}

/* specs */
.spec-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:14px;overflow:hidden}
.spec{background:var(--bg2);padding:22px 24px}
.spec dt{color:var(--dim);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px}
.spec dd{margin:0;font-size:16px;font-weight:600}

/* showcase tiles */
.showcase{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.shot{position:relative;aspect-ratio:16/9;border-radius:12px;border:1px solid var(--line);overflow:hidden;
  background:linear-gradient(160deg,#0f1626,#0a0e16)}
.shot video,.shot img{width:100%;height:100%;object-fit:cover;display:block}
.shot .cap{position:absolute;left:0;right:0;bottom:0;padding:22px 12px 9px;font-size:12.5px;font-weight:600;
  color:#e7ebf2;background:linear-gradient(to top,rgba(6,9,14,.92),transparent)}
.shot.empty{border-style:dashed;border-color:#273347;display:grid;place-items:center;color:var(--dim);
  font-size:13px;text-align:center;padding:14px}

/* accent band (managed service / partner pitch) */
.managed{position:relative;overflow:hidden;border-radius:18px;border:1px solid var(--line);
  background:linear-gradient(120deg,#11192a,#0c0f17);padding:40px}
.managed::before{content:"";position:absolute;right:-60px;top:-60px;width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle,rgba(244,63,94,.22),transparent 60%)}
.managed-grid{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;position:relative}
.managed h2{font-size:clamp(24px,3vw,32px);font-weight:800;margin-bottom:10px}
.managed p{color:var(--mut);margin:0;max-width:560px}
.price-pill{font-size:14px;color:var(--mut);margin-top:10px}
.price-pill b{color:var(--txt);font-size:22px}

/* final cta */
.cta-final{text-align:center}
.cta-final h2{font-size:clamp(28px,3.6vw,42px);font-weight:800;text-wrap:balance}
.cta-final p{color:var(--mut);font-size:17px;margin:14px auto 26px;max-width:520px}

/* main fills the space so the footer sits at the bottom on short pages */
main{flex:1 0 auto}

@media(max-width:880px){
  .cols-2,.cols-3,.cols-4,.steps,.spec-grid,.showcase{grid-template-columns:1fr}
}
@media(max-width:560px){ .spec-grid{grid-template-columns:1fr} }

/* plain prose block — the "straight talk" sections that are argument, not features */
.plain{max-width:66ch;margin:0 auto;color:var(--mut);font-size:16px;line-height:1.65}
.plain p{margin:0 0 16px}
.plain p:last-child{margin-bottom:0}
.plain b{color:var(--txt)}