:root{
  --bg:#070708; --panel:#0b0c0d; --panel2:#0f1113; --text:#f3f6fb; --muted:#a6b1c7; --bd:#1b1d20;
  --r:#ff3555; --v:#8a2be2; --c:#05d5ff; --radius:22px; --container:1280px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:radial-gradient(1200px 800px at 110% -10%, rgba(255,53,85,.24), transparent 60%),radial-gradient(900px 700px at -10% -20%, rgba(138,43,226,.22), transparent 60%),var(--bg);color:var(--text);font:16px/1.65 Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased}
.container{max-width:var(--container);margin-inline:auto;padding-inline:clamp(16px,4vw,40px)}
.header{position:sticky;top:0;z-index:60;background:transparent;border-bottom:1px solid transparent;transition:background .3s,border-color .3s}
.header.fixed{backdrop-filter:saturate(160%) blur(10px);background:color-mix(in oklab,#0b0c0e,transparent 22%);border-color:var(--bd)}
.header__in{display:flex;align-items:center;gap:14px;min-height:76px}
.logo{display:inline-flex;align-items:center;gap:10px;font-weight:900;text-decoration:none;color:var(--text)}
.logo i{width:14px;height:14px;border-radius:999px;background:linear-gradient(135deg,var(--r),var(--v));box-shadow:0 0 18px rgba(255,53,85,.6)}
.nav{margin-left:auto;display:flex;gap:8px}
.nav a{padding:10px 12px;border-radius:10px;text-decoration:none;color:var(--text)}
.nav a:hover{background:color-mix(in oklab,var(--r),transparent 90%)}
.h1{font-size:clamp(36px,5.6vw,48px);letter-spacing:-.5px;margin:.5rem 0 .75rem}
.h2{font-size:clamp(22px,3vw,30px);margin:0 0 10px}
.lead{color:var(--muted);max-width:760px}
main{padding-block:30px}
.section{padding:36px 0}
.btn{display:inline-flex;align-items:center;gap:.6rem;border-radius:999px;padding:1rem 1.2rem;font-weight:800;border:1px solid transparent;text-decoration:none}
.primary{background:linear-gradient(135deg,var(--r),var(--v));color:#070707;box-shadow:0 24px 60px rgba(0,0,0,.55),0 0 70px rgba(255,53,85,.14)}
.ghost{background:transparent;border:1px solid var(--bd);color:var(--text)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:1000px){.cards{grid-template-columns:repeat(2,1fr)}}@media(max-width:640px){.cards{grid-template-columns:1fr}}
.card{background:linear-gradient(180deg,#0b0c0e,#0a0b0d);border:1px solid var(--bd);border-radius:22px;padding:18px;box-shadow:0 18px 44px rgba(0,0,0,.45),0 0 40px rgba(138,43,226,.12)}
.brand{display:flex;gap:12px;align-items:center}
.brand img{width:70px;height:40px;border-radius:10px}
.meta{display:flex;gap:10px;align-items:center;color:var(--muted);font-size:12px}
.rank{color:var(--muted);font-weight:900}
.stars{font-size:14px;letter-spacing:.2ch;background:linear-gradient(90deg,var(--r) 70%, #3a3d46 0);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero{display:grid;grid-template-columns:1.1fr 1fr;gap:20px;align-items:center;padding:56px 0 18px}
@media(max-width:980px){.hero{grid-template-columns:1fr}}
.hero-art{min-height:520px;border-radius:26px;background:radial-gradient(60% 60% at 65% 35%, rgba(255,53,85,.28), transparent 60%),radial-gradient(60% 60% at 35% 60%, rgba(138,43,226,.28), transparent 60%),#0d0e11;border:1px solid var(--bd);overflow:hidden;position:relative}
.hero-art img{position:absolute;right:-2%;bottom:-6%;width:min(520px,60%);filter:drop-shadow(0 12px 40px rgba(255,53,85,.25))}
.badge{display:inline-flex;gap:8px;align-items:center;font-size:12px;padding:.35rem .65rem;border:1px solid var(--bd);border-radius:999px;color:var(--muted)}
/* bento */
.bento{display:grid;grid-template-columns:2fr 1fr 1fr;grid-auto-rows:180px;gap:14px}
.bento > a{display:block;background:linear-gradient(180deg,#0c0d10,#0a0b0d);border:1px solid var(--bd);border-radius:22px;padding:16px;text-decoration:none;color:var(--text);position:relative;overflow:hidden}
.bento > a:after{content:"";position:absolute;inset:auto -20% -30% auto;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,var(--r),transparent 60%);filter:blur(60px);opacity:.22}
.bento h3{margin:0 0 6px}
@media(max-width:980px){.bento{grid-template-columns:1fr 1fr}.bento > a{grid-column:auto}}
@media(max-width:640px){.bento{grid-template-columns:1fr}}
/* radar */
.radar{max-width:720px;border:1px solid var(--bd);border-radius:22px;padding:12px;background:linear-gradient(180deg,#0b0c0e,#0a0b0d)}
svg{display:block}
/* footer */
footer{border-top:1px solid var(--bd);color:var(--muted);padding:20px 0;margin-top:36px}
/* lights */
.lights{position:fixed;inset:0;pointer-events:none;z-index:-1}
.orb{position:absolute;width:540px;height:540px;border-radius:50%;filter:blur(90px)saturate(120%);opacity:.22;mix-blend-mode:screen}
.red{background:radial-gradient(circle,var(--r),transparent 60%);left:-120px;top:10%;animation:float1 18s ease-in-out infinite}
.vio{background:radial-gradient(circle,var(--v),transparent 60%);right:-160px;top:30%;animation:float2 22s ease-in-out infinite}
.cya{background:radial-gradient(circle,var(--c),transparent 60%);left:40%;bottom:-180px;animation:float3 26s ease-in-out infinite}
@keyframes float1{0%,100%{transform:translate(0,0)}50%{transform:translate(40px,-30px)}}
@keyframes float2{0%,100%{transform:translate(0,0)}50%{transform:translate(-60px,20px)}}
@keyframes float3{0%,100%{transform:translate(0,0)}50%{transform:translate(20px,-40px)}}
.cursor-glow{position:fixed;left:var(--mx,50%);top:var(--my,50%);transform:translate(-50%,-50%);width:420px;height:420px;border-radius:50%;background:radial-gradient(closest-side, rgba(255,53,85,.22), rgba(138,43,226,.12) 40%, transparent 65%);filter:blur(30px);opacity:.4;transition:left .05s linear, top .05s linear}
/* layout helpers */
.grid-2{display:grid;grid-template-columns:2fr 1fr;gap:18px}
@media(max-width:980px){.grid-2{grid-template-columns:1fr}}
.badge-chip{display:inline-block;border:1px solid var(--bd);border-radius:999px;padding:.25rem .5rem;margin:.15rem .25rem;font-size:12px;color:var(--muted)}
hr.sep{border:none;height:1px;background:linear-gradient(90deg,transparent,#1b1d20,transparent);margin:24px 0}


/* Media banners: no stretch on mobile */
.banner{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:22px;border:1px solid var(--bd)}
@media(max-width:640px){.banner{aspect-ratio:4/5}}

/* Make hero-art friendlier on small screens */
@media(max-width:640px){
  .hero-art{min-height:320px}
  .hero-art img{width:80%;height:auto;right:auto;left:10%}
}

/* Zigzag content blocks */
.zigzag{display:grid;gap:28px}
.zrow{display:grid;grid-template-columns:1.2fr 1fr;gap:22px;align-items:center}
.zrow.reverse{grid-template-columns:1fr 1.2fr}
.zimg{border:1px solid var(--bd);border-radius:22px;overflow:hidden}
.zimg img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
@media(max-width:980px){.zrow,.zrow.reverse{grid-template-columns:1fr}}

/* FAQ accordion */
.faq details{border:1px solid var(--bd);border-radius:14px;padding:14px 16px;background:linear-gradient(180deg,#0b0c0e,#0a0b0d);margin:10px 0}
.faq summary{cursor:pointer;font-weight:700;outline:none}
.faq details[open]{box-shadow:0 12px 30px rgba(0,0,0,.35)}
.faq p{color:var(--muted)}

/* Comparison page additions */
.split{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:980px){.split{grid-template-columns:1fr}}
.kv{display:flex;gap:12px;align-items:center}
.kv img{width:46px;height:46px;border-radius:10px;border:1px solid var(--bd)}
.meter{height:10px;background:#17191c;border-radius:8px;overflow:hidden;border:1px solid var(--bd)}
.meter > i{display:block;height:100%;background:linear-gradient(90deg,var(--r),var(--v));}
.badge-tiny{display:inline-block;border:1px solid var(--bd);border-radius:999px;padding:.2rem .5rem;margin-right:6px;font-size:12px;color:var(--muted)}
.btn-ghost-big{padding:12px 16px;border-radius:14px;border:1px solid var(--bd);display:inline-flex;gap:8px;align-items:center;text-decoration:none;color:var(--text);background:linear-gradient(180deg,#0b0c0e,#0a0b0d)}
.btn-ghost-big:hover{border-color:#2a2e34}


/* v4 additions */
a{color:color-mix(in oklab, var(--c), white 15%);text-decoration:underline;text-decoration-color:color-mix(in oklab,var(--v),transparent 50%);text-underline-offset:2px}
.card a{color:var(--text);text-decoration-color:rgba(255,255,255,.25)}
.card a:hover{color:color-mix(in oklab, var(--text), var(--c) 25%)}
.hero-simple{padding:28px 0 8px}
.pills{display:flex;flex-wrap:wrap;gap:12px;margin:1.5rem 0}
.pill{border:1px solid var(--bd);border-radius:999px;padding:0.75rem 1.25rem;color:var(--text);font-size:14px;text-decoration:none;background:linear-gradient(180deg,#0b0c0e,#0a0b0d);transition:all 0.2s ease}
.pill:hover{background:linear-gradient(180deg,#0d0f12,#0b0c0e);border-color:var(--r);transform:translateY(-1px)}
.link-list{background:linear-gradient(180deg,#0b0c0e,#0a0b0d);border:1px solid var(--bd);border-radius:22px;padding:24px;margin:2rem 0}
.link-list h3{color:var(--text);font-size:1.1rem;margin:1.5rem 0 0.75rem;border-bottom:1px solid var(--bd);padding-bottom:0.5rem}
.link-list h3:first-child{margin-top:0}
.link-list ul{list-style:none;padding:0;margin:0;columns:2;gap:24px}
.link-list li{margin:0.5rem 0;break-inside:avoid}
.link-list a{color:var(--muted);text-decoration:none;font-size:14px;transition:color 0.2s ease}
.link-list a:hover{color:var(--text)}
@media(max-width:640px){.link-list ul{columns:1}}
.list-columns{columns:3;gap:24px}
@media(max-width:980px){.list-columns{columns:2}}
@media(max-width:640px){.list-columns{columns:1}}
.cmp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:980px){.cmp-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.cmp-grid{grid-template-columns:1fr}}
.hero-note{color:var(--muted);max-width:820px}
.badge-cta{display:inline-flex;align-items:center;gap:8px;padding:.5rem .75rem;border:1px solid var(--bd);border-radius:999px;background:linear-gradient(180deg,#0b0c0e,#0a0b0d)}


/* v5 tweaks */
.banner.hero-slim{aspect-ratio:21/9;max-height:380px}
@media(max-width:980px){.banner.hero-slim{aspect-ratio:16/9;max-height:300px}}
.stack{display:grid;gap:14px}

/* v6 */
.hero-art{will-change:transform}


/* v7: mobile nav + compact review banners + stronger mobile separation */
:root{--bd-strong:#2a2e34}

.banner.review-compact{aspect-ratio:21/9;max-height:260px}
@media(max-width:980px){.banner.review-compact{aspect-ratio:16/9;max-height:220px}}
@media(max-width:640px){.banner.review-compact{max-height:200px}}

/* header burger */
.header__in{display:flex;align-items:center;justify-content:space-between;gap:10px}
.logo{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;flex-shrink:0}
.nav{display:flex;gap:20px;align-items:center}
.nav-toggle{display:none;background:none;border:1px solid var(--bd);border-radius:10px;padding:8px 10px}
.nav-toggle i{display:block;width:20px;height:2px;background:#fff;position:relative}
.nav-toggle i::before,.nav-toggle i::after{content:"";position:absolute;left:0;width:20px;height:2px;background:#fff;transform-origin:left center}
.nav-toggle i::before{top:-6px}
.nav-toggle i::after{top:6px}
@media(max-width:980px){
  .nav-toggle{display:inline-flex}
  .nav{position:fixed;inset:auto 0 0 0;transform:translateY(100%);transition:transform .25s ease;
       background:rgba(10,11,13,.9);backdrop-filter:blur(10px);padding:14px 16px;border-top:1px solid var(--bd);z-index:60;
       display:grid;grid-template-columns:1fr 1fr;gap:12px}
  body.nav-open .nav{transform:translateY(0)}
  .nav a{display:block;padding:12px;border:1px solid var(--bd);border-radius:12px;text-align:center;background:linear-gradient(180deg,#0b0c0e,#0a0b0d)}
}

/* mobile separation for stacked cards */
@media(max-width:640px){
  .cards{gap:16px}
  .card{border-color:var(--bd-strong);box-shadow:0 10px 28px rgba(0,0,0,.45)}
  .card::after{content:"";position:absolute;inset:-4px;border-radius:inherit;pointer-events:none;
    background:radial-gradient(120px 120px at 0% 0%, rgba(255,60,120,.12), transparent 60%),
               radial-gradient(120px 120px at 100% 100%, rgba(0,200,255,.10), transparent 60%);
    filter:blur(16px);opacity:.7;z-index:-1}
  .card{position:relative}
}


/* v8 burger/adaptive polish */
@media(max-width:980px){
  .nav{z-index:9999}
  body.nav-open{overflow:hidden}
  .nav{grid-template-columns:1fr}
  .header{position:sticky;top:0;z-index:10000}
  .header .logo span{font-size:16px}
}
.btn-mini{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--bd);border-radius:12px;padding:.4rem .6rem;background:linear-gradient(180deg,#0b0c0e,#0a0b0d)}
.btn-mini img{width:24px;height:24px;border-radius:6px;border:1px solid var(--bd)}
.verdict{display:grid;grid-template-columns:1.2fr 1fr;gap:18px}
@media(max-width:980px){.verdict{grid-template-columns:1fr}}
.verdict .win{display:inline-block;margin-left:8px;border:1px solid var(--bd);border-radius:999px;padding:.15rem .55rem;font-size:12px;color:var(--muted)}
.verdict .bullets{display:grid;gap:6px;margin-top:8px}