:root{
  --ink:#171119;
  --muted:#766f78;
  --paper:#fff;
  --soft:#f7f2f7;
  --purple:#8d5696;
  --purple-deep:#55305f;
  --lilac:#d6add9;
  --line:#e8e0e8;
  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"Jost",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);background:var(--paper);font-family:var(--sans);font-weight:300;-webkit-font-smoothing:antialiased}
body.modal-open{overflow:hidden}
button,a{font:inherit}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

.hero{position:relative;display:grid;place-items:center;overflow:hidden;background:linear-gradient(145deg,#67336f 0%,#9d67a5 48%,#d4acd6 100%);color:#fff;text-align:center}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 115%,rgba(255,255,255,.34),transparent 42%),linear-gradient(120deg,rgba(255,255,255,.07),transparent 46%)}
.hero__glow{position:absolute;border-radius:50%;filter:blur(3px);border:1px solid rgba(255,255,255,.16)}
.hero__glow--one{width:54vw;height:54vw;max-width:720px;max-height:720px;top:-27vw;right:-10vw}
.hero__glow--two{width:42vw;height:42vw;max-width:560px;max-height:560px;bottom:-24vw;left:-13vw}
.hero__inner{position:relative;z-index:1;width:min(920px,92vw);padding:34px 0 24px}
.eyebrow,.section-kicker{margin:0;font-size:.66rem;font-weight:600;letter-spacing:.29em;text-transform:uppercase}
.eyebrow{opacity:.85}
.brand-logo{width:min(470px,85vw);margin:18px auto 30px}
.hero h1{font-family:var(--serif);font-size:clamp(6.5rem,21vw,13rem);font-weight:600;letter-spacing:-.07em;line-height:.62;margin:0;text-shadow:0 14px 46px rgba(57,26,64,.18)}
.hero__sub{margin:60px 0 0;font-size:.72rem;font-weight:500;letter-spacing:.27em}

.intro{max-width:1120px;margin:auto;padding:30px 20px 34px;text-align:center}
.section-kicker{color:var(--purple)}
.intro h2,.catalog h2{font-family:var(--serif);font-size:clamp(2.7rem,8vw,5.7rem);font-weight:600;letter-spacing:-.04em;line-height:.88;margin:20px 0}
.intro h2{margin-top:0;font-size:min(5.7rem,8vw)}
.intro h2 span{display:block;white-space:nowrap}
.intro>p:not(.section-kicker){max-width:630px;margin:0 auto;color:var(--muted);font-size:1rem;line-height:1.75}
.benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:64px;background:var(--line);border:1px solid var(--line)}
.benefits article{display:grid;grid-template-columns:28px 1fr;column-gap:12px;background:#fff;padding:16px;text-align:left}
.benefits span{grid-row:1/3;display:block;color:var(--purple);font-size:.62rem;font-weight:600;letter-spacing:.1em;margin:4px 0 0}
.benefits strong{grid-column:2;display:block;font-family:var(--serif);font-size:1.4rem;line-height:1}
.benefits p{grid-column:2;color:var(--muted);font-size:.72rem;line-height:1.35;margin:5px 0 0}

.catalog{background:var(--soft);padding:30px max(18px,calc((100vw - 1180px)/2)) 72px}
.catalog__head{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:42px}
.catalog__head h2{margin:14px 0 0;font-size:clamp(2.8rem,6.7vw,5rem)}
.catalog__head>p{color:var(--muted);font-size:.76rem;letter-spacing:.08em;padding-bottom:8px}
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.product-card{background:#fff;border:1px solid var(--line);overflow:hidden;cursor:pointer;transition:transform .25s,box-shadow .25s}
.product-card:hover,.product-card:focus-visible{outline:none;transform:translateY(-5px);box-shadow:0 20px 50px rgba(74,41,78,.12)}
.product-card__media{position:relative;aspect-ratio:1/1.08;overflow:hidden;background:#fff}
.product-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.product-card:hover img{transform:scale(1.025)}
.product-card__body{padding:26px 18px 20px}
.product-card__body>p{margin:0;color:var(--purple);font-size:.61rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase}
.product-card h3{font-family:var(--serif);font-size:1.65rem;line-height:1;margin:8px 0 10px}
.product-card__price{display:flex;align-items:end;justify-content:space-between;gap:10px}
.product-card__price strong{font-family:var(--serif);font-size:1.7rem}
.product-card__price del{margin-left:8px;color:var(--muted);font-size:.78rem}
.product-card__price span{font-size:.56rem;font-weight:600;letter-spacing:.12em}
.benefits--closing{margin-top:56px}

.modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:18px}
.modal[hidden]{display:none}
.modal__backdrop{position:absolute;inset:0;background:rgba(27,15,30,.72);backdrop-filter:blur(5px)}
.modal__card{position:relative;z-index:1;width:min(980px,100%);max-height:92svh;overflow:auto;background:#fff;box-shadow:0 35px 90px rgba(0,0,0,.4)}
.modal__close{position:absolute;z-index:4;top:10px;right:10px;width:38px;height:38px;border:0;border-radius:50%;background:rgba(255,255,255,.94);font-size:1.5rem;line-height:1;box-shadow:0 3px 15px rgba(0,0,0,.15)}
#modal-body{display:grid;grid-template-columns:1.08fr .92fr}
.gallery{min-width:0;background:#fff}
.gallery__stage{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;aspect-ratio:1/1.08}
.gallery__stage::-webkit-scrollbar{display:none}
.gallery__item{flex:0 0 100%;display:grid;place-items:center;scroll-snap-align:start;background:#fff}
.gallery__item img,.gallery__item video{width:100%;height:100%;object-fit:contain}
.gallery__dots{display:flex;justify-content:center;gap:8px;padding:14px;background:#fff}
.gallery__dots button{width:7px;height:7px;border:0;border-radius:50%;padding:0;background:#c9c1ca}
.gallery__dots button.is-active{background:var(--purple);transform:scale(1.35)}
.product-detail{align-self:center;padding:50px 44px}
.product-detail h2{font-family:var(--serif);font-size:3.3rem;line-height:.9;margin:18px 0 8px}
.product-detail__tone{margin:0;color:var(--purple);font-size:.68rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.product-detail__price{display:flex;align-items:baseline;gap:12px;margin:25px 0 22px}
.product-detail__price strong{font-family:var(--serif);font-size:2.7rem}
.product-detail__price del{color:var(--muted);font-size:.9rem}
.product-detail__price span{font-size:.58rem;font-weight:600;letter-spacing:.11em}
.product-detail__description{color:#4f4851;font-size:.88rem;line-height:1.65}
.product-detail ul{list-style:none;padding:0;margin:20px 0;color:#625b64;font-size:.76rem;line-height:1.7}
.product-detail li::before{content:"↗";color:var(--purple);margin-right:9px}
.product-detail__codes{display:flex;gap:12px;flex-wrap:wrap;margin:20px 0}
.product-detail__codes span{border:1px solid var(--line);padding:6px 9px;color:var(--muted);font-size:.58rem;letter-spacing:.09em}
.buy-button{display:block;background:var(--purple-deep);color:#fff;text-align:center;padding:15px;font-size:.7rem;font-weight:600;letter-spacing:.15em;transition:.2s}
.buy-button:hover{background:var(--ink)}

footer{padding:58px 20px;text-align:center;background:var(--purple-deep);color:#fff}
footer img{width:min(360px,75vw);margin:0 auto 18px}
footer p{font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;opacity:.7}
.load-error{text-align:center;padding:80px 20px}

@media(max-width:760px){
  .hero__inner{padding:28px 0 20px}
  .brand-logo{margin:16px auto 25px}
  .hero h1{font-size:clamp(6.2rem,31vw,9rem)}
  .hero__sub{font-size:.58rem;line-height:1.7;margin-top:54px}
  .benefits{grid-template-columns:1fr}.benefits article{padding:12px 14px}.benefits span{margin:3px 0 0}
  .catalog__head{display:block}.catalog__head>p{margin-top:18px}
  .product-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .product-card__media{aspect-ratio:1/.92}
  .product-card[data-product="gelpot-2"] .product-card__media,
  .product-card[data-product="gelpot-3"] .product-card__media,
  .product-card[data-product="gelpot-4"] .product-card__media,
  .product-card[data-product="gelpot-5"] .product-card__media{aspect-ratio:1/.84}
  .product-card__body{padding:5px 12px 15px}
  .product-card__body>p{font-size:.48rem;letter-spacing:.06em;white-space:nowrap}
  .product-card h3{font-size:1.05rem;margin-bottom:7px;white-space:nowrap}
  .product-card__price{display:block}.product-card__price strong{font-size:1.45rem}.product-card__price span{display:block;margin-top:8px}
  #modal-body{grid-template-columns:1fr}.modal__card{max-width:470px}.product-detail{padding:30px 24px 34px}.product-detail h2{font-size:2.7rem}
}
@media(max-width:360px){.product-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}