.molecule-page{background:#03050a;color:#f6f3f8}
.molecule-page:has(.molecule-dialog[open]){overflow:hidden}
.page-glow{position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 78% 12%,rgba(142,54,194,.16),transparent 31%),radial-gradient(circle at 12% 42%,rgba(25,91,205,.1),transparent 32%);z-index:-1}
.main-nav a.active{color:#cf8cf2}
.molecules-main{width:min(calc(100% - 64px),1370px);margin:0 auto;padding:66px 0 92px}
.molecules-intro{margin-bottom:42px}
.back-link{display:inline-flex;align-items:center;gap:11px;color:#a9a2af;text-decoration:none;text-transform:uppercase;font-size:12px;letter-spacing:.09em;margin-bottom:46px;transition:.2s}
.back-link span:first-child{font-size:21px;color:#ca82f0}.back-link:hover{color:#fff}
.intro-layout{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(360px,.8fr);align-items:end;gap:60px}
.section-kicker{margin:0 0 15px;color:#ca82ef;font-size:12px;letter-spacing:.16em;font-weight:600}
.molecules-intro h1{font:500 clamp(48px,6vw,82px)/.98 Manrope,sans-serif;letter-spacing:-.052em;margin:0;background:linear-gradient(100deg,#fff 0,#ded5e4 52%,#c26fe9 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.intro-copy{color:#b9b2be;font-size:17px;line-height:1.75;margin:0;max-width:580px}
.collection-facts{display:flex;align-items:stretch;gap:0;margin-top:42px;border-top:1px solid rgba(255,255,255,.11);border-bottom:1px solid rgba(255,255,255,.11)}
.collection-facts span{display:flex;align-items:baseline;gap:13px;min-height:72px;padding:20px 35px;border-right:1px solid rgba(255,255,255,.11)}
.collection-facts span:first-child{padding-left:0}.collection-facts span:last-child{border-right:0}
.collection-facts b{font:600 17px/1 Manrope,sans-serif;color:#f4edf7}.collection-facts em{font-style:normal;color:#8e8794;font-size:11px;text-transform:uppercase;letter-spacing:.08em}

.molecule-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:26px}
.molecule-card{grid-column:span 2;min-width:0;border:1px solid rgba(190,135,226,.22);border-radius:18px;overflow:hidden;background:linear-gradient(160deg,rgba(15,18,28,.98),rgba(5,7,12,.99));box-shadow:0 28px 65px rgba(0,0,0,.28);transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease}
.molecule-card:last-child:nth-child(3n+1){grid-column:3/span 2}
.molecule-card:nth-last-child(2):nth-child(3n+1){grid-column:2/span 2}
.molecule-card:hover{transform:translateY(-7px);border-color:rgba(204,123,243,.52);box-shadow:0 38px 85px rgba(0,0,0,.46),0 0 40px rgba(113,43,153,.1)}
.card-visual{position:relative;display:block;width:100%;aspect-ratio:4/5;border:0;padding:0;background:#05070c;overflow:hidden;cursor:pointer;text-align:left}
.molecule-image{display:block;width:100%;height:100%;object-fit:cover;object-position:center;opacity:0;transform:scale(1.018);transition:opacity .45s ease,transform .8s ease}
.molecule-image.loaded{opacity:1}.molecule-card:hover .molecule-image{transform:scale(1.045)}
.card-visual:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(2,3,7,.13),transparent 58%,rgba(3,4,8,.64));pointer-events:none}
.card-number,.card-badge{position:absolute;z-index:2;top:19px;display:inline-flex;align-items:center;min-height:29px;border:1px solid rgba(255,255,255,.16);background:rgba(3,5,10,.62);backdrop-filter:blur(12px);font-size:9px;letter-spacing:.1em;color:#d9cedf}
.card-number{left:19px;padding:0 10px;color:#d79df2}.card-badge{right:19px;padding:0 11px}
.card-copy{position:relative;padding:24px 25px 25px;min-height:170px}
.card-copy>div{padding-right:88px}.card-copy p{color:#a678be;font-size:10px;line-height:1.4;letter-spacing:.1em;margin:0 0 8px}
.card-copy h2{font:500 27px/1.1 Manrope,sans-serif;letter-spacing:-.035em;margin:0;color:#fff}
.dose{position:absolute;right:25px;top:28px;color:#d5c9db;font:500 14px/1 Manrope,sans-serif}
.open-profile{position:absolute;left:25px;right:25px;bottom:22px;display:flex;align-items:center;justify-content:space-between;border:0;border-top:1px solid rgba(255,255,255,.12);background:transparent;color:#d9d1de;padding:16px 0 0;cursor:pointer;text-transform:uppercase;font-size:11px;letter-spacing:.08em;text-align:left}
.open-profile b{font-size:19px;color:#ca7cf0;transition:transform .25s}.open-profile:hover b{transform:translate(3px,-3px)}

.quality-note{display:grid;grid-template-columns:1fr 1.25fr auto;align-items:center;gap:52px;margin-top:74px;padding:42px 0;border-top:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12)}
.quality-note h2{font:500 clamp(28px,3vw,43px)/1.13 Manrope,sans-serif;letter-spacing:-.035em;margin:0;max-width:520px}
.quality-note>p{color:#a9a2ae;font-size:15px;line-height:1.75;margin:0}
.quality-note>a,.dialog-cta{display:flex;align-items:center;justify-content:space-between;gap:28px;min-width:230px;padding:17px 18px;border:1px solid rgba(194,119,235,.4);background:rgba(83,32,111,.16);color:#ede4f2;text-decoration:none;text-transform:uppercase;font-size:11px;letter-spacing:.06em}
.quality-note>a b,.dialog-cta b{font-size:19px;color:#ce83f2}

.molecule-dialog{width:min(1120px,calc(100% - 48px));max-height:min(860px,calc(100vh - 48px));padding:0;border:1px solid rgba(204,133,242,.35);border-radius:20px;background:#080a11;color:#f6f2f8;box-shadow:0 55px 150px #000;overflow:auto}
.molecule-dialog::backdrop{background:rgba(0,0,0,.82);backdrop-filter:blur(10px)}
.dialog-close{position:fixed;z-index:4;margin:18px 0 0 calc(min(1120px,100vw - 48px) - 61px);width:43px;height:43px;border:1px solid rgba(255,255,255,.22);border-radius:50%;background:rgba(5,7,12,.8);color:#fff;font-size:28px;line-height:1;cursor:pointer;backdrop-filter:blur(10px)}
.dialog-layout{display:grid;grid-template-columns:minmax(380px,.9fr) minmax(470px,1.1fr);min-height:700px}
.dialog-visual{position:sticky;top:0;height:min(820px,calc(100vh - 50px));min-height:700px;background:#03050a;overflow:hidden}
.dialog-visual:before{content:"";position:absolute;z-index:0;left:calc(50% - 20px);top:calc(50% - 20px);width:40px;height:40px;border:2px solid rgba(202,124,240,.16);border-top-color:#c77eeb;border-radius:50%;animation:dialog-loader .8s linear infinite;transition:opacity .25s}
.dialog-visual:has(img.loaded):before{opacity:0}
.dialog-visual:after{content:"";position:absolute;z-index:2;inset:0;background:linear-gradient(90deg,transparent 75%,#080a11 100%),linear-gradient(180deg,transparent 75%,rgba(4,5,10,.5))}
.dialog-visual img{position:relative;z-index:1;width:100%;height:100%;display:block;object-fit:cover;opacity:0;transition:opacity .35s ease}
.dialog-visual img.loaded{opacity:1}
@keyframes dialog-loader{to{transform:rotate(360deg)}}
.dialog-content{padding:68px clamp(36px,5vw,72px);align-self:center}
.dialog-overline{color:#c783eb;font-size:11px;letter-spacing:.13em;margin:0 0 13px;text-transform:uppercase}
.dialog-content h2{font:500 clamp(42px,5vw,68px)/1 Manrope,sans-serif;letter-spacing:-.05em;margin:0 0 23px}
.dialog-lead{font-size:16px;line-height:1.75;color:#bbb4c0;margin:0 0 31px}
.dialog-specs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.12)}
.dialog-specs div{min-height:84px;padding:17px 18px;background:#0a0c14}.dialog-specs span{display:block;color:#837b89;font-size:9px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:9px}.dialog-specs b{font:500 13px/1.4 Manrope,sans-serif;color:#f1eaf4}
.dialog-section{margin-top:31px;padding-top:26px;border-top:1px solid rgba(255,255,255,.12)}
.dialog-section h3{font:600 13px/1.2 Manrope,sans-serif;text-transform:uppercase;letter-spacing:.08em;color:#d29aee;margin:0 0 14px}
.dialog-section p{color:#99929f;font-size:13px;line-height:1.65;margin:14px 0 0}
.document-chips{display:flex;gap:7px;flex-wrap:wrap}.document-chips span{border:1px solid rgba(184,119,221,.32);background:rgba(81,31,107,.12);padding:8px 11px;font-size:9px;letter-spacing:.09em;color:#d9c9e1}
.dialog-cta{margin-top:28px;width:100%}.dialog-disclaimer{margin:19px 0 0;color:#716b76;font-size:10px;line-height:1.55}

@media(max-width:1120px){
  .intro-layout{grid-template-columns:1fr;gap:24px}.intro-copy{max-width:760px}.molecule-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.molecule-card,.molecule-card:nth-last-child(2):nth-child(3n+1){grid-column:span 2}.molecule-card:last-child:nth-child(odd){grid-column:2/span 2}.quality-note{grid-template-columns:1fr 1fr}.quality-note>a{grid-column:2}
}
@media(max-width:850px){
  .molecules-main{width:calc(100% - 36px);padding-top:48px}.collection-facts{flex-wrap:wrap}.collection-facts span{padding:18px 24px}.collection-facts span:first-child{padding-left:0}.dialog-layout{grid-template-columns:1fr}.dialog-visual{position:relative;height:auto;min-height:0;aspect-ratio:4/4.25}.dialog-visual:after{background:linear-gradient(180deg,transparent 75%,#080a11 100%)}.dialog-content{padding:42px}.quality-note{grid-template-columns:1fr;gap:25px}.quality-note>a{grid-column:auto;width:max-content}.dialog-close{position:absolute;right:16px;margin:16px 0 0}
}
@media(max-width:620px){
  .molecules-main{width:calc(100% - 24px);padding:31px 0 55px}.molecules-intro{margin-bottom:27px}.back-link{font-size:10px;margin-bottom:30px}.section-kicker{font-size:10px;line-height:1.5}.molecules-intro h1{font-size:45px}.intro-copy{font-size:15px;line-height:1.65}.collection-facts{margin-top:27px}.collection-facts span{width:50%;min-height:62px;display:block;padding:15px 14px}.collection-facts span:first-child{padding-left:0}.collection-facts span:nth-child(2){border-right:0}.collection-facts span:last-child{width:100%;border-top:1px solid rgba(255,255,255,.11);padding-left:0}.collection-facts b{display:block;font-size:15px;margin-bottom:6px}.collection-facts em{font-size:9px}
  .molecule-grid{grid-template-columns:1fr;gap:18px}.molecule-card,.molecule-card:last-child:nth-child(odd){grid-column:auto;border-radius:15px}.card-visual{aspect-ratio:4/4.65}.card-copy{min-height:158px;padding:21px}.card-copy h2{font-size:25px}.card-copy p{font-size:9px}.dose{right:21px;top:25px}.open-profile{left:21px;right:21px;bottom:20px;font-size:10px}
  .quality-note{margin-top:45px;padding:32px 0}.quality-note h2{font-size:31px}.quality-note>p{font-size:14px}.quality-note>a{width:100%;min-width:0}
  .molecule-dialog{width:calc(100% - 16px);max-height:calc(100vh - 16px);border-radius:15px}.dialog-visual{aspect-ratio:1/1;max-height:52vh}.dialog-content{padding:32px 22px 28px}.dialog-content h2{font-size:42px}.dialog-lead{font-size:14px}.dialog-specs div{min-height:78px;padding:14px}.dialog-specs b{font-size:12px}.dialog-close{width:40px;height:40px}
}