@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

/* ========================================
   BZZIP LANDING PAGE - Elevated Tech Editorial
   A distinctive, production-grade design
   ======================================== */

/*
 * DIRECTION POLICY — read before adding `left` or `right` to this file.
 *
 * Arabic is a shipped locale and these are the pages the ES and BR ad
 * campaigns pay to send people to, so a broken RTL landing page is money
 * spent on a broken first impression. This file used to answer that with a
 * hand-rolled `[dir="rtl"]` mirror at the bottom — every physical property
 * written twice, once per direction, and every new rule a fresh chance to
 * write only the first half. It drifted exactly as you would expect: the
 * legal-page bullets flipped their list indent but not their `::before`
 * marker, so Arabic got the bullet on one side and the text indented from
 * the other.
 *
 * So layout is written once, in logical properties — `inset-inline-start`,
 * `margin-inline-end`, `padding-inline-start`, `border-inline-start`,
 * `text-align: start`. They resolve to exactly the physical property in
 * `ltr`, so nothing about the English page changed; in `rtl` they mirror
 * themselves and the second copy of the rule is not needed at all.
 *
 * `test/design_system_test.rb` fails the build on a physical direction
 * property in this file. A declaration that is genuinely about visual
 * position rather than reading order — a decorative orb, a shine sweep, the
 * `left: 50%` half of a `translateX(-50%)` centring pair — says so with a
 * trailing comment reading `physical` and the exemption is on the record.
 * That is the same marker idiom the cyan-text guard uses for its `icon`
 * comment: an exemption you have to write down beats a rule quietly
 * weakened until it lets the thing through.
 */

/* ========================================
   Which layout the reader is looking at
   ======================================== */

/*
 * The same marker efir.css declares, for the same reader — `shared/_posthog`
 * lifts it onto every event as `layout`. See the long note in efir.css for why
 * the stylesheet answers this rather than the user agent.
 *
 * It is here as well as there because of where the funnel starts. The live
 * PostHog activation insight runs Pageview → sign_up, and its first step is a
 * visit to this page; a PostHog funnel attributes its breakdown to the FIRST
 * touchpoint by default, so a property that only exists from the product
 * onwards would leave every person in that funnel bucketed under "none" —
 * a broken breakdown that looks like a finding.
 *
 * Honest about what it means here: this page is fluid, with breakpoints from
 * 320 to 1320, so unlike the product it does not have two builds to tell apart.
 * The value reports which side of 640 the visitor's viewport was on, which is
 * the question being asked of it — "was this person phone-sized when they
 * arrived" — and the number matches the product's so the two ends of the funnel
 * are counting the same people.
 */
:root { --e-layout: "desktop"; }
@media (max-width: 640px) { :root { --e-layout: "mobile"; } }

/* ========================================
   CSS Variables & Design Tokens
   ======================================== */
:root {
  /* Brand Colors - Midnight + Electric Cyan + Coral */
  --midnight: #0a0f1c;
  --midnight-light: #141b2d;
  --midnight-soft: #1e2742;
  --cyan: #00d4ff;
  --cyan-bright: #00f0ff;
  --cyan-muted: #0891b2;
  --coral: #ff6b6b;
  --coral-soft: #ff8a8a;
  --white: #ffffff;
  --off-white: #f8fafc;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1e293b;
  --gray-900: #0f172a;

  /* Gradients */
  --gradient-hero: linear-gradient(135deg, #0a0f1c 0%, #141b2d 40%, #1e2742 100%);
  --gradient-glow: radial-gradient(ellipse at center, rgba(0, 212, 255, 0.15) 0%, transparent 70%);
  --gradient-cyan: linear-gradient(135deg, #00d4ff 0%, #0891b2 100%);
  --gradient-coral: linear-gradient(135deg, #ff6b6b 0%, #ff8a8a 100%);
  --gradient-glass: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
  --gradient-dark-card: linear-gradient(180deg, rgba(30,39,66,0.8) 0%, rgba(20,27,45,0.9) 100%);

  /* Typography - Space Grotesk + System */
  --font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', monospace;

  /* Spacing Scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Border Radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-2xl: 2rem;
  --radius-full: 9999px;

  /* Shadows - Colored glows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.12);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.15);
  --shadow-lg: 0 8px 40px rgba(0,0,0,0.2);
  --shadow-xl: 0 20px 60px rgba(0,0,0,0.3);
  --shadow-glow-cyan: 0 0 40px rgba(0, 212, 255, 0.3);
  --shadow-glow-coral: 0 0 40px rgba(255, 107, 107, 0.2);

  /* Transitions */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --transition-fast: 150ms var(--ease-out-expo);
  --transition-base: 300ms var(--ease-out-expo);
  --transition-slow: 500ms var(--ease-out-expo);
  --transition-slower: 800ms var(--ease-out-quint);
}

/* ========================================
   Font Loading (moved @import to top of file)
   ======================================== */

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

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 16px;
}

body {
  font-family: var(--font-body);
  color: var(--gray-900);
  line-height: 1.6;
  background: var(--white);
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

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

ul { list-style: none; }

/* ========================================
   Container
   ======================================== */
.container {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 var(--space-6);
}

@media (min-width: 768px) {
  .container {
    padding: 0 var(--space-8);
  }
}

/* ========================================
   Skip Link (Accessibility)
   ======================================== */
.skip-link {
  position: absolute;
  top: -100%;
  inset-inline-start: var(--space-4);
  background: var(--cyan);
  color: var(--midnight);
  padding: var(--space-3) var(--space-6);
  font-weight: 600;
  border-radius: var(--radius-md);
  z-index: 10000;
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: var(--space-4);
  outline: 3px solid var(--white);
  outline-offset: 2px;
}

/* ========================================
   Navigation
   ======================================== */
.nav {
  position: fixed;
  top: 0;
  inset-inline: 0;
  z-index: 1000;
  background: rgba(10, 15, 28, 0.85);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: all var(--transition-base);
}

.nav.scrolled {
  background: rgba(10, 15, 28, 0.95);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}

.nav-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}

.logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--white);
  letter-spacing: -0.02em;
}

.logo-icon {
  width: 36px;
  height: 36px;
  filter: drop-shadow(0 0 10px rgba(0, 212, 255, 0.5));
}

.logo-text {
  background: linear-gradient(135deg, var(--white) 0%, var(--cyan) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Desktop Nav Links */
.nav-links-desktop {
  display: none;
  align-items: center;
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .nav-links-desktop {
    display: flex;
  }
}

.nav-link {
  font-size: 0.9375rem;
  font-weight: 500;
  color: #ffffff;
  transition: color var(--transition-fast);
  position: relative;
}

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

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  inset-inline-start: 0;
  width: 0;
  height: 2px;
  background: var(--cyan);
  transition: width var(--transition-base);
}

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

/* Nav Dropdown */
.nav-dropdown {
  position: relative;
}

.nav-dropdown-trigger {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--white);
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  transition: color var(--transition-fast);
}

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

.dropdown-chevron {
  width: 16px;
  height: 16px;
  transition: transform var(--transition-fast);
}

.nav-dropdown-trigger[aria-expanded="true"] .dropdown-chevron {
  transform: rotate(180deg);
}

/* Dropdown Panel */
.nav-dropdown-panel {
  display: none;
  position: absolute;
  top: calc(100% + 12px);
  left: 50%; /* physical */
  transform: translateX(-50%);
  width: 520px;
  background: var(--midnight);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(20px);
  z-index: 100;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.nav-dropdown-panel--narrow {
  width: 400px;
}

.nav-dropdown-panel.open {
  display: block;
  opacity: 1;
}

.dropdown-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
}

.dropdown-grid--channels,
.dropdown-grid--resources {
  grid-template-columns: repeat(2, 1fr);
}

.dropdown-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  transition: background var(--transition-fast);
  text-decoration: none;
  color: var(--white);
}

.dropdown-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.dropdown-item-icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: var(--radius-sm);
  background: rgba(0, 212, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cyan);
}

.dropdown-item-icon svg {
  width: 18px;
  height: 18px;
}

.dropdown-item-icon--whatsapp {
  background: rgba(37, 211, 102, 0.12);
  color: #25d366;
}

.dropdown-item-icon--instagram {
  background: rgba(225, 48, 108, 0.12);
  color: #e1306c;
}

.dropdown-item-icon--facebook {
  background: rgba(24, 119, 242, 0.12);
  color: #1877f2;
}

.dropdown-item-icon--tiktok {
  background: rgba(255, 0, 80, 0.12);
  color: #ff0050;
}

.dropdown-item-title {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--white);
  line-height: 1.3;
}

.dropdown-item-desc {
  display: block;
  font-size: 0.75rem;
  color: var(--gray-400);
  line-height: 1.4;
  margin-top: 1px;
}

.dropdown-badge-new {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--coral);
  color: var(--white);
  padding: 1px 6px;
  border-radius: var(--radius-full);
  margin-inline-start: 4px;
  vertical-align: middle;
}

/* Mobile Menu Button */
.mobile-menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--white);
  border-radius: var(--radius-md);
  transition: background var(--transition-fast);
}

.mobile-menu-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

.menu-icon {
  width: 24px;
  height: 24px;
}

@media (min-width: 768px) {
  .mobile-menu-btn {
    display: none;
  }
}

/* Mobile Menu */
.mobile-menu {
  display: none;
  position: absolute;
  top: 72px;
  inset-inline: 0;
  background: var(--midnight);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: var(--space-4) var(--space-6);
  max-height: calc(100vh - 72px);
  overflow-y: auto;
}

.mobile-menu.active {
  display: block;
}

@media (min-width: 768px) {
  .mobile-menu {
    display: none !important;
  }
}

.mobile-nav-section {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.mobile-section-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-3) 0;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--white);
  background: none;
  border: none;
  cursor: pointer;
}

.mobile-section-trigger .dropdown-chevron {
  transition: transform var(--transition-fast);
}

.mobile-nav-section.open .mobile-section-trigger .dropdown-chevron {
  transform: rotate(180deg);
}

.mobile-section-links {
  display: none;
  flex-direction: column;
  padding: 0 0 var(--space-3) var(--space-4);
}

.mobile-nav-section.open .mobile-section-links {
  display: flex;
}

.mobile-section-links a {
  display: block;
  padding: var(--space-2) 0;
  font-size: 0.875rem;
  color: var(--gray-300);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.mobile-section-links a:hover {
  color: var(--cyan);
}

.mobile-nav-link {
  display: block;
  padding: var(--space-3) 0;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--white);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.mobile-nav-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-4);
}

.mobile-nav-actions .btn-cta-nav {
  text-align: center;
}

/* ========================================
   Buttons
   ======================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.875rem 1.75rem;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  border-radius: var(--radius-lg);
  transition: all var(--transition-base);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}

.btn-primary {
  background: var(--gradient-cyan);
  color: var(--midnight);
  box-shadow: var(--shadow-glow-cyan), 0 4px 20px rgba(0, 212, 255, 0.3);
}

.btn-primary::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%; /* physical */
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  );
  transition: left 0.6s ease;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow-cyan), 0 8px 30px rgba(0, 212, 255, 0.4);
}

.btn-primary:hover::after {
  left: 100%; /* physical */
}

.btn-primary:active {
  transform: translateY(0);
}

.btn-outline {
  background: transparent;
  color: var(--cyan);
  border: 2px solid rgba(0, 212, 255, 0.5);
}

.btn-outline:hover {
  background: rgba(0, 212, 255, 0.1);
  border-color: var(--cyan);
  transform: translateY(-2px);
}

.btn-sm {
  padding: 0.625rem 1.25rem;
  font-size: 0.875rem;
}

.btn-lg {
  padding: 1rem 2rem;
  font-size: 1rem;
}

.btn-xl {
  padding: 1.125rem 2.5rem;
  font-size: 1.0625rem;
}

.btn-block {
  width: 100%;
}

/* ========================================
   Hero Section
   ======================================== */
.hero {
  position: relative;
  min-height: 100vh;
  padding: 140px 0 100px;
  background: var(--gradient-hero);
  overflow: hidden;
}

/* Background effects */
.hero::before {
  content: '';
  position: absolute;
  top: 0;
  inset-inline: 0;
  bottom: 0;
  background:
    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(0, 212, 255, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse 60% 40% at 100% 50%, rgba(0, 212, 255, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse 40% 60% at 0% 80%, rgba(255, 107, 107, 0.05) 0%, transparent 50%);
  pointer-events: none;
}

/* Animated grid pattern */
.hero::after {
  content: '';
  position: absolute;
  top: 0;
  inset-inline: 0;
  bottom: 0;
  background-image:
    linear-gradient(rgba(0, 212, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 212, 255, 0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
  pointer-events: none;
  animation: gridFloat 20s ease-in-out infinite;
}

@keyframes gridFloat {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-20px, -20px); }
}

/* Hero Grid Background - explicit element */
.hero-grid-bg {
  position: absolute;
  top: 0;
  inset-inline: 0;
  bottom: 0;
  background-image:
    linear-gradient(rgba(0, 212, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 212, 255, 0.04) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 80% 50% at 50% 30%, black 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 80% 50% at 50% 30%, black 0%, transparent 70%);
  pointer-events: none;
  animation: gridFloat 25s ease-in-out infinite;
}

/* Hero Gradient Orbs */
.hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  opacity: 0.6;
}

.hero-orb-1 {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(0, 212, 255, 0.3) 0%, transparent 70%);
  top: -200px;
  right: -100px; /* physical */
  animation: orbFloat1 15s ease-in-out infinite;
}

.hero-orb-2 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(255, 107, 107, 0.2) 0%, transparent 70%);
  bottom: -100px;
  left: -100px; /* physical */
  animation: orbFloat2 18s ease-in-out infinite;
}

@keyframes orbFloat1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(-30px, 20px) scale(1.05); }
  66% { transform: translate(20px, -10px) scale(0.95); }
}

@keyframes orbFloat2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(40px, -30px) scale(1.1); }
}

/* Hero Badge */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  background: rgba(0, 212, 255, 0.1);
  border: 1px solid rgba(0, 212, 255, 0.3);
  border-radius: var(--radius-full);
  padding: var(--space-2) var(--space-5);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--cyan);
  margin-bottom: var(--space-8);
  animation: fadeInUp 0.8s var(--ease-out-expo) both;
}

.badge-dot {
  width: 8px;
  height: 8px;
  background: var(--cyan);
  border-radius: 50%;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.2); }
}

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

.hero-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-16);
  align-items: center;
  position: relative;
  z-index: 1;
}

@media (min-width: 1024px) {
  .hero-content {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-20);
  }
}

/* Trust Bar */
.trust-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-6);
  justify-content: flex-start;
}

@media (min-width: 640px) {
  .trust-bar {
    gap: var(--space-6);
  }
}

.trust-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--gray-400);
  font-size: 0.8125rem;
  font-weight: 500;
  opacity: 0.8;
  transition: opacity var(--transition-fast);
}

.trust-item:hover {
  opacity: 1;
}

.check-icon {
  width: 16px;
  height: 16px;
  color: var(--cyan);
  flex-shrink: 0;
}

/* Hero Title */
.hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--white);
  margin-bottom: var(--space-6);
  animation: fadeInUp 0.8s var(--ease-out-expo) 0.1s both;
}

.gradient-text {
  display: inline;
  background: linear-gradient(135deg, var(--cyan) 0%, var(--cyan-bright) 50%, var(--coral) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-size: 200% 200%;
  animation: gradientShift 4s ease infinite;
}

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

.hero-subtitle {
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  line-height: 1.7;
  color: var(--gray-400);
  margin-bottom: var(--space-10);
  max-width: 560px;
  margin-inline: auto;
  animation: fadeInUp 0.8s var(--ease-out-expo) 0.2s both;
}

/* Hero Stats */
.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-10);
  animation: fadeInUp 0.8s var(--ease-out-expo) 0.3s both;
}

.stat-card {
  background: var(--gradient-glass);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  text-align: center;
  transition: all var(--transition-base);
}

.stat-card:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(0, 212, 255, 0.3);
  transform: translateY(-4px);
}

.stat-number {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 700;
  background: linear-gradient(135deg, var(--cyan) 0%, var(--white) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: var(--space-1);
}

.stat-label {
  font-size: 0.8125rem;
  color: var(--gray-500);
  font-weight: 500;
}

/* Hero CTA */
.hero-cta {
  margin-bottom: var(--space-8);
  animation: fadeInUp 0.8s var(--ease-out-expo) 0.4s both;
}

.cta-input-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

@media (min-width: 640px) {
  .cta-input-group {
    flex-direction: row;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-xl);
    padding: var(--space-2);
    gap: var(--space-2);
  }
}

.email-input {
  flex: 1;
  padding: 1rem 1.5rem;
  font-size: 1rem;
  font-family: var(--font-body);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.05);
  color: var(--white);
  transition: all var(--transition-base);
  outline: none;
}

@media (min-width: 640px) {
  .email-input {
    border: none;
    background: transparent;
  }
}

.email-input:focus {
  border-color: var(--cyan);
  background: rgba(0, 212, 255, 0.05);
}

.email-input::placeholder {
  color: var(--gray-500);
}

.cta-note {
  font-size: 0.875rem;
  color: var(--gray-500);
}

/* Hero Visual */
.hero-visual {
  position: relative;
  perspective: 1000px;
  animation: fadeInUp 1s var(--ease-out-expo) 0.5s both;
}

.mockup {
  position: relative;
  transform: rotateY(-5deg) rotateX(5deg);
  transform-style: preserve-3d;
  animation: floatMockup 8s ease-in-out infinite;
}

@keyframes floatMockup {
  0%, 100% { transform: rotateY(-5deg) rotateX(5deg) translateY(0); }
  50% { transform: rotateY(-3deg) rotateX(3deg) translateY(-20px); }
}

.mockup-window {
  background: var(--gradient-dark-card);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-2xl);
  box-shadow:
    var(--shadow-xl),
    0 0 80px rgba(0, 212, 255, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.window-header {
  background: rgba(0, 0, 0, 0.3);
  padding: var(--space-4) var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.window-dots {
  display: flex;
  gap: var(--space-2);
}

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

.dot.red { background: #ff5f57; }
.dot.yellow { background: #febc2e; }
.dot.green { background: #28c840; }

.window-title {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--gray-400);
  flex: 1;
  text-align: center;
}

.window-content {
  padding: var(--space-5);
}

.inbox-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.message-card {
  padding: var(--space-4);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-lg);
  transition: all var(--transition-base);
  cursor: pointer;
}

.message-card:hover,
.message-card.active {
  background: rgba(0, 212, 255, 0.05);
  border-color: rgba(0, 212, 255, 0.2);
  transform: translateX(4px);
}

.message-card.active {
  border-inline-start: 3px solid var(--cyan);
}

.message-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.platform-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.platform-icon svg {
  width: 18px;
  height: 18px;
}

.platform-icon.whatsapp {
  background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
  color: white;
}

.platform-icon.instagram {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  color: white;
}

.platform-icon.facebook {
  background: linear-gradient(135deg, #1877f2 0%, #0d65d9 100%);
  color: white;
}

.message-meta {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.client-name {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--white);
}

.time {
  font-size: 0.75rem;
  color: var(--gray-500);
}

.message-text {
  color: var(--gray-400);
  font-size: 0.875rem;
  line-height: 1.5;
  margin-bottom: var(--space-3);
}

.message-actions {
  display: flex;
  gap: var(--space-2);
}

.action-btn {
  padding: var(--space-2) var(--space-4);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--cyan);
  background: rgba(0, 212, 255, 0.1);
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.action-btn:hover {
  background: var(--cyan);
  color: var(--midnight);
}

/* Floating Cards */
.floating-card {
  position: absolute;
  background: var(--gradient-dark-card);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 0.8125rem;
  color: var(--white);
}

.floating-card.card-1 {
  top: 5%;
  right: -5%; /* physical */
  animation: floatCard1 6s ease-in-out infinite;
}

.floating-card.card-2 {
  top: 45%;
  right: -10%; /* physical */
  animation: floatCard2 7s ease-in-out infinite 1s;
}

.floating-card.card-3 {
  bottom: 15%;
  right: 0%; /* physical */
  animation: floatCard3 8s ease-in-out infinite 2s;
}

@keyframes floatCard1 {
  0%, 100% { transform: translateY(0) rotate(2deg); }
  50% { transform: translateY(-15px) rotate(0deg); }
}

@keyframes floatCard2 {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-12px) rotate(1deg); }
}

@keyframes floatCard3 {
  0%, 100% { transform: translateY(0) rotate(1deg); }
  50% { transform: translateY(-10px) rotate(-1deg); }
}

.mini-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.75rem;
}

.mini-icon.whatsapp {
  background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
  color: white;
}

.mini-icon.instagram {
  background: linear-gradient(45deg, #f09433 0%, #bc1888 100%);
  color: white;
}

.mini-text {
  font-weight: 600;
  color: var(--gray-300);
}

@media (max-width: 1023px) {
  .floating-card {
    display: none;
  }
}

/* ========================================
   Social Proof Section
   ======================================== */
.social-proof {
  padding: var(--space-16) 0;
  background: var(--midnight);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.proof-label {
  text-align: center;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-8);
}

.testimonial-carousel {
  max-width: 800px;
  margin: 0 auto;
}

.testimonial-slide {
  text-align: center;
}

.quote {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.5vw, 1.5rem);
  line-height: 1.6;
  color: var(--gray-300);
  font-weight: 500;
  margin-bottom: var(--space-8);
  position: relative;
}

.quote::before {
  content: '"';
  position: absolute;
  top: -20px;
  left: 50%; /* physical */
  transform: translateX(-50%);
  font-size: 4rem;
  color: var(--cyan);
  opacity: 0.3;
  font-family: Georgia, serif;
  line-height: 1;
}

.author-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
}

.author-name {
  font-weight: 600;
  color: var(--white);
}

.author-role {
  font-size: 0.875rem;
  color: var(--gray-500);
}

/* ========================================
   Section Common Styles
   ======================================== */
.section-header {
  text-align: center;
  margin-bottom: var(--space-16);
}

.section-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-5);
  background: rgba(0, 212, 255, 0.1);
  color: var(--cyan);
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: var(--radius-full);
  border: 1px solid rgba(0, 212, 255, 0.2);
  margin-bottom: var(--space-4);
}

.section-badge.gradient {
  background: var(--gradient-cyan);
  color: var(--midnight);
  border: none;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--gray-900);
  margin-bottom: var(--space-4);
}

.section-subtitle {
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: var(--gray-600);
  max-width: 720px;
  margin: 0 auto;
  line-height: 1.7;
}

/* ========================================
   Problem/Solution Section
   ======================================== */
.problem-solution {
  padding: var(--space-24) 0;
  background: var(--off-white);
  position: relative;
}

.problem-solution::before {
  content: '';
  position: absolute;
  top: 0;
  inset-inline: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gray-300), transparent);
}

.problem-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin-bottom: var(--space-20);
}

@media (min-width: 768px) {
  .problem-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.problem-card {
  position: relative;
  background: var(--white);
  padding: var(--space-8);
  border-radius: var(--radius-xl);
  border: 1px solid var(--gray-200);
  transition: all var(--transition-base);
  overflow: hidden;
}

.problem-card::before {
  content: '';
  position: absolute;
  top: 0;
  inset-inline: 0;
  height: 4px;
  background: var(--gradient-cyan);
  opacity: 0;
  transition: opacity var(--transition-base);
}

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

.problem-card:hover::before {
  opacity: 1;
}

.problem-number {
  font-family: var(--font-display);
  font-size: 3.5rem;
  font-weight: 700;
  background: var(--gradient-cyan);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  margin-bottom: var(--space-4);
  opacity: 0.8;
}

.problem-card h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: var(--space-3);
}

.problem-card p {
  color: var(--gray-600);
  line-height: 1.7;
}

/* Solution Reveal */
.solution-reveal {
  margin-top: var(--space-20);
}

.reveal-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  margin-bottom: var(--space-12);
}

.divider-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gray-300), transparent);
}

.divider-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gradient-cyan);
  color: var(--midnight);
  font-size: 1.5rem;
  font-weight: 700;
  border-radius: 50%;
  box-shadow: var(--shadow-glow-cyan);
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { box-shadow: var(--shadow-glow-cyan); }
  50% { box-shadow: 0 0 60px rgba(0, 212, 255, 0.5); }
}

.solution-content {
  text-align: center;
}

.solution-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  padding: var(--space-10);
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.05) 0%, rgba(255, 107, 107, 0.03) 100%);
  border: 1px solid rgba(0, 212, 255, 0.1);
  border-radius: var(--radius-2xl);
  margin-top: var(--space-8);
}

@media (min-width: 768px) {
  .solution-visual {
    flex-direction: row;
    gap: var(--space-12);
  }
}

.platforms-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.platform-tag {
  background: var(--white);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  font-weight: 600;
  color: var(--gray-700);
  border: 1px solid var(--gray-200);
  transition: all var(--transition-fast);
}

.platform-tag:hover {
  transform: translateX(4px);
  border-color: var(--cyan);
}

.arrow-icon {
  font-size: 2.5rem;
  color: var(--cyan);
  font-weight: 700;
  transform: rotate(90deg);
}

@media (min-width: 768px) {
  .arrow-icon {
    transform: rotate(0);
  }
}

.unified-box {
  background: var(--gradient-cyan);
  padding: var(--space-8);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-glow-cyan);
  text-align: center;
  min-width: 220px;
}

.unified-icon {
  margin: 0 auto var(--space-4);
}

.unified-icon svg {
  width: 56px;
  height: 56px;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
}

.unified-text {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--midnight);
}

/* ========================================
   How It Works
   ======================================== */
.how-it-works {
  padding: var(--space-24) 0;
  background: var(--white);
}

.steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: stretch;
}

@media (min-width: 1024px) {
  .steps {
    grid-template-columns: 1fr auto 1fr auto 1fr;
    gap: var(--space-4);
  }
}

.step {
  text-align: center;
  padding: var(--space-8);
  background: var(--off-white);
  border-radius: var(--radius-xl);
  border: 1px solid var(--gray-200);
  transition: all var(--transition-base);
}

.step:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
  border-color: var(--cyan);
}

.step-visual {
  position: relative;
  margin-bottom: var(--space-6);
}

.step-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto var(--space-4);
  background: var(--gradient-cyan);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--midnight);
  box-shadow: var(--shadow-glow-cyan);
  transition: transform var(--transition-base);
}

.step:hover .step-icon {
  transform: scale(1.1) rotate(5deg);
}

.step-icon svg {
  width: 32px;
  height: 32px;
}

.step-number {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--gray-500);
  letter-spacing: 0.05em;
}

.step h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: var(--space-3);
}

.step p {
  color: var(--gray-600);
  line-height: 1.7;
}

.step-connector {
  display: none;
}

@media (min-width: 1024px) {
  .step-connector {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    position: relative;
    align-self: center;
  }

  .step-connector::before {
    content: '';
    width: 40px;
    height: 3px;
    background: var(--gradient-cyan);
    border-radius: 2px;
  }

  .step-connector::after {
    content: '';
    position: absolute;
    inset-inline-end: 6px;
    border-inline-start: 10px solid var(--cyan);
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
  }
}

/* ========================================
   Features Section
   ======================================== */
.features {
  padding: var(--space-24) 0;
  background: var(--midnight);
  position: relative;
  overflow: hidden;
}

.features::before {
  content: '';
  position: absolute;
  top: 0;
  inset-inline: 0;
  bottom: 0;
  background:
    radial-gradient(ellipse 50% 50% at 0% 0%, rgba(0, 212, 255, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse 50% 50% at 100% 100%, rgba(255, 107, 107, 0.05) 0%, transparent 50%);
  pointer-events: none;
}

.features .section-header {
  position: relative;
  z-index: 1;
}

.features .section-title {
  color: var(--white);
}

.features .section-subtitle {
  color: var(--gray-400);
}

.features-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  position: relative;
  z-index: 1;
}

@media (min-width: 640px) {
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .features-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.feature-card {
  position: relative;
  background: var(--gradient-glass);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  transition: all var(--transition-base);
  overflow: hidden;
}

.feature-card::before {
  content: '';
  position: absolute;
  top: 0;
  inset-inline: 0;
  height: 3px;
  background: var(--gradient-cyan);
  opacity: 0;
  transition: opacity var(--transition-base);
}

.feature-card:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(0, 212, 255, 0.3);
  transform: translateY(-8px);
}

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

.feature-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-5);
  transition: transform var(--transition-base);
}

.feature-icon.gradient {
  background: var(--gradient-cyan);
  color: var(--midnight);
  box-shadow: var(--shadow-glow-cyan);
}

.feature-card:hover .feature-icon {
  transform: scale(1.1) rotate(5deg);
}

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

.feature-card h3 {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: var(--space-3);
}

.feature-card p {
  color: var(--gray-400);
  line-height: 1.7;
  font-size: 0.9375rem;
}

/* ========================================
   Unified Inbox Demo Animation
   ======================================== */

/* Demo Container */
.inbox-demo {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: center;
  position: relative;
  z-index: 1;
  padding: var(--space-8) 0;
}

@media (min-width: 1024px) {
  .inbox-demo {
    grid-template-columns: 200px 180px 1fr;
    gap: var(--space-6);
  }
}

/* Platform Sources (Left) */
.demo-sources {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
}

@media (min-width: 1024px) {
  .demo-sources {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: var(--space-5);
  }
}

.source-platform {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--gradient-glass);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  transition: all var(--transition-base);
  position: relative;
}

.source-platform.active {
  border-color: rgba(0, 212, 255, 0.4);
  box-shadow: var(--shadow-glow-cyan);
  transform: translateX(8px);
}

.source-platform .platform-badge {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.source-platform .platform-badge svg {
  width: 20px;
  height: 20px;
}

.source-platform .platform-badge.whatsapp {
  background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
  color: white;
}

.source-platform .platform-badge.instagram {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  color: white;
}

.source-platform .platform-badge.facebook {
  background: linear-gradient(135deg, #1877f2 0%, #0d65d9 100%);
  color: white;
}

.source-platform .platform-badge.tiktok {
  background: linear-gradient(135deg, #000000 0%, #25f4ee 50%, #fe2c55 100%);
  color: white;
}

.platform-name {
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--white);
  display: none;
}

@media (min-width: 1024px) {
  .platform-name {
    display: block;
  }
}

.message-indicator {
  position: absolute;
  top: -6px;
  inset-inline-end: -6px;
  min-width: 22px;
  height: 22px;
  background: var(--coral);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0);
  transition: all var(--transition-fast);
}

.message-indicator.pulse {
  opacity: 1;
  transform: scale(1);
  animation: indicatorPulse 0.6s ease-out;
}

@keyframes indicatorPulse {
  0% { transform: scale(0); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

.indicator-count {
  font-size: 0.75rem;
  font-weight: 700;
  color: white;
}

/* Flow Animation (Center) */
.demo-flow {
  position: relative;
  height: 300px;
  display: none;
}

@media (min-width: 1024px) {
  .demo-flow {
    display: block;
  }
}

.flow-lines {
  position: absolute;
  inset: 0;
}

.flow-svg {
  width: 100%;
  height: 100%;
}

.flow-path {
  fill: none;
  stroke-width: 3;
  opacity: 0;
  filter: drop-shadow(0 0 4px currentColor);
}

.flow-path.whatsapp { stroke: url(#flowGradientWhatsapp); }
.flow-path.instagram { stroke: url(#flowGradientInstagram); }
.flow-path.facebook { stroke: url(#flowGradientFacebook); }
.flow-path.tiktok { stroke: url(#flowGradientTiktok); }

/* Message Particles */
.message-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/*
 * `left: 0` here is an origin, not a placement: the particle is parked at
 * 0,0 and then flown by a JS-computed `transform: translate(x, y)`. Those x
 * values are measured in physical pixels against the mockup, so the origin
 * they are measured from has to be physical too — mirroring it would send
 * every particle off the wrong edge in Arabic.
 */
.message-particle {
  position: absolute;
  top: 0;
  left: 0; /* physical */
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 5;
  will-change: transform, opacity;
}

.message-particle.main {
  width: 32px;
  height: 32px;
  box-shadow: 0 0 16px currentColor, 0 0 32px currentColor;
}

.message-particle.main svg {
  width: 16px;
  height: 16px;
  color: white;
}

.message-particle.trail {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  box-shadow: 0 0 12px currentColor;
}

.message-particle.whatsapp { background: #25d366; color: #25d366; }
.message-particle.instagram { background: #e6683c; color: #e6683c; }
.message-particle.facebook { background: #1877f2; color: #1877f2; }
.message-particle.tiktok { background: #fe2c55; color: #fe2c55; }

/* Unified Inbox (Right) */
.demo-inbox {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
}

@media (min-width: 1024px) {
  .demo-inbox {
    max-width: none;
  }
}

.inbox-window {
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.95) 0%, rgba(10, 15, 28, 0.98) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-2xl);
  box-shadow:
    var(--shadow-xl),
    0 0 80px rgba(0, 212, 255, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.inbox-header {
  background: rgba(0, 0, 0, 0.3);
  padding: var(--space-4) var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.inbox-dots {
  display: flex;
  gap: var(--space-2);
}

.inbox-dots .dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.inbox-dots .dot.red { background: #ff5f57; }
.inbox-dots .dot.yellow { background: #febc2e; }
.inbox-dots .dot.green { background: #28c840; }

.inbox-title {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--gray-400);
  flex: 1;
}

.inbox-client-badge {
  background: rgba(0, 212, 255, 0.15);
  color: var(--cyan);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
  flex-shrink: 0;
}

/* Mobile: keep the inbox mockup header on one clean line and guarantee the
   whole mockup stays centered. The "active client" badge is decorative, so it
   is dropped on small screens to avoid the title wrapping to two lines. */
@media (max-width: 640px) {
  .inbox-demo {
    justify-items: center;
  }

  .inbox-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }

  .inbox-client-badge {
    display: none;
  }
}

.inbox-messages {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 280px;
  max-height: 420px;
  overflow-y: auto;
}

/* Custom scrollbar for inbox messages */
.inbox-messages::-webkit-scrollbar {
  width: 4px;
}
.inbox-messages::-webkit-scrollbar-track {
  background: transparent;
}
.inbox-messages::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
}

/* Demo Messages */
.demo-message {
  padding: var(--space-4);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-lg);
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: all var(--transition-base);
  cursor: pointer;
}

.demo-message:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  transform: translateY(-2px);
}

.demo-message:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

.demo-message.highlight {
  background: rgba(0, 212, 255, 0.08);
  border-color: rgba(0, 212, 255, 0.3);
  border-inline-start: 3px solid var(--cyan);
  box-shadow: 0 0 20px rgba(0, 212, 255, 0.15);
}

.demo-message.arriving {
  animation: messageArrival 0.5s ease-out;
}

@keyframes messageArrival {
  0% { box-shadow: 0 0 0 rgba(0, 212, 255, 0); }
  50% { box-shadow: 0 0 30px rgba(0, 212, 255, 0.4); }
  100% { box-shadow: 0 0 20px rgba(0, 212, 255, 0.15); }
}

.demo-message.new-arrival {
  animation: messageSlideIn 0.5s ease-out;
}

@keyframes messageSlideIn {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.demo-message-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.demo-platform-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.demo-platform-icon svg {
  width: 16px;
  height: 16px;
}

.demo-platform-icon.whatsapp {
  background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
  color: white;
}

.demo-platform-icon.instagram {
  background: linear-gradient(45deg, #f09433 0%, #bc1888 100%);
  color: white;
}

.demo-platform-icon.facebook {
  background: linear-gradient(135deg, #1877f2 0%, #0d65d9 100%);
  color: white;
}

.demo-message-meta {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.demo-sender {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--white);
}

.demo-time {
  font-size: 0.75rem;
  color: var(--gray-500);
}

/* SLA Timer */
.demo-sla-timer {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 600;
  font-family: var(--font-mono);
}

.demo-sla-timer.green {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

.demo-sla-timer.yellow {
  background: rgba(234, 179, 8, 0.15);
  color: #eab308;
}

.demo-sla-timer.red {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  animation: timerPulse 1s ease-in-out infinite;
}

@keyframes timerPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.demo-message-text {
  color: var(--gray-400);
  font-size: 0.875rem;
  line-height: 1.5;
  margin-bottom: var(--space-3);
}

.demo-message-footer {
  display: flex;
  justify-content: flex-end;
}

.demo-status {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.demo-status.new {
  background: rgba(0, 212, 255, 0.15);
  color: var(--cyan);
}

.demo-status.assigned {
  background: rgba(168, 85, 247, 0.15);
  color: #a855f7;
}

.demo-status.waiting {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

/* Inbox Toolbar */
.inbox-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  background: rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.toolbar-tabs {
  display: flex;
  gap: var(--space-1);
}

.toolbar-tab {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  color: var(--gray-400);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.toolbar-tab:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--white);
}

.toolbar-tab.active {
  background: rgba(0, 212, 255, 0.15);
  color: var(--cyan);
}

.tab-count {
  background: rgba(255, 255, 255, 0.1);
  padding: 2px 6px;
  border-radius: var(--radius-full);
  font-size: 0.6875rem;
  font-weight: 600;
}

.tab-count.urgent {
  background: rgba(239, 68, 68, 0.3);
  color: #ef4444;
}

.toolbar-actions {
  display: flex;
  gap: var(--space-2);
}

.toolbar-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  color: var(--gray-400);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.toolbar-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
}

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

/* Demo Action Buttons */
.demo-actions {
  display: flex;
  gap: var(--space-2);
}

.demo-action-btn {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  color: var(--gray-300);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.demo-action-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.2);
}

.demo-action-btn.primary {
  background: rgba(0, 212, 255, 0.15);
  border-color: rgba(0, 212, 255, 0.3);
  color: var(--cyan);
}

.demo-action-btn.primary:hover {
  background: rgba(0, 212, 255, 0.25);
}

.demo-action-btn.urgent {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
  color: #ef4444;
  animation: urgentPulse 2s ease-in-out infinite;
}

@keyframes urgentPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
  50% { box-shadow: 0 0 0 4px rgba(239, 68, 68, 0); }
}

.demo-action-btn svg {
  width: 14px;
  height: 14px;
}

/* Assigned To Badge */
.demo-assigned-to {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.assigned-avatar {
  width: 24px;
  height: 24px;
  background: linear-gradient(135deg, #a855f7 0%, #6366f1 100%);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.625rem;
  font-weight: 700;
  color: white;
}

.assigned-name {
  font-size: 0.75rem;
  color: var(--gray-400);
}

/* Urgent Message Pulse */
.demo-message.urgent-pulse {
  border-color: rgba(239, 68, 68, 0.3);
}

.demo-message.urgent-pulse::before {
  content: '';
  position: absolute;
  top: 0;
  inset-inline: 0;
  height: 3px;
  background: linear-gradient(90deg, #ef4444, #f97316);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* Reply Composer */
.inbox-composer {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background: rgba(0, 0, 0, 0.3);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.composer-input {
  flex: 1;
  padding: var(--space-3) var(--space-4);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  min-height: 40px;
  display: flex;
  align-items: center;
}

.composer-placeholder {
  color: var(--gray-500);
  font-size: 0.875rem;
}

.composer-typing {
  color: var(--white);
  font-size: 0.875rem;
}

.composer-typing::after {
  content: '|';
  animation: cursorBlink 1s ease-in-out infinite;
}

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

.composer-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.composer-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  color: var(--gray-400);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.composer-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
}

.composer-btn svg {
  width: 18px;
  height: 18px;
}

.composer-send {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gradient-cyan);
  border: none;
  border-radius: var(--radius-lg);
  color: var(--midnight);
  cursor: pointer;
  transition: all var(--transition-fast);
  box-shadow: var(--shadow-glow-cyan);
}

.composer-send:hover {
  transform: scale(1.05);
}

.composer-send svg {
  width: 18px;
  height: 18px;
}

/* Update message footer for new layout */
.demo-message-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Feature Highlights (below demo) */
.feature-highlights {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-12);
  position: relative;
  z-index: 1;
}

.highlight-badge {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-full);
  color: var(--gray-300);
  font-size: 0.875rem;
  font-weight: 500;
  transition: all var(--transition-base);
}

.highlight-badge:hover {
  background: rgba(0, 212, 255, 0.1);
  border-color: rgba(0, 212, 255, 0.3);
  color: var(--cyan);
}

.highlight-badge svg {
  width: 18px;
  height: 18px;
  color: var(--cyan);
}

/* Mobile Layout */
@media (max-width: 1023px) {
  .inbox-demo {
    grid-template-columns: 1fr;
  }

  .demo-sources {
    order: 2;
    margin-top: var(--space-6);
  }

  .demo-inbox {
    order: 1;
  }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  .inbox-demo *,
  .inbox-demo *::before,
  .inbox-demo *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ========================================
   Pricing Section
   ======================================== */
.pricing {
  padding: var(--space-24) 0;
  background: var(--off-white);
}

.pricing-toggle {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-bottom: var(--space-12);
  background: var(--white);
  padding: var(--space-1);
  border-radius: var(--radius-full);
  border: 1px solid var(--gray-200);
  width: fit-content;
  margin-inline: auto;
  box-shadow: var(--shadow-sm);
}

.toggle-btn {
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--gray-600);
  background: transparent;
  border-radius: var(--radius-full);
  transition: all var(--transition-base);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.toggle-btn.active {
  background: var(--gradient-cyan);
  color: var(--midnight);
  box-shadow: var(--shadow-md);
}

.discount-badge {
  display: inline-block;
  padding: var(--space-1) var(--space-2);
  background: var(--coral);
  color: var(--white);
  font-size: 0.6875rem;
  font-weight: 700;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
}

.pricing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin-bottom: var(--space-8);
}

@media (min-width: 1024px) {
  .pricing-grid {
    grid-template-columns: repeat(3, 1fr);
    align-items: stretch;
  }
}

.price-card {
  position: relative;
  background: var(--white);
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  transition: all var(--transition-base);
}

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

.price-card.featured {
  border-color: var(--cyan);
  border-width: 2px;
  box-shadow: var(--shadow-glow-cyan);
  background: linear-gradient(180deg, rgba(0, 212, 255, 0.03) 0%, var(--white) 100%);
}

@media (min-width: 1024px) {
  .price-card.featured {
    transform: scale(1.05);
  }

  .price-card.featured:hover {
    transform: scale(1.05) translateY(-8px);
  }
}

.popular-badge {
  position: absolute;
  top: -14px;
  left: 50%; /* physical */
  transform: translateX(-50%);
  background: var(--gradient-cyan);
  color: var(--midnight);
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-full);
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  box-shadow: var(--shadow-md);
}

.price-header {
  margin-bottom: var(--space-6);
}

.plan-name {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: var(--space-2);
}

.plan-target {
  color: var(--gray-600);
  font-size: 0.9375rem;
}

.price-amount {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
  margin-bottom: var(--space-6);
}

.currency {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--gray-500);
}

.amount {
  font-family: var(--font-display);
  font-size: 4rem;
  font-weight: 700;
  color: var(--gray-900);
  line-height: 1;
  letter-spacing: -0.02em;
}

.period {
  font-size: 1rem;
  color: var(--gray-500);
}

.price-features {
  margin-bottom: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.price-features li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  color: var(--gray-700);
  font-size: 0.9375rem;
}

.price-features .check {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--cyan);
  margin-top: 2px;
}

.price-features strong {
  color: var(--gray-900);
}

.price-roi {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(0, 212, 255, 0.05) 100%);
  color: #059669;
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  text-align: center;
  margin-bottom: var(--space-6);
  font-size: 0.9375rem;
  font-weight: 600;
  border: 1px solid rgba(16, 185, 129, 0.2);
}

.pricing-note {
  text-align: center;
  color: var(--gray-600);
  font-size: 0.9375rem;
}

/* ========================================
   FAQ Section
   ======================================== */
.faq {
  padding: var(--space-24) 0;
  background: var(--white);
}

.faq-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  max-width: 800px;
  margin: 0 auto;
}

.faq-item {
  background: var(--off-white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: all var(--transition-base);
}

.faq-item:hover {
  border-color: var(--cyan);
  box-shadow: var(--shadow-md);
}

.faq-item.active {
  border-color: var(--cyan);
  background: var(--white);
}

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-6);
  cursor: pointer;
  width: 100%;
  text-align: start;
  transition: background var(--transition-fast);
}

.faq-question:hover {
  background: rgba(0, 212, 255, 0.03);
}

.faq-question:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: -2px;
}

.faq-question h3 {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--gray-900);
  margin: 0;
  padding-inline-end: var(--space-4);
}

.chevron {
  width: 24px;
  height: 24px;
  color: var(--gray-400);
  transition: all var(--transition-base);
  flex-shrink: 0;
}

.faq-item.active .chevron {
  transform: rotate(180deg);
  color: var(--cyan);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-base);
}

.faq-item.active .faq-answer {
  max-height: 500px;
}

.faq-answer p {
  padding: 0 var(--space-6) var(--space-6);
  color: var(--gray-600);
  line-height: 1.7;
}

/* ========================================
   CTA Section
   ======================================== */
.cta {
  padding: var(--space-24) 0;
  background: var(--gradient-hero);
  position: relative;
  overflow: hidden;
}

.cta::before {
  content: '';
  position: absolute;
  top: 0;
  inset-inline: 0;
  bottom: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(0, 212, 255, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse 40% 40% at 80% 20%, rgba(255, 107, 107, 0.08) 0%, transparent 50%);
  pointer-events: none;
}

.cta-content {
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.cta-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--white);
  margin-bottom: var(--space-4);
}

.cta-subtitle {
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  color: var(--gray-400);
  margin-bottom: var(--space-10);
  line-height: 1.7;
}

.cta-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-10);
}

@media (min-width: 640px) {
  .cta-form {
    flex-direction: row;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-xl);
    padding: var(--space-2);
  }
}

.cta-guarantees {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

@media (min-width: 640px) {
  .cta-guarantees {
    grid-template-columns: repeat(4, 1fr);
  }
}

.guarantee {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.875rem;
  color: var(--gray-400);
}

.guarantee-icon {
  width: 24px;
  height: 24px;
  color: var(--cyan);
}

/* Book-a-Demo nav button (looks like a nav link / secondary) */
button.nav-demo-link,
button.mobile-nav-link.nav-demo-link {
  background: transparent;
  border: none;
  cursor: pointer;
  font: inherit;
  color: var(--gray-300, #cbd5e1);
  font-weight: 600;
  padding: 0;
}

button.nav-demo-link:hover {
  color: var(--white);
}

.mobile-nav-link.nav-demo-link {
  text-align: start;
  width: 100%;
  padding: var(--space-3) 0;
}

/* AI teaser CTA row */
.ai-teaser-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.ai-teaser-link {
  color: var(--cyan);
  font-weight: 600;
  text-decoration: none;
  font-size: 0.95rem;
}

.ai-teaser-link:hover {
  color: var(--white);
}

/* Try2Free hero + CTA actions */
.hero-actions,
.cta-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

@media (min-width: 640px) {
  .hero-actions,
  .cta-actions {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

.hero-actions {
  align-items: flex-start;
}

@media (min-width: 640px) {
  .hero-actions {
    align-items: center;
  }
}

.cta-actions {
  justify-content: center;
  margin-bottom: var(--space-10);
}

.hero-concierge-link,
.cta-concierge-link {
  color: var(--cyan);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px dashed rgba(0, 212, 255, 0.4);
  padding-bottom: 2px;
  transition: color var(--transition-base);
}

.hero-concierge-link:hover,
.cta-concierge-link:hover {
  color: var(--white);
}

.hero-try2free-note {
  font-size: 0.9375rem;
  color: var(--gray-400);
  line-height: 1.6;
  margin-bottom: var(--space-6);
  max-width: 34rem;
}

/* ========================================
   Concierge / Done-for-you Section
   ======================================== */
.concierge {
  padding: var(--space-24) 0;
  background: var(--gradient-hero);
  position: relative;
  overflow: hidden;
}

.concierge::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 20% 0%, rgba(0, 212, 255, 0.12) 0%, transparent 55%),
    radial-gradient(ellipse 50% 50% at 90% 100%, rgba(255, 107, 107, 0.08) 0%, transparent 55%);
  pointer-events: none;
}

.concierge-card {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
  max-width: 1040px;
  margin: 0 auto;
  padding: var(--space-8);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-2xl, 24px);
}

@media (min-width: 900px) {
  .concierge-card {
    grid-template-columns: 1.1fr 1fr;
    gap: var(--space-12);
    padding: var(--space-12);
    align-items: center;
  }
}

.concierge-badge {
  margin-bottom: var(--space-4);
}

.concierge-title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--white);
  margin-bottom: var(--space-4);
}

.concierge-subtitle {
  font-size: clamp(1rem, 1.8vw, 1.1875rem);
  color: var(--gray-400);
  line-height: 1.7;
  margin-bottom: var(--space-6);
}

.concierge-points {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.concierge-points li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  color: var(--gray-300, #cbd5e1);
  font-size: 1rem;
  line-height: 1.5;
}

.concierge-points .check {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--cyan);
  margin-top: 2px;
}

.concierge-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.concierge-form .waitlist-field {
  width: 100%;
}

.concierge-form .email-input {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
}

.concierge-note {
  font-size: 0.8125rem;
  color: var(--gray-500);
  text-align: center;
  margin: 0;
}

/* ========================================
   Footer
   ======================================== */
.footer {
  padding: var(--space-20) 0 var(--space-8);
  background: var(--midnight);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
  margin-bottom: var(--space-12);
}

@media (min-width: 768px) {
  .footer-grid {
    grid-template-columns: 2fr 1fr 1fr 1fr;
  }
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  margin-bottom: var(--space-4);
}

.footer-logo .logo-icon {
  width: 32px;
  height: 32px;
}

.footer-logo-text {
  background: linear-gradient(135deg, var(--white) 0%, var(--cyan) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.footer-description {
  color: var(--gray-500);
  line-height: 1.7;
  margin-bottom: var(--space-6);
  font-size: 0.9375rem;
}

.footer-locales {
  display: flex;
  gap: var(--space-4);
  font-size: 0.875rem;
  color: var(--gray-500);
}

.footer-col h4 {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: var(--space-5);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer-col a {
  color: var(--gray-500);
  font-size: 0.9375rem;
  transition: color var(--transition-fast);
}

.footer-col a:hover {
  color: var(--cyan);
}

.footer-bottom {
  padding-top: var(--space-8);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: center;
  color: var(--gray-600);
  font-size: 0.875rem;
}

@media (min-width: 768px) {
  .footer-bottom {
    flex-direction: row;
    justify-content: space-between;
  }
}

.footer-links {
  display: flex;
  gap: var(--space-8);
}

.footer-links a {
  color: var(--gray-500);
  transition: color var(--transition-fast);
}

.footer-links a:hover {
  color: var(--cyan);
}

/* ========================================
   Animations
   ======================================== */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.animate-fadeInUp {
  animation: fadeInUp 0.8s var(--ease-out-expo) both;
}

.animate-fadeIn {
  animation: fadeIn 0.8s var(--ease-out-expo) both;
}

/* Animation delays */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }

/* ========================================
   Print Styles
   ======================================== */
@media print {
  .nav, .cta, .footer { display: none; }
}

/* The auth card, the form fields, the flash messages and the legacy page
 * shell that used to sit here moved to `legacy.css` in #82. None of them had
 * a marketing consumer; they were product styling parked in the marketing
 * stylesheet, and they were the reason this file had to be loaded by the
 * product layout at all. It no longer is, so a change made here cannot reach
 * a signed-in screen — which is what #74 kept patching one call site at a
 * time. See the header of `legacy.css`.
 *
 * `.form-error` is the exception: `waitlist_controller.js` creates elements
 * with this class on the marketing forms, so the name genuinely lives in both
 * files. */
.form-error {
  color: #ef4444;
  font-size: 0.875rem;
  margin-top: 0.5rem;
  font-weight: 500;
}

.card-description {
  color: var(--gray-600);
  line-height: 1.6;
  font-size: 0.9375rem;
  margin-bottom: var(--space-4);
}

.card-badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  background: var(--gradient-cyan);
  color: var(--midnight);
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.info-box {
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.08) 0%, rgba(0, 212, 255, 0.02) 100%);
  border: 1px solid rgba(0, 212, 255, 0.2);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  max-width: 800px;
  margin: 0 auto;
}

.info-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: var(--space-4);
}

.info-text {
  color: var(--gray-700);
  line-height: 1.6;
  font-size: 1rem;
}

/* The mobile block that used to sit here went with the rules it tuned:
 * `.dashboard-title` and `.dashboard-cards` no longer exist. Its third rule,
 * `.user-email { display: none }`, was dashboard-nav furniture that had been
 * reaching a screen it was never written for — workspace_assignments declares
 * its own `.user-email` for a member row, and was silently losing the address
 * below 768px as a result. Nothing replaces it: a member list should show the
 * member's email at every width. */

/* ========================================
   Page Hero (Subpages)
   ======================================== */
.page-hero {
  padding: calc(var(--space-20) + 60px) 0 var(--space-10);
  background: var(--gradient-hero);
  position: relative;
  overflow: hidden;
  text-align: center;
}

.page-hero-content {
  max-width: 720px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.page-hero .hero-title {
  font-size: clamp(2rem, 5vw, 3.5rem);
  margin-bottom: var(--space-6);
}

.page-hero .hero-subtitle {
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: var(--gray-400);
  line-height: 1.7;
}

/* ========================================
   Content Sections (Subpages)
   ======================================== */
.content-section {
  padding: var(--space-20) 0;
  background: var(--white);
}

.content-section.alt-bg {
  background: var(--off-white);
}

/* ========================================
   About Grid (How It Works page)
   ======================================== */
.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

@media (min-width: 768px) {
  .about-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.about-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  text-align: center;
  transition: all var(--transition-base);
}

.content-section.alt-bg .about-card {
  background: var(--white);
}

.about-card:hover {
  border-color: var(--cyan);
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.about-card-icon {
  width: 56px;
  height: 56px;
  background: var(--gradient-cyan);
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-5);
  color: var(--midnight);
}

.about-card-icon svg {
  width: 28px;
  height: 28px;
}

.about-card h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: var(--space-3);
}

.about-card p {
  color: var(--gray-600);
  line-height: 1.7;
  font-size: 0.9375rem;
}

/* ========================================
   How Steps Grid (How It Works page)
   ======================================== */
.how-steps-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .how-steps-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1200px) {
  .how-steps-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

.how-step-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  text-align: center;
  position: relative;
  transition: all var(--transition-base);
}

.how-step-card:hover {
  border-color: var(--cyan);
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

.how-step-number {
  width: 36px;
  height: 36px;
  background: var(--gradient-cyan);
  color: var(--midnight);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.875rem;
  margin: 0 auto var(--space-4);
}

.how-step-icon {
  width: 48px;
  height: 48px;
  background: rgba(0, 212, 255, 0.1);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-4);
  color: var(--cyan-muted);
}

.how-step-icon svg {
  width: 24px;
  height: 24px;
}

.how-step-card h3 {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: var(--space-2);
}

.how-step-card p {
  color: var(--gray-600);
  font-size: 0.875rem;
  line-height: 1.6;
}

/* ========================================
   Platform Cards (How It Works page)
   ======================================== */
.platform-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .platform-cards-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.platform-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  text-align: center;
  transition: all var(--transition-base);
}

.platform-card:hover {
  border-color: var(--cyan);
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.platform-card-icon {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-5);
  color: white;
}

.platform-card-icon svg {
  width: 32px;
  height: 32px;
}

.platform-card-icon.whatsapp {
  background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
}

.platform-card-icon.instagram {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}

.platform-card-icon.facebook {
  background: linear-gradient(135deg, #1877f2 0%, #0d65d9 100%);
}

.platform-card-icon.tiktok {
  background: linear-gradient(135deg, #000000 0%, #25f4ee 50%, #fe2c55 100%);
}

.platform-card h3 {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: var(--space-2);
}

.platform-card p {
  color: var(--gray-600);
  font-size: 0.875rem;
  line-height: 1.6;
}

/* ========================================
   AI Hero (AI Agent page)
   ======================================== */
.ai-hero {
  padding: var(--space-24) 0 var(--space-16);
  background: var(--gradient-hero);
  position: relative;
  overflow: hidden;
  text-align: center;
}

.ai-coming-soon-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.15) 0%, rgba(255, 107, 107, 0.1) 100%);
  border: 1px solid rgba(0, 212, 255, 0.3);
  border-radius: var(--radius-full);
  color: var(--cyan);
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: var(--space-6);
}

.ai-coming-soon-badge svg {
  color: var(--cyan);
}

.ai-waitlist-form {
  max-width: 540px;
  margin: var(--space-8) auto 0;
}

.ai-waitlist-note {
  color: var(--gray-500);
  font-size: 0.875rem;
  margin-top: var(--space-3);
}

/* ========================================
   AI Features Grid (AI Agent page)
   ======================================== */
.ai-features-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .ai-features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.ai-feature-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  transition: all var(--transition-base);
}

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

.ai-feature-icon {
  width: 52px;
  height: 52px;
  background: var(--gradient-cyan);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-5);
  color: var(--midnight);
}

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

.ai-feature-card h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: var(--space-3);
}

.ai-feature-card p {
  color: var(--gray-600);
  line-height: 1.7;
  font-size: 0.9375rem;
}

/* ========================================
   AI Process Grid (AI Agent page)
   ======================================== */
.ai-process-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  align-items: center;
}

@media (min-width: 768px) {
  .ai-process-grid {
    flex-direction: row;
    justify-content: center;
  }
}

.ai-process-step {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  text-align: center;
  flex: 1;
  max-width: 320px;
  transition: all var(--transition-base);
}

.ai-process-step:hover {
  border-color: var(--cyan);
  box-shadow: var(--shadow-md);
}

.ai-process-number {
  width: 40px;
  height: 40px;
  background: var(--gradient-cyan);
  color: var(--midnight);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  margin: 0 auto var(--space-4);
}

.ai-process-step h3 {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: var(--space-2);
}

.ai-process-step p {
  color: var(--gray-600);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.ai-process-arrow {
  font-size: 1.5rem;
  color: var(--cyan);
  font-weight: 700;
  display: none;
}

@media (min-width: 768px) {
  .ai-process-arrow {
    display: flex;
    align-items: center;
  }
}

/* ========================================
   AI Use Cases (AI Agent page)
   ======================================== */
.ai-use-cases-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .ai-use-cases-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.ai-use-case {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  transition: all var(--transition-base);
}

.ai-use-case:hover {
  border-color: var(--cyan);
  box-shadow: var(--shadow-md);
}

.ai-use-case-label {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  background: rgba(0, 212, 255, 0.1);
  color: var(--cyan-muted);
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-3);
}

.ai-use-case-message {
  font-size: 1rem;
  color: var(--gray-900);
  font-weight: 500;
  font-style: italic;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--gray-200);
}

.ai-use-case-response {
  background: var(--off-white);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}

.ai-badge {
  display: inline-block;
  padding: var(--space-1) var(--space-2);
  background: var(--gradient-cyan);
  color: var(--midnight);
  border-radius: var(--radius-sm);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}

.ai-use-case-response p {
  color: var(--gray-700);
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* ========================================
   AI Teaser Section (Landing page)
   ======================================== */
.ai-teaser {
  padding: var(--space-16) 0;
  background: var(--off-white);
}

.ai-teaser-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-2xl);
  padding: var(--space-10);
  box-shadow: var(--shadow-md);
}

@media (min-width: 768px) {
  .ai-teaser-card {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
}

.ai-teaser-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.1) 0%, rgba(255, 107, 107, 0.08) 100%);
  border: 1px solid rgba(0, 212, 255, 0.2);
  border-radius: var(--radius-full);
  color: var(--cyan-muted);
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 600;
  margin-bottom: var(--space-4);
}

.ai-teaser-badge svg {
  color: var(--cyan);
}

.ai-teaser-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: var(--space-4);
}

.ai-teaser-text {
  color: var(--gray-600);
  line-height: 1.7;
  font-size: 1rem;
  margin-bottom: var(--space-6);
}

.ai-teaser-icon-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

.ai-teaser-icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-5);
  background: var(--off-white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  text-align: center;
  transition: all var(--transition-base);
}

.ai-teaser-icon-item:hover {
  border-color: var(--cyan);
  background: rgba(0, 212, 255, 0.05);
}

.ai-teaser-icon-item svg {
  width: 28px;
  height: 28px;
  color: var(--cyan-muted);
}

.ai-teaser-icon-item span {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--gray-700);
}

/* ========================================
   Footer Badge (New)
   ======================================== */
.footer-badge-new {
  display: inline-block;
  padding: 2px 6px;
  background: var(--gradient-cyan);
  color: var(--midnight);
  border-radius: var(--radius-sm);
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-inline-start: var(--space-2);
  vertical-align: middle;
}

/* ========================================
   Button Enhancements
   ======================================== */

/* CTA Enhanced - Pulsing glow + shimmer sweep */
.btn-cta-enhanced {
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
  animation: ctaGlow 3s ease-in-out infinite;
}

.btn-cta-enhanced::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -100%; /* physical */
  width: 50%;
  height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transform: skewX(-20deg);
  animation: shimmer 4s ease-in-out infinite;
}

@keyframes ctaGlow {
  0%, 100% { box-shadow: 0 0 20px rgba(0, 212, 255, 0.3); }
  50% { box-shadow: 0 0 40px rgba(0, 212, 255, 0.5); }
}

@keyframes shimmer {
  0% { left: -100%; } /* physical */
  50% { left: 150%; } /* physical */
  100% { left: 150%; } /* physical */
}

/* Pricing Fill - Slide-fill hover */
.btn-pricing-fill {
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.btn-pricing-fill::before {
  content: '';
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 0;
  height: 100%;
  background: var(--gradient-cyan);
  transition: width 0.4s ease;
  z-index: -1;
}

.btn-pricing-fill:hover::before {
  width: 100%;
}

.btn-pricing-fill:hover {
  color: var(--midnight);
  border-color: transparent;
}

/* Nav CTA - Subtle idle shimmer */
.btn-cta-nav {
  position: relative;
  overflow: hidden;
}

.btn-cta-nav::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -100%; /* physical */
  width: 50%;
  height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
  transform: skewX(-20deg);
  animation: shimmer 6s ease-in-out infinite 2s;
}

/* ========================================
   Hover Icon Animations
   ======================================== */
.hover-icon {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-icon:hover {
  transform: scale(1.1) rotate(5deg);
  box-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
}

/* ========================================
   Reduced Motion (Global)
   ======================================== */
@media (prefers-reduced-motion: reduce) {
  .btn-cta-enhanced,
  .btn-cta-enhanced::after,
  .btn-cta-nav::after,
  .hover-icon {
    animation: none !important;
  }

  .btn-cta-enhanced {
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
  }

  .hover-icon:hover {
    transform: none;
  }
}

/* ========================================
   Legal Pages (Privacy, Terms, Security)
   ======================================== */

/* Dark background for legal content sections */
.content-section.legal-content {
  background: var(--midnight);
}

/* Fallback: :has() for browsers that support it */
.content-section:has(.legal-page) {
  background: var(--midnight);
}

.legal-page {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem 0 4rem;
}

.legal-page h1 {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--white);
  margin-bottom: 0.5rem;
}

.legal-effective {
  display: inline-block;
  background: rgba(0, 212, 255, 0.1);
  border: 1px solid rgba(0, 212, 255, 0.2);
  color: var(--cyan);
  padding: 0.35rem 1rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 500;
  margin-bottom: 2.5rem;
}

.legal-page h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--white);
  margin-top: 3rem;
  margin-bottom: 1rem;
  padding-inline-start: 1rem;
  border-inline-start: 3px solid var(--cyan);
}

.legal-page h3 {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--gray-200);
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

.legal-page p,
.legal-page li {
  color: var(--gray-400);
  font-size: 1rem;
  line-height: 1.8;
}

.legal-page p {
  margin-bottom: 1rem;
}

.legal-page a {
  color: var(--cyan);
  text-decoration: none;
  transition: color var(--transition-fast);
}

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

.legal-page strong {
  color: var(--gray-200);
  font-weight: 600;
}

.legal-page ul {
  list-style: none;
  padding-inline-start: 0;
  margin-bottom: 1.5rem;
}

.legal-page ul li {
  position: relative;
  padding-inline-start: 1.5rem;
  margin-bottom: 0.65rem;
}

.legal-page ul li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.65rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyan);
}

.legal-contact {
  background: var(--midnight-light);
  border: 1px solid rgba(0, 212, 255, 0.15);
  border-radius: 12px;
  padding: 2rem 2.5rem;
  margin-top: 2.5rem;
}

.legal-contact h3 {
  color: var(--white);
  margin-top: 0;
}

.legal-contact a {
  color: var(--cyan);
  text-decoration: none;
}

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

.legal-page table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0 2rem;
  border-radius: 8px;
  overflow: hidden;
}

.legal-page table th,
.legal-page table td {
  text-align: start;
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--gray-400);
  font-size: 0.95rem;
}

.legal-page table th {
  color: var(--gray-200);
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: rgba(0, 212, 255, 0.05);
}

/* Security page cards */
.security-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin: 2rem 0;
}

.security-card {
  background: var(--midnight-light);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  padding: 2rem;
  transition: border-color 0.3s ease;
}

.security-card:hover {
  border-color: rgba(0, 212, 255, 0.25);
}

.security-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(0, 212, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  color: var(--cyan);
}

.security-card-icon svg {
  width: 24px;
  height: 24px;
}

.security-card h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 0.75rem;
}

.security-card p,
.security-card li {
  color: var(--gray-400);
  font-size: 0.95rem;
  line-height: 1.6;
}

.security-card ul {
  list-style: none;
  padding-inline-start: 0;
  margin: 0;
}

.security-card ul li {
  position: relative;
  padding-inline-start: 1.25rem;
  margin-bottom: 0.35rem;
}

.security-card ul li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.6rem;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cyan);
}

/* Legal page responsive */
@media (max-width: 768px) {
  .legal-page {
    padding: 1.5rem 0 3rem;
  }

  .legal-page h1 {
    font-size: 1.75rem;
  }

  .legal-page h2 {
    font-size: 1.25rem;
  }

  .security-cards-grid {
    grid-template-columns: 1fr;
  }

  .legal-page table {
    font-size: 0.85rem;
  }

  .legal-page table th,
  .legal-page table td {
    padding: 0.5rem 0.75rem;
  }
}

/* ========================================
   Blog
   ======================================== */
.blog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-top: 2rem;
}

@media (min-width: 640px) {
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .blog-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.blog-card {
  background: var(--midnight-light);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  padding: 2rem;
  transition: border-color 0.3s ease, transform 0.3s ease;
  display: flex;
  flex-direction: column;
}

.blog-card:hover {
  border-color: rgba(0, 212, 255, 0.25);
  transform: translateY(-2px);
}

.blog-card-date {
  font-size: 0.8rem;
  color: var(--gray-500);
  margin-bottom: 0.75rem;
  font-family: var(--font-mono);
}

.blog-card-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 0.75rem;
  line-height: 1.3;
}

.blog-card-excerpt {
  font-size: 0.9rem;
  color: var(--gray-400);
  line-height: 1.6;
  flex: 1;
}

.blog-card-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--cyan);
  transition: gap 0.2s ease;
}

.blog-card-link:hover {
  gap: 8px;
}

/* Blog article (show page) */
.blog-article {
  max-width: 740px;
  margin: 0 auto;
  padding: 2rem 0 4rem;
  color: var(--gray-300);
  font-size: 1.05rem;
  line-height: 1.8;
}

.blog-article h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--white);
  margin: 2.5rem 0 1rem;
}

.blog-article h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--gray-200);
  margin: 2rem 0 0.75rem;
}

.blog-article p {
  margin-bottom: 1.25rem;
  color: var(--gray-400);
}

.blog-article ul,
.blog-article ol {
  margin: 1rem 0 1.5rem 1.5rem;
  color: var(--gray-400);
}

.blog-article li {
  margin-bottom: 0.5rem;
}

.blog-article a {
  color: var(--cyan);
  text-decoration: underline;
}

.blog-article code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: rgba(0, 212, 255, 0.08);
  padding: 0.15em 0.4em;
  border-radius: 4px;
  color: var(--cyan-bright);
}

.blog-article pre {
  background: var(--midnight-light);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  overflow-x: auto;
  margin: 1.5rem 0;
}

.blog-article pre code {
  background: none;
  padding: 0;
}

.blog-article-meta {
  font-size: 0.875rem;
  color: var(--gray-500);
  margin-bottom: 2rem;
  font-family: var(--font-mono);
}

.blog-empty {
  text-align: center;
  padding: 4rem 0;
  color: var(--gray-500);
  font-size: 1.1rem;
}

/* ========================================
   Contact Page
   ======================================== */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
}

@media (min-width: 768px) {
  .contact-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

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

.contact-card {
  background: var(--midnight-light);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  padding: 2rem;
  text-align: center;
  transition: border-color 0.3s ease;
}

.contact-card:hover {
  border-color: rgba(0, 212, 255, 0.25);
}

.contact-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(0, 212, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  color: var(--cyan);
}

.contact-card-icon svg {
  width: 24px;
  height: 24px;
}

.contact-card h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 0.5rem;
}

.contact-card p {
  font-size: 0.9rem;
  color: var(--gray-400);
  line-height: 1.5;
}

.contact-card a {
  color: var(--cyan);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.contact-card a:hover {
  text-decoration: underline;
}

/* ========================================
   Channels Page
   ======================================== */
.channel-section {
  padding: var(--space-16) 0;
}

.channel-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  align-items: center;
}

@media (min-width: 768px) {
  .channel-content {
    grid-template-columns: 1fr 1fr;
  }
}

.channel-icon-large {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
}

.channel-icon-large svg {
  width: 32px;
  height: 32px;
}

.channel-icon-large.whatsapp {
  background: rgba(37, 211, 102, 0.12);
  color: #25d366;
}

.channel-icon-large.instagram {
  background: rgba(225, 48, 108, 0.12);
  color: #e1306c;
}

.channel-icon-large.facebook {
  background: rgba(24, 119, 242, 0.12);
  color: #1877f2;
}

.channel-icon-large.tiktok {
  background: rgba(255, 0, 80, 0.12);
  color: #ff0050;
}

.channel-features-list {
  list-style: none;
  padding: 0;
  margin: var(--space-4) 0 0;
}

.channel-features-list li {
  position: relative;
  padding-inline-start: 1.5rem;
  margin-bottom: 0.75rem;
  color: var(--gray-400);
  font-size: 0.95rem;
}

.channel-features-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.55rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyan);
}

/* ========================================
   Language Selector (Landing)
   ======================================== */
.landing-language-selector {
  position: relative;
}

.landing-language-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  color: var(--gray-300);
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.landing-language-btn:hover {
  border-color: var(--cyan);
  color: var(--white);
  background: rgba(0, 212, 255, 0.05);
}

.landing-language-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.landing-language-current {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.landing-language-btn .dropdown-chevron {
  width: 14px;
  height: 14px;
  opacity: 0.6;
  transition: transform 0.2s ease;
}

.landing-language-dropdown {
  position: absolute;
  top: calc(100% + 0.5rem);
  inset-inline-end: 0;
  min-width: 180px;
  background: var(--midnight-light);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  padding: 0.5rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all 0.2s ease;
  z-index: 1000;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}

.landing-language-dropdown.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.landing-language-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem;
  border-radius: 6px;
  color: var(--gray-300);
  text-decoration: none;
  font-size: 0.85rem;
  transition: all 0.15s ease;
  cursor: pointer;
}

.landing-language-option:hover {
  background: rgba(0, 212, 255, 0.08);
  color: var(--white);
}

.landing-language-option.active {
  color: var(--cyan);
  background: rgba(0, 212, 255, 0.06);
  cursor: default;
}

.landing-language-flag {
  font-size: 1.1rem;
  line-height: 1;
}

.landing-language-name {
  flex: 1;
}

.landing-language-check {
  width: 16px;
  height: 16px;
  color: var(--cyan);
}

/* Footer language selector variant */
.footer-col .landing-language-selector {
  margin-top: 0.75rem;
}

.footer-col .landing-language-btn {
  border-color: rgba(255,255,255,0.1);
  font-size: 0.8rem;
  padding: 0.4rem 0.65rem;
}

.footer-col .landing-language-dropdown {
  bottom: calc(100% + 0.5rem);
  top: auto;
  transform: translateY(8px);
}

.footer-col .landing-language-dropdown.show {
  transform: translateY(0);
}

/* Nav desktop language selector */
.nav-links-desktop .landing-language-selector {
  margin-inline-start: 0.25rem;
}

/* Mobile language selector in nav */
.mobile-nav-actions .landing-language-selector {
  width: 100%;
  margin-bottom: 0.75rem;
}

.mobile-nav-actions .landing-language-btn {
  width: 100%;
  justify-content: center;
}

.mobile-nav-actions .landing-language-dropdown {
  inset-inline: 0;
}

/* ========================================
   RTL Support for Arabic
   ======================================== */

/*
 * What is left here after the logical-property conversion, and why each kind
 * of rule survived — the mirror half of this block is gone.
 *
 * 1. `flex-direction: row-reverse` flips. A logical property cannot express
 *    "this row reads the other way"; `flex-direction` has no inline-aware
 *    keyword, and `row-reverse` is what these need.
 * 2. `transform: scaleX(-1)` on arrow glyphs. Same reason — a transform is
 *    geometry, it has no writing mode.
 * 3. RTL-only tweaks with no LTR counterpart: the icon margins here
 *    (`.check-icon`, `.guarantee-icon`, `.dropdown-item-icon`,
 *    `.price-features .check`) exist only in Arabic, because the LTR layouts
 *    space those icons with `gap` and carry no margin at all. They are
 *    written as `margin-inline-*` — inside `[dir="rtl"]`, inline-start IS
 *    right, so this resolves identically to what was here — but they cannot
 *    be hoisted into the base rules without adding a margin to the English
 *    page, which would be a visual change.
 * 4. `text-align: start` overrides. Redundant against a plain inherit, but
 *    not against a centred ancestor (`.section-header`, `.cta-content`),
 *    which several of these sit inside. Kept for that.
 * 5. The floating hero cards, which stay physical and marked. See the note
 *    on them below.
 *
 * Rules that only restated a mirror — the channel-page bullets, the legal
 * list indent, the language dropdown, the strikethrough price — were deleted
 * rather than converted: the logical base rule now produces exactly what
 * they were producing by hand.
 */
[dir="rtl"] {
  direction: rtl;
  text-align: start;
}

/*
 * Arabic is cursive — its letters join, and `letter-spacing` severs the
 * joins, so a tracked heading renders as a row of disconnected glyphs rather
 * than a word. Eighteen rules in this file are letter-spaced (every eyebrow,
 * badge and uppercase label), and every one of them breaks Arabic the moment
 * it renders Arabic text.
 *
 * Answered once, centrally, for the same reason `efir.css` answers it once:
 * a per-rule fix is eighteen chances to forget, and the nineteenth badge
 * reintroduces it. Guarded by `test/design_system_test.rb`.
 *
 * Keyed on `:lang()` rather than `[dir]` because the fault belongs to the
 * text, not to the page: it still does the right thing for an Arabic string
 * marked `lang="ar"` inside an otherwise English page. `body` is scope
 * enough — the landing layout loads this stylesheet and nothing else.
 *
 * `!important` so it wins over any rule in this file, including ones not yet
 * written.
 */
:lang(ar) body,
:lang(ar) body * {
  letter-spacing: normal !important;
}

/* Typography */
[dir="rtl"] body {
  font-family: 'Noto Sans Arabic', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] .hero-title,
[dir="rtl"] .section-title {
  font-family: 'Noto Sans Arabic', 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Centered sections stay centered */
[dir="rtl"] .section-header,
[dir="rtl"] .cta-content,
[dir="rtl"] .page-hero-content,
[dir="rtl"] .hero-content .hero-main {
  text-align: center;
}

[dir="rtl"] .section-title,
[dir="rtl"] .section-subtitle,
[dir="rtl"] .cta-title,
[dir="rtl"] .cta-subtitle {
  text-align: center;
}

/* Navigation RTL */
[dir="rtl"] .nav-content {
  flex-direction: row-reverse;
}

[dir="rtl"] .nav-links-desktop {
  flex-direction: row-reverse;
}

[dir="rtl"] .nav-dropdown-panel {
  inset-inline-end: auto;
  inset-inline-start: 0;
}

[dir="rtl"] .dropdown-item {
  flex-direction: row-reverse;
  text-align: start;
}

[dir="rtl"] .dropdown-item-icon {
  margin-inline-end: 0.75rem;
  margin-inline-start: 0;
}

/* Hero RTL */
[dir="rtl"] .hero-content {
  flex-direction: row-reverse;
}

[dir="rtl"] .hero-stats {
  flex-direction: row-reverse;
}

[dir="rtl"] .trust-bar {
  flex-direction: row-reverse;
}

[dir="rtl"] .trust-item {
  flex-direction: row-reverse;
}

[dir="rtl"] .check-icon {
  margin-inline-end: 0.375rem;
  margin-inline-start: 0;
}

/* Cards and grids */
[dir="rtl"] .problem-card,
[dir="rtl"] .about-card {
  text-align: start;
}

[dir="rtl"] .step {
  text-align: start;
}

/* Steps section */
[dir="rtl"] .steps {
  flex-direction: row-reverse;
}

/* Solution visual */
[dir="rtl"] .solution-visual {
  flex-direction: row-reverse;
}

[dir="rtl"] .arrow-icon {
  transform: scaleX(-1);
}

/* Features demo */
[dir="rtl"] .inbox-demo {
  flex-direction: row-reverse;
}

[dir="rtl"] .demo-message-header {
  flex-direction: row-reverse;
}

[dir="rtl"] .demo-message-meta {
  text-align: start;
}

[dir="rtl"] .demo-message-footer {
  flex-direction: row-reverse;
}

[dir="rtl"] .demo-actions {
  flex-direction: row-reverse;
}

[dir="rtl"] .toolbar-tabs {
  flex-direction: row-reverse;
}

[dir="rtl"] .toolbar-actions {
  flex-direction: row-reverse;
}

[dir="rtl"] .composer-actions {
  flex-direction: row-reverse;
}

[dir="rtl"] .feature-highlights {
  flex-direction: row-reverse;
}

/* Pricing */
[dir="rtl"] .pricing-toggle {
  flex-direction: row-reverse;
}

[dir="rtl"] .price-features li {
  flex-direction: row-reverse;
  text-align: start;
}

[dir="rtl"] .price-features .check {
  margin-inline-end: 0.5rem;
  margin-inline-start: 0;
}

/* CTA */
[dir="rtl"] .cta-guarantees {
  flex-direction: row-reverse;
}

[dir="rtl"] .guarantee {
  flex-direction: row-reverse;
}

[dir="rtl"] .guarantee-icon {
  margin-inline-end: 0.375rem;
  margin-inline-start: 0;
}

/* Footer RTL */
[dir="rtl"] .footer-grid {
  direction: rtl;
}

[dir="rtl"] .footer-bottom {
  flex-direction: row-reverse;
}

[dir="rtl"] .footer-links {
  flex-direction: row-reverse;
}

/* Channel pages RTL */
[dir="rtl"] .channel-content {
  flex-direction: row-reverse;
}

/* How it works steps RTL */
[dir="rtl"] .how-steps-grid {
  direction: rtl;
}

[dir="rtl"] .ai-process-arrow {
  transform: scaleX(-1);
}

[dir="rtl"] .ai-process-grid {
  direction: rtl;
}

/* Security cards RTL */
[dir="rtl"] .security-cards-grid {
  direction: rtl;
}

[dir="rtl"] .security-card {
  text-align: start;
}

/* Legal pages RTL */
[dir="rtl"] .legal-page {
  text-align: start;
}

[dir="rtl"] .legal-page table {
  text-align: start;
}

/* Contact cards RTL */
[dir="rtl"] .contact-grid {
  direction: rtl;
}

[dir="rtl"] .contact-card {
  text-align: start;
}

/* Language selector RTL */
[dir="rtl"] .landing-language-option {
  flex-direction: row-reverse;
}

/* Mobile menu RTL */
[dir="rtl"] .mobile-menu {
  text-align: start;
}

[dir="rtl"] .mobile-section-trigger {
  flex-direction: row-reverse;
}

[dir="rtl"] .mobile-section-links {
  text-align: start;
}

/* FAQ RTL */
[dir="rtl"] .faq-question {
  flex-direction: row-reverse;
  text-align: start;
}

[dir="rtl"] .faq-answer {
  text-align: start;
}

/* Mockup window RTL */
[dir="rtl"] .message-header {
  flex-direction: row-reverse;
}

[dir="rtl"] .message-meta {
  text-align: start;
}

[dir="rtl"] .message-actions {
  flex-direction: row-reverse;
}

/*
 * Floating cards RTL — the one place in this file that stays physical on
 * both sides, deliberately.
 *
 * These three cards hang off the edges of the hero mockup illustration and
 * their offsets were composed by eye against it, not derived from a layout.
 * The proof is that the RTL values are not the mirror of the LTR ones:
 * card-1 stays on the same side and only changes from -5% to -2rem, while
 * card-2 does flip. A logical rewrite would have to pick one of those two
 * meanings and would change how the Arabic hero looks — which is a design
 * decision, not a direction fix, so it is not being made here under cover of
 * a refactor. Exempted on the record instead.
 */
[dir="rtl"] .floating-card.card-1 {
  left: auto; /* physical */
  right: -2rem; /* physical */
}

[dir="rtl"] .floating-card.card-2 {
  right: auto; /* physical */
  left: -2rem; /* physical */
}

/* CTA form RTL */
[dir="rtl"] .cta-input-group {
  flex-direction: row-reverse;
}

[dir="rtl"] .cta-form {
  flex-direction: row-reverse;
}

/* Process arrows in AI section */
[dir="rtl"] .ai-use-cases-grid {
  direction: rtl;
}

[dir="rtl"] .ai-features-grid {
  direction: rtl;
}

/* ===========================================
   Waitlist Form Styles
   =========================================== */
.waitlist-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
}

.waitlist-form-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

@media (min-width: 640px) {
  .waitlist-form-row {
    flex-direction: row;
    gap: var(--space-3);
  }
}

.waitlist-field {
  flex: 1;
  position: relative;
}

.waitlist-form .email-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
}

.waitlist-form .email-input:focus {
  border-color: var(--cyan);
  background: rgba(0, 212, 255, 0.05);
}

.waitlist-form .btn-block {
  width: 100%;
  margin-top: var(--space-2);
}

.waitlist-success {
  text-align: center;
  padding: var(--space-8) var(--space-4);
}

.waitlist-success .success-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #00d4ff, #0891b2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: white;
  margin: 0 auto var(--space-4);
}

.waitlist-success h3 {
  font-size: 1.5rem;
  color: var(--white);
  margin-bottom: var(--space-2);
}

.waitlist-success p {
  color: var(--gray-400);
  font-size: 1rem;
}

/* ===========================================
   Early Bird Pricing Badge
   =========================================== */
.early-bird-badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 9999px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-3);
}

.price-original {
  font-size: 1.25rem;
  color: var(--gray-500);
  margin-inline-end: var(--space-2);
}

.price-original del {
  text-decoration: line-through;
}

/* ===========================================
   RTL Waitlist Form
   =========================================== */
[dir="rtl"] .waitlist-form-row {
  flex-direction: column;
}

@media (min-width: 640px) {
  [dir="rtl"] .waitlist-form-row {
    flex-direction: row-reverse;
  }
}