/* GlorySmile — home page (index.html), "V34 Night".
   Sections: hero (halo ignition) · marquee · the five (sticky stack) · ritual steps · #GlorySmile reviews · Glory Kit · facts.
   Bands: hero + marquee on --base · the five use full-width violet scenes, LED in blue · ritual in a glass world, reviews on frosted glass ·
   Glory Kit in its own product scene, facts + footer in one halo-lit room. Stacked sheets keep their violet rim.
   Shared components are only overridden under body[data-page='home']. */

body[data-page='home'] {
  --stack-r: clamp(28px, 4vw, 56px);                 /* rounded top of every stacking surface */
  --panel-h: calc(100svh - var(--header-h));
  --rim: inset 0 1px 0 rgba(169, 139, 255, 0.3);    /* the lit top edge of a sheet */
}

/* =========================================================
   1. Hero
   ========================================================= */
/* The hero is a size container. --s is the photo's scale, so the photo box, the CSS halo, the reveal
   circle and the wordmark mask can all be placed in the photo's own pixel space (source px below).
   The units resolve where the vars are used: inside the stage against the stage, in the title against the hero.
   --s is the cover scale, with two limits so the five products and the wordmark always share the screen:
   - wide, short screens (laptops, 1920 × 900): the photo is at most 112% of the screen height, so the products
     never grow up into the wordmark; the scene continues sideways in .hero__stage::before;
   - narrow landscape windows (768 × 900): the five (source x 278–1280) always fit the width, nothing cut at the edges. */
.hero {
  --iw: 1536; --ih: 1024;            /* hero.webp */
  --rx: 760; --ry: 425; --rr: 392;   /* the photo's own halo ring: centre + radius (circle fit on the ring pixels) */
  --ox: 0.5; --oy: 0.85;             /* where a photo larger than the stage is cropped: the sky, never the products above the bar */
  --uy: 0.45;                        /* where a photo shorter than the stage sits */
  --s: min(max(100cqw / var(--iw), 100cqh / var(--ih)), 100cqw / 1100, 112cqh / var(--ih));
  --ix: calc((100cqw - var(--iw) * var(--s)) * var(--ox));   /* photo offset inside the stage */
  --iy: calc(max(0px, 100cqh - var(--ih) * var(--s)) * var(--uy) + min(0px, 100cqh - var(--ih) * var(--s)) * var(--oy));
  --cx: calc(var(--ix) + var(--rx) * var(--s));
  --cy: calc(var(--iy) + var(--ry) * var(--s));
  --r: calc(var(--rr) * var(--s));
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  height: max(100svh, 640px);        /* explicit height, not min-height: Chromium resolves cqh to 0 on a size container sized only by min-height */
  background: var(--base);
  overflow: clip;
  isolation: isolate;
  container-type: size;
}
.hero__stage {
  grid-area: 1 / 1 / 4 / 2;
  position: relative;
  z-index: -1;
  container-type: size;
}
/* Where the stage is wider or taller than the photo, the room goes on: the photo's own edge light, row by row
   (night sky, the haze, the lit floor), in source px, then the same calm base under the actions as the photo. */
.hero__stage::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(22, 11, 62, 0) calc(100% - 13rem), var(--base) calc(100% - 1.5rem)),
    linear-gradient(to bottom,
      #0b0233 calc(var(--iy) + 260 * var(--s)),
      #10023f calc(var(--iy) + 330 * var(--s)),
      #160355 calc(var(--iy) + 420 * var(--s)),
      #25067f calc(var(--iy) + 480 * var(--s)),
      #3a0bb0 calc(var(--iy) + 560 * var(--s)),
      #330b9c calc(var(--iy) + 660 * var(--s)),
      #5a1bd4 calc(var(--iy) + 770 * var(--s)),
      #5418bb calc(var(--iy) + 840 * var(--s)),
      #250676 calc(var(--iy) + 900 * var(--s)),
      #0d0237 calc(var(--iy) + 1000 * var(--s)));
}
.hero__img {
  --fx: clamp(0px, var(--ix) * 1.6, 260px);   /* side fade: only where the stage is wider than the photo */
  --fy: clamp(0px, var(--iy) * 1.6, 200px);   /* top fade: only where the stage is taller than the photo */
  /* the reveal circle is drawn in the image's own box */
  --cx: calc(var(--rx) * var(--s));
  --cy: calc(var(--ry) * var(--s));
  position: absolute;
  left: var(--ix); top: var(--iy);
  width: calc(var(--iw) * var(--s)); height: calc(var(--ih) * var(--s));
  max-width: none;
  /* the edges melt into the room; the floor dissolves into the page violet at the stage bottom (100cqh − top)
     or at its own bottom edge, whichever comes first, so the line + actions sit on a calm base */
  -webkit-mask-image:
    linear-gradient(to right, transparent, #000 var(--fx), #000 calc(100% - var(--fx)), transparent),
    linear-gradient(to bottom, transparent, #000 var(--fy), #000 min(100cqh - var(--iy) - 13rem, 100% - 10rem), transparent min(100cqh - var(--iy) - 1.5rem, 100%));
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(to right, transparent, #000 var(--fx), #000 calc(100% - var(--fx)), transparent),
    linear-gradient(to bottom, transparent, #000 var(--fy), #000 min(100cqh - var(--iy) - 13rem, 100% - 10rem), transparent min(100cqh - var(--iy) - 1.5rem, 100%));
          mask-composite: intersect;
}
.hero__halo {
  --size: calc(2 * var(--r));
  --ring: 4px;
  position: absolute;
  left: calc(var(--cx) - var(--r));
  top: calc(var(--cy) - var(--r));
  opacity: 0;                        /* only lives inside the ignition; the photo carries its own ring */
  filter: drop-shadow(0 0 4px rgba(230, 214, 255, 1)) drop-shadow(0 0 18px rgba(207, 226, 255, 1)) drop-shadow(0 0 22px rgba(108, 59, 255, 0.6));
}

/* Wordmark: "Glory", edge to edge, in the light of the ring */
.hero__title {
  grid-area: 1 / 1;
  padding-top: calc(var(--header-h) + clamp(0.25rem, 1.2vh, 1rem));
  font-size: var(--t-m);
}
/* Landscape screens: the wordmark passes BEHIND the products, magazine-masthead style. The mask is the product
   silhouette traced from hero-v2.webp (hand-measured boxes in source px, evenodd: strips box + sachet, PAP+ carton,
   tube, corrector, bamboo carton, brush, LED unit, LED carton), laid over the title in exactly the photo's
   cover geometry. A new hero photo needs a new trace. */
@media (min-width: 701px) and (min-aspect-ratio: 801/1000) {
  .hero__title {
    --wm-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1536 1024'%3E%3Cfilter id='f'%3E%3CfeGaussianBlur stdDeviation='1.5'/%3E%3C/filter%3E%3Cpath fill-rule='evenodd' filter='url(%23f)' d='M0 0H1536V1024H0ZM279 510 484 510 484 637 567 637 567 880 279 880ZM563 372 651 372 651 880 563 880ZM655 386 742 386 742 880 655 880ZM765 498 815 498 815 582 846 582 846 880 748 880 748 582 765 582ZM861 377 968 377 968 880 861 880ZM969 438 1010 438 1010 880 969 880ZM1024 622 1171 622 1171 880 1024 880ZM1172 458 1381 458 1381 880 1172 880Z'/%3E%3C/svg%3E");
    -webkit-mask-image: var(--wm-mask);
            mask-image: var(--wm-mask);
    -webkit-mask-size: calc(var(--iw) * var(--s)) calc(var(--ih) * var(--s));
            mask-size: calc(var(--iw) * var(--s)) calc(var(--ih) * var(--s));
    -webkit-mask-position: var(--ix) var(--iy);
            mask-position: var(--ix) var(--iy);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
  }
}
.hero__word {
  /* The wordmark is an image: "Glory" in liquid iridescent glass (Codex, raw/jobs/glory; black keyed to alpha by cut.py),
     ratio 2.317 incl. its glow. Edge to edge between the gutters, capped by height so wide screens keep the photo readable. */
  display: block;
  width: min(100cqw - 2 * var(--gutter), 60cqh * 2.317);
  margin: 0 auto;
  overflow: clip;                    /* the rise mask of the ignition */
}
.hero__wordimg {
  display: block; width: 100%; height: auto;
  filter: drop-shadow(0 0.4vw 1.6vw rgba(10, 6, 32, 0.45));   /* lifts the glass off the brightest arc of the ring */
}


/* Bottom bar: one line + the two actions */
.hero__bar {
  grid-area: 3 / 1;
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 1.25rem 2rem;
  padding-block: 1.5rem clamp(1.5rem, 4.5vh, 3rem);
}
/* The line: "Бяла усмивка." in pearl, "У дома." lit in the wordmark's iridescent glass (light halo hues, AA on violet).
   Desktop: one line on the left, the button on the right. Phones: two centred lines over the button. */
.hero__line {
  font-family: var(--f-display); font-weight: 300;
  font-size: clamp(1.75rem, 1.1rem + 1.9vw, 3.25rem);
  letter-spacing: -0.04em; line-height: 1.04;
  text-wrap: balance;
}
.hero__line-a { text-shadow: 0 2px 24px rgba(10, 6, 32, 0.7); }
.hero__line-b {
  background: linear-gradient(100deg, #FFB8E8 0%, #D2BBFF 22%, #A9D0FF 44%, #B2FFE6 62%, #FFE9B8 78%, #FFB8E8 100%) 0 0 / 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: gs-sheen 9s linear infinite;   /* the light slowly travels through the glass */
  filter: drop-shadow(0 2px 18px rgba(10, 6, 32, 0.65)) drop-shadow(0 0 22px rgba(169, 139, 255, 0.35));
  white-space: nowrap;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* One quiet action per block: frosted glass, a hairline rim, no glow, so the scene stays the star.
   Hover fills it with pearl. */
.btn--quiet {
  --bg: rgba(245, 241, 255, 0.1); --fg: var(--text);
  border: 1px solid rgba(245, 241, 255, 0.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  font-weight: 500; letter-spacing: 0.01em; text-shadow: none;
}
.btn--quiet:hover { --bg: var(--text); --fg: var(--base); border-color: var(--text); }
.btn--quiet.is-added { --bg: var(--text); --fg: var(--base); }

/* Halo ignition — home only, ~1.6s. home.js adds .is-lit once the photo is decoded (1.2s safety).
   Hidden start states exist only with JS and only when motion is welcome. */
@media (prefers-reduced-motion: no-preference) {
  .js .hero:not(.is-lit) .hero__img, .js .hero:not(.is-lit) .hero__stage::before { opacity: 0; }
  .js .hero:not(.is-lit) .hero__wordimg { opacity: 0; transform: translateY(18%) scale(0.96); }
  .js .hero:not(.is-lit) .hero__bar { opacity: 0; }

  .hero.is-lit .hero__halo { animation: gs-halo 1.6s var(--ease) both; }
  .hero.is-lit .hero__img { animation: gs-reveal 1.15s 0.2s both; }   /* early start: the photo is the LCP */
  .hero.is-lit .hero__stage::before { animation: gs-fade 0.9s 0.55s ease-out both; }   /* the room lights as the reveal opens */
  .hero.is-lit .hero__wordimg { animation: gs-word 1.1s 0.8s var(--ease) both; }
  .hero.is-lit .hero__bar { animation: gs-fade 0.7s 1.2s ease-out both; }
}
/* the ring lights, holds while the photo fills it, then hands over to the photo's own ring as the reveal opens */
@keyframes gs-halo {
  0% { opacity: 0; transform: scale(0.55); }
  28% { opacity: 1; transform: scale(1); }
  42% { opacity: 1; transform: scale(1); }
  60% { opacity: 0; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}
@keyframes gs-reveal {
  0% { opacity: 0; clip-path: circle(var(--r) at var(--cx) var(--cy)); animation-timing-function: ease-out; }
  14% { opacity: 1; clip-path: circle(var(--r) at var(--cx) var(--cy)); animation-timing-function: cubic-bezier(0.65, 0, 0.2, 1); }
  100% { opacity: 1; clip-path: circle(calc(100cqw + 100cqh) at var(--cx) var(--cy)); }
}
@keyframes gs-word { from { opacity: 0; transform: translateY(18%) scale(0.96); filter: blur(10px); } to { opacity: 1; transform: none; filter: drop-shadow(0 0.4vw 1.6vw rgba(10, 6, 32, 0.45)); } }
@keyframes gs-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes gs-sheen { to { background-position: -200% 0; } }
/* Endless loops rest while their block is off screen (home.js sets .is-off): nothing changes on screen,
   but the browser stops repainting text sheens, orbs and the marquee nobody can see */
.hero.is-off .hero__line-b, .marquee.is-off .marquee__track,
.reviews.is-off .reviews__title, .reviews.is-off .reviews__orbs span, .reviews.is-off .reviews__kicker .halo-dot,
.reviews.is-off .reviews__lane { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .hero__line-b { animation: none; } }

/* Phones and portrait screens get hero-m.webp (same media as the <source> and the preload):
   its dark upper third holds the wordmark, the ring frames the products below it.
   The photo always fits the WIDTH (all five products stay whole, nothing cut at the screen edges):
   on a tall stage it sits on the bottom and its night sky continues up behind the header;
   on a short stage the surplus is cropped mostly from the floor (it fades out under the actions), so the
   products stay low, below the wordmark. */
@media (max-width: 700px), (max-aspect-ratio: 4/5) {
  .hero {
    --iw: 1024; --ih: 1536;          /* hero-m.webp */
    --rx: 525; --ry: 772; --rr: 395;
    --s: calc(100cqw / var(--iw));
    --ix: 0px;
    --iy: calc(max(0px, 100cqh - var(--ih) * var(--s)) + min(0px, 100cqh - var(--ih) * var(--s)) * 0.2);
  }
  .hero__stage { grid-area: 1 / 1 / 3 / 2; }   /* the photo ends where the actions begin */
  /* the wordmark never reaches the products: its bottom stays above the tallest box (PAP+ carton, source y 540 in
     hero-m-v2.webp); on phones that is the full width, on portrait tablets it steps down */
  .hero__word { width: min(100cqw - 2 * var(--gutter), (var(--iy) + 540 * var(--s) - var(--header-h) - 1.5rem) * 2.317); }
  /* where a short stage lets the floor reach under the actions, a night veil keeps the line and buttons on calm violet */
  .hero::after {
    content: ''; grid-area: 3 / 1; z-index: -1; margin-top: -4.5rem; pointer-events: none;
    background: linear-gradient(to bottom, rgba(22, 11, 62, 0), rgba(22, 11, 62, 0.8) 4.5rem, rgba(22, 11, 62, 0.94));
  }
  .hero__stage::before { display: none; }   /* the photo always spans the width; above it, the page violet */
  .hero__img {
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 9%, #000 82%, transparent);
            mask-image: linear-gradient(to bottom, transparent, #000 9%, #000 82%, transparent);
  }
}
@media (max-width: 700px) {
  .hero__bar { flex-direction: column; align-items: stretch; gap: 1rem; padding-top: 0.5rem; }
  .hero__bar { align-items: center; text-align: center; gap: 1.35rem; }
  .hero__line { display: grid; justify-items: center; font-size: clamp(2rem, 9.4vw, 2.75rem); line-height: 1.02; }
  .hero__line-a, .hero__line-b { display: block; }
  .hero__cta { display: flex; }
}

/* =========================================================
   2. Marquee — exact seamless loop: no track gap, each group carries its own trailing space
   ========================================================= */
body[data-page='home'] .marquee { background: var(--base); padding-block: 0.85rem; }
body[data-page='home'] .marquee__track { gap: 0; }
body[data-page='home'] .marquee__item { padding-right: 2.5rem; font-size: clamp(1.5rem, 2.1vw + 0.75rem, 2.25rem); }
body[data-page='home'] .marquee .halo-dot { box-shadow: 0 0 12px rgba(199, 168, 255, 0.85); }

/* =========================================================
   3. The five — sticky stacking sheets, one violet room per product
   ========================================================= */
.five { position: relative; overflow-x: clip; }   /* clip (not hidden): the stack stays sticky */
.panel {
  --panel-bg: var(--base-2);
  --light: 108, 59, 255;
  --scene-position: 0%;   /* the product's edge of the wide scene: product left, the outpainted room under the text */
  --shade-direction: 90deg;
  --pad: clamp(1.5rem, 4.5vh, 3.25rem);
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: var(--panel-bg);
  border-radius: var(--stack-r) var(--stack-r) 0 0;
  box-shadow: var(--rim), 0 -26px 60px -30px rgba(5, 2, 18, 0.95);
}
.panel + .panel { margin-top: calc(-1 * var(--stack-r)); }
.panel:nth-child(even) { --panel-bg: var(--base); --light: 140, 96, 255; }
.panel--dark { --panel-bg: var(--night); --light: 61, 139, 255; color: var(--text); box-shadow: inset 0 1px 0 rgba(61, 139, 255, 0.4), 0 -26px 60px -30px rgba(5, 2, 18, 0.95); }
.panel--flip { --scene-position: 100%; --shade-direction: 270deg; }

/* The photographed room fills the sheet; only the text side gets a soft shade.
   Desktop scenes are wide (2.68 : 1, home-<id>-scene-wide.webp): the real photo on the product side, the room
   continued under the text, a strip of reflection at the bottom for the next sheet's rounded top to cover.
   Desktop panels are narrower than that, so cover fits the HEIGHT and the products are never cut at the top or
   bottom; only the continued room is trimmed at the text edge (ultra-wide screens trim the reflection first: top). */
.panel__scene { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.panel__scene img { width: 100%; height: 100%; object-fit: cover; object-position: var(--scene-position) top; }
.panel::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(var(--shade-direction), transparent 30%, rgba(10, 6, 32, 0.18) 50%, rgba(10, 6, 32, 0.62));
}

.panel__in {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(2rem, 7vw, 8rem);
  min-height: max(620px, calc(var(--panel-h) + var(--stack-r)));
  padding-block: var(--pad) calc(var(--pad) + var(--stack-r) * 0.5);
}

/* Name, line, then price + actions in the scene's quiet half. */
.panel__body {
  grid-column: 2;
  container-type: inline-size;
  display: flex; flex-direction: column; justify-content: center;
  padding-block: clamp(0.5rem, 3vh, 2.5rem) calc(var(--stack-r) * 0.5);
  text-shadow: 0 2px 24px rgba(10, 6, 32, 0.75);
}
.panel--flip .panel__body { grid-column: 1; }
.panel__name {
  font-size: min(var(--t-3xl), 15.6cqi);
  font-weight: 300;
  letter-spacing: -0.045em;
  line-height: 0.95;
}
.panel__tag {
  margin-top: clamp(1rem, 2.5vh, 1.75rem);
  font-size: var(--t-l); line-height: 1.4; color: var(--text-2);
}
.panel__buy {
  display: grid; gap: 1.25rem; justify-items: start;
  width: min(100%, 34rem);
  margin-top: clamp(1.75rem, 5vh, 3.5rem);
  padding-top: clamp(1.25rem, 3vh, 2rem);
  border-top: 1px solid rgba(169, 139, 255, 0.22);
}
.panel__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 1rem; max-width: none; }
.panel__price > .price, .panel__price .offer { font-size: var(--t-xl); line-height: 1; }
.panel__spec { font-size: var(--t-m); color: var(--text-2); }
.panel__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.panel__name a { color: inherit; text-decoration: none; }
.panel__name a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.12em; }

/* LED: the one dark room, lit blue */
.panel--dark .panel__buy { border-top-color: rgba(61, 139, 255, 0.3); }
.panel--dark .panel__price .price { color: #8DB8FF; }   /* LED blue, lifted for text: 9:1 on --night */
.panel--dark .btn--quiet { border-color: rgba(141, 184, 255, 0.5); }

/* Desktop: the stack. Panels pin under the header and each new one slides over the last. */
@media (min-width: 821px) and (min-height: 560px) {
  .panel { position: sticky; top: var(--sticky-top); }
}
/* Tablets: a lower sheet keeps the scene (fitted to the height) small enough for the product to stay in its half. */
@media (min-width: 821px) and (max-width: 1100px) {
  .panel__in { min-height: max(520px, 56vw); }
}

/* Portrait scenes put the product above the copy on phones and tablets. */
@media (max-width: 820px) {
  .panel__scene img { object-position: center top; }
  .panel::before { background: linear-gradient(to bottom, transparent 35%, rgba(10, 6, 32, 0.15) 52%, rgba(10, 6, 32, 0.65)); }
  .panel__in {
    display: flex; align-items: flex-end;
    min-height: max(820px, calc(var(--panel-h) + var(--stack-r)), 165vw);
    padding-block: 2rem calc(2.25rem + var(--stack-r));
  }
  .panel__body { width: 100%; padding: 0; }
  .panel__name { font-size: min(var(--t-3xl), 16.5cqi); }
}

/* A narrow text column: the single quiet button keeps comfortable side padding. */
@container (max-width: 26rem) {
  .panel__actions .btn { padding-inline: 1.5rem; }
}

/* Phones: compact copy below the product. */
@media (max-width: 599px) {
  .panel__tag { margin-top: 0.75rem; font-size: var(--t-m); }
  .panel__buy { width: 100%; gap: 1rem; margin-top: 1.5rem; padding-top: 1.25rem; }
}

/* =========================================================
   4. Ritual — three lit circles on one thread
   ========================================================= */
.home-scene { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.home-scene img { width: 100%; height: 100%; object-fit: cover; }
.steps::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(10, 6, 32, 0.58), rgba(10, 6, 32, 0.3) 55%, rgba(10, 6, 32, 0.52));
}
.steps::before { background: linear-gradient(to bottom, rgba(10, 6, 32, 0.58), rgba(10, 6, 32, 0.67) 55%, rgba(10, 6, 32, 0.7)); }
.steps {
  --band: var(--base-2);
  --c: clamp(200px, 24vw, 360px);    /* circle size */
  --cut: clamp(10px, 1.2vw, 16px);   /* inset of the circles from the connecting thread */
  position: relative;
  isolation: isolate;
  overflow: clip;
  margin-top: calc(-1 * var(--stack-r));
  padding-block: calc(var(--section) * 0.8) calc(var(--section) * 0.75);
  background: var(--band);
  border-radius: var(--stack-r) var(--stack-r) 0 0;
  box-shadow: var(--rim);
}
.steps__head {
  display: grid; justify-items: start;
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-bottom: clamp(3rem, 7vw, 6.5rem);
}
.steps__title { font-size: var(--t-2xl); max-width: 14ch; }
.steps__sub { max-width: 34ch; color: var(--text); font-size: var(--t-l); line-height: 1.4; text-wrap: balance; text-shadow: 0 2px 16px rgba(10, 6, 32, 0.8); }
.steps__list {
  position: relative;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 5rem);
  list-style: none; padding: 0;
}
.steps__list::before {             /* the thread through the circle centres: a line of light */
  content: ''; position: absolute;
  left: calc(100% / 6); right: calc(100% / 6); top: calc(var(--c) / 2);
  height: 1px;
  background: linear-gradient(90deg, rgba(169, 139, 255, 0.2), rgba(199, 168, 255, 0.75) 50%, rgba(169, 139, 255, 0.2));
  box-shadow: 0 0 14px rgba(169, 139, 255, 0.7);
}
.step { position: relative; display: grid; justify-items: center; align-content: start; gap: clamp(1.25rem, 2.5vw, 2rem); text-align: center; }
.step__img {
  width: var(--c); background: var(--night);
  box-shadow: 0 0 0 1px rgba(220, 207, 255, 0.55), 0 40px 90px -30px rgba(108, 59, 255, 0.85);
}
.step__img img { transition: transform 0.9s var(--ease); }
.step:hover .step__img img { transform: scale(1.04); }
/* step__text is the word's container: the longest word ("Поддържай" ≈ 6.9em) + its number always fit the column */
.step__text { container-type: inline-size; justify-self: stretch; display: grid; justify-items: center; gap: 0.6rem; }
.step__word {
  display: inline-flex; align-items: center; gap: 0.85rem;
  font-size: min(var(--t-xl), calc((100cqi - 3.35rem) / 7.2));   /* 3.35rem = number + gap */
  letter-spacing: -0.035em;
}
.step__num {
  display: inline-grid; place-items: center; flex: none;
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  border: 1.5px solid var(--violet-hi); color: var(--text);
  box-shadow: 0 0 16px -2px rgba(169, 139, 255, 0.6), inset 0 0 12px -4px rgba(169, 139, 255, 0.6);
  font-family: var(--f-text); font-size: var(--t-s); font-weight: 600; letter-spacing: 0; line-height: 1;
}
.step__text p { color: var(--text); max-width: 34ch; text-wrap: balance; text-shadow: 0 2px 16px rgba(10, 6, 32, 0.8); }   /* one line where the column allows, else two even lines */
/* the products of each step: quiet text links (name + today's price), so the circles stay the heroes */
.step__img { display: block; }
.step { grid-template-rows: auto 1fr; }
.step__text { grid-template-rows: auto auto 1fr; }
.step__picks { align-self: end; }
.step__picks { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 1rem; list-style: none; padding: 0; margin: 0; }
.step__pick {
  display: inline-flex; align-items: center; gap: 0.45em; min-height: 44px;
  color: var(--text); font-size: var(--t-s); font-weight: 600; text-decoration: none;
  text-shadow: 0 2px 16px rgba(10, 6, 32, 0.8);
}
.step__pick-name { text-decoration: underline; text-decoration-color: rgba(199, 168, 255, 0.55); text-underline-offset: 0.3em; }   /* only the name is underlined: name + price read as one link */
.step__pick .price { font-weight: 400; color: var(--lilac); }
.step__pick:hover .step__pick-name { text-decoration-color: currentColor; }
.step__or { color: var(--text-2); font-size: var(--t-s); }


@media (max-width: 820px) {
  .steps { --c: clamp(120px, 35vw, 220px); --cut: 10px; }
  .steps__list { grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 8vw, 3rem); }
  .steps__list::before {
    left: calc(var(--cut) + var(--c) / 2); right: auto; top: calc(var(--c) / 2); bottom: calc(var(--c) / 2); width: 1px; height: auto;
    background: linear-gradient(180deg, rgba(169, 139, 255, 0.2), rgba(199, 168, 255, 0.75) 50%, rgba(169, 139, 255, 0.2));
  }
  /* the circles step in from the gutter to leave room for the light thread */
  .step { grid-template-columns: calc(var(--c) + var(--cut)) minmax(0, 1fr); align-items: center; justify-items: start; text-align: left; gap: 1.25rem; }
  .step__img { justify-self: end; }
  .step__text { justify-items: start; min-width: 0; }
  .step__word { flex-direction: column; align-items: flex-start; gap: 0.6rem; font-size: min(var(--t-xl), calc(100cqi / 7.2)); }   /* number above */
  .step__num { width: 2.25rem; height: 2.25rem; }
  .step { grid-template-rows: none; }
  .step__text { grid-template-rows: none; }
  .step__picks { align-self: auto; justify-content: flex-start; gap: 0 0.75rem; }
}

/* =========================================================
   5. #GlorySmile — customer reviews on frosted glass
   The glass scene is blurred into a soft colour field, three halo orbs drift through it.
   Wide screens: three lanes of cards drift up/down forever (the lane holds two copies → -50% loop).
   Phones: one swipe deck, the centred card is lit, the others step back (--d set by home.js).
   ========================================================= */
@property --ring { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

.reviews {
  --band: var(--base-2);
  --card-r: 30px;
  --glass: linear-gradient(155deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05) 45%, rgba(169, 139, 255, 0.08));
  position: relative;
  isolation: isolate;
  overflow: clip;
  margin-top: calc(-1 * var(--stack-r));
  background: var(--band);
  padding-block: calc(var(--section) * 0.7) calc(var(--section) * 0.55 + var(--stack-r));
  border-radius: var(--stack-r) var(--stack-r) 0 0;
  box-shadow: var(--rim);
}
.reviews__scene img { transform: scale(1.18); }   /* the blur + saturation are baked into home-look-scene*-blur.webp */
.reviews::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(10, 6, 32, 0.15), transparent 60%),
    linear-gradient(to bottom, rgba(10, 6, 32, 0.62), rgba(22, 11, 62, 0.35) 40%, rgba(10, 6, 32, 0.6));
}

/* the drifting halo light: soft radial blobs (no filter: cheap to move) */
.reviews__orbs { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.reviews__orbs span {
  position: absolute; width: 62vmax; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(108, 59, 255, 0.55), transparent);
  opacity: 0.75; will-change: transform;
  animation: orb 26s ease-in-out infinite alternate;
}
.reviews__orbs span:nth-child(1) { left: -22vmax; top: -10vmax; }
.reviews__orbs span:nth-child(2) { right: -24vmax; top: 18%; width: 54vmax; background: radial-gradient(closest-side, rgba(255, 155, 224, 0.32), transparent); animation-duration: 32s; animation-delay: -9s; }
.reviews__orbs span:nth-child(3) { left: 22%; bottom: -30vmax; width: 58vmax; background: radial-gradient(closest-side, rgba(61, 139, 255, 0.34), transparent); animation-duration: 38s; animation-delay: -17s; }
@keyframes orb {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(8vmax, 5vmax, 0) scale(1.12); }
  100% { transform: translate3d(-6vmax, 9vmax, 0) scale(0.92); }
}

/* ---------- Head ---------- */
.reviews__head {
  position: relative;
  display: grid; justify-items: center; text-align: center; gap: 1.1rem;
  margin-bottom: clamp(2.5rem, 6vw, 5rem);
}
.reviews__kicker {
  display: inline-flex; align-items: center; gap: 0.65rem;
  padding: 0.5rem 1.1rem; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(220, 207, 255, 0.28);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  font-size: var(--t-s); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text);
}
.reviews__kicker .halo-dot { width: 0.7em; height: 0.7em; box-shadow: 0 0 12px rgba(255, 255, 255, 0.8); animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.35); box-shadow: 0 0 22px rgba(199, 168, 255, 1); } }
.reviews__title {
  font-size: min(var(--t-3xl), 15vw); font-weight: 300; letter-spacing: -0.045em; line-height: 0.95;
  padding: 0 0.04em 0.14em;           /* room for the "y" descender and the last glyph: background-clip: text clips to the box */
  background: linear-gradient(100deg, var(--text) 0%, var(--text) 38%, #FFD6F2 46%, #C9DBFF 52%, #DCFFF4 56%, var(--text) 64%, var(--text) 100%);
  background-size: 260% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 6px 34px rgba(108, 59, 255, 0.55));
  animation: sheen 7s var(--ease) infinite;
}
@keyframes sheen { 0%, 25% { background-position: 100% 0; } 75%, 100% { background-position: 0% 0; } }
.reviews__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.75rem 1rem; margin-top: 0.5rem; }
.reviews__ig svg { width: 22px; height: 22px; }

/* ---------- The card ---------- */
.rcard {
  position: relative;
  display: grid; gap: 1rem;
  padding: 12px 12px 1.4rem;
  border-radius: var(--card-r);
  background: var(--glass);
  /* saturate only: the scene behind is already blurred (28px), so a second blur here was invisible (pixel diff < 0.4/255)
     but re-ran for every moving card on every frame */
  -webkit-backdrop-filter: saturate(160%); backdrop-filter: saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 30px 70px -30px rgba(5, 2, 18, 0.9), 0 0 60px -30px rgba(108, 59, 255, 0.8);
  color: var(--text);
  transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease);
}
/* the frame: an iridescent hairline ring that turns on hover */
.rcard::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--ring), #FF9BE0, #9FC2FF, #A6FFE6, #FFE6A6, #C7A8FF, #FF9BE0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0.45; transition: opacity 0.5s var(--ease);
}
.rcard:hover, .rcard:focus-within { transform: translateY(-6px) scale(1.015); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 40px 90px -30px rgba(5, 2, 18, 0.95), 0 0 80px -20px rgba(169, 139, 255, 0.95); }
.rcard:hover::before, .rcard:focus-within::before { opacity: 1; animation: ring 3.2s linear infinite; }
@keyframes ring { to { --ring: 360deg; } }

.rcard__media { position: relative; }
.rcard__photo {
  position: relative; display: block; width: 100%; padding: 0; border: 0; cursor: zoom-in;
  aspect-ratio: 4 / 5; overflow: hidden;
  border-radius: calc(var(--card-r) - 10px);
  background: var(--night);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}
.rcard__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease), filter 0.6s var(--ease); }
.rcard:hover .rcard__photo img { transform: scale(1.06); filter: saturate(1.08) brightness(1.04); }
.rcard__photo::after {          /* soft violet floor + lens glare on the photo */
  content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background:
    linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.22) 45%, transparent 58%) -150% 0 / 200% 100% no-repeat,
    linear-gradient(to top, rgba(10, 6, 32, 0.55), transparent 38%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
  transition: background-position 1.2s var(--ease);
}
.rcard:hover .rcard__photo::after { background-position: 250% 0, 0 0; }
.rcard__photo:focus-visible { outline: 3px solid var(--violet-hi); outline-offset: 3px; }
/* the product tag sits on the photo, frosted */
.rcard__chip {
  position: absolute; left: 12px; bottom: 12px; z-index: 1;
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.45rem 0.85rem 0.45rem 0.6rem; border-radius: var(--r-pill);
  background: rgba(16, 9, 46, 0.45); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
  -webkit-backdrop-filter: blur(12px) saturate(150%); backdrop-filter: blur(12px) saturate(150%);
  color: var(--text); font-size: var(--t-xs); font-weight: 600; text-decoration: none; letter-spacing: 0.02em;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}
.rcard__chip .halo-dot { width: 0.75em; height: 0.75em; }
.rcard__chip:hover { background: var(--text); color: var(--base); }
/* the quote seal: a violet disc that overlaps the photo edge */
.rcard__seal {
  position: absolute; right: 16px; bottom: -27px; z-index: 2;
  display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, #9C7BFF, var(--ultra) 55%, #3A12C9);
  box-shadow: 0 10px 30px -6px rgba(108, 59, 255, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 0 0 4px rgba(255, 255, 255, 0.1);
  color: #fff; font: 700 2rem / 1 var(--f-display); pointer-events: none;
}
.rcard__seal::before { content: '\201C'; transform: translateY(0.28em); }
.rcard__body { position: relative; display: grid; gap: 0.75rem; padding-inline: 0.65rem; }
.rcard__stars { display: flex; gap: 3px; }
.rcard__stars svg { width: 18px; height: 18px; fill: url(#rv-star); filter: drop-shadow(0 0 6px rgba(255, 214, 242, 0.55)); }
.rcard__text { font-size: var(--t-m); line-height: 1.5; color: var(--text); text-wrap: pretty; }
.rcard__who { display: flex; align-items: center; gap: 0.75rem; padding-top: 0.85rem; border-top: 1px solid rgba(220, 207, 255, 0.16); }
.rcard__avatar {
  flex: none; width: 40px; height: 40px; border-radius: 50%; padding: 2px;
  background: var(--halo);
}
.rcard__avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 2px solid var(--base-2); }
.rcard__name { display: block; font-weight: 700; line-height: 1.2; }
.rcard__city { display: block; font-size: var(--t-xs); color: var(--text-2); }

/* ---------- Wall: three drifting lanes (wide screens) ---------- */
.reviews__wall {
  --lane-h: min(118svh, 1080px);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.75rem);
  max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter);
  height: var(--lane-h); overflow: hidden;
  -webkit-mask: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
          mask: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
}
.reviews__lane { display: grid; gap: clamp(1rem, 2vw, 1.75rem); padding-block: 1rem; will-change: transform; animation: lane var(--dur, 60s) linear infinite; }
.reviews__lane--down { animation-direction: reverse; }
.reviews__lane:nth-child(even) { margin-top: -12%; }
@media (min-width: 1180px) { .reviews__wall { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@keyframes lane { to { transform: translate3d(0, -50%, 0); } }
.reviews__wall:hover .reviews__lane, .reviews__wall:focus-within .reviews__lane, .reviews.is-paused .reviews__lane, .reviews:not(.is-in) .reviews__lane { animation-play-state: paused; }

/* entrance: the head and the lanes rise in one after another */
.reviews__lane, .reviews__head > * { transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
html.js .reviews:not(.is-seen) .reviews__head > * { opacity: 0; transform: translateY(24px); }   /* no blur on the way in: an animated blur repainted every frame */
html.js .reviews:not(.is-seen) .reviews__wall { opacity: 0; transform: translateY(60px); }
.reviews__wall { transition: opacity 1.3s var(--ease) 0.35s, transform 1.3s var(--ease) 0.35s; }
.reviews__head > :nth-child(2) { transition-delay: 0.08s; }
.reviews__head > :nth-child(3) { transition-delay: 0.16s; }
.reviews__head > :nth-child(4) { transition-delay: 0.24s; }

.reviews__dots { display: none; }

/* ---------- Phones + tablets: one swipe deck ---------- */
@media (max-width: 820px) {
  .reviews { --card-r: 26px; }
  .reviews__wall {
    display: flex; gap: 0.9rem; height: auto; overflow-x: auto; overflow-y: hidden;
    padding: 1.5rem calc((100% - var(--card-w)) / 2) 2rem;
    --card-w: min(74vw, 360px);
    scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
    -webkit-mask: none; mask: none;
  }
  .reviews__wall::-webkit-scrollbar { display: none; }
  .reviews__wall .rcard {
    --d: 0; --ad: 0;   /* signed / absolute distance from the deck centre in cards, 0..1 (home.js) */
    flex: none; width: var(--card-w); scroll-snap-align: center;
    transform: perspective(900px) rotateY(calc(var(--d) * -14deg)) scale(calc(1 - var(--ad) * 0.1));
    opacity: calc(1 - var(--ad) * 0.35);
    transition: box-shadow 0.6s var(--ease);
  }
  .reviews__wall .rcard:hover, .reviews__wall .rcard:focus-within { transform: perspective(900px) rotateY(calc(var(--d) * -14deg)) scale(calc(1 - var(--ad) * 0.1)); }
  .reviews__dots { display: flex; justify-content: center; gap: 0.5rem; }
  .reviews__dots span { width: 8px; height: 8px; border-radius: var(--r-pill); background: rgba(220, 207, 255, 0.35); transition: width 0.45s var(--ease), background-color 0.45s var(--ease); }
  .reviews__dots span.is-on { width: 28px; background: var(--halo); box-shadow: 0 0 12px rgba(199, 168, 255, 0.8); }
  .rcard__text { font-size: var(--t-m); }
}

/* ---------- Review modal ---------- */
.review-modal {
  width: min(980px, calc(100% - 2rem)); max-height: calc(100svh - 2rem); margin: auto; padding: 0; border: 0;   /* margin: the reset zeroes the native centring */
  border-radius: 34px; overflow: auto; color: var(--text);
  background: linear-gradient(155deg, rgba(48, 26, 128, 0.82), rgba(16, 9, 46, 0.86));
  -webkit-backdrop-filter: blur(26px) saturate(160%); backdrop-filter: blur(26px) saturate(160%);
  box-shadow: inset 0 0 0 1px rgba(220, 207, 255, 0.3), 0 50px 120px -30px rgba(0, 0, 0, 0.9), 0 0 120px -30px rgba(108, 59, 255, 0.9);
}
.review-modal::backdrop { background: rgba(8, 4, 26, 0.6); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.review-modal[open] { animation: modal-in 0.6s var(--ease); }
.review-modal[open]::backdrop { animation: fade-in 0.4s ease; }
@keyframes modal-in { from { opacity: 0; transform: translateY(30px) scale(0.94); } }
@keyframes fade-in { from { opacity: 0; } }
.review-modal__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.review-modal__photo { position: relative; margin: 14px; border-radius: 24px; overflow: hidden; aspect-ratio: 2 / 3; background: var(--night); }
.review-modal__photo img { width: 100%; height: 100%; object-fit: cover; animation: modal-photo 0.9s var(--ease); }
@keyframes modal-photo { from { transform: scale(1.08); filter: blur(10px); } }
.review-modal__body { display: grid; align-content: center; gap: 1.25rem; padding: clamp(1.5rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3rem) clamp(0.5rem, 2vw, 1.5rem); }
.review-modal__body .rcard__stars svg { width: 24px; height: 24px; }
.review-modal__text { font-size: clamp(1.2rem, 1.2vw + 0.8rem, 1.6rem); line-height: 1.45; text-wrap: pretty; }
.review-modal__text::before { content: '\201C'; display: block; height: 0.55em; color: var(--violet-hi); font: 700 4rem / 1 var(--f-display); }
.review-modal__buy { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.5rem; }
.review-modal__nav { display: flex; gap: 0.5rem; }
.review-modal__btn {
  display: grid; place-items: center; width: 50px; height: 50px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 1px rgba(220, 207, 255, 0.35); color: var(--text);
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}
.review-modal__btn:hover { background: var(--text); color: var(--base); }
.review-modal__btn svg { width: 22px; height: 22px; }
.review-modal__btn--prev svg { transform: scaleX(-1); }
.review-modal__close { position: absolute; top: 22px; right: 22px; z-index: 2; background: rgba(16, 9, 46, 0.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
@media (max-width: 700px) {
  .review-modal__in { grid-template-columns: minmax(0, 1fr); }
  .review-modal__photo { aspect-ratio: 4 / 5; margin: 10px 10px 0; }
  .review-modal__body { padding: 1.25rem 1.4rem 1.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .reviews__orbs span, .reviews__title, .reviews__kicker .halo-dot { animation: none; }
  .reviews__wall { height: auto; -webkit-mask: none; mask: none; }
  .reviews__lane { animation: none; }
  .reviews__lane:nth-child(even) { margin-top: 0; }
}

/* =========================================================
   6. Glory Kit — the five products fill one photographed room
   ========================================================= */
.kit {
  --band: var(--night);
  position: relative;
  isolation: isolate;
  overflow: clip;
  margin-top: calc(-1 * var(--stack-r));
  background: var(--band);
  border-radius: var(--stack-r) var(--stack-r) 0 0;
  box-shadow: var(--rim);
}
.kit::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, transparent 28%, rgba(10, 6, 32, 0.28) 50%, rgba(10, 6, 32, 0.7));
}
.kit .home-scene img { object-position: 0% top; }   /* wide scene: products whole at the left, see .panel__scene */
.kit:focus { outline: none; }   /* focus target of the hero link, not a control */
.kit__in {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 6vw, 7rem); align-items: center;
  min-height: max(850px, calc(var(--panel-h) + var(--stack-r)));
  padding-block: calc(var(--section) * 0.7) calc(var(--section) * 0.7 + var(--stack-r));
}
.kit__body { grid-column: 2; container-type: inline-size; display: grid; justify-items: start; text-shadow: 0 2px 24px rgba(10, 6, 32, 0.75); }
.kit__name { font-size: min(var(--t-3xl), 20cqi); font-weight: 300; letter-spacing: -0.045em; line-height: 0.95; }
.kit__tag { margin-top: 1.25rem; font-size: var(--t-l); color: var(--text-2); }
/* the five inside: big circles, each named, each a link to its product */
.kit__items {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(0.5rem, 1.2vw, 1rem);
  width: 100%; max-width: 36rem;
  list-style: none; padding: 0; margin-top: clamp(1.75rem, 3vw, 2.5rem);
}
.kit__item {
  display: grid; justify-items: center; gap: 0.6rem;
  text-decoration: none; text-align: center;
  font-size: var(--t-xs); font-weight: 500; line-height: 1.2; color: var(--text-2);
  transition: color 0.25s var(--ease);
}
.kit__thumb {
  width: 100%; background: var(--surface);
  box-shadow: 0 0 0 1px rgba(169, 139, 255, 0.34), 0 14px 32px -14px rgba(108, 59, 255, 1);
  transition: box-shadow 0.3s var(--ease), transform 0.4s var(--ease);
}
.kit__item:hover { color: var(--text); }
.kit__item:hover .kit__thumb { transform: translateY(-3px); box-shadow: 0 0 0 1.5px var(--violet-hi), 0 18px 38px -12px rgba(108, 59, 255, 1); }
.kit__price { margin-top: clamp(2rem, 4vw, 3rem); }
.kit__price .kitprice__now { font-size: var(--t-2xl); }   /* GS.kitPriceHTML(): price + "Поотделно …" under it */
.kit__add { margin-top: 1.75rem; }

/* Landscape tablets: the five fill the left 3/5 of the scene, so the copy takes the right 2/5. */
@media (min-width: 821px) and (max-width: 1100px) and (orientation: landscape) {
  .kit__in { grid-template-columns: 3fr 2fr; gap: 2rem; min-height: max(620px, 60vw); padding-block: 3rem calc(3rem + var(--stack-r)); }
}
/* Portrait scene leaves the lower half for all five links and the buy block (phones + portrait tablets;
   index.html serves the portrait photo with the same media query). */
@media (min-width: 821px) and (max-width: 1100px) and (orientation: portrait) {
  .kit .home-scene img { object-position: center top; }
  .kit::before { background: linear-gradient(to bottom, transparent 40%, rgba(10, 6, 32, 0.25) 52%, rgba(10, 6, 32, 0.78)); }
  .kit__in { display: flex; align-items: flex-end; min-height: max(1100px, 150vw); padding-block: 2rem calc(2.5rem + var(--stack-r)); }
  .kit__body { width: 100%; }
}
@media (max-width: 820px) {
  .kit .home-scene img { object-position: center top; }
  .kit::before { background: linear-gradient(to bottom, transparent 28%, rgba(10, 6, 32, 0.2) 45%, rgba(10, 6, 32, 0.72)); }
  .kit__in { display: flex; align-items: flex-end; min-height: max(1100px, 195vw); padding-block: 2rem calc(2.25rem + var(--stack-r)); }
  .kit__body { width: 100%; }
  .kit__items { gap: 0.5rem; }
  .kit__item { font-size: 0.875rem; letter-spacing: -0.01em; }   /* names stay at 14px (see shop.css .kit__item-name) */
}
/* the quiet button keeps its own width on phones too */

/* =========================================================
   7. Facts + footer — one uninterrupted finale
   ========================================================= */
.home-ending { position: relative; isolation: isolate; overflow: clip; background: var(--night); }
.home-ending::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(10, 6, 32, 0.45), rgba(10, 6, 32, 0.62) 78%, rgba(10, 6, 32, 0.25) 90%, rgba(10, 6, 32, 0.45));
}
.home-facts { background: transparent; }
.home-facts .fact { font-size: var(--t-m); }
body[data-page='home'] .site-footer { background: transparent; }
body[data-page='home'] .site-footer::before, body[data-page='home'] .site-footer::after { display: none; }
body[data-page='home'] .footer__word { margin-top: clamp(5rem, 12vw, 11rem); }
body[data-page='home'] .footer__word svg { filter: drop-shadow(0 0 40px rgba(169, 139, 255, 0.7)); }

/* Phones: the one quiet button runs the full width, a touch taller and larger, still frosted glass */
@media (max-width: 700px) {
  .hero__cta, .panel__actions { display: flex; width: 100%; }
  .hero__cta .btn--quiet, .panel__actions .btn--quiet, .kit__add.btn--quiet {
    width: 100%; min-height: 62px; font-size: var(--t-l); letter-spacing: 0.005em;
    --bg: rgba(245, 241, 255, 0.08); border-color: rgba(245, 241, 255, 0.34);
  }
  .panel__buy { justify-items: stretch; }
}

/* Header logo: hidden while the hero's giant "Glory" is on screen (home.js toggles body.brand-off), fades in after */
body[data-page='home'] .site-header .brand { transition: opacity 0.45s var(--ease), visibility 0s linear 0s; }
body[data-page='home'].brand-off .site-header .brand { opacity: 0; visibility: hidden; transition: opacity 0.3s var(--ease), visibility 0s linear 0.3s; }