:root {
  --ink: #18251f;
  --muted: #69746d;
  --paper: #f4f5ef;
  --lime: #d8f66a;
  --orange: #ff795f;
  --line: rgba(24, 37, 31, .14);
  --mono: 'DM Mono', monospace;
  --display: 'Space Grotesk', sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--display); }
button, a { font: inherit; }
a { color: inherit; text-decoration: none; }
button { border: 0; cursor: pointer; }
.grain { position: fixed; inset: 0; z-index: 5; pointer-events: none; opacity: .035; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); }
.site-header { max-width: 1240px; margin: auto; padding: 28px 32px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: -.04em; font-size: 1.2rem; }
.brand-mark { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: var(--ink); background: var(--lime); font-family: var(--mono); font-size: .85rem; }
.main-nav { display: flex; gap: 34px; color: #69746d; font-family: var(--mono); font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; }
.main-nav a:hover, .text-link:hover { color: var(--orange); }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 18px; border-radius: 999px; padding: 15px 22px; font-weight: 600; transition: transform .2s, background .2s; }
.button:hover { transform: translateY(-2px); }
.button-small { padding: 11px 16px; font-size: .78rem; }
.button-light { background: transparent; border: 1px solid var(--line); }
.button-primary { color: var(--ink); background: var(--lime); }
.button-dark { color: var(--paper); background: var(--ink); }
.button-large { padding: 18px 26px; }
.section-shell { max-width: 1240px; margin: auto; padding-left: 32px; padding-right: 32px; }
.hero { min-height: 610px; padding-top: 82px; padding-bottom: 86px; display: grid; grid-template-columns: .95fr 1.05fr; align-items: center; gap: 50px; overflow: hidden; }
.eyebrow { margin: 0 0 22px; color: var(--muted); font: 500 .68rem var(--mono); letter-spacing: .09em; text-transform: uppercase; }
.status-dot { display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px rgba(216,246,106,.2); }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { margin-bottom: 28px; font-size: clamp(3.6rem, 7vw, 6.6rem); line-height: .9; letter-spacing: -.075em; }
h1 em, h2 em { color: var(--orange); font-style: normal; }
.hero-text { max-width: 390px; margin-bottom: 30px; color: var(--muted); font-size: 1rem; line-height: 1.6; }
.hero-actions { display: flex; align-items: center; gap: 24px; }
.text-link { color: var(--ink); font-size: .8rem; font-weight: 600; }
.text-link span { margin-left: 8px; color: var(--orange); }
.trust-line { margin-top: 34px; color: var(--muted); font: .65rem var(--mono); }
.trust-line span:first-child { color: var(--orange); margin-right: 5px; }
.wallet-wrap { position: relative; min-height: 380px; display: grid; place-items: center; }
.wallet-wrap::before { content: ''; position: absolute; width: 460px; height: 460px; border: 1px solid var(--line); border-radius: 50%; }
.wallet-card { position: relative; width: min(440px, 90%); aspect-ratio: 1.62; padding: 30px; color: var(--paper); border-radius: 18px; overflow: hidden; background: var(--ink); box-shadow: 20px 24px 0 rgba(216,246,106,.6); transform: rotate(-5deg); animation: float 5s ease-in-out infinite; }
.wallet-card::before { content: ''; position: absolute; width: 210px; height: 210px; right: -55px; top: -70px; border: 1px solid rgba(244,245,239,.17); border-radius: 50%; box-shadow: 0 0 0 35px rgba(244,245,239,.03), 0 0 0 70px rgba(244,245,239,.03); }
.card-topline, .card-footer { display: flex; justify-content: space-between; align-items: center; }
.card-label, .card-chip, .card-footer { font: .63rem var(--mono); letter-spacing: .06em; }
.card-chip { padding: 6px 9px; border: 1px solid rgba(244,245,239,.26); border-radius: 5px; }
.balance { margin-top: 61px; font-size: clamp(2.2rem, 5vw, 3.7rem); font-weight: 500; letter-spacing: -.075em; }
.balance-cents { color: #7b8982; font-size: .54em; }
.card-footer { position: absolute; right: 30px; bottom: 28px; left: 30px; color: #a3aea8; }
.card-number { color: var(--paper); }
.card-spark { position: absolute; right: 30px; bottom: 29px; display: flex; align-items: end; gap: 4px; height: 22px; transform: translateX(-75px); }
.card-spark span { display: block; width: 3px; background: var(--lime); }
.card-spark span:nth-child(1) { height: 8px; }.card-spark span:nth-child(2) { height: 13px; }.card-spark span:nth-child(3) { height: 10px; }.card-spark span:nth-child(4) { height: 19px; }.card-spark span:nth-child(5) { height: 14px; }.card-spark span:nth-child(6) { height: 21px; }.card-spark span:nth-child(7) { height: 17px; }.card-spark span:nth-child(8) { height: 22px; }
.floating-note { position: absolute; display: flex; align-items: center; gap: 10px; padding: 12px 15px; background: #fff; border: 1px solid var(--line); box-shadow: 0 8px 22px rgba(24,37,31,.08); animation: float 5s 1s ease-in-out infinite; }
.note-income { top: 38px; right: 1%; }.note-safe { bottom: 34px; left: 3%; }
.note-icon { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: var(--ink); background: var(--lime); font-weight: 700; }.note-safe .note-icon { background: #dce8ff; }
.floating-note strong, .floating-note small { display: block; }.floating-note strong { font-size: .75rem; }.floating-note small { margin-top: 3px; color: var(--muted); font: .58rem var(--mono); }
@keyframes float { 0%,100% { transform: translateY(0) rotate(-5deg); } 50% { transform: translateY(-8px) rotate(-5deg); } }
.ticker { overflow: hidden; padding: 18px 0; color: var(--paper); background: var(--ink); font: .68rem var(--mono); letter-spacing: .1em; white-space: nowrap; }.ticker-track { display: flex; align-items: center; justify-content: space-around; gap: 35px; }.ticker b { color: var(--lime); font-size: 1.2rem; }
.features { padding-top: 135px; padding-bottom: 135px; }.section-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 58px; }.section-heading h2, .activity h2, .cta h2 { margin-bottom: 0; font-size: clamp(2.8rem, 5vw, 5rem); }.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }.feature-card { position: relative; min-height: 300px; padding: 28px; border: 1px solid var(--line); }.feature-main { background: var(--orange); }.feature-dark { color: var(--paper); background: var(--ink); border-color: var(--ink); }.feature-icon { display: grid; place-items: center; width: 38px; height: 38px; color: var(--paper); background: var(--ink); border-radius: 50%; font: 1rem var(--mono); }.feature-icon-orange { color: var(--paper); background: var(--orange); }.feature-icon-lime { color: var(--ink); background: var(--lime); }.feature-number { margin-top: 34px; color: var(--muted); font: .65rem var(--mono); }.feature-card h3 { margin-bottom: 14px; font-size: 1.55rem; line-height: 1.05; letter-spacing: -.05em; }.feature-card > p:not(.feature-number) { max-width: 230px; color: var(--muted); font-size: .82rem; line-height: 1.45; }.feature-dark > p:not(.feature-number) { color: #9da9a2; }.feature-arrow { position: absolute; right: 28px; bottom: 26px; font-size: 1.5rem; }
.activity { display: grid; grid-template-columns: .8fr 1.2fr; gap: 12%; padding-top: 115px; padding-bottom: 135px; background: #e8ebe4; max-width: none; padding-left: max(32px, calc((100vw - 1176px) / 2)); padding-right: max(32px, calc((100vw - 1176px) / 2)); }.activity-intro > p:not(.eyebrow) { max-width: 310px; margin: 25px 0 30px; color: var(--muted); line-height: 1.55; font-size: .9rem; }.transactions { align-self: center; background: var(--paper); border: 1px solid var(--line); }.transactions-head { display: flex; justify-content: space-between; padding: 16px 20px; color: var(--muted); font: .6rem var(--mono); letter-spacing: .08em; border-bottom: 1px solid var(--line); }.transaction { display: grid; grid-template-columns: 36px 1fr auto; gap: 14px; align-items: center; padding: 18px 20px; border-bottom: 1px solid var(--line); }.transaction:last-child { border: 0; }.transaction-icon { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 50%; font-weight: 600; }.icon-green { background: var(--lime); }.icon-orange { color: var(--paper); background: var(--orange); }.icon-blue { color: #31527d; background: #dce8ff; }.transaction strong, .transaction small { display: block; }.transaction strong { font-size: .78rem; }.transaction small { margin-top: 4px; color: var(--muted); font: .61rem var(--mono); }.amount { font: .72rem var(--mono); }.positive { color: #4e9d72; }
.cta { display: flex; justify-content: space-between; align-items: center; padding-top: 115px; padding-bottom: 115px; }.site-footer { display: flex; align-items: center; justify-content: space-between; padding: 26px 32px; color: var(--paper); background: var(--ink); }.site-footer p, .footer-copy { margin: 0; color: #92a098; font: .62rem var(--mono); }.toast { position: fixed; z-index: 10; right: 24px; bottom: 24px; padding: 14px 18px; color: var(--paper); background: var(--ink); border-left: 4px solid var(--lime); font-size: .78rem; transform: translateY(120px); transition: transform .3s; }.toast.show { transform: translateY(0); }
@media (max-width: 800px) { .main-nav { display: none; }.site-header { padding: 20px; }.button-small { padding: 9px 12px; font-size: .68rem; }.section-shell { padding-left: 20px; padding-right: 20px; }.hero { grid-template-columns: 1fr; padding-top: 58px; gap: 25px; }.hero h1 { font-size: clamp(3.8rem, 17vw, 6rem); }.wallet-wrap { min-height: 370px; }.note-income { right: 0; }.note-safe { left: 0; }.features { padding-top: 80px; padding-bottom: 80px; }.section-heading { display: block; }.section-heading h2 { margin-top: 30px; }.feature-grid { grid-template-columns: 1fr; }.feature-card { min-height: 260px; }.activity { grid-template-columns: 1fr; gap: 55px; padding-top: 80px; padding-bottom: 80px; }.cta { display: block; padding-top: 80px; padding-bottom: 80px; }.cta .button { margin-top: 35px; }.site-footer { flex-wrap: wrap; gap: 20px; }.site-footer p { order: 3; width: 100%; } }
@media (max-width: 430px) { .hero-actions { align-items: flex-start; flex-direction: column; gap: 18px; }.wallet-card { padding: 23px; }.balance { margin-top: 52px; font-size: 2.3rem; }.card-footer { right: 23px; bottom: 22px; left: 23px; }.note-safe { bottom: 18px; }.note-income { top: 18px; }.transaction { padding: 16px 12px; gap: 9px; }.transaction small { font-size: .52rem; }.amount { font-size: .62rem; } }