/* ════════════════════════════════════════════════════════════════════
   AdvaBoost — Base CSS
   Design tokens, typography, reset, layout primitives.
   ════════════════════════════════════════════════════════════════════ */

/* ─── Design tokens ───────────────────────────────────────────────── */
:root {
  /* Background system */
  --bg:        #0A192F;
  --bg2:       #10263E;
  --bg3:       #16304C;
  --bg4:       #071322;
  --surface:   rgba(255,255,255,.04);
  --surface2:  rgba(255,255,255,.07);
  --surface3:  rgba(255,255,255,.10);

  /* Brand accent — AdvaBoost turquoise */
  --green: #13D3D2;
  --green-d:   #0C9B9A;
  --green-l:   #56E6E5;
  --green-bg:  rgba(19,211,210,.10);
  --green-bdr: rgba(19,211,210,.28);

  /* Secondary accent — for Pulse / strategic tier */
  --gold:      #C9A961;
  --gold-bg:   rgba(201,169,97,.08);
  --gold-bdr:  rgba(201,169,97,.25);

  /* Text colors — high contrast for dark UI readability
     Tested on #0A192F: t1 white, t2 7:1, t3 5:1, t4 3:1 (WCAG AAA / AA) */
  --t1:  #FFFFFF;          /* primary — pure white for headings */
  --t2:  #E9F1FA;          /* secondary — near-white, brightened from #D9E4F5 */
  --t3:  #BCCDE3;          /* tertiary — brightened from #A5BBD9 */
  --t4:  #8CA3C2;          /* muted — brightened from #6E89AE */

  /* Borders */
  --bdr:   rgba(255,255,255,.12);
  --bdr2:  rgba(255,255,255,.20);
  --bdr3:  rgba(255,255,255,.28);

  /* Typography
     fs = serif display (was Cormorant — replaced with Fraunces, much better
          rendering of Czech/Slovak diacritics: ě, š, č, ř, ž, ď, ť, ň, á, í)
     fn = body sans (DM Sans, kept)
     fm = mono (IBM Plex Mono, kept) */
  --fs:  'Space Grotesk', 'Inter', system-ui, sans-serif;
  --fs-emph: 'Fraunces', 'EB Garamond', Georgia, serif;  /* only for italic accents */
  --fn:  'Inter', 'DM Sans', system-ui, sans-serif;
  --fm:  'IBM Plex Mono', 'Courier New', monospace;

  /* Radii */
  --r:   8px;
  --rl:  12px;
  --rxl: 18px;

  /* Motion */
  --t:    .2s;
  --t2dur:.4s;
  --ease: cubic-bezier(.4,0,.2,1);

  /* Shadows */
  --shadow:       0 4px 24px rgba(0,0,0,.5);
  --shadow-lg:    0 10px 48px rgba(0,0,0,.6);
  --shadow-green: 0 6px 28px rgba(19,211,210,.22);
  --shadow-gold:  0 6px 28px rgba(201,169,97,.22);
}

/* ─── Reset ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  font-size: 16.5px;
  overflow-x: hidden;
}
body {
  font-family: var(--fn);
  background: var(--bg);
  color: var(--t2);
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  font-weight: 400;
  overflow-x: hidden;
  max-width: 100vw;
}
@media (max-width: 720px) {
  html { font-size: 16px; }
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
input, textarea, select { font: inherit; color: inherit; }
ul, ol { list-style: none; }

/* ─── Typography ──────────────────────────────────────────────────── */
h1, h2, h3, h4, h5 {
  font-family: var(--fs);
  font-weight: 600;
  color: var(--t1);
  line-height: 1.2;
  letter-spacing: -.02em;
  /* prevent long words from forcing horizontal scroll */
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
  max-width: 100%;
}
h1 {
  font-size: clamp(1.7rem, 3.5vw, 2.9rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.028em;
}
h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); font-weight: 650; letter-spacing: -.022em; }
h3 { font-size: clamp(1.08rem, 1.8vw, 1.28rem); font-weight: 600; letter-spacing: -.015em; }
h4 {
  font-size: 1.05rem;
  font-family: var(--fn);
  font-weight: 600;
  letter-spacing: -.005em;
  font-variation-settings: normal;
}

p { margin-bottom: 1em; overflow-wrap: break-word; }
strong { color: var(--t1); font-weight: 600; }

em {
  font-family: var(--fs-emph);
  font-style: italic;
  font-weight: 400;
}

.eyebrow {
  display: inline-block;
  font-family: var(--fm);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 14px;
}

.lead {
  font-size: clamp(1rem, 1.8vw, 1.12rem);
  color: var(--t2);
  line-height: 1.78;
}

/* Numbers use mono */
.num, .price, .stat-val {
  font-family: var(--fm);
  letter-spacing: -.01em;
}

/* ─── Layout primitives ───────────────────────────────────────────── */
.container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}

section {
  padding: 80px 0;
  position: relative;
}
@media (max-width: 720px) {
  section { padding: 56px 0; }
  .container { padding: 0 18px; }
}
@media (max-width: 480px) {
  section { padding: 44px 0; }
  .container { padding: 0 14px; }
}

/* Section divider — subtle */
.divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--bdr2), transparent);
  margin: 0 auto;
  max-width: 1100px;
}

/* Decorative dot background */
.dot-bg {
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.04) 1px, transparent 0);
  background-size: 28px 28px;
}

/* Gradient mesh accent for hero */
.mesh-bg {
  position: relative;
  overflow: hidden;
}
.mesh-bg::before {
  content: '';
  position: absolute;
  inset: -10% -5% auto auto;
  width: 60%;
  height: 80%;
  background: radial-gradient(ellipse at top right, rgba(19,211,210,.12), transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.mesh-bg > * { position: relative; z-index: 1; }

/* ─── Utility ─────────────────────────────────────────────────────── */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.hidden { display: none !important; }
.text-green  { color: var(--green); }
.text-mono   { font-family: var(--fm); }
.text-serif  { font-family: var(--fs); }

/* Focus visible — keyboard navigation */
:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Selection */
::selection { background: var(--green); color: var(--bg); }

/* Smooth font loading */
@font-face { font-display: swap; }