.hero {
  --hero-ink: var(--ink, #102044);
  --hero-muted: var(--muted, #6e839a);
  --hero-pad: clamp(24px, 5.2vw, 88px);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--hero-ink);
  background: #eef8ff;
}
.hero *, .hero *::before, .hero *::after { box-sizing: border-box; }
.hero .hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1680px;
  min-height: 680px;
  min-height: clamp(620px, calc(100svh - 200px), 860px);
  margin: 0 auto;
  padding: 48px var(--hero-pad) 52px;
}
.hero .hero-copy { position: relative; z-index: 3; min-width: 0; }
.hero .hero-eyebrow {
  margin: 0 0 22px;
  color: #6b86a8;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .34em;
  text-transform: uppercase;
}
.hero .hero-title {
  margin: 0;
  font-family: inherit;
  font-size: clamp(50px, 5.7vw, 94px);
  font-weight: 600;
  letter-spacing: -.065em;
  line-height: 1.035;
  text-wrap: balance;
}
.hero .hero-title > span { display: block; }
.hero .hero-subline {
  max-width: 650px;
  margin: 26px 0 0;
  color: var(--hero-muted);
  font-size: clamp(17px, 1.65vw, 25px);
  line-height: 1.42;
  letter-spacing: -.04em;
  text-wrap: balance;
}
.hero .hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 32px; }
.hero .hero-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 25px;
  min-height: 53px;
  padding: 15px 27px;
  border: 1px solid var(--hero-ink);
  border-radius: 999px;
  color: var(--hero-ink);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 240ms ease, background-color 240ms ease, box-shadow 240ms ease;
}
.hero .hero-button svg { width: 19px; height: 19px; flex: none; }
.hero .hero-button--primary { background: var(--hero-ink); color: #fff; box-shadow: 0 5px 20px #17274608; }
.hero .hero-button--secondary { background: #ffffff21; }
.hero .hero-button--secondary svg { display: none; }
.hero .hero-button:hover { transform: translateY(-3px); box-shadow: 0 10px 26px #14274618; }
.hero .hero-button--primary:hover { background: #233c63; }
.hero .hero-button--secondary:hover { background: #ffffff80; }
.hero a:focus-visible { outline: 3px solid #268cb7; outline-offset: 5px; }
.hero .hero-scene { position: relative; min-width: 0; }
.hero .hero-vial-holder { position: absolute; z-index: 2; transform: rotate(var(--vial-tilt, 0deg)); }
.hero .hero-vial {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  user-select: none;
  filter: drop-shadow(0 22px 15px #42648421);
  animation: hero-vial-float var(--float-duration, 9s) ease-in-out var(--float-delay, -2s) infinite;
  will-change: transform;
}
.hero .hero-vial-holder:nth-of-type(2n) { --float-duration: 11s; --float-delay: -5s; }
.hero .hero-vial-holder:nth-of-type(3n) { --float-duration: 8s; --float-delay: -3.5s; }
@keyframes hero-vial-float {
  0%, 100% { transform: translate3d(0, 4px, 0) rotate(-.6deg); }
  50% { transform: translate3d(0, -10px, 0) rotate(.6deg); }
}
.hero .hero-inner--split { display: grid; grid-template-columns: 1.08fr 1fr; align-items: center; gap: 10px; }
.hero .hero-inner--split .hero-scene { align-self: stretch; min-height: 500px; }

/* 01 / The signature: an open center, with three orbiting product scales. */
.hero--signature-sky { background: radial-gradient(ellipse at 48% 33%, #fff 0, #f6fbff 29%, transparent 69%), linear-gradient(125deg, #e2f0fc, #f2faff 50%, #dcecf9); }
.hero--signature-sky .hero-inner { padding-top: 86px; padding-bottom: 100px; }
.hero .hero-inner--orbit { display: flex; align-items: flex-start; justify-content: center; }
.hero--signature-sky .hero-copy { width: 55%; max-width: 810px; text-align: center; padding-top: 35px; }
.hero--signature-sky .hero-title { font-size: clamp(52px, 5.8vw, 94px); }
.hero--signature-sky .hero-subline { margin-left: auto; margin-right: auto; max-width: 570px; }
.hero--signature-sky .hero-actions { justify-content: center; }
.hero .hero-scene--orbit { position: absolute; inset: 0; pointer-events: none; }
.hero .hero-vial--orbit-left { width: 21%; max-width: 340px; left: 4%; bottom: 10%; --vial-tilt: -10deg; }
.hero .hero-vial--orbit-top { width: 16.5%; max-width: 252px; top: 4%; right: 5%; --vial-tilt: 8deg; }
.hero .hero-vial--orbit-bottom { width: 15%; max-width: 228px; bottom: 5%; right: 5%; --vial-tilt: 11deg; }
.hero .hero-floor-glow { position: absolute; bottom: -80px; left: 0; width: 100%; height: 230px; background: radial-gradient(ellipse, #fff 0, #cfebfc60 45%, transparent 70%); }
.hero .hero-signature-atmosphere { position: absolute; z-index: 0; inset: 0; pointer-events: none; overflow: hidden; background: radial-gradient(ellipse at calc(50% + var(--pointer-x, 0) * 10%) calc(38% + var(--pointer-y, 0) * 8%), #ffffff94, transparent 55%); }
.hero .hero-signature-atmosphere i { position: absolute; display: block; width: 24%; aspect-ratio: 1; border-radius: 50%; filter: blur(30px); background: radial-gradient(circle, #c2e8f8a6, transparent 68%); animation: hero-atmosphere 19s ease-in-out infinite alternate; }
.hero .hero-signature-atmosphere i:nth-child(1) { left: -6%; top: 12%; }
.hero .hero-signature-atmosphere i:nth-child(2) { right: -5%; top: 36%; background: radial-gradient(circle, #ccf4e3a1, transparent 68%); animation-delay: -7s; }
.hero .hero-signature-atmosphere i:nth-child(3) { left: 41%; bottom: -26%; width: 33%; opacity: .55; animation-delay: -11s; }
.hero .hero-orbit-ground { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero .hero-orbit-ground i { position: absolute; width: 15%; height: 24px; left: 8%; bottom: 8.5%; background: radial-gradient(ellipse, #4f7d9d29, transparent 72%); border-radius: 50%; filter: blur(7px); transform: rotate(-6deg); animation: hero-ground-breathe 10s ease-in-out infinite; }
.hero .hero-orbit-ground i:nth-child(2) { width: 12%; left: auto; right: 7%; bottom: 5%; opacity: .65; animation-delay: -4s; }
@keyframes hero-atmosphere { from { transform: translate3d(-6px, -10px, 0); opacity: .62; } to { transform: translate3d(7px, 14px, 0); opacity: .95; } }
@keyframes hero-ground-breathe { 0%, 100% { scale: 1; opacity: .75; } 50% { scale: .87; opacity: .45; } }

/* 02 / A quiet mint study with a large hero vial and two horizontal shelves. */
.hero--mint-laboratory { background: radial-gradient(ellipse at 72% 40%, #faffff 7%, #d6f4ee 49%, #edfbf8 78%); }
.hero .hero-inner--mint { padding-top: 20px; padding-bottom: 32px; }
.hero .hero-mint-main { display: grid; grid-template-columns: 1.25fr 1fr; align-items: center; min-height: 465px; }
.hero--mint-laboratory .hero-copy { padding-top: 20px; padding-bottom: 26px; }
.hero--mint-laboratory .hero-title { font-size: clamp(49px, 5.8vw, 87px); }
.hero--mint-laboratory .hero-eyebrow { display: none; }
.hero .hero-scene--mint { height: 470px; }
.hero .hero-vial--mint { height: auto; width: 310px; max-width: 72%; top: 0; left: 20%; --vial-tilt: 7deg; }
.hero .hero-mint-orb { position: absolute; width: 90%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #e1fff7 5%, #a8e9d747, transparent 68%); left: 6%; top: 1%; }
.hero .hero-vial-shadow { position: absolute; width: 55%; height: 34px; border-radius: 50%; left: 25%; bottom: 0; background: #458b8c24; filter: blur(14px); }
.hero .hero-mini-collection { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; position: relative; z-index: 4; }
.hero .hero-mini-collection .hero-product-tile { display: flex; align-items: center; justify-content: flex-end; min-height: 148px; padding: 28px; border-radius: 19px; background: #ffffffa8; border: 1px solid #fff; }
.hero .hero-mini-collection .hero-tile-vial { left: 8%; bottom: -4px; width: 112px; }
.hero .hero-mini-collection .hero-tile-caption { width: 64%; margin: 0; font-size: clamp(22px, 2.6vw, 38px); }
.hero .hero-mini-collection .hero-tile-arrow { width: 44px; height: 44px; background: #d4faf0; border: 0; }
.hero .hero-mini-collection .hero-tile-link { display: none; }

/* 03 / Cloud banks and a broad three-vial display pedestal. */
.hero--cloud-collection { background: linear-gradient(135deg, #f0faff, #d4eafd 60%, #edf8ff); }
.hero--cloud-collection .hero-inner--split { grid-template-columns: 1.05fr 1fr; gap: 0; }
.hero--cloud-collection .hero-copy { align-self: center; padding-bottom: 15px; }
.hero--cloud-collection .hero-title { font-size: clamp(48px, 5.6vw, 85px); }
.hero--cloud-collection .hero-eyebrow { margin-bottom: 27px; }
.hero .hero-cloudscape { position: absolute; z-index: 0; inset: 0; pointer-events: none; opacity: .84; filter: blur(6px); }
.hero .hero-cloudscape i { position: absolute; width: 65%; height: 300px; border-radius: 50%; background: radial-gradient(ellipse at 18% 64%, #fff 0 20%, transparent 38%), radial-gradient(ellipse at 47% 65%, #fff 0 30%, transparent 50%), radial-gradient(ellipse at 70% 71%, #fff 0 26%, transparent 49%); }
.hero .hero-cloudscape i:nth-child(1) { left: -21%; top: 3%; transform: rotate(-10deg); opacity: .75; }
.hero .hero-cloudscape i:nth-child(2) { right: -15%; top: -8%; transform: rotate(12deg); }
.hero .hero-cloudscape i:nth-child(3) { right: -10%; bottom: 9%; width: 90%; }
.hero .hero-scene--cloud { margin-right: -45px; }
.hero .hero-podium--cloud { position: absolute; z-index: 1; width: 116%; height: 115px; left: -8%; bottom: 30px; border-radius: 50% 50% 17% 17% / 28% 28% 24% 24%; background: linear-gradient(95deg, #fff, #d1e1f1 64%, #a5c3dd); border-top: 5px solid #fff; box-shadow: 0 14px 24px #6c8eb32e; }
.hero .hero-podium--cloud::after { content: ''; position: absolute; width: 100%; height: 38%; background: linear-gradient(120deg, #ffffff, #e9f6ff); border-radius: 50%; top: -4px; left: 0; box-shadow: inset 0 -1px 1px #b5c5d5; }
.hero .hero-vial--cloud-left { width: 36%; left: -2%; bottom: 117px; }
.hero .hero-vial--cloud-center { width: 41%; left: 29%; bottom: 116px; --float-duration: 10s; --float-delay: -6s; }
.hero .hero-vial--cloud-right { width: 36%; right: -3%; bottom: 116px; }

/* 04 / A centered statement followed by three color-coded collection panels. */
.hero--spectrum-library { background: radial-gradient(ellipse at 50% 8%, #fff, #eff8ff 65%); }
.hero .hero-inner--spectrum { padding-top: 28px; padding-bottom: 28px; }
.hero--spectrum-library .hero-copy { text-align: center; max-width: 900px; margin: 0 auto 34px; }
.hero--spectrum-library .hero-eyebrow { margin-bottom: 10px; }
.hero--spectrum-library .hero-title { font-size: clamp(48px, 5.6vw, 83px); line-height: .99; }
.hero--spectrum-library .hero-subline { margin: 18px auto 0; }
.hero--spectrum-library .hero-actions { justify-content: center; margin-top: 22px; }
.hero .hero-spectrum-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.hero .hero-product-tile { position: relative; overflow: hidden; color: var(--hero-ink); text-decoration: none; border: 1px solid #ffffffb3; border-radius: 24px; transition: transform 240ms ease, box-shadow 240ms ease; }
.hero .hero-product-tile:hover { transform: translateY(-4px); box-shadow: 0 14px 32px #20426312; }
.hero .hero-product-tile--bpc { background: radial-gradient(ellipse at 48% 38%, #f3fff9, #d5f5e9); }
.hero .hero-product-tile--tb { background: radial-gradient(ellipse at 48% 38%, #f4fbff, #d6eafa); }
.hero .hero-product-tile--ghk { background: radial-gradient(ellipse at 48% 38%, #f8f5ff, #e2dcfb); }
.hero .hero-spectrum-tiles .hero-product-tile { min-height: 350px; }
.hero .hero-spectrum-tiles .hero-tile-vial { width: 180px; max-width: 67%; left: 50%; top: -8px; transform: translateX(-50%); }
.hero .hero-tile-caption { display: flex; align-items: center; justify-content: center; gap: 18px; position: relative; z-index: 3; margin-top: 284px; font-weight: 500; font-size: 23px; letter-spacing: -.035em; }
.hero .hero-tile-arrow { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid currentColor; border-radius: 50%; }
.hero .hero-tile-arrow svg, .hero .hero-tile-link svg { width: 18px; height: 18px; }
.hero .hero-tile-link { display: none; }

/* 05 / Warm editorial light and an architectural stone stage. */
.hero--research-edit { background: #faf8f2; }
.hero--research-edit .hero-inner { padding-top: 60px; padding-bottom: 60px; }
.hero--research-edit .hero-title { font-size: clamp(56px, 6.7vw, 102px); max-width: 690px; }
.hero--research-edit .hero-subline { max-width: 435px; }
.hero--research-edit .hero-inner--split { grid-template-columns: 1fr 1fr; }
.hero .hero-editorial-light { position: absolute; inset: 0; background: repeating-linear-gradient(132deg, transparent 0 110px, #bcab9111 140px, #c9bca427 155px, transparent 190px 285px); filter: blur(13px); transform: scale(1.1); }
.hero .hero-scene--editorial { margin-right: calc(-1 * var(--hero-pad)); }
.hero .hero-vial--editorial { width: 360px; max-width: 76%; bottom: 82px; left: 18%; --float-duration: 12s; }
.hero .hero-stone-plinth { position: absolute; width: 120%; height: 145px; left: 0; bottom: -60px; border-radius: 12px 0 0 0; transform: skewY(-7deg); background: linear-gradient(177deg, #fffefa 0 32%, #ece4d7 33%, #f6f0e6 100%); box-shadow: -20px -15px 24px #b1a2890c; border-top: 1px solid #fff; }
.hero .hero-editorial-caption { position: absolute; bottom: 11px; left: 23%; z-index: 3; font-size: 10px; color: #968d81; letter-spacing: .13em; text-transform: uppercase; }

/* 06 / A full-height glass showcase, complete with a product annotation. */
.hero--clear-by-design { background: radial-gradient(ellipse at 71% 61%, #c6e7fb, #f5fbff 68%); }
.hero--clear-by-design .hero-inner--split { grid-template-columns: .92fr 1.1fr; gap: 40px; }
.hero--clear-by-design .hero-title { font-size: clamp(50px, 5.8vw, 88px); }
.hero--clear-by-design .hero-subline { max-width: 435px; }
.hero .hero-scene--glass { border: 2px solid #ffffffec; border-radius: 48px; min-height: 570px !important; background: linear-gradient(132deg, #ffffff69, #cbecff21 40%, #e9ffff4f); box-shadow: inset 4px 4px 1px #fff, inset -3px -3px 1px #ffffffd4, inset 0 0 19px #ace0ff7a, 0 18px 42px #98c0df1a; }
.hero .hero-glass-orb { position: absolute; inset: 5% 5% 9%; border-radius: 50%; background: linear-gradient(145deg, #bde5f66b, #bbf4df60); }
.hero .hero-vial--glass { width: 355px; max-width: 83%; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.hero .hero-glass-annotation { position: absolute; z-index: 4; bottom: 9%; right: 6%; display: grid; gap: 4px; color: var(--hero-ink); text-decoration: none; font-size: 11px; }
.hero .hero-glass-annotation strong { font-size: 16px; font-weight: 500; }
.hero .hero-glass-annotation > span:last-child { display: flex; align-items: center; gap: 8px; }
.hero .hero-glass-annotation svg { width: 17px; height: 17px; }
.hero .hero-annotation-dot { position: absolute; left: -42px; top: -13px; width: 10px; height: 10px; border: 1px solid #fff; border-radius: 50%; background: #7bd5f5; }
.hero .hero-annotation-dot::after { content: ''; position: absolute; left: 7px; top: 8px; width: 29px; height: 1px; background: #6b95b5; transform: rotate(35deg); transform-origin: left; }
.hero .hero-glass-sheen { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(120deg, transparent 25%, #ffffff42 38%, transparent 49%); pointer-events: none; }

/* 07 / An editorial rail beside three tall, numbered product columns. */
.hero--collection-no-01 { background: #fff; }
.hero .hero-inner--collection { display: grid; grid-template-columns: .82fr 2.2fr; align-items: stretch; gap: 35px; padding-top: 32px; padding-bottom: 32px; }
.hero--collection-no-01 .hero-copy { align-self: center; padding-bottom: 20px; }
.hero--collection-no-01 .hero-title { font-size: clamp(44px, 4.7vw, 73px); }
.hero--collection-no-01 .hero-eyebrow { font-size: 10px; letter-spacing: .3em; }
.hero--collection-no-01 .hero-subline { font-size: clamp(17px, 1.8vw, 23px); margin-top: 29px; }
.hero--collection-no-01 .hero-actions { align-items: flex-start; flex-direction: column; gap: 14px; }
.hero--collection-no-01 .hero-button { font-size: 13px; padding: 14px 21px; gap: 16px; }
.hero--collection-no-01 .hero-button--secondary { border-radius: 0; border: 0; border-bottom: 1px solid #90a3b7; padding: 9px 0 5px; min-height: 0; box-shadow: none; }
.hero--collection-no-01 .hero-button--secondary svg { display: block; }
.hero .hero-collection-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.hero .hero-collection-tiles .hero-product-tile { min-height: 610px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 35px; }
.hero .hero-tile-index { position: absolute; top: 24px; left: 22px; font-size: 12px; letter-spacing: .07em; color: #7890a8; }
.hero .hero-collection-tiles .hero-tile-vial { width: 115%; max-width: 290px; top: 48%; left: 50%; transform: translate(-50%, -50%); }
.hero .hero-collection-tiles .hero-tile-caption { margin-top: 0; font-size: clamp(20px, 2.5vw, 36px); }
.hero .hero-collection-tiles .hero-tile-arrow { display: none; }
.hero .hero-collection-tiles .hero-tile-link { position: relative; z-index: 3; display: flex; align-items: center; gap: 9px; font-size: 12px; margin-top: 12px; border-bottom: 1px solid #8fa6b6; padding-bottom: 5px; }

/* 08 / A flowing glass tide with a descending diagonal product composition. */
.hero--tidal-form { background: radial-gradient(ellipse at 28% 30%, #fff 4%, #f1faff 45%, #c9e6f9); }
.hero .hero-inner--tidal { min-height: 720px; }
.hero--tidal-form .hero-copy { width: 57%; padding-top: 76px; }
.hero--tidal-form .hero-title { font-size: clamp(52px, 5.9vw, 92px); }
.hero .hero-tidal-waves { position: absolute; z-index: 0; left: -6%; bottom: -55px; width: 112%; height: 110%; filter: drop-shadow(0 16px 8px #5eaace16); animation: hero-tide 14s ease-in-out infinite alternate; }
@keyframes hero-tide { from { transform: translate3d(-7px, 4px, 0) scaleY(.99); } to { transform: translate3d(8px, -5px, 0) scaleY(1.01); } }
.hero .hero-scene--tidal { position: absolute; width: 54%; top: 0; bottom: 0; right: 0; }
.hero .hero-vial--tidal-first { width: 37%; left: 1%; top: 3%; --vial-tilt: 10deg; }
.hero .hero-vial--tidal-second { width: 34%; left: 34%; top: 25%; --vial-tilt: -10deg; }
.hero .hero-vial--tidal-third { width: 27%; right: 7%; bottom: 7%; --vial-tilt: 11deg; }

/* 09 / An immersive midnight scene with restrained cyan and mint light. */
.hero--afterglow { --hero-ink: #f7fcff; --hero-muted: #9abedc; background: #03111c; }
.hero--afterglow .hero-eyebrow { color: #9ff1df; }
.hero--afterglow .hero-inner--split { grid-template-columns: 1.16fr 1fr; gap: 0; }
.hero--afterglow .hero-title { font-size: clamp(51px, 5.7vw, 89px); }
.hero--afterglow .hero-button--primary, .hero--the-flagship .hero-button--primary { background: #a4f4df; border-color: #a4f4df; color: #092d3c; }
.hero--afterglow .hero-button--primary:hover, .hero--the-flagship .hero-button--primary:hover { background: #ccfff1; }
.hero--afterglow .hero-button--secondary, .hero--the-flagship .hero-button--secondary { background: #07172724; }
.hero--afterglow .hero-button--secondary:hover, .hero--the-flagship .hero-button--secondary:hover { background: #ffffff13; }
.hero .hero-aurora { position: absolute; inset: 0; background: radial-gradient(ellipse 15% 66% at 68% 42%, #27c8f399, transparent 80%), radial-gradient(ellipse 19% 58% at 90% 64%, #5bffd868, transparent 75%); filter: blur(19px); }
.hero .hero-reflection-floor { position: absolute; z-index: 0; width: 180%; height: 200px; left: -30%; bottom: -36px; background: radial-gradient(ellipse at 44% 40%, #42cbe76b, transparent 60%), radial-gradient(ellipse at 79% 45%, #62edc850, transparent 43%); transform: perspective(240px) rotateX(44deg); filter: blur(9px); }
.hero .hero-vial--afterglow-first { width: 64%; left: -4%; bottom: 20px; }
.hero .hero-vial--afterglow-second { width: 46%; right: -3%; bottom: 42px; }
.hero--afterglow .hero-vial { filter: drop-shadow(0 0 12px #59dfff42) drop-shadow(0 22px 16px #001c2733); }

/* 10 / A contained, dark flagship stage set within a white page. */
.hero--the-flagship { --hero-ink: #fff; --hero-muted: #a7c4da; background: #fff; padding: 0 16px 24px; }
.hero .hero-flagship-frame { position: relative; overflow: hidden; border-radius: 24px; background: radial-gradient(ellipse at 89% 17%, #185465 0, transparent 47%), linear-gradient(120deg, #03151e, #062832 75%, #073e47); }
.hero--the-flagship .hero-inner { min-height: 640px; }
.hero--the-flagship .hero-inner--split { grid-template-columns: 1.3fr .85fr; gap: 4px; }
.hero--the-flagship .hero-title { font-size: clamp(53px, 6.5vw, 103px); }
.hero--the-flagship .hero-eyebrow { color: #a1e7db; }
.hero .hero-flagship-beam { position: absolute; z-index: 0; inset: -100px -70px -80px 40%; background: linear-gradient(130deg, transparent 32%, #72dacc0b 38%, #98ffee38 42%, transparent 50%, #b5fff22a 61%, transparent 70%); filter: blur(15px); }
.hero .hero-scene--flagship { min-height: 490px !important; }
.hero .hero-vial--flagship { width: 350px; max-width: 98%; bottom: 70px; left: 50%; transform: translateX(-50%); }
.hero .hero-podium--glass { position: absolute; bottom: 6px; left: -4%; width: 111%; height: 93px; background: linear-gradient(90deg, #54e8d67d, #f5ffffbf 5%, #1e8d896c 15%, #aeffefc9 28%, #105b63d9 44%, #95fff5d6 68%, #186366ba 84%, #9efff4ad 98%); border: 1px solid #acfff0; border-radius: 50% 50% 38% 38% / 28% 28% 25% 25%; box-shadow: 0 5px 6px #042e32, 0 20px 30px #80ffea50; }
.hero .hero-podium--glass::before { content: ''; position: absolute; width: 100%; height: 52%; left: 0; top: -7px; border-radius: 50%; background: radial-gradient(ellipse, #b1fff278, #34bfba64 68%, #d4fff7 99%); border: 2px solid #bdfff5; box-shadow: 0 0 15px #a6fff666; }
.hero--the-flagship .hero-vial { filter: drop-shadow(0 0 13px #a9fff638) drop-shadow(0 20px 15px #012f34); }

/* A composed entrance, followed by low-amplitude ambient movement. */
.hero .hero-copy > * { animation: hero-copy-arrive 780ms cubic-bezier(.22, 1, .36, 1) both; }
.hero .hero-copy .hero-eyebrow { animation-delay: 60ms; }
.hero .hero-copy .hero-title { animation-delay: 140ms; }
.hero .hero-copy .hero-subline { animation-delay: 230ms; }
.hero .hero-copy .hero-actions { animation-delay: 310ms; }
.hero .hero-vial-holder { animation: hero-product-arrive 1100ms ease-out 180ms both; }
.hero .hero-vial-holder:nth-of-type(2n) { animation-delay: 280ms; }
.hero .hero-vial-holder:nth-of-type(3n) { animation-delay: 390ms; }
.hero .hero-glass-sheen { animation: hero-glass-light 13s ease-in-out infinite; }
.hero .hero-cloudscape { translate: calc(var(--pointer-x, 0) * -5px) calc(var(--pointer-y, 0) * -3px); transition: translate 700ms ease-out; }
.hero .hero-editorial-light { opacity: .7; animation: hero-daylight 19s ease-in-out infinite alternate; }
.hero .hero-flagship-beam { animation: hero-daylight 17s ease-in-out infinite alternate; }
.hero .hero-product-tile::after { content: ''; position: absolute; z-index: 1; inset: -25% -70%; pointer-events: none; background: linear-gradient(112deg, transparent 42%, #ffffff35 48%, #ffffff52 49%, transparent 56%); transform: translateX(-26%); opacity: 0; transition: transform 900ms cubic-bezier(.22, 1, .36, 1), opacity 350ms ease; }
.hero .hero-product-tile:hover::after { transform: translateX(26%); opacity: 1; }
.hero .hero-button--primary svg { transition: translate 240ms ease; }
.hero .hero-button--primary:hover svg { translate: 3px 0; }
@keyframes hero-copy-arrive { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes hero-product-arrive { from { opacity: 0; } to { opacity: 1; } }
@keyframes hero-glass-light { 0%, 100% { opacity: .35; } 45% { opacity: .85; } }
@keyframes hero-daylight { from { opacity: .5; } to { opacity: .82; } }

@media (min-width: 1680px) {
  .hero .hero-vial--mint { width: 340px; }
  .hero .hero-scene--mint { height: 520px; }
  .hero .hero-mint-main { min-height: 530px; }
}
@media (max-width: 1100px) and (min-width: 701px) {
  .hero { --hero-pad: 32px; }
  .hero .hero-inner { min-height: 610px; padding-top: 42px; }
  .hero .hero-title { font-size: clamp(43px, 5.5vw, 65px); }
  .hero .hero-subline { font-size: 19px; }
  .hero .hero-button { padding: 13px 19px; min-height: 48px; font-size: 12px; gap: 12px; }
  .hero .hero-actions { gap: 9px; }
  .hero .hero-vial--orbit-left { left: 4.5%; width: 21%; bottom: 10%; }
  .hero .hero-vial--orbit-top { right: 5%; width: 17%; top: 7%; }
  .hero .hero-vial--orbit-bottom { right: 5%; width: 15.5%; bottom: 7%; }
  .hero--signature-sky .hero-copy { padding-top: 30px; width: 57%; }
  .hero .hero-scene--cloud { margin-right: -10px; }
  .hero .hero-vial--cloud-left, .hero .hero-vial--cloud-center, .hero .hero-vial--cloud-right { bottom: 145px; }
  .hero .hero-podium--cloud { bottom: 58px; height: 106px; }
  .hero .hero-vial--editorial { width: 285px; left: 12%; max-width: 81%; bottom: 40px; }
  .hero .hero-editorial-caption { left: 13%; font-size: 9px; }
  .hero--clear-by-design .hero-inner--split { gap: 25px; }
  .hero .hero-scene--glass { min-height: 500px !important; border-radius: 30px; }
  .hero .hero-glass-annotation { bottom: 5%; right: 6%; }
  .hero .hero-inner--collection { grid-template-columns: 1fr 2fr; gap: 22px; }
  .hero .hero-collection-tiles { gap: 8px; }
  .hero .hero-collection-tiles .hero-product-tile { min-height: 540px; padding-bottom: 42px; border-radius: 17px; }
  .hero .hero-collection-tiles .hero-tile-vial { width: 119%; top: 44%; }
  .hero .hero-collection-tiles .hero-tile-link { font-size: 10px; gap: 3px; }
  .hero .hero-tile-index { left: 13px; }
  .hero .hero-inner--tidal { min-height: 650px; }
  .hero--tidal-form .hero-copy { width: 60%; padding-top: 70px; }
  .hero .hero-vial--tidal-first { top: 5%; left: 4%; width: 36%; }
  .hero .hero-vial--tidal-second { top: 28%; left: 38%; width: 33%; }
  .hero .hero-vial--tidal-third { bottom: 7%; right: 8%; width: 29%; }
  .hero--afterglow .hero-inner--split { grid-template-columns: 1.22fr 1fr; }
  .hero .hero-vial--afterglow-first { width: 65%; left: -3%; bottom: 55px; }
  .hero .hero-vial--afterglow-second { width: 45%; right: -1%; bottom: 75px; }
  .hero .hero-vial--flagship { width: 280px; bottom: 58px; max-width: 98%; }
  .hero .hero-podium--glass { bottom: 22px; width: 126%; left: -12%; }
}

@media (max-width: 700px) {
  .hero { --hero-pad: 23px; }
  .hero .hero-inner { min-height: auto; padding: 39px var(--hero-pad) 32px; }
  .hero .hero-title { font-size: clamp(42px, 10.7vw, 70px); letter-spacing: -.06em; line-height: 1.055; }
  .hero .hero-eyebrow { font-size: 9px; letter-spacing: .25em; margin-bottom: 16px; }
  .hero .hero-subline { font-size: 17px; margin-top: 21px; max-width: 440px; }
  .hero .hero-actions { margin-top: 25px; gap: 10px; }
  .hero .hero-button { min-height: 47px; padding: 13px 19px; font-size: 12px; gap: 12px; }
  .hero .hero-button svg { width: 16px; height: 16px; }
  .hero .hero-inner--split { display: flex; flex-direction: column; align-items: stretch; gap: 18px; }
  .hero .hero-inner--split .hero-scene { min-height: 330px; width: 100%; }
  .hero .hero-copy { width: 100%; }
  .hero .hero-vial { filter: drop-shadow(0 13px 10px #4169871a); }
  .hero .hero-inner--orbit { display: flex; flex-direction: column; padding-top: 20px; padding-bottom: 30px; }
  .hero--signature-sky .hero-copy { width: 100%; padding: 0; max-width: none; text-align: center; }
  .hero--signature-sky .hero-title { font-size: clamp(41px, 10.5vw, 66px); }
  .hero--signature-sky .hero-subline { max-width: 320px; }
  .hero .hero-scene--orbit { position: relative; order: -1; flex: none; height: clamp(205px, 57vw, 224px); width: 100%; inset: auto; margin: 0 0 25px; }
  .hero .hero-vial--orbit-left { width: 39%; left: 3%; bottom: 0; --vial-tilt: -8deg; }
  .hero .hero-vial--orbit-top { width: 33%; right: 28%; top: 0; --vial-tilt: 5deg; }
  .hero .hero-vial--orbit-bottom { width: 32%; bottom: 3%; right: 0; --vial-tilt: 8deg; }
  .hero--signature-sky .hero-orbit-ground i { width: 30%; left: 9%; bottom: -1%; height: 17px; }
  .hero--signature-sky .hero-orbit-ground i:nth-child(2) { width: 23%; left: auto; right: 2%; bottom: 1%; }
  .hero--signature-sky .hero-signature-atmosphere i { width: 60%; filter: blur(22px); }
  .hero .hero-mint-main { display: flex; flex-direction: column; min-height: auto; }
  .hero--mint-laboratory .hero-copy { padding-top: 0; padding-bottom: 12px; }
  .hero--mint-laboratory .hero-title { font-size: clamp(42px, 10.6vw, 64px); }
  .hero .hero-scene--mint { width: 100%; height: 322px; }
  .hero .hero-vial--mint { width: 226px; max-width: 59%; left: 50%; top: -18px; transform: translateX(-50%) rotate(8deg); }
  .hero .hero-vial-shadow { width: 42%; left: 30%; bottom: 9px; }
  .hero .hero-mini-collection { gap: 10px; }
  .hero .hero-mini-collection .hero-product-tile { min-height: 165px; align-items: flex-end; padding: 15px 10px; border-radius: 15px; }
  .hero .hero-mini-collection .hero-tile-vial { width: 85px; left: 50%; top: -5px; bottom: auto; transform: translateX(-50%); }
  .hero .hero-mini-collection .hero-tile-caption { width: 100%; justify-content: center; font-size: 16px; gap: 13px; }
  .hero .hero-mini-collection .hero-tile-arrow { width: 24px; height: 24px; }
  .hero--cloud-collection .hero-inner { padding-bottom: 5px; }
  .hero--cloud-collection .hero-eyebrow { margin-bottom: 16px; }
  .hero--cloud-collection .hero-copy { padding-bottom: 0; }
  .hero--cloud-collection .hero-title { font-size: clamp(42px, 10.5vw, 65px); }
  .hero .hero-scene--cloud { margin: 0; height: 330px; }
  .hero .hero-vial--cloud-left { bottom: 73px; left: 0; width: 35%; }
  .hero .hero-vial--cloud-center { bottom: 72px; left: 29%; width: 41%; }
  .hero .hero-vial--cloud-right { bottom: 73px; right: 0; width: 35%; }
  .hero .hero-podium--cloud { bottom: 17px; width: 114%; left: -7%; height: 80px; }
  .hero .hero-inner--spectrum { padding: 35px 16px 20px; }
  .hero--spectrum-library .hero-copy { margin-bottom: 28px; padding: 0 7px; }
  .hero--spectrum-library .hero-title { font-size: clamp(43px, 11.5vw, 69px); }
  .hero--spectrum-library .hero-subline { max-width: 325px; }
  .hero .hero-spectrum-tiles { gap: 8px; }
  .hero .hero-spectrum-tiles .hero-product-tile { min-height: 214px; border-radius: 16px; }
  .hero .hero-spectrum-tiles .hero-tile-vial { width: 143px; max-width: 131%; top: 7px; }
  .hero .hero-spectrum-tiles .hero-tile-caption { margin-top: 175px; font-size: clamp(13px, 3.1vw, 18px); gap: 7px; }
  .hero .hero-spectrum-tiles .hero-tile-arrow { width: 21px; height: 21px; }
  .hero .hero-spectrum-tiles .hero-tile-arrow svg { width: 13px; height: 13px; }
  .hero--research-edit .hero-inner { padding-bottom: 0; }
  .hero--research-edit .hero-title { font-size: clamp(48px, 12vw, 72px); }
  .hero--research-edit .hero-subline { max-width: 320px; }
  .hero .hero-scene--editorial { margin: 0; height: 395px; }
  .hero .hero-vial--editorial { width: 247px; max-width: 75%; left: 50%; bottom: 36px; transform: translateX(-50%); }
  .hero .hero-stone-plinth { bottom: -61px; height: 134px; width: 140%; left: -10%; }
  .hero .hero-editorial-caption { bottom: 14px; left: 20%; font-size: 8px; }
  .hero--clear-by-design .hero-inner { gap: 32px; }
  .hero--clear-by-design .hero-title { font-size: clamp(44px, 11.3vw, 67px); }
  .hero .hero-scene--glass { min-height: 410px !important; height: 410px; border-radius: 32px; }
  .hero .hero-vial--glass { width: 245px; max-width: 83%; top: 46%; }
  .hero .hero-glass-annotation { right: 7%; bottom: 7%; font-size: 10px; }
  .hero .hero-glass-annotation strong { font-size: 14px; }
  .hero .hero-inner--collection { display: flex; flex-direction: column; gap: 20px; padding-left: 16px; padding-right: 16px; }
  .hero--collection-no-01 .hero-copy { padding: 0 7px; }
  .hero--collection-no-01 .hero-title { font-size: clamp(43px, 10.6vw, 67px); }
  .hero--collection-no-01 .hero-actions { flex-direction: row; align-items: center; gap: 17px; }
  .hero--collection-no-01 .hero-subline { margin-top: 20px; font-size: 17px; max-width: 320px; }
  .hero .hero-collection-tiles { width: 100%; gap: 8px; }
  .hero .hero-collection-tiles .hero-product-tile { min-height: 290px; padding-bottom: 22px; border-radius: 16px; }
  .hero .hero-tile-index { top: 15px; left: 12px; font-size: 10px; }
  .hero .hero-collection-tiles .hero-tile-vial { width: 128%; max-width: 180px; top: 44%; }
  .hero .hero-collection-tiles .hero-tile-caption { font-size: clamp(15px, 3.7vw, 21px); }
  .hero .hero-collection-tiles .hero-tile-link { margin-top: 7px; font-size: 8px; gap: 4px; }
  .hero .hero-collection-tiles .hero-tile-link svg { width: 12px; height: 12px; }
  .hero .hero-inner--tidal { min-height: auto; padding-bottom: 0; }
  .hero--tidal-form .hero-copy { width: 100%; padding-top: 0; }
  .hero--tidal-form .hero-title { font-size: clamp(45px, 11.3vw, 68px); }
  .hero .hero-scene--tidal { position: relative; width: 100%; height: 360px; right: auto; margin-top: 4px; }
  .hero .hero-vial--tidal-first { width: 39%; left: 2%; top: 1%; --vial-tilt: 9deg; }
  .hero .hero-vial--tidal-second { width: 36%; left: 36%; top: 20%; --vial-tilt: -9deg; }
  .hero .hero-vial--tidal-third { width: 30%; bottom: 4%; right: 0; --vial-tilt: 9deg; }
  .hero .hero-tidal-waves { height: 58%; bottom: -15px; left: -50%; width: 165%; }
  .hero--afterglow .hero-title { font-size: clamp(45px, 11.3vw, 68px); }
  .hero .hero-scene--afterglow { height: 355px; }
  .hero .hero-vial--afterglow-first { width: 56%; max-width: 240px; left: 3%; bottom: -4px; }
  .hero .hero-vial--afterglow-second { width: 42%; max-width: 190px; right: 0; bottom: 13px; }
  .hero .hero-aurora { background: radial-gradient(ellipse 40% 37% at 45% 76%, #27c8f399, transparent 80%), radial-gradient(ellipse 32% 29% at 90% 78%, #5bffd868, transparent 75%); }
  .hero--afterglow .hero-inner { padding-bottom: 15px; }
  .hero--the-flagship { padding: 0 10px 20px; }
  .hero .hero-flagship-frame { border-radius: 20px; }
  .hero--the-flagship .hero-inner { min-height: auto; padding: 35px 20px 25px; }
  .hero--the-flagship .hero-title { font-size: clamp(43px, 11.4vw, 68px); }
  .hero .hero-scene--flagship { height: 375px; min-height: 375px !important; }
  .hero .hero-vial--flagship { width: 245px; max-width: 78%; bottom: 38px; }
  .hero .hero-podium--glass { bottom: 5px; height: 65px; width: 88%; left: 6%; }
}

@media (max-width: 380px) {
  .hero .hero-button { padding-left: 16px; padding-right: 16px; font-size: 11px; gap: 7px; }
  .hero .hero-actions { gap: 8px; }
  .hero .hero-title { font-size: 39px; }
  .hero .hero-collection-tiles .hero-tile-link { font-size: 7px; }
  .hero .hero-collection-tiles .hero-tile-link svg { width: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero .hero-vial, .hero .hero-tidal-waves, .hero .hero-vial-holder, .hero .hero-copy > *, .hero .hero-signature-atmosphere i, .hero .hero-orbit-ground i, .hero .hero-editorial-light, .hero .hero-flagship-beam, .hero .hero-glass-sheen { animation: none; will-change: auto; }
  .hero .hero-copy > *, .hero .hero-vial-holder { opacity: 1; }
  .hero .hero-button, .hero .hero-product-tile, .hero .hero-product-tile::after, .hero .hero-cloudscape { transition: none; }
  .hero .hero-cloudscape { translate: none; }
}