:root {
  --background: oklch(0.08 0.02 24); --foreground: oklch(0.96 0.02 80);
  --card: oklch(0.13 0.035 28); --card-foreground: oklch(0.96 0.02 80);
  --primary: oklch(0.65 0.25 32); --primary-foreground: oklch(0.99 0.01 80);
  --secondary: oklch(0.82 0.16 78); --secondary-foreground: oklch(0.13 0.04 30);
  --muted: oklch(0.18 0.03 28); --muted-foreground: oklch(0.72 0.03 65);
  --accent: oklch(0.79 0.18 72); --accent-foreground: oklch(0.11 0.03 28);
  --border: oklch(0.3 0.06 33); --ring: oklch(0.69 0.23 38);
  --positive: oklch(0.7 0.18 145); --warning: oklch(0.78 0.17 75); --danger: oklch(0.61 0.23 28);
  --surface-raised: oklch(0.16 0.04 29); --surface-dark: oklch(0.105 0.025 27);
}
* { box-sizing: border-box; border-color: var(--border); }
html { scroll-behavior: smooth; background: var(--background); }
body { margin: 0; background: var(--background); color: var(--foreground); font-family: var(--font-sans); font-size: 17px; line-height: 1.65; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
h1,h2,h3,p { margin-top: 0; }
h1,h2,h3 { letter-spacing: 0; }
.site-header { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--border); background: color-mix(in oklab,var(--background) 92%,transparent); backdrop-filter: blur(18px); }
.header-inner { width: min(1180px,calc(100% - 32px)); height: 76px; margin: auto; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 20px; }
.brand-link { display: block; width: 142px; min-width: 0; }
.brand-link img { display: block; width: 100%; height: 58px; object-fit: contain; }
.desktop-nav { display: none; align-items: center; gap: 30px; font-weight: 700; text-transform: uppercase; font-size: 13px; }
.desktop-nav a { color: var(--muted-foreground); padding: 25px 0 22px; border-bottom: 3px solid transparent; }
.desktop-nav a.active,.desktop-nav a:hover { color: var(--foreground); border-color: var(--primary); }
.header-actions { display: flex; align-items: center; gap: 12px; }
.language-switcher { display: flex; border: 1px solid var(--border); border-radius: 5px; overflow: hidden; }
.language-switcher a { padding: 6px 9px; font-size: 12px; font-weight: 800; color: var(--muted-foreground); }
.language-switcher a.active { background: var(--primary); color: var(--primary-foreground); }
.menu-button { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--border); border-radius: 5px; color: var(--foreground); background: var(--surface-raised); cursor: pointer; }
.mobile-nav { display: grid; padding: 8px 20px 20px; background: var(--background); }
.mobile-nav a { padding: 12px 0; border-bottom: 1px solid var(--border); font-weight: 800; text-transform: uppercase; }
.hero { min-height: 650px; background-position: center top; background-repeat: no-repeat; background-size: cover; display: flex; align-items: flex-start; text-align: center; padding: 82px 16px 80px; }
.hero-content { width: min(940px,100%); margin: 0 auto; }
.eyebrow,.section-heading>span,.editorial-pair article>span,.alert-section span { display: inline-block; color: var(--secondary); font-weight: 900; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.hero h1 { max-width: 920px; margin: 18px auto 14px; font-family: var(--font-display); font-size: clamp(2.2rem,7vw,5.1rem); line-height: .98; text-transform: uppercase; text-wrap: balance; text-shadow: 0 4px 22px var(--background); }
.hero p { max-width: 670px; margin: 0 auto 28px; color: var(--foreground); font-size: clamp(1rem,2vw,1.25rem); font-weight: 600; text-shadow: 0 2px 10px var(--background); }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 18px; }
.cta { display: inline-flex; min-height: 54px; padding: 0 28px; align-items: center; justify-content: center; border-radius: 5px; background: linear-gradient(180deg,var(--secondary),var(--primary)); color: var(--secondary-foreground); font-family: var(--font-display); text-transform: uppercase; box-shadow: 0 10px 30px color-mix(in oklab,var(--primary) 30%,transparent); transition: transform .2s ease; }
.cta:hover { transform: translateY(-2px); }
.text-link { font-weight: 900; text-decoration: underline; text-decoration-color: var(--primary); text-underline-offset: 6px; }
.quick-verdict { width: min(1180px,calc(100% - 32px)); margin: -92px auto 0; position: relative; display: grid; gap: 22px; align-items: center; padding: 26px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-raised); box-shadow: 0 18px 70px var(--background); }
.quick-verdict h2 { font-family: var(--font-display); text-transform: uppercase; margin-bottom: 6px; }
.quick-verdict p { margin-bottom: 0; color: var(--muted-foreground); }
.score { text-align: center; border-bottom: 1px solid var(--border); padding-bottom: 18px; }
.score span { display: block; font: 3.2rem/1 var(--font-display); color: var(--secondary); }
.score small { color: var(--muted-foreground); }
.toc { width: min(850px,calc(100% - 32px)); margin: 24px auto 0; display: flex; overflow-x: auto; border: 1px solid var(--border); border-radius: 5px; background: var(--surface-dark); }
.toc a { flex: 1 0 auto; padding: 11px 18px; text-align: center; font-weight: 800; font-size: 13px; text-transform: uppercase; border-right: 1px solid var(--border); }
.section { width: min(1100px,calc(100% - 32px)); margin: 0 auto; padding: 84px 0; }
.section-heading { margin-bottom: 30px; }
.section-heading h2,.editorial-pair h2,.alert-section h2,.changelog h2,.closing-cta h2 { margin: 8px 0 0; font: clamp(1.8rem,4vw,3.1rem)/1.05 var(--font-display); text-transform: uppercase; }
.story-grid { display: grid; gap: 34px; }
.prose { max-width: 760px; }
.prose p,.lead-copy,.editorial-pair p { color: var(--muted-foreground); font-size: 1.08rem; }
.prose p:first-child::first-letter { float: left; padding: 9px 10px 0 0; color: var(--primary); font: 4.4rem/0.7 var(--font-display); }
.timeline { padding: 24px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-raised); align-self: start; }
.timeline>svg { color: var(--secondary); }
.timeline h3 { margin: 10px 0 20px; font-family: var(--font-display); text-transform: uppercase; }
.timeline>div { display: grid; grid-template-columns: 42px 1fr; align-items: center; padding: 10px 0; border-top: 1px solid var(--border); }
.timeline b { color: var(--primary); }
.split { display: grid; gap: 16px; padding-top: 20px; }
.split>div { padding: 26px; border-radius: 6px; background: var(--surface-raised); }
.split h2 { font-family: var(--font-display); text-transform: uppercase; }
.split p { display: grid; grid-template-columns: 28px 1fr; gap: 8px; color: var(--muted-foreground); }
.split p span { font-weight: 900; color: var(--positive); }
.cons p span { color: var(--danger); }
.facts-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); border-top: 1px solid var(--border); border-left: 1px solid var(--border); }
.fact { min-width: 0; display: grid; padding: 18px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--surface-dark); }
.fact>span { font-size: 1.3rem; }
.fact small { color: var(--muted-foreground); }
.fact strong { overflow-wrap: anywhere; }
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 6px; }
table { width: 100%; border-collapse: collapse; min-width: 600px; background: var(--surface-dark); }
th,td { padding: 15px 18px; text-align: left; border-bottom: 1px solid var(--border); }
th { color: var(--secondary); text-transform: uppercase; font-size: 12px; letter-spacing: .08em; }
.alert-section { background: var(--primary); color: var(--primary-foreground); }
.alert-section>div { width: min(940px,calc(100% - 32px)); margin: auto; padding: 60px 0; }
.alert-section span { color: var(--primary-foreground); }
.alert-section p { max-width: 850px; margin: 18px 0 0; }
.editorial-pair { display: grid; gap: 50px; }
.editorial-pair article { padding-left: 20px; border-left: 3px solid var(--primary); }
.responsible-section { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 22px; align-items: start; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.responsible-section svg { width: 42px; height: 42px; color: var(--positive); }
.responsible-section h2 { font-family: var(--font-display); text-transform: uppercase; }
.responsible-section p { color: var(--muted-foreground); }
.faq-list { border-top: 1px solid var(--border); }
.faq-list details { border-bottom: 1px solid var(--border); }
.faq-list summary { cursor: pointer; list-style: none; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 20px; padding: 22px 0; font-weight: 800; font-size: 1.1rem; }
.faq-list summary::-webkit-details-marker { display:none; }
.faq-list details[open] svg { transform: rotate(180deg); }
.faq-list p { max-width: 800px; padding: 0 0 22px; color: var(--muted-foreground); }
.changelog { border-top: 1px solid var(--border); }
.changelog p { padding: 11px 0; margin: 0; border-bottom: 1px solid var(--border); color: var(--muted-foreground); }
.closing-cta { padding: 80px 16px; text-align: center; background: var(--surface-raised); border-top: 1px solid var(--border); }
.closing-cta h2 { max-width: 800px; margin: 0 auto 28px; }
.warning { width: min(980px,calc(100% - 32px)); margin: -48px auto 0; position: relative; display: grid; grid-template-columns: 48px minmax(0,1fr); gap: 18px; align-items: start; padding: 25px; background: var(--warning); color: var(--secondary-foreground); border-radius: 6px; }
.warning strong { display: grid; place-items: center; width: 42px; height: 42px; border: 2px solid currentColor; border-radius: 50%; font-size: 1.5rem; }
.warning p { margin: 0; font-weight: 700; }
.narrow { max-width: 820px; }
.numbered ol { list-style:none; padding:0; border-top:1px solid var(--border); }
.numbered li { display:grid; grid-template-columns:48px minmax(0,1fr); gap:18px; padding:20px 0; border-bottom:1px solid var(--border); }
.numbered b { color:var(--primary); font-family:var(--font-display); font-size:1.4rem; }
.numbered p { margin:0; color:var(--muted-foreground); }
.checklist>p { display:grid; grid-template-columns:28px minmax(0,1fr); gap:12px; padding:14px 0; margin:0; border-bottom:1px solid var(--border); }
.checklist span { color:var(--positive); font-weight:900; }
.sitemap-hero { min-height:360px; display:grid; place-content:center; text-align:center; padding:80px 16px; background:var(--surface-dark); }
.sitemap-hero>span { color:var(--primary); font-family:var(--font-display); }
.sitemap-hero h1 { margin:10px 0; font:clamp(2.5rem,7vw,5rem)/1 var(--font-display); text-transform:uppercase; }
.sitemap-hero p { max-width:650px; color:var(--muted-foreground); }
.sitemap-grid { display:grid; gap:16px; }
.sitemap-grid>a { padding:28px; border:1px solid var(--border); border-radius:6px; background:var(--surface-dark); }
.sitemap-grid small { color:var(--primary); font-weight:900; }
.sitemap-grid h2 { margin:8px 0; font-family:var(--font-display); text-transform:uppercase; }
.sitemap-grid p { margin:0; color:var(--muted-foreground); }
footer { border-top:1px solid var(--border); padding:50px max(16px,calc((100% - 1100px)/2)); background:var(--surface-dark); }
.footer-top { display:grid; gap:24px; }
.footer-top img { width:150px; height:auto; }
.footer-top p { color:var(--muted-foreground); max-width:750px; }
.responsible { display:grid; grid-template-columns:auto minmax(0,1fr); gap:14px; align-items:center; margin:30px 0; padding:18px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.responsible strong { color:var(--danger); font:1.6rem var(--font-display); }
.responsible span { color:var(--muted-foreground); }
.footer-bottom { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; font-size:14px; color:var(--muted-foreground); }
.footer-bottom a { color:var(--secondary); }
.to-top { position:fixed; right:16px; bottom:16px; z-index:30; display:grid; place-items:center; width:42px; height:42px; border:1px solid var(--border); border-radius:5px; background:var(--surface-raised); color:var(--foreground); font-weight:900; }
@media (min-width: 768px) {
 .header-inner { grid-template-columns:auto minmax(0,1fr) auto; } .desktop-nav { display:flex; justify-content:center; } .menu-button,.mobile-nav { display:none; }
 .hero { min-height:720px; padding-top:90px; } .quick-verdict { grid-template-columns:130px minmax(0,1fr) auto; } .score { border:0; border-right:1px solid var(--border); padding:0 20px 0 0; }
 .story-grid { grid-template-columns:minmax(0,1.7fr) minmax(280px,.8fr); } .split,.editorial-pair { grid-template-columns:1fr 1fr; } .facts-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
 .sitemap-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .footer-top { grid-template-columns:180px minmax(0,1fr); align-items:start; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } .cta { transition:none; } }

.hero { background-image: linear-gradient(to bottom, transparent 45%, var(--background) 100%), url("../images/huzzlin-hero.webp"); }
.mobile-nav[hidden] { display: none; }
@media (min-width: 768px) { .mobile-nav { display: none !important; } }