/* =============================================================================
   FastNetNow — Main Stylesheet
   Architecture: Mobile-first, CSS custom properties, glassmorphism design system
   Breakpoints: 480px, 768px, 1024px, 1200px
   Note: All animations use transform + opacity exclusively for GPU acceleration.
         Motion-sensitive users are respected via prefers-reduced-motion.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. DESIGN TOKENS (CSS Custom Properties)
   ----------------------------------------------------------------------------- */
:root {
  /* Core palette */
  --bg-primary: #0a1628;
  --bg-secondary: #0f1d32;
  --color-primary: #3b82f6;
  --color-primary-hover: #2563eb;
  --color-accent: #60a5fa;
  --color-text: #e2e8f0;
  --color-text-muted: #94a3b8;

  /* Brand gold accent — used for glows, highlights, and lightning effects */
  --color-gold: #E8B84B;
  --color-gold-glow: rgba(232, 184, 75, 0.22);
  --color-gold-hover: rgba(232, 184, 75, 0.45);

  /* Glassmorphism tokens */
  --glass-bg: rgba(59, 130, 246, 0.06);
  --glass-border: rgba(59, 130, 246, 0.12);
  --glass-blur: blur(60px) saturate(1.4);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);

  /* Card-level glass (slightly more opaque for readability) */
  --glass-card-bg: rgba(255, 255, 255, 0.08);
  --glass-card-border: rgba(255, 255, 255, 0.18);
  --glass-card-shadow: 0 0 22px rgba(232, 184, 75, 0.12), 0 6px 24px rgba(0, 0, 0, 0.30);

  /* Typography scale */
  --font-family: system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-size-xs: 0.75rem;    /* 12px */
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-base: 1rem;     /* 16px */
  --font-size-lg: 1.125rem;   /* 18px */
  --font-size-xl: 1.25rem;    /* 20px */
  --font-size-2xl: 1.5rem;    /* 24px */
  --font-size-3xl: 1.875rem;  /* 30px */
  --font-size-4xl: 2.25rem;   /* 36px */
  --font-size-5xl: 3rem;      /* 48px */
  --font-size-6xl: 3.75rem;   /* 60px */

  /* Spacing scale (8px base unit) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Border radii */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;

  /* Layout */
  --max-width: 1200px;
  --header-height: 72px;
}

/* -----------------------------------------------------------------------------
   2. RESET & BASE
   ----------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  /* Smooth scrolling — disabled for users who prefer reduced motion below */
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  /* Prevent horizontal overflow from reveal animations' initial translateX state */
  overflow-x: clip;
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--bg-primary);
  min-width: 320px;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Animated gradient background — handled by .animated-background div */
/* Hide body::before when .animated-background is present to prevent double-layering */
body:has(.animated-background)::before {
  content: none;
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background: linear-gradient(140deg, #0D1B3E, #1B3869, #0A2344, #111827);
  background-size: 300% 300%;
  animation: gradientShift 18s ease infinite;
  will-change: background-position;
}

/* Animated gradient shift — moves the background-position to create a slow wash */
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color var(--transition-base);
}

a:hover {
  color: var(--color-primary-hover);
}

ul,
ol {
  list-style: none;
}

h1, h2, h3, h4, h5, h6 {
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* -----------------------------------------------------------------------------
   3. ACCESSIBILITY — SKIP NAV & FOCUS STYLES
   ----------------------------------------------------------------------------- */

/* Skip to main content link — visible only on keyboard focus */
.skip-nav {
  position: absolute;
  top: -100px;
  left: var(--space-4);
  z-index: 9999;
  padding: var(--space-3) var(--space-6);
  background: var(--color-primary);
  color: #fff;
  font-weight: 600;
  border-radius: var(--radius-md);
  transition: top var(--transition-fast);
}

.skip-nav:focus {
  top: var(--space-4);
}

/* Consistent, high-contrast focus ring for all interactive elements */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Remove default focus ring when not using keyboard */
:focus:not(:focus-visible) {
  outline: none;
}

/* -----------------------------------------------------------------------------
   4. LAYOUT UTILITIES
   ----------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

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

@media (min-width: 1200px) {
  .container {
    padding-inline: var(--space-10);
  }
}

/* Ensure all page content sits above the animated background (z-0) and lightning canvas (z-1) */
main {
  position: relative;
  z-index: 2;
}

.section {
  padding-block: var(--space-20);
}

@media (min-width: 768px) {
  .section {
    padding-block: var(--space-24);
  }
}

/* Gold accent on section labels — brand identity marker */
.section-label {
  display: inline-block;
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-3);
}

.section-title {
  font-size: var(--font-size-3xl);
  color: var(--color-text);
  margin-bottom: var(--space-4);
}

@media (min-width: 768px) {
  .section-title {
    font-size: var(--font-size-4xl);
  }
}

.section-subtitle {
  font-size: var(--font-size-lg);
  color: var(--color-text-muted);
  max-width: 600px;
  line-height: 1.7;
  margin-inline: auto;
}

/* -----------------------------------------------------------------------------
   5. GLASSMORPHISM COMPONENT TOKENS
   ----------------------------------------------------------------------------- */
.glass {
  background: var(--glass-card-bg);
  border: 1px solid var(--glass-card-border);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-card-shadow);
  border-radius: var(--radius-lg);
}

/* -----------------------------------------------------------------------------
   6. BUTTONS
   ----------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.75rem 1.75rem;
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  font-weight: 600;
  line-height: 1;
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition:
    background-color var(--transition-base),
    transform var(--transition-fast),
    box-shadow var(--transition-base);
  text-decoration: none;
  white-space: nowrap;
}

.btn:active {
  transform: scale(0.97);
}

/* Primary filled button */
.btn-primary {
  background: var(--color-primary);
  color: #fff;
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.35);
}

.btn-primary:hover {
  background: var(--color-primary-hover);
  color: #fff;
  box-shadow: 0 0 28px rgba(59, 130, 246, 0.55);
  transform: translateY(-2px);
}

/* Ghost / outline button */
.btn-ghost {
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--glass-card-border);
}

.btn-ghost:hover {
  background: var(--glass-bg);
  color: var(--color-accent);
  border-color: var(--color-primary);
  transform: translateY(-2px);
}

/* -----------------------------------------------------------------------------
   7. HEADER & NAVIGATION
   ----------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  height: var(--header-height);
  display: flex;
  align-items: center;
  background: rgba(10, 22, 40, 0.75);
  border-bottom: 1px solid var(--glass-border);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  transition: background var(--transition-slow), box-shadow var(--transition-slow);
}

/* Slightly more opaque when scrolled — toggled via JS */
.site-header.scrolled {
  background: rgba(10, 22, 40, 0.92);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

/* Logo — image-based; fallback text hidden when image loads */
.site-logo {
  font-size: var(--font-size-xl);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--color-text);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

/* The logo image itself — constrained height, auto width to preserve aspect ratio */
.site-logo-img {
  height: 36px;
  width: auto;
  display: block;
  object-fit: contain;
}

/*
 * Fallback text is visually hidden when the image is present.
 * CSS cannot detect image load failures, so we handle this via a small JS
 * error handler added in initDarkMode. The span acts as a screen-reader-friendly
 * label and a visible fallback if the PNG 404s.
 */
.site-logo-fallback {
  /* Hidden by default — shown via .logo-img-failed class on the <a> */
  display: none;
  color: var(--color-text);
}

/* When image fails to load, JS adds this class so fallback text becomes visible */
.site-logo.logo-img-failed .site-logo-img {
  display: none;
}

.site-logo.logo-img-failed .site-logo-fallback {
  display: inline;
}

.site-logo span:not(.site-logo-fallback):not(.logo-dot) {
  color: var(--color-primary);
}

/* The glowing dot accent — gold in brand spec */
.logo-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--color-gold);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--color-gold);
  animation: logoBlink 2.5s ease-in-out infinite;
  vertical-align: middle;
  margin-left: var(--space-1);
}

@keyframes logoBlink {
  0%, 100% { opacity: 1; box-shadow: 0 0 8px var(--color-gold); }
  50%       { opacity: 0.5; box-shadow: 0 0 4px var(--color-gold); }
}

/* Desktop nav */
.main-nav {
  display: none;
}

@media (min-width: 768px) {
  .main-nav {
    display: flex;
    align-items: center;
    gap: var(--space-8);
  }
}

.nav-link {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  text-decoration: none;
  letter-spacing: 0.02em;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
  transition: color var(--transition-base), border-color var(--transition-base);
}

.nav-link:hover,
.nav-link.active {
  color: var(--color-text);
  border-bottom-color: var(--color-primary);
}

.nav-cta {
  display: none;
}

@media (min-width: 1024px) {
  .nav-cta {
    display: inline-flex;
  }
}

/* Hamburger button (mobile) */
.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: var(--space-2);
  background: transparent;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition-base), border-color var(--transition-base);
  color: var(--color-text);
}

.hamburger:hover {
  background: var(--glass-bg);
  border-color: var(--color-primary);
}

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

.hamburger-line {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--color-text);
  border-radius: 2px;
  transform-origin: center;
  transition: transform var(--transition-base), opacity var(--transition-base);
}

/* Animate hamburger lines into an × when open */
.hamburger[aria-expanded="true"] .hamburger-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.hamburger[aria-expanded="true"] .hamburger-line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.hamburger[aria-expanded="true"] .hamburger-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile nav drawer */
.mobile-nav {
  position: fixed;
  top: var(--header-height);
  left: 0;
  right: 0;
  z-index: 999;
  background: rgba(10, 22, 40, 0.97);
  border-bottom: 1px solid var(--glass-border);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);

  /* Hidden by default; revealed with transform (GPU-accelerated) */
  transform: translateY(-110%);
  opacity: 0;
  transition:
    transform var(--transition-slow),
    opacity var(--transition-slow);
  pointer-events: none;
}

.mobile-nav.open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

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

.mobile-nav-link {
  font-size: var(--font-size-lg);
  font-weight: 500;
  color: var(--color-text-muted);
  text-decoration: none;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--glass-border);
  transition: color var(--transition-base);
}

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

.mobile-nav-link:last-child {
  border-bottom: none;
}

/* -----------------------------------------------------------------------------
   8. DARK MODE TOGGLE BUTTON
   Fixed top-right. 40px gold-bordered circle with moon/sun icon swap.
   ----------------------------------------------------------------------------- */
.dark-mode-toggle {
  position: fixed;
  top: calc((var(--header-height) - 40px) / 2);
  right: var(--space-4);
  z-index: 9999;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(10, 22, 40, 0.80);
  border: 2px solid var(--color-gold);
  color: var(--color-gold);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background var(--transition-base),
    box-shadow var(--transition-base),
    transform var(--transition-fast);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* On mobile, shift toggle left to avoid overlapping the hamburger button */
@media (max-width: 767px) {
  .dark-mode-toggle {
    right: calc(var(--space-4) + 52px);
  }
}

.dark-mode-toggle:hover {
  background: var(--color-gold-glow);
  box-shadow: 0 0 14px var(--color-gold-glow);
  transform: scale(1.08);
}

.dark-mode-toggle svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Moon icon — shown by default (light/auto mode) */
.dark-mode-toggle .icon-moon { display: block; }
.dark-mode-toggle .icon-sun  { display: none;  }

/* In dark mode, show the sun icon so user can switch back */
html.dark-mode .dark-mode-toggle .icon-moon { display: none;  }
html.dark-mode .dark-mode-toggle .icon-sun  { display: block; }

/* -----------------------------------------------------------------------------
   9. DARK MODE OVERRIDES
   Applied when <html> carries the .dark-mode class (set by JS + localStorage).
   Deepens the background and darkens glass card surfaces.
   ----------------------------------------------------------------------------- */
html.dark-mode body::before {
  /* Near-black gradient — deeper than the default navy */
  background: linear-gradient(140deg, #050b18, #0a1628, #030810, #080d14);
  background-size: 300% 300%;
}

html.dark-mode {
  /* Darken glass card surfaces */
  --glass-card-bg: rgba(18, 18, 18, 0.60);
  --glass-card-border: rgba(255, 255, 255, 0.18);
}

/* ---------- Animated Background (BEM orbs) ---------- */
.animated-background {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: linear-gradient(140deg, #0D1B3E 0%, #1B3869 35%, #0A2344 70%, #111827 100%);
  background-size: 400% 400%;
  animation: gradientShift 18s ease infinite;
}

#bg-lightning-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.bg-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  background: rgba(14, 165, 233, 0.06);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(56, 189, 248, 0.12);
  box-shadow:
    inset 0 0 30px rgba(14, 165, 233, 0.08),
    0 0 40px rgba(14, 165, 233, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
}

.bg-orb__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: hue-rotate(195deg) saturate(1.4) brightness(1.1);
  pointer-events: none;
}

.bg-orb--lg { width: 240px; height: 240px; opacity: 0.18; animation: floatSlow 34s ease-in-out infinite; }
.bg-orb--md { width: 140px; height: 140px; opacity: 0.38; animation: floatMedium 22s ease-in-out infinite; }
.bg-orb--sm { width: 80px; height: 80px; opacity: 0.6; will-change: transform; animation: floatFast 14s ease-in-out infinite; }
.bg-orb--xs { width: 42px; height: 42px; opacity: 0.8; will-change: transform; animation: floatFast2 10s ease-in-out infinite; }

@keyframes floatSlow {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(20px, -25px) rotate(3deg); }
  50% { transform: translate(-15px, 20px) rotate(-4deg); }
  75% { transform: translate(25px, 15px) rotate(5deg); }
}
@keyframes floatSlow2 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(-18px, 30px) rotate(-3deg); }
  50% { transform: translate(22px, -18px) rotate(5deg); }
  75% { transform: translate(-12px, -20px) rotate(-6deg); }
}
@keyframes floatMedium {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33% { transform: translate(-25px, 20px) rotate(5deg); }
  66% { transform: translate(20px, -30px) rotate(-6deg); }
}
@keyframes floatMedium2 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33% { transform: translate(30px, -15px) rotate(-5deg); }
  66% { transform: translate(-20px, 28px) rotate(7deg); }
}
@keyframes floatFast {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(18px, -15px) rotate(6deg); }
  50% { transform: translate(-22px, 25px) rotate(-10deg); }
  75% { transform: translate(28px, -18px) rotate(12deg); }
}
@keyframes floatFast2 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(-20px, 18px) rotate(-8deg); }
  50% { transform: translate(25px, -22px) rotate(10deg); }
  75% { transform: translate(-15px, 12px) rotate(-6deg); }
}

html.dark-mode .bg-orb__img {
  filter: hue-rotate(195deg) saturate(1.4) brightness(1.1) opacity(0.80);
}

/* -----------------------------------------------------------------------------
   12. HERO SECTION
   ----------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: calc(100svh - var(--header-height));
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-block: var(--space-20);
  /* z-index: 2 ensures hero content sits above the canvas (z-index: 1) */
  z-index: 2;
}

/* Decorative gradient orbs — purely visual, GPU-composited */
.hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  will-change: transform;
  animation: orbFloat 15s ease-in-out infinite alternate;
}

.hero-orb-1 {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.18) 0%, transparent 70%);
  top: -200px;
  right: -150px;
  animation-duration: 18s;
}

.hero-orb-2 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(96, 165, 250, 0.12) 0%, transparent 70%);
  bottom: -100px;
  left: -100px;
  animation-duration: 22s;
  animation-direction: alternate-reverse;
}

@keyframes orbFloat {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(30px, -20px) scale(1.05); }
  100% { transform: translate(-20px, 30px) scale(0.95); }
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 760px;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary);
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: var(--radius-full);
  padding: var(--space-2) var(--space-4);
  margin-bottom: var(--space-6);
}

/* Gold dot before the eyebrow badge */
.hero-eyebrow::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--color-gold);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--color-gold);
}

/* Single H1 for the page — SEO anchor */
.hero-title {
  font-size: var(--font-size-4xl);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--color-text);
  line-height: 1.1;
  margin-bottom: var(--space-6);
}

@media (min-width: 480px) {
  .hero-title {
    font-size: var(--font-size-5xl);
  }
}

@media (min-width: 768px) {
  .hero-title {
    font-size: var(--font-size-6xl);
  }
}

/* Blue-to-gold gradient on the accent span — brand signature */
.hero-title-accent {
  background: linear-gradient(135deg, var(--color-accent), var(--color-gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-subtitle {
  font-size: var(--font-size-lg);
  color: var(--color-text-muted);
  margin-bottom: var(--space-10);
  line-height: 1.7;
  max-width: 560px;
}

@media (min-width: 768px) {
  .hero-subtitle {
    font-size: var(--font-size-xl);
  }
}

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

/* -----------------------------------------------------------------------------
   13. SERVICES SECTION
   ----------------------------------------------------------------------------- */
.services {
  background: transparent;
  position: relative;
  z-index: 2;
}

.services-header {
  text-align: center;
  margin-bottom: var(--space-16);
}

.services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

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

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

.service-card {
  position: relative;
  padding: var(--space-8);
  border-radius: var(--radius-xl);
  background: var(--glass-card-bg);
  border: 1.5px solid var(--glass-card-border);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-card-shadow);
  overflow: hidden;
  transition:
    transform var(--transition-slow),
    box-shadow var(--transition-slow),
    border-color var(--transition-slow);
}

/* Gold top-edge glow line — revealed on hover */
.service-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
  opacity: 0;
  transition: opacity var(--transition-slow);
}

/* Gold glow shadow on hover */
.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 0 22px var(--color-gold-glow), 0 6px 24px rgba(0, 0, 0, 0.30);
  border-color: rgba(59, 130, 246, 0.3);
}

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

.service-icon {
  width: 52px;
  height: 52px;
  margin-bottom: var(--space-6);
  color: var(--color-primary);
  flex-shrink: 0;
}

.service-name {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-gold);
  text-shadow: 0 0 12px rgba(232, 184, 75, 0.35);
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 2px solid rgba(232, 184, 75, 0.25);
}

.service-tagline {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-primary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}

.service-description {
  font-size: var(--font-size-base);
  color: var(--color-text-muted);
  line-height: 1.7;
}

/* -----------------------------------------------------------------------------
   14. STATS / EXPERIENCE BAR
   ----------------------------------------------------------------------------- */
.stats-bar {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(15, 29, 50, 0.9) 100%);
  border-top: 1px solid var(--glass-border);
  border-bottom: 1px solid var(--glass-border);
  padding-block: var(--space-16);
  position: relative;
  z-index: 2;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-8) var(--space-6);
  text-align: center;
}

@media (min-width: 768px) {
  .stats-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
  }
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

/* Gold accent in stat value gradient — reinforces brand identity */
.stat-value {
  font-size: var(--font-size-4xl);
  font-weight: 800;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, var(--color-text), var(--color-gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}

@media (min-width: 768px) {
  .stat-value {
    font-size: var(--font-size-5xl);
  }
}

.stat-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* -----------------------------------------------------------------------------
   15. CLIENT TOOLS SECTION
   ----------------------------------------------------------------------------- */
.client-tools {
  background: transparent;
  position: relative;
  z-index: 2;
}

.client-tools-header {
  text-align: center;
  margin-bottom: var(--space-16);
}

.tools-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

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

.tool-card {
  position: relative;
  padding: var(--space-8);
  border-radius: var(--radius-xl);
  background: var(--glass-card-bg);
  border: 1.5px solid var(--glass-card-border);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-card-shadow);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  transition: transform var(--transition-slow), box-shadow var(--transition-slow);
}

/* Gold glow on tool card hover — consistent with service card treatment */
.tool-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 22px var(--color-gold-glow), 0 6px 24px rgba(0, 0, 0, 0.30);
}

.tool-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  width: fit-content;
}

/* Live badge — green is intentional as a status indicator, not a brand accent */
.tool-badge-live {
  background: rgba(34, 197, 94, 0.12);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.2);
}

/* The pulsing green dot is a status indicator — deliberately NOT gold */
.tool-badge-live::before {
  content: '';
  width: 6px;
  height: 6px;
  background: #4ade80;
  border-radius: 50%;
  box-shadow: 0 0 6px #4ade80;
  animation: livePulse 2s ease-in-out infinite;
}

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

.tool-icon {
  width: 44px;
  height: 44px;
  color: var(--color-primary);
}

.tool-name {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-text);
}

.tool-description {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: 1.7;
  flex: 1;
}

.tool-link {
  display: inline-block;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: #0D1B3E;
  background: linear-gradient(135deg, #C9962D, #E8B84B);
  border: none;
  border-radius: var(--radius-full);
  padding: var(--space-3) var(--space-6);
  box-shadow: 0 4px 20px rgba(232, 184, 75, 0.25);
  text-decoration: none;
  transition:
    background var(--transition-base),
    border-color var(--transition-base),
    color var(--transition-base),
    transform var(--transition-fast);
  width: fit-content;
}

.tool-link:hover {
  background: linear-gradient(135deg, #E8B84B, #FFD700);
  color: #0D1B3E;
  transform: translateY(-2px);
  box-shadow: 0 6px 28px rgba(232, 184, 75, 0.45);
  border: none;
}

.tool-link:focus-visible {
  outline: 2px solid #E8B84B;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(232, 184, 75, 0.3);
}

.tool-link svg {
  width: 14px;
  height: 14px;
  transition: transform var(--transition-base);
}

.tool-link:hover svg {
  transform: translateX(4px);
}

/* -----------------------------------------------------------------------------
   16. TESTIMONIALS
   ----------------------------------------------------------------------------- */
.testimonials {
  background: transparent;
  position: relative;
  z-index: 2;
}

.testimonials-header {
  text-align: center;
  margin-bottom: var(--space-16);
}

.testimonials-carousel {
  position: relative;
  max-width: 800px;
  margin-inline: auto;
}

.testimonials-track {
  position: relative;
  min-height: 220px;
}

.testimonial-slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-8) var(--space-10);
  background: var(--glass-card-bg);
  border: 1px solid var(--glass-card-border);
  border-radius: var(--radius-xl);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-card-shadow);

  /* Hidden slides sit beneath, using transform + opacity for GPU compositing */
  opacity: 0;
  transform: translateX(30px);
  transition:
    opacity var(--transition-slow),
    transform var(--transition-slow);
  pointer-events: none;
}

.testimonial-slide.active {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
  position: relative; /* active slide takes up space */
}

.testimonial-quote {
  font-size: var(--font-size-lg);
  color: var(--color-text);
  line-height: 1.75;
  font-style: italic;
  margin-bottom: var(--space-6);
  position: relative;
  padding-left: var(--space-6);
}

.testimonial-quote::before {
  content: '"';
  position: absolute;
  left: 0;
  top: -8px;
  font-size: 3rem;
  color: var(--color-gold);
  line-height: 1;
  font-style: normal;
  font-weight: 700;
}

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

.author-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--font-size-base);
  color: #fff;
  flex-shrink: 0;
}

.author-info strong {
  display: block;
  font-size: var(--font-size-base);
  color: var(--color-text);
  font-weight: 600;
}

.author-info span {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* Carousel dots navigation */
.carousel-dots {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-8);
}

.carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--glass-card-border);
  border: none;
  cursor: pointer;
  padding: 8px;
  background-clip: content-box;
  transition:
    background var(--transition-base),
    transform var(--transition-base),
    box-shadow var(--transition-base);
}

/* Gold active carousel dot — on-brand */
.carousel-dot.active {
  background: var(--color-gold);
  transform: scale(1.4);
  box-shadow: 0 0 8px var(--color-gold);
}

/* -----------------------------------------------------------------------------
   17. CONTACT SECTION
   ----------------------------------------------------------------------------- */
.contact {
  background: transparent;
  position: relative;
  z-index: 2;
}

.contact-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
}

@media (min-width: 768px) {
  .contact-inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
    align-items: start;
  }
}

/* Contact info column */
.contact-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.contact-heading {
  font-size: var(--font-size-3xl);
  font-weight: 800;
  color: var(--color-text);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: var(--space-2);
}

@media (min-width: 768px) {
  .contact-heading {
    font-size: var(--font-size-4xl);
  }
}

.contact-subtext {
  font-size: var(--font-size-lg);
  color: var(--color-text-muted);
  line-height: 1.7;
}

.contact-detail {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}

.contact-detail-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-primary);
}

.contact-detail-icon svg {
  width: 20px;
  height: 20px;
}

.contact-detail-text strong {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}

.contact-detail-text a,
.contact-detail-text p {
  font-size: var(--font-size-base);
  color: var(--color-text);
  line-height: 1.5;
}

.contact-detail-text a:hover {
  color: var(--color-accent);
}

/* Contact form */
.contact-form-wrapper {
  padding: var(--space-8);
  background: var(--glass-card-bg);
  border: 1.5px solid var(--glass-card-border);
  border-radius: var(--radius-xl);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-card-shadow);
}

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

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

.form-label {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
}

/* Required field marker */
.form-label .required {
  color: var(--color-primary);
  margin-left: 2px;
}

.form-input,
.form-textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--glass-card-border);
  border-radius: var(--radius-md);
  transition:
    border-color var(--transition-base),
    background var(--transition-base),
    box-shadow var(--transition-base);
  /* Prevent iOS Safari from auto-zooming */
  font-size: max(1rem, 16px);
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: rgba(148, 163, 184, 0.5);
}

.form-input:hover,
.form-textarea:hover {
  border-color: rgba(59, 130, 246, 0.35);
}

.form-input:focus,
.form-textarea:focus {
  outline: none;
  border-color: #E8B84B;
  background: rgba(59, 130, 246, 0.05);
  box-shadow: 0 0 0 3px rgba(232, 184, 75, 0.22);
}

/* Invalid state — shown after first submit attempt */
.form-input.invalid,
.form-textarea.invalid {
  border-color: rgba(239, 68, 68, 0.6);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.form-error {
  font-size: var(--font-size-xs);
  color: #f87171;
  display: none;
}

.form-group.has-error .form-error {
  display: block;
}

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

.form-submit {
  width: 100%;
  justify-content: center;
  padding: 0.9rem;
}

/* Success message — shown after form submit */
.form-success {
  display: none;
  text-align: center;
  padding: var(--space-8);
  color: #4ade80;
  font-weight: 600;
}

.form-success.visible {
  display: block;
}

/* -----------------------------------------------------------------------------
   18. FOOTER
   ----------------------------------------------------------------------------- */
.site-footer {
  background: rgba(8, 16, 30, 0.95);
  border-top: 1px solid var(--glass-border);
  padding-top: var(--space-16);
  position: relative;
  z-index: 2;
}

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

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

@media (min-width: 1024px) {
  .footer-grid {
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--space-8);
  }
}

.footer-brand p {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: 1.7;
  margin-top: var(--space-4);
  max-width: 300px;
}

.footer-section-title {
  font-size: var(--font-size-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text);
  margin-bottom: var(--space-5);
}

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

.footer-link {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition-base);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.footer-link:hover {
  color: var(--color-accent);
}

/* Gold dot bullet before each footer link — consistent with brand dot motif */
.footer-link::before {
  content: '';
  width: 4px;
  height: 4px;
  background: var(--color-gold);
  border-radius: 50%;
  flex-shrink: 0;
}

.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.footer-contact-item svg {
  width: 16px;
  height: 16px;
  color: var(--color-primary);
  flex-shrink: 0;
  margin-top: 2px;
}

.footer-contact-item span {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: 1.5;
}

.footer-contact-item a {
  color: var(--color-text-muted);
  text-decoration: none;
}

.footer-contact-item a:hover {
  color: var(--color-accent);
}

.footer-bottom {
  margin-top: var(--space-12);
  padding-block: var(--space-6);
  border-top: 1px solid rgba(59, 130, 246, 0.08);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.footer-copyright {
  font-size: var(--font-size-xs);
  color: rgba(148, 163, 184, 0.6);
}

.footer-legal {
  display: flex;
  gap: var(--space-6);
}

.footer-legal a {
  font-size: var(--font-size-xs);
  color: rgba(148, 163, 184, 0.6);
  text-decoration: none;
  transition: color var(--transition-base);
}

.footer-legal a:hover {
  color: var(--color-accent);
}

/* -----------------------------------------------------------------------------
   19. 3D ROTATING CUBE — Service Preview Gallery
   Uses CSS 3D transforms with perspective() baked into the animation keyframes.
   The cube is a 6-image grid where all children stack on grid-area 1/1 and
   each face is rotated + translated outward by half the cube size.
   DO NOT MODIFY THIS SECTION — structural requirement.
   ----------------------------------------------------------------------------- */
.cube-section {
  background: transparent;
  overflow: visible;
  position: relative;
  z-index: 2;
}

.cube-header {
  text-align: center;
  margin-bottom: var(--space-16);
}

.cube-wrapper {
  display: grid;
  place-content: center;
  gap: var(--space-8);
  padding-block: calc(var(--space-16));
  position: relative;
  transform-style: preserve-3d;
}

/* Cube uses the exact same CSS pattern as the reference implementation.
   The --_p var holds perspective() and is referenced inside the @keyframes.
   The --_t var on each img holds that face's rotation; the trailing comma
   in var(--_t,) is intentional — it resolves to nothing for the first child. */
.cube-gallery {
  --s: 200px;

  display: grid;
  width: var(--s);
  height: var(--s);
  margin: 0 auto;
  transform-style: preserve-3d;
  --_p: perspective(calc(2.5*var(--s)));
  animation: cubeRotate 9s infinite cubic-bezier(.5,-.5,.5,1.5);
}

@media (min-width: 480px) {
  .cube-gallery { --s: 250px; }
}

@media (min-width: 768px) {
  .cube-gallery { --s: 300px; }
}

.cube-gallery img {
  grid-area: 1/1;
  width: var(--s);
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 2px solid var(--glass-card-border);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
  transform: var(--_t,) translateZ(calc(var(--s)/2));
  backface-visibility: hidden;
}

.cube-gallery img:nth-child(2) {--_t: rotateX(-90deg)}
.cube-gallery img:nth-child(3) {--_t: rotateY( 90deg)}
.cube-gallery img:nth-child(4) {--_t: rotateY(180deg)}
.cube-gallery img:nth-child(5) {--_t: rotateX( 90deg)}
.cube-gallery img:nth-child(6) {--_t: rotateY(-90deg)}

@keyframes cubeRotate {
  0%,3%   {transform: var(--_p) rotate3d(0, 0, 0, 0deg)}
  14%,19% {transform: var(--_p) rotate3d(-1, 1, 0, 180deg)}
  31%,36% {transform: var(--_p) rotate3d(0, -1, 0, 90deg)}
  47%,52% {transform: var(--_p) rotate3d(1, 0, 0, 90deg)}
  64%,69% {transform: var(--_p) rotate3d(1, 0, 0, -90deg)}
  81%,86% {transform: var(--_p) rotate3d(0, 1, 0, 90deg)}
  97%,100%{transform: var(--_p) rotate3d(0, 0, 0, 0deg)}
}

/* Labels beneath the cube — JS cycles them to match the visible face */
.cube-labels {
  text-align: center;
  min-height: 2rem;
}

.cube-label {
  display: none;
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-accent);
  letter-spacing: 0.02em;
}

.cube-label.cube-label-active {
  display: inline;
}

/* Glow behind the cube */
.cube-wrapper::before {
  content: '';
  position: absolute;
  width: 350px;
  height: 350px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.18) 0%, transparent 70%);
  filter: blur(60px);
  pointer-events: none;
  z-index: -1;
}

/* -----------------------------------------------------------------------------
   20. SCROLL REVEAL ANIMATIONS
   These classes are applied by the Intersection Observer in main.js.
   Initial state = hidden; .is-visible = revealed.
   All transitions use transform + opacity to stay on the GPU compositor thread.
   ----------------------------------------------------------------------------- */
.reveal-left,
.reveal-right,
.reveal-up {
  will-change: transform, opacity;
}

.reveal-left {
  opacity: 0;
  transform: translateX(-48px);
  transition:
    opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-right {
  opacity: 0;
  transform: translateX(48px);
  transition:
    opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-up {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-left.is-visible,
.reveal-right.is-visible,
.reveal-up.is-visible {
  opacity: 1;
  transform: translate(0, 0);
}

/* Staggered delay helpers (applied as inline style or utility classes) */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }

/* -----------------------------------------------------------------------------
   21. PREFERS-REDUCED-MOTION OVERRIDES
   Users who opt out of animations must receive an instant, accessible experience.
   Orb imgs remain visible but static. Canvas lightning is skipped in JS.
   Gradient shift animation is also disabled.
   ----------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  /* Stop the background gradient from animating — static position is fine */
  body::before {
    animation: none;
    background-position: 0% 50%;
  }

  /* Orbs stay visible but are locked in place — no floating motion */
  .bg-orb {
    animation: none !important;
  }
  .bg-orb--sm, .bg-orb--xs { will-change: auto; }

  /* Hero CSS gradient orbs */
  .hero-orb {
    animation: none;
  }

  .logo-dot {
    animation: none;
    opacity: 1;
  }

  .tool-badge-live::before {
    animation: none;
  }

  .cube-gallery {
    animation: none;
  }

  .reveal-left,
  .reveal-right,
  .reveal-up {
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
  }

  .testimonial-slide {
    transition: none;
  }

  /* Nuclear option — anything we missed */
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* -----------------------------------------------------------------------------
   Testimonial responsive padding (P1 fix #9)
   Reduces side padding on very small screens so text doesn't crowd the edges.
   ----------------------------------------------------------------------------- */
@media (max-width: 479px) {
  .testimonial-slide {
    padding: var(--space-6) var(--space-4);
  }
}

/* -----------------------------------------------------------------------------
   Contact form submitted state (P2 fix #10)
   Hides the form after a successful Formspree submission. The JS applies
   .is-submitted via classList; this replaces the old form.style.display = 'none'.
   ----------------------------------------------------------------------------- */
.contact-form.is-submitted {
  display: none;
}

/* -----------------------------------------------------------------------------
   Form error banner (P2 fix #12)
   Displayed when the Formspree POST returns a non-OK response.
   Uses display:none by default; JS sets display:block on failure.
   ----------------------------------------------------------------------------- */
.form-error-banner {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #f87171;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-4);
  display: none;
}

/* =============================================================================
   INTERIOR PAGES — Styles for services, about, contact, and sub-pages
   Added for: services.html, about.html, contact.html, services/*.html
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Page Hero (interior pages — not the homepage hero)
   ----------------------------------------------------------------------------- */
.page-hero {
  position: relative;
  padding: calc(var(--header-height) + var(--space-16)) 0 var(--space-16);
  text-align: center;
  overflow: hidden;
}

.page-hero--compact {
  padding-bottom: var(--space-12);
}

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

.page-hero-title {
  font-size: var(--font-size-4xl);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.15;
  margin-bottom: var(--space-4);
}

.page-hero-subtitle {
  font-size: var(--font-size-lg);
  color: var(--color-text-muted);
  line-height: 1.6;
  max-width: 600px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .page-hero {
    padding: calc(var(--header-height) + var(--space-20)) 0 var(--space-20);
  }
  .page-hero-title {
    font-size: var(--font-size-5xl);
  }
  .page-hero-subtitle {
    font-size: var(--font-size-xl);
  }
}

@media (min-width: 1024px) {
  .page-hero-title {
    font-size: var(--font-size-6xl);
  }
}

/* -----------------------------------------------------------------------------
   Breadcrumb Navigation
   ----------------------------------------------------------------------------- */
.breadcrumb {
  padding: calc(var(--header-height) + var(--space-4)) 0 0;
}

.breadcrumb-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.breadcrumb-list li:not(:last-child)::after {
  content: '/';
  margin-left: var(--space-2);
  color: var(--color-text-muted);
  opacity: 0.5;
}

.breadcrumb-list a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.breadcrumb-list a:hover,
.breadcrumb-list a:focus-visible {
  color: var(--color-gold);
}

/* Compact hero when breadcrumb is present */
.breadcrumb + .page-hero {
  padding-top: var(--space-8);
}

.breadcrumb + .page-hero--compact {
  padding-top: var(--space-6);
}

/* -----------------------------------------------------------------------------
   Services Overview Grid (services.html)
   ----------------------------------------------------------------------------- */
.services-overview {
  padding: var(--space-16) 0;
}

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

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

@media (min-width: 1024px) {
  .services-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);
  }
}

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

/* Service Card — glassmorphism */
.service-card {
  background: var(--glass-card-bg);
  border: 1.5px solid var(--glass-card-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 40px rgba(59, 130, 246, 0.12), 0 0 20px var(--color-gold-glow);
  border-color: var(--color-gold);
}

@media (prefers-reduced-motion: reduce) {
  .service-card:hover {
    transform: none;
  }
}

.service-card-icon {
  width: 48px;
  height: 48px;
  color: var(--color-gold);
}

.service-card-icon svg {
  width: 100%;
  height: 100%;
}

.service-card-title {
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--color-text);
}

.service-card-desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
  flex: 1;
}

.service-card-cta {
  margin-top: auto;
  font-size: var(--font-size-sm);
}

/* -----------------------------------------------------------------------------
   CTA Banner
   ----------------------------------------------------------------------------- */
.cta-banner {
  padding: var(--space-16) 0;
}

.cta-banner-inner {
  background: var(--glass-card-bg);
  border: 1px solid var(--glass-card-border);
  border-radius: var(--radius-xl);
  padding: var(--space-12) var(--space-8);
  text-align: center;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

.cta-banner-inner h2 {
  font-size: var(--font-size-3xl);
  color: var(--color-text);
  margin-bottom: var(--space-3);
}

.cta-banner-inner p {
  color: var(--color-text-muted);
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-6);
}

.cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: center;
}

@media (min-width: 768px) {
  .cta-banner-inner {
    padding: var(--space-16) var(--space-12);
  }
  .cta-banner-inner h2 {
    font-size: var(--font-size-4xl);
  }
}

/* -----------------------------------------------------------------------------
   About Page — Stats Bar
   ----------------------------------------------------------------------------- */
.stats-bar {
  padding: var(--space-12) 0;
  border-bottom: 1px solid var(--glass-border);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-8);
  text-align: center;
}

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

.stat-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.stat-number {
  font-size: var(--font-size-4xl);
  font-weight: 700;
  color: var(--color-gold);
  line-height: 1;
}

.stat-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* -----------------------------------------------------------------------------
   About Page — Mission / Content Blocks
   ----------------------------------------------------------------------------- */
.about-mission,
.about-timeline,
.about-values,
.about-team {
  padding: var(--space-16) 0;
}

.about-content-block {
  max-width: 720px;
}

.about-text-lg {
  font-size: var(--font-size-lg);
  color: var(--color-text);
  line-height: 1.7;
  margin-bottom: var(--space-4);
}

.about-text {
  font-size: var(--font-size-base);
  color: var(--color-text-muted);
  line-height: 1.7;
  margin-bottom: var(--space-4);
}

.section-heading {
  font-size: var(--font-size-3xl);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-6);
}

.section-subtitle {
  font-size: var(--font-size-lg);
  color: var(--color-text-muted);
  max-width: 600px;
  margin-bottom: var(--space-8);
  margin-inline: auto;
}

.section-subtitle.text-center {
  margin-left: auto;
  margin-right: auto;
}

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

@media (min-width: 768px) {
  .section-heading {
    font-size: var(--font-size-4xl);
  }
}

/* -----------------------------------------------------------------------------
   About Page — Timeline
   ----------------------------------------------------------------------------- */
.timeline {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
  padding-left: var(--space-8);
}

.timeline::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--color-gold), var(--color-primary), var(--color-gold));
  opacity: 0.4;
}

.timeline-item {
  position: relative;
  padding-bottom: var(--space-10);
}

.timeline-item:last-child {
  padding-bottom: 0;
}

.timeline-marker {
  position: absolute;
  left: calc(-1 * var(--space-8) - 5px);
  top: 4px;
  width: 12px;
  height: 12px;
  background: var(--color-gold);
  border-radius: var(--radius-full);
  box-shadow: 0 0 12px var(--color-gold-glow);
}

.timeline-content {
  background: var(--glass-card-bg);
  border: 1px solid var(--glass-card-border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

.timeline-year {
  display: inline-block;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-gold);
  background: rgba(232, 184, 75, 0.12);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-3);
}

.timeline-title {
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.timeline-content p {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
}

@media (min-width: 768px) {
  .timeline {
    padding-left: var(--space-12);
  }
  .timeline-marker {
    left: calc(-1 * var(--space-12) - 5px);
  }
}

/* -----------------------------------------------------------------------------
   About Page — Values Grid
   ----------------------------------------------------------------------------- */
.values-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin-top: var(--space-8);
}

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

.value-card {
  background: var(--glass-card-bg);
  border: 1px solid var(--glass-card-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  text-align: center;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  transition: border-color var(--transition-base);
}

.value-card:hover {
  border-color: var(--color-gold);
}

.value-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto var(--space-4);
  color: var(--color-gold);
}

.value-icon svg {
  width: 100%;
  height: 100%;
}

.value-card h3 {
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-3);
}

.value-card p {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* -----------------------------------------------------------------------------
   About Page — Team Grid
   ----------------------------------------------------------------------------- */
.team-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  max-width: 800px;
  margin: 0 auto;
}

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

.team-card {
  background: var(--glass-card-bg);
  border: 1px solid var(--glass-card-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  text-align: center;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

.team-avatar {
  width: 80px;
  height: 80px;
  margin: 0 auto var(--space-4);
  color: var(--color-accent);
  background: var(--glass-bg);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2);
}

.team-avatar svg {
  width: 100%;
  height: 100%;
}

.team-card h3 {
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-1);
}

.team-role {
  font-size: var(--font-size-sm);
  color: var(--color-gold);
  font-weight: 500;
  margin-bottom: var(--space-3);
}

.team-bio {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* -----------------------------------------------------------------------------
   Contact Page — Layout
   ----------------------------------------------------------------------------- */
.contact-section {
  padding: var(--space-16) 0;
}

.contact-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
}

@media (min-width: 768px) {
  .contact-layout {
    grid-template-columns: 1.2fr 1fr;
    gap: var(--space-12);
  }
}

.contact-form-wrapper .section-heading {
  margin-bottom: var(--space-6);
}

/* Form optional label style */
.form-optional {
  font-weight: 400;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

/* Contact Info Sidebar */
.contact-info-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.contact-info-card {
  background: var(--glass-card-bg);
  border: 1px solid var(--glass-card-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  transition: border-color var(--transition-base);
}

.contact-info-card:hover {
  border-color: var(--color-gold);
}

.contact-info-icon {
  width: 24px;
  height: 24px;
  color: var(--color-gold);
  margin-bottom: var(--space-2);
}

.contact-info-icon svg {
  width: 100%;
  height: 100%;
}

.contact-info-card h3 {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-1);
}

.contact-info-value {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: 1.5;
  text-decoration: none;
  display: block;
}

a.contact-info-value:hover,
a.contact-info-value:focus-visible {
  color: var(--color-gold);
}

.contact-info-value strong {
  color: var(--color-gold);
}

/* Map Placeholder */
.contact-map-placeholder {
  background: var(--glass-card-bg);
  border: 1px solid var(--glass-card-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.map-placeholder-inner {
  padding: var(--space-8);
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  min-height: 180px;
  justify-content: center;
}

.map-placeholder-inner svg {
  color: var(--color-gold);
  opacity: 0.6;
}

.map-placeholder-inner strong {
  color: var(--color-text);
}

/* -----------------------------------------------------------------------------
   Service Detail Page Layout (services/*.html)
   ----------------------------------------------------------------------------- */
.service-detail {
  padding: var(--space-16) 0;
}

.service-detail-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
}

@media (min-width: 768px) {
  .service-detail-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
    align-items: start;
  }
}

.service-detail-content {
  max-width: 560px;
}

/* Feature Cards Grid */
.service-features {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

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

.feature-card {
  background: var(--glass-card-bg);
  border: 1px solid var(--glass-card-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  transition: border-color var(--transition-base);
}

.feature-card:hover {
  border-color: var(--color-gold);
}

.feature-card h3 {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.feature-card p {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: 1.5;
}

/* Why Choose Grid */
.why-choose {
  padding: var(--space-16) 0;
  border-top: 1px solid var(--glass-border);
}

.why-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin-top: var(--space-8);
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

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

.why-item {
  text-align: center;
}

.why-item strong {
  display: block;
  font-size: var(--font-size-lg);
  color: var(--color-gold);
  margin-bottom: var(--space-2);
}

.why-item p {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* -----------------------------------------------------------------------------
   Support Page — Steps
   ----------------------------------------------------------------------------- */
.support-steps {
  margin-top: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.support-step {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}

.step-number {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(232, 184, 75, 0.15);
  color: var(--color-gold);
  font-weight: 700;
  font-size: var(--font-size-lg);
  border-radius: var(--radius-full);
  border: 1px solid rgba(232, 184, 75, 0.3);
}

.support-step h3 {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-1);
}

.support-step p {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: 1.5;
}

/* -----------------------------------------------------------------------------
   Active nav link styles (for interior pages)
   ----------------------------------------------------------------------------- */
.nav-link.active {
  color: var(--color-gold);
}

.mobile-nav-link[aria-current="page"] {
  color: var(--color-gold);
}