@import "./fonts.css";

/* ═══════════════════════════════════════════════════════════════════════
   Guardian Prime — www.guardian-prime.com

   Tokens are taken verbatim from Documents/GP/design-tokens.md. Nothing here
   is invented and no colour is hardcoded outside this block. See DESIGN.md
   for the one declared deviation and for the contrast note on --text-muted.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: light dark;

  /* brand */
  --navy-900: #0A2E63;
  --navy-700: #124E96;
  --accent: #17C9D3;

  /* surfaces */
  --bg: #FFFFFF;
  --surface: #F7F9FC;
  --border: #E4EAF2;

  /* ink */
  --text: #0F172A;
  --text-2: #475569;
  /* 2.8:1 on white. Never body copy — see DESIGN.md. */
  --text-muted: #94A3B8;

  --on-navy: #FFFFFF;
  --on-accent: #06282B;

  --success: #16A34A;
  --warning: #D97706;
  --error: #DC2626;

  /* 8px grid */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

  --r1: 4px; --r2: 8px; --r3: 12px; --r4: 20px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .06);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, .08);
  --shadow-lg: 0 20px 40px rgba(0, 0, 0, .10);

  --fast: 150ms; --normal: 250ms; --slow: 400ms;
  --ease: ease-in-out;

  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* Code and package names only. Never labels, badges or headings. */
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --measure: 1180px;
  --gutter: clamp(20px, 5vw, 48px);
}

/* Dark mode is required by the brief. Navy stops being the ink and becomes
   the ground; the accent is the one value that survives unchanged. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #071227;
    --surface: #0D1B33;
    --border: #1D3053;
    --text: #F1F5F9;
    --text-2: #B6C4D8;
    --text-muted: #7286A3;
    --navy-900: #E8EEF7;   /* headings invert to near-white */
    --navy-700: #7FB4F2;   /* links stay legible on the dark ground */
    --on-navy: #071227;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, .45);
    --shadow-lg: 0 20px 40px rgba(0, 0, 0, .5);
  }
  /* The primary button inverts: a near-white fill on a dark ground, so it
     stays the loudest thing on the page rather than disappearing into it. */
  .btn-primary { background: var(--accent); color: #06282B; }
  .btn-primary:hover { background: #3FD8E1; }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-2);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  margin: 0;
  color: var(--navy-900);
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
  font-weight: 600;
}
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

a { color: var(--navy-700); text-decoration: none; }
a:hover { text-decoration: underline; }

code {
  font-family: var(--mono);
  font-size: 0.9em;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r1);
  padding: 1px 5px;
  color: var(--text);
}

:focus-visible {
  outline: 2px solid var(--navy-700);
  outline-offset: 3px;
  border-radius: var(--r1);
}

::selection { background: rgba(23, 201, 211, .28); }

.skip {
  position: absolute;
  left: -9999px;
  background: var(--navy-900);
  color: var(--on-navy);
  padding: var(--s3) var(--s4);
  border-radius: var(--r1);
  font-weight: 600;
  z-index: 100;
}
.skip:focus { left: var(--s2); top: var(--s2); }

.wrap { width: 100%; max-width: var(--measure); margin: 0 auto; padding: 0 var(--gutter); }

section { padding: clamp(56px, 8vw, 96px) 0; }
section[id] { scroll-margin-top: 80px; }

/* Everything resets margins to zero, so section intros need their rhythm
   restated: tight between a heading and its own lede, generous before the
   content that follows. */
section > .wrap > h2 { margin-bottom: var(--s3); }
section > .wrap > .lede { margin-bottom: var(--s7); }

/* ── type scale ────────────────────────────────────────────────────── */

.display {
  font-size: clamp(2.1rem, 1.3rem + 3.2vw, 3.6rem);
  letter-spacing: -0.03em;
  font-weight: 600;
}
.h2 { font-size: clamp(1.55rem, 1.2rem + 1.5vw, 2.15rem); }
.h3 { font-size: 1.0625rem; font-weight: 600; color: var(--navy-900); }

.lede { font-size: 1.125rem; color: var(--text-2); max-width: 62ch; }
.prose { max-width: 68ch; }

/* ── buttons ───────────────────────────────────────────────────────── */
/* Two styles only. The brief bans "multiple button styles". */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 44px;
  padding: 0 var(--s5);
  border-radius: var(--r2);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease),
              color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.btn:hover { text-decoration: none; }

.btn-primary { background: var(--navy-900); color: var(--on-navy); border-color: var(--navy-900); }
.btn-primary:hover { background: var(--navy-700); border-color: var(--navy-700); box-shadow: var(--shadow-sm); }

.btn-secondary { background: var(--bg); color: var(--navy-900); border-color: var(--border); }
.btn-secondary:hover { border-color: var(--navy-700); color: var(--navy-700); }

.btn .ic { width: 16px; height: 16px; flex-shrink: 0; }

/* ── header ────────────────────────────────────────────────────────── */

.site-head {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.site-head .wrap { display: flex; align-items: center; gap: var(--s5); height: 68px; }

.brand { display: flex; align-items: center; gap: var(--s3); }
.brand:hover { text-decoration: none; }
.brand .mark { width: 30px; height: 30px; flex-shrink: 0; }
.brand .name {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--navy-900);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.site-nav { margin-left: auto; display: flex; align-items: center; gap: var(--s1); }
.site-nav a {
  color: var(--text-2);
  font-size: 0.9375rem;
  font-weight: 500;
  padding: var(--s2) var(--s3);
  border-radius: var(--r1);
  transition: color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.site-nav a:hover { color: var(--navy-900); background: var(--surface); text-decoration: none; }
.site-nav a.btn { margin-left: var(--s3); color: var(--on-navy); background: var(--navy-900); }
.site-nav a.btn:hover { color: var(--on-navy); background: var(--navy-700); }

/* ── hero ──────────────────────────────────────────────────────────── */
/* No eyebrow, and no big-number stat row. The claim carries the page. */

.hero { padding: clamp(64px, 10vw, 120px) 0 clamp(48px, 7vw, 80px); }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(var(--s6), 6vw, var(--s8));
  align-items: center;
}
.hero-copy { display: flex; flex-direction: column; gap: var(--s5); }
.hero-copy .actions { display: flex; gap: var(--s3); flex-wrap: wrap; }

/* The one authored motion moment on the page: the mark draws itself once,
   on arrival, and nothing else animates. */
.hero-figure { display: flex; justify-content: center; }
.hero-figure svg { width: min(100%, 340px); height: auto; }
/* The supplied logo strokes the hexagon in the same navy as the chevron and
   separates them by weight alone (6 against 10). Matching that rather than
   greying the frame back, which drifted from the brand and vanished on the
   dark ground. */
.hero-figure .frame { stroke: var(--navy-900); opacity: .55; }
.hero-figure .chev { stroke: var(--navy-900); }
.hero-figure .bar { stroke: var(--accent); }

/* Path lengths measured from the geometry: the hexagon is four 56.44 sides
   plus two of 60 (345.8), the chevron two 39.6 segments (79.2). Rounded up so
   the dash fully clears. Hardcoded rather than read with getTotalLength()
   because the artwork is static and this keeps the script to one job. */
.js .hero-figure .frame { --len: 348; }
.js .hero-figure .chev  { --len: 80; }

.js .hero-figure .frame,
.js .hero-figure .chev {
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
}
.js .hero-figure .bar { opacity: 0; }
.js .hero-figure.drawn .frame,
.js .hero-figure.drawn .chev {
  animation: draw 900ms var(--ease) forwards;
}
.js .hero-figure.drawn .chev { animation-delay: 260ms; }
.js .hero-figure.drawn .bar {
  animation: fade var(--slow) var(--ease) 900ms forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fade { to { opacity: 1; } }

/* ── the argument ──────────────────────────────────────────────────── */
/* Prose with a supporting aside, not three identical cards. */

.argument { background: var(--surface); border-block: 1px solid var(--border); }
.argument-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(var(--s6), 5vw, var(--s8));
  align-items: start;
}
.argument-body { display: flex; flex-direction: column; gap: var(--s4); }
.argument-body p { color: var(--text-2); }

.claims { display: flex; flex-direction: column; gap: var(--s5); }
.claim { display: flex; flex-direction: column; gap: var(--s2); }
.claim h3 { font-size: 0.9375rem; }
.claim p { font-size: 0.9375rem; color: var(--text-2); }
/* A 1px rule, not a 3px coloured border-left. */
.claim { border-left: 1px solid var(--border); padding-left: var(--s4); }
.claim:first-child { border-left-color: var(--accent); }

/* ── products ──────────────────────────────────────────────────────── */
/* Two products at deliberately different weights: one ships, one does not.
   Equal-sized cards would imply they are equally real. */

.products { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--s5); align-items: start; }

.product {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r3);
  padding: clamp(var(--s5), 3vw, var(--s7));
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}
.product-lead { box-shadow: var(--shadow-md); }
.product-next { background: var(--surface); box-shadow: none; }

.product-top { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.product-top picture { display: flex; }
.product-top img, .product-top svg { width: 32px; height: 32px; }
.product-top h3 { font-size: 1.375rem; letter-spacing: -0.02em; }

.status {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 3px var(--s2);
  border-radius: 999px;
}
.status-live { background: rgba(23, 201, 211, .14); color: #0A6E75; }
.status-next { background: var(--border); color: var(--text-2); }
@media (prefers-color-scheme: dark) {
  .status-live { background: rgba(23, 201, 211, .18); color: #6FE3EA; }
}

.capabilities { display: flex; flex-direction: column; gap: var(--s3); }
.capabilities li { display: flex; gap: var(--s3); align-items: flex-start; font-size: 0.9375rem; color: var(--text-2); }
.capabilities .ic { width: 18px; height: 18px; flex-shrink: 0; margin-top: 3px; color: var(--accent); }
.product .foot { margin-top: auto; padding-top: var(--s2); }

/* ── how it works ──────────────────────────────────────────────────── */
/* An ordered list, because the order is the information. Numbers come from
   the list itself rather than being typed in as decoration. */

.flow { counter-reset: step; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--s5); }
.flow li {
  counter-increment: step;
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding-top: var(--s4);
  border-top: 1px solid var(--border);
}
.flow li::before {
  content: counter(step, decimal-leading-zero);
  font-size: 0.8125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}
.flow h3 { font-size: 0.9375rem; }
.flow p { font-size: 0.9375rem; color: var(--text-2); }

/* ── commitments ───────────────────────────────────────────────────── */
/* A definition list with a real hierarchy, not six identical tiles. */

.commitments { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: var(--s5) var(--s8); }
.commitment { display: grid; grid-template-columns: auto 1fr; gap: var(--s2) var(--s4); align-items: start; }
.commitment dt { grid-column: 2; font-weight: 600; color: var(--navy-900); font-size: 0.9375rem; }
.commitment dd { grid-column: 2; margin: 0; font-size: 0.9375rem; color: var(--text-2); }
.commitment .ic {
  grid-row: span 2;
  width: 20px; height: 20px;
  color: var(--navy-700);
  margin-top: 2px;
}

/* ── closing ───────────────────────────────────────────────────────── */

.closing { background: var(--navy-900); }
.closing .inner {
  display: flex;
  flex-direction: column;
  gap: var(--s5);
  align-items: flex-start;
  max-width: 62ch;
}
.closing h2 { color: var(--on-navy); }
.closing p { color: rgba(255, 255, 255, .82); font-size: 1.0625rem; }
.closing .actions { display: flex; gap: var(--s3); flex-wrap: wrap; }
.closing .btn-primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.closing .btn-primary:hover { background: #3FD8E1; border-color: #3FD8E1; }
.closing .btn-secondary { background: transparent; color: var(--on-navy); border-color: rgba(255, 255, 255, .35); }
.closing .btn-secondary:hover { border-color: var(--on-navy); color: var(--on-navy); background: rgba(255, 255, 255, .08); }
@media (prefers-color-scheme: dark) {
  .closing { background: var(--surface); border-block: 1px solid var(--border); }
  .closing h2 { color: var(--navy-900); }
  .closing p { color: var(--text-2); }
  .closing .btn-secondary { color: var(--navy-900); border-color: var(--border); }
  .closing .btn-secondary:hover { color: var(--navy-900); background: var(--bg); }
}

/* ── footer ────────────────────────────────────────────────────────── */

.site-foot { border-top: 1px solid var(--border); padding: var(--s7) 0 var(--s6); }
.foot-grid { display: flex; flex-wrap: wrap; gap: var(--s7); justify-content: space-between; }
.foot-about { display: flex; flex-direction: column; gap: var(--s3); max-width: 32ch; }
.foot-about p { font-size: 0.875rem; color: var(--text-2); }
.foot-col { display: flex; flex-direction: column; gap: var(--s3); min-width: 140px; }
.foot-col h3 { font-size: 0.875rem; color: var(--navy-900); }
.foot-col a, .foot-col span { font-size: 0.875rem; color: var(--text-2); }
.foot-col a:hover { color: var(--navy-700); }
.foot-base {
  margin-top: var(--s6);
  padding-top: var(--s5);
  border-top: 1px solid var(--border);
  font-size: 0.8125rem;
  color: var(--text-2);
}

/* ── responsive ────────────────────────────────────────────────────── */

@media (max-width: 940px) {
  .hero-grid { grid-template-columns: 1fr; gap: var(--s6); }
  /* The figure follows the copy here. Ordering it first pushed the headline
     below the fold on a phone so the first thing a visitor met was a
     decorative mark. The claim leads on every width. */
  .hero-figure { justify-content: flex-start; }
  .hero-figure svg { width: min(44%, 180px); }
  .argument-grid { grid-template-columns: 1fr; }
  .products { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .site-nav a:not(.btn) { display: none; }
  .site-head .wrap { gap: var(--s3); }
}

@media (max-width: 420px) {
  .brand .name { font-size: 0.9375rem; }
  .hero-copy .actions .btn, .closing .actions .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .js .hero-figure .frame, .js .hero-figure .chev { stroke-dashoffset: 0; }
  .js .hero-figure .bar { opacity: 1; }
}