/* ============================================================
   ZERO — Fresh Black & White Style Sheet
   ============================================================ */

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

:root {
  /* Pure monochrome — black / white / grey */
  --bg: #050507;
  --bg-2: #0a0a0c;
  --bg-3: #111114;
  --surface: rgba(16, 16, 18, 0.78);
  --surface-2: rgba(20, 20, 22, 0.92);
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);
  --text: #f5f5f5;
  --text-dim: #9a9a9a;
  --text-mute: #666666;

  /* Accent — white */
  --accent: #ffffff;
  --accent-mint: #c8c8c8;
  --accent-glow: rgba(255, 255, 255, 0.14);
  --accent-gradient: linear-gradient(135deg, #ffffff 0%, #e6e6e6 100%);
  --accent-gradient-hover: linear-gradient(135deg, #ffffff 0%, #f0f0f0 100%);

  /* Lighting — neutral white wash */
  --light-soft: rgba(255, 255, 255, 0.04);
  --light-mid: rgba(255, 255, 255, 0.1);
  --light-strong: rgba(255, 255, 255, 0.22);
  --light-beam: rgba(255, 255, 255, 0.08);
  --glow-sm: 0 0 20px rgba(255, 255, 255, 0.06);
  --glow-md: 0 0 40px rgba(255, 255, 255, 0.07), 0 0 80px rgba(255, 255, 255, 0.03);
  --glow-lg: 0 0 60px rgba(255, 255, 255, 0.08), 0 0 110px rgba(255, 255, 255, 0.04);
  --rim-light: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  --glass-bg: rgba(10, 10, 12, 0.72);
  --glass-border: rgba(255, 255, 255, 0.1);
  --glass-highlight: linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, transparent 40%);

  --radius: 14px;
  --radius-lg: 20px;
  --radius-sm: 10px;
  --shadow: 0 24px 56px rgba(0, 0, 0, 0.7);
  --font: 'Outfit', system-ui, sans-serif;
  --display: 'Space Grotesk', 'Outfit', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Motion tokens (Emil) */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --dur-press: 140ms;
  --dur-ui: 200ms;
  --dur-reveal: 280ms;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  min-height: 100vh;
  position: relative;
  background-image:
    radial-gradient(ellipse 100% 70% at 50% -25%, rgba(255, 255, 255, 0.06), transparent 55%);
  background-attachment: fixed;
}

/* --- Atmosphere (minimal — no rain / floating glows) --- */
.rain-bg,
.glow,
.ambient-light {
  display: none !important;
}

/* ============ GLOBAL AURORA SHADER CANVAS (gesamte Website) ============ */
canvas.aurora-bg {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  display: block;
  background:
    radial-gradient(ellipse 70% 55% at 20% 15%, rgba(255, 255, 255, 0.03), transparent 70%),
    radial-gradient(ellipse 60% 50% at 80% 85%, rgba(255, 255, 255, 0.025), transparent 70%),
    linear-gradient(165deg, rgba(14, 14, 20, 0.4) 0%, rgba(8, 10, 16, 0.3) 50%, rgba(14, 14, 20, 0.4) 100%);
}
@media (prefers-reduced-motion: reduce) {
  canvas.aurora-bg { opacity: 0.9; }
}

/* ============ FEATURE PERSPECTIVE TUNNEL ============ */
#feature-tunnel {
  position: relative;
  width: 100%;
  height: 220vh;              /* sticky stage traveled across 120vh of scroll */
  z-index: 11;                /* above dotfield-bg (z:0) and sections with z:10 */
  background: transparent;
}
/* Top-Bridge: Feature-Tunnel beginnt in Schwarz, fadet dann weich zu transparent.
   Trifft den Hero-Bottom-Fade mittig in pure Schwarz => KEINE sichtbare Linie. */
#feature-tunnel::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 400px;
  pointer-events: none;
  z-index: 12;
  background: linear-gradient(
    180deg,
    #050507 0%,
    rgba(5, 5, 7, 0.97) 10%,
    rgba(5, 5, 7, 0.85) 22%,
    rgba(5, 5, 7, 0.65) 40%,
    rgba(5, 5, 7, 0.4) 58%,
    rgba(5, 5, 7, 0.2) 75%,
    rgba(5, 5, 7, 0.08) 88%,
    transparent 100%
  );
}
#feature-tunnel .tunnel-stage {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1200px;
  transform-style: preserve-3d;
  user-select: none;
}
#feature-tunnel .tunnel-bg-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 60%, transparent 100%);
          mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 60%, transparent 100%);
  opacity: 0.55;
}
#feature-tunnel .tunnel-bg-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.06) 0%, transparent 70%);
}
#feature-tunnel .tunnel-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
}
#feature-tunnel .tunnel-ring-inner {
  width: 48vmin;
  height: 48vmin;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
#feature-tunnel .tunnel-ring-outer {
  width: 76vmin;
  height: 76vmin;
  border: 1px dashed rgba(255, 255, 255, 0.08);
}
#feature-tunnel .tunnel-title {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: 36rem;
  padding: 0 1.5rem;
  text-align: center;
  pointer-events: none;
  z-index: 1;
  will-change: transform, opacity;
}
#feature-tunnel .tunnel-eyebrow {
  font-family: 'Geist Mono', 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: #ffffff;
  margin-bottom: 1rem;
}
#feature-tunnel .tunnel-title h2 {
  font-family: 'Geist', 'Outfit', sans-serif;
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.03em;
  background: linear-gradient(180deg, #ffffff, rgba(255,255,255,0.35));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
#feature-tunnel .tunnel-title p {
  margin-top: 1rem;
  font-size: 0.95rem;
  font-weight: 300;
  color: rgba(255,255,255,0.55);
  max-width: 36ch;
  margin-left: auto;
  margin-right: auto;
}
#feature-tunnel .tunnel-prompt {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Geist Mono', 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  pointer-events: none;
  will-change: opacity;
}
#feature-tunnel .tunnel-prompt .bar {
  width: 1px;
  height: 1.5rem;
  background: linear-gradient(180deg, #ffffff, transparent);
}
#feature-tunnel .tunnel-plane {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform-style: preserve-3d;
}
#feature-tunnel .tunnel-card {
  position: absolute;
  left: 50%;
  top: 50%;
  aspect-ratio: 4 / 5;
  will-change: transform, opacity;
  pointer-events: auto;
  cursor: pointer;
  opacity: 0;
}
#feature-tunnel .tunnel-card-inner {
  /* Override the per-feature color from JS - uniform cyan accent across all cards */
  --card-color: #ffffff;
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 1rem;
  overflow: hidden;
  background: linear-gradient(160deg, rgba(18,18,22,0.96) 0%, rgba(6,6,10,0.98) 100%);
  box-shadow:
    0 20px 60px -10px rgba(0,0,0,0.85),
    0 0 0 1px rgba(255,255,255,0.08) inset,
    0 0 40px -14px var(--card-color);
  display: grid;
  grid-template-rows: 1fr auto;
  padding: 1.25rem;
  gap: 0.75rem;
  transition: box-shadow .35s ease;
}
#feature-tunnel .tunnel-card-inner:hover {
  box-shadow:
    0 20px 70px -10px rgba(0,0,0,0.9),
    0 0 0 1px var(--card-color) inset,
    0 0 70px -12px var(--card-color);
}
#feature-tunnel .tunnel-card-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 20%, var(--card-color) 0%, transparent 50%);
  opacity: 0.08;
  pointer-events: none;
}
#feature-tunnel .tunnel-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  padding: 0.5rem;
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.25));
}
#feature-tunnel .tunnel-card-icon svg {
  width: 60%;
  height: 60%;
  max-width: 72px;
  max-height: 72px;
}
#feature-tunnel .tunnel-card-body {
  text-align: center;
  z-index: 1;
}
#feature-tunnel .tunnel-card-name {
  font-family: 'Geist', 'Outfit', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.01em;
  margin-bottom: 0.25rem;
}
#feature-tunnel .tunnel-card-tag {
  font-family: 'Geist Mono', 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.02em;
}
#feature-tunnel .tunnel-card-badge {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  font-family: 'Geist Mono', 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  color: var(--card-color);
  letter-spacing: 0.1em;
  opacity: 0.9;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255, 255, 255, 0.22);
}
@media (max-width: 767px) {
  #feature-tunnel { height: 180vh; }
  #feature-tunnel .tunnel-card-inner { padding: 0.9rem; gap: 0.5rem; }
  #feature-tunnel .tunnel-card-name { font-size: 0.95rem; }
  #feature-tunnel .tunnel-card-tag { font-size: 0.62rem; }
  #feature-tunnel .tunnel-card-icon svg { max-width: 44px; max-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  #feature-tunnel { height: 100vh; }
  #feature-tunnel .tunnel-stage { position: static; }
}

/* ============ FEATURE MINI GRID (12 small boxes) ============ */
#feature-mini-grid {
  position: relative;
  z-index: 11;
  padding: 4rem 0 6rem;
  background: transparent;
}
#feature-mini-grid .fmg-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}
#feature-mini-grid .fmg-head {
  text-align: center;
  margin-bottom: 2.5rem;
}
#feature-mini-grid .fmg-eyebrow {
  font-family: 'Geist Mono', 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #ffffff;
  opacity: 0.75;
  margin: 0 0 0.75rem;
}
#feature-mini-grid .fmg-title {
  font-family: 'Geist', 'Outfit', sans-serif;
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0;
  line-height: 1.1;
}
#feature-mini-grid .fmg-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.9rem;
}
#feature-mini-grid .fmg-box {
  position: relative;
  background: linear-gradient(160deg, rgba(18,18,22,0.72) 0%, rgba(6,6,10,0.78) 100%);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  padding: 1.1rem 0.9rem 1rem;
  text-align: center;
  overflow: hidden;
  transition: transform .3s cubic-bezier(.2,.8,.2,1),
              border-color .3s ease,
              box-shadow .3s ease,
              background .3s ease;
  cursor: default;
  min-height: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
}
#feature-mini-grid .fmg-box::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(120% 90% at 50% 0%,
              rgba(255,255,255,0.06) 0%,
              transparent 55%);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
#feature-mini-grid .fmg-box:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.25);
  background: linear-gradient(160deg, rgba(22,22,28,0.88) 0%, rgba(8,8,12,0.9) 100%);
  box-shadow:
    0 10px 32px -14px rgba(0,0,0,0.9),
    0 0 0 1px rgba(255,255,255,0.15) inset,
    0 0 30px -14px rgba(255,255,255,0.4);
}
#feature-mini-grid .fmg-box:hover::before { opacity: 1; }
#feature-mini-grid .fmg-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  filter: drop-shadow(0 0 6px rgba(255,255,255,0.1));
  transition: color .3s ease, filter .3s ease, transform .3s ease;
}
#feature-mini-grid .fmg-icon svg {
  width: 100%;
  height: 100%;
}
#feature-mini-grid .fmg-box:hover .fmg-icon {
  color: #ffffff;
  filter: drop-shadow(0 0 10px rgba(255,255,255,0.35));
  transform: scale(1.08);
}
#feature-mini-grid .fmg-name {
  font-family: 'Geist', 'Outfit', sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.005em;
  line-height: 1.15;
}
#feature-mini-grid .fmg-tag {
  font-family: 'Inter', sans-serif;
  font-size: 0.68rem;
  font-weight: 400;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.01em;
  line-height: 1.3;
}
@media (max-width: 1023px) {
  #feature-mini-grid .fmg-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 639px) {
  #feature-mini-grid { padding: 3rem 0 4rem; }
  #feature-mini-grid .fmg-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.7rem;
  }
  #feature-mini-grid .fmg-box {
    min-height: 120px;
    padding: 0.9rem 0.6rem;
  }
  #feature-mini-grid .fmg-icon { width: 30px; height: 30px; }
  #feature-mini-grid .fmg-name { font-size: 0.8rem; }
  #feature-mini-grid .fmg-tag { font-size: 0.62rem; }
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.12;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.03 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* Soft technical grid */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.012) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: center;
  mask-image: radial-gradient(circle at 50% 40%, black, transparent 78%);
  -webkit-mask-image: radial-gradient(circle at 50% 40%, black, transparent 78%);
}

/* --- Container --- */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 2;
}
.container.narrow { max-width: 800px; }

/* --- Screen-Wide Fixed / Sticky Top Navigation --- */
.site-nav, .nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: 72px;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
/* soft top-down scrim so the nav text stays readable over the hero image
   without the bar looking boxed-in or cut off */
.site-nav::before, .nav::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 140px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.18) 55%, transparent 100%);
  pointer-events: none;
  z-index: -1;
}
.site-nav::after, .nav::after {
  content: none;
}
.nav-container, .nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}
.nav-left {
  display: flex;
  align-items: center;
  gap: 14px;
}
.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--text);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.logo:hover {
  opacity: 1;
  transform: translateY(-1px);
}
.logo-img {
  height: 34px;
  width: auto;
  display: block;
  box-shadow: none;
  border: none;
  outline: none;
  background: transparent;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.logo:hover .logo-img {
  transform: scale(1.04);
  box-shadow: none;
}
.logo-text {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: 0.22em;
  font-size: 19px;
  color: var(--text);
  background: linear-gradient(180deg, #ffffff 30%, #a8a8b8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 24px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.07);
  padding: 6px 20px;
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.nav-links a {
  color: #9ea0b4;
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  letter-spacing: 0.02em;
  position: relative;
  padding: 4px 6px;
}
.nav-links a:hover {
  color: #ffffff;
  text-shadow: 0 0 14px rgba(255, 255, 255, 0.6);
}
.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.nav-discord-btn {
  background: rgba(88, 101, 242, 0.12);
  color: #c4c9ff;
  border: 1px solid rgba(88, 101, 242, 0.25);
  font-size: 13px;
  padding: 8px 14px;
  border-radius: 8px;
}
.nav-discord-btn:hover {
  background: rgba(88, 101, 242, 0.22);
  border-color: rgba(88, 101, 242, 0.5);
  color: #ffffff;
  box-shadow: 0 0 16px rgba(88, 101, 242, 0.3);
}
.nav-panel-btn {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 13px;
  padding: 8px 14px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.nav-panel-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.12);
}
.live-dot-mini {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2de062;
  box-shadow: 0 0 8px #2de062;
}
.nav-login-btn {
  background: linear-gradient(135deg, #ffffff 0%, #e2e2e2 100%);
  color: #050507;
  font-weight: 700;
  border: 1px solid rgba(255, 255, 255, 0.4);
  font-size: 13px;
  padding: 8px 16px;
  border-radius: 8px;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.18);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.nav-login-btn:hover {
  background: #ffffff;
  box-shadow: 0 0 26px rgba(255, 255, 255, 0.4);
  transform: translateY(-1px);
}
.nav-mobile-toggle {
  display: none;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px;
  flex-direction: column;
  gap: 5px;
}
.nav-mobile-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: #ffffff;
  border-radius: 2px;
  transition: all 0.3s ease;
}
.nav-mobile-menu {
  display: none;
  background: rgba(6, 6, 10, 0.96);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 16px 24px 24px;
}
.nav-mobile-menu.active {
  display: block;
}
.nav-mob-link {
  display: block;
  padding: 12px 0;
  color: #a0a0b8;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.nav-mob-link:hover {
  color: #ffffff;
}
.nav-mob-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}

@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-discord-btn, .nav-panel-btn { display: none; }
  .nav-mobile-toggle { display: flex; }
}

/* Screen-Wide Top Navigation Bar */
#site-dock {
  width: 100%;
  position: relative;
  z-index: 100;
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 24px;
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition:
    transform var(--dur-press) var(--ease-out),
    background-color var(--dur-ui) var(--ease-out),
    border-color var(--dur-ui) var(--ease-out),
    color var(--dur-ui) var(--ease-out),
    box-shadow var(--dur-ui) var(--ease-out),
    opacity var(--dur-ui) var(--ease-out);
  white-space: nowrap;
}
.btn:active {
  transform: scale(0.97);
}
.btn-primary {
  position: relative;
  overflow: hidden;
  background: var(--accent-gradient);
  color: #000000;
  box-shadow: 0 4px 20px rgba(255, 255, 255, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.65);
  border: none;
}
.btn-primary::after {
  display: none;
}
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover {
    background: var(--accent-gradient-hover);
    box-shadow: 0 6px 28px rgba(255, 255, 255, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  }
  .btn-outline:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.5);
  }
  .btn-ghost:hover {
    color: var(--text);
    background: rgba(255, 255, 255, 0.04);
  }
}
.btn-outline {
  background: rgba(255, 255, 255, 0.02);
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.24);
  backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.btn-ghost {
  background: transparent;
  color: var(--text-dim);
}
.btn-sm { padding: 9px 18px; font-size: 13px; border-radius: 8px; }
.btn-lg { padding: 15px 36px; font-size: 15px; border-radius: var(--radius-sm); }
.btn-block { width: 100%; }

/* --- Hero --- */
.hero {
  padding: 140px 0 60px;
  text-align: center;
  position: relative;
  overflow: visible;
  isolation: isolate;
  min-height: auto;
  display: flex;
  align-items: center;
}
.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1100px;
  height: 60%;
  background: radial-gradient(ellipse 65% 55% at 50% 20%, rgba(255, 255, 255, 0.05) 0%, transparent 70%);
  pointer-events: none;
  z-index: 2;
}
.hero::after {
  /* Bottom bridge fade — hero endet garantiert in pure Schwarz,
     damit der Übergang zum Feature-Tunnel keine Linie zeigt. */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 400px;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(5, 5, 7, 0.08) 12%,
    rgba(5, 5, 7, 0.2) 25%,
    rgba(5, 5, 7, 0.4) 42%,
    rgba(5, 5, 7, 0.65) 60%,
    rgba(5, 5, 7, 0.85) 78%,
    rgba(5, 5, 7, 0.97) 90%,
    #050507 100%
  );
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.hero-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  filter: grayscale(1) contrast(1.05) brightness(0.5);
  opacity: 0.8;
}
.hero-vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    /* Soft radial darkening around edges — keeps center of image bright */
    radial-gradient(ellipse 75% 60% at 50% 35%, transparent 0%, rgba(5, 5, 7, 0.4) 70%, rgba(5, 5, 7, 0.75) 100%),
    /* Bottom-fade zum Feature-Tunnel: lang und weich, startet mitte und wird am Rand fast schwarz */
    linear-gradient(
      180deg,
      rgba(5, 5, 7, 0.55) 0%,
      transparent 25%,
      transparent 55%,
      rgba(5, 5, 7, 0.35) 72%,
      rgba(5, 5, 7, 0.75) 88%,
      rgba(5, 5, 7, 0.98) 100%
    );
  pointer-events: none;
}
.hero .container {
  position: relative;
  z-index: 3;
}
/* Parallax wrappers - rein transform-Container, kein eigenes Layout */
.hero-plx-title,
.hero-plx-cta,
.hero-plx-mockup {
  position: relative;
  will-change: transform;
}
.hero-pill-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: #f0f0f5;
  margin-bottom: 28px;
  backdrop-filter: blur(12px);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.badge-dot-green, .badge-dot-purple {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 10px #4ade80;
  animation: statusPulse 2s infinite ease-in-out;
}
.badge-title {
  color: #ffffff;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.badge-divider {
  opacity: 0.4;
}
.hero-title {
  font-family: var(--display);
  font-size: clamp(42px, 7.5vw, 82px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.04em;
  margin-bottom: 26px;
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.hero-title-line1 {
  display: block;
  background: linear-gradient(
    110deg,
    #ffffff 15%,
    #a2a2b4 35%,
    #ffffff 50%,
    #8e8e9e 65%,
    #ffffff 85%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: heroTextShimmer 8s linear infinite;
  filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.6));
}

.hero-title-line2 {
  display: inline-block;
  position: relative;
  background: linear-gradient(
    110deg,
    #8c8ca0 10%,
    #ffffff 35%,
    #e2e2ec 50%,
    #ffffff 65%,
    #8c8ca0 90%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: heroTextShimmer 8s linear infinite 1.2s;
  filter: drop-shadow(0 0 25px rgba(255, 255, 255, 0.25));
  padding-bottom: 8px;
}

.hero-title-line2::after {
  display: none !important;
}

@keyframes heroTextShimmer {
  0% {
    background-position: 200% center;
  }
  100% {
    background-position: -200% center;
  }
}

@keyframes heroBeamPulse {
  0%, 100% {
    opacity: 0.35;
    transform: scaleX(0.75);
  }
  50% {
    opacity: 0.95;
    transform: scaleX(1.08);
  }
}

.accent-glow {
  background: linear-gradient(135deg, #ffffff 0%, #d8d8d8 45%, #888894 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 35px rgba(255, 255, 255, 0.25);
}
.hero-sub {
  font-size: clamp(15px, 2vw, 18px);
  color: var(--text-dim);
  max-width: 620px;
  margin: 0 auto 36px;
  line-height: 1.6;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.6);
}
.hero-cta {
  display: flex;
  gap: 14px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 0;
  position: relative;
  z-index: 50;
}

.hero-panel-btn,
.hero-login-btn {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.hero-panel-btn:hover,
.hero-login-btn:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(255, 255, 255, 0.12) !important;
}

.hero-panel-btn .live-dot-mini {
  background: #00f0ff;
  box-shadow: 0 0 8px #00f0ff, 0 0 16px rgba(0, 240, 255, 0.6);
}

/* --- Hero Showcase Safari Mockup & Ambient Lighting --- */
.hero-mockup-wrap {
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin: 54px auto 0;
  z-index: 10;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 32px;
}

.hero-mockup-desktop {
  position: relative;
  flex: 1;
  max-width: 820px;
  transform: perspective(1200px) rotateY(3deg);
  transform-origin: center center;
}

.hero-mockup-phone {
  position: relative;
  flex-shrink: 0;
  width: 180px;
  transform: perspective(1200px) rotateY(-6deg);
  transform-origin: center center;
  z-index: 12;
  margin-bottom: 10px;
}

.hero-phone-frame {
  width: 100%;
  border-radius: 24px;
  background: #0f1016;
  border: 1.5px solid rgba(255,255,255,0.1);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.06),
    0 20px 50px -10px rgba(0,0,0,0.8),
    0 0 30px -5px rgba(0,240,255,0.08);
  overflow: hidden;
  padding: 10px 6px;
}

.hero-phone-notch {
  width: 60px;
  height: 6px;
  background: #1c1d28;
  border-radius: 3px;
  margin: 0 auto 8px;
}

.hero-phone-screen {
  width: 100%;
  aspect-ratio: 9/18;
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  background: #0a0b10;
}

/* Ambient Backlight Glows — White/Grey with subtle Cyan Accents */
.safari-lighting-layer {
  position: absolute;
  inset: -60px -80px -100px;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}

.safari-glow-ambient {
  position: absolute;
  top: -15%;
  left: 50%;
  transform: translateX(-50%);
  width: 94%;
  height: 90%;
  background: radial-gradient(
    ellipse 65% 55% at 50% 35%,
    rgba(255, 255, 255, 0.08) 0%,
    rgba(0, 240, 255, 0.06) 35%,
    rgba(100, 140, 180, 0.03) 65%,
    transparent 80%
  );
  filter: blur(60px);
  animation: safariGlowPulse 16s ease-in-out infinite alternate;
  will-change: opacity;
}

.safari-glow-core {
  position: absolute;
  top: -8%;
  left: 50%;
  transform: translateX(-50%);
  width: 65%;
  height: 55%;
  background: radial-gradient(
    ellipse 70% 50% at 50% 30%,
    rgba(255, 255, 255, 0.12) 0%,
    rgba(0, 240, 255, 0.10) 40%,
    rgba(40, 60, 90, 0.05) 75%,
    transparent 90%
  );
  filter: blur(40px);
  animation: safariGlowPulse 14s ease-in-out infinite alternate 2s;
}

.safari-glow-flare-left {
  position: absolute;
  top: 8%;
  left: -6%;
  width: 38%;
  height: 50%;
  background: radial-gradient(
    circle at 35% 45%,
    rgba(0, 240, 255, 0.07) 0%,
    rgba(255, 255, 255, 0.04) 40%,
    transparent 75%
  );
  filter: blur(50px);
}

.safari-glow-flare-right {
  position: absolute;
  top: 8%;
  right: -6%;
  width: 38%;
  height: 50%;
  background: radial-gradient(
    circle at 65% 45%,
    rgba(0, 240, 255, 0.07) 0%,
    rgba(255, 255, 255, 0.04) 40%,
    transparent 75%
  );
  filter: blur(50px);
}

.safari-beam-light {
  display: none !important;
}

/* Safari Browser Frame Container with Animated Glowing Border */
.safari-browser-frame {
  position: relative;
  z-index: 1;
  border-radius: 14px;
  padding: 1.5px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.1),
    0 -8px 30px -6px rgba(0, 240, 255, 0.15),
    0 0 40px -10px rgba(255, 255, 255, 0.1),
    0 25px 60px -15px rgba(0, 0, 0, 0.9),
    0 50px 110px -20px rgba(0, 0, 0, 0.95);
  animation: safariBorderGlowPulse 12s ease-in-out infinite alternate;
  transition: box-shadow 0.3s ease;
  transform: none !important;
}

.safari-browser-frame:hover {
  transform: none !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.18),
    0 -14px 45px -5px rgba(0, 240, 255, 0.25),
    0 0 55px -5px rgba(255, 255, 255, 0.18),
    0 35px 80px -15px rgba(0, 0, 0, 0.92),
    0 65px 130px -20px rgba(0, 0, 0, 0.98);
}

/* Animated Rotating Conic Border Beam */
.safari-animated-border-beam {
  position: absolute;
  inset: -150%;
  background: conic-gradient(
    from 0deg at 50% 50%,
    transparent 0deg,
    transparent 55deg,
    rgba(180, 200, 220, 0.12) 80deg,
    rgba(255, 255, 255, 0.8) 105deg,
    rgba(0, 240, 255, 0.9) 120deg,
    rgba(255, 255, 255, 0.7) 135deg,
    rgba(100, 150, 180, 0.12) 160deg,
    transparent 185deg,
    transparent 235deg,
    rgba(180, 200, 220, 0.1) 260deg,
    rgba(255, 255, 255, 0.75) 285deg,
    rgba(0, 240, 255, 0.85) 300deg,
    rgba(150, 180, 200, 0.1) 325deg,
    transparent 345deg
  );
  animation: safariBorderRotate 18s linear infinite;
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}

/* Inner Frame Card */
.safari-frame-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: 12.5px;
  background: #101117;
  overflow: hidden;
}

.safari-top-rim-highlight {
  display: none !important;
}

/* Magic UI Safari Component Structure */
.safari-mockup-container {
  position: relative;
  width: 100%;
  aspect-ratio: 1203 / 646;
  display: block;
  line-height: 0;
}

.safari-media-screen {
  position: absolute;
  left: 0.0831255%;
  top: 8.049535%;
  width: 99.83375%;
  height: 91.95046%;
  border-radius: 0 0 11px 11px;
  overflow: hidden;
  z-index: 1;
  pointer-events: auto !important;
  background: #070709;
}

.safari-live-iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  background: #070709;
  border-radius: 0 0 11px 11px;
  pointer-events: auto !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

.safari-vector-svg {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none !important;
}

/* ============================================================
   INTERACTIVE LIVE WEB PANEL STYLES INSIDE HERO SAFARI MOCKUP
   ============================================================ */
.panel-interactive-root {
  width: 100%;
  height: 100%;
  background: #090a10;
  color: #dce3f0;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 12px 16px 10px;
  font-family: var(--font);
  user-select: none;
  overflow: hidden;
}

.panel-top-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  margin-bottom: 10px;
  gap: 10px;
  flex-shrink: 0;
}

.panel-nav-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.panel-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 600;
  color: #94a3b8;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.panel-tab-btn:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.16);
}

.panel-tab-btn.active {
  color: #ffffff;
  background: rgba(0, 240, 255, 0.14);
  border-color: rgba(0, 240, 255, 0.45);
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.25);
}

.panel-tab-icon {
  font-size: 12px;
  line-height: 1;
}

.panel-status-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0, 240, 255, 0.06);
  border: 1px solid rgba(0, 240, 255, 0.2);
  font-family: var(--mono);
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.panel-tab-content {
  flex: 1;
  min-height: 0;
  position: relative;
  overflow: hidden;
}

.panel-tab-pane {
  display: none;
  height: 100%;
}

.panel-tab-pane.active {
  display: block;
}

.panel-grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  height: 100%;
}

.panel-card {
  background: rgba(14, 16, 24, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.panel-card-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 700;
  color: #ffffff;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.panel-chip {
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 9.5px;
  font-family: var(--mono);
  background: rgba(255, 255, 255, 0.06);
  color: #cbd5e1;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.panel-chip--cyan {
  background: rgba(0, 240, 255, 0.12);
  color: #00f0ff;
  border-color: rgba(0, 240, 255, 0.3);
}

.panel-toggle-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.panel-toggle-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 8px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
}

.panel-toggle-item:hover {
  background: rgba(0, 240, 255, 0.05);
  border-color: rgba(0, 240, 255, 0.15);
}

.toggle-label-text {
  font-size: 11px;
  font-weight: 500;
  color: #d1d5db;
}

.panel-toggle-input {
  display: none !important;
}

.panel-toggle-switch {
  position: relative;
  width: 32px;
  height: 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
}

.panel-toggle-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ffffff;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.panel-toggle-input:checked + .panel-toggle-switch {
  background: #00f0ff;
  border-color: #00f0ff;
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
}

.panel-toggle-input:checked + .panel-toggle-switch::after {
  transform: translateX(14px);
  background: #000000;
}

.panel-slider-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.panel-slider-item {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 7px;
  padding: 6px 9px 8px;
}

.slider-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
  font-size: 10.5px;
  color: #94a3b8;
  font-weight: 500;
}

.slider-val {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  color: #00f0ff;
}

.panel-range-slider {
  display: block;
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  outline: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.panel-range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #00f0ff;
  box-shadow: 0 0 8px #00f0ff;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.panel-range-slider::-webkit-slider-thumb:hover {
  transform: scale(1.3);
}

.panel-radar-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  height: 100%;
}

.panel-radar-screen {
  background: rgba(6, 8, 14, 0.95);
  border: 1px solid rgba(0, 240, 255, 0.2);
  border-radius: 12px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.radar-circle-grid {
  position: relative;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  border: 1px solid rgba(0, 240, 255, 0.25);
  background: radial-gradient(circle, rgba(0, 240, 255, 0.05) 0%, transparent 70%);
  overflow: hidden;
}

.radar-circle-grid::before {
  content: "";
  position: absolute;
  inset: 22px;
  border-radius: 50%;
  border: 1px dashed rgba(0, 240, 255, 0.2);
}

.radar-circle-grid::after {
  content: "";
  position: absolute;
  inset: 48px;
  border-radius: 50%;
  border: 1px solid rgba(0, 240, 255, 0.2);
}

.radar-sweep-beam {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: conic-gradient(from 0deg at 50% 50%, rgba(0, 240, 255, 0.35) 0deg, transparent 60deg);
  border-radius: 50%;
  animation: radarSweep 3s linear infinite;
  pointer-events: none;
}

@keyframes radarSweep {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.radar-center-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffffff;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 6px #ffffff;
}

.radar-ping {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ff5f56;
  box-shadow: 0 0 8px #ff5f56;
  animation: radarPingPulse 1.5s ease-in-out infinite alternate;
}

.radar-ping-1 { top: 32%; left: 68%; }
.radar-ping-2 { top: 70%; left: 35%; animation-delay: 0.5s; }
.radar-ping-3 { top: 45%; left: 24%; animation-delay: 1s; }

@keyframes radarPingPulse {
  0% { transform: scale(0.85); opacity: 0.6; }
  100% { transform: scale(1.3); opacity: 1; }
}

.radar-legend {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: 8px;
  font-size: 10px;
  font-family: var(--mono);
  color: #94a3b8;
}

.radar-sync {
  color: #00f0ff;
}

.panel-preset-row {
  display: flex;
  gap: 6px;
}

.preset-pill {
  flex: 1;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #cbd5e1;
  cursor: pointer;
  transition: all 0.2s ease;
}

.preset-pill:hover,
.preset-pill.active {
  background: rgba(0, 240, 255, 0.12);
  border-color: rgba(0, 240, 255, 0.4);
  color: #ffffff;
}

.panel-bottom-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 9px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  margin-top: 8px;
  flex-shrink: 0;
  gap: 8px;
}

.panel-panic-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #ef4444;
  cursor: pointer;
  transition: all 0.2s ease;
}

.panel-panic-btn:hover {
  background: rgba(239, 68, 68, 0.3);
  border-color: #ef4444;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.4);
  transform: translateY(-1px);
}

.panel-panic-btn.disarmed {
  background: rgba(34, 197, 94, 0.15);
  border-color: rgba(34, 197, 94, 0.4);
  color: #22c55e;
}

.panel-links {
  display: flex;
  align-items: center;
  gap: 8px;
}

.panel-link-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #94a3b8;
  text-decoration: none;
  transition: all 0.2s ease;
}

.panel-link-pill:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
}

.panel-link-pill--cyan {
  background: rgba(0, 240, 255, 0.08);
  border-color: rgba(0, 240, 255, 0.25);
  color: #00f0ff;
}

.panel-link-pill--cyan:hover {
  background: rgba(0, 240, 255, 0.18);
  border-color: #00f0ff;
  color: #ffffff;
}

.safari-vector-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  pointer-events: none;
  transform: translateZ(0);
}

@keyframes safariBorderRotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes safariBorderGlowPulse {
  0% {
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.08),
      0 -6px 25px -6px rgba(0, 240, 255, 0.12),
      0 0 30px -8px rgba(255, 255, 255, 0.08),
      0 20px 50px -15px rgba(0, 0, 0, 0.85),
      0 45px 90px -20px rgba(0, 0, 0, 0.95);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.14),
      0 -10px 35px -6px rgba(0, 240, 255, 0.22),
      0 0 45px -5px rgba(255, 255, 255, 0.15),
      0 28px 65px -15px rgba(0, 0, 0, 0.9),
      0 55px 110px -20px rgba(0, 0, 0, 0.98);
  }
  100% {
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.1),
      0 -8px 28px -6px rgba(0, 240, 255, 0.16),
      0 0 35px -6px rgba(255, 255, 255, 0.1),
      0 24px 55px -15px rgba(0, 0, 0, 0.88),
      0 50px 100px -20px rgba(0, 0, 0, 0.96);
  }
}

@keyframes safariGlowPulse {
  0% {
    opacity: 0.78;
    transform: translateX(-50%) scale(0.97);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) scale(1.03);
  }
}

@keyframes safariRimShimmer {
  0% {
    opacity: 0.75;
    transform: scaleX(0.93);
  }
  100% {
    opacity: 1;
    transform: scaleX(1.04);
  }
}

.hero-highlights {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 960px;
  margin: 180px auto 0;
  text-align: left;
  position: relative;
  z-index: 12;
}
.highlight-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  background: rgba(12, 12, 18, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  backdrop-filter: blur(16px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.highlight-item:hover {
  border-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-2px);
  box-shadow: 0 12px 35px rgba(255, 255, 255, 0.08);
}
.highlight-icon {
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}
.highlight-item strong {
  display: block;
  font-size: 13.5px;
  color: #ffffff;
  font-weight: 600;
}
.highlight-item span {
  font-size: 12px;
  color: var(--text-dim);
}
@media (max-width: 900px) {
  .hero-mockup-wrap {
    margin: 40px auto 0;
    gap: 20px;
  }
  .hero-mockup-desktop {
    transform: none;
  }
  .hero-mockup-phone {
    width: 140px;
    transform: none;
  }
  .safari-lighting-layer {
    inset: -30px -40px -50px;
  }
}
@media (max-width: 580px) {
  .hero-mockup-wrap {
    margin: 28px auto 0;
    flex-direction: column;
    align-items: center;
  }
  .hero-mockup-desktop {
    max-width: 100%;
  }
  .hero-mockup-phone {
    width: 120px;
    margin-bottom: 0;
  }
  .safari-lighting-layer {
    inset: -15px -20px -30px;
  }
}
.stat-num {
  font-size: 30px;
  font-weight: 800;
  font-family: var(--mono);
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #ffffff 0%, #d4d4d4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat-lbl {
  font-size: 11px;
  color: var(--text-mute);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin-top: 6px;
}

/* --- Scroll Reveal / Slide Animations --- */
.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity var(--dur-reveal) var(--ease-out),
    transform var(--dur-reveal) var(--ease-out);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-left {
  transform: translateX(-14px);
}
.reveal-left.is-visible {
  transform: translateX(0);
}
.reveal-right {
  transform: translateX(14px);
}
.reveal-right.is-visible {
  transform: translateX(0);
}
.reveal-up {
  transform: translateY(12px);
}
.reveal-up.is-visible {
  transform: translateY(0);
}
.reveal-scale {
  transform: scale(0.97) translateY(10px);
}
.reveal-scale.is-visible {
  transform: scale(1) translateY(0);
}

.reveal-stagger > * {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity var(--dur-reveal) var(--ease-out),
    transform var(--dur-reveal) var(--ease-out);
}
.reveal-stagger.is-visible > * {
  opacity: 1;
  transform: translateY(0);
}
.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 45ms; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 90ms; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 135ms; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 180ms; }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 225ms; }
.reveal-stagger.is-visible > *:nth-child(7) { transition-delay: 270ms; }
.reveal-stagger.is-visible > *:nth-child(8) { transition-delay: 315ms; }

.reveal-delay-1 { transition-delay: 50ms !important; }
.reveal-delay-2 { transition-delay: 100ms !important; }
.reveal-delay-3 { transition-delay: 150ms !important; }

.nav.nav-scrolled {
  background: rgba(0, 0, 0, 0.88);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-stagger > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* --- Sections --- */
.section {
  padding: 110px 0;
  position: relative;
  z-index: 2;
}
.section-dither {
  overflow: hidden;
}
.section-dither .container {
  position: relative;
  z-index: 1;
}
.dither-site-wash {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.55;
  /* Soft scroll edges — no hard cut into neighboring sections */
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0, 0, 0, 0.35) 12%,
    black 28%,
    black 68%,
    rgba(0, 0, 0, 0.35) 86%,
    transparent 100%
  );
  mask-image: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0, 0, 0, 0.35) 12%,
    black 28%,
    black 68%,
    rgba(0, 0, 0, 0.35) 86%,
    transparent 100%
  );
}
.cta.section-dither .dither-site-wash {
  opacity: 0.7;
}
.cta.section-dither::before {
  height: 180px;
  background: linear-gradient(
    180deg,
    var(--bg) 0%,
    rgba(5, 5, 7, 0.75) 28%,
    rgba(5, 5, 7, 0.35) 58%,
    transparent 100%
  );
  z-index: 1;
}
.cta.section-dither::after {
  height: 200px;
  background: linear-gradient(
    0deg,
    var(--bg) 0%,
    rgba(5, 5, 7, 0.8) 30%,
    rgba(5, 5, 7, 0.35) 62%,
    transparent 100%
  );
  z-index: 1;
}
.section::before,
.section::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 140px;
  pointer-events: none;
  z-index: 0;
  /* Fades removed - sections now flow seamlessly, lights pass through */
  display: none;
}
.section::before {
  top: 0;
  background: transparent;
}
.section::after {
  bottom: 0;
  background: transparent;
}
.section-dark {
  /* Transparent so the global aurora lights flow across the section */
  background: transparent;
  isolation: isolate;
}
.section-dark::before {
  display: none;
}
.section-dark::after {
  display: none;
}
.section > .container,
.showcase-scroll-section > .container {
  position: relative;
  z-index: 1;
}
.section-head {
  margin-bottom: 64px;
}
.section-head.center { text-align: center; }
.eyebrow {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 100px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: #e5e5e5;
  background: rgba(255, 255, 255, 0.03);
  margin-bottom: 22px;
}
.section-head h2 {
  font-family: var(--display);
  font-size: clamp(34px, 5vw, 54px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.03em;
  background: linear-gradient(to right, #ffffff, #b8b8b8);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.muted { color: var(--text-mute); font-weight: 700; }

/* --- Features Grid --- */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
}
.feature {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 32px;
  transition:
    border-color var(--dur-ui) var(--ease-out),
    box-shadow var(--dur-ui) var(--ease-out),
    transform var(--dur-ui) var(--ease-out);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(16px) saturate(1.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.feature::after {
  content: "";
  position: absolute;
  top: 0; left: 12%; right: 12%;
  height: 1px;
  background: var(--rim-light);
  opacity: 0;
  transition: opacity var(--dur-ui) var(--ease-out);
  pointer-events: none;
}
.feature::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--x, 50%) var(--y, 0%), rgba(255, 255, 255, 0.14), transparent 45%);
  opacity: 0;
  transition: opacity var(--dur-ui) var(--ease-out);
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .feature:hover {
    border-color: rgba(255, 255, 255, 0.28);
    transform: translateY(-2px);
    box-shadow: var(--glow-md), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }
  .feature:hover::before,
  .feature:hover::after { opacity: 1; }
  .feature:hover .feature-icon {
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: var(--glow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  }
}
.feature-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.02));
  display: grid;
  place-items: center;
  margin-bottom: 24px;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition:
    border-color var(--dur-ui) var(--ease-out),
    box-shadow var(--dur-ui) var(--ease-out);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 4px 20px rgba(0, 0, 0, 0.3);
}
.feature h3 {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 10px;
  letter-spacing: -0.01em;
  color: #f3f4f6;
}
.feature p {
  color: var(--text-dim);
  font-size: 14px;
  line-height: 1.65;
}

/* --- Features Category Redesign --- */
.feature-category {
  display: flex;
  flex-direction: column;
  padding: 28px 24px;
}
.feature-category-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.feature-category-head .feature-icon {
  margin-bottom: 0;
  flex-shrink: 0;
}
.feature-category-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.feature-category-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #00e5ff;
}
.feature-category-title {
  font-family: var(--display);
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  letter-spacing: -0.02em;
}
.feature-modules {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.feature-module {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  overflow: hidden;
}
.feature-module:hover {
  background: rgba(255, 255, 255, 0.035);
  border-color: rgba(255, 255, 255, 0.12);
}
.feature-module[open] {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(0, 229, 255, 0.28);
  box-shadow: 0 4px 20px -4px rgba(0, 229, 255, 0.1);
}
.feature-module-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  cursor: pointer;
  user-select: none;
  list-style: none;
  gap: 10px;
}
.feature-module summary::-webkit-details-marker {
  display: none;
}
.feature-module summary::marker {
  display: none;
}
.feature-module-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}
.feature-module-name {
  font-size: 13.5px;
  font-weight: 600;
  color: #f1f5f9;
  display: flex;
  align-items: center;
  gap: 6px;
}
.feature-chevron {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #71717a;
  flex-shrink: 0;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s, color 0.2s, border-color 0.2s;
}
.feature-module:hover .feature-chevron {
  color: #d4d4d8;
  border-color: rgba(255, 255, 255, 0.18);
}
.feature-module[open] .feature-chevron {
  transform: rotate(180deg);
  background: rgba(0, 229, 255, 0.12);
  border-color: rgba(0, 229, 255, 0.35);
  color: #00e5ff;
}
.feature-module-body {
  padding: 0 14px 12px 14px;
  animation: featureModuleSlide 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes featureModuleSlide {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.feature-tag-new {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(0, 229, 255, 0.12);
  border: 1px solid rgba(0, 229, 255, 0.35);
  color: #00e5ff;
}
.feature-sublist {
  list-style: none;
  margin: 0;
  padding: 6px 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.feature-sublist li {
  font-size: 12px;
  color: #94a3b8;
  display: flex;
  align-items: baseline;
  gap: 7px;
  line-height: 1.45;
}
.feature-sublist li::before {
  content: "•";
  color: #00e5ff;
  font-size: 13px;
  line-height: 1;
  flex-shrink: 0;
}

.mono {
  font-family: var(--mono);
  font-size: 0.88em;
  padding: 3px 7px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #d4d4d4;
  border-radius: 6px;
}

/* --- Split Section --- */
.split {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 64px;
  align-items: center;
}
.split-text h2 {
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.03em;
  margin-bottom: 24px;
  background: linear-gradient(135deg, #ffffff 70%, #d4d4d4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lead {
  font-size: 18px;
  color: var(--text-dim);
  margin-bottom: 36px;
  line-height: 1.65;
}
.checklist {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.checklist li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.checklist svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: #d4d4d4;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  padding: 3px;
  box-sizing: content-box;
}
.checklist strong {
  display: block;
  color: var(--text);
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 4px;
}
.checklist span {
  color: var(--text-dim);
  font-size: 14px;
  line-height: 1.5;
}

/* --- Code Window --- */
.code-window {
  background: #0a0a0a;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8), 0 0 50px rgba(255, 255, 255, 0.06);
}
.code-head {
  padding: 14px 18px;
  background: #111111;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  gap: 12px;
}
.code-dots {
  display: flex;
  gap: 7px;
}
.code-dots span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
.code-dots span:nth-child(1) { background: #ef4444; }
.code-dots span:nth-child(2) { background: #f59e0b; }
.code-dots span:nth-child(3) { background: #737373; }
.code-title {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-mute);
  flex: 1;
  text-align: center;
  padding-right: 48px;
}
.code-body {
  padding: 24px 26px;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.95;
  color: #e2fdf0;
  overflow-x: auto;
  white-space: pre;
}
.c-dim { color: var(--text-mute); }
.c-cmd { color: #d4d4d4; font-weight: 500; }
.c-ok  { color: #ffffff; text-shadow: 0 0 8px rgba(255, 255, 255, 0.35); }
.c-hex { color: #ffffff; }
.c-glow {
  color: #ffffff;
  font-weight: 700;
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.8), 0 0 10px rgba(255, 255, 255, 0.4);
  letter-spacing: 0.22em;
}

/* ============================================================
   PRICING SECTION (MODERN 3-TIER + SWITCH COMPONENT)
   ============================================================ */
.pricing-section-new {
  position: relative;
  padding: 100px 0 120px;
  overflow: visible;
  background: transparent;
}

#pricing.section-dark {
  background: transparent;
}
#pricing.section-dark::before,
#pricing.section-dark::after {
  display: none;
}

.pricing-bg-glow {
  position: absolute;
  top: 15%;
  left: 50%;
  transform: translateX(-50%);
  width: 950px;
  height: 650px;
  background: radial-gradient(circle, rgba(0, 240, 255, 0.12) 0%, rgba(120, 50, 255, 0.06) 45%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  filter: blur(40px);
}

.pricing-title-highlight {
  display: inline-block;
  padding: 2px 14px;
  border-radius: 12px;
  border: 1px dashed rgba(0, 240, 255, 0.4);
  background: rgba(0, 240, 255, 0.08);
  color: #00f0ff;
  font-style: normal;
}

/* Pricing Switch Container */
.pricing-switch-container {
  display: flex;
  justify-content: center;
  margin: 36px 0 54px;
  position: relative;
  z-index: 2;
}

.pricing-switch-track {
  position: relative;
  display: inline-flex;
  align-items: center;
  background: rgba(18, 20, 26, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 9999px;
  padding: 5px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.4);
}

.pricing-switch-btn {
  position: relative;
  z-index: 2;
  background: transparent;
  border: none;
  color: #94a3b8;
  font-family: var(--font-sans, inherit);
  font-size: 14px;
  font-weight: 600;
  padding: 11px 26px;
  border-radius: 9999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: color 0.25s ease;
  user-select: none;
}

.pricing-switch-btn:hover {
  color: #ffffff;
}

.pricing-switch-btn.is-active {
  color: #ffffff;
}

.pricing-switch-glider {
  position: absolute;
  top: 5px;
  left: 5px;
  height: calc(100% - 10px);
  width: calc(50% - 5px);
  background: linear-gradient(135deg, #00c6ff, #0072ff);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 9999px;
  box-shadow: 0 4px 18px rgba(0, 150, 255, 0.45);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), width 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 1;
  pointer-events: none;
}

.pricing-save-badge {
  font-size: 11px;
  font-weight: 700;
  color: #050507;
  background: #a5f3fc;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}

/* Pricing Grid */
.pricing-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1180px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  align-items: center;
}

.pricing-card {
  position: relative;
  background: rgba(18, 20, 26, 0.52);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.pricing-card:hover {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(22, 25, 33, 0.7);
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.4);
}

/* ==================== PROMINENT & BIGGER MOST POPULAR CARD ==================== */
.pricing-card-featured {
  background: linear-gradient(180deg, rgba(14, 30, 52, 0.94) 0%, rgba(10, 16, 26, 0.96) 100%) padding-box,
              linear-gradient(135deg, #00f0ff 0%, #3b82f6 50%, #00f0ff 100%) border-box !important;
  border: 2px solid transparent !important;
  border-radius: 22px;
  padding: 44px 32px 38px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65), 0 0 45px rgba(0, 240, 255, 0.22);
  transform: scale(1.04);
  z-index: 5;
}

.pricing-card-featured:hover {
  transform: scale(1.04) translateY(-4px);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.7), 0 0 55px rgba(0, 240, 255, 0.32);
}

/* Top Floating Pill Tag on Featured Card */
.pricing-featured-tag {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #00f0ff 0%, #0072ff 100%);
  color: #050507;
  font-family: var(--font-sans, inherit);
  font-size: 11.5px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 18px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  box-shadow: 0 4px 20px rgba(0, 240, 255, 0.5), 0 0 12px rgba(0, 240, 255, 0.35);
  z-index: 10;
  white-space: nowrap;
}

.pricing-featured-tag svg {
  color: #050507;
}

/* Card Header */
.pricing-card-header {
  margin-bottom: 24px;
}

.pricing-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.pricing-card-name {
  font-family: var(--display, inherit);
  font-size: 24px;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  letter-spacing: -0.01em;
}

.pricing-card-featured .pricing-card-name {
  font-size: 27px;
  font-weight: 800;
  background: linear-gradient(180deg, #ffffff 30%, #a5f3fc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.pricing-card-desc {
  font-size: 13.5px;
  line-height: 1.55;
  color: #94a3b8;
  margin: 0 0 20px;
  min-height: 42px;
}

.pricing-card-price {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.pricing-currency {
  font-family: var(--display, inherit);
  font-size: 24px;
  font-weight: 700;
  color: #94a3b8;
}

.pricing-card-featured .pricing-currency {
  font-size: 26px;
  color: #38bdf8;
}

.pricing-amount-num {
  font-family: var(--display, inherit);
  font-size: 44px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.03em;
  line-height: 1;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.pricing-card-featured .pricing-amount-num {
  font-size: 52px;
  font-weight: 900;
  color: #ffffff;
  background: linear-gradient(180deg, #ffffff 30%, #a5f3fc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.pricing-amount-num.is-changing {
  opacity: 0.2;
  transform: translateY(-4px);
}

.pricing-period-label {
  font-size: 14px;
  font-weight: 500;
  color: #94a3b8;
  margin-left: 2px;
}

/* Card Body */
.pricing-card-body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.pricing-cta-btn {
  font-size: 15px;
  font-weight: 600;
  padding: 13px 20px;
  border-radius: 12px;
  margin-bottom: 24px;
  text-align: center;
  transition: all 0.25s ease;
}

.pricing-cta-featured {
  background: linear-gradient(135deg, #00f0ff, #0072ff) !important;
  color: #050507 !important;
  font-weight: 750 !important;
  font-size: 16px !important;
  padding: 14px 24px !important;
  border: none !important;
  box-shadow: 0 6px 24px rgba(0, 198, 255, 0.45);
}

.pricing-cta-featured:hover {
  filter: brightness(1.12);
  box-shadow: 0 8px 32px rgba(0, 240, 255, 0.65);
  transform: translateY(-1px);
}

/* Features List */
.pricing-features-list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pricing-features-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13.5px;
  font-weight: 550;
  color: #e2e8f0;
}

.pricing-feature-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #00f0ff;
  flex-shrink: 0;
}

.pricing-card:nth-child(3) .pricing-feature-icon {
  color: #a855f7;
}

/* Includes Box */
.pricing-includes-box {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 20px;
  margin-top: auto;
}

.pricing-includes-title {
  font-size: 13px;
  font-weight: 600;
  color: #cbd5e1;
  margin: 0 0 14px;
  letter-spacing: 0.02em;
}

.pricing-includes-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pricing-includes-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: #94a3b8;
}

.pricing-check-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(0, 240, 255, 0.1);
  border: 1px solid rgba(0, 240, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #00f0ff;
  flex-shrink: 0;
}

/* Responsive */
@media (max-width: 1024px) {
  .pricing-cards-grid {
    grid-template-columns: 1fr;
    max-width: 520px;
    gap: 32px;
  }
  .pricing-card-featured {
    transform: none !important;
    margin: 0 !important;
    padding: 36px 26px !important;
  }
}

@media (max-width: 640px) {
  .pricing-section-new {
    padding: 70px 0 90px;
  }
  .pricing-card {
    padding: 26px 20px;
  }
  .pricing-switch-btn {
    padding: 10px 16px;
    font-size: 13px;
  }
}

/* ============================================================
   ECOSYSTEM (THREE POWERFUL LAYERS - SPOTLIGHT GLOW CARDS)
   ============================================================ */
.layers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1120px;
  margin: 0 auto;
}

.layer-item[data-glow] {
  --radius: 20px;
  --mouse-x: 50%;
  --mouse-y: 50%;
  --glow-opacity: 0;
  
  position: relative;
  border-radius: var(--radius);
  background: rgba(14, 17, 24, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 38px 30px;
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 1rem 2.5rem -1rem rgba(0, 0, 0, 0.7);
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), 
              border-color 0.3s ease, 
              box-shadow 0.3s ease,
              background 0.3s ease;
  cursor: default;
}

.layer-item[data-glow]:hover {
  transform: translateY(-5px);
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(18, 22, 32, 0.85);
  box-shadow: 0 1.5rem 3.5rem -1rem rgba(0, 0, 0, 0.9), 
              0 0 40px -10px hsl(var(--hue, 195) 100% 60% / 0.28);
}

/* Dynamic Radial Spotlight on Background */
.layer-item[data-glow]::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    420px circle at var(--mouse-x) var(--mouse-y),
    hsl(var(--hue, 195) 100% 65% / 0.15),
    transparent 75%
  );
  opacity: var(--glow-opacity, 0);
  transition: opacity 0.35s ease;
  pointer-events: none;
  z-index: 1;
}

/* Dynamic Spotlight Border Highlight */
.layer-item[data-glow]::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1.5px;
  background: radial-gradient(
    320px circle at var(--mouse-x) var(--mouse-y),
    hsl(var(--hue, 195) 100% 70% / 0.85),
    transparent 65%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: var(--glow-opacity, 0);
  transition: opacity 0.35s ease;
  pointer-events: none;
  z-index: 2;
}

/* Inner Ambient Halo Glow */
.layer-item[data-glow] [data-glow-inner] {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    260px circle at var(--mouse-x) var(--mouse-y),
    hsl(var(--hue, 195) 100% 60% / 0.2),
    transparent 70%
  );
  filter: blur(28px);
  opacity: var(--glow-opacity, 0);
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 0;
}

.layer-item-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  position: relative;
  z-index: 3;
}

.layer-index {
  font-family: var(--font-mono, monospace);
  font-size: 13px;
  font-weight: 700;
  color: #00f0ff;
  letter-spacing: 0.06em;
  background: rgba(0, 240, 255, 0.08);
  border: 1px solid rgba(0, 240, 255, 0.25);
  padding: 4px 10px;
  border-radius: 6px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.layer-item:nth-child(1):hover .layer-index {
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.4);
}

.layer-item:nth-child(2) .layer-index {
  color: #c084fc;
  background: rgba(192, 132, 252, 0.08);
  border-color: rgba(192, 132, 252, 0.25);
}
.layer-item:nth-child(2):hover .layer-index {
  box-shadow: 0 0 12px rgba(192, 132, 252, 0.4);
}

.layer-item:nth-child(3) .layer-index {
  color: #34d399;
  background: rgba(52, 211, 153, 0.08);
  border-color: rgba(52, 211, 153, 0.25);
}
.layer-item:nth-child(3):hover .layer-index {
  box-shadow: 0 0 12px rgba(52, 211, 153, 0.4);
}

.layer-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}

.layer-icon--blue {
  color: #00f0ff;
  border-color: rgba(0, 240, 255, 0.25);
  background: rgba(0, 240, 255, 0.06);
}

.layer-icon--purple {
  color: #c084fc;
  border-color: rgba(192, 132, 252, 0.25);
  background: rgba(192, 132, 252, 0.06);
}

.layer-icon--green {
  color: #34d399;
  border-color: rgba(52, 211, 153, 0.25);
  background: rgba(52, 211, 153, 0.06);
}

.layer-item[data-glow]:hover .layer-icon {
  transform: scale(1.06);
  border-color: rgba(255, 255, 255, 0.3);
}

.layer-meta {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #94a3b8;
  margin-bottom: 8px;
  position: relative;
  z-index: 3;
}

.layer-item h3 {
  font-size: 21px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 12px;
  letter-spacing: -0.01em;
  position: relative;
  z-index: 3;
}

.layer-item p {
  font-size: 14px;
  line-height: 1.65;
  color: #94a3b8;
  margin: 0 0 28px;
  flex-grow: 1;
  position: relative;
  z-index: 3;
}

.layer-features {
  list-style: none;
  padding: 20px 0 0;
  margin: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  z-index: 3;
}

.layer-features li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: #e2e8f0;
  font-weight: 450;
}

.layer-features li svg {
  color: #00f0ff;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.layer-item:nth-child(2) .layer-features li svg {
  color: #c084fc;
}

.layer-item:nth-child(3) .layer-features li svg {
  color: #34d399;
}

@media (max-width: 900px) {
  .layers-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .layer-item[data-glow] {
    padding: 28px 22px;
  }
}

/* ============================================================
   LIVE PREVIEW SECTION (REWORKED CLEAN CTA)
   ============================================================ */
.preview-cta-card {
  position: relative;
  max-width: 920px;
  margin: 0 auto;
  background: rgba(14, 17, 26, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 24px;
  padding: 56px 40px 48px;
  text-align: center;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.05),
    0 24px 60px -15px rgba(0, 0, 0, 0.8),
    0 0 45px -10px rgba(0, 240, 255, 0.12);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.preview-cta-card:hover {
  border-color: rgba(0, 240, 255, 0.28);
  box-shadow:
    0 0 0 1px rgba(0, 240, 255, 0.2),
    0 30px 70px -15px rgba(0, 0, 0, 0.9),
    0 0 55px -10px rgba(0, 240, 255, 0.2);
}

.preview-cta-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, rgba(0, 240, 255, 0.8) 35%, rgba(179, 45, 224, 0.7) 65%, transparent);
}

.preview-cta-bg-glow {
  position: absolute;
  top: -50px;
  left: 50%;
  transform: translateX(-50%);
  width: 480px;
  height: 220px;
  background: radial-gradient(ellipse at center, rgba(0, 240, 255, 0.12) 0%, rgba(179, 45, 224, 0.06) 40%, transparent 70%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
}

.preview-cta-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(0, 240, 255, 0.07);
  border: 1px solid rgba(0, 240, 255, 0.24);
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
  color: #00f0ff;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 22px;
  position: relative;
  z-index: 1;
}

.preview-cta-title {
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.025em;
  color: #ffffff;
  margin: 0 0 16px;
  position: relative;
  z-index: 1;
}

.preview-cta-desc {
  font-size: clamp(14px, 1.8vw, 16px);
  line-height: 1.65;
  color: #94a3b8;
  max-width: 680px;
  margin: 0 auto 34px;
  position: relative;
  z-index: 1;
}

.preview-cta-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 32px;
  position: relative;
  z-index: 1;
}

.preview-cta-btn {
  padding: 15px 36px;
  font-size: 15.5px;
  font-weight: 700;
  border-radius: 12px;
  gap: 10px;
  background: #00f0ff;
  color: #000000;
  box-shadow: 0 0 28px rgba(0, 240, 255, 0.4);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-flex;
  align-items: center;
}

.preview-cta-btn:hover {
  background: #38bdf8;
  color: #000000;
  transform: translateY(-2px);
  box-shadow: 0 0 38px rgba(0, 240, 255, 0.6);
}

.preview-cta-features {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  position: relative;
  z-index: 1;
}

.preview-cta-feature-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 500;
  color: #cbd5e1;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  padding: 6px 13px;
  border-radius: 8px;
}

.preview-cta-feature-pill svg {
  color: #00f0ff;
}

@media (max-width: 640px) {
  .preview-cta-card {
    padding: 36px 20px 30px;
  }
  .preview-cta-btn {
    width: 100%;
    justify-content: center;
  }
}

/* --- FAQ --- */
.faq {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.faq details {
  background: rgba(14, 14, 14, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius);
  padding: 22px 26px;
  transition: border-color var(--dur-ui) var(--ease-out), background-color var(--dur-ui) var(--ease-out), color var(--dur-ui) var(--ease-out), opacity var(--dur-ui) var(--ease-out), transform var(--dur-ui) var(--ease-out);
  backdrop-filter: blur(10px);
}
.faq details:hover {
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(14, 14, 14, 0.55);
}
.faq details[open] {
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(14, 14, 14, 0.65);
  box-shadow: 0 10px 30px rgba(255, 255, 255, 0.05);
}
.faq summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 16px;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  user-select: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-size: 24px;
  font-weight: 300;
  color: #ffffff;
  transition: transform 0.25s;
  line-height: 1;
}
.faq details[open] summary::after {
  transform: rotate(45deg);
  color: #d4d4d4;
}
.faq p {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text-dim);
  font-size: 15px;
  line-height: 1.65;
}

/* --- CTA --- */
.cta { padding: 60px 0 110px; }
.cta-box {
  background: linear-gradient(160deg, rgba(30, 30, 30, 0.8) 0%, rgba(8, 8, 8, 0.95) 100%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-lg);
  padding: 64px 48px;
  text-align: center;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(20px) saturate(1.15);
  box-shadow: var(--glow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.cta-box::after {
  content: "";
  position: absolute;
  top: 0; left: 15%; right: 15%;
  height: 1px;
  background: var(--rim-light);
  opacity: 0.9;
  pointer-events: none;
  z-index: 1;
}
.cta-box::before {
  content: "";
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1), transparent 55%);
  animation: rotate 24s linear infinite;
  pointer-events: none;
}
@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.cta-box > * { position: relative; z-index: 1; }
.cta-box h2 {
  font-size: clamp(30px, 4vw, 42px);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 18px;
  background: linear-gradient(135deg, #ffffff, #d4d4d4);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.cta-box p {
  color: var(--text-dim);
  max-width: 520px;
  margin: 0 auto 36px;
  font-size: 16px;
  line-height: 1.6;
}
.cta-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* --- Footer --- */
.footer {
  position: relative;
  border-top: none;
  padding: 90px 0 0;
  /* Transparent — aurora gradient fließt durch */
  background: transparent;
  overflow: hidden;
}
.footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 120px;
  pointer-events: none;
  /* Kein harter Fade — fließt sanft in Footer */
  background: transparent;
  z-index: 0;
}
.footer-inner,
.footer-bottom {
  position: relative;
  z-index: 1;
}
.footer-inner {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 64px;
  padding-bottom: 44px;
}
.footer-brand p { margin-top: 14px; font-size: 14px; color: var(--text-dim); }
.footer-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.footer-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #e5e5e5;
  margin-bottom: 18px;
}
.footer-cols a {
  display: block;
  color: var(--text-mute);
  text-decoration: none;
  font-size: 14px;
  padding: 5px 0;
  transition: color 0.15s;
}
.footer-cols a:hover { color: var(--text); }
.footer-bottom {
  padding: 24px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  color: var(--text-mute);
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.35));
  font-size: 13px;
}
.footer-bottom .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* --- Showcase Slideshow --- */
.showcase {
  position: relative;
}
.showcase-slides {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  min-height: 520px;
}
.showcase-slide {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  padding: 48px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(20px) saturate(1.1);
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateX(60px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1), transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  z-index: 0;
}
.showcase-slide.active {
  opacity: 1;
  transform: translateX(0);
  box-shadow: var(--glow-md), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  pointer-events: auto;
  position: relative;
  z-index: 2;
}
.showcase-slide.slide-out-left {
  opacity: 0;
  transform: translateX(-60px);
}
.showcase-slide.slide-out-right {
  opacity: 0;
  transform: translateX(60px);
}
.showcase-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
  color: #e5e5e5;
  background: rgba(255, 255, 255, 0.05);
  margin-bottom: 20px;
}
.showcase-badge svg { color: #ffffff; }
.showcase-title {
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
  background: linear-gradient(135deg, #ffffff 60%, #d4d4d4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.showcase-desc {
  color: var(--text-dim);
  font-size: 15px;
  line-height: 1.65;
  margin-bottom: 24px;
}
.showcase-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.showcase-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--text-dim);
}
.showcase-list svg {
  color: #d4d4d4;
  flex-shrink: 0;
}

/* Slide Controls */
.showcase-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 32px;
}
.showcase-arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(14, 14, 14, 0.6);
  color: var(--text-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color var(--dur-ui) var(--ease-out), background-color var(--dur-ui) var(--ease-out), color var(--dur-ui) var(--ease-out), transform var(--dur-ui) var(--ease-out);
  backdrop-filter: blur(8px);
}
.showcase-arrow:hover {
  border-color: rgba(255, 255, 255, 0.6);
  color: var(--text);
  background: rgba(255, 255, 255, 0.1);
  transform: scale(1.08);
}
.showcase-dots {
  display: flex;
  gap: 10px;
}
.showcase-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  background: transparent;
  cursor: pointer;
  transition: border-color var(--dur-ui) var(--ease-out), background-color var(--dur-ui) var(--ease-out), color var(--dur-ui) var(--ease-out), opacity var(--dur-ui) var(--ease-out), transform var(--dur-ui) var(--ease-out);
  padding: 0;
}
.showcase-dot.active {
  background: #ffffff;
  border-color: #ffffff;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
  transform: scale(1.2);
}
.showcase-dot:hover:not(.active) {
  border-color: #d4d4d4;
  background: rgba(255, 255, 255, 0.2);
}

/* Device Mockups */
.showcase-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}
.showcase-device {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.7), 0 0 40px rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: #0a0a0a;
}
.showcase-device--desktop {
  width: 100%;
  max-width: 480px;
}
.showcase-device--phone {
  width: 220px;
  border-radius: 28px;
  border: 3px solid rgba(255, 255, 255, 0.25);
}
.device-bar {
  padding: 10px 14px;
  background: #111111;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  gap: 6px;
}
.device-bar span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.device-bar span:nth-child(1) { background: #ef4444; }
.device-bar span:nth-child(2) { background: #f59e0b; }
.device-bar span:nth-child(3) { background: #737373; }
.device-notch {
  width: 100px;
  height: 22px;
  background: #0a0a0a;
  margin: 0 auto;
  border-radius: 0 0 14px 14px;
  position: relative;
  z-index: 3;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.device-screen {
  background: #0a0a0a;
}

/* Panel Mockup (Desktop) */
.panel-mock {
  display: flex;
  min-height: 260px;
}
.panel-sidebar {
  width: 52px;
  background: #111111;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  padding: 14px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.panel-logo-mock {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--accent-gradient);
  opacity: 0.7;
}
.panel-nav-mock {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}
.panel-nav-mock span {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: border-color var(--dur-ui) var(--ease-out), background-color var(--dur-ui) var(--ease-out), color var(--dur-ui) var(--ease-out), opacity var(--dur-ui) var(--ease-out), transform var(--dur-ui) var(--ease-out);
}
.panel-nav-mock span.active {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
}
.panel-main {
  flex: 1;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.panel-header-mock {
  width: 60%;
  height: 14px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  margin-bottom: 4px;
}
.panel-grid-mock {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* Toggle Mockups */
.panel-toggle-mock, .phone-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  background: rgba(14, 14, 14, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  font-size: 11px;
  color: var(--text-dim);
}
.toggle-track {
  width: 32px;
  height: 18px;
  border-radius: 99px;
  background: rgba(255,255,255,0.08);
  position: relative;
  transition: background 0.3s;
  flex-shrink: 0;
}
.toggle-track.sm { width: 28px; height: 16px; }
.toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #555;
  transition: border-color var(--dur-ui) var(--ease-out), background-color var(--dur-ui) var(--ease-out), color var(--dur-ui) var(--ease-out), opacity var(--dur-ui) var(--ease-out), transform var(--dur-ui) var(--ease-out);
}
.toggle-track.sm .toggle-thumb { width: 12px; height: 12px; }
.toggle-thumb.on {
  left: calc(100% - 16px);
  background: #ffffff;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
}
.toggle-track.sm .toggle-thumb.on { left: calc(100% - 14px); }

/* Slider Mockups */
.panel-slider-mock, .phone-slider-area {
  padding: 8px 10px;
  background: rgba(14, 14, 14, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  font-size: 11px;
  color: var(--text-dim);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.slider-track {
  width: 100%;
  height: 5px;
  border-radius: 99px;
  background: rgba(255,255,255,0.06);
  position: relative;
}
.slider-fill {
  height: 100%;
  border-radius: 99px;
  background: var(--accent-gradient);
}
.slider-knob {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #111111;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.4);
}

/* Phone Mockup */
.phone-mock {
  padding: 0 0 16px;
}
.phone-status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 16px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
}
.phone-status-icons { display: flex; gap: 4px; color: var(--text-dim); }
.phone-header-mock {
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  padding: 10px 0 14px;
  color: var(--text);
  letter-spacing: 0.12em;
  background: linear-gradient(135deg, #ffffff 50%, #a3a3a3 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.phone-toggles {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 12px;
}
.phone-slider-area {
  margin: 10px 12px 0;
}

/* Radar Mockup */
.radar-mock {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: radial-gradient(circle, #111111 0%, #000000 100%);
  overflow: hidden;
}
.radar-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 20% 20%;
}
.radar-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.08);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}
.radar-ring.ring-1 { width: 30%; height: 48%; }
.radar-ring.ring-2 { width: 55%; height: 88%; }
.radar-ring.ring-3 { width: 80%; height: 128%; }
.radar-sweep {
  position: absolute;
  top: 50%; left: 50%;
  width: 50%;
  height: 2px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.5), transparent);
  transform-origin: left center;
  animation: radar-spin 4s linear infinite;
}
@keyframes radar-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.radar-dot {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 8px #ffffff, 0 0 16px rgba(255, 255, 255, 0.3);
  animation: radar-blink 2s ease-in-out infinite;
}
.dot-1 { top: 25%; left: 35%; animation-delay: 0s; }
.dot-2 { top: 60%; left: 22%; animation-delay: 0.4s; }
.dot-3 { top: 40%; left: 70%; animation-delay: 0.8s; }
.dot-4 { top: 72%; left: 58%; animation-delay: 1.2s; }
.dot-5 { top: 18%; left: 78%; animation-delay: 1.6s; }
.dot-self {
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 10px; height: 10px;
  background: #d4d4d4;
  box-shadow: 0 0 10px #d4d4d4, 0 0 20px rgba(255, 255, 255, 0.4);
  animation: none;
}
@keyframes radar-blink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.7); }
}

/* --- How It Works / Steps --- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  position: relative;
}
.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
}
.step-num {
  font-family: var(--mono);
  font-size: 48px;
  font-weight: 900;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.03));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
  margin-bottom: 20px;
}
.step-connector {
  display: none;
}
.step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 24px;
  right: -16px;
  width: calc(100% - 80px);
  height: 1px;
  left: calc(50% + 40px);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
}
.step-card {
  background: rgba(14, 14, 14, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
  padding: 32px 24px;
  width: 100%;
  transition: border-color var(--dur-ui) var(--ease-out), background-color var(--dur-ui) var(--ease-out), color var(--dur-ui) var(--ease-out), box-shadow var(--dur-ui) var(--ease-out), transform var(--dur-ui) var(--ease-out);
  backdrop-filter: blur(12px);
}
.step-card:hover {
  border-color: rgba(255, 255, 255, 0.35);
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(255, 255, 255, 0.06);
}
.step-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.03));
  border: 1px solid rgba(255, 255, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  color: #ffffff;
  transition: border-color var(--dur-ui) var(--ease-out), background-color var(--dur-ui) var(--ease-out), color var(--dur-ui) var(--ease-out), opacity var(--dur-ui) var(--ease-out), transform var(--dur-ui) var(--ease-out);
}
.step-card:hover .step-icon {
  color: #d4d4d4;
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
  transform: scale(1.08);
}
.step-card h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--text);
}
.step-card p {
  color: var(--text-dim);
  font-size: 14px;
  line-height: 1.65;
}



/* --- Responsive --- */
@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-actions { gap: 8px; }
  .nav-actions a[href="/panel"] { display: none; }
  .nav-inner { height: 64px; gap: 10px; }
  .logo-text { font-size: 15px; letter-spacing: 0.14em; }
  .btn-sm { padding: 10px 14px; font-size: 13px; min-height: 40px; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .stat::before, .stat::after { display: none !important; }
  .split { grid-template-columns: 1fr; gap: 48px; }
  .pricing-grid { grid-template-columns: 1fr; gap: 32px; justify-items: center; }
  .pricing-grid--two { grid-template-columns: 1fr; max-width: 100%; }
  .pricing-grid .card,
  .pricing-grid .card:first-child {
    width: min(100%, 28rem);
    transform: none;
  }
  .footer-inner { grid-template-columns: 1fr; gap: 48px; }
  .footer-cols { grid-template-columns: repeat(3, 1fr); }
  .showcase-slide { grid-template-columns: 1fr; gap: 32px; padding: 32px; }
  .showcase-slides { min-height: auto; }
  .showcase-device--desktop { max-width: 100%; }
  .steps { grid-template-columns: 1fr; gap: 24px; }
  .step:not(:last-child)::after { display: none; }
}
@media (max-width: 600px) {
  .section { padding: 75px 0; }
  .hero { padding: 80px 0 50px; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); padding: 26px; }
  .stat-num { font-size: 24px; }
  .cta-box { padding: 44px 26px; }
  .footer-cols { grid-template-columns: 1fr; gap: 26px; }
  .footer-bottom .container { flex-direction: column; gap: 12px; text-align: center; }
  .showcase-slide { padding: 24px; }
  .testimonial-card { width: 290px; }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { width: 100%; }
  .nav-actions a[href="#pricing"] { display: none; }
  .nav-actions a[href="/login"] {
    background: #fff;
    color: #000;
    border-color: transparent;
  }
}

/* ============================================================
   CUSTOMER PORTAL — login.html + dashboard.html
   ============================================================ */

.portal-main {
  min-height: 100vh;
  padding: 120px 0 80px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: relative;
  z-index: 2;
}

/* Portal pages: lighter GPU load (fewer stacked blurs) */
body[data-page="login"] .glow-2,
body[data-page="login"] .glow-3,
body[data-page="dashboard"] .glow-2,
body[data-page="dashboard"] .glow-3 {
  display: none;
}
.portal-main {
  position: relative;
  min-height: calc(100vh - 80px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 0 60px;
}
.portal-main.dashboard-main {
  align-items: flex-start;
  padding: 100px 0 90px;
}
.container.narrow {
  max-width: 520px;
  width: 100%;
}

/* Ambient glow & header badge */
.portal-ambient-glow {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 450px;
  background: radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.08), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.portal-header-tag {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #99999f;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  margin-left: 14px;
  display: inline-flex;
  align-items: center;
}

/* Status chips & badges */
.portal-badge-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.status-chip.chip-online {
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.28);
  color: #34d399;
}
.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 10px #10b981;
  animation: pulseDot 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.85); }
}
.portal-badge-ver {
  font-family: var(--mono);
  font-size: 11px;
  color: #888892;
  padding: 3px 9px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* --- Customer Login Card --- */
.portal-wrapper {
  position: relative;
  width: 100%;
  z-index: 1;
}
.portal-card {
  background: linear-gradient(175deg, rgba(22, 22, 26, 0.94) 0%, rgba(10, 10, 12, 0.98) 100%);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: var(--radius-lg);
  padding: 44px 40px 38px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(24px) saturate(1.2);
}
.card-glow-overlay {
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  pointer-events: none;
}
.portal-card-head {
  text-align: center;
  margin-bottom: 32px;
  position: relative;
}
.portal-icon {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  margin: 0 auto 20px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.04));
  border: 1px solid rgba(255, 255, 255, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  box-shadow: 0 0 24px rgba(255, 255, 255, 0.12);
}
.portal-card h1 {
  font-family: var(--display);
  font-size: 29px;
  font-weight: 700;
  margin-bottom: 8px;
  letter-spacing: -0.02em;
  color: #ffffff;
}
.portal-sub {
  color: var(--text-dim);
  font-size: 14.5px;
  line-height: 1.55;
  max-width: 420px;
  margin: 0 auto;
}

/* Form controls & inputs */
.portal-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.portal-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #e5e5ea;
}
.label-action {
  background: none;
  border: none;
  color: #a0a0ab;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: all 0.15s;
}
.label-action:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
}
.portal-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.input-icon {
  position: absolute;
  left: 16px;
  color: #777782;
  pointer-events: none;
}
.portal-input {
  width: 100%;
  padding: 14px 44px 14px 44px;
  background: rgba(0, 0, 0, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 15px;
  outline: none;
  transition: border-color var(--dur-ui) var(--ease-out), box-shadow var(--dur-ui) var(--ease-out), background-color var(--dur-ui) var(--ease-out);
}
.portal-input.mono {
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.08em;
}
.portal-input::placeholder {
  color: #555562;
  letter-spacing: 0.04em;
}
.portal-input:focus {
  border-color: rgba(255, 255, 255, 0.6);
  background: rgba(8, 8, 10, 0.98);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.12), 0 0 20px rgba(255, 255, 255, 0.08);
}
.input-clear-btn {
  position: absolute;
  right: 12px;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  border: none;
  color: #9999a5;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s;
}
.input-clear-btn:hover {
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}

/* Custom Checkbox */
.form-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 0;
}
.custom-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  user-select: none;
}
.custom-checkbox input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.checkbox-indicator {
  width: 17px;
  height: 17px;
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.custom-checkbox input:checked + .checkbox-indicator {
  background: #ffffff;
  border-color: #ffffff;
}
.custom-checkbox input:checked + .checkbox-indicator::after {
  content: "";
  width: 5px;
  height: 9px;
  border: solid #000000;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-0.5px, -1px);
}
.checkbox-label {
  font-size: 13px;
  color: #b0b0bb;
}
.custom-checkbox:hover .checkbox-label {
  color: #ffffff;
}

/* Error banner */
.portal-error {
  color: #f87171;
  font-size: 13px;
  padding: 11px 16px;
  border-radius: var(--radius-sm);
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.28);
  display: none;
  line-height: 1.45;
}
.portal-error.is-visible {
  display: block;
  animation: errShake 0.3s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}
@keyframes errShake {
  10%, 90% { transform: translate3d(-1px, 0, 0); }
  20%, 80% { transform: translate3d(2px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-3px, 0, 0); }
  40%, 60% { transform: translate3d(3px, 0, 0); }
}

/* Button styles & Busy state */
.btn.btn-block {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.btn.btn-lg {
  padding: 15px 24px;
  font-size: 15px;
  font-weight: 600;
  border-radius: var(--radius);
}
.btn .btn-spinner {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22px;
  height: 22px;
  margin-left: -11px;
  margin-top: -11px;
  border-radius: 50%;
  border: none;
  opacity: 0;
  animation: loaderCircleBtn 2.4s linear infinite;
  pointer-events: none;
  transition: opacity 0.2s;
}
.btn.is-busy .btn-label,
.btn.is-busy .btn-arrow,
.btn.is-busy > svg {
  opacity: 0;
}
.btn.is-busy .btn-spinner {
  opacity: 1;
}
.btn.is-busy {
  pointer-events: none;
}
@keyframes loaderCircleBtn {
  0% {
    transform: rotate(90deg);
    box-shadow:
      0 2px 4px 0 rgba(255, 255, 255, 0.9) inset,
      0 4px 6px 0 rgba(255, 255, 255, 0.55) inset,
      0 8px 8px 0 rgba(255, 255, 255, 0.25) inset,
      0 0 2px 1px rgba(255, 255, 255, 0.45),
      0 0 4px 1.5px rgba(255, 255, 255, 0.3);
  }
  50% {
    transform: rotate(270deg);
    box-shadow:
      0 2px 4px 0 rgba(255, 255, 255, 0.95) inset,
      0 4px 2px 0 rgba(255, 255, 255, 0.65) inset,
      0 6px 8px 0 rgba(255, 255, 255, 0.3) inset,
      0 0 2px 1px rgba(255, 255, 255, 0.5),
      0 0 4px 1.5px rgba(255, 255, 255, 0.35);
  }
  100% {
    transform: rotate(450deg);
    box-shadow:
      0 2px 4px 0 rgba(255, 255, 255, 0.9) inset,
      0 4px 6px 0 rgba(255, 255, 255, 0.55) inset,
      0 8px 8px 0 rgba(255, 255, 255, 0.25) inset,
      0 0 2px 1px rgba(255, 255, 255, 0.45),
      0 0 4px 1.5px rgba(255, 255, 255, 0.3);
  }
}

.portal-hint {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 13.5px;
  color: var(--text-dim);
  text-align: left;
  line-height: 1.5;
}
.portal-hint svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: #777782;
}
.portal-hint a {
  color: #e5e5ea;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.15s;
}
.portal-hint a:hover {
  color: #ffffff;
  text-decoration: underline;
}

/* Security pills below login */
.portal-security {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.sec-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: #9999a4;
  padding: 6px 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.025);
  backdrop-filter: blur(8px);
}
.sec-pill svg {
  color: #d1d1d8;
}

/* --- Floating Toasts --- */
.portal-toast-container {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.portal-toast {
  background: rgba(18, 18, 22, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  padding: 12px 18px;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.75);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #ffffff;
  font-size: 13.5px;
  opacity: 0;
  transform: translateY(12px) scale(0.96);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: auto;
  backdrop-filter: blur(14px);
  max-width: 380px;
}
.portal-toast.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.portal-toast.is-hiding {
  opacity: 0;
  transform: translateY(-8px) scale(0.96);
}
.portal-toast .toast-icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.toast-success .toast-icon { color: #10b981; }
.toast-error .toast-icon { color: #ef4444; }
.toast-info .toast-icon { color: #38bdf8; }

/* ============================================================
   DASHBOARD / COMMAND CENTER STYLES
   ============================================================ */
.dash-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
}
.dash-hero::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 140px;
  height: 2px;
  background: linear-gradient(90deg, #ffffff, transparent);
}
.dash-hero-copy h1 {
  font-family: var(--display);
  font-size: clamp(32px, 5vw, 44px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 4px 0 8px;
  background: linear-gradient(135deg, #ffffff 55%, #b0b0b0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.dash-hero .portal-sub {
  margin: 0;
  max-width: 480px;
  text-align: left;
}
.dash-hero-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* Quick Stat Strip */
.dash-stat-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}
.dash-stat-card {
  background: linear-gradient(165deg, rgba(20, 20, 24, 0.7), rgba(12, 12, 14, 0.8));
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius);
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  overflow: hidden;
}
.dash-stat-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
}
.dash-stat-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #7e7e89;
}
.dash-stat-val {
  display: flex;
  align-items: center;
  min-height: 26px;
}
.dash-stat-time,
.dash-stat-num {
  font-size: 17px;
  font-weight: 700;
  color: #ffffff;
}
.dash-stat-pill {
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.dash-stat-pill.pill-locked {
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #34d399;
}
.dash-stat-pill.pill-ready {
  background: rgba(56, 189, 248, 0.1);
  border: 1px solid rgba(56, 189, 248, 0.3);
  color: #38bdf8;
}

/* Main Dashboard Grid */
.dash-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.dash-card {
  background: linear-gradient(170deg, rgba(20, 20, 24, 0.85) 0%, rgba(10, 10, 12, 0.94) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  padding: 28px 30px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(18px) saturate(1.1);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: border-color var(--dur-ui) var(--ease-out), transform var(--dur-ui) var(--ease-out), box-shadow var(--dur-ui) var(--ease-out);
}
.dash-card.dash-in {
  animation: dash-card-in var(--dur-reveal) var(--ease-out) both;
}
.dash-card.dash-in:nth-child(1) { animation-delay: 0ms; }
.dash-card.dash-in:nth-child(2) { animation-delay: 50ms; }
.dash-card.dash-in:nth-child(3) { animation-delay: 100ms; }
.dash-card.dash-in:nth-child(4) { animation-delay: 150ms; }
.dash-card.dash-in:nth-child(5) { animation-delay: 200ms; }

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

.dash-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: var(--rim-light);
  opacity: 0.45;
  pointer-events: none;
}
.dash-card:hover {
  border-color: rgba(255, 255, 255, 0.25);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
@media (hover: hover) and (pointer: fine) {
  .dash-card:hover { transform: translateY(-2px); }
}

/* Featured Download Card */
.dash-card-featured {
  grid-column: 1 / -1;
  border-color: rgba(255, 255, 255, 0.2);
  background: linear-gradient(165deg, rgba(24, 24, 30, 0.92) 0%, rgba(12, 12, 14, 0.98) 100%);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.dash-card-featured::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(700px 220px at 90% -10%, rgba(255, 255, 255, 0.08), transparent 65%);
  pointer-events: none;
}
.dash-card-head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.dash-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.03));
  border: 1px solid rgba(255, 255, 255, 0.24);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  flex-shrink: 0;
}
.dash-card-icon-bright {
  background: #ffffff !important;
  color: #000000 !important;
  border-color: #ffffff !important;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
}
.dash-card-title-group {
  flex: 1;
}
.dash-card-tag {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  color: #34d399;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.dash-card-head h3 {
  font-size: 19px;
  font-weight: 700;
  margin-bottom: 4px;
  color: #ffffff;
}
.dash-card-sub {
  color: var(--text-dim);
  font-size: 13.5px;
  line-height: 1.5;
}

/* Download action & quota */
.dash-dl-action-box {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 580px;
}
.dash-quota-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dash-quota-bar {
  height: 5px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  overflow: hidden;
}
.dash-quota-fill {
  height: 100%;
  background: linear-gradient(90deg, #34d399, #10b981);
  border-radius: 999px;
  transition: width 0.4s ease;
}
.dash-quota-fill.is-full {
  background: linear-gradient(90deg, #f87171, #ef4444);
}
.dash-quota-labels {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: #888892;
}
.dash-quota-labels strong {
  color: #ffffff;
}

/* Quick 3-Step Setup */
.dash-setup-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.setup-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.step-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.step-content {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.step-content strong {
  font-size: 13.5px;
  color: #ffffff;
}
.step-content span {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.45;
}
.step-content code,
.step-content kbd {
  font-family: var(--mono);
  font-size: 11px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 1px 5px;
  border-radius: 4px;
  color: #ffffff;
}
.setup-step-link {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: inherit;
  transition: all 0.15s ease;
}
.setup-step-link strong {
  color: #38bdf8;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.setup-step-link:hover strong {
  color: #7dd3fc;
  text-decoration: underline;
}
.setup-step-link:hover span {
  color: #ffffff;
}

/* ============================================
   REWORKED DOWNLOAD HERO
   ============================================ */
.dash-download-hero {
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: relative;
}
.dash-dl-glow {
  position: absolute;
  top: -40px; left: 50%;
  width: 400px; height: 200px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.06) 0%, transparent 70%);
  pointer-events: none;
}
.dash-dl-top {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dash-dl-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}
.dash-dl-badge-row {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
}
.dash-dl-main-row {
  display: flex;
  align-items: center;
  gap: 20px;
  justify-content: center;
}
.dash-version-badge {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  color: #000;
  background: #fff;
  padding: 3px 10px;
  border-radius: 6px;
  letter-spacing: 0.04em;
}
.dash-build-badge {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  color: #34d399;
  background: rgba(52, 211, 153, 0.1);
  border: 1px solid rgba(52, 211, 153, 0.25);
  padding: 3px 10px;
  border-radius: 6px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.dash-dl-title {
  font-family: var(--heading);
  font-size: 32px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.dash-dl-ext {
  color: rgba(255, 255, 255, 0.35);
  font-weight: 500;
}
.dash-dl-tagline {
  font-size: 14px;
  color: var(--text-dim);
  line-height: 1.5;
  max-width: 480px;
}
.dash-dl-cta {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 420px;
  width: 100%;
  align-items: center;
}

/* Download icon button */
.btn-dl-icon-big {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: #ffffff;
  color: #000000;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  flex-shrink: 0;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.08);
}
.btn-dl-icon-big:hover {
  background: #f0f0f0;
  transform: scale(1.08);
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.12), 0 8px 30px rgba(255, 255, 255, 0.15);
}
.btn-dl-icon-big:active {
  transform: scale(0.97);
}
.btn-dl-icon-big.is-busy {
  opacity: 0.6;
  pointer-events: none;
}

/* Compact quota bar */
.dash-quota-mini {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  max-width: 340px;
}
.dash-quota-mini .dash-quota-bar {
  height: 4px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  overflow: hidden;
}
.dash-quota-mini .dash-quota-fill {
  height: 100%;
  background: linear-gradient(90deg, #34d399, #10b981);
  border-radius: 999px;
  transition: width 0.4s ease;
}
.dash-quota-mini .dash-quota-fill.is-full {
  background: linear-gradient(90deg, #f87171, #ef4444);
}
.dash-quota-info {
  font-size: 12px;
  color: #666670;
  font-family: var(--mono);
  text-align: center;
}
.dash-quota-info span:first-child { color: #fff; font-weight: 600; }
.dash-quota-sep { color: #444; margin: 0 1px; }

/* Quick Start strip */
.dash-quick-start {
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.dash-qs-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #555;
  margin-bottom: 14px;
}
.dash-qs-steps {
  display: flex;
  align-items: flex-start;
  gap: 0;
}
.qs-step {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex: 1;
}
.qs-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}
.qs-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.qs-text strong {
  font-size: 13px;
  color: #fff;
  font-weight: 600;
}
.qs-text span {
  font-size: 11.5px;
  color: var(--text-dim);
  line-height: 1.4;
}
.qs-divider {
  display: flex;
  align-items: center;
  padding-top: 6px;
  color: rgba(255, 255, 255, 0.15);
  flex-shrink: 0;
  margin: 0 4px;
}
.qs-step-action .qs-icon {
  background: rgba(56, 189, 248, 0.1);
  border-color: rgba(56, 189, 248, 0.25);
  color: #38bdf8;
}
.qs-link {
  text-decoration: none;
  color: inherit;
}
.qs-link strong {
  color: #38bdf8;
  transition: color 0.15s;
}
.qs-link:hover strong {
  color: #7dd3fc;
  text-decoration: underline;
}
.qs-link:hover span {
  color: #fff;
}

/* ============================================
   CHANGELOG CARD
   ============================================ */
.dash-card-changelog {
  grid-column: 1 / -1;
}
.changelog-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-height: 320px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.1) transparent;
}
.changelog-loading {
  font-size: 13px;
  color: var(--text-dim);
  padding: 12px 0;
}
.cl-entry {
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.cl-entry:last-child { border-bottom: none; }
.cl-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.cl-version {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}
.cl-date {
  font-family: var(--mono);
  font-size: 11.5px;
  color: #555;
}
.cl-tag-latest {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #34d399;
  background: rgba(52, 211, 153, 0.1);
  border: 1px solid rgba(52, 211, 153, 0.2);
  padding: 1px 8px;
  border-radius: 4px;
}
.cl-changes {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 2px;
}
.cl-change {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.5;
}
.cl-type {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1px 6px;
  border-radius: 3px;
  flex-shrink: 0;
  margin-top: 2px;
}
.cl-type-new      { color: #34d399; background: rgba(52, 211, 153, 0.1); }
.cl-type-improved { color: #38bdf8; background: rgba(56, 189, 248, 0.1); }
.cl-type-fixed    { color: #fbbf24; background: rgba(251, 191, 36, 0.1); }
.cl-type-security { color: #f87171; background: rgba(248, 113, 113, 0.1); }

@media (max-width: 768px) {
  .dash-dl-title { font-size: 24px; }
  .dash-qs-steps { flex-direction: column; gap: 12px; }
  .qs-divider { display: none; }
  .btn-download-hero { padding: 12px 16px; }
  .dash-dl-cta { max-width: 100%; }
}

/* Fields & Keys */
.dash-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dash-field label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #e5e5ea;
}
.field-aux {
  font-size: 11.5px;
  color: #777782;
}
.field-aux.is-active {
  color: #34d399;
}
.dash-key-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.dash-key {
  flex: 1;
  font-family: var(--mono);
  font-size: 15px;
  padding: 12px 16px;
  background: rgba(0, 0, 0, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-sm);
  color: var(--text);
  letter-spacing: 0.08em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dash-mono-sm {
  font-family: var(--mono);
  font-size: 13px;
  padding: 11px 14px;
  background: rgba(0, 0, 0, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  word-break: break-all;
  display: block;
}

.btn-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(0, 0, 0, 0.7);
  color: var(--text-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--dur-ui) var(--ease-out);
  flex-shrink: 0;
}
.btn-icon:hover {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.08);
}
.btn-icon.is-flash {
  color: #10b981;
  border-color: #10b981;
  background: rgba(16, 185, 129, 0.12);
}

.dash-meta-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.dash-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dash-meta label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #777782;
}
.dash-meta-val {
  font-size: 14px;
  color: #ffffff;
}
.dash-sec-note {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #888892;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm);
}
.dash-sec-note svg {
  color: #a0a0ab;
  flex-shrink: 0;
}

/* HWID Action row & hints */
.dash-hwid-action-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dash-hint {
  font-size: 12.5px;
  color: #888892;
  line-height: 1.45;
}
.dash-hint.is-ok { color: #34d399; }
.dash-hint.is-err { color: #f87171; }

.btn.is-disabled,
.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* Radar preview card */
.dash-radar-preview {
  padding: 16px 18px;
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.radar-preview-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  color: #38bdf8;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.radar-preview-status .status-dot {
  background: #38bdf8;
  box-shadow: 0 0 8px #38bdf8;
}
.radar-preview-desc {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.5;
  margin: 0;
}

/* Community & Links */
.dash-links {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.dash-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--text);
  transition: all var(--dur-ui) var(--ease-out);
}
.dash-link:hover {
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.06);
  transform: translateY(-2px);
}
.dash-link-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  flex-shrink: 0;
}
.dash-link-text {
  flex: 1;
}
.dash-link-text strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 2px;
}
.dash-link-text span {
  display: block;
  font-size: 12.5px;
  color: #888892;
}
.dash-link-arrow {
  color: #666672;
  transition: transform 0.2s, color 0.2s;
  flex-shrink: 0;
}
.dash-link:hover .dash-link-arrow {
  color: #ffffff;
  transform: translateX(3px);
}

/* Responsive queries */
@media (max-width: 900px) {
  .dash-stat-strip {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .dash-setup-steps {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

@media (max-width: 800px) {
  .dash-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .portal-card {
    padding: 30px 22px 26px;
    margin-top: 10px;
  }
  .dash-hero {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 20px;
    padding-bottom: 18px;
  }
  .portal-main {
    padding: 24px 0 48px;
  }
  .portal-main.dashboard-main {
    padding: 24px 0 64px;
  }
  .dash-card {
    padding: 22px 20px;
    gap: 18px;
  }
  .dash-meta-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .dash-key {
    font-size: 13px;
    padding: 10px 12px;
  }
  .btn-icon {
    width: 42px;
    height: 42px;
  }
}

/* --- Scroll-animated WebMenu showcase --- */
.showcase-scroll-section {
  padding-bottom: 0;
  overflow: visible;
}
.showcase-scroll-section .section-head {
  margin-bottom: 28px;
}
.panel-scroll {
  --p: 0;
  position: relative;
  z-index: 2;
}
.panel-scroll-track {
  height: 220vh;
  position: relative;
}
.panel-scroll-track::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 160px;
  pointer-events: none;
  /* Transparent — kein harter Fade zur nächsten Section */
  background: transparent;
  z-index: 4;
}
.panel-scroll-sticky {
  position: sticky;
  top: 88px;
  height: calc(100vh - 110px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 0 24px 40px;
  perspective: 1400px;
}
.panel-scroll-glow {
  position: absolute;
  width: min(900px, 80vw);
  height: 55%;
  top: 18%;
  left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(180, 220, 255, 0.14), transparent 68%);
  filter: blur(40px);
  opacity: calc(0.25 + var(--p) * 0.55);
  pointer-events: none;
  z-index: 0;
}
.panel-scroll-frame {
  position: relative;
  z-index: 1;
  margin: 0;
  width: min(1080px, 92vw);
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(220, 230, 255, 0.14);
  background: #0a0a0e;
  box-shadow:
    0 40px 100px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(255, 255, 255, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transform:
    translateY(calc((1 - var(--p)) * 56px))
    scale(calc(0.82 + var(--p) * 0.18))
    rotateX(calc((1 - var(--p)) * 7deg));
  opacity: calc(0.55 + var(--p) * 0.45);
  will-change: transform, opacity;
}
.panel-scroll-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(5, 5, 7, 0.32) 0%, transparent 18%, transparent 70%, rgba(5, 5, 7, 0.5) 100%),
    linear-gradient(90deg, rgba(5, 5, 7, 0.25) 0%, transparent 14%, transparent 86%, rgba(5, 5, 7, 0.25) 100%),
    radial-gradient(ellipse 90% 80% at 50% 45%, transparent 42%, rgba(5, 5, 7, 0.38) 100%);
  opacity: calc(0.9 - var(--p) * 0.4);
}
.panel-scroll-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.07) 0%, transparent 30%, transparent 100%);
  opacity: calc(0.35 + var(--p) * 0.4);
}
.panel-scroll-img {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: middle;
  transform: scale(calc(1.06 - var(--p) * 0.06));
  transform-origin: 50% 40%;
  will-change: transform;
  filter: contrast(1.02) brightness(0.9);
}
.panel-scroll-caption {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 480px;
  opacity: calc(clamp(0, (var(--p) - 0.12) / 0.55, 1));
  transform: translateY(calc((1 - clamp(0, (var(--p) - 0.12) / 0.55, 1)) * 18px));
}
.panel-scroll-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #c8d0e4;
  border: 1px solid rgba(200, 210, 240, 0.22);
  border-radius: 999px;
  padding: 6px 12px;
  margin-bottom: 12px;
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(8px);
}
.panel-scroll-caption h3 {
  font-family: var(--display);
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--text);
}
.panel-scroll-caption p {
  color: var(--text-dim);
  font-size: 15px;
  line-height: 1.55;
  margin: 0;
}

@media (max-width: 700px) {
  .panel-scroll-track { height: 180vh; }
  .panel-scroll-sticky {
    top: 72px;
    height: calc(100vh - 90px);
    gap: 18px;
  }
  .panel-scroll-frame {
    border-radius: 14px;
    transform:
      translateY(calc((1 - var(--p)) * 36px))
      scale(calc(0.88 + var(--p) * 0.12))
      rotateX(calc((1 - var(--p)) * 5deg));
  }
}

@media (prefers-reduced-motion: reduce) {
  .panel-scroll-track { height: auto; }
  .panel-scroll-sticky { position: relative; top: 0; height: auto; padding: 24px; }
  .panel-scroll-frame,
  .panel-scroll-img,
  .panel-scroll-caption,
  .panel-scroll-glow {
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
  }
  .panel-scroll-frame::before { opacity: 0.35; }
  .pricing-grid .card .card__border::before { animation: none; }
}

/* ============================================================
   MOBILE PERF — kill heavy GPU layers / fixed bg / long scroll
   ============================================================ */
@media (max-width: 900px) {
  html { scroll-behavior: auto; }
  body {
    background-attachment: scroll !important;
    background-image: none !important;
    background-color: #050507 !important;
  }
  body::before,
  .grain,
  .glow,
  .ambient-light,
  .rain-bg {
    display: none !important;
    animation: none !important;
  }
  .nav {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(5, 5, 7, 0.96) !important;
  }
  .portal-card,
  .dash-card,
  .feature,
  .pricing-grid .card,
  .cta-box,
  .faq details,
  .stat,
  .testimonial-card,
  .btn-outline {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  body[data-page="login"] .portal-card,
  body[data-page="dashboard"] .dash-card {
    background: #121218 !important;
    border-color: rgba(255,255,255,0.12);
    box-shadow: none;
    transform: none !important;
  }
  .dash-card:hover,
  .dash-link:hover {
    transform: none !important;
  }
  .btn-primary::after { display: none !important; animation: none !important; }
  .pricing-grid .card .card__border::before { animation: none !important; }
  .hero-bg-img {
    filter: none !important;
    opacity: 0.45;
    transform: translate(-50%, -50%) scale(1) !important;
  }
  .panel-scroll-track { height: auto !important; }
  .panel-scroll-sticky {
    position: relative !important;
    top: 0 !important;
    height: auto !important;
    padding: 12px 0 28px !important;
    perspective: none !important;
  }
  .panel-scroll-frame,
  .panel-scroll-img,
  .panel-scroll-caption,
  .panel-scroll-glow {
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
    will-change: auto !important;
  }
  .panel-scroll-glow { display: none !important; }
  .reveal, .reveal-stagger {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    will-change: auto !important;
  }
}

/* ============================================================
   Fresh ZERO polish — portal + motion a11y
   ============================================================ */
.portal-card-head .eyebrow {
  margin-bottom: 18px;
}
.portal-card h1 {
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  color: var(--text);
  letter-spacing: -0.03em;
}
.btn-icon {
  transition:
    border-color var(--dur-ui) var(--ease-out),
    background-color var(--dur-ui) var(--ease-out),
    color var(--dur-ui) var(--ease-out),
    transform var(--dur-press) var(--ease-out);
}
.btn-icon:active {
  transform: scale(0.97);
}
.dash-link {
  transition:
    border-color var(--dur-ui) var(--ease-out),
    background-color var(--dur-ui) var(--ease-out),
    transform var(--dur-ui) var(--ease-out);
}
.pricing-grid .card .button {
  transition:
    transform var(--dur-press) var(--ease-out),
    background-color var(--dur-ui) var(--ease-out),
    box-shadow var(--dur-ui) var(--ease-out);
}
.pricing-grid .card .button:active {
  transform: scale(0.97);
}
@media (hover: hover) and (pointer: fine) {
  .pricing-grid .card .button:hover {
    transform: none;
  }
  .nav-links a:hover {
    text-shadow: none;
    color: var(--text);
  }
}

@media (prefers-reduced-motion: reduce) {
  .dash-card.dash-in,
  .badge-dot,
  .dash-live-dot,
  .pipe-particle,
  .radar-scan-line,
  .radar-ping,
  .live-dot-pulse {
    animation: none !important;
  }
  .layer-card,
  .layer-card-glow,
  .layer-icon-box {
    transition: none !important;
  }
}

/* ============================================================
   HERO HIGHLIGHTS (4 CORE VALUE PILLARS)
   ============================================================ */
.hero-highlights {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 1080px;
  margin: 54px auto 0;
  text-align: left;
}

.highlight-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  background: rgba(12, 12, 18, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.highlight-item:hover {
  border-color: rgba(255, 255, 255, 0.22);
  transform: translateY(-2px);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.6), 0 0 24px rgba(255, 255, 255, 0.05);
}

.highlight-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}

.highlight-icon {
  font-size: 20px;
  line-height: 1;
}

.highlight-content {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.highlight-content strong {
  font-size: 13.5px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.highlight-sub {
  font-size: 11.5px;
  color: #9494a8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 960px) {
  .hero-highlights {
    grid-template-columns: repeat(2, 1fr);
    max-width: 640px;
  }
}

@media (max-width: 540px) {
  .hero-highlights {
    grid-template-columns: 1fr;
    max-width: 100%;
  }
}

/* ============================================================
   INTERACTIVE SHOWCASE HUB STYLES
   ============================================================ */
.showcase-hub-section {
  position: relative;
  overflow: hidden;
  padding: 120px 0 130px;
}

/* Tab Navigation */
.showcase-nav-wrap {
  margin-bottom: 44px;
  display: flex;
  justify-content: center;
}

.showcase-tabs {
  display: inline-flex;
  gap: 8px;
  background: rgba(12, 12, 18, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  padding: 6px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}

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

.showcase-tab {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 22px;
  border-radius: 12px;
  background: transparent;
  border: 1px solid transparent;
  color: #9494a8;
  font-family: var(--font);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.showcase-tab:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.05);
}

.showcase-tab.active {
  background: #ffffff;
  color: #050507;
  border-color: #ffffff;
  box-shadow: 0 4px 20px rgba(255, 255, 255, 0.2);
}

.showcase-tab.active .tab-icon {
  transform: scale(1.1);
}

.tab-icon {
  font-size: 16px;
  line-height: 1;
  transition: transform 0.2s ease;
}

/* Viewport & Panels */
.showcase-viewport {
  position: relative;
  min-height: 540px;
}

.showcase-panel {
  display: none;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.showcase-panel.active {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

.showcase-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 44px;
  align-items: center;
}

/* Left Column Info */
.showcase-info {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.showcase-pill-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #d1d1dc;
  width: fit-content;
}

.showcase-heading {
  font-family: var(--display);
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: #ffffff;
  margin: 0;
}

.showcase-paragraph {
  color: var(--text-dim);
  font-size: 15px;
  line-height: 1.65;
  margin: 0;
}

.showcase-feature-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 6px 0;
  padding: 0;
}

.showcase-feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  color: #c4c4d0;
  line-height: 1.5;
}

.feature-bullet-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #ffffff;
  flex-shrink: 0;
  margin-top: 1px;
}

.showcase-feature-list strong {
  color: #ffffff;
}

.showcase-cta-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.showcase-meta-tag {
  font-size: 12.5px;
  color: #8e8e9e;
  font-family: var(--mono);
}

/* Glass Window Frame */
.showcase-demo-wrap {
  width: 100%;
}

.glass-window-frame {
  background: linear-gradient(175deg, rgba(16, 16, 24, 0.95) 0%, rgba(8, 8, 14, 0.98) 100%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 20px;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.8), 0 0 40px rgba(255, 255, 255, 0.03), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  overflow: hidden;
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  position: relative;
}

.window-header {
  padding: 13px 18px;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

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

.window-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.window-dots span:nth-child(1) { background: #ef4444; }
.window-dots span:nth-child(2) { background: #f59e0b; }
.window-dots span:nth-child(3) { background: #10b981; }

.window-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: #9494a8;
}

.status-indicator-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 8px #34d399;
}

.window-pill {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 6px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: #34d399;
}

.window-pill--blue {
  background: rgba(56, 189, 248, 0.12);
  border-color: rgba(56, 189, 248, 0.35);
  color: #38bdf8;
}

.window-pill--purple {
  background: rgba(192, 132, 252, 0.12);
  border-color: rgba(192, 132, 252, 0.35);
  color: #c084fc;
}

/* Panel 1 Screenshot Display */
.window-body--screenshot {
  position: relative;
  background: #08080c;
  overflow: hidden;
}

.screenshot-display {
  display: block;
  width: 100%;
  height: auto;
  filter: brightness(0.92) contrast(1.04);
}

.screenshot-hud-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(5, 5, 8, 0.9) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px;
  gap: 12px;
  pointer-events: none;
}

.hud-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(12, 12, 18, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-family: var(--mono);
  font-size: 11px;
  color: #ffffff;
  backdrop-filter: blur(12px);
  width: fit-content;
}

.hud-stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.hud-stat-box {
  background: rgba(12, 12, 18, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 8px 12px;
  text-align: center;
  backdrop-filter: blur(12px);
}

.hud-stat-box span {
  display: block;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #78788a;
  text-transform: uppercase;
}

.hud-stat-box strong {
  font-family: var(--mono);
  font-size: 12px;
  color: #ffffff;
}

.stat-green {
  color: #34d399 !important;
}

/* Panel 2 Tactical Radar Deck */
.radar-tactical-deck {
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: radial-gradient(circle at 50% 30%, rgba(14, 24, 38, 0.6) 0%, rgba(6, 8, 12, 0.95) 100%);
}

.tactical-hud-top {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.hud-telemetry-badge {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 8px 10px;
  text-align: center;
}

.hud-telemetry-badge span {
  display: block;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #7a8294;
}

.hud-telemetry-badge strong {
  font-family: var(--mono);
  font-size: 11.5px;
  color: #ffffff;
}

.tactical-cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.tactical-target-card {
  background: rgba(14, 16, 24, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color 0.2s;
}

.tactical-target-card.hostile {
  border-left: 3px solid #ff4757;
}

.tactical-target-card.friendly {
  border-left: 3px solid #38bdf8;
}

.tactical-target-card.vehicle {
  border-left: 3px solid #fb923c;
}

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

.target-type-badge {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.target-type-badge.hostile { color: #ff6b81; }
.target-type-badge.friendly { color: #38bdf8; }
.target-type-badge.vehicle { color: #fb923c; }

.target-distance {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  color: #ffffff;
}

.target-name {
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
}

.target-weapon-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: #9494a8;
}

.elev-tag {
  font-family: var(--mono);
  font-size: 10px;
  color: #34d399;
}

.tactical-telemetry-footer {
  text-align: center;
  font-family: var(--mono);
  font-size: 11px;
  color: #6e768a;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* Panel 3 Streamproof Viewport */
.stream-switcher-bar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.switcher-label {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #9494a8;
}

.switcher-btns {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.stream-mode-btn {
  padding: 10px 18px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #c4c4d0;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.stream-mode-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.25);
}

.stream-mode-btn.active {
  background: #ffffff;
  color: #050507;
  border-color: #ffffff;
  box-shadow: 0 4px 18px rgba(255, 255, 255, 0.2);
}

.streamproof-viewport {
  position: relative;
  min-height: 280px;
  padding: 24px;
  background: linear-gradient(180deg, #0a0d14 0%, #040508 100%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.stream-view-layer {
  transition: opacity 0.25s ease;
}

.stream-overlay-card {
  position: relative;
  padding: 24px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.esp-hud-target {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

.esp-tag-header {
  display: flex;
  gap: 8px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  background: rgba(0, 0, 0, 0.85);
  border: 1px solid rgba(0, 229, 255, 0.5);
  color: #00e5ff;
  padding: 3px 8px;
  border-radius: 4px;
}

.esp-box-outline {
  width: 90px;
  height: 150px;
  border: 1.5px solid #00e5ff;
  border-radius: 4px;
  box-shadow: 0 0 16px rgba(0, 229, 255, 0.35), inset 0 0 10px rgba(0, 229, 255, 0.15);
  position: relative;
}

.esp-info-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.esp-hp-bar {
  width: 80px;
  height: 4px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 2px;
  overflow: hidden;
}

.esp-hp-bar .hp-val {
  display: block;
  width: 100%;
  height: 100%;
  background: #10b981;
}

.esp-weapon {
  font-family: var(--mono);
  font-size: 10px;
  color: #ffffff;
}

.esp-hud-fov {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.fov-crosshair {
  width: 12px;
  height: 12px;
  border: 1px solid #00e5ff;
  border-radius: 50%;
}

.clean-verification-card {
  text-align: center;
  padding: 36px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.clean-verified-icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 24px rgba(16, 185, 129, 0.25);
}

.clean-verification-card h4 {
  font-size: 18px;
  color: #ffffff;
  font-weight: 700;
  margin: 0;
}

.clean-verification-card p {
  font-size: 13.5px;
  color: #9494a8;
  max-width: 380px;
  line-height: 1.5;
  margin: 0;
}

.clean-status-tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  color: #34d399;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.3);
  padding: 4px 12px;
  border-radius: 999px;
  margin-top: 6px;
}

.stream-feed-bottom {
  font-size: 12px;
  color: #78788a;
  text-align: center;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* Panel 4 Auth Deck */
.auth-portal-deck {
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: radial-gradient(circle at 50% 30%, rgba(24, 16, 32, 0.5) 0%, rgba(6, 6, 10, 0.95) 100%);
}

.discord-delivery-card {
  display: flex;
  gap: 14px;
  padding: 16px;
  background: #14151c;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
}

.discord-bot-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  overflow: hidden;
  background: #000;
  flex-shrink: 0;
}

.discord-bot-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.discord-bot-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.discord-bot-name {
  display: flex;
  align-items: center;
  gap: 8px;
}

.discord-bot-name strong {
  font-size: 13.5px;
  color: #ffffff;
}

.bot-badge {
  font-size: 9px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 3px;
  background: #5865f2;
  color: #ffffff;
}

.bot-time {
  font-size: 11px;
  color: #72767d;
}

.discord-key-embed {
  border-left: 4px solid #34d399;
  background: #1a1c24;
  border-radius: 0 8px 8px 0;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.key-embed-title {
  font-size: 12.5px;
  font-weight: 700;
  color: #34d399;
}

.key-embed-code {
  padding: 8px 12px;
  background: #0d0e12;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
}

.key-embed-code code {
  font-family: var(--mono);
  font-size: 12px;
  color: #ffffff;
  letter-spacing: 0.06em;
}

.key-embed-footer {
  font-size: 11px;
  color: #8a8e9b;
}

.hwid-selfservice-card {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(192, 132, 252, 0.25);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

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

.hwid-card-top strong {
  display: block;
  font-size: 13.5px;
  color: #ffffff;
}

.hwid-sub-text {
  font-size: 11px;
  color: #9494a8;
}

.hwid-state-pill {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(192, 132, 252, 0.12);
  border: 1px solid rgba(192, 132, 252, 0.35);
  color: #c084fc;
}

.hwid-btn-wrap button {
  font-size: 13px;
  padding: 11px;
  border-color: rgba(192, 132, 252, 0.35);
}

.hwid-btn-wrap button:hover {
  background: rgba(192, 132, 252, 0.15);
  border-color: rgba(192, 132, 252, 0.6);
  color: #ffffff;
}

.hwid-status-msg {
  font-size: 11.5px;
  color: #9494a8;
  text-align: center;
  font-family: var(--mono);
}

@media (max-width: 900px) {
  .showcase-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

/* ============================================================
   CLEAN FAQ ACCORDION STYLES
   ============================================================ */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 820px;
  margin: 0 auto;
}

.faq-item {
  width: 100%;
}

.faq-item details {
  background: rgba(12, 12, 18, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 20px 24px;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.faq-item details:hover {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(16, 16, 24, 0.85);
}

.faq-item details[open] {
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(16, 16, 24, 0.95);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 255, 255, 0.03);
}

.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  user-select: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-question {
  font-family: var(--font);
  font-size: 15.5px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.01em;
  line-height: 1.4;
}

.faq-toggle-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  transition: transform 0.25s ease, background-color 0.25s, border-color 0.25s;
}

.faq-toggle-icon::before,
.faq-toggle-icon::after {
  content: "";
  position: absolute;
  background: #ffffff;
  transition: transform 0.25s ease;
}

.faq-toggle-icon::before {
  width: 10px;
  height: 1.5px;
}

.faq-toggle-icon::after {
  width: 1.5px;
  height: 10px;
}

.faq-item details[open] .faq-toggle-icon {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
}

.faq-item details[open] .faq-toggle-icon::after {
  transform: rotate(90deg);
  opacity: 0;
}

.faq-body {
  padding-top: 14px;
  margin-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.faq-body p {
  font-size: 14.5px;
  color: #a4a4b8;
  line-height: 1.65;
  margin: 0;
}

.faq-body strong {
  color: #ffffff;
}

.faq-body a {
  color: #00e5ff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.faq-body a:hover {
  color: #ffffff;
}

/* FAQ Support Card */
.faq-support-card {
  margin: 44px auto 0;
  max-width: 820px;
  background: linear-gradient(135deg, rgba(20, 20, 30, 0.8) 0%, rgba(10, 10, 16, 0.95) 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  padding: 24px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
}

.faq-support-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(88, 101, 242, 0.12);
  border: 1px solid rgba(88, 101, 242, 0.35);
  color: #5865f2;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.faq-support-copy {
  flex: 1;
}

.faq-support-copy h4 {
  font-size: 17px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 4px 0;
}

.faq-support-copy p {
  font-size: 13.5px;
  color: #9494a8;
  margin: 0;
  line-height: 1.45;
}

.faq-support-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.faq-response-badge {
  font-family: var(--mono);
  font-size: 10.5px;
  color: #34d399;
}

@media (max-width: 768px) {
  .faq-support-card {
    flex-direction: column;
    text-align: center;
    padding: 24px;
  }
  .faq-support-action {
    width: 100%;
  }
  .faq-support-action .btn {
    width: 100%;
  }
}

/* ==================== WEB PANEL KEY MODAL ==================== */
.panel-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(4, 4, 6, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s cubic-bezier(0.23, 1, 0.32, 1), visibility 0.25s;
}

.panel-modal-backdrop.is-open {
  opacity: 1;
  visibility: visible;
}

.panel-modal-card {
  position: relative;
  width: 100%;
  max-width: 440px;
  background: #0d0d12;
  background: radial-gradient(circle at 50% 0%, rgba(0, 229, 255, 0.16) 0%, #0d0d12 70%);
  border: 1px solid rgba(0, 229, 255, 0.22);
  border-radius: 20px;
  padding: 32px 28px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.85), 0 0 36px rgba(0, 229, 255, 0.18);
  transform: scale(0.95) translateY(10px);
  transition: transform 0.25s cubic-bezier(0.23, 1, 0.32, 1);
  text-align: center;
}

.panel-modal-backdrop.is-open .panel-modal-card {
  transform: scale(1) translateY(0);
}

.panel-modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  background: transparent;
  border: none;
  color: #888;
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, background 0.15s;
}

.panel-modal-close:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.panel-modal-icon {
  width: 54px;
  height: 54px;
  margin: 0 auto 16px;
  border-radius: 14px;
  background: rgba(0, 229, 255, 0.12);
  border: 1px solid rgba(0, 229, 255, 0.35);
  color: #00e5ff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 22px rgba(0, 229, 255, 0.28);
}

.panel-modal-title {
  font-family: var(--display, inherit);
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}

.panel-modal-sub {
  font-size: 13.5px;
  color: #94a3b8;
  line-height: 1.5;
  margin-bottom: 24px;
}

.panel-modal-input-wrap {
  margin-bottom: 12px;
}

.panel-modal-input {
  width: 100%;
  padding: 13px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  color: #fff;
  font-family: var(--mono, monospace);
  font-size: 14px;
  text-align: center;
  letter-spacing: 0.5px;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
  outline: none;
}

.panel-modal-input:focus {
  border-color: #00e5ff;
  background: rgba(0, 229, 255, 0.04);
  box-shadow: 0 0 0 3px rgba(0, 229, 255, 0.22);
}

.panel-modal-input.is-invalid {
  border-color: #ef4444 !important;
  background: rgba(239, 68, 68, 0.04) !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.22) !important;
}

.panel-modal-error {
  color: #ef4444;
  font-size: 12.5px;
  margin-bottom: 12px;
  min-height: 18px;
  font-weight: 500;
}

.panel-modal-submit {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 20px;
  font-weight: 700;
  font-size: 14px;
  border-radius: 12px;
  cursor: pointer;
  background: linear-gradient(135deg, #00f2fe 0%, #00c6ff 100%) !important;
  color: #06080d !important;
  border: none;
  box-shadow: 0 0 20px rgba(0, 229, 255, 0.35);
  transition: transform 0.15s, box-shadow 0.2s, opacity 0.2s;
}

.panel-modal-submit:hover {
  box-shadow: 0 0 28px rgba(0, 229, 255, 0.55);
  transform: translateY(-1px);
}

.panel-modal-submit:active {
  transform: translateY(0);
}

.panel-modal-submit.is-busy {
  opacity: 0.7;
  cursor: wait;
}

.panel-modal-foot {
  margin-top: 20px;
  font-size: 12px;
  color: #71717a;
}

.panel-modal-foot a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.panel-modal-foot a:hover {
  color: #00e5ff;
}

/* ==================== ARCHITECTURAL CTA (cta-3) ==================== */
.cta-architect-section {
  position: relative;
  padding: 100px 0 120px;
  overflow: visible;
}

.cta-architect-box {
  position: relative;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 56px 60px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  background: radial-gradient(40% 120% at 20% 0%, rgba(0, 240, 255, 0.08), rgba(255, 255, 255, 0.02) 60%, transparent), rgba(12, 14, 20, 0.65);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

/* Corner Plus Icons */
.cta-plus-icon {
  position: absolute;
  width: 24px;
  height: 24px;
  color: #71717a;
  z-index: 2;
  pointer-events: none;
  transition: color 0.3s ease, transform 0.3s ease;
}

.cta-architect-box:hover .cta-plus-icon {
  color: #00f0ff;
  transform: scale(1.15);
}

.cta-plus-tl {
  top: -12.5px;
  left: -11.5px;
}

.cta-plus-tr {
  top: -12.5px;
  right: -11.5px;
}

.cta-plus-bl {
  bottom: -12.5px;
  left: -11.5px;
}

.cta-plus-br {
  bottom: -12.5px;
  right: -11.5px;
}

/* Vertical Extension Lines */
.cta-extended-border {
  position: absolute;
  top: -28px;
  bottom: -28px;
  width: 1px;
  background: rgba(255, 255, 255, 0.12);
  pointer-events: none;
}

.cta-extended-left {
  left: 0;
}

.cta-extended-right {
  right: 0;
}

/* Center Dashed Divider Line */
.cta-dashed-divider {
  position: absolute;
  top: 0;
  left: 62%;
  height: 100%;
  width: 1px;
  border-left: 1px dashed rgba(255, 255, 255, 0.08);
  pointer-events: none;
  z-index: 0;
}

/* Content */
.cta-architect-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
  max-width: 640px;
}

.cta-architect-title {
  font-family: var(--display);
  font-size: clamp(26px, 3.4vw, 36px);
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.025em;
  line-height: 1.18;
  margin: 0;
}

.cta-architect-desc {
  font-size: 15.5px;
  color: var(--text-dim);
  margin: 0;
  line-height: 1.55;
}

/* Action Buttons */
.cta-architect-actions {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

.cta-architect-actions .btn {
  font-size: 14.5px;
  padding: 13px 24px;
  white-space: nowrap;
}

@media (max-width: 960px) {
  .cta-architect-box {
    flex-direction: column;
    text-align: center;
    padding: 44px 28px;
    gap: 28px;
  }
  .cta-architect-content {
    text-align: center;
    max-width: 100%;
  }
  .cta-architect-actions {
    justify-content: center;
    width: 100%;
  }
  .cta-dashed-divider {
    display: none;
  }
}

/* ==================== FEATURES-8 BENTO GRID SECTION ==================== */
.f8-section {
  position: relative;
  padding: 60px 0 100px;
}

.f8-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  max-width: 1120px;
  margin: 0 auto;
}

.f8-card {
  position: relative;
  background: rgba(18, 20, 26, 0.48);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  overflow: hidden;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
  display: flex;
  flex-direction: column;
}

.f8-card:hover {
  border-color: rgba(0, 240, 255, 0.25);
  background: rgba(22, 25, 33, 0.65);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4), 0 0 24px rgba(0, 240, 255, 0.06);
}

.f8-col-2 {
  grid-column: span 2;
}

.f8-col-3 {
  grid-column: span 3;
}

.f8-card-content {
  padding: 32px 24px 28px;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.f8-card-center {
  align-items: center;
  text-align: center;
}

.f8-card-title {
  font-family: var(--display, inherit);
  font-size: 19px;
  font-weight: 700;
  color: #ffffff;
  margin: 18px 0 8px;
  letter-spacing: -0.01em;
}

.f8-card-desc {
  font-size: 13.5px;
  line-height: 1.6;
  color: #94a3b8;
  margin: 0;
}

/* Card 1 Metric */
.f8-metric-wrap {
  position: relative;
  width: 220px;
  height: 94px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.08);
  margin-top: 6px;
}

.f8-metric-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: rgba(0, 240, 255, 0.16);
}

.f8-metric-text {
  position: relative;
  font-family: var(--display, inherit);
  font-size: 44px;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: #ffffff;
  background: linear-gradient(180deg, #ffffff 30%, #a5f3fc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Card 2 Radar */
.f8-radar-wrap {
  position: relative;
  width: 114px;
  height: 114px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 4px;
}

.f8-radar-wrap::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.f8-radar-svg {
  width: 90px;
  height: auto;
}

.f8-radar-track {
  color: #3f3f46;
}

/* Card 3 Telemetry */
.f8-telemetry-wrap {
  width: 100%;
  padding-top: 4px;
}

.f8-telemetry-svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Split Cards 4 & 5 */
.f8-split-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 28px 24px;
  gap: 20px;
  min-height: 230px;
}

.f8-split-meta {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
}

.f8-icon-pill {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(0, 240, 255, 0.25);
  background: rgba(0, 240, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
}

.f8-icon-pill::before {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px solid rgba(0, 240, 255, 0.1);
}

.f8-pill-purple {
  border-color: rgba(168, 85, 247, 0.25);
  background: rgba(168, 85, 247, 0.06);
}

.f8-pill-purple::before {
  border-color: rgba(168, 85, 247, 0.1);
}

.f8-meta-text .f8-card-title {
  margin: 0 0 6px;
}

/* Card 4 Right Terminal Graph */
.f8-window-panel {
  position: relative;
  background: rgba(10, 11, 16, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 24px 12px 0 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.f8-window-dots {
  position: absolute;
  top: 10px;
  left: 12px;
  display: flex;
  gap: 5px;
}

.f8-window-dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
}

.f8-freq-svg {
  width: 100%;
  height: auto;
  display: block;
  transform: translateY(2px);
}

/* Card 5 Right Tree Panel */
.f8-tree-panel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 160px;
}

.f8-tree-line {
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 50%;
  width: 1px;
  background: rgba(255, 255, 255, 0.1);
  transform: translateX(-50%);
}

.f8-tree-nodes {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.f8-tree-node {
  display: flex;
  align-items: center;
  gap: 8px;
}

.f8-node-left {
  justify-content: flex-end;
  padding-right: calc(50% - 15px);
}

.f8-node-right {
  justify-content: flex-start;
  padding-left: calc(50% - 15px);
}

.f8-node-badge {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  font-weight: 600;
  color: #e2e8f0;
  background: rgba(18, 20, 26, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 3px 8px;
  border-radius: 6px;
  letter-spacing: 0.02em;
}

.f8-node-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  border: 2px solid #0c0d12;
  flex-shrink: 0;
}

.f8-avatar-cyan {
  background: linear-gradient(135deg, #00f0ff, #0284c7);
  box-shadow: 0 0 0 2px rgba(0, 240, 255, 0.3);
}

.f8-avatar-purple {
  background: linear-gradient(135deg, #a855f7, #6366f1);
  box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.3);
}

.f8-avatar-blue {
  background: linear-gradient(135deg, #38bdf8, #2563eb);
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.3);
}

/* Responsive */
@media (max-width: 960px) {
  .f8-grid {
    grid-template-columns: repeat(6, 1fr);
  }
  .f8-col-2 {
    grid-column: span 3;
  }
  .f8-col-2:first-child {
    grid-column: span 6;
  }
  .f8-col-3 {
    grid-column: span 6;
  }
}

@media (max-width: 640px) {
  .f8-grid {
    grid-template-columns: 1fr;
  }
  .f8-col-2, .f8-col-3 {
    grid-column: span 1;
  }
  .f8-split-card {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .f8-window-panel {
    min-height: 140px;
  }
}

/* ============================================================
   AI LOADER — Glowing Rotating Energy Orb & Wave Text (B&W)
   ============================================================ */
@keyframes loaderCircle {
  0% {
    transform: rotate(90deg);
    box-shadow:
      0 6px 12px 0 rgba(255, 255, 255, 0.9) inset,
      0 12px 18px 0 rgba(255, 255, 255, 0.5) inset,
      0 36px 36px 0 rgba(255, 255, 255, 0.2) inset,
      0 0 3px 1.2px rgba(255, 255, 255, 0.35),
      0 0 6px 1.8px rgba(255, 255, 255, 0.22);
  }
  50% {
    transform: rotate(270deg);
    box-shadow:
      0 6px 12px 0 rgba(255, 255, 255, 0.95) inset,
      0 12px 6px 0 rgba(255, 255, 255, 0.6) inset,
      0 24px 36px 0 rgba(255, 255, 255, 0.3) inset,
      0 0 3px 1.2px rgba(255, 255, 255, 0.4),
      0 0 6px 1.8px rgba(255, 255, 255, 0.25);
  }
  100% {
    transform: rotate(450deg);
    box-shadow:
      0 6px 12px 0 rgba(255, 255, 255, 0.9) inset,
      0 12px 18px 0 rgba(255, 255, 255, 0.5) inset,
      0 36px 36px 0 rgba(255, 255, 255, 0.2) inset,
      0 0 3px 1.2px rgba(255, 255, 255, 0.35),
      0 0 6px 1.8px rgba(255, 255, 255, 0.22);
  }
}

@keyframes loaderLetter {
  0%,
  100% {
    opacity: 0.35;
    transform: translateY(0) scale(1);
  }
  20% {
    opacity: 1;
    transform: translateY(-2px) scale(1.18);
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.85));
  }
  40% {
    opacity: 0.7;
    transform: translateY(0) scale(1);
  }
}

.animate-loaderCircle {
  animation: loaderCircle 5s linear infinite;
}

.animate-loaderLetter {
  animation: loaderLetter 2.8s ease-in-out infinite;
}

/* Fullscreen AI Loader Overlay */
.ai-loader-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Monochrome radial — subtle white glow fading into pure black */
  background: radial-gradient(
    circle at 50% 45%,
    rgba(60, 60, 65, 0.5) 0%,
    rgba(14, 14, 16, 0.92) 50%,
    rgba(5, 5, 7, 0.98) 100%
  );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s;
}

.ai-loader-overlay.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* AI Loader Box */
.ai-loader-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  user-select: none;
  width: 180px;
  height: 180px;
}

.ai-loader-ring {
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  animation: loaderCircle 5s linear infinite;
}

.ai-loader-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  color: #ffffff;
}

.ai-loader-letter {
  display: inline-block;
  opacity: 0.35;
  color: #ffffff;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
  animation: loaderLetter 2.6s ease-in-out infinite;
  white-space: pre;
}

/* Sub-status label beneath the orb */
.ai-loader-subtext {
  margin-top: 26px;
  font-family: var(--font-body, 'Outfit', sans-serif);
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.04em;
  text-align: center;
  max-width: 320px;
}

/* In-line / Card AI Loader (Compact) */
.ai-loader-inline {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 110px;
  height: 110px;
  font-size: 12px;
  font-family: var(--font-mono, monospace);
  user-select: none;
}

.ai-loader-inline .ai-loader-ring {
  box-shadow:
    0 4px 8px 0 rgba(255, 255, 255, 0.85) inset,
    0 8px 12px 0 rgba(255, 255, 255, 0.5) inset,
    0 22px 22px 0 rgba(255, 255, 255, 0.2) inset,
    0 0 3px 1px rgba(255, 255, 255, 0.35);
}

@media (prefers-color-scheme: dark) {
  .ai-loader-overlay {
    background: radial-gradient(
      circle at 50% 45%,
      rgba(70, 70, 75, 0.55) 0%,
      rgba(10, 10, 12, 0.94) 50%,
      rgba(3, 4, 8, 0.98) 100%
    );
  }
}

/* ==========================================================================
   TESTIMONIALS (3 VERTICAL MARQUEE COLUMNS - MONOCHROME B&W)
   ========================================================================== */
.testimonials-section {
  position: relative;
  overflow: hidden;
  padding: 100px 0;
}

.testimonials-columns-container {
  display: flex;
  justify-content: center;
  gap: 24px;
  max-height: 720px;
  overflow: hidden;
  margin-top: 50px;
  position: relative;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
}

.testimonials-column {
  flex: 1;
  max-width: 380px;
  min-width: 0;
  overflow: hidden;
}

.testimonials-column-inner {
  display: flex;
  flex-direction: column;
  gap: 20px;
  animation: testimonials-marquee-up linear infinite;
  will-change: transform;
}

.testimonials-col-1 .testimonials-column-inner {
  animation-duration: 26s;
}

.testimonials-col-2 .testimonials-column-inner {
  animation-duration: 32s;
}

.testimonials-col-3 .testimonials-column-inner {
  animation-duration: 24s;
}

.testimonials-column:hover .testimonials-column-inner {
  animation-play-state: paused;
}

@keyframes testimonials-marquee-up {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-50%);
  }
}

.testimonial-column-card {
  background: rgba(12, 12, 16, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 20px;
  padding: 24px;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.12), 0 14px 32px -10px rgba(0, 0, 0, 0.7);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
  display: flex;
  flex-direction: column;
  position: relative;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
}

.testimonial-column-card:hover {
  border-color: rgba(255, 255, 255, 0.32);
  background: rgba(18, 18, 24, 0.95);
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.22), 0 20px 40px -12px rgba(0, 0, 0, 0.9);
}

.testimonials-rating-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 18px;
  font-size: 13px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.testimonials-score-num {
  font-family: var(--font-mono, monospace);
  font-weight: 800;
  color: #ffffff;
  font-size: 13.5px;
}

.testimonials-score-stars {
  color: #ffffff;
  letter-spacing: 2px;
  font-size: 12px;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.4);
}

.testimonials-score-count {
  color: #a1a1aa;
  font-size: 12px;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  padding-left: 10px;
}

.testimonial-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.testimonial-stars-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}

.testimonial-stars {
  color: #ffffff;
  font-size: 13px;
  letter-spacing: 2px;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.35);
}

.testimonial-stars .star-dim {
  color: rgba(255, 255, 255, 0.22);
  text-shadow: none;
}

.testimonial-rating-num {
  font-size: 12px;
  font-weight: 700;
  color: #a1a1aa;
  font-family: var(--font-mono, monospace);
}

.testimonial-verified-pill {
  display: inline-flex;
  align-items: center;
  gap: 4.5px;
  font-size: 11px;
  font-weight: 600;
  color: #f4f4f5;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 3px 8px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}

.testimonial-verified-pill svg {
  color: #ffffff;
}

.testimonial-quote {
  font-size: 14px;
  line-height: 1.62;
  color: #d4d4d8;
  margin: 0 0 18px;
  font-weight: 400;
  letter-spacing: -0.01em;
}

.testimonial-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 12px;
}

.testimonial-meta-plan {
  color: #ffffff;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.testimonial-meta-dot {
  color: #52525b;
  font-weight: 700;
}

.testimonial-meta-time {
  color: #a1a1aa;
  font-family: var(--font-mono, monospace);
  font-size: 11.5px;
}

@media (max-width: 1024px) {
  .testimonials-col-3 {
    display: none;
  }
}

@media (max-width: 680px) {
  .testimonials-col-2 {
    display: none;
  }
  .testimonials-columns-container {
    max-height: 580px;
  }
}

/* ==========================================================================
   SHINY BUTTON (MagicUI / High-Tech Animated CTA)
   ========================================================================== */

@property --gradient-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@property --gradient-percent {
  syntax: "<percentage>";
  initial-value: 6%;
  inherits: false;
}

@property --gradient-shine {
  syntax: "<color>";
  initial-value: #ffffff;
  inherits: false;
}

.shiny-cta {
  --shiny-cta-bg: #000000;
  --shiny-cta-bg-subtle: #141416;
  --shiny-cta-fg: #ffffff;
  --shiny-cta-highlight: #00f0ff;
  --shiny-cta-highlight-subtle: #84f7ff;
  --duration: 3s;
  --shadow-size: 2px;
  --transition: 350ms cubic-bezier(0.25, 1, 0.5, 1);
  
  isolation: isolate;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  outline-offset: 4px;
  padding: 1.15rem 2.25rem;
  font-family: "Inter", var(--font, sans-serif);
  font-size: 1.0625rem;
  line-height: 1.2;
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: 360px;
  color: var(--shiny-cta-fg);
  background:
    linear-gradient(var(--shiny-cta-bg), var(--shiny-cta-bg)) padding-box,
    conic-gradient(
      from var(--gradient-angle),
      transparent 0deg,
      var(--shiny-cta-highlight) var(--gradient-percent),
      var(--gradient-shine) calc(var(--gradient-percent) * 2),
      var(--shiny-cta-highlight) calc(var(--gradient-percent) * 3),
      transparent calc(var(--gradient-percent) * 4)
    ) border-box;
  box-shadow: inset 0 0 0 1px var(--shiny-cta-bg-subtle), 0 0 0 0 rgba(0, 240, 255, 0);
  transition: transform var(--transition), box-shadow var(--transition), --gradient-percent var(--transition), --gradient-shine var(--transition);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  white-space: nowrap;
  animation: gradient-angle var(--duration) linear infinite;
}

.shiny-cta:hover {
  transform: translateY(-2px);
  --gradient-percent: 15%;
  --gradient-shine: #ffffff;
  box-shadow:
    inset 0 0 0 1px rgba(0, 240, 255, 0.5),
    0 0 20px rgba(0, 240, 255, 0.4),
    0 0 45px rgba(0, 240, 255, 0.2),
    0 0 12px rgba(255, 255, 255, 0.25);
}

.shiny-cta:active {
  transform: translateY(0px) scale(0.98);
}

/* Dots pattern (Smaller Cyan Micro-dots) */
.shiny-cta::before {
  content: "";
  pointer-events: none;
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  translate: -50% -50%;
  --size: calc(100% - var(--shadow-size) * 2);
  --position: 2px;
  --space: calc(var(--position) * 2);
  width: var(--size);
  height: var(--size);
  background: radial-gradient(
    circle at var(--position) var(--position),
    rgba(0, 240, 255, 0.95) 0.55px,
    transparent 0.85px
  ) padding-box;
  background-size: var(--space) var(--space);
  background-repeat: repeat;
  mask-image: conic-gradient(
    from calc(var(--gradient-angle) + 45deg),
    black 0deg,
    transparent 45deg,
    transparent 315deg,
    black 360deg
  );
  -webkit-mask-image: conic-gradient(
    from calc(var(--gradient-angle) + 45deg),
    black 0deg,
    transparent 45deg,
    transparent 315deg,
    black 360deg
  );
  border-radius: inherit;
  opacity: 0.75;
  z-index: 1;
  transition: opacity var(--transition);
  animation: gradient-angle var(--duration) linear infinite;
}

.shiny-cta:hover::before {
  opacity: 1;
}

/* Subtle Inner Ambient Glow in Cyan and White */
.shiny-cta::after {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    ellipse 75% 60% at 50% 120%,
    rgba(255, 255, 255, 0.4) 0%,
    rgba(0, 240, 255, 0.45) 35%,
    transparent 70%
  );
  opacity: 0.4;
  z-index: 1;
  transition: opacity var(--transition);
}

.shiny-cta:hover::after {
  opacity: 0.9;
}

/* Button Content */
.shiny-cta span {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #ffffff;
  letter-spacing: 0.01em;
}

.shiny-cta span svg {
  transition: transform var(--transition);
}

.shiny-cta:hover span svg {
  transform: translateX(3px);
}

@keyframes gradient-angle {
  0% {
    --gradient-angle: 0deg;
  }
  100% {
    --gradient-angle: 360deg;
  }
}

/* ==========================================================================
   LIQUID METAL BUTTON (White Liquid Platinum / Chrome 3D Pill Style)
   ========================================================================== */

.liquid-metal-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem 2.4rem;
  font-family: "Inter", var(--font, sans-serif);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  border-radius: 100px;
  cursor: pointer;
  outline: none;
  isolation: isolate;
  background: transparent;
  perspective: 1000px;
  transform-style: preserve-3d;
  transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  white-space: nowrap;
  box-shadow: 
    0px 0px 0px 1px rgba(255, 255, 255, 0.85),
    0px 2px 6px 0px rgba(0, 0, 0, 0.15),
    0px 8px 16px 0px rgba(0, 0, 0, 0.25),
    0px 16px 28px -4px rgba(255, 255, 255, 0.2);
}

/* Layer 1: Liquid Metal Shader Backdrop (Canvas & Metallic Fluid) */
.liquid-metal-shader {
  position: absolute;
  inset: 0;
  border-radius: 100px;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(135deg, #ffffff 0%, #b8b8c4 30%, #f0f0f4 50%, #8e8e9e 70%, #ffffff 100%);
  background-size: 250% 250%;
  animation: liquidMetalFlow 6s ease-in-out infinite alternate;
  transform: translateZ(0px);
}

.liquid-metal-shader canvas {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  border-radius: 100px !important;
}

/* Layer 2: Inner White Plate (translateZ(10px)) */
.liquid-metal-plate {
  position: absolute;
  inset: 2.5px;
  border-radius: 98px;
  background: linear-gradient(180deg, #ffffff 0%, #ececed 100%);
  box-shadow: inset 0px 1px 1px rgba(255, 255, 255, 1), inset 0px -1px 2px rgba(0, 0, 0, 0.08);
  z-index: 2;
  pointer-events: none;
  transform: translateZ(10px);
  transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s ease, box-shadow 0.15s ease;
}

/* Layer 3: Floating Black Text / Icons on White Button (translateZ(20px)) */
.liquid-metal-content {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #000000 !important;
  font-weight: 600;
  text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.5);
  transform: translateZ(20px);
  transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}

.liquid-metal-content svg {
  color: #000000 !important;
  transition: transform 0.3s ease;
}

.liquid-metal-content .live-dot-mini {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px #10b981, 0 0 12px rgba(16, 185, 129, 0.6);
  display: inline-block;
}

/* Interactive Hover State */
.liquid-metal-btn:hover {
  box-shadow: 
    0px 0px 0px 1px #ffffff,
    0px 4px 12px 0px rgba(0, 0, 0, 0.18),
    0px 12px 24px rgba(255, 255, 255, 0.35),
    0 0 30px rgba(255, 255, 255, 0.45);
  transform: translateY(-2px);
}

.liquid-metal-btn:hover .liquid-metal-shader {
  animation-duration: 2.5s;
}

.liquid-metal-btn:hover .liquid-metal-plate {
  background: linear-gradient(180deg, #ffffff 0%, #f5f5f7 100%);
  box-shadow: inset 0px 1px 1.5px rgba(255, 255, 255, 1), inset 0px -1px 2px rgba(0, 0, 0, 0.06);
}

.liquid-metal-btn:hover .liquid-metal-content {
  color: #000000 !important;
}

/* Interactive Active / Pressed State */
.liquid-metal-btn:active {
  transform: translateY(1px) scale(0.98);
}

.liquid-metal-btn:active .liquid-metal-plate {
  box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.15), inset 0px 1px 2px rgba(0, 0, 0, 0.1);
}

@keyframes liquidMetalFlow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* ==========================================================================
   FUI BENTO GRID DARK (21st.dev Component)
   ========================================================================== */

.bento-section {
  position: relative;
  padding: 6rem 0;
  z-index: 10;
}

.bento-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.25rem;
  margin-top: 3.5rem;
}

.bento-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 1.25rem;
  background: #000000;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 -20px 80px -20px rgba(0, 240, 255, 0.08) inset, 0 10px 30px rgba(0, 0, 0, 0.6);
  transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.45s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
}

.bento-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 240, 255, 0.35);
  box-shadow: 0 -20px 80px -20px rgba(0, 240, 255, 0.22) inset, 0 15px 40px rgba(0, 240, 255, 0.12);
}

/* Card Column Spans and Custom Rounded Corners */
.bento-col-3 {
  grid-column: span 3;
}

.bento-col-2 {
  grid-column: span 2;
}

.bento-tl-4xl {
  border-top-left-radius: 2.25rem;
}

.bento-tr-4xl {
  border-top-right-radius: 2.25rem;
}

.bento-bl-4xl {
  border-bottom-left-radius: 2.25rem;
}

.bento-br-4xl {
  border-bottom-right-radius: 2.25rem;
}

@media (max-width: 1024px) {
  .bento-grid {
    grid-template-columns: 1fr;
  }
  .bento-col-3, .bento-col-2 {
    grid-column: span 1;
  }
  .bento-card {
    border-radius: 1.25rem !important;
  }
  .bento-card:first-child {
    border-top-left-radius: 2rem !important;
    border-top-right-radius: 2rem !important;
  }
  .bento-card:last-child {
    border-bottom-left-radius: 2rem !important;
    border-bottom-right-radius: 2rem !important;
  }
}

/* Graphic Area */
.bento-graphic-wrap {
  position: relative;
  height: 26rem;
  flex-shrink: 0;
  overflow: hidden;
  background: #000000;
}

.bento-graphic-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.bento-graphic-svg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.bento-card:hover .bento-graphic-img,
.bento-card:hover .bento-graphic-svg {
  transform: scale(1.04);
}

/* Top & Bottom Fades */
.bento-fade-top {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, #000000 0%, transparent 40%);
  opacity: 0.45;
  pointer-events: none;
}

.bento-fade-bottom {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, #000000 0%, transparent 40%);
  opacity: 0.65;
  pointer-events: none;
}

/* Text Content Area */
.bento-body {
  position: relative;
  padding: 2.25rem 2.5rem;
  z-index: 20;
  margin-top: -110px;
  height: 14rem;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  background: rgba(5, 7, 10, 0.68);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.bento-eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #00f0ff;
  margin-bottom: 0.35rem;
}

.bento-title {
  font-size: 1.45rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: #ffffff;
  margin-bottom: 0.5rem;
}

.bento-desc {
  font-size: 0.9rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
  max-width: 560px;
}

/* ==========================================================================
   FEATURE CLOUD SWAP (LogoCloudSwap Adapted for Suite Features & Icons)
   ========================================================================== */

.feature-cloud-section {
  position: relative;
  width: 100%;
  padding: 4rem 1rem;
  background: transparent;
  overflow: hidden;
  z-index: 10;
}

@media (min-width: 640px) {
  .feature-cloud-section {
    padding: 5rem 1.5rem;
  }
}

.feature-cloud-container {
  max-width: 68rem;
  margin: 3rem auto 0;
}

/* Single Responsive Cloud Grid/Flex */
.feature-cloud-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  place-items: center;
  row-gap: 1.75rem;
  column-gap: 0.85rem;
}

@media (min-width: 640px) {
  .feature-cloud-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1.75rem 2rem;
  }
}

@media (min-width: 768px) {
  .feature-cloud-grid {
    gap: 2rem 2.5rem;
  }
}

@media (min-width: 1024px) {
  .feature-cloud-grid {
    gap: 2.25rem 3rem;
  }
}

/* Feature Item */
.feature-cloud-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
  width: 4.85rem;
  flex-shrink: 0;
  cursor: default;
  user-select: none;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease, filter 0.3s ease;
  will-change: transform, clip-path, filter, opacity;
  border-radius: 14px;
  padding: 6px 4px;
}

@media (min-width: 640px) {
  .feature-cloud-item {
    width: 5.75rem;
  }
}

.feature-cloud-item:hover {
  transform: scale(1.07);
  opacity: 1 !important;
  filter: blur(0px) !important;
}

/* Icon Box Container */
.feature-cloud-icon-box {
  display: flex;
  height: 3.15rem;
  width: 3.15rem;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 18px -3px rgba(0, 0, 0, 0.5);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (min-width: 640px) {
  .feature-cloud-icon-box {
    height: 3.45rem;
    width: 3.45rem;
  }
}

.feature-cloud-item:hover .feature-cloud-icon-box {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: 0 0 24px -2px var(--item-color, rgba(0, 240, 255, 0.45));
}

.feature-cloud-icon-box svg {
  width: 1.65rem;
  height: 1.65rem;
  color: var(--item-color, #00f0ff);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.3s ease;
}

@media (min-width: 640px) {
  .feature-cloud-icon-box svg {
    width: 1.8rem;
    height: 1.8rem;
  }
}

.feature-cloud-item:hover .feature-cloud-icon-box svg {
  transform: scale(1.12);
  filter: drop-shadow(0 0 8px var(--item-color, #00f0ff));
}

/* Label text below icon */
.feature-cloud-name {
  user-select: none;
  white-space: nowrap;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.6);
  transition: color 0.25s ease;
}

@media (min-width: 640px) {
  .feature-cloud-name {
    font-size: 11.5px;
  }
}

.feature-cloud-item:hover .feature-cloud-name {
  color: #ffffff;
}

/* Wiping Wave Animation matching Framer Motion WIPE_DURATION 0.92s */
@keyframes cloudWipeWave {
  0% {
    clip-path: inset(0 0% 0 0);
    filter: blur(0px);
    opacity: 1;
  }
  40% {
    clip-path: inset(0 100% 0 0);
    filter: blur(8px);
    opacity: 0.2;
  }
  100% {
    clip-path: inset(0 0% 0 0);
    filter: blur(0px);
    opacity: 1;
  }
}

.feature-cloud-item.is-waving {
  animation: cloudWipeWave 0.92s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: var(--wipe-delay, 0s);
}

/* ==========================================================================
   PRICING SECTION (21st.dev Component with Exact Typography & Styling)
   ========================================================================== */

.pricing-magic-section {
  position: relative;
  width: 100%;
  min-height: 100vh;
  padding: 5rem 1rem 6rem;
  /* No opaque background — aurora lights flow across this section */
  background-color: transparent;
  color: #ffffff;
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  overflow: hidden;
  z-index: 10;
}

.pricing-magic-radial {
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  width: 80%;
  height: 100%;
  background-image: radial-gradient(circle at center, rgba(37, 99, 235, 0.45) 0%, transparent 70%);
  opacity: 0.35;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 0;
}

.pricing-magic-container {
  position: relative;
  z-index: 10;
  max-width: 80rem; /* max-w-7xl */
  margin: 0 auto;
}

.pricing-magic-head {
  text-align: center;
  max-width: 48rem;
  margin: 0 auto 1.5rem;
}

.pricing-magic-title {
  font-size: 2rem;
  line-height: 1.2;
  font-weight: 500;
  color: #ffffff;
  margin-bottom: 1rem;
  letter-spacing: -0.025em;
  font-family: inherit;
}

@media (min-width: 640px) {
  .pricing-magic-title {
    font-size: 2.25rem; /* text-4xl */
  }
}

@media (min-width: 768px) {
  .pricing-magic-title {
    font-size: 3.75rem; /* text-6xl */
  }
}

.pricing-magic-badge {
  border: 1px dashed rgba(59, 130, 246, 0.8);
  padding: 0.25rem 0.65rem;
  border-radius: 0.75rem;
  background-color: rgba(30, 58, 138, 0.4);
  text-transform: capitalize;
  display: inline-block;
  color: #60a5fa;
  font-weight: 600;
  box-shadow: 0 0 15px rgba(59, 130, 246, 0.2);
}

.pricing-magic-sub {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.6);
  width: 80%;
  margin: 0 auto;
  line-height: 1.5;
}

@media (min-width: 640px) {
  .pricing-magic-sub {
    font-size: 1rem;
    width: 70%;
  }
}

/* Switch */
.pricing-magic-switch-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 2rem;
}

.pricing-magic-switch-track {
  position: relative;
  z-index: 50;
  margin: 0 auto;
  display: flex;
  width: fit-content;
  border-radius: 9999px;
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0.25rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.pricing-magic-switch-btn {
  position: relative;
  z-index: 10;
  width: fit-content;
  height: 2.5rem;
  border-radius: 9999px;
  padding: 0.25rem 0.85rem;
  font-weight: 500;
  font-size: 0.95rem;
  border: none;
  background: transparent;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.6);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: color 0.2s ease;
  font-family: inherit;
}

@media (min-width: 640px) {
  .pricing-magic-switch-btn {
    height: 3rem;
    padding: 0.5rem 1.5rem;
  }
}

.pricing-magic-switch-btn:hover {
  color: #ffffff;
}

.pricing-magic-switch-btn.is-active {
  color: #ffffff !important;
}

/* Glider pill */
.pricing-magic-switch-indicator {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 9999px;
  border: 4px solid #2563eb;
  background: linear-gradient(to top, #1d4ed8, #2563eb, #3b82f6);
  box-shadow: 0 0 16px rgba(37, 99, 235, 0.6);
  z-index: -1;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.pricing-magic-switch-btn.is-active .pricing-magic-switch-indicator {
  display: block;
}

.pricing-magic-switch-text {
  position: relative;
  z-index: 2;
}

.pricing-magic-save-pill {
  position: relative;
  z-index: 2;
  border-radius: 9999px;
  background-color: rgba(59, 130, 246, 0.2);
  border: 1px solid rgba(96, 165, 250, 0.35);
  padding: 0.125rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: #93c5fd;
}

.pricing-magic-switch-btn.is-active .pricing-magic-save-pill {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.2);
}

/* 3 Cards Grid */
.pricing-magic-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  padding: 1.5rem 0;
  max-width: 80rem;
  margin: 0 auto;
}

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

/* Card */
.pricing-magic-card {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 1.25rem;
  background-color: rgba(10, 11, 16, 0.92);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  overflow: visible;
}

.pricing-magic-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.8), 0 0 25px rgba(59, 130, 246, 0.12);
}

/* Floating info tag on the top edge of cards */
.pricing-magic-edge-tag {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(22, 18, 10, 0.96);
  border: 1px solid rgba(245, 158, 11, 0.6);
  color: #fbbf24;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.25rem 0.85rem;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6), 0 0 14px rgba(245, 158, 11, 0.25);
  white-space: nowrap;
  z-index: 20;
}

.pricing-magic-edge-tag svg {
  color: #f59e0b;
  flex-shrink: 0;
}

.pricing-magic-card--popular {
  border: 2px solid #3b82f6 !important;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.35), 0 24px 60px rgba(0, 0, 0, 0.85), 0 0 35px rgba(37, 99, 235, 0.25) !important;
  background-color: rgba(13, 20, 40, 0.95) !important;
  transform: scale(1.055);
  z-index: 10;
}
@media (min-width: 768px) {
  .pricing-magic-card--popular:hover {
    transform: scale(1.055) translateY(-5px);
  }
}

/* Card Header */
.pricing-magic-card-header {
  padding: 1.75rem 1.75rem 0.75rem;
  text-align: left;
}

@media (min-width: 640px) {
  .pricing-magic-card-header {
    padding: 2.25rem 2.25rem 0.75rem;
  }
}

.pricing-magic-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.pricing-magic-plan-name {
  font-size: 1.875rem; /* text-3xl */
  font-weight: 600;
  color: #ffffff;
  letter-spacing: -0.02em;
  margin: 0;
  font-family: inherit;
}

.pricing-magic-popular-badge {
  background-color: #2563eb;
  color: #ffffff;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  box-shadow: 0 0 12px rgba(37, 99, 235, 0.5);
}

.pricing-magic-discount-badge {
  background-color: rgba(16, 185, 129, 0.18);
  border: 1px solid rgba(52, 211, 153, 0.4);
  color: #6ee7b7;
  padding: 0.25rem 0.65rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.pricing-magic-plan-desc {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 1.25rem;
  min-height: 2.75rem;
  line-height: 1.5;
  font-weight: 400;
}

.pricing-magic-price-wrap {
  display: flex;
  align-items: baseline;
  font-weight: 600;
  color: #ffffff;
}

.pricing-magic-currency {
  font-size: 2.25rem; /* text-4xl */
  font-weight: 600;
  margin-left: 2px;
}

.pricing-magic-amount {
  font-size: 2.25rem; /* text-4xl */
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: transform 0.15s ease, opacity 0.15s ease;
  display: inline-block;
}

.pricing-magic-amount.is-changing {
  transform: translateY(-4px);
  opacity: 0.2;
}

.pricing-magic-period {
  color: rgba(255, 255, 255, 0.5);
  margin-left: 0.25rem;
  font-size: 0.9rem;
  font-weight: 400;
}

/* Card Content */
.pricing-magic-card-content {
  padding: 0 1.75rem 1.75rem;
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: space-between;
}

@media (min-width: 640px) {
  .pricing-magic-card-content {
    padding: 0 2.25rem 2.25rem;
  }
}

/* Button */
.pricing-magic-btn {
  width: 100%;
  margin-bottom: 1.5rem;
  padding: 1rem;
  font-size: 1.15rem; /* text-xl */
  font-weight: 500;
  border-radius: 0.75rem; /* rounded-xl */
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  display: block;
  text-align: center;
  text-decoration: none;
}

.pricing-magic-btn:active {
  transform: scale(0.98);
}

.pricing-magic-btn--blue {
  background: linear-gradient(to top, #2563eb, #3b82f6);
  box-shadow: 0 10px 25px rgba(37, 99, 235, 0.4);
  border: 1px solid #60a5fa;
  color: #ffffff !important;
}

.pricing-magic-btn--blue:hover {
  background: linear-gradient(to top, #1d4ed8, #2563eb);
  box-shadow: 0 12px 30px rgba(37, 99, 235, 0.6);
}

.pricing-magic-btn--dark {
  background: linear-gradient(to top, #18181b, #27272a);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #ffffff !important;
}

.pricing-magic-btn--dark:hover {
  background: linear-gradient(to top, #27272a, #3f3f46);
  border-color: rgba(255, 255, 255, 0.25);
}

/* Features List */
.pricing-magic-features {
  list-style: none;
  margin: 0;
  padding: 1.25rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.pricing-magic-features li {
  display: flex;
  align-items: center;
}

.pricing-magic-feature-icon {
  color: #60a5fa;
  display: grid;
  place-content: center;
  margin-right: 0.75rem;
  margin-top: 1px;
  flex-shrink: 0;
}

.pricing-magic-feature-text {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 400;
}

/* Includes Box */
.pricing-magic-includes-box {
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.pricing-magic-includes-title {
  font-weight: 600;
  font-size: 0.95rem;
  color: #ffffff;
  margin: 0 0 0.5rem 0;
  font-family: inherit;
}

.pricing-magic-includes-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.pricing-magic-includes-list li {
  display: flex;
  align-items: center;
}

.pricing-magic-check-circle {
  width: 1.35rem;
  height: 1.35rem;
  background-color: rgba(13, 20, 40, 0.8);
  border: 1px solid rgba(59, 130, 246, 0.8);
  border-radius: 9999px;
  display: grid;
  place-content: center;
  margin-right: 0.75rem;
  flex-shrink: 0;
  color: #60a5fa;
}

.pricing-magic-includes-text {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 400;
}













/* ==========================================================================
   HOME ACCENT RECOLOUR -> #8170FF (violet)
   Scoped to the public landing page via body:has(.whf-hero) so the login
   and customer dashboard — which share this stylesheet — are untouched.
   Overrides the blue/cyan accent on the pricing section and makes the
   trust-strip numbers glow in the new accent.
   ========================================================================== */
body:has(.whf-hero){
  --w-accent:        #8170ff;
  --w-accent-light:  #a99bff;
  --w-accent-soft:   #c7bcff;
  --w-accent-deep:   #5b4fd6;
  --w-accent-rgb:    129,112,255;
}

/* --- Trust strip: numbers in violet accent --- */
body:has(.whf-hero) .trust-num{
  background:none !important;
  -webkit-background-clip:unset !important;
  background-clip:unset !important;
  color:var(--w-accent-light) !important;
  -webkit-text-fill-color:var(--w-accent-light) !important;
  text-shadow:0 0 16px rgba(var(--w-accent-rgb),0.55);
  filter:none !important;
  animation:none !important;
}
body:has(.whf-hero) .trust-cell:hover{
  background:rgba(var(--w-accent-rgb),0.05) !important;
}
@keyframes home-accent-glow{
  0%,100%{filter:drop-shadow(0 0 10px rgba(var(--w-accent-rgb),0.38))}
  50%    {filter:drop-shadow(0 0 22px rgba(var(--w-accent-rgb),0.65))}
}
@media (prefers-reduced-motion:reduce){
  body:has(.whf-hero) .trust-num{animation:none}
}

/* --- Pricing: swap all blues for the violet accent --- */
body:has(.whf-hero) .pricing-magic-radial{
  background-image:radial-gradient(circle at center, rgba(var(--w-accent-rgb),0.45) 0%, transparent 70%) !important;
}
body:has(.whf-hero) .pricing-magic-badge{
  border-color:rgba(var(--w-accent-rgb),0.75) !important;
  background-color:rgba(var(--w-accent-rgb),0.14) !important;
  color:var(--w-accent-soft) !important;
  box-shadow:0 0 15px rgba(var(--w-accent-rgb),0.25) !important;
}
body:has(.whf-hero) .pricing-magic-switch-indicator{
  border-color:var(--w-accent) !important;
  background:linear-gradient(to top, var(--w-accent-deep), var(--w-accent), var(--w-accent-light)) !important;
  box-shadow:0 0 16px rgba(var(--w-accent-rgb),0.6) !important;
}
body:has(.whf-hero) .pricing-magic-save-pill{
  background-color:rgba(var(--w-accent-rgb),0.2) !important;
  border-color:rgba(var(--w-accent-rgb),0.4) !important;
  color:var(--w-accent-soft) !important;
}
body:has(.whf-hero) .pricing-magic-switch-btn.is-active .pricing-magic-save-pill{
  background-color:rgba(255,255,255,0.2) !important;
  color:#ffffff !important;
}
body:has(.whf-hero) .pricing-magic-card:hover{
  box-shadow:0 20px 40px rgba(0,0,0,0.8), 0 0 25px rgba(var(--w-accent-rgb),0.14) !important;
}
body:has(.whf-hero) .pricing-magic-card--popular{
  border:2px solid var(--w-accent) !important;
  box-shadow:
    0 0 0 2px rgba(var(--w-accent-rgb),0.35),
    0 24px 60px rgba(0,0,0,0.85),
    0 0 45px rgba(var(--w-accent-rgb),0.4) !important;
  background-color:rgba(26,20,52,0.95) !important;
  transform:scale(1.08) !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  z-index:10 !important;
}
@media (min-width: 768px){
  body:has(.whf-hero) .pricing-magic-card--popular:hover{
    transform:scale(1.08) translateY(-6px) !important;
    box-shadow:
      0 0 0 2px rgba(var(--w-accent-rgb),0.45),
      0 28px 70px rgba(0,0,0,0.9),
      0 0 55px rgba(var(--w-accent-rgb),0.55) !important;
  }
}
@media (max-width: 767px){
  body:has(.whf-hero) .pricing-magic-card--popular{
    transform:none !important;
  }
}
body:has(.whf-hero) .pricing-magic-popular-badge{
  background-color:var(--w-accent) !important;
  box-shadow:0 0 14px rgba(var(--w-accent-rgb),0.55) !important;
}
body:has(.whf-hero) .pricing-magic-btn--blue{
  background:linear-gradient(to top, var(--w-accent-deep), var(--w-accent)) !important;
  box-shadow:0 10px 25px rgba(var(--w-accent-rgb),0.42) !important;
  border:1px solid var(--w-accent-light) !important;
  color:#ffffff !important;
}
body:has(.whf-hero) .pricing-magic-btn--blue:hover{
  background:linear-gradient(to top, #4a3fc8, #6c5df0) !important;
  box-shadow:0 12px 30px rgba(var(--w-accent-rgb),0.6) !important;
}
body:has(.whf-hero) .pricing-magic-feature-icon{
  color:var(--w-accent-light) !important;
}
body:has(.whf-hero) .pricing-magic-check-circle{
  background-color:rgba(26,20,52,0.8) !important;
  border-color:rgba(var(--w-accent-rgb),0.75) !important;
  color:var(--w-accent-light) !important;
}

/* ==========================================================================
   FINANCE-BENTO STYLE OVERRIDE for Customer Dashboard
   (schwarz-weiß Monochrom-Variante — behält HTML & Logik unverändert,
    überschreibt nur Styles der .dash-* Klassen)
   ========================================================================== */

/* Global font for the dashboard: Geist as sans, Geist Mono for numbers/labels */
.portal-main.dashboard-main,
.portal-main.dashboard-main h1,
.portal-main.dashboard-main h2,
.portal-main.dashboard-main h3,
.portal-main.dashboard-main h4,
.portal-main.dashboard-main p,
.portal-main.dashboard-main span,
.portal-main.dashboard-main a,
.portal-main.dashboard-main button,
.portal-main.dashboard-main div,
.portal-main.dashboard-main strong,
.portal-main.dashboard-main label {
  font-family: 'Geist', 'Outfit', ui-sans-serif, system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.portal-main.dashboard-main code,
.portal-main.dashboard-main .mono,
.portal-main.dashboard-main .dash-mono-sm,
.portal-main.dashboard-main .dash-key,
.portal-main.dashboard-main .dash-stat-label,
.portal-main.dashboard-main .dash-stat-time,
.portal-main.dashboard-main .dash-stat-num,
.portal-main.dashboard-main .dash-stat-pill,
.portal-main.dashboard-main .dash-version-badge,
.portal-main.dashboard-main .dash-build-badge,
.portal-main.dashboard-main .dash-quota-info,
.portal-main.dashboard-main .dash-qs-label,
.portal-main.dashboard-main .dash-field label,
.portal-main.dashboard-main .dash-meta label,
.portal-main.dashboard-main .dash-badge,
.portal-main.dashboard-main .radar-preview-status {
  font-family: 'Geist Mono', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace !important;
  font-variant-numeric: tabular-nums;
}

/* --- Container & Grid --- */
.portal-main.dashboard-main {
  background: transparent;
  padding: 110px 0 90px;         /* 72px nav + 38px breathing room above hero */
  position: relative;
  z-index: 10;
  display: block;
  align-items: flex-start;
  min-height: calc(100vh - 80px);
  height: auto;
}
.portal-main.dashboard-main .container {
  max-width: 1320px;
  width: 100%;
}
/* Soft fade behind the top of the dashboard — hides the hard nav border line */
.portal-main.dashboard-main::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 180px;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(
    180deg,
    rgba(5, 5, 7, 0.6) 0%,
    rgba(5, 5, 7, 0.25) 55%,
    transparent 100%
  );
}
.portal-main.dashboard-main > .container {
  position: relative;
  z-index: 1;
}

/* Hero / top bar */
.dash-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 0 0 24px;
  padding: 0;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}
.dash-hero::after,
.dash-hero::before {
  display: none !important;
  content: none !important;
  background: transparent !important;
  width: 0 !important;
  height: 0 !important;
  border: 0 !important;
}
.dash-hero-copy h1 {
  /* Cool serif/sans mix — Instrument Serif italic adds editorial drama to the sans body */
  font-family: 'Instrument Serif', 'Geist', serif;
  font-style: italic;
  font-size: 42px;
  font-weight: 400;
  letter-spacing: -0.035em;
  color: #ffffff;
  margin: 0;
  line-height: 1;
  background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.72) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.dash-hero-copy .portal-sub {
  color: rgba(255, 255, 255, 0.56);
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-top: 4px;
}
.dash-hero-actions .btn {
  height: 36px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #ffffff;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 600;
  transition: background 0.25s ease, border-color 0.25s ease;
}
.dash-hero-actions .btn:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.28);
}

/* Stat strip — four KPI chips at the top */
.dash-stat-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 14px;
  padding: 0;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.dash-stat-strip::before,
.dash-stat-strip::after { display: none !important; }
.dash-stat-card {
  position: relative;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  border-radius: 20px;
  padding: 16px 18px;
  box-shadow:
    0 10px 30px -14px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.dash-stat-card::before { display: none !important; }
.dash-stat-label {
  font-family: 'Geist Mono', 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.56);
  display: block;
  margin-bottom: 10px;
}
.dash-stat-val {
  display: flex;
  align-items: center;
  gap: 6px;
}
.dash-stat-time,
.dash-stat-num {
  font-family: 'Geist Mono', 'JetBrains Mono', monospace;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -0.03em;
  color: #ffffff;
  font-variant-numeric: tabular-nums;
}
.dash-stat-pill {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-family: 'Geist Mono', 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
  letter-spacing: -0.01em;
}
.dash-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 12px;
  font-weight: 600;
  color: #ffffff;
}
.dash-badge .badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.15);
}

/* --- Main Bento Grid --- */
.dash-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 14px;
}

/* All dash-cards: round, overflow hidden, rim effect, entry animation */
.dash-card {
  position: relative;
  border-radius: 28px !important;
  overflow: hidden;
  padding: 24px 26px;
  margin: 0;
  background: linear-gradient(170deg, rgba(22, 22, 26, 0.95) 0%, rgba(8, 8, 10, 0.98) 100%);
  border: 0 !important;
  box-shadow:
    0 20px 50px -10px rgba(0, 0, 0, 0.8),
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  backdrop-filter: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  opacity: 0;
  transform: translateY(14px) scale(0.985);
  transition:
    opacity 0.7s ease,
    transform 0.9s cubic-bezier(0.32, 0.72, 0, 1);
  animation: none;
}
.dash-card.dash-in {
  opacity: 1;
  transform: none;
  animation: none;
}
.dash-card.dash-in:nth-child(1) { transition-delay: 0ms; }
.dash-card.dash-in:nth-child(2) { transition-delay: 60ms; }
.dash-card.dash-in:nth-child(3) { transition-delay: 120ms; }
.dash-card.dash-in:nth-child(4) { transition-delay: 180ms; }
.dash-card.dash-in:nth-child(5) { transition-delay: 240ms; }
.dash-card.dash-in:nth-child(6) { transition-delay: 300ms; }

.dash-card::before,
.dash-card::after {
  content: '';
  position: absolute;
  pointer-events: none;
}
/* Core glow in each card's center for finance-bento depth */
.dash-card::before {
  left: 10%;
  right: 10%;
  top: 16%;
  bottom: -6%;
  border-radius: 90px;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.06) 0%, transparent 70%);
  filter: blur(60px);
  z-index: 0;
}
/* Rim top highlight */
.dash-card::after {
  inset: 0;
  border-radius: inherit;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  z-index: 9;
}

.dash-card:hover {
  transform: translateY(-3px);
  border: 0 !important;
  box-shadow:
    0 28px 60px -10px rgba(0, 0, 0, 0.9),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 0 0 1px rgba(255, 255, 255, 0.09);
}

/* Each content inside sits above the glow */
.dash-card > * { position: relative; z-index: 2; }

/* --- Grid spans --- */
.dash-card-download { grid-column: span 12; }
.dash-card-profile  { grid-column: span 12; }
.dash-card-license  { grid-column: span 6; }
.dash-card-hwid     { grid-column: span 6; }
.dash-card-panel    { grid-column: span 6; }
.dash-card-support  { grid-column: span 6; }

@media (max-width: 1199px) {
  .dash-card-download,
  .dash-card-profile,
  .dash-card-license,
  .dash-card-hwid,
  .dash-card-panel,
  .dash-card-support { grid-column: span 12; }
  .dash-stat-strip { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 639px) {
  .dash-stat-strip { grid-template-columns: 1fr; gap: 10px; }
  .dash-card { padding: 20px 20px; border-radius: 24px !important; }
  .dash-grid { gap: 12px; }
  .dash-hero { flex-direction: column; align-items: flex-start; }
  .dash-hero-copy h1 { font-size: 24px; }
}

/* --- Profile Card — 4 KPI blocks for activation / last-seen / plan / session --- */
.dash-card-profile .dash-profile-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 4px;
}
.dash-profile-item {
  position: relative;
  padding: 14px 16px 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.dash-profile-item:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.14);
}
.dash-profile-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 14px;
  right: 14px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
  pointer-events: none;
}
.dash-profile-item label {
  font-family: 'Geist Mono', 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin: 0 0 2px;
}
.dash-profile-item strong {
  font-family: 'Geist', sans-serif;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: #ffffff;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.dash-profile-item .dash-profile-rel {
  font-family: 'Geist Mono', 'JetBrains Mono', monospace;
  font-size: 11.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: -0.005em;
  margin-top: 2px;
}
@media (max-width: 1023px) {
  .dash-card-profile .dash-profile-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 519px) {
  .dash-card-profile .dash-profile-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Download Card (featured — solid-white accent variant like the lime tile) --- */
.dash-card-featured.dash-card-download {
  background: linear-gradient(170deg, rgba(28, 28, 32, 0.96) 0%, rgba(10, 10, 12, 0.98) 100%);
}
.dash-card-featured.dash-card-download::before {
  background: radial-gradient(ellipse at 70% 30%, rgba(255, 255, 255, 0.1) 0%, transparent 60%);
  filter: blur(70px);
}

.dash-download-hero {
  position: relative;
  padding: 10px 4px 20px;
  border-bottom: none;
  background: transparent;
}
.dash-dl-glow {
  display: none !important;
}
.dash-dl-center {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0;
  text-align: left;
}
.dash-dl-badge-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.dash-version-badge,
.dash-build-badge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  border-radius: 11px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-family: 'Geist Mono', 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: -0.01em;
}
.dash-build-badge {
  background: #ffffff;
  color: #000000;
  border-color: #ffffff;
}
.dash-dl-main-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 0;
}
.dash-dl-title {
  font-family: 'Geist', 'Outfit', sans-serif;
  font-size: 44px;
  font-weight: 200;
  letter-spacing: -0.04em;
  margin: 0;
  line-height: 1;
  /* Animated cyan shimmer across the title */
  background: linear-gradient(
    90deg,
    #ffffff 0%,
    #ffffff 20%,
    #22d3ee 40%,
    #67e8f9 50%,
    #22d3ee 60%,
    #ffffff 80%,
    #ffffff 100%
  );
  background-size: 220% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  animation: dl-title-shimmer 5s linear infinite;
  /* Soft cyan glow around the text */
  filter: drop-shadow(0 0 18px rgba(34, 211, 238, 0.25));
}
@keyframes dl-title-shimmer {
  0%   { background-position: 0% center; }
  100% { background-position: 220% center; }
}
.dash-dl-ext {
  /* .exe suffix stays part of the shimmer */
  background: inherit;
  -webkit-background-clip: inherit;
  background-clip: inherit;
  color: inherit;
  font-weight: 200;
  opacity: 0.7;
}
@media (prefers-reduced-motion: reduce) {
  .dash-dl-title {
    animation: none;
    background-position: 50% center;
  }
}
.btn-dl-icon-big {
  width: 72px;
  height: 72px;
  border-radius: 24px;
  background: #ffffff;
  color: #000000;
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1), box-shadow 0.3s ease;
  box-shadow:
    0 12px 30px -8px rgba(255, 255, 255, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.btn-dl-icon-big:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow:
    0 18px 40px -8px rgba(255, 255, 255, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.btn-dl-icon-big:active {
  transform: translateY(0) scale(0.98);
}
.btn-dl-icon-big.is-loading .btn-spinner {
  display: block;
}
.btn-spinner {
  display: none;
  position: absolute;
  width: 24px;
  height: 24px;
  border: 2.5px solid rgba(0, 0, 0, 0.2);
  border-top-color: #000000;
  border-radius: 50%;
  animation: dash-spin 0.8s linear infinite;
}
@keyframes dash-spin {
  to { transform: rotate(360deg); }
}

.dash-quota-mini {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dash-quota-bar {
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  overflow: hidden;
}
.dash-quota-fill {
  height: 100%;
  background: #ffffff;
  border-radius: 999px;
  transition: width 0.5s cubic-bezier(0.32, 0.72, 0, 1);
}
.dash-quota-fill.is-full {
  background: #ff6b6b;
}
.dash-quota-info {
  font-family: 'Geist Mono', 'JetBrains Mono', monospace;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.56);
  font-weight: 500;
}
.dash-quota-info > span:first-child,
.dash-quota-info > span:nth-child(3) {
  color: #ffffff;
}
.dash-quota-sep {
  color: rgba(255, 255, 255, 0.3);
  margin: 0 2px;
}

/* Quick-start steps */
.dash-quick-start {
  padding-top: 16px;
  margin-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.dash-qs-label {
  font-family: 'Geist Mono', 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.56);
  margin-bottom: 14px;
}
.dash-qs-steps {
  display: flex;
  align-items: stretch;
  gap: 12px;
  flex-wrap: wrap;
}
.qs-step {
  flex: 1;
  min-width: 180px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  transition: background 0.25s ease, border-color 0.25s ease;
}
.qs-step.qs-step-action { cursor: pointer; }
.qs-step.qs-step-action:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
}
.qs-icon {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  flex-shrink: 0;
}
.qs-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; text-decoration: none; }
.qs-text strong {
  font-family: 'Geist', 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: -0.01em;
}
.qs-text span {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.56);
  font-weight: 500;
}
.qs-link { color: inherit; }
.qs-divider {
  display: flex;
  align-items: center;
  color: rgba(255, 255, 255, 0.3);
  flex-shrink: 0;
}

/* --- Card Head (used by license/hwid/panel/support cards) --- */
.dash-card-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.dash-card-icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #ffffff;
  flex-shrink: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.dash-card-head h3 {
  font-family: 'Geist', 'Outfit', sans-serif;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #ffffff;
  margin: 0 0 2px;
}
.dash-card-sub {
  color: rgba(255, 255, 255, 0.56);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.45;
  margin: 0;
}

/* License / HWID fields */
.dash-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dash-field .label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.dash-field label {
  font-family: 'Geist Mono', 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.56);
}
.dash-field .field-aux {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.38);
  font-weight: 500;
}
.dash-key-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.dash-key {
  flex: 1;
  padding: 11px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  font-family: 'Geist Mono', 'JetBrains Mono', monospace;
  font-size: 13px;
  color: #ffffff;
  font-weight: 500;
  letter-spacing: 0.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.btn-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, transform 0.2s ease;
}
.btn-icon:hover {
  background: rgba(255, 255, 255, 0.12);
  transform: translateY(-1px);
}
.dash-meta-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.dash-meta label {
  font-family: 'Geist Mono', 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.56);
  display: block;
  margin-bottom: 6px;
}
.dash-mono-sm,
.dash-meta-val {
  font-family: 'Geist Mono', 'JetBrains Mono', monospace;
  font-size: 12px;
  color: #ffffff;
  font-weight: 500;
  letter-spacing: -0.01em;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dash-meta-val { font-size: 12.5px; font-family: 'Geist', 'Outfit', sans-serif; }

.dash-sec-note {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.56);
  font-size: 11.5px;
  line-height: 1.5;
  font-weight: 500;
}
.dash-sec-note svg { flex-shrink: 0; margin-top: 2px; }

/* HWID action area */
.dash-hwid-action-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dash-hint {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.38);
  font-weight: 500;
  text-align: center;
}

/* Radar preview */
.dash-radar-preview {
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
}
.radar-preview-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Geist Mono', 'JetBrains Mono', monospace;
  font-size: 11.5px;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}
.radar-preview-status .status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
  animation: dash-pulse 2s ease-in-out infinite;
}
@keyframes dash-pulse {
  50% { opacity: 0.4; }
}
.radar-preview-desc {
  color: rgba(255, 255, 255, 0.56);
  font-size: 12px;
  line-height: 1.5;
  margin: 0;
}

/* Shared buttons */
.dash-card .btn.btn-outline,
.dash-card .btn.btn-block {
  width: 100%;
  height: 42px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #ffffff;
  font-family: 'Geist', 'Outfit', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.dash-card .btn.btn-outline:hover,
.dash-card .btn.btn-block:hover {
  background: #ffffff;
  color: #000000;
  border-color: #ffffff;
  transform: translateY(-1px);
}

/* Support links */
.dash-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dash-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  text-decoration: none;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.dash-link:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.18);
  transform: translateY(-1px);
}
.dash-link-icon {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  flex-shrink: 0;
}
.dash-link-text { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.dash-link-text strong {
  font-family: 'Geist', 'Outfit', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: -0.01em;
}
.dash-link-text span {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.56);
  font-weight: 500;
}
.dash-link-arrow {
  color: rgba(255, 255, 255, 0.38);
  flex-shrink: 0;
  transition: transform 0.25s ease, color 0.25s ease;
}
.dash-link:hover .dash-link-arrow {
  color: #ffffff;
  transform: translateX(3px);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .dash-card { transition: opacity 0.3s ease; transform: none; }
  .btn-dl-icon-big:hover { transform: none; }
}

/* Portal ambient glow — hidden on the new finance-bento layout
   (aurora shader handles the global background) */
.portal-ambient-glow { display: none !important; }

/* ==========================================================================
   /END Finance-Bento Dashboard Override
   ========================================================================== */


/* ==================== GLOBAL ZERO LOGO ANIMATION ====================
   Topbar logo: idle breathing glow + shimmer across "ZERO" letters,
   plus a hover tilt. Falls back to white on pages without --dash-accent. */
.site-nav .logo,
.nav .logo{
  position:relative;
  transition:transform .3s cubic-bezier(.2,.8,.2,1);
}
.site-nav .logo-img,
.nav .logo-img{
  filter:drop-shadow(0 0 6px rgba(var(--dash-accent-rgb,255,255,255),0.35));
  animation:zero-logo-breathe 4.5s ease-in-out infinite;
  transition:filter .3s, transform .45s cubic-bezier(.2,.8,.2,1);
  will-change:filter, transform;
}
@keyframes zero-logo-breathe{
  0%,100%{filter:drop-shadow(0 0 5px rgba(var(--dash-accent-rgb,255,255,255),0.25))}
  50%    {filter:drop-shadow(0 0 14px rgba(var(--dash-accent-rgb,255,255,255),0.6))}
}
.site-nav .logo-text,
.nav .logo-text{
  background:linear-gradient(90deg,
    #ffffff 0%,
    var(--dash-accent-soft,#d4d4d4) 30%,
    #ffffff 55%,
    var(--dash-accent-soft,#d4d4d4) 80%,
    #ffffff 100%
  ) !important;
  background-size:200% 100% !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  color:transparent !important;
  animation:zero-logo-shimmer 5s linear infinite;
  letter-spacing:.14em;
  will-change:background-position;
}
@keyframes zero-logo-shimmer{
  0%  {background-position:0% 50%}
  100%{background-position:-200% 50%}
}
.site-nav .logo:hover,
.nav .logo:hover{transform:translateY(-1px)}
.site-nav .logo:hover .logo-img,
.nav .logo:hover .logo-img{
  transform:rotate(-8deg) scale(1.1);
  filter:drop-shadow(0 0 20px rgba(var(--dash-accent-rgb,255,255,255),0.8));
  animation-play-state:paused;
}
.site-nav .logo:hover .logo-text,
.nav .logo:hover .logo-text{
  animation-duration:1.6s;
}
@media (prefers-reduced-motion:reduce){
  .site-nav .logo-img,
  .nav .logo-img,
  .site-nav .logo-text,
  .nav .logo-text{animation:none !important}
}


/* ==================== TUNNEL -> ENGINE CORE TRANSITION ====================
   1) Hide the dot grid overlay inside the Twelve-Modules tunnel.
   2) Fade the tunnel out to pure black at its bottom edge.
   3) Fade the Engine Core section IN from black with a reveal headline. */

/* Remove the perspective dot grid behind the Twelve-Modules tunnel */
#feature-tunnel .tunnel-bg-grid{display:none !important}

/* Bottom-bridge: dark fade at the end of the tunnel section */
#feature-tunnel::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:220px;
  pointer-events:none;
  z-index:12;
  background:linear-gradient(180deg,
    transparent 0%,
    rgba(5,5,7,0.6) 55%,
    #050507 100%
  );
}

/* Top-bridge: fade Engine Core in from the same black */
.bento-section#highlights{
  position:relative;
  padding-top:9rem !important;
  overflow:visible;
}
.bento-section#highlights::before{
  content:"";
  position:absolute;
  left:0;right:0;top:0;
  height:260px;
  pointer-events:none;
  z-index:0;
  background:linear-gradient(180deg,
    #050507 0%,
    rgba(5,5,7,0.75) 45%,
    transparent 100%
  );
}

/* Soft reveal of the Engine Core heading as it enters the viewport.
   The .reveal class is already toggled by the site's existing IntersectionObserver,
   so this just adds a longer, more cinematic transition. */
.bento-section#highlights .section-head{
  position:relative;
  z-index:1;
}
.bento-section#highlights .section-head.reveal{
  opacity:0;
  transform:translateY(28px);
  filter:blur(6px);
  transition:
    opacity .9s cubic-bezier(.2,.8,.2,1),
    transform .9s cubic-bezier(.2,.8,.2,1),
    filter .8s cubic-bezier(.2,.8,.2,1);
}
.bento-section#highlights .section-head.reveal.visible,
.bento-section#highlights .section-head.reveal.is-visible{
  opacity:1;transform:translateY(0);filter:blur(0);
}

/* A subtle warm accent beam sitting just below the "Engine Core" eyebrow.
   It appears to pour from the tunnel exit and fades across the headline. */
.bento-section#highlights .section-head::before{
  content:"";
  position:absolute;
  left:50%;top:-80px;
  width:420px;height:160px;
  transform:translateX(-50%);
  pointer-events:none;
  background:
    radial-gradient(260px 100px at 50% 100%, rgba(255,255,255,0.12), transparent 70%),
    radial-gradient(380px 180px at 50% 100%, rgba(0,240,255,0.07), transparent 75%);
  z-index:-1;
  filter:blur(6px);
}
.bento-section#highlights .eyebrow{
  display:inline-block;
  position:relative;
  padding:4px 14px;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(255,255,255,0.03);
  border-radius:999px;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

@media (prefers-reduced-motion:reduce){
  .bento-section#highlights .section-head.reveal{
    opacity:1;transform:none;filter:none;transition:none;
  }
}


/* =====================================================================
   PRODUCT PAGE ATMOSPHERE PASS
   Inspired by:
     · 21st.dev "aura" (lukedarrendesigns) — film grain + vignette finish
     · Apple WWDC "Designing Fluid Interfaces" + "The Details of UI Typography"
   Goals: unified feel across every section, Apple-grade type and material.
===================================================================== */

/* [Atmosphere pass + section bridges removed — user reverted BG changes.] */

/* --- Apple typography (WWDC "Details of UI Typography")
   Negative tracking as size grows, size-aware leading, optical sizing. */
h1, .hero h1,
.hero-title,
.hero-headline{
  letter-spacing:-0.032em;
  line-height:1.03;
  font-optical-sizing:auto;
}
h2,
.section-head h2,
.fmg-title,
.tunnel-title h2{
  letter-spacing:-0.028em;
  line-height:1.06;
  font-weight:700;
  font-optical-sizing:auto;
}
h3{letter-spacing:-0.02em;line-height:1.18}
.eyebrow,
.fmg-eyebrow,
.tunnel-eyebrow{
  letter-spacing:.26em;
  font-weight:600;
}
.section-subtext,
p.lead,
.hero-sub,
.hero p{
  letter-spacing:-0.005em;
  line-height:1.55;
  max-width:62ch;
}
small, .caption, .fmg-tag{letter-spacing:.014em}

/* --- Apple-style reveal: translateY + blur-in, interrupt-safe curve.
   Site already toggles .visible/.is-visible via IntersectionObserver. */
.reveal-up:not(.visible):not(.is-visible){
  opacity:0;
  transform:translateY(26px);
  filter:blur(5px);
}
.reveal-up{
  transition:
    opacity .85s cubic-bezier(.2,.8,.2,1),
    transform .85s cubic-bezier(.2,.8,.2,1),
    filter .7s cubic-bezier(.2,.8,.2,1);
}
.reveal-stagger > *{transition-delay:calc(var(--i,0) * 60ms)}
.reveal-stagger > *:nth-child(1){--i:0}
.reveal-stagger > *:nth-child(2){--i:1}
.reveal-stagger > *:nth-child(3){--i:2}
.reveal-stagger > *:nth-child(4){--i:3}
.reveal-stagger > *:nth-child(5){--i:4}
.reveal-stagger > *:nth-child(6){--i:5}
.reveal-stagger > *:nth-child(7){--i:6}
.reveal-stagger > *:nth-child(8){--i:7}
.reveal-stagger > *:nth-child(n+9){--i:8}

@media (prefers-reduced-motion:reduce){
  .reveal-up:not(.visible):not(.is-visible){
    opacity:1 !important;transform:none !important;filter:none !important;
  }
  .reveal-stagger > *{transition-delay:0ms}
}

/* --- Material rules (Apple WWDC "Designing Fluid Interfaces" §12):
   Translucent surfaces, context-aware shadow. Scrim depth, no stacked lights. */
.site-nav, .nav{
  background:rgba(10,12,18,0.58);
  backdrop-filter:blur(20px) saturate(1.4);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);
  border-bottom:1px solid rgba(255,255,255,0.06);
}
@media (prefers-reduced-transparency:reduce){
  .site-nav, .nav{background:#0a0b11;backdrop-filter:none;-webkit-backdrop-filter:none}
}

/* Larger surfaces (feature cards, pricing cards) read as thicker glass */
.bento-card, .fmg-box, .pricing-card{
  background:rgba(16,18,26,0.55) !important;
  backdrop-filter:blur(18px) saturate(1.15);
  -webkit-backdrop-filter:blur(18px) saturate(1.15);
  border:1px solid rgba(255,255,255,0.06);
  box-shadow:0 20px 50px -24px rgba(0,0,0,0.65);
}

/* Scroll-edge effect on top nav: gradient mask instead of hard divider */
.site-nav::after, .nav::after{
  content:'';position:absolute;left:0;right:0;bottom:-18px;height:18px;pointer-events:none;
  background:linear-gradient(180deg, rgba(10,12,18,0.5), transparent);
  mask-image:linear-gradient(180deg, #000, transparent);
  -webkit-mask-image:linear-gradient(180deg, #000, transparent);
}

/* --- Section-head rhythm: Apple spacing uses tighter headline-to-sub
   gap, more sub-to-body gap. */
.section-head{position:relative;z-index:1}
.section-head .eyebrow{display:inline-block;margin-bottom:14px}
.section-head h2{margin:0 0 14px}
.section-head .section-subtext{margin:0 auto 10px;color:rgba(255,255,255,0.6)}

/* Section container: more vertical breathing between sections */
.section{padding:7rem 0 !important}

/* --- Soft focus beams below large headers (Apple "light catching the material") */
.section-head.center{position:relative}
.section-head.center::after{
  content:'';position:absolute;left:50%;top:-40px;
  width:420px;height:120px;transform:translateX(-50%);
  background:radial-gradient(280px 90px at 50% 100%, rgba(255,255,255,0.08), transparent 70%);
  pointer-events:none;z-index:-1;filter:blur(6px);
}


/* ============ TRUST STRIP SECTION ============ */
.trust-strip{padding:5rem 0 !important;position:relative}
.trust-head{text-align:center;margin-bottom:3rem;max-width:640px;margin-left:auto;margin-right:auto}
.trust-head .eyebrow{color:#ffffff;opacity:.75;font-family:'Geist Mono','JetBrains Mono',monospace;font-size:.72rem;margin-bottom:1rem;display:inline-block}
.trust-head h2{
  font-size:clamp(1.9rem,3.6vw,2.6rem);
  font-weight:700;line-height:1.08;letter-spacing:-0.028em;
  background:linear-gradient(180deg,#ffffff,rgba(255,255,255,0.5));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.trust-head h2 .muted{color:rgba(255,255,255,0.35)}
.trust-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:16px;
  background:rgba(10,12,18,0.45);
  backdrop-filter:blur(18px) saturate(1.2);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);
  overflow:hidden;
}
.trust-cell{
  padding:28px 24px;
  border-right:1px dashed rgba(255,255,255,0.07);
  text-align:center;
  position:relative;
  transition:background .25s;
}
.trust-cell:last-child{border-right:none}
.trust-cell:hover{background:rgba(255,255,255,0.025)}
.trust-num{
  font-family:'Geist','Outfit',sans-serif;
  font-size:clamp(1.75rem,3vw,2.4rem);
  font-weight:800;letter-spacing:-0.03em;
  color:#ffffff;
  line-height:1;margin-bottom:8px;
  font-variant-numeric:tabular-nums;
}
.trust-label{
  font-family:'Geist Mono','JetBrains Mono',monospace;
  font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,255,255,0.55);font-weight:500;
}

@media (max-width:720px){
  .trust-grid{grid-template-columns:repeat(2,1fr)}
  .trust-cell{border-bottom:1px dashed rgba(255,255,255,0.07)}
  .trust-cell:nth-child(2n){border-right:none}
  .trust-cell:nth-last-child(-n+2){border-bottom:none}
}


/* ==================== WILD HUNT HERO (TEST) ====================
   Vanilla port of 21st.dev "Pixel Art Painting Footer" / wild-hunt-footer
   by kedhareswer (id 43022), repurposed as the main hero.
   - Vermilion background with Oslo-studio editorial type
   - Top image band dissolves into the red
   - Bitmap blackletter ZERO rendered to canvas (whf-hero.js)
=================================================================== */
.whf-picture{
  position:absolute;left:0;top:0;width:100%;height:62%;
  overflow:hidden;z-index:0;
}
.whf-picture img{
  position:absolute;inset:0;width:100%;height:100%;max-width:none;
  object-fit:cover;object-position:50% 36%;display:block;
  filter:grayscale(1) contrast(1.1) brightness(.85);
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 55%, rgba(0,0,0,.6) 72%, rgba(0,0,0,0) 100%);
          mask-image:linear-gradient(to bottom, #000 0%, #000 55%, rgba(0,0,0,.6) 72%, rgba(0,0,0,0) 100%);
}
.whf-tint{
  position:absolute;inset:0;
  background:linear-gradient(to bottom,
    rgba(7,7,7,0) 30%,
    rgba(7,7,7,0.5) 72%,
    #070707 100%);
}
/* Pixelated dissolve edge: a repeating-linear-gradient striped mask that
   quantises the bottom fade into 4-px bands, imitating the Bayer dither. */
.whf-picture::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:30%;
  background:repeating-linear-gradient(to bottom,
    rgba(7,7,7,0) 0 1px,
    rgba(7,7,7,.08) 1px 2px,
    rgba(7,7,7,.3) 2px 3px,
    rgba(7,7,7,.6) 3px 4px);
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,0), #000 55%);
          mask-image:linear-gradient(to bottom, rgba(0,0,0,0), #000 55%);
  pointer-events:none;
}
.whf-hero{
  position:relative;
  width:100%;
  height:min(100svh, 920px);
  min-height:620px;
  overflow:hidden;
  isolation:isolate;
  container-type:inline-size;
  background:#070707;
  color:#ededed;
  font-family:'Inter','Helvetica Neue',Helvetica,Arial,system-ui,sans-serif;
  --whf-pad:clamp(18px, 3.2vw, 48px);
  --whf-ease:cubic-bezier(.65, 0, .2, 1);
}
.whf-hero *{box-sizing:border-box}

.whf-sr{
  position:absolute;width:1px;height:1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;
}

.whf-grain{
  position:absolute;inset:0;width:100%;height:100%;
  z-index:2;pointer-events:none;mix-blend-mode:overlay;opacity:.5;
}
.whf-marks{
  position:absolute;inset:0;width:100%;height:100%;
  z-index:3;pointer-events:none;color:#ededed;overflow:visible;
}
.whf-word{
  position:absolute;left:0;top:0;width:100%;height:100%;
  z-index:4;image-rendering:pixelated;image-rendering:crisp-edges;
  display:block;
}

/* Vertical captions, read bottom-to-top on the left */
.whf-vert{
  position:absolute;top:42%;height:36%;
  z-index:6;margin:0;max-width:8em;
  display:flex;gap:.7em;
  writing-mode:vertical-rl;
  overflow:hidden;opacity:.9;
  color:#ededed;
  font-size:10px;line-height:1.55;letter-spacing:.16em;
  text-transform:uppercase;
}
.whf-vert.whf-l{left:var(--whf-pad);transform:rotate(180deg)}
.whf-vert.whf-r{right:var(--whf-pad)}

/* Footer link grid at the bottom */
.whf-foot{
  position:absolute;left:0;right:0;bottom:0;z-index:6;
  padding:0 var(--whf-pad) 18px;
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr)) auto;
  column-gap:20px;row-gap:0;align-items:start;
  color:#f4efe5;
  font-size:10px;line-height:1.55;letter-spacing:.16em;
  text-transform:uppercase;
}
.whf-col h3{margin:0 0 .35em;font:inherit;opacity:.55;font-weight:600}
.whf-col ul{list-style:none;margin:0;padding:0}
.whf-col a,.whf-up{
  color:inherit;text-decoration:none;opacity:.9;
  background:none;border:0;padding:0;cursor:pointer;
  font:inherit;letter-spacing:inherit;text-transform:inherit;
  background-image:linear-gradient(currentColor, currentColor);
  background-size:0 1px;background-repeat:no-repeat;background-position:0 100%;
  transition:opacity .25s ease, background-size .35s var(--whf-ease);
  display:inline-block;
}
.whf-col a:hover,.whf-up:hover{opacity:1;background-size:100% 1px}
.whf-col a:focus-visible,.whf-up:focus-visible{outline:1px solid currentColor;outline-offset:3px;opacity:1}
.whf-up{justify-self:end;white-space:nowrap}
.whf-up::before{content:'\2191';display:inline-block;margin-right:.6em;transition:transform .35s var(--whf-ease)}
.whf-up:hover::before{transform:translateY(-2px)}

.whf-legal{
  grid-column:1 / -1;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);
  gap:20px;align-items:end;
  margin-top:18px;padding-top:11px;
  border-top:1px dotted color-mix(in srgb, #f4efe5 38%, transparent);
  font-size:9.5px;letter-spacing:.12em;text-transform:none;line-height:1.55;
}
.whf-legal p{margin:0;opacity:.72}
.whf-sig{display:flex;align-items:center;gap:12px}
.whf-sig svg{width:14px;height:14px;display:block;fill:none;stroke:currentColor;stroke-width:1;opacity:.85}
.whf-sig span{opacity:.72;white-space:nowrap}

@container (max-width: 960px){
  .whf-foot{grid-template-columns:repeat(4, minmax(0, 1fr));row-gap:14px}
  .whf-up{grid-column:1 / -1;justify-self:start}
}
@container (max-width: 720px){
  .whf-vert{display:none}
  .whf-foot{grid-template-columns:repeat(2, minmax(0, 1fr));padding-bottom:14px}
  .whf-legal{grid-template-columns:minmax(0,1fr);margin-top:10px}
}


/* ==================== WILD HUNT HERO — FULL INTERACTIVE (overrides) ====================
   Drives whf-hero.js: dither canvas, grain, marks, reticle, swash, word.
   Monochrome. Later in the cascade than the earlier WHF blocks, so it wins. */
.whf-hero{
  position:relative;width:100%;
  height:min(100svh,920px);min-height:620px;
  overflow:hidden;isolation:isolate;container-type:inline-size;
  background:transparent;   /* page black shows through; .whf-hero-bg adds grid + lights */
  color:var(--whf-ink,#f2f2f2);
  -webkit-font-smoothing:antialiased;
  font-family:'Inter','Helvetica Neue',Helvetica,Arial,system-ui,sans-serif;
  --whf-ease:cubic-bezier(.65,0,.2,1);
  --whf-pad:clamp(18px,3.2vw,48px);
}
.whf-hero *{box-sizing:border-box}
.whf-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Picture band — grayscale; its bottom dissolves via the dither canvas */
.whf-picture{position:absolute;left:0;top:0;width:100%;overflow:hidden;z-index:0;height:62%;
  /* one long, eased fade for the whole band (painting + figures together) */
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 30%,rgba(0,0,0,.82) 48%,rgba(0,0,0,.55) 63%,rgba(0,0,0,.3) 76%,rgba(0,0,0,.12) 87%,rgba(0,0,0,.03) 95%,rgba(0,0,0,0) 100%);
          mask-image:linear-gradient(to bottom,#000 0%,#000 30%,rgba(0,0,0,.82) 48%,rgba(0,0,0,.55) 63%,rgba(0,0,0,.3) 76%,rgba(0,0,0,.12) 87%,rgba(0,0,0,.03) 95%,rgba(0,0,0,0) 100%)}
.whf-picture img{
  position:absolute;inset:0;width:100%;height:100%;max-width:none;
  object-fit:cover;object-position:50% 26%;display:block;
  filter:grayscale(1) contrast(1.08) brightness(.95);
  -webkit-mask-image:none;mask-image:none;   /* the .whf-picture mask does the fade */
}
.whf-picture .whf-tint{
  position:absolute;inset:0;
  background:linear-gradient(to bottom, rgba(11,11,11,0) 45%, color-mix(in srgb, var(--whf-bg,#0b0b0b) 30%, transparent) 82%, var(--whf-bg,#0b0b0b) 100%);
}
.whf-picture::after{content:none !important}   /* retire the old CSS-stripe edge */
.whf-dither{
  position:absolute;left:0;top:0;display:block;max-width:none;
  image-rendering:auto;z-index:1;   /* smooth upscale = clean gradient edge */
}
/* Riders, rendered as a crisp WHITE silhouette riding over the dissolve.
   brightness(0) invert(1) turns every opaque pixel pure white, alpha kept. */
.whf-picture .whf-cutout{
  position:absolute;inset:0;width:100%;height:100%;max-width:none;
  object-fit:cover;object-position:50% 26%;display:block;z-index:2;pointer-events:none;
  filter:brightness(0) invert(1) drop-shadow(0 2px 10px rgba(0,0,0,.45));
  opacity:.92;
  clip-path:inset(0 0 100% 0);
  transition:clip-path 1.1s linear .1s;
}
.whf-hero.is-in .whf-picture .whf-cutout{clip-path:inset(0 0 0 0)}
/* Detail pass: the same riders in dark grayscale, multiplied onto the white
   silhouette so their edges and shading read as recognisable figures. */
.whf-picture .whf-cutout-detail{
  position:absolute;inset:0;width:100%;height:100%;max-width:none;
  object-fit:cover;object-position:50% 26%;display:block;z-index:3;pointer-events:none;
  filter:grayscale(1) contrast(1.6) brightness(.45);
  opacity:.6;mix-blend-mode:multiply;
  clip-path:inset(0 0 100% 0);
  transition:clip-path 1.1s linear .1s;
}
.whf-hero.is-in .whf-picture .whf-cutout-detail{clip-path:inset(0 0 0 0)}
@media (prefers-reduced-motion:reduce){.whf-picture .whf-cutout,.whf-picture .whf-cutout-detail{transition:none}}

/* Grain */
.whf-grain{position:absolute;inset:0;width:100%;height:100%;display:block;max-width:none;z-index:2;pointer-events:none;mix-blend-mode:overlay;
  /* fade out before the hero ends so the next section continues without a seam */
  -webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 55%,transparent 100%)}

/* Marks — keep ONLY the pointer reticle; hide guide circles, edge lines, ticks */
.whf-marks{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;overflow:visible;display:block;color:var(--whf-ink,#f2f2f2)}
.whf-marks text{font-family:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;font-size:9px;letter-spacing:.14em;fill:var(--whf-ink,#f2f2f2)}
.whf-marks .whf-fade{opacity:0;transition:opacity .6s var(--whf-ease);transition-delay:var(--d,0s)}
.whf-hero.is-in .whf-marks .whf-fade{opacity:1}
.whf-marks .whf-ca,.whf-marks .whf-cb,.whf-marks .whf-gl,.whf-marks .whf-gr,.whf-marks .whf-tick{display:none !important}
/* no pointer crosshair and no click scanline (2026-10-31) */
.whf-marks .whf-ret,.whf-marks .whf-sl{display:none !important}

/* Wordmark canvas — static (no idle motion), with a layered neon glow:
   tight white core, mid bloom, wide soft halo. */
.whf-word{position:absolute;left:0;top:0;display:block;max-width:none;z-index:4;
  filter:drop-shadow(0 0 2px rgba(255,255,255,.9))
         drop-shadow(0 0 10px rgba(255,255,255,.45))
         drop-shadow(0 0 28px rgba(255,255,255,.25))
         drop-shadow(0 0 60px rgba(255,255,255,.12))}

/* Floating Brand Logo beside ZERO */
.whf-hero-logo{
  position:absolute;
  z-index:5;
  pointer-events:none;
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 0 3px rgba(255,255,255,.9))
         drop-shadow(0 0 14px rgba(255,255,255,.45))
         drop-shadow(0 0 32px rgba(255,255,255,.22));
  animation:whf-logo-float 3.6s ease-in-out infinite;
  will-change:transform;
}
@keyframes whf-logo-float{
  0%, 100%{ transform:translateY(0); }
  50%{ transform:translateY(-8px); }
}
@media (prefers-reduced-motion:reduce){
  .whf-hero-logo{ animation:none; }
}

.whf-swash{filter:drop-shadow(0 0 4px rgba(255,255,255,.55)) drop-shadow(0 0 14px rgba(255,255,255,.2))}

/* Flourish */
.whf-swash{position:absolute;left:0;top:0;overflow:visible;z-index:5;pointer-events:none;display:block}
.whf-swash path{fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1}
.whf-swash .whf-cut{stroke:var(--whf-bg,#0b0b0b);stroke-width:5.5}
.whf-swash .whf-pen{stroke:var(--whf-ink,#f2f2f2);stroke-width:1.35}
.whf-hero.is-in .whf-swash path{stroke-dashoffset:0;transition:stroke-dashoffset 1.25s var(--whf-ease) .95s}

/* Vertical captions */
.whf-vert{
  position:absolute;top:44%;height:32%;z-index:6;margin:0;max-width:8em;display:flex;gap:.7em;
  writing-mode:vertical-rl;overflow:hidden;opacity:.9;color:var(--whf-ink,#f2f2f2);
  font-family:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
  font-size:10px;line-height:1.55;letter-spacing:.16em;text-transform:uppercase;
}
.whf-vert.whf-l{left:var(--whf-pad);transform:rotate(180deg)}
.whf-vert.whf-r{right:var(--whf-pad)}
.whf-wipe{clip-path:inset(0 100% 0 0);transition:clip-path .7s var(--whf-ease);transition-delay:var(--d,0s)}
.whf-vert.whf-wipe{clip-path:inset(100% 0 0 0)}
.whf-hero.is-in .whf-wipe{clip-path:inset(0 0 0 0)}

/* Eye-catcher line under the wordmark (top set by whf-hero.js) */
.whf-tagline{
  position:absolute;left:0;right:0;top:78%;margin:0;padding:0 16px;z-index:6;pointer-events:none;
  text-align:center;
}
.whf-tag-main{
  margin:0;padding-left:.34em;   /* balances the trailing letter-spacing */
  font-family:'Space Grotesk','Inter',system-ui,sans-serif;font-weight:500;
  font-size:clamp(12px,1.25vw,18px);letter-spacing:.34em;text-transform:uppercase;line-height:1.5;
  color:rgba(242,242,242,.72);text-shadow:0 0 12px rgba(255,255,255,.28);
}
.whf-tag-main span{
  color:#fff;font-weight:700;
  text-shadow:0 0 4px rgba(255,255,255,.9),0 0 16px rgba(255,255,255,.45),0 0 36px rgba(255,255,255,.2);
}
.whf-tag-kicker{
  display:flex;align-items:center;justify-content:center;gap:14px;
  margin:10px 0 0;padding-left:.42em;
  font-family:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;font-weight:500;
  font-size:10.5px;letter-spacing:.42em;text-transform:uppercase;
  color:rgba(242,242,242,.5);
}
.whf-tag-kicker::before,.whf-tag-kicker::after{
  content:"";width:36px;height:1px;flex:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55));
}
.whf-tag-kicker::after{background:linear-gradient(270deg,transparent,rgba(255,255,255,.55))}
@container (max-width:720px){
  .whf-tag-main{font-size:12px;letter-spacing:.2em;padding-left:.2em}
  .whf-tag-kicker{font-size:9.5px;letter-spacing:.3em}
}

/* ============ HERO BACKGROUND: soft lighting + grid, hero only ============
   Sits behind the hero content (z-index:-1 inside the isolated hero) and
   fades to black at the bottom, so the sections below stay plain black. */
.whf-hero-bg{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(ellipse 55% 38% at 50% 74%, rgba(255,255,255,.055), transparent 70%),
    radial-gradient(ellipse 38% 55% at 0% 30%, rgba(255,255,255,.04), transparent 70%),
    radial-gradient(ellipse 38% 55% at 100% 68%, rgba(255,255,255,.035), transparent 70%);
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 70%,rgba(0,0,0,.5) 86%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 0%,#000 70%,rgba(0,0,0,.5) 86%,transparent 100%);
}
/* homepage below the hero = plain black: no page-wide grid, no fixed top glow,
   so every section sits on the same #050507 and transitions show no seams */
body:has(.whf-hero)::before{display:none}
body:has(.whf-hero){background-image:none}

/* Homepage top bar: fully transparent at the top (no scrim, no line);
   app.js adds .nav-scrolled after 40 px of scroll -> solid glass bar. */
body:has(.whf-hero) .site-nav::before,
body:has(.whf-hero) .site-nav::after{content:none !important;display:none !important}
body:has(.whf-hero) .site-nav{
  transition:background-color .3s ease, backdrop-filter .3s ease, -webkit-backdrop-filter .3s ease, border-color .3s ease, box-shadow .3s ease !important;
  border-bottom:1px solid transparent !important;
}
body:has(.whf-hero) .site-nav.nav-scrolled{
  background:rgba(5,5,7,0.86) !important;
  backdrop-filter:blur(18px) saturate(1.2) !important;
  -webkit-backdrop-filter:blur(18px) saturate(1.2) !important;
  border-bottom-color:rgba(255,255,255,0.07) !important;
  box-shadow:0 10px 30px -12px rgba(0,0,0,0.7) !important;
}
/* brighter outline on the Features / How it Works pill (was 0.07) */
body:has(.whf-hero) .site-nav .nav-links{
  border-color:rgba(255,255,255,0.24) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.08) !important;
}
/* brighter Discord label + icon in the top bar (was #9a9a9a) */
body:has(.whf-hero) .site-nav .nav-discord-btn{color:rgba(255,255,255,0.9) !important}
body:has(.whf-hero) .site-nav .nav-discord-btn:hover{color:#fff !important}
.whf-hero-bg::before{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:64px 64px;background-position:center center;
  -webkit-mask-image:radial-gradient(ellipse 78% 68% at 50% 55%, #000 25%, rgba(0,0,0,.4) 60%, transparent 92%);
          mask-image:radial-gradient(ellipse 78% 68% at 50% 55%, #000 25%, rgba(0,0,0,.4) 60%, transparent 92%);
}
.whf-hero-bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(115deg, transparent 38%, rgba(255,255,255,.022) 48%, transparent 58%),
    linear-gradient(245deg, transparent 42%, rgba(255,255,255,.016) 50%, transparent 58%);
}

/* No footer in this hero */
.whf-hero .whf-foot{display:none !important}

@container (max-width:720px){
  .whf-vert{display:none}
  .whf-marks .whf-tick text{display:none}
}
@media (prefers-reduced-motion:reduce){
  .whf-marks .whf-fade,.whf-wipe,.whf-swash path{transition:none !important}
}


/* ============ FEATURE BENTO (8 cards, 1 highlighted) ============
   Vanilla black port of 21st.dev's "Feature Bento Grid with Animated Waves"
   (shadcnspace / feature-28, id 43227). Grid of 5 columns on desktop,
   collapsing to 2 cols and then 1 col on narrower screens.
   The highlighted card uses layered radial gradients and a slow drift
   instead of WebGL — same vibe, zero runtime cost. */
#feature-bento{position:relative;z-index:11;padding:90px 0;background:transparent}
#feature-bento .fb-container{max-width:1200px;margin:0 auto;padding:0 24px}
#feature-bento .fb-head{text-align:center;max-width:620px;margin:0 auto 48px}
#feature-bento .fb-eyebrow{
  display:inline-block;
  font-family:'Geist Mono','JetBrains Mono',monospace;
  font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,255,255,.55);
  padding:6px 14px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:999px;
  margin:0 0 1.1rem;
}
#feature-bento .fb-title{
  font-family:'Geist','Outfit',sans-serif;
  font-size:clamp(1.9rem,3.4vw,2.6rem);
  font-weight:700;letter-spacing:-.028em;line-height:1.08;
  background:linear-gradient(180deg,#ffffff,rgba(255,255,255,.5));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  margin:0 0 .75rem;
}
#feature-bento .fb-sub{
  color:rgba(255,255,255,.55);
  font-size:1rem;line-height:1.6;margin:0;
  max-width:520px;margin-left:auto;margin-right:auto;
}
#feature-bento .fb-grid{
  display:grid;grid-template-columns:repeat(5,1fr);gap:14px;
}
#feature-bento .fb-card{
  position:relative;
  background:rgba(10,10,14,.6);
  border:1px solid rgba(255,255,255,.07);
  border-radius:18px;
  padding:22px;
  min-height:210px;
  display:flex;flex-direction:column;justify-content:space-between;gap:24px;
  transition:border-color .3s ease, transform .3s ease, background .3s ease;
  overflow:hidden;
}
#feature-bento .fb-card:hover{
  border-color:rgba(255,255,255,.18);
  background:rgba(14,14,20,.75);
  transform:translateY(-2px);
}
#feature-bento .fb-icon{
  position:relative;z-index:1;
  width:40px;height:40px;border-radius:11px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:center;color:#fff;
  flex-shrink:0;
}
#feature-bento .fb-icon svg{width:20px;height:20px}
#feature-bento .fb-text{position:relative;z-index:1}
#feature-bento .fb-text h3{
  font-family:'Geist','Outfit',sans-serif;
  font-size:1.05rem;font-weight:600;letter-spacing:-.012em;
  color:#fff;margin:0 0 6px;
}
#feature-bento .fb-text p{
  font-size:.88rem;line-height:1.55;
  color:rgba(255,255,255,.55);margin:0;
}
#feature-bento .fb-span-2{grid-column:span 2}

/* Highlighted card: subtle moving wave in black / white */
#feature-bento .fb-highlight{
  background:linear-gradient(135deg,#0b0b0e,#141418);
  border-color:rgba(255,255,255,.14);
}
#feature-bento .fb-highlight .fb-icon{
  background:rgba(255,255,255,.14);
  border-color:rgba(255,255,255,.22);
}
#feature-bento .fb-highlight .fb-text h3{color:#fff}
#feature-bento .fb-highlight .fb-text p{color:rgba(255,255,255,.78)}
#feature-bento .fb-highlight .fb-wave{
  position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse 70% 60% at 20% 110%,rgba(255,255,255,.14),transparent 60%),
    radial-gradient(ellipse 60% 50% at 100% -10%,rgba(255,255,255,.08),transparent 65%),
    radial-gradient(circle at 60% 50%,rgba(255,255,255,.04),transparent 50%);
  animation:fb-wave 9s ease-in-out infinite;
}
#feature-bento .fb-highlight::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.3) 100%);
}
@keyframes fb-wave{
  0%,100%{opacity:.85;transform:translateX(0) translateY(0)}
  50%{opacity:1;transform:translateX(-18px) translateY(-6px)}
}
@media (prefers-reduced-motion:reduce){
  #feature-bento .fb-highlight .fb-wave{animation:none}
}
@media (max-width:900px){
  #feature-bento .fb-grid{grid-template-columns:repeat(2,1fr)}
  #feature-bento .fb-span-2{grid-column:span 2}
}
@media (max-width:540px){
  #feature-bento{padding:60px 0}
  #feature-bento .fb-grid{grid-template-columns:1fr}
  #feature-bento .fb-span-2{grid-column:span 1}
  #feature-bento .fb-card{min-height:170px}
}


/* ============ 2026-11-01: trust-grid glowing border + clean hand-off to pricing ============
   Goal: the stats pill has a visible glow around its edge, and the blue radial glow of the
   pricing section below is NOT cut off at the section boundary — it fades in smoothly and
   meets a matching blue halo coming down from the trust-strip above. */

/* 1 — Brighter grid border + layered outer glow + inner top highlight on the pill */
.trust-grid{
  position:relative;
  border:1px solid rgba(255,255,255,0.22) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.04),
    0 0 60px -8px rgba(255,255,255,0.12),
    0 30px 80px -28px rgba(59,130,246,0.32),
    inset 0 1px 0 rgba(255,255,255,0.12) !important;
}
.trust-grid::before{
  content:"";position:absolute;left:14%;right:14%;top:-1px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.65),transparent);
  pointer-events:none;z-index:1;
}

/* 2 — Blue halo under the pill. Extends BELOW the trust-strip's box into the pricing
   area; renders behind the (transparent) pricing section, so it meets the pricing
   radial in the middle of the gap for a seamless hand-off. */
.trust-strip::after{
  content:"";position:absolute;left:0;right:0;bottom:-220px;height:360px;
  background:
    radial-gradient(ellipse 65% 95% at 50% 100%, rgba(37,99,235,0.3), transparent 70%),
    radial-gradient(ellipse 30% 55% at 50% 100%, rgba(96,165,250,0.2), transparent 70%);
  pointer-events:none;z-index:0;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,black 18%,black 100%);
          mask-image:linear-gradient(to bottom,transparent 0%,black 18%,black 100%);
}

/* 3 — Soft fade on the TOP (and bottom) of the pricing radial so the gradient has no
   hard horizontal edge where overflow:hidden on the pricing section used to clip it. */
.pricing-magic-radial{
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,black 160px,black calc(100% - 60px),transparent 100%) !important;
          mask-image:linear-gradient(to bottom,transparent 0%,black 160px,black calc(100% - 60px),transparent 100%) !important;
}