/* ============================================================================
   ENIQ · Design language override — "idea-reality" visual system  (v2, calmed)
   Loaded AFTER style.min.css. ADDITIVE SKIN ONLY. No HTML / structure / copy.
   v2: glow + gradients dialed DOWN for a restrained, premium B2B/enterprise feel
   (not gaming/crypto). Keeps ENIQ brand colours. Reversible (delete file + link).
   ============================================================================ */

:root {
  --ds-ease: cubic-bezier(.77, 0, .175, 1);   /* ease-in-out-quart (spec §9) */
  --ds-morph: 425ms;
  --ease-default: cubic-bezier(.77, 0, .175, 1);
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 16px;   /* was 12 — 15/16px default radius language (spec §7) */
  --r-xl: 24px;
}

/* ---- DEPTH via soft colour-tinted glow — restrained (P3) ------------------- */
.card {
  border-radius: 16px;
  border-color: rgba(129, 74, 200, 0.14);
  background: linear-gradient(160deg, rgba(129, 74, 200, 0.035) 0%, var(--surface-2, #111114) 60%);
  box-shadow: 0 26px 54px -50px rgba(129, 74, 200, 0.18);
  transition: transform var(--ds-morph) var(--ds-ease),
              border-radius var(--ds-morph) var(--ds-ease),
              box-shadow var(--ds-morph) var(--ds-ease),
              border-color var(--ds-morph) var(--ds-ease),
              background var(--ds-morph) var(--ds-ease);
}
.card:hover {
  transform: translateY(-5px);
  border-radius: 20px;
  border-color: rgba(129, 74, 200, 0.30);
  background: linear-gradient(160deg, rgba(129, 74, 200, 0.07) 0%, var(--surface-3, #1a1a1f) 60%);
  box-shadow: 0 48px 84px -58px rgba(129, 74, 200, 0.32), 0 0 0 1px rgba(129, 74, 200, 0.08);
}
/* Emphasis card = subtle purple-gradient fill (decent, not saturated) */
.card[data-emphasis="key"] {
  background: linear-gradient(150deg, rgba(129, 74, 200, 0.13) 0%, rgba(223, 122, 254, 0.045) 100%);
  border-color: rgba(129, 74, 200, 0.28);
}

/* ---- CTA band — larger radius + soft ambient glow ------------------------- */
.cta-section {
  border-radius: 26px;
  border-color: rgba(129, 74, 200, 0.18);
  box-shadow: 0 70px 120px -78px rgba(129, 74, 200, 0.30), 0 0 60px rgba(129, 74, 200, 0.05);
}

/* ---- PRIMARY CTA — gradient pill, refined (not neon) ----------------------- */
.btn-primary {
  border-radius: 100px;
  background: linear-gradient(135deg, rgb(129, 74, 200) 0%, rgb(158, 96, 224) 100%);
  padding: 14px 30px;
  letter-spacing: 0.01em;
  box-shadow: 0 18px 40px -24px rgba(129, 74, 200, 0.50);
  transition: transform var(--ds-morph) var(--ds-ease),
              box-shadow var(--ds-morph) var(--ds-ease),
              background var(--ds-morph) var(--ds-ease);
}
.btn-primary:hover {
  background: linear-gradient(135deg, rgb(138, 82, 210) 0%, rgb(170, 108, 234) 100%);
  transform: translateY(-2px);
  box-shadow: 0 28px 56px -26px rgba(129, 74, 200, 0.62);
}
.btn-secondary {
  border-radius: 100px;
  transition: transform var(--ds-morph) var(--ds-ease),
              border-color var(--ds-morph) var(--ds-ease),
              background var(--ds-morph) var(--ds-ease);
}
.btn-secondary:hover { transform: translateY(-2px); border-color: rgba(129, 74, 200, 0.45); }
.btn { transition-timing-function: var(--ds-ease); }

/* ---- Eyebrow / badge tracking -------------------------------------------- */
.badge { letter-spacing: 0.03em; }

/* ---- Larger, tighter DISPLAY type (spec §6.2) -----------------------------
   Dolní mez clampu je záměrně nižší než 6vw/4vw, takže se uplatní POUZE na
   mobilu (pod ~533px resp. ~650px). Desktop i tablet zůstávají beze změny. */
.hero h1 { font-size: clamp(32px, 6.0vw, 82px); letter-spacing: -0.03em; line-height: 1.06; }
.section-header h2,
.cta-section h2 { font-size: clamp(26px, 4.0vw, 56px); line-height: 1.1; }

/* ---- Airier vertical rhythm (spec §5) ------------------------------------- */
.section { padding: 104px 0; }
@media (max-width: 767px) { .section { padding: 60px 0; } }

/* ---- Stat numerals — larger + subtle glow (dark theme only) --------------- */
html:not([data-theme="light"]) .trust-number {
  font-size: clamp(30px, 3.2vw, 44px);
  font-weight: 600;
  letter-spacing: -0.04em;
  background: linear-gradient(180deg, #ffffff 0%, #dcccf5 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 30px rgba(129, 74, 200, 0.20);
}

/* ==========================================================================
   REFRAME / "V čem je rozdíl" — editorial restraint (v3)
   Sekce .stmt-block je na 13 stránkách. Předchozí verze používaly line-through
   + zářící box + gradientový text = přesně "AI-landing" klišé. Teď: klidná
   editoriální sazba v DOMÁCÍM card-vzhledu (jako ostatní sekce), BEZ strike,
   BEZ glow-dekorace. Jediný akcent = plná fialová pointa.

   Interpunkce (požadavek foundera): tečka dědí barvu slova, které následuje.
   - Šedá část statementu je jednotný tón → všechny tečky v ní sedí.
   - Tečka za fialovou pointou = samostatný <span> hned za .stmt-affirm →
     `.stmt-affirm + span` jí dá stejnou fialovou. (hlasovy měl tečku jako
     holý text → obalena spanem v HTML, aby ji selektor chytil.)
   Pouze vzhled — text beze změny. Scoped na .stmt-block.
   ========================================================================== */

/* -- kontejner: domácí card-vzhled, žádný speciální zářící box ------------ */
.stmt-block {
  max-width: 900px;
  padding: 72px 60px;
  border-radius: 16px;
  border: 1px solid rgba(129,74,200,0.14);
  background: linear-gradient(160deg, rgba(129,74,200,0.045) 0%, rgba(17,17,20,0.92) 62%);
  box-shadow: 0 30px 70px -55px rgba(129,74,200,0.28);
}
.stmt-block::before { display: none !important; }   /* zabít surový radiál z base */

/* -- kicker: klidný editoriální eyebrow (ne mono/techy) ------------------- */
.stmt-block .badge {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(190,160,235,0.9);
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.stmt-block .badge .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgb(129,74,200);
  animation: none;
}

/* -- statement: potlačený "setup", sevřená sazba ------------------------- */
.stmt-block h2 {
  font-size: clamp(28px, 3.3vw, 45px);
  line-height: 1.18;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: rgba(255,255,255,0.60);          /* jednotný tlumený tón celého setupu */
  margin-bottom: 20px !important;
}

/* -- odmítnuté varianty: BEZ line-through, splývají se setupem ------------ */
.stmt-strike {
  color: inherit;
  font-weight: inherit;
  font-size: inherit;
  text-decoration: none !important;
  background: none !important;
}

/* -- pointa: jediný akcent — plná fialová, větší, tučnější --------------- */
.stmt-affirm,
.stmt-affirm + span {                      /* + span = tečka hned za pointou */
  color: rgb(180,133,240);
  -webkit-text-fill-color: rgb(180,133,240);
  background: none;
}
.stmt-affirm {
  font-size: 1.05em;
  font-weight: 600;
}

/* -- světlá varianta ----------------------------------------------------- */
[data-theme="light"] .stmt-block {
  border-color: rgba(129,74,200,0.16) !important;
  background: linear-gradient(160deg, rgba(129,74,200,0.06) 0%, rgba(255,255,255,0.86) 58%) !important;
  box-shadow: 0 30px 70px -58px rgba(129,74,200,0.24) !important;
}
[data-theme="light"] .stmt-block h2 { color: rgba(20,18,30,0.56); }
[data-theme="light"] .stmt-affirm,
[data-theme="light"] .stmt-affirm + span {
  color: #6d28d9 !important;
  -webkit-text-fill-color: #6d28d9 !important;
}

/* -- mobil --------------------------------------------------------------- */
@media (max-width: 640px) {
  .stmt-block { padding: 40px 22px; border-radius: 14px; }
  .stmt-block h2 { font-size: clamp(23px, 6.2vw, 31px); line-height: 1.22; }
  .stmt-block .badge { font-size: 11px; letter-spacing: 0.12em; }
}

/* ==========================================================================
   MOBILNÍ OPTIMALIZACE
   Vše je uzavřené v max-width dotazech → desktop se nemění.
   ========================================================================== */
@media (max-width: 640px) {

  /* -- 1. Hero: tlačítka a status-pills byly zarovnané doleva uvnitř
        vycentrovaného hero (všechny L=20, různé šířky = roztřepený okraj). -- */
  /* Wrapper tlačítek je <div> BEZ třídy → :not([class]) ho trefí a funguje
     i tam, kde :has() není podporované (Safari < 15.4). */
  .hero > div:not([class]),
  .hero > div:has(> .btn),
  .hero-buttons,
  .hero-status-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
  }
  .hero-status-row { flex-wrap: wrap; }
  .hero > div:has(> .btn) > .btn,
  .hero-buttons > .btn { width: 100%; max-width: 320px; justify-content: center; }

  /* -- 2. Fixní hlavička propouštěla obsah při scrollu.
        Světlý motiv: 0.82 + blur. Tmavý: 0.95 ale backdrop-filter:none,
        takže pod ní prosvítal text s ostrými hranami. Oba zneprůhledníme.
        Selektory musí mít stejnou specificitu jako [data-theme] pravidla
        v style.css (jsou !important) — vyhrává pozdější pořadí v kaskádě. -- */
  [data-theme="light"] .navbar {
    background: rgba(244, 245, 250, 0.98) !important;
    -webkit-backdrop-filter: saturate(1.4) blur(14px) !important;
    backdrop-filter: saturate(1.4) blur(14px) !important;
  }
  [data-theme="dark"] .navbar {
    background: rgb(24, 24, 27) !important;
    -webkit-backdrop-filter: saturate(1.4) blur(14px) !important;
    backdrop-filter: saturate(1.4) blur(14px) !important;
  }

  /* -- 3. Tap targety pod 44px (WCAG 2.5.5 / Apple HIG).
        Největší podíl měly položky rozbaleného mobilního menu (19px). -- */
  .navbar-nav a,
  .navbar-nav .nav-dropdown-toggle,
  .nav-mega-item,
  .footer-column ul li a,
  .footer-links a,
  .footer nav a,
  .blog-back-link,
  .related-articles a,
  .blog-related a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
  .footer-logo { display: inline-flex; align-items: center; min-height: 44px; }
  .orch-channel,
  .demo-replay,
  .dbp-take,
  .segment-tab,
  .invite-cta,
  .dm-opt,
  .demo-tree-btn-v3,
  .lang-toggle { min-height: 44px; padding-inline: 14px; }
  /* POZN.: odkazy uvnitř odstavců (rodič <p>) záměrně nezvětšujeme —
     WCAG 2.5.5 je vyjímá ("inline in a sentence") a 44px by rozbilo řádkování. */

  /* -- 4. Text pod 12px (nečitelný na mobilu).
        Seznam je vytažený ze zdrojových CSS (grep na font-size < 12px),
        ne odhadnutý — proto pokrývá i dashboard-demo a demo-shell. -- */
  .card-label,
  .demo-shell-meta-sub,
  .demo-bubble-label,
  .orch-channel,
  .orch-layer span,
  .az-ls-time,
  .pv1-stat-num small,
  .mode-card .mode-badge,
  .demo-orch-node .node-sub,
  .dbp-bar-pill, .dbp-bd-v, .dbp-chart-x span, .dbp-conv-t, .dbp-kpi-l,
  .dbp-nav-badge, .dbp-panel-foot, .dbp-panel-h, .dbp-side-label,
  .dbp-stat-l, .dbp-status, .dbp-tag, .dbp-take, .dbp-tbl, .dbp-tbl th,
  .dbp-team-c, .dbp-team-r, .dbp-time, .dbp-user-s, .dbp-vsub {
    font-size: 12px;
  }
  .nav-mega-desc { font-size: 12px; line-height: 1.45; }
  .nav-mega-grouplabel,
  .nav-mega-chip { font-size: 12px; }
  /* GDPR text musí být čitelný — 10,5px na mobilu není. */
  .consent-box,
  .consent-link,
  .chat-disclaimer span { font-size: 12px; line-height: 1.5; }
  .onb-step p,
  .demo-toast,
  .escalation-trigger,
  .concurrency-meta,
  .routing-meta,
  .reliability-state,
  .inbox-header,
  .inbox-draft-label,
  .capability-band-meta,
  .design-card-label,
  .peak-stat-label,
  .peak-stat-meta,
  .journey-label,
  .story-solution-label,
  .founder-meta-label,
  .team-roles-label,
  .dm-widget-sub,
  .dm-widget-foot,
  .routing-level-time,
  .inbox-actions span,
  .inbox-act span { font-size: 12px; }

  /* -- 5. Hero: články mají inline padding 180px/40px (nutné !important).
        Na 390px displeji to ubíralo 80px šířky a tlačilo obsah dolů. -- */
  .hero { padding: 96px 20px 48px !important; }
  .hero > p,
  .hero .body-xxl { font-size: 16px; line-height: 1.6; }

  /* -- 6. Obsah nesmí přetéct do stran -- */
  .container { padding-left: 20px; padding-right: 20px; }
  table { display: block; overflow-x: auto; max-width: 100%; }
  pre, code { overflow-x: auto; max-width: 100%; }
}

/* ---- Respect reduced-motion --------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .card, .card:hover, .btn-primary, .btn-primary:hover, .btn-secondary, .btn-secondary:hover {
    transition: none;
    transform: none;
  }
}