/* Landing page */
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, sans-serif; color: #1f2937; }
.container { max-width: 1100px; margin: 0 auto; padding: 0 1.5rem; }

.hero {
    background: linear-gradient(135deg, #1a73e8, #6d28d9);
    color: #fff; padding: 4rem 1rem; text-align: center;
}
.hero h1 { font-size: 2.4rem; margin: 0 0 0.4em; }
.hero .tagline { font-size: 1.1rem; opacity: 0.92; }
.btn { display: inline-block; padding: 0.6em 1.2em; border-radius: 4px; text-decoration: none; }
.btn:hover { text-decoration: none; }
.btn.primary { background: #fff; color: #1a73e8; }
.btn.primary:hover { background: #f3f4f6; }
.btn.big { padding: 0.8em 1.6em; font-size: 1.05em; margin: 0.3em; }

.features {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem; padding: 3rem 1.5rem;
}
.feature h3 { margin: 0 0 0.4em; }
.pricing { background: #f9fafb; padding: 3rem 1.5rem; text-align: center; }
.pricing h2 { margin-top: 0; }
.grid.plans {
    display: grid; gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    max-width: 1000px; margin: 1rem auto;
}
.card { background: #fff; padding: 1.2rem; border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05); }
.card.plan .price { font-size: 1.5em; font-weight: bold; }
.muted { color: #6b7280; }
.foot { text-align: center; padding: 1.5rem; color: #6b7280; font-size: 0.9em; }