@import url('https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap');


/* =============================================================
   DESIGN TOKENS
   ============================================================= */

:root {
  --blue:       #2B7FFF;
  --blue-dark:  #1A5FCC;
  --blue-light: rgba(43,127,255,.12);
  --gold:       #FDB913;
  --gold-light: rgba(253,185,19,.14);
  --navy:       #1C2333;
  --navy2:      #0D1117;
  --red:        #E02020;
  --green:      #22C55E;
  --white:      #FFFFFF;

  --bg:      #F4F7FC;
  --surface: #FFFFFF;
  --ink:     #0D1117;
  --muted:   rgba(13,17,23,.60);
  --muted2:  rgba(13,17,23,.45);
  --stroke:  rgba(13,17,23,.10);
  --stroke2: rgba(13,17,23,.07);

  --shadow:  0 24px 70px rgba(13,17,23,.10);
  --shadow2: 0 10px 32px rgba(13,17,23,.08);

  --radius:  18px;
  --radius2: 24px;

  --sans: "Google Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}


/* =============================================================
   RESET & BASE
   ============================================================= */

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

html, body { height: 100%; }

body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
  overflow-x: hidden;
  line-height: 1.5;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

.container {
  width: min(1160px, calc(100% - 40px));
  margin: 0 auto;
}


/* =============================================================
   NAVIGATION & MEGA MENU
   ============================================================= */

.nav-wrap {
  position: sticky;
  top: 0;
  z-index: 9999;
  background: rgba(244,247,252,.92);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--stroke2);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 0;
  gap: 16px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -.3px;
  text-decoration: none;
  color: var(--ink);
  flex-shrink: 0;
}

.brand-logo { width: 32px; height: 32px; flex-shrink: 0; }
.brand-logo svg { width: 32px; height: 32px; }

/* ---- Nav link items ---- */
.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 14px;
  font-weight: 500;
}

.nav-item {
  position: relative;
}

.nav-item__btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 13px;
  border-radius: 999px;
  border: 1px solid transparent;
  color: var(--muted);
  background: transparent;
  font-size: 14px;
  font-weight: 500;
  font-family: var(--sans);
  cursor: pointer;
  transition: color .18s, background .18s, border-color .18s;
  white-space: nowrap;
}

.nav-item__btn:hover {
  color: var(--ink);
  background: rgba(43,127,255,.06);
}

.nav-item.open > .nav-item__btn {
  color: var(--blue);
  background: var(--blue-light);
  border-color: rgba(43,127,255,.22);
  font-weight: 600;
}

.nav-item__chevron {
  width: 14px; height: 14px;
  transition: transform .22s;
  flex-shrink: 0;
  opacity: .55;
}

.nav-item.open .nav-item__chevron { transform: rotate(180deg); opacity: 1; }

.nav-plain {
  display: flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 999px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: color .18s, background .18s;
  white-space: nowrap;
}

.nav-plain:hover { color: var(--ink); background: rgba(43,127,255,.06); }

/* ---- Mega-drop backdrop ---- */
.mega-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  top: 66px;
  z-index: 8000;
  background: rgba(13,17,23,.28);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.mega-backdrop.visible { display: block; }

/* ---- Mega panel ---- */
.mega-panel {
  display: none;
  position: fixed;
  left: 20px;
  right: 20px;
  top: 66px;
  z-index: 8500;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 28px 80px rgba(13,17,23,.18), 0 0 0 1px rgba(13,17,23,.07);
  background:
    radial-gradient(ellipse 700px 400px at 80% 0%,  rgba(253,185,19,.09), transparent 60%),
    radial-gradient(ellipse 600px 350px at  0% 80%, rgba(43,127,255,.07), transparent 60%),
    linear-gradient(145deg, #F8F7FF 0%, #FFFFFF 55%, #FFF8F5 100%);
  transform: translateY(-8px);
  opacity: 0;
  transition: opacity .22s ease, transform .22s ease;
  max-width: 1100px;
  margin: 0 auto;
  pointer-events: none;
}

.mega-panel.open {
  display: block;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.mega-panel__inner {
  padding: 32px 36px 36px;
}

.mega-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--stroke);
  background: var(--white);
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 16px;
  color: var(--muted);
  transition: background .18s, color .18s;
  line-height: 1;
  font-family: var(--sans);
}

.mega-close:hover { background: var(--bg); color: var(--ink); }

/* ---- Section label ---- */
.mega-section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted2);
  margin-bottom: 14px;
}

.mega-section-label + .mega-divider {
  display: none;
}

.mega-divider {
  height: 1px;
  background: var(--stroke2);
  margin: 22px 0 18px;
}

/* ---- 2-column grid of cards ---- */
.mega-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* ---- Individual mega card ---- */
.mega-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid var(--stroke2);
  background: rgba(255,255,255,.72);
  text-decoration: none;
  cursor: pointer;
  transition: border-color .18s, background .18s, box-shadow .18s, transform .15s;
}

.mega-card:hover {
  border-color: rgba(43,127,255,.22);
  background: var(--white);
  box-shadow: 0 6px 24px rgba(43,127,255,.10);
  transform: translateY(-1px);
}

.mega-card__ico {
  width: 40px; height: 40px;
  border-radius: 11px;
  background: rgba(99,91,255,.10);
  border: 1px solid rgba(99,91,255,.16);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.mega-card__ico svg { width: 18px; height: 18px; color: #6355FF; }

.mega-card__title {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 4px;
  letter-spacing: -.2px;
}

.mega-card__desc {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}

/* ---- Nav CTA right side ---- */
.nav-cta {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-shrink: 0;
}

/* ---- Mobile toggle ---- */
.nav-toggle {
  display: none;
  width: 40px; height: 40px;
  border-radius: 11px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.7);
  padding: 10px;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  height: 2px;
  background: var(--navy);
  border-radius: 99px;
  transition: transform .25s, opacity .25s;
}

/* ---- Mobile drawer ---- */
.mobile-nav {
  display: none;
  position: fixed;
  inset: 0;
  top: 61px;
  z-index: 9998;
  background: var(--white);
  overflow-y: auto;
  padding: 20px 20px 40px;
  flex-direction: column;
  gap: 4px;
  border-top: 1px solid var(--stroke2);
}

.mobile-nav.open { display: flex; }

.mobile-nav__section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted2);
  padding: 14px 0 6px;
}

.mobile-nav__link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--stroke2);
  background: var(--bg);
  text-decoration: none;
  margin-bottom: 4px;
  transition: border-color .18s, background .18s;
}

.mobile-nav__link:hover { border-color: rgba(43,127,255,.22); background: var(--blue-light); }

.mobile-nav__ico {
  width: 34px; height: 34px;
  border-radius: 9px;
  background: rgba(99,91,255,.10);
  border: 1px solid rgba(99,91,255,.16);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.mobile-nav__ico svg { width: 16px; height: 16px; color: #6355FF; }

.mobile-nav__title { font-size: 14px; font-weight: 700; color: var(--ink); }
.mobile-nav__desc  { font-size: 12px; color: var(--muted); }

.mobile-nav__divider {
  height: 1px;
  background: var(--stroke2);
  margin: 10px 0;
}

.mobile-nav__cta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 16px;
  margin-top: 8px;
  border-top: 1px solid var(--stroke2);
}

/* ---- Responsive ---- */
@media (max-width: 860px) {
  .nav-links  { display: none !important; }
  .nav-toggle { display: flex; }
  .nav-cta .btn:not(.gold) { display: none; }

  /* Mega panels must NEVER show on mobile — drawer handles everything */
  .mega-panel   { display: none !important; }
  .mega-backdrop { display: none !important; }

  /* Drawer sits above everything on mobile */
  .mobile-nav {
    z-index: 9998;
    top: 61px;
  }
}

@media (min-width: 861px) {
  /* Drawer must NEVER show on desktop */
  .mobile-nav { display: none !important; }
}


/* =============================================================
   BUTTONS
   ============================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: 12px;
  border: 1px solid var(--stroke);
  background: var(--white);
  color: var(--ink);
  font-weight: 600;
  font-size: 14px;
  font-family: var(--sans);
  cursor: pointer;
  transition: transform .15s, box-shadow .2s, background .18s, border-color .18s;
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow2);
  border-color: rgba(13,17,23,.16);
}

.btn:active { transform: translateY(0) scale(.99); }

.btn.primary {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue-dark);
  box-shadow: 0 4px 18px rgba(43,127,255,.28);
}

.btn.primary:hover {
  background: var(--blue-dark);
  box-shadow: 0 8px 28px rgba(43,127,255,.34);
}

.btn.gold {
  background: var(--gold);
  color: var(--navy);
  border-color: rgba(253,185,19,.5);
  font-weight: 700;
  box-shadow: 0 4px 18px rgba(253,185,19,.22);
}

.btn.gold:hover { box-shadow: 0 8px 28px rgba(253,185,19,.30); }

.btn.ghost { background: rgba(255,255,255,.55); }

.btn.dark {
  background: var(--navy);
  color: #fff;
  border-color: rgba(255,255,255,.08);
}

.btn.white {
  background: var(--white);
  color: var(--blue);
  border-color: rgba(255,255,255,.3);
  font-weight: 700;
}

.btn.white:hover { box-shadow: 0 8px 28px rgba(0,0,0,.18); }

.btn.outline-white {
  background: rgba(255,255,255,.12);
  color: var(--white);
  border-color: rgba(255,255,255,.25);
  font-weight: 600;
}

.btn.outline-white:hover { background: rgba(255,255,255,.20); }


/* =============================================================
   HERO
   ============================================================= */

.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  padding: 64px 0 48px;
  align-items: center;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.80);
  border: 1px solid var(--stroke2);
  color: var(--muted);
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 22px;
}

.pill .dot-live {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(34,197,94,.25);
  animation: pulse 1.8s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(34,197,94,.25); }
  50%       { box-shadow: 0 0 0 7px rgba(34,197,94,.12); }
}

h1 {
  font-size: clamp(38px, 4.2vw, 62px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -1.5px;
  margin-bottom: 18px;
  color: var(--ink);
}

h1 .accent      { color: var(--blue); }
h1 .accent-gold { color: var(--gold); }

.lead {
  font-size: 17px;
  color: var(--muted);
  line-height: 1.65;
  max-width: 52ch;
  margin-bottom: 28px;
  font-weight: 400;
}

.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.trust-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 18px;
  border-top: 1px solid var(--stroke2);
}

.trust-strip span { color: var(--muted2); font-size: 12.5px; font-weight: 500; }

.trust-chip {
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.75);
  border: 1px solid var(--stroke2);
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.hero-visual { position: relative; }

.hero-card {
  background: var(--white);
  border-radius: var(--radius2);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
  overflow: hidden;
}


/* =============================================================
   HERO CODE CARD
   ============================================================= */

.hc-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  background: var(--navy2);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.hc-dots { display: flex; gap: 6px; }
.hc-dots span { width: 10px; height: 10px; border-radius: 50%; }
.hc-dots span:nth-child(1) { background: #FF5F57; }
.hc-dots span:nth-child(2) { background: #FEBC2E; }
.hc-dots span:nth-child(3) { background: #28C840; }

.hc-title {
  font-size: 12px;
  color: rgba(255,255,255,.55);
  font-weight: 500;
  font-family: var(--mono);
}

.hc-body { padding: 16px; background: #0D1117; }

.hc-code {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.7;
  color: rgba(255,255,255,.82);
}

.hc-code .c-blue   { color: #79C0FF; }
.hc-code .c-green  { color: #56D364; }
.hc-code .c-gold   { color: #E3B341; }
.hc-code .c-red    { color: #FF7B72; }
.hc-code .c-purple { color: #D2A8FF; }
.hc-code .c-gray   { color: rgba(255,255,255,.38); }

.hc-response {
  padding: 14px 16px;
  border-top: 1px solid rgba(255,255,255,.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: #0D1117;
}

.hc-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-family: var(--mono);
  color: rgba(255,255,255,.55);
}

.status-ok {
  padding: 4px 9px;
  border-radius: 6px;
  background: rgba(34,197,94,.15);
  border: 1px solid rgba(34,197,94,.25);
  color: #4ADE80;
  font-weight: 700;
  font-size: 11px;
}

.hc-latency {
  font-size: 11px;
  font-family: var(--mono);
  color: rgba(255,255,255,.38);
}

.hc-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--stroke2);
  background: var(--white);
}

.hc-metric {
  padding: 14px 16px;
  border-right: 1px solid var(--stroke2);
  text-align: center;
}

.hc-metric:last-child { border-right: none; }

.hc-metric-val {
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.5px;
}

.hc-metric-lbl { font-size: 11px; color: var(--muted2); margin-top: 2px; font-weight: 500; }

.hc-metric-val.blue  { color: var(--blue); }
.hc-metric-val.gold  { color: var(--gold); }
.hc-metric-val.green { color: var(--green); }


/* =============================================================
   SHARED SECTION ELEMENTS
   ============================================================= */

.section { padding: 72px 0; }

.section-head { margin-bottom: 40px; }

.section-head h2 {
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 700;
  letter-spacing: -.8px;
  line-height: 1.1;
  margin-bottom: 10px;
}

.section-head p { color: var(--muted); font-size: 16px; max-width: 58ch; line-height: 1.65; }

.tag-label {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 10px;
}


/* =============================================================
   UNIFIED APIS — SPLIT SECTION
   ============================================================= */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.split-text h2 {
  font-size: clamp(26px, 2.8vw, 38px);
  font-weight: 700;
  letter-spacing: -.7px;
  line-height: 1.12;
  margin-bottom: 12px;
}

.split-text p { color: var(--muted); font-size: 15.5px; line-height: 1.65; margin-bottom: 20px; }

.checklist { list-style: none; display: grid; gap: 12px; margin-bottom: 24px; }

.checklist li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 15px;
  color: var(--ink);
}

.check-ico {
  width: 20px; height: 20px;
  flex-shrink: 0;
  border-radius: 6px;
  background: var(--blue);
  display: grid;
  place-items: center;
  margin-top: 1px;
}

.check-ico svg { width: 11px; height: 11px; color: #fff; }

.chip-row { display: flex; gap: 8px; flex-wrap: wrap; }

.chip {
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid var(--stroke2);
  background: rgba(255,255,255,.80);
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

.api-panel {
  background: var(--white);
  border-radius: var(--radius2);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.api-tabs {
  display: flex;
  gap: 6px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--stroke2);
  background: var(--bg);
  overflow-x: auto;
}

.api-tab {
  padding: 7px 12px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: all .18s;
  white-space: nowrap;
}

.api-tab.active {
  background: var(--white);
  border-color: var(--stroke);
  color: var(--ink);
  box-shadow: var(--shadow2);
}

.api-content { padding: 16px; }

.api-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 0;
  border-bottom: 1px solid var(--stroke2);
  font-size: 13.5px;
}

.api-row:last-child { border-bottom: none; }

.api-row-left { display: flex; align-items: center; gap: 10px; }

.api-method {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 5px;
}

.m-get    { background: rgba(34,197,94,.12); color: #16A34A; border: 1px solid rgba(34,197,94,.22); }
.m-post   { background: rgba(43,127,255,.12); color: #1D4ED8; border: 1px solid rgba(43,127,255,.22); }
.m-delete { background: rgba(224,32,32,.10);  color: #DC2626; border: 1px solid rgba(224,32,32,.18); }

.api-path { font-family: var(--mono); font-size: 12px; color: var(--muted); }

.api-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(43,127,255,.10);
  border: 1px solid rgba(43,127,255,.18);
  color: var(--blue);
}


/* =============================================================
   NUMBERS — BENTO GRID
   ============================================================= */

.numbers-section {
  background:
    radial-gradient(ellipse 900px 500px at 20% 60%, rgba(43,127,255,.20), transparent 60%),
    radial-gradient(ellipse 700px 400px at 90% 10%, rgba(253,185,19,.10), transparent 60%),
    linear-gradient(160deg, #111827 0%, #0D1117 55%, #0f1a2e 100%);
  padding: 88px 0;
  position: relative;
  overflow: hidden;
}

.numbers-section::after {
  content: "";
  position: absolute;
  width: 480px; height: 480px;
  border-radius: 50%;
  border: 1px solid rgba(43,127,255,.12);
  right: -120px; bottom: -160px;
  pointer-events: none;
}

.numbers-head {
  text-align: center;
  margin-bottom: 52px;
  position: relative;
}

.numbers-head__pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(253,185,19,.12);
  border: 1px solid rgba(253,185,19,.25);
  color: var(--gold);
  font-size: 12.5px;
  font-weight: 600;
  margin-bottom: 18px;
}

.numbers-head h2 {
  color: var(--white);
  font-size: clamp(30px, 4vw, 52px);
  font-weight: 700;
  letter-spacing: -1.2px;
  line-height: 1.08;
  margin-bottom: 14px;
  max-width: 14ch;
  margin-left: auto;
  margin-right: auto;
}

.numbers-head p {
  color: rgba(255,255,255,.50);
  font-size: 15.5px;
  max-width: 56ch;
  margin: 0 auto;
  line-height: 1.65;
}

.numbers-bento {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas:
    "large mid1   right1"
    "large wide   wide";
  gap: 14px;
}

.nbc {
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(8px);
  padding: 28px 28px 24px;
  position: relative;
  overflow: hidden;
  transition: border-color .25s, background .25s;
}

.nbc:hover {
  border-color: rgba(255,255,255,.13);
  background: rgba(255,255,255,.06);
}

.nbc::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 22px;
  background: radial-gradient(ellipse 200px 120px at 10% 0%, rgba(255,255,255,.05), transparent 70%);
  pointer-events: none;
}

.nbc--large       { grid-area: large;  display: flex; flex-direction: column; justify-content: space-between; min-height: 340px; }
.nbc--top-mid     { grid-area: mid1; }
.nbc--top-right   { grid-area: right1; }
.nbc--bottom-wide { grid-area: wide; }

.nbc__tag {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.65);
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 20px;
}

.nbc__val {
  font-size: clamp(52px, 6vw, 82px);
  font-weight: 700;
  color: var(--white);
  letter-spacing: -2.5px;
  line-height: 1;
  margin-bottom: 14px;
}

.nbc__val .suf { color: var(--gold); }

.nbc__label {
  color: rgba(255,255,255,.50);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
}

.nbc__bars {
  display: flex;
  align-items: flex-end;
  gap: 7px;
  height: 90px;
  margin-top: auto;
  padding-top: 20px;
}

.nbc__bar {
  flex: 1;
  border-radius: 8px 8px 6px 6px;
  background: linear-gradient(180deg, var(--gold) 0%, var(--blue) 100%);
  opacity: .85;
  animation: barPulse 2.4s ease-in-out infinite;
}

.nbc__bar:nth-child(1) { height: 40%; animation-delay: 0s; }
.nbc__bar:nth-child(2) { height: 65%; animation-delay: .15s; }
.nbc__bar:nth-child(3) { height: 48%; animation-delay: .3s; }
.nbc__bar:nth-child(4) { height: 82%; animation-delay: .45s; }
.nbc__bar:nth-child(5) { height: 100%; animation-delay: .6s; }

@keyframes barPulse {
  0%, 100% { opacity: .75; transform: scaleY(.96); }
  50%       { opacity: 1;   transform: scaleY(1.03); }
}

.nbc__days-val {
  font-size: clamp(62px, 7vw, 96px);
  font-weight: 700;
  color: var(--white);
  letter-spacing: -3px;
  line-height: 1;
  margin-bottom: 14px;
}


/* =============================================================
   FEATURE CARDS
   ============================================================= */

.cards-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.feature-card {
  padding: 22px;
  border-radius: var(--radius2);
  background: var(--white);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow2);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}

.feature-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: rgba(43,127,255,.20);
}

.f-ico {
  width: 44px; height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  margin-bottom: 14px;
  background: var(--blue-light);
  border: 1px solid rgba(43,127,255,.18);
}

.f-ico.gold-ico  { background: var(--gold-light);           border-color: rgba(253,185,19,.22); }
.f-ico.green-ico { background: rgba(34,197,94,.10);         border-color: rgba(34,197,94,.22); }
.f-ico svg       { width: 22px; height: 22px; color: var(--blue); }
.f-ico.gold-ico svg  { color: #B45309; }
.f-ico.green-ico svg { color: var(--green); }

.feature-card h3 { font-size: 15.5px; font-weight: 700; margin-bottom: 8px; letter-spacing: -.3px; }
.feature-card p  { font-size: 14px; color: var(--muted); line-height: 1.6; margin-bottom: 14px; }

.card-link {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--blue);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.card-link:hover { text-decoration: underline; }


/* =============================================================
   LANGUAGE / DEVELOPER SECTION
   ============================================================= */

.lang-section {
  background: var(--white);
  padding: 72px 0;
  border-top: 1px solid var(--stroke2);
  border-bottom: 1px solid var(--stroke2);
}

.lang-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

.lang-logos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.lang-logo {
  aspect-ratio: 1;
  border-radius: 16px;
  border: 1px solid var(--stroke);
  background: var(--bg);
  display: grid;
  place-items: center;
  font-size: 22px;
  transition: transform .18s, box-shadow .18s;
}

.lang-logo:hover { transform: translateY(-2px); box-shadow: var(--shadow2); }


/* =============================================================
   FAQ
   ============================================================= */

.faq-section { padding: 72px 0; }

.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.faq-item {
  background: var(--white);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  overflow: hidden;
}

.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  cursor: pointer;
  font-weight: 600;
  font-size: 15px;
  transition: background .18s;
}

.faq-q:hover { background: var(--bg); }

.faq-icon {
  width: 26px; height: 26px;
  flex-shrink: 0;
  border-radius: 8px;
  border: 1px solid var(--stroke);
  background: var(--bg);
  display: grid;
  place-items: center;
  font-size: 16px;
  color: var(--blue);
  transition: transform .25s, background .18s;
}

.faq-item.open .faq-icon {
  transform: rotate(45deg);
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}

.faq-a {
  display: none;
  padding: 14px 20px 18px;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.65;
  border-top: 1px solid var(--stroke2);
}

.faq-item.open .faq-a { display: block; }


/* =============================================================
   CTA BAND
   ============================================================= */

.cta-band {
  background: var(--blue);
  padding: 60px 0;
  position: relative;
  overflow: hidden;
}

.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(700px 350px at 80% 50%, rgba(253,185,19,.22), transparent 60%),
    radial-gradient(500px 350px at 10% 20%, rgba(255,255,255,.10), transparent 60%);
  pointer-events: none;
}

.cta-band__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.cta-band__text h2 {
  font-size: clamp(22px, 2.5vw, 32px);
  font-weight: 700;
  color: var(--white);
  letter-spacing: -.5px;
  margin-bottom: 8px;
}

.cta-band__text p  { color: rgba(255,255,255,.72); font-size: 15.5px; }
.cta-band__actions { display: flex; gap: 12px; flex-wrap: wrap; }


/* =============================================================
   FOOTER
   ============================================================= */

.footer-pro {
  position: relative;
  padding: 70px 0 34px;
  color: rgba(255,255,255,.90);
  background:
    radial-gradient(900px 420px at 18%  0%, rgba(43,127,255,.18), transparent 60%),
    radial-gradient(900px 420px at 85% 12%, rgba(253,185,19,.12), transparent 60%),
    linear-gradient(180deg, #05070C, #070A10 45%, #090D16);
  border-top: 1px solid rgba(255,255,255,.08);
}

.footer-pro__inner { position: relative; }

.footer-pro__top {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 32px;
  align-items: start;
}

.footer-pro__cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px 26px;
}

.fcol__title {
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .04em;
  color: rgba(255,255,255,.62);
  margin-bottom: 12px;
}

.fcol__link {
  display: block;
  padding: 7px 0;
  font-weight: 400;
  font-size: 14px;
  color: rgba(255,255,255,.78);
  transition: color .18s, transform .18s;
}

.fcol__link:hover { color: rgba(255,255,255,.96); transform: translateX(2px); }

.footer-pro__aside { width: 100%; }

.fpanel {
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  box-shadow: 0 26px 70px rgba(0,0,0,.35);
  padding: 18px;
}

.fpanel__title { font-weight: 500; font-size: 14px; margin-bottom: 12px; color: rgba(255,255,255,.86); }

.fnewsletter {
  display: grid;
  grid-template-columns: 1fr 48px;
  gap: 10px;
  align-items: center;
}

.fnewsletter__input {
  width: 100%;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  outline: none;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 400;
}

.fnewsletter__input::placeholder { color: rgba(255,255,255,.45); }

.fnewsletter__input:focus {
  border-color: rgba(43,127,255,.45);
  box-shadow: 0 0 0 6px rgba(43,127,255,.12);
}

.fnewsletter__btn {
  height: 48px;
  width: 48px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: var(--blue);
  color: #fff;
  cursor: pointer;
  transition: transform .15s, box-shadow .2s;
  font-size: 20px;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 24px rgba(43,127,255,.28);
}

.fnewsletter__btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 32px rgba(43,127,255,.38);
}

.fdivider { height: 1px; background: rgba(255,255,255,.10); margin: 14px 0; }

.fpanel__row { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.fpanel__label { color: rgba(255,255,255,.62); font-weight: 400; font-size: 13px; }

.fsocial { display: flex; gap: 10px; }

.fsocial__btn {
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.82);
  font-weight: 500;
  font-size: 13px;
  transition: transform .15s, background .2s, border-color .2s;
}

.fsocial__btn:hover {
  transform: translateY(-1px);
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.18);
}

.fbadges { display: flex; gap: 10px; flex-wrap: wrap; }

.fbadge {
  padding: 9px 11px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.78);
  font-weight: 500;
  font-size: 12px;
}

.footer-pro__mid {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.10);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.fbrand { display: flex; align-items: center; gap: 10px; font-weight: 600; letter-spacing: -.4px; }

.fbrand__mark {
  width: 28px; height: 28px;
  border-radius: 10px;
  overflow: hidden;
  display: grid;
  place-items: center;
}

.fbrand__mark svg { width: 28px; height: 28px; }
.fbrand__name { color: rgba(255,255,255,.90); }

.flegal-links { display: flex; gap: 18px; flex-wrap: wrap; }

.flegal-links__a { color: rgba(255,255,255,.70); font-weight: 400; font-size: 13px; }
.flegal-links__a:hover { color: rgba(255,255,255,.92); text-decoration: underline; }

.footer-pro__fineprint {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.45);
  font-size: 12.5px;
  line-height: 1.65;
  font-weight: 400;
}

.footer-pro__copy { margin-top: 10px; color: rgba(255,255,255,.40); font-weight: 400; }


/* =============================================================
   PAGE-LEVEL SECTION MODIFIERS
   ============================================================= */

.hero-section {
  background: linear-gradient(180deg, #EEF3FC 0%, var(--bg) 100%);
  padding-bottom: 0;
}

.section--white   { background: var(--white); }
.section--bordered { border-top: 1px solid var(--stroke2); }

.hc-version {
  font-size: 11px;
  color: rgba(255,255,255,.35);
  font-family: var(--mono);
}

.api-footer {
  padding: 12px 16px;
  border-top: 1px solid var(--stroke2);
  background: var(--bg);
  font-size: 12.5px;
  color: var(--muted2);
}

.lang-heading {
  font-size: clamp(26px, 2.8vw, 38px);
  font-weight: 700;
  letter-spacing: -.7px;
  line-height: 1.12;
  margin-bottom: 12px;
}

.lang-lead {
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.65;
  margin-bottom: 24px;
}

.section-head--center {
  text-align: center;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 40px;
}

.fcol__title--spaced { margin-top: 20px; }


/* =============================================================
   UTILITIES
   ============================================================= */

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }


/* =============================================================
   RESPONSIVE
   ============================================================= */

@media (max-width: 1024px) {
  .hero             { grid-template-columns: 1fr; gap: 36px; }
  .split            { grid-template-columns: 1fr; gap: 32px; }
  .lang-grid        { grid-template-columns: 1fr; gap: 32px; }
  .footer-pro__top  { grid-template-columns: 1fr; }
  .footer-pro__cols { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
  .numbers-bento {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "large  large"
      "mid1   right1"
      "wide   wide";
  }
  .nbc--large { min-height: auto; flex-direction: row; align-items: flex-end; gap: 20px; }
  .nbc__bars  { height: 72px; flex: 1; margin-top: 0; padding-top: 0; }
}

@media (max-width: 820px) {
  .nav-links {
    display: none;
    position: absolute;
    left: 20px; right: 20px; top: 66px;
    padding: 12px;
    border-radius: 16px;
    border: 1px solid var(--stroke);
    background: rgba(244,247,252,.96);
    backdrop-filter: blur(14px);
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    z-index: 999;
  }
  .nav-links.open        { display: flex; }
  .nav-toggle            { display: flex; }
  .nav-cta .btn:not(.gold) { display: none; }
  .cards-3               { grid-template-columns: 1fr 1fr; }
  .faq-grid              { grid-template-columns: 1fr; }
  .footer-pro__cols      { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .numbers-bento {
    grid-template-columns: 1fr;
    grid-template-areas:
      "large"
      "mid1"
      "right1"
      "wide";
  }
  .nbc--large    { flex-direction: column; }
  .nbc__bars     { height: 80px; width: 100%; flex: none; margin-top: 18px; padding-top: 0; }
  .nbc__val      { font-size: clamp(44px, 12vw, 64px); }
  .nbc__days-val { font-size: clamp(52px, 14vw, 80px); }
  .cards-3       { grid-template-columns: 1fr; }
  .lang-logos    { grid-template-columns: repeat(4, 1fr); }
  .footer-pro__cols  { grid-template-columns: 1fr; }
  .cta-band__inner   { flex-direction: column; align-items: flex-start; }
}

/* =============================================================
   CURRENCY DATA API PAGE
   ============================================================= */

/* --- Hero --- */
.cd-hero {
  background:
    radial-gradient(ellipse 800px 500px at 80% 20%, rgba(43,127,255,.10), transparent 60%),
    radial-gradient(ellipse 600px 400px at 10% 80%, rgba(253,185,19,.07), transparent 60%),
    linear-gradient(180deg, #EEF3FC 0%, var(--bg) 100%);
  padding: 72px 0 80px;
  overflow: hidden;
  position: relative;
}

.cd-hero__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}

.cd-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 13px;
  border-radius: 999px;
  background: var(--blue-light);
  border: 1px solid rgba(43,127,255,.20);
  color: var(--blue);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.cd-hero__title {
  font-size: clamp(34px, 4vw, 58px);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -1.4px;
  color: var(--ink);
  margin-bottom: 18px;
}

.cd-hero__title .accent { color: var(--blue); }

.cd-hero__lead {
  font-size: 16.5px;
  color: var(--muted);
  line-height: 1.65;
  max-width: 50ch;
  margin-bottom: 32px;
}

/* Pricing Quick-Pick */
.cd-plans {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cd-plan {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border-radius: var(--radius);
  border: 1px solid var(--stroke);
  background: var(--white);
  box-shadow: var(--shadow2);
  flex-wrap: wrap;
}

.cd-plan__info { flex: 1; min-width: 140px; }
.cd-plan__name { font-weight: 700; font-size: 14.5px; margin-bottom: 3px; }
.cd-plan__sub  { font-size: 13px; color: var(--muted); }
.cd-plan__sub strong { color: var(--blue); font-weight: 600; }

.cd-plan__price {
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
  white-space: nowrap;
  text-align: right;
}

.cd-plan__price small {
  display: block;
  font-size: 12px;
  color: var(--muted2);
  font-weight: 400;
}

/* --- Hero Visual: Live Rate Ticker --- */
.cd-hero__visual { position: relative; }

.cd-ticker {
  background: var(--white);
  border-radius: var(--radius2);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.cd-ticker__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  background: var(--navy2);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.cd-ticker__dots { display: flex; gap: 6px; }
.cd-ticker__dots span { width: 10px; height: 10px; border-radius: 50%; }
.cd-ticker__dots span:nth-child(1) { background: #FF5F57; }
.cd-ticker__dots span:nth-child(2) { background: #FEBC2E; }
.cd-ticker__dots span:nth-child(3) { background: #28C840; }

.cd-ticker__label {
  font-size: 12px;
  color: rgba(255,255,255,.55);
  font-family: var(--mono);
  font-weight: 500;
}

.cd-ticker__live {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--green);
  font-weight: 700;
  font-family: var(--mono);
}

.cd-ticker__live-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--green);
  animation: pulse 1.6s ease-in-out infinite;
}

.cd-ticker__pairs {
  padding: 6px 0;
}

.cd-ticker__pair {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 16px;
  border-bottom: 1px solid var(--stroke2);
  transition: background .15s;
}

.cd-ticker__pair:last-child { border-bottom: none; }
.cd-ticker__pair:hover { background: var(--bg); }

.cd-pair__symbols {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cd-pair__flags {
  display: flex;
}

.cd-pair__flag {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 14px;
  border: 2px solid var(--white);
  background: var(--bg);
}

.cd-pair__flag:nth-child(2) { margin-left: -8px; }

.cd-pair__code {
  font-weight: 700;
  font-size: 13.5px;
  color: var(--ink);
  font-family: var(--mono);
}

.cd-pair__name { font-size: 11.5px; color: var(--muted2); }

.cd-pair__rate  { font-weight: 700; font-size: 14px; color: var(--ink); font-family: var(--mono); }

.cd-pair__change {
  font-size: 12px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  font-family: var(--mono);
}

.cd-pair__change.up   { background: rgba(34,197,94,.12); color: #16A34A; }
.cd-pair__change.down { background: rgba(224,32,32,.10); color: var(--red); }

.cd-ticker__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-top: 1px solid var(--stroke2);
  background: var(--bg);
  font-size: 12px;
  color: var(--muted2);
}

.cd-ticker__refresh {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--blue);
  font-weight: 600;
  cursor: pointer;
}

/* --- Currency Symbol Grid --- */
.cd-symbols-section {
  padding: 80px 0;
  background: var(--white);
  border-top: 1px solid var(--stroke2);
  border-bottom: 1px solid var(--stroke2);
}

.cd-symbols__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}

.cd-symbols__text h2 {
  font-size: clamp(28px, 3.2vw, 44px);
  font-weight: 700;
  letter-spacing: -1px;
  line-height: 1.1;
  margin-bottom: 14px;
}

.cd-symbols__text h2 .accent { color: var(--blue); }

.cd-symbols__text p {
  font-size: 15.5px;
  color: var(--muted);
  line-height: 1.65;
  max-width: 48ch;
  margin-bottom: 24px;
}

.cd-symbol-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.cd-symbol-tile {
  /* aspect-ratio: 1; */
  border-radius: 18px;
  border: 1px solid var(--stroke);
  background: var(--bg);
  display: grid;
  /* place-items: center; */
  font-size: 28px;
  font-weight: 700;
  transition: transform .18s, box-shadow .18s, border-color .18s;
  cursor: default;
  position: relative;
  overflow: hidden;
}

.cd-symbol-tile:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow2);
  border-color: rgba(43,127,255,.20);
}

.cd-symbol-tile span { position: relative; z-index: 1; }

.cd-symbol-tile--blue   { color: var(--blue); }
.cd-symbol-tile--gold   { color: var(--gold); }
.cd-symbol-tile--red    { color: var(--red); }
.cd-symbol-tile--green  { color: var(--green); }
.cd-symbol-tile--navy   { color: var(--navy); }
.cd-symbol-tile--muted  { color: var(--muted); }

/* --- Why Us Grid --- */
.cd-why {
  padding: 80px 0;
  background: var(--bg);
}

.cd-why__head {
  text-align: center;
  margin-bottom: 44px;
}

.cd-why__head h2 {
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 700;
  letter-spacing: -.8px;
  margin-bottom: 10px;
}

.cd-why__head p { color: var(--muted); font-size: 16px; max-width: 52ch; margin: 0 auto; }

.cd-why__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-radius: var(--radius2);
  border: 1px solid var(--stroke);
  background: var(--white);
  box-shadow: var(--shadow2);
  overflow: hidden;
}

.cd-why__card {
  padding: 28px 26px;
  border-right: 1px solid var(--stroke2);
  border-bottom: 1px solid var(--stroke2);
  transition: background .2s;
}

.cd-why__card:hover { background: #FAFBFF; }
.cd-why__card:nth-child(3n) { border-right: none; }
.cd-why__card:nth-child(4),
.cd-why__card:nth-child(5),
.cd-why__card:nth-child(6) { border-bottom: none; }

.cd-why__icon {
  width: 42px; height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  margin-bottom: 14px;
  background: var(--blue-light);
  border: 1px solid rgba(43,127,255,.18);
}

.cd-why__icon.gold-ico  { background: var(--gold-light);          border-color: rgba(253,185,19,.22); }
.cd-why__icon.green-ico { background: rgba(34,197,94,.10);        border-color: rgba(34,197,94,.22); }
.cd-why__icon.red-ico   { background: rgba(224,32,32,.10);        border-color: rgba(224,32,32,.18); }
.cd-why__icon svg { width: 20px; height: 20px; color: var(--blue); }
.cd-why__icon.gold-ico svg  { color: #B45309; }
.cd-why__icon.green-ico svg { color: var(--green); }
.cd-why__icon.red-ico svg   { color: var(--red); }

.cd-why__card h3 { font-size: 15px; font-weight: 700; margin-bottom: 8px; letter-spacing: -.2px; }
.cd-why__card p  { font-size: 13.5px; color: var(--muted); line-height: 1.6; }

/* --- Pricing --- */
.cd-pricing {
  padding: 88px 0;
  background: var(--white);
  border-top: 1px solid var(--stroke2);
}

.cd-pricing__head {
  text-align: center;
  margin-bottom: 16px;
}

.cd-pricing__head h2 {
  font-size: clamp(28px, 3.2vw, 44px);
  font-weight: 700;
  letter-spacing: -.9px;
  margin-bottom: 20px;
}

.cd-billing-toggle {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 6px 6px;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--stroke);
  margin-bottom: 10px;
}

.cd-billing-toggle__label {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: color .18s;
}

.cd-billing-toggle__label.active {
  color: var(--ink);
  background: var(--white);
  box-shadow: var(--shadow2);
}

.cd-billing-toggle__track {
  width: 42px; height: 24px;
  border-radius: 999px;
  background: var(--blue);
  position: relative;
  cursor: pointer;
  transition: background .2s;
  flex-shrink: 0;
}

.cd-billing-toggle__thumb {
  position: absolute;
  top: 3px; left: 3px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--white);
  transition: transform .2s;
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
}

.cd-billing-toggle__track.yearly .cd-billing-toggle__thumb { transform: translateX(18px); }

.cd-billing-save {
  font-size: 13.5px;
  color: var(--muted);
  margin-bottom: 44px;
}

.cd-billing-save strong { color: var(--blue); font-weight: 700; }

.cd-plans-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  align-items: end;
}

.cd-price-card {
  border-radius: var(--radius2);
  border: 1px solid var(--stroke);
  background: var(--white);
  box-shadow: var(--shadow2);
  padding: 24px 20px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  transition: transform .2s, box-shadow .2s;
}

.cd-price-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }

.cd-price-card--featured {
  background: var(--blue);
  border-color: var(--blue-dark);
  box-shadow: 0 20px 60px rgba(43,127,255,.30);
  transform: translateY(-8px);
  color: var(--white);
}

.cd-price-card--featured:hover { transform: translateY(-12px); }

.cd-price-card__badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gold);
  color: var(--navy);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(253,185,19,.30);
}

.cd-price-card__icon {
  width: 46px; height: 46px;
  border-radius: 14px;
  background: var(--blue-light);
  border: 1px solid rgba(43,127,255,.18);
  display: grid;
  place-items: center;
  margin: 0 auto 12px;
}

.cd-price-card--featured .cd-price-card__icon {
  background: rgba(255,255,255,.15);
  border-color: rgba(255,255,255,.25);
}

.cd-price-card__icon svg { width: 22px; height: 22px; color: var(--blue); }
.cd-price-card--featured .cd-price-card__icon svg { color: var(--white); }

.cd-price-card__tier {
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--muted2);
  margin-bottom: 8px;
}

.cd-price-card--featured .cd-price-card__tier { color: rgba(255,255,255,.70); }

.cd-price-card__desc {
  text-align: center;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.55;
  min-height: 48px;
  margin-bottom: 16px;
}

.cd-price-card--featured .cd-price-card__desc { color: rgba(255,255,255,.72); }

.cd-price-card__amount {
  text-align: center;
  margin-bottom: 4px;
}

.cd-price-card__amount .price-num {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -1px;
  color: var(--ink);
  line-height: 1;
}

.cd-price-card--featured .cd-price-card__amount .price-num { color: var(--white); }

.cd-price-card__period {
  text-align: center;
  font-size: 12px;
  color: var(--muted2);
  margin-bottom: 18px;
}

.cd-price-card--featured .cd-price-card__period { color: rgba(255,255,255,.60); }

.cd-price-card__cta {
  display: block;
  width: 100%;
  padding: 12px;
  border-radius: 12px;
  border: 1.5px solid var(--blue);
  background: transparent;
  color: var(--blue);
  font-weight: 700;
  font-size: 14px;
  font-family: var(--sans);
  text-align: center;
  cursor: pointer;
  transition: background .18s, color .18s, transform .15s, box-shadow .18s;
  margin-bottom: 20px;
}

.cd-price-card__cta:hover {
  background: var(--blue);
  color: var(--white);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(43,127,255,.28);
}

.cd-price-card--featured .cd-price-card__cta {
  background: var(--white);
  border-color: var(--white);
  color: var(--blue);
  box-shadow: 0 6px 20px rgba(0,0,0,.15);
}

.cd-price-card--featured .cd-price-card__cta:hover { opacity: .92; }

.cd-price-card__features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding-top: 16px;
  border-top: 1px solid var(--stroke2);
}

.cd-price-card--featured .cd-price-card__features { border-color: rgba(255,255,255,.16); }

.cd-price-card__features li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.45;
}

.cd-price-card--featured .cd-price-card__features li { color: rgba(255,255,255,.78); }

.cd-feat-icon {
  width: 16px; height: 16px;
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--blue);
}

.cd-price-card--featured .cd-feat-icon { color: var(--gold); }

/* --- Endpoint Explorer --- */
.cd-endpoints {
  padding: 80px 0;
  background: var(--bg);
  border-top: 1px solid var(--stroke2);
}

.cd-endpoints__grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 48px;
  align-items: start;
}

.cd-endpoints__text h2 {
  font-size: clamp(26px, 2.8vw, 38px);
  font-weight: 700;
  letter-spacing: -.7px;
  line-height: 1.12;
  margin-bottom: 12px;
}

.cd-endpoints__text p { color: var(--muted); font-size: 15.5px; line-height: 1.65; margin-bottom: 24px; }

.cd-endpoint-list { display: flex; flex-direction: column; gap: 8px; }

.cd-endpoint {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--stroke);
  background: var(--white);
  cursor: pointer;
  transition: border-color .18s, box-shadow .18s, background .18s;
  font-size: 13.5px;
}

.cd-endpoint:hover { border-color: rgba(43,127,255,.30); box-shadow: 0 0 0 4px rgba(43,127,255,.07); }

.cd-endpoint.active {
  border-color: var(--blue);
  background: var(--blue-light);
  box-shadow: 0 0 0 4px rgba(43,127,255,.10);
}

.cd-endpoint__path { font-family: var(--mono); font-size: 12.5px; color: var(--muted); }
.cd-endpoint.active .cd-endpoint__path { color: var(--blue-dark); }

.cd-endpoint__desc { font-size: 12px; color: var(--muted2); margin-left: auto; white-space: nowrap; }

.cd-code-panel {
  background: var(--navy2);
  border-radius: var(--radius2);
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: var(--shadow);
  overflow: hidden;
  position: sticky;
  top: 88px;
}

.cd-code-panel__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.03);
}

.cd-code-panel__label { font-size: 12px; color: rgba(255,255,255,.55); font-family: var(--mono); }

.cd-code-panel__copy {
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(255,255,255,.55);
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  cursor: pointer;
  transition: background .18s, color .18s;
  font-family: var(--sans);
}

.cd-code-panel__copy:hover { background: rgba(255,255,255,.08); color: rgba(255,255,255,.82); }

.cd-code-panel__body {
  padding: 20px;
  min-height: 260px;
  overflow-x: auto;
}

.cd-code {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.75;
  color: rgba(255,255,255,.82);
  white-space: pre;
}

.cd-code .c-blue   { color: #79C0FF; }
.cd-code .c-green  { color: #56D364; }
.cd-code .c-gold   { color: #E3B341; }
.cd-code .c-purple { color: #D2A8FF; }
.cd-code .c-gray   { color: rgba(255,255,255,.35); }
.cd-code .c-red    { color: #FF7B72; }

.cd-code-panel__response {
  padding: 14px 16px;
  border-top: 1px solid rgba(255,255,255,.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 11.5px;
  color: rgba(255,255,255,.45);
}

/* --- Stats Band --- */
.cd-stats {
  background: var(--navy2);
  padding: 64px 0;
  position: relative;
  overflow: hidden;
}

.cd-stats::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(600px 300px at 15% 50%, rgba(43,127,255,.18), transparent 60%),
    radial-gradient(500px 300px at 85% 30%, rgba(253,185,19,.10), transparent 60%);
  pointer-events: none;
}

.cd-stats__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

.cd-stat {
  padding: 28px 24px;
  border-right: 1px solid rgba(255,255,255,.07);
  text-align: center;
}

.cd-stat:last-child { border-right: none; }

.cd-stat__val {
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 700;
  color: var(--white);
  letter-spacing: -1px;
  margin-bottom: 6px;
  line-height: 1;
}

.cd-stat__val .suf { color: var(--gold); }
.cd-stat__label { font-size: 13.5px; color: rgba(255,255,255,.52); font-weight: 400; line-height: 1.4; }

/* --- CTA Band (reused from main, with override) --- */
.cd-cta { padding: 80px 0; background: var(--white); border-top: 1px solid var(--stroke2); }

.cd-cta__inner {
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
}

.cd-cta__inner h2 {
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 700;
  letter-spacing: -.8px;
  margin-bottom: 12px;
  color: var(--ink);
}

.cd-cta__inner p { font-size: 16px; color: var(--muted); margin-bottom: 28px; line-height: 1.65; }
.cd-cta__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* --- Currency Data Responsive --- */
@media (max-width: 1060px) {
  .cd-plans-grid { grid-template-columns: repeat(3, 1fr); }
  .cd-plans-grid .cd-price-card:nth-child(4),
  .cd-plans-grid .cd-price-card:nth-child(5) {
    grid-column: span 1;
  }
}

@media (max-width: 900px) {
  .cd-hero__grid     { grid-template-columns: 1fr; gap: 36px; }
  .cd-symbols__grid  { grid-template-columns: 1fr; gap: 36px; }
  .cd-endpoints__grid { grid-template-columns: 1fr; }
  .cd-why__grid      { grid-template-columns: 1fr 1fr; }
  .cd-why__card:nth-child(3n)    { border-right: 1px solid var(--stroke2); }
  .cd-why__card:nth-child(2n)    { border-right: none; }
  .cd-why__card:nth-child(3),
  .cd-why__card:nth-child(4)     { border-bottom: 1px solid var(--stroke2); }
  .cd-why__card:nth-child(5),
  .cd-why__card:nth-child(6)     { border-bottom: none; }
  .cd-stats__grid    { grid-template-columns: repeat(2, 1fr); }
  .cd-stat:nth-child(2) { border-right: none; }
  .cd-stat:nth-child(3) { border-right: 1px solid rgba(255,255,255,.07); border-top: 1px solid rgba(255,255,255,.07); }
  .cd-stat:nth-child(4) { border-top: 1px solid rgba(255,255,255,.07); border-right: none; }
  .cd-plans-grid { grid-template-columns: repeat(2, 1fr); }
  .cd-price-card--featured { transform: none; }
  .cd-price-card--featured:hover { transform: translateY(-3px); }
}

@media (max-width: 640px) {
  .cd-plans-grid { grid-template-columns: 1fr; }
  .cd-why__grid  { grid-template-columns: 1fr; }
  .cd-why__card  { border-right: none !important; border-bottom: 1px solid var(--stroke2) !important; }
  .cd-why__card:last-child { border-bottom: none !important; }
  .cd-symbol-tiles { grid-template-columns: repeat(4, 1fr); }
  .cd-stats__grid { grid-template-columns: 1fr 1fr; }
}


/* =============================================================
   AUTH PAGES — SHARED
   ============================================================= */

.auth-root {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--bg);
  overflow: hidden;
}

/* ---- Left panel (form side) ---- */
.auth-left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 40px 52px;
  background: var(--white);
  position: relative;
  overflow: hidden;
}

.auth-left::before {
  content: "";
  position: absolute;
  width: 380px; height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(43,127,255,.06) 0%, transparent 70%);
  top: -120px; left: -120px;
  pointer-events: none;
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -.3px;
  color: var(--ink);
  text-decoration: none;
}

.auth-brand__mark {
  width: 32px; height: 32px;
  flex-shrink: 0;
}

.auth-form-wrap {
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
}

.auth-heading {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -.6px;
  color: var(--ink);
  margin-bottom: 6px;
  line-height: 1.2;
}

.auth-sub {
  font-size: 14.5px;
  color: var(--muted);
  margin-bottom: 28px;
  line-height: 1.55;
}

/* Form elements */
.auth-field {
  margin-bottom: 16px;
}

.auth-field label {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 7px;
}

.auth-field__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 7px;
}

.auth-field__row label { margin-bottom: 0; }

.auth-forgot {
  font-size: 13px;
  color: var(--blue);
  font-weight: 600;
  text-decoration: none;
}

.auth-forgot:hover { text-decoration: underline; }

.auth-input {
  width: 100%;
  padding: 13px 15px;
  border-radius: 13px;
  border: 1.5px solid var(--stroke);
  background: var(--bg);
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink);
  outline: none;
  transition: border-color .18s, box-shadow .18s, background .18s;
}

.auth-input::placeholder { color: var(--muted2); }

.auth-input:focus {
  border-color: var(--blue);
  background: var(--white);
  box-shadow: 0 0 0 4px rgba(43,127,255,.10);
}

.auth-input.error {
  border-color: var(--red);
  box-shadow: 0 0 0 4px rgba(224,32,32,.08);
}

.auth-input-wrap {
  position: relative;
}

.auth-input-wrap .auth-input { padding-right: 44px; }

.auth-eye {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted2);
  display: grid;
  place-items: center;
  padding: 4px;
  border-radius: 6px;
  transition: color .18s;
}

.auth-eye:hover { color: var(--ink); }

.auth-error-msg {
  font-size: 12.5px;
  color: var(--red);
  margin-top: 5px;
  display: none;
}

.auth-field.has-error .auth-error-msg { display: block; }

.auth-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.auth-check-row {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 20px;
}

.auth-check-row input[type="checkbox"] {
  width: 17px; height: 17px;
  accent-color: var(--blue);
  cursor: pointer;
  flex-shrink: 0;
  border-radius: 4px;
}

.auth-check-row label {
  font-size: 13.5px;
  color: var(--muted);
  cursor: pointer;
}

.auth-check-row label a { color: var(--blue); font-weight: 600; }

/* Main CTA button */
.auth-btn {
  width: 100%;
  padding: 14px;
  border-radius: 13px;
  border: none;
  background: var(--blue);
  color: var(--white);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background .18s, transform .15s, box-shadow .18s;
  box-shadow: 0 4px 18px rgba(43,127,255,.28);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.auth-btn:hover {
  background: var(--blue-dark);
  transform: translateY(-1px);
  box-shadow: 0 8px 28px rgba(43,127,255,.34);
}

.auth-btn:active { transform: scale(.99); }

.auth-btn--gold {
  background: var(--gold);
  color: var(--navy);
  box-shadow: 0 4px 18px rgba(253,185,19,.22);
}

.auth-btn--gold:hover {
  background: #e5a810;
  box-shadow: 0 8px 28px rgba(253,185,19,.30);
}

/* Divider */
.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 0 18px;
  color: var(--muted2);
  font-size: 13px;
  font-weight: 500;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--stroke);
}

/* Social sign-in buttons */
.auth-socials {
  display: flex;
  gap: 10px;
}

.auth-social {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 10px;
  border-radius: 12px;
  border: 1.5px solid var(--stroke);
  background: var(--white);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition: background .18s, border-color .18s, box-shadow .15s, transform .15s;
  text-decoration: none;
}

.auth-social:hover {
  background: var(--bg);
  border-color: rgba(43,127,255,.25);
  box-shadow: var(--shadow2);
  transform: translateY(-1px);
}

.auth-social svg,
.auth-social img { width: 18px; height: 18px; flex-shrink: 0; }

/* Auth switcher */
.auth-switch {
  text-align: center;
  font-size: 13.5px;
  color: var(--muted);
  margin-top: 22px;
}

.auth-switch a {
  color: var(--blue);
  font-weight: 700;
  text-decoration: none;
}

.auth-switch a:hover { text-decoration: underline; }

/* Legal footer */
.auth-legal {
  font-size: 12px;
  color: var(--muted2);
  line-height: 1.55;
}

.auth-legal a { color: var(--blue); }

/* ---- Right panel (visual side) ---- */
.auth-right {
  position: relative;
  background:
    radial-gradient(ellipse 700px 500px at 30% 20%, rgba(43,127,255,.22), transparent 60%),
    radial-gradient(ellipse 500px 400px at 80% 80%, rgba(253,185,19,.12), transparent 60%),
    linear-gradient(145deg, #0D1117 0%, #111827 55%, #0f1a2e 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 40px;
  overflow: hidden;
}

.auth-right::before {
  content: "";
  position: absolute;
  width: 500px; height: 500px;
  border-radius: 50%;
  border: 1px solid rgba(43,127,255,.12);
  top: -180px; right: -180px;
  pointer-events: none;
}

.auth-right::after {
  content: "";
  position: absolute;
  width: 360px; height: 360px;
  border-radius: 50%;
  border: 1px solid rgba(253,185,19,.08);
  bottom: -140px; left: -100px;
  pointer-events: none;
}

/* Floating metric cards */
.auth-visual {
  position: relative;
  width: 100%;
  max-width: 400px;
}

.auth-visual__card {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 20px;
  padding: 22px;
  backdrop-filter: blur(12px);
  width: 100%;
}

.auth-visual__title {
  font-size: 22px;
  font-weight: 700;
  color: var(--white);
  letter-spacing: -.5px;
  margin-bottom: 6px;
}

.auth-visual__sub {
  font-size: 13.5px;
  color: rgba(255,255,255,.52);
  margin-bottom: 22px;
  line-height: 1.55;
}

.auth-visual__metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 18px;
}

.auth-metric {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 14px;
}

.auth-metric__val {
  font-size: 22px;
  font-weight: 700;
  color: var(--white);
  letter-spacing: -.5px;
  margin-bottom: 3px;
  line-height: 1;
}

.auth-metric__val .suf { color: var(--gold); font-size: 16px; }
.auth-metric__lbl { font-size: 11.5px; color: rgba(255,255,255,.48); font-weight: 400; }

/* Activity bar */
.auth-activity {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.auth-activity__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12.5px;
}

.auth-activity__label { color: rgba(255,255,255,.55); }

.auth-activity__bar-wrap {
  flex: 1;
  height: 5px;
  border-radius: 99px;
  background: rgba(255,255,255,.08);
  margin: 0 10px;
  overflow: hidden;
}

.auth-activity__bar {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--blue), var(--gold));
}

.auth-activity__val {
  color: rgba(255,255,255,.72);
  font-weight: 600;
  font-family: var(--mono);
  font-size: 12px;
  min-width: 36px;
  text-align: right;
}

/* Floating chips around visual */
.auth-chip {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
  color: rgba(255,255,255,.85);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.auth-chip__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.auth-chip--1 { top: -24px; right: -10px; }
.auth-chip--2 { bottom: 20px; left: -30px; }

/* Testimonial card */
.auth-testimonial {
  position: absolute;
  bottom: 48px;
  left: 40px;
  right: 40px;
  background: rgba(13,17,23,.78);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  padding: 18px 20px;
  backdrop-filter: blur(16px);
}

.auth-testimonial__quote {
  font-size: 13px;
  color: rgba(255,255,255,.75);
  line-height: 1.6;
  margin-bottom: 12px;
  font-style: italic;
}

.auth-testimonial__author {
  display: flex;
  align-items: center;
  gap: 10px;
}

.auth-testimonial__avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), var(--gold));
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--white);
  flex-shrink: 0;
}

.auth-testimonial__name { font-size: 13px; font-weight: 700; color: rgba(255,255,255,.90); }
.auth-testimonial__role { font-size: 11.5px; color: rgba(255,255,255,.48); }

/* Right panel headline */
.auth-right__headline {
  text-align: center;
  margin-bottom: 32px;
  position: relative;
  z-index: 1;
}

.auth-right__headline h2 {
  font-size: clamp(24px, 2.8vw, 36px);
  font-weight: 700;
  color: var(--white);
  letter-spacing: -.6px;
  line-height: 1.2;
  margin-bottom: 10px;
}

.auth-right__headline p {
  font-size: 14.5px;
  color: rgba(255,255,255,.55);
  line-height: 1.6;
  max-width: 38ch;
  margin: 0 auto;
}

/* Steps (for verify / reset pages) */
.auth-steps {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 24px;
}

.auth-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.auth-step__num {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--blue-light);
  border: 1.5px solid rgba(43,127,255,.25);
  color: var(--blue);
  font-size: 12px;
  font-weight: 700;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.auth-step__text { font-size: 13.5px; color: rgba(255,255,255,.65); line-height: 1.55; }
.auth-step__text strong { color: rgba(255,255,255,.90); display: block; font-size: 14px; margin-bottom: 2px; }

/* OTP input row */
.auth-otp {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin: 4px 0 20px;
}

.auth-otp__digit {
  width: 52px; height: 58px;
  border-radius: 13px;
  border: 1.5px solid var(--stroke);
  background: var(--bg);
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  text-align: center;
  outline: none;
  transition: border-color .18s, box-shadow .18s, background .18s;
}

.auth-otp__digit:focus {
  border-color: var(--blue);
  background: var(--white);
  box-shadow: 0 0 0 4px rgba(43,127,255,.10);
}

/* Password strength meter */
.auth-strength {
  margin-top: 8px;
  display: flex;
  gap: 5px;
  align-items: center;
}

.auth-strength__bars {
  display: flex;
  gap: 4px;
  flex: 1;
}

.auth-strength__bar {
  height: 4px;
  flex: 1;
  border-radius: 99px;
  background: var(--stroke);
  transition: background .25s;
}

.auth-strength__bar.weak   { background: var(--red); }
.auth-strength__bar.fair   { background: var(--gold); }
.auth-strength__bar.strong { background: var(--green); }

.auth-strength__label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted2);
  min-width: 46px;
  text-align: right;
}

/* Success state (verify / reset done) */
.auth-success-ico {
  width: 62px; height: 62px;
  border-radius: 50%;
  background: rgba(34,197,94,.12);
  border: 1.5px solid rgba(34,197,94,.28);
  display: grid;
  place-items: center;
  margin: 0 auto 18px;
}

.auth-success-ico svg { width: 28px; height: 28px; color: var(--green); }

.auth-back-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  margin-bottom: 28px;
  padding: 8px 0;
  transition: color .18s;
}

.auth-back-link:hover { color: var(--blue); }

/* Progress dots */
.auth-progress {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-bottom: 28px;
}

.auth-progress__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--stroke);
  transition: background .2s, transform .2s;
}

.auth-progress__dot.active {
  background: var(--blue);
  transform: scale(1.2);
}

.auth-progress__dot.done { background: var(--green); }

/* Resend */
.auth-resend {
  text-align: center;
  font-size: 13px;
  color: var(--muted2);
  margin-top: 14px;
}

.auth-resend button {
  background: none;
  border: none;
  color: var(--blue);
  font-weight: 700;
  font-size: 13px;
  font-family: var(--sans);
  cursor: pointer;
  padding: 0;
}

.auth-resend button:hover { text-decoration: underline; }

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .auth-root { grid-template-columns: 1fr; }
  .auth-right { display: none; }
  .auth-left { padding: 32px 24px; min-height: 100vh; }
  .auth-form-wrap { max-width: 100%; }
}

@media (max-width: 480px) {
  .auth-left { padding: 28px 20px; }
  .auth-row-2 { grid-template-columns: 1fr; }
  .auth-otp__digit { width: 44px; height: 52px; font-size: 18px; }
}


/* =============================================================
   SANCTIONS & NAME SEARCH PAGE
   ============================================================= */

/* --- Dark hero --- */
.sn-hero {
  background:
    radial-gradient(ellipse 900px 600px at 50% -10%,  rgba(43,127,255,.28), transparent 60%),
    radial-gradient(ellipse 600px 400px at 85%  80%,  rgba(253,185,19,.10), transparent 60%),
    radial-gradient(ellipse 500px 350px at  5%  70%,  rgba(34,197,94,.08),  transparent 60%),
    linear-gradient(180deg, #05090F 0%, #0A1020 60%, #0D1117 100%);
  padding: 100px 0 80px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.sn-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.018'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}

.sn-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(43,127,255,.15);
  border: 1px solid rgba(43,127,255,.30);
  color: #79C0FF;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 22px;
  position: relative;
}

.sn-hero__title {
  font-size: clamp(38px, 5.5vw, 72px);
  font-weight: 700;
  color: var(--white);
  letter-spacing: -2px;
  line-height: 1.05;
  margin-bottom: 20px;
  position: relative;
}

.sn-hero__title .accent-gold  { color: var(--gold); }
.sn-hero__title .accent-green { color: var(--green); }
.sn-hero__title .accent-blue  { color: #79C0FF; }

.sn-hero__lead {
  font-size: 17px;
  color: rgba(255,255,255,.60);
  line-height: 1.65;
  max-width: 58ch;
  margin: 0 auto 32px;
  position: relative;
}

.sn-hero__actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 40px;
  position: relative;
}

.btn.sn-green {
  background: var(--green);
  color: var(--navy2);
  border-color: #1aae52;
  font-weight: 700;
  box-shadow: 0 4px 18px rgba(34,197,94,.28);
}
.btn.sn-green:hover { background: #1aae52; box-shadow: 0 8px 28px rgba(34,197,94,.36); }

.btn.sn-ghost {
  background: rgba(255,255,255,.08);
  color: var(--white);
  border-color: rgba(255,255,255,.18);
  font-weight: 600;
}
.btn.sn-ghost:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.28); }

/* Live search bar */
.sn-search-wrap {
  position: relative;
  max-width: 640px;
  margin: 0 auto 14px;
}

.sn-search {
  width: 100%;
  padding: 18px 130px 18px 52px;
  border-radius: 999px;
  border: 1.5px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.07);
  backdrop-filter: blur(16px);
  color: var(--white);
  font-family: var(--sans);
  font-size: 15px;
  outline: none;
  transition: border-color .2s, background .2s, box-shadow .2s;
}

.sn-search::placeholder { color: rgba(255,255,255,.42); }

.sn-search:focus {
  border-color: rgba(43,127,255,.55);
  background: rgba(255,255,255,.10);
  box-shadow: 0 0 0 5px rgba(43,127,255,.15);
}

.sn-search__ico {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255,255,255,.45);
  display: grid;
  place-items: center;
}

.sn-search__btn {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  padding: 11px 22px;
  border-radius: 999px;
  background: var(--blue);
  color: var(--white);
  border: none;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background .18s, box-shadow .18s;
  box-shadow: 0 4px 16px rgba(43,127,255,.30);
}

.sn-search__btn:hover { background: var(--blue-dark); box-shadow: 0 6px 20px rgba(43,127,255,.40); }

.sn-search__credits {
  font-size: 13px;
  color: rgba(255,255,255,.40);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.sn-search__credits .dot { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,.30); }
.sn-search__credits strong { color: var(--green); }

/* Trust logos bar */
.sn-trust {
  padding: 20px 0;
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.03);
}

.sn-trust__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.sn-trust__label {
  font-size: 12.5px;
  color: rgba(255,255,255,.40);
  font-weight: 500;
  white-space: nowrap;
}

.sn-trust__chips {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.sn-trust__chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.09);
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,.65);
}

/* --- Solutions Grid --- */
.sn-solutions {
  padding: 80px 0;
  background: var(--bg);
}

.sn-solutions__head {
  margin-bottom: 40px;
}

.sn-solutions__head h2 {
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 700;
  letter-spacing: -.8px;
  margin-bottom: 10px;
}

.sn-solutions__head p {
  font-size: 15.5px;
  color: var(--muted);
  max-width: 56ch;
  line-height: 1.65;
}

.sn-sol-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.sn-sol-card {
  background: var(--white);
  border: 1px solid var(--stroke);
  border-radius: var(--radius2);
  box-shadow: var(--shadow2);
  padding: 28px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}

.sn-sol-card:hover {
  border-color: rgba(43,127,255,.22);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.sn-sol-card__visual {
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(43,127,255,.08), rgba(34,197,94,.06));
  border: 1px solid var(--stroke2);
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.sn-sol-card__visual-inner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sn-sol-card__visual svg.illustration {
  width: 75%;
  height: 75%;
  opacity: .85;
}

.sn-sol-card__content { display: flex; flex-direction: column; justify-content: space-between; }

.sn-sol-card__title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.3px;
  margin-bottom: 10px;
  color: var(--ink);
}

.sn-sol-card__desc {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.65;
  margin-bottom: 14px;
}

.sn-sol-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 18px;
}

.sn-sol-features li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.sn-sol-features li::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blue);
  flex-shrink: 0;
  margin-top: 4px;
}

.sn-sol-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--blue);
  color: var(--white);
  font-size: 13.5px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  font-family: var(--sans);
  text-decoration: none;
  transition: background .18s, transform .15s, box-shadow .18s;
  box-shadow: 0 4px 14px rgba(43,127,255,.22);
  align-self: flex-start;
}

.sn-sol-card__cta:hover {
  background: var(--blue-dark);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(43,127,255,.30);
}

/* --- Workflows (dark section) --- */
.sn-workflows {
  background:
    radial-gradient(ellipse 800px 500px at 10% 30%, rgba(43,127,255,.15), transparent 60%),
    radial-gradient(ellipse 600px 400px at 90% 70%, rgba(34,197,94,.08), transparent 60%),
    linear-gradient(180deg, #07090E 0%, #0A0F1A 100%);
  padding: 88px 0;
  position: relative;
  overflow: hidden;
}

.sn-workflows__head {
  text-align: center;
  margin-bottom: 52px;
}

.sn-workflows__head h2 {
  font-size: clamp(28px, 3.5vw, 46px);
  font-weight: 700;
  color: var(--white);
  letter-spacing: -1px;
  line-height: 1.1;
  margin-bottom: 12px;
}

.sn-workflows__head p {
  font-size: 16px;
  color: rgba(255,255,255,.52);
  max-width: 58ch;
  margin: 0 auto;
  line-height: 1.65;
}

.sn-wf-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sn-wf-card {
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(8px);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  min-height: 240px;
  transition: border-color .25s, background .25s;
}

.sn-wf-card:hover {
  border-color: rgba(255,255,255,.13);
  background: rgba(255,255,255,.06);
}

.sn-wf-card--flip { direction: rtl; }
.sn-wf-card--flip > * { direction: ltr; }

.sn-wf-card__visual {
  height: 100%;
  min-height: 240px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sn-wf-card__visual--blue {
  background: linear-gradient(145deg, rgba(43,127,255,.20) 0%, rgba(43,127,255,.05) 100%);
}

.sn-wf-card__visual--purple {
  background: linear-gradient(145deg, rgba(120,60,220,.22) 0%, rgba(43,127,255,.08) 100%);
}

.sn-wf-card__visual--green {
  background: linear-gradient(145deg, rgba(34,197,94,.18) 0%, rgba(43,127,255,.06) 100%);
}

.sn-wf-card__visual-svg {
  width: 80%;
  max-width: 220px;
  opacity: .80;
}

.sn-wf-card__body {
  padding: 36px 40px;
}

.sn-wf-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(34,197,94,.12);
  border: 1px solid rgba(34,197,94,.22);
  color: var(--green);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.sn-wf-card__title {
  font-size: 20px;
  font-weight: 700;
  color: var(--white);
  letter-spacing: -.4px;
  margin-bottom: 10px;
}

.sn-wf-card__desc {
  font-size: 14px;
  color: rgba(255,255,255,.55);
  line-height: 1.65;
  margin-bottom: 18px;
}

.sn-wf-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 22px;
}

.sn-wf-features li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: rgba(255,255,255,.72);
}

.sn-wf-check {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: rgba(34,197,94,.18);
  border: 1.5px solid rgba(34,197,94,.30);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.sn-wf-check svg { width: 11px; height: 11px; color: var(--green); }

.sn-wf-card__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 20px;
  border-radius: 999px;
  background: var(--green);
  color: var(--navy2);
  font-size: 13.5px;
  font-weight: 700;
  font-family: var(--sans);
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background .18s, transform .15s, box-shadow .18s;
  box-shadow: 0 4px 16px rgba(34,197,94,.28);
}

.sn-wf-card__link:hover {
  background: #1aae52;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(34,197,94,.36);
}

/* --- Free checks carousel --- */
.sn-free {
  background: var(--navy2);
  padding: 72px 0;
  border-top: 1px solid rgba(255,255,255,.06);
  position: relative;
  overflow: hidden;
}

.sn-free::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 700px 300px at 50% 50%, rgba(43,127,255,.10), transparent 60%);
  pointer-events: none;
}

.sn-free__head {
  text-align: center;
  margin-bottom: 40px;
  position: relative;
}

.sn-free__head h2 {
  font-size: clamp(24px, 2.8vw, 36px);
  font-weight: 700;
  color: var(--white);
  letter-spacing: -.6px;
  margin-bottom: 8px;
}

.sn-free__head p { font-size: 15px; color: rgba(255,255,255,.50); }

.sn-free-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  position: relative;
}

.sn-free-card {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 18px;
  padding: 20px 16px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: background .2s, border-color .2s, transform .18s, box-shadow .2s;
}

.sn-free-card:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(43,127,255,.30);
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0,0,0,.30);
}

.sn-free-card__ico {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.sn-free-card__ico svg { width: 22px; height: 22px; }

.ico--blue   { background: rgba(43,127,255,.18);  border: 1px solid rgba(43,127,255,.28); color: #79C0FF; }
.ico--green  { background: rgba(34,197,94,.15);   border: 1px solid rgba(34,197,94,.25);  color: var(--green); }
.ico--gold   { background: rgba(253,185,19,.15);  border: 1px solid rgba(253,185,19,.25); color: var(--gold); }
.ico--red    { background: rgba(224,32,32,.14);   border: 1px solid rgba(224,32,32,.22);  color: #FF7B72; }
.ico--purple { background: rgba(168,85,247,.15);  border: 1px solid rgba(168,85,247,.25); color: #C084FC; }
.ico--teal   { background: rgba(20,184,166,.15);  border: 1px solid rgba(20,184,166,.25); color: #2DD4BF; }

.sn-free-card__name {
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,.88);
  line-height: 1.35;
}

.sn-free-card__try {
  font-size: 12px;
  font-weight: 700;
  color: var(--green);
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: auto;
}

/* --- Why NeoSDK split --- */
.sn-why {
  padding: 88px 0;
  background: var(--bg);
}

.sn-why__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.sn-why__text h2 {
  font-size: clamp(28px, 3.2vw, 44px);
  font-weight: 700;
  letter-spacing: -1px;
  line-height: 1.1;
  margin-bottom: 28px;
}

.sn-why__text h2 span { color: var(--blue); }

.sn-why-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sn-why-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.sn-why-item__ico {
  width: 42px; height: 42px;
  border-radius: 13px;
  background: var(--blue-light);
  border: 1px solid rgba(43,127,255,.18);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.sn-why-item__ico svg { width: 20px; height: 20px; color: var(--blue); }

.sn-why-item__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 4px;
}

.sn-why-item__desc {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.6;
}

/* Dashboard mockup */
.sn-dashboard {
  background: var(--white);
  border-radius: var(--radius2);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.sn-dashboard__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--navy2);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.sn-dashboard__dots { display: flex; gap: 5px; }
.sn-dashboard__dots span { width: 10px; height: 10px; border-radius: 50%; }
.sn-dashboard__dots span:nth-child(1) { background: #FF5F57; }
.sn-dashboard__dots span:nth-child(2) { background: #FEBC2E; }
.sn-dashboard__dots span:nth-child(3) { background: #28C840; }
.sn-dashboard__title { font-size: 12px; color: rgba(255,255,255,.45); font-family: var(--mono); margin-left: 4px; }

.sn-dashboard__body {
  display: grid;
  grid-template-columns: 180px 1fr;
  min-height: 320px;
}

.sn-dash-nav {
  background: #F8FAFF;
  border-right: 1px solid var(--stroke2);
  padding: 14px 0;
}

.sn-dash-nav__item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 16px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: background .15s, color .15s;
  border-radius: 0;
}

.sn-dash-nav__item:hover  { background: rgba(43,127,255,.06); color: var(--blue); }
.sn-dash-nav__item.active { background: var(--blue-light); color: var(--blue); }
.sn-dash-nav__item svg    { width: 14px; height: 14px; flex-shrink: 0; }

.sn-dash-main { padding: 16px; display: flex; flex-direction: column; gap: 10px; }

.sn-dash-welcome {
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-dark) 100%);
  border-radius: 12px;
  padding: 14px 16px;
  color: var(--white);
}

.sn-dash-welcome__title { font-size: 13px; font-weight: 700; margin-bottom: 3px; }
.sn-dash-welcome__sub   { font-size: 11.5px; color: rgba(255,255,255,.70); }

.sn-dash-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.sn-dash-card {
  background: var(--bg);
  border-radius: 12px;
  border: 1px solid var(--stroke2);
  padding: 12px 14px;
}

.sn-dash-card__label { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted2); margin-bottom: 6px; }

.sn-dash-card__ring {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sn-ring {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 4px solid var(--stroke2);
  border-top-color: var(--blue);
  flex-shrink: 0;
  position: relative;
}

.sn-ring--green { border-top-color: var(--green); }

.sn-dash-card__stat { font-size: 14px; font-weight: 700; color: var(--ink); }
.sn-dash-card__sub  { font-size: 11px; color: var(--muted2); }

.sn-dash-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.sn-dash-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px;
  border-radius: 10px;
  background: var(--blue);
  color: var(--white);
  font-size: 12px;
  font-weight: 700;
  font-family: var(--sans);
  border: none;
  cursor: pointer;
}

.sn-dash-action-btn--outline {
  background: transparent;
  border: 1.5px solid var(--stroke);
  color: var(--muted);
}

/* --- Unique features (dark) --- */
.sn-unique {
  background:
    radial-gradient(ellipse 900px 400px at 50% 0%, rgba(43,127,255,.14), transparent 55%),
    linear-gradient(180deg, #07090E 0%, #0A0F1A 100%);
  padding: 88px 0;
  position: relative;
  overflow: hidden;
}

.sn-unique__head {
  text-align: center;
  margin-bottom: 52px;
}

.sn-unique__head h2 {
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 700;
  color: var(--white);
  letter-spacing: -.8px;
  margin-bottom: 10px;
}

.sn-unique__head p { font-size: 15.5px; color: rgba(255,255,255,.50); max-width: 52ch; margin: 0 auto; }

.sn-unique-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.sn-unique-card {
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: border-color .25s, background .25s, transform .2s;
}

.sn-unique-card:hover {
  border-color: rgba(255,255,255,.13);
  background: rgba(255,255,255,.07);
  transform: translateY(-3px);
}

.sn-unique-card__visual {
  height: 130px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(43,127,255,.08);
  border: 1px solid rgba(43,127,255,.12);
  position: relative;
  overflow: hidden;
}

.sn-unique-card__visual svg { width: 60px; height: 60px; opacity: .75; }

.sn-unique-card__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--white);
  text-align: center;
  letter-spacing: -.3px;
}

.sn-unique-card__desc {
  font-size: 13.5px;
  color: rgba(255,255,255,.52);
  text-align: center;
  line-height: 1.65;
}

.sn-unique-card__link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 11px 20px;
  border-radius: 999px;
  background: var(--green);
  color: var(--navy2);
  font-size: 13.5px;
  font-weight: 700;
  font-family: var(--sans);
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background .18s, transform .15s, box-shadow .18s;
  box-shadow: 0 4px 16px rgba(34,197,94,.22);
  margin-top: auto;
}

.sn-unique-card__link:hover { background: #1aae52; transform: translateY(-1px); box-shadow: 0 8px 24px rgba(34,197,94,.32); }

/* --- Industries (light) --- */
.sn-industries {
  padding: 80px 0;
  background: var(--bg);
}

.sn-industries__head {
  text-align: center;
  margin-bottom: 40px;
}

.sn-industries__head h2 {
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 700;
  letter-spacing: -.7px;
  margin-bottom: 8px;
}

.sn-industries__head p { font-size: 15px; color: var(--muted); }

.sn-industry-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.sn-industry-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  background: var(--white);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: var(--shadow2);
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s, transform .18s;
  text-decoration: none;
}

.sn-industry-card:hover {
  border-color: rgba(43,127,255,.22);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.sn-industry-card__ico {
  width: 42px; height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.sn-industry-card__ico svg { width: 20px; height: 20px; }

.sn-industry-card__name {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}

/* --- CTA band --- */
.sn-cta {
  background: var(--blue);
  padding: 72px 0;
  position: relative;
  overflow: hidden;
}

.sn-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(800px 350px at 80% 50%, rgba(34,197,94,.22), transparent 60%),
    radial-gradient(500px 300px at 5%  20%, rgba(255,255,255,.09), transparent 55%);
  pointer-events: none;
}

.sn-cta__inner {
  position: relative;
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}

.sn-cta__inner h2 {
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 700;
  color: var(--white);
  letter-spacing: -.7px;
  margin-bottom: 12px;
}

.sn-cta__inner p { font-size: 16px; color: rgba(255,255,255,.70); margin-bottom: 30px; line-height: 1.65; }

.sn-cta__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* --- Responsive --- */
@media (max-width: 1060px) {
  .sn-free-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
  .sn-sol-grid        { grid-template-columns: 1fr; }
  .sn-sol-card        { grid-template-columns: 1fr; }
  .sn-sol-card__visual { aspect-ratio: 16/7; }
  .sn-wf-card         { grid-template-columns: 1fr; }
  .sn-wf-card--flip   { direction: ltr; }
  .sn-wf-card__visual { min-height: 160px; }
  .sn-wf-card__body   { padding: 28px; }
  .sn-why__grid       { grid-template-columns: 1fr; gap: 36px; }
  .sn-unique-grid     { grid-template-columns: 1fr 1fr; }
  .sn-industry-grid   { grid-template-columns: 1fr 1fr; }
  .sn-dashboard__body { grid-template-columns: 1fr; }
  .sn-dash-nav        { display: none; }
}

@media (max-width: 640px) {
  .sn-free-grid     { grid-template-columns: repeat(2, 1fr); }
  .sn-unique-grid   { grid-template-columns: 1fr; }
  .sn-industry-grid { grid-template-columns: 1fr; }
  .sn-search        { padding: 16px 110px 16px 44px; font-size: 14px; }
}


/* =============================================================
   ADVERSE MEDIA PAGE
   ============================================================= */

/* --- Split Hero --- */
.am-hero {
  background: var(--white);
  padding: 80px 0 0;
  overflow: hidden;
  position: relative;
}

.am-hero::after {
  content: "";
  position: absolute;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(43,127,255,.06) 0%, transparent 70%);
  top: -200px; right: -200px;
  pointer-events: none;
}

.am-hero__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  padding-bottom: 80px;
}

.am-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--blue-light);
  border: 1px solid rgba(43,127,255,.22);
  color: var(--blue);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.am-hero__title {
  font-size: clamp(36px, 4.5vw, 60px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -1.5px;
  color: var(--ink);
  margin-bottom: 20px;
}

.am-hero__title .accent-blue  { color: var(--blue); }
.am-hero__title .accent-gold  { color: var(--gold); }
.am-hero__title .accent-red   { color: var(--red); }

.am-hero__lead {
  font-size: 16.5px;
  color: var(--muted);
  line-height: 1.70;
  max-width: 50ch;
  margin-bottom: 32px;
}

.am-hero__actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}

.am-hero__trust {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 24px;
  border-top: 1px solid var(--stroke2);
}

.am-hero__trust-label { font-size: 12px; color: var(--muted2); font-weight: 500; }

.am-trust-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--stroke2);
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.am-trust-badge svg { width: 12px; height: 12px; }

/* Hero visual — live news feed mock */
.am-newsfeed {
  background: var(--white);
  border-radius: var(--radius2);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
  overflow: hidden;
  position: relative;
}

.am-newsfeed__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--navy2);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.am-newsfeed__dots { display: flex; gap: 6px; }
.am-newsfeed__dots span { width: 10px; height: 10px; border-radius: 50%; }
.am-newsfeed__dots span:nth-child(1) { background: #FF5F57; }
.am-newsfeed__dots span:nth-child(2) { background: #FEBC2E; }
.am-newsfeed__dots span:nth-child(3) { background: #28C840; }

.am-newsfeed__title {
  font-size: 12px;
  color: rgba(255,255,255,.50);
  font-family: var(--mono);
}

.am-newsfeed__live {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  color: var(--green);
  font-family: var(--mono);
}

.am-newsfeed__live-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--green);
  animation: pulse 1.6s ease-in-out infinite;
}

.am-newsfeed__search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--bg);
  border-bottom: 1px solid var(--stroke2);
}

.am-newsfeed__search-input {
  flex: 1;
  background: var(--white);
  border: 1px solid var(--stroke);
  border-radius: 9px;
  padding: 9px 13px;
  font-size: 13px;
  color: var(--ink);
  font-family: var(--sans);
  outline: none;
}

.am-newsfeed__search-btn {
  padding: 9px 16px;
  border-radius: 9px;
  background: var(--blue);
  color: var(--white);
  font-size: 12.5px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  font-family: var(--sans);
  white-space: nowrap;
}

.am-newsfeed__items { padding: 8px 0; }

.am-news-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--stroke2);
  transition: background .15s;
  cursor: pointer;
}

.am-news-item:last-child { border-bottom: none; }
.am-news-item:hover { background: var(--bg); }

.am-news-item__sev {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 5px;
}

.sev--high   { background: var(--red);   box-shadow: 0 0 0 3px rgba(224,32,32,.18); }
.sev--medium { background: var(--gold);  box-shadow: 0 0 0 3px rgba(253,185,19,.18); }
.sev--low    { background: var(--green); box-shadow: 0 0 0 3px rgba(34,197,94,.18); }

.am-news-item__body { flex: 1; min-width: 0; }

.am-news-item__headline {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.45;
  margin-bottom: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.am-news-item__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: var(--muted2);
}

.am-news-item__source { font-weight: 600; }

.am-news-item__cat {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}

.cat--financial-crime { background: rgba(224,32,32,.10); color: var(--red); }
.cat--fraud           { background: rgba(253,185,19,.12); color: #B45309; }
.cat--corruption      { background: rgba(120,60,220,.12); color: #7C3AED; }
.cat--terrorism       { background: rgba(224,32,32,.12); color: var(--red); }
.cat--pep             { background: rgba(43,127,255,.10); color: var(--blue); }

.am-newsfeed__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-top: 1px solid var(--stroke2);
  background: var(--bg);
  font-size: 11.5px;
  color: var(--muted2);
}

.am-newsfeed__footer-stat { display: flex; align-items: center; gap: 5px; font-weight: 600; }
.am-newsfeed__footer-stat span { color: var(--blue); }

/* --- Stats strip --- */
.am-stats-strip {
  background: var(--navy2);
  padding: 48px 0;
  position: relative;
  overflow: hidden;
}

.am-stats-strip::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(600px 250px at 20% 50%, rgba(43,127,255,.16), transparent 60%),
    radial-gradient(500px 250px at 80% 50%, rgba(253,185,19,.10), transparent 60%);
  pointer-events: none;
}

.am-stats-strip__inner {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

.am-stat {
  padding: 20px 28px;
  border-right: 1px solid rgba(255,255,255,.07);
  text-align: center;
}

.am-stat:last-child { border-right: none; }

.am-stat__val {
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 700;
  color: var(--white);
  letter-spacing: -1px;
  line-height: 1;
  margin-bottom: 6px;
}

.am-stat__val .suf { color: var(--gold); }
.am-stat__label { font-size: 13px; color: rgba(255,255,255,.50); font-weight: 400; line-height: 1.45; }

/* --- Why section (dark) --- */
.am-why {
  background:
    radial-gradient(ellipse 800px 500px at 50% 0%, rgba(43,127,255,.12), transparent 55%),
    linear-gradient(180deg, #07090E 0%, #0A0F1A 100%);
  padding: 88px 0;
  position: relative;
  overflow: hidden;
}

.am-why__head {
  text-align: center;
  margin-bottom: 52px;
}

.am-why__head h2 {
  font-size: clamp(26px, 3.2vw, 42px);
  font-weight: 700;
  color: var(--white);
  letter-spacing: -.8px;
  margin-bottom: 12px;
  line-height: 1.15;
}

.am-why__head p { font-size: 16px; color: rgba(255,255,255,.52); max-width: 54ch; margin: 0 auto; line-height: 1.65; }

.am-why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.am-why-card {
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(8px);
  padding: 26px 24px;
  position: relative;
  overflow: hidden;
  transition: border-color .22s, background .22s, transform .2s;
}

.am-why-card:hover {
  border-color: rgba(43,127,255,.25);
  background: rgba(43,127,255,.06);
  transform: translateY(-3px);
}

.am-why-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 160px 100px at 0% 0%, rgba(255,255,255,.04), transparent 70%);
  pointer-events: none;
}

.am-why-card__ico {
  width: 46px; height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  margin-bottom: 16px;
  position: relative;
}

.am-why-card__ico svg { width: 22px; height: 22px; }

.wico--blue   { background: rgba(43,127,255,.16);  border: 1px solid rgba(43,127,255,.28); color: #79C0FF; }
.wico--gold   { background: rgba(253,185,19,.14);  border: 1px solid rgba(253,185,19,.26); color: var(--gold); }
.wico--green  { background: rgba(34,197,94,.13);   border: 1px solid rgba(34,197,94,.24);  color: var(--green); }
.wico--red    { background: rgba(224,32,32,.12);   border: 1px solid rgba(224,32,32,.22);  color: #FF7B72; }
.wico--purple { background: rgba(168,85,247,.13);  border: 1px solid rgba(168,85,247,.24); color: #C084FC; }
.wico--teal   { background: rgba(20,184,166,.13);  border: 1px solid rgba(20,184,166,.24); color: #2DD4BF; }

.am-why-card__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 8px;
  letter-spacing: -.25px;
}

.am-why-card__desc {
  font-size: 13.5px;
  color: rgba(255,255,255,.52);
  line-height: 1.62;
}

/* --- How it works (light, horizontal steps) --- */
.am-how {
  padding: 88px 0;
  background: var(--bg);
}

.am-how__head {
  text-align: center;
  margin-bottom: 56px;
}

.am-how__head h2 {
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 700;
  letter-spacing: -.8px;
  margin-bottom: 10px;
}

.am-how__head p { font-size: 15.5px; color: var(--muted); max-width: 52ch; margin: 0 auto; line-height: 1.65; }

.am-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
}

.am-steps::before {
  content: "";
  position: absolute;
  top: 28px;
  left: calc(12.5% + 24px);
  right: calc(12.5% + 24px);
  height: 2px;
  background: linear-gradient(90deg, var(--blue), var(--gold));
  opacity: .35;
}

.am-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 16px;
  position: relative;
}

.am-step__num {
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 2px solid var(--blue);
  background: var(--white);
  display: grid;
  place-items: center;
  font-size: 18px;
  font-weight: 700;
  color: var(--blue);
  margin-bottom: 18px;
  position: relative;
  z-index: 1;
  box-shadow: 0 0 0 6px rgba(43,127,255,.08);
  flex-shrink: 0;
}

.am-step:nth-child(2) .am-step__num { border-color: var(--gold); color: #B45309; box-shadow: 0 0 0 6px rgba(253,185,19,.08); }
.am-step:nth-child(3) .am-step__num { border-color: var(--green); color: #16A34A; box-shadow: 0 0 0 6px rgba(34,197,94,.08); }
.am-step:nth-child(4) .am-step__num { border-color: var(--blue); color: var(--blue); box-shadow: 0 0 0 6px rgba(43,127,255,.08); }

.am-step__title { font-size: 14.5px; font-weight: 700; color: var(--ink); margin-bottom: 7px; letter-spacing: -.2px; }
.am-step__desc  { font-size: 13px; color: var(--muted); line-height: 1.6; }

/* --- Coverage section (split) --- */
.am-coverage {
  padding: 88px 0;
  background: var(--white);
  border-top: 1px solid var(--stroke2);
}

.am-coverage__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.am-coverage__text h2 {
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 700;
  letter-spacing: -.8px;
  line-height: 1.12;
  margin-bottom: 14px;
}

.am-coverage__text h2 .accent { color: var(--blue); }
.am-coverage__text p { font-size: 15.5px; color: var(--muted); line-height: 1.65; margin-bottom: 24px; }

.am-coverage-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 28px;
}

.am-coverage-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px 14px;
  border-radius: 13px;
  border: 1px solid var(--stroke2);
  background: var(--bg);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  transition: border-color .18s, background .18s;
}

.am-coverage-item:hover { border-color: rgba(43,127,255,.22); background: var(--blue-light); }

.am-coverage-item__ico {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: var(--blue-light);
  border: 1px solid rgba(43,127,255,.18);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.am-coverage-item__ico svg { width: 14px; height: 14px; color: var(--blue); }

/* Category panel */
.am-cat-panel {
  background: var(--navy2);
  border-radius: var(--radius2);
  border: 1px solid rgba(255,255,255,.07);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.am-cat-panel__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  background: rgba(255,255,255,.03);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.am-cat-panel__title { font-size: 12px; color: rgba(255,255,255,.55); font-family: var(--mono); }

.am-cat-panel__badge {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(34,197,94,.15);
  border: 1px solid rgba(34,197,94,.25);
  color: var(--green);
  font-family: var(--mono);
}

.am-categories { padding: 12px; display: flex; flex-direction: column; gap: 6px; }

.am-cat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 14px;
  border-radius: 11px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.03);
  cursor: pointer;
  transition: background .15s, border-color .15s;
}

.am-cat:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.10); }
.am-cat.active { background: rgba(43,127,255,.14); border-color: rgba(43,127,255,.28); }

.am-cat__left { display: flex; align-items: center; gap: 10px; }

.am-cat__dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.am-cat__name { font-size: 13px; font-weight: 600; color: rgba(255,255,255,.82); }

.am-cat__count {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-family: var(--mono);
}

.am-cat__num { color: rgba(255,255,255,.55); }

.am-cat__bar-wrap {
  width: 60px;
  height: 4px;
  border-radius: 99px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
}

.am-cat__bar { height: 100%; border-radius: 99px; }

/* --- Risk scoring section --- */
.am-risk {
  padding: 88px 0;
  background: var(--bg);
  border-top: 1px solid var(--stroke2);
}

.am-risk__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.am-risk-panel {
  background: var(--white);
  border-radius: var(--radius2);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow2);
  overflow: hidden;
}

.am-risk-panel__head {
  padding: 16px 18px;
  border-bottom: 1px solid var(--stroke2);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.am-risk-panel__hl { font-size: 14px; font-weight: 700; color: var(--ink); }

.am-risk-tag {
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
}

.am-risk-tag--high   { background: rgba(224,32,32,.10); color: var(--red);   border: 1px solid rgba(224,32,32,.20); }
.am-risk-tag--medium { background: rgba(253,185,19,.12); color: #B45309;      border: 1px solid rgba(253,185,19,.24); }
.am-risk-tag--low    { background: rgba(34,197,94,.10); color: #16A34A;      border: 1px solid rgba(34,197,94,.20); }

.am-risk-panel__body { padding: 16px 18px; }

.am-risk-subject {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.am-risk-subject__avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), var(--blue-dark));
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--white);
  flex-shrink: 0;
}

.am-risk-subject__name { font-size: 14px; font-weight: 700; color: var(--ink); }
.am-risk-subject__sub  { font-size: 12px; color: var(--muted2); }

/* Gauge */
.am-gauge-wrap {
  margin-bottom: 16px;
}

.am-gauge-label {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  margin-bottom: 6px;
  font-weight: 600;
  color: var(--muted);
}

.am-gauge-label span:last-child { color: var(--red); font-weight: 700; }

.am-gauge-track {
  height: 10px;
  border-radius: 99px;
  background: var(--stroke2);
  overflow: hidden;
}

.am-gauge-fill {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--green), var(--gold) 55%, var(--red));
  position: relative;
}

.am-gauge-thumb {
  position: absolute;
  top: -3px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--red);
  box-shadow: var(--shadow2);
  transform: translateX(-50%);
}

.am-risk-hits { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }

.am-hit {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 11px;
  border: 1px solid var(--stroke2);
  background: var(--bg);
}

.am-hit__icon {
  width: 26px; height: 26px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.am-hit__icon svg { width: 13px; height: 13px; }

.am-hit__source { font-size: 12px; font-weight: 700; color: var(--ink); margin-bottom: 2px; }
.am-hit__snippet { font-size: 11.5px; color: var(--muted); line-height: 1.45; }

.am-risk-panel__footer {
  padding: 12px 18px;
  border-top: 1px solid var(--stroke2);
  display: flex;
  gap: 8px;
  background: var(--bg);
}

.am-risk-btn {
  flex: 1;
  padding: 9px;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 700;
  font-family: var(--sans);
  cursor: pointer;
  border: none;
  transition: opacity .18s;
}

.am-risk-btn:hover { opacity: .88; }
.am-risk-btn--primary  { background: var(--blue); color: var(--white); }
.am-risk-btn--outline  { background: var(--white); color: var(--ink); border: 1.5px solid var(--stroke); }

.am-risk__text h2 {
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 700;
  letter-spacing: -.7px;
  line-height: 1.12;
  margin-bottom: 14px;
}

.am-risk__text h2 .accent { color: var(--blue); }
.am-risk__text p { font-size: 15.5px; color: var(--muted); line-height: 1.65; margin-bottom: 22px; }

.am-risk-features { display: flex; flex-direction: column; gap: 12px; margin-bottom: 28px; }

.am-risk-feat {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.am-risk-feat__ico {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: var(--blue-light);
  border: 1px solid rgba(43,127,255,.18);
}

.am-risk-feat__ico svg { width: 17px; height: 17px; color: var(--blue); }

.am-risk-feat__title { font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 3px; }
.am-risk-feat__desc  { font-size: 13px; color: var(--muted); line-height: 1.55; }

/* --- Free checks (reuses sn-free styles but override bg) --- */
.am-free {
  background:
    radial-gradient(ellipse 900px 400px at 50% 50%, rgba(43,127,255,.12), transparent 55%),
    linear-gradient(180deg, #07090E 0%, #0A0F1A 100%);
  padding: 80px 0;
  position: relative;
  overflow: hidden;
}

.am-free__head {
  text-align: center;
  margin-bottom: 40px;
}

.am-free__head h2 { font-size: clamp(24px, 2.8vw, 36px); font-weight: 700; color: var(--white); letter-spacing: -.6px; margin-bottom: 8px; }
.am-free__head p  { font-size: 15px; color: rgba(255,255,255,.50); }

/* --- Inline CTA band --- */
.am-cta-band {
  padding: 32px 0 80px;
  background: var(--bg);
}

.am-cta-pill {
  border-radius: 24px;
  background:
    radial-gradient(ellipse 600px 200px at 80% 50%, rgba(224,32,32,.12), transparent 60%),
    linear-gradient(135deg, var(--navy2) 0%, #111827 100%);
  border: 1px solid rgba(255,255,255,.08);
  padding: 36px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.am-cta-pill__text h2 {
  font-size: clamp(20px, 2.5vw, 28px);
  font-weight: 700;
  color: var(--white);
  letter-spacing: -.5px;
  margin-bottom: 6px;
}

.am-cta-pill__text p { font-size: 14.5px; color: rgba(255,255,255,.60); }

.am-cta-pill__actions { display: flex; gap: 12px; flex-wrap: wrap; flex-shrink: 0; }

/* --- Responsive --- */
@media (max-width: 1024px) {
  .am-hero__grid    { grid-template-columns: 1fr; gap: 40px; padding-bottom: 60px; }
  .am-coverage__grid { grid-template-columns: 1fr; gap: 36px; }
  .am-risk__grid    { grid-template-columns: 1fr; gap: 36px; }
  .am-steps         { grid-template-columns: 1fr 1fr; row-gap: 36px; }
  .am-steps::before { display: none; }
}

@media (max-width: 820px) {
  .am-why-grid      { grid-template-columns: 1fr 1fr; }
  .am-stats-strip__inner { grid-template-columns: 1fr 1fr; }
  .am-stat:nth-child(2) { border-right: none; }
  .am-stat:nth-child(3) { border-top: 1px solid rgba(255,255,255,.07); border-right: 1px solid rgba(255,255,255,.07); }
  .am-stat:nth-child(4) { border-top: 1px solid rgba(255,255,255,.07); border-right: none; }
  .am-coverage-list { grid-template-columns: 1fr; }
  .am-cta-pill      { flex-direction: column; align-items: flex-start; padding: 28px; }
}

@media (max-width: 600px) {
  .am-why-grid  { grid-template-columns: 1fr; }
  .am-steps     { grid-template-columns: 1fr; }
  .am-cta-pill__actions { width: 100%; }
}


/* =============================================================
   BANKING-AS-A-SERVICE (BaaS) PAGE
   ============================================================= */

/* --- Hero --- */
.baas-hero {
  background:
    radial-gradient(ellipse 700px 500px at 85% 20%, rgba(43,127,255,.09), transparent 55%),
    radial-gradient(ellipse 500px 400px at 5%  80%, rgba(253,185,19,.06), transparent 55%),
    linear-gradient(180deg, #EEF3FC 0%, var(--bg) 100%);
  padding: 80px 0 72px;
  overflow: hidden;
  position: relative;
}

.baas-hero__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}

.baas-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 13px;
  border-radius: 999px;
  background: var(--blue-light);
  border: 1px solid rgba(43,127,255,.22);
  color: var(--blue);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.baas-hero__eyebrow .dot-live {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(34,197,94,.25);
  animation: pulse 1.8s ease-in-out infinite;
}

.baas-hero__title {
  font-size: clamp(36px, 4.5vw, 60px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -1.6px;
  color: var(--ink);
  margin-bottom: 20px;
}

.baas-hero__title .accent-blue  { color: var(--blue); }
.baas-hero__title .accent-gold  { color: var(--gold); }

.baas-hero__lead {
  font-size: 16.5px;
  color: var(--muted);
  line-height: 1.68;
  max-width: 50ch;
  margin-bottom: 30px;
}

.baas-hero__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.baas-hero__chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 20px;
  border-top: 1px solid var(--stroke2);
}

.baas-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.80);
  border: 1px solid var(--stroke2);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
}

.baas-chip svg { width: 12px; height: 12px; }

/* Service integration card */
.baas-services-card {
  background: var(--white);
  border-radius: var(--radius2);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
  overflow: hidden;
  padding: 6px;
}

.baas-services-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 6px;
}

.baas-service-tile {
  border-radius: 16px;
  border: 1px solid var(--stroke2);
  background: var(--bg);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  transition: border-color .2s, background .2s, box-shadow .18s, transform .18s;
}

.baas-service-tile:hover {
  border-color: rgba(43,127,255,.25);
  background: var(--white);
  box-shadow: var(--shadow2);
  transform: translateY(-1px);
}

.baas-service-tile.active {
  border-color: var(--blue);
  background: var(--blue-light);
}

.baas-service-tile__ico {
  width: 38px; height: 38px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: var(--white);
  border: 1px solid var(--stroke2);
}

.baas-service-tile.active .baas-service-tile__ico {
  background: var(--blue);
  border-color: var(--blue-dark);
}

.baas-service-tile__ico svg { width: 18px; height: 18px; color: var(--blue); }
.baas-service-tile.active .baas-service-tile__ico svg { color: var(--white); }

.baas-service-tile__name {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 2px;
}

.baas-service-tile__sub {
  font-size: 12px;
  color: var(--muted2);
}

.baas-services-footer {
  padding: 12px 16px;
  border-top: 1px solid var(--stroke2);
  font-size: 12.5px;
  color: var(--muted2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg);
  border-radius: 0 0 var(--radius2) var(--radius2);
  margin: 0 -6px -6px;
  padding: 12px 20px;
}

.baas-services-footer a {
  color: var(--blue);
  font-weight: 700;
  font-size: 12.5px;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 4px;
}

.baas-services-footer a:hover { text-decoration: underline; }

/* --- Marketplace section --- */
.baas-marketplace {
  padding: 88px 0;
  background: var(--white);
  border-top: 1px solid var(--stroke2);
}

.baas-marketplace__head {
  text-align: center;
  margin-bottom: 16px;
}

.baas-marketplace__head h2 {
  font-size: clamp(28px, 3.5vw, 46px);
  font-weight: 700;
  letter-spacing: -1px;
  line-height: 1.1;
  margin-bottom: 14px;
  max-width: 18ch;
  margin-left: auto;
  margin-right: auto;
}

.baas-marketplace__head p {
  font-size: 16px;
  color: var(--muted);
  max-width: 56ch;
  margin: 0 auto 52px;
  line-height: 1.65;
}

.baas-marketplace__sub {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.3px;
  margin-bottom: 18px;
}

.baas-market-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}

.baas-market-card {
  padding: 20px;
  border-radius: var(--radius);
  border: 1px solid var(--stroke);
  background: var(--bg);
  cursor: pointer;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color .2s, background .2s, box-shadow .2s, transform .18s;
}

.baas-market-card:hover {
  border-color: rgba(43,127,255,.25);
  background: var(--white);
  box-shadow: var(--shadow2);
  transform: translateY(-2px);
}

.baas-market-card__ico {
  width: 44px; height: 44px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: var(--white);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow2);
}

.baas-market-card__ico svg { width: 20px; height: 20px; }

.baas-market-card__name {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}

.baas-browse {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--blue);
  text-decoration: none;
  padding: 8px 0;
}

.baas-browse:hover { text-decoration: underline; }

/* --- What NeoSDK adds (split) --- */
.baas-adds {
  padding: 88px 0;
  background: var(--bg);
  border-top: 1px solid var(--stroke2);
}

.baas-adds__grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 64px;
  align-items: start;
}

.baas-adds__text h2 {
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 700;
  letter-spacing: -.8px;
  line-height: 1.12;
  margin-bottom: 14px;
}

.baas-adds__text h2 .accent { color: var(--blue); }

.baas-adds__text p {
  font-size: 15.5px;
  color: var(--muted);
  line-height: 1.65;
  margin-bottom: 28px;
}

.baas-adds__text .btn { margin-top: 8px; }

.baas-adds-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.baas-adds-card {
  background: var(--white);
  border: 1px solid var(--stroke);
  border-radius: var(--radius2);
  padding: 24px 22px;
  box-shadow: var(--shadow2);
  transition: border-color .2s, box-shadow .2s, transform .18s;
}

.baas-adds-card:hover {
  border-color: rgba(43,127,255,.22);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.baas-adds-card__ico {
  width: 42px; height: 42px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  margin-bottom: 14px;
}

.baas-adds-card__ico svg { width: 20px; height: 20px; }

.baas-adds-card__title {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.25px;
  margin-bottom: 8px;
}

.baas-adds-card__desc {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
}

/* --- Go-live timeline (dark) --- */
.baas-timeline {
  background:
    radial-gradient(ellipse 900px 500px at 50% -5%, rgba(43,127,255,.18), transparent 55%),
    radial-gradient(ellipse 600px 400px at 90% 80%, rgba(253,185,19,.09), transparent 55%),
    linear-gradient(180deg, #06090F 0%, #0A0F1A 100%);
  padding: 100px 0 88px;
  position: relative;
  overflow: hidden;
}

.baas-timeline::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.015'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4z'/%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}

.baas-timeline__head {
  text-align: center;
  margin-bottom: 20px;
  position: relative;
}

.baas-timeline__head h2 {
  font-size: clamp(30px, 4vw, 54px);
  font-weight: 700;
  color: var(--white);
  letter-spacing: -1.4px;
  line-height: 1.08;
  margin-bottom: 12px;
}

.baas-timeline__head h2 .accent-gold  { color: var(--gold); }
.baas-timeline__head h2 .accent-blue  { color: #79C0FF; }

.baas-timeline__head p {
  font-size: 16px;
  color: rgba(255,255,255,.50);
  margin-bottom: 28px;
  line-height: 1.55;
}

/* Progress rail */
.baas-rail {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 860px;
  margin: 0 auto 40px;
  padding: 0 20px;
}

.baas-rail__line {
  position: absolute;
  top: 50%;
  left: 20px;
  right: 20px;
  height: 2px;
  background: rgba(255,255,255,.10);
  transform: translateY(-50%);
}

.baas-rail__progress {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--blue), var(--gold));
  width: 100%;
  border-radius: 99px;
}

.baas-rail__labels {
  position: absolute;
  top: -28px;
  left: 20px;
  right: 20px;
  display: flex;
  justify-content: space-between;
}

.baas-rail__label {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,.45);
  letter-spacing: .04em;
}

.baas-rail__label.active { color: var(--gold); }

.baas-rail__dots { display: flex; justify-content: space-between; width: 100%; position: relative; }

.baas-rail__dot {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  border: 2px solid rgba(255,255,255,.25);
  position: relative;
  z-index: 1;
  transition: all .25s;
}

.baas-rail__dot.done {
  background: var(--blue);
  border-color: var(--blue);
  box-shadow: 0 0 0 5px rgba(43,127,255,.22);
}

.baas-rail__dot.current {
  background: var(--gold);
  border-color: var(--gold);
  box-shadow: 0 0 0 5px rgba(253,185,19,.22);
}

/* Step cards */
.baas-steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  position: relative;
}

.baas-step-card {
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(8px);
  padding: 24px 22px 28px;
  transition: border-color .22s, background .22s, transform .2s;
}

.baas-step-card:hover {
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.07);
  transform: translateY(-3px);
}

.baas-step-card__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

.baas-step-card__num {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,.38);
  font-family: var(--mono);
  letter-spacing: .06em;
}

.baas-step-card__phase {
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}

.phase--kickoff      { background: rgba(43,127,255,.18);  border: 1px solid rgba(43,127,255,.28); color: #79C0FF; }
.phase--onboarding   { background: rgba(168,85,247,.16);  border: 1px solid rgba(168,85,247,.26); color: #C084FC; }
.phase--impl         { background: rgba(253,185,19,.14);  border: 1px solid rgba(253,185,19,.26); color: var(--gold); }
.phase--golive       { background: rgba(34,197,94,.14);   border: 1px solid rgba(34,197,94,.24);  color: var(--green); }

.baas-step-card__title {
  font-size: 17px;
  font-weight: 700;
  color: var(--white);
  letter-spacing: -.35px;
  margin-bottom: 14px;
  line-height: 1.25;
}

.baas-step-card__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.baas-step-card__list li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13px;
  color: rgba(255,255,255,.60);
  line-height: 1.5;
}

.step-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 4px;
}

/* --- BaaS Partners --- */
.baas-partners {
  padding: 80px 0;
  background: var(--white);
  border-top: 1px solid var(--stroke2);
}

.baas-partners__head {
  text-align: center;
  margin-bottom: 44px;
}

.baas-partners__head h2 {
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 700;
  letter-spacing: -.7px;
  margin-bottom: 8px;
}

.baas-partners__head p { font-size: 15px; color: var(--muted); max-width: 52ch; margin: 0 auto; line-height: 1.6; }

.baas-partners-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}

.baas-partners-grid--row2 {
  grid-template-columns: repeat(3, 1fr);
  max-width: calc(75% + 24px);
}

.baas-partner-card {
  border-radius: var(--radius);
  border: 1px solid var(--stroke);
  background: var(--bg);
  padding: 28px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 90px;
  transition: border-color .2s, background .2s, box-shadow .2s, transform .18s;
}

.baas-partner-card:hover {
  border-color: rgba(43,127,255,.22);
  background: var(--white);
  box-shadow: var(--shadow2);
  transform: translateY(-2px);
}

/* Partner logo wordmarks built with SVG/CSS */
.partner-logo {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.3px;
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: .70;
  transition: opacity .18s;
}

.baas-partner-card:hover .partner-logo { opacity: 1; }

.partner-logo__mark {
  width: 28px; height: 28px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.baas-partners__note {
  text-align: center;
  font-size: 13.5px;
  color: var(--muted2);
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--stroke2);
}

/* --- Stats strip dark --- */
.baas-numbers {
  background:
    radial-gradient(ellipse 700px 300px at 20% 50%, rgba(43,127,255,.16), transparent 55%),
    radial-gradient(ellipse 600px 300px at 80% 50%, rgba(253,185,19,.10), transparent 55%),
    var(--navy2);
  padding: 60px 0;
  position: relative;
  overflow: hidden;
}

.baas-numbers__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

.baas-num {
  padding: 24px 28px;
  border-right: 1px solid rgba(255,255,255,.07);
  text-align: center;
}

.baas-num:last-child { border-right: none; }

.baas-num__val {
  font-size: clamp(30px, 3.8vw, 48px);
  font-weight: 700;
  color: var(--white);
  letter-spacing: -1.2px;
  line-height: 1;
  margin-bottom: 6px;
}

.baas-num__val .suf { color: var(--gold); }
.baas-num__label { font-size: 13px; color: rgba(255,255,255,.50); font-weight: 400; line-height: 1.4; }

/* --- API Explorer split --- */
.baas-api {
  padding: 88px 0;
  background: var(--bg);
  border-top: 1px solid var(--stroke2);
}

.baas-api__grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 56px;
  align-items: center;
}

.baas-api__text h2 {
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 700;
  letter-spacing: -.7px;
  line-height: 1.12;
  margin-bottom: 14px;
}

.baas-api__text h2 .accent { color: var(--blue); }

.baas-api__text p { font-size: 15.5px; color: var(--muted); line-height: 1.65; margin-bottom: 22px; }

.baas-api-feats { display: flex; flex-direction: column; gap: 12px; margin-bottom: 28px; }

.baas-api-feat {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.baas-api-feat__ico {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: var(--blue-light);
  border: 1px solid rgba(43,127,255,.18);
}

.baas-api-feat__ico svg { width: 16px; height: 16px; color: var(--blue); }
.baas-api-feat__title { font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 3px; }
.baas-api-feat__desc  { font-size: 13px; color: var(--muted); line-height: 1.55; }

/* API panel (reuses hc-* from main) */
.baas-api-panel {
  background: var(--navy2);
  border-radius: var(--radius2);
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.baas-api-panel__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: rgba(255,255,255,.03);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.baas-api-panel__dots { display: flex; gap: 6px; }
.baas-api-panel__dots span { width: 10px; height: 10px; border-radius: 50%; }
.baas-api-panel__dots span:nth-child(1) { background: #FF5F57; }
.baas-api-panel__dots span:nth-child(2) { background: #FEBC2E; }
.baas-api-panel__dots span:nth-child(3) { background: #28C840; }

.baas-api-panel__title { font-size: 12px; color: rgba(255,255,255,.45); font-family: var(--mono); }
.baas-api-panel__copy  {
  font-size: 11.5px; font-weight: 600;
  color: rgba(255,255,255,.45);
  padding: 5px 10px;
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  cursor: pointer;
  font-family: var(--sans);
  transition: background .18s, color .18s;
}
.baas-api-panel__copy:hover { background: rgba(255,255,255,.09); color: rgba(255,255,255,.80); }

.baas-api-panel__tabs {
  display: flex;
  gap: 4px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.02);
  overflow-x: auto;
}

.baas-api-tab {
  padding: 6px 12px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,.42);
  cursor: pointer;
  border: 1px solid transparent;
  transition: all .18s;
  white-space: nowrap;
  font-family: var(--sans);
  background: none;
}

.baas-api-tab.active {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.10);
  color: rgba(255,255,255,.82);
}

.baas-api-panel__body {
  padding: 20px;
  min-height: 240px;
  overflow-x: auto;
}

.baas-api-panel__footer {
  padding: 12px 16px;
  border-top: 1px solid rgba(255,255,255,.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 11.5px;
  color: rgba(255,255,255,.38);
}

/* --- CTA pill --- */
.baas-cta {
  padding: 32px 0 80px;
  background: var(--bg);
}

.baas-cta-pill {
  border-radius: 24px;
  background:
    radial-gradient(ellipse 600px 200px at 75% 50%, rgba(43,127,255,.14), transparent 60%),
    linear-gradient(135deg, var(--navy2) 0%, #111827 100%);
  border: 1px solid rgba(255,255,255,.08);
  padding: 38px 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}

.baas-cta-pill__text h2 {
  font-size: clamp(18px, 2.2vw, 26px);
  font-weight: 700;
  color: var(--white);
  letter-spacing: -.5px;
  margin-bottom: 6px;
}

.baas-cta-pill__text p { font-size: 14.5px; color: rgba(255,255,255,.55); line-height: 1.55; }

.baas-cta-pill__actions { display: flex; gap: 12px; flex-wrap: wrap; flex-shrink: 0; }

/* --- Responsive --- */
@media (max-width: 1060px) {
  .baas-adds__grid     { grid-template-columns: 1fr; gap: 36px; }
  .baas-api__grid      { grid-template-columns: 1fr; gap: 36px; }
  .baas-steps-grid     { grid-template-columns: 1fr 1fr; row-gap: 16px; }
  .baas-partners-grid--row2 { max-width: 100%; grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
  .baas-hero__grid     { grid-template-columns: 1fr; gap: 36px; }
  .baas-market-grid    { grid-template-columns: 1fr 1fr; }
  .baas-numbers__grid  { grid-template-columns: 1fr 1fr; }
  .baas-num:nth-child(2) { border-right: none; }
  .baas-num:nth-child(3) { border-top: 1px solid rgba(255,255,255,.07); border-right: 1px solid rgba(255,255,255,.07); }
  .baas-num:nth-child(4) { border-top: 1px solid rgba(255,255,255,.07); border-right: none; }
  .baas-partners-grid  { grid-template-columns: 1fr 1fr; }
  .baas-cta-pill       { padding: 28px; flex-direction: column; align-items: flex-start; }
}

@media (max-width: 640px) {
  .baas-services-grid  { grid-template-columns: 1fr; }
  .baas-steps-grid     { grid-template-columns: 1fr; }
  .baas-adds-cards     { grid-template-columns: 1fr; }
  .baas-market-grid    { grid-template-columns: 1fr 1fr; }
  .baas-numbers__grid  { grid-template-columns: 1fr 1fr; }
  .baas-partners-grid  { grid-template-columns: 1fr 1fr; }
  .baas-partners-grid--row2 { grid-template-columns: 1fr 1fr; }
  .baas-cta-pill__actions { width: 100%; }
}


/* =============================================================
   CORE BANKING PAGE
   ============================================================= */

.cb-hero {
  background:
    radial-gradient(ellipse 900px 600px at 50% -10%, rgba(43,127,255,.13), transparent 58%),
    radial-gradient(ellipse 500px 400px at 90%  70%, rgba(253,185,19,.07), transparent 55%),
    linear-gradient(180deg, #EEF3FC 0%, var(--bg) 100%);
  padding: 88px 0 0;
  text-align: center;
  overflow: hidden;
  position: relative;
}

.cb-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--blue-light);
  border: 1px solid rgba(43,127,255,.22);
  color: var(--blue);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 22px;
}

.cb-hero__title {
  font-size: clamp(40px, 6vw, 76px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -2px;
  color: var(--ink);
  margin-bottom: 20px;
  max-width: 16ch;
  margin-left: auto;
  margin-right: auto;
}

.cb-hero__title .accent-blue { color: var(--blue); }
.cb-hero__title .accent-gold { color: var(--gold); }

.cb-hero__lead {
  font-size: 17.5px;
  color: var(--muted);
  line-height: 1.65;
  max-width: 58ch;
  margin: 0 auto 32px;
}

.cb-hero__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 52px;
}

.btn.cb-dark {
  background: var(--ink);
  color: var(--white);
  border-color: rgba(255,255,255,.08);
  font-weight: 700;
  box-shadow: 0 4px 18px rgba(13,17,23,.22);
}
.btn.cb-dark:hover { background: #1a1f2a; box-shadow: 0 8px 28px rgba(13,17,23,.30); }

.btn.cb-play {
  background: var(--white);
  color: var(--ink);
  border-color: var(--stroke);
  font-weight: 600;
  gap: 10px;
}
.btn.cb-play:hover { box-shadow: var(--shadow2); border-color: rgba(43,127,255,.25); }

.cb-play-ico {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--blue);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

/* Dashboard mockup */
.cb-dashboard-wrap {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
}

.cb-dashboard-wrap::before,
.cb-dashboard-wrap::after {
  content: "";
  position: absolute;
  width: 320px; height: 320px;
  border-radius: 50%;
  top: -60px;
  pointer-events: none;
  z-index: 0;
}

.cb-dashboard-wrap::before {
  background: rgba(34,197,94,.14);
  left: -80px;
  filter: blur(1px);
}

.cb-dashboard-wrap::after {
  background: rgba(168,85,247,.12);
  right: -80px;
  filter: blur(1px);
}

.cb-dashboard {
  position: relative;
  z-index: 1;
  background: var(--white);
  border-radius: 20px 20px 0 0;
  border: 1px solid var(--stroke);
  border-bottom: none;
  box-shadow: 0 -8px 60px rgba(13,17,23,.14);
  overflow: hidden;
}

.cb-dash__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 20px;
  background: var(--white);
  border-bottom: 1px solid var(--stroke2);
  gap: 16px;
}

.cb-dash__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}

.cb-dash__brand-ico {
  width: 26px; height: 26px;
  border-radius: 7px;
  background: var(--blue);
  display: grid;
  place-items: center;
}

.cb-dash__search {
  flex: 1;
  max-width: 280px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 9px;
  border: 1px solid var(--stroke2);
  background: var(--bg);
  font-size: 12.5px;
  color: var(--muted2);
}

.cb-dash__right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cb-dash__user {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--muted);
  font-weight: 600;
}

.cb-dash__avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), var(--blue-dark));
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--white);
  flex-shrink: 0;
}

.cb-dash__badge {
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--blue-light);
  color: var(--blue);
  border: 1px solid rgba(43,127,255,.20);
}

.cb-dash__body {
  display: grid;
  grid-template-columns: 200px 1fr;
  min-height: 380px;
}

.cb-dash__nav {
  background: #F8FAFF;
  border-right: 1px solid var(--stroke2);
  padding: 14px 0;
}

.cb-dash__nav-section {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted2);
  padding: 10px 16px 6px;
}

.cb-dash__nav-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: background .15s, color .15s;
}

.cb-dash__nav-item svg { width: 14px; height: 14px; flex-shrink: 0; }
.cb-dash__nav-item:hover  { background: rgba(43,127,255,.06); color: var(--blue); }
.cb-dash__nav-item.active { background: var(--blue-light); color: var(--blue); }

.cb-dash__main {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--bg);
}

.cb-dash__main-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cb-dash__title { font-size: 16px; font-weight: 700; color: var(--ink); }
.cb-dash__title-sub { font-size: 11.5px; color: var(--muted2); margin-top: 2px; }

.cb-dash__period {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cb-dash__period-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 9px;
  border: 1px solid var(--stroke);
  background: var(--white);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  font-family: var(--sans);
}

.cb-report-btn {
  padding: 7px 14px;
  border-radius: 9px;
  background: var(--blue);
  color: var(--white);
  font-size: 12px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  font-family: var(--sans);
}

.cb-dash__stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }

.cb-dash__stat-card {
  background: var(--white);
  border-radius: 12px;
  border: 1px solid var(--stroke2);
  padding: 14px;
}

.cb-dash__stat-label { font-size: 11px; font-weight: 600; color: var(--muted2); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .04em; }
.cb-dash__stat-val   { font-size: 22px; font-weight: 700; color: var(--ink); letter-spacing: -.5px; margin-bottom: 4px; }
.cb-dash__stat-delta { font-size: 11.5px; font-weight: 700; display: flex; align-items: center; gap: 4px; }
.delta--up   { color: var(--green); }
.delta--down { color: var(--red); }

.cb-dash__chart-row { display: grid; grid-template-columns: 1.3fr 1fr; gap: 10px; }

.cb-chart-card {
  background: var(--white);
  border-radius: 12px;
  border: 1px solid var(--stroke2);
  padding: 14px;
}

.cb-chart-card__title { font-size: 12.5px; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.cb-chart-card__sub   { font-size: 11px; color: var(--muted2); margin-bottom: 12px; }
.cb-chart-card__val   { font-size: 20px; font-weight: 700; color: var(--ink); letter-spacing: -.5px; margin-bottom: 2px; }
.cb-chart-card__delta { font-size: 11px; font-weight: 600; color: var(--green); margin-bottom: 10px; }

/* Mini bar chart */
.cb-bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 48px;
}

.cb-bar {
  flex: 1;
  border-radius: 3px 3px 0 0;
  background: var(--blue-light);
}

.cb-bar.hi { background: var(--blue); }

/* Mini sparkline */
.cb-sparkline { width: 100%; height: 48px; }

/* Category bars */
.cb-cat-list { display: flex; flex-direction: column; gap: 5px; }

.cb-cat-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cb-cat-row__dot {
  width: 8px; height: 8px;
  border-radius: 2px;
  flex-shrink: 0;
}

.cb-cat-row__label { font-size: 10.5px; color: var(--muted2); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.cb-cat-row__bar-wrap {
  width: 80px;
  height: 5px;
  border-radius: 99px;
  background: var(--stroke2);
  overflow: hidden;
}

.cb-cat-row__bar {
  height: 100%;
  border-radius: 99px;
}

/* ---- Functionality (dark) ---- */
.cb-func {
  background:
    radial-gradient(ellipse 900px 500px at 50% -5%, rgba(43,127,255,.16), transparent 55%),
    radial-gradient(ellipse 600px 400px at 92%  85%, rgba(253,185,19,.08), transparent 55%),
    linear-gradient(180deg, #06090F 0%, #0A0F1A 100%);
  padding: 88px 0;
  position: relative;
  overflow: hidden;
}

.cb-func__head {
  margin-bottom: 44px;
}

.cb-func__head-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 0;
}

.cb-func__overline {
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 700;
  color: var(--white);
  letter-spacing: -.8px;
  margin-bottom: 10px;
  text-align: center;
}

.cb-func__head-titles h2 {
  font-size: clamp(22px, 2.8vw, 34px);
  font-weight: 700;
  color: var(--white);
  letter-spacing: -.6px;
  line-height: 1.2;
  max-width: 18ch;
}

.cb-func__head-desc {
  font-size: 15px;
  color: rgba(255,255,255,.52);
  line-height: 1.65;
  max-width: 48ch;
  padding-top: 4px;
}

.cb-func-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.cb-func-card {
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  padding: 26px 22px 28px;
  transition: border-color .22s, background .22s, transform .2s;
  cursor: default;
}

.cb-func-card:hover {
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.07);
  transform: translateY(-3px);
}

.cb-func-card__ico {
  width: 48px; height: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
}

.cb-func-card__ico svg { width: 22px; height: 22px; }

.fco--blue   { background: rgba(43,127,255,.22);  border: 1px solid rgba(43,127,255,.32); color: #79C0FF; }
.fco--green  { background: rgba(34,197,94,.18);   border: 1px solid rgba(34,197,94,.28);  color: #4ADE80; }
.fco--gold   { background: rgba(253,185,19,.16);  border: 1px solid rgba(253,185,19,.26); color: var(--gold); }
.fco--red    { background: rgba(224,32,32,.16);   border: 1px solid rgba(224,32,32,.26);  color: #FF7B72; }
.fco--purple { background: rgba(168,85,247,.18);  border: 1px solid rgba(168,85,247,.28); color: #C084FC; }
.fco--teal   { background: rgba(20,184,166,.16);  border: 1px solid rgba(20,184,166,.26); color: #2DD4BF; }
.fco--rose   { background: rgba(244,63,94,.16);   border: 1px solid rgba(244,63,94,.26);  color: #FB7185; }
.fco--slate  { background: rgba(148,163,184,.14); border: 1px solid rgba(148,163,184,.22); color: #CBD5E1; }
.fco--indigo { background: rgba(99,102,241,.18);  border: 1px solid rgba(99,102,241,.28); color: #A5B4FC; }
.fco--amber  { background: rgba(245,158,11,.16);  border: 1px solid rgba(245,158,11,.26); color: #FCD34D; }
.fco--cyan   { background: rgba(6,182,212,.16);   border: 1px solid rgba(6,182,212,.26);  color: #67E8F9; }
.fco--lime   { background: rgba(132,204,22,.16);  border: 1px solid rgba(132,204,22,.26); color: #BEF264; }

.cb-func-card__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 8px;
  letter-spacing: -.25px;
}

.cb-func-card__desc {
  font-size: 13px;
  color: rgba(255,255,255,.50);
  line-height: 1.60;
}

/* ---- How it works ---- */
.cb-how {
  padding: 88px 0;
  background: var(--bg);
}

.cb-how__head { text-align: center; margin-bottom: 56px; }

.cb-how__head h2 {
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 700;
  letter-spacing: -.8px;
  margin-bottom: 10px;
}

.cb-how__head p { font-size: 15.5px; color: var(--muted); max-width: 52ch; margin: 0 auto; line-height: 1.65; }

.cb-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
}

.cb-steps::before {
  content: "";
  position: absolute;
  top: 28px;
  left: calc(12.5% + 28px);
  right: calc(12.5% + 28px);
  height: 2px;
  background: linear-gradient(90deg, var(--blue), var(--gold));
  opacity: .30;
}

.cb-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 18px;
  position: relative;
}

.cb-step__num {
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 2px solid var(--blue);
  background: var(--white);
  display: grid;
  place-items: center;
  font-size: 18px;
  font-weight: 700;
  color: var(--blue);
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
  box-shadow: 0 0 0 6px rgba(43,127,255,.08);
  flex-shrink: 0;
}

.cb-step:nth-child(2) .cb-step__num { border-color: #A855F7; color: #A855F7; box-shadow: 0 0 0 6px rgba(168,85,247,.08); }
.cb-step:nth-child(3) .cb-step__num { border-color: var(--gold); color: #B45309; box-shadow: 0 0 0 6px rgba(253,185,19,.08); }
.cb-step:nth-child(4) .cb-step__num { border-color: var(--green); color: #16A34A; box-shadow: 0 0 0 6px rgba(34,197,94,.08); }

.cb-step__title { font-size: 14.5px; font-weight: 700; color: var(--ink); margin-bottom: 7px; letter-spacing: -.2px; }
.cb-step__desc  { font-size: 13px; color: var(--muted); line-height: 1.6; }

/* ---- Stats ---- */
.cb-numbers {
  background:
    radial-gradient(ellipse 700px 300px at 20% 50%, rgba(43,127,255,.16), transparent 55%),
    radial-gradient(ellipse 600px 300px at 80% 50%, rgba(253,185,19,.10), transparent 55%),
    var(--navy2);
  padding: 60px 0;
  position: relative;
  overflow: hidden;
}

.cb-numbers__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.cb-num {
  padding: 24px 28px;
  border-right: 1px solid rgba(255,255,255,.07);
  text-align: center;
}

.cb-num:last-child { border-right: none; }

.cb-num__val {
  font-size: clamp(30px, 3.8vw, 48px);
  font-weight: 700;
  color: var(--white);
  letter-spacing: -1.2px;
  line-height: 1;
  margin-bottom: 6px;
}

.cb-num__val .suf { color: var(--gold); }
.cb-num__label { font-size: 13px; color: rgba(255,255,255,.50); font-weight: 400; line-height: 1.4; }

/* ---- Use cases ---- */
.cb-usecases {
  padding: 88px 0;
  background: var(--white);
  border-top: 1px solid var(--stroke2);
}

.cb-usecases__head { text-align: center; margin-bottom: 44px; }

.cb-usecases__head h2 {
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 700;
  letter-spacing: -.8px;
  margin-bottom: 10px;
}

.cb-usecases__head p { font-size: 15.5px; color: var(--muted); max-width: 52ch; margin: 0 auto; line-height: 1.65; }

.cb-usecase-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.cb-usecase-card {
  border-radius: var(--radius2);
  border: 1px solid var(--stroke);
  background: var(--bg);
  padding: 28px 24px;
  transition: border-color .2s, box-shadow .2s, transform .18s, background .2s;
}

.cb-usecase-card:hover {
  border-color: rgba(43,127,255,.22);
  background: var(--white);
  box-shadow: var(--shadow);
  transform: translateY(-3px);
}

.cb-usecase-card__num {
  font-size: 11.5px;
  font-weight: 700;
  font-family: var(--mono);
  color: var(--blue);
  letter-spacing: .06em;
  margin-bottom: 12px;
}

.cb-usecase-card__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.3px;
  margin-bottom: 10px;
}

.cb-usecase-card__desc {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.62;
  margin-bottom: 16px;
}

.cb-usecase-card__tags { display: flex; gap: 6px; flex-wrap: wrap; }

.cb-tag {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  background: var(--blue-light);
  border: 1px solid rgba(43,127,255,.18);
  color: var(--blue);
}

/* ---- API panel ---- */
.cb-api {
  padding: 88px 0;
  background: var(--bg);
  border-top: 1px solid var(--stroke2);
}

.cb-api__grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 56px;
  align-items: center;
}

.cb-api__text h2 {
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 700;
  letter-spacing: -.7px;
  line-height: 1.12;
  margin-bottom: 14px;
}

.cb-api__text h2 .accent { color: var(--blue); }
.cb-api__text p { font-size: 15.5px; color: var(--muted); line-height: 1.65; margin-bottom: 22px; }

.cb-api-feats { display: flex; flex-direction: column; gap: 12px; margin-bottom: 28px; }

.cb-api-feat {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.cb-api-feat__ico {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: var(--blue-light);
  border: 1px solid rgba(43,127,255,.18);
}

.cb-api-feat__ico svg { width: 16px; height: 16px; color: var(--blue); }
.cb-api-feat__title { font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 3px; }
.cb-api-feat__desc  { font-size: 13px; color: var(--muted); line-height: 1.55; }

/* ---- CTA pill ---- */
.cb-cta {
  padding: 32px 0 80px;
  background: var(--bg);
}

.cb-cta-pill {
  border-radius: 24px;
  background:
    radial-gradient(ellipse 600px 200px at 80% 50%, rgba(43,127,255,.16), transparent 60%),
    radial-gradient(ellipse 400px 200px at 10% 50%, rgba(253,185,19,.10), transparent 60%),
    linear-gradient(135deg, var(--navy2) 0%, #111827 100%);
  border: 1px solid rgba(255,255,255,.08);
  padding: 40px 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}

.cb-cta-pill__text h2 {
  font-size: clamp(18px, 2.3vw, 28px);
  font-weight: 700;
  color: var(--white);
  letter-spacing: -.5px;
  margin-bottom: 6px;
}

.cb-cta-pill__text p { font-size: 14.5px; color: rgba(255,255,255,.55); line-height: 1.55; }
.cb-cta-pill__actions { display: flex; gap: 12px; flex-wrap: wrap; flex-shrink: 0; }

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .cb-func-grid    { grid-template-columns: repeat(2, 1fr); }
  .cb-api__grid    { grid-template-columns: 1fr; gap: 36px; }
}

@media (max-width: 900px) {
  .cb-dash__body   { grid-template-columns: 1fr; }
  .cb-dash__nav    { display: none; }
  .cb-dash__stats  { grid-template-columns: 1fr 1fr; }
  .cb-dash__chart-row { grid-template-columns: 1fr; }
  .cb-steps        { grid-template-columns: 1fr 1fr; row-gap: 36px; }
  .cb-steps::before { display: none; }
  .cb-usecase-grid { grid-template-columns: 1fr 1fr; }
  .cb-numbers__grid { grid-template-columns: 1fr 1fr; }
  .cb-num:nth-child(2) { border-right: none; }
  .cb-num:nth-child(3) { border-top: 1px solid rgba(255,255,255,.07); border-right: 1px solid rgba(255,255,255,.07); }
  .cb-num:nth-child(4) { border-top: 1px solid rgba(255,255,255,.07); border-right: none; }
  .cb-cta-pill     { padding: 28px; flex-direction: column; align-items: flex-start; }
}

@media (max-width: 640px) {
  .cb-func-grid    { grid-template-columns: 1fr; }
  .cb-steps        { grid-template-columns: 1fr; }
  .cb-usecase-grid { grid-template-columns: 1fr; }
  .cb-dash__stats  { grid-template-columns: 1fr; }
  .cb-cta-pill__actions { width: 100%; }
  .cb-func__head-top { flex-direction: column; align-items: flex-start; }
  .cb-numbers__grid { grid-template-columns: 1fr 1fr; }
}


/* =============================================================
   BANK DATA API PAGE
   ============================================================= */

/* --- Hero --- */
.bd-hero {
  background:
    radial-gradient(ellipse 700px 500px at 85% 30%, rgba(43,127,255,.10), transparent 55%),
    radial-gradient(ellipse 500px 400px at  5% 70%, rgba(253,185,19,.06), transparent 55%),
    linear-gradient(180deg, #EEF3FC 0%, var(--bg) 100%);
  padding: 80px 0 72px;
  overflow: hidden;
  position: relative;
}

.bd-hero__grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 52px;
  align-items: center;
}

.bd-hero__brand {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.bd-hero__brand-ico {
  width: 64px; height: 64px;
  border-radius: 18px;
  background: var(--white);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow2);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.bd-hero__brand-ico svg { width: 32px; height: 32px; color: var(--blue); }

.bd-hero__brand-text h1 {
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 700;
  letter-spacing: -1.2px;
  line-height: 1.1;
  color: var(--ink);
  margin-bottom: 4px;
}

.bd-hero__brand-text p {
  font-size: 15.5px;
  color: var(--muted);
  line-height: 1.55;
}

.bd-hero__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.bd-hero__trust {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 20px;
  border-top: 1px solid var(--stroke2);
}

.bd-hero__trust-label { font-size: 12px; color: var(--muted2); font-weight: 500; white-space: nowrap; }

/* Code response panel */
.bd-code-panel {
  background: var(--navy2);
  border-radius: var(--radius2);
  border: 1px solid rgba(255,255,255,.07);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.bd-code-panel__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: rgba(255,255,255,.03);
  border-bottom: 1px solid rgba(255,255,255,.07);
}

.bd-code-panel__label {
  font-size: 12px;
  color: rgba(255,255,255,.55);
  font-family: var(--mono);
  font-weight: 500;
}

.bd-code-panel__dots { display: flex; gap: 6px; }
.bd-code-panel__dots span { width: 10px; height: 10px; border-radius: 50%; }
.bd-code-panel__dots span:nth-child(1) { background: #FF5F57; }
.bd-code-panel__dots span:nth-child(2) { background: #FEBC2E; }
.bd-code-panel__dots span:nth-child(3) { background: #28C840; }

.bd-code-panel__tabs {
  display: flex;
  gap: 4px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  overflow-x: auto;
}

.bd-code-tab {
  padding: 5px 11px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,.42);
  cursor: pointer;
  border: 1px solid transparent;
  transition: all .18s;
  white-space: nowrap;
  font-family: var(--sans);
  background: none;
}

.bd-code-tab.active {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.10);
  color: rgba(255,255,255,.82);
}

.bd-code-panel__body {
  padding: 22px;
  min-height: 220px;
  overflow-x: auto;
}

.bd-code-panel__footer {
  padding: 11px 16px;
  border-top: 1px solid rgba(255,255,255,.06);
  font-size: 12.5px;
  color: rgba(255,255,255,.45);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.bd-code-panel__footer a {
  color: var(--blue);
  font-weight: 600;
  text-decoration: none;
}

.bd-code-panel__footer a:hover { text-decoration: underline; }

/* --- Stats strip --- */
.bd-stats {
  background: var(--navy2);
  padding: 52px 0;
  position: relative;
  overflow: hidden;
}

.bd-stats::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(600px 250px at 20% 50%, rgba(43,127,255,.15), transparent 60%),
    radial-gradient(500px 250px at 80% 50%, rgba(253,185,19,.09), transparent 60%);
  pointer-events: none;
}

.bd-stats__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.bd-stat {
  padding: 20px 24px;
  border-right: 1px solid rgba(255,255,255,.07);
  text-align: center;
}

.bd-stat:last-child { border-right: none; }
.bd-stat__val { font-size: clamp(28px, 3.5vw, 42px); font-weight: 700; color: var(--white); letter-spacing: -1px; line-height: 1; margin-bottom: 6px; }
.bd-stat__val .suf { color: var(--gold); }
.bd-stat__label { font-size: 13px; color: rgba(255,255,255,.50); font-weight: 400; line-height: 1.4; }

/* --- Coverage grid --- */
.bd-coverage {
  padding: 88px 0;
  background: var(--white);
  border-top: 1px solid var(--stroke2);
}

.bd-coverage__head {
  text-align: center;
  margin-bottom: 52px;
}

.bd-coverage__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 13px;
  border-radius: 999px;
  background: rgba(34,197,94,.10);
  border: 1px solid rgba(34,197,94,.22);
  color: #16A34A;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.bd-coverage__eyebrow-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(34,197,94,.22);
  animation: pulse 1.8s ease-in-out infinite;
}

.bd-coverage__head h2 {
  font-size: clamp(28px, 3.5vw, 48px);
  font-weight: 700;
  letter-spacing: -1px;
  line-height: 1.1;
  margin-bottom: 12px;
}

.bd-coverage__head p { font-size: 16px; color: var(--muted); max-width: 60ch; margin: 0 auto; line-height: 1.65; }

.bd-code-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}

.bd-code-card {
  background: var(--bg);
  border: 1px solid var(--stroke);
  border-radius: var(--radius2);
  padding: 22px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color .2s, background .2s, box-shadow .2s, transform .18s;
  cursor: default;
}

.bd-code-card:hover {
  border-color: rgba(43,127,255,.22);
  background: var(--white);
  box-shadow: var(--shadow2);
  transform: translateY(-2px);
}

.bd-code-card__ico {
  width: 40px; height: 40px;
  border-radius: 11px;
  background: rgba(43,127,255,.09);
  border: 1px solid rgba(43,127,255,.16);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.bd-code-card__ico svg { width: 18px; height: 18px; color: var(--blue); }

.bd-code-card__name {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.25px;
}

.bd-code-card__desc {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.55;
  flex: 1;
}

.bd-code-card__tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.bd-tag {
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  background: rgba(43,127,255,.09);
  border: 1px solid rgba(43,127,255,.16);
  color: var(--blue);
}

/* --- How it works (dark) --- */
.bd-how {
  background:
    radial-gradient(ellipse 800px 400px at 50% 0%, rgba(43,127,255,.14), transparent 55%),
    linear-gradient(180deg, #06090F 0%, #0A0F1A 100%);
  padding: 88px 0;
  overflow: hidden;
  position: relative;
}

.bd-how__head { text-align: center; margin-bottom: 52px; }

.bd-how__head h2 {
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 700;
  color: var(--white);
  letter-spacing: -.8px;
  margin-bottom: 10px;
}

.bd-how__head p { font-size: 15.5px; color: rgba(255,255,255,.50); max-width: 52ch; margin: 0 auto; line-height: 1.65; }

.bd-how-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
}

.bd-how-steps::before {
  content: "";
  position: absolute;
  top: 28px;
  left: calc(12.5% + 28px);
  right: calc(12.5% + 28px);
  height: 1px;
  background: linear-gradient(90deg, var(--blue), var(--gold));
  opacity: .30;
}

.bd-how-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 18px;
  position: relative;
}

.bd-how-step__num {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(43,127,255,.16);
  border: 1.5px solid rgba(43,127,255,.32);
  display: grid;
  place-items: center;
  font-size: 17px;
  font-weight: 700;
  color: #79C0FF;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}

.bd-how-step:nth-child(2) .bd-how-step__num { background: rgba(168,85,247,.16); border-color: rgba(168,85,247,.30); color: #C084FC; }
.bd-how-step:nth-child(3) .bd-how-step__num { background: rgba(253,185,19,.14); border-color: rgba(253,185,19,.28); color: var(--gold); }
.bd-how-step:nth-child(4) .bd-how-step__num { background: rgba(34,197,94,.14);  border-color: rgba(34,197,94,.28);  color: var(--green); }

.bd-how-step__title { font-size: 14.5px; font-weight: 700; color: var(--white); margin-bottom: 8px; letter-spacing: -.2px; }
.bd-how-step__desc  { font-size: 13px; color: rgba(255,255,255,.52); line-height: 1.6; }

/* --- API Explorer --- */
.bd-api {
  padding: 88px 0;
  background: var(--bg);
  border-top: 1px solid var(--stroke2);
}

.bd-api__grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 56px;
  align-items: center;
}

.bd-api__text h2 { font-size: clamp(26px, 3vw, 38px); font-weight: 700; letter-spacing: -.7px; line-height: 1.12; margin-bottom: 14px; }
.bd-api__text h2 .accent { color: var(--blue); }
.bd-api__text p { font-size: 15.5px; color: var(--muted); line-height: 1.65; margin-bottom: 24px; }

.bd-api-feats { display: flex; flex-direction: column; gap: 12px; margin-bottom: 28px; }

.bd-api-feat { display: flex; gap: 12px; align-items: flex-start; }

.bd-api-feat__ico {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: var(--blue-light);
  border: 1px solid rgba(43,127,255,.18);
}

.bd-api-feat__ico svg { width: 16px; height: 16px; color: var(--blue); }
.bd-api-feat__title { font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 3px; }
.bd-api-feat__desc  { font-size: 13px; color: var(--muted); line-height: 1.55; }

/* --- Pricing --- */
.bd-pricing {
  padding: 88px 0;
  background: var(--white);
  border-top: 1px solid var(--stroke2);
}

.bd-pricing__head { text-align: center; margin-bottom: 48px; }

.bd-pricing__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 13px;
  border-radius: 999px;
  background: rgba(34,197,94,.10);
  border: 1px solid rgba(34,197,94,.22);
  color: #16A34A;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.bd-pricing__head h2 { font-size: clamp(28px, 3.5vw, 46px); font-weight: 700; letter-spacing: -1px; margin-bottom: 10px; }
.bd-pricing__head p  { font-size: 15.5px; color: var(--muted); }

.bd-plans-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  align-items: end;
}

.bd-plan {
  border-radius: var(--radius2);
  border: 1px solid var(--stroke);
  background: var(--white);
  box-shadow: var(--shadow2);
  padding: 28px 20px 24px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform .2s, box-shadow .2s;
}

.bd-plan:hover { transform: translateY(-2px); box-shadow: var(--shadow); }

.bd-plan--popular {
  border-color: var(--blue);
  transform: translateY(-8px);
  box-shadow: 0 20px 60px rgba(43,127,255,.18);
}

.bd-plan--popular:hover { transform: translateY(-12px); }

.bd-plan__badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--navy);
  color: var(--white);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 999px;
  white-space: nowrap;
}

.bd-plan__name {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 12px;
  letter-spacing: -.3px;
}

.bd-plan__price {
  margin-bottom: 4px;
  display: flex;
  align-items: flex-start;
  gap: 1px;
  line-height: 1;
}

.bd-plan__price-dollar {
  font-size: 20px;
  font-weight: 700;
  color: var(--blue);
  margin-top: 6px;
}

.bd-plan__price-int {
  font-size: 48px;
  font-weight: 700;
  color: var(--blue);
  letter-spacing: -2px;
  line-height: 1;
}

.bd-plan__price-dec {
  font-size: 18px;
  font-weight: 700;
  color: var(--blue);
  margin-top: 6px;
}

.bd-plan__price-vol {
  font-size: 38px;
  font-weight: 700;
  color: var(--blue);
  letter-spacing: -1px;
  line-height: 1.1;
}

.bd-plan__period {
  font-size: 13px;
  color: var(--muted2);
  margin-bottom: 18px;
}

.bd-plan__cta {
  display: block;
  width: 100%;
  padding: 12px;
  border-radius: 12px;
  border: 1.5px solid var(--blue);
  background: transparent;
  color: var(--blue);
  font-weight: 700;
  font-size: 14.5px;
  font-family: var(--sans);
  text-align: center;
  cursor: pointer;
  transition: background .18s, color .18s, transform .15s, box-shadow .18s;
  margin-bottom: 22px;
  text-decoration: none;
}

.bd-plan__cta:hover {
  background: var(--blue);
  color: var(--white);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(43,127,255,.26);
}

.bd-plan--popular .bd-plan__cta {
  background: var(--green);
  border-color: #16A34A;
  color: var(--white);
  box-shadow: 0 4px 16px rgba(34,197,94,.26);
}

.bd-plan--popular .bd-plan__cta:hover { background: #16A34A; }

.bd-plan__features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 16px;
  border-top: 1px solid var(--stroke2);
}

.bd-plan__features li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
}

.bd-feat-dot {
  width: 18px; height: 18px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 1px;
  display: grid;
  place-items: center;
}

.bd-feat-dot--outline {
  background: transparent;
  border: 1.5px solid var(--stroke);
}

.bd-feat-dot--filled {
  background: rgba(34,197,94,.15);
  border: 1.5px solid rgba(34,197,94,.30);
}

.bd-feat-dot--filled::after {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--green);
}

.bd-feat-code {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--blue);
  border: 1px solid rgba(43,127,255,.22);
  border-radius: 4px;
  padding: 1px 4px;
  flex-shrink: 0;
  margin-top: 1px;
}

/* --- CTA pill --- */
.bd-cta {
  padding: 32px 0 80px;
  background: var(--bg);
}

.bd-cta-pill {
  border-radius: 24px;
  background:
    radial-gradient(ellipse 600px 200px at 80% 50%, rgba(43,127,255,.16), transparent 60%),
    linear-gradient(135deg, var(--navy2) 0%, #111827 100%);
  border: 1px solid rgba(255,255,255,.08);
  padding: 40px 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}

.bd-cta-pill__text h2 { font-size: clamp(18px, 2.3vw, 28px); font-weight: 700; color: var(--white); letter-spacing: -.5px; margin-bottom: 6px; }
.bd-cta-pill__text p  { font-size: 14.5px; color: rgba(255,255,255,.55); line-height: 1.55; }
.bd-cta-pill__actions { display: flex; gap: 12px; flex-wrap: wrap; flex-shrink: 0; }

/* --- Responsive --- */
@media (max-width: 1100px) {
  .bd-code-grid   { grid-template-columns: repeat(3, 1fr); }
  .bd-plans-grid  { grid-template-columns: repeat(3, 1fr); }
  .bd-plan--popular { transform: none; }
  .bd-plan--popular:hover { transform: translateY(-2px); }
}

@media (max-width: 900px) {
  .bd-hero__grid  { grid-template-columns: 1fr; gap: 36px; }
  .bd-api__grid   { grid-template-columns: 1fr; gap: 36px; }
  .bd-stats__grid { grid-template-columns: 1fr 1fr; }
  .bd-stat:nth-child(2) { border-right: none; }
  .bd-stat:nth-child(3) { border-top: 1px solid rgba(255,255,255,.07); border-right: 1px solid rgba(255,255,255,.07); }
  .bd-stat:nth-child(4) { border-top: 1px solid rgba(255,255,255,.07); border-right: none; }
  .bd-how-steps   { grid-template-columns: 1fr 1fr; row-gap: 36px; }
  .bd-how-steps::before { display: none; }
  .bd-cta-pill    { padding: 28px; flex-direction: column; align-items: flex-start; }
}

@media (max-width: 640px) {
  .bd-code-grid   { grid-template-columns: 1fr 1fr; }
  .bd-plans-grid  { grid-template-columns: 1fr; }
  .bd-how-steps   { grid-template-columns: 1fr; }
  .bd-stats__grid { grid-template-columns: 1fr 1fr; }
  .bd-cta-pill__actions { width: 100%; }
}


/* =============================================================
   KYC / KNOW YOUR CUSTOMER PAGE
   ============================================================= */

/* --- Dark hero --- */
.kyc-hero {
  background:
    radial-gradient(ellipse 900px 700px at 50%  -5%, rgba(67,56,202,.55), transparent 55%),
    radial-gradient(ellipse 600px 500px at 90%  80%, rgba(43,127,255,.18), transparent 55%),
    radial-gradient(ellipse 500px 400px at  0%  70%, rgba(99,91,255,.12),  transparent 55%),
    linear-gradient(180deg, #1E1B4B 0%, #12103A 60%, #0D0B28 100%);
  padding: 80px 0 0;
  overflow: hidden;
  position: relative;
}

.kyc-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.02'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4z'/%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}

.kyc-hero__grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 64px;
  align-items: center;
  padding-bottom: 80px;
  position: relative;
}

.kyc-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 13px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.80);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.kyc-hero__title {
  font-size: clamp(34px, 4.5vw, 58px);
  font-weight: 700;
  color: var(--white);
  letter-spacing: -1.4px;
  line-height: 1.08;
  margin-bottom: 20px;
}

.kyc-hero__lead {
  font-size: 16.5px;
  color: rgba(255,255,255,.62);
  line-height: 1.65;
  max-width: 48ch;
  margin-bottom: 32px;
}

.kyc-hero__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.btn.kyc-green {
  background: #10B981;
  color: var(--white);
  border-color: #059669;
  font-weight: 700;
  box-shadow: 0 4px 18px rgba(16,185,129,.30);
}
.btn.kyc-green:hover { background: #059669; box-shadow: 0 8px 28px rgba(16,185,129,.38); }

.btn.kyc-outline {
  background: rgba(255,255,255,.10);
  color: var(--white);
  border-color: rgba(255,255,255,.22);
  font-weight: 600;
}
.btn.kyc-outline:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.32); }

.kyc-hero__chips {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.kyc-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.75);
  font-size: 13px;
  font-weight: 600;
}

.kyc-chip__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 0 3px rgba(16,185,129,.28);
  animation: pulse 1.8s ease-in-out infinite;
  flex-shrink: 0;
}

/* KYC code panel */
.kyc-panel {
  background: #1A1730;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 32px 80px rgba(0,0,0,.40);
  overflow: hidden;
}

.kyc-panel__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 18px;
  background: rgba(255,255,255,.04);
  border-bottom: 1px solid rgba(255,255,255,.07);
}

.kyc-panel__tag {
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(99,91,255,.25);
  border: 1px solid rgba(99,91,255,.40);
  color: #A5B4FC;
  font-size: 12px;
  font-weight: 700;
  font-family: var(--mono);
}

.kyc-panel__dots { display: flex; gap: 6px; }
.kyc-panel__dots span { width: 12px; height: 12px; border-radius: 50%; }
.kyc-panel__dots span:nth-child(1) { background: #FF5F57; }
.kyc-panel__dots span:nth-child(2) { background: #FEBC2E; }
.kyc-panel__dots span:nth-child(3) { background: #28C840; }

.kyc-panel__header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.03);
}

.kyc-panel__header-ico {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: rgba(99,91,255,.20);
  border: 1px solid rgba(99,91,255,.32);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.kyc-panel__header-ico svg { width: 18px; height: 18px; color: #A5B4FC; }

.kyc-panel__header-title { font-size: 14.5px; font-weight: 700; color: var(--white); }

.kyc-panel__header-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.kyc-panel__header-chip {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,.55);
  padding: 3px 8px;
  border-radius: 5px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.10);
}

.kyc-panel__code {
  padding: 20px 18px;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.75;
  color: rgba(255,255,255,.82);
  overflow-x: auto;
}

.kyc-panel__code .k-key    { color: #93C5FD; }
.kyc-panel__code .k-str    { color: #6EE7B7; }
.kyc-panel__code .k-num    { color: #FCD34D; }
.kyc-panel__code .k-bool   { color: #F9A8D4; }
.kyc-panel__code .k-risk   { color: #FCA5A5; }
.kyc-panel__code .k-clear  { color: #6EE7B7; }
.kyc-panel__code .k-match  { color: #FCD34D; }
.kyc-panel__code .k-brace  { color: rgba(255,255,255,.45); }

.kyc-panel__footer {
  padding: 14px 18px;
  border-top: 1px solid rgba(255,255,255,.07);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 700;
  color: #10B981;
  cursor: pointer;
  background: rgba(255,255,255,.02);
  transition: background .18s;
}

.kyc-panel__footer:hover { background: rgba(255,255,255,.05); }

/* --- Trusted by strip --- */
.kyc-trusted {
  background: rgba(255,255,255,.04);
  border-top: 1px solid rgba(255,255,255,.07);
  padding: 18px 0;
}

.kyc-trusted__inner {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: space-between;
}

.kyc-trusted__label {
  font-size: 13px;
  color: rgba(255,255,255,.45);
  font-weight: 500;
  white-space: nowrap;
}

.kyc-trusted__logos {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.kyc-trusted__logo {
  padding: 8px 18px;
  border-radius: 999px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.10);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  color: rgba(255,255,255,.65);
}

/* --- Why Choose KYC (light) --- */
.kyc-why {
  padding: 88px 0;
  background: var(--white);
}

.kyc-why__head {
  text-align: center;
  margin-bottom: 48px;
}

.kyc-why__head h2 { font-size: clamp(26px, 3.2vw, 42px); font-weight: 700; letter-spacing: -.8px; margin-bottom: 10px; }
.kyc-why__head p  { font-size: 16px; color: var(--muted); max-width: 56ch; margin: 0 auto; line-height: 1.65; }

.kyc-why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.kyc-why-card {
  background: var(--bg);
  border: 1px solid var(--stroke);
  border-radius: var(--radius2);
  padding: 26px 22px;
  transition: border-color .2s, box-shadow .2s, transform .18s, background .2s;
}

.kyc-why-card:hover {
  border-color: rgba(43,127,255,.22);
  background: var(--white);
  box-shadow: var(--shadow2);
  transform: translateY(-2px);
}

.kyc-why-card__ico {
  width: 44px; height: 44px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  margin-bottom: 16px;
  background: rgba(99,91,255,.10);
  border: 1px solid rgba(99,91,255,.18);
}

.kyc-why-card__ico svg { width: 20px; height: 20px; color: #6355FF; }
.kyc-why-card__title { font-size: 15.5px; font-weight: 700; color: var(--ink); margin-bottom: 8px; letter-spacing: -.25px; }
.kyc-why-card__desc  { font-size: 13.5px; color: var(--muted); line-height: 1.6; }

/* --- Complete KYC features (light) --- */
.kyc-features {
  padding: 88px 0;
  background: var(--bg);
  border-top: 1px solid var(--stroke2);
}

.kyc-features__head {
  text-align: center;
  margin-bottom: 48px;
}

.kyc-features__head h2 { font-size: clamp(26px, 3.2vw, 42px); font-weight: 700; letter-spacing: -.8px; margin-bottom: 10px; }
.kyc-features__head p  { font-size: 16px; color: var(--muted); max-width: 52ch; margin: 0 auto; line-height: 1.65; }

.kyc-feat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.kyc-feat-grid--bottom {
  grid-template-columns: repeat(2, 1fr);
  max-width: calc(66.66% + 14px);
  margin-top: 14px;
}

.kyc-feat-card {
  background: var(--white);
  border: 1px solid var(--stroke);
  border-radius: var(--radius2);
  padding: 26px 24px;
  box-shadow: var(--shadow2);
  display: flex;
  flex-direction: column;
  transition: border-color .2s, box-shadow .2s, transform .18s;
}

.kyc-feat-card:hover {
  border-color: rgba(43,127,255,.22);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.kyc-feat-card__ico {
  width: 44px; height: 44px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  margin-bottom: 14px;
  background: rgba(99,91,255,.10);
  border: 1px solid rgba(99,91,255,.18);
}

.kyc-feat-card__ico svg { width: 20px; height: 20px; color: #6355FF; }

.kyc-feat-card__title { font-size: 16px; font-weight: 700; color: var(--ink); margin-bottom: 8px; letter-spacing: -.25px; }
.kyc-feat-card__desc  { font-size: 13.5px; color: var(--muted); line-height: 1.6; margin-bottom: 14px; }

.kyc-feat-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 18px;
  flex: 1;
}

.kyc-feat-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
}

.kyc-feat-list li::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #10B981;
  flex-shrink: 0;
}

.kyc-learn-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: 10px;
  border: 1.5px solid var(--stroke);
  background: var(--white);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  font-family: var(--sans);
  cursor: pointer;
  text-decoration: none;
  align-self: flex-start;
  transition: border-color .18s, background .18s, box-shadow .15s;
}

.kyc-learn-btn:hover {
  border-color: rgba(43,127,255,.30);
  background: var(--blue-light);
  color: var(--blue);
  box-shadow: 0 4px 14px rgba(43,127,255,.12);
}

/* --- Industries (KYC useful for) --- */
.kyc-industries {
  padding: 88px 0;
  background: var(--white);
  border-top: 1px solid var(--stroke2);
}

.kyc-industries__head {
  text-align: center;
  margin-bottom: 48px;
}

.kyc-industries__head h2 { font-size: clamp(26px, 3.2vw, 42px); font-weight: 700; letter-spacing: -.8px; margin-bottom: 10px; }
.kyc-industries__head p  { font-size: 16px; color: var(--muted); max-width: 52ch; margin: 0 auto; line-height: 1.65; }

.kyc-ind-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.kyc-ind-card {
  background: var(--bg);
  border: 1px solid var(--stroke);
  border-radius: var(--radius2);
  padding: 26px 22px;
  transition: border-color .2s, box-shadow .2s, transform .18s, background .2s;
}

.kyc-ind-card:hover {
  border-color: rgba(43,127,255,.22);
  background: var(--white);
  box-shadow: var(--shadow2);
  transform: translateY(-2px);
}

.kyc-ind-card__ico {
  width: 44px; height: 44px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  margin-bottom: 14px;
  background: rgba(99,91,255,.10);
  border: 1px solid rgba(99,91,255,.18);
}

.kyc-ind-card__ico svg { width: 20px; height: 20px; color: #6355FF; }
.kyc-ind-card__title { font-size: 15.5px; font-weight: 700; color: var(--ink); margin-bottom: 8px; letter-spacing: -.25px; }
.kyc-ind-card__desc  { font-size: 13px; color: var(--muted); line-height: 1.6; }

/* --- API Explorer (dark) --- */
.kyc-api {
  background:
    radial-gradient(ellipse 800px 400px at 50% 0%, rgba(67,56,202,.20), transparent 55%),
    linear-gradient(180deg, #0D0B28 0%, #0A0F1A 100%);
  padding: 88px 0;
  position: relative;
  overflow: hidden;
}

.kyc-api__grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 56px;
  align-items: center;
}

.kyc-api__text h2 { font-size: clamp(26px, 3vw, 38px); font-weight: 700; letter-spacing: -.7px; line-height: 1.12; margin-bottom: 14px; color: var(--white); }
.kyc-api__text h2 .accent { color: #A5B4FC; }
.kyc-api__text p { font-size: 15.5px; color: rgba(255,255,255,.55); line-height: 1.65; margin-bottom: 24px; }

.kyc-api-feats { display: flex; flex-direction: column; gap: 14px; margin-bottom: 28px; }

.kyc-api-feat { display: flex; gap: 13px; align-items: flex-start; }

.kyc-api-feat__ico {
  width: 38px; height: 38px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: rgba(99,91,255,.18);
  border: 1px solid rgba(99,91,255,.30);
}

.kyc-api-feat__ico svg { width: 17px; height: 17px; color: #A5B4FC; }
.kyc-api-feat__title { font-size: 14px; font-weight: 700; color: rgba(255,255,255,.90); margin-bottom: 3px; }
.kyc-api-feat__desc  { font-size: 13px; color: rgba(255,255,255,.52); line-height: 1.55; }

/* Risk score widget */
.kyc-risk-widget {
  background: #1A1730;
  border-radius: var(--radius2);
  border: 1px solid rgba(255,255,255,.09);
  box-shadow: 0 32px 80px rgba(0,0,0,.40);
  overflow: hidden;
}

.kyc-risk-widget__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: rgba(255,255,255,.03);
  border-bottom: 1px solid rgba(255,255,255,.07);
}

.kyc-risk-widget__title { font-size: 12px; color: rgba(255,255,255,.50); font-family: var(--mono); }

.kyc-risk-widget__live {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  color: #10B981;
  font-family: var(--mono);
}

.kyc-risk-widget__live-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #10B981;
  animation: pulse 1.6s ease-in-out infinite;
}

.kyc-risk-widget__body { padding: 18px; display: flex; flex-direction: column; gap: 10px; }

.kyc-subject-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
}

.kyc-subject-row__info { display: flex; align-items: center; gap: 10px; }

.kyc-subject-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6355FF, #4338CA);
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--white);
  flex-shrink: 0;
}

.kyc-subject-name { font-size: 13.5px; font-weight: 700; color: rgba(255,255,255,.88); }
.kyc-subject-sub  { font-size: 11.5px; color: rgba(255,255,255,.45); }

.kyc-risk-badge {
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  font-family: var(--mono);
}

.kyc-risk-badge--high   { background: rgba(239,68,68,.18); border: 1px solid rgba(239,68,68,.30); color: #FCA5A5; }
.kyc-risk-badge--medium { background: rgba(253,185,19,.14); border: 1px solid rgba(253,185,19,.26); color: var(--gold); }
.kyc-risk-badge--low    { background: rgba(16,185,129,.14); border: 1px solid rgba(16,185,129,.26); color: #6EE7B7; }

/* Check rows */
.kyc-checks { display: flex; flex-direction: column; gap: 6px; }

.kyc-check-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
}

.kyc-check-row__left { display: flex; align-items: center; gap: 9px; }

.kyc-check-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

.kyc-check-label { font-size: 13px; font-weight: 600; color: rgba(255,255,255,.72); }
.kyc-check-val { font-size: 12.5px; font-weight: 700; font-family: var(--mono); }

.val--clear { color: #6EE7B7; }
.val--match { color: #FCD34D; }
.val--flag  { color: #FCA5A5; }

/* Risk gauge */
.kyc-gauge-section { padding: 14px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); }

.kyc-gauge-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.kyc-gauge-head__label { font-size: 12px; font-weight: 700; color: rgba(255,255,255,.55); }
.kyc-gauge-head__val   { font-size: 18px; font-weight: 700; color: #FCD34D; font-family: var(--mono); }

.kyc-gauge-track {
  height: 8px;
  border-radius: 99px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
}

.kyc-gauge-fill {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #10B981, #FCD34D 55%, #EF4444);
}

/* --- CTA pill --- */
.kyc-cta {
  padding: 32px 0 80px;
  background: var(--bg);
}

.kyc-cta-pill {
  border-radius: 24px;
  background:
    radial-gradient(ellipse 700px 250px at 80% 50%, rgba(67,56,202,.35), transparent 60%),
    radial-gradient(ellipse 400px 200px at 10% 50%, rgba(16,185,129,.15), transparent 60%),
    linear-gradient(135deg, #1E1B4B 0%, #12103A 100%);
  border: 1px solid rgba(255,255,255,.09);
  padding: 42px 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}

.kyc-cta-pill__text h2 { font-size: clamp(18px, 2.3vw, 28px); font-weight: 700; color: var(--white); letter-spacing: -.5px; margin-bottom: 6px; }
.kyc-cta-pill__text p  { font-size: 14.5px; color: rgba(255,255,255,.55); line-height: 1.55; }
.kyc-cta-pill__actions { display: flex; gap: 12px; flex-wrap: wrap; flex-shrink: 0; }

/* --- Responsive --- */
@media (max-width: 1024px) {
  .kyc-feat-grid--bottom { max-width: 100%; grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .kyc-hero__grid  { grid-template-columns: 1fr; gap: 40px; padding-bottom: 60px; }
  .kyc-api__grid   { grid-template-columns: 1fr; gap: 36px; }
  .kyc-why-grid    { grid-template-columns: 1fr 1fr; }
  .kyc-feat-grid   { grid-template-columns: 1fr 1fr; }
  .kyc-ind-grid    { grid-template-columns: 1fr 1fr; }
  .kyc-cta-pill    { padding: 28px; flex-direction: column; align-items: flex-start; }
}

@media (max-width: 640px) {
  .kyc-why-grid    { grid-template-columns: 1fr; }
  .kyc-feat-grid   { grid-template-columns: 1fr; }
  .kyc-feat-grid--bottom { grid-template-columns: 1fr; }
  .kyc-ind-grid    { grid-template-columns: 1fr; }
  .kyc-cta-pill__actions { width: 100%; }
}


/* =============================================================
   KYB — KNOW YOUR BUSINESS PAGE
   ============================================================= */

/* --- Hero (light gradient) --- */
.kyb-hero {
  background:
    radial-gradient(ellipse 700px 500px at 85% 30%, rgba(43,127,255,.09), transparent 55%),
    radial-gradient(ellipse 500px 400px at 5%  80%, rgba(34,197,94,.06),  transparent 55%),
    linear-gradient(180deg, #EEF3FC 0%, var(--bg) 100%);
  padding: 80px 0 72px;
  overflow: hidden;
  position: relative;
}

.kyb-hero__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}

.kyb-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 13px;
  border-radius: 999px;
  background: var(--blue-light);
  border: 1px solid rgba(43,127,255,.22);
  color: var(--blue);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.kyb-hero__title {
  font-size: clamp(34px, 4.5vw, 58px);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -1.4px;
  line-height: 1.06;
  margin-bottom: 18px;
}

.kyb-hero__title .accent-blue { color: var(--blue); }

.kyb-hero__lead {
  font-size: 16.5px;
  color: var(--muted);
  line-height: 1.65;
  max-width: 50ch;
  margin-bottom: 30px;
}

.kyb-hero__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.kyb-hero__trust {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 20px;
  border-top: 1px solid var(--stroke2);
}

.kyb-hero__trust-label { font-size: 12px; color: var(--muted2); font-weight: 500; white-space: nowrap; }

/* Hero visual: business entity card */
.kyb-entity-card {
  background: var(--white);
  border-radius: var(--radius2);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.kyb-entity-card__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  background: var(--navy2);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.kyb-entity-card__dots { display: flex; gap: 6px; }
.kyb-entity-card__dots span { width: 10px; height: 10px; border-radius: 50%; }
.kyb-entity-card__dots span:nth-child(1) { background: #FF5F57; }
.kyb-entity-card__dots span:nth-child(2) { background: #FEBC2E; }
.kyb-entity-card__dots span:nth-child(3) { background: #28C840; }
.kyb-entity-card__title-bar { font-size: 12px; color: rgba(255,255,255,.45); font-family: var(--mono); }

.kyb-entity-card__header {
  padding: 16px;
  border-bottom: 1px solid var(--stroke2);
  display: flex;
  align-items: center;
  gap: 12px;
  background: #F8FAFF;
}

.kyb-entity-card__logo {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--blue), var(--blue-dark));
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.kyb-entity-card__logo svg { width: 22px; height: 22px; color: var(--white); }

.kyb-entity-card__name { font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 2px; }
.kyb-entity-card__reg  { font-size: 12px; color: var(--muted2); font-family: var(--mono); }

.kyb-entity-card__status {
  margin-left: auto;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: rgba(34,197,94,.12);
  border: 1px solid rgba(34,197,94,.24);
  color: #16A34A;
}

.kyb-entity-card__body { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }

.kyb-detail-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 9px;
  background: var(--bg);
  border: 1px solid var(--stroke2);
  font-size: 13px;
}

.kyb-detail-row__label { color: var(--muted2); font-weight: 500; white-space: nowrap; }
.kyb-detail-row__val   { font-weight: 700; color: var(--ink); text-align: right; }

.kyb-detail-row__val .val-ok   { color: #16A34A; }
.kyb-detail-row__val .val-warn { color: #B45309; }
.kyb-detail-row__val .val-flag { color: var(--red); }

.kyb-ubo-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 9px;
  background: var(--bg);
  border: 1px solid var(--stroke2);
}

.kyb-ubo-avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), var(--blue-dark));
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--white);
  flex-shrink: 0;
}

.kyb-ubo-name  { font-size: 13px; font-weight: 700; color: var(--ink); }
.kyb-ubo-share { font-size: 11.5px; color: var(--muted2); margin-top: 1px; }

.kyb-ubo-badge {
  margin-left: auto;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}

.kyb-ubo-badge--pep  { background: rgba(224,32,32,.10); border: 1px solid rgba(224,32,32,.20); color: var(--red); }
.kyb-ubo-badge--ok   { background: rgba(34,197,94,.10); border: 1px solid rgba(34,197,94,.20); color: #16A34A; }

.kyb-entity-card__footer {
  padding: 12px 16px;
  border-top: 1px solid var(--stroke2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg);
  font-size: 12.5px;
  color: var(--muted2);
}

.kyb-entity-card__footer a { color: var(--blue); font-weight: 700; text-decoration: none; }
.kyb-entity-card__footer a:hover { text-decoration: underline; }

/* --- Stats --- */
.kyb-stats {
  background: var(--navy2);
  padding: 52px 0;
  position: relative;
  overflow: hidden;
}

.kyb-stats::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(600px 250px at 20% 50%, rgba(43,127,255,.15), transparent 60%),
    radial-gradient(500px 250px at 80% 50%, rgba(34,197,94,.10), transparent 60%);
  pointer-events: none;
}

.kyb-stats__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.kyb-stat { padding: 20px 24px; border-right: 1px solid rgba(255,255,255,.07); text-align: center; }
.kyb-stat:last-child { border-right: none; }
.kyb-stat__val { font-size: clamp(28px, 3.5vw, 42px); font-weight: 700; color: var(--white); letter-spacing: -1px; line-height: 1; margin-bottom: 6px; }
.kyb-stat__val .suf { color: var(--gold); }
.kyb-stat__label { font-size: 13px; color: rgba(255,255,255,.50); font-weight: 400; line-height: 1.4; }

/* --- How to conduct KYB check --- */
.kyb-how {
  padding: 88px 0;
  background: var(--bg);
}

.kyb-how__head { text-align: center; margin-bottom: 60px; }
.kyb-how__head h2 { font-size: clamp(26px, 3vw, 42px); font-weight: 700; letter-spacing: -.8px; margin-bottom: 10px; }
.kyb-how__head p  { font-size: 16px; color: var(--muted); max-width: 52ch; margin: 0 auto; line-height: 1.65; }

.kyb-steps-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  position: relative;
}

.kyb-steps-row::before {
  content: "";
  position: absolute;
  top: 36px;
  left: calc(10% + 28px);
  right: calc(10% + 28px);
  height: 2px;
  background: linear-gradient(90deg, var(--blue), var(--gold));
  opacity: .25;
}

.kyb-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 14px;
  position: relative;
}

.kyb-step__ico-wrap {
  width: 72px; height: 72px;
  border-radius: 22px;
  background: var(--white);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow2);
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  position: relative;
  z-index: 1;
  transition: border-color .2s, box-shadow .2s, transform .18s;
}

.kyb-step__ico-wrap:hover { border-color: rgba(43,127,255,.28); box-shadow: var(--shadow); transform: translateY(-2px); }
.kyb-step__ico-wrap svg { width: 28px; height: 28px; }

.kyb-step__label {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 12px;
}

.kyb-step__label--1 { background: rgba(43,127,255,.12); color: var(--blue); border: 1px solid rgba(43,127,255,.22); }
.kyb-step__label--2 { background: rgba(253,185,19,.12); color: #B45309; border: 1px solid rgba(253,185,19,.24); }
.kyb-step__label--3 { background: rgba(34,197,94,.12);  color: #16A34A;  border: 1px solid rgba(34,197,94,.24); }
.kyb-step__label--4 { background: rgba(43,127,255,.12); color: var(--blue); border: 1px solid rgba(43,127,255,.22); }
.kyb-step__label--5 { background: rgba(168,85,247,.12); color: #7C3AED; border: 1px solid rgba(168,85,247,.24); }

.kyb-step__desc { font-size: 13px; color: var(--muted); line-height: 1.6; }

/* --- Why important (split) --- */
.kyb-why {
  padding: 88px 0;
  background: var(--white);
  border-top: 1px solid var(--stroke2);
}

.kyb-why__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.kyb-why__text h2 {
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 700;
  letter-spacing: -.8px;
  line-height: 1.12;
  margin-bottom: 20px;
}

.kyb-why__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 28px;
}

.kyb-why__body p {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.70;
}

.kyb-why__body p strong { color: var(--ink); font-weight: 700; }

/* Building visual */
.kyb-visual {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.kyb-face-scan {
  width: 130px; height: 130px;
  border-radius: 50%;
  background: var(--white);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow2);
  display: grid;
  place-items: center;
  position: relative;
  align-self: center;
}

.kyb-face-scan__ico {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue-light), rgba(34,197,94,.10));
  display: grid;
  place-items: center;
}

.kyb-face-scan__ico svg { width: 48px; height: 48px; color: var(--blue); }

.kyb-scan-corner {
  position: absolute;
  width: 22px; height: 22px;
  border-color: var(--blue);
  border-style: solid;
  border-width: 0;
}

.kyb-scan-corner--tl { top: 10px; left: 10px; border-top-width: 3px; border-left-width: 3px; border-radius: 4px 0 0 0; }
.kyb-scan-corner--tr { top: 10px; right: 10px; border-top-width: 3px; border-right-width: 3px; border-radius: 0 4px 0 0; }
.kyb-scan-corner--bl { bottom: 10px; left: 10px; border-bottom-width: 3px; border-left-width: 3px; border-radius: 0 0 0 4px; }
.kyb-scan-corner--br { bottom: 10px; right: 10px; border-bottom-width: 3px; border-right-width: 3px; border-radius: 0 0 4px 0; }

.kyb-buildings {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 160px;
  width: 100%;
  max-width: 380px;
  padding: 0 10px;
}

.kyb-bldg {
  flex: 1;
  border-radius: 6px 6px 0 0;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: 6px;
  align-items: center;
}

.kyb-bldg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 10px,
    rgba(255,255,255,.08) 10px,
    rgba(255,255,255,.08) 11px
  );
  pointer-events: none;
}

.kyb-bldg--1  { height: 80%;  background: linear-gradient(180deg, #2B7FFF, #1A5FCC); }
.kyb-bldg--2  { height: 60%;  background: linear-gradient(180deg, #1C2333, #0D1117); }
.kyb-bldg--3  { height: 95%;  background: linear-gradient(180deg, #1A5FCC, #1260AA); }
.kyb-bldg--4  { height: 50%;  background: linear-gradient(180deg, #374151, #1F2937); }
.kyb-bldg--5  { height: 100%; background: linear-gradient(180deg, #1C2333, #0D1117); }
.kyb-bldg--6  { height: 70%;  background: linear-gradient(180deg, #22C55E, #16A34A); }
.kyb-bldg--7  { height: 55%;  background: linear-gradient(180deg, #22C55E, #0F7A3A); }

/* --- Features grid (light) --- */
.kyb-features {
  padding: 88px 0;
  background: var(--bg);
  border-top: 1px solid var(--stroke2);
}

.kyb-features__head { text-align: center; margin-bottom: 14px; }
.kyb-features__head h2 { font-size: clamp(26px, 3.2vw, 42px); font-weight: 700; letter-spacing: -.8px; margin-bottom: 10px; }
.kyb-features__head p  { font-size: 16px; color: var(--muted); max-width: 60ch; margin: 0 auto; line-height: 1.65; }

.kyb-feat-sublabel {
  font-size: 17px;
  font-weight: 700;
  color: var(--blue);
  margin-bottom: 24px;
  margin-top: 28px;
}

.kyb-feat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.kyb-feat-card {
  background: var(--white);
  border: 1px solid var(--stroke);
  border-radius: var(--radius2);
  padding: 26px 22px;
  box-shadow: var(--shadow2);
  transition: border-color .2s, box-shadow .2s, transform .18s;
}

.kyb-feat-card:hover {
  border-color: rgba(43,127,255,.22);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.kyb-feat-card__ico {
  width: 46px; height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  margin-bottom: 16px;
  background: var(--blue-light);
  border: 1px solid rgba(43,127,255,.18);
}

.kyb-feat-card__ico svg { width: 22px; height: 22px; color: var(--blue); }
.kyb-feat-card__ico.gold-ico   { background: var(--gold-light); border-color: rgba(253,185,19,.22); }
.kyb-feat-card__ico.gold-ico svg { color: #B45309; }
.kyb-feat-card__ico.green-ico  { background: rgba(34,197,94,.10); border-color: rgba(34,197,94,.22); }
.kyb-feat-card__ico.green-ico svg { color: var(--green); }

.kyb-feat-card__title { font-size: 16px; font-weight: 700; color: var(--ink); margin-bottom: 8px; letter-spacing: -.25px; }
.kyb-feat-card__desc  { font-size: 13.5px; color: var(--muted); line-height: 1.62; }

/* --- API split (dark) --- */
.kyb-api {
  background:
    radial-gradient(ellipse 800px 400px at 50% 0%, rgba(43,127,255,.15), transparent 55%),
    linear-gradient(180deg, #07090E 0%, #0A0F1A 100%);
  padding: 88px 0;
  overflow: hidden;
}

.kyb-api__grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 56px;
  align-items: center;
}

.kyb-api__text h2 { font-size: clamp(26px, 3vw, 38px); font-weight: 700; letter-spacing: -.7px; line-height: 1.12; margin-bottom: 14px; color: var(--white); }
.kyb-api__text h2 .accent { color: #79C0FF; }
.kyb-api__text p  { font-size: 15.5px; color: rgba(255,255,255,.55); line-height: 1.65; margin-bottom: 22px; }

.kyb-api-feats { display: flex; flex-direction: column; gap: 12px; margin-bottom: 28px; }

.kyb-api-feat { display: flex; gap: 12px; align-items: flex-start; }

.kyb-api-feat__ico {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: var(--blue-light);
  border: 1px solid rgba(43,127,255,.22);
}

.kyb-api-feat__ico svg { width: 16px; height: 16px; color: #79C0FF; }
.kyb-api-feat__title { font-size: 14px; font-weight: 700; color: rgba(255,255,255,.90); margin-bottom: 3px; }
.kyb-api-feat__desc  { font-size: 13px; color: rgba(255,255,255,.52); line-height: 1.55; }

/* --- CTA pill --- */
.kyb-cta { padding: 32px 0 80px; background: var(--bg); }

.kyb-cta-pill {
  border-radius: 24px;
  background:
    radial-gradient(ellipse 600px 200px at 80% 50%, rgba(43,127,255,.16), transparent 60%),
    radial-gradient(ellipse 400px 200px at 10% 50%, rgba(34,197,94,.10), transparent 60%),
    linear-gradient(135deg, var(--navy2) 0%, #111827 100%);
  border: 1px solid rgba(255,255,255,.08);
  padding: 42px 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}

.kyb-cta-pill__text h2 { font-size: clamp(18px, 2.3vw, 28px); font-weight: 700; color: var(--white); letter-spacing: -.5px; margin-bottom: 6px; }
.kyb-cta-pill__text p  { font-size: 14.5px; color: rgba(255,255,255,.55); line-height: 1.55; }
.kyb-cta-pill__actions { display: flex; gap: 12px; flex-wrap: wrap; flex-shrink: 0; }

/* --- Responsive --- */
@media (max-width: 1024px) {
  .kyb-steps-row { grid-template-columns: repeat(3, 1fr); row-gap: 36px; }
  .kyb-steps-row::before { display: none; }
}

@media (max-width: 900px) {
  .kyb-hero__grid  { grid-template-columns: 1fr; gap: 36px; }
  .kyb-why__grid   { grid-template-columns: 1fr; gap: 36px; }
  .kyb-api__grid   { grid-template-columns: 1fr; gap: 36px; }
  .kyb-stats__grid { grid-template-columns: 1fr 1fr; }
  .kyb-stat:nth-child(2) { border-right: none; }
  .kyb-stat:nth-child(3) { border-top: 1px solid rgba(255,255,255,.07); border-right: 1px solid rgba(255,255,255,.07); }
  .kyb-stat:nth-child(4) { border-top: 1px solid rgba(255,255,255,.07); border-right: none; }
  .kyb-feat-grid   { grid-template-columns: 1fr 1fr; }
  .kyb-cta-pill    { padding: 28px; flex-direction: column; align-items: flex-start; }
}

@media (max-width: 640px) {
  .kyb-steps-row   { grid-template-columns: 1fr 1fr; }
  .kyb-feat-grid   { grid-template-columns: 1fr; }
  .kyb-cta-pill__actions { width: 100%; }
}


/* =============================================================
   AFFILIATES PAGE
   ============================================================= */

.aff-hero {
  background:
    radial-gradient(ellipse 700px 500px at 85% 30%, rgba(0,220,130,.08), transparent 55%),
    radial-gradient(ellipse 500px 400px at 5%  80%, rgba(43,127,255,.07), transparent 55%),
    linear-gradient(180deg, #EEF3FC 0%, var(--bg) 100%);
  padding: 88px 0 80px;
  position: relative;
  overflow: hidden;
}

.aff-hero__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}

.aff-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 13px;
  border-radius: 999px;
  background: rgba(0,180,100,.10);
  border: 1px solid rgba(0,180,100,.22);
  color: #059669;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.aff-hero__title {
  font-size: clamp(36px, 5vw, 66px);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -1.8px;
  margin-bottom: 18px;
}

.aff-hero__title .t-white  { color: var(--ink); }
.aff-hero__title .t-green  { color: #059669; }

.aff-hero__lead {
  font-size: 16.5px;
  color: var(--muted);
  line-height: 1.65;
  max-width: 48ch;
  margin-bottom: 30px;
}

.btn.aff-green {
  background: #059669;
  color: var(--white);
  border-color: #047857;
  font-weight: 800;
  font-size: 15px;
  box-shadow: 0 6px 24px rgba(5,150,105,.28);
}
.btn.aff-green:hover { background: #047857; box-shadow: 0 10px 32px rgba(5,150,105,.38); }

/* Earnings cards visual */
.aff-earnings-visual {
  position: relative;
  border-radius: 22px;
  background:
    radial-gradient(ellipse 300px 200px at 30% 20%, rgba(0,180,100,.18), transparent 60%),
    radial-gradient(ellipse 250px 180px at 75% 75%, rgba(43,127,255,.14), transparent 60%),
    linear-gradient(145deg, #1A2A40 0%, #0E1828 100%);
  border: 1px solid rgba(255,255,255,.10);
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.aff-cards-stack {
  position: relative;
  width: 100%;
  height: 260px;
  padding: 20px;
}

.aff-earn-card {
  position: absolute;
  border-radius: 14px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(10px);
  padding: 14px 20px;
  min-width: 200px;
  box-shadow: 0 8px 24px rgba(0,0,0,.20);
}

.aff-earn-card__label { font-size: 12.5px; color: rgba(255,255,255,.65); font-weight: 500; margin-bottom: 4px; }
.aff-earn-card__val   { font-size: 18px; font-weight: 700; color: var(--white); }
.aff-earn-card__val span { color: #00DC82; }
.aff-earn-card__period { font-size: 12px; color: rgba(255,255,255,.50); }

.aff-earn-card--1 { top: 30px; right: 20px; }
.aff-earn-card--2 { top: 50%; left: 20px; transform: translateY(-50%); }
.aff-earn-card--3 { bottom: 20px; right: 60px; }

/* --- Commission plans (full dark) --- */
.aff-plans {
  background:
    radial-gradient(ellipse 900px 500px at 50% 0%, rgba(43,127,255,.12), transparent 50%),
    linear-gradient(180deg, #060A10 0%, #08080F 100%);
  padding: 88px 0;
  overflow: hidden;
}

.aff-plans__head {
  text-align: center;
  margin-bottom: 52px;
}

.aff-plans__head h2 {
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 700;
  letter-spacing: -1.5px;
  color: var(--white);
  line-height: 1.1;
  margin-bottom: 8px;
}

.aff-plans__head h2 .t-blue { color: #79C0FF; text-decoration: underline; text-underline-offset: 6px; text-decoration-color: var(--blue); }

.aff-plans-top {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 14px;
}

.aff-plans-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 32px;
}

.aff-plan-card {
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.09);
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  overflow: hidden;
  transition: border-color .2s, transform .18s;
}

.aff-plan-card:hover { border-color: rgba(255,255,255,.18); transform: translateY(-2px); }

.aff-plan-card--green  { background: linear-gradient(145deg, #0E1E18 0%, #0A1510 100%); }
.aff-plan-card--blue   { background: linear-gradient(145deg, #0E1525 0%, #0A1020 100%); }
.aff-plan-card--purple { background: linear-gradient(145deg, #180E2A 0%, #100A20 100%); }
.aff-plan-card--orange { background: linear-gradient(145deg, #1E1008 0%, #150C06 100%); }
.aff-plan-card--dark   { background: linear-gradient(145deg, #111218 0%, #0C0D14 100%); }

.aff-plan-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }

.aff-plan-card__name {
  font-size: 15px;
  font-weight: 700;
}

.aff-name--green  { color: #00DC82; }
.aff-name--blue   { color: #79C0FF; }
.aff-name--purple { color: #C084FC; }
.aff-name--orange { color: #FB923C; }
.aff-name--teal   { color: #2DD4BF; }

.aff-plan-badge {
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
}

.aff-badge--green  { background: rgba(0,220,130,.15); border: 1px solid rgba(0,220,130,.28); color: #00DC82; }
.aff-badge--purple { background: rgba(192,132,252,.14); border: 1px solid rgba(192,132,252,.26); color: #C084FC; }

.aff-plan-card__amount {
  font-size: clamp(30px, 4vw, 52px);
  font-weight: 700;
  color: var(--white);
  letter-spacing: -1.5px;
  line-height: 1.1;
}

.aff-plan-card__amount .aff-amount-sub { font-size: 16px; font-weight: 500; color: rgba(255,255,255,.55); margin-left: 4px; }
.aff-plan-card__amount .aff-amount-pct { font-size: clamp(24px, 3.5vw, 44px); }

.aff-plan-card__divider { height: 1px; background: rgba(255,255,255,.08); }
.aff-plan-card__desc    { font-size: 13.5px; color: rgba(255,255,255,.55); line-height: 1.62; }
.aff-plan-card__desc .hl-green  { color: #00DC82; font-weight: 600; }
.aff-plan-card__desc .hl-blue   { color: #79C0FF; font-weight: 600; }
.aff-plan-card__desc .hl-purple { color: #C084FC; font-weight: 600; }
.aff-plan-card__desc .hl-teal   { color: #2DD4BF; font-weight: 600; }

.aff-signup-btn {
  display: block;
  width: fit-content;
  margin: 8px auto 0;
  padding: 12px 36px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.20);
  background: rgba(255,255,255,.07);
  color: var(--white);
  font-size: 15px;
  font-weight: 700;
  font-family: var(--sans);
  cursor: pointer;
  text-decoration: none;
  transition: background .18s, border-color .18s, box-shadow .18s;
}

.aff-signup-btn:hover { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.35); box-shadow: 0 6px 20px rgba(0,0,0,.30); }

/* --- How to become (dark) --- */
.aff-how {
  background:
    radial-gradient(ellipse 700px 400px at 50% 0%, rgba(0,220,130,.08), transparent 55%),
    linear-gradient(180deg, #08080F 0%, #060A10 100%);
  padding: 88px 0;
}

.aff-how__head {
  text-align: center;
  margin-bottom: 52px;
}

.aff-how__head h2 {
  font-size: clamp(30px, 4vw, 52px);
  font-weight: 700;
  color: var(--white);
  letter-spacing: -1.2px;
  margin-bottom: 10px;
  line-height: 1.1;
}

.aff-how__head h2 .t-green { color: #00DC82; text-decoration: underline; text-underline-offset: 5px; text-decoration-color: rgba(0,220,130,.50); }

.aff-how-bento {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 14px;
}

.aff-how-card {
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.04);
  padding: 28px 26px;
  position: relative;
  overflow: hidden;
  transition: border-color .2s, background .2s;
}

.aff-how-card:hover { border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.06); }

.aff-how-card--wide { grid-column: 1 / -1; }

.aff-how-card__step  { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 8px; }
.aff-how-card__step--1 { color: #00DC82; }
.aff-how-card__step--2 { color: #79C0FF; }
.aff-how-card__step--3 { color: #C084FC; }

.aff-how-card__title { font-size: 22px; font-weight: 700; color: var(--white); letter-spacing: -.4px; margin-bottom: 10px; }
.aff-how-card__desc  { font-size: 14px; color: rgba(255,255,255,.55); line-height: 1.65; margin-bottom: 16px; max-width: 50ch; }
.aff-how-card__desc .hl-green { color: #00DC82; font-weight: 600; }

/* Mock signup form */
.aff-mock-form {
  background: rgba(255,255,255,.06);
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  padding: 16px;
  max-width: 320px;
}

.aff-mock-form__title { font-size: 14px; font-weight: 700; color: var(--white); margin-bottom: 12px; }

.aff-mock-input {
  width: 100%;
  padding: 10px 13px;
  border-radius: 9px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.55);
  font-size: 13px;
  font-family: var(--sans);
  margin-bottom: 8px;
  outline: none;
}

/* Mock plan selector */
.aff-mock-plans {
  background: rgba(255,255,255,.06);
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  padding: 16px;
  max-width: 320px;
}

.aff-mock-plans__title { font-size: 14px; font-weight: 700; color: var(--white); margin-bottom: 12px; }

.aff-mock-plan-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  border-radius: 9px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  margin-bottom: 7px;
  font-size: 13.5px;
  color: rgba(255,255,255,.65);
  font-weight: 500;
}

.aff-mock-plan-row.active-plan {
  background: rgba(0,220,130,.12);
  border-color: rgba(0,220,130,.28);
  color: #00DC82;
  font-weight: 700;
}

.aff-toggle {
  width: 32px; height: 18px;
  border-radius: 999px;
  flex-shrink: 0;
  background: rgba(255,255,255,.15);
  position: relative;
  transition: background .2s;
}

.aff-toggle.on { background: #00DC82; }

.aff-toggle::after {
  content: "";
  position: absolute;
  top: 2px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--white);
  transition: left .2s;
}

.aff-toggle.on::after  { left: 16px; }
.aff-toggle:not(.on)::after { left: 2px; }

/* Earnings chip */
.aff-earnings-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  box-shadow: var(--shadow);
  margin-bottom: 16px;
}

.aff-earnings-chip__dot { width: 10px; height: 10px; border-radius: 50%; background: #00DC82; }

/* Join button in step 3 */
.aff-join-btn {
  display: block;
  width: 100%;
  padding: 14px;
  border-radius: 12px;
  background: rgba(0,220,130,.16);
  border: 1px solid rgba(0,220,130,.30);
  color: #00DC82;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  font-family: var(--sans);
  cursor: pointer;
  transition: background .18s;
  text-decoration: none;
  margin-top: 12px;
}

.aff-join-btn:hover { background: rgba(0,220,130,.24); }

/* --- Who can be an affiliate (dark) --- */
.aff-who {
  background: linear-gradient(180deg, #060A10 0%, #080C12 100%);
  padding: 88px 0;
  border-top: 1px solid rgba(255,255,255,.06);
}

.aff-who__head { margin-bottom: 20px; }

.aff-who__grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 60px;
  align-items: start;
}

.aff-who__title {
  font-size: clamp(28px, 3.5vw, 48px);
  font-weight: 700;
  color: var(--white);
  letter-spacing: -1px;
  line-height: 1.1;
  margin-bottom: 8px;
}

.aff-who__underline {
  width: 80px;
  height: 4px;
  border-radius: 99px;
  background: linear-gradient(90deg, #00DC82, transparent);
  margin-bottom: 20px;
}

.aff-who__lead { font-size: 15.5px; color: rgba(255,255,255,.55); line-height: 1.65; margin-bottom: 24px; max-width: 40ch; }

.aff-who-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.aff-who-card {
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.09);
  overflow: hidden;
  position: relative;
  min-height: 180px;
  background: rgba(255,255,255,.04);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 16px;
  transition: border-color .2s, transform .18s;
}

.aff-who-card:hover { border-color: rgba(0,220,130,.22); transform: translateY(-2px); }

.aff-who-card__bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(6,14,18,.90) 100%);
}

.aff-who-card__icon {
  width: 100%;
  height: 100px;
  position: absolute;
  top: 0; left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  opacity: .35;
}

.aff-who-card__content { position: relative; z-index: 1; }
.aff-who-card__title { font-size: 15px; font-weight: 700; color: var(--white); margin-bottom: 5px; line-height: 1.3; }
.aff-who-card__desc  { font-size: 12.5px; color: rgba(255,255,255,.55); line-height: 1.5; }

/* --- Why NeoSDK Affiliates --- */
.aff-why {
  background: var(--white);
  padding: 88px 0;
  border-top: 1px solid var(--stroke2);
}

.aff-why__head {
  margin-bottom: 44px;
}

.aff-why__head h2 {
  font-size: clamp(28px, 3.5vw, 48px);
  font-weight: 700;
  letter-spacing: -1px;
  color: var(--ink);
  margin-bottom: 8px;
}

.aff-why__underline {
  width: 100px;
  height: 4px;
  border-radius: 99px;
  background: linear-gradient(90deg, #00DC82, transparent);
  margin-bottom: 12px;
}

.aff-why__head p { font-size: 16px; color: var(--muted); max-width: 64ch; line-height: 1.65; }

.aff-why-bento {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 14px;
  margin-bottom: 14px;
}

.aff-why-card {
  border-radius: 22px;
  border: 1px solid var(--stroke);
  background: var(--bg);
  padding: 28px 26px;
  overflow: hidden;
  position: relative;
  transition: border-color .2s, box-shadow .2s, transform .18s;
}

.aff-why-card:hover { border-color: rgba(43,127,255,.22); box-shadow: var(--shadow2); transform: translateY(-2px); }

.aff-why-card--blue  { background: linear-gradient(145deg, #EEF4FF 0%, #E8F2FF 100%); border-color: rgba(43,127,255,.16); }
.aff-why-card--green { background: linear-gradient(145deg, #E8FFF5 0%, #E0FFEE 100%); border-color: rgba(0,200,100,.18); }

.aff-why-card__title { font-size: 19px; font-weight: 700; color: var(--ink); letter-spacing: -.35px; margin-bottom: 16px; line-height: 1.3; }
.aff-why-card__desc  { font-size: 14px; color: var(--muted); line-height: 1.65; }

/* Plan orbit tags (for the blue card) */
.aff-orbit {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.aff-orbit-tag {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: var(--white);
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  box-shadow: var(--shadow2);
}

.aff-why-bottom {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.aff-why-feat {
  background: var(--bg);
  border: 1px solid var(--stroke);
  border-radius: var(--radius2);
  padding: 24px 22px;
  transition: border-color .2s, box-shadow .2s, transform .18s;
}

.aff-why-feat:hover { border-color: rgba(43,127,255,.22); box-shadow: var(--shadow2); transform: translateY(-2px); }

.aff-why-feat__ico {
  width: 44px; height: 44px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  margin-bottom: 14px;
  background: var(--blue-light);
  border: 1px solid rgba(43,127,255,.18);
}

.aff-why-feat__ico svg { width: 20px; height: 20px; color: var(--blue); }
.aff-why-feat__title { font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 7px; letter-spacing: -.2px; }
.aff-why-feat__desc  { font-size: 13.5px; color: var(--muted); line-height: 1.6; }

/* --- CTA (dark green) --- */
.aff-cta {
  background:
    radial-gradient(ellipse 700px 300px at 50% 0%, rgba(0,220,130,.14), transparent 55%),
    linear-gradient(180deg, #080C12 0%, #060A10 100%);
  padding: 88px 0;
  text-align: center;
}

.aff-cta h2 { font-size: clamp(28px, 3.5vw, 48px); font-weight: 700; color: var(--white); letter-spacing: -1px; margin-bottom: 12px; }
.aff-cta p  { font-size: 16px; color: rgba(255,255,255,.55); margin-bottom: 32px; max-width: 52ch; margin-left: auto; margin-right: auto; line-height: 1.65; }

/* --- Responsive --- */
@media (max-width: 1024px) {
  .aff-plans-top   { grid-template-columns: 1fr 1fr; }
  .aff-why-bento   { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .aff-hero__grid  { grid-template-columns: 1fr; gap: 36px; }
  .aff-who__grid   { grid-template-columns: 1fr; gap: 36px; }
  .aff-how-bento   { grid-template-columns: 1fr; }
  .aff-how-card--wide { grid-column: auto; }
  .aff-why-bottom  { grid-template-columns: 1fr 1fr; }
  .aff-plans-bottom { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .aff-plans-top   { grid-template-columns: 1fr; }
  .aff-who-cards   { grid-template-columns: 1fr; }
  .aff-why-bottom  { grid-template-columns: 1fr; }
}

/* =============================================================
   PRIVACY POLICY PAGE
   ============================================================= */

.pp-page {
  background: #F0F2F8;
  min-height: 100vh;
  padding: 48px 0 80px;
}

.pp-card {
  background: var(--white);
  border-radius: 22px;
  box-shadow: 0 4px 40px rgba(13,17,23,.07);
  max-width: 860px;
  margin: 0 auto;
  padding: 52px 60px;
}

.pp-updated {
  font-size: 14px;
  font-weight: 700;
  color: var(--muted2);
  margin-bottom: 20px;
  letter-spacing: -.1px;
}

.pp-title {
  font-size: clamp(36px, 4vw, 52px);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -1.2px;
  margin-bottom: 28px;
  line-height: 1.1;
}

.pp-intro {
  font-size: 15.5px;
  color: var(--muted);
  line-height: 1.75;
  margin-bottom: 12px;
}

.pp-divider {
  height: 1px;
  background: var(--stroke2);
  margin: 36px 0;
}

.pp-section-num {
  font-size: clamp(20px, 2.5vw, 26px);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.4px;
  margin-bottom: 14px;
  margin-top: 36px;
}

.pp-sub-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 10px;
  margin-top: 24px;
}

.pp-body {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.78;
  margin-bottom: 14px;
}

.pp-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
  padding-left: 4px;
}

.pp-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  color: var(--muted);
  line-height: 1.65;
}

.pp-list li::before {
  content: "•";
  color: var(--blue);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}

.pp-contact-box {
  background: var(--bg);
  border: 1px solid var(--stroke2);
  border-radius: var(--radius);
  padding: 22px 24px;
  margin-top: 20px;
}

.pp-contact-box p { font-size: 14.5px; color: var(--muted); line-height: 1.65; margin: 0; }
.pp-contact-box a { color: var(--blue); font-weight: 600; }

@media (max-width: 900px) {
  .pp-card { padding: 32px 28px; border-radius: 16px; }
}

@media (max-width: 640px) {
  .pp-card { padding: 24px 18px; margin: 0 12px; border-radius: 14px; }
  .pp-page { padding: 24px 0 60px; }
}

.aml-hero {
  background:
    radial-gradient(ellipse 900px 520px at 85% 12%, rgba(43,127,255,.16), transparent 60%),
    radial-gradient(ellipse 700px 420px at 10% 80%, rgba(253,185,19,.10), transparent 60%),
    linear-gradient(180deg, #EEF3FC 0%, var(--bg) 100%);
  padding: 86px 0 76px;
  overflow: hidden;
}

.aml-hero__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}

.aml-eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--blue-light);
  border: 1px solid rgba(43,127,255,.22);
  color: var(--blue);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.aml-hero__title {
  font-size: clamp(36px, 4.4vw, 62px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -1.6px;
  color: var(--ink);
  margin-bottom: 18px;
}

.aml-hero__lead {
  font-size: 16.5px;
  color: var(--muted);
  line-height: 1.7;
  max-width: 54ch;
  margin-bottom: 30px;
}

.aml-hero__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.aml-proof-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.aml-proof {
  padding: 16px;
  border-radius: var(--radius);
  background: rgba(255,255,255,.78);
  border: 1px solid var(--stroke2);
}

.aml-proof strong {
  display: block;
  font-size: 24px;
  color: var(--blue);
  line-height: 1;
  margin-bottom: 6px;
}

.aml-proof span {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.45;
}

.aml-console {
  background: var(--white);
  border-radius: var(--radius2);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.aml-console__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: var(--navy2);
  color: rgba(255,255,255,.62);
  font-family: var(--mono);
  font-size: 12px;
}

.aml-console__bar strong {
  color: var(--green);
  font-size: 11px;
  text-transform: uppercase;
}

.aml-console__body {
  padding: 18px;
  display: grid;
  gap: 12px;
}

.aml-risk-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px;
  border-radius: 16px;
  background: var(--bg);
  border: 1px solid var(--stroke2);
}

.aml-risk-card span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.aml-risk-card strong {
  color: var(--blue);
  font-size: 13px;
}

.aml-risk-card--high strong {
  color: var(--red);
}

.aml-risk-card--success strong {
  color: var(--green);
}

.aml-progress {
  padding: 18px;
  border-radius: 18px;
  background: var(--navy);
  color: var(--white);
}

.aml-progress div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.aml-progress span {
  color: rgba(255,255,255,.58);
  font-size: 13px;
}

.aml-progress strong {
  color: var(--gold);
}

.aml-progress__track {
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  overflow: hidden;
}

.aml-progress__track span {
  display: block;
  width: 82%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--blue), var(--gold));
}

.aml-section,
.aml-fit {
  padding: 82px 0;
  background: var(--bg);
}

.aml-services-grid,
.aml-fit-grid,
.aml-compliance-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.aml-service-card,
.aml-fit-card,
.aml-compliance-card {
  background: var(--white);
  border: 1px solid var(--stroke);
  border-radius: var(--radius2);
  box-shadow: var(--shadow2);
  padding: 26px;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}

.aml-service-card:hover,
.aml-fit-card:hover,
.aml-compliance-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: rgba(43,127,255,.22);
}

.aml-service-card h3,
.aml-fit-card h3,
.aml-compliance-card h3 {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.3px;
  margin-bottom: 8px;
}

.aml-service-card p,
.aml-fit-card p,
.aml-compliance-card p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}

.aml-team {
  padding: 88px 0;
  background: var(--white);
  border-top: 1px solid var(--stroke2);
  border-bottom: 1px solid var(--stroke2);
}

.aml-team__grid {
  display: grid;
  grid-template-columns: 1fr .85fr;
  gap: 56px;
  align-items: center;
}

.aml-team__content h2 {
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.1;
  letter-spacing: -1px;
  margin-bottom: 16px;
}

.aml-team__content p {
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.7;
  margin-bottom: 24px;
}

.aml-team__stats {
  display: grid;
  gap: 14px;
}

.aml-stat-card {
  padding: 26px;
  border-radius: var(--radius2);
  background: var(--bg);
  border: 1px solid var(--stroke);
}

.aml-stat-card strong {
  display: block;
  color: var(--blue);
  font-size: clamp(30px, 4vw, 52px);
  line-height: 1;
  letter-spacing: -1px;
  margin-bottom: 8px;
}

.aml-stat-card span {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.aml-compliance {
  padding: 82px 0;
  background:
    radial-gradient(ellipse 800px 420px at 15% 20%, rgba(43,127,255,.16), transparent 60%),
    linear-gradient(180deg, #0D1117 0%, #111827 100%);
}

.aml-compliance .section-head h2 {
  color: var(--white);
}

.aml-compliance .section-head p {
  color: rgba(255,255,255,.58);
}

.aml-compliance-card {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.10);
  box-shadow: none;
}

.aml-compliance-card h3 {
  color: var(--white);
}

.aml-compliance-card p {
  color: rgba(255,255,255,.56);
}

.aml-cta {
  padding: 78px 0;
  background: var(--blue);
  position: relative;
  overflow: hidden;
}

.aml-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(800px 380px at 80% 40%, rgba(253,185,19,.22), transparent 60%),
    radial-gradient(520px 320px at 10% 25%, rgba(255,255,255,.12), transparent 60%);
}

.aml-cta__inner {
  position: relative;
  max-width: 720px;
  text-align: center;
}

.aml-cta__inner h2 {
  color: var(--white);
  font-size: clamp(28px, 3.2vw, 44px);
  letter-spacing: -.8px;
  line-height: 1.12;
  margin-bottom: 12px;
}

.aml-cta__inner p {
  color: rgba(255,255,255,.72);
  font-size: 16px;
  line-height: 1.65;
  margin-bottom: 28px;
}

.aml-cta__actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

@media (max-width: 980px) {
  .aml-hero__grid,
  .aml-team__grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .aml-services-grid,
  .aml-fit-grid,
  .aml-compliance-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .aml-hero {
    padding: 64px 0 56px;
  }

  .aml-proof-row,
  .aml-services-grid,
  .aml-fit-grid,
  .aml-compliance-grid {
    grid-template-columns: 1fr;
  }

  .aml-service-card,
  .aml-fit-card,
  .aml-compliance-card {
    padding: 22px;
  }
}

.legal-page {
  background: var(--bg);
  min-height: 100vh;
}

.legal-hero {
  background:
    radial-gradient(ellipse 820px 460px at 82% 20%, rgba(43,127,255,.15), transparent 60%),
    radial-gradient(ellipse 680px 380px at 8% 80%, rgba(253,185,19,.10), transparent 60%),
    linear-gradient(180deg, #EEF3FC 0%, var(--bg) 100%);
  padding: 86px 0 64px;
  border-bottom: 1px solid var(--stroke2);
}

.legal-hero__inner {
  max-width: 780px;
}

.legal-eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--blue-light);
  border: 1px solid rgba(43,127,255,.22);
  color: var(--blue);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.legal-hero h1 {
  font-size: clamp(38px, 4.6vw, 64px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -1.5px;
  color: var(--ink);
  margin-bottom: 18px;
}

.legal-hero p {
  color: var(--muted);
  font-size: 17px;
  line-height: 1.7;
  max-width: 62ch;
  margin-bottom: 20px;
}

.legal-updated {
  display: inline-flex;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.78);
  border: 1px solid var(--stroke2);
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
}

.legal-content {
  padding: 52px 0 86px;
}

.legal-grid {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 28px;
  align-items: start;
}

.legal-toc {
  position: sticky;
  top: 92px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
  border-radius: var(--radius);
  background: var(--white);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow2);
}

.legal-toc a {
  padding: 10px 12px;
  border-radius: 11px;
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 600;
  transition: background .18s, color .18s;
}

.legal-toc a:hover {
  background: var(--blue-light);
  color: var(--blue);
}

.legal-card {
  background: var(--white);
  border: 1px solid var(--stroke);
  border-radius: var(--radius2);
  box-shadow: var(--shadow2);
  padding: 36px;
}

.legal-card section {
  padding: 26px 0;
  border-bottom: 1px solid var(--stroke2);
}

.legal-card section:first-child {
  padding-top: 0;
}

.legal-card section:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.legal-card h2 {
  font-size: clamp(22px, 2.2vw, 30px);
  letter-spacing: -.5px;
  line-height: 1.15;
  color: var(--ink);
  margin-bottom: 12px;
}

.legal-card p {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.75;
}

.sla-table {
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: 16px;
}

.sla-table div {
  display: grid;
  grid-template-columns: .8fr 1.6fr 1fr;
  gap: 0;
  border-bottom: 1px solid var(--stroke2);
}

.sla-table div:last-child {
  border-bottom: none;
}

.sla-table div:first-child {
  background: var(--navy);
  color: var(--white);
}

.sla-table strong,
.sla-table span {
  padding: 13px 14px;
  font-size: 13px;
  line-height: 1.45;
  border-right: 1px solid var(--stroke2);
}

.sla-table strong:last-child,
.sla-table span:last-child {
  border-right: none;
}

.sla-table span {
  color: var(--muted);
}

.sla-table div:first-child strong {
  color: var(--white);
  border-right-color: rgba(255,255,255,.10);
}

@media (max-width: 900px) {
  .legal-grid {
    grid-template-columns: 1fr;
  }

  .legal-toc {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  .legal-card {
    padding: 28px;
  }
}

@media (max-width: 560px) {
  .legal-hero {
    padding: 64px 0 48px;
  }

  .legal-content {
    padding: 34px 0 64px;
  }

  .legal-toc {
    grid-template-columns: 1fr;
  }

  .legal-card {
    padding: 22px;
  }

  .sla-table div {
    grid-template-columns: 1fr;
  }

  .sla-table strong,
  .sla-table span {
    border-right: none;
    border-bottom: 1px solid var(--stroke2);
  }

  .sla-table strong:last-child,
  .sla-table span:last-child {
    border-bottom: none;
  }
}

/* =============================================================
   BLOG INDEX PAGE
   ============================================================= */

/* --- Hero (dark navy) --- */
.blog-hero {
  background:
    radial-gradient(ellipse 700px 600px at 10% 50%, rgba(43,127,255,.25), transparent 55%),
    radial-gradient(ellipse 500px 400px at 90% 20%, rgba(120,60,220,.18), transparent 55%),
    linear-gradient(160deg, #1A1F4E 0%, #12153A 50%, #0E1128 100%);
  padding: 52px 0 64px;
  position: relative;
  overflow: hidden;
}

.blog-hero__breadcrumb {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  color: rgba(255,255,255,.50);
  margin-bottom: 28px;
}

.blog-hero__breadcrumb a { color: rgba(255,255,255,.50); text-decoration: none; }
.blog-hero__breadcrumb a:hover { color: rgba(255,255,255,.80); }
.blog-hero__breadcrumb span { color: rgba(255,255,255,.80); font-weight: 600; }
.blog-hero__breadcrumb-sep { color: rgba(255,255,255,.30); }

.blog-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 5px 13px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.80);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  margin-bottom: 22px;
}

.blog-hero__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 52px;
  align-items: center;
}

.blog-hero__title {
  font-size: clamp(36px, 5vw, 68px);
  font-weight: 700;
  color: var(--white);
  letter-spacing: -2px;
  line-height: 1.04;
  margin-bottom: 18px;
}

.blog-hero__lead {
  font-size: 15.5px;
  color: rgba(255,255,255,.60);
  line-height: 1.70;
  max-width: 48ch;
  margin-bottom: 28px;
}

.blog-hero__actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.btn.blog-primary {
  background: var(--blue);
  color: var(--white);
  border-color: var(--blue-dark);
  font-weight: 700;
  box-shadow: 0 6px 22px rgba(43,127,255,.35);
}

.btn.blog-primary:hover { background: var(--blue-dark); box-shadow: 0 10px 30px rgba(43,127,255,.45); }

.btn.blog-ghost-dark {
  background: rgba(255,255,255,.10);
  color: var(--white);
  border-color: rgba(255,255,255,.22);
  font-weight: 600;
}

.btn.blog-ghost-dark:hover { background: rgba(255,255,255,.16); }

/* Featured article card */
.blog-featured-card {
  background:
    radial-gradient(ellipse 300px 200px at 30% 20%, rgba(43,127,255,.35), transparent 60%),
    linear-gradient(145deg, #1E2A7A 0%, #1A2070 100%);
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.12);
  padding: 28px;
  box-shadow: 0 28px 60px rgba(0,0,0,.35);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.blog-featured-card__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
}

.blog-featured-card__title {
  font-size: clamp(22px, 2.8vw, 32px);
  font-weight: 700;
  color: var(--white);
  letter-spacing: -.6px;
  line-height: 1.22;
}

.blog-featured-card__lead {
  font-size: 14.5px;
  color: rgba(255,255,255,.65);
  line-height: 1.62;
}

.blog-featured-card__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.blog-tag {
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,.80);
}

.blog-read-time {
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
  font-size: 12px;
  color: rgba(255,255,255,.65);
}

.btn.blog-read-btn {
  background: var(--white);
  color: var(--ink);
  border-color: rgba(255,255,255,.20);
  font-weight: 700;
  font-size: 14px;
  align-self: flex-start;
}

.btn.blog-read-btn:hover { background: var(--bg); box-shadow: var(--shadow2); }

/* --- Blog listing section --- */
.blog-listing {
  padding: 72px 0 80px;
  background: var(--bg);
}

.blog-listing__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}

.blog-listing__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 6px;
}

.blog-listing__title {
  font-size: clamp(26px, 3.5vw, 44px);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -1px;
}

/* Category filter pills */
.blog-filter {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.blog-filter-btn {
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--sans);
  cursor: pointer;
  border: 1.5px solid var(--stroke);
  background: var(--white);
  color: var(--muted);
  transition: all .18s;
}

.blog-filter-btn:hover { border-color: rgba(43,127,255,.25); color: var(--blue); }

.blog-filter-btn.active {
  background: rgba(43,127,255,.12);
  border-color: rgba(43,127,255,.30);
  color: var(--blue);
  font-weight: 700;
}

/* Post cards grid */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-bottom: 44px;
}

.blog-card {
  background: var(--white);
  border-radius: 18px;
  border: 1px solid var(--stroke2);
  box-shadow: var(--shadow2);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  transition: box-shadow .22s, transform .18s, border-color .18s;
}

.blog-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-3px);
  border-color: rgba(43,127,255,.18);
}

.blog-card__img {
  position: relative;
  height: 180px;
  background: linear-gradient(145deg, #1A2560 0%, #12183A 50%, #2A1840 100%);
  overflow: hidden;
  flex-shrink: 0;
}

/* Colourful radial blobs per card */
.blog-card__img::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 160px 120px at 35% 55%, rgba(180,60,60,.55), transparent 65%),
    radial-gradient(ellipse 120px 100px at 70% 40%, rgba(43,90,220,.40), transparent 60%);
}

.blog-card__img-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(20,24,50,.72);
  border: 1px solid rgba(255,255,255,.14);
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,.88);
  backdrop-filter: blur(6px);
}

.blog-card__body {
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.blog-card__read-time {
  font-size: 12px;
  color: var(--muted2);
  margin-bottom: 8px;
  text-align: right;
}

.blog-card__title {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.3px;
  line-height: 1.35;
  margin-bottom: 10px;
}

.blog-card__excerpt {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.65;
  flex: 1;
  margin-bottom: 16px;
}

.blog-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid var(--stroke2);
}

.blog-card__author { font-size: 13px; color: var(--muted2); font-weight: 500; }

.blog-card__more {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--blue);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 5px;
}

.blog-card__more:hover { text-decoration: underline; }

/* --- Blog CTA band --- */
.blog-cta-band {
  background:
    radial-gradient(ellipse 600px 300px at 50% 100%, rgba(43,127,255,.14), transparent 60%),
    linear-gradient(160deg, #1A1F4E 0%, #12153A 100%);
  border-radius: 22px;
  padding: 52px 44px;
  text-align: center;
  margin: 0 0 0;
}

.blog-cta-band h2 {
  font-size: clamp(24px, 3.5vw, 44px);
  font-weight: 700;
  color: var(--white);
  letter-spacing: -1px;
  margin-bottom: 12px;
}

.blog-cta-band p {
  font-size: 15.5px;
  color: rgba(255,255,255,.58);
  max-width: 56ch;
  margin: 0 auto 28px;
  line-height: 1.65;
}

/* =============================================================
   BLOG POST (article) VIEW
   ============================================================= */

.post-hero {
  background:
    radial-gradient(ellipse 700px 500px at 50% 0%, rgba(43,127,255,.20), transparent 55%),
    linear-gradient(180deg, #12153A 0%, #0E1128 100%);
  padding: 40px 0 60px;
  text-align: center;
}

.post-hero__breadcrumb {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  font-size: 13.5px;
  color: rgba(255,255,255,.50);
  margin-bottom: 28px;
}

.post-hero__breadcrumb a { color: rgba(255,255,255,.50); text-decoration: none; }
.post-hero__breadcrumb a:hover { color: rgba(255,255,255,.80); }
.post-hero__breadcrumb span { color: rgba(255,255,255,.78); font-weight: 600; }
.post-hero__breadcrumb-sep { color: rgba(255,255,255,.28); }

.post-hero__cat {
  display: inline-flex;
  padding: 5px 13px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,.80);
  margin-bottom: 18px;
}

.post-hero__title {
  font-size: clamp(30px, 4.5vw, 60px);
  font-weight: 700;
  color: var(--white);
  letter-spacing: -1.5px;
  line-height: 1.1;
  max-width: 18ch;
  margin: 0 auto 18px;
}

.post-hero__lead {
  font-size: 17px;
  color: rgba(255,255,255,.60);
  line-height: 1.65;
  max-width: 56ch;
  margin: 0 auto 24px;
}

.post-hero__meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.post-hero__author {
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.15);
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,.80);
}

.post-hero__dot {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.15);
  flex-shrink: 0;
}

.post-hero__read {
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.15);
  font-size: 13px;
  color: rgba(255,255,255,.70);
}

/* --- Post body layout --- */
.post-body {
  padding: 56px 0 72px;
  background: var(--white);
}

.post-body__grid {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 48px;
  align-items: start;
}

/* Sticky sidebar */
.post-sidebar {
  position: sticky;
  top: 90px;
}

.post-sidebar__toc {
  background: var(--white);
  border: 1px solid var(--stroke);
  border-radius: 16px;
  padding: 20px;
  box-shadow: var(--shadow2);
}

.post-sidebar__toc-title { font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 14px; }

.btn.post-cta-btn {
  display: block;
  width: 100%;
  text-align: center;
  background: var(--blue);
  color: var(--white);
  border-color: var(--blue-dark);
  font-weight: 700;
  font-size: 14px;
  box-shadow: 0 4px 16px rgba(43,127,255,.28);
}

.btn.post-cta-btn:hover { background: var(--blue-dark); }

/* Post article prose */
.post-article h2 {
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.6px;
  line-height: 1.2;
  margin-top: 40px;
  margin-bottom: 14px;
}

.post-article h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.3px;
  margin-top: 28px;
  margin-bottom: 10px;
}

.post-article p {
  font-size: 16px;
  color: var(--muted);
  line-height: 1.80;
  margin-bottom: 18px;
}

.post-article ul, .post-article ol {
  padding-left: 22px;
  margin-bottom: 18px;
}

.post-article li {
  font-size: 16px;
  color: var(--muted);
  line-height: 1.75;
  margin-bottom: 6px;
}

.post-article strong { color: var(--ink); font-weight: 700; }

/* Inline callout box */
.post-callout {
  background: #FFF5F0;
  border: 1px solid rgba(230,80,30,.14);
  border-radius: 16px;
  padding: 24px 26px;
  margin: 28px 0;
}

.post-callout h4 { font-size: 16px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.post-callout p  { font-size: 15px; color: var(--muted); line-height: 1.65; margin-bottom: 16px; }

.btn.post-callout-btn {
  background: var(--blue);
  color: var(--white);
  border-color: var(--blue-dark);
  font-weight: 700;
  font-size: 14px;
  box-shadow: 0 4px 14px rgba(43,127,255,.25);
  display: inline-flex;
}

.btn.post-callout-btn:hover { background: var(--blue-dark); }

/* --- Related posts --- */
.post-related {
  padding: 64px 0 80px;
  background: var(--bg);
}

.post-related__label { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); margin-bottom: 6px; }
.post-related__title { font-size: clamp(26px, 3vw, 40px); font-weight: 700; color: var(--ink); letter-spacing: -.8px; margin-bottom: 32px; }

.post-related-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

/* --- Responsive --- */
@media (max-width: 1024px) {
  .blog-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .blog-hero__grid { grid-template-columns: 1fr; gap: 36px; }
  .blog-listing__head { flex-direction: column; align-items: flex-start; }
  .post-body__grid { grid-template-columns: 1fr; }
  .post-sidebar { position: static; }
  .post-related-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .blog-grid { grid-template-columns: 1fr; }
  .blog-cta-band { padding: 36px 24px; border-radius: 14px; }
  .post-related-grid { grid-template-columns: 1fr; }
}

.error-page {
  min-height: 100vh;
  background:
    radial-gradient(ellipse 900px 520px at 80% 10%, rgba(43,127,255,.18), transparent 60%),
    radial-gradient(ellipse 640px 380px at 10% 88%, rgba(253,185,19,.12), transparent 60%),
    linear-gradient(180deg, #EEF3FC 0%, var(--bg) 100%);
  display: grid;
  place-items: center;
  padding: 32px 20px;
}

.error-shell {
  width: min(680px, 100%);
  text-align: center;
}

.error-brand {
  display: inline-flex;
  align-items: center;
  margin-bottom: 24px;
  color: var(--ink);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -.4px;
}

.error-card {
  background: rgba(255,255,255,.86);
  border: 1px solid var(--stroke);
  border-radius: var(--radius2);
  box-shadow: var(--shadow);
  padding: clamp(34px, 6vw, 58px);
  backdrop-filter: blur(18px);
}

.error-code {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 92px;
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--blue-light);
  border: 1px solid rgba(43,127,255,.22);
  color: var(--blue);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .14em;
  margin-bottom: 22px;
}

.error-card h1 {
  font-size: clamp(34px, 5vw, 54px);
  line-height: 1.05;
  letter-spacing: -1.3px;
  margin-bottom: 14px;
  color: var(--ink);
}

.error-card p {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
  max-width: 48ch;
  margin: 0 auto 28px;
}

.error-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

@media (max-width: 520px) {
  .error-card {
    padding: 30px 22px;
  }

  .error-actions {
    flex-direction: column;
  }

  .error-actions .btn {
    width: 100%;
  }
}

.rq-hero {
  padding: 84px 0;
  background:
    radial-gradient(ellipse 900px 520px at 82% 12%, rgba(43,127,255,.16), transparent 60%),
    radial-gradient(ellipse 640px 380px at 8% 88%, rgba(253,185,19,.12), transparent 60%),
    linear-gradient(180deg, #EEF3FC 0%, var(--bg) 100%);
}

.rq-hero__grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 56px;
  align-items: start;
}

.rq-eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--blue-light);
  border: 1px solid rgba(43,127,255,.22);
  color: var(--blue);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.rq-hero__content h1 {
  font-size: clamp(38px, 4.5vw, 64px);
  line-height: 1.04;
  letter-spacing: -1.6px;
  color: var(--ink);
  margin-bottom: 18px;
}

.rq-hero__content p {
  color: var(--muted);
  font-size: 16.5px;
  line-height: 1.7;
  max-width: 56ch;
  margin-bottom: 28px;
}

.rq-benefits {
  display: grid;
  gap: 12px;
}

.rq-benefits div {
  padding: 18px;
  border-radius: var(--radius);
  background: rgba(255,255,255,.78);
  border: 1px solid var(--stroke2);
  box-shadow: var(--shadow2);
}

.rq-benefits strong {
  display: block;
  font-size: 14.5px;
  color: var(--ink);
  margin-bottom: 4px;
}

.rq-benefits span {
  display: block;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.55;
}

.rq-form-card {
  background: var(--white);
  border: 1px solid var(--stroke);
  border-radius: var(--radius2);
  box-shadow: var(--shadow);
  padding: 30px;
}

.rq-form-head {
  margin-bottom: 24px;
}

.rq-form-head h2 {
  font-size: 26px;
  letter-spacing: -.6px;
  color: var(--ink);
  margin-bottom: 6px;
}

.rq-form-head p {
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.6;
}

.rq-form {
  display: grid;
  gap: 16px;
}

.rq-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.rq-field label {
  display: block;
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 600;
  margin-bottom: 7px;
}

.rq-field input,
.rq-field select,
.rq-field textarea {
  width: 100%;
  border: 1.5px solid var(--stroke);
  border-radius: 13px;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  padding: 13px 14px;
  outline: none;
  transition: border-color .18s, box-shadow .18s, background .18s;
}

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

.rq-field input:focus,
.rq-field select:focus,
.rq-field textarea:focus {
  border-color: var(--blue);
  background: var(--white);
  box-shadow: 0 0 0 4px rgba(43,127,255,.10);
}

.rq-check-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.rq-check-grid label {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px;
  border-radius: 12px;
  background: var(--bg);
  border: 1px solid var(--stroke2);
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}

.rq-check-grid input {
  width: 16px;
  height: 16px;
  accent-color: var(--blue);
  flex-shrink: 0;
}

.rq-submit {
  width: 100%;
  padding: 14px;
  margin-top: 4px;
}

.rq-note {
  text-align: center;
  color: var(--muted2);
  font-size: 12.5px;
  line-height: 1.55;
}

.rq-trust {
  padding: 46px 0 78px;
  background: var(--bg);
}

.rq-trust__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-radius: var(--radius2);
  background: var(--navy);
  border: 1px solid rgba(255,255,255,.08);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.rq-trust__grid div {
  padding: 26px;
  border-right: 1px solid rgba(255,255,255,.08);
}

.rq-trust__grid div:last-child {
  border-right: none;
}

.rq-trust__grid strong {
  display: block;
  color: var(--white);
  font-size: 15px;
  margin-bottom: 6px;
}

.rq-trust__grid span {
  display: block;
  color: rgba(255,255,255,.56);
  font-size: 13.5px;
  line-height: 1.55;
}

@media (max-width: 960px) {
  .rq-hero__grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .rq-trust__grid {
    grid-template-columns: 1fr;
  }

  .rq-trust__grid div {
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }

  .rq-trust__grid div:last-child {
    border-bottom: none;
  }
}

@media (max-width: 620px) {
  .rq-hero {
    padding: 64px 0;
  }

  .rq-form-card {
    padding: 22px;
  }

  .rq-row,
  .rq-check-grid {
    grid-template-columns: 1fr;
  }
}

.about-hero {
  padding: 110px 0 90px;
  background:
    radial-gradient(ellipse 900px 520px at 85% 12%, rgba(43,127,255,.15), transparent 60%),
    radial-gradient(ellipse 680px 420px at 10% 90%, rgba(253,185,19,.10), transparent 60%),
    linear-gradient(180deg, #EEF3FC 0%, var(--bg) 100%);
}

.about-hero__inner {
  max-width: 980px;
  text-align: center;
}

.about-eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--blue-light);
  border: 1px solid rgba(43,127,255,.22);
  color: var(--blue);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 22px;
}

.about-hero h1 {
  font-size: clamp(42px, 6vw, 78px);
  line-height: .98;
  letter-spacing: -2px;
  margin-bottom: 22px;
}

.about-hero p {
  max-width: 66ch;
  margin: 0 auto 40px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.8;
}

.about-hero__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.about-stat {
  padding: 24px;
  border-radius: var(--radius2);
  background: rgba(255,255,255,.8);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow2);
}

.about-stat strong {
  display: block;
  font-size: 32px;
  color: var(--blue);
  margin-bottom: 6px;
}

.about-stat span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.about-story,
.about-values,
.about-team {
  padding: 92px 0;
  background: var(--bg);
}

.about-story__grid,
.about-mission__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  margin-top: 60px;
}

.about-story__grid--reverse {
  margin-top: 90px;
}

.about-copy h3 {
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1.08;
  letter-spacing: -1px;
  margin-bottom: 18px;
}

.about-copy p {
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.85;
  margin-bottom: 18px;
}

.about-visual__card,
.about-space,
.about-platform__window {
  position: relative;
  min-height: 420px;
  border-radius: 32px;
  background: var(--white);
  border: 1px solid var(--stroke);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.about-orbit {
  position: absolute;
  border: 2px solid rgba(28,35,51,.16);
  border-radius: 999px;
}

.about-orbit--one {
  width: 320px;
  height: 320px;
  top: 50px;
  left: 90px;
}

.about-orbit--two {
  width: 180px;
  height: 180px;
  top: 120px;
  left: 160px;
}

.about-core {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.about-core span {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), #5DA2FF);
  box-shadow: 0 30px 60px rgba(43,127,255,.28);
}

.about-node {
  position: absolute;
  border-radius: 50%;
}

.about-node--blue {
  width: 30px;
  height: 30px;
  background: var(--blue);
  top: 120px;
  left: 130px;
}

.about-node--gold {
  width: 26px;
  height: 26px;
  background: var(--gold);
  bottom: 90px;
  right: 100px;
}

.about-node--green {
  width: 18px;
  height: 18px;
  background: var(--green);
  top: 80px;
  right: 120px;
}

.about-platform__bar {
  display: flex;
  justify-content: space-between;
  padding: 16px 18px;
  background: var(--navy);
  color: rgba(255,255,255,.65);
  font-size: 12px;
  font-family: var(--mono);
}

.about-platform__bar strong {
  color: var(--green);
}

.about-platform__body {
  padding: 24px;
  display: grid;
  gap: 14px;
}

.about-platform__module {
  display: flex;
  justify-content: space-between;
  padding: 18px;
  border-radius: 18px;
  background: var(--bg);
  border: 1px solid var(--stroke2);
}

.about-platform__module span {
  color: var(--muted);
  font-size: 14px;
}

.about-platform__module strong {
  color: var(--blue);
  font-size: 13px;
}

.about-future {
  padding: 110px 0;
  background:
    radial-gradient(ellipse 900px 420px at 20% 10%, rgba(43,127,255,.14), transparent 60%),
    linear-gradient(180deg, #0D1117 0%, #111827 100%);
}

.about-future__content {
  max-width: 860px;
}

.about-future h2 {
  color: var(--white);
  font-size: clamp(36px, 4vw, 58px);
  line-height: 1.02;
  letter-spacing: -1.6px;
  margin: 18px 0;
}

.about-future p {
  color: rgba(255,255,255,.66);
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 18px;
}

.about-mission {
  padding: 92px 0;
  background: var(--white);
}

.about-space__orbit {
  position: absolute;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  border: 2px solid rgba(28,35,51,.16);
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
}

.about-space__planet {
  position: absolute;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 2px solid rgba(28,35,51,.18);
  top: 90px;
  right: 70px;
}

.about-space__planet--small {
  width: 52px;
  height: 52px;
  top: 100px;
  left: 90px;
}

.about-rocket {
  position: absolute;
  bottom: 70px;
  left: 50%;
  transform: translateX(-50%) rotate(-20deg);
}

.about-rocket span {
  display: block;
  width: 110px;
  height: 110px;
  border-radius: 50px 50px 16px 16px;
  background: linear-gradient(135deg, var(--blue), #4E90FF);
  box-shadow: 0 20px 50px rgba(43,127,255,.28);
}

.about-values__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 56px;
}

.about-value-card {
  padding: 28px;
  border-radius: var(--radius2);
  background: var(--white);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow2);
}

.about-value-card h3 {
  font-size: 24px;
  letter-spacing: -.6px;
  margin: 18px 0 10px;
}

.about-value-card p {
  color: var(--muted);
  line-height: 1.8;
  font-size: 15px;
}

.about-team__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-top: 56px;
}

.about-member {
  display: flex;
  gap: 20px;
  padding: 30px;
  border-radius: var(--radius2);
  background: var(--white);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow2);
}

.about-member__avatar {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), #5CA2FF);
  display: grid;
  place-items: center;
  color: var(--white);
  font-weight: 700;
  font-size: 20px;
  flex-shrink: 0;
}

.about-member__avatar--gold {
  background: linear-gradient(135deg, var(--gold), #FFCF57);
  color: var(--ink);
}

.about-member__info h3 {
  font-size: 28px;
  margin-bottom: 4px;
}

.about-member__info span {
  display: block;
  color: var(--blue);
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 14px;
}

.about-member__info p {
  color: var(--muted);
  line-height: 1.8;
}

.about-banner {
  padding: 120px 0;
  background:
    radial-gradient(circle at 90% 50%, rgba(43,127,255,.18), transparent 28%),
    linear-gradient(180deg, #EEF3FC 0%, var(--bg) 100%);
  overflow: hidden;
}

.about-banner__inner {
  text-align: center;
}

.about-banner h2 {
  max-width: 760px;
  margin: 0 auto 42px;
  font-size: clamp(42px, 5vw, 84px);
  line-height: .96;
  letter-spacing: -2px;
}

.about-banner__metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.about-banner__metrics div {
  padding: 26px;
  border-radius: var(--radius2);
  background: rgba(255,255,255,.85);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow2);
}

.about-banner__metrics strong {
  display: block;
  color: var(--blue);
  font-size: 34px;
  margin-bottom: 6px;
}

.about-banner__metrics span {
  color: var(--muted);
  font-size: 14px;
}

@media (max-width: 980px) {
  .about-story__grid,
  .about-mission__grid,
  .about-team__grid {
    grid-template-columns: 1fr;
  }

  .about-values__grid,
  .about-banner__metrics,
  .about-hero__stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .about-hero {
    padding: 80px 0 70px;
  }

  .about-values__grid,
  .about-banner__metrics,
  .about-hero__stats {
    grid-template-columns: 1fr;
  }

  .about-member {
    flex-direction: column;
  }

  .about-visual__card,
  .about-space,
  .about-platform__window {
    min-height: 320px;
  }

  .about-banner {
    padding: 90px 0;
  }
}

.tech-hero {
  padding: 110px 0 92px;
  background:
    radial-gradient(ellipse 900px 520px at 85% 12%, rgba(43,127,255,.14), transparent 60%),
    radial-gradient(ellipse 680px 420px at 10% 88%, rgba(253,185,19,.10), transparent 60%),
    linear-gradient(180deg, #EEF3FC 0%, var(--bg) 100%);
}

.tech-hero__inner {
  max-width: 920px;
  text-align: center;
}

.tech-eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--blue-light);
  border: 1px solid rgba(43,127,255,.22);
  color: var(--blue);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.tech-hero h1 {
  font-size: clamp(42px, 5.4vw, 76px);
  line-height: 1;
  letter-spacing: -2px;
  margin-bottom: 22px;
}

.tech-hero p {
  max-width: 70ch;
  margin: 0 auto;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.8;
}

.tech-section,
.tech-stack,
.tech-infra,
.tech-dev,
.tech-performance,
.tech-security,
.tech-updates {
  padding: 88px 0;
  background: var(--bg);
}

.tech-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}

.tech-card,
.tech-stack-card,
.tech-infra-card,
.tech-dev-card,
.tech-performance-card,
.tech-performance-table,
.tech-security-card {
  background: var(--white);
  border: 1px solid var(--stroke);
  border-radius: var(--radius2);
  box-shadow: var(--shadow2);
  padding: 30px;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}

.tech-card:hover,
.tech-stack-card:hover,
.tech-infra-card:hover,
.tech-dev-card:hover,
.tech-performance-card:hover,
.tech-performance-table:hover,
.tech-security-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: rgba(43,127,255,.22);
}

.tech-card--featured,
.tech-stack-card--large {
  box-shadow: 0 22px 70px rgba(43,127,255,.10);
}

.tech-card h3,
.tech-stack-card h3,
.tech-infra-card h3,
.tech-dev-card h3,
.tech-performance-card h3,
.tech-performance-table h3,
.tech-security-card h3 {
  font-size: 25px;
  line-height: 1.15;
  letter-spacing: -.6px;
  margin: 16px 0 10px;
}

.tech-card p,
.tech-stack-card p,
.tech-infra-card p,
.tech-dev-card p,
.tech-performance-card p,
.tech-security-card p {
  color: var(--muted);
  line-height: 1.7;
  font-size: 15px;
}

.tech-diagram-section {
  padding: 88px 0;
  background: var(--white);
}

.tech-diagram-grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 48px;
  align-items: center;
}

.tech-list-card {
  padding: 34px;
  border-radius: var(--radius2);
  background: var(--bg);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow2);
}

.tech-list-card h2 {
  font-size: clamp(28px, 3vw, 42px);
  letter-spacing: -.8px;
  margin-bottom: 22px;
}

.tech-list-card ul,
.tech-security-card ul {
  list-style: none;
  display: grid;
  gap: 13px;
}

.tech-list-card li,
.tech-security-card li {
  position: relative;
  padding-left: 22px;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.6;
}

.tech-list-card li::before,
.tech-security-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .65em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 3px rgba(43,127,255,.12);
}

.tech-diagram {
  min-height: 460px;
  border-radius: 32px;
  background: var(--bg);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
  padding: 28px;
  display: grid;
  grid-template-columns: 1fr 58px 1fr;
  gap: 22px;
  align-items: center;
}

.tech-diagram__core,
.tech-diagram__services > div {
  border: 2px solid rgba(43,127,255,.18);
  background: rgba(255,255,255,.76);
  border-radius: 18px;
  padding: 18px;
  text-align: center;
}

.tech-diagram__core strong,
.tech-diagram__services strong {
  display: block;
  color: var(--ink);
  font-size: 13px;
  margin-bottom: 16px;
}

.tech-blocks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
}

.tech-blocks span {
  height: 34px;
  border-radius: 9px;
  border: 2px solid var(--blue);
  background: rgba(43,127,255,.08);
}

.tech-blocks span:nth-child(2n) {
  border-color: var(--gold);
  background: rgba(253,185,19,.08);
}

.tech-blocks span:nth-child(3n) {
  border-color: var(--green);
  background: rgba(34,197,94,.08);
}

.tech-db-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 24px;
}

.tech-db-row em {
  padding: 12px 8px;
  border-radius: 12px;
  background: var(--white);
  border: 1px solid var(--stroke);
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.tech-bus {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  min-height: 320px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--white);
  border: 2px solid rgba(43,127,255,.18);
  color: var(--blue);
  font-size: 12px;
  font-weight: 700;
}

.tech-diagram__services {
  display: grid;
  gap: 24px;
}

.tech-blocks--small span {
  height: 30px;
}

.tech-stack-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

.tech-stack-card p strong {
  color: var(--ink);
}

.tech-infra {
  background: var(--white);
}

.tech-infra-grid,
.tech-security-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.tech-dev-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}

.tech-dev-card {
  text-decoration: none;
  display: block;
}

.tech-dev-card span {
  display: inline-flex;
  margin-top: 18px;
  color: var(--blue);
  font-weight: 700;
  font-size: 14px;
}

.tech-performance {
  background:
    radial-gradient(ellipse 800px 420px at 20% 20%, rgba(43,127,255,.12), transparent 60%),
    var(--bg);
}

.tech-performance-grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 28px;
  align-items: center;
}

.tech-performance-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin: 24px 0;
}

.tech-performance-metrics strong {
  display: block;
  color: var(--blue);
  font-size: clamp(38px, 5vw, 64px);
  line-height: 1;
  letter-spacing: -1.8px;
  margin-bottom: 8px;
}

.tech-performance-metrics span {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
}

.tech-table {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--stroke);
  margin-top: 18px;
}

.tech-table div {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.tech-table div:nth-child(odd) {
  background: var(--bg);
}

.tech-table strong,
.tech-table span {
  padding: 14px;
  font-size: 13px;
  border-right: 1px solid var(--stroke2);
}

.tech-table strong:last-child,
.tech-table span:last-child {
  border-right: none;
}

.tech-table strong {
  color: var(--muted);
}

.tech-table span {
  color: var(--ink);
}

.tech-security {
  background: var(--white);
}

.tech-updates {
  background:
    radial-gradient(ellipse 800px 380px at 78% 30%, rgba(253,185,19,.16), transparent 60%),
    linear-gradient(180deg, #0D1117 0%, #111827 100%);
}

.tech-updates__inner {
  max-width: 860px;
}

.tech-updates h2 {
  color: var(--white);
  font-size: clamp(34px, 4vw, 58px);
  line-height: 1.05;
  letter-spacing: -1.4px;
  margin: 16px 0;
}

.tech-updates p {
  color: rgba(255,255,255,.66);
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 16px;
}

.tech-updates .btn {
  margin-top: 14px;
}

@media (max-width: 1020px) {
  .tech-diagram-grid,
  .tech-performance-grid {
    grid-template-columns: 1fr;
  }

  .tech-diagram {
    grid-template-columns: 1fr;
  }

  .tech-bus {
    writing-mode: horizontal-tb;
    transform: none;
    min-height: auto;
    padding: 16px;
  }
}

@media (max-width: 820px) {
  .tech-feature-grid,
  .tech-stack-grid,
  .tech-infra-grid,
  .tech-dev-grid,
  .tech-security-grid {
    grid-template-columns: 1fr;
  }

  .tech-performance-metrics {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .tech-hero {
    padding: 78px 0 64px;
  }

  .tech-card,
  .tech-stack-card,
  .tech-infra-card,
  .tech-dev-card,
  .tech-performance-card,
  .tech-performance-table,
  .tech-security-card,
  .tech-list-card {
    padding: 22px;
  }

  .tech-table div {
    grid-template-columns: 1fr;
  }

  .tech-table strong,
  .tech-table span {
    border-right: none;
    border-bottom: 1px solid var(--stroke2);
  }

  .tech-table strong:last-child,
  .tech-table span:last-child {
    border-bottom: none;
  }
}

.rq-success-page {
  min-height: 100vh;
  background:
    radial-gradient(ellipse 900px 520px at 80% 12%, rgba(43,127,255,.18), transparent 60%),
    radial-gradient(ellipse 620px 360px at 8% 88%, rgba(253,185,19,.12), transparent 60%),
    linear-gradient(180deg, #EEF3FC 0%, var(--bg) 100%);
  display: grid;
  place-items: center;
  padding: 34px 20px;
}

.rq-success-shell {
  width: min(760px, 100%);
  text-align: center;
}

.rq-success-brand {
  display: inline-flex;
  margin-bottom: 24px;
  color: var(--ink);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -.4px;
}

.rq-success-card {
  background: rgba(255,255,255,.88);
  border: 1px solid var(--stroke);
  border-radius: var(--radius2);
  box-shadow: var(--shadow);
  padding: clamp(34px, 6vw, 58px);
  backdrop-filter: blur(18px);
}

.rq-success-icon {
  width: 74px;
  height: 74px;
  margin: 0 auto 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(34,197,94,.12);
  border: 1.5px solid rgba(34,197,94,.28);
  color: var(--green);
}

.rq-success-icon svg {
  width: 34px;
  height: 34px;
}

.rq-success-eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--blue-light);
  border: 1px solid rgba(43,127,255,.22);
  color: var(--blue);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.rq-success-card h1 {
  font-size: clamp(34px, 5vw, 54px);
  line-height: 1.05;
  letter-spacing: -1.3px;
  margin-bottom: 14px;
  color: var(--ink);
}

.rq-success-card p {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
  max-width: 54ch;
  margin: 0 auto 28px;
}

.rq-success-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 30px;
}

.rq-success-summary div {
  padding: 18px;
  border-radius: var(--radius);
  background: var(--bg);
  border: 1px solid var(--stroke2);
  text-align: left;
}

.rq-success-summary strong {
  display: block;
  font-size: 13.5px;
  color: var(--ink);
  margin-bottom: 5px;
}

.rq-success-summary span {
  display: block;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}

.rq-success-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

@media (max-width: 720px) {
  .rq-success-summary {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .rq-success-card {
    padding: 30px 22px;
  }

  .rq-success-actions {
    flex-direction: column;
  }

  .rq-success-actions .btn {
    width: 100%;
  }
}

.np-tag {
  display: inline-flex;
  align-items: center;
  padding: 7px 13px;
  border-radius: 999px;
  background: var(--blue-light);
  border: 1px solid rgba(43,127,255,.20);
  color: var(--blue);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.np-hero {
  background:
    radial-gradient(ellipse 760px 440px at 82% 20%, rgba(43,127,255,.12), transparent 60%),
    linear-gradient(180deg, #EEF3FC 0%, var(--bg) 100%);
  padding: 78px 0 66px;
  overflow: hidden;
}

.np-hero__grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 46px;
  align-items: center;
}

.np-hero__content h1 {
  font-size: clamp(38px, 4.8vw, 68px);
  line-height: 1.02;
  letter-spacing: -1.8px;
  margin: 18px 0 18px;
  max-width: 12ch;
}

.np-hero__content p {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.75;
  max-width: 52ch;
  margin-bottom: 28px;
}

.np-hero__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.np-hero__visual {
  min-width: 0;
}

.np-dashboard {
  background: var(--white);
  border-radius: 28px;
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
  overflow: hidden;
  max-width: 620px;
  margin-left: auto;
}

.np-dashboard__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  background: var(--navy2);
  color: rgba(255,255,255,.58);
  font-family: var(--mono);
  font-size: 12px;
}

.np-dashboard__bar strong {
  color: var(--green);
  font-size: 11px;
}

.np-dashboard__body {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 190px;
  gap: 18px;
  padding: 22px;
  background:
    radial-gradient(ellipse 360px 180px at 80% 20%, rgba(43,127,255,.08), transparent 60%),
    var(--white);
}

.np-dash-main {
  display: grid;
  gap: 12px;
}

.np-dash-head,
.np-dash-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
  border-radius: 14px;
  background: var(--bg);
  border: 1px solid var(--stroke2);
}

.np-dash-head span,
.np-dash-row span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.np-dash-head strong {
  color: var(--blue);
  font-size: 22px;
}

.np-dash-row strong {
  color: var(--green);
  font-size: 12px;
}

.np-dash-chart {
  height: 112px;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 14px;
  border-radius: 16px;
  background: var(--navy);
}

.np-dash-chart span {
  flex: 1;
  border-radius: 8px 8px 4px 4px;
  background: linear-gradient(180deg, var(--gold), var(--blue));
}

.np-phone {
  width: 150px;
  min-height: 304px;
  padding: 10px;
  border-radius: 28px;
  background: var(--navy2);
  box-shadow: 0 22px 54px rgba(13,17,23,.18);
}

.np-phone__screen {
  height: 100%;
  border-radius: 20px;
  padding: 18px 12px;
  background: var(--white);
}

.np-phone__screen span {
  display: block;
  color: var(--muted2);
  font-size: 11px;
  margin-bottom: 6px;
}

.np-phone__screen strong {
  display: block;
  color: var(--ink);
  font-size: 19px;
  margin-bottom: 18px;
}

.np-phone__screen div {
  height: 44px;
  border-radius: 12px;
  background: var(--bg);
  border: 1px solid var(--stroke2);
  margin-bottom: 10px;
}

.np-stats {
  padding: 28px 0 66px;
  background: var(--bg);
}

.np-stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.np-stats__grid div {
  padding: 24px;
  border-radius: var(--radius2);
  background: var(--white);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow2);
}

.np-stats__grid strong {
  display: block;
  color: var(--ink);
  font-size: clamp(30px, 4vw, 46px);
  letter-spacing: -1px;
  line-height: 1;
  margin-bottom: 10px;
}

.np-stats__grid span {
  color: var(--muted);
  font-size: 14px;
}

.np-section {
  padding: 82px 0;
  background: var(--bg);
}

.np-section--white {
  background: var(--white);
  border-top: 1px solid var(--stroke2);
  border-bottom: 1px solid var(--stroke2);
}

.np-section-head {
  max-width: 720px;
  margin-bottom: 40px;
}

.np-section-head h2 {
  font-size: clamp(30px, 4vw, 52px);
  line-height: 1.08;
  letter-spacing: -1.1px;
  margin: 14px 0 10px;
}

.np-section-head p {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
}

.np-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.np-feature-card,
.np-role-card,
.np-ledger-grid div,
.np-benefit-grid div,
.np-flow-card {
  background: var(--white);
  border: 1px solid var(--stroke);
  border-radius: var(--radius2);
  box-shadow: var(--shadow2);
  padding: 26px;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}

.np-feature-card:hover,
.np-role-card:hover,
.np-ledger-grid div:hover,
.np-benefit-grid div:hover,
.np-flow-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: rgba(43,127,255,.22);
}

.np-feature-card--large {
  grid-column: span 2;
}

.np-feature-card h3,
.np-role-card h3,
.np-ledger-grid h3,
.np-benefit-grid h3,
.np-flow-card h3 {
  font-size: 21px;
  letter-spacing: -.4px;
  margin-bottom: 12px;
}

.np-feature-card p,
.np-ledger-grid p,
.np-benefit-grid p,
.np-flow-card p {
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.7;
}

.np-feature-card ul,
.np-role-card ul {
  list-style: none;
  display: grid;
  gap: 9px;
}

.np-feature-card li,
.np-role-card li {
  position: relative;
  padding-left: 18px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.np-feature-card li::before,
.np-role-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .68em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue);
}

.np-blue-strip {
  background: var(--blue);
  padding: 20px 0;
}

.np-blue-strip .container {
  display: flex;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
}

.np-blue-strip span {
  color: var(--white);
  font-weight: 700;
  font-size: 14px;
}

.np-flow {
  display: grid;
  grid-template-columns: 1fr .95fr 1fr;
  gap: 20px;
  align-items: stretch;
}

.np-flow-card {
  text-align: center;
}

.np-flow-card--center {
  background: var(--blue);
  color: var(--white);
}

.np-flow-card--center p {
  color: rgba(255,255,255,.75);
}

.np-role-grid,
.np-benefit-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.np-ledger-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.np-cta {
  position: relative;
  overflow: hidden;
  background: var(--blue);
  padding: 78px 0;
}

.np-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(780px 360px at 78% 40%, rgba(253,185,19,.22), transparent 60%),
    radial-gradient(500px 300px at 8% 20%, rgba(255,255,255,.12), transparent 60%);
}

.np-cta__inner {
  position: relative;
  max-width: 720px;
  text-align: center;
}

.np-cta h2 {
  color: var(--white);
  font-size: clamp(30px, 4vw, 50px);
  line-height: 1.08;
  letter-spacing: -1px;
  margin-bottom: 12px;
}

.np-cta p {
  color: rgba(255,255,255,.74);
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 28px;
}

.np-cta div div {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

@media (max-width: 980px) {
  .np-hero__grid {
    grid-template-columns: 1fr;
  }

  .np-dashboard {
    margin-left: 0;
    max-width: none;
  }

  .np-stats__grid,
  .np-feature-grid,
  .np-ledger-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .np-flow {
    grid-template-columns: 1fr;
  }

  .np-feature-card--large {
    grid-column: span 1;
  }
}

@media (max-width: 680px) {
  .np-hero {
    padding: 58px 0 46px;
  }

  .np-hero__content h1 {
    max-width: none;
  }

  .np-dashboard__body {
    grid-template-columns: 1fr;
  }

  .np-phone {
    display: none;
  }

  .np-stats__grid,
  .np-feature-grid,
  .np-role-grid,
  .np-ledger-grid,
  .np-benefit-grid {
    grid-template-columns: 1fr;
  }

  .np-section {
    padding: 64px 0;
  }
}

.ci-tag {
  display: inline-flex;
  align-items: center;
  padding: 7px 13px;
  border-radius: 999px;
  background: var(--blue-light);
  border: 1px solid rgba(43,127,255,.20);
  color: var(--blue);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ci-hero {
  padding: 84px 0 78px;
  background:
    radial-gradient(ellipse 820px 460px at 82% 20%, rgba(43,127,255,.14), transparent 60%),
    linear-gradient(180deg, #EEF3FC 0%, var(--bg) 100%);
  overflow: hidden;
}

.ci-hero__grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 52px;
  align-items: center;
}

.ci-hero__content h1 {
  font-size: clamp(40px, 5.2vw, 76px);
  line-height: 1.02;
  letter-spacing: -2px;
  margin: 18px 0;
}

.ci-hero__content p {
  color: var(--muted);
  font-size: 16.5px;
  line-height: 1.75;
  max-width: 58ch;
  margin-bottom: 28px;
}

.ci-hero__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.ci-hero__chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.ci-hero__chips span {
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.78);
  border: 1px solid var(--stroke2);
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
}

.ci-hero__visual {
  min-height: 420px;
  display: grid;
  place-items: center;
  position: relative;
}

.ci-card-stack {
  position: relative;
  width: min(520px, 100%);
  height: 360px;
  transform: rotate(-8deg);
}

.ci-card {
  position: absolute;
  width: 420px;
  max-width: 82%;
  height: 250px;
  border-radius: 26px;
  box-shadow: 0 28px 80px rgba(43,127,255,.22);
}

.ci-card--top {
  top: 20px;
  right: 36px;
  z-index: 3;
  padding: 34px;
  background:
    radial-gradient(circle at 85% 20%, rgba(255,255,255,.22), transparent 28%),
    linear-gradient(135deg, #2B7FFF 0%, #3549FF 60%, #1C2333 100%);
  color: var(--white);
}

.ci-card--top span {
  display: block;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .72;
  margin-bottom: 58px;
}

.ci-card--top strong {
  display: block;
  font-size: 24px;
  letter-spacing: .08em;
  margin-bottom: 18px;
}

.ci-card--top small {
  font-size: 12px;
  opacity: .72;
}

.ci-card--mid {
  top: 88px;
  right: 8px;
  z-index: 2;
  background: linear-gradient(135deg, #00A6D6, #2B7FFF);
}

.ci-card--base {
  top: 154px;
  right: 60px;
  z-index: 1;
  background: linear-gradient(135deg, #FDB913, #2B7FFF);
  opacity: .88;
}

.ci-api,
.ci-wallet,
.ci-network,
.ci-final {
  padding: 88px 0;
  background: var(--white);
  border-top: 1px solid var(--stroke2);
  border-bottom: 1px solid var(--stroke2);
}

.ci-api__grid,
.ci-wallet__grid,
.ci-network__grid,
.ci-final__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 58px;
  align-items: center;
}

.ci-code-card {
  border-radius: var(--radius2);
  background: var(--white);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.ci-code-card__bar {
  display: flex;
  justify-content: space-between;
  padding: 16px 18px;
  background: #D9ECFF;
  color: var(--blue);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.ci-code-card pre {
  margin: 0;
  padding: 24px;
  overflow-x: auto;
  color: var(--blue);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.8;
}

.ci-api__content h2,
.ci-wallet__content h2,
.ci-network__content h2,
.ci-final h2 {
  font-size: clamp(34px, 4.4vw, 62px);
  line-height: 1.05;
  letter-spacing: -1.6px;
  margin: 16px 0;
}

.ci-api__content p,
.ci-wallet__content p,
.ci-network__content p,
.ci-final p {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.75;
  margin-bottom: 26px;
}

.ci-section,
.ci-steps {
  padding: 88px 0;
  background: var(--bg);
}

.ci-section--white {
  background: var(--white);
}

.ci-section-head {
  max-width: 760px;
  margin-bottom: 42px;
}

.ci-section-head h2 {
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1.08;
  letter-spacing: -1.2px;
  margin: 14px 0 10px;
}

.ci-section-head p {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
}

.ci-options-grid,
.ci-benefit-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.ci-option-card,
.ci-benefit-card {
  overflow: hidden;
  border-radius: var(--radius2);
  background: var(--white);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow2);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}

.ci-benefit-card {
  padding: 34px;
  min-height: 280px;
}

.ci-option-card:hover,
.ci-benefit-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: rgba(43,127,255,.22);
}

.ci-option-visual {
  height: 260px;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.ci-option-visual--red {
  background: linear-gradient(135deg, #FF0844, #E02020);
}

.ci-option-visual--blue {
  background: linear-gradient(135deg, #2B7FFF, #1C2333);
}

.ci-option-visual--gold {
  background: linear-gradient(135deg, #FDB913, #2B7FFF);
}

.ci-option-visual--green {
  background: linear-gradient(135deg, #1DB954, #2B7FFF);
}

.ci-mini-card {
  width: 240px;
  height: 140px;
  border-radius: 18px;
  background: var(--white);
  box-shadow: 0 18px 46px rgba(13,17,23,.18);
}

.ci-mini-card--dark {
  background: var(--navy);
  transform: rotate(-8deg);
}

.ci-mini-card--float {
  position: absolute;
  transform: translate(34px, 34px) rotate(8deg);
  background: linear-gradient(135deg, var(--blue), #00A6D6);
}

.ci-currency-card,
.ci-checkout-card {
  width: 260px;
  padding: 24px;
  border-radius: 20px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 18px 46px rgba(13,17,23,.18);
  color: var(--ink);
  font-weight: 700;
  text-align: center;
}

.ci-currency-card {
  position: absolute;
}

.ci-currency-card:nth-child(1) {
  transform: translateY(-72px);
}

.ci-currency-card:nth-child(2) {
  transform: translate(34px, 0);
}

.ci-currency-card:nth-child(3) {
  transform: translate(-34px, 72px);
}

.ci-checkout-card span {
  display: block;
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 8px;
}

.ci-checkout-card strong {
  font-size: 28px;
}

.ci-option-card h3 {
  font-size: 24px;
  letter-spacing: -.5px;
  padding: 28px 28px 8px;
}

.ci-option-card p {
  color: var(--muted);
  line-height: 1.7;
  padding: 0 28px 30px;
}

.ci-wallet {
  background:
    radial-gradient(ellipse 740px 420px at 80% 25%, rgba(43,127,255,.12), transparent 60%),
    #F1F5FF;
}

.ci-wallet-phone {
  width: min(360px, 100%);
  min-height: 560px;
  margin: 0 auto;
  padding: 14px;
  border-radius: 38px;
  background: var(--white);
  box-shadow: 0 34px 90px rgba(43,127,255,.18);
}

.ci-wallet-phone__screen {
  min-height: 532px;
  border-radius: 30px;
  background: linear-gradient(180deg, var(--white), #F7F9FF);
  padding: 26px;
}

.ci-wallet-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--bg);
  border-radius: 999px;
  padding: 4px;
  margin-bottom: 28px;
  font-size: 12px;
  text-align: center;
}

.ci-wallet-tabs span,
.ci-wallet-tabs strong {
  padding: 9px;
  border-radius: 999px;
}

.ci-wallet-tabs strong {
  background: var(--blue);
  color: var(--white);
}

.ci-wallet-phone h3 {
  font-size: 18px;
  margin-bottom: 14px;
}

.ci-wallet-method {
  padding: 18px;
  border-radius: 16px;
  background: var(--white);
  border: 1px solid var(--stroke2);
  margin-bottom: 12px;
  color: var(--muted);
  font-weight: 700;
}

.ci-wallet-phone button {
  width: 100%;
  margin-top: 22px;
  padding: 16px;
  border-radius: 999px;
  background: var(--blue);
  color: var(--white);
  font-weight: 700;
}

.ci-network {
  background: var(--bg);
}

.ci-network__logos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.ci-network__logos div {
  min-height: 130px;
  border-radius: 20px;
  background: var(--white);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow2);
  display: grid;
  place-items: center;
  color: var(--blue);
  font-weight: 800;
  text-align: center;
  padding: 18px;
}

.ci-benefit-card strong {
  display: inline-flex;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--blue-light);
  color: var(--blue);
  align-items: center;
  justify-content: center;
  margin-bottom: 70px;
}

.ci-benefit-card h3 {
  font-size: 24px;
  letter-spacing: -.4px;
  margin-bottom: 10px;
}

.ci-benefit-card p {
  color: var(--muted);
  line-height: 1.7;
}

/* .ci-step-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 54px 24px;
  margin-top: 64px;
} */


.ci-step-card {
  position: relative;
  min-height: 260px;
  border-radius: 22px;
  background: var(--blue);
  color: var(--white);
  text-align: center;
  padding: 62px 26px 34px;
  box-shadow: 0 20px 60px rgba(43,127,255,.22);
}

.ci-step-card span {
  position: absolute;
  top: -34px;
  left: 50%;
  transform: translateX(-50%);
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--white);
  border: 1px solid rgba(43,127,255,.28);
  color: var(--ink);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 18px;
}

.ci-step-card h3 {
  font-size: 20px;
  margin-bottom: 12px;
}

.ci-step-card p {
  color: rgba(255,255,255,.78);
  line-height: 1.65;
  font-size: 14px;
}

.ci-final {
  background:
    radial-gradient(ellipse 780px 420px at 82% 35%, rgba(43,127,255,.18), transparent 60%),
    linear-gradient(180deg, #DCEBFF 0%, #CFE2FB 100%);
}

.ci-final__cards {
  position: relative;
  min-height: 360px;
}

.ci-final__cards div {
  position: absolute;
  width: 300px;
  height: 190px;
  border-radius: 26px;
  background: linear-gradient(135deg, rgba(255,255,255,.60), rgba(255,255,255,.18));
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 30px 80px rgba(43,127,255,.18);
  backdrop-filter: blur(12px);
}

.ci-final__cards div:nth-child(1) {
  top: 10px;
  left: 70px;
}

.ci-final__cards div:nth-child(2) {
  bottom: 30px;
  right: 40px;
  background: linear-gradient(135deg, var(--blue), #3447FF);
}

@media (max-width: 980px) {
  .ci-hero__grid,
  .ci-api__grid,
  .ci-wallet__grid,
  .ci-network__grid,
  .ci-final__grid {
    grid-template-columns: 1fr;
  }

  .ci-hero__visual {
    min-height: 340px;
  }

  .ci-options-grid,
  .ci-benefit-grid,
  .ci-step-grid {
    grid-template-columns: repeat(2, 1fr);
  }

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

@media (max-width: 640px) {
  .ci-hero {
    padding: 64px 0 54px;
  }

  .ci-card-stack {
    height: 280px;
  }

  .ci-card {
    height: 200px;
  }

  .ci-options-grid,
  .ci-benefit-grid,
  .ci-step-grid,
  .ci-network__logos {
    grid-template-columns: 1fr;
  }

  .ci-api,
  .ci-wallet,
  .ci-network,
  .ci-final,
  .ci-section,
  .ci-steps {
    padding: 66px 0;
  }

  .ci-option-visual {
    height: 220px;
  }

  .ci-benefit-card strong {
    margin-bottom: 34px;
  }

  .ci-final__cards {
    min-height: 260px;
  }

  .ci-final__cards div {
    width: 230px;
    height: 150px;
  }
}


.ci-steps--timeline {
  position: relative;
  padding: 96px 0 104px;
  background:
    radial-gradient(ellipse 720px 360px at 50% 0%, rgba(43,127,255,.16), transparent 60%),
    linear-gradient(180deg, #070B12 0%, #0D1117 100%);
  overflow: hidden;
}

.ci-steps--timeline::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(circle at 50% 18%, black, transparent 72%);
  pointer-events: none;
}

.ci-steps--timeline .container {
  position: relative;
}

.ci-steps-head {
  max-width: 820px;
  margin: 0 auto 36px;
  text-align: center;
}

.ci-steps-head h2 {
  color: var(--white);
  font-size: clamp(34px, 4.8vw, 66px);
  line-height: 1.05;
  letter-spacing: -1.6px;
  margin: 16px 0 10px;
}

.ci-steps-head h2 span {
  color: var(--gold);
}

.ci-steps-head p {
  color: rgba(255,255,255,.52);
  font-size: 16px;
  margin-bottom: 24px;
}

.ci-steps--timeline .ci-tag {
  background: rgba(43,127,255,.14);
  border-color: rgba(43,127,255,.28);
  color: #79C0FF;
}

.ci-timeline {
  max-width: 920px;
  margin: 0 auto 36px;
}

.ci-timeline__labels {
  display: flex;
  justify-content: space-between;
  color: var(--gold);
  font-weight: 800;
  font-size: 13px;
  margin-bottom: 10px;
}

.ci-timeline__line {
  position: relative;
  height: 3px;
  background: linear-gradient(90deg, var(--blue), var(--blue), var(--gold), var(--gold));
  border-radius: 999px;
}

.ci-timeline__line span {
  position: absolute;
  top: 50%;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: var(--navy);
  border: 4px solid var(--blue);
  box-shadow: 0 0 0 6px rgba(43,127,255,.14);
}

.ci-timeline__line span:nth-child(1) {
  left: 0;
}

.ci-timeline__line span:nth-child(2) {
  left: 33%;
}

.ci-timeline__line span:nth-child(3) {
  left: 66%;
  border-color: var(--gold);
  box-shadow: 0 0 0 6px rgba(253,185,19,.14);
}

.ci-timeline__line span:nth-child(4) {
  right: 0;
  border-color: rgba(255,255,255,.35);
  box-shadow: none;
}

.ci-step-grid--timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 0;
}

.ci-step-card--timeline {
  min-height: 318px;
  border-radius: 22px;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: none;
  color: var(--white);
  text-align: left;
  padding: 26px;
  backdrop-filter: blur(8px);
}

.ci-step-card--timeline:hover {
  transform: translateY(-4px);
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.075);
}

.ci-step-card__top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
}

.ci-step-card__top span {
  position: static;
  transform: none;
  width: auto;
  height: auto;
  border: none;
  background: transparent;
  color: rgba(255,255,255,.38);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 800;
}

.ci-step-card__top strong {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}

.ci-step-card--blue .ci-step-card__top strong {
  background: rgba(43,127,255,.18);
  color: #79C0FF;
}

.ci-step-card--purple .ci-step-card__top strong {
  background: rgba(168,85,247,.18);
  color: #C084FC;
}

.ci-step-card--gold .ci-step-card__top strong {
  background: rgba(253,185,19,.16);
  color: var(--gold);
}

.ci-step-card--green .ci-step-card__top strong {
  background: rgba(29,185,84,.16);
  color: var(--green);
}

.ci-step-card--timeline h3 {
  font-size: 19px;
  letter-spacing: -.3px;
  line-height: 1.2;
  margin-bottom: 18px;
}

.ci-step-card--timeline ul {
  display: grid;
  gap: 12px;
  list-style: none;
}

.ci-step-card--timeline li {
  position: relative;
  padding-left: 20px;
  color: rgba(255,255,255,.62);
  font-size: 14px;
  line-height: 1.55;
}

.ci-step-card--timeline li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.ci-step-card--blue li::before {
  background: #79C0FF;
}

.ci-step-card--purple li::before {
  background: #C084FC;
}

.ci-step-card--gold li::before {
  background: var(--gold);
}

.ci-step-card--green li::before {
  background: var(--green);
}

@media (max-width: 1020px) {
  .ci-step-grid--timeline {
    grid-template-columns: repeat(2, 1fr);
  }

  .ci-timeline {
    display: none;
  }
}

@media (max-width: 640px) {
  .ci-steps--timeline {
    padding: 72px 0;
  }

  .ci-step-grid--timeline {
    grid-template-columns: 1fr;
  }

  .ci-step-card--timeline {
    min-height: auto;
  }
}

.idv-tag {
  display: inline-flex;
  align-items: center;
  padding: 7px 13px;
  border-radius: 999px;
  background: var(--blue-light);
  border: 1px solid rgba(43,127,255,.20);
  color: var(--blue);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.idv-hero {
  padding: 86px 0 72px;
  background:
    radial-gradient(ellipse 780px 430px at 82% 18%, rgba(43,127,255,.14), transparent 60%),
    radial-gradient(ellipse 620px 340px at 10% 82%, rgba(253,185,19,.10), transparent 60%),
    linear-gradient(180deg, #EEF3FC 0%, var(--bg) 100%);
}

.idv-hero__inner {
  max-width: 860px;
  text-align: center;
}

.idv-hero h1 {
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1.02;
  letter-spacing: -1.8px;
  margin: 18px 0;
}

.idv-hero p {
  color: var(--muted);
  font-size: 16.5px;
  line-height: 1.75;
  max-width: 66ch;
  margin: 0 auto;
}

.idv-services,
.idv-pricing,
.idv-table-section {
  padding: 82px 0;
  background: var(--bg);
}

.idv-services__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

.idv-service-card {
  position: relative;
  padding: 32px;
  border-radius: var(--radius2);
  background: var(--white);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow2);
  overflow: hidden;
}

.idv-service-card--wide {
  grid-column: span 2;
}

.idv-illustration {
  width: 140px;
  height: 140px;
  border-radius: 28px;
  background: var(--blue-light);
  display: grid;
  place-items: center;
  margin-bottom: 24px;
}

.idv-illustration span {
  display: block;
  width: 72px;
  height: 72px;
  border-radius: 22px;
  background: linear-gradient(135deg, var(--blue), #6BB2FF);
  box-shadow: 0 18px 40px rgba(43,127,255,.22);
}

.idv-illustration--person span {
  border-radius: 50%;
}

.idv-illustration--face span {
  border-radius: 18px;
  border: 8px solid rgba(255,255,255,.56);
}

.idv-illustration--building span {
  border-radius: 12px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.30) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,.30) 1px, transparent 1px),
    linear-gradient(135deg, var(--blue), #415CFF);
  background-size: 18px 18px, 18px 18px, auto;
}

.idv-ribbon {
  position: absolute;
  top: 24px;
  right: -42px;
  transform: rotate(45deg);
  width: 170px;
  padding: 9px 0;
  text-align: center;
  background: var(--gold);
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.idv-service-card h2 {
  font-size: 28px;
  letter-spacing: -.6px;
  margin-bottom: 10px;
}

.idv-service-card p {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 24px;
}

.idv-service-card h3 {
  color: var(--blue);
  font-size: 19px;
  margin-bottom: 16px;
}

.idv-service-card ul {
  list-style: none;
  display: grid;
  gap: 12px;
}

.idv-service-card li {
  position: relative;
  padding-left: 30px;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.55;
}

.idv-service-card li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: -1px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--green);
  color: var(--white);
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 800;
}

.idv-section-head {
  max-width: 760px;
  text-align: center;
  margin: 0 auto 34px;
}

.idv-section-head h2 {
  font-size: clamp(34px, 4vw, 58px);
  line-height: 1.06;
  letter-spacing: -1.4px;
  margin: 14px 0 10px;
}

.idv-section-head p {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
}

.idv-alert {
  max-width: 980px;
  margin: 0 auto 28px;
  padding: 14px 18px;
  border-radius: 14px;
  background: rgba(43,127,255,.10);
  border: 1px solid rgba(43,127,255,.18);
  color: var(--blue);
  text-align: center;
  font-size: 13.5px;
  font-weight: 700;
}

.idv-price-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  max-width: 1040px;
  margin: 0 auto;
}

.idv-price-card {
  position: relative;
  padding: 32px;
  border-radius: var(--radius2);
  background: var(--white);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow2);
  text-align: center;
}

.idv-price-card--popular {
  border: 3px solid var(--blue);
  transform: translateY(-8px);
  box-shadow: var(--shadow);
}

.idv-popular {
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 22px;
  border-radius: 0 0 14px 14px;
  background: var(--blue);
  color: var(--white);
  font-size: 12px;
  font-weight: 800;
}

.idv-price-card h3 {
  color: var(--muted);
  font-size: 15px;
  margin-bottom: 12px;
}

.idv-price-card span {
  display: block;
  color: var(--blue);
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 24px;
}

.idv-price-card strong {
  display: block;
  font-size: clamp(42px, 5vw, 62px);
  line-height: 1;
  letter-spacing: -1.5px;
  color: var(--ink);
  margin-bottom: 28px;
}

.idv-price-card small {
  font-size: 18px;
  color: var(--muted);
  margin-left: 4px;
}

.idv-price-card .btn {
  width: 100%;
}

.idv-note {
  max-width: 880px;
  margin: 30px auto 0;
  text-align: center;
}

.idv-note p {
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.65;
  margin-bottom: 6px;
}

.idv-table-section {
  background: var(--white);
  border-top: 1px solid var(--stroke2);
  border-bottom: 1px solid var(--stroke2);
}

.idv-table-wrap {
  overflow-x: auto;
  border-radius: var(--radius2);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow2);
  background: var(--white);
}

.idv-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 780px;
}

.idv-table th,
.idv-table td {
  padding: 20px;
  border-bottom: 1px solid var(--stroke2);
  text-align: left;
  vertical-align: top;
  font-size: 14px;
  line-height: 1.55;
}

.idv-table th {
  color: var(--ink);
  background: var(--bg);
  font-weight: 800;
}

.idv-table td {
  color: var(--muted);
}

.idv-table tr:last-child td {
  border-bottom: none;
}

.idv-cta {
  position: relative;
  overflow: hidden;
  background: var(--blue);
  padding: 78px 0;
}

.idv-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(760px 360px at 78% 40%, rgba(253,185,19,.22), transparent 60%),
    radial-gradient(520px 300px at 8% 20%, rgba(255,255,255,.12), transparent 60%);
}

.idv-cta__inner {
  position: relative;
  max-width: 760px;
  text-align: center;
}

.idv-cta h2 {
  color: var(--white);
  font-size: clamp(30px, 4vw, 50px);
  line-height: 1.08;
  letter-spacing: -1px;
  margin-bottom: 12px;
}

.idv-cta p {
  color: rgba(255,255,255,.74);
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 28px;
}

.idv-cta div div {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

@media (max-width: 900px) {
  .idv-services__grid,
  .idv-price-grid {
    grid-template-columns: 1fr;
  }

  .idv-service-card--wide {
    grid-column: span 1;
  }

  .idv-price-card--popular {
    transform: none;
  }
}

@media (max-width: 560px) {
  .idv-hero {
    padding: 64px 0 54px;
  }

  .idv-services,
  .idv-pricing,
  .idv-table-section {
    padding: 64px 0;
  }

  .idv-service-card,
  .idv-price-card {
    padding: 24px;
  }

  .idv-illustration {
    width: 110px;
    height: 110px;
  }
}

.idv-page-tag {
  display: inline-flex;
  align-items: center;
  padding: 7px 13px;
  border-radius: 999px;
  background: var(--blue-light);
  border: 1px solid rgba(43,127,255,.20);
  color: var(--blue);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.idv-page-tag--dark {
  background: rgba(43,127,255,.14);
  border-color: rgba(43,127,255,.28);
  color: #79C0FF;
}

.idv-page-hero {
  padding: 86px 0 74px;
  background:
    radial-gradient(ellipse 800px 430px at 82% 18%, rgba(43,127,255,.14), transparent 60%),
    radial-gradient(ellipse 620px 340px at 10% 84%, rgba(253,185,19,.10), transparent 60%),
    linear-gradient(180deg, #EEF3FC 0%, var(--bg) 100%);
  overflow: hidden;
}

.idv-page-hero__grid {
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 54px;
  align-items: center;
}

.idv-page-hero__content h1 {
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1.02;
  letter-spacing: -1.8px;
  margin: 18px 0;
}

.idv-page-hero__content p {
  color: var(--muted);
  font-size: 16.5px;
  line-height: 1.75;
  max-width: 58ch;
  margin-bottom: 28px;
}

.idv-page-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.idv-page-visual {
  min-height: 420px;
  position: relative;
  display: grid;
  place-items: center;
}

.idv-phone {
  width: 260px;
  height: 380px;
  border-radius: 34px;
  padding: 14px;
  background: var(--navy);
  box-shadow: 0 30px 80px rgba(43,127,255,.20);
  transform: rotate(-8deg);
}

.idv-phone__screen {
  height: 100%;
  border-radius: 24px;
  background: linear-gradient(180deg, var(--white), #EDF5FF);
  padding: 28px 22px;
  position: relative;
  overflow: hidden;
}

.idv-face-box {
  width: 132px;
  height: 132px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), #6BB2FF);
  margin: 26px auto;
  box-shadow: inset 0 0 0 12px rgba(255,255,255,.28);
}

.idv-face-box::after {
  content: "";
  position: absolute;
  top: 74px;
  left: 50%;
  width: 164px;
  height: 164px;
  transform: translateX(-50%);
  border: 3px solid var(--green);
  border-radius: 26px;
}

.idv-scan-line {
  position: absolute;
  left: 30px;
  right: 30px;
  top: 140px;
  height: 3px;
  background: var(--gold);
  box-shadow: 0 0 22px rgba(253,185,19,.8);
}

.idv-phone__screen span {
  display: block;
  color: var(--muted2);
  font-size: 12px;
  margin-top: 46px;
}

.idv-phone__screen strong {
  display: block;
  color: var(--green);
  font-size: 20px;
  margin-top: 6px;
}

.idv-floating-doc {
  position: absolute;
  right: 34px;
  top: 38px;
  width: 230px;
  padding: 24px;
  border-radius: 22px;
  background: rgba(255,255,255,.84);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
  transform: rotate(8deg);
}

.idv-floating-doc span {
  display: block;
  height: 12px;
  border-radius: 999px;
  background: var(--stroke);
  margin-bottom: 12px;
}

.idv-floating-doc span:nth-child(1) {
  width: 70%;
  background: var(--blue);
}

.idv-floating-doc span:nth-child(2) {
  width: 92%;
}

.idv-floating-doc span:nth-child(3) {
  width: 56%;
}

.idv-dark {
  padding: 88px 0;
  background:
    radial-gradient(ellipse 760px 380px at 82% 30%, rgba(43,127,255,.12), transparent 60%),
    linear-gradient(180deg, #07111F 0%, #081827 100%);
}

.idv-dark__grid {
  display: grid;
  grid-template-columns: 1fr .8fr;
  gap: 54px;
  align-items: center;
}

.idv-dark h2,
.idv-guide h2,
.idv-cta-block h2 {
  color: var(--white);
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1.08;
  letter-spacing: -1.2px;
  margin: 16px 0;
}

.idv-dark p {
  color: rgba(255,255,255,.68);
  font-size: 16px;
  line-height: 1.75;
  margin-bottom: 28px;
}

.idv-verification-card {
  padding: 26px;
  border-radius: var(--radius2);
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(12px);
}

.idv-verification-card__top,
.idv-check-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.idv-verification-card__top {
  margin-bottom: 18px;
}

.idv-verification-card__top strong {
  color: var(--white);
  font-size: 18px;
}

.idv-verification-card__top span {
  color: var(--green);
  font-size: 12px;
  font-weight: 800;
}

.idv-check-row {
  padding: 15px;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  margin-bottom: 10px;
}

.idv-check-row span {
  color: rgba(255,255,255,.62);
  font-size: 14px;
}

.idv-check-row strong {
  color: var(--green);
  font-size: 13px;
}

.idv-benefits,
.idv-capabilities {
  padding: 82px 0;
  background: var(--bg);
}

.idv-page-head {
  max-width: 760px;
  margin-bottom: 42px;
}

.idv-page-head h2 {
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1.08;
  letter-spacing: -1.2px;
  margin: 14px 0 10px;
}

.idv-page-head p {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
}

.idv-benefit-grid,
.idv-capability-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}

.idv-benefit-card,
.idv-capability-card {
  padding: 30px;
  border-radius: var(--radius2);
  background: var(--white);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow2);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}

.idv-benefit-card:hover,
.idv-capability-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: rgba(43,127,255,.22);
}

.idv-icon {
  width: 48px;
  height: 48px;
  border-radius: 15px;
  background: var(--blue-light);
  color: var(--blue);
  display: grid;
  place-items: center;
  font-weight: 800;
  margin-bottom: 22px;
}

.idv-benefit-card h3,
.idv-capability-card h3 {
  font-size: 22px;
  letter-spacing: -.4px;
  margin-bottom: 10px;
}

.idv-benefit-card p,
.idv-capability-card p {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
}

.idv-capability-card ul {
  list-style: none;
  display: grid;
  gap: 10px;
  margin-top: 20px;
}

.idv-capability-card li {
  position: relative;
  padding-left: 26px;
  color: var(--muted);
  font-size: 14px;
}

.idv-capability-card li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: -2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--green);
  color: var(--white);
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 800;
}

.idv-guide {
  padding: 88px 0;
  background: linear-gradient(180deg, #07111F 0%, #081827 100%);
}

.idv-guide__head {
  text-align: center;
  margin-bottom: 52px;
}

.idv-timeline {
  max-width: 1040px;
  margin: 0 auto;
  display: grid;
  gap: 28px;
}

.idv-timeline-item {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 24px;
  align-items: start;
  position: relative;
}

.idv-timeline-item:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 28px;
  top: 56px;
  bottom: -28px;
  width: 2px;
  background: rgba(29,185,84,.45);
}

.idv-timeline-item > span {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--green);
  color: var(--white);
  display: grid;
  place-items: center;
  font-weight: 800;
  position: relative;
  z-index: 2;
}

.idv-timeline-item h3 {
  color: var(--green);
  font-size: 18px;
  margin-bottom: 8px;
}

.idv-timeline-item p {
  color: rgba(255,255,255,.76);
  font-size: 15px;
  line-height: 1.7;
}

.idv-cta-block {
  position: relative;
  overflow: hidden;
  background: var(--blue);
  padding: 78px 0;
}

.idv-cta-block::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(760px 360px at 78% 40%, rgba(253,185,19,.22), transparent 60%),
    radial-gradient(520px 300px at 8% 20%, rgba(255,255,255,.12), transparent 60%);
}

.idv-cta-block__inner {
  position: relative;
  max-width: 760px;
  text-align: center;
}

.idv-cta-block p {
  color: rgba(255,255,255,.74);
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 28px;
}

.idv-cta-block div div {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

@media (max-width: 920px) {
  .idv-page-hero__grid,
  .idv-dark__grid {
    grid-template-columns: 1fr;
  }

  .idv-page-visual {
    min-height: 360px;
  }

  .idv-floating-doc {
    right: 0;
  }

  .idv-benefit-grid,
  .idv-capability-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .idv-page-hero,
  .idv-dark,
  .idv-benefits,
  .idv-capabilities,
  .idv-guide {
    padding: 64px 0;
  }

  .idv-page-visual {
    display: none;
  }

  .idv-benefit-card,
  .idv-capability-card {
    padding: 24px;
  }

  .idv-timeline-item {
    grid-template-columns: 46px 1fr;
    gap: 16px;
  }

  .idv-timeline-item > span {
    width: 46px;
    height: 46px;
  }

  .idv-timeline-item:not(:last-child)::before {
    left: 22px;
    top: 46px;
  }
}


.integrations-tag {
  display: inline-flex;
  align-items: center;
  padding: 7px 13px;
  border-radius: 999px;
  background: var(--blue-light);
  border: 1px solid rgba(43,127,255,.20);
  color: var(--blue);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.integrations-hero {
  padding: 94px 0 84px;
  background:
    radial-gradient(ellipse 820px 460px at 82% 20%, rgba(43,127,255,.14), transparent 60%),
    linear-gradient(180deg, #EEF3FC 0%, var(--bg) 100%);
  overflow: hidden;
}

.integrations-hero__grid {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 56px;
  align-items: center;
}

.integrations-hero h1 {
  font-size: clamp(42px, 5.4vw, 76px);
  line-height: 1.02;
  letter-spacing: -2px;
  margin: 18px 0;
}

.integrations-hero p {
  color: var(--muted);
  font-size: 16.5px;
  line-height: 1.75;
  max-width: 54ch;
  margin-bottom: 28px;
}

.integrations-hero__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.integrations-orbit {
  position: relative;
  min-height: 520px;
  display: grid;
  place-items: center;
}

.integrations-orbit::before {
  content: "";
  position: absolute;
  width: 74%;
  height: 74%;
  border: 3px dashed rgba(43,127,255,.28);
  border-radius: 50%;
}

.integrations-orbit__center,
.integrations-orbit span {
  position: absolute;
  border-radius: 50%;
  background: var(--white);
  border: 14px solid #F1F5FF;
  box-shadow: 0 20px 60px rgba(43,127,255,.14);
  display: grid;
  place-items: center;
  text-align: center;
  font-weight: 800;
  color: var(--blue);
}

.integrations-orbit__center {
  width: 180px;
  height: 180px;
  font-size: 24px;
  z-index: 2;
}

.integrations-orbit span {
  width: 106px;
  height: 106px;
  font-size: 16px;
}

.integrations-orbit span:nth-child(2) {
  top: 18px;
  left: 28%;
}

.integrations-orbit span:nth-child(3) {
  top: 62px;
  right: 18%;
}

.integrations-orbit span:nth-child(4) {
  top: 180px;
  left: 10%;
}

.integrations-orbit span:nth-child(5) {
  top: 210px;
  right: 6%;
}

.integrations-orbit span:nth-child(6) {
  bottom: 92px;
  right: 20%;
}

.integrations-orbit span:nth-child(7) {
  bottom: 48px;
  left: 22%;
}

.integrations-orbit span:nth-child(8) {
  bottom: 170px;
  left: 2%;
}

.integrations-orbit span:nth-child(9) {
  bottom: 8px;
  right: 38%;
}

.integrations-section {
  padding: 86px 0;
  background: var(--bg);
}

.integrations-head {
  display: flex;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 26px;
}

.integrations-head h2,
.integration-request h2 {
  font-size: clamp(34px, 4vw, 56px);
  line-height: 1.08;
  letter-spacing: -1.2px;
  margin: 14px 0 10px;
}

.integrations-head p,
.integration-request p {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
  max-width: 68ch;
}

.integrations-filter {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 16px;
  margin-bottom: 26px;
  scrollbar-width: thin;
}

.integrations-filter button {
  flex: 0 0 auto;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--white);
  border: 1px solid var(--stroke);
  color: var(--ink);
  font-weight: 700;
  white-space: nowrap;
  transition: background .2s, color .2s, border-color .2s, transform .2s;
}

.integrations-filter button:hover,
.integrations-filter button.active {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--white);
  transform: translateY(-1px);
}

.integrations-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.integration-card {
  padding: 30px;
  border-radius: var(--radius2);
  background: var(--white);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow2);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}

.integration-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: rgba(43,127,255,.25);
}

.integration-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 26px;
}

.integration-card__tags span {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(43,127,255,.35);
  color: var(--blue);
  font-size: 12px;
  font-weight: 700;
}

.integration-card__brand {
  width: 74px;
  height: 74px;
  border-radius: 22px;
  background: linear-gradient(135deg, var(--blue), #3447FF);
  color: var(--white);
  display: grid;
  place-items: center;
  font-size: 20px;
  font-weight: 900;
  margin-bottom: 20px;
}

.integration-card__brand--mastercard {
  background: linear-gradient(90deg, #E02020, #FDB913);
}

.integration-card h3 {
  font-size: 26px;
  letter-spacing: -.6px;
  margin-bottom: 4px;
}

.integration-card small {
  color: var(--green);
  font-weight: 800;
}

.integration-card p {
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.75;
  margin: 22px 0;
}

.integration-card a {
  color: var(--blue);
  font-weight: 800;
}

.integration-request {
  padding: 86px 0;
  background:
    radial-gradient(ellipse 760px 380px at 82% 30%, rgba(253,185,19,.16), transparent 60%),
    linear-gradient(180deg, #0D1117 0%, #111827 100%);
}

.integration-request__grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 48px;
  align-items: start;
}

.integration-request h2 {
  color: var(--white);
}

.integration-request p {
  color: rgba(255,255,255,.68);
}

.integration-request-form {
  padding: 30px;
  border-radius: var(--radius2);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(14px);
  display: grid;
  gap: 16px;
}

.integration-request-form label {
  display: grid;
  gap: 8px;
  color: rgba(255,255,255,.82);
  font-size: 13px;
  font-weight: 700;
}

.integration-request-form input,
.integration-request-form select,
.integration-request-form textarea {
  width: 100%;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  color: var(--white);
  border-radius: 12px;
  padding: 13px 14px;
  outline: none;
}

.integration-request-form select option {
  color: var(--ink);
}

.integration-request-form textarea {
  min-height: 130px;
  resize: vertical;
}

.integration-request-form input::placeholder,
.integration-request-form textarea::placeholder {
  color: rgba(255,255,255,.42);
}

@media (max-width: 980px) {
  .integrations-hero__grid,
  .integration-request__grid {
    grid-template-columns: 1fr;
  }

  .integrations-orbit {
    min-height: 430px;
  }

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

@media (max-width: 620px) {
  .integrations-hero,
  .integrations-section,
  .integration-request {
    padding: 64px 0;
  }

  .integrations-orbit {
    min-height: 330px;
  }

  .integrations-orbit__center {
    width: 132px;
    height: 132px;
    font-size: 18px;
  }

  .integrations-orbit span {
    width: 76px;
    height: 76px;
    border-width: 8px;
    font-size: 12px;
  }

  .integration-card,
  .integration-request-form {
    padding: 24px;
  }
}

@media (max-width: 620px) {
  .integrations-orbit {
    display: none;
  }
}

.pricing-tag {
  display: inline-flex;
  align-items: center;
  padding: 7px 13px;
  border-radius: 999px;
  background: var(--blue-light);
  border: 1px solid rgba(43,127,255,.20);
  color: var(--blue);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.pricing-hero {
  padding: 82px 0 62px;
  background:
    radial-gradient(ellipse 780px 420px at 80% 20%, rgba(43,127,255,.14), transparent 60%),
    linear-gradient(180deg, #EEF3FC 0%, var(--bg) 100%);
}

.pricing-hero__inner {
  max-width: 860px;
  text-align: center;
}

.pricing-hero h1 {
  font-size: clamp(42px, 5vw, 72px);
  line-height: 1.02;
  letter-spacing: -1.8px;
  margin: 18px 0;
}

.pricing-hero p {
  color: var(--muted);
  font-size: 16.5px;
  line-height: 1.75;
  max-width: 66ch;
  margin: 0 auto;
}

.pricing-page {
  padding: 78px 0;
  background: var(--white);
}

.pricing-products {
  display: flex;
  overflow-x: auto;
  border: 1px solid var(--stroke);
  border-radius: 18px;
  margin-bottom: 52px;
}

.pricing-products a {
  flex: 1 0 auto;
  min-width: 180px;
  padding: 22px;
  text-align: center;
  font-weight: 800;
  color: var(--muted);
  border-right: 1px solid var(--stroke);
}

.pricing-products a:last-child {
  border-right: 0;
}

.pricing-products a.active {
  background: var(--blue);
  color: var(--white);
}

.pricing-product-block {
  margin-bottom: 74px;
}

.pricing-section-head {
  max-width: 760px;
  margin: 0 auto 42px;
  text-align: center;
}

.pricing-section-head h2 {
  font-size: clamp(34px, 4vw, 58px);
  line-height: 1.06;
  letter-spacing: -1.3px;
  margin: 14px 0 10px;
}

.pricing-section-head p {
  color: var(--muted);
  line-height: 1.7;
}

.pricing-plan-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.pricing-plan-card {
  position: relative;
  padding: 34px;
  border-radius: var(--radius2);
  background: var(--white);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow2);
  text-align: center;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}

.pricing-plan-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

.pricing-plan-card--teal,
.pricing-plan-card--green {
  border-color: rgba(29,185,84,.24);
}

.pricing-plan-card--blue {
  border-color: rgba(43,127,255,.28);
}

.pricing-plan-card--purple {
  border-color: rgba(139,92,246,.28);
}

.pricing-plan-card--gold {
  border-color: rgba(253,185,19,.34);
}

.pricing-plan-card h3 {
  color: var(--blue);
  font-size: 24px;
  letter-spacing: -.5px;
  margin-bottom: 18px;
}

.pricing-limit {
  color: var(--muted);
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 24px;
}

.pricing-price {
  color: var(--ink);
  font-size: clamp(42px, 5vw, 58px);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -1.5px;
  margin-bottom: 18px;
}

.pricing-price small {
  color: var(--muted);
  font-size: 18px;
  margin-left: 4px;
}

.pricing-plan-card p {
  color: var(--muted);
  line-height: 1.7;
  min-height: 82px;
  margin-bottom: 26px;
}

.pricing-plan-card .btn {
  width: 100%;
}

.pricing-popular {
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--blue);
  color: var(--white);
  padding: 9px 24px;
  border-radius: 0 0 14px 14px;
  font-size: 12px;
  font-weight: 800;
}

.checkout-page {
  padding: 46px 0 78px;
  background: var(--white);
}

.checkout-steps {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 22px;
  border-bottom: 5px solid rgba(29,185,84,.32);
  margin-bottom: 44px;
  overflow-x: auto;
}

.checkout-steps a {
  color: var(--muted);
  font-weight: 800;
  white-space: nowrap;
}

.checkout-steps a.active {
  color: var(--blue);
}

.checkout-steps span {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 7px solid var(--muted);
}

.checkout-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 34px;
  align-items: start;
}

.checkout-alert {
  padding: 18px 22px;
  background: rgba(43,127,255,.10);
  border-left: 4px solid var(--blue);
  color: var(--ink);
  font-weight: 800;
  margin-bottom: 26px;
}

.checkout-card,
.checkout-form-card {
  background: #F4F6F8;
  border-radius: 2px;
  padding: 26px;
}

.checkout-card__head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  margin-bottom: 24px;
}

.checkout-card h1,
.checkout-form-card h1 {
  font-size: clamp(30px, 4vw, 44px);
  letter-spacing: -1px;
}

.checkout-order-list {
  display: grid;
  gap: 20px;
}

.checkout-order-item {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--stroke);
}

.checkout-product-badge {
  display: inline-flex;
  padding: 6px 12px;
  border-radius: 7px;
  background: var(--blue);
  color: var(--white);
  font-weight: 800;
  font-size: 13px;
  margin-bottom: 10px;
}

.checkout-product-badge--teal,
.checkout-product-badge--green {
  background: var(--green);
}

.checkout-product-badge--gold {
  background: var(--gold);
  color: var(--ink);
}

.checkout-product-badge--purple {
  background: #8B5CF6;
}

.checkout-product-badge--red {
  background: var(--red);
}

.checkout-order-item h3 {
  font-size: 18px;
  margin-bottom: 4px;
}

.checkout-order-item p {
  color: var(--muted);
}

.checkout-order-item strong {
  display: block;
  font-size: 20px;
  margin-bottom: 8px;
  text-align: right;
}

.checkout-remove {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  font-size: 18px;
  line-height: 1;
}

.checkout-total-row {
  margin-top: 22px;
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--stroke);
  font-size: 20px;
  font-weight: 800;
}

.checkout-total-row strong,
.checkout-summary__total strong {
  color: var(--green);
}

.checkout-actions {
  margin-top: 30px;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.checkout-summary h2 {
  color: var(--navy);
  text-align: center;
  font-size: 26px;
  letter-spacing: -.5px;
  margin-bottom: 26px;
  text-transform: uppercase;
}

.checkout-summary__box {
  background: #F1F3F5;
  padding: 34px 28px;
  min-height: 440px;
}

.checkout-summary__box h3 {
  color: var(--navy);
  text-transform: uppercase;
  font-size: 24px;
  margin-bottom: 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--stroke);
}

.checkout-summary__row,
.checkout-summary__total {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  color: var(--muted);
  font-size: 16px;
  margin-bottom: 18px;
}

.checkout-summary__total {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--stroke);
  font-weight: 800;
}

.checkout-empty {
  text-align: center;
  padding: 60px 20px;
}

.checkout-empty h2 {
  font-size: 28px;
  margin-bottom: 8px;
}

.checkout-empty p {
  color: var(--muted);
  margin-bottom: 22px;
}

.checkout-form-card {
  max-width: 760px;
}

.checkout-form-card p {
  color: var(--muted);
  margin: 8px 0 24px;
}

.checkout-form {
  display: grid;
  gap: 18px;
}

.checkout-form label {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-weight: 700;
}

.checkout-form input,
.checkout-form select,
.checkout-form textarea {
  width: 100%;
  border: 1px solid var(--stroke);
  border-radius: 10px;
  background: var(--white);
  padding: 14px;
  min-height: 50px;
  outline: none;
}

.checkout-form textarea {
  min-height: 120px;
  resize: vertical;
}

.checkout-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.checkout-secure {
  color: var(--muted);
  font-weight: 800;
}

.checkout-payment-box {
  background: #F4F6F8;
  padding: 22px;
  display: grid;
  gap: 14px;
}

.checkout-payment-box div {
  display: flex;
  justify-content: space-between;
}

.checkout-payment-total {
  padding-top: 16px;
  border-top: 1px solid var(--stroke);
  font-size: 22px;
  font-weight: 900;
}

@media (max-width: 980px) {
  .pricing-plan-grid,
  .checkout-grid {
    grid-template-columns: 1fr;
  }

  .checkout-summary {
    order: -1;
  }
}

@media (max-width: 640px) {
  .pricing-hero,
  .pricing-page,
  .checkout-page {
    padding: 56px 0;
  }

  .pricing-products a {
    min-width: 220px;
  }

  .pricing-plan-card,
  .checkout-card,
  .checkout-form-card,
  .checkout-summary__box {
    padding: 22px;
  }

  .checkout-card__head,
  .checkout-order-item,
  .checkout-total-row,
  .checkout-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .checkout-order-item strong {
    text-align: left;
  }

  .checkout-form-row {
    grid-template-columns: 1fr;
  }
}

.payment-state {
  min-height: 72vh;
  display: grid;
  place-items: center;
  padding: 80px 20px;
  background:
    radial-gradient(ellipse 780px 420px at 80% 20%, rgba(43,127,255,.14), transparent 60%),
    linear-gradient(180deg, #EEF3FC 0%, var(--bg) 100%);
}

.payment-state__card {
  width: min(620px, 100%);
  text-align: center;
  background: var(--white);
  border: 1px solid var(--stroke);
  border-radius: var(--radius2);
  box-shadow: var(--shadow);
  padding: clamp(34px, 6vw, 58px);
}

.payment-state__icon {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: 0 auto 22px;
  font-size: 34px;
  font-weight: 900;
}

.payment-state--success .payment-state__icon {
  background: rgba(29,185,84,.12);
  color: var(--green);
}

.payment-state--failed .payment-state__icon {
  background: rgba(224,32,32,.12);
  color: var(--red);
}

.payment-state--cancelled .payment-state__icon {
  background: rgba(253,185,19,.16);
  color: var(--gold);
}

.payment-state h1 {
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.08;
  letter-spacing: -1px;
  margin-bottom: 12px;
}

.payment-state p {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
  max-width: 48ch;
  margin: 0 auto 28px;
}

.payment-state__actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

@media (max-width: 560px) {
  .payment-state__actions {
    flex-direction: column;
  }

  .payment-state__actions .btn {
    width: 100%;
  }
}


.brand {
  display: flex;
  align-items: center;
  text-decoration: none;
}