/* ============================================================
   FLUXONOS — Design System  (v2 · real brand: blue + ink)
   Tokens, base, typography, layout, flux-wave system
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Hanken+Grotesk:wght@400;500;600;700;800&display=swap');

:root {
  /* ---- Brand (sampled from logo) ---- */
  --blue:        #3E79EA;   /* primary flux blue */
  --blue-600:    #2F66D6;
  --blue-700:    #2553BC;
  --blue-300:    #7BA4F2;
  --blue-bright: #5B8FF0;   /* energy accent on dark */
  --blue-wash:   #EAF0FD;   /* soft blue surface */
  --blue-wash-2: #DCE7FB;

  --ink:        #1D1D1F;    /* near-black, brand */
  --ink-900:    #131316;    /* darkest section bg */
  --ink-800:    #1A1A1F;
  --ink-700:    #23232A;
  --ink-600:    #2E2E37;

  --paper:      #FFFFFF;
  --paper-2:    #F6F7FA;    /* off-white surface */
  --paper-3:    #EEF1F6;

  --line:        rgba(29,29,31,.10);
  --line-strong: rgba(29,29,31,.16);
  --line-dark:   rgba(255,255,255,.12);

  --text:       #1D1D1F;
  --muted:      #585A63;
  --muted-2:    #8A8D97;
  --on-dark:     #ECEEF3;
  --on-dark-mut: #9A9DAA;

  /* ---- Type ---- */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-text:    'Hanken Grotesk', system-ui, sans-serif;

  /* ---- Radius ---- */
  --r-sm: 8px;
  --r:    14px;
  --r-lg: 22px;
  --r-xl: 30px;
  --r-pill: 999px;

  /* ---- Shadow ---- */
  --sh-sm: 0 1px 2px rgba(29,29,31,.05), 0 2px 8px rgba(29,29,31,.05);
  --sh:    0 6px 18px rgba(29,29,31,.07), 0 14px 40px rgba(29,29,31,.06);
  --sh-lg: 0 22px 60px rgba(29,29,31,.14), 0 8px 22px rgba(29,29,31,.08);
  --sh-blue: 0 16px 40px rgba(62,121,234,.28);

  /* ---- Layout ---- */
  --maxw: 1200px;
  --maxw-wide: 1340px;
  --gut: clamp(20px, 5vw, 60px);

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-text);
  color: var(--text);
  background: var(--paper);
  line-height: 1.55;
  font-size: clamp(16px, 1.05vw, 17.5px);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul { list-style: none; }
::selection { background: var(--blue); color: #fff; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}
.h-display {
  font-size: clamp(2.7rem, 7vw, 5.4rem);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.04em;
}
h1 { font-size: clamp(2.2rem, 5.2vw, 3.8rem); letter-spacing: -0.035em; }
h2 { font-size: clamp(1.85rem, 4vw, 3.1rem); letter-spacing: -0.03em; }
h3 { font-size: clamp(1.2rem, 2.1vw, 1.55rem); }
h4 { font-size: 1.1rem; font-weight: 600; }
p  { text-wrap: pretty; }

.lede {
  font-size: clamp(1.06rem, 1.5vw, 1.3rem);
  line-height: 1.55;
  color: var(--muted);
  font-weight: 400;
}

/* Overline — mono-ish index label (replaces AI pill badges) */
.overline {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue);
}
.overline::before {
  content: ""; width: 30px; height: 1.5px; background: currentColor; opacity: .55;
}
.overline.on-dark { color: var(--blue-bright); }
.overline.center { justify-content: center; }
.overline.bare::before { display: none; }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
.wrap-wide { width: 100%; max-width: var(--maxw-wide); margin-inline: auto; padding-inline: var(--gut); }
.section { padding-block: clamp(56px, 8.5vw, 130px); }
.section-sm { padding-block: clamp(44px, 6vw, 84px); }

.section.dark { background: var(--ink-900); color: var(--on-dark); }
.section.dark h1, .section.dark h2, .section.dark h3, .section.dark h4 { color: #fff; }
.section.dark .lede { color: var(--on-dark-mut); }
.section.wash { background: var(--paper-2); }
.section.cream { background: var(--paper-2); }

.eyebrow-row, .head-block { display: flex; flex-direction: column; gap: 18px; max-width: 740px; }
.eyebrow-row.center, .head-block.center { margin-inline: auto; text-align: center; align-items: center; }

.grid { display: grid; gap: clamp(16px, 2vw, 26px); }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 980px) {
  .cols-4 { grid-template-columns: repeat(2, 1fr); }
  .cols-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; }
}

/* ---------- Flux wave divider (signature) ---------- */
.wave-sep { display: block; width: 100%; height: clamp(26px, 3.4vw, 60px); }
.wave-sep svg { width: 100%; height: 100%; display: block; }

/* ---------- Scroll reveal ---------- */
[data-reveal] {
  opacity: 0; transform: translateY(28px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].in { opacity: 1; transform: none; }
[data-reveal="fade"] { transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------- Scroll progress ---------- */
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 200; pointer-events: none; }
.scroll-progress i { display: block; height: 100%; transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--blue), var(--blue-bright)); box-shadow: 0 0 14px rgba(62,121,234,.55); }

/* ---------- Cascading checklist reveal ---------- */
.checklist li { opacity: 0; transform: translateX(-12px);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
  transition-delay: calc(var(--ci, 0) * 90ms + 120ms); }
[data-reveal].in .checklist li { opacity: 1; transform: none; }

/* ---------- Living glow in dark sections ---------- */
.section.dark { position: relative; overflow: hidden; }
.section.dark > .wrap { position: relative; z-index: 1; }
.section.dark::before { content: ""; position: absolute; width: 680px; height: 680px; border-radius: 50%;
  top: -360px; right: -180px; pointer-events: none;
  background: radial-gradient(circle, rgba(62,121,234,.16), transparent 64%);
  animation: glowDrift 19s ease-in-out infinite; }
@keyframes glowDrift { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-30px,26px) scale(1.09); } }

@media (prefers-reduced-motion: reduce) {
  .scroll-progress { display: none; }
  .checklist li { opacity: 1 !important; transform: none !important; }
  .section.dark::before { animation: none; }
}

/* ---------- Utilities ---------- */
.text-blue { color: var(--blue); }
.center { text-align: center; }
.mt-s { margin-top: 14px; }
.mt-m { margin-top: 28px; }
.mt-l { margin-top: 48px; }
.maxw-prose { max-width: 62ch; }
.flux-underline {
  background: linear-gradient(transparent 62%, rgba(62,121,234,.22) 62%);
}