/* =========================================================
   1. DESIGN TOKENS
   ========================================================= */
:root {
  --arkol-indigo: #4F46E5;
  --arkol-indigo-dark: #3730A3;
  --arkol-indigo-light: #6366F1;
  --arkol-amber: #F59E0B;
  --arkol-amber-dark: #D97706;
  --arkol-emerald: #10B981;
  --arkol-rose: #F43F5E;

  --bg: #FFFFFF;
  --bg-soft: #F8FAFC;
  --bg-muted: #F1F5F9;
  --surface: #FFFFFF;
  --surface-2: #F8FAFC;
  --border: #E2E8F0;
  --border-strong: #CBD5E1;
  --text: #0F172A;
  --text-muted: #475569;
  --text-subtle: #64748B;
  --text-inverse: #FFFFFF;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 20px 40px -12px rgba(15, 23, 42, 0.15), 0 8px 16px -8px rgba(15, 23, 42, 0.08);
  --shadow-xl: 0 32px 64px -16px rgba(15, 23, 42, 0.2);
  --shadow-glow: 0 0 40px rgba(79, 70, 229, 0.25);

  --gradient-primary: linear-gradient(135deg, #4F46E5 0%, #6366F1 50%, #8B5CF6 100%);
  --gradient-warm: linear-gradient(135deg, #F59E0B 0%, #F97316 100%);
  --gradient-hero: radial-gradient(ellipse at top, rgba(79, 70, 229, 0.08) 0%, transparent 60%);
  --gradient-mesh: 
    radial-gradient(at 20% 20%, rgba(79, 70, 229, 0.12) 0%, transparent 50%),
    radial-gradient(at 80% 0%, rgba(245, 158, 11, 0.08) 0%, transparent 50%),
    radial-gradient(at 0% 80%, rgba(16, 185, 129, 0.08) 0%, transparent 50%);

  --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;

  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 1rem;
  --radius-xl: 1.25rem;
  --radius-2xl: 1.5rem;
  --radius-full: 9999px;

  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Instrument Serif', Georgia, serif;
  --font-indic: 'Noto Sans Devanagari', 'Noto Sans Bengali', 'Noto Sans Tamil', 'Noto Sans Telugu', 'Noto Sans Gujarati', 'Noto Sans Kannada', 'Noto Sans Malayalam', 'Noto Sans Gurmukhi', 'Noto Sans Arabic', 'Noto Sans Oriya', 'Noto Sans Assamese', 'Inter', sans-serif;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;

  --container-max: 1280px;
  --container-narrow: 960px;
  --header-h: 72px;
}

[data-theme="dark"] {
  --bg: #0B1020;
  --bg-soft: #0F172A;
  --bg-muted: #1E293B;
  --surface: #141B2F;
  --surface-2: #1A2238;
  --border: #2A3449;
  --border-strong: #3B4563;
  --text: #F1F5F9;
  --text-muted: #CBD5E1;
  --text-subtle: #94A3B8;
  --text-inverse: #0F172A;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 20px 40px -12px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 32px 64px -16px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 0 60px rgba(99, 102, 241, 0.4);
  --gradient-hero: radial-gradient(ellipse at top, rgba(99, 102, 241, 0.15) 0%, transparent 60%);
  --gradient-mesh: 
    radial-gradient(at 20% 20%, rgba(99, 102, 241, 0.18) 0%, transparent 50%),
    radial-gradient(at 80% 0%, rgba(245, 158, 11, 0.1) 0%, transparent 50%),
    radial-gradient(at 0% 80%, rgba(16, 185, 129, 0.1) 0%, transparent 50%);
}

/* =========================================================
   2. BASE
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  transition: background var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out);
}
body.no-scroll { overflow: hidden; }

img, svg { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
a { color: inherit; text-decoration: none; }
input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4, h5 { margin: 0; line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; }
p { margin: 0; }

::selection { background: var(--arkol-indigo); color: white; }

:focus-visible {
  outline: 2px solid var(--arkol-indigo);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* =========================================================
   3. UTILITIES
   ========================================================= */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-6);
}
.container--narrow { max-width: var(--container-narrow); }

.section {
  padding: var(--space-20) 0;
  position: relative;
}
@media (max-width: 768px) {
  .section { padding: var(--space-12) 0; }
}

.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-6);
}
.section-eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--arkol-indigo);
}

.section-title {
  font-size: clamp(1.875rem, 4vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-4);
}
.section-title .accent {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.section-subtitle {
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  color: var(--text-muted);
  max-width: 640px;
  line-height: 1.6;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* =========================================================
   4. BUTTONS
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.75rem 1.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  border-radius: var(--radius-md);
  transition: all var(--duration-base) var(--ease-out);
  white-space: nowrap;
  min-height: 44px;
  border: 1px solid transparent;
}
.btn--primary {
  background: var(--gradient-primary);
  color: white;
  box-shadow: var(--shadow-md), 0 0 0 0 rgba(79, 70, 229, 0.3);
}
.btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg), 0 8px 24px rgba(79, 70, 229, 0.35);
}
.btn--secondary {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border-strong);
}
.btn--secondary:hover {
  background: var(--bg-muted);
  border-color: var(--arkol-indigo);
}
/* Hero's "Live Video Consultation" CTA — a golden tint to stand out from
   the plain white .btn--secondary used elsewhere (header, footer, etc),
   without changing those other buttons. */
.btn--golden {
  background: linear-gradient(135deg, #FDE68A, #F59E0B);
  color: #1F2937;
  border-color: #D97706;
}
.btn--golden:hover {
  background: linear-gradient(135deg, #FCD34D, #D97706);
  border-color: #B45309;
}
.btn--ghost {
  background: transparent;
  color: var(--text);
}
.btn--ghost:hover { background: var(--bg-muted); }
.btn--lg { padding: 1rem 2rem; font-size: 1rem; min-height: 52px; }
.btn--sm { padding: 0.5rem 1rem; font-size: 0.875rem; min-height: 36px; }
.btn--xs { padding: 0.3rem 0.75rem; font-size: 0.78rem; min-height: 28px; }
.btn--block { width: 100%; }
.btn--amber {
  background: var(--gradient-warm);
  color: white;
  box-shadow: var(--shadow-md);
}
.btn--amber:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg), 0 8px 24px rgba(245, 158, 11, 0.35);
}
.btn--green {
  background: linear-gradient(135deg, #16a34a, #15803d);
  color: white;
  box-shadow: var(--shadow-md);
}
.btn--green:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg), 0 8px 24px rgba(22, 163, 74, 0.35);
}

/* =========================================================
   5. HEADER / NAV
   ========================================================= */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--border);
  transition: background var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out);
}
[data-theme="dark"] .header {
  background: rgba(11, 16, 32, 0.8);
}
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
  gap: var(--space-6);
  flex-wrap: nowrap;
}
.logo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
  min-width: 0;
  flex-shrink: 0;
}
.logo__text {
  font-size: 1.15rem;
  white-space: nowrap;
}
.logo__text-accent {
  font-weight: 700;
  color: var(--text-muted);
}
[data-theme="dark"] .logo__text-accent { color: var(--text-subtle); }

/* Between the nav-collapse breakpoint (1100px) and where there's
   genuinely enough room for the full name alongside the nav —
   show just "ARKOL" to avoid crowding the primary navigation. */
@media (min-width: 1101px) and (max-width: 1300px) {
  .logo__text-accent { display: none; }
}
@media (max-width: 1100px) {
  /* Nav is hidden (hamburger) here, so the full name has room again. */
  .logo__text { font-size: 1.05rem; }
}

/* Reserve room at the exact nav-collapse edge (Task: no wrapping at
   any supported laptop width). Kept as a no-op range for clarity —
   the tightened nav rules below cover it, this just documents intent. */
.logo__mark {
  width: 36px; height: 36px;
  background: var(--gradient-primary);
  border-radius: var(--radius-md);
  display: grid;
  place-items: center;
  color: white;
  font-weight: 800;
  font-size: 1rem;
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.logo__mark::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.3), transparent 50%);
}

/* Nav only ever renders above the collapse breakpoint, where it must
   always stay on a single line — never wrap, never shrink text.
   overflow:hidden is a safety net: if a future addition to
   .header__actions (e.g. the Dashboard button, shown only when
   logged in) ever leaves too little room, content clips cleanly
   here instead of visually overlapping the actions area. */
.nav {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--space-1);
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
}
.nav__link {
  padding: 0.5rem 0.875rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-muted);
  border-radius: var(--radius-md);
  transition: all var(--duration-fast) var(--ease-out);
  white-space: nowrap;
  flex-shrink: 0;
}
.nav__link:hover { color: var(--text); background: var(--bg-muted); }

/* Laptop band: nav is still visible but real estate is tighter than
   full desktop. Tighten spacing/type instead of letting links wrap. */
@media (min-width: 1101px) and (max-width: 1400px) {
  .nav { gap: 0; }
  .nav__link { padding: 0.5rem 0.625rem; font-size: 0.875rem; }
  .header__inner { gap: var(--space-4); }
  .header__actions { gap: var(--space-2); }
  #headerDashboardBtn { padding: 0.5rem 0.75rem; font-size: 0.8125rem; }
}

/* Logged in: the Dashboard button adds extra width to
   .header__actions that isn't there for a logged-out visitor. This
   applies the same compacting as the laptop band above, but tied to
   actually being logged in (body.is-authenticated, toggled by
   app.js) rather than a guessed viewport-width range — so it holds
   at ANY desktop width where the nav is visible, not just a range
   that happened to match one screenshot. */
@media (min-width: 1101px) {
  body.is-authenticated .nav { gap: 0; }
  body.is-authenticated .nav__link { padding: 0.5rem 0.5625rem; font-size: 0.9rem; }
  body.is-authenticated .header__inner { gap: var(--space-4); }
  body.is-authenticated .header__actions { gap: var(--space-2); }
  body.is-authenticated #headerDashboardBtn { padding: 0.5rem 0.75rem; font-size: 0.8125rem; }
  body.is-authenticated .logo__text-accent { display: none; }
}

.header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

.theme-toggle {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: var(--radius-md);
  color: var(--text-muted);
  transition: all var(--duration-fast) var(--ease-out);
  flex-shrink: 0;
}
.theme-toggle:hover { background: var(--bg-muted); color: var(--text); }
.theme-toggle svg { width: 20px; height: 20px; }
[data-theme="light"] .theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

.lang-select {
  padding: 0.5rem 0.75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out);
  flex-shrink: 0;
}
.lang-select:hover { border-color: var(--arkol-indigo); }

.mobile-toggle {
  display: none;
  width: 44px; height: 44px;
  border-radius: var(--radius-md);
  color: var(--text);
  flex-shrink: 0;
}
.mobile-toggle svg { width: 24px; height: 24px; }

/* Nav-collapse breakpoint moved up from 960px to 1100px: at 1024px
   (a required test width) there simply isn't room for six full-length
   nav labels ("How It Works", "Legal & Tax", etc.) on one line without
   either wrapping or shrinking text to the point of illegibility. Per
   spec ("if there isn't enough space, use the mobile menu instead of
   wrapping text"), tablet/laptop-narrow widths get the hamburger menu
   instead, and every width above 1100px keeps the full nav on one line. */
@media (max-width: 1100px) {
  .nav { display: none; }
  .mobile-toggle { display: grid; place-items: center; }
  .lang-select { display: none; }
}

/* The header-bar "Buy WhatsApp AI Chat Minutes" and "Video" CTAs are
   duplicated inside the mobile menu itself (with more room to breathe
   there). On narrow phones there isn't space for logo + theme toggle +
   these buttons + hamburger without crowding/overflow (which was
   forcing the WHOLE PAGE to scroll horizontally, cutting off content
   on the left), so hide the top-bar copies on small screens only —
   both actions stay reachable via the hamburger menu, nothing is
   removed, just decluttered. */
@media (max-width: 600px) {
  .header__actions > .btn--primary,
  .header__actions > .btn--secondary {
    display: none;
  }
}

.mobile-menu {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  background: var(--bg);
  z-index: 99;
  padding: var(--space-6);
  transform: translateX(100%);
  transition: transform var(--duration-base) var(--ease-out);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border-top: 1px solid var(--border);
}
.mobile-menu.open { transform: translateX(0); }
.mobile-menu__link {
  display: block;
  padding: var(--space-4) 0;
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--text);
  border-bottom: 1px solid var(--border);
}
.mobile-menu__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

/* Small-phone tightening for the header bar itself (390px/360px):
   slightly smaller logo mark/type and tighter action gap so the
   logo, theme toggle and hamburger never crowd or overflow. */
@media (max-width: 400px) {
  .header__inner { gap: var(--space-3); }
  .header__actions { gap: var(--space-2); }
  .logo__mark { width: 32px; height: 32px; font-size: 0.9rem; }
  .logo__text { font-size: 0.95rem; }
}

/* =========================================================
   6. HERO
   ========================================================= */
.hero {
  position: relative;
  padding: var(--space-16) 0 var(--space-10);
  overflow: hidden;
  background: var(--gradient-hero);
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gradient-mesh);
  pointer-events: none;
  opacity: 0.6;
}
.hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-12);
  align-items: center;
}
@media (max-width: 960px) {
  .hero__grid { grid-template-columns: 1fr; gap: var(--space-10); }
  .hero { padding: var(--space-10) 0 var(--space-12); }
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.375rem 0.875rem;
  background: rgba(79, 70, 229, 0.08);
  border: 1px solid rgba(79, 70, 229, 0.2);
  border-radius: var(--radius-full);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--arkol-indigo);
  margin-bottom: var(--space-6);
}
[data-theme="dark"] .hero__badge {
  background: rgba(99, 102, 241, 0.15);
  color: #A5B4FC;
}
.hero__badge .pulse {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--arkol-emerald);
  position: relative;
}
.hero__badge .pulse::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: var(--arkol-emerald);
  opacity: 0.4;
  animation: pulse 2s ease-out infinite;
}
@keyframes pulse {
  0% { transform: scale(0.8); opacity: 0.6; }
  100% { transform: scale(2); opacity: 0; }
}

.hero__title {
  font-size: clamp(2.25rem, 5.5vw, 4rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.05;
  margin-bottom: var(--space-6);
}
.hero__title .line { display: block; }
.hero__title .gradient {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__title .serif {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.01em;
}

.hero__desc {
  font-size: clamp(1rem, 1.5vw, 1.1875rem);
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: var(--space-8);
  max-width: 540px;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.hero__feature-line {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin-bottom: var(--space-8);
}
.hero__feature-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-muted);
}
.hero__feature-item svg {
  width: 15px;
  height: 15px;
  color: var(--arkol-emerald);
  flex-shrink: 0;
}

.hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6) var(--space-8);
  padding-top: var(--space-8);
  border-top: 1px solid var(--border);
}
.trust-item { display: flex; flex-direction: column; gap: 2px; }
.trust-item__label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.trust-item__value {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text);
}

.hero__visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 520px;
}
@media (max-width: 960px) {
  .hero__visual { min-height: 420px; }
}

.wa-mockup {
  position: relative;
  width: 300px;
  max-width: 100%;
  height: 560px;
  max-height: 80vh;
  background: linear-gradient(145deg, #1E293B, #0F172A);
  border-radius: 28px;
  padding: 10px;
  box-shadow:
    0 40px 80px -20px rgba(15, 23, 42, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.1) inset,
    var(--shadow-glow);
  transform: perspective(1200px) rotateY(-8deg) rotateX(2deg);
  animation: phoneFloat 6s ease-in-out infinite;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
@keyframes phoneFloat {
  0%, 100% { transform: perspective(1200px) rotateY(-8deg) rotateX(2deg) translateY(0); }
  50% { transform: perspective(1200px) rotateY(-8deg) rotateX(2deg) translateY(-10px); }
}
@media (prefers-reduced-motion: reduce) {
  .wa-mockup { animation: none; }
}
.wa-mockup__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-4) var(--space-3);
  background: #075E54;
  border-radius: 20px 20px 0 0;
  color: #fff;
  flex-shrink: 0;
}
.wa-mockup__avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #F59E0B, #F97316);
  display: grid; place-items: center;
  font-size: 1.1rem;
  font-weight: 800;
  color: white;
  flex-shrink: 0;
}
.wa-mockup__name { font-size: 0.9375rem; font-weight: 700; }
.wa-mockup__status { font-size: 0.75rem; opacity: 0.75; }
.wa-mockup__body {
  flex: 1;
  background: #ECE5DD;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  overflow: hidden;
  border-radius: 0 0 20px 20px;
}
.wa-mockup__bubble {
  max-width: 85%;
  padding: 10px 13px;
  border-radius: 10px;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: #111;
  box-shadow: 0 1px 1px rgba(0,0,0,0.1);
}
.wa-mockup__bubble--in {
  background: #fff;
  align-self: flex-start;
  border-top-left-radius: 2px;
}
.wa-mockup__bubble--out {
  background: #DCF8C6;
  align-self: flex-end;
  border-top-right-radius: 2px;
}
.wa-mockup__session-pill {
  margin: var(--space-2) auto 0;
  background: rgba(7, 94, 84, 0.9);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}

.orb {
  position: absolute;
  border-radius: 50%;
  background: var(--gradient-primary);
  filter: blur(40px);
  opacity: 0.4;
  pointer-events: none;
}
.orb--1 { width: 200px; height: 200px; top: 10%; left: -10%; animation: orbFloat 8s ease-in-out infinite; }
.orb--2 { width: 160px; height: 160px; bottom: 10%; right: -5%; background: var(--gradient-warm); animation: orbFloat 10s ease-in-out infinite reverse; }
@keyframes orbFloat {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(20px, -20px); }
}
@media (prefers-reduced-motion: reduce) {
  .orb { animation: none; }
}

/* =========================================================
   7. AI MASCOT
   ========================================================= */
.mascot {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 72px;
  height: 72px;
  z-index: 50;
  pointer-events: none;
  animation: mascotFloat 5s ease-in-out infinite;
}
@media (max-width: 768px) {
  .mascot {
    width: 56px; height: 56px;
    bottom: 16px; right: 16px;
    animation: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mascot { animation: none; }
}
.mascot__orb {
  width: 100%; height: 100%;
  border-radius: 50%;
  background: var(--gradient-primary);
  position: relative;
  box-shadow: 
    0 8px 24px rgba(79, 70, 229, 0.4),
    0 0 0 4px rgba(79, 70, 229, 0.1),
    inset 0 2px 8px rgba(255,255,255,0.3);
  animation: mascotPulse 3s ease-in-out infinite;
}
@keyframes mascotPulse {
  0%, 100% { box-shadow: 0 8px 24px rgba(79, 70, 229, 0.4), 0 0 0 4px rgba(79, 70, 229, 0.1), inset 0 2px 8px rgba(255,255,255,0.3); }
  50% { box-shadow: 0 8px 32px rgba(79, 70, 229, 0.6), 0 0 0 8px rgba(79, 70, 229, 0.15), inset 0 2px 8px rgba(255,255,255,0.3); }
}
@media (prefers-reduced-motion: reduce) {
  .mascot__orb { animation: none; }
}
.mascot__face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.mascot__face svg {
  width: 55%; height: 55%;
  color: white;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}
@keyframes mascotFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* =========================================================
   8. HOW IT WORKS
   ========================================================= */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-12);
}
@media (max-width: 960px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .steps { grid-template-columns: 1fr; } }

.step {
  position: relative;
  padding: var(--space-8);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  transition: all var(--duration-base) var(--ease-out);
}
.step:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--arkol-indigo);
}
.step__num {
  width: 44px; height: 44px;
  border-radius: var(--radius-md);
  background: var(--bg-muted);
  color: var(--arkol-indigo);
  display: grid; place-items: center;
  font-weight: 800;
  font-size: 1.125rem;
  margin-bottom: var(--space-5);
  border: 1px solid var(--border);
}
.step__title {
  font-size: 1.125rem;
  font-weight: 700;
  margin-bottom: var(--space-2);
  color: var(--text);
}
.step__desc {
  font-size: 0.9375rem;
  color: var(--text-muted);
  line-height: 1.6;
}

/* =========================================================
   9. CATEGORIES
   ========================================================= */
.categories__tabs {
  display: inline-flex;
  gap: var(--space-2);
  padding: var(--space-1);
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-10);
}
.tab-btn {
  padding: 0.625rem 1.25rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-muted);
  border-radius: var(--radius-full);
  transition: all var(--duration-fast) var(--ease-out);
}
.tab-btn.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

.categories__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-4);
}
.cat-card {
  padding: var(--space-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: all var(--duration-base) var(--ease-out);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.cat-card:hover {
  transform: translateY(-2px);
  border-color: var(--arkol-indigo);
  box-shadow: var(--shadow-md);
}
.cat-card__icon {
  width: 44px; height: 44px;
  border-radius: var(--radius-md);
  background: rgba(79, 70, 229, 0.1);
  color: var(--arkol-indigo);
  display: grid; place-items: center;
}
[data-theme="dark"] .cat-card__icon {
  background: rgba(99, 102, 241, 0.2);
  color: #A5B4FC;
}
.cat-card__icon svg { width: 22px; height: 22px; }
.cat-card__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
}
.cat-card__desc {
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.tab-panel { display: none; }
.tab-panel.active { display: block; animation: fadeIn 0.3s var(--ease-out); }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* =========================================================
   10. PHONE EXPERIENCE
   ========================================================= */
.phone-exp {
  background: var(--bg-soft);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.phone-exp__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: center;
}
@media (max-width: 960px) {
  .phone-exp__grid { grid-template-columns: 1fr; }
}
.phone-exp__list {
  list-style: none;
  padding: 0;
  margin: var(--space-8) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.phone-exp__item {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.phone-exp__item-num {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--gradient-primary);
  color: white;
  display: grid; place-items: center;
  font-weight: 700;
  font-size: 0.875rem;
}
.phone-exp__item-text {
  font-size: 0.9375rem;
  color: var(--text);
  line-height: 1.5;
  padding-top: 4px;
}

.phone-exp__visual {
  position: relative;
  padding: var(--space-10);
  background: var(--gradient-primary);
  border-radius: var(--radius-2xl);
  color: white;
  overflow: hidden;
  min-height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: var(--shadow-xl);
}
.phone-exp__visual::before {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.15), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(245, 158, 11, 0.2), transparent 40%);
}
.phone-exp__visual-content { position: relative; z-index: 1; }
.phone-exp__big-text {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: var(--space-6);
}
.phone-exp__quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.25rem;
  opacity: 0.9;
  line-height: 1.5;
  padding-left: var(--space-6);
  border-left: 3px solid rgba(255,255,255,0.4);
  margin-top: var(--space-6);
}

/* =========================================================
   10b. LANGUAGES — PREMIUM CARD GRID
   ========================================================= */
.languages {
  background: var(--bg-soft);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
.languages::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gradient-mesh);
  opacity: 0.4;
  pointer-events: none;
}
.languages > .container { position: relative; z-index: 1; }

.lang-grid-cards {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-10);
}
@media (max-width: 1024px) {
  .lang-grid-cards { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 768px) {
  .lang-grid-cards { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) {
  .lang-grid-cards { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
}

.lang-card {
  padding: var(--space-6) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  text-align: center;
  transition: all var(--duration-base) var(--ease-out);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 120px;
  position: relative;
  overflow: hidden;
}
.lang-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gradient-primary);
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-out);
  z-index: 0;
}
.lang-card:hover {
  transform: translateY(-3px);
  border-color: var(--arkol-indigo);
  box-shadow: var(--shadow-md);
}
.lang-card:hover::before { opacity: 0.04; }
[data-theme="dark"] .lang-card:hover::before { opacity: 0.12; }

.lang-card__native {
  font-family: var(--font-indic);
  font-size: 1.625rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
  letter-spacing: 0.01em;
  position: relative;
  z-index: 1;
  word-break: keep-all;
}
.lang-card__english {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  color: var(--text-muted);
  font-weight: 500;
  letter-spacing: 0.02em;
  position: relative;
  z-index: 1;
}
.lang-card--more {
  border-style: dashed;
  border-color: var(--arkol-indigo);
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.04), rgba(139, 92, 246, 0.04));
}
.lang-card--more .lang-card__native {
  font-family: var(--font-sans);
  color: var(--arkol-indigo);
  font-size: 1.125rem;
  font-weight: 700;
}
.lang-card--more .lang-card__english {
  color: var(--arkol-indigo);
  opacity: 0.8;
  font-size: 0.75rem;
}
[data-theme="dark"] .lang-card--more {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(139, 92, 246, 0.08));
}

.languages__note {
  margin-top: var(--space-8);
  text-align: center;
  font-size: 0.875rem;
  color: var(--text-subtle);
  font-style: italic;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

/* =========================================================
   11. PRICING
   ========================================================= */
.pricing__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-4);
}
@media (max-width: 1024px) { .pricing__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .pricing__grid { grid-template-columns: 1fr; } }

/* Used when fewer than 4 plans are currently configured (see
   config.php). Keeps the existing .plan card design but centers the
   card group instead of leaving empty grid columns beside it.
   Purely additive — the 4-column grid rule above is unchanged for
   when all 4 plans are present. Scoped to desktop only: below
   1024px the grid already collapses to 2/1 columns via the media
   queries above, which is already correct, so this doesn't need to
   (and must not, to avoid a same-specificity cascade fight) apply there. */
@media (min-width: 1025px) {
  .pricing__grid--count-1 { grid-template-columns: minmax(0, 380px); justify-content: center; }
  .pricing__grid--count-2 { grid-template-columns: repeat(2, minmax(0, 380px)); justify-content: center; }
  .pricing__grid--count-3 { grid-template-columns: repeat(3, minmax(0, 380px)); justify-content: center; }
}

.plan {
  position: relative;
  padding: var(--space-8);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  display: flex;
  flex-direction: column;
  transition: all var(--duration-base) var(--ease-out);
}
.plan:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.plan--popular {
  border-color: var(--arkol-indigo);
  box-shadow: var(--shadow-lg), 0 0 0 1px var(--arkol-indigo);
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
}
.plan__badge {
  position: absolute;
  top: -12px; left: 50%;
  transform: translateX(-50%);
  padding: 0.25rem 0.875rem;
  background: var(--gradient-primary);
  color: white;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: var(--radius-full);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  box-shadow: var(--shadow-md);
}
.plan__minutes {
  font-size: 2.5rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text);
  line-height: 1;
}
.plan__minutes-label {
  font-size: 0.875rem;
  color: var(--text-muted);
  font-weight: 500;
  margin-top: var(--space-1);
  margin-bottom: var(--space-5);
}
.plan__price {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-5) 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-5);
}
.plan__price-amount {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.02em;
}
.plan__price-period {
  font-size: 0.875rem;
  color: var(--text-muted);
}
.plan__validity {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-bottom: var(--space-5);
}
.plan__validity svg { width: 16px; height: 16px; color: var(--arkol-emerald); }
.plan__features {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
}
.plan__feature {
  display: flex;
  gap: var(--space-3);
  font-size: 0.875rem;
  color: var(--text);
  line-height: 1.5;
}
.plan__feature svg {
  flex-shrink: 0;
  width: 18px; height: 18px;
  color: var(--arkol-emerald);
  margin-top: 2px;
}
.plan__note {
  font-size: 0.75rem;
  color: var(--text-subtle);
  margin-top: var(--space-3);
  text-align: center;
  font-style: italic;
}

/* =========================================================
   12. MINUTES EXPLAINER
   ========================================================= */
.explainer__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-10);
  margin-top: var(--space-10);
  align-items: center;
}
@media (max-width: 768px) { .explainer__grid { grid-template-columns: 1fr; } }

.minute-demo {
  padding: var(--space-8);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}
.minute-demo__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) 0;
  border-bottom: 1px dashed var(--border);
}
.minute-demo__row:last-child { border-bottom: none; }
.minute-demo__label {
  font-size: 0.9375rem;
  color: var(--text-muted);
}
.minute-demo__value {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.minute-demo__value--highlight { color: var(--arkol-indigo); }
.minute-demo__value--success { color: var(--arkol-emerald); }

.minute-demo__total {
  margin-top: var(--space-4);
  padding: var(--space-4);
  background: rgba(79, 70, 229, 0.08);
  border-radius: var(--radius-md);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
[data-theme="dark"] .minute-demo__total {
  background: rgba(99, 102, 241, 0.15);
}
.minute-demo__total-label {
  font-weight: 600;
  color: var(--text);
}
.minute-demo__total-value {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--arkol-indigo);
}

/* =========================================================
   13. DOCUMENTS
   ========================================================= */
.docs__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-10);
}
@media (max-width: 768px) { .docs__grid { grid-template-columns: 1fr; } }

.doc-card {
  padding: var(--space-8);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  transition: all var(--duration-base) var(--ease-out);
}
.doc-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.doc-card__icon {
  width: 56px; height: 56px;
  border-radius: var(--radius-lg);
  background: var(--gradient-primary);
  display: grid; place-items: center;
  color: white;
  margin-bottom: var(--space-5);
  box-shadow: var(--shadow-md);
}
.doc-card__icon svg { width: 28px; height: 28px; }
.doc-card__title {
  font-size: 1.125rem;
  font-weight: 700;
  margin-bottom: var(--space-2);
}
.doc-card__desc {
  font-size: 0.9375rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: var(--space-5);
}
.doc-card__formats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.format-tag {
  padding: 0.25rem 0.625rem;
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* =========================================================
   14. MATTERS / MEMORY
   ========================================================= */
.matters__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  margin-top: var(--space-10);
}
@media (max-width: 768px) { .matters__grid { grid-template-columns: 1fr; } }

.matter-card {
  padding: var(--space-8);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  position: relative;
  overflow: hidden;
}
.matter-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--gradient-primary);
}
.matter-card--tax::before { background: var(--gradient-warm); }

.matter-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-5);
}
.matter-card__category {
  display: inline-flex;
  padding: 0.25rem 0.75rem;
  background: rgba(79, 70, 229, 0.1);
  color: var(--arkol-indigo);
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.matter-card--tax .matter-card__category {
  background: rgba(245, 158, 11, 0.15);
  color: var(--arkol-amber-dark);
}
[data-theme="dark"] .matter-card--tax .matter-card__category { color: #FCD34D; }
.matter-card__status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--arkol-emerald);
}
.matter-card__status::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.matter-card__title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: var(--space-2);
}
.matter-card__desc {
  font-size: 0.9375rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: var(--space-5);
}
.matter-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
  font-size: 0.8125rem;
  color: var(--text-muted);
}
.matter-card__meta-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.matter-card__meta-item svg { width: 14px; height: 14px; }

/* =========================================================
   16. PRIVACY
   ========================================================= */
.privacy__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-10);
}
@media (max-width: 960px) { .privacy__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .privacy__grid { grid-template-columns: 1fr; } }

.privacy-card {
  padding: var(--space-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.privacy-card__icon {
  width: 40px; height: 40px;
  border-radius: var(--radius-md);
  background: rgba(16, 185, 129, 0.1);
  color: var(--arkol-emerald);
  display: grid; place-items: center;
  margin-bottom: var(--space-4);
}
.privacy-card__icon svg { width: 20px; height: 20px; }
.privacy-card__title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: var(--space-2);
}
.privacy-card__desc {
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.6;
}

/* =========================================================
   17. FAQ
   ========================================================= */
.faq__list {
  max-width: 800px;
  margin: var(--space-10) auto 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.faq-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--duration-fast) var(--ease-out);
}
.faq-item[open] { border-color: var(--arkol-indigo); }
.faq-item summary {
  padding: var(--space-5) var(--space-6);
  font-weight: 600;
  font-size: 1rem;
  color: var(--text);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  list-style: none;
  transition: background var(--duration-fast) var(--ease-out);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { background: var(--bg-muted); }
.faq-item summary::after {
  content: '';
  flex-shrink: 0;
  width: 20px; height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-size: contain;
  transition: transform var(--duration-base) var(--ease-out);
}
[data-theme="dark"] .faq-item summary::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23CBD5E1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}
.faq-item[open] summary::after { transform: rotate(180deg); }
.faq-item__content {
  padding: 0 var(--space-6) var(--space-6);
  font-size: 0.9375rem;
  color: var(--text-muted);
  line-height: 1.7;
}

/* =========================================================
   18. FINAL CTA
   ========================================================= */
.final-cta {
  position: relative;
  padding: var(--space-20) 0;
  background: var(--gradient-primary);
  color: white;
  overflow: hidden;
}
.final-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.15), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(245, 158, 11, 0.2), transparent 40%);
}
.final-cta__inner {
  position: relative;
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}
.final-cta__title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-5);
  line-height: 1.1;
}
.final-cta__desc {
  font-size: 1.125rem;
  opacity: 0.9;
  margin-bottom: var(--space-8);
  line-height: 1.6;
}
.final-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
}
.final-cta .btn--secondary {
  background: rgba(255,255,255,0.15);
  color: white;
  border-color: rgba(255,255,255,0.3);
  backdrop-filter: blur(10px);
}
.final-cta .btn--secondary:hover {
  background: rgba(255,255,255,0.25);
  border-color: rgba(255,255,255,0.5);
}

/* =========================================================
   19. FOOTER
   ========================================================= */
.footer {
  background: var(--bg-soft);
  border-top: 1px solid var(--border);
  padding: var(--space-16) 0 var(--space-8);
}
.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-10);
  margin-bottom: var(--space-12);
}
@media (max-width: 768px) {
  .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
}
@media (max-width: 480px) {
  .footer__grid { grid-template-columns: 1fr; }
}

.footer__brand-desc {
  font-size: 0.9375rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: var(--space-4) 0 var(--space-5);
  max-width: 320px;
}
.footer__heading {
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-subtle);
  margin-bottom: var(--space-4);
}
.footer__links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.footer__links a {
  font-size: 0.9375rem;
  color: var(--text-muted);
  transition: color var(--duration-fast) var(--ease-out);
}
.footer__links a:hover { color: var(--arkol-indigo); }

.footer__bottom {
  padding-top: var(--space-8);
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-4);
  font-size: 0.875rem;
  color: var(--text-subtle);
}

/* =========================================================
   20. DISCLAIMER
   ========================================================= */
.disclaimer {
  background: var(--bg-muted);
  border-top: 1px solid var(--border);
  padding: var(--space-6) 0;
  font-size: 0.8125rem;
  color: var(--text-subtle);
  line-height: 1.6;
}
.disclaimer__inner {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}
.disclaimer__icon {
  flex-shrink: 0;
  width: 20px; height: 20px;
  color: var(--arkol-amber);
  margin-top: 2px;
}
.disclaimer__text strong { color: var(--text-muted); font-weight: 600; }

/* =========================================================
   21. MODAL
   ========================================================= */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  animation: fadeIn 0.2s var(--ease-out);
}
.modal-overlay.open { display: flex; }
@media (max-width: 480px) {
  .modal-overlay { align-items: flex-end; padding: 0; }
}

.modal {
  background: var(--surface);
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-xl);
  animation: slideUp 0.3s var(--ease-out);
}
@media (max-width: 480px) {
  .modal {
    max-width: 100%;
    max-height: 95vh;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.modal__header {
  padding: var(--space-6);
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  background: var(--surface);
  z-index: 1;
}
.modal__title {
  font-size: 1.25rem;
  font-weight: 700;
}
.modal__close {
  width: 36px; height: 36px;
  border-radius: var(--radius-md);
  display: grid; place-items: center;
  color: var(--text-muted);
  transition: all var(--duration-fast) var(--ease-out);
}
.modal__close:hover { background: var(--bg-muted); color: var(--text); }
.modal__close svg { width: 20px; height: 20px; }
.modal__body { padding: var(--space-6); }
@media (max-width: 360px) {
  .modal__body { padding: var(--space-4); }
  .modal__header { padding: var(--space-4); }
  .purchase-otp-group { gap: 6px; }
  .purchase-otp-input { width: 38px; height: 46px; font-size: 1.1rem; }
}
.modal__footer {
  padding: var(--space-6);
  border-top: 1px solid var(--border);
  display: flex;
  gap: var(--space-3);
  justify-content: flex-end;
}

/* =========================================================
   22. FORMS
   ========================================================= */
.form-group {
  margin-bottom: var(--space-5);
}
.form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: var(--space-2);
}
.form-label .required { color: var(--arkol-rose); }
.form-hint {
  font-size: 0.8125rem;
  color: var(--text-subtle);
  margin-top: var(--space-1);
}
.form-input {
  width: 100%;
  padding: 0.75rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  font-size: 0.9375rem;
  color: var(--text);
  transition: all var(--duration-fast) var(--ease-out);
  min-height: 44px;
}
.form-input:focus {
  outline: none;
  border-color: var(--arkol-indigo);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
}
.form-input::placeholder { color: var(--text-subtle); }

.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 16px;
  padding-right: 2.5rem;
}

.form-checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.5;
}
.form-checkbox input {
  width: 18px; height: 18px;
  margin-top: 2px;
  accent-color: var(--arkol-indigo);
  flex-shrink: 0;
}

.otp-group {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  margin: var(--space-6) 0;
}
.otp-input {
  width: 52px; height: 60px;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 700;
  background: var(--surface);
  border: 2px solid var(--border-strong);
  border-radius: var(--radius-md);
  transition: all var(--duration-fast) var(--ease-out);
}
.otp-input:focus {
  outline: none;
  border-color: var(--arkol-indigo);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
}
@media (max-width: 480px) {
  .otp-input { width: 44px; height: 52px; font-size: 1.25rem; }
}

/* =========================================================
   23. DASHBOARD
   ========================================================= */
.dashboard {
  display: none;
  min-height: 100vh;
  background: var(--bg-soft);
}
.dashboard.active { display: block; }

.dashboard__avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--gradient-primary);
  color: white;
  display: grid; place-items: center;
  font-weight: 700;
  flex-shrink: 0;
}

/* ── Layout: flexbox, not grid ──
   Task 1 fix: a fixed grid-template-columns left a stale empty
   column-gap when the sidebar collapsed. With flexbox, the sidebar's
   own flex-basis IS its width — when it changes (collapsed/expanded),
   the main content (flex: 1 1 auto) automatically reflows into
   exactly the remaining space, every time, with no separate layout
   recalculation needed. */
.dashboard__layout {
  display: flex;
  align-items: stretch;
  min-height: 100vh;
}
.dashboard__main {
  flex: 1 1 auto;
  min-width: 0; /* allow content/tables to shrink instead of overflowing */
}

/* ── Sidebar ── */
.dashboard__sidebar {
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: var(--space-6) var(--space-4);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  flex: 0 0 240px; /* width lives here — collapse just changes this number */
  transition: flex-basis var(--duration-fast) var(--ease-out), padding var(--duration-fast) var(--ease-out);
  overflow-y: auto; /* was overflow: hidden — on short mobile/tablet viewports
                        this cut off the Logout link with no way to reach it;
                        the sidebar now scrolls internally when its content
                        (profile + nav + footer) is taller than the screen. */
}

.dash-sidebar__profile {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-bottom: var(--space-5);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--border);
}
.dash-sidebar__profile-info { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.dashboard__user-name { font-weight: 600; font-size: 0.9375rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dashboard__user-phone { font-size: 0.8125rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.dash-sidebar__nav { display: flex; flex-direction: column; gap: var(--space-1); flex: 1; }
.dash-sidebar__footer { border-top: 1px solid var(--border); padding-top: var(--space-3); margin-top: var(--space-3); }

.dash-sidebar__collapse-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  margin-bottom: var(--space-4);
  margin-left: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-soft);
  color: var(--text-muted);
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-out);
  flex-shrink: 0;
}
.dash-sidebar__collapse-toggle:hover { color: var(--text); background: var(--bg-muted); }
.dash-sidebar__collapse-toggle svg { width: 16px; height: 16px; }

/* Collapsed state: icons only — just change the flex-basis, the
   main content reflows automatically. */
.dashboard__sidebar.dash-sidebar--collapsed { flex-basis: 76px; padding-left: var(--space-2); padding-right: var(--space-2); }
.dash-sidebar--collapsed .sidebar-link__label,
.dash-sidebar--collapsed .dash-sidebar__profile-info { display: none; }
.dash-sidebar--collapsed .dash-sidebar__profile { justify-content: center; }
.dash-sidebar--collapsed .sidebar-link { justify-content: center; padding: 0.75rem 0.5rem; }
.dash-sidebar--collapsed .dash-sidebar__collapse-toggle { margin: 0 auto var(--space-4); transform: rotate(180deg); }

.sidebar-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-muted);
  transition: all var(--duration-fast) var(--ease-out);
  white-space: nowrap;
}
.sidebar-link:hover { background: var(--bg-muted); color: var(--text); }
.sidebar-link.active {
  background: rgba(79, 70, 229, 0.1);
  color: var(--arkol-indigo);
  font-weight: 600;
}
[data-theme="dark"] .sidebar-link.active {
  background: rgba(99, 102, 241, 0.15);
  color: #A5B4FC;
}
.sidebar-link svg { width: 18px; height: 18px; flex-shrink: 0; }

@media (max-width: 960px) {
  .dashboard__layout { flex-direction: column; }

  /* Off-canvas open/close is gone (no mobile toggle button anymore —
     Overview/Chat History/Payment History/Logout are all reachable via
     the main mobile-menu and Quick Action cards instead), so the
     sidebar simply stays off-screen on mobile; it's still used as-is
     for the desktop layout above this breakpoint. */
  .dashboard__sidebar { display: none; }

  /* Collapse toggle is a desktop-only affordance. */
  .dash-sidebar__collapse-toggle { display: none; }

  .dashboard__main { width: 100%; }
}

.dashboard__main {
  padding: var(--space-8);
  overflow-x: hidden;
}
@media (max-width: 768px) {
  .dashboard__main { padding: var(--space-4); }
}

.dash-back-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0;
  margin-bottom: var(--space-4);
  cursor: pointer;
}
.dash-back-btn:hover { color: var(--arkol-indigo); }

.dashboard__page-title {
  font-size: 1.75rem;
  font-weight: 800;
  margin-bottom: var(--space-2);
  letter-spacing: -0.02em;
}
.dashboard__page-sub {
  color: var(--text-muted);
  margin-bottom: var(--space-8);
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}
@media (max-width: 960px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .stat-grid { grid-template-columns: 1fr; } }

.stat-card {
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
}
.stat-card--primary {
  background: var(--gradient-primary);
  color: white;
  border-color: transparent;
}
.stat-card--warning {
  border-color: var(--arkol-amber);
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.05), var(--surface));
}
.stat-card__label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-2);
}
.stat-card--primary .stat-card__label { color: rgba(255,255,255,0.8); }
.stat-card__value {
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
}
.stat-card__meta {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin-top: var(--space-2);
}
.stat-card--primary .stat-card__meta { color: rgba(255,255,255,0.8); }

.warning-card {
  padding: var(--space-5);
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(245, 158, 11, 0.05));
  border: 1px solid var(--arkol-amber);
  border-radius: var(--radius-lg);
  display: flex;
  gap: var(--space-4);
  align-items: center;
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}
.warning-card__icon {
  width: 40px; height: 40px;
  border-radius: var(--radius-md);
  background: var(--arkol-amber);
  color: white;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.warning-card__icon svg { width: 20px; height: 20px; }
.warning-card__content { flex: 1; min-width: 200px; }
.warning-card__title {
  font-weight: 700;
  font-size: 0.9375rem;
  margin-bottom: 2px;
}
.warning-card__desc {
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.call-info {
  padding: var(--space-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-6);
}
.call-info__title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.call-info__title svg { width: 18px; height: 18px; color: var(--arkol-indigo); }
.call-info__number {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: var(--arkol-indigo);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--space-2);
}
.call-info__note {
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.data-table {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border-collapse: separate;
  border-spacing: 0;
}
.data-table th, .data-table td {
  padding: var(--space-4);
  text-align: left;
  font-size: 0.875rem;
  border-bottom: 1px solid var(--border);
}
.data-table th {
  background: var(--bg-muted);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.75rem;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--bg-soft); }

.data-cards { display: none; }
@media (max-width: 768px) {
  .data-table { display: none; }
  .data-cards { display: flex; flex-direction: column; gap: var(--space-3); }
  .data-card {
    padding: var(--space-4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
  }
  .data-card__row {
    display: flex;
    justify-content: space-between;
    padding: var(--space-2) 0;
    font-size: 0.875rem;
    border-bottom: 1px dashed var(--border);
    gap: var(--space-3);
  }
  .data-card__row:last-child { border-bottom: none; }
  .data-card__label { color: var(--text-muted); }
  .data-card__value { font-weight: 600; color: var(--text); text-align: right; }
}

.dash-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
}
.dash-section__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
  gap: var(--space-3);
}
.dash-section__title {
  font-size: 1.125rem;
  font-weight: 700;
}

.quick-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}
@media (max-width: 768px) { .quick-actions { grid-template-columns: repeat(2, 1fr); } }

.quick-action {
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  transition: all var(--duration-fast) var(--ease-out);
  text-align: left;
  width: 100%;
}
.quick-action:hover {
  border-color: var(--arkol-indigo);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.quick-action__icon {
  width: 36px; height: 36px;
  border-radius: var(--radius-md);
  background: rgba(79, 70, 229, 0.1);
  color: var(--arkol-indigo);
  display: grid; place-items: center;
}
.quick-action__icon svg { width: 18px; height: 18px; }
.quick-action__label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
}

/* =========================================================
   24. REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}

@media print {
  .header, .mascot, .final-cta, .footer { display: none; }
}

/* =========================================================
   25. LEGAL / CONTENT PAGES (privacy, terms, refund, disclaimer,
   about, contact) — additive typography for long-form text.
   Reuses existing design tokens only; does not alter any rule
   above.
   ========================================================= */
.legal-page {
  padding: calc(var(--space-16) + var(--space-6)) 0 var(--space-20);
}
.legal-page__updated {
  color: var(--text-subtle);
  font-size: 0.875rem;
  margin-top: var(--space-2);
  margin-bottom: var(--space-10);
}
.legal-content h2 {
  font-family: var(--font-sans);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--text);
  margin-top: var(--space-10);
  margin-bottom: var(--space-3);
}
.legal-content h2:first-child { margin-top: 0; }
.legal-content h3 {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--text);
  margin-top: var(--space-6);
  margin-bottom: var(--space-2);
}
.legal-content p {
  color: var(--text-muted);
  line-height: 1.75;
  margin-bottom: var(--space-4);
}
.legal-content ul, .legal-content ol {
  color: var(--text-muted);
  line-height: 1.75;
  margin: 0 0 var(--space-4);
  padding-left: 1.4em;
}
.legal-content li { margin-bottom: var(--space-2); }
.legal-content a { color: var(--arkol-indigo); text-decoration: underline; }
.legal-content strong { color: var(--text); }
.legal-content .callout {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  margin: var(--space-6) 0;
  color: var(--text-muted);
  font-size: 0.9375rem;
  line-height: 1.7;
}
.legal-content .callout strong { color: var(--text); }

/* Contact page */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: var(--space-10);
  align-items: start;
}
@media (max-width: 860px) {
  .contact-grid { grid-template-columns: 1fr; }
}
.contact-info__item {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  margin-bottom: var(--space-5);
}
.contact-info__icon {
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: var(--radius-md);
  background: var(--bg-muted);
  display: flex; align-items: center; justify-content: center;
  color: var(--arkol-indigo);
}
.contact-info__label {
  font-size: 0.8125rem;
  color: var(--text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  margin-bottom: 2px;
}
.contact-info__value { color: var(--text); font-size: 0.9375rem; line-height: 1.6; }
.form-success {
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid var(--arkol-emerald);
  color: var(--text);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-5);
  font-size: 0.9375rem;
}
.form-error {
  background: rgba(244, 63, 94, 0.1);
  border: 1px solid var(--arkol-rose);
  color: var(--text);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-5);
  font-size: 0.9375rem;
}