/* Rivikon marketing site - hand-rolled CSS, no framework, no build step. */
/* Premium-Dark rebrand: see the dark-theme override block at the very bottom of
   this file. Fonts (Geologica + Onest) imported here so every page picks them up. */
@import url("https://fonts.googleapis.com/css2?family=Geologica:wght@500;600;700&family=Onest:wght@400;500;600;700&display=swap");

:root {
  --navy-900: #0b1a30;
  --navy-800: #122545;
  --navy-700: #1e3a5f;
  --navy-600: #294d7c;
  --blue-500: #3b82f6;
  --blue-400: #60a5fa;
  --orange-500: #f17a2b;
  --orange-400: #ff9248;
  --cream: #f7f3eb;
  --white: #ffffff;
  --gray-50: #f8fafc;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1e293b;
  --gray-900: #0f172a;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 28px;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 20px 40px rgba(15, 23, 42, 0.12);
  --shadow-xl: 0 30px 60px rgba(15, 23, 42, 0.18);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

@keyframes ps-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

main {
  animation: ps-fade-in 0.3s ease 0.05s both;
}

h1, h2, h3, h4, h5 {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--navy-900);
}

h1 { font-size: clamp(2.25rem, 5vw, 3.75rem); }
h2 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); }

p { color: var(--gray-700); }

a { color: var(--navy-700); text-decoration: none; transition: color 0.2s var(--ease); }
a:hover { color: var(--orange-500); }

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

button { font-family: inherit; cursor: pointer; border: 0; background: none; }

:focus-visible { outline: 3px solid var(--orange-500); outline-offset: 3px; border-radius: 6px; }

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

.section { padding: 2.5rem 0; }
.section-tight { padding: 3.5rem 0; }

@media (min-width: 768px) {
  .section { padding: 3rem 0; }
}

.eyebrow {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange-500);
  margin-bottom: 1rem;
}

.section-title { max-width: 780px; margin-bottom: 1rem; }
.section-lede { max-width: 680px; font-size: 1.125rem; color: var(--gray-600); margin-bottom: 3rem; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 1.5rem;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 0.9375rem;
  transition: all 0.2s var(--ease);
  white-space: nowrap;
  cursor: pointer;
}

.btn-primary {
  background: var(--orange-500);
  color: var(--white);
  box-shadow: 0 4px 14px rgba(241, 122, 43, 0.35);
}
.btn-primary:hover { background: var(--orange-400); color: var(--white); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(241, 122, 43, 0.45); }

.btn-secondary {
  background: transparent;
  color: var(--navy-800);
  border: 1.5px solid var(--gray-300);
}
.btn-secondary:hover { border-color: var(--navy-700); color: var(--navy-900); }

.btn-orange-outline {
  background: transparent;
  color: var(--navy-800);
  border: 1.5px solid var(--orange-500);
  animation: btn-orange-glow 2.8s ease-in-out infinite;
}
.btn-orange-outline:hover { background: var(--orange-500); color: #fff; border-color: var(--orange-500); }
@keyframes btn-orange-glow {
  0%, 100% { box-shadow: 0 0 4px rgba(241,122,43,0.3); }
  50%       { box-shadow: 0 0 14px rgba(241,122,43,0.75); }
}

.btn-ghost {
  background: transparent;
  color: var(--navy-800);
  padding: 0.625rem 1rem;
}
.btn-ghost:hover { background: var(--gray-100); }

.btn-dark {
  background: var(--navy-800);
  color: var(--white);
}
.btn-dark:hover { background: var(--navy-900); color: var(--white); transform: translateY(-1px); }

.btn-lg { padding: 1rem 1.75rem; font-size: 1rem; }
.btn-sm { padding: 0.5rem 1rem; font-size: 0.875rem; }

/* ---------- Nav ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--gray-200);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--navy-900);
}
.nav-brand img { height: 34px; width: auto; }
.nav-brand::before {
  content: "";
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  background: url("/assets/images/logo-mark.png") center / contain no-repeat;
}

.nav-links {
  display: none;
  gap: 1.4rem;
  list-style: none;
}
@media (min-width: 1280px) { .nav-links { gap: 2rem; } }
.nav-links a {
  color: var(--gray-700);
  font-weight: 500;
  font-size: 0.9375rem;
}
.nav-links a:hover { color: var(--navy-900); }

/* Active page in nav */
.nav-links > li > a { position: relative; }
.nav-links > li > a[aria-current="page"] { color: var(--navy-900); font-weight: 600; }
.nav-links > li > a[aria-current="page"]::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: -7px;
  height: 2px; border-radius: 2px; background: var(--orange-500);
}
.mobile-menu > ul > li > a[aria-current="page"] { color: var(--orange-500); font-weight: 600; }

/* Nav dropdown (Решения) */
.nav-dropdown { position: relative; }
.nav-dropdown > a { display: inline-flex; align-items: center; gap: 0.35rem; cursor: pointer; }
.nav-dropdown > a::after {
  content: "";
  width: 6px; height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.2s var(--ease);
}
.nav-dropdown:hover > a::after,
.nav-dropdown:focus-within > a::after { transform: rotate(225deg) translateY(1px); }

.nav-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 230px;
  padding: 0.4rem;
  margin-top: 0.5rem;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
  z-index: 50;
}
.nav-menu::before { content: ""; position: absolute; top: -0.6rem; left: 0; right: 0; height: 0.6rem; }
.nav-dropdown:hover .nav-menu,
.nav-dropdown:focus-within .nav-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.nav-menu li { margin: 0; }
.nav-menu a {
  display: block;
  padding: 0.6rem 0.7rem;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--gray-700);
  white-space: nowrap;
}
.nav-menu a:hover { background: var(--gray-50); color: var(--navy-900); }

/* Mobile submenu (Решения) */
.mobile-sub { list-style: none; margin: 0 0 0 0.75rem; padding: 0; border-left: 2px solid var(--gray-200); }
.mobile-sub a { font-size: 0.92rem; color: var(--gray-700); padding: 0.5rem 0 0.5rem 0.85rem; border-bottom: none; }

/* ---- Rivikon nav: wordmark + product switcher + "скоро" badge ---- */
.nav-wordmark { font-family: 'Space Grotesk', sans-serif; font-weight: 700; letter-spacing: -0.01em; }
/* product switcher chip sits just after the brand, with a thin divider */
.nav-switch { position: relative; padding-left: 0.85rem; margin-left: 0.15rem; }
.nav-switch::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); height: 1.1rem; width: 1px; background: var(--gray-200); }
.nav-switch > a { font-family: 'Space Grotesk', sans-serif; font-weight: 600; color: var(--navy-900); }
/* "скоро" badge on not-yet-released products */
.nav-soon { display: inline-block; margin-left: 0.4rem; padding: 0.05rem 0.4rem; font-size: 0.65rem; font-weight: 600; line-height: 1.4; color: var(--gray-700); background: var(--gray-100, #f1f5f9); border: 1px solid var(--gray-200); border-radius: 999px; vertical-align: middle; letter-spacing: 0.02em; }
/* "← Всички продукти" separator row inside dropdown / mobile */
.nav-menu-sep { border-top: 1px solid var(--gray-200); margin-top: 0.3rem; padding-top: 0.1rem; }
.nav-menu-sep a { font-size: 0.85rem; color: var(--gray-700); }
.mobile-sep { border-top: 1px solid var(--gray-200); margin-top: 0.4rem; padding-top: 0.4rem; }

/* ---- Pilot program: inline section ---- */
.pilot-card { background: var(--navy-900); color: #fff; border-radius: var(--radius-lg); padding: 2.5rem 2rem; text-align: center; max-width: 720px; margin: 0 auto; }
.pilot-badge { display: inline-block; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--orange-400); background: rgba(241,122,43,0.15); border: 1px solid rgba(241,122,43,0.4); border-radius: 999px; padding: 0.3rem 0.85rem; margin-bottom: 1rem; }
.pilot-card h2 { color: #fff; margin: 0 0 0.75rem; }
.pilot-card > p { color: rgba(255,255,255,0.75); max-width: 540px; margin: 0 auto 1.25rem; line-height: 1.6; }
.pilot-card .pilot-list { list-style: none; padding: 0; margin: 0 auto 1.75rem; display: inline-block; text-align: left; }
.pilot-card .pilot-list li { position: relative; padding-left: 1.6rem; margin-bottom: 0.55rem; color: rgba(255,255,255,0.85); font-size: 0.95rem; }
.pilot-card .pilot-list li::before { content: "✓"; position: absolute; left: 0; color: var(--orange-400); font-weight: 700; }
.pilot-card .pilot-hl { color: var(--orange-400); }

/* ---- Pilot program: popup ---- */
.offer-overlay { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 1.25rem; background: rgba(11,26,48,0.55); opacity: 0; transition: opacity 0.2s ease; }
.offer-overlay.open { opacity: 1; }
.offer-modal { position: relative; background: #fff; border-radius: var(--radius-lg); box-shadow: 0 20px 60px rgba(0,0,0,0.3); max-width: 440px; width: 100%; padding: 2.25rem 1.75rem 1.75rem; text-align: center; transform: translateY(12px) scale(0.98); transition: transform 0.2s ease; }
.offer-overlay.open .offer-modal { transform: none; }
.offer-close { position: absolute; top: 0.5rem; right: 0.65rem; background: none; border: none; font-size: 1.6rem; line-height: 1; color: var(--gray-500); cursor: pointer; padding: 0.25rem; }
.offer-close:hover { color: var(--navy-900); }
.offer-badge { display: inline-block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--orange-500); background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: 999px; padding: 0.28rem 0.8rem; margin-bottom: 0.85rem; }
.offer-title { font-size: 1.4rem; margin: 0 0 0.6rem; }
.offer-body { color: var(--gray-600); line-height: 1.6; margin: 0 0 1.4rem; }
.offer-cta { width: 100%; }
.offer-dismiss { display: block; width: 100%; margin-top: 0.6rem; background: none; border: none; color: var(--gray-500); font-size: 0.875rem; cursor: pointer; padding: 0.5rem; }
.offer-dismiss:hover { color: var(--navy-900); text-decoration: underline; }

.nav-right { display: flex; align-items: center; gap: 0.5rem; }

.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--gray-700);
  border-radius: var(--radius-sm);
}
.lang-switch:hover { background: var(--gray-100); color: var(--navy-900); }

.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  padding: 0.5rem;
  border-radius: var(--radius-sm);
}
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--navy-800); border-radius: 2px; transition: transform 0.2s var(--ease); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mobile-menu {
  display: none;
  padding: 1rem 1.25rem 2rem;
  border-top: 1px solid var(--gray-200);
  background: var(--white);
}
.mobile-menu.open { display: block; }
.mobile-menu ul { list-style: none; display: flex; flex-direction: column; gap: 0.25rem; }
.mobile-menu a { display: block; padding: 0.75rem 0; font-weight: 500; color: var(--gray-800); border-bottom: 1px solid var(--gray-100); }
.mobile-menu .btn { margin-top: 1rem; width: 100%; }

@media (min-width: 1024px) {
  .nav-links { display: flex; }
  .nav-toggle { display: none; }
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  padding: 4rem 0 5rem;
  background:
    radial-gradient(1200px 500px at 50% -10%, rgba(59, 130, 246, 0.12), transparent 60%),
    linear-gradient(180deg, #fbfaf6 0%, #ffffff 100%);
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(30, 58, 95, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30, 58, 95, 0.06) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse at 50% 30%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 30%, transparent 75%);
  pointer-events: none;
}
.hero-inner { position: relative; text-align: center; max-width: 900px; margin: 0 auto; }

.hero h1 { margin-bottom: 1.25rem; }
.hero-tagline { font-size: 1.125rem; font-weight: 500; color: var(--gray-500); letter-spacing: 0.02em; margin-bottom: 0.75rem; }
.h1-accent { color: var(--orange-500); white-space: nowrap; }
.hero-sub { font-size: 1.125rem; color: var(--gray-600); max-width: 620px; margin: 0 auto 2rem; line-height: 1.6; }

@media (min-width: 768px) {
  .hero { padding: 5rem 0 6rem; }
  .hero-tagline { font-size: 1.375rem; }
  .hero-sub { font-size: 1.25rem; }
}

.hero-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-bottom: 3rem; }

/* ---------- Dashboard mockup ---------- */

.dashboard-mock {
  margin: 0 auto;
  max-width: 980px;
  background: var(--navy-900);
  border-radius: var(--radius-xl);
  padding: 0.75rem;
  box-shadow: var(--shadow-xl);
  position: relative;
}
.dashboard-mock::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: calc(var(--radius-xl) + 2px);
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.4), rgba(241, 122, 43, 0.4));
  z-index: -1;
  filter: blur(24px);
  opacity: 0.5;
}
.dashboard-top {
  display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem 0.75rem;
}
.dashboard-top .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--gray-700); }
.dashboard-top .dot.red { background: #ff5f57; }
.dashboard-top .dot.yellow { background: #febc2e; }
.dashboard-top .dot.green { background: #28c840; }
.dashboard-status { margin-left: auto; display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; color: rgba(255,255,255,0.8); }
.live-dot { display: inline-block; width: 8px; height: 8px; background: #22c55e; border-radius: 50%; box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); animation: pulse 2s infinite; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(34,197,94,0.7); }
  70% { box-shadow: 0 0 0 10px rgba(34,197,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}

.dashboard-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  background: #0f1b33;
  border-radius: var(--radius-lg);
  padding: 1rem;
}
@media (min-width: 700px) {
  .dashboard-body { grid-template-columns: 1.3fr 1fr; }
}

.dash-camera {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-md);
  background:
    linear-gradient(135deg, #1a2f52 0%, #0a1428 100%);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
}
.dash-camera::after {
  content: ''; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,0.02) 3px 4px);
  pointer-events: none;
}
.dash-plate {
  position: absolute;
  bottom: 18%; left: 50%; transform: translateX(-50%);
  background: var(--white); color: var(--navy-900);
  padding: 0.375rem 0.875rem;
  font-family: 'Space Grotesk', monospace;
  font-weight: 700; font-size: 1.1rem; letter-spacing: 0.1em;
  border-radius: 6px;
  border: 2px solid #111;
  box-shadow: 0 0 0 3px rgba(34,197,94,0.5), 0 10px 30px rgba(0,0,0,0.4);
  animation: plateScan 6s ease-in-out infinite;
}
@keyframes plateScan {
  0%, 10% { box-shadow: 0 0 0 3px rgba(241,122,43,0.7), 0 10px 30px rgba(0,0,0,0.4); }
  40%, 100% { box-shadow: 0 0 0 3px rgba(34,197,94,0.6), 0 10px 30px rgba(0,0,0,0.4); }
}
.dash-label {
  position: absolute; top: 0.75rem; left: 0.75rem;
  font-size: 0.75rem; color: rgba(255,255,255,0.7);
  background: rgba(0,0,0,0.4); padding: 0.25rem 0.5rem; border-radius: 4px;
  backdrop-filter: blur(4px);
}
.dash-scanline {
  position: absolute; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(96,165,250,0.8), transparent);
  animation: scan 3s ease-in-out infinite;
}
@keyframes scan {
  0% { top: 0; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

.dash-events { background: #0a1428; border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-md); padding: 0.75rem; }
.dash-events h4 { color: #fff; font-size: 0.875rem; margin-bottom: 0.75rem; font-family: 'Inter', sans-serif; letter-spacing: normal; }
.event-row { display: flex; align-items: center; gap: 0.625rem; padding: 0.5rem 0; border-bottom: 1px solid rgba(255,255,255,0.05); font-size: 0.8125rem; color: rgba(255,255,255,0.85); }
.event-row:last-child { border-bottom: 0; }
.event-row .pill { font-family: monospace; background: rgba(255,255,255,0.08); padding: 2px 6px; border-radius: 4px; font-size: 0.75rem; }
.event-row .ok { color: #4ade80; }
.event-row .deny { color: #f87171; }
.event-row .t { color: rgba(255,255,255,0.5); margin-left: auto; font-size: 0.75rem; }
.event-row.ev-new { animation: evIn 0.45s var(--ease); overflow: hidden; }
@keyframes evIn {
  0%   { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; }
  40%  { opacity: 0; max-height: 44px; }
  100% { opacity: 1; max-height: 44px; padding-top: 0.5rem; padding-bottom: 0.5rem; }
}

.dash-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-top: 0.75rem; }
.stat { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-sm); padding: 0.625rem; }
.stat-v { color: #fff; font-family: 'Space Grotesk', sans-serif; font-size: 1.25rem; font-weight: 700; }
.stat-l { color: rgba(255,255,255,0.55); font-size: 0.75rem; margin-top: 2px; }
/* Brief green flash when a stat changes (car counted in / payment taken). */
.stat.flash { animation: statFlash 0.9s ease; }
@keyframes statFlash {
  0%   { background: rgba(34,197,94,0.04); box-shadow: none; }
  18%  { background: rgba(34,197,94,0.30); box-shadow: 0 0 0 1px rgba(34,197,94,0.55) inset; }
  100% { background: rgba(255,255,255,0.04); box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) { .stat.flash { animation: none; } }

/* Combined hero scene: live camera (drive stage) + event feed in one frame */
.hero-combo-wrap { margin-top: 0.5rem; }
.hero-combo { max-width: 1040px; }
@media (min-width: 700px) { .combo-body { grid-template-columns: 1.5fr 1fr; align-items: stretch; } }
.combo-body .drive-stage { width: 100%; max-width: none; height: auto; aspect-ratio: 16 / 9; margin: 0; }
.combo-body .dash-label { z-index: 3; }
.combo-side { display: flex; flex-direction: column; }
.combo-side .dash-events { flex: 1; }
.combo-steps { max-width: none; margin: 0; padding: 1rem 0.5rem 0.4rem; }

/* ---------- Trust ---------- */

.trust { padding: 3rem 0; background: var(--gray-50); border-top: 1px solid var(--gray-200); border-bottom: 1px solid var(--gray-200); }
.trust-text { text-align: center; color: var(--gray-600); font-size: 0.9375rem; margin-bottom: 1.5rem; }
.trust-logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2.5rem; filter: grayscale(100%); opacity: 0.65; }
.trust-logos .tlogo {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700; color: var(--gray-500); font-size: 1rem;
  letter-spacing: 0.02em;
}

/* ---------- 2-col ---------- */

.two-col { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 900px) { .two-col { grid-template-columns: 1fr 1fr; gap: 3rem; } }

.box {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  padding: 2rem;
}
.box.bad { background: linear-gradient(180deg, #fef7f3 0%, #ffffff 100%); border-color: #fbd3bf; }
.box.good { background: linear-gradient(180deg, #eff4fb 0%, #ffffff 100%); border-color: #c6d6ee; }
.box h3 { margin-bottom: 0.75rem; }
.box ul { list-style: none; margin-top: 1rem; }
.box ul li { padding: 0.5rem 0 0.5rem 1.75rem; position: relative; color: var(--gray-700); }
.box.bad ul li::before { content: '✕'; position: absolute; left: 0; top: 0.5rem; color: #ef4444; font-weight: 700; }
.box.good ul li::before { content: '✓'; position: absolute; left: 0; top: 0.5rem; color: #22c55e; font-weight: 700; }

/* ---------- Feature grid ---------- */

.feature-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 640px) { .feature-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .feature-grid { grid-template-columns: 1fr 1fr 1fr; } }

.feature {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  transition: all 0.25s var(--ease);
}
.feature:hover { border-color: var(--navy-700); transform: translateY(-2px); box-shadow: var(--shadow-md); }

.feature-icon {
  width: 44px; height: 44px;
  background: linear-gradient(135deg, var(--navy-700), var(--navy-900));
  color: var(--orange-400);
  border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 1rem;
}
.feature-icon svg { width: 22px; height: 22px; }
.feature h3 { font-size: 1.0625rem; margin-bottom: 0.5rem; }
.feature p { font-size: 0.9375rem; color: var(--gray-600); line-height: 1.55; }

/* Software section: features beside the multi-site illustration */
.sw-features { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 480px) { .sw-features { grid-template-columns: 1fr; } }
.sw-features .feature { padding: 1.15rem; }
.sw-features .feature-icon { width: 38px; height: 38px; margin-bottom: 0.65rem; }
.sw-features .feature-icon svg { width: 19px; height: 19px; }
.sw-features .feature h3 { font-size: 0.975rem; margin-bottom: 0.3rem; }
.sw-features .feature p { font-size: 0.85rem; line-height: 1.5; }
.sw-map { width: 100%; background: linear-gradient(135deg, var(--navy-900), var(--navy-700)); border-radius: var(--radius-2xl); padding: 1.75rem; box-shadow: var(--shadow-md); }
.sw-map .map-field { margin: 0; }
.sw-map .map-site-label { fill: rgba(255,255,255,0.78); font-size: 10px; }
.sw-map-cap { margin: 1rem 0 0; text-align: center; font-size: 0.85rem; color: rgba(255,255,255,0.7); }

/* ---------- How it works ---------- */

.howwork { background: var(--navy-900); color: var(--white); }
.howwork h2, .howwork h3 { color: var(--white); }
.howwork .section-lede { color: rgba(255,255,255,0.7); }
.howwork .eyebrow { color: var(--orange-400); }

.steps { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-top: 2rem; position: relative; }
@media (min-width: 960px) {
  .steps { grid-template-columns: repeat(4, 1fr); }
}
.step { position: relative; padding: 1.5rem; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-lg); }
.step-num { font-family: 'Space Grotesk', sans-serif; font-size: 0.875rem; font-weight: 700; color: var(--orange-400); margin-bottom: 0.75rem; letter-spacing: 0.1em; }
.step h3 { font-size: 1.0625rem; margin-bottom: 0.5rem; color: #fff; }
.step p { color: rgba(255,255,255,0.7); font-size: 0.9375rem; }

/* ---------- Scroll-driven drive scene ---------- */

.scroll-hint { display: inline-block; color: var(--orange-400); font-weight: 600; }

/* The scene runs on its own time clock now, so it lives in normal flow at a
   natural height instead of needing a tall scroll track. */
.drive-track { position: relative; margin: 2rem 0; }
.drive-sticky {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.75rem;
}

.drive-stage {
  position: relative; width: 92%; max-width: 1000px;
  height: min(46vh, 360px);
  background: radial-gradient(130% 150% at 50% 0%, #16294a 0%, #0a1428 72%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  perspective: 1400px;
}

/* The animated world. Cars always travel left→right through the same gate; the
   act (entry / subscription exit / paid exit) is conveyed by the HUD, the live
   feed and the payment station rather than by flipping the lane. */
.drive-world { position: absolute; inset: 0; }

/* Mode badge */
.drive-mode {
  position: absolute; top: 8%; right: 5%;
  font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--orange-400); background: rgba(8,16,32,0.7);
  border: 1px solid rgba(241,122,43,0.45); padding: 0.3rem 0.6rem; border-radius: 999px;
}
.mode-out { display: none; }
.drive-stage.exit .mode-in { display: none; }
.drive-stage.exit .mode-out { display: inline; }

/* Play / pause control - lets a viewer freeze a scenario to read it */
.drive-toggle {
  position: absolute; left: 14px; bottom: 14px; z-index: 4;
  width: 34px; height: 34px; padding: 0; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.22); background: rgba(8,16,32,0.72);
  color: #fff; display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; backdrop-filter: blur(6px);
  transition: background 0.2s ease, transform 0.15s ease, border-color 0.2s ease;
}
.drive-toggle:hover { background: var(--orange-500); border-color: var(--orange-500); transform: scale(1.06); }
.drive-toggle:focus-visible { outline: 2px solid var(--orange-400); outline-offset: 2px; }
.drive-toggle svg { width: 16px; height: 16px; fill: currentColor; display: block; }
.drive-toggle .ico-play { display: none; }
.drive-toggle.paused .ico-pause { display: none; }
.drive-toggle.paused .ico-play { display: block; }

/* Playback-speed toggle - sits right of the play/pause button (1× ↔ 0.5×) */
.drive-speed {
  position: absolute; left: 56px; bottom: 14px; z-index: 4;
  height: 34px; min-width: 44px; padding: 0 10px; border-radius: 17px;
  border: 1px solid rgba(255,255,255,0.22); background: rgba(8,16,32,0.72);
  color: #fff; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 0.8rem;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; backdrop-filter: blur(6px);
  transition: background 0.2s ease, transform 0.15s ease, border-color 0.2s ease;
}
.drive-speed:hover { background: var(--orange-500); border-color: var(--orange-500); transform: scale(1.06); }
.drive-speed:focus-visible { outline: 2px solid var(--orange-400); outline-offset: 2px; }
.drive-speed.slow { border-color: var(--orange-400); color: var(--orange-400); }

@media (prefers-reduced-motion: reduce) { .drive-toggle, .drive-speed { display: none; } }

/* Road */
.drive-road { position: absolute; left: 0; right: 0; bottom: 0; height: 32%; background: linear-gradient(180deg, #243a5e, #16263f); border-top: 2px solid rgba(255,255,255,0.12); }
.drive-road::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 3px; transform: translateY(-50%); background: repeating-linear-gradient(90deg, rgba(255,255,255,0.55) 0 28px, transparent 28px 60px); opacity: 0.45; }

/* Camera on a pole - illustration matches /components/. Sized like the barrier
   (width-based, height auto) so both poles share the same road baseline. */
.drive-cam { position: absolute; left: 54%; bottom: 32%; width: clamp(40px, 5.4vw, 56px); }
.drive-cam svg { width: 100%; height: auto; display: block; overflow: visible; }

/* Payment station - pull-up pay point on the exit lane (toggled by main.js).
   Sits well back from the gate so the paying car clearly stops before it. */
.pay-station { position: absolute; left: 29%; bottom: 32%; width: clamp(34px, 4.6vw, 50px); opacity: 0; transition: opacity 0.4s ease; }
.pay-station.show { opacity: 1; }
.pay-station svg { width: 100%; height: auto; display: block; }

/* Scan beam - a single-apex cone whose tip sits on the camera lens (~55% across,
   ~60% up) and fans down onto the car. Height is tuned so the tip meets the lens
   rather than floating above it. */
.cam-beam {
  position: absolute; left: 31%; bottom: 29%; width: 55%; height: 33%;
  background: linear-gradient(180deg, rgba(96,165,250,0.04), rgba(96,165,250,0.30));
  clip-path: polygon(38% 0, 54% 0, 100% 100%, 0 100%);
  opacity: 0; transition: opacity 0.35s ease;
}
.cam-beam.sweeping { animation: beamPulse 1.1s ease-in-out infinite; }
@keyframes beamPulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.7); } }
.drive-stage.recognized .cam-beam { background: linear-gradient(180deg, rgba(34,197,94,0), rgba(34,197,94,0.30)); }

/* Barrier - illustration matches /components/ (sized down so the car reads bigger) */
.drive-barrier { position: absolute; left: 74%; bottom: 32%; width: clamp(72px, 10vw, 110px); }
.drive-barrier svg { width: 100%; height: auto; display: block; overflow: visible; }
/* The boom is an SVG group; main.js rotates it open. It pivots at the post. */
.bar-arm { transform-box: fill-box; transform-origin: left center; }

/* Car */
.drive-car { position: absolute; left: 0; bottom: 27%; width: clamp(150px, 21vw, 240px); will-change: transform; }
.drive-car svg { width: 100%; display: block; filter: drop-shadow(0 10px 16px rgba(0,0,0,0.45)); }

/* HUD plate readout - anchored along the bottom (over the road) so the scene can
   be trimmed from the top. Centred, clear of the bottom-left playback controls. */
.drive-hud {
  position: absolute; bottom: 2%; left: 54%; transform: translate(-50%, 10px);
  display: flex; align-items: center; gap: 0.6rem; white-space: nowrap;
  background: rgba(8,16,32,0.85); border: 1px solid rgba(255,255,255,0.14);
  padding: 0.45rem 0.7rem; border-radius: 10px; backdrop-filter: blur(6px);
  opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease; pointer-events: none;
}
.drive-hud.show { opacity: 1; transform: translate(-50%, 0); }
.hud-plate { flex: 0 0 auto; white-space: nowrap; font-family: 'Space Grotesk', monospace; font-weight: 700; letter-spacing: 0.08em; background: #fff; color: #0b1a30; padding: 0.12rem 0.5rem; border-radius: 4px; border: 2px solid #111; font-size: 0.95rem; }
/* Single status line; main.js sets the text and the is-* state class. */
.hud-msg { font-size: 0.8rem; font-weight: 600; white-space: nowrap; }
.hud-msg.is-scan { color: #94a3b8; font-weight: 500; }
.hud-msg.is-ok { color: #4ade80; }
.hud-msg.is-ok::before { content: '✓ '; }
.hud-msg.is-pay { color: var(--orange-400); }

@media (max-width: 640px) {
  .dash-label { font-size: 0.6rem; padding: 0.15rem 0.35rem; }
  .drive-mode { font-size: 0.55rem; padding: 0.2rem 0.45rem; }
  .drive-hud { padding: 0.3rem 0.5rem; gap: 0.4rem; }
  .hud-plate { font-size: 0.7rem; padding: 0.08rem 0.35rem; }
  .hud-msg { font-size: 0.65rem; }
  .event-row { font-size: 0.7rem; gap: 0.4rem; padding: 0.35rem 0; }
  .event-row .pill { font-size: 0.62rem; padding: 1px 4px; }
  .event-row .t { font-size: 0.62rem; }
  .drive-hud { left: auto; right: 5%; transform: translateY(10px); justify-content: flex-end; }
  .drive-hud.show { transform: translateY(0); }
}

/* Step captions under the stage (entry + exit rows, one shown at a time) */
.drive-cap { position: relative; width: 100%; max-width: 1000px; margin: 0 auto; padding: 0 1.25rem; }
.drive-steps.hidden { display: none; }
.drive-steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem 1.5rem; width: 100%; }
@media (min-width: 760px) { .drive-steps { grid-template-columns: repeat(4, 1fr); } }
.dstep { border-top: 2px solid rgba(255,255,255,0.14); padding-top: 0.7rem; opacity: 0.4; transition: opacity 0.3s ease, border-color 0.3s ease; }
.dstep.on { opacity: 1; border-top-color: var(--orange-500); }
.dstep .n { font-family: 'Space Grotesk', sans-serif; font-weight: 700; color: var(--orange-400); font-size: 0.8rem; letter-spacing: 0.1em; }
.dstep h4 { color: #fff; font-size: 0.95rem; margin: 0.25rem 0; }
.dstep p { color: rgba(255,255,255,0.65); font-size: 0.8rem; line-height: 1.45; }

@media (prefers-reduced-motion: reduce) {
  .drive-track { height: auto; }
  .drive-sticky { position: static; height: auto; padding: 2rem 0; }
  .cam-beam, .bar-arm, .drive-world { transition: none; }
}

/* ---------- Use cases ---------- */

.usecases { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 900px) { .usecases { grid-template-columns: repeat(3, 1fr); } }

.usecase {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  padding: 2rem;
  display: flex; flex-direction: column;
}
.usecase-tag { display: inline-block; align-self: flex-start; background: var(--navy-800); color: var(--white); font-size: 0.75rem; font-weight: 600; padding: 0.25rem 0.75rem; border-radius: 999px; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 1rem; }
.usecase h3 { font-size: 1.25rem; margin-bottom: 0.5rem; }
.usecase p { font-size: 0.9375rem; margin-bottom: 1.25rem; }
.usecase ul { list-style: none; margin-top: auto; padding-top: 1rem; border-top: 1px dashed var(--gray-200); }
.usecase ul li { font-size: 0.875rem; color: var(--gray-700); padding: 0.25rem 0 0.25rem 1.25rem; position: relative; }
.usecase ul li::before { content: '→'; position: absolute; left: 0; color: var(--orange-500); }

/* ---------- Pricing ---------- */

.pricing-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 900px) { .pricing-grid { grid-template-columns: repeat(3, 1fr); align-items: stretch; } }

.plan {
  background: var(--white);
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-xl);
  padding: 2rem;
  display: flex; flex-direction: column;
  position: relative;
}
.plan.popular { border-color: var(--navy-800); box-shadow: var(--shadow-lg); transform: scale(1.02); }
.plan .pop-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--orange-500); color: #fff; font-size: 0.75rem; font-weight: 700; padding: 0.25rem 0.875rem; border-radius: 999px; letter-spacing: 0.05em; text-transform: uppercase; }
.plan h3 { font-size: 1.125rem; margin-bottom: 0.25rem; }
.plan-desc { color: var(--gray-600); font-size: 0.875rem; margin-bottom: 1.25rem; }
.plan-price { font-family: 'Space Grotesk', sans-serif; font-size: 2.5rem; font-weight: 700; color: var(--navy-900); }
.plan-price .per { font-size: 0.9375rem; color: var(--gray-500); font-weight: 500; }
.plan-addon { font-size: 0.8125rem; color: var(--gray-600); margin-top: 0.25rem; }
.plan ul { list-style: none; margin: 1.5rem 0; flex: 1; }
.plan ul li { padding: 0.5rem 0 0.5rem 1.5rem; position: relative; font-size: 0.9375rem; color: var(--gray-700); }
.plan ul li::before { content: '✓'; position: absolute; left: 0; color: var(--orange-500); font-weight: 700; }
.plan .btn { width: 100%; }

.plan-hw { background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: var(--radius-sm); padding: 0.75rem 1rem; margin: 1rem 0 0; }
.hw-label { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--gray-500); display: block; margin-bottom: 0.4rem; }
.hw-list { list-style: none; margin: 0; padding: 0; }
.hw-list li { font-size: 0.8125rem; color: var(--gray-600); padding: 0.2rem 0 0.2rem 1.25rem; position: relative; }
.hw-list li::before { content: '◦'; position: absolute; left: 0; color: var(--navy-600); font-weight: 700; }

.plan-scale { display: flex; align-items: baseline; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.plan-scale .scale-n { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1.5rem; color: var(--navy-900); letter-spacing: -0.02em; }
.plan-scale .scale-u { font-size: 0.875rem; color: var(--gray-500); }
.plan-eg { font-size: 0.8125rem; color: var(--gray-500); margin-bottom: 1.25rem; }
.plan-eg strong { color: var(--gray-700); font-weight: 600; }
.plan-price .from { font-size: 0.9375rem; color: var(--gray-500); font-weight: 500; margin-right: 0.15em; }

/* ---------- Modules grid ---------- */

.modules-head { text-align: center; max-width: 640px; margin: 4rem auto 2rem; }
.modules-head h3 { font-size: clamp(1.3rem, 3.5vw, 1.8rem); margin-bottom: 0.5rem; }
.modules-head p { color: var(--gray-600); font-size: 0.9375rem; }
.modules-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 560px) { .modules-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 920px) { .modules-grid { grid-template-columns: repeat(4, 1fr); } }

.module { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-md); padding: 1.25rem; display: flex; flex-direction: column; transition: border-color 0.2s, transform 0.2s; }
.module:hover { border-color: var(--navy-700); transform: translateY(-2px); }
.module-icon { width: 38px; height: 38px; background: var(--gray-100); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; margin-bottom: 0.75rem; color: var(--navy-700); }
.module-icon svg { width: 20px; height: 20px; }
.module h4 { font-size: 0.9375rem; margin-bottom: 0.25rem; }
.module p { font-size: 0.8125rem; color: var(--gray-600); line-height: 1.5; margin: 0; }
.modules-note { text-align: center; font-size: 0.875rem; color: var(--gray-500); margin-top: 1.5rem; }

/* ---------- Configurator (plan finder) ---------- */

.cfg-section { background: var(--navy-900); }
.cfg-section .eyebrow { color: var(--orange-400); }
.cfg-section .section-title { color: #fff; }
.cfg-section .section-lede { color: rgba(255,255,255,0.68); }

.cfg { max-width: 760px; margin: 2.5rem auto 0; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius-xl); padding: clamp(1.25rem, 4vw, 2.5rem); }

.cfg-prog { height: 6px; background: rgba(255,255,255,0.1); border-radius: 999px; overflow: hidden; margin-bottom: 0.5rem; }
.cfg-prog-bar { display: block; height: 100%; background: var(--orange-500); border-radius: 999px; transition: width 0.4s var(--ease); }
.cfg-prog-label { font-size: 0.75rem; color: rgba(255,255,255,0.5); letter-spacing: 0.05em; margin-bottom: 1.75rem; }

.cfg-step { display: none; animation: cfgIn 0.4s var(--ease); }
.cfg-step.is-active { display: block; }
@keyframes cfgIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.cfg-q { color: #fff; font-size: clamp(1.1rem, 3vw, 1.4rem); margin-bottom: 1.25rem; }

.cfg-opts { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
@media (min-width: 560px) { .cfg-opts { grid-template-columns: 1fr 1fr; } }
.cfg-opts.cfg-trio { grid-template-columns: 1fr; }
@media (min-width: 560px) { .cfg-opts.cfg-trio { grid-template-columns: repeat(3, 1fr); } }

.cfg-opt { display: flex; align-items: center; gap: 0.7rem; text-align: left; background: rgba(255,255,255,0.05); border: 1.5px solid rgba(255,255,255,0.12); color: #fff; border-radius: var(--radius-md); padding: 0.9rem 1rem; font-size: 0.9375rem; font-family: inherit; cursor: pointer; transition: border-color 0.18s, background 0.18s, transform 0.18s; }
.cfg-opt:hover { border-color: var(--orange-400); transform: translateY(-2px); }
.cfg-opt.sel { border-color: var(--orange-500); background: rgba(241,122,43,0.16); }
.cfg-opt svg { width: 22px; height: 22px; flex: none; stroke: var(--orange-400); }
.cfg-opt .cfg-opt-sub { display: block; font-size: 0.75rem; color: rgba(255,255,255,0.55); margin-top: 0.1rem; }
.cfg-opt.sel .cfg-check { opacity: 1; }
.cfg-check { margin-left: auto; opacity: 0; color: var(--orange-400); font-weight: 700; transition: opacity 0.18s; }

.cfg-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 1.75rem; gap: 1rem; }
.cfg-back { background: none; border: none; color: rgba(255,255,255,0.6); font-family: inherit; font-size: 0.9rem; cursor: pointer; padding: 0.5rem; }
.cfg-back:hover { color: #fff; }
.cfg-back[hidden] { visibility: hidden; }
.cfg-next[hidden] { display: none; }

/* Result */
.cfg-result { text-align: center; }
.cfg-result .cfg-rec-label { font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--orange-400); font-weight: 700; }
.cfg-result .cfg-rec-tier { font-family: 'Space Grotesk', sans-serif; font-size: clamp(2rem, 7vw, 3rem); color: #fff; margin: 0.25rem 0 0.5rem; }
.cfg-result .cfg-rec-desc { color: rgba(255,255,255,0.7); font-size: 0.9375rem; max-width: 460px; margin: 0 auto 1.5rem; }

.cfg-build { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-bottom: 1.75rem; }
.cfg-build-label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.45); width: 100%; margin-bottom: 0.5rem; }
.cfg-chip { font-size: 0.8125rem; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.14); color: rgba(255,255,255,0.85); border-radius: 999px; padding: 0.35rem 0.85rem; animation: cfgChip 0.4s var(--ease) backwards; }
.cfg-chip.is-mod { border-color: rgba(241,122,43,0.5); background: rgba(241,122,43,0.12); }
@keyframes cfgChip { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } }

.cfg-result-ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }
.cfg-restart { background: none; border: 1px solid rgba(255,255,255,0.25); color: #fff; font-family: inherit; font-size: 0.9rem; border-radius: 999px; padding: 0.7rem 1.4rem; cursor: pointer; transition: border-color 0.18s; }
.cfg-restart:hover { border-color: #fff; }

/* ---------- Solution teaser cards ---------- */

.sol-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 560px) { .sol-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 920px) { .sol-grid { grid-template-columns: repeat(3, 1fr); } }

.sol-card { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 1.75rem; text-decoration: none; color: inherit; transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s; }
.sol-card:hover { border-color: var(--navy-700); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.sol-card-icon { flex-shrink: 0; width: 46px; height: 46px; background: var(--navy-800); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; }
.sol-card-icon svg { width: 24px; height: 24px; stroke: #fff; }
.sol-card-head { display: flex; align-items: center; gap: 0.875rem; margin-bottom: 1rem; }
.sol-card h3 { font-size: 1.125rem; margin: 0; }
.sol-card p { font-size: 0.9rem; color: var(--gray-600); line-height: 1.55; margin: 0 0 1rem; }
.sol-card .sol-link { margin-top: auto; font-size: 0.9rem; font-weight: 600; color: var(--orange-500); }
.sol-card:hover .sol-link { text-decoration: underline; }
.sol-card.sol-card--all { background: var(--navy-900); border-color: var(--navy-900); }
.sol-card.sol-card--all h3 { color: #fff; }
.sol-card.sol-card--all p { color: rgba(255,255,255,0.6); }
.sol-card.sol-card--all .sol-card-icon { background: rgba(241,122,43,0.2); }
.sol-card.sol-card--all .sol-card-icon svg { stroke: var(--orange-400); }
.sol-card.sol-card--all .sol-link { color: var(--orange-400); }
.sol-card.sol-card--all:hover { border-color: var(--navy-700); }

@keyframes sol-arrow-nudge {
  0%, 100% { transform: translateX(0); }
  50%       { transform: translateX(5px); }
}
.sol-card.sol-card--all .sol-arrow {
  display: inline-block;
  animation: sol-arrow-nudge 1.6s ease-in-out infinite;
}

/* ---------- Security strip ---------- */

.security {
  background: linear-gradient(135deg, #f4f1ea 0%, #fbfaf6 100%);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-2xl);
  padding: 2.5rem;
}
.security-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 700px) { .security-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .security-grid { grid-template-columns: repeat(4, 1fr); } }
.sec-item h4 { font-family: 'Space Grotesk', sans-serif; font-size: 1rem; color: var(--navy-900); margin-bottom: 0.375rem; }
.sec-item p { font-size: 0.875rem; color: var(--gray-600); }
.sec-icon { width: 36px; height: 36px; color: var(--orange-500); margin-bottom: 0.75rem; }

/* ---------- Testimonials ---------- */

.testimonials { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 900px) { .testimonials { grid-template-columns: repeat(3, 1fr); } }

.testimonial {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  padding: 2rem;
  display: flex; flex-direction: column;
}
.testimonial blockquote { font-size: 1.0625rem; color: var(--gray-800); line-height: 1.55; margin-bottom: 1.5rem; }
.testimonial blockquote::before { content: '\201C'; font-family: 'Space Grotesk', serif; font-size: 3rem; color: var(--orange-500); line-height: 0; vertical-align: -0.4em; margin-right: 0.25rem; }
.t-meta { display: flex; align-items: center; gap: 0.875rem; margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--gray-100); }
.avatar { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--navy-700), var(--orange-500)); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-family: 'Space Grotesk', sans-serif; }
.t-meta-txt { line-height: 1.3; }
.t-name { font-weight: 600; color: var(--navy-900); font-size: 0.9375rem; }
.t-role { font-size: 0.8125rem; color: var(--gray-500); }

/* ---------- FAQ ---------- */

.faq { max-width: 820px; margin: 0 auto; }
.faq details {
  border-bottom: 1px solid var(--gray-200);
  padding: 1.25rem 0;
}
.faq details[open] summary { color: var(--navy-900); }
.faq summary {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--gray-800);
  cursor: pointer;
  list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.25rem 0;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 1.75rem;
  color: var(--orange-500);
  transition: transform 0.25s var(--ease);
}
.faq details[open] summary::after { content: '\2212'; }
.faq details p { padding: 0.75rem 0 0; color: var(--gray-600); line-height: 1.65; }

/* ---------- Final CTA ---------- */

.final-cta {
  background: linear-gradient(135deg, var(--navy-900) 0%, var(--navy-700) 100%);
  color: #fff;
  border-radius: var(--radius-2xl);
  padding: 3rem 2rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.final-cta::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(600px 300px at 80% 20%, rgba(241, 122, 43, 0.25), transparent 50%),
    radial-gradient(500px 300px at 20% 80%, rgba(59, 130, 246, 0.25), transparent 50%);
  pointer-events: none;
}
.final-cta > * { position: relative; }
.final-cta h2 { color: #fff; margin-bottom: 0.75rem; }
.final-cta p { color: rgba(255,255,255,0.8); max-width: 600px; margin: 0 auto 2rem; font-size: 1.0625rem; }
.final-cta form { display: flex; flex-direction: column; gap: 0.5rem; max-width: 480px; margin: 0 auto; }
@media (min-width: 600px) { .final-cta form { flex-direction: row; } }
.final-cta input {
  flex: 1;
  padding: 0.875rem 1rem;
  border-radius: var(--radius-md);
  border: 0;
  background: rgba(255,255,255,0.95);
  color: var(--navy-900);
  font-size: 0.9375rem;
  font-family: inherit;
}
.final-cta input:focus { outline: 2px solid var(--orange-500); }

/* ---------- Footer ---------- */

.footer { background: #0a1428; color: rgba(255,255,255,0.7); padding: 4rem 0 2rem; }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; margin-bottom: 3rem; }
@media (min-width: 700px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
@media (min-width: 940px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr 1fr; } }

.footer-brand img { height: 40px; margin-bottom: 1rem; }
.footer-wordmark { display: inline-block; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1.5rem; letter-spacing: -0.01em; color: #fff; margin-bottom: 1rem; }
.footer-about { font-size: 0.9375rem; color: rgba(255,255,255,0.6); line-height: 1.6; margin-bottom: 1rem; max-width: 320px; }
.footer-contact { font-size: 0.875rem; color: rgba(255,255,255,0.55); line-height: 1.7; }
.footer-contact strong { color: rgba(255,255,255,0.85); font-weight: 600; }

.footer-col h5 { font-family: 'Space Grotesk', sans-serif; font-size: 0.8125rem; color: #fff; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 1rem; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 0.625rem; }
.footer-col a { font-size: 0.9375rem; color: rgba(255,255,255,0.6); }
.footer-col a:hover { color: #fff; }

.footer-bottom {
  display: flex; flex-direction: column; gap: 1rem;
  padding-top: 2rem; border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 0.8125rem; color: rgba(255,255,255,0.5);
}
@media (min-width: 700px) {
  .footer-bottom { flex-direction: row; justify-content: space-between; align-items: center; }
}
.footer-bottom a { color: rgba(255,255,255,0.7); }

/* ---------- Scroll-to-top ---------- */

.scroll-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--navy-800);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(11, 26, 48, 0.3);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
  z-index: 40;
  cursor: pointer;
  border: none;
}
.scroll-top:hover { background: var(--navy-900); transform: translateY(10px); }
.scroll-top.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }

/* ---------- Form pages ---------- */

.form-page { max-width: 720px; margin: 0 auto; }
.form-card { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-xl); padding: 2rem; box-shadow: var(--shadow-sm); }
.form-row { margin-bottom: 1.25rem; }
.form-row label { display: block; font-size: 0.875rem; font-weight: 600; color: var(--navy-900); margin-bottom: 0.375rem; }
.form-row input, .form-row select, .form-row textarea {
  width: 100%;
  padding: 0.75rem 0.875rem;
  border: 1.5px solid var(--gray-300);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: 0.9375rem;
  color: var(--navy-900);
  background: var(--white);
  transition: border-color 0.15s var(--ease);
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus { outline: none; border-color: var(--orange-500); }
.form-row textarea { resize: vertical; min-height: 120px; }
.form-row .hint { font-size: 0.8125rem; color: var(--gray-500); margin-top: 0.375rem; }
.form-row.err input, .form-row.err select, .form-row.err textarea { border-color: #ef4444; }
.form-row .err-msg { display: none; font-size: 0.8125rem; color: #ef4444; margin-top: 0.375rem; }
.form-row.err .err-msg { display: block; }

.form-thanks { display: none; text-align: center; padding: 2rem 1rem; }
.form-thanks.show { display: block; }
.form-thanks .check { width: 56px; height: 56px; border-radius: 50%; background: #dcfce7; color: #16a34a; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 1rem; }

/* ---------- Legal pages ---------- */

.legal { max-width: 780px; margin: 0 auto; }
.legal h2 { margin: 2.5rem 0 1rem; font-size: 1.5rem; }
.legal h2:first-child { margin-top: 0; }
.legal p, .legal li { margin-bottom: 0.875rem; line-height: 1.7; color: var(--gray-700); }
.legal ul { padding-left: 1.5rem; margin-bottom: 1rem; }
.legal .meta { color: var(--gray-500); font-size: 0.875rem; margin-bottom: 2rem; }

/* ---------- Misc ---------- */

.anim-up { opacity: 0; transform: translateY(16px); transition: all 0.6s var(--ease); }
.anim-up.in { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ---- Cookie consent banner (analytics.js) ---- */
.ps-consent {
  position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 1000;
  max-width: 660px; margin: 0 auto;
  background: var(--navy-900); color: var(--white);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem;
  box-shadow: 0 16px 48px rgba(0,0,0,0.35);
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem;
}
.ps-consent-text {
  margin: 0; flex: 1 1 260px;
  font-size: 0.875rem; line-height: 1.5; color: rgba(255,255,255,0.85);
}
.ps-consent-text a { color: var(--white); text-decoration: underline; }
.ps-consent-actions { display: flex; gap: 0.5rem; flex: 0 0 auto; margin-left: auto; }
.ps-consent button {
  font: inherit; font-size: 0.875rem; font-weight: 600;
  padding: 0.55rem 1.15rem; border-radius: var(--radius-sm);
  border: 0; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.ps-consent-accept { background: var(--orange-500); color: var(--white); }
.ps-consent-accept:hover { background: #d9661c; }
.ps-consent-decline { background: transparent; color: rgba(255,255,255,0.8); border: 1px solid rgba(255,255,255,0.3); }
.ps-consent-decline:hover { border-color: var(--white); color: var(--white); }
@media (max-width: 480px) {
  .ps-consent-actions { width: 100%; margin-left: 0; }
  .ps-consent-actions button { flex: 1; }
}

/* ==========================================================================
   Animated illustration scenes
   Lightweight CSS/SVG loops. Each scene root carries [data-scene]; main.js
   toggles .in-view on it via IntersectionObserver, and every animation below
   is gated on .in-view so nothing runs while the scene is off screen.
   ========================================================================== */

/* Reusable little car (orange body, blue cabin, two wheels) */
.mini-car {
  position: absolute; bottom: 28px; width: 48px; height: 19px;
  background: var(--orange-500); border-radius: 8px 11px 4px 4px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.25);
}
.mini-car.is-guest { background: var(--blue-500); }
.mini-car::before {                 /* cabin with A/B/C pillars */
  content: ''; position: absolute; left: 11px; top: -7px; width: 22px; height: 9px;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(
    to right,
    #3d5465 0px 2px,
    #bfdcff 2px 10px,
    #3d5465 10px 12px,
    #bfdcff 12px 20px,
    #3d5465 20px 22px
  );
}
.mini-car::after {                  /* two wheels */
  content: ''; position: absolute; bottom: -4px; left: 5px; right: 5px; height: 9px;
  background:
    radial-gradient(5px 5px at 6px 4px, #0b1a30 4px, transparent 5px),
    radial-gradient(5px 5px at calc(100% - 6px) 4px, #0b1a30 4px, transparent 5px);
}

/* A barrier arm that pivots up from a short post */
.scene-gate { position: absolute; bottom: 26px; width: 5px; height: 22px; background: linear-gradient(90deg,#94a3b8,#e2e8f0); border-radius: 2px; }
.scene-gate::before {
  content: ''; position: absolute; left: 2px; bottom: 16px; width: 42px; height: 5px;
  background: repeating-linear-gradient(90deg,#f17a2b 0 10px,#fff 10px 20px);
  border: 1px solid rgba(0,0,0,0.25); border-radius: 3px;
  transform-origin: left center; transform: rotate(-4deg);
}

/* ---- Scene 1: before / after ------------------------------------------- */
.ba-scene { display: grid; grid-template-columns: 1fr; gap: 1rem; margin: 0 auto; max-width: 1000px; }
@media (min-width: 760px) { .ba-scene { grid-template-columns: 1fr 1fr; gap: 1.25rem; } }
.ba-side { position: relative; border-radius: var(--radius-lg); padding: 1rem 1.1rem 1.2rem; border: 1px solid; overflow: hidden; }
.ba-old { background: linear-gradient(180deg,#fef7f3,#fff); border-color: #fbd3bf; }
.ba-new { background: radial-gradient(130% 150% at 50% 0%, #16294a, #0a1428); border-color: rgba(255,255,255,0.08); }
.ba-tag { display: inline-block; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.25rem 0.6rem; border-radius: 999px; margin-bottom: 0.85rem; }
.ba-old .ba-tag { color: #c2410c; background: #ffe8db; }
.ba-new .ba-tag { color: var(--orange-400); background: rgba(241,122,43,0.16); }
.ba-lane { position: relative; height: 92px; border-radius: var(--radius-md); overflow: hidden; }
.ba-old .ba-lane { background: #ece1d8; }
.ba-new .ba-lane { background: linear-gradient(180deg,#243a5e,#16263f); }
.ba-lane::after { content: ''; position: absolute; left: 0; right: 0; bottom: 22px; height: 2px; background: repeating-linear-gradient(90deg, rgba(0,0,0,0.16) 0 14px, transparent 14px 28px); }
.ba-new .ba-lane::after { background: repeating-linear-gradient(90deg, rgba(255,255,255,0.35) 0 14px, transparent 14px 28px); }
.ba-cap { display: block; margin-top: 0.7rem; font-size: 0.82rem; }
.ba-old .ba-cap { color: var(--gray-600); }
.ba-new .ba-cap { color: rgba(255,255,255,0.72); }
/* Booth on the old lane */
.ba-booth { position: absolute; bottom: 26px; right: 10px; width: 38px; height: 50px; background: #c7ad97; border: 1px solid #a98a70; border-radius: 4px 4px 0 0; z-index: 2; }
.ba-booth::before { content: ''; position: absolute; left: 5px; top: 7px; width: 28px; height: 20px; background: #6b4f3a; border-radius: 2px; }
.ba-booth::after { content: '👤'; position: absolute; left: 5px; top: 7px; width: 28px; height: 20px; font-size: 12px; line-height: 20px; text-align: center; }
/* Old lane: JS-driven queue animation */
.ba-old .mini-car { transform: scale(0.78); transform-origin: bottom left; position: absolute; bottom: 28px; left: -60px; z-index: 3; }
.ba-old .scene-gate { left: 72%; right: auto; }
.ba-old .ba-booth   { left: 58%; right: auto; }
.scene-gate::before { transition: transform 0.35s ease; }
.scene-gate.gate-open::before { transform: rotate(-74deg) !important; }
/* New lane: camera + one car gliding through an auto barrier */
.ba-cam { position: absolute; bottom: 56px; left: 56%; width: 5px; height: 26px; background: linear-gradient(90deg,#94a3b8,#cbd5e1); border-radius: 2px; }
.ba-cam::before { content: ''; position: absolute; top: -5px; left: -16px; width: 26px; height: 12px; background: #e2e8f0; border-radius: 3px 6px 6px 3px; transform: rotate(12deg); }
.ba-cam::after { content: ''; position: absolute; top: 0; left: -19px; width: 6px; height: 6px; border-radius: 50%; background: #60a5fa; box-shadow: 0 0 6px rgba(96,165,250,0.9); }
.ba-new .scene-gate { left: 58%; }
.ba-new .mini-car { left: 50%; }
.ba-scene.in-view .ba-new .mini-car { animation: baDrive 4.4s linear infinite; }
.ba-scene.in-view .ba-new .scene-gate::before { animation: baLift 4.4s ease-in-out infinite; }
@keyframes baDrive { 0% { left: -56px; } 32%,52% { left: 50%; } 100% { left: 116%; } }
@keyframes baLift { 0%,30% { transform: rotate(-4deg); } 44%,66% { transform: rotate(-74deg); } 84%,100% { transform: rotate(-4deg); } }

/* ---- Why Rivikon: old way → typical system → Rivikon (3 stages) ------- */
.versus { display: flex; flex-direction: column; gap: 1rem; }
.versus > .ba-side { flex: 1; }
.vs-arrow { align-self: center; color: var(--orange-400); font-weight: 700; font-size: 1.4rem; line-height: 1; transform: rotate(90deg); }
@media (min-width: 760px) {
  .versus { flex-direction: row; align-items: stretch; gap: 0.6rem; }
  .vs-arrow { transform: none; }
}
.ba-rival { background: var(--gray-50); border-color: var(--gray-200); }
.ba-rival .ba-tag { color: var(--gray-700); background: var(--gray-100); }
.ba-rival .ba-cap { color: var(--gray-500); }
.ba-ours { background: radial-gradient(130% 150% at 50% 0%, #16294a, #0a1428); border-color: rgba(241,122,43,0.5); box-shadow: 0 0 0 1px rgba(241,122,43,0.22), var(--shadow-lg); }
.ba-ours .ba-tag { color: var(--orange-400); background: rgba(241,122,43,0.16); }
.ba-ours .ba-cap { color: rgba(255,255,255,0.72); }
.vs-list { list-style: none; margin: 0.2rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.vs-list li { position: relative; padding-left: 1.6rem; font-size: 0.9rem; line-height: 1.45; }
.vs-list li::before { position: absolute; left: 0; top: 0; font-weight: 700; }
.vs-neg li { color: var(--gray-600); }
.vs-neg li::before { content: '\2715'; color: #b91c1c; }
.vs-pos li { color: rgba(255,255,255,0.92); }
.vs-pos li::before { content: '\2713'; color: #4ade80; }

/* ---- Scene 2: resident vs guest ---------------------------------------- */
.rg-scene { display: grid; grid-template-columns: 1fr; gap: 1rem; margin: 1.75rem auto 0; max-width: 760px; }
@media (min-width: 620px) { .rg-scene { grid-template-columns: 1fr 1fr; } }
.rg-row { background: radial-gradient(130% 150% at 50% 0%, #16294a, #0a1428); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-lg); padding: 0.85rem 1rem 1rem; }
.rg-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.7rem; }
.rg-badge { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.22rem 0.55rem; border-radius: 999px; }
.rg-resident .rg-badge { color: #4ade80; background: rgba(34,197,94,0.16); }
.rg-guest .rg-badge { color: var(--orange-400); background: rgba(241,122,43,0.16); }
.rg-plate { font-family: 'Space Grotesk', monospace; font-weight: 700; font-size: 0.8rem; letter-spacing: 0.06em; color: #0b1a30; background: #fff; border: 2px solid #111; border-radius: 4px; padding: 0.05rem 0.4rem; }
.rg-lane { position: relative; height: 84px; border-radius: var(--radius-md); overflow: hidden; background: linear-gradient(180deg,#243a5e,#16263f); }
.rg-lane::after { content: ''; position: absolute; left: 0; right: 0; bottom: 20px; height: 2px; background: repeating-linear-gradient(90deg, rgba(255,255,255,0.32) 0 14px, transparent 14px 28px); }
.rg-lane .scene-gate { left: 60%; bottom: 24px; }
.rg-lane .mini-car { bottom: 26px; left: 52%; }
.rg-scene.in-view .rg-resident .mini-car { animation: baDrive 4.6s linear infinite; }
.rg-scene.in-view .rg-resident .scene-gate::before { animation: rgOpenFast 4.6s ease-in-out infinite; }
.rg-scene.in-view .rg-guest .mini-car { animation: rgGuestDrive 4.6s linear infinite; }
.rg-scene.in-view .rg-guest .scene-gate::before { animation: rgOpenSlow 4.6s ease-in-out infinite; }
@keyframes rgOpenFast { 0% { transform: rotate(-4deg); } 22%,60% { transform: rotate(-74deg); } 80%,100% { transform: rotate(-4deg); } }
@keyframes rgGuestDrive { 0% { left: -56px; } 30%,64% { left: 50%; } 100% { left: 116%; } }   /* longer pause to "pay" */
@keyframes rgOpenSlow { 0%,46% { transform: rotate(-4deg); } 58%,72% { transform: rotate(-74deg); } 88%,100% { transform: rotate(-4deg); } }
.rg-out { margin-top: 0.7rem; font-size: 0.82rem; font-weight: 600; display: flex; align-items: center; gap: 0.4rem; }
.rg-ok { color: #4ade80; }
.rg-pay { color: var(--orange-400); }
.rg-out::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }

/* ---- Scene 5: one dashboard for every site ----------------------------- */
.map-scene { max-width: 720px; margin: 1.75rem auto 0; }
.map-field { position: relative; width: 100%; }
.map-field svg { width: 100%; height: auto; display: block; }
.map-link { stroke: rgba(96,165,250,0.5); stroke-width: 1.5; stroke-dasharray: 4 4; }
.map-scene.in-view .map-link { animation: mapFlow 1.4s linear infinite, mapLinkFlash 5s ease-in-out infinite; }
@keyframes mapFlow { to { stroke-dashoffset: -16; } }
@keyframes mapLinkFlash {
  0%, 25%, 80%, 100% { stroke: rgba(96,165,250,0.5); stroke-width: 1.5; }
  45%, 60%           { stroke: rgba(241,122,43,0.9); stroke-width: 2.5; }
}
.map-scene.in-view line.map-link:nth-of-type(1) { animation-delay: 0s,    0s;    animation-duration: 1.4s, 5.0s; }
.map-scene.in-view line.map-link:nth-of-type(2) { animation-delay: 0s,    1.8s;  animation-duration: 1.4s, 6.2s; }
.map-scene.in-view line.map-link:nth-of-type(3) { animation-delay: 0s,    3.4s;  animation-duration: 1.4s, 4.7s; }
.map-scene.in-view line.map-link:nth-of-type(4) { animation-delay: 0s,    0.9s;  animation-duration: 1.4s, 7.1s; }
.map-scene.in-view line.map-link:nth-of-type(5) { animation-delay: 0s,    2.5s;  animation-duration: 1.4s, 5.5s; }
.map-scene.in-view line.map-link:nth-of-type(6) { animation-delay: 0s,    1.1s;  animation-duration: 1.4s, 6.8s; }
.map-site { fill: var(--orange-500); transform-box: fill-box; transform-origin: center; }
.map-scene.in-view .map-site { animation: mapPulse 2.4s ease-in-out infinite; }
.map-site.s2 { animation-delay: 0.3s; } .map-site.s3 { animation-delay: 0.6s; }
.map-site.s4 { animation-delay: 0.9s; } .map-site.s5 { animation-delay: 1.2s; } .map-site.s6 { animation-delay: 1.5s; }
@keyframes mapPulse { 0%,100% { transform: scale(1); opacity: 0.85; } 50% { transform: scale(1.55); opacity: 1; } }
.map-hub { fill: #0b1a30; stroke: var(--orange-500); stroke-width: 2; animation: map-hub-glow 2.8s ease-in-out infinite; }
@keyframes map-hub-glow {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(241,122,43,0.3)); stroke-width: 2; }
  50%       { filter: drop-shadow(0 0 10px rgba(241,122,43,0.7)); stroke-width: 2.5; }
}
.map-hub-label { fill: #fff; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 13px; }
.map-site-label { fill: rgba(255,255,255,0.55); font-family: 'Inter', sans-serif; font-size: 9px; }

/* ---- Scene 6: savings counter ------------------------------------------ */
.save-scene { display: grid; grid-template-columns: 1fr; gap: 1rem; max-width: 960px; margin: 1.75rem auto 0; }
@media (min-width: 720px) { .save-scene { grid-template-columns: repeat(3, 1fr); } }
.save-card { background: radial-gradient(130% 150% at 50% 0%, #16294a, #0a1428); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-lg); padding: 1.4rem 1.25rem; text-align: center; box-shadow: var(--shadow-lg); }
.save-v { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: clamp(1.7rem, 5vw, 2.4rem); color: #fff; line-height: 1.1; }
.save-v .unit { color: var(--orange-400); font-size: 0.7em; margin-left: 0.15em; }
.save-v .sign { color: var(--orange-400); }
.save-up { color: #22c55e; font-size: 0.55em; font-weight: 800; margin-right: 0.2em; vertical-align: middle; letter-spacing: -0.02em; }
.save-l { color: rgba(255,255,255,0.66); font-size: 0.85rem; margin-top: 0.45rem; line-height: 1.45; }

@media (prefers-reduced-motion: reduce) {
  .ba-scene *, .rg-scene *, .map-scene *, [data-scene] * { animation: none !important; }
}

/* ---------- Components ---------- */
.comp-group { margin-top: 3rem; }
.comp-group:first-of-type { margin-top: 2rem; }
.comp-group-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-bottom: 0.4rem; }
.comp-group-head h2 { margin: 0; }
.comp-tag {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em;
  padding: 0.3rem 0.7rem; border-radius: 999px;
}
.comp-tag.req { background: rgba(241,122,43,0.12); color: #c2410c; }
.comp-tag.opt { background: var(--gray-100); color: var(--gray-700); }

.comp-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin-top: 1.75rem; }
@media (min-width: 600px) { .comp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .comp-grid { grid-template-columns: repeat(3, 1fr); } }

.comp-card {
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.comp-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.comp-fig {
  position: relative;
  background: linear-gradient(160% 120% at 50% 0%, #f1f5fb, #e7edf6);
  padding: 1.5rem 1.25rem 1.25rem;
  border-bottom: 1px solid var(--gray-100);
}
.comp-soon {
  position: absolute; top: 0.75rem; right: 0.75rem; z-index: 1;
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.02em;
  padding: 0.3rem 0.6rem; border-radius: 999px;
  background: rgba(241,122,43,0.14); color: #c2410c;
  border: 1px solid rgba(241,122,43,0.25);
  backdrop-filter: blur(2px);
}
.comp-soon::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--orange-500);
}
.comp-fig svg { width: 100%; height: auto; max-height: 150px; display: block; }
.comp-body { padding: 1.25rem 1.35rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.comp-body h3 { font-size: 1.125rem; margin: 0 0 0.4rem; }
.comp-body > p { color: var(--gray-600); font-size: 0.9rem; line-height: 1.5; margin: 0 0 0.9rem; }
.comp-feat { list-style: none; margin: auto 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.comp-feat li { position: relative; padding-left: 1.4rem; font-size: 0.85rem; color: var(--gray-700); }
.comp-feat li::before {
  content: ""; position: absolute; left: 0; top: 0.32rem;
  width: 7px; height: 7px; border-radius: 2px; background: var(--orange-500);
}
.comp-min { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #c2410c; margin-bottom: 0.5rem; }
.comp-rec { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #0369a1; margin-bottom: 0.5rem; }
.comp-tag.rec { background: rgba(3,105,161,0.1); color: #0369a1; }
.rec-dot { display: inline-block; font-size: 0.68rem; font-weight: 600; color: #0369a1; margin-left: 0.3rem; }

/* Collapsible components block (solution pages) */
.comp-collapse {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  background: var(--white);
  overflow: hidden;
}
.comp-collapse > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.25rem 1.5rem;
  font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 1.1rem;
  color: var(--navy-900);
}
.comp-collapse > summary::-webkit-details-marker { display: none; }
.comp-collapse > summary:hover { background: var(--gray-50); }
.comp-sum-hint { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 0.85rem; color: var(--gray-500); }
.comp-chev {
  flex: none; width: 22px; height: 22px; color: var(--orange-500);
  transition: transform 0.25s var(--ease);
}
.comp-collapse[open] .comp-chev { transform: rotate(180deg); }
.comp-collapse-body { padding: 0 1.5rem 1.5rem; }
.comp-collapse[open] .comp-collapse-body { animation: compReveal 0.3s var(--ease); }
@keyframes compReveal { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.comp-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 0.6rem; }
@media (min-width: 640px) { .comp-list { grid-template-columns: repeat(2, 1fr); } }
.comp-row { display: flex; gap: 0.85rem; align-items: center; padding: 0.85rem; border: 1px solid var(--gray-100); border-radius: var(--radius-md); background: var(--gray-50); }
.comp-row-ic { flex: none; width: 38px; height: 38px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--white); border: 1px solid var(--gray-200); color: var(--navy-700); }
.comp-row-ic svg { width: 20px; height: 20px; }
.comp-row b { display: block; font-size: 0.92rem; color: var(--navy-900); }
.comp-row div span { display: block; font-size: 0.82rem; color: var(--gray-600); line-height: 1.4; margin-top: 0.1rem; }
.comp-row .req-dot { display: inline-block; font-size: 0.68rem; font-weight: 600; color: #c2410c; margin-left: 0.3rem; }
.comp-row .opt-dot { display: inline-block; font-size: 0.68rem; font-weight: 500; color: var(--gray-400); margin-left: 0.3rem; }
.comp-collapse-cta { margin-top: 1.1rem; }

/* LED totem - cycling screens */
.totem-screen { opacity: 0; }
.totem-s1 { opacity: 1; }
.comp-fig.in-view .totem-screen { animation: totemScreen 9s var(--ease) infinite; }
.comp-fig.in-view .totem-s2 { animation-delay: -3s; }
.comp-fig.in-view .totem-s3 { animation-delay: -6s; }
@keyframes totemScreen {
  0% { opacity: 0; }
  3% { opacity: 1; }
  30% { opacity: 1; }
  34% { opacity: 0; }
  100% { opacity: 0; }
}

/* ==========================================================================
   BLOG  (generated pages live in /blog/ and /en/blog/; styles below)
   ========================================================================== */
.lang-switch { font-weight: 600; font-size: 0.875rem; color: var(--gray-600); padding: 0.35rem 0.6rem; border: 1px solid var(--gray-200); border-radius: var(--radius-sm); }
.lang-switch:hover { border-color: var(--orange-500); color: var(--orange-500); }

/* Listing grid */
.blog-grid { display: grid; grid-template-columns: 1fr; gap: 1.75rem; }
@media (min-width: 640px) { .blog-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .blog-grid { grid-template-columns: 1fr 1fr 1fr; } }

.blog-card { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); overflow: hidden; transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease); }
.blog-card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(11, 26, 48, 0.1); }
.blog-card-img { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.blog-card-img img { width: 100%; height: 100%; object-fit: cover; }
.blog-card-body { padding: 1.25rem 1.35rem 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; }
.blog-card-body h2 { font-size: 1.2rem; line-height: 1.3; margin: 0; }
.blog-card-body h2 a { color: var(--navy-900); }
.blog-card-body h2 a:hover { color: var(--orange-500); }
.blog-card-body p { color: var(--gray-600); font-size: 0.95rem; margin: 0; flex: 1; }

.blog-meta { color: var(--gray-500); font-size: 0.85rem; }

/* Article */
.blog-article { max-width: 760px; }
.blog-back { margin-bottom: 1rem; font-size: 0.9rem; }
.blog-title { margin: 0.5rem 0 0.75rem; }
.blog-article .blog-meta { margin-bottom: 1.5rem; }
.blog-cover { margin: 0 0 2rem; border-radius: var(--radius-lg); overflow: hidden; }
.blog-cover img { width: 100%; height: auto; display: block; }

/* Prose typography for the article body */
.prose { font-size: 1.075rem; line-height: 1.75; color: var(--navy-900); }
.prose > * + * { margin-top: 1.15rem; }
.prose h2 { font-size: 1.5rem; margin-top: 2.25rem; margin-bottom: 0.5rem; }
.prose h3 { font-size: 1.2rem; margin-top: 1.75rem; margin-bottom: 0.4rem; }
.prose ul, .prose ol { padding-left: 1.4rem; }
.prose li + li { margin-top: 0.4rem; }
.prose a { color: var(--orange-500); text-decoration: underline; text-underline-offset: 2px; }
.prose blockquote { margin: 1.75rem 0; padding: 0.75rem 1.25rem; border-left: 4px solid var(--orange-500); background: var(--gray-50); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--gray-600); font-style: italic; }
.prose img { max-width: 100%; height: auto; border-radius: var(--radius-md); }
.prose code { background: var(--gray-100); padding: 0.15em 0.4em; border-radius: 4px; font-size: 0.9em; }
.prose pre { background: var(--navy-900); color: #e8eef7; padding: 1rem 1.25rem; border-radius: var(--radius-md); overflow-x: auto; }
.prose pre code { background: none; padding: 0; }

/* Tags + share */
.blog-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 2.25rem; }
.blog-tag { font-size: 0.8rem; color: var(--gray-600); background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: 999px; padding: 0.25rem 0.75rem; }
.blog-share { display: flex; align-items: center; gap: 0.6rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--gray-200); color: var(--gray-500); font-size: 0.9rem; }
.blog-share a { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border: 1px solid var(--gray-200); border-radius: 50%; color: var(--gray-600); font-weight: 600; }
.blog-share a:hover { background: var(--orange-500); color: #fff; border-color: var(--orange-500); }

/* ==========================================================================
   PREMIUM-DARK REBRAND — theme override
   Re-skins every page that loads styles.css onto the new dark identity:
   blue-black canvas, green accent (granted), Geologica/Onest type. Kept as an
   appended override so the original light rules above stay intact/reversible.
   Palette mirrors assets/css/rivikon.css (homepage + product pages).
   ========================================================================== */
:root{
  /* orange is only ever an accent → safe to flip globally to the brand green */
  --orange-500:#2fd08a; --orange-400:#54dc9f;
  /* --gray-50 kept light on purpose: those sections stay a white contrast band
     (headings re-darkened below). --gray-100 darkened for misc surfaces. */
  --gray-100:#1b2336;
  /* dark palette tokens */
  --rk-bg:#0a0e1a; --rk-surface:#121829; --rk-elevated:#1a2236; --rk-panel:#1f2942;
  --rk-ink:#e9edf6; --rk-muted:#8b95ad; --rk-faint:#5e6880;
  --rk-line:rgba(233,237,246,.10); --rk-line2:rgba(233,237,246,.17);
  --rk-green:#2fd08a; --rk-green-soft:rgba(47,208,138,.14); --rk-green-line:rgba(47,208,138,.42); --rk-on:#04130b;
}

/* base */
body{background:var(--rk-bg);color:var(--rk-ink);font-family:'Onest',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}
h1,h2,h3,h4,h5{color:var(--rk-ink)}
h1,h2,h3,h4,h5,.nav-wordmark,.footer-wordmark,.plan-price,.plan-scale .scale-n,.stat-v,.step-num,.dstep .n,.hud-plate,.cfg-rec-tier,.save-v,.ba-tag,.rg-badge,.comp-collapse>summary,.sec-item h4,.avatar,.tlogo,.drive-mode,.drive-speed,.cfg-q,.t-name{font-family:'Geologica',system-ui,sans-serif}
p{color:var(--rk-muted)}
.section-lede{color:var(--rk-muted)}
a:hover{color:var(--rk-green)}

/* nav */
.nav{background:rgba(10,14,26,.72);border-bottom:1px solid var(--rk-line);backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px)}
.nav-brand{color:var(--rk-ink)}
.nav-brand::before{content:"R";background:var(--rk-green);color:var(--rk-on);width:30px;height:30px;border-radius:8px;display:grid;place-items:center;font-family:'Geologica',sans-serif;font-weight:700;font-size:.95rem}
.nav-links a{color:var(--rk-muted)}
.nav-links a:hover,.nav-links>li>a[aria-current="page"]{color:var(--rk-ink)}
.nav-switch>a{color:var(--rk-ink)}
.nav-switch::before{background:var(--rk-line2)}
.nav-menu{background:var(--rk-surface);border-color:var(--rk-line2);box-shadow:0 24px 50px -20px rgba(0,0,0,.7)}
.nav-menu a{color:var(--rk-muted)}
.nav-menu a:hover{background:var(--rk-elevated);color:var(--rk-ink)}
.nav-menu-sep{border-top-color:var(--rk-line)}
.nav-soon{color:var(--rk-muted);background:var(--rk-panel);border-color:var(--rk-line2)}
.nav-toggle span{background:var(--rk-ink)}
.mobile-menu{background:var(--rk-bg);border-top-color:var(--rk-line)}
.mobile-menu a{color:var(--rk-ink);border-bottom-color:var(--rk-line)}
.mobile-sub{border-left-color:var(--rk-line2)}
.mobile-sub a{color:var(--rk-muted);border-bottom:none;padding:.5rem 0 .5rem .85rem}
.mobile-sep{border-top-color:var(--rk-line)}
.lang-switch{color:var(--rk-muted);border-color:var(--rk-line2)}

/* hero */
.hero{background:radial-gradient(1100px 460px at 80% -10%,rgba(47,208,138,.08),transparent 60%),var(--rk-bg)}
.hero::before{background-image:linear-gradient(rgba(233,237,246,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(233,237,246,.05) 1px,transparent 1px)}
.hero-tagline{color:var(--rk-muted)}
.hero-sub{color:var(--rk-muted)}

/* generic light surfaces → dark */
.box,.feature,.usecase,.plan,.module,.sol-card,.testimonial,.comp-card,.comp-collapse,.form-card,.blog-card{background:var(--rk-surface);border-color:var(--rk-line)}
.box.bad,.box.good{background:var(--rk-elevated)}
.box ul li,.feature p,.usecase p,.plan-desc,.plan ul li,.module p,.sol-card p,.comp-body>p,.comp-feat li,.legal p,.legal li,.usecase ul li,.testimonial blockquote{color:var(--rk-muted)}
.feature:hover,.module:hover,.sol-card:hover,.comp-card:hover{border-color:var(--rk-green-line)}
.plan-price,.plan-scale .scale-n,.t-name,.sec-item h4,.comp-row b,.form-row label,.comp-collapse>summary{color:var(--rk-ink)}
.usecase ul,.t-meta{border-top-color:var(--rk-line)}
.trust{background:var(--rk-surface);border-top-color:var(--rk-line);border-bottom-color:var(--rk-line)}
.trust-text,.t-role,.plan-eg,.modules-note,.comp-sum-hint,.blog-meta,.hw-label,.hw-list li,.plan-scale .scale-u{color:var(--rk-muted)}

/* pricing / modules / hardware */
.plan.popular{border-color:var(--rk-green-line);box-shadow:0 30px 60px -30px rgba(0,0,0,.7)}
.plan-hw,.module-icon,.comp-row,.comp-tag.opt{background:var(--rk-panel);border-color:var(--rk-line)}
.module-icon{color:var(--orange-400)} /* green icon glyph, matching the software page's .feature-icon */
.comp-row-ic{background:var(--rk-elevated);border-color:var(--rk-line);color:var(--rk-ink)}
.comp-row div span,.comp-body p{color:var(--rk-muted)}

/* security strip */
.security{background:linear-gradient(135deg,var(--rk-elevated),var(--rk-surface));border-color:var(--rk-line)}
.sec-item p{color:var(--rk-muted)}

/* faq (styles.css variant, used on inner pages) */
.faq details{border-bottom-color:var(--rk-line)}
.faq summary{color:var(--rk-ink)}
.faq details[open] summary{color:var(--rk-green)}
.faq details p{color:var(--rk-muted)}

/* final CTA accents → green */
.final-cta::before{background:radial-gradient(600px 300px at 80% 20%,rgba(47,208,138,.22),transparent 50%),radial-gradient(500px 300px at 20% 80%,rgba(47,208,138,.12),transparent 50%)}

/* forms → dark inputs */
.form-row input,.form-row select,.form-row textarea{background:var(--rk-elevated);border-color:var(--rk-line2);color:var(--rk-ink)}
.form-row .hint{color:var(--rk-muted)}

/* components figure backgrounds */
.comp-fig{background:linear-gradient(160deg,#16203a,#0e1526);border-bottom-color:var(--rk-line)}
.comp-collapse>summary:hover{background:var(--rk-elevated)}

/* legal + prose */
.legal .meta{color:var(--rk-faint)}
.prose{color:var(--rk-ink)}
.prose blockquote{background:var(--rk-surface);color:var(--rk-muted)}
.prose code{background:var(--rk-panel)}
.blog-card-body h2 a{color:var(--rk-ink)}
.blog-tag{background:var(--rk-surface);border-color:var(--rk-line);color:var(--rk-muted)}

/* scroll-to-top */
.scroll-top{background:var(--rk-surface);border:1px solid var(--rk-line2);color:var(--rk-ink)}
.scroll-top:hover{background:var(--rk-elevated)}

/* parking nav: separate site-wide links (За нас, Контакти) from product pages.
   Kept a touch dimmer than the product links, but still clearly legible — both on
   the dark bar and when it turns translucent over a light section. */
.nav-links .nav-global a{color:var(--rk-muted)}
.nav-links .nav-global a:hover{color:var(--rk-ink)}
.nav-links .nav-global-first{position:relative;margin-left:.7rem;padding-left:1.1rem}
.nav-links .nav-global-first::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);height:1.1rem;width:1px;background:var(--rk-line2)}

/* primary button glow → green (base box-shadow is a leftover orange halo) */
.btn-primary{box-shadow:0 14px 30px -14px rgba(47,208,138,.55)}
.btn-primary:hover{box-shadow:0 18px 38px -16px rgba(47,208,138,.65)}

/* secondary (outline) buttons → light text + visible border on dark */
.btn-secondary{color:var(--rk-ink);border-color:var(--rk-line2)}
.btn-secondary:hover{color:var(--rk-ink);border-color:var(--rk-green);background:var(--rk-elevated)}

/* outline "call us" button → readable white text + green glow (no orange) */
.btn-orange-outline{color:#fff;border-color:var(--rk-green)}
.btn-orange-outline:hover{background:var(--rk-green);color:var(--rk-on);border-color:var(--rk-green)}
@keyframes btn-orange-glow{0%,100%{box-shadow:0 0 4px rgba(47,208,138,.35)}50%{box-shadow:0 0 14px rgba(47,208,138,.5)}}

/* "old system" cons list — lighter + a touch bolder */
.vs-neg li{color:#c3cbd9;font-weight:600}

/* pilot-offer popup (offer.js) → dark, readable */
.offer-overlay{background:rgba(4,7,14,.74)}
.offer-modal{background:var(--rk-surface);border:1px solid var(--rk-line2);box-shadow:0 30px 80px rgba(0,0,0,.6)}
.offer-title{color:var(--rk-ink)}
.offer-body{color:var(--rk-muted)}
.offer-body strong{color:var(--rk-ink)}
.offer-badge{color:var(--rk-green);background:var(--rk-green-soft);border-color:var(--rk-green-line)}
.offer-close,.offer-dismiss{color:var(--rk-muted)}
.offer-close:hover,.offer-dismiss:hover{color:var(--rk-ink)}

/* Light "contrast band" sections (inline background:var(--gray-50)) stay light.
   Re-darken only the section's own heading/lede (child combinator avoids touching
   the dark cards nested inside). */
[style*="--gray-50"] > .container > h2,
[style*="--gray-50"] > .container > h3,
[style*="--gray-50"] > .container > .section-title{color:#0d1622}
[style*="--gray-50"] > .container > .section-lede,
[style*="--gray-50"] > .container > p{color:#475569}
/* FAQ sitting inside a light band: the default summary colour (--rk-ink, near-white)
   is meant for dark sections and turns invisible here — re-darken it. */
[style*="--gray-50"] .faq details{border-bottom-color:rgba(13,22,34,.12)}
[style*="--gray-50"] .faq summary{color:#0d1622}
[style*="--gray-50"] .faq details[open] summary{color:#0a8f5d}
[style*="--gray-50"] .faq details p{color:#475569}

/* Active page in the (parking) nav → green + bold, so the current sub-page clearly
   stands out from the always-white "Parking" product switcher chip. */
.nav-links>li>a[aria-current="page"]{color:var(--rk-green);font-weight:700}

/* Components page: hardware cards are WHITE (the illustrations are drawn for a light
   background); text goes dark, badges go green (no orange). */
.comp-card{background:#fff;border-color:#e2e8f0}
.comp-card:hover{border-color:#cdd8e6;box-shadow:0 28px 56px -28px rgba(13,40,80,.28)}
.comp-fig{background:linear-gradient(160deg,#f1f5fb,#e7edf6);border-bottom-color:#e6ebf0}
.comp-body h3{color:#0d1622}
.comp-body>p{color:#475569}
.comp-feat li{color:#334155}
.comp-soon{background:rgba(47,208,138,.14);color:#0b7a4e;border-color:rgba(47,208,138,.35)}
.comp-soon::before{background:var(--rk-green)}
.comp-min{color:#0b7a4e}
/* section-level tags sit on the dark page background, so they need light/bright text */
.comp-tag.req{background:var(--rk-green-soft);color:var(--rk-green)}
.comp-tag.opt{background:rgba(233,237,246,.08);color:var(--rk-muted)}