/* =========================================================
   NÜMO · Coffee Energy Pocket Spray
   Dark + copper landing page
   ========================================================= */

:root {
  --bg-0: #07060a;
  --bg-1: #0c0a0e;
  --bg-card: #1a1410;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.14);

  --ink: #f4ece4;
  --ink-soft: #c8bdb1;
  --ink-mute: #8e827a;

  --accent: #c5704d;
  --accent-hot: #d88a63;
  --accent-glow: rgba(197, 112, 77, 0.45);

  --container: 1180px;
  --radius: 14px;

  /* Vertical rhythm — every full-bleed section uses one of these */
  --space-section: 76px;
  --space-section-sm: 56px;

  /* Type scale */
  --text-xs: 11px;
  --text-sm: 12.5px;
  --text-base: 15.5px;
  --text-lg: 18px;
  --text-display-sm: 28px;
  --text-display: clamp(28px, 3.4vw, 44px);

  --font-display: "Manrope", system-ui, sans-serif;
  --font-body: "Manrope", system-ui, sans-serif;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-0);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Kill the grey flash Android paints on every tap */
  -webkit-tap-highlight-color: transparent;
}
/* The nav is now fixed, so offset in-page anchor jumps (#pricing, #how) by
   roughly the nav height to keep targets from hiding under the bar. */
html {
  scroll-padding-top: 90px;
  /* Windows' stock light scrollbar glares against the dark canvas */
  scrollbar-color: #2b242f var(--bg-0);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
/* Slim dark scrollbar for the page and every scrollable overlay (cart
   drawer, checkout modal) — Chromium/WebKit only; Firefox uses the
   scrollbar-color above. */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--bg-0); }
::-webkit-scrollbar-thumb {
  background: #2b242f;
  border: 3px solid var(--bg-0);
  border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover { background: #3d3442; }

::selection {
  background: rgba(197, 112, 77, .4);
  color: var(--ink);
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  border: none;
  background: none;
  color: inherit;
  cursor: pointer;
}

/* Accessible focus ring for keyboard users — copper to match the brand */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}
/* Mouse users keep the clean look */
:focus:not(:focus-visible) {
  outline: none;
}

.accent {
  color: var(--accent);
}

.eyebrow {
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 0.22em;
  font-weight: 600;
  color: var(--accent);
  margin: 0 0 14px;
  text-transform: uppercase;
}

/* One recipe for every major section heading (duo, boost, pricing) so
   consecutive sections don't read as different type systems. */
.section-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(28px, 3.4vw, 44px);
  letter-spacing: 0.05em;
  line-height: 1.08;
  text-transform: uppercase;
  margin: 0 0 18px;
}
/* Even out multi-line heading rags (progressive enhancement). */
.section-title,
.boost__title,
.pricing__title,
.faq__title,
.stock-alert__title {
  text-wrap: balance;
}

/* =================== BRAND / NAV =================== */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /* Above page content (max z-index 2) but below every overlay:
     checkout modal (100), cart drawer (200), contact modal (9999). */
  z-index: 50;
  transition: background .25s ease, backdrop-filter .25s ease, border-color .25s ease;
}
/* Transparent over the hero for an immersive top; once the user scrolls a
   little, a blurred dark slab slides in behind the nav so the logo + cart
   icon stay legible over page content. Toggled by js/nav.js — mirrors the
   mobile nav behaviour. */
.nav--scrolled {
  background: rgba(7, 6, 10, .82);
  border-bottom: 1px solid var(--line);
}
@supports (backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px)) {
  .nav--scrolled {
    background: rgba(7, 6, 10, .6);
    backdrop-filter: blur(12px) saturate(1.2);
    -webkit-backdrop-filter: blur(12px) saturate(1.2);
  }
}
.nav__inner {
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
  padding: 26px 28px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  transition: padding .25s ease;
}
/* Tighten the bar slightly once it gains its backdrop. */
.nav--scrolled .nav__inner {
  padding-top: 16px;
  padding-bottom: 16px;
}
.brand {
  display: inline-flex;
  align-items: center;
  color: var(--accent);
}
.brand__logo {
  display: block;
  width: auto;
  height: 32px;
}
/* Centre nav links (fills the empty middle of the bar on wide screens and
   gives a persistent path to the packs / sections). Hidden on narrow desktop
   via the 980 breakpoint. */
.nav__menu {
  display: flex;
  gap: 34px;
  margin-left: 44px;   /* sit just right of the logo, with breathing room */
  margin-right: auto;  /* push the cart icon to the far right */
}
.nav__menu a {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-shadow: 0 1px 8px rgba(0, 0, 0, .6);
  transition: color .2s ease;
}
.nav__menu a:hover { color: var(--accent); }

/* Language switcher — custom dropdown (no native <select>, so the panel
   position + styling is fully controlled). Sits right of the menu. */
.lang-switch { position: relative; margin-left: 20px; }
.lang-switch__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--ink-soft);
  background: rgba(0, 0, 0, .18);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
}
.lang-switch__btn:hover { border-color: var(--accent); color: var(--ink); }
.lang-switch__icon { display: inline-flex; opacity: .85; }
.lang-switch__caret { opacity: .7; transition: transform .2s ease; }
.lang-switch.is-open .lang-switch__caret { transform: rotate(180deg); }
/* Dropdown panel */
.lang-switch__menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 186px;
  padding: 7px;
  display: none;
  flex-direction: column;
  gap: 1px;
  background: #17120f;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  box-shadow: 0 24px 52px -16px rgba(0, 0, 0, .72);
  z-index: 60;
  transform-origin: top right;
  animation: langMenuIn .17s cubic-bezier(.2, .7, .3, 1) both;
}
@keyframes langMenuIn {
  from { opacity: 0; transform: translateY(-6px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
/* little pointer notch up towards the button */
.lang-switch__menu::before {
  content: "";
  position: absolute;
  top: -5px;
  right: 15px;
  width: 10px;
  height: 10px;
  background: #17120f;
  border-left: 1px solid var(--line-strong);
  border-top: 1px solid var(--line-strong);
  transform: rotate(45deg);
}
.lang-switch.is-open .lang-switch__menu { display: flex; }
.lang-switch__menu button {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  text-align: left;
  padding: 10px 13px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink-soft);
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.lang-switch__flag { font-size: 16px; line-height: 1; }
.lang-switch__menu button:hover { background: rgba(197, 112, 77, .14); color: var(--ink); }
.lang-switch__menu button[aria-current="true"] {
  color: var(--accent-hot);
  background: rgba(197, 112, 77, .10);
}
.lang-switch__menu button[aria-current="true"]::after {
  content: "✓";
  margin-left: auto;
  font-size: 12px;
  color: var(--accent-hot);
}

/* =================== HERO =================== */
.hero {
  position: relative;
  overflow: hidden;
  /* Scales with the viewport but is bounded so the hero never feels cramped
     on small laptops nor wastes scroll on huge displays. */
  min-height: clamp(680px, 80vh, 880px);
  background: var(--bg-0);
  border-bottom: 1px solid var(--line);
  isolation: isolate;
}
.hero__media {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  /* Constrain to the same canvas the rest of the page lives in, so when the
     viewport is wider than the container the image stops at the same edge as
     all other sections instead of bleeding to the screen edges. */
  max-width: 1280px;
  background-image: url("../images/Hero.webp?v=7");
  background-size: cover;
  /* Anchor on the right so the product/spray stays visible at any width */
  background-position: right center;
  background-repeat: no-repeat;
  z-index: 0;
  /* Soft horizontal fade so the image edges dissolve into the black hero
     background rather than cutting sharply at the container's left/right. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
}
.hero__shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    /* Strong dark gradient on the left so the headline always reads */
    linear-gradient(90deg, rgba(7,6,10,.96) 0%, rgba(7,6,10,.78) 30%, rgba(7,6,10,.30) 55%, rgba(7,6,10,0) 80%),
    /* Soft top-bottom vignette */
    linear-gradient(180deg, rgba(7,6,10,.55) 0%, transparent 25%, transparent 70%, rgba(7,6,10,.65) 100%);
}
.hero__inner {
  position: relative;
  z-index: 2;
  max-width: var(--container);
  margin: 0 auto;
  padding: 140px 28px 110px;
  display: flex;
  align-items: center;
  min-height: clamp(680px, 80vh, 880px);
}
.hero__copy {
  position: relative;
  z-index: 2;
  max-width: 560px;
}
/* Staggered entrance — each child rises in a moment after the previous */
.hero__copy > * { animation: hero-rise .9s cubic-bezier(.22, .61, .36, 1) both; }
.hero__copy > *:nth-child(1) { animation-delay: .05s; }
.hero__copy > *:nth-child(2) { animation-delay: .18s; }
.hero__copy > *:nth-child(3) { animation-delay: .30s; }
.hero__copy > *:nth-child(4) { animation-delay: .42s; }

@keyframes hero-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__copy > * { animation: none; }
}
.hero__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(48px, 7vw, 92px);
  line-height: 0.96;
  letter-spacing: 0.005em;
  /* Negative left margin cancels the large optical side-bearing of the 92px
     bold "E"/"B" (measured ~6px inset) so the title's ink edge lines up with
     the eyebrow / lead / button above and below it. Reset on the centred
     ≤980 layout. */
  margin: 0 0 22px -5px;
  text-transform: uppercase;
  text-shadow: 0 2px 30px rgba(0,0,0,.5);
}
.hero__title .accent {
  font-weight: 900;
}
.hero__title-sub {
  display: inline-block;
  font-weight: 800;
  font-size: 0.48em;
  letter-spacing: 0.02em;
  line-height: 1.1;
  /* Pull the sub-line tight to BOOST so the title reads as one unit, not two */
  margin-top: -0.15em;
  /* Counter the title's -5px so the smaller sub-line (less side-bearing) still
     lines up with the rest instead of poking out to the left. */
  margin-left: 3px;
}
.hero__lead {
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 32px;
  max-width: 460px;
  text-shadow: 0 2px 16px rgba(0,0,0,.6);
}
.hero__reassure {
  margin: 14px 0 0;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
  text-shadow: 0 1px 8px rgba(0,0,0,.6);
}
.hero__scroll {
  display: none;
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  /* Abs-pos + left:50% shrink-to-fit halves the available width and wrapped
     the arrow onto a clipped second line. */
  white-space: nowrap;
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--ink-mute);
  margin: 0;
}
.hero__scroll span {
  display: inline-block;
  animation: hero-scroll-bob 2s ease-in-out infinite;
}
@keyframes hero-scroll-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(4px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__scroll span { animation: none; }
}

/* =================== HERO CTA =================== */
.hero__cta { display: flex; flex-direction: column; align-items: flex-start; }

/* Hero CTA button keeps a generous, consistent width so it reads as a strong
   CTA regardless of label length (min() guards against overflow on tiny
   viewports). */
.hero__cta .btn { min-width: min(260px, 100%); }

/* =================== VIDEO HERO =================== */
.video-hero { background: var(--bg-0); padding: clamp(48px, 6vw, 88px) 0; }
.video-hero__inner { max-width: var(--container); margin: 0 auto; padding: 0 28px; position: relative; }
.video-hero__media {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: #000;
}
.video-hero__sound {
  position: absolute;
  bottom: 16px;
  right: 44px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(7, 6, 10, .55);
  border: 1px solid rgba(255, 255, 255, .28);
  color: #fff;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
@supports ((backdrop-filter: blur(6px)) or (-webkit-backdrop-filter: blur(6px))) {
  .video-hero__sound { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
}
.video-hero__sound:hover { background: rgba(7, 6, 10, .8); border-color: var(--accent); }
.video-hero__sound svg { width: 20px; height: 20px; }
.video-hero__icon-on { display: none; }
.video-hero__sound.is-on { background: var(--accent); border-color: var(--accent); }
.video-hero__sound.is-on .video-hero__icon-on { display: block; }
.video-hero__sound.is-on .video-hero__icon-muted { display: none; }

/* =================== BUTTONS =================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.14em;
  padding: 24px 40px;
  /* Matches the card/input radius language (the old 4px read utilitarian
     next to the 10-16px surfaces everywhere else). */
  border-radius: 10px;
  text-transform: uppercase;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
  cursor: pointer;
}
.btn--primary {
  background: linear-gradient(180deg, var(--accent-hot), var(--accent));
  color: #ffffff;
  /* Inset highlight gives the gradient a machined top edge (same recipe as
     the checkout CTA). */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 8px 20px -12px rgba(197, 112, 77, 0.30);
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 12px 26px -12px rgba(197, 112, 77, 0.34); }
.btn--primary:active { transform: translateY(0); }
.btn--ghost {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
}
.btn--ghost:hover { background: rgba(197,112,77,.08); }

/* =================== FEATURES ROW =================== */
.features {
  background: var(--bg-1);
  border-bottom: 1px solid var(--line);
}
.features__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 48px 28px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  color: var(--ink);
}
.feature__icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}
.feature__icon svg { width: 38px; height: 38px; }
.feature p {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.20em;
}

/* =================== DUO SECTION =================== */
.duo {
  position: relative;
  background: #000;
  padding: 0;
  overflow: hidden;
}
.duo__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 28px;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 30px;
  align-items: center;
}
.duo__media {
  position: relative;
  width: 100%;
  /* Slightly taller than the native 16:9 source. Combined with `cover` and
     a left anchor, this zooms in on the bottle so the product reads big and
     the spray cloud extends across the column toward the copy. */
  aspect-ratio: 5 / 4;
  background-image: url("../images/Banner2.webp?v=3");
  background-size: cover;
  background-position: left center;
  background-repeat: no-repeat;
  /* The image is already on a black background, so a soft right-edge fade
     dissolves any visible seam into the section's black surface. */
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 62%, transparent 100%);
          mask-image: linear-gradient(90deg, #000 0%, #000 62%, transparent 100%);
}
/* Centre the DUO copy column so the short title sits centred over the 3-step
   row below it instead of hanging off to the left. */
.duo__copy { text-align: center; }
.lead {
  color: var(--ink-soft);
  margin: 0 0 36px;
  font-size: 17.5px;
  line-height: 1.55;
}
.steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.step {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.step__icon {
  width: 60px;
  height: 60px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}
.step__icon svg { width: 50px; height: 50px; }
.step__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.20em;
  color: var(--ink);
  margin: 0;
}
.step__text {
  font-size: 15px;
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.55;
}

/* =================== BOOST CAROUSEL =================== */
.boost {
  padding: var(--space-section) 0;
  background: var(--bg-0);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.boost__title {
  text-align: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(28px, 3.4vw, 44px);
  letter-spacing: 0.05em;
  margin: 0 0 8px;
  text-transform: uppercase;
}
.boost__sub {
  text-align: center;
  color: var(--ink-mute);
  font-size: 16px;
  margin: 0 0 40px;
  padding: 0 28px;
}
.boost__track {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 28px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}
.boost-card {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-card);
  transition: transform .35s ease, box-shadow .35s ease;
  will-change: transform;
}
.boost-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 18px 40px -18px rgba(0, 0, 0, .9),
    0 0 0 1px var(--accent);
}
.boost-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.boost-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,.75) 100%);
}
.boost-card h3 {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  margin: 0;
  z-index: 2;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.14em;
  line-height: 1.25;
  /* Keeps the label legible on bright frames (airport sunset card). */
  text-shadow: 0 1px 12px rgba(0, 0, 0, .65);
}

/* =================== PRICING =================== */
.pricing {
  background: var(--bg-0);
  padding: var(--space-section-sm) 0;
}
.pricing__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 28px;
}
.pricing__head { margin-bottom: 32px; text-align: center; }
/* Matches .section-title — was a fixed 34px that read smaller than the duo/
   boost heads despite being the conversion peak. */
.pricing__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(28px, 3.4vw, 44px);
  letter-spacing: 0.05em;
  margin: 0 0 10px;
  text-transform: uppercase;
}
.pricing__sub {
  margin: 0;
  color: var(--ink-mute);
  font-size: 17px;
}

/* =================== TRUST =================== */
.trust {
  background: var(--bg-1);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.trust__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 48px 28px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.trust__item {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ink-soft);
}
.trust__item svg {
  width: 38px;
  height: 38px;
  color: var(--accent);
  flex-shrink: 0;
}
.trust__item p {
  margin: 0;
  font-size: 15px;
  letter-spacing: 0.05em;
  line-height: 1.35;
}
.trust__item strong {
  color: var(--ink);
  font-weight: 700;
  letter-spacing: 0.08em;
  font-size: 15px;
}

/* =================== FOOTER =================== */
.footer {
  background: var(--bg-0);
  padding: var(--space-section-sm) 0 30px;
  border-top: 1px solid var(--line);
}
.footer__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
}
/* Subdue the wordmark in the footer so it doesn't compete with the nav lockup */
.footer .brand { color: var(--ink-mute); }
.footer .brand__logo { height: 26px; opacity: 0.85; }
.footer__links {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  justify-content: center;
}
.footer__links a {
  font-size: 15px;
  color: var(--ink-mute);
  letter-spacing: 0.08em;
  transition: color .2s ease;
}
.footer__links a:hover { color: var(--accent); }
.footer__social {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: center;
}
.footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-mute);
  transition: color 0.2s ease, transform 0.2s ease;
}
.footer__social a:hover {
  color: var(--accent);
  transform: translateY(-2px);
}
.footer__copy {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--ink-mute);
}

/* =================== RESPONSIVE =================== */
@media (max-width: 980px) {
  .hero {
    min-height: auto;
  }
  .hero__media {
    /* On narrow screens, push the image to the top of the section so the
       product sits above the headline like the reference shot */
    background-position: 70% top;
    background-size: 140% auto;
    background-repeat: no-repeat;
    /* Reserve image height at the top */
    inset: 0 0 auto 0;
    height: 56vw;
    min-height: 320px;
    max-height: 480px;
    /* The base rule centres via left:50% + translateX(-50%); inset resets
       `left` but the transform survived, dragging the band half a viewport
       off-screen (bottle clipped at the left edge, right half empty). */
    transform: none;
  }
  .hero__shade {
    background:
      linear-gradient(180deg, rgba(7,6,10,0) 0%, rgba(7,6,10,0) 30%, rgba(7,6,10,.7) 60%, rgba(7,6,10,.95) 100%);
  }
  .hero__inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 60vw 24px 80px;
    min-height: auto;
  }
  .hero__copy { max-width: 100%; display: flex; flex-direction: column; align-items: center; }
  /* The CTA group (badge + button + note) is left-aligned on wide screens;
     centre it here so it lines up with the now-centred eyebrow/title/lead. */
  .hero__cta { align-items: center; text-align: center; }
  .hero__lead { margin-left: auto; margin-right: auto; }
  /* The side-bearing nudge is for the left-aligned layout only. */
  .hero__title, .hero__title-sub { margin-left: 0; }
  .hero__scroll { display: block; }

  .features__inner { grid-template-columns: repeat(2, 1fr); gap: 30px; }

  .duo { padding: 70px 0 90px; }
  .duo__media {
    background-position: center;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%);
  }
  .duo__inner { grid-template-columns: 1fr; gap: 10px; text-align: center; }
  .steps { max-width: 460px; margin: 0 auto; }

  .boost__track { grid-template-columns: repeat(2, 1fr); }
  .boost-card { aspect-ratio: 4 / 5; }

  .trust__inner { grid-template-columns: repeat(2, 1fr); gap: 22px; }

  .nav__menu { display: none; }
  /* With the centred menu hidden, push the switcher to the far right. */
  .lang-switch { margin-left: auto; }
}

/* In the 2-col band the 5th boost card sat alone at half width, hugging the
   left edge; centre the widow so the row reads intentional. (Above 980 the
   track is 5-up, below 561 it's single-column — both fine as-is.) */
@media (max-width: 980px) and (min-width: 561px) {
  .boost__track > .boost-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 9px);
  }
}


@media (max-width: 560px) {
  .hero__title { font-size: 44px; }
  /* Below ~533px the fixed image floor (320px) outgrew the 60vw top padding,
     so the copy started over the photo. Let the image band scale with the
     width and push the copy fully below it for a clean stacked hero. */
  .hero__media { height: 64vw; min-height: 0; }
  .hero__inner { padding: 68vw 22px 72px; }
  .features__inner { grid-template-columns: repeat(2, 1fr); }
  .boost__track { grid-template-columns: 1fr; max-width: 320px; margin: 0 auto; }
  /* Below ~408px a trust badge row (38px icon + 12px gap + widest label
     ~115px) no longer fits half a column, pushing the page 18px wider than
     the viewport. Stack icon over label so the widest word sets the floor. */
  .trust__item { flex-direction: column; text-align: center; gap: 10px; }
  .nav__inner { padding: 18px 18px; }
  .btn { padding: 16px 22px; font-size: 13px; }
  /* Steps sit 3-up in ~94px columns here; at 16px/0.2em the "2 SPRAYS"
     title broke onto a second line and threw the row off balance. */
  .step__title { font-size: 14px; letter-spacing: 0.16em; }
}

/* Selector de moneda, dentro del menú de idioma (comparten desplegable: en la
   cabecera del móvil no caben dos). El separador marca dónde acaba el idioma. */
.lang-switch__sep {
  height: 1px;
  margin: 6px 0;
  background: rgba(255, 255, 255, .12);
}
.lang-switch__ccy {
  margin-left: 5px;
  padding-left: 6px;
  border-left: 1px solid rgba(255, 255, 255, .18);
  font-weight: 700;
  font-size: .92em;
  color: var(--accent, #c5704d);
}