:root{
  --ink:#14201E; --teal:#0E9F90; --teal-600:#0B8577; --teal-700:#096a5f;
  --mint:#D9F3EE; --mint-2:#EDF9F6; --bg:#F6FBFA; --white:#fff;
  --muted:#53635F; --line:#E2EEEB; --amber:#E8A33D; --shadow:0 10px 30px rgba(14,159,144,.12);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Montserrat,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--ink);background:var(--bg);line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--teal-600);text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.btn{display:inline-block;background:var(--teal);color:#fff;font-weight:700;border:0;border-radius:14px;
  padding:15px 26px;font-size:17px;cursor:pointer;transition:background .15s,transform .05s;text-align:center}
.btn:hover{background:var(--teal-600)}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:#fff;color:var(--teal-700);border:2px solid var(--line)}
.pill{display:inline-block;background:var(--mint);color:var(--teal-700);font-weight:700;font-size:13px;
  letter-spacing:.3px;padding:6px 13px;border-radius:999px}
/* header */
header.nav{position:sticky;top:0;z-index:50;background:rgba(246,251,250,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:68px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:22px;color:var(--ink)}
.brand img{width:40px;height:40px}
.brand .w{color:var(--teal)}
.nav-right{display:flex;align-items:center;gap:14px}
.langtoggle{border:2px solid var(--line);background:#fff;border-radius:999px;font-weight:700;color:var(--teal-700);
  padding:7px 14px;cursor:pointer;font-size:14px}
/* hero */
.hero{padding:54px 0 30px}
.hero .grid{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
.hero h1{font-size:46px;line-height:1.08;margin:14px 0 14px;letter-spacing:-1px}
.hero h1 .hl{color:var(--teal)}
.hero p.sub{font-size:19px;color:var(--muted);margin:0 0 22px;max-width:30em}
.hero .cta-row{display:flex;gap:12px;flex-wrap:wrap}
.hero .assure{margin-top:16px;color:var(--muted);font-size:14px}
.illus{background:linear-gradient(160deg,var(--mint-2),var(--mint));border-radius:28px;padding:26px;box-shadow:var(--shadow)}
/* benefits */
.benefits{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:26px 0 8px}
.bene{background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px}
.bene .ic{font-size:22px}
.bene h3{margin:8px 0 4px;font-size:16px}
.bene p{margin:0;font-size:14px;color:var(--muted)}
section{padding:46px 0}
h2.sec{font-size:32px;text-align:center;margin:0 0 6px;letter-spacing:-.5px}
p.seclead{text-align:center;color:var(--muted);margin:0 auto 30px;max-width:40em}
/* bundles */
.bundles{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:26px;display:flex;flex-direction:column;position:relative}
.card.featured{border:2px solid var(--teal);box-shadow:var(--shadow)}
.ribbon{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--amber);color:#2a1c05;
  font-weight:800;font-size:12px;padding:6px 14px;border-radius:999px;white-space:nowrap}
.card h3{margin:4px 0 2px;font-size:22px}
.card .qty{color:var(--muted);font-size:14px;margin-bottom:12px}
.price{font-size:40px;font-weight:800;letter-spacing:-1px}
.price small{font-size:16px;color:var(--muted);font-weight:600}
.per{color:var(--muted);font-size:13px;margin:2px 0 14px}
.card ul{list-style:none;padding:0;margin:0 0 20px;flex:1}
.card li{padding:7px 0 7px 26px;position:relative;font-size:14.5px;border-bottom:1px dashed var(--line)}
.card li:before{content:"✓";position:absolute;left:0;color:var(--teal);font-weight:800}
/* table */
table.ship{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
table.ship th,table.ship td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line);font-size:15px}
table.ship th{background:var(--mint-2);font-size:13px;letter-spacing:.3px;text-transform:uppercase;color:var(--teal-700)}
table.ship tr:last-child td{border-bottom:0}
/* faq */
.faq details{background:#fff;border:1px solid var(--line);border-radius:14px;padding:4px 20px;margin-bottom:12px}
.faq summary{cursor:pointer;font-weight:700;padding:16px 0;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";float:right;color:var(--teal);font-size:22px;line-height:1}
.faq details[open] summary:after{content:"–"}
.faq p{margin:0 0 16px;color:var(--muted)}
/* policy page */
.policy{max-width:760px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:18px;padding:36px}
.policy h1{font-size:34px;margin:0 0 4px}
.policy h2{font-size:20px;margin:26px 0 8px}
.policy p,.policy li{color:#33403d;font-size:15.5px}
.updated{color:var(--muted);font-size:13px;margin-bottom:18px}
/* footer */
footer{background:var(--ink);color:#cfe6e1;padding:40px 0 30px;margin-top:30px}
footer .cols{display:flex;justify-content:space-between;flex-wrap:wrap;gap:24px}
footer a{color:#cfe6e1}
footer a:hover{color:#fff}
footer .fcol h4{color:#fff;font-size:14px;margin:0 0 10px;text-transform:uppercase;letter-spacing:.4px}
footer .fcol a{display:block;padding:4px 0;font-size:14px}
footer .legal{border-top:1px solid #2a3b38;margin-top:26px;padding-top:18px;font-size:13px;color:#8fb3ad}
.notice{background:var(--mint-2);border:1px solid var(--line);border-left:4px solid var(--teal);border-radius:12px;
  padding:16px 18px;margin:18px 0;font-size:14.5px;color:#33403d}
@media(max-width:860px){
  .hero .grid{grid-template-columns:1fr}
  .benefits{grid-template-columns:repeat(2,1fr)}
  .bundles{grid-template-columns:1fr}
  .hero h1{font-size:36px}
  h2.sec{font-size:26px}
}
/* store grid (multi-product) */
.store{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.prod{background:#fff;border:1px solid var(--line);border-radius:20px;padding:16px;display:flex;flex-direction:column}
.prod .thumb{border-radius:14px;height:190px;display:flex;align-items:center;justify-content:center;font-size:64px;
  background:linear-gradient(160deg,var(--mint-2),var(--mint));margin-bottom:14px}
.prod h3{margin:2px 0 4px;font-size:17px}
.prod .blurb{margin:0 0 12px;font-size:13.5px;color:var(--muted);flex:1}
.prod .prow{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px}
.prod .pprice{font-size:24px;font-weight:800;letter-spacing:-.5px}
.prod .pprice small{font-size:13px;color:var(--muted);font-weight:600;text-decoration:line-through;margin-left:6px}
.prod .tag{font-size:11px;font-weight:800;color:var(--teal-700);background:var(--mint);padding:4px 9px;border-radius:999px}
.prod .btn{padding:12px 16px;font-size:15px;width:100%}
.hero .illus .heroart{height:320px;border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:120px;
  background:repeating-linear-gradient(135deg,#fff 0 22px,#eafaf6 22px 44px)}
.trust{display:flex;gap:26px;justify-content:center;flex-wrap:wrap;color:var(--muted);font-size:14px;margin-top:8px}
.trust span{display:inline-flex;align-items:center;gap:7px}
@media(max-width:860px){ .store{grid-template-columns:repeat(2,1fr)} }

/* real product photos */
.hero .illus .heroimg{width:100%;height:auto;max-height:520px;object-fit:cover;border-radius:18px;box-shadow:var(--shadow)}
.prod .thumb{height:auto;aspect-ratio:1/1;overflow:hidden;padding:0;background:#f4f6f5;margin-bottom:8px}
.prod .thumb img{width:100%;height:100%;object-fit:cover}
.prod .gal{display:flex;gap:6px;margin-bottom:12px}
.prod .gthumb{flex:1;padding:0;border:2px solid transparent;border-radius:9px;overflow:hidden;cursor:pointer;background:none;aspect-ratio:1/1}
.prod .gthumb.on{border-color:var(--teal)}
.prod .gthumb img{width:100%;height:100%;object-fit:cover}
.rollgal{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0 0 22px}
.rollgal img{width:100%;height:auto;border-radius:16px}
/* fix: 2-col store grid overflowed 390px phones (pre-existing) */
.store>.prod{min-width:0}
@media(max-width:480px){ .store{grid-template-columns:1fr} }