:root{
  --abyss:#04172E; --deep:#072B55; --ocean:#0B4C8C; --sea:#1677C9; --lagoon:#3FB6E0; --foam:#E7F5FB; --sand:#FFF7EC;
  --amber:#FF9F1C; --amber-d:#F07F00; --coral:#FF6B4A;
  --ink:#0F2236; --ink-soft:#4E6378; --line:#D6E6F0; --paper:#FFFFFF;
  --head:"Sora", system-ui, sans-serif; --body:"Nunito Sans", system-ui, sans-serif;
  --wide:1160px; --r:24px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--body); font-size:17px; line-height:1.7; -webkit-font-smoothing:antialiased;}
h1,h2,h3,h4{font-family:var(--head); line-height:1.15; margin:0 0 .5em; font-weight:700; letter-spacing:-.02em; color:var(--ink);}
h2{font-size:clamp(28px,3.4vw,42px);}
h3{font-size:clamp(19px,2vw,22px); font-weight:600; margin-top:1.3em;}
p{margin:0 0 1em;}
a{color:var(--sea);}
img{max-width:100%; display:block; height:auto;}
.wrap{max-width:var(--wide); margin:0 auto; padding:0 24px;}
.icon{width:22px; height:22px; flex:none;}
section{padding:96px 0; position:relative; scroll-margin-top:70px;}
.kick{display:inline-flex; align-items:center; gap:10px; font-family:var(--head); font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--sea); margin-bottom:12px;}
.kick .d{display:inline-flex; gap:4px;} .kick .d i{width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.35;} .kick .d i:first-child{opacity:1;} .kick .d i:nth-child(2){opacity:.65;}
.ocean-bg{background:linear-gradient(180deg,var(--deep) 0%,var(--abyss) 100%); color:#C9DDEE;}
.ocean-bg h2,.ocean-bg h3,.ocean-bg h4{color:#fff;}
.ocean-bg .kick{color:var(--lagoon);}
.foam{background:var(--foam);}
.wave{display:block; width:100%; height:80px;}
.wave-top{position:absolute; left:0; right:0; top:-79px;}

/* bubbles */
.bubbles{position:absolute; inset:0; overflow:hidden; pointer-events:none;}
.bubbles span{position:absolute; bottom:-60px; border-radius:50%; border:1.5px solid rgba(255,255,255,.35); background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.35),rgba(255,255,255,.04) 60%); animation:rise linear infinite;}
@keyframes rise{0%{transform:translateY(0) translateX(0); opacity:0;} 10%{opacity:1;} 100%{transform:translateY(-110vh) translateX(30px); opacity:0;}}

/* header */
header.site{position:fixed; top:0; left:0; right:0; z-index:40; transition:background .25s, box-shadow .25s;}
header.site.solid{background:rgba(4,23,46,.92); backdrop-filter:blur(10px); box-shadow:0 6px 20px rgba(0,0,0,.18);}
header.site .wrap{display:flex; align-items:center; justify-content:space-between; height:70px; gap:20px;}
.topline{font-size:12.5px; color:#9FC3E0; text-align:center; padding:6px 0; background:rgba(0,0,0,.25); letter-spacing:.02em;}
.logo{display:flex; align-items:center; gap:10px; color:#fff; text-decoration:none; font-family:var(--head); font-weight:700; font-size:19px;}
.logo svg{width:34px; height:34px;}
nav.main{display:flex; gap:4px;}
nav.main a{color:#C9DDEE; text-decoration:none; font-size:14.5px; font-weight:700; padding:8px 14px; border-radius:30px;}
nav.main a:hover{background:rgba(255,255,255,.1); color:#fff;}
.btn-glass{color:#fff; border:1.5px solid rgba(255,255,255,.4); padding:9px 18px; border-radius:40px; font-weight:800; font-size:14px; cursor:pointer; backdrop-filter:blur(6px);}
.btn-glass:hover{background:#fff; color:var(--deep);}

/* buttons */
.btn{display:inline-flex; align-items:center; gap:12px; background:linear-gradient(135deg,var(--amber),var(--amber-d)); color:#1C1300; font-family:var(--head); font-weight:700; font-size:16.5px; padding:17px 30px; border-radius:60px; cursor:pointer; text-decoration:none; box-shadow:0 12px 30px rgba(255,159,28,.4); transition:transform .15s, box-shadow .15s;}
.btn:hover{transform:translateY(-2px); box-shadow:0 16px 36px rgba(255,159,28,.5);}
.btn .icon{width:20px; height:20px;}
.btn-note{font-size:13px; opacity:.8; margin:12px 0 0;}

/* hero */
.hero{position:relative; min-height:100vh; padding:150px 0 140px; background:radial-gradient(ellipse at 75% 35%, #1B6FB8 0%, var(--ocean) 30%, var(--deep) 62%, var(--abyss) 100%); color:#D5E7F5; overflow:hidden;}
.hero::before{content:""; position:absolute; inset:0; background:repeating-linear-gradient(115deg, rgba(255,255,255,.035) 0 2px, transparent 2px 60px); mask-image:linear-gradient(180deg,#000,transparent 70%);}
.light-rays{position:absolute; top:-10%; right:10%; width:50%; height:90%; background:conic-gradient(from 200deg at 50% 0%, transparent 0deg, rgba(255,255,255,.08) 10deg, transparent 22deg, rgba(255,255,255,.06) 34deg, transparent 46deg, rgba(255,255,255,.07) 60deg, transparent 75deg); filter:blur(4px); pointer-events:none;}
.hero .wrap{position:relative; z-index:2; display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center;}
.hero .kick{color:var(--lagoon);}
.hero h1{color:#fff; font-size:clamp(34px,4.6vw,58px); margin-bottom:18px;}
.hero h1 .q{background:linear-gradient(90deg,var(--lagoon),#9BE7FF); -webkit-background-clip:text; background-clip:text; color:transparent;}
.hero .sub{font-size:18.5px; max-width:560px;}
.hero ul.ck{list-style:none; padding:0; margin:22px 0 30px; display:grid; gap:10px;}
.hero ul.ck li{display:flex; gap:12px; align-items:flex-start; font-weight:700; color:#fff;}
.hero ul.ck .icon{width:24px; height:24px; color:var(--abyss); background:var(--lagoon); border-radius:50%; padding:4px; margin-top:1px;}
.price-glass{display:inline-flex; align-items:center; gap:16px; padding:14px 22px; border-radius:20px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(10px); margin-bottom:24px;}
.price-glass .old{text-decoration:line-through; color:#8FB2CF;}
.price-glass .new{font-family:var(--head); font-weight:700; font-size:30px; color:#fff;}
.price-glass .save{background:var(--coral); color:#fff; font-weight:800; font-size:13px; padding:5px 11px; border-radius:20px;}
.pack-wrap{position:relative; display:flex; justify-content:center;}
.pack-wrap::before{content:""; position:absolute; width:86%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,rgba(63,182,224,.45) 0%,rgba(63,182,224,0) 68%); top:50%; left:50%; transform:translate(-50%,-50%);}
.pack-wrap img{position:relative; width:100%; max-width:520px; filter:drop-shadow(0 40px 50px rgba(0,0,0,.5)); animation:float 6s ease-in-out infinite;}
@keyframes float{0%,100%{transform:translateY(0);} 50%{transform:translateY(-14px);}}
.pack-wrap .ring{position:absolute; right:2%; top:4%; width:118px; height:118px; border-radius:50%; background:var(--amber); color:#1C1300; font-family:var(--head); font-weight:700; text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1.05; box-shadow:0 12px 26px rgba(0,0,0,.3); z-index:2;}
.pack-wrap .ring b{font-size:32px;} .pack-wrap .ring small{font-size:12px; font-weight:600;}
.hero .wave-bottom{position:absolute; left:0; right:0; bottom:-1px; z-index:3;}

/* trust */
.trust{position:relative; z-index:4; margin-top:-70px;}
.trust-card{background:#fff; border-radius:var(--r); box-shadow:0 20px 50px rgba(7,43,85,.14); display:grid; grid-template-columns:repeat(3,1fr) 1.3fr; overflow:hidden;}
.trust-card .t{display:flex; gap:14px; align-items:center; padding:22px 22px; font-weight:800; line-height:1.3; border-right:1px solid var(--line);}
.trust-card .t .ic{width:46px; height:46px; border-radius:14px; background:var(--foam); color:var(--sea); display:flex; align-items:center; justify-content:center; flex:none;}
.trust-card .eeat{background:linear-gradient(135deg,var(--foam),#fff); padding:16px 22px; font-size:13px; color:var(--ink-soft); line-height:1.6; display:flex; flex-direction:column; justify-content:center;}
.trust-card .eeat b{color:var(--ink);}

/* about */
.about{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start;}
.about .lead{font-size:18.5px;}
.not-cure{display:flex; gap:14px; background:var(--sand); border-radius:18px; padding:18px 20px; font-size:15.5px; margin-top:10px; border:1px solid #FBE3C2;}
.not-cure .icon{color:var(--amber-d); width:26px; height:26px;}
.label-card{border-radius:var(--r); overflow:hidden; box-shadow:0 20px 50px rgba(7,43,85,.12); background:#fff;}
.label-card .lh{background:linear-gradient(120deg,var(--ocean),var(--deep)); color:#fff; padding:20px 24px; display:flex; justify-content:space-between; align-items:center;}
.label-card .lh .n{font-family:var(--head); font-weight:700; font-size:22px;}
.label-card .lh .m{font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--lagoon); font-weight:800;}
.label-card .bar{background:linear-gradient(90deg,var(--amber),#FFC46B); color:#3A2100; font-family:var(--head); font-weight:600; font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; padding:6px 24px;}
.label-card dl{margin:0; padding:6px 24px 16px;}
.label-card .r{display:grid; grid-template-columns:40% 60%; padding:11px 0; border-bottom:1px dashed var(--line); font-size:15px;}
.label-card .r:last-child{border-bottom:none;}
.label-card dt{color:var(--ink-soft);}
.label-card dd{margin:0; font-weight:800;}

/* benefits */
.ben-wrap{display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; align-items:center;}
.ben-list{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.ben{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:20px; padding:24px; backdrop-filter:blur(6px); color:#fff; font-weight:700; line-height:1.45;}
.ben .ic{width:48px; height:48px; border-radius:14px; background:linear-gradient(135deg,var(--lagoon),var(--sea)); color:#fff; display:flex; align-items:center; justify-content:center; margin-bottom:14px;}
.ben-tip{margin-top:22px; padding-left:18px; border-left:3px solid var(--amber); color:#E2EEF7;}
.molecules{display:flex; gap:10px; flex-wrap:wrap; margin:18px 0 6px;}
.molecules span{background:rgba(63,182,224,.15); color:#BFEAFA; border:1px solid rgba(63,182,224,.35); padding:6px 14px; border-radius:30px; font-weight:700; font-size:14px;}

/* how + warnings */
.how-grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:40px; align-items:start;}
.drink{background:#fff; border-radius:var(--r); padding:32px; box-shadow:0 14px 40px rgba(7,43,85,.08); position:relative; overflow:hidden;}
.drink{border-top:5px solid var(--lagoon);}
.drink h3{margin-top:0;}
.dose{display:flex; gap:12px; align-items:center; background:var(--foam); border-radius:16px; padding:14px 16px; margin:18px 0 0; position:relative; z-index:1; font-weight:800;}
.dose .big{font-family:var(--head); font-size:28px; color:var(--sea);}
.warn-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:14px;}
.w{background:#fff; border-radius:18px; padding:18px 20px; border:1px solid var(--line); display:flex; gap:14px;}
.w .ic{width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center; flex:none; background:#FFF0EB; color:var(--coral);}
.w.ok .ic{background:var(--foam); color:var(--sea);}
.w h4{font-size:15px; margin:2px 0 4px;}
.w p{margin:0; font-size:14.5px; color:var(--ink-soft); line-height:1.5;}

/* price */
.price-wrap{display:grid; grid-template-columns:1fr 1fr; gap:0; border-radius:32px; overflow:hidden; box-shadow:0 24px 60px rgba(7,43,85,.15);}
.price-vis{background:radial-gradient(circle at 50% 40%,#1B6FB8,var(--deep) 75%); position:relative; display:flex; align-items:center; justify-content:center; padding:40px; overflow:hidden; min-height:420px;}
.price-vis img{width:100%; max-width:380px; position:relative; z-index:1; filter:drop-shadow(0 30px 34px rgba(0,0,0,.45));}
.price-info{background:#fff; padding:44px;}
.price-info h2{font-size:clamp(26px,3vw,36px);}
.pp{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin:6px 0 18px;}
.pp .new{font-family:var(--head); font-size:44px; font-weight:800; color:var(--deep); letter-spacing:-.03em;}
.pp .old{color:var(--ink-soft); text-decoration:line-through; font-size:18px;}
.pp .save{background:var(--coral); color:#fff; font-weight:800; padding:5px 12px; border-radius:20px; font-size:14px;}
.ptable{width:100%; border-collapse:collapse; margin:20px 0 26px; font-size:15px;}
.ptable th,.ptable td{text-align:left; padding:12px 0; border-bottom:1px solid var(--line);}
.ptable th{color:var(--ink-soft); font-weight:600; width:44%;}
.ptable td{font-weight:800;}
.tips{list-style:none; padding:0; margin:12px 0 0; display:grid; gap:10px;}
.tips li{display:flex; gap:12px; align-items:flex-start; font-weight:700; font-size:15px;}
.tips .icon{color:var(--sea); margin-top:2px;}

/* faq */
.faq-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:34px;}
.faq-card{background:#fff; border-radius:22px; padding:28px; box-shadow:0 10px 30px rgba(7,43,85,.07); position:relative;}
.faq-card .qn{position:absolute; top:-14px; left:24px; width:34px; height:34px; border-radius:50%; background:var(--sea); color:#fff; font-family:var(--head); font-weight:700; display:flex; align-items:center; justify-content:center; font-size:15px; box-shadow:0 6px 14px rgba(22,119,201,.35);}
.faq-card h3{margin:6px 0 10px; font-size:19px;}
.faq-card p{margin:0; color:var(--ink-soft);}

/* final */
.final{padding:130px 0 110px; text-align:center; overflow:hidden;}
.final .wrap{position:relative; z-index:2;}
.final h2{font-size:clamp(30px,4.2vw,52px); max-width:760px; margin:0 auto 14px;}
.final p{font-size:19px; margin-bottom:30px;}
.final img{width:260px; margin:0 auto 26px; filter:drop-shadow(0 26px 30px rgba(0,0,0,.5)); animation:float 6s ease-in-out infinite;}
.sources{padding:52px 0; font-size:15px; color:var(--ink-soft); background:var(--abyss); color:#8FB2CF;}
.sources h2{font-size:17px; color:#fff;}

footer{background:#020E1C; color:#7F9DB8; padding:44px 0; font-size:14px;}
footer .row{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; align-items:center; padding-bottom:20px; margin-bottom:20px; border-bottom:1px solid #12304E;}
footer .legal{display:flex; gap:20px; flex-wrap:wrap;}
footer a{color:#CFE3F2;}
footer p{max-width:900px; margin:0 0 10px;}

.sticky-cta{display:none; position:fixed; left:12px; right:12px; bottom:12px; z-index:50; background:rgba(4,23,46,.95); backdrop-filter:blur(10px); border-radius:60px; padding:8px 8px 8px 22px; box-shadow:0 12px 30px rgba(0,0,0,.35);}
.sticky-cta .row{display:flex; justify-content:space-between; align-items:center; gap:10px;}
.sticky-cta .price{font-family:var(--head); font-weight:700; color:#fff; font-size:16px; line-height:1.15;}
.sticky-cta .price s{display:block; font-family:var(--body); font-weight:400; font-size:12px; color:#8FB2CF;}
.sticky-cta .btn{padding:12px 18px; font-size:14.5px; box-shadow:none;}

@media (max-width:1060px){
  nav.main{display:none;}
  .trust-card{grid-template-columns:repeat(3,1fr);}
  .trust-card .eeat{grid-column:1 / -1; border-top:1px solid var(--line);}
  .trust-card .t:nth-child(3){border-right:none;}
}
@media (max-width:860px){
  body{font-size:16.5px;}
  section{padding:64px 0;}
  .hero{min-height:0; padding:110px 0 120px;}
  .hero .wrap,.about,.ben-wrap,.how-grid,.price-wrap,.faq-grid{grid-template-columns:1fr;}
  .pack-wrap{order:-1;}
  .pack-wrap img{max-width:340px;}
  .pack-wrap .ring{width:90px; height:90px; right:6%;} .pack-wrap .ring b{font-size:24px;}
  .trust-card{grid-template-columns:1fr;}
  .trust-card .t{border-right:none; border-bottom:1px solid var(--line); padding:16px 20px;}
  .price-vis{min-height:0; padding:34px;}
  .price-info{padding:30px 22px;}
  .faq-grid{gap:26px;}
  .btn-glass{display:none;}
  .sticky-cta{display:block;}
  footer{padding-bottom:100px;}
  .wave{height:50px;} .wave-top{top:-49px;}
}
@media (max-width:540px){
  .ben-list,.warn-grid{grid-template-columns:1fr;}
  .hero .btn{width:100%; justify-content:center;}
  .label-card .r{grid-template-columns:1fr; gap:2px;}
  .pp .new{font-size:36px;}
}
:focus-visible{outline:3px solid var(--amber); outline-offset:2px;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;} .bubbles span,.pack-wrap img,.final img{animation:none;} .bubbles{display:none;}}

/* legal pages */
.legal-page{background:var(--foam); min-height:100vh;}
.legal-head{background:linear-gradient(180deg,var(--deep),var(--abyss)); padding:0 0 70px; position:relative;}
.legal-head .bar{display:flex; align-items:center; justify-content:space-between; height:70px;}
.legal-head h1{color:#fff; font-size:clamp(30px,4vw,44px); margin:30px 0 6px;}
.legal-head p{color:#9FC3E0; margin:0;}
.legal-body{max-width:820px; margin:-40px auto 0; background:#fff; border-radius:var(--r); padding:44px 48px; box-shadow:0 20px 50px rgba(7,43,85,.1); position:relative;}
.legal-body h2{font-size:21px; margin-top:1.6em;}
.legal-body h2:first-child{margin-top:0;}
.legal-body p,.legal-body li{color:var(--ink-soft);}
.legal-body ul{padding-left:1.2em;}
.legal-nav{max-width:820px; margin:26px auto 60px; display:flex; flex-wrap:wrap; gap:10px; justify-content:center;}
.legal-nav a{background:#fff; border:1px solid var(--line); padding:8px 16px; border-radius:30px; text-decoration:none; font-weight:700; font-size:14px; color:var(--deep);}
.contact-box{display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:center; background:var(--foam); border-radius:18px; padding:20px 22px; margin:18px 0;}
.contact-box .ic{width:52px; height:52px; border-radius:16px; background:var(--sea); color:#fff; display:flex; align-items:center; justify-content:center;}
.contact-box b{display:block; font-family:var(--head); color:var(--ink); font-size:18px;}
@media (max-width:640px){ .legal-body{padding:30px 22px; margin:-40px 14px 0;} }
.price-glass .new,.pp .new,.sticky-cta .price{white-space:nowrap;}
.price-glass .old,.pp .old{white-space:nowrap;}
.contact-box b{overflow-wrap:anywhere; font-size:16px;}
@media (max-width:540px){
  .price-glass{gap:10px; padding:12px 16px;}
  .price-glass .new{font-size:24px;}
  .legal-head .bar a:last-child{font-size:13px; white-space:nowrap;}
  .legal-head .bar .logo{font-size:16px;}
  .hero .kick{font-size:11.5px; letter-spacing:.1em;}
}