/* ============================================================
   OptiWolf marketing-site — shared chrome
   Reset, layout, buttons, nav, footer. Loaded on every page.
   Page-specific CSS lives in /css/<page>.css.

   Color / type / shadow come from the CANONICAL brand tokens
   (/brand/tokens.css — synced from brand/tokens by
   scripts/sync-brand-assets.sh). The :root block aliases the
   --ow-* tokens to the short semantic names the page CSS uses,
   so a brand-token change propagates everywhere and the page CSS
   stays readable. Do not redefine colors here — change the tokens.
   ============================================================ */
@import url("/brand/tokens.css");

:root{
  --navy-950:var(--ow-navy-950); --navy-900:var(--ow-navy-900); --navy-800:var(--ow-navy-800);
  --navy-700:var(--ow-navy-700); --navy-600:var(--ow-navy-600); --navy-500:var(--ow-navy-500);
  --navy-400:var(--ow-navy-400); --navy-300:var(--ow-navy-300); --navy-200:var(--ow-navy-200);
  --navy-100:var(--ow-navy-100); --navy-50:var(--ow-navy-50);
  --teal-300:var(--ow-teal-300); --teal-400:var(--ow-teal-400); --teal-500:var(--ow-teal-500);
  --teal-600:var(--ow-teal-600); --teal-700:var(--ow-teal-700);
  --page:var(--ow-page); --surface:var(--ow-surface); --surface-2:var(--ow-surface-2);
  --border:var(--ow-border); --border-strong:var(--ow-border-strong);
  --ink:var(--ow-ink); --ink-soft:var(--ow-ink-soft); --muted:var(--ow-muted);
  --grad-navy:var(--ow-grad-navy); --grad-facet:var(--ow-grad-facet); --grad-teal:var(--ow-grad-teal);
  --sh-sm:var(--ow-shadow-sm); --sh-md:var(--ow-shadow-md); --sh-lg:var(--ow-shadow-lg);
  --display:var(--ow-font-display); --body:var(--ow-font-body);
  /* scanner severity scale */
  --hi:var(--ow-danger);  --hi-bg:var(--ow-danger-bg);
  --med:var(--ow-warning); --med-bg:var(--ow-warning-bg);
  --lo:var(--ow-success);  --lo-bg:var(--ow-success-bg);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;font-family:var(--body);color:var(--ink);background:var(--page);-webkit-font-smoothing:antialiased;line-height:1.6;}
a{color:var(--navy-600);text-decoration:none;}
h1,h2,h3,h4{font-family:var(--display);color:var(--navy-900);margin:0;letter-spacing:-.02em;line-height:1.12;}
img{display:block;max-width:none;}
.wrap{max-width:1140px;margin:0 auto;padding:0 24px;}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;white-space:nowrap;font-family:var(--body);font-weight:600;font-size:.97rem;line-height:1;padding:.8em 1.5em;border-radius:11px;border:1.5px solid transparent;cursor:pointer;transition:.18s;}
.btn-primary{background:var(--navy-900);color:#fff;}
.btn-primary:hover{background:var(--navy-700);transform:translateY(-1px);box-shadow:var(--sh-md);}
.btn-accent{background:var(--teal-500);color:var(--navy-900);}
.btn-accent:hover{background:var(--teal-400);transform:translateY(-1px);box-shadow:0 8px 22px rgba(47,217,194,.4);}
.btn-secondary{background:var(--surface);color:var(--navy-800);border-color:var(--border-strong);}
.btn-secondary:hover{border-color:var(--navy-400);}
.btn-outline{background:transparent;color:var(--navy-800);border-color:var(--navy-800);}
.btn-outline:hover{background:var(--navy-900);color:#fff;}
.btn-ghost{background:transparent;color:var(--navy-700);}
.btn-ghost:hover{color:var(--navy-900);}

/* nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(244,247,250,.82);backdrop-filter:saturate(160%) blur(12px);border-bottom:1px solid var(--border);}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:70px;}
.nav-logo{flex:none;}.nav-logo img{height:32px;width:auto;max-width:none;}
.nav-links{display:flex;gap:28px;align-items:center;}
.nav-links a{color:var(--ink-soft);font-weight:500;font-size:.95rem;}
.nav-links a:hover,.nav-links a.on{color:var(--navy-900);}
.nav-cta{display:flex;gap:12px;align-items:center;}
@media(max-width:880px){.nav-links{display:none;}}

/* footer (4-col, site-wide) */
.footer{background:var(--navy-950);color:var(--navy-200);padding:64px 0 30px;}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;}
@media(max-width:760px){.footer-grid{grid-template-columns:1fr 1fr;}}
.footer img{height:38px;width:auto;max-width:none;margin-bottom:16px;}
.footer p{color:var(--navy-400);font-size:.92rem;max-width:300px;}
.footer h6{color:#fff;text-transform:uppercase;letter-spacing:.08em;font-size:.76rem;margin:0 0 14px;font-family:var(--display);}
.footer-col a{display:block;color:var(--navy-300);padding:6px 0;font-size:.92rem;}
.footer-col a:hover{color:var(--teal-400);}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:44px;padding-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:.85rem;color:var(--navy-400);}