/* ==========================================================================
   CRU Asia Limited — design tokens
   Palette drawn from the CRU Singapore brand mark (wordmark gray, cross
   teal/cyan, gold/amber, and crimson accent).
   ========================================================================== */
:root {
  /* Color */
  --color-white: #FFFFFF;
  --color-ink: #2A2B2D;
  --color-text: #4A4B4D;
  --color-text-muted: #74767A;
  --color-surface: #FFFFFF;
  --color-surface-alt: #F5F7F8;
  --color-border: #E1E4E6;

  --color-primary: #1D6F8C;
  --color-primary-dark: #14536A;
  --color-primary-light: #3FAFC4;

  --color-accent: #F2A900;
  --color-accent-dark: #DE7C1F;

  --color-crimson: #C8102E;
  --color-crimson-dark: #A20C25;

  --color-success: #1E7B4D;
  --color-error: #C8102E;

  /* Hero "data corridor" gradient — near-black at top fading to a deep
     teal-navy at the bottom. */
  --color-hero-deep: #050B10;
  --color-hero-from: #081620;
  --color-hero-via: #0B222E;

  /* Vivid neon cyan for the hero's data-corridor glow — brighter/more
     saturated than --color-primary-light, which reads as muted against a
     near-black backdrop. Amber glow reuses the existing --color-accent. */
  --color-tech-cyan: #29E0FF;

  /* Footer keeps a dedicated dark surface in both themes — kept separate
     from --color-ink so redefining --color-ink for dark mode (a text
     color) can't accidentally invert the footer's background. */
  --color-footer-bg: #2A2B2D;
  --color-header-bg: rgba(255, 255, 255, 0.92);

  /* Kept as the universally-recognized WhatsApp brand green regardless of
     theme/palette — the widget's affordance depends on it reading as
     WhatsApp at a glance; everything else about the widget (radius,
     shadow, type, surface) follows the site's own tokens. */
  --color-whatsapp: #25D366;
  --color-whatsapp-dark: #1DA851;

  /* Type */
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: 1.75rem;
  --fs-2xl: 2.25rem;
  --fs-3xl: 3rem;
  --lh-tight: 1.15;
  --lh-normal: 1.6;

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 6rem;

  /* Radii & shadows */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 999px;

  --shadow-sm: 0 1px 3px rgba(20, 83, 106, 0.08);
  --shadow-md: 0 8px 24px rgba(20, 83, 106, 0.12);
  --shadow-lg: 0 20px 48px rgba(20, 83, 106, 0.18);

  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;

  --container-max: 1180px;
}

/* ==========================================================================
   Dark theme — same token names, swapped values. Applies automatically via
   OS preference, or manually via the header toggle (persisted to
   localStorage as data-theme="dark"/"light" on <html>).
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-white: #FFFFFF;
    --color-ink: #F3F5F6;
    --color-text: #D2D6D9;
    --color-text-muted: #9A9EA3;
    --color-surface: #17191C;
    --color-surface-alt: #1F2226;
    --color-border: #33363A;

    --color-primary: #4FC1DB;
    --color-primary-dark: #3FAFC4;
    --color-primary-light: #7ED8EB;

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.5);

    --color-footer-bg: #0F1113;
    --color-header-bg: rgba(23, 25, 28, 0.85);
  }
}
:root[data-theme="dark"] {
  --color-white: #FFFFFF;
  --color-ink: #F3F5F6;
  --color-text: #D2D6D9;
  --color-text-muted: #9A9EA3;
  --color-surface: #17191C;
  --color-surface-alt: #1F2226;
  --color-border: #33363A;

  --color-primary: #4FC1DB;
  --color-primary-dark: #3FAFC4;
  --color-primary-light: #7ED8EB;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.5);

  --color-footer-bg: #0F1113;
  --color-header-bg: rgba(23, 25, 28, 0.85);
}

/* ==========================================================================
   Reset & base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--color-text);
  background: var(--color-surface);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { color: var(--color-ink); line-height: var(--lh-tight); margin: 0; }
p { margin: 0; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
ul { list-style: none; margin: 0; padding: 0; }

:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
  background: var(--color-primary-dark);
  color: var(--color-white);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  z-index: 1000;
}
.skip-link:focus {
  left: var(--space-4);
  top: var(--space-4);
}

.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-5);
}
.container--narrow { max-width: 720px; }

.section { padding-block: var(--space-8); }
.section__title {
  font-size: var(--fs-2xl);
  text-align: center;
}
.section__lead {
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--fs-md);
  margin-top: var(--space-3);
  margin-bottom: var(--space-7);
}

/* Fade-in-on-scroll (JS toggles .is-visible via IntersectionObserver) */
.fade-in {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--transition-base), transform var(--transition-base);
}
.fade-in.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .fade-in { opacity: 1; transform: none; }
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: var(--fs-base);
  border: 2px solid transparent;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}
.btn--primary {
  background: var(--color-crimson);
  color: var(--color-white);
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover { background: var(--color-crimson-dark); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn--secondary {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.7);
  color: inherit;
}
.hero .btn--secondary { color: var(--color-white); }
.btn--secondary:hover { background: rgba(255, 255, 255, 0.12); transform: translateY(-2px); }
.enquiry .btn--secondary { border-color: var(--color-primary); color: var(--color-primary); }
.enquiry .btn--secondary:hover { background: var(--color-primary); color: var(--color-white); }
.btn--block { width: 100%; }
.btn:disabled { opacity: 0.7; cursor: not-allowed; transform: none; }

.btn__spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: var(--color-white);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   Header / nav
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-header-bg);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border);
}

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

.nav {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--space-3) var(--space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.nav__logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-weight: 700;
  color: var(--color-ink);
}
.nav__logo img { border-radius: 4px; }
.nav__logo-text { font-size: var(--fs-md); white-space: nowrap; }

.nav__right {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-surface-alt);
  color: var(--color-ink);
  flex-shrink: 0;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.theme-toggle:hover { border-color: var(--color-primary-light); }
.theme-toggle__icon--moon { display: none; }
:root[data-theme="dark"] .theme-toggle__icon--sun { display: none; }
:root[data-theme="dark"] .theme-toggle__icon--moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle__icon--sun { display: none; }
  :root:not([data-theme="light"]) .theme-toggle__icon--moon { display: block; }
}

.nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  padding: 0;
}
.nav__toggle-bar {
  width: 24px;
  height: 2px;
  background: var(--color-ink);
  border-radius: 2px;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav__menu {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}
.nav__link {
  font-weight: 500;
  color: var(--color-text);
  padding-block: var(--space-2);
  border-bottom: 2px solid transparent;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.nav__link:hover { color: var(--color-primary); border-color: var(--color-primary-light); }
.nav__link--cta {
  background: var(--color-primary);
  color: var(--color-white);
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-full);
  border-bottom: none;
}
.nav__link--cta:hover { background: var(--color-primary-dark); color: var(--color-white); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: var(--space-8) var(--space-5);
  color: var(--color-white);
  /* Real data-center photo (assets/hero-bg.jpg, Pexels — free license,
     photographer panumas nikhomkhai), darkened with a semi-transparent
     navy/black scrim for text contrast, plus soft cyan/amber ambient glow
     on top. The CSS circuit/streak overlay below adds a "digital HUD over
     a real room" layer on top of this. */
  background:
    radial-gradient(ellipse at 50% 25%, rgba(41, 224, 255, 0.14), transparent 60%),
    radial-gradient(circle at 88% 85%, rgba(242, 169, 0, 0.12), transparent 55%),
    linear-gradient(180deg, rgba(5, 11, 16, 0.87) 0%, rgba(8, 22, 32, 0.82) 55%, rgba(11, 34, 46, 0.78) 100%),
    url('assets/hero-bg.jpg');
  background-size: auto, auto, auto, cover;
  background-position: center, center, center, center;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
}
/* Faint cyan-tinted grid texture across the whole hero. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(41, 224, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(41, 224, 255, 0.05) 1px, transparent 1px);
  background-size: 14px 14px;
  pointer-events: none;
}
.hero__circuit {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Perspective grid "floor" receding toward a horizon — the classic
   CSS data-corridor trick: a flat grid rotated in 3D, faded out at the
   far edge with a mask so it dissolves into the gradient above it.
   Extended past the left/right edges so foreshortening never leaves a
   visible gap at the sides. */
.hero__floor {
  position: absolute;
  left: -25%;
  right: -25%;
  bottom: 0;
  height: 60%;
  background-image:
    linear-gradient(rgba(41, 224, 255, 0.4) 1px, transparent 1px),
    linear-gradient(90deg, rgba(41, 224, 255, 0.4) 1px, transparent 1px);
  background-size: 56px 56px;
  transform: perspective(280px) rotateX(62deg);
  transform-origin: bottom center;
  -webkit-mask-image: linear-gradient(to top, black 0%, transparent 78%);
  mask-image: linear-gradient(to top, black 0%, transparent 78%);
  opacity: 0.55;
}

/* Soft bokeh glow blobs, cyan + amber. */
.hero__glow { position: absolute; border-radius: 50%; filter: blur(50px); }
.hero__glow--1 { width: 260px; height: 260px; top: -70px; left: 6%; background: radial-gradient(circle, rgba(41, 224, 255, 0.5), transparent 70%); }
.hero__glow--2 { width: 320px; height: 320px; bottom: -100px; right: 4%; background: radial-gradient(circle, rgba(242, 169, 0, 0.35), transparent 70%); }
.hero__glow--3 { width: 200px; height: 200px; top: 38%; left: 58%; background: radial-gradient(circle, rgba(41, 224, 255, 0.28), transparent 70%); }

/* Glowing diagonal light-trail streaks. */
.hero__streak { position: absolute; height: 2px; border-radius: 999px; }
.hero__streak--1 { top: 16%; left: -8%; width: 55%; transform: rotate(-6deg); background: linear-gradient(90deg, transparent, rgba(41, 224, 255, 0.9), transparent); box-shadow: 0 0 14px 2px rgba(41, 224, 255, 0.55); }
.hero__streak--2 { top: 30%; right: -10%; width: 42%; transform: rotate(5deg); background: linear-gradient(90deg, transparent, rgba(242, 169, 0, 0.85), transparent); box-shadow: 0 0 12px 2px rgba(242, 169, 0, 0.5); }
.hero__streak--3 { top: 58%; left: -10%; width: 38%; transform: rotate(-3deg); background: linear-gradient(90deg, transparent, rgba(41, 224, 255, 0.7), transparent); box-shadow: 0 0 10px 2px rgba(41, 224, 255, 0.4); }
.hero__streak--4 { top: 74%; right: 4%; width: 28%; transform: rotate(8deg); background: linear-gradient(90deg, transparent, rgba(41, 224, 255, 0.6), transparent); box-shadow: 0 0 10px 2px rgba(41, 224, 255, 0.35); }
.hero__streak--5 { top: 88%; left: 18%; width: 32%; transform: rotate(-4deg); background: linear-gradient(90deg, transparent, rgba(242, 169, 0, 0.6), transparent); box-shadow: 0 0 10px 2px rgba(242, 169, 0, 0.35); }

/* Large faded CRU crest, centered behind the headline. */
.hero__watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(64vh, 680px);
  height: auto;
  opacity: 0.14;
}

/* A couple of IT/AI line-art icons — same viewBox/paths as the Services
   cards below, for consistency — kept to just two so they read as an
   intentional detail rather than competing with the streaks/glow. */
.hero__icon {
  position: absolute;
  width: 88px;
  height: 88px;
  opacity: 0.4;
}
.hero__icon svg { width: 100%; height: 100%; display: block; }
.hero__icon--1 { top: 12%; left: 8%; color: var(--color-tech-cyan); }
.hero__icon--2 { top: 68%; left: 84%; width: 76px; height: 76px; color: var(--color-accent); }

@media (max-width: 767px) {
  .hero__streak { width: 40%; }
  .hero__glow { filter: blur(36px); }
  .hero__glow--1, .hero__glow--2 { width: 180px; height: 180px; }
  .hero__glow--3 { width: 140px; height: 140px; }
  .hero__floor { height: 45%; opacity: 0.4; }
  .hero__icon { width: 52px; height: 52px; opacity: 0.3; }
  .hero__icon--2 { width: 46px; height: 46px; }
  .hero__watermark { width: min(46vh, 360px); opacity: 0.12; }
}

.hero__content {
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
  position: relative;
  z-index: 1;
}
.hero__title {
  color: var(--color-white);
  font-size: var(--fs-3xl);
  margin-bottom: var(--space-5);
}
.hero__subtitle {
  font-size: var(--fs-lg);
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: var(--space-7);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
}

/* ==========================================================================
   Trust bar (stats)
   ========================================================================== */
.stats {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding-block: var(--space-7);
}
.stats__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
  text-align: center;
}
.stats__swatch {
  display: inline-block;
  width: 28px;
  height: 4px;
  border-radius: var(--radius-full);
  margin-bottom: var(--space-3);
}
.stats__swatch--teal { background: var(--color-primary-dark); }
.stats__swatch--cyan { background: var(--color-primary-light); }
.stats__swatch--gold { background: var(--color-accent); }
.stats__swatch--amber { background: var(--color-accent-dark); }
.stats__number {
  font-size: var(--fs-2xl);
  font-weight: 800;
  color: var(--color-ink);
}
.stats__label {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

/* ==========================================================================
   Services
   ========================================================================== */
.services { background: var(--color-surface-alt); }
.services__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-5);
}
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary));
  color: var(--color-white);
  margin-bottom: var(--space-4);
}
.card__title {
  font-size: var(--fs-md);
  margin-bottom: var(--space-2);
}
.card__text {
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}

/* ==========================================================================
   Testimonials
   ========================================================================== */
.testimonials__viewport {
  overflow: hidden;
}
.testimonials__track {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
.testimonial {
  background: var(--color-surface-alt);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-5);
}
.testimonial__quote p {
  font-size: var(--fs-md);
  color: var(--color-ink);
  font-style: italic;
}
.testimonial__author {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.avatar {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark));
  color: var(--color-white);
  font-weight: 700;
  font-size: var(--fs-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}
.testimonial__name { font-weight: 600; color: var(--color-ink); }
.testimonial__role { font-size: var(--fs-sm); color: var(--color-text-muted); }

.testimonials__controls {
  display: none;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  margin-top: var(--space-6);
}
.testimonials__arrow {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  font-size: var(--fs-lg);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.testimonials__arrow:hover { background: var(--color-primary); color: var(--color-white); }
.testimonials__dots {
  display: flex;
  gap: var(--space-2);
}
.testimonials__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: var(--color-border);
  padding: 0;
}
.testimonials__dot[aria-selected="true"] { background: var(--color-primary); }

/* ==========================================================================
   Lead magnet
   ========================================================================== */
.lead-magnet__panel {
  background: linear-gradient(135deg, var(--color-surface-alt), var(--color-surface));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
  text-align: center;
}
.lead-magnet__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark));
  color: var(--color-white);
  margin-bottom: var(--space-4);
}
.lead-magnet__title {
  font-size: var(--fs-xl);
  margin-bottom: var(--space-3);
}
.lead-magnet__text {
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
}
.lead-magnet__row {
  display: flex;
  gap: var(--space-3);
  max-width: 480px;
  margin-inline: auto;
}
.lead-magnet__row .form__input { flex: 1; }
.lead-magnet__status { margin-top: var(--space-4); font-size: var(--fs-sm); }
.lead-magnet__success {
  color: var(--color-success);
  font-weight: 600;
  margin-top: var(--space-4);
}

/* ==========================================================================
   Enquiry form
   ========================================================================== */
.enquiry__panel {
  background: var(--color-surface-alt);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
}
.form__honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__row { margin-bottom: var(--space-5); }
.form__label { display: block; font-weight: 600; font-size: var(--fs-sm); color: var(--color-ink); margin-bottom: var(--space-2); }
.form__optional { font-weight: 400; color: var(--color-text-muted); }
.form__input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font: inherit;
  background: var(--color-surface);
  color: var(--color-ink);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.form__input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(29, 111, 140, 0.15); }
.form__input[aria-invalid="true"] { border-color: var(--color-error); }
.form__textarea { resize: vertical; }
.form__error {
  color: var(--color-error);
  font-size: var(--fs-sm);
  margin-top: var(--space-2);
}
.form__status { text-align: center; margin-top: var(--space-4); font-size: var(--fs-sm); }
.form__status--error { color: var(--color-error); }
.form__status--success { color: var(--color-success); }
.form__privacy {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  text-align: center;
  margin-top: var(--space-4);
}
.form__privacy a { color: var(--color-primary); text-decoration: underline; }

.enquiry__success { text-align: center; padding: var(--space-6) 0; }
.enquiry__success-title { font-size: var(--fs-xl); margin-bottom: var(--space-3); }
.enquiry__success-text { color: var(--color-text-muted); margin-bottom: var(--space-6); }

.trust-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-6);
  margin-top: var(--space-6);
}
.trust-badge {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}
.trust-badge svg { color: var(--color-primary); flex-shrink: 0; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background: var(--color-footer-bg);
  color: rgba(255, 255, 255, 0.8);
  padding-block: var(--space-8) var(--space-6);
}
.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-6);
}
.footer__logo { color: var(--color-white); margin-bottom: var(--space-4); }
.footer__blurb { font-size: var(--fs-sm); margin-bottom: var(--space-5); }
.footer__socials { display: flex; gap: var(--space-3); }
.footer__social {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-white);
  transition: background var(--transition-fast);
}
.footer__social:hover { background: var(--color-primary); }
.footer__heading { color: var(--color-white); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--space-4); }
.footer__list li { margin-bottom: var(--space-3); }
.footer__list a { font-size: var(--fs-sm); }
.footer__list a:hover { color: var(--color-primary-light); }
.footer__address p { font-size: var(--fs-sm); margin-bottom: var(--space-3); }
.footer__address a:hover { color: var(--color-primary-light); }

.footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--fs-sm);
}
.footer__legal { display: flex; gap: var(--space-5); }
.footer__legal a:hover { color: var(--color-primary-light); }

/* ==========================================================================
   eBook popup
   ========================================================================== */
.popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  background: rgba(0, 0, 0, 0.5);
  animation: popup-fade-in var(--transition-base) ease;
}
.popup-overlay[hidden] { display: none; }

.popup {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-7) var(--space-6) var(--space-6);
  text-align: center;
  animation: popup-scale-in var(--transition-base) ease;
}
@keyframes popup-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes popup-scale-in { from { opacity: 0; transform: scale(0.95) translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .popup-overlay, .popup { animation: none; }
}

.popup__close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: none;
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
}
.popup__close:hover { background: var(--color-border); color: var(--color-ink); }

.popup__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark));
  color: var(--color-white);
  margin-bottom: var(--space-4);
}
.popup__title { font-size: var(--fs-lg); margin-bottom: var(--space-3); }
.popup__text { color: var(--color-text-muted); font-size: var(--fs-sm); margin-bottom: var(--space-5); }
.popup__form .form__input { margin-bottom: var(--space-3); }
.popup__status { margin-top: var(--space-3); font-size: var(--fs-sm); }
.popup__success { color: var(--color-success); font-weight: 600; }
.popup__dismiss {
  display: inline-block;
  margin-top: var(--space-4);
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  text-decoration: underline;
}
.popup__dismiss:hover { color: var(--color-ink); }

/* ==========================================================================
   WhatsApp widget
   ========================================================================== */
.whatsapp-widget {
  position: fixed;
  right: var(--space-5);
  bottom: var(--space-5);
  z-index: 900;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-4);
}

.whatsapp-fab {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: none;
  background: var(--color-whatsapp);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-lg);
  transition: transform var(--transition-fast), background var(--transition-fast);
}
.whatsapp-fab:hover { background: var(--color-whatsapp-dark); transform: scale(1.05); }

.whatsapp-panel {
  width: min(320px, calc(100vw - 2 * var(--space-5)));
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
}
.whatsapp-panel[hidden] { display: none; }

.whatsapp-panel__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--color-whatsapp);
  color: var(--color-white);
}
.whatsapp-panel__header img { border-radius: 50%; background: var(--color-white); flex-shrink: 0; }
.whatsapp-panel__name { font-weight: 700; font-size: var(--fs-sm); }
.whatsapp-panel__status { font-size: 0.75rem; opacity: 0.9; }
.whatsapp-panel__close {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--color-white);
  opacity: 0.85;
  flex-shrink: 0;
}
.whatsapp-panel__close:hover { opacity: 1; }

.whatsapp-panel__body { padding: var(--space-5); }
.whatsapp-panel__greeting {
  font-size: var(--fs-sm);
  color: var(--color-text);
  background: var(--color-surface-alt);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
}
.whatsapp-panel__suggestions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.whatsapp-suggestion {
  display: block;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: var(--fs-sm);
  color: var(--color-primary);
  text-align: center;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.whatsapp-suggestion:hover { background: var(--color-surface-alt); border-color: var(--color-primary-light); }

.whatsapp-panel__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--color-whatsapp);
  color: var(--color-white);
  font-weight: 600;
  font-size: var(--fs-sm);
}
.whatsapp-panel__cta:hover { background: var(--color-whatsapp-dark); }

@media (max-width: 479px) {
  .whatsapp-widget { right: var(--space-4); bottom: var(--space-4); }
  .whatsapp-fab { width: 52px; height: 52px; }
}

/* ==========================================================================
   Breakpoints (mobile-first: base styles above are mobile)
   ========================================================================== */
@media (max-width: 767px) {
  .lead-magnet__row { flex-direction: column; }
}

@media (max-width: 767px) {
  .nav__toggle { display: flex; }
  .nav__menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-5);
    gap: var(--space-4);
    display: none;
  }
  .nav__menu.is-open { display: flex; }
  .nav__link--cta { text-align: center; }

  .testimonials__track {
    grid-template-columns: 100%;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    transition: transform var(--transition-base);
  }
  .testimonials__controls { display: flex; }

  .footer__grid { grid-template-columns: 1fr; }
}

@media (min-width: 480px) {
  .hero__title { font-size: 2.5rem; }
}

@media (min-width: 768px) {
  :root { --fs-3xl: 3.5rem; }
  .footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
}

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

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