.hero {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  color: var(--white);
  overflow: hidden;
  background: #111 url("../assets/images/banner-perfume.jpg") center / cover;
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.7s ease, visibility 0.7s ease;
  display: grid;
  place-items: end start;
  padding: 0 8vw 14vh;
  z-index: 0;
  pointer-events: none;
}

.hero-slide.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 1;
  pointer-events: auto;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.12);
  transition: transform 7s ease;
}

.hero-slide.is-active .hero-bg img {
  transform: scale(1);
}

.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.22) 0%, rgba(0, 0, 0, 0.42) 48%, rgba(0, 0, 0, 0.7) 100%),
    radial-gradient(ellipse at 8% 92%, rgba(122, 203, 214, 0.42) 0%, transparent 46%),
    radial-gradient(ellipse at 92% 18%, rgba(244, 177, 154, 0.28) 0%, transparent 42%);
}

.hero-eyebrow {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  font-weight: 600;
}

.hero-copy .title {
  max-width: 720px;
  margin: 16px 0 12px;
}

.hero-copy p {
  max-width: 420px;
  margin-bottom: 24px;
  color: rgba(255, 255, 255, 0.82);
}

.hero-copy .btn-cart {
  width: auto;
}

.hero-copy {
  position: relative;
  z-index: 2;
}

.hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(4px);
  display: grid;
  place-items: center;
  color: var(--white);
  transition: background var(--ease);
}

.hero-arrow:hover {
  background: rgba(255, 255, 255, 0.4);
}

.hero-arrow svg {
  width: 24px;
  height: 24px;
}

.hero-prev { left: 24px; }
.hero-next { right: 24px; }

.hero-nav {
  position: absolute;
  left: 8vw;
  bottom: 7vh;
  z-index: 2;
  display: flex;
  gap: 8px;
  align-items: center;
}

.hero-nav button {
  width: 28px;
  height: 3px;
  background: rgba(255, 255, 255, 0.35);
  border-radius: 2px;
}

.hero-nav button.is-active {
  width: 56px;
  background: var(--white);
}

.brand-statement {
  position: relative;
  isolation: isolate;
  min-height: 78vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 120px 24px;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 28%, rgba(122, 203, 214, 0.45) 0 18%, transparent 42%),
    radial-gradient(circle at 82% 24%, rgba(244, 177, 154, 0.38) 0 16%, transparent 40%),
    radial-gradient(circle at 30% 82%, rgba(135, 202, 164, 0.36) 0 14%, transparent 38%),
    radial-gradient(circle at 72% 78%, rgba(190, 222, 189, 0.4) 0 12%, transparent 34%),
    linear-gradient(180deg, #f7fbfa 0%, #ffffff 100%);
}

.brand-statement .motif {
  z-index: 0;
}

.molecule {
  position: absolute;
  left: 50%;
  top: 48%;
  z-index: 1;
  width: min(58vw, 560px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
  will-change: transform;
}

.molecule-core {
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  overflow: hidden;
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.78) 0 8%, transparent 22%),
    conic-gradient(
      from 18deg,
      #7acbd6 0deg,
      #bbe0d7 55deg,
      #87caa4 110deg,
      #bedebd 160deg,
      #f5d4c4 215deg,
      #f4b19a 270deg,
      #7acbd6 360deg
    );
  box-shadow:
    inset 18px 14px 36px rgba(255, 255, 255, 0.38),
    inset -22px -28px 48px rgba(122, 203, 214, 0.28),
    0 28px 70px rgba(122, 203, 214, 0.28);
}

.molecule-swirl {
  position: absolute;
  inset: -20%;
  background: conic-gradient(
    from 40deg,
    rgba(122, 203, 214, 0),
    rgba(122, 203, 214, 0.85),
    rgba(245, 212, 196, 0.35),
    rgba(244, 177, 154, 0.85),
    rgba(190, 222, 189, 0.4),
    rgba(135, 202, 164, 0.85),
    rgba(187, 224, 215, 0.35),
    rgba(122, 203, 214, 0)
  );
  mix-blend-mode: soft-light;
  filter: blur(14px);
  animation: molecule-spin 16s linear infinite;
}

.molecule-orbit {
  position: absolute;
  border-radius: 50%;
  overflow: hidden;
  animation: molecule-float 7s ease-in-out infinite;
}

.molecule-orbit .molecule-swirl {
  animation-duration: 11s;
}

.molecule-orbit.a {
  width: 22%;
  aspect-ratio: 1;
  left: 4%;
  top: 18%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.8) 0 12%, transparent 28%),
    conic-gradient(from 90deg, #7acbd6, #bbe0d7, #87caa4, #f5d4c4, #7acbd6);
  box-shadow: 0 12px 28px rgba(122, 203, 214, 0.35);
}

.molecule-orbit.b {
  width: 16%;
  aspect-ratio: 1;
  right: 8%;
  bottom: 16%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.75) 0 12%, transparent 28%),
    conic-gradient(from 210deg, #f4b19a, #f5d4c4, #7acbd6, #bedebd, #f4b19a);
  box-shadow: 0 12px 28px rgba(244, 177, 154, 0.32);
  animation-delay: -2.4s;
}

.molecule-orbit.b .molecule-swirl {
  animation-duration: 13s;
  animation-direction: reverse;
}

.molecule-sheen {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.7) 0 8%, transparent 22%),
    radial-gradient(circle at 78% 78%, rgba(255, 255, 255, 0.12) 0 12%, transparent 32%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.42);
}

.molecule-highlight {
  position: absolute;
  width: 28%;
  height: 18%;
  left: 22%;
  top: 16%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.72);
  filter: blur(6px);
  animation: molecule-gleam 4.5s ease-in-out infinite;
}

.brand-statement-copy {
  position: relative;
  z-index: 2;
  max-width: 1100px;
  padding: 0 16px;
  color: var(--black);
}

.statement-logo {
  display: block;
  width: min(188px, 48vw);
  height: auto;
  margin: 0 auto 22px;
}

.brand-statement .title {
  max-width: 1100px;
  font-size: clamp(36px, 6.2vw, 76px);
  line-height: 1.08;
  color: var(--black);
}

@keyframes molecule-spin {
  to { transform: rotate(360deg); }
}

@keyframes molecule-gleam {
  0%, 100% { opacity: 0.55; transform: translate(0, 0) scale(1); }
  50% { opacity: 0.9; transform: translate(8px, 4px) scale(1.08); }
}

@keyframes molecule-float {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(10px, -14px); }
}

.vowels {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

.vowel-card {
  position: relative;
  min-height: 420px;
  border-radius: 160px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 28px 12px;
  color: var(--black);
}

.vowel-card span {
  font-weight: 600;
  letter-spacing: 0.18em;
}

.vowel-card.vowel-a {
  background:
    radial-gradient(circle at 32% 22%, rgba(255, 255, 255, 0.45) 0 18%, transparent 42%),
    radial-gradient(circle at 78% 78%, #f4b19a 0 26%, transparent 58%),
    linear-gradient(165deg, #f5d4c4, #f4b19a);
}
.vowel-card.vowel-i {
  background:
    radial-gradient(circle at 28% 24%, rgba(255, 255, 255, 0.5) 0 16%, transparent 40%),
    radial-gradient(circle at 80% 76%, #87caa4 0 24%, transparent 56%),
    linear-gradient(165deg, #bbe0d7, #87caa4);
}
.vowel-card.vowel-u {
  background:
    radial-gradient(circle at 70% 28%, #7acbd6 0 12%, transparent 32%),
    linear-gradient(180deg, #2a2a2a, #111);
  color: #fff;
}
.vowel-card.vowel-e {
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.4) 0 16%, transparent 40%),
    radial-gradient(circle at 76% 80%, #f5d4c4 0 22%, transparent 54%),
    linear-gradient(165deg, #f4b19a, #e89a80);
}
.vowel-card.vowel-o {
  background:
    radial-gradient(circle at 50% 42%, transparent 0 22%, rgba(255, 255, 255, 0.28) 23% 34%, transparent 35%),
    radial-gradient(circle at 78% 78%, #bbe0d7 0 20%, transparent 50%),
    linear-gradient(165deg, #7acbd6, #5eb8c6);
}

.lookbook-section {
  background:
    radial-gradient(ellipse 52% 70% at 6% 28%, rgba(122, 203, 214, 0.18), transparent 58%),
    radial-gradient(ellipse 46% 58% at 98% 82%, rgba(245, 212, 196, 0.16), transparent 56%),
    linear-gradient(180deg, #ffffff 0%, #f7fbfb 46%, #ffffff 100%);
}

.campaign {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

.campaign-copy .look-tag {
  margin-bottom: 14px;
}

.campaign-copy .title {
  margin-bottom: 12px;
}

.campaign-copy > .small {
  max-width: 460px;
  margin-bottom: 20px;
}

.campaign-slider {
  position: relative;
}

.campaign-window {
  overflow: hidden;
}

.campaign-track {
  display: flex;
  gap: 16px;
  transition: transform 0.45s ease;
}

.camp-card {
  flex: 0 0 calc((100% - 32px) / 3);
  min-width: 0;
  text-align: center;
}

.camp-media {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 4;
  border-radius: 24px;
  overflow: hidden;
  background: var(--product-stage);
  margin-bottom: 12px;
}

.camp-card .product-name,
.camp-card .price {
  display: block;
  font-size: 13px;
}

.camp-card .btn-cart {
  margin-top: 12px;
}

.camp-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  display: grid;
  place-items: center;
  transition: background var(--ease);
}

.camp-arrow:hover {
  background: var(--blue);
}

.camp-arrow svg {
  width: 20px;
  height: 20px;
}

.camp-arrow-prev { left: -16px; }
.camp-arrow-next { right: -16px; }

.campaign-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 22px;
}

.camp-pips {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.camp-pips button {
  width: 8px;
  height: 8px;
  border: 0;
  border-radius: 50%;
  background: #d0ccc6;
}

.camp-pips button.is-on {
  width: 56px;
  height: 6px;
  border-radius: 99px;
  background: var(--black);
}

.campaign-visual {
  position: relative;
  min-height: 560px;
  border-radius: 20px;
  overflow: hidden;
  background: #ece8e2;
}

.campaign-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}

.lookbook {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 24px;
  align-items: stretch;
}

.lookbook-visual {
  position: relative;
  min-height: 560px;
  border-radius: 20px;
  overflow: hidden;
  background: #ece8e2;
}

.lookbook-visual > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}

.lookbook-caption {
  position: absolute;
  left: 18px;
  bottom: 18px;
  z-index: 2;
  width: min(300px, calc(100% - 36px));
  background: var(--white);
  padding: 18px 18px 16px;
  border-radius: 16px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
}

.look-tag {
  display: inline-block;
  padding: 0;
  background: none;
  color: var(--blue);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.lookbook-caption .title {
  margin: 10px 0 8px;
}

.lookbook-caption .btn-cart {
  width: auto;
  margin-top: 14px;
}

.lookbook-panel {
  background: #f3f1ee;
  border-radius: 20px;
  padding: 36px 28px;
  display: flex;
  flex-direction: column;
}

.lookbook-panel > .title,
.lookbook-panel > .small {
  text-align: center;
}

.lookbook-panel > .small {
  margin: 8px 0 28px;
}

.look-item {
  display: grid;
  grid-template-columns: 92px 1fr auto;
  grid-template-areas:
    "thumb info wish"
    "thumb info cart";
  gap: 8px 14px;
  align-items: center;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 8px 22px rgba(65, 65, 65, 0.08);
  padding: 12px;
  margin-bottom: 12px;
  transition: border-color var(--ease), box-shadow var(--ease);
}

.look-item:last-child {
  margin-bottom: 0;
}

.look-item.is-on,
.look-item:hover {
  border-color: var(--blue);
  box-shadow: 0 12px 28px rgba(65, 65, 65, 0.12);
}

.look-thumb {
  grid-area: thumb;
  width: 92px;
  height: 92px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--product-stage);
  display: grid;
  place-items: center;
}

.look-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.look-thumb.store {
  background: #f6f4f1;
  display: grid;
  place-items: center;
  padding: 8px;
}

.look-thumb.store img {
  width: 86%;
  height: 86%;
  object-fit: contain;
}

.look-info {
  grid-area: info;
}

.look-stars,
.look-meta {
  color: #c8c4be;
  letter-spacing: 0.12em;
  font-size: 11px;
  line-height: 1;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.look-wish {
  grid-area: wish;
  justify-self: end;
  align-self: start;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
}

.look-wish svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--charcoal);
  stroke-width: 1.4;
}

.look-wish.is-on svg {
  fill: var(--peach);
  stroke: var(--peach);
}

.look-item .btn-cart {
  grid-area: cart;
  width: auto;
  min-height: 36px;
  padding: 0 14px;
  font-size: 10px;
  margin-top: 0;
}

.look-item .btn-cart svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.location-media {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  overflow: hidden;
  background: #d7ece7 url("../assets/images/banner-dropper.jpg") center / cover;
}

.location-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(122, 203, 214, 0.35) 0 18%, transparent 44%);
  pointer-events: none;
}

.location-media.loc-2 {
  background: #eadfd6 url("../assets/images/banner-bottles.jpg") center / cover;
}

.location-media.loc-2::after {
  background: radial-gradient(circle at 18% 82%, rgba(244, 177, 154, 0.4) 0 18%, transparent 44%);
}

.about-visual {
  position: relative;
  min-height: 460px;
  border-radius: 20px;
  overflow: hidden;
  background: #f6f4f1 url("../assets/images/banner-dropper.jpg") center / cover;
}

.about-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 78%, rgba(122, 203, 214, 0.45) 0 16%, transparent 40%),
    radial-gradient(circle at 88% 18%, rgba(244, 177, 154, 0.38) 0 14%, transparent 36%);
  pointer-events: none;
}

.news-thumb {
  aspect-ratio: 16 / 10;
  border-radius: 16px;
  overflow: hidden;
  background: #ece8e2;
  display: block;
}

.news-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hotspot {
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--white);
  border: 6px solid var(--black);
  top: 42%;
  left: 38%;
}

.articulation-banner {
  background:
    radial-gradient(circle at 18% 28%, rgba(122, 203, 214, 0.45) 0 18%, transparent 42%),
    radial-gradient(circle at 82% 24%, rgba(244, 177, 154, 0.38) 0 16%, transparent 40%),
    radial-gradient(circle at 30% 82%, rgba(135, 202, 164, 0.36) 0 14%, transparent 38%),
    radial-gradient(circle at 72% 78%, rgba(190, 222, 189, 0.4) 0 12%, transparent 34%),
    linear-gradient(180deg, #f7fbfa 0%, #ffffff 100%);
  padding: 88px 24px;
}

.art-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  gap: 40px;
  align-items: center;
}

.art-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 24px;
  display: block;
}

.art-photo-left img {
  aspect-ratio: 3 / 4;
}

.art-photo-right img {
  aspect-ratio: 3 / 4;
}

.art-center {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.art-logo {
  width: 200px;
  margin-bottom: 16px;
}

.art-center .title {
  margin: 8px 0 12px;
  letter-spacing: 0.12em;
}

.art-desc {
  font-size: 13px;
  line-height: 1.7;
  color: rgba(0, 0, 0, 0.6);
  max-width: 380px;
  margin-bottom: 20px;
}

.art-center .btn-cart {
  width: auto;
}

@media (max-width: 860px) {
  .art-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .art-photo { max-width: 360px; margin: 0 auto; }
  .art-photo-left { order: -1; }
  .art-photo-right { order: 1; }
}

.location-card {
  display: grid;
  gap: 12px;
}

.about-teaser {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}

.news-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.news-card .btn-cart {
  width: auto;
  align-self: flex-start;
  margin-top: 4px;
}

.ticker {
  background: linear-gradient(90deg, #bbe0d7 0%, #d8efe9 50%, #bbe0d7 100%);
  color: var(--black);
  overflow: hidden;
  border-top: 0;
}

.ticker-track {
  display: flex;
  gap: 40px;
  width: max-content;
  animation: marquee 32s linear infinite;
  padding: 14px 0;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 12px;
}

@media (max-width: 980px) {
  .lookbook,
  .campaign,
  .about-teaser,
  .news-grid {
    grid-template-columns: 1fr;
  }

  .lookbook-visual,
  .campaign-visual {
    min-height: 440px;
  }

  .vowel-card {
    min-height: 280px;
    border-radius: 24px;
  }

  .hero-slide {
    place-items: center start;
    padding-bottom: 18vh;
  }
}

@media (max-width: 560px) {
  .lookbook-panel {
    padding: 24px 16px;
  }

  .look-item {
    grid-template-columns: 72px 1fr auto;
  }

  .look-thumb {
    width: 72px;
    height: 72px;
  }

  .lookbook-caption {
    left: 12px;
    bottom: 12px;
    padding: 14px;
  }

  .camp-card {
    flex-basis: 100%;
  }
}

@media (max-width: 860px) and (min-width: 561px) {
  .camp-card {
    flex-basis: calc((100% - 16px) / 2);
  }
}

@media (max-width: 640px) {
  .molecule {
    width: min(88vw, 420px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .molecule-swirl,
  .molecule-highlight,
  .molecule-orbit {
    animation: none;
  }
}