/* ============================================================
   BERCOR FLOW — V5
   Light/white card-grid layout per designer references.
   - Dark hero, soft warm card-grid body
   - Big bold sans-serif headlines, green-highlighted key words
   - Glassmorphic mockups inside rounded cards
   - Numbered section badges
   ============================================================ */

:root {
  --green: #00a86b;          /* primary brand */
  --green-deep: #006b3f;
  --green-soft: #e6f7ed;
  --green-glow: rgba(0,168,107,0.35);
  --green-bright: #2dd07a;
  --emerald: #102A24;
  --obsidian: #0a1614;

  --bg: #f5f7f3;             /* warm off-white page background */
  --bg-card: #ffffff;
  --ink: #0d1f17;
  --ink-2: #1c2024;
  --muted: #5a6660;
  --muted-2: #8a948f;
  --line: #e4e8e2;
  --line-2: #d5dcd3;

  /* Per-section accent colors (from references) */
  --c-engine: #00a86b;       /* green */
  --c-accounts: #00a86b;     /* green */
  --c-pay: #7c5cd9;          /* purple */
  --c-pay-2: #c97cd0;        /* pink */
  --c-gateway: #1f6feb;      /* blue */
  --c-treasury: #f0a830;     /* gold */
  --c-security: #00a86b;     /* green */

  --radius: 20px;
  --radius-lg: 28px;
  --radius-sm: 12px;
  --shadow-sm: 0 1px 3px rgba(13,31,23,0.04), 0 4px 12px rgba(13,31,23,0.04);
  --shadow-md: 0 8px 30px rgba(13,31,23,0.08);
  --shadow-lg: 0 20px 60px rgba(13,31,23,0.12);

  --max: 1280px;
  --gutter: clamp(20px, 4vw, 56px);
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: "Inter", -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
  font-feature-settings: "ss01", "cv01";
}
img { max-width: 100%; display: block; }
/* Default SVG sizing for icon containers — prevents 100% blowout */
.btn .icon svg, .icon-circle svg, .live-stat .ic svg,
.sec-item .ic svg, .vault-shield .ic svg, .vault-icon svg,
.dp-nav-item svg, .dp-activity .ic svg, .vt-icon svg, .ct-row svg,
.cs-card svg, .vd-timer .ic svg, .da-row .ic svg,
.swap-meta svg, .qr-pay .ic svg, .sec-layer .ic svg,
.sim-result .sr-ic svg, .hp-action .ic svg,
.fee-node .ic svg, .fw-node .ic svg {
  width: 100%; height: 100%;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
::selection { background: var(--green); color: #fff; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* ============ HEADER ============ */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(245,247,243,0.85);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid rgba(13,31,23,0.06);
}
.nav {
  display: flex; align-items: center; justify-content: space-between;
  height: 76px; gap: 24px;
}
.brand { display: flex; align-items: center; text-decoration: none; }
.brand-logo { height: 32px; width: auto; display: block; }

.nav-menu {
  display: flex; align-items: center; gap: 4px;
  list-style: none;
}
.nav-menu > li { position: relative; }
.nav-menu > li > a, .nav-menu > li > button {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 14px; font-weight: 500; font-size: 14px;
  color: var(--ink-2);
  border-radius: 10px; transition: background .15s, color .15s;
}
.nav-menu > li > a:hover, .nav-menu > li > button:hover {
  background: rgba(13,31,23,0.04); color: var(--green);
}
.nav-menu .caret { width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translate(-2px,-2px); opacity: .6; }

.dropdown {
  position: absolute; top: calc(100% + 6px); left: 0;
  background: #fff; border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  min-width: 280px; padding: 10px;
  opacity: 0; pointer-events: none; transform: translateY(-4px);
  transition: opacity .2s, transform .2s;
}
.nav-menu li:hover .dropdown,
.nav-menu li:focus-within .dropdown { opacity: 1; pointer-events: auto; transform: translateY(0); }
.dropdown a {
  display: block; padding: 12px 14px; font-size: 14px; color: var(--ink-2);
  border-radius: 8px;
  transition: background .15s, color .15s;
}
.dropdown a:hover { background: var(--green-soft); color: var(--green-deep); }
.dropdown a small { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; font-weight: 400; }

.nav-cta { display: flex; align-items: center; gap: 12px; }
.nav-cta .btn-ghost { padding: 9px 4px; font-size: 14px; font-weight: 500; color: var(--ink-2); }
.nav-cta .btn-ghost:hover { color: var(--green); }

.menu-toggle {
  display: none; width: 40px; height: 40px;
  align-items: center; justify-content: center;
}
.menu-toggle span { display: block; width: 22px; height: 2px; background: var(--ink); position: relative; }
.menu-toggle span::before, .menu-toggle span::after {
  content: ""; position: absolute; left: 0; width: 22px; height: 2px; background: var(--ink);
}
.menu-toggle span::before { top: -7px; }
.menu-toggle span::after { top: 7px; }

/* ============ BUTTONS ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 22px; font-size: 14px; font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: 999px;
  transition: background .2s, color .2s, transform .2s, box-shadow .2s;
  white-space: nowrap;
  position: relative; overflow: hidden; isolation: isolate;
}
.btn-primary {
  background: var(--green); color: #fff;
  box-shadow: 0 6px 20px var(--green-glow);
}
.btn-primary:hover { background: var(--green-deep); transform: translateY(-1px); box-shadow: 0 10px 28px var(--green-glow); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #1a2e22; transform: translateY(-1px); }
.btn-outline {
  background: #fff; color: var(--ink); border: 1px solid var(--line-2);
}
.btn-outline:hover { background: var(--bg); border-color: var(--ink-2); }
.btn-line {
  background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.3);
}
.btn-line:hover { background: rgba(255,255,255,0.1); border-color: #fff; }

.btn .arr { display: inline-block; transition: transform .25s; font-size: 13px; }
.btn:hover .arr { transform: translateX(4px); }
.btn .icon { display: inline-flex; align-items: center; }
.btn .icon svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Ripple effect on hover */
.btn::after {
  content: "";
  position: absolute;
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,0.4);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  pointer-events: none;
  z-index: -1;
}
.btn:hover::after { animation: ripple 0.7s ease-out; }
.btn-outline::after { background: rgba(0,168,107,0.2); }
@keyframes ripple {
  0%   { transform: translate(-50%, -50%) scale(0); opacity: 0.8; }
  100% { transform: translate(-50%, -50%) scale(40); opacity: 0; }
}

/* ============ SECTION BADGE ============ */
.section-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 14px;
}
.section-badge .num {
  display: inline-grid; place-items: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--green); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: 0;
}
.section-badge.purple .num { background: var(--c-pay); }
.section-badge.blue .num { background: var(--c-gateway); }
.section-badge.gold .num { background: var(--c-treasury); }

/* ============ HERO ============ */
.hero {
  position: relative; overflow: hidden;
  background: radial-gradient(ellipse at top, var(--emerald) 0%, var(--obsidian) 80%);
  color: #fff;
  padding: 64px 0 88px;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  isolation: isolate;
}

/* Glowing data streams behind hero */
.hero-glow {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 0;
}
.hero-glow::before {
  content: ""; position: absolute;
  width: 700px; height: 700px;
  top: -100px; right: -120px;
  background: radial-gradient(circle, rgba(45,208,122,0.4) 0%, transparent 60%);
  filter: blur(20px);
  animation: glow-pulse 6s ease-in-out infinite;
}
.hero-glow::after {
  content: ""; position: absolute;
  width: 500px; height: 500px;
  bottom: -80px; left: -100px;
  background: radial-gradient(circle, rgba(0,168,107,0.25) 0%, transparent 70%);
  filter: blur(30px);
  animation: glow-pulse 8s ease-in-out infinite 2s;
}
@keyframes glow-pulse {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}

.hero-datalines {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 1;
  overflow: hidden;
}
.hero-datalines svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.dataline {
  fill: none; stroke-width: 1; stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(45,208,122,0.6));
  animation: dl-flow linear infinite;
}
.dataline.l1 { stroke: rgba(45,208,122,0.7); stroke-dasharray: 12 280; animation-duration: 9s; }
.dataline.l2 { stroke: rgba(0,168,107,0.6); stroke-dasharray: 8 320; animation-duration: 11s; animation-delay: -3s; }
.dataline.l3 { stroke: rgba(45,208,122,0.5); stroke-dasharray: 16 220; animation-duration: 13s; animation-delay: -6s; }
.dataline.l4 { stroke: rgba(0,168,107,0.45); stroke-dasharray: 6 360; animation-duration: 15s; animation-delay: -1s; }
@keyframes dl-flow {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -1200; }
}

.hero-grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px;
  align-items: center;
}
.hero h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(40px, 6.6vw, 76px);
  line-height: 1.02; letter-spacing: -0.025em;
  text-transform: uppercase;
  margin-bottom: 22px;
}
.hero h1 .accent { color: var(--green-bright); }
.hero p.lead {
  font-size: clamp(15px, 1.4vw, 17px);
  color: rgba(255,255,255,0.78);
  max-width: 480px; line-height: 1.55;
  margin-bottom: 28px;
}
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

.hero-trust {
  display: flex; align-items: center; gap: 14px;
  margin-top: 32px;
}
.hero-trust .avatars { display: flex; }
.hero-trust .avatar {
  width: 32px; height: 32px; border-radius: 50%;
  border: 2px solid var(--obsidian);
  margin-left: -8px;
  background: linear-gradient(135deg, #2dd07a, #00a86b);
  flex-shrink: 0;
}
.hero-trust .avatar:first-child { margin-left: 0; }
.hero-trust .avatar:nth-child(2) { background: linear-gradient(135deg, #7c5cd9, #c97cd0); }
.hero-trust .avatar:nth-child(3) { background: linear-gradient(135deg, #f0a830, #e8743a); }
.hero-trust .stars { color: #ffd451; font-size: 14px; letter-spacing: 1px; }
.hero-trust .stars-text { font-size: 12px; color: rgba(255,255,255,0.65); margin-top: 2px; }

/* ============ SEPARATOR (single-line quote bar) ============ */
.separator {
  padding: 28px 0;
}
.separator-card {
  background: #fff;
  border-radius: var(--radius);
  padding: 18px 28px;
  box-shadow: var(--shadow-sm);
  display: flex; align-items: center; gap: 14px;
  font-size: 14px; color: var(--ink-2);
}
.separator-card .dot {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--green-soft); color: var(--green-deep);
  display: grid; place-items: center; font-weight: 700;
  flex-shrink: 0;
}

/* ============ CARD GRID (master container) ============ */
.card-grid-section { padding: 24px 0 80px; }
.card-grid {
  display: grid; gap: 20px;
}
.card-grid.cols-3 { grid-template-columns: 1.2fr 1fr 1.1fr; }
.card-grid.cols-2 { grid-template-columns: 1fr 1fr; }
.card-grid.cols-2-3-3 { grid-template-columns: 1.4fr 1fr 1fr; }

/* Master card */
.card {
  background: #fff;
  border-radius: var(--radius);
  padding: 32px;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
  display: flex; flex-direction: column;
  min-height: 360px;
  transition: transform .25s, box-shadow .25s;
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

.card .card-text { position: relative; z-index: 1; }
.card h2, .card h3 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ink);
  margin-bottom: 12px;
}
.card h2 { font-size: clamp(22px, 2.4vw, 28px); }
.card h3 { font-size: 18px; }
.card .accent { color: var(--green); }
.card p {
  font-size: 14px; color: var(--muted);
  line-height: 1.6; margin-bottom: 12px;
}
.card .micro {
  font-size: 13px; color: var(--ink-2);
  margin-top: 8px;
}

.card-cta {
  margin-top: auto; padding-top: 18px;
  display: inline-flex; align-items: center;
}
.card .btn { font-size: 13px; padding: 10px 18px; }
.card-visual-wrap {
  margin-top: 18px; flex: 1;
  position: relative; min-height: 180px;
}

/* Per-card accent variants */
.card.purple .section-badge .num { background: var(--c-pay); }
.card.purple .accent { color: var(--c-pay); }
.card.purple .btn-primary { background: var(--c-pay); box-shadow: 0 6px 20px rgba(124,92,217,0.3); }
.card.purple .btn-primary:hover { background: #6845c4; }

.card.blue .section-badge .num { background: var(--c-gateway); }
.card.blue .accent { color: var(--c-gateway); }
.card.blue .btn-primary { background: var(--c-gateway); box-shadow: 0 6px 20px rgba(31,111,235,0.3); }
.card.blue .btn-primary:hover { background: #1859c4; }

.card.gold .section-badge .num { background: var(--c-treasury); }
.card.gold .accent { color: var(--c-treasury); }
.card.gold .btn-primary { background: var(--c-treasury); box-shadow: 0 6px 20px rgba(240,168,48,0.3); }
.card.gold .btn-primary:hover { background: #d8932a; }

/* Wide card spanning full width */
.card.wide { grid-column: 1 / -1; }

/* ============ SECTION HEADINGS ============ */
.section-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.05; letter-spacing: -0.025em;
  margin-bottom: 14px;
  color: var(--ink);
}
.section-title .accent { color: var(--green); }

/* ============ COMPARISON TABLE ============ */
.compare-card {
  background: #fff;
  border-radius: var(--radius);
  padding: 32px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.compare-table {
  width: 100%; border-collapse: collapse;
  font-size: 14px;
  margin-top: 20px;
}
.compare-table th, .compare-table td {
  padding: 14px 16px; text-align: left;
  border-bottom: 1px solid var(--line);
}
.compare-table thead th {
  font-weight: 700; color: var(--ink); font-size: 13px;
  background: transparent;
  border-bottom: 1px solid var(--line-2);
}
.compare-table thead th .icon-circle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; margin-right: 8px;
  vertical-align: -4px;
}
.compare-table thead th.ours {
  background: var(--green-soft);
  color: var(--green-deep);
  border-radius: 12px 12px 0 0;
  position: relative;
}
.compare-table thead th.ours::before {
  content: ""; position: absolute; inset: 0;
  border: 2px solid var(--green);
  border-radius: 12px 12px 0 0; pointer-events: none;
}
.compare-table tbody th {
  font-weight: 600; color: var(--ink); font-size: 14px;
}
.compare-table tbody th .icon-circle { margin-right: 8px; vertical-align: -4px; }
.compare-table tbody td { color: var(--muted); }
.compare-table tbody td.ours {
  background: rgba(0,168,107,0.04);
  color: var(--green-deep); font-weight: 600;
  border-left: 2px solid var(--green);
  border-right: 2px solid var(--green);
}
.compare-table tr:last-child td.ours, .compare-table tr:last-child th.ours {
  border-bottom: 2px solid var(--green);
  border-radius: 0 0 12px 12px;
}
.compare-table .check {
  display: inline-block; width: 16px; height: 16px;
  margin-left: 6px; vertical-align: -3px;
  color: var(--green);
}
.compare-table .x-mark { color: #d44; }
.compare-table .crown {
  display: inline-block; vertical-align: middle;
  margin-left: 8px;
  width: 22px; height: 22px;
  background: linear-gradient(135deg, #ffd451, #f0a830);
  border-radius: 50%;
  position: relative;
}
.compare-table .crown::after {
  content: "★"; position: absolute; inset: 0;
  display: grid; place-items: center;
  color: #fff; font-size: 12px;
}
.icon-circle {
  display: inline-grid; place-items: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--green-soft);
  flex-shrink: 0;
}
.icon-circle svg { width: 12px; height: 12px; stroke: var(--green-deep); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Mobile card-stack rendering of the comparison table (hidden on desktop). */
.compare-stack { display: none; }
@media (max-width: 720px) {
  .compare-table { display: none; }
  .compare-stack {
    display: flex; flex-direction: column; gap: 16px;
    margin-top: 16px;
  }
  .cs-row {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 16px;
  }
  .cs-feature {
    display: flex; align-items: center; gap: 8px;
    font-size: 14px; font-weight: 700; color: var(--ink);
    padding-bottom: 12px; margin-bottom: 10px;
    border-bottom: 1px solid var(--line);
  }
  .cs-cell {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 8px 0;
    font-size: 13px;
  }
  .cs-cell .cs-lbl { color: var(--muted); flex-shrink: 0; }
  .cs-cell .cs-val { color: var(--ink-2); font-weight: 500; text-align: right; }
  .cs-cell.ours {
    background: rgba(0,168,107,0.06);
    border-left: 3px solid var(--green);
    border-radius: 8px;
    padding: 10px 12px;
    margin-top: 6px;
  }
  .cs-cell.ours .cs-lbl { color: var(--green-deep); font-weight: 600; }
  .cs-cell.ours .cs-val { color: var(--green-deep); font-weight: 700; }
}

/* ============ FOOTER ============ */
.site-footer {
  background: #fff;
  border-top: 1px solid var(--line);
  padding: 32px 0;
  margin-top: 40px;
}
.footer-row {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 20px;
}
.footer-brand { display: flex; align-items: center; gap: 16px; }
.footer-brand img { height: 32px; width: auto; }
.footer-brand p { font-size: 14px; color: var(--muted); }
.footer-links { display: flex; gap: 28px; font-size: 14px; }
.footer-links a { color: var(--ink-2); }
.footer-links a:hover { color: var(--green); }
.footer-socials { display: flex; gap: 8px; }
.footer-socials a {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--bg); color: var(--muted);
  transition: background .15s, color .15s;
}
.footer-socials a:hover { background: var(--green); color: #fff; }
.footer-socials svg { width: 14px; height: 14px; }

/* Mobile nav Sign-In CTA (injected as first <li> of .nav-menu).
   Hidden on desktop; revealed when .nav-menu.is-open at mobile breakpoint. */
.nav-cta-mobile { display: none; }

/* ============ RESPONSIVE ============ */
@media (max-width: 1024px) {
  .card-grid.cols-3, .card-grid.cols-2-3-3 { grid-template-columns: 1fr 1fr; }
  .card { min-height: 320px; padding: 24px; }
  .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .hero-visual { margin: 0 auto; }
  /* NAV → hamburger */
  .nav-menu, .nav-cta .btn-ghost { display: none; }
  .menu-toggle { display: flex; }
  .nav-menu.is-open {
    display: flex; position: absolute; top: 76px; left: 0; right: 0;
    background: #fff; border-bottom: 1px solid var(--line);
    flex-direction: column; align-items: stretch; padding: 16px var(--gutter); gap: 4px;
  }
  .nav-menu.is-open .dropdown { position: static; opacity: 1; pointer-events: auto; transform: none; box-shadow: none; border: 0; padding: 0 0 0 12px; }
  .nav-menu.is-open .nav-cta-mobile {
    display: flex; flex-direction: column;
    padding: 4px 0 16px; margin-bottom: 12px;
    border-bottom: 1px solid var(--line);
  }
  .nav-menu.is-open .nav-cta-mobile .btn { width: 100%; justify-content: center; }
}
@media (max-width: 720px) {
  .hero { padding: 48px 0 64px; }
  .card-grid.cols-3, .card-grid.cols-2, .card-grid.cols-2-3-3 { grid-template-columns: 1fr; }
  .footer-row { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .dataline, .hero-glow::before, .hero-glow::after { animation: none !important; }
}

/* ============ SCROLL REVEAL ============ */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

/* ============================================================
   TREASURY YIELD — HERO GRID (replaces absolute composition)
   3-row × 2-col layout: live yield large + 4 small cards + 2 brand marks.
   Self-contained, no overlap, scales cleanly.
   ============================================================ */
.ty-hero-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  grid-template-rows: auto auto auto;
  gap: 12px;
  min-height: 340px;
}
.ty-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ty-card-yield {
  grid-row: 1;
  background: linear-gradient(135deg, rgba(45,208,122,0.12), rgba(45,208,122,0.04));
  border-color: rgba(45,208,122,0.3);
  padding: 18px;
}
.ty-hero-grid > .ty-card:nth-of-type(2) { grid-column: 2; grid-row: 1; }
.ty-hero-grid > .ty-card:nth-of-type(3) { grid-column: 1; grid-row: 2; }
.ty-hero-grid > .ty-card:nth-of-type(4) { grid-column: 2; grid-row: 2; }
.ty-card-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 6px;
}
.ty-card-title { font-size: 12px; font-weight: 600; color: var(--ink); }
.ty-pill {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--green-soft); color: var(--green-deep);
  padding: 3px 8px; border-radius: 999px;
  font-size: 10px; font-weight: 600;
}
.ty-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.ty-card-label { font-size: 11px; color: var(--muted); margin-bottom: 2px; }
.ty-card-value { font-size: 18px; font-weight: 800; color: var(--ink); }
.ty-card-value-lg {
  font-size: clamp(22px, 2.8vw, 30px); font-weight: 800;
  color: var(--green-deep); letter-spacing: -0.02em;
}
.ty-card-value-xl {
  font-size: clamp(24px, 3vw, 32px); font-weight: 800;
  color: var(--green-deep); letter-spacing: -0.03em; line-height: 1;
}
.ty-card-delta { font-size: 11px; color: var(--green-deep); margin-top: 4px; }
.ty-card-sub { font-size: 10px; color: var(--muted); margin-top: 2px; }
.ty-mark {
  grid-row: 3;
  display: flex; align-items: center; gap: 8px;
  padding: 6px 4px;
}
.ty-mark-right { justify-content: flex-end; }
.ty-mark-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.05em;
  color: var(--green-deep);
}
.ty-hex {
  width: 44px; height: 44px;
  background: linear-gradient(135deg, #2dd07a, #00a86b);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  display: grid; place-items: center;
  color: #fff; font-weight: 800; font-size: 18px;
}
.ty-bank {
  width: 44px; height: 44px;
  background: rgba(45,208,122,0.08);
  border: 2px solid var(--green);
  border-radius: 10px;
  display: grid; place-items: center;
  color: var(--green-deep); font-size: 22px;
}
@media (max-width: 720px) {
  .ty-hero-grid {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .ty-hero-grid > .ty-card:nth-of-type(2),
  .ty-hero-grid > .ty-card:nth-of-type(3),
  .ty-hero-grid > .ty-card:nth-of-type(4) {
    grid-column: 1; grid-row: auto;
  }
  .ty-mark { grid-row: auto; }
  .ty-mark-right { justify-content: flex-start; }
}

/* ============================================================
   SUB-PAGE MOBILE RESPONSIVE OVERRIDES
   The 6 product sub-pages use inline-styled grids on hero cards
   (style="display:grid;grid-template-columns:1.1fr 1fr;…") that
   don't carry classes for CSS to target. We use attribute
   selectors to catch them generically, plus targeted fixes for
   positioned mockup overlays that don't reflow on mobile.
   Homepage already has its own responsive rules and is unaffected.
   ============================================================ */
@media (max-width: 1024px) {
  /* Inline grid layouts inside sub-page hero cards → stack */
  .card-grid-section > .wrap > .card > div[style*="grid-template-columns"],
  .card-grid-section .card > div[style*="grid-template-columns:1.1fr"],
  .card-grid-section .card > div[style*="grid-template-columns:1fr 1.1fr"],
  .card-grid-section .card > div[style*="grid-template-columns:1fr 1.2fr"],
  .card-grid-section .card > div[style*="grid-template-columns:1fr 1.3fr"],
  .card-grid-section .card > div[style*="grid-template-columns:1fr 1fr 240px"],
  .card-grid-section .card > div[style*="grid-template-columns:1fr 1.1fr 0.9fr"] {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  /* Inline final-CTA-card 3-col grids (flow-engine, treasury) → stack */
  .card-grid-section .card[style*="grid-template-columns:1fr 1fr 1fr"],
  .card-grid-section .card[style*="grid-template-columns:1fr 1.4fr"],
  .card-grid-section .card[style*="grid-template-columns:1fr 1.5fr"] {
    grid-template-columns: 1fr !important;
  }
  /* Inline 4-col grids (asset-gateway bank logos, security pillars) → 2-col */
  .card-visual-wrap div[style*="grid-template-columns:repeat(4"],
  .card div[style*="grid-template-columns:repeat(4"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
}

@media (max-width: 720px) {
  /* Hero card padding tightens on mobile */
  .card-grid-section .card[style*="padding:36px"],
  .card-grid-section .card[style*="padding:32px"] {
    padding: 20px !important;
  }
  /* All inline grids collapse fully */
  .card-grid-section div[style*="grid-template-columns"]:not(.live-ticker):not(.section-badge) {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  /* Inline 4-col grids → 1-col on phone */
  .card-visual-wrap div[style*="grid-template-columns:repeat(4"],
  .card div[style*="grid-template-columns:repeat(4"] {
    grid-template-columns: 1fr !important;
  }
  /* Live ticker on global-accounts: wrap properly, smaller text */
  .live-ticker {
    flex-wrap: wrap;
    white-space: normal;
    gap: 10px;
    font-size: 11px;
    border-radius: 14px;
    padding: 10px 14px;
  }
  .live-ticker .ok { margin-left: 0; }

  /* Positioned mockup overlays — hide or reflow at narrow viewports */
  .live-stats { display: none !important; }
  .eg-shield { width: 32px !important; height: 38px !important; top: 10px !important; right: 10px !important; }
  .eg-locked { position: static !important; margin-top: 8px; display: inline-flex; }
  .execution-guard { height: auto !important; min-height: 160px; }

  /* Sub-page hero h2 — sub-pages use inline font-size which is fine,
     but if any forgets clamp the rule below caps it */
  .card > div h2[style*="font-size"] {
    font-size: clamp(24px, 6vw, 36px) !important;
    line-height: 1.1 !important;
  }

  /* Velocity timeline (bercor-pay, also used elsewhere) — full reflow */
  .vt-item {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    padding-left: 4px;
  }
  .vt-icon { width: 36px; height: 36px; border-radius: 8px; }
  .vt-status { grid-column: 1; justify-self: start; }

  /* Daily-velocity vd-row (global-accounts) — stack vaults */
  .vd-row { flex-direction: column; gap: 10px; }
  .vd-streak { transform: rotate(90deg); }
  .vd-streak::before, .vd-streak::after { display: none; }

  /* Hex reactor + portal — cap size to avoid eating the whole viewport */
  .hex-reactor, .portal-graphic { max-width: 220px; margin: 0 auto; }

  /* Asset Gateway double-arrow row wraps */
  .da-row { flex-wrap: wrap; gap: 8px; }
  .da-row .left { width: 100%; }

  /* Security credential badges (positioned absolutely) — hide on mobile */
  .card div[style*="position:absolute"][style*="credential"],
  .card div[style*="position: absolute"][style*="credential"] {
    position: static !important;
    margin-top: 8px;
    display: inline-flex;
  }

  /* Vault schematic (global-accounts security) — already collapses at 1024,
     ensure shields breathe */
  .vault-shields { gap: 6px; }
  .vault-icon { max-width: 200px; margin: 0 auto; }

  /* Rebalance chart (treasury) — bars stay readable */
  .rb-bars { gap: 14px; height: 80px; }
  .rb-bar { width: 12px; }

  /* Yield simulator (treasury) padding shrinks */
  .yield-sim { padding: 18px; }
  .sim-result { padding: 12px; }

  /* Sub-page CTA band — already 1fr at 720 via styles-mockups.css,
     but inline-styled CTA grids in flow-engine/treasury final blocks
     are caught by the generic rule above */

  /* Schematic step font tightens */
  .schematic-step { padding: 18px 14px; }
  .schematic-step h4 { font-size: 14px; }

  /* QR pay bubble on bercor-pay — keep inside frame */
  .qr-pay-bubble { right: 0; width: 92px; font-size: 8px; }

  /* Sub-page hero visuals: rely on the partial-hide rule in styles-mockups.css
     (.satellite.sgd, .satellite.btc, .satellite.eur { display: none }) so a
     couple of currency satellites still orbit the card on mobile. */

  /* Security Trust hero — credential badges (white pills positioned around SVG)
     escape their container on mobile. Convert to inline flow below the SVG. */
  .card-grid-section .card div[style*="position:absolute;top:10%;left:10%"],
  .card-grid-section .card div[style*="position:absolute;top:30%;right:5%"],
  .card-grid-section .card div[style*="position:absolute;bottom:25%;left:5%"],
  .card-grid-section .card div[style*="position:absolute;bottom:10%;right:10%"] {
    position: static !important;
    inset: auto !important;
    display: inline-flex !important;
    margin: 4px 6px 0 0 !important;
  }

  /* Treasury Yield hero — multi-card composition that doesn't reflow cleanly.
     The visual column on mobile becomes too dense; cap container height and
     allow overflow scroll so it doesn't push the page. */
  .card-grid-section .card > div[style*="grid-template-columns:1.1fr 1.3fr"] > div:last-child,
  .card-grid-section .card > div[style*="grid-template-columns:1.1fr 1fr"] > div:last-child[style*="position:relative"],
  .card-grid-section .card > div[style*="grid-template-columns:1fr 1.1fr 0.9fr"] > div[style*="position:relative"] {
    max-height: 360px;
    overflow: hidden;
    border-radius: 12px;
  }

  /* Bercor Pay phone composition — currency badges around phone — shrink
     so the whole composition stays inside its column. */
  .card-grid-section .card div[style*="position:absolute;left:0;top:30%;width:36px"],
  .card-grid-section .card div[style*="position:absolute;left:6%;bottom:20%;width:36px"],
  .card-grid-section .card div[style*="position:absolute;right:-20px;top:50%"] {
    transform: scale(0.75) !important;
  }
}

/* ============================================================
   LANGUAGE SWITCHER
   ============================================================ */
.lang-switcher {
  position: relative;
  display: inline-flex;
}
.lang-trigger {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px;
  font-size: 13px; font-weight: 500;
  color: var(--ink-2);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  font-family: inherit;
}
.lang-trigger:hover {
  background: rgba(13,31,23,0.05);
  color: var(--green-deep);
}
.lang-trigger svg { opacity: 0.6; flex-shrink: 0; }
.lang-current { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.05em; }
.lang-caret { font-size: 9px; opacity: 0.5; }

.lang-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  min-width: 220px;
  padding: 8px;
  display: none;
  z-index: 200;
}
.lang-switcher.is-open .lang-dropdown {
  display: block;
}
.lang-switcher.is-open .lang-trigger {
  background: rgba(13,31,23,0.05);
  border-color: var(--line);
}

.lang-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 12px;
  font-size: 13px;
  color: var(--ink-2);
  border-radius: 8px;
  text-decoration: none;
  transition: background .15s, color .15s;
  cursor: pointer;
}
.lang-item:hover {
  background: var(--green-soft);
  color: var(--green-deep);
}
.lang-item.active {
  background: var(--green-soft);
  color: var(--green-deep);
  font-weight: 600;
}
.lang-item.disabled {
  color: var(--muted-2);
  cursor: not-allowed;
  pointer-events: none;
}
.lang-item.disabled .lang-code::after {
  content: " · soon";
  font-style: italic;
  font-size: 10px;
  opacity: 0.6;
}
.lang-native {
  font-size: 13px;
}
.lang-code {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.05em;
}
.lang-item:hover .lang-code,
.lang-item.active .lang-code {
  color: var(--green-deep);
  opacity: 0.7;
}

@media (max-width: 720px) {
  .lang-trigger { padding: 8px 10px; }
  .lang-current { display: none; }
  .lang-dropdown { right: 0; min-width: 200px; }
}