:root{
  --bg:#080808;--bg2:#111;--ink:#f2efe6;--muted:#a7a29a;--red:#e3122f;--red2:#ff2d47;--line:#2a2a2a;
  --display:'Anton','Impact','Arial Black',sans-serif;--body:'Jost','Futura',system-ui,sans-serif;--type:'Special Elite','Courier New',monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6;overflow-x:hidden}
a{color:var(--ink);text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3,.display{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.01em;line-height:.95}
h1{font-size:clamp(3rem,9vw,7.5rem)}
h2{font-size:clamp(2.2rem,5.5vw,4.5rem)}
h3{font-size:clamp(1.4rem,2.6vw,2rem)}
p+p{margin-top:1em}
.wrap{max-width:1240px;margin:0 auto;padding:0 clamp(16px,4vw,48px)}
.small{font-size:.85rem;color:var(--muted)}
.type{font-family:var(--type)}
.red{color:var(--red)}

/* grain texture overlay */
.grain{position:fixed;inset:-50%;width:200%;height:200%;pointer-events:none;z-index:9000;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-4%)}60%{transform:translate(-4%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}

/* marquee */
.marquee{overflow:hidden;white-space:nowrap;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);background:var(--red);color:#000;font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:.8rem;padding:.35rem 0}
.marquee__track{display:inline-block;animation:scroll 40s linear infinite}
.marquee__track span{display:inline-block;padding-right:1rem}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee--big{background:var(--ink);color:var(--bg);font-family:var(--display);font-size:clamp(2rem,6vw,5rem);letter-spacing:.02em;padding:.4rem 0;border-color:var(--red)}
.marquee--big .marquee__track{animation-duration:30s}

/* header */
.header{display:flex;align-items:center;justify-content:space-between;padding:1rem clamp(16px,4vw,48px);border-bottom:2px solid var(--ink);position:sticky;top:0;background:rgba(8,8,8,.92);backdrop-filter:blur(6px);z-index:100}
.logo{display:flex;align-items:center;gap:.6rem;font-family:var(--display);text-transform:uppercase;line-height:.85;font-size:1.25rem}
.logo__crown{font-size:2.2rem;color:var(--red);line-height:1}
.logo__text em{font-style:normal;color:var(--red);margin-left:.25em}
.nav{display:flex;align-items:center;gap:1.6rem;text-transform:uppercase;font-weight:700;letter-spacing:.14em;font-size:.8rem}
.nav a{position:relative;padding:.3rem 0}
.nav a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--red);transition:width .2s}
.nav a:hover::after,.nav a.is-active::after{width:100%}
.nav-toggle{display:none;background:none;border:2px solid var(--ink);color:var(--ink);font-size:1.3rem;padding:.2rem .6rem;cursor:pointer}
.age-badge{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;border:3px solid var(--red);color:var(--red);font-family:var(--display);font-size:1rem;letter-spacing:0;flex-shrink:0}
.age-badge--lg{width:64px;height:64px;font-size:1.5rem;margin-top:1rem}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.5rem;background:var(--red);color:#000;font-family:var(--display);text-transform:uppercase;font-size:1.1rem;letter-spacing:.06em;padding:.8rem 1.8rem;border:2px solid var(--red);cursor:pointer;transition:transform .15s,background .15s;box-shadow:5px 5px 0 var(--ink)}
.btn:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink);background:var(--red2)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--ink);box-shadow:5px 5px 0 var(--red)}
.btn--ghost:hover{background:var(--ink);color:#000;box-shadow:7px 7px 0 var(--red)}
.btn--sm{font-size:.9rem;padding:.55rem 1.2rem;box-shadow:3px 3px 0 var(--ink)}

/* hero */
.hero{position:relative;min-height:78vh;display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:2rem;padding:clamp(2rem,6vw,5rem) clamp(16px,4vw,48px);border-bottom:2px solid var(--ink);overflow:hidden;
  background:radial-gradient(ellipse at 70% 40%,rgba(227,18,47,.28),transparent 55%),var(--bg)}
.hero__kicker{font-family:var(--type);color:var(--red);font-size:1rem;letter-spacing:.2em;text-transform:uppercase;margin-bottom:1rem}
.hero h1 span{display:block}
.hero h1 .outline{color:transparent;-webkit-text-stroke:2px var(--ink)}
.hero__sub{max-width:38ch;margin:1.4rem 0 2rem;font-size:1.1rem;color:var(--muted)}
.hero__actions{display:flex;gap:1rem;flex-wrap:wrap}
.hero__art{position:relative;display:flex;flex-direction:column;gap:1rem;align-items:center}
.hero__crown{font-size:clamp(9rem,22vw,20rem);line-height:1;color:var(--red);filter:drop-shadow(0 0 40px rgba(227,18,47,.5));animation:float 6s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-18px) rotate(3deg)}}
.hero__stamp{position:absolute;top:8%;right:6%;width:120px;height:120px;border:4px double var(--ink);border-radius:50%;display:flex;align-items:center;justify-content:center;text-align:center;font-family:var(--display);font-size:.8rem;line-height:1.05;transform:rotate(14deg);opacity:.85;padding:.5rem}
.hero__bg{position:absolute;bottom:-.25em;left:-.05em;font-family:var(--display);font-size:clamp(8rem,28vw,26rem);line-height:1;color:transparent;-webkit-text-stroke:1px rgba(242,239,230,.12);pointer-events:none;user-select:none;text-transform:uppercase}

/* sections */
.section{padding:clamp(3rem,8vw,6rem) 0;border-bottom:2px solid var(--line)}
.section--red{background:var(--red);color:#000;border-color:var(--ink)}
.section--red .small,.section--red p{color:#1a0004}
.section__head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;margin-bottom:2.5rem}
.section__head p{max-width:48ch;color:var(--muted)}
.section--red .section__head p{color:#2a0008}
.eyebrow{font-family:var(--type);text-transform:uppercase;letter-spacing:.2em;font-size:.85rem;color:var(--red);display:block;margin-bottom:.6rem}
.section--red .eyebrow{color:#000}

/* brand cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1.5rem}
.card{background:var(--bg2);border:2px solid var(--ink);padding:1.6rem;position:relative;display:flex;flex-direction:column;gap:1rem;transition:transform .2s;box-shadow:8px 8px 0 var(--red)}
.card:hover{transform:translate(-3px,-3px)}
.card__rank{position:absolute;top:-16px;left:-16px;background:var(--ink);color:#000;font-family:var(--display);width:44px;height:44px;display:flex;align-items:center;justify-content:center;font-size:1.3rem;border:2px solid var(--bg)}
.card__logo{background:#fff;padding:1rem;display:flex;align-items:center;justify-content:center;min-height:110px;border:2px solid var(--ink)}
.card__logo img{max-height:70px;width:auto;object-fit:contain}
.card__title{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.stars{color:var(--red);letter-spacing:.1em;font-size:1rem}
.rating{font-family:var(--display);font-size:1.8rem}
.rating small{font-size:.9rem;color:var(--muted)}
.card__meta{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;font-size:.8rem;text-transform:uppercase;letter-spacing:.06em}
.card__meta div{border:1px solid var(--line);padding:.5rem;text-align:center}
.card__meta strong{display:block;font-size:1rem;color:var(--red);letter-spacing:0;text-transform:none}
.card__actions{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:auto}
.card__licence{font-size:.75rem;color:var(--muted)}
.card__licence a{text-decoration:underline}

/* feature grid */
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:2px;background:var(--ink);border:2px solid var(--ink)}
.grid3 > div{background:var(--bg);padding:2rem}
.section--red .grid3{background:#000;border-color:#000}
.section--red .grid3 > div{background:var(--red)}
.grid3 .num img{width:auto;max-width:100%;display:block}
.grid3 .num{font-family:var(--display);font-size:3.5rem;line-height:1;color:var(--red);margin-bottom:.6rem}
.section--red .grid3 .num img{width:auto;max-width:100%;display:block}
.grid3 .num{color:#000}
.grid3 h3{margin-bottom:.6rem}

/* compare table */
.table-wrap{overflow-x:auto;border:2px solid var(--ink)}
table{width:100%;border-collapse:collapse;min-width:560px}
th,td{padding:.9rem 1rem;border-bottom:1px solid var(--line);text-align:left}
th{font-family:var(--display);text-transform:uppercase;font-weight:400;letter-spacing:.05em;background:var(--bg2);font-size:1.05rem}
tr:last-child td{border-bottom:0}
td img{max-height:34px;width:auto}

/* review page */
.review-hero{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center;padding:clamp(2rem,5vw,4rem) 0;border-bottom:2px solid var(--ink)}
.review-hero .card__logo{min-height:200px}
.review-hero .card__logo img{max-height:120px}
.scorebars{display:grid;gap:.7rem;margin:1.5rem 0}
.scorebar{display:grid;grid-template-columns:130px 1fr 44px;gap:.8rem;align-items:center;font-size:.85rem;text-transform:uppercase;letter-spacing:.08em}
.scorebar .bar{height:12px;background:var(--bg2);border:1px solid var(--ink)}
.scorebar .bar i{display:block;height:100%;background:var(--red)}
.proscons{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin:2rem 0}
.proscons div{border:2px solid var(--ink);padding:1.4rem}
.proscons ul{list-style:none}
.proscons li{padding:.35rem 0 .35rem 1.6rem;position:relative}
.proscons .pros li::before{content:"✔";position:absolute;left:0;color:#3ddc84}
.proscons .cons li::before{content:"✘";position:absolute;left:0;color:var(--red)}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:2px;background:var(--ink);border:2px solid var(--ink);margin:2rem 0}
.facts div{background:var(--bg);padding:1rem;text-align:center}
.facts span{display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.facts strong{font-family:var(--display);font-size:1.4rem;font-weight:400}
.prose{max-width:76ch}
.prose h2{font-size:clamp(1.8rem,3.5vw,2.6rem);margin:2.5rem 0 .8rem;padding-left:.8rem;border-left:6px solid var(--red)}
.prose h3{margin:1.8rem 0 .5rem}
.prose ul,.prose ol{margin:.6rem 0 1rem 1.4rem}
.prose li{margin:.3rem 0}
.prose a{color:var(--red2);text-decoration:underline}
.verdict{background:var(--ink);color:#000;padding:2rem;margin:2.5rem 0;border-left:12px solid var(--red)}
.verdict h2{color:#000;border:0;padding:0;margin:0 0 .6rem}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chips span{border:1px solid var(--ink);padding:.25rem .7rem;font-size:.8rem;text-transform:uppercase;letter-spacing:.06em}

/* page hero (inner pages) */
.page-hero{padding:clamp(3rem,7vw,5rem) 0 2.5rem;border-bottom:2px solid var(--ink);background:radial-gradient(ellipse at 20% 0%,rgba(227,18,47,.22),transparent 55%)}
.page-hero h1{font-size:clamp(2.6rem,7vw,5.5rem)}
.page-hero p{max-width:60ch;color:var(--muted);margin-top:1rem}
.updated{font-family:var(--type);font-size:.8rem;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;margin-top:1rem;display:block}

/* faq */
.faq details{border:2px solid var(--ink);margin-bottom:-2px;background:var(--bg2)}
.faq summary{cursor:pointer;list-style:none;padding:1.1rem 1.4rem;font-family:var(--display);text-transform:uppercase;font-size:1.15rem;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--red);font-size:1.6rem;flex-shrink:0}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 1.4rem 1.2rem;color:var(--muted);max-width:80ch}

/* forms */
.form{display:grid;gap:1rem;max-width:620px}
.form label{display:grid;gap:.3rem;font-size:.8rem;text-transform:uppercase;letter-spacing:.1em}
.form input,.form textarea,.form select{background:var(--bg2);border:2px solid var(--ink);color:var(--ink);padding:.8rem 1rem;font-family:var(--body);font-size:1rem}
.form input:focus,.form textarea:focus{outline:2px solid var(--red);outline-offset:2px}
.notice{border:2px solid #3ddc84;padding:1rem 1.4rem;margin-bottom:1.5rem;color:#3ddc84}
.contact-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:3rem}
.contact-side div{border:2px solid var(--ink);padding:1.4rem;margin-bottom:1rem}
.contact-side h3{margin-bottom:.4rem}

/* team */
.team{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.5rem}
.team div{border:2px solid var(--ink);padding:1.5rem;background:var(--bg2)}
.team .avatar{width:64px;height:64px;border-radius:50%;background:var(--red);display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:1.5rem;color:#000;margin-bottom:1rem}

/* footer */
.footer{border-top:2px solid var(--ink);padding:3rem clamp(16px,4vw,48px) 2rem;background:#050505}
.footer__top{display:grid;grid-template-columns:1.3fr .8fr .8fr 1.6fr;gap:2.5rem;margin-bottom:2.5rem}
.footer__brand p{color:var(--muted);margin-top:1rem;font-size:.95rem}
.footer__col{display:flex;flex-direction:column;gap:.5rem}
.footer__col h4{font-family:var(--display);text-transform:uppercase;font-weight:400;font-size:1.1rem;color:var(--red);margin-bottom:.4rem}
.footer__col a{color:var(--muted);font-size:.95rem}
.footer__col a:hover{color:var(--ink)}
.help-logos{display:flex;flex-wrap:wrap;gap:.8rem;margin-bottom:.8rem}
.help-logo{display:flex;align-items:center;background:#fff;color:#111;padding:.5rem .8rem;border:2px solid var(--ink);height:56px;transition:transform .15s}
.help-logo:hover{transform:translateY(-2px)}
.help-logo img{height:32px;width:auto;max-width:180px;object-fit:contain}
.help-logo--dark{background:#000;border-color:var(--muted)}
.help-logo--dark img{height:40px}
.footer__licence{display:grid;grid-template-columns:auto 1fr;gap:.6rem 1.5rem;align-items:start}
.footer__licence p{grid-column:2}
.licence-logo{grid-row:1 / span 2;display:flex;align-items:center;border:2px solid var(--line);padding:.6rem .8rem;background:#000}
.licence-logo img{height:36px;width:auto}
@media (max-width:700px){.footer__licence{grid-template-columns:1fr}.footer__licence p{grid-column:1}.licence-logo{grid-row:auto;width:max-content}}
.footer__licence{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:1.4rem 0;font-size:.85rem;color:var(--muted)}
.footer__licence a{text-decoration:underline;color:var(--ink)}
.footer__bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;padding-top:1.4rem;font-size:.8rem;color:var(--muted)}
.footer__bottom a{color:var(--ink)}

/* cookie banner */
.cookie[hidden]{display:none!important}
.cookie{position:fixed;left:16px;right:16px;bottom:16px;z-index:8000;background:var(--ink);color:#000;border:3px solid var(--red);box-shadow:8px 8px 0 var(--red);padding:1.2rem 1.5rem;display:flex;gap:1.5rem;align-items:center;justify-content:space-between;flex-wrap:wrap;max-width:1000px;margin:0 auto;animation:rise .4s ease-out}
@keyframes rise{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
.cookie__body{flex:1;min-width:260px}
.cookie__body strong{font-family:var(--display);font-size:1.3rem;text-transform:uppercase;display:block;margin-bottom:.3rem}
.cookie__body p{font-size:.9rem;line-height:1.45}
.cookie__body a{text-decoration:underline}
.cookie__actions{display:flex;gap:.8rem}
.cookie .btn--ghost{color:#000;border-color:#000;box-shadow:4px 4px 0 var(--red)}
.cookie .btn{box-shadow:4px 4px 0 #000}

.to-top{position:fixed;right:20px;bottom:20px;width:48px;height:48px;border:2px solid var(--ink);background:var(--bg);display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:1.4rem;opacity:0;pointer-events:none;transition:opacity .2s;z-index:7000}
.to-top.is-visible{opacity:1;pointer-events:auto}

/* 404 */
.notfound{text-align:center;padding:6rem 1rem}
.notfound h1{font-size:clamp(6rem,25vw,18rem);color:var(--red)}

@media (max-width:900px){
  .hero{grid-template-columns:1fr;min-height:auto}
  .hero__art{order:-1}
  .hero__crown{font-size:clamp(7rem,30vw,12rem)}
  .review-hero,.proscons,.contact-grid{grid-template-columns:1fr}
  .footer__top{grid-template-columns:1fr 1fr}
}
@media (max-width:700px){
  .nav-toggle{display:block}
  .nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--bg);border-bottom:2px solid var(--ink);flex-direction:column;align-items:flex-start;padding:1rem clamp(16px,4vw,48px) 1.5rem;gap:1rem}
  .nav.is-open{display:flex}
  .footer__top{grid-template-columns:1fr}
  .scorebar{grid-template-columns:100px 1fr 40px}
  .cookie__actions{width:100%}
  .cookie__actions .btn{flex:1;justify-content:center}
}