/* ============================================
   LUMEA — styles.css  (v2 — matches index.html)
   ============================================ */

/* ---------- Reset & Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --black:       #000000;
  --near-black:  #0a0a0a;
  --white:       #ffffff;
  --pink:        #E84C9A;
  --pink-light:  #EE86C0;
  --purple:      #A865FF;
  --cyan:        #4ADEFF;
  --gray-dim:    rgba(255,255,255,0.55);
  --nav-h1:      72px;
  --nav-h2:      48px;
  --nav-total:   120px;
  --gradient:    linear-gradient(90deg, var(--purple), var(--pink-light), var(--cyan));
  --font-main:   'Plus Jakarta Sans', sans-serif;
  --font-sec:    'Inter', sans-serif;
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
}

html { scroll-behavior: smooth; overflow-x: hidden; }

body {
  background: var(--black);
  color: var(--white);
  font-family: var(--font-main);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}

a  { text-decoration: none; color: inherit; }
ul { list-style: none; }
img { display: block; max-width: 100%; height: auto; }
button { cursor: pointer; background: none; border: none; color: inherit; font-family: inherit; }

.container {
  width: 100%;
  max-width: 1290px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Shared text helpers ---------- */
.text-white  { color: var(--white); }

.text-gradient {
  background: var(--gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-style: italic;
}

.text-gradient-full {
  background: var(--gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ---------- Buttons ---------- */
.btn-shop-now {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 36px;
  background: var(--gradient);
  color: var(--white);
  font-family: var(--font-main);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.04em;
  border-radius: 4px;
  transition: opacity 0.2s, transform 0.2s var(--ease-out);
}
.btn-shop-now:hover { opacity: 0.88; transform: translateY(-2px); }

.btn-discover {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 36px;
  border: 1.5px solid rgba(255,255,255,0.45);
  color: var(--white);
  font-family: var(--font-main);
  font-weight: 700;
  font-size: 15px;
  border-radius: 4px;
  transition: border-color 0.2s, background 0.2s, transform 0.2s var(--ease-out);
}
.btn-discover:hover {
  border-color: var(--pink-light);
  background: rgba(238,134,192,0.07);
  transform: translateY(-2px);
}

.btn-read-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 24px;
  border: 1px solid rgba(255,255,255,0.4);
  color: var(--white);
  font-family: var(--font-main);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  border-radius: 3px;
  transition: border-color 0.2s, background 0.2s;
}
.btn-read-more:hover { border-color: var(--pink-light); background: rgba(238,134,192,0.08); }

/* ============================================
   NAVIGATION
   ============================================ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  transition: background 0.3s, backdrop-filter 0.3s;
}
.nav.scrolled {
  background: rgba(0,0,0,0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* Top utility bar */
.nav__top {
  height: var(--nav-h1);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  display: flex;
  align-items: center;
}

.nav__top-inner {
  width: 100%;
  max-width: 1290px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 0;
  height: 100%;
}

/* Flag */
.nav__flag-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0 8px 0 0;
}
.nav__flag-img {
  width: 20px;
  height: 15px;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 1px 1px 0 rgba(0,0,0,0.1);
}
.nav__flag-wrap svg { flex-shrink: 0; }

/* Logo */
.nav__logo-img-wrap {
  flex-shrink: 0;
  padding: 0 15px;
  width: 160px;
  display: flex;
  align-items: center;
}
.nav__logo-img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

/* Search — centred, capped width */
.nav__search {
  flex: 1;
  display: flex;
  align-items: center;
  max-width: 570px;
  margin: 0 auto;
  background: #ffffff;
  border: 1px solid #bdbdbd;
  border-radius: 50px;
  padding: 0 20px;
  gap: 14px;
  height: 40px;
  min-width: 0;
}
.nav__search-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
.nav__search input {
  background: none;
  border: none;
  outline: none;
  color: #000;
  font-size: 13px;
  width: 100%;
  font-family: Arial, sans-serif;
}
.nav__search input::placeholder { color: #888; }

/* Location */
.nav__location {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  flex-shrink: 0;
  cursor: pointer;
  transition: opacity 0.2s;
  white-space: nowrap;
  height: 100%;
}
.nav__location:hover { opacity: 0.8; }
.nav__loc-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  object-fit: contain;
}
.nav__loc-text { display: flex; flex-direction: column; line-height: 1; }
.nav__loc-label {
  font-family: Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--white);
  letter-spacing: 0.4px;
  line-height: 18.2px;
}
.nav__loc-val {
  font-family: Arial, sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: var(--white);
  letter-spacing: 0.4px;
  line-height: 18.2px;
}

/* Icon buttons */
.nav__icon-btn {
  width: 31.5px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: opacity 0.2s;
}
.nav__icon-btn:hover { opacity: 0.75; }
.nav__icon-btn img { width: 22px; height: 22px; object-fit: contain; }

/* Search icon — mobile only, hidden on desktop */
.nav__icon-btn--search-m { display: none; }

/* Burger button */
.nav__burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 32px;
  padding: 6px 4px;
}
.nav__burger span {
  display: block;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: transform 0.3s, opacity 0.3s;
}
.nav__burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger.open span:nth-child(2) { opacity: 0; }
.nav__burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Category bar */
.nav__cats {
  height: var(--nav-h2);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  display: flex;
  align-items: center;
  overflow-x: auto;
  scrollbar-width: none;
}
.nav__cats::-webkit-scrollbar { display: none; }

.nav__cats-inner {
  width: 100%;
  max-width: 1290px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav__cat {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  height: var(--nav-h2);
  padding: 0 4px;
  font-size: 12.8px;
  font-weight: 700;
  font-family: Arial, sans-serif;
  white-space: nowrap;
  color: rgba(255,255,255,0.9);
  border-bottom: 2px solid transparent;
  letter-spacing: 0.5px;
  transition: color 0.2s, border-color 0.2s;
  cursor: pointer;
}
.nav__cat:hover { color: var(--white); border-color: var(--pink-light); }
.nav__cat--active { color: var(--pink); border-color: var(--pink); }

/* Mobile drawer */
.nav__drawer {
  display: none;
  flex-direction: column;
  background: rgba(8,8,8,0.98);
  border-top: 1px solid rgba(255,255,255,0.07);
  padding: 20px 24px;
  gap: 2px;
}
.nav__drawer.open { display: flex; }
.nav__drawer a {
  padding: 14px 0;
  font-size: 17px;
  font-weight: 700;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.nav__drawer--pink { color: var(--pink) !important; border: none !important; margin-top: 8px; }

/* ============================================
   HERO
   ============================================ */
.hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  padding-top: var(--nav-total);
  padding-bottom: 120px;
  overflow: hidden;
}

/* Full-width background photo */
.hero__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  opacity: 0.72;     /* Figma: opacity 72% on the photo layer */
}

/* Fade to solid black at the bottom — Figma: linear-gradient(180deg, transparent 44.54%, #000 100%) */
.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0) 44.54%,
    rgb(0,0,0) 100%
  );
  z-index: 1;
}

/* Darkening multiply layer — Figma: rgba(0,0,0,0.6) mix-blend-mode: multiply */
.hero__overlay-gradient {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  mix-blend-mode: multiply;
  z-index: 2;
}

/* Content */
.hero__content {
  position: relative;
  z-index: 2;
  padding: 0 24px 0 calc(max((100vw - 1290px) / 2, 0px) + 24px);
  max-width: calc(max((100vw - 1290px) / 2, 0px) + 24px + 720px);
}

.hero__eyebrow {
  font-family: var(--font-sec);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  margin-bottom: 24px;
}

.hero__heading {
  font-family: var(--font-main);
  font-size: clamp(42px, 4.8vw, 60px);
  font-weight: 800;
  line-height: 0.88;          /* Figma: leading-84px at 112px = 0.75, loosen for readability */
  letter-spacing: -1.8px;     /* Figma: tracking -1.8px */
  text-transform: uppercase;
  margin-bottom: 32px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hero__heading-white {
  display: block;
  color: var(--white);
}

.hero__heading-gradient {
  display: block;
  background: var(--gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-style: italic;
}

/* "Style" word: Poltawski Nowy Italic (regular weight italic) per Figma */
.hero__style-word {
  font-family: 'Poltawski Nowy', serif;
  font-style: italic;
  font-weight: 400;
  text-transform: uppercase;
}

.hero__sub {
  font-size: 20px;
  font-weight: 500;
  color: rgba(255,255,255,0.85);
  max-width: 540px;
  margin-bottom: 40px;
  line-height: 1.55;
}

.hero__btns {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.hero__ai-label {
  position: absolute;
  z-index: 3;
  bottom: 40px;
  right: calc(max((100vw - 1290px) / 2, 0px) + 24px);
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 4px;
  padding: 9px 18px;
  font-family: var(--font-sec);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
  backdrop-filter: blur(8px);
}

/* ============================================
   MODELS — 3 floating photos on black
   Figma node 146:2742  (design canvas ≈ 1854 × 984px)
   ============================================ */
.models {
  background: transparent;
  /* overflow intentionally removed — glows from adjacent sections bleed through */
}

/* Relative container that mirrors the Figma canvas */
.models__stage {
  position: relative;
  max-width: 1854px;
  margin: 0 auto;
  height: 940px;        /* Figma: 59px top + 894px image + ~87px bottom */
}

/* Every card: absolute, clipped */
.models__card {
  position: absolute;
  overflow: hidden;
}

/* Left main shot — Figma: left 34px, top 59px, 1048×894 */
.models__card--left {
  left:  1.83%;          /* 34 / 1854 */
  top:   59px;
  width: 56.5%;          /* 1048 / 1854 */
  aspect-ratio: 1048 / 894;
}

/* Top-right hairdryer — Figma: left 1134px, top 118px, 351×457 */
.models__card--top-right {
  left:  61.2%;          /* 1134 / 1854 */
  top:   118px;
  width: 18.9%;          /* 351 / 1854 */
  aspect-ratio: 351 / 457;
}

/* Bottom-right gym model — Figma: left 1422px, top 312px, 398×613 */
.models__card--bottom-right {
  left:  76.7%;          /* 1422 / 1854 */
  top:   312px;
  width: 21.5%;          /* 398 / 1854 */
  aspect-ratio: 398 / 613;
}

/* All images: absolutely positioned inside their clipped card.
   Explicit widths set the render scale; offsets match Figma proportionally. */
.models__img {
  position: absolute;
  display: block;
  max-width: none;       /* never constrain by container width */
  transition: transform 0.55s var(--ease-out);
}

/* Left: 2752×1536 panoramic — Figma: w=152.97%, h=100%, left=0, top=0
   Renders wider than card; overflow clips to show the model on the left */
.models__img--left {
  width: 152.97%;
  height: 100%;
  left: 0;
  top: 0;
}

/* Hairdryer: 933×1536 portrait — Figma: w=265.81%, left=-10.83%, top=-48.58%
   Renders larger than card; crops to the hairdryer close-up area */
.models__card--top-right .models__img {
  width: 265.81%;
  height: auto;
  left: -10.83%;
  top: -48.58%;
}

/* Gym woman: 2752×1536 panoramic — Figma: w=276.31%, h=100%, left=-92.37%
   Shifts left so only the right-portion (gym woman) is visible */
.models__card--bottom-right .models__img {
  width: 276.31%;
  height: 100%;
  left: -92.37%;
  top: 0;
}

.models__card:hover .models__img { transform: scale(1.03); }

/* ============================================
   FEATURES — "Designed for Your Hair"
   ============================================ */
.features {
  padding: 68px 0 80px;
  background: transparent; /* body provides black base; transparent allows glows to bleed across section boundaries */
  position: relative;
}

/* Background glows */
.features__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(64px);
  pointer-events: none;
  opacity: 0.34; /* was 0.67 — reduced 50% so glows stay behind content visually */
  z-index: 0;
}
.features__glow--tl {
  width: 600px; height: 600px;
  top: -463px; left: -160px; /* original position — stays above heading area */
  background: rgba(152,16,250,0.2);
  z-index: -1; /* behind all content including the heading */
}
.features__glow--br {
  width: 600px; height: 600px;
  top: 713px; right: -160px;
  background: rgba(152,16,250,0.2);
  z-index: -1;
}
.features__glow--ml {
  width: 400px; height: 400px;
  top: 487px; left: -69px;
  background: linear-gradient(135deg, rgba(255,111,181,0.2) 0%, transparent 100%);
  border-radius: 50%;
  z-index: -1;
}

/* Centred intro block */
.features__intro {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 17px;
  margin-bottom: 64px;
}

.features__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-weight: 800;
  letter-spacing: -0.023em;
  text-transform: uppercase;
  line-height: 1.06;
}
.features__title-white {
  font-family: var(--font-main);
  font-size: clamp(48px, 6.5vw, 79px);
  color: var(--white);
  display: block;
}
.features__title-gradient {
  font-family: var(--font-main);
  font-size: clamp(46px, 6.4vw, 78px);
  font-style: italic;
  display: block;
  background: linear-gradient(90deg,
    rgb(168,101,255) 0%, rgb(255,111,181) 50%, rgb(74,222,255) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.features__title-underline {
  text-decoration: underline;
  text-decoration-style: solid;
  text-underline-offset: 4px;
  font-style: italic;
}

.features__sub {
  font-family: var(--font-main);
  font-size: 24px;
  font-weight: 500;
  color: var(--white);
  max-width: 543px;
  line-height: 1.625;
  text-align: center;
}

.features__btn-shop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 150px;
  min-height: 55px;
  padding: 10px 16px;
  background: var(--white);
  color: #333;
  font-family: var(--font-main);
  font-weight: 800;
  font-size: 18px;
  border: 2px solid #333;
  border-radius: 4px;
  transition: background 0.2s, transform 0.2s var(--ease-out);
}
.features__btn-shop:hover {
  background: rgba(255,255,255,0.9);
  transform: translateY(-2px);
}

/* Key Product Features heading */
.features__body { position: relative; }

.features__kpf {
  text-align: center;
  margin-bottom: 48px;
}
.features__kpf-title {
  font-family: var(--font-sec);
  font-size: 22px;
  font-weight: 900;
  font-style: italic;
  color: var(--white);
  margin-bottom: 10px;
}
.features__kpf-sub {
  font-family: var(--font-main);
  font-size: 24px;
  font-weight: 500;
  color: var(--white);
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.625;
}

/* Feature list + product image layout */
.features__layout {
  display: grid;
  grid-template-columns: 468px 1fr;
  gap: 0;
  align-items: center;
  min-height: 768px;
}

/* Left: 4 feature items */
.features__list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.features__item {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 31px 37px;
  border-radius: 16px;
}
.features__icon {
  width: 142px;
  height: 142px;
  object-fit: contain;
  flex-shrink: 0;
}
.features__item-text h3 {
  font-family: var(--font-main);
  font-size: 18px;
  font-weight: 700;
  font-style: italic;
  color: var(--white);
  margin-bottom: 8px;
  line-height: 2.17;
}
.features__item-text p {
  font-family: var(--font-main);
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,0.75);
  line-height: 1.6;
}

/* Right: annotated product image */
.features__product {
  position: relative;
  width: 100%;
  height: 768px;
  border-radius: 16px;
  overflow: visible;
}
.features__product-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: 16px;
  /* subtle dark overlay */
  filter: brightness(0.85);
}

/* Callout annotation lines */
.features__callout {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 16px;
  pointer-events: none;
  white-space: nowrap;
}
.features__callout--r {
  left: 65%;
  flex-direction: row;
}
.features__callout--l {
  right: 65%;
  flex-direction: row;
}
.features__callout-label {
  font-family: var(--font-main);
  font-size: 15px;
  font-weight: 700;
  font-style: italic;
  color: var(--white);
  line-height: 1.25;
  white-space: normal;
  max-width: 110px;
}
.features__callout--l .features__callout-label {
  text-align: right;
}
.features__callout--r .features__callout-label {
  text-align: left;
}
.features__callout-line {
  display: block;
  width: 80px;
  height: 1.5px;
  background: rgba(255,255,255,0.7);
  flex-shrink: 0;
}

/* Mobile-only pill chips — hidden on desktop */
.features__callout-chips { display: none; }

/* AI Controlled cards — large panel style */
.ai-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 40px;
}

.ai-card {
  position: relative;
  height: 581px;
  border: 1px solid rgba(54,54,54,0.62);
  border-radius: 16px;
  overflow: hidden;
}

.ai-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

/* Gradient fade to black at bottom so text reads */
.ai-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    transparent 35%,
    rgba(0,0,0,0.8) 72%,
    rgba(0,0,0,0.97) 100%
  );
  z-index: 1;
}

/* Video controls pill — top right */
.ai-card__controls {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 100px;
  padding: 6px 10px;
}

.ai-card__play,
.ai-card__mute {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  opacity: 0.9;
  transition: opacity 0.2s;
}
.ai-card__play:hover,
.ai-card__mute:hover { opacity: 1; }

.ai-card__duration {
  font-family: var(--font-main);
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.ai-card__text {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 32px 41px;
  z-index: 2;
}
.ai-card__text h3 {
  font-family: var(--font-sec);
  font-size: 36px;
  font-weight: 900;
  font-style: italic;
  color: var(--white);
  line-height: 1.25;
  margin-bottom: 12px;
}
.ai-card__text p {
  font-family: var(--font-sec);
  font-size: 14px;
  font-weight: 400;
  color: rgba(255,255,255,0.8);
  line-height: 1.625;
  max-width: 371px;
}

/* ============================================
   PRODUCT CAROUSEL
   ============================================ */
.pcarousel {
  position: relative;
  padding: 38px 0 64px;
  background: transparent;
  /* overflow: hidden removed — allows glow to bleed into trendsetters below */
}

.pcarousel__glow {
  position: absolute;
  width: 600px; height: 600px;
  top: 879px; right: -200px;
  border-radius: 50%;
  background: rgba(152, 16, 250, 0.2);
  filter: blur(64px);
  opacity: 0.67;
  pointer-events: none;
}

/* Heading */
.pcarousel__header {
  text-align: center;
  padding: 24px 37px 31px;
  margin-bottom: 8px;
}
.pcarousel__title {
  font-family: var(--font-sec);
  font-size: 22px;
  font-weight: 900;
  font-style: italic;
  color: var(--white);
  line-height: 1.25;
  margin-bottom: 10px;
}
.pcarousel__sub {
  font-family: var(--font-main);
  font-size: 24px;
  font-weight: 500;
  color: var(--white);
  line-height: 1.625;
  max-width: 700px;
  margin: 0 auto;
}

/* Carousel viewport — clips sides */
.pcarousel__viewport {
  width: 100%;
  overflow: hidden;
  position: relative;
}

/* Track — 3 cards in a flex row, transitions on slide */
.pcarousel__track {
  display: flex;
  gap: 24px;
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

/* Each slide */
.pcarousel__slide {
  flex-shrink: 0;
  width: 85vw;
  max-width: 1090px;
}

/* Card styling */
.pcarousel__card {
  background: #000101;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  height: 620px;
}

.pcarousel__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  pointer-events: none;
}

/* Per-slide caption overlay at bottom of card */
.pcarousel__slide-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 40px 36px 32px;
  background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.45) 60%, transparent 100%);
}
.pcarousel__slide-title {
  font-family: var(--font-sec);
  font-size: 32px;
  font-weight: 900;
  font-style: italic;
  color: var(--white);
  line-height: 1.2;
  margin: 0 0 8px;
}
.pcarousel__slide-sub {
  font-family: var(--font-main);
  font-size: 15px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.6;
  max-width: 420px;
  margin: 0;
}

/* Indicator bars wrapper — centred below viewport */
.pcarousel__indicators-wrap {
  display: flex;
  justify-content: center;
  padding: 24px 0 8px;
}

/* Indicator bars */
.pcarousel__indicators {
  display: flex;
  gap: 6px;
  align-items: center;
}
.pcarousel__dot {
  width: 90px;
  height: 3px;
  border-radius: 2px;
  background: #2d2d2d;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.3s;
}
.pcarousel__dot--active {
  background: #88cef2;
}

/* Prev / Next arrows */
.pcarousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--white);
  font-size: 28px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: background 0.2s;
}
.pcarousel__arrow:hover { background: rgba(255, 255, 255, 0.2); }
.pcarousel__arrow--prev { left: 16px; }
.pcarousel__arrow--next { right: 16px; }

/* Responsive */
@media (max-width: 768px) {
  .pcarousel__slide { width: 88vw; }
  .pcarousel__card { height: 380px; }
  .pcarousel__title { font-size: 18px; }
  .pcarousel__sub { font-size: 17px; }
  .pcarousel__slide-title { font-size: 22px; }
  .pcarousel__slide-sub { font-size: 13px; }
  .pcarousel__dot { width: 60px; }
}

/* ============================================
   TREND SETTERS
   ============================================ */
.trendsetters {
  padding: 100px 0 0;
  background: transparent;
}

/* Section heading */
.trendsetters__header {
  margin-bottom: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
}
.trendsetters__title {
  font-size: clamp(32px, 5.5vw, 80px);
  font-weight: 800;
  line-height: 1.0;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.trendsetters__sub {
  font-size: 16px;
  color: rgba(255,255,255,0.65);
  max-width: 540px;
  line-height: 1.6;
  margin-top: 16px;
}
.trendsetters__header .btn-shop-now {
  width: fit-content;
  margin-top: 24px;
}

/* Three lifestyle photos */
.trendsetters__photos {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  width: 100%;
  height: 640px;
  overflow: hidden;
  margin-bottom: 0;
}

.trendsetters__photo {
  overflow: hidden;
  height: 100%;
}
.trendsetters__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 0.6s var(--ease-out);
}
.trendsetters__photo:hover img { transform: scale(1.04); }

.trendsetters__photo--centre {
  transform: none;
}

/* Ticker */
.ticker {
  background: var(--pink);
  overflow: hidden;
  padding: 14px 0;
  width: 100%;
}
.ticker__track {
  display: inline-flex;
  gap: 48px;
  animation: marquee 22s linear infinite;
  white-space: nowrap;
  font-family: var(--font-main);
  font-size: 14px;
  font-weight: 700;
  font-style: italic;
  color: var(--white);
  letter-spacing: 0.04em;
}
.ticker__track em { font-style: italic; }

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* UGC grid */
.ugc-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
  padding: 48px 0;
}

.ugc-card {
  border-radius: 10px;
  overflow: hidden;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  transition: border-color 0.3s, transform 0.3s;
}
.ugc-card:hover { border-color: rgba(238,134,192,0.35); transform: translateY(-4px); }

.ugc-card__img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  display: block;
}

.ugc-card__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  background: rgba(0,0,0,0.6);
}
.ugc-card__user {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--white);
}
.ugc-card__avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.ugc-card__heart {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

/* ============================================
   HAIRCARE HOME — Bring the Future
   ============================================ */
.haircare-home {
  padding: 100px 0;
  background: transparent;
}

/* Eyebrow decorators */
.eyebrow-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 20px;
}
.eyebrow-row--cyan .eyebrow-line { background: var(--cyan); }
.eyebrow-row--cyan .eyebrow-tag  { color: var(--cyan); border-color: var(--cyan); }

.eyebrow-line {
  flex: 1;
  max-width: 64px;
  height: 1px;
  background: rgba(255,255,255,0.3);
  display: block;
}
.eyebrow-line--cyan { background: var(--cyan); }

.eyebrow-tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 100px;
  padding: 4px 14px;
}
.eyebrow-tag--cyan { color: var(--cyan); border-color: rgba(74,222,255,0.35); }

/* Header */
.haircare-home__header {
  text-align: center;
  margin-bottom: 52px;
}
.haircare-home__title {
  font-size: clamp(44px, 5.5vw, 80px);
  font-weight: 800;
  line-height: 1.0;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
}
.haircare-home__sub {
  font-size: 16px;
  color: rgba(255,255,255,0.6);
  max-width: 540px;
  margin: 0 auto 32px;
  line-height: 1.6;
}

.haircare-home > .container {
  padding-bottom: 0;
}

.haircare-home__label {
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  font-style: italic;
  color: var(--white);
  margin-bottom: 32px;
}

/* 3-panel layout */
.haircare-home__panels {
  display: grid;
  grid-template-columns: 1fr 1.5fr 1fr;
  gap: 10px;
  height: 700px;
  align-items: end;
}

.haircare-home__panel {
  position: relative;
  height: 100%;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.haircare-home__panel--side {
  opacity: 0.55;
  height: 85%;
  align-self: center;
  transition: opacity 0.3s;
}
.haircare-home__panel--side:hover { opacity: 0.8; }
.haircare-home__panel--main {
  height: 100%;
}

.haircare-home__panel-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* Gradient overlay */
.haircare-home__panel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 55%);
}

.haircare-home__panel-content {
  position: relative;
  z-index: 2;
  padding: 24px;
  color: var(--white);
}
.haircare-home__panel-title {
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 4px;
}
.haircare-home__panel-sub {
  font-size: 13px;
  opacity: 0.7;
  margin-bottom: 14px;
}

/* ============================================
   HAIRCARE CAROUSEL (hcarousel)
   ============================================ */
.hcarousel {
  position: relative;
  margin-top: 8px;
}

.hcarousel__viewport {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.hcarousel__track {
  display: flex;
  gap: 24px;
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.hcarousel__slide {
  flex: 0 0 58vw;
  max-width: 800px;
  min-width: 260px;
}

.hcarousel__card {
  position: relative;
  height: 540px;
  border-radius: 16px;
  overflow: hidden;
  background: #111;
}

.hcarousel__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* gradient fade at bottom */
.hcarousel__card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.1) 55%, transparent 100%);
  z-index: 1;
}

.hcarousel__caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 28px 32px;
  z-index: 2;
}

.hcarousel__slide-title {
  font-family: var(--font-main);
  font-size: 22px;
  font-weight: 800;
  color: var(--white);
  margin-bottom: 6px;
}

.hcarousel__slide-sub {
  font-family: var(--font-main);
  font-size: 14px;
  color: rgba(255,255,255,0.7);
  line-height: 1.5;
  margin-bottom: 20px;
}

/* Arrows */
.hcarousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.2);
  color: var(--white);
  font-size: 32px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
}
.hcarousel__arrow:hover { background: rgba(255,255,255,0.22); }
.hcarousel__arrow--prev { left: 16px; }
.hcarousel__arrow--next { right: 16px; }

/* Dots */
.hcarousel__indicators-wrap {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}
.hcarousel__indicators {
  display: flex;
  gap: 8px;
}
.hcarousel__dot {
  width: 60px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255,255,255,0.2);
  border: none;
  cursor: pointer;
  transition: background 0.25s;
  padding: 0;
}
.hcarousel__dot--active { background: var(--white); }

@media (max-width: 768px) {
  .hcarousel__slide { flex: 0 0 82vw; }
  .hcarousel__card { height: 400px; }
  .hcarousel__slide-title { font-size: 18px; }
  .hcarousel__slide-sub { font-size: 13px; }
}

/* ============================================
   PRODUCT CTA BANNER (Figma 113:839)
   ============================================ */
.product-cta {
  position: relative;
  width: 100%;
  height: 573px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.product-cta__bg {
  position: absolute;
  inset: 0;
}

.product-cta__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  opacity: 0.77;
}

.product-cta__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.49);
}

.product-cta__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  text-align: center;
  padding: 0 24px;
}

.product-cta__heading {
  font-family: var(--font-main);
  font-size: 28px;
  font-weight: 700;
  color: var(--white);
  line-height: 1.4;
}

.product-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 150px;
  min-height: 55px;
  padding: 10px 16px;
  border: 2px solid #f6339a;
  color: #f6339a;
  font-family: var(--font-main);
  font-weight: 800;
  font-size: 18px;
  border-radius: 4px;
  transition: background 0.2s, color 0.2s, transform 0.2s var(--ease-out);
}
.product-cta__btn:hover {
  background: #f6339a;
  color: var(--white);
  transform: translateY(-2px);
}

@media (max-width: 768px) {
  .product-cta { height: 288px; }
  .product-cta__heading { font-size: 22px; }
}

/* ============================================
   REVIEWS / TESTIMONIALS
   ============================================ */
.reviews {
  padding: 100px 0;
  background: transparent; /* body provides black base; transparent allows glows to bleed */
  position: relative;
}

.reviews__header {
  text-align: center;
  margin-bottom: 60px;
}
.reviews__title {
  font-size: clamp(44px, 5.5vw, 80px);
  font-weight: 800;
  line-height: 1.0;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
}
.reviews__sub {
  font-size: 16px;
  color: rgba(255,255,255,0.6);
  max-width: 480px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Cards */
.reviews__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 64px;
}

/* Air texture pattern images (Figma: background_1 + Background 2) */
.reviews__textures {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
/* Ensure all content sits above the textures */
.reviews__header,
.reviews__cards,
.reviews__stats {
  position: relative;
  z-index: 1;
}
.reviews__texture {
  position: absolute;
  pointer-events: none;
  user-select: none;
  object-fit: cover;
}
/* background_asset right: anchored to right edge, opacity 12% (Figma node 181:419, reduced 50%) */
.reviews__texture--1 {
  right: 0;
  left: auto;
  top: 17px;
  width: 73%;
  height: 90%;
  opacity: 0.12;
}
/* background_asset left: anchored to left edge, rotated 180deg, opacity 33% (Figma node 181:420) */
.reviews__texture--2 {
  left: 0;
  right: auto;
  top: -10%;
  width: 63%;
  height: 85%;
  opacity: 0.33;
  transform: rotate(180deg);
}

.reviews__card {
  background: #111;
  border: 1px solid rgba(116,196,255,0.1);
  border-radius: 24px;
  padding: 24px;
  transition: border-color 0.3s, transform 0.3s;
  position: relative;
  z-index: 1;
}
.reviews__card:hover { border-color: rgba(116,196,255,0.3); transform: translateY(-4px); }

.reviews__stars {
  display: flex;
  gap: 4px;
  margin-bottom: 18px;
}
.reviews__star {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.reviews__quote {
  font-size: 15px;
  font-weight: 500;
  color: rgba(255,255,255,0.82);
  line-height: 1.7;
  margin-bottom: 24px;
}

.reviews__author {
  display: flex;
  align-items: center;
  gap: 12px;
}
.reviews__avatar-wrap {
  flex-shrink: 0;
}
.reviews__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.reviews__handle {
  font-size: 13px;
  font-weight: 700;
  color: var(--pink-light);
  flex: 1;
}
/* Stars + app icon row */
.reviews__card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.reviews__card-top .reviews__stars { margin-bottom: 0; }

/* App platform icon */
.reviews__app-icon {
  width: 22px;
  height: 22px;
  color: rgba(255,255,255,0.35);
  flex-shrink: 0;
}

/* CSS initial avatars */
.reviews__avatar-initial {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-main);
  font-size: 16px;
  font-weight: 800;
  color: var(--white);
}

.reviews__heart {
  width: 18px;
  height: 18px;
  object-fit: contain;
  margin-left: auto;
}

/* Stats — column by default, row only on wide desktop */
.reviews__stats {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  border-top: 1px solid rgba(255,255,255,0.07);
  padding: 32px 16px;
  gap: 0;
}
.reviews__stat {
  width: 100%;
  text-align: center;
  flex-shrink: 1;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  padding: 20px 0;
  box-sizing: border-box;
}
.reviews__stat:last-child {
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

@media (min-width: 1025px) {
  .reviews__stats {
    flex-direction: row;
    justify-content: center;
    padding: 40px 0;
    gap: 48px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
  }
  .reviews__stat {
    width: auto;
    flex-shrink: 0;
    border-bottom: none;
    padding: 0 24px;
    border-right: 1px solid rgba(255,255,255,0.07);
  }
  .reviews__stat:last-child {
    border-right: none;
    border-bottom: none;
  }
}

.reviews__stat-val {
  display: block;
  font-size: 36px;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 8px;
}
.reviews__stat-val--pink   { color: var(--pink); }
.reviews__stat-val--cyan   { color: var(--cyan); }
.reviews__stat-val--purple { color: var(--purple); }

.reviews__stat-label {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: #666;
}

/* ============================================
   CTA BANNER — "Let's Create Your Next Best Look"
   ============================================ */
.cta-banner {
  position: relative;
  width: 100%;
  min-height: 560px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* Background layers */
.cta-banner__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.cta-banner__bg-img {
  width: 136%;
  height: 138%;
  max-width: none;
  object-fit: cover;
  position: absolute;
  top: -11%;
  left: -36%;
  display: block;
}
.cta-banner__overlay-pink {
  position: absolute;
  inset: 0;
  background: rgba(217, 41, 193, 0.92);
  mix-blend-mode: soft-light;
}
.cta-banner__overlay-dark {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
}

/* Content */
.cta-banner__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 128px 0;
  gap: 0;
}

.cta-banner__inner .eyebrow-row {
  margin-bottom: 28px;
  justify-content: center;
}

/* Heading */
.cta-banner__heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.0;
  letter-spacing: -0.023em;
  text-transform: uppercase;
  margin-bottom: 24px;
}

.cta-banner__heading-top {
  font-family: 'Poltawski Nowy', serif;
  font-weight: 400;
  font-style: normal;
  font-size: clamp(48px, 6.5vw, 79px);
  line-height: 1.06;
  color: var(--white);
  display: block;
}

.cta-banner__heading-bottom {
  font-family: 'Poltawski Nowy', serif;
  font-weight: 700;
  font-style: italic;
  font-size: clamp(46px, 6.4vw, 78px);
  line-height: 1.06;
  display: block;
  background: linear-gradient(90deg,
    rgb(168,101,255) 0%,
    rgb(255,111,181) 50%,
    rgb(74,222,255) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.cta-banner__best {
  text-decoration: underline;
  text-decoration-style: solid;
  text-underline-offset: 4px;
  font-style: italic;
}

/* Sub */
.cta-banner__sub {
  font-family: var(--font-sec);
  font-size: 16px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7);
  max-width: 540px;
  line-height: 2.03;
  margin-bottom: 52px;
}

/* Buttons */
.cta-banner__btns {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
}

.cta-banner__btn-shop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 179px;
  height: 56px;
  background: var(--white);
  color: var(--black);
  font-family: var(--font-sec);
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  transition: opacity 0.2s, transform 0.2s var(--ease-out);
}
.cta-banner__btn-shop:hover {
  opacity: 0.9;
  transform: translateY(-2px);
}

.cta-banner__btn-cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 150px;
  min-height: 56px;
  padding: 10px 16px;
  border: 2px solid #f6339a;
  border-radius: 4px;
  color: #f6339a;
  font-family: var(--font-main);
  font-weight: 800;
  font-size: 18px;
  transition: background 0.2s, transform 0.2s var(--ease-out);
}
.cta-banner__btn-cart:hover {
  background: rgba(246, 51, 154, 0.1);
  transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 768px) {
  .cta-banner { min-height: 480px; }
  .cta-banner__inner { padding: 80px 0; }
  .cta-banner__bg-img { width: 180%; left: -40%; }
  .cta-banner__btns { flex-direction: column; align-items: center; }
  .cta-banner__btn-shop,
  .cta-banner__btn-cart { width: 220px; }
}

/* ============================================
   FOOTER
   ============================================ */
.footer {
  background: rgba(255,255,255,0.02);
  border-top: 1px solid rgba(255,255,255,0.07);
  padding: 72px 0 36px;
}

.footer__top {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 60px;
  padding-bottom: 56px;
  margin-bottom: 36px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

/* Brand column */
.footer__logo-wrap {
  display: inline-block;
  margin-bottom: 14px;
}
.footer__logo-img {
  width: 160px;
  height: auto;
  display: block;
}

.footer__tagline {
  font-size: 14px;
  color: rgba(255,255,255,0.5);
  line-height: 1.65;
  max-width: 320px;
  margin-bottom: 28px;
}

.footer__socials {
  display: flex;
  gap: 10px;
}
.footer__social {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s, background 0.2s;
}
.footer__social:hover { border-color: var(--pink-light); background: rgba(238,134,192,0.08); }
.footer__social img { width: 18px; height: 18px; object-fit: contain; }

/* Link columns */
.footer__col h4 {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-bottom: 20px;
}
.footer__col ul { display: flex; flex-direction: column; gap: 13px; }
.footer__col li {
  font-size: 15px;
  color: rgba(255,255,255,0.65);
  transition: color 0.2s;
  cursor: pointer;
}
.footer__col li:hover { color: var(--white); }

/* Bottom bar */
.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: rgba(255,255,255,0.3);
  flex-wrap: wrap;
  gap: 12px;
}
.footer__legal { display: flex; gap: 28px; }
.footer__legal a { color: rgba(255,255,255,0.3); transition: color 0.2s; }
.footer__legal a:hover { color: var(--white); }

/* ============================================
   SCROLL ANIMATIONS
   ============================================ */
.fade-up {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.fade-up.visible { opacity: 1; transform: translateY(0); }

/* ============================================
   RESPONSIVE — Tablet (≤1024px)
   ============================================ */
@media (max-width: 1024px) {
  :root { --nav-h1: 60px; --nav-h2: 44px; --nav-total: 104px; }

  .nav__location { display: none; }
  .nav__logo-img-wrap { width: 130px; }

  .hero__content { max-width: 100%; }
  .hero__heading { font-size: clamp(38px, 5vw, 58px); }
  .hero__sub { font-size: 18px; }
  .hero__ai-label { display: none; }

  .models__stage { height: 700px; }

  .features__layout { grid-template-columns: 360px 1fr; }
  .features__icon { width: 100px; height: 100px; }
  .features__product { height: 640px; }

  .trendsetters__photos { height: 480px; }

  .haircare-home__panels { height: 560px; }

  .reviews__cards { gap: 14px; }

  .ugc-grid { grid-template-columns: repeat(4, 1fr); }
  .ugc-card:nth-child(n+5) { display: none; }

  .footer__top { gap: 40px; }
}

/* ============================================
   RESPONSIVE — Mobile (≤768px)
   ============================================ */
@media (max-width: 768px) {
  :root { --nav-h1: 58px; --nav-h2: 0px; --nav-total: 58px; }

  /* Nav */
  .nav__cats { display: none; }
  .nav__search { display: none; }
  .nav__location { display: none; }
  .nav__flag-wrap { display: none; }
  /* Show all icon buttons on mobile */
  .nav__icon-btn { display: flex; }
  .nav__icon-btn img { width: 19px; height: 19px; }
  /* Push icon group to the right */
  .nav__icon-btn--search-m { margin-left: auto; }
  .nav__burger { display: flex; }
  .nav__logo-img-wrap { width: 80px; padding: 0 8px; }

  /* Hero */
  .hero {
    min-height: 100svh;
    align-items: flex-end;
    padding-bottom: 60px;
  }
  .hero__overlay {
    background: linear-gradient(180deg, rgba(0,0,0,0) 44.54%, rgba(0,0,0,0.85) 100%);
  }
  .hero__overlay-gradient {
    background: rgba(0,0,0,0.25);
  }
  .hero__heading { font-size: clamp(32px, 8vw, 64px); }
  .hero__sub { font-size: 16px; }
  .hero__btns { flex-direction: column; }
  .hero__btns a { width: 100%; text-align: center; }
  .hero__content {
    padding: 0 20px;
    max-width: 100%;
  }

  /* Models — stacked mobile layout */
  .models__stage {
    position: static;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 16px;
    max-width: 100%;
  }

  /* Reset all cards out of absolute flow */
  .models__card {
    position: static;
    overflow: hidden;
    border-radius: 12px;
  }

  /* 1. Full-width woman — spans whole row */
  .models__card--left {
    flex: 0 0 100%;
    height: 420px;
    width: 100%;
    aspect-ratio: auto;
  }

  /* 2. Hairdryer — hidden on mobile */
  .models__card--top-right {
    display: none;
  }

  /* 3. Gym model — full width below */
  .models__card--bottom-right {
    flex: 0 0 100%;
    height: 280px;
    width: 100%;
    aspect-ratio: auto;
  }

  /* Reset absolutely-positioned images to fill their card naturally */
  .models__img {
    position: static;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transform: none;
  }
  .models__img--left {
    position: static;
    width: 100%;
    height: 100%;
    left: auto;
    top: auto;
    object-fit: cover;
    object-position: left top;
  }
  .models__card--bottom-right .models__img {
    position: static;
    width: 100%;
    height: 100%;
    left: auto;
    top: auto;
    object-fit: cover;
    object-position: right top;
  }

  /* Features */
  .features { padding: 72px 0; }
  .features__layout { grid-template-columns: 1fr; gap: 40px; min-height: auto; }
  /* Product image: full-width, static — chips below replace overlaid callouts */
  .features__product { height: auto; overflow: visible; }
  .features__product-img {
    position: static;
    width: 100%;
    height: 340px;
    object-fit: cover;
    object-position: center top;
    border-radius: 12px;
  }

  /* Hide all overlaid callouts on mobile */
  .features__callout { display: none; }
  .features__callout--l { display: none; }
  .features__callout--r { display: none; }

  /* Mobile pill chips below the image */
  .features__callout-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
    justify-content: center;
  }
  .features__callout-chips span {
    font-family: var(--font-main);
    font-size: 12px;
    font-weight: 700;
    font-style: italic;
    color: var(--white);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 100px;
    padding: 5px 14px;
    background: rgba(255,255,255,0.06);
    white-space: nowrap;
  }
  .features__intro { gap: 12px; margin-bottom: 36px; }
  .features__title-white { font-size: 32px; }
  .features__title-gradient { font-size: 30px; }
  .features__sub { font-size: 15px; }
  .features__btn-shop { font-size: 15px; min-height: 44px; }
  .features__item { padding: 14px 16px; gap: 16px; }
  .features__item-text h3 { line-height: 1.3; margin-bottom: 4px; }
  .features__icon { width: 80px; height: 80px; }
  .features__kpf { margin-bottom: 20px; }
  .features__kpf-sub { font-size: 17px; }
  .ai-cards { grid-template-columns: 1fr; }
  .ai-card { height: 420px; }

  /* Trendsetters */
  .trendsetters { padding: 72px 0 0; }
  .trendsetters__sub { max-width: 100%; }
  .trendsetters__photos { grid-template-columns: 1fr; height: auto; }
  .trendsetters__photo { height: 280px; }

  /* UGC */
  .ugc-grid { grid-template-columns: repeat(2, 1fr); }
  .ugc-card { display: block !important; }
  .ugc-card:nth-child(n+5) { display: none !important; }

  /* Haircare home */
  .haircare-home { padding: 72px 0; }
  .haircare-home__panels {
    grid-template-columns: 1fr;
    height: auto;
    gap: 14px;
  }
  .haircare-home__panel--side { height: 260px; opacity: 1; }
  .haircare-home__panel--main { height: 380px; }

  /* Reviews */
  .reviews { padding: 72px 0; }
  .reviews__cards { grid-template-columns: 1fr; gap: 16px; }
  .reviews__stat-val { font-size: 28px; }
  .reviews__stat-label { font-size: 11px; }

  /* Footer */
  .footer { padding: 56px 0 28px; }
  .footer__top { grid-template-columns: 1fr; gap: 36px; padding-bottom: 36px; }
  .footer__bottom { flex-direction: column; text-align: center; }
  .footer__legal { justify-content: center; flex-wrap: wrap; gap: 16px; }
}

/* ============================================
   RESPONSIVE — Small mobile (≤480px)
   ============================================ */
@media (max-width: 480px) {
  .hero__heading { font-size: clamp(22px, 8vw, 42px); }
  .models__card--left { height: 320px; }
  .models__card--top-right,
  .models__card--bottom-right { height: 180px; }
  .ugc-grid { grid-template-columns: 1fr 1fr; }
}