@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,300;1,9..40,400&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;600&family=Titillium+Web:wght@400;600;700&display=swap');

/* ===== LIGHT THEME (default) ===== */

:root {
  --white: #FFFFFF;
  --bg: #F8F7F4;
  --bg-warm: #F2F0EB;
  --text-primary: #1A1A1A;
  --text-secondary: #5A5A5A;
  --text-tertiary: #8A8A8A;
  --teal: #0ABAB5;
  --teal-dark: #089E9A;
  --teal-light: #E6FAF9;
  --teal-glow: rgba(10, 186, 181, 0.12);
  --border: #E8E6E1;
  --border-light: #F0EEE9;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.08);
  --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.10);
  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 24px;
  --nav-bg: rgba(255, 255, 255, 0.35);
  --nav-bg-scrolled: rgba(255, 255, 255, 0.55);
  --nav-sheet-bg: #FFFFFF;
  --nav-logo-wash: rgba(255, 255, 255, 0.42);
  --nav-logo-wash-scrolled: rgba(255, 255, 255, 0.64);
  --nav-logo-feather: radial-gradient(
    ellipse 50% 50% at 50% 50%,
    #000 0%,
    rgba(0, 0, 0, 0.96) 22%,
    rgba(0, 0, 0, 0.85) 38%,
    rgba(0, 0, 0, 0.66) 52%,
    rgba(0, 0, 0, 0.44) 65%,
    rgba(0, 0, 0, 0.24) 77%,
    rgba(0, 0, 0, 0.10) 88%,
    rgba(0, 0, 0, 0.03) 95%,
    transparent 100%
  );
  --card-dark-bg: #0d1b2a;
  --card-dark-mid: #132d46;
  --opa-bg: var(--text-primary);
  --btn-primary-bg: var(--text-primary);
  --btn-primary-color: #FFFFFF;
  --glass-bg: rgba(255, 255, 255, 0.32);
  --glass-border: rgba(255, 255, 255, 0.6);
  --glass-highlight: rgba(255, 255, 255, 0.5);
  --section-glass-bg: rgba(248, 247, 244, 0.4);
  --section-glass-blur: 28px;
  --section-glass-border: rgba(255, 255, 255, 0.4);
  --ambient-overlay: rgba(248, 247, 244, 0.22);
}

/* ===== DARK THEME ===== */

[data-theme="dark"] {
  --white: #141922;
  --bg: #0B0F1A;
  --bg-warm: #111827;
  --text-primary: #F1F5F9;
  --text-secondary: #94A3B8;
  --text-tertiary: #64748B;
  --teal: #14D9D3;
  --teal-dark: #0FC9C4;
  --teal-light: rgba(20, 217, 211, 0.1);
  --teal-glow: rgba(20, 217, 211, 0.15);
  --border: #1E293B;
  --border-light: #1A2332;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.6);
  --nav-bg: rgba(11, 15, 26, 0.35);
  --nav-bg-scrolled: rgba(11, 15, 26, 0.55);
  --nav-sheet-bg: #101725;
  --nav-logo-wash: rgba(11, 15, 26, 0.44);
  --nav-logo-wash-scrolled: rgba(11, 15, 26, 0.66);
  --card-dark-bg: #0a1120;
  --card-dark-mid: #0f1d33;
  --opa-bg: #0F172A;
  --btn-primary-bg: #14D9D3;
  --btn-primary-color: #0B0F1A;
  --glass-bg: rgba(255, 255, 255, 0.08);
  --glass-border: rgba(255, 255, 255, 0.22);
  --glass-highlight: rgba(255, 255, 255, 0.18);
  --section-glass-bg: rgba(11, 15, 26, 0.35);
  --section-glass-blur: 28px;
  --section-glass-border: rgba(255, 255, 255, 0.1);
  --ambient-overlay: rgba(11, 15, 26, 0.3);
}

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

html {
  scrollbar-width: thin;
  scrollbar-color: var(--teal) var(--bg);
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
}

body {
  font-family: 'DM Sans', -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
  position: relative;
  transition: background 0.4s ease, color 0.4s ease;
}

#root {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

/* ===== App content above 3D scene ===== */

.app-content {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

.app-content section {
  position: relative;
  max-width: 100%;
}

/* ===== Single seamless ambient overlay behind all content =====
   Replaces the old per-section glass backdrop so there are no
   visible section boundaries. The globe behind shows through
   continuously; individual cards still carry their own glass. */

.app-content::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, transparent 0%, var(--ambient-overlay) 70%),
    var(--ambient-overlay);
  z-index: 0;
  pointer-events: none;
}

/* Holds the viewport height while a lazily-loaded route chunk arrives, so the
   footer does not flash up under the navbar. */

.route-loading {
  min-height: 100vh;
}

/* ===== Glass morphism utility classes ===== */

.glass-chip {
  background: var(--glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
}

/* ===== Gradient text for titles ===== */

.gradient-text {
  background: linear-gradient(135deg, var(--teal), #14D9D3, #1AEAE4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ===== Keyframes ===== */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes floatIn {
  from { opacity: 0; transform: translateY(16px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

@keyframes pulseDot {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

@keyframes ticker {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ===== Fancy scroll reveal ===== */

.reveal {
  opacity: 0;
  transform: translateY(48px);
  transition:
    opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal .stagger-item {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.visible .stagger-item {
  opacity: 1;
  transform: translateY(0);
}

.reveal.visible .stagger-item:nth-child(1) { transition-delay: 0.05s; }

.reveal.visible .stagger-item:nth-child(2) { transition-delay: 0.1s; }

.reveal.visible .stagger-item:nth-child(3) { transition-delay: 0.15s; }

.reveal.visible .stagger-item:nth-child(4) { transition-delay: 0.2s; }

.reveal.visible .stagger-item:nth-child(5) { transition-delay: 0.25s; }

.reveal.visible .stagger-item:nth-child(6) { transition-delay: 0.3s; }

.reveal.visible .stagger-item:nth-child(7) { transition-delay: 0.35s; }

.reveal.visible .stagger-item:nth-child(8) { transition-delay: 0.4s; }

.reveal.visible .stagger-item:nth-child(9) { transition-delay: 0.45s; }

/* Scroll progress bar */

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--teal), #1AEAE4, var(--teal));
  background-size: 200% 100%;
  animation: progress-shimmer 3s linear infinite;
  z-index: 9999;
  transform-origin: left;
  transition: transform 0.15s linear;
  pointer-events: none;
  box-shadow: 0 0 12px var(--teal-glow);
}

@keyframes progress-shimmer {
  0% { background-position: 0% 0%; }
  100% { background-position: 200% 0%; }
}

/* ===== Custom thin scrollbar ===== */

::-webkit-scrollbar { width: 6px; }

::-webkit-scrollbar-track { background: var(--bg); }

::-webkit-scrollbar-thumb { background: var(--teal); border-radius: 100px; }

::-webkit-scrollbar-thumb:hover { background: var(--teal-dark); }
/* Shared button styles */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 36px;
  border-radius: 100px;
  background: var(--btn-primary-bg);
  color: var(--btn-primary-color);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
  border: none;
  cursor: pointer;
  font-family: inherit;
  position: relative;
}

.btn-primary:hover {
  background: var(--teal);
  color: #fff;
  box-shadow: 0 8px 32px var(--teal-glow), 0 0 40px rgba(10, 186, 181, 0.15);
  transform: translateY(-2px);
}

[data-theme="dark"] .btn-primary {
  box-shadow: 0 2px 16px rgba(20, 217, 211, 0.25);
}

[data-theme="dark"] .btn-primary:hover {
  background: #1AEAE4;
  color: #0B0F1A;
  box-shadow: 0 8px 40px rgba(20, 217, 211, 0.35), 0 0 60px rgba(20, 217, 211, 0.15);
}

.btn-primary svg {
  width: 18px;
  height: 18px;
  transition: transform 0.3s;
}

.btn-primary:hover svg {
  transform: translateX(3px);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 36px;
  border-radius: 100px;
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--glass-border);
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  cursor: pointer;
  font-family: inherit;
}

.btn-secondary:hover {
  border-color: var(--teal);
  color: var(--teal);
  background: var(--teal-light);
  transform: translateY(-2px);
}

.btn-secondary svg {
  width: 16px;
  height: 16px;
}

/* Shared section styles */
section {
  padding: 48px 48px;
  position: relative;
}

.section-label {
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--teal);
  margin-bottom: 20px;
}

.section-title {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(36px, 4.5vw, 56px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin-bottom: 20px;
}

.section-title em {
  font-style: italic;
  background: linear-gradient(135deg, var(--teal), #14D9D3);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.section-desc {
  font-size: 17px;
  line-height: 1.7;
  color: var(--text-secondary);
  max-width: 540px;
}

/* ===== Shared section intro — soft radial spotlight =====
   Fades the distracting background behind section headers so text
   reads clearly without a hard-edged box. Used by every section header. */
.section-intro {
  position: relative;
  max-width: 760px;
  margin: 0 auto 28px;
  padding: 12px 48px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  isolation: isolate;
}

.section-intro::before {
  content: '';
  position: absolute;
  inset: -40px -80px;
  background: radial-gradient(
    ellipse 60% 55% at 50% 50%,
    rgba(248, 247, 244, 0.92) 0%,
    rgba(248, 247, 244, 0.7) 35%,
    rgba(248, 247, 244, 0) 75%
  );
  z-index: -1;
  pointer-events: none;
}

[data-theme="dark"] .section-intro::before {
  background: radial-gradient(
    ellipse 60% 55% at 50% 50%,
    rgba(11, 15, 26, 0.92) 0%,
    rgba(11, 15, 26, 0.7) 35%,
    rgba(11, 15, 26, 0) 75%
  );
}

.section-intro .section-title,
.section-intro .section-desc {
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.35);
}

[data-theme="light"] .section-intro .section-title,
[data-theme="light"] .section-intro .section-desc {
  text-shadow: 0 1px 14px rgba(248, 247, 244, 0.8);
}

.section-intro .section-desc {
  max-width: 640px;
  margin-bottom: 0;
}

@media (max-width: 640px) {
  .section-intro {
    padding: 16px 24px 32px;
  }
  .section-intro::before {
    inset: -24px -32px;
  }
}

@media (max-width: 960px) {
  section {
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* 
new commit 13 */
/* The nav is not a bar. It is two floating pieces on a transparent row: the
   logo at the left gutter and a collapsed rail at the right that grows
   leftwards on hover to reveal the links and actions. The row itself stays
   empty so the hero reads full-bleed between them. The rail is a real glass
   pill because it holds controls; the logo is not — it gets an edgeless haze
   instead, so nothing at the left gutter reads as a chip. */
.glass-nav {
  position: fixed;
  top: 14px;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 100;
  padding: 0;
  /* Tall enough that the enlarged logo sits inside the row rather than
     overflowing it; the rail stays vertically centred alongside it. */
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: 1440px;
  width: calc(100% - 56px);
  background: transparent;
  border: none;
  box-shadow: none;
  pointer-events: none;
}

/* Only the pieces take the pointer — the empty middle of the row stays
   click-through so it never shadows the hero beneath it. */
.glass-nav > * {
  pointer-events: auto;
}

/* ===== Logo — a feathered haze, not a plate =====
   The mark floats bare at the left gutter with no chip, no outline and no
   shadow. What makes it readable over the hero's 3D scene is the ::before
   below: a blur of whatever is behind it, masked so it fades to nothing well
   inside its own box. There is no edge to see and no rectangle of a different
   colour — only a softening of the artwork directly under the wordmark.

   Do not give this a solid background, a border-radius you can see, or a
   box-shadow. Every one of those turns the haze back into a chip. */
.nav-logo {
  position: relative;
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--text-primary);
  flex-shrink: 0;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-logo::before {
  content: '';
  position: absolute;
  /* Reaches well past the glyphs so the whole falloff happens over empty
     space. The ellipse is inscribed in this box, so a bigger inset means a
     gentler gradient — not a bigger blob. */
  inset: -26px -40px;
  z-index: 0;
  pointer-events: none;

  /* Flat fill, shaped entirely by the mask below. Feathering it twice — once
     in the fill and again in the mask — multiplied the two curves together and
     put a visible knee partway out, which is what made the edge read as a
     ring rather than a fade. One curve, one falloff. */
  background: var(--nav-logo-wash);

  /* Hand-eased toward a gaussian. A two-stop black-to-transparent ramp bands
     badly at this size; the intermediate stops keep the steps under a level
     each. Black-to-transparent specifically, so premultiplied interpolation
     has no hue to drift through on the way out. */
  -webkit-mask-image: var(--nav-logo-feather);
  mask-image: var(--nav-logo-feather);

  transition: background 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* The blur is what a rectangle would show the edge of, so it is added only
   where the mask that feathers it is actually supported. Everywhere else the
   fill alone carries the haze — that one can never have an edge.

   Blur only, no saturate: boosting saturation shifts the colour of everything
   inside the haze relative to everything outside it, and that difference is
   visible along the fade even when the luminance matches. */
@supports (mask-image: radial-gradient(#000, transparent)) or (-webkit-mask-image: radial-gradient(#000, transparent)) {
  .nav-logo::before {
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }
}

/* Scrolling deepens the haze — the content passing underneath is busier than
   the hero, so it needs a little more to sit on. Still no edge. */
.glass-nav.scrolled .nav-logo::before {
  background: var(--nav-logo-wash-scrolled);
}

.nav-logo:hover {
  transform: translateY(-1px);
}

.nav-logo-img {
  /* Sized to fill the nav row rather than sit politely inside it — the mark is
     the only branding on the page above the fold, so it carries. */
  position: relative;
  z-index: 1;
  height: 46px;
  width: auto;
  display: block;
}

/* ===== Breadcrumb — only on module pages =====
   Not the usual "Home / Products / Alarm Management" string. The mark is the
   home link it always was, and says so by sliding the word out from behind
   itself on hover; the module name is flat type; and the last crumb is a live
   chip naming the band you are actually standing in, which rolls over as you
   scroll and opens the section menu when pressed. */
.nav-left {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.nav-home-hint {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  position: relative;
  z-index: 1;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--teal);
  transition: max-width 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease,
    margin-left 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-logo:hover .nav-home-hint,
.nav-logo:focus-visible .nav-home-hint {
  max-width: 90px;
  margin-left: 4px;
  opacity: 1;
}

.nav-crumb {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
}

.nav-crumb-sep {
  display: inline-flex;
  color: var(--text-secondary);
  opacity: 0.4;
}

.nav-crumb-page {
  padding: 5px 6px;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: var(--text-primary);
  cursor: pointer;
  transition: color 0.25s ease;
}

.nav-crumb-page:hover { color: var(--teal); }

.nav-now {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 6px 12px;
  border: 0;
  border-radius: 100px;
  background: color-mix(in srgb, var(--teal) 13%, transparent);
  color: var(--teal-dark);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.25s ease;
}

[data-theme="dark"] .nav-now { color: var(--teal); }

.nav-now:hover { background: color-mix(in srgb, var(--teal) 22%, transparent); }

.nav-now-dot {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 3px var(--teal-glow);
  animation: crumb-pulse 2.6s ease-in-out infinite;
}

@keyframes crumb-pulse {
  0%, 100% { box-shadow: 0 0 0 3px var(--teal-glow); }
  50% { box-shadow: 0 0 0 6px transparent; }
}

/* The label rolls up out of the chip when the section changes — a departure
   board, not a text swap. The mask hides the arriving line until it is in. */
.nav-now-roll {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.nav-now-label {
  display: block;
  animation: crumb-roll 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes crumb-roll {
  from { opacity: 0; transform: translateY(105%); }
  to { opacity: 1; transform: none; }
}

.nav-now-count {
  flex: none;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  opacity: 0.6;
  font-variant-numeric: tabular-nums;
}

/* Exactly one of the two copies is ever shown. */
.nav-rail-now { display: none; }

/* ===== Rail — collapsed to one icon, expands left on hover ===== */
.nav-rail {
  display: flex;
  align-items: center;
  padding: 5px;
  border-radius: 100px;
  background: var(--nav-bg);
  backdrop-filter: blur(24px) saturate(1.6);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  border: none;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
  transition: background 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.glass-nav.scrolled .nav-rail {
  background: var(--nav-bg-scrolled);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.09);
}

[data-theme="dark"] .nav-rail {
  box-shadow: 0 4px 22px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .glass-nav.scrolled .nav-rail {
  box-shadow: 0 8px 36px rgba(0, 0, 0, 0.42);
}

/* The 0fr → 1fr grid track is what animates. It lets the rail size itself to
   whatever the links happen to be instead of hard-coding an expanded width. */
.nav-rail-content {
  display: grid;
  grid-template-columns: 0fr;
  opacity: 0;
  transition:
    grid-template-columns 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.3s ease;
}

/* overflow:hidden is required, not decorative: it zeroes the grid item's
   automatic minimum size so the 0fr track can actually collapse. Keep this
   box free of padding — padding sits outside the track and would leave a
   sliver of width behind when collapsed. */
.nav-rail-items {
  display: flex;
  align-items: center;
  gap: 22px;
  overflow: hidden;
  min-width: 0;
  white-space: nowrap;
}

.nav-rail-items > :first-child {
  margin-left: 18px;
}

.nav-rail-items > :last-child {
  margin-right: 10px;
}

.nav-rail:hover .nav-rail-content,
.nav-rail:focus-within .nav-rail-content,
.glass-nav.menu-open .nav-rail-content {
  grid-template-columns: 1fr;
  opacity: 1;
}

.nav-rail-link {
  text-decoration: none;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: color 0.2s;
  position: relative;
}

.nav-rail-link::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 0;
  height: 1.5px;
  background: var(--teal);
  transition: width 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.nav-rail-link:hover {
  color: var(--teal);
}

.nav-rail-link:hover::after {
  width: 100%;
}

.nav-rail-sep {
  width: 1px;
  height: 18px;
  background: var(--glass-border);
  flex-shrink: 0;
}

/* ===== Trigger — the only thing visible when collapsed ===== */
.nav-trigger {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: background 0.3s ease;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  appearance: none;
}

.nav-trigger:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

.nav-trigger:hover {
  background: var(--teal-light);
}

.nav-trigger span {
  display: block;
  height: 1.5px;
  border-radius: 2px;
  background: var(--text-primary);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Staggered widths so the collapsed state reads as a menu glyph rather than a
   stack of identical rules. */
.nav-trigger span:nth-child(1) { width: 16px; }
.nav-trigger span:nth-child(2) { width: 11px; }
.nav-trigger span:nth-child(3) { width: 16px; }

.nav-rail:hover .nav-trigger span,
.nav-rail:focus-within .nav-trigger span {
  width: 16px;
  background: var(--teal);
}

/* Clicked open (touch, or a deliberate desktop click) — the glyph becomes the
   close affordance. */
.glass-nav.menu-open .nav-trigger span:nth-child(1) {
  transform: translateY(5.5px) rotate(45deg);
}
.glass-nav.menu-open .nav-trigger span:nth-child(2) {
  opacity: 0;
}
.glass-nav.menu-open .nav-trigger span:nth-child(3) {
  transform: translateY(-5.5px) rotate(-45deg);
}

/* ===== Actions inside the rail ===== */
/* The CTA is an icon disc and stays one — hovering colours and lifts it, it
   never unrolls a label. The name lives in aria-label and the native tooltip. */
.nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  background: var(--btn-primary-bg);
  color: var(--btn-primary-color) !important;
  text-decoration: none;
  transition:
    transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.3s ease,
    box-shadow 0.3s ease;
  border: none;
  cursor: pointer;
  font-family: inherit;
  flex-shrink: 0;
  outline: none;
}

.nav-cta:hover,
.nav-cta:focus-visible {
  background: var(--teal);
  color: #fff !important;
  transform: scale(1.06);
  box-shadow: 0 4px 20px var(--teal-glow), 0 0 40px rgba(10, 186, 181, 0.1);
}

.nav-cta:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

[data-theme="dark"] .nav-cta {
  box-shadow: 0 2px 12px rgba(20, 217, 211, 0.2);
}

[data-theme="dark"] .nav-cta:hover {
  background: #1AEAE4;
  color: #0B0F1A !important;
  box-shadow: 0 4px 20px rgba(20, 217, 211, 0.35), 0 0 40px rgba(20, 217, 211, 0.1);
}

/* Borderless inside the rail — the rail is already the glass surface, a second
   outline inside it just adds noise. */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  flex-shrink: 0;
  padding: 0;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  appearance: none;
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

.theme-toggle:hover {
  color: var(--teal);
  background: var(--teal-light);
  transform: rotate(15deg);
}

/* ===== Mobile sheet ===== */
.nav-mobile-menu {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: min(320px, 100%);
  padding: 16px;
  background: var(--nav-sheet-bg);
  border: none;
  border-radius: 22px;
  flex-direction: column;
  gap: 4px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

[data-theme="dark"] .nav-mobile-menu {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
}

.nav-mobile-menu a {
  display: block;
  padding: 12px 16px;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-primary);
  text-decoration: none;
  border-radius: 12px;
  transition: background 0.2s, color 0.2s;
}

.nav-mobile-menu a:hover,
.nav-mobile-menu a:focus {
  background: var(--teal-light);
  color: var(--teal);
}

/* Mode and CTA share this row, and both are 46px tall so they sit on exactly
   the same line — the mode button is a fixed square, the CTA takes the rest. */
.nav-mobile-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

.nav-mobile-theme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 46px;
  height: 46px;
  padding: 0;
  border: none;
  border-radius: 100px;
  background: var(--teal-light);
  color: var(--text-primary);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  -webkit-tap-highlight-color: transparent;
}

.nav-mobile-theme:hover,
.nav-mobile-theme:focus-visible {
  color: var(--teal);
  outline: none;
}

.nav-mobile-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  height: 46px;
  padding: 0 20px;
  border-radius: 100px;
  background: var(--btn-primary-bg);
  color: var(--btn-primary-color);
  font-size: 14px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.3s ease;
}

.nav-mobile-cta:hover {
  background: var(--teal);
  color: #fff;
}

/* ===== Responsive ===== */
@media (max-width: 1024px) {
  .glass-nav {
    width: calc(100% - 40px);
  }

  .nav-rail-items {
    gap: 18px;
  }

  .nav-rail-link {
    font-size: 12.5px;
  }
}

/* Tablet portrait and below: no hover to rely on, and not enough room to grow
   a full rail sideways, so the trigger opens the sheet instead. */
@media (max-width: 960px) {
  .glass-nav {
    top: 12px;
    height: 50px;
    width: calc(100% - 28px);
    gap: 12px;
  }

  .nav-logo-img {
    height: 40px;
  }

  .nav-rail:hover .nav-rail-content,
  .nav-rail:focus-within .nav-rail-content,
  .glass-nav.menu-open .nav-rail-content {
    grid-template-columns: 0fr;
    opacity: 0;
  }

  .nav-rail:hover .nav-trigger span,
  .nav-rail:focus-within .nav-trigger span {
    background: var(--text-primary);
  }
  .nav-rail:hover .nav-trigger span:nth-child(2),
  .nav-rail:focus-within .nav-trigger span:nth-child(2) {
    width: 11px;
  }

  .nav-mobile-menu {
    display: flex;
  }

  .glass-nav.menu-open .nav-mobile-menu {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  /* While the sheet is open the rail must be the SAME surface as the sheet.
     At rest the rail is 45–65% transparent glass, so it takes its colour from
     whatever hero artwork is behind it, while the sheet below is opaque — two
     panels of the same family reading as two different colours, right where
     they sit closest together. Opaque and identical here, glass again on
     close. Must stay after the .scrolled rule above: equal specificity, so
     source order is what decides. */
  .glass-nav.menu-open .nav-rail {
    background: var(--nav-sheet-bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.09);
  }

  [data-theme="dark"] .glass-nav.menu-open .nav-rail {
    box-shadow: 0 8px 36px rgba(0, 0, 0, 0.42);
  }
}

@media (max-width: 480px) {
  .glass-nav {
    top: 10px;
    height: 46px;
    width: calc(100% - 20px);
  }

  .nav-logo-img {
    height: 36px;
  }

  .nav-rail {
    padding: 4px;
  }

  .nav-trigger {
    width: 34px;
    height: 34px;
  }

  .nav-mobile-menu {
    padding: 14px;
    border-radius: 18px;
  }

  .nav-mobile-menu a {
    padding: 12px 14px;
    font-size: 14.5px;
  }

  .nav-mobile-cta {
    padding: 0 16px;
    font-size: 13.5px;
  }
}

/* .nav-minimal only has to drop the section links, which the component does by
   not rendering them. The mobile sheet still opens there so the mode switch
   and the CTA remain reachable on a phone. */

/* ===== Sheet as a module page's own map =====
   On a module page the sheet is the only navigation the nav offers, so it is
   available at every width rather than only below the tablet breakpoint. */
.nav-minimal .nav-mobile-menu { display: flex; }

.glass-nav.nav-minimal.menu-open .nav-mobile-menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.nav-sheet-home {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 16px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--teal);
  text-decoration: none;
  transition: background 0.2s ease;
}

.nav-sheet-home:hover { background: var(--teal-light); }

.nav-sheet-tag {
  padding: 12px 16px 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-secondary);
  opacity: 0.65;
}

.nav-sheet-sec {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 16px;
  border: 0;
  border-radius: 12px;
  background: none;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  text-align: left;
  color: var(--text-primary);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.nav-sheet-sec:hover { background: var(--teal-light); color: var(--teal); }

.nav-sheet-sec.is-active {
  background: color-mix(in srgb, var(--teal) 14%, transparent);
  color: var(--teal-dark);
}

[data-theme="dark"] .nav-sheet-sec.is-active { color: var(--teal); }

.nav-sheet-num {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  opacity: 0.5;
  font-variant-numeric: tabular-nums;
}

.nav-sheet-sec.is-active .nav-sheet-num { opacity: 1; }

/* ===== Breadcrumb, narrow ===== */
@media (max-width: 860px) {
  .nav-now { padding: 5px 10px; }
  .nav-now-count { display: none; }
}

/* Below the tablet breakpoint there is no width for a trail beside the
   wordmark. Rather than float a third piece under the row — the nav is two
   floating pieces, and a third read as debris — the trail drops away and its
   live chip moves into the rail, beside the trigger it shares a job with. The
   module's own name is carried by the sheet that chip opens, and by the page's
   heading right below it. */
@media (max-width: 700px) {
  .nav-crumb { display: none; }

  .nav-rail-now {
    display: block;
    margin: 0 2px 0 6px;
    min-width: 0;
  }

  .nav-rail-now .nav-now {
    max-width: 46vw;
    padding: 5px 11px;
    font-size: 11.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-now-dot { animation: none; }
  .nav-now-label { animation: none; }
}
footer {
  background: var(--section-glass-bg);
  backdrop-filter: blur(var(--section-glass-blur)) saturate(1.2);
  -webkit-backdrop-filter: blur(var(--section-glass-blur)) saturate(1.2);
  border-top: 1px solid var(--section-glass-border);
  padding: 56px 48px 32px;
  transition: background 0.4s, border-color 0.4s;
}

.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
}

.footer-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.footer-logo img {
  height: 44px;
  width: auto;
  object-fit: contain;
  display: block;
}

.footer-logo .footer-logo-dark {
  display: none;
}

[data-theme="dark"] .footer-logo .footer-logo-light {
  display: none;
}

[data-theme="dark"] .footer-logo .footer-logo-dark {
  display: block;
}

.footer-tagline {
  font-size: 14px;
  color: var(--text-tertiary);
  line-height: 1.7;
  max-width: 420px;
  margin: 0;
}

.footer-bottom {
  max-width: 1200px;
  margin: 40px auto 0;
  padding-top: 24px;
  border-top: 1px solid var(--section-glass-border);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 13px;
  color: var(--text-tertiary);
}

@media (max-width: 960px) {
  footer {
    padding: 48px 24px 28px;
  }
}
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
  animation: modalFadeIn 0.3s ease;
}

.modal-content {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 48px;
  max-width: 560px;
  width: 100%;
  position: relative;
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--border-light);
  animation: modalSlideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
  transition: background 0.4s, border-color 0.4s;
}

.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.modal-close:hover {
  border-color: var(--teal);
  color: var(--teal);
}

.modal-header {
  margin-bottom: 32px;
}

.modal-header h3 {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 28px;
  font-weight: 400;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}

.modal-header p {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* Form */
.modal-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-group label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.01em;
}

.form-group input,
.form-group textarea {
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-primary);
  font-size: 14px;
  font-family: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
}

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

.form-group input:focus,
.form-group textarea:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px var(--teal-glow);
}

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

/* Invalid state. Listed after :focus so a field that is both focused and
   invalid stays red rather than flipping back to teal. */
.form-group input[aria-invalid="true"],
.form-group textarea[aria-invalid="true"] {
  border-color: #ef4444;
}

.form-group input[aria-invalid="true"]:focus,
.form-group textarea[aria-invalid="true"]:focus {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

.field-error {
  font-size: 12.5px;
  line-height: 1.35;
  color: #ef4444;
}

/* Honeypot. Off-screen rather than display:none — a bot that skips hidden
   inputs would otherwise walk straight past it. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.form-submit {
  width: 100%;
  justify-content: center;
  margin-top: 4px;
}

.form-submit:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none !important;
}

.form-submit-emoji {
  font-size: 1.3em;
  line-height: 1;
  display: inline-block;
}

.spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

[data-theme="dark"] .spinner {
  border-color: rgba(11, 15, 26, 0.3);
  border-top-color: #0B0F1A;
}

.form-error {
  font-size: 13px;
  color: #ef4444;
  text-align: center;
}

/* Success state */
.modal-success {
  text-align: center;
  padding: 24px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.success-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--teal-light);
  color: var(--teal);
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-success h3 {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 24px;
  font-weight: 400;
}

.modal-success p {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
  max-width: 320px;
}

.modal-success .btn-primary {
  margin-top: 8px;
}

/* Animations */
@keyframes modalFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes modalSlideUp {
  from { opacity: 0; transform: translateY(24px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Responsive */
@media (max-width: 600px) {
  .modal-overlay {
    padding: 12px;
    align-items: flex-start;
    padding-top: 20px;
  }
  .modal-content {
    padding: 28px 20px;
    border-radius: 20px;
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
  }
  .modal-header { margin-bottom: 24px; }
  .modal-header h3 { font-size: 24px; }
  .modal-header p { font-size: 13px; }
  .modal-close {
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
  }
  .form-row {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .modal-form { gap: 14px; }
  .form-group input,
  .form-group textarea {
    font-size: 15px;
    padding: 11px 14px;
  }
}

@media (max-width: 380px) {
  .modal-content {
    padding: 24px 16px;
  }
  .modal-header h3 { font-size: 22px; }
}
.cookie-consent {
  position: fixed;
  bottom: 16px;
  left: 16px;
  right: 16px;
  z-index: 2000;
  display: flex;
  justify-content: center;
  pointer-events: none;
  animation: cookieSlideUp 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.cookie-consent-inner {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 24px;
  max-width: 960px;
  width: 100%;
  padding: 18px 22px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border: 1px solid var(--border);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(10, 186, 181, 0.08);
  color: var(--text-primary);
}

[data-theme="dark"] .cookie-consent-inner {
  background: rgba(11, 15, 26, 0.98);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(20, 217, 211, 0.12);
}

.cookie-consent-text {
  flex: 1;
  min-width: 0;
}

.cookie-consent-text h4 {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 4px;
  letter-spacing: 0.005em;
}

.cookie-consent-text p {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0;
}

.cookie-consent-text a {
  color: var(--teal);
  text-decoration: none;
  font-weight: 500;
}

.cookie-consent-text a:hover {
  text-decoration: underline;
}

.cookie-consent-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.cookie-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  white-space: nowrap;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.cookie-btn:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

.cookie-btn-secondary {
  background: transparent;
  color: var(--text-secondary);
  border-color: var(--border);
}

.cookie-btn-secondary:hover {
  color: var(--text-primary);
  border-color: var(--text-tertiary);
  background: var(--bg-warm);
}

.cookie-btn-primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-color);
}

.cookie-btn-primary:hover {
  background: var(--teal);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 20px var(--teal-glow);
}

[data-theme="dark"] .cookie-btn-primary:hover {
  background: #1AEAE4;
  color: #0B0F1A;
  box-shadow: 0 4px 20px rgba(20, 217, 211, 0.35);
}

@keyframes cookieSlideUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 720px) {
  .cookie-consent {
    bottom: 12px;
    left: 12px;
    right: 12px;
  }
  .cookie-consent-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 16px 18px;
  }
  .cookie-consent-actions {
    width: 100%;
  }
  .cookie-btn {
    flex: 1;
  }
}
.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 120px 48px 160px;
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

/* Hero spotlight — opaque radial fade behind text, seamlessly blends into the
   ambient overlay at its edges so there is no visible boundary. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 45% 75% at 38% 42%,
    rgba(248, 247, 244, 0.96) 0%,
    rgba(248, 247, 244, 0.88) 35%,
    rgba(248, 247, 244, 0.55) 60%,
    rgba(248, 247, 244, 0) 90%
  );
  pointer-events: none;
  z-index: -1;
}

[data-theme="dark"] .hero::before {
  background: radial-gradient(
    ellipse 45% 75% at 38% 42%,
    rgba(11, 15, 26, 0.96) 0%,
    rgba(11, 15, 26, 0.88) 35%,
    rgba(11, 15, 26, 0.55) 60%,
    rgba(11, 15, 26, 0) 90%
  );
}

.hero h1,
.hero-sub {
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.35);
}

[data-theme="light"] .hero h1,
[data-theme="light"] .hero-sub {
  text-shadow: 0 1px 14px rgba(248, 247, 244, 0.8);
}

/* Teal radial glow behind content */
.hero-glow {
  position: absolute;
  top: -20%;
  left: 50%;
  transform: translateX(-50%);
  overflow: clip;
  width: 900px;
  height: 900px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(10, 186, 181, 0.1) 0%, rgba(10, 186, 181, 0.03) 40%, transparent 70%);
  pointer-events: none;
  animation: hero-glow-pulse 6s ease-in-out infinite;
}

@keyframes hero-glow-pulse {
  0%, 100% { opacity: 0.6; transform: translateX(-50%) scale(1); }
  50% { opacity: 1; transform: translateX(-50%) scale(1.1); }
}

/* Subtle grid overlay */
.hero-grid-overlay {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(10, 186, 181, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 186, 181, 0.025) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 60% 60% at 50% 40%, black, transparent);
  -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 40%, black, transparent);
  pointer-events: none;
}

/* Badge */
/* Title */
.hero h1 {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(34px, 7vw, 88px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.03em;
  max-width: 900px;
  margin-bottom: 28px;
  word-break: break-word;
}

.hero-line {
  display: block;
}

.hero h1 em {
  font-style: italic;
  background: linear-gradient(135deg, var(--teal), #14D9D3, #1AEAE4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Subtitle */
.hero-sub {
  font-size: clamp(15px, 2.2vw, 19px);
  line-height: 1.65;
  color: var(--text-secondary);
  max-width: 560px;
  font-weight: 400;
  margin-bottom: 48px;
  padding: 0 8px;
}

/* Actions */
.hero-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Glowing primary button */
.btn-glow {
  position: relative;
}

.btn-glow::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 100px;
  background: linear-gradient(135deg, rgba(10, 186, 181, 0.4), rgba(20, 217, 211, 0.1));
  z-index: -1;
  filter: blur(16px);
  opacity: 0;
  transition: opacity 0.4s;
}

.btn-glow:hover::after {
  opacity: 1;
}

/* Glass secondary button */
.btn-glass {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* --- Browser mockup --- */
.hero-visual {
  width: 100%;
  max-width: min(1120px, 100%);
  margin-top: 32px;
  position: relative;
  will-change: transform;
}

.hero-browser {
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.glass-panel {
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(32px) saturate(1.3);
  -webkit-backdrop-filter: blur(32px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow:
    0 32px 80px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(255, 255, 255, 0.02);
}

[data-theme="light"] .glass-panel {
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(32px) saturate(1.4);
  -webkit-backdrop-filter: blur(32px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow:
    var(--shadow-xl),
    0 0 0 1px rgba(255, 255, 255, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.browser-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 20px;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

[data-theme="light"] .browser-bar {
  background: var(--bg-warm);
  border-bottom: 1px solid var(--border-light);
}

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

.browser-dot:nth-child(1) { background: #FF6058; }
.browser-dot:nth-child(2) { background: #FFBD2E; }
.browser-dot:nth-child(3) { background: #28CA42; }

.browser-url {
  flex: 1;
  text-align: center;
  font-size: 12px;
  color: var(--text-tertiary);
  margin-left: -34px;
}

.browser-content {
  background: var(--card-dark-bg);
  overflow: hidden;
}

.browser-graphic {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: top center;
}

/* Kept here because .feature-reel's .reel-slot reuses the glass card look */
.glass-card {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(24px) saturate(1.3);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-sm);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

[data-theme="light"] .glass-card {
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow:
    var(--shadow-lg),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* ===================================================================
   Feature Reel — horizontal focus strip below the browser mockup.
   One showcase at a time: center slot is highlighted, flanking
   slots peek in at reduced scale and opacity. Track slides every 3s.
   =================================================================== */
.feature-reel {
  position: relative;
  margin-top: 16px;
  padding: 14px 0 20px;
  opacity: 0;
  isolation: isolate;
  background: transparent;
  border: none;
  box-shadow: none;
}

[data-theme="light"] .feature-reel {
  background: transparent;
  border: none;
  box-shadow: none;
}

/* Header row: label · currently-showing title · counter */
.feature-reel .reel-head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  gap: 24px;
  padding: 0 24px 10px;
  border-bottom: 1px solid rgba(127, 127, 127, 0.15);
}

.feature-reel .reel-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.feature-reel .reel-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 10px rgba(10, 186, 181, 0.85);
  animation: reelLivePulse 1.4s ease-in-out infinite;
}

@keyframes reelLivePulse {
  0%, 100% { opacity: 0.4; transform: scale(0.75); }
  50%      { opacity: 1;   transform: scale(1.3); }
}

.feature-reel .reel-title-main {
  justify-self: center;
  text-align: center;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  animation: reelTitleSwap 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.feature-reel .reel-title-main em {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: 22px;
  line-height: 1.1;
  background: linear-gradient(135deg, var(--teal), #14D9D3);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.75));
  letter-spacing: -0.01em;
}

[data-theme="light"] .feature-reel .reel-title-main em {
  background: linear-gradient(135deg, #067672, #0ABAB5);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 1px 2px rgba(255, 255, 255, 0.9));
}

.feature-reel .reel-title-sub {
  font-size: 12px;
  color: #ffffff;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8), 0 0 2px rgba(0, 0, 0, 0.6);
}

[data-theme="light"] .feature-reel .reel-title-sub {
  color: var(--text-primary);
  text-shadow: none;
}

@keyframes reelTitleSwap {
  0%   { opacity: 0; transform: translateY(8px); filter: blur(6px); }
  100% { opacity: 1; transform: translateY(0);   filter: blur(0); }
}

.feature-reel .reel-counter {
  justify-self: end;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

.feature-reel .reel-counter-sep { margin: 0 4px; opacity: 0.5; }

/* Horizontal viewport with spotlight + edge mask */
.feature-reel .reel-viewport {
  position: relative;
  margin-top: 10px;
  height: 140px;
  overflow-x: clip;
  overflow-y: visible;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

/* Soft teal spotlight fixed behind the center slot */
.feature-reel .reel-spotlight {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 320px;
  height: 200px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    ellipse,
    rgba(10, 186, 181, 0.22) 0%,
    rgba(20, 217, 211, 0.1) 40%,
    transparent 70%
  );
  pointer-events: none;
  filter: blur(4px);
  z-index: 0;
}

/* The sliding rail */
.feature-reel .reel-track {
  --slot-w: 300px;
  --slot-gap: 20px;
  position: absolute;
  top: 50%;
  left: calc(50% - var(--slot-w) / 2);
  display: flex;
  gap: var(--slot-gap);
  /* translate so the slot at index --idx sits dead center */
  transform: translate(
    calc(-1 * var(--idx) * (var(--slot-w) + var(--slot-gap))),
    -50%
  );
  transition: transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
  z-index: 1;
}

/* Each slot */
.feature-reel .reel-slot {
  position: relative;
  width: var(--slot-w);
  min-height: 108px;
  padding: 16px 20px 16px 16px;
  border-radius: 14px;
  background: rgba(11, 15, 26, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  z-index: 1;
  transform-origin: center center;
  transition:
    transform 800ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 800ms ease,
    filter 800ms ease,
    background 800ms ease,
    border-color 800ms ease,
    box-shadow 800ms ease;
}

[data-theme="dark"] .feature-reel .reel-slot {
  background: rgba(11, 15, 26, 0.72);
  border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="light"] .feature-reel .reel-slot {
  background: rgba(248, 247, 244, 0.82);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* Distance-based visual treatment */
.feature-reel .reel-slot.active {
  background: linear-gradient(
    135deg,
    rgba(10, 186, 181, 0.12) 0%,
    rgba(20, 217, 211, 0.04) 100%
  );
  border-color: rgba(10, 186, 181, 0.45);
  box-shadow:
    0 18px 48px rgba(10, 186, 181, 0.28),
    0 0 0 1px rgba(10, 186, 181, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transform: scale(1.05);
  opacity: 1;
  filter: none;
  z-index: 4;
}

.feature-reel .reel-slot.near { z-index: 3; }
.feature-reel .reel-slot.far { z-index: 2; }

[data-theme="light"] .feature-reel .reel-slot.active {
  background: linear-gradient(
    135deg,
    rgba(10, 186, 181, 0.12) 0%,
    rgba(255, 255, 255, 0.9) 100%
  );
}

.feature-reel .reel-slot.near {
  opacity: 0.85;
  transform: scale(0.94);
  filter: saturate(0.85);
}

.feature-reel .reel-slot.far {
  opacity: 0.55;
  transform: scale(0.86);
  filter: saturate(0.6);
}

.feature-reel .reel-slot.distant {
  opacity: 0.2;
  transform: scale(0.78);
  filter: saturate(0.2) blur(1px);
}

/* Active top indicator line */
.feature-reel .reel-slot.active::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 14px;
  right: 14px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--teal), #14D9D3, transparent);
  box-shadow: 0 0 8px rgba(10, 186, 181, 0.6);
  animation: reelActiveLine 800ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes reelActiveLine {
  0% { opacity: 0; transform: scaleX(0.4); }
  100% { opacity: 1; transform: scaleX(1); }
}

/* Slot icon */
.feature-reel .reel-icon {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  transition: transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
}

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

.feature-reel .reel-slot.active .reel-icon {
  transform: scale(1.08) rotate(-3deg);
}


.reel-icon-orange { background: rgba(245, 124, 0, 0.14); color: #F57C00; }
.reel-icon-teal   { background: rgba(10, 186, 181, 0.14); color: var(--teal); }
.reel-icon-purple { background: rgba(142, 36, 170, 0.14); color: #8E24AA; }

.feature-reel .reel-text {
  min-width: 0;
  flex: 1;
}

.feature-reel .reel-slot-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}

.feature-reel .reel-slot-sub {
  font-size: 11.5px;
  font-weight: 400;
  color: #ffffff;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

[data-theme="light"] .feature-reel .reel-slot-sub {
  color: var(--text-primary);
}

.feature-reel .reel-slot.active .reel-slot-title,
.feature-reel .reel-slot.active .reel-slot-sub {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

.feature-reel .reel-slot.active .reel-slot-sub {
  font-size: 12px;
}

.feature-reel .reel-slot-index {
  position: absolute;
  top: 8px;
  right: 12px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
  opacity: 0.6;
}

.feature-reel .reel-slot.active .reel-slot-index {
  color: var(--teal);
  opacity: 1;
}

/* Scroll indicator */
.hero-scroll-indicator {
  position: absolute;
  bottom: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  opacity: 0.4;
  animation: fadeUp 0.8s ease 2.5s forwards;
}

.hero-scroll-indicator span {
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.scroll-mouse {
  width: 22px;
  height: 34px;
  border-radius: 11px;
  border: 2px solid var(--text-tertiary);
  position: relative;
}

.scroll-wheel {
  width: 3px;
  height: 8px;
  border-radius: 2px;
  background: var(--teal);
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  animation: scroll-bounce 1.8s ease-in-out infinite;
}

@keyframes scroll-bounce {
  0%, 100% { opacity: 1; transform: translateX(-50%) translateY(0); }
  50% { opacity: 0.3; transform: translateX(-50%) translateY(8px); }
}

@media (max-width: 960px) {
  .hero {
    padding: 100px 24px 100px;
  }
  .hero-scroll-indicator { display: none; }

  .feature-reel .reel-head {
    grid-template-columns: auto 1fr;
    padding: 0 16px 14px;
  }
  .feature-reel .reel-title-main { display: none; }
  .feature-reel .reel-track {
    --slot-w: 240px;
    --slot-gap: 24px;
  }
  .feature-reel .reel-viewport {
    height: 150px;
    touch-action: pan-y;
  }
}

@media (max-width: 600px) {
  .hero {
    padding: 90px 16px 80px;
  }

  .hero h1 {
    font-size: clamp(30px, 9vw, 44px);
    margin-bottom: 20px;
  }

  .hero-sub {
    font-size: 14.5px;
    margin-bottom: 32px;
  }

  .hero-visual { margin-top: 20px; }

  .browser-bar { padding: 10px 12px; }
  .browser-url { font-size: 10px; margin-left: 0; }
  .browser-dot { width: 8px; height: 8px; }

  .feature-reel .reel-track {
    --slot-w: 200px;
    --slot-gap: 20px;
  }

  .feature-reel .reel-slot {
    padding: 12px 14px;
    min-height: 92px;
  }

  .feature-reel .reel-viewport { height: 140px; }

  .feature-reel .reel-icon {
    width: 36px;
    height: 36px;
  }

  .feature-reel .reel-slot-title { font-size: 13px; }
  .feature-reel .reel-slot-sub { font-size: 11px; }
}

@media (max-width: 380px) {
  .hero { padding: 84px 12px 60px; }
  .hero h1 { font-size: clamp(26px, 9vw, 36px); }
}
.ticker-section {
  position: relative;
  z-index: 1;
  clear: both;
  margin-top: 120px;
  padding: 48px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  overflow: hidden;
  transition: background 0.4s, border-color 0.4s, backdrop-filter 0.4s;
}

[data-theme="dark"] .ticker-section {
  background: rgba(11, 15, 26, 0.35);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.ticker-label {
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-tertiary);
  margin-bottom: 28px;
}

.ticker-overflow {
  overflow: hidden;
}

.ticker-track {
  display: flex;
  gap: 64px;
  align-items: center;
  animation: ticker 30s linear infinite;
  width: max-content;
}

.ticker-item {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-tertiary);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 10px;
}

.ticker-item .ti-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--teal);
  opacity: 0.5;
  box-shadow: 0 0 6px rgba(10, 186, 181, 0.4);
}
.manifesto {
  background: transparent;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: background 0.4s;
}

.manifesto .section-desc {
  max-width: 640px;
  margin-bottom: 40px;
}

.stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  width: 100%;
  max-width: 980px;
  background: transparent;
}

/* The card is a flat pane, not a box: no border and no inset highlight edge —
   the gradient wash and the drop shadow carry the shape on their own, with
   everything set left so the numeral and the copy share one reading edge. */
.stat-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  padding: 28px 26px 26px;
  text-align: left;
  border-radius: 20px;
  border: none;
  background: linear-gradient(
    155deg,
    rgba(255, 255, 255, 0.92),
    rgba(255, 255, 255, 0.62)
  );
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.07);
  transition:
    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.4s ease,
    box-shadow 0.4s ease;
}

/* Lifted a touch over the borderless light theme: with no outline, the wash is
   the only thing separating the pane from the globe behind it. */
[data-theme="dark"] .stat-card {
  background: linear-gradient(
    155deg,
    rgba(255, 255, 255, 0.085),
    rgba(255, 255, 255, 0.025)
  );
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
}

/* Accent rule along the top edge — drawn in from the left on hover, which is
   what marks the active card rather than flooding the whole pane with teal. */
.stat-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, var(--teal), #14D9D3, transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Soft light source behind the numeral, off until hover. */
.stat-card::after {
  content: '';
  position: absolute;
  top: -40%;
  left: -10%;
  width: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, var(--teal-glow), transparent 70%);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
  z-index: -1;
}

/* Deliberately over-qualified: .reveal.visible .stagger-item in index.css pins
   transform to translateY(0) at three classes, so a bare .stat-card:hover lift
   loses the cascade and never fires. The zeroed delay is from the same rule —
   the stagger delay would otherwise hold the hover back by up to 150ms. */
.manifesto .stat-row .stat-card:hover {
  transform: translateY(-6px);
  transition-delay: 0s;
  box-shadow: 0 18px 44px rgba(10, 186, 181, 0.16);
}

.stat-card:hover::before {
  transform: scaleX(1);
}

.stat-card:hover::after {
  opacity: 1;
}

/* Ordinal in the corner — sets the three panes up as a sequence and gives the
   empty top-right something to hold. */
.stat-index {
  position: absolute;
  top: 20px;
  right: 22px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--text-secondary);
  opacity: 0.4;
  transition: color 0.3s, opacity 0.3s;
}

.stat-card:hover .stat-index {
  color: var(--teal);
  opacity: 1;
}

.stat-number {
  display: flex;
  align-items: baseline;
  gap: 2px;
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 60px;
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--teal), #14D9D3);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.stat-unit {
  font-size: 30px;
  line-height: 1;
  opacity: 0.75;
}

.stat-text {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.stat-title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  line-height: 1.35;
}

.stat-detail {
  font-size: 13.5px;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* One column below the breakpoint, but laid out sideways so three stacked
   cards don't turn into a column of near-empty panes. */
@media (max-width: 860px) {
  .stat-row {
    grid-template-columns: 1fr;
    gap: 14px;
    max-width: 520px;
  }

  .stat-card {
    flex-direction: row;
    align-items: center;
    gap: 22px;
    padding: 22px 24px;
  }

  .stat-number {
    font-size: 46px;
    min-width: 92px;
  }

  .stat-unit {
    font-size: 24px;
  }

  .stat-index {
    display: none;
  }
}

@media (max-width: 420px) {
  .stat-card {
    gap: 16px;
    padding: 20px;
  }

  .stat-number {
    font-size: 40px;
    min-width: 74px;
  }

  .stat-title {
    font-size: 14px;
  }

  .stat-detail {
    font-size: 12.5px;
  }
}
.features {
  background: transparent;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: background 0.4s;
}

/* ── Feature grid ─────────────────────────────────────────────────────
   Six columns, every tile spanning two, so placement lands as an even
   3 × 2 grid:
     row 1  [ Studio ][ Batch ][ Alarms ]
     row 2  [ Reports ][ Analytics ][ Native AI ]                      */
.features-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: minmax(210px, auto);
  gap: 14px;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.feature-card {
  position: relative;
  grid-column: span 2;
  text-align: left;
  border-radius: 20px;
  overflow: hidden;
  isolation: isolate;
  cursor: default;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.feature-card-clickable {
  cursor: pointer;
}

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

.feature-card:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}

/* Cursor-tracked glow wash behind the tile content. */
.feature-card-glow {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(
    340px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(10, 186, 181, 0.16),
    transparent 62%
  );
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 2;
}

.feature-card:hover .feature-card-glow {
  opacity: 1;
}

/* Cursor-tracked 1px border highlight (gradient masked to the ring). */
.feature-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(
    260px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(10, 186, 181, 0.85),
    rgba(10, 186, 181, 0) 65%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 3;
}

.feature-card:hover::after {
  opacity: 1;
}

.feature-card-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 30px 28px 28px;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.55);
  transition: background 0.4s ease, border-color 0.4s ease;
}

[data-theme="dark"] .feature-card-inner {
  background: rgba(14, 19, 32, 0.62);
  border-color: rgba(255, 255, 255, 0.07);
}

.feature-card:hover .feature-card-inner {
  background: rgba(255, 255, 255, 0.82);
}

[data-theme="dark"] .feature-card:hover .feature-card-inner {
  background: rgba(14, 19, 32, 0.85);
}

/* ── Header row ── */
.feature-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}

.feature-tag {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal);
  padding: 5px 11px;
  border-radius: 999px;
  white-space: nowrap;
  background: rgba(10, 186, 181, 0.09);
  border: 1px solid rgba(10, 186, 181, 0.18);
  transition: background 0.3s ease, border-color 0.3s ease;
}

[data-theme="dark"] .feature-tag {
  background: rgba(20, 217, 211, 0.1);
  border-color: rgba(20, 217, 211, 0.22);
}

.feature-card:hover .feature-tag {
  background: rgba(10, 186, 181, 0.16);
  border-color: rgba(10, 186, 181, 0.35);
}

.feature-icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(10, 186, 181, 0.14) 0%, rgba(10, 186, 181, 0.05) 100%);
  color: var(--teal);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(10, 186, 181, 0.15);
  transition: all 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-theme="dark"] .feature-icon {
  background: linear-gradient(135deg, rgba(20, 217, 211, 0.16) 0%, rgba(20, 217, 211, 0.04) 100%);
  border-color: rgba(20, 217, 211, 0.2);
}

.feature-card:hover .feature-icon {
  transform: translateY(-2px) scale(1.06);
  border-color: rgba(10, 186, 181, 0.4);
  box-shadow: 0 8px 22px rgba(10, 186, 181, 0.18);
}

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

/* ── Copy ── */
.feature-body h3 {
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 10px;
  letter-spacing: -0.01em;
  transition: color 0.3s;
}

.feature-card:hover .feature-body h3 {
  color: var(--teal);
}

.feature-body p {
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--text-secondary);
  max-width: 46ch;
}

/* ── Footer: link on interactive tiles, accent rule otherwise ── */
.feature-foot {
  margin-top: 16px;
}

.feature-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--teal);
  opacity: 0.8;
  transition: opacity 0.3s, gap 0.3s;
}

.feature-link svg {
  width: 14px;
  height: 14px;
}

.feature-card:hover .feature-link {
  opacity: 1;
  gap: 11px;
}

.feature-accent-line {
  display: block;
  height: 2px;
  width: 30px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--teal), transparent);
  opacity: 0.35;
  transform-origin: left;
  transition: all 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.feature-card:hover .feature-accent-line {
  opacity: 1;
  width: 52px;
}

/* ── Ambient visuals ──────────────────────────────────────────────────
   Sit at the bottom of each tile, pushed down by the auto margin so the
   copy always stays top-aligned. */
.feature-visual {
  margin-top: auto;
  padding-top: 22px;
  color: var(--teal);
  pointer-events: none;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  min-height: 46px;
}

/* Native AI — neural mesh */
.fv-neural {
  width: 100%;
  max-width: 340px;
  height: auto;
  opacity: 0.7;
  transition: opacity 0.4s ease;
}

.feature-card:hover .fv-neural {
  opacity: 1;
}

.fv-node {
  fill: currentColor;
  animation: fvPulse 3.2s ease-in-out infinite;
}

@keyframes fvPulse {
  0%, 100% { opacity: 0.35; r: 3.5; }
  50% { opacity: 1; r: 5; }
}

/* Analytics — a plotted series, growing on hover */
.fv-bars {
  display: flex;
  align-items: flex-end;
  gap: 7px;
  height: 46px;
}

.fv-bar {
  width: 26px;
  border-radius: 5px 5px 2px 2px;
  transform-origin: bottom;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.fv-bar-1 { height: 44px; background: linear-gradient(180deg, #F2545B, rgba(242, 84, 91, 0.15)); }
.fv-bar-2 { height: 30px; background: linear-gradient(180deg, #F0A202, rgba(240, 162, 2, 0.15)); }
.fv-bar-3 { height: 18px; background: linear-gradient(180deg, var(--teal), rgba(10, 186, 181, 0.12)); }

.feature-card:hover .fv-bar-1 { transform: scaleY(1.14); }
.feature-card:hover .fv-bar-2 { transform: scaleY(1.3); }
.feature-card:hover .fv-bar-3 { transform: scaleY(1.5); }

/* Alarms — the list itself: severity down the left, an acknowledged row under
   two that are still live. */
.fv-alarms {
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 100%;
  max-width: 215px;
}

.fv-alarm {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 9px;
  border-radius: 8px;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.fv-alarm-dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.fv-alarm-line {
  height: 4px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0.24;
  transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease;
}

/* Unacknowledged and critical — the one row that is still asking for someone. */
.fv-alarm.is-crit { background: rgba(242, 84, 91, 0.12); }
.fv-alarm.is-crit .fv-alarm-dot {
  background: #F2545B;
  animation: fvAlarmPulse 1.8s ease-in-out infinite;
}
.fv-alarm.is-crit .fv-alarm-line { width: 72%; }

.fv-alarm.is-high { background: rgba(240, 162, 2, 0.11); }
.fv-alarm.is-high .fv-alarm-dot { background: #F0A202; }
.fv-alarm.is-high .fv-alarm-line { width: 52%; }

.fv-alarm.is-ack { background: color-mix(in srgb, var(--teal) 10%, transparent); }
.fv-alarm.is-ack .fv-alarm-dot { background: var(--teal); }
.fv-alarm.is-ack .fv-alarm-line { width: 63%; opacity: 0.16; }

@keyframes fvAlarmPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(242, 84, 91, 0.55); }
  55% { box-shadow: 0 0 0 5px rgba(242, 84, 91, 0); }
}

.feature-card:hover .fv-alarm { transform: translateX(3px); }
.feature-card:hover .fv-alarm.is-crit { transform: translateX(6px); }
.feature-card:hover .fv-alarm-line { opacity: 0.4; }
.feature-card:hover .fv-alarm.is-ack .fv-alarm-line { opacity: 0.24; }

/* Reports — document rules */
.fv-lines {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 7px;
  width: 100%;
}

.fv-lines span {
  height: 4px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0.2;
  transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease;
}

.fv-lines span:nth-child(1) { width: 74%; }
.fv-lines span:nth-child(2) { width: 56%; }
.fv-lines span:nth-child(3) { width: 66%; }
.fv-lines span:nth-child(4) { width: 38%; }

.feature-card:hover .fv-lines span { opacity: 0.45; }
.feature-card:hover .fv-lines span:nth-child(1) { width: 86%; }
.feature-card:hover .fv-lines span:nth-child(2) { width: 68%; }
.feature-card:hover .fv-lines span:nth-child(3) { width: 78%; }
.feature-card:hover .fv-lines span:nth-child(4) { width: 50%; }

/* Studio — node graph */
.fv-studio {
  width: 100%;
  max-width: 170px;
  height: auto;
  opacity: 0.8;
}

.fv-chip {
  fill: currentColor;
  opacity: 0.35;
  animation: fvChip 3.6s ease-in-out infinite;
}

@keyframes fvChip {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 0.9; }
}

/* Batch — phase chain, two done, one running, one pending */
.fv-steps {
  display: flex;
  align-items: center;
  gap: 0;
  width: 100%;
  justify-content: flex-end;
}

.fv-step {
  width: 13px;
  height: 13px;
  flex: none;
  border-radius: 4px;
  border: 1.5px solid currentColor;
  opacity: 0.28;
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.fv-step.is-done {
  background: currentColor;
  opacity: 0.5;
}

.fv-step.is-live {
  background: currentColor;
  opacity: 1;
  animation: fvStep 2.4s ease-in-out infinite;
}

.fv-steps i {
  height: 1.5px;
  width: 22px;
  flex: 0 1 22px;
  background: currentColor;
  opacity: 0.25;
}

@keyframes fvStep {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 currentColor; }
  50% { transform: scale(1.18); box-shadow: 0 0 10px 0 currentColor; }
}

.feature-card:hover .fv-step.is-done { opacity: 0.75; }
.feature-card:hover .fv-step { opacity: 0.45; }
.feature-card:hover .fv-step.is-live { opacity: 1; }

/* ── Responsive ── */
@media (max-width: 1100px) {
  .features-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 760px) {
  .features-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    gap: 12px;
  }

  .feature-card {
    grid-column: span 1;
  }

  .feature-card-inner {
    padding: 26px 22px 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fv-node,
  .fv-chip,
  .fv-step.is-live,
  .fv-alarm.is-crit .fv-alarm-dot {
    animation: none;
  }

  .feature-card,
  .feature-card:hover {
    transform: none;
  }
}
.showcase {
  background: transparent;
  transition: background 0.4s;
}

.showcase-header {
  text-align: center;
}

.showcase-header .section-desc {
  text-align: center;
}

.bento-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(220px, auto);
  gap: 16px;
  max-width: 1200px;
  margin: 0 auto;
}

.bento-card {
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  background: rgba(13, 27, 42, 0.7);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
  padding: 0;
  font-family: inherit;
  color: inherit;
  text-align: left;
  min-height: 220px;
}

[data-theme="light"] .bento-card {
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}

.bento-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: linear-gradient(135deg, var(--card-dark-bg) 0%, var(--card-dark-mid) 50%, var(--card-dark-bg) 100%);
}

.bento-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

.bento-media-dual {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 2px;
}

.bento-media-dual .bento-img-primary,
.bento-media-dual .bento-img-secondary {
  object-fit: contain;
  object-position: center;
}

.bento-backend-strip {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 84px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 10px;
  padding: 8px 14px;
  z-index: 2;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  background: linear-gradient(0deg, rgba(13, 27, 42, 0.82), rgba(13, 27, 42, 0.4));
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.bento-backend-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

.bento-backend-sep {
  opacity: 0.4;
  color: var(--teal);
}

[data-theme="light"] .bento-backend-strip {
  color: var(--text-primary);
  background: linear-gradient(0deg, rgba(248, 247, 244, 0.9), rgba(248, 247, 244, 0.5));
}

.bento-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24px;
  background: linear-gradient(0deg, rgba(13, 27, 42, 0.95) 0%, rgba(13, 27, 42, 0.6) 60%, transparent 100%);
}

.bento-label h4 {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 3px;
  color: #fff;
}

.bento-label span {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}

.b1 { grid-column: 1 / 8;  grid-row: 1 / 3; }
.b2 { grid-column: 8 / 13; grid-row: 1 / 2; }
.b3 { grid-column: 8 / 13; grid-row: 2 / 3; }
.b4 { grid-column: 1 / 5;  grid-row: 3 / 4; }
.b5 { grid-column: 5 / 9;  grid-row: 3 / 4; }
.b6 { grid-column: 9 / 13; grid-row: 3 / 4; }

@media (max-width: 1024px) {
  .bento-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: minmax(240px, auto);
  }
  .b1, .b2, .b3, .b4, .b5, .b6 {
    grid-column: auto;
    grid-row: auto;
  }
}

@media (max-width: 640px) {
  .bento-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: minmax(220px, auto);
    gap: 12px;
  }
  .bento-card { min-height: 220px; }
  .bento-label { padding: 18px; }
  .bento-label h4 { font-size: 14px; }
  .bento-label span { font-size: 11px; }
}

/* ===================================================================
   Showcase detail modal
   =================================================================== */
.sc-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(6, 10, 18, 0.78);
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  animation: scModalFade 260ms ease forwards;
}

@keyframes scModalFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.sc-modal-card {
  position: relative;
  width: min(1080px, 100%);
  max-height: 92vh;
  overflow: auto;
  border-radius: 20px;
  background: var(--bg-warm, #f8f7f4);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 40px 120px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(10, 186, 181, 0.12);
  animation: scModalRise 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

[data-theme="dark"] .sc-modal-card {
  background: #0f1422;
  border-color: rgba(255, 255, 255, 0.06);
}

@keyframes scModalRise {
  from { opacity: 0; transform: translateY(24px) scale(0.96); filter: blur(4px); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    filter: blur(0); }
}

.sc-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 200ms ease, transform 200ms ease;
  z-index: 2;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.sc-modal-close svg { width: 18px; height: 18px; }

.sc-modal-close:hover {
  background: rgba(10, 186, 181, 0.85);
  transform: rotate(90deg);
}

.sc-modal-media {
  background: linear-gradient(135deg, #0a0f1a 0%, #0d1b2a 100%);
  overflow: hidden;
  border-radius: 20px 20px 0 0;
}

.sc-modal-media img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 58vh;
  object-fit: contain;
}

.sc-modal-media.pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: #000;
}

.sc-modal-media.pair img {
  max-height: 48vh;
}

.sc-modal-body {
  padding: 28px 36px 34px;
}

.sc-modal-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 10px;
}

.sc-modal-body h3 {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 14px;
  color: var(--text-primary);
}

.sc-modal-desc {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-secondary);
  margin: 0 0 24px;
  max-width: 720px;
}

.sc-modal-chip-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 10px;
}

.sc-modal-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sc-modal-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 100px;
  background: rgba(10, 186, 181, 0.08);
  border: 1px solid rgba(10, 186, 181, 0.25);
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 500;
  transition: background 200ms ease, transform 200ms ease, border-color 200ms ease;
}

.sc-modal-chip:hover {
  background: rgba(10, 186, 181, 0.15);
  border-color: rgba(10, 186, 181, 0.5);
  transform: translateY(-1px);
}

.sc-modal-chip .sc-chip-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 6px rgba(10, 186, 181, 0.6);
}

@media (max-width: 720px) {
  .sc-modal { padding: 12px; }
  .sc-modal-body { padding: 22px 20px 26px; }
  .sc-modal-media.pair {
    grid-template-columns: 1fr;
  }
  .sc-modal-media.pair img { max-height: 40vh; }
}

/* ===== Module link overlay =====
   Covers the whole tile so any part of the card navigates, while the
   existing image/label layers stay exactly as they were. */
.bento-link {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 18px;
  text-decoration: none;
  background: linear-gradient(
    to top,
    rgba(10, 186, 181, 0.16) 0%,
    rgba(10, 186, 181, 0) 45%
  );
  opacity: 0;
  transition: opacity 0.35s ease;
}

.bento-card:hover .bento-link,
.bento-link:focus-visible {
  opacity: 1;
}

.bento-link-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 100px;
  background: rgba(10, 18, 28, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(10, 186, 181, 0.5);
  color: #7adce8;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  transform: translateY(6px);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.bento-card:hover .bento-link-cta,
.bento-link:focus-visible .bento-link-cta {
  transform: translateY(0);
}

.bento-link-cta svg { width: 14px; height: 14px; }

@media (prefers-reduced-motion: reduce) {
  .bento-link-cta { transform: none; }
}
.protocols {
  background: transparent;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: background 0.4s;
}

.protocols .section-desc {
  text-align: center;
  margin-bottom: 56px;
}

.proto-grid {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 800px;
}

.proto-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 100px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

[data-theme="dark"] .proto-chip {
  background: rgba(14, 19, 32, 0.82);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

.proto-chip:hover {
  transform: translateY(-3px) scale(1.03);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] .proto-chip:hover {
  background: rgba(14, 19, 32, 0.95);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

.proto-chip .pc-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 8px rgba(10, 186, 181, 0.5);
}

.proto-chip-soon {
  opacity: 0.85;
}

.proto-chip-text {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.15;
}

.proto-soon-badge {
  margin-top: 2px;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-tertiary);
  background: none;
  border: none;
  padding: 0;
}
.opa-wrap {
  padding: 0 48px 48px;
}

.opa-section {
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  color: var(--white);
  border-radius: var(--radius-lg);
  max-width: 1200px;
  margin: 0 auto;
  padding: 56px 64px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  position: relative;
  overflow: hidden;
  transition: background 0.4s;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.opa-section::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -20%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(10, 186, 181, 0.2) 0%, transparent 60%);
  pointer-events: none;
}

.opa-section::after {
  content: '';
  position: absolute;
  bottom: -30%;
  left: -10%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(10, 186, 181, 0.08) 0%, transparent 60%);
  pointer-events: none;
}

.opa-section .section-label {
  color: var(--teal);
}

.opa-section .section-title {
  color: #fff;
}

.opa-section .section-title em {
  -webkit-text-fill-color: transparent;
}

.opa-section .section-desc {
  color: rgba(255, 255, 255, 0.7);
}

.opa-points {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 36px;
}

.opa-point {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.opa-point .op-check {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--teal);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
  box-shadow: 0 0 12px rgba(10, 186, 181, 0.4);
}

.opa-point .op-check svg {
  width: 12px;
  height: 12px;
  color: #fff;
}

.opa-point p {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
}

.opa-point strong {
  color: #fff;
}

.opa-visual {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.opa-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm);
  padding: 24px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.opa-card:hover {
  background: rgba(10, 186, 181, 0.1);
  border-color: rgba(10, 186, 181, 0.3);
  transform: translateX(8px);
  box-shadow: -4px 0 20px rgba(10, 186, 181, 0.1);
}

.opa-card h4 {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 6px;
  color: #fff;
}

.opa-card p {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.5;
}

@media (max-width: 960px) {
  .opa-wrap {
    padding: 0 24px !important;
  }
  .opa-section {
    grid-template-columns: 1fr;
    padding: 64px 36px;
  }
}
.cta-section {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 48px 48px;
  position: relative;
}

/* Soft teal radial accent behind the CTA — no hard glass boundary */
.cta-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 60% at 50% 70%, rgba(10, 186, 181, 0.18) 0%, transparent 70%);
  pointer-events: none;
  z-index: -1;
}

.cta-section .section-title {
  margin-bottom: 20px;
  max-width: 680px;
}

.cta-section .section-intro .section-desc {
  text-align: center;
}

.cta-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}
/* ===== Global Presence =====
   No globe of its own: the fixed background globe glides into the centre of
   this section (see Scene3D.jsx + presenceFocus.js), so the layout keeps a
   clear column down the middle for it and hangs the country cards either side
   like readouts on a control-room screen. */

.global-presence {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 100vh;
  padding-top: 72px;
  padding-bottom: 72px;
}

.global-presence .section-desc {
  text-align: center;
  margin-bottom: 12px;
}

/* ── Three columns: cards | globe window | cards ──
   Wide and edge-hugging, because the globe fills close to 90% of the viewport
   once it centres — the cards get out of its way rather than sit on it. */
.gp-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.9fr) minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 1460px;
  margin: 8px auto 0;
}

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

/* Cards stay narrow and hug the outer edge of their column. */
.gp-col--left {
  align-items: flex-start;
}

.gp-col--right {
  align-items: flex-end;
}

.gp-col > .gp-card {
  width: min(100%, 330px);
}

/* ── Country card ── */
.gp-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--glass-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  text-align: left;
  cursor: pointer;
  outline: none;
  overflow: hidden;
  transition: border-color 0.35s ease, box-shadow 0.35s ease,
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), background 0.35s ease;
}

/* Left column mirrors itself so both columns lean into the globe. */
.gp-col--left .gp-card {
  flex-direction: row-reverse;
  text-align: right;
}

.gp-card:hover,
.gp-card:focus-visible,
.gp-card.is-active {
  border-color: var(--teal);
  background: var(--teal-light);
  box-shadow: 0 0 0 1px var(--teal-glow), 0 18px 44px rgba(0, 0, 0, 0.16);
  transform: translateX(10px);
}

.gp-col--left .gp-card:hover,
.gp-col--left .gp-card:focus-visible,
.gp-col--left .gp-card.is-active {
  transform: translateX(-10px);
}

/* Beacon — idles with a slow blink, rings out when the globe is locked on. */
.gp-card-beacon {
  position: relative;
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 10px var(--teal);
  animation: gpBlink 3s ease-in-out infinite;
  animation-delay: var(--beacon-delay, 0s);
}

.gp-card-beacon::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid var(--teal);
  opacity: 0;
}

.gp-card.is-active .gp-card-beacon,
.gp-card:hover .gp-card-beacon {
  animation: none;
  opacity: 1;
}

.gp-card.is-active .gp-card-beacon::after,
.gp-card:hover .gp-card-beacon::after {
  animation: gpPing 1.7s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

/* Radar sweep across the card while it is the tracked site. */
.gp-card-scan {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    transparent 38%,
    var(--teal-glow) 50%,
    transparent 62%
  );
  transition: opacity 0.4s ease;
}

.gp-card.is-active .gp-card-scan {
  opacity: 1;
  animation: gpScan 2.4s linear infinite;
}

.gp-card-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}

.gp-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.gp-col--left .gp-card-head {
  flex-direction: row-reverse;
}

.gp-card-country {
  font-size: 17px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.gp-card-hq {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--teal);
  border: 1px solid var(--teal-glow);
  background: var(--teal-light);
  padding: 2px 7px;
  border-radius: 100px;
}

.gp-card-meta {
  font-size: 13px;
  color: var(--text-tertiary);
}

.gp-card-coords {
  font-family: ui-monospace, 'SFMono-Regular', 'Menlo', monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
  opacity: 0.7;
  transition: color 0.35s ease, opacity 0.35s ease;
}

.gp-card.is-active .gp-card-coords,
.gp-card:hover .gp-card-coords {
  color: var(--teal);
  opacity: 1;
}

.gp-card-index {
  font-family: ui-monospace, 'SFMono-Regular', 'Menlo', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  opacity: 0.45;
}

/* ── Centre window: kept empty for the globe ── */
.gp-center {
  position: relative;
  align-self: stretch;
  min-height: 320px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
}

.gp-center-hint {
  font-family: ui-monospace, 'SFMono-Regular', 'Menlo', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  padding: 6px 12px;
  border-radius: 100px;
  border: 1px solid var(--border);
  background: var(--glass-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  white-space: nowrap;
  transition: color 0.35s ease, border-color 0.35s ease;
}

.gp-center-hint.is-locked {
  color: var(--teal);
  border-color: var(--teal-glow);
}

/* ── Stats strip ── */
.gp-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  margin-top: 36px;
  padding: 16px 28px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--glass-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.gp-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
}

.gp-stat-num {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 38px;
  line-height: 1;
  color: var(--teal);
}

.gp-stat-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.gp-stat-divider {
  width: 1px;
  align-self: stretch;
  background: var(--border);
}

/* ── Keyframes ── */
@keyframes gpBlink {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}

@keyframes gpPing {
  0% { transform: scale(0.7); opacity: 0.9; }
  100% { transform: scale(2.6); opacity: 0; }
}

@keyframes gpScan {
  from { transform: translateX(-110%); }
  to { transform: translateX(110%); }
}

/* ── Responsive ──
   Full-width cards stacked five deep buried the globe on a narrow screen, so
   below 1000px each site collapses to a compact chip and the detail — city,
   coordinates, local time — moves to the globe's own callout on tap. */
@media (max-width: 1000px) {
  .global-presence {
    padding-top: 56px;
    padding-bottom: 56px;
  }

  .gp-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    max-width: 600px;
  }

  /* Globe window on top, chips tucked underneath it. */
  .gp-center {
    order: -1;
    align-self: stretch;
    min-height: 40vh;
  }

  .gp-col {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: 100%;
  }

  .gp-col > .gp-card {
    width: auto;
    flex: 0 0 auto;
    gap: 9px;
    padding: 9px 15px;
    border-radius: 100px;
  }

  .gp-col--left .gp-card,
  .gp-col--left .gp-card-head {
    flex-direction: row;
    text-align: left;
  }

  .gp-card-meta,
  .gp-card-coords,
  .gp-card-index {
    display: none;
  }

  .gp-card-country {
    font-size: 14px;
  }

  .gp-card-beacon {
    width: 7px;
    height: 7px;
  }

  .gp-card-hq {
    font-size: 9px;
    padding: 1px 6px;
  }

  /* Chips lift rather than slide — sideways travel reads as a glitch in a row. */
  .gp-card:hover,
  .gp-card:focus-visible,
  .gp-card.is-active,
  .gp-col--left .gp-card:hover,
  .gp-col--left .gp-card:focus-visible,
  .gp-col--left .gp-card.is-active {
    transform: translateY(-3px);
  }
}

@media (max-width: 640px) {
  .gp-center {
    min-height: 34vh;
  }
  .gp-center-hint {
    font-size: 9px;
    padding: 5px 10px;
  }
  .gp-col > .gp-card {
    padding: 8px 13px;
  }
  .gp-card-country {
    font-size: 13px;
  }
  .gp-stats {
    gap: 16px;
    margin-top: 24px;
    padding: 12px 14px;
  }
  .gp-stat-num {
    font-size: 28px;
  }
  .gp-stat-label {
    font-size: 10px;
    letter-spacing: 0.08em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gp-card-beacon,
  .gp-card-beacon::after,
  .gp-card-scan {
    animation: none !important;
  }
  .gp-card {
    transition: border-color 0.2s ease, background 0.2s ease;
  }
  .gp-card:hover,
  .gp-card:focus-visible,
  .gp-card.is-active,
  .gp-col--left .gp-card:hover,
  .gp-col--left .gp-card:focus-visible,
  .gp-col--left .gp-card.is-active {
    transform: none;
  }
}