:root {
  --plum: #24092F;
  --plum2: #3A0F4A;
  --ink: #541870;
  --purple: #772B85;
  --magenta: #AE258F;
  --pink: #F6CFE4;
  --lav: #ECE4F4;
  --off: #F8F5FB;
  --grey: #E7E7EC;
  --line: rgba(84, 24, 112, .14);
  --sans: "Inter", system-ui, sans-serif;
  --cond: "Anton", "Inter", sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--plum); }
body { font-family: var(--sans); color: var(--ink); background: var(--off); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, video { display: block; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }

/* loader */
.loader { position: fixed; inset: 0; z-index: 100; background: var(--plum); display: grid; place-items: center; align-content: center; gap: 28px; transition: opacity .7s var(--ease), visibility .7s; }
.loader img { width: 180px; animation: breathe 1.8s ease-in-out infinite; }
.loader-bar { width: 180px; height: 2px; background: rgba(255,255,255,.15); overflow: hidden; border-radius: 2px; }
.loader-bar i { display: block; height: 100%; width: 0; background: var(--pink); transition: width .3s; }
.loader.done { opacity: 0; visibility: hidden; }
@keyframes breathe { 50% { opacity: .55; filter: drop-shadow(0 0 22px rgba(246,207,228,.6)); } }

/* chips, pills */
.chip { display: inline-flex; align-items: center; height: 30px; padding: 0 14px; border-radius: 99px; font-size: 12px; font-weight: 600; letter-spacing: .04em; border: 1px solid var(--line); color: var(--ink); background: rgba(255,255,255,.6); white-space: nowrap; transition: background .35s, color .35s, border-color .35s; }
.chip.sel { background: var(--ink); color: #fff; border-color: var(--ink); }
.chip.ghost { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); color: rgba(255,255,255,.75); }
.eyebrow { display: block; font-size: 12px; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: var(--magenta); margin-bottom: 18px; }
.eyebrow.light { color: var(--pink); }
.pill { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: 99px; border: 1.5px solid var(--ink); font-weight: 800; font-size: 14px; letter-spacing: .02em; color: var(--ink); transition: transform .3s var(--ease), background .3s; }
.pill:hover { transform: translateY(-2px); background: rgba(84,24,112,.06); }
.pill .pill-k { font-weight: 500; opacity: .6; }
.pill.dark { background: var(--ink); color: #fff; }
.pill.dark:hover { background: var(--purple); }
.pill.light { border-color: rgba(255,255,255,.7); color: #fff; }
.pill-tip { position: absolute; left: 50%; top: -34px; transform: translate(-50%, 6px); background: var(--magenta); color: #fff; font-size: 11px; font-weight: 700; padding: 5px 10px; border-radius: 6px; opacity: 0; pointer-events: none; transition: .3s var(--ease); }
.pill.copied .pill-tip { opacity: 1; transform: translate(-50%, 0); }

/* nav */
.nav { position: fixed; top: 18px; left: 50%; transform: translate(-50%, -140%); z-index: 50; width: min(1240px, calc(100% - 48px)); height: 60px; display: flex; align-items: center; gap: 22px; padding: 0 12px 0 20px; border-radius: 18px; background: rgba(248,245,251,.78); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); border: 1px solid rgba(255,255,255,.7); box-shadow: 0 10px 40px rgba(36,9,47,.12); transition: transform .8s var(--ease); }
.nav.show { transform: translate(-50%, 0); }
.nav-brand img { height: 30px; width: auto; }
.tabs { position: relative; display: flex; gap: 2px; margin: 0 auto; padding: 4px; border-radius: 12px; background: rgba(84,24,112,.06); }
.tabs a { position: relative; z-index: 1; height: 36px; display: grid; place-items: center; padding: 0 16px; font-size: 13px; font-weight: 600; color: rgba(84,24,112,.62); border-radius: 9px; transition: color .3s; }
.tabs a.on { color: #fff; }
.tab-ind { position: absolute; top: 4px; height: 36px; border-radius: 9px; background: var(--ink); transition: left .5s var(--ease), width .5s var(--ease), opacity .3s; opacity: 0; }
.nav-right { display: flex; align-items: center; gap: 14px; }
.by { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; color: rgba(84,24,112,.55); }
.th { height: 11px; width: auto; color: var(--plum); }
.progress { position: absolute; left: 20px; right: 20px; bottom: -1px; height: 2px; overflow: hidden; border-radius: 2px; }
.progress i { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--magenta), var(--purple)); }

/* scenes */
.scene { position: relative; height: 100vh; overflow: hidden; }
h2 { font-weight: 800; font-size: clamp(40px, 4.4vw, 72px); letter-spacing: -.035em; line-height: .98; }

/* INTRO */
.intro { background: var(--plum); }
.intro-stage { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; text-align: center; }
.glow { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px; border-radius: 50%; background: radial-gradient(circle, #fff 0%, #FBF6FD 45%, var(--off) 70%); transform: scale(0); }
.intro-top { position: absolute; top: 34px; left: 40px; right: 40px; display: flex; justify-content: space-between; }
.switch { position: relative; z-index: 2; width: 92px; height: 46px; border-radius: 99px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); margin-bottom: 34px; }
.switch i { position: absolute; top: 5px; left: 5px; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.55); box-shadow: 0 0 0 rgba(246,207,228,0); }
.intro-title { position: relative; z-index: 2; font-family: var(--cond); font-weight: 400; font-size: clamp(110px, 15vw, 260px); line-height: .86; letter-spacing: -.005em; text-transform: uppercase; color: rgba(255,255,255,.08); display: flex; gap: .18em; }
.intro-title .w { display: block; }
.intro-logo { position: relative; z-index: 2; width: 230px; margin-top: 34px; opacity: 0; }
.intro-line { position: relative; z-index: 2; margin-top: 16px; font-size: 17px; font-weight: 500; color: var(--ink); opacity: 0; }
.cue { position: absolute; z-index: 2; bottom: 34px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.cue i { width: 1px; height: 38px; background: linear-gradient(rgba(255,255,255,.6), transparent); animation: drip 1.6s ease-in-out infinite; transform-origin: top; }
@keyframes drip { 0% { transform: scaleY(0); } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

/* OFFER */
.offer { background: var(--lav); transition: background .8s var(--ease); }
.offer.deo { background: #F7E3EF; }
.offer-stage { position: absolute; inset: 110px 64px 56px; display: grid; grid-template-columns: 300px 1fr; gap: 56px; }
.offer-side { padding-top: 34px; display: flex; flex-direction: column; }
.seg { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 5px; border-radius: 14px; background: #fff; box-shadow: 0 6px 24px rgba(84,24,112,.08); }
.seg button { position: relative; z-index: 1; height: 44px; font-size: 14px; font-weight: 700; border-radius: 10px; color: rgba(84,24,112,.55); transition: color .35s; }
.seg button.on { color: #fff; }
.seg-ind { position: absolute; top: 5px; left: 5px; width: calc(50% - 5px); height: 44px; border-radius: 10px; background: var(--ink); transition: transform .55s var(--ease), background .55s; }
.offer.deo .seg-ind { transform: translateX(100%); background: var(--magenta); }
.offer-meta { list-style: none; margin-top: auto; border-top: 1px solid var(--line); }
.offer-meta li { display: flex; justify-content: space-between; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.offer-meta b { font-weight: 500; color: rgba(84,24,112,.55); }
.offer-meta span { font-weight: 700; }
.offer-panels { position: relative; }
.opanel { position: absolute; inset: 0; border-radius: 28px; background: #fff; box-shadow: 0 30px 90px rgba(84,24,112,.12); padding: 44px 52px; display: grid; grid-template-columns: 1.3fr 1fr; grid-template-rows: auto 1fr; column-gap: 20px; overflow: hidden; }
.opanel[data-o="1"] { background: var(--magenta); color: #fff; }
.op-head { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.opanel[data-o="1"] .chip { background: rgba(255,255,255,.15); color: #fff; border-color: rgba(255,255,255,.35); }
.op-msg { font-size: 15px; font-weight: 500; opacity: .75; }
.op-copy { position: relative; z-index: 5; align-self: end; display: flex; flex-direction: column; align-items: flex-start; }
.op-big { display: flex; gap: .2em; font-weight: 900; font-size: clamp(80px, 8.6vw, 160px); line-height: .84; letter-spacing: -.05em; }
.op-big.cond { flex-direction: column; gap: 0; font-family: var(--cond); font-weight: 400; letter-spacing: 0; text-transform: uppercase; font-size: clamp(80px, 9vw, 160px); line-height: .9; }
.op-big span { display: block; overflow: hidden; }
.op-sub { margin: 14px 0 28px; font-size: 22px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--magenta); }
.opanel[data-o="1"] .op-sub { color: var(--pink); }
.opanel[data-o="1"] .pill.dark { background: #fff; color: var(--magenta); border-color: #fff; }
.op-prods { position: relative; align-self: stretch; display: flex; align-items: flex-end; justify-content: center; margin: 10px -20px -44px 0; }
.op-prods img { height: 84%; width: auto; max-width: 46%; object-fit: cover; border-radius: 22px; box-shadow: 0 24px 60px rgba(36,9,47,.18); }
.op-prods img:nth-child(1) { transform: translate(18%, -4%) rotate(-5deg); z-index: 1; }
.op-prods img:nth-child(2) { transform: translateY(-6%); z-index: 2; }
.op-prods img:nth-child(3) { transform: translate(-18%, -2%) rotate(5deg); z-index: 1; }

/* VISUALS */
.visuals { background: var(--off); }
.vis-stage { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 112px 0 40px; }
.vis-head { display: flex; justify-content: space-between; align-items: flex-end; padding: 0 64px; }
.vis-tools { display: flex; align-items: center; gap: 26px; }
.chips { display: flex; gap: 8px; }
.counter { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: rgba(84,24,112,.5); font-variant-numeric: tabular-nums; }
.counter b { color: var(--ink); font-size: 22px; font-weight: 800; }
.counter i { width: 34px; height: 1px; background: var(--line); }
.vis-track { flex: 1; display: flex; gap: 28px; align-items: center; padding: 0 64px 56px; will-change: transform; }
.card { position: relative; flex: none; height: min(60vh, 600px); aspect-ratio: 3 / 4; cursor: zoom-in; }
.card .frame { position: absolute; inset: 0; border-radius: 22px; overflow: hidden; background: #fff; box-shadow: 0 24px 60px rgba(36,9,47,.14); transition: transform .6s var(--ease), box-shadow .6s var(--ease); }
.card img { width: 100%; height: 100%; object-fit: cover; }
.card:hover .frame { transform: translateY(-8px); box-shadow: 0 34px 80px rgba(36,9,47,.22); }
.card .meta { position: absolute; left: 4px; right: 4px; top: calc(100% + 14px); display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.card .meta b { font-weight: 700; }
.card .meta span { color: rgba(84,24,112,.6); text-align: right; }
.card .tag { position: absolute; top: 14px; left: 14px; z-index: 2; }
.scrub { margin: 0 64px; height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; }
.scrub i { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: var(--ink); }

/* MOTION */
.motion { background: var(--plum); color: #fff; }
.mo-stage { position: absolute; inset: 104px 64px 44px; display: grid; grid-template-columns: 1fr auto 300px; gap: 56px; align-items: center; }
.mo-left h2 { color: #fff; }
.mo-msg { margin-top: 22px; font-size: 21px; line-height: 1.35; font-weight: 500; color: rgba(255,255,255,.78); max-width: 420px; }
.mo-tags { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 8px; }
.mo-tags .chip { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); color: rgba(255,255,255,.85); }
.mo-player { position: relative; height: min(80vh, 760px); aspect-ratio: 3 / 4; }
.mo-screen { position: absolute; inset: 0; border-radius: 26px; overflow: hidden; background: #000; box-shadow: 0 40px 120px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.08); }
.mo-screen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s var(--ease); }
.mo-screen video.on { opacity: 1; }
.mo-bar { position: absolute; left: 22px; right: 22px; bottom: 18px; height: 3px; border-radius: 3px; background: rgba(255,255,255,.25); overflow: hidden; }
.mo-bar i { display: block; height: 100%; width: 100%; background: #fff; transform-origin: 0 50%; transform: scaleX(0); }
.mo-list { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.mo-list li { display: grid; grid-template-columns: 58px 1fr; gap: 14px; align-items: center; padding: 10px; border-radius: 16px; cursor: pointer; transition: background .4s; }
.mo-list li.on { background: rgba(255,255,255,.09); }
.mo-list img { width: 58px; height: 77px; object-fit: cover; border-radius: 10px; opacity: .55; transition: opacity .4s; }
.mo-list li.on img { opacity: 1; }
.mo-list b { display: block; font-size: 14px; font-weight: 700; }
.mo-list span { display: block; margin-top: 3px; font-size: 12px; color: rgba(255,255,255,.5); }
.mo-list .lp { margin-top: 10px; height: 2px; border-radius: 2px; background: rgba(255,255,255,.15); overflow: hidden; }
.mo-list .lp i { display: block; height: 100%; width: 100%; background: var(--pink); transform-origin: 0 50%; transform: scaleX(0); }

/* STUDIO */
.studio { position: relative; background: #fff; padding: 140px 0 120px; overflow: hidden; }
.st-head { display: flex; justify-content: space-between; align-items: flex-end; padding: 0 64px 50px; }
.st-tools { display: flex; align-items: center; gap: 24px; }
.filter .chip { cursor: pointer; height: 36px; padding: 0 16px; font-size: 13px; }
.readout { font-size: 13px; color: rgba(84,24,112,.55); font-weight: 600; }
.readout b { color: var(--ink); font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.st-wall { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; padding: 0 64px; align-items: start; }
.st-col { display: flex; flex-direction: column; gap: 16px; will-change: transform; }
.ph { position: relative; border-radius: 16px; overflow: hidden; background: var(--grey); cursor: zoom-in; aspect-ratio: 4 / 5; transition: opacity .5s var(--ease), transform .5s var(--ease), filter .5s; }
.ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.ph:hover img { transform: scale(1.05); }
.ph.dim { opacity: .14; filter: grayscale(1); pointer-events: none; }

/* 3D */
.renders { background: var(--grey); transition: background .8s var(--ease); }
.r-stage { position: absolute; inset: 104px 64px 40px; display: grid; grid-template-columns: 300px 1fr 300px; gap: 40px; align-items: center; }
.r-list { list-style: none; border-top: 1px solid var(--line); }
.r-list li { display: flex; align-items: center; gap: 14px; padding: 15px 4px; border-bottom: 1px solid var(--line); font-size: 15px; font-weight: 600; color: rgba(84,24,112,.45); cursor: pointer; transition: color .35s, padding .35s var(--ease); }
.r-list li i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: .4; transition: opacity .35s, transform .35s; }
.r-list li.on { color: var(--ink); padding-left: 12px; }
.r-list li.on i { opacity: 1; transform: scale(1.4); background: var(--magenta); }
.r-view { position: relative; height: min(82vh, 820px); display: grid; place-items: center; perspective: 1400px; }
.r-halo { position: absolute; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.95), rgba(255,255,255,0) 68%); }
.r-imgs { position: relative; height: 100%; aspect-ratio: 1100 / 1366; transform-style: preserve-3d; }
.r-imgs img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transform: translateY(30px) scale(.96); transition: opacity .7s var(--ease), transform .9s var(--ease); border-radius: 20px; }
.r-imgs img.on { opacity: 1; transform: none; }
.r-floor { position: absolute; bottom: 4%; width: 46%; height: 26px; border-radius: 50%; background: radial-gradient(rgba(36,9,47,.18), transparent 70%); filter: blur(4px); }
.r-name { font-size: 40px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.r-line { margin-top: 12px; font-size: 14px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--magenta); }
.r-hint { margin-top: 40px; font-size: 12px; color: rgba(84,24,112,.5); }

/* INSTAGRAM */
.insta { background: var(--off); }
.ig-stage { position: absolute; inset: 110px 64px 56px; display: grid; grid-template-columns: 420px 1fr; gap: 64px; align-items: center; }
.ig-seg { margin-top: 34px; width: 300px; }
.insta.after .ig-seg .seg-ind { transform: translateX(100%); background: var(--magenta); }
.ig-notes { list-style: none; margin-top: 34px; border-top: 1px solid var(--line); }
.ig-notes li { display: flex; justify-content: space-between; gap: 18px; padding: 15px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.ig-notes b { font-weight: 500; color: rgba(84,24,112,.55); }
.ig-notes span { font-weight: 700; text-align: right; }
.ig-cards { position: relative; height: 100%; }
.igc { position: absolute; left: 0; right: 0; top: 50%; border-radius: 22px; overflow: hidden; background: #fff; box-shadow: 0 30px 90px rgba(84,24,112,.14); opacity: 0; transform: translateY(-46%) scale(.97); transition: opacity .6s var(--ease), transform .7s var(--ease); }
.igc.on { opacity: 1; transform: translateY(-50%); }
.igc img { width: 100%; height: auto; }

/* CLOSE */
.close { position: relative; min-height: 100vh; background: var(--plum); color: #fff; display: grid; place-items: center; align-content: center; text-align: center; gap: 22px; padding: 120px 40px; overflow: hidden; }
.close-glow { position: absolute; left: 50%; top: 42%; width: 900px; height: 900px; margin: -450px; border-radius: 50%; background: radial-gradient(circle, rgba(174,37,143,.45), rgba(174,37,143,0) 65%); }
.close > * { position: relative; }
.close-logo { width: 300px; }
.close h2 { color: #fff; max-width: 900px; }
.close p { font-size: 15px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.6); font-weight: 600; }
.close-row { display: flex; gap: 12px; align-items: center; margin-top: 10px; }
.close-by { margin-top: 60px; display: flex; align-items: center; gap: 12px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.close-by .th { height: 14px; color: #fff; filter: invert(1); }

/* lightbox */
.lb { position: fixed; inset: 0; z-index: 80; background: rgba(36,9,47,.92); backdrop-filter: blur(10px); display: grid; grid-template-columns: 90px 1fr 90px; align-items: center; opacity: 0; visibility: hidden; transition: opacity .4s var(--ease), visibility .4s; }
.lb.open { opacity: 1; visibility: visible; }
.lb-fig { display: grid; place-items: center; gap: 16px; height: 100vh; padding: 40px 0; }
.lb-fig img { max-height: calc(100vh - 120px); max-width: 100%; border-radius: 16px; box-shadow: 0 30px 90px rgba(0,0,0,.5); transform: scale(.96); transition: transform .5s var(--ease); }
.lb.open .lb-fig img { transform: none; }
.lb-fig figcaption { font-size: 13px; color: rgba(255,255,255,.7); font-weight: 500; }
.lb-x { position: absolute; top: 22px; right: 26px; width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,.1); color: #fff; font-size: 26px; }
.lb-arrow { justify-self: center; width: 54px; height: 54px; border-radius: 50%; background: rgba(255,255,255,.1); color: #fff; font-size: 30px; transition: background .3s; }
.lb-arrow:hover, .lb-x:hover { background: rgba(255,255,255,.22); }

/* phone in portrait */
.turn { display: none; }
.is-phone .turn.show { position: fixed; inset: 0; z-index: 120; background: var(--plum); color: #fff; display: grid; place-items: center; align-content: center; gap: 24px; text-align: center; font-size: 34px; font-weight: 700; }
.turn img { width: 260px; margin: 0 auto; }
.turn button { margin-top: 20px; font-size: 22px; padding: 18px 30px; border-radius: 99px; border: 1px solid rgba(255,255,255,.4); }