:root{--ink:#0b2a35;--teal:#0f4c5c;--cyan:#3fd0e0;--mist:#eaf7f9;--lemon:#ffc21a;--lemon-d:#e6a800;--text:#1d3a45}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Figtree,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;color:var(--text);background:#fff;line-height:1.6;font-size:17px}
body.modal-open{overflow:hidden}
#page{transition:filter .35s}
body.modal-open #page{filter:blur(7px)}
h1,h2,.brand{font-family:"Bricolage Grotesque",Figtree,Arial,sans-serif;color:var(--ink);line-height:1.12}
.top{display:flex;justify-content:space-between;align-items:center;padding:16px 6vw;background:var(--ink);color:#bfeaf0}
.brand{font-size:1.5rem;font-weight:800;color:#fff}
.brand::first-letter{color:var(--cyan)}
.tag{font-size:.85rem}
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:24px;align-items:center;max-width:1100px;margin:0 auto;padding:48px 6vw 32px}
.hero h1{font-size:clamp(2rem,4.6vw,3.3rem);font-weight:800;letter-spacing:-.02em}
.lead{margin:18px 0 26px;font-size:1.15rem;max-width:34em}
.hero-img{display:flex;justify-content:center;background:radial-gradient(circle at 50% 55%,var(--mist) 0 58%,transparent 59%)}
.hero-img img{width:100%;max-width:440px;height:auto}
.btn{display:inline-block;background:var(--lemon);color:var(--ink);font-weight:700;font-size:1.1rem;text-decoration:none;padding:18px 34px;border-radius:999px;box-shadow:0 6px 0 var(--lemon-d),0 12px 24px rgba(11,42,53,.22);transition:transform .15s,box-shadow .15s;animation:pulse 2.4s ease-in-out infinite}
.btn:hover{transform:translateY(2px);box-shadow:0 4px 0 var(--lemon-d),0 8px 18px rgba(11,42,53,.22)}
.btn:focus-visible,.close:focus-visible,.skip:focus-visible,a:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
@keyframes pulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.08)}}
.micro{margin-top:14px;font-size:.88rem;color:#587480}
.facts{background:var(--mist);padding:44px 6vw}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;max-width:1100px;margin:0 auto}
.facts h2{font-size:1.2rem;margin-bottom:6px;border-left:4px solid var(--cyan);padding-left:12px}
.facts p{font-size:.98rem}
.ingredients{text-align:center;padding:52px 6vw 20px;max-width:900px;margin:0 auto}
.ingredients h2,.final h2{font-size:clamp(1.5rem,3vw,2.1rem);margin-bottom:20px}
.ingredients ul{list-style:none;display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.ingredients li{background:var(--teal);color:#fff;padding:9px 18px;border-radius:999px;font-weight:500;font-size:.95rem}
.note{margin-top:18px;font-size:.9rem;color:#587480}
.final{margin:40px auto 56px;max-width:900px;text-align:center;background:var(--ink);color:#d3eef2;padding:52px 6vw;border-radius:28px;width:calc(100% - 12vw)}
.final h2{color:#fff}
.final p{margin-bottom:26px}
footer{background:#f3f6f7;padding:32px 6vw;font-size:.8rem;color:#587480}
footer p{max-width:960px;margin:0 auto 12px}
footer .links a{color:var(--teal);margin-right:16px}
.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(6,25,32,.55);z-index:100}
.modal[hidden]{display:none}
.modal-box{position:relative;background:#fff;max-width:440px;width:100%;text-align:center;padding:32px 28px 26px;border-radius:24px;border-top:6px solid var(--cyan);box-shadow:0 24px 60px rgba(0,0,0,.35);animation:pop .35s ease-out}
@keyframes pop{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}
.modal-box img{width:130px;height:auto;margin:0 auto 6px;display:block}
.modal-box h2{font-size:1.65rem;margin-bottom:10px}
.modal-box p{margin-bottom:22px}
.close{position:absolute;top:10px;right:14px;background:none;border:0;font-size:2rem;line-height:1;cursor:pointer;color:#587480}
.skip{display:block;margin:16px auto 0;background:none;border:0;color:#587480;text-decoration:underline;cursor:pointer;font:inherit;font-size:.9rem}
.legal{max-width:760px;margin:0 auto;padding:40px 6vw}
.legal h1{font-size:2rem;margin-bottom:20px}
.legal h2{font-size:1.3rem;margin:28px 0 8px}
.legal p{margin-bottom:12px}
@media(max-width:800px){
  .hero{grid-template-columns:1fr;text-align:center;padding-top:28px}
  .hero-img{order:-1}
  .hero-img img{max-width:300px}
  .lead{margin-left:auto;margin-right:auto}
  .facts{grid-template-columns:1fr}
  .btn{width:100%;text-align:center;padding:18px 20px}
}
@media(prefers-reduced-motion:reduce){.btn,.modal-box,#page{animation:none;transition:none}}