/* ============================================================
   Bito.ONE — 純 HTML + CSS 版樣式表
   由原 Next.js 專案的 tokens / Navbar / Hero / MarketExplainer /
   WhyUs / Contact / Footer 各 CSS 依序合併而成。
   ============================================================ */

/* ============================================================
   Design tokens (BVNK-inspired light theme)
   ============================================================ */

:root {
  /* --- Brand / Primary --- */
  --navy: #062259;
  --navy-slate: #041536;
  --cobalt: #2c6ff2;
  --cobalt-hover: #1e5fd9;
  --cobalt-active: #1a4db8;
  --purple: #5928ed;

  /* --- Tints --- */
  --light-purple: #d9e6ff;
  --pale-blue: #d4e2ff;
  --pale-blue-bg: #f0f5ff;

  /* --- Text --- */
  --black: #000000;
  --charcoal: #222222;
  --dark-gray: #333333;
  --slate: #2d3444;
  --medium-slate: #516278;
  --medium-gray: #b3b3b3;

  /* --- Surfaces / lines --- */
  --white: #ffffff;
  --off-white: #e9f0fe;
  --light-gray: #dddddd;
  --border-light: #e6eaf4;
  --divider: #ebe4e4;

  /* --- Semantic --- */
  --error: #b84242;
  --error-bg: rgba(184, 66, 66, 0.1);
  --success-bg: #e6f7f0;
  --success-text: #1a7a66;

  /* --- Typography --- */
  --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;

  /* --- Type scale (semantic, desktop) --- */
  --text-h1: 56px; /* hero main title */
  --text-h2: 46px; /* section title */
  --text-subtitle: 18px; /* term titles inside cards/lists */
  --text-body1: 19px; /* body1 — primary lead / intro paragraphs */
  --text-body2: 16px; /* body2 — secondary & list copy */
  --text-body3: 14px; /* body3 — captions, labels, notes */

  /* --- Spacing scale (4px base) --- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-11: 44px;
  --sp-12: 48px;
  --sp-20: 80px;

  /* --- Radius --- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;

  /* --- Elevation --- */
  --shadow-sm: rgba(22, 22, 78, 0.06) 2px 4px 8px 0px;
  --shadow-md: rgba(6, 34, 89, 0.08) 0px 2px 6px 0px;
  --shadow-lg: rgba(4, 21, 54, 0.08) 2px 4px 8px 0px;
  --shadow-hover: rgba(22, 22, 78, 0.1) 2px 4px 12px 0px;

  /* --- Layout --- */
  --container: 1440px;
  --nav-h: 64px;

  /* --- Breakpoints (reference only) ---
     Native CSS media queries can't read custom properties, so these are the
     canonical anchor values to hardcode in @media. Use max-width one less than
     the anchor (mobile-first "up to" queries), or min-width at the anchor.
       sm   640px   → @media (max-width: 639px)
       md   768px   → @media (max-width: 767px)
       lg  1024px   → @media (max-width: 1023px)  /  @media (min-width: 1024px)
  */
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--white);
}

.site {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  background: var(--white);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--black);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

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

ul {
  list-style: none;
}

button {
  font-family: inherit;
  cursor: pointer;
}

::selection {
  background: var(--pale-blue);
  color: var(--navy);
}

/* --- Layout helpers --- */
/* NOTE: use `clip`, not `hidden`. `overflow-x: hidden` forces `overflow-y`
   to compute as `auto`, turning these elements into nested scroll containers.
   That traps wheel scrolling and breaks viewport-based scroll effects
   (sections stay stuck at opacity:0). `clip` clips horizontally while
   keeping `overflow-y: visible`, so the root viewport remains the scroller. */
body,
.site {
  overflow-x: clip;
}

.site .container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  /* Fluid side gutter: grows with viewport so laptop widths (1024–1440) get
     more breathing room than a flat 80px, capped at 132px on large screens. */
  padding: 0 clamp(var(--sp-20), 8.5vw, 132px);
}

/* Generous section padding gives each scroll colour stage room to breathe —
   with only 80px the next stage arrived before the current tint registered. */
.site .section {
  padding: 160px 0;
}

/* --- Shared type utilities --- */
.site .eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cobalt);
  margin-bottom: var(--sp-4);
}

.site .section-title {
  font-size: 42px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--navy);
  /* Shrink to the text so the underline below can match its width. */
  width: fit-content;
}

/* Short decorative accent rule under the start of the title text. */
.site .section-title::after {
  content: '';
  display: block;
  width: 3em;
  height: 3px;
  margin-top: 0.5em;
  border-radius: 2px;
  background: var(--cobalt);
}

.site .section-lead {
  font-size: var(--text-body1);
  line-height: 1.7;
  color: var(--slate);
}

.site .accent {
  color: var(--cobalt);
}

/* --- Buttons --- */
.site .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  border: none;
  border-radius: 12px;
  transition: background 0.18s ease, box-shadow 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  white-space: nowrap;
}

.site .btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(44, 111, 242, 0.3);
}

.site .btn-primary {
  min-height: 48px;
  padding: 12px 28px;
  background: var(--cobalt);
  color: var(--white);
  box-shadow: var(--shadow-md);
}

.site .btn-primary:hover {
  background: var(--cobalt-hover);
  box-shadow: rgba(6, 34, 89, 0.12) 0px 4px 8px 0px;
}

.site .btn-primary:active {
  background: var(--cobalt-active);
}

.site .btn-secondary {
  min-height: 48px;
  padding: 12px 28px;
  background: var(--pale-blue-bg);
  color: var(--black);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-md);
}

.site .btn-secondary:hover {
  background: #e1ecff;
  border-color: var(--light-purple);
}

.site .btn-ghost {
  padding: 10px 16px;
  background: transparent;
  color: var(--black);
}

.site .btn-ghost:hover {
  background: rgba(44, 111, 242, 0.08);
  color: var(--cobalt);
}

.site .btn-sm {
  min-height: 40px;
  padding: 8px 20px;
  font-size: 14px;
}

/* --- Status badge --- */
.site .badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 16px;
}

.site .badge-info {
  background: var(--pale-blue);
  color: var(--cobalt);
}

.site .badge-success {
  background: var(--success-bg);
  color: var(--success-text);
}

@media (max-width: 1023px) {
  .site .container {
    padding: 0 var(--sp-8);
  }
  .site .section {
    padding: var(--sp-20) 0;
  }
  .site .section-title {
    font-size: 32px;
  }
}

@media (max-width: 639px) {
  .site .container {
    padding: 0 var(--sp-8);
  }
  .site .section {
    padding: var(--sp-12) 0;
  }
  .site .section-title {
    font-size: 32px;
  }
  .site .btn-primary,
  .site .btn-secondary {
    padding: 12px 20px;
  }
}

/* --- Scroll reveal --- */
/* Same motion language as the hero card's row stagger (cardRowIn below):
   `.reveal` marks a watched group; each `.reveal-item` inside rises in one by
   one once the group scrolls into view, offset by its inline `--ri` index.
   A standalone element may carry both classes. The keyframes omit `to` and
   fill backwards so finished items revert to their natural styles — hover
   transitions on the same elements (e.g. .advantage) stay unaffected. */
.site .reveal:not(.is-visible) .reveal-item,
.site .reveal.reveal-item:not(.is-visible) {
  opacity: 0;
}

.site .reveal.is-visible .reveal-item,
.site .reveal.is-visible.reveal-item {
  animation: revealItemIn 0.72s cubic-bezier(0.16, 1, 0.3, 1) backwards;
  animation-delay: calc(var(--ri, 0) * 0.12s);
}

@keyframes revealItemIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .site .reveal:not(.is-visible) .reveal-item,
  .site .reveal.reveal-item:not(.is-visible) {
    opacity: 1;
  }
  .site .reveal.is-visible .reveal-item,
  .site .reveal.is-visible.reveal-item {
    animation: none;
  }
}

/* Without JS, keep everything visible (mirrors the old <noscript> fallback). */
.no-js .site .reveal-item {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

/* ============================================================
   Navbar
   ============================================================ */

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-h);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border-light);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.nav__logo {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--navy);
}

/* Brand mark: same navy as "Bito". */
.nav__logo-mark {
  height: 26px;
  width: auto;
  color: var(--navy);
}

.nav__logo-dot {
  color: var(--navy);
}

.nav__logo-one {
  color: var(--cobalt);
}

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-left: auto;
  margin-right: var(--sp-6);
}

.nav__links a {
  padding: 8px 16px;
  font-size: var(--text-body2);
  font-weight: 500;
  color: var(--slate);
  border-radius: var(--radius-sm);
  transition: color 0.15s ease, background 0.15s ease;
}

.nav__links a:hover {
  color: var(--cobalt);
  background: rgba(44, 111, 242, 0.06);
}

@media (max-width: 767px) {
  .nav__links {
    display: none;
  }
}

/* ============================================================
   Hero
   ============================================================ */

.hero {
  position: relative;
  /* Tight enough that the full hero (incl. the order card) fits the first
     viewport on a MacBook Pro (~820px of content height under the navbar). */
  padding: var(--sp-12) 0 56px;
  background: var(--white);
  /* The oversized ring backdrop sweeps past the hero's edges — clip it here
     so it never bleeds into the next section. */
  overflow: clip;
}

/* On taller screens the fixed padding left the next section peeking above the
   fold. Fill the first viewport (minus navbar) instead, so the hero owns the
   whole opening screen regardless of monitor height. */
@media (min-width: 1024px) {
  .hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: calc(100svh - var(--nav-h));
  }
}

/* Tall desktop screens only (laptops stay on the tight rhythm that exactly
   fills their first viewport): the full-height hero surrounds the copy with
   generous white space, so open up the copy column's internal spacing to
   match. */
@media (min-width: 1024px) and (min-height: 900px) {
  .hero__lead-in {
    margin-bottom: var(--sp-6);
  }
  .hero__lead {
    margin-top: var(--sp-12);
  }
  .hero__pillars {
    margin-top: 56px;
  }
  .hero__actions {
    margin-top: 56px;
  }
  /* Drop the top-right USDT orb below the card's USDT badge (its percentage
     position rides up the taller hero). !important: base position comes from
     the orb inline style in the HTML. */
  .hero__orbits .hero-orb:last-child {
    bottom: 58% !important;
  }
}

/* --- Floating currency orbs (span the hero, drift gently) --- */
/* Confined to the container column (centered, max 1440) so orbs never drift
   into the outer page margins. They float free of the ring backdrop. */
.hero__orbits {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin-inline: auto;
  max-width: var(--container);
  pointer-events: none;
}

/* Positioned shell — carries the entrance reveal. The visual circle + the
   infinite float live on the inner body so the reveal animation (also on the
   `animation` property) can't cancel the float. */
.hero-orb {
  position: absolute;
  width: var(--orb-size);
  height: var(--orb-size);
}

.hero-orb__body {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: 50%;
  box-shadow:
    0 18px 40px -18px rgba(6, 34, 89, 0.28),
    0 4px 12px -6px rgba(6, 34, 89, 0.12);
  animation: heroOrbFloat 7s ease-in-out infinite;
  will-change: transform;
}

.hero-orb__icon {
  display: block;
  width: calc(var(--orb-size) * 0.4);
  height: calc(var(--orb-size) * 0.4);
}

.hero-orb__ticker {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--navy);
}

@keyframes heroOrbFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-16px); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-orb__body {
    animation: none;
  }
}

.hero__inner {
  /* positioning context for the ring/orb backdrop */
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: var(--sp-20);
}

/* Nudged up from vertical center just enough that the pillars row and CTA
   clear the big USDT orb floating near the hero's lower-left. z-index lifts
   the copy above the rings (0) and the orb layer (1). */
.hero__copy {
  position: relative;
  top: -56px;
  z-index: 2;
}

.hero__lead-in {
  font-size: 30px;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--navy);
  margin-bottom: var(--sp-5);
}

.hero__title {
  font-size: 48px;
  line-height: 1.18;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--navy);
}

.hero__title .accent {
  white-space: nowrap;
}

.hero__lead {
  margin-top: var(--sp-10);
  max-width: 34em;
  font-size: var(--text-body1);
  line-height: 1.75;
  color: var(--slate);
}

.hero__pillars {
  list-style: none;
  display: flex;
  align-items: center;
  margin-top: var(--sp-12);
}

.hero__pillars li {
  font-size: var(--text-body2);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--navy);
  white-space: nowrap;
}

.hero__pillars li + li {
  margin-left: var(--sp-6);
  padding-left: var(--sp-6);
  border-left: 1px solid var(--border-light);
}

.hero__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-12);
}

/* --- Order card + floating visual --- */
.hero__visual {
  position: relative;
  width: 100%;
  max-width: 460px;
  margin-left: auto;
  perspective: 1800px;
}

/* Two flat dashed circles behind the card — quiet background garnish.
   Anchored to the container (same coordinate system as the card) so the
   composition holds at every viewport width; centred on the card's report
   box. */
.hero__rings {
  position: absolute;
  z-index: 0;
  top: 47%;
  left: 74%;
  width: 62%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* Blue-gray (navy-based) hairlines, kept very quiet. */
.hero__ring circle {
  stroke: rgba(6, 34, 89, 0.11);
  stroke-width: 1.8;
  stroke-dasharray: 4 9;
  stroke-linecap: round;
}

.hero__ring--2 circle {
  stroke: rgba(6, 34, 89, 0.08);
  stroke-dasharray: 4 11;
}

.hero__ring {
  /* view-box keeps every group's spin axis at the exact svg centre (the
     riding dots would skew a fill-box's bounding box off-centre). */
  transform-box: view-box;
  transform-origin: center;
  animation: heroRingSpin 80s linear infinite;
}

.hero__ring--2 {
  animation-duration: 130s;
  animation-direction: reverse;
}

@keyframes heroRingSpin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__ring {
    animation: none;
  }
}

.order-card {
  position: relative;
  z-index: 1;
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  transform: rotateY(-23deg) rotateX(9deg) rotateZ(-2deg);
  transform-origin: 65% 50%;
  box-shadow:
    -34px 44px 90px -34px rgba(6, 34, 89, 0.4),
    0 6px 18px -8px rgba(6, 34, 89, 0.18);
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.hero__visual:hover .order-card {
  transform: rotateY(-14deg) rotateX(5deg) rotateZ(-1deg);
}

/* Rows reveal one by one, dovetailing with the copy: they start at 0.35s,
   while the last copy lines (pillars/CTA, done ~1.2s) are still animating —
   the card data flows on from the text instead of waiting for it. */
@keyframes cardRowIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.order-card__head,
.order-card__amount,
.order-card__report-head,
.order-card__rows li,
.order-card__rate,
.order-card__total,
.order-card__status {
  opacity: 0;
  animation: cardRowIn 0.72s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.order-card__head { animation-delay: 0.35s; }
.order-card__amount { animation-delay: 0.45s; }
.order-card__report-head { animation-delay: 0.55s; }
.order-card__rows li:nth-child(1) { animation-delay: 0.65s; }
.order-card__rows li:nth-child(2) { animation-delay: 0.75s; }
.order-card__rows li:nth-child(3) { animation-delay: 0.85s; }
.order-card__rate { animation-delay: 0.95s; }
.order-card__total { animation-delay: 1.05s; }
.order-card__status { animation-delay: 1.15s; }

@media (prefers-reduced-motion: reduce) {
  .order-card {
    transition: none;
  }
  .order-card__head,
  .order-card__amount,
  .order-card__report-head,
  .order-card__rows li,
  .order-card__rate,
  .order-card__total,
  .order-card__status {
    opacity: 1;
    animation: none;
  }
}

.order-card__label {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--medium-slate);
  text-transform: uppercase;
}

.order-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--border-light);
}

.order-card__id {
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 500;
  color: var(--black);
  margin-top: var(--sp-1);
}

.order-card__amount .order-card__value {
  margin-top: var(--sp-1);
  font-size: 30px;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: -0.01em;
}

.order-card__ccy {
  color: var(--cobalt);
}

.order-card__report {
  background: var(--pale-blue-bg);
  border-radius: var(--radius-md);
  padding: var(--sp-5);
}

.order-card__report-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 14px;
  font-weight: 600;
  color: var(--cobalt);
  margin-bottom: var(--sp-3);
}

.order-card__rows li,
.order-card__rate,
.order-card__total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}

.order-card__rows li {
  padding: var(--sp-2) 0;
  font-size: 14px;
  color: var(--slate);
}

.order-card__rows li + li {
  border-top: 1px solid rgba(6, 34, 89, 0.06);
}

.order-card__rows strong {
  font-weight: 500;
  color: var(--black);
}

.order-card__settle {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.order-card__rate,
.order-card__total {
  font-size: var(--text-body3);
  color: var(--slate);
}

.order-card__rate strong {
  font-family: var(--font-sans);
  font-weight: 500;
  color: var(--black);
}

.order-card__total strong {
  font-size: 18px;
  font-weight: 600;
  color: var(--navy);
}

.order-card__status {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-4);
  background: var(--success-bg);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  color: var(--success-text);
}

.order-card__status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success-text);
  box-shadow: 0 0 0 4px rgba(26, 122, 102, 0.15);
}

@media (max-width: 1023px) {
  .hero {
    padding: var(--sp-12) 0 var(--sp-20);
  }
  .hero__orbits,
  .hero__rings {
    display: none;
  }
  .hero__inner {
    grid-template-columns: 1fr;
    gap: var(--sp-12);
  }
  .hero__copy {
    top: 0;
  }
  .hero__lead-in {
    font-size: 24px;
  }
  .hero__title {
    font-size: 40px;
  }
  .hero__lead {
    font-size: var(--text-body2);
  }
  .hero__visual {
    max-width: 460px;
    margin: 0 auto;
  }
  .order-card {
    transform: rotateY(-10deg) rotateX(5deg) rotateZ(-1deg);
  }
}

@media (max-width: 639px) {
  .hero__lead-in {
    font-size: 24px;
  }
  .hero__title {
    font-size: 36px;
  }
  .hero__title .accent {
    white-space: normal;
  }
  .hero__pillars {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-3);
  }
  .hero__pillars li + li {
    margin-left: 0;
    padding-left: 0;
    border-left: none;
  }
  .hero__actions {
    flex-direction: column;
    align-items: stretch;
  }
  .order-card {
    padding: var(--sp-6);
    transform: none;
  }
  .order-card__amount .order-card__value {
    font-size: 26px;
  }
}

/* ============================================================
   MarketExplainer
   ============================================================ */

/* Stage 1 of the scroll colour rhythm (white → pale blue → navy → white →
   navy-slate): tints pale blue while it holds the viewport focus zone. */
.market {
  background-color: var(--white);
  transition: background-color 0.45s ease;
}

.market.is-tinted {
  background-color: var(--pale-blue-bg);
}

.market__top {
  display: grid;
  gap: var(--sp-12);
}

.market__desc {
  margin-top: var(--sp-10);
  font-size: var(--text-body1);
  line-height: 1.9;
  color: var(--slate);
}

/* --- What is stablecoin — white panel: text left, peg diagram right --- */
.market__what {
  /* adds to the grid gap: extra breathing room above the panel */
  margin-top: var(--sp-6);
  display: grid;
  grid-template-columns: 3fr 2fr;
  align-items: center;
  padding: var(--sp-12);
  background: var(--white);
  border-radius: var(--radius-lg);
}

.market__what-body {
  padding-right: 56px;
}

/* Hairline divider between the text and the diagram, spanning the panel. */
.market__what-visual {
  align-self: stretch;
  display: flex;
  align-items: center;
  border-left: 1px solid var(--border-light);
  padding-left: 56px;
}

/* --- 1:1 peg diagram: two labelled coin groups + double-headed 1:1 link --- */
.peg {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-6);
}

.peg__flow {
  width: 100%;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: var(--sp-4);
}

.peg__side {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  padding: var(--sp-6) var(--sp-4);
}

.peg__coins {
  display: flex;
  align-items: center;
  /* Shadow on the container casts from the pair's combined silhouette, so the
     overlapping coins don't leave a dark seam where one shadows the other. */
  filter: drop-shadow(0 4px 7px rgba(6, 34, 89, 0.16));
}

/* The stablecoin pair overlaps slightly — one family, two issuers. */
.peg__coins--stack .peg__coin + .peg__coin {
  margin-left: -12px;
}

.peg__coin {
  display: block;
  width: 60px;
  height: 60px;
  border-radius: 50%;
}

.peg__label {
  font-size: var(--text-body2);
  font-weight: 600;
  color: var(--navy);
  white-space: nowrap;
}

.peg__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 0 var(--sp-2);
}

.peg__ratio {
  font-family: var(--font-mono);
  font-size: 32px;
  font-weight: 600;
  line-height: 1;
  color: var(--cobalt);
}

.peg__arrows {
  display: block;
  color: var(--cobalt);
}

.peg__link-text {
  font-size: var(--text-body3);
  font-weight: 500;
  color: var(--medium-slate);
  white-space: nowrap;
}

.peg__note {
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border-light);
  font-size: var(--text-body3);
  line-height: 1.8;
  color: var(--medium-slate);
  text-align: center;
}

.market__what-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: var(--sp-5);
}

/* body2: this copy is subordinate to the section lead. */
.market__what-body p {
  font-size: var(--text-body2);
  line-height: 1.85;
  color: var(--navy);
}

.market__what-body p + p {
  margin-top: var(--sp-4);
}

/* Second paragraph is really a side note — quieter colour only. */
.market__what-body .market__what-note {
  margin-top: var(--sp-5);
  font-size: var(--text-body2);
  line-height: 1.8;
  color: var(--medium-slate);
}

@media (max-width: 1023px) {
  .market__top {
    grid-template-columns: 1fr;
    gap: var(--sp-10);
  }
  .market__what {
    grid-template-columns: 1fr;
    padding: var(--sp-8);
  }
  .market__what-body {
    padding-right: 0;
  }
  /* stacked: the divider becomes a horizontal rule above the diagram */
  .market__what-visual {
    justify-content: center;
    border-left: none;
    border-top: 1px solid var(--border-light);
    padding-left: 0;
    padding-top: var(--sp-8);
    margin-top: var(--sp-8);
  }
  .peg {
    width: 100%;
    max-width: 400px;
  }
}

/* On narrow phones the peg diagram's natural width (two 60px coins + a fixed
   108px arrow SVG + side padding ≈ 260px) grazes the card interior and spills a
   hairline past the edge, showing a stray scrollbar. Shrink the parts so the
   row keeps clear margin down to ~320px. */
@media (max-width: 639px) {
  .peg__flow {
    gap: var(--sp-2);
  }
  .peg__side {
    padding: var(--sp-2) 0;
  }
  .peg__coin {
    width: 52px;
    height: 52px;
  }
  .peg__arrows {
    width: 60px;
  }
  .peg__ratio {
    font-size: 26px;
  }
}

/* ============================================================
   WhyUs
   ============================================================ */

/* The dark act of the page — statically navy instead of scroll-tinted.
   Fading white → navy while in view flashed uncomfortably (big luminance
   jump + the heading crossfading dark→white passed through a low-contrast
   moment), so the section simply IS dark and scrolls in naturally. */
.why {
  background-color: var(--navy);
}

/* Higher specificity than .site .eyebrow (0,2,0) so this override wins. */
.site .why__eyebrow {
  font-size: 20px;
  margin-bottom: var(--sp-6);
}

.why .section-title {
  color: var(--white);
  /* Heading is centered; fit-content shrinks it, so re-center the block. */
  margin-inline: auto;
}

/* Centered heading → center its accent rule too (others stay left-aligned). */
.why .section-title::after {
  margin-inline: auto;
}

.why .why__lead {
  color: rgba(255, 255, 255, 0.78);
}

.why__head {
  max-width: 57.14em;
  margin-inline: auto;
  margin-bottom: var(--sp-20);
  text-align: center;
}

.why__lead {
  margin-top: var(--sp-10);
}

.advantage {
  margin-bottom: var(--sp-8);
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  grid-template-areas: 'head points';
  column-gap: var(--sp-11);
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--sp-20) var(--sp-12);
  box-shadow: var(--shadow-sm);
}

.advantage:last-child {
  margin-bottom: 0;
}

/* Small index label at the top of the head column. */
.advantage__num {
  font-family: var(--font-sans);
  font-size: 28px;
  font-weight: 500;
  line-height: 1;
  color: var(--navy);
  margin-bottom: var(--sp-4);
}

.advantage__head {
  grid-area: head;
  align-self: start;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.advantage__title {
  font-size: 28px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--navy);
}

.advantage__desc {
  margin-top: var(--sp-2);
  font-size: var(--text-body1);
  line-height: 1.6;
  color: var(--slate);
}

.advantage__points {
  grid-area: points;
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}

.advantage__points li {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
}

/* Semantic lucide icon per point, held in a soft pale-blue badge. */
.advantage__point-badge {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--pale-blue-bg);
  color: var(--cobalt);
}

.advantage__point-icon {
  width: 20px;
  height: 20px;
}

.advantage__point-body {
  min-width: 0;
}

.advantage__points strong {
  display: block;
  font-size: var(--text-subtitle);
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 2px;
}

/* body2 — one step under the 18px subtitle; point titles stay 18. */
.advantage__points p {
  font-size: var(--text-body2);
  line-height: 1.65;
  color: var(--slate);
}

/* Single-column flow below the desktop breakpoint. */
@media (max-width: 1023px) {
  .advantage {
    margin-bottom: var(--sp-6);
    grid-template-columns: 1fr;
    grid-template-areas:
      'head'
      'points';
    row-gap: var(--sp-6);
    padding: var(--sp-10) var(--sp-8);
  }

  .advantage__title {
    font-size: 22px;
  }
}

@media (max-width: 639px) {
  .advantage {
    padding: var(--sp-8) var(--sp-6);
  }
  .advantage__title {
    font-size: 22px;
  }
}

/* ============================================================
   Contact
   ============================================================ */

.contact {
  background: var(--white);
}

.contact__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-20);
  align-items: start;
}

.contact__subtitle {
  margin-top: var(--sp-10);
  font-size: 28px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--navy);
}

.contact__lead {
  margin-top: var(--sp-4);
}

.contact__services {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  margin-top: var(--sp-10);
}

.contact__services li {
  display: flex;
  gap: var(--sp-4);
}

.contact__services-mark {
  flex-shrink: 0;
  color: var(--cobalt);
  font-size: 19px;
  line-height: 1.6;
}

.contact__services strong {
  display: block;
  font-size: var(--text-subtitle);
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 2px;
}

.contact__services p {
  font-size: var(--text-body2);
  line-height: 1.65;
  color: var(--slate);
}

/* --- Form card --- */
.contact__card {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--sp-8);
  /* Flat look — a barely-there shadow; the border carries the edge. */
  box-shadow: 0 1px 2px rgba(22, 22, 78, 0.04);
}

/* Segmented control — a pale-blue track holding a floating active pill,
   stretched full-width with each tab taking half. */
.contact__tabs {
  display: flex;
  gap: var(--sp-1);
  padding: var(--sp-1);
  background: var(--pale-blue-bg);
  border-radius: var(--radius-sm);
  margin-bottom: var(--sp-6);
}

.contact__tab {
  flex: 1;
  padding: 10px 28px;
  border: none;
  background: transparent;
  border-radius: var(--radius-xs);
  font-size: var(--text-body2);
  font-weight: 600;
  color: var(--medium-slate);
  transition: background 0.15s ease, color 0.15s ease;
}

.contact__tab.is-active {
  background: var(--white);
  color: var(--cobalt);
}

/* Suppress the mouse-click focus ring, keep a keyboard-only focus outline. */
.contact__tab:focus {
  outline: none;
}

.contact__tab:focus-visible {
  outline: 2px solid var(--cobalt);
  outline-offset: 2px;
}

.contact__service-tag {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 10px 14px;
  margin-bottom: var(--sp-5);
  background: var(--pale-blue-bg);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--cobalt);
}

.contact__form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.contact__field label {
  display: block;
  margin-bottom: var(--sp-2);
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--black);
}

.contact__req {
  color: var(--error);
}

.contact__field input {
  width: 100%;
  height: 44px;
  padding: 12px 16px;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--black);
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xs);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.contact__field input::placeholder {
  color: var(--medium-gray);
}

.contact__field input:focus {
  outline: none;
  border-color: var(--cobalt);
  box-shadow: 0 0 0 3px rgba(44, 111, 242, 0.1);
}

.contact__field.is-error input {
  border-color: var(--error);
  box-shadow: 0 0 0 3px rgba(184, 66, 66, 0.1);
}

.contact__error {
  margin-top: var(--sp-2);
  font-size: var(--text-body3);
  color: var(--error);
}

.contact__submit {
  width: 100%;
  margin-top: var(--sp-2);
}

.contact__submit:disabled {
  background: var(--medium-gray);
  cursor: not-allowed;
  box-shadow: none;
}

/* --- Success state --- */
.contact__success {
  text-align: center;
  padding: var(--sp-8) var(--sp-4);
}

.contact__success-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto var(--sp-5);
  display: grid;
  place-items: center;
  color: var(--success-text);
  background: var(--success-bg);
  border-radius: 50%;
}

.contact__success-icon svg {
  width: 30px;
  height: 30px;
}

.contact__success h3 {
  font-size: 20px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: var(--sp-3);
}

.contact__success p {
  font-size: var(--text-body1);
  line-height: 1.7;
  color: var(--slate);
  margin-bottom: var(--sp-6);
}

@media (max-width: 1023px) {
  .contact__inner {
    grid-template-columns: 1fr;
    gap: var(--sp-10);
  }
  /* Scale the subtitle down with the section title (32px here) so it stays a
     clear step below the heading instead of matching its size. */
  .contact__subtitle {
    font-size: 22px;
  }
}

@media (max-width: 639px) {
  .contact__card {
    padding: var(--sp-6);
  }
}

/* ============================================================
   Footer
   ============================================================ */

.footer {
  background: var(--navy-slate);
  color: rgba(255, 255, 255, 0.7);
  padding-top: var(--sp-20);
}

.footer__inner {
  display: grid;
  /* brand takes the remaining space; the link groups hug their content and
     sit flush to the container's right edge (aligning with the legal row). */
  grid-template-columns: 1fr auto;
  gap: var(--sp-12);
}

/* .footer__inner also carries .container (padding: 0 80px), so the vertical
   padding must be scoped to .site to beat that selector's specificity. */
.site .footer__inner {
  padding-bottom: var(--sp-12);
}

.footer__logo {
  /* inline-flex so the reveal animation's translateY applies and the brand
     mark aligns with the wordmark */
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--white);
}

/* Brand mark: same cobalt as the ".ONE" accent. */
.footer__logo-mark {
  height: 28px;
  width: auto;
  color: var(--cobalt);
}

.footer__logo-dot {
  color: var(--white);
}

.footer__logo-one {
  color: var(--cobalt);
}

.footer__tagline {
  margin-top: var(--sp-4);
  max-width: 30em;
  font-size: var(--text-body1);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.75);
}

.footer__groups {
  display: grid;
  grid-template-columns: auto auto;
  gap: var(--sp-12);
  justify-content: end;
}

.footer__group-title {
  font-family: var(--font-mono);
  font-size: var(--text-body3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: var(--sp-4);
}

.footer__group ul {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.footer__group a {
  font-size: var(--text-body3);
  color: rgba(255, 255, 255, 0.82);
  transition: color 0.15s ease;
}

.footer__group a:hover {
  color: var(--white);
}

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-6) 0 var(--sp-12);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 14px;
  color: rgba(255, 255, 255, 0.68);
}

.footer__legal {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.footer__legal a {
  color: rgba(255, 255, 255, 0.78);
  transition: color 0.15s ease;
}

.footer__legal a:hover {
  color: var(--white);
}

@media (max-width: 767px) {
  .footer__inner {
    grid-template-columns: 1fr;
    gap: var(--sp-10);
  }
  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}