/* Self-hosted type system — no Google Fonts CDN round-trip, and these are
   deliberately not the obvious template picks. Fraunces is a soft, warm
   editorial serif with real optical character (not the ubiquitous
   Playfair Display look); Geist is the sans-serif behind Vercel's own
   product UI — built for exactly this "considered, high-precision tech
   product" register. Geist Mono is reserved for technical/status labels
   (pipeline stage codes, HUD readouts) only, where a monospace cadence
   actually means something rather than just decorating. */
@font-face {
  font-family: 'Fraunces Variable';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('vendor/fonts/fraunces-wght.woff2') format('woff2-variations');
}
@font-face {
  font-family: 'Fraunces Variable';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('vendor/fonts/fraunces-wght-italic.woff2') format('woff2-variations');
}
@font-face {
  font-family: 'Geist Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('vendor/fonts/geist-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('vendor/fonts/geist-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('vendor/fonts/geist-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('vendor/fonts/geist-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('vendor/fonts/geist-mono-500.woff2') format('woff2');
}

:root {
  /* Neutral near-black base (no navy/blue tint), lifted slightly off pure
     black on surfaces so depth reads even before any glow hits them. */
  --bg-dark: #070707;
  --card-bg: rgba(19, 19, 21, 0.72);
  /* Hairline stays neutral at rest — it lights up in accent colour on
     hover instead (see per-component rules), so the "light" always reads
     as something the cursor/attention caused, not ambient decoration. */
  --border-glass: rgba(255, 255, 255, 0.14);
  --border-glow: rgba(59, 130, 246, 0.45);

  /* Green read as the wrong register entirely for this brand. One
     disciplined hue again — a confident royal blue this time: deep
     enough to feel serious, bright enough to stay legible as both small
     accent text on black AND dark button text against it (checked —
     an earlier, darker blue here measured under 4.5:1 either way; this
     value clears ~5.7:1 both directions). Never the icy pastel cyan this
     project already tried and moved away from, never paired with a
     second competing colour. Variable names are legacy from earlier
     palettes (renaming touches ~85 call sites for no functional gain). */
  --cobalt-primary: #0b1f4d;
  --cobalt-light: #7fb0fb;
  /* Primary accent — royal blue. Deep and considered, not a neon or
     "cold SaaS" cyan, not a pastel. */
  --cyan-accent: #3b82f6;
  --accent-bright: #ffffff;
  --accent-deep: #071233;
  --indigo-accent: #60a5fa;
  --violet-accent: #2563eb;
  --emerald-accent: #3b82f6;
  --red-accent: #f43f5e;
  --gold-accent: #3b82f6;

  /* Bright white headline text; light (never dim) grey body text. */
  --text-primary: #fafafa;
  --text-muted: #c2c2c8;

  --font-main: 'Geist Sans', -apple-system, sans-serif;
  --font-heading: 'Geist Sans', -apple-system, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, monospace;
  --font-display: 'Fraunces Variable', serif;

  /* Elevation & Surface Tokens */
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 26px;
  --radius-pill: 999px;

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

  --glass-blur: blur(18px);
  --glass-border: 1px solid rgba(255, 255, 255, 0.08);
  --glass-surface: rgba(16, 16, 16, 0.55);

  --shadow-glow-sm: 0 4px 20px rgba(59, 130, 246, 0.26);
  --shadow-glow-md: 0 12px 40px rgba(59, 130, 246, 0.3);
  --shadow-glow-lg: 0 20px 60px rgba(59, 130, 246, 0.34);
  --shadow-elevated: 0 24px 70px rgba(0, 0, 0, 0.55);
  --shadow-accent-glow: 0 10px 40px rgba(59, 130, 246, 0.28);
  --radius-xl: 36px;
}

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

html, body {
  /* scroll-behavior deliberately omitted here: on desktop, Lenis drives
     smooth scroll in JS, and having both fight over the same scroll
     position is what caused the stuttery, "hectic" feel. On touch devices
     and under reduced-motion, Lenis never initializes (see below and
     initSmoothScroll() in script.js), so native smooth scroll is restored
     there instead — otherwise anchor-link navigation would just jump. */
  background-color: var(--bg-dark);
  color: var(--text-primary);
  font-family: var(--font-main);
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
  -webkit-text-size-adjust: 100%;
}

/* dashboard.html loads Plus Jakarta Sans itself and is explicitly out of
   scope for this redesign — pin its body font so the shared --font-main
   token change above (Plus Jakarta Sans -> Geist Sans) doesn't silently
   alter it even though the file itself is untouched. */
.dashboard-body {
  font-family: 'Plus Jakarta Sans', sans-serif;
}

body {
  position: relative;
  min-height: 100vh;
}

/* Global Color Utilities */
.text-cyan { color: var(--cyan-accent) !important; }
.text-emerald { color: var(--emerald-accent) !important; }
.text-red { color: var(--red-accent) !important; }

/* Icon system — line icons (Lucide, ISC license) referenced from the
   sprite injected right after <body>. Sized in em so every icon tracks
   the font-size of whatever badge/button/card it sits in, and colored
   via currentColor so existing text-color classes (text-cyan etc.) and
   inherited colors just work without any extra icon-specific CSS. */
.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

/* Scroll Reveal Animations */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(60px) scale(0.95);
  filter: blur(6px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              filter 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform, filter;
  transition-delay: calc(var(--stagger-index, 0) * 0.07s);
}

.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0px);
}

/* Static sweep — no longer animated. A color-cycling gradient running on
   every heading read as a template gimmick; a fixed, quiet gradient is
   what a considered brand would actually ship. A single royal-blue
   highlight passes through the middle of each heading (used sitewide,
   so this stays restrained — the tonal treatment lives on
   .gradient-text). */
.shimmer-text {
  background: linear-gradient(100deg, var(--text-primary) 15%, var(--cyan-accent) 50%, var(--text-primary) 85%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Primary CTA — deep and bright royal blue plus white light travelling
   continuously around the button, never a static fill. First and last
   stops match so the background-position loop is seamless. A single
   blue hue at different depths, not a second competing colour — that
   read as neon/cartoonish rather than the private-bank register this
   brand needs. Text stays near-black throughout: checked against every
   stop (white ~21:1, both blue tones 5.7-8.3:1 — blue needs brighter
   stops than green did to clear 4.5:1 with the same dark text, since
   blue carries far less of the eye's luminance weighting) so legibility
   never dips mid-cycle. Kept to background-position (paint, not layout)
   on a small element — cheap even running indefinitely. */
.btn-shimmer-trigger,
.btn-demo-hero {
  background-image: linear-gradient(115deg,
    var(--cyan-accent) 0%,
    var(--indigo-accent) 25%,
    #ffffff 50%,
    var(--indigo-accent) 75%,
    var(--cyan-accent) 100%);
  background-size: 220% 100%;
  animation: btnSheen 3s linear infinite;
  color: #0a0a0a !important;
  font-weight: 600;
  border: none;
  box-shadow: 0 10px 30px rgba(59, 130, 246, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  transition: transform 0.2s var(--ease-premium), box-shadow 0.2s ease, filter 0.2s ease;
}

.btn-shimmer-trigger:hover,
.btn-demo-hero:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 46px rgba(59, 130, 246, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.32);
  filter: brightness(1.08);
}

@keyframes btnSheen {
  from { background-position: 0% 0%; }
  to { background-position: -220% 0%; }
}

@media (prefers-reduced-motion: reduce) {
  .btn-shimmer-trigger, .btn-demo-hero, .btn-primary { animation: none !important; }
}

/* Shader backdrop — see initShaderBackground() in script.js. Sits behind
   content, above nothing; the CSS orb/grid/grain stack underneath it
   only shows through when the shader didn't start (no WebGL, touch
   device, or prefers-reduced-motion), via .shader-active below. */
#shader-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  display: none;
}

.shader-active #shader-canvas { display: block; }
/* One atmosphere system at a time — the shader already provides motion
   and depth, so the static orbs would just be redundant clutter under it. */
.shader-active .glow-orb { display: none; }

/* Ambient light — reduced from four differently-hued orbs to two, both
   the same precise accent colour at different, low opacities. "One
   accent used sparingly" only works if the atmosphere itself commits to
   one hue instead of quietly reintroducing three more. Soft
   radial-gradient fields instead of a blurred solid circle: the browser
   composites a gradient for a fraction of the cost of filter: blur() at
   a 180px radius, which was a real contributor to scroll jank earlier
   in this project. Motion is transform/opacity only (compositor-only,
   no repaint) on a slow, independent loop so it reads as "alive"
   without costing anything on scroll or interaction. */
.glow-orb {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  opacity: 0.24;
  will-change: transform;
}
.glow-primary {
  width: 900px;
  height: 900px;
  top: -220px;
  left: -220px;
  background: radial-gradient(circle, var(--cyan-accent) 0%, rgba(59, 130, 246, 0.2) 35%, transparent 70%);
  animation: orbDriftA 38s ease-in-out infinite alternate;
}
.glow-secondary {
  width: 760px;
  height: 760px;
  bottom: -240px;
  right: -220px;
  opacity: 0.7;
  background: radial-gradient(circle, var(--indigo-accent) 0%, rgba(59, 130, 246, 0.18) 35%, transparent 70%);
  animation: orbDriftB 32s ease-in-out infinite alternate;
}

@keyframes orbDriftA {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(50px, 35px) scale(1.06); }
}
@keyframes orbDriftB {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-45px, -50px) scale(1.05); }
}

/* Fine film-grain texture — a static tiled SVG. Deliberately plain opacity,
   NOT mix-blend-mode: a blend mode forces the browser to recompute against
   whatever's scrolling underneath every frame, which is the exact kind of
   cost this pass is removing elsewhere. Opacity alone composites once. */
.grain-overlay {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Vignette — deepens the extreme edges so content reads as sitting in a
   lit space rather than a flat rectangle. */
.vignette-overlay {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 45%, rgba(0, 0, 0, 0.55) 100%);
}

.hidden { display: none !important; }

/* FLOATING GLASSMORPHIC ACTIVITY RIBBON (DESKTOP ONLY) */
.activity-ribbon {
  position: fixed;
  bottom: 28px;
  left: 28px;
  z-index: 1400;
  background: rgba(14, 14, 14, 0.88);
  border: 1px solid var(--border-glass);
  box-shadow: 0 8px 32px rgba(59, 130, 246, 0.16);
  backdrop-filter: blur(16px);
  padding: 10px 20px;
  border-radius: 30px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.82rem;
  color: var(--text-primary);
  transition: all 0.4s ease;
}

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

/* Navigation Navbar */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 5%;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100;
  background: rgba(4, 4, 4, 0.85);
  backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), 0 20px 40px rgba(0, 0, 0, 0.3);
  gap: 24px;
}

/* ENLARGED PROMINENT LOGO (DESKTOP) */
/* ENLARGED PROMINENT LOGO (DESKTOP) */
.logo {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.4rem; /* Increased size slightly */
  letter-spacing: 0.8px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.logo-knot-svg {
  width: 54px;
  height: 54px;
  flex-shrink: 0;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.logo:hover .logo-knot-svg {
  transform: rotate(180deg) scale(1.1);
}

.nav-links {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: nowrap;
}

.nav-links a {
  position: relative;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: -0.1px;
  transition: color 0.2s var(--ease-premium);
  text-align: center;
  white-space: nowrap;
}

.nav-links a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -5px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--cyan-accent), var(--violet-accent));
  transition: right 0.2s var(--ease-premium);
}

.nav-links a:hover { color: var(--text-primary); }
.nav-links a:hover::after { right: 0; }

/* Master Dropdown Mechanics */
.nav-dropdown {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.nav-dropdown-trigger {
  color: var(--text-muted);
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: -0.1px;
  transition: color 0.2s var(--ease-premium);
  padding: 10px 0;
  display: inline-block;
}

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

.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: rgba(14, 14, 14, 0.95);
  border: 1px solid var(--border-glass);
  border-radius: 14px;
  padding: 12px;
  min-width: 180px;
  backdrop-filter: blur(24px);
  box-shadow: 0 15px 35px rgba(0,0,0,0.5);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all 0.3s var(--ease-premium);
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nav-dropdown:hover .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.nav-dropdown-menu a {
  color: var(--text-muted) !important;
  padding: 8px 12px;
  border-radius: 8px;
  text-align: left !important;
  font-size: 0.85rem !important;
  transition: all 0.2s !important;
  white-space: nowrap;
}

.nav-dropdown-menu a::after {
  display: none !important; /* Disables sliding underline inside dropdown */
}

.nav-dropdown-menu a:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary) !important;
}

.btn-outline.nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
  padding: 8px 18px;
}

.login-nav-btn {
  color: var(--text-primary);
}

.login-nav-btn:hover {
  color: var(--cyan-accent);
}


/* Mobile Hamburger Toggle Button */
.mobile-menu-btn {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 22px;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 300;
  padding: 2px;
}

.mobile-menu-btn span {
  display: block;
  width: 100%;
  height: 2.5px;
  background: var(--cyan-accent);
  border-radius: 2px;
  transition: all 0.3s;
}

/* Buttons & Interactive Styling */
.btn {
  display: inline-block;
  padding: 14px 32px;
  border-radius: 40px;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  transition: all 0.2s var(--ease-premium);
  border: none;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  white-space: nowrap;
  text-align: center;
}

.btn-primary {
  background-image: linear-gradient(115deg,
    var(--cyan-accent) 0%,
    var(--indigo-accent) 25%,
    #ffffff 50%,
    var(--indigo-accent) 75%,
    var(--cyan-accent) 100%);
  background-size: 220% 100%;
  animation: btnSheen 3s linear infinite;
  color: #0a0a0a;
  box-shadow: 0 10px 30px rgba(59, 130, 246, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  transition: transform 0.2s var(--ease-premium), box-shadow 0.2s ease, filter 0.2s ease;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 46px rgba(59, 130, 246, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.32);
  filter: brightness(1.08);
}

/* Secondary / outline CTAs share the same loop language via an animated
   conic-gradient ring instead of a full sheen fill — same ~3s cadence
   and single-hue royal-blue depth stops, just a lighter touch for
   lower-emphasis actions so the whole page doesn't shout at once. */
@property --btn-ring-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.btn-secondary,
.btn-outline {
  position: relative;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
  border: 1px solid transparent;
  backdrop-filter: blur(12px);
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s var(--ease-premium);
}

.btn-outline {
  color: var(--cyan-accent);
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-secondary::before,
.btn-outline::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--btn-ring-angle),
    var(--cyan-accent), var(--indigo-accent), #ffffff, var(--cyan-accent), var(--indigo-accent), var(--cyan-accent));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: btnRingSpin 3s linear infinite;
  pointer-events: none;
}

@keyframes btnRingSpin {
  to { --btn-ring-angle: 360deg; }
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.12);
  transform: translateY(-2px);
  box-shadow: 0 12px 34px rgba(59, 130, 246, 0.3);
}

.btn-outline:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
  box-shadow: 0 12px 34px rgba(59, 130, 246, 0.3);
}

@media (prefers-reduced-motion: reduce) {
  .btn-secondary::before, .btn-outline::before { animation: none !important; }
}

.btn-sm { padding: 8px 18px; font-size: 0.8rem; }
.btn-lg { padding: 18px 42px; font-size: 1.05rem; }

/* Hero Section */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 140px 8% 100px 8%;
  position: relative;
  z-index: 2;
  background: transparent;
}

.hero-content {
  max-width: 860px;
  text-align: center;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 18px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--cyan-accent);
  border-radius: var(--radius-pill);
  font-size: 0.85rem;
  margin-bottom: 24px;
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-glow-sm);
}

.pulse-indicator {
  width: 8px;
  height: 8px;
  background: var(--cyan-accent);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--cyan-accent);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { opacity: 0.3; }
  50% { opacity: 1; }
  100% { opacity: 0.3; }
}

.time-banner {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 20px;
  background: rgba(14, 14, 14, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 20px;
  font-size: 0.85rem;
  color: var(--cyan-accent);
  margin-bottom: 24px;
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px rgba(59, 130, 246, 0.12);
}

h1 {
  font-family: var(--font-display);
  font-weight: 460;
  font-optical-sizing: auto;
  /* Fluid between tablet and large desktop; the max-width: 900px block
     further down still owns small-phone sizing untouched. */
  font-size: clamp(2.6rem, 1rem + 2.5vw, 4.4rem);
  line-height: 1.1;
  margin-bottom: 24px;
  letter-spacing: -0.5px;
}

/* Hero headline word reveal — see initHeroWordReveal() in script.js.
   Words sit invisible until .hero-content picks up .is-visible from the
   existing reveal-on-scroll system, then rise in with a per-word stagger
   via --word-index. A calm, "keynote" entrance rather than the whole
   line just appearing at once. */
.hero h1 .word-reveal {
  display: inline-block;
  opacity: 0;
  transform: translateY(16px);
  filter: blur(6px);
}

.hero-content.is-visible h1 .word-reveal {
  animation: heroWordRise 0.8s var(--ease-premium) forwards;
  animation-delay: calc(var(--word-index, 0) * 0.055s);
}

@keyframes heroWordRise {
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

.gradient-text {
  /* A tight, single-hue royal-blue sweep, deep to bright — not a second
     competing colour, just one considered tone deepening and lifting.
     Both stops stay bright enough to read cleanly against true black at
     every point in the sweep. */
  background: linear-gradient(100deg, var(--cyan-accent) 0%, var(--cyan-accent) 45%, var(--indigo-accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-subtext {
  font-size: 1.2rem;
  color: #f2f2f2;
  line-height: 1.6;
  margin-bottom: 40px;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}

.hero-actions {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

main { position: relative; z-index: 2; width: 100%; }
section { position: relative; z-index: 2; background: transparent; width: 100%; }

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

.header-status-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.section-tag {
  color: var(--cyan-accent);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 700;
  display: inline-block;
}

.auto-play-indicator {
  font-size: 0.75rem;
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid var(--cyan-accent);
  padding: 3px 10px;
  border-radius: 12px;
  letter-spacing: 1px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.2);
}

.mini-pulse {
  width: 6px;
  height: 6px;
  background: var(--cyan-accent);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--cyan-accent);
  animation: pulse 1.5s infinite;
}

.section-header h2 {
  font-family: var(--font-display);
  font-weight: 460;
  font-optical-sizing: auto;
  font-size: clamp(1.8rem, 0.9rem + 1.6vw, 2.8rem);
  margin-bottom: 16px;
  letter-spacing: -0.3px;
}

.section-header p {
  color: var(--text-muted);
  font-size: 1.1rem;
}

/* Workflow Section */
.workflow-section { padding: 120px 8%; }

.workflow-layout {
  max-width: 860px;
  margin: 0 auto;
}

.workflow-rail {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.rail-track {
  position: absolute;
  left: 28px;
  top: 30px;
  bottom: 30px;
  width: 2px;
  background: rgba(255, 255, 255, 0.08);
  z-index: 0;
}

.rail-fill {
  width: 100%;
  height: 20%;
  background: linear-gradient(180deg, var(--accent-bright), var(--cyan-accent));
  transition: height 0.4s ease;
  box-shadow: 0 0 14px var(--cyan-accent);
}

.step-card {
  position: relative;
  z-index: 1;
  background: var(--card-bg);
  border: 1px solid var(--border-glass);
  border-radius: 20px;
  padding: 28px 32px;
  backdrop-filter: blur(20px);
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.step-card.active {
  border-color: var(--cyan-accent);
  background: rgba(14, 14, 14, 0.9);
  box-shadow: 0 12px 40px rgba(59, 130, 246, 0.17), inset 0 0 1px var(--cyan-accent);
}

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

.step-id {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--cyan-accent);
}

.status-pill {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  padding: 4px 14px;
  border-radius: 14px;
  font-weight: 500;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.state-incoming { background: rgba(168, 168, 173, 0.15); color: var(--cobalt-light); border: 1px solid rgba(168, 168, 173, 0.3); }
.state-missed { background: rgba(244, 63, 94, 0.15); color: var(--red-accent); border: 1px solid rgba(244, 63, 94, 0.3); }
.state-active { background: rgba(140, 140, 146, 0.15); color: var(--violet-accent); border: 1px solid rgba(140, 140, 146, 0.3); }
.state-sent { background: rgba(255, 255, 255, 0.15); color: var(--cyan-accent); border: 1px solid rgba(255, 255, 255, 0.2); }
.state-secured { background: rgba(16, 185, 129, 0.15); color: #10b981; border: 1px solid rgba(16, 185, 129, 0.3); }

.step-card h3 { font-size: 1.3rem; margin-bottom: 8px; }
.step-card p { color: var(--text-muted); font-size: 1rem; line-height: 1.5; margin-bottom: 16px; }

.step-hud {
  font-family: var(--font-mono);
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--text-muted);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 12px;
}

.hud-highlight { color: var(--text-primary); font-weight: 600; }

/* 24/7 VOICE AI SHOWCASE STYLING */
.voice-section { padding: 120px 8%; }

.voice-card-container {
  max-width: 920px;
  margin: 0 auto;
  padding: 48px;
  border-color: var(--cyan-accent);
  box-shadow: 0 0 40px rgba(59, 130, 246, 0.17);
}

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

.voice-badge {
  margin-bottom: 16px;
  display: inline-block;
}

.voice-card-title {
  font-size: 2rem;
  margin-bottom: 16px;
  font-family: var(--font-heading);
}

.voice-card-desc {
  color: var(--text-muted);
  line-height: 1.6;
  font-size: 0.98rem;
  margin-bottom: 24px;
}

.voice-feature-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

.voice-feature-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
}

.voice-check { color: var(--cyan-accent); font-weight: bold; }

.more-voice-samples-box {
  margin-top: 20px;
}

.more-samples-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.voice-telemetry-box {
  background: rgba(4, 4, 4, 0.8);
  border: 1px solid var(--border-glass);
  border-radius: 24px;
  padding: 32px;
  text-align: center;
}

.voice-telemetry-tag {
  font-size: 0.75rem;
  letter-spacing: 2px;
  color: var(--cyan-accent);
  font-weight: 700;
}

.voice-mic-icon { font-size: 3rem; margin: 16px 0; }

.voice-equalizer {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 6px;
  height: 40px;
  margin-bottom: 16px;
}

.eq-bar {
  width: 6px;
  border-radius: 3px;
  transition: height 0.2s ease;
}

.eq-1 { background: var(--cyan-accent); height: 60%; animation: pulse 1.2s infinite ease-in-out; }
.eq-2 { background: var(--cobalt-light); height: 90%; animation: pulse 0.8s infinite ease-in-out; }
.eq-3 { background: var(--violet-accent); height: 40%; animation: pulse 1.5s infinite ease-in-out; }
.eq-4 { background: var(--cyan-accent); height: 100%; animation: pulse 0.9s infinite ease-in-out; }
.eq-5 { background: var(--emerald-accent); height: 70%; animation: pulse 1.1s infinite ease-in-out; }
.eq-6 { background: var(--cobalt-light); height: 50%; animation: pulse 1.3s infinite ease-in-out; }

/* INTERACTIVE AUDIO VOICE SAMPLE PLAYER */
.voice-audio-player {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.17);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 16px;
  text-align: left;
}

.audio-player-label {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 1.5px;
  color: var(--cyan-accent);
  font-weight: 700;
  margin-bottom: 10px;
  text-align: center;
}

.sample-selector-pills {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-bottom: 12px;
}

.sample-pill {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-glass);
  color: var(--text-muted);
  font-size: 0.75rem;
  padding: 4px 10px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s;
}

.sample-pill.active {
  background: rgba(255, 255, 255, 0.15);
  border-color: var(--cyan-accent);
  color: var(--cyan-accent);
}

.audio-controls-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.audio-play-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--cyan-accent);
  color: #0a0a0a;
  border: none;
  font-weight: bold;
  font-size: 0.9rem;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.2s;
  flex-shrink: 0;
}

.audio-play-btn:hover { transform: scale(1.1); }

.audio-waveform-progress {
  flex: 1;
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}

.audio-progress-fill {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, var(--accent-deep), var(--cyan-accent));
  transition: width 0.1s linear;
}

.audio-time-display {
  position: absolute;
  right: 0;
  top: -18px;
  font-size: 0.68rem;
  color: var(--text-muted);
}

.sample-transcript-box {
  font-size: 0.78rem;
  color: var(--text-primary);
  line-height: 1.4;
  font-style: italic;
  background: rgba(0, 0, 0, 0.4);
  padding: 8px 12px;
  border-radius: 8px;
  border-left: 2px solid var(--cyan-accent);
}

/* SPEECH TO CRM PARSER SIMULATOR */
.crm-parser-wrapper {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.parser-pills-row {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.parser-pill {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-glass);
  color: var(--text-muted);
  font-size: 0.8rem;
  padding: 8px 16px;
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.3s;
}

.parser-pill.active {
  background: rgba(255, 255, 255, 0.15);
  border-color: var(--cyan-accent);
  color: var(--cyan-accent);
  box-shadow: 0 0 15px rgba(59, 130, 246, 0.17);
}

.parser-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.parser-panel {
  background: rgba(4, 4, 4, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 20px;
}

.panel-tag-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.7rem;
  letter-spacing: 1.5px;
  color: var(--text-muted);
  font-weight: 700;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding-bottom: 8px;
}

.parser-transcript-text {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--text-primary);
  font-style: italic;
  min-height: 100px;
}

.crm-fields-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.crm-field-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.82rem;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
}

.f-label { color: var(--text-muted); }

/* CALCULATOR STEPPER BUTTONS */
.stepper-badge-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.stepper-btn-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.stepper-btn {
  width: 22px;
  height: 14px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--cyan-accent);
  border-radius: 4px;
  font-size: 0.55rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  padding: 0;
  line-height: 1;
}

.stepper-btn:hover {
  background: var(--cyan-accent);
  color: #0a0a0a;
}

/* INTERACTIVE FAQS ACCORDION SECTION STYLING */
.faq-section { padding: 120px 8%; }

.faq-accordion {
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.faq-card {
  background: var(--card-bg);
  border: 1px solid var(--border-glass);
  border-radius: 20px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.faq-card.open {
  border-color: var(--cyan-accent);
  box-shadow: 0 8px 30px rgba(59, 130, 246, 0.15);
}

.faq-question-btn {
  width: 100%;
  padding: 22px 28px;
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 600;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.faq-icon {
  font-size: 1.4rem;
  color: var(--cyan-accent);
  transition: transform 0.3s;
}

.faq-card.open .faq-icon {
  transform: rotate(45deg);
}

.faq-answer-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.22, 1, 0.36, 1), padding 0.3s;
  padding: 0 28px;
}

.faq-card.open .faq-answer-panel {
  max-height: 200px;
  padding: 0 28px 24px 28px;
}

.faq-answer-panel p {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* EXIT-INTENT MODAL */
.exit-modal-card {
  max-width: 480px !important;
  text-align: center;
}

.exit-modal-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
}

.exit-cta-btn { width: 100%; }

/* REVENUE LOSS AUDIT MODAL */
.audit-modal-card {
  max-width: 520px !important;
}

.audit-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.audit-stat-box {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 12px;
  border-radius: 12px;
  text-align: center;
}

.a-label { display: block; font-size: 0.7rem; color: var(--text-muted); margin-bottom: 4px; }
.a-val { font-family: var(--font-heading); font-size: 1.1rem; font-weight: 700; }

.audit-breakdown-bar-box {
  background: rgba(4, 4, 4, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.17);
  padding: 16px;
  border-radius: 14px;
  margin-bottom: 20px;
}

.a-sublabel { font-size: 0.8rem; color: var(--text-primary); display: block; margin-bottom: 8px; }

.audit-progress-track {
  width: 100%;
  height: 10px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 8px;
}

.audit-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--cyan-accent), var(--indigo-accent));
  transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.audit-yield-text {
  font-size: 0.85rem;
  color: var(--indigo-accent);
  font-weight: 700;
  display: block;
  text-align: right;
}

.audit-modal-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

/* ROYAL RaSH CHATBOT WIDGET */
.ai-chat-widget {
  position: fixed;
  bottom: 95px;
  right: 28px;
  z-index: 1500;
}

.ai-chat-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  border-radius: 30px;
  background: linear-gradient(135deg, rgba(14, 14, 14, 0.95), rgba(14, 14, 14, 0.95));
  color: var(--text-primary);
  font-weight: 700;
  border: 1px solid var(--cyan-accent);
  box-shadow: 0 0 25px rgba(59, 130, 246, 0.24), inset 0 0 12px rgba(59, 130, 246, 0.17);
  backdrop-filter: blur(16px);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.ai-chat-toggle:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 28px rgba(59, 130, 246, 0.3);
  border-color: var(--accent-bright);
}

.rash-btn-logo { width: 22px; height: 22px; }

.ai-chat-window {
  position: absolute;
  bottom: 70px;
  right: 0;
  width: 360px;
  height: 480px;
  background: rgba(14, 14, 14, 0.95);
  border: 1px solid var(--cyan-accent);
  border-radius: 24px;
  box-shadow: 0 20px 60px rgba(59, 130, 246, 0.2);
  backdrop-filter: blur(20px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

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

.bot-info { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; color: var(--text-primary); }

.chat-close-btn { background: none; border: none; color: var(--text-muted); font-size: 1.5rem; cursor: pointer; }

.chat-window-body {
  flex: 1;
  padding: 18px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.bot-chat-msg, .user-chat-msg {
  padding: 12px 16px;
  border-radius: 14px;
  font-size: 0.85rem;
  line-height: 1.5;
  max-width: 85%;
}

.bot-chat-msg {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.17);
  align-self: flex-start;
  color: var(--text-primary);
}

.user-chat-msg { background: var(--cobalt-primary); color: #fff; align-self: flex-end; }

.bot-tag { display: block; font-size: 0.68rem; color: var(--cyan-accent); font-weight: 700; margin-bottom: 4px; }

.chat-prompt-chips {
  display: flex;
  gap: 8px;
  padding: 10px 16px;
  overflow-x: auto;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.chip-btn {
  white-space: nowrap;
  font-size: 0.75rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.17);
  color: var(--cyan-accent);
  padding: 6px 12px;
  border-radius: 12px;
  cursor: pointer;
}

.chat-window-input {
  display: flex;
  gap: 8px;
  padding: 14px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(4, 4, 4, 0.5);
}

.chat-window-input input {
  flex: 1;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-glass);
  padding: 10px 14px;
  border-radius: 12px;
  color: var(--text-primary);
  font-size: 0.85rem;
  outline: none;
}

.chat-send-btn {
  background: var(--cyan-accent);
  color: #0a0a0a;
  border: none;
  padding: 10px 16px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 0.8rem;
  cursor: pointer;
}

/* Back To Top Button */
.back-to-top-btn {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(14, 14, 14, 0.95);
  border: 1px solid var(--cyan-accent);
  color: var(--cyan-accent);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2rem;
  font-weight: bold;
  z-index: 1400;
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px rgba(59, 130, 246, 0.18);
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  cursor: pointer;
}

.back-to-top-btn.visible {
  opacity: 1;
  visibility: visible;
}

.back-to-top-btn:hover {
  transform: translateY(-3px);
  background: var(--cyan-accent);
  color: #0a0a0a;
  box-shadow: 0 8px 24px rgba(59, 130, 246, 0.24);
}

/* 3D Pricing Button */
.btn-pricing-3d {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-color: var(--cyan-accent) !important;
  color: var(--cyan-accent) !important;
  box-shadow: 0 0 15px rgba(59, 130, 246, 0.18);
  transition: all 0.3s;
}

.btn-pricing-3d:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 0 25px rgba(59, 130, 246, 0.27);
  transform: translateY(-2px);
}

.pulse-indicator-small {
  width: 6px;
  height: 6px;
  background: var(--cyan-accent);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--cyan-accent);
  animation: pulse 1.5s infinite;
}

/* Industry Specific Selector Shell */
.industry-section { padding: 120px 8%; }

.industry-shell {
  max-width: 900px;
  margin: 0 auto;
}

.industry-tabs {
  display: flex;
  gap: 12px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.ind-tab {
  flex: 1;
  min-width: 180px;
  padding: 14px 18px;
  background: var(--card-bg);
  border: 1px solid var(--border-glass);
  border-radius: 16px;
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.88rem;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  cursor: pointer;
}

.ind-tab.active {
  background: rgba(14, 14, 14, 0.95);
  border-color: var(--cyan-accent);
  color: var(--cyan-accent);
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.18);
}

.industry-display-card {
  background: var(--card-bg);
  border: 1px solid var(--border-glass);
  border-radius: 28px;
  padding: 40px;
  backdrop-filter: blur(20px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
}

.ind-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 16px;
}

.ind-badge {
  font-size: 0.72rem;
  letter-spacing: 1.5px;
  color: var(--cyan-accent);
  background: rgba(255, 255, 255, 0.1);
  padding: 4px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.17);
  display: inline-block;
  margin-bottom: 8px;
  font-weight: 700;
}

.ind-display-card h3 { font-size: 1.8rem; }

.ind-stat-badge {
  text-align: right;
  background: rgba(4, 4, 4, 0.6);
  padding: 12px 20px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.17);
}

.ind-desc {
  color: var(--text-muted);
  font-size: 1.05rem;
  line-height: 1.6;
  margin-bottom: 32px;
}

.ind-preview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 24px;
}

.ind-box {
  background: rgba(4, 4, 4, 0.6);
  padding: 20px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.ind-whatsapp-box { border-left: 3px solid var(--cyan-accent); }

.ind-box-label {
  display: block;
  font-size: 0.78rem;
  color: var(--cyan-accent);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
  font-weight: 600;
}

.ind-box p {
  font-size: 0.9rem;
  color: var(--text-primary);
  line-height: 1.5;
}

/* WhatsApp Script Customizer */
.customizer-section { padding: 120px 8%; }

.customizer-shell {
  max-width: 920px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  background: var(--card-bg);
  border: 1px solid var(--border-glass);
  border-radius: 32px;
  padding: 40px;
  backdrop-filter: blur(24px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
  align-items: center;
}

.cust-group { margin-bottom: 24px; }

.cust-group label {
  display: block;
  font-size: 0.88rem;
  color: var(--text-muted);
  margin-bottom: 10px;
  font-weight: 600;
}

.cust-group input {
  width: 100%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-glass);
  padding: 12px 18px;
  border-radius: 14px;
  color: var(--text-primary);
  font-size: 0.95rem;
  outline: none;
}

.tone-pills { display: flex; gap: 10px; flex-wrap: wrap; }

.tone-btn {
  padding: 8px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-glass);
  color: var(--text-muted);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.3s;
}

.tone-btn.active {
  background: rgba(255, 255, 255, 0.15);
  border-color: var(--cyan-accent);
  color: var(--cyan-accent);
}

.phone-mockup {
  background: #0b141a;
  border: 2px solid rgba(255, 255, 255, 0.12);
  border-radius: 28px;
  padding: 20px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
}

.phone-header {
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 14px;
  margin-bottom: 16px;
}

.phone-avatar {
  width: 38px;
  height: 38px;
  background: var(--cobalt-primary);
  color: #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 700;
  font-size: 0.85rem;
}

.chat-bubble {
  background: #005c4b;
  color: #e9edef;
  padding: 14px;
  border-radius: 14px 14px 2px 14px;
  font-size: 0.88rem;
  line-height: 1.5;
}

.chat-timestamp {
  display: block;
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 8px;
  text-align: right;
}

/* Speed Test Game Section */
.game-section { padding: 120px 8%; }

.game-card {
  max-width: 860px;
  margin: 0 auto;
  background: var(--card-bg);
  border: 1px solid var(--border-glass);
  border-radius: 32px;
  padding: 40px;
  backdrop-filter: blur(24px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
}

.game-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.game-timer {
  font-family: var(--font-heading);
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--cyan-accent);
}

.game-workspace {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 28px;
}

.game-workspace textarea {
  width: 100%;
  height: 100px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-glass);
  border-radius: 16px;
  padding: 16px;
  color: var(--text-primary);
  font-size: 0.95rem;
  outline: none;
  resize: none;
}

.game-results {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 24px;
  text-align: center;
}

.r-label { display: block; font-size: 0.8rem; color: var(--text-muted); margin-bottom: 6px; }
.r-val { font-family: var(--font-heading); font-size: 1.8rem; font-weight: 700; }

/* Process Switcher Section */
.process-switcher-section { padding: 120px 8%; }

.switcher-shell {
  max-width: 860px;
  margin: 0 auto;
}

.switcher-nav-row { display: flex; gap: 16px; margin-bottom: 24px; }

.switcher-tab {
  flex: 1;
  padding: 16px;
  border-radius: 16px;
  background: var(--card-bg);
  border: 1px solid var(--border-glass);
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.95rem;
  transition: all 0.3s;
  cursor: pointer;
}

.switcher-tab.active {
  background: rgba(14, 14, 14, 0.95);
  border-color: var(--cyan-accent);
  color: var(--cyan-accent);
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.18);
}

.switcher-content-card {
  background: var(--card-bg);
  border: 1px solid var(--border-glass);
  border-radius: 28px;
  padding: 40px;
  backdrop-filter: blur(20px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
}

.switcher-badge {
  font-size: 0.75rem;
  letter-spacing: 1.5px;
  color: var(--cyan-accent);
  background: rgba(255, 255, 255, 0.1);
  padding: 4px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.17);
  display: inline-block;
  margin-bottom: 16px;
  font-weight: 700;
}

.switcher-metrics-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 24px;
}

.s-label { display: block; font-size: 0.82rem; color: var(--text-muted); margin-bottom: 6px; }
.s-val { font-family: var(--font-heading); font-size: 1.8rem; font-weight: 700; }

/* Calculator Section */
.calculator-section { padding: 120px 8%; }

.calc-card {
  max-width: 920px;
  margin: 0 auto;
  background: var(--card-bg);
  border: 1px solid var(--border-glass);
  border-radius: 32px;
  padding: 48px;
  backdrop-filter: blur(24px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
}

.currency-toggle-row {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 32px;
}

.curr-btn {
  padding: 10px 22px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-glass);
  color: var(--text-muted);
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  transition: all 0.3s;
}

.curr-btn.active, .curr-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: var(--cyan-accent);
  color: var(--cyan-accent);
  box-shadow: 0 0 15px rgba(59, 130, 246, 0.18);
}

.calc-grid {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 48px;
  align-items: center;
}

.range-group { margin-bottom: 32px; }

.range-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.range-header label { font-size: 0.95rem; font-weight: 600; }
.range-val-badge { color: var(--cyan-accent); font-weight: 700; font-size: 1rem; }

input[type=range] {
  width: 100%;
  accent-color: var(--cyan-accent);
  background: rgba(255, 255, 255, 0.08);
  height: 6px;
  border-radius: 4px;
  outline: none;
  cursor: pointer;
}

.calc-result-box {
  background: rgba(4, 4, 4, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 24px;
  padding: 32px;
  text-align: center;
}

.result-label { display: block; font-size: 0.85rem; color: var(--text-muted); margin-bottom: 12px; }

.result-amount {
  font-family: var(--font-heading);
  font-size: 2.8rem;
  font-weight: 700;
  color: var(--cyan-accent);
  text-shadow: 0 0 26px rgba(59, 130, 246, 0.45);
  margin-bottom: 12px;
}

.result-subtext {
  display: block;
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.4;
  margin-bottom: 24px;
}

.calc-cta-btn { 
  width: 100%; 
  font-size: 0.85rem;
  padding: 10px 14px;
}

/* Capabilities Section */
.capabilities-section { padding: 120px 8%; }

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 32px;
}

.glass-card {
  position: relative;
  isolation: isolate;
  background: var(--card-bg);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-lg);
  padding: 36px 40px;
  backdrop-filter: blur(20px);
  transition: all 0.25s var(--ease-premium);
  box-shadow: var(--shadow-elevated);
}

.glass-card:hover {
  border-color: var(--border-glow);
  box-shadow: var(--shadow-glow-lg);
  transform: translateY(-8px);
}

/* Cursor-tracked light, same mechanism as the pricing/topup cards —
   position set by initCardSpotlights() in script.js. */
.glass-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(360px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(59, 130, 246, 0.09), transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

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

/* Soft radial highlight, dormant until hover — gives the glass a "living" sheen */
.card-glow {
  position: absolute;
  z-index: -1;
  top: -45%;
  left: 50%;
  width: 280px;
  height: 280px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(59, 130, 246, 0.16), transparent 70%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s var(--ease-premium);
}

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

.card-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.card-icon { font-size: 2.2rem; }

.card-tech-tag {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: var(--cyan-accent);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.17);
  padding: 4px 10px;
  border-radius: 12px;
}

.glass-card h3 { font-size: 1.4rem; margin-bottom: 12px; }
.glass-card p { color: var(--text-muted); line-height: 1.6; font-size: 0.98rem; margin-bottom: 20px; }

.card-status-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: var(--text-muted);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 14px;
}

.mini-dot { width: 6px; height: 6px; border-radius: 50%; }
.mini-dot.cyan { background: var(--cyan-accent); box-shadow: 0 0 6px var(--cyan-accent); }
.mini-dot.indigo { background: var(--indigo-accent); box-shadow: 0 0 6px var(--indigo-accent); }
.mini-dot.violet { background: var(--violet-accent); box-shadow: 0 0 6px var(--violet-accent); }
.mini-dot.emerald { background: var(--emerald-accent); box-shadow: 0 0 6px var(--emerald-accent); }

/* Why Section */
.why-section { padding: 120px 8%; }

.why-grid-3d {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 32px;
}

.stat-glass-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 40px;
}

.stat-glass-card .stat-number {
  font-family: var(--font-heading);
  font-size: 3.2rem;
  font-weight: 700;
  color: var(--cyan-accent);
  text-shadow: 0 0 28px rgba(59, 130, 246, 0.45);
  margin-bottom: 10px;
}

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

/* Console & Simulator Section */
.dashboard-section { padding: 120px 8%; }

.dashboard-shell {
  background: var(--card-bg);
  border: 1px solid var(--border-glass);
  border-radius: 28px;
  padding: 40px;
  backdrop-filter: blur(24px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
}

.dash-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
}

.dash-status { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; }
.status-dot { width: 8px; height: 8px; background: var(--cyan-accent); border-radius: 50%; box-shadow: 0 0 10px var(--cyan-accent); }

.dash-mode {
  font-size: 0.8rem;
  background: rgba(255, 255, 255, 0.05);
  padding: 6px 16px;
  border-radius: 14px;
  color: var(--text-muted);
}

.dash-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
  margin-bottom: 36px;
}

.metric-card {
  background: rgba(4, 4, 4, 0.6);
  padding: 24px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.m-label { display: block; font-size: 0.85rem; color: var(--text-muted); margin-bottom: 10px; }
.m-value { font-family: var(--font-heading); font-size: 2rem; font-weight: 700; color: var(--cyan-accent); text-shadow: 0 0 20px rgba(59, 130, 246, 0.4); }

.dash-main-split { display: grid; grid-template-columns: 3fr 2fr; gap: 28px; }

.dash-panel {
  background: rgba(4, 4, 4, 0.6);
  padding: 28px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.dash-panel h4 { margin-bottom: 20px; font-size: 1.05rem; }

.activity-feed { display: flex; flex-direction: column; gap: 14px; max-height: 240px; overflow-y: auto; }
.feed-row { display: flex; justify-content: space-between; font-size: 0.88rem; padding: 12px; background: rgba(255, 255, 255, 0.03); border-radius: 10px; }

.sim-form-box { margin-bottom: 20px; }
.sim-label { display: block; font-size: 0.85rem; color: var(--text-muted); margin-bottom: 8px; }

.sim-input-row { display: flex; gap: 12px; }

.sim-input-row input {
  flex: 1;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-glass);
  padding: 10px 16px;
  border-radius: 12px;
  color: var(--text-primary);
  font-size: 0.9rem;
  outline: none;
}

.ai-console { font-size: 0.9rem; display: flex; flex-direction: column; gap: 16px; }
.msg-type { display: block; font-size: 0.75rem; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; }
.type-ai { color: var(--cyan-accent); }

.ai-msg { background: rgba(255, 255, 255, 0.04); padding: 14px; border-radius: 10px; }
.msg-ai { border-left: 3px solid var(--cyan-accent); }

/* Pricing Section */
.pricing-section { padding: 120px 8%; }

.pricing-placeholder-card {
  max-width: 920px;
  margin: 0 auto;
  background: var(--card-bg);
  border: 1px solid var(--border-glass);
  border-radius: 36px;
  padding: 80px 60px;
  text-align: center;
  backdrop-filter: blur(24px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

.pricing-placeholder-inner {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}

.pricing-tag-gold {
  font-size: 0.75rem;
  letter-spacing: 2px;
  color: var(--gold-accent);
  background: rgba(255, 255, 255, 0.1);
  padding: 6px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-weight: 700;
}

.pricing-placeholder-card h3 {
  font-family: var(--font-heading);
  font-size: 2.6rem;
  letter-spacing: -1px;
}

.pricing-placeholder-card p {
  color: var(--text-muted);
  font-size: 1.15rem;
  line-height: 1.8;
  max-width: 650px;
  margin-bottom: 12px;
}

/* CTA Section */
.cta-section { padding: 120px 8%; text-align: center; }

.cta-card {
  position: relative;
  isolation: isolate;
  background: linear-gradient(135deg, rgba(90, 90, 96, 0.25), rgba(255, 255, 255, 0.12));
  border: 1px solid rgba(255, 255, 255, 0.22);
  padding: 80px 32px;
  border-radius: var(--radius-xl);
  max-width: 860px;
  margin: 0 auto;
  backdrop-filter: blur(20px);
  box-shadow: var(--shadow-glow-lg), var(--shadow-accent-glow);
  overflow: hidden;
}

.cta-card::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -40%;
  background: radial-gradient(circle at 30% 20%, rgba(59, 130, 246, 0.15), transparent 55%),
              radial-gradient(circle at 80% 90%, rgba(59, 130, 246, 0.1), transparent 55%);
  pointer-events: none;
}

.cta-card h2 { font-family: var(--font-display); font-weight: 460; font-optical-sizing: auto; font-size: clamp(2.1rem, 1.1rem + 1.8vw, 3.2rem); margin-bottom: 20px; letter-spacing: -0.3px; }
.cta-card p { color: var(--text-muted); font-size: 1.15rem; margin-bottom: 40px; }

/* Modal */
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(4, 4, 4, 0.85);
  backdrop-filter: blur(20px);
  z-index: 2000;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 1;
  transition: opacity 0.4s;
  padding: 20px;
}

.modal-backdrop.hidden { opacity: 0; pointer-events: none; }

.modal-card {
  position: relative;
  width: 100%;
  max-width: 440px;
  background: rgba(14, 14, 14, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-lg);
  padding: 40px;
  box-shadow: var(--shadow-elevated), var(--shadow-glow-md);
}

.modal-close-btn {
  position: absolute;
  top: 20px;
  right: 24px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.8rem;
  cursor: pointer;
}

.modal-header { text-align: center; margin-bottom: 28px; }

.modal-badge {
  font-size: 0.7rem;
  letter-spacing: 1.5px;
  color: var(--cyan-accent);
  background: rgba(255, 255, 255, 0.1);
  padding: 4px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.17);
  display: inline-block;
  margin-bottom: 12px;
}

.form-group { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.form-group label { font-size: 0.85rem; color: var(--text-muted); }
.form-group input {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-glass);
  padding: 12px 18px;
  border-radius: 14px;
  color: var(--text-primary);
  font-size: 0.95rem;
  outline: none;
}

.form-options { display: flex; justify-content: space-between; align-items: center; font-size: 0.82rem; color: var(--text-muted); margin-bottom: 28px; }
.remember-me { display: flex; align-items: center; gap: 6px; }
.forgot-link { color: var(--cyan-accent); text-decoration: none; }

.modal-submit-btn { width: 100%; padding: 14px; font-size: 1rem; margin-bottom: 16px; }

.login-error-text {
  color: var(--red-accent);
  font-size: 0.82rem;
  text-align: center;
  margin-top: 10px;
  font-weight: 600;
}

.modal-footer-note { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 0.75rem; color: var(--text-muted); margin-top: 12px; }

/* EXECUTIVE DASHBOARD STYLING (dashboard.html) */
.dashboard-body.luxury-marble-bg {
  background-color: #fdfbf7 !important;
  background-image: 
    radial-gradient(at 0% 0%, rgba(220, 210, 198, 0.2) 0px, transparent 50%),
    radial-gradient(at 100% 100%, rgba(197, 155, 39, 0.05) 0px, transparent 50%),
    linear-gradient(135deg, rgba(255,255,255,0.92) 0%, rgba(248,244,236,0.85) 100%) !important;
  color: #21150c;
  min-height: 100vh;
}

.tab-view {
  display: none;
  animation: fadeInView 0.35s ease-in-out forwards;
}

.tab-view.active-view {
  display: block;
}

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

.sidebar-menu .sidebar-item.active {
  background: rgba(197, 155, 39, 0.15) !important;
  border-left: 3px solid #c59b27 !important;
  color: #c59b27 !important;
  font-weight: 600 !important;
}

.dash-user-controls { display: flex; align-items: center; gap: 24px; }
.luxury-email { font-weight: 500; color: #21150c; padding: 0 4px; }

.luxury-gold-orb {
  background: #c59b27;
  opacity: 0.05 !important;
  width: 700px;
  height: 700px;
}

.luxury-dash-nav {
  background: rgba(253, 251, 247, 0.94) !important;
  border-bottom: 1px solid rgba(140, 83, 25, 0.12);
  backdrop-filter: blur(16px);
}

.luxury-brand-text {
  font-family: 'Playfair Display', serif;
  color: #21150c !important;
  font-weight: 700;
  letter-spacing: 1px;
}

.bronze-accent { color: #8c5319; font-style: italic; font-weight: 500; }

.luxury-session-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.82rem;
  color: #5a3c1e;
  background: rgba(140, 83, 25, 0.04);
  border: 1px solid rgba(140, 83, 25, 0.16);
  padding: 6px 18px;
  border-radius: 20px;
}

.bronze-dot { width: 6px; height: 6px; background: #8c5319; border-radius: 50%; box-shadow: 0 0 6px #8c5319; }

.btn-luxury-outline {
  border: 1px solid #8c5319;
  color: #21150c;
  padding: 7px 20px;
  font-size: 0.82rem;
  background: transparent;
  border-radius: 20px;
  transition: all 0.3s;
  cursor: pointer;
  font-weight: 600;
}

.btn-luxury-outline:hover { background: #8c5319; color: #ffffff; }

.dashboard-wrapper { display: flex; min-height: calc(100vh - 90px); margin-top: 90px; width: 100%; }

.luxury-sidebar {
  width: 260px;
  background: rgba(255, 254, 250, 0.85);
  border-right: 1px solid rgba(140, 83, 25, 0.1);
  padding: 36px 18px;
  backdrop-filter: blur(20px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.luxury-sidebar .sidebar-menu { display: flex; flex-direction: column; gap: 10px; }

.luxury-sidebar .sidebar-item {
  color: #5a3c1e;
  font-size: 0.9rem;
  text-decoration: none;
  padding: 13px 18px;
  border-radius: 14px;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  gap: 10px;
}

.luxury-sidebar .sidebar-item:hover, 
.luxury-sidebar .sidebar-item.active {
  background: rgba(140, 83, 25, 0.06);
  color: #21150c;
  border: 1px solid rgba(140, 83, 25, 0.2);
  font-weight: 600;
}

.luxury-footer-card {
  background: rgba(140, 83, 25, 0.03);
  border: 1px solid rgba(140, 83, 25, 0.1);
  border-radius: 16px;
  padding: 16px;
  text-align: center;
}

.luxury-footer-card p { font-size: 0.75rem; color: #7a5c43; margin-top: 8px; }

.dash-main-content { flex: 1; padding: 40px 6%; width: 100%; overflow-x: hidden; }
.dash-header-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 32px; }

.luxury-tag { font-size: 0.75rem; letter-spacing: 2px; color: #8c5319; font-weight: 700; }
.luxury-title { font-family: 'Playfair Display', serif; font-size: 2.2rem; color: #21150c; margin-top: 4px; }

.status-chip-luxury {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: #21150c;
  background: rgba(140, 83, 25, 0.05);
  padding: 8px 20px;
  border-radius: 20px;
  border: 1px solid rgba(140, 83, 25, 0.16);
  font-weight: 600;
}

.live-dot-bronze { width: 8px; height: 8px; background: #8c5319; border-radius: 50%; box-shadow: 0 0 6px #8c5319; }

.luxury-card {
  background: rgba(255, 254, 250, 0.92);
  border: 1px solid rgba(140, 83, 25, 0.14);
  box-shadow: 0 8px 32px rgba(44, 26, 14, 0.03);
  padding: 26px;
  border-radius: 20px;
}

.text-espresso { color: #21150c !important; }
.text-bronze { color: #8c5319 !important; }

.subscription-panel { margin-bottom: 32px; }

.sub-details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(140, 83, 25, 0.1);
}

.sub-stat { display: flex; flex-direction: column; gap: 4px; }
.sub-label { font-size: 0.78rem; color: #7a5c43; }
.sub-val { font-size: 0.95rem; color: #21150c; font-weight: 600; }

.luxury-panel {
  background: rgba(255, 254, 250, 0.98);
  border: 1px solid rgba(140, 83, 25, 0.12);
  box-shadow: 0 8px 32px rgba(44, 26, 14, 0.03);
  padding: 28px;
  border-radius: 22px;
}

.panel-header-flex { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }

.luxury-panel-title-large {
  font-family: 'Playfair Display', serif;
  font-size: 1.85rem;
  color: #21150c;
  font-weight: 700;
  letter-spacing: -0.5px;
}

.table-container { width: 100%; overflow-x: auto; }

.dash-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 0.88rem; }

.luxury-table th {
  border-bottom: 1px solid rgba(140, 83, 25, 0.16);
  color: #8c5319;
  font-size: 0.8rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 14px;
  white-space: nowrap;
}

.luxury-table td {
  border-bottom: 1px solid rgba(140, 83, 25, 0.06);
  color: #21150c;
  padding: 14px;
  white-space: nowrap;
}

.status-pill.state-secured-luxury {
  background: rgba(140, 83, 25, 0.08);
  color: #8c5319;
  border: 1px solid rgba(140, 83, 25, 0.2);
  white-space: nowrap;
  display: inline-block;
  padding: 6px 14px;
}

.status-pill.state-sent-luxury {
  background: rgba(197, 155, 39, 0.1);
  color: #966b10;
  border: 1px solid rgba(197, 155, 39, 0.25);
  white-space: nowrap;
  display: inline-block;
  padding: 6px 14px;
}

.status-pill.state-active-luxury {
  background: rgba(33, 21, 12, 0.06);
  color: #21150c;
  border: 1px solid rgba(33, 21, 12, 0.18);
  white-space: nowrap;
  display: inline-block;
  padding: 6px 14px;
}

.integration-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.luxury-integ {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(140, 83, 25, 0.18);
  padding: 22px 24px;
  border-radius: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 4px 15px rgba(44, 26, 14, 0.02);
}

.integ-info strong { display: block; font-size: 0.9rem; }
.integ-info span { font-size: 0.78rem; color: #7a5c43; }

/* 3D CONTINUOUS FLIPPING COIN & AH CREDIT WIDGET STYLING (DESKTOP) */
.credit-balance-card {
  position: relative;
  background: linear-gradient(135deg, rgba(255, 254, 250, 0.98) 0%, rgba(248, 244, 236, 0.95) 100%);
  border: 1.5px solid rgba(197, 155, 39, 0.35) !important;
  box-shadow: 0 10px 30px rgba(140, 83, 25, 0.08) !important;
}

.luxury-coin-badge-container {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: rgba(140, 83, 25, 0.06);
  border: 1px solid rgba(140, 83, 25, 0.2);
  padding: 6px 16px;
  border-radius: 24px;
}

/* 3D Coin Flip Scene */
.ah-coin-scene {
  width: 32px;
  height: 32px;
  perspective: 600px;
  display: inline-block;
}

.ah-coin {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  animation: continuousCoinFlip 3.2s linear infinite;
}

@keyframes continuousCoinFlip {
  0% { transform: rotateY(0deg); }
  100% { transform: rotateY(360deg); }
}

.coin-face {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 1.05rem;
  background: radial-gradient(circle at 35% 35%, #ffffff 0%, #fdfbf7 55%, #ecdcc8 100%);
  color: #8c5319;
  border: 1.8px solid #c59b27;
  box-shadow: 0 0 10px rgba(197, 155, 39, 0.4), inset 0 0 4px rgba(140, 83, 25, 0.25);
}

.coin-front {
  transform: rotateY(0deg);
}

.coin-back {
  transform: rotateY(180deg);
}

.credit-badge-text {
  font-size: 0.92rem;
  font-weight: 700;
  color: #21150c;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.credit-badge-text span {
  color: #8c5319;
}

/* FOOTER */
footer { 
  text-align: center; 
  padding: 48px 8%; 
  color: var(--text-muted); 
  font-size: 0.88rem; 
  border-top: 1px solid var(--border-glass); 
}
.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
}
.footer-credit { 
  margin-bottom: 4px; 
  font-size: 0.9rem; 
}
.footer-link-highlight { color: var(--cyan-accent); text-decoration: none; font-weight: 600; transition: color 0.3s; }
.footer-link-highlight:hover { color: #ffffff; text-decoration: underline; }

/* ==========================================================================
   STANDARD LAPTOP ADAPTER (13" & 14" screens at 100% default zoom)
   ========================================================================== */
@media screen and (min-width: 901px) and (max-width: 1440px) {
  /* Aggressively compress Navbar to fit all links and buttons safely */
  .navbar {
    padding: 12px 2%;
    gap: 8px;
  }
  .logo { 
    font-size: 0.95rem; 
    gap: 6px; 
  }
  .logo-knot-svg {
    width: 40px;
    height: 40px;
  }
  .nav-links { 
    gap: 12px; 
  }
  .nav-links a { 
    font-size: 0.72rem;
  }
  .btn { 
    padding: 8px 16px; 
    font-size: 0.75rem; 
  }
  .btn-outline.nav-btn {
    padding: 6px 12px;
  }
  
  /* Scale down the rest of the site to match the 100% default laptop view */
  .hero { padding: 120px 4% 80px 4%; }
  h1 { font-size: clamp(2rem, 3vw, 2.8rem); }
  .hero-subtext { font-size: 0.95rem; }
  
  .section-header h2 { font-size: clamp(1.5rem, 2vw, 2rem); }
  
  .pricing-cards-grid, .card-grid, .why-grid-3d { gap: 16px; }
  .glass-card, .step-card, .pricing-card { padding: 20px 16px; }
  .stat-glass-card .stat-number { font-size: 2.2rem; }
  
  .dash-main-split, .calc-grid { gap: 20px; }
  .voice-card-container, .calc-card, .dashboard-shell { padding: 24px; }
}
/* DEDICATED EXTREME-MOBILE SCALING */
@media (max-width: 900px) {
  * { cursor: auto !important; }
  .cursor-dot, .cursor-ring { display: none; }
  
  .desktop-only-ribbon {
    display: none !important;
  }

  .hero { 
    padding: 76px 4% 40px 4% !important; 
    min-height: auto !important;
  }
  section { padding: 45px 4% !important; }
  
  .workflow-layout, .industry-shell, .customizer-shell, .game-card, .switcher-shell, .calc-card, .card-grid, .why-grid-3d, .dashboard-shell, .pricing-placeholder-card, .cta-card, .voice-card-container, .faq-accordion {
    max-width: 100vw !important;
    width: 100% !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .voice-grid, .parser-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .faq-question-btn {
    font-size: 0.85rem !important;
    padding: 16px !important;
  }
  
  .faq-answer-panel {
    font-size: 0.7rem !important;
  }
  
  .navbar { 
    padding: 10px 4% !important; 
    gap: 10px !important;
  }
  .logo-knot-svg { width: 34px !important; height: 34px !important; }
  .logo-text { font-size: 0.95rem !important; letter-spacing: 0.5px !important; }
  .mobile-menu-btn { display: flex; }
  
  .nav-links {
    position: fixed;
    top: 56px;
    left: 0;
    width: 100%;
    background: rgba(4, 4, 4, 0.98);
    backdrop-filter: blur(20px);
    flex-direction: column;
    padding: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    gap: 12px;
    transform: translateY(-130%);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
    z-index: 250;
  }
  .nav-links.mobile-active {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .hero-badge {
    margin-bottom: 12px !important;
    padding: 4px 12px !important;
    font-size: 0.75rem !important;
  }

  h1 { font-size: 1.4rem !important; letter-spacing: -0.5px !important; margin-bottom: 10px !important; line-height: 1.2 !important; }
 .hero-subtext { 
    font-size: 0.76rem !important; 
    line-height: 1.45 !important;
    margin-bottom: 16px !important; 
    color: #ffffff !important; 
    font-weight: 600 !important; 
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.98), 0 0 10px rgba(4, 4, 4, 0.9);
  }
  
  .time-banner { 
    font-size: 0.6rem !important; 
    padding: 4px 8px !important; 
    line-height: 1.3 !important; 
    text-align: left;
    white-space: normal;
    margin-bottom: 12px !important;
  }
  
  .section-header h2 { font-size: 1.1rem !important; margin-bottom: 6px !important; line-height: 1.2 !important; }
  .section-header p { 
    font-size: 0.65rem !important; 
    color: #f2f2f2 !important; 
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85);
  }

  .auto-play-indicator {
    font-size: 0.55rem !important;
    padding: 2px 6px !important;
  }
  
  .glass-card { padding: 10px !important; border-radius: 12px !important; }
  .glass-card h3 { font-size: 0.7rem !important; margin-bottom: 4px !important; }
  .glass-card p { font-size: 0.55rem !important; line-height: 1.3 !important; margin-bottom: 8px !important; color: #e5e5e5 !important; }
  .card-icon { font-size: 1rem !important; }
  .card-status-bar { font-size: 0.5rem !important; padding-top: 6px !important; }

  .step-card { padding: 12px !important; border-radius: 12px !important;}
  .step-id { font-size: 0.9rem !important; }
  .step-card h3 { font-size: 0.8rem !important; }
  .step-card p { font-size: 0.6rem !important; margin-bottom: 6px !important; color: #e5e5e5 !important; }
  .step-hud { font-size: 0.55rem !important; }

  .industry-display-card { padding: 12px !important; border-radius: 12px !important; }
  .ind-display-card h3 { font-size: 0.9rem !important; }
  .ind-desc { font-size: 0.65rem !important; margin-bottom: 12px !important; color: #f2f2f2 !important; }
  .ind-preview-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; padding-top: 8px !important;}
  .ind-box { padding: 8px !important; }
  .ind-box p { font-size: 0.55rem !important; line-height: 1.3 !important; color: #ffffff !important; }
  .ind-box-label { font-size: 0.55rem !important; }
  .ind-tab { font-size: 0.65rem !important; padding: 6px 10px !important; }

  .customizer-shell {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    padding: 12px !important;
  }
  .cust-group label { font-size: 0.6rem !important; margin-bottom: 4px !important; }
  .cust-group input { padding: 6px 10px !important; font-size: 0.65rem !important; }
  .phone-mockup { padding: 8px !important; }
  .chat-bubble { font-size: 0.55rem !important; padding: 6px !important; }
  .phone-avatar { width: 20px !important; height: 20px !important; font-size: 0.55rem !important; }
  .tone-btn { font-size: 0.55rem !important; padding: 4px 8px !important; }

  .calc-card { padding: 16px !important; }
  .calc-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }
  .calc-inputs { display: flex !important; flex-direction: column !important; gap: 10px !important; width: 100% !important; }
  .result-amount { font-size: 1.4rem !important; margin-bottom: 4px !important; }
  .calc-result-box { padding: 16px !important; }
  .calc-cta-btn {
    font-size: 0.55rem !important;
    padding: 6px 10px !important;
    width: 100% !important;
  }

  .card-grid, .why-grid-3d {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
  }
  .stat-glass-card { padding: 12px !important; }
  .stat-glass-card .stat-number { font-size: 1.1rem !important; margin-bottom: 4px !important; }
  .stat-glass-card .stat-label { font-size: 0.55rem !important; line-height: 1.2 !important; color: #d4d4d4 !important; }

  .game-card { padding: 12px !important; }
  .game-top-bar {
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 10px !important;
  }
  .game-timer { font-size: 1rem !important; }
  .game-results { grid-template-columns: repeat(3, 1fr) !important; gap: 4px !important; }
  .r-label { font-size: 0.5rem !important; }
  .r-val { font-size: 0.75rem !important; }
  .game-workspace textarea { font-size: 0.65rem !important; height: 50px !important; padding: 8px !important; }

  .switcher-content-card { padding: 12px !important; border-radius: 12px !important; }
  .switcher-nav-row { flex-direction: row !important; gap: 6px !important; }
  .switcher-tab { min-width: 0 !important; padding: 8px !important; font-size: 0.6rem !important; }
  .switcher-metrics-row {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 4px !important;
  }
  .s-label { font-size: 0.55rem !important; }
  .s-val { font-size: 0.8rem !important; white-space: nowrap !important; }
  
  .s-val.text-red { color: #f43f5e !important; }

  .dashboard-shell { padding: 12px !important; }
  .dash-panel { padding: 10px !important; border-radius: 10px !important; }
  .dash-panel h4 { font-size: 0.65rem !important; margin-bottom: 8px !important; }
  
  .dash-main-split { display: flex !important; flex-direction: column !important; gap: 10px !important; }
  .activity-feed .feed-row { font-size: 0.55rem !important; padding: 4px !important; }
  
  .sim-label { font-size: 0.55rem !important; }
  .sim-input-row { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: 4px !important; align-items: center !important; }
  .sim-input-row input { flex: 1 !important; width: 100% !important; min-width: 0 !important; font-size: 0.55rem !important; padding: 6px !important; }
  .sim-input-row button { flex-shrink: 0 !important; padding: 6px 8px !important; font-size: 0.55rem !important; }
  .ai-console { gap: 6px !important; }
  .ai-console p { font-size: 0.55rem !important; }
  .ai-msg { padding: 6px !important; }

  .pricing-placeholder-card { padding: 20px 12px !important; border-radius: 12px !important;}
  .pricing-placeholder-card h3 { font-size: 0.9rem !important; }
  .pricing-placeholder-card p { font-size: 0.65rem !important; }
  .cta-card { padding: 20px 12px !important; border-radius: 12px !important;}
  .cta-card h2 { font-size: 1.1rem !important; line-height: 1.2 !important; margin-bottom: 10px !important;}
  .cta-card p { font-size: 0.65rem !important; margin-bottom: 16px !important; }
  
  .btn-sm { font-size: 0.55rem !important; padding: 4px 8px !important; }
  .btn { font-size: 0.65rem !important; padding: 8px 14px !important; }

  /* AUDIT MODAL MOBILE RESPONSIVENESS FIX */
  .audit-modal-card {
    max-width: 92vw !important;
    padding: 20px 16px !important;
    border-radius: 20px !important;
    box-sizing: border-box !important;
  }
  .audit-modal-card h3 { font-size: 1.1rem !important; line-height: 1.2 !important; }
  .audit-modal-card p { font-size: 0.65rem !important; }
  .audit-summary-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
    margin-bottom: 14px !important;
  }
  .audit-stat-box {
    padding: 8px 4px !important;
    border-radius: 8px !important;
    min-width: 0 !important;
  }
  .a-label { font-size: 0.55rem !important; line-height: 1.2 !important; margin-bottom: 2px !important; }
  .a-val { font-size: 0.82rem !important; }
  .audit-breakdown-bar-box { padding: 10px 12px !important; margin-bottom: 14px !important; }
  .a-sublabel { font-size: 0.65rem !important; margin-bottom: 6px !important; }
  .audit-yield-text { font-size: 0.7rem !important; }
  .audit-modal-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
  }
  .audit-modal-actions .btn {
    width: 100% !important;
    font-size: 0.65rem !important;
    padding: 8px 12px !important;
    text-align: center !important;
    justify-content: center !important;
  }

  .dashboard-wrapper { 
    flex-direction: column !important; 
    margin-top: 110px !important;
  }
  
  .luxury-dash-nav { 
    padding: 10px 4% !important; 
    flex-direction: column !important; 
    align-items: flex-start !important; 
    justify-content: center !important; 
    gap: 8px !important; 
  }

  /* MOBILE CONTROLS HEADER BAR & SIGN OUT VISIBILITY FIX */
  .dash-user-controls { 
    display: flex !important; 
    flex-direction: row !important; 
    flex-wrap: nowrap !important; 
    width: 100% !important; 
    justify-content: space-between !important; 
    gap: 4px !important; 
    align-items: center !important; 
  }

  .luxury-coin-badge-container {
    padding: 3px 6px !important;
    gap: 4px !important;
    border-radius: 12px !important;
    flex-shrink: 0 !important;
  }

  .ah-coin-scene {
    width: 16px !important;
    height: 16px !important;
  }

  .coin-face {
    font-size: 0.55rem !important;
    border-width: 1px !important;
  }

  .credit-badge-text {
    font-size: 0.6rem !important;
    gap: 2px !important;
  }

  .luxury-session-badge { 
    padding: 3px 6px !important; 
    font-size: 0.55rem !important; 
    max-width: 120px !important; 
    overflow: hidden !important; 
    text-overflow: ellipsis !important; 
    white-space: nowrap !important; 
    flex-shrink: 1 !important; 
  }

  .luxury-email {
    display: inline-block !important; 
    max-width: 90px !important; 
    overflow: hidden !important; 
    text-overflow: ellipsis !important; 
    white-space: nowrap !important; 
    vertical-align: middle !important; 
  }

  .btn-luxury-outline { 
    padding: 3px 8px !important; 
    font-size: 0.55rem !important; 
    width: auto !important; 
    flex-shrink: 0 !important; 
    white-space: nowrap !important; 
  }

  .luxury-sidebar { 
    width: 100% !important; 
    flex-direction: row !important; 
    flex-wrap: wrap !important; 
    justify-content: center !important; 
    padding: 12px !important; 
    border-right: none !important; 
    border-bottom: 1px solid rgba(140, 83, 25, 0.1) !important; 
  }
  .luxury-sidebar .sidebar-menu { 
    flex-direction: row !important; 
    flex-wrap: wrap !important; 
    justify-content: center !important; 
    gap: 6px !important; 
  }
  .luxury-sidebar .sidebar-item { 
    font-size: 0.65rem !important; 
    padding: 6px 10px !important; 
  }
  .luxury-footer-card { display: none !important; }
  
  .dash-main-content { padding: 16px 4% !important; }
  .dash-header-row { 
    flex-direction: column !important; 
    align-items: flex-start !important; 
    gap: 10px !important; 
    margin-bottom: 20px !important; 
  }
  .luxury-title { font-size: 1.1rem !important; margin-bottom: 4px !important; line-height: 1.2 !important; }
  .luxury-tag { font-size: 0.55rem !important; display: block !important; margin-bottom: 4px !important; }
  .status-chip-luxury { font-size: 0.55rem !important; padding: 4px 10px !important; }
  
  /* MOBILE METRICS 2-COLUMN BALANCED TILES */
  .dash-metrics { 
    grid-template-columns: repeat(2, 1fr) !important; 
    gap: 6px !important; 
    margin-bottom: 12px !important; 
  }

  .metric-card { 
    padding: 8px !important; 
    border-radius: 8px !important; 
  }
  .metric-card .m-label { 
    font-size: 0.5rem !important; 
    line-height: 1.2 !important; 
    margin-bottom: 2px !important; 
  }
  .metric-card .m-value { 
    font-size: 0.9rem !important; 
    line-height: 1.2 !important; 
    margin-bottom: 2px !important; 
  }
  .metric-card .m-sub { 
    font-size: 0.48rem !important; 
    line-height: 1.2 !important; 
    display: block !important; 
  }

  .credit-balance-card .ah-coin-scene {
    width: 14px !important; 
    height: 14px !important; 
  }

  .credit-balance-card .coin-face {
    font-size: 0.5rem !important; 
  }
  
  .luxury-panel { padding: 14px !important; border-radius: 12px !important; margin-bottom: 16px !important; }
  
  #subscription .panel-header-flex { 
    flex-direction: column !important; 
    align-items: flex-start !important; 
    gap: 10px !important; 
  }
  .luxury-panel-title-large { font-size: 0.95rem !important; line-height: 1.2 !important; }
  .sub-card-desc { font-size: 0.65rem !important; margin-top: 4px !important;}
  
  .btn-luxury-outline.btn-sm { 
    font-size: 0.6rem !important; 
    white-space: nowrap !important; 
    padding: 6px 12px !important; 
    width: auto !important; 
  }
  
  .sub-details-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; padding-top: 10px !important; margin-top: 10px !important; }
  .sub-label { font-size: 0.55rem !important; }
  .sub-val { font-size: 0.65rem !important; }
  
  .panel-header-flex { 
    flex-direction: row !important; 
    flex-wrap: wrap !important; 
    align-items: baseline !important; 
    justify-content: space-between !important; 
    gap: 6px !important; 
  }
  .luxury-panel-title { font-size: 0.85rem !important; margin-bottom: 0 !important; }
  
  .hud-code-luxury { 
    font-size: 0.45rem !important; 
    display: inline-block !important; 
    color: var(--text-muted) !important; 
    font-weight: normal !important; 
    opacity: 0.85; 
  }

  .table-container { overflow-x: auto !important; }
  .luxury-table th, .luxury-table td { padding: 8px 6px !important; font-size: 0.6rem !important; }
  .status-pill.state-secured-luxury, .status-pill.state-sent-luxury, .status-pill.state-active-luxury { padding: 4px 6px !important; font-size: 0.5rem !important; }
  
  .integration-list { gap: 10px !important; }
  .luxury-integ { padding: 12px !important; flex-direction: column !important; align-items: flex-start !important; gap: 6px !important; }
  .integ-info strong { font-size: 0.75rem !important; }
  .integ-info span { font-size: 0.6rem !important; }

  footer { 
    padding: 30px 5% 100px 5% !important; 
  }
  
  /* BACK TO TOP BUTTON (SMALLER ON MOBILE) */
  .back-to-top-btn {
    bottom: 16px !important;
    right: 16px !important;
    width: 36px !important;
    height: 36px !important;
    font-size: 0.95rem !important;
    z-index: 1400 !important;
  }

  /* RASH CHATBOT WIDGET (POSITIONED CLEANLY ABOVE BACK-TO-TOP) */
  .ai-chat-widget {
    bottom: 62px !important;
    right: 16px !important;
    transform: scale(0.85);
    transform-origin: bottom right;
    z-index: 1500 !important;
  }

  .ai-chat-window {
    width: 310px !important;
    height: 420px !important;
    bottom: 58px !important;
    right: 0 !important;
  }
}
/* --- Seamless Monochrome Monogram (Contour Glow & Screen Blend) --- */
/* --- Completely Invisible Box Monogram --- */
.logo-crop-wrapper {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.logo-crop-wrapper .logo-3d-raw {
  width: 100%;
  height: 100%;
  object-fit: contain;

  /* Screen blending: turns true black 100% see-through */
  mix-blend-mode: screen !important;

  /*
     High contrast crushes all near-black noise to pure 0,0,0 black.
     Full desaturation strips any brass/gold cast to clean silver-white,
     matching the monochrome palette exactly.
     Zero drop-shadow so no box or halo can ever form around the edges.
  */
  filter: contrast(170%) brightness(1.15) saturate(0);

  pointer-events: none;
  user-select: none;
  transition: transform 0.3s ease, filter 0.3s ease;
}

/* Subtle brighten on the emblem on hover */
.logo:hover .logo-3d-raw {
  transform: scale(1.04);
  filter: brightness(1.15);
}

/* Mobile sizing */
@media (max-width: 900px) {
  .logo-crop-wrapper {
    width: 30px;
    height: 30px;
    min-width: 30px;
    min-height: 30px;
  }
}
/* ==========================================================================
   PRICING TIERS & ON-DEMAND PACKS (ISOLATED COMPONENT SCOPE)
   ========================================================================== */

/* Main Section Scaffolding */
.pricing-section {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 100%;
  padding: clamp(60px, 8vw, 120px) 5%;
  box-sizing: border-box;
}

/* 3-Column Desktop Grid */
.pricing-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.5vw, 32px);
  max-width: 1240px;
  margin: 0 auto clamp(40px, 6vw, 80px) auto;
  align-items: stretch;
  width: 100%;
  box-sizing: border-box;
}

/* Glassmorphic Card Container */
.pricing-card {
  position: relative;
  background: var(--card-bg, rgba(14, 14, 14, 0.75));
  border: 1px solid var(--border-glass, rgba(255, 255, 255, 0.08));
  border-radius: var(--radius-lg);
  padding: clamp(24px, 3vw, 40px) clamp(20px, 2.5vw, 32px);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.25s var(--ease-premium),
              border-color 0.25s ease,
              box-shadow 0.25s ease;
  box-shadow: var(--shadow-elevated);
  box-sizing: border-box;
}

.pricing-card:hover {
  transform: translateY(-6px);
  border-color: var(--cyan-accent, #3b82f6);
  box-shadow: 0 20px 45px rgba(59, 130, 246, 0.16);
}

/* A soft light that tracks the cursor across the card surface — position
   set by initCardSpotlights() in script.js via --mouse-x/--mouse-y,
   revealed only on hover so it never lingers as a fixed hot-spot. */
.pricing-card::after,
.topup-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(360px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(59, 130, 246, 0.10), transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.pricing-card:hover::after,
.topup-card:hover::after {
  opacity: 1;
}

/* Featured / Growth Plan Emphasis */
.pricing-card.featured-plan {
  border: 1.5px solid var(--cyan-accent, #3b82f6);
  background: linear-gradient(180deg, rgba(14, 14, 14, 0.92) 0%, rgba(10, 10, 10, 0.85) 100%);
  box-shadow: 0 0 35px rgba(59, 130, 246, 0.17), inset 0 0 1px var(--cyan-accent, #3b82f6);
}

@media (min-width: 901px) {
  .pricing-card.featured-plan {
    transform: scale(1.025);
  }
  .pricing-card.featured-plan:hover {
    transform: scale(1.045) translateY(-6px);
    box-shadow: 0 0 50px rgba(59, 130, 246, 0.22);
  }
}

/* Top Ribbons & Badges */
.popular-ribbon {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--accent-bright, #ffffff), var(--cyan-accent, #3b82f6));
  color: #0a0a0a;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 1.2px;
  padding: 4px 16px;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.24);
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.ribbon-glow-dot {
  width: 6px;
  height: 6px;
  background: #0a0a0a;
  border-radius: 50%;
}

.pricing-card-header {
  margin-bottom: 20px;
}

.pricing-plan-badge {
  font-size: 0.72rem;
  letter-spacing: 1.5px;
  color: var(--cyan-accent, #3b82f6);
  background: rgba(255, 255, 255, 0.08);
  padding: 4px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  display: inline-block;
  margin-bottom: 12px;
  font-weight: 700;
}

.pricing-plan-badge.gold {
  color: var(--gold-accent, #3b82f6);
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}

.pricing-plan-name {
  font-family: var(--font-heading, inherit);
  font-size: clamp(1.35rem, 1.8vw, 1.65rem);
  margin: 0 0 10px 0;
  color: var(--text-primary, #ffffff);
}

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

.pricing-currency {
  font-size: clamp(1.3rem, 1.6vw, 1.5rem);
  font-weight: 700;
  color: var(--cyan-accent, #3b82f6);
}

.pricing-amount {
  font-family: var(--font-heading, inherit);
  font-size: clamp(2.2rem, 3vw, 2.8rem);
  font-weight: 800;
  color: var(--text-primary);
}

.pricing-period {
  font-size: 0.9rem;
  color: var(--text-muted, #a3a3a3);
}

.pricing-setup-fee {
  display: block;
  font-size: 0.78rem;
  color: var(--text-muted, #a3a3a3);
  margin-top: 6px;
  font-weight: 500;
}

/* Credit Highlight Box */
.pricing-credit-highlight {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 14px 16px;
  margin-bottom: 22px;
  text-align: center;
}

.pricing-credit-highlight.featured-credit {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.18);
}

.credit-metric-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
}

.credit-num {
  font-family: var(--font-heading, inherit);
  font-size: clamp(1.4rem, 2vw, 1.75rem);
  font-weight: 800;
  color: var(--text-primary);
}

.credit-unit {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-muted, #a3a3a3);
}

.credit-label {
  display: block;
  font-size: 0.7rem;
  color: var(--text-muted, #a3a3a3);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-top: 2px;
}

/* Feature List */
.pricing-features {
  list-style: none;
  padding: 0;
  margin: 0 0 28px 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.pricing-features li {
  font-size: clamp(0.78rem, 0.9vw, 0.85rem);
  color: var(--text-muted, #a3a3a3);
  line-height: 1.45;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.feat-check {
  color: var(--cyan-accent, #3b82f6);
  font-weight: bold;
}

/* CTA Container & Buttons */
.pricing-cta-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
}

.pricing-buy-btn {
  width: 100%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 13px 20px;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
}

.billing-clarity-note {
  font-size: 0.7rem;
  color: var(--text-muted, #a3a3a3);
  text-align: center;
}

/* Top-Up Booster Scaffolding */
.topup-wrapper {
  max-width: 1240px;
  margin: 0 auto;
  background: var(--card-bg, rgba(14, 14, 14, 0.65));
  border: 1px solid var(--border-glass, rgba(255, 255, 255, 0.08));
  border-radius: 28px;
  padding: clamp(28px, 4vw, 44px);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-sizing: border-box;
}

.topup-header {
  text-align: center;
  max-width: 650px;
  margin: 0 auto 32px auto;
}

.topup-badge {
  font-size: 0.7rem;
  letter-spacing: 1.5px;
  color: var(--cyan-accent, #3b82f6);
  background: rgba(255, 255, 255, 0.08);
  padding: 4px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  display: inline-block;
  margin-bottom: 10px;
  font-weight: 700;
}

.topup-header h3 {
  font-family: var(--font-heading, inherit);
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  margin: 0 0 8px 0;
}

.topup-header p {
  font-size: 0.88rem;
  color: var(--text-muted, #a3a3a3);
  margin: 0;
}

.topup-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
}

.topup-card {
  position: relative;
  background: rgba(4, 4, 4, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 18px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
  transition: transform 0.25s ease, border-color 0.25s ease;
  box-sizing: border-box;
}

.topup-card:hover {
  transform: translateY(-4px);
  border-color: var(--cyan-accent, #3b82f6);
}

.topup-card.featured-topup {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(14, 14, 14, 0.7);
}

.topup-pill {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.8px;
  color: var(--text-muted, #a3a3a3);
  margin-bottom: 10px;
}

.topup-pill.gold {
  color: var(--gold-accent, #3b82f6);
}

.topup-price-box {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 2px;
  margin-bottom: 6px;
}

.t-curr {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--cyan-accent, #3b82f6);
}

.t-val {
  font-family: var(--font-heading, inherit);
  font-size: clamp(1.8rem, 2.2vw, 2.1rem);
  font-weight: 800;
  color: var(--text-primary);
}

.topup-credits {
  font-size: 0.9rem;
  color: var(--text-primary, #ffffff);
  margin-bottom: 10px;
}

.topup-credits strong {
  font-size: 1.15rem;
  font-family: var(--font-heading, inherit);
}

.topup-subtext {
  font-size: 0.78rem;
  color: var(--text-muted, #a3a3a3);
  line-height: 1.4;
  margin: 0 0 16px 0;
}

.topup-buy-btn {
  width: 100%;
  padding: 10px 14px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}

/* ==========================================================================
   STRICT RESPONSIVE HARDENING (<900px MOBILE/TABLETS)
   ========================================================================== */
@media (max-width: 900px) {
  .pricing-section {
    padding: 40px 4% !important;
  }

  .pricing-cards-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    margin-bottom: 32px !important;
  }

  .pricing-card {
    padding: 22px 18px !important;
    border-radius: 18px !important;
  }

  .pricing-card.featured-plan {
    transform: none !important;
  }

  .topup-wrapper {
    padding: 20px 14px !important;
    border-radius: 18px !important;
  }

  .topup-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .topup-card {
    padding: 18px 14px !important;
  }
}
/* ==========================================================================
   DASHBOARD TOP-UP MODULE (SHARED STYLESHEET RULES)
   ========================================================================== */
.dash-topup-panel {
  margin-top: 24px;
}

.dash-topup-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
  margin-top: 20px;
}

.dash-topup-card {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(197, 155, 39, 0.2);
  border-radius: 14px;
  padding: 20px 18px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.3s ease, border-color 0.3s ease;
}

.dash-topup-card:hover {
  transform: translateY(-3px);
  border-color: #c59b27;
}

.dash-topup-card.featured {
  background: rgba(197, 155, 39, 0.08);
  border-color: #c59b27;
  box-shadow: 0 0 20px rgba(197, 155, 39, 0.15);
}

.dash-topup-card-body {
  margin-bottom: 16px;
}

.dash-topup-badge {
  font-size: 0.72rem;
  color: #c59b27;
  font-weight: 700;
  letter-spacing: 1px;
  display: inline-block;
}

.dash-topup-badge.gold {
  font-weight: 800;
}

.dash-topup-price {
  font-family: var(--font-heading, inherit);
  font-size: 1.85rem;
  font-weight: 800;
  color: var(--text-primary);
  margin: 8px 0 4px 0;
}

.dash-topup-price.gold {
  color: #c59b27;
}

.dash-topup-credits {
  font-size: 0.95rem;
  color: #e2e8f0;
  font-weight: 600;
}

.dash-topup-credits.gold {
  color: #c59b27;
  font-weight: 700;
}

.dash-topup-desc {
  font-size: 0.78rem;
  color: var(--text-muted, #94a3b8);
  margin: 8px 0 0 0;
  line-height: 1.4;
}

.dash-topup-btn {
  width: 100%;
}

.dash-topup-btn.featured-btn {
  border-color: #c59b27;
  color: #c59b27;
}

@media (max-width: 768px) {
  .dash-topup-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}
/* Restore native smooth scroll exactly where initSmoothScroll() (script.js)
   leaves Lenis uninitialized — touch devices — so anchor-link navigation
   doesn't just jump. Never combined with Lenis, so no conflict. */
@media (pointer: coarse) {
  html, body { scroll-behavior: smooth; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal-on-scroll {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

/* Accessible Keyboard Focus Ring (overrides component-level outline:none) */
:focus-visible {
  outline: 2px solid var(--cyan-accent) !important;
  outline-offset: 3px !important;
  border-radius: 4px;
}