/* ============================================================
   vildX — NeoBank marketing site
   Clean, chime-inspired, brand-lime accent
   ============================================================ */

:root {
  /* Brand */
  --lime:        #D1FF71;
  --lime-d:      #5A7A1E;
  --mint:        #29EAA6;
  --mint-d:      #0F7A5E;
  --purple:      #8F93F5;
  --purple-d:    #3B40C8;
  --deep-green:  #024D43;
  --ink:         #193233;
  --ink-2:       #4A6868;
  --ink-3:       #7C9591;
  --ink-deep:    #0E1F20;

  --bg:          #FFFFFF;
  --bg-warm:     #FBFDF9;
  --bg-card:     #ECFFF8;
  --bg-card-lo:  #F5FBF9;
  --divider:     #DDE6E4;

  /* Type */
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          Oxygen, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

  /* Layout */
  --max: 1160px;
  --radius: 20px;
  --radius-lg: 32px;
  --shadow-sm: 0 2px 8px rgba(14, 31, 32, 0.06);
  --shadow:    0 20px 60px rgba(14, 31, 32, 0.10);
  --shadow-lg: 0 40px 120px rgba(14, 31, 32, 0.18);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.5;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }

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

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.85);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--divider);
}
.nav .wrap {
  display: flex; align-items: center; justify-content: space-between;
  height: 84px;
}
.brand {
  display: inline-flex; align-items: center;
  line-height: 1;
  transition: transform 260ms cubic-bezier(.22,.61,.36,1);
}
.brand:hover { transform: scale(1.04); }
.brand-logo {
  display: block;
  height: 42px;
  width: auto;
  object-fit: contain;
  /* Make the wordmark render at the fullest weight the SVG allows */
  filter: contrast(1.08);
}
/* Nav brand aligns vertically with the tall nav bar */
.nav .brand { height: 100%; }
.nav .brand-logo { height: 40px; }
/* Footer brand: big + prominent + tight spacing to the tagline below */
.footer .brand { display: inline-block; margin-bottom: 18px; }
.footer .brand-logo { height: 46px; }
.footer .footer-tag { margin-top: 0; }
/* Nudge the mobile brand size down proportionally */
@media (max-width: 700px) {
  .nav .wrap { height: 72px; }
  .nav .brand-logo { height: 34px; }
  .footer .brand-logo { height: 38px; }
}
/* Legacy fallback if the raw spans are still around somewhere */
.brand-mark {
  width: 28px; height: 28px; border-radius: 8px;
  background: linear-gradient(135deg, var(--lime) 0%, var(--mint) 100%);
  display: inline-grid; place-items: center; color: var(--ink);
  font-weight: 900; font-size: 15px; margin-right: 8px;
}
.brand-text { color: var(--ink); font-weight: 800; font-size: 22px; }
.brand-text b { color: var(--lime-d); }

/* In dark surfaces (footer, .section.dark) the dark logo becomes
   invisible. Invert to white via filter. */
.footer .brand-logo,
.section.dark .brand-logo {
  filter: brightness(0) invert(1) contrast(1.1);
}

.nav-links {
  display: flex; gap: 6px; align-items: center;
  font-size: 15px; font-weight: 600;
}
.nav-links a {
  padding: 10px 14px; border-radius: 999px; color: var(--ink);
  transition: background .18s, color .18s;
}
.nav-links a:hover { background: var(--bg-card); color: var(--ink); }
.nav-links a.active { color: var(--lime-d); }

.nav-cta {
  display: flex; gap: 10px; align-items: center;
}

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 22px; border-radius: 999px;
  font-weight: 700; font-size: 15px; letter-spacing: -0.1px;
  border: 1.5px solid transparent; cursor: pointer;
  transition: transform .18s, box-shadow .18s, background .18s, border-color .18s;
}
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: #0f2223; transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn-lime { background: var(--lime); color: var(--ink); }
.btn-lime:hover { background: #C7F961; transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn-ghost { background: transparent; border-color: var(--divider); color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink); }

.menu-btn {
  display: none;
  width: 42px; height: 42px; border-radius: 12px;
  background: var(--bg-card); border: none; cursor: pointer;
  align-items: center; justify-content: center;
}
.menu-btn svg { width: 22px; height: 22px; }

/* Mobile nav */
@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-cta .btn-ghost { display: none; }
  .menu-btn { display: inline-flex; }
  .nav-links.open {
    display: flex; flex-direction: column;
    position: absolute; top: 72px; left: 0; right: 0;
    background: #fff; padding: 16px; gap: 4px;
    border-bottom: 1px solid var(--divider);
    box-shadow: var(--shadow-sm);
  }
  .nav-links.open a { padding: 12px 16px; }
}

/* ============================================================
   HERO — used on the homepage
   ============================================================ */
.hero {
  padding: 60px 0 40px;
  background:
    radial-gradient(1200px 500px at 15% 0%, rgba(209,255,113,.35) 0%, rgba(209,255,113,0) 60%),
    radial-gradient(900px 500px at 90% 10%, rgba(41,234,166,.22) 0%, rgba(41,234,166,0) 60%),
    linear-gradient(180deg, #FBFFF3 0%, #FFFFFF 100%);
}
.hero .wrap {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 40px; align-items: center;
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px;
  background: rgba(255,255,255,.7);
  border: 1px solid var(--divider);
  font-size: 13px; font-weight: 700; color: var(--lime-d);
  letter-spacing: 1px; text-transform: uppercase;
}
.hero-eyebrow .dot {
  width: 8px; height: 8px; background: var(--mint); border-radius: 999px;
  box-shadow: 0 0 0 3px rgba(41,234,166,.22);
}
.hero h1 {
  margin: 22px 0 20px;
  font-size: clamp(40px, 6vw, 68px);
  line-height: 1.02; letter-spacing: -1.5px; font-weight: 800;
}
.hero h1 em { font-style: normal; color: var(--lime-d); }
.hero p.lede {
  font-size: 19px; color: var(--ink-2); max-width: 540px;
  line-height: 1.55; margin: 0 0 28px;
}
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }

.hero-visual { position: relative; }
.hero-visual img.phone {
  /* A subtle border-radius reads as "framed like a phone" without truncating
     any real content — the captured screenshot has generous transparent
     margin around the phone body so a small radius only rounds empty space. */
  width: 100%; max-width: 380px; margin: 0 auto;
  border-radius: 22px; display: block; box-shadow: none;
  filter: drop-shadow(0 40px 80px rgba(14,31,32,0.30)) drop-shadow(0 12px 24px rgba(14,31,32,0.14));
}
.hero-badge {
  position: absolute; background: #fff; border: 1px solid var(--divider);
  border-radius: 18px; box-shadow: var(--shadow-sm);
  padding: 12px 16px; font-size: 13px; font-weight: 700;
  display: inline-flex; align-items: center; gap: 10px;
}
.hero-badge .n { font-size: 22px; color: var(--lime-d); font-weight: 800; }
.hero-badge.top    { top: 30px; left: -8px; }
.hero-badge.right  { top: 130px; right: -8px; }
.hero-badge.bottom { bottom: 30px; left: 40px; }

@media (max-width: 900px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .hero-visual { order: -1; }
  .hero-visual img.phone { max-width: 280px; }
  /* Reposition badges so they hover around the phone rather than covering it */
  .hero-badge {
    padding: 8px 12px; font-size: 12px; border-radius: 14px;
  }
  .hero-badge .n { font-size: 17px; }
  .hero-badge.top    { top: 20px; left: 4px; }
  .hero-badge.right  { top: 20px; right: 4px; left: auto; }
  .hero-badge.bottom { bottom: 20px; left: 50%; transform: translateX(-50%); }
}
@media (max-width: 460px) {
  .hero { padding: 40px 0 24px; }
  .hero-visual img.phone { max-width: 240px; }
  .hero h1 { font-size: 40px; line-height: 1.05; }
  .hero p.lede { font-size: 16px; }
  /* On very small screens, drop the badges entirely — they crowd the phone */
  .hero-badge { display: none; }
}

/* ============================================================
   SOCIAL PROOF STRIP
   ============================================================ */
.proof {
  background: var(--ink); color: #fff;
  padding: 22px 0;
}
.proof .wrap {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
  align-items: center;
}
.proof .item {
  display: flex; align-items: center; gap: 12px;
  font-size: 14px; color: rgba(255,255,255,.72);
}
.proof .item strong { color: var(--lime); font-size: 22px; font-weight: 800; }
@media (max-width: 900px) {
  .proof .wrap { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   FEATURE SECTIONS (alternating text + image)
   ============================================================ */
.section {
  padding: 96px 0;
  border-top: 1px solid var(--divider);
  background: var(--bg);
}
.section.warm { background: var(--bg-warm); }
.section.dark { background: var(--ink-deep); color: #fff; }
.section.dark h2 { color: #fff; }
.section.dark p { color: rgba(255,255,255,0.78); }
.section.lime { background: var(--lime); }
.section-tag {
  display: inline-block;
  font-size: 13px; font-weight: 800; letter-spacing: 1.5px;
  color: var(--lime-d); text-transform: uppercase; margin-bottom: 14px;
}
.section h2 {
  font-size: clamp(32px, 5vw, 52px); line-height: 1.05;
  letter-spacing: -1px; font-weight: 800; margin: 0 0 20px;
}
.section p.sub {
  font-size: 18px; color: var(--ink-2); max-width: 620px;
  line-height: 1.6; margin: 0 0 32px;
}
.section .split {
  display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center;
}
.section .split.reverse { direction: rtl; }
.section .split.reverse > * { direction: ltr; }

.section .bullets { list-style: none; padding: 0; margin: 22px 0 32px; }
.section .bullets li {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 12px 0; border-bottom: 1px solid var(--divider);
  font-size: 17px; color: var(--ink);
}
.section .bullets li:last-child { border-bottom: 0; }
.section .bullets li svg {
  flex: 0 0 24px; width: 24px; height: 24px;
  color: var(--mint-d);
}
.section .bullets li b { color: var(--ink); }

.hero-mock {
  position: relative;
  padding: 40px 40px 30px; border-radius: var(--radius-lg);
  background: linear-gradient(160deg, #F6FFED 0%, #E7FDF3 100%);
  overflow: hidden;
}
.hero-mock::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(400px 400px at 90% 10%, rgba(41,234,166,.32) 0%, transparent 60%),
    radial-gradient(500px 500px at 10% 90%, rgba(209,255,113,.28) 0%, transparent 60%);
  z-index: 0;
}
/* Subtle rounding to read as "phone-frame" without clipping content.
   Radius (22px) is well under the phone bezel's own radius, so only the
   outer transparent PNG margins get clipped — nothing on screen is lost. */
.hero-mock img {
  position: relative; z-index: 1; margin: 0 auto; max-width: 320px;
  border-radius: 22px; box-shadow: none;
  filter: drop-shadow(0 30px 60px rgba(14,31,32,0.28)) drop-shadow(0 10px 20px rgba(14,31,32,0.10));
}

.section.dark .hero-mock {
  background: linear-gradient(160deg, #0E1F20 0%, #17332F 100%);
}

@media (max-width: 900px) {
  .section .split, .section .split.reverse { grid-template-columns: 1fr; direction: ltr; }
}

/* ============================================================
   FEATURE CARD GRID (used on homepage)
   ============================================================ */
.cards {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  margin: 32px 0;
}
.cards.four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .cards, .cards.four { grid-template-columns: 1fr; }
}
.card {
  background: var(--bg-card); border-radius: var(--radius);
  padding: 26px; border: 1px solid var(--divider);
  transition: transform .18s, box-shadow .18s;
}
.card:hover { box-shadow: var(--shadow); }
.card .icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: #fff; border: 1px solid var(--divider);
  display: inline-grid; place-items: center; margin-bottom: 16px;
}
.card .icon svg { width: 24px; height: 24px; color: var(--lime-d); }
.card h3 { font-size: 20px; margin: 0 0 8px; letter-spacing: -0.3px; }
.card p { font-size: 14.5px; color: var(--ink-2); margin: 0; line-height: 1.55; }
.card.dark { background: var(--ink); color: #fff; border-color: transparent; }
.card.dark h3 { color: #fff; }
.card.dark p { color: rgba(255,255,255,.72); }
.card.dark .icon { background: rgba(255,255,255,.08); border-color: transparent; }
.card.dark .icon svg { color: var(--lime); }

/* Big-stat card variant */
.stat {
  background: var(--bg-card); border-radius: var(--radius);
  padding: 26px 24px; border: 1px solid var(--divider);
}
.stat .big {
  font-size: 44px; font-weight: 800; letter-spacing: -1.5px;
  color: var(--lime-d);
  white-space: nowrap;   /* keep short tokens on one line */
}
@media (max-width: 700px) {
  .stat .big { font-size: 36px; }
}
.stat.mint .big   { color: var(--mint-d); }
.stat.purple .big { color: var(--purple-d); }
.stat .label { font-size: 13px; font-weight: 700; letter-spacing: 1px; color: var(--ink); text-transform: uppercase; margin-top: 6px; }
.stat .sub { color: var(--ink-2); font-size: 14px; margin-top: 8px; }

/* ============================================================
   PAGE HERO — smaller for interior pages
   ============================================================ */
.page-hero {
  padding: 80px 0 40px;
  background:
    radial-gradient(1000px 300px at 20% 0%, rgba(209,255,113,.30) 0%, transparent 60%),
    linear-gradient(180deg, #FBFFF3 0%, #FFFFFF 100%);
  text-align: center;
}
.page-hero h1 {
  font-size: clamp(38px, 5vw, 60px);
  line-height: 1.05; letter-spacing: -1.5px; font-weight: 800;
  margin: 16px 0 16px;
}
.page-hero p {
  font-size: 20px; color: var(--ink-2); max-width: 640px;
  margin: 0 auto 24px; line-height: 1.55;
}

/* ============================================================
   CTA STRIP (bottom of pages)
   ============================================================ */
.cta {
  background: var(--ink); color: #fff;
  padding: 100px 24px;
  border-radius: var(--radius-lg);
  margin: 60px auto;
  max-width: var(--max);
  text-align: center;
  position: relative; overflow: hidden;
}
.cta::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(700px 350px at 100% 100%, rgba(209,255,113,.20) 0%, transparent 60%),
    radial-gradient(700px 350px at 0% 0%, rgba(41,234,166,.15) 0%, transparent 60%);
}
.cta * { position: relative; z-index: 1; }
.cta h2 {
  font-size: clamp(32px, 4.5vw, 52px); line-height: 1.05;
  letter-spacing: -1px; font-weight: 800; margin: 0 0 16px;
}
.cta p { color: rgba(255,255,255,0.78); font-size: 18px; margin: 0 0 24px; }
.cta .badges {
  display: flex; gap: 20px; justify-content: center; align-items: center;
  flex-wrap: wrap; margin-top: 20px;
  color: rgba(255,255,255,0.6); font-size: 14px;
}

/* ============================================================
   FAQ
   ============================================================ */
.faq { max-width: 800px; margin: 0 auto; }
.faq-item {
  border: 1px solid var(--divider); border-radius: 16px;
  padding: 18px 22px; margin-bottom: 12px;
  background: var(--bg-warm);
  cursor: pointer;
  transition: background .2s;
}
.faq-item:hover { background: var(--bg-card-lo); }
.faq-item summary {
  display: flex; justify-content: space-between; align-items: center;
  font-weight: 700; font-size: 17px; list-style: none;
  cursor: pointer;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; font-size: 26px; color: var(--lime-d); font-weight: 400;
  transition: transform .2s;
}
.faq-item[open] summary::after { content: "×"; }
.faq-item p {
  color: var(--ink-2); font-size: 15.5px;
  margin: 12px 0 0; line-height: 1.6;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: var(--ink-deep); color: rgba(255,255,255,0.72);
  padding: 60px 0 32px;
}
.footer .wrap {
  display: grid; grid-template-columns: 1.8fr 1fr 1fr 1fr 1fr; gap: 32px;
}
@media (max-width: 900px) {
  .footer .wrap { grid-template-columns: 1fr 1fr; gap: 28px; }
}
/* Highlighted Substack subscribe button */
.btn-substack {
  background: #FF6719;              /* Substack orange */
  color: #fff !important;
  box-shadow: 0 0 0 0 rgba(255,103,25,0.45);
  animation: substackPulse 2.8s ease-in-out infinite;
}
.btn-substack:hover {
  background: #E4550C;
  color: #fff !important;
}
.footer a.btn-substack { color: #fff; background: #FF6719; }
.footer a.btn-substack:hover { color: #fff; background: #E4550C; }
@keyframes substackPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,103,25,0.45); }
  50%      { box-shadow: 0 0 0 12px rgba(255,103,25,0); }
}

/* Small SOON chip used in nav + footer */
.soon-tag {
  font-size: 10px; background: var(--ink-3); color: #fff;
  padding: 2px 6px; border-radius: 6px; margin-left: 2px;
}
.footer .brand-text { color: #fff; }
.footer h4 {
  color: var(--lime); font-size: 12px; letter-spacing: 1.5px;
  text-transform: uppercase; margin: 0 0 16px;
}
.footer a { display: block; padding: 4px 0; color: rgba(255,255,255,0.78); font-size: 14.5px; }
.footer a:hover { color: var(--lime); }
.footer-cta {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 2px;
}
.footer a.btn { display: inline-block; padding: 11px 20px; font-size: 14.5px; }
.footer a.btn-lime { color: var(--ink); background: var(--lime); }
.footer a.btn-lime:hover { color: var(--ink); background: #C7F961; }
.footer a.btn-primary { color: #fff; background: var(--ink); }
.footer a.btn-primary:hover { color: #fff; background: #0f2223; }
.footer-tag { max-width: 340px; font-size: 14.5px; line-height: 1.55; margin: 12px 0 20px; }
.footer-legal {
  border-top: 1px solid rgba(255,255,255,.08);
  margin-top: 40px; padding-top: 24px;
  font-size: 12.5px; color: rgba(255,255,255,.5);
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 12px;
}
/* .footer .wrap sets a 5-column grid and outranks the rule above, which would
   squeeze the legal row into the first two columns. Match that specificity so
   the flex row wins. Same approach as .footer .wrap.footer-substack below. */
.footer .wrap.footer-legal {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 12px 32px;
}
@media (max-width: 900px) {
  .footer .wrap { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   UTIL
   ============================================================ */
.text-center { text-align: center; }
.mt-sm { margin-top: 12px; }
.mt-md { margin-top: 24px; }
.mt-lg { margin-top: 48px; }
.chip {
  display: inline-block; padding: 4px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.5px;
  background: var(--lime); color: var(--ink);
}
.chip.mint  { background: var(--mint); }
.chip.purple{ background: var(--purple); color: #fff; }

/* ============================================================
   MOBILE POLISH — tighten paddings + type on small screens
   ============================================================ */
@media (max-width: 700px) {
  body { font-size: 16px; }
  .wrap { padding: 0 18px; }
  .section { padding: 60px 0; }
  .section h2 { font-size: clamp(28px, 8vw, 40px); }
  .section p.sub { font-size: 16px; }
  .page-hero { padding: 56px 0 32px; }
  .page-hero h1 { font-size: clamp(34px, 9vw, 48px); }
  .page-hero p { font-size: 17px; }
  .cta { padding: 60px 22px; margin: 30px 12px; border-radius: 22px; }
  .cta h2 { font-size: clamp(28px, 8vw, 40px); }
  .cta p { font-size: 16px; }
  .proof .wrap { grid-template-columns: 1fr 1fr; gap: 14px; }
  .proof .item { flex-direction: column; align-items: flex-start; gap: 2px; font-size: 12.5px; }
  .proof .item strong { font-size: 19px; }
  /* Card grids collapse cleanly */
  .cards.four { grid-template-columns: 1fr; }
  /* Section-tag chips wrap nicely */
  .section-tag { font-size: 12px; }
  /* Hero-mock inner phones */
  .hero-mock { padding: 20px 22px; border-radius: 24px; }
  .hero-mock img { max-width: 240px; }
  /* Split sections collapse — image sits above copy */
  .section .split > *:first-child { order: 2; }
  .section .split > *:last-child { order: 1; }
  .section .split.reverse > *:first-child { order: 2; }
  .section .split.reverse > *:last-child { order: 1; }
  /* Large tables become horizontally scrollable */
  .compare-table { font-size: 13px; }
  .compare-table th, .compare-table td { padding: 10px 12px; }
  /* Yield vault-card-big rate size */
  .vault-card-big .rate { font-size: 44px; }
  /* Yield 5-engines layer padding */
  .arch-layer { padding: 16px 18px; }
  .arch-visual { padding: 24px 18px; }
  /* Legal pages */
  .legal { padding: 8px 18px 80px; }
  .legal h1 { font-size: clamp(30px, 8vw, 42px); }
  .legal h2 { font-size: 22px; margin: 40px 0 12px; padding-top: 20px; }
  /* Footer stack */
  .footer .wrap { grid-template-columns: 1fr; gap: 28px; }
  .footer-legal { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 460px) {
  .btn { padding: 11px 18px; font-size: 14.5px; }
  .nav .brand-logo { height: 30px; }
  .footer .brand-logo { height: 34px; }
  .brand-mark { width: 26px; height: 26px; font-size: 13px; }
  .nav .wrap { height: 64px; }
}

/* Horizontal scroll safety for any wide element */
/* overflow-x: clip prevents horizontal scroll without creating a scroll
   container — so position:sticky inside .stack still works. */
html, body { overflow-x: clip; max-width: 100%; }

/* ============================================================
   LEGAL PAGES
   ============================================================ */
.legal {
  max-width: 880px; margin: 0 auto; padding: 24px 24px 100px;
}
.legal .updated {
  font-size: 13px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--ink-3); font-weight: 700; margin-bottom: 18px;
}
.legal h1 {
  font-size: clamp(38px, 5vw, 56px); line-height: 1.05; letter-spacing: -1.5px;
  font-weight: 800; margin: 0 0 20px;
}
.legal .lede {
  font-size: 18px; color: var(--ink-2); line-height: 1.55; margin: 0 0 12px;
}
.legal .note {
  background: linear-gradient(160deg, #F6FFED 0%, #ECFFF8 100%);
  border: 1px solid var(--divider); border-radius: 16px;
  padding: 20px 24px; margin: 28px 0;
  font-size: 15px; color: var(--ink); line-height: 1.55;
}
.legal .note b { color: var(--lime-d); }
.legal h2 {
  font-size: 26px; line-height: 1.15; letter-spacing: -0.5px;
  font-weight: 800; margin: 56px 0 14px; color: var(--ink);
  padding-top: 24px; border-top: 1px solid var(--divider);
}
.legal h3 {
  font-size: 16px; letter-spacing: 1px; text-transform: uppercase;
  font-weight: 800; color: var(--lime-d); margin: 32px 0 10px;
}
.legal p, .legal li {
  font-size: 15.5px; color: var(--ink-2); line-height: 1.75; margin: 0 0 12px;
}
.legal ul { padding-left: 22px; margin: 8px 0 16px; }
.legal li { margin-bottom: 6px; }
.legal b, .legal strong { color: var(--ink); font-weight: 700; }
.legal a { color: var(--lime-d); font-weight: 600; }
.legal a:hover { text-decoration: underline; }
.legal .toc {
  background: var(--bg-warm); border: 1px solid var(--divider);
  border-radius: 16px; padding: 22px 24px; margin: 28px 0 44px;
}
.legal .toc h4 {
  font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase;
  font-weight: 800; color: var(--ink-3); margin: 0 0 12px;
}
.legal .toc ol {
  columns: 2; column-gap: 32px; padding-left: 22px; margin: 0;
}
.legal .toc li { font-size: 14px; margin-bottom: 4px; break-inside: avoid; }
.legal .toc a { color: var(--ink); font-weight: 500; }
@media (max-width: 700px) {
  .legal .toc ol { columns: 1; }
}

/* ============================================================
   Animations — Fasset-style reveals, marquee, magnetic hover
   ============================================================ */

/* Scroll-triggered reveal (paired with reveal.js) */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 900ms cubic-bezier(.22,.61,.36,1),
              transform 900ms cubic-bezier(.22,.61,.36,1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.reveal.in-view { opacity: 1; transform: translateY(0); }

/* ---- WORD-BY-WORD headline reveal (Fasset signature) ------------ */
.hero h1 .word,
.page-hero h1 .word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  line-height: 1.12;              /* room for descenders (y, g, p, q) */
  padding: 0.08em 0.03em 0.22em;  /* horiz for italic slant + vertical for descenders */
  margin: 0 -0.03em;              /* undo the horizontal padding in flow */
}
.hero h1 .word-inner,
.page-hero h1 .word-inner {
  display: inline-block;
  transform: translateY(105%) rotate(6deg);
  transition: transform 900ms cubic-bezier(.22,.9,.28,1);
  transition-delay: var(--word-delay, 0ms);
  will-change: transform;
}
.hero h1.words-in .word-inner,
.page-hero h1.words-in .word-inner {
  transform: translateY(0) rotate(0deg);
}
/* Once revealed, drop the clip so italic tails and descenders are never cut */
.hero h1.words-in .word,
.page-hero h1.words-in .word {
  overflow: visible;
}
/* Keep the on-load animation from clashing with word reveal */
.hero h1, .page-hero h1 { animation: none !important; }

/* ---- INFINITE MARQUEE (proof strip) ----------------------------- */
.proof .wrap.marquee-mounted {
  overflow: hidden;
  padding: 24px 0;
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  display: block;
}
.proof .marquee-track {
  display: flex;
  gap: 44px;
  width: max-content;
  animation: marqueeSlide 32s linear infinite;
}
.proof .marquee-track > .item {
  flex: 0 0 auto;
  padding: 0 8px;
  border: 0;
}
@keyframes marqueeSlide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.proof .wrap.marquee-mounted:hover .marquee-track { animation-play-state: paused; }

/* ---- SCOPED card roll-over --------------------------------------
   Only the .stack wrapper on the home page uses this: sections 2–5
   (Card / Pay / Borrow / Agents) stick at top and roll over each
   other as you scroll. Every other section on every other page is
   unchanged. */
.stack {
  position: relative;
  isolation: isolate;
}
.stack .stack-card {
  position: sticky;
  top: 0;
  border-top-left-radius: 40px;
  border-top-right-radius: 40px;
  overflow: hidden;
  box-shadow: 0 -24px 50px -18px rgba(14,31,32,0.22);
}
/* Later cards paint on top of earlier ones as they slide up */
.stack .stack-card:nth-of-type(1) { z-index: 1; }
.stack .stack-card:nth-of-type(2) { z-index: 2; }
.stack .stack-card:nth-of-type(3) { z-index: 3; }
.stack .stack-card:nth-of-type(4) { z-index: 4; }
.stack .stack-card:nth-of-type(5) { z-index: 5; }

/* Kill the default border-top divider — the rounded lip replaces it */
.stack .stack-card { border-top: 0; }

/* Mobile — drop the sticky effect; sections just stack normally */
@media (max-width: 900px) {
  .stack .stack-card {
    position: relative;
    border-radius: 28px 28px 0 0;
    box-shadow: 0 -18px 36px -18px rgba(14,31,32,0.18);
  }
}

/* ---- MAGNETIC card hover ---------------------------------------- */
.card, .stat, .hero-mock {
  transform: translate3d(var(--magnet-x, 0), var(--magnet-y, 0), 0)
             rotateX(var(--magnet-rx, 0deg))
             rotateY(var(--magnet-ry, 0deg));
  transition: transform 260ms cubic-bezier(.22,.61,.36,1),
              box-shadow 380ms cubic-bezier(.22,.61,.36,1),
              border-color 260ms;
  transform-style: preserve-3d;
  will-change: transform;
}
.card:hover, .stat:hover, .hero-mock:hover {
  box-shadow: 0 26px 60px rgba(14,31,32,0.12),
              0 10px 22px rgba(14,31,32,0.06);
}

/* Hero headline — extra polish */
.hero h1.reveal { transform: translateY(32px); }

/* On-load entry animations (no JS) */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.nav { animation: fadeIn 500ms both; }
.nav .brand { animation: fadeUp 550ms 60ms both; }
.nav .nav-links a { animation: fadeUp 600ms both; }
.nav .nav-links a:nth-child(1) { animation-delay: 80ms; }
.nav .nav-links a:nth-child(2) { animation-delay: 130ms; }
.nav .nav-links a:nth-child(3) { animation-delay: 180ms; }
.nav .nav-links a:nth-child(4) { animation-delay: 230ms; }
.nav .nav-links a:nth-child(5) { animation-delay: 280ms; }
.nav .nav-links a:nth-child(6) { animation-delay: 330ms; }
.nav .nav-links a:nth-child(7) { animation-delay: 380ms; }
.nav .nav-cta { animation: fadeUp 600ms 420ms both; }

.hero h1, .page-hero h1 { animation: fadeUp 800ms 200ms both; }
.hero p, .page-hero p { animation: fadeUp 800ms 320ms both; }
.hero-eyebrow { animation: fadeIn 700ms 120ms both; }

/* Phone screenshots — subtle float */
@keyframes phoneFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-8px) rotate(0.35deg); }
}
.hero-visual img.phone,
.hero-mock img {
  animation: phoneFloat 6.5s ease-in-out infinite;
  transform-origin: center;
}

/* Second phone drifts slightly out of phase */
.hero-visual img.phone:nth-of-type(2),
.hero-mock img:nth-of-type(2) {
  animation-delay: -3.2s;
  animation-duration: 7.2s;
}

/* Proof strip — infinite marquee on wide viewport if enough items */
@keyframes proofSlide {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}
.proof .wrap {
  overflow: hidden;
  position: relative;
}
.proof .item {
  transition: transform 400ms cubic-bezier(.22,.61,.36,1),
              color 260ms;
}
.proof .item:hover { transform: translateY(-2px) scale(1.03); color: var(--ink-deep); }

/* Card hover — lift + soft glow */
.faq-item {
  transition: border-color 260ms, background 260ms;
}
.faq-item:hover { border-color: var(--lime); }

/* Big stat numbers subtly pulse-glow on hover */
.stat .big {
  transition: transform 300ms, letter-spacing 300ms, color 260ms;
  display: inline-block;
}
.stat:hover .big {
  transform: scale(1.06);
  letter-spacing: -1.2px;
}

/* Buttons — hover lift + shine sweep */
.btn {
  position: relative;
  overflow: hidden;
  transition: transform 260ms cubic-bezier(.22,.61,.36,1),
              box-shadow 260ms cubic-bezier(.22,.61,.36,1),
              background 260ms;
}
.btn::after {
  content: '';
  position: absolute;
  top: 0; left: -80%;
  width: 60%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: skewX(-20deg);
  transition: left 700ms cubic-bezier(.22,.61,.36,1);
  pointer-events: none;
}
.btn:hover::after { left: 130%; }
.btn:hover { transform: translateY(-2px); }

/* Gentle pulse ring behind primary CTAs — hero and page-hero */
.page-hero .btn-primary,
.hero .btn-primary,
.section.lime .btn-primary {
  animation: ctaPulse 3.2s ease-in-out infinite;
}
@keyframes ctaPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(25,50,51,0.35); }
  50%      { box-shadow: 0 0 0 14px rgba(25,50,51,0); }
}

/* Nav links — animated underline */
.nav-links a {
  position: relative;
  transition: color 260ms;
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; bottom: -4px;
  height: 2px; width: 0;
  background: var(--lime-d);
  transition: width 320ms cubic-bezier(.22,.61,.36,1);
}
.nav-links a:hover::after { width: 100%; }

/* Clickable engine rows (yield page) */
a.arch-layer {
  text-decoration: none; color: inherit; cursor: pointer;
  transition: background 260ms, transform 260ms, border-color 260ms;
}
a.arch-layer:hover {
  background: rgba(255,255,255,0.10);
  transform: translateX(6px);
}
.arch-layer .learn-more {
  display: inline-block; margin-left: 8px; white-space: nowrap;
  color: var(--lime); font-weight: 800; font-size: 13.5px;
}
.arch-layer.mint .learn-more { color: var(--mint); }
.arch-layer.purple .learn-more { color: var(--purple); }
a.arch-layer:hover .learn-more { text-decoration: underline; }

/* Small BETA pill in the hero eyebrow */
.beta-pill {
  display: inline-block;
  background: var(--lime); color: var(--ink);
  padding: 1px 8px; border-radius: 999px;
  font-size: 10px; font-weight: 900;
  letter-spacing: 1.4px;
  margin-left: 8px;
  vertical-align: middle;
  line-height: 1.5;
}

/* Eyebrow live-dot pulse (shimmer removed — kept text solid & readable) */
.hero-eyebrow .dot {
  animation: dotPulse 1.6s ease-in-out infinite;
}
@keyframes dotPulse {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(1.6); opacity: 0.6; }
}

/* FAQ chevrons rotate on open */
.faq-item summary { transition: color 260ms; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item[open] summary { color: var(--lime-d); }

/* Legal page — smoother anchor scroll */
html { scroll-behavior: smooth; }

/* Respect reduced motion — kill animations that could feel busy */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .hero-visual img.phone, .hero-mock img { animation: none; }
}

/* ---- Footer social icons ---- */
.footer-social { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.footer .footer-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; padding: 0; border-radius: 50%;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16);
  color: rgba(255,255,255,0.85);
  transition: background 220ms ease, color 220ms ease, border-color 220ms ease, transform 220ms ease;
}
.footer .footer-social a:hover { background: var(--lime); border-color: var(--lime); color: var(--ink); transform: translateY(-3px); }
.footer-social svg { width: 17px; height: 17px; display: block; }

/* ---- Mobile footer: center everything ---- */
@media (max-width: 700px) {
  .footer .wrap > div { text-align: center; }
  .footer .brand { margin-left: auto; margin-right: auto; }
  .footer-tag { margin-left: auto; margin-right: auto; }
  .footer-cta { justify-content: center; }
  .footer-social { justify-content: center; }
  .footer-legal { flex-direction: column; align-items: center; text-align: center; }
}

/* ---- Mobile footer: bigger logo ---- */
@media (max-width: 700px) {
  .footer .brand-logo { height: 52px; }
}

/* ---- Home hero 3D artwork ---- */
.hero-mock.hero-3d { padding: 0; background: none; }
.hero-mock.hero-3d::before { display: none; }
.hero-mock.hero-3d img {
  max-width: 100%; width: 100%; display: block;
  border-radius: var(--radius-lg);
  filter: none;
  box-shadow: 0 30px 60px rgba(14,31,32,0.30), 0 10px 20px rgba(14,31,32,0.12);
}

/* ---- Hero 3D artwork (home) ---- */
.hero-visual img.phone.art {
  max-width: 100%; border-radius: 24px;
  filter: none;
  box-shadow: 0 40px 80px rgba(14,31,32,0.32), 0 12px 24px rgba(14,31,32,0.14);
}
.hero-visual img.phone.art + .hero-badge { /* no-op, badges positioned as before */ }
@media (max-width: 900px) {
  .hero-visual img.phone.art { max-width: 100%; }
}

/* ============================================================
   DARK LANDING HERO (home) — artwork blends into the section
   ============================================================ */
.hero.hero-dark {
  padding: 40px 0 40px;
  background:
    radial-gradient(1000px 640px at 80% 20%, rgba(209,255,113,0.10) 0%, transparent 62%),
    radial-gradient(800px 560px at 8% 90%, rgba(41,234,166,0.09) 0%, transparent 60%),
    #060F12;
}
.hero.hero-dark h1 { color: #fff; }
.hero.hero-dark h1 em { color: var(--lime); }
.hero.hero-dark .lede { color: rgba(255,255,255,0.78); }
.hero.hero-dark .lede b { color: #fff; }
.hero.hero-dark .hero-eyebrow {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.16);
  color: rgba(255,255,255,0.88);
}
/* CTA hierarchy on dark: lime primary, glass secondary, outline ghost */
.hero.hero-dark .hero-actions .btn-primary { background: var(--lime); color: var(--ink); }
.hero.hero-dark .hero-actions .btn-primary:hover { background: #C7F961; color: var(--ink); }
.hero.hero-dark .hero-actions .btn-lime {
  background: rgba(255,255,255,0.08); color: #fff;
  border: 1px solid rgba(255,255,255,0.22);
}
.hero.hero-dark .hero-actions .btn-lime:hover { background: rgba(255,255,255,0.14); color: #fff; }
.hero.hero-dark .hero-actions .btn-ghost { color: #fff; border-color: rgba(255,255,255,0.30); background: transparent; }
.hero.hero-dark .hero-actions .btn-ghost:hover { border-color: #fff; color: #fff; }
/* Artwork (portrait render): no frame — feathered mask dissolves all four edges into the dark section */
.hero.hero-dark .hero-visual img.phone.art {
  border-radius: 0; box-shadow: none; filter: none;
  width: 100%; max-width: 640px; margin: -48px auto -40px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%),
                      linear-gradient(180deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%),
              linear-gradient(180deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
  mask-composite: intersect;
}
@media (max-width: 900px) {
  .hero.hero-dark .hero-visual img.phone.art { max-width: 300px; margin: -18px auto -6px; }
  .hero.hero-dark { padding: 10px 0 22px; }
  .hero.hero-dark .hero-copy { text-align: center; }
  .hero.hero-dark h1 { font-size: clamp(30px, 8.6vw, 38px); margin: 10px 0 8px; }
  .hero.hero-dark .lede { font-size: 14.5px; margin: 0 auto 12px; max-width: 350px; }
  .hero.hero-dark .hero-eyebrow { font-size: 10.5px; padding: 5px 10px; }
  .hero.hero-dark .hero-actions { gap: 8px; justify-content: center; }
  .hero.hero-dark .hero-actions .btn { padding: 9px 14px; font-size: 13px; }
  /* Compact ribbon so it fits the first mobile screen */
  .proof { padding: 10px 0; }
  .proof .wrap { gap: 4px 14px; }
  .proof .item { font-size: 11px; gap: 5px; }
  .proof .item strong { font-size: 15px; }
}
/* Fill the laptop viewport: hero + nav = 100vh */
@media (min-width: 901px) {
  .hero.hero-dark { min-height: calc(100vh - 72px); display: flex; align-items: center; }
  .hero.hero-dark .wrap { width: 100%; }
}

/* Stat badges: glass on dark */
.hero.hero-dark .hero-badge {
  background: rgba(9,20,22,0.74);
  border-color: rgba(209,255,113,0.30);
  color: #fff;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 14px 34px rgba(0,0,0,0.45);
}
.hero.hero-dark .hero-badge .n { color: var(--lime); }

/* ---- Dark nav (home) — transparent over the hero, solid once scrolled ---- */
.nav.nav-dark {
  background: transparent; border-bottom: 1px solid transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  transition: background .28s ease, border-color .28s ease;
}
.nav.nav-dark.scrolled {
  background: rgba(6,15,18,0.90); border-bottom: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px);
}
/* Hero slides underneath the transparent nav */
.hero.hero-dark { margin-top: -84px; padding-top: 96px; }
@media (max-width: 700px) {
  .hero.hero-dark { margin-top: -72px; padding-top: 80px; }
}
.nav.nav-dark .nav-links a { color: rgba(255,255,255,0.85); }
.nav.nav-dark .nav-links a:hover { background: rgba(255,255,255,0.08); color: #fff; }
.nav.nav-dark .nav-links a.active { color: var(--lime); }
.nav.nav-dark .nav-cta .btn-primary { background: var(--lime); color: var(--ink); }
.nav.nav-dark .nav-cta .btn-primary:hover { background: #C7F961; color: var(--ink); }
.nav.nav-dark .menu-btn { background: rgba(255,255,255,0.10); color: #fff; }
@media (max-width: 900px) {
  .nav.nav-dark .nav-links.open { background: #071113; border-bottom: 1px solid rgba(255,255,255,0.08); box-shadow: 0 18px 36px rgba(0,0,0,0.5); }
}

/* ---- Footer Substack band: Learn DeFi + embed ---- */
.footer .wrap.footer-substack {
  display: grid; grid-template-columns: 1.2fr auto; gap: 44px; align-items: center;
  padding-bottom: 44px; margin-bottom: 44px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer-substack h3 { font-size: 30px; font-weight: 800; letter-spacing: -0.6px; margin: 0 0 10px; color: #fff; }
.footer-substack h3 em { font-style: italic; color: var(--lime); }
.footer-substack p { font-size: 15px; color: rgba(255,255,255,0.72); line-height: 1.6; margin: 0; max-width: 500px; }
.footer-substack p b { color: #fff; }
.fs-embed { border-radius: 18px; overflow: hidden; background: #fff; line-height: 0; max-width: 100%; }
.fs-embed iframe { display: block; max-width: 100%; }
@media (max-width: 900px) {
  .footer .wrap.footer-substack { grid-template-columns: 1fr; gap: 24px; }
  .fs-embed { justify-self: start; }
}
@media (max-width: 700px) {
  .footer .wrap.footer-substack { text-align: center; padding-bottom: 32px; margin-bottom: 32px; }
  .footer-substack p { margin: 0 auto; }
  .fs-embed { justify-self: center; width: 100%; max-width: 480px; }
  .fs-embed iframe { width: 100%; }
}

/* ---- Footer subscribe: plain email field (no Substack branding) ---- */
.fs-embed-form { display: flex; flex-direction: column; gap: 10px; min-width: 430px; }
.fs-form { display: flex; gap: 10px; }
.fs-form input {
  flex: 1; padding: 14px 18px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.07); color: #fff;
  font-size: 15px; font-family: var(--sans); outline: none;
  transition: border-color .2s, background .2s;
}
.fs-form input::placeholder { color: rgba(255,255,255,0.45); }
.fs-form input:focus { border-color: var(--lime); background: rgba(255,255,255,0.10); }
.fs-form button {
  padding: 14px 28px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--lime); color: var(--ink);
  font-weight: 800; font-size: 15px; font-family: var(--sans); letter-spacing: -0.1px;
  transition: background .2s, transform .2s;
}
.fs-form button:hover { background: #C7F961; transform: translateY(-1px); }
.fs-note { font-size: 12.5px; color: rgba(255,255,255,0.5); }
@media (max-width: 900px) { .fs-embed-form { min-width: 0; max-width: 430px; } }
@media (max-width: 700px) {
  .fs-embed-form { margin: 0 auto; width: 100%; }
  .fs-form { flex-direction: column; }
  .fs-note { text-align: center; }
}

/* ---- Footer band: Read about DeFi link ---- */
.footer a.fs-read {
  display: inline-block; margin-top: 14px; padding: 0;
  color: var(--lime); font-weight: 800; font-size: 15px;
}
.footer a.fs-read:hover { color: #C7F961; text-decoration: underline; }

/* ---- Read about DeFi: highlighted pill ---- */
.footer a.fs-read {
  display: inline-flex; align-items: center;
  margin-top: 18px; padding: 12px 24px; border-radius: 999px;
  background: rgba(209,255,113,0.12);
  border: 1.5px solid var(--lime);
  color: var(--lime); font-weight: 800; font-size: 15px;
  animation: fsReadPulse 2.6s ease-in-out infinite;
  transition: background .2s, color .2s, transform .2s;
}
.footer a.fs-read:hover {
  background: var(--lime); color: var(--ink);
  text-decoration: none; transform: translateY(-2px);
  animation: none;
}
@keyframes fsReadPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(209,255,113,0.35); }
  50%      { box-shadow: 0 0 0 12px rgba(209,255,113,0); }
}

/* ---- Read about DeFi: Substack-orange variant ---- */
.footer a.fs-read {
  background: rgba(255,103,25,0.14);
  border-color: #FF6719;
  color: #FF8A4D;
  animation: fsReadPulseOrange 2.6s ease-in-out infinite;
}
.footer a.fs-read:hover {
  background: #FF6719; color: #fff;
  animation: none;
}
@keyframes fsReadPulseOrange {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,103,25,0.40); }
  50%      { box-shadow: 0 0 0 12px rgba(255,103,25,0); }
}

/* Sixth stack card (Stocks) */
.stack .stack-card:nth-of-type(6) { z-index: 6; }

/* ==========================================================
   DEFI FOR THE CURIOUS — top announcement bar
   Sits above the sticky nav on every page. Links to /learn/.
   ========================================================== */
.dfc-bar{
  display:flex; align-items:center; justify-content:center;
  gap:14px; flex-wrap:wrap;
  background:var(--lime); color:var(--ink-deep);
  text-decoration:none;
  padding:12px 24px;
  font-family:var(--sans);
  font-size:14.5px; font-weight:500; letter-spacing:-.01em; line-height:1.45;
  text-align:center;
  transition:background .22s ease;
}
.dfc-bar:hover{ background:#E0FF96; }
.dfc-tag{
  background:var(--ink-deep); color:var(--lime);
  border-radius:100px; padding:4px 13px;
  font-size:10.5px; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
  white-space:nowrap; flex:none;
}
.dfc-txt strong{ font-weight:700; }
.dfc-cta{
  font-weight:700; white-space:nowrap;
  border-bottom:1.5px solid rgba(14,31,32,.35); padding-bottom:1px;
  transition:border-color .22s ease;
}
.dfc-bar:hover .dfc-cta{ border-bottom-color:var(--ink-deep); }
@media (max-width:860px){
  .dfc-bar{ font-size:13.5px; padding:11px 18px; gap:10px; }
}
@media (max-width:560px){
  .dfc-bar{ font-size:13px; padding:10px 14px; gap:8px; }
  .dfc-tag{ font-size:10px; padding:3px 10px; }
  .dfc-txt{ display:block; }
}

/* ==========================================================
   NAV — one-line fit
   Adding "Learn" made nine links, tipping the desktop nav onto
   a second row. The SOON badges have since been removed from
   the nav markup, so this just keeps the spacing comfortable
   and guarantees a single row. Mobile collapses at 900px above.
   ========================================================== */
.nav-links{
  gap:4px;
  font-size:14.5px;
  flex-wrap:nowrap;
}
.nav-links a{
  padding:9px 12px;
  white-space:nowrap;
}
@media (max-width:1080px){
  .nav-links{ gap:2px; font-size:13.5px; }
  .nav-links a{ padding:8px 9px; }
}
/* comfortable spacing again in the open mobile drawer */
@media (max-width:900px){
  .nav-links.open{ font-size:15px; gap:4px; }
  .nav-links.open a{ padding:12px 16px; white-space:normal; }
}