:root {
  --navy: #12233F;
  --blue: #1E88E5;
  --graphite: #2E3440;
  --light: #F5F7FA;
  --white: #ffffff;
}
* { box-sizing: border-box; }
body { margin:0; font-family: Arial, sans-serif; color:#1a2433; background:#fff; line-height:1.5; }
img { max-width:100%; display:block; }
.container { width:min(1120px, 92%); margin:0 auto; }
.topbar { position:sticky; top:0; background:rgba(18,35,63,.96); backdrop-filter: blur(10px); z-index:99; }
.topbar-inner { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:14px 0; }
.logo { width:260px; height:auto; }
nav a { color:#fff; text-decoration:none; margin-left:18px; font-weight:600; }
.btn-nav { background:var(--blue); padding:10px 16px; border-radius:999px; }
.hero { background:linear-gradient(135deg, var(--navy), #203f74); color:#fff; padding:64px 0; }
.hero-grid { display:grid; grid-template-columns: 1.05fr .95fr; gap:36px; align-items:center; }
.tag { background:rgba(255,255,255,.12); display:inline-block; padding:8px 14px; border-radius:999px; font-size:14px; margin-bottom:18px; }
.hero h1 { font-size: clamp(40px, 7vw, 72px); margin:0; }
.hero-sub { color:#cfe4ff; font-size: clamp(22px, 3.5vw, 34px); margin:8px 0 18px; font-weight:700; }
.hero-text { max-width:620px; font-size:18px; }
.hero-actions { display:flex; gap:14px; flex-wrap:wrap; margin-top:24px; }
.btn-primary, .btn-secondary { display:inline-block; text-decoration:none; border-radius:12px; padding:14px 20px; font-weight:700; }
.btn-primary { background:var(--blue); color:#fff; border:none; cursor:pointer; }
.btn-secondary { background:#fff; color:var(--navy); }
.hero-media img { border-radius:24px; box-shadow:0 25px 70px rgba(0,0,0,.25); }
.section { padding:70px 0; }
.section h2 { font-size:38px; margin:0 0 8px; color:var(--navy); }
.section-intro { max-width:760px; color:#5a6574; margin-bottom:28px; }
.cards { display:grid; grid-template-columns: repeat(4,1fr); gap:22px; }
.card { background:#fff; border:1px solid #e4ebf4; border-radius:18px; overflow:hidden; box-shadow:0 8px 22px rgba(15,35,70,.06); }
.card img { height:190px; width:100%; object-fit:cover; }
.card h3, .card p { padding:0 18px; }
.card h3 { margin:18px 0 8px; color:var(--navy); }
.card p { padding-bottom:22px; color:#586171; }
.section-dark { background:var(--light); }
.plans { display:grid; grid-template-columns: repeat(3,1fr); gap:22px; margin-top:22px; }
.plan { background:#fff; border-radius:18px; padding:28px; border:1px solid #dde6f1; }
.plan.featured { border:2px solid var(--blue); transform:translateY(-6px); }
.price { font-size:36px; color:var(--navy); font-weight:700; }
.price span { font-size:16px; color:#6b7788; }
.plan ul, .checklist { padding-left:18px; }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:start; }
.box { background:var(--navy); color:#fff; padding:28px; border-radius:18px; }
.contact { background:#fff; }
.contact-form { background:var(--light); padding:24px; border-radius:18px; display:grid; gap:14px; }
.contact-form input, .contact-form textarea { width:100%; border:1px solid #ccd7e5; border-radius:12px; padding:14px; font:inherit; }
.footer { background:var(--navy); color:#cfe4ff; padding:22px 0; text-align:center; }
@media (max-width: 900px) {
  .hero-grid, .grid-2, .cards, .plans { grid-template-columns: 1fr; }
  .topbar-inner { flex-direction:column; align-items:flex-start; }
  nav a { margin-left:0; margin-right:14px; display:inline-block; margin-top:8px; }
  .logo { width:220px; }
}
.whatsapp-float {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    background: #25D366;
    color: #fff;
    font-size: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    z-index: 999;
    transition: 0.3s;
}

.whatsapp-float:hover {
    transform: scale(1.1);
    background: #1ebe5d;
}