/* =========================================================
   Professional Test Automation s.r.o. — Design System
   ========================================================= */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  width: 100%;
}
html { overflow-x: hidden; max-width: 100vw; scroll-padding-top: 80px; }
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; }

/* ---------- Tokens ---------- */
:root {
  --bg: #07090d;
  --bg-elev: #0d1117;
  --bg-card: #11161d;
  --bg-card-hover: #161c25;
  --border: #1c232e;
  --border-strong: #2a3340;
  --text: #e6e9ef;
  --text-muted: #8b94a3;
  --text-dim: #5c6573;

  /* iOS-style palette to match the new PTA logo (red/yellow/green/blue) */
  --accent: #007AFF;         /* iOS blue — primary accent */
  --accent-glow: #007AFF55;
  --accent-2: #34C759;       /* iOS green — "Test" wordmark + success */
  --brand-red: #FF3B30;      /* iOS red */
  --brand-yellow: #FFCC00;   /* iOS yellow */
  --success: #34C759;
  --warning: #FFCC00;
  --danger: #FF3B30;

  /* Brand blend — primary action is still blue→green, headline text uses full rainbow */
  --grad: linear-gradient(135deg, #007AFF 0%, #34C759 100%);
  --grad-text: linear-gradient(120deg, #FF3B30 0%, #FFCC00 28%, #34C759 62%, #007AFF 100%);
  --grad-soft: linear-gradient(180deg, rgba(0,122,255,0.06) 0%, rgba(52,199,89,0.02) 100%);
  --grad-rainbow: linear-gradient(90deg, #FF3B30 0%, #FFCC00 33%, #34C759 66%, #007AFF 100%);

  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 20px;

  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.35);
  --shadow-glow: 0 0 40px -10px var(--accent-glow);
}

/* ---------- Light theme ---------- */
[data-theme="light"] {
  --bg: #fafbfc;
  --bg-elev: #ffffff;
  --bg-card: #ffffff;
  --bg-card-hover: #f8fafc;
  --border: #e2e8f0;
  --border-strong: #cbd5e1;
  --text: #0f172a;
  --text-muted: #475569;
  --text-dim: #94a3b8;

  --accent: #005BBB;         /* deep iOS blue — light theme */
  --accent-glow: #005BBB33;
  --accent-2: #248A3D;       /* deep iOS green — light theme */
  --brand-red: #D92C20;
  --brand-yellow: #D4A200;
  --success: #248A3D;
  --warning: #D4A200;
  --danger: #D92C20;

  --grad: linear-gradient(135deg, #005BBB 0%, #248A3D 100%);
  --grad-text: linear-gradient(120deg, #D92C20 0%, #D4A200 28%, #248A3D 62%, #005BBB 100%);
  --grad-soft: linear-gradient(180deg, rgba(0,91,187,0.05) 0%, rgba(36,138,61,0.02) 100%);
  --grad-rainbow: linear-gradient(90deg, #D92C20 0%, #D4A200 33%, #248A3D 66%, #005BBB 100%);

  --shadow: 0 1px 3px rgba(15,23,42,0.06), 0 4px 16px rgba(15,23,42,0.08);
  --shadow-glow: 0 0 28px -6px rgba(26,115,232,0.15);
}

/* Light-mode specific overrides for visual polish */
[data-theme="light"] .hero-grid {
  background-image:
    linear-gradient(rgba(15,23,42,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,0.04) 1px, transparent 1px);
}
[data-theme="light"] .hero-bg::before {
  background:
    radial-gradient(ellipse 800px 400px at 20% 0%, rgba(26,115,232,0.08), transparent 60%),
    radial-gradient(ellipse 600px 400px at 80% 30%, rgba(24,128,56,0.06), transparent 60%);
}
[data-theme="light"] .nav {
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}
[data-theme="light"] .btn-primary {
  color: #ffffff;
}
[data-theme="light"] .btn-primary:hover {
  box-shadow: 0 12px 36px -8px rgba(26,115,232,0.3);
}
/* logo-mark already uses inline quadrants + CSS check; theme handled on .logo-mark .check */
[data-theme="light"] .stat-num,
[data-theme="light"] .showcase-stat-num,
[data-theme="light"] .roi-result-value {
  /* Gradient text works the same on light bg */
}
[data-theme="light"] .eyebrow {
  background: rgba(26,115,232,0.08);
  border-color: rgba(26,115,232,0.25);
}
[data-theme="light"] .pipeline-step-icon,
[data-theme="light"] .card-icon,
[data-theme="light"] .industry-card-icon,
[data-theme="light"] .hero-offer-num,
[data-theme="light"] .showcase-ico {
  background: linear-gradient(135deg, rgba(26,115,232,0.12), rgba(24,128,56,0.08));
  border-color: rgba(26,115,232,0.25);
}
[data-theme="light"] .cta-block {
  background: linear-gradient(135deg, rgba(26,115,232,0.04), rgba(24,128,56,0.04));
}
[data-theme="light"] .cta-block::before {
  background: radial-gradient(circle at 50% 0%, rgba(26,115,232,0.08), transparent 60%);
}
[data-theme="light"] .compare-table thead th.us {
  background: linear-gradient(135deg, rgba(26,115,232,0.1), rgba(24,128,56,0.06));
}
[data-theme="light"] .compare-table td.us {
  background: linear-gradient(135deg, rgba(26,115,232,0.03), rgba(24,128,56,0.02));
}
/* Light-theme code surfaces: soft off-white with dark syntax (easier on eyes than dark blocks) */
[data-theme="light"] .terminal,
[data-theme="light"] .showcase-screen,
[data-theme="light"] .ai-output,
[data-theme="light"] .code-block,
[data-theme="light"] .showcase-log,
[data-theme="light"] pre.code-block {
  background: #f6f8fa;
  border-color: #d8dee5;
  color: #1f2937;
}
[data-theme="light"] .terminal-bar,
[data-theme="light"] .showcase-bar {
  background: #eceef2;
  border-bottom-color: #d8dee5;
}
[data-theme="light"] .terminal-bar .title,
[data-theme="light"] .showcase-title,
[data-theme="light"] .terminal-line .muted,
[data-theme="light"] .showcase-log .muted {
  color: #5c6573;
}
[data-theme="light"] .prose code {
  background: #f1f5f9;
  border-color: #e2e8f0;
  color: #1a73e8;
}
[data-theme="light"] .terminal-line,
[data-theme="light"] .showcase-meta {
  color: #1f2937;
}
[data-theme="light"] .ai-output .keyword,
[data-theme="light"] .terminal-line .violet { color: #248A3D; }
[data-theme="light"] .ai-output .string { color: #1a7f37; }
[data-theme="light"] .ai-output .fn,
[data-theme="light"] .terminal-line .cyan { color: #0969da; }
[data-theme="light"] .ai-output .comment { color: #6e7781; }
[data-theme="light"] .showcase-meta { color: #8b94a3; }
[data-theme="light"] .showcase-node {
  background: #ffffff;
  border-color: #d8dee5;
}
[data-theme="light"] .showcase-node .showcase-label { color: #0f172a; }
[data-theme="light"] .showcase-node .showcase-meta { color: #475569; }
[data-theme="light"] .showcase-node.active {
  background: linear-gradient(135deg, rgba(26,115,232,0.14), rgba(36,138,61,0.08));
  border-color: #1a73e8;
}
[data-theme="light"] .showcase-node.active .showcase-label,
[data-theme="light"] .showcase-node.active .showcase-meta { color: #0f172a; }
[data-theme="light"] .showcase-log .white,
[data-theme="light"] .terminal-line .white,
[data-theme="light"] .showcase-log { color: #0f172a; }
[data-theme="light"] .showcase-node.done { border-color: #1a7f37; background: rgba(36,138,61,0.06); }
[data-theme="light"] .showcase-node .showcase-ico {
  background: linear-gradient(135deg, rgba(26,115,232,0.18), rgba(36,138,61,0.1));
  color: #1a73e8;
  border-color: transparent;
}
[data-theme="light"] .trust-bar {
  background: linear-gradient(180deg, transparent, rgba(26,115,232,0.02));
}
[data-theme="light"] .cookie-banner {
  background: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 12px 48px -10px rgba(15,23,42,0.18);
}
[data-theme="light"] .testimonial-card::before {
  opacity: 0.25;
}

/* Light theme — prose & readable text overrides
   (Dark-mode hardcoded greys like #d7dde6 become invisible on white) */
[data-theme="light"] .prose,
[data-theme="light"] .prose p,
[data-theme="light"] .prose li,
[data-theme="light"] .prose ul,
[data-theme="light"] .prose ol,
[data-theme="light"] .prose strong,
[data-theme="light"] .prose em { color: #0f172a; }
[data-theme="light"] .prose h2,
[data-theme="light"] .prose h3 { color: #0f172a; }
[data-theme="light"] .prose a { color: var(--accent); text-decoration-color: rgba(26,115,232,0.35); }
[data-theme="light"] .prose a:hover { text-decoration-color: var(--accent); }
[data-theme="light"] .prose blockquote {
  background: var(--bg-card);
  border-left-color: var(--accent);
  color: #334155;
}
[data-theme="light"] .article-meta,
[data-theme="light"] .article-meta span { color: #475569; }

/* Cards and muted text inside light-theme surfaces */
[data-theme="light"] .card,
[data-theme="light"] .industry-card,
[data-theme="light"] .blog-card,
[data-theme="light"] .testimonial-card {
  box-shadow: 0 1px 3px rgba(15,23,42,0.05);
}
[data-theme="light"] .card:hover,
[data-theme="light"] .industry-card:hover,
[data-theme="light"] .blog-card:hover,
[data-theme="light"] .testimonial-card:hover {
  box-shadow: 0 8px 24px rgba(15,23,42,0.08);
}

/* Industry-card stack pills — light bg with readable contrast */
[data-theme="light"] .industry-card-stack span,
[data-theme="light"] .testimonial-badges span {
  background: #f1f5f9;
  border-color: #e2e8f0;
  color: #475569;
}

/* Hero offer numbers — keep gradient readable on white */
[data-theme="light"] .hero-offer {
  box-shadow: 0 1px 2px rgba(15,23,42,0.04);
}

/* Contact form inputs — ensure readable on white */
[data-theme="light"] .form-field input,
[data-theme="light"] .form-field textarea,
[data-theme="light"] .form-field select,
[data-theme="light"] .ai-input textarea,
[data-theme="light"] .roi-control input[type="range"] {
  background: #ffffff;
  border-color: #cbd5e1;
  color: #0f172a;
}
[data-theme="light"] .form-field input::placeholder,
[data-theme="light"] .form-field textarea::placeholder {
  color: #94a3b8;
}

/* Trust bar items — darker on white for contrast */
[data-theme="light"] .trust-bar-inner span { color: #475569; }
[data-theme="light"] .trust-bar-inner span:hover { color: #0f172a; }

/* AI examples pills */
[data-theme="light"] .ai-example {
  background: #f1f5f9;
  border-color: #e2e8f0;
  color: #475569;
}
[data-theme="light"] .ai-example:hover { color: #0f172a; border-color: var(--accent); }

/* Theme toggle button */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-muted);
  cursor: pointer;
  transition: color .15s ease, background .15s ease, border-color .15s ease, transform .15s ease;
  padding: 0;
  flex-shrink: 0;
}
.theme-toggle:hover { color: var(--text); border-color: var(--border-strong); }
.theme-toggle:active { transform: scale(0.95); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .sun-icon { display: none; }
.theme-toggle .moon-icon { display: block; }
[data-theme="light"] .theme-toggle .sun-icon { display: block; }
[data-theme="light"] .theme-toggle .moon-icon { display: none; }
@media (max-width: 560px) {
  .theme-toggle { width: 36px; height: 36px; }
  .theme-toggle svg { width: 16px; height: 16px; }
}

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
.section { padding: 96px 0; }
.section-sm { padding: 64px 0; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 { font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; color: var(--text); overflow-wrap: break-word; hyphens: manual; }
h1 { font-size: clamp(1.5rem, 3.6vw + 0.5rem, 4.25rem); }
h2 { font-size: clamp(1.25rem, 2vw + 0.75rem, 2.75rem); }
h3 { font-size: clamp(1.0625rem, 0.5vw + 0.95rem, 1.5rem); }
h4 { font-size: 1.0625rem; }
p  { color: var(--text-muted); }
.lead { font-size: 1.125rem; color: var(--text-muted); max-width: 60ch; }

.eyebrow {
  --ec: var(--accent);             /* per-section eyebrow color — cycles through the 4 brand colors below */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ec);
  padding: 6px 12px;
  border: 1px solid color-mix(in srgb, var(--ec) 45%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--ec) 10%, transparent);
}
.eyebrow::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ec);
  box-shadow: 0 0 8px var(--ec);
  animation: pulse 2s ease-in-out infinite;
}

/* Rotate eyebrow color across sections — blue / green / yellow / red, repeat */
section:nth-of-type(4n+1) .eyebrow { --ec: #007AFF; }
section:nth-of-type(4n+2) .eyebrow { --ec: #34C759; }
section:nth-of-type(4n+3) .eyebrow { --ec: #FFCC00; }
section:nth-of-type(4n+4) .eyebrow { --ec: #FF3B30; }
[data-theme="light"] section:nth-of-type(4n+1) .eyebrow { --ec: #005BBB; }
[data-theme="light"] section:nth-of-type(4n+2) .eyebrow { --ec: #248A3D; }
[data-theme="light"] section:nth-of-type(4n+3) .eyebrow { --ec: #A87B00; }
[data-theme="light"] section:nth-of-type(4n+4) .eyebrow { --ec: #D92C20; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

.gradient-text {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  font-size: 0.9375rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  transition: transform .15s ease, background .2s ease, box-shadow .2s ease, border-color .2s ease;
  white-space: nowrap;
  border: 1px solid transparent;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--grad);
  color: #ffffff;                                   /* white on blue→green gradient */
  box-shadow: 0 8px 24px -8px var(--accent-glow);
  font-weight: 600;
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 40px -8px var(--accent-glow);
  filter: brightness(1.08);
}
.btn-secondary {
  background: var(--bg-card);
  color: var(--text);
  border-color: var(--border-strong);
}
.btn-secondary:hover { background: var(--bg-card-hover); border-color: var(--accent); }
.btn-ghost { color: var(--text-muted); }
.btn-ghost:hover { color: var(--text); }
.btn-lg { padding: 14px 28px; font-size: 1rem; }

.btn-arrow { transition: transform .2s ease; }
.btn:hover .btn-arrow { transform: translateX(4px); }

/* ---------- Navbar ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(7, 9, 13, 0.96);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--border);
  /* Respect iOS notch / Dynamic Island safe area */
  padding-top: env(safe-area-inset-top, 0);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  gap: 24px;
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  font-weight: 800;
  font-size: 1.125rem;
  letter-spacing: -0.02em;
  color: var(--text);
  text-decoration: none;
}
/* ---- PTA icon (square PNG, colored quadrants + check) ---- */
.logo-mark {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  display: block;
  background: url('/img/logo-icon-dark.png?v=1') center / contain no-repeat;
}
[data-theme="light"] .logo-mark {
  background-image: url('/img/logo-icon.png?v=1');
}
.logo-text {
  display: inline;
  white-space: nowrap;
  line-height: 1;
}
.logo-accent {
  color: var(--accent-2);
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  height: 40px;
}
.nav-links > li { display: flex; align-items: center; height: 100%; }
.nav-links a, .nav-item-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 14px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  transition: color .15s ease, background .15s ease;
  white-space: nowrap;
  background: none;
  border: 0;
  cursor: pointer;
}
.nav-links a:hover,
.nav-item-trigger:hover,
.nav-item-trigger[aria-expanded="true"] { color: var(--text); background: var(--bg-card); }

/* Active page indicator — stronger visual */
.nav-links a.active,
.nav-item-trigger[data-active="true"] {
  color: var(--text);
  background: linear-gradient(135deg, rgba(66,133,244,0.08), rgba(52,168,83,0.05));
  position: relative;
}
.nav-links a.active::after,
.nav-item-trigger[data-active="true"]::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 14px;
  right: 14px;
  height: 2px;
  background: var(--grad);
  border-radius: 2px;
}
[data-theme="light"] .nav-links a.active,
[data-theme="light"] .nav-item-trigger[data-active="true"] {
  background: linear-gradient(135deg, rgba(26,115,232,0.10), rgba(24,128,56,0.06));
  color: #0f172a;
}
@media (max-width: 860px) {
  .nav-links a.active::after,
  .nav-item-trigger[data-active="true"]::after {
    display: none;
  }
  .nav-links a.active,
  .nav-item-trigger[data-active="true"] {
    border-left: 2px solid var(--accent);
  }
}
.nav-item-trigger .caret {
  width: 12px; height: 12px;
  opacity: 0.6;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-item-trigger[aria-expanded="true"] .caret { transform: rotate(180deg); opacity: 1; }
.nav-cta { display: flex; align-items: center; gap: 10px; height: 40px; }
.nav-cta .btn-primary {
  height: 40px;
  padding: 0 16px;
  font-size: 0.875rem;
  display: inline-flex;
  align-items: center;
}
@media (min-width: 861px) and (max-width: 1180px) {
  .nav-links a, .nav-item-trigger { padding: 0 10px; font-size: 0.8125rem; }
  .nav-cta .btn-primary { font-size: 0.8125rem; padding: 0 14px; }
}

/* Dropdown menu */
.nav-item { position: relative; }
.nav-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 320px;
  padding: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: 0 20px 60px -12px rgba(0,0,0,0.5), 0 0 0 1px rgba(66,133,244,0.06);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  z-index: 60;
}
.nav-item:hover > .nav-dropdown,
.nav-item[data-open="true"] > .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity .18s ease, transform .18s ease, visibility 0s;
}
.nav-dropdown-section { padding: 6px 0; }
.nav-dropdown-section + .nav-dropdown-section { border-top: 1px solid var(--border); margin-top: 4px; }
.nav-dropdown-label {
  padding: 6px 12px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.nav-dropdown-item {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start !important;
  gap: 2px;
  padding: 10px 12px !important;
  height: auto !important;
  border-radius: var(--radius-sm);
  color: var(--text-muted) !important;
  text-decoration: none;
  background: none !important;
}
.nav-dropdown-item:hover { background: var(--bg-elev) !important; color: var(--text) !important; }
.nav-dropdown-item strong { color: var(--text); font-weight: 600; font-size: 0.875rem; }
.nav-dropdown-item small { color: var(--text-dim); font-size: 0.75rem; font-weight: 400; }

@media (max-width: 860px) {
  .nav-dropdown { display: none !important; }
  /* When mobile menu opens, show nav-item-trigger as plain link styled */
  .nav-item-trigger .caret { display: none; }
}
.lang-switch {
  display: flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.75rem;
}
.lang-switch a {
  padding: 4px 10px;
  border-radius: 999px;
  color: var(--text-muted);
  font-weight: 600;
}
.lang-switch a.active {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  color: var(--accent);
  font-weight: 700;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent);
}
.hamburger { display: none; width: 40px; height: 40px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-card); }
.hamburger span {
  display: block;
  width: 16px; height: 2px;
  background: var(--text);
  margin: 4px auto;
  transition: transform .2s ease;
}
@media (max-width: 860px) {
  .nav-links {
    display: none;
    position: absolute;
    top: 64px; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    height: auto;
    max-height: calc(100vh - 64px);
    overflow-y: auto;
    padding: 12px;
    gap: 2px;
    background: var(--bg-elev);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 12px 32px -8px rgba(0,0,0,0.4);
  }
  .nav-links.open { display: flex; }
  .nav-links > li {
    width: 100%;
    height: auto;
    display: block;               /* override flex row from desktop */
  }
  .nav-links > li.nav-item {
    display: flex;
    flex-direction: column;       /* trigger + dropdown stack */
    align-items: stretch;
  }
  .nav-links > li > a,
  .nav-links .nav-item-trigger {
    width: 100%;
    height: 44px;
    justify-content: flex-start;
    padding: 0 14px;
    font-size: 0.9375rem;
  }
  .hamburger { display: block; }
  .nav-cta .btn-secondary { display: none; }

  /* Mobile dropdown: inline accordion instead of absolute popup */
  .nav-dropdown {
    display: none !important;
    position: static !important;
    transform: none !important;
    box-shadow: none !important;
    background: transparent !important;
    border: 0 !important;
    min-width: 0 !important;
    width: 100% !important;
    padding: 4px 0 8px 14px !important;
    margin: 0 !important;
  }
  .nav-item[data-open="true"] > .nav-dropdown {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  .nav-item-trigger .caret { display: inline-flex !important; }
  .nav-item[data-open="true"] .nav-item-trigger .caret { transform: rotate(180deg); }
  .nav-dropdown-item {
    padding: 10px 12px !important;
  }
  .nav-dropdown-item small { display: none; }   /* keep compact on mobile */
}

/* Mobile: center the brand (logo icon + wordmark), article headers, hero + section headers */
@media (max-width: 860px) {
  .nav-inner {
    position: relative;
    justify-content: center;
  }
  .logo {
    margin: 0 auto;
    justify-content: center;
  }
  .nav-cta {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }
  /* Center any page-level heading block (eyebrow + h1/h2 + meta + lead) */
  .article-header,
  .section-header,
  .section-head,
  .section-head h2,
  .section-head p,
  .hero-copy,
  .hero .eyebrow,
  .hero h1,
  .hero .lead,
  .hero-meta {
    text-align: center;
  }
  .section-head p { margin-left: auto; margin-right: auto; }
  .article-header .article-meta,
  .hero-meta { justify-content: center; }
  .eyebrow { margin-left: auto; margin-right: auto; }
  /* Hero CTA buttons centered on mobile too */
  .hero-cta { justify-content: center; }
  /* Section headings (h2 + tagline) directly inside a section's container */
  .section > .container > h2,
  .section > .container > .section-title,
  .section-title { text-align: center; }
  /* The hero has its text in an unlabeled div — center it too */
  .hero-inner > div { text-align: center; }
  .hero-inner > div .eyebrow { display: inline-flex; }
  /* …but NOT the offer cards inside the hero (they keep their row layout) */
  .hero-offer, .hero-offer * { text-align: left; }
  .hero-offer { display: grid; }

  /* =====================================================================
     BLANKET MOBILE CENTERING — center most section content by default.
     Exceptions below (footer, sitemap page, long-form prose, tables,
     forms, code blocks, hero-offer cards) explicitly revert to left.
     ===================================================================== */
  .section,
  .section .container,
  .card,
  .card *,
  .industry-card,
  .industry-card-body,
  .pipeline,
  .pipeline-step,
  .pipeline-step *,
  .showcase-node,
  .showcase-node *,
  .showcase-flow,
  .testimonial-card,
  .testimonial-card *,
  .why-card,
  .why-card *,
  .roi,
  .roi-controls,
  .roi-control,
  .roi-result,
  .roi-result *,
  .cta-block,
  .cta-block *,
  .trust-bar-inner,
  .ai-demo,
  .ai-demo > *:not(textarea),
  .stats,
  .stat,
  .stat *,
  .showcase-stat,
  .showcase-stat *,
  .blog-card,
  .blog-card *,
  .card-icon,
  .card-link,
  .compare-head,
  .hero-meta,
  .hero-meta * {
    text-align: center;
  }
  /* Center inline-flex pills and icons inside centered cards */
  .industry-card-stack,
  .card-icon,
  .industry-card-icon,
  .pipeline-step-icon,
  .showcase-ico,
  .why-card-icon { margin-left: auto; margin-right: auto; }

  /* ---- EXCEPTIONS: keep left-aligned (prose/forms/tables/code) ----
     Footer accordion contents are now CENTERED per user request (see .footer-collapsible rules). */
  .sitemap-grid, .sitemap-grid *,                  /* sitemap page stays left */
  .prose, .prose *,                                /* article body prose */
  .article-meta,
  .compare-table, .compare-table *,                /* compare structured data */
  .compare-row, .compare-row *,
  .form, .form *,                                  /* forms — labels/inputs */
  .form-field, .form-field *,
  pre, pre *, code, .code-block, .code-block *,    /* code blocks */
  .terminal, .terminal *,
  .showcase-log, .showcase-log *,                  /* terminal-style log */
  .roi-breakdown, .roi-breakdown *,                /* key-value breakdown rows */
  .hero-offer, .hero-offer *                       /* numbered offer cards */
  { text-align: left !important; }

  /* FAQ answers now centered per user request */
  .faq-a, .faq-a * { text-align: center !important; }
  .faq-a p { margin-left: auto; margin-right: auto; max-width: 42ch; }

  /* FAQ questions (.faq-q) — user wants all centered on mobile */
  .faq-q { text-align: center !important; justify-content: center !important; }

  /* Inputs, textareas — visual left-align regardless of container */
  input, textarea, select { text-align: left; }

  /* "Vygenerovať test" button — HTML has inline align-self:flex-start; override to center */
  #ai-run, .ai-demo .btn { align-self: center !important; }

  /* "Povedz nám, čo potrebuješ" (end of Industries section) — standardize to primary-CTA-style layout */
  section .btn-secondary {
    align-self: center;
    margin-left: auto;
    margin-right: auto;
  }

  /* Hamburger to LEFT with left offset per user — flips nav-cta to left side */
  .nav-cta {
    right: auto !important;
    left: 16px;
  }
}

/* Very small screens — lock to logo + hamburger only */
@media (max-width: 560px) {
  .nav-inner { gap: 0; }
  .nav-cta { gap: 0; flex-shrink: 0; }
  .nav-cta > * { display: none !important; }
  .nav-cta > .hamburger {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 44px !important;
    height: 44px !important;
  }
  .nav-cta > .hamburger span {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--text);
    margin: 3px 0;
  }
  /* Add mobile-visible lang + theme inside the open menu */
  .nav-links .mobile-only-tools {
    display: flex !important;
    gap: 10px;
    padding: 14px 4px 4px;
    margin-top: 8px;
    border-top: 1px solid var(--border);
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: auto !important;
  }
  .nav-links .mobile-only-tools .theme-toggle,
  .nav-links .mobile-only-tools .lang-switch {
    display: flex !important;
  }
}
@media (min-width: 561px) {
  .nav-links .mobile-only-tools { display: none !important; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: 80px 0 120px;
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.6;
}
.hero-bg::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 800px 400px at 20% 0%, rgba(66,133,244,0.12), transparent 60%),
    radial-gradient(ellipse 600px 400px at 80% 30%, rgba(52,168,83,0.10), transparent 60%);
}
.hero-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 800px 500px at 50% 0%, black 20%, transparent 70%);
}
.hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 64px;
  align-items: center;
}
@media (max-width: 960px) {
  .hero-inner { grid-template-columns: 1fr; gap: 48px; }
  /* Prevent grid cells from expanding past the viewport when their content has wide min-content (long code lines, unbroken words) */
  .hero-inner { min-width: 0; }
  .hero-inner > * { min-width: 0 !important; max-width: 100%; }
  .hero-inner h1, .hero-inner .lead, .hero-inner .hero-offer p, .hero-inner .hero-offer h3 {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .hero-inner .terminal, .hero-inner .terminal-body { max-width: 100%; overflow: hidden; }
}
.hero h1 { margin: 20px 0 24px; }
.hero .lead { font-size: 1.1875rem; margin-bottom: 32px; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 40px; }
.hero-meta {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  color: var(--text-dim);
  font-size: 0.875rem;
}
.hero-meta span { display: flex; align-items: center; gap: 6px; }
.hero-meta svg { color: var(--accent); }

/* ---------- Hero offers (3 service entry points) ---------- */
.hero-offers {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 24px 0 32px;
}
.hero-offer {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: start;
  padding: 14px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
  color: inherit;
  text-decoration: none;
}
.hero-offer:hover {
  transform: translateX(2px);
  border-color: var(--accent);
  background: linear-gradient(135deg, rgba(66,133,244,0.04), rgba(52,168,83,0.03));
}
.hero-offer-num {
  font-family: var(--mono);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  width: 38px;
  min-width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(66,133,244,0.14), rgba(52,168,83,0.08));
  border: 1px solid rgba(66,133,244,0.2);
  color: var(--accent);
}
.hero-offer-body h3 {
  font-size: 0.9375rem;
  line-height: 1.3;
  margin-bottom: 3px;
  color: var(--text);
}
.hero-offer-body p {
  font-size: 0.8125rem;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0;
}
.hero-offer-body strong { color: var(--text); font-weight: 600; }
@media (max-width: 560px) {
  .hero-offers { gap: 10px; }
  .hero-offer { padding: 12px 14px; gap: 12px; }
  .hero-offer-num { width: 34px; min-width: 34px; height: 34px; font-size: 1rem; }
  .hero-offer-body h3 { font-size: 0.875rem; }
  .hero-offer-body p { font-size: 0.75rem; }
}

/* ---------- Terminal ---------- */
.terminal {
  background: #0a0d12;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow), var(--shadow-glow);
  overflow: hidden;
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1.65;
}
.terminal-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: #0c1015;
}
.terminal-bar .dot { width: 11px; height: 11px; border-radius: 50%; background: #2a3340; }
.terminal-bar .dot.red { background: #ff5f57; }
.terminal-bar .dot.yellow { background: #febc2e; }
.terminal-bar .dot.green { background: #28c840; }
.terminal-bar .title { margin-left: 12px; color: var(--text-dim); font-size: 0.75rem; }
.terminal-body {
  padding: 20px;
  height: 400px;
  overflow: hidden;
  position: relative;
}
.terminal-line { white-space: nowrap; overflow: hidden; text-overflow: clip; }
@media (max-width: 560px) {
  .terminal-body { padding: 14px; font-size: 0.7rem; height: 310px; }
}
.terminal-line { color: #d7dde6; }
.terminal-line .muted { color: var(--text-dim); }
.terminal-line .cyan { color: var(--accent); }
.terminal-line .violet { color: var(--accent-2); }
.terminal-line .green { color: var(--success); }
.terminal-line .yellow { color: var(--warning); }
.terminal-line .red { color: var(--danger); }
.terminal-line .white { color: #fff; }
[data-theme="light"] .terminal-line .white { color: #0f172a; }
.terminal-prompt::before { content: '$ '; color: var(--accent); font-weight: 700; }
.cursor {
  display: inline-block;
  width: 8px;
  height: 1em;
  background: var(--accent);
  vertical-align: text-bottom;
  animation: blink 1s step-end infinite;
  margin-left: 2px;
}
@keyframes blink { 50% { opacity: 0; } }

/* ---------- Logo bar ---------- */
.trust-bar {
  padding: 48px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.trust-bar-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  flex-wrap: wrap;
  color: var(--text-dim);
  font-size: 0.875rem;
  font-weight: 500;
}
.trust-bar-inner span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  opacity: 0.75;
  transition: opacity .2s ease, color .2s ease;
}
.trust-bar-inner span:hover { opacity: 1; color: var(--text); }
.trust-bar-label { width: 100%; text-align: center; color: var(--text-dim); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: 8px; }

/* ---------- Section head ---------- */
.section-head { text-align: center; margin-bottom: 64px; }
.section-head h2 { margin: 16px 0 16px; }
.section-head p { margin: 0 auto; max-width: 60ch; }

/* ---------- Industry cards (horizontal layout) ---------- */
.industry-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  padding: 24px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.industry-card:hover { transform: translateY(-2px); border-color: var(--border-strong); background: var(--bg-card-hover); }
.industry-card-icon {
  width: 56px; height: 56px;
  border-radius: 14px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(66,133,244,0.14), rgba(52,168,83,0.08));
  border: 1px solid rgba(66,133,244,0.2);
  color: var(--accent);
  flex-shrink: 0;
}
.industry-card-body { min-width: 0; }
.industry-card-eyebrow {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(66,133,244,0.08);
  border: 1px solid var(--border-strong);
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
}
.industry-card h3 { font-size: 1.125rem; line-height: 1.25; margin-bottom: 8px; }
.industry-card p { font-size: 0.9375rem; color: var(--text-muted); margin-bottom: 14px; }
.industry-card-stack {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.industry-card-stack span {
  font-family: var(--mono);
  font-size: 0.6875rem;
  padding: 3px 9px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-muted);
  white-space: nowrap;
}
@media (max-width: 860px) {
  /* Mobile: stack + reorder content inside tile:
     icon → title (h3) → label (eyebrow) → description (p) → tech stack */
  .industry-card {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    padding: 22px 20px;
    gap: 14px;
  }
  .industry-card-icon { margin: 0 auto; }
  .industry-card-body {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .industry-card-body h3          { order: 1; margin-bottom: 0; font-size: 1.0625rem; }
  .industry-card-body .industry-card-eyebrow { order: 2; margin-bottom: 2px; }
  .industry-card-body p           { order: 3; margin-bottom: 4px; }
  .industry-card-body .industry-card-stack { order: 4; justify-content: center; }
}
@media (max-width: 520px) {
  .industry-card-icon { width: 48px; height: 48px; border-radius: 12px; }
  .industry-card h3 { font-size: 1rem; }
  .industry-card p { font-size: 0.875rem; margin-bottom: 4px; }
}

/* ---------- Cards / Service grid ---------- */
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
@media (max-width: 960px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .grid-4 { grid-template-columns: 1fr; } .grid-2 { grid-template-columns: 1fr; } }

.card {
  position: relative;
  padding: 28px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
  overflow: hidden;
}
.card:hover { transform: translateY(-2px); border-color: var(--border-strong); background: var(--bg-card-hover); }
.card h3 { margin: 16px 0 10px; font-size: 1.125rem; }
.card p { font-size: 0.9375rem; }
.card-icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(66,133,244,0.12), rgba(52,168,83,0.08));
  border: 1px solid rgba(66,133,244,0.2);
  color: var(--accent);
}
.card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--accent);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .2s ease, transform .2s ease;
}
.card:hover .card-link { opacity: 1; transform: translateY(0); }

/* ---------- Stats ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 680px) { .stats { grid-template-columns: 1fr; gap: 14px; } }
.stat {
  padding: 32px 28px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
  text-align: center;              /* center tile content on all screens per user */
}
.stat .stat-label, .stat .stat-desc { text-align: center; }
.stat:hover {
  transform: translateY(-2px);
  border-color: var(--border-strong);
  background: var(--bg-card-hover);
}
[data-theme="light"] .stat:hover {
  box-shadow: 0 8px 24px rgba(15,23,42,0.06);
}
.stat-num {
  font-size: 2.75rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.stat-label { margin-top: 8px; color: var(--text); font-weight: 600; }
.stat-desc { margin-top: 4px; font-size: 0.875rem; color: var(--text-muted); }

/* ---------- Pipeline ---------- */
.pipeline {
  padding: 48px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
}
@media (max-width: 720px) { .pipeline { padding: 24px; } }
.pipeline-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  position: relative;
}
@media (max-width: 860px) { .pipeline-steps { grid-template-columns: repeat(2, 1fr); } }
.pipeline-step {
  padding: 20px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-align: center;
  position: relative;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.pipeline-step.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(66,133,244,0.08), 0 12px 32px -12px var(--accent-glow);
  transform: translateY(-3px);
}
.pipeline-step-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  margin: 0 auto 12px;
  background: linear-gradient(135deg, rgba(66,133,244,0.12), rgba(52,168,83,0.08));
  color: var(--accent);
  display: grid;
  place-items: center;
  transition: all .4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}
.pipeline-step.active .pipeline-step-icon {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #0a0f14;
  transform: scale(1.08);
  animation: pipeline-icon-pulse 1.8s ease-in-out infinite;
}
.pipeline-step.active .pipeline-step-icon::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 14px;
  border: 2px solid var(--accent);
  opacity: 0;
  animation: pipeline-icon-ring 1.8s ease-out infinite;
  pointer-events: none;
}
@keyframes pipeline-icon-pulse {
  0%, 100% { transform: scale(1.08); }
  50% { transform: scale(1.16); }
}
@keyframes pipeline-icon-ring {
  0% { opacity: 0.9; inset: 0; }
  100% { opacity: 0; inset: -14px; }
}
.pipeline-step h4 { font-size: 0.9375rem; margin-bottom: 6px; }
.pipeline-step p { font-size: 0.8125rem; color: var(--text-muted); }
@media (prefers-reduced-motion: reduce) {
  .pipeline-step.active .pipeline-step-icon,
  .pipeline-step.active .pipeline-step-icon::before { animation: none; }
}

/* ---------- ROI Calculator ---------- */
.roi {
  padding: 40px;
  background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-elev) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
@media (max-width: 860px) { .roi { grid-template-columns: 1fr; padding: 28px; } }
.roi-controls { display: grid; gap: 24px; }
.roi-control label { display: flex; justify-content: space-between; font-size: 0.875rem; color: var(--text-muted); margin-bottom: 10px; }
.roi-control label strong { color: var(--text); font-family: var(--mono); font-weight: 600; }
.roi-control input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 999px;
  outline: none;
}
.roi-control input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px; height: 20px;
  background: var(--grad);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 0 3px var(--bg-elev), 0 0 12px var(--accent-glow);
  border: none;
}
.roi-control input[type="range"]::-moz-range-thumb {
  width: 20px; height: 20px;
  background: var(--accent);
  border-radius: 50%;
  cursor: pointer;
  border: none;
}
.roi-result { text-align: center; padding: 32px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); }
.roi-result-label { font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-muted); font-weight: 600; }
.roi-result-value {
  font-size: clamp(2.75rem, 6vw, 4.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  margin: 12px 0;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: opacity .15s ease;
}
.roi-result-sub { font-size: 0.875rem; color: var(--text-muted); }
.roi-breakdown { margin-top: 24px; display: grid; gap: 8px; font-size: 0.8125rem; color: var(--text-muted); text-align: left; }
.roi-breakdown div { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px dashed var(--border); }
.roi-breakdown div:last-child { border-bottom: none; }
.roi-breakdown strong { color: var(--text); font-family: var(--mono); }

/* ---------- AI demo ---------- */
.ai-demo {
  padding: 40px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media (max-width: 860px) { .ai-demo { grid-template-columns: 1fr; padding: 24px; } }
.ai-input { display: flex; flex-direction: column; gap: 12px; }
.ai-input label,
.ai-output-label {
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ai-input label::before,
.ai-output-label::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}
.ai-output-wrap { display: flex; flex-direction: column; gap: 12px; }
.ai-input textarea {
  width: 100%;
  min-height: 140px;
  padding: 16px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  resize: vertical;
  font-size: 0.9375rem;
  line-height: 1.6;
  transition: border-color .15s ease;
}
.ai-input textarea:focus { outline: none; border-color: var(--accent); }
.ai-examples { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
@media (max-width: 860px) {
  /* Pyramid: 3 examples on top row, 2 on bottom — tapering toward the "Generate" button */
  .ai-examples {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    justify-items: center;
  }
  .ai-example { width: 100%; padding-left: 8px; padding-right: 8px; text-align: center; }
  .ai-example:nth-child(1) { grid-column: 1 / span 2; }
  .ai-example:nth-child(2) { grid-column: 3 / span 2; }
  .ai-example:nth-child(3) { grid-column: 5 / span 2; }
  .ai-example:nth-child(4) { grid-column: 2 / span 2; }
  .ai-example:nth-child(5) { grid-column: 4 / span 2; }
  /* Center USER STORY / output labels even if the parent flex is not centering them */
  .ai-input, .ai-output-wrap { align-items: center; }
  .ai-input > *, .ai-output-wrap > * { width: 100%; }
  .ai-input label, .ai-output-label { justify-content: center; }
}
.ai-example {
  padding: 6px 12px;
  font-size: 0.8125rem;
  color: var(--text-muted);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 999px;
  transition: color .15s, border-color .15s;
}
.ai-example:hover { color: var(--text); border-color: var(--accent); }
.ai-output {
  background: #0a0d12;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 20px;
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1.65;
  height: 400px;
  overflow-y: auto;
  overflow-x: hidden;
  max-width: 100%;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  color: #d7dde6;
  position: relative;
  box-sizing: border-box;
}
@media (max-width: 860px) {
  .ai-output { height: 340px; font-size: 0.75rem; padding: 14px; }
}
.ai-output .keyword { color: var(--accent-2); }
.ai-output .string { color: var(--success); }
.ai-output .fn { color: var(--accent); }
.ai-output .comment { color: var(--text-dim); font-style: italic; }
.ai-output-placeholder { color: var(--text-dim); font-style: italic; font-family: 'Inter', sans-serif; }
.ai-thinking {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent);
  font-family: 'Inter', sans-serif;
}
.ai-thinking::after {
  content: '';
  width: 8px; height: 8px;
  background: var(--accent);
  border-radius: 50%;
  animation: pulse 1s ease-in-out infinite;
}

/* ---------- Code blocks ---------- */
.code-block {
  background: #0a0d12;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px 20px;
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1.65;
  overflow-x: auto;
  color: #d7dde6;
}
.code-block .keyword { color: var(--accent-2); }
.code-block .string { color: var(--success); }
.code-block .fn { color: var(--accent); }
.code-block .comment { color: var(--text-dim); }

/* ---------- FAQ ---------- */
.faq { max-width: 780px; margin: 0 auto; }
.faq-item {
  border-bottom: 1px solid var(--border);
  padding: 4px 0;
}
.faq-q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 20px 0;
  font-weight: 600;
  text-align: left;
  font-size: 1.0625rem;
  color: var(--text);
}
.faq-q .chevron { transition: transform .2s ease; color: var(--text-muted); }
.faq-item.open .faq-q .chevron { transform: rotate(180deg); color: var(--accent); }
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
  color: var(--text-muted);
  line-height: 1.7;
}
.faq-item.open .faq-a { max-height: 400px; padding-bottom: 20px; }

/* ---------- Big CTA ---------- */
.cta-block {
  padding: 72px 40px;
  background: linear-gradient(135deg, rgba(66,133,244,0.06), rgba(52,168,83,0.06));
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-block::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(66,133,244,0.15), transparent 60%);
  pointer-events: none;
}
.cta-block h2 { margin-bottom: 16px; position: relative; }
.cta-block p { margin: 0 auto 32px; max-width: 52ch; position: relative; }
.cta-block .hero-cta { justify-content: center; position: relative; }

/* ---------- Footer ---------- */
.footer {
  padding: 72px 0 32px;
  border-top: 1px solid var(--border);
  background: var(--bg-elev);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
}
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr 1fr; gap: 28px; } .footer-grid > div:first-child { grid-column: 1 / -1; } }
@media (max-width: 560px) {
  .footer { padding: 40px 0 20px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 20px 24px; margin-bottom: 28px; }
  /* Footer mobile: logo full width, Služby + Firma side by side, Kontakt full width.
     Overall grid constrained + centered so the whole block sits nicely mid-screen. */
  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 16px 12px !important;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
    justify-items: center;
    align-items: start;
  }
  .footer-grid > div:first-child { grid-column: 1 / -1; text-align: center; margin-bottom: 4px; width: 100%; }
  .footer-grid > div:first-child .logo { justify-content: center; }
  .footer-grid > .footer-collapsible { grid-column: span 1; width: 100%; }
  .footer-grid > .footer-contact { grid-column: 1 / -1; width: 100%; }
  .footer-bottom { text-align: center; justify-content: center !important; }

  /* SLUŽBY / FIRMA as collapsible tiles matching the KONTAKT tile style */
  .footer-collapsible { width: 100%; }
  .footer-collapsible details {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
  }
  .footer-collapsible summary {
    padding: 14px 16px;
    cursor: pointer;
    justify-content: space-between;
    gap: 10px;
  }
  .footer-collapsible summary h5 { margin-bottom: 0; flex: 1; text-align: center; }
  .footer-caret {
    display: inline-block;
    width: 12px; height: 12px;
    border-right: 2px solid var(--text-muted);
    border-bottom: 2px solid var(--text-muted);
    transform: rotate(45deg);
    transition: transform .2s ease, border-color .2s ease;
    flex-shrink: 0;
    margin-right: 4px;
    margin-bottom: 3px;
  }
  .footer-collapsible details[open] .footer-caret {
    transform: rotate(-135deg);
    margin-bottom: -3px;
    border-color: var(--accent);
  }
  .footer-collapsible details ul {
    padding: 4px 16px 16px;
    display: grid;
    gap: 8px;
    justify-items: center;       /* center the list items horizontally */
    text-align: center;
  }
  .footer-collapsible details ul li { text-align: center; }
  .footer-collapsible details ul a { display: inline-block; }

  /* KONTAKT column (footer-contact) goes full-width with centered tiles; heading hidden per design */
  .footer-grid > .footer-contact { text-align: center; max-width: 340px; margin: 0 auto; width: 100%; }
  .footer-grid > .footer-contact h5 { display: none; }
  .footer-grid > .footer-contact .contact-tiles { align-items: stretch; }
  .contact-tile-body, .contact-tile-body * { text-align: left !important; }
  .footer-bottom { text-align: center; align-items: center !important; justify-content: center !important; }
  .footer-about { font-size: 0.8125rem; margin-top: 10px; max-width: none; }
  .footer h5 { font-size: 0.6875rem; margin-bottom: 10px; }
  .footer ul { gap: 6px; }
  .footer a { font-size: 0.8125rem; }
  .footer-bottom { padding-top: 18px; font-size: 0.75rem; flex-direction: column; gap: 8px; align-items: flex-start; }
}
.footer h5 { font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text); margin-bottom: 16px; font-weight: 600; }

/* ---- Footer collapsible columns (SLUŽBY / FIRMA) ----
   Desktop: pretend <details> is always open; hide the summary caret; keep the h5 heading.
   Mobile: render the summary as a tappable tile with a chevron that rotates when open. */
.footer-collapsible details { border: 0; padding: 0; }
.footer-collapsible summary {
  display: flex;
  align-items: center;
  gap: 10px;
  list-style: none;
  cursor: default;
}
.footer-collapsible summary::-webkit-details-marker { display: none; }
.footer-collapsible summary h5 { margin-bottom: 0; }

/* Desktop — unwrap the <details> so accordion behavior is mobile-only.
   `display: contents` makes the details invisible in layout; its children
   (summary + ul) render normally as siblings, bypassing the native collapse. */
@media (min-width: 861px) {
  .footer-caret { display: none; }
  .footer-collapsible details { display: contents; }
  .footer-collapsible summary {
    display: block;
    list-style: none;
    pointer-events: none;
    cursor: default;
  }
  .footer-collapsible summary::-webkit-details-marker { display: none; }
  .footer-collapsible details ul { display: grid !important; pointer-events: auto; }
  .footer-collapsible details ul a { pointer-events: auto; }
}

/* ---- Direct contact (Kontakt page "Priamy kontakt" section) ---- */
.direct-contact-title { margin-bottom: 20px; }
.direct-contact-list { display: flex; flex-direction: column; gap: 12px; }
.direct-contact-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-muted);
  text-decoration: none;
  text-align: left;
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.direct-contact-row:hover {
  transform: translateY(-1px);
  border-color: var(--accent);
  background: var(--bg-card-hover);
}
.direct-contact-icon {
  width: 48px; height: 48px;
  flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(0,122,255,0.14), rgba(52,199,89,0.08));
  border: 1px solid rgba(0,122,255,0.22);
  color: var(--accent);
}
[data-theme="light"] .direct-contact-icon {
  background: linear-gradient(135deg, rgba(0,91,187,0.12), rgba(36,138,61,0.08));
  border-color: rgba(0,91,187,0.25);
}
.direct-contact-icon svg { width: 22px; height: 22px; }
.direct-contact-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.direct-contact-label {
  font-weight: 600;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9375rem;
  flex-wrap: wrap;
}
.direct-contact-pill {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.direct-contact-value {
  font-family: var(--mono);
  font-size: 0.875rem;
  color: var(--text-muted);
  word-break: break-word;
  line-height: 1.45;
}

/* ---- Footer contact tiles (clickable email / phone / address) ---- */
.contact-tiles { display: flex; flex-direction: column; gap: 10px; }
.contact-tile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  text-decoration: none;
  transition: transform .15s ease, border-color .15s ease, background .15s ease, color .15s ease;
}
.contact-tile:hover {
  transform: translateY(-1px);
  border-color: var(--accent);
  background: var(--bg-card-hover);
  color: var(--text);
}
.contact-tile-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: grid; place-items: center;
  flex-shrink: 0;
  background: linear-gradient(135deg, rgba(0,122,255,0.14), rgba(52,199,89,0.08));
  border: 1px solid rgba(0,122,255,0.22);
  color: var(--accent);
}
[data-theme="light"] .contact-tile-icon {
  background: linear-gradient(135deg, rgba(0,91,187,0.12), rgba(36,138,61,0.08));
  border-color: rgba(0,91,187,0.25);
}
.contact-tile-icon svg { width: 18px; height: 18px; }
.contact-tile-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.contact-tile-label {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.contact-tile-value {
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}
.footer ul { list-style: none; display: grid; gap: 10px; }
.footer a { color: var(--text-muted); font-size: 0.875rem; transition: color .15s ease; }
.footer a:hover { color: var(--accent); }
.footer-about { max-width: 340px; color: var(--text-muted); font-size: 0.875rem; margin-top: 16px; }
.footer-bottom { display: flex; justify-content: center; align-items: center; padding-top: 24px; border-top: 1px solid var(--border); color: var(--text-dim); font-size: 0.8125rem; text-align: center; }
@media (max-width: 560px) { .footer-bottom { flex-direction: column; gap: 16px; } }

/* ---------- Contact form ---------- */
.form {
  display: grid;
  gap: 20px;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }
.form-field { display: grid; gap: 6px; }
.form-field label { font-size: 0.8125rem; color: var(--text-muted); font-weight: 500; }
.form-field input, .form-field textarea, .form-field select {
  padding: 12px 14px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
  transition: border-color .15s ease;
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus { outline: none; border-color: var(--accent); }
.form-field textarea { min-height: 140px; resize: vertical; }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* ---------- Animated pipeline showcase ---------- */
.showcase { max-width: 1080px; margin: 0 auto; }
.showcase-screen {
  background: #0a0d12;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow), var(--shadow-glow);
}
.showcase-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: #0c1015;
}
.showcase-bar .dot { width: 11px; height: 11px; border-radius: 50%; }
.showcase-bar .dot.red { background: #ff5f57; }
.showcase-bar .dot.yellow { background: #febc2e; }
.showcase-bar .dot.green { background: #28c840; }
.showcase-title { margin-left: 12px; color: var(--text-dim); font-size: 0.8125rem; font-family: var(--mono); }
.showcase-body { padding: 32px; }
@media (max-width: 860px) { .showcase-body { padding: 20px; } }

.showcase-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  margin-bottom: 28px;
}
@media (max-width: 900px) {
  .showcase-flow {
    grid-template-columns: 1fr;      /* vertical stack on tablet/mobile */
    gap: 0;
  }
  .showcase-node { max-width: 320px; margin: 0 auto; width: 100%; }
  .showcase-arrow {
    display: flex !important;
    justify-content: center;
    padding: 6px 0;
    height: 28px;
    width: 100%;
    color: var(--border-strong);
  }
  .showcase-arrow svg {
    transform: rotate(90deg);          /* point down on mobile */
    width: 28px; height: 28px;
  }
}
.showcase-node {
  padding: 18px 14px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-align: center;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease, background .3s ease;
}
.showcase-node.active {
  transform: translateY(-4px) scale(1.04);
  border-color: var(--accent);
  background: linear-gradient(135deg, rgba(66,133,244,0.08), rgba(52,168,83,0.05));
  box-shadow: 0 0 0 4px rgba(66,133,244,0.1), 0 12px 28px -10px var(--accent-glow);
}
.showcase-node.done { border-color: var(--success); }
.showcase-node.done .showcase-ico { color: var(--success); }
.showcase-ico {
  width: 40px; height: 40px; border-radius: 10px; margin: 0 auto 10px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(66,133,244,0.12), rgba(52,168,83,0.08));
  color: var(--accent);
  transition: color .3s ease;
}
.showcase-label { font-size: 0.9375rem; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.showcase-meta { font-family: var(--mono); font-size: 0.75rem; color: var(--text-muted); }
.showcase-arrow { color: var(--border-strong); display: flex; justify-content: center; transition: color .3s ease; }
.showcase-arrow svg path { stroke-dasharray: 4 3; animation: showcase-arrow-flow 1.2s linear infinite; }
.showcase-node.active + .showcase-arrow { color: var(--accent); }
.showcase-node.active + .showcase-arrow svg path { animation-duration: 0.6s; }
@keyframes showcase-arrow-flow {
  to { stroke-dashoffset: -14; }
}
.showcase-node.active .showcase-ico {
  animation: showcase-ico-pulse 1.4s ease-in-out infinite;
}
.showcase-node.active .showcase-ico::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 12px;
  border: 2px solid var(--accent);
  opacity: 0;
  animation: showcase-ico-ring 1.4s ease-out infinite;
  pointer-events: none;
}
.showcase-ico { position: relative; }
@keyframes showcase-ico-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}
@keyframes showcase-ico-ring {
  0% { opacity: 0.8; inset: 0; }
  100% { opacity: 0; inset: -10px; }
}
@media (prefers-reduced-motion: reduce) {
  .showcase-arrow svg path,
  .showcase-node.active .showcase-ico,
  .showcase-node.active .showcase-ico::before { animation: none; }
}

.showcase-log {
  background: #07090d;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  margin-bottom: 24px;
  /* Reserve enough height for the longest step (5 lines) so layout never shifts */
  min-height: 140px;
  max-height: 140px;
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1.7;
  color: #d7dde6;
  overflow: hidden;
}
@media (max-width: 560px) {
  .showcase-log { min-height: 170px; max-height: 170px; font-size: 0.7rem; }
}
.showcase-log .log-line { display: block; opacity: 0; animation: logFade .3s ease forwards; }
.showcase-log .muted { color: var(--text-dim); }
.showcase-log .green { color: var(--success); }
.showcase-log .cyan { color: var(--accent); }
.showcase-log .violet { color: var(--accent-2); }
.showcase-log .red { color: var(--danger); }
@keyframes logFade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

.showcase-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
@media (max-width: 640px) { .showcase-stats { grid-template-columns: 1fr 1fr; } }
.showcase-stat { text-align: center; }
.showcase-stat-num {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.showcase-stat-label { color: var(--text-muted); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; margin-top: 4px; }

/* ---------- Comparison table ---------- */
.compare-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--bg-card); }
.compare-table {
  width: 100%;
  min-width: 780px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.9375rem;
}
.compare-table th, .compare-table td {
  padding: 16px 20px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  vertical-align: top;
}
.compare-table thead th {
  background: var(--bg-elev);
  color: var(--text);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  position: sticky;
  top: 0;
  padding-top: 20px;
  padding-bottom: 20px;
}
.compare-table thead th.us {
  background: linear-gradient(135deg, rgba(66,133,244,0.12), rgba(52,168,83,0.08));
  color: var(--accent);
  border-bottom: 2px solid var(--accent);
}
.compare-table .row-label {
  color: var(--text);
  font-weight: 700;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--bg-elev);
  width: 180px;
}
.compare-table td.us {
  background: linear-gradient(135deg, rgba(66,133,244,0.04), rgba(52,168,83,0.03));
  color: var(--text);
  font-weight: 500;
  border-left: 2px solid var(--accent);
}
.compare-table tbody tr:last-child td { border-bottom: none; }
.compare-table .row-label-first { background: var(--bg-elev); border-bottom: 2px solid var(--accent); }
.compare-hint {
  color: var(--text-dim);
  font-size: 0.8125rem;
  text-align: center;
  margin-top: 14px;
}

/* Mobile: reflow comparison table into stacked cards — no horizontal scroll */
@media (max-width: 760px) {
  .compare-wrap {
    overflow-x: visible;
    border: 0;
    background: transparent;
    border-radius: 0;
  }
  .compare-table {
    min-width: 0;
    width: 100%;
    display: block;
  }
  .compare-table thead { display: none; }
  .compare-table tbody { display: block; }
  .compare-table tr {
    display: block;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 4px 16px 12px;
    margin-bottom: 14px;
  }
  .compare-table td {
    display: block;
    padding: 10px 0;
    border: 0 !important;
    background: transparent !important;
    width: auto !important;
  }
  .compare-table td.row-label {
    background: transparent !important;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 14px 0 4px;
    border-bottom: 2px solid var(--border-strong) !important;
    margin-bottom: 4px;
    text-align: center !important;                 /* user: center "CENOVÝ MODEL" row labels on mobile */
  }
  .compare-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-bottom: 4px;
  }
  /* Negative rows (competitors) get subtle left accent */
  .compare-table td:not(.us):not(.row-label) {
    padding-left: 18px;
    position: relative;
    color: var(--text-muted);
  }
  .compare-table td:not(.us):not(.row-label)::after {
    content: '✗';
    position: absolute;
    left: 0;
    top: 16px;
    color: var(--brand-red);                        /* ✗ in brand red per user */
    font-weight: 800;
    font-size: 0.9375rem;
  }
  /* "My" row — gradient highlight + check mark */
  .compare-table td.us {
    background: linear-gradient(135deg, rgba(66,133,244,0.08), rgba(52,168,83,0.04)) !important;
    border-left: 3px solid var(--accent) !important;
    border-radius: var(--radius-sm);
    padding: 10px 12px 10px 32px !important;
    margin-top: 6px;
    position: relative;
    color: var(--text) !important;
    font-weight: 500;
  }
  .compare-table td.us::after {
    content: '✓';
    position: absolute;
    left: 12px;
    top: 26px;
    color: #34C759;                                 /* ✓ in brand green per user */
    font-weight: 800;
    font-size: 1.0625rem;
  }
  [data-theme="light"] .compare-table td.us::after { color: #248A3D; }
  [data-theme="light"] .compare-table td:not(.us):not(.row-label)::after { color: #D92C20; }
  .compare-table td.us[data-label]::before {
    color: var(--accent);
    font-weight: 800;
  }
  [data-theme="light"] .compare-table td:not(.us):not(.row-label) {
    color: #475569;
  }
}

/* ---------- Testimonials ---------- */
.testimonial-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media (max-width: 760px) { .testimonial-grid { grid-template-columns: 1fr; } }
.testimonial-card {
  position: relative;
  padding: 32px 28px 24px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  transition: border-color .2s ease, transform .2s ease;
}
.testimonial-card:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.testimonial-card::before {
  content: '"';
  position: absolute;
  top: 4px;
  left: 20px;
  font-size: 5.5rem;
  line-height: 1;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0.4;
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 700;
  pointer-events: none;
}
.testimonial-quote {
  position: relative;
  color: var(--text);
  font-size: 1.0625rem;
  line-height: 1.65;
  margin: 28px 0 24px;
  flex-grow: 1;
}
.testimonial-author {
  border-top: 1px solid var(--border);
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.testimonial-role {
  font-weight: 600;
  color: var(--accent);
  font-size: 0.9375rem;
}
.testimonial-company {
  color: var(--text-muted);
  font-size: 0.8125rem;
}
.testimonial-badges {
  display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px;
}
@media (max-width: 860px) {
  /* Center testimonial author block + tag pills on mobile */
  .testimonial-author { text-align: center; }
  .testimonial-badges { justify-content: center; }
}
.testimonial-badges span {
  font-family: var(--mono);
  font-size: 0.6875rem;
  padding: 3px 9px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-muted);
}

/* ---------- Cookie banner ---------- */
.cookie-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 90;
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 40px -8px rgba(0,0,0,0.5), 0 0 0 1px rgba(66,133,244,0.1);
  padding: 20px 24px;
  max-width: 860px;
  margin: 0 auto;
  animation: cookieSlideUp .35s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes cookieSlideUp {
  from { transform: translateY(140%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.cookie-banner[hidden] { display: none; }
.cookie-banner-content {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 20px;
}
@media (max-width: 760px) {
  .cookie-banner-content { grid-template-columns: 1fr; gap: 14px; }
  .cookie-banner { padding: 18px 18px 16px; left: 12px; right: 12px; bottom: 12px; }
}
.cookie-banner-text {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-muted);
}
.cookie-banner-text strong { color: var(--text); font-weight: 600; }
.cookie-banner-text a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.cookie-banner-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
@media (max-width: 460px) {
  .cookie-banner-actions .btn { flex: 1 1 auto; justify-content: center; }
}
.cookie-banner-actions .btn { padding: 9px 16px; font-size: 0.8125rem; white-space: nowrap; }

/* Scroll to top — floating button, bottom-right */
.scroll-top {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 80;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform .2s ease, border-color .2s ease, color .2s ease, opacity .25s ease, visibility 0s linear .25s;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  padding: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
}
.scroll-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: transform .25s ease, opacity .25s ease, border-color .2s ease, color .2s ease, visibility 0s;
}
.scroll-top:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px) !important; }
.scroll-top:active { transform: scale(0.94) !important; }
.scroll-top svg { width: 20px; height: 20px; }
[data-theme="light"] .scroll-top { background: #ffffff; box-shadow: 0 4px 12px rgba(15,23,42,0.12); }

/* Re-open button (floating) */
.cookie-reopen {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 80;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform .2s ease, border-color .2s ease, color .2s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.cookie-reopen:hover { transform: scale(1.05); border-color: var(--accent); color: var(--accent); }
.cookie-reopen[hidden] { display: none; }

/* Cookie settings modal */
.cookie-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(8px);
  padding: 20px;
  animation: cookieFade .2s ease;
}
@keyframes cookieFade { from { opacity: 0; } to { opacity: 1; } }
.cookie-modal[hidden] { display: none; }
.cookie-modal-panel {
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  max-width: 520px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 28px;
}
.cookie-modal h3 { margin-bottom: 8px; }
.cookie-modal-intro { font-size: 0.9375rem; color: var(--text-muted); margin-bottom: 24px; }
.cookie-cat {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid var(--border);
}
.cookie-cat:first-of-type { border-top: none; }
.cookie-cat-name { font-weight: 600; color: var(--text); }
.cookie-cat-desc { font-size: 0.8125rem; color: var(--text-muted); margin-top: 4px; }

/* Toggle switch */
.cookie-toggle {
  position: relative;
  width: 42px;
  height: 24px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
  flex-shrink: 0;
  align-self: center;
}
.cookie-toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--text-muted);
  transition: transform .2s ease, background .2s ease;
}
.cookie-toggle.on { background: linear-gradient(135deg, var(--accent), var(--accent-2)); border-color: transparent; }
.cookie-toggle.on::after { transform: translateX(18px); background: #0a0f14; }
.cookie-toggle.locked { opacity: 0.6; cursor: not-allowed; }
.cookie-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 24px;
  flex-wrap: wrap;
}
@media (max-width: 460px) {
  .cookie-modal-actions .btn { flex: 1; }
}

/* ---------- Toast notifications ---------- */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(120%);
  padding: 14px 20px;
  background: var(--bg-card);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 0.9375rem;
  font-weight: 500;
  box-shadow: var(--shadow), 0 0 24px var(--accent-glow);
  z-index: 100;
  transition: transform .3s ease, opacity .3s ease;
  opacity: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
.toast svg { color: var(--accent); }

/* ---------- Blog listing ---------- */
.blog-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
@media (max-width: 760px) { .blog-grid { grid-template-columns: 1fr; } }
.blog-card {
  display: block;
  padding: 28px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: transform .2s ease, border-color .2s ease;
  text-align: center;                                           /* center blog card contents on all screens */
}
.blog-card:hover { transform: translateY(-3px); border-color: var(--accent); }
.blog-card-meta { display: flex; gap: 12px; font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; margin-bottom: 14px; justify-content: center; }
.blog-card-meta .cat { color: var(--accent); }
.blog-card h3 { margin-bottom: 10px; font-size: 1.3125rem; line-height: 1.25; }
.blog-card p { font-size: 0.9375rem; color: var(--text-muted); margin-left: auto; margin-right: auto; max-width: 48ch; }
.blog-card-read { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-size: 0.8125rem; font-weight: 600; color: var(--accent); justify-content: center; }

/* ---------- Article / prose ---------- */
.article-header { max-width: 780px; margin: 0 auto 48px; text-align: center; }
.article-header .eyebrow { margin-bottom: 20px; }
.article-header h1 { font-size: clamp(2rem, 3vw + 1rem, 3.25rem); margin-bottom: 20px; }
.article-meta { font-size: 0.875rem; color: var(--text-muted); display: inline-flex; gap: 12px; }
.article-meta span::before { content: '•'; margin-right: 12px; color: var(--text-dim); }
.article-meta span:first-child::before { content: ''; margin-right: 0; }

.prose { max-width: 720px; margin: 0 auto; font-size: 1.0625rem; line-height: 1.75; color: #d7dde6; }
.prose h2 { margin: 48px 0 16px; font-size: 1.75rem; color: var(--text); }
.prose h3 { margin: 32px 0 12px; font-size: 1.25rem; color: var(--text); }
.prose p { margin-bottom: 20px; color: #d7dde6; }
.prose ul, .prose ol { margin: 0 0 20px 24px; color: #d7dde6; }
.prose li { margin-bottom: 8px; }
.prose strong { color: var(--text); }
.prose em { color: var(--text); font-style: italic; }
.prose a { color: var(--accent); text-decoration: underline; text-decoration-color: rgba(66,133,244,0.4); text-underline-offset: 3px; }
.prose a:hover { text-decoration-color: var(--accent); }
.prose code { font-family: var(--mono); font-size: 0.9em; padding: 2px 6px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 4px; color: var(--accent); }
.prose pre { margin: 24px 0; }
.prose pre code { display: block; padding: 0; background: none; border: 0; color: inherit; font-size: 0.8125rem; line-height: 1.7; }
.prose blockquote { margin: 24px 0; padding: 16px 20px; border-left: 3px solid var(--accent); background: var(--bg-card); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--text-muted); font-style: italic; }
.prose hr { margin: 48px auto; max-width: 120px; border: 0; border-top: 1px solid var(--border-strong); }
.prose img, .prose figure { margin: 24px 0; border-radius: var(--radius); }

.article-footer { max-width: 780px; margin: 64px auto 0; }

/* ---------- Mobile fixes ---------- */
@media (max-width: 860px) {
  .nav-cta .btn-primary { padding: 8px 14px; font-size: 0.8125rem; }
}

@media (max-width: 560px) {
  .section { padding: 56px 0; }
  .section-sm { padding: 40px 0; }
  .container { padding: 0 16px; }
  .hero { padding: 72px 0 64px; }  /* extra top space so eyebrow pill isn't touching nav */
  .hero .lead { font-size: 0.9375rem; }
  .section-head { margin-bottom: 32px; text-align: center; }      /* user wants category + header centered on mobile */
  .section-head p { margin: 0 auto; }
  .btn-lg { padding: 12px 18px; font-size: 0.875rem; }
  .btn { padding: 10px 16px; font-size: 0.875rem; }
  .nav-cta .btn-primary { display: none; }                     /* keep only logo + hamburger on small */
  .hero-cta { flex-direction: column; gap: 10px; width: 100%; }
  .hero-cta .btn { width: 100%; }
  .cta-block { padding: 40px 20px; }
  .cta-block .hero-cta { max-width: 320px; margin-left: auto; margin-right: auto; }
  .roi, .ai-demo, .pipeline { padding: 20px; }
  .pipeline-steps { grid-template-columns: 1fr 1fr; gap: 10px; }
  .pipeline-step { padding: 14px 10px; }
  .pipeline-step p { font-size: 0.75rem; }
  .stats { grid-template-columns: 1fr; }
  .stat { padding: 24px 20px; }
  .nav-inner { height: 60px; }
  .logo { gap: 8px; font-size: 0.9375rem; height: 40px; }
  .logo .logo-mark { width: 40px; height: 40px; }
  .footer-grid { gap: 24px; }
  .grid-2 { grid-template-columns: 1fr !important; }
  .grid-3 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: 1fr; }
  .roi-result-value { font-size: 2.25rem; }
  .hero-meta { font-size: 0.8125rem; gap: 12px; flex-direction: column; }
  .eyebrow { font-size: 0.6875rem; padding: 5px 10px; }
  .card { padding: 20px; }
  .faq-q { font-size: 0.9375rem; padding: 16px 0; }
  /* Trust bar — swipeable auto-scroll carousel (mobile). Container padding
     removed so content runs edge-to-edge. JS in main.js drives scrollLeft;
     user can also drag/swipe to scroll manually. */
  .trust-bar { padding: 28px 0; }
  .trust-bar > .container { padding: 0; max-width: none; }
  .trust-bar-inner {
    gap: 20px;
    font-size: 0.8125rem;
    justify-content: flex-start;
    flex-wrap: nowrap;
    padding: 0 16px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-behavior: auto;
  }
  .trust-bar-inner::-webkit-scrollbar { display: none; }
  .trust-bar-inner span { white-space: nowrap; flex-shrink: 0; }
  /* Form row goes stacked */
  .form-row { grid-template-columns: 1fr; }
  .form { padding: 0; }
  /* Prevent long emails/URLs from overflowing */
  * { max-width: 100%; }
  .card, .form-field { word-break: break-word; overflow-wrap: break-word; }
  .card a { word-break: break-all; }
  /* Inline-style grids used in case study etc — collapse to single column */
  [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns: 1.1fr 1fr"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns: repeat(3, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="padding: 48px"] { padding: 24px !important; }
  [style*="gap: 48px"] { gap: 24px !important; }
  /* Code blocks smaller on mobile so they don't force horizontal scroll */
  .code-block, pre.code-block { font-size: 0.6875rem; padding: 12px 14px; overflow-x: auto; }

  /* /sluzby/ page — center everything on mobile (eyebrow, h2, paragraphs, bullet lists, price row) */
  body.page-services .grid-2,
  body.page-services .section > .container > div {
    text-align: center;
  }
  body.page-services .grid-2 > div > ul,
  body.page-services .section ul {
    justify-items: center;
    text-align: center;
  }
  body.page-services .grid-2 > div > ul li,
  body.page-services .section ul li {
    justify-content: center;
  }
  body.page-services .grid-2 > div > div[style*="display: flex"] {
    justify-content: center;
  }
}

/* ---------- Very small screens (iPhone SE etc) ---------- */
@media (max-width: 380px) {
  h1 { font-size: 1.625rem; }
  .hero-meta { font-size: 0.75rem; gap: 10px; }
  .terminal-body { font-size: 0.65rem; min-height: 260px; max-height: 300px; padding: 12px; }
  .nav-inner { height: 54px; }
  .lang-switch { display: none; }
  .stat-num { font-size: 2.25rem; }
  .trust-bar-inner { gap: 16px; }
}

/* ---------- Utility ---------- */
.text-center { text-align: center; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mt-48 { margin-top: 48px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.mb-48 { margin-bottom: 48px; }
.flex { display: flex; }
.gap-8 { gap: 8px; }
.gap-16 { gap: 16px; }

/* ============ Live frameworks section ============ */
.frameworks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 32px;
}
.framework-card {
  background: var(--bg-card, rgba(255,255,255,0.02));
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s, border-color 0.2s, background 0.2s;
  position: relative;
  overflow: hidden;
}
.framework-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent, transparent);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.framework-card:hover {
  transform: translateY(-3px);
  border-color: rgba(102,126,234,0.35);
}
.framework-card:hover::before { opacity: 0.08; }
.framework-card.fw-cy::before { background: linear-gradient(135deg, #18ba91, #0e8b6a); }
.framework-card.fw-pw::before { background: linear-gradient(135deg, #e85a20, #b8420f); }
.framework-card.fw-cu::before { background: linear-gradient(135deg, #3fae20, #2a7e15); }
.fw-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; position: relative; z-index: 1; }
.fw-logo { width: 44px; height: 44px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; color: #fff; flex-shrink: 0; font-family: 'JetBrains Mono', monospace; }
.fw-logo.cy { background: linear-gradient(135deg, #18ba91, #0e8b6a); }
.fw-logo.pw { background: linear-gradient(135deg, #e85a20, #b8420f); }
.fw-logo.cu { background: linear-gradient(135deg, #3fae20, #2a7e15); }
.framework-card h3 { margin: 0; font-size: 1.15rem; font-weight: 700; }
.framework-card .fw-sub { font-size: 0.8125rem; color: var(--text-dim); font-weight: 500; display: block; margin-top: 2px; }
.framework-card p { margin: 10px 0 16px; color: var(--text-dim); font-size: 0.9rem; line-height: 1.55; position: relative; z-index: 1; }
.fw-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; position: relative; z-index: 1; }
.fw-tags span { font-size: 0.7rem; font-weight: 600; padding: 4px 9px; border-radius: 6px; background: rgba(255,255,255,0.05); color: var(--text-dim); border: 1px solid var(--border); }
[data-theme="light"] .fw-tags span { background: rgba(0,0,0,0.04); }
.fw-status { display: flex; align-items: center; gap: 8px; font-size: 0.75rem; color: var(--text-dim); margin: -4px 0 16px; position: relative; z-index: 1; min-height: 18px; }
.fw-status-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fw-status-text a { color: inherit; text-decoration: underline; text-decoration-color: rgba(255,255,255,0.25); }
.fw-status-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,0.2); flex-shrink: 0; }
.fw-status-dot.na { background: var(--text-dim); box-shadow: 0 0 0 3px rgba(154,160,171,0.18); }
.fw-status-dot.run { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,0.25); animation: fwPulse 1.4s ease-in-out infinite; }
.fw-status-dot.fail { background: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,0.22); }
@keyframes fwPulse { 0%,100% { opacity: 1 } 50% { opacity: 0.4 } }
.js-fw-report[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; pointer-events: none; filter: grayscale(0.4); }
.fw-spin { display: none; width: 12px; height: 12px; border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff; border-radius: 50%; animation: fwSpin 0.8s linear infinite; margin-right: 6px; vertical-align: middle; }
.js-fw-report[aria-disabled="true"] .fw-spin { display: inline-block; }
@keyframes fwSpin { to { transform: rotate(360deg) } }
.fw-actions { display: flex; gap: 8px; margin-top: auto; flex-wrap: wrap; position: relative; z-index: 1; }
.fw-actions .btn { flex: 1; min-width: 110px; padding: 9px 12px; font-size: 0.875rem; }
.fw-actions .btn-ghost { background: transparent; border: 1px solid var(--border); color: var(--text); text-decoration: none; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-weight: 600; transition: all 0.15s; }
.fw-actions .btn-ghost:hover { background: rgba(255,255,255,0.04); border-color: rgba(102,126,234,0.4); }
[data-theme="light"] .fw-actions .btn-ghost:hover { background: rgba(0,0,0,0.04); }
.fw-cta-run { margin-top: 28px; text-align: center; padding: 20px; background: rgba(102,126,234,0.05); border: 1px dashed rgba(102,126,234,0.3); border-radius: 12px; }
.fw-cta-run p { margin: 0 0 10px; font-size: 0.9rem; color: var(--text-dim); }
.fw-cta-run a { color: var(--accent, #667eea); font-weight: 600; text-decoration: none; }
.fw-cta-run a:hover { text-decoration: underline; }

/* ============ Framework Runner (interactive demo) ============ */
.framework-runner {
  background: var(--surface, rgba(255,255,255,0.02));
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 28px;
  margin-top: 40px;
  display: grid;
  grid-template-columns: minmax(280px, 360px) 1fr;
  gap: 24px;
}
.fr-left { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.fr-tabs { display: flex; gap: 6px; background: rgba(0,0,0,0.2); padding: 4px; border-radius: 10px; border: 1px solid var(--border); }
[data-theme="light"] .fr-tabs { background: rgba(0,0,0,0.04); }
.fr-tab { flex: 1; padding: 9px 10px; border: 0; background: transparent; color: var(--text-dim); font-weight: 600; font-size: 0.8rem; border-radius: 7px; cursor: pointer; transition: all 0.15s; font-family: inherit; }
.fr-tab:hover { color: var(--text); }
.fr-tab.active { background: var(--surface-2, #1c212c); color: var(--text); box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
[data-theme="light"] .fr-tab.active { background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }

.fr-tests { display: flex; flex-direction: column; gap: 8px; }
.fr-test-label {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 13px; background: rgba(255,255,255,0.02);
  border: 1px solid var(--border); border-radius: 9px;
  cursor: pointer; transition: all 0.15s; font-size: 0.88rem; line-height: 1.4;
}
[data-theme="light"] .fr-test-label { background: rgba(0,0,0,0.02); }
.fr-test-label:hover { border-color: rgba(102,126,234,0.3); background: rgba(102,126,234,0.04); }
.fr-test-label input[type=checkbox] { margin: 2px 0 0 0; accent-color: var(--accent, #667eea); cursor: pointer; width: 16px; height: 16px; flex-shrink: 0; }
.fr-test-label .fr-test-name { flex: 1; }
.fr-test-label .fr-test-tag {
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.05em;
  padding: 2px 7px; border-radius: 5px; white-space: nowrap;
  align-self: center; flex-shrink: 0;
}
.fr-test-tag.pos { background: rgba(34,197,94,0.12); color: #22c55e; }
.fr-test-tag.neg { background: rgba(239,68,68,0.12); color: #ef4444; }
.fr-test-tag.bug { background: rgba(251,146,60,0.12); color: #fb923c; }

.fr-run {
  padding: 12px 16px;
  background: linear-gradient(135deg, var(--accent, #667eea), var(--accent-2, #764ba2));
  color: #fff; border: 0; border-radius: 10px;
  font-size: 0.95rem; font-weight: 700; font-family: inherit;
  cursor: pointer; transition: all 0.15s;
}
.fr-run:hover:not(:disabled) { opacity: 0.92; transform: translateY(-1px); }
.fr-run:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

.fr-right { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

.fr-terminal {
  flex: 1;
  background: #0a0c10;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 16px 18px;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 0.78rem;
  line-height: 1.6;
  color: #d4d6dc;
  min-height: 380px;
  max-height: 520px;
  overflow-y: auto;
  overflow-x: hidden;
  white-space: pre-wrap;
  word-break: break-all;
  position: relative;
}
.fr-terminal::-webkit-scrollbar { width: 8px; }
.fr-terminal::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 4px; }

/* Light-theme terminal — matches the rest of the light palette */
[data-theme="light"] .fr-terminal {
  background: #f6f7f9;
  border-color: rgba(15, 23, 42, 0.10);
  color: #1f2937;
}
[data-theme="light"] .fr-terminal::-webkit-scrollbar-thumb { background: rgba(15,23,42,0.18); }
[data-theme="light"] .fr-ok      { color: #15803d; }
[data-theme="light"] .fr-fail    { color: #b91c1c; }
[data-theme="light"] .fr-dim     { color: #6b7280; }
[data-theme="light"] .fr-box     { color: #4b5563; }
[data-theme="light"] .fr-feature { color: #1d4ed8; }
[data-theme="light"] .fr-log     { color: #374151; }
.fr-line { display: block; font-family: inherit; }
.fr-ok      { color: #4ade80; }
.fr-fail    { color: #ef4444; font-weight: 600; }
.fr-dim     { color: #6b7079; }
.fr-box     { color: #9ca3af; }
.fr-feature { color: #93c5fd; font-weight: 600; }

.fr-summary {
  display: flex; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px;
  background: rgba(34,197,94,0.04);
  border: 1px solid rgba(34,197,94,0.2);
  border-radius: 9px;
  font-size: 0.88rem;
  min-height: 22px;
}
.fr-summary:empty { display: none; }
.fr-summary.has-fail { background: rgba(239,68,68,0.06); border-color: rgba(239,68,68,0.25); }
.fr-sum-item { display: inline-flex; align-items: center; gap: 5px; color: var(--text-dim); }
.fr-sum-item strong { color: var(--text); }
.fr-sum-ok strong { color: #22c55e; }
.fr-sum-fail strong { color: #ef4444; }

/* Live run summary card (rendered inside .fr-summary after a GitHub dispatch) */
.fr-live-summary { flex: 1 1 100%; display: flex; flex-direction: column; gap: 10px; }
.fr-live-summary.ok { }
.fr-live-summary.fail { }
.fr-sum-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fr-sum-mark { font-size: 1.25rem; font-weight: 700; }
.fr-live-summary.ok .fr-sum-mark { color: #22c55e; }
.fr-live-summary.fail .fr-sum-mark { color: #ef4444; }
.fr-sum-title { font-weight: 700; font-size: 0.95rem; color: var(--text); }
.fr-sum-badge { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; padding: 3px 8px; border-radius: 999px; }
.fr-sum-badge.ok { background: rgba(34,197,94,0.15); color: #22c55e; border: 1px solid rgba(34,197,94,0.35); }
.fr-sum-badge.fail { background: rgba(239,68,68,0.15); color: #ef4444; border: 1px solid rgba(239,68,68,0.35); }
.fr-sum-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
.fr-sum-cell { background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; }
[data-theme="light"] .fr-sum-cell { background: rgba(0,0,0,0.03); }
.fr-sum-cell.pass .fr-sum-v { color: #22c55e; }
.fr-sum-cell.fail .fr-sum-v { color: #ef4444; }
.fr-sum-k { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); margin-bottom: 3px; }
.fr-sum-v { font-size: 1.15rem; font-weight: 700; color: var(--text); font-family: 'JetBrains Mono', ui-monospace, monospace; }
.fr-sum-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.fr-sum-link { display: inline-flex; align-items: center; gap: 5px; padding: 8px 14px; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 0.85rem; border: 1px solid var(--border); color: var(--text); background: transparent; transition: all 0.15s; }
.fr-sum-link:hover { border-color: rgba(102,126,234,0.45); }
.fr-sum-link.primary { background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; border-color: transparent; }
.fr-sum-link.primary:hover { opacity: 0.92; }

/* Embedded Allure report card shown after a live GitHub run */
.fr-summary:has(.fr-report-card) { padding: 0; background: transparent; border: none; }
.fr-report-card { width: 100%; background: #14171f; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
[data-theme="light"] .fr-report-card { background: #ffffff; border-color: rgba(15,23,42,0.1); }
[data-theme="light"] .fr-report-title strong { color: #0f172a; }
[data-theme="light"] .fr-report-sub { color: #6b7280; }
[data-theme="light"] .fr-report-btn { color: #0f172a; border-color: rgba(15,23,42,0.12); }
[data-theme="light"] .fr-report-btn:hover { border-color: rgba(102,126,234,0.5); background: rgba(102,126,234,0.06); }
[data-theme="light"] .fr-report-hint { color: #6b7280; background: rgba(15,23,42,0.03); border-top-color: rgba(15,23,42,0.08); }
/* Dark theme text defaults for the card (override light body var(--text) bleed) */
:root:not([data-theme="light"]) .fr-report-title strong,
[data-theme="dark"] .fr-report-title strong { color: #e6e8ee; }
:root:not([data-theme="light"]) .fr-report-sub,
[data-theme="dark"] .fr-report-sub { color: #9aa0ab; }
:root:not([data-theme="light"]) .fr-report-btn,
[data-theme="dark"] .fr-report-btn { color: #e6e8ee; border-color: rgba(255,255,255,0.14); }
.fr-report-card.ok { border-color: rgba(34,197,94,0.35); }
.fr-report-card.fail { border-color: rgba(239,68,68,0.35); }
.fr-report-head { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.fr-report-mark { font-size: 1.4rem; font-weight: 800; }
.fr-report-card.ok .fr-report-mark { color: #22c55e; }
.fr-report-card.fail .fr-report-mark { color: #ef4444; }
.fr-report-title { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.fr-report-title strong { font-size: 1rem; color: var(--text); }
.fr-report-sub { font-size: 0.78rem; color: var(--text-dim); font-family: 'JetBrains Mono', monospace; margin-top: 2px; }
.fr-report-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.fr-report-btn { display: inline-flex; align-items: center; padding: 7px 12px; border-radius: 8px; font-size: 0.82rem; font-weight: 600; text-decoration: none; border: 1px solid var(--border); color: var(--text); background: transparent; transition: all 0.15s; }
.fr-report-btn:hover { border-color: rgba(102,126,234,0.45); }
.fr-report-btn.primary { background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; border-color: transparent; }
.fr-report-btn.primary:hover { opacity: 0.92; }
.fr-report-frame-wrap { position: relative; width: 100%; background: #fff; }
.fr-report-frame { width: 100%; height: 640px; border: 0; display: block; background: #fff; }
[data-theme="dark"] .fr-report-frame-wrap,
:root:not([data-theme="light"]) .fr-report-frame-wrap { background: #111; }
.fr-report-hint { margin: 0; padding: 10px 18px; font-size: 0.75rem; color: var(--text-dim); border-top: 1px solid var(--border); background: rgba(255,255,255,0.02); }
@media (max-width: 640px) {
  .fr-report-frame { height: 480px; }
  .fr-report-head { flex-direction: column; align-items: flex-start; gap: 10px; padding: 12px 14px; }
  .fr-report-title { width: 100%; }
  .fr-report-actions { width: 100%; }
  .fr-report-actions .fr-report-btn { flex: 1; justify-content: center; }
  .fr-live-summary { padding: 0; }
}
.fr-sum-dur strong { font-family: 'JetBrains Mono', monospace; }

@media (max-width: 840px) {
  .framework-runner { grid-template-columns: 1fr; padding: 20px 16px; }
  .fr-terminal { min-height: 280px; max-height: 440px; font-size: 0.72rem; padding: 12px 14px; }
}

/* ============ Framework runner — activity panel ============ */
.fr-activity {
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  max-height: 180px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
[data-theme="light"] .fr-activity { background: rgba(0,0,0,0.02); }
.fr-activity-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-shrink: 0; }
.fr-activity-dot { width: 10px; height: 10px; border-radius: 50%; background: #6b7079; box-shadow: 0 0 0 3px rgba(107,112,121,0.15); transition: all 0.25s; }
.fr-activity-dot.running { background: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,0.25); animation: frPulse 1.2s infinite; }
.fr-activity-dot.ok { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,0.25); }
.fr-activity-dot.fail { background: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,0.25); }
@keyframes frPulse { 0%,100% {opacity:1;} 50% {opacity:0.4;} }
.fr-activity-label { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); }
.fr-activity-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; font-size: 0.82rem; }
.fr-activity-list::-webkit-scrollbar { width: 6px; }
.fr-activity-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 3px; }
.fr-act-item { display: flex; align-items: flex-start; gap: 8px; padding: 4px 0; color: var(--text); line-height: 1.45; animation: frFadeIn 0.25s ease-out; }
@keyframes frFadeIn { from { opacity: 0; transform: translateY(-2px); } to { opacity: 1; transform: none; } }
.fr-act-bullet { width: 6px; height: 6px; border-radius: 50%; background: #6b7079; margin-top: 7px; flex-shrink: 0; transition: all 0.2s; }
.fr-act-text { flex: 1; }
.fr-act-idle { color: var(--text-dim); }
.fr-act-idle .fr-act-bullet { background: #6b7079; }
.fr-act-active { color: var(--text); font-weight: 500; }
.fr-act-active .fr-act-bullet { background: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,0.25); animation: frPulse 1.2s infinite; }
.fr-act-done { color: var(--text-dim); }
.fr-act-done .fr-act-bullet { background: #22c55e; }
.fr-act-fail { color: #f87171; font-weight: 500; }
.fr-act-fail .fr-act-bullet { background: #ef4444; }
.fr-act-fail-done .fr-act-bullet { background: #ef4444; }
.fr-act-ok { color: #4ade80; font-weight: 600; }
.fr-act-ok .fr-act-bullet { background: #22c55e; }
.fr-act-section { color: var(--accent, #667eea); font-weight: 700; padding-top: 10px; border-top: 1px dashed rgba(102,126,234,0.2); margin-top: 6px; }
.fr-act-section:first-child { border-top: 0; padding-top: 4px; margin-top: 0; }

@media (max-width: 840px) {
  .fr-activity { max-height: 140px; }
}