/* Shared site chrome (website contract §4): the base, the header and the footer.
   Used by every page (index.html, terms.html, dpa.html), so all three share one
   header and footer. Page-specific styles stay in each page. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg:#07101F; --bg2:#0C1A2E; --bg3:#111E30;
  --border:#1A3050; --border2:#253D60;
  --cyan:#00C8FF; --cyan-dim:rgba(0,200,255,0.10);
  --purple:#9B5DE5; --magenta:#D946EF; --red:#E85555;
  --text:#DEE9FF; --text2:#8BA3C0; --text3:#4A6480;
  /* Footer text: at least 4.5:1 against the footer background (HF-AC7). */
  --footer-text:#C5D2E6; --footer-link:#E6EEFF;
}
html { scroll-behavior:smooth; }
body { font-family:'Barlow',sans-serif; background:var(--bg); color:var(--text); font-size:16px; line-height:1.6; min-height:100vh; }

/* HEADER */
nav { position:fixed; top:0; left:0; right:0; z-index:100; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 48px; height:68px; background:rgba(7,16,31,0.88); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--border); }
.nav-logo { display:flex; align-items:center; cursor:pointer; border:none; background:none; padding:0; flex-shrink:0; border-radius:4px; }
.nav-logo img { display:block; height:26px; width:auto; }
.nav-links { display:flex; align-items:center; gap:4px; }
.nav-link { background:none; border:none; cursor:pointer; font-family:'Barlow',sans-serif; font-size:13px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:var(--text2); padding:8px 16px; border-radius:6px; text-decoration:none; transition:color .2s,background .2s; }
.nav-link:hover { color:var(--text); background:rgba(255,255,255,.05); }
.nav-link.active { color:var(--cyan); }
/* Sign in: secondary to Request a demo (outlined against the filled button). */
.nav-signin { margin-left:12px; font-family:'Barlow',sans-serif; font-size:13px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--text); text-decoration:none; padding:8px 18px; border:1px solid var(--border2); border-radius:6px; white-space:nowrap; transition:border-color .2s,color .2s; }
.nav-signin:hover { border-color:var(--text2); color:#fff; }
.nav-cta { margin-left:10px; background:var(--cyan); border:1px solid var(--cyan); cursor:pointer; font-family:'Barlow',sans-serif; font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--bg); padding:9px 20px; border-radius:6px; text-decoration:none; white-space:nowrap; transition:opacity .2s; }
.nav-cta:hover { opacity:.88; }
.nav-logo:focus-visible, .nav-link:focus-visible, .nav-signin:focus-visible, .nav-cta:focus-visible { outline:2px solid var(--cyan); outline-offset:3px; }

/* FOOTER */
footer { background:var(--bg2); border-top:1px solid var(--border); padding:24px 20px; text-align:center; }
footer p { font-size:13px; color:var(--footer-text); }
.footer-links { display:flex; justify-content:center; flex-wrap:wrap; gap:8px 28px; margin-bottom:12px; }
footer a { color:var(--footer-link); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; font-size:13px; }
footer a:hover { color:#fff; text-decoration-thickness:2px; }
footer a:focus-visible { outline:2px solid var(--cyan); outline-offset:3px; border-radius:2px; }

@media (max-width:900px) {
  nav { padding:0 20px; }
  .nav-links .nav-link { display:none; }
}
@media (max-width:440px) {
  nav { padding:0 16px; gap:10px; }
  .nav-logo img { height:19px; }
  .nav-signin { margin-left:0; padding:7px 10px; font-size:11px; letter-spacing:.06em; }
  .nav-cta { margin-left:6px; padding:8px 10px; font-size:11px; letter-spacing:.06em; }
}