/* home.css — СЕВАС home (019, build P6 → blue world P10, 28.09). The language of the whole site is set here; other pages speak it.
   Blue world: the hero is the page itself (no halo), colour lives in the smoke and the big word; products stand on plates. */

/* ---------- hero: layout stays put, product and colour change (R10 first 6 s: teal → pink → blue) ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden; height: clamp(580px, calc(100vh - var(--hdr)), 1180px); color: var(--ink); }   /* 580: the whole start fits a 1536×730 laptop window (qa, fit_check) */
.hero__bg, .hero__stage { position: absolute; inset: 0; pointer-events: none; }
.hero__bg { z-index: -4; }
.hero__tone { position: absolute; inset: 0; opacity: 0; }
.hero__tone.is-on { opacity: 1; }
.hero__tone { background: var(--paper); }   /* sample B: the slide colour lives in its smoke, not in a halo behind the product */
.hero__word { position: absolute; inset: 0; z-index: -3; pointer-events: none; }
.hero__w { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -54%); white-space: nowrap; opacity: 0;
  font: 400 clamp(190px, 24vw, 700px)/.82 var(--f-display); letter-spacing: -.035em; }
.hero__w.is-on { opacity: .16; }
.hero__w[data-w="0"] { color: #e2503e; }
.hero__w[data-w="1"] { color: #f2a93a; }
.hero__w[data-w="2"] { color: #4f9be0; }
.hero__smoke { position: absolute; left: 50%; pointer-events: none;   /* the edges fade: on the blue a cut edge of white smoke reads as a box */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent), linear-gradient(transparent, #000 25%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent), linear-gradient(transparent, #000 25%);
  mask-composite: intersect; }
.hero__smokes { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.hero__smoke--back { z-index: -2; width: min(96vw, 1900px); bottom: -8%; transform: translateX(-50%); opacity: 0; }
.hero__tint.is-on { opacity: .78; }
/* R10: a stroke under the slide number in the colour of the slide */
.hero__numv { position: relative; }
.hero__numv::after { content: ""; position: absolute; left: 4%; right: 8%; bottom: -10px; height: 7px; border-radius: 4px; background: var(--hacc, #d84a3c);
  transform: rotate(-2deg); }
.hero[data-cur="1"] { --hacc: #e3a324; }
.hero[data-cur="2"] { --hacc: #3f86cc; }
.hero__smoke--front { z-index: 0; width: min(120vw, 2600px); bottom: 2%; transform: translateX(-50%); opacity: .34; }
.hero__stage { z-index: -1; }
.hero__fluid { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; pointer-events: none; }   /* live smoke behind the product */
.hero.has-fluid .hero__smoke--front { display: none; }   /* the old front band sat on the floor of the hero: with live smoke it only piled up (Operator 28.09) */
.hero__img { position: absolute; left: 50%; opacity: 0; transform: translateX(-50%); filter: drop-shadow(0 40px 60px rgba(0, 0, 0, .55)); }
.hero__img.is-on { opacity: 1; }
.hero__img--0 { height: 80%; bottom: 11%; }
.hero__img--1 { width: min(37vw, 860px); bottom: 15%; left: 55%; }
.hero__img--2 { width: min(40vw, 940px); bottom: 14%; left: 56%; }

.hero__grid { position: relative; z-index: 1; height: 100%; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter);
  grid-template-rows: auto 1fr auto auto; padding-block: clamp(26px, 3vw, 64px) clamp(22px, 2.4vw, 52px); }
.hero__head { grid-column: 1 / span 5; grid-row: 1; max-width: clamp(560px, 37vw, 1180px); }
.hero__h1 { font: 700 clamp(30px, 2.55vw, 62px)/1.06 var(--f-text); letter-spacing: -.025em; }
.hero__sub { margin-top: clamp(12px, 1vw, 22px); font: 600 var(--fs-2)/1.3 var(--f-text); }
.hero__sub2 { font: 500 var(--fs-1)/1.35 var(--f-text); color: var(--ink-2); }
.hero__live { display: inline-flex; align-items: center; gap: 10px; margin-top: clamp(14px, 1.2vw, 26px); font-size: var(--fs-1); font-weight: 500; color: var(--ink-2); }
.hero__live b { font-weight: 700; color: var(--ink); }
.hero__pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); }   /* a still dot: the pulsing one is on the slop list */
.hero__num { grid-column: 10 / span 3; grid-row: 1; justify-self: end; text-align: right; font-family: var(--f-display); line-height: .9; }
.hero__numv { display: inline-block; font-size: clamp(64px, 5.6vw, 150px); }
.hero__numof { font-size: clamp(22px, 1.6vw, 42px); opacity: .45; vertical-align: top; margin-left: 4px; }

.hero__slides { grid-column: 1 / span 4; grid-row: 3; position: relative; min-height: clamp(210px, 15vw, 330px); }
.hero__slide { position: absolute; left: 0; right: 0; bottom: 0; opacity: 0; pointer-events: none; }
.hero__slide.is-on { opacity: 1; pointer-events: auto; }
.hero__cap { display: none; }   /* a label above the name — slop list (impeccable), the name speaks for itself */
.hero__name { margin-top: 10px; font: 600 clamp(20px, 1.5vw, 34px)/1.15 var(--f-text); letter-spacing: -.01em; max-width: 22ch; }
.hero__price { margin-top: 12px; font-size: clamp(26px, 1.9vw, 44px); }
.hero__price s { color: var(--ink-3); }
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: clamp(14px, 1.2vw, 24px); }
.hero__more { font-weight: 600; border-bottom: 1.5px solid currentColor; padding-bottom: 2px; }
.hero__promise { grid-column: 1 / span 5; grid-row: 4; margin-top: clamp(14px, 1.2vw, 26px); }
.hero__promise .promise__big { font-size: clamp(19px, 1.35vw, 32px); font-weight: 700; letter-spacing: -.01em; }
.hero__desc { grid-column: 9 / span 4; grid-row: 3; align-self: end; position: relative; min-height: 5.5em; }
.hero__d { position: absolute; left: 0; right: 0; bottom: 0; opacity: 0; font-size: var(--fs-1); line-height: 1.45; max-width: 36ch; margin-left: auto; text-align: right; color: var(--ink-2); }
.hero__d.is-on { opacity: 1; }
.hero__ctrl { position: absolute; left: 50%; bottom: clamp(20px, 2.2vw, 46px); transform: translateX(-50%); display: flex; align-items: center; gap: 14px; }
.hero__ctrl .iconbtn { background: rgba(22, 51, 90, .5); }
.hero__dots { display: flex; gap: 10px; }
.hero__dots button { width: 44px; height: 44px; display: grid; place-items: center; }
.hero__dots i { position: relative; display: block; width: 32px; height: 4px; border-radius: 2px; background: rgba(244, 239, 232, .22); overflow: hidden; }
.hero__dots i::after { content: ""; position: absolute; inset: 0; background: var(--ink); transform: scaleX(0); transform-origin: left; }
.hero__dots [aria-selected="true"] i::after { transform: scaleX(1); }
.hero__dots.is-play [aria-selected="true"] i::after { animation: dotfill var(--slide, 6s) linear forwards; }
@keyframes dotfill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hero__down { position: absolute; right: 0; bottom: clamp(20px, 2.2vw, 46px); width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px rgba(244, 239, 232, .34); transition: transform var(--t-h) var(--ease-h); }
.hero__down svg { width: 22px; height: 22px; }
.hero__down:hover { transform: translateY(4px); }

/* ---------- how to get it: three steps on the ground, divided by hairlines (sample B — no white card, no icon tiles) ---------- */
.how { position: relative; z-index: 2; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.how__card { display: grid; grid-template-columns: 1fr auto; gap: var(--gutter); align-items: center; padding-block: clamp(22px, 2vw, 44px); }
.how__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2vw, 48px); counter-reset: st; }
.how__steps li { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; align-items: start; }
.how__steps li + li { border-left: 1px solid var(--line); padding-left: clamp(16px, 1.6vw, 36px); }
.how__ic { grid-row: span 2; width: 32px; height: 32px; display: grid; place-items: center; color: var(--ink); }
.how__ic svg { width: 26px; height: 26px; }
.how__t { font: 600 var(--fs-2)/1.25 var(--f-text); }
.how__d { margin-top: 4px; font-size: var(--fs-0); color: var(--ink-2); }
.how__note { display: grid; gap: 10px; justify-items: end; text-align: right; max-width: 280px; font-size: var(--fs-0); color: var(--ink-2); }

/* ---------- sections: tall direction tiles in vivid gradients, the product over the top edge (R06/R11 Vapohub, S04, S02 H5) ---------- */
.secs { padding-top: clamp(80px, 7vw, 170px); }
.secs__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter); padding-top: clamp(96px, 8vw, 190px); }
.secard { position: relative; display: grid; align-content: end; min-height: clamp(330px, 25vw, 640px); padding: clamp(20px, 1.8vw, 40px);
  border-radius: var(--r-xl); overflow: visible; color: var(--navy); isolation: isolate; }
.secard::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--bgc); z-index: -1; }
.secard--kalyany { --bgc: linear-gradient(165deg, #ffc9a6 0%, #f2745a 100%); }
.secard--smesi { --bgc: linear-gradient(165deg, #fff3a3 0%, #f3b53a 100%); }
.secard--ugol { --bgc: linear-gradient(165deg, #c2f4e2 0%, #38b99d 100%); }
.secard--aksessuary { --bgc: linear-gradient(165deg, #ffd0ea 0%, #b983ee 100%); }
.secard__img { position: absolute; left: 50%; bottom: 36%; width: 86%; max-height: 92%; object-fit: contain; transform: translateX(-50%);
  transition: transform .5s var(--ease); filter: drop-shadow(0 22px 26px rgba(15, 36, 64, .32)); }
.secard--kalyany .secard__img { width: 62%; bottom: 30%; max-height: 100%; }
.secard:hover .secard__img { transform: translateX(-50%) translateY(-10px) scale(1.03); }
.secard__t { position: relative; font: 400 clamp(24px, 1.75vw, 42px)/1.05 var(--f-display); }
.secard__n { position: relative; margin-top: 10px; font: 600 var(--fs-1)/1.3 var(--f-text); color: rgba(15, 36, 64, .8); }
.secard__go { position: absolute; right: clamp(18px, 1.6vw, 34px); bottom: clamp(18px, 1.6vw, 34px); width: 46px; height: 46px; border-radius: 50%;
  background: var(--navy); color: var(--ink); display: grid; place-items: center; transition: transform var(--t-h) var(--ease-h); }
.secard__go svg { width: 20px; height: 20px; }
.secard:hover .secard__go { transform: rotate(45deg); }

/* ---------- picks (tabs + ribbon) ---------- */
.picks .sec__head { align-items: center; }
.picks__note { margin-top: 14px; color: var(--ink-3); }

/* ---------- brand mosaic + flying pucks: every brand on a tile of its own colours, the generated smoke print quiet behind ---------- */
.brands { position: relative; background: linear-gradient(rgba(22, 51, 90, .62), rgba(22, 51, 90, .62)), var(--paper) url("../img/bg/cobalt.webp") center / cover; }
.brands__fly { position: absolute; inset: 0; pointer-events: none; }
.fly { position: absolute; width: clamp(110px, 9vw, 240px); filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .5)); }
.fly--1 { left: 40%; top: -1%; transform: rotate(-12deg); width: clamp(110px, 8vw, 220px); }
.fly--2 { right: 3%; top: 0; width: clamp(90px, 6vw, 160px); opacity: .8; }
.fly--3 { left: 2.5%; bottom: 3%; width: clamp(80px, 5.5vw, 150px); opacity: .75; }   /* far plane: behind the Starline tile corner */
.fly--4 { left: 38%; bottom: 4%; transform: rotate(14deg); }
.fly--1, .fly--4 { z-index: 2; }   /* near plane flies in front of the tiles, far plane behind them (S03, two planes) */
.mosaic { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: clamp(150px, 11vw, 300px);
  gap: var(--gutter); }
.mtile { position: relative; display: grid; align-content: start; padding: clamp(20px, 1.8vw, 40px); border-radius: var(--r-xl); isolation: isolate; color: var(--navy); overflow: hidden; }
.mtile::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--bgc); z-index: -2; }
.mtile__t { font: 400 clamp(24px, 2vw, 52px)/1 var(--f-display); }
.mtile__n { margin-top: 8px; font: 600 var(--fs-1)/1.3 var(--f-text); opacity: .8; }
.mtile__img { position: absolute; right: 4%; bottom: -12%; width: 58%; z-index: -1; transition: transform .5s var(--ease); filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .3)); }
.mtile:hover .mtile__img { transform: translateY(-8px) rotate(-2deg); }
.mtile--darkside { grid-column: 1 / span 5; grid-row: span 2; --bgc: radial-gradient(120% 90% at 30% 20%, #2b3038 0%, #0c0e11 100%); color: #fff; }
.mtile--darkside .mtile__img { width: 78%; right: -4%; bottom: -8%; }
.mtile--sarma { grid-column: 6 / span 4; --bgc: linear-gradient(135deg, #e3f6f8, #8fd3e0); }
.mtile--sebero { grid-column: 10 / span 3; --bgc: linear-gradient(135deg, #ece5fb, #b4a0ee); }
.mtile--trofimoffs { grid-column: 6 / span 3; --bgc: linear-gradient(135deg, #fde4da, #eca48b); }
.mtile--musthave { grid-column: 9 / span 4; --bgc: linear-gradient(135deg, #1a2f29, #37584c); color: #fff; }
.mtile--starline { grid-column: 1 / span 12; --bgc: linear-gradient(100deg, #fff4c9 0%, #ffd9a8 38%, #bfe6d9 70%, #a9d8e8 100%); }
.mtile--starline { grid-row: span 1; }
.mtile--starline .mtile__img { width: 22%; right: 6%; bottom: -18%; }
.mtile--sarma .mtile__img, .mtile--musthave .mtile__img { width: 46%; }
.mtile--sebero .mtile__img, .mtile--trofimoffs .mtile__img { width: 50%; right: -4%; bottom: -20%; }

/* ---------- build a set: the list on the ground between hairlines, each product on its plate ---------- */
.kit__in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); align-items: center;
  padding-block: clamp(32px, 3vw, 72px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.kit__head { grid-column: 1 / span 5; }
.kit__head .lead { margin-top: 14px; }
.kit__tabs { margin-top: 26px; }
.kit__list { margin-top: 22px; display: grid; gap: 10px; }
.kit__list { gap: 0; }
.kit__item { display: grid; grid-template-columns: 72px 1fr auto; gap: 18px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.kit__item > .pl { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 12px; overflow: hidden; }
.kit__item > .pl img { width: 84%; height: 84%; object-fit: contain; }
.kit__item .nm { font-weight: 500; line-height: 1.3; }
.kit__item .nm small { display: block; color: var(--ink-3); font-size: 13px; letter-spacing: .07em; text-transform: uppercase; font-weight: 600; }
.kit__item .pr { font-weight: 700; color: var(--price); white-space: nowrap; }
.kit__sum { display: flex; justify-content: space-between; align-items: baseline; margin-top: 20px; font-weight: 600; font-size: var(--fs-2); }
.kit__sum .price { font-size: clamp(28px, 2vw, 46px); }
.kit__cta { display: flex; flex-wrap: wrap; gap: 18px 24px; align-items: center; margin-top: 18px; }
.kit__fig { grid-column: 6 / span 7; position: relative; }
.kit__fig img { width: 100%; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .45)); }

/* ---------- shorts ---------- */
.shorts__row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gutter); }
.short { position: relative; aspect-ratio: 9 / 16; border-radius: var(--r-l); overflow: hidden; background: var(--card); margin: 0; }
.short video, .short img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.short--photo:hover img { transform: scale(1.05); }
.short__tag { position: absolute; left: 12px; top: 12px; padding: 7px 12px; border-radius: var(--r-pill); background: rgba(10, 22, 40, .78); color: #fff;
  font: 500 14px/1 var(--f-text); transition: opacity var(--t-h) var(--ease-h); }
.short.is-play .short__tag, .short.is-play figcaption { opacity: 0; }
.short__snd { position: absolute; right: 12px; top: 12px; width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, .9); color: var(--navy); display: grid; place-items: center; z-index: 2; }
.short__snd svg { width: 18px; height: 18px; }
.short figcaption { position: absolute; left: 12px; right: 12px; bottom: 12px; display: grid; gap: 8px; justify-items: start; color: #fff;
  transition: opacity var(--t-h) var(--ease-h); }
.short figcaption b { font: 600 var(--fs-1)/1.2 var(--f-text); text-shadow: 0 1px 12px rgba(0, 0, 0, .5); }
.short__go { padding: 10px 16px; border-radius: var(--r-pill); background: var(--ink); color: var(--paper); font: 600 14px/1 var(--f-text); }
.short::after { content: ""; position: absolute; inset: 55% 0 0; background: linear-gradient(transparent, rgba(0, 0, 0, .45)); pointer-events: none; }
.short figcaption, .short__tag, .short__snd { z-index: 2; }

/* ---------- trust: columns on the ground under one hairline (sample B), the rating in big type ---------- */
.trust__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); align-items: stretch; }
.ymap { grid-column: 1 / span 3; display: grid; align-content: start; gap: 6px; padding-top: clamp(20px, 1.8vw, 36px); border-top: 1px solid var(--line); }
.ymap__src { font: 600 13px/1 var(--f-text); letter-spacing: .12em; text-transform: uppercase; color: #ff8a7a; }
.ymap__rate { font: 400 clamp(64px, 5vw, 120px)/1 var(--f-display); margin-top: 10px; }
.ymap__stars { color: #fc3f1d; font-size: 26px; letter-spacing: 3px; }
.ymap__n { color: var(--ink-2); }
.ymap__go { margin-top: 18px; display: inline-flex; gap: 8px; align-items: center; font-weight: 600; color: var(--link); }
.ymap__go svg { width: 18px; }
.reviews { grid-column: 4 / span 6; display: grid; gap: var(--gutter); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.review { margin: 0; display: grid; align-content: space-between; gap: 20px; padding-top: clamp(20px, 1.8vw, 36px); border-top: 1px solid var(--line); }
.review p { font: 500 var(--fs-2)/1.4 var(--f-text); }
.review p::before { content: "«"; } .review p::after { content: "»"; }
.review cite { font-style: normal; font-size: var(--fs-0); color: var(--ink-2); }
.orig { grid-column: 10 / span 3; display: grid; align-content: start; gap: 12px; padding-top: clamp(20px, 1.8vw, 36px); border-top: 1px solid var(--line); }
.orig__seal { display: inline-flex; align-items: center; gap: 10px; font: 400 clamp(24px, 1.7vw, 38px)/1 var(--f-display); color: var(--ink); }
.orig__seal svg { width: 36px; height: 36px; }
.orig__t { font: 600 var(--fs-2)/1.35 var(--f-text); }
.orig__d { color: var(--ink-2); }

/* ---------- store by the metro ---------- */
.store__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); align-items: center; }
.store__txt { grid-column: 1 / span 5; }
.store__txt .h2 { margin-top: 12px; }
.store__addr { margin-top: 22px; font: 600 var(--fs-3)/1.25 var(--f-text); }
.store__route { margin-top: 12px; color: var(--ink-2); max-width: 56ch; }
.store__facts { display: flex; flex-wrap: wrap; gap: 14px 40px; margin: 22px 0 0; }
.store__facts dt { font: 600 13px/1 var(--f-text); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; }
.store__facts dd { margin: 0; font-weight: 600; font-size: var(--fs-2); }
.store__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.store__photos { grid-column: 6 / span 7; display: grid; grid-template-columns: 1.15fr 1fr 1fr; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gutter);
  height: clamp(460px, 36vw, 960px); }
.sp { width: 100%; height: 100%; min-height: 0; object-fit: cover; border-radius: var(--r-l); }   /* rows minmax(0, 1fr): tall photos no longer push into the journal */
.sp--a { grid-row: span 2; }
.sp--b { grid-column: 2 / span 2; }

/* ---------- journal ---------- */
.jgrid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--gutter); }
.jcard { position: relative; display: grid; align-content: end; gap: 8px; min-height: clamp(360px, 26vw, 640px); padding: clamp(18px, 1.6vw, 34px);
  border-radius: var(--r-xl); overflow: hidden; color: #fff; isolation: isolate; }
.jcard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .8s var(--ease); }
.jcard::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10, 16, 24, .05) 30%, rgba(10, 16, 24, .78)); }
.jcard:hover img { transform: scale(1.04); }
.jcard__cap { font: 600 13px/1 var(--f-text); letter-spacing: .12em; text-transform: uppercase; opacity: .9; }
.jcard__t { font: 600 clamp(20px, 1.4vw, 32px)/1.15 var(--f-text); }
.jcard--big .jcard__t { font: 400 clamp(28px, 2.3vw, 56px)/1.05 var(--f-display); max-width: 16ch; }
.jcard__d { font-size: var(--fs-1); opacity: .88; }

/* shot mode / reduced motion: final states */