:root{
  --navy:#082f49;
  --navy2:#0f4c6b;
  --teal:#159a8c;
  --coral:#f26b4f;
  --yellow:#f5c451;
  --cream:#fffaf0;
  --paper:#ffffff;
  --ink:#173042;
  --muted:#617381;
  --line:#dbe5ea;
  --green:#2f9e64;
  --shadow:0 18px 60px rgba(8,47,73,.13);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,Arial,Helvetica,sans-serif;
  background:var(--cream);
  color:var(--ink);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
.container{width:min(1160px,92%);margin:auto}
.topbar{
  background:var(--navy);
  color:#fff;
  text-align:center;
  padding:.62rem 1rem;
  font-size:.88rem;
  font-weight:700;
}
.header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,250,240,.96);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(8,47,73,.08);
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 0}
.brand{font-size:1rem;font-weight:950;letter-spacing:-.04em;color:var(--navy);line-height:1}
.brand span{display:block;color:var(--teal);font-size:.72rem;letter-spacing:.08em;margin-top:.28rem}
.navlinks{display:flex;gap:1.15rem;align-items:center;font-size:.9rem;font-weight:750;color:#355164}
.btn{
  display:inline-flex;justify-content:center;align-items:center;
  min-height:50px;padding:.9rem 1.25rem;border-radius:14px;
  background:var(--coral);color:#fff;font-weight:900;
  box-shadow:0 10px 24px rgba(242,107,79,.25);
  border:0;cursor:pointer;transition:.2s;
}
.btn:hover{transform:translateY(-2px);filter:brightness(.98)}
.btn.secondary{background:#fff;color:var(--navy);border:1px solid var(--line);box-shadow:none}
.hero{padding:4.5rem 0 3.2rem}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:3.2rem;align-items:center}
.eyebrow{
  display:inline-flex;padding:.46rem .75rem;border-radius:999px;
  background:#dff6f1;color:#08695f;font-weight:900;font-size:.78rem;letter-spacing:.04em
}
h1{font-size:clamp(2.55rem,5.6vw,5.1rem);line-height:.98;letter-spacing:-.065em;margin:1rem 0 1.1rem;color:var(--navy)}
h2{font-size:clamp(1.85rem,3.6vw,3.15rem);line-height:1.08;letter-spacing:-.045em;margin:.3rem 0 1rem;color:var(--navy)}
h3{color:var(--navy);font-size:1.18rem;margin:.4rem 0}
.lead{font-size:1.12rem;color:#405968;max-width:63ch}
.hero-actions{display:flex;gap:.8rem;flex-wrap:wrap;margin:1.45rem 0}
.micro-list{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;margin-top:1.2rem}
.micro{
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:.8rem;
  font-size:.84rem;font-weight:800;color:#365264
}
.product-visual{
  position:relative;background:#fff;border:1px solid var(--line);border-radius:28px;
  padding:1rem;box-shadow:var(--shadow)
}
.product-visual img{border-radius:20px;width:100%;aspect-ratio:1/1;object-fit:cover}
.float-badge{
  position:absolute;right:-12px;bottom:20px;background:var(--green);color:#fff;
  border:5px solid #fff;border-radius:999px;width:124px;height:124px;
  display:grid;place-items:center;text-align:center;font-weight:950;line-height:1.05;
  box-shadow:0 12px 30px rgba(47,158,100,.25)
}
.section{padding:4.8rem 0}
.section.white{background:#fff}
.section.dark{background:var(--navy);color:#fff}
.section.dark h2,.section.dark h3{color:#fff}
.section-head{max-width:780px;margin-bottom:2rem}
.kicker{text-transform:uppercase;font-weight:950;letter-spacing:.12em;color:var(--teal);font-size:.76rem}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem}
.card{
  background:#fff;border:1px solid var(--line);border-radius:20px;padding:1.35rem;
  box-shadow:0 8px 26px rgba(8,47,73,.06)
}
.card p{color:var(--muted);margin-bottom:0}
.icon{
  width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  background:#e5f7f3;font-size:1.35rem;margin-bottom:.8rem
}
.problem-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem}
.problem{padding:1.5rem;border-radius:20px;border:1px solid var(--line);background:#fff}
.problem.bad{border-color:#f6c9be;background:#fff8f5}
.problem.good{border-color:#bfe7d0;background:#f4fff8}
.checklist{list-style:none;padding:0;margin:1rem 0;display:grid;gap:.72rem}
.checklist li{position:relative;padding-left:1.65rem}
.checklist li:before{
  content:"✓";position:absolute;left:0;top:0;color:var(--green);font-weight:950
}
.method{display:grid;grid-template-columns:repeat(4,1fr);gap:.9rem}
.method-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:1.25rem}
.method-letter{font-size:2rem;font-weight:950;color:var(--coral)}
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:.9rem}
.gallery img{
  aspect-ratio:4/5;object-fit:cover;border-radius:16px;border:1px solid var(--line);
  box-shadow:0 10px 28px rgba(8,47,73,.08)
}
.offer-wrap{display:grid;grid-template-columns:1fr .8fr;gap:2rem;align-items:start}
.offer-box{
  background:#fff;border-radius:25px;border:1px solid var(--line);
  padding:1.6rem;box-shadow:var(--shadow);position:sticky;top:100px
}
.price-old{text-decoration:line-through;color:var(--muted);margin:0}
.price{font-size:3rem;font-weight:950;color:var(--navy);letter-spacing:-.05em}
.secure{font-size:.82rem;color:var(--muted);text-align:center;margin-top:.8rem}
.bonus-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.bonus{
  background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;
  box-shadow:0 8px 26px rgba(8,47,73,.06)
}
.bonus img{width:100%;aspect-ratio:16/10;object-fit:cover}
.bonus-body{padding:1.15rem}
.objections{display:grid;grid-template-columns:repeat(2,1fr);gap:.9rem}
.objection{background:#fff;border:1px solid var(--line);border-radius:17px;padding:1.1rem}
.objection strong{display:block;color:var(--navy);margin-bottom:.35rem}
.faq details{background:#fff;border:1px solid var(--line);border-radius:16px;padding:1rem 1.1rem;margin:.7rem 0}
.faq summary{font-weight:900;color:var(--navy);cursor:pointer}
.guarantee{
  display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:center;
  background:#f1fbf7;border:1px solid #bfe7d0;border-radius:22px;padding:1.4rem
}
.guarantee-icon{font-size:3rem}
.footer{background:#061f2f;color:#c8d5dc;padding:2.5rem 0}
.footer-grid{display:grid;grid-template-columns:2fr 1fr;gap:2rem}
.footer a{color:#fff}
.mobile-buy{
  display:none;position:fixed;bottom:0;left:0;right:0;z-index:60;
  background:#fff;border-top:1px solid var(--line);padding:.7rem;
  box-shadow:0 -8px 24px rgba(8,47,73,.12)
}
.mobile-buy .btn{width:100%}
.notice{font-size:.85rem;color:var(--muted);background:#fff7d6;border:1px solid #ecd47a;padding:.85rem;border-radius:12px}

@media(max-width:900px){
  .navlinks{display:none}
  .hero{padding:2.4rem 0 2rem}
  .hero-grid,.offer-wrap,.problem-grid,.grid-2{grid-template-columns:1fr}
  .product-visual{max-width:620px;margin:auto}
  .method{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:1fr}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .offer-box{position:static}
  .mobile-buy{display:block}
  body{padding-bottom:76px}
}
@media(max-width:560px){
  .container{width:min(94%,1160px)}
  .nav{padding:.78rem 0}
  .nav .btn{display:none}
  h1{font-size:2.55rem}
  .micro-list{grid-template-columns:1fr}
  .method,.bonus-grid,.objections,.gallery{grid-template-columns:1fr}
  .float-badge{width:96px;height:96px;font-size:.82rem;right:-4px}
  .section{padding:3.4rem 0}
}