/* Главная — из макета home.html (общие правила в base.css) */
/* Hero-карусель */
.hero{position:relative;height:clamp(560px,86vh,900px);overflow:hidden;background:var(--bg)}
.hero-stage{position:absolute;inset:0}
.slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .9s ease,visibility 0s .9s}
.slide.on{opacity:1;visibility:visible;transition:opacity .9s ease}
.slide>img,.slide>picture>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,center 30%);transform:scale(1.06);transition:transform 8s linear}
.slide.on>img,.slide.on>picture>img{transform:scale(1)}
.slide::after{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.45) 38%,transparent 66%),
  linear-gradient(0deg,var(--bg) 0%,rgba(0,0,0,.6) 22%,transparent 50%)}
.slide-body{position:absolute;z-index:2;left:0;right:0;bottom:clamp(64px,10vh,120px)}
.slide-body .wrap{display:grid;gap:18px;justify-items:start}
.slide-body .inner{display:grid;gap:18px;justify-items:start;max-width:560px}
.badge{display:inline-flex;align-items:center;gap:8px;font:600 .8rem/1 var(--font-ui);padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.14);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.badge i{width:7px;height:7px;border-radius:50%;background:var(--accent);font-style:normal}
.title-logo{max-width:min(440px,78vw);max-height:150px;width:auto;object-fit:contain;object-position:left bottom;filter:drop-shadow(0 4px 24px rgba(0,0,0,.5))}
.title-text{font:800 clamp(2.6rem,6.4vw,5.4rem)/.95 var(--font-display);letter-spacing:-.04em;text-wrap:balance}
.meta-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font:500 .92rem/1.3 var(--font-ui);color:rgba(245,245,247,.86)}
.meta-row .sep{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.6}
.score{display:inline-flex;align-items:center;gap:6px;font:700 .85rem/1 var(--font-ui);padding:6px 9px;border-radius:8px;background:var(--fg);color:#000}
.score small{font-weight:600;font-size:.68rem;letter-spacing:.04em;text-transform:uppercase;opacity:.7}
.slide-lead{font-size:clamp(1rem,1.3vw,1.15rem);line-height:1.5;color:rgba(245,245,247,.9);text-wrap:pretty}
.actions{display:flex;gap:10px;flex-wrap:wrap}
.dots{position:absolute;z-index:3;right:var(--gutter);bottom:clamp(64px,10vh,120px);display:flex;gap:8px}
.dot-btn{all:unset;cursor:pointer;width:34px;height:4px;border-radius:4px;background:rgba(255,255,255,.3);overflow:hidden;position:relative}
.dot-btn span{position:absolute;inset:0;width:0;background:var(--fg)}
.dot-btn[aria-current="true"] span{animation:fill var(--dur,7s) linear forwards}
.dot-btn:focus-visible{outline:2px solid var(--fg);outline-offset:4px}
.hero.paused .dot-btn[aria-current="true"] span{animation-play-state:paused}
@keyframes fill{to{width:100%}}
@media (max-width:760px){
  .hero{height:auto;min-height:0}
  .slide{position:absolute}
  .hero-stage{position:relative;height:clamp(620px,92vh,760px)}
  .slide::after{background:linear-gradient(0deg,var(--bg) 0%,rgba(0,0,0,.75) 38%,rgba(0,0,0,.1) 70%,rgba(0,0,0,.35) 100%)}
  .slide-body{bottom:56px}.dots{left:var(--gutter);right:auto;bottom:24px}
  .title-logo{max-height:110px}
}
/* Полки */
.shelf{position:relative}
.arrows{display:flex;gap:8px}
.arrow{all:unset;cursor:pointer;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.1);display:grid;place-items:center;font-size:1.3rem;line-height:1}
.arrow:hover{background:rgba(255,255,255,.2)}
.arrow:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
@media (max-width:760px){.arrows{display:none}}
/* Сегодня — бенто */
.bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:16px;height:clamp(460px,44vw,640px)}
.tile{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--card);isolation:isolate;min-height:0}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1);z-index:-2}
.tile::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,.35) 45%,transparent 70%)}
.tile:hover img{transform:scale(1.05)}
.tile .txt{position:absolute;left:0;right:0;bottom:0;padding:clamp(16px,2vw,26px);display:grid;gap:8px}
.tile h3{font:700 1.2rem/1.2 var(--font-display);letter-spacing:-.02em;text-wrap:balance}
.tile .sub{font-size:.88rem;color:rgba(245,245,247,.75)}
.tile.big{grid-column:span 2;grid-row:span 2}
.tile.big h3{font-size:clamp(1.6rem,2.6vw,2.4rem);line-height:1.06;letter-spacing:-.03em}
.tile.big p.lead{color:rgba(245,245,247,.82);max-width:46ch;font-size:1rem}
@media (max-width:960px){.bento{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:220px;height:auto}.tile.big{grid-row:span 2}}
@media (max-width:560px){.bento{grid-template-columns:minmax(0,1fr);grid-auto-rows:240px}.tile.big{grid-column:auto;grid-row:span 2}}
/* Новости */
.news-row{grid-auto-columns:clamp(240px,21vw,300px)}
.news{display:grid;gap:12px;align-content:start}
.news .img{aspect-ratio:16/9}
.news time{font:600 .78rem/1 var(--font-ui);color:var(--accent)}
.news h3{font:600 1rem/1.3 var(--font-display);letter-spacing:-.01em;text-wrap:pretty;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.news-note{font-size:.8rem;color:var(--fg-3);margin-top:4px}
@media (max-width:640px){
  .news-row{grid-auto-flow:row;grid-auto-columns:auto;overflow:visible;margin-inline:0;padding-inline:0;gap:0}
  .news{grid-template-columns:120px minmax(0,1fr);gap:4px 14px;padding-block:12px;border-top:1px solid var(--line)}
  .news .img{grid-row:span 2;border-radius:var(--r-sm)}
  .news time{align-self:end}
}
/* Что посмотреть */
.seg{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:var(--card);max-width:100%;overflow-x:auto;scrollbar-width:none;margin-bottom:24px}
.seg::-webkit-scrollbar{display:none}
.seg button{all:unset;cursor:pointer;white-space:nowrap;padding:10px 18px;border-radius:999px;font:500 .92rem/1 var(--font-ui);color:var(--fg-2)}
.seg button:hover{color:var(--fg)}
.seg button[aria-selected="true"]{background:var(--fg);color:#000;font-weight:600}
.seg button:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
.picks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.pick{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;align-items:start;padding:14px;border-radius:var(--r-lg);background:var(--card);transition:background .2s}
.pick:hover{background:var(--card-2)}
.pick .img{aspect-ratio:2/3;border-radius:var(--r-sm)}
.pick h3{font:700 1.08rem/1.2 var(--font-display);letter-spacing:-.015em}
.pick .m{font-size:.82rem;color:var(--fg-3);margin-top:4px}
.pick .why{font-size:.9rem;color:var(--fg-2);margin-top:10px}
@media (max-width:1180px){.picks{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.picks{grid-template-columns:minmax(0,1fr)}.pick{grid-template-columns:96px minmax(0,1fr)}}
/* TOP-10 */
.top-row{grid-auto-columns:clamp(250px,24vw,330px)}
.top-item{display:grid;gap:12px}
.top-art{display:grid;grid-template-columns:42% 58%;align-items:end;aspect-ratio:1.15}
.big-num{font:800 clamp(7rem,12vw,10.5rem)/.78 var(--font-display);letter-spacing:-.08em;color:transparent;-webkit-text-stroke:2px rgba(245,245,247,.55);text-align:right;padding-right:6px;font-variant-numeric:lining-nums;user-select:none}
.top-item:hover .big-num{-webkit-text-stroke-color:var(--fg)}
.top-art .img{aspect-ratio:2/3;border-radius:var(--r-sm);box-shadow:0 12px 40px rgba(0,0,0,.6)}
.top-item.wide .big-num{letter-spacing:-.1em;font-size:clamp(5.6rem,9.6vw,8.4rem)}
.top-meta{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;align-items:start}
.top-meta h3{font:700 1.05rem/1.25 var(--font-display);letter-spacing:-.015em}
.top-meta .m{font-size:.82rem;color:var(--fg-3);grid-column:1}
.rate{grid-row:1 / span 2;grid-column:2;display:grid;justify-items:end;gap:4px}
.rate b{font:700 1.05rem/1 var(--font-display);font-variant-numeric:tabular-nums}
.delta{font:600 .72rem/1 var(--font-ui);color:var(--fg-3)}
.delta.up{color:var(--up)}.delta.down{color:var(--down)}
/* Пауза */
.pause{position:relative;margin-top:var(--section);min-height:clamp(420px,52vw,640px);display:grid;align-items:center;overflow:hidden;isolation:isolate}
.pause img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;filter:grayscale(1) contrast(1.1)}
.pause::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.6) 50%,rgba(0,0,0,.25) 100%),linear-gradient(0deg,var(--bg),transparent 25%,transparent 75%,var(--bg))}
.pause blockquote{display:grid;gap:22px;max-width:760px}
.pause p{font:700 clamp(2rem,4.4vw,3.8rem)/1.05 var(--font-display);letter-spacing:-.035em;text-wrap:balance}
.pause cite{font:500 1rem/1.3 var(--font-ui);font-style:normal;color:var(--fg-2)}
.pause cite b{color:var(--fg);font-weight:600}
/* Рецензии */
.reviews{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.rev{display:grid;gap:14px;align-content:start;background:var(--card);border-radius:var(--r-lg);overflow:hidden;padding-bottom:22px;transition:background .2s}
.rev:hover{background:var(--card-2)}
.rev .img{aspect-ratio:16/9;border-radius:0}
.rev .ov{position:absolute;left:14px;top:14px;display:flex;gap:6px}
.rev-b{padding-inline:22px;display:grid;gap:10px}
.rev-top{display:flex;justify-content:space-between;align-items:start;gap:14px}
.rev h3{font:700 1.4rem/1.15 var(--font-display);letter-spacing:-.025em}
.ring{flex:none;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font:800 1.1rem/1 var(--font-display);background:conic-gradient(var(--accent) calc(var(--v) * 1%),rgba(255,255,255,.1) 0);position:relative}
.ring::before{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--card)}
.rev:hover .ring::before{background:var(--card-2)}
.ring span{position:relative}
.rev .by{font-size:.85rem;color:var(--fg-3)}
.rev .who{font-size:.95rem;color:var(--fg-2)}
.rev .who b{color:var(--fg);font-weight:600}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font:500 .78rem/1 var(--font-ui);padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.08);color:var(--fg-2)}
.chip.safe{background:rgba(48,209,88,.14);color:var(--up)}
.chip.glass{background:rgba(0,0,0,.55);color:var(--fg);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
@media (max-width:1000px){.reviews{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media (max-width:660px){.reviews{grid-template-columns:minmax(0,1fr)}}
/* Скрытые 250 */
.hidden-panel{border-radius:28px;overflow:hidden;position:relative;isolation:isolate;padding:clamp(24px,4vw,56px);display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,2fr);gap:clamp(24px,4vw,56px);align-items:center;
  background:radial-gradient(80% 120% at 0% 0%,rgba(255,55,95,.45),transparent 60%),radial-gradient(70% 100% at 100% 100%,rgba(94,92,230,.35),transparent 60%),#120a10}
.hidden-panel h2{font:800 clamp(2rem,3.6vw,3.2rem)/1 var(--font-display);letter-spacing:-.04em;text-wrap:balance}
.hidden-panel .intro{display:grid;gap:16px;justify-items:start}
.hidden-panel .intro p{color:rgba(245,245,247,.82)}
.not-in{display:flex;flex-wrap:wrap;gap:6px}
.not-in span{font:600 .76rem/1 var(--font-ui);padding:7px 10px;border-radius:999px;background:rgba(0,0,0,.35)}
.not-in span.yes{background:var(--fg);color:#000}
.hid-row{grid-auto-columns:clamp(150px,13vw,190px);margin-inline:0;padding-inline:0;scroll-padding-inline:0}
.hid{display:grid;gap:10px}
.hid .img{aspect-ratio:2/3;border-radius:var(--r-sm);box-shadow:0 18px 40px rgba(0,0,0,.45)}
.hid .no{position:absolute;left:8px;top:8px;font:700 .75rem/1 var(--font-ui);padding:6px 8px;border-radius:8px;background:rgba(0,0,0,.65);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.hid h3{font:600 .95rem/1.25 var(--font-display)}
.hid .m{font-size:.8rem;color:rgba(245,245,247,.62)}
@media (max-width:900px){.hidden-panel{grid-template-columns:minmax(0,1fr)}.hid-row{grid-auto-columns:150px}}
/* Подборки */
.coll{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.coll .tile{aspect-ratio:3/4}
.coll .tile.big{grid-column:span 2;grid-row:auto;aspect-ratio:auto}
.coll .count{font:600 .78rem/1 var(--font-ui);color:rgba(245,245,247,.75)}
@media (max-width:960px){.coll{grid-template-columns:repeat(2,minmax(0,1fr))}.coll .tile.big{aspect-ratio:16/10}}
@media (max-width:520px){.coll{grid-template-columns:minmax(0,1fr)}.coll .tile.big{grid-column:auto}.coll .tile{aspect-ratio:16/11}}
/* Классика */
.retro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.2fr);gap:clamp(24px,4vw,56px);align-items:start}
.retro .intro{display:grid;gap:14px}
.retro .intro h2{font:800 clamp(2rem,3.4vw,3rem)/1 var(--font-display);letter-spacing:-.04em}
.retro .intro p{color:var(--fg-2)}
.noir{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.noir a{display:grid;gap:10px}
.noir .img{aspect-ratio:2/3;border-radius:var(--r-sm)}
.noir .img img{filter:grayscale(1);transition:filter .5s,transform .7s}
.noir a:hover .img img{filter:none}
.noir h3{font:600 1rem/1.2 var(--font-display)}
.noir .m{font-size:.8rem;color:var(--fg-3)}
@media (max-width:900px){.retro{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.noir{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Блог */
.blog{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.blog a{display:grid;gap:10px;padding:22px;border-radius:var(--r-lg);background:var(--bg-2);border:1px solid var(--line);transition:border-color .2s}
.blog a:hover{border-color:rgba(255,255,255,.3)}
.blog h3{font:600 1.05rem/1.3 var(--font-display);letter-spacing:-.01em}
.blog .m{font-size:.8rem;color:var(--fg-3)}
.ad-slot{border:1px dashed var(--line);border-radius:var(--r-md);display:grid;place-items:center;color:var(--fg-3);min-height:120px}
@media (max-width:800px){.blog{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}.slide>img,.slide>picture>img{transform:none!important}}
.picks[hidden]{display:none}