body {
    margin:0;
    font-family: 'Segoe UI', sans-serif;
    background:#0f172a;
    color:white;
}

/* HERO */

.hero {
    background: linear-gradient(135deg,#0f172a,#1e293b);
    padding:100px 20px;
    text-align:center;
}

.hero-logo {
    width:120px;
    filter: brightness(0) invert(1);
    margin-bottom:20px;
}

.hero h1 {
    font-size:40px;
    margin-bottom:15px;
}

.hero p {
    max-width:600px;
    margin:0 auto 30px;
    color:#cbd5e1;
}

.btn-primary {
    background:#2563eb;
    color:white;
    padding:12px 25px;
    border-radius:8px;
    text-decoration:none;
    margin:5px;
}

.btn-secondary {
    border:1px solid #94a3b8;
    padding:12px 25px;
    border-radius:8px;
    color:white;
    text-decoration:none;
}

.btn-outline {
    border:1px solid #2563eb;
    padding:10px 20px;
    border-radius:6px;
    text-decoration:none;
    color:#2563eb;
}

/* FEATURES */

.features {
    background:#f8fafc;
    color:#111;
    padding:80px 20px;
    text-align:center;
}

.features-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:30px;
    max-width:1000px;
    margin:40px auto 0;
}

.feature-card {
    background:white;
    padding:30px;
    border-radius:16px;
    box-shadow:0 15px 35px rgba(0,0,0,0.05);
}

/* PRICING */

.pricing {
    padding:80px 20px;
    text-align:center;
}

.pricing-grid {
    display:flex;
    justify-content:center;
    gap:40px;
    flex-wrap:wrap;
}

.plan-card {
    background:white;
    color:#111;
    padding:40px;
    border-radius:16px;
    width:320px;
}

.plan-card.premium {
    border:2px solid #2563eb;
}

.price {
    font-size:32px;
    margin:15px 0;
}

/* FOOTER */

.footer {
    background:#0f172a;
    padding:40px 20px;
    text-align:center;
}

.footer-logo {
    width:80px;
    filter: brightness(0) invert(1);
    margin-bottom:20px;
}

.footer-links a {
    color:#94a3b8;
    margin:0 15px;
    text-decoration:none;
}