:root{
  --bg:#0b172a;
  --ink:#0f172a;
  --muted:#6b7280;
  --brand:#1e40af;
  --brand-2:#60a5fa;
  --white:#ffffff;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:#0f172a;scroll-behavior:smooth}
img{max-width:100%;display:block}
.container{max-width:1100px;margin:0 auto;padding:0 20px}
.site-header{position:sticky;top:0;background:rgba(255,255,255,0.9);backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid #e5e7eb;z-index:50}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand img{height:60px}
.menu{display:flex;gap:20px;align-items:center}
.menu a{color:#0f172a;text-decoration:none;font-weight:600}
.menu .btn-sm{padding:8px 12px;border-radius:10px;background:var(--brand);color:var(--white)}
.nav-toggle{display:none;font-size:24px;background:none;border:none}

.hero{background:linear-gradient(120deg, var(--bg), #0a2a53);color:#fff;padding:96px 0}
.hero-inner{max-width:900px}
.hero h1{font-size:40px;line-height:1.1;margin:0 0 12px}
.hero p{font-size:18px;color:#e5e7eb;margin:0 0 24px}
.cta{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;background:var(--brand);color:#fff;padding:14px 18px;border-radius:12px;text-decoration:none;font-weight:700;border:2px solid var(--brand)}
.btn:hover{filter:brightness(1.05)}
.btn-outline{background:transparent;color:#fff;border-color:var(--brand-2)}

.section{padding:72px 0}
.section.alt{background:#f8fafc}
.section h2{font-size:28px;margin:0 0 24px}
.grid{display:grid;gap:18px}
.cards{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card{background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:18px;box-shadow:0 1px 2px rgba(0,0,0,0.04)}
.card h3{margin:0 0 8px;font-size:18px}
.card p{margin:0;color:#374151}

.plans{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.plan{background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:20px;box-shadow:0 2px 4px rgba(0,0,0,0.05)}
.plan h3{margin:0 0 8px}
.plan .price{font-size:28px;font-weight:800;margin:8px 0}
.plan .price span{font-size:14px;color:#6b7280;font-weight:600}
.plan ul{margin:10px 0 0;padding-left:18px;color:#374151}
.featured{border-color:var(--brand);box-shadow:0 8px 24px rgba(30,64,175,.15)}

.center{text-align:center;margin-top:18px}
.narrow{max-width:800px;margin:0 auto}
.bullets{margin:8px 0 0;padding-left:18px;color:#374151}

.contact{background:linear-gradient(180deg,#f8fafc, #fff)}
.contact-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.contact-card{background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:16px;box-shadow:0 2px 4px rgba(0,0,0,0.05)}
.contact-card h3{margin:0 0 10px}
label{display:block;font-weight:600;margin:10px 0 6px}
input,textarea{width:100%;padding:12px;border:1px solid #d1d5db;border-radius:10px;font:inherit}
small.muted{display:block;margin-top:6px;color:#6b7280}

.site-footer{background:#0b1222;color:#cbd5e1;padding:24px 0}
.site-footer a{color:#cbd5e1}

@media (max-width:840px){
  .menu{display:none;position:absolute;top:64px;right:10px;background:#fff;border:1px solid #e5e7eb;border-radius:12px;flex-direction:column;padding:10px;box-shadow:0 10px 30px rgba(0,0,0,0.1)}
  .menu.open{display:flex}
  .nav-toggle{display:block}
}

.contact-card {
    text-align: center;
}

.site-footer .foot {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.contact-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.pricing-note {
    font-size: 0.85em;
    color: #666;
    text-align: center;
    margin-top: 10px;
    font-style: italic;
    display: block;
    width: 100%;
}