/* ============================================================
   VASUDHA INNOVATIVE ENGINEERING — Homepage V2
   style.css | Premium Industrial Dark Theme
   Rev 2 — Typography, 100vh hero, About, Industries
   ============================================================ */

/* ── Google Fonts ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400&family=Inter:wght@300;400;500;600&family=Barlow+Condensed:wght@500;600;700;800;900&display=swap');

/* ── CSS Custom Properties ────────────────────────────────── */
:root {
  /* Colors — 60/30/10 rule */
  --clr-bg: #080809;
  /* 60% dominant */
  --clr-surface: #0f0f11;
  --clr-surface-2: #16161a;
  --clr-surface-3: #1c1c21;
  --clr-border: rgba(255, 255, 255, 0.07);
  --clr-border-mid: rgba(255, 255, 255, 0.12);
  --clr-border-glow: rgba(251, 115, 20, 0.3);

  --clr-orange: #f97316;
  /* 10% accent — CTAs only */
  --clr-orange-dim: #c85d0d;
  --clr-orange-glow: rgba(249, 115, 22, 0.16);
  --clr-orange-glow-strong: rgba(249, 115, 22, 0.28);
  --clr-orange-light: #fed7aa;
  --clr-amber: #fbbf24;

  --clr-white: #ffffff;
  --clr-white-95: rgba(255, 255, 255, 0.95);
  --clr-white-70: rgba(255, 255, 255, 0.70);
  --clr-white-45: rgba(255, 255, 255, 0.45);
  --clr-white-20: rgba(255, 255, 255, 0.20);
  --clr-white-10: rgba(255, 255, 255, 0.10);
  --clr-white-05: rgba(255, 255, 255, 0.05);

  /* ── Typography — premium industrial system ── */
  /* Display: Inter Tight for clean, engineered headings */
  --font-display: 'Inter Tight', 'Barlow Condensed', system-ui, sans-serif;
  /* Body: Inter for precision UI text */
  --font-body: 'Inter', system-ui, sans-serif;
  /* Condensed: Barlow Condensed for stat/label accents */
  --font-condensed: 'Barlow Condensed', 'Inter Tight', sans-serif;

  /* Spacing */
  --space-xs: 0.375rem;
  --space-sm: 0.75rem;
  --space-md: 1.25rem;
  --space-lg: 2rem;
  --space-xl: 3.5rem;
  --space-2xl: 5.5rem;
  --space-3xl: 8rem;

  /* Radius */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 9999px;

  /* Transitions */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms;
  --dur-mid: 420ms;
  --dur-slow: 700ms;

  /* Shadows */
  --shadow-orange-sm: 0 0 18px rgba(249, 115, 22, 0.18);
  --shadow-orange-lg: 0 0 50px rgba(249, 115, 22, 0.28);
  --shadow-dark-sm: 0 4px 20px rgba(0, 0, 0, 0.5);
  --shadow-dark-lg: 0 20px 60px rgba(0, 0, 0, 0.65);
  --shadow-card: 0 8px 40px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.04);

  /* Layout */
  --nav-height: 72px;
  --max-w: 1360px;
  --page-x: clamp(1.25rem, 5vw, 4rem);
}

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

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-body);
  background: var(--clr-bg);
  color: var(--clr-white);
  overflow-x: hidden;
}

/* Film-grain noise overlay */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 9999;
  opacity: 0.3;
  mix-blend-mode: overlay;
}

/* Section reveal base */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.8s var(--ease-expo), transform 0.8s var(--ease-expo);
}

.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.8s var(--ease-expo), transform 0.8s var(--ease-expo);
}

.reveal-left.in-view {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.8s var(--ease-expo), transform 0.8s var(--ease-expo);
}

.reveal-right.in-view {
  opacity: 1;
  transform: translateX(0);
}

/* Stagger delays */
.stagger-1 {
  transition-delay: 0.1s;
}

.stagger-2 {
  transition-delay: 0.2s;
}

.stagger-3 {
  transition-delay: 0.3s;
}

.stagger-4 {
  transition-delay: 0.4s;
}

.stagger-5 {
  transition-delay: 0.5s;
}

.stagger-6 {
  transition-delay: 0.6s;
}


/* ══════════════════════════════════════════════════════════
   NAVBAR
══════════════════════════════════════════════════════════ */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  padding: 0 var(--page-x);
  transition: background var(--dur-mid) var(--ease-out),
    backdrop-filter var(--dur-mid) var(--ease-out),
    box-shadow var(--dur-mid) var(--ease-out);
}

.navbar.transparent {
  background: transparent;
  backdrop-filter: none;
}

.navbar.scrolled {
  background: rgba(8, 8, 9, 0.82);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  box-shadow: 0 1px 0 var(--clr-border), 0 4px 24px rgba(0, 0, 0, 0.5);
}

.navbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
}

/* Logo */
.navbar__logo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-decoration: none;
  flex-shrink: 0;
}

.navbar__logo-name {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--clr-white);
  letter-spacing: -0.035em;
  line-height: 1;
  transition: color var(--dur-fast);
}

.navbar__logo-name span {
  color: var(--clr-orange);
}

.navbar__logo-tag {
  font-family: var(--font-body);
  font-size: 0.5625rem;
  font-weight: 500;
  color: var(--clr-white-45);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.navbar__logo:hover .navbar__logo-name {
  color: var(--clr-orange-light);
}

/* Nav links */
.navbar__links {
  display: flex;
  align-items: center;
  gap: 2rem;
  list-style: none;
}

.navbar__links a {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--clr-white-45);
  text-decoration: none;
  letter-spacing: 0.02em;
  position: relative;
  padding-bottom: 3px;
  transition: color var(--dur-fast);
}

.navbar__links a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--clr-orange);
  transition: width var(--dur-mid) var(--ease-out);
}

.navbar__links a:hover,
.navbar__links a[aria-current="page"] {
  color: var(--clr-white-95);
}

.navbar__links a:hover::after,
.navbar__links a[aria-current="page"]::after {
  width: 100%;
}

/* Nav CTA */
.navbar__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 20px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(249, 115, 22, 0.45);
  background: var(--clr-orange-glow);
  color: var(--clr-orange);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--dur-fast);
  flex-shrink: 0;
}

.navbar__cta:hover {
  background: var(--clr-orange);
  border-color: var(--clr-orange);
  color: var(--clr-white);
  box-shadow: var(--shadow-orange-sm), 0 0 24px rgba(249, 115, 22, 0.25);
  transform: translateY(-1px);
}

/* Hamburger */
.navbar__hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  border: none;
  background: var(--clr-white-05);
  border-radius: var(--radius-sm);
  cursor: pointer;
  padding: 8px;
  transition: background var(--dur-fast);
}

.navbar__hamburger span {
  display: block;
  width: 100%;
  height: 1.5px;
  background: var(--clr-white-45);
  border-radius: 2px;
  transition: transform var(--dur-mid) var(--ease-out), opacity var(--dur-fast);
  transform-origin: center;
}

.navbar__hamburger:hover {
  background: var(--clr-white-10);
}

.navbar__hamburger.open span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
  background: var(--clr-orange);
}

.navbar__hamburger.open span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.navbar__hamburger.open span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
  background: var(--clr-orange);
}

/* Mobile menu */
.navbar__mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(8, 8, 9, 0.97);
  backdrop-filter: blur(28px);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-lg);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-mid) var(--ease-out);
}

.navbar__mobile-menu.open {
  opacity: 1;
  pointer-events: auto;
}

.navbar__mobile-menu .nav-mobile-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}

.navbar__mobile-menu .nav-mobile-links a {
  font-family: var(--font-display);
  font-size: clamp(2rem, 9vw, 3.5rem);
  font-weight: 800;
  color: var(--clr-white-45);
  text-decoration: none;
  letter-spacing: -0.035em;
  transition: color var(--dur-fast);
}

.navbar__mobile-menu .nav-mobile-links a:hover {
  color: var(--clr-orange);
}

.mobile-close {
  position: absolute;
  top: 24px;
  right: var(--page-x);
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--clr-white-05);
  border: none;
  border-radius: 50%;
  color: var(--clr-white-45);
  cursor: pointer;
  font-size: 1.1rem;
  transition: background var(--dur-fast), color var(--dur-fast);
}

.mobile-close:hover {
  background: var(--clr-orange-glow);
  color: var(--clr-orange);
}

/* ══════════════════════════════════════════════════════════
   HERO SECTION — 100vh, everything above the fold
══════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--clr-bg);
}

/* ── Background Image ── */
.hero__bg {
  position: absolute;
  inset: -40px;
  /* Prevents edges showing during parallax */
  z-index: 0;
}

.hero__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  transform: scale(1.06);
  animation: heroImgDrift 22s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes heroImgDrift {
  0% {
    transform: scale(1.06) translate(0, 0);
  }

  50% {
    transform: scale(1.06) translate(-6px, -3px);
  }

  100% {
    transform: scale(1.06) translate(5px, -6px);
  }
}

/* Heavy cinematic grade overlay — dark left, lighter right */
.hero__bg-gradient {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(8, 8, 9, 0.90) 0%, rgba(8, 8, 9, 0.45) 55%, rgba(8, 8, 9, 0.10) 100%),
    linear-gradient(to bottom, rgba(8, 8, 9, 0.60) 0%, rgba(8, 8, 9, 0.05) 35%, rgba(8, 8, 9, 0.40) 70%, rgba(8, 8, 9, 0.97) 100%);
}

/* Additional warm depth layer */
.hero__bg-warmth {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 70% 55%, rgba(180, 80, 10, 0.18) 0%, transparent 70%);
  pointer-events: none;
}

/* Ambient pulsing glow — bottom-left, mimics furnace */
.hero__ambient-glow {
  position: absolute;
  bottom: -100px;
  left: -120px;
  width: 700px;
  height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(249, 115, 22, 0.10) 0%, transparent 65%);
  animation: glowPulse 6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes glowPulse {

  0%,
  100% {
    opacity: 0.6;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.15);
  }
}

/* Vignette */
.hero__vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 90% 90% at 50% 50%, transparent 40%, rgba(0, 0, 0, 0.55) 100%);
  pointer-events: none;
}

/* Particle canvas */
#particle-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* ── Main hero layout — fits in 100vh ── */
.hero__layout {
  position: relative;
  z-index: 2;
  flex: 1;
  display: grid;
  grid-template-columns: 55fr 45fr;
  align-items: center;
  gap: clamp(2rem, 4vw, 4rem);
  max-width: var(--max-w);
  width: 100%;
  margin: 0 auto;
  padding: calc(var(--nav-height) + 4rem) var(--page-x) clamp(8rem, 15vh, 12rem);
}

/* Cinematic solo variant — left-aligned editorial layout */
.hero__layout--solo {
  grid-template-columns: 1fr;
  max-width: var(--max-w);
  margin: 0 auto;
  padding-left: var(--page-x);
  padding-right: 44%;
  padding-bottom: clamp(6rem, 14vh, 10rem);
  align-items: flex-end;
}

.hero__layout--solo .hero__content {
  max-width: 640px;
}

.hero__layout--solo .hero__headline {
  font-size: clamp(3rem, 5.5vw, 5.5rem);
}

/* Minimal scroll line bottom indicator */
.hero__scroll-line-only {
  position: absolute;
  bottom: 2.5rem;
  left: var(--page-x);
  z-index: 3;
  opacity: 0;
  animation: fadeUp var(--dur-slow) var(--ease-expo) 1.4s forwards;
}

/* ── Left: Text Content ── */
.hero__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}



/* Headline — Inter Tight for clean, engineered look */
.hero__headline {
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 5.5vw, 5.25rem);
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -0.04em;
  color: var(--clr-white);
  opacity: 0;
  transform: translateY(26px);
  animation: fadeUp var(--dur-slow) var(--ease-expo) 0.45s forwards;
}

.hero__headline-line {
  display: block;
  margin-left: -100px;
}

.hero__headline-accent {
  display: block;
  margin-left: -100px;
  background: linear-gradient(120deg, var(--clr-orange) 0%, var(--clr-amber) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-style: normal;
}

/* Subheading */
.hero__sub {
  font-family: var(--font-body);
  margin-left: -100px;
  font-size: clamp(0.9rem, 1.3vw, 1.0625rem);
  font-weight: 400;
  line-height: 1.75;
  color: var(--clr-white-45);
  max-width: 440px;
  opacity: 0;
  transform: translateY(18px);
  animation: fadeUp var(--dur-slow) var(--ease-expo) 0.65s forwards;
}

/* CTA row */
.hero__cta-row {
  display: flex;
  margin-left: -100px;
  margin-bottom: -50px;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  padding-top: var(--space-xs);
  opacity: 0;
  transform: translateY(18px);
  animation: fadeUp var(--dur-slow) var(--ease-expo) 0.82s forwards;
}

/* Primary CTA — orange, pill, glow */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  border: none;
  background: linear-gradient(135deg, var(--clr-orange) 0%, var(--clr-orange-dim) 100%);
  color: var(--clr-white);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: transform var(--dur-fast), box-shadow var(--dur-fast);
  box-shadow: 0 4px 16px rgba(249, 115, 22, 0.32);
}

.btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, transparent 55%);
  opacity: 0;
  transition: opacity var(--dur-fast);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(249, 115, 22, 0.5), 0 0 50px rgba(249, 115, 22, 0.18);
}

.btn-primary:hover::before {
  opacity: 1;
}

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

.btn-primary .btn-arrow {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform var(--dur-fast);
}

.btn-primary:hover .btn-arrow {
  transform: translateX(3px);
}

/* Secondary ghost CTA */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--clr-border-mid);
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(10px);
  color: var(--clr-white-70);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--dur-fast);
}

.btn-secondary:hover {
  border-color: rgba(255, 255, 255, 0.28);
  color: var(--clr-white);
  background: var(--clr-white-10);
  transform: translateY(-2px);
}

/* ── Mouse parallax utility ─────────────────────────────── */
.parallax-layer {
  will-change: transform;
}

/* ══════════════════════════════════════════════════════════
   SHARED COMPONENT: btn-ghost-link, svc-tag, btn-sm
══════════════════════════════════════════════════════════ */

/* Subtle text link with trailing arrow */
.btn-ghost-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--clr-white-45);
  text-decoration: none;
  transition: color var(--dur-fast), gap var(--dur-mid) var(--ease-expo);
}

.btn-ghost-link:hover {
  color: var(--clr-orange);
  gap: 12px;
}

/* Small button variant */
.btn-sm {
  padding: 11px 22px !important;
  font-size: 0.8125rem !important;
}

/* Tag/chip inside service and product panels */
.svc-tag {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--clr-border-mid);
  background: var(--clr-white-05);
  font-family: var(--font-body);
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--clr-white-45);
  transition: border-color var(--dur-fast), color var(--dur-fast), background var(--dur-fast);
}

/* ══════════════════════════════════════════════════════════
   SERVICES SECTION
   Design: accordion-style reveal panels, editorial layout
══════════════════════════════════════════════════════════ */
#services {
  position: relative;
  background: var(--clr-bg);
  padding: clamp(5rem, 10vh, 8rem) 0;
  overflow: hidden;
}

/* Subtle top separator line */
#services::before {
  content: '';
  position: absolute;
  top: 0;
  left: var(--page-x);
  right: var(--page-x);
  height: 1px;
  background: linear-gradient(to right, transparent, var(--clr-border), transparent);
}

.svc-section__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--page-x);
}

/* Header: left heading · right sub+link */
.svc-section__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: var(--space-xl);
  gap: var(--space-xl);
}

.svc-section__heading {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4vw, 3.75rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.05;
  color: var(--clr-white);
  margin-top: var(--space-md);
}

.svc-section__heading em {
  font-style: normal;
  background: linear-gradient(120deg, var(--clr-orange), var(--clr-amber));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.svc-section__header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-md);
  flex-shrink: 0;
  max-width: 280px;
  text-align: right;
}

.svc-section__sub {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--clr-white-45);
  line-height: 1.65;
}

/* ── Service accordion panels ── */
.svc-panels {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--clr-border);
}

/* Individual panel row */
.svc-panel {
  border-bottom: 1px solid var(--clr-border);
  overflow: hidden;
  cursor: pointer;
  position: relative;
}

/* Orange progress bar at very bottom of each panel */
.svc-panel__progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, var(--clr-orange), var(--clr-amber));
  border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
  transition: width 0.6s var(--ease-expo);
  pointer-events: none;
}

.svc-panel.open .svc-panel__progress {
  width: 100%;
}

/* Two-column track: left text · right image */
.svc-panel__track {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

/* ── Left side ── */
.svc-panel__left {
  padding: 2rem var(--space-lg) 2rem 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* Index number */
.svc-panel__num {
  font-family: var(--font-condensed);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--clr-orange);
  text-transform: uppercase;
}

/* Title + arrow row */
.svc-panel__title-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.svc-panel__title {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 2.2vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--clr-white-70);
  line-height: 1.1;
  transition: color var(--dur-fast);
}

.svc-panel:hover .svc-panel__title,
.svc-panel.open .svc-panel__title {
  color: var(--clr-white);
}

/* Arrow icon rotates on open */
.svc-panel__arrow-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--clr-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-white-45);
  flex-shrink: 0;
  transition: background var(--dur-fast), border-color var(--dur-fast),
    color var(--dur-fast), transform var(--dur-mid) var(--ease-expo);
}

.svc-panel:hover .svc-panel__arrow-icon {
  background: var(--clr-orange-glow);
  border-color: var(--clr-border-glow);
  color: var(--clr-orange);
}

.svc-panel.open .svc-panel__arrow-icon {
  background: var(--clr-orange);
  border-color: var(--clr-orange);
  color: var(--clr-white);
  transform: rotate(90deg);
}

/* Expandable body */
.svc-panel__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.55s var(--ease-expo),
    opacity 0.4s var(--ease-out),
    padding 0.4s var(--ease-out);
}

.svc-panel.open .svc-panel__body {
  max-height: 320px;
  opacity: 1;
  padding-top: var(--space-md);
}

.svc-panel__desc {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--clr-white-45);
  line-height: 1.75;
  max-width: 460px;
}

.svc-panel__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.svc-panel.open .svc-tag {
  border-color: var(--clr-border-glow);
  color: var(--clr-orange);
  background: var(--clr-orange-glow);
}

.svc-panel__cta-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding-bottom: var(--space-md);
}

/* ── Right side: image ── */
.svc-panel__right {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.55s var(--ease-expo), opacity 0.4s var(--ease-out);
  border-left: 1px solid var(--clr-border);
}

.svc-panel.open .svc-panel__right {
  max-height: 380px;
  opacity: 1;
}

.svc-panel__img-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.svc-panel__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
  filter: saturate(0.65) contrast(1.1);
  transform: scale(1.06);
  transition: transform 0.7s var(--ease-expo), filter 0.5s ease;
}

.svc-panel.open .svc-panel__img-wrap img {
  transform: scale(1);
  filter: saturate(0.85) contrast(1.05);
}

/* Dark gradient overlay on image */
.svc-panel__img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(8, 8, 9, 0.45) 0%, rgba(8, 8, 9, 0.0) 70%),
    linear-gradient(to top, rgba(8, 8, 9, 0.6) 0%, transparent 50%);
  pointer-events: none;
}

/* Orange glow on image edge */
.svc-panel__img-glow {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 80px;
  background: linear-gradient(to right, rgba(249, 115, 22, 0.06), transparent);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-mid) var(--ease-out);
}

.svc-panel.open .svc-panel__img-glow {
  opacity: 1;
}


/* ══════════════════════════════════════════════════════════
   PROCESS SECTION — 4-step horizontal flow
══════════════════════════════════════════════════════════ */
#process {
  position: relative;
  background: var(--clr-surface);
  padding: var(--space-2xl) var(--page-x);
  overflow: hidden;
}

/* Ambient glow */
#process::after {
  content: '';
  position: absolute;
  bottom: -100px;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(249, 115, 22, 0.04) 0%, transparent 70%);
  pointer-events: none;
}

.process__inner {
  max-width: var(--max-w);
  margin: 0 auto;
}

.process__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: var(--space-xl);
  gap: var(--space-lg);
}

.process__heading {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 3.25rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.05;
  color: var(--clr-white);
  margin-top: var(--space-md);
}

.process__heading em {
  font-style: normal;
  background: linear-gradient(120deg, var(--clr-orange), var(--clr-amber));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* 4-step horizontal flex row */
.process__steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  position: relative;
}

/* The horizontal connecting line between all steps */
.process__steps::before {
  content: '';
  position: absolute;
  top: 1.75rem;
  /* vertically centred with the number circle */
  left: calc(1.75rem / 2);
  right: calc(1.75rem / 2);
  height: 1px;
  background: linear-gradient(to right, var(--clr-border) 0%, var(--clr-border-mid) 50%, var(--clr-border) 100%);
  z-index: 0;
}

/* Individual step */
.process-step {
  position: relative;
  padding: 0 1.5rem 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.process-step:last-child {
  padding-right: 0;
}

/* Step number bubble */
.process-step__num {
  position: relative;
  z-index: 1;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border-mid);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-condensed);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--clr-orange);
  flex-shrink: 0;
  transition: background var(--dur-mid), border-color var(--dur-mid),
    box-shadow var(--dur-mid);
}

.process-step:hover .process-step__num {
  background: var(--clr-orange-glow);
  border-color: var(--clr-border-glow);
  box-shadow: 0 0 24px rgba(249, 115, 22, 0.2);
}

/* Hide the old connector div — line is on parent */
.process-step__connector {
  display: none;
}

/* Card — icon + heading + body */
.process-step__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: 1.5rem 0 0;
}

.process-step__icon {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  background: var(--clr-white-05);
  border: 1px solid var(--clr-border);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur-fast), border-color var(--dur-fast);
}

.process-step:hover .process-step__icon {
  background: var(--clr-orange-glow);
  border-color: var(--clr-border-glow);
}

.process-step__icon svg {
  width: 18px;
  height: 18px;
  color: var(--clr-white-45);
  transition: color var(--dur-fast);
}

.process-step:hover .process-step__icon svg {
  color: var(--clr-orange);
}

.process-step__title {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.3vw, 1.125rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--clr-white);
  line-height: 1.2;
}

.process-step__body {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: var(--clr-white-45);
  line-height: 1.65;
}

/* Process responsive */
@media (max-width: 1024px) {
  .process__steps {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xl) var(--space-lg);
  }

  .process__steps::before {
    display: none;
  }
}

@media (max-width: 600px) {
  .process__steps {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .process__header {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE ADDITIONS — Services
══════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  .svc-section__header {
    flex-direction: column;
    align-items: flex-start;
  }

  .svc-section__header-right {
    align-items: flex-start;
    text-align: left;
    max-width: 100%;
  }

  .svc-panel__track {
    grid-template-columns: 1fr;
  }

  .svc-panel__right {
    border-left: none;
    border-top: 1px solid var(--clr-border);
  }

  .svc-panel.open .svc-panel__right {
    max-height: 260px;
  }
}

@media (max-width: 600px) {
  .svc-section__header {
    margin-bottom: var(--space-xl);
  }

  .svc-panel__left {
    padding: 1.5rem 0 1.5rem 0;
  }

  .svc-panel.open .svc-panel__right {
    max-height: 200px;
  }

  .svc-panel__cta-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .btn-sm {
    width: 100%;
    justify-content: center;
  }
}

/* Shared keyframes */
@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ══════════════════════════════════════════════════════════
   ABOUT SECTION
══════════════════════════════════════════════════════════ */
#about {
  position: relative;
  padding: clamp(6rem, 10vh, 9rem) var(--page-x) clamp(5rem, 9vh, 8rem);
  background: var(--clr-bg);
  overflow: hidden;
}

/* Gradient fade divider — bottom of about, into industries */
#about::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: var(--page-x);
  right: var(--page-x);
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.07) 30%, rgba(255,255,255,0.07) 70%, transparent);
  pointer-events: none;
}

/* Large decorative number */
.about__deco-num {
  position: absolute;
  top: -0.1em;
  right: -0.05em;
  font-family: var(--font-condensed);
  font-size: clamp(12rem, 22vw, 22rem);
  font-weight: 900;
  line-height: 1;
  color: rgba(255, 255, 255, 0.018);
  letter-spacing: -0.05em;
  pointer-events: none;
  user-select: none;
}

/* Asymmetric split layout */
.about__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 6vw, 7rem);
  align-items: stretch;
  max-width: var(--max-w);
  margin: 0 auto;
}

/* Left: Main heading block */
.about__left {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.about__heading {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 4vw, 3.75rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.05;
  color: var(--clr-white);
  margin-bottom: var(--space-md);
}

.about__heading em {
  font-style: normal;
  background: linear-gradient(120deg, var(--clr-orange) 0%, var(--clr-amber) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.about__accent-line {
  width: 48px;
  height: 2px;
  background: linear-gradient(90deg, var(--clr-orange), transparent);
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-lg);
}

/* Right: Text + visual block */
.about__right {
  display: flex;
  align-items: stretch;
}

.about__desc {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.about__body {
  font-family: var(--font-body);
  font-size: clamp(0.9375rem, 1.2vw, 1.0625rem);
  font-weight: 400;
  line-height: 1.7;
  color: var(--clr-white-45);
}

.about__body strong {
  color: var(--clr-white-70);
  font-weight: 600;
}

/* Image reveal — masked with clip-path */
.about__img-wrap {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  width: 100%;
  height: 100%;
  min-height: 460px;
  background: var(--clr-surface-2);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.about__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: saturate(0.7) contrast(1.1);
  transition: filter 0.5s ease, transform 0.8s var(--ease-expo);
}

.about__img-wrap:hover img {
  filter: saturate(0.9) contrast(1.05);
  transform: scale(1.03);
}

/* Subtle inner border for depth */
.about__img-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════════
   INDUSTRIES SECTION — refined compact layout
══════════════════════════════════════════════════════════ */
#industries {
  position: relative;
  padding: clamp(6rem, 10vh, 9rem) var(--page-x);
  background: var(--clr-surface);
  overflow: hidden;
}

/* Gradient fade divider — bottom of industries */
#industries::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(to bottom, transparent, rgba(8,8,9,0.6));
  pointer-events: none;
  z-index: 0;
}

/* Ambient background glow */
#industries::before {
  content: '';
  position: absolute;
  top: -200px;
  right: -200px;
  width: 700px;
  height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(249, 115, 22, 0.06) 0%, transparent 65%);
  pointer-events: none;
}

.industries__inner {
  max-width: var(--max-w);
  margin: 0 auto;
}

/* Header */
.industries__header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: var(--space-xl);
}

.industries__heading {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4vw, 3.75rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.05;
  color: var(--clr-white);
}

.industries__heading em {
  font-style: normal;
  background: linear-gradient(120deg, var(--clr-orange) 0%, var(--clr-amber) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Card grid — 3×2 layout with gaps */
.industries__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  background: transparent;
}

/* Industry card — icon at top, content at bottom, FIXED height */
.ind-card {
  position: relative;
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-lg);
  overflow: hidden;
  padding: 2rem 1.75rem;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem;
  cursor: default;
  transition:
    background 0.3s ease,
    border-color 0.3s ease,
    transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
    box-shadow 0.3s ease;
}

.ind-card:hover {
  background: rgba(255, 255, 255, 0.035);
  border-color: rgba(255, 255, 255, 0.12);
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}

/* Icon container */
.ind-card__icon-wrap {
  position: relative;
  width: 46px;
  height: 46px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  flex-shrink: 0;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.ind-card:hover .ind-card__icon-wrap {
  background: rgba(249, 115, 22, 0.08);
  border-color: rgba(249, 115, 22, 0.3);
  transform: scale(1.05) translateY(-2px);
}

.ind-card__icon {
  width: 22px;
  height: 22px;
  color: var(--clr-white-45);
  transition: color 0.3s ease;
}

.ind-card:hover .ind-card__icon {
  color: var(--clr-orange);
}

/* Card content */
.ind-card__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ind-card__num {
  font-family: var(--font-condensed);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--clr-orange);
  text-transform: uppercase;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.ind-card:hover .ind-card__num {
  opacity: 1;
}

.ind-card__name {
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1.5vw, 1.375rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--clr-white);
  transition: color 0.3s ease;
  line-height: 1.2;
}

/* Short subtitle — always visible, no expansion */
.ind-card__sub {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--clr-white-45);
  letter-spacing: 0.02em;
  line-height: 1.5;
  margin-top: 2px;
  transition: color 0.3s ease;
}

.ind-card:hover .ind-card__sub {
  color: var(--clr-white-70);
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════ */

/* Large but not super wide */
@media (max-width: 1200px) {
  .industries__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Tablet */
@media (max-width: 1100px) {
  .hero__layout {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .about__grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .about__img-wrap {
    max-width: 600px;
  }
}

@media (max-width: 900px) {
  .industries__header {
    flex-direction: column;
    align-items: flex-start;
  }

  .industries__sub {
    text-align: left;
    max-width: 100%;
  }

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

/* Mobile */
@media (max-width: 768px) {
  :root {
    --nav-height: 60px;
  }

  .navbar__links,
  .navbar__cta {
    display: none;
  }

  .navbar__hamburger {
    display: flex;
  }

  .navbar__mobile-menu {
    display: flex;
  }

  /* Hero fits full screen */
  .hero {
    min-height: 100svh;
    height: auto;
  }

  .hero__layout {
    padding-top: calc(var(--nav-height) + 1.5rem);
    padding-bottom: 1rem;
    grid-template-columns: 1fr;
  }

  .hero__headline {
    font-size: clamp(2.5rem, 11vw, 3.75rem);
  }

  .industries__grid {
    grid-template-columns: 1fr;
    border-radius: var(--radius-lg);
  }

  .ind-card__num {
    opacity: 1;
  }

  .ind-card__sub {
    color: var(--clr-white-45);
  }
}

/* Small mobile */
@media (max-width: 480px) {
  .hero__cta-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .btn-primary,
  .btn-secondary {
    width: 100%;
    justify-content: center;
  }

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

/* ══════════════════════════════════════════════════════════
   ABOUT — ANIMATED STAT COUNTER CARDS
══════════════════════════════════════════════════════════ */
/* ── ANIMATED STAT COUNTER CARDS — 2×2 grid, attached under heading ── */
.about__counters {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  background: transparent;
  margin-top: 1.75rem;
  width: 100%;
}

.astat-card {
  position: relative;
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  overflow: hidden;
  cursor: default;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.astat-card:hover {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(249, 115, 22, 0.25);
  transform: translateY(-2px);
}

/* Subtle glow */
.astat-card__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 80% at 30% 40%, rgba(249, 115, 22, 0.06), transparent 65%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.astat-card:hover .astat-card__glow {
  opacity: 1;
}

.astat-card__val {
  font-family: var(--font-condensed);
  font-size: clamp(1.75rem, 2.5vw, 2.5rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--clr-white);
  display: flex;
  align-items: baseline;
  gap: 2px;
}

.astat-num {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

.astat-suffix {
  color: var(--clr-orange);
  font-size: 0.7em;
}

.astat-card__label {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--clr-white-45);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.3;
}

/* Thin bottom accent line */
.astat-card__line {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, var(--clr-orange), var(--clr-amber));
  border-radius: var(--radius-pill);
  transition: width 0.3s ease;
}

.astat-card:hover .astat-card__line {
  width: 100%;
}

/* Responsive */
@media (max-width: 768px) {
  .about__counters {
    grid-template-columns: repeat(2, 1fr);
  }

  .astat-card {
    padding: 1.5rem 1.25rem;
  }
}

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

/* ── Industries icon-wrap and content always above glow ── */
.ind-card__icon-wrap,
.ind-card__content {
  position: relative;
  z-index: 1;
}

/* ══════════════════════════════════════════════════════════
   SERVICES — UPGRADED VIEW ALL BUTTON
══════════════════════════════════════════════════════════ */
.btn-svc-view {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--clr-border-mid);
  background: var(--clr-white-05);
  backdrop-filter: blur(10px);
  color: var(--clr-white-70);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--dur-mid) var(--ease-expo);
  white-space: nowrap;
}

.btn-svc-view svg {
  transition: transform var(--dur-mid) var(--ease-expo);
  flex-shrink: 0;
}

.btn-svc-view:hover {
  border-color: var(--clr-orange);
  background: var(--clr-orange-glow);
  color: var(--clr-orange);
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(249, 115, 22, 0.15);
}

.btn-svc-view:hover svg {
  transform: translateX(4px);
}

/* ══════════════════════════════════════════════════════════
   CLIENTS SECTION
   Premium spotlight logo wall
══════════════════════════════════════════════════════════ */
#clients {
  position: relative;
  background: var(--clr-bg);
  padding: clamp(6rem, 10vh, 9rem) 0;
  overflow: hidden;
}

/* Gradient divider at bottom of clients */
#clients::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(to bottom, transparent, var(--clr-surface));
  pointer-events: none;
}

/* Large sweep glow at top-center */
.clients__bg-glow {
  position: absolute;
  top: -120px;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(249, 115, 22, 0.05) 0%, transparent 70%);
  pointer-events: none;
}

.clients__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--page-x);
}

/* Header: chip + heading left, sub right */
.clients__header {
  margin-bottom: var(--space-xl);
}

.clients__header-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: end;
  margin-top: var(--space-md);
}

.clients__heading {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4vw, 3.75rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.05;
  color: var(--clr-white);
}

.clients__heading em {
  font-style: normal;
  background: linear-gradient(120deg, var(--clr-orange), var(--clr-amber));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.clients__sub {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--clr-white-45);
  line-height: 1.75;
  align-self: end;
}

/* Logo wall — 5-col grid */
.clients__wall {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--clr-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--clr-border);
}

/* Individual logo tile */
.client-tile {
  position: relative;
  background: var(--clr-surface);
  aspect-ratio: 3 / 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  overflow: hidden;
  cursor: pointer;
  transition: background var(--dur-mid), transform 0.2s var(--ease-expo);
  /* cursor tracking vars — set by JS */
  --cx: 50%;
  --cy: 50%;
}

/* Cursor-tracked spotlight glow */
.client-tile__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(180px circle at var(--cx) var(--cy),
      rgba(249, 115, 22, 0.16),
      transparent 65%);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
  z-index: 0;
}

.client-tile:hover .client-tile__glow {
  opacity: 1;
}

.client-tile:hover {
  background: rgba(255, 255, 255, 0.02);
  transform: scale(1.02);
  z-index: 2;
}

.client-tile__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.client-tile img {
  max-width: 80%;
  max-height: 60px;
  object-fit: contain;
  object-position: center;
  /* Show original color logos */
  filter: none;
  opacity: 0.75;
  transition: opacity var(--dur-mid) var(--ease-out), transform var(--dur-mid) var(--ease-expo);
}

.client-tile:hover img {
  filter: none;
  opacity: 1;
  transform: scale(1.05);
}

/* Footer rule + text */
.clients__footer {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  margin-top: var(--space-2xl);
}

.clients__footer-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--clr-border), transparent);
}

.clients__footer-text {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--clr-white-20);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Responsive */
@media (max-width: 1024px) {
  .clients__wall {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 900px) {
  .hero__layout--solo {
    padding-right: var(--page-x);
  }
}

@media (max-width: 768px) {
  .clients__header-body {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .clients__wall {
    grid-template-columns: repeat(3, 1fr);
    border-radius: var(--radius-lg);
  }

  .hero__layout--solo {
    max-width: 100%;
    padding-right: var(--page-x);
  }

  .hero__layout--solo .hero__headline {
    font-size: clamp(2.75rem, 11vw, 4rem);
  }
}

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

  .client-tile {
    aspect-ratio: 2/1;
  }

  .about__counters {
    grid-template-columns: repeat(2, 1fr);
    border-radius: var(--radius-lg);
  }
}

/* Tone down client tile glow — very subtle */
.client-tile__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(160px circle at var(--cx) var(--cy),
      rgba(255, 255, 255, 0.04),
      transparent 65%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 0;
}

.client-tile:hover .client-tile__glow {
  opacity: 1;
}

/* ══════════════════════════════════════════════════════════
   CTA SECTION — Cinematic full-bleed industrial closer
══════════════════════════════════════════════════════════ */
#cta-section {
  position: relative;
  width: 100%;
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--clr-bg);
}

/* ── Background image ── */
.cta__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.cta__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  filter: saturate(0.5) contrast(1.1);
  transform: scale(1.04);
  animation: ctaBgDrift 20s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes ctaBgDrift {
  0% {
    transform: scale(1.04) translate(0, 0);
  }

  50% {
    transform: scale(1.04) translate(-5px, -3px);
  }

  100% {
    transform: scale(1.04) translate(4px, -5px);
  }
}

/* Heavy dark overlay — darker than hero for more drama */
.cta__bg-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom,
      rgba(8, 8, 9, 0.82) 0%,
      rgba(8, 8, 9, 0.68) 40%,
      rgba(8, 8, 9, 0.75) 70%,
      rgba(8, 8, 9, 0.95) 100%);
}

/* Centre vignette for cinematic depth */
.cta__bg-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 80% at 50% 50%, transparent 30%, rgba(0, 0, 0, 0.65) 100%);
  pointer-events: none;
}

/* Subtle warm industrial glow at bottom-centre */
.cta__bg-glow {
  position: absolute;
  bottom: -80px;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(249, 115, 22, 0.09) 0%, transparent 70%);
  pointer-events: none;
  animation: ctaGlowPulse 5s ease-in-out infinite;
}

@keyframes ctaGlowPulse {

  0%,
  100% {
    opacity: 0.6;
    transform: translateX(-50%) scale(1);
  }

  50% {
    opacity: 1;
    transform: translateX(-50%) scale(1.12);
  }
}

/* Subtle canvas for ambient ember drift */
.cta__canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* ── Main content container — centred stack ── */
.cta__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  padding: clamp(2.5rem, 5.5vh, 4rem) var(--page-x);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
}

/* ── Top label: line — TEXT — line ── */
.cta__label {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  max-width: 260px;
  margin-bottom: 1.25rem;
}

.cta__label-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(249, 115, 22, 0.55));
}

.cta__label-line:last-child {
  background: linear-gradient(to left, transparent, rgba(249, 115, 22, 0.55));
}

.cta__label-text {
  font-family: var(--font-body);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--clr-orange);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Commanding headline — large, bold, industrial ── */
.cta__heading {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4.5vw, 4.25rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 0.95;
  color: var(--clr-white);
  text-transform: uppercase;
  margin: 0 0 1rem 0;
}

.cta__heading em {
  font-style: normal;
  color: var(--clr-orange);
  /* Subtle text-shadow for depth */
  text-shadow: 0 0 60px rgba(249, 115, 22, 0.4), 0 0 120px rgba(249, 115, 22, 0.2);
}

/* ── Supporting body copy ── */
.cta__sub {
  font-family: var(--font-body);
  font-size: clamp(0.875rem, 1.1vw, 1rem);
  font-weight: 400;
  color: var(--clr-white-45);
  line-height: 1.6;
  max-width: 520px;
  margin: 0 0 1.5rem 0;
}

/* ── Button row ── */
.cta__actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 1.5rem;
}

/* Primary orange button — solid fill */
.cta__btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 36px;
  border-radius: var(--radius-xs);
  border: none;
  background: var(--clr-orange);
  color: var(--clr-white);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: transform var(--dur-fast), box-shadow var(--dur-fast), background var(--dur-fast);
  box-shadow: 0 0 0 rgba(249, 115, 22, 0);
}

.cta__btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, transparent 55%);
  opacity: 0;
  transition: opacity var(--dur-fast);
}

.cta__btn-primary:hover {
  background: #f97316;
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(249, 115, 22, 0.55), 0 0 60px rgba(249, 115, 22, 0.2);
}

.cta__btn-primary:hover::before {
  opacity: 1;
}

.cta__btn-primary:active {
  transform: translateY(-1px);
}

.cta__btn-arrow {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform var(--dur-fast);
}

.cta__btn-primary:hover .cta__btn-arrow {
  transform: translateX(3px);
}

/* Secondary outlined button — dark fill, white border */
.cta__btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 36px;
  border-radius: var(--radius-xs);
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--clr-white-95);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--dur-fast);
}

.cta__btn-secondary:hover {
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* ── Trust strip at the bottom ── */
.cta__trust {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
  flex-wrap: wrap;
  justify-content: center;
  margin: 0;
}

.cta__trust-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--clr-white-45);
}

.cta__trust-item svg {
  color: var(--clr-orange);
  flex-shrink: 0;
}

.cta__trust-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--clr-white-20);
  flex-shrink: 0;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  #cta-section {
    min-height: auto;
  }

  .cta__heading {
    font-size: clamp(2.0rem, 7vw, 3.25rem);
    margin-bottom: 0.875rem;
  }

  .cta__sub {
    margin-bottom: 1.25rem;
  }

  .cta__actions {
    margin-bottom: 1.25rem;
  }

  .cta__trust {
    gap: var(--space-sm);
  }

  .cta__trust-dot {
    display: none;
  }
}

@media (max-width: 480px) {
  .cta__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .cta__btn-primary,
  .cta__btn-secondary {
    width: 100%;
    justify-content: center;
  }

  .cta__heading {
    font-size: clamp(1.75rem, 9vw, 2.5rem);
  }
}


/* ══════════════════════════════════════════════════════════
   SERVICE COVERAGE SECTION
   Premium enterprise operational presence layout
══════════════════════════════════════════════════════════ */
#coverage {
  position: relative;
  background: var(--clr-surface);
  padding: clamp(6rem, 10vh, 9rem) var(--page-x);
  overflow: hidden;
}

/* Top gradient fade from clients */
#coverage::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(to bottom, var(--clr-surface), transparent);
  pointer-events: none;
  z-index: 0;
}

/* Bottom gradient fade to FAQ */
#coverage::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(to bottom, transparent, rgba(8,8,9,0.5));
  pointer-events: none;
  z-index: 0;
}

.coverage__inner {
  position: relative;
  z-index: 1;
  max-width: var(--max-w);
  margin: 0 auto;
}

/* Header */
.coverage__header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: end;
  margin-bottom: clamp(3rem, 5vw, 4rem);
}

.coverage__heading {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4vw, 3.75rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.05;
  color: var(--clr-white);
}

.coverage__heading em {
  font-style: normal;
  background: linear-gradient(120deg, var(--clr-orange) 0%, var(--clr-amber) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.coverage__sub {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--clr-white-45);
  line-height: 1.75;
}

/* Region cards grid — 3 columns, 2 rows */
.coverage__regions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: clamp(2.5rem, 4vw, 3.5rem);
}

.region-card {
  position: relative;
  background: rgba(255,255,255,0.018);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.5rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  overflow: hidden;
  cursor: default;
  transition:
    background 0.35s ease,
    border-color 0.35s ease,
    transform 0.35s cubic-bezier(0.25,0.8,0.25,1),
    box-shadow 0.35s ease;
}

.region-card:hover {
  background: rgba(255,255,255,0.038);
  border-color: rgba(249,115,22,0.22);
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.45), 0 0 0 1px rgba(249,115,22,0.08);
}

/* Orange accent indicator */
.region-card__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--clr-orange);
  flex-shrink: 0;
  margin-top: 0.35rem;
  box-shadow: 0 0 8px rgba(249,115,22,0.5);
  transition: box-shadow 0.3s ease;
}

.region-card:hover .region-card__dot {
  box-shadow: 0 0 16px rgba(249,115,22,0.8);
}

.region-card__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.region-card__name {
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--clr-white);
  transition: color 0.3s ease;
}

.region-card:hover .region-card__name {
  color: var(--clr-orange-light);
}

.region-card__tag {
  font-family: var(--font-condensed);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--clr-white-45);
  text-transform: uppercase;
  transition: color 0.3s ease;
}

.region-card:hover .region-card__tag {
  color: var(--clr-orange);
}

/* Bottom section: label + location chips */
.coverage__locations-label {
  font-family: var(--font-body);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--clr-white-20);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.coverage__locations-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, rgba(255,255,255,0.07), transparent);
}

/* Location chips */
.coverage__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.coverage-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--clr-white-45);
  cursor: default;
  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease,
    transform 0.25s ease;
  letter-spacing: 0.015em;
}

.coverage-chip::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--clr-orange);
  opacity: 0.6;
  transition: opacity 0.25s ease;
  flex-shrink: 0;
}

.coverage-chip:hover {
  background: rgba(249,115,22,0.08);
  border-color: rgba(249,115,22,0.28);
  color: var(--clr-white-70);
  transform: translateY(-1px);
}

.coverage-chip:hover::before {
  opacity: 1;
}

/* Coverage responsive */
@media (max-width: 1024px) {
  .coverage__regions {
    grid-template-columns: repeat(2, 1fr);
  }
  .coverage__header {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
}

@media (max-width: 600px) {
  .coverage__regions {
    grid-template-columns: 1fr;
  }
  .region-card {
    padding: 1.25rem 1.25rem;
  }
}

/* ══════════════════════════════════════════════════════════
   FAQ SECTION
   Editorial two-column premium layout
══════════════════════════════════════════════════════════ */
#faq {
  position: relative;
  background: var(--clr-bg);
  padding: clamp(6rem, 10vh, 9rem) var(--page-x);
  overflow: hidden;
}

/* Ambient glow top-right */
#faq::before {
  content: '';
  position: absolute;
  top: -200px;
  right: -150px;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(249,115,22,0.04) 0%, transparent 65%);
  pointer-events: none;
}

/* Bottom gradient fade to CTA */
#faq::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100px;
  background: linear-gradient(to bottom, transparent, rgba(8,8,9,0.4));
  pointer-events: none;
}

.faq__inner {
  position: relative;
  z-index: 1;
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: clamp(3rem, 6vw, 7rem);
  align-items: start;
}

/* Left sticky heading column */
.faq__left {
  position: sticky;
  top: calc(var(--nav-height) + 2rem);
}

.faq__eyebrow {
  font-family: var(--font-condensed);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--clr-orange);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.faq__eyebrow::before {
  content: '';
  width: 24px;
  height: 1.5px;
  background: var(--clr-orange);
  border-radius: 2px;
}

.faq__heading {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 3.5vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.05;
  color: var(--clr-white);
  margin-bottom: var(--space-lg);
}

.faq__heading em {
  font-style: normal;
  background: linear-gradient(120deg, var(--clr-orange) 0%, var(--clr-amber) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.faq__left-sub {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--clr-white-45);
  line-height: 1.75;
  margin-bottom: var(--space-lg);
}

.faq__count {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(249,115,22,0.08);
  border: 1px solid rgba(249,115,22,0.2);
  border-radius: var(--radius-pill);
  font-family: var(--font-condensed);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--clr-orange);
}

/* Right: questions list */
.faq__list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--clr-border);
}

/* Individual FAQ item */
.faq-item {
  border-bottom: 1px solid var(--clr-border);
  overflow: hidden;
}

.faq-item__trigger {
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  padding: 1.5rem 0;
  text-align: left;
  position: relative;
}

.faq-item__trigger:hover .faq-item__q {
  color: var(--clr-white);
}

/* Question number */
.faq-item__num {
  font-family: var(--font-condensed);
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--clr-orange);
  text-transform: uppercase;
  flex-shrink: 0;
  margin-top: 4px;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.faq-item.open .faq-item__num,
.faq-item__trigger:hover .faq-item__num {
  opacity: 1;
}

/* Question text */
.faq-item__q {
  font-family: var(--font-display);
  font-size: clamp(0.9375rem, 1.3vw, 1.0625rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.35;
  color: var(--clr-white-70);
  flex: 1;
  transition: color 0.25s ease;
}

.faq-item.open .faq-item__q {
  color: var(--clr-white);
}

/* Plus/minus icon */
.faq-item__icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--clr-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-white-45);
  flex-shrink: 0;
  margin-top: 2px;
  transition:
    background 0.3s ease,
    border-color 0.3s ease,
    color 0.3s ease,
    transform 0.4s var(--ease-expo);
}

.faq-item__trigger:hover .faq-item__icon {
  border-color: rgba(249,115,22,0.3);
  background: rgba(249,115,22,0.06);
  color: var(--clr-orange);
}

.faq-item.open .faq-item__icon {
  background: var(--clr-orange);
  border-color: var(--clr-orange);
  color: var(--clr-white);
  transform: rotate(45deg);
}

/* Answer body */
.faq-item__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s var(--ease-expo), opacity 0.35s ease, padding 0.35s ease;
  opacity: 0;
  padding-bottom: 0;
}

.faq-item.open .faq-item__body {
  max-height: 300px;
  opacity: 1;
  padding-bottom: 1.5rem;
}

.faq-item__a {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--clr-white-45);
  line-height: 1.75;
  max-width: 600px;
  padding-left: calc(0.5625rem + var(--space-md) + 10px); /* align with question text */
}

/* Orange accent bar on open item */
.faq-item {
  position: relative;
}

.faq-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--clr-orange);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.4s var(--ease-expo);
  border-radius: 0 2px 2px 0;
}

.faq-item.open::before {
  transform: scaleY(1);
}

/* FAQ responsive */
@media (max-width: 1024px) {
  .faq__inner {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
  .faq__left {
    position: static;
  }
}

@media (max-width: 600px) {
  .faq-item__trigger {
    padding: 1.25rem 0;
  }
  .faq-item__q {
    font-size: 0.9375rem;
  }
}

/* ══════════════════════════════════════════════════════════
   FOOTER — Premium enterprise footer
══════════════════════════════════════════════════════════ */
#site-footer {
  background: var(--clr-bg);
  border-top: 1px solid var(--clr-border);
  padding: var(--space-2xl) var(--page-x) var(--space-lg);
  position: relative;
}

/* Subtle top glow */
#site-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 2px;
  background: linear-gradient(to right, transparent, rgba(249, 115, 22, 0.3), transparent);
}

.footer__inner {
  max-width: var(--max-w);
  margin: 0 auto;
}

.footer__top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
  gap: clamp(2rem, 4vw, 5rem);
  margin-bottom: var(--space-2xl);
  align-items: start;
}

/* Brand column */
.footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.footer__logo {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-decoration: none;
  width: fit-content;
}

.footer__logo-name {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--clr-white);
  letter-spacing: -0.035em;
  line-height: 1;
  transition: color var(--dur-fast);
}

.footer__logo-name span {
  color: var(--clr-orange);
}

.footer__logo:hover .footer__logo-name {
  color: var(--clr-orange-light);
}

.footer__logo-tag {
  font-family: var(--font-body);
  font-size: 0.5rem;
  font-weight: 600;
  color: var(--clr-white-20);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.footer__tagline {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: var(--clr-white-45);
  line-height: 1.75;
}

.footer__social {
  display: flex;
  gap: var(--space-sm);
  margin-top: 0.25rem;
}

.footer__social-link {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--clr-border);
  background: var(--clr-white-05);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-white-45);
  text-decoration: none;
  transition: all var(--dur-fast);
}

.footer__social-link:hover {
  border-color: var(--clr-border-glow);
  background: var(--clr-orange-glow);
  color: var(--clr-orange);
  transform: translateY(-1px);
}

/* Footer columns */
.footer__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.footer__col-heading {
  font-family: var(--font-body);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--clr-white-20);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--clr-border);
}

.footer__links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer__links a {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--clr-white-45);
  text-decoration: none;
  transition: color var(--dur-fast);
  position: relative;
}

.footer__links a:hover {
  color: var(--clr-white-95);
}

/* Address */
.footer__address {
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.footer__address p {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: var(--clr-white-45);
  line-height: 1.65;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.footer__address svg {
  color: var(--clr-orange);
  flex-shrink: 0;
  margin-top: 2px;
}

.footer__address a {
  color: var(--clr-white-45);
  text-decoration: none;
  transition: color var(--dur-fast);
}

.footer__address a:hover {
  color: var(--clr-white-95);
}

/* Bottom bar */
.footer__bottom {
  padding-top: var(--space-lg);
}

.footer__bottom-line {
  height: 1px;
  background: var(--clr-border);
  margin-bottom: var(--space-md);
}

.footer__bottom-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.footer__copyright {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  color: var(--clr-white-20);
}

.footer__bottom-note {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--clr-white-20);
}

/* Footer responsive */
@media (max-width: 1100px) {
  .footer__top {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
  }
}

@media (max-width: 600px) {
  .footer__top {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .footer__bottom-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
  }
}

/* ══════════════════════════════════════════════════════════
   FLOATING ACTION BUTTONS
   WhatsApp + Scroll to Top
══════════════════════════════════════════════════════════ */
.fab {
  position: fixed;
  right: 1.5rem;
  z-index: 9000;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  border: none;
  outline: none;
  transition:
    transform 0.3s var(--ease-expo),
    box-shadow 0.3s var(--ease-expo),
    opacity 0.3s var(--ease-expo);
  will-change: transform;
}

/* WhatsApp FAB */
.fab--wa {
  bottom: 1.75rem;
  background: #1a1a1a;
  color: #25d366;
  border: 1px solid rgba(37, 211, 102, 0.2);
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(37, 211, 102, 0.08);
}

.fab--wa:hover {
  transform: scale(1.08) translateY(-2px);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(37, 211, 102, 0.3),
    0 0 16px rgba(37, 211, 102, 0.15);
  background: #1e2420;
}

/* Scroll-to-top FAB */
.fab--top {
  bottom: 5.25rem;
  background: rgba(18, 18, 20, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--clr-white-70);
  border: 1px solid var(--clr-border-mid);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
}

.fab--top.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.fab--top:hover {
  background: var(--clr-surface-2);
  border-color: var(--clr-orange);
  color: var(--clr-orange);
  transform: translateY(-3px);
  box-shadow: 0 6px 24px rgba(249, 115, 22, 0.15);
}

/* Mobile — slightly smaller */
@media (max-width: 480px) {
  .fab {
    width: 44px;
    height: 44px;
    right: 1rem;
  }

  .fab--wa {
    bottom: 1.25rem;
  }

  .fab--top {
    bottom: 4.75rem;
  }
}