/* SUBz — промо-баннеры каталога (/brands), «spotlight» v3 — постеры без вкладок снизу.
   v3: вкладки убраны (переключение стрелками, на телефоне — свайпом), стрелки видны всегда,
   без серой рамки вокруг баннера. Остальное — как в v2:
   Без продавцов и панелей: слева крупная типографика и одна кнопка, справа — арт:
   объёмный значок сервиса, орбиты со светом, стеклянные плитки, круглая наклейка с ценой.
   На фоне — огромное название сервиса контуром. Под баннером — вкладки с прогрессом (как в v1). */

.spot{position:relative;margin-top:clamp(14px,1.8vw,24px)}
.spot__track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;border-radius:28px}
.spot__track::-webkit-scrollbar{display:none}

/* ── постер ── */
.spot__slide{position:relative;isolation:isolate;overflow:hidden;flex:0 0 100%;scroll-snap-align:start;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(280px,400px);gap:clamp(16px,3vw,48px);align-items:center;
  min-height:clamp(340px,27vw,420px);padding:clamp(22px,2.4vw,36px) clamp(24px,3.6vw,56px);color:#fff;cursor:pointer;
  background:
    radial-gradient(42% 75% at 76% 45%,color-mix(in srgb,var(--c) 90%,#fff 12%) 0%,transparent 70%),
    radial-gradient(60% 90% at 100% 100%,color-mix(in srgb,var(--c) 70%,#000 10%) 0%,transparent 70%),
    radial-gradient(50% 70% at 0% 0%,color-mix(in srgb,var(--c) 22%,transparent) 0%,transparent 70%),
    linear-gradient(120deg,#050505 0%,color-mix(in srgb,var(--c) 18%,#050505) 45%,color-mix(in srgb,var(--c) 45%,#050505) 100%)}
/* зерно */
.spot__slide::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.16;mix-blend-mode:overlay;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* затемнение под текстом */
.spot__slide::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgb(0 0 0 / .55) 0%,rgb(0 0 0 / .2) 45%,transparent 65%)}

/* огромное название сервиса контуром — как на постере */
.spot__word{position:absolute;left:clamp(10px,2vw,30px);bottom:-.2em;z-index:-1;font-family:var(--f-display);font-size:clamp(120px,15vw,250px);font-weight:900;line-height:1;
  letter-spacing:-.06em;white-space:nowrap;text-transform:uppercase;color:transparent;-webkit-text-stroke:1.5px rgb(255 255 255 / .1);pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,#000 30%,transparent 95%);mask-image:linear-gradient(180deg,#000 30%,transparent 95%)}

/* ── текст ── */
.spot__txt{display:grid;justify-items:start;align-content:center;gap:16px;max-width:620px;min-width:0}
.spot__kicker{display:inline-flex;align-items:center;gap:10px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:rgb(255 255 255 / .75)}
.spot__kicker i{width:7px;height:7px;border-radius:50%;background:color-mix(in srgb,var(--c) 85%,#fff 15%);box-shadow:0 0 0 3px rgb(255 255 255 / .16),0 0 14px var(--c)}
.spot__title{display:grid;font-family:var(--f-display);font-size:clamp(42px,5vw,82px);font-weight:800;line-height:.88;letter-spacing:-.05em;text-wrap:balance;
  text-shadow:0 10px 40px rgb(0 0 0 / .35)}
.spot__title em{font-style:normal;font-size:.5em;letter-spacing:-.03em;color:rgb(255 255 255 / .7);margin-top:10px}
.spot__sub{max-width:460px;margin:0;font-size:clamp(14px,1.05vw,16px);line-height:1.5;color:rgb(255 255 255 / .76)}
.spot__cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:4px}
.spot__price{display:none;align-items:baseline;gap:6px;font-family:var(--f-display);font-size:30px;font-weight:800;letter-spacing:-.035em}
.spot__price small{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgb(255 255 255 / .7)}
.spot__go{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 24px;border-radius:15px;background:#fff;color:#000;font-size:15px;font-weight:700;white-space:nowrap;
  box-shadow:0 14px 34px -14px rgb(255 255 255 / .55);transition:transform .25s var(--ease-out,ease),box-shadow .25s}
.spot__go:hover{transform:translateY(-2px);box-shadow:0 18px 40px -14px rgb(255 255 255 / .7)}
.spot__go svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.3;transition:transform .25s}
.spot__go:hover svg{transform:translateX(3px)}

/* ── арт ── */
.spot__art{position:relative;justify-self:center;display:grid;place-items:center;width:min(100%,370px);aspect-ratio:1;perspective:1000px;pointer-events:none}
.spot__glow{position:absolute;inset:14%;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--c) 90%,#fff 20%) 0%,transparent 68%);filter:blur(34px);opacity:.85}
/* орбиты */
.spot__ring{position:absolute;border-radius:50%;border:1px solid rgb(255 255 255 / .13)}
.spot__ring--1{inset:2%}
.spot__ring--2{inset:13%;border-color:rgb(255 255 255 / .18)}
.spot__ring--3{inset:24%;border-style:dashed;border-color:rgb(255 255 255 / .16)}
/* бегущий свет по орбите */
.spot__ring--1::before{content:"";position:absolute;inset:-1px;border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0 62%,color-mix(in srgb,var(--c) 60%,#fff) 82%,#fff 88%,transparent 92%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1.5px));mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1.5px));
  animation:spot-spin 10s linear infinite}
.spot__ring--2::before{content:"";position:absolute;top:50%;left:-5px;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;background:#fff;box-shadow:0 0 14px 3px color-mix(in srgb,var(--c) 70%,#fff)}
.spot__ring--2{animation:spot-spin 22s linear infinite reverse}
/* главный значок — объёмная плитка */
.spot__icon{position:relative;z-index:2;display:grid;place-items:center;width:46%;aspect-ratio:1;border-radius:27%;color:var(--i);
  background:linear-gradient(150deg,color-mix(in srgb,var(--c) 100%,#fff 26%) 0%,var(--c) 45%,color-mix(in srgb,var(--c) 100%,#000 32%) 100%);
  box-shadow:inset 0 2px 0 rgb(255 255 255 / .5),inset 0 -14px 28px rgb(0 0 0 / .22),0 70px 90px -34px #000,0 0 100px -12px color-mix(in srgb,var(--c) 85%,transparent);
  transform:rotateX(14deg) rotateY(-20deg) rotate(-7deg);animation:spot-float 7s ease-in-out infinite}
.spot__icon::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(155deg,rgb(255 255 255 / .42) 0%,rgb(255 255 255 / .06) 38%,transparent 55%);pointer-events:none}
.spot__icon svg{width:54%;height:auto;fill:currentColor;filter:drop-shadow(0 8px 14px rgb(0 0 0 / .22))}
.spot__icon b{font-family:var(--f-display);font-size:clamp(70px,7vw,120px);font-weight:900;letter-spacing:-.05em}
.spot__shadow{position:absolute;left:28%;right:28%;bottom:15%;height:7%;border-radius:50%;background:rgb(0 0 0 / .55);filter:blur(14px);animation:spot-shadow 7s ease-in-out infinite}
/* стеклянные плитки вокруг */
.spot__glass{position:absolute;z-index:1;display:grid;place-items:center;width:17%;aspect-ratio:1;border-radius:28%;color:rgb(255 255 255 / .85);
  background:linear-gradient(150deg,rgb(255 255 255 / .2),rgb(255 255 255 / .04));border:1px solid rgb(255 255 255 / .22);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 24px 40px -20px #000,inset 0 1px 0 rgb(255 255 255 / .3);animation:spot-float 6s ease-in-out infinite}
.spot__glass svg{width:48%;height:auto;fill:currentColor}
.spot__glass b{font-family:var(--f-display);font-size:clamp(22px,2.2vw,34px);font-weight:900}
.spot__glass--a{left:6%;top:14%;transform:rotate(-14deg);animation-delay:-2s}
.spot__glass--b{right:9%;top:6%;width:12%;transform:rotate(12deg);animation-delay:-4s;opacity:.8}
.spot__glass--c{left:14%;bottom:8%;width:11%;transform:rotate(8deg);animation-delay:-1s;opacity:.7}
/* круглая наклейка с ценой */
.spot__seal{position:absolute;z-index:3;right:3%;bottom:12%;display:grid;place-content:center;justify-items:center;width:27%;aspect-ratio:1;border-radius:50%;
  background:#fff;color:#000;text-align:center;transform:rotate(12deg);box-shadow:0 22px 44px -16px #000;animation:spot-seal 7s ease-in-out infinite}
.spot__seal::before{content:"";position:absolute;inset:6%;border-radius:50%;border:1.5px dashed rgb(0 0 0 / .28)}
.spot__seal small{font-family:var(--f-mono);font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgb(0 0 0 / .6)}
.spot__seal b{font-family:var(--f-display);font-size:clamp(18px,1.8vw,26px);font-weight:900;letter-spacing:-.04em;line-height:1.05;white-space:nowrap}

/* наклейка со словом вместо цены — шрифт мельче, чтобы влезало в круг */
.spot__seal--txt b{font-size:clamp(14px,1.25vw,18px);letter-spacing:-.02em}
.spot__seal--txt small{font-size:9px;letter-spacing:.1em}
.spot__slide--safe .spot__icon svg path+path{stroke:color-mix(in srgb,var(--c) 100%,#000 10%)}
.spot__slide--sell{background:radial-gradient(42% 75% at 76% 45%,#6a6a6a 0%,transparent 70%),radial-gradient(60% 90% at 100% 100%,#2c2c2c 0%,transparent 70%),linear-gradient(120deg,#050505 0%,#121212 55%,#262626 100%)}
.spot__slide--sell .spot__icon{background:linear-gradient(150deg,#fff 0%,#e9e9e9 45%,#b9b9b9 100%)}
.spot__slide--sell .spot__seal{background:color-mix(in srgb,#ffc53d 100%,#fff 10%)}
.spot__slide:hover .spot__icon{animation-play-state:paused}

@keyframes spot-spin{to{transform:rotate(360deg)}}
@keyframes spot-float{0%,100%{translate:0 0}50%{translate:0 -12px}}
@keyframes spot-shadow{0%,100%{transform:scaleX(1);opacity:1}50%{transform:scaleX(.82);opacity:.7}}
@keyframes spot-seal{0%,100%{translate:0 0}50%{translate:0 -6px}}

/* ── стрелки ── */
.spot__nav{position:absolute;top:50%;z-index:4;display:grid;place-items:center;width:44px;height:44px;margin-top:-22px;border:1px solid rgb(255 255 255 / .2);border-radius:50%;
  background:rgb(0 0 0 / .5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;cursor:pointer;opacity:.85;transition:opacity .25s,background .2s,transform .25s}
.spot:hover .spot__nav{opacity:1}
.spot__nav:active{transform:scale(.94)}
.spot__nav:hover{background:rgb(0 0 0 / .75)}
.spot__nav svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2}
.spot__nav--l{left:14px}
.spot__nav--r{right:14px}


/* ── планшет ── */
@media (max-width:1100px){
  .spot__slide{grid-template-columns:minmax(0,1fr) minmax(260px,360px)}
}
/* ── телефон: арт справа сверху за текстом, цена в тексте ── */
@media (max-width:820px){
  .spot__track{border-radius:22px}
  .spot__slide{grid-template-columns:minmax(0,1fr);min-height:0;padding:24px 20px 22px}
  .spot__art{position:absolute;right:-34px;top:8px;width:210px;z-index:-1;opacity:.95}
  .spot__glass--c,.spot__seal,.spot__ring--1{display:none}
  .spot__word{font-size:110px;bottom:-.16em}
  .spot__txt{gap:12px;padding-right:96px}
  .spot__title{font-size:clamp(34px,10vw,46px)}
  .spot__sub{display:none}
  .spot__price{display:flex}
  .spot__go{height:46px;padding:0 18px;font-size:14px}
  .spot__nav{display:none}
}
@media (max-width:420px){
  .spot__art{width:170px;right:-36px}
  .spot__txt{padding-right:64px}
  .spot__cta{gap:10px 14px}
}
@media (prefers-reduced-motion:reduce){
  .spot__icon,.spot__shadow,.spot__glass,.spot__seal,.spot__ring--1::before,.spot__ring--2{animation:none}
}