/* NUCELVA — luxury biotech skincare landing page */
:root{
  --teal:#19323B;
  --teal-2:#274851;
  --clinical:#E7EAE6;
  --sage:#B9C9C6;
  --silver:#D5DED0;
  --white:#FFFFFF;
  --ink:#15262B;
  --muted:#657579;
  --line:rgba(25,50,59,.16);
  --serif:"Cormorant Garamond", Georgia, serif;
  --sans:"Inter", Arial, sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--clinical);color:var(--ink);font-family:var(--sans);line-height:1.6}
a{text-decoration:none;color:inherit}
button,input{font:inherit}
.site-header{
  position:fixed;z-index:20;top:0;left:0;right:0;height:78px;padding:0 5vw;
  display:flex;align-items:center;justify-content:space-between;
  background:rgba(231,234,230,.84);backdrop-filter:blur(18px);border-bottom:1px solid rgba(25,50,59,.08)
}
.logo,.footer-logo{font-family:var(--serif);font-size:31px;letter-spacing:.16em;color:var(--teal)}
.site-header nav{display:flex;gap:34px;font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.site-header nav a{opacity:.72;transition:.25s}.site-header nav a:hover{opacity:1;color:var(--teal)}
.header-cta{font-size:11px;text-transform:uppercase;letter-spacing:.13em;border-bottom:1px solid var(--teal);padding-bottom:4px}
.menu{display:none;border:0;background:none}
.hero{min-height:100vh;padding:120px 5vw 70px;display:grid;grid-template-columns:48% 52%;overflow:hidden}
.hero-copy{display:flex;flex-direction:column;justify-content:center;max-width:660px;padding:40px 5vw 40px 0}
.eyebrow{font-size:10px;letter-spacing:.24em;font-weight:600;color:var(--teal);margin:0 0 25px}
h1,h2{font-family:var(--serif);font-weight:500;line-height:.95;letter-spacing:-.02em;margin:0}
h1{font-size:clamp(70px,8.5vw,132px);color:var(--teal)}
h1 em,h2 em{font-style:italic}
.hero-text{max-width:520px;color:#52666A;font-size:15px;margin:34px 0 38px}
.hero-actions{display:flex;align-items:center;gap:30px}
.button{display:inline-flex;align-items:center;gap:30px;padding:17px 22px;text-transform:uppercase;letter-spacing:.13em;font-size:10px}
.button-dark{background:var(--teal);color:#fff}.button-light{background:#fff;color:var(--teal)}
.button span,.text-link span{font-size:15px}
.text-link{text-transform:uppercase;letter-spacing:.13em;font-size:10px;color:var(--teal);border-bottom:1px solid rgba(25,50,59,.3);padding-bottom:5px}
.hero-visual{position:relative;min-height:670px;display:flex;align-items:center;justify-content:center}
.hero-card{width:min(620px,92%);position:relative;z-index:2;box-shadow:0 30px 70px rgba(20,43,49,.16)}
.hero-card img{display:block;width:100%;height:auto}
.orb{position:absolute;border-radius:50%;filter:blur(2px);opacity:.65}
.orb-one{width:390px;height:390px;background:rgba(185,201,198,.65);right:3%;top:10%}
.orb-two{width:250px;height:250px;background:rgba(213,222,208,.8);left:0;bottom:5%}
.molecule{position:absolute;color:var(--teal);opacity:.35;font-size:18px;letter-spacing:8px;z-index:3}
.molecule-a{top:16%;right:3%}.molecule-b{left:3%;bottom:13%;line-height:2}
.hero-caption{position:absolute;right:0;bottom:8%;z-index:4;font-size:9px;letter-spacing:.18em;color:var(--teal);line-height:2}
.hero-caption span{color:#829094}
.statement{background:var(--teal);color:#fff;text-align:center;padding:130px 8vw}
.statement .eyebrow{color:var(--sage)}
.statement h2{font-size:clamp(50px,6vw,92px)}
.statement>p:last-child{max-width:650px;margin:35px auto 0;color:#D9E2E1;font-size:14px}
.section{padding:120px 5vw}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:65px}
.section-head h2,.philosophy h2,.story h2,.contact h2{font-size:clamp(52px,6vw,86px);color:var(--teal)}
.section-note{max-width:290px;color:var(--muted);font-size:12px;margin:0}
.products{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.product{min-width:0}.product-number{font-size:9px;letter-spacing:.18em;color:#8A999B;margin-bottom:12px}
.product-art{height:430px;background:#f6f7f4;position:relative;overflow:hidden;display:flex;align-items:end;justify-content:center;padding-bottom:34px}
.product-art:before{content:"";position:absolute;width:75%;height:75%;border-radius:50%;background:radial-gradient(circle,rgba(185,201,198,.5),rgba(231,234,230,0) 68%);top:8%;left:12%}
.bottle,.tube,.dropper,.jar{position:relative;z-index:2;background:linear-gradient(90deg,#f7f7f4,#fff 46%,#e5e7e3);box-shadow:15px 20px 35px rgba(25,50,59,.12);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--teal)}
.bottle{width:130px;height:250px;border-radius:12px 12px 18px 18px}.bottle:before{content:"";position:absolute;top:-46px;width:72px;height:55px;background:var(--teal);border-radius:10px 10px 4px 4px}
.pump{height:235px}.pump:before{height:40px}
.tube{width:130px;height:270px;border-radius:8px 8px 30px 30px;transform:skewY(-1deg)}
.dropper{width:105px;height:230px;border-radius:8px 8px 16px 16px}.dropper:before{content:"";position:absolute;top:-76px;width:38px;height:84px;background:var(--teal);border-radius:20px 20px 5px 5px}
.jar{width:170px;height:115px;border-radius:14px 14px 30px 30px}.jar:before{content:"";position:absolute;top:-22px;width:180px;height:32px;background:var(--teal);border-radius:12px}
.product-art span{font-family:var(--serif);font-size:19px;letter-spacing:.12em}.product-art small{font-size:6px;letter-spacing:.08em;margin-top:18px;line-height:1.5}
.product-info{padding:16px 0 35px}.product-info p{font-size:10px;letter-spacing:.09em;margin:0;color:var(--teal);font-weight:600}.product-info span{font-size:10px;color:#7B888B}
.philosophy{display:grid;grid-template-columns:1fr 1fr;gap:8vw;background:#f7f8f5}
.philosophy-image{min-height:650px;overflow:hidden}.philosophy-image img{width:100%;height:100%;object-fit:cover}
.philosophy-copy{align-self:center;max-width:650px}.philosophy-copy>p:not(.eyebrow){color:var(--muted);max-width:560px;margin:32px 0 45px}
.principles{border-top:1px solid var(--line)}
.principles>div{display:grid;grid-template-columns:50px 1fr 1.4fr;gap:20px;padding:20px 0;border-bottom:1px solid var(--line);align-items:start}
.principles span{font-size:9px;letter-spacing:.16em;color:#8A999B}.principles strong{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--teal)}.principles p{margin:0;color:var(--muted);font-size:11px}
.story{background:var(--teal);color:#fff;text-align:center}.story .eyebrow{color:var(--sage)}.story h2{color:#fff}.story-copy{max-width:600px;margin:34px auto;color:#DCE5E3;font-size:14px}
.contact{display:grid;grid-template-columns:1fr 1fr;gap:8vw;align-items:center;background:#E7EAE6}
.contact>div>p:last-child{max-width:470px;color:var(--muted);font-size:13px;margin-top:30px}
.signup{border-top:1px solid var(--line);padding-top:20px}.signup label{font-size:9px;letter-spacing:.18em;color:var(--teal)}
.input-row{display:flex;border-bottom:1px solid var(--teal);margin-top:12px}.input-row input{flex:1;border:0;background:transparent;padding:14px 0;outline:0;color:var(--teal)}.input-row button{border:0;background:transparent;color:var(--teal);text-transform:uppercase;letter-spacing:.13em;font-size:10px;padding:0 0 0 20px}.signup small{display:block;color:#8A999B;font-size:9px;margin-top:14px}
footer{background:#11262D;color:#B9C9C6;padding:35px 5vw;display:flex;justify-content:space-between;align-items:center;font-size:8px;letter-spacing:.13em;text-transform:uppercase}
footer .footer-logo{color:#fff;font-size:24px}
@media (max-width:1000px){
  .site-header nav{display:none}.header-cta{margin-left:auto;margin-right:25px}.menu{display:block}
  .hero{grid-template-columns:1fr;padding-top:105px}.hero-copy{padding-right:0}.hero-visual{min-height:570px}
  .products{grid-template-columns:repeat(2,1fr)}.product-art{height:390px}
  .philosophy,.contact{grid-template-columns:1fr}.philosophy-image{min-height:500px}.philosophy-copy{padding:10px 0 30px}
}
@media (max-width:600px){
  .site-header{height:68px;padding:0 22px}.logo{font-size:26px}.header-cta{font-size:9px}
  .hero{padding:92px 22px 40px}.hero-copy{padding:20px 0}.hero-visual{min-height:440px}
  h1{font-size:72px}.hero-text{font-size:13px}.hero-actions{flex-wrap:wrap;gap:18px}
  .statement,.section{padding:80px 22px}.statement h2,.section-head h2,.philosophy h2,.story h2,.contact h2{font-size:52px}
  .section-head{display:block;margin-bottom:40px}.section-note{margin-top:25px}
  .products{grid-template-columns:1fr 1fr;gap:10px}.product-art{height:300px}.bottle{transform:scale(.78)}.tube{transform:scale(.78)}.dropper{transform:scale(.78)}.jar{transform:scale(.78)}
  .product-info p{font-size:8px}.product-info span{font-size:8px}
  .philosophy-image{min-height:360px}.principles>div{grid-template-columns:35px 1fr}.principles p{grid-column:2}
  .contact{gap:45px}.input-row{display:block}.input-row button{padding:14px 0}.input-row input{width:100%}
  footer{display:grid;gap:15px;text-align:center}
}