:root{
  --bg:#f6f9ff; --paper:#ffffff; --ink:#0f172a; --ink-2:#1f2a44; --mute:#5b6b7f; --line:#e6eaf2;
  --wa:#25D366; --wa-dark:#1DA851; --brand:#2a6df4; --accent:#16a34a; --amber:#f59e0b;
  --radius:18px; --shadow:0 10px 28px rgba(16,24,40,.08); --shadow-sm:0 6px 14px rgba(16,24,40,.06);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:radial-gradient(140% 160% at -10% -20%,#e9f1ff 0%,#f6f9ff 55%,#f6f9ff 100%);
  color:var(--ink);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
img{display:block;max-width:100%;height:auto}
a{text-decoration:none;color:inherit}

.ink-strong{color:var(--ink-2);font-weight:800}
.brand{color:var(--brand);font-weight:800}
.good{color:var(--accent);font-weight:800}
.muted{color:var(--mute)}
.elevated{box-shadow:var(--shadow)}

.header{position:sticky;top:0;z-index:50;background:rgba(246,249,255,.9);backdrop-filter:saturate(140%) blur(6px);border-bottom:1px solid var(--line)}
.nav{max-width:1080px;margin:0 auto;padding:10px 14px;display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.brandbox{display:flex;gap:10px;align-items:center;min-width:0}
.brandbox img{width:36px;height:36px;border-radius:10px;border:1px solid var(--line);object-fit:cover}
.brandbox .t{font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.badge{display:inline-flex;gap:6px;align-items:center;padding:6px 10px;border:1px solid var(--line);
       border-radius:999px;background:#fff;font-weight:800;box-shadow:var(--shadow-sm)}
.badge i{color:var(--accent)}
.cta-wa{display:inline-flex;gap:8px;align-items:center;background:var(--wa);color:#fff;
        padding:10px 14px;border-radius:12px;font-weight:800;box-shadow:var(--shadow)}
.cta-wa i{font-size:18px}
@media (max-width:640px){ .cta-wa{width:100%;justify-content:center;order:3} .badge{order:2} }

.wrap{max-width:1080px;margin:0 auto;padding:14px}

.hero{background:var(--paper);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1fr;gap:0}
@media(min-width:860px){ .hero-grid{grid-template-columns:1.05fr .95fr} }
.copy{padding:18px 18px 10px}
.kicker{font-size:12px;color:#3556b7;font-weight:800;letter-spacing:.3px;text-transform:uppercase}
.h1{margin:6px 0 8px;font-size:30px;line-height:1.1;font-weight:800;color:#0a1a4d}
.sub{margin:0 0 12px;color:var(--mute);font-size:14px;line-height:1.55}
.bullets{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}
.bullet{display:flex;gap:8px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px;box-shadow:var(--shadow-sm)}
.bullet i{color:var(--brand);margin-top:2px}
@media(max-width:560px){ .h1{font-size:26px} .bullets{grid-template-columns:1fr} }
.cta-row{display:grid;grid-template-columns:auto auto;gap:10px}
@media(max-width:560px){ .cta-row{grid-template-columns:1fr} .btn-wa,.btn-ghost{width:100%;justify-content:center} }
.btn-wa{display:inline-flex;gap:8px;align-items:center;background:var(--wa);color:#fff;padding:12px 16px;border-radius:12px;font-weight:800;box-shadow:var(--shadow)}
.btn-wa i{font-size:18px}
.btn-ghost{display:inline-flex;gap:8px;align-items:center;padding:12px 16px;border:1px solid var(--line);
           border-radius:12px;background:#fff;font-weight:800;box-shadow:var(--shadow-sm)}
.imgwrap{position:relative;height:230px}
@media(min-width:860px){ .imgwrap{height:100%} }

.grid{display:grid;gap:12px;margin:16px 0 6px;grid-template-columns:1fr}
@media(min-width:720px){ .grid{grid-template-columns:1fr 1fr} }
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:14px;box-shadow:var(--shadow)}
.title{font-weight:800;margin:0 0 8px;font-size:18px;color:#0a1a4d}
.desc{color:var(--mute);font-size:14px;line-height:1.55}

.steps{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.step{display:grid;grid-template-columns:48px 1fr;gap:10px;align-items:center;border:1px solid var(--line);
      background:#fff;border-radius:16px;padding:10px;box-shadow:var(--shadow-sm)}
.ico{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;background:#eef4ff;border:1px solid var(--line);font-size:22px}
.t1{font-weight:800;color:#0a1a4d}
.t2{color:var(--mute);font-size:13px;line-height:1.35}

.points{display:flex;flex-direction:column;gap:8px;margin:8px 0}
.pt{display:flex;gap:8px;align-items:flex-start}
.pt .dot{width:22px;height:22px;border-radius:10px;background:#eef4ff;border:1px solid var(--line);
         display:grid;place-items:center;color:#2563eb;font-size:14px;box-shadow:var(--shadow-sm);flex:0 0 auto}
.pt .txt{line-height:1.35;font-size:14px;color:#334155}
.pt .txt b{color:#0a1a4d}

.media{margin-top:12px;border-radius:14px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.media img{width:100%;height:190px;object-fit:cover}
@media(min-width:720px){ .media img{height:220px} }

.caps{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.cap{display:inline-flex;gap:8px;align-items:center;padding:8px 12px;border-radius:999px;border:1px solid var(--line);
     background:#ffffff;box-shadow:var(--shadow-sm);font-weight:800;color:#0a1a4d}
.cap i{color:#0ea5e9}

.reviews{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:14px;box-shadow:var(--shadow)}
.rev-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.rev-title{font-weight:800;color:#0a1a4d}
.ctrl{display:flex;gap:8px}
.iconbtn{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;cursor:pointer;border:1px solid var(--line);background:#fff;box-shadow:var(--shadow-sm)}
.viewport{position:relative;overflow:hidden}
.reel{display:flex;gap:10px;transition:transform .45s ease}
.rev{flex:0 0 calc((100% - 20px)/3);background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px;box-shadow:var(--shadow-sm)}
.top{display:flex;gap:10px;align-items:center}
.avatar{width:34px;height:34px;border-radius:50%;object-fit:cover;border:1px solid var(--line)}
.name{font-weight:700;font-size:13.5px}
.star{color:#f0b400;font-weight:900;margin-left:auto}
.body{margin-top:6px;font-size:13px;color:#5b6b7f;line-height:1.5;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;overflow:hidden}
@media(max-width:560px){ .reel{flex-direction:column} .rev{flex:0 0 auto} .viewport{max-height: calc(3 * 130px + 2 * 10px);} }

.footer{margin-top:22px;background:#ecf2ff;border-top:1px solid var(--line)}
.footer-inner{max-width:1080px;margin:0 auto;padding:18px 14px;display:grid;gap:12px}
.foot-cols{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:720px){ .foot-cols{grid-template-columns:2fr 1fr 1fr} }
.foot h4{margin:0 0 8px;font-weight:800;color:#0a1a4d}
.copy{font-size:12.5px;color:#48566b}
.foot a{color:#1f3ea6}

.float-cta{position:fixed;right:14px;bottom:16px;z-index:60}
.float-cta a{display:inline-flex;gap:10px;align-items:center;background:var(--wa);color:#fff;padding:12px 14px;border-radius:999px;font-weight:800;box-shadow:var(--shadow)}
.float-cta a:hover{background:var(--wa-dark)}