/* ===================================================================
   Astraea Cyber - site styles
   Brand: navy #1c2c5b / cyber blue #1f5fc4 / silver #8e99a4
   Light and dark, following the visitor's system preference.
   =================================================================== */

:root{
  --bg:#ffffff; --bg-alt:#f3f7fc; --surface:#ffffff; --surface-2:#eef3fa; --surface-3:#e2ebf6;
  --line:#d7e2ef; --line-soft:#e8eef8;
  --ink:#111d3a; --text:#3f5170; --text-3:#76859d;
  --navy:#1c2c5b; --blue:#1f5fc4; --blue-2:#4a8fe0; --silver:#8e99a4;
  --wash:rgba(31,95,196,.07);
  --band:#1c2c5b; --on-band:#ffffff; --crit:#b32d33;
  --display:"Jost",'Century Gothic','Trebuchet MS',sans-serif;
  --body:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,'SFMono-Regular',Menlo,monospace;
  --maxw:1140px;
}

/* Dark palette. Applied by system preference, and by an explicit stamp. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#070d1c; --bg-alt:#0b1428; --surface:#0f1930; --surface-2:#15213c; --surface-3:#1c2a4a;
    --line:#243250; --line-soft:#1a2540;
    --ink:#e9eef8; --text:#a3b2cc; --text-3:#74849f;
    --navy:#8fa6dc; --blue:#5590e8; --blue-2:#7fb0f0; --silver:#9aa7ba;
    --wash:rgba(85,144,232,.12);
    --band:#0c1730; --on-band:#e9eef8; --crit:#e9686e;
  }
}
:root[data-theme="dark"]{
  --bg:#070d1c; --bg-alt:#0b1428; --surface:#0f1930; --surface-2:#15213c; --surface-3:#1c2a4a;
  --line:#243250; --line-soft:#1a2540;
  --ink:#e9eef8; --text:#a3b2cc; --text-3:#74849f;
  --navy:#8fa6dc; --blue:#5590e8; --blue-2:#7fb0f0; --silver:#9aa7ba;
  --wash:rgba(85,144,232,.12);
  --band:#0c1730; --on-band:#e9eef8; --crit:#e9686e;
}

*{box-sizing:border-box}
/* display:flex/grid on a component out-specifies the UA [hidden] rule, so
   toggling el.hidden silently does nothing without this. */
[hidden]{display:none !important}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *{animation:none !important; transition:none !important}}

body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--body); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--display); font-weight:500; margin:0; text-wrap:balance; line-height:1.15}
p{margin:0}
a{color:var(--blue); text-decoration-thickness:1px; text-underline-offset:3px}
img,svg{max-width:100%}
:focus-visible{outline:2px solid var(--blue); outline-offset:3px; border-radius:2px}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 26px}
@media(max-width:600px){.wrap{padding:0 18px}}
.mono{font-family:var(--mono); font-variant-numeric:tabular-nums}
.eyebrow{
  font-family:var(--display); text-transform:uppercase; letter-spacing:.21em;
  font-size:11px; font-weight:500; color:var(--text-3);
}

/* ---------------- header ----------------
   Committed to white in both themes so the logo is always the original navy
   artwork, never the inverted variant. Colors here are literal on purpose. */
.site-head{
  position:sticky; top:0; z-index:50;
  background:#ffffff; border-bottom:1px solid #d7e2ef;
}
.site-head .wrap{display:flex; align-items:center; gap:22px; height:66px}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none}
.brand img.mark{height:40px; width:auto; display:block}
.brand img.wordmark{height:27px; width:auto; display:block; margin-top:2px}
@media(max-width:520px){
  .brand img.mark{height:34px}
  .brand img.wordmark{height:22px}
}
.nav{margin-left:auto; display:flex; align-items:center; gap:26px}
.nav a{
  font-family:var(--display); font-size:14px; letter-spacing:.06em; text-transform:uppercase;
  color:#3f5170; text-decoration:none; font-weight:400;
}
.nav a:hover, .nav a[aria-current="page"]{color:#1f5fc4}
/* .nav a would otherwise out-specify .btn rules and repaint these labels */
.nav a.btn{margin-left:4px; color:#111d3a; background:#eef3fa; border-color:#d7e2ef}
.nav a.btn:hover{background:#e2ebf6; border-color:#a9bcd6}
.nav a.btn-primary, .nav a.btn-primary:hover{background:#1f5fc4; border-color:#1f5fc4; color:#fff}
@media(max-width:820px){
  .site-head .wrap{height:auto; padding-top:12px; padding-bottom:12px; flex-wrap:wrap}
  .nav{margin-left:0; width:100%; gap:18px; flex-wrap:wrap}
  .nav a{font-size:13px}
}

/* ---------------- buttons ---------------- */
.btn{
  display:inline-block; font-family:var(--display); text-transform:uppercase;
  letter-spacing:.11em; font-weight:500; font-size:14px; padding:12px 22px;
  border:1px solid var(--line); background:var(--surface-2); color:var(--ink);
  text-decoration:none; cursor:pointer; transition:background .15s, border-color .15s;
}
.btn:hover{background:var(--surface-3); border-color:var(--text-3)}
.btn-primary{background:var(--blue); border-color:var(--blue); color:#fff}
.btn-primary:hover{background:var(--blue); border-color:var(--blue); filter:brightness(1.09)}
.btn-ghost{background:transparent}

/* ---------------- hero ----------------
   Commits to one dark treatment in both themes. The product this sells is a
   dark operational board; putting it on a light ground fights the artwork.
   Every color here is literal for that reason, not token-driven. */
.hero{
  position:relative; overflow:hidden; color:#e9eef8;
  background:
    radial-gradient(1000px 620px at 8% -14%, #253a76 0%, rgba(37,58,118,0) 62%),
    linear-gradient(180deg, #0d1735 0%, #090f26 100%);
  border-bottom:1px solid #1b2748;
}
.hero::before{                      /* faint ops grid, fades out downward */
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(143,166,220,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(143,166,220,.06) 1px, transparent 1px);
  background-size:66px 66px;
  -webkit-mask-image:linear-gradient(180deg, #000 0%, transparent 76%);
  mask-image:linear-gradient(180deg, #000 0%, transparent 76%);
}
.hero .wrap{position:relative; z-index:1}
.hero-grid{
  display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.32fr);
  gap:48px; align-items:center; padding:66px 0 74px;
}
@media(max-width:960px){.hero-grid{grid-template-columns:1fr; gap:34px; padding:48px 0 52px}}
.hero .eyebrow{color:#8fa6dc}
.hero h1{
  font-size:clamp(38px,5.2vw,66px); font-weight:300; letter-spacing:-.022em;
  line-height:1.04; margin:16px 0 22px; color:#fff; max-width:15ch;
}
.hero h1 em{font-style:normal; font-weight:500; color:#8fb4f0}
.hero .lede{font-size:18.5px; color:#aebbd6; max-width:54ch; line-height:1.62}
.hero .lede strong{color:#e9eef8; font-weight:600}
.hero .cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:32px}
.hero .cta .btn{background:rgba(255,255,255,.06); border-color:rgba(143,166,220,.34); color:#e9eef8}
.hero .cta .btn:hover{background:rgba(255,255,255,.12); border-color:rgba(143,166,220,.6)}
.hero .cta .btn-primary{background:#2f6fd4; border-color:#2f6fd4; color:#fff}
.hero .cta .btn-primary:hover{background:#3a7ce0; border-color:#3a7ce0}
.hero .under{margin-top:20px; font-size:13.5px; color:#7d8db0; max-width:58ch}

/* product shot in the hero */
/* Bleeds past the container on wide viewports so the board reads as a real
   screen rather than a thumbnail floating in the column. */
.hero-shot{
  position:relative;
  margin-right:calc(-1 * clamp(0px, (100vw - var(--maxw)) / 2 + 26px, 150px));
}
@media(max-width:960px){.hero-shot{margin-right:0}}
.hero-shot img{
  display:block; width:100%; height:auto; border-radius:5px;
  border:1px solid rgba(143,166,220,.26);
  box-shadow:0 44px 90px -26px rgba(0,0,0,.82), 0 2px 8px rgba(0,0,0,.4);
}
.shot-tag{
  position:absolute; left:16px; bottom:-14px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.04em;
  color:#aebbd6; background:#111c3d; border:1px solid rgba(143,166,220,.3);
  padding:5px 11px; border-radius:3px; white-space:nowrap;
}
@media(max-width:520px){.shot-tag{display:none}}
/* translate-only entrance: nothing is ever invisible, so the first painted
   frame is already readable */
@keyframes lift{from{transform:translateY(16px)} to{transform:none}}
.hero-shot{animation:lift .7s cubic-bezier(.2,.75,.3,1) both}

/* ---------------- contrast strip ---------------- */
.strip{background:var(--band); color:var(--on-band)}
.strip .wrap{padding:34px 26px; display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:28px}
.strip h3{font-size:16px; letter-spacing:.03em; margin-bottom:7px; color:var(--on-band)}
.strip p{font-size:14.5px; color:rgba(255,255,255,.78); line-height:1.6}
.strip .n{
  font-family:var(--mono); font-size:11px; color:var(--blue-2);
  display:block; margin-bottom:9px;
}

/* ---------------- sections ---------------- */
section{padding:66px 0}
@media(max-width:700px){section{padding:46px 0}}
.sec-alt{background:var(--bg-alt); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.sec-head{max-width:64ch; margin-bottom:34px}
.sec-head h2{font-size:clamp(27px,3.4vw,36px); font-weight:300; letter-spacing:-.006em; margin:9px 0 12px}
.sec-head h2 em{font-style:normal; font-weight:500; color:var(--navy)}
.sec-head p{font-size:17px; color:var(--text)}

/* ---------------- offering cards ---------------- */
/* Real gaps rather than the 1px-divider trick, so cards can lift on hover
   without breaking the seam between them. */
.offerings{display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:16px}
.off{
  background:var(--surface); border:1px solid var(--line); border-radius:4px;
  padding:26px 24px 28px; display:flex; flex-direction:column; gap:11px;
  box-shadow:0 1px 2px rgba(17,29,58,.04);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.off:hover{
  transform:translateY(-3px); border-color:var(--blue-2);
  box-shadow:0 16px 34px -14px rgba(17,29,58,.26);
}
.off .tag{
  font-family:var(--display); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  font-weight:600; padding:3px 8px; border:1px solid currentColor; align-self:flex-start;
}
.off .tag.early{color:var(--blue)}
.off .tag.live{color:var(--navy)}
.off h3{font-size:22px; font-weight:500; letter-spacing:.01em}
.off p{font-size:15px; color:var(--text)}
.off ul{margin:2px 0 0; padding-left:18px; color:var(--text); font-size:14.5px; display:flex; flex-direction:column; gap:5px}
.off li::marker{color:var(--blue)}
.off .more{margin-top:auto; padding-top:12px}
.off .more a{
  font-family:var(--display); text-transform:uppercase; letter-spacing:.11em;
  font-size:13px; text-decoration:none; border-bottom:1px solid var(--blue); padding-bottom:2px;
}

/* ---------------- scenario showcase ---------------- */
.showcase{display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,.82fr); gap:36px; align-items:start}
@media(max-width:900px){.showcase{grid-template-columns:1fr; gap:26px}}
.timeline{border:1px solid var(--line); background:var(--surface)}
.tl-row{display:flex; gap:14px; padding:11px 16px; border-bottom:1px solid var(--line-soft); align-items:baseline}
.tl-row:last-child{border-bottom:none}
.tl-row .t{font-family:var(--mono); font-size:11.5px; color:var(--text-3); flex:none; width:62px}
.tl-row .b{flex:1; min-width:0; font-size:14.5px}
.tl-row .b b{font-weight:600; display:block}
.tl-row .b span{font-size:12.5px; color:var(--text-3)}
.tl-row .m{
  font-family:var(--display); font-size:9.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--text-3); flex:none;
}
.quote{
  border-left:3px solid var(--blue); background:var(--wash);
  padding:18px 22px; font-size:16.5px; line-height:1.62; color:var(--ink);
}
.quote cite{display:block; margin-top:10px; font-style:normal; font-size:13px; color:var(--text-3); font-family:var(--mono)}

/* ---------------- CAM banner ---------------- */
.cam{border:1px solid var(--blue); background:var(--wash); padding:30px 32px; display:grid;
  grid-template-columns:minmax(0,1fr) auto; gap:26px; align-items:center}
@media(max-width:760px){.cam{grid-template-columns:1fr; padding:24px}}
.cam h2{font-size:26px; font-weight:400; margin-bottom:9px}
.cam h2 em{font-style:normal; font-weight:600; color:var(--blue)}
.cam p{color:var(--text); font-size:15.5px; max-width:62ch}

/* ---------------- kit contents ---------------- */
.kit{display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line)}
.kit .k{background:var(--surface); padding:18px 20px}
.kit .k .n{font-family:var(--mono); font-size:11px; color:var(--blue); display:block; margin-bottom:7px}
.kit .k b{display:block; font-size:15px; margin-bottom:4px; font-weight:600}
.kit .k span{font-size:13.5px; color:var(--text-3); line-height:1.5}

/* ---------------- forms ---------------- */
.form{display:flex; flex-direction:column; gap:12px; max-width:440px}
.field{display:flex; flex-direction:column; gap:5px}
.field label{font-family:var(--display); font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:var(--text-3); font-weight:500}
.field input, .field select{
  background:var(--surface); color:var(--ink); border:1px solid var(--line);
  padding:11px 13px; font-family:var(--body); font-size:15px;
}
.field input:focus, .field select:focus{border-color:var(--blue); outline:none}
.form .fine{font-size:12.5px; color:var(--text-3); line-height:1.5}
.form-note{
  margin-top:14px; padding:12px 15px; border-left:3px solid var(--blue);
  background:var(--wash); font-size:13px; color:var(--text); display:none;
}
.form-note.show{display:block}

/* ---------------- about ---------------- */
.bio{display:grid; grid-template-columns:minmax(0,1.4fr) minmax(260px,1fr); gap:40px; align-items:start}
@media(max-width:840px){.bio{grid-template-columns:1fr; gap:26px}}
.bio p{font-size:16.5px; color:var(--text); margin-bottom:16px; max-width:64ch}
.bio p:last-child{margin-bottom:0}
.bio p strong{color:var(--ink); font-weight:600}
.facts{border:1px solid var(--line); background:var(--surface)}
.facts .f{padding:13px 16px; border-bottom:1px solid var(--line-soft)}
.facts .f:last-child{border-bottom:none}
.facts .f .k{font-family:var(--display); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--text-3); display:block; margin-bottom:3px; font-weight:500}
.facts .f .v{font-size:14.5px; font-weight:500}
.values{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:34px}
.values .v{background:var(--surface); padding:22px 22px 24px}
.values .v h3{font-size:18px; font-weight:500; margin-bottom:8px}
.values .v p{font-size:14.5px; color:var(--text); margin:0}

/* ---------------- editorial note (for Shelby, remove before launch) ---------------- */

/* ---------------- footer ---------------- */
.site-foot{background:var(--band); color:var(--on-band); padding:44px 0 30px; margin-top:0}
.site-foot .wrap{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px}
@media(max-width:860px){.site-foot .wrap{grid-template-columns:1fr 1fr; gap:30px}}
@media(max-width:520px){.site-foot .wrap{grid-template-columns:1fr; gap:26px}}
/* Footer band is dark navy in both themes, so the light-on-dark artwork is
   always the correct variant here. Constrain it: the file is 970px wide. */
.site-foot .foot-logo{height:88px; width:auto; display:block; margin-bottom:4px}
.site-foot .a{font-family:var(--display); font-weight:500; font-size:17px; letter-spacing:.27em; color:#fff; text-transform:uppercase; display:block}
.site-foot .c{font-family:var(--display); font-weight:400; font-size:9px; letter-spacing:.31em; color:var(--blue-2); text-transform:uppercase; margin-top:3px; display:block}
.site-foot p{font-size:14px; color:rgba(255,255,255,.66); margin-top:14px; max-width:40ch}
.site-foot h4{font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.55); margin-bottom:11px; font-weight:500}
.site-foot ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.site-foot a{color:rgba(255,255,255,.85); text-decoration:none; font-size:14.5px}
.site-foot a:hover{color:#fff; text-decoration:underline}
.legal{
  border-top:1px solid rgba(255,255,255,.14); margin-top:34px; padding-top:18px;
  font-size:12.5px; color:rgba(255,255,255,.5); font-family:var(--mono);
}

/* ---------------- stats band ----------------
   Every figure here is a fact about the product. No client counts, no
   testimonials, nothing that would need a source we do not have. */
.stats-band{background:var(--surface); border-bottom:1px solid var(--line)}
.stats-band .wrap{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(158px,1fr));
  gap:0; padding:0;
}
.sb{padding:24px 26px; border-right:1px solid var(--line-soft)}
.sb:last-child{border-right:none}
@media(max-width:760px){
  .sb{border-right:none; border-bottom:1px solid var(--line-soft)}
  .sb:last-child{border-bottom:none}
}
.sb .n{
  font-family:var(--display); font-size:40px; font-weight:300; line-height:1;
  color:var(--navy); font-variant-numeric:tabular-nums; letter-spacing:-.02em;
}
.sb .n small{font-size:19px; font-weight:400; letter-spacing:0}
.sb .k{
  display:block; margin-top:9px; font-family:var(--display); font-size:11px;
  letter-spacing:.15em; text-transform:uppercase; color:var(--text-3); font-weight:500;
}

/* ---------------- product figure ---------------- */
.figure{margin:0}
.figure img{
  display:block; width:100%; height:auto; border-radius:4px;
  border:1px solid var(--line); box-shadow:0 20px 44px -22px rgba(17,29,58,.4);
}
.figure figcaption{
  margin-top:11px; font-family:var(--mono); font-size:11.5px;
  color:var(--text-3); line-height:1.55;
}
.split{display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,.72fr); gap:38px; align-items:start}
@media(max-width:900px){.split{grid-template-columns:1fr; gap:28px}}

/* keep the tall panel crop from dominating the column */
.figure.crop{max-height:520px; overflow:hidden; border-radius:4px; position:relative}
.figure.crop img{border-radius:4px 4px 0 0}
.figure.crop::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:110px;
  background:linear-gradient(180deg, transparent, var(--bg-alt));
  pointer-events:none;
}

/* ---------------- values / kit cards get the same lift ---------------- */
.values{gap:16px; background:transparent; border:none}
.values .v{
  border:1px solid var(--line); border-radius:4px;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.values .v:hover{
  transform:translateY(-3px); border-color:var(--blue-2);
  box-shadow:0 16px 34px -14px rgba(17,29,58,.26);
}
.kit{gap:14px; background:transparent; border:none}
.kit .k{border:1px solid var(--line); border-radius:4px}

@media (prefers-reduced-motion:reduce){
  .hero-shot{animation:none}
  .off:hover,.values .v:hover{transform:none}
}

/* Honeypot. Off-screen rather than display:none, because some bots skip
   hidden fields but happily fill positioned ones. */
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.form-note.is-error{border-left-color:var(--crit, #b32d33)}

/* ---------------- gated download panel ---------------- */
.dl-panel{border:1px solid var(--blue); background:var(--wash); padding:24px 26px; max-width:560px}
.dl-head h3{font-size:22px; font-weight:500; margin:8px 0 8px}
.dl-head p{font-size:14.5px; color:var(--text); margin-bottom:18px}
.dl-list{display:flex; flex-direction:column; gap:8px}
.dl{
  display:flex; align-items:center; gap:14px; padding:13px 16px; text-decoration:none;
  background:var(--surface); border:1px solid var(--line); border-radius:3px;
  transition:border-color .14s, transform .14s, box-shadow .14s;
}
.dl:hover{border-color:var(--blue); transform:translateY(-1px); box-shadow:0 6px 16px -8px rgba(17,29,58,.3)}
.dl-l{font-size:14.5px; color:var(--ink); font-weight:500}
.dl-a{
  margin-left:auto; font-family:var(--display); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; font-weight:600; color:var(--blue); white-space:nowrap;
}
.dl-primary{background:var(--blue); border-color:var(--blue)}
.dl-primary .dl-l{color:#fff; font-weight:600}
.dl-primary .dl-a{color:rgba(255,255,255,.85)}
.dl-primary:hover{border-color:var(--blue); filter:brightness(1.06)}
.dl-fine{margin-top:16px; font-size:12.5px; color:var(--text-3); line-height:1.55}