:root {
  color-scheme: light;
  --navy: #101a2b;
  --navy-soft: #17243a;
  --ink: #142033;
  --muted: #6f7b8d;
  --line: #e6eaf0;
  --mint: #a9f4cf;
  --green: #2cc985;
  --blue: #a9d8ff;
  --paper: #f7f9fc;
  --white: #fff;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  scroll-behavior: smooth;
}

* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--white); }
a { color: inherit; text-decoration: none; }
.topbar { height: 84px; padding: 0 max(6.5vw, calc((100vw - 1200px) / 2)); display: flex; align-items: center; justify-content: space-between; background: #fff; }
.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--navy); font: 800 18px system-ui, sans-serif; letter-spacing: -.6px; }
.brand-light { color: #7b8797; font-weight: 500; }
.brand-mark { display: inline-flex; width: 30px; height: 30px; position: relative; align-items: center; }
.brand-mark span { position: absolute; width: 13px; height: 23px; border-radius: 4px; transform: skew(-28deg); background: #3bc68b; }
.brand-mark span:first-child { left: 2px; top: 0; }
.brand-mark span:last-child { right: 2px; bottom: 0; height: 17px; background: #8bdcbe; }
nav { display: flex; align-items: center; gap: 36px; font-size: 13px; color: #647084; font-weight: 600; }
nav a { transition: color .2s; } nav a:hover { color: #149c65; }
.nav-cta { border: 1px solid #dae3e7; border-radius: 9px; padding: 11px 18px; color: var(--navy); }
.hero { min-height: 650px; padding: 76px max(6.5vw, calc((100vw - 1200px) / 2)) 52px; display: grid; grid-template-columns: 1.03fr .97fr; align-items: center; overflow: hidden; background: radial-gradient(circle at 82% 45%, #e7fff3 0, transparent 30%), linear-gradient(110deg, #f8fbff 0%, #f2f7fb 65%, #eefbf5 100%); }
.hero-copy { position: relative; z-index: 1; max-width: 590px; padding-bottom: 20px; }
.eyebrow { margin: 0 0 22px; color: #2e9a6c; font-size: 10px; font-weight: 700; letter-spacing: 1.65px; }
.pulse { display: inline-block; width: 7px; height: 7px; margin: 0 8px 1px 0; border-radius: 50%; background: #2cc985; box-shadow: 0 0 0 4px #d7f6e8; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-family: system-ui, sans-serif; letter-spacing: -2.3px; }
h1 { margin-bottom: 20px; color: var(--navy); font-size: clamp(42px, 5.5vw, 70px); line-height: 1.08; font-weight: 800; }
h1 span, h2 span { color: #36b77f; }
.hero-lead { max-width: 475px; margin-bottom: 28px; color: #657286; font-size: 16px; line-height: 1.8; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.button { min-height: 48px; padding: 0 18px; display: inline-flex; align-items: center; justify-content: center; gap: 14px; border-radius: 9px; font-size: 12px; font-weight: 700; transition: transform .2s, box-shadow .2s, background .2s; }
.button:hover { transform: translateY(-2px); }
.button-primary { color: #fff; background: var(--navy); box-shadow: 0 10px 22px #101a2b1c; }
.button-primary:hover { background: #223552; box-shadow: 0 14px 26px #101a2b2b; }
.button-quiet { color: #5f6d81; }
.hero-proof { margin-top: 33px; display: flex; align-items: center; gap: 10px; color: #738094; font-size: 11px; }
.proof-icon { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: #12875a; background: #d8f7e7; font-size: 12px; font-weight: 800; }
.hero-art { min-height: 490px; position: relative; display: grid; place-items: center; }
.orbit { position: absolute; border: 1px solid #7ad5ac45; border-radius: 50%; }
.orbit-one { width: 460px; height: 460px; }
.orbit-two { width: 365px; height: 365px; border-style: dashed; }
.phone { width: 250px; height: 468px; position: relative; z-index: 2; padding: 9px; border: 5px solid #16243a; border-radius: 35px; background: #fff; box-shadow: 0 30px 70px #192d3e2d, 0 6px 12px #192d3e20; transform: rotate(3deg); }
.phone-camera { position: absolute; z-index: 3; top: 11px; left: 50%; width: 72px; height: 17px; border-radius: 0 0 13px 13px; background: #16243a; transform: translateX(-50%); }
.phone-screen { height: 100%; padding: 31px 12px 11px; border-radius: 24px; overflow: hidden; background: #f8fafb; }
.screen-head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 16px; }
.screen-head small, .screen-head strong { display: block; }
.screen-head small { margin-bottom: 4px; color: #9aa4b1; font-size: 6px; letter-spacing: .8px; }
.screen-head strong { color: #253247; font: 700 13px system-ui, sans-serif; }
.avatar { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 9px; color: #118354; background: #d8f6e8; font-size: 11px; font-weight: 700; }
.balance-card { padding: 14px; border-radius: 14px; color: #fff; background: linear-gradient(135deg, #14243a, #23405a); box-shadow: 0 8px 18px #14243a20; }
.balance-card > span { display: block; color: #b9c5d2; font-size: 8px; }
.balance-card > strong { display: block; margin: 7px 0 13px; font: 700 21px system-ui, sans-serif; letter-spacing: 2px; }
.balance-card > strong small { color: #c2d1df; font-size: 8px; letter-spacing: 0; }
.balance-footer { padding-top: 9px; display: flex; justify-content: space-between; border-top: 1px solid #ffffff24; color: #d6e0e9; font-size: 7px; }
.screen-section { margin: 17px 0 10px; display: flex; align-items: center; justify-content: space-between; color: #28364b; font-size: 8px; }
.screen-section strong { font-size: 10px; }
.screen-section > span { color: #8896a5; font-size: 7px; }
.operation-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.operation { min-height: 60px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border-radius: 10px; background: #fff; color: #5c6879; font-size: 7px; box-shadow: 0 2px 8px #1c2a3c08; }
.op-icon { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 8px; font-size: 14px; font-style: normal; }
.mint { color: #10935d; background: #dbf8e9; }.blue { color: #3372b7; background: #e1f1ff; }.violet { color: #7656b5; background: #eee6ff; }.orange { color: #c17820; background: #fff0d7; }
.recent-title { margin-top: 19px; }
.activity-row { padding: 9px 1px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid #e9edf1; }
.activity-dot { width: 24px; height: 24px; border-radius: 8px; }.mint-bg { background: #d9f7e8; }.blue-bg { background: #e1efff; }
.activity-row span { flex: 1; }.activity-row b, .activity-row small { display: block; }.activity-row b { color: #38465a; font-size: 7px; }.activity-row small { margin-top: 3px; color: #9ca6b2; font-size: 6px; }.activity-row strong { color: #526075; font-size: 7px; letter-spacing: 1px; }
.screen-nav { margin: 13px -12px -12px; padding: 10px 18px; display: flex; justify-content: space-between; color: #a0aab6; background: #fff; font-size: 14px; }.screen-nav .selected { color: #2eb57d; }
.float-card { position: absolute; z-index: 3; padding: 12px; display: flex; align-items: center; gap: 9px; border: 1px solid #ecf0f3; border-radius: 12px; background: #fff; box-shadow: 0 12px 30px #25364a14; }
.float-card b, .float-card small { display: block; }.float-card b { margin-bottom: 4px; color: #27354a; font-size: 9px; }.float-card small { color: #8995a4; font-size: 7px; }
.float-top { top: 80px; right: -20px; }.float-bottom { bottom: 76px; left: -24px; }
.float-check, .float-chart { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 9px; color: #149560; background: #def8ea; font-size: 13px; font-weight: 700; }.float-chart { color: #496fc1; background: #e9efff; }
.trust-strip { min-height: 75px; padding: 12px 6vw; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 25px; border-bottom: 1px solid #edf0f3; color: #768397; font-size: 10px; font-weight: 600; }
.trust-strip i { width: 4px; height: 4px; border-radius: 50%; background: #57c996; }
.section { padding: 105px max(8vw, calc((100vw - 1120px) / 2)); }
.solution { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.section-heading h2, .download-copy h2 { margin-bottom: 0; color: var(--navy); font-size: clamp(34px, 4vw, 48px); line-height: 1.16; }
.solution-copy { max-width: 475px; color: #748094; font-size: 14px; line-height: 1.9; }
.solution-copy p { margin-bottom: 15px; }
.text-link { display: inline-flex; gap: 11px; align-items: center; margin-top: 13px; color: #198d60; font-size: 12px; font-weight: 700; }
.features { padding-top: 88px; padding-bottom: 110px; background: var(--paper); }
.centered { text-align: center; }.centered h2 { margin-bottom: 16px; }
.section-intro { max-width: 470px; margin: 0 auto; color: #7d8999; font-size: 13px; line-height: 1.7; }
.feature-grid { max-width: 1120px; margin: 44px auto 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; }
.feature-card { min-height: 240px; position: relative; padding: 23px 19px; border: 1px solid #e8edf1; border-radius: 12px; background: #fff; }
.feature-dark { color: #fff; border-color: #14243a; background: #14243a; }
.feature-number { position: absolute; top: 20px; right: 18px; color: #b5c0cd; font: 700 9px system-ui, sans-serif; }.feature-dark .feature-number { color: #a2b1c2; }
.feature-icon { width: 39px; height: 39px; display: grid; place-items: center; margin-bottom: 24px; border-radius: 11px; color: #158856; background: #daf7e9; font-size: 19px; }.icon-mint { color: #15945d; background: #ddf8eb; }.icon-blue { color: #3e79ba; background: #e2f1ff; }.icon-violet { color: #7555b7; background: #eee8ff; }.feature-dark .feature-icon { color: #b6f5d4; background: #ffffff1a; }
.feature-card h3 { margin-bottom: 9px; color: #27364c; font: 700 13px system-ui, sans-serif; }.feature-dark h3 { color: #fff; }
.feature-card p { margin: 0; color: #8390a0; font-size: 10px; line-height: 1.8; }.feature-dark p { color: #b5c2d1; }
.download-section { min-height: 410px; position: relative; overflow: hidden; padding: 80px max(8vw, calc((100vw - 1120px) / 2)); display: grid; grid-template-columns: 1.2fr .8fr; align-items: center; color: #fff; background: #111c2e; }
.download-glow { position: absolute; width: 500px; height: 500px; top: -220px; right: 7%; border-radius: 50%; background: #31c58419; filter: blur(4px); }
.download-copy { position: relative; z-index: 1; }.download-copy .eyebrow { color: #86e0b5; }.download-copy h2 { margin-bottom: 16px; color: #fff; }.download-copy h2 span { color: #94ecc0; }.download-copy > p:not(.eyebrow) { max-width: 480px; color: #b6c1cf; font-size: 12px; line-height: 1.8; }
.button-download { min-width: 260px; margin-top: 6px; padding: 8px 15px; justify-content: flex-start; border: 1px solid #ffffff23; color: #fff; background: #ffffff0c; text-align: left; }.button-download.is-disabled { cursor: not-allowed; opacity: .72; }.button-download b, .button-download small { display: block; }.button-download b { font-size: 11px; }.button-download small { margin-top: 4px; color: #b5c3d0; font-size: 8px; font-weight: 500; }
.download-symbol { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 9px; color: #123c2b; background: #a9f4cf; font-size: 16px; }.download-status { margin: 10px 0 0; color: #90a0b2 !important; font-size: 9px !important; }.platform-note { max-width: 490px; margin-top: 20px; color: #8493a5 !important; font-size: 9px !important; }
.download-side { min-height: 250px; position: relative; display: grid; place-items: center; }.download-ring { position: absolute; border: 1px solid #9df2c325; border-radius: 50%; }.ring-a { width: 260px; height: 260px; }.ring-b { width: 190px; height: 190px; border-style: dashed; }
.download-badge { width: 115px; height: 130px; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border: 1px solid #ffffff30; border-radius: 24px; color: #fff; background: linear-gradient(145deg, #223753, #15283d); box-shadow: 0 20px 45px #0003; transform: rotate(-7deg); }.badge-mark { width: 42px; height: 42px; display: grid; place-items: center; margin-bottom: 3px; border-radius: 13px; color: #163326; background: #a9f4cf; font: 800 22px system-ui, sans-serif; }.download-badge b { font: 800 12px system-ui, sans-serif; letter-spacing: 1px; }.download-badge small { color: #aab9c8; font-size: 6px; letter-spacing: 1.5px; }.spark { position: absolute; color: #99f0c1; }.spark-a { top: 24px; right: 25%; font-size: 28px; }.spark-b { left: 16%; bottom: 30px; color: #93cafa; font-size: 34px; }
.footer { min-height: 94px; padding: 20px max(6.5vw, calc((100vw - 1200px) / 2)); display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid #e8edf1; }.footer-brand { font-size: 14px; }.footer-brand .brand-mark { transform: scale(.85); }.footer p { margin: 0; color: #8490a0; font-size: 10px; }.copyright { color: #9aa4b1; font-size: 9px; }

@media (max-width: 900px) {
  .topbar { height: 72px; padding: 0 5vw; }
  nav { gap: 18px; }.hero { padding: 58px 5vw 42px; grid-template-columns: 1fr 1fr; }.hero-art { transform: scale(.9); }.float-top { right: -10px; }.float-bottom { left: -10px; }
  .section { padding-right: 6vw; padding-left: 6vw; }.solution { gap: 40px; }.feature-grid { grid-template-columns: repeat(2, 1fr); }.download-section { padding-right: 6vw; padding-left: 6vw; }
}
@media (max-width: 640px) {
  .topbar { height: 66px; }.brand { font-size: 15px; }.brand-mark { transform: scale(.85); transform-origin: left center; }
  nav { gap: 13px; font-size: 10px; }nav a:first-child, nav a:nth-child(2) { display: none; }.nav-cta { padding: 9px 12px; }
  .hero { padding-top: 51px; grid-template-columns: 1fr; }.hero-copy { padding-bottom: 0; }.eyebrow { font-size: 9px; }.hero-lead { font-size: 14px; }.hero-actions { gap: 4px; }.button { min-height: 44px; padding: 0 13px; font-size: 10px; }.button-quiet { padding-left: 10px; }.hero-art { min-height: 430px; margin: 12px -4vw -16px; transform: scale(.83); }.phone { transform: rotate(2deg); }.float-top { top: 44px; right: 2%; }.float-bottom { bottom: 46px; left: 1%; }
  .trust-strip { gap: 12px; padding: 14px 5vw; font-size: 8px; }.trust-strip i { width: 3px; height: 3px; }
  .section { padding: 70px 7vw; }.solution { grid-template-columns: 1fr; gap: 25px; }.section-heading h2, .download-copy h2 { font-size: 36px; }.solution-copy { font-size: 13px; }.features { padding-top: 70px; padding-bottom: 76px; }.feature-grid { margin-top: 31px; gap: 9px; }.feature-card { min-height: 225px; padding: 19px 14px; }.feature-card h3 { font-size: 12px; }.feature-card p { font-size: 9px; }.feature-icon { margin-bottom: 20px; }
  .download-section { padding: 65px 7vw 42px; grid-template-columns: 1fr; }.download-side { min-height: 240px; }.download-ring.ring-a { width: 220px; height: 220px; }.download-ring.ring-b { width: 160px; height: 160px; }.footer { padding: 23px 6vw; align-items: flex-start; flex-direction: column; gap: 10px; }.footer p { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) { :root { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; } }
