/* ============================================================
   Spectra MacCollect — site styles
   Palette + type tokens derived from the build brief.
   Signature: monospace "seal line" motif (SHA-256 / sealed)
   — true to a product whose value is cryptographic sealing.
   ============================================================ */

/* self-hosted fonts — no external CDN calls */
@font-face{font-family:"Space Grotesk";src:url("fonts/space-grotesk-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap;}
@font-face{font-family:"Space Grotesk";src:url("fonts/space-grotesk-latin-500-normal.woff2") format("woff2");font-weight:500;font-display:swap;}
@font-face{font-family:"Space Grotesk";src:url("fonts/space-grotesk-latin-600-normal.woff2") format("woff2");font-weight:600;font-display:swap;}
@font-face{font-family:"Space Grotesk";src:url("fonts/space-grotesk-latin-700-normal.woff2") format("woff2");font-weight:700;font-display:swap;}
@font-face{font-family:"Inter";src:url("fonts/inter-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap;}
@font-face{font-family:"Inter";src:url("fonts/inter-latin-500-normal.woff2") format("woff2");font-weight:500;font-display:swap;}
@font-face{font-family:"Inter";src:url("fonts/inter-latin-600-normal.woff2") format("woff2");font-weight:600;font-display:swap;}
@font-face{font-family:"JetBrains Mono";src:url("fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap;}
@font-face{font-family:"JetBrains Mono";src:url("fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2");font-weight:500;font-display:swap;}


:root{
  --navy:#0f1a2d;        /* deepest background */
  --navy-2:#16243b;      /* dark panel */
  --navy-3:#1e3a6b;      /* mid gradient */
  --blue:#1e5bb8;        /* primary */
  --blue-bright:#2f6fd8; /* accent / button end */
  --ice:#e7eef9;         /* light section bg */
  --paper:#ffffff;
  --ink:#0e2038;         /* dark text on light */
  --muted:#5f6f8a;       /* secondary text on light */
  --muted-dk:#9fb1d0;    /* secondary text on dark */
  --seal:#2fa874;        /* verified green (light bg) */
  --seal-br:#9ef0c7;     /* verified green (dark bg) */
  --line:#d4ddea;        /* hairline on light */
  --line-dark:#27384f;   /* hairline on dark */

  --maxw:1120px;
  --rad:16px;
  --rad-sm:10px;

  --display:"Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --body:"Inter", "Helvetica Neue", Arial, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;font-family:var(--body);color:var(--ink);background:var(--paper);
  line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block;}
a{color:inherit;}

.container{max-width:var(--maxw);margin:0 auto;padding:0 24px;}

/* ---------- type ---------- */
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.12;letter-spacing:-.01em;margin:0 0 .5em;}
h1{font-size:clamp(2.2rem,5vw,3.5rem);font-weight:700;}
h2{font-size:clamp(1.7rem,3.4vw,2.5rem);}
h3{font-size:1.22rem;}
p{margin:0 0 1rem;}
.lead{font-size:clamp(1.05rem,1.8vw,1.25rem);color:var(--muted);}
.section--dark .lead,.section--ink .lead{color:var(--muted-dk);}

/* eyebrow: monospace label — the forensic/log vernacular */
.eyebrow{
  font-family:var(--mono);font-size:.78rem;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--blue);margin:0 0 1rem;display:inline-block;
}
.section--dark .eyebrow,.section--ink .eyebrow{color:#7fb0ff;}

/* the signature seal line */
.sealline{
  font-family:var(--mono);font-size:.82rem;letter-spacing:.02em;color:var(--muted-dk);
  display:inline-flex;align-items:center;gap:.6rem;flex-wrap:wrap;
  border:1px solid var(--line-dark);border-radius:999px;padding:.5rem .9rem;background:rgba(255,255,255,.03);
}
.sealline .ok{color:var(--seal-br);font-weight:500;}
.sealline .hash{color:#cfe0ff;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;font-family:var(--body);font-weight:600;
  font-size:.98rem;padding:.78rem 1.3rem;border-radius:999px;text-decoration:none;
  border:1px solid transparent;cursor:pointer;transition:transform .12s ease, box-shadow .2s ease, background .2s ease;
}
.btn--primary{background:linear-gradient(135deg,var(--blue-bright),var(--blue));color:#fff;
  box-shadow:0 8px 22px rgba(31,91,184,.35);}
.btn--primary:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(31,91,184,.45);}
.btn--ghost{background:transparent;border-color:var(--line-dark);color:#fff;}
.btn--ghost:hover{border-color:#5e78a0;background:rgba(255,255,255,.04);}
.btn--ink{background:var(--ink);color:#fff;}
.btn--ink:hover{transform:translateY(-1px);}
.btn--lg{padding:.95rem 1.7rem;font-size:1.05rem;}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(15,26,45,.85);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line-dark);}
.nav{display:flex;align-items:center;gap:1.2rem;padding:.7rem 24px;max-width:var(--maxw);margin:0 auto;flex-wrap:wrap;}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:#fff;margin-right:auto;}
.brand img{width:38px;height:38px;}
.brand b{font-family:var(--display);font-weight:700;font-size:1.12rem;letter-spacing:-.01em;}
.brand b span{font-weight:300;color:var(--muted-dk);}
.nav a.navlink{color:var(--muted-dk);text-decoration:none;font-size:.95rem;font-weight:500;padding:.3rem 0;border-bottom:2px solid transparent;}
.nav a.navlink:hover{color:#fff;}
.nav a.navlink[aria-current="page"]{color:#fff;border-bottom-color:var(--blue-bright);}

/* ---------- sections ---------- */
.section{padding:clamp(4rem,8vw,7rem) 0;}
.section--dark{background:var(--navy-2);color:#fff;}
.section--ink{background:radial-gradient(120% 120% at 25% 0%,var(--navy-3) 0%,var(--navy-2) 45%,var(--navy) 100%);color:#fff;}
.section--light{background:var(--ice);color:var(--ink);}
.section--paper{background:var(--paper);color:var(--ink);}
.section h2{max-width:18ch;}
.center{text-align:center;}
.center h2,.center .lead{margin-left:auto;margin-right:auto;}
.center .eyebrow{display:block;}

/* ---------- hero ---------- */
.hero{background:radial-gradient(125% 120% at 22% 18%,var(--navy-3) 0%,var(--navy-2) 46%,var(--navy) 100%);
  color:#fff;overflow:hidden;}
.hero .container{display:grid;grid-template-columns:1.05fr .95fr;gap:2.5rem;align-items:center;
  padding-top:clamp(3rem,6vw,5rem);padding-bottom:clamp(3rem,6vw,5rem);}
.hero h1{margin-bottom:.4em;}
.hero .lead{max-width:46ch;margin-bottom:1.6rem;}
.hero .cta-row{display:flex;gap:.8rem;flex-wrap:wrap;margin-bottom:1.6rem;}
.hero-art{border-radius:var(--rad);overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.5);}
.hero-art img{width:100%;}

/* stacked hero: centered copy, wide product "window" below */
.hero--stacked .container{grid-template-columns:1fr;text-align:center;gap:2.4rem;}
.hero--stacked .hero-copy{max-width:780px;margin:0 auto;}
.hero--stacked .hero-copy .lead{margin-left:auto;margin-right:auto;}
.hero--stacked .cta-row{justify-content:center;}
.hero-window{max-width:1010px;width:100%;margin:0 auto;border-radius:var(--rad);overflow:hidden;
  border:1px solid var(--line-dark);box-shadow:0 30px 70px rgba(0,0,0,.55);}
.hero-window img{width:100%;display:block;}
.hero-cap{font-family:var(--mono);font-size:.74rem;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted-dk);margin-top:.8rem;}

/* ---------- grids / cards ---------- */
.grid{display:grid;gap:1.2rem;}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--rad);padding:1.5rem;}
.section--dark .card,.section--ink .card{background:rgba(255,255,255,.04);border-color:var(--line-dark);}
.card h3{margin-bottom:.35em;}
.card p{color:var(--muted);margin:0;font-size:.97rem;}
.section--dark .card p,.section--ink .card p{color:var(--muted-dk);}
.card .tick{color:var(--seal);font-weight:700;}
.section--dark .card .tick,.section--ink .card .tick{color:var(--seal-br);}

/* two-column prose */
.split{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:start;}
.split .col h3{font-family:var(--display);}

/* ---------- steps (a real sequence → numbered) ---------- */
.steps{counter-reset:step;display:grid;gap:1rem;}
.step{display:grid;grid-template-columns:auto 1fr;gap:1.1rem;align-items:start;
  border:1px solid var(--line-dark);border-radius:var(--rad);padding:1.3rem 1.4rem;background:rgba(255,255,255,.03);}
.step::before{counter-increment:step;content:counter(step,decimal-leading-zero);
  font-family:var(--mono);font-size:.9rem;color:#7fb0ff;border:1px solid var(--line-dark);
  border-radius:8px;padding:.35rem .55rem;line-height:1;}
.step h3{margin:.1rem 0 .25rem;color:#fff;}
.step p{margin:0;color:var(--muted-dk);font-size:.97rem;}

/* ---------- figure / screenshot ---------- */
.figure{margin:0;}
.figure img{border-radius:var(--rad-sm);width:100%;}
.figure figcaption{font-family:var(--mono);font-size:.74rem;letter-spacing:.04em;color:var(--muted);
  margin-top:.7rem;text-transform:uppercase;}
.section--dark .figure figcaption,.section--ink .figure figcaption{color:var(--muted-dk);}

/* ---------- defensibility callout ---------- */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:2rem;}
.pillar{border-top:2px solid var(--blue-bright);padding-top:1rem;}
.pillar h3{font-size:1.05rem;color:#fff;}
.pillar p{color:var(--muted-dk);font-size:.95rem;margin:0;}

/* ---------- pricing ---------- */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;align-items:stretch;}
.price{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--rad);padding:1.8rem;}
.price.is-feature{border-color:var(--blue-bright);box-shadow:0 16px 40px rgba(31,91,184,.14);}
.price .tag{font-family:var(--mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);}
.price .amt{font-family:var(--display);font-size:2.4rem;font-weight:700;margin:.3rem 0 0;}
.price .amt small{font-size:1rem;font-weight:500;color:var(--muted);}
.price p{color:var(--muted);font-size:.95rem;}
.price .btn{margin-top:auto;justify-content:center;}

/* ---------- roadmap (clearly set apart from shipping features) ---------- */
.roadmap{border:1px dashed var(--line-dark);border-radius:var(--rad);padding:1.6rem 1.8rem;background:rgba(255,255,255,.02);}
.roadmap .tag{font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:#7fb0ff;}
.roadmap ul{margin:.8rem 0 0;padding:0;list-style:none;display:grid;gap:.7rem;}
.roadmap li{color:var(--muted-dk);padding-left:1.4rem;position:relative;font-size:.97rem;}
.roadmap li::before{content:"○";position:absolute;left:0;color:#7fb0ff;}

/* ---------- misc list ---------- */
.ticklist{list-style:none;margin:0;padding:0;display:grid;gap:.8rem;}
.ticklist li{padding-left:1.7rem;position:relative;}
.ticklist li::before{content:"✓";position:absolute;left:0;color:var(--seal);font-weight:700;}
.section--dark .ticklist li::before,.section--ink .ticklist li::before{color:var(--seal-br);}

/* ---------- CTA band ---------- */
.ctaband{background:linear-gradient(135deg,var(--blue),var(--blue-bright));color:#fff;text-align:center;}
.ctaband h2{color:#fff;margin-bottom:.4em;}
.ctaband .lead{color:rgba(255,255,255,.9);}

/* ---------- footer ---------- */
.site-footer{background:var(--navy);color:var(--muted-dk);padding:3rem 0 2rem;border-top:1px solid var(--line-dark);}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2rem;}
.site-footer a{color:var(--muted-dk);text-decoration:none;display:block;padding:.2rem 0;font-size:.95rem;}
.site-footer a:hover{color:#fff;}
.site-footer h4{font-family:var(--display);color:#fff;font-size:.95rem;letter-spacing:.04em;text-transform:uppercase;margin:0 0 .6rem;}
.footer-brand{display:flex;align-items:center;gap:.6rem;margin-bottom:.8rem;}
.footer-brand img{width:42px;height:42px;}
.footer-brand b{font-family:var(--display);color:#fff;font-size:1.1rem;}
.disclaimer{margin-top:2.2rem;padding-top:1.4rem;border-top:1px solid var(--line-dark);font-size:.82rem;color:#6f82a3;line-height:1.6;}

/* ---------- responsive ---------- */
@media (max-width:880px){
  .hero .container{grid-template-columns:1fr;}
  .hero-art{order:-1;}
  .grid-3,.grid-2,.pillars,.price-grid{grid-template-columns:1fr;}
  .split{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;gap:1.4rem;}
  .nav{gap:.8rem 1rem;}
  .brand{margin-right:0;width:100%;}
}

/* ---------- a11y ---------- */
a:focus-visible,.btn:focus-visible{outline:3px solid #7fb0ff;outline-offset:3px;border-radius:6px;}
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto !important;transition:none !important;}
}