/* ==========================================================================
   Unik Connects — Landing Page
   Design system: "Unik Professional Core" (see DESIGN.md)
   Mobile-first. No framework, no build step.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* --- Color: surfaces --- */
  --surface: #f8f9ff;
  --surface-dim: #cbdbf5;
  --surface-bright: #f8f9ff;
  --surface-container-lowest: #ffffff;
  --surface-container-low: #eff4ff;
  --surface-container: #e5eeff;
  --surface-container-high: #dce9ff;
  --surface-container-highest: #d3e4fe;
  --surface-variant: #d3e4fe;
  --surface-tint: #005bc0;
  --on-surface: #0b1c30;
  --on-surface-variant: #414754;
  --inverse-surface: #213145;
  --inverse-on-surface: #eaf1ff;
  --background: #ffffff;
  --on-background: #0b1c30;

  /* --- Color: outline --- */
  --outline: #717786;
  --outline-variant: #c1c6d7;

  /* --- Color: primary --- */
  --primary: #0059bb;
  --on-primary: #ffffff;
  --primary-container: #0070ea;
  --on-primary-container: #fefcff;
  --inverse-primary: #adc7ff;
  --primary-fixed: #d8e2ff;
  --primary-fixed-dim: #adc7ff;
  --on-primary-fixed: #001a41;
  --on-primary-fixed-variant: #004493;

  /* --- Color: secondary --- */
  --secondary: #525e7b;
  --on-secondary: #ffffff;
  --secondary-container: #d0ddfe;
  --on-secondary-container: #54617d;
  --secondary-fixed: #d8e2ff;
  --secondary-fixed-dim: #bac6e7;
  --on-secondary-fixed: #0e1b34;
  --on-secondary-fixed-variant: #3a4762;

  /* --- Color: tertiary (gold accent) --- */
  --tertiary: #765b00;
  --on-tertiary: #ffffff;
  --tertiary-container: #cca741;
  --on-tertiary-container: #503d00;
  --tertiary-fixed: #ffdf93;
  --tertiary-fixed-dim: #e9c259;
  --on-tertiary-fixed: #241a00;
  --on-tertiary-fixed-variant: #594400;

  /* --- Color: error --- */
  --error: #ba1a1a;
  --on-error: #ffffff;
  --error-container: #ffdad6;
  --on-error-container: #93000a;

  /* --- Typography families ---
     One superfamily (IBM Plex) across headings, body and labels. Plex Sans is
     a corporate/technical grotesque; Plex Mono is its native monospace
     companion, which keeps DESIGN.md's "developer-grade precision" in the
     labels without pairing three unrelated typefaces. */
  --font-display: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-body: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-label: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
    monospace;

  /* --- Typography: fluid sizes (mobile value -> desktop value) --- */
  --text-display-lg: clamp(1.75rem, 1.2rem + 3.2vw, 3rem);
  /* 28 -> 48 */
  --text-headline-lg: clamp(1.5rem, 1.1rem + 1.6vw, 2rem);
  /* 24 -> 32 */
  --text-title: clamp(1.0625rem, 1rem + 0.3vw, 1.125rem);
  /* 17 -> 18 */
  --text-body-lg: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  /* 16 -> 18 */
  --text-body-md: 1rem;
  /* 16 */
  --text-body-sm: 0.875rem;
  /* 14 */
  --text-label-md: 0.875rem;
  /* 14 */
  --text-label-sm: 0.75rem;
  /* 12 */

  /* --- Spacing: 8px base --- */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-8: 64px;

  --container-max: 1280px;
  --gutter: clamp(16px, 2vw, 24px);
  --page-margin: clamp(16px, 4vw, 40px);
  --section-gap: clamp(48px, 8vw, 80px);

  /* --- Radius --- */
  --radius-sm: 0.125rem;
  /* 2px  */
  --radius: 0.25rem;
  /* 4px  - inputs, chips */
  --radius-md: 0.375rem;
  /* 6px  */
  --radius-lg: 0.5rem;
  /* 8px  - buttons */
  --radius-xl: 0.75rem;
  /* 12px - cards, panels */
  --radius-full: 9999px;

  /* --- Elevation: navy-tinted, never black (DESIGN.md) --- */
  --shadow-1: 0 4px 20px rgba(1, 13, 38, 0.06);
  --shadow-2: 0 10px 40px rgba(1, 13, 38, 0.12);
  --shadow-primary: 0 8px 24px rgba(0, 89, 187, 0.24);

  /* --- Chrome --- */
  --header-h: 64px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

@media (min-width: 768px) {
  :root {
    --header-h: 80px;
  }
}

/* Landscape phones: a short viewport can't spare 80px of chrome */
@media (max-height: 480px) {
  :root {
    --header-h: 56px;
    --section-gap: clamp(40px, 6vw, 56px);
  }
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

html.has-smooth-scroll {
  scroll-behavior: auto;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--background);
  color: var(--on-background);
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Belt-and-braces against a stray wide child creating a sideways scroll */
  overflow-x: hidden;
}

body.nav-open {
  overflow: hidden;
}

::selection {
  background: var(--tertiary-fixed);
  color: var(--on-tertiary-fixed);
}

img,
svg,
picture,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Long unbroken strings (URLs, IDs) must never widen the page */
h1,
h2,
h3,
h4,
p,
li,
a {
  overflow-wrap: anywhere;
}

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

ul {
  list-style: none;
  padding: 0;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

/* Visible focus on every interactive element (DESIGN.md focus spec) */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--radius);
  box-shadow: 0 0 0 4px rgba(0, 89, 187, 0.2);
}

/* Sections are focused programmatically after a smooth scroll so screen
   readers land inside them; that should not paint a focus ring. */
[tabindex="-1"]:focus,
[tabindex="-1"]:focus-visible {
  outline: none;
  box-shadow: none;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--page-margin);
  z-index: 200;
  padding: 12px 20px;
  background: var(--primary);
  color: var(--on-primary);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  font-family: var(--font-label);
  font-size: var(--text-label-sm);
  transition: top 0.2s var(--ease);
}

.skip-link:focus {
  top: 0;
}

/* --------------------------------------------------------------------------
   3. Typography primitives
   -------------------------------------------------------------------------- */
.eyebrow {
  font-family: var(--font-label);
  font-size: var(--text-label-sm);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary);
}

.display {
  font-family: var(--font-display);
  font-size: var(--text-display-lg);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--on-background);
}

.headline {
  font-family: var(--font-display);
  font-size: var(--text-headline-lg);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--on-background);
}

.title {
  font-family: var(--font-display);
  font-size: var(--text-title);
  font-weight: 600;
  line-height: 1.4;
  color: var(--on-background);
}

.lead {
  font-size: var(--text-body-lg);
  line-height: 1.6;
  color: var(--on-surface-variant);
}

.body-sm {
  font-size: var(--text-body-sm);
  line-height: 1.6;
  color: var(--on-surface-variant);
}

/* --------------------------------------------------------------------------
   4. Layout primitives
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--page-margin);
}

.section {
  padding-block: var(--section-gap);
}

.section--tight {
  padding-block: clamp(32px, 5vw, 48px);
}

.section--alt {
  background: var(--surface-container-lowest);
}

.section--divided {
  border-top: 1px solid rgba(193, 198, 215, 0.5);
}

.section-head {
  max-width: 42rem;
  margin-inline: auto;
  margin-bottom: clamp(32px, 5vw, 64px);
  text-align: center;
}

.section-head .headline {
  margin-bottom: var(--space-2);
}

.section-head p {
  color: var(--on-surface-variant);
}

/* Auto-fit grids: cards keep a sane minimum width at every viewport,
   so nothing is ever squeezed between the named breakpoints. */
.grid {
  display: grid;
  gap: var(--gutter);
}

.grid--4 {
  grid-template-columns: 1fr;
}

.grid--3 {
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

.grid--2 {
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 480px) {
  .grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-height: 48px;
  /* comfortable touch target on every device */
  padding: 14px 28px;
  border-radius: var(--radius-lg);
  font-family: var(--font-label);
  font-size: var(--text-label-md);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-align: center;
  white-space: nowrap;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease),
    border-color 0.2s var(--ease), transform 0.2s var(--ease),
    box-shadow 0.2s var(--ease);
}

.btn--sm {
  min-height: 44px;
  padding: 11px 22px;
  font-size: var(--text-label-sm);
}

.btn--block {
  width: 100%;
}

.btn--primary {
  background: var(--primary);
  color: var(--on-primary);
  box-shadow: var(--shadow-primary);
}

.btn--primary:hover {
  background: #004a9e;
  transform: translateY(-1px);
}

.btn--ghost {
  border: 1px solid var(--primary);
  color: var(--primary);
  background: transparent;
}

.btn--ghost:hover {
  background: var(--surface-container-low);
}

.btn--on-dark {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.45);
  color: #ffffff;
}

.btn--on-dark:hover {
  background: rgba(255, 255, 255, 0.22);
}

.btn--white {
  background: #ffffff;
  color: var(--primary);
  box-shadow: var(--shadow-2);
}

.btn--white:hover {
  background: var(--surface-container-low);
  transform: translateY(-1px);
}

.btn-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Stacked buttons go full width so they are easy to hit with a thumb */
.btn-row .btn {
  width: 100%;
}

@media (min-width: 480px) {
  .btn-row {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .btn-row .btn {
    width: auto;
  }

  .btn-row--center {
    justify-content: center;
  }
}

/* --------------------------------------------------------------------------
   6. Icons
   -------------------------------------------------------------------------- */
.icon {
  width: 24px;
  height: 24px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon--sm {
  width: 18px;
  height: 18px;
}

.icon--filled {
  fill: currentColor;
  stroke: none;
}

.icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: var(--space-2);
  border-radius: var(--radius-lg);
  background: var(--surface-container-low);
  color: var(--primary);
}

.icon-badge--gold {
  background: rgba(204, 167, 65, 0.14);
  color: var(--tertiary-container);
}

/* --------------------------------------------------------------------------
   7. Cards
   -------------------------------------------------------------------------- */
.card {
  display: flex;
  flex-direction: column;
  padding: var(--space-3);
  background: var(--surface-container-lowest);
  border: 1px solid rgba(193, 198, 215, 0.45);
  border-radius: var(--radius-xl);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease),
    border-color 0.3s var(--ease);
}

.card__title {
  margin-bottom: var(--space-1);
}

.card--interactive:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-1);
  border-color: var(--primary-fixed-dim);
}

.card--plain {
  background: var(--surface);
}

/* --------------------------------------------------------------------------
   8. Header / navigation
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(248, 249, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--outline-variant);
  transition: box-shadow 0.2s var(--ease), background-color 0.2s var(--ease);
}

.site-header.is-scrolled {
  background: rgba(248, 249, 255, 0.98);
  box-shadow: var(--shadow-1);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  height: var(--header-h);
}

.nav__logo {
  display: flex;
  align-items: center;
  flex: none;
}

.nav__logo img {
  height: 26px;
  width: auto;
}

@media (min-width: 768px) {
  .nav__logo img {
    height: 32px;
  }
}

.nav__links {
  display: none;
  align-items: center;
  gap: var(--space-3);
}

.nav__links a {
  font-size: var(--text-body-md);
  color: var(--on-surface-variant);
  transition: color 0.2s var(--ease);
}

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

.nav__actions {
  display: none;
  align-items: center;
  gap: var(--space-2);
}

.nav__login {
  font-family: var(--font-label);
  font-size: var(--text-label-sm);
  color: var(--secondary);
  padding: 8px 4px;
  transition: color 0.2s var(--ease);
}

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

@media (min-width: 900px) {

  .nav__links,
  .nav__actions {
    display: flex;
  }
}

/* --- Mobile menu toggle --- */
.nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: -8px;
  border-radius: var(--radius-lg);
  color: var(--on-surface);
}

.nav__toggle:hover {
  background: var(--surface-container);
}

@media (min-width: 900px) {
  .nav__toggle {
    display: none;
  }
}

.nav__toggle .icon-close,
.nav__toggle[aria-expanded="true"] .icon-menu {
  display: none;
}

.nav__toggle[aria-expanded="true"] .icon-close {
  display: block;
}

/* --- Mobile panel --- */
.nav-panel {
  position: fixed;
  inset: var(--header-h) 0 auto 0;
  z-index: 99;
  /* Never taller than what is left of the screen — matters in landscape */
  max-height: calc(100vh - var(--header-h));
  max-height: calc(100dvh - var(--header-h));
  overflow-y: auto;
  padding: var(--space-3) var(--page-margin) var(--space-4);
  background: var(--surface-container-lowest);
  border-bottom: 1px solid var(--outline-variant);
  box-shadow: var(--shadow-2);
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: transform 0.25s var(--ease), opacity 0.25s var(--ease),
    visibility 0.25s var(--ease);
}

.nav-panel.is-open {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}

.nav-panel a:not(.btn) {
  display: block;
  padding: 14px 0;
  min-height: 48px;
  font-size: var(--text-body-lg);
  color: var(--on-surface);
  border-bottom: 1px solid rgba(193, 198, 215, 0.4);
}

.nav-panel a:not(.btn):hover {
  color: var(--primary);
}

.nav-panel__actions {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

@media (min-width: 900px) {
  .nav-panel {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   9. Hero (classic fallback kept, Termii variant below)
   -------------------------------------------------------------------------- */
.hero {
  padding-block: clamp(40px, 7vw, 80px);
  overflow: hidden;
}

.hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 6vw, 64px);
  align-items: center;
}

@media (min-width: 1024px) {
  .hero__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }
}

.hero__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.hero__copy .lead {
  max-width: 36rem;
}

.hero__copy .btn-row {
  margin-top: var(--space-1);
}

.hero__media {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: linear-gradient(140deg,
      var(--surface-container-low),
      var(--surface-container-high));
  box-shadow: var(--shadow-1);
}

.hero__media img {
  width: 100%;
  height: 500px;
}

/* --------------------------------------------------------------------------
   9b. Hero — Termii variant
   -------------------------------------------------------------------------- */

/* Emerald accent tokens (local to hero) */
.hero--termii {
  --ht-green: #0059bb;
  --ht-green-dim: #005bc0;
  --ht-green-bg: rgba(0, 196, 140, 0.10);
  --ht-green-border: rgba(0, 196, 140, 0.28);
  --ht-card-bg: rgba(255, 255, 255, 0.88);
  --ht-card-border: rgba(193, 198, 215, 0.55);
  --ht-card-shadow: 0 8px 32px rgba(1, 13, 38, 0.10);

  /* Was clamp(10px, 8vw, 5px) — the max sits BELOW the min, so per spec it
     always resolved to 10px. That left the scene tucked under a translucent
     sticky header. */
  padding-top: clamp(30px, 4vw, 66px);
  padding-bottom: clamp(8px, 1.5vw, 20px);
  overflow: hidden;
}

/* 2-column grid: copy | visual */
.hero-termii__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 7vw, 72px);
  align-items: center;
}

@media (min-width: 1024px) {
  .hero-termii__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }
}

/* ---- Left copy ---- */
.hero-termii__copy {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2.5vw, 22px);
}

/* Badge pill */
.hero-termii__badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  padding: 4px 12px 4px 4px;
  border: 1px solid var(--ht-card-border);
  border-radius: var(--radius-full);
  background: var(--surface-container-lowest);
  box-shadow: var(--shadow-1);
  font-size: 0.8125rem;
  color: var(--on-surface-variant);
  text-decoration: none;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.hero-termii__badge:hover {
  border-color: var(--ht-green-border);
  box-shadow: 0 0 0 4px var(--ht-green-bg);
}

.hero-termii__badge-count {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  background: var(--ht-green-bg);
  border: 1px solid var(--ht-green-border);
  color: var(--ht-green-dim);
  font-family: var(--font-label);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.hero-termii__badge-label {
  color: var(--on-surface-variant);
}

/* Headline */
.hero-termii__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.3rem + 4vw, 3.25rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.035em;
  color: var(--on-background);
}

.hero-termii__title-line1,
.hero-termii__title-line2 {
  display: block;
}

/* typewriter word inline wrapper */
.hero-termii__typewriter-wrap {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
}

#hero-typewriter {
  display: inline;
  color: var(--on-background);
  min-width: 4px;
}

/* blinking cursor */
.hero-termii__cursor {
  display: inline-block;
  width: 0.075em;
  height: 1em;
  background: var(--ht-green);
  border-radius: 1px;
  vertical-align: text-bottom;
  animation: htBlink 1s steps(1) infinite;
}

@keyframes htBlink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

/* Emerald dot after "Guaranteed" */
.hero-termii__dot {
  color: var(--ht-green);
}

/* Subtitle */
.hero-termii__lead {
  font-size: var(--text-body-lg);
  line-height: 1.65;
  color: var(--on-surface-variant);
  max-width: 32rem;
}

.hero-termii__em {
  font-style: normal;
  font-weight: 600;
  color: var(--on-background);
}

/* CTA row */
.hero-termii__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.hero-termii .playstore-badge {
  margin-top: 1.25rem;
}

/* Primary button: arrow slides on hover */
.hero-termii__btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.hero-termii__btn-arrow {
  width: 16px;
  height: 16px;
  flex: none;
  transition: transform 0.2s var(--ease);
}

.hero-termii__arrow-stem {
  opacity: 0;
  transition: opacity 0.2s var(--ease);
}

.hero-termii__arrow-head {
  transition: transform 0.2s var(--ease);
}

.hero-termii__btn-primary:hover .hero-termii__btn-arrow {
  transform: translateX(2px);
}

.hero-termii__btn-primary:hover .hero-termii__arrow-stem {
  opacity: 1;
}

.hero-termii__btn-primary:hover .hero-termii__arrow-head {
  transform: translateX(3px);
}

/* SLA micro-copy */
.hero-termii__sla {
  font-size: 0.8125rem;
  color: var(--outline);
  letter-spacing: 0.01em;
}

/* ---- Right visual column ---- */
.hero-termii__visual {
  /* --hs-w drives the whole scene — the stage box, every card offset and
     every prop is a proportion of the device width. Declared here so the
     column can size itself from it; .hero-stage inherits it. */
  --hs-w: clamp(240px, 21vw, 296px);
  /* Stage height as a multiple of the device width. The device itself is
     41/74 (=1.805) of that width, so 1.90 shows the WHOLE device — base
     included — with a little room beneath it for its ground shadow. The
     hero stays short because the device is smaller, not because it is cut. */
  --hs-hf: 1.90;
  /* Globe diameter as a % of the device width; the field is derived from
     it. Overridden per breakpoint. */
  --hs-globe: 216%;
  /* One plane for the device and its cards. Overridden per breakpoint. */
  --hs-tilt: rotateY(-24deg) rotate(2deg);

  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: calc(var(--hs-w) * var(--hs-hf) + 40px);
  padding-top: clamp(14px, 2vw, 28px);
  isolation: isolate;
}

/* Cards stack: absolute inside visual */
.hero-termii__cards {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 340px;
}

/* Float animation for all cards */
@keyframes htFloat {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-6px);
  }
}

/* Base card style */
.hero-termii__card {
  background: var(--ht-card-bg);
  border: 1px solid var(--ht-card-border);
  border-radius: 14px;
  box-shadow: var(--ht-card-shadow);
  padding: 12px 16px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  animation: htFloat 4s ease-in-out infinite;
  animation-delay: var(--card-delay, 0s);
  opacity: 0;
  transform: translateY(14px) scale(0.97);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.hero-termii__card.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  animation: htFloat 4s ease-in-out var(--card-delay, 0s) infinite;
}

/* Card 1: Query */
.hero-termii__card--query {
  border-radius: 14px 14px 4px 14px;
}

.hero-termii__card-query-text {
  font-size: 0.875rem;
  color: var(--on-background);
  font-weight: 500;
}

/* Card 2: AI status */
.hero-termii__card--ai {
  border-radius: 14px 4px 14px 14px;
}

.hero-termii__card-ai-header {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
}

.hero-termii__card-logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--ht-green-bg);
  border: 1px solid var(--ht-green-border);
  flex: none;
}

.hero-termii__card-logo-icon {
  width: 16px;
  height: 16px;
}

.hero-termii__card-ai-name {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--on-background);
}

.hero-termii__card-live-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ht-green);
  box-shadow: 0 0 6px var(--ht-green);
  animation: htPulse 1.5s ease-in-out infinite;
  margin-left: auto;
}

@keyframes htPulse {

  0%,
  100% {
    box-shadow: 0 0 4px var(--ht-green);
  }

  50% {
    box-shadow: 0 0 10px var(--ht-green), 0 0 20px rgba(0, 196, 140, 0.35);
  }
}

.hero-termii__card-live-label {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--ht-green-dim);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.hero-termii__card-ai-status {
  font-size: 0.8125rem;
  color: var(--on-surface-variant);
  margin-bottom: 8px;
}

.hero-termii__card-ai-bar {
  height: 5px;
  background: var(--surface-container);
  border-radius: 3px;
  overflow: hidden;
}

.hero-termii__card-ai-bar-fill {
  height: 5px;
  background: linear-gradient(90deg, var(--ht-green), var(--ht-green-dim));
  border-radius: 3px;
}

/* Card 3: Transaction */
.hero-termii__card--txn {}

.hero-termii__card-txn-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.hero-termii__card-txn-id {
  font-family: var(--font-label);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--on-surface-variant);
  letter-spacing: 0.06em;
}

.hero-termii__card-txn-amount {
  font-size: 0.9375rem;
  font-weight: 800;
  color: var(--on-background);
  letter-spacing: -0.02em;
}

.hero-termii__card-txn-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Tags */
.hero-termii__tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.hero-termii__tag--verified {
  background: var(--ht-green-bg);
  border: 1px solid var(--ht-green-border);
  color: var(--ht-green-dim);
}

.hero-termii__tag--secured {
  background: rgba(0, 89, 187, 0.08);
  border: 1px solid rgba(0, 89, 187, 0.2);
  color: var(--primary);
}

.hero-termii__tag--sent {
  background: rgba(204, 167, 65, 0.10);
  border: 1px solid rgba(204, 167, 65, 0.25);
  color: var(--tertiary);
}

.hero-termii__tag--confirmed {
  background: rgba(80, 61, 0, 0.07);
  border: 1px solid rgba(80, 61, 0, 0.15);
  color: var(--on-tertiary-container);
}

/* Card 4: Confirm pill */
.hero-termii__card--confirm {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: var(--radius-full);
  align-self: flex-start;
}

.hero-termii__confirm-icon {
  width: 22px;
  height: 22px;
  flex: none;
}

}

.hero-termii__confirm-text {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--ht-green-dim);
}

/* --------------------------------------------------------------------------
   9c. Hero — Tilted device + live notification cards
   Mirrors the brand creative: one bright field, one device, three message
   types (OTP / transaction / marketing) floating off its left edge.
   Everything here is inline SVG or CSS — no image requests.
   -------------------------------------------------------------------------- */

.hero-stage {
  /* --hs-blue is deliberately brighter than --primary so the props read as
     vivid against the white field. --hs-w is inherited from the column. */
  --hs-blue: #0a5cff;
  --hs-blue-lit: #5b9bff;
  --hs-blue-deep: #0040a8;
  --hs-navy: #0b1b33;
  --hs-ink: #0b1c30;
  --hs-line: #e3ecfb;

  position: relative;
  z-index: 2;
  width: var(--hs-w);
  /* Card and prop offsets are percentages of this box. */
  height: calc(var(--hs-w) * var(--hs-hf));
  /* Perspective applies to a element's CHILDREN only, so it belongs here
     (parent of .hero-deck), not on the column two levels up. */
  perspective: 1500px;
  margin-inline: auto;
}

/* Bright field. Tinted rather than white so the white device and the white
   cards separate from it. No blur filter — blur is what washes these out. */
/* Concentric with the globe and sized from the same token, so the globe
   always sits just inside the field no matter which breakpoint is active.
   It may overrun the section: the gradient is fully transparent past 76%
   of its radius, so the clipped part is invisible — which is what lets the
   globe grow to the section's limit without the field capping it first. */
.hero-stage__glow {
  position: absolute;
  top: 45%;
  left: 50%;
  z-index: 0;
  width: calc(var(--hs-globe) * 1.07);
  aspect-ratio: 1;
  max-width: none;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 46%,
      #e6f0ff 0%,
      #d9e8ff 34%,
      rgba(195, 220, 255, 0.72) 56%,
      rgba(195, 220, 255, 0) 76%);
  /* Very slow breathe, so the field is never perfectly still */
  animation: hsBreathe 11s ease-in-out infinite;
}

@keyframes hsBreathe {

  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }

  50% {
    transform: translate(-50%, -50%) scale(1.045);
    opacity: 0.88;
  }
}

/* ---- Rotating globe --------------------------------------------------- */

/* Sits behind the device (z-index 1 against the deck's 5) and is deliberately
   wider than it, so the limb reads on both sides of the phone. */
.hero-globe {
  position: absolute;
  /* Tuned so the circle sits at the section's vertical middle: that
     balances the top and bottom clearance and so maximises the radius the
     section will accept before slicing the limb. */
  top: 45%;
  left: 50%;
  z-index: 1;
  /* Sized per breakpoint below. The ceiling is the section height: the
     globe is centred on the device, so anything larger than twice the
     smaller of its top/bottom clearances gets sliced flat by the section
     edge and stops reading as a sphere. */
  width: var(--hs-globe);
  aspect-ratio: 1;
  /* The global `img, svg … { max-width: 100% }` reset would otherwise clamp
     this to the stage width and the globe would render phone-sized. */
  max-width: none;
  transform: translate(-50%, -50%);
  pointer-events: none;
  overflow: visible;
}

.hero-globe__par {
  opacity: 0.68;
}

/* The rotation. Each meridian is the same circle; scaling it on X from 1
   through 0 to -1 sweeps it across the sphere exactly as a real meridian
   would, and six of them phase-shifted by a sixth of the cycle read as one
   turning wireframe — with no geometry animated and no JS. */
.hero-globe__mers {
  opacity: 0.58;
}

.hero-globe__mer {
  transform-box: fill-box;
  transform-origin: center;
  animation: hsMeridian 18s linear infinite;
  animation-delay: calc(var(--m, 0) * -3s);
}

@keyframes hsMeridian {
  0% {
    transform: scaleX(1);
  }

  50% {
    transform: scaleX(-1);
  }

  100% {
    transform: scaleX(1);
  }
}

/* Routes between regions */
.hero-globe__route {
  stroke: rgba(10, 92, 255, 0.40);
  stroke-width: 1.5;
  stroke-dasharray: 3 6;
}

/* The packet chasing each route. pathLength="1000" normalises every path so
   one dash/offset pair behaves identically on all five. */
.hero-globe__packet {
  stroke: #0a5cff;
  stroke-width: 2.6;
  stroke-dasharray: 70 930;
  animation: hsPacket 4.6s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  animation-delay: calc(var(--p, 0) * 0.9s);
}

@keyframes hsPacket {
  from {
    stroke-dashoffset: 1000;
  }

  to {
    stroke-dashoffset: 0;
  }
}

.hero-globe__node {
  fill: #0a5cff;
  stroke: #ffffff;
  stroke-width: 1.6;
}

.hero-globe__halo {
  fill: rgba(10, 92, 255, 0.28);
  transform-box: fill-box;
  transform-origin: center;
  animation: hsNodePulse 3.2s ease-out infinite;
  animation-delay: calc(var(--n, 0) * 0.5s);
}

@keyframes hsNodePulse {
  0% {
    transform: scale(0.5);
    opacity: 0.7;
  }

  70%,
  100% {
    transform: scale(1.9);
    opacity: 0;
  }
}

/* The plane's dotted flight path. Sized explicitly rather than by inset:
   the same max-width reset was clamping this one too. */
.hero-stage__arcs {
  position: absolute;
  top: -5%;
  left: -58%;
  width: 216%;
  height: 110%;
  max-width: none;
  z-index: 1;
  display: block;
  pointer-events: none;
}

.hero-stage__trail {
  animation: hsDash 3.4s linear infinite;
}

@keyframes hsDash {
  to {
    stroke-dashoffset: -24;
  }
}

/* ---- Device ----------------------------------------------------------- */

/* The deck is the plane the device and its cards both live on. Rotating the
   group — rather than each piece on its own — is what makes the cards read
   as sitting ON the phone instead of floating beside it.

   rotateY is NEGATIVE. That is the sign that points the face LEFT: it puts
   the RIGHT edge nearest the viewer, which is also what exposes the right
   side rail. (A panel whose left edge is nearer is being seen from its left,
   so its face points right — the opposite of what is wanted here.)
   The lean is small: the device stands nearly upright, as in the mockup.

   No preserve-3d anywhere here: it would put the glow and the deck in one
   3D space, and rotateY pushes the far half of the deck behind the glow
   plane, which then paints over it. Plain perspective on .hero-stage keeps
   normal z-index painting. */
.hero-deck {
  position: absolute;
  inset: 0;
  z-index: 5;
  transform: var(--hs-tilt);
  transform-origin: 50% 45%;
  will-change: transform;
  animation: hsDeckFloat 6s ease-in-out infinite;
}

/* Floats the whole plane. The tilt has to be repeated inside the keyframe
   or the animation would overwrite it. */
@keyframes hsDeckFloat {

  0%,
  100% {
    transform: var(--hs-tilt) translateY(0);
  }

  50% {
    transform: var(--hs-tilt) translateY(-6px);
  }
}

.hero-phone {
  position: absolute;
  inset: 0 0 auto 0;
  width: 100%;
  /* Stubbier than a real handset. The stage is sized so the whole device,
     including its base, sits inside the section. */
  aspect-ratio: 41 / 74;
}

/* Chassis side rail — the device's thickness. Offset via `inset` rather than
   a transform, so the deck owns `transform` for the whole plane.
   The bright band near its outer edge is the specular highlight along the
   machined rail. */
.hero-phone__depth {
  position: absolute;
  inset: 0 -3.4% 0 3.4%;
  border-radius: 40px;
  background: linear-gradient(90deg,
      #0a1425 0%,
      #101f36 46%,
      #223458 70%,
      #8397ba 88%,
      #3c4e73 97%,
      #16243d 100%);
  box-shadow:
    0 18px 28px -14px rgba(4, 26, 64, 0.5),
    0 52px 82px -28px rgba(4, 26, 64, 0.45);
}

/* Power button, on the visible rail */
.hero-phone__depth::before {
  content: "";
  position: absolute;
  right: 0.5%;
  top: 27%;
  width: 2.2%;
  height: 9%;
  border-radius: 0 2px 2px 0;
  background: linear-gradient(180deg, #7488aa, #dbe6f7 36%, #8093b5 70%, #cfdcf0);
}

/* Front bezel: thin and near-black like the mockup, with a bright 1px edge
   where the polished rail catches the light. The metal now reads on the
   rail behind it, so the face itself stays dark. */
.hero-phone__frame {
  position: absolute;
  inset: 0;
  padding: 10px;
  border-radius: 40px;
  background:
    linear-gradient(148deg,
      #35486d 0%,
      #16243d 14%,
      #0b1524 46%,
      #101d33 74%,
      #2b3d5e 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.32),
    inset 0 1px 2px rgba(255, 255, 255, 0.24),
    inset 0 -2px 5px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(6, 20, 44, 0.85);
}

.hero-phone__island {
  position: absolute;
  top: 18px;
  left: 50%;
  z-index: 3;
  width: 32%;
  height: 3.2%;
  min-height: 18px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: #05101f;
}

.hero-phone__screen {
  position: relative;
  height: 100%;
  padding: 12px 11px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-radius: 30px;
  overflow: hidden;
  background: linear-gradient(170deg, #ffffff 0%, #f8fbff 44%, #e9f2ff 100%);
  box-shadow: inset 0 0 0 1px rgba(11, 27, 51, 0.10);
}

/* Home indicator */
.hero-phone__screen::after {
  content: "";
  position: absolute;
  bottom: 10px;
  left: 50%;
  width: 34%;
  height: 4px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: rgba(11, 27, 51, 0.22);
}

/* Status bar sits either side of the island */
.hero-phone__status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 18px;
  padding-inline: 6px;
  font-family: var(--font-label);
  font-size: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--hs-ink);
}

.hero-phone__status-icons {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--hs-ink);
}

.hero-phone__status-icons svg {
  height: 8px;
  width: auto;
}

/* In-app header: wordmark + kebab */
.hero-phone__brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: 3px;
}

.hero-phone__logo {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 5px 9px;
  border-radius: 8px;
  background: var(--hs-navy);
  font-family: var(--font-display);
  font-size: 0.66rem;
  line-height: 1;
  letter-spacing: -0.01em;
  box-shadow: 0 5px 14px -5px rgba(11, 27, 51, 0.55);
}

.hero-phone__logo b {
  color: #ffffff;
  font-weight: 800;
}

.hero-phone__logo i {
  color: #7fb4ff;
  font-style: normal;
  font-weight: 500;
}

.hero-phone__kebab {
  display: inline-flex;
  flex-direction: column;
  gap: 2.5px;
}

.hero-phone__kebab i {
  display: block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #9fb0c9;
}

/* Gloss sweep across the glass. Kept narrow — a wide band reads as a smear
   over the notification cards rather than as a reflection. */
.hero-phone__glare {
  position: absolute;
  inset: 10px;
  z-index: 4;
  border-radius: 30px;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(114deg,
      transparent 45%,
      rgba(255, 255, 255, 0.42) 49%,
      rgba(255, 255, 255, 0.10) 52%,
      transparent 60%);
  animation: hsGlare 7s ease-in-out 1.4s infinite;
}

@keyframes hsGlare {
  0% {
    opacity: 0;
    transform: translateX(-34%);
  }

  10% {
    opacity: 1;
  }

  28% {
    opacity: 0;
    transform: translateX(34%);
  }

  100% {
    opacity: 0;
    transform: translateX(34%);
  }
}

/* ---- Floating props --------------------------------------------------- */
.hero-prop {
  position: absolute;
  z-index: 4;
  display: block;
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 14px 22px rgba(4, 26, 64, 0.22));
}

.hero-prop--plane {
  top: -3%;
  right: -23%;
  width: 24%;
  animation: hsPlane 7s ease-in-out infinite;
}

/* In front of the offer card, as in the brand creative */
.hero-prop--mail {
  z-index: 6;
  bottom: 1%;
  left: -30%;
  width: 32%;
  animation: htFloat 6.5s ease-in-out 0.8s infinite;
}

.hero-prop--mega {
  bottom: 5%;
  right: -19%;
  width: 26%;
  animation: hsMega 5.6s ease-in-out infinite;
}

@keyframes hsPlane {

  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }

  50% {
    transform: translate3d(-10px, -14px, 0) rotate(-6deg);
  }
}

@keyframes hsMega {

  0%,
  100% {
    transform: rotate(-4deg) translateY(0);
  }

  50% {
    transform: rotate(2deg) translateY(-7px);
  }
}

/* ---- Notification cards ------------------------------------------------ */

/* Rest state is the visible state and the entrance runs `backwards`, so the
   .is-active transform below is never locked out by animation-fill-mode —
   and the cards stay readable with JS or animation disabled. */
/* Anchored by their RIGHT edge so all three line up inside the screen, with
   only the widths differing — that is what makes each lower card spill a
   little further past the left bezel instead of floating off the device. */
/* Right-aligned flex column. Because the cards are in flow, the space
   between them is the `gap` and nothing else — it no longer grows when a
   card happens to wrap to fewer lines. Only the widths differ, which is
   what steps each lower card further past the left bezel. */
.hero-notif-stack {
  position: absolute;
  inset: 21% 0 auto 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

.hero-notif {
  position: relative;
  /* % of the stack, i.e. of the device width — inset from the right bezel */
  margin-right: 9%;
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px 14px 20px;
  border-radius: 15px;
  background: #ffffff;
  border: 1px solid var(--hs-line);
  box-shadow:
    0 1px 2px rgba(11, 27, 51, 0.06),
    0 14px 30px -10px rgba(11, 27, 51, 0.26);
  animation: hsNotifIn 0.55s var(--ease) calc(0.35s + var(--i, 0) * 0.22s) backwards;
  transition:
    transform 0.32s var(--ease),
    box-shadow 0.32s var(--ease),
    border-color 0.32s var(--ease);
}

@keyframes hsNotifIn {
  from {
    opacity: 0;
    transform: translateX(-28px) scale(0.94);
  }
}

.hero-notif--otp {
  width: 102%;
}

.hero-notif--txn {
  width: 109%;
}

.hero-notif--promo {
  width: 117%;
}

/* Highlighted by the JS cycle */
.hero-notif.is-active {
  transform: translateY(-5px) scale(1.035);
  border-color: rgba(10, 92, 255, 0.38);
  box-shadow:
    0 2px 4px rgba(11, 27, 51, 0.06),
    0 22px 44px -12px rgba(10, 92, 255, 0.40);
}

.hero-notif__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: linear-gradient(140deg, #e4efff, #cfe1ff);
  color: var(--hs-blue);
  box-shadow: inset 0 0 0 1px rgba(10, 92, 255, 0.18);
}

.hero-notif__icon svg {
  width: 20px;
  height: 20px;
}

/* Marketing card takes the gold accent so the three are not identical */
.hero-notif--promo .hero-notif__icon {
  background: linear-gradient(140deg, #fff5db, #ffe9b8);
  color: #8a6a00;
  box-shadow: inset 0 0 0 1px rgba(138, 106, 0, 0.16);
}

.hero-notif__body {
  min-width: 0;
}

.hero-notif__title {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--hs-ink);
}

.hero-notif__text {
  margin-top: 3px;
  font-size: 0.72rem;
  line-height: 1.5;
  color: #4b5666;
}

.hero-notif__text strong {
  font-weight: 800;
  color: var(--hs-ink);
}

.hero-notif__time {
  position: absolute;
  right: 14px;
  bottom: 7px;
  font-family: var(--font-label);
  font-size: 0.56rem;
  color: #93a2b8;
  white-space: nowrap;
}

/* ---- Responsive -------------------------------------------------------- */

/* Narrow desktop. The device shrinks with the viewport but the card text
   does not, so wider cards keep the text on fewer lines here. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .hero-termii__visual {
    --hs-w: clamp(248px, 24vw, 296px);
    /* Tightest horizontal case: two columns on a narrow viewport, so the
       globe has the least room to spread here. */
    --hs-globe: 200%;
  }

  .hero-notif {
    margin-right: 5%;
  }

  .hero-notif--otp {
    width: 110%;
  }

  .hero-notif--txn {
    width: 117%;
  }

  .hero-notif--promo {
    width: 124%;
  }
}

/* Below the 1024px grid switch the visual is centred under the copy.
   --hs-w is set on the column, not the stage, because the column's own
   min-height is derived from it. */
@media (max-width: 1023px) {
  .hero-termii__visual {
    --hs-w: clamp(248px, 36vw, 304px);
    --hs-tilt: rotateY(-20deg) rotate(2deg);
    /* Stacked layout: the visual gets the full column width */
    --hs-globe: 216%;
  }
}

/* Phones: ease the tilt and tighten the cards. Widths stay proportional to
   the device, so the overhang scales on its own. */
@media (max-width: 640px) {
  /* The device goes proportionally WIDER here, not narrower: card text does
     not shrink with the viewport, so a narrow device makes the cards wrap
     tall enough to run past its base. */
  .hero-termii__visual {
    --hs-w: clamp(232px, 70vw, 274px);
    --hs-tilt: rotateY(-15deg) rotate(1deg);
    /* Full circle has to fit the viewport here, or the limb is sliced flat
       against the screen edge and stops reading as a sphere. */
    --hs-globe: 130%;
  }

  .hero-notif-stack {
    gap: 10px;
  }

  .hero-notif {
    margin-right: 5%;
    gap: 9px;
    padding: 11px 12px 18px;
  }

  .hero-notif--otp {
    width: 98%;
  }

  .hero-notif--txn {
    width: 105%;
  }

  .hero-notif--promo {
    width: 112%;
  }

  .hero-prop--plane {
    right: -16%;
    width: 24%;
  }

  .hero-prop--mail {
    left: -20%;
    width: 26%;
  }

  .hero-prop--mega {
    display: none;
  }
}

/* Motion is decorative; the scene reads identically without it. The global
   reduced-motion rule already collapses every animation, but these are
   spelled out so the backdrop cannot come back as a static artefact —
   a half-drawn packet frozen mid-route, or a stuck node halo. */
@media (prefers-reduced-motion: reduce) {

  .hero-deck,
  .hero-prop,
  .hero-stage__glow,
  .hero-stage__trail,
  .hero-notif {
    animation: none;
  }

  .hero-deck {
    transform: var(--hs-tilt);
  }

  .hero-globe__mer,
  .hero-globe__packet,
  .hero-globe__halo {
    animation: none;
  }

  /* Freezing these would leave a half-drawn packet mid-route */
  .hero-phone__glare,
  .hero-globe__packet,
  .hero-globe__halo {
    opacity: 0;
  }
}


/* --------------------------------------------------------------------------
   10. Logo strips (trust bar + integrations)
   -------------------------------------------------------------------------- */
.logo-strip {

  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(20px, 4vw, 48px);
}

.logo-strip__item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  color: var(--outline);
  opacity: 0.75;
  transition: opacity 0.3s var(--ease), color 0.3s var(--ease);
}

.logo-strip__item:hover {
  opacity: 1;
  color: var(--primary);
}

.logo-strip__item .icon {
  width: 20px;
  height: 20px;
  margin-right: 8px;
}

.logo-strip__item span {
  font-family: var(--font-display);
  font-size: clamp(0.9375rem, 0.85rem + 0.4vw, 1.0625rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.logo-strip__label {
  margin-bottom: var(--space-4);
  text-align: center;
  font-family: var(--font-label);
  font-size: var(--text-label-sm);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
}

/* --- Horizontal scroller (trusted-by strip) ---
   A real scroll container: drag, wheel and arrow keys all work. JS adds a
   slow auto-advance on top and pauses it the moment the user engages. */
.scroller {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  /* Scrolling stays available; the bar itself is just noise here */
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Items fade out at both edges instead of being cut off */
  -webkit-mask-image: linear-gradient(to right,
      transparent,
      #000 clamp(24px, 8vw, 96px),
      #000 calc(100% - clamp(24px, 8vw, 96px)),
      transparent);
  mask-image: linear-gradient(to right,
      transparent,
      #000 clamp(24px, 8vw, 96px),
      #000 calc(100% - clamp(24px, 8vw, 96px)),
      transparent);
}

.scroller::-webkit-scrollbar {
  display: none;
}

.scroller:focus-visible {
  outline-offset: -2px;
}

.scroller__track {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  width: max-content;
  gap: clamp(28px, 5vw, 56px);
  padding-inline: var(--page-margin);
}

.scroller .logo-strip__item {
  flex: none;
}

/* Auto-advance is decorative; without it the strip is still scrollable */
@media (prefers-reduced-motion: reduce) {
  .scroller {
    scroll-behavior: auto;
  }
}

/* --------------------------------------------------------------------------
   11. Testimonials
   -------------------------------------------------------------------------- */
.quote {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4);
}

.quote__stars {
  display: flex;
  gap: 2px;
  margin-bottom: var(--space-2);
  color: var(--tertiary-container);
}

.quote__stars .icon {
  width: 18px;
  height: 18px;
}

.quote blockquote {
  font-size: var(--text-body-md);
  line-height: 1.65;
  color: var(--on-background);
}

.quote__person {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.quote__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: var(--radius-full);
  background: var(--primary-fixed);
  color: var(--on-primary-fixed-variant);
  font-family: var(--font-label);
  font-size: var(--text-label-md);
  font-weight: 600;
}

.quote__name {
  font-family: var(--font-label);
  font-size: var(--text-label-md);
  font-weight: 600;
  color: var(--on-background);
}

.quote__role {
  font-family: var(--font-label);
  font-size: var(--text-label-sm);
  color: var(--on-surface-variant);
}

/* On tablet the third card spans both columns rather than orphaning */
@media (min-width: 768px) and (max-width: 1023px) {
  .grid--3>.quote:last-child {
    grid-column: 1 / -1;
  }
}

/* --------------------------------------------------------------------------
   11b. Pricing channel tabs
   -------------------------------------------------------------------------- */

/* ---- Tab bar ---- */
.ptabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--space-4);
  padding: 5px;
  background: var(--surface-container-low);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-xl);
  width: fit-content;
  max-width: 100%;
}

.ptabs__btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 20px;
  border: none;
  border-radius: calc(var(--radius-xl) - 4px);
  background: transparent;
  color: var(--on-surface-variant);
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), box-shadow 0.2s var(--ease);
  white-space: nowrap;
}

.ptabs__btn:hover {
  background: var(--surface-container);
  color: var(--on-surface);
}

.ptabs__btn.is-active {
  background: var(--surface-container-lowest);
  color: var(--primary);
  box-shadow: 0 1px 6px rgba(1, 13, 38, 0.09);
}

.ptabs__icon {
  width: 16px;
  height: 16px;
  flex: none;
}

/* ---- Tab panels ---- */
.ptabs__panel {
  display: none;
}

.ptabs__panel.is-active {
  display: block;
  animation: ptabFadeIn 0.3s ease;
}

@keyframes ptabFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- Contact-sales layout (WhatsApp / Email / Voice) ---- */
.ptabs__contact-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
  max-width: 900px;
  margin-inline: auto;
}

@media (min-width: 768px) {
  .ptabs__contact-grid {
    grid-template-columns: 1.2fr 1fr;
    align-items: start;
  }
}

.ptabs__contact-card {
  background: var(--surface-container-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-xl);
  padding: var(--space-4) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.ptabs__contact-card h3 {
  font-size: var(--text-title);
  font-weight: 700;
  color: var(--on-background);
  margin: 0;
}

.ptabs__contact-card p {
  font-size: var(--text-body-sm);
  line-height: 1.65;
  color: var(--on-surface-variant);
  margin: 0;
}

.ptabs__contact-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
  background: var(--ci-bg, rgba(0, 89, 187, 0.10));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ci-color, var(--primary));
  margin-bottom: 4px;
  flex: none;
}

.ptabs__contact-icon svg {
  width: 26px;
  height: 26px;
}

.ptabs__contact-features {
  list-style: none;
  padding: 0;
  margin: 4px 0 var(--space-2);
  display: grid;
  gap: 8px;
}

.ptabs__contact-features li {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-body-sm);
  color: var(--on-surface-variant);
}

.ptabs__contact-features .icon {
  flex: none;
  color: var(--primary);
}

/* Right info column */
.ptabs__contact-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-3);
  background: var(--surface-container-low);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-xl);
}

.ptabs__contact-badge {
  display: inline-flex;
  align-self: flex-start;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  background: var(--primary-fixed);
  color: var(--on-primary-fixed-variant);
  font-family: var(--font-label);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ptabs__contact-note {
  font-size: var(--text-body-sm);
  line-height: 1.65;
  color: var(--on-surface-variant);
  margin: 0;
}

.ptabs__contact-steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ptabs__contact-step {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--text-body-sm);
  font-weight: 500;
  color: var(--on-surface);
}

.ptabs__contact-step span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background: var(--primary);
  color: var(--on-primary);
  font-family: var(--font-label);
  font-size: 0.75rem;
  font-weight: 700;
  flex: none;
}

/* --------------------------------------------------------------------------
   12. Pricing
   -------------------------------------------------------------------------- */
.pricing {
  display: grid;
  gap: var(--space-3);
  max-width: 1040px;
  margin-inline: auto;
  /* Room for the raised middle card's shadow + offset */
  padding-block: var(--space-2);
}

@media (min-width: 1024px) {
  .pricing {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: var(--space-4);
  }
}

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-4) var(--space-3);
  background: var(--surface-container-lowest);
  border: 1px solid rgba(193, 198, 215, 0.45);
  border-radius: var(--radius-xl);
}

.plan__name {
  font-family: var(--font-label);
  font-size: var(--text-label-md);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
  margin-bottom: var(--space-2);
}

.plan__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: var(--space-1);
}

.plan__amount {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--on-background);
}

.plan__amount--sm {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 1.875rem);
}

.plan__period {
  color: var(--on-surface-variant);
}

.plan__note {
  margin-bottom: var(--space-3);
  font-size: var(--text-body-sm);
  color: var(--on-surface-variant);
}

.plan__features {
  display: grid;
  gap: 12px;
  flex: 1;
  margin-bottom: var(--space-4);
}

.plan__features li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-1);
  font-size: var(--text-body-sm);
  line-height: 1.5;
  color: var(--on-surface-variant);
}

.plan__features .icon {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--primary);
}

/* --- Featured plan --- */
.plan--featured {
  background: var(--primary-container);
  border-color: var(--primary-container);
  box-shadow: var(--shadow-2);
  /* Order it first on mobile: the recommended option leads */
  order: -1;
}

.plan--featured .plan__name,
.plan--featured .plan__amount,
.plan--featured .plan__features li {
  color: #ffffff;
}

.plan--featured .plan__period,
.plan--featured .plan__note {
  color: var(--on-primary-container);
}

.plan--featured .plan__features .icon {
  color: var(--tertiary-fixed);
}

.plan__badge {
  position: absolute;
  top: 0;
  right: 0;
  padding: 6px 12px;
  background: var(--primary);
  color: #ffffff;
  border-radius: 0 var(--radius-xl) 0 var(--radius-lg);
  font-family: var(--font-label);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (min-width: 1024px) {
  .plan--featured {
    order: 0;
    transform: translateY(-16px);
  }
}

/* --------------------------------------------------------------------------
   13. FAQ
   -------------------------------------------------------------------------- */
.faq {
  max-width: 48rem;
  margin-inline: auto;
}

.faq__item {
  border-bottom: 1px solid rgba(193, 198, 215, 0.6);
}

.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: 56px;
  padding: var(--space-2) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: var(--text-title);
  font-weight: 600;
  color: var(--on-background);
  transition: color 0.2s var(--ease);
}

.faq__item summary::-webkit-details-marker {
  display: none;
}

.faq__item summary:hover {
  color: var(--primary);
}

.faq__item summary .icon {
  flex: none;
  color: var(--primary);
  transition: transform 0.25s var(--ease);
}

.faq__item[open] summary .icon {
  transform: rotate(180deg);
}

.faq__answer {
  padding-bottom: var(--space-3);
  color: var(--on-surface-variant);
  line-height: 1.7;
}

/* --------------------------------------------------------------------------
   13b. Play Store Badge & Mobile App Download Section
   -------------------------------------------------------------------------- */

/* Play Store Badge Component */
.playstore-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 1.25rem;
  background: #0f172a;
  color: #ffffff;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
  font-family: inherit;
  line-height: 1.2;
}

.playstore-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
  background: #1e293b;
  border-color: rgba(255, 255, 255, 0.3);
  color: #ffffff;
}

.playstore-badge__icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.playstore-badge__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.playstore-badge__sub {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}

.playstore-badge__name {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #ffffff;
}

/* Large variant */
.playstore-badge--lg {
  padding: 0.75rem 1.5rem;
}
.playstore-badge--lg .playstore-badge__icon {
  width: 28px;
  height: 28px;
}
.playstore-badge--lg .playstore-badge__sub {
  font-size: 0.7rem;
}
.playstore-badge--lg .playstore-badge__name {
  font-size: 1.1rem;
}

/* Light variant (for dark background like CTA) */
.playstore-badge--light {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(8px);
}
.playstore-badge--light:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.4);
}

/* App Download Showcase Section */
.app-dl {
  padding: 4rem 0;
  position: relative;
  overflow: hidden;
}

.app-dl__card {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 28px;
  padding: 3.5rem 3rem;
  box-shadow: 0 25px 60px -15px rgba(15, 23, 42, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}

@media (max-width: 768px) {
  .app-dl__card {
    padding: 2.25rem 1.5rem;
    border-radius: 20px;
  }
}

.app-dl__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 3.5rem;
  align-items: center;
  position: relative;
  z-index: 2;
}

@media (max-width: 991px) {
  .app-dl__grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
}

/* Left copy column */
.app-dl__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #60a5fa;
  background: rgba(96, 165, 250, 0.12);
  padding: 0.35rem 0.85rem;
  border-radius: 50px;
  border: 1px solid rgba(96, 165, 250, 0.25);
  margin-bottom: 1.25rem;
}

.app-dl__eyebrow svg {
  width: 14px;
  height: 14px;
}

.app-dl__title {
  font-size: clamp(1.8rem, 3.2vw, 2.5rem);
  font-weight: 800;
  line-height: 1.2;
  color: #ffffff;
  margin-bottom: 1rem;
  letter-spacing: -0.02em;
}

.app-dl__desc {
  font-size: 1.05rem;
  color: #94a3b8;
  line-height: 1.65;
  margin-bottom: 2rem;
}

/* Perks list */
.app-dl__perks {
  list-style: none;
  padding: 0;
  margin: 0 0 2.25rem 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.app-dl__perks li {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
}

.app-dl__perk-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(37, 99, 235, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

.app-dl__perk-icon svg {
  width: 18px;
  height: 18px;
}

.app-dl__perk-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.app-dl__perk-text strong {
  font-size: 0.95rem;
  font-weight: 700;
  color: #f1f5f9;
}

.app-dl__perk-text span {
  font-size: 0.85rem;
  color: #94a3b8;
}

/* CTA Group & Rating */
.app-dl__cta-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
}

.app-dl__rating {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.app-dl__stars {
  color: #f59e0b;
  letter-spacing: 2px;
  font-size: 1rem;
}

.app-dl__rating-text {
  font-size: 0.8rem;
  color: #94a3b8;
  font-weight: 500;
}

/* Right visual column */
.app-dl__visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem 0;
}

.app-dl__glow {
  position: absolute;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.35) 0%, rgba(124, 77, 255, 0.15) 50%, transparent 70%);
  filter: blur(40px);
  pointer-events: none;
}

/* Floating chips */
.app-dl__float-chip {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px);
  padding: 0.45rem 0.9rem;
  border-radius: 50px;
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 600;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  z-index: 5;
  animation: floatChip 4s ease-in-out infinite alternate;
}

.app-dl__float-chip--top {
  top: 10px;
  right: 0px;
}

.app-dl__float-chip--bottom {
  bottom: 20px;
  left: 0px;
  animation-delay: -2s;
}

.app-dl__chip-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
}

@keyframes floatChip {
  0% { transform: translateY(0); }
  100% { transform: translateY(-8px); }
}

@media (max-width: 576px) {
  .app-dl__float-chip {
    display: none;
  }
}

/* Phone Mockup Styling */
.app-dl__phone {
  width: 290px;
  background: #090d16;
  border-radius: 38px;
  padding: 10px;
  box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.6), 0 0 0 2px rgba(255, 255, 255, 0.15);
  position: relative;
  z-index: 3;
  transition: transform 0.3s ease;
}

.app-dl__phone:hover {
  transform: translateY(-4px) rotate(-1deg);
}

.app-dl__phone-notch {
  width: 110px;
  height: 18px;
  background: #090d16;
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 14px;
  margin: 0 auto 6px auto;
}

.app-dl__phone-screen {
  background: #ffffff;
  border-radius: 28px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  overflow: hidden;
}

.app-dl__screen-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid #f1f5f9;
}

.app-dl__screen-avatar {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, #0059bb, #2563eb);
  color: #ffffff;
  font-weight: 800;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.app-dl__screen-name {
  font-weight: 700;
  font-size: 0.85rem;
  color: #0f172a;
}

.app-dl__screen-sub {
  font-size: 0.7rem;
  color: #64748b;
}

/* Balance Card Inside Screen */
.app-dl__balance-card {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  border-radius: 14px;
  padding: 0.85rem;
  color: #ffffff;
  position: relative;
}

.app-dl__balance-lbl {
  font-size: 0.65rem;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.app-dl__balance-val {
  font-size: 1.25rem;
  font-weight: 800;
  color: #ffffff;
  margin: 2px 0 0 0;
}

.app-dl__balance-btn {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  font-size: 0.65rem;
  font-weight: 700;
  background: rgba(37, 99, 235, 0.3);
  color: #60a5fa;
  border: 1px solid rgba(96, 165, 250, 0.3);
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
}

/* Mini Stats Grid */
.app-dl__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.4rem;
  background: #f8fafc;
  padding: 0.6rem 0.4rem;
  border-radius: 12px;
  text-align: center;
}

.app-dl__stat-val {
  font-weight: 800;
  font-size: 0.82rem;
  color: #0f172a;
}

.app-dl__stat-lbl {
  font-size: 0.62rem;
  color: #64748b;
  margin-top: 1px;
}

/* Notification Box */
.app-dl__notif {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  padding: 0.55rem 0.65rem;
  border-radius: 10px;
}

.app-dl__notif-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #dbeafe;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.app-dl__notif-title {
  font-size: 0.72rem;
  font-weight: 700;
  color: #1e40af;
}

.app-dl__notif-sub {
  font-size: 0.65rem;
  color: #3b82f6;
}

/* Delivery Chart */
.app-dl__chart-container {
  background: #f8fafc;
  padding: 0.65rem 0.75rem;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.app-dl__chart-header {
  display: flex;
  justify-content: space-between;
  font-size: 0.68rem;
  color: #64748b;
  font-weight: 600;
}

.app-dl__chart {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 60px;
}

.app-dl__bar {
  flex: 1;
  height: var(--bh, 50%);
  background: linear-gradient(to top, #2563eb, #60a5fa);
  border-radius: 3px;
  transition: height 0.3s ease;
}

/* --------------------------------------------------------------------------
   14. Final CTA
   -------------------------------------------------------------------------- */
.cta {
  position: relative;
  /* Clips the decorative glow so it can never widen the document */
  overflow: hidden;
  background: var(--primary-container);
  color: var(--on-primary-container);
  text-align: center;
}

.cta__glow {
  position: absolute;
  top: -120px;
  right: -80px;
  width: min(420px, 80vw);
  height: min(420px, 80vw);
  border-radius: var(--radius-full);
  background: var(--primary);
  filter: blur(120px);
  opacity: 0.35;
  pointer-events: none;
}

.cta__inner {
  position: relative;
  z-index: 1;
  max-width: 44rem;
  margin-inline: auto;
}

.cta__inner .headline {
  color: #ffffff;
  font-size: var(--text-display-lg);
  font-weight: 700;
  margin-bottom: var(--space-3);
}

.cta__inner p {
  font-size: var(--text-body-lg);
  color: var(--on-primary-container);
  margin-bottom: var(--space-5);
}

/* --------------------------------------------------------------------------
   15. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  padding-block: clamp(40px, 6vw, 64px);
  background: var(--inverse-surface);
  color: var(--surface-container);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4) var(--gutter);
}

.footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 22rem;
}

.footer__brand img {
  height: 32px;
  width: auto;
}

.footer__brand p {
  font-size: var(--text-body-sm);
  line-height: 1.7;
  color: var(--surface-container-high);
}

.footer__col h2 {
  margin-bottom: var(--space-2);
  font-family: var(--font-label);
  font-size: var(--text-label-sm);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--surface-bright);
}

.footer__col ul {
  display: grid;
  gap: 10px;
}

.footer__col a {
  font-size: var(--text-body-sm);
  color: var(--surface-container-high);
  transition: color 0.2s var(--ease);
}

.footer__col a:hover {
  color: var(--tertiary-fixed-dim);
}

@media (min-width: 480px) {
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer__brand {
    grid-column: 1 / -1;
  }
}

@media (min-width: 768px) {
  .footer-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .footer__brand {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1024px) {
  .footer-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .footer__brand {
    grid-column: span 2;
  }
}

/* --------------------------------------------------------------------------
   16. Pricing page
   -------------------------------------------------------------------------- */
.page-hero {
  padding-block: clamp(40px, 7vw, 72px) clamp(24px, 4vw, 40px);
  text-align: center;
}

.page-hero .eyebrow {
  display: block;
  margin-bottom: var(--space-2);
}

.page-hero .display {
  max-width: 20ch;
  margin-inline: auto;
  margin-bottom: var(--space-3);
}

.page-hero .lead {
  max-width: 46ch;
  margin-inline: auto;
}

/* --- Deposit tiers --- */
.tiers {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
}

@media (min-width: 560px) {
  .tiers {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }
}

.tier {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-4) var(--space-3);
  background: var(--surface-container-lowest);
  border: 1px solid rgba(193, 198, 215, 0.45);
  border-top: 3px solid var(--tier-accent, var(--primary));
  border-radius: var(--radius-xl);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.tier:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-1);
}

.tier__name {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
  font-family: var(--font-label);
  font-size: var(--text-label-md);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tier-accent, var(--primary));
}

.tier__dot {
  width: 10px;
  height: 10px;
  flex: none;
  border-radius: var(--radius-full);
  background: var(--tier-accent, var(--primary));
}

.tier__rate {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: var(--space-1);
}

.tier__amount {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.6rem + 1.6vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--on-background);
}

.tier__unit {
  font-family: var(--font-label);
  font-size: var(--text-label-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--on-surface-variant);
}

.tier__range {
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid rgba(193, 198, 215, 0.5);
  font-size: var(--text-body-sm);
  color: var(--on-surface-variant);
}

.tier__range strong {
  display: block;
  margin-top: 2px;
  font-family: var(--font-label);
  font-size: var(--text-body-md);
  font-weight: 600;
  color: var(--on-background);
}

.tier__desc {
  flex: 1;
  margin-bottom: var(--space-3);
  font-size: var(--text-body-sm);
  line-height: 1.6;
  color: var(--on-surface-variant);
}

.tier__badge {
  position: absolute;
  top: 0;
  right: 0;
  padding: 6px 12px;
  background: var(--tier-accent, var(--primary));
  color: #ffffff;
  border-radius: 0 var(--radius-xl) 0 var(--radius-lg);
  font-family: var(--font-label);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* --- Numbered steps --- */
.steps {
  counter-reset: step;
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.step {
  padding: var(--space-3);
  background: var(--surface-container-lowest);
  border: 1px solid rgba(193, 198, 215, 0.45);
  border-radius: var(--radius-xl);
}

.step::before {
  counter-increment: step;
  content: counter(step);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-bottom: var(--space-2);
  border-radius: var(--radius-full);
  background: var(--primary-fixed);
  color: var(--on-primary-fixed-variant);
  font-family: var(--font-label);
  font-size: var(--text-label-md);
  font-weight: 600;
}

/* --- Bank details --- */
.bank-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .bank-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
}

.bank-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--surface-container-lowest);
  border: 1px solid rgba(193, 198, 215, 0.45);
  border-radius: var(--radius-xl);
}

.bank-card__bank {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-display);
  font-size: var(--text-title);
  font-weight: 600;
  color: var(--on-background);
}

.bank-card__bank .icon {
  color: var(--primary);
}

.bank-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bank-field__label {
  font-family: var(--font-label);
  font-size: var(--text-label-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
}

.bank-field__value {
  font-family: var(--font-label);
  font-size: var(--text-body-md);
  font-weight: 600;
  color: var(--on-background);
  /* Account numbers must never be broken across lines mid-digit */
  overflow-wrap: normal;
  word-break: keep-all;
}

.bank-field__value--number {
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  letter-spacing: 0.08em;
}

.bank-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  align-self: flex-start;
  min-height: 44px;
  margin-top: auto;
  padding: 10px 16px;
  border: 1px solid var(--primary);
  border-radius: var(--radius-lg);
  color: var(--primary);
  font-family: var(--font-label);
  font-size: var(--text-label-sm);
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}

.bank-copy:hover {
  background: var(--surface-container-low);
}

.bank-copy[data-copied="true"] {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary);
}

/* --- Notices --- */
.notice {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius-xl);
  border: 1px solid var(--outline-variant);
  background: var(--surface-container-low);
  color: var(--on-surface-variant);
  font-size: var(--text-body-sm);
  line-height: 1.6;
}

.notice .icon {
  flex: none;
  color: var(--primary);
}

.notice strong {
  color: var(--on-background);
}

.notice--warn {
  border-color: rgba(204, 167, 65, 0.6);
  background: rgba(204, 167, 65, 0.1);
}

.notice--warn .icon {
  color: var(--tertiary);
}

/* --------------------------------------------------------------------------
   17. Motion
   -------------------------------------------------------------------------- */
/* Uses the standalone `translate` property, not `transform`, so it composes
   with layout transforms (e.g. the raised pricing card) instead of
   overriding them. */
.reveal {
  opacity: 0;
  translate: 0 16px;
  transition: opacity 0.6s var(--ease), translate 0.6s var(--ease);
}

.reveal.is-visible {
  opacity: 1;
  translate: none;
}

/* If JS never runs, content must still be visible */
.no-js .reveal {
  opacity: 1;
  translate: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reveal {
    opacity: 1;
    translate: none;
  }

  .btn:hover,
  .card--interactive:hover {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   18. Print
   -------------------------------------------------------------------------- */
@media print {

  .site-header,
  .nav-panel,
  .cta__glow {
    display: none;
  }

  body {
    background: #fff;
  }

  /* Never print a blank page because a section was still off-screen */
  .reveal {
    opacity: 1 !important;
    translate: none !important;
  }
}

/* --------------------------------------------------------------------------
   19. Back to Top Floating Action Button
   -------------------------------------------------------------------------- */
.back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 999;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), #2563eb);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 24px rgba(0, 89, 187, 0.35);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px) scale(0.9);
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s ease, box-shadow 0.2s ease;
  outline: none;
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.back-to-top:hover {
  background: linear-gradient(135deg, #004ba3, #1d4ed8);
  box-shadow: 0 12px 30px rgba(0, 89, 187, 0.5);
  transform: translateY(-3px) scale(1.05);
}

.back-to-top:active {
  transform: translateY(0) scale(0.95);
}

.back-to-top:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

.back-to-top__icon {
  width: 22px;
  height: 22px;
  transition: transform 0.2s ease;
}

.back-to-top:hover .back-to-top__icon {
  transform: translateY(-2px);
}

@media (max-width: 768px) {
  .back-to-top {
    bottom: 1.25rem;
    right: 1.25rem;
    width: 42px;
    height: 42px;
  }
  .back-to-top__icon {
    width: 18px;
    height: 18px;
  }
}

/* --------------------------------------------------------------------------
   20. Floating WhatsApp Chat Widget
   -------------------------------------------------------------------------- */
.whatsapp-float {
  position: fixed;
  bottom: 2rem;
  left: 2rem;
  z-index: 998;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
  color: #ffffff;
  box-shadow: 0 10px 28px rgba(37, 211, 102, 0.45), 0 2px 6px rgba(0, 0, 0, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

.whatsapp-float:hover {
  transform: translateY(-3px) scale(1.06);
  box-shadow: 0 16px 36px rgba(37, 211, 102, 0.6);
  color: #ffffff;
}

.whatsapp-float:active {
  transform: translateY(0) scale(0.95);
}

.whatsapp-float__icon {
  width: 32px;
  height: 32px;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
}

/* Pulsing radar ring */
.whatsapp-float__pulse {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #25d366;
  opacity: 0.6;
  z-index: 1;
  animation: waPulse 2.5s cubic-bezier(0.25, 1, 0.5, 1) infinite;
}

@keyframes waPulse {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  100% {
    transform: scale(1.65);
    opacity: 0;
  }
}

/* Online green status badge on top right of icon */
.whatsapp-float__dot {
  position: absolute;
  top: 1px;
  right: 1px;
  width: 13px;
  height: 13px;
  background: #22c55e;
  border: 2px solid #ffffff;
  border-radius: 50%;
  z-index: 4;
}

/* Hover Support Card */
.whatsapp-float__card {
  position: absolute;
  left: 68px;
  background: #0f172a;
  color: #ffffff;
  padding: 0.65rem 0.95rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.35);
  display: flex;
  flex-direction: column;
  gap: 2px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-10px);
  transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.whatsapp-float__card::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -6px;
  transform: translateY(-50%);
  border-width: 6px 6px 6px 0;
  border-style: solid;
  border-color: transparent #0f172a transparent transparent;
}

.whatsapp-float__card-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: #ffffff;
}

.whatsapp-float__card-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 6px #22c55e;
}

.whatsapp-float__card-sub {
  font-size: 0.72rem;
  color: #94a3b8;
}

.whatsapp-float:hover .whatsapp-float__card {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

@media (max-width: 768px) {
  .whatsapp-float {
    bottom: 1.25rem;
    left: 1.25rem;
    width: 48px;
    height: 48px;
  }
  .whatsapp-float__icon {
    width: 28px;
    height: 28px;
  }
  .whatsapp-float__card {
    display: none;
  }
}
/* --------------------------------------------------------------------------
   21. Sample messages page
   -------------------------------------------------------------------------- */

.smsg__count {
  margin-top: var(--space-2);
  font-family: var(--font-label);
  font-size: var(--text-label-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--outline);
}

.smsg__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--space-2);
  font-family: var(--font-label);
  font-size: var(--text-label-sm);
  letter-spacing: 0.04em;
  color: var(--primary);
  text-decoration: none;
}

.smsg__back:hover {
  text-decoration: underline;
}

.smsg__back .icon {
  width: 15px;
  height: 15px;
}

/* ---- Category grid ---- */
.smsg-cats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-3);
  list-style: none;
  padding: 0;
  margin: 0;
}

.smsg-cat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  padding: var(--space-3);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg, 14px);
  background: var(--surface-container-lowest);
  text-decoration: none;
  transition:
    border-color 0.2s var(--ease),
    box-shadow 0.2s var(--ease),
    transform 0.2s var(--ease);
}

.smsg-cat:hover,
.smsg-cat:focus-visible {
  border-color: var(--primary);
  box-shadow: var(--shadow-1);
  transform: translateY(-2px);
}

.smsg-cat__name {
  font-family: var(--font-display);
  font-size: var(--text-title);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--on-background);
}

.smsg-cat__desc {
  flex: 1;
  font-size: var(--text-body-sm);
  line-height: 1.55;
  color: var(--on-surface-variant);
}

.smsg-cat__count {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: var(--space-1);
  font-family: var(--font-label);
  font-size: var(--text-label-sm);
  letter-spacing: 0.04em;
  color: var(--primary);
}

.smsg-cat__count .icon {
  width: 14px;
  height: 14px;
  transform: rotate(-90deg);
  transition: transform 0.2s var(--ease);
}

.smsg-cat:hover .smsg-cat__count .icon {
  transform: rotate(-90deg) translateY(-3px);
}

/* ---- Message list ---- */
.smsg__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-3);
  list-style: none;
  padding: 0;
  margin: 0;
}

.smsg {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: var(--space-3);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg, 14px);
  background: var(--surface-container-lowest);
}

.smsg__ref {
  font-family: var(--font-label);
  font-size: var(--text-label-sm);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--outline);
}

.smsg__body {
  flex: 1;
  font-size: var(--text-body-md);
  line-height: 1.6;
  color: var(--on-background);
  /* Templates carry deliberate line breaks; keep them, but never let a long
     unbroken token widen the card. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.smsg__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding-top: 10px;
  border-top: 1px solid var(--outline-variant);
}

.smsg__meta {
  font-family: var(--font-label);
  font-size: var(--text-label-sm);
  color: var(--outline);
}

.smsg__copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-full, 999px);
  background: var(--surface-container-low);
  font-family: var(--font-label);
  font-size: var(--text-label-sm);
  color: var(--on-surface);
  cursor: pointer;
  transition:
    border-color 0.2s var(--ease),
    background-color 0.2s var(--ease),
    color 0.2s var(--ease);
}

.smsg__copy:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* The page guarantees 44px touch targets; the pill is 32px tall on its own */
@media (pointer: coarse) {

  .smsg__copy {
    min-height: 44px;
    padding-inline: 16px;
  }
}

.smsg__copy .icon {
  width: 14px;
  height: 14px;
}

.smsg__copy-done {
  display: none;
}

.smsg__copy.is-copied {
  border-color: #0f9d58;
  color: #0f9d58;
  background: rgba(15, 157, 88, 0.08);
}

.smsg__copy.is-copied .smsg__copy-idle {
  display: none;
}

.smsg__copy.is-copied .smsg__copy-done {
  display: block;
}

/* ---- Empty state ---- */
.smsg__empty {
  padding: var(--space-6) var(--space-4);
  border: 1px dashed var(--outline-variant);
  border-radius: var(--radius-lg, 14px);
  background: var(--surface-container-low);
  text-align: center;
}

.smsg__empty h2 {
  font-family: var(--font-display);
  font-size: var(--text-headline-lg);
  font-weight: 700;
  color: var(--on-background);
}

.smsg__empty p {
  max-width: 44rem;
  margin: var(--space-2) auto 0;
  color: var(--on-surface-variant);
  line-height: 1.65;
}

.smsg__empty code {
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--surface-container-high);
  font-family: var(--font-label);
  font-size: 0.9em;
}

.smsg__cta {
  text-align: center;
}

.smsg__cta h2 {
  font-family: var(--font-display);
  font-size: var(--text-headline-lg);
  font-weight: 700;
  color: var(--on-background);
}

.smsg__cta p {
  max-width: 40rem;
  margin: var(--space-2) auto var(--space-3);
  color: var(--on-surface-variant);
}

/* --------------------------------------------------------------------------
   22. Contact page
   -------------------------------------------------------------------------- */

.ctc-ways {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-3);
  list-style: none;
  padding: 0;
  margin: 0;
}

.ctc-way {
  padding: var(--space-3);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg, 14px);
  background: var(--surface-container-lowest);
}

.ctc-way__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: var(--space-2);
  border-radius: 12px;
  background: var(--surface-container);
  color: var(--primary);
}

.ctc-way__icon .icon {
  width: 20px;
  height: 20px;
}

.ctc-way h2 {
  font-family: var(--font-display);
  font-size: var(--text-title);
  font-weight: 700;
  color: var(--on-background);
}

.ctc-way p {
  margin: 4px 0 8px;
  font-size: var(--text-body-sm);
  color: var(--on-surface-variant);
}

.ctc-way a {
  font-weight: 600;
  color: var(--primary);
  overflow-wrap: anywhere;
}

.ctc-way__plain {
  display: block;
  font-weight: 600;
  color: var(--on-background);
  overflow-wrap: anywhere;
}

/* ---- Form + map ---- */
.ctc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  align-items: start;
}

@media (min-width: 900px) {
  .ctc-grid {
    grid-template-columns: 1.15fr 1fr;
    gap: var(--space-5);
  }
}

.ctc-form-wrap {
  padding: var(--space-4);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-xl, 18px);
  background: var(--surface-container-lowest);
}

.ctc-form__title {
  margin-bottom: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-headline-lg);
  font-weight: 700;
  color: var(--on-background);
}

.ctc-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
}

@media (min-width: 560px) {
  .ctc-form {
    grid-template-columns: 1fr 1fr;
  }

  .ctc-field--wide {
    grid-column: 1 / -1;
  }
}

.ctc-field label {
  display: block;
  margin-bottom: 6px;
  font-size: var(--text-body-sm);
  font-weight: 600;
  color: var(--on-background);
}

.ctc-req {
  color: var(--error);
}

.ctc-opt {
  font-weight: 400;
  color: var(--outline);
}

.ctc-field input,
.ctc-field textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--outline-variant);
  border-radius: 10px;
  background: var(--surface-container-lowest);
  font: inherit;
  font-size: var(--text-body-md);
  color: var(--on-background);
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}

.ctc-field textarea {
  resize: vertical;
  min-height: 130px;
}

.ctc-field input:focus,
.ctc-field textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0, 89, 187, 0.15);
}

.ctc-field input[aria-invalid="true"],
.ctc-field textarea[aria-invalid="true"] {
  border-color: var(--error);
}

.ctc-err {
  margin-top: 5px;
  font-size: var(--text-body-sm);
  color: var(--error);
}

.ctc-note {
  margin-top: 10px;
  font-size: var(--text-label-sm);
  color: var(--outline);
}

/* Honeypot: off-screen rather than display:none, which some bots skip */
.ctc-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.ctc-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: var(--space-3);
  padding: 12px 14px;
  border-radius: 12px;
  font-size: var(--text-body-sm);
  line-height: 1.55;
}

.ctc-alert .icon {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 2px;
}

.ctc-alert strong {
  display: block;
}

.ctc-alert--ok {
  border: 1px solid rgba(15, 157, 88, 0.35);
  background: rgba(15, 157, 88, 0.08);
  color: #0b6b3d;
}

.ctc-alert--bad {
  border: 1px solid var(--error-container);
  background: var(--error-container);
  color: var(--on-error-container);
}

/* ---- Map ---- */
.ctc-map {
  position: relative;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-xl, 18px);
  overflow: hidden;
  background: var(--surface-container-low);
}

.ctc-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  /* The global img/svg reset does not cover iframes, but be explicit anyway */
  max-width: none;
  display: block;
}

.ctc-map__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-top: var(--space-2);
  font-size: var(--text-body-sm);
  color: var(--on-surface-variant);
}

.ctc-map__foot a {
  font-weight: 600;
  color: var(--primary);
  white-space: nowrap;
}

.ctc-hours {
  display: grid;
  gap: 8px;
  margin-top: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg, 14px);
  background: var(--surface-container-low);
  list-style: none;
}

.ctc-hours li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: var(--text-body-sm);
  color: var(--on-surface-variant);
}

.ctc-hours .icon {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--primary);
}

.ctc-hours strong {
  color: var(--on-background);
}

/* --------------------------------------------------------------------------
   23. API documentation page
   -------------------------------------------------------------------------- */

.page-hero--tight {
  padding-bottom: var(--space-3);
}

.apidoc {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  align-items: start;
  padding-bottom: var(--space-8);
}

@media (min-width: 900px) {
  .apidoc {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: var(--space-5);
  }
}

/* ---- Sidebar ---- */
.apidoc__aside {
  position: static;
}

@media (min-width: 900px) {
  .apidoc__aside {
    position: sticky;
    /* Clears the sticky header rather than hiding underneath it */
    top: calc(var(--header-h, 64px) + 20px);
  }
}

.apidoc__toc h2 {
  margin-bottom: 10px;
  font-family: var(--font-label);
  font-size: var(--text-label-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--outline);
}

.apidoc__toc ul {
  display: grid;
  gap: 2px;
  list-style: none;
  padding: 0;
  margin: 0;
  border-left: 2px solid var(--outline-variant);
}

.apidoc__toc a {
  display: block;
  padding: 7px 12px;
  margin-left: -2px;
  border-left: 2px solid transparent;
  font-size: var(--text-body-sm);
  color: var(--on-surface-variant);
  text-decoration: none;
  transition: color 0.18s var(--ease), border-color 0.18s var(--ease);
}

.apidoc__toc a:hover,
.apidoc__toc a:focus-visible {
  color: var(--primary);
  border-left-color: var(--primary);
}

/* ---- Sections ---- */
.apidoc__section {
  padding-block: var(--space-4);
  border-top: 1px solid var(--outline-variant);
  /* Anchor links must not land under the sticky header */
  scroll-margin-top: calc(var(--header-h, 64px) + 16px);
}

.apidoc__section:first-child {
  border-top: 0;
  padding-top: 0;
}

.apidoc__section h2 {
  margin-bottom: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-headline-lg);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--on-background);
}

.apidoc__section h4 {
  margin: var(--space-3) 0 8px;
  font-family: var(--font-label);
  font-size: var(--text-label-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--outline);
}

.apidoc__section p {
  margin-bottom: var(--space-2);
  line-height: 1.7;
  color: var(--on-surface-variant);
}

/* :not(.btn) or this beats .btn--primary on specificity (0,1,1 vs 0,1,0)
   and paints button labels blue-on-blue. Same guard as .nav-panel a. */
.apidoc__section a:not(.btn) {
  color: var(--primary);
  font-weight: 600;
}

.apidoc__list {
  display: grid;
  gap: 8px;
  margin: 0 0 var(--space-2);
  padding-left: 1.15em;
  color: var(--on-surface-variant);
  line-height: 1.7;
}

.apidoc__base {
  font-size: var(--text-body-sm);
}

/* Inline code everywhere on the page */
.apidoc code {
  padding: 2px 6px;
  border-radius: 5px;
  background: var(--surface-container-high);
  font-family: var(--font-label);
  font-size: 0.88em;
  color: var(--on-background);
  overflow-wrap: anywhere;
}

/* ---- Endpoint block ---- */
.apidoc__endpoint {
  margin-top: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg, 14px);
  background: var(--surface-container-lowest);
}

.apidoc__endpoint h3 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 8px;
  font-size: var(--text-title);
}

.apidoc__endpoint h3 code {
  background: none;
  padding: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--on-background);
}

.apidoc__method {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 6px;
  font-family: var(--font-label);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #fff;
}

.apidoc__method--post {
  background: #0f9d58;
}

.apidoc__method--get {
  background: var(--primary);
}

/* ---- Code blocks ---- */
.apidoc__code {
  margin-bottom: var(--space-2);
  border: 1px solid #1d2a44;
  border-radius: 10px;
  overflow: hidden;
  background: #0f1b2e;
}

.apidoc__code-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 8px 10px 8px 14px;
  background: #16243c;
  border-bottom: 1px solid #1d2a44;
  font-family: var(--font-label);
  font-size: var(--text-label-sm);
  color: #9fb3d2;
}

.apidoc__code pre {
  margin: 0;
  padding: 14px;
  /* Long cURL lines scroll inside the block; the page never scrolls sideways */
  overflow-x: auto;
}

.apidoc__code code {
  padding: 0;
  background: none;
  font-family: var(--font-label);
  font-size: 0.82rem;
  line-height: 1.65;
  color: #dbe6f7;
  white-space: pre;
  overflow-wrap: normal;
}

.apidoc__copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border: 1px solid #2a3b5c;
  border-radius: var(--radius-full, 999px);
  background: transparent;
  font-family: var(--font-label);
  font-size: var(--text-label-sm);
  color: #9fb3d2;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}

.apidoc__copy:hover {
  border-color: #4b8dff;
  color: #dbe6f7;
}

.apidoc__copy .icon {
  width: 14px;
  height: 14px;
}

.apidoc__copy.is-copied {
  border-color: #0f9d58;
  color: #6ee7a8;
}

@media (pointer: coarse) {

  .apidoc__copy {
    min-height: 44px;
    padding-inline: 15px;
  }
}

/* ---- Tables ---- */
.apidoc__table-wrap {
  overflow-x: auto;
  border: 1px solid var(--outline-variant);
  border-radius: 10px;
}

.apidoc__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-body-sm);
}

.apidoc__table th,
.apidoc__table td {
  padding: 10px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--outline-variant);
}

.apidoc__table thead th {
  background: var(--surface-container-low);
  font-family: var(--font-label);
  font-size: var(--text-label-sm);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--outline);
  white-space: nowrap;
}

.apidoc__table tbody tr:last-child td {
  border-bottom: 0;
}

.apidoc__table td {
  color: var(--on-surface-variant);
  line-height: 1.6;
}

.apidoc__req {
  font-family: var(--font-label);
  font-size: var(--text-label-sm);
  font-weight: 600;
  color: var(--error);
}

.apidoc__code-pill {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 6px;
  background: var(--surface-container-high);
  font-family: var(--font-label);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--on-background);
}

.apidoc__code-pill--ok {
  background: rgba(15, 157, 88, 0.14);
  color: #0b6b3d;
}

.apidoc__code-pill--warn {
  background: rgba(204, 167, 65, 0.2);
  color: #765b00;
}

/* ---- Callouts ---- */
.apidoc__callout {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin: var(--space-2) 0;
  padding: 13px 15px;
  border: 1px solid var(--outline-variant);
  border-radius: 12px;
  background: var(--surface-container-low);
  font-size: var(--text-body-sm);
  line-height: 1.65;
  color: var(--on-surface-variant);
}

.apidoc__callout .icon {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 2px;
  color: var(--primary);
}

.apidoc__callout strong {
  color: var(--on-background);
}

.apidoc__callout--warn {
  border-color: rgba(204, 167, 65, 0.45);
  background: rgba(204, 167, 65, 0.10);
}

.apidoc__callout--warn .icon {
  color: #8a6a00;
}