/* ============================================================
   Mo.one Web · Design tokens
   Zdroj: Mo.one Corporate Identity v2.0 (2026-06-30) + Web plán, sekce 03
   Pravidla: hloubka = luminance, nikdy stín · glow místo stínů
   DM Sans 300/400/500/600 (700+ zakázáno) · JetBrains Mono jen čísla/kódy
   ============================================================ */

:root {
  /* Brand */
  --blue: #445FE1;          /* Mo.one Blue, akcent obou módů */
  --blue-light: #C9DAFF;
  --navy: #182644;          /* Dark Blue: text light módu, neutrální CTA */

  /* Audience CTA barvy (jen CTA + audience sekce) */
  --aud-client: #445FE1;
  --aud-merchant: #2AD590;
  --aud-franchise: #6B5FCF;
  --aud-neutral: #182644;

  /* Text */
  --ink: #182644;                       /* light mode text, ne pure black */
  --ink-mut: rgba(24, 38, 68, .64);
  --ink-faint: rgba(24, 38, 68, .42);
  --paper-ink: #EBEBEB;                 /* dark mode text, ne pure white */
  --paper-mut: rgba(235, 235, 235, .64);
  --paper-faint: rgba(235, 235, 235, .40);

  /* Plochy: světlý žebřík */
  --s0: #FAFAF7;
  --s1: #F3F2EC;
  --s2: #E8E7DF;
  --s3: #DDDBCF;

  /* Plochy: tmavý žebřík */
  --d0: #000000;
  --d1: #111111;
  --d2: #1A1A1A;
  --d3: #242424;

  /* Linky (bordery > stíny) */
  --line: #E8E7DF;
  --line-strong: #DDDBCF;
  --line-dark: #242424;
  --line-dark-strong: #333333;

  /* Glow rodiny (náhrada za drop shadow) */
  --glow-accent-ambient: rgba(68, 95, 225, .18);
  --glow-accent-interactive: rgba(68, 95, 225, .38);
  --glow-green: rgba(42, 213, 144, .30);
  --glow-purple: rgba(107, 95, 207, .32);

  /* Gradient: jen celoplošné brand pozadí, start vždy Dark Blue */
  --grad-brand: linear-gradient(135deg, #182644 0%, #24337c 55%, #445FE1 130%);
  --grad-merchant: linear-gradient(135deg, #182644 0%, #1d4d46 60%, #2AD590 145%);
  --grad-franchise: linear-gradient(135deg, #182644 0%, #3b3670 60%, #6B5FCF 140%);

  /* Motion (CI sekce 13) */
  --dur-instant: 80ms;
  --dur-fast: 160ms;
  --dur-base: 240ms;
  --dur-slow: 480ms;
  --dur-hero: 800ms;
  --ease-out: cubic-bezier(.2, .9, .25, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

  /* Typo */
  --font-sans: 'DM Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Layout */
  --wrap: 1180px;
  --wrap-narrow: 880px;
  --r-card: 16px;
  --r-btn: 12px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto; }

body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--s0);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; }

::selection { background: var(--blue-light); color: var(--navy); }

/* ---------- Typografie ---------- */
h1, h2, h3, h4 { font-weight: 500; line-height: 1.12; letter-spacing: -.03em; text-wrap: balance; }

.t-hero {
  font-size: clamp(2.7rem, 6.2vw, 4.8rem);
  letter-spacing: -.04em;
  font-weight: 500;
  line-height: 1.04;
}
.t-display { font-size: clamp(2rem, 4.4vw, 3.2rem); letter-spacing: -.035em; font-weight: 500; }
.t-h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); }
.t-h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); }
.t-lead { font-size: clamp(1.05rem, 1.6vw, 1.25rem); line-height: 1.55; font-weight: 300; }

.mono { font-family: var(--font-mono); font-feature-settings: 'tnum'; font-variant-numeric: tabular-nums; }
.num { font-family: var(--font-mono); font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

.kicker {
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--blue);
}
.dark .kicker { color: var(--blue-light); }

.mut { color: var(--ink-mut); }
.dark .mut { color: var(--paper-mut); }

/* ---------- Plochy ---------- */
.dark { background: var(--d0); color: var(--paper-ink); }
.dark h1, .dark h2, .dark h3 { color: #fff; }

/* ---------- Layout ---------- */
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 clamp(20px, 4vw, 40px); }
.wrap-narrow { max-width: var(--wrap-narrow); margin: 0 auto; padding: 0 clamp(20px, 4vw, 40px); }

/* ---------- Tlačítka ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: var(--r-btn);
  padding: 14px 26px;
  font-weight: 500;
  font-size: .98rem;
  letter-spacing: -.01em;
  border: 1px solid transparent;
  transition: transform var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
  white-space: nowrap;
}
.btn:active { transform: scale(.985); }

.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: #3a53cf; box-shadow: 0 0 28px var(--glow-accent-interactive); }
/* Kontrast: modrá #445FE1 se ztrácí na tmavých modrých gradientech - na dark bílá varianta */
.dark .btn-primary { background: #fff; color: var(--navy); }
.dark .btn-primary:hover { background: var(--blue-light); color: var(--navy); box-shadow: 0 0 28px rgba(255, 255, 255, .18); }
/* Jednota napříč světy: primární CTA na tmavém hero je bílé i v merchant/franšíza světě */
.hero.dark .btn-green, .hero.dark .btn-purple { background: #fff; color: var(--navy); }
.hero.dark .btn-green:hover, .hero.dark .btn-purple:hover { background: rgba(255, 255, 255, .85); color: var(--navy); box-shadow: none; }

.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: #21335b; }

.btn-green { background: var(--aud-merchant); color: #0b2c1e; }
.btn-green:hover { box-shadow: 0 0 28px var(--glow-green); }

.btn-purple { background: var(--aud-franchise); color: #fff; }
.btn-purple:hover { box-shadow: 0 0 28px var(--glow-purple); }

.btn-ghost { border-color: var(--line-strong); color: var(--ink); background: transparent; }
.btn-ghost:hover { border-color: var(--ink-faint); }
.dark .btn-ghost { border-color: rgba(235, 235, 235, .38); color: rgba(235, 235, 235, .92); }
.dark .btn-ghost:hover { border-color: #fff; color: #fff; background: rgba(255, 255, 255, .08); }

.btn-lg { padding: 17px 32px; font-size: 1.05rem; }

/* Interactive glow: dýchání jen na primárních CTA */
.glow-breathe { animation: breathe 3.2s var(--ease-out) infinite; }
@keyframes breathe {
  0%, 100% { box-shadow: 0 0 18px var(--glow-accent-ambient); }
  50% { box-shadow: 0 0 34px var(--glow-accent-interactive); }
}

/* ---------- Karty ---------- */
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 28px;
}
.dark .card { background: var(--d1); border-color: var(--line-dark); }

/* ---------- Chips ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 6px 14px;
  color: var(--ink-mut);
  background: transparent;
}
.dark .chip { border-color: var(--line-dark-strong); color: var(--paper-mut); }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 90ms; }
.reveal[data-delay="2"] { transition-delay: 180ms; }
.reveal[data-delay="3"] { transition-delay: 270ms; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}