*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  zoom: 1.1;
}

body {
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  color: #fff;
  background-color: #0a1535;
}

/* ── Navbar ── */
.navbar {
  background-color: transparent;
  padding: 0 32px;
  width: 100%;
  position: relative;
  z-index: 100;
}

.navbar__container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 48px;
  width: 100%;
}

.navbar__logo img {
  height: 36px;
  width: 162px;
  object-fit: contain;
  display: block;
}

.navbar__nav {
  display: flex;
  align-items: center;
}

.navbar__links {
  display: flex;
  align-items: center;
  list-style: none;
  gap: 0;
}

.navbar__item {
  position: relative;
}

.navbar__link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  padding-left: 18px;        /* room for the ▶ cursor */
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 13px;
  line-height: 1.5;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  transition: color 0.1s, text-shadow 0.1s, transform 0.1s;
}

/* pixel ▶ cursor — hidden by default */
.navbar__link::before {
  content: '▶';
  position: absolute;
  left: 4px;
  font-size: 7px;
  font-family: 'Press Start 2P', monospace;
  color: #ffd700;
  opacity: 0;
  pointer-events: none;
  line-height: 1;
  top: 50%;
  transform: translateY(-50%);
}

.navbar__link:hover {
  color: #ffd700;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.55);
  transform: translateY(-1px);
}

.navbar__link:hover::before {
  animation: pixel-cursor-blink 0.45s step-end infinite;
}

@keyframes pixel-cursor-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

.navbar__arrow {
  width: 8px;
  height: 5px;
  display: inline-block;
  flex-shrink: 0;
  align-self: center;
  transition: transform 0.2s;
}

.navbar__icon {
  width: 24px;
  height: 24px;
  display: block;
  flex-shrink: 0;
}

/* ── Login button ── */
.navbar__link--login {
  background: #ffd700;
  color: #0a1535 !important;
  border-radius: 4px;
  padding: 7px 16px;
  font-weight: 600;
  margin-left: 6px;
  transition: background 0.15s, transform 0.1s;
}
.navbar__link--login:hover {
  background: #ffe84d;
  color: #0a1535 !important;
  text-shadow: none;
}
.navbar__link--login::before { display: none; }

/* ── Mega-menu & Simple Dropdown shared foundation ── */
/* .navbar__item already has position:relative — keep it */

.mega-drop,
.simple-drop {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 500;
}

/* Show on hover */
.navbar__item--mega:hover   > .mega-drop,
.navbar__item--simple-drop:hover > .simple-drop { display: flex; }

/* Arrow rotation on hover */
.navbar__item--mega:hover   > a .navbar__arrow,
.navbar__item--simple-drop:hover > a .navbar__arrow {
  transform: rotate(180deg);
  transition: transform 0.2s;
}

/* ── Mega-drop layout ── */
.mega-drop {
  min-width: 680px;
  background: #0e1e4a;
  border: 1px solid rgba(255,255,255,0.08);
  border-top: 2px solid #ffd700;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.55);
  flex-direction: row;
  padding: 0;
  overflow: hidden;
}

/* ── Sidebar (tab list) ── */
.mega-drop__sidebar {
  display: flex;
  flex-direction: column;
  min-width: 170px;
  background: #091232;
  padding: 12px 0;
  border-right: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}

.mega-tab {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  cursor: pointer;
  color: rgba(255,255,255,0.65);
  font-size: 13px;
  font-weight: 500;
  transition: background 0.15s, color 0.15s;
  user-select: none;
  position: relative;
}

.mega-tab svg {
  flex-shrink: 0;
  opacity: 0.7;
}

.mega-tab__arr {
  margin-left: auto;
  font-size: 16px;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.15s;
}

.mega-tab:hover,
.mega-tab--active {
  background: rgba(255,215,0,0.07);
  color: #fff;
}

.mega-tab:hover .mega-tab__arr,
.mega-tab--active .mega-tab__arr { opacity: 1; }

.mega-tab--active {
  border-left: 3px solid #ffd700;
  padding-left: 15px; /* compensate for border */
}

.mega-tab--active svg { opacity: 1; }

/* Our Services and Resources menus right-anchor so they don't overflow the viewport */
#nav-services > .mega-drop,
#nav-resources > .mega-drop {
  left: auto;
  right: 0;
}

/* ── Body (panel area) ── */
.mega-drop__body {
  flex: 1;
  padding: 20px 24px;
  min-height: 180px;
}

/* ── Panels ── */
.mega-panel {
  display: none;
}
.mega-panel--active {
  display: block;
}

/* ── Link grids ── */
.mega-links {
  display: grid;
  gap: 2px 16px;
}
.mega-links--2col { grid-template-columns: repeat(2, 1fr); }
.mega-links--3col { grid-template-columns: repeat(3, 1fr); }
.mega-links--4col { grid-template-columns: repeat(4, 1fr); }

.mega-links a {
  display: block;
  padding: 8px 6px;
  font-size: 12.5px;
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  border-radius: 4px;
  transition: color 0.13s, background 0.13s;
  line-height: 1.4;
}
.mega-links a:hover {
  color: #ffd700;
  background: rgba(255,215,0,0.06);
}

/* ── Simple drop (Industries) ── */
.simple-drop {
  flex-direction: column;
  min-width: 210px;
  background: #0e1e4a;
  border: 1px solid rgba(255,255,255,0.08);
  border-top: 2px solid #ffd700;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.5);
  padding: 8px 0;
  left: 0;
}
.simple-drop a {
  display: block;
  padding: 10px 20px;
  font-size: 13px;
  color: rgba(255,255,255,0.8);
  text-decoration: none;
  transition: color 0.13s, background 0.13s;
}
.simple-drop a:hover {
  color: #ffd700;
  background: rgba(255,215,0,0.06);
}

/* ── Featured On ── */
.featured {
  background-color: #f7f7f7;
  margin-top: 0;
  padding: 28px 0 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  overflow: hidden;
  position: relative;
}

.featured__heading {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  text-align: center;
}

.featured__track-wrap {
  width: 100%;
  overflow: hidden;
  /* fade edges */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}

.featured__track {
  display: flex;
  align-items: center;
  gap: 56px;
  width: max-content;
  will-change: transform;
  animation: marquee 30s linear infinite;
}

.featured__track:hover {
  animation-play-state: paused;
}

.featured__logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 148px;
  height: 48px;
  padding: 0 12px;
}

.featured__logo-wrap img {
  height: 32px;
  width: auto;
  max-width: 120px;
  object-fit: contain;
  object-position: center;
  display: block;
  filter: grayscale(100%);
  opacity: 0.55;
  transition: opacity 0.2s;
}

.featured__logo-wrap img:hover {
  opacity: 0.9;
}

.featured__logo-wrap img[alt="Ranktracker"],
.featured__logo-wrap img[alt="YourStory"],
.featured__logo-wrap img[alt="CartFlows"],
.featured__logo-wrap img[alt="RankWatch"] {
  height: 64px;
  max-width: 140px;
}

.featured__logo-wrap img[alt="SmartReach"] {
  height: 48px;
  max-width: 130px;
}

.featured__logo-wrap img[alt="SEO Mastery Summit"] {
  height: 128px;
  max-width: 140px;
}

@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ── Hero (Mario Style — Night Mode) ── */
.hero {
  position: relative;
  width: 100%;
  min-height: 660px;
  overflow: hidden;
  background: linear-gradient(180deg, #0a1535 0%, #0d1f55 40%, #1a2a6c 70%, #2a3a7a 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 48px;
  padding-bottom: 0;
}

/* ── Stars ── */
.hero__stars,
.hero__stars--2,
.hero__stars--3 {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.hero__stars {
  background-image:
    radial-gradient(2px 2px at  4%  8%, #fff 0%, transparent 100%),
    radial-gradient(3px 3px at 11% 14%, #fff 0%, transparent 100%),
    radial-gradient(2px 2px at 19%  5%, #fff 0%, transparent 100%),
    radial-gradient(3px 3px at 27% 20%, #fff 0%, transparent 100%),
    radial-gradient(2px 2px at 33%  9%, #fff 0%, transparent 100%),
    radial-gradient(2px 2px at 41% 16%, #fff 0%, transparent 100%),
    radial-gradient(3px 3px at 49%  4%, #fff 0%, transparent 100%),
    radial-gradient(2px 2px at 57% 22%, #fff 0%, transparent 100%),
    radial-gradient(3px 3px at 64%  11%, #fff 0%, transparent 100%),
    radial-gradient(2px 2px at 72%  6%, #fff 0%, transparent 100%),
    radial-gradient(3px 3px at 80% 17%, #fff 0%, transparent 100%),
    radial-gradient(2px 2px at 87%  3%, #fff 0%, transparent 100%),
    radial-gradient(2px 2px at 94% 13%, #fff 0%, transparent 100%),
    radial-gradient(2px 2px at 15% 30%, rgba(255,255,255,0.8) 0%, transparent 100%),
    radial-gradient(2px 2px at 36% 36%, rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(2px 2px at 53% 32%, rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(2px 2px at 76% 28%, rgba(255,255,255,0.8) 0%, transparent 100%),
    radial-gradient(2px 2px at 90% 35%, rgba(255,255,255,0.7) 0%, transparent 100%);
  animation: star-twinkle-a 2.4s ease-in-out infinite alternate;
}

.hero__stars--2 {
  background-image:
    radial-gradient(2px 2px at  7% 24%, #fff 0%, transparent 100%),
    radial-gradient(3px 3px at 16%  2%, #fff 0%, transparent 100%),
    radial-gradient(2px 2px at 24% 18%, #fff 0%, transparent 100%),
    radial-gradient(2px 2px at 31% 28%, rgba(255,255,255,0.9) 0%, transparent 100%),
    radial-gradient(3px 3px at 44%  7%, #fff 0%, transparent 100%),
    radial-gradient(2px 2px at 52% 26%, rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(3px 3px at 60%  1%, #fff 0%, transparent 100%),
    radial-gradient(2px 2px at 68% 19%, #fff 0%, transparent 100%),
    radial-gradient(2px 2px at 77% 31%, rgba(255,255,255,0.8) 0%, transparent 100%),
    radial-gradient(3px 3px at 85%  9%, #fff 0%, transparent 100%),
    radial-gradient(2px 2px at 97% 21%, #fff 0%, transparent 100%),
    radial-gradient(2px 2px at  2% 38%, rgba(255,255,255,0.7) 0%, transparent 100%),
    radial-gradient(2px 2px at 38% 40%, rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(2px 2px at 70% 42%, rgba(255,255,255,0.8) 0%, transparent 100%);
  animation: star-twinkle-b 1.8s ease-in-out infinite alternate;
}

.hero__stars--3 {
  background-image:
    radial-gradient(1px 1px at  9%  3%, #fff 0%, transparent 100%),
    radial-gradient(1px 1px at 20% 12%, rgba(255,255,255,0.9) 0%, transparent 100%),
    radial-gradient(1px 1px at 29%  7%, #fff 0%, transparent 100%),
    radial-gradient(1px 1px at 46% 15%, rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 55%  9%, #fff 0%, transparent 100%),
    radial-gradient(1px 1px at 63% 24%, rgba(255,255,255,0.9) 0%, transparent 100%),
    radial-gradient(1px 1px at 73%  4%, #fff 0%, transparent 100%),
    radial-gradient(1px 1px at 83% 20%, rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 92%  8%, #fff 0%, transparent 100%),
    radial-gradient(1px 1px at 13% 42%, rgba(255,255,255,0.7) 0%, transparent 100%),
    radial-gradient(1px 1px at 48% 38%, rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(1px 1px at 82% 37%, rgba(255,255,255,0.7) 0%, transparent 100%);
  animation: star-twinkle-c 3.1s ease-in-out infinite alternate;
}

@keyframes star-twinkle-a {
  0%   { opacity: 0.2; }
  25%  { opacity: 1;   }
  50%  { opacity: 0.5; }
  75%  { opacity: 0.9; }
  100% { opacity: 0.3; }
}

@keyframes star-twinkle-b {
  0%   { opacity: 1;   }
  30%  { opacity: 0.2; }
  60%  { opacity: 0.8; }
  100% { opacity: 0.15; }
}

@keyframes star-twinkle-c {
  0%   { opacity: 0.6; }
  40%  { opacity: 0.1; }
  70%  { opacity: 1;   }
  100% { opacity: 0.4; }
}

/* ── Moon ── */
.hero__moon {
  position: absolute;
  top: 80px;
  right: 7%;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #fffde0;
  box-shadow:
    0 0 0 3px #faf5b0,
    0 0 24px 8px rgba(255,253,180,0.45),
    0 0 60px 24px rgba(255,250,120,0.18),
    0 0 120px 48px rgba(255,248,100,0.08);
  image-rendering: pixelated;
  z-index: 2;
  cursor: pointer;
  user-select: none;
  transition: transform 0.2s ease;
}
.hero__moon:hover { transform: scale(1.08); }
/* crescent shadow */
.hero__moon::before {
  content: '';
  position: absolute;
  top: -5px;
  right: -8px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #0d1f55;
}

/* ── Pixel Clouds (Night — moonlit) ── */
.hero__cloud {
  position: absolute;
  left: 0;
  width: 112px;
  height: 36px;
  background: #c8d8f8;
  image-rendering: pixelated;
  z-index: 1;
  opacity: 0.45;
}
.hero__cloud::before {
  content: '';
  position: absolute;
  background: #c8d8f8;
  width: 72px;
  height: 36px;
  top: -28px;
  left: 20px;
}
.hero__cloud::after {
  content: '';
  position: absolute;
  background: #c8d8f8;
  width: 40px;
  height: 24px;
  top: -48px;
  left: 36px;
}
/* Cloud infinite scroll — nth-child: rain(1) dust(2) stars(3,4,5) moon(6) → clouds start at 7 */
.hero__cloud:nth-child(7)  { animation: cloud-scroll    28s linear infinite; animation-delay:   0s; }
.hero__cloud:nth-child(8)  { animation: cloud-scroll-sm 20s linear infinite; animation-delay:  -6s; }
.hero__cloud:nth-child(9)  { animation: cloud-scroll    35s linear infinite; animation-delay: -14s; }
.hero__cloud:nth-child(10) { animation: cloud-scroll-sm 24s linear infinite; animation-delay: -20s; }

@keyframes cloud-scroll {
  from { transform: translateX(110vw); }
  to   { transform: translateX(-200px); }
}

@keyframes cloud-scroll-sm {
  from { transform: scale(0.65) translateX(170vw); }
  to   { transform: scale(0.65) translateX(-310px); }
}

/* ── Hills (Night) ── */
.hero__hill {
  position: absolute;
  bottom: 76px;
  background: #122a0c;
  z-index: 2;
  image-rendering: pixelated;
  /* 8-step pixel staircase silhouette */
  clip-path: polygon(
    0% 100%,
    0% 87.5%,   6.25% 87.5%,
    6.25% 75%,  12.5% 75%,
    12.5% 62.5%,18.75% 62.5%,
    18.75% 50%, 25% 50%,
    25% 37.5%,  31.25% 37.5%,
    31.25% 25%, 37.5% 25%,
    37.5% 12.5%,43.75% 12.5%,
    43.75% 0%,  56.25% 0%,
    56.25% 12.5%,62.5% 12.5%,
    62.5% 25%,  68.75% 25%,
    68.75% 37.5%,75% 37.5%,
    75% 50%,    81.25% 50%,
    81.25% 62.5%,87.5% 62.5%,
    87.5% 75%,  93.75% 75%,
    93.75% 87.5%,100% 87.5%,
    100% 100%
  );
}
.hero__hill--back {
  background: #1a2240; /* distant rocky silhouette — dark navy-slate */
  z-index: 1;
}
.hero__hill--lt {
  background: #253058; /* closer peak — slightly lighter blue-grey */
  z-index: 3;
}

/* ── Text Content ── */
.hero__content {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
  max-width: 1100px;
  padding: 0 80px;
}

.hero__heading {
  font-family: 'Press Start 2P', monospace;
  font-size: 28px;
  line-height: 1.4;
  text-align: center;
  color: #dce8ff;
  text-shadow:
    3px 3px 0 #00081a,
    -1px -1px 0 #00081a,
    1px -1px 0 #00081a,
    -1px  1px 0 #00081a,
    0 0 28px rgba(140, 180, 255, 0.35);
  animation: mario-title-pulse 1.8s ease-in-out infinite;
  display: inline-block;
}

@keyframes mario-title-pulse {
  0%, 100% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.07);
  }
  60% {
    transform: scale(1.04);
  }
}

@keyframes cta-title-pulse {
  0%, 100% { transform: scale(1); }
  30%      { transform: scale(1.035); }
  60%      { transform: scale(1.02); }
}

.hero__heading strong {
  color: #ffd700;
  text-shadow:
    3px 3px 0 #3a1a00,
    -1px -1px 0 #3a1a00,
    1px -1px 0 #3a1a00,
    -1px  1px 0 #3a1a00,
    0 0 24px rgba(255, 200, 50, 0.45);
}

.hero__subtext {
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.6;
  text-align: center;
  color: rgba(200, 220, 255, 0.82);
  text-shadow: 0 1px 12px rgba(0, 10, 40, 0.7);
  max-width: 680px;
}

.hero__cta-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

@keyframes retro-shine {
  0%   { transform: translateX(-200%); }
  100% { transform: translateX(350%);  }
}

@keyframes retro-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 20px 39px;
  background-color: #b87200;
  border-bottom: 6px solid #6b4000;
  font-family: 'Press Start 2P', monospace;
  font-size: 17px;
  color: #fff8e0;
  text-decoration: none;
  white-space: nowrap;
  image-rendering: pixelated;
  box-shadow: 0 0 24px rgba(184, 114, 0, 0.4), 0 0 60px rgba(184, 114, 0, 0.15);
  overflow: hidden;
  position: relative;
  transition: transform 0.1s, border-bottom-width 0.1s, box-shadow 0.1s;
}

.hero__cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 60%;
  height: 100%;
  will-change: transform;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(255, 255, 255, 0.35) 50%,
    transparent 70%
  );
  animation: retro-shine 2.4s ease-in-out infinite;
}

.hero__cta::after {
  content: '▮';
  position: absolute;
  right: 14px;
  font-size: 12px;
  color: rgba(255, 248, 224, 0.85);
  animation: retro-blink 0.8s steps(1) infinite;
}
.hero__cta:hover {
  transform: translateY(3px);
  border-bottom-width: 2px;
  box-shadow: 0 0 32px rgba(184, 114, 0, 0.55), 0 0 80px rgba(184, 114, 0, 0.2);
}

/* ── Character Stage ── */
.hero__stage {
  position: absolute;
  bottom: 76px;
  left: 0;
  right: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 120px;
  z-index: 5;
}

.hero__character {
  display: flex;
  align-items: flex-end;
}

.hero__character img {
  height: 180px;
  width: auto;
  image-rendering: pixelated;
}

/* ── Pixel Trees ── */
.hero__tree {
  position: absolute;
  bottom: 76px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  image-rendering: pixelated;
}

/* 3-tier stacked rectangle canopy — no border-radius, hard pixel edges */
.hero__tree-canopy {
  position: relative;
  width: 176px;
  height: 64px;
  background: #132e09;
  border-radius: 0;
  box-shadow: inset 0 5px 0 #1c4210; /* highlight strip on top edge */
}
.hero__tree-canopy::before {
  content: '';
  position: absolute;
  width: 128px;
  height: 56px;
  background: #193809;
  border-radius: 0;
  box-shadow: inset 0 5px 0 #235214;
  top: -56px;
  left: 24px;
}
.hero__tree-canopy::after {
  content: '';
  position: absolute;
  width: 88px;
  height: 48px;
  background: #1e4810;
  border-radius: 0;
  box-shadow: inset 0 5px 0 #2a6618;
  top: -104px;
  left: 44px;
}

.hero__tree-trunk {
  width: 40px;
  height: 80px;
  background: #3d2008;
  border-radius: 0;
  box-shadow: inset 3px 0 0 #2a1505; /* left shadow edge */
}

/* sm — 75% scale (snap to 8px grid) */
.hero__tree--sm .hero__tree-canopy         { width: 136px; height: 48px; }
.hero__tree--sm .hero__tree-canopy::before { width:  96px; height: 40px; top: -40px; left: 20px; }
.hero__tree--sm .hero__tree-canopy::after  { width:  64px; height: 32px; top: -72px; left: 36px; }
.hero__tree--sm .hero__tree-trunk          { width:  32px; height: 64px; }

/* xs — 55% scale */
.hero__tree--xs .hero__tree-canopy         { width:  96px; height: 32px; }
.hero__tree--xs .hero__tree-canopy::before { width:  72px; height: 28px; top: -28px; left: 12px; }
.hero__tree--xs .hero__tree-canopy::after  { width:  48px; height: 24px; top: -52px; left: 24px; }
.hero__tree--xs .hero__tree-trunk          { width:  24px; height: 48px; }

/* ── Lightning ── */
.hero__lightning-flash {
  position: absolute;
  inset: 0;
  background: rgba(220, 235, 255, 0.6);
  z-index: 19;
  pointer-events: none;
  animation: lightning-flash 0.55s ease-out forwards;
}

@keyframes lightning-flash {
  0%   { opacity: 0; }
  8%   { opacity: 1; }
  22%  { opacity: 0.05; }
  38%  { opacity: 0.75; }
  65%  { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes bolt-fade {
  0%   { opacity: 1; }
  65%  { opacity: 0.85; }
  100% { opacity: 0; }
}

/* ── Sunbeam dust (day only) ── */
.hero__dust {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.8s ease;
}
body.day-mode .hero__dust { opacity: 1; }

/* Our Tools dust container */
.our-tools__dust {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.8s ease;
}
body.day-mode .our-tools__dust { opacity: 1; }
.our-tools__dust::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(118deg, rgba(255,230,100,0.07) 0%, transparent 38%),
    linear-gradient(135deg, rgba(255,220,80,0.05)  8%, transparent 42%),
    linear-gradient(108deg, rgba(255,240,140,0.04) 20%, transparent 50%);
  pointer-events: none;
}

/* Sky-scene dust container (covers Meet the Team, FAQ, Ready to Start) */
.sky-scene__dust {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.8s ease;
}
body.day-mode .sky-scene__dust { opacity: 1; }
.sky-scene__dust::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(118deg, rgba(255,230,100,0.07) 0%, transparent 38%),
    linear-gradient(135deg, rgba(255,220,80,0.05)  8%, transparent 42%),
    linear-gradient(108deg, rgba(255,240,140,0.04) 20%, transparent 50%);
  pointer-events: none;
}

/* Diagonal sunbeam shafts */
.hero__dust::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(118deg, rgba(255,230,100,0.07) 0%, transparent 38%),
    linear-gradient(135deg, rgba(255,220,80,0.05)  8%, transparent 42%),
    linear-gradient(108deg, rgba(255,240,140,0.04) 20%, transparent 50%);
  pointer-events: none;
}

.hero__dust-mote {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 220, 80, 0.9);
  box-shadow: 0 0 4px rgba(255, 200, 50, 0.7), 0 0 8px rgba(255, 180, 0, 0.3);
  animation: dust-float linear infinite;
}

@keyframes dust-float {
  0%   { transform: translateY(0)     translateX(0);           opacity: 0; }
  8%   { opacity: 1; }
  50%  { transform: translateY(-55px) translateX(var(--drift-x, 20px)); }
  92%  { opacity: 1; }
  100% { transform: translateY(-110px) translateX(calc(var(--drift-x, 20px) * -0.4)); opacity: 0; }
}

/* ── Rain (night only) ── */
.hero__rain {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 76px; /* clip at grass top — rain stops here */
  z-index: 7;
  pointer-events: none;
  overflow: hidden;
  opacity: 1;
  transition: opacity 0.6s ease;
}

body.day-mode .hero__rain { opacity: 0; }

.hero__raindrop {
  position: absolute;
  top: 0;
  width: 1px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(180, 220, 255, 0.75) 60%,
    rgba(220, 240, 255, 0.9) 100%
  );
  border-radius: 0 0 1px 1px;
  will-change: transform;
  animation: raindrop-fall linear infinite;
}

@keyframes raindrop-fall {
  from { transform: translate(120px, -40px); }
  to   { transform: translate(-40px, 400vh); }
}

/* ── Dragon (flies ahead of knight) ── */
.hero__dragon-wrap {
  position: absolute;
  bottom: 340px;
  left: 0;
  width: 100%;
  z-index: 5;
  pointer-events: none;
}

.hero__dragon-gif {
  position: absolute;
  bottom: 0;
  height: 188px;
  width: auto;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  animation: knight-patrol 14s linear infinite, dragon-bob 2.2s ease-in-out infinite;
  animation-delay: -2s, 0s;
  filter: brightness(0.55) contrast(1.1);
}

@keyframes dragon-bob {
  0%, 100% { transform: translateY(0px);   }
  50%       { transform: translateY(-20px); }
}

/* ── Knight Runner ── */
.hero__knight-wrap {
  position: absolute;
  bottom: 74px;
  left: 0;
  width: 100%;
  z-index: 6;
  pointer-events: none;
}

.hero__knight-gif {
  position: absolute;
  bottom: 0;
  height: 117px;
  width: auto;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  animation: knight-patrol 14s linear infinite;
  pointer-events: auto;
  cursor: pointer;
  filter: brightness(0.55) contrast(1.1);
}

@keyframes knight-patrol {
  0%     { left: -200px; }
  71.5%  { left: 100%;   }   /* exit right — crossing takes 10s of a 14s cycle */
  100%   { left: 110%;   }   /* hold off-screen right until knight also exits */
}

/* ── Ground ── */
.hero__ground {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3;
}

.hero__grass {
  height: 16px;
  background:
    repeating-linear-gradient(
      90deg,
      #163a0a 0px 6px,
      #1f4d10 6px 10px,
      #0f2806 10px 14px,
      #1c4412 14px 18px,
      #163a0a 18px 22px,
      #193f0d 22px 26px,
      #0f2806 26px 32px
    );
  border-top: 3px solid #2a5e18;
}

.hero__bricks {
  height: 60px;
  background: linear-gradient(to bottom, #1e0a04 0%, #f7f7f7 100%);
}

/* ════════════════════════════════════════
   DAY MODE  (toggled by clicking the moon)
   ════════════════════════════════════════ */

/* Smooth transition on key elements */
.hero,
.hero__moon,
.hero__stars,
.hero__stars--2,
.hero__stars--3,
.hero__cloud,
.hero__hill,
.hero__tree-canopy,
.hero__grass,
.hero__bricks,
.hero__heading,
.hero__subtext,
.hero__cta,
.navbar__link {
  transition:
    background 0.5s ease,
    background-color 0.5s ease,
    color 0.5s ease,
    opacity 0.5s ease,
    box-shadow 0.5s ease,
    border-color 0.5s ease;
}

/* Sky */
body.day-mode { background-color: #1a78d4; }
body.day-mode .hero {
  background: linear-gradient(180deg,
    #1a78d4 0%,
    #3a9de8 35%,
    #6cc0f5 65%,
    #a8daff 100%
  );
}

/* Stars — vanish */
body.day-mode .hero__stars,
body.day-mode .hero__stars--2,
body.day-mode .hero__stars--3 {
  opacity: 0 !important;
  animation: none;
}

/* Moon → Sun */
body.day-mode .hero__moon {
  background: #ffe033;
  box-shadow:
    0 0 0 4px #ffb700,
    0 0 30px 12px rgba(255,200,0,0.65),
    0 0 70px 28px rgba(255,180,0,0.3);
}
/* Hide crescent cutout */
body.day-mode .hero__moon::before { opacity: 0; }
/* Spinning pixel rays */
body.day-mode .hero__moon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: transparent;
  transform: translate(-50%, -50%) rotate(0deg);
  box-shadow:
    0 -52px 0 4px #ffcc00,
    37px -37px 0 4px #ffcc00,
    52px 0 0 4px #ffcc00,
    37px 37px 0 4px #ffcc00,
    0 52px 0 4px #ffcc00,
    -37px 37px 0 4px #ffcc00,
    -52px 0 0 4px #ffcc00,
    -37px -37px 0 4px #ffcc00;
  animation: sun-spin 8s linear infinite;
}
@keyframes sun-spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Clouds — bright white */
body.day-mode .hero__cloud {
  background: #ffffff;
  opacity: 0.75 !important;
}

/* Hills — stone grey-blue (rocky, not green) */
body.day-mode .hero__hill--back { background: #4a5878; }
body.day-mode .hero__hill--lt   { background: #60708e; }

/* Trees — brighter canopy tiers + highlight strips */
body.day-mode .hero__tree-canopy         { background: #1e6c0c; box-shadow: inset 0 5px 0 #2d9618; }
body.day-mode .hero__tree-canopy::before { background: #287a10; box-shadow: inset 0 5px 0 #38aa20; }
body.day-mode .hero__tree-canopy::after  { background: #329614; box-shadow: inset 0 5px 0 #44c028; }

/* Grass — vivid green */
body.day-mode .hero__grass {
  background:
    repeating-linear-gradient(
      90deg,
      #2a8010 0px 6px,
      #369e18 6px 10px,
      #1e6808 10px 14px,
      #30901a 14px 18px,
      #2a8010 18px 22px,
      #2e8c14 22px 26px,
      #1e6808 26px 32px
    );
  border-top: 3px solid #50cc28;
}

/* Ground fade — lighter brown to featured */
body.day-mode .hero__bricks {
  background: linear-gradient(to bottom, #5c3010 0%, #f7f7f7 100%);
}

/* Hero text — dark on light sky */
body.day-mode .hero__heading {
  color: #0a2055;
  text-shadow:
    2px 2px 0 rgba(255,255,255,0.6),
    -1px -1px 0 rgba(255,255,255,0.3);
}
body.day-mode .hero__heading strong {
  color: #c85a00;
  text-shadow:
    2px 2px 0 rgba(255,255,255,0.5),
    0 0 20px rgba(255,120,0,0.35);
}
body.day-mode .hero__subtext {
  color: rgba(8, 32, 90, 0.88);
  text-shadow: 0 1px 6px rgba(255,255,255,0.4);
}

/* CTA button — daytime blue */
body.day-mode .hero__cta {
  background-color: #1060b8;
  border-bottom-color: #08408a;
  box-shadow: 0 0 20px rgba(16,96,184,0.4);
}
body.day-mode .hero__cta:hover {
  background-color: #1470d4;
}

/* Navbar links — dark on bright sky */
body.day-mode .navbar__link { color: #0a2055; }
body.day-mode .navbar__link:hover { color: #c85a00; }

/* Characters — reverse direction right→left, flip sprites */
@keyframes knight-patrol-day {
  0%     { left: 100%;   }
  71.5%  { left: -250px; }   /* exit left — same 10s crossing */
  100%   { left: -350px; }   /* hold off-screen left */
}

/* Dragon bob with built-in horizontal flip for day mode */
@keyframes dragon-bob-day {
  0%, 100% { transform: scaleX(-1) translateY(0px);   }
  50%       { transform: scaleX(-1) translateY(-20px); }
}

body.day-mode .hero__knight-gif {
  animation: knight-patrol-day 14s linear infinite;
  animation-delay: 0s;
  transform: scaleX(-1); /* face left */
  filter: none;
}

/* Dragon leads: -2s delay puts it 2s further along the reversed path = further left = ahead */
body.day-mode .hero__dragon-gif {
  animation: knight-patrol-day 14s linear infinite, dragon-bob-day 2.2s ease-in-out infinite;
  animation-delay: -2s, 0s;
  filter: none;
}

/* ── Knight jump (click) ── */
@keyframes knight-jump {
  0%   { transform: translateY(0px); }
  38%  { transform: translateY(-52px); }
  62%  { transform: translateY(-52px); }
  100% { transform: translateY(0px); }
}

@keyframes knight-jump-day {
  0%   { transform: scaleX(-1) translateY(0px); }
  38%  { transform: scaleX(-1) translateY(-52px); }
  62%  { transform: scaleX(-1) translateY(-52px); }
  100% { transform: scaleX(-1) translateY(0px); }
}

/* Night mode: both patrol + jump run — knight moves forward through the arc */
.hero__knight-gif.is-jumping {
  animation: knight-patrol 14s linear infinite, knight-jump 0.6s ease-out forwards;
}

/* Day mode: same but reversed patrol + flipped jump */
body.day-mode .hero__knight-gif.is-jumping {
  animation: knight-patrol-day 14s linear infinite, knight-jump-day 0.6s ease-out forwards;
  transform: none; /* jump keyframe handles scaleX(-1) internally */
}

/* ════════════════════════════════════════
   VALUE PROP + TESTIMONIAL
   ════════════════════════════════════════ */
.value-prop {
  background: #f7f7f7;
  padding: 72px 0;
  position: relative;
  overflow: hidden;
}

/* Subtle pixel-grid watermark in the background */
.value-prop::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,0,0,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.03) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  z-index: 0;
}

/* Orange accent bar on the left edge */
.value-prop::after {
  content: '';
  position: absolute;
  left: 0;
  top: 10%;
  height: 80%;
  width: 4px;
  background: linear-gradient(to bottom, transparent, #e69500 30%, #e69500 70%, transparent);
  pointer-events: none;
  z-index: 0;
}

.value-prop__container {
  display: block;
  align-items: center;
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 48px;
}

.value-prop__left {
  max-width: 100%;
}

.value-prop__right {
  display: none;
}

.value-prop__label {
  display: inline-block;
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #e69500;
  text-transform: uppercase;
  margin: 0 0 14px;
}

/* ── Heading ── */
.value-prop__heading {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  max-width: none;
  font-size: 36px;
  line-height: 1.35;
  color: #0a1535;
  margin: 0 0 20px;
}

.value-prop__heading strong {
  color: #e69500;
}

/* ── Body copy ── */
.value-prop__body {
  display: flex;
  flex-direction: column;
}

.value-prop__body p strong {
  color: #0d1b2a;
  font-weight: 700;
}

.value-prop__body p {
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  line-height: 1.75;
  color: #666;
  margin: 0 0 10px;
}

/* ── Stat bar ── */
.value-prop__stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  padding: 32px 40px;
}

.value-prop__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.value-prop__stat-num {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.4rem, 2.5vw, 1.8rem);
  font-weight: 800;
  color: #3d9900;
  line-height: 1;
}

.value-prop__stat--tp {
  align-self: flex-start;
}

.value-prop__stat-tp {
  height: 43px;
  width: auto;
  display: block;
  margin: 0 auto;
}

.value-prop__stat-label {
  font-family: 'Poppins', sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  color: #3d9900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-align: center;
}

.value-prop__stat-divider {
  width: 1px;
  height: 32px;
  background: #c8c0b4;
  flex-shrink: 0;
}

/* ── Trustpilot stat ── */
.value-prop__trustpilot-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  text-decoration: none;
  margin-top: -8px;
}

.value-prop__tp-logo svg,
.value-prop__tp-stars svg {
  display: block;
}

/* ── CTA link ── */
.value-prop__link {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #e69500;
  text-decoration: none;
  display: inline-block;
  margin-top: 8px;
  transition: opacity 0.15s;
}

.value-prop__link:hover { opacity: 0.7; }

/* ── Testimonial card ── */
.value-prop__card {
  background: #fff;
  border-radius: 16px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.07);
}

.value-prop__card-badge { display: none; }

.value-prop__card-inner {
  display: contents; /* flatten — no extra wrapper needed */
}

/* ── Card header ── */
.value-prop__card-header {
  display: flex;
  align-items: center;
  gap: 14px;
}

.value-prop__card-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.value-prop__avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.value-prop__name {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: #111;
  line-height: 1.3;
}

.value-prop__role {
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  color: #999;
  line-height: 1.3;
}

.value-prop__stars {
  font-size: 14px;
  color: #f5a800;
  letter-spacing: 1px;
  margin-top: 2px;
}


/* ── Quote ── */
.value-prop__quote {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid #eee;
  padding-top: 18px;
}

.value-prop__quote p {
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  line-height: 1.75;
  color: #555;
  margin: 0;
}

.value-prop__quote strong {
  font-weight: 600;
  color: #222;
}

/* ════════════════════════════════════════
   DFY / DIY SERVICES SPLIT SECTION
   ════════════════════════════════════════ */
.services-split {
  background: #f7f7f7;
  padding: 60px 0 72px;
  position: relative;
  content-visibility: auto;
}

.services-split__container {
  display: flex;
  align-items: stretch;
  gap: 0;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 48px;
}

/* ── Hide the divider element ── */
.services-split__divider {
  width: 1px;
  background: #e0e0e0;
  flex-shrink: 0;
  margin: 0 8px;
}

/* ── Each column ── */
.services-split__col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 0 48px;
}

.services-split__col:first-child { padding-left: 0; }
.services-split__col:last-child  { padding-right: 0; }

/* ── Pixel badge ── */
.services-split__badge {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  letter-spacing: 0.06em;
  padding: 5px 10px;
  margin-bottom: 14px;
  width: fit-content;
  display: inline-block;
}

.services-split__badge--dfy {
  background: #e87c00;
  color: #fff;
  box-shadow: 2px 2px 0 #7a3a00;
}

.services-split__badge--diy {
  background: #00a651;
  color: #fff;
  box-shadow: 2px 2px 0 #005a28;
}

/* ── Headings ── */
.services-split__title {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 36px;
  color: #0a1535;
  line-height: 1.15;
  letter-spacing: 0;
  margin: 0 0 8px;
}

.services-split__desc {
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  color: #777;
  line-height: 1.6;
  margin: 0 0 24px;
}

/* ── Bullet list ── */
.services-split__list {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
  flex: 1;
}

.services-split__list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  color: #2a2a2a;
}

/* ── Pixel square checkmarks ── */
.services-split__check {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background: #e87c00;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
}

.services-split__check--diy {
  background: #00a651;
}

/* ── CTA Buttons ── */
.services-split__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  text-decoration: none;
  padding: 13px 22px;
  transition: transform 0.1s, box-shadow 0.1s;
  width: fit-content;
  border-radius: 0;
}

.services-split__btn--dfy {
  background: #e87c00;
  color: #fff;
  box-shadow: 0 4px 0 #7a3a00;
}

.services-split__btn--diy {
  background: #00a651;
  color: #fff;
  box-shadow: 0 4px 0 #005a28;
}

.services-split__btn:hover {
  transform: translateY(2px);
}

.services-split__btn--dfy:hover { box-shadow: 0 2px 0 #7a3a00; }
.services-split__btn--diy:hover { box-shadow: 0 2px 0 #005a28; }

.services-split__btn:active {
  transform: translateY(4px);
  box-shadow: none;
}

/* ════════════════════════════════════════
   OUR TOOLS SECTION
   ════════════════════════════════════════ */
.our-tools {
  position: relative;
  background: linear-gradient(180deg, #0a1535 0%, #091028 55%, #060c1e 100%);
  padding: 72px 0 100px;
  overflow: hidden;
  border-bottom-left-radius: 60px;
  border-bottom-right-radius: 60px;
  margin-bottom: -60px;
  z-index: 2;
  box-shadow: 0 20px 60px rgba(5,12,30,0.5);
}

/* ── Rain ── */
.our-tools__rain {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
body.day-mode .our-tools__rain { display: none; }

/* ── Stars ── */
.our-tools__stars,
.our-tools__stars--2 {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.our-tools__stars {
  background-image:
    radial-gradient(2px 2px at  8%  6%, #fff 0%, transparent 100%),
    radial-gradient(1px 1px at 22% 16%, rgba(255,255,255,0.8) 0%, transparent 100%),
    radial-gradient(3px 3px at 40%  8%, #fff 0%, transparent 100%),
    radial-gradient(1px 1px at 58% 12%, rgba(255,255,255,0.7) 0%, transparent 100%),
    radial-gradient(2px 2px at 72%  5%, #fff 0%, transparent 100%),
    radial-gradient(1px 1px at 88% 18%, rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(2px 2px at 15% 40%, rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 50% 35%, rgba(255,255,255,0.65) 0%, transparent 100%),
    radial-gradient(2px 2px at 80% 30%, #fff 0%, transparent 100%);
  animation: star-twinkle-a 2.4s ease-in-out infinite alternate;
}
.our-tools__stars--2 {
  background-image:
    radial-gradient(1px 1px at 12% 22%, rgba(255,255,255,0.7) 0%, transparent 100%),
    radial-gradient(2px 2px at 30% 10%, #fff 0%, transparent 100%),
    radial-gradient(1px 1px at 62% 20%, rgba(255,255,255,0.6) 0%, transparent 100%),
    radial-gradient(3px 3px at 78%  8%, rgba(255,255,255,0.8) 0%, transparent 100%),
    radial-gradient(1px 1px at 94% 28%, #fff 0%, transparent 100%);
  animation: star-twinkle-b 1.8s ease-in-out infinite alternate;
}
body.day-mode .our-tools__stars,
body.day-mode .our-tools__stars--2 { opacity: 0 !important; animation: none; }

/* ── Clouds ── */
.our-tools__cloud {
  position: absolute;
  left: 0;
  width: 112px; height: 28px;
  background: #c8d8f8;
  border-radius: 0;
  z-index: 1;
  opacity: 0.28;
  pointer-events: none;
}
.our-tools__cloud::before {
  content: '';
  position: absolute;
  background: #c8d8f8;
  width: 56px; height: 28px;
  top: -20px; left: 20px;
}
.our-tools__cloud::after {
  content: '';
  position: absolute;
  background: #c8d8f8;
  width: 32px; height: 20px;
  top: -32px; left: 36px;
}
.our-tools__cloud--sm               { width: 80px; height: 20px; opacity: 0.18; }
.our-tools__cloud--sm::before       { width: 40px; height: 20px; top: -14px; left: 14px; }
.our-tools__cloud--sm::after        { width: 24px; height: 14px; top: -24px; left: 24px; }

body.day-mode .our-tools__cloud,
body.day-mode .our-tools__cloud::before,
body.day-mode .our-tools__cloud::after { background: #fff; }
body.day-mode .our-tools__cloud        { opacity: 0.88; }
body.day-mode .our-tools__cloud--sm    { opacity: 0.7; }

/* Cloud scroll — nth-child: rain(1) dust(2) stars(3,4) → clouds start at 5 */
.our-tools__cloud:nth-child(5) { animation: cloud-scroll    28s linear infinite; animation-delay:   0s; }
.our-tools__cloud:nth-child(6) { animation: cloud-scroll-sm 20s linear infinite; animation-delay:  -6s; }
.our-tools__cloud:nth-child(7) { animation: cloud-scroll    35s linear infinite; animation-delay: -14s; }
.our-tools__cloud:nth-child(8) { animation: cloud-scroll-sm 24s linear infinite; animation-delay: -20s; }

/* Day-mode bg */
body.day-mode .our-tools {
  background: linear-gradient(180deg, #1a78d4 0%, #3a9de8 50%, #6cc0f5 100%);
}

body.day-mode .our-tools__badge--writes { background: rgba(255,255,255,0.25); }
body.day-mode .our-tools__badge--tracks { background: rgba(255,255,255,0.2); }
body.day-mode .our-tools__card-title    { color: #fff; }
body.day-mode .our-tools__card-desc     { color: rgba(255,255,255,0.9); }
body.day-mode .our-tools__subtext       { color: rgba(10,32,85,0.7); }

/* Container must sit above atmosphere layers */
.our-tools__container {
  position: relative;
  z-index: 2;
}

.our-tools__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 48px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.our-tools__header {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.our-tools__heading {
  font-family: 'Press Start 2P', monospace;
  font-size: 28px;
  line-height: 1.7;
  color: #fff;
  margin: 0;
  text-shadow: 3px 3px 0 #000a20;
}

.our-tools__heading strong {
  color: #83dc35;
  text-shadow: 3px 3px 0 #0e3000, 0 0 30px rgba(131,220,53,0.4);
}

.our-tools__subtext {
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  color: #8f9aae;
  line-height: 1.6;
  margin: 0;
}

/* ── Two-column grid ── */
.our-tools__grid {
  display: flex;
  gap: 32px;
}

/* ── Card ── */
.our-tools__card {
  flex: 1;
  border-radius: 15px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 24px 30px;
  position: relative;
  text-decoration: none;
  cursor: pointer;
  /* start with invisible border so layout doesn't shift on hover */
  box-shadow: 0 0 0 2px transparent, 0 0 0 rgba(108,204,0,0);
  transition: transform 0.2s, box-shadow 0.2s;
}

.our-tools__card:hover {
  box-shadow: 0 16px 40px rgba(0,0,0,0.35);
  animation: none;
}

@keyframes green-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 2px #e69500,
      0 0 18px rgba(230,149,0,0.35);
  }
  50% {
    box-shadow:
      0 0 0 2px #ffb733,
      0 0 38px rgba(230,149,0,0.65);
  }
}

/* Gradient background per card */
.our-tools__card--writes {
  background: linear-gradient(180deg, #86a191 0%, #0e1223 100%);
}

.our-tools__card--writes::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(14,18,35,0)    42%,
    rgba(14,18,35,0.35) 48%,
    rgba(14,18,35,0.75) 54%,
    rgba(14,18,35,0.95) 63%,
    #0e1223             75%,
    #0e1223             100%
  );
  pointer-events: none;
  border-radius: 15px;
}

.our-tools__card--tracks {
  background: linear-gradient(180deg, #2e4a52 0%, #0e1223 100%);
}

.our-tools__card--tracks::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(14,18,35,0)    45%,
    rgba(14,18,35,0.9)  56%,
    #0e1223             70%,
    #0e1223             100%
  );
  pointer-events: none;
  border-radius: 15px;
}

/* Inner elements sit above gradient overlay */
.our-tools__badge,
.our-tools__screenshot,
.our-tools__card-content {
  position: relative;
  z-index: 1;
}

/* ── Badge pill ── */
.our-tools__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: 30px;
  align-self: flex-start;
}

.our-tools__badge--writes { background: #374547; }
.our-tools__badge--tracks { background: #13212f; }

.our-tools__badge-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.our-tools__badge span {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 12px;
  color: #fff;
  white-space: nowrap;
  letter-spacing: 0.05em;
}

/* ── Screenshot ── */
.our-tools__screenshot {
  display: flex;
  justify-content: center;
  padding: 28px 0 16px;
}

.our-tools__screenshot img {
  width: 100%;
  max-width: 383px;
  border-radius: 10px 10px 0 0;
  box-shadow: 0 2px 18px rgba(0,0,0,0.4);
  display: block;
}

/* ── Card content ── */
.our-tools__card-content {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ── Blinking ▶ cursor on card title hover (mirrors CTA banner + navbar) ── */
.our-tools__card-title {
  position: relative;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 20px;
  color: #fff;
  margin: 0;
  padding-left: 18px;
  border-left: 4px solid #6ccc00;
  line-height: 1.2;
  transition: padding-left 0.15s;
}

.our-tools__card-title::before {
  content: '▶';
  position: absolute;
  left: -18px;
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  opacity: 0;
  top: 50%;
  transform: translateY(-50%);
}

.our-tools__card--writes .our-tools__card-title::before { color: #ffd700; }
.our-tools__card--tracks .our-tools__card-title::before { color: #83dc35; }

.our-tools__card:hover .our-tools__card-title {
  padding-left: 30px;
}

.our-tools__card:hover .our-tools__card-title::before {
  opacity: 1;
  animation: pixel-cursor-blink 0.45s step-end infinite;
}

.our-tools__card-desc {
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  color: #8f9aae;
  line-height: 1.8;
  margin: 0;
}

.our-tools__card-btn {
  display: inline-flex;
  align-items: center;
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  text-decoration: none;
  padding: 11px 20px;
  border-radius: 0;
  align-self: flex-start;
  color: #fff;
  background: #d68a00;
  border: 3px solid #3a1a00;
  border-bottom: 5px solid #3a1a00;
  transition: transform 0.1s, border-bottom-width 0.1s;
  cursor: pointer;
}

.our-tools__card-btn--writes,
.our-tools__card-btn--tracks {
  background: #d68a00;
  color: #fff;
  border-color: #3a1a00;
}

/* Hover — press down */
.our-tools__card-btn--writes:hover,
.our-tools__card-btn--tracks:hover {
  transform: translateY(3px);
  border-bottom-width: 2px;
}

/* Active — full press */
.our-tools__card-btn--writes:active,
.our-tools__card-btn--tracks:active {
  transform: translateY(5px);
  border-bottom-width: 1px;
}


/* ── Vertical divider ── */
.services-split__divider {
  width: 1px;
  background: #e8e8e8;
  align-self: stretch;
  flex-shrink: 0;
  margin: 12px 0;
}

/* ════════════════════════════════════════
   CASE STUDIES SECTION
   ════════════════════════════════════════ */
.case-studies {
  background: #f7f7f7;
  padding: 72px 0;
  position: relative;
  overflow: hidden;
}

/* Pixel-grid watermark */
.case-studies::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,0,0,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.03) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  z-index: 0;
}

/* Orange accent bar on the left edge */
.case-studies::after {
  content: '';
  position: absolute;
  left: 0;
  top: 10%;
  height: 80%;
  width: 4px;
  background: linear-gradient(to bottom, transparent, #e69500 30%, #e69500 70%, transparent);
  pointer-events: none;
  z-index: 0;
}

.case-studies__container {
  position: relative;
  z-index: 1;
}

.case-studies__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 48px;
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.case-studies__header {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.case-studies__label {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #e69500;
}

.case-studies__heading {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 36px;
  color: #0a1535;
  margin: 0;
  line-height: 1.2;
}

/* ── 3-col card grid ── */
.case-studies__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.case-study-card__image {
  display: block;
  width: calc(100% + 48px);
  margin: -24px -24px 16px;
  height: 160px;
  object-fit: cover;
  object-position: top center;
}

.case-study-card {
  background: #fff;
  border: 2px solid #e8e8e8;
  border-radius: 0;
  padding: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-decoration: none;
  box-shadow: 4px 4px 0 transparent;
  transition: border-color 0.08s, box-shadow 0.08s, transform 0.08s;
}

.case-study-card:hover {
  border-color: #e69500;
  box-shadow: 4px 4px 0 #e69500;
  transform: translate(-2px, -2px);
}

.case-study-card__tag {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #e69500;
  margin-bottom: 4px;
}

.case-study-card__stat {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 40px;
  color: #0a1535;
  line-height: 1;
}

.case-study-card__stat-label {
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #3d9900;
  margin-bottom: 8px;
}

.case-study-card__desc {
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  line-height: 1.7;
  color: #666;
  margin: 0;
  flex: 1;
}

.case-study-card__link {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 13px;
  color: #e69500;
  margin-top: 8px;
  display: inline-block;
  transition: opacity 0.15s;
}

.case-study-card:hover .case-study-card__link { opacity: 0.7; }

/* ── Get To Know Us banner ── */
.get-to-know {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #0a1535;
  padding: 32px 40px;
  text-decoration: none;
  border: 3px solid #0a1535;
  box-shadow: 6px 6px 0 #e69500;
  transition: transform 0.08s, box-shadow 0.08s;
}

.get-to-know:hover {
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 #e69500;
}

.get-to-know__text {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.get-to-know__label {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #e69500;
}

.get-to-know__heading {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 26px;
  color: #fff;
  margin: 0;
  line-height: 1.2;
}

.get-to-know__desc {
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  margin: 0;
  line-height: 1.5;
  max-width: 520px;
}

.get-to-know__cta {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #ffd700;
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: 40px;
}

/* ════════════════════════════════════════
   COMMUNITY SECTION
   ════════════════════════════════════════ */
.community {
  background: #f7f7f7;
  padding: 72px 0;
  border-top: 1px solid #eee;
  position: relative;
  content-visibility: auto;
}

/* ── Dark shadow from below bleeds up onto the light Community section ── */
.community::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(to top, rgba(5,12,30,0.35) 0%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}

.community__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 48px;
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.community__header {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.community__label {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #e69500;
}

.community__heading {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 36px;
  color: #0a1535;
  margin: 0;
  line-height: 1.2;
}

/* ── Two community cards — tools-style layout ── */
.community__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.community-card {
  background: #fff;
  border: 2px solid #e8e8e8;
  border-radius: 15px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  box-shadow: 4px 4px 0 transparent;
  transition: border-color 0.08s, box-shadow 0.08s, transform 0.08s;
}

.community-card:hover {
  border-color: #e69500;
  box-shadow: 4px 4px 0 #e69500;
  transform: translate(-2px, -2px);
}

/* ── Top visual half ── */
.community-card__visual {
  position: relative;
  height: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.community-card__visual--fb {
  background: #1877f2;
}

.community-card__visual--yt {
  background: linear-gradient(135deg, #ff4444 0%, #b80000 100%);
}

/* Badge pill inside visual */
.community-card__badge {
  position: absolute;
  top: 16px;
  left: 16px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(0,0,0,0.25);
  backdrop-filter: blur(4px);
  padding: 6px 14px;
  border-radius: 30px;
}

.community-card__badge span {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 11px;
  color: #fff;
  letter-spacing: 0.06em;
}

/* Large watermark icon */
.community-card__visual-icon {
  opacity: 0.9;
}

/* ── YouTube channel mockup ── */
.yt-mock {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: #0f0f0f;
  overflow: hidden;
}
.yt-mock__banner {
  background: linear-gradient(135deg, #1a0000 0%, #8b0000 50%, #cc0000 100%);
  padding: 10px 14px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 0 0 auto;
}
.yt-mock__banner-text {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  color: #fff;
  letter-spacing: 0.05em;
}
.yt-mock__banner-text strong { color: #ff4444; }
.yt-mock__banner-sub {
  font-size: 7px;
  color: rgba(255,255,255,0.65);
  font-family: sans-serif;
  letter-spacing: 0.04em;
}
.yt-mock__bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  background: #181818;
  border-bottom: 1px solid #333;
}
.yt-mock__avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: #222;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  border: 1.5px solid #ff0000;
}
.yt-mock__info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}
.yt-mock__name {
  font-size: 8px;
  font-weight: 700;
  color: #fff;
  font-family: sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.yt-mock__subs {
  font-size: 7px;
  color: #aaa;
  font-family: sans-serif;
}
.yt-mock__subscribe {
  font-size: 7px;
  font-weight: 700;
  font-family: sans-serif;
  background: #ff0000;
  color: #fff;
  padding: 3px 7px;
  border-radius: 2px;
  flex-shrink: 0;
  letter-spacing: 0.04em;
}
.yt-mock__thumbs {
  display: flex;
  gap: 4px;
  padding: 7px 8px;
  flex: 1;
}
.yt-mock__thumb {
  flex: 1;
  background: #1e1e1e;
  border-radius: 3px;
  position: relative;
  overflow: hidden;
  aspect-ratio: 16/9;
}
.yt-mock__thumb-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.yt-mock__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: #fff;
  background: rgba(0,0,0,0.35);
  opacity: 0;
  transition: opacity 0.15s;
}
.yt-mock__thumb:hover .yt-mock__play { opacity: 1; }

/* Real photo fills the visual area */
.community-card__visual-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ── Bottom content half ── */
.community-card__content {
  padding: 22px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.community-card__title {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 18px;
  margin: 0;
  padding-left: 12px;
  line-height: 1.3;
}

.community-card__title--fb {
  color: #0a1535;
  border-left: 4px solid #1877f2;
}

.community-card__title--yt {
  color: #0a1535;
  border-left: 4px solid #ff0000;
}

.community-card__desc {
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  color: #666;
  line-height: 1.7;
  margin: 0;
}

.community-card__meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.community-card__pill {
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: #555;
  background: #f0f0f0;
  padding: 4px 10px;
  border-radius: 20px;
}

.community-card__link {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 13px;
  display: inline-block;
  margin-top: 4px;
  transition: opacity 0.15s;
}

.community-card__link--fb { color: #1877f2; }
.community-card__link--yt { color: #ff0000; }
.community-card:hover .community-card__link { opacity: 0.7; }

/* ════════════════════════════════════════
   SKY SCENE  — unified dark sky wrapping CTA + FAQ
   ════════════════════════════════════════ */
.sky-scene {
  position: relative;
  background: linear-gradient(180deg, #0a1535 0%, #091028 55%, #060c1e 100%);
  overflow: hidden;
}
body.day-mode .sky-scene {
  background: linear-gradient(180deg, #1a78d4 0%, #3a9de8 50%, #6cc0f5 100%);
}

/* ── Shared Rain (night only) ── */
.sky-scene__rain {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
body.day-mode .sky-scene__rain { display: none; }

/* ── Shared Stars (night only) ── */
.sky-scene__stars,
.sky-scene__stars--2 {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.sky-scene__stars {
  background-image:
    radial-gradient(2px 2px at  5%  8%, #fff 0%, transparent 100%),
    radial-gradient(3px 3px at 18% 18%, #fff 0%, transparent 100%),
    radial-gradient(1px 1px at 32%  5%, rgba(255,255,255,0.8) 0%, transparent 100%),
    radial-gradient(2px 2px at 50% 14%, #fff 0%, transparent 100%),
    radial-gradient(1px 1px at 62%  9%, rgba(255,255,255,0.9) 0%, transparent 100%),
    radial-gradient(2px 2px at 90%  6%, rgba(255,255,255,0.9) 0%, transparent 100%),
    radial-gradient(2px 2px at 25% 38%, rgba(255,255,255,0.55) 0%, transparent 100%),
    radial-gradient(1px 1px at 55% 44%, rgba(255,255,255,0.7) 0%, transparent 100%),
    radial-gradient(2px 2px at  8% 60%, rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 75% 55%, rgba(255,255,255,0.65) 0%, transparent 100%);
  animation: star-twinkle-a 2.4s ease-in-out infinite alternate;
}
.sky-scene__stars--2 {
  background-image:
    radial-gradient(2px 2px at 12% 14%, rgba(255,255,255,0.65) 0%, transparent 100%),
    radial-gradient(1px 1px at 28% 32%, #fff 0%, transparent 100%),
    radial-gradient(3px 3px at 42% 11%, rgba(255,255,255,0.55) 0%, transparent 100%),
    radial-gradient(2px 2px at 68% 24%, #fff 0%, transparent 100%),
    radial-gradient(1px 1px at 84% 15%, rgba(255,255,255,0.8) 0%, transparent 100%),
    radial-gradient(2px 2px at 40% 65%, rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 88% 70%, rgba(255,255,255,0.6) 0%, transparent 100%);
  animation: star-twinkle-b 1.8s ease-in-out infinite alternate;
}
body.day-mode .sky-scene__stars,
body.day-mode .sky-scene__stars--2 { opacity: 0 !important; animation: none; }

/* ── Shared Clouds ── */
.sky-scene__cloud {
  position: absolute;
  width: 112px; height: 28px;
  background: #c8d8f8;
  border-radius: 0;
  z-index: 2;
  opacity: 0.28;
  pointer-events: none;
}
/* Cloud scroll — nth-child: rain(1) dust(2) stars(3,4) → clouds start at 5 */
.sky-scene__cloud:nth-child(5) { animation: cloud-scroll    30s linear infinite; animation-delay:   0s; }
.sky-scene__cloud:nth-child(6) { animation: cloud-scroll-sm 22s linear infinite; animation-delay:  -7s; }
.sky-scene__cloud:nth-child(7) { animation: cloud-scroll    38s linear infinite; animation-delay: -15s; }
.sky-scene__cloud:nth-child(8) { animation: cloud-scroll-sm 26s linear infinite; animation-delay: -22s; }

.sky-scene__cloud::before {
  content: '';
  position: absolute;
  background: #c8d8f8;
  width: 56px; height: 28px;
  top: -20px; left: 20px;
}
.sky-scene__cloud::after {
  content: '';
  position: absolute;
  background: #c8d8f8;
  width: 32px; height: 20px;
  top: -32px; left: 36px;
}
.sky-scene__cloud--sm               { width: 80px; height: 20px; opacity: 0.18; }
.sky-scene__cloud--sm::before       { width: 40px; height: 20px; top: -14px; left: 14px; }
.sky-scene__cloud--sm::after        { width: 24px; height: 14px; top: -24px; left: 24px; }
body.day-mode .sky-scene__cloud,
body.day-mode .sky-scene__cloud::before,
body.day-mode .sky-scene__cloud::after { background: #fff; }
body.day-mode .sky-scene__cloud        { opacity: 0.9; }

/* Trees and hills sit flush at the sky-scene bottom edge (grass is in footer) */
.sky-scene .hero__tree { bottom: 0; }
.sky-scene .hero__hill { bottom: 0; }

/* ════════════════════════════════════════
   CTA BANNER  — choose your path redesign
   ════════════════════════════════════════ */
.cta-banner {
  position: relative;
  background: transparent;
  padding: 72px 0 72px;
  overflow: visible;
}


/* ── Rain (night only) ── */
.cta-banner__rain {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
body.day-mode .cta-banner__rain { display: none; }

/* ── Stars (night only) ── */
.cta-banner__stars,
.cta-banner__stars--2 {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.cta-banner__stars {
  background-image:
    radial-gradient(2px 2px at  5%  8%, #fff 0%, transparent 100%),
    radial-gradient(3px 3px at 18% 18%, #fff 0%, transparent 100%),
    radial-gradient(1px 1px at 32%  5%, rgba(255,255,255,0.8) 0%, transparent 100%),
    radial-gradient(2px 2px at 50% 14%, #fff 0%, transparent 100%),
    radial-gradient(1px 1px at 65%  8%, rgba(255,255,255,0.7) 0%, transparent 100%),
    radial-gradient(3px 3px at 78% 20%, #fff 0%, transparent 100%),
    radial-gradient(2px 2px at 90%  6%, rgba(255,255,255,0.9) 0%, transparent 100%),
    radial-gradient(2px 2px at 25% 38%, rgba(255,255,255,0.55) 0%, transparent 100%),
    radial-gradient(1px 1px at 55% 44%, rgba(255,255,255,0.7) 0%, transparent 100%);
  animation: star-twinkle-a 2.4s ease-in-out infinite alternate;
}
.cta-banner__stars--2 {
  background-image:
    radial-gradient(2px 2px at 12% 14%, rgba(255,255,255,0.65) 0%, transparent 100%),
    radial-gradient(1px 1px at 28% 32%, #fff 0%, transparent 100%),
    radial-gradient(3px 3px at 42% 11%, rgba(255,255,255,0.55) 0%, transparent 100%),
    radial-gradient(2px 2px at 68% 24%, #fff 0%, transparent 100%),
    radial-gradient(1px 1px at 84% 15%, rgba(255,255,255,0.8) 0%, transparent 100%);
  animation: star-twinkle-b 1.8s ease-in-out infinite alternate;
}
body.day-mode .cta-banner__stars,
body.day-mode .cta-banner__stars--2 { opacity: 0 !important; animation: none; }

/* ── Clouds (shared night/day, styled per mode) ── */
.cta-banner__cloud {
  position: absolute;
  left: 0;
  width: 112px; height: 28px;
  background: #c8d8f8;
  border-radius: 0;
  z-index: 1;
  opacity: 0.28;
  pointer-events: none;
}
.cta-banner__cloud::before {
  content: '';
  position: absolute;
  background: #c8d8f8;
  width: 56px; height: 28px;
  top: -20px; left: 20px;
}
.cta-banner__cloud::after {
  content: '';
  position: absolute;
  background: #c8d8f8;
  width: 32px; height: 20px;
  top: -32px; left: 36px;
}
.cta-banner__cloud--sm               { width: 80px; height: 20px; opacity: 0.18; }
.cta-banner__cloud--sm::before       { width: 40px; height: 20px; top: -14px; left: 14px; }
.cta-banner__cloud--sm::after        { width: 24px; height: 14px; top: -24px; left: 24px; }

/* Day — bright white, fully opaque, bigger */
body.day-mode .cta-banner__cloud,
body.day-mode .cta-banner__cloud::before,
body.day-mode .cta-banner__cloud::after { background: #fff; }
body.day-mode .cta-banner__cloud        { opacity: 0.9; }
body.day-mode .cta-banner__cloud--sm    { opacity: 0.75; }

/* Cloud scroll — reuses hero keyframes */
.cta-banner__cloud:nth-child(4) { animation: cloud-scroll    30s linear infinite; animation-delay:   0s; }
.cta-banner__cloud:nth-child(5) { animation: cloud-scroll-sm 22s linear infinite; animation-delay:  -7s; }
.cta-banner__cloud:nth-child(6) { animation: cloud-scroll    38s linear infinite; animation-delay: -15s; }
.cta-banner__cloud:nth-child(7) { animation: cloud-scroll-sm 26s linear infinite; animation-delay: -22s; }

/* ── Container — vertical stack ── */
.cta-banner__container {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}

/* ── Header block ── */
.cta-banner__header {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.cta-banner__label {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: #ff6a00;
  text-transform: uppercase;
}

.cta-banner__heading {
  font-family: 'Press Start 2P', monospace;
  font-size: 28px;
  animation: cta-title-pulse 1.8s ease-in-out infinite;
  display: inline-block;
  line-height: 1.7;
  color: #fff;
  margin: 0;
  text-shadow: 3px 3px 0 #000a20;
}

.cta-banner__heading strong {
  color: #ffd700;
  text-shadow: 3px 3px 0 #3a1a00, 0 0 30px rgba(255,215,0,0.4);
}

.cta-banner__underline {
  text-decoration: underline;
  text-decoration-color: rgba(255,215,0,0.5);
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
}

.cta-banner__subtext {
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  color: rgba(255,255,255,0.6);
  margin: 0;
  max-width: 520px;
}

/* ── Two-path cards row ── */
.cta-banner__paths {
  display: flex;
  gap: 0;
  align-items: stretch;
  width: 100%;
}

.cta-banner__path {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 36px 40px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  transition: transform 0.18s, box-shadow 0.18s;
}

.cta-banner__path--dfy {
  background: linear-gradient(145deg, rgba(230,149,0,0.12) 0%, rgba(255,255,255,0.04) 100%);
  border-color: rgba(230,149,0,0.3);
  border-radius: 16px 0 0 16px;
  border-right: none;
}

.cta-banner__path--diy {
  background: linear-gradient(145deg, rgba(108,204,0,0.1) 0%, rgba(255,255,255,0.04) 100%);
  border-color: rgba(108,204,0,0.25);
  border-left: 1px solid rgba(255,255,255,0.08);
  border-radius: 0 16px 16px 0;
}

.cta-banner__path:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.3);
}

/* Path top block */
.cta-banner__path-top {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cta-banner__path-badge {
  display: inline-block;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.1em;
  padding: 4px 12px;
  border-radius: 4px;
  align-self: flex-start;
}

.cta-banner__path-badge--dfy {
  background: rgba(230,149,0,0.2);
  color: #e69500;
  border: 1px solid rgba(230,149,0,0.4);
}

.cta-banner__path-badge--diy {
  background: rgba(108,204,0,0.15);
  color: #83dc35;
  border: 1px solid rgba(108,204,0,0.3);
}

.cta-banner__path-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 22px;
  color: #fff;
  margin: 0;
}

.cta-banner__path-sub {
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  margin: 0;
  line-height: 1.5;
}

/* Feature list */
.cta-banner__path-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.cta-banner__path-list li {
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  color: rgba(255,255,255,0.8);
  display: flex;
  align-items: center;
  gap: 10px;
}

.cta-banner__check {
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cta-banner__check--dfy {
  background: rgba(230,149,0,0.2);
  color: #e69500;
}

.cta-banner__check--diy {
  background: rgba(108,204,0,0.18);
  color: #83dc35;
}

/* Path CTA buttons — pixel press style matching hero */
.cta-banner__path-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Press Start 2P', monospace;
  font-size: 11px;
  text-decoration: none;
  padding: 12px 22px;
  border-radius: 0;
  border-width: 3px;
  border-style: solid;
  border-bottom-width: 5px;
  transition: transform 0.1s, border-bottom-width 0.1s, box-shadow 0.1s;
  align-self: flex-start;
}

.cta-banner__path-btn--dfy {
  background: #d68a00;
  color: #fff;
  border-color: #3a1a00;
  box-shadow: none;
}

.cta-banner__path-btn--dfy:hover {
  transform: translateY(3px);
  border-bottom-width: 2px;
}

.cta-banner__path-btn--dfy:active {
  transform: translateY(5px);
  border-bottom-width: 0;
}

.cta-banner__path-btn--diy {
  background: #2a7a00;
  color: #fff;
  border-color: #0e3000;
  box-shadow: none;
}

.cta-banner__path-btn--diy:hover {
  transform: translateY(3px);
  border-bottom-width: 2px;
}

.cta-banner__path-btn--diy:active {
  transform: translateY(5px);
  border-bottom-width: 0;
}

/* ── Blinking pixel ▶ cursor on card hover (mirrors navbar) ── */
.cta-banner__path-title {
  position: relative;
  padding-left: 0;
  transition: padding-left 0.15s;
}

.cta-banner__path-title::before {
  content: '▶';
  position: absolute;
  left: -20px;
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  opacity: 0;
  top: 50%;
  transform: translateY(-50%);
}

.cta-banner__path--dfy .cta-banner__path-title::before { color: #ffd700; }
.cta-banner__path--diy .cta-banner__path-title::before { color: #83dc35; }

.cta-banner__path:hover .cta-banner__path-title {
  padding-left: 20px;
}

.cta-banner__path:hover .cta-banner__path-title::before {
  opacity: 1;
  animation: pixel-cursor-blink 0.45s step-end infinite;
}

/* ── Secondary audit CTA ── */
.cta-banner__audit {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  margin-top: 48px;
  padding: 36px 40px;
  border: 2px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.05);
}

.cta-banner__audit p {
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  color: rgba(255,255,255,0.7);
  margin: 0;
}

.cta-banner__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Press Start 2P', monospace;
  font-size: 15px;
  color: #fff;
  text-decoration: none;
  background: #d68a00;
  padding: 18px 40px;
  border-radius: 0;
  border: 4px solid #3a1a00;
  border-bottom: 6px solid #3a1a00;
  box-shadow: none;
  transition: transform 0.1s, border-bottom-width 0.1s;
}

.cta-banner__btn:hover {
  transform: translateY(3px);
  border-bottom-width: 2px;
}

.cta-banner__btn:active {
  transform: translateY(5px);
  border-bottom-width: 0;
}

/* ── CTA Banner transition (mirrors hero smooth toggle) ── */
.cta-banner,
.cta-banner__path,
.cta-banner__heading,
.cta-banner__subtext,
.cta-banner__label,
.cta-banner__path-title,
.cta-banner__path-sub,
.cta-banner__path-list li,
.cta-banner__path-badge,
.cta-banner__path-btn,
.cta-banner__btn {
  transition: background 0.5s ease, color 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
}

/* ══════════════════════════════
   CTA BANNER — DAY MODE
   (mirrors hero day-mode palette)
   ══════════════════════════════ */
body.day-mode .cta-banner {
  background: transparent;
}
body.day-mode .cta-banner::before { opacity: 0; }
body.day-mode .community::after      { background: linear-gradient(to top, rgba(30,80,180,0.25) 0%, transparent 100%); }
body.day-mode .services-split::after  { background: linear-gradient(to top, rgba(30,80,180,0.25) 0%, transparent 100%); }
body.day-mode .testimonials::before   { opacity: 0; }

body.day-mode .cta-banner::before {
  background-image:
    radial-gradient(ellipse at 10% 80%, rgba(255,255,255,0.08) 0%, transparent 55%),
    radial-gradient(ellipse at 90% 20%, rgba(255,255,255,0.06) 0%, transparent 50%);
}

/* Header text */
body.day-mode .cta-banner__label {
  color: #ff6a00;
}

body.day-mode .cta-banner__heading {
  color: #0a2055;
  text-shadow: 1px 1px 0 rgba(255,255,255,0.4);
}

body.day-mode .cta-banner__heading strong {
  color: #c85a00;
}

body.day-mode .cta-banner__underline {
  text-decoration-color: rgba(200,90,0,0.5);
}

body.day-mode .cta-banner__subtext {
  color: rgba(10,32,85,0.7);
}

/* DFY path card */
body.day-mode .cta-banner__path--dfy {
  background: rgba(255,255,255,0.55);
  border-color: rgba(200,90,0,0.35);
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
}

body.day-mode .cta-banner__path--diy {
  background: rgba(255,255,255,0.45);
  border-color: rgba(30,108,12,0.3);
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
}

body.day-mode .cta-banner__path:hover {
  box-shadow: 0 16px 40px rgba(0,0,0,0.15);
}

body.day-mode .cta-banner__path-title {
  color: #0a2055;
}

body.day-mode .cta-banner__path-sub {
  color: rgba(10,32,85,0.55);
}

body.day-mode .cta-banner__path-list li {
  color: rgba(10,32,85,0.85);
}

body.day-mode .cta-banner__path-badge--dfy {
  background: rgba(200,90,0,0.12);
  color: #c85a00;
  border-color: rgba(200,90,0,0.35);
}

body.day-mode .cta-banner__path-badge--diy {
  background: rgba(30,108,12,0.12);
  color: #1e6c0c;
  border-color: rgba(30,108,12,0.3);
}

body.day-mode .cta-banner__check--dfy {
  background: rgba(200,90,0,0.15);
  color: #c85a00;
}

body.day-mode .cta-banner__check--diy {
  background: rgba(30,108,12,0.15);
  color: #1e6c0c;
}

body.day-mode .cta-banner__path-btn--dfy {
  background: #c85a00;
  color: #fff;
  box-shadow: 0 4px 18px rgba(200,90,0,0.35);
}

body.day-mode .cta-banner__path-btn--dfy:hover {
  background: #b05000;
  box-shadow: 0 8px 24px rgba(200,90,0,0.5);
}

body.day-mode .cta-banner__path-btn--diy {
  background: rgba(30,108,12,0.12);
  color: #1e6c0c;
  border-color: rgba(30,108,12,0.4);
}

body.day-mode .cta-banner__path-btn--diy:hover {
  background: rgba(30,108,12,0.22);
  box-shadow: 0 8px 24px rgba(30,108,12,0.2);
}

body.day-mode .cta-banner__paths-divider {
  background: rgba(10,32,85,0.06);
  color: rgba(10,32,85,0.3);
  border-color: rgba(10,32,85,0.1);
}

/* Audit row */
body.day-mode .cta-banner__audit {
  border-color: rgba(10,32,85,0.15);
  background: rgba(10,32,85,0.04);
}
body.day-mode .cta-banner__audit p {
  color: rgba(10,32,85,0.6);
}

body.day-mode .cta-banner__btn {
  background: #c85a00;
  border-color: #3a1500;
  box-shadow: 0 0 24px rgba(200,90,0,0.4);
}

body.day-mode .cta-banner__btn:hover {
  box-shadow: 0 0 32px rgba(200,90,0,0.55);
}

/* ════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════ */
.footer {
  background: transparent;
  padding-top: 72px;
  position: relative;
  z-index: 10;
  overflow: visible;
}


.footer__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 64px 56px;
  display: flex;
  gap: 48px;
  align-items: flex-start;
  justify-content: space-between;
}

/* ── Brand column ── */
.footer__brand {
  display: flex;
  flex-direction: column;
  gap: 18px;
  flex: 0 0 280px;
}

.footer__logo {
  height: 32px;
  width: auto;
  object-fit: contain;
  object-position: left;
}

.footer__tagline {
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
  line-height: 1.5;
}

.footer__socials {
  display: flex;
  gap: 20px;
  align-items: center;
  margin-top: 8px;
}

.footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color 0.15s, transform 0.15s;
}

.footer__social-link:hover {
  color: #fff;
  transform: translateY(-2px);
}

/* ── Nav columns ── */
.footer__col {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 0 0 200px;
}

.footer__col-heading {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #fff;
  margin: 0;
  letter-spacing: 0.01em;
}

.footer__col-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer__col-links a {
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 400;
  position: relative;
  padding-left: 0;
  transition: color 0.15s, padding-left 0.15s;
  color: #a6a6a6;
  text-decoration: none;
  transition: color 0.15s;
}

.footer__col-links a::before {
  content: '▶';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 7px;
  font-family: 'Press Start 2P', monospace;
  color: #ffd700;
  opacity: 0;
  pointer-events: none;
  line-height: 1;
}

.footer__col-links a:hover {
  color: #fff;
  padding-left: 14px;
}

.footer__col-links a:hover::before {
  opacity: 1;
  animation: pixel-cursor-blink 0.45s step-end infinite;
}

/* Day mode — arrow colour matches day palette */
body.day-mode .footer__col-links a::before {
  color: #ffd700;
}
body.day-mode .footer__col-links a:hover {
  color: #fff;
  padding-left: 14px;
}

/* ── Bottom bar ── */
.footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer__bottom-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 64px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  color: #a8a8a8;
}

.footer__bottom-inner a {
  color: #a8a8a8;
  text-decoration: none;
  font-weight: 700;
  transition: color 0.15s;
}

.footer__bottom-inner a:hover {
  color: #fff;
}

.footer__bottom-sep {
  color: rgba(168, 168, 168, 0.5);
}

/* ── Footer — day mode text overrides ── */
body.day-mode .footer__tagline { color: rgba(255,255,255,0.9); }
body.day-mode .footer__col-links a { color: rgba(255,255,255,0.8); }
body.day-mode .footer__col-links a:hover { color: #fff; }
body.day-mode .footer__col-heading { color: #fff; }
body.day-mode .footer__social-link { color: rgba(255,255,255,0.85); }
body.day-mode .footer__social-link:hover { color: #fff; }
body.day-mode .footer__bottom-inner { color: rgba(255,255,255,0.75); }
body.day-mode .footer__bottom-inner a { color: rgba(255,255,255,0.75); }
body.day-mode .footer__bottom-inner a:hover { color: #fff; }
body.day-mode .footer__bottom-sep { color: rgba(255,255,255,0.4); }
body.day-mode .footer__bottom { border-top-color: rgba(255,255,255,0.25); }


/* ═══════════════════════════════════════════════════
   TESTIMONIALS MARQUEE
   ═══════════════════════════════════════════════════ */

.testimonials {
  background: #f7f7f7;
  padding: 132px 0 72px;
  overflow: hidden;
  position: relative;
}


.testimonials {
}

.testimonials__inner {
  max-width: 1200px;
  margin: 0 auto 52px;
  padding: 0 40px;
  text-align: center;
}

.testimonials__label {
  font-family: 'Press Start 2P', monospace;
  font-size: 12px;
  color: #d68a00;
  letter-spacing: 0.08em;
  display: block;
  margin-bottom: 18px;
}

.testimonials__heading {
  font-family: 'Poppins', sans-serif;
  font-size: 36px;
  font-weight: 700;
  color: #111;
  line-height: 1.2;
  margin-bottom: 10px;
}

.testimonials__heading strong {
  color: #d68a00;
}

.testimonials__sub {
  font-family: 'Open Sans', sans-serif;
  font-size: 15px;
  color: #6b7280;
  margin: 0;
}

/* ── Row wrapper ── */
.testimonials__row {
  overflow: hidden;
  position: relative;
  margin-bottom: 20px;
}

/* Fade edges */
.testimonials__row::before,
.testimonials__row::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 140px;
  z-index: 2;
  pointer-events: none;
}
.testimonials__row::before {
  left: 0;
  background: linear-gradient(to right, #f7f7f7 30%, transparent);
}
.testimonials__row::after {
  right: 0;
  background: linear-gradient(to left, #f7f7f7 30%, transparent);
}

/* ── Scrolling track ── */
.testimonials__track {
  display: flex;
  gap: 18px;
  width: max-content;
  padding: 8px 0 12px;
  will-change: transform;
  animation: marquee-left 65s linear infinite;
}

.testimonials__track--reverse {
  animation: marquee-right 55s linear infinite;
}

.testimonials__row:hover .testimonials__track,
.testimonials__row:hover .testimonials__track--reverse {
  animation-play-state: paused;
}

/* ── Text review card ── */
.t-card {
  width: 300px;
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 16px;
  box-shadow: 2px 2px 0 #2a7a00;
  padding: 20px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform 0.2s, box-shadow 0.2s;
}

.t-card:hover {
  transform: translateY(-3px);
  box-shadow: 4px 6px 0 #2a7a00;
}

.t-card__header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.t-card__avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--av, #4A90D9);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

.t-card__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.t-card__name {
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #374151;
  line-height: 1.2;
}

.t-card__stars {
  font-size: 13px;
  color: #00b67a;
  letter-spacing: 1px;
}

.t-card__title {
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #111827;
  line-height: 1.4;
}

.t-card__text {
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  color: #4c5a70;
  line-height: 1.65;
  flex: 1;
  margin: 0;
}

.t-card__date {
  font-family: 'Open Sans', sans-serif;
  font-size: 11px;
  color: #9ca3af;
  margin-top: auto;
  padding-top: 4px;
}

/* ── Image screenshot card ── */
.t-card--img {
  width: 300px;
  padding: 10px 10px 14px;
  gap: 10px;
}

.t-card__img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  object-position: top;
  border-radius: 10px;
  display: block;
}

.t-card__img-name {
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  text-align: center;
}

/* ── Keyframes ── */
@keyframes marquee-left {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes marquee-right {
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

/* ── Day-mode: section stays light (intentional contrast) ── */
body.day-mode .testimonials {
  background: #f7f7f7;
}
body.day-mode .testimonials__row::before {
  background: linear-gradient(to right, #f7f7f7 30%, transparent);
}
body.day-mode .testimonials__row::after {
  background: linear-gradient(to left, #f7f7f7 30%, transparent);
}

/* ── Testimonial avatar with real photo ── */
.t-card__avatar--photo {
  overflow: hidden;
  background: #e5e7eb;
  padding: 0;
}
.t-card__avatar--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

/* ── Footer knight — wrapper owns LEFT, img owns TRANSFORM ── */

/* Wrapper: only animates left (horizontal patrol) */
.footer__knight-wrap {
  position: absolute;
  top: 0;
  z-index: 50;
  cursor: pointer;
  animation: footer-knight-patrol 22s linear infinite;
}

@keyframes footer-knight-patrol {
  0%   { left: -120px; }
  100% { left: 110%;   }
}

/* Image: static vertical offset — never moves horizontally */
.footer__knight {
  display: block;
  width: 96px;
  height: auto;
  filter: brightness(0.62) saturate(0.8);
  image-rendering: pixelated;
  transform: translateY(calc(-100% + 18px));
  transform-origin: bottom center;
}

/* Jump: only animates transform (vertical) on the img */
.footer__knight-wrap.is-jumping .footer__knight {
  animation: footer-knight-jump 0.6s ease-out forwards;
}

body.day-mode .footer__knight {
  filter: none;
}

@keyframes footer-knight-jump {
  0%   { transform: translateY(calc(-100% + 18px)); }
  38%  { transform: translateY(calc(-100% + 18px - 65px)); }
  62%  { transform: translateY(calc(-100% + 18px - 65px)); }
  100% { transform: translateY(calc(-100% + 18px)); }
}

/* ═══════════════════════════════════════════════════
   FEATURED — QUOTE STRIP (testimonials with photos)
   ═══════════════════════════════════════════════════ */

.footer__tp {
  display: block;
  width: 112px;
  height: auto;
  margin-top: 16px;
  /* invert flips black text → white; hue-rotate(180deg) restores greens */
  filter: invert(1) hue-rotate(180deg);
}
body.day-mode .footer__tp {
  filter: none;
}

.featured__quote-strip {
  overflow: hidden;
  position: relative;
  padding: 20px 0 24px;
  border-bottom: 1px solid #ebebeb;
  margin-bottom: 8px;
}

/* Fade edges */
.featured__quote-strip::before,
.featured__quote-strip::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 120px;
  z-index: 2;
  pointer-events: none;
}
.featured__quote-strip::before {
  left: 0;
  background: linear-gradient(to right, #fff 20%, transparent);
}
.featured__quote-strip::after {
  right: 0;
  background: linear-gradient(to left, #fff 20%, transparent);
}

/* Scrolling track */
.featured__quote-track {
  display: flex;
  align-items: center;
  gap: 0;
  width: max-content;
  will-change: transform;
  animation: quote-scroll 40s linear infinite;
}

.featured__quote-strip:hover .featured__quote-track {
  animation-play-state: paused;
}

@keyframes quote-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Individual quote card */
.featured__quote-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  width: 310px;
  height: 120px;
  flex-shrink: 0;
  border: 1px solid #ebebeb;
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.07);
  padding: 12px 18px;
  transition: box-shadow 0.2s;
}

.featured__quote-card:hover {
  box-shadow: 0 3px 10px rgba(0,0,0,0.12);
}

/* Avatar photo */
.featured__quote-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
}

/* Quote body */
.featured__quote-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.featured__quote-text {
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #1a1a1a;
  line-height: 1.5;
  margin: 0;
}

.featured__quote-name {
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #e05c2a;
}

/* Diamond separator */
.featured__quote-sep {
  font-size: 9px;
  color: #e05c2a;
  flex-shrink: 0;
  padding: 0 16px;
  opacity: 0.7;
}

/* Day mode — strip background stays white (intentional) */
body.day-mode .featured__quote-strip::before {
  background: linear-gradient(to right, #fff 20%, transparent);
}
body.day-mode .featured__quote-strip::after {
  background: linear-gradient(to left, #fff 20%, transparent);
}

/* ── Featured quote strip — initial avatar (no photo) ── */
.featured__quote-avatar--initial {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--av, #4A90D9);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Poppins', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════
   MEET THE TEAM — Street Fighter character select
══════════════════════════════════════════════════════════════ */

/* .team is now a div inside .cta-banner — inherits its bg, rain & stars */
.team {
  padding: 20px 0 60px;
  position: relative;
  z-index: 2;
}

.team__container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 48px;
  position: relative;
  z-index: 1;
}

/* ── Section header ── */
.team__header {
  text-align: center;
  margin-bottom: 36px;
}

.team__label {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: #ff6a00;
  text-transform: uppercase;
  display: block;
  margin-bottom: 14px;
}

.team__heading {
  font-family: 'Press Start 2P', monospace;
  font-size: 28px;
  line-height: 1.7;
  color: #fff;
  text-shadow: 3px 3px 0 #000a20;
  margin: 0 0 16px;
}

.team__coins {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  color: #f5c518;
  margin: 0;
  animation: team-coin-blink 1s step-end infinite;
}

@keyframes team-coin-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ── CRT screen shell ── */
.team__screen {
  position: relative;
  background: linear-gradient(180deg, #0c0c30 0%, #060615 100%);
  border: 4px solid #18186a;
  border-radius: 10px;
  box-shadow:
    0 0 0 2px #000,
    0 0 0 5px #1a0a50,
    0 0 70px rgba(80,40,255,0.25),
    inset 0 0 100px rgba(0,0,60,0.5);
  overflow: hidden;
  padding-bottom: 24px;
}

/* CRT scanlines */
.team__scanlines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(0,0,0,0.16) 3px,
    rgba(0,0,0,0.16) 4px
  );
  pointer-events: none;
  z-index: 20;
  border-radius: 8px;
}

/* ── Top status bar ── */
.team__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(90deg, #180050, #2a0080, #180050);
  border-bottom: 3px solid #4400c0;
  padding: 8px 18px;
  position: relative;
  z-index: 5;
}

.team__topbar-side {
  display: flex;
  align-items: center;
  gap: 10px;
}

.team__topbar-badge {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  color: #ffd700;
  background: #0a0030;
  border: 2px solid #6600ff;
  padding: 4px 10px;
}

.team__topbar-badge--p2 {
  color: #aaa;
  border-color: #333;
}

.team__topbar-name {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  color: #fff;
}

.team__topbar-side--p2 .team__topbar-name {
  color: #666;
}

.team__topbar-title {
  font-family: 'Press Start 2P', monospace;
  font-size: 11px;
  color: #fff;
  text-shadow: 2px 2px 0 #4400cc, 0 0 12px rgba(180,80,255,0.5);
  letter-spacing: 0.04em;
}

/* ── Character portrait grid — single row of 8 ── */
.team__grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 10px;
  padding: 20px 16px 0;
  position: relative;
  z-index: 5;
}

.team__char {
  cursor: pointer;
  position: relative;
  user-select: none;
}

/* Portrait frame */
.team__frame {
  position: relative;
  aspect-ratio: 1;
  background: #08082a;
  border: 3px solid #1e1e6a;
  overflow: hidden;
  transition: border-color 0.08s, box-shadow 0.08s;
}

/* Corner bracket ornaments */
.team__frame::before,
.team__frame::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  border-style: solid;
  border-color: #2a2a7a;
  z-index: 3;
  transition: border-color 0.08s;
}
.team__frame::before { top: 5px;    left: 5px;    border-width: 2px 0 0 2px; }
.team__frame::after  { bottom: 5px; right: 5px;   border-width: 0 2px 2px 0; }

.team__portrait {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  filter: brightness(0.82) saturate(1.1);
  transition: filter 0.1s;
}

/* P1 blinking cursor */
.team__p1-cursor {
  position: absolute;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Press Start 2P', monospace;
  font-size: 6px;
  color: #ffd700;
  background: rgba(0,0,0,0.82);
  padding: 3px 7px;
  white-space: nowrap;
  opacity: 0;
  z-index: 4;
  pointer-events: none;
  animation: team-coin-blink 0.55s step-end infinite;
}

/* Character name below frame */
.team__char-label {
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  text-align: center;
  color: #5a5aaa;
  margin-top: 7px;
  letter-spacing: 0.05em;
  transition: color 0.08s;
}

/* ── Hover / selected states ── */
.team__char:hover .team__frame,
.team__char.is-selected .team__frame {
  border-color: #ffd700;
  box-shadow:
    0 0 0 2px #000,
    0 0 16px rgba(255,215,0,0.75),
    inset 0 0 14px rgba(255,215,0,0.1);
}

.team__char:hover .team__frame::before,
.team__char:hover .team__frame::after,
.team__char.is-selected .team__frame::before,
.team__char.is-selected .team__frame::after {
  border-color: #ffd700;
}

.team__char:hover .team__portrait,
.team__char.is-selected .team__portrait {
  filter: brightness(1) saturate(1.25);
}

.team__char:hover .team__p1-cursor,
.team__char.is-selected .team__p1-cursor {
  opacity: 1;
}

.team__char:hover .team__char-label,
.team__char.is-selected .team__char-label {
  color: #ffd700;
}

/* ── Fighter info panel ── */
.team__panel {
  display: flex;
  align-items: stretch;
  margin: 18px 20px 0;
  background: #060620;
  border: 3px solid #2a0070;
  position: relative;
  z-index: 5;
  overflow: hidden;
  min-height: 140px;
}

/* Purple corner glow inside panel */
.team__panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(100,0,255,0.08) 0%, transparent 55%);
  pointer-events: none;
}

/* Large portrait on left */
.team__panel-portrait {
  width: 140px;
  flex-shrink: 0;
  background: #08082a;
  border-right: 3px solid #2a0070;
  overflow: hidden;
}

.team__panel-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: opacity 0.15s;
}

/* Info side */
.team__panel-info {
  flex: 1;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.team__panel-name {
  font-family: 'Press Start 2P', monospace;
  font-size: 18px;
  color: #ffd700;
  text-shadow: 3px 3px 0 #7a3800;
  letter-spacing: 0.05em;
  line-height: 1.3;
}

.team__panel-title {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  color: #c084fc;
}

.team__panel-role {
  font-family: 'Open Sans', sans-serif;
  font-size: 11px;
  color: #6060a0;
  margin-bottom: 6px;
}

.team__panel-stats {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: auto;
}

.team__stat-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.team__stat-label {
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  color: #8080c0;
  width: 26px;
  flex-shrink: 0;
}

.team__stat-bar {
  flex: 1;
  height: 8px;
  background: #0c0c38;
  border: 1px solid #202060;
  overflow: hidden;
  position: relative;
}

.team__stat-fill {
  height: 100%;
  background: linear-gradient(90deg, #00b838, #d4ee29);
  position: relative;
  transition: width 0.35s ease-out;
}

/* Glint at tip of bar */
.team__stat-fill::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 3px;
  height: 100%;
  background: rgba(255,255,255,0.55);
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .team__grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 560px) {
  .team__grid { grid-template-columns: repeat(2, 1fr); }
  .team__heading { font-size: 16px; }
  .team__topbar-title { font-size: 8px; }
  .team__panel-name { font-size: 14px; }
  .team__panel-portrait { width: 90px; }
}

/* ══════════════════════════════════════════════════════════════
   TEAM SECTION — DAY MODE
   (mirrors hero / CTA-banner sky palette)
══════════════════════════════════════════════════════════════ */
/* .team inherits day/night bg from .cta-banner — no overrides needed */

/* headings stay white on the blue sky */
body.day-mode .team__label   { color: #ff6a00; }
body.day-mode .team__heading {
  color: #0a1535;
  text-shadow: 3px 3px 0 rgba(0,0,0,0.15);
}
body.day-mode .team__coins { color: #fff176; }

/* ── CRT screen: keep dark — it's an arcade cabinet, always dark inside ──
   Just brighten the bezel / glow to look "powered on in daylight" */
body.day-mode .team__screen {
  border-color: #0a5fa0;
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 5px #2288cc,
    0 0 50px rgba(0,80,200,0.35),
    inset 0 0 80px rgba(0,0,60,0.4);
}

/* Topbar: sunlit blue instead of deep purple */
body.day-mode .team__topbar {
  background: linear-gradient(90deg, #0a3080, #1a50cc, #0a3080);
  border-bottom-color: #3370e0;
}

/* Portrait frames — glow colour matches sky accent */
body.day-mode .team__char:hover .team__frame,
body.day-mode .team__char.is-selected .team__frame {
  border-color: #fff176;
  box-shadow:
    0 0 0 2px #000,
    0 0 18px rgba(255,241,118,0.8),
    inset 0 0 14px rgba(255,241,118,0.12);
}
body.day-mode .team__char:hover .team__frame::before,
body.day-mode .team__char:hover .team__frame::after,
body.day-mode .team__char.is-selected .team__frame::before,
body.day-mode .team__char.is-selected .team__frame::after {
  border-color: #fff176;
}
body.day-mode .team__char:hover .team__char-label,
body.day-mode .team__char.is-selected .team__char-label { color: #fff176; }
body.day-mode .team__p1-cursor { color: #fff176; }

/* Info panel: sky-blue tint on the border */
body.day-mode .team__panel { border-color: #1a50a0; }
body.day-mode .team__panel-portrait { border-right-color: #1a50a0; }
body.day-mode .team__panel-name { color: #fff176; text-shadow: 2px 2px 0 #7a5000; }
body.day-mode .team__panel-title { color: #90c8ff; }
body.day-mode .team__panel-role  { color: #7090b0; }
body.day-mode .team__stat-label  { color: #8090c0; }
body.day-mode .team__topbar-badge { border-color: #3370e0; }


/* ══════════════════════════════════════════════════════════
   FAQ SECTION  — transparent, part of sky-scene
   ══════════════════════════════════════════════════════════ */
.faq {
  position: relative;
  background: transparent;
  padding: 72px 0 0;
}

/* ── Content wrapper — sits above landscape ── */
.faq__container {
  position: relative;
  z-index: 10;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px 280px;
}

.faq__header {
  text-align: center;
  margin-bottom: 52px;
}

.faq__label {
  display: inline-block;
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #ff6a00;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.faq__heading {
  font-family: 'Press Start 2P', monospace;
  font-size: 28px;
  color: #e8f0ff;
  line-height: 1.45;
  margin: 0;
  transition: color 0.5s ease;
}

.faq__heading strong {
  color: #4caf50;
}

.faq__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 40px;
}

.faq__col {
  display: flex;
  flex-direction: column;
}

/* ── Accordion item ── */
.faq__item {
  border-bottom: 2px solid rgba(255,255,255,0.1);
  padding: 0;
  transition: border-color 0.2s;
}

.faq__item:first-child {
  border-top: 2px solid rgba(255,255,255,0.1);
}

.faq__item[open] {
  border-bottom-color: #4caf50;
}

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  list-style: none;
  padding: 18px 4px;
  font-family: 'Poppins', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: #c8d8f0;
  user-select: none;
  transition: color 0.2s;
}

.faq__question::-webkit-details-marker { display: none; }

.faq__question::after {
  content: '+';
  flex-shrink: 0;
  font-size: 1.4rem;
  font-weight: 400;
  color: #4caf50;
  transition: transform 0.25s ease;
  line-height: 1;
}

.faq__item[open] .faq__question {
  color: #4caf50;
}

.faq__item[open] .faq__question::after {
  transform: rotate(45deg);
}

.faq__answer {
  padding: 0 4px 18px;
  font-family: 'Poppins', sans-serif;
  font-size: 0.88rem;
  color: #8090a8;
  line-height: 1.7;
  text-align: justify;
}

.faq__answer p { margin: 0 0 8px; }
.faq__answer p:last-child { margin-bottom: 0; }
.faq__answer a { color: #4caf50; text-decoration: underline; }

/* ── DAY MODE ── */
body.day-mode .faq { background: transparent; }
body.day-mode .faq__heading        { color: #0a2055; }
body.day-mode .faq__heading strong { color: #1a5c00; }
body.day-mode .faq__item           { border-bottom-color: rgba(10,32,85,0.2); }
body.day-mode .faq__item:first-child { border-top-color: rgba(10,32,85,0.2); }
body.day-mode .faq__item[open]     { border-bottom-color: #2a7a00; }
body.day-mode .faq__question       { color: #0a2055; }
body.day-mode .faq__question::after { color: #2a7a00; }
body.day-mode .faq__item[open] .faq__question { color: #1a5c00; }
body.day-mode .faq__item[open] .faq__question::after { color: #1a5c00; }
body.day-mode .faq__answer         { color: #1a3060; }
body.day-mode .faq__answer a       { color: #1a5c00; }

/* ── Responsive ── */
@media (max-width: 900px) {
  .faq__grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .faq__col + .faq__col .faq__item:first-child {
    border-top: none;
  }
  .faq__container { padding-bottom: 240px; }
}

@media (max-width: 560px) {
  .faq__heading { font-size: 1rem; }
  .faq { padding-top: 60px; }
  .faq__container { padding-bottom: 200px; }
}

/* ── SEO Audit Modal ── */
.audit-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.audit-modal[hidden] { display: none; }

.audit-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
}

.audit-modal__box {
  position: relative;
  background: #fff;
  border-radius: 12px;
  padding: 32px 28px 28px;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  margin: 16px;
}

.audit-modal__close {
  position: absolute;
  top: 12px;
  right: 14px;
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  color: #888;
  line-height: 1;
  padding: 4px;
}

.audit-modal__close:hover { color: #333; }

.audit-modal__title {
  font-family: 'Poppins', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #0d1b2e;
  margin: 0 0 20px;
  line-height: 1.3;
}

.audit-modal__form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.audit-modal__input {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid #ddd;
  border-radius: 8px;
  font-size: 14px;
  font-family: 'Open Sans', sans-serif;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.2s;
}

.audit-modal__input:focus { border-color: #e05c2a; }

.audit-modal__captcha {
  display: flex;
  justify-content: flex-start;
}

.audit-modal__submit {
  background: #0d1b2e;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 14px;
  font-size: 15px;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

.audit-modal__submit:hover { background: #1a2f4a; }


/* ═══════════════════════════════════════════════════════════
   TABLET  —  max-width: 1024px
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {

  /* ── Navbar ── */
  .navbar { padding: 0 16px; }
  .navbar__container { padding: 0 16px; }
  .navbar__link { font-size: 12px; padding: 18px 8px; }
  .navbar__link--login { padding: 8px 14px; }

  /* ── Hero ── */
  .hero__content { padding: 24px 32px 0; text-align: center; align-items: center; }
  .hero__heading { font-size: 20px; }
  .hero__subtext { font-size: 16px; max-width: 100%; }
  .hero__cta-wrap { justify-content: center; }

  /* ── Value prop ── */
  .value-prop__container { padding: 0 32px; }
  .value-prop__stats { gap: 24px; padding: 24px 24px; }

  /* ── Services ── */
  .services-split__container { padding: 0 32px; }
  .services-split__col { padding: 0 24px; }

  /* ── Our Tools ── */
  .our-tools__container { padding: 0 32px; }

  /* ── Case Studies ── */
  .case-studies__container { padding: 0 32px; }
  .case-studies__grid { grid-template-columns: repeat(2, 1fr); }

  /* ── Community ── */
  .community__container { padding: 0 32px; }

  /* ── CTA Banner ── */
  .cta-banner__container { padding: 0 32px; }

  /* ── Team ── */
  .team__container { padding: 0 32px; }

  /* ── FAQ ── */
  .faq__container { padding: 0 32px 200px; }

  /* ── Footer ── */
  .footer__container { padding: 0 32px 48px; gap: 32px; }
  .footer__brand { flex: 0 0 200px; }
  .footer__col   { flex: 0 0 160px; }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE  —  max-width: 600px
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 600px) {

  /* ── Navbar ── */
  .navbar { padding: 0 16px; }
  .navbar__container { padding: 0 8px; }
  .navbar__logo img { height: 28px; width: auto; }
  .navbar__nav { display: none; }

  /* ── Hero ── */
  .hero__content {
    padding: 24px 20px 0;
    align-items: center;
    text-align: center;
  }
  .hero__heading { font-size: 18px; line-height: 1.6; }
  .hero__heading strong { display: block; font-size: 22px; margin-top: 4px; }
  .hero__subtext  { font-size: 14px; max-width: 100%; }
  .hero__cta      { font-size: 11px; padding: 14px 20px; }
  .hero__cta-wrap { justify-content: center; }
  .hero__moon     { width: 52px; height: 52px; top: 14px; right: 14px; }

  /* ── Featured logos ── */
  .featured__track { gap: 32px; }
  .featured__quote-card { min-width: 260px; max-width: 260px; padding: 16px; }
  .featured__quote-text { font-size: 13px; }

  /* ── Value prop ── */
  .value-prop__container { padding: 0 20px; }
  .value-prop__heading   { font-size: 22px; }
  .value-prop__subtext   { font-size: 14px; }
  .value-prop__stats { flex-wrap: wrap; gap: 20px; padding: 24px 16px; }
  .value-prop__stat { flex: 0 0 40%; }
  .value-prop__stat-num   { font-size: 28px; }
  .value-prop__stat-label { font-size: 10px; }
  .value-prop__stat-divider { display: none; }

  /* ── Services split ── */
  .services-split__container {
    padding: 0 20px;
    flex-direction: column;
    gap: 32px;
  }
  .services-split__col { padding: 0; width: 100%; }
  .services-split__divider { display: none; }
  .services-split__heading { font-size: 22px; }
  .services-split__title   { font-size: 22px; }

  /* ── Our Tools ── */
  .our-tools__container { padding: 0 20px; }
  .our-tools__grid { flex-direction: column; gap: 16px; }
  .our-tools__card { min-width: 0; width: 100%; flex: none; }
  .our-tools__heading { font-size: 16px; }
  .our-tools__subtext { font-size: 13px; }

  /* ── Case Studies ── */
  .case-studies__container { padding: 0 20px; }
  .case-studies__grid { grid-template-columns: 1fr; }
  .case-studies__heading { font-size: 22px; }

  /* ── Community ── */
  .community__container { padding: 0 20px; }
  .community__grid { grid-template-columns: 1fr; }
  .community__heading { font-size: 22px; }

  /* ── Testimonials ── */
  .testimonials__container { padding: 0 16px; }
  .testimonials__heading  { font-size: 22px; }
  .testimonials__card     { width: 260px; min-width: 260px; }
  .testimonials__row::before,
  .testimonials__row::after { width: 40px; }

  /* ── CTA Banner ── */
  .cta-banner__container { padding: 0 20px; }
  .cta-banner__heading   { font-size: 16px; }
  .cta-banner__subtext   { font-size: 13px; }
  .cta-banner__paths     { flex-direction: column; gap: 32px; align-items: center; }
  .cta-banner__path      { max-width: 100%; }

  /* ── Team ── */
  .team__container { padding: 0 20px; }
  .team__heading   { font-size: 14px; }
  .team__screen    { flex-direction: column; }
  .team__chars-col, .team__panel-col { width: 100%; }

  /* ── FAQ ── */
  .faq__container { padding: 0 20px 160px; }

  /* ── Footer ── */
  .footer__container {
    flex-direction: column;
    padding: 32px 24px 40px;
    gap: 32px;
  }
  .footer__brand { flex: none; width: 100%; }
  .footer__col   { flex: none; width: 100%; }
  .footer__cols  { flex-direction: column; gap: 24px; width: 100%; }
  .footer__bottom-inner {
    flex-direction: column;
    gap: 8px;
    text-align: center;
    font-size: 12px;
  }
}