/* ==========================================================================
   AKSS Business Solutions — site stylesheet
   Brand: deep navy + signal blue, warm amber accent.
   Light-first, with a full dark-mode pass.
   ========================================================================== */

:root {
  /* palette */
  --navy-950: #060B18;
  --navy-900: #0A1327;
  --navy-800: #12203E;
  --brand-600: #1A4BD8;
  --brand-500: #2C61F0;
  --brand-400: #5B87FF;
  --brand-050: #EEF3FF;
  --amber-500: #E39A2B;
  --amber-400: #F2B45C;

  /* semantic — light */
  --bg: #FFFFFF;
  --bg-soft: #F5F8FD;
  --bg-sunk: #EDF2FB;
  --surface: #FFFFFF;
  --ink: #0A1327;
  --ink-2: #4A5670;
  --ink-3: #7A869E;
  --brand: var(--brand-600);
  --brand-ink: #FFFFFF;
  --accent: #C77A12;
  --line: rgba(10, 19, 39, 0.10);
  --line-2: rgba(10, 19, 39, 0.16);
  --shadow-sm: 0 1px 2px rgba(10, 19, 39, .06), 0 2px 8px rgba(10, 19, 39, .05);
  --shadow-md: 0 2px 6px rgba(10, 19, 39, .06), 0 14px 34px -12px rgba(10, 19, 39, .18);
  --shadow-lg: 0 4px 10px rgba(10, 19, 39, .07), 0 30px 60px -20px rgba(10, 19, 39, .28);
  --ring: 0 0 0 3px rgba(44, 97, 240, .30);

  /* type */
  --font-display: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* layout */
  --maxw: 1140px;
  --gutter: clamp(20px, 5vw, 32px);
  --section-y: clamp(64px, 9vw, 116px);
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-pill: 999px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #070D1B;
    --bg-soft: #0B1223;
    --bg-sunk: #091020;
    --surface: #0E1830;
    --ink: #E9EEFA;
    --ink-2: #9EAAC6;
    --ink-3: #6E7B98;
    --brand: #6E97FF;
    --brand-ink: #06122E;
    --accent: #F0B45C;
    --line: rgba(150, 175, 235, 0.14);
    --line-2: rgba(150, 175, 235, 0.24);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
    --shadow-md: 0 10px 30px -12px rgba(0, 0, 0, .7);
    --shadow-lg: 0 30px 70px -24px rgba(0, 0, 0, .85);
    --ring: 0 0 0 3px rgba(110, 151, 255, .35);
  }
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
/* height:auto matters — without it the width/height attributes on the phone
   screenshots win and the images render at their literal pixel height. */
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.022em;
  margin: 0 0 .5em;
  text-wrap: balance;
}
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0 0 1em; padding-left: 1.25em; }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 6px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---------- layout primitives ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
/* No hard rule between bands. The soft tint eases in at the top and back out at
   the bottom, so one section dissolves into the next instead of butting against
   it on a visible seam. */
.section--soft {
  background: linear-gradient(
    to bottom,
    var(--bg) 0%,
    var(--bg-soft) 10%,
    var(--bg-soft) 90%,
    var(--bg) 100%
  );
  border-block: 0;
}
.stack > * + * { margin-top: 1rem; }
.center { text-align: center; }
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--brand); color: var(--brand-ink);
  padding: 12px 18px; border-radius: 0 0 var(--r-sm) 0; font-weight: 700;
}
.skip-link:focus { left: 0; }

/* ---------- type helpers ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display);
  font-size: 12.5px; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 14px;
}
.eyebrow::before {
  content: ""; width: 22px; height: 2px; border-radius: 2px;
  background: currentColor; opacity: .55;
}
.eyebrow--center { justify-content: center; }
h1, .h1 { font-size: clamp(2.15rem, 5.4vw, 3.65rem); }
h2, .h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); }
h3, .h3 { font-size: clamp(1.12rem, 1.9vw, 1.32rem); letter-spacing: -0.014em; }
.lead { font-size: clamp(1.03rem, 1.8vw, 1.2rem); color: var(--ink-2); max-width: 62ch; }
.muted { color: var(--ink-2); }
.small { font-size: .92rem; }
.section-head { max-width: 44rem; margin-bottom: clamp(32px, 5vw, 56px); }
.section-head--center { margin-inline: auto; text-align: center; }

/* ---------- buttons ---------- */
.btn {
  --btn-bg: var(--brand);
  --btn-fg: var(--brand-ink);
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 22px;
  background: var(--btn-bg); color: var(--btn-fg);
  font-family: var(--font-display); font-weight: 700; font-size: .97rem;
  letter-spacing: -0.008em;
  border: 1px solid transparent; border-radius: var(--r-pill);
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn--ghost {
  --btn-bg: transparent; --btn-fg: var(--ink);
  border-color: var(--line-2); box-shadow: none;
}
.btn--ghost:hover { background: var(--bg-soft); border-color: var(--brand); color: var(--brand); }
.btn--light { --btn-bg: #FFFFFF; --btn-fg: var(--navy-900); }
.btn--outline-light {
  --btn-bg: transparent; --btn-fg: #FFFFFF;
  border-color: rgba(255, 255, 255, .38); box-shadow: none;
}
.btn--outline-light:hover { background: rgba(255, 255, 255, .10); border-color: rgba(255, 255, 255, .7); }
.btn--lg { padding: 15px 28px; font-size: 1.02rem; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .6; cursor: not-allowed; transform: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.site-header.is-stuck { border-bottom-color: var(--line); box-shadow: var(--shadow-sm); }
.nav { display: flex; align-items: center; gap: 18px; height: 70px; }
.brand { display: inline-flex; align-items: center; gap: 11px; margin-right: auto; }
.brand__mark {
  width: 38px; height: 38px; flex: none; border-radius: 9.5px;
  box-shadow: 0 1px 2px rgba(10, 19, 39, .16), 0 4px 12px -4px rgba(26, 75, 216, .45);
}
.brand__text { display: flex; flex-direction: column; }
/* The wordmark is set tight and the descriptor wide — the contrast between the
   two tracking values is what makes the lockup read as designed rather than typed. */
.brand__name {
  font-family: var(--font-display); font-weight: 800; font-size: 1.09rem;
  letter-spacing: -0.035em; line-height: 1; color: var(--ink);
}
.brand__sub {
  font-size: 9.5px; font-weight: 700; letter-spacing: .175em; line-height: 1;
  text-transform: uppercase; color: var(--ink-3); margin-top: 4px;
}
.nav__links { display: flex; align-items: center; gap: 4px; }
.nav__link {
  padding: 9px 13px; border-radius: var(--r-sm);
  font-size: .95rem; font-weight: 500; color: var(--ink-2);
  transition: color .15s ease, background .15s ease;
}
.nav__link:hover { color: var(--ink); background: var(--bg-soft); }
.nav__link[aria-current="page"] { color: var(--brand); font-weight: 600; }
.nav__cta { margin-left: 8px; }
.nav__toggle {
  display: none; width: 42px; height: 42px; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--line-2); border-radius: var(--r-sm); cursor: pointer;
}
.nav__toggle svg { width: 20px; height: 20px; }
.nav__toggle .icon-close { display: none; }
.nav__toggle[aria-expanded="true"] .icon-close { display: block; }
.nav__toggle[aria-expanded="true"] .icon-open { display: none; }

@media (max-width: 880px) {
  .nav__toggle { display: inline-flex; }
  .nav__links {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 2px;
    padding: 12px var(--gutter) 20px;
    background: var(--bg); border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    display: none;
  }
  .nav__links.is-open { display: flex; }
  .nav__link { padding: 12px 10px; font-size: 1.02rem; }
  .nav__cta { margin-left: 0; margin-top: 8px; }
}

/* ---------- hero ---------- */
.hero {
  position: relative; overflow: hidden;
  padding-block: clamp(56px, 8vw, 104px) clamp(56px, 8vw, 96px);
  background:
    radial-gradient(900px 460px at 88% -8%, color-mix(in srgb, var(--brand) 14%, transparent), transparent 65%),
    radial-gradient(700px 400px at 4% 100%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 62%);
}
.hero__grid {
  display: grid; gap: clamp(36px, 6vw, 64px);
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
}
@media (max-width: 940px) { .hero__grid { grid-template-columns: 1fr; } }
.hero h1 { margin-bottom: .38em; }
.hero .lead { margin-bottom: 28px; }
.hero__note { margin-top: 22px; font-size: .9rem; color: var(--ink-3); }

/* device / screenshot showcase */
.showcase { position: relative; display: flex; justify-content: center; align-items: flex-end; gap: 0; }
.phone {
  position: relative; width: min(255px, 62vw); flex: none;
  border-radius: 34px;
  /* Deeper top bezel so the earpiece has somewhere to sit, the way it does on a
     real handset — above the screen, not printed on top of it. */
  padding: 15px 9px 11px;
  background: linear-gradient(165deg, #2A3A5E, #0B1527 55%, #060B18);
  box-shadow: var(--shadow-lg);
}
/* earpiece speaker — a recessed slit, centred in the top bezel */
.phone::after {
  content: ""; position: absolute; left: 50%; top: 6px; transform: translateX(-50%);
  width: 42px; height: 4px; border-radius: 2px;
  background: linear-gradient(180deg, #05090F 0%, #0C1424 60%, rgba(255, 255, 255, .10) 100%);
  box-shadow:
    inset 0 1px 1.5px rgba(0, 0, 0, .9),
    0 1px 0 rgba(255, 255, 255, .07);
}
/* front camera — offset to the right of the earpiece, as on a real phone */
.phone::before {
  content: ""; position: absolute; left: 50%; top: 5px; margin-left: 30px;
  width: 6px; height: 6px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #46597F 0%, #16203A 55%, #05090F 100%);
  box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .12);
  z-index: 1;
}
/* The screen is a fixed phone-shaped window. Screenshots taller than it scroll
   inside it on hover or tap, so the mockup reads as a live device rather than a
   flat picture. `container-type: size` is what lets the transform below know how
   tall the window is, so one rule works for images of any length. */
.phone__screen {
  position: relative;
  overflow: hidden;
  border-radius: 26px;
  background: #06101F;
  aspect-ratio: 390 / 844;
  container-type: size;
  cursor: pointer;
}
.phone__screen img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
  /* 100cqh - 100% == (window height − image height): scroll to the very end.
     Images that are already window-height resolve to 0 and simply sit still. */
  transform: translateY(0);
  transition: transform 7s cubic-bezier(.33, .1, .25, 1);
  will-change: transform;
}
.phone__screen.is-live img { transform: translateY(calc(100cqh - 100%)); }

/* A hairline that hints the screen is scrollable, fading once it is in motion. */
.phone__screen::after {
  content: ""; position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%);
  width: 34%; height: 3px; border-radius: 2px;
  background: rgba(255, 255, 255, .28);
  opacity: .8; transition: opacity .4s ease;
  pointer-events: none;
}
.phone__screen.is-live::after { opacity: 0; }

/* Legacy: a bare <img> straight inside .phone still renders correctly. */
.phone > img { border-radius: 26px; width: 100%; background: #06101F; }

@media (prefers-reduced-motion: reduce) {
  .phone__screen img { transition: none; }
  .phone__screen.is-live img { transform: translateY(0); }
}
.phone--side { width: min(200px, 48vw); margin-inline: -34px; margin-bottom: 34px; z-index: 0; opacity: .96; }
.phone--lead { z-index: 2; }
@media (max-width: 560px) { .phone--side { display: none; } .phone { width: min(258px, 72vw); } }

/* ---------- cards & grids ---------- */
.grid { display: grid; gap: clamp(16px, 2.4vw, 22px); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
/* exactly two columns, whatever the container width */
.grid--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 700px) { .grid--pair { grid-template-columns: 1fr; } }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: clamp(22px, 2.6vw, 30px);
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card--hover:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--line-2); }
.card h3 { margin-bottom: .45em; }
.card p { color: var(--ink-2); font-size: .97rem; }
.card__icon {
  width: 44px; height: 44px; margin-bottom: 18px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  color: var(--brand);
}
.card__icon svg { width: 22px; height: 22px; }

/* numbered principle list */
.numbered { counter-reset: n; }
.numbered .card::before {
  counter-increment: n; content: counter(n, decimal-leading-zero);
  display: block; margin-bottom: 14px;
  font-family: var(--font-display); font-weight: 800; font-size: .82rem;
  letter-spacing: .1em; color: var(--accent);
}

/* ---------- stat strip ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.stat { background: var(--surface); padding: clamp(20px, 2.6vw, 28px); }
.stat__num { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: -0.03em; color: var(--ink); }
.stat__label { font-size: .88rem; color: var(--ink-2); margin-top: 4px; }

/* ---------- badges / pills ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 13px; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--brand) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand) 24%, transparent);
  color: var(--brand);
  font-size: .82rem; font-weight: 600; letter-spacing: .01em;
}
.pill--muted {
  background: var(--bg-soft); border-color: var(--line-2); color: var(--ink-2);
}
.pill--accent {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border-color: color-mix(in srgb, var(--accent) 32%, transparent);
  color: var(--accent);
}
.pill-row { display: flex; flex-wrap: wrap; gap: 8px; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }

/* ---------- feature list ---------- */
.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.ticks li { position: relative; padding-left: 30px; color: var(--ink-2); }
.ticks li strong { color: var(--ink); font-weight: 650; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .48em;
  width: 18px; height: 18px; border-radius: 50%;
  background: color-mix(in srgb, var(--brand) 14%, transparent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232C61F0' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 12px; background-repeat: no-repeat; background-position: center;
}

/* ---------- product spotlight (dark band) ---------- */
.band-dark {
  position: relative; overflow: hidden;
  background: linear-gradient(150deg, var(--navy-900), var(--navy-950) 62%);
  color: #E8EEFB;
}
.band-dark::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(760px 420px at 82% 6%, rgba(91, 135, 255, .26), transparent 62%),
    radial-gradient(560px 340px at 6% 96%, rgba(227, 154, 43, .16), transparent 60%);
}
/* Feather the dark band's top and bottom edges into the paper above and below,
   so the navy arrives as a gradient rather than a cut. Sits under .wrap, which
   carries z-index 1. */
.band-dark::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, var(--bg) 0%, color-mix(in srgb, var(--bg) 46%, transparent) 30%, transparent 100%)
      top / 100% 150px no-repeat,
    linear-gradient(to top, var(--bg) 0%, color-mix(in srgb, var(--bg) 46%, transparent) 30%, transparent 100%)
      bottom / 100% 150px no-repeat;
}
.band-dark .wrap { position: relative; z-index: 1; }
.band-dark h2, .band-dark h3 { color: #FFFFFF; }
.band-dark .lead, .band-dark p { color: #A9B7D6; }
.band-dark .eyebrow { color: var(--brand-400); }
.band-dark .ticks li { color: #A9B7D6; }
.band-dark .ticks li strong { color: #FFFFFF; }
.band-dark .pill { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .18); color: #DCE5FA; }
.band-dark .card {
  background: rgba(255, 255, 255, .045);
  border-color: rgba(255, 255, 255, .12);
  box-shadow: none;
}
.band-dark .card p { color: #A9B7D6; }
.band-dark .card__icon { background: rgba(91, 135, 255, .18); color: var(--brand-400); }

.split {
  display: grid; gap: clamp(32px, 5vw, 60px);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
}
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.split--top { align-items: start; }
.split--reverse > :first-child { order: 2; }
@media (max-width: 900px) { .split--reverse > :first-child { order: 0; } }

/* app icon + title lockup */
.app-lockup { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.app-lockup img { width: 62px; height: 62px; border-radius: 15px; box-shadow: var(--shadow-md); }
.app-lockup h2, .app-lockup h3 { margin: 0; }

/* store badges */
.stores { display: flex; flex-wrap: wrap; gap: 12px; }
.store-badge {
  display: inline-flex; align-items: center; gap: 11px;
  padding: 11px 18px 11px 15px;
  border: 1px solid var(--line-2); border-radius: 14px;
  background: var(--surface);
  transition: border-color .16s ease, transform .16s ease;
}
.store-badge:hover { transform: translateY(-1px); border-color: var(--brand); }
.store-badge svg { width: 24px; height: 24px; flex: none; }
.store-badge__text { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.store-badge__top { font-size: .68rem; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; }
.store-badge__name { font-family: var(--font-display); font-weight: 700; font-size: .96rem; }
.band-dark .store-badge { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .18); color: #fff; }
.band-dark .store-badge__top { color: #8FA1C7; }
.store-badge--soon { opacity: .92; cursor: default; }

/* ---------- forms ---------- */
.form { display: grid; gap: 18px; }
.field { display: grid; gap: 7px; }
.field label { font-family: var(--font-display); font-size: .9rem; font-weight: 650; letter-spacing: -0.005em; }
.field .req { color: var(--accent); }
.field input, .field textarea, .field select {
  width: 100%;
  padding: 13px 15px;
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  font-size: 1rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field textarea { min-height: 148px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--brand); box-shadow: var(--ring);
}
.field__hint { font-size: .85rem; color: var(--ink-3); }
.field--half-row { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }
.form__status {
  display: none; padding: 14px 16px; border-radius: var(--r-sm);
  font-size: .95rem; border: 1px solid transparent;
}
.form__status.is-visible { display: block; }
.form__status.is-ok {
  display: block; background: color-mix(in srgb, #12A46E 12%, transparent);
  border-color: color-mix(in srgb, #12A46E 40%, transparent); color: #0C7A52;
}
.form__status.is-err {
  display: block; background: color-mix(in srgb, #D9483B 10%, transparent);
  border-color: color-mix(in srgb, #D9483B 38%, transparent); color: #B3372C;
}
@media (prefers-color-scheme: dark) {
  .form__status.is-ok { color: #4FD9A4; }
  .form__status.is-err { color: #FF8C80; }
}

/* ---------- contact detail rows ---------- */
.detail { display: flex; gap: 14px; align-items: flex-start; padding-block: 16px; border-bottom: 1px solid var(--line); }
.detail:last-child { border-bottom: 0; }
.detail__icon {
  width: 38px; height: 38px; flex: none; display: grid; place-items: center;
  border-radius: 10px; background: color-mix(in srgb, var(--brand) 11%, transparent); color: var(--brand);
}
.detail__icon svg { width: 19px; height: 19px; }
.detail__label { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; color: var(--ink-3); }
.detail__value { font-weight: 600; word-break: break-word; }
.detail__value a:hover { color: var(--brand); }

/* ---------- CTA band ---------- */
.cta-band { text-align: center; }
.cta-band h2 { margin-bottom: .35em; }
.cta-band .lead { margin-inline: auto; margin-bottom: 30px; }

/* ---------- legal / prose pages ---------- */
.prose { max-width: 46rem; }
.prose h2 { font-size: clamp(1.28rem, 2.4vw, 1.55rem); margin-top: 2.2em; }
.prose h2:first-of-type { margin-top: 1.2em; }
.prose h3 { margin-top: 1.6em; font-size: 1.08rem; }
.prose p, .prose li { color: var(--ink-2); }
.prose li { margin-bottom: .5em; }
.prose a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.prose strong { color: var(--ink); }
.page-head {
  padding-block: clamp(44px, 6vw, 76px) clamp(28px, 4vw, 44px);
  border-bottom: 0;
  background: linear-gradient(to bottom, var(--bg-soft) 0%, var(--bg-soft) 72%, var(--bg) 100%);
}
.page-head h1 { margin-bottom: .3em; }
.crumb { font-size: .87rem; color: var(--ink-3); margin-bottom: 12px; }
.crumb a:hover { color: var(--brand); }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 12px; max-width: 48rem; }
.faq details {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 4px 20px;
  transition: border-color .16s ease;
}
.faq details[open] { border-color: var(--line-2); box-shadow: var(--shadow-sm); }
.faq summary {
  cursor: pointer; list-style: none; padding: 16px 0;
  font-family: var(--font-display); font-weight: 700; font-size: 1.02rem;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; font-size: 1.4rem; font-weight: 400; color: var(--brand); flex: none; line-height: 1;
  transition: transform .18s ease;
}
.faq details[open] summary::after { content: "–"; }
.faq details > p { padding-bottom: 18px; color: var(--ink-2); font-size: .97rem; }

/* ---------- footer ---------- */
.site-footer {
  background: var(--navy-950); color: #93A2C4;
  padding-block: clamp(48px, 6vw, 68px) 28px;
  font-size: .95rem;
}
.site-footer a { color: #C4D0E8; }
.site-footer a:hover { color: #FFFFFF; }
.footer__grid {
  display: grid; gap: clamp(28px, 4vw, 44px);
  grid-template-columns: minmax(0, 1.5fr) repeat(auto-fit, minmax(140px, 1fr));
  padding-bottom: 36px;
}
.footer__brand .brand__name { color: #FFFFFF; }
.footer__brand .brand__sub { color: #6E7D9E; }
.footer__blurb { margin-top: 16px; max-width: 34ch; color: #93A2C4; font-size: .93rem; }
.footer__title {
  font-family: var(--font-display); font-size: .78rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: #FFFFFF; margin-bottom: 14px;
}
.footer__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
@media (max-width: 760px) {
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 420px) {
  .footer__grid { grid-template-columns: 1fr; }
  .btn { white-space: normal; word-break: break-word; }
}
.footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, .10);
  padding-top: 22px;
  display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between;
  font-size: .87rem; color: #6E7D9E;
}
.footer__bottom a { color: #93A2C4; }

/* ---------- misc ---------- */
.hr { height: 1px; background: var(--line); border: 0; margin-block: clamp(40px, 6vw, 64px); }
[hidden] { display: none !important; }