/* =====================================================================
   callassist — marketing site
   Modern dark theme, glassmorphism, animated visuals
   ===================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Surfaces */
  --bg: #050714;
  --bg-1: #0a0c1f;
  --bg-2: #0f1226;
  --bg-elev: #11142b;
  --bg-elev-2: #161a36;
  --bg-glass: rgba(20, 23, 50, 0.55);

  /* Borders */
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);
  --border-glow: rgba(167, 139, 250, 0.35);

  /* Text */
  --text: #f1f5fb;
  --text-2: #cbd5e1;
  --text-muted: #94a3b8;
  --text-dim: #64748b;

  /* Brand palette */
  --violet: #a78bfa;
  --violet-2: #8b5cf6;
  --cyan: #22d3ee;
  --emerald: #34d399;
  --amber: #fbbf24;
  --pink: #f472b6;
  --red: #f87171;

  /* Gradients */
  --grad-primary: linear-gradient(135deg, #a78bfa 0%, #22d3ee 50%, #34d399 100%);
  --grad-warm: linear-gradient(135deg, #f472b6 0%, #fbbf24 100%);
  --grad-cool: linear-gradient(135deg, #22d3ee 0%, #a78bfa 100%);
  --grad-text: linear-gradient(120deg, #a78bfa 0%, #22d3ee 60%, #34d399 100%);
  --grad-violet: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 100%);

  /* Shadows / glows */
  --shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 12px 40px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 30px 80px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 40px rgba(167, 139, 250, 0.35);
  --shadow-glow-cyan: 0 0 50px rgba(34, 211, 238, 0.4);

  /* Type */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: "Space Grotesk", "Inter", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --font-ur: "Noto Nastaliq Urdu", serif;
  --font-ar: "Noto Naskh Arabic", serif;
  --font-hi: "Noto Sans Devanagari", "Inter", sans-serif;

  /* Sizing */
  --radius: 14px;
  --radius-sm: 8px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  /* Layout */
  --container: 1200px;
  --gutter: clamp(20px, 4vw, 48px);

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---------- Theme Switcher UI & Light Theme Overrides ---------- */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--bg-glass);
  border: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  padding: 0;
  transition: all 250ms var(--ease);
  box-shadow: var(--shadow-sm);
  margin-right: 4px;
}
.theme-toggle:hover {
  transform: scale(1.08);
  border-color: var(--violet);
  color: var(--violet);
}
.theme-toggle .sun-icon { display: none; }
.theme-toggle .moon-icon { display: block; }

[data-theme="light"] .theme-toggle .sun-icon { display: block; color: #f59e0b; }
[data-theme="light"] .theme-toggle .moon-icon { display: none; }



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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* `clip` (not hidden) stops sideways scroll without creating a scroll
     container, so position:sticky on the nav keeps working. Decorative
     rotating rings/orbs report a wide bounding box while animating. */
  overflow-x: clip;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  min-height: 100vh;
  position: relative;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; }
ul, ol { list-style: none; }

::selection { background: rgba(167, 139, 250, 0.35); color: #fff; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: rgba(167, 139, 250, 0.2); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: rgba(167, 139, 250, 0.4); }

/* ---------- Container ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  position: relative;
}

/* =====================================================================
   Animated background
   ===================================================================== */
.bg-mesh {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(139, 92, 246, 0.18), transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(34, 211, 238, 0.12), transparent 50%),
    radial-gradient(ellipse at 50% 100%, rgba(52, 211, 153, 0.08), transparent 60%),
    var(--bg);
}

.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.5;
  animation: orbFloat 20s ease-in-out infinite;
}

.orb-1 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, #8b5cf6 0%, transparent 70%);
  top: -10%; left: -5%;
  animation-delay: 0s;
}
.orb-2 {
  width: 600px; height: 600px;
  background: radial-gradient(circle, #22d3ee 0%, transparent 70%);
  top: 30%; right: -10%;
  animation-delay: -7s;
  opacity: 0.35;
}
.orb-3 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, #34d399 0%, transparent 70%);
  bottom: -5%; left: 30%;
  animation-delay: -14s;
  opacity: 0.25;
}

@keyframes orbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(40px, -30px) scale(1.08); }
  66% { transform: translate(-30px, 40px) scale(0.95); }
}

.grid-overlay {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
}

.noise {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.05 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
  opacity: 0.4;
  mix-blend-mode: overlay;
}

/* =====================================================================
   Navigation
   ===================================================================== */
.nav-wrap {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 16px 0;
  transition: padding 200ms var(--ease);
}
.nav-wrap.is-scrolled { padding: 10px 0; }

.nav {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 12px 20px;
  background: var(--bg-glass);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid var(--border);
  border-radius: 100px;
  box-shadow: var(--shadow-sm);
  transition: all 200ms var(--ease);
}
.nav-wrap.is-scrolled .nav {
  background: rgba(5, 7, 20, 0.85);
  box-shadow: var(--shadow-md);
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 17px;
  font-family: var(--font-display);
  letter-spacing: -0.01em;
}
.brand-logo-img {
  height: 44px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(34, 211, 238, 0.6)) drop-shadow(0 0 18px rgba(167, 139, 250, 0.4));
  transition: transform 300ms var(--ease);
}
.nav-brand:hover .brand-logo-img {
  transform: scale(1.08) rotate(3deg);
}

.brand-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.brand-text {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.brand-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--emerald);
  box-shadow: 0 0 8px var(--emerald);
  animation: livePulse 2s ease-in-out infinite;
}
@keyframes livePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.85); }
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
.nav-links a {
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-2);
  border-radius: 100px;
  transition: color 150ms, background 150ms;
}
.nav-links a:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
}

.nav-cta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-burger {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
}
.nav-burger span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 200ms, opacity 200ms;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  border-radius: 100px;
  cursor: pointer;
  transition: all 200ms var(--ease);
  white-space: nowrap;
  border: 1px solid transparent;
}
.btn-lg { padding: 16px 28px; font-size: 15px; }

.btn-primary {
  background: var(--grad-text);
  color: #0a0c1f;
  font-weight: 700;
  box-shadow: 0 4px 24px rgba(167, 139, 250, 0.4);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(167, 139, 250, 0.55);
}
.btn-primary-sm {
  padding: 8px 16px;
  font-size: 13px;
  background: var(--grad-text);
  color: #0a0c1f;
  font-weight: 700;
  box-shadow: 0 2px 12px rgba(167, 139, 250, 0.4);
}
.btn-primary-sm:hover {
  box-shadow: 0 4px 20px rgba(167, 139, 250, 0.55);
  transform: translateY(-1px);
}

.btn-ghost {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  border: 1px solid var(--border);
  backdrop-filter: blur(8px);
}
.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--border-strong);
}
.btn-ghost-sm {
  padding: 8px 14px;
  font-size: 13px;
  color: var(--text-2);
  border: 1px solid var(--border);
  background: transparent;
}
.btn-ghost-sm:hover {
  color: var(--text);
  border-color: var(--border-strong);
}

/* =====================================================================
   Hero
   ===================================================================== */
.hero {
  padding: 80px 0 60px;
  position: relative;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 60px;
  align-items: center;
}
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(52, 211, 153, 0.1);
  border: 1px solid rgba(52, 211, 153, 0.25);
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
  color: var(--emerald);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 24px;
}
.eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--emerald);
  box-shadow: 0 0 8px var(--emerald);
  animation: livePulse 2s ease-in-out infinite;
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(1.95rem, 4.2vw, 3.5rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin-bottom: 24px;
}

.grad-text {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
}

.rotator {
  display: block;
  position: relative;
  min-width: 5ch;
  max-width: 100%;
  vertical-align: top;
  /* reserve one line so the swap never reflows the paragraphs below */
  min-height: 1.05em;
}
.rotator-word {
  position: absolute;
  top: 0; left: 0;
  right: 0;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0;
  transform: translateY(18px);
  /* outgoing word clears out fast so two words are never both legible */
  transition: opacity 180ms var(--ease), transform 320ms var(--ease);
  white-space: nowrap;
  pointer-events: none;
}
.rotator-word.is-active {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 420ms 140ms var(--ease-out), transform 520ms var(--ease-out);
  pointer-events: auto;
}
.rotator-word[data-color="violet"] {
  background: linear-gradient(120deg, #a78bfa, #c4b5fd);
  -webkit-background-clip: text;
  background-clip: text;
}
.rotator-word[data-color="cyan"] {
  background: linear-gradient(120deg, #22d3ee, #67e8f9);
  -webkit-background-clip: text;
  background-clip: text;
}
.rotator-word[data-color="amber"] {
  background: linear-gradient(120deg, #fbbf24, #fcd34d);
  -webkit-background-clip: text;
  background-clip: text;
}
.rotator-word[data-color="emerald"] {
  background: linear-gradient(120deg, #34d399, #6ee7b7);
  -webkit-background-clip: text;
  background-clip: text;
}
.rotator-word[data-color="pink"] {
  background: linear-gradient(120deg, #f472b6, #f9a8d4);
  -webkit-background-clip: text;
  background-clip: text;
}

.hero-sub {
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-2);
  max-width: 540px;
  margin-bottom: 36px;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.hero-trust {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--text-muted);
}
.hero-trust li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.trust-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-dim);
}
.trust-dot-live {
  background: var(--emerald);
  box-shadow: 0 0 8px var(--emerald);
}

/* ---------- Hero visual ---------- */
.hero-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 540px;
}
.visual-stage {
  position: relative;
  width: 100%;
  max-width: 560px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

.orbit-ring {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1px dashed rgba(167, 139, 250, 0.2);
  animation: ringSpin 60s linear infinite;
}
.orbit-ring-2 {
  width: 130%;
  height: 130%;
  border-style: dotted;
  border-color: rgba(34, 211, 238, 0.15);
  animation: ringSpin 80s linear infinite reverse;
}
@keyframes ringSpin {
  to { transform: rotate(360deg); }
}

.lang-tag {
  position: absolute;
  top: 50%;
  left: 50%;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--bg-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: 100px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  box-shadow: var(--shadow-md);
  animation: tagOrbit 22s linear infinite;
  animation-delay: var(--delay);
  white-space: nowrap;
  margin: -18px 0 0 -28px; /* roughly center the tag on its origin point */
  transform-origin: center;
}
.lang-tag .tag-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.tag-en .tag-dot { background: #a78bfa; box-shadow: 0 0 8px #a78bfa; }
.tag-fr .tag-dot { background: #22d3ee; box-shadow: 0 0 8px #22d3ee; }
.tag-ar .tag-dot { background: #fbbf24; box-shadow: 0 0 8px #fbbf24; }
.tag-ur { font-family: var(--font-ur); font-size: 15px; }
.tag-ur .tag-dot { background: #34d399; box-shadow: 0 0 8px #34d399; }
.tag-hi { font-family: var(--font-hi); }
.tag-hi .tag-dot { background: #f472b6; box-shadow: 0 0 8px #f472b6; }

@keyframes tagOrbit {
  0%   { transform: rotate(var(--angle)) translateY(-200px) rotate(calc(-1 * var(--angle))); }
  100% { transform: rotate(calc(var(--angle) + 360deg)) translateY(-200px) rotate(calc(-1 * (var(--angle) + 360deg))); }
}

/* ---------- 3D phone ---------- */
.phone-wrap {
  position: relative;
  z-index: 2;
  perspective: 1200px;
}
.phone {
  position: relative;
  width: 240px;
  height: 480px;
  background: linear-gradient(145deg, #1a1d3a 0%, #0a0c1f 100%);
  border-radius: 40px;
  padding: 10px;
  box-shadow:
    0 50px 100px rgba(0, 0, 0, 0.6),
    0 0 0 2px rgba(255, 255, 255, 0.1),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  transform: rotateY(-12deg) rotateX(5deg) rotateZ(-2deg);
  animation: phoneFloat 6s ease-in-out infinite;
  transition: transform 400ms var(--ease);
}
.phone:hover { transform: rotateY(-6deg) rotateX(2deg) rotateZ(0); }

@keyframes phoneFloat {
  0%, 100% { transform: rotateY(-12deg) rotateX(5deg) rotateZ(-2deg) translateY(0); }
  50% { transform: rotateY(-12deg) rotateX(5deg) rotateZ(-2deg) translateY(-12px); }
}

.phone-notch {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 90px;
  height: 22px;
  background: #000;
  border-radius: 0 0 14px 14px;
  z-index: 2;
}

.phone-screen {
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #0a0c1f 0%, #161a36 100%);
  border-radius: 32px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 40px 18px 18px;
  position: relative;
}

.phone-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-2);
  padding: 0 6px 12px;
}
.phone-status-icons { display: flex; gap: 3px; }
.dot-ind {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--text-2);
}
.dot-ind:nth-child(1) { width: 12px; border-radius: 2px; }
.dot-ind:nth-child(2) { width: 12px; border-radius: 2px; }

.phone-call {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0 8px;
  position: relative;
}

.phone-call-pulse {
  position: absolute;
  top: 8px;
  right: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.phone-call-pulse span {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid var(--emerald);
  opacity: 0;
  animation: pulse 2s ease-out infinite;
}
.phone-call-pulse span:nth-child(2) { animation-delay: 0.7s; }
.phone-call-pulse span:nth-child(3) { animation-delay: 1.4s; }
@keyframes pulse {
  0% { transform: scale(0.5); opacity: 0.8; }
  100% { transform: scale(2); opacity: 0; }
}

.phone-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--grad-violet);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 8px 24px rgba(139, 92, 246, 0.4);
  margin-top: 12px;
}

.phone-caller {
  text-align: center;
  margin-top: 12px;
}
.phone-caller-name {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  font-family: var(--font-display);
}
.phone-caller-status {
  display: block;
  font-size: 10px;
  color: var(--emerald);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  margin-top: 4px;
}
.phone-caller-status::before {
  content: "●";
  margin-right: 4px;
  animation: livePulse 2s ease-in-out infinite;
}

.phone-wave {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 40px;
  margin: 16px 0;
}
.phone-wave span {
  width: 3px;
  background: var(--grad-primary);
  border-radius: 2px;
  height: var(--h);
  animation: waveBar 1.2s ease-in-out infinite;
}
.phone-wave span:nth-child(odd) { animation-duration: 0.9s; }
.phone-wave span:nth-child(3n) { animation-duration: 1.4s; }
@keyframes waveBar {
  0%, 100% { transform: scaleY(0.4); }
  50% { transform: scaleY(1.2); }
}

.phone-transcript {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-2);
  text-align: center;
  margin: 8px 0;
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-style: italic;
}
.transcript-line { display: block; }
.transcript-line.fade-in { animation: fadeInUp 400ms var(--ease); }
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.phone-actions {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding-top: 12px;
}
.phone-action {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  transition: all 150ms;
}
.phone-action:hover { background: rgba(255, 255, 255, 0.15); }
.phone-end {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  border-color: rgba(239, 68, 68, 0.5);
  box-shadow: 0 4px 16px rgba(239, 68, 68, 0.4);
}
.phone-end:hover { background: linear-gradient(135deg, #f87171, #ef4444); }

/* =====================================================================
   Section heads (shared)
   ===================================================================== */
.section-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 60px;
}
.section-tag {
  display: inline-block;
  padding: 5px 14px;
  background: rgba(167, 139, 250, 0.1);
  border: 1px solid rgba(167, 139, 250, 0.25);
  border-radius: 100px;
  font-size: 11px;
  font-weight: 700;
  color: var(--violet);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 20px;
}
.section-title {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 18px;
}
.section-sub {
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-muted);
}

/* =====================================================================
   Stats
   ===================================================================== */
.stats {
  padding: 40px 0 80px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.02), transparent);
  margin-top: 40px;
}
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}
@media (max-width: 760px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
}
.stat {
  text-align: center;
  padding: 0 10px;
  position: relative;
  min-width: 0;
}
.stat + .stat::before {
  content: "";
  position: absolute;
  left: 0; top: 20%;
  height: 60%;
  width: 1px;
  background: var(--border);
}
@media (max-width: 760px) {
  .stat + .stat::before { display: none; }
}
.stat-num {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 4vw, 2.8rem);
  font-weight: 700;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1.1;
  margin-bottom: 8px;
}
.stat-label {
  font-size: 13px;
  color: var(--text-2);
  font-weight: 500;
  line-height: 1.5;
}
.stat-label span {
  color: var(--text-dim);
  font-size: 12px;
}

/* =====================================================================
   Features
   ===================================================================== */
.features { padding: 100px 0; }

.feature-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 20px;
  min-height: 700px;
}
@media (max-width: 960px) {
  .feature-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
}

.feature {
  position: relative;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  overflow: hidden;
  transition: transform 300ms var(--ease), border-color 300ms, box-shadow 300ms;
}
.feature::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top left, rgba(167, 139, 250, 0.08), transparent 60%);
  opacity: 0;
  transition: opacity 300ms;
  pointer-events: none;
}
.feature:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}
.feature:hover::before { opacity: 1; }

.feature-lg {
  grid-column: 1;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.feature:nth-of-type(2) { grid-column: 2; grid-row: 1; }
.feature:nth-of-type(3) { grid-column: 3; grid-row: 1; }
.feature:nth-of-type(4) { grid-column: 2 / span 2; grid-row: 2; }

@media (max-width: 960px) {
  .feature-lg,
  .feature:nth-of-type(2),
  .feature:nth-of-type(3),
  .feature:nth-of-type(4) {
    grid-column: 1;
    grid-row: auto;
  }
}

.feature-text h3 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
  line-height: 1.3;
}
.feature-lg .feature-text h3 { font-size: 24px; }
.feature-text p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-2);
  margin-bottom: 14px;
}
.feature-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.feature-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-2);
}
.check {
  color: var(--emerald);
  font-weight: 700;
  font-size: 14px;
}

/* Feature art - call */
.art-call {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 200px;
  margin-bottom: 24px;
}
.art-call-phone {
  width: 180px;
  height: 320px;
  background: linear-gradient(145deg, #1a1d3a, #0a0c1f);
  border-radius: 28px;
  padding: 6px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1);
  transform: rotateY(-12deg) rotateX(4deg);
  z-index: 2;
}
.art-call-screen {
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #0a0c1f, #161a36);
  border-radius: 24px;
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.art-call-wave {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 50px;
}
.art-call-wave span {
  width: 3px;
  background: var(--grad-primary);
  border-radius: 2px;
  animation: waveBar 1.1s ease-in-out infinite;
}
.art-call-wave span:nth-child(1) { height: 25%; animation-delay: 0s; }
.art-call-wave span:nth-child(2) { height: 50%; animation-delay: 0.1s; }
.art-call-wave span:nth-child(3) { height: 75%; animation-delay: 0.2s; }
.art-call-wave span:nth-child(4) { height: 90%; animation-delay: 0.3s; }
.art-call-wave span:nth-child(5) { height: 60%; animation-delay: 0.4s; }
.art-call-wave span:nth-child(6) { height: 80%; animation-delay: 0.5s; }
.art-call-wave span:nth-child(7) { height: 45%; animation-delay: 0.6s; }
.art-call-wave span:nth-child(8) { height: 70%; animation-delay: 0.7s; }
.art-call-wave span:nth-child(9) { height: 55%; animation-delay: 0.8s; }
.art-call-wave span:nth-child(10) { height: 85%; animation-delay: 0.9s; }
.art-call-wave span:nth-child(11) { height: 40%; animation-delay: 1s; }
.art-call-wave span:nth-child(12) { height: 65%; animation-delay: 1.1s; }
.art-call-pill {
  padding: 4px 10px;
  background: rgba(52, 211, 153, 0.15);
  border: 1px solid rgba(52, 211, 153, 0.3);
  border-radius: 100px;
  font-size: 10px;
  color: var(--emerald);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.art-call-pill::before {
  content: "●";
  margin-right: 4px;
  animation: livePulse 2s ease-in-out infinite;
}
.art-call-ring {
  position: absolute;
  width: 240px;
  height: 240px;
  border: 1px solid rgba(167, 139, 250, 0.2);
  border-radius: 50%;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  animation: ringExpand 3s ease-out infinite;
}
.art-call-ring-2 {
  animation-delay: 1.5s;
  border-color: rgba(34, 211, 238, 0.15);
}
@keyframes ringExpand {
  0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0.8; }
  100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; }
}

/* Feature art - globe */
.art-globe {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 140px;
  margin-bottom: 20px;
}
.globe {
  position: relative;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(167, 139, 250, 0.3), rgba(34, 211, 238, 0.1) 50%, transparent 70%);
  border: 1px solid rgba(167, 139, 250, 0.3);
  box-shadow: inset 0 0 30px rgba(167, 139, 250, 0.1);
  animation: globeSpin 12s linear infinite;
}
.globe-meridian, .globe-equator {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(167, 139, 250, 0.25);
  border-radius: 50%;
}
.globe-meridian {
  transform: rotateY(60deg);
}
.globe-meridian-2 {
  transform: rotateY(-60deg);
}
.globe-equator {
  transform: rotateX(75deg);
  width: 100%;
  height: 50%;
  top: 25%;
}
.globe-pin {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 12px var(--cyan);
  animation: pinBlink 2s ease-in-out infinite;
}
.globe-pin:nth-child(5) { animation-delay: 0.5s; }
.globe-pin:nth-child(6) { animation-delay: 1s; }
.globe-pin:nth-child(7) { animation-delay: 1.5s; }
@keyframes pinBlink {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.5); }
}
.globe-pulse {
  position: absolute;
  inset: -10px;
  border: 1px solid rgba(34, 211, 238, 0.2);
  border-radius: 50%;
  animation: ringExpand 2.5s ease-out infinite;
}
@keyframes globeSpin {
  to { transform: rotate(360deg); }
}

/* Feature art - booking calendar */
.art-booking {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 160px;
  margin-bottom: 20px;
}
.cal {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  width: 200px;
  box-shadow: var(--shadow-md);
  transform: perspective(800px) rotateY(-8deg) rotateX(4deg);
  transition: transform 300ms var(--ease);
}
.feature:hover .cal { transform: perspective(800px) rotateY(-4deg) rotateX(2deg); }
.cal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 10px;
}
.cal-year { color: var(--text-dim); font-weight: 400; }
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  font-size: 10px;
}
.cal-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  color: var(--text-2);
  font-weight: 500;
}
.cal-dim { color: var(--text-dim); opacity: 0.4; }
.cal-taken {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-dim);
  text-decoration: line-through;
}
.cal-booked {
  background: rgba(167, 139, 250, 0.2);
  color: var(--violet);
  box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.4);
}
.cal-active {
  background: var(--grad-primary);
  color: #0a0c1f;
  font-weight: 700;
  box-shadow: 0 0 12px rgba(167, 139, 250, 0.6);
  animation: activePulse 2s ease-in-out infinite;
}
@keyframes activePulse {
  0%, 100% { box-shadow: 0 0 12px rgba(167, 139, 250, 0.4); }
  50% { box-shadow: 0 0 20px rgba(167, 139, 250, 0.8); }
}

/* Feature art - shield */
.art-shield {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 140px;
  margin-bottom: 20px;
}
.shield {
  filter: drop-shadow(0 8px 24px rgba(167, 139, 250, 0.3));
  animation: shieldFloat 4s ease-in-out infinite;
}
@keyframes shieldFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* =====================================================================
   How it works
   ===================================================================== */
.how { padding: 100px 0; position: relative; }
.how::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-strong), transparent);
  pointer-events: none;
}

.steps {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 20px;
  position: relative;
}
/* align-self keeps the connector at its natural 24px: `stretch` on the row
   blew it up to the full card width, and the 90deg rotation then painted it
   straight across the neighbouring cards on mobile */
.step-arrow {
  display: flex;
  align-items: center;
  align-self: center;
  flex: 0 0 auto;
}
@media (max-width: 880px) {
  .steps { flex-direction: column; }
  .step-arrow { transform: rotate(90deg); }
}

.step {
  flex: 1;
  min-width: 0;
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 32px 20px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: transform 300ms, border-color 300ms;
}
.step:hover { transform: translateY(-4px); border-color: var(--border-strong); }
.step-num {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-dim);
  margin-bottom: 16px;
  letter-spacing: 0.1em;
}
.step-art {
  width: 80px;
  height: 80px;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: var(--violet);
}

.step-art-1 .step-rings {
  position: absolute;
  inset: 0;
}
.step-art-1 .step-rings span {
  position: absolute;
  inset: 0;
  border: 1.5px solid rgba(167, 139, 250, 0.3);
  border-radius: 50%;
  animation: ringExpand 3s ease-out infinite;
}
.step-art-1 .step-rings span:nth-child(2) { animation-delay: 1s; }
.step-art-1 .step-rings span:nth-child(3) { animation-delay: 2s; }
.step-art-1 svg { position: relative; z-index: 2; color: var(--violet); }

.step-art-2 {
  background: var(--bg-elev-2);
  border-radius: 14px;
  border: 1px solid var(--border);
}
.step-lang-row {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}
.step-lang {
  padding: 4px 10px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-dim);
  border: 1px solid var(--border);
  transition: all 200ms;
}
.step-lang.active {
  background: var(--grad-text);
  color: #0a0c1f;
  border-color: transparent;
  transform: scale(1.15);
  box-shadow: 0 0 16px rgba(167, 139, 250, 0.5);
}

.step-art-3 {
  width: auto;
  height: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.step-tools {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
}
.tool {
  padding: 4px 10px;
  background: rgba(34, 211, 238, 0.1);
  border: 1px solid rgba(34, 211, 238, 0.25);
  border-radius: 6px;
  color: var(--cyan);
  text-align: left;
  animation: toolSlide 3s ease-in-out infinite;
}
.tool:nth-child(2) { animation-delay: 0.4s; }
.tool:nth-child(3) { animation-delay: 0.8s; }
.tool:nth-child(4) { animation-delay: 1.2s; }
.tool:nth-child(5) { animation-delay: 1.6s; }
@keyframes toolSlide {
  0%, 100% { transform: translateX(0); opacity: 0.7; }
  50% { transform: translateX(4px); opacity: 1; }
}

.step h3 {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 8px;
  line-height: 1.3;
}
.step p {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
}

.step-arrow {
  color: var(--text-dim);
  flex-shrink: 0;
  opacity: 0.5;
}

/* =====================================================================
   Languages
   ===================================================================== */
.languages { padding: 100px 0; position: relative; }
.languages::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(139, 92, 246, 0.06), transparent 70%);
  pointer-events: none;
}

.lang-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  position: relative;
}

.lang-card {
  position: relative;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  overflow: hidden;
  transition: transform 300ms var(--ease), border-color 300ms, box-shadow 300ms;
}
.lang-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--card-accent, var(--violet));
  opacity: 0.6;
}
.lang-card::after {
  content: "";
  position: absolute;
  top: -50%; right: -30%;
  width: 200px; height: 200px;
  background: radial-gradient(circle, var(--card-glow, rgba(167, 139, 250, 0.15)), transparent 60%);
  filter: blur(40px);
  pointer-events: none;
}
.lang-card:hover {
  transform: translateY(-6px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}
.lang-en { --card-accent: #a78bfa; --card-glow: rgba(167, 139, 250, 0.2); }
.lang-fr { --card-accent: #22d3ee; --card-glow: rgba(34, 211, 238, 0.2); }
.lang-ar { --card-accent: #fbbf24; --card-glow: rgba(251, 191, 36, 0.2); }
.lang-ur { --card-accent: #34d399; --card-glow: rgba(52, 211, 153, 0.2); }
.lang-hi { --card-accent: #f472b6; --card-glow: rgba(244, 114, 182, 0.2); }

.lang-flag {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}
.lang-code {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  background: var(--card-accent);
  color: #0a0c1f;
  border-radius: 6px;
}
.lang-name {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
}
.lang-ar .lang-name { font-family: var(--font-ar); font-size: 22px; }
.lang-ur .lang-name { font-family: var(--font-ur); font-size: 22px; }
.lang-hi .lang-name { font-family: var(--font-hi); font-size: 19px; }

.lang-sample {
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-2);
  font-style: italic;
  margin-bottom: 20px;
  min-height: 72px;
}
.lang-ar .lang-sample { font-family: var(--font-ar); font-size: 18px; }
.lang-ur .lang-sample { font-family: var(--font-ur); font-size: 20px; line-height: 1.8; }
.lang-hi .lang-sample { font-family: var(--font-hi); }
.lang-sample-ur { line-height: 2; }

.lang-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.lang-chip {
  padding: 3px 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: 100px;
  color: var(--text-muted);
  font-weight: 500;
}
.lang-status { color: var(--emerald); font-weight: 600; }
.lang-status::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--emerald);
  margin-right: 5px;
  box-shadow: 0 0 6px var(--emerald);
  animation: livePulse 2s ease-in-out infinite;
}

/* =====================================================================
   Use cases
   ===================================================================== */
.usecases { padding: 100px 0; }
.uc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}
.uc-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  transition: transform 300ms, border-color 300ms;
}
.uc-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
}
.uc-icon {
  font-size: 32px;
  margin-bottom: 16px;
  display: block;
}
.uc-card h3 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
  line-height: 1.3;
}
.uc-card p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
}

/* =====================================================================
   CTA
   ===================================================================== */
.cta { padding: 60px 0 100px; }
.cta-card {
  position: relative;
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.12), rgba(34, 211, 238, 0.08));
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xl);
  padding: clamp(40px, 6vw, 72px) clamp(24px, 4vw, 56px);
  text-align: center;
  overflow: hidden;
}
.cta-glow {
  position: absolute;
  top: -50%;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(167, 139, 250, 0.3), transparent 60%);
  filter: blur(80px);
  pointer-events: none;
}
.cta-card .section-tag { position: relative; }
.cta-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 auto 20px;
  max-width: 700px;
  position: relative;
}
.cta-sub {
  font-size: 17px;
  color: var(--text-2);
  max-width: 580px;
  margin: 0 auto 32px;
  line-height: 1.6;
  position: relative;
}
.cta-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 28px;
  position: relative;
}
.cta-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--text-muted);
  position: relative;
}
.cta-meta li { color: var(--text-muted); }

/* =====================================================================
   Footer
   ===================================================================== */
.footer {
  border-top: 1px solid var(--border);
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.3));
  padding: 60px 0 24px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}
@media (max-width: 760px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
}
.footer-brand .nav-brand { margin-bottom: 12px; }
.footer-tag {
  font-size: 14px;
  color: var(--text-muted);
  max-width: 320px;
  line-height: 1.5;
}
.footer-col h3,
.footer-col h4 {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text);
  margin-bottom: 14px;
}
.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.footer-col li {
  font-size: 13px;
  color: var(--text-muted);
}
.footer-col a:hover { color: var(--text); }
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-dim);
}
.footer-bottom .dot { opacity: 0.4; }

/* =====================================================================
   Reveal animations (scroll-triggered)
   ===================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
.reveal[data-reveal="right"] { transform: translateX(40px); }
.reveal[data-reveal="up"] { transform: translateY(24px); }
.reveal.is-visible {
  opacity: 1;
  transform: translate(0, 0);
}
.reveal[data-delay="60"] { transition-delay: 60ms; }
.reveal[data-delay="80"] { transition-delay: 80ms; }
.reveal[data-delay="120"] { transition-delay: 120ms; }
.reveal[data-delay="140"] { transition-delay: 140ms; }
.reveal[data-delay="160"] { transition-delay: 160ms; }
.reveal[data-delay="180"] { transition-delay: 180ms; }
.reveal[data-delay="200"] { transition-delay: 200ms; }
.reveal[data-delay="240"] { transition-delay: 240ms; }

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

/* =====================================================================
   Mobile nav (when burger active)
   ===================================================================== */
@media (max-width: 880px) {
  .nav-burger { display: flex; }
  .nav-links {
    position: absolute;
    top: calc(100% + 12px);
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    padding: 16px;
    background: var(--bg-glass);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border);
    border-radius: 20px;
    margin: 0;
    gap: 0;
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity 200ms, transform 200ms;
  }
  .nav-links.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .nav-links a { padding: 12px 16px; }
  .nav-cta { display: none; }
}

/* =====================================================================
   NEW: 3D Hero Image & Industry Showcase Styling
   ===================================================================== */
.hero-3d-card {
  position: relative;
  width: 240px;
  height: 240px;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-xl);
  overflow: hidden;
  margin-bottom: 0;
  flex-shrink: 0;
  background: rgba(8, 11, 26, 0.95);
  border: 1px solid var(--border-glow);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 30px rgba(34, 211, 238, 0.2);
}

.hero-3d-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 500ms var(--ease-out);
}

.hero-3d-card:hover .hero-3d-img {
  transform: scale(1.04);
}

.hero-3d-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(5, 7, 20, 0.85) 0%, transparent 60%);
  display: flex;
  align-items: flex-end;
  padding: 16px;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(10, 12, 31, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(34, 211, 238, 0.3);
  font-size: 10px;
  letter-spacing: -0.01em;
  white-space: nowrap;
  max-width: 100%;
  font-family: var(--font-mono);
  color: var(--cyan);
}

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

/* =====================================================================
   Industry Showcase Section
   ===================================================================== */
.industries-section {
  padding: 100px 0;
  position: relative;
  border-bottom: 1px solid var(--border);
}

.industry-tabs {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin-bottom: 32px;
}

@media (max-width: 990px) {
  .industry-tabs { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 580px) {
  .industry-tabs { grid-template-columns: repeat(2, 1fr); }
}

.ind-tab {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  padding: 18px 12px;
  border-radius: var(--radius);
  color: var(--text-2);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
  cursor: pointer;
  pointer-events: auto;
  transition: all 250ms var(--ease);
}

.ind-tab * {
  pointer-events: none;
}

.ind-tab:hover {
  background: var(--bg-elev-2);
  border-color: var(--border-strong);
  color: #fff;
}

.ind-tab.active {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.25), rgba(34, 211, 238, 0.15));
  border-color: var(--violet);
  box-shadow: var(--shadow-glow);
  color: #fff;
}

.ind-tab-3d-icon {
  width: 44px;
  height: 44px;
  object-fit: contain;
  border: none;
  background: transparent;
  filter: drop-shadow(0 4px 12px rgba(34, 211, 238, 0.4));
  transition: transform 250ms var(--ease), filter 250ms var(--ease);
}

.ind-tab:hover .ind-tab-3d-icon,
.ind-tab.active .ind-tab-3d-icon {
  transform: scale(1.15) translateY(-2px);
  filter: drop-shadow(0 8px 18px rgba(34, 211, 238, 0.6));
}

.ind-tab-icon {
  font-size: 20px;
}

/* Display Card */
.ind-display-card {
  position: relative;
  background: rgba(10, 13, 30, 0.90);
  backdrop-filter: blur(20px);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xl);
  overflow: hidden;
  padding: var(--gutter);
  box-shadow: var(--shadow-lg);
}

.ind-bg-watermark {
  position: absolute;
  inset: 0;
  width: 100%;
  opacity: 0.65;
  pointer-events: none;
  overflow: hidden;
  transition: opacity 300ms var(--ease);
  /* full-bleed 3D graphic, showing clearly through right-hand frosted glass Box B */
  mask-image: linear-gradient(100deg, rgba(0, 0, 0, 0.40) 0%, rgba(0, 0, 0, 0.75) 35%, black 100%);
  -webkit-mask-image: linear-gradient(100deg, rgba(0, 0, 0, 0.40) 0%, rgba(0, 0, 0, 0.75) 35%, black 100%);
}

.ind-bg-watermark img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: right center;
  transition: opacity 300ms var(--ease), transform 500ms var(--ease-out);
}

.ind-display-card:hover .ind-bg-watermark img {
  transform: scale(1.03);
}

@media (max-width: 900px) {
  .ind-bg-watermark {
    width: 100%;
    mask-image: linear-gradient(180deg, black 0%, rgba(0, 0, 0, 0.45) 55%, rgba(0, 0, 0, 0.25) 100%);
    -webkit-mask-image: linear-gradient(180deg, black 0%, rgba(0, 0, 0, 0.45) 55%, rgba(0, 0, 0, 0.25) 100%);
  }
}

.ind-card-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 40px;
  position: relative;
  z-index: 2;
}

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

.ind-header {
  margin-bottom: 16px;
}

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

.opacity-control-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(15, 20, 45, 0.85);
  backdrop-filter: blur(12px);
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(167, 139, 250, 0.3);
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--text-2);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.opacity-control-pill label {
  color: var(--violet);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.opacity-range {
  width: 90px;
  height: 6px;
  border-radius: 3px;
  accent-color: var(--cyan);
  cursor: pointer;
}

#opacityVal {
  color: var(--cyan);
  font-weight: 800;
  min-width: 32px;
}

.ind-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: rgba(34, 211, 238, 0.15);
  color: var(--cyan);
  border: 1px solid rgba(34, 211, 238, 0.3);
  margin-bottom: 8px;
}

.ind-title {
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 800;
  color: var(--text);
}

.ind-desc {
  font-size: 15px;
  color: var(--text-2);
  line-height: 1.6;
  margin-bottom: 24px;
}

.ind-subtitle {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  display: block;
  margin-bottom: 12px;
}

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

@media (max-width: 600px) {
  .superpower-grid { grid-template-columns: 1fr; }
}

.sp-card {
  background: var(--bg-elev);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  padding: 14px;
  border-radius: var(--radius-sm);
}

.sp-num {
  display: inline-block;
  background: var(--violet);
  color: #fff;
  font-weight: 800;
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 6px;
  margin-bottom: 8px;
}

.sp-text strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}

.sp-text p {
  font-size: 11px;
  color: #d1d5db;
  line-height: 1.4;
  font-weight: 500;
}

.ind-integrations {
  margin-top: 20px;
}

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

.chip {
  background: var(--bg-elev);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  padding: 4px 12px;
  border-radius: 8px;
  font-size: 12px;
  color: var(--text);
  font-weight: 600;
}

/* Pain Points Column (Box B) - Translucent Frosted Glass so background graphic is partially visible */
.ind-pain-col {
  background: var(--bg-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--shadow-md);
}

.pain-tag {
  font-size: 11px;
  font-weight: 700;
  color: var(--violet);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: block;
}

.pain-header h4 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin-top: 4px;
  margin-bottom: 16px;
}

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

.pain-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--text);
  background: var(--bg-elev);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  font-weight: 500;
}

.pain-x {
  color: var(--red);
  font-weight: 800;
  font-size: 12px;
  flex-shrink: 0;
  margin-top: 2px;
}

.btn-block {
  width: 100%;
  text-align: center;
  justify-content: center;
}

/* =====================================================================
   ROI Calculator Styling
   ===================================================================== */
.roi-section {
  padding: 100px 0;
  border-bottom: 1px solid var(--border);
}

.roi-widget {
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xl);
  padding: var(--gutter);
  box-shadow: var(--shadow-lg);
}

.roi-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 40px;
  align-items: center;
}
.roi-grid > * { min-width: 0; }

@media (max-width: 880px) {
  .roi-grid { grid-template-columns: 1fr; }
}

.slider-group {
  margin-bottom: 28px;
}

.slider-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.slider-header label {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}

.slider-val {
  background: rgba(167, 139, 250, 0.15);
  border: 1px solid rgba(167, 139, 250, 0.3);
  color: var(--violet);
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 800;
  font-family: var(--font-mono);
}

.roi-slider {
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.1);
  outline: none;
  accent-color: var(--violet);
  cursor: pointer;
}

.roi-output-card {
  background: var(--bg);
  border: 1px solid var(--border-glow);
  box-shadow: var(--shadow-glow);
  border-radius: var(--radius-lg);
  padding: 30px;
}

.roi-card-tag {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--emerald);
  display: block;
}

.roi-main-num {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 46px);
  font-weight: 800;
  color: #fff;
  margin: 6px 0;
}

.roi-note {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 20px;
}

.roi-breakdown {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 20px;
}

.roi-sub-box {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  padding: 12px;
  border-radius: var(--radius-sm);
}

.roi-sub-box span {
  font-size: 11px;
  color: var(--text-muted);
  display: block;
}

.roi-sub-box strong {
  font-size: 18px;
  color: var(--cyan);
  font-family: var(--font-display);
}

/* =====================================================================
   Pricing Section Styling
   ===================================================================== */
.pricing-section {
  padding: 100px 0;
  border-bottom: 1px solid var(--border);
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}

@media (max-width: 960px) {
  .pricing-grid { grid-template-columns: 1fr; max-width: 500px; margin: 0 auto; }
}

.price-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  transition: transform 300ms var(--ease), border-color 300ms var(--ease);
}

.price-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
}

.price-popular {
  background: linear-gradient(180deg, var(--bg-elev-2) 0%, var(--bg-elev) 100%);
  border: 2px solid var(--violet);
  box-shadow: var(--shadow-glow);
}

.pop-tag {
  position: absolute;
  top: -14px; left: 50%;
  transform: translateX(-50%);
  background: var(--violet);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 16px;
  border-radius: 999px;
  text-transform: uppercase;
  white-space: nowrap;
}

.price-badge {
  font-size: 12px;
  font-weight: 700;
  color: var(--violet);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.price-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 800;
  color: #fff;
  margin-top: 4px;
}

.price-desc {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 10px 0 20px;
}

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

.price-amount .num {
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: 800;
  color: #fff;
}

.price-amount .period {
  font-size: 14px;
  color: var(--text-muted);
}

.price-min {
  font-size: 12px;
  font-weight: 700;
  color: var(--cyan);
  display: block;
  margin-bottom: 20px;
}

.price-feats {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 28px;
  border-top: 1px solid var(--border);
  padding-top: 20px;
}

.price-feats li {
  font-size: 13px;
  color: var(--text-2);
}


/* =====================================================================
   POLISH PASS — legibility, responsive hardening, micro-interactions
   ===================================================================== */

/* ---------- small utilities that were referenced but never defined ------ */
.mt-4 { margin-top: 16px; }

.border-glow {
  position: relative;
  isolation: isolate;
}
.border-glow::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.9), rgba(34, 211, 238, 0.5), rgba(52, 211, 153, 0.7));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0.55;
  pointer-events: none;
  z-index: 3;
  transition: opacity 300ms var(--ease);
}
.border-glow:hover::after { opacity: 0.9; }

/* ---------- phone: the call outcome line was completely unstyled -------- */
.phone-outcome {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: var(--emerald);
  background: rgba(52, 211, 153, 0.1);
  border: 1px solid rgba(52, 211, 153, 0.28);
  border-radius: 10px;
  padding: 8px 10px;
  box-shadow: inset 0 0 20px rgba(52, 211, 153, 0.08);
}

/* ---------- richer spectrum motion on the live-call waveform ----------- */
.phone-wave { justify-content: center; }
.phone-wave span { animation-delay: calc(var(--n, 0) * -0.17s); }
.phone-wave span:nth-child(1) { --n: 0; }
.phone-wave span:nth-child(2) { --n: 3; }
.phone-wave span:nth-child(3) { --n: 1; }
.phone-wave span:nth-child(4) { --n: 4; }
.phone-wave span:nth-child(5) { --n: 2; }
.phone-wave span:nth-child(6) { --n: 5; }
.phone-wave span:nth-child(7) { --n: 1; }
.phone-wave span:nth-child(8) { --n: 4; }
.phone-wave span:nth-child(9) { --n: 2; }

/* =====================================================================
   Industry showcase — vibrant art behind a frosted-glass reading surface
   ===================================================================== */
.glass-panel {
  background: var(--bg-glass);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-lg);
}
/* browsers without backdrop-filter still get a readable (opaque) surface */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .glass-panel,
  .ind-pain-col { background: var(--bg-elev); }
}

/* min-width:0 stops a wide child (the capability grid) from forcing the
   whole column past the viewport on a phone */
.ind-card-grid { gap: 24px; align-items: start; }
.ind-card-grid > * { min-width: 0; }

/* slightly larger capability text now that it sits on frosted glass.
   min(155px, 100%) lets the track collapse below its floor on narrow
   screens instead of overflowing. */
.superpower-grid { grid-template-columns: repeat(auto-fit, minmax(min(155px, 100%), 1fr)); }
.sp-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  transition: transform 250ms var(--ease), background 250ms var(--ease), border-color 250ms var(--ease);
}
.sp-card:hover {
  transform: translateY(-3px);
  background: var(--bg-elev-2);
  border-color: var(--border-glow);
}
.sp-text strong { font-size: 13px; line-height: 1.3; color: var(--text); }
.sp-text p { font-size: 12px; color: var(--text-2); }

/* space-between spread three children across a now-taller column and left
   craters of dead space; push only the CTA to the bottom instead */
.ind-pain-col {
  align-self: stretch;
  justify-content: flex-start;
}
.ind-pain-col .pain-list { margin-bottom: 0; }
.pain-cta { margin-top: auto; padding-top: 24px; }
.pain-list li { transition: transform 200ms var(--ease), border-color 200ms var(--ease); }
.pain-list li:hover { transform: translateX(3px); border-color: rgba(248, 113, 113, 0.4); }

/* the visibility slider reads as a real control */
.opacity-control-pill { flex-shrink: 0; }
.opacity-range {
  -webkit-appearance: none;
  appearance: none;
  background: rgba(255, 255, 255, 0.16);
  outline: none;
}
.opacity-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--cyan);
  border: 2px solid #061018;
  box-shadow: 0 0 10px rgba(34, 211, 238, 0.8);
  cursor: pointer;
  transition: transform 150ms var(--ease);
}
.opacity-range::-webkit-slider-thumb:hover { transform: scale(1.18); }
.opacity-range::-moz-range-thumb {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--cyan);
  border: 2px solid #061018;
  box-shadow: 0 0 10px rgba(34, 211, 238, 0.8);
  cursor: pointer;
}

.ind-tab { min-width: 0; }
.ind-tab span:not(.ind-tab-icon) { line-height: 1.25; }
.ind-tab-icon {
  transition: transform 250ms var(--ease-bounce);
  line-height: 1;
}
.ind-tab:hover .ind-tab-icon,
.ind-tab.active .ind-tab-icon { transform: scale(1.18) rotate(-4deg); }

/* =====================================================================
   ROI calculator — chunkier, more tactile sliders
   ===================================================================== */
.roi-slider {
  -webkit-appearance: none;
  appearance: none;
  background-color: rgba(255, 255, 255, 0.09);
  border: 1px solid var(--border);
  /* filled portion of the track, driven by --fill from app.js */
  background-image: linear-gradient(90deg, #a78bfa 0%, #22d3ee var(--fill, 0%), transparent var(--fill, 0%));
  background-repeat: no-repeat;
}
.roi-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--grad-text);
  border: 3px solid #0a0c1f;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5), 0 0 16px rgba(167, 139, 250, 0.55);
  cursor: grab;
  transition: transform 150ms var(--ease), box-shadow 150ms var(--ease);
}
.roi-slider::-webkit-slider-thumb:hover { transform: scale(1.12); }
.roi-slider:active::-webkit-slider-thumb { cursor: grabbing; transform: scale(1.05); }
.roi-slider::-moz-range-thumb {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #a78bfa;
  border: 3px solid #0a0c1f;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  cursor: grab;
}
.slider-val {
  transition: transform 180ms var(--ease-bounce), background 180ms var(--ease);
  white-space: nowrap;
}
.slider-val.is-bumped { transform: scale(1.07); background: rgba(167, 139, 250, 0.28); }
.roi-main-num { transition: transform 180ms var(--ease-bounce); }
.roi-main-num.is-bumped { transform: scale(1.03); }

/* =====================================================================
   Pricing — put every card on the same baseline grid
   ===================================================================== */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 961px) {
    .pricing-grid { grid-template-rows: repeat(5, auto); }
    .price-card {
      display: grid;
      grid-row: span 5;
      grid-template-rows: subgrid;
      align-content: start;
    }
  }
}
.price-card > * { min-width: 0; }
.price-head { align-self: start; }
.price-feats li {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  line-height: 1.45;
}
.price-popular { z-index: 1; }
.pop-tag { box-shadow: 0 6px 20px rgba(139, 92, 246, 0.55); }
.price-card .btn-block { align-self: end; }

/* =====================================================================
   Languages — full 30+ roster
   ===================================================================== */
.lang-roster {
  margin-top: 28px;
  padding: 28px clamp(20px, 3vw, 32px);
  background: rgba(10, 13, 30, 0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  position: relative;
}
.lang-roster-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.lang-roster-head h3 {
  font-family: var(--font-display);
  font-size: clamp(17px, 2.2vw, 21px);
  font-weight: 700;
  color: #fff;
}
.lang-roster-count {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
}
.lang-roster-count strong {
  color: var(--emerald);
  font-size: 15px;
  margin-right: 4px;
}

.lang-badges {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 8px;
}
.lang-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: 10px;
  transition: transform 200ms var(--ease), background 200ms var(--ease), border-color 200ms var(--ease);
}
.lang-badge:hover {
  transform: translateY(-2px);
  background: rgba(167, 139, 250, 0.12);
  border-color: rgba(167, 139, 250, 0.45);
}
.lang-badge-code {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--cyan);
  background: rgba(34, 211, 238, 0.12);
  border: 1px solid rgba(34, 211, 238, 0.25);
  border-radius: 5px;
  padding: 2px 5px;
  min-width: 30px;
  text-align: center;
}
.lang-badge-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lang-badge-rtl .lang-badge-name { font-family: var(--font-ar); font-size: 15px; }
.lang-roster-note {
  margin-top: 18px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 720px;
}

/* staggered entrance once the roster scrolls in */
.lang-roster.is-visible .lang-badge {
  animation: badgeIn 420ms var(--ease-out) backwards;
  animation-delay: calc(var(--i, 0) * 18ms);
}
@keyframes badgeIn {
  from { opacity: 0; transform: translateY(10px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}

/* =====================================================================
   How it works — equal art blocks so the headings share a baseline
   ===================================================================== */
.step-art { flex-shrink: 0; }
/* the five language pills wrapped to three rows and spilled out the bottom
   of the fixed 80px art tile */
.step-art-2 {
  width: auto;
  min-width: 80px;
  height: 80px;
  padding: 0 12px;
}
.step-art-2 .step-lang-row { max-width: 168px; }

/* step 3 let its art grow to ~120px, so its heading sat 40px below the others */
.step-art-3 {
  height: 80px;
  justify-content: center;
}
.step-tools {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 5px 6px;
  justify-content: center;
}
.step h3 { margin-bottom: 8px; }
.step > p { margin-top: auto; }

/* =====================================================================
   Mobile navigation drawer
   ===================================================================== */
.nav-scrim {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(3, 4, 12, 0.6);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 220ms var(--ease);
}
.nav-scrim.is-open { opacity: 1; }
.nav-links-cta { display: none; }
html.is-menu-open { overflow: hidden; }

@media (max-width: 880px) {
  .nav-links {
    /* a translucent panel inside an already-blurred parent has nothing left
       to blur, so the drawer needs a near-solid surface of its own */
    background: rgba(7, 10, 26, 0.97);
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    border: 1px solid var(--border-strong);
    box-shadow: var(--shadow-lg);
    padding: 12px;
    z-index: 60;
    max-height: calc(100dvh - 120px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .nav-links li + li { border-top: 1px solid rgba(255, 255, 255, 0.05); }
  /* :not() keeps this off the CTA buttons — otherwise it would repaint the
     primary button dark-on-light text to light-on-light */
  .nav-links li:not(.nav-links-cta) a {
    display: block;
    padding: 14px 16px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    border-radius: 12px;
  }
  .nav-links li:not(.nav-links-cta) a:active { background: rgba(255, 255, 255, 0.06); }
  .nav-links-cta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 4px 4px;
    margin-top: 4px;
    border-top: 1px solid var(--border) !important;
  }
  .nav-links-cta .btn { padding: 12px 18px; }

  /* burger morphs into a close (X) while the drawer is open */
  .nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
}

/* =====================================================================
   Hero visual — stack (instead of squeeze) below the two-column breakpoint
   ===================================================================== */
@media (max-width: 980px) {
  /* a slide-in-from-the-right reveal pushes the card off a phone screen */
  .reveal[data-reveal="right"] { transform: translateY(24px); }
  .hero { padding: 48px 0 40px; }
  .hero-visual { min-height: 0; padding-bottom: 8px; }
  .visual-stage {
    flex-direction: column;
    aspect-ratio: auto;
    max-width: 420px;
    gap: 4px;
  }
  .hero-3d-card { height: 190px; }
  /* the dashed rings are rotating squares: their bounding box is what used
     to force sideways scrolling on phones, and they read as noise this small */
  .orbit-ring { display: none; }
}

@media (max-width: 520px) {
  .hero-3d-card { height: 160px; }
  .hero-badge { font-size: 9.5px; padding: 5px 10px; }
  .eyebrow { font-size: 11px; letter-spacing: 0.04em; }
  .hero-sub { font-size: 16px; }
  .hero-actions .btn { width: 100%; }
  .stat-grid { gap: 24px 16px; }
  .stat-label { font-size: 12px; }
  .ind-display-card { padding: 16px; }
  .glass-panel { padding: 16px; }
  .ind-pain-col { padding: 18px; }
  .roi-widget { padding: 20px 16px; }
  .roi-output-card { padding: 22px 18px; }
  .roi-breakdown { grid-template-columns: 1fr; }
  .price-card { padding: 24px 20px; }
  .lang-card { padding: 22px 20px; }
  /* tighten the badge so long names (Nederlands, Українська) stop truncating */
  .lang-badges { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; }
  .lang-badge { padding: 7px 8px; gap: 6px; }
  .lang-badge-code { min-width: 26px; font-size: 9px; padding: 2px 4px; }
  .lang-badge-name { font-size: 12px; }
  .lang-badge-rtl .lang-badge-name { font-size: 14px; }
  .cta-actions .btn { width: 100%; }
}

/* the visibility pill must never sit half off the card on a phone */
@media (max-width: 700px) {
  .ind-header-flex { flex-direction: column; align-items: stretch; }
  .opacity-control-pill { width: 100%; justify-content: space-between; }
  /* a range input will not shrink past its intrinsic width without this,
     which pushed the % readout off the card */
  .opacity-range { flex: 1 1 0; width: auto; min-width: 0; }
}

/* below this the label eats the whole pill, so give the track its own row */
@media (max-width: 540px) {
  .opacity-control-pill {
    flex-wrap: wrap;
    border-radius: 14px;
    padding: 10px 14px;
    row-gap: 8px;
  }
  .opacity-control-pill label { order: 1; }
  #opacityVal { order: 2; margin-left: auto; text-align: right; }
  .opacity-range { order: 3; flex: 1 0 100%; width: 100%; }
}

/* =====================================================================
   Focus visibility (keyboard users) + pointer-only hover lifts
   ===================================================================== */
:where(a, button, input, [tabindex]):focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 6px;
}
@media (hover: none) {
  .price-card:hover,
  .lang-card:hover,
  .step:hover,
  .sp-card:hover,
  .btn-primary:hover { transform: none; }
}

/* =====================================================================
   Reduced motion — stop the ambient loops, not just shorten them
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .orb,
  .orbit-ring,
  .phone,
  .phone-wave span,
  .step-art-1 .step-rings span,
  .pulse-dot,
  .brand-dot,
  .eyebrow-dot,
  .lang-status::before,
  .globe-pulse,
  .hero-3d-img,
  .hero-3d-img::after,
  .lang-badge { animation: none !important; }

  /* The drift leaves the background mid-zoom when it stops, so put it back. */
  .hero-3d-img { background-size: cover; background-position: center; }
  .hero-3d-img::after { display: none; }
  .rotator-word { transition: none !important; }
  html { scroll-behavior: auto; }
}

/* =====================================================================
   FAQ Accordion Section Styling
   ===================================================================== */
.faq-section {
  padding: 100px 0;
  border-bottom: 1px solid var(--border);
  position: relative;
}

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

.faq-item {
  background: rgba(10, 13, 30, 0.75);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color 250ms var(--ease), box-shadow 250ms var(--ease), background 250ms var(--ease);
}

.faq-item:hover {
  border-color: var(--border-strong);
}

.faq-item.active {
  border-color: rgba(167, 139, 250, 0.4);
  background: rgba(15, 20, 48, 0.85);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.faq-trigger {
  width: 100%;
  padding: 22px 24px;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  text-align: left;
  cursor: pointer;
  color: var(--text);
  font-family: var(--font-sans);
}

.faq-question {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.4;
}

.faq-icon {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  color: var(--cyan);
  flex-shrink: 0;
  transition: transform 250ms var(--ease), background 250ms var(--ease), border-color 250ms var(--ease);
}

.faq-item.active .faq-icon {
  background: rgba(34, 211, 238, 0.15);
  border-color: rgba(34, 211, 238, 0.3);
  color: var(--cyan);
}

/* 0fr -> 1fr rather than a fixed max-height: a capped height silently clips
   the longer answers once they wrap onto more lines on narrow screens */
.faq-content {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  padding: 0 24px;
  transition: grid-template-rows 350ms var(--ease-out), padding 350ms var(--ease-out);
}

.faq-content > * {
  min-height: 0;
}

.faq-item.active .faq-content {
  grid-template-rows: 1fr;
  padding: 0 24px 22px 24px;
}

.faq-content p {
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.65;
}

/* =====================================================================
   LIGHT THEME OVERRIDES (Clean variable overrides & responsive rules)
   ===================================================================== */
html[data-theme="light"],
:root[data-theme="light"] {
  --bg: #f8fafc;
  --bg-1: #f1f5f9;
  --bg-2: #e2e8f0;
  --bg-elev: #ffffff;
  --bg-elev-2: #f8fafc;
  --bg-glass: rgba(255, 255, 255, 0.92);

  --border: rgba(15, 23, 42, 0.12);
  --border-strong: rgba(15, 23, 42, 0.2);
  --border-glow: rgba(79, 70, 229, 0.4);

  --text: #0f172a;
  --text-2: #334155;
  --text-muted: #475569;
  --text-dim: #64748b;

  --violet: #4f46e5;
  --violet-2: #4338ca;
  --cyan: #0284c7;
  --emerald: #059669;

  --grad-primary: linear-gradient(135deg, #4f46e5 0%, #0284c7 50%, #059669 100%);
  --grad-text: linear-gradient(120deg, #4338ca 0%, #0284c7 60%, #059669 100%);

  --shadow-sm: 0 4px 16px rgba(15, 23, 42, 0.05);
  --shadow-md: 0 12px 36px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 24px 60px rgba(15, 23, 42, 0.12);
  --shadow-glow: 0 10px 30px rgba(79, 70, 229, 0.18);
  --shadow-glow-cyan: 0 10px 30px rgba(2, 132, 199, 0.18);
}

html[data-theme="light"] body {
  background-color: #f8fafc;
  color: #0f172a;
}

html[data-theme="light"] .bg-mesh {
  background:
    radial-gradient(ellipse at 20% 0%, rgba(99, 102, 241, 0.08), transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(2, 132, 199, 0.06), transparent 50%),
    #f8fafc;
  opacity: 1;
}

html[data-theme="light"] .grid-overlay {
  background-image:
    linear-gradient(rgba(15, 23, 42, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 23, 42, 0.04) 1px, transparent 1px);
}

html[data-theme="light"] .nav-wrap.is-scrolled .nav {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(15, 23, 42, 0.12);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
}

html[data-theme="light"] .nav-links a { color: #334155; }
html[data-theme="light"] .nav-links a:hover { color: #4f46e5; }

html[data-theme="light"] .btn-ghost,
html[data-theme="light"] .btn-ghost-sm {
  background: rgba(15, 23, 42, 0.05);
  color: #0f172a;
  border-color: rgba(15, 23, 42, 0.15);
}

html[data-theme="light"] .hero-3d-card {
  background: #ffffff;
  border-color: rgba(79, 70, 229, 0.3);
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.12);
}

html[data-theme="light"] .ind-tab {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.12);
  color: #334155;
}
html[data-theme="light"] .ind-tab:hover {
  background: #f8fafc;
  border-color: rgba(79, 70, 229, 0.35);
  color: #0f172a;
}
html[data-theme="light"] .ind-tab.active {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.18), rgba(2, 132, 199, 0.12));
  border-color: #4f46e5;
  color: #4f46e5;
  box-shadow: 0 10px 30px rgba(79, 70, 229, 0.18);
}

html[data-theme="light"] .ind-display-card {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(15, 23, 42, 0.12);
  box-shadow: 0 16px 48px rgba(15, 23, 42, 0.08);
}

/* These two panels sit on top of the industry artwork. Dark mode runs them at
   55% so the photo reads through; at 0.95 light mode was effectively solid and
   the art only survived in the gutters. Dark text needs a heavier veil than
   light text, so 0.72 rather than 0.55, with more blur and saturation so the
   photo stays a texture instead of competing with the copy. */
html[data-theme="light"] .glass-panel,
html[data-theme="light"] .ind-pain-col {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border-color: rgba(15, 23, 42, 0.14);
  box-shadow: 0 16px 48px rgba(15, 23, 42, 0.10);
}

html[data-theme="light"] .ind-title,
html[data-theme="light"] .pain-header h4,
html[data-theme="light"] .sp-text strong {
  color: #0f172a;
}

html[data-theme="light"] .ind-desc,
html[data-theme="light"] .sp-text p {
  color: #334155;
}

html[data-theme="light"] .chip,
html[data-theme="light"] .pain-list li,
html[data-theme="light"] .sp-card,
html[data-theme="light"] .ind-pain-card {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.12);
  color: #0f172a;
}

html[data-theme="light"] .phone {
  background: linear-gradient(145deg, #ffffff 0%, #f1f5f9 100%);
  box-shadow: 0 30px 70px rgba(15, 23, 42, 0.18), 0 0 0 2px rgba(15, 23, 42, 0.1);
}
html[data-theme="light"] .phone-screen {
  background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
}
html[data-theme="light"] .phone-call-card,
html[data-theme="light"] .phone-bubble {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.12);
  color: #0f172a;
}

/* The card selectors here were guessed rather than read off the markup:
   .pricing-card does not exist (it is .price-card) and .roi-card does not
   exist (it is .roi-output-card). Both rules matched nothing, so those two
   cards kept their dark-theme surface while their text was flipped to dark —
   which is why the pricing tiers and the ROI figure rendered white-on-white. */
html[data-theme="light"] .feature,
html[data-theme="light"] .price-card,
html[data-theme="light"] .roi-widget,
html[data-theme="light"] .roi-output-card,
html[data-theme="light"] .faq-item,
html[data-theme="light"] .cta-card {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.12);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}

html[data-theme="light"] .faq-item.active {
  background: #ffffff;
  border-color: rgba(79, 70, 229, 0.35);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
}

html[data-theme="light"] .footer {
  background: #f1f5f9;
  border-top-color: rgba(15, 23, 42, 0.1);
}

/* =====================================================================
   Accessibility utilities
   ===================================================================== */

/* Visually hidden but still announced — used for the static stand-in behind
   the animated hero rotator. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Keyboard users land on the nav otherwise and have to tab past every link
   on the page before reaching the content. */
.skip-link {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -120%);
  z-index: 999;
  padding: 12px 22px;
  border-radius: 0 0 12px 12px;
  background: var(--violet-2);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--shadow-md);
  transition: transform 180ms var(--ease-out);
}

.skip-link:focus-visible {
  transform: translate(-50%, 0);
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

/* =====================================================================
   Lead capture form
   ===================================================================== */
.lead-form {
  margin: 30px auto 0;
  max-width: 760px;
  text-align: left;
}

.lead-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field-full { grid-column: 1 / -1; }

.field label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  display: flex;
  align-items: center;
  gap: 6px;
}

.field .req { color: var(--violet); }
.field .opt {
  font-weight: 500;
  font-size: 11px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.lead-form input[type="text"],
.lead-form input[type="email"],
.lead-form input[type="tel"],
.lead-form select,
.lead-form textarea {
  width: 100%;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 14px;
  color: var(--text);
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  transition: border-color 180ms var(--ease), box-shadow 180ms var(--ease);
}

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

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

.lead-form input:focus-visible,
.lead-form select:focus-visible,
.lead-form textarea:focus-visible {
  outline: none;
  border-color: var(--violet);
  box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.22);
}

.lead-form .is-invalid { border-color: var(--red); }
.lead-form .is-invalid:focus-visible { box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.22); }

.field-error { font-size: 12px; color: var(--red); }

/* Off-screen rather than display:none — some bots skip anything hidden. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 18px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-2);
  cursor: pointer;
}
.consent input { margin-top: 2px; accent-color: var(--violet-2); flex-shrink: 0; }

.lead-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

.lead-privacy { margin-top: 14px; font-size: 12px; color: var(--text-dim); }
.lead-privacy a { color: var(--text-2); text-decoration: underline; }
.lead-privacy a:hover { color: var(--violet); }

.form-status { margin-top: 14px; font-size: 13px; font-weight: 500; }
.form-status-error { color: var(--red); }

/* Busy state: swap the arrow for a spinner without resizing the button. */
#leadSubmit .btn-spinner { display: none; }
#leadSubmit.is-busy { pointer-events: none; opacity: 0.75; }
#leadSubmit.is-busy .btn-arrow { display: none; }
#leadSubmit.is-busy .btn-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.lead-success {
  margin: 30px auto 0;
  max-width: 560px;
  padding: 32px 28px;
  text-align: center;
  background: var(--bg-glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
}
.lead-success:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; }
.lead-success-icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 16px;
  display: grid;
  place-items: center;
  font-size: 26px;
  color: #fff;
  background: var(--grad-primary);
  border-radius: 50%;
}
.lead-success h3 { font-size: 22px; margin-bottom: 8px; color: var(--text); }
.lead-success p { font-size: 14px; color: var(--text-2); margin-bottom: 20px; }

/* Language switcher */
.lang-switch {
  display: inline-grid;
  place-items: center;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-2);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  transition: color 180ms var(--ease), border-color 180ms var(--ease), background 180ms var(--ease);
}
.lang-switch:hover {
  color: var(--violet);
  border-color: var(--border-glow);
  background: var(--bg-elev);
}

@media (max-width: 640px) {
  .lead-grid { grid-template-columns: 1fr; }
  .lead-actions .btn { width: 100%; }
}

/* Light theme */
html[data-theme="light"] .lead-form input[type="text"],
html[data-theme="light"] .lead-form input[type="email"],
html[data-theme="light"] .lead-form input[type="tel"],
html[data-theme="light"] .lead-form select,
html[data-theme="light"] .lead-form textarea {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.18);
  color: #0f172a;
}
html[data-theme="light"] .lead-form input:focus-visible,
html[data-theme="light"] .lead-form select:focus-visible,
html[data-theme="light"] .lead-form textarea:focus-visible {
  border-color: #4f46e5;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.18);
}
html[data-theme="light"] .lead-success {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(15, 23, 42, 0.12);
}
html[data-theme="light"] .lang-switch {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.14);
  color: #334155;
}

@media (prefers-reduced-motion: reduce) {
  #leadSubmit.is-busy .btn-spinner { animation-duration: 1.6s; }
}

/* =====================================================================
   Legal / 404 pages
   ===================================================================== */
.legal-page { padding: 140px 0 100px; }

.legal-container { max-width: 780px; }

.legal-title {
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: clamp(34px, 5vw, 52px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--text);
  margin: 14px 0 12px;
}

.legal-meta { font-size: 13px; color: var(--text-dim); margin-bottom: 32px; }
.legal-meta a { color: var(--text-2); text-decoration: underline; }
.legal-meta a:hover { color: var(--violet); }

.legal-callout {
  padding: 18px 20px;
  margin-bottom: 40px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-2);
  background: rgba(251, 191, 36, 0.08);
  border: 1px solid rgba(251, 191, 36, 0.35);
  border-left-width: 3px;
  border-radius: var(--radius-sm);
}
.legal-callout strong { color: var(--amber); }

.legal-body { font-size: 15px; line-height: 1.75; color: var(--text-2); }

.legal-body h2 {
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: 21px;
  font-weight: 600;
  color: var(--text);
  margin: 40px 0 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.legal-body h2:first-child { margin-top: 0; border-top: none; padding-top: 0; }

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

.legal-body ul {
  margin: 0 0 18px;
  padding-left: 22px;
  list-style: disc;
}
.legal-body li { margin-bottom: 8px; }

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

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

.legal-body abbr { text-decoration: underline dotted; cursor: help; }

.legal-body code {
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  padding: 2px 6px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 5px;
}

.legal-contact {
  padding: 16px 18px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  line-height: 1.7;
}

.footer-bottom a { color: var(--text-2); text-decoration: underline; }
.footer-bottom a:hover { color: var(--violet); }

/* 404 */
.notfound { min-height: 70vh; display: grid; place-items: center; text-align: center; }
.notfound-code {
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: clamp(80px, 18vw, 160px);
  font-weight: 800;
  line-height: 1;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.notfound h1 { font-size: clamp(24px, 4vw, 34px); color: var(--text); margin: 10px 0 12px; }
.notfound p { color: var(--text-2); margin-bottom: 26px; max-width: 460px; }
.notfound-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

html[data-theme="light"] .legal-callout {
  background: rgba(217, 119, 6, 0.07);
  border-color: rgba(217, 119, 6, 0.3);
}
html[data-theme="light"] .legal-callout strong { color: #b45309; }

/* French labels run longer than English; the brand lockup must not wrap. */
.brand-text { white-space: nowrap; }
.nav-links > li > a { white-space: nowrap; }

/* =====================================================================
   Light theme — contrast repairs
   Found by measuring every text node against its composited background
   rather than by eye: 103 elements were below WCAG AA, four of them at a
   ratio of 1.0 (literally invisible).
   ===================================================================== */

/* --- Accent tokens ------------------------------------------------------
   #0284c7 and #059669 clear AA on plain white, but almost every place they
   are used sits on a 10-15% tint of themselves, which lifts the background
   and drops the ratio to 3.4-4.1. One step darker fixes every one of those
   chips at once and still reads as the same colour. */
html[data-theme="light"],
:root[data-theme="light"] {
  --cyan: #0369a1;
  --emerald: #047857;
}

/* --- Text that was hardcoded #fff with no light counterpart -------------
   These sit on white cards in light mode, so they were invisible. */
html[data-theme="light"] .price-title,
html[data-theme="light"] .price-amount .num,
html[data-theme="light"] .roi-main-num,
html[data-theme="light"] .slider-header label,
html[data-theme="light"] .lang-roster-head h3 {
  color: #0f172a;
}

html[data-theme="light"] .price-desc,
html[data-theme="light"] .price-amount .period,
html[data-theme="light"] .price-feats li,
html[data-theme="light"] .roi-note,
html[data-theme="light"] .roi-sub-box span,
html[data-theme="light"] .slider-val {
  color: #334155;
}

html[data-theme="light"] .slider-val {
  background: rgba(79, 70, 229, 0.1);
}

/* --- The multilingual roster kept its dark surface ----------------------
   .lang-roster is a 60%-opaque navy panel with no light override, so the
   whole section stayed dark while its text was flipped to dark. */
html[data-theme="light"] .lang-roster {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(15, 23, 42, 0.12);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}

html[data-theme="light"] .lang-badge {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.12);
}

html[data-theme="light"] .lang-badge:hover {
  background: #f8fafc;
  border-color: rgba(79, 70, 229, 0.4);
}

html[data-theme="light"] .lang-badge-code {
  color: #0369a1;
  background: rgba(3, 105, 161, 0.1);
}

html[data-theme="light"] .lang-badge-name { color: #0f172a; }
html[data-theme="light"] .lang-roster-note { color: #475569; }
html[data-theme="light"] .lang-roster-count { color: #475569; }

/* --- Remaining tinted chips -------------------------------------------- */
html[data-theme="light"] .eyebrow {
  background: rgba(4, 120, 87, 0.09);
  border-color: rgba(4, 120, 87, 0.25);
}

html[data-theme="light"] .phone-outcome,
html[data-theme="light"] .art-call-pill,
html[data-theme="light"] .phone-caller-status,
html[data-theme="light"] .roi-card-tag { color: #047857; }

html[data-theme="light"] .ind-badge,
html[data-theme="light"] .tool,
html[data-theme="light"] .price-min,
html[data-theme="light"] .roi-sub-box strong { color: #0369a1; }

/* These three sit on a solid #4f46e5 fill, so white is right (7.3:1).
   .step-num is NOT in this list: it has no fill at all, and forcing white
   there put invisible "01 / 02 / 03" markers on a white page. */
html[data-theme="light"] .sp-num,
html[data-theme="light"] .pop-tag,
html[data-theme="light"] .phone-avatar { color: #ffffff; }

html[data-theme="light"] .step-num { color: #475569; }

/* --- Primary button ------------------------------------------------------
   .btn-primary paints var(--grad-text) and relies on near-black text, which
   works in dark mode where that gradient is pastel. The light gradient is
   saturated, so dark text only reached 2.5:1 at the indigo end while white
   only reached 3.8:1 at the green end — neither colour worked across the
   whole sweep. Darkening the two lighter stops lets white clear AA
   everywhere (7.9 / 5.7 / 5.6), and the same token drives the gradient
   headings, which get easier to read as a side effect. */
html[data-theme="light"],
:root[data-theme="light"] {
  --grad-text: linear-gradient(120deg, #4338ca 0%, #0369a1 60%, #047857 100%);
  --grad-primary: linear-gradient(135deg, #4338ca 0%, #0369a1 50%, #047857 100%);
}

html[data-theme="light"] .btn-primary,
html[data-theme="light"] .btn-primary-sm { color: #ffffff; }

/* --- Surfaces that stay dark in light mode ------------------------------
   .hero-badge sits on the hero render and .art-call-screen is a dark phone
   mock inside a feature card; neither flips with the theme. The darkened
   light-theme accents are therefore wrong *inside* them — dark-on-dark.
   These need the bright dark-theme accents instead. */
html[data-theme="light"] .hero-badge,
html[data-theme="light"] .hero-badge span { color: #22d3ee; }

html[data-theme="light"] .art-call-pill {
  color: #34d399;
  background: rgba(52, 211, 153, 0.15);
}

/* --- Chips filled with the primary gradient ----------------------------
   Darkening the gradient (above) means near-black text no longer reads on
   it; white does, at 5.5:1 or better across every stop. */
html[data-theme="light"] .cal-day.cal-active,
html[data-theme="light"] .step-lang.active { color: #ffffff; }

/* --- Phone mock, which DOES flip to a light surface --------------------
   4.45:1 is a hair under AA; one shade darker clears it. */
html[data-theme="light"] .phone-outcome,
html[data-theme="light"] .phone-caller-status { color: #065f46; }

/* Footer meta sits on a faintly tinted panel, which pulls --text-dim from
   4.60:1 on plain white down to 4.34:1 — just under AA. */
html[data-theme="light"] .footer-bottom,
html[data-theme="light"] .footer-bottom span { color: #475569; }

/* The callout heading sits on its own amber tint, which costs it the last
   0.04 it needed for AA. */
html[data-theme="light"] .legal-callout strong { color: #92400e; }

/* =====================================================================
   Dark theme — contrast repairs
   The same measurement pass over the dark palette found 24 failures. Two
   were introduced by work in this session (the skip link and the lead
   form's muted labels); the rest predate it. All of them reduce to two
   causes, so both are fixed at the token/component level.
   ===================================================================== */

/* Cause 1: --text-dim is the dimmest tier and lands at 3.2-4.2:1 on the
   dark surfaces, short of the 4.5 small text needs. One step brighter
   clears every one of them and keeps it distinct from --text-muted.
   Scoped with :not([data-theme="light"]) so it still applies if the theme
   script never runs and no attribute is set. */
:root:not([data-theme="light"]) {
  --text-dim: #8896ab;
}

/* Cause 2: white on the bright violet chip is only 2.7:1. Darkening the
   chip keeps the white numerals and lifts it to 6.9:1. */
:root:not([data-theme="light"]) .sp-num {
  background: #6d28d9;
}

/* The skip link is painted with --violet-2, which is bright in dark mode —
   white on it reached only 4.2:1. Pin a fixed indigo so the one control a
   keyboard user meets first is legible in both themes (7.9:1). */
.skip-link {
  background: #4338ca;
}

/* =====================================================================
   Follow-up fixes (measured, 2026-08-18)
   ===================================================================== */

/* Lighthouse caught what the scripted sweep missed: .pop-tag paints white on
   var(--violet), which is a pale #a78bfa in dark mode — 2.7:1. Darkening the
   pill keeps the white text and lifts it to 6.9:1, matching what .sp-num
   already does. */
:root:not([data-theme="light"]) .pop-tag {
  background: #6d28d9;
}

/* The range inputs were 8px tall, so the whole touch target was 8px — hard to
   grab on a phone. The visible track stays 8px; the hit area becomes 24px by
   painting the track as a centred background layer inside a taller box. */
.roi-slider {
  height: 24px;
  border: 0;
  background-color: transparent;
  background-image:
    linear-gradient(90deg, #a78bfa 0%, #22d3ee var(--fill, 0%), transparent var(--fill, 0%)),
    linear-gradient(rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.09));
  background-size: 100% 8px, 100% 8px;
  background-position: center, center;
  background-repeat: no-repeat;
  border-radius: 0;
}

html[data-theme="light"] .roi-slider {
  background-image:
    linear-gradient(90deg, #4338ca 0%, #0369a1 var(--fill, 0%), transparent var(--fill, 0%)),
    linear-gradient(rgba(15, 23, 42, 0.12), rgba(15, 23, 42, 0.12));
}

/* A 13px checkbox is under the 24px minimum. The wrapping <label> already
   makes the whole row tappable, but the box itself should not be fiddly. */
.consent input {
  width: 20px;
  height: 20px;
  margin-top: 0;
}

/* Currency is stated once, in words, under the pricing subhead. */
.price-currency-note {
  display: inline-block;
  margin-top: 6px;
  font-size: 13px;
  color: var(--text-dim);
}

/* =====================================================================
   Hero art, per theme
   The <img> became a background element so the theme can choose the file.
   An <img src> is parsed before any script runs, so swapping it in JS would
   either flash the wrong art or download both. This downloads exactly one,
   and it is right on the first paint.
   ===================================================================== */

/* /fr/ loads this same file, and a url() in CSS resolves against the
   STYLESHEET, not the page — so this stays correct one level down with no
   per-page override. */
.hero-3d-img {
  width: 100%;
  height: 100%;
  background-image: url("assets/frontex_core_dark.jpg");
  background-size: cover;
  background-position: center;
  transition: transform 500ms var(--ease-out);

  /* The render is a still frame, and next to a phone whose waveform is moving
     it reads as broken rather than calm. This gives it a slow drift — a
     28-second breath, deliberately slower than anything else on the page so it
     registers as depth rather than as another thing demanding attention.

     It animates background-size/position rather than transform ON PURPOSE:
     transform is already spoken for by the hover zoom below, and an animation
     beats a plain declaration, so using it here would silently kill the hover. */
  animation: heroDrift 28s ease-in-out infinite;
  position: relative;
  overflow: hidden;
}

/* The zoom range is bounded by the wordmark, not by taste: the render carries
   "FRONTEX AI" on a banner across the top, and at 122% with the focus pushed
   downward the crop ate into it. The brand name getting clipped for half of
   every cycle is worse than a smaller movement, so the drift stays shallow and
   the focal point stays ABOVE centre to protect the top edge. */
@keyframes heroDrift {
  0%   { background-size: 104%; background-position: 50% 44%; }
  50%  { background-size: 112%; background-position: 52% 48%; }
  100% { background-size: 104%; background-position: 50% 44%; }
}

/* A glint that crosses the glass every nine seconds. Most of the cycle is spent
   off-screen, so it is a periodic catch of the eye rather than a loop anyone
   has to watch. Only possible because the hero became a <div> — an <img>
   cannot carry a pseudo-element. */
.hero-3d-img::after {
  content: "";
  position: absolute;
  inset: -30%;
  background: linear-gradient(
    115deg,
    transparent 42%,
    rgba(255, 255, 255, 0.16) 50%,
    transparent 58%
  );
  transform: translateX(-120%);
  animation: heroSheen 9s ease-in-out infinite;
  pointer-events: none;
}

@keyframes heroSheen {
  0%, 72%  { transform: translateX(-120%); }
  88%, 100% { transform: translateX(120%); }
}

/* One render serves both themes. The card frames it either way, so the dark
   art reads as a product shot on the light page rather than as a mistake.
   If a light variant is ever made, this is the only rule that changes:
   html[data-theme="light"] .hero-3d-img {
     background-image: url("assets/frontex_core_light.jpg");
   }
   — and the <head> preload would need the same branch back. */

.hero-3d-card:hover .hero-3d-img {
  transform: scale(1.04);
}