:root {
  /* Green (Primary) */
  --green-100: #D9F2E6;
  --green-200: #BCE6D2;
  --green-300: #7CC0A0;
  --green-400: #4AA77B;
  --green-500: #198754;
  --green-600: #157B4C;
  --green-700: #116F44;
  --green-800: #095733;
  --green-900: #054123;

  /* Purple */
  --purple-100: #E3DDFD;
  --purple-200: #C0B3F5;
  --purple-300: #9B87EC;
  --purple-400: #765BE3;
  --purple-500: #38238A;

  /* Blue */
  --blue-100: #EDF6FF;
  --blue-200: #C1DFFF;
  --blue-300: #77B8FF;
  --blue-400: #3C99FF;
  --blue-500: #007AFF;
  --blue-600: #0065D3;
  --blue-700: #005CC0;
  --blue-800: #003F84;
  --blue-900: #001F3D;

  /* Orange */
  --orange-100: #FFE6D7;
  --orange-200: #FFA563;
  --orange-300: #EA8A3A;
  --orange-400: #F28927;
  --orange-500: #EE7700;
  --orange-700: #C95B05;
  --orange-800: #B2460D;
  --orange-900: #642606;

  /* Yellow */
  --yellow-100: #FFF9E0;
  --yellow-200: #FFF0B3;
  --yellow-300: #FFE066;
  --yellow-400: #FFD324;
  --yellow-500: #F5C400;
  --yellow-600: #D4A900;
  --yellow-700: #B08D00;
  --yellow-800: #7A6200;
  --yellow-900: #4A3B00;

  /* Red */
  --red-100: #FFEAEA;
  --red-200: #F5C2C2;
  --red-300: #EA9999;
  --red-400: #DB5F5F;
  --red-500: #CC2424;
  --red-600: #BB201B;
  --red-700: #A61D18;
  --red-800: #67120F;

  /* Gray */
  --gray-00: #FFFFFF;
  --gray-100: #F1F3F6;
  --gray-200: #E9ECEF;
  --gray-300: #DEE2E6;
  --gray-400: #CED4DA;
  --gray-500: #A7AFB7;
  --gray-600: #7A838C;
  --gray-700: #4F575F;
  --gray-800: #343A40;
  --gray-900: #212529;

  /* Semantic */
  --color-primary: var(--green-500);
  --color-primary-light: var(--green-100);
  --color-primary-dark: var(--green-800);
  --color-bg: var(--gray-00);
  --color-bg-subtle: #F8F9FA;
  --color-text: var(--gray-900);
  --color-text-secondary: #6C757D;
  --color-text-tertiary: var(--gray-500);
  --color-border: #00000033;
  --color-shadow: #2125291A;
  --color-on-primary: var(--gray-00);

  /* Typography */
  --font-family: 'Museo Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-weight-light: 100;
  --font-weight-regular: 300;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-weight-black: 900;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 2rem;
  --text-4xl: 2.5rem;
  --text-5xl: 3.25rem;
  --text-6xl: 4rem;

  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.6;

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;
  --space-5xl: 8rem;

  /* Radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px var(--color-shadow);
  --shadow-md: 0 4px 12px var(--color-shadow);
  --shadow-lg: 0 8px 24px var(--color-shadow);
  --shadow-xl: 0 16px 48px var(--color-shadow);

  /* Transitions */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 200ms;
  --duration-normal: 400ms;
  --duration-slow: 600ms;
  --duration-slower: 1000ms;

  /* Layout */
  --navbar-height: 4rem;
  --section-padding: var(--space-5xl);
  --container-max: 1200px;
}

@media (max-width: 768px) {
  :root {
    --text-5xl: 2.25rem;
    --text-6xl: 2.75rem;
    --text-4xl: 2rem;
    --text-3xl: 1.5rem;
    --section-padding: var(--space-3xl);
    --navbar-height: 3.5rem;
  }
}
@font-face {
  font-family: 'Museo Sans';
  src: url('/fonts/museosans/MuseoSans-100.otf') format('opentype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Museo Sans';
  src: url('/fonts/museosans/MuseoSans-300.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Museo Sans';
  src: url('/fonts/museosans/MuseoSans_500.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Museo Sans';
  src: url('/fonts/museosans/MuseoSans_700.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Museo Sans';
  src: url('/fonts/museosans/MuseoSans_900.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

body {
  font-family: var(--font-family);
  font-weight: var(--font-weight-medium);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  line-height: var(--leading-tight);
}

h1, h2 {
  font-weight: var(--font-weight-medium);
}

h3, h4, h5, h6 {
  font-weight: var(--font-weight-medium);
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

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

img {
  max-width: 100%;
  height: auto;
  display: block;
}

button {
  font-family: inherit;
  cursor: pointer;
}

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

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 0;
  transition: padding var(--duration-slow) var(--ease-out);
}

/* No transitions until JS marks the navbar ready (after first paint) — stops the
   bar from animating its padding/size as the stylesheet first applies on load. */
.navbar:not(.nav-ready),
.navbar:not(.nav-ready) .navbar-inner,
.navbar:not(.nav-ready) .navbar-brand,
.navbar:not(.nav-ready) .navbar-brand img {
  transition: none !important;
}

.navbar.scrolled {
  padding: var(--space-sm) var(--space-lg) 0;
}

.navbar-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-lg);
  height: var(--navbar-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  border-radius: 0;
  background: transparent;
  border: 1px solid transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: all var(--duration-slow) var(--ease-out);
}

/* Liquid glass panel — only when scrolled */
.navbar.scrolled .navbar-inner {
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow:
    0 8px 32px rgba(5, 65, 35, 0.06),
    0 2px 8px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -1px 0 rgba(255, 255, 255, 0.12);
}

/* Top-edge light reflection */
.navbar-inner::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.3) 0%,
    rgba(255, 255, 255, 0.05) 30%,
    transparent 50%
  );
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease-out);
  pointer-events: none;
}

.navbar.scrolled .navbar-inner::after {
  opacity: 1;
}

/* Specular edge highlight — left/right gradient shimmer */
.navbar-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.25) 0%,
      transparent 40%,
      transparent 60%,
      rgba(255, 255, 255, 0.08) 100%
    );
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease-out);
  pointer-events: none;
}

.navbar.scrolled .navbar-inner::before {
  opacity: 1;
}

.navbar-brand {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  text-decoration: none;
  color: var(--color-text);
  transition: color var(--duration-slow) var(--ease-out);
}

.navbar-brand img {
  height: 2rem;
  width: auto;
  transition: filter var(--duration-slow) var(--ease-out);
}

.navbar-brand span {
  font-weight: var(--font-weight-medium);
  font-size: var(--text-lg);
  letter-spacing: -0.01em;
}

.navbar-links {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
  list-style: none;
}

.navbar-links a:not(.btn) {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  transition: color var(--duration-fast) var(--ease-out);
  text-decoration: none;
}

.navbar-links a:not(.btn):hover {
  color: var(--color-text);
}

/* Current-page indicator — a small accent dot before the active item */
.navbar-links a.is-active {
  color: var(--color-text);
}

.navbar-links a.is-active::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 0.5em;
  border-radius: 50%;
  background: var(--green-500);
  vertical-align: middle;
}

.navbar-over-hero:not(.scrolled) .navbar-links a.is-active {
  color: #ffffff;
}

/* Dimming backdrop shown behind the open mobile menu */
.navbar::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--duration-normal) var(--ease-out),
    visibility var(--duration-normal) var(--ease-out);
}

.navbar.menu-open::before {
  opacity: 1;
  visibility: visible;
}

.lang-toggle {
  padding: var(--space-xs) var(--space-md);
}

.navbar-cta-item {
  margin-left: var(--space-md);
}

.navbar-cta-item .btn {
  white-space: nowrap;
}

.navbar-mobile-toggle {
  display: none;
  background: none;
  border: none;
  font-size: var(--text-xl);
  color: var(--color-text);
  padding: var(--space-sm);
}

@media (max-width: 768px) {
  .navbar.scrolled {
    padding: var(--space-xs) var(--space-sm) 0;
  }
  .navbar-mobile-toggle {
    display: block;
  }
  /* Mobile dropdown — always rendered so it can animate open/closed */
  .navbar-links {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(24px) saturate(1.4);
    -webkit-backdrop-filter: blur(24px) saturate(1.4);
    padding: var(--space-lg) var(--space-xl);
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-top: none;
    box-shadow:
      0 12px 32px rgba(0, 0, 0, 0.12),
      inset 0 -1px 0 rgba(255, 255, 255, 0.3);
    /* Collapsed by default */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    pointer-events: none;
    transition:
      opacity var(--duration-normal) var(--ease-out),
      transform var(--duration-normal) var(--ease-out),
      visibility var(--duration-normal) var(--ease-out);
  }
  .navbar-links.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }
  /* When open, the static bar adopts the dropdown's glass and squares off its
     bottom — bar + dropdown read as one solid panel that has unfolded. */
  .navbar.menu-open .navbar-inner {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(24px) saturate(1.4);
    -webkit-backdrop-filter: blur(24px) saturate(1.4);
    border-color: rgba(255, 255, 255, 0.4);
    border-bottom: none;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: none;
  }
  /* Over the hero the bar text/logo are white — flip them dark now the bar is white */
  .navbar-over-hero:not(.scrolled).menu-open .navbar-brand,
  .navbar-over-hero:not(.scrolled).menu-open .navbar-brand span,
  .navbar-over-hero:not(.scrolled).menu-open .navbar-mobile-toggle {
    color: var(--color-text);
  }
  .navbar-over-hero:not(.scrolled).menu-open .navbar-brand img {
    filter: none;
  }
  .navbar-links a:not(.btn) {
    font-size: var(--text-lg);
    padding: var(--space-sm) 0;
  }
  /* Over the hero the bar text is white; inside the light dropdown make it dark.
     `.open` keeps these more specific than the over-hero white rules. */
  .navbar-over-hero:not(.scrolled) .navbar-links.open a:not(.btn) {
    color: var(--color-text-secondary);
  }
  .navbar-over-hero:not(.scrolled) .navbar-links.open a:not(.btn):hover,
  .navbar-over-hero:not(.scrolled) .navbar-links.open a.is-active {
    color: var(--color-text);
  }
  /* CTA + language toggle: restore their normal look inside the light dropdown */
  .navbar-over-hero:not(.scrolled) .navbar-links.open .navbar-cta-item .btn {
    background: var(--color-primary);
    color: var(--color-on-primary);
    border: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow:
      0 2px 8px rgba(25, 135, 84, 0.25),
      inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }
  .navbar-over-hero:not(.scrolled) .navbar-links.open .lang-toggle {
    background: rgba(255, 255, 255, 0.5);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .navbar-cta-item {
    margin-left: 0;
    margin-top: var(--space-sm);
  }
  .navbar-cta-item .btn {
    width: 100%;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    font-size: var(--text-base);
  }
}

/* ---- Navbar over the hero (home, before scroll) — white on the sky photo ----
   Applies only while NOT scrolled. Once `.scrolled` is added the existing glass
   rules take over unchanged, so the scrolled navbar stays exactly as it was. */
.navbar-over-hero:not(.scrolled) .navbar-brand,
.navbar-over-hero:not(.scrolled) .navbar-brand span {
  color: #ffffff;
}

.navbar-over-hero:not(.scrolled) .navbar-brand img {
  /* Recolour the green logo to white */
  filter: brightness(0) invert(1);
}

.navbar-over-hero:not(.scrolled) .navbar-links a:not(.btn) {
  color: rgba(255, 255, 255, 0.85);
}

.navbar-over-hero:not(.scrolled) .navbar-links a:not(.btn):hover {
  color: #ffffff;
}

.navbar-over-hero:not(.scrolled) .navbar-mobile-toggle {
  color: #ffffff;
}

/* CTA + language toggle become white liquid glass over the sky */
.navbar-over-hero:not(.scrolled) .navbar-cta-item .btn,
.navbar-over-hero:not(.scrolled) .lang-toggle {
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow:
    0 2px 10px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(255, 255, 255, 0.12);
}

.navbar-over-hero:not(.scrolled) .navbar-cta-item .btn:hover,
.navbar-over-hero:not(.scrolled) .lang-toggle:hover {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.6);
  color: #ffffff;
}

/* ---- Hero ---- */

.hero {
  min-height: 80vh;
  display: flex;
  align-items: center;
  padding-top: var(--navbar-height);
  position: relative;
  overflow: hidden;
  background: url("/img/clearsky.jpeg") center / cover no-repeat;
}

/* Two layers over the sky photo:
   1. (top) a fade at the very bottom into --color-bg-subtle, the exact colour the
      first feature section starts from — so the sky melts into the next section
      with no visible white seam.
   2. a legibility wash, darker on the left where the copy sits, fading toward the plane. */
.hero-gradient-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, transparent 72%, var(--color-bg-subtle) 100%),
    linear-gradient(100deg, rgba(15, 40, 70, 0.45) 0%, rgba(15, 40, 70, 0.2) 40%, transparent 70%);
}

/* Green gradient blobs are replaced by the sky photo */
.hero-blob {
  display: none;
}

/* Large green — top-left anchor, soft and expansive */
.hero-blob-1 {
  width: 700px;
  height: 700px;
  background: radial-gradient(circle at 40% 40%, var(--green-300), var(--green-200) 60%, transparent 100%);
  filter: blur(80px);
  opacity: 0.6;
  top: -15%;
  left: -10%;
  animation: heroBlob1 16s ease-in-out infinite alternate;
}

/* Deep green — center-right, denser, creates contrast */
.hero-blob-2 {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle at 60% 50%, var(--green-400), var(--green-200) 70%, transparent 100%);
  filter: blur(90px);
  opacity: 0.35;
  top: 10%;
  right: -5%;
  animation: heroBlob2 20s ease-in-out infinite alternate;
}

/* Purple accent — smaller, sharper, creates visual tension */
.hero-blob-3 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle at 50% 50%, var(--purple-200), var(--purple-100) 60%, transparent 100%);
  filter: blur(70px);
  opacity: 0.55;
  top: 35%;
  left: 45%;
  animation: heroBlob3 13s ease-in-out infinite alternate;
}

/* Blue accent — bottom-left, subtle depth layer */
.hero-blob-4 {
  width: 450px;
  height: 450px;
  background: radial-gradient(circle at 50% 60%, var(--blue-200), var(--blue-100) 65%, transparent 100%);
  filter: blur(100px);
  opacity: 0.3;
  bottom: -10%;
  left: 15%;
  animation: heroBlob4 22s ease-in-out infinite alternate;
}

/* Small bright green — fast-moving spark near center */
.hero-blob-5 {
  width: 250px;
  height: 250px;
  background: radial-gradient(circle, var(--green-200), var(--green-100) 50%, transparent 100%);
  filter: blur(50px);
  opacity: 0.7;
  top: 20%;
  left: 25%;
  animation: heroBlob5 10s ease-in-out infinite alternate;
}

/* Blob 1: slow diagonal drift */
@keyframes heroBlob1 {
  0%   { transform: translate(0, 0) scale(1) rotate(0deg); }
  50%  { transform: translate(80px, 50px) scale(1.08) rotate(3deg); }
  100% { transform: translate(150px, 100px) scale(1.15) rotate(-2deg); }
}

/* Blob 2: counter-drift, breathing */
@keyframes heroBlob2 {
  0%   { transform: translate(0, 0) scale(1); }
  40%  { transform: translate(-60px, 40px) scale(1.12); }
  100% { transform: translate(-120px, -50px) scale(0.95); }
}

/* Blob 3: orbital wobble */
@keyframes heroBlob3 {
  0%   { transform: translate(0, 0) scale(0.9) rotate(0deg); }
  33%  { transform: translate(-50px, 40px) scale(1.1) rotate(5deg); }
  66%  { transform: translate(30px, 70px) scale(1.0) rotate(-3deg); }
  100% { transform: translate(-80px, 20px) scale(1.15) rotate(2deg); }
}

/* Blob 4: slow vertical float */
@keyframes heroBlob4 {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(40px, -80px) scale(1.1); }
  100% { transform: translate(-30px, -120px) scale(1.05); }
}

/* Blob 5: quicker, tighter movement — adds liveliness */
@keyframes heroBlob5 {
  0%   { transform: translate(0, 0) scale(1); }
  30%  { transform: translate(60px, -30px) scale(1.2); }
  70%  { transform: translate(-40px, 50px) scale(0.85); }
  100% { transform: translate(30px, 20px) scale(1.1); }
}

.hero-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--section-padding) var(--space-lg);
  width: 100%;
  position: relative;
  z-index: 2;
}

.hero h1 {
  font-size: var(--text-6xl);
  font-weight: var(--font-weight-regular);
  line-height: var(--leading-tight);
  max-width: 700px;
  margin-bottom: var(--space-xl);
  color: #ffffff;
  text-shadow: 0 2px 24px rgba(15, 40, 70, 0.35);
}

.hero h1 strong {
  font-weight: var(--font-weight-bold);
}

.hero-subtitle {
  font-size: var(--text-2xl);
  color: rgba(255, 255, 255, 0.92);
  max-width: 560px;
  line-height: var(--leading-normal);
  margin-bottom: var(--space-2xl);
  text-shadow: 0 1px 16px rgba(15, 40, 70, 0.3);
}

.hero-cta {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
}

/* White (frosted) primary button over the hero sky — matches the CTA mail button */
.hero .btn-primary {
  background: rgba(255, 255, 255, 0.92);
  color: var(--green-900);
  box-shadow:
    0 2px 12px rgba(15, 40, 70, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.hero .btn-primary:hover {
  background: #ffffff;
  color: var(--green-900);
}

.hero .btn-primary:active {
  background: rgba(255, 255, 255, 0.85);
  color: var(--green-900);
}

/* Wrapper spans the full hero height and centres the plane vertically with flex,
   so the scroll parallax (which writes to the wrapper's transform) never fights
   the centring. The fly-in animates the inner <img>'s transform separately. */
.hero-plane-wrap {
  position: absolute;
  right: 7%;
  top: 0;
  bottom: 0;
  width: 52%;
  max-width: 760px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 1;
}

.hero-plane {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 24px 40px rgba(15, 40, 70, 0.25));
}

@media (max-width: 768px) {
  .hero {
    min-height: auto;
    /* Plane comes after the text in the DOM — reverse so it sits on top */
    flex-direction: column-reverse;
    justify-content: center;
    padding-top: calc(var(--navbar-height) + var(--space-lg));
    padding-bottom: var(--space-2xl);
  }
  /* Plane at the top of the hero, text below and still in view */
  .hero-plane-wrap {
    position: relative;
    inset: auto;
    right: auto;
    width: 100%;
    margin: 0 auto var(--space-md);
    z-index: 1;
  }
  .hero-inner {
    padding-top: var(--space-lg);
    padding-bottom: 0;
  }
}

/* ---- Buttons ---- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-family);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-full);
  border: none;
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-out);
  text-decoration: none;
  line-height: 1;
  position: relative;
}

/* — Primary (green, solid glass) — */
.btn-primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
  box-shadow:
    0 2px 8px rgba(25, 135, 84, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.btn-primary:hover {
  background: var(--green-600);
  color: var(--color-on-primary);
  transform: translateY(-1px);
  box-shadow:
    0 6px 20px rgba(25, 135, 84, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.btn-primary:active {
  transform: translateY(0.5px);
  background: var(--green-700);
  box-shadow:
    0 1px 4px rgba(25, 135, 84, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition-duration: var(--duration-fast);
}

.btn-primary:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(25, 135, 84, 0.3),
    0 2px 8px rgba(25, 135, 84, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* — Outline (liquid glass, white) — */
.btn-outline {
  background: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  color: var(--color-text);
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow:
    0 2px 10px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 -1px 0 rgba(255, 255, 255, 0.15);
}

.btn-outline:hover {
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(255, 255, 255, 0.65);
  transform: translateY(-2px);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 -1px 0 rgba(255, 255, 255, 0.2);
}

.btn-outline:active {
  transform: translateY(0.5px);
  background: rgba(255, 255, 255, 0.8);
  box-shadow:
    0 1px 4px rgba(0, 0, 0, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.btn-outline:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(25, 135, 84, 0.2),
    0 2px 10px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

/* — Ghost (minimal, no glass) — */
.btn-ghost {
  background: transparent;
  color: var(--color-primary);
  padding-left: 0;
  padding-right: 0;
}

.btn-ghost:hover {
  color: var(--color-primary-dark);
}

.btn-ghost:active {
  color: var(--green-800);
}

.btn-ghost:focus-visible {
  outline: none;
  border-radius: var(--radius-sm);
  box-shadow: 0 0 0 3px rgba(25, 135, 84, 0.15);
}

.btn-ghost i {
  transition: transform var(--duration-normal) var(--ease-spring);
}

.btn-ghost:hover i {
  transform: translateX(4px);
}

/* ---- Feature Sections ---- */

.section {
  padding: var(--section-padding) 0;
}

.section-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-lg);
  position: relative;
  z-index: 1;
}

/* ---- Quick facts band — floating liquid-glass card straddling hero/features seam ---- */

.quick-facts {
  position: relative;
  z-index: 5;
  /* Pull the card up so it overlaps the bottom of the hero and the top of the
     next section — its glass refracts both backgrounds. Equal negative margins
     keep it centred on the seam without pushing the features section down. */
  margin-top: -5rem;
  margin-bottom: -5rem;
  padding: 0 var(--space-lg);
  pointer-events: none;
}

.quick-facts-inner {
  position: relative;
  pointer-events: auto;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-xl) var(--space-2xl);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2xl);
  /* Liquid glass — same recipe as the scrolled navbar */
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow:
    0 8px 32px rgba(5, 65, 35, 0.06),
    0 2px 8px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -1px 0 rgba(255, 255, 255, 0.12);
}

/* Top-edge light reflection */
.quick-facts-inner::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.3) 0%,
    rgba(255, 255, 255, 0.05) 30%,
    transparent 50%
  );
  pointer-events: none;
}

/* Specular edge highlight — diagonal shimmer */
.quick-facts-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.25) 0%,
    transparent 40%,
    transparent 60%,
    rgba(255, 255, 255, 0.08) 100%
  );
  pointer-events: none;
}

.quick-fact {
  /* Keep the fact rows above the glass reflection pseudo-elements */
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.quick-fact > i {
  flex-shrink: 0;
  font-size: var(--text-3xl);
  color: var(--green-500);
  line-height: 1;
}

.quick-fact-body h3 {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-xs);
}

.quick-fact-body p {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
}

@media (max-width: 768px) {
  .quick-facts {
    /* No overlap when stacked — leaves clear space below the hero buttons
       (above the band) and above the first feature title (below it) */
    margin-top: 0;
    margin-bottom: 0;
  }
  .quick-facts-inner {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
}

.feature-section {
  padding: var(--section-padding) 0;
  overflow: hidden;
}

.feature-section:nth-child(1) {
  background: linear-gradient(160deg, var(--color-bg-subtle) 0%, var(--purple-100) 100%);
}

.feature-section:nth-child(2) {
  background: linear-gradient(160deg, var(--color-bg-subtle) 0%, var(--green-100) 100%);
}

.feature-section:nth-child(3) {
  background: linear-gradient(160deg, var(--color-bg-subtle) 0%, var(--blue-200) 100%);
}

.feature-section:nth-child(4) {
  background: linear-gradient(160deg, var(--color-bg-subtle) 0%, var(--orange-100) 100%);
}

.feature-row {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-lg);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4xl);
  align-items: center;
}

.feature-row.reversed .feature-text {
  order: 2;
}

.feature-row.reversed .feature-visual {
  order: 1;
}

.feature-text h2 {
  font-size: var(--text-4xl);
  font-weight: var(--font-weight-regular);
  margin-bottom: var(--space-lg);
}

.feature-text h2 strong {
  font-weight: var(--font-weight-bold);
}

.feature-section:nth-child(1) .feature-text h2 {
  color: var(--purple-500);
}

.feature-section:nth-child(2) .feature-text h2 {
  color: var(--green-900);
}

.feature-section:nth-child(3) .feature-text h2 {
  color: var(--blue-900);
}

.feature-section:nth-child(4) .feature-text h2 {
  color: var(--orange-900);
}

.feature-text p {
  font-size: var(--text-2xl);
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
  margin-bottom: var(--space-xl);
}

.feature-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

.feature-visual img {
  width: 100%;
  max-width: 440px;
  border-radius: var(--radius-xl);
}

/* Delivery feature — mailbox stands planted at the bottom of the block.
   The section keeps its normal bottom padding (so the button isn't cramped),
   but the mailbox is pushed down through that padding so the post meets the
   bottom edge — on mobile (image last in the column) and desktop alike. */
.feature-visual-mailbox img {
  max-width: 480px;
  border-radius: 0;
  display: block;
  margin-bottom: calc(-1 * var(--section-padding));
}

@media (min-width: 769px) {
  .feature-visual-mailbox {
    align-self: stretch;
    align-items: flex-end;
  }
  .feature-visual-mailbox img {
    max-width: 560px;
  }
}

@media (max-width: 768px) {
  .feature-row {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }
  /* On mobile the image always follows the text it belongs to (DOM order) */
  .feature-row.reversed .feature-text,
  .feature-row.reversed .feature-visual,
  .feature-visual {
    order: unset;
  }
}

/* ---- More Features Grid ---- */

.section-more-features .section-header h2 {
  max-width: 28ch;
  margin-left: auto;
  margin-right: auto;
  /* Match the bold weight + darkest green of the feature-section headings */
  font-weight: var(--font-weight-bold);
  color: var(--green-900);
  line-height: 1.2;
  text-wrap: balance;
}

.section-more-features {
  /* Soft brand-color mesh — each corner echoes one of the four card accent colors,
     giving the frosted-glass cards something to refract against. */
  background:
    radial-gradient(circle at 12% 18%, var(--green-200) 0%, transparent 42%),
    radial-gradient(circle at 88% 22%, var(--blue-200) 0%, transparent 46%),
    radial-gradient(circle at 78% 92%, var(--purple-200) 0%, transparent 50%),
    radial-gradient(circle at 18% 88%, var(--orange-100) 0%, transparent 46%),
    var(--green-100);
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xl);
}

.feature-card {
  padding: var(--space-xl) var(--space-2xl);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.03),
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 -1px 0 rgba(255, 255, 255, 0.1);
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: var(--space-lg);
  transition: transform var(--duration-normal) var(--ease-out),
              box-shadow var(--duration-normal) var(--ease-out);
}

.feature-card-link {
  text-decoration: none;
  color: inherit;
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 14px 36px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    inset 0 -1px 0 rgba(255, 255, 255, 0.15);
}

/* Subtle top light reflection on cards */
.feature-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.25) 0%,
    transparent 35%
  );
  pointer-events: none;
}

.feature-card-icon {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-2xl);
  grid-row: 1 / -1;
  align-self: center;
}

.feature-card-icon.green {
  background: var(--green-100);
  color: var(--green-700);
}

.feature-card-icon.blue {
  background: var(--blue-100);
  color: var(--blue-700);
}

.feature-card-icon.purple {
  background: var(--purple-100);
  color: var(--purple-500);
}

.feature-card-icon.orange {
  background: var(--orange-100);
  color: var(--orange-700);
}

.feature-card h3 {
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-xs);
  align-self: end;
}

.feature-card p {
  font-size: var(--text-lg);
  color: var(--color-text);
  line-height: var(--leading-normal);
}

@media (max-width: 768px) {
  .features-grid {
    grid-template-columns: 1fr;
  }
  /* Stack the icon above the text inside each card */
  .feature-card {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    row-gap: var(--space-sm);
  }
  .feature-card-icon {
    grid-row: auto;
    align-self: start;
  }
  .feature-card h3 {
    align-self: start;
  }
}

/* ---- Steps (Will'm "how it works") — glass cards side by side ---- */

.section-steps {
  /* Soft purple wash to echo Will'm's accent colour */
  background:
    radial-gradient(circle at 15% 18%, var(--purple-200) 0%, transparent 45%),
    radial-gradient(circle at 85% 85%, var(--purple-100) 0%, transparent 50%),
    var(--color-bg-subtle);
}

.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
}

.step-card {
  padding: var(--space-2xl);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.03),
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 -1px 0 rgba(255, 255, 255, 0.1);
  transition: transform var(--duration-normal) var(--ease-out),
              box-shadow var(--duration-normal) var(--ease-out);
}

.step-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 14px 36px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    inset 0 -1px 0 rgba(255, 255, 255, 0.15);
}

/* Subtle top light reflection */
.step-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.25) 0%, transparent 35%);
  pointer-events: none;
}

.step-card > * {
  position: relative;
  z-index: 1;
}

.step-card-icon {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-2xl);
  background: var(--purple-100);
  color: var(--purple-500);
  margin-bottom: var(--space-lg);
}

.step-eyebrow {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--purple-500);
  margin-bottom: var(--space-xs);
}

.step-card h3 {
  font-size: var(--text-xl);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-sm);
}

.step-card p {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
}

@media (max-width: 768px) {
  .steps-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- FAQ ---- */

.faq-list {
  max-width: 720px;
  margin: 0 auto;
}

.faq-item {
  border-bottom: 1px solid var(--color-border);
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-lg) 0;
  background: none;
  border: none;
  font-family: var(--font-family);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out);
}

.faq-question:hover {
  color: var(--color-primary);
}

.faq-question i {
  font-size: var(--text-sm);
  transition: transform var(--duration-normal) var(--ease-out);
  flex-shrink: 0;
  margin-left: var(--space-md);
}

.faq-item.open .faq-question i {
  transform: rotate(180deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--duration-slow) var(--ease-out);
}

.faq-answer-inner {
  padding-bottom: var(--space-lg);
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
}

.faq-item.open .faq-answer {
  max-height: 300px;
}

/* ---- Section Headers ---- */

.section-header {
  text-align: center;
  margin-bottom: var(--space-3xl);
}

.section-header h2 {
  font-size: var(--text-4xl);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-md);
}

.section-header h2 strong {
  font-weight: var(--font-weight-bold);
}

.section-header p {
  font-size: var(--text-2xl);
  color: var(--color-text-secondary);
  max-width: 560px;
  margin: 0 auto;
}

/* ---- CTA / Contact (Envelope) ---- */

.cta-section {
  position: relative;
  background: var(--green-900);
  color: var(--color-on-primary);
  text-align: center;
  padding-top: calc(var(--section-padding) + clamp(60px, 12vw, 180px));
  /* Clip the flap's drop-shadow where it bleeds up past the section's top edge,
     so the shadow only falls below the flap onto the green footer. */
  overflow: hidden;
}

.cta-envelope-flap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: clamp(80px, 14vw, 220px);
  display: block;
  z-index: 2;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.15));
  pointer-events: none;
}

.cta-headline {
  font-size: var(--text-5xl);
  font-weight: 600;
  color: var(--green-400);
  line-height: 1.15;
  margin-bottom: var(--space-2xl);
  text-align: center;
}

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

/* — CTA Primary (white glass on dark green) — */
.btn-cta-primary {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--green-900);
  box-shadow:
    0 2px 12px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.btn-cta-primary:hover {
  background: rgba(255, 255, 255, 0.95);
  transform: translateY(-1px);
  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.btn-cta-primary:active {
  transform: translateY(0.5px);
  background: rgba(255, 255, 255, 0.8);
  box-shadow:
    0 1px 6px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transition-duration: var(--duration-fast);
}

.btn-cta-primary:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.35),
    0 2px 12px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* — CTA Outline (frosted glass on dark green) — */
.btn-cta-outline {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--color-on-primary);
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.btn-cta-outline:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.45);
  color: var(--color-on-primary);
  transform: translateY(-1px);
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.btn-cta-outline:active {
  transform: translateY(0.5px);
  background: rgba(255, 255, 255, 0.2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition-duration: var(--duration-fast);
}

.btn-cta-outline:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* ---- Footer ---- */

.footer {
  background: var(--gray-900);
  color: var(--gray-400);
  padding: var(--space-3xl) 0 var(--space-xl);
}

.footer-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-3xl);
  margin-bottom: var(--space-3xl);
}

.footer-brand img {
  height: 1.75rem;
  margin-bottom: var(--space-md);
}

.footer-brand p {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  max-width: 280px;
}

.footer-col h4 {
  color: var(--gray-00);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-lg);
}

.footer-col ul {
  list-style: none;
}

.footer-col li {
  margin-bottom: var(--space-sm);
}

.footer-col a {
  font-size: var(--text-sm);
  color: var(--gray-400);
  transition: color var(--duration-fast) var(--ease-out);
}

.footer-col a:hover {
  color: var(--gray-00);
}

/* External-link indicator on outbound footer links */
.footer-external-icon {
  font-size: 0.7em;
  margin-left: 0.15em;
  opacity: 0.6;
  vertical-align: baseline;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: var(--space-xl);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-xs);
}

.footer-bottom a {
  color: var(--gray-500);
}

.footer-bottom a:hover {
  color: var(--gray-00);
}

@media (max-width: 768px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
  }
  .footer-bottom {
    flex-direction: column;
    gap: var(--space-md);
    text-align: center;
  }
}

@media (max-width: 576px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
}
/* ---- Scroll reveal base states ---- */

[data-animate] {
  opacity: 0;
  will-change: transform, opacity;
}

[data-animate="fade-up"] {
  transform: translateY(40px);
}

[data-animate="fade-in"] {
  transform: none;
}

[data-animate="fade-left"] {
  transform: translateX(60px);
}

[data-animate="fade-right"] {
  transform: translateX(-60px);
}

[data-animate="scale-in"] {
  transform: scale(0.92);
}

/* Animated state (applied by JS) */
[data-animate].is-visible {
  opacity: 1;
  transform: none;
  transition: opacity var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-out);
}

/* Buttons need full transition restored after scroll-reveal completes,
   so hover effects (background, box-shadow, transform) animate smoothly. */
[data-animate].btn.is-visible {
  transition: all var(--duration-normal) var(--ease-out);
}

/* Stagger children */
[data-stagger] > * {
  opacity: 0;
  transform: translateY(20px);
}

[data-stagger].is-visible > * {
  opacity: 1;
  transform: none;
  transition: opacity var(--duration-normal) var(--ease-out),
              transform var(--duration-normal) var(--ease-out);
}

[data-stagger].is-visible > *:nth-child(1) { transition-delay: 0ms; }
[data-stagger].is-visible > *:nth-child(2) { transition-delay: 80ms; }
[data-stagger].is-visible > *:nth-child(3) { transition-delay: 160ms; }
[data-stagger].is-visible > *:nth-child(4) { transition-delay: 240ms; }
[data-stagger].is-visible > *:nth-child(5) { transition-delay: 320ms; }
[data-stagger].is-visible > *:nth-child(6) { transition-delay: 400ms; }

/* ---- Parallax ---- */

[data-parallax] {
  will-change: transform;
}