:root {
  color-scheme: light dark;
  --black: #070706;
  --graphite: #151719;
  --cream: #f4ecdf;
  --sand: #d7b98f;
  --blue: #213854;
  --cyan: #3bc9db;
  --mint: #b8f2e6;
  --coral: #ffa69e;
  --ink: #101214;
  --muted: #6d685f;
  --line: rgba(16, 18, 20, 0.18);
  --white-line: rgba(255, 255, 255, 0.18);
  --max: 1280px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 88px; }

body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background: var(--cream);
  overflow-x: hidden;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(16, 18, 20, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16, 18, 20, 0.045) 1px, transparent 1px);
  background-size: 84px 84px;
  content: "";
}

a { color: inherit; text-decoration: none; }

button, a { -webkit-tap-highlight-color: transparent; }

a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 4px;
}

h1, h2, h3, p { margin-top: 0; }

.ferrofluid-bg {
  position: fixed;
  inset: 0;
  z-index: -3;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  opacity: 0.5;
}

.hero-dock {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 50;
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 76px;
  padding: 12px;
  pointer-events: none;
}

.hero-dock::before {
  position: absolute;
  inset: 0;
  border-bottom: 1px solid var(--line);
  background: rgba(244, 236, 223, 0.94);
  opacity: var(--dock-opacity, 0);
  content: "";
}

.hero-dock-logo { width: 160px; aspect-ratio: 990 / 290; }
.hero-dock-cta { width: 216px; height: 48px; }
.hero-dock-logo, .hero-dock-cta { flex: none; }

.hero-dock .hero-brand,
.hero-dock .hero-connect {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  transform-origin: top left;
  /* Keep the fixed foreground stable while the independent circuit repaints. */
  will-change: transform;
  pointer-events: auto;
  transition: background 180ms ease, color 180ms ease;
}

.hero-actions {
  display: flex;
  align-items: center;
}

.button-dark:hover {
  color: var(--black);
  background: var(--cyan);
}

.button {
  border: 1px solid currentColor;
  border-radius: 999px;
  font-weight: 900;
}

.section-light,
.section-cream,
.section-dark {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.hero {
  isolation: isolate;
  background: linear-gradient(180deg, #f5efe6, #d8c09a);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: calc(100svh - 24px);
  padding: clamp(30px, 5vw, 64px) max(16px, calc((100vw - var(--max)) / 2)) 64px;
  text-align: center;
}

.micro,
.section-kicker {
  margin-bottom: 12px;
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero-payment {
  transform: translateZ(0);
  max-width: 760px;
  margin: 2px 0 0;
  color: var(--black);
  font-size: 2.5rem;
  font-weight: 950;
  line-height: 1.05;
}

.hero-actions {
  isolation: isolate;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  width: min(100%, 640px);
  margin-top: 8px;
}

.hero-cta-slot { flex: none; width: 216px; height: 48px; }
.hero-connect { width: 100%; height: 48px; white-space: nowrap; font-size: 0.875rem; }
.hero-actions > .button { min-height: 48px; font-size: 0.875rem; will-change: transform, opacity; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 13px 18px;
  transition: transform 180ms ease, background 180ms ease, color 180ms ease;
}

.button:hover { transform: translateY(-2px); }
.button-dark { color: var(--cream); background: var(--black); }
.button-ghost { color: var(--ink); background: transparent; }

.hero-art {
  position: relative;
  width: min(100%, 1120px);
  min-height: clamp(300px, 48vw, 500px);
}

[data-parallax].is-visible {
  transform: translateY(var(--parallax-y, 0));
}

.hero-logo-slot {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: min(100%, 980px);
  aspect-ratio: 990 / 290;
  transform: translate(-50%, -50%);
}

.hero-brand { position: relative; display: block; width: 100%; }
.hero-brand::after { position: absolute; inset: -7px 0; content: ""; }
.hero-logo { display: block; width: 100%; height: auto; object-fit: contain; filter: drop-shadow(0 28px 42px rgba(59, 201, 219, 0.18)); }

.hero-art, .hero-payment, .hero-actions { position: relative; z-index: 1; }

.hero-circuit-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* Bound all circuit painting to its own layer, away from the fixed logo/CTA. */
  contain: strict;
  transform: translateZ(0);
}

.hero-circuit {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Traces stay visible through the logo's gaps; soften only toward the copy. */
  mask-image: linear-gradient(#000 58%, transparent 92%);
}

.circuit-trace { fill: none; stroke: #927044; stroke-opacity: .29; stroke-width: 1; }
.circuit-node { fill: #ac8752; fill-opacity: .55; }
.circuit-pulse {
  fill: none;
  stroke: #fff9e9;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 7 113;
  stroke-dashoffset: 9;
  opacity: 0;
  animation: circuit-current var(--pulse-duration, 9s) linear var(--pulse-delay, 0s) infinite;
}
.circuit-halos { opacity: .18; }
.circuit-pulse-halo { stroke-width: 6; }

@keyframes circuit-current {
  0% { stroke-dashoffset: 9; opacity: 0; }
  4% { opacity: .95; }
  34% { opacity: .95; }
  40% { stroke-dashoffset: -103; opacity: 0; }
  100% { stroke-dashoffset: -103; opacity: 0; }
}

.hero.is-circuit-paused .circuit-pulse { animation-play-state: paused; }
.circuit-toggle {
  position: absolute;
  z-index: 1;
  right: 24px;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 10px 12px;
  border: 0;
  border-radius: 24px;
  color: #624c30;
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
}
.circuit-toggle[hidden] { display: none; }
.circuit-toggle:hover { background: rgba(255, 249, 233, .35); }
.circuit-toggle:focus-visible { outline-color: #624c30; }
.circuit-toggle-icon { width: 9px; height: 10px; border-inline: 2px solid currentColor; }
.circuit-toggle[aria-pressed="true"] .circuit-toggle-icon {
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-left: 8px solid currentColor;
  border-right: 0;
}
@media (prefers-reduced-motion: reduce) {
  .hero .circuit-pulse, .hero .circuit-toggle { display: none; }
}

.locations {
  padding: clamp(72px, 10vw, 140px) max(16px, calc((100vw - var(--max)) / 2));
}

.section-cream { background: var(--cream); }
.section-light { background: linear-gradient(180deg, #f5efe6, #d8c09a); }
.section-dark { background: var(--black); color: var(--cream); }

.split-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.42fr);
  gap: 30px;
  align-items: end;
}

.split-heading h2 {
  margin-bottom: 0;
  font-size: clamp(3.4rem, 10vw, 10rem);
  line-height: 0.82;
  letter-spacing: 0;
}

.split-heading p {
  max-width: 420px;
  color: var(--muted);
  line-height: 1.55;
}

.country-board {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 44px;
}

.country-card {
  min-height: 360px;
  border: 1px solid var(--line);
  padding: 22px;
  background: rgba(255, 255, 255, 0.34);
}

.country-card-offset { transform: translateY(72px); }
.flag { display: inline-flex; margin-bottom: 90px; font-size: 0.8rem; font-weight: 950; }
.country-card h3 { margin-bottom: 8px; font-size: clamp(2.2rem, 5vw, 5rem); line-height: 0.9; color: var(--blue); }
.country-card p { color: var(--muted); }
.country-card ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 30px 0 0; padding: 0; list-style: none; }
.country-card li { border: 1px solid var(--line); border-radius: 999px; padding: 8px 10px; font-size: 0.72rem; font-weight: 900; }

[data-reveal] {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 700ms ease, transform 700ms ease;
}
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }
[data-reveal][data-parallax].is-visible { transform: translateY(var(--parallax-y, 0)); }

@keyframes breathe { 50% { transform: scale(1.04); } }

@media (max-width: 980px) {
  .split-heading { grid-template-columns: 1fr; }
  .hero-art { min-height: clamp(260px, 56vw, 430px); }
  .hero-logo-slot { width: min(100%, 760px); }
  .hero-payment { font-size: 2rem; }
  .country-card-offset { transform: none; }
}

@media (max-width: 620px) {
  .hero-dock { gap: 12px; height: 72px; }
  .hero-dock-logo { width: 104px; }
  .hero-dock-cta { width: 176px; }
  .hero { padding-top: 28px; }
  .hero-art { min-height: clamp(190px, 54vw, 260px); }
  .hero-logo-slot { width: min(100%, 460px); }
  .hero-payment { max-width: 340px; font-size: 1.625rem; }
  .hero-cta-slot { width: 100%; }
  .hero-actions, .button { width: 100%; }
  .hero-actions { align-items: stretch; flex-direction: column; }
  .country-board { grid-template-columns: 1fr; }
  .locations { padding-block: 72px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation: none !important;
    transition: none !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}