:root{
  --navy:#061629;
  --navy-2:#0a1d33;
  --ink:#0b1420;
  --muted:#5b6673;
  --blue:#77a8d7;
  --line:#d8e0e8;
  --ice:#f4f8fb;
  --white:#ffffff;
  --max:1440px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  color:var(--ink);
  background:#fff;
  line-height:1.55;
}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
img{max-width:100%;display:block}
.skip-link{position:absolute;left:-9999px;top:auto}
.skip-link:focus{left:1rem;top:1rem;z-index:1000;background:#fff;padding:.7rem 1rem}
.announcement{
  height:32px;display:flex;align-items:center;justify-content:center;
  background:var(--navy);color:#fff;letter-spacing:.13em;font-size:12px;font-weight:600;
}
.site-header{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);border-bottom:1px solid rgba(11,20,32,.06)}
.nav-shell{max-width:var(--max);height:86px;margin:auto;padding:0 64px;display:grid;grid-template-columns:220px 1fr 160px;align-items:center}
.brand{display:inline-flex;width:145px;height:60px;overflow:hidden;align-items:center}
.brand img{width:145px;transform:scale(1.08);transform-origin:center}
.main-nav{justify-self:center;display:flex;gap:52px;font-size:13px;text-transform:uppercase;letter-spacing:.08em}
.main-nav a{padding:32px 0 23px;border-bottom:2px solid transparent}
.main-nav a:hover,.main-nav a.active{color:#4f8fc6;border-color:#6fa6d5}
.nav-actions{justify-self:end;display:flex;gap:18px;align-items:center}
.icon-btn{border:0;background:none;padding:8px;cursor:pointer;display:flex;align-items:center;gap:7px}
.icon-btn svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.4}
.cart-count{font-size:13px}
.menu-toggle{display:none;border:0;background:transparent;padding:8px}
.menu-toggle span{display:block;width:23px;height:1px;background:#0b1420;margin:5px 0}

.hero{
  position:relative;overflow:hidden;min-height:610px;
  background:linear-gradient(105deg,#fff 0%,#f7f9fc 47%,#eaf1f7 100%);
  display:grid;grid-template-columns:47% 53%;align-items:center;
}
.hero-copy{padding:64px 32px 64px max(64px,calc((100vw - var(--max))/2 + 64px));z-index:3}
.eyebrow{font-size:12px;letter-spacing:.13em;font-weight:600;margin:0 0 18px}
.eyebrow.blue{color:#3f84be}
.hero h1{font-size:74px;line-height:.94;font-weight:400;letter-spacing:-.045em;margin:0 0 28px}
.hero h1 span{color:var(--blue)}
.lead{font-size:17px;line-height:1.65;max-width:550px;margin:0 0 32px}
.button-row{display:flex;gap:18px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 28px;border:1px solid var(--navy);text-transform:uppercase;letter-spacing:.08em;font-size:12px;font-weight:650;transition:.18s ease;cursor:pointer}
.btn-dark{background:var(--navy);color:#fff}
.btn-dark:hover{background:#102941}
.btn-outline{background:transparent;color:var(--ink)}
.btn-outline:hover{background:#fff}
.btn:disabled{opacity:.55;cursor:not-allowed}
.hero-product{height:100%;position:relative;display:flex;align-items:center;justify-content:center;isolation:isolate}
.glass-plinth{position:absolute;width:76%;height:110px;bottom:70px;border-radius:50%;background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(171,188,204,.45));border:1px solid rgba(104,129,152,.25);box-shadow:0 18px 40px rgba(41,71,99,.15),inset 0 8px 20px rgba(255,255,255,.8)}
.hero-glow{position:absolute;border-radius:50%;filter:blur(2px);opacity:.8}
.hero-glow-a{width:520px;height:520px;right:-120px;top:-110px;background:radial-gradient(circle,rgba(255,255,255,.9),rgba(182,211,235,.18) 55%,transparent 70%)}
.hero-glow-b{width:420px;height:420px;left:39%;bottom:-180px;background:radial-gradient(circle,rgba(255,255,255,.95),transparent 70%)}
.molecule{position:absolute;border-radius:50%;border:2px solid rgba(128,158,183,.18);box-shadow:80px 40px 0 -18px rgba(255,255,255,.8),80px 40px 0 -16px rgba(128,158,183,.17),-70px 90px 0 -22px rgba(255,255,255,.9),-70px 90px 0 -20px rgba(128,158,183,.14)}
.molecule-a{width:120px;height:120px;right:6%;top:9%}
.molecule-b{width:75px;height:75px;left:48%;top:21%;opacity:.5}

.jar{position:relative;z-index:2}
.jar-large{width:330px;height:250px}
.jar-medium{width:260px;height:205px}
.jar-lid{
  position:absolute;z-index:2;left:3%;right:3%;top:0;height:29%;
  border-radius:14px 14px 9px 9px;
  background:linear-gradient(90deg,#20252b 0%,#edf2f5 9%,#aab4bd 20%,#fcffff 36%,#4e555c 48%,#0f1113 54%,#dce5eb 68%,#fff 82%,#727b83 94%,#22272b 100%);
  box-shadow:0 7px 13px rgba(0,0,0,.16),inset 0 2px 4px #fff;
}
.jar-body{
  position:absolute;left:7%;right:7%;top:25%;bottom:0;
  border-radius:7px 7px 28px 28px;
  background:linear-gradient(90deg,#dbe2e7,#fff 18%,#edf2f5 48%,#fff 72%,#cbd4db);
  border:1px solid rgba(74,90,103,.16);
  box-shadow:0 16px 28px rgba(45,66,85,.22),inset 0 4px 16px rgba(255,255,255,.9);
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding-top:17px;color:#142235;
}
.jar-brand{font-size:16px;letter-spacing:.15em;margin-bottom:7px}
.jar-rule{width:64%;height:1px;background:#7a8b9a;margin-bottom:10px}
.jar-body strong{font-size:18px;letter-spacing:.1em;line-height:1.1}
.jar-body span{font-size:13px;letter-spacing:.08em}
.jar-body small{font-size:10px;margin-top:4px}

.trust-strip{background:var(--navy);color:#fff;display:grid;grid-template-columns:repeat(4,1fr);padding:29px max(64px,calc((100vw - var(--max))/2 + 64px));gap:0}
.trust-strip article{display:grid;grid-template-columns:55px 1fr;gap:14px;padding:7px 30px;border-right:1px solid rgba(255,255,255,.18)}
.trust-strip article:first-child{padding-left:0}
.trust-strip article:last-child{border:0;padding-right:0}
.trust-icon{font-size:34px;font-weight:300;color:#fff}
.trust-strip strong{display:block;font-size:12px;letter-spacing:.08em;margin-bottom:5px}
.trust-strip span{display:block;font-size:12px;color:#d9e3ed;line-height:1.5}

.section{padding:72px max(64px,calc((100vw - var(--max))/2 + 64px))}
.featured{min-height:440px;display:grid;grid-template-columns:42% 58%;align-items:center;background:linear-gradient(90deg,#f8fbfd,#eef3f7);position:relative;overflow:hidden}
.featured:before,.featured:after{content:"";position:absolute;width:180px;height:180px;border-radius:50%;border:1px solid rgba(105,143,177,.1)}
.featured:before{left:-80px;top:70px;box-shadow:90px 110px 0 -45px transparent,90px 110px 0 -44px rgba(105,143,177,.1)}
.featured:after{right:-70px;bottom:-60px}
.section-copy{z-index:2}
.section-copy h2,.science-intro h2,.product-detail h2,.about-panel h2,.contact h2{font-size:42px;line-height:1.05;font-weight:400;letter-spacing:-.03em;margin:0 0 20px}
.section-copy p:not(.eyebrow){max-width:610px;color:#34404c;margin-bottom:26px}
.featured-art{position:relative;min-height:300px;display:flex;justify-content:center;align-items:center}
.cream-swipe{position:absolute;width:430px;height:58px;background:linear-gradient(180deg,#fff,#e8e4dc);border-radius:50%;transform:rotate(-13deg) translate(20px,55px);box-shadow:0 10px 25px rgba(35,45,50,.08)}
.section-heading.center{text-align:center}
.coming{padding-top:40px;padding-bottom:58px}
.coming-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:28px}
.product-card,.brand-card{min-height:210px;background:linear-gradient(135deg,#f0f4f8,#fff);border:1px solid #e6ebef}
.product-card{display:grid;grid-template-columns:46% 54%}
.card-visual{display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;background:linear-gradient(145deg,#eef5fa,#dbe8f1)}
.card-copy{padding:28px 24px;display:flex;flex-direction:column;justify-content:center}
.card-copy h3{font-size:20px;font-weight:500;margin:0 0 18px}
.card-copy p{font-size:14px;margin:0 0 9px}
.status{font-size:13px}
.bottle{position:relative;width:72px;height:150px}
.bottle-cap{position:absolute;top:0;left:17px;right:17px;height:28px;background:linear-gradient(90deg,#9aa7b2,#f7fbfd,#8996a0);border-radius:4px}
.bottle-body{position:absolute;top:24px;bottom:0;left:6px;right:6px;border-radius:6px 6px 12px 12px;background:linear-gradient(90deg,rgba(215,235,246,.7),rgba(255,255,255,.86),rgba(187,217,236,.55));border:1px solid rgba(76,119,149,.35);display:flex;align-items:center;justify-content:center;text-align:center;font-size:9px;letter-spacing:.08em}
.jelly-orb{width:115px;height:115px;border-radius:50%;background:radial-gradient(circle at 35% 25%,#fff 0 7%,#cfe2f1 25%,#8cb6d4 45%,#eef8ff 71%);box-shadow:inset -14px -20px 20px rgba(71,110,140,.16),0 14px 30px rgba(69,100,124,.18);position:relative}
.jelly-orb:after{content:"";position:absolute;width:14px;height:14px;border-radius:50%;background:white;left:22px;top:18px;filter:blur(1px)}
.brand-card{display:flex;align-items:center;justify-content:center;gap:22px;padding:32px}
.brand-card .cross{font-size:78px;line-height:1;color:#75a8d6;font-weight:700}
.brand-card p{font-size:14px;max-width:210px;margin:0}
.brand-card span{display:block;font-size:11px;letter-spacing:.12em;margin-top:12px}

.science{background:linear-gradient(110deg,#f7f9fb,#eef3f7);display:grid;grid-template-columns:30% 70%;gap:45px;align-items:start}
.science-intro p:not(.eyebrow){color:#394552;max-width:350px;margin-bottom:25px}
.science-grid{display:grid;grid-template-columns:repeat(4,1fr);align-items:stretch}
.science-grid article{text-align:center;padding:15px 26px;border-left:1px solid #cfd9e1}
.line-icon{font-size:43px;font-weight:300;margin:0 0 22px}
.science-grid h3{text-transform:uppercase;letter-spacing:.04em;font-size:12px;margin:0 0 13px}
.science-grid p{font-size:13px;color:#394552}

.product-detail{display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:center}
.detail-copy{max-width:650px;color:#44515e}
.price-row{display:flex;gap:25px;align-items:center;margin-top:28px}
.placeholder-price{font-size:18px}
.detail-panel{border-top:1px solid var(--line)}
.detail-panel>div{display:grid;grid-template-columns:44px 170px 1fr;gap:12px;padding:19px 0;border-bottom:1px solid var(--line);align-items:center}
.detail-panel span{color:#7ca8cf;font-size:12px}
.detail-panel strong{font-size:13px;text-transform:uppercase;letter-spacing:.06em}
.detail-panel small{color:#5b6673}

.about{background:var(--navy);color:white}
.about-panel{max-width:860px;margin:auto;text-align:center;padding:30px}
.about-panel h2{font-size:48px}
.about-panel p:not(.eyebrow){color:#d9e3ed;font-size:16px}

.contact{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;background:#f6f9fb}
.signup-form label{display:block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px}
.form-row{display:grid;grid-template-columns:1fr auto}
.form-row input{min-height:48px;border:1px solid #aebbc6;padding:0 14px;background:white}
.signup-form small{display:block;margin-top:10px;color:#6c7680}

.site-footer{background:var(--navy);color:#fff;padding:42px max(64px,calc((100vw - var(--max))/2 + 64px)) 24px}
.footer-main{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:35px;padding-bottom:34px;border-bottom:1px solid rgba(255,255,255,.18)}
.footer-brand img{width:135px;background:#fff;border-radius:3px}
.footer-brand p{font-size:11px;letter-spacing:.08em}
.footer-main strong{font-size:11px;letter-spacing:.09em;display:block;margin-bottom:13px}
.footer-main a{display:block;color:#dce5ee;font-size:12px;margin:8px 0}
.footer-bottom{display:flex;justify-content:space-between;gap:25px;font-size:11px;color:#ced9e3;padding-top:18px}
.footer-bottom div{display:flex;gap:24px}

@media(max-width:1000px){
  .nav-shell{padding:0 28px;grid-template-columns:160px 1fr 105px}
  .main-nav{gap:24px}
  .hero{grid-template-columns:1fr 1fr;min-height:540px}
  .hero-copy{padding:45px 30px}
  .hero h1{font-size:59px}
  .jar-large{width:270px;height:215px}
  .trust-strip{padding:25px 28px;grid-template-columns:1fr 1fr}
  .trust-strip article{border-right:0;border-bottom:1px solid rgba(255,255,255,.15);padding:18px}
  .section{padding-left:32px;padding-right:32px}
  .science{grid-template-columns:1fr}
  .science-grid article:first-child{border-left:0}
}
@media(max-width:760px){
  .announcement{font-size:10px;height:28px}
  .nav-shell{height:74px;padding:0 18px;display:grid;grid-template-columns:1fr auto auto;gap:8px}
  .brand{width:110px;height:52px}.brand img{width:110px}
  .menu-toggle{display:block;grid-column:2}
  .nav-actions{grid-column:3}.icon-btn:first-child{display:none}
  .main-nav{
    display:none;position:absolute;left:0;right:0;top:74px;background:white;
    padding:18px 24px 28px;box-shadow:0 20px 30px rgba(20,34,50,.08);flex-direction:column;gap:0
  }
  .main-nav.open{display:flex}
  .main-nav a{padding:14px 0;border-bottom:1px solid #e8edf1}
  .hero{grid-template-columns:1fr;min-height:0}
  .hero-copy{padding:56px 24px 28px}
  .hero h1{font-size:54px}
  .lead{font-size:15px}
  .hero-product{height:350px}
  .jar-large{width:260px;height:205px}
  .glass-plinth{bottom:45px;width:82%}
  .trust-strip{grid-template-columns:1fr;padding:17px 24px}
  .trust-strip article{padding:16px 0}
  .featured{grid-template-columns:1fr;padding-top:54px}
  .featured-art{min-height:320px}
  .coming-grid{grid-template-columns:1fr}
  .product-card{min-height:180px}
  .science-grid{grid-template-columns:1fr 1fr}
  .science-grid article{border-left:0;border-top:1px solid #cfd9e1}
  .product-detail{grid-template-columns:1fr;gap:35px}
  .detail-panel>div{grid-template-columns:35px 1fr;gap:8px}
  .detail-panel small{grid-column:2}
  .contact{grid-template-columns:1fr;gap:30px}
  .form-row{grid-template-columns:1fr}.form-row .btn{margin-top:10px}
  .footer-main{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1/-1}
  .footer-bottom{flex-direction:column}
}
@media(max-width:440px){
  .hero h1{font-size:46px}
  .section-copy h2,.science-intro h2,.product-detail h2,.contact h2{font-size:36px}
  .about-panel h2{font-size:38px}
  .science-grid{grid-template-columns:1fr}
  .footer-main{grid-template-columns:1fr}
}