/* =============================================================
   Dolphin Connect Inc. - merged landing page (static build)

   A 1:1 static port of /merged-landing-page from the Next.js app.
   Nothing about the look or behaviour changes; only the delivery does.

   Two blocks below:

   1. BASE - the handful of global rules the page used to inherit from
      the app (@mantine/core/styles.css reset + the @layer base block in
      src/styles/globals.css). Tailwind's preflight is off app-wide, so
      this is the complete set that reached this page. Nothing else from
      Tailwind is used here - the page was always plain CSS.

   2. PAGE - src/components/merged-landing/landing.module.css, verbatim.
      It was a CSS module, but every selector in it is already a plain
      class name, so the only change is that the names are no longer
      hashed. Image urls are relative (assets/landing/...) instead of
      root-absolute, so the folder works from file:// or any subpath.
============================================================= */

/* =============================================================
   1. BASE
============================================================= */

/* next/font served DM Sans through --font-sans. Same face, loaded from
   Google Fonts in index.html. Only the normal style, as before - the
   footer tagline's italic is synthesised, which is what shipped. */
:root {
  --font-sans: "DM Sans";
}

/* @mantine/core/styles.css - reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}

input,
button,
textarea,
select {
  font: inherit;
}

button,
select {
  text-transform: none;
}

/* @mantine/core/styles.css - body, then globals.css's overrides of it
   (font-family, background, colour, smoothing, min-height). */
body {
  margin: 0;
  font-family: var(--font-sans), sans-serif;
  font-size: 1rem;
  line-height: 1.55;
  min-height: 100dvh;
  background-color: #ffffff;
  color: #000000;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* globals.css - @layer base */
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 400;
}

ul,
ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

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

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  vertical-align: middle;
}

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

/* =============================================================
   2. PAGE
============================================================= */

/* =============================================================
   Merged landing page - scoped stylesheet.

   Everything lives under `.page`, including the design tokens, so
   nothing here can leak into the rest of the app. The global
   Tailwind theme (src/styles/globals.css, tailwind.config.js) uses a
   different blue scale, which is why this page carries its own.

   `--font-sans` is intentionally NOT redefined: it is already set to
   DM Sans by next/font in _app.js and applied to <body> in
   _document.js, which is the same face the design uses.
============================================================= */
.page {
  /* Brand - blue + deep navy */
  --navy: #172554;
  --navy-2: #1e3a8a;

  /* Primary blue family */
  --primary: #1364ff;
  --primary-dark: #0b4cd1;
  --primary-light: #4a87ff;
  --primary-lite: #a5c0ff;

  /* Blue pastels */
  --pastel-blue: #e3edff;
  --pastel-blue-soft: #f0f5ff;
  --pastel-blue-warm: #dce6ff;

  /* Sticky-stack palette - five blue shades, each with a deeper pair */
  --card-01: #f0f5ff;
  --card-02: #e3edff;
  --card-03: #eaf1ff;
  --card-04: #dbe6ff;
  --card-05: #edf3ff;
  --card-01-2: #d9e4fa;
  --card-02-2: #c4d5f5;
  --card-03-2: #d3e0f8;
  --card-04-2: #b8caf0;
  --card-05-2: #cfddf5;

  /* Surfaces */
  --paper: #ffffff;
  --paper-2: #edf0f2;
  --paper-3: #f5f7fa;

  /* Text */
  --ink: #151d31;
  --ink-muted: rgba(21, 29, 49, 0.72);
  --ink-secondary: rgba(21, 29, 49, 0.6);
  --ink-faint: rgba(21, 29, 49, 0.45);

  /* Borders */
  --border: rgba(21, 29, 49, 0.08);
  --border-strong: rgba(21, 29, 49, 0.14);

  /* Shadows (blue-tinted) */
  --shadow-card: 0 1px 12px rgba(21, 29, 49, 0.05);
  --shadow-lift: 0 8px 30px rgba(19, 100, 255, 0.14);
  /* Two layers: a tight contact shadow to draw the edge of a near-white card
     on white, plus a soft ambient one for depth as the cards stack. */
  --shadow-stack: 0 2px 8px rgba(21, 29, 49, 0.07),
    0 14px 36px rgba(23, 37, 84, 0.11);

  /* The portal's three shapes -- pill, card, field. Nothing else may appear
     on this page. It is the same scale the rest of the app gets from
     tailwind.config.js, and scripts/check-radius.mjs now enforces it here too. */
  --radius-pill: 9999px;
  --radius-card: 22px;
  --radius-field: 14px;

  background: var(--paper-2);
  color: var(--ink);
  line-height: 1.55;
  font-weight: 400;
}

/* Tailwind's preflight is disabled app-wide, so border-box is set here. */
.page,
.page *,
.page *::before,
.page *::after {
  box-sizing: border-box;
}

/* Anchored sections clear the 72px sticky nav when jumped to. */
.who,
.connect,
.care,
.purpose,
.faq {
  scroll-margin-top: 90px;
}

/* #choose targets the split panels, not the section top, so "Choose a
   platform" skips the header. Raise this value to stop higher up, lower
   it (or go negative) to land further down. */
.chooseSplitWrap {
  scroll-margin-top: 180px;
}

.container {
  max-width: 1200px;
  width: 100%;
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 32px);
}

/* =============================================================
   Typography
============================================================= */
/* No base `h1, h2, h3` rule here on purpose. Scoping one to `.page` would
   give it specificity (0,1,1), beating the single-class heading rules below
   (0,1,0) and overriding their colour and weight. Each heading class is
   self-contained instead, which also clears globals.css's
   `h1..h6 { font-weight: 400 }` (0,0,1) regardless of stylesheet order. */
.h2 {
  font-size: clamp(26px, 3.2vw, 40px);
  line-height: 1.18;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--navy);
}

.accent {
  color: var(--primary);
  font-weight: 700;
}

.eyebrow {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-secondary);
  display: block;
  margin-bottom: 10px;
}

.sub {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-muted);
}

/* =============================================================
   Buttons
============================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: 14.5px;
  font-weight: 600;
  transition: transform 220ms ease, box-shadow 220ms ease,
    background 200ms ease, color 200ms ease;
  cursor: pointer;
  white-space: nowrap;
  border: 1px solid transparent;
  line-height: 1;
}
.btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-lift);
}
.btn .arrow {
  transition: transform 220ms ease;
}
.btn:hover .arrow {
  transform: translateX(4px);
}

.btnPrimary {
  background: var(--primary);
  color: #fff;
}
.btnPrimary:hover {
  background: var(--primary-dark);
}
.btnWhite {
  background: #fff;
  color: var(--navy);
}
.btnNavy {
  background: var(--navy);
  color: #fff;
}
.btnNavy:hover {
  background: var(--navy-2);
}
.btnGhost {
  background: transparent;
  color: var(--navy);
  border: 1px solid var(--border-strong);
}
.btnGhost:hover {
  background: var(--pastel-blue);
}

/* =============================================================
   Decorative
============================================================= */
.dotGrid {
  background-image: radial-gradient(circle, currentColor 1px, transparent 1px);
  background-size: 28px 28px;
}
.blurOrb {
  position: absolute;
  border-radius: var(--radius-pill);
  filter: blur(110px);
  pointer-events: none;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-18px);
  }
}

/* =============================================================
   NAV
============================================================= */
.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  height: 72px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid var(--border);
}
.navRow {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.navBrand {
  display: flex;
  align-items: center;
}
.navBrand img {
  display: block;
  height: 40px;
  width: auto;
}
@media (max-width: 480px) {
  .navBrand img {
    height: 34px;
  }
}
.navLinks {
  display: none;
  gap: 32px;
  font-size: 14px;
  font-weight: 500;
}
.navLinks a {
  color: var(--ink-muted);
  position: relative;
  padding: 8px 0;
  transition: color 200ms;
}
.navLinks a:hover,
.navLinks a.isActive {
  color: var(--primary);
}
.navLinks a.isActive::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--primary);
  border-radius: var(--radius-pill);
}
@media (min-width: 960px) {
  .navLinks {
    display: flex;
  }
}

/* =============================================================
   1. HERO
============================================================= */
.hero {
  display: grid;
  grid-template-columns: 1fr;
  min-height: calc(100vh - 72px);
  background: var(--paper-3);
}
@media (min-width: 900px) {
  .hero {
    grid-template-columns: 1fr 1fr;
  }
}

.heroPhoto {
  min-height: 340px;
  position: relative;
  order: 2;
  background: url("assets/landing/hero.jpg") center / cover no-repeat, #d4c1a4;
}
@media (min-width: 900px) {
  .heroPhoto {
    order: 1;
  }
}
.heroPhoto::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(11, 76, 209, 0.05),
    rgba(23, 37, 84, 0.15)
  );
}

.heroPanel {
  position: relative;
  background: linear-gradient(160deg, var(--navy) 0%, #1e3a8a 100%);
  color: #fff;
  overflow: hidden;
  padding: clamp(56px, 8vw, 96px) clamp(24px, 6vw, 72px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  order: 1;
}
@media (min-width: 900px) {
  .heroPanel {
    order: 2;
  }
}
.heroPanel .dotGrid {
  position: absolute;
  inset: 0;
  color: #fff;
  opacity: 0.06;
  pointer-events: none;
}
.orbPrimary {
  width: 480px;
  height: 480px;
  background: var(--primary-light);
  top: -140px;
  right: -140px;
  opacity: 0.32;
}
.orbPurple {
  width: 400px;
  height: 400px;
  background: var(--primary);
  bottom: -120px;
  left: -100px;
  opacity: 0.3;
  filter: blur(120px);
}

.heroInner {
  position: relative;
  z-index: 2;
  max-width: 540px;
  animation: fadeUp 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.heroBadge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: 30px;
}
.heroBadgeDot {
  width: 8px;
  height: 8px;
  background: var(--primary-lite);
  border-radius: 50%;
}
.heroTitle {
  color: #fff;
  font-size: clamp(36px, 4.8vw, 58px);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
}
.heroTitleAccent {
  display: block;
  color: var(--primary-lite);
  font-weight: 700;
}
.heroSub {
  color: rgba(255, 255, 255, 0.78);
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 22px;
  max-width: 500px;
}
.heroSub strong {
  color: #fff;
  font-weight: 700;
}

.heroPortals {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 26px;
  max-width: 520px;
}
.heroPortal {
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-card);
  transition: background 200ms, border-color 200ms, transform 200ms;
}
.heroPortal:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(74, 135, 255, 0.5);
  transform: translateY(-1px);
}
.heroPortalTag {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary-lite);
  margin-bottom: 4px;
}
.heroPortalName {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}
.heroPortalDesc {
  font-size: 12.5px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.7);
}

.heroCta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.heroTrust {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.78);
  font-weight: 500;
}
.heroTrust span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.heroTrust svg {
  color: var(--primary-lite);
}

/* =============================================================
   2. WHO WE ARE
============================================================= */
.who {
  padding: 96px 0;
  background: var(--paper);
}
.whoGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px;
  align-items: center;
}
@media (min-width: 900px) {
  .whoGrid {
    grid-template-columns: 1fr 1fr;
  }
}

.whoPhotoWrap {
  position: relative;
  padding: 28px 0 0 28px;
}
.whoPhotoPlate {
  position: absolute;
  inset: 0 28px 28px 0;
  background: linear-gradient(
    135deg,
    var(--pastel-blue-warm) 0%,
    var(--pastel-blue) 100%
  );
  border-radius: var(--radius-card);
}
.whoPhoto {
  position: relative;
  border-radius: var(--radius-card);
  aspect-ratio: 4 / 3.4;
  min-height: 380px;
  background: url("assets/landing/who-we-are.jpg") center / cover no-repeat,
    #b8996f;
  overflow: hidden;
}
.whoBadge {
  position: absolute;
  padding: 12px 16px;
  border-radius: var(--radius-field);
  box-shadow: var(--shadow-lift);
  animation: float 4.5s ease-in-out infinite;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 3;
}
.whoBadgeA {
  left: -14px;
  bottom: 46px;
  background: var(--navy);
  color: #fff;
}
.whoBadgeIconTile {
  width: 32px;
  height: 32px;
  background: rgba(74, 135, 255, 0.28);
  color: var(--primary-lite);
  border-radius: var(--radius-pill);
  display: grid;
  place-items: center;
}
.whoBadgeTitle {
  font-size: 14px;
  font-weight: 700;
}
.whoBadgeLabel {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  font-weight: 600;
}
.whoBadgeB {
  right: -14px;
  top: 46px;
  background: #fff;
  animation-delay: 1.5s;
}
.whoBadgeQuoteGlyph {
  font-family: Georgia, serif;
  font-size: 38px;
  color: var(--primary);
  line-height: 0.5;
  margin-top: 10px;
}
.whoBadgeQuote {
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
}

.whoTitle {
  margin: 12px 0 22px;
}
.whoBody p {
  margin-bottom: 14px;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--ink-muted);
}
.whoQuote {
  margin: 26px -18px 0;
  padding: 20px 18px;
  background: linear-gradient(
    135deg,
    var(--pastel-blue) 0%,
    var(--pastel-blue-warm) 100%
  );
  border-radius: var(--radius-card);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--navy);
}
.whoQuote strong {
  color: var(--primary);
  font-weight: 700;
}
.whoMail {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  color: var(--primary);
  font-weight: 600;
  border-bottom: 1px solid var(--primary);
  padding-bottom: 2px;
  transition: gap 200ms;
}
.whoMail:hover {
  gap: 12px;
}

/* =============================================================
   3. CHOOSE - centerpiece
============================================================= */
.choose {
  background: var(--paper);
  padding: 96px 0 0;
}
.chooseHeader {
  text-align: center;
  padding-bottom: 108px;
}
.chooseTitle {
  margin: 12px 0 16px;
}
.chooseSub {
  max-width: 540px;
  margin: 0 auto;
}
.chooseSplitWrap {
  position: relative;
  background: var(--paper);
}
.chooseSplit {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 740px;
  transition: grid-template-columns 500ms cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  /*
   * The lean animates `grid-template-columns`, so both panels reflow their
   * text. Chrome's scroll anchoring reacts to that reflow by nudging the
   * document ~23px to keep its anchor node still -- which drags the panel's
   * bottom edge out from under a stationary cursor resting near it. The
   * pointer then leaves, the lean reverts, the edge comes back, and the two
   * chase each other for as long as the cursor sits there. Opting this
   * subtree out of anchor selection breaks the loop; the lean is unaffected.
   *
   * Removing the transition instead makes it worse, not better -- the reflow
   * lands in one frame and the jump doubles.
   */
  overflow-anchor: none;
}
.chooseSplit.leanLeft {
  grid-template-columns: 1.12fr 0.88fr;
}
.chooseSplit.leanRight {
  grid-template-columns: 0.88fr 1.12fr;
}
.choosePanel {
  padding: 80px clamp(24px, 5.5vw, 72px);
  position: relative;
  transition: background 300ms, opacity 300ms, filter 300ms;
}
.choosePanelLeft {
  background: var(--pastel-blue-soft);
}
.choosePanelRight {
  background: var(--pastel-blue-warm);
  /* Seam sits on the left edge of the right panel so it stays flush
     no matter which side leans. */
  border-left: 1px solid var(--border-strong);
}
.chooseSplit.leanRight .choosePanelLeft,
.chooseSplit.leanLeft .choosePanelRight {
  opacity: 0.72;
  filter: saturate(0.6);
}
@media (max-width: 899px) {
  .choosePanelRight {
    border-left: 0;
    border-top: 1px solid var(--border-strong);
  }
}

.panelKicker {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-secondary);
  margin-bottom: 18px;
}
.panelName {
  font-size: 32px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 8px;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.panelOneliner {
  font-size: 18px;
  line-height: 1.4;
  color: var(--ink-muted);
  margin-bottom: 22px;
  font-weight: 500;
}
.panelBody {
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-muted);
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(23, 37, 84, 0.1);
  margin-bottom: 22px;
}
.panelFacts {
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(23, 37, 84, 0.1);
  margin-bottom: 22px;
}
.panelFacts li {
  display: flex;
  gap: 12px;
  padding: 8px 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-muted);
}
.panelFacts li::before {
  content: "▸";
  color: var(--primary);
  font-size: 14px;
  line-height: 1.55;
  flex-shrink: 0;
}
.choosePanelRight .panelFacts li::before {
  color: var(--primary-dark);
}
.panelPrice {
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 22px;
}
.panelCtas {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}

/* Medallion - round badge sitting on top of the seam */
.medallion {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -50%);
  width: 108px;
  height: 108px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--navy) 0%, var(--primary-dark) 100%);
  box-shadow: 0 0 0 8px var(--paper), 0 14px 28px rgba(23, 37, 84, 0.28);
  z-index: 10;
  color: #fff;
  transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
}
.medallion.leanLeft {
  transform: translate(-50%, -50%) rotate(6deg);
}
.medallion.leanRight {
  transform: translate(-50%, -50%) rotate(-6deg);
}
.medallion svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.medallionCaption {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 7px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.22em;
  line-height: 1.55;
  padding-top: 8px;
}
@media (max-width: 899px) {
  .chooseSplit {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .medallion,
  .medallion.leanLeft,
  .medallion.leanRight {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    margin: -54px auto 0;
  }
  .choosePanel {
    padding: 60px 24px;
  }
}

/* =============================================================
   4. INSIDE DOLPHIN CONNECT - sticky-card stack
============================================================= */
/* White behind the card stack, so the near-white cards are defined by their
   shadow (see .stickyCard) rather than by backdrop colour - at any backdrop
   lightness, #F0F5FF cards can't separate by colour alone.
   The stop is an absolute length, not a percentage: this section is several
   viewports tall, so a percentage would put the tint in the middle of the
   stack. 340px keeps it in the header, easing out of the pastel Choose
   panels above. */
.connect {
  background: linear-gradient(
    180deg,
    var(--pastel-blue-soft) 0,
    var(--paper) 340px,
    var(--paper) 100%
  );
  padding: 96px 0 40px;
  position: relative;
}
.connectHeader {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 56px;
  position: relative;
}
.connectTitle {
  margin: 12px 0 14px;
}
.connectSub {
  color: var(--ink-muted);
  font-size: 16px;
  line-height: 1.65;
  max-width: 620px;
  margin: 0 auto;
}

.stickyStack {
  position: relative;
  max-width: 1120px;
  margin: 0 auto;
}
.stickyStackProgress {
  position: sticky;
  top: 88px;
  z-index: 20;
  margin-bottom: 32px;
  height: 4px;
  border-radius: var(--radius-pill);
  background: rgba(19, 100, 255, 0.15);
  overflow: hidden;
  transition: opacity 240ms ease;
}
.stickyStackProgress.isDone {
  opacity: 0;
  pointer-events: none;
}
.stickyStackProgressBar {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--primary-light), var(--primary-dark));
  border-radius: var(--radius-pill);
  transition: width 120ms linear;
}
.stickyStackList {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.stickyCard {
  position: sticky;
  overflow: hidden;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-stack);
  padding: 40px 36px;
  min-height: 380px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: center;
  transform-origin: center top;
  /* No transition on `transform`. ConnectSection writes a new scale on every
     scroll frame, so a transition never finishes -- each frame re-targets a
     220ms animation, leaving the card lagging behind the scroll and settling
     late. Driven per frame, the scroll itself is the animation. */
}
@media (min-width: 900px) {
  .stickyCard {
    grid-template-columns: 1.05fr 0.95fr;
    padding: 48px 52px;
  }
}

.stickyCard:nth-child(1) {
  top: 108px;
  z-index: 1;
}
.stickyCard:nth-child(2) {
  top: 128px;
  z-index: 2;
}
.stickyCard:nth-child(3) {
  top: 148px;
  z-index: 3;
}
.stickyCard:nth-child(4) {
  top: 168px;
  z-index: 4;
}
.stickyCard:nth-child(5) {
  top: 188px;
  z-index: 5;
}

.stickyCard01 {
  background: var(--card-01);
}
.stickyCard02 {
  background: var(--card-02);
}
.stickyCard03 {
  background: var(--card-03);
}
.stickyCard04 {
  background: var(--card-04);
}
.stickyCard05 {
  background: var(--card-05);
}

.stickyCardDots {
  position: absolute;
  top: 0;
  left: 128px;
  transform: translateY(-60%);
  pointer-events: none;
  z-index: 1;
}
.stickyCard01 .stickyCardDots {
  color: var(--card-01-2);
}
.stickyCard02 .stickyCardDots {
  color: var(--card-02-2);
}
.stickyCard03 .stickyCardDots {
  color: var(--card-03-2);
}
.stickyCard04 .stickyCardDots {
  color: var(--card-04-2);
}
.stickyCard05 .stickyCardDots {
  color: var(--card-05-2);
}

.stickyCardBlob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
}
.stickyCardBlobBl {
  width: 140px;
  height: 140px;
  bottom: 0;
  left: 0;
  transform: translate(-50%, 50%);
}
.stickyCardBlobTr {
  width: 218px;
  height: 218px;
  top: 0;
  right: 0;
  transform: translate(50%, -50%);
}
.stickyCard01 .stickyCardBlob {
  background: var(--card-01-2);
}
.stickyCard02 .stickyCardBlob {
  background: var(--card-02-2);
}
.stickyCard03 .stickyCardBlob {
  background: var(--card-03-2);
}
.stickyCard04 .stickyCardBlob {
  background: var(--card-04-2);
}
.stickyCard05 .stickyCardBlob {
  background: var(--card-05-2);
}

.stickyCardContent {
  position: relative;
  z-index: 5;
  max-width: 520px;
}
.stickyCardKicker {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-secondary);
  margin-bottom: 12px;
}
.stickyCardTitle {
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.2;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 20px;
  letter-spacing: -0.015em;
}
.stickyCardBody {
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-muted);
  margin-bottom: 24px;
}
.stickyCardBtn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  background: var(--primary);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  min-width: 180px;
  justify-content: center;
  transition: transform 220ms ease, box-shadow 220ms ease, background 200ms;
}
.stickyCardBtn:hover {
  background: var(--primary-dark);
  transform: translateY(-1px);
  box-shadow: var(--shadow-lift);
}
.stickyCardBtn .arrow {
  transition: transform 220ms;
}
.stickyCardBtn:hover .arrow {
  transform: translateX(4px);
}

.stickyCardIllus {
  position: relative;
  z-index: 5;
  width: 100%;
  height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.stickyCardIllus svg {
  width: 100%;
  height: 100%;
}

.stickyCardNum {
  position: absolute;
  top: 24px;
  right: 24px;
  z-index: 5;
  font-size: 20px;
  font-weight: 700;
  color: var(--navy);
  opacity: 0.25;
  letter-spacing: 0.05em;
}

/* =============================================================
   5. INSIDE DOLPHIN CARE
============================================================= */
.care {
  background: var(--paper);
  padding: 48px 0 96px;
  position: relative;
  overflow: hidden;
}
.careHeader {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 56px;
  position: relative;
}
.careTitle {
  margin: 12px 0 16px;
}
.careSub {
  color: var(--ink-muted);
  font-size: 16px;
  line-height: 1.65;
}

.ledger {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  position: relative;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 36px;
  box-shadow: var(--shadow-card);
}
@media (min-width: 780px) {
  .ledger {
    grid-template-columns: 1.05fr 1px 0.95fr;
    padding: 44px 52px;
  }
}
.ledgerSeam {
  background: var(--border-strong);
  display: none;
}
@media (min-width: 780px) {
  .ledgerSeam {
    display: block;
  }
}

.ledgerHead {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 28px;
}
.ledgerHeadSky {
  color: var(--primary);
}
.ledgerHeadOrange {
  color: var(--primary-dark);
}

.ledgerItem {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 18px;
  padding: 20px 0;
  align-items: start;
}
.ledgerItem + .ledgerItem {
  border-top: 1px solid var(--border);
}
.ledgerTile {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-pill);
  display: grid;
  place-items: center;
}
.ledgerTileSky {
  background: var(--pastel-blue);
  color: var(--primary);
}
.ledgerTileOrange {
  background: var(--pastel-blue-warm);
  color: var(--primary-dark);
}
.ledgerName {
  font-size: 18px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.ledgerDesc {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-muted);
}
.ledgerMoney {
  font-size: 22px;
  font-weight: 700;
  color: var(--navy);
  display: block;
  margin-bottom: 4px;
  letter-spacing: -0.02em;
}

.verify {
  background: linear-gradient(
    150deg,
    var(--pastel-blue) 0%,
    var(--pastel-blue-warm) 100%
  );
  border-radius: var(--radius-card);
  padding: 36px;
  margin-top: 32px;
}
.verifyEyebrow {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 26px;
  text-align: center;
}
.verifySteps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
  margin-bottom: 24px;
}
@media (min-width: 640px) {
  .verifySteps {
    grid-template-columns: repeat(4, 1fr);
  }
}
.verifyStepNum {
  font-size: 32px;
  font-weight: 700;
  color: var(--primary);
  line-height: 1;
  margin-bottom: 8px;
  letter-spacing: -0.02em;
}
.verifyStepText {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-muted);
}
.verifyCloser {
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
  padding-top: 22px;
  border-top: 1px solid rgba(19, 100, 255, 0.2);
}

.careCtas {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 40px;
}
.careMicro {
  text-align: center;
  margin-top: 16px;
  font-size: 13px;
  color: var(--ink-faint);
}

/* =============================================================
   6. ROUTER INDEX
============================================================= */
.router {
  background: var(--paper-2);
  padding: 96px 0;
}
.routerHeader {
  max-width: 660px;
  margin-bottom: 40px;
}
.routerTitle {
  margin-top: 12px;
}
.routerRow {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 40px;
  align-items: center;
  padding: 24px 8px;
  border-top: 1px solid var(--border);
  color: var(--navy);
  transition: background 240ms;
  cursor: pointer;
  /* Deliberately square. The row's only border is the top hairline, and any
     radius bends it: the divider stops short of each edge and curls into a
     hook. `.ledgerItem` -- the other hairline-separated list here -- is square
     for the same reason. */
}
.routerRow:last-child {
  border-bottom: 1px solid var(--border);
}
.routerRow:hover {
  background: linear-gradient(90deg, rgba(19, 100, 255, 0.06), transparent 60%);
}
.routerRow.rowCare:hover {
  background: linear-gradient(90deg, rgba(11, 76, 209, 0.06), transparent 60%);
}
.routerRow:hover .routerNum {
  color: var(--primary);
}
.routerRow.rowCare:hover .routerNum {
  color: var(--primary-dark);
}
.routerRow:hover .routerArrow {
  transform: translateX(6px);
}
.routerNum {
  font-size: 22px;
  font-weight: 700;
  color: rgba(23, 37, 84, 0.22);
  transition: color 240ms;
  letter-spacing: -0.02em;
}
.routerSentence {
  font-size: clamp(17px, 1.7vw, 21px);
  font-weight: 500;
  line-height: 1.35;
  color: var(--navy);
  letter-spacing: -0.015em;
}
.routerDest {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-muted);
}
.routerArrow {
  transition: transform 220ms ease;
}
@media (max-width: 720px) {
  .routerRow {
    grid-template-columns: auto 1fr;
  }
  .routerDest {
    grid-column: 2;
  }
}

/* =============================================================
   7. PURPOSE
============================================================= */
.purpose {
  background: linear-gradient(180deg, var(--pastel-blue) 0%, #f5f7fa 100%);
  padding: 112px 0 96px;
  position: relative;
  overflow: hidden;
}
.orbCenter {
  width: 900px;
  height: 900px;
  background: var(--primary);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.08;
  filter: blur(160px);
}
.purposeHeader {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 56px;
  position: relative;
}
.purposeTitle {
  margin-top: 12px;
}

.purposeGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  position: relative;
  max-width: 1000px;
  margin: 0 auto 72px;
}
@media (min-width: 780px) {
  .purposeGrid {
    grid-template-columns: 1fr 1fr;
  }
}
.purposeCard {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 32px;
  box-shadow: var(--shadow-card);
  transition: transform 260ms, box-shadow 260ms;
}
.purposeCard:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
}
.purposeCardHead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}
.purposeEye {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary);
}
.purposeTile {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  background: var(--pastel-blue);
  color: var(--primary);
  display: grid;
  place-items: center;
}
.purposeText {
  color: var(--ink-muted);
  font-size: 15px;
  line-height: 1.7;
}

.mottoWrap {
  position: relative;
  text-align: center;
}
.mottoRule {
  position: absolute;
  left: 10%;
  right: 10%;
  top: 20px;
  height: 1px;
  background: var(--border-strong);
  z-index: 1;
}
.mottoLabel {
  position: relative;
  z-index: 2;
  display: inline-block;
  background: linear-gradient(180deg, var(--pastel-blue) 0%, #f5f7fa 100%);
  padding: 8px 22px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-secondary);
}
.motto {
  font-size: clamp(28px, 4.2vw, 48px);
  font-weight: 600;
  color: var(--navy);
  line-height: 1.15;
  margin-top: 40px;
  letter-spacing: -0.02em;
}
.motto span {
  color: var(--primary);
  font-weight: 700;
}

/* =============================================================
   8. FAQ - stadium pills, answer collapses inside the pill
============================================================= */
.faq {
  background: var(--paper);
  padding: 112px 0 96px;
  position: relative;
}
.faqWrap {
  max-width: 780px;
  margin: 0 auto;
  position: relative;
}
.faqHeader {
  text-align: center;
  margin-bottom: 64px;
}
.faqTitle {
  margin-top: 12px;
}

.faqList {
  position: relative;
  display: grid;
  gap: 18px;
}
/* Two vertical gradient rails behind the pills */
.faqList::before,
.faqList::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(
    180deg,
    var(--primary) 0%,
    rgba(19, 100, 255, 0.15) 100%
  );
  pointer-events: none;
  z-index: 0;
}
.faqList::before {
  left: 16.66%;
}
.faqList::after {
  right: 16.66%;
}

/* The whole pill is the button, so the entire row is clickable and
   the answer can live inside it without nesting interactive content. */
.faqItem {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  padding: 0;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  appearance: none;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  transition: color 200ms;
}
.faqItem:nth-child(6n + 1) {
  background: var(--card-01);
  border-color: rgba(19, 100, 255, 0.3);
}
.faqItem:nth-child(6n + 2) {
  background: var(--card-02);
  border-color: rgba(19, 100, 255, 0.2);
}
.faqItem:nth-child(6n + 3) {
  background: var(--card-03);
  border-color: rgba(19, 100, 255, 0.2);
}
.faqItem:nth-child(6n + 4) {
  background: var(--card-04);
  border-color: rgba(19, 100, 255, 0.2);
}
.faqItem:nth-child(6n + 5) {
  background: var(--card-05);
  border-color: rgba(19, 100, 255, 0.2);
}
.faqItem:nth-child(6n) {
  background: var(--pastel-blue);
  border-color: rgba(19, 100, 255, 0.2);
}

.faqQ {
  width: 100%;
  padding: 18px 26px;
  display: flex;
  align-items: center;
  gap: 18px;
  text-align: left;
  color: var(--navy);
  transition: color 200ms;
}
.faqItem:hover .faqQ {
  color: var(--primary);
}

.faqNum {
  font-size: 32px;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: -0.02em;
  line-height: 1;
  flex-shrink: 0;
  min-width: 36px;
}
.faqItem:nth-child(6n + 2) .faqNum,
.faqItem:nth-child(6n + 4) .faqNum {
  color: var(--primary-dark);
}

.faqQBody {
  flex: 1;
  min-width: 0;
}
.faqQText {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--navy);
  letter-spacing: -0.01em;
  display: block;
}
.faqToggle {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  color: var(--primary);
  flex-shrink: 0;
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}
.faqItem.isOpen .faqToggle {
  transform: rotate(180deg);
}

.faqA {
  display: block;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 300ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 200ms ease, margin-top 300ms cubic-bezier(0.22, 1, 0.36, 1);
  color: var(--ink-muted);
  font-size: 14px;
  line-height: 1.6;
}
.faqItem.isOpen .faqA {
  max-height: 240px;
  opacity: 1;
  margin-top: 8px;
}

.faqFooterWrap {
  text-align: center;
  margin-top: 60px;
}
.faqFooter {
  text-align: center;
  font-size: 14px;
  color: var(--ink-muted);
  position: relative;
  z-index: 2;
  background: #fff;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 12px 22px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
}
.faqFooter a {
  color: var(--primary);
  font-weight: 600;
  margin: 0 4px;
}
.faqFooter a:hover {
  text-decoration: underline;
}

/* =============================================================
   9. FINAL CTA
============================================================= */
.final {
  position: relative;
  min-height: 560px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 96px 0;
  color: #fff;
}
.finalBg {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: url("assets/landing/cta.jpg") center / cover no-repeat, #6f4c2f;
}
.final::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    150deg,
    rgba(11, 76, 209, 0.88) 0%,
    rgba(23, 37, 84, 0.78) 100%
  );
  z-index: 2;
}
.final::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
      ellipse at bottom right,
      rgba(198, 214, 245, 0.65) 0%,
      transparent 60%
    ),
    radial-gradient(
      ellipse at top left,
      rgba(227, 237, 255, 0.45) 0%,
      transparent 55%
    );
  z-index: 3;
}
.finalInner {
  position: relative;
  z-index: 4;
  text-align: center;
  max-width: 780px;
  padding: 0 24px;
}
.finalPill {
  display: inline-block;
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  background: rgba(19, 100, 255, 0.24);
  border: 1px solid rgba(230, 220, 250, 0.4);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 24px;
}
.finalTitle {
  font-size: clamp(36px, 5vw, 60px);
  font-weight: 700;
  line-height: 1.1;
  color: #fff;
  margin-bottom: 22px;
  letter-spacing: -0.02em;
}
.finalTitle span {
  color: #a5c0ff;
  font-weight: 700;
}
.finalSub {
  font-size: 16.5px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.82);
  max-width: 640px;
  margin: 0 auto 30px;
}
.finalCtas {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.finalMicro {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
}

/* =============================================================
   FOOTER
============================================================= */
.footer {
  background: var(--navy);
  color: #fff;
  padding: 72px 0 32px;
}
.footerGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 44px;
}
@media (min-width: 720px) {
  .footerGrid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 960px) {
  .footerGrid {
    grid-template-columns: 2fr 1.2fr 1fr 1.4fr;
    gap: 48px;
  }
}

.footerBrand {
  display: inline-block;
  margin-bottom: 20px;
}
.footerBrand img {
  display: block;
  height: 42px;
  width: auto;
}
.footerBlurb {
  font-size: 14px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 26px;
  max-width: 360px;
}
.footerSocials {
  display: flex;
  gap: 10px;
  margin-bottom: 28px;
}
.footerSocial {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: grid;
  place-items: center;
  color: #fff;
  transition: background 200ms;
}
.footerSocial:hover {
  background: rgba(255, 255, 255, 0.14);
}

/* The store badges sit in a band of their own between the four columns
   and the copyright line, rather than stacked in the brand column. Three
   products x two stores is six near-identical pills; in the narrowest
   column they ran about 250px past the other three and left the right
   half of the footer empty. Across, each product reads as one unit and
   the four columns end together. */
.footerAppsBand {
  margin-top: 52px;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.footerAppsBand .footerColTitle {
  margin-bottom: 24px;
}

/* Each app is a name with its two buttons stacked beside it - name,
   pair, space, name, pair, space, name, pair - along one line.

   Stacking the pair is what makes this fit. Side by side the three
   groups came to 1065px inside a 1136px container, leaving 71px for
   every gap in the row; stacked they come to about 714px, so the 44px
   between groups is a choice rather than the most that would fit. */
.footerAppLine {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 44px;
}
.footerAppLineGroup {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.footerAppLineName {
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
  /* Top-aligned with the pair, then dropped by half the difference
     between the name's line box (~21px) and a button (~40px), so it sits
     level with the first button's label rather than above it. */
  padding-top: 9px;
}
/* Column, not row - this is the stack. `stretch` squares the two pills
   to the wider of them, so the pair reads as one block rather than as a
   short button above a longer one. */
.footerAppLineGroup .footerAppRow {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  flex-wrap: nowrap;
}

/* Once the three groups stop sharing a line they sit one above another,
   and the names are different lengths - so left-packed groups start
   their buttons at three different points. Giving the name the free
   space pushes all three pairs onto a common right edge. */
@media (max-width: 900px) {
  .footerAppLine {
    flex-direction: column;
    align-items: stretch;
    gap: 22px;
    max-width: 420px;
  }
  .footerAppLineGroup {
    display: grid;
    grid-template-columns: 1fr auto;
  }
}
.footerAppRow {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.footerAppBtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-pill);
  color: #fff;
  font-size: 11px;
  transition: background 200ms, transform 200ms;
}
.footerAppBtn:hover {
  background: rgba(255, 255, 255, 0.14);
  transform: translateY(-1px);
}
.footerAppBtn svg {
  flex-shrink: 0;
}
.footerAppBtnLabel {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  text-align: left;
}
.footerAppBtnHint {
  font-size: 8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.footerAppBtnName {
  font-weight: 600;
  font-size: 12px;
}
.footerAppBtn:hover {
  transform: translateY(-2px);
  opacity: 0.88;
}

.footerColTitle {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 18px;
}
.footerCol ul li {
  margin-bottom: 12px;
}
.footerCol a {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.65);
  transition: color 200ms;
}
.footerCol a:hover {
  color: #a5c0ff;
}
.footerContactItem {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 12px;
  line-height: 1.6;
}

.footerBottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 52px;
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
}
.footerBottom a {
  color: rgba(255, 255, 255, 0.55);
  margin-right: 18px;
}
.footerBottom a:hover {
  color: #a5c0ff;
}
.footerTagline {
  color: rgba(255, 255, 255, 0.55);
  font-style: italic;
}

/* =============================================================
   Reduced motion
============================================================= */
@media (prefers-reduced-motion: reduce) {
  .page *,
  .page *::before,
  .page *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}