/* =====================================================================
   The One Percent – barvy, písmo a základní prvky značky
   Verze 1.0 · říjen 2026 · zdroj pravdy: brand manuál
   Použití: <link rel="stylesheet" href="onepercent.css"> a fonty z Google Fonts:
   https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400..900;1,400..900&family=Inter:wght@400;500;600;700&display=swap
   ===================================================================== */

:root {
  /* --- Modrá: jediná barva loga --- */
  --op-blue: #0066FF;        /* Modrá One Percent: tečka a „1“ v logu, tlačítka, zvýraznění */
  --op-blue-deep: #0400FF;   /* Hluboká modrá: jen v přechodech */
  --op-blue-light: #5B9BFF;  /* Světlá modrá: zvýrazněný text na tmavém pozadí, záře */

  /* --- Tmavé --- */
  --op-ink: #050811;         /* Inkoust: hlavní text, černé logo */
  --op-night: #0A0E18;       /* Noc: tmavé sekce a karty */
  --op-navy: #090E1A;        /* Námořní: začátek nočního přechodu */
  --op-navy-2: #121F3E;      /* Námořní 2: konec nočního přechodu */
  --op-midnight: #000D2E;    /* Půlnoc: začátek přechodu velkých karet */
  --op-midnight-2: #122762;  /* Půlnoc 2: konec přechodu velkých karet */

  /* --- Světlé --- */
  --op-white: #FFFFFF;
  --op-page: #E7EAF0;        /* Pozadí stránek */
  --op-page-soft: #EEF2F8;   /* Světlejší pozadí, navigace */
  --op-surface: #D2DDEE;     /* Plocha: pruhy a podklady sekcí */
  --op-line: rgba(0, 102, 255, 0.10);

  /* --- Text --- */
  --op-text: #0C111D;
  --op-muted: #5A6478;       /* Vedlejší text na světlém */
  --op-subtle: #AEB7C9;      /* Linky, neaktivní prvky, vedlejší text na tmavém */

  /* --- Doplňkové (střídmě) --- */
  --op-gold: #FFBD16;        /* Jen hvězdičky hodnocení */
  --op-violet: #8D02FF;      /* VIP a prémiové nabídky */
  --op-red: #E44100;         /* Chyby a varování */

  /* --- Akcenty programů --- */
  --op-program-superhuman: #B49C6C;
  --op-program-ai: #BF01FF;

  /* --- Přechody --- */
  --op-gradient-midnight: linear-gradient(180deg, var(--op-midnight), var(--op-midnight-2));
  --op-gradient-night: linear-gradient(160deg, var(--op-navy), var(--op-navy-2));
  --op-gradient-blue: linear-gradient(120deg, var(--op-blue) 0%, var(--op-blue-deep) 55%, var(--op-navy) 100%);

  /* --- Písmo --- */
  --op-font-display: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --op-font-text: "Inter", "Helvetica Neue", Arial, sans-serif;

  /* --- Tvary --- */
  --op-radius-card: 24px;
  --op-radius-medium: 18px;
  --op-radius-small: 12px;
  --op-radius-pill: 999px;
  --op-shadow-card: 0 20px 60px rgba(20, 40, 90, 0.12);
  --op-glass-border: rgba(255, 255, 255, 0.35) rgba(255, 255, 255, 0.15) rgba(255, 255, 255, 0.15) rgba(255, 255, 255, 0.35);
}

/* ---------- Nadpisy: verzálky, Montserrat, část modrou kurzívou ---------- */
.op-h1, .op-h2, .op-h3 {
  font-family: var(--op-font-display);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin: 0;
}
.op-h1 { font-weight: 800; font-size: clamp(2.5rem, 6vw, 4rem); line-height: 1.05; }
.op-h2 { font-weight: 800; font-size: clamp(2rem, 4.2vw, 2.75rem); line-height: 1.1; }
.op-h3 { font-weight: 700; font-size: 1.75rem; line-height: 1.15; }
.op-h1 em, .op-h2 em, .op-h3 em { font-style: italic; color: var(--op-blue); }
.op-dark .op-h1 em, .op-dark .op-h2 em, .op-dark .op-h3 em { color: var(--op-blue-light); }
.op-eyebrow {
  font-family: var(--op-font-display); font-weight: 700; font-size: 0.8125rem;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.op-text { font-family: var(--op-font-text); font-size: 1.0625rem; line-height: 1.6; color: var(--op-text); }
.op-text b, .op-text strong { font-weight: 700; }

/* ---------- Tlačítka: pilulka, verzálky ---------- */
.op-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 3.125rem; padding: 0.8125rem 1.75rem;
  border-radius: var(--op-radius-pill);
  border: 1px solid; border-color: var(--op-glass-border);
  background: var(--op-blue); color: var(--op-white);
  font-family: var(--op-font-display); font-weight: 700; font-size: 0.9375rem;
  letter-spacing: 0.02em; text-transform: uppercase; text-decoration: none;
  box-shadow: 0 8px 24px rgba(0, 102, 255, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  cursor: pointer; transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.op-btn:hover { transform: translateY(-1px); box-shadow: 0 12px 30px rgba(0, 102, 255, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.op-btn--glass { background: rgba(255, 255, 255, 0.12); box-shadow: none; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.op-btn--light { background: rgba(0, 102, 255, 0.10); color: var(--op-blue); border-color: rgba(0, 102, 255, 0.25); box-shadow: none; }

/* ---------- Štítek: světle modrá pilulka, modrá kurzíva ---------- */
.op-tag {
  display: inline-flex; align-items: center; padding: 0.4rem 1rem;
  border-radius: var(--op-radius-pill); border: 1px solid rgba(0, 102, 255, 0.35);
  background: rgba(0, 102, 255, 0.08); color: var(--op-blue);
  font-family: var(--op-font-display); font-weight: 700; font-style: italic;
  font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase;
}

/* ---------- Karty ---------- */
.op-card {
  border-radius: var(--op-radius-card); padding: 2.5rem;
  background: var(--op-gradient-night); color: var(--op-white);
  box-shadow: var(--op-shadow-card);
}
.op-card--blue { background: var(--op-gradient-blue); }
.op-card--midnight { background: var(--op-gradient-midnight); }
.op-card p { color: rgba(255, 255, 255, 0.8); font-family: var(--op-font-text); line-height: 1.6; }
.op-card p b { color: var(--op-white); }

/* ---------- Čísla a hodnocení ---------- */
.op-stat b { display: block; font-family: var(--op-font-display); font-weight: 700; font-size: 2.25rem; color: var(--op-blue); font-variant-numeric: tabular-nums; }
.op-stat span { font-family: var(--op-font-text); font-size: 0.9375rem; color: var(--op-muted); }
.op-rating { font-family: var(--op-font-display); text-align: center; }
.op-rating b { display: block; font-size: 2.5rem; font-weight: 700; color: var(--op-ink); }
.op-rating .op-stars { color: var(--op-gold); letter-spacing: 0.1em; font-size: 1.5rem; }
.op-rating small { display: block; color: var(--op-muted); font-family: var(--op-font-text); }