/* ==========================================================================
   Intelligence Designed To Evolve — single-viewport, full-bleed video landing
   ========================================================================== */

/* Display face: Be Vietnam Pro (local, full Vietnamese) with Playfair Display
   (Google Fonts, vietnamese subset) for the italic accent line. Chinese glyphs
   fall back to Noto Sans SC, which i18n.js loads from Google Fonts on demand. */

:root {
  --bg: #000000;
  --text: #ffffff;
  --muted: #8e8e8e;
  --nav-text: #2e2e2e;
  --pill-dark: #2a2829;
  --sign-in-text: #c8c8c8;
  --nav-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
  --trust-bg: #2a2829;
  --trust-border: rgba(255, 255, 255, 0.4);
  --trust-text: #c4c2c3;
  --font-sans: "Inter", "Segoe UI", system-ui, sans-serif;
  --font-display: "Be Vietnam Pro", "Noto Sans SC", sans-serif;
  --font-accent: "Playfair Display", "Noto Sans SC", Georgia, serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

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

/* ==========================================================================
   Background video
   ========================================================================== */

.bg {
  position: absolute;
  inset: 0;
  background: #000;
  overflow: hidden;
}

.bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  z-index: 0;
}

/* ==========================================================================
   Page shell — three stacked regions inside one viewport
   ========================================================================== */

.page {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  padding: clamp(16px, 2.4vh, 28px) clamp(14px, 3vw, 32px);
}

.header,
.hero,
.stats {
  position: relative;
  z-index: 1;
  width: 100%;
}

/* ==========================================================================
   1. Header
   ========================================================================== */

.header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 2.8vw, 28px);
  max-width: 720px;
  margin: 0 auto;
  animation: slideDown 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* -- logo ------------------------------------------------------------------ */

.logo {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: clamp(40px, 4.4vw, 46px);
  height: clamp(40px, 4.4vw, 46px);
  background: #fff;
  border-radius: 50%;
  box-shadow: var(--nav-shadow);
  transition: transform 0.25s ease;
}

.logo img {
  /* The circle keeps its size; the mark sits at 72% inside it. */
  width: 72%;
  height: 72%;
  object-fit: contain;
  display: block;
}

.logo:hover {
  transform: scale(1.04);
}

/* -- nav pill -------------------------------------------------------------- */

.nav {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 430px;
  height: clamp(44px, 5.2vw, 48px);
  padding: 4px 8px;
  background: #fff;
  border-radius: 999px;
  box-shadow: var(--nav-shadow);
}

.nav-link {
  position: relative;
  /* Stretch to the pill's inner height so the active dots sit *below* the
     label rather than on top of it. */
  display: inline-flex;
  align-items: center;
  align-self: stretch;
  padding: 0 clamp(8px, 1.4vw, 14px);
  color: var(--nav-text);
  font-size: clamp(13px, 1.4vw, 15px);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1;
  opacity: 0.5;
  transition: opacity 0.2s ease;
}

.nav-link:hover {
  opacity: 0.75;
}

.nav-link.is-active {
  opacity: 1;
}

/* Three 3x3 dots under the active label, drawn from one element. */
.nav-link.is-active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 5px;
  width: 3px;
  height: 3px;
  margin-left: -1.5px;
  background: #000;
  box-shadow: -5px 0 0 #000, 5px 0 0 #000;
}

/* -- sign in --------------------------------------------------------------- */

.sign-in {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  height: clamp(44px, 5.2vw, 48px);
  padding: 0 clamp(16px, 2vw, 22px);
  background: var(--pill-dark);
  color: var(--sign-in-text);
  font-size: clamp(13px, 1.4vw, 15px);
  font-weight: 500;
  letter-spacing: -0.01em;
  border-radius: 999px;
  box-shadow: var(--nav-shadow);
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.sign-in:hover {
  background: #323234;
  color: #fff;
  transform: translateY(-1px);
}

/* -- burger (mobile only) -------------------------------------------------- */

.burger {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 48px;
  height: 48px;
  padding: 0;
  background: var(--pill-dark);
  border: 0;
  border-radius: 50%;
  box-shadow: var(--nav-shadow);
  cursor: pointer;
  transition: background 0.28s ease;
}

.burger-bar {
  width: 18px;
  height: 1.5px;
  background: #fff;
  border-radius: 2px;
  transition: transform 0.28s ease, opacity 0.2s ease, background 0.28s ease;
}

/* ==========================================================================
   2. Hero
   ========================================================================== */

.hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
  min-height: 0;
}

/* -- trust row ------------------------------------------------------------- */

.trust {
  --trust-size: clamp(36px, 4.5vw, 42px);
  display: inline-flex;
  align-items: center;
  margin-bottom: clamp(16px, 2.5vh, 26px);
}

.trust-avatars {
  display: inline-flex;
  align-items: center;
}

/* Dark padded ring; the white disk lives inside it. */
.avatar {
  display: grid;
  place-items: center;
  width: var(--trust-size);
  height: var(--trust-size);
  padding: 5px;
  background: var(--trust-bg);
  border: 1px solid var(--trust-border);
  border-radius: 50%;
  transition: transform 0.35s ease;
}

.avatar-inner {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: #fff;
  border-radius: 50%;
}

.avatar i {
  color: #111;
  font-size: calc(var(--trust-size) * 0.34);
  line-height: 1;
}

.avatar.a1 {
  z-index: 1;
}

.avatar.a2 {
  z-index: 2;
  margin-left: calc(var(--trust-size) * -0.42);
}

.avatar.a3 {
  z-index: 4;
  margin-left: calc(var(--trust-size) * -0.42);
}

.trust:hover .avatar.a1 {
  transform: translateY(-2px);
}

.trust:hover .avatar.a2 {
  transform: translateY(-4px);
}

.trust:hover .avatar.a3 {
  transform: translateY(-2px);
}

.trust-pill {
  display: inline-flex;
  align-items: center;
  height: var(--trust-size);
  margin-left: calc(var(--trust-size) * -0.42);
  /* Left padding clears the avatar it overlaps. */
  padding-left: calc(var(--trust-size) * 0.58);
  padding-right: clamp(14px, 1.8vw, 18px);
  background: var(--trust-bg);
  border: 1px solid var(--trust-border);
  border-radius: 999px;
  color: var(--trust-text);
  font-size: clamp(12px, 1.4vw, 13.5px);
  font-weight: 500;
  letter-spacing: -0.005em;
  white-space: nowrap;
}

/* -- headline -------------------------------------------------------------- */

.headline {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 6.2vw, 80px);
  line-height: 1.12;
  letter-spacing: -0.04em;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
}

.headline-line {
  display: block;
  opacity: 0;
  transform: translateY(14px);
  animation: headlineFade 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.headline-line.l1 {
  animation-delay: 0.12s;
}

.headline-line.l2 {
  animation-delay: 0.3s;
}

/* -- subhead --------------------------------------------------------------- */

.subhead {
  max-width: min(500px, 92%);
  margin: clamp(14px, 2.2vh, 22px) 0 0;
  color: #d0d0d0;
  opacity: 0.8;
  font-size: clamp(calc(13.5px + 2pt), calc(1.55vw + 2pt), calc(16.5px + 2pt));
  font-weight: 400;
  line-height: 1.55;
}

/* -- CTA ------------------------------------------------------------------- */

.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: clamp(18px, 2.8vh, 30px);
  padding: clamp(11px, 1.6vh, 13px) clamp(22px, 3vw, 28px);
  background: #fff;
  color: #000;
  font-size: clamp(13.5px, 1.5vw, 14.5px);
  font-weight: 600;
  letter-spacing: -0.01em;
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15),
    0 0 22px rgba(255, 255, 255, 0.32), 0 0 44px rgba(255, 255, 255, 0.12);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.cta:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25),
    0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.2);
}

/* ==========================================================================
   3. Stats footer
   ========================================================================== */

.stats {
  flex-shrink: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(10px, 2vw, 24px);
  max-width: 920px;
  margin: 0 auto;
}

.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(4px, 0.8vh, 8px);
  text-align: center;
}

.stat-icon {
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 33px);
  line-height: 1;
  color: #fff;
}

.stat-value {
  font-family: var(--font-sans);
  font-size: clamp(18px, 2.2vw, 26px);
  font-weight: 600;
  letter-spacing: -0.025em;
  color: #fff;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.stat-label {
  color: var(--muted);
  font-size: clamp(11px, 1.2vw, 12.5px);
  font-weight: 400;
  letter-spacing: -0.005em;
}

/* ==========================================================================
   Entrance animations
   ========================================================================== */

.anim,
.anim-pulse {
  opacity: 0;
  transform: translateY(22px) scale(0.98);
  filter: blur(6px);
  animation-duration: 0.85s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  animation-fill-mode: forwards;
  animation-delay: var(--d, 0s);
}

.anim {
  animation-name: reveal;
}

.anim-pulse {
  animation-name: revealPulse;
}

@keyframes reveal {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes revealPulse {
  60% {
    opacity: 1;
    transform: translateY(0) scale(1.04);
    filter: blur(0);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes headlineFade {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================================================
   Mobile menu
   ========================================================================== */

.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: overlayIn 0.28s ease both;
}

.menu-overlay[hidden],
.mobile-menu[hidden] {
  display: none;
}

.mobile-menu {
  position: fixed;
  top: calc(clamp(16px, 2.4vh, 28px) + 48px + 14px);
  left: clamp(14px, 3vw, 32px);
  right: clamp(14px, 3vw, 32px);
  z-index: 50;
  padding: 22px 18px 20px;
  background: #fff;
  border-radius: 28px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  animation: menuIn 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.mobile-nav {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}

.mobile-link {
  position: relative;
  padding: 14px 8px 18px;
  color: var(--nav-text);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-align: center;
  opacity: 0;
  animation: linkIn 0.34s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(0.06s + var(--i) * 0.05s);
}

.mobile-link.is-active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 8px;
  width: 3px;
  height: 3px;
  margin-left: -1.5px;
  background: #000;
  box-shadow: -5px 0 0 #000, 5px 0 0 #000;
}

.mobile-signin {
  margin-top: 10px;
  padding: 15px 8px;
  background: var(--pill-dark);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  border-radius: 999px;
  opacity: 0;
  animation: linkIn 0.34s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(0.06s + var(--i) * 0.05s);
}

@keyframes overlayIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes menuIn {
  from {
    opacity: 0;
    transform: translateY(-14px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

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

body.menu-open {
  overflow: hidden;
}

/* ==========================================================================
   Breakpoints
   ========================================================================== */

@media (max-width: 720px) {
  .header {
    justify-content: space-between;
    max-width: 100%;
    gap: 12px;
  }

  .nav,
  .sign-in {
    display: none;
  }

  .logo {
    width: 48px;
    height: 48px;
  }

  .burger {
    display: flex;
  }

  /* Open state: white circle, bars become a black X. */
  .burger[aria-expanded="true"] {
    background: #fff;
  }

  .burger[aria-expanded="true"] .burger-bar {
    background: #000;
  }

  .burger[aria-expanded="true"] .burger-bar:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
  }

  .burger[aria-expanded="true"] .burger-bar:nth-child(2) {
    opacity: 0;
  }

  .burger[aria-expanded="true"] .burger-bar:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
  }

  .headline {
    letter-spacing: -0.08em;
    line-height: 1.05;
  }

  .stats {
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(12px, 3vw, 20px) clamp(10px, 4vw, 24px);
  }
}

@media (max-width: 700px) and (max-height: 760px) {
  .trust {
    margin-bottom: clamp(12px, 1.8vh, 18px);
  }

  .subhead {
    margin-top: clamp(10px, 1.6vh, 16px);
  }

  .cta {
    margin-top: clamp(14px, 2vh, 22px);
  }
}

@media (max-width: 420px) {
  .trust {
    --trust-size: 34px;
  }

  .trust-pill {
    font-size: 12px;
  }

  .headline {
    letter-spacing: -0.09em;
    line-height: 1.04;
  }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .anim,
  .anim-pulse,
  .headline-line,
  .mobile-link,
  .mobile-signin {
    opacity: 1;
    transform: none;
    filter: none;
    animation: none;
  }

  .header {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .headline {
    color: #fff;
  }
}

/* BuoyUp marketing extension. The original full-viewport video and hero remain. */
body.marketing {height:auto; min-height:100vh; overflow-x:hidden; overflow-y:auto; font-family:"Be Vietnam Pro","Noto Sans SC",sans-serif;--font-sans:"Be Vietnam Pro","Noto Sans SC",sans-serif}
.marketing .bg {height:100vh;height:100dvh;bottom:auto}
.marketing .page {min-height:650px;color:#fff}
.marketing .header {max-width:1120px;gap:20px}
.marketing .brand {display:flex;align-items:center;gap:10px;color:#fff;font-size:21px;font-weight:700;letter-spacing:-1px;flex-shrink:0}
.marketing .nav {max-width:480px;margin-left:auto}
.marketing .nav-link {font-size:13px;padding:0 12px;opacity:.8}
.marketing .header-register {display:inline-flex;align-items:center;justify-content:center;gap:12px;border-radius:999px;min-height:46px;padding:0 20px;background:var(--bu-gradient,linear-gradient(120deg,#ecc6dd 0%,#efc3d3 55%,#f3c6ae 100%));color:#2b1d26;font-size:13px;font-weight:600;white-space:nowrap}
.marketing .trust-spark {display:grid;place-items:center;border:1px solid #ffffff60;background:#2a2829;border-radius:50%;width:40px;height:40px;z-index:1;font-size:25px}
.marketing .trust-pill {margin-left:-8px;padding-left:18px}
.marketing .subhead {max-width:560px;line-height:1.7}
.marketing .hero-foot {display:flex;justify-content:space-between;gap:20px;position:relative;z-index:1;width:100%;max-width:1120px;font-size:11px;color:#bfbfbd;padding:24px 0 6px}
.marketing .hero-foot a {color:#fff;display:flex;gap:16px}
.marketing .story,.marketing .site-footer {--m-bg:#f8f4f7;--m-text:#2b1d26;--m-muted:#6f5d6a;--m-surface:#fff;--m-border:#eadfe7;--m-primary:#9b4d6b;background:var(--m-bg);color:var(--m-text)}
[data-theme="dark"] .marketing .story,[data-theme="dark"] .marketing .site-footer {--m-bg:#0c090b;--m-text:#f5edf2;--m-muted:#c4b3bf;--m-surface:#161114;--m-border:#3b2c36;--m-primary:#f2bfd1}
@media(prefers-color-scheme:dark){html:not([data-theme="light"]) .marketing .story,html:not([data-theme="light"]) .marketing .site-footer {--m-bg:#0c090b;--m-text:#f5edf2;--m-muted:#c4b3bf;--m-surface:#161114;--m-border:#3b2c36;--m-primary:#f2bfd1}}
.marketing .story {position:relative;isolation:isolate}
.marketing .story-section {max-width:1200px;margin:0 auto;padding:112px 40px;scroll-margin-top:24px}
.marketing .section-intro {max-width:680px;margin-bottom:52px}
.marketing .eyebrow {font-size:10px;font-weight:600;letter-spacing:.15em;color:var(--m-primary,#efc3d3);margin:0 0 18px;line-height:1.8}
.marketing h2 {font-size:clamp(30px,4vw,52px);font-weight:500;line-height:1.3;letter-spacing:-.045em;margin:0 0 24px;color:inherit}
.marketing h2 em {font-style:normal;color:var(--m-muted,#d4c4d0)}
.marketing section:not(.security-primary):not(.final-cta) h2 em {background:var(--bu-gradient-strong);-webkit-background-clip:text;background-clip:text;color:transparent}
.marketing .section-intro>p:not(.eyebrow) {max-width:570px;font-size:15px;line-height:1.9;color:var(--m-muted)}
.marketing .agent-timeline {display:grid;grid-template-columns:repeat(6,1fr);gap:24px;position:relative}
.marketing .agent-card {grid-column:span 2;position:relative;padding:30px;border:1px solid var(--m-border);border-radius:24px;background:linear-gradient(145deg,var(--m-surface),var(--m-bg));box-shadow:0 16px 40px #2b1d2608,inset 0 1px 0 #ffffff40;transform-style:preserve-3d}
.marketing .agent-card:nth-child(4),.marketing .agent-card:nth-child(5){grid-column:span 3}
.marketing .agent-glyph {display:grid;place-items:center;width:52px;height:52px;border:1px solid var(--m-border);border-radius:16px;background:var(--m-bg);color:var(--m-primary);font-size:30px;margin-bottom:28px;box-shadow:0 6px 12px #2b1d2609}
.marketing .agent-card .eyebrow {font-size:9px;margin-bottom:8px;letter-spacing:.08em}
.marketing h3 {font-size:21px;line-height:1.45;letter-spacing:-.025em;margin:0 0 16px;font-weight:600;color:inherit}
.marketing .agent-card p:not(.eyebrow),.marketing .security-card>p:not(.eyebrow) {font-size:13px;line-height:1.9;color:var(--m-muted)}
.marketing .agent-end {display:flex;justify-content:space-between;margin-top:32px;padding-top:18px;border-top:1px solid var(--m-border);font-size:11px;color:var(--m-primary)}
.marketing .quiet-note {font-size:12px;line-height:1.8;color:var(--m-muted);margin:28px 0 0}
.marketing .network-section {background:radial-gradient(ellipse at 85% 40%,#ecc6dd1c,transparent 65%);border-block:1px solid var(--m-border)}
.marketing .network-grid {display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.marketing .network-grid .section-intro {margin:0}
.marketing .text-link {display:inline-flex;gap:22px;color:var(--m-primary);font-size:13px;font-weight:600;margin-top:20px;padding-bottom:10px;border-bottom:1px solid var(--m-primary)}
.marketing .money-flow {text-align:center;padding:28px 16px;border-radius:32px;background:radial-gradient(ellipse at center,#f2bfd110,transparent 70%)}
.marketing .flow-banks {display:flex;flex-wrap:wrap;justify-content:center;gap:10px;min-height:46px}
.marketing .bank-node {padding:12px 16px;background:var(--m-surface);border:1px solid var(--m-border);border-radius:12px;font-weight:600;font-size:12px;box-shadow:0 8px 20px #2b1d2609}
.marketing .flow-line {width:1px;height:52px;margin:0 auto;background:linear-gradient(var(--m-border),var(--m-primary),var(--m-border));position:relative;overflow:hidden}
.marketing .flow-line:after {content:"";position:absolute;inset:0;background:linear-gradient(transparent,#efc3d3,transparent);transform:translateY(-100%);animation:flowPulse 3s ease-in-out infinite}
@keyframes flowPulse {to{transform:translateY(100%)}}
.marketing .flow-hub {display:flex;flex-direction:column;align-items:center;gap:8px;background:#2b1d26;color:#f7eef3;width:180px;margin:auto;padding:26px 15px;border:1px solid #a0708c;border-radius:26px;box-shadow:0 24px 40px #2b1d2620,inset 0 1px 0 #ffffff30}
.marketing .flow-hub strong {font-size:23px;letter-spacing:-1px}
.marketing .flow-hub>span:last-child {font-size:10px;color:#d4c4d0}
.marketing .hub-symbol {font-size:38px;color:#efc3d3}
.marketing .flow-destinations {display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.marketing .flow-destinations span {padding:13px 18px;border:1px solid var(--m-border);border-radius:12px;font-size:12px;background:var(--m-surface)}
.marketing .flow-return {font-size:11px;color:var(--m-muted);margin-top:22px}
.marketing .security-grid {display:grid;grid-template-columns:1.15fr 1fr;gap:24px}
.marketing .security-card {padding:44px;border:1px solid var(--m-border);border-radius:28px;background:var(--m-surface);position:relative;overflow:hidden}
.marketing .security-primary {background:radial-gradient(ellipse at 70% 0,#9b4d6b,#2b1d26 70%);color:#f5edf2;--m-muted:#d4c4d0;--m-primary:#efc3d3;padding-top:190px}
.marketing .security-card h3 {font-size:clamp(24px,3vw,32px);line-height:1.4}
.marketing .privacy-art {position:absolute;top:5px;right:30px;display:flex;perspective:600px;font-size:130px;color:#efc3d380;letter-spacing:-60px;transform:rotate(-18deg)}
.marketing .privacy-art span {text-shadow:0 10px 24px #e2a3bb30;transform:rotateY(-30deg);display:block}
.marketing .security-note {border-top:1px solid var(--m-border);padding-top:24px;margin-top:30px;color:var(--m-primary);font-size:12px;line-height:1.9}
.marketing .live-section {border-block:1px solid var(--m-border);background:linear-gradient(125deg,#ecc6dd11,transparent)}
.marketing .live-heading {display:flex;justify-content:space-between;align-items:center;gap:20px}
.marketing .live-heading h2 {font-size:clamp(28px,3vw,40px);margin-bottom:8px}
.marketing .simulation-badge {font-size:11px;color:#845609;background:#fff1c8;border:1px solid #e2c47b;border-radius:999px;padding:7px 12px;white-space:nowrap}
.marketing [hidden] {display:none!important}
.marketing .live-caption {font-size:13px;color:var(--m-muted);margin-bottom:36px}
.marketing .live-stats {display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
.marketing .live-stat {padding:18px 0;border-top:1px solid var(--m-border)}
.marketing .live-stat strong {display:block;font-family:"JetBrains Mono","Be Vietnam Pro",monospace;font-size:clamp(24px,3vw,36px);font-weight:500;letter-spacing:-.06em;line-height:1.6}
.marketing .live-stat span {font-size:11px;color:var(--m-muted)}
.marketing .public-status {display:flex;align-items:center;gap:16px;font-size:12px;color:var(--m-muted);margin-top:28px;flex-wrap:wrap}
.marketing #overview-retry {padding:9px 18px;background:var(--m-surface);border:1px solid var(--m-border);border-radius:999px;color:var(--m-text);font:inherit;cursor:pointer}
.marketing .data-skeleton {display:block;min-height:50px;min-width:160px;border-radius:12px;padding:16px;font-size:12px;color:var(--m-muted);background:linear-gradient(100deg,var(--m-surface),var(--m-border),var(--m-surface));background-size:250% 100%;animation:loadingSheen 2s linear infinite}
@keyframes loadingSheen {to{background-position:-250% 0}}
.marketing .faq-section {display:grid;grid-template-columns:.9fr 1.1fr;gap:60px}
.marketing .faq-list details {border-top:1px solid var(--m-border);padding:22px 0}
.marketing .faq-list details:last-child {border-bottom:1px solid var(--m-border)}
.marketing summary {font-size:14px;font-weight:500;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;line-height:1.7}
.marketing summary:after {content:"+";font-size:22px;font-weight:400;color:var(--m-primary)}
.marketing details[open] summary:after {content:"−"}
.marketing .faq-list p {font-size:13px;line-height:1.9;color:var(--m-muted);padding-right:28px}
.marketing .final-cta {padding:100px 24px 112px;text-align:center;background:radial-gradient(ellipse at 50% 120%,#b06f81 0,#3a2433 40%,#2b1d26 80%);color:#f7eef3}
.marketing .final-cta h2 {font-size:clamp(34px,5vw,62px);line-height:1.3}
.marketing .final-cta h2 em {background:var(--bu-gradient);-webkit-background-clip:text;background-clip:text;color:transparent}
.marketing .final-cta .cta {background:var(--bu-gradient,linear-gradient(120deg,#ecc6dd 0%,#efc3d3 55%,#f3c6ae 100%));box-shadow:0 8px 36px #efc3d340}
.marketing .final-cta>p:last-child {font-size:11px;margin:24px 0 0;color:#d4c4d0}
.marketing .site-footer {display:flex;align-items:center;justify-content:space-between;gap:32px;padding:42px max(24px,calc((100vw - 1120px)/2));font-size:12px}
.marketing .footer-brand {font-size:24px;font-weight:700;letter-spacing:-1px}
.marketing .footer-brand span {display:block;font-size:11px;letter-spacing:0;font-weight:400;margin-top:6px;color:var(--m-muted)}
.marketing .site-footer nav {display:flex;gap:24px;flex-wrap:wrap;color:var(--m-muted)}
.marketing .marketing-theme {border:1px solid var(--m-border);background:var(--m-surface);color:var(--m-text);font:inherit;padding:10px 14px;border-radius:999px;cursor:pointer;white-space:nowrap}
.marketing .skip-link {position:fixed;top:-100px;left:16px;z-index:100;background:#efc3d3;color:#2b1d26;padding:12px;border-radius:12px}
.marketing .skip-link:focus {top:16px}
.marketing a:focus-visible,.marketing button:focus-visible,.marketing summary:focus-visible {outline:3px solid #ecc6dd;outline-offset:5px}
.marketing.menu-open {overflow:hidden}
.marketing.is-hidden *,.marketing.is-hidden *:before,.marketing.is-hidden *:after {animation-play-state:paused!important}
@media(max-width:1000px){.marketing .header {gap:12px}.marketing .nav-link {padding:0 9px;font-size:11px}.marketing .brand {font-size:18px}.marketing .network-grid {gap:30px}.marketing .agent-card{padding:24px}.marketing .story-section {padding:80px 28px}.marketing .security-card {padding:32px}.marketing .security-primary {padding-top:190px}}
@media(max-width:720px){.marketing .header-register {margin-left:auto;min-height:44px;padding:0 16px}.marketing .hero-foot>span {display:none}.marketing .hero-foot {justify-content:center}.marketing .headline {font-size:clamp(28px,6.6vw,48px)}.marketing .story-section {padding:68px 22px}.marketing .section-intro {margin-bottom:32px}.marketing .agent-timeline {grid-template-columns:1fr;gap:16px;padding-left:20px;border-left:1px solid var(--m-border);margin-left:6px}.marketing .agent-card,.marketing .agent-card:nth-child(4),.marketing .agent-card:nth-child(5){grid-column:auto}.marketing .agent-card:before {content:"";position:absolute;width:9px;height:9px;border-radius:50%;background:var(--m-primary);top:36px;left:-26px;box-shadow:0 0 0 5px var(--m-bg)}.marketing .network-grid,.marketing .security-grid,.marketing .faq-section {grid-template-columns:1fr;gap:32px}.marketing .live-stats {grid-template-columns:repeat(2,1fr);gap:22px}.marketing .live-heading {align-items:flex-start}.marketing .live-heading .simulation-badge {margin-top:4px}.marketing .site-footer {align-items:flex-start;flex-wrap:wrap;padding:34px 24px}.marketing .site-footer nav {order:3;gap:20px;width:100%}.marketing .privacy-art {right:25px}.marketing .money-flow {padding-inline:0}.marketing .flow-banks {gap:8px}.marketing .bank-node {padding:10px 12px}.marketing .subhead {font-size:15px}.marketing .trust-pill {font-size:10px}.marketing .trust-spark {width:34px;height:34px}.marketing .page {min-height:600px}.marketing .final-cta {padding:74px 22px}}
@media(prefers-reduced-motion:reduce){.marketing .flow-line:after,.marketing .data-skeleton{animation:none}.marketing [data-tilt]{transform:none!important}}
@media(max-width:720px){.marketing.is-authenticated .sign-in{display:inline-flex;margin-left:auto;white-space:nowrap;padding-inline:14px;font-size:12px}}

/* Hero headline: Vietnamese-safe faces, wraps instead of clipping long EN/ZH copy. */
.marketing .headline {font-family:var(--font-display);font-weight:600;font-size:clamp(34px,6vw,78px);line-height:1.12;letter-spacing:-0.035em;white-space:normal;overflow:visible;text-wrap:balance;max-width:min(1040px,100%)}
.marketing .headline-line {padding-bottom:.04em}
.marketing .headline em {font-family:var(--font-accent);font-style:italic;font-weight:500;letter-spacing:-0.01em;background:linear-gradient(120deg,#ffe3f0 0%,#f4c2d6 45%,#f6c9ae 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.marketing .subhead {text-wrap:pretty}
html:lang(en) .marketing .headline {font-size:clamp(32px,5.3vw,70px);max-width:min(1200px,100%)}
html:lang(zh) .marketing .headline {letter-spacing:0;line-height:1.22}
html:lang(zh) .marketing .headline em {font-style:normal;font-family:"Noto Sans SC",var(--font-display);font-weight:600}
@media(max-width:720px){.marketing .headline {font-size:clamp(30px,8.6vw,46px);letter-spacing:-0.025em;line-height:1.14}}
@media(max-width:420px){.marketing .headline {letter-spacing:-0.02em;line-height:1.16}}

/* 18/10/2026: the language menu drops down out of the header; the header must sit above the hero
   (both were z-index 1, so the later hero covered the menu and swallowed clicks on EN / 中文). */
.header { z-index: 30; }