/* ================================================
   Halla AI — Stylesheet
   Design: warm porcelain/gold luxury system
   Font: Hanken Grotesk | Primary: #1D1D1F | Accent: #85631F
   © 2025 Halla AI
================================================ */

/* ============================================
   DESIGN SYSTEM — SkipCalls/SideShift inspired
   Clean white, large bold Hanken Grotesk, generous space
============================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }

:root {
  /* Halla AI Consultancy — warm-luxury design system (porcelain/ivory
     neutrals + restrained gold, replaces the prior violet/navy SaaS
     palette site-wide; see docs reference image for the source system). */
  --white: #ffffff;
  --black: #1D1D1F;
  --gray-50: #FBFBFD;
  --gray-100: #F5F5F7;
  --gray-200: #E8E8ED;
  --gray-300: #D2D2D7;
  --gray-400: #636368;
  --gray-500: #636368;
  --gray-600: #636368;
  --gray-700: #424245;
  --gray-800: #333336;
  --gray-900: #1D1D1F;
  --accent: #85631F;
  --accent-dark: #85631F;
  --accent-light: #F6F0E2;
  --accent-mid: #85631F;
  --green: #1B7A33;
  --green-light: #E9F7EC;
  --orange: #85631F;
  --red: #D70015;
  --violet: #85631F;
  --violet-light: #F6F0E2;
  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow: 0 4px 16px rgba(0,0,0,0.08);
  --shadow-md: 0 8px 32px rgba(0,0,0,0.10);
  --shadow-lg: 0 20px 60px rgba(0,0,0,0.12);
  --shadow-xl: 0 32px 80px rgba(0,0,0,0.14);
  --radius: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Consultancy page — muted corporate navy system (scoped to
     #page-consultancy, deliberately distinct from the teal --accent used
     by the receptionist product). One muted slate-blue accent, flat
     borders instead of glassy blur, no gradients on text/badges, no glow
     effects — a restrained enterprise-consultancy look, not a dark-SaaS
     "vibe-coded" one. */
  /* Light-theme values — the consultancy page used to run its own dark
     "muted corporate navy" system; these tokens are now inverted so every
     rule that already consumes var(--consult-*) renders light instead of
     needing each of those ~100 rules touched individually. */
  --consult-ink: #ffffff;
  --consult-ink-soft: #FBFBFD;
  --consult-surface: rgba(0,0,0,0.05);
  --consult-surface-strong: rgba(0,0,0,0.10);
  --consult-hairline: rgba(0,0,0,0.14);
  --consult-hairline-strong: rgba(0,0,0,0.24);
  --consult-accent: #85631F;
  --consult-accent-soft: #85631F;
  --consult-accent-dim: rgba(197,160,89,0.12);
  --consult-text: #1D1D1F;
  --consult-text-muted: #636368;
  --consult-text-faint: #636368;
  --consult-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  /* AI Intelligence (Klaros AI) — the product's own real brand accent
     (deep indigo-navy), kept distinct from the shared gold used by
     Consultancy/Receptionist. Scoped onto #page-intelligence below by
     redeclaring the SAME --consult-* variable names, so every existing
     .consult-* structural class (hero, bento cards, service grid,
     timeline, cta-block) renders with zero new layout CSS. */
  --intel-accent: #2B3A63;
  --intel-accent-soft: #202C4D;
  --intel-accent-dim: rgba(43,58,99,0.12);
  --intel-text: #1C1A16;
}

#page-intelligence {
  --consult-accent: var(--intel-accent);
  --consult-accent-soft: var(--intel-accent-soft);
  --consult-accent-dim: var(--intel-accent-dim);
  --consult-text: var(--intel-text);
}
.klaros-wordmark-nav {
  font-family: Georgia, 'Times New Roman', serif; font-style: italic;
  font-weight: 700; font-size: 1.35rem; letter-spacing: -0.01em; color: var(--black);
  line-height: 44px; height: 44px; display: flex; align-items: center;
}

body { font-family: var(--font); background: var(--white); color: var(--black); line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; }

/* ============ TYPOGRAPHY ============ */
h1 { font-size: clamp(2.6rem, 6vw, 4.5rem); font-weight: 800; line-height: 1.08; letter-spacing: -0.03em; color: var(--black); }
h2 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.025em; color: var(--black); }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.6rem); font-weight: 700; line-height: 1.2; letter-spacing: -0.015em; color: var(--black); }
h4 { font-size: 1.05rem; font-weight: 700; line-height: 1.3; color: var(--black); }
p { color: var(--gray-500); line-height: 1.72; }

.label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--accent);
  background: var(--accent-light); padding: 5px 13px;
  border-radius: var(--radius-full); margin-bottom: 18px;
}

/* ============ LAYOUT ============ */
.container { max-width: 1280px; margin: 0 auto; padding: 0 28px; }
.container-sm { max-width: 760px; margin: 0 auto; padding: 0 28px; }
.section { padding: 72px 0; }
.section-sm { padding: 52px 0; }
.text-center { text-align: center; }
.page { display: none; opacity: 0; }
.page.active { display: block; opacity: 1; animation: page-in 0.22s ease; animation-fill-mode: forwards; }
@keyframes page-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* ============ GRID ============ */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

/* ============ BUTTONS ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font); font-weight: 600; font-size: 0.95rem;
  padding: 13px 26px; border-radius: var(--radius-full); cursor: pointer;
  border: none; text-decoration: none; transition: background-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
  white-space: nowrap; line-height: 1;
}
.btn-primary { background: var(--black); color: var(--white); }
.btn-primary:hover { background: var(--gray-800); transform: translateY(-1px); box-shadow: var(--shadow-md); }
/* globals.css's unscoped `.btn-primary { !important }` (shared dashboard
   stylesheet, see the .card note above) otherwise wins on every marketing
   CTA button site-wide. */
#marketing-spa-root .btn-primary {
  background: var(--consult-text) !important;
  color: var(--white) !important;
  border: none !important;
  box-shadow: none !important;
}
#marketing-spa-root .btn-primary:hover {
  background: var(--consult-accent-soft) !important;
  box-shadow: 0 8px 24px var(--consult-accent-dim) !important;
}
.btn-outline { background: transparent; color: var(--black); border: 1.5px solid var(--gray-200); }
.btn-outline:hover { border-color: var(--gray-400); background: var(--gray-50); }
.btn-blue { background: var(--accent); color: var(--white); }
.btn-blue:hover { background: var(--accent-dark); transform: translateY(-1px); box-shadow: 0 8px 24px rgba(197,160,89,0.3); }
/* Primary CTA buttons ("Book a Diagnostic Call", etc.) use the shared
   .btn-blue class, which is teal everywhere else on the site — swap it
   for the consultancy accent while any page in that section is active.
   Scoped both by body[data-section] (covers the nav/footer, which are
   shared chrome outside any #page-* container) AND directly by the
   static #page-* ids (covers content inside those pages immediately,
   with no dependency on the JS that sets data-section having run yet).
   MUST be !important: apps/dashboard/src/app/globals.css — the dashboard
   app's own design system, imported by the marketing layout for shared
   button/input primitives — defines `.btn-blue { background: var(--accent)
   !important; ... }`. A plain (non-!important) rule here, however specific,
   loses to that regardless of selector specificity, which is the actual
   reason this kept rendering as the receptionist's teal even after the
   #page-* id scoping fix. */
body[data-section="consultancy"] .btn-blue,
#page-consultancy .btn-blue,
#page-svc-operations .btn-blue,
#page-svc-acquisition .btn-blue,
#page-svc-brand .btn-blue,
#page-consult-signup .btn-blue,
#page-home .btn-blue,
#page-pricing .btn-blue,
#page-features .btn-blue,
#page-how-it-works .btn-blue,
#page-intelligence .btn-blue {
  background: var(--consult-text) !important; color: var(--white) !important;
}
body[data-section="consultancy"] .btn-blue:hover,
#page-consultancy .btn-blue:hover,
#page-svc-operations .btn-blue:hover,
#page-svc-acquisition .btn-blue:hover,
#page-svc-brand .btn-blue:hover,
#page-consult-signup .btn-blue:hover,
#page-home .btn-blue:hover,
#page-pricing .btn-blue:hover,
#page-features .btn-blue:hover,
#page-how-it-works .btn-blue:hover,
#page-intelligence .btn-blue:hover {
  background: var(--consult-accent-soft) !important; box-shadow: 0 8px 24px var(--consult-accent-dim) !important;
}
.btn-lg { padding: 16px 34px; font-size: 1rem; }
.btn-sm { padding: 9px 18px; font-size: 0.85rem; }

/* ============ NAV ============ */
#marketing-spa-root nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: rgba(255,255,255,0.94); backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--gray-100);
  transition: background-color 0.3s, box-shadow 0.3s;
}
.nav-inner { display: flex; align-items: center; height: 92px; gap: 4px; }
.logo { display: flex; align-items: center; text-decoration: none; margin-right: 20px; flex-shrink: 0; }
.halla-wordmark { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; color: var(--black); }
.halla-wordmark .halla-ai { color: var(--accent); }
.logo-img { height: 44px; width: auto; border-radius: 6px; object-fit: contain; }
.footer-logo .logo-img { height: 52px; border-radius: 8px; }
.logo-img.nav-group[data-section="receptionist"],
.logo-img.nav-group[data-section="intelligence"] { display: none; }
.logo-img.nav-group[data-section="consultancy"] { display: block; }

body[data-section="receptionist"] .logo-img.nav-group[data-section="receptionist"] { display: block; }
body[data-section="receptionist"] .logo-img.nav-group[data-section="consultancy"],
body[data-section="receptionist"] .logo-img.nav-group[data-section="intelligence"] { display: none; }
body[data-section="intelligence"] .logo-img.nav-group[data-section="intelligence"] { display: block; }
body[data-section="intelligence"] .logo-img.nav-group[data-section="consultancy"],
body[data-section="intelligence"] .logo-img.nav-group[data-section="receptionist"] { display: none; }

.section-switch {
  display: flex; align-items: center; gap: 2px;
  background: var(--gray-100); border-radius: var(--radius-full);
  padding: 3px; margin-right: 18px; flex-shrink: 0;
}
.section-switch-btn {
  border: none; background: transparent; cursor: pointer;
  font-family: var(--font); font-size: 0.82rem; font-weight: 600;
  color: var(--gray-500); padding: 7px 15px; border-radius: var(--radius-full);
  transition: background-color 0.18s, color 0.18s, box-shadow 0.18s; white-space: nowrap;
}
.section-switch-btn:hover { color: var(--black); }
.section-switch-btn.active {
  background: var(--white); color: var(--accent-dark); box-shadow: var(--shadow-sm);
}
.mob-section-switch { display: none; margin: 6px 14px 10px; }

/* ============ SECTION MODE (Consultancy vs AI Receptionist) ============ */
/* Default (before JS runs, or if data-section is absent): Consultancy shows, Receptionist hides. */
.nav-links.nav-group[data-section="receptionist"],
.nav-links.nav-group[data-section="intelligence"] { display: none; }
.nav-links.nav-group[data-section="consultancy"] { display: flex; }

body[data-section="receptionist"] .nav-links.nav-group[data-section="receptionist"] { display: flex; }
body[data-section="receptionist"] .nav-links.nav-group[data-section="consultancy"],
body[data-section="receptionist"] .nav-links.nav-group[data-section="intelligence"] { display: none; }
body[data-section="intelligence"] .nav-links.nav-group[data-section="intelligence"] { display: flex; }
body[data-section="intelligence"] .nav-links.nav-group[data-section="consultancy"],
body[data-section="intelligence"] .nav-links.nav-group[data-section="receptionist"] { display: none; }

.mob-nav .nav-group[data-section="receptionist"],
.mob-nav .nav-group[data-section="intelligence"] { display: none; }
.mob-nav .nav-group[data-section="consultancy"] { display: block; }

body[data-section="receptionist"] .mob-nav .nav-group[data-section="receptionist"] { display: block; }
body[data-section="receptionist"] .mob-nav .nav-group[data-section="consultancy"],
body[data-section="receptionist"] .mob-nav .nav-group[data-section="intelligence"] { display: none; }
body[data-section="intelligence"] .mob-nav .nav-group[data-section="intelligence"] { display: block; }
body[data-section="intelligence"] .mob-nav .nav-group[data-section="consultancy"],
body[data-section="intelligence"] .mob-nav .nav-group[data-section="receptionist"] { display: none; }

.footer-group[data-section="receptionist"],
.footer-group[data-section="intelligence"] { display: none; }
.footer-group[data-section="consultancy"] { display: contents; }

body[data-section="receptionist"] .footer-group[data-section="receptionist"] { display: contents; }
body[data-section="receptionist"] .footer-group[data-section="consultancy"],
body[data-section="receptionist"] .footer-group[data-section="intelligence"] { display: none; }
body[data-section="intelligence"] .footer-group[data-section="intelligence"] { display: contents; }
body[data-section="intelligence"] .footer-group[data-section="consultancy"],
body[data-section="intelligence"] .footer-group[data-section="receptionist"] { display: none; }

.nav-actions .nav-group[data-section="receptionist"],
.nav-actions .nav-group[data-section="intelligence"] { display: none; }
.nav-actions .nav-group[data-section="consultancy"] { display: inline-flex; }

body[data-section="receptionist"] .nav-actions .nav-group[data-section="receptionist"] { display: inline-flex; }
body[data-section="receptionist"] .nav-actions .nav-group[data-section="consultancy"],
body[data-section="receptionist"] .nav-actions .nav-group[data-section="intelligence"] { display: none; }
body[data-section="intelligence"] .nav-actions .nav-group[data-section="intelligence"] { display: inline-flex; }
body[data-section="intelligence"] .nav-actions .nav-group[data-section="consultancy"],
body[data-section="intelligence"] .nav-actions .nav-group[data-section="receptionist"] { display: none; }

.footer-brand p.footer-group[data-section="receptionist"],
.footer-brand p.footer-group[data-section="intelligence"] { display: none; }
.footer-brand p.footer-group[data-section="consultancy"] { display: block; }

body[data-section="receptionist"] .footer-brand p.footer-group[data-section="receptionist"] { display: block; }
body[data-section="receptionist"] .footer-brand p.footer-group[data-section="consultancy"],
body[data-section="receptionist"] .footer-brand p.footer-group[data-section="intelligence"] { display: none; }
body[data-section="intelligence"] .footer-brand p.footer-group[data-section="intelligence"] { display: block; }
body[data-section="intelligence"] .footer-brand p.footer-group[data-section="consultancy"],
body[data-section="intelligence"] .footer-brand p.footer-group[data-section="receptionist"] { display: none; }

.nav-links { display: flex; align-items: center; gap: 1px; flex: 1; }
.nav-item { position: relative; }
.nav-link {
  display: flex; align-items: center; gap: 4px; padding: 8px 14px;
  border-radius: var(--radius); font-size: 0.9rem; font-weight: 500;
  color: var(--gray-600); text-decoration: none; cursor: pointer;
  transition: color 0.15s, background-color 0.15s; white-space: nowrap; border: none; background: none;
}
.nav-link:hover { color: var(--black); background: var(--gray-100); }
.nav-link svg { width: 13px; height: 13px; transition: transform 0.2s; stroke: currentColor; fill: none; stroke-width: 2; }
.nav-item:hover .nav-link svg { transform: rotate(180deg); }

.dropdown {
  position: absolute; top: 100%; left: 0; padding-top: 10px;
  margin-top: 0; background: transparent;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease; z-index: 100;
  pointer-events: none;
}
.dropdown-inner {
  background: var(--white); border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg); padding: 8px; min-width: 230px;
  box-shadow: var(--shadow-lg);
}
.nav-item:hover .dropdown,
.nav-item.open .dropdown {
  opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
}
.nav-item:hover .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown-wide { min-width: 300px; }
.dropdown-link {
  display: flex; align-items: center; gap: 11px; padding: 9px 13px;
  border-radius: var(--radius); color: var(--gray-600); text-decoration: none;
  font-size: 0.875rem; font-weight: 500; transition: color 0.12s, background-color 0.12s;
}
.dropdown-link:hover { color: var(--black); background: var(--gray-50); }
.ddi {
  width: 30px; height: 30px; border-radius: 7px; background: var(--gray-100);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; flex-shrink: 0;
}
.dd-section { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--gray-400); padding: 10px 13px 4px; }

.nav-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-shrink: 0; }
.hamburger { display: none; background: none; border: none; cursor: pointer; padding: 8px; }
.hamburger span { display: block; width: 20px; height: 1.5px; background: var(--black); margin: 5px 0; border-radius: 2px; transition: background-color 0.3s, transform 0.3s; }

/* Mobile menu */
.mob-nav {
  display: none; flex-direction: column; position: fixed; inset: 0; z-index: 999;
  background: var(--white); padding: 106px 24px 32px; overflow-y: auto; gap: 2px;
}
.mob-nav.open { display: flex; }
.mob-link { display: block; padding: 12px 14px; border-radius: var(--radius); color: var(--gray-700); text-decoration: none; font-size: 0.95rem; font-weight: 500; transition: color 0.15s, background-color 0.15s; }
.mob-link:hover { background: var(--gray-100); color: var(--black); }
.mob-section { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray-400); padding: 16px 14px 6px; }
.mob-divider { border: none; border-top: 1px solid var(--gray-100); margin: 8px 0; }

/* ============ HERO ============ */
.hero {
  padding: 140px 0 80px;
  background: var(--white);
  position: relative; overflow: hidden;
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--gray-100); border-radius: var(--radius-full);
  padding: 7px 16px; font-size: 0.83rem; font-weight: 600; color: var(--gray-700);
  margin-bottom: 28px;
}
.hero-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); animation: blink 2s infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.3} }

.hero-neural-canvas {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none; overflow: hidden;
}
.hero-neural-canvas canvas { display: block; width: 100% !important; height: 100% !important; }
.hero .container { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .hero-neural-canvas, .consult-cosmic-canvas { display: none; } }

.hero h1 { margin-bottom: 22px; }
.hero h1 em { font-style: normal; color: var(--accent); }
.hero-sub { font-size: 1.15rem; color: var(--gray-500); max-width: 560px; margin: 0 auto 36px; line-height: 1.7; }
.hero-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; margin-bottom: 20px; }
.hero-note { font-size: 0.8rem; color: var(--gray-400); }

/* Stats bar */
.stats-bar {
  display: flex; align-items: center; justify-content: center; gap: 0;
  background: var(--gray-50); border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl); padding: 0; overflow: hidden;
  margin: 52px auto 0; max-width: 1040px;
}
.stat-item { flex: 1; padding: 28px 24px; text-align: center; border-right: 1px solid var(--gray-200); }
.stat-item:last-child { border-right: none; }
.stat-num { font-size: 2rem; font-weight: 800; color: var(--black); letter-spacing: -0.03em; line-height: 1; margin-bottom: 4px; }
.stat-label { font-size: 0.78rem; color: var(--gray-400); font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; }

/* ============ TICKER ============ */
.ticker-wrap {
  overflow: hidden; background: var(--black); padding: 14px 0;
}
.ticker-track { display: flex; gap: 56px; animation: ticker 28s linear infinite; white-space: nowrap; width: max-content; }
@keyframes ticker { from{transform:translateX(0)} to{transform:translateX(-100%)} }
.ticker-item { display: flex; align-items: center; gap: 10px; font-size: 0.85rem; font-weight: 500; color: rgba(255,255,255,0.6); flex-shrink: 0; }
.ticker-item strong { color: var(--white); }
.ticker-sep { color: rgba(255,255,255,0.2); }

/* ============ CARDS ============ */
/* globals.css (shared with the dashboard app via the marketing layout's
   `import "../globals.css"`) defines its own unscoped `.card { background:
   #ffffff !important }` for the dashboard UI. Class names collide, and its
   !important always wins over this rule's plain background — so every card
   on the marketing site (pricing, ROI form, feature boxes, etc.) stayed
   white no matter what this file set. #marketing-spa-root is more specific
   than a bare class selector, so it wins the !important-vs-!important tie. */
/* Flat, opaque cards — no backdrop blur/glassmorphism. Stripe-style:
   clean white surfaces, a thin neutral border, a soft drop shadow. */
#marketing-spa-root .card,
#marketing-spa-root .pricing-card,
#marketing-spa-root .roi-wrap,
#marketing-spa-root .roi-result {
  background: var(--white) !important;
  border-color: var(--gray-200) !important;
  box-shadow: var(--shadow-sm) !important;
}
#marketing-spa-root .pricing-card.popular {
  background: var(--accent-light) !important;
}
.card {
  background: var(--white); border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg); padding: 28px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; box-shadow: var(--shadow-sm);
}
.card:hover { border-color: var(--gray-300); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.card-blue { border-color: #BAE6FD; background: var(--accent-light); }
.card-dark { background: var(--black); border-color: var(--black); color: var(--white); }
.card-dark h4 { color: var(--white); }
.card-dark p { color: rgba(255,255,255,0.6); }

.feat-icon {
  width: 44px; height: 44px; border-radius: var(--radius); margin-bottom: 16px;
  display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
  background: var(--gray-100);
}
.feat-icon-blue { background: var(--accent-light); color: var(--accent-dark); }
.feat-icon-green { background: var(--green-light); color: var(--green); }
.feat-icon-orange { background: #FEF3C7; color: var(--orange); }
.feat-icon-red { background: rgba(239,68,68,0.10); color: var(--red); }
.feat-icon-violet { background: var(--violet-light); color: var(--violet); }

/* ============ SECTION DIVIDERS ============ */
.divider-line { border: none; border-top: 1px solid var(--gray-100); }

/* ============ PRICING ============ */
.pricing-card {
  background: var(--white); border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-xl); padding: 36px 32px; position: relative;
  transition: box-shadow 0.2s; box-shadow: var(--shadow-sm);
}
.pricing-card:hover { box-shadow: var(--shadow-md); }
.pricing-card.popular { border-color: var(--black); background: var(--black); }
.pricing-card.popular h3, .pricing-card.popular h4, .pricing-card.popular .pricing-price { color: var(--white); }
.pricing-card.popular p, .pricing-card.popular .pricing-mins { color: rgba(255,255,255,0.55); }
.pricing-card.popular .pricing-feature { color: rgba(255,255,255,0.75); }
.pricing-card.popular .pricing-feature::before { color: var(--accent-mid); }
.pricing-card.popular .pricing-feature.miss::before { color: var(--red); }
.pop-badge {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--accent); color: var(--white); font-size: 0.72rem; font-weight: 700;
  padding: 5px 16px; border-radius: var(--radius-full); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
}
.pricing-plan { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gray-400); margin-bottom: 10px; }
.pricing-card.popular .pricing-plan { color: rgba(255,255,255,0.4); }
.pricing-price { font-size: 3.2rem; font-weight: 800; letter-spacing: -0.04em; color: var(--black); margin-bottom: 2px; line-height: 1; }
.pricing-price sup { font-size: 1.2rem; vertical-align: super; font-weight: 600; }
.pricing-price sub { font-size: 1rem; font-weight: 400; color: var(--gray-400); }
.pricing-card.popular .pricing-price sub { color: rgba(255,255,255,0.4); }
.pricing-mins { font-size: 0.85rem; color: var(--gray-400); margin-bottom: 24px; }
.p-divider { border: none; border-top: 1px solid var(--gray-200); margin: 20px 0; }
.pricing-card.popular .p-divider { border-color: rgba(255,255,255,0.1); }
.pricing-feature { display: flex; align-items: flex-start; gap: 9px; font-size: 0.875rem; color: var(--gray-600); margin-bottom: 10px; line-height: 1.4; }
.pricing-feature::before { content: "✓"; color: var(--green); font-weight: 700; flex-shrink: 0; margin-top: 1px; }
.pricing-feature.miss::before { content: "✕"; color: var(--red); }

/* ============ TABLE ============ */
.table-wrap { border: 1px solid var(--gray-200); border-radius: var(--radius-lg); overflow: hidden; overflow-x: auto; }
.comp-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.comp-table th { background: var(--gray-50); padding: 13px 16px; text-align: left; font-weight: 600; color: var(--gray-800); border-bottom: 1px solid var(--gray-200); }
.comp-table td { padding: 13px 16px; border-bottom: 1px solid var(--gray-100); color: var(--gray-600); }
.comp-table tr:last-child td { border-bottom: none; }
.comp-table tr:hover td { background: var(--gray-50); }
.comp-table .yes { color: var(--green); font-weight: 600; }
.comp-table .no { color: var(--gray-300); }

/* ============ INTEGRATION PILLS ============ */
.pill {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--gray-50); border: 1px solid var(--gray-200);
  padding: 8px 16px; border-radius: var(--radius-full); font-size: 0.83rem;
  font-weight: 500; color: var(--gray-700); transition: border-color 0.15s, color 0.15s, background-color 0.15s;
}
.pill:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-light); }
.pill-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.pills-wrap { display: flex; flex-wrap: wrap; gap: 10px; }

/* ============ TESTIMONIALS ============ */
.testi {
  background: var(--white); border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl); padding: 32px; box-shadow: var(--shadow-sm);
}
.testi-stars { color: #F59E0B; font-size: 0.9rem; margin-bottom: 14px; letter-spacing: 2px; }
.testi-text { font-size: 0.95rem; color: var(--gray-700); line-height: 1.7; margin-bottom: 22px; font-weight: 400; }
.testi-author { display: flex; align-items: center; gap: 12px; }
.testi-avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--accent); color: var(--white); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.9rem; flex-shrink: 0; }
.testi-name { font-weight: 700; font-size: 0.9rem; color: var(--black); }
.testi-role { font-size: 0.78rem; color: var(--gray-400); }

/* ============ FAQ ============ */
.faq-item { border-bottom: 1px solid var(--gray-100); }
.faq-q { display: flex; justify-content: space-between; align-items: center; padding: 20px 0; cursor: pointer; font-weight: 600; font-size: 0.95rem; color: var(--black); gap: 16px; }
.faq-q:hover { color: var(--accent); }
.faq-icon { font-size: 1.3rem; color: var(--gray-400); flex-shrink: 0; transition: transform 0.3s; }
.faq-item.open .faq-icon { transform: rotate(45deg); }
.faq-a { display: none; padding: 0 0 20px; color: var(--gray-500); font-size: 0.9rem; line-height: 1.75; max-width: 680px; }
.faq-item.open .faq-a { display: block; }

/* ============ ROI CALCULATOR ============ */
.roi-wrap { background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: var(--radius-xl); padding: 40px; }
.roi-label { font-size: 0.83rem; font-weight: 600; color: var(--gray-700); display: block; margin-bottom: 8px; }
.roi-input, .roi-select {
  width: 100%; background: var(--white); border: 1.5px solid var(--gray-200);
  border-radius: var(--radius); padding: 12px 14px; font-family: var(--font);
  font-size: 0.9rem; color: var(--black); outline: none; transition: border-color 0.2s;
  appearance: none;
}
.roi-input:focus, .roi-select:focus { border-color: var(--accent); }
.roi-group { margin-bottom: 18px; }
.roi-result { background: var(--white); border: 1.5px solid var(--gray-200); border-radius: var(--radius-lg); padding: 20px 24px; margin-top: 14px; }
.roi-result.highlight { border-color: var(--accent); background: #F0F9FF; }
.roi-result-num { font-size: 2.2rem; font-weight: 800; letter-spacing: -0.03em; color: var(--black); line-height: 1; }
.roi-result.highlight .roi-result-num { color: var(--accent); }
.roi-result-label { font-size: 0.78rem; color: var(--gray-400); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; margin-top: 4px; }

/* ============ CTA SECTION ============ */
.cta-block {
  background: var(--black); border-radius: var(--radius-xl); padding: 72px 56px;
  text-align: center; position: relative; overflow: hidden;
}
.cta-block::before {
  content: ""; position: absolute; top: -100px; left: 50%; transform: translateX(-50%);
  width: 500px; height: 300px;
  background: radial-gradient(circle, rgba(197,160,89,0.15) 0%, transparent 70%);
  pointer-events: none;
}
.cta-block h2, .cta-block h3 { color: var(--white); }
.cta-block p { color: rgba(255,255,255,0.55); }
.cta-block .btn-group { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 28px; }

/* ============ PAGE HERO (inner pages) ============ */
.page-hero { padding: 120px 0 60px; background: var(--gray-50); border-bottom: 1px solid var(--gray-100); }
.page-hero h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); margin-bottom: 14px; }

/* ============ INDUSTRY CARD ============ */
.ind-card {
  display: block; text-decoration: none;
  background: var(--white); border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg); padding: 24px;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s; box-shadow: var(--shadow-sm);
}
.ind-card:hover { border-color: var(--accent); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.ind-icon { font-size: 1.8rem; margin-bottom: 12px; }
.ind-card h4 { color: var(--black); margin-bottom: 6px; }
.ind-card p { font-size: 0.83rem; color: var(--gray-400); }

/* ============ STEP ============ */
.step-row { display: flex; gap: 20px; align-items: flex-start; margin-bottom: 36px; }
.step-num { width: 38px; height: 38px; border-radius: 50%; background: var(--gray-100); border: 1px solid var(--gray-200); color: var(--accent); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.9rem; flex-shrink: 0; margin-top: 2px; }

/* ============ PHONE MOCKUP ============ */
.mockup-wrap { position: relative; }
.mockup {
  background: var(--white); border: 1.5px solid var(--gray-200);
  border-radius: 22px; padding: 24px 22px; width: 280px; margin: 0 auto;
  box-shadow: var(--shadow-xl);
}
.mockup-header { font-size: 0.72rem; color: var(--gray-400); text-align: center; margin-bottom: 16px; font-weight: 500; }

/* ============ BROWSER FRAME (dashboard screenshots) ============ */
.browser-frame {
  max-width: 980px; margin: 0 auto; border-radius: var(--radius-xl); overflow: hidden;
  border: 1px solid var(--gray-200); box-shadow: var(--shadow-xl); background: var(--white);
}
.browser-bar {
  display: flex; align-items: center; gap: 14px; padding: 12px 16px;
  background: var(--gray-50); border-bottom: 1px solid var(--gray-200);
}
.browser-dots { display: flex; gap: 6px; flex-shrink: 0; }
.browser-dots span { width: 10px; height: 10px; border-radius: 50%; background: var(--gray-300); display: block; }
.browser-url {
  flex: 1; background: var(--white); border: 1px solid var(--gray-200); border-radius: 6px;
  padding: 6px 12px; font-size: 0.78rem; color: var(--gray-500); display: flex; align-items: center; gap: 6px;
}
.wave { display: flex; align-items: center; justify-content: center; gap: 4px; height: 44px; margin: 0 0 18px; }
.wave-bar { width: 4px; border-radius: 2px; background: var(--accent); animation: wv 1.1s ease-in-out infinite; }
.wave-bar:nth-child(2){animation-delay:0.1s} .wave-bar:nth-child(3){animation-delay:0.2s}
.wave-bar:nth-child(4){animation-delay:0.3s} .wave-bar:nth-child(5){animation-delay:0.4s}
.wave-bar:nth-child(6){animation-delay:0.3s} .wave-bar:nth-child(7){animation-delay:0.15s}
@keyframes wv { 0%,100%{height:8px;opacity:.35} 50%{height:32px;opacity:1} }
.bubble { background: var(--gray-100); border-radius: 14px 14px 14px 3px; padding: 10px 13px; margin-bottom: 10px; font-size: 0.8rem; color: var(--gray-800); line-height: 1.45; }
.bubble.ai { border-radius: 14px 14px 3px 14px; background: var(--accent); color: var(--white); margin-left: 20px; }
.mockup-status { display: flex; align-items: center; gap: 7px; margin-top: 14px; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); animation: pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.75)} }
.status-text { font-size: 0.72rem; color: var(--green); font-weight: 600; }

/* Floating badges on mockup */
.mock-badge {
  position: absolute; background: var(--white); border: 1px solid var(--gray-200);
  border-radius: var(--radius); padding: 10px 14px; box-shadow: var(--shadow-md);
  font-size: 0.78rem; font-weight: 600; color: var(--black); display: flex; align-items: center; gap: 7px;
}
.mock-badge-1 { top: 20px; right: -20px; }
.mock-badge-2 { bottom: 40px; left: -30px; }
.mock-badge-green { color: var(--green); }

/* ============ 3D PHONE (drag to rotate) ============ */
.phone-3d-stage {
  position: relative; perspective: 1400px; width: 280px; margin: 0 auto;
  cursor: grab; touch-action: pan-y;
}
.phone-3d-stage.dragging { cursor: grabbing; }
.phone-3d-inner {
  transform-style: preserve-3d;
  transition: transform 0.08s linear;
  will-change: transform;
}
.phone-3d-stage.dragging .phone-3d-inner { transition: none; }
.phone-3d-face {
  transform: translateZ(18px);
  box-shadow: 0 40px 90px rgba(0,0,0,0.20), 0 10px 30px rgba(0,0,0,0.12);
}
.phone-3d-hint {
  position: absolute; bottom: -34px; left: 50%; transform: translateX(-50%);
  font-size: 0.72rem; color: var(--gray-400); display: flex; align-items: center; gap: 6px;
  white-space: nowrap; transition: opacity 0.3s; pointer-events: none;
}
@media (max-width: 640px) { .phone-3d-hint { display: none; } }

/* ============ BROWSER FRAME 3D TILT ============ */
.browser-frame.tilt-3d {
  transition: transform 0.25s cubic-bezier(0.2,0.7,0.3,1);
  transform-style: preserve-3d;
  will-change: transform;
}

/* ============ ALERT ============ */
.alert { padding: 14px 18px; border-radius: var(--radius); display: flex; gap: 12px; align-items: flex-start; margin: 16px 0; }
.alert-warn { background: #FFF7ED; border: 1px solid #FED7AA; }
.alert-info { background: #F0F9FF; border: 1px solid #BAE6FD; }
.alert-text { font-size: 0.875rem; color: var(--gray-700); line-height: 1.6; }

/* ============ CHIP ============ */
.chip { display: inline-block; background: var(--gray-100); border-radius: 5px; padding: 3px 8px; font-size: 0.78rem; color: var(--gray-600); font-weight: 500; }

/* ============ PAGE TABS ============ */
.ptabs { display: flex; border-bottom: 1.5px solid var(--gray-100); gap: 0; overflow-x: auto; margin-bottom: 40px; }
.ptab { padding: 11px 20px; font-size: 0.875rem; font-weight: 600; color: var(--gray-400); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1.5px; transition: color 0.15s, border-color 0.15s; white-space: nowrap; }
.ptab:hover { color: var(--black); }
.ptab.active { color: var(--black); border-bottom-color: var(--black); }

/* ============ COMPARISON ROW ============ */
.comp-highlight { background: #F0FDF4; border: 1.5px solid #BBF7D0; border-radius: var(--radius-lg); padding: 20px 24px; }

/* ============ FOOTER ============ */
#marketing-spa-root footer { background: var(--gray-900); padding: 72px 0 40px; }
.footer-grid { display: grid; grid-template-columns: 1.8fr 1fr 1fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 56px; }
.footer-brand p { font-size: 0.875rem; color: rgba(255,255,255,0.4); margin: 16px 0 24px; max-width: 260px; line-height: 1.65; }
.footer-logo .halla-wordmark { color: var(--white); font-size: 1.5rem; }
.footer-logo .halla-wordmark .halla-ai { color: var(--accent); }
.footer-col h5 { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: rgba(255,255,255,0.3); margin-bottom: 16px; }
.flink { display: block; color: rgba(255,255,255,0.55); text-decoration: none; font-size: 0.875rem; padding: 5px 0; transition: color 0.15s; }
.flink:hover { color: var(--white); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.07); padding-top: 32px; display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; flex-wrap: wrap; }
.footer-legal { font-size: 0.75rem; color: rgba(255,255,255,0.3); line-height: 1.85; max-width: 660px; }
.footer-legal a { color: rgba(255,255,255,0.45); text-decoration: none; }
.footer-legal a:hover { color: var(--white); }
.footer-links-row { display: flex; gap: 16px; flex-wrap: wrap; }
.footer-links-row a { font-size: 0.75rem; color: rgba(255,255,255,0.35); text-decoration: none; }
.footer-links-row a:hover { color: var(--white); }

/* ============ VALUE SECTION ============ */
.value-item { display: flex; gap: 24px; padding: 28px 0; border-bottom: 1px solid var(--gray-100); align-items: flex-start; }
.value-item:last-child { border-bottom: none; }
.value-num { font-size: 2.8rem; font-weight: 900; color: var(--gray-100); letter-spacing: -0.04em; flex-shrink: 0; width: 70px; line-height: 1; margin-top: 2px; }

/* ============ BRAND LOGO STRIP ============ */
.brand-strip { display: flex; align-items: center; justify-content: center; gap: 32px; flex-wrap: wrap; padding: 40px 0; }
.brand-item {
  display: flex; align-items: center; gap: 8px; font-size: 0.9rem; font-weight: 700;
  color: var(--gray-300); letter-spacing: -0.01em;
}
.brand-item span { font-size: 1.3rem; }

/* ============ RESPONSIVE ============ */
@media (max-width: 1024px) {
  /* Tablet: the full desktop nav (section-switch pill + dropdowns + lang
     toggle + Sign In + CTA button) doesn't fit in the 1024px container —
     it silently overflowed past the viewport (body has overflow-x:hidden)
     instead of wrapping, cutting off the later nav links. Switch to the
     hamburger menu here instead of waiting until the 768px phone breakpoint.
     Must match/exceed the specificity of the section-mode display rules
     above (e.g. `body[data-section="receptionist"] .nav-links.nav-group
     [data-section="receptionist"] { display: flex }`, specificity 0,0,4,0)
     — a plain `.nav-links { display: none }` (0,0,1,0) loses that fight
     regardless of media query or source order, so nav-links never actually
     hid and instead overflowed off-screen, pushing the hamburger out of
     view with it. */
  body[data-section="receptionist"] .nav-links.nav-group[data-section="receptionist"],
  body[data-section="consultancy"] .nav-links.nav-group[data-section="consultancy"],
  .nav-links.nav-group[data-section="consultancy"] { display: none !important; }
  .hamburger { display: block; }
  .section-switch { display: none; }
  .mob-section-switch { display: flex; }
  /* Sign In and the primary CTA also don't fit next to the logo, lang
     toggle, and hamburger at this width — drop both from the top bar. The
     mobile nav panel (opened by the hamburger) repeats both at the bottom
     of its link list, so nothing is lost. Sign In also carries
     nav-group[data-section="receptionist"], which has its own higher-
     specificity `display: inline-flex` rule above — !important to be sure
     this one actually wins, same issue as .nav-links below. */
  .nav-actions .btn-outline,
  .nav-actions #navPrimaryCta { display: none !important; }
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .grid-4 { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 768px) {
  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: 1fr 1fr; }
  .hero { padding: 110px 0 56px; }
  .hero-actions { flex-direction: column; }
  .stats-bar { flex-direction: column; }
  .stat-item { border-right: none; border-bottom: 1px solid var(--gray-200); padding: 20px; }
  .stat-item:last-child { border-bottom: none; }
  .cta-block { padding: 48px 28px; }
  .section { padding: 68px 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-bottom { flex-direction: column; }
  .mock-badge { display: none; }
}
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: 1fr; }
}
@media (max-width: 380px) {
  /* Extra safety margin on the smallest phones (iPhone SE-class, ~320-375px):
     logo + lang toggle + hamburger still needed a bit more room to
     comfortably clear the 28px container padding on both sides. */
  .container { padding: 0 16px; }
  .halla-wordmark { font-size: 1.35rem; }
  .logo-img { height: 34px; }
  .lang-toggle button { padding: 6px 9px; font-size: 0.75rem; }
}

/* ============ INTEGRATION LOGO PILLS ============ */
.logo-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--white); border: 1px solid var(--gray-200);
  padding: 8px 14px; border-radius: var(--radius-full);
  font-size: 0.83rem; font-weight: 600; color: var(--gray-700);
  transition: border-color 0.15s, color 0.15s, box-shadow 0.15s; box-shadow: var(--shadow-sm);
}
.logo-pill:hover {
  border-color: var(--accent); color: var(--accent);
  box-shadow: 0 4px 12px rgba(197,160,89,0.15);
  transform: translateY(-1px);
}
.logo-pill svg { flex-shrink: 0; border-radius: 4px; }
.logo-pill span { white-space: nowrap; }

/* ============ FOOTER FIX ============ */
/* Ensure footer stays at bottom consistently */
#marketing-spa-root footer {
  background: var(--gray-900);
  padding: 72px 0 40px;
  margin-top: 0;
  position: relative; z-index: 1;
  position: relative;
  clear: both;
}

/* Ensure all pages properly contain their content */
.page {
  padding-bottom: 0;
  margin-bottom: 0;
}

/* Make sure the last section in any page doesn't push footer awkwardly */
.section:last-child,
.section-sm:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
}

/* Override any unintended margin/padding on page-hero */
.page-hero {
  padding: 120px 0 60px;
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-100);
  margin-bottom: 0;
}

/* Ensure CTA block at end of pages has proper spacing */
.cta-block {
  background: var(--black);
  border-radius: var(--radius-xl);
  padding: 72px 56px;
  text-align: center;
  position: relative;
  overflow: hidden;
  margin-bottom: 0;
}
/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============ LANGUAGE TOGGLE ============ */
.lang-toggle {
  display: flex; align-items: center; gap: 2px; background: var(--gray-100);
  border-radius: 999px; padding: 3px; margin-left: 12px; flex-shrink: 0;
}
.lang-toggle button {
  border: none; background: transparent; padding: 6px 12px; border-radius: 999px;
  font-size: 0.8rem; font-weight: 600; cursor: pointer; color: var(--gray-500);
  transition: background-color 0.15s, color 0.15s;
}
.lang-toggle button.active { background: var(--white); color: var(--black); box-shadow: var(--shadow-sm); }
.lang-toggle { background: var(--consult-surface-strong); }
.lang-toggle button { color: var(--consult-text-faint); }
.lang-toggle button.active { background: var(--consult-ink-soft); color: var(--consult-text); box-shadow: none; }

/* ============ RTL (ARABIC) SUPPORT ============ */
html[dir="rtl"] body { font-family: 'Cairo', 'Hanken Grotesk', -apple-system, sans-serif; }
html[dir="rtl"] .nav-inner { flex-direction: row-reverse; }
html[dir="rtl"] .logo { margin-right: 0; margin-left: 20px; }
html[dir="rtl"] .nav-links { flex-direction: row-reverse; }
html[dir="rtl"] .nav-actions { flex-direction: row-reverse; }
html[dir="rtl"] .lang-toggle { margin-left: 0; margin-right: 12px; }
html[dir="rtl"] .dropdown { left: auto; right: 0; }
html[dir="rtl"] .dropdown-link { flex-direction: row-reverse; text-align: right; }
html[dir="rtl"] .ddi { margin-right: 0; margin-left: 10px; }
html[dir="rtl"] .footer-grid { direction: rtl; }
html[dir="rtl"] .mob-nav { direction: rtl; text-align: right; }
html[dir="rtl"] .btn-group { flex-direction: row-reverse; }
html[dir="rtl"] .stats-bar { flex-direction: row-reverse; }
html[dir="rtl"] .grid-2, html[dir="rtl"] .grid-3, html[dir="rtl"] .grid-4 { direction: rtl; }
html[dir="rtl"] .pills-wrap { flex-direction: row-reverse; flex-wrap: wrap; }
html[dir="rtl"] .browser-bar { flex-direction: row-reverse; }
.lang-ar { display: none; }
html[dir="rtl"] .lang-en { display: none; }
html[dir="rtl"] .lang-ar { display: inline; }
html[dir="rtl"] .lang-ar.lang-block { display: block; }

/* ============ SITE-WIDE DARK THEME ============
   Every page now uses the consultancy palette by default (see the :root
   redefinitions above). This just gives each page's own background/text
   color explicitly, covering every page id site-wide instead of a
   per-page allow-list. */
.page {
  background: var(--consult-ink);
  color: var(--consult-text);
}
#page-home .shadow-sm, #page-pricing .shadow-sm, #page-features .shadow-sm, #page-how-it-works .shadow-sm,
#page-home .card, #page-pricing .card, #page-features .card, #page-how-it-works .card {
  box-shadow: none;
}
/* Flat borders instead of the light theme's soft drop shadows — shadows
   don't read against a near-black background, they just look like a dark
   smudge. */
#page-home .card, #page-pricing .card, #page-features .card, #page-how-it-works .card,
#page-home .comp-highlight, #page-pricing .comp-highlight {
  box-shadow: none; border-color: var(--gray-200);
}
#page-pricing .pricing-card, #page-pricing .pricing-card:hover { box-shadow: none; }
/* .pricing-card.popular hardcodes background:var(--black) + white text —
   a light-theme "dark featured card on a white page" pattern. Under the
   --black remap above that background would invert to near-white while
   its text stays hardcoded white, i.e. unreadable. Give the featured plan
   its own explicit dark-theme treatment instead: a slightly raised flat
   surface with an accent border, matching how the consultancy page marks
   its own featured service card. */
#page-pricing .pricing-card.popular {
  border-color: var(--consult-accent); background: var(--consult-surface-strong);
}
#page-pricing .pricing-card.popular h3,
#page-pricing .pricing-card.popular h4,
#page-pricing .pricing-card.popular .pricing-price { color: var(--consult-text); }
#page-pricing .pricing-card.popular p,
#page-pricing .pricing-card.popular .pricing-mins,
#page-pricing .pricing-card.popular .pricing-plan,
#page-pricing .pricing-card.popular .pricing-price sub { color: var(--consult-text-faint); }
#page-pricing .pricing-card.popular .pricing-feature { color: var(--consult-text-muted); }
#page-pricing .pricing-card.popular .pricing-feature::before { color: var(--consult-accent-soft); }
#page-pricing .pricing-card.popular .p-divider { border-color: var(--consult-hairline); }
#page-pricing .pop-badge { background: var(--consult-accent); color: var(--consult-text); }

/* ============ CONSULTANCY — PREMIUM LAYOUT ============ */
#page-consultancy { position: relative; }

/* Graph backdrop — one fixed canvas (starfield + an Obsidian-style 3D node
   graph with glow-stroke edges and the odd traveling signal pulse) behind
   the entire consultancy page, not just the hero. It's a direct child of
   #page-consultancy so it inherits that page's display:none / .active
   toggling from the SPA router for free. */
.consult-cosmic-canvas {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
}
.consult-cosmic-canvas canvas { width: 100% !important; height: 100% !important; display: block; }

.consult-hero {
  position: relative; overflow: hidden;
  padding: 140px 0 88px;
}
/* Abstract line art — soft rings, a thin gold connection network with
   node dots, flowing wave accents — not literal 3D shapes. Vector (no
   raster asset), so it's crisp at any width/DPI. Mirrored for RTL since
   the composition is weighted to one side, matching the mask direction
   the rest of this hero already uses. */
.consult-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: url('/consultancy-hero-bg.svg') center right / cover no-repeat;
}
html[dir="rtl"] .consult-hero::before {
  transform: scaleX(-1);
}
.consult-hero-glow { display: none; }
.consult-hero-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items: center;
}
.consult-hero-copy {
  position: relative;
}
.consult-hero-copy h1 { color: var(--consult-text); font-size: clamp(2.4rem, 5vw, 3.8rem); margin-bottom: 18px; }
/* Flat accent color, not a gradient text-clip effect. */
.consult-gradient-text { color: var(--consult-accent-soft); }
.consult-hero-sub { font-size: 1.08rem; color: var(--consult-text-muted); max-width: 520px; line-height: 1.75; }
.consult-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; }
/* MarketingConsultancyLayer replaces the native CTA with a ShimmerButton
   portaled in right after it, and marks the original with this class —
   this rule was missing, so both the plain button and the shimmer version
   rendered side by side. */
.consult-hero-cta-hidden { display: none !important; }
.consult-hero-outline {
  color: var(--consult-text) !important; border-color: var(--consult-hairline) !important;
  background: var(--consult-surface) !important;
}
.consult-hero-outline:hover { background: var(--consult-surface-strong) !important; border-color: var(--consult-hairline-strong) !important; }
.consult-label-glow { background: var(--consult-accent-dim); color: var(--consult-accent-soft); }
.consult-trust-row {
  display: flex; flex-wrap: wrap; gap: 18px; margin-top: 28px;
  font-family: var(--consult-mono); font-size: 0.76rem; letter-spacing: 0.01em;
  color: var(--consult-text-faint);
}
.consult-trust-row i { color: var(--consult-accent-soft); margin-right: 6px; }

/* Hero visual v2: a larger, layered dashboard-mockup composition — a
   soft color glow behind a bigger tilted frame (the existing
   initBrowserFrameTilt() mouse/scroll tilt already applies to any
   .browser-frame), with two floating badges at different depths/corners
   instead of one, and a live-cycling activity feed (see
   startHeroLiveFeed in halla_main.js) so the card visibly updates
   itself rather than sitting as three static lines of text. */
.consult-hero-visual { position: relative; padding: 28px 24px 0 0; }
html[dir="rtl"] .consult-hero-visual { padding: 28px 0 0 24px; }
.consult-hero-visual::before {
  content: ""; position: absolute; inset: 10% -10% -10% 10%; z-index: 0;
  background: radial-gradient(60% 60% at 60% 40%, var(--consult-accent-dim), transparent 70%);
  filter: blur(6px); pointer-events: none;
}
.consult-hero-visual .browser-frame { max-width: 520px; margin: 0; position: relative; z-index: 1; }
.consult-hero-visual .browser-bar { padding: 10px 14px; }
.consult-activity-feed { display: flex; flex-direction: column; gap: 8px; min-height: 186px; }
.consult-activity-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border: 1px solid var(--consult-hairline); border-radius: var(--radius);
  background: var(--white);
  animation: consult-row-in 0.45s ease both;
}
@keyframes consult-row-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
.consult-activity-row.leaving {
  animation: consult-row-out 0.35s ease both;
}
@keyframes consult-row-out {
  from { opacity: 1; transform: translateY(0); max-height: 60px; margin-bottom: 8px; }
  to { opacity: 0; transform: translateY(6px); max-height: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; border-width: 0; }
}
.consult-activity-icon {
  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--consult-accent-dim); color: var(--consult-accent-soft); font-size: 0.9rem;
}
.consult-activity-text { font-size: 0.83rem; font-weight: 600; color: var(--consult-text); line-height: 1.35; }
.consult-activity-time { font-size: 0.7rem; color: var(--consult-text-faint); margin-top: 2px; }
.consult-mini-stat { border: 1px solid var(--consult-hairline); border-radius: var(--radius); padding: 12px 14px; }
.consult-mini-stat-num { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; color: var(--consult-text); line-height: 1; }
.consult-mini-stat-label { font-size: 0.74rem; color: var(--consult-text-faint); margin-top: 4px; }

.consult-float-badge {
  position: absolute; z-index: 2; background: var(--white);
  border: 1px solid var(--consult-hairline); border-radius: var(--radius-lg);
  padding: 12px 16px; box-shadow: var(--shadow-lg);
}
.consult-float-badge-1 {
  top: 0; right: 0; background: var(--consult-text); border-color: var(--consult-text);
}
.consult-float-badge-1 .consult-mini-stat-num { color: var(--white); font-size: 1.7rem; }
.consult-float-badge-1 .consult-mini-stat-label { color: rgba(255,255,255,0.7); }
.consult-float-badge-2 {
  bottom: 28px; left: -18px; display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; font-size: 0.78rem; font-weight: 600; color: var(--consult-text);
}
html[dir="rtl"] .consult-float-badge-1 { right: auto; left: 0; }
html[dir="rtl"] .consult-float-badge-2 { left: auto; right: -18px; }
@media (max-width: 640px) {
  .consult-hero-visual { padding: 0; }
  .consult-hero-visual::before { display: none; }
  .consult-float-badge-1 { position: static; display: inline-block; margin-bottom: 14px; }
  .consult-float-badge-2 { display: none; }
}
.consult-stack-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.consult-stack-pills span {
  font-size: 0.72rem; font-weight: 600; padding: 5px 10px; border-radius: 999px;
  background: var(--consult-surface-strong); color: var(--consult-text-muted); border: 1px solid var(--consult-hairline);
}

.consult-marquee {
  position: relative; z-index: 1;
  overflow: hidden; border-block: 1px solid var(--consult-hairline);
  background: rgba(255,255,255,0.015); padding: 14px 0;
}
.consult-marquee-track {
  display: flex; gap: 48px; width: max-content; white-space: nowrap;
  animation: consult-marquee 32s linear infinite;
}
.consult-marquee-track span {
  font-family: var(--consult-mono);
  font-size: 0.78rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--consult-text-faint);
}
@keyframes consult-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Every section on a starfield-backed page (see DARK_BG_PAGES in
   halla_main.js) sits above the fixed canvas and stays transparent (or
   near-transparent) so the backdrop reads through behind the glass cards,
   rather than each section painting over it. Unpositioned static content
   would otherwise render UNDER a position:fixed element per normal CSS
   stacking order, hiding the page behind the canvas. */
#page-consultancy .section, #page-consultancy .section-sm, #page-consultancy .page-hero,
#page-home .section, #page-home .section-sm, #page-home .page-hero,
#page-pricing .section, #page-pricing .section-sm, #page-pricing .page-hero,
#page-features .section, #page-features .section-sm, #page-features .page-hero,
#page-how-it-works .section, #page-how-it-works .section-sm, #page-how-it-works .page-hero,
#page-svc-operations .section, #page-svc-operations .section-sm, #page-svc-operations .page-hero,
#page-svc-acquisition .section, #page-svc-acquisition .section-sm, #page-svc-acquisition .page-hero,
#page-svc-brand .section, #page-svc-brand .section-sm, #page-svc-brand .page-hero,
#page-consult-signup .section, #page-consult-signup .section-sm, #page-consult-signup .page-hero {
  position: relative; z-index: 1;
}
/* nav (z-index:1000) and footer already sit above the canvas via their own
   existing stacking; no extra rule needed here. */
/* The final CTA sits directly above the footer with only its own
   section padding between them — same near-black background on both,
   so with no extra gap it reads as one run-on block. Give it real
   breathing room before the footer starts, at every width, on the
   landing page and all 3 service sub-pages (their CTA has no id, just
   a plain .section-sm, so this targets the class within each page). */
#page-consultancy .section-sm,
#page-svc-operations .section-sm,
#page-svc-acquisition .section-sm,
#page-svc-brand .section-sm,
#page-consult-signup .section-sm {
  padding-bottom: 96px;
}
@media (max-width: 640px) {
  #page-consultancy .section-sm,
  #page-svc-operations .section-sm,
  #page-svc-acquisition .section-sm,
  #page-svc-brand .section-sm,
  #page-consult-signup .section-sm {
    padding-bottom: 64px;
  }
}
.consult-section-dark { background: rgba(255,255,255,0.012); }
.consult-split {
  display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 48px; align-items: start;
}
.consult-split p { font-size: 1.05rem; color: var(--consult-text-muted); margin-top: 8px; }
.consult-section-head { margin-bottom: 48px; max-width: 640px; }
.consult-section-head.center, .text-center.consult-section-head { margin-left: auto; margin-right: auto; }
.consult-section-head p { margin-top: 12px; color: var(--consult-text-muted); }

.consult-service-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
}
.consult-service-card {
  position: relative; overflow: hidden;
  background: var(--white); border: 1px solid var(--consult-hairline);
  border-radius: var(--radius-xl); padding: 30px 26px;
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}
.consult-service-card:hover {
  transform: translateY(-4px); box-shadow: 0 12px 28px rgba(16,24,40,0.1); border-color: var(--consult-accent);
}
/* A flat accent-colored top border marks the featured card — no gradient
   wash, no glow blob on hover. */
.consult-service-featured { border-color: var(--consult-accent); border-top: 2px solid var(--consult-accent); }
.consult-service-glow { display: none; }
.consult-featured-badge {
  position: absolute; top: 18px; right: 18px;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--consult-accent); color: var(--consult-text); padding: 5px 10px; border-radius: 999px;
}
.consult-service-card h3 { font-size: 1.2rem; margin-bottom: 10px; color: var(--consult-text); }
.consult-service-card p { font-size: 0.9rem; margin-bottom: 16px; color: var(--consult-text-muted); }
.consult-service-list {
  list-style: none; display: flex; flex-direction: column; gap: 9px; margin-bottom: 18px;
}
.consult-service-list li {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 0.82rem; color: var(--consult-text-muted); line-height: 1.45;
}
.consult-service-list i { color: var(--consult-accent-soft); font-size: 0.9rem; margin-top: 2px; flex-shrink: 0; }
.consult-service-link {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.85rem; font-weight: 700; color: var(--consult-accent-soft); text-decoration: none;
}
.consult-service-link:hover { color: var(--consult-text); }

.consult-timeline-section { background: rgba(255,255,255,0.012); }
.consult-timeline {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; position: relative;
}
.consult-timeline::before {
  content: ""; position: absolute; top: 28px; left: 8%; right: 8%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--consult-hairline-strong), transparent);
  z-index: 0;
}
.consult-timeline-step {
  position: relative; z-index: 1;
  background: var(--white); border: 1px solid var(--consult-hairline);
  border-radius: var(--radius-lg); padding: 28px 22px;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.consult-timeline-step:hover { border-color: var(--consult-hairline-strong); transform: translateY(-2px); }
.consult-timeline-num {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--consult-surface-strong); color: var(--consult-accent-soft);
  border: 1px solid var(--consult-hairline-strong);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 0.85rem; margin-bottom: 16px;
}
.consult-timeline-step h4 { margin-bottom: 8px; font-size: 1rem; color: var(--consult-text); }
.consult-timeline-step p { font-size: 0.85rem; color: var(--consult-text-muted); }

#consult-compare .table-wrap { border: 1px solid var(--consult-hairline); background: var(--white); }
#consult-compare .comp-table th { background: var(--consult-surface); color: var(--consult-text); border-bottom: 1px solid var(--consult-hairline); }
#consult-compare .comp-table td { color: var(--consult-text-muted); border-bottom: 1px solid var(--consult-hairline); transition: background-color 0.15s ease; }
#consult-compare .comp-table tr:hover td { background: var(--consult-accent-dim); }
#consult-compare .comp-table .yes { color: var(--consult-accent-soft); }
#consult-compare .comp-table .no { color: var(--consult-text-faint); }
#consult-compare .comp-table th[style*="color"] { color: var(--consult-accent-soft) !important; }

/* No radial glow blob behind the CTA — flat background only. */
.consult-cta-block::before { display: none; }
/* The "Ready When You Are" CTA block is repeated (with a plain .cta-block,
   no consult-cta-block modifier) at the bottom of every consultancy-family
   page — svc-operations, svc-acquisition, svc-brand — not just the main
   consultancy landing page. Scoped both by body[data-section] and directly
   by the static #page-* ids, same reasoning as the .btn-blue rule above:
   the id-based selectors apply immediately from the raw markup, with no
   dependency on the JS that sets data-section having run yet. */
body[data-section="consultancy"] .cta-block .label[style*="background"],
#page-consultancy .cta-block .label[style*="background"],
#page-svc-operations .cta-block .label[style*="background"],
#page-svc-acquisition .cta-block .label[style*="background"],
#page-svc-brand .cta-block .label[style*="background"],
#page-consult-signup .cta-block .label[style*="background"],
#page-home .cta-block .label[style*="background"],
#page-pricing .cta-block .label[style*="background"],
#page-features .cta-block .label[style*="background"],
#page-how-it-works .cta-block .label[style*="background"] {
  background: var(--consult-accent-dim) !important; color: var(--consult-accent-soft) !important;
}
body[data-section="consultancy"] .cta-block .btn-outline[style*="color"],
#page-consultancy .cta-block .btn-outline[style*="color"],
#page-svc-operations .cta-block .btn-outline[style*="color"],
#page-svc-acquisition .cta-block .btn-outline[style*="color"],
#page-svc-brand .cta-block .btn-outline[style*="color"],
#page-consult-signup .cta-block .btn-outline[style*="color"],
#page-home .cta-block .btn-outline[style*="color"],
#page-pricing .cta-block .btn-outline[style*="color"],
#page-features .cta-block .btn-outline[style*="color"],
#page-how-it-works .cta-block .btn-outline[style*="color"] {
  color: var(--consult-text-muted) !important; border-color: var(--consult-hairline) !important;
}
/* .cta-block h2/h3/p hardcode white/near-white text (the universal dark
   CTA banner design), but this block's own background is remapped to
   var(--consult-ink) above — now light — on every reskinned page, so
   those hardcoded light colors need a matching dark override here too,
   same reasoning as the label/btn-outline overrides above. */
body[data-section="consultancy"] .cta-block h2, body[data-section="consultancy"] .cta-block h3,
#page-consultancy .cta-block h2, #page-consultancy .cta-block h3,
#page-svc-operations .cta-block h2, #page-svc-operations .cta-block h3,
#page-svc-acquisition .cta-block h2, #page-svc-acquisition .cta-block h3,
#page-svc-brand .cta-block h2, #page-svc-brand .cta-block h3,
#page-consult-signup .cta-block h2, #page-consult-signup .cta-block h3,
#page-home .cta-block h2, #page-home .cta-block h3,
#page-pricing .cta-block h2, #page-pricing .cta-block h3,
#page-features .cta-block h2, #page-features .cta-block h3,
#page-how-it-works .cta-block h2, #page-how-it-works .cta-block h3 {
  color: var(--consult-text) !important;
}
body[data-section="consultancy"] .cta-block p,
#page-consultancy .cta-block p,
#page-svc-operations .cta-block p,
#page-svc-acquisition .cta-block p,
#page-svc-brand .cta-block p,
#page-consult-signup .cta-block p,
#page-home .cta-block p,
#page-pricing .cta-block p,
#page-features .cta-block p,
#page-how-it-works .cta-block p {
  color: var(--consult-text-muted) !important;
}
/* The same repeated .cta-block also carries the base site's teal glow
   blob (.cta-block::before) — kill it and match the flat ink background
   on every reskinned page (consultancy family + the 4 receptionist core
   pages from this phase). */
body[data-section="consultancy"] .cta-block,
#page-consultancy .cta-block,
#page-svc-operations .cta-block,
#page-svc-acquisition .cta-block,
#page-svc-brand .cta-block,
#page-consult-signup .cta-block,
#page-home .cta-block,
#page-pricing .cta-block,
#page-features .cta-block,
#page-how-it-works .cta-block {
  background: var(--consult-ink) !important;
}
body[data-section="consultancy"] .cta-block::before,
#page-consultancy .cta-block::before,
#page-svc-operations .cta-block::before,
#page-svc-acquisition .cta-block::before,
#page-svc-brand .cta-block::before,
#page-consult-signup .cta-block::before,
#page-home .cta-block::before,
#page-pricing .cta-block::before,
#page-features .cta-block::before,
#page-how-it-works .cta-block::before {
  display: none !important;
}

/* Scroll reveal (GSAP enhances; CSS fallback) */
.reveal-up {
  opacity: 0; transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: var(--reveal-delay, 0s);
}
.reveal-up.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 1024px) {
  .consult-hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .consult-service-grid { grid-template-columns: 1fr; }
  .consult-timeline { grid-template-columns: 1fr 1fr; }
  .consult-timeline::before { display: none; }
  .consult-split { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .consult-hero { padding: 120px 0 64px; }
  .consult-hero-visual .browser-frame { max-width: 100%; }
  .consult-hero-visual { padding: 0; }
  .consult-timeline { grid-template-columns: 1fr; }
  .consult-trust-row { flex-direction: column; gap: 8px; }
}

.lang-en, .lang-ar { display: none; }
html[lang="en"] .lang-en,
#marketing-spa-root[lang="en"] .lang-en,
[lang="en"] .lang-en { display: inline; }
html[lang="ar"] .lang-ar,
#marketing-spa-root[lang="ar"] .lang-ar,
[lang="ar"] .lang-ar { display: inline; }
html[lang="en"] .lang-en.lang-block,
#marketing-spa-root[lang="en"] .lang-en.lang-block,
[lang="en"] .lang-en.lang-block { display: block; }
html[lang="ar"] .lang-ar.lang-block,
#marketing-spa-root[lang="ar"] .lang-ar.lang-block,
[lang="ar"] .lang-ar.lang-block { display: block; }