*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--color-ink-900); background: var(--color-surface); font-family: var(--font-family); line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
.container { width: min(calc(100% - 2.5rem), var(--container)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 100; top: .5rem; left: .5rem; padding: .75rem 1rem; background: white; transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }

.site-header { position: fixed; z-index: 50; inset: 0 0 auto; color: white; transition: background var(--transition), box-shadow var(--transition); }
.site-header.is-scrolled { background: rgba(19, 6, 34, .94); box-shadow: 0 1px 0 rgba(255,255,255,.1); backdrop-filter: blur(16px); }
.header-inner { min-height: 5rem; display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); }
.brand { display: inline-flex; align-items: center; gap: .7rem; font-weight: 800; letter-spacing: -.03em; }
.brand-mark { display: grid; place-items: center; width: 2.55rem; height: 2.55rem; border: 2px solid var(--color-accent-500); border-radius: .75rem; color: var(--color-accent-500); font-size: 1.4rem; line-height: 1; }
.brand-mark > span { margin: -.2rem 0 0 .05rem; font-size: .43rem; letter-spacing: -.08em; }
.brand-name { font-size: 1.15rem; }
.site-nav { display: flex; align-items: center; gap: 1.8rem; font-size: var(--text-sm); font-weight: 600; }
.site-nav > a:not(.button) { color: rgba(255,255,255,.78); transition: color var(--transition); }
.site-nav > a:hover { color: white; }
.menu-toggle { display: none; width: 2.7rem; height: 2.7rem; padding: .65rem; border: 1px solid rgba(255,255,255,.3); background: transparent; border-radius: var(--radius-sm); }
.menu-toggle span:not(.sr-only) { display: block; height: 2px; margin: 4px 0; background: white; }

.button { display: inline-flex; min-height: 3.25rem; align-items: center; justify-content: center; padding: .75rem 1.35rem; border: 1px solid transparent; border-radius: var(--radius-pill); font-weight: 750; line-height: 1; transition: transform var(--transition), background var(--transition); }
.button:hover { transform: translateY(-2px); }
.button-primary { color: var(--color-brand-950); background: var(--color-accent-500); box-shadow: 0 12px 30px rgba(97, 242, 170, .2); }
.button-primary:hover { background: var(--color-accent-400); }
.button-small { min-height: 2.6rem; padding-inline: 1.1rem; }
.button-ghost { border-color: rgba(255,255,255,.35); }
.text-link { display: inline-flex; align-items: center; gap: .5rem; color: white; font-weight: 700; }
.text-link span { color: var(--color-accent-500); }
.eyebrow { display: inline-block; margin-bottom: var(--space-4); color: #2a9364; font-size: var(--text-xs); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.eyebrow-light { color: var(--color-accent-500); }

.hero { position: relative; min-height: 51rem; overflow: hidden; color: white; background: radial-gradient(circle at 75% 35%, #3a1760 0, var(--color-brand-900) 34%, var(--color-brand-950) 74%); }
.hero::before { content: ""; position: absolute; inset: 0; opacity: .15; background-image: linear-gradient(rgba(255,255,255,.13) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.13) 1px, transparent 1px); background-size: 70px 70px; mask-image: linear-gradient(to right, transparent, black); }
.hero-grid { position: relative; display: grid; min-height: 51rem; grid-template-columns: 1.05fr .95fr; align-items: center; gap: var(--space-8); padding-block: 9rem 6rem; }
.hero-copy { position: relative; z-index: 2; }
.hero h1 { max-width: 12ch; margin: 0; font-size: var(--text-hero); line-height: .98; letter-spacing: -.065em; }
.hero h1 span { color: var(--color-accent-500); }
.hero-lead { max-width: 35rem; margin: var(--space-5) 0 0; color: rgba(255,255,255,.72); font-size: var(--text-lg); }
.hero-actions { display: flex; align-items: center; gap: var(--space-5); margin-top: var(--space-6); }
.hero-points { display: flex; flex-wrap: wrap; gap: var(--space-5); margin: var(--space-7) 0 0; padding: 0; color: rgba(255,255,255,.7); font-size: var(--text-sm); list-style: none; }
.hero-points li::before { content: "✓"; margin-right: .45rem; color: var(--color-accent-500); font-weight: 800; }

.hero-visual { position: relative; min-height: 39rem; display: grid; place-items: center; }
.glow { position: absolute; border-radius: 50%; filter: blur(10px); }
.glow-one { width: 25rem; height: 25rem; background: rgba(97,242,170,.12); }
.glow-two { right: 0; bottom: 3rem; width: 12rem; height: 12rem; background: rgba(255,255,255,.06); }
.phone { position: relative; z-index: 2; width: 18.4rem; min-height: 37rem; padding: 1.2rem; color: var(--color-ink-900); background: #f8f6fa; border: 7px solid #0d0615; border-radius: 2.65rem; box-shadow: var(--shadow-lg); transform: rotate(3deg); }
.phone::before { content: ""; position: absolute; top: .55rem; left: 50%; width: 5.5rem; height: 1.2rem; border-radius: 1rem; background: #0d0615; transform: translateX(-50%); }
.phone-bar { display: flex; justify-content: space-between; padding: .25rem .25rem 1.3rem; }
.phone-bar span:first-child { width: 1.1rem; height: .4rem; border-block: 2px solid var(--color-ink-900); }
.phone-bar span:last-child { width: .8rem; height: .55rem; border: 2px solid var(--color-ink-900); border-radius: 2px; }
.app-greeting { display: grid; margin: .6rem .2rem 1rem; }
.app-greeting small, .balance-card small, .receipt-row small { color: var(--color-ink-500); }
.app-greeting strong { font-size: 1.25rem; }
.balance-card { display: grid; padding: 1.25rem; color: white; background: var(--color-brand-900); border-radius: 1.2rem; }
.balance-card small, .balance-card span { color: rgba(255,255,255,.6); }
.balance-card strong { margin-block: .3rem; color: var(--color-accent-500); font-size: 2rem; }
.balance-card span { font-size: .7rem; }
.receipt-list { margin-top: 1.3rem; }
.receipt-title { display: flex; justify-content: space-between; margin-bottom: .7rem; font-size: .75rem; }
.receipt-title span { color: #24885d; }
.receipt-row { display: grid; grid-template-columns: 2rem 1fr auto; align-items: center; gap: .65rem; margin-bottom: .55rem; padding: .65rem; background: white; border: 1px solid #eeeaf1; border-radius: .75rem; }
.receipt-row i { display: grid; place-items: center; width: 2rem; height: 2rem; color: #27875f; background: var(--color-accent-100); border-radius: .55rem; font-size: .65rem; font-style: normal; font-weight: 800; }
.receipt-row p { display: grid; margin: 0; font-size: .65rem; line-height: 1.3; }
.receipt-row b { font-size: .68rem; }
.receipt-row.muted { opacity: .62; }
.scan-button { position: absolute; bottom: 1rem; left: 50%; display: grid; place-items: center; width: 3.2rem; height: 3.2rem; color: var(--color-brand-950); background: var(--color-accent-500); border-radius: 50%; font-size: 1.8rem; font-weight: 300; transform: translateX(-50%); }
.floating-note { position: absolute; z-index: 3; display: flex; align-items: center; gap: .65rem; min-width: 13rem; padding: .85rem 1rem; color: var(--color-ink-900); background: rgba(255,255,255,.95); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.floating-note > span { display: grid; place-items: center; width: 2rem; height: 2rem; color: #17784e; background: var(--color-accent-100); border-radius: 50%; font-weight: 900; }
.floating-note p { display: grid; margin: 0; font-size: .72rem; line-height: 1.35; }
.floating-note small { color: var(--color-ink-500); }
.note-top { top: 7rem; right: -1rem; }
.note-bottom { bottom: 6rem; left: -1.5rem; }

.trust-strip { border-bottom: 1px solid var(--color-line); background: white; }
.trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); padding-block: 1.6rem; }
.trust-grid p { display: grid; margin: 0; padding-inline: var(--space-6); text-align: center; }
.trust-grid p + p { border-left: 1px solid var(--color-line); }
.trust-grid strong { font-size: var(--text-lg); }
.trust-grid span { color: var(--color-ink-500); font-size: var(--text-sm); }

.section { padding-block: var(--space-9); }
.section-soft { background: var(--color-surface-soft); }
.section-heading { max-width: 42rem; margin: 0 auto var(--space-8); text-align: center; }
.section-heading h2, .feature-copy h2, .security-copy h2, .download-card h2 { margin: 0; font-size: var(--text-2xl); line-height: 1.12; letter-spacing: -.045em; }
.section-heading p, .feature-copy > p { color: var(--color-ink-700); }
.align-left { margin-inline: 0; text-align: left; }
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.step-card { position: relative; padding: var(--space-6); overflow: hidden; background: white; border: 1px solid var(--color-line); border-radius: var(--radius-lg); transition: transform var(--transition), box-shadow var(--transition); }
.step-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-sm); }
.step-number { position: absolute; top: 1.5rem; right: 1.5rem; color: #d7d1dc; font-size: 2rem; font-weight: 900; }
.step-card h3, .feature-list h3 { margin: var(--space-5) 0 var(--space-2); font-size: var(--text-lg); }
.step-card p, .feature-list p { margin: 0; color: var(--color-ink-700); font-size: var(--text-sm); }
.line-icon { position: relative; width: 3rem; height: 3rem; border: 2px solid var(--color-brand-800); border-radius: .8rem; }
.receipt-icon::before { content: ""; position: absolute; inset: .6rem .75rem; border-block: 2px solid var(--color-accent-500); box-shadow: 0 .45rem 0 var(--color-brand-800); }
.scan-icon::before { content: ""; position: absolute; inset: .7rem; border: 2px dashed var(--color-accent-500); }
.chart-icon::before { content: ""; position: absolute; left: .75rem; bottom: .65rem; width: .35rem; height: .8rem; background: var(--color-accent-500); box-shadow: .7rem -.45rem 0 var(--color-brand-800), 1.4rem -.9rem 0 var(--color-accent-500); }

.feature-layout { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: var(--space-9); }
.feature-art { position: relative; display: grid; min-height: 31rem; place-items: center; border-radius: 2rem; background: var(--color-brand-900); overflow: hidden; }
.feature-art::before { content: ""; position: absolute; width: 23rem; height: 23rem; border: 1px solid rgba(97,242,170,.25); border-radius: 50%; box-shadow: 0 0 0 4rem rgba(255,255,255,.02), 0 0 0 8rem rgba(255,255,255,.02); }
.receipt-paper { position: relative; z-index: 2; width: 15rem; padding: 1.5rem; background: white; box-shadow: var(--shadow-lg); transform: rotate(-5deg); }
.receipt-paper::after { content: ""; position: absolute; right: 0; bottom: -.45rem; left: 0; height: .5rem; background: linear-gradient(135deg, white .35rem, transparent 0) 0 0/1rem .5rem repeat-x; }
.paper-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
.paper-head > span:last-child { width: 4rem; height: .4rem; background: #ddd8e2; }
.mini-mark { display: grid; place-items: center; width: 2rem; height: 2rem; color: var(--color-accent-500); background: var(--color-brand-900); border-radius: .45rem; font-weight: 900; }
.receipt-paper > i { display: block; width: 100%; height: .35rem; margin: .7rem 0; background: #e8e4eb; }
.receipt-paper > i.short { width: 60%; }
.paper-total { display: flex; justify-content: space-between; margin-top: 2rem; padding-top: 1rem; border-top: 1px dashed #bbb5c1; }
.scan-frame { position: absolute; z-index: 3; width: 18rem; height: 22rem; }
.scan-frame span { position: absolute; width: 2.5rem; height: 2.5rem; border-color: var(--color-accent-500); border-style: solid; }
.scan-frame span:nth-child(1) { top: 0; left: 0; border-width: 3px 0 0 3px; }
.scan-frame span:nth-child(2) { top: 0; right: 0; border-width: 3px 3px 0 0; }
.scan-frame span:nth-child(3) { bottom: 0; left: 0; border-width: 0 0 3px 3px; }
.scan-frame span:nth-child(4) { right: 0; bottom: 0; border-width: 0 3px 3px 0; }
.success-pill { position: absolute; z-index: 4; bottom: 2.2rem; padding: .75rem 1rem; color: #0c5636; background: var(--color-accent-100); border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: 750; box-shadow: var(--shadow-sm); }
.feature-copy > p { max-width: 35rem; }
.feature-list { margin-top: var(--space-6); }
.feature-list article { display: grid; grid-template-columns: 2.5rem 1fr; gap: var(--space-4); padding-block: var(--space-4); border-top: 1px solid var(--color-line); }
.feature-list article > span { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; color: #1b704d; background: var(--color-accent-100); border-radius: 50%; font-size: var(--text-xs); font-weight: 900; }
.feature-list h3 { margin-top: 0; }

.trial-card { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); margin-bottom: var(--space-5); padding: var(--space-6); background: var(--color-accent-100); border: 1px solid #bcefd5; border-radius: var(--radius-lg); }
.trial-card > div { flex: 0 1 25rem; }
.trial-card > div > span { color: #1b704d; font-size: var(--text-xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.trial-card h3 { margin: var(--space-2) 0 0; font-size: var(--text-xl); line-height: 1.2; }
.trial-card p { flex: 1 1 28rem; margin: 0; color: var(--color-ink-700); }
.plans-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
.plan-card { padding: var(--space-6); background: white; border: 1px solid var(--color-line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.plan-card > span { color: #2a9364; font-size: var(--text-xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.plan-card h3 { margin: var(--space-3) 0; font-size: var(--text-xl); }
.plan-card h3 small { color: var(--color-ink-500); font-size: var(--text-sm); font-weight: 650; }
.plan-card p { margin: 0; color: var(--color-ink-700); }
.plan-card-featured { color: white; background: var(--color-brand-900); border-color: var(--color-brand-900); }
.plan-card-featured > span { color: var(--color-accent-500); }
.plan-card-featured h3 small { color: rgba(255,255,255,.65); }
.plan-card-featured p { color: rgba(255,255,255,.72); }
.plans-note { margin: var(--space-5) 0 0; color: var(--color-ink-500); font-size: var(--text-xs); text-align: center; }

.security-card { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); padding: clamp(2rem, 5vw, 4.5rem); color: white; background: var(--color-brand-900); border-radius: 2rem; overflow: hidden; }
.security-copy { position: relative; z-index: 2; max-width: 43rem; }
.security-copy p { color: rgba(255,255,255,.7); }
.security-links { display: flex; flex-wrap: wrap; gap: var(--space-5); margin-top: var(--space-6); }
.security-links a { font-size: var(--text-sm); font-weight: 750; }
.security-links span { margin-left: .35rem; color: var(--color-accent-500); }
.shield { flex: 0 0 auto; display: grid; place-items: center; width: 10rem; height: 12rem; border: 2px solid var(--color-accent-500); border-radius: 5rem 5rem 6rem 6rem / 3rem 3rem 8rem 8rem; box-shadow: 0 0 0 1.3rem rgba(97,242,170,.05), 0 0 0 2.6rem rgba(97,242,170,.035); }
.shield span { display: grid; place-items: center; width: 4rem; height: 4rem; color: var(--color-brand-950); background: var(--color-accent-500); border-radius: 50%; font-size: 2rem; font-weight: 900; }

.faq-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: var(--space-9); }
.accordion details { background: white; border-top: 1px solid var(--color-line); }
.accordion details:last-child { border-bottom: 1px solid var(--color-line); }
.accordion summary { position: relative; padding: 1.3rem 2.5rem 1.3rem 0; cursor: pointer; font-weight: 750; list-style: none; }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary span::before, .accordion summary span::after { content: ""; position: absolute; top: 50%; right: .5rem; width: 1rem; height: 2px; background: var(--color-brand-800); transition: transform var(--transition); }
.accordion summary span::after { transform: rotate(90deg); }
.accordion details[open] summary span::after { transform: rotate(0); }
.accordion details p { margin: -.35rem 0 1.35rem; padding-right: 2.5rem; color: var(--color-ink-700); }

.download-section { padding: var(--space-9) 0; }
.download-card { display: flex; align-items: center; justify-content: space-between; gap: var(--space-7); padding: clamp(2.3rem, 6vw, 5rem); color: white; background: linear-gradient(120deg, var(--color-brand-900), #351459); border-radius: 2rem; }
.download-card p { max-width: 39rem; color: rgba(255,255,255,.7); }
.store-button { position: relative; flex: 0 0 auto; display: grid; grid-template-columns: 2.2rem auto; min-width: 12.5rem; padding: .8rem 1.1rem; background: #050505; border: 1px solid rgba(255,255,255,.4); border-radius: .65rem; line-height: 1.1; }
.store-button small { font-size: .55rem; }
.store-button strong { font-size: 1.15rem; }
.play-symbol { grid-row: 1 / 3; align-self: center; width: 0; height: 0; border-top: .8rem solid transparent; border-bottom: .8rem solid transparent; border-left: 1.35rem solid var(--color-accent-500); }

.site-footer { padding-top: var(--space-8); color: rgba(255,255,255,.65); background: var(--color-brand-950); }
.footer-main { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--space-8); padding-bottom: var(--space-7); }
.footer-brand { color: white; }
.footer-main > div:first-child p { max-width: 20rem; }
.footer-main h2 { margin: 0 0 var(--space-4); color: white; font-size: var(--text-sm); }
.footer-main > div:not(:first-child) { display: flex; flex-direction: column; gap: .65rem; font-size: var(--text-sm); }
.footer-main a:hover { color: white; }
.footer-bottom { display: flex; justify-content: space-between; gap: var(--space-5); padding-block: var(--space-5); border-top: 1px solid rgba(255,255,255,.1); font-size: var(--text-xs); }
.footer-bottom p { margin: 0; }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity 600ms ease, transform 600ms ease; }
.reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .site-nav { position: absolute; top: 4.4rem; right: 1.25rem; left: 1.25rem; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 1rem; color: white; background: var(--color-brand-900); border: 1px solid rgba(255,255,255,.15); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); }
  .site-nav.is-open { display: flex; }
  .site-nav a { padding: .8rem; }
  .menu-toggle { display: block; }
  .hero-grid, .feature-layout, .faq-layout { grid-template-columns: 1fr; }
  .hero-copy { padding-top: 2rem; }
  .hero-visual { min-height: 39rem; }
  .steps-grid, .plans-grid { grid-template-columns: 1fr; }
  .trial-card { align-items: flex-start; flex-direction: column; }
  .trial-card > div, .trial-card > p { flex-basis: auto; width: 100%; }
  .feature-layout, .faq-layout { gap: var(--space-7); }
}

@media (max-width: 640px) {
  :root { --space-9: 4.5rem; }
  .container { width: min(calc(100% - 1.5rem), var(--container)); }
  .hero-grid { padding-top: 7.5rem; }
  .hero-actions, .security-card, .download-card { align-items: stretch; flex-direction: column; }
  .hero-actions .button { width: 100%; }
  .hero-actions .text-link { justify-content: center; }
  .hero-points { display: grid; gap: .5rem; }
  .hero-visual { min-height: 34rem; transform: scale(.88); margin-inline: -2rem; }
  .phone { width: 17.5rem; min-height: 35rem; }
  .note-top { right: -1rem; }
  .note-bottom { left: -1rem; }
  .trust-grid { grid-template-columns: 1fr; }
  .trust-grid p { padding-block: 1rem; }
  .trust-grid p + p { border-top: 1px solid var(--color-line); border-left: 0; }
  .feature-art { min-height: 27rem; }
  .security-card { text-align: left; }
  .shield { width: 7rem; height: 8.5rem; align-self: center; }
  .footer-main { grid-template-columns: 1fr 1fr; }
  .footer-main > div:first-child { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}