/* Landing page */
body.landing { background: var(--bg); overflow-x: hidden; }
.blobs { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.blobs i { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .5; }
.blobs i:nth-child(1) { width: 520px; height: 520px; background: #7b5cff; top: -160px; left: -120px; }
.blobs i:nth-child(2) { width: 460px; height: 460px; background: #19c39a; top: 220px; right: -180px; opacity: .32; }
.blobs i:nth-child(3) { width: 380px; height: 380px; background: #ff7aa8; bottom: -120px; left: 30%; opacity: .2; }
[data-theme="dark"] .blobs i { opacity: .28; } [data-theme="dark"] .blobs i:nth-child(2) { opacity: .18; } [data-theme="dark"] .blobs i:nth-child(3) { opacity: .1; }
.wrap-l { width: min(1140px, 100% - 2.4rem); margin: 0 auto; }
.nav-l { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 0; position: sticky; top: 0; z-index: 30; }
.nav-l .pill { display: flex; align-items: center; gap: 1rem; width: 100%; padding: .55rem .6rem .55rem 1rem; border-radius: 20px; background: var(--glass); backdrop-filter: blur(16px) saturate(1.4); border: 1px solid var(--line); }
.nav-l .brand { padding: 0; font-size: 1.25rem; } .nav-l .links { display: flex; gap: 1.4rem; margin-left: 1.6rem; font-weight: 700; font-size: .92rem; } .nav-l .links a { color: var(--muted); } .nav-l .links a:hover { color: var(--text); }
.nav-l .sp { flex: 1; }
@media (max-width: 760px) { .nav-l .links { display: none; } .nav-l .hide-m { display: none; } }
.hero-l { display: grid; grid-template-columns: 1.1fr .9fr; gap: 2rem; align-items: center; padding: 3rem 0 4rem; }
@media (max-width: 900px) { .hero-l { grid-template-columns: 1fr; padding-top: 1.5rem; text-align: center; } .hero-l .cta { justify-content: center; } .hero-l .trust { justify-content: center; } .hero-l p.lead { margin-inline: auto; } }
.eyebrow { display: inline-flex; align-items: center; gap: .5rem; padding: .4rem .85rem; border-radius: 99px; background: var(--accent-soft); color: var(--accent); font-weight: 800; font-size: .8rem; margin-bottom: 1.1rem; }
.hero-l h1 { font-size: clamp(2.5rem, 6.4vw, 4.5rem); font-weight: 800; letter-spacing: -.045em; line-height: 1.02; }
.grad { background: linear-gradient(120deg, var(--accent), var(--accent2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-l p.lead { font-size: 1.18rem; color: var(--muted); margin: 1.2rem 0 1.8rem; max-width: 52ch; }
.cta { display: flex; gap: .8rem; flex-wrap: wrap; } .trust { display: flex; gap: 1.2rem; margin-top: 1.6rem; color: var(--muted); font-size: .86rem; font-weight: 700; flex-wrap: wrap; } .trust span { display: inline-flex; gap: .4rem; align-items: center; }
/* phone mock */
.phone { width: min(330px, 86%); margin: 0 auto; border-radius: 42px; padding: 11px; background: linear-gradient(160deg, #2a2d4a, #0d0f1d); box-shadow: 0 50px 80px -30px rgba(60, 30, 180, .55), 0 0 0 1.5px rgba(255, 255, 255, .08) inset; transform: rotate(2.5deg); position: relative; }
.phone .scr { border-radius: 32px; background: var(--bg); overflow: hidden; padding: 1rem .9rem 1.1rem; min-height: 560px; position: relative; }
.phone .notch { position: absolute; top: 8px; left: 50%; width: 90px; height: 22px; background: #0d0f1d; border-radius: 99px; transform: translateX(-50%); z-index: 3; }
.phone .hero { border-radius: 22px; padding: 1.1rem; margin-top: 1.3rem; } .phone .hero .big { font-size: 3.1rem; } .phone .hero .stats { gap: .4rem; } .phone .hero .stat { padding: .5rem .55rem; } .phone .hero .stat b { font-size: .85rem; }
.mini { display: flex; align-items: center; gap: .6rem; padding: .6rem .7rem; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); margin-top: .6rem; font-size: .8rem; } .mini .avatar { width: 34px; height: 34px; font-size: 1.05rem; border-radius: 11px; }
.float { position: absolute; z-index: 4; padding: .65rem .8rem; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); font-size: .78rem; font-weight: 700; display: flex; gap: .55rem; align-items: center; animation: bob 5s ease-in-out infinite; max-width: 220px; }
.float.a { top: 120px; left: -34px; } .float.b { bottom: 90px; right: -30px; animation-delay: -2.4s; }
@keyframes bob { 50% { transform: translateY(-9px); } } @media (max-width: 520px) { .float.a { left: -8px; } .float.b { right: -8px; } }
section.sec { padding: 4rem 0; } .sec-h { text-align: center; max-width: 640px; margin: 0 auto 2.6rem; } .sec-h h2 { font-size: clamp(1.9rem, 4.4vw, 2.9rem); letter-spacing: -.04em; } .sec-h p { color: var(--muted); margin-top: .8rem; font-size: 1.06rem; }
.feat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } @media (max-width: 900px) { .feat { grid-template-columns: 1fr 1fr; } } @media (max-width: 580px) { .feat { grid-template-columns: 1fr; } }
.fcard { padding: 1.4rem; border-radius: 24px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); transition: transform .2s, box-shadow .2s; } .fcard:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.fcard .fi { width: 50px; height: 50px; border-radius: 16px; display: grid; place-items: center; font-size: 1.5rem; margin-bottom: 1rem; background: var(--accent-soft); } .fcard h3 { font-size: 1.12rem; margin-bottom: .4rem; } .fcard p { color: var(--muted); font-size: .94rem; }
.fcard.big { grid-column: span 2; background: var(--hero); color: #fff; border: 0; } .fcard.big p { color: rgba(255, 255, 255, .86); } .fcard.big .fi { background: rgba(255, 255, 255, .2); } @media (max-width: 580px) { .fcard.big { grid-column: auto; } }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; counter-reset: s; } @media (max-width: 800px) { .steps { grid-template-columns: 1fr; } }
.step { position: relative; padding: 1.5rem 1.4rem 1.4rem; border-radius: 24px; background: var(--surface2); border: 1px solid var(--line); } .step::before { counter-increment: s; content: counter(s); position: absolute; top: -18px; left: 20px; width: 38px; height: 38px; border-radius: 13px; background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #fff; font-weight: 800; display: grid; place-items: center; } .step h3 { margin: .5rem 0 .4rem; } .step p { color: var(--muted); font-size: .94rem; }
.secure { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: center; padding: 2.4rem; border-radius: 32px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); } @media (max-width: 820px) { .secure { grid-template-columns: 1fr; padding: 1.5rem; } }
.secure ul { list-style: none; padding: 0; margin: 1.2rem 0 0; display: grid; gap: .8rem; } .secure li { display: flex; gap: .7rem; align-items: flex-start; font-weight: 600; } .secure li .tick { width: 24px; height: 24px; border-radius: 8px; background: color-mix(in srgb, var(--income) 18%, transparent); color: var(--income); display: grid; place-items: center; flex: none; margin-top: 1px; }
.flow { display: grid; gap: .7rem; } .flow .n { display: flex; align-items: center; gap: .8rem; padding: .85rem 1rem; border-radius: 16px; background: var(--surface2); border: 1px solid var(--line); font-weight: 700; font-size: .92rem; } .flow .n .em { font-size: 1.4rem; }
.cta-band { text-align: center; padding: 3.2rem 1.5rem; border-radius: 34px; background: var(--hero); color: #fff; margin: 1rem 0 3rem; } .cta-band h2 { font-size: clamp(1.8rem, 4.4vw, 2.8rem); letter-spacing: -.04em; } .cta-band p { opacity: .9; margin: .8rem auto 1.6rem; max-width: 46ch; }
.btn.white { background: #fff; color: #3b27b8; border-color: transparent; }
footer.l { padding: 2rem 0 3rem; color: var(--muted); font-size: .88rem; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
/* auth sheet */
.auth { max-width: 460px; } .auth .sheet-h { margin-bottom: .6rem; } .strength { height: 5px; border-radius: 9px; background: var(--line); overflow: hidden; margin-top: .4rem; } .strength i { display: block; height: 100%; width: 0; transition: .3s; border-radius: 9px; }
.devhint { padding: .6rem .8rem; border-radius: 12px; background: color-mix(in srgb, var(--warn) 16%, transparent); font-size: .84rem; font-weight: 700; text-align: center; }
.err-box { padding: .7rem .9rem; border-radius: 12px; background: color-mix(in srgb, var(--crit) 12%, transparent); color: var(--crit); font-weight: 700; font-size: .88rem; }