:root{
  --bg: #f6f8f9;
  --paper: #ffffff;
  --ink: #111111;
  --muted: #6b7280;
  --brand: #13B5AE; /* teal */
  --brand-ink: #000000; /* black logo/text */
  --radius: 14px;
  --shadow: 0 12px 30px rgba(0,0,0,.08);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.55;
}

.container{width:min(1120px, 92vw); margin:0 auto}

.header{
  position: sticky; top:0; z-index:50;
  background: rgba(255,255,255,.9); backdrop-filter: blur(6px);
  border-bottom: 1px solid #e5e7eb;
}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.brand{display:flex; gap:10px; align-items:center; text-decoration:none; color:var(--ink); font-weight:800; letter-spacing:.5px}
.brand img{filter: grayscale(1)}
.nav{display:flex; gap:18px; align-items:center}
.nav a{color:var(--ink); text-decoration:none; font-weight:600}
.nav .btn{margin-left:6px}
.nav-toggle{display:none; background:transparent; border:0; padding:6px; cursor:pointer}
.nav-toggle span{display:block;width:24px;height:2px;background:#111;margin:5px 0;border-radius:2px}

.btn{display:inline-block; background:var(--brand); color:#fff; text-decoration:none; font-weight:700; padding:12px 18px; border-radius:12px; box-shadow:var(--shadow); border:2px solid var(--brand); transition:transform .05s ease}
.btn:hover{transform:translateY(-1px)}
.btn--ghost{background:transparent; color:var(--ink); border-color:#d1d5db; box-shadow:none}
.btn--xl{padding:14px 22px; font-size:1.05rem}

.hero{padding:48px 0 24px; background:linear-gradient(120deg, #e9fbfb, #ffffff)}
.hero-inner{display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center}
.hero h1{font-size: clamp(28px, 4vw, 48px); line-height:1.1; margin:0 0 12px}
.hero p{color:var(--muted); margin:0 0 18px}
.hero .cta{display:flex; gap:10px; flex-wrap:wrap}
.hero .bullets{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px 16px; padding:12px 0 0 0; margin:0; list-style:'✓ ';}
.hero-media img{width:100%; height:100%; object-fit:cover; border-radius: 24px; box-shadow: var(--shadow)}

.badges{padding:10px 0 0}
.badges-inner{display:grid; grid-template-columns:repeat(4,1fr); gap:10px}
.badge{background:var(--paper); border:1px solid #e5e7eb; padding:10px 14px; border-radius:999px; display:flex; align-items:center; gap:8px; justify-content:center}

.section{padding:56px 0}
.section--alt{background: #fff}
.section h2{font-size: clamp(22px, 2.6vw, 34px); margin:0 0 18px}
.grid{display:grid; gap:16px}
.cards{grid-template-columns: repeat(3, minmax(0,1fr))}
.card{background:var(--paper); border:1px solid #e5e7eb; padding:18px; border-radius:16px; box-shadow: var(--shadow)}
.card h3{margin:0 0 8px}

.two-col{display:grid; grid-template-columns: 1fr 1fr; gap:28px; align-items:center}
.two-col img{width:100%; height:100%; object-fit:cover; border-radius:16px; box-shadow: var(--shadow)}

.prices{grid-template-columns: repeat(3, minmax(0,1fr))}
.price{background:var(--paper); border:1px solid #e5e7eb; padding:18px; border-radius:16px; box-shadow: var(--shadow)}
.price.highlight{border-color: var(--brand)}
.price .value{font-size: 26px; font-weight:800}

.form{display:grid; gap:12px; background:var(--paper); border:1px solid #e5e7eb; padding:18px; border-radius:16px; box-shadow: var(--shadow)}
.form input, .form select, .form textarea{
  width:100%; padding:12px 14px; border:1px solid #d1d5db; border-radius:12px; font-size:16px; outline: none;
}
.form label{display:grid; gap:6px; font-weight:600}
.form .form-note{color:var(--muted); margin:4px 0 0}

.footer{background:#0f172a; color:#e2e8f0; padding:40px 0 24px}
.footer a{color:#e2e8f0; text-decoration:none}
.footer-inner{display:grid; grid-template-columns: 1.1fr .9fr .7fr; gap:20px}
.links{list-style:none; padding:0; margin:0; display:grid; gap:8px}
.brand-foot{display:flex; align-items:center; gap:10px; font-weight:800}
.legal{border-top:1px solid rgba(226,232,240,.15); margin-top:16px; padding-top:12px; color:#94a3b8}

.fab{position:fixed; right:16px; width:54px; height:54px; border-radius:50%; display:grid; place-items:center; font-size:24px; text-decoration:none; box-shadow: var(--shadow); border:2px solid #fff}
.fab--call{bottom:88px; background:#111; color:#fff}
.fab--wa{bottom:24px; background:#25D366; color:#fff}

@media (max-width: 980px){
  .hero-inner{grid-template-columns:1fr}
  .badges-inner{grid-template-columns:repeat(2,1fr)}
  .cards{grid-template-columns: repeat(2, minmax(0,1fr))}
  .two-col{grid-template-columns:1fr}
  .prices{grid-template-columns: repeat(1, minmax(0,1fr))}
  .nav{display:none}
  .nav.open{display:flex; position:absolute; top:64px; left:0; right:0; background:#fff; padding:14px; flex-direction:column; gap:10px; border-bottom:1px solid #e5e7eb}
  .nav-toggle{display:block}
}