/* ============================================================
   Axel Chase — base / reset / primitives (light editorial)
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--ink);
  background-color: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
/* animated ambient glow — fixed to the viewport so every section shares the
   same drifting background (uniform on long pages), transform-only = cheap */
body::before {
  content: ""; position: fixed; inset: -10%; z-index: -1; pointer-events: none;
  background-image:
    radial-gradient(680px 600px at 16% 22%, rgba(10,111,240,0.11), transparent 60%),
    radial-gradient(700px 560px at 84% 30%, rgba(42,139,255,0.10), transparent 60%),
    radial-gradient(620px 620px at 50% 88%, rgba(10,111,240,0.06), transparent 62%);
  will-change: transform;
  animation: ambientDrift 30s ease-in-out infinite alternate;
}
@keyframes ambientDrift {
  0%   { transform: translate3d(-2.5%, -1.5%, 0) scale(1); }
  50%  { transform: translate3d(1.5%, 1%, 0) scale(1.06); }
  100% { transform: translate3d(2.5%, 2.5%, 0) scale(1.1); }
}
@media (prefers-reduced-motion: reduce) { body::before { animation: none; } }
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
::selection { background: var(--accent); color: #fff; }

/* no orphan words anywhere — balance headings, avoid single-word last lines */
h1, h2, h3, .display, .h2, .h3, .hero__title, .phero h1, .cta h2,
.feature__kicker, .editorial__quote, .manifesto__lead, .faq__q, .step h3, .tabpanel h3 {
  text-wrap: balance;
}
p, .lead, .hero__sub, .phero__sub, .prose p { text-wrap: pretty; }

/* layout helpers */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { position: relative; padding-block: clamp(3.25rem, 6vw, 6rem); }
.eyebrow {
  font-size: var(--t-eyebrow); font-weight: 600; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--accent);
  display: inline-flex; align-items: center; gap: 0.7em;
}
.eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--accent); opacity: 0.6; }
.eyebrow.center::before { display: none; }

/* type */
.display { font-family: var(--display); font-weight: 600; line-height: 0.98;
  letter-spacing: -0.02em; font-size: var(--t-display); }
.h2 { font-family: var(--display); font-weight: 600; line-height: 1.02;
  letter-spacing: -0.015em; font-size: var(--t-h2); }
.h3 { font-family: var(--display); font-weight: 500; line-height: 1.08;
  letter-spacing: -0.01em; font-size: var(--t-h3); }
.lead { font-size: var(--t-lead); color: var(--text-soft); line-height: 1.5; }
.muted { color: var(--text-soft); }

/* glassy sheen on blue/accent text — light-to-deep gradient + soft highlight.
   NOTE: the big italic hero/phero numerals are deliberately NOT in this list —
   the gradient uses background-clip:text, which clips the slanted glyph edges.
   They use a plain solid accent colour instead (see hero.css / page.css). */
.feature__kicker em, .editorial__quote b,
.manifesto__lead b, .accent, .eyebrow, .editorial .eyebrow {
  background: linear-gradient(165deg, var(--accent-2) 0%, var(--accent) 52%, var(--accent-deep) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
/* a touch of right breathing room after the italic accent numerals */
.hero__title em, .phero h1 em { margin-right: 0.07em; }
/* on dark bands the gradient should glow lighter */
.editorial__quote b, .editorial .eyebrow {
  background: linear-gradient(165deg, #7fb0ff 0%, var(--accent-2) 60%, var(--accent) 100%);
  -webkit-background-clip: text; background-clip: text;
}

/* buttons — flat, NO glow/shine */
.btn {
  display: inline-flex; align-items: center; gap: 0.6em;
  font-size: var(--t-small); font-weight: 600; letter-spacing: 0.01em;
  padding: 0.95em 1.6em; border-radius: 100px;
  transition: background-color .35s var(--ease), color .35s var(--ease),
              border-color .35s var(--ease), transform .35s var(--ease);
  box-shadow: none;
}
.btn svg { width: 16px; height: 16px; transition: transform .35s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-deep); transform: translateY(-2px); }
.btn--ghost { color: var(--ink); border: 1px solid var(--line-3); background: transparent; }
.btn--ghost:hover { border-color: var(--ink); background: rgba(12,20,34,0.04); }
.btn--dark { background: var(--ink); color: var(--paper); }
.btn--dark:hover { background: #000; transform: translateY(-2px); }
/* on dark bands */
.on-dark .btn--ghost { color: var(--dark-text); border-color: var(--dark-line); }
.on-dark .btn--ghost:hover { border-color: var(--dark-text); background: rgba(255,255,255,0.06); }

/* Content is ALWAYS visible — no reveal animation, no JS dependency.
   Nothing here can ever leave content hidden. (data-reveal kept as a no-op
   hook so existing markup is harmless.) */
[data-reveal] { opacity: 1 !important; transform: none !important; }
.line, .line > span { display: block; }