/* =========================================================
   ЛИЛИ ИВАНОВА 2027 — Early Access landing
   Light · elegant · monochrome with platinum/silver accents
   ========================================================= */

:root {
  --bg:        #f4f3f1;   /* platinum white          */
  --bg-2:      #ffffff;   /* pure white              */
  --bg-3:      #ecebe8;   /* warm grey panel         */
  --ink:       #131313;   /* near-black text         */
  --ink-soft:  #4a4a4a;   /* graphite                */
  --ink-mute:  #8a8782;   /* muted captions          */
  --line:      rgba(0,0,0,0.10);
  --line-soft: rgba(0,0,0,0.06);

  /* metallic silver/platinum accent */
  --silver-1:  #8f8f8f;
  --silver-2:  #e9e9e9;
  --silver-3:  #b8b8b8;
  --silver-grad: linear-gradient(118deg,#2b2b2b 0%,#585858 14%,#8c8c8c 30%,#b9b9b9 42%,#6c6c6c 56%,#939393 70%,#444 86%,#6b6b6b 100%);

  --shadow-sm: 0 2px 10px rgba(0,0,0,0.06);
  --shadow-md: 0 18px 50px -18px rgba(0,0,0,0.30);
  --shadow-lg: 0 40px 90px -30px rgba(0,0,0,0.45);

  --maxw: 1200px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --font-display: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --font-sans: "Inter", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; overscroll-behavior-x: none; }

/* Visually hidden, but available to screen readers / SEO */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  /* Content protection: deter casual copy / long-press save */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Keep form fields fully usable despite the page-wide no-select above */
input, textarea, select, [contenteditable] {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

/* Block image drag-out and long-press image save */
img, svg, video, picture {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none;
  pointer-events: none;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

::selection { background: #1313130f; color: var(--ink); }

/* ---------- Typography helpers ---------- */
.display {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: 0.01em;
}
.eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.42em;
  color: var(--ink-mute);
}
.silver-text {
  position: relative;
  background: var(--silver-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  background-size: 220% auto;
  /* faint dark contour traces each glyph so the engraved metal reads on light bg */
  -webkit-text-stroke: 0.5px rgba(28,28,28,0.4);
  /* engraved depth: bright top highlight + soft dark drop */
  filter:
    drop-shadow(0 1px 0 rgba(255,255,255,0.45))
    drop-shadow(0 1px 1.5px rgba(0,0,0,0.25));
}
/* Firefox lacks -webkit-text-stroke on clipped text — fall back to a paint-order shadow */
@supports (-moz-appearance: none) {
  .silver-text { -webkit-text-stroke: 0; text-shadow: 0 0 1px rgba(28,28,28,0.35), 0 1px 1px rgba(0,0,0,0.25); }
}

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 3rem); }
.section { position: relative; padding: clamp(2.25rem, 5vw, 4.25rem) 0; }
.center { text-align: center; }
.divider {
  width: 64px; height: 1px; margin: 1.5rem auto 0;
  background: linear-gradient(90deg, transparent, var(--silver-1), transparent);
}

/* ---------- Buttons ---------- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  padding: 1.05rem 2.4rem;
  font-family: var(--font-sans);
  font-size: 0.82rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.24em;
  border: none; border-radius: 999px; cursor: pointer;
  overflow: hidden; transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.btn--solid {
  color: #fff;
  background: linear-gradient(135deg,#2a2a2a,#0c0c0c);
  box-shadow: 0 16px 34px -16px rgba(0,0,0,0.55);
}
.btn--solid:hover { transform: translateY(-2px) scale(1.01); box-shadow: 0 22px 44px -16px rgba(0,0,0,0.6); }
.btn--ghost {
  color: var(--ink);
  background: rgba(255,255,255,0.55);
  border: 1px solid var(--line);
  backdrop-filter: blur(8px);
}
.btn--ghost:hover { background: #fff; border-color: rgba(0,0,0,0.2); }
.btn .shimmer {
  position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.45) 50%, transparent 70%);
  transform: translateX(-120%);
}
.btn:hover .shimmer { animation: shimmer 1.1s var(--ease); }
@keyframes shimmer { to { transform: translateX(120%); } }

/* ---------- Header ---------- */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  transition: background .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
  border-bottom: 1px solid transparent;
}
.header__inner {
  max-width: var(--maxw); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem clamp(1.25rem, 4vw, 3rem);
}
.header.is-scrolled {
  background: rgba(244,243,241,0.82);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
  box-shadow: var(--shadow-sm);
}
.brand { display: flex; align-items: baseline; gap: 0.7rem; }
.brand__name {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.35rem; letter-spacing: 0.16em; text-transform: uppercase;
  line-height: 1;
}
.brand__sub {
  font-family: var(--font-display); font-style: italic;
  font-size: 1.08rem; color: var(--ink-mute); letter-spacing: 0.02em;
}
.header .btn { padding: 0.7rem 1.5rem; font-size: 0.7rem; white-space: nowrap; }
@media (max-width: 640px){ .brand__sub { display:none; } }
/* Desktop: span full width so the brand sits at the far left and the button at the far right */
@media (min-width: 880px){ .header__inner { max-width: none; } }

/* ---------- Hero ---------- */
/* =========================================================
   HERO — the exact tour poster (portrait on mobile, landscape on
   desktop). Shown in full; CTA overlaid in the open white space.
   ========================================================= */
.hero--cover {
  position: relative;
  background: var(--bg);
  isolation: isolate;
  overflow: hidden;
  /* Mobile: start the poster below the fixed header so its top text
     isn't hidden behind it (desktop overrides this padding-top). */
  padding-top: 84px;
}
.hero__media { position: relative; width: 100%; line-height: 0; }
.hero__media img { display: block; width: 100%; height: auto; }

/* Mobile: CTA sits below the poster on solid bg — always legible */
.hero__cta {
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(0.8rem, 2.5vw, 1.2rem);
  padding: clamp(1.4rem, 5vw, 2.2rem) 1.25rem clamp(1.8rem, 5vw, 2.6rem);
  text-align: center;
}
.hero__note {
  display:inline-flex; align-items:center; gap:.55rem;
  font-size:.72rem; text-transform:uppercase; letter-spacing:.32em; color:var(--ink-soft);
}
.dot { width:7px; height:7px; border-radius:50%; background: var(--ink); animation: pulse 1.8s infinite; }
@keyframes pulse { 0%,100%{opacity:.35; transform:scale(.8);} 50%{opacity:1; transform:scale(1.1);} }
.scroll-cue { color: var(--ink-soft); display:inline-flex; flex-direction:column; align-items:center; gap:.4rem; background:none; border:none; cursor:pointer; padding:0; }
.scroll-cue span { font-size:.62rem; text-transform:uppercase; letter-spacing:.3em; }
.scroll-cue svg { animation: bob 1.8s var(--ease) infinite; }
@keyframes bob { 0%,100%{transform:translateY(0);} 50%{transform:translateY(5px);} }

/* Mobile: the lightly-extended poster spans the full screen width, flush to
   the left edge with its baked gradient reaching the right edge (same idea as
   desktop, smaller extension). It sits at its natural full-width height right
   under the header, with the CTA directly beneath — any spare space falls at
   the very bottom of the first screen so the button + "Виж повече" stay high
   and visible on entry. */
@media (max-width: 879px) {
  .hero--cover { min-height: 100svh; display: flex; flex-direction: column; }
  .hero__media { flex: 0 0 auto; }
  .hero__media img {
    display: block;
    width: 100%; height: auto;
    /* Soft fade at the top and bottom edges so the poster melts into the
       page background instead of ending on hard horizontal lines. */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 3.5%, #000 96%, transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 3.5%, #000 96%, transparent 100%);
  }
  .hero__cta {
    flex: 0 0 auto;
    gap: 0.6rem;
    padding-top: 1.1rem;
    padding-bottom: 1rem;
  }
}

/* Desktop: the whole landscape poster is scaled to fit one screen
   (below the fixed header) — uncropped, no scroll. The open white space
   on the right holds the CTA, vertically centered over it. */
@media (min-width: 880px) {
  .hero--cover {
    position: relative;
    height: 100svh;
    padding-top: 88px;            /* clear the fixed header */
    box-sizing: border-box;
  }
  .hero__media { position: relative; width: 100%; height: 100%; }
  .hero__media img {
    /* The wide poster carries its own continuous background gradient out
       to the far right; cover fills the screen edge-to-edge and only the
       far-right background is cropped — figure & text stay fully visible. */
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: left center;
    /* Same soft top/bottom edge fade as mobile so the poster melts into the
       page background instead of ending on hard horizontal lines. */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 3.5%, #000 96%, transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 3.5%, #000 96%, transparent 100%);
  }
  .hero__cta {
    position: absolute;
    top: 88px; right: 0; bottom: 0;
    left: 40%;                 /* centre the CTA over the right white space,
                                  nudged toward the middle of the screen */
    justify-content: center;   /* vertical centering */
    align-items: center;       /* horizontal centering of button + texts */
    text-align: center;
    padding: 0 1.5rem;
  }
  .scroll-cue { align-items: center; }
}

/* ---------- Manifesto ---------- */
.manifesto .wrap { max-width: 820px; }
.manifesto h2 { font-size: clamp(1.7rem, 4vw, 2.9rem); margin: 1.2rem 0; }
.manifesto p { color: var(--ink-soft); font-size: 1.12rem; }

/* ---------- Highlights ---------- */
.highlights__grid {
  display: grid; gap: 1rem; margin-top: 3rem;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 860px){ .highlights__grid { grid-template-columns: repeat(4, 1fr); } }
.hl-card {
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  padding: 2rem 1.4rem;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
  box-shadow: var(--shadow-sm);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.hl-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.hl-card__icon {
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--bg-3);
  border: 1px solid var(--line);
  color: var(--ink);
}
.hl-card__num { font-family: var(--font-display); font-size: 2.6rem; line-height: 1; }
.hl-card span.t { font-size: .9rem; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; }
.hl-card small { color: var(--ink-mute); font-size: .82rem; }

/* ---------- Cities ---------- */
.cities { background: var(--bg-2); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.cities__grid {
  display: grid; gap: 1rem; margin-top: 3rem;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 860px){ .cities__grid { grid-template-columns: repeat(4, 1fr); } }
.city {
  position: relative; aspect-ratio: 3/4;
  border-radius: 12px; overflow: hidden;
  background: linear-gradient(160deg,#2a2a2a,#101010);
  border: 1px solid var(--line);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 1.5rem; color: #fff;
  box-shadow: var(--shadow-sm);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.city__img {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  --img-shift: 0%;
  --img-zoom: 1;
  transform: translateY(var(--img-shift)) scale(var(--img-zoom));
  transition: transform .9s var(--ease);
}
/* Sofia: zoom in slightly and lift so the framing sits higher in the card */
.city__img[src*="city-sofia"] { --img-shift: -9%; --img-zoom: 1.2; }
.city:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.city:hover .city__img { --img-zoom: 1.06; }
.city:hover .city__img[src*="city-sofia"] { --img-zoom: 1.26; }
/* dark scrim — keeps the white name legible over the photo */
.city__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 32%, rgba(0,0,0,0.18) 58%, rgba(0,0,0,0.78) 100%);
}
.city > .city__name,
.city > .city__meta { position: relative; z-index: 2; }
.city__name { font-family: var(--font-display); font-size: 2rem; line-height: 1; text-shadow:0 1px 12px rgba(0,0,0,0.6); }
.city__meta { margin-top:.5rem; font-size:.68rem; text-transform:uppercase; letter-spacing:.26em; color:rgba(255,255,255,0.82); text-shadow:0 1px 8px rgba(0,0,0,0.5); }

/* ---------- Marquee ---------- */
.marquee-sec { overflow: hidden; }
.marquee { display: flex; gap: 1rem; white-space: nowrap; width: max-content; }
.marquee.row1 { animation: marq 64s linear infinite; }
.marquee.row2 { animation: marq 76s linear infinite reverse; }
.marquee-track { overflow: hidden; padding: .5rem 0; }
.marquee-track + .marquee-track { margin-top: 1rem; }
@keyframes marq { from { transform: translateX(0);} to { transform: translateX(-50%);} }
.chip {
  display: inline-flex; align-items: center; gap: .8rem;
  padding: .85rem 1.6rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg-2);
  font-family: var(--font-display); font-style: italic; font-size: 1.25rem; color: var(--ink-soft);
}
.chip em { font-style: normal; color: var(--silver-1); font-family: var(--font-sans); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; }

/* ---------- Experience ---------- */
.exp .wrap { max-width: 760px; }
.exp__list { margin: 2.5rem 0 0; padding: 0; list-style: none; }
.exp__list li { display: flex; gap: 1.1rem; align-items: baseline; padding: 1rem 0; border-bottom: 1px solid var(--line-soft); }
.exp__list .n { font-family: var(--font-display); font-size: 1.6rem; color: var(--silver-1); min-width: 2.4rem; }
.exp__list .txt { font-size: 1.15rem; color: var(--ink-soft); line-height: 1.4; }

/* ---------- Parallax band ---------- */
.band {
  position: relative; min-height: 60vh;
  display: grid; place-items: center; text-align: center;
  overflow: hidden;
}
.band__bg {
  position:absolute; inset:0;
  background-image: url('/assets/hero-cover.jpg');
  background-size: cover; background-position: center 22%;
  filter: grayscale(1) contrast(1.05);
}
.band__veil { position:absolute; inset:0; background: linear-gradient(180deg, rgba(244,243,241,0.7), rgba(244,243,241,0.45), rgba(244,243,241,0.85)); }
.band p { position: relative; font-family: var(--font-display); font-style: italic; font-size: clamp(1.8rem,5vw,3.4rem); line-height: 1.25; padding: 0 1.25rem; }
@media (max-width:859px){
  /* iOS can't use background-attachment:fixed, so JS drives a transform parallax.
     Oversize the layer to give it room to drift without exposing edges. */
  .band__bg { top:-14%; height:128%; will-change: transform; }
}
@media (min-width:860px){
  /* Desktop keeps the immersive parallax; the wide landscape crop frames better. */
  .band__bg { background-image: url('/assets/hero-cover-wide.jpg'); background-attachment: fixed; }
}

/* ---------- Listen (Spotify carousel) ---------- */
.listen { padding: clamp(1.75rem, 3.5vw, 3rem) 0; overflow: hidden; }
.listen .eyebrow { margin-bottom: 1.4rem; }
/* coverflow: centered main card, faded neighbours peeking left & right */
.carousel { position: relative; max-width: 760px; margin: 0 auto; padding: 0 1rem; }
.carousel__stage { position: relative; height: 124px; cursor: grab; touch-action: pan-y; overscroll-behavior: contain; }
.carousel__stage:active { cursor: grabbing; }
.carousel__hint {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  margin: 1.1rem auto 0; font-size: 0.66rem; text-transform: uppercase;
  letter-spacing: 0.2em; color: var(--ink-mute); user-select: none;
}
.carousel__hint svg { opacity: 0.7; }
.carousel__stage .player {
  position: absolute; top: 50%; left: 50%;
  width: 330px; margin: 0;
  opacity: 0;                       /* JS lays cards out; avoids a stacked flash */
  transform: translate(-50%, -50%);
  transition: transform .55s var(--ease), opacity .55s var(--ease);
}
.player {
  display: inline-flex; align-items: center; gap: 1.1rem;
  padding: 0.85rem 1.6rem 0.85rem 0.85rem;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow-md);
  text-align: left;
}
.player__btn {
  flex: none;
  width: 56px; height: 56px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; background: linear-gradient(135deg,#2a2a2a,#0c0c0c);
  border: 0; cursor: pointer;
  box-shadow: 0 12px 26px -12px rgba(0,0,0,0.6);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.player__btn:hover { transform: scale(1.05); box-shadow: 0 16px 32px -12px rgba(0,0,0,0.65); }
.player__btn:active { transform: scale(0.97); }
.player__btn:focus-visible { outline: 2px solid var(--silver-1); outline-offset: 3px; }
.player__ic { display: block; transform: translateX(1px); }      /* nudge play triangle optically centered */
.player__ic--pause { display: none; transform: none; }
.player.is-playing .player__ic--play { display: none; }
.player.is-playing .player__ic--pause { display: block; }
.player__meta { display: inline-flex; flex-direction: column; line-height: 1.2; }
.player__title { font-size: 1.35rem; font-weight: 600; letter-spacing: 0.02em; }
.player__sub { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--ink-mute); margin-top: 0.18rem; }
/* soundwave — still bars at rest, animated while playing */
.wave { display: inline-flex; align-items: center; gap: 3px; height: 30px; margin-left: 0.2rem; }
.wave span {
  width: 3px; height: 22%; border-radius: 2px;
  background: var(--silver-grad); background-size: 100% 220%;
  transform-origin: center; will-change: transform;
}
.player.is-playing .wave span { animation: sndwave 0.9s ease-in-out infinite; }
.wave span:nth-child(1){ animation-delay: -0.9s; }
.wave span:nth-child(2){ animation-delay: -0.5s; }
.wave span:nth-child(3){ animation-delay: -0.2s; }
.wave span:nth-child(4){ animation-delay: -0.7s; }
.wave span:nth-child(5){ animation-delay: -0.35s; }
.wave span:nth-child(6){ animation-delay: -0.6s; }
.wave span:nth-child(7){ animation-delay: -0.15s; }
@keyframes sndwave { 0%,100%{ transform: scaleY(0.35); } 50%{ transform: scaleY(3.2); } }
/* Hidden audio engine — kept ON-SCREEN (centered in the section) but invisible.
   Parking it off-screen makes desktop Chrome throttle the iframe so playback
   never starts; keeping it within the viewport avoids that. */
.sp-engine {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 300px; height: 80px;
  opacity: 0.001; pointer-events: none;
  z-index: -1;
}
@media (prefers-reduced-motion: reduce){
  .player.is-playing .wave span { animation: none; }
}
@media (max-width: 640px){
  .carousel { padding: 0; }
  .carousel__stage { height: 104px; }
  .carousel__stage .player { width: min(72vw, 300px); }
}
@media (max-width: 520px){
  .carousel__stage .player { width: 70vw; }
  .player { gap: 0.55rem; padding: 0.45rem 0.95rem 0.45rem 0.45rem; }
  .player__btn { width: 44px; height: 44px; }
  .player__ic { width: 18px; height: 18px; }
  .player__title { font-size: 0.98rem; }
  .player__sub { letter-spacing: 0.1em; font-size: 0.62rem; white-space: nowrap; }
  .wave { margin-left: 0; height: 24px; gap: 2px; }
  .wave span { width: 2.5px; }
}

/* ---------- Signup ---------- */
.signup { background: linear-gradient(180deg, var(--bg-2), var(--bg)); }
.signup .wrap { max-width: 620px; }
.signup h2 { font-size: clamp(2rem, 5vw, 3.4rem); margin: 1rem 0; }
.signup .lead { color: var(--ink-soft); font-size: 1.1rem; }
.form {
  margin-top: 2.5rem; display: flex; flex-direction: column; gap: .9rem; text-align: left;
}
.field input[type=text], .field input[type=email]{
  width: 100%; padding: 1.05rem 1.2rem;
  font-size: 1.05rem; font-family: var(--font-sans); color: var(--ink);
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.field input:focus { outline: none; border-color: #131313; box-shadow: 0 0 0 4px rgba(0,0,0,0.05); }
.field--hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.consent {
  display: flex; gap: .7rem; align-items: flex-start;
  font-size: .82rem; color: var(--ink-mute); line-height: 1.45; margin-top: .2rem;
}
.consent input { margin-top: .25rem; width: 16px; height: 16px; accent-color: #131313; flex-shrink: 0; }
.consent a { text-decoration: underline; }
.form .btn { width: 100%; margin-top: .6rem; padding: 1.2rem; font-size: .9rem; }
.form__msg { font-size: .9rem; margin-top: .4rem; min-height: 1.2em; }
.form__msg.ok { color: #1d7a3f; }
.form__msg.err { color: #b23b3b; }
.form__fine { text-align:center; font-size:.74rem; color:var(--ink-mute); letter-spacing:.06em; margin-top:.4rem; }
.signup__success {
  margin-top: 2.5rem; padding: 2.4rem 1.6rem; border:1px solid var(--line);
  border-radius: 14px; background: var(--bg-2); box-shadow: var(--shadow-md);
}
.signup__success .check { width:56px;height:56px;border-radius:50%;display:grid;place-items:center;margin:0 auto 1rem;background:var(--bg-3);border:1px solid var(--line); }
.signup__success h3 { font-family:var(--font-display); font-size:1.8rem; margin:0 0 .5rem; }
.signup__success p { color:var(--ink-soft); margin:0; }
.hidden { display:none !important; }

/* ---------- Merch ---------- */
.merch { background: var(--bg-3); }
.merch__grid {
  display: grid; gap: 1.2rem; margin-top: 3rem;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 720px){ .merch__grid { grid-template-columns: repeat(3, 1fr); } }
/* Mobile: show only the first 4 products (desktop keeps all 6) */
@media (max-width: 719px){ .merch__grid .product:nth-child(n+5){ display: none; } }
.product {
  background: var(--bg-2); border: 1px solid var(--line-soft); border-radius: 12px;
  overflow: hidden; display: flex; flex-direction: column;
  box-shadow: var(--shadow-sm); transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.product:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.product__img { aspect-ratio: 1/1; background: #fff; overflow: hidden; }
.product__img img { width: 100%; height: 100%; object-fit: contain; padding: .6rem; transition: transform .6s var(--ease); }
.product:hover .product__img img { transform: scale(1.04); }
.product__body { padding: 1rem 1.1rem 1.3rem; display:flex; flex-direction:column; gap:.5rem; flex:1; }
.product__title { font-size: .92rem; font-weight: 600; line-height: 1.3; min-height: 2.4em; }
.product__price { font-family: var(--font-display); font-size: 1.25rem; }
.product__price small { color: var(--ink-mute); font-size:.78rem; font-family:var(--font-sans); }
.product__btn { margin-top:auto; font-size:.7rem; text-transform:uppercase; letter-spacing:.2em; font-weight:700; color:var(--ink); display:inline-flex; align-items:center; gap:.4rem; }
.product__btn::after { content:"→"; transition: transform .3s var(--ease); }
.product:hover .product__btn::after { transform: translateX(4px); }
.merch__more { margin-top: 2.6rem; }

/* ---------- Footer ---------- */
.footer { background: var(--ink); color: #cfcfcf; padding: 4rem 0 2.5rem; }
.footer .wrap { display:flex; flex-direction:column; align-items:center; gap:1.2rem; text-align:center; }
.footer .brand__name { color:#fff; }
.footer .brand__sub { color:#9a9a9a; }
.footer__socials { display:flex; gap:1.4rem; margin-top:.4rem; }
.footer__socials a { color:#bdbdbd; transition: color .3s var(--ease); }
.footer__socials a:hover { color:#fff; }
.footer__links { display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; justify-content:center; font-size:.7rem; text-transform:uppercase; letter-spacing:.2em; color:#9a9a9a; }
.footer__links a:hover { color:#fff; }
.footer__partners { display:flex; flex-direction:column; align-items:center; gap:1rem; margin-top:.6rem; }
.footer__partners-label { font-size:.62rem; text-transform:uppercase; letter-spacing:.26em; color:#7a7a7a; }
.footer__partners-logos { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:2.4rem; }
/* Force both partner marks to a uniform white silhouette regardless of source colours. */
.footer__partners-logos img { height:30px; width:auto; filter:brightness(0) invert(1); opacity:.78; transition:opacity .3s var(--ease); }
.footer__partners-logos img:hover { opacity:1; }
.footer__copy { font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:#7a7a7a; margin-top:.6rem; }
.footer__signature { font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:#9a9a9a; margin-top:.4rem; }
.footer__signature a { color:inherit; text-decoration:none; border-bottom:1px solid transparent; transition:color .3s var(--ease), border-color .3s var(--ease); }
.footer__signature a:hover { color:#e6e6e6; border-bottom-color:currentColor; }

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-d="1"]{ transition-delay:.08s; }
.reveal[data-d="2"]{ transition-delay:.16s; }
.reveal[data-d="3"]{ transition-delay:.24s; }
.reveal[data-d="4"]{ transition-delay:.32s; }

@media (prefers-reduced-motion: reduce){
  * { animation: none !important; scroll-behavior: auto !important; }
  .reveal { opacity:1 !important; transform:none !important; }
}