.page-index{min-height:100%;background:radial-gradient(ellipse 80% 50% at 50% -10%,#1a1f3a 0%,var(--ink) 55%);padding:0 var(--pad) 64px}
.top{padding:28px 0 8px}
.brand img{width:min(42vw,200px);height:auto}
.kicker{margin:clamp(32px,6vh,64px) 0 12px;font:500 13px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--yellow)}
h1{margin:0 0 16px;font:800 italic clamp(48px,9vw,96px)/.9 var(--display);text-transform:uppercase;letter-spacing:.02em}
.lede{margin:0 0 clamp(36px,5vh,64px);max-width:34em;color:var(--t-muted);font-size:clamp(16px,1.3vw,18px)}
.picks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:18px;max-width:1100px}
.card{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto 1fr auto;gap:4px 18px;align-items:start;height:100%;padding:22px;border:1px solid #232633;border-radius:22px;background:var(--ink-2);text-decoration:none;color:inherit;transition:border-color .3s var(--ease),transform .3s var(--ease)}
.card:hover{border-color:var(--yellow);transform:translateY(-3px)}
.thumb{grid-row:1 / span 4;width:92px;height:118px;border-radius:14px;background:#0b0c10;overflow:hidden;position:relative;display:grid;place-items:center}
.num{font:500 12px/1 var(--mono);color:var(--yellow);letter-spacing:.14em}
.title{font:800 italic clamp(28px,3vw,40px)/.95 var(--display);text-transform:uppercase;margin:0}
.desc{margin:8px 0 12px;color:var(--t-muted);font-size:15px;line-height:1.5}
.go{font-weight:800;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);background:var(--yellow);justify-self:start;padding:8px 14px;border-radius:999px}

.thumb-lines{background:#101426}
.thumb-lines svg{width:58px;height:96px;transform:rotateX(55deg) scale(1.15);transform-origin:center 60%}
.thumb-lines .t{fill:#152018;opacity:.7}
.thumb-lines path{fill:none;stroke:#f4f4ef;stroke-width:2;stroke-dasharray:1;stroke-dashoffset:1;animation:miniDraw 2.8s var(--ease) infinite}
@keyframes miniDraw{0%{stroke-dashoffset:1}40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:1}}

.thumb-ball{background:#07080c}
.mini-floor{position:absolute;left:10%;right:10%;bottom:22px;height:8px;border-radius:50%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent)}
.mini-ball{position:absolute;bottom:28px;width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#fff6a8,#ebea64 60%,#b8b62e);animation:miniBounce 1.6s cubic-bezier(.2,.7,.3,1) infinite;will-change:transform}
@keyframes miniBounce{0%,100%{transform:translateY(-52px) scale(1,1)}45%{transform:translateY(0) scale(1,1)}52%{transform:translateY(0) scale(1.3,.7)}60%{transform:translateY(0) scale(1,1)}}

.thumb-glass{background:url(/img/header-960.webp) center/cover no-repeat}
.thumb-glass::before{content:"";position:absolute;inset:0;background:rgba(11,12,16,.5);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.mini-sweep{position:absolute;inset:-20%;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.2) 50%,transparent 60%);animation:miniSweep 2.2s var(--ease) infinite;z-index:1}
@keyframes miniSweep{from{transform:translateX(-50%)}to{transform:translateX(50%)}}
.mini-logo{position:relative;z-index:2;font:800 italic 13px/1 var(--display);letter-spacing:.08em;color:#fff}

.thumb-lights{background:#000}
.thumb-lights .dot{position:absolute;width:9px;height:9px;border-radius:50%;background:#ebea64;opacity:.35;box-shadow:0 0 12px 5px rgba(235,234,100,.25)}
.d1{left:22%;top:22%}.d2{right:22%;top:22%}.d3{left:16%;top:48%}.d4{right:16%;top:48%}
.d1{animation:miniLamp 2.8s linear infinite}
.d2{animation:miniLamp 2.8s linear .5s infinite}
.d3{animation:miniLamp 2.8s linear 1s infinite}
.d4{animation:miniLamp 2.8s linear 1.5s infinite}
@keyframes miniLamp{0%,18%{opacity:.3;box-shadow:0 0 8px 3px rgba(235,234,100,.15)}24%,82%{opacity:1;box-shadow:0 0 16px 7px rgba(235,234,100,.55)}100%{opacity:.3;box-shadow:0 0 8px 3px rgba(235,234,100,.15)}}

@media (max-width:800px){
  .picks{grid-template-columns:1fr}
  .thumb{grid-row:auto;grid-column:1;width:100%;height:110px}
  .card{grid-template-columns:1fr;grid-template-rows:auto}
  .num,.title,.desc,.go{grid-column:1}
}
@media (orientation:landscape) and (max-height:500px){
  h1{font-size:clamp(36px,8vh,56px)}
  .lede{margin-bottom:20px}
  .picks{grid-template-columns:repeat(4,1fr);gap:10px}
  .thumb{display:none}
  .desc{display:none}
  .card{padding:14px}
}
@media (prefers-reduced-motion:reduce){
  .thumb-lines path,.mini-ball,.mini-sweep,.thumb-lights .dot{animation:none}
  .thumb-lines path{stroke-dashoffset:0}
  .mini-ball{transform:none}
  .card:hover{transform:none}
}