:root{
  --blue:#0b4f8a;
  --yellow:#f2b705;
  --muted:#f3f5f7;
  --text:#0f172a;
  --sub:#475569;
  --shadow:0 14px 34px rgba(2,6,23,.18);
  --shadow2:0 10px 22px rgba(2,6,23,.10);
  --radius:18px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  color:var(--text);
  background:#fff;
  line-height:1.35;
}
a{color:inherit}
.container{max-width:980px;margin:0 auto;padding:0 18px}

/* HERO */
.hero{position:relative;min-height:560px;color:#fff;overflow:hidden;background:#071426}
.hero-bg{position:absolute;inset:0;background:center/cover no-repeat;transform:scale(1.02);filter:saturate(1.05) contrast(1.05)}
.hero-ov{position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,20,38,.35),rgba(7,20,38,.82))}
.hero-inner{position:relative;padding:56px 0 38px 0;text-align:center}
.hero h1{margin:0;font-weight:1000;letter-spacing:-.02em;font-size:44px;text-shadow:0 16px 34px rgba(0,0,0,.35)}
.hero .sub{margin:10px 0 0;font-weight:1000;color:var(--yellow);font-size:18px;text-shadow:0 16px 34px rgba(0,0,0,.35)}
.cta{margin-top:22px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 18px;border-radius:14px;font-weight:1000;text-decoration:none;
  box-shadow:0 14px 24px rgba(2,6,23,.22);
  min-width:210px;
  border:1px solid rgba(255,255,255,.18);
}
.btn-yellow{background:var(--yellow);color:#111827;border-color:transparent}
.btn-dark{background:rgba(11,18,32,.85);color:#fff}
.btn svg{width:22px;height:22px}
.wave{position:absolute;left:0;right:0;bottom:-2px;height:110px;width:100%;display:block}

/* WRAP */
.wrap{margin-top:-26px;background:#fff;border-top-left-radius:22px;border-top-right-radius:22px}

/* SECTION */
.section{padding:26px 0}
.title-row{text-align:center}
.title-row h2{margin:0;font-size:26px;font-weight:1000;letter-spacing:-.01em}
.divider{margin:14px auto 18px;height:1px;width:min(620px,100%);background:rgba(2,6,23,.12);position:relative}
.divider:after{content:"";position:absolute;left:50%;top:-2px;width:86px;height:4px;border-radius:999px;background:rgba(11,79,138,.25);transform:translateX(-50%)}

/* CARDS */
.grid3{display:grid;grid-template-columns:1fr;gap:14px}
.card{border-radius:var(--radius);overflow:hidden;background:#fff;box-shadow:var(--shadow);border:1px solid rgba(2,6,23,.06)}
.card-img{height:150px}
.card-img img{width:100%;height:100%;object-fit:cover;display:block}
.card-body{padding:14px;text-align:center}
.card-body .name{font-weight:1000;font-size:16px}
.card-body .code{color:var(--yellow);font-weight:1000}
.card-body .txt{margin:8px 0 0;color:var(--sub);font-weight:650}

/* PRICES */
.prices{display:grid;grid-template-columns:1fr;gap:14px}
.price{border-radius:var(--radius);background:#fff;box-shadow:var(--shadow2);border:1px solid rgba(2,6,23,.10);overflow:hidden}
.price-top{padding:14px 14px 10px;text-align:center;font-weight:1000}
.price-bottom{background:var(--yellow);padding:14px;text-align:center}
.price-bottom .val{font-size:40px;font-weight:1100;color:#111827;letter-spacing:-.02em}

/* FAQ */
.faq{display:flex;flex-direction:column;gap:12px}
details{border-radius:14px;background:#fff;border:1px solid rgba(2,6,23,.10);box-shadow:var(--shadow2);overflow:hidden}
summary{list-style:none;padding:14px;cursor:pointer;font-weight:1000;display:flex;align-items:center;justify-content:space-between}
summary::-webkit-details-marker{display:none}
.chev{transition:transform .18s ease}
details[open] .chev{transform:rotate(180deg)}
.faq-a{padding:0 14px 14px;color:var(--sub);font-weight:650}

/* BLOG */
.blog-grid{display:grid;grid-template-columns:1fr;gap:12px}
.post-card{padding:14px;border-radius:14px;border:1px solid rgba(2,6,23,.10);box-shadow:var(--shadow2);background:#fff}
.post-card b{display:block;margin-bottom:6px}
.post-card a{text-decoration:none}
.post-card small{color:var(--sub);font-weight:650}

/* FOOTER + FLOAT */
.foot{padding:22px 0 92px;text-align:center;color:rgba(15,23,42,.75);font-weight:650}
.float{position:fixed;bottom:16px;width:66px;height:66px;border-radius:999px;box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;text-decoration:none;z-index:9999}
.float svg{width:30px;height:30px}
.float-wa{left:16px;background:#25D366;color:#fff}
.float-call{right:16px;background:var(--yellow);color:#111827}

@media (min-width:720px){
  .hero h1{font-size:58px}
  .hero .sub{font-size:20px}
  .grid3{grid-template-columns:repeat(3,1fr)}
  .prices{grid-template-columns:repeat(3,1fr)}
  .blog-grid{grid-template-columns:repeat(3,1fr)}
}