/* ==========================================================================
   ACS (Automated Access Control System) - CSS Design System & Stylesheet
   ========================================================================== */

:root {
  /* Color Palette */
  --bg-dark: #07090e;
  --bg-card: rgba(15, 23, 42, 0.7);
  --bg-card-hover: rgba(30, 41, 59, 0.8);
  --bg-elevated: #0f172a;
  --border-color: rgba(255, 255, 255, 0.08);
  --border-glow: rgba(59, 130, 246, 0.4);

  --accent-cyan: #06b6d4;
  --accent-blue: #3b82f6;
  --accent-emerald: #10b981;
  --accent-purple: #8b5cf6;
  --accent-amber: #f59e0b;

  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;
  /* Muted text is used for real copy, so it clears WCAG AA (4.5:1) on every surface it appears on.
     The previous #64748b measured 4.18:1 on the page and 3.75:1 on a card. */
  --text-muted: #7c8ca3;

  --gradient-brand: linear-gradient(135deg, #06b6d4 0%, #3b82f6 50%, #8b5cf6 100%);
  --gradient-emerald: linear-gradient(135deg, #10b981 0%, #06b6d4 100%);
  --gradient-dark: linear-gradient(180deg, #07090e 0%, #0b1120 100%);

  --shadow-glow-cyan: 0 0 25px rgba(6, 182, 212, 0.25);
  --shadow-glow-emerald: 0 0 25px rgba(16, 185, 129, 0.25);
  --shadow-card: 0 10px 30px -10px rgba(0, 0, 0, 0.5);

  --font-main: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-full: 9999px;

  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Reset & Base Styles */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  color-scheme: dark;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  background-color: var(--bg-dark);
  background-image: 
    radial-gradient(circle at 15% 15%, rgba(6, 182, 212, 0.08) 0%, transparent 45%),
    radial-gradient(circle at 85% 65%, rgba(59, 130, 246, 0.08) 0%, transparent 45%),
    radial-gradient(circle at 50% 90%, rgba(16, 185, 129, 0.05) 0%, transparent 40%);
  color: var(--text-primary);
  font-family: var(--font-main);
  line-height: 1.6;
  overflow-x: hidden;
}

/* Typography & General Utilities */
h1, h2, h3, h4, h5, h6 {
  color: var(--text-primary);
  font-weight: 700;
  line-height: 1.25;
}

a {
  color: inherit;
  text-decoration: none;
}

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

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

.container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}

.section {
  padding: 100px 0;
  position: relative;
}

.section-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 60px;
}

.section-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: var(--radius-full);
  background: rgba(6, 182, 212, 0.1);
  border: 1px solid rgba(6, 182, 212, 0.3);
  color: var(--accent-cyan);
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 16px;
}

.section-title {
  font-size: 2.5rem;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}

@media (min-width: 768px) {
  .section-title {
    font-size: 3rem;
  }
}

.section-subtitle {
  color: var(--text-secondary);
  font-size: 1.125rem;
}

/* Header & Navigation */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  transition: var(--transition-normal);
  padding: 20px 0;
}

.navbar.scrolled {
  background: rgba(7, 9, 14, 0.85);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-color);
  padding: 12px 0;
}

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

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.logo-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--gradient-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-glow-cyan);
}

.logo-icon svg {
  width: 22px;
  height: 22px;
  fill: #fff;
}

.nav-links {
  display: none;
  align-items: center;
  gap: 32px;
  list-style: none;
}

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

.nav-link {
  color: var(--text-secondary);
  font-weight: 500;
  font-size: 0.95rem;
  transition: var(--transition-fast);
}

.nav-link:hover {
  color: var(--text-primary);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Mobile Navigation Toggle & Mobile Menu */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-primary);
  width: 44px;
  height: 44px;
  border-radius: 10px;
  cursor: pointer;
  margin-left: 12px;
}

.skip-link {
  position: absolute;
  top: -40px;
  left: 12px;
  background: var(--bg-elevated);
  color: var(--text-primary);
  padding: 8px 12px;
  border-radius: 6px;
  z-index: 3000;
  transition: top 160ms ease;
}

.skip-link:focus {
  top: 12px;
}

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

/* Mobile menu state: JS toggles the 'mobile' and 'open' classes.
   The rules live inside the mobile breakpoint so the class can stay on the element without fighting
   the desktop layout, and the closed drawer is hidden with `visibility` as well as `opacity` so its
   links are not reachable by keyboard while they are invisible. */
@media (max-width: 899px) {
  .nav-links.mobile {
    position: fixed;
    top: 72px;
    right: 16px;
    left: 16px;
    background: var(--bg-elevated);
    border-radius: 12px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 1500;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-card);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    /* Visibility flips after the fade-out when closing, and immediately when opening, so the drawer
       is genuinely visible by the time the first link is focused. */
    transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1),
                opacity 220ms cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0s linear 220ms;
  }

  .nav-links.mobile.open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1),
                opacity 220ms cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0s;
  }
}

/* The landmark that wraps the menu list; keeps the desktop row intact. */
.nav-wrapper {
  display: flex;
  align-items: center;
  min-width: 0;
}

/* Backdrop shown when mobile nav is open.
   It sits below the header deliberately: the header creates its own stacking context, so a backdrop
   layered above it would paint over the open drawer and swallow every tap on a menu item. Behind the
   header it still covers the page, which is all it needs to do. */
.nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(3, 7, 18, 0.6);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 220ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 220ms;
  z-index: 900;
}

body.nav-open .nav-backdrop {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 220ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0s;
}

/* Focus visibility: nothing loses its outline, because the sliders, inputs and selects are all
   operated from the keyboard. The indicator is opaque rather than a tint so it clears the 3:1
   contrast requirement for non-text UI. */
:focus-visible {
  outline: 3px solid rgba(96, 165, 250, 0.95);
  outline-offset: 3px;
  border-radius: 8px;
}

input[type="range"]:focus-visible {
  outline-offset: 6px;
}

@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;
  }

  /* Motion is the point of a hover lift, so it is removed rather than merely shortened. */
  .btn:hover,
  .feature-card:hover,
  .pricing-card:hover,
  .sim-card:hover,
  .preview-card:hover {
    transform: none;
  }
}

/* Increase touch target size for nav links on mobile */
@media (max-width: 900px) {
  .nav-links.mobile a, .nav-links a { padding: 10px 12px; display: block; }
}

/* Responsive adjustments for small screens */
@media (max-width: 767px) {
  .hero { padding: 100px 0 60px; }
  .section { padding: 48px 0; }
  .container { padding: 0 16px; }
  .hero-stats { flex-direction: column; gap: 12px; align-items: flex-start; }
  .preview-card { max-width: 100%; margin: 0 auto; padding: 16px; }
  .nav-actions { display: none; }
  .nav-container { gap: 8px; align-items: center; }

  .logo { font-size: 1.1rem; }
  .logo-icon { width: 36px; height: 36px; border-radius: 8px; }

  .hero-title { font-size: 1.8rem; }
  .hero-description { font-size: 1rem; max-width: 100%; }

  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; padding: 10px 14px; }

  .btn { padding: 10px 14px; font-size: 0.95rem; }

  .scanner-viewport { height: 180px; }
  .license-photo { width: 56px; height: 72px; }

  .sim-card, .pricing-card, .feature-card, .calculator-card { padding: 18px; }
  .sim-tabs { gap: 8px; }
  .sim-tab { padding: 8px 14px; font-size: 0.9rem; }

  .calc-grid { gap: 20px; }

  .footer-bottom { padding-top: 24px; }
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 24px;
  border-radius: var(--radius-md);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-normal);
  border: none;
  white-space: nowrap;
}

.btn-primary {
  background: var(--gradient-brand);
  color: #fff;
  box-shadow: 0 4px 20px rgba(6, 182, 212, 0.35);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 28px rgba(6, 182, 212, 0.5);
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

.btn-emerald {
  background: var(--gradient-emerald);
  color: #07090e;
  font-weight: 700;
  box-shadow: 0 4px 20px rgba(16, 185, 129, 0.35);
}

.btn-emerald:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 28px rgba(16, 185, 129, 0.5);
}

/* Hero Section */
.hero {
  padding: 160px 0 100px;
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 60px;
  align-items: center;
}

@media (min-width: 992px) {
  .hero-grid {
    grid-template-columns: 1.1fr 0.9fr;
  }
}

.hero-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 16px;
  border-radius: var(--radius-full);
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: var(--accent-emerald);
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 24px;
}

.pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--accent-emerald);
  box-shadow: 0 0 10px var(--accent-emerald);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.hero-title {
  font-size: 2.8rem;
  line-height: 1.15;
  letter-spacing: -0.03em;
  margin-bottom: 24px;
}

@media (min-width: 768px) {
  .hero-title {
    font-size: 3.8rem;
  }
}

.hero-description {
  font-size: 1.2rem;
  color: var(--text-secondary);
  margin-bottom: 40px;
  max-width: 600px;
  line-height: 1.6;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  width: 100%;
}

.hero-stats {
  display: flex;
  align-items: center;
  gap: 40px;
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--border-color);
  width: 100%;
}

.stat-item {
  display: flex;
  flex-direction: column;
}

.stat-value {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--text-primary);
}

.stat-label {
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* Hero Scanner Preview Graphic */
.hero-visual {
  position: relative;
}

.preview-card {
  background: var(--bg-card);
  backdrop-filter: blur(20px);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
}

.preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 16px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border-color);
}

.window-dots {
  display: flex;
  gap: 6px;
}

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

.dot-red { background: #ff5f56; }
.dot-yellow { background: #ffbd2e; }
.dot-green { background: #27c93f; }

.preview-tag {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--accent-cyan);
  background: rgba(6, 182, 212, 0.1);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(6, 182, 212, 0.2);
}

.scanner-viewport {
  height: 240px;
  background: #030712;
  border-radius: var(--radius-md);
  border: 1px dashed rgba(6, 182, 212, 0.4);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 20px;
}

.scan-line {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent-cyan), var(--accent-emerald), transparent);
  box-shadow: 0 0 15px var(--accent-cyan);
  animation: scanAnim 2.5s ease-in-out infinite alternate;
}

@keyframes scanAnim {
  0% { top: 5%; }
  100% { top: 90%; }
}

.license-graphic {
  width: 85%;
  height: 75%;
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 16px;
  display: flex;
  gap: 16px;
  position: relative;
}

.license-photo {
  width: 70px;
  height: 90px;
  background: #334155;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}

.license-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.license-line {
  height: 8px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
}

.license-line.w-70 { width: 70%; }
.license-line.w-40 { width: 40%; }
.license-line.w-90 { width: 90%; }

.barcode-strip {
  position: absolute;
  bottom: 12px;
  left: 16px;
  right: 16px;
  height: 24px;
  background: repeating-linear-gradient(
    90deg,
    #fff,
    #fff 2px,
    #000 2px,
    #000 4px,
    #fff 4px,
    #fff 7px
  );
  border-radius: 4px;
  opacity: 0.85;
}

.live-feed-log {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  background: #020617;
  border-radius: var(--radius-sm);
  padding: 12px;
  color: var(--accent-emerald);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.log-row {
  display: flex;
  justify-content: space-between;
}

.log-key { color: var(--text-muted); }
.log-val { color: var(--text-primary); font-weight: 600; }

/* Interactive Simulator Section */
.simulator-container {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow-card);
}

.sim-tabs {
  display: flex;
  gap: 12px;
  margin-bottom: 28px;
  overflow-x: auto;
  padding-bottom: 8px;
}

.sim-tab {
  padding: 10px 20px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-fast);
  white-space: nowrap;
}

.sim-tab.active {
  background: var(--gradient-brand);
  color: #fff;
  border-color: transparent;
  box-shadow: var(--shadow-glow-cyan);
}

.sim-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 900px) {
  .sim-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.sim-card {
  background: #030712;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 24px;
}

.sim-card-title {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.barcode-box {
  background: #0b1120;
  border: 1px solid rgba(6, 182, 212, 0.2);
  border-radius: var(--radius-sm);
  padding: 16px;
  margin-bottom: 20px;
  word-break: break-all;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--accent-cyan);
  max-height: 110px;
  overflow-y: auto;
}

.decoded-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.field-group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--accent-cyan);
}

.field-label {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.field-value {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--text-primary);
  font-size: 0.9rem;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 700;
}

.status-verified {
  background: rgba(16, 185, 129, 0.15);
  color: var(--accent-emerald);
  border: 1px solid rgba(16, 185, 129, 0.4);
}

/* Feature Cards Grid */
.features-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 640px) {
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .features-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.feature-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 32px;
  transition: var(--transition-normal);
  position: relative;
  overflow: hidden;
}

.feature-card:hover {
  transform: translateY(-5px);
  border-color: var(--border-glow);
  background: var(--bg-card-hover);
  box-shadow: var(--shadow-card);
}

.feature-icon {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: rgba(6, 182, 212, 0.1);
  border: 1px solid rgba(6, 182, 212, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-cyan);
  margin-bottom: 24px;
}

.feature-icon svg {
  width: 28px;
  height: 28px;
}

.feature-title {
  font-size: 1.25rem;
  margin-bottom: 12px;
}

.feature-text {
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* ROI / Gate Efficiency Calculator */
.calculator-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 40px;
  box-shadow: var(--shadow-card);
}

.calc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}

@media (min-width: 900px) {
  .calc-grid {
    grid-template-columns: 1.2fr 0.8fr;
  }
}

.calc-inputs {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.slider-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

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

.slider-label {
  font-weight: 600;
  font-size: 0.95rem;
}

.slider-value {
  font-family: var(--font-mono);
  color: var(--accent-cyan);
  font-weight: 700;
  font-size: 1.1rem;
}

input[type=range] {
  -webkit-appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: #1e293b;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent-cyan);
  cursor: pointer;
  box-shadow: 0 0 10px var(--accent-cyan);
  transition: var(--transition-fast);
}

input[type=range]::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

.calc-output {
  background: #030712;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.calc-output::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--gradient-emerald);
}

.output-metric {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.metric-number {
  font-size: 2.8rem;
  font-weight: 800;
  line-height: 1.1;
}

.metric-subtitle {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-top: 4px;
}

/* Pricing Grid */
.pricing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
}

@media (min-width: 900px) {
  .pricing-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.pricing-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: var(--transition-normal);
}

.pricing-card.popular {
  border-color: var(--accent-cyan);
  box-shadow: var(--shadow-glow-cyan);
  transform: scale(1.03);
}

.popular-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gradient-brand);
  color: #fff;
  padding: 4px 16px;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.plan-name {
  font-size: 1.4rem;
  margin-bottom: 8px;
}

.plan-desc {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-bottom: 24px;
  min-height: 42px;
}

.plan-price {
  font-size: 2.5rem;
  font-weight: 800;
  margin-bottom: 24px;
}

.plan-price span {
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-muted);
}

.plan-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 32px;
  flex-grow: 1;
}

.plan-features li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.95rem;
  color: var(--text-secondary);
}

.plan-features li svg {
  width: 18px;
  height: 18px;
  color: var(--accent-emerald);
  flex-shrink: 0;
}

/* Request dialog, built on the native <dialog> element */
.modal-dialog {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  width: min(560px, calc(100% - 32px));
  max-width: none;
  max-height: calc(100% - 48px);
  /* A tall form scrolls inside the dialog rather than pushing the submit button out of reach. */
  overflow-y: auto;
}

.modal-dialog::backdrop {
  background: rgba(3, 7, 18, 0.85);
  backdrop-filter: blur(8px);
}

.modal-dialog[open] {
  animation: dialog-in 260ms cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes dialog-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .modal-dialog[open] { animation: none; }
}

.modal-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 32px;
  width: 100%;
  position: relative;
  box-shadow: var(--shadow-card);
  transform: translateY(20px);
  transition: var(--transition-normal);
}

.modal-overlay.active .modal-card {
  transform: translateY(0);
}

.modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.modal-close:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.1);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

.form-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.form-input, .form-select, .form-textarea {
  background: #030712;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  color: var(--text-primary);
  font-family: var(--font-main);
  font-size: 0.95rem;
  transition: var(--transition-fast);
}

.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--accent-cyan);
  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.15);
}

/* Footer */
.footer {
  border-top: 1px solid var(--border-color);
  padding: 80px 0 40px;
  background: #03060d;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  margin-bottom: 60px;
}

@media (min-width: 768px) {
  .footer-grid {
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
  }
}

.footer-brand p {
  color: var(--text-secondary);
  margin-top: 16px;
  font-size: 0.95rem;
  max-width: 300px;
}

.footer-title {
  font-size: 1rem;
  margin-bottom: 20px;
}

.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-link {
  color: var(--text-secondary);
  font-size: 0.9rem;
  transition: var(--transition-fast);
}

.footer-link:hover {
  color: var(--accent-cyan);
}

.footer-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding-top: 32px;
  border-top: 1px solid var(--border-color);
  color: var(--text-muted);
  font-size: 0.85rem;
}

@media (min-width: 768px) {
  .footer-bottom {
    flex-direction: row;
    justify-content: space-between;
  }
}

/* ==========================================================================
   Form feedback, consent and anti-spam
   ========================================================================== */

/* Off-screen but still announced, for labels that only assistive technology needs. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* The trap field: hidden from people, still visible in the DOM for anything that fills in every
   input it finds. It is removed from the tab order and hidden from assistive technology so no
   visitor can reach it by mistake. */
.form-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.form-hint {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.form-error {
  font-size: 0.85rem;
  color: #fca5a5;
  margin-top: 2px;
}

.form-input[aria-invalid="true"],
.form-select[aria-invalid="true"],
.form-textarea[aria-invalid="true"] {
  border-color: #ef4444;
}

.consent-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 16px;
}

.consent-row input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--accent-cyan);
}

.consent-row label {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.consent-row a {
  color: var(--accent-cyan);
  text-decoration: underline;
}

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.form-status {
  margin-top: 14px;
  font-size: 0.9rem;
  line-height: 1.5;
}

.form-status.is-error {
  color: #fca5a5;
}

.form-status.is-ok {
  color: #86efac;
}

/* Summary of the assumptions behind the ROI figures. */
.calc-note {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border-color);
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.7;
}

.calc-note strong {
  color: var(--text-secondary);
}

.calc-rate {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.calc-rate input {
  width: 120px;
}

/* Commercial notes under the pricing table. */
.pricing-note {
  margin-top: 32px;
  padding: 20px 24px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.7;
}

.pricing-note h3 {
  font-size: 1rem;
  margin-bottom: 10px;
}

.pricing-note ul {
  list-style: disc;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Decorative hero log line: it changes on a timer, so it is withheld from assistive technology. */
.live-feed-log {
  margin-top: 16px;
}

/* ==========================================================================
   Legal and policy pages
   ========================================================================== */

.legal-page {
  padding: 120px 0 80px;
}

.legal-header {
  max-width: 780px;
  margin-bottom: 32px;
}

.legal-header h1 {
  font-size: 2.3rem;
  margin-bottom: 12px;
}

.legal-meta {
  color: var(--text-muted);
  font-size: 0.9rem;
}

.legal-body {
  max-width: 780px;
  color: var(--text-secondary);
  line-height: 1.8;
}

.legal-body h2 {
  font-size: 1.35rem;
  margin: 40px 0 12px;
  color: var(--text-primary);
}

.legal-body h3 {
  font-size: 1.05rem;
  margin: 26px 0 8px;
  color: var(--text-primary);
}

.legal-body p,
.legal-body ul,
.legal-body ol {
  margin-bottom: 14px;
}

.legal-body ul,
.legal-body ol {
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.legal-body ul {
  list-style: disc;
}

.legal-body ol {
  list-style: decimal;
}

.legal-body a {
  color: var(--accent-cyan);
  text-decoration: underline;
}

.legal-body table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
  font-size: 0.9rem;
}

.legal-body th,
.legal-body td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-color);
  vertical-align: top;
}

.legal-body th {
  color: var(--text-primary);
  font-weight: 600;
}

.legal-callout {
  padding: 18px 22px;
  margin: 24px 0;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--accent-amber);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 0.92rem;
}

.legal-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--border-color);
  font-size: 0.9rem;
}

.legal-footer-links a {
  color: var(--accent-cyan);
}

/* ==========================================================================
   Sections added for the honest simulator, contact block and enquiry modal
   ========================================================================== */

.sim-note {
  color: var(--text-muted);
  font-size: 0.85rem;
  line-height: 1.65;
}

.sim-tabs-centered {
  justify-content: center;
  margin-bottom: 40px;
}

.sol-card {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  padding: 48px;
}

.sol-card-title {
  font-size: 1.8rem;
  margin-bottom: 16px;
}

.sol-card-text {
  color: var(--text-secondary);
  font-size: 1.05rem;
  max-width: 700px;
  margin: 0 auto 28px;
}

.contact-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-bottom: 32px;
}

@media (min-width: 900px) {
  .contact-card {
    grid-template-columns: 1fr 1fr;
  }
}

.contact-detail {
  padding: 28px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

.contact-detail h3 {
  font-size: 1.1rem;
  margin-bottom: 14px;
}

.contact-detail p {
  color: var(--text-secondary);
  margin-bottom: 18px;
}

.contact-detail ol {
  list-style: decimal;
  padding-left: 20px;
  color: var(--text-secondary);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.modal-title {
  font-size: 1.6rem;
  margin-bottom: 8px;
}

.modal-lede {
  color: var(--text-secondary);
  font-size: 0.95rem;
  margin-bottom: 24px;
}

.submit-button {
  width: 100%;
  margin-top: 10px;
}

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

.form-success {
  text-align: center;
  padding: 20px 0;
}

.form-success-mark {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.15);
  color: var(--accent-emerald);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  font-size: 1.8rem;
}

.form-success h4 {
  font-size: 1.3rem;
  margin-bottom: 8px;
}

.form-success p {
  color: var(--text-secondary);
  font-size: 0.95rem;
  margin-bottom: 20px;
}

.footer-note {
  color: var(--text-muted);
  font-size: 0.85rem;
  line-height: 1.7;
  margin-bottom: 12px;
}

.footer-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.footer-legal {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.noscript-note {
  padding: 16px 24px;
  background: #1f2937;
  color: #f8fafc;
  font-size: 0.9rem;
  text-align: center;
}

/* Amber figure in the ROI output, kept out of the markup as an inline style. */
.metric-amber {
  color: var(--accent-amber);
}