/*
  Synen Landing Page Theme
  Update CSS variables under :root and [data-theme="dark"] to change branding quickly.
*/

:root {
  color-scheme: dark;
  --color-bg: #000000;
  --showcase-anchor: calc(25vw);
  --showcase-panel-height: clamp(320px, 42vw, 520px);
  --showcase-panel-gap: clamp(24px, 1.5vw, 48px);
  --showcase-ghost-lead-width: clamp(200px, 30vw, 30vw);
  --showcase-ghost-trail-width: clamp(360px, 50vw, 50vw);
  /* toggle button specific variables (default: dark theme) */
  --toggle-bg: rgba(255,255,255,0.06);
  --toggle-text: #ffffff;
  --toggle-border: rgba(255,255,255,0.06);
  --color-surface: rgba(255, 255, 255, 0.04);
  --color-surface-subtle: rgba(255, 255, 255, 0.02);
  --color-surface-strong: #1b1b1f;
  --color-panel: linear-gradient(180deg, rgba(43, 42, 42, 0.92) 0%, rgba(10, 10, 10, 0.95) 100%);
  --color-panel-border: rgba(255, 255, 255, 0.12);
  --color-text: #f5f5f5;
  --color-text-muted: #bdbec5;
  --color-border: rgba(255, 255, 255, 0.12);
  --color-accent: #8fc6ff;
  --color-accent-strong: #193cb8;
  --color-accent-soft: rgba(143, 198, 255, 0.2);
  --color-button-text: #0d0d0d;
  --shadow-button: 0 18px 38px -22px rgba(25, 60, 184, 0.5);
  --shadow-button-hover: 0 24px 46px -22px rgba(25, 60, 184, 0.55);
  --shadow-soft: 0 28px 70px -45px rgba(0, 0, 0, 0.85);
  --shadow-strong: 0 38px 120px -60px rgba(0, 0, 0, 0.9);
  --hero-glow: rgba(143, 198, 255, 0.18);
  --hero-prompt-color: rgba(245,245,245,0.72);
  --hero-overlay: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.85) 75%);
  --hero-heading-gradient: linear-gradient(170deg, #a5d4ff 0%, #5a7ff4 50%, #1f4bff 100%);
  --color-hero-lead: rgba(245, 245, 245, 0.78);
  --color-hero-bullet: rgba(245, 245, 245, 0.7);
  --color-hero-stat-label: rgba(245, 245, 245, 0.6);
  --layer-card-bg: linear-gradient(180deg, rgba(43, 42, 42, 0.92) 0%, rgba(14, 14, 15, 0.96) 100%);
  --layer-card-border: rgba(255, 255, 255, 0.08);
  --layer-card-glow: radial-gradient(circle at 20% -10%, rgba(143, 198, 255, 0.12), transparent 50%);
  --cta-background: linear-gradient(135deg, rgba(143, 198, 255, 0.22) 0%, rgba(12, 23, 68, 0.88) 80%);
  --font-sans: 'Futura', 'Futura PT', 'Avenir Next', 'Century Gothic', 'Inter', sans-serif;
  --font-display: 'Futura', 'Futura PT', 'Avenir Next', 'Century Gothic', 'Inter', sans-serif;
  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-sm: 10px;
  --max-width: 1160px;
  --section-spacing: clamp(2rem, 5vw, 9rem);
  --grid-gap: clamp(1.75rem, 4.5vw, 3.5rem);
  --transition: 160ms ease;
  --monitoring-video-stick-distance: clamp(360px, 45vw, 640px);
  --monitoring-block-gap: clamp(3rem, 6vw, 4.5rem);
  --monitoring-shrink-distance: clamp(320px, 60vh, 520px);
  --monitoring-video-full-height: 100vh;
  --monitoring-sticky-height: calc(var(--monitoring-video-full-height) + var(--monitoring-shrink-distance));
  --monitoring-copy-scroll: 1000px;
}


/* Remove dividing lines globally by making border vars transparent */
:root {
  --color-border: transparent !important;
  --layer-card-border: transparent !important;
  --color-panel-border: transparent !important;
}

@media (max-width: 768px) {
  :root {
    --monitoring-video-stick-distance: clamp(240px, 70vh, 360px);
  }
}

.hero-explore-prompt {
  color: var(--hero-prompt-color);
}

html[data-theme="dark"] .hero-explore-prompt {
  --hero-prompt-color: rgba(255,255,255,0.72); /* pale in dark mode */
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  max-width: 100vw;
}

img, picture, video {
  display: block;
  max-width: 100%;
}

/* dark-mode: allow a tiny visible overflow so gradient text glyphs near the
   edge are not clipped by the hero container */
html[data-theme="dark"] .hero {
  overflow: visible !important;
}

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

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

p {
  margin: 0;
  line-height: 1.65;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  letter-spacing: -0.02em;
  color: var(--color-text);
}

h1 {
  font-size: clamp(2rem, 3.5vw, 2.8rem);
}

h2 {
  font-size: clamp(2rem, 3.5vw, 2.8rem);
}

h3 {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
}

ul {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--color-text-muted);
  line-height: 1.6;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  padding: 0.75rem 1rem;
  background: var(--color-accent);
  color: #fff;
  border-radius: var(--radius-sm);
  z-index: 999;
}

.skip-link:focus {
  left: 1rem;
}

.container {
  width: min(100% - clamp(2rem, 8vw, 5.5rem), var(--max-width));
  margin-inline: auto;
}

.hero .container {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(18px);
  background: color-mix(in srgb, var(--color-surface-strong) 88%, transparent);
  border-bottom: 1px solid transparent;
}

/* Centered rounded headbar (visual template from user attachment)
   - keeps existing markup and dropdown JS intact
   - places a rounded pill bar centered horizontally instead of full-width */
.site-header.centered-headbar {
  display: flex;
  justify-content: center; /* center the inner bar */
  background: transparent; /* outer area transparent so bar appears floating */
  transition: transform 260ms ease, opacity 220ms ease;
  will-change: transform;
}

.site-header.centered-headbar.headbar-hidden {
  transform: translateY(-110%);
  opacity: 0;
  pointer-events: none;
}

.site-header.centered-headbar .container {
  width: min(1200px, 92%);
  padding: 0.6rem 1rem;
  display: flex;
  justify-content: center;
  align-items: center; /* vertically center contents inside header */
}

.headbar-pill {
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 3vw, 2.25rem);
  padding: clamp(0.5rem, 1.2vw, 0.85rem) clamp(0.75rem, 2vw, 1.25rem);
  background: color-mix(in srgb, var(--color-surface-strong) 92%, transparent);
  border-radius: 36px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.04);
}

/* New: position brand left and actions right, pill centered and compact */
.site-header.centered-headbar {
  position: sticky;
  top: 0;
  --headbar-height: 56px; /* central control for pill/brand/action height */
  /* keep header height stable: include container vertical padding so min-height matches visual bar */
  --headbar-vertical-padding: 0.6rem; /* matches container padding-block */
  min-height: calc(var(--headbar-height) + (var(--headbar-vertical-padding) * 2));
  display: flex;
  align-items: center;
}

.site-header.centered-headbar .headbar-brand {
  position: absolute;
  left: clamp(0.75rem, 10vw, 10vw);
  z-index: 60;
  display: flex;
  align-items: center;
  height: var(--headbar-height);
  top: 50%;
  transform: translateY(-50%);
}

.site-header.centered-headbar .headbar-actions {
  position: absolute;
  right: clamp(1.25rem, 10vw, 10vw);
  z-index: 60;
  display: flex;
  gap: 0.75rem;
  align-items: center;
  height: var(--headbar-height);
  top: 50%;
  transform: translateY(-50%);
}

.site-header.centered-headbar .headbar-actions .button {
  padding: clamp(0.45rem, 1.2vw, 0.7rem) clamp(0.9rem, 2.4vw, 1.5rem);
  font-size: clamp(0.8rem, 1.6vw, 0.95rem);
}

/* micro-adjust: when expanded, nudge the brand/actions slightly down to eliminate tiny visual bump */
.site-header.centered-headbar.headbar-expanded .headbar-brand,
.site-header.centered-headbar.headbar-expanded .headbar-actions {
  transform: translateY(calc(-50% + 0px)); /* adjust 2px as needed */
}

.site-header.centered-headbar .language-switch__chevron {
  transition: opacity 200ms ease;
}

@media (max-width: 1200px) {
  .site-header.centered-headbar .language-switch__chevron {
    opacity: 0;
    width: 0;
    margin: 0;
  }
  .site-header.centered-headbar .headbar-actions {
    right: 1.25rem;
    gap: 0.35rem;
  }
  .site-header.centered-headbar .language-switch {
    margin-right: 0;
  }
  .site-header.centered-headbar .headbar-actions .button {
    min-width: 0;
  }
}

@media (max-width: 800px) {
  .site-header.centered-headbar .headbar-brand {
    left: -2rem;
  }

  .site-header.centered-headbar .headbar-actions,
  .site-header.centered-headbar .language-switch {
    display: none !important;
  }

  .site-header.centered-headbar .headbar-pill {
    background: transparent;
    box-shadow: none;
    border: 0;
    padding: 0;
    min-height: auto;
    justify-content: flex-end;
  }

  .site-header.centered-headbar .nav__toggle {
    position: absolute;
    right: 1.75rem;
    top: calc(var(--headbar-vertical-padding) + (var(--headbar-height) / 2));
    transform: translateY(-50%);
    width: auto;
    height: auto;
    padding: 0.25rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0;
    line-height: 0;
    color: #fff;
    transition: color var(--transition);
  }

  .site-header.centered-headbar .nav__toggle:hover,
  .site-header.centered-headbar .nav__toggle:focus-visible {
    color: var(--color-accent);
  }

  .site-header.centered-headbar .nav__toggle:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
  }

  .site-header.centered-headbar .nav__toggle-icon {
    width: 24px;
    height: 24px;
    stroke: currentColor;
    stroke-width: 2.4;
    fill: none;
    vector-effect: non-scaling-stroke;
    transition: stroke var(--transition);
  }

  .site-header.centered-headbar .headbar-pill .nav__menu {
    position: fixed;
    inset: 0;
    background: rgba(1, 1, 2, 0.96);
    padding: clamp(1.5rem, 6vw, 3rem);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 1.35rem;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 220ms ease, transform 220ms ease;
    z-index: 70;
  }

  .site-header.centered-headbar .headbar-pill .nav__menu.is-open {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transform: translateY(0);
  }

  .site-header.centered-headbar .headbar-pill .nav__menu .nav__item--has-dropdown > .nav__dropdown {
    display: none !important;
  }

  .site-header.centered-headbar .headbar-pill .nav__menu .nav__link {
    font-size: clamp(1.1rem, 5vw, 1.8rem);
    color: #f5f5f5;
    justify-content: flex-start;
  }

  .site-header.centered-headbar .headbar-pill .nav__menu a {
    color: #f5f5f5;
  }
}

body.nav-overlay-open {
  overflow: hidden;
}

/* keep the pill compact around the four core buttons */
.headbar-pill {
  margin-inline: auto;
  padding-inline: 0.9rem;
  transition: padding 600ms cubic-bezier(.2,.9,.2,1), box-shadow 600ms;
  max-width: none;
  width: auto;
  box-sizing: border-box;
  min-height: var(--headbar-height);
  display: inline-flex; /* center and shrink-wrap */
  align-items: center;
}

/* mobile fallback: brand and actions stay in flow */
.headbar-pill .nav {
  display: flex;
  align-items: center;
  gap: 2.25rem;
}

/* Evenly space the four main nav items and apply Futura display font
   - scoped to the centered headbar so it doesn't affect other nav instances */
.site-header.centered-headbar .headbar-pill .nav__menu {
  display: flex;
  align-items: center;
  justify-content: center; /* center group overall */
  gap: clamp(1rem, 2.6vw, 2.6rem); /* consistent spacing between items */
}

.site-header.centered-headbar .headbar-pill .nav__menu > * {
  /* make each top-level link take only the space it needs but keep visual rhythm */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: clamp(3rem, 5vw, 4.6rem); /* ensures roughly equal visual width for short labels */
}

.site-header.centered-headbar .headbar-pill .nav__link,
.site-header.centered-headbar .headbar-pill .nav__link--dropdown {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 600;
  font-size: clamp(0.9rem, 1.6vw, 1.05rem); /* consistent size matching attachment */
  color: rgba(57, 62, 75, 0.94);
  letter-spacing: -0.01em;
  padding: clamp(0.35rem, 1vw, 0.45rem) clamp(0.2rem, 0.7vw, 0.35rem); /* increase hit area */
}

/* Slightly increase emphasis on the middle item to match screenshot rhythm */
.site-header.centered-headbar .headbar-pill .nav__menu { font-weight: 600; }

/* Dark-mode: make centered headbar nav items white */
html[data-theme="dark"] .site-header.centered-headbar .headbar-pill .nav__menu .nav__link,
html[data-theme="dark"] .site-header.centered-headbar .headbar-pill .nav__menu .nav__link--dropdown {
  color: #ffffff;
}

/* ensure the login button stays at the right inside the pill */
.headbar-pill .nav__actions { margin-left: 1.25rem; }

@media (max-width: 800px) {
  .site-header.centered-headbar .container { width: 100%; padding-inline: 0.75rem; }
  .headbar-pill { gap: 1rem; padding: 0.6rem 0.9rem; }
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 1.2rem;
  gap: 1.5rem;
}

.nav__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.14em;
  font-size: 0.72rem;
  color: var(--color-accent);
}

.nav__logo-icon {
  display: block;
  height: clamp(200px, 20vw, 280px);
  width: auto;
}

.nav__tagline {
  font-size: 0.63rem;
  color: var(--color-text-muted);
}

.nav__menu {
  display: flex;
  align-items: center;
  gap: 2.5rem;
}

.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 1.1rem;
  color: var(--color-text-muted);
  transition: color var(--transition);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -0.55rem;
  width: 100%;
  height: 2px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--transition), opacity var(--transition);
  opacity: 0;
}

.nav__link:focus-visible,
.nav__link:hover {
  color: var(--color-accent);
}

.nav__link:focus-visible::after,
.nav__link:hover::after {
  opacity: 1;
  transform: scaleX(1);
}

.nav__item {
  position: relative;
  display: flex;
  align-items: center;
}

/* increase the reactive hit area between the trigger and dropdown on desktop
   by adding an invisible pseudo-element that sits between the trigger and menu.
   This prevents accidental hover gap close without moving the dropdown itself. */
@media (min-width: 1025px) {
  .nav__item--has-dropdown::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    /* place directly under the trigger, height covers the previous gap */
    top: calc(100% - 2px);
    height: 1rem; /* increase as needed to cover the gap */
    /* invisible but present in hit-testing */
    background: transparent;
    pointer-events: auto;
    /* ensure it doesn't capture clicks or block pointer to actual controls */
    z-index: 9;
  }
}

.nav__link--dropdown {
  flex-direction: row-reverse;
}

.nav__link--dropdown::before {
  content: none;
  width: 0.45rem;
  height: 0.45rem;
  border-right: 1.5px solid transparent;
  border-bottom: 1.5px solid transparent;
  transform: rotate(45deg) translateY(-0.15rem);
  transition: transform var(--transition);
  margin-bottom: 0.05rem;
}

.nav__dropdown {
  position: absolute;
  top: calc(100% + 0.95rem);
  left: 50%;
  transform: translate(-50%, -10px);
  display: grid;
  gap: 0.35rem;
  padding: 0.9rem 1rem;
  min-width: 220px;
  background: color-mix(in srgb, var(--color-surface-strong) 92%, transparent);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition), transform var(--transition);
  z-index: 10;
}

.nav__dropdown.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.nav__dropdown-item {
  background: none;
  border: 0;
  padding: 0.45rem 0.25rem;
  font: inherit;
  color: var(--color-text-muted);
  text-align: left;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background var(--transition), color var(--transition);
}

.nav__dropdown-item:hover,
.nav__dropdown-item:focus-visible {
  background: rgba(143, 198, 255, 0.12);
  color: var(--color-text);
}

.nav__item--has-dropdown:focus-within > .nav__dropdown,
.nav__item--has-dropdown:hover > .nav__dropdown {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
    width: 100%;
    max-width: 100%;
  }

.nav__toggle {
  display: none;
  background: var(--color-surface);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 0.6rem 1rem;
  font-size: 0.95rem;
  color: var(--color-text);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.7rem 1.5rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 600;
  font-size: 0.95rem;
  transition: transform var(--transition), border-color var(--transition), background var(--transition);
}

.button--primary {
  background: var(--color-accent);
  color: var(--color-button-text);
  box-shadow: var(--shadow-button);
}

.button--primary:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-button-hover);
}

.button--ghost {
  border-color: transparent;
  background: transparent;
  color: var(--color-text);
}

.button--ghost:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: rgba(143, 198, 255, 0.08);
}

.theme-toggle {
  border: 1px solid var(--toggle-border);
  border-radius: 999px;
  padding: 0.65rem 1rem;
  background: var(--toggle-bg);
  color: var(--toggle-text);
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
}

.theme-toggle:hover {
  border-color: var(--color-accent);
  transform: translateY(-1px);
}

.language-switch {
  position: relative;
}

.language-switch__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.25rem, 0.8vw, 0.35rem);
  border: none;
  background: transparent;
  color: var(--color-text);
  padding: clamp(0.3rem, 0.9vw, 0.48rem) clamp(0.3rem, 0.8vw, 0.44rem) clamp(0.1rem, 0.6vw, 0.2rem);
  min-height: clamp(34px, 6vw, 42px);
  cursor: pointer;
  transition: color var(--transition), transform var(--transition);
}

.language-switch__trigger:hover,
.language-switch.language-switch--open .language-switch__trigger {
  color: var(--color-accent);
  transform: translateY(-1px);
}

.language-switch__icon svg {
  width: clamp(20px, 4vw, 28px);
  height: clamp(20px, 4vw, 28px);
  stroke: currentColor;
  stroke-width: 1.5;
  fill: none;
  vector-effect: non-scaling-stroke;
}

.language-switch__chevron svg {
  width: clamp(16px, 3vw, 22px);
  height: clamp(16px, 3vw, 22px);
  stroke: currentColor;
  stroke-width: 1.5;
  fill: none;
  vector-effect: non-scaling-stroke;
}

.language-switch__icon svg *,
.language-switch__chevron svg * {
  stroke-linecap: round;
  stroke-linejoin: round;
}

.language-switch__dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 0.45rem);
  background: var(--color-surface-strong);
  border-radius: 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0.35rem;
  min-width: 140px;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity var(--transition), transform var(--transition);
  z-index: 120;
}

.language-switch--open .language-switch__dropdown {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.language-switch__option {
  border: none;
  background: transparent;
  color: var(--color-text);
  text-align: left;
  padding: 0.55rem 0.9rem;
  border-radius: 0.65rem;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.language-switch__option:hover,
.language-switch__option:focus-visible,
.language-switch__option.is-active {
  outline: none;
  background: rgba(143, 198, 255, 0.15);
  color: var(--color-accent);
}

.language-switch__check {
  width: 18px;
  height: 18px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity var(--transition);
}

.language-switch__check svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  stroke-width: 2.2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.language-switch__option.is-active .language-switch__check {
  opacity: 1;
}

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-block: clamp(6rem, 12vw, 10rem);
  background: var(--color-bg);
  color: var(--color-text);
  overflow: hidden;
}

/* dark-mode: allow a tiny visible overflow so gradient text glyphs near the
   edge are not clipped by the hero container */
html[data-theme="dark"] .hero {
  overflow: visible;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to bottom,
      color-mix(in srgb, var(--hero-glow) 78%, transparent) 0%,
      transparent 24%
    ),
    radial-gradient(
      circle at 18% 10%,
      color-mix(in srgb, var(--hero-glow) 88%, transparent) 0%,
      transparent 72%
    );
  pointer-events: none;
  z-index: 0;
}

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to top,
      color-mix(in srgb, rgba(0, 0, 0, 0.85) 58%, transparent) 0%,
      transparent 32%
    );
  pointer-events: none;
  z-index: 0;
}

.hero__background {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

.hero__canvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* Dark mode: remove any hero background gradients/overlays */
html[data-theme="dark"] .hero::before,
html[data-theme="dark"] .hero::after {
  background: none !important;
}


.hero h1 {
  max-width: 18ch;
  line-height: 1.3;
  /* hero heading background and color controlled via variables */
  background: var(--hero-heading-bg, var(--hero-heading-gradient));
  background-clip: text;
  -webkit-background-clip: text;
  color: var(--hero-headline-color, transparent);
}

.eyebrow,
.section__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 1rem;
  color: var(--color-text-muted);
}

/* visible state when JS toggles the class */
.hero-synen.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* TODO: add animation */
.hero__lead {
  font-size: 1.55rem;
  color: var(--color-hero-lead);
  letter-spacing: 0.12em;
  max-width: 36ch;
} 

.hero__bullets {
  list-style: none;
  padding-left: 0;
  display: grid;
  gap: 0.85rem;
  color: var(--color-hero-bullet);
  font-size: 0.95rem;
}

.hero__bullets li {
  position: relative;
  padding-left: 1.4rem;
}

.hero__bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.45rem;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--color-accent) 45%, transparent);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2.25rem;
  align-items: flex-start;
  border-top: 1px solid transparent;
  padding-top: 1.75rem;
}

.hero__stat {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 150px;
}

.hero__stat-number {
  font-size: 2.05rem;
  font-weight: 600;
  color: var(--color-text);
}

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

.hero__note {
  font-size: 0.75rem;
  color: var(--color-hero-stat-label);
  max-width: 32ch;
}

.section {
  padding-block: var(--section-spacing);
}

/* Increase the gap before the first section ("Highlights") to extend scroll distance */



.hero + .section {
  /* Further reduced spacer (~48% of original values) */
  padding-top: clamp(4.5rem, 48vh, 51vh);
}

@media (max-width: 720px) {
  .hero + .section {
    /* Smaller but still substantial on mobile */
    padding-top: clamp(2.7rem, 9.6vh, 12.8vh);
  }
}


.section + .section {
  border-top: 1px solid transparent;
}

.section--alt {
  background: color-mix(in srgb, var(--color-surface) 75%, transparent);
}

/* Pricing should match Highlights background */
#pricing {
  background: transparent; /* same as default .section used by Highlights */
}

.section--subtle {
  background: color-mix(in srgb, var(--color-surface-subtle) 65%, transparent);
}

.section__header {
  max-width: 620px;
  display: grid;
  gap: 1.25rem;
  margin-bottom: clamp(2.5rem, 6vw, 3.5rem);
}

.section__lead {
  color: var(--color-text-muted);
  font-size: 1.05rem;
}

.trust__logos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1.5rem;
  align-items: center;
}

.trust__logo {
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: 1.5rem;
  font-weight: 600;
  text-align: center;
  background: color-mix(in srgb, var(--color-surface-strong) 92%, transparent);
  color: var(--color-text-muted);
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--grid-gap);
}

.feature-card {
  background: var(--layer-card-bg);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: 1.9rem;
  display: grid;
  gap: 1rem;
  position: relative;
  overflow: hidden;
  transition: transform var(--transition), border-color var(--transition);
  box-shadow: none;
  isolation: isolate;
}

.feature-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--layer-card-glow);
  opacity: 0.6;
  pointer-events: none;
  z-index: 0;
}

.feature-card > * {
  position: relative;
  z-index: 1;
}

.feature-card:hover {
  transform: translateY(-2px);
  border-color: var(--color-accent);
}

.feature-card ul {
  list-style-type: '– ';
  padding-left: 1.1rem;
  color: var(--color-text-muted);
}

.feature-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-accent-soft);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  justify-self: start;
}

.section--split {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(0, 0, 0, 0) 100%);
}

.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grid-gap);
  align-items: start;
}

.list {
  display: grid;
  gap: 0.8rem;
  color: var(--color-text-muted);
  padding-left: 1.1rem;
}

.list strong {
  color: var(--color-text);
}

.media-card {
  position: relative;
  border-radius: var(--radius-lg);
  background: var(--layer-card-bg);
  min-height: 320px;
  display: grid;
  place-items: center;
  padding: 2.25rem;
  text-align: center;
  color: var(--color-text-muted);
  border: 1px solid transparent;
  box-shadow: none;
  overflow: hidden;
  isolation: isolate;
}

.media-card__shine {
  display: none;
}

.tech-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--grid-gap);
}

.tech-card {
  padding: 1.6rem;
  border-radius: var(--radius-md);
  background: var(--layer-card-bg);
  border: 1px solid transparent;
  color: var(--color-text-muted);
  display: grid;
  gap: 0.75rem;
  transition: border-color var(--transition), transform var(--transition);
  box-shadow: none;
}

.tech-card h3 {
  color: var(--color-text);
}

.tech-card:hover {
  border-color: var(--color-accent);
  transform: translateY(-2px);
}

.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--grid-gap);
  align-items: start;
}

.metrics__stat {
  display: grid;
  gap: 0.4rem;
  padding-block: 1rem;
  border-top: 1px solid transparent;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

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

.metrics__value {
  font-size: 1.85rem;
  font-weight: 600;
  color: var(--color-text);
}

.metrics__note {
  grid-column: 1 / -1;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-top: 0.2rem;
}

.showcase__intro {
  max-width: clamp(280px, 40vw, 560px);
  margin-left: var(--showcase-anchor);
  margin-right: clamp(2rem, 8vw, 5.5rem);
  padding-inline: 0;
  display: grid;
  gap: 1rem;
}

.showcase__intro .section__title {
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  text-transform: uppercase;
  letter-spacing: 0.26em;
  color: var(--color-accent);
}

.showcase__intro .section__lead {
  font-size: clamp(1rem, 2vw, 1.35rem);
  line-height: 1.4;
  color: var(--color-text);
}

.showcase-rail {
  position: relative;
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
}

.showcase-rail__scroller {
  display: flex;
  gap: var(--showcase-panel-gap);
  overflow-x: auto;
  scroll-snap-type: none;
  overscroll-behavior-x: contain;
  padding-block: clamp(1.75rem, 4vw, 2.75rem);
  padding-left: 0;
  padding-right: 0;
  scroll-padding-left: 0;
  scroll-padding-right: 0;
  scrollbar-width: none;
}

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

.showcase-panel {
  display: flex;
  flex-direction: column;
  gap: clamp(0.75rem, 1.8vw, 1.2rem);
  flex: 0 0 auto;
  width: fit-content;
  max-width: none;
  scroll-snap-align: none;
  cursor: pointer;
  transition: transform var(--transition);
}

.showcase-panel--ghost {
  opacity: 0;
  pointer-events: none;
  transform: none !important;
}

.showcase-panel--ghost .showcase-panel__placeholder,
.showcase-panel--ghost .showcase-panel__caption {
  visibility: hidden;
}

.showcase-panel--ghost-lead {
  flex: 0 0 var(--showcase-ghost-lead-width);
  min-width: var(--showcase-ghost-lead-width);
}

.showcase-panel--ghost-trail {
  flex: 0 0 var(--showcase-ghost-trail-width);
  min-width: var(--showcase-ghost-trail-width);
}

.showcase-panel:hover,
.showcase-panel:focus-visible {
  transform: translateY(-4px);
  outline: none;
}

.showcase-panel__placeholder {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--showcase-panel-height);
  width: auto;
}

.showcase-panel__image {
  height: 100%;
  width: auto;
  max-width: none;
  object-fit: contain;
}

.showcase-panel__caption {
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--color-text);
  padding-left: 0.4rem;
}

.showcase-rail__controls {
  position: absolute;
  top: calc(-1 * clamp(3.25rem, 5vw, 3.75rem));
  left: 75vw;
  transform: translateX(-50%);
  display: flex;
  gap: 0.25rem;
  z-index: 2;
}

@media (max-width: 880px) {
  .showcase-rail__controls {
    left: auto;
    right: clamp(2rem, 8vw, 5.5rem);
    transform: none;
  }
  .showcase-rail__scroller {
    padding-left: var(--showcase-anchor);
    padding-right: var(--showcase-anchor);
  }
}

@media (max-width: 640px) {
  .showcase-panel {
    width: 100%;
    max-width: 100%;
  }
}

.showcase__nav {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid transparent;
  background: color-mix(in srgb, var(--color-surface) 90%, transparent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
}

.showcase__nav:hover {
  border-color: var(--color-accent);
  transform: translateY(-5%) scale(1.05);
}

.showcase__nav::before {
  content: '';
  width: 10px;
  height: 10px;
  /* visible chevron using the text color by default */
  border-top: 2px solid var(--color-text);
  border-right: 2px solid var(--color-text);
}

.showcase__nav:hover::before {
  border-top-color: var(--color-accent);
  border-right-color: var(--color-accent);
}

.showcase__nav--prev::before {
  transform: rotate(-135deg);
}

.showcase__nav--next::before {
  transform: rotate(45deg);
}

.placeholder-block {
  display: grid;
  gap: 1rem;
  /* make placeholders much larger on desktop */
  max-width: 1200px;
  padding-top: 0.5rem;
}

/* Large, responsive image area for all three placeholder blocks */
.placeholder-block__image {
  width: clamp(320px, 50vw, 50vw);
  margin-inline: auto;
  aspect-ratio: 16 / 9; /* big hero-like preview */
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--layer-card-bg);
  justify-self: center;
}

.placeholder-block__image--video {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  margin-top: 300px;
  margin-bottom: 0;
  border-radius: 0;
  overflow: visible;
  position: relative;
  background: transparent;
  min-height: 0;
}

.placeholder-block__image > picture,
.placeholder-block__image > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.placeholder-block__video {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

.data-sequence {
  position: relative;
  min-height: 200vh;
}

.data-sequence__pin {
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 2.5rem) 0;
}

.data-sequence__viewport {
  width: clamp(1000px, 80vw, 80vw);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

#intelligent-control-block .data-sequence__viewport {
  flex-direction: row;
  align-items: stretch;
  gap: clamp(1.5rem, 3vw, 4rem);
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  justify-content: flex-start;
}

#intelligent-control-block {
  --market-text-scale: 1;
  --market-video-column: 50vw;
  --market-copy-column: 36vw;
}

#intelligent-control-block .data-sequence__copy {
  flex: 0 0 var(--market-copy-column, 36vw);
  max-width: none;
  order: 1;
  margin-left: clamp(1rem, 10vw, 10vw);
  margin-right: clamp(1rem, 3vw, 3.5rem);
}
#intelligent-control-block .data-sequence__copy h3 {
  color: var(--color-accent);
}
#trading-platform-block .data-sequence__copy h3 {
  color: var(--color-accent);
}

#intelligent-control-block .data-sequence__stack {
  flex: 0 0 var(--market-video-column, 50vw);
  margin-inline: 0;
  margin-left: auto;
  margin-right: clamp(-6rem, -7vw, -4rem);
  margin-top: clamp(3rem, 5vw, 5rem);
  order: 2;
  transform-origin: center right;
  transform: scale(1.15);
  position: relative;
  overflow: visible;
  align-self: center; /* stop stretching so its center can align with the text column */
}

#intelligent-control-block .data-sequence__stack {
  border-radius: var(--radius-lg);
}

#intelligent-control-block .data-sequence__copy {
  position: relative;
  z-index: 2;
}

#intelligent-control-block .data-sequence__stack {
  position: relative;
  z-index: 1;
}

#trading-platform-block {
  --trading-text-scale: 1;
  /* Size placeholder to the first video's aspect ratio: target ~52vh height */
  --trading-video-column: clamp(520px, calc(var(--data-sequence-aspect, 16 / 9) * 52vh), 62vw);
  --trading-copy-column: 36vw;
}

#trading-platform-block .data-sequence__viewport {
  /* mirror Market Data layout: horizontal split, full-bleed viewport */
  flex-direction: row;
  align-items: stretch;
  gap: clamp(0.5rem, 1vw, 1.5rem); /* move video placeholder even closer to text */
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  justify-content: flex-start;
}

#trading-platform-block .data-sequence__copy {
  flex: 0 0 var(--trading-copy-column, 36vw);
  max-width: none;
  order: 2; /* text on the right */
  margin-left: clamp(0.25rem, 1vw, 1rem); /* move even closer to the video placeholder */
  margin-right: clamp(1rem, 10vw, 10vw);
  position: relative;
  z-index: 2; /* keep text in front of the video layer */
}

/* Pinned stage: pull video and text even closer together without changing placeholder size */
#trading-platform-block .data-sequence.is-pinned .data-sequence__viewport {
  gap: clamp(0.1rem, 0.4vw, 0.75rem);
}

#trading-platform-block .data-sequence.is-pinned .data-sequence__copy {
  margin-left: clamp(0rem, 0.25vw, 0.35rem);
  margin-right: clamp(0.5rem, 5vw, 6rem);
}

#trading-platform-block .data-sequence.is-pinned .data-sequence__stack {
  margin-left: clamp(0.5rem, 1vw, 1.25rem);
  margin-right: clamp(0.25rem, 0.8vw, 1rem);
}

#trading-platform-block .data-sequence__stack {
  flex: 0 0 var(--trading-video-column, 50vw);
  margin-inline: 0;
  margin-left: clamp(1.25rem, 4vw, 5rem); /* persistent left margin for the video */
  margin-right: auto; /* keep text separated */
  margin-top: clamp(3rem, 5vw, 5rem);
  order: 1; /* video on the left */
  transform-origin: center left;
  transform: scale(var(--trading-scale, 1)); /* allow responsive scaling */
  position: relative;
  overflow: hidden; /* allow corner radius to clip the video */
  z-index: 1; /* sit behind the text layer */
  align-self: center; /* center vertically with the text */
  border-radius: clamp(18px, 3vw, 28px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}

.data-sequence__stack {
  position: relative;
  width: 100%;
  aspect-ratio: var(--data-sequence-aspect, 16 / 9);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: transparent;
  box-shadow: 0 45px 120px rgba(0, 0, 0, 0.55);
  margin-inline: auto;
}

.data-sequence__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1s ease;
}

/* Show trading videos at full frame without cropping while keeping the placeholder size */
#trading-platform-block .data-sequence__video {
  object-fit: contain;
  border-radius: inherit; /* preserve rounded corners */
}

.data-sequence__copy {
  max-width: 620px;
  margin-left: 0;
  text-align: left;
}

.data-sequence__copy .eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 0.5rem;
}

.data-sequence__copy h3 {
  margin-bottom: 0.75rem;
}

.data-sequence__copy p {
  color: var(--color-text-muted);
}

#trading-platform-block .trading-sequence-copy {
  display: flex;
  flex-direction: column;
  gap: 0.9rem; /* further tighten spacing */
}

.trading-heading {
  margin-top: clamp(0.6rem, 2vw, 1.2rem); /* bring Trading Strategy even closer to the section heading */
  margin-bottom: 0rem !important;
}

.market-story.trading-story {
  display: none;
}

.market-story.trading-story.is-active {
  display: flex;
}

.data-sequence__video--image {
  object-fit: contain;
  background: #000;
}

@media (max-width: 768px) {
  .data-sequence__viewport {
    gap: 0.75rem;
    width: 100%;
    max-width: 100%;
  }

  .data-sequence__copy {
    text-align: left;
    margin-left: 0;
  }

  #intelligent-control-block .data-sequence__viewport {
    flex-direction: column;
    width: 100%;
    margin-left: 0;
  }

  #trading-platform-block .data-sequence__viewport {
    flex-direction: column;
    width: 100%;
    margin-left: 0;
  }

  #intelligent-control-block .data-sequence__copy,
  #intelligent-control-block .data-sequence__stack {
    width: 100%;
    flex: 1 1 auto;
  }

  #trading-platform-block .data-sequence__copy,
  #trading-platform-block .data-sequence__stack {
    width: 100%;
    flex: 1 1 auto;
  }

  #intelligent-control-block .data-sequence__copy {
    order: 1;
    margin-left: 0;
    margin-right: 0;
  }

  #trading-platform-block .data-sequence__copy {
    order: 1;
    margin-left: 0;
    margin-right: 0;
  }

  #intelligent-control-block .data-sequence__stack {
    order: 2;
    margin-left: 0;
  }

  #trading-platform-block .data-sequence__stack {
    order: 2;
    margin-left: 0;
  }
}

@media (max-width: 1000px) {
  #intelligent-control-block {
    --market-text-scale: 0.88;
  }

  #intelligent-control-block .data-sequence__viewport {
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-left: 0;
    gap: clamp(1.25rem, 4vw, 2.5rem);
  }

  #trading-platform-block .data-sequence__viewport {
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-left: 0;
    gap: clamp(1.25rem, 4vw, 2.5rem);
  }

  #intelligent-control-block .data-sequence__stack {
    order: 1;
    flex: none;
    width: min(720px, calc(100% - 3rem));
    margin: clamp(2rem, 4vw, 3rem) auto clamp(1.25rem, 3vw, 2rem);
    transform-origin: center;
    transform: scale(0.95);
    align-self: center;
    --market-tabs-width: calc(100% * 0.85);
  }

  #trading-platform-block .data-sequence__stack {
    order: 1;
    flex: none;
    width: clamp(480px, 62vw, 600px); /* continue shrinking from desktop as viewport narrows */
    margin: clamp(2rem, 4vw, 3rem) auto clamp(1.25rem, 3vw, 2rem);
    transform-origin: center;
    --trading-scale: clamp(0.9, calc(0.72 + 0.00028 * 100vw), 1); /* gradual scale from 1000px down to ~480px */
    transform: scale(var(--trading-scale, 0.9));
    align-self: center;
  }

  /* Pinned state overrides inside small-view layouts */
  #trading-platform-block .data-sequence.is-pinned .data-sequence__viewport {
    gap: clamp(0.35rem, 1.5vw, 0.85rem);
  }

  #trading-platform-block .data-sequence.is-pinned .data-sequence__copy {
    margin-left: clamp(0rem, 0.2vw, 0.3rem);
    margin-right: clamp(0.4rem, 4vw, 5rem);
  }

  #trading-platform-block .data-sequence.is-pinned .data-sequence__stack {
    margin-left: clamp(0.35rem, 0.8vw, 1rem);
    margin-right: clamp(0.2rem, 0.6vw, 0.8rem);
  }

  #intelligent-control-block .data-sequence__copy {
    order: 2;
    flex: none;
    width: min(720px, calc(100% - 3rem));
    margin: 0 auto;
    padding-inline: 1.5rem;
  }

  #trading-platform-block .data-sequence__copy {
    order: 2;
    flex: none;
    width: min(720px, calc(100% - 3rem));
    margin: 0 auto;
    padding-inline: 1.5rem;
  }

  /* Keep trading video in the top half (with 56px top margin) during pinned stage on small viewports */
  #trading-platform-block .data-sequence__pin {
    align-items: flex-start;
    padding-top: 56px;
  }

  #trading-platform-block .data-sequence__stack {
    height: calc(50vh - 56px);
    max-height: calc(50vh - 56px);
    min-height: calc(50vh - 56px);
    margin-top: clamp(0.75rem, 3vw, 1.5rem); /* nudge video downward on small screens */
  }

  .market-story {
    margin-top: 0.1rem;
    gap: 0.5rem;
  }

  .market-data-heading {
    margin-bottom: 0.5rem;
  }

  .market-story__quote {
    line-height: 1.35;
  }

  .market-story__body {
    line-height: 1.5;
  }
}

.market-story {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.market-story__title {
  font-size: calc(1.5rem * var(--market-text-scale, 1));
  letter-spacing: 0.08em;
  text-transform: capitalize;
  color: var(--color-text-muted);
}

.market-data-heading {
  --market-heading-size: clamp(1.1rem, 2vw, 1.35rem);
  font-size: calc(var(--market-heading-size) * var(--market-text-scale, 1));
  text-transform: uppercase;
  letter-spacing: 0.26em;
  color: var(--color-accent);
}

.market-story__quote {
  font-size: calc(1.25rem * var(--market-text-scale, 1));
  line-height: 1.5;
}

.market-story__divider {
  font-size: calc(0.9rem * var(--market-text-scale, 1));
  letter-spacing: 0.8em;
  color: var(--color-text-muted);
}

.market-story__body {
  font-size: calc(1rem * var(--market-text-scale, 1));
  color: var(--color-text-muted);
  line-height: 1.7;
}

@media (max-width: 480px) and (max-height: 1000px) {
  .market-story__body {
    display: none; /* hide story copy on compact mobile layout */
  }
  .market-story__divider {
    display: none; /* remove decorative line on compact mobile layout */
  }
}

.market-word {
  opacity: 0;
  transition: opacity 0.25s ease;
}

.market-word.is-visible {
  opacity: 1;
}

.market-tabs {
  position: absolute;
  top: -10%;
  left: 0;
  width: 85%;
  max-width: 85%;
  z-index: 2;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: clamp(0.15rem, 0.9vw, 0.45rem);
  padding: 0.3rem clamp(0.4rem, 1.4vw, 0.75rem);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(12px);
  white-space: nowrap;
  transform: none;
  box-sizing: border-box;
}

@media (max-width: 1000px) {
  #intelligent-control-block .market-tabs {
    left: 50%;
    transform: translateX(-50%);
    width: var(--market-tabs-width, 85%);
    max-width: var(--market-tabs-width, 85%);
    justify-content: center;
    gap: clamp(0.6rem, 1.8vw, 0.75rem);
  }
}

@media (max-width: 480px) {
  #intelligent-control-block .market-tabs {
    top: auto;
    bottom: calc(100% + 0.8rem); /* fixed spacing above the video on very small screens */
    flex-wrap: wrap;
    white-space: normal;
  }
}

.market-tab {
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(12, 12, 14, 0.7);
  color: var(--color-text-muted);
  padding: clamp(0.2rem, 0.5vw, 0.55rem) clamp(0.5rem, 1.1vw, 1.6rem);
  border-radius: 999px;
  font-size: clamp(0.65rem, 0.8vw, 0.82rem);
  letter-spacing: clamp(0.035em, 0.1vw, 0.09em);
  text-transform: capitalize;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
  text-align: center;
  white-space: nowrap;
  flex: 0 0 auto;
}

.market-tab.is-active {
  background: color-mix(in srgb, var(--color-accent) 18%, transparent);
  color: var(--color-accent);
  border-color: rgba(255, 255, 255, 0.4);
}

.market-tab:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

@media (max-width: 1200px) and (min-width: 1000px) {
  #intelligent-control-block {
    --market-video-column: clamp(50vw, calc(-9vw + 708px), 61.8vw);
    --market-copy-column: calc(100vw - var(--market-video-column));
    --market-text-scale: clamp(0.88, calc(0.28 + 0.0006 * 100vw), 1);
  }

  #intelligent-control-block .data-sequence__stack {
    margin-right: clamp(-3.5rem, -2vw, -1rem);
  }

  #intelligent-control-block .data-sequence__copy {
    margin-left: clamp(0.75rem, 3vw, 4vw);
    margin-right: clamp(0.5rem, 1.5vw, 1.75rem);
  }
}
.monitoring-video-frame {
  position: sticky;
  top: 0;
  width: 105vw;
  min-width: 105vw;
  max-width: 105vw;
  margin-left: calc(50% - 52.5vw);
  margin-right: calc(50% - 52.5vw);
  z-index: 3;
  border-radius: 0;
  overflow: hidden;
  pointer-events: auto;
}

.monitoring-video-frame--fixed {
  position: fixed;
  margin-left: 0;
  margin-right: 0;
}

.monitoring-video-frame video {
  width: 100%;
  height: auto;
  display: block;
}

#monitoring-block {
  position: relative;
  overflow: visible;
  padding-bottom: calc(var(--monitoring-copy-scroll) + clamp(4rem, 10vh, 6rem));
}

#intelligent-control-block {
  position: relative;
  z-index: 0;
  background: #000;
  padding-top: clamp(0rem, 0vh, 2.5rem);
}

#intelligent-control-block::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
  transition: opacity 350ms ease;
  pointer-events: none;
  z-index: 5;
}

#intelligent-control-block[data-market-blackout='true']::after {
  opacity: 1;
}

.monitoring-experience {
  position: relative;
  --monitoring-container-width: min(100% - clamp(2rem, 8vw, 5.5rem), var(--max-width));
  --monitoring-text-scale: clamp(0.85, calc(0.28 + 0.0006 * (100vw / 1px)), 1.05);
  --monitoring-video-column: 60vw;
  --monitoring-copy-gap: 2rem;
  width: var(--monitoring-container-width);
  margin-inline: auto;
  min-height: calc(100vh + var(--monitoring-copy-scroll));
}

.monitoring-experience__media {
  position: relative;
}

.monitoring-experience__copy {
  position: relative;
  padding-top: 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  opacity: 0;
  transition: opacity 280ms ease;
}

.monitoring-experience__copy.is-active {
  opacity: 1;
}

.monitoring-copy__pin {
  display: contents;
}

.monitoring-copy__title {
  font-size: calc(clamp(1.1rem, 2vw, 1.4rem) * var(--monitoring-text-scale, 1));
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0 0 1.2rem 0;
}

.monitoring-copy__line {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0;
}

.monitoring-copy__line + .monitoring-copy__line {
  margin-top: 1.4rem;
}

.monitoring-copy__subheading {
  font-size: calc(clamp(1.05rem, 2vw, 1.2rem) * var(--monitoring-text-scale, 1));
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.01em;
}

.monitoring-copy__body {
  color: var(--color-text-muted);
  font-size: calc(1.05rem * var(--monitoring-text-scale, 1));
  line-height: 1.75;
  letter-spacing: -0.01em;
}

.monitoring-word {
  opacity: 0;
  transition: opacity 0.2s ease;
  display: inline;
}

.monitoring-word.is-visible {
  opacity: 1;
}

#monitoring-block .placeholder-block__image {
  margin-inline: auto;
  justify-self: center;
}

@media (min-width: 1500px) {
  .monitoring-experience {
    --monitoring-copy-gap: 2rem;
  }

  .monitoring-experience__copy {
    width: 35vw;
    max-width: 35vw;
    margin-left: calc(75vw - 17.5vw - ((100vw - var(--monitoring-container-width, 100vw)) / 2));
    margin-right: 0;
  }
}

/* small-screen layouts to be defined later */

/* Desktop: align Trading text center with Trading video */
@media (min-width: 1000px) {
  #trading-platform-block .data-sequence__viewport {
    align-items: center;
  }

  #trading-platform-block .data-sequence__stack,
  #trading-platform-block .data-sequence__copy {
    align-self: center;
  }

  #trading-platform-block .data-sequence__stack {
    margin-top: 0;
  }
}

@media (min-width: 1000px) and (max-width: 1500px) {
  .monitoring-experience {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    --monitoring-copy-gap: clamp(2rem, 3vw, 3.5rem);
  }

  .monitoring-experience.monitoring-experience--compact {
    --monitoring-video-column: clamp(50vw, calc(10vw + 600px), 61.8vw);
  }

  .monitoring-experience__copy {
    width: calc(100vw - var(--monitoring-video-column, 60vw) - var(--monitoring-copy-gap) * 2);
    margin-left: calc(var(--monitoring-video-column, 60vw) + var(--monitoring-copy-gap));
    margin-right: 8rem;
  }
}


.placeholder-block p {
  color: var(--color-text-muted);
}

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--grid-gap);
}

.about {
  display: grid;
  gap: clamp(2.5rem, 6vw, 3.5rem);
}

.about__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--grid-gap);
}

.about-card {
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: var(--layer-card-bg);
  padding: 2.25rem;
  display: grid;
  gap: 1.15rem;
  box-shadow: var(--shadow-soft);
}

.about-card h3 {
  font-size: 1.4rem;
}

.about-card p {
  color: var(--color-text-muted);
}

.testimonial-card {
  background: var(--layer-card-bg);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  padding: 1.9rem;
  display: grid;
  gap: 1.1rem;
  position: relative;
  overflow: hidden;
  box-shadow: none;
}

.testimonial-card::before {
  content: none;
}

.testimonial-card__quote {
  font-size: 1.05rem;
  color: var(--color-text);
}

.testimonial-card__meta {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  color: var(--color-text-muted);
}

.resource-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--grid-gap);
}

.resource-card {
  background: var(--layer-card-bg);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  padding: 1.75rem;
  display: grid;
  gap: 0.85rem;
  box-shadow: none;
}

.resource-card__type {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--color-text-muted);
  text-transform: uppercase;
}

.resource-card__link {
  color: var(--color-accent);
  font-weight: 600;
}

.pricing {
  display: grid;
  gap: var(--grid-gap);
  position: relative;
}

.pricing__tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--grid-gap);
}

.pricing-card {
  background: var(--layer-card-bg);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  padding: 2rem;
  display: grid;
  gap: 1.25rem;
  box-shadow: none;
}

.pricing-card__price {
  font-size: 1.5rem;
  font-weight: 600;
}

.pricing__options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--grid-gap);
  margin-top: clamp(2.5rem, 6vw, 3.5rem);
}

.pricing-option {
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: 2rem;
  background: var(--layer-card-bg);
  display: grid;
  gap: 1.25rem;
  box-shadow: var(--shadow-soft);
}

.pricing-option h3 {
  font-size: 1.35rem;
}

.pricing-option p {
  color: var(--color-text-muted);
}

#pricing {
  position: relative;
  overflow: visible;
}

.pricing__atmosphere {
  display: none;
}

.cta {
  position: relative;
  background: var(--cta-background);
}

.cta__content {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grid-gap);
  align-items: center;
}

.cta__form {
  display: grid;
  gap: 0.85rem;
  background: var(--layer-card-bg);
  border-radius: var(--radius-md);
  padding: 1.75rem;
  border: 1px solid transparent;
  box-shadow: none;
}

.cta__form input {
  padding: 0.85rem 1rem;
  border-radius: 999px;
  border: 1px solid transparent;
  background: color-mix(in srgb, var(--color-surface) 75%, transparent);
  color: var(--color-text);
  font-family: var(--font-sans);
}

.cta__privacy {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.site-footer {
  padding-block: 3rem;
  background: color-mix(in srgb, var(--color-surface-strong) 92%, transparent);
  color: var(--color-text-muted);
  border-top: 1px solid transparent;
}

.footer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--grid-gap);
}

.footer__brand {
  display: grid;
  gap: 0.75rem;
}

.footer__logo {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--color-text);
}

.footer__links,
.footer__social {
  display: grid;
  gap: 0.5rem;
}

.footer__links > div {
  display: grid;
  gap: 0.4rem;
}

.footer__links h3,
.footer__social h3 {
  font-size: 0.95rem;
  color: var(--color-text);
}

.footer__links a,
.footer__social a {
  color: var(--color-text-muted);
  transition: color var(--transition);
}

.footer__links a:hover,
.footer__social a:hover {
  color: var(--color-accent);
}

.footer__fineprint {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.media-card,
.feature-card,
.testimonial-card,
.tech-card,
.resource-card,
.metrics__stat,
.pricing-card,
.pricing-option,
.showcase__intro,
.showcase-panel,
.placeholder-block,
.about-card,
.cta__form {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 320ms ease, transform 320ms ease;
}

.media-card.is-visible,
.feature-card.is-visible,
.testimonial-card.is-visible,
.tech-card.is-visible,
.resource-card.is-visible,
.metrics__stat.is-visible,
.pricing-card.is-visible,
.pricing-option.is-visible,
.showcase__intro.is-visible,
.showcase-panel.is-visible,
.placeholder-block.is-visible,
.about-card.is-visible,
.cta__form.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 720px) {
  .split,
  .cta__content,
  .footer {
    grid-template-columns: 1fr;
  }

.trust__logos,
.feature-grid,
.tech-grid,
.metrics,
.testimonial-grid,
.resource-grid,
.pricing__tiers,
.pricing__options,
.about__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
}

body.nav-overlay-open {
  overflow: hidden;
}

/* keep the pill compact around the four core buttons */
.headbar-pill {
  margin-inline: auto;
  padding-inline: 0.9rem;
  transition: padding 600ms cubic-bezier(.2,.9,.2,1), box-shadow 600ms;
  max-width: none;
  width: auto;
  box-sizing: border-box;
  min-height: var(--headbar-height);
  display: inline-flex; /* center and shrink-wrap */
  align-items: center;
}

/* mobile fallback: brand and actions stay in flow */
.headbar-pill .nav {
  display: flex;
  align-items: center;
  gap: 2.25rem;
}

/* Evenly space the four main nav items and apply Futura display font
   - scoped to the centered headbar so it doesn't affect other nav instances */
.site-header.centered-headbar .headbar-pill .nav__menu {
  display: flex;
  align-items: center;
  justify-content: center; /* center group overall */
  gap: clamp(1rem, 2.6vw, 2.6rem); /* consistent spacing between items */
}

.site-header.centered-headbar .headbar-pill .nav__menu > * {
  /* make each top-level link take only the space it needs but keep visual rhythm */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: clamp(3rem, 5vw, 4.6rem); /* ensures roughly equal visual width for short labels */
}

.site-header.centered-headbar .headbar-pill .nav__link,
.site-header.centered-headbar .headbar-pill .nav__link--dropdown {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 600;
  font-size: clamp(0.9rem, 1.6vw, 1.05rem); /* consistent size matching attachment */
  color: rgba(57, 62, 75, 0.94);
  letter-spacing: -0.01em;
  padding: clamp(0.35rem, 1vw, 0.45rem) clamp(0.2rem, 0.7vw, 0.35rem); /* increase hit area */
}

/* Slightly increase emphasis on the middle item to match screenshot rhythm */
.site-header.centered-headbar .headbar-pill .nav__menu { font-weight: 600; }

/* Dark-mode: make centered headbar nav items white */
html[data-theme="dark"] .site-header.centered-headbar .headbar-pill .nav__menu .nav__link,
html[data-theme="dark"] .site-header.centered-headbar .headbar-pill .nav__menu .nav__link--dropdown {
  color: #ffffff;
}


/* ensure the login button stays at the right inside the pill */
.headbar-pill .nav__actions { margin-left: 1.25rem; }

@media (max-width: 800px) {
  .site-header.centered-headbar .container { width: 100%; padding-inline: 0.75rem; }
  .headbar-pill { gap: 1rem; padding: 0.6rem 0.9rem; }
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 1.2rem;
  gap: 1.5rem;
}

.nav__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.14em;
  font-size: 0.72rem;
  color: var(--color-accent);
}

.nav__logo-icon {
  display: block;
  height: clamp(200px, 20vw, 280px);
  width: auto;
}

.nav__tagline {
  font-size: 0.63rem;
  color: var(--color-text-muted);
}

.nav__menu {
  display: flex;
  align-items: center;
  gap: 2.5rem;
}

.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 1.1rem;
  color: var(--color-text-muted);
  transition: color var(--transition);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -0.55rem;
  width: 100%;
  height: 2px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--transition), opacity var(--transition);
  opacity: 0;
}

.nav__link:focus-visible,
.nav__link:hover {
  color: var(--color-accent);
}

.nav__link:focus-visible::after,
.nav__link:hover::after {
  opacity: 1;
  transform: scaleX(1);
}

.nav__item {
  position: relative;
  display: flex;
  align-items: center;
}

/* increase the reactive hit area between the trigger and dropdown on desktop
   by adding an invisible pseudo-element that sits between the trigger and menu.
   This prevents accidental hover gap close without moving the dropdown itself. */
@media (min-width: 1025px) {
  .nav__item--has-dropdown::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    /* place directly under the trigger, height covers the previous gap */
    top: calc(100% - 2px);
    height: 1rem; /* increase as needed to cover the gap */
    /* invisible but present in hit-testing */
    background: transparent;
    pointer-events: auto;
    /* ensure it doesn't capture clicks or block pointer to actual controls */
    z-index: 9;
  }
}

.nav__link--dropdown {
  flex-direction: row-reverse;
}

.nav__link--dropdown::before {
  content: none;
  width: 0.45rem;
  height: 0.45rem;
  border-right: 1.5px solid transparent;
  border-bottom: 1.5px solid transparent;
  transform: rotate(45deg) translateY(-0.15rem);
  transition: transform var(--transition);
  margin-bottom: 0.05rem;
}

.nav__dropdown {
  position: absolute;
  top: calc(100% + 0.95rem);
  left: 50%;
  transform: translate(-50%, -10px);
  display: grid;
  gap: 0.35rem;
  padding: 0.9rem 1rem;
  min-width: 220px;
  background: color-mix(in srgb, var(--color-surface-strong) 92%, transparent);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition), transform var(--transition);
  z-index: 10;
}

.nav__dropdown.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.nav__dropdown-item {
  background: none;
  border: 0;
  padding: 0.45rem 0.25rem;
  font: inherit;
  color: var(--color-text-muted);
  text-align: left;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background var(--transition), color var(--transition);
}

.nav__dropdown-item:hover,
.nav__dropdown-item:focus-visible {
  background: rgba(143, 198, 255, 0.12);
  color: var(--color-text);
}

.nav__item--has-dropdown:focus-within > .nav__dropdown,
.nav__item--has-dropdown:hover > .nav__dropdown {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
    width: 100%;
    max-width: 100%;
  }

.nav__toggle {
  display: none;
  background: var(--color-surface);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 0.6rem 1rem;
  font-size: 0.95rem;
  color: var(--color-text);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.7rem 1.5rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 600;
  font-size: 0.95rem;
  transition: transform var(--transition), border-color var(--transition), background var(--transition);
}

.button--primary {
  background: var(--color-accent);
  color: var(--color-button-text);
  box-shadow: var(--shadow-button);
}

.button--primary:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-button-hover);
}

.button--ghost {
  border-color: transparent;
  background: transparent;
  color: var(--color-text);
}

.button--ghost:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: rgba(143, 198, 255, 0.08);
}

.theme-toggle {
  border: 1px solid var(--toggle-border);
  border-radius: 999px;
  padding: 0.65rem 1rem;
  background: var(--toggle-bg);
  color: var(--toggle-text);
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
}

.theme-toggle:hover {
  border-color: var(--color-accent);
  transform: translateY(-1px);
}

.language-switch {
  position: relative;
}

.language-switch__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.25rem, 0.8vw, 0.35rem);
  border: none;
  background: transparent;
  color: var(--color-text);
  padding: clamp(0.3rem, 0.9vw, 0.48rem) clamp(0.3rem, 0.8vw, 0.44rem) clamp(0.1rem, 0.6vw, 0.2rem);
  min-height: clamp(34px, 6vw, 42px);
  cursor: pointer;
  transition: color var(--transition), transform var(--transition);
}

.language-switch__trigger:hover,
.language-switch.language-switch--open .language-switch__trigger {
  color: var(--color-accent);
  transform: translateY(-1px);
}

.language-switch__icon svg {
  width: clamp(20px, 4vw, 28px);
  height: clamp(20px, 4vw, 28px);
  stroke: currentColor;
  stroke-width: 1.5;
  fill: none;
  vector-effect: non-scaling-stroke;
}

.language-switch__chevron svg {
  width: clamp(16px, 3vw, 22px);
  height: clamp(16px, 3vw, 22px);
  stroke: currentColor;
  stroke-width: 1.5;
  fill: none;
  vector-effect: non-scaling-stroke;
}

.language-switch__icon svg *,
.language-switch__chevron svg * {
  stroke-linecap: round;
  stroke-linejoin: round;
}

.language-switch__dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 0.45rem);
  background: var(--color-surface-strong);
  border-radius: 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0.35rem;
  min-width: 140px;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity var(--transition), transform var(--transition);
  z-index: 120;
}

.language-switch--open .language-switch__dropdown {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.language-switch__option {
  border: none;
  background: transparent;
  color: var(--color-text);
  text-align: left;
  padding: 0.55rem 0.9rem;
  border-radius: 0.65rem;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.language-switch__option:hover,
.language-switch__option:focus-visible,
.language-switch__option.is-active {
  outline: none;
  background: rgba(143, 198, 255, 0.15);
  color: var(--color-accent);
}

.language-switch__check {
  width: 18px;
  height: 18px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity var(--transition);
}

.language-switch__check svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  stroke-width: 2.2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.language-switch__option.is-active .language-switch__check {
  opacity: 1;
}

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-block: clamp(6rem, 12vw, 10rem);
  background: var(--color-bg);
  color: var(--color-text);
  overflow: hidden;
}

/* dark-mode: allow a tiny visible overflow so gradient text glyphs near the
   edge are not clipped by the hero container */
html[data-theme="dark"] .hero {
  overflow: visible;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to bottom,
      color-mix(in srgb, var(--hero-glow) 78%, transparent) 0%,
      transparent 24%
    ),
    radial-gradient(
      circle at 18% 10%,
      color-mix(in srgb, var(--hero-glow) 88%, transparent) 0%,
      transparent 72%
    );
  pointer-events: none;
  z-index: 0;
}

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to top,
      color-mix(in srgb, rgba(0, 0, 0, 0.85) 58%, transparent) 0%,
      transparent 32%
    );
  pointer-events: none;
  z-index: 0;
}

.hero__background {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

.hero__canvas {
  width: 100%;
  height: 100%;
  display: block;
}


/* Dark mode: remove any hero background gradients/overlays */
html[data-theme="dark"] .hero::before,
html[data-theme="dark"] .hero::after {
  background: none !important;
}


.hero h1 {
  max-width: 18ch;
  line-height: 1.3;
  /* hero heading background and color controlled via variables */
  background: var(--hero-heading-bg, var(--hero-heading-gradient));
  background-clip: text;
  -webkit-background-clip: text;
  color: var(--hero-headline-color, transparent);
}

.eyebrow,
.section__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 1rem;
  color: var(--color-text-muted);
}

/* visible state when JS toggles the class */
.hero-synen.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* TODO: add animation */
.hero__lead {
  font-size: 1.55rem;
  color: var(--color-hero-lead);
  letter-spacing: 0.12em;
  max-width: 36ch;
} 

.hero__bullets {
  list-style: none;
  padding-left: 0;
  display: grid;
  gap: 0.85rem;
  color: var(--color-hero-bullet);
  font-size: 0.95rem;
}

.hero__bullets li {
  position: relative;
  padding-left: 1.4rem;
}

.hero__bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.45rem;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--color-accent) 45%, transparent);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2.25rem;
  align-items: flex-start;
  border-top: 1px solid transparent;
  padding-top: 1.75rem;
}

.hero__stat {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 150px;
}

.hero__stat-number {
  font-size: 2.05rem;
  font-weight: 600;
  color: var(--color-text);
}

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

.hero__note {
  font-size: 0.75rem;
  color: var(--color-hero-stat-label);
  max-width: 32ch;
}

.section {
  padding-block: var(--section-spacing);
}

/* Increase the gap before the first section ("Highlights") to extend scroll distance */



.hero + .section {
  /* Further reduced spacer (~48% of original values) */
  padding-top: clamp(4.5rem, 48vh, 51vh);
}

@media (max-width: 720px) {
  .hero + .section {
    /* Smaller but still substantial on mobile */
    padding-top: clamp(2.7rem, 9.6vh, 12.8vh);
  }
}


.section + .section {
  border-top: 1px solid transparent;
}

.section--alt {
  background: color-mix(in srgb, var(--color-surface) 75%, transparent);
}

/* Pricing should match Highlights background */
#pricing {
  background: transparent; /* same as default .section used by Highlights */
}

.section--subtle {
  background: color-mix(in srgb, var(--color-surface-subtle) 65%, transparent);
}

.section__header {
  max-width: 620px;
  display: grid;
  gap: 1.25rem;
  margin-bottom: clamp(2.5rem, 6vw, 3.5rem);
}

.section__lead {
  color: var(--color-text-muted);
  font-size: 1.05rem;
}

.trust__logos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1.5rem;
  align-items: center;
}

.trust__logo {
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: 1.5rem;
  font-weight: 600;
  text-align: center;
  background: color-mix(in srgb, var(--color-surface-strong) 92%, transparent);
  color: var(--color-text-muted);
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--grid-gap);
}

.feature-card {
  background: var(--layer-card-bg);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: 1.9rem;
  display: grid;
  gap: 1rem;
  position: relative;
  overflow: hidden;
  transition: transform var(--transition), border-color var(--transition);
  box-shadow: none;
  isolation: isolate;
}

.feature-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--layer-card-glow);
  opacity: 0.6;
  pointer-events: none;
  z-index: 0;
}

.feature-card > * {
  position: relative;
  z-index: 1;
}

.feature-card:hover {
  transform: translateY(-2px);
  border-color: var(--color-accent);
}

.feature-card ul {
  list-style-type: '– ';
  padding-left: 1.1rem;
  color: var(--color-text-muted);
}

.feature-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-accent-soft);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  justify-self: start;
}

.section--split {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(0, 0, 0, 0) 100%);
}

.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grid-gap);
  align-items: start;
}

.list {
  display: grid;
  gap: 0.8rem;
  color: var(--color-text-muted);
  padding-left: 1.1rem;
}

.list strong {
  color: var(--color-text);
}

.media-card {
  position: relative;
  border-radius: var(--radius-lg);
  background: var(--layer-card-bg);
  min-height: 320px;
  display: grid;
  place-items: center;
  padding: 2.25rem;
  text-align: center;
  color: var(--color-text-muted);
  border: 1px solid transparent;
  box-shadow: none;
  overflow: hidden;
  isolation: isolate;
}

.media-card__shine {
  display: none;
}

.tech-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--grid-gap);
}

.tech-card {
  padding: 1.6rem;
  border-radius: var(--radius-md);
  background: var(--layer-card-bg);
  border: 1px solid transparent;
  color: var(--color-text-muted);
  display: grid;
  gap: 0.75rem;
  transition: border-color var(--transition), transform var(--transition);
  box-shadow: none;
}

.tech-card h3 {
  color: var(--color-text);
}

.tech-card:hover {
  border-color: var(--color-accent);
  transform: translateY(-2px);
}

.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--grid-gap);
  align-items: start;
}

.metrics__stat {
  display: grid;
  gap: 0.4rem;
  padding-block: 1rem;
  border-top: 1px solid transparent;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

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

.metrics__value {
  font-size: 1.85rem;
  font-weight: 600;
  color: var(--color-text);
}

.metrics__note {
  grid-column: 1 / -1;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-top: 0.2rem;
}

.showcase__intro {
  max-width: clamp(280px, 40vw, 560px);
  margin-left: var(--showcase-anchor);
  margin-right: clamp(2rem, 8vw, 5.5rem);
  padding-inline: 0;
  display: grid;
  gap: 1rem;
}

.showcase__intro .section__title {
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  text-transform: uppercase;
  letter-spacing: 0.26em;
  color: var(--color-accent);
}

.showcase__intro .section__lead {
  font-size: clamp(1rem, 2vw, 1.35rem);
  line-height: 1.4;
  color: var(--color-text);
}


.showcase-rail {
  position: relative;
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
}

.showcase-rail__scroller {
  display: flex;
  gap: var(--showcase-panel-gap);
  overflow-x: auto;
  scroll-snap-type: none;
  overscroll-behavior-x: contain;
  padding-block: clamp(1.75rem, 4vw, 2.75rem);
  padding-left: 0;
  padding-right: 0;
  scroll-padding-left: 0;
  scroll-padding-right: 0;
  scrollbar-width: none;
}

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


.showcase-panel {
  display: flex;
  flex-direction: column;
  gap: clamp(0.75rem, 1.8vw, 1.2rem);
  flex: 0 0 auto;
  width: fit-content;
  max-width: none;
  scroll-snap-align: none;
  cursor: pointer;
  transition: transform var(--transition);
}

.showcase-panel--ghost {
  opacity: 0;
  pointer-events: none;
  transform: none !important;
}

.showcase-panel--ghost .showcase-panel__placeholder,
.showcase-panel--ghost .showcase-panel__caption {
  visibility: hidden;
}

.showcase-panel--ghost-lead {
  flex: 0 0 var(--showcase-ghost-lead-width);
  min-width: var(--showcase-ghost-lead-width);
}

.showcase-panel--ghost-trail {
  flex: 0 0 var(--showcase-ghost-trail-width);
  min-width: var(--showcase-ghost-trail-width);
}

.showcase-panel:hover,
.showcase-panel:focus-visible {
  transform: translateY(-4px);
  outline: none;
}

.showcase-panel__placeholder {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--showcase-panel-height);
  width: auto;
}

.showcase-panel__image {
  height: 100%;
  width: auto;
  max-width: none;
  object-fit: contain;
}


.showcase-panel__caption {
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--color-text);
  padding-left: 0.4rem;
}

.showcase-rail__controls {
  position: absolute;
  top: calc(-1 * clamp(3.25rem, 5vw, 3.75rem));
  left: 75vw;
  transform: translateX(-50%);
  display: flex;
  gap: 0.25rem;
  z-index: 2;
}


@media (max-width: 880px) {
  .showcase-rail__controls {
    left: auto;
    right: clamp(2rem, 8vw, 5.5rem);
    transform: none;
  }
  .showcase-rail__scroller {
    padding-left: var(--showcase-anchor);
    padding-right: var(--showcase-anchor);
  }
}

@media (max-width: 640px) {
  .showcase-panel {
    width: 100%;
    max-width: 100%;
  }
}

.showcase__nav {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid transparent;
  background: color-mix(in srgb, var(--color-surface) 90%, transparent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
}

.showcase__nav:hover {
  border-color: var(--color-accent);
  transform: translateY(-5%) scale(1.05);
}

.showcase__nav::before {
  content: '';
  width: 10px;
  height: 10px;
  /* visible chevron using the text color by default */
  border-top: 2px solid var(--color-text);
  border-right: 2px solid var(--color-text);
}

.showcase__nav:hover::before {
  border-top-color: var(--color-accent);
  border-right-color: var(--color-accent);
}

.showcase__nav--prev::before {
  transform: rotate(-135deg);
}

.showcase__nav--next::before {
  transform: rotate(45deg);
}

.placeholder-block {
  display: grid;
  gap: 1rem;
  /* make placeholders much larger on desktop */
  max-width: 1200px;
  padding-top: 0.5rem;
}

/* Large, responsive image area for all three placeholder blocks */
.placeholder-block__image {
  width: clamp(320px, 50vw, 50vw);
  margin-inline: auto;
  aspect-ratio: 16 / 9; /* big hero-like preview */
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--layer-card-bg);
  justify-self: center;
}

.placeholder-block__image--video {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  margin-top: 300px;
  margin-bottom: 0;
  border-radius: 0;
  overflow: visible;
  position: relative;
  background: transparent;
  min-height: 0;
}

.placeholder-block__image > picture,
.placeholder-block__image > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.placeholder-block__video {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

.monitoring-video-frame {
  position: sticky;
  top: 0;
  width: 105vw;
  min-width: 105vw;
  max-width: 105vw;
  margin-left: calc(50% - 52.5vw);
  margin-right: calc(50% - 52.5vw);
  z-index: 3;
  border-radius: 0;
  overflow: hidden;
  pointer-events: auto;
}

.monitoring-video-frame--fixed {
  position: fixed;
  margin-left: 0;
  margin-right: 0;
}

.monitoring-video-frame video {
  width: 100%;
  height: auto;
  display: block;
}

#monitoring-block {
  position: relative;
  overflow: visible;
  padding-bottom: calc(var(--monitoring-copy-scroll) + clamp(4rem, 10vh, 6rem));
}

#intelligent-control-block {
  position: relative;
  z-index: 0;
  background: #000;
  padding-top: clamp(0rem, 0vh, 2.5rem);
}

#intelligent-control-block::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
  transition: opacity 350ms ease;
  pointer-events: none;
  z-index: 5;
}

#intelligent-control-block[data-market-blackout='true']::after {
  opacity: 1;
}

.monitoring-experience {
  position: relative;
  --monitoring-container-width: min(100% - clamp(2rem, 8vw, 5.5rem), var(--max-width));
  width: var(--monitoring-container-width);
  margin-inline: auto;
  min-height: calc(100vh + var(--monitoring-copy-scroll));
}

.monitoring-experience__media {
  position: relative;
}

.monitoring-experience__copy.is-active {
  opacity: 1;
}

.about-card h3 {
  font-size: 1.4rem;
}

.about-card p {
  color: var(--color-text-muted);
}

.testimonial-card {
  background: var(--layer-card-bg);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  padding: 1.9rem;
  display: grid;
  gap: 1.1rem;
  position: relative;
  overflow: hidden;
  box-shadow: none;
}

.testimonial-card::before {
  content: none;
}

.testimonial-card__quote {
  font-size: 1.05rem;
  color: var(--color-text);
}

.testimonial-card__meta {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  color: var(--color-text-muted);
}

.resource-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--grid-gap);
}

.resource-card {
  background: var(--layer-card-bg);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  padding: 1.75rem;
  display: grid;
  gap: 0.85rem;
  box-shadow: none;
}

.resource-card__type {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--color-text-muted);
  text-transform: uppercase;
}

.resource-card__link {
  color: var(--color-accent);
  font-weight: 600;
}

.pricing {
  display: grid;
  gap: var(--grid-gap);
  position: relative;
}

.pricing__tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--grid-gap);
}

.pricing-card {
  background: var(--layer-card-bg);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  padding: 2rem;
  display: grid;
  gap: 1.25rem;
  box-shadow: none;
}

.pricing-card__price {
  font-size: 1.5rem;
  font-weight: 600;
}

.pricing__options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--grid-gap);
  margin-top: clamp(2.5rem, 6vw, 3.5rem);
}

.pricing-option {
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: 2rem;
  background: var(--layer-card-bg);
  display: grid;
  gap: 1.25rem;
  box-shadow: var(--shadow-soft);
}

.pricing-option h3 {
  font-size: 1.35rem;
}

.pricing-option p {
  color: var(--color-text-muted);
}

#pricing {
  position: relative;
  overflow: visible;
}

.pricing__atmosphere {
  display: none;
}

.cta {
  position: relative;
  background: var(--cta-background);
}

.cta__content {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grid-gap);
  align-items: center;
}

.cta__form {
  display: grid;
  gap: 0.85rem;
  background: var(--layer-card-bg);
  border-radius: var(--radius-md);
  padding: 1.75rem;
  border: 1px solid transparent;
  box-shadow: none;
}

.cta__form input {
  padding: 0.85rem 1rem;
  border-radius: 999px;
  border: 1px solid transparent;
  background: color-mix(in srgb, var(--color-surface) 75%, transparent);
  color: var(--color-text);
  font-family: var(--font-sans);
}

.cta__privacy {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.site-footer {
  padding-block: 3rem;
  background: color-mix(in srgb, var(--color-surface-strong) 92%, transparent);
  color: var(--color-text-muted);
  border-top: 1px solid transparent;
}

.footer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--grid-gap);
}

.footer__brand {
  display: grid;
  gap: 0.75rem;
}

.footer__logo {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--color-text);
}

.footer__links,
.footer__social {
  display: grid;
  gap: 0.5rem;
}

.footer__links > div {
  display: grid;
  gap: 0.4rem;
}

.footer__links h3,
.footer__social h3 {
  font-size: 0.95rem;
  color: var(--color-text);
}

.footer__links a,
.footer__social a {
  color: var(--color-text-muted);
  transition: color var(--transition);
}

.footer__links a:hover,
.footer__social a:hover {
  color: var(--color-accent);
}

.footer__fineprint {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.media-card,
.feature-card,
.testimonial-card,
.tech-card,
.resource-card,
.metrics__stat,
.pricing-card,
.pricing-option,
.showcase__intro,
.showcase-panel,
.placeholder-block,
.about-card,
.cta__form {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 320ms ease, transform 320ms ease;
}

.media-card.is-visible,
.feature-card.is-visible,
.testimonial-card.is-visible,
.tech-card.is-visible,
.resource-card.is-visible,
.metrics__stat.is-visible,
.pricing-card.is-visible,
.pricing-option.is-visible,
.showcase__intro.is-visible,
.showcase-panel.is-visible,
.placeholder-block.is-visible,
.about-card.is-visible,
.cta__form.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 720px) {
  .nav__menu {
    position: absolute;
    inset: 72px 1.25rem auto;
    background: color-mix(in srgb, var(--color-surface-strong) 95%, transparent);
  border: 1px solid transparent;
    border-radius: var(--radius-md);
    padding: 1.2rem;
    flex-direction: column;
    gap: 1rem;
    box-shadow: var(--shadow-soft);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-12px);
    transition: opacity var(--transition), transform var(--transition);
  }

  .nav__menu.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  .nav__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
  }

  .split,
  .cta__content,
  .footer {
    grid-template-columns: 1fr;
  }

  .nav {
    position: relative;
  }

.trust__logos,
.feature-grid,
.tech-grid,
.metrics,
.testimonial-grid,
.resource-grid,
.pricing__tiers,
.pricing__options,
.about__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 720px) and (min-width: 721px) {
  .site-header.centered-headbar .nav__toggle {
    display: none;
  }

  .site-header.centered-headbar .headbar-pill {
    justify-content: center;
    padding: 0.75rem 1.25rem;
    background: color-mix(in srgb, var(--color-surface-strong) 92%, transparent);
    border: 1px solid rgba(255, 255, 255, 0.04);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
  }

  .site-header.centered-headbar .headbar-pill .nav__menu {
    position: static;
    inset: auto;
    background: transparent;
    border: 0;
    padding: 0;
    flex-direction: row;
    gap: 2.6rem;
    box-shadow: none;
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }

  .site-header.centered-headbar .headbar-pill .nav__menu.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }

  .site-header.centered-headbar .headbar-pill .nav__menu > * {
    min-width: 4.6rem;
  }

  .site-header.centered-headbar .headbar-pill .nav__item--has-dropdown {
    width: auto;
    flex-direction: row;
    align-items: center;
  }

  .site-header.centered-headbar .headbar-pill .nav__dropdown {
    position: absolute;
    top: calc(100% + 0.95rem);
    left: 50%;
    transform: translate(-50%, -10px);
    width: auto;
    margin-top: 0;
    background: color-mix(in srgb, var(--color-surface-strong) 92%, transparent);
    opacity: 0;
    pointer-events: none;
    box-shadow: var(--shadow-soft);
    border-radius: var(--radius-md);
    padding: 0.9rem 1rem;
    display: grid;
    gap: 0.35rem;
  }
}

  .nav__item--has-dropdown {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  .nav__link--dropdown::before {
    transform: rotate(45deg);
    content: none;
  }

  .nav__dropdown {
    position: static;
    transform: none;
    width: 100%;
    margin-top: 0.6rem;
    background: color-mix(in srgb, var(--color-surface-strong) 96%, transparent);
    opacity: 1;
    pointer-events: auto;
    box-shadow: none;
    border-radius: var(--radius-sm);
    padding: 0.6rem 0.75rem;
    display: none;
  }

  .nav__dropdown.is-open {
    display: grid;
  }

  .nav__item--has-dropdown:hover > .nav__dropdown,
  .nav__item--has-dropdown:focus-within > .nav__dropdown {
    opacity: 1;
    transform: none;
  }

  .hero {
    align-items: center;
  }

  .hero__content {
    max-width: 100%;
    padding: clamp(2.25rem, 8vw, 3.2rem);
  }
}

@media (max-width: 720px) {
  .container {
    width: min(100% - 1.5rem, var(--max-width));
  }

  .nav__actions {
    gap: 0.75rem;
  }

  .hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

.trust__logos,
.feature-grid,
.tech-grid,
.metrics,
.testimonial-grid,
.resource-grid,
.pricing__tiers,
.pricing__options,
.about__grid {
  grid-template-columns: 1fr;
}

  .hero__content {
    padding: 2.25rem 1.75rem;
  }

}

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

.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;
}
.hero__content {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  max-width: min(100%, 1200px);
  padding: clamp(2.5rem, 5vw, 4.2rem) clamp(1.5rem, 6vw, 4rem);
  border-radius: var(--radius-lg);
  background: transparent;
  border: none;
  box-shadow: none;
}

/* opening sequence prompt: absolutely positioned so it doesn't reflow layout */
.hero-explore-prompt {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(-1.6rem); /* place just below hero description area */
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.72);
  pointer-events: auto;
  z-index: 6;
  opacity: 0;
  transition: opacity 320ms ease;
  white-space: nowrap;
}

/* SYNEN uses the same visual pattern as hero headline but slightly larger */
.hero-synen {
  display: inline-block;           /* allow horizontal expansion */
  white-space: nowrap;             /* prevent wrapping so spacing is visible */
  font-family: var(--font-display);
  font-weight: 800;
  color: inherit;
  background: none !important;
  background-clip: initial !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  /* font-size controlled by centralized block at end of file */
  line-height: 1;
  letter-spacing: 0.28em; /* reduced tracking for tighter headline */
  text-align: center;
  margin: 0;
  z-index: 6;
  /* start hidden; transitions defined so JS class-toggle animates */
  opacity: 1;
  transform: none;
  /* slower, smoother fade-in */
  transition: opacity 1800ms ease, transform 1800ms ease;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: visible;
}

/* SYNEN is visible by default (no timed reveal); fading controlled by JS */

/* if viewport is narrow, scale down SYNEN a bit to avoid excessive overflow */
@media (max-width: 720px) {
  .hero-synen {
    /* font-size controlled by centralized block at end of file */
    letter-spacing: 0.18em;
    transition: opacity 1200ms ease, transform 1200ms ease;
  }
}

/* visible state when JS toggles the class */
.hero-synen.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* CTA button placed directly below SYNEN */
.hero-cta-button {
  display: inline-block;
  margin-top: 1rem;
  z-index: 6;
  pointer-events: auto; /* ensure button can receive clicks */
}

/* center wrapper for SYNEN + CTA during reveal */
/* Perfect centering using translate to avoid layout shifts and ensure pixel-perfect centering */
.hero-synen-wrap {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 1.5rem;
  pointer-events: auto; /* allow clicks inside the centered block */
  z-index: 6;
  width: min(92vw, 1500px); /* widen the text box significantly but keep it responsive */
  padding-inline: clamp(1rem, 6vw, 4rem)!important;
  box-sizing: border-box;
}

/* ensure hero containers don't clip the expanded SYNEN */
html[data-theme="dark"] .hero,
.hero__content,
.hero__headline {
  overflow: visible !important;
}

/* enforce perfect centering and remove offsets */
.hero {
  position: relative; /* ensure wrapper is positioned to hero */
}

.hero-synen-wrap {
  margin: 0;
  padding: 0;
}

.hero__headline.hero-synen {
  margin: 0;
  padding: 0;
  text-align: center;
}

.hero-cta-button {
  margin: 0;
  align-self: center;
}

.hero-synen-wrap .hero-cta-button {
  pointer-events: auto;
  /* add a bit more breathing room between description and CTA */
  margin-top: 1.6rem;
}

@media (max-width: 800px) {
  .hero-synen-wrap {
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
  }
}

@media (max-width: 480px) and (max-height: 1000px) {
  .hero-synen-wrap {
    top: 65% !important;
    transform: translate(-50%, -65%) !important;
  }
}

@media (max-width: 480px) and (max-height: 1000px) {
  #showcase .showcase__intro {
    width: 85vw;
    max-width: 85vw;
    margin: 0 auto clamp(2rem, 12vw, 3rem);
    text-align: center;
  }

  #showcase .showcase-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(4rem, 14vw, 3.5rem);
  }

  #showcase .showcase-rail__controls {
    display: none;
  }

  #showcase .showcase-rail__scroller {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(4rem, 14vw, 3.5rem);
    overflow: visible;
    padding: 0;
    margin: 0;
    width: 100%;
  }

  #showcase .showcase-panel {
    width: 85vw;
    max-width: 85vw;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    scroll-snap-align: unset;
  }

  #showcase .showcase-panel--ghost {
    display: none !important;
  }

  #showcase .showcase-panel__placeholder {
    width: 100%;
    height: auto;
    min-height: 0;
  }

  #showcase .showcase-panel__image,
  #showcase .showcase-panel__placeholder > video {
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  #showcase .showcase-panel__caption {
    width: 85vw;
    max-width: 85vw;
    margin: 0 auto;
    text-align: center;
  }
}

/* button design matching attachment: rounded pill, blue background, white bold text */
.hero-cta-button.button--primary {
  background: var(--color-accent);
  color: var(--color-button-text);
  padding: clamp(0.68rem, 2.8vw, 1.35rem) clamp(1.4rem, 8vw, 3.4rem);
  border-radius: 999px;
  font-weight: 800;
  font-size: clamp(0.9rem, 3vw, 1.5rem);
  letter-spacing: 0.02em;
  box-shadow: var(--shadow-button);
  opacity: 1;
}

/* Mobile monitoring layout adjustment: show only the heading above the video
   while leaving the remaining monitoring copy below the video (CSS-only; no DOM reorder).
   Applies only on very small, tall-enough mobile screens. */
@media (max-width: 480px) and (max-height: 1000px) {
  #monitoring-block {
    padding-top: clamp(2.75rem, 12vw, 4.5rem); /* extra buffer so overlay text has room */
  }
  #monitoring-block .monitoring-experience {
    position: relative; /* anchor for absolute heading */
    --monitoring-mobile-video-gap: clamp(3.3rem, 12vw, 5rem); /* shared gap for heading + video */
  }
  #monitoring-block .monitoring-copy__title {
    position: absolute;
    top: var(--monitoring-mobile-video-gap);
    left: 50%;
    transform: translate(-50%, -72%); /* pull title upward so its bottom kisses the video edge */
    width: 85vw;
    max-width: 85vw;
    text-align: center;
    margin: 0;
    padding: 0.35rem 0.65rem;
    /* mirror existing heading style */
    font-size: calc(clamp(1.1rem, 2vw, 1.4rem) * var(--monitoring-text-scale, 1));
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--color-accent);
    z-index: 5;
  }
  /* move media down just enough so the heading can sit on the video edge */
  #monitoring-block .monitoring-experience__media {
    margin-top: calc(var(--monitoring-mobile-video-gap) + clamp(1.75rem, 6vw, 2.75rem));
  }
  /* push the rest of the copy further down so it clears the lowered video comfortably */
  #monitoring-block .monitoring-experience__copy {
    margin-top: clamp(6.5rem, 18vw, 9rem);
  }
  /* disable sticky behavior on very small screens so heading + video scroll naturally */
  #monitoring-block .monitoring-video-frame {
    position: relative;
    top: auto;
  }
}

/* match headbar primary button hover behavior: slight lift and shadow */
.hero-cta-button.button--primary {
  transition: transform var(--transition), box-shadow var(--transition);
  cursor: pointer;
}

.hero-cta-button.button--primary:hover,
.hero-cta-button.button--primary:focus-visible {
  transform: translateY(-1px);
  box-shadow: var(--shadow-button-hover);
}

/* CTA initial hidden state and visible class for JS-driven reveal
   - keep animation in CSS so inline transform doesn't block hover rules */
.hero-cta-button.button--primary {
  opacity: 1;
  transform: none;
  transition: opacity 450ms ease, transform 450ms ease, box-shadow var(--transition);
}

/* CTA visible by default; fading controlled by JS */

/* hide the old opening prompt entirely (no temporal prompt) */
.hero-explore-prompt { display: none !important; }

.hero__slogan {
  /* font-size controlled by centralized block at end of file */
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--color-text);
  text-align: center;
  margin-bottom: 0.9rem; /* small gap between slogan and description */
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(0.45rem, 1.2vw, 0.9rem);
  flex-wrap: nowrap;
}

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

.hero__slogan-piece + .hero__slogan-piece {
  margin-left: 0.15rem;
}

@media (max-width: 720px) {
  .hero__slogan { margin-bottom: 0.6rem; }
}

@media (max-width: 720px) {
  .hero__headline.hero-synen {
    line-height: 1.05;
    margin-bottom: 0.3rem;
  }

  .hero__slogan {
    line-height: 1.15;
    margin-bottom: 0.4rem;
  }

  .hero__description {
    line-height: 1.35;
    margin-bottom: 0.rem;
  }

  .hero__copy {
    gap: 0.75rem;
  }

  .hero-cta-button {
    margin-top: 0rem;
  }
}

@media (max-width: 720px) {
  .hero__slogan {
    flex-wrap: wrap;
  }

  .hero__slogan-piece {
    flex: 0 0 auto;
  }

  .hero__slogan-piece[data-piece='3'] {
    flex-basis: 100%;
    margin-left: 0;
  }
}

/* alternative: white text on blue background if you prefer the CTA to be white on blue */
.hero-cta-button.button--primary.alt-white {
  background: #5a7ff4;
  color: #ffffff;
}

.hero__copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(1rem, 3vw, 1.9rem);
  width: 100%;
  max-width: 1100px; /* widen the text container substantially */
  opacity: 0;
  transition: opacity 1.8s ease;
}

.hero__copy.is-visible {
  opacity: 1;
}

.hero__headline {
  /* font-size controlled by centralized block at end of file */
  line-height: 1.3;
  letter-spacing: -0.015em;
  margin: 0;
  max-width: none;
}

/* keep the short marketing headline on a single line on wide screens */
  @media (min-width: 900px) {
  .hero__copy {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .hero__headline {
    white-space: nowrap;
    overflow: visible;
    /* increase the available inline space slightly so the headline fits */
    max-width: 1200px;
    width: 100%;
    display: inline-block;
    /* font-size controlled by centralized block at end of file */
    padding-right: 1ch;
  }

  .hero__content {
    /* add safe inline-end buffer so punctuation doesn't sit flush to the edge */
    padding-inline-end: clamp(2.5rem, 5vw, 4.2rem) !important;
  }
}

.hero__description {
  max-width: 88ch; /* much wider to allow longer line lengths */
  width: 100%;
  font-size: clamp(1rem, 2.2vw, 1.18rem);
  line-height: 1.75;
  color: rgba(214, 219, 238, 0.86);
}

/* center the description block and its text so it aligns with other centered hero content */
.hero__description {
  margin-inline: auto;
  text-align: center;
  display: block;
}

/* hero colors centralised below; edit variables at the end of this file */

/* Dark-mode: make the hero CTA and nav primary action use 80% opacity of the light blue accent */
html[data-theme="dark"] .hero-cta-button.button--primary,
html[data-theme="dark"] .nav__actions .button--primary {
  background: var(--color-accent) !important;
  color: var(--color-button-text) !important;
  box-shadow: var(--shadow-button) !important;
  border-color: transparent !important;
}

/* dark-mode: use a clear blue color for the hero headline (not too bright) */
/* Keep nav brand/logo dark-mode color; hero colors are centralized below */
html[data-theme="dark"] .nav__brand {
  color: #8fc6ff !important;
}

/* hero slogan and description colors are controlled by central variables (see bottom) */

/* Centralized hero typography control
   Edit these variables to adjust SYNEN (headline) and slogan sizes in one place.
   These rules intentionally avoid !important and rely on placement at the end
   of this stylesheet so they naturally win the cascade without overrides. */
:root {
  /* SYNEN headline sizes (min, preferred, max) */
  --hero-synen-min: 1.5rem;
  --hero-synen-preferred: 1.8vw;
  --hero-synen-max: 3.5rem;

  /* generic headline (brand) follows the same scale but slightly larger by default */
  --hero-headline-min: 2.4rem;
  --hero-headline-preferred: 5.4vw;
  --hero-headline-max: 4.2rem;

  /* slogan sizes (min, preferred, max) */
  --hero-slogan-min: 2.4rem;
  --hero-slogan-preferred: 6vw;
  --hero-slogan-max: 5.2rem;
}

/* Apply centralized sizes */
.hero__headline.hero-synen,
.hero-synen {
  font-size: clamp(var(--hero-synen-min), var(--hero-synen-preferred), var(--hero-synen-max));
}

.hero__headline {
  font-size: clamp(var(--hero-headline-min), var(--hero-headline-preferred), var(--hero-headline-max));
}

.hero__slogan {
  font-size: clamp(var(--hero-slogan-min), var(--hero-slogan-preferred), var(--hero-slogan-max));
}

/* Centralized hero color variables and application
   Edit these values to change hero colors per theme. */
:root {
  /* default (dark) theme hero colors */
  --hero-headline-color: rgba(214, 219, 238, 0.86); /* SYNEN / headline color in dark */
  --hero-slogan-color: #8fc6ff;
  --hero-desc-color: rgba(214, 219, 238, 0.86);
  /* fallback heading background when gradient is desired */
  --hero-heading-bg: none;
}

/* Apply colors to hero elements (no !important) */
.hero__headline.hero-synen,
.hero-synen,
.hero__headline {
  color: var(--hero-headline-color);
  -webkit-text-fill-color: var(--hero-headline-color);
}

/* (removed parent overlay styles; overlay now drawn inside iframe) */

.hero__slogan {
  color: var(--hero-slogan-color);
}

.hero__description {
  color: var(--hero-desc-color);
}

/* Slightly tighten sizes on small viewports */
@media (max-width: 720px) {
  :root {
    --hero-synen-min: 1rem;
    --hero-synen-preferred: 3vw;
    --hero-synen-max: 1.5rem;

    --hero-headline-min: 2.4rem;
    --hero-headline-preferred: 6vw;
    --hero-headline-max: 3.2rem;

    --hero-slogan-min: 2.4rem;
    --hero-slogan-preferred: 6vw;
    --hero-slogan-max: 3.4rem;
  }
}

@media (max-width: 410px) {
  :root {
    --hero-synen-min: 1rem;
    --hero-synen-preferred: 3vw;
    --hero-synen-max: 4.8rem;

    --hero-slogan-min: 1.8rem;
    --hero-slogan-preferred: 4vw;
    --hero-slogan-max: 3.4rem;
  }
}



/* Ensure hero elements animate opacity when controlled by JS */
.hero-synen { transition: opacity 1000ms ease, transform 1000ms ease; }
.hero__slogan, .hero__description { transition: opacity 1000ms ease; }
.hero-cta-button { transition: opacity 1000ms ease, transform 450ms ease, box-shadow var(--transition); }
.showcase-panel[data-target="#grid-data"] .showcase-panel__placeholder,
.showcase-panel[data-target="#weather-forecasting"] .showcase-panel__placeholder {
  background: #ffffff;
}
.site-header.centered-headbar .language-switch {
  display: flex;
  align-items: center;
}

@media (max-width: 999px) {
  #showcase {
    margin-bottom: clamp(5rem, 20vw, 8rem);
  }

  #monitoring-block {
    padding-bottom: clamp(3.5rem, 12vh, 5rem);
  }

  .monitoring-experience {
    width: calc(100% - clamp(1.5rem, 8vw, 3rem));
    display: flex;
    flex-direction: column;
    gap: clamp(1.5rem, 5vw, 3rem);
    margin-inline: auto;
    --monitoring-mobile-width: clamp(70vw, calc(0.51503 * 100vw + 185px), 90vw);
  }

  .monitoring-experience__media,
  .monitoring-experience__copy {
    width: 100%;
    max-width: 100%;
  }

  .monitoring-experience__media {
    position: relative;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .monitoring-video-frame {
    position: relative;
    top: auto;
    width: var(--monitoring-mobile-width);
    min-width: var(--monitoring-mobile-width);
    max-width: var(--monitoring-mobile-width);
    height: auto;
    min-height: 0;
    margin: 0 auto;
    border-radius: 0;
    overflow: hidden;
    background: #050505;
  }

  .monitoring-video-frame video {
    width: 100%;
    height: auto;
    object-fit: contain;
    margin: 0 auto;
  }

  .monitoring-experience__copy {
    position: relative;
    display: block;
    margin-top: 5rem;
    width: 85vw;
    max-width: 85vw;
    margin-inline: auto;
  }

  .monitoring-copy__pin {
    position: relative;
    top: auto;
    height: auto;
    min-height: 0;
    padding: clamp(1.5rem, 7vw, 2.75rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 1.1rem;
    text-align: left;
    opacity: 1;
    z-index: 2;
    width: 85vw;
    max-width: 85vw;
    min-width: auto;
    margin: 0 auto;
  }

  .monitoring-copy__title {
    text-align: left;
    margin-bottom: 0.25rem;
  }

  .monitoring-copy__line {
    align-items: flex-start;
    text-align: left;
    width: 100%;
  }

  .monitoring-copy__subheading,
  .monitoring-copy__body {
    text-align: left;
    width: 100%;
  }

  #monitoring-block .placeholder-block__image--video {
    width: 100%;
    max-width: none;
    margin: 0 auto;
  }

  #intelligent-control-block {
    margin-top: clamp(3rem, 12vh, 5rem);
  }
}