/* ==========================================================================
   Quadzero — base styles
   Type, layout shell, buttons and the sticky header. Colours come from
   tokens.css; navigation (mega menu + mobile drill-down) lives in nav.css.
   ========================================================================== */

:root{
  /* Type */
  --font-head: "Satoshi", "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

  /* Shape */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;

  --shell: 1200px;
  --header-h: 76px;
}

/* --------------------------------------------------------------------------
   Reset / base
   -------------------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 20px); }
body{
  margin:0;
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.65;
  color:var(--body);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{
  font-family:var(--font-head);
  color:var(--ink);
  margin:0 0 .5em;
  font-weight:700;
  letter-spacing:-.02em;
  line-height:1.18;
}
h1{ font-size:clamp(2.1rem, 4.6vw, 3.6rem); font-weight:900; letter-spacing:-.03em; }
h2{ font-size:clamp(1.6rem, 2.9vw, 2.35rem); }
h3{ font-size:1.2rem; }
p{ margin:0 0 1rem; }
.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:24px; }

/* --------------------------------------------------------------------------
   Shared bits
   -------------------------------------------------------------------------- */
.eyebrow{
  font-family:var(--font-head);
  font-size:.75rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--blue);
  margin:0 0 .75rem;
}
.accent{ color:var(--brand); }

.btn{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--font-head); font-weight:600; font-size:.875rem;
  padding:.72rem 1.4rem;
  border-radius:12px;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  white-space:nowrap;
}
.btn-lg{ padding:.95rem 1.8rem; font-size:.95rem; }
.btn-block{ width:100%; justify-content:center; }
.btn-primary{ background:var(--blue); color:var(--white); box-shadow:var(--shadow-btn); }
.btn-primary:hover{ background:var(--blue-600); transform:translateY(-2px); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn-ghost:hover{ background:var(--white); border-color:var(--blue); color:var(--blue); }

/* small arrow glyph on CTAs */
.spark{
  width:14px; height:14px; flex:none;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M13 2 4.5 13.5H11L10 22l8.5-11.5H12L13 2Z'/></svg>") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M13 2 4.5 13.5H11L10 22l8.5-11.5H12L13 2Z'/></svg>") center/contain no-repeat;
}

.link-arrow{
  font-family:var(--font-head); font-weight:600; font-size:.875rem;
  color:var(--blue); display:inline-flex; align-items:center; gap:.4rem;
}
.link-arrow::after{ content:"→"; transition:transform .18s ease; }
.link-arrow:hover::after{ transform:translateX(4px); }

:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header{
  position:sticky; top:0; z-index:60;
  background:var(--navy);
  transition:box-shadow .2s ease, background .2s ease;
}
.site-header.is-stuck{ box-shadow:0 6px 24px rgba(11,29,42,.28); }
.header-inner{
  height:var(--header-h);
  display:flex; align-items:center; justify-content:space-between;
}
/* The logo keeps its true colours on the navy bar (gray 5:1, blue 6.4:1). */
.brand{ display:flex; align-items:center; flex:none; }
.brand-logo{ height:34px; width:auto; }
.caret{
  width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent;
  border-top:5px solid currentColor; opacity:.7;
}

/* --------------------------------------------------------------------------
   Placeholder hero (index.html only, until real content lands)
   -------------------------------------------------------------------------- */
.hero{
  background:linear-gradient(180deg, var(--tint) 0%, var(--tint-2) 100%);
  padding:clamp(64px, 9vw, 128px) 0;
}
.hero p.lead{ font-size:1.1rem; max-width:620px; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:1.5rem; }