:root { color-scheme: dark; }
html { scroll-behavior: smooth; }
body { font-family: Manrope, ui-sans-serif, system-ui, sans-serif; overflow-x: hidden; }
main { position: relative; overflow: hidden; }
[v-cloak] { display: none; }
.font-serif { font-family: "DM Serif Display", Georgia, serif; }
.text-gradient { background: linear-gradient(100deg, #fef3c7 8%, #fbbf24 38%, #f0abfc 74%, #a5f3fc); -webkit-background-clip: text; background-clip: text; color: transparent; }
.eyebrow { display: flex; align-items: center; gap: .6rem; color: #a5f3fc; font-size: .68rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.eyebrow::before { content: "✦"; color: #fbbf24; font-size: .9rem; }
.site-glow { pointer-events: none; position: absolute; z-index: 0; border-radius: 999px; filter: blur(25px); opacity: .6; }
.site-glow--one { top: 5rem; right: -12rem; width: 34rem; height: 34rem; background: radial-gradient(circle, rgba(168, 85, 247, .24), transparent 65%); }
.site-glow--two { top: 25rem; left: -17rem; width: 37rem; height: 37rem; background: radial-gradient(circle, rgba(6, 182, 212, .12), transparent 64%); }
.site-glow--three { right: -15rem; bottom: -20rem; width: 44rem; height: 44rem; background: radial-gradient(circle, rgba(251, 191, 36, .12), transparent 63%); }
.reveal { animation: rise .8s both; } .reveal:nth-child(2) { animation-delay: .08s; } .reveal:nth-child(3) { animation-delay: .16s; } .reveal:nth-child(4) { animation-delay: .24s; }
@keyframes rise { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
.benefit-card { min-height:260px; border:1px solid rgba(255,255,255,.09); border-radius:1.5rem; padding:1.5rem; background:linear-gradient(145deg, rgba(255,255,255,.065), rgba(255,255,255,.02)); transition:transform .25s ease, border-color .25s ease, background .25s ease; } .benefit-card:hover { transform:translateY(-6px); border-color:rgba(165,243,252,.32); background:linear-gradient(145deg, rgba(34,211,238,.10), rgba(255,255,255,.025)); }
.app-shot { overflow:hidden; border:1px solid rgba(165,243,252,.18); border-radius:1.7rem; background:#080b1b; box-shadow:0 28px 60px -28px rgba(0,0,0,.8); } .app-shot img { display:block; width:100%; height:auto; transition:transform .6s ease; } .app-shot:hover img { transform:scale(1.012); } .app-shot figcaption { padding:.75rem 1rem; border-top:1px solid rgba(255,255,255,.08); background:#11182d; color:#94a3b8; font-size:.68rem; line-height:1.4; } .app-shot--hero { max-width:640px; padding:.7rem .7rem 0; background:linear-gradient(145deg, rgba(34,211,238,.12), rgba(192,132,252,.12)); } .app-shot--hero figcaption { margin:.7rem -.7rem 0; } .app-shot--location { max-width:510px; justify-self:center; } .app-shot--referral { max-width:480px; justify-self:center; }
.person-card { border:1px solid rgba(255,255,255,.08); border-radius:1.2rem; padding:1.25rem; background:rgba(255,255,255,.025); } .person-card h3 { margin-top:1.25rem; font-size:1rem; font-weight:800; color:#f8fafc; } .person-card p { margin-top:.5rem; color:#94a3b8; font-size:.8rem; line-height:1.45; }
.support-card { min-height:390px; border-radius:1.8rem; padding:1.6rem; } .support-card h3 { margin-top:2.5rem; font-family:"DM Serif Display", Georgia, serif; font-size:2rem; line-height:1; letter-spacing:-.025em; } .support-card>p:not(.support-fineprint) { margin-top:1rem; max-width:31rem; color:#cbd5e1; font-size:.9rem; line-height:1.7; } .support-card ul { margin-top:1.5rem; display:grid; gap:.7rem; color:#e2e8f0; font-size:.82rem; font-weight:600; } .support-card li { display:flex; align-items:flex-start; gap:.55rem; } .support-card li iconify-icon { margin-top:.05rem; color:#67e8f9; font-size:1.15rem; } .support-card--free { border:1px solid rgba(255,255,255,.12); background:linear-gradient(140deg, rgba(255,255,255,.08), rgba(15,23,42,.5)); } .support-card--gift { border:1px solid rgba(251,191,36,.32); background:radial-gradient(circle at 85% 5%, rgba(251,191,36,.18), transparent 38%), linear-gradient(140deg, rgba(73,47,13,.55), rgba(23,20,42,.7)); box-shadow:inset 0 1px rgba(254,243,199,.1); } .support-card--gift li iconify-icon { color:#fde68a; } .support-fineprint { margin-top:1.5rem; border-top:1px solid rgba(251,191,36,.18); padding-top:1rem; color:#fcd34d; font-size:.68rem; line-height:1.5; }
.sharing-row { display:flex; gap:1rem; border-bottom:1px solid rgba(255,255,255,.09); padding:1rem 0; } .sharing-row__icon { display:grid; flex:0 0 auto; place-items:center; width:2.7rem; height:2.7rem; border:1px solid rgba(255,255,255,.11); border-radius:1rem; background:rgba(255,255,255,.05); } .sharing-row h3 { color:#f8fafc; font-size:.94rem; font-weight:800; } .sharing-row p { margin-top:.35rem; color:#94a3b8; font-size:.8rem; line-height:1.55; }
.closing-card { position:relative; border:1px solid rgba(165,243,252,.22); border-radius:2rem; background:radial-gradient(circle at 50% -25%, rgba(192,132,252,.33), transparent 48%), radial-gradient(circle at 90% 90%, rgba(34,211,238,.16), transparent 35%), #10152c; box-shadow:inset 0 1px rgba(255,255,255,.08), 0 30px 70px -35px #000; } .closing-card__star { margin:auto; color:#fde68a; font-size:2rem; text-shadow:0 0 20px #fbbf24; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } }