/* GENERATED by build_css.py - do NOT edit directly. Edit the 6 source files, then re-run. */

/* ===== css/variables-v4.css ===== */
/* REVYSTA Design Tokens
   Source: investori.html light theme + hotelieri.html dark accents
   Fonts: Space Grotesk (headings) + Inter (body) */

:root {
  /* Primary */
  --primary: #1e40af;
  --primary-hover: #1d4ed8;
  --primary-light: #3b82f6;
  --primary-soft: rgba(30, 64, 175, 0.06);
  --primary-glow: rgba(30, 64, 175, 0.25);

  /* Accent (green) */
  --accent: #059669;
  --accent-hover: #10b981;
  --accent-soft: rgba(5, 150, 105, 0.08);

  /* Warning / highlight */
  --orange: #f59e0b;
  --red: #e94560;

  /* Surfaces */
  --bg: #ffffff;
  --bg-alt: #f8fafc;
  --surface: #ffffff;
  --border: #e2e8f0;
  --border-light: #f1f5f9;

  /* Text */
  --text: #1e293b;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --text-body: #475569;
  --text-on-primary: #ffffff;

  /* Dark sections (dashboard embeds) */
  --dark-bg: #0a0e27;
  --dark-card: #111636;
  --dark-card2: #161b45;
  --dark-accent: #e94560;
  --dark-text: #eaeaea;
  --dark-sub: #a0a0b0;
  --dark-border: rgba(255, 255, 255, 0.06);

  /* Radius */
  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-full: 100px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.10);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
  --shadow-primary: 0 4px 16px rgba(30, 64, 175, 0.25);

  /* Spacing scale */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* Typography scale */
  --fs-xs: 0.75rem;
  --fs-sm: 0.82rem;
  --fs-base: 0.95rem;
  --fs-md: 1.05rem;
  --fs-lg: 1.15rem;
  --fs-xl: 1.35rem;
  --fs-2xl: 1.5rem;
  --fs-3xl: 2rem;
  --fs-4xl: clamp(2rem, 4.5vw, 2.8rem);

  /* Transitions */
  --ease: 0.2s ease;
  --ease-slow: 0.3s ease;

  /* Layout */
  --container-max: 1120px;
  --container-narrow: 860px;
  --nav-height: 60px;
}

/* ===== css/base-v4.css ===== */
/* Reset + Typography + Base Elements */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Skip-to-content link (accessibility) */
.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  z-index: 10000;
  padding: 8px 16px;
  background: var(--primary);
  color: #fff;
  border-radius: 0 0 4px 4px;
  font-size: 0.875rem;
  text-decoration: none;
  transition: top 0.2s;
}
.skip-link:focus {
  top: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-height);
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
  font-size: 16px;
}

/* Self-hosted fonts */
@font-face {
  font-family: 'Space Grotesk';
  src: url('../fonts/SpaceGrotesk-Variable.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Variable.woff2') format('woff2');
  font-weight: 400 600;
  font-display: swap;
}

/* Typography */
h1, h2, h3, h4 {
  font-family: 'Space Grotesk', -apple-system, sans-serif;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}

h1 {
  font-size: var(--fs-4xl);
  line-height: 1.1;
}

h2 {
  font-size: var(--fs-2xl);
  line-height: 1.25;
}

h3 {
  font-size: var(--fs-xl);
  font-weight: 600;
}

p {
  color: var(--text-secondary);
  font-size: var(--fs-base);
  line-height: 1.7;
}

p + p {
  margin-top: var(--sp-3);
}

a {
  color: var(--primary);
  text-decoration: none;
  transition: color var(--ease);
}

a:hover {
  color: var(--primary-hover);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Selection */
::selection {
  background: var(--primary-soft);
  color: var(--primary);
}

/* Utilities */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.text-primary { color: var(--primary); }
.text-accent { color: var(--accent); }
.text-muted { color: var(--text-muted); }
.font-heading { font-family: 'Space Grotesk', sans-serif; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }

/* A11y/responsive: logos + chart canvases scale within their box (audit: srcset/responsive-styles) */
.nav__logo, .footer__logo { max-width: 100%; }
canvas { max-width: 100%; }

/* ===== css/layout-v4.css ===== */
/* Layout: Grid, containers, sections, responsive */

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--sp-8);
}

.container--narrow {
  max-width: var(--container-narrow);
}

/* Sections */
.section {
  padding: var(--sp-20) 0;
}

.section--alt {
  background: var(--bg-alt);
}

.section--dark {
  background: var(--dark-bg);
  color: var(--dark-text);
}

.section--dark h2,
.section--dark h3 {
  color: var(--dark-text);
}

.section--dark p {
  color: var(--dark-sub);
}

.section-label {
  font-family: 'Space Grotesk', sans-serif;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: var(--sp-3);
}

.section--dark .section-label {
  color: var(--dark-accent);
}

.section-header {
  max-width: 640px;
  margin-bottom: var(--sp-12);
}

.section-header.centered {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.section h2 {
  margin-bottom: var(--sp-4);
}

.section-subtitle {
  font-size: var(--fs-lg);
  color: var(--text-secondary);
  max-width: 600px;
}

/* Two-column split */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-16);
  align-items: center;
}

.split--reverse {
  direction: rtl;
}

.split--reverse > * {
  direction: ltr;
}

/* Three-column grid */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
}

/* Four-column grid */
.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-6);
}

/* Flex utilities */
.flex {
  display: flex;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); }
.gap-6 { gap: var(--sp-6); }
.gap-8 { gap: var(--sp-8); }

/* Responsive */
@media (max-width: 1024px) {
  .split {
    grid-template-columns: 1fr;
    gap: var(--sp-10);
  }

  .split--reverse {
    direction: ltr;
  }

  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .container {
    padding: 0 var(--sp-5);
  }

  .section {
    padding: var(--sp-16) 0;
  }

  .grid-3 {
    grid-template-columns: 1fr;
  }

  .grid-4 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 0 var(--sp-4);
  }

  .section {
    padding: var(--sp-12) 0;
  }
}

/* ===== css/components-v4.css ===== */
/* =============================================
   COMPONENTS: Nav, Buttons, Cards, Forms, etc.
   ============================================= */

/* --- NAVIGATION --- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-height);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-light);
  z-index: 100;
  transition: box-shadow var(--ease);
}

.nav.scrolled {
  box-shadow: var(--shadow-sm);
}

.nav__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--sp-8);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav__logo {
  height: 34px;
  width: auto;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  list-style: none;
}

.nav__links a {
  font-size: calc(var(--fs-sm) * 1.3);
  font-weight: 500;
  color: var(--text-secondary);
  transition: color var(--ease);
}

.nav__links a:hover,
.nav__links a.active {
  color: var(--primary);
}

/* ---- Nav dropdown: Moduly ---- */
.nav__has-drop {
  position: relative;
}

.nav__drop-trigger::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--ease);
}

.nav__drop {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 240px;
  padding: var(--sp-2);
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg, 0 12px 40px rgba(0,0,0,0.18));
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--ease), transform var(--ease), visibility var(--ease);
  z-index: 60;
}

/* small hover bridge so the menu doesn't close in the gap */
.nav__has-drop::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 14px;
}

.nav__has-drop:hover .nav__drop,
.nav__has-drop:focus-within .nav__drop {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.nav__has-drop:hover .nav__drop-trigger::after,
.nav__has-drop:focus-within .nav__drop-trigger::after {
  transform: translateY(1px) rotate(-135deg);
}

.nav__drop li a {
  display: block;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: calc(var(--fs-sm) * 1.3);
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
  transition: background var(--ease), color var(--ease);
}

.nav__drop li a:hover {
  background: var(--bg-alt);
  color: var(--primary);
}

/* mobile sub-links under Produkt */
.nav__mobile-sub {
  padding-left: var(--sp-6) !important;
  font-size: calc(var(--fs-sm) * 1.3) !important;
  color: var(--text-muted) !important;
}

.nav__cta {
  display: inline-flex;
  align-items: center;
}

/* Nav CTA button follows the +30% nav type scale */
.nav__cta .btn {
  font-size: calc(var(--fs-sm) * 1.3);
}

/* Hamburger */
.nav__hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--sp-2);
}

.nav__hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--text);
  margin: 5px 0;
  transition: transform var(--ease), opacity var(--ease);
}

.nav__hamburger.open span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}
.nav__hamburger.open span:nth-child(2) {
  opacity: 0;
}
.nav__hamburger.open span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* Mobile menu */
.nav__mobile {
  display: none;
  position: fixed;
  top: var(--nav-height);
  left: 0;
  right: 0;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  padding: var(--sp-6) var(--sp-8);
  box-shadow: var(--shadow-lg);
}

.nav__mobile.open {
  display: block;
}

.nav__mobile a {
  display: block;
  padding: var(--sp-3) 0;
  font-size: calc(var(--fs-base) * 1.3);
  font-weight: 500;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-light);
}

.nav__mobile a:last-child {
  border-bottom: none;
}

/* --- LANGUAGE SWITCHER --- */
.lang-switch {
  position: relative;
  margin-left: var(--sp-3);
}

.lang-switch__btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 5px 10px;
  cursor: pointer;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-secondary);
  transition: color var(--ease), border-color var(--ease);
}

.lang-switch__btn:hover {
  color: var(--primary);
  border-color: var(--primary);
}

.lang-switch__icon {
  flex-shrink: 0;
}

.lang-switch__menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  list-style: none;
  padding: 4px 0;
  min-width: 72px;
  z-index: 110;
}

.lang-switch.open .lang-switch__menu {
  display: block;
}

.lang-switch__opt {
  display: block;
  padding: 6px 14px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  transition: background var(--ease), color var(--ease);
}

.lang-switch__opt:hover {
  background: var(--bg-alt);
  color: var(--primary);
}

.lang-switch__opt.active {
  color: var(--primary);
  font-weight: 600;
}

/* Mobile language pills */
.lang-switch__mobile {
  display: flex;
  gap: 6px;
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--border-light);
  flex-wrap: wrap;
}

.lang-switch__mobile .lang-switch__opt {
  padding: 4px 12px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  text-align: center;
}

.lang-switch__mobile .lang-switch__opt.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

@media (max-width: 768px) {
  .nav__links { display: none; }
  .nav__cta { display: none; }
  .lang-switch { display: none; }
  .nav__hamburger { display: block; }
  .nav__inner { padding: 0 var(--sp-5); }
}


/* --- BUTTONS --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 14px 28px;
  border-radius: 10px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: var(--fs-base);
  border: none;
  cursor: pointer;
  transition: all var(--ease);
  text-decoration: none;
  line-height: 1;
}

.btn--primary {
  background: var(--primary);
  color: var(--text-on-primary);
}

.btn--primary:hover {
  background: var(--primary-hover);
  box-shadow: var(--shadow-primary);
  transform: translateY(-1px);
  color: var(--text-on-primary);
}
.btn--primary:active { transform: translateY(0); box-shadow: none; }
.btn--primary:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }

.btn--accent {
  background: var(--accent);
  color: var(--text-on-primary);
}

.btn--accent:hover {
  background: var(--accent-hover);
  box-shadow: 0 4px 16px rgba(5, 150, 105, 0.3);
  transform: translateY(-1px);
  color: var(--text-on-primary);
}
.btn--accent:active { transform: translateY(0); box-shadow: none; }
.btn--accent:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.btn--outline {
  background: transparent;
  border: 2px solid var(--border);
  color: var(--text);
}

.btn--outline:hover {
  background: rgba(30, 64, 175, 0.06);
  border-color: var(--primary);
  color: var(--primary);
}
.btn--outline:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }

.btn--ghost {
  background: transparent;
  color: var(--primary);
  padding: 14px 16px;
}

.btn--ghost:hover {
  background: var(--primary-soft);
  color: var(--primary);
  text-decoration: underline;
}
.btn--ghost:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }

.btn--lg {
  padding: 16px 36px;
  font-size: var(--fs-md);
}

.btn--sm {
  padding: 10px 20px;
  font-size: var(--fs-sm);
}

.btn-group {
  display: flex;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

@media (max-width: 480px) {
  .btn-group {
    flex-direction: column;
  }
  .btn-group .btn {
    width: 100%;
    text-align: center;
  }
}


/* --- CARDS --- */
.card {
  padding: var(--sp-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: box-shadow var(--ease);
}

.card:hover {
  box-shadow: var(--shadow);
}

.card--alt {
  background: var(--bg-alt);
}

/* Metric card */
.metric-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
}

.metric-card {
  padding: var(--sp-6);
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.metric-num {
  font-family: 'Space Grotesk', sans-serif;
  font-size: var(--fs-3xl);
  font-weight: 700;
  color: var(--primary);
  line-height: 1;
  margin-bottom: var(--sp-2);
}

.metric-label {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.4;
}

@media (max-width: 768px) {
  .metric-grid { grid-template-columns: 1fr; }
}


/* --- FEATURE LIST --- */
.feature-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.feature-item {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
}

.feature-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 20px;
}

.feature-icon svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.feature-title {
  font-weight: 600;
  font-size: var(--fs-base);
  color: var(--text);
  margin-bottom: 2px;
}

.feature-desc {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.6;
}


/* --- STEPS (How it works) --- */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-6);
  counter-reset: step;
}

.step {
  text-align: center;
  counter-increment: step;
  position: relative;
}

.step__number {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--text-on-primary);
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: var(--fs-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--sp-4);
}

.step__title {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: var(--fs-base);
  color: var(--text);
  margin-bottom: var(--sp-2);
}

.step__desc {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.5;
}

/* Connector line between steps */
.step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 28px;
  left: calc(50% + 36px);
  width: calc(100% - 72px);
  height: 2px;
  background: var(--border);
}

@media (max-width: 768px) {
  .steps { grid-template-columns: 1fr; gap: var(--sp-8); }
  .step:not(:last-child)::after { display: none; }
}


/* --- PRICING CARDS --- */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
  align-items: start;
}

.pricing-card {
  padding: var(--sp-8);
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  transition: box-shadow var(--ease-slow), transform var(--ease-slow);
}

.pricing-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}

.pricing-card--recommended {
  border-color: var(--accent);
  position: relative;
  box-shadow: var(--shadow);
}

.pricing-card--recommended:hover {
  box-shadow: 0 12px 40px rgba(30, 64, 175, 0.3);
  transform: none;
}

.pricing-card--recommended::before {
  content: attr(data-badge);
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 16px;
  background: var(--accent);
  color: white;
  font-family: 'Space Grotesk', sans-serif;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: var(--radius-full);
}

.pricing-card__tier {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: var(--fs-lg);
  color: var(--text);
  margin-bottom: var(--sp-2);
}

.pricing-card__price {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: var(--fs-3xl);
  color: var(--primary);
  line-height: 1;
  margin-bottom: var(--sp-1);
}

.pricing-card--recommended .pricing-card__price {
  color: var(--accent);
}

.pricing-card__period {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-bottom: var(--sp-6);
}

.pricing-card__features {
  list-style: none;
  margin-bottom: var(--sp-6);
}

.pricing-card__features li {
  padding: var(--sp-2) 0;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
}

.pricing-card__features li::before {
  content: '\2713';
  color: var(--accent);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}

.pricing-card .btn {
  width: 100%;
}

@media (max-width: 768px) {
  .pricing-grid {
    grid-template-columns: 1fr;
    max-width: 400px;
    margin: 0 auto;
  }
  /* Show recommended first on mobile */
  .pricing-card--recommended { order: -1; }
}


/* --- PRICING TOGGLE --- */
.pricing-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-10);
}

.pricing-toggle__label {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
}

.pricing-toggle__label.active {
  color: var(--text);
  font-weight: 600;
}

.pricing-toggle__switch {
  width: 48px;
  height: 26px;
  background: var(--border);
  border-radius: 13px;
  position: relative;
  cursor: pointer;
  border: none;
  transition: background var(--ease);
}

.pricing-toggle__switch.active {
  background: var(--accent);
}

.pricing-toggle__switch::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background: white;
  border-radius: 50%;
  transition: transform var(--ease);
}

.pricing-toggle__switch.active::after {
  transform: translateX(22px);
}

.pricing-toggle__badge {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 2px 10px;
  border-radius: var(--radius-full);
}

/* Time-limited launch pricing note above the pricing cards */
.pricing-launch-note {
  max-width: 640px;
  margin: var(--sp-6) auto 0;
  text-align: center;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: var(--radius-md);
  padding: var(--sp-3) var(--sp-5);
}


/* --- FEATURE COMPARISON TABLE --- */
.comparison-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.comparison-table thead th {
  padding: var(--sp-4);
  text-align: center;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  border-bottom: 2px solid var(--border);
  background: var(--bg-alt);
}

.comparison-table thead th:first-child {
  text-align: left;
}

.comparison-table tbody td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border-light);
  text-align: center;
  color: var(--text-secondary);
}

.comparison-table tbody td:first-child {
  text-align: left;
  font-weight: 500;
  color: var(--text);
}

.comparison-table .check {
  color: var(--accent);
  font-weight: 700;
  font-size: 18px;
}

.comparison-table .dash {
  color: var(--border);
}


/* --- ACCORDION (FAQ) --- */
.accordion {
  max-width: 720px;
}

.accordion__item {
  border-bottom: 1px solid var(--border-light);
}

.accordion__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-5) 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
}

.accordion__trigger:hover {
  color: var(--primary);
}

.accordion__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  margin-left: var(--sp-4);
  transition: transform var(--ease);
}

.accordion__item.open .accordion__icon {
  transform: rotate(180deg);
}

.accordion__content {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--ease-slow);
}

.accordion__content p {
  padding-bottom: var(--sp-5);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.7;
}


/* --- BADGES --- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 6px 14px;
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 600;
}

.badge--green {
  background: var(--accent-soft);
  color: var(--accent);
}

.badge--blue {
  background: var(--primary-soft);
  color: var(--primary);
}

.badge .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}


/* --- HIGHLIGHT BOX --- */
.highlight-box {
  padding: var(--sp-6) var(--sp-8);
  background: var(--primary-soft);
  border-left: 3px solid var(--primary);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.highlight-box p {
  color: var(--text);
  font-weight: 500;
  font-size: var(--fs-sm);
}

.highlight-box strong {
  color: var(--primary);
}


/* --- BROWSER MOCKUP --- */
.browser-mockup {
  background: var(--dark-bg);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.browser-mockup__bar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  background: #1a1f3d;
}

.browser-mockup__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.browser-mockup__dot--red { background: #ff5f57; }
.browser-mockup__dot--yellow { background: #febc2e; }
.browser-mockup__dot--green { background: #28c840; }

.browser-mockup img {
  width: 100%;
  display: block;
}


/* --- FORMS --- */
.form-group {
  margin-bottom: var(--sp-5);
}

.form-label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
  margin-bottom: var(--sp-2);
}

.form-input,
.form-textarea,
.form-select {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: 'Inter', sans-serif;
  /* 16px floor prevents iOS Safari auto-zoom on focus (must stay >= 16px on touch). */
  font-size: 16px;
  color: var(--text);
  background: var(--bg);
  transition: border-color var(--ease), box-shadow var(--ease);
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.12);
}

.form-input:invalid:not(:placeholder-shown),
.form-textarea:invalid:not(:placeholder-shown) {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(233, 69, 96, 0.1);
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--text-muted);
}

.form-textarea {
  min-height: 120px;
  resize: vertical;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5);
}

@media (max-width: 480px) {
  .form-row { grid-template-columns: 1fr; }
}

.form__reassurance {
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-top: var(--sp-3);
}

.form__optional {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-weight: 400;
}


/* --- FOOTER --- */
.footer {
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
  padding: var(--sp-12) 0 var(--sp-8);
}

.footer__inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--sp-10);
}

.footer__brand {
  max-width: 280px;
}

.footer__logo {
  height: 28px;
  margin-bottom: var(--sp-4);
}

.footer__desc {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.6;
}

.footer__links h3 {
  font-size: var(--fs-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text);
  margin-bottom: var(--sp-4);
}

.footer__links a {
  display: block;
  padding: var(--sp-1) 0;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.footer__links a:hover {
  color: var(--primary);
}

.footer__bottom {
  margin-top: var(--sp-8);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

@media (max-width: 768px) {
  .footer__inner {
    flex-direction: column;
    gap: var(--sp-8);
  }
  .footer__bottom {
    flex-direction: column;
    gap: var(--sp-3);
    text-align: center;
  }
}


/* --- CTA BANNER --- */
.cta-banner {
  text-align: center;
  padding: var(--sp-16) 0;
}

.cta-banner h2 {
  margin-bottom: var(--sp-3);
}

.cta-banner p {
  max-width: 500px;
  margin: 0 auto var(--sp-8);
}


/* --- ROI CALCULATOR --- */
.roi-calc {
  max-width: 560px;
  margin: 0 auto;
  padding: var(--sp-8);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.roi-calc__field {
  margin-bottom: var(--sp-6);
}

.roi-calc__label {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
  margin-bottom: var(--sp-2);
}

.roi-calc__value {
  color: var(--primary);
  font-family: 'Space Grotesk', sans-serif;
}

.roi-calc input[type="range"] {
  width: 100%;
  height: 6px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--border);
  border-radius: 3px;
  outline: none;
}

.roi-calc input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--primary);
  cursor: pointer;
  border: 3px solid white;
  box-shadow: var(--shadow-sm);
}

.roi-calc input[type="number"] {
  width: 100%;
  padding: 10px 14px;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: 'Space Grotesk', sans-serif;
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--text);
  text-align: right;
}

.roi-calc input[type="number"]:focus {
  outline: none;
  border-color: var(--primary);
}

.roi-calc__result {
  text-align: center;
  padding: var(--sp-6);
  background: var(--accent-soft);
  border-radius: var(--radius);
  margin-top: var(--sp-4);
}

.roi-calc__result-num {
  font-family: 'Space Grotesk', sans-serif;
  font-size: var(--fs-3xl);
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
  margin-bottom: var(--sp-2);
}

.roi-calc__result-label {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.roi-calc__result-sub {
  margin-top: var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.roi-calc__cta-hint {
  text-align: center;
  margin-top: var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}
.roi-calc__cta-hint a {
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
}
.roi-calc__cta-hint a:hover {
  text-decoration: underline;
}

.roi-calc__cta-hint a:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 2px;
}


/* --- COOKIE CONSENT BANNER --- */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: var(--bg);
  border-top: 1px solid var(--border);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
  transform: translateY(100%);
  transition: transform 0.3s ease;
}
.cookie-banner--visible {
  transform: translateY(0);
}
.cookie-banner__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--sp-4) var(--sp-6);
  display: flex;
  align-items: center;
  gap: var(--sp-6);
}
.cookie-banner__text {
  flex: 1;
  font-size: var(--fs-sm);
  color: var(--text-body);
  margin: 0;
}
.cookie-banner__text a {
  color: var(--primary);
  text-decoration: underline;
}
.cookie-banner__actions {
  display: flex;
  gap: var(--sp-3);
  flex-shrink: 0;
}
@media (max-width: 640px) {
  .cookie-banner__inner {
    flex-direction: column;
    text-align: center;
    padding: var(--sp-4);
    gap: var(--sp-3);
  }
  .cookie-banner__actions {
    width: 100%;
    justify-content: center;
  }
}


/* --- GDPR FORM CONSENT --- */
.form-consent {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--text-body);
  cursor: pointer;
  margin-top: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.form-consent input[type="checkbox"] {
  margin-top: 3px;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}
.form-consent a {
  color: var(--primary);
  text-decoration: underline;
}
.footer__bottom a {
  color: var(--text-muted);
  text-decoration: none;
}
.footer__bottom a:hover {
  color: var(--primary);
  text-decoration: underline;
}

/* ===== css/pages-v4.css ===== */
/* Page-specific styles */

/* ---- HERO ---- */
.hero {
  padding-top: calc(var(--nav-height) + var(--sp-16));
  padding-bottom: var(--sp-16);
  min-height: 85vh;
  display: flex;
  align-items: center;
}

.hero__content {
  max-width: 520px;
}

.hero__eyebrow {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: var(--sp-4);
}

.hero h1 {
  margin-bottom: var(--sp-5);
}

.hero__subtitle {
  font-size: var(--fs-lg);
  color: var(--text-secondary);
  margin-bottom: var(--sp-8);
  max-width: 480px;
}

.hero__image {
  position: relative;
}

.hero__image .browser-mockup {
  transform: perspective(1200px) rotateY(-4deg);
  transition: transform 0.4s ease;
}

.hero__image .browser-mockup:hover {
  transform: perspective(1200px) rotateY(0deg);
}

.hero--brief .split {
  grid-template-columns: minmax(0, 0.95fr) minmax(360px, 1fr);
}

.hero--brief .hero__content {
  max-width: 620px;
}

.hero__brief {
  min-width: 0;
}

.hero-brief {
  position: relative;
  max-width: 520px;
  margin-left: auto;
  padding: var(--sp-6);
  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.hero-brief::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(30, 64, 175, 0.08);
  border-radius: calc(var(--radius-lg) - 4px);
  pointer-events: none;
}

.hero-brief__top {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-bottom: var(--sp-4);
  margin-bottom: var(--sp-4);
  border-bottom: 1px solid var(--border-light);
  font-family: 'Space Grotesk', sans-serif;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text);
}

.hero-brief__top time {
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 600;
}

.hero-brief__cards {
  position: relative;
  display: grid;
  gap: var(--sp-3);
}

.brief-action-card {
  display: grid;
  grid-template-columns: 10px 1fr;
  gap: var(--sp-3);
  align-items: start;
  min-height: 72px;
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.brief-action-card p {
  margin: 0;
  color: var(--text);
  font-weight: 700;
  line-height: 1.45;
}

.brief-action-card__dot {
  width: 10px;
  height: 10px;
  margin-top: 6px;
  border-radius: var(--radius-full);
}

.brief-action-card--green {
  border-left: 4px solid var(--accent);
}

.brief-action-card--green .brief-action-card__dot {
  background: var(--accent);
}

.brief-action-card--amber {
  border-left: 4px solid var(--orange);
}

.brief-action-card--amber .brief-action-card__dot {
  background: var(--orange);
}

.brief-action-card--blue {
  border-left: 4px solid var(--primary-light);
}

.brief-action-card--blue .brief-action-card__dot {
  background: var(--primary-light);
}

@media (max-width: 1024px) {
  .hero {
    min-height: auto;
    padding-top: calc(var(--nav-height) + var(--sp-10));
    padding-bottom: var(--sp-10);
  }
  .hero__content { max-width: 100%; }
  .hero--brief .split {
    grid-template-columns: 1fr;
  }
  .hero-brief {
    margin: 0 auto;
  }
  .hero__image .browser-mockup {
    transform: none;
    max-width: 560px;
    margin: 0 auto;
  }
}


/* ---- PROBLEM SECTION ---- */
.problem-card {
  padding: var(--sp-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-align: center;
}

.problem-card__icon {
  width: 48px;
  height: 48px;
  margin: 0 auto var(--sp-4);
  background: rgba(233, 69, 96, 0.08);
  color: var(--red);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.problem-card__title {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: var(--fs-base);
  color: var(--text);
  margin-bottom: var(--sp-2);
}

.problem-card__desc {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.6;
}

.problem-grid {
  align-items: stretch;
}

.problem-card--brief {
  text-align: left;
  border-top: 3px solid var(--red);
}

.problem-card--brief:nth-child(2) {
  border-top-color: var(--orange);
}

.problem-card--brief:nth-child(3) {
  border-top-color: var(--primary);
}


/* ---- DAILY BRIEF ---- */
.daily-brief {
  max-width: 980px;
  margin: 0 auto;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.daily-brief__row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.daily-brief__row + .daily-brief__row {
  border-top: 1px solid var(--border-light);
}

.daily-brief__row > div {
  padding: var(--sp-5);
  min-width: 0;
  color: var(--text-secondary);
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.daily-brief__row > div + div {
  border-left: 1px solid var(--border-light);
}

.daily-brief__row--head {
  background: var(--primary-soft);
}

.daily-brief__row--head > div {
  font-family: 'Space Grotesk', sans-serif;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--primary);
}

.daily-brief__row:not(.daily-brief__row--head) > div:last-child {
  color: var(--text);
  font-weight: 700;
}


/* ---- DIAGNOSTICS + PRODUCT AREAS ---- */
.diagnostic-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4);
  max-width: 900px;
  margin: 0 auto;
}

.diagnostic-card,
.product-module {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.diagnostic-card {
  min-height: 88px;
  display: flex;
  align-items: center;
  padding: var(--sp-5);
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  color: var(--text);
  border-left: 4px solid var(--primary-light);
}

.diagnostic-card:nth-child(2),
.diagnostic-card:nth-child(5) {
  border-left-color: var(--orange);
}

.diagnostic-card:nth-child(3),
.diagnostic-card:nth-child(6) {
  border-left-color: var(--accent);
}

.product-module {
  min-height: 156px;
  padding: var(--sp-5);
}

.product-module h3 {
  margin-bottom: var(--sp-3);
  font-size: var(--fs-lg);
}

.product-module p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.6;
}

.product-module--link,
.product-module--all {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.product-module--link:hover,
.product-module--link:focus-visible,
.product-module--all:hover,
.product-module--all:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: var(--primary-light);
}

.product-module__more {
  margin-top: auto;
  font-weight: 600;
  color: var(--primary);
}

.product-module--all {
  border-style: dashed;
}


/* ---- FOUNDER PROOF ---- */
.founder-proof {
  background: var(--bg);
}

.founder-proof__story p {
  color: var(--text-secondary);
}

.founder-proof__quote {
  padding: var(--sp-8);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.founder-proof__quote blockquote {
  margin: 0;
  font-family: 'Space Grotesk', sans-serif;
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: 1.35;
  color: var(--text);
}

.founder-proof__quote cite {
  display: block;
  margin-top: var(--sp-4);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-style: normal;
}

@media (max-width: 768px) {
  main {
    padding-bottom: 76px;
  }

  .hero-brief {
    padding: var(--sp-4);
  }

  .brief-action-card {
    min-height: auto;
  }

  .daily-brief__row {
    grid-template-columns: 1fr;
  }

  .daily-brief__row--head {
    display: none;
  }

  .daily-brief__row > div {
    padding: var(--sp-4);
  }

  .daily-brief__row > div + div {
    border-left: none;
    border-top: 1px solid var(--border-light);
  }

  .daily-brief__row [role="cell"]::before {
    display: block;
    margin-bottom: var(--sp-1);
    font-family: 'Space Grotesk', sans-serif;
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--primary);
  }

  .daily-brief__row [role="cell"]:nth-child(1)::before {
    content: "Čo sa deje";
  }

  .daily-brief__row [role="cell"]:nth-child(2)::before {
    content: "Prečo je to dôležité";
  }

  .daily-brief__row [role="cell"]:nth-child(3)::before {
    content: "Čo urobiť dnes";
  }

  .diagnostic-grid {
    grid-template-columns: 1fr;
  }

  .product-module {
    min-height: auto;
  }

  .founder-proof__quote {
    padding: var(--sp-5);
  }
}

@media (max-width: 480px) {
  .hero--brief .btn-group {
    align-items: stretch;
  }

  .hero--brief .btn-group .btn {
    width: 100%;
    justify-content: center;
  }
}


/* ---- DASHBOARD SHOWCASE ---- */
.showcase-carousel {
  display: flex;
  gap: var(--sp-6);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: var(--sp-4) 0;
  -webkit-overflow-scrolling: touch;
}

.showcase-carousel::-webkit-scrollbar {
  display: none;
}

.showcase-item {
  min-width: 80%;
  scroll-snap-align: center;
  box-shadow: var(--shadow-lg);
  border-radius: var(--radius);
  overflow: hidden;
}

.showcase-item img {
  border-radius: var(--radius);
  border: 1px solid var(--dark-border);
}

.showcase-item__caption {
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  padding: var(--sp-2) var(--sp-3);
  background: var(--bg);
}

/* Browser mockup image hover zoom (clipped by overflow:hidden on .browser-mockup) */
.browser-mockup img {
  transition: transform 0.4s ease;
}
.browser-mockup:hover img {
  transform: scale(1.01);
}

/* ---- MOBILE AI INTEGRATIONS ---- */
.pocket-section {
  position: relative;
  overflow: hidden;
}

.pocket-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) 1.1fr;
  gap: var(--sp-12);
  align-items: center;
  max-width: 980px;
  margin: 0 auto;
}

.phone-demo {
  box-sizing: border-box;
  width: min(100%, 360px);
  max-width: 100%;
  margin: 0 auto;
  padding: 12px;
  border-radius: 34px;
  background: linear-gradient(145deg, #0f172a, #020617);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.32);
}

.phone-demo--product {
  background: linear-gradient(145deg, #10214a, #07111f);
  box-shadow: var(--shadow-lg);
}

.phone-demo__chrome {
  height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.phone-demo__chrome span {
  width: 72px;
  height: 6px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.2);
}

.phone-demo__screen {
  min-height: 520px;
  padding: var(--sp-5);
  border-radius: 24px;
  background:
    radial-gradient(circle at top left, rgba(59, 130, 246, 0.2), transparent 34%),
    linear-gradient(180deg, #f8fafc 0%, #eef4ff 100%);
  color: var(--text);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.phone-demo__status {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.phone-chat {
  max-width: 88%;
  padding: var(--sp-4);
  border-radius: 18px;
  font-size: var(--fs-sm);
  line-height: 1.45;
}

.phone-chat--user {
  align-self: flex-end;
  background: var(--primary);
  color: var(--text-on-primary);
  border-bottom-right-radius: var(--radius-sm);
}

.phone-chat--revysta {
  align-self: flex-start;
  background: var(--surface);
  border: 1px solid var(--border);
  border-bottom-left-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}

.phone-chat--revysta strong,
.phone-chat--revysta span {
  display: block;
}

.phone-chat--revysta strong {
  margin-bottom: var(--sp-2);
  color: var(--text);
}

.phone-chat--revysta span {
  color: var(--text-secondary);
}

.phone-brief-card {
  margin-top: auto;
  padding: var(--sp-5);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(30, 64, 175, 0.16);
  box-shadow: var(--shadow-sm);
}

.phone-brief-card__label {
  display: inline-block;
  margin-bottom: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: 800;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.phone-brief-card p {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--text-secondary);
}

.integration-stack {
  display: grid;
  gap: var(--sp-5);
}

.integration-card {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: var(--sp-4);
  align-items: start;
  padding: var(--sp-6);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.integration-card__icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 800;
  color: var(--text-on-primary);
}

.integration-card--claude .integration-card__icon {
  background: linear-gradient(135deg, #7c3aed, #2563eb);
}

.integration-card--chatgpt .integration-card__icon {
  background: linear-gradient(135deg, #059669, #0f766e);
}

.integration-card--brief .integration-card__icon {
  background: linear-gradient(135deg, #f59e0b, #e94560);
}

.integration-card h3 {
  margin: 0 0 var(--sp-2);
  color: var(--dark-text);
  font-size: var(--fs-lg);
}

.integration-card p {
  margin: 0;
  color: var(--dark-sub);
  font-size: var(--fs-sm);
  line-height: 1.55;
}

@media (max-width: 860px) {
  .pocket-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }

  .integration-stack {
    max-width: 560px;
    margin: 0 auto;
  }
}

@media (max-width: 480px) {
  .phone-demo {
    border-radius: 28px;
    padding: 10px;
  }

  .phone-demo__screen {
    min-height: 470px;
    padding: var(--sp-4);
    border-radius: 20px;
  }

  .integration-card {
    grid-template-columns: 44px 1fr;
    padding: var(--sp-5);
  }

  .integration-card__icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
  }
}


/* ---- PRODUCT PAGE: alternating sections ---- */
.product-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-16);
  align-items: center;
}

.product-section:nth-child(even) {
  direction: rtl;
}

.product-section:nth-child(even) > * {
  direction: ltr;
}

.product-section__content h3 {
  margin-bottom: var(--sp-3);
}

.product-section__content p {
  margin-bottom: var(--sp-4);
}

.product-section__visual img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

@media (max-width: 768px) {
  .product-section,
  .product-section:nth-child(even) {
    grid-template-columns: 1fr;
    direction: ltr;
    gap: var(--sp-8);
  }
}


/* ---- ABOUT PAGE ---- */
.about-metric-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
  text-align: center;
}

.about-metric-strip .metric-num {
  font-size: var(--fs-2xl);
}

@media (max-width: 768px) {
  .about-metric-strip {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* ---- CONTACT PAGE ---- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-16);
  align-items: start;
}

.form-trust-strip {
  display: flex;
  gap: var(--sp-4);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--sp-6);
}

.form-trust-strip__item {
  font-size: var(--fs-sm);
  color: var(--accent);
  font-weight: 600;
}

.contact-info-card {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
  padding: var(--sp-5) 0;
  border-bottom: 1px solid var(--border-light);
}

.contact-info-card:last-child {
  border-bottom: none;
}

.contact-info-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  background: var(--primary-soft);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .contact-grid { grid-template-columns: 1fr; }
}


/* ---- THREE.js 3D STAGE ---- */
#three-stage {
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease;
}

#three-stage.loaded {
  opacity: 1;
}

#three-stage canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

/* When 3D is active (desktop), hide the flat CSS word and go dark */
@media (min-width: 768px) {
  body.three-active .letter-hero__word {
    opacity: 0 !important;
    pointer-events: none;
    transition: opacity 0.4s ease;
  }

  body.three-active .letter-hero {
    background: #070A0F;
  }

  body.three-active .letter-hero__scroll-hint {
    color: rgba(255, 255, 255, 0.5);
  }

  /* Letter sections get dark bg to blend with 3D backdrop */
  body.three-active .letter-section {
    background: #070A0F;
    color: rgba(255, 255, 255, 0.92);
  }

  body.three-active .letter-section--alt {
    background: #0a0d16;
  }

  body.three-active .letter-section--dark {
    background: #0a0e27;
  }

  body.three-active .letter-section__title {
    color: rgba(255, 255, 255, 0.95);
  }

  body.three-active .letter-section__body {
    color: rgba(255, 255, 255, 0.68);
  }

  body.three-active .letter-section__metric-label {
    color: rgba(255, 255, 255, 0.55);
  }

  body.three-active .letter-section__char {
    display: none;
  }
}

/* On mobile, hide 3D stage entirely - CSS fallback stays */
@media (max-width: 767px) {
  #three-stage {
    display: none !important;
  }
}


/* ---- LETTER HERO ---- */
.letter-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--bg);
}

.letter-hero__word {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(2px, 0.5vw, 8px);
  user-select: none;
}

.letter-hero__char {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(16vw, 20vw, 24vw);
  font-weight: 700;
  line-height: 1;
  color: var(--primary);
  opacity: 0;
  transform: translateY(-20px);
  /* default state before animation */
}

.letter-hero__char--animate {
  animation: letterDrop 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes letterDrop {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.letter-hero__scroll-hint {
  position: absolute;
  bottom: var(--sp-10);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  letter-spacing: 1px;
  text-transform: uppercase;
  animation: hintBounce 2s ease-in-out infinite;
}

.letter-hero__scroll-hint svg {
  display: block;
}

@keyframes hintBounce {
  0%, 100% { opacity: 0.5; transform: translateX(-50%) translateY(0); }
  50% { opacity: 1; transform: translateX(-50%) translateY(6px); }
}

/* Floating word cluster (desktop only, fixed overlay) */
.letter-hero__floating {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  pointer-events: none;
  transition: transform 0.4s ease, opacity 0.4s ease;
}

/* Floating word cluster disabled - decorative background letters in each section
   already provide letter presence; the fixed overlay competed with content */
@media (min-width: 768px) {
  .letter-hero__floating {
    display: none;
  }
}

.letter-hero__float-char {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(6vw, 8vw, 10vw);
  font-weight: 700;
  color: var(--primary);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.letter-hero__float-char.caught {
  opacity: 0;
  transform: scale(0.5);
}


/* ---- LETTER SECTIONS ---- */
.letter-section {
  position: relative;
  min-height: 80vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: var(--sp-20) 0;
}

.letter-section--alt {
  background: var(--bg-alt);
}

.letter-section--dark {
  background: var(--dark-bg);
  color: var(--dark-text);
}

.letter-section__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-16);
  align-items: center;
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--sp-8);
}

/* Right-side letter: content left, letter right */
.letter-section--right .letter-section__inner {
  /* default order */
}

/* Left-side letter: letter left, content right */
.letter-section--left .letter-section__inner {
  direction: rtl;
}

.letter-section--left .letter-section__inner > * {
  direction: ltr;
}

/* The giant decorative background letter */
.letter-section__char {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(20vw, 28vw, 35vw);
  font-weight: 700;
  line-height: 0.85;
  opacity: 0.07;
  color: currentColor;
  user-select: none;
  pointer-events: none;
  text-align: center;
  transition: opacity 0.6s ease;
}

.letter-section--dark .letter-section__char {
  color: var(--dark-accent);
  opacity: 0.12;
}

.letter-section.active .letter-section__char {
  opacity: 0.09;
}

.letter-section--dark.active .letter-section__char {
  opacity: 0.15;
}

/* Content block */
.letter-section__content {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.letter-section.active .letter-section__content {
  opacity: 1;
  transform: translateY(0);
}

.letter-section__label {
  font-family: 'Space Grotesk', sans-serif;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: var(--sp-3);
}

.letter-section--dark .letter-section__label {
  color: var(--dark-accent);
}

.letter-section__title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: var(--fs-4xl);
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: var(--sp-5);
  color: var(--text);
}

.letter-section--dark .letter-section__title {
  color: var(--dark-text);
}

.letter-section__body {
  font-size: var(--fs-md);
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: var(--sp-8);
}

.letter-section--dark .letter-section__body {
  color: var(--dark-sub);
}

/* Metric / highlight inside letter section */
.letter-section__metric {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1;
  margin-bottom: var(--sp-2);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.letter-section__metric.in-view {
  transform: scale(1.02);
}

.letter-section__metric--green { color: var(--accent); }
.letter-section__metric--blue  { color: var(--primary); }
.letter-section__metric--orange { color: var(--orange); }
.letter-section__metric--red   { color: var(--dark-accent); }

.letter-section__metric-label {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.letter-section--dark .letter-section__metric-label {
  color: var(--dark-sub);
}

/* Strategy badges inside Y section */
.strategy-badges {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-top: var(--sp-4);
}

.strategy-badge {
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-full);
  font-size: var(--fs-sm);
  font-weight: 600;
  font-family: 'Space Grotesk', sans-serif;
}

.strategy-badge--conservative {
  background: rgba(5, 150, 105, 0.1);
  color: var(--accent);
}

.strategy-badge--balanced {
  background: rgba(30, 64, 175, 0.1);
  color: var(--primary);
}

.strategy-badge--aggressive {
  background: rgba(245, 158, 11, 0.1);
  color: var(--orange);
}

/* Dashboard screenshot inside letter section */
.letter-section .browser-mockup {
  max-width: 100%;
  transform: perspective(900px) rotateY(4deg);
  transition: transform 0.4s ease;
}

.letter-section--left .browser-mockup {
  transform: perspective(900px) rotateY(-4deg);
}

.letter-section.active .browser-mockup {
  transform: perspective(900px) rotateY(0);
}

/* Mobile adaptation */
@media (max-width: 767px) {
  .letter-hero__char {
    font-size: clamp(18vw, 22vw, 28vw);
  }

  .letter-section {
    min-height: auto;
    padding: var(--sp-16) 0;
  }

  .letter-section__inner,
  .letter-section--left .letter-section__inner {
    grid-template-columns: 1fr;
    direction: ltr;
    gap: var(--sp-6);
    padding: 0 var(--sp-5);
  }

  /* On mobile, show letter above content */
  .letter-section__char {
    font-size: 40vw;
    opacity: 0.08;
    text-align: center;
  }

  .letter-section__content {
    transform: translateY(20px);
  }
}


/* prefers-reduced-motion: skip all animations */
@media (prefers-reduced-motion: reduce) {
  .letter-hero__char--animate {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .letter-section__content {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .letter-section__char {
    transition: none;
  }

}


/* ---- MOBILE STICKY CTA ---- */
.mobile-cta {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--sp-3) var(--sp-4);
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--border);
  z-index: 90;
  box-shadow: 0 -4px 12px rgba(0,0,0,0.08);
}

.mobile-cta .btn {
  width: 100%;
  text-align: center;
  display: block;
}

.mobile-cta.visible {
  display: block;
}

@media (min-width: 768px) {
  .mobile-cta { display: none !important; }
}


/* ---- LETTER SECTION ICONS ---- */
/* Extracted from Revysta_logo_stamp.svg — one icon per letter section.
   Each icon is positioned below the metric/body copy and animates on scroll-in
   when the parent .letter-section gains the .active class. */

.letter-icon {
  display: block;
  width: 64px;
  height: 64px;
  margin-top: var(--sp-6);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s ease 0.35s, transform 0.5s ease 0.35s;
}

.letter-section.active .letter-icon {
  opacity: 1;
  transform: translateY(0);
}

/* On dark sections, flip icon strokes/fills to light */
.letter-section--dark .letter-icon .icon-fill {
  fill: rgba(255,255,255,0.85);
}
.letter-section--dark .letter-icon .icon-stroke {
  stroke: rgba(255,255,255,0.85);
}

/* ---- R: bar chart bars grow from baseline ---- */
@keyframes barGrow {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}
@keyframes arrowSlide {
  from { stroke-dashoffset: 30; opacity: 0; }
  to   { stroke-dashoffset: 0;  opacity: 1; }
}

.icon-r .bar1,
.icon-r .bar2,
.icon-r .bar3 {
  transform-box: fill-box;
  transform-origin: bottom center;
  transform: scaleY(0);
}
.icon-r .arrow-line {
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  opacity: 0;
}
.letter-section.active .icon-r .bar1 {
  animation: barGrow 0.4s cubic-bezier(0.34,1.1,0.64,1) 0.5s forwards;
}
.letter-section.active .icon-r .bar2 {
  animation: barGrow 0.4s cubic-bezier(0.34,1.1,0.64,1) 0.6s forwards;
}
.letter-section.active .icon-r .bar3 {
  animation: barGrow 0.4s cubic-bezier(0.34,1.1,0.64,1) 0.7s forwards;
}
.letter-section.active .icon-r .arrow-line {
  animation: arrowSlide 0.35s ease 0.9s forwards;
}

/* ---- E: wave lines draw themselves ---- */
@keyframes waveDraw {
  from { stroke-dashoffset: 80; opacity: 0; }
  to   { stroke-dashoffset: 0;  opacity: 1; }
}
.icon-e .wave1,
.icon-e .wave2 {
  stroke-dasharray: 80;
  stroke-dashoffset: 80;
  opacity: 0;
}
.letter-section.active .icon-e .wave1 {
  animation: waveDraw 0.55s ease 0.5s forwards;
}
.letter-section.active .icon-e .wave2 {
  animation: waveDraw 0.55s ease 0.7s forwards;
}

/* ---- V: euro sign draws in (fade + slide) ---- */
@keyframes euroFloat {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.icon-v .euro-arc,
.icon-v .euro-bar1,
.icon-v .euro-bar2 {
  opacity: 0;
  transform: translateY(8px);
  transform-box: fill-box;
  transform-origin: center;
}
.letter-section.active .icon-v .euro-arc {
  animation: euroFloat 0.45s ease 0.5s forwards;
}
.letter-section.active .icon-v .euro-bar1 {
  animation: euroFloat 0.45s ease 0.62s forwards;
}
.letter-section.active .icon-v .euro-bar2 {
  animation: euroFloat 0.45s ease 0.72s forwards;
}

/* ---- Y: key jiggles (unlock motion) ---- */
@keyframes keyUnlock {
  0%   { transform: rotate(0deg); }
  20%  { transform: rotate(-18deg); }
  45%  { transform: rotate(10deg); }
  65%  { transform: rotate(-6deg); }
  80%  { transform: rotate(3deg); }
  100% { transform: rotate(0deg); }
}
.icon-y {
  transform-box: fill-box;
  transform-origin: 20px 28px; /* pivot at key ring center */
}
.letter-section.active .icon-y {
  animation: keyUnlock 0.7s ease 0.6s both;
}

/* ---- S: gear spins once then settles into slow idle ---- */
@keyframes gearSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes gearIdle {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.icon-s {
  transform-box: fill-box;
  transform-origin: center;
}
.letter-section.active .icon-s {
  animation: gearSpin 0.7s cubic-bezier(0.4,0,0.2,1) 0.5s,
             gearIdle 6s linear 1.2s infinite;
}

/* ---- T: robot arm pivots (AI working) ---- */
@keyframes armPivot {
  0%   { transform: rotate(0deg); }
  30%  { transform: rotate(-22deg); }
  55%  { transform: rotate(12deg); }
  75%  { transform: rotate(-8deg); }
  90%  { transform: rotate(4deg); }
  100% { transform: rotate(0deg); }
}
.icon-t .arm-upper {
  transform-box: fill-box;
  transform-origin: 90% 80%; /* pivot near the elbow/joint end */
}
.letter-section.active .icon-t .arm-upper {
  animation: armPivot 0.9s ease 0.55s both;
}

/* ---- A: bar chart grows + arrow bounces up ---- */
@keyframes barGrowA {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}
@keyframes arrowBounce {
  0%   { transform: translateY(6px); opacity: 0; }
  60%  { transform: translateY(-3px); opacity: 1; }
  80%  { transform: translateY(1px); opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}
.icon-a .bar1,
.icon-a .bar2,
.icon-a .bar3 {
  transform-box: fill-box;
  transform-origin: bottom center;
  transform: scaleY(0);
}
.icon-a .arrow-group {
  opacity: 0;
  transform: translateY(6px);
}
.letter-section.active .icon-a .bar1 {
  animation: barGrowA 0.4s cubic-bezier(0.34,1.1,0.64,1) 0.5s forwards;
}
.letter-section.active .icon-a .bar2 {
  animation: barGrowA 0.4s cubic-bezier(0.34,1.1,0.64,1) 0.62s forwards;
}
.letter-section.active .icon-a .bar3 {
  animation: barGrowA 0.4s cubic-bezier(0.34,1.1,0.64,1) 0.74s forwards;
}
.letter-section.active .icon-a .arrow-group {
  animation: arrowBounce 0.5s ease 0.9s forwards;
}

/* Reduced motion: skip all icon animations */
@media (prefers-reduced-motion: reduce) {
  .letter-icon {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .letter-section.active .icon-r .bar1,
  .letter-section.active .icon-r .bar2,
  .letter-section.active .icon-r .bar3,
  .letter-section.active .icon-r .arrow-line,
  .letter-section.active .icon-e .wave1,
  .letter-section.active .icon-e .wave2,
  .letter-section.active .icon-v .euro-arc,
  .letter-section.active .icon-v .euro-bar1,
  .letter-section.active .icon-v .euro-bar2,
  .letter-section.active .icon-s,
  .letter-section.active .icon-t .arm-upper,
  .letter-section.active .icon-a .bar1,
  .letter-section.active .icon-a .bar2,
  .letter-section.active .icon-a .bar3,
  .letter-section.active .icon-a .arrow-group {
    animation: none;
    opacity: 1;
    transform: none;
    stroke-dashoffset: 0;
  }
}


/* ---- BREADCRUMB (module subpages) ---- */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.breadcrumb a {
  color: var(--primary);
  text-decoration: none;
}

.breadcrumb a:hover {
  text-decoration: underline;
}


/* ---- MODULE ROZCESTNÍK (product page) ---- */
.module-nav-grid {
  gap: var(--sp-5);
}

.module-nav-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.module-nav-card:hover,
.module-nav-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: var(--primary-light);
}

.module-nav-card__icon {
  font-size: 1.6rem;
  line-height: 1;
}

.module-nav-card__title {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: var(--fs-lg);
  color: var(--text);
}

.module-nav-card__desc {
  color: var(--text-muted);
  line-height: 1.55;
  flex: 1;
}

.module-nav-card__more {
  margin-top: var(--sp-2);
  font-weight: 600;
  color: var(--primary);
}

/* reverse an alternating product-section (visual on the left) */
.product-section--reverse {
  direction: rtl;
}

.product-section--reverse > * {
  direction: ltr;
}

@media (max-width: 768px) {
  .product-section--reverse {
    direction: ltr;
  }
}

/* disabled ghost button (subpage coming soon) */
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: default;
  pointer-events: none;
}



/* ===== css/home-command.css ===== */
/* ============================================================
   REVYSTA - Command Center theme (homepage-scoped)
   ------------------------------------------------------------
   Dark "revenue cockpit" look. Scoped to body.theme-command so
   it NEVER cascades onto the other pages / languages that still
   assume a light background. Linked LAST in index.html <head>,
   after pages-v4.css, so the component overrides below win.

   To revert the whole redesign: remove this <link> + the
   theme-command class from <body>. Nothing else changes.
   ============================================================ */

/* ---- 1. Token overrides + new Command Center tokens ---- */
body.theme-command {
  /* Surfaces */
  --bg:            #06111F;   /* near-black navy (page base) */
  --bg-alt:        #0A1D35;   /* deep blue (alt sections) */
  --surface:       #0E2240;   /* card surface, lifts off bg-alt */
  --border:        rgba(120, 160, 210, 0.16);
  --border-light:  rgba(120, 160, 210, 0.10);

  /* Text */
  --text:           #F5F8FF;
  --text-secondary: #C4D2E6;
  --text-muted:     #A9B7CC;
  --text-body:      #C4D2E6;  /* was undefined globally (cookie banner) */
  --text-on-primary:#FFFFFF;

  /* Primary (REVYSTA blue, brightened so it reads on dark) */
  --primary:       #2C6BFF;
  --primary-hover: #4D86FF;
  --primary-light: #6BA0FF;
  --primary-soft:  rgba(44, 107, 255, 0.12);
  --primary-glow:  rgba(44, 107, 255, 0.40);

  /* Accent (growth green) */
  --accent:        #18C76F;
  --accent-hover:  #2EE085;
  --accent-soft:   rgba(24, 199, 111, 0.14);

  /* Warning / highlight (brightened for dark) */
  --orange:        #FFB02E;
  --red:           #FF5C7A;

  /* Shadows re-tuned for dark bg (light drop shadows vanish on dark) */
  --shadow-sm:     0 1px 3px rgba(0, 0, 0, 0.40);
  --shadow:        0 6px 20px rgba(0, 0, 0, 0.45);
  --shadow-lg:     0 16px 48px rgba(0, 0, 0, 0.55);
  --shadow-md:     0 8px 28px rgba(0, 0, 0, 0.50);   /* was undefined (lang dropdown) */
  --shadow-primary:0 6px 24px rgba(44, 107, 255, 0.45);

  /* New Command Center tokens */
  --cyan:          #4DDCFF;
  --cyan-soft:     rgba(77, 220, 255, 0.14);
  --glow-cyan:     0 0 24px rgba(77, 220, 255, 0.45);
  --glow-green:    0 0 24px rgba(24, 199, 111, 0.40);
  --glow-blue:     0 0 28px rgba(44, 107, 255, 0.45);
  --grid-line:     rgba(77, 220, 255, 0.07);
  --node-dot:      rgba(77, 220, 255, 0.55);
  --brand-blue:    #173FBF;
  --card-glass:    rgba(14, 34, 64, 0.72);
  --card-glass-border: rgba(120, 180, 255, 0.22);

  color: var(--text);
  background-color: var(--bg);
}

/* ---- 2. Page-level ambient glow (pure CSS, GPU-composited) ---- */
body.theme-command {
  background-image:
    radial-gradient(60% 50% at 80% 14%, rgba(44, 107, 255, 0.18), transparent 70%),
    radial-gradient(50% 42% at 10% 6%, rgba(77, 220, 255, 0.10), transparent 70%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}
@media (max-width: 768px) {
  body.theme-command { background-attachment: scroll; } /* avoid mobile paint jank */
}

/* ---- 3. Overrides for hardcoded (non-token) light rules ---- */
body.theme-command .nav {
  background: rgba(6, 17, 31, 0.85);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
body.theme-command .nav.scrolled {
  background: rgba(6, 17, 31, 0.94);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
}
body.theme-command .nav__mobile { background: rgba(6, 17, 31, 0.98); }
body.theme-command .nav__hamburger span { background: var(--text); }
body.theme-command .mobile-cta {
  background: rgba(6, 17, 31, 0.95);
  border-top: 1px solid var(--border);
}
body.theme-command .browser-mockup__bar { background: #0A1D35; }
body.theme-command .skip-link { background: var(--primary); color: #fff; }

/* Section rhythm: keep the already-dark AI section distinct by lifting it */
body.theme-command .pocket-section { background: var(--bg-alt); }

/* Logo: the dark sections want the white logo variant where available.
   nav/footer use revysta-logo.svg (dark-ink); on dark we brighten it. */
body.theme-command .nav__logo,
body.theme-command .footer__logo { filter: brightness(0) invert(1); }

/* Diagnostic + product cards: subtle neon lift on hover */
body.theme-command .diagnostic-card:hover,
body.theme-command .product-module:hover {
  border-color: var(--card-glass-border);
  box-shadow: var(--glow-cyan);
}


/* ============================================================
   SECONDARY PAGES on the Command Center theme
   (produkt, cennik, o-nas, kontakt, demo, moduly/*).
   Most components inherit dark automatically via CSS vars;
   these rules fix the few that need explicit dark treatment.
   ============================================================ */

/* Product/module screenshots have LIGHT backgrounds — on a dark page a bare
   PNG reads as a bright hole. Frame each visual so it looks like a screen. */
body.theme-command .product-section__visual img {
  border: 1px solid var(--surface-border, #1C3A63);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 4px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}

/* Feature icons: the inline light soft-tints (rgba primary/accent/red 0.06-0.08)
   vanish on dark. Lift the icon chips so they stay visible. */
body.theme-command .feature-icon {
  background: rgba(44, 107, 255, 0.14) !important;
  color: var(--primary) !important;
}

/* Module rozcestník cards + "all" card: dark surface + neon hover parity */
body.theme-command .module-nav-card {
  background: var(--surface);
  border-color: var(--card-glass-border, #1C3A63);
}
body.theme-command .module-nav-card:hover,
body.theme-command .module-nav-card:focus-visible,
body.theme-command .product-module--link:hover,
body.theme-command .product-module--link:focus-visible,
body.theme-command .product-module--all:hover,
body.theme-command .product-module--all:focus-visible {
  border-color: var(--cyan);
  box-shadow: var(--glow-cyan);
}
body.theme-command .module-nav-card__more,
body.theme-command .product-module__more,
body.theme-command .breadcrumb a { color: var(--cyan); }

/* Comparison table (cennik): header + row separators need dark treatment */
body.theme-command .comparison-table thead th { background: var(--bg-alt); }
body.theme-command .comparison-table td.check { color: var(--accent); }

/* Nav dropdown (Moduly) on dark */
body.theme-command .nav__drop {
  background: var(--surface);
  border-color: var(--card-glass-border, #1C3A63);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}
body.theme-command .nav__drop li a:hover {
  background: var(--bg-alt);
  color: var(--cyan);
}

/* GDPR card (mobil-a-bezpecnost) uses inline background:var(--bg) which equals
   page bg on dark → invisible. Lift it to surface. */
body.theme-command .product-section__visual > div[style*="background: var(--bg)"] {
  background: var(--surface) !important;
  border-color: var(--card-glass-border, #1C3A63) !important;
}

/* ============================================================
   LETTER-SCROLL homepages (en/de/pl/hu use this instead of the
   SK cockpit). The .letter-section--* variants and the giant
   decorative chars were tuned for a light page + the old red
   --dark-* tokens; re-point them to the Command Center palette.
   ============================================================ */

/* Illustrative-data badge on the language hero dashboard mockups.
   The SK cockpit carries an "Ukážka" badge; the language heroes show a
   screenshot PNG with baked-in numbers, so they need the same honesty label.
   Sits at the right edge of the browser-mockup chrome bar. */
body.theme-command .browser-mockup__bar { position: relative; }
body.theme-command .browser-mockup__sample {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cyan);
  background: var(--cyan-soft);
  border: 1px solid rgba(77, 220, 255, 0.30);
  padding: 2px 9px;
  border-radius: var(--radius-full);
}

/* Hero with the animated R-E-V-Y-S-T-A word */
body.theme-command .letter-hero { background: transparent; }
body.theme-command .letter-hero__char { color: var(--text); }
body.theme-command .letter-hero__scroll-hint { color: var(--text-muted); }
body.theme-command .letter-hero__float-char { color: var(--primary-light); }

/* Section background variants: --alt stays a touch lighter, --dark
   becomes the deeper navy so the page keeps vertical rhythm. */
body.theme-command .letter-section { background: var(--bg); color: var(--text); }
body.theme-command .letter-section--alt { background: var(--bg-alt); }
body.theme-command .letter-section--dark {
  background: #050D18;            /* deepest tier for contrast */
  color: var(--text);
}

/* Giant decorative background letter: cyan glow instead of dark ink / red */
body.theme-command .letter-section__char { color: var(--cyan); opacity: 0.06; }
body.theme-command .letter-section.active .letter-section__char { opacity: 0.10; }
body.theme-command .letter-section--dark .letter-section__char { color: var(--cyan); opacity: 0.12; }
body.theme-command .letter-section--dark.active .letter-section__char { opacity: 0.16; }

/* Text inside letter sections */
body.theme-command .letter-section__label,
body.theme-command .letter-section--dark .letter-section__label { color: var(--accent); }
body.theme-command .letter-section__title,
body.theme-command .letter-section--dark .letter-section__title { color: var(--text); }
body.theme-command .letter-section__body,
body.theme-command .letter-section--dark .letter-section__body { color: var(--text-secondary); }
body.theme-command .letter-section__metric-label { color: var(--text-muted); }

/* Metric accents inside letter sections (green/blue/cyan glow) */
body.theme-command .letter-section__metric--green { color: var(--accent); }
body.theme-command .letter-section__metric--blue { color: var(--primary); }
body.theme-command .letter-section__metric--orange { color: var(--orange); }
body.theme-command .letter-section__metric--red { color: var(--accent); }

/* Letter-icon SVGs (R/E/V/Y/S/T/A animated icons) carry HARDCODED fill/stroke
   presentation attributes. `color` only affects currentColor parts, so re-point
   the off-palette OLD-RED icon parts (the "T / AI agents" robot) to the cyan
   accent. CSS beats SVG presentation attributes on specificity. */
body.theme-command .letter-icon { color: var(--cyan); }
body.theme-command .letter-icon [fill="rgba(233,69,96,0.85)"] { fill: var(--cyan); }
body.theme-command .letter-icon [stroke="rgba(233,69,96,0.85)"] { stroke: var(--cyan); }
/* keep the icon on the --dark section legible (white parts already set in pages-v4) */
body.theme-command .letter-section--dark .letter-icon [fill="rgba(233,69,96,0.85)"] { fill: rgba(255,255,255,0.85); }
body.theme-command .letter-section--dark .letter-icon [stroke="rgba(233,69,96,0.85)"] { stroke: rgba(255,255,255,0.85); }

/* ============================================================
   4. HERO COCKPIT (replaces the light .hero-brief card)
   ============================================================ */
body.theme-command .cockpit {
  position: relative;
  max-width: 540px;
  margin-left: auto;
  padding: var(--sp-6);
  background: var(--card-glass);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid var(--card-glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--glow-blue), var(--shadow-lg);
  overflow: hidden;
}

/* point-network + holographic arc background */
body.theme-command .cockpit__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.9;
}
body.theme-command .cockpit > *:not(.cockpit__bg) { position: relative; z-index: 1; }

body.theme-command .cockpit__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-5);
}
body.theme-command .cockpit__title {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600;
  font-size: var(--fs-md);
  letter-spacing: 0.02em;
  color: var(--text);
}
body.theme-command .cockpit__badge {
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cyan);
  background: var(--cyan-soft);
  border: 1px solid rgba(77, 220, 255, 0.30);
  padding: 3px 10px;
  border-radius: var(--radius-full);
}

/* KPI band */
body.theme-command .cockpit__kpis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
body.theme-command .cockpit-kpi {
  background: rgba(6, 17, 31, 0.55);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4);
}
body.theme-command .cockpit-kpi__num {
  display: block;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: var(--fs-2xl);
  line-height: 1.1;
  color: var(--text);
}
body.theme-command .cockpit-kpi--up .cockpit-kpi__num { color: var(--accent); }
body.theme-command .cockpit-kpi__label {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* AI recommended price card - the hero element of the cockpit */
body.theme-command .cockpit__ai {
  background: linear-gradient(135deg, rgba(24, 199, 111, 0.16), rgba(44, 107, 255, 0.12));
  border: 1px solid rgba(24, 199, 111, 0.35);
  border-radius: var(--radius);
  padding: var(--sp-4) var(--sp-5);
  box-shadow: var(--glow-green);
  margin-bottom: var(--sp-4);
}
body.theme-command .cockpit__ai-label {
  display: block;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
body.theme-command .cockpit__ai-price {
  display: inline-block;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: var(--fs-3xl);
  line-height: 1.1;
  color: var(--accent);
  margin: 2px 0;
}
body.theme-command .cockpit__ai-conf {
  display: block;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}

/* mini trend chart */
body.theme-command .cockpit__chart { display: block; width: 100%; height: auto; }

@media (max-width: 1024px) {
  body.theme-command .cockpit { margin: var(--sp-6) auto 0; }
}

/* ============================================================
   5. COMMAND CENTER signal band (new section)
   ============================================================ */
body.theme-command .signal-band {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
  max-width: 960px;
  margin: 0 auto;
}
body.theme-command .signal-chip {
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-5) var(--sp-4);
  transition: border-color var(--ease), box-shadow var(--ease), transform var(--ease);
}
body.theme-command .signal-chip:hover {
  border-color: var(--card-glass-border);
  box-shadow: var(--glow-cyan);
  transform: translateY(-3px);
}
body.theme-command .signal-chip__icon {
  font-size: var(--fs-2xl);
  line-height: 1;
  display: block;
  margin-bottom: var(--sp-2);
}
body.theme-command .signal-chip__title {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600;
  font-size: var(--fs-md);
  color: var(--text);
  margin-bottom: 4px;
}
body.theme-command .signal-chip__desc {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
@media (max-width: 768px) {
  body.theme-command .signal-band { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 460px) {
  body.theme-command .signal-band { grid-template-columns: 1fr; }
}

/* ============================================================
   6. Subtle motion (gated by reduced-motion)
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  body.theme-command .cockpit__arc {
    transform-origin: center;
    animation: cockpitArcPulse 9s ease-in-out infinite;
  }
}
@keyframes cockpitArcPulse {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 0.85; }
}