/* Sovereign AI Shield — site styles.
   Palette taken from the console itself so the site and the tool are one object.
   Nothing here loads from another host: see fonts/fonts.css. */
@import url('../fonts/fonts.css');

:root{
  --navy:#0a3161; --red:#b31942; --white:#ffffff; --tint:#f4f7fc; --rule:#dde3ec;
  --ink:#0d1524; --ink-2:#4a5768; --ink-3:#7a869a;
  --bg:var(--white); --surface:var(--white); --surface-2:var(--tint);
  --ok:#116149; --ok-bg:#e6f4ee;
  --warn:#8a5a00; --warn-bg:#fdf3e0;
  --alert:#9a4a00; --alert-bg:#fbeee2;
  --stop:var(--red); --stop-bg:#fbe9ee;
  --shadow:0 1px 2px rgba(10,49,97,.06), 0 8px 24px rgba(10,49,97,.06);
  --display:'Archivo',system-ui,-apple-system,sans-serif;
  --body:'IBM Plex Sans',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace;
  --wrap:1180px;
}
html[data-theme="dark"]{
  --white:#0e1520; --tint:#151f2e; --rule:#2a374a;
  --ink:#e9eef6; --ink-2:#a9b6c8; --ink-3:#8b98ac;
  --navy:#7ea6e0; --red:#ff6f8d;
  --bg:#0b111a; --surface:#0e1520; --surface-2:#131c29;
  --ok:#5fd4a8; --ok-bg:#0f2a22;
  --warn:#e6b45c; --warn-bg:#2c2213;
  --alert:#f0a06a; --alert-bg:#2e1e12;
  --stop:#ff6f8d; --stop-bg:#2e1320;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg,video{max-width:100%}
a{color:var(--navy)}
h1,h2,h3,h4{font-family:var(--display);letter-spacing:-.02em;line-height:1.12;margin:0}
:focus-visible{outline:3px solid var(--red);outline-offset:3px;border-radius:2px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.mono{font-family:var(--mono)}

/* ---------- masthead ---------- */
.masthead{border-bottom:2px solid var(--navy);background:var(--surface);position:sticky;top:0;z-index:60}
.mast-in{max-width:var(--wrap);margin:0 auto;padding:12px 24px;display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.mark{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit;min-width:0}
.mark h1{font-size:16px;font-weight:800;text-transform:uppercase;letter-spacing:-.01em}
.mark p{margin:1px 0 0;font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.mast-nav{margin-left:auto;display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.mast-nav a{font-size:13.5px;text-decoration:none;color:var(--ink-2);padding:7px 10px;border-radius:3px}
.mast-nav a:hover{background:var(--surface-2);color:var(--ink)}
.mast-nav a[aria-current="page"]{color:var(--ink);font-weight:600;box-shadow:inset 0 -2px 0 var(--red)}
.btn{display:inline-block;padding:10px 16px;border:1px solid var(--rule);background:var(--surface);
  color:var(--ink);border-radius:3px;text-decoration:none;font-size:14px;font-weight:500;cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.btn-solid{background:var(--navy);border-color:var(--navy);color:#fff}
html[data-theme="dark"] .btn-solid{color:#0b111a}
.btn-ghost{background:transparent;border-color:rgba(255,255,255,.5);color:#fff}
.btn-sm{padding:6px 11px;font-size:12.5px}

/* ---------- hero ---------- */
.hero{position:relative;min-height:clamp(520px,78vh,760px);display:grid;align-items:center;
  overflow:hidden;background:#061626;isolation:isolate}
.hero video,.hero .heroimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero video{animation:heroDrift 44s ease-in-out infinite alternate}
@keyframes heroDrift{from{transform:scale(1.05)}to{transform:scale(1.15)}}
/* Scrim polarity follows the copy: light type here, so the ground goes down.
   Stronger on the left where the words are, because that is where it has to work. */
.hero::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,rgba(4,12,22,.93) 0%,rgba(4,12,22,.86) 38%,rgba(4,12,22,.62) 66%,rgba(4,12,22,.5) 100%)}
.hero-in{position:relative;z-index:2;padding:76px 0}
.kicker{font-family:var(--mono);font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;
  color:#c8d6ea;margin:0 0 18px}
.kicker b{color:#fff;font-weight:600}
.hero h2{color:#fff;font-size:clamp(30px,4.6vw,58px);font-weight:800;max-width:19ch;text-wrap:balance}
.hero p.lede{color:#e4ecf7;font-size:clamp(16px,1.5vw,19px);max-width:60ch;margin:22px 0 0}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.hero .assure{margin:26px 0 0;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;
  color:#bccbdf;text-transform:uppercase}

/* full-bleed band with a loop behind it */
.band{position:relative;overflow:hidden;isolation:isolate}
.band video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.band .band-in{position:relative;z-index:2;padding:88px 0}
.band-dark::after{content:"";position:absolute;inset:0;z-index:1;background:rgba(4,10,20,.82)}
.band-dark h2,.band-dark h3{color:#fff}
.band-dark p,.band-dark li{color:#dbe4f1}
/* Light type would lose against cloud, so this band inverts: dark type, light scrim. */
.band-light::after{content:"";position:absolute;inset:0;z-index:1;background:rgba(244,247,252,.9)}
.band-light h2{color:var(--navy)}
.band-light p{color:var(--ink-2)}

/* ---------- sections ---------- */
section{padding:76px 0}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--red);margin:0 0 14px;font-weight:600}
h2.big{font-size:clamp(24px,3vw,38px);max-width:24ch;text-wrap:balance}
.sub{color:var(--ink-2);font-size:17px;max-width:68ch;margin:18px 0 0}
.grid{display:grid;gap:18px;margin-top:38px}
.g2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(232px,1fr))}
.card{background:var(--surface);border:1px solid var(--rule);border-radius:4px;padding:24px;box-shadow:var(--shadow)}
.card h3{font-size:18px;margin-bottom:10px}
.card p{color:var(--ink-2);font-size:14.5px;margin:0 0 10px}
.card .where{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:20px;font-size:11.5px;
  font-weight:600;border:1px solid transparent}
.p-ok{background:var(--ok-bg);color:var(--ok);border-color:currentColor}
.p-warn{background:var(--warn-bg);color:var(--warn);border-color:currentColor}
.p-stop{background:var(--stop-bg);color:var(--stop);border-color:currentColor}
pre,code{font-family:var(--mono)}
pre{background:#0b1420;color:#e6edf7;padding:16px 18px;border-radius:4px;overflow-x:auto;font-size:13px;line-height:1.7}
html[data-theme="dark"] pre{background:#060c14;border:1px solid var(--rule)}
pre .c{color:#8fa6c4}
.note{font-size:13.5px;color:var(--ink-3);border-left:3px solid var(--rule);padding-left:14px;margin:22px 0 0}
.rowline{display:flex;gap:14px;align-items:flex-start;padding:16px 0;border-top:1px solid var(--rule)}
.rowline .n{font-family:var(--mono);font-size:12px;color:var(--red);font-weight:600;min-width:24px}
table.tbl{width:100%;border-collapse:collapse;font-size:14px}
table.tbl th,table.tbl td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--rule);vertical-align:top}
table.tbl th{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.scroller{overflow-x:auto}

/* ---------- footer ---------- */
footer.foot{border-top:2px solid var(--navy);background:var(--surface-2);padding:44px 0 56px;font-size:13.5px;color:var(--ink-2)}
footer.foot a{color:var(--navy)}
footer.foot .cols{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
footer.foot h4{font-size:12px;font-family:var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:10px}
footer.foot ul{list-style:none;margin:0;padding:0}
footer.foot li{margin:5px 0}

/* ---------- motion ----------
   Reveal runs on an observer that keeps running, and the no-JS state is fully visible:
   a failure here must mean "no animation", never "no content". */
.rise{opacity:0;transform:translateY(16px);transition:opacity .7s ease, transform .7s ease}
.rise.is-in{opacity:1;transform:none}
html.no-js .rise{opacity:1;transform:none}
.kb{transform:scale(1)}
.kb.is-live{animation:kenburns 26s ease-in-out infinite alternate}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.08)}}
@media (prefers-reduced-motion:reduce){
  /* The finished state, never a frozen mid-frame and never nothing. */
  .rise{opacity:1;transform:none;transition:none}
  .hero video{animation:none;transform:scale(1.08)}
  .kb.is-live{animation:none;transform:scale(1.04)}
  *{scroll-behavior:auto!important}
}
@media (max-width:640px){
  .mast-nav{width:100%;margin-left:0;overflow-x:auto}
  .hero-in{padding:56px 0}
  section{padding:56px 0}
}