@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@500;600;700&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;700&display=swap');

/* =========================================================================
   SenpaiStash — Neon Akihabara design system
   ========================================================================= */

:root{
  /* ink */
  --ink-900:#08050D;
  --ink-850:#0B0712;
  --ink-800:#0E0916;
  --ink-750:#140D20;
  --ink-700:#1A1229;
  --ink-600:#241835;
  --ink-500:#31234a;

  /* neon */
  --magenta:#FF2D72;
  --magenta-2:#FF4FA0;
  --magenta-dim:#B81D53;
  --cyan:#38E1FF;
  --cyan-dim:#1892ad;
  --violet:#A855F7;
  --amber:#FFC53D;
  --green:#3DDC97;

  /* text */
  --text:#F4EEFB;
  --text-2:#CBBDDE;
  --muted:#9182A6;
  --muted-2:#6E6182;

  /* surfaces */
  --surface:rgba(255,255,255,.030);
  --surface-2:rgba(255,255,255,.055);
  --line:rgba(255,255,255,.085);
  --line-2:rgba(255,255,255,.16);
  --line-neon:rgba(255,45,114,.38);

  /* type */
  --font-display:'Chakra Petch',ui-sans-serif,system-ui,sans-serif;
  --font-body:'Manrope',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;

  /* radii */
  --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px;

  /* shadow / glow */
  --sh-1:0 2px 8px rgba(0,0,0,.4);
  --sh-2:0 12px 32px -8px rgba(0,0,0,.6);
  --sh-3:0 32px 70px -20px rgba(0,0,0,.75);

  /* layout */
  --wrap:1320px;
  --header-h:72px;

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
}

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 20px);
}

body{
  margin:0;
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.65;
  font-weight:450;
  color:var(--text-2);
  background:var(--ink-900);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

/* ambient background ------------------------------------------------------ */
body::before{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(900px 620px at 12% -8%, rgba(255,45,114,.16), transparent 62%),
    radial-gradient(760px 560px at 92% 4%, rgba(56,225,255,.10), transparent 60%),
    radial-gradient(1000px 700px at 50% 108%, rgba(168,85,247,.11), transparent 65%);
}
body::after{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.021) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.021) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 120% 78% at 50% 0%, #000 22%, transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 120% 78% at 50% 0%, #000 22%, transparent 78%);
}
main,header,footer,section{position:relative; z-index:1}

/* typography -------------------------------------------------------------- */
h1,h2,h3,h4,h5{
  font-family:var(--font-display);
  color:var(--text);
  font-weight:700;
  line-height:1.14;
  letter-spacing:-.015em;
  margin:0 0 .5em;
}
h1{font-size:clamp(2.1rem,4.6vw,3.5rem)}
h2{font-size:clamp(1.6rem,2.9vw,2.35rem)}
h3{font-size:clamp(1.1rem,1.6vw,1.35rem)}
p{margin:0 0 1.1em}
a{color:var(--magenta-2); text-decoration:none; transition:color .2s}
a:hover{color:var(--cyan)}
img{max-width:100%; display:block}
strong{color:var(--text); font-weight:700}
::selection{background:var(--magenta); color:#fff}

:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:3px;
  border-radius:4px;
}

.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:24px}
.sr{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

/* section scaffolding ----------------------------------------------------- */
.sec{padding:clamp(56px,7vw,104px) 0; position:relative}
.sec--tight{padding-top:clamp(38px,4vw,60px)}
.sec-head{max-width:720px; margin:0 0 clamp(28px,3.4vw,46px)}
.sec-head.is-center{margin-inline:auto; text-align:center}

.kicker{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-mono); font-size:.7rem; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--magenta-2);
  margin-bottom:14px;
}
.kicker::before{
  content:""; width:26px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--magenta),var(--cyan));
  animation:kickerPulse 2.6s var(--ease-io) infinite;
}
@keyframes kickerPulse{0%,100%{opacity:.45;width:16px}50%{opacity:1;width:34px}}

.sec-title{margin:0 0 .45em}
.sec-sub{color:var(--muted); font-size:1.02rem; margin:0; max-width:62ch}
.is-center .sec-sub{margin-inline:auto}

.grad-text{
  background:linear-gradient(100deg,var(--magenta) 8%,var(--magenta-2) 42%,var(--cyan) 92%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

/* buttons ----------------------------------------------------------------- */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--font-display); font-weight:700; font-size:.94rem; letter-spacing:.02em;
  padding:14px 26px; border-radius:var(--r-pill); border:0; cursor:pointer;
  color:#fff; background:linear-gradient(100deg,var(--magenta),var(--magenta-2) 55%,var(--violet));
  box-shadow:0 8px 26px -8px rgba(255,45,114,.7);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), filter .25s;
  overflow:hidden; text-align:center;
}
.btn::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.42) 50%,transparent 75%);
  transform:translateX(-120%); transition:transform .7s var(--ease);
}
.btn:hover{color:#fff; transform:translateY(-2px); box-shadow:0 16px 40px -10px rgba(255,45,114,.85)}
.btn:hover::after{transform:translateX(120%)}
.btn:active{transform:translateY(0)}
.btn > *{position:relative; z-index:1}
.btn--ghost{
  background:var(--surface); color:var(--text);
  box-shadow:inset 0 0 0 1px var(--line-2);
}
.btn--ghost:hover{box-shadow:inset 0 0 0 1px var(--magenta), 0 10px 30px -12px rgba(255,45,114,.6); color:#fff}
.btn--lg{padding:17px 34px; font-size:1.02rem}
.btn--block{display:flex; width:100%}

/* chips / tags ------------------------------------------------------------ */
.tag{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-mono); font-size:.68rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  padding:5px 11px; border-radius:var(--r-pill);
  background:rgba(255,45,114,.13); color:var(--magenta-2);
  border:1px solid rgba(255,45,114,.3);
  white-space:nowrap;
}
.tag--cyan{background:rgba(56,225,255,.12); color:var(--cyan); border-color:rgba(56,225,255,.3)}
.tag--amber{background:rgba(255,197,61,.12); color:var(--amber); border-color:rgba(255,197,61,.3)}
.tag--green{background:rgba(61,220,151,.12); color:var(--green); border-color:rgba(61,220,151,.3)}

/* =========================================================================
   HEADER / NAV
   ========================================================================= */
.hd{
  position:sticky; top:0; z-index:200;
  background:rgba(8,5,13,.62);
  backdrop-filter:blur(20px) saturate(1.5); -webkit-backdrop-filter:blur(20px) saturate(1.5);
  border-bottom:1px solid var(--line);
  transition:background .3s, border-color .3s, box-shadow .3s;
}
.hd::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:linear-gradient(90deg,transparent,var(--magenta) 22%,var(--cyan) 78%,transparent);
  opacity:0; transition:opacity .35s;
}
.hd.is-stuck{background:rgba(8,5,13,.9); box-shadow:0 10px 34px -14px rgba(0,0,0,.9)}
.hd.is-stuck::after{opacity:.75}

.hd-in{
  max-width:var(--wrap); margin-inline:auto; padding:0 24px;
  height:var(--header-h); display:flex; align-items:center; gap:20px;
}

.brand{display:flex; align-items:center; gap:11px; flex-shrink:0; color:var(--text)}
.brand:hover{color:var(--text)}
.brand-logo{
  width:38px; height:38px; border-radius:11px; flex-shrink:0;
  transition:transform .5s var(--ease), filter .35s;
  filter:drop-shadow(0 3px 10px rgba(255,45,114,.45));
}
.brand:hover .brand-logo{transform:rotate(-8deg) scale(1.08); filter:drop-shadow(0 4px 16px rgba(255,45,114,.8))}
.brand-txt{display:flex; flex-direction:column; line-height:1}
.brand-name{
  font-family:var(--font-display); font-weight:700; font-size:1.16rem;
  letter-spacing:-.02em; color:var(--text);
}
.brand-name em{font-style:normal; color:var(--magenta-2)}
.brand-tag{
  display:block; font-family:var(--font-mono); font-size:.55rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--muted-2); margin-top:3px;
}

.nav{margin-left:auto}
.nav-list{display:flex; align-items:center; gap:4px; list-style:none; margin:0; padding:0}
.nav-link{
  position:relative; display:block; padding:9px 15px; border-radius:var(--r-sm);
  font-family:var(--font-display); font-weight:600; font-size:.92rem;
  color:var(--text-2); transition:color .22s, background .22s;
}
.nav-link::after{
  content:""; position:absolute; left:15px; right:15px; bottom:4px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--magenta),var(--cyan));
  transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease);
}
.nav-link:hover,.nav-link.is-active{color:var(--text); background:var(--surface)}
.nav-link:hover::after,.nav-link.is-active::after{transform:scaleX(1)}

.hd-actions{display:flex; align-items:center; gap:10px; flex-shrink:0}
.hd-cta{padding:10px 20px; font-size:.86rem}

.burger{display:none}
.nav-toggle{display:none}

@media (max-width:1000px){
  .hd-cta{display:none}
  .nav{margin-left:auto}
}
@media (max-width:860px){
  .burger{
    display:flex; flex-direction:column; justify-content:center; align-items:center;
    width:40px; height:40px; margin-left:auto; gap:4px;
    border-radius:var(--r-sm); border:1px solid var(--line); background:var(--surface);
    cursor:pointer; order:9;
  }
  .burger span{
    display:block; width:18px; height:2px; border-radius:2px; background:var(--text);
    transition:transform .3s var(--ease), opacity .2s;
  }
  .nav-toggle:checked ~ .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .nav-toggle:checked ~ .burger span:nth-child(2){opacity:0}
  .nav-toggle:checked ~ .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  .nav{
    position:fixed; inset:var(--header-h) 0 auto 0; margin:0;
    background:rgba(11,7,18,.98);
    backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
    border-bottom:1px solid var(--line);
    clip-path:inset(0 0 100% 0); opacity:0; pointer-events:none;
    transition:clip-path .42s var(--ease), opacity .3s;
  }
  .nav-toggle:checked ~ .nav{clip-path:inset(0 0 0 0); opacity:1; pointer-events:auto}
  .nav-list{flex-direction:column; align-items:stretch; gap:0; padding:12px 24px 22px}
  .nav-link{padding:15px 6px; border-bottom:1px solid var(--line); border-radius:0; font-size:1.02rem}
  .nav-link::after{left:6px; bottom:0}
}

/* =========================================================================
   HERO
   ========================================================================= */
.hero{
  position:relative; overflow:hidden;
  min-height:min(78vh,790px);
  display:flex; align-items:center;
  padding:clamp(56px,7vw,100px) 0 clamp(60px,7vw,96px);
  border-bottom:1px solid var(--line);
}
.hero__bg{
  position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; object-position:center 42%;
  transform:scale(1.12);
  animation:heroDrift 26s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes heroDrift{
  0%{transform:scale(1.12) translate3d(0,0,0)}
  100%{transform:scale(1.2) translate3d(-2.2%,-2%,0)}
}
.hero__veil{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg,rgba(8,5,13,.74) 0%,rgba(8,5,13,.5) 38%,rgba(8,5,13,.93) 88%,var(--ink-900) 100%),
    linear-gradient(100deg,rgba(8,5,13,.95) 6%,rgba(8,5,13,.4) 54%,rgba(255,45,114,.1) 100%);
}
.hero__scan{
  position:absolute; inset:0; z-index:2; pointer-events:none; overflow:hidden;
  mix-blend-mode:screen; opacity:.55;
}
.hero__scan::before{
  content:""; position:absolute; left:0; right:0; height:180px;
  background:linear-gradient(180deg,transparent,rgba(56,225,255,.16),rgba(255,45,114,.1),transparent);
  animation:scanSweep 7s linear infinite;
}
@keyframes scanSweep{0%{top:-200px}100%{top:110%}}
.hero__lines{
  position:absolute; inset:0; z-index:2; pointer-events:none; opacity:.2;
  background:repeating-linear-gradient(180deg,transparent 0 2px,rgba(255,255,255,.08) 2px 3px);
}
.hero__floor{
  position:absolute; left:-25%; right:-25%; bottom:-2px; height:42%; z-index:2; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,45,114,.42) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56,225,255,.28) 1px, transparent 1px);
  background-size:64px 40px;
  transform:perspective(340px) rotateX(72deg);
  transform-origin:bottom;
  mask-image:linear-gradient(180deg,transparent,#000 62%);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 62%);
  animation:floorRun 3.4s linear infinite;
  opacity:.9;
}
@keyframes floorRun{to{background-position:0 40px, 0 0}}

.hero__in{position:relative; z-index:5; width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:24px}
.hero__grid{display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr); gap:clamp(28px,4vw,64px); align-items:center}
@media (max-width:960px){.hero__grid{grid-template-columns:1fr}}

.hero__badge{
  display:inline-flex; align-items:center; gap:10px;
  padding:7px 14px 7px 7px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.06); border:1px solid var(--line-2);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  font-size:.79rem; color:var(--text-2); margin-bottom:22px;
}
.hero__badge b{
  font-family:var(--font-mono); font-size:.66rem; font-weight:700; letter-spacing:.1em;
  padding:4px 9px; border-radius:var(--r-pill); color:#fff;
  background:linear-gradient(100deg,var(--magenta),var(--violet));
}
.hero__badge i{
  font-style:normal; width:7px; height:7px; border-radius:50%; background:var(--green);
  box-shadow:0 0 0 0 rgba(61,220,151,.7); animation:livePing 2s infinite; flex-shrink:0;
}
@keyframes livePing{
  0%{box-shadow:0 0 0 0 rgba(61,220,151,.65)}
  70%{box-shadow:0 0 0 8px rgba(61,220,151,0)}
  100%{box-shadow:0 0 0 0 rgba(61,220,151,0)}
}

.hero__title{
  font-size:clamp(2.3rem,5.2vw,4rem);
  line-height:1.03; letter-spacing:-.03em; margin:0 0 20px; color:var(--text);
}
.hero__title span{display:block}
.hero__t1{font-size:.42em; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); margin-bottom:14px}
.hero__t2{position:relative}
.glitch{position:relative; display:inline-block}
.glitch::before,.glitch::after{
  content:attr(data-txt); position:absolute; inset:0; pointer-events:none;
  -webkit-text-fill-color:currentColor;
}
.glitch::before{color:var(--cyan); animation:glitchA 5.2s steps(2,end) infinite; opacity:.9}
.glitch::after{color:var(--magenta); animation:glitchB 5.2s steps(2,end) infinite; opacity:.9}
@keyframes glitchA{
  0%,88%,100%{transform:translate3d(0,0,0); clip-path:inset(0 0 100% 0)}
  90%{transform:translate3d(-3px,-1px,0); clip-path:inset(6% 0 62% 0)}
  93%{transform:translate3d(2px,1px,0); clip-path:inset(48% 0 24% 0)}
  96%{transform:translate3d(-2px,0,0); clip-path:inset(80% 0 4% 0)}
}
@keyframes glitchB{
  0%,88%,100%{transform:translate3d(0,0,0); clip-path:inset(0 0 100% 0)}
  91%{transform:translate3d(3px,1px,0); clip-path:inset(22% 0 52% 0)}
  94%{transform:translate3d(-2px,-1px,0); clip-path:inset(64% 0 18% 0)}
  97%{transform:translate3d(1px,0,0); clip-path:inset(12% 0 76% 0)}
}
.hero__t3{font-size:.46em; font-weight:600; color:var(--text-2); letter-spacing:-.01em; margin-top:10px}

.hero__sub{font-size:1.06rem; color:var(--text-2); max-width:54ch; margin:0 0 26px}
.hero__sub b{color:var(--text)}

/* hero search */
.hsearch{position:relative; max-width:560px; margin-bottom:8px}
.hsearch__box{
  display:flex; align-items:center; gap:10px;
  padding:6px 6px 6px 18px; border-radius:var(--r-pill);
  background:rgba(11,7,18,.8); border:1px solid var(--line-2);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  transition:border-color .25s, box-shadow .25s;
}
.hsearch__box:focus-within{border-color:var(--magenta); box-shadow:0 0 0 4px rgba(255,45,114,.16), 0 14px 40px -14px rgba(255,45,114,.7)}
.hsearch__ic{flex-shrink:0; color:var(--muted); transition:color .25s}
.hsearch__box:focus-within .hsearch__ic{color:var(--magenta-2)}
.hsearch__inp{
  flex:1; min-width:0; border:0; background:transparent; outline:0;
  font-family:var(--font-body); font-size:1rem; font-weight:500; color:var(--text); padding:11px 0;
}
.hsearch__inp::placeholder{color:var(--muted-2)}
.hsearch__btn{padding:11px 22px; font-size:.86rem; flex-shrink:0}
.hsearch__clear{
  display:none; border:0; background:transparent; color:var(--muted); cursor:pointer;
  font-size:1.2rem; line-height:1; padding:4px 6px; flex-shrink:0;
}
.hsearch__clear:hover{color:var(--magenta-2)}
.hsearch__box.has-val .hsearch__clear{display:block}

.hsearch__out{
  position:absolute; top:calc(100% + 10px); left:0; right:0; z-index:60;
  background:rgba(14,9,22,.98); border:1px solid var(--line-2); border-radius:var(--r-lg);
  box-shadow:var(--sh-3); overflow:hidden; padding:6px;
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  display:none; max-height:392px; overflow-y:auto;
}
.hsearch__out.is-open{display:block; animation:dropIn .28s var(--ease)}
@keyframes dropIn{from{opacity:0; transform:translateY(-8px)}to{opacity:1; transform:none}}
.hsr{
  display:flex; align-items:center; gap:12px; padding:9px 11px; border-radius:var(--r-md);
  color:var(--text-2); transition:background .18s;
}
.hsr:hover,.hsr.is-sel{background:rgba(255,45,114,.14); color:var(--text)}
.hsr img{width:42px; height:42px; border-radius:var(--r-sm); object-fit:cover; background:var(--ink-700); flex-shrink:0}
.hsr__b{min-width:0; flex:1; display:block}
.hsr__n{display:block; font-weight:700; font-size:.88rem; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.hsr__m{display:block; font-family:var(--font-mono); font-size:.62rem; color:var(--muted); letter-spacing:.06em; text-transform:uppercase; margin-top:2px}
.hsr__r{font-family:var(--font-mono); font-weight:700; font-size:.8rem; color:var(--amber); flex-shrink:0}
.hsearch__empty{padding:22px; text-align:center; color:var(--muted); font-size:.86rem}
.hsearch__more{
  display:block; text-align:center; padding:10px; margin-top:4px; border-top:1px solid var(--line);
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
}

.hsearch__hint{display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:.78rem; color:var(--muted-2); margin-top:14px}
.hsearch__hint b{font-weight:600; color:var(--muted)}
.hchip{
  padding:5px 12px; border-radius:var(--r-pill); border:1px solid var(--line);
  background:var(--surface); color:var(--text-2); cursor:pointer;
  font-family:var(--font-body); font-size:.74rem; font-weight:600; transition:.2s;
}
.hchip:hover{border-color:var(--magenta); color:#fff; background:rgba(255,45,114,.16); transform:translateY(-1px)}

.hero__stats{display:flex; flex-wrap:wrap; gap:clamp(20px,3vw,34px); margin-top:32px; padding-top:26px; border-top:1px solid var(--line)}
.hstat__n{
  font-family:var(--font-display); font-size:1.8rem; font-weight:700; line-height:1;
  color:var(--text); letter-spacing:-.02em;
}
.hstat__n em{font-style:normal; color:var(--magenta-2)}
.hstat__l{font-family:var(--font-mono); font-size:.61rem; letter-spacing:.15em; text-transform:uppercase; color:var(--muted); margin-top:7px}

/* hero right: floating card stack */
.hero__art{position:relative; height:clamp(340px,42vw,556px); perspective:1200px}
@media (max-width:960px){.hero__art{display:none}}

.hcard{
  position:absolute; width:min(240px,44%); border-radius:var(--r-lg); overflow:hidden;
  background:var(--ink-750); border:1px solid var(--line-2);
  box-shadow:var(--sh-3);
  transform-style:preserve-3d;
  animation:hcardFloat 7s ease-in-out infinite;
  transition:scale .5s var(--ease), box-shadow .5s;
}
.hcard img{width:100%; aspect-ratio:1/1; object-fit:cover; background:var(--ink-700)}
.hcard__b{display:block; padding:11px 13px 13px; background:linear-gradient(180deg,rgba(255,255,255,.05),transparent)}
.hcard__c{display:block; font-family:var(--font-mono); font-size:.57rem; letter-spacing:.13em; text-transform:uppercase; color:var(--cyan)}
.hcard__n{display:block; font-family:var(--font-display); font-size:.76rem; font-weight:700; color:var(--text); margin-top:4px; line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.hcard__r{display:flex; align-items:center; gap:5px; margin-top:8px; font-family:var(--font-mono); font-size:.72rem; font-weight:700; color:var(--amber)}
.hcard:hover{scale:1.06; box-shadow:0 40px 80px -20px rgba(255,45,114,.5); z-index:9}

/* card ≈ 165px image + ~92px body = ~257px; 2 stacked = 514 < 556, so no collision */
.hcard{width:min(165px,32%)}
.hcard--1{top:0;    left:0;   rotate:-7deg; animation-delay:0s;    z-index:4}
.hcard--2{top:12%;  right:0;  rotate:6deg;  animation-delay:-2.3s; z-index:3}
.hcard--3{bottom:0; left:26%; rotate:2deg;  animation-delay:-4.6s; z-index:2}
@keyframes hcardFloat{
  0%,100%{translate:0 0}
  50%{translate:0 -16px}
}

.hero__ring{
  position:absolute; top:50%; left:50%; width:min(420px,86%); aspect-ratio:1;
  translate:-50% -50%; border-radius:50%; pointer-events:none;
  border:1px dashed rgba(255,45,114,.26);
  animation:ringSpin 34s linear infinite;
}
.hero__ring::after{
  content:""; position:absolute; top:-5px; left:50%; width:10px; height:10px; border-radius:50%;
  background:var(--cyan); box-shadow:0 0 16px 3px var(--cyan); translate:-50% 0;
}
.hero__ring--2{width:min(560px,112%); border-color:rgba(56,225,255,.16); animation-duration:52s; animation-direction:reverse}
.hero__ring--2::after{background:var(--magenta); box-shadow:0 0 16px 3px var(--magenta)}
@keyframes ringSpin{to{rotate:360deg}}

.hero__cue{
  position:absolute; left:50%; bottom:20px; translate:-50% 0; z-index:6;
  display:grid; place-items:center; gap:8px;
  font-family:var(--font-mono); font-size:.58rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted-2);
}
.hero__cue i{display:block; width:1px; height:34px; background:linear-gradient(180deg,var(--magenta),transparent); animation:cueDrop 2.2s var(--ease-io) infinite}
@keyframes cueDrop{0%{transform:scaleY(0); transform-origin:top}55%{transform:scaleY(1); transform-origin:top}56%{transform-origin:bottom}100%{transform:scaleY(0); transform-origin:bottom}}
@media (max-width:960px){.hero__cue{display:none}}

/* =========================================================================
   BRAND MARQUEE
   ========================================================================= */
.mq{
  padding:20px 0; border-block:1px solid var(--line);
  background:rgba(255,255,255,.016); overflow:hidden; position:relative;
}
.mq::before,.mq::after{
  content:""; position:absolute; top:0; bottom:0; width:16%; z-index:2; pointer-events:none;
}
.mq::before{left:0;  background:linear-gradient(90deg,var(--ink-900),transparent)}
.mq::after{right:0; background:linear-gradient(270deg,var(--ink-900),transparent)}
.mq__track{display:flex; width:max-content; animation:mqRun 46s linear infinite}
.mq:hover .mq__track{animation-play-state:paused}
@keyframes mqRun{to{transform:translateX(-50%)}}
.mq__i{
  display:flex; align-items:center; gap:10px; padding:0 28px; flex-shrink:0;
  font-family:var(--font-display); font-weight:600; font-size:1rem;
  color:var(--muted-2); white-space:nowrap; transition:color .25s;
}
.mq__i:hover{color:var(--magenta-2)}
.mq__i::before{content:""; width:5px; height:5px; border-radius:50%; background:currentColor; opacity:.5; flex-shrink:0}

/* =========================================================================
   TOP PICKS — podium
   ========================================================================= */
.podium{display:grid; gap:20px; grid-template-columns:repeat(3,1fr); align-items:end}
@media (max-width:920px){.podium{grid-template-columns:1fr; align-items:stretch}}

.pk{
  position:relative; display:flex; flex-direction:column; overflow:hidden;
  border-radius:var(--r-xl); border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.012));
  color:var(--text-2);
  transition:transform .5s var(--ease), border-color .4s, box-shadow .5s;
  will-change:transform;
}
.pk::before{
  content:""; position:absolute; inset:0; z-index:6; pointer-events:none; opacity:0;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.14), transparent 62%);
  transition:opacity .35s;
}
.pk:hover::before{opacity:1}
.pk:hover{border-color:var(--line-neon); box-shadow:0 34px 70px -22px rgba(255,45,114,.5); color:var(--text-2)}

.pk__rank{
  position:absolute; top:16px; left:16px; z-index:5;
  display:grid; place-items:center; width:44px; height:44px; border-radius:13px;
  font-family:var(--font-display); font-weight:700; font-size:1.2rem; color:#fff;
  background:linear-gradient(140deg,var(--magenta),var(--violet));
  box-shadow:0 8px 22px -6px rgba(255,45,114,.85);
  border:1px solid rgba(255,255,255,.22);
}
.pk__crown{
  position:absolute; top:16px; right:16px; z-index:5;
  padding:6px 12px; border-radius:var(--r-pill);
  font-family:var(--font-mono); font-size:.59rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  background:linear-gradient(100deg,var(--amber),#ff9a3d); color:#2a1600;
  box-shadow:0 8px 22px -8px rgba(255,197,61,.9);
}
.pk__media{position:relative; overflow:hidden; background:var(--ink-800)}
.pk__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(8,5,13,.2) 0%,transparent 42%,rgba(8,5,13,.92) 100%);
}
.pk__img{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  transition:transform 1s var(--ease), filter .6s;
  filter:saturate(1.05);
}
.pk:hover .pk__img{transform:scale(1.09) rotate(-.6deg); filter:saturate(1.2) brightness(1.06)}
.pk__body{position:relative; z-index:3; padding:20px 22px 22px; margin-top:-46px; display:flex; flex-direction:column; flex:1}
.pk__cat{display:block; margin-bottom:10px}
.pk__name{
  font-size:1.1rem; margin:0 0 12px; line-height:1.28; color:var(--text);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.56em;
}
.pk__why{
  display:block; font-size:.85rem; color:var(--muted); margin:0 0 16px; line-height:1.55; flex:1;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.pk__foot{display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:14px; border-top:1px solid var(--line)}
.pk__score{display:flex; align-items:baseline; gap:4px; font-family:var(--font-mono); font-weight:700}
.pk__score b{font-size:1.38rem; color:var(--amber); line-height:1}
.pk__score span{font-size:.7rem; color:var(--muted-2)}
.pk__go{
  display:inline-flex; align-items:center; gap:7px; font-family:var(--font-display);
  font-weight:700; font-size:.82rem; color:var(--magenta-2); transition:gap .25s, color .25s;
}
.pk:hover .pk__go{gap:12px; color:var(--cyan)}

@media (min-width:921px){
  .pk--1{transform:translateY(-26px)}
  .pk--1:hover{transform:translateY(-32px)}
  .pk--1 .pk__name{font-size:1.26rem}
}
.pk--1{border-color:rgba(255,197,61,.3); background:linear-gradient(180deg,rgba(255,197,61,.09),rgba(255,255,255,.012))}
.pk--1 .pk__rank{background:linear-gradient(140deg,var(--amber),#ff8a3d); color:#2a1600}

/* =========================================================================
   COMPARE TABLE
   ========================================================================= */
.cmp{
  border:1px solid var(--line); border-radius:var(--r-xl); overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.042),rgba(255,255,255,.01));
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.cmp__scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}
.cmp table{width:100%; border-collapse:collapse; min-width:920px}
.cmp thead th{
  font-family:var(--font-mono); font-size:.62rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
  color:var(--muted); text-align:left; padding:16px 16px; white-space:nowrap;
  background:rgba(255,255,255,.035); border-bottom:1px solid var(--line-2);
}
.cmp thead th:first-child{padding-left:24px}
.cmp thead th.num{text-align:center}
.cmp tbody tr{
  border-bottom:1px solid var(--line); cursor:pointer;
  transition:background .28s;
  position:relative;
}
.cmp tbody tr:last-child{border-bottom:0}
.cmp tbody tr:hover{background:rgba(255,45,114,.09)}
.cmp td{padding:15px 16px; vertical-align:middle; font-size:.9rem; position:relative}
.cmp td:first-child{padding-left:24px}
.cmp td:first-child::after{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(180deg,var(--magenta),var(--cyan));
  transform:scaleY(0); transition:transform .3s var(--ease);
}
.cmp tbody tr:hover td:first-child::after{transform:scaleY(1)}
.cmp td.num{text-align:center; font-family:var(--font-mono); font-weight:700; font-size:.85rem; color:var(--text)}

.cmp__prod{display:flex; align-items:center; gap:13px; min-width:290px}
.cmp__rank{
  display:grid; place-items:center; width:30px; height:30px; border-radius:9px; flex-shrink:0;
  font-family:var(--font-display); font-weight:700; font-size:.85rem; color:var(--text);
  background:var(--surface-2); border:1px solid var(--line-2); transition:.28s;
}
.cmp tbody tr:hover .cmp__rank{background:linear-gradient(140deg,var(--magenta),var(--violet)); color:#fff; border-color:transparent}
.cmp__thumb{
  width:52px; height:52px; border-radius:var(--r-sm); object-fit:cover; flex-shrink:0;
  background:var(--ink-700); border:1px solid var(--line);
  transition:transform .35s var(--ease);
}
.cmp tbody tr:hover .cmp__thumb{transform:scale(1.09) rotate(-2deg)}
.cmp__meta{min-width:0; display:block}
.cmp__n{display:block; font-family:var(--font-display); font-weight:700; font-size:.9rem; color:var(--text); line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.cmp__b{display:block; font-family:var(--font-mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-top:3px}

.cmp__score{display:inline-flex; align-items:center; gap:9px}
.cmp__bar{width:60px; height:5px; border-radius:3px; background:var(--ink-600); overflow:hidden; flex-shrink:0}
.cmp__fill{display:block; height:100%; border-radius:3px; background:linear-gradient(90deg,var(--magenta),var(--amber)); width:0; transition:width 1.1s var(--ease)}
.cmp__fill{width:var(--w)}
.js .cmp__fill{width:0}
.js .is-in .cmp__fill{width:var(--w)}
.cmp__val{font-family:var(--font-mono); font-weight:700; color:var(--amber); font-size:.85rem}

.cmp__pill{
  display:inline-block; padding:4px 10px; border-radius:var(--r-pill);
  font-family:var(--font-mono); font-size:.64rem; font-weight:700;
  background:var(--surface-2); border:1px solid var(--line); color:var(--text-2);
  white-space:nowrap;
}
.cmp__pill.is-best{background:rgba(61,220,151,.14); border-color:rgba(61,220,151,.36); color:var(--green)}
.cmp__pill.is-mid{background:rgba(255,197,61,.12); border-color:rgba(255,197,61,.32); color:var(--amber)}
.cmp__go{
  display:inline-grid; place-items:center; width:32px; height:32px; border-radius:50%;
  border:1px solid var(--line-2); color:var(--text-2); transition:.28s var(--ease);
}
.cmp tbody tr:hover .cmp__go{background:var(--magenta); border-color:var(--magenta); color:#fff; transform:translateX(3px)}

.cmp__note{
  display:flex; align-items:flex-start; gap:9px; padding:13px 24px;
  background:rgba(255,255,255,.02); border-top:1px solid var(--line);
  font-size:.75rem; color:var(--muted-2); line-height:1.55;
}
.cmp__note span{display:block; min-width:0}
.cmp__note a{color:var(--muted); text-decoration:underline; text-underline-offset:2px}
.cmp__note a:hover{color:var(--magenta-2)}
.cmp__note svg{flex-shrink:0; color:var(--muted-2); margin-top:3px}

/* =========================================================================
   BROWSE
   ========================================================================= */
.browse{display:grid; grid-template-columns:minmax(0,1fr) 312px; gap:32px; align-items:start}
@media (max-width:1120px){.browse{grid-template-columns:1fr}}

.fbar{
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
  margin-bottom:24px;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.fbar__row{padding:16px 18px; border-bottom:1px solid var(--line)}
.fbar__lab{
  display:flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:.61rem; font-weight:700; letter-spacing:.15em;
  text-transform:uppercase; color:var(--muted); margin-bottom:12px;
}
.fbar__lab svg{color:var(--magenta-2); flex-shrink:0}

.cats{display:flex; flex-wrap:wrap; gap:8px}
.cat{
  position:relative; display:inline-flex; align-items:center; gap:8px;
  padding:9px 14px; border-radius:var(--r-pill); cursor:pointer;
  border:1px solid var(--line); background:var(--surface);
  font-family:var(--font-body); font-size:.82rem; font-weight:600; color:var(--text-2);
  transition:.25s var(--ease); user-select:none; white-space:nowrap;
}
.cat__ic{font-size:.95rem; line-height:1; filter:grayscale(.55); transition:filter .25s, transform .3s var(--ease)}
.cat__n{
  font-family:var(--font-mono); font-size:.62rem; font-weight:700;
  padding:2px 6px; border-radius:5px; background:rgba(255,255,255,.07); color:var(--muted);
  transition:.25s;
}
.cat:hover{border-color:var(--line-2); color:var(--text); transform:translateY(-2px); background:var(--surface-2)}
.cat:hover .cat__ic{filter:none; transform:scale(1.15) rotate(-6deg)}
.cat.is-on{
  border-color:transparent; color:#fff;
  background:linear-gradient(100deg,var(--magenta),var(--violet));
  box-shadow:0 8px 24px -8px rgba(255,45,114,.8);
}
.cat.is-on .cat__ic{filter:none}
.cat.is-on .cat__n{background:rgba(0,0,0,.28); color:#fff}

.fctl{display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px}
.fld{display:flex; flex-direction:column; gap:6px; min-width:0; flex:1 1 160px}
.fld__l{font-family:var(--font-mono); font-size:.57rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2)}
.sel{
  appearance:none; -webkit-appearance:none; width:100%;
  padding:10px 36px 10px 14px; border-radius:var(--r-sm);
  border:1px solid var(--line-2); background-color:var(--ink-750); color:var(--text);
  font-family:var(--font-body); font-size:.85rem; font-weight:600; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239182A6' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 11px center; background-size:15px;
  transition:.22s;
}
.sel:hover{border-color:var(--magenta)}
.sel:focus{outline:0; border-color:var(--magenta); box-shadow:0 0 0 3px rgba(255,45,114,.18)}
.sel option{background:var(--ink-750); color:var(--text)}

.fbar__foot{
  display:flex; flex-wrap:wrap; align-items:center; gap:14px;
  padding:13px 18px; background:rgba(255,255,255,.022);
}
.fcount{font-family:var(--font-mono); font-size:.77rem; color:var(--text-2)}
.fcount b{color:var(--magenta-2); font-weight:700}
.freset{
  margin-left:auto; display:inline-flex; align-items:center; gap:7px;
  padding:8px 15px; border-radius:var(--r-pill); cursor:pointer;
  border:1px solid var(--line-2); background:transparent; color:var(--text-2);
  font-family:var(--font-body); font-size:.77rem; font-weight:600; transition:.22s;
}
.freset:hover{border-color:var(--magenta); color:#fff; background:rgba(255,45,114,.14)}
.freset svg{transition:transform .5s var(--ease)}
.freset:hover svg{transform:rotate(-180deg)}

/* 66 items ÷ 3 cols = 22 exact rows | ÷ 2 = 33 | ÷ 1 = 66 — always a full grid */
.grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px}
@media (max-width:980px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.grid{grid-template-columns:1fr}}

.card{
  position:relative; display:flex; flex-direction:column; overflow:hidden;
  border-radius:var(--r-lg); border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.014));
  color:var(--text-2);
  transition:transform .45s var(--ease), border-color .35s, box-shadow .45s;
  will-change:transform;
}
.card::before{
  content:""; position:absolute; inset:0; z-index:6; pointer-events:none; opacity:0;
  background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%), rgba(255,45,114,.15), transparent 60%);
  transition:opacity .35s;
}
.card:hover{transform:translateY(-6px); border-color:var(--line-neon); box-shadow:0 28px 60px -20px rgba(255,45,114,.45); color:var(--text-2)}
.card:hover::before{opacity:1}

.card__media{position:relative; overflow:hidden; background:var(--ink-800)}
.card__img{
  width:100%; aspect-ratio:1/1; object-fit:cover; display:block;
  transition:transform .9s var(--ease);
}
.card:hover .card__img{transform:scale(1.08)}
.card__shade{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(8,5,13,.14) 0%,transparent 34%,rgba(8,5,13,.88) 92%);
}
.card__cat{position:absolute; top:12px; left:12px; z-index:3; display:block}
.card__cat .tag,.pk__cat .tag,.gal__badge .tag{
  background:rgba(8,5,13,.8); border-color:rgba(255,255,255,.22); color:#fff;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  text-shadow:0 1px 4px rgba(0,0,0,.8);
}
.card__score{
  position:absolute; top:12px; right:12px; z-index:3;
  display:flex; align-items:center; gap:5px; padding:5px 10px; border-radius:var(--r-pill);
  background:rgba(8,5,13,.78); border:1px solid rgba(255,197,61,.4);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  font-family:var(--font-mono); font-size:.75rem; font-weight:700; color:var(--amber);
}
.card__name{
  position:absolute; left:14px; right:14px; bottom:12px; z-index:3;
  font-family:var(--font-display); font-size:.98rem; font-weight:700; color:#fff; line-height:1.32;
  margin:0; text-shadow:0 2px 12px rgba(0,0,0,.9);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.card__body{display:flex; flex-direction:column; flex:1; padding:14px 15px 15px}
.card__feats{list-style:none; margin:0 0 14px; padding:0; display:grid; gap:7px; flex:1}
.card__feat{
  display:flex; align-items:flex-start; gap:8px;
  font-size:.78rem; line-height:1.45; color:var(--muted); transition:color .3s;
}
.card__feat svg{flex-shrink:0; margin-top:3px; color:var(--magenta); opacity:.9}
.card:hover .card__feat{color:var(--text-2)}
.card__foot{display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:12px; border-top:1px solid var(--line)}
.card__brand{display:block; font-family:var(--font-mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2)}
.card__cta{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-display); font-weight:700; font-size:.77rem; color:var(--magenta-2);
  transition:gap .25s, color .25s;
}
.card:hover .card__cta{gap:11px; color:var(--cyan)}

/* reveal */
.js .rv{opacity:0; transform:translateY(22px); transition:opacity .6s var(--ease), transform .6s var(--ease)}
.js .rv.is-in{opacity:1; transform:none}

.empty{
  grid-column:1/-1; padding:64px 24px; text-align:center;
  border:1px dashed var(--line-2); border-radius:var(--r-lg); background:var(--surface);
}
.empty h3{margin-bottom:8px}
.empty p{color:var(--muted); margin-bottom:18px}

.pager{display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:7px; margin-top:32px}
.pg{
  min-width:40px; height:40px; padding:0 13px; border-radius:var(--r-sm); cursor:pointer;
  display:inline-grid; place-items:center;
  border:1px solid var(--line); background:var(--surface); color:var(--text-2);
  font-family:var(--font-mono); font-size:.81rem; font-weight:700; transition:.22s var(--ease);
}
.pg:hover:not(:disabled):not(.is-on){border-color:var(--magenta); color:#fff; background:rgba(255,45,114,.14); transform:translateY(-2px)}
.pg.is-on{background:linear-gradient(100deg,var(--magenta),var(--violet)); border-color:transparent; color:#fff; box-shadow:0 8px 22px -8px rgba(255,45,114,.8)}
.pg:disabled{opacity:.32; cursor:not-allowed}
.pg--dots{border:0; background:none; cursor:default; color:var(--muted-2); min-width:20px}

/* =========================================================================
   TOP 10 SIDEBAR
   ========================================================================= */
.t10{position:sticky; top:calc(var(--header-h) + 20px)}
@media (max-width:1120px){.t10{position:static}}
.t10__card{
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  background:linear-gradient(180deg,rgba(255,45,114,.09),rgba(255,255,255,.012));
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.t10__hd{padding:18px 18px 15px; border-bottom:1px solid var(--line); position:relative; overflow:hidden}
.t10__hd::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.1) 50%,transparent 70%);
  transform:translateX(-100%); animation:hdShine 5.5s var(--ease) infinite;
}
@keyframes hdShine{0%,55%{transform:translateX(-100%)}85%,100%{transform:translateX(100%)}}
.t10__t{display:flex; align-items:center; gap:9px; font-size:1rem; margin:0; position:relative; z-index:2}
.t10__t svg{color:var(--amber); flex-shrink:0}
.t10__s{font-family:var(--font-mono); font-size:.59rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:7px 0 0; position:relative; z-index:2}
.t10__list{list-style:none; margin:0; padding:6px}

.t10r{
  display:flex; align-items:center; gap:11px; padding:10px 11px; border-radius:var(--r-md);
  color:var(--text-2); position:relative; overflow:hidden;
  transition:background .26s, transform .26s var(--ease), color .26s;
}
.t10r::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:linear-gradient(180deg,var(--magenta),var(--cyan));
  transform:scaleY(0); transition:transform .3s var(--ease);
}
.t10r:hover{background:rgba(255,45,114,.12); transform:translateX(4px); color:var(--text)}
.t10r:hover::before{transform:scaleY(1)}
.t10r__rk{
  flex-shrink:0; width:22px; text-align:center;
  font-family:var(--font-display); font-weight:700; font-size:.92rem; color:var(--muted-2);
  transition:color .26s;
}
.t10r:hover .t10r__rk{color:var(--magenta-2)}
.t10r--top .t10r__rk{color:var(--amber)}
.t10r__img{
  width:38px; height:38px; border-radius:9px; object-fit:cover; flex-shrink:0;
  background:var(--ink-700); border:1px solid var(--line);
  transition:transform .3s var(--ease);
}
.t10r:hover .t10r__img{transform:scale(1.08)}
.t10r__b{min-width:0; flex:1; display:block}
.t10r__n{
  display:block; font-size:.78rem; font-weight:700; color:var(--text); line-height:1.32;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.t10r__g{display:flex; align-items:center; gap:6px; margin-top:5px}
.t10r__track{flex:1; height:3px; border-radius:2px; background:var(--ink-600); overflow:hidden}
.t10r__fill{
  display:block; height:100%; border-radius:2px; width:0;
  background:linear-gradient(90deg,var(--magenta),var(--amber));
  transition:width 1.2s var(--ease);
}
.t10r__fill{width:var(--w)}
.js .t10r__fill{width:0}
.js .is-in .t10r__fill{width:var(--w)}
.t10r__v{font-family:var(--font-mono); font-size:.63rem; font-weight:700; color:var(--amber); flex-shrink:0}
.t10__ft{padding:12px 18px; border-top:1px solid var(--line); background:rgba(255,255,255,.02)}
.t10__ft a{font-family:var(--font-display); font-weight:700; font-size:.79rem; display:inline-flex; align-items:center; gap:7px; transition:gap .25s}
.t10__ft a:hover{gap:12px}

/* =========================================================================
   SCORING BREAKDOWN
   ========================================================================= */
.score-wrap{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(28px,4vw,56px); align-items:center}
@media (max-width:940px){.score-wrap{grid-template-columns:1fr}}

.pillars{display:grid; gap:12px}
.pil{
  display:grid; grid-template-columns:44px 1fr auto; align-items:center; gap:14px;
  padding:14px 18px; border-radius:var(--r-md);
  border:1px solid var(--line); background:var(--surface);
  transition:border-color .3s, background .3s, transform .3s var(--ease);
}
.pil:hover{border-color:var(--line-neon); background:rgba(255,45,114,.07); transform:translateX(5px)}
.pil__ic{
  display:grid; place-items:center; width:44px; height:44px; border-radius:12px;
  background:linear-gradient(140deg,rgba(255,45,114,.22),rgba(168,85,247,.16));
  border:1px solid rgba(255,45,114,.28); font-size:1.1rem;
}
.pil__m{min-width:0; display:block}
.pil__n,.pil__d{display:block}
.pil__n{font-family:var(--font-display); font-weight:700; font-size:.94rem; color:var(--text)}
.pil__d{font-size:.75rem; color:var(--muted); margin-top:2px; line-height:1.4}
.pil__w{font-family:var(--font-mono); font-weight:700; font-size:1rem; color:var(--magenta-2)}
.pil__bar{grid-column:2/-1; height:5px; border-radius:3px; background:var(--ink-600); overflow:hidden; margin-top:9px}
.pil__fill{
  display:block; height:100%; border-radius:3px; width:0;
  background:linear-gradient(90deg,var(--magenta),var(--violet),var(--cyan));
  transition:width 1.3s var(--ease);
}
.pil__fill{width:var(--w)}
.js .pil__fill{width:0}
.js .is-in .pil__fill{width:var(--w)}

.dial{
  position:relative; display:grid; place-items:center; padding:clamp(24px,3vw,40px);
  border:1px solid var(--line); border-radius:var(--r-xl);
  background:radial-gradient(circle at 50% 35%, rgba(255,45,114,.16), rgba(255,255,255,.012) 62%);
  overflow:hidden;
}
.dial__ring{position:relative; width:min(270px,72vw); aspect-ratio:1; display:grid; place-items:center}
.dial__svg{position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg)}
.dial__bg{fill:none; stroke:var(--ink-600); stroke-width:9}
.dial__fg{
  fill:none; stroke:url(#dialGrad); stroke-width:9; stroke-linecap:round;
  stroke-dasharray:534; stroke-dashoffset:534;
  transition:stroke-dashoffset 1.8s var(--ease);
  filter:drop-shadow(0 0 10px rgba(255,45,114,.6));
}
.dial__fg{stroke-dashoffset:var(--off)}
.js .dial__fg{stroke-dashoffset:534}
.js .is-in .dial__fg{stroke-dashoffset:var(--off)}
.dial__mid{position:relative; text-align:center; z-index:2}
.dial__num{font-family:var(--font-display); font-size:3.2rem; font-weight:700; line-height:1; color:var(--text); letter-spacing:-.03em}
.dial__num em{font-style:normal; font-size:.38em; color:var(--muted)}
.dial__lab{font-family:var(--font-mono); font-size:.58rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-top:9px}
.dial__cap{position:relative; z-index:2; margin:20px 0 0; text-align:center; font-size:.8rem; color:var(--muted); max-width:40ch}
.dial__cap b{color:var(--text-2)}

/* =========================================================================
   BOOTLEG vs LEGIT
   ========================================================================= */
.boot{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:18px}
.bt{
  position:relative; padding:22px 22px 20px; border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--line); background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
  transition:transform .4s var(--ease), border-color .3s, box-shadow .4s;
}
.bt:hover{transform:translateY(-5px); border-color:var(--line-2); box-shadow:var(--sh-2)}
.bt__no{
  font-family:var(--font-mono); font-size:.61rem; font-weight:700; letter-spacing:.16em;
  color:var(--muted-2); margin-bottom:12px;
}
.bt__ic{font-size:1.6rem; margin-bottom:12px; display:block; transition:transform .45s var(--ease)}
.bt:hover .bt__ic{transform:scale(1.16) rotate(-8deg)}
.bt__t{font-size:1rem; margin:0 0 8px}
.bt__d{font-size:.82rem; color:var(--muted); margin:0 0 16px; line-height:1.55}
.bt__cmp{display:grid; gap:8px}
.bt__row{
  display:flex; align-items:flex-start; gap:9px; padding:9px 11px; border-radius:var(--r-sm);
  font-size:.76rem; line-height:1.45;
}
.bt__row--ok{background:rgba(61,220,151,.09); border:1px solid rgba(61,220,151,.22); color:#b8f0d8}
.bt__row--no{background:rgba(255,45,114,.09); border:1px solid rgba(255,45,114,.22); color:#ffc2d6}
.bt__row b{
  font-family:var(--font-mono); font-size:.57rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; flex-shrink:0; padding-top:2px; width:38px;
}
.bt__row--ok b{color:var(--green)}
.bt__row--no b{color:var(--magenta)}
.bt__scan{
  content:""; position:absolute; left:0; right:0; height:2px; top:0; pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--cyan),transparent);
  opacity:0; transition:opacity .3s;
}
.bt:hover .bt__scan{opacity:1; animation:btScan 1.5s var(--ease-io) infinite}
@keyframes btScan{0%{top:0}100%{top:100%}}

.boot__note{
  display:flex; align-items:flex-start; gap:12px; margin-top:20px; padding:16px 18px;
  border-radius:var(--r-md); border:1px solid rgba(255,197,61,.26); background:rgba(255,197,61,.07);
  font-size:.83rem; color:var(--text-2);
}
.boot__note span{font-size:1.1rem; line-height:1.3; flex-shrink:0}
.boot__note p{margin:0}

/* =========================================================================
   SHELF PLANNER
   ========================================================================= */
.shelf{
  border:1px solid var(--line); border-radius:var(--r-xl); overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01));
}
.shelf__stage{
  position:relative; display:flex; align-items:flex-end; justify-content:space-around; gap:10px;
  padding:52px 22px 0 74px; min-height:340px;
  background:
    linear-gradient(180deg,transparent 60%,rgba(255,45,114,.07)),
    repeating-linear-gradient(180deg,transparent 0 43px,rgba(255,255,255,.045) 43px 44px);
}
.shelf__ruler{
  position:absolute; left:0; top:0; bottom:0; width:56px; z-index:3;
  border-right:1px dashed var(--line-2);
  background:rgba(8,5,13,.5);
}
.shelf__tick{
  position:absolute; right:8px; font-family:var(--font-mono); font-size:.55rem;
  color:var(--muted-2); letter-spacing:.04em; transform:translateY(-50%); white-space:nowrap;
}
.shelf__fig{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  flex:1; min-width:0; z-index:2;
}
.shelf__bar{
  width:min(78%,84px); border-radius:8px 8px 0 0; position:relative;
  background:var(--g,linear-gradient(180deg,var(--magenta),rgba(168,85,247,.5)));
  border:1px solid rgba(255,255,255,.16); border-bottom:0;
  height:0; transition:height 1.4s var(--ease), filter .3s;
  box-shadow:0 -8px 30px -8px rgba(255,45,114,.7);
  display:grid; place-items:center; overflow:hidden;
}
.shelf__bar{height:var(--h)}
.js .shelf__bar{height:0}
.js .is-in .shelf__bar{height:var(--h)}
.shelf__bar::after{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(180deg,transparent 0 7px,rgba(255,255,255,.09) 7px 8px);
}
.shelf__glyph{position:relative; z-index:2; font-size:1.5rem; filter:drop-shadow(0 2px 6px rgba(0,0,0,.6))}
.shelf__fig:hover .shelf__bar{filter:brightness(1.18)}
.shelf__cm{
  position:absolute; top:-24px; font-family:var(--font-mono); font-size:.66rem; font-weight:700;
  color:var(--text); padding:3px 8px; border-radius:5px; white-space:nowrap;
  background:rgba(8,5,13,.85); border:1px solid var(--line-2);
  opacity:0; transition:opacity .4s .9s;
}
.shelf__cm{opacity:1}
.js .shelf__cm{opacity:0}
.js .is-in .shelf__cm{opacity:1}
.shelf__lab{height:var(--labh,52px); padding:11px 4px 0; text-align:center; border-top:2px solid var(--magenta); width:100%}
.shelf__nm,.shelf__sz{display:block}
.shelf__nm{font-family:var(--font-display); font-size:.79rem; font-weight:700; color:var(--text); line-height:1.25}
.shelf__sz{font-family:var(--font-mono); font-size:.59rem; color:var(--muted); margin-top:3px}
.shelf__ft{
  display:flex; flex-wrap:wrap; gap:16px; padding:18px 22px;
  border-top:1px solid var(--line); background:rgba(255,255,255,.02);
  font-size:.79rem; color:var(--muted);
}
.shelf__ft div{flex:1 1 210px}
.shelf__ft b{color:var(--text-2)}
@media (max-width:760px){
  .shelf__stage{overflow-x:auto; justify-content:flex-start; padding-left:74px}
  .shelf__fig{min-width:94px; flex:0 0 auto}
}

/* =========================================================================
   RELEASE RADAR
   ========================================================================= */
.radar{position:relative; padding-left:26px}
.radar::before{
  content:""; position:absolute; left:5px; top:8px; bottom:8px; width:2px; border-radius:2px;
  background:linear-gradient(180deg,var(--magenta),var(--violet),var(--cyan),transparent);
}
.rd{position:relative; padding:0 0 16px 0}
.rd:last-child{padding-bottom:0}
.rd__dot{
  position:absolute; left:-26px; top:24px; width:12px; height:12px; border-radius:50%;
  background:var(--ink-900); border:2px solid var(--magenta); z-index:2;
  transition:.35s var(--ease);
}
.rd:hover .rd__dot{background:var(--magenta); box-shadow:0 0 0 5px rgba(255,45,114,.2); scale:1.25}
.rd--live .rd__dot{border-color:var(--green); background:var(--green); animation:livePing 2s infinite}
.rd__in{
  display:grid; grid-template-columns:104px minmax(0,1fr) auto; gap:18px; align-items:center;
  padding:15px 18px; border-radius:var(--r-md);
  border:1px solid var(--line); background:var(--surface);
  transition:border-color .3s, background .3s, transform .3s var(--ease);
}
.rd:hover .rd__in{border-color:var(--line-neon); background:rgba(255,45,114,.07); transform:translateX(6px)}
.rd__date{
  font-family:var(--font-mono); font-size:.68rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--magenta-2);
}
.rd__date span{display:block; font-size:1.25rem; color:var(--text); letter-spacing:-.02em; margin-top:2px}
.rd__t{font-family:var(--font-display); font-weight:700; font-size:.96rem; color:var(--text); margin:0 0 4px}
.rd__d{font-size:.79rem; color:var(--muted); margin:0; line-height:1.5}
@media (max-width:680px){
  .rd__in{grid-template-columns:1fr; gap:10px}
  .rd__date{display:flex; align-items:baseline; gap:8px}
  .rd__date span{margin:0}
}

/* =========================================================================
   AFFILIATE / ADS
   ========================================================================= */
.aff{
  display:flex; align-items:flex-start; gap:11px;
  padding:13px 17px; border-radius:var(--r-md); margin:24px 0 0;
  border:1px solid rgba(56,225,255,.2); background:rgba(56,225,255,.06);
  font-size:.78rem; color:var(--text-2); line-height:1.55;
}
.aff span{color:var(--cyan); flex-shrink:0; font-size:.9rem; line-height:1.5}

.ad-placement{margin:26px 0}
.ad-placement-inner{display:flex; flex-wrap:wrap; gap:16px; justify-content:center; align-items:center}
.ad-unit{min-width:0}

/* =========================================================================
   FOOTER
   ========================================================================= */
.ft{
  position:relative; margin-top:clamp(48px,6vw,88px);
  border-top:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,45,114,.055),transparent 42%),var(--ink-850);
  overflow:hidden;
}
.ft::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--magenta) 25%,var(--cyan) 75%,transparent);
}
.ft::after{
  content:""; position:absolute; left:-25%; right:-25%; bottom:-60px; height:220px; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,45,114,.22) 1px,transparent 1px),
    linear-gradient(90deg,rgba(56,225,255,.14) 1px,transparent 1px);
  background-size:60px 38px;
  transform:perspective(300px) rotateX(74deg); transform-origin:bottom;
  mask-image:linear-gradient(180deg,transparent,#000);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000);
  opacity:.45;
}
.ft__in{
  position:relative; z-index:2;
  max-width:var(--wrap); margin-inline:auto; padding:clamp(44px,5vw,66px) 24px 30px;
  display:grid; grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr)); gap:38px;
}
@media (max-width:900px){.ft__in{grid-template-columns:1fr 1fr; gap:32px}}
@media (max-width:560px){.ft__in{grid-template-columns:1fr}}

.ft__brand{max-width:38ch}
.ft__logo{display:flex; align-items:center; gap:11px; margin-bottom:16px}
.ft__logo img{width:42px; height:42px; border-radius:12px; filter:drop-shadow(0 4px 14px rgba(255,45,114,.5))}
.ft__nm{font-family:var(--font-display); font-weight:700; font-size:1.22rem; color:var(--text); letter-spacing:-.02em}
.ft__nm em{font-style:normal; color:var(--magenta-2)}
.ft__d{font-size:.84rem; color:var(--muted); line-height:1.65; margin:0 0 18px}
.ft__badges{display:flex; flex-wrap:wrap; gap:7px}

.ft__h{
  font-family:var(--font-mono); font-size:.61rem; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--text); margin:0 0 16px;
}
.ft__l{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.ft__l a{
  font-size:.84rem; color:var(--muted); display:inline-flex; align-items:center; gap:0;
  transition:color .22s, gap .22s;
}
.ft__l a::before{content:""; width:0; height:1px; background:var(--magenta); transition:width .25s var(--ease)}
.ft__l a:hover{color:var(--text); gap:8px}
.ft__l a:hover::before{width:12px}

.ft__bot{
  position:relative; z-index:2;
  max-width:var(--wrap); margin-inline:auto; padding:20px 24px 34px;
  border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px;
}
.ft__cp{font-size:.77rem; color:var(--muted-2); margin:0}
.ft__dis{font-size:.71rem; color:var(--muted-2); margin:6px 0 0; max-width:64ch; line-height:1.6}
.ft__top{
  display:inline-grid; place-items:center; width:38px; height:38px; border-radius:50%;
  border:1px solid var(--line-2); background:var(--surface); color:var(--text-2);
  cursor:pointer; transition:.25s var(--ease); flex-shrink:0;
}
.ft__top:hover{border-color:var(--magenta); background:rgba(255,45,114,.16); color:#fff; transform:translateY(-3px)}

/* =========================================================================
   PRODUCT PAGE
   ========================================================================= */
.crumb{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:22px 0 0;
  font-size:.77rem; color:var(--muted-2);
}
.crumb a{color:var(--muted)}
.crumb a:hover{color:var(--magenta-2)}
.crumb svg{opacity:.4; flex-shrink:0}
.crumb b{color:var(--text-2); font-weight:600; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:40ch}

.pp{display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:clamp(24px,3vw,44px); align-items:start; padding-top:26px}
@media (max-width:1060px){.pp{grid-template-columns:1fr}}

.gal{position:relative}
.gal__main{
  position:relative; border-radius:var(--r-xl); overflow:hidden;
  border:1px solid var(--line); background:var(--ink-800);
  aspect-ratio:4/3;
}
.gal__img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .8s var(--ease), opacity .3s;
  cursor:zoom-in;
}
.gal__main:hover .gal__img{transform:scale(1.05)}
.gal__img.is-swap{opacity:0}
.gal__badge{position:absolute; top:16px; left:16px; z-index:3}
.gal__zoom{
  position:absolute; bottom:14px; right:14px; z-index:3;
  display:inline-flex; align-items:center; gap:7px; padding:7px 13px; border-radius:var(--r-pill);
  background:rgba(8,5,13,.76); border:1px solid var(--line-2);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  font-family:var(--font-mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-2);
  pointer-events:none;
}
.gal__thumbs{display:flex; gap:11px; margin-top:12px}
.gal__th{
  position:relative; width:88px; aspect-ratio:1; border-radius:var(--r-md); overflow:hidden; cursor:pointer;
  border:1px solid var(--line); background:var(--ink-800); padding:0;
  transition:.3s var(--ease); flex-shrink:0;
}
.gal__th img{width:100%; height:100%; object-fit:cover}
.gal__th:hover{border-color:var(--line-2); transform:translateY(-3px)}
.gal__th.is-on{border-color:var(--magenta); box-shadow:0 0 0 2px rgba(255,45,114,.28), 0 10px 26px -10px rgba(255,45,114,.8)}

.lb{
  position:fixed; inset:0; z-index:900; display:none; place-items:center; padding:5vw;
  background:rgba(4,2,7,.94); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.lb.is-open{display:grid; animation:lbIn .3s var(--ease)}
@keyframes lbIn{from{opacity:0}to{opacity:1}}
.lb img{max-width:100%; max-height:88vh; border-radius:var(--r-lg); box-shadow:var(--sh-3)}
.lb__x{
  position:absolute; top:22px; right:22px; width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center; cursor:pointer; color:#fff;
  border:1px solid var(--line-2); background:var(--surface); transition:.25s;
}
.lb__x:hover{background:var(--magenta); border-color:var(--magenta); transform:rotate(90deg)}

.pp__head{margin-top:30px}
.pp__tags{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px}
.pp__title{font-size:clamp(1.65rem,3.1vw,2.45rem); margin:0 0 14px; line-height:1.1}
.pp__lead{font-size:1.01rem; color:var(--text-2); margin:0; max-width:66ch}

.vd{
  position:relative; margin:26px 0 0; padding:22px 24px 22px 26px;
  border-radius:var(--r-lg); overflow:hidden;
  border:1px solid rgba(255,197,61,.24);
  background:linear-gradient(100deg,rgba(255,197,61,.09),rgba(255,45,114,.05));
}
.vd::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(180deg,var(--amber),var(--magenta));
}
.vd__l{
  display:flex; align-items:center; gap:9px; margin-bottom:10px;
  font-family:var(--font-mono); font-size:.61rem; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:var(--amber);
}
.vd__t{font-size:.93rem; color:var(--text-2); margin:0; line-height:1.7}

.bb{position:sticky; top:calc(var(--header-h) + 20px)}
@media (max-width:1060px){.bb{position:static}}
.bb__card{
  border:1px solid var(--line); border-radius:var(--r-xl); overflow:hidden;
  background:linear-gradient(180deg,rgba(255,45,114,.1),rgba(255,255,255,.014));
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  box-shadow:var(--sh-2);
}
.bb__top{padding:20px 22px 18px; border-bottom:1px solid var(--line); position:relative; overflow:hidden}
.bb__top::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.09) 50%,transparent 70%);
  transform:translateX(-100%); animation:hdShine 6s var(--ease) infinite;
}
.bb__brand{display:block; font-family:var(--font-mono); font-size:.61rem; letter-spacing:.14em; text-transform:uppercase; color:var(--cyan); position:relative; z-index:2}
.bb__n{font-family:var(--font-display); font-size:1rem; font-weight:700; color:var(--text); margin:7px 0 0; line-height:1.32; position:relative; z-index:2}

.bb__score{display:flex; align-items:center; gap:16px; padding:18px 22px; border-bottom:1px solid var(--line)}
.bb__big{font-family:var(--font-display); font-size:2.5rem; font-weight:700; line-height:1; color:var(--amber); letter-spacing:-.03em; flex-shrink:0}
.bb__big em{font-style:normal; font-size:.36em; color:var(--muted-2)}
.bb__sm{flex:1; min-width:0}
.bb__stars{display:flex; gap:3px; margin-bottom:6px}
.bb__stars svg{width:15px; height:15px; color:var(--ink-500)}
.bb__stars svg.is-on{color:var(--amber); filter:drop-shadow(0 0 5px rgba(255,197,61,.55))}
.bb__lab{font-family:var(--font-mono); font-size:.59rem; letter-spacing:.11em; text-transform:uppercase; color:var(--muted)}

.bb__pils{padding:16px 22px; border-bottom:1px solid var(--line); display:grid; gap:11px}
.bbp{display:grid; grid-template-columns:76px 1fr 30px; align-items:center; gap:10px}
.bbp__n{font-family:var(--font-mono); font-size:.58rem; letter-spacing:.07em; text-transform:uppercase; color:var(--muted)}
.bbp__t{height:4px; border-radius:2px; background:var(--ink-600); overflow:hidden}
.bbp__f{display:block; height:100%; border-radius:2px; width:0; background:linear-gradient(90deg,var(--magenta),var(--cyan)); transition:width 1.1s var(--ease)}
.bbp__f{width:var(--w)}
.js .bbp__f{width:0}
.js .is-in .bbp__f{width:var(--w)}
.bbp__v{font-family:var(--font-mono); font-size:.65rem; font-weight:700; color:var(--text-2); text-align:right}

.bb__trust{list-style:none; margin:0; padding:16px 22px; display:grid; gap:10px; border-bottom:1px solid var(--line)}
.bb__trust li{display:flex; align-items:center; gap:10px; font-size:.79rem; color:var(--text-2)}
.bb__trust svg{flex-shrink:0; color:var(--green)}

.bb__act{padding:18px 22px 20px}
.bb__cta{width:100%; margin-bottom:11px}
.bb__note{font-size:.67rem; color:var(--muted-2); text-align:center; margin:0; line-height:1.5}

.pp__body{padding-top:clamp(36px,4vw,56px)}
.blk{margin-bottom:clamp(34px,4vw,52px)}
.blk:last-child{margin-bottom:0}
.blk__h{display:flex; align-items:center; gap:12px; margin:0 0 20px; font-size:1.28rem}
.blk__h::after{content:""; flex:1; height:1px; background:linear-gradient(90deg,var(--line-2),transparent)}
.blk__h i{
  font-style:normal; display:grid; place-items:center; width:32px; height:32px; border-radius:9px;
  background:linear-gradient(140deg,rgba(255,45,114,.22),rgba(168,85,247,.14));
  border:1px solid rgba(255,45,114,.28); font-size:.88rem; flex-shrink:0;
}
.prose{max-width:76ch}
.prose p{font-size:.96rem; line-height:1.8; color:var(--text-2); margin:0 0 1.2em}
.prose p:last-child{margin-bottom:0}

.kf{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); gap:11px}
.kf li{
  display:flex; align-items:flex-start; gap:11px; padding:14px 16px;
  border-radius:var(--r-md); border:1px solid var(--line); background:var(--surface);
  font-size:.85rem; color:var(--text-2); line-height:1.5;
  transition:border-color .28s, background .28s, transform .28s var(--ease);
}
.kf li:hover{border-color:var(--line-neon); background:rgba(255,45,114,.07); transform:translateY(-3px)}
.kf svg{flex-shrink:0; margin-top:2px; color:var(--magenta)}

.pc{display:grid; grid-template-columns:1fr 1fr; gap:18px}
@media (max-width:720px){.pc{grid-template-columns:1fr}}
.pc__col{padding:22px; border-radius:var(--r-lg); border:1px solid var(--line); background:var(--surface)}
.pc__col--pro{border-color:rgba(61,220,151,.24); background:rgba(61,220,151,.05)}
.pc__col--con{border-color:rgba(255,45,114,.24); background:rgba(255,45,114,.05)}
.pc__h{display:flex; align-items:center; gap:9px; margin:0 0 16px; font-size:1rem}
.pc__col--pro .pc__h{color:var(--green)}
.pc__col--con .pc__h{color:var(--magenta-2)}
.pc__h i{
  font-style:normal; display:grid; place-items:center; width:26px; height:26px; border-radius:8px;
  background:currentColor; font-size:.78rem; font-weight:800; flex-shrink:0;
}
.pc__col--pro .pc__h i{color:#0a2a1c}
.pc__col--con .pc__h i{color:#2e0713}
.pc ul{list-style:none; margin:0; padding:0; display:grid; gap:11px}
.pc li{display:flex; align-items:flex-start; gap:10px; font-size:.85rem; line-height:1.55; color:var(--text-2)}
.pc li svg{flex-shrink:0; margin-top:3px}
.pc__col--pro li svg{color:var(--green)}
.pc__col--con li svg{color:var(--magenta)}

.spec{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px}
.spec__c{
  position:relative; padding:16px 18px; border-radius:var(--r-md); overflow:hidden;
  border:1px solid var(--line); background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
  transition:border-color .28s, transform .28s var(--ease);
}
.spec__c:hover{border-color:var(--line-neon); transform:translateY(-3px)}
.spec__c::after{
  content:""; position:absolute; top:0; left:0; width:100%; height:2px;
  background:linear-gradient(90deg,var(--magenta),var(--cyan));
  transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease);
}
.spec__c:hover::after{transform:scaleX(1)}
.spec__k{
  font-family:var(--font-mono); font-size:.57rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); display:block; margin-bottom:8px;
}
.spec__v{display:block; font-family:var(--font-display); font-size:.96rem; font-weight:600; color:var(--text); line-height:1.35}

.rev{display:grid; grid-template-columns:repeat(auto-fit,minmax(276px,1fr)); gap:14px}
.rv-c{
  position:relative; padding:20px 22px; border-radius:var(--r-lg);
  border:1px solid var(--line); background:var(--surface);
  transition:border-color .28s, transform .28s var(--ease), background .28s;
}
.rv-c:hover{border-color:var(--line-2); transform:translateY(-3px); background:var(--surface-2)}
.rv-c__q{
  position:absolute; top:4px; right:16px;
  font-family:Georgia,serif; font-size:3.4rem; line-height:1; color:var(--magenta); opacity:.14;
}
.rv-c__top{display:flex; align-items:center; gap:11px; margin-bottom:12px}
.rv-c__top .tag{flex-shrink:0; margin-left:auto}
.rv-c__av{
  display:grid; place-items:center; width:36px; height:36px; border-radius:50%; flex-shrink:0;
  font-family:var(--font-display); font-weight:700; font-size:.82rem; color:#fff;
  background:linear-gradient(140deg,var(--magenta),var(--violet));
}
.rv-c__who{min-width:0; display:block; flex:1; overflow:hidden}
.rv-c__nm{display:block; font-family:var(--font-display); font-weight:700; font-size:.85rem; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.rv-c__dt{display:block; font-family:var(--font-mono); font-size:.59rem; color:var(--muted-2); margin-top:2px}
.rv-c__t{font-family:var(--font-display); font-weight:700; font-size:.92rem; color:var(--text); margin:0 0 7px; position:relative; z-index:2}
.rv-c__x{font-size:.84rem; color:var(--muted); line-height:1.6; margin:0; position:relative; z-index:2}

.rel{padding:clamp(44px,5vw,72px) 0 0; border-top:1px solid var(--line); margin-top:clamp(40px,5vw,64px)}
.rel__g{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px}
@media (max-width:980px){.rel__g{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.rel__g{grid-template-columns:1fr}}

/* =========================================================================
   LEGAL / ABOUT
   ========================================================================= */
.doc{max-width:840px; margin-inline:auto; padding:clamp(32px,4vw,52px) 0 0}
.doc__hd{margin-bottom:34px; padding-bottom:26px; border-bottom:1px solid var(--line)}
.doc__meta{font-family:var(--font-mono); font-size:.65rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2); margin:14px 0 0}
.doc h2{font-size:1.34rem; margin:2.2em 0 .7em; scroll-margin-top:100px}
.doc h2:first-of-type{margin-top:0}
.doc h3{font-size:1.04rem; margin:1.8em 0 .5em}
.doc p,.doc li{font-size:.93rem; line-height:1.78; color:var(--text-2)}
.doc ul,.doc ol{padding-left:22px; margin:0 0 1.3em}
.doc li{margin-bottom:.55em}
.doc li::marker{color:var(--magenta)}
.doc__box{
  padding:20px 22px; border-radius:var(--r-lg); margin:0 0 1.6em;
  border:1px solid var(--line); background:var(--surface);
}
.doc__box p:last-child{margin-bottom:0}
.doc__box--warn{border-color:rgba(255,197,61,.26); background:rgba(255,197,61,.06)}

.abt__stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(148px,1fr)); gap:14px; margin:0 0 2em}
.abt__s{padding:20px; border-radius:var(--r-md); border:1px solid var(--line); background:var(--surface); text-align:center}
.abt__n{font-family:var(--font-display); font-size:1.85rem; font-weight:700; color:var(--magenta-2); line-height:1}
.abt__l{font-family:var(--font-mono); font-size:.59rem; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); margin-top:8px}

/* =========================================================================
   COOKIE BANNER
   ========================================================================= */
#cookie-banner{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:800;
  display:none; align-items:center; gap:18px; flex-wrap:wrap;
  max-width:760px; margin-inline:auto; padding:16px 20px;
  border-radius:var(--r-lg); border:1px solid var(--line-2);
  background:rgba(14,9,22,.97);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  box-shadow:var(--sh-3);
}
.cookie-ask #cookie-banner{display:flex; animation:ckIn .5s var(--ease) .6s both}
@keyframes ckIn{from{opacity:0; transform:translateY(20px)}to{opacity:1; transform:none}}
#cookie-banner p{margin:0; font-size:.81rem; flex:1; min-width:210px; color:var(--text-2)}
.cookie-btns{display:flex; gap:9px; margin-left:auto}
.cookie-btns button{
  padding:9px 18px; border-radius:var(--r-pill); cursor:pointer; border:1px solid var(--line-2);
  font-family:var(--font-body); font-size:.79rem; font-weight:700;
  background:transparent; color:var(--text-2); transition:.22s;
}
.cookie-btns button:hover{color:#fff; background:var(--surface-2)}
#cookie-accept{
  background:linear-gradient(100deg,var(--magenta),var(--violet)); border-color:transparent; color:#fff;
  box-shadow:0 8px 22px -8px rgba(255,45,114,.8);
}
#cookie-accept:hover{filter:brightness(1.12)}

/* =========================================================================
   MOTION PREFERENCES
   ========================================================================= */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .rv{opacity:1; transform:none}
  .hero__bg{transform:scale(1.05); animation:none}
  .cmp__fill,.t10r__fill,.pil__fill,.bbp__f{width:var(--w)}
  .shelf__bar{height:var(--h)}
  .shelf__cm{opacity:1}
  .dial__fg{stroke-dashoffset:var(--off)}
}