:root{--bg:#0f172a;--panel:#1e293b;--muted:#cbd5e1;--accent:#f59e0b;--line:#e2e8f0;--text:#0f172a}*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;background:#f8fafc;color:var(--text)}a{text-decoration:none;color:inherit}.site-header{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:18px 7vw;background:rgba(15,23,42,.94);color:#fff;backdrop-filter:blur(12px)}.brand{display:flex;gap:10px;align-items:center;font-weight:900;font-size:1.25rem}.brand-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:14px;background:var(--accent)}nav{display:flex;gap:22px;color:var(--muted);font-weight:700}.nav-cta{background:var(--accent);color:#111827;padding:10px 16px;border-radius:999px}.hero{display:grid;grid-template-columns:minmax(0,1.1fr) 420px;gap:50px;align-items:center;min-height:720px;padding:80px 7vw;color:#fff;background:radial-gradient(circle at 80% 20%,rgba(245,158,11,.28),transparent 28%),linear-gradient(135deg,#0f172a,#111827 70%)}.eyebrow{color:var(--accent);text-transform:uppercase;letter-spacing:.12em;font-weight:900;font-size:.82rem}h1{font-size:clamp(3rem,7vw,5.6rem);line-height:.95;margin:16px 0 22px;max-width:780px}h2{font-size:clamp(2rem,4vw,3.2rem);line-height:1;margin:10px 0 22px}.hero-text{font-size:1.3rem;line-height:1.55;color:var(--muted);max-width:680px}.actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}.button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:16px;font-weight:900}.primary{background:var(--accent);color:#111827}.secondary{background:rgba(255,255,255,.10);color:#fff;border:1px solid rgba(255,255,255,.18)}.note{color:var(--muted)}.center{text-align:center}.phone{width:360px;min-height:620px;margin:auto;border-radius:44px;padding:28px;background:#f8fafc;border:10px solid #020617;box-shadow:0 35px 80px rgba(0,0,0,.35)}.notch{width:120px;height:22px;margin:0 auto 30px;border-radius:99px;background:#020617}.app-card{display:grid;gap:6px;margin-bottom:18px;padding:22px;border-radius:24px;background:#fff;color:#0f172a;box-shadow:0 12px 30px rgba(15,23,42,.08)}.app-card.dark{background:#0f172a;color:#fff}.app-card span{color:var(--accent);font-weight:800}.pill-row{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;padding:22px 7vw;background:#020617;color:var(--muted);font-weight:800}.section{padding:90px 7vw}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.grid article{padding:28px;background:#fff;border:1px solid var(--line);border-radius:28px;box-shadow:0 12px 35px rgba(15,23,42,.05)}.grid article div{font-size:1.6rem;margin-bottom:12px}.grid p,.split p,.support p{color:#475569;line-height:1.65}.split{display:grid;grid-template-columns:1fr 1fr;gap:50px;background:#111827;color:#fff}.stats{display:grid;grid-template-columns:1fr 1fr;gap:18px}.stats div{display:grid;gap:6px;padding:24px;border-radius:24px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12)}.stats strong{color:var(--accent);font-size:1.6rem}.stats span{color:var(--muted)}.screens{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}.screens div{aspect-ratio:9/16;display:grid;place-items:center;border-radius:34px;background:linear-gradient(#0f172a 0 18%,transparent 18%),repeating-linear-gradient(#f8fafc 0 52px,#e2e8f0 52px 54px);border:8px solid #020617;box-shadow:0 20px 45px rgba(15,23,42,.15);color:#fff;font-weight:900}.support{text-align:center;background:#fff}footer{display:flex;justify-content:space-between;gap:30px;padding:38px 7vw;background:#020617;color:#fff}footer p{color:var(--muted);max-width:620px}.footer-links{display:flex;gap:18px;align-items:center;color:var(--muted)}.legal{max-width:850px;margin:0 auto;padding:60px 24px}.legal h1{color:#0f172a;font-size:3rem}.legal h2{font-size:1.5rem;margin-top:34px}.legal p,.legal li{color:#475569;line-height:1.7}@media(max-width:900px){nav{display:none}.hero,.grid,.split,.screens{grid-template-columns:1fr}.hero{min-height:auto}.phone{width:min(100%,360px)}footer{flex-direction:column}.footer-links{flex-wrap:wrap}}

.screens {
    display: grid;
    grid-template-columns: repeat(3, minmax(280px, 1fr));
    gap: 32px;
    align-items: start;
    margin-top: 32px;
}

    .screens img {
        width: 100%;
        max-width: 360px;
        height: auto;
        display: block;
        margin: 0 auto;
        border-radius: 28px;
        border: 8px solid #020617;
        background: #020617;
        box-shadow: 0 20px 45px rgba(15, 23, 42, .18);
    }

@media (max-width: 900px) {
    .screens {
        grid-template-columns: 1fr;
    }

        .screens img {
            max-width: 420px;
        }
}

.support form {
    max-width: 600px;
    margin: 30px auto 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.support input,
.support textarea {
    padding: 14px;
    border-radius: 12px;
    border: 1px solid #CBD5E1;
    font-size: 16px;
}

.support textarea {
    resize: vertical;
}

.hero {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(15, 23, 42, .98), rgba(17, 24, 39, .86) 54%, rgba(17, 24, 39, .54)),
        url("../images/dashboard.jpg") right center / auto 100% no-repeat,
        #0f172a;
}

.hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

.hero-badges span {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 8px;
    background: rgba(255, 255, 255, .08);
    color: #e2e8f0;
    font-size: .88rem;
    font-weight: 800;
}

.phone {
    display: grid;
    gap: 14px;
    align-content: start;
    min-height: 0;
}

.phone .app-card {
    margin-bottom: 0;
    border-radius: 8px;
    padding: 16px;
}

.phone-screenshot {
    width: 100%;
    display: block;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    box-shadow: 0 14px 30px rgba(15, 23, 42, .16);
}

@media (max-width: 900px) {
    .hero {
        background:
            linear-gradient(180deg, rgba(15, 23, 42, .98), rgba(17, 24, 39, .92)),
            url("../images/dashboard.jpg") center top / cover no-repeat,
            #0f172a;
    }
}
