/* wowfomo — strona startowa. Ciemna tablica, mosiężne akcenty (jak w kreatorze). */
@font-face{font-family:"Barlow";src:url(/fonts/barlow-400.woff) format("woff");font-weight:400;font-display:swap}
@font-face{font-family:"Barlow";src:url(/fonts/barlow-600.woff) format("woff");font-weight:600;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(/fonts/barlow-cond-600.woff) format("woff");font-weight:600;font-display:swap}
@font-face{font-family:"Grenze Gotisch";src:url(/fonts/grenze.woff) format("woff");font-weight:100 900;font-display:swap}
:root{
  color-scheme:dark;
  --bg:#0f1b1d;--bg2:#14262a;--panel:#1a2f33;--panel2:#20383c;--line:#2f4a4e;--line2:#3f5f63;
  --txt:#efe8d6;--mut:#a5b5b0;--dim:#8a9c9c;
  --brass:#d9ab55;--brass2:#f2d595;--ink:#10181a;
  --f-display:"Grenze Gotisch",Georgia,"Times New Roman",serif;
  --f-body:"Barlow",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-label:"Barlow Condensed","Arial Narrow",system-ui,sans-serif;
  --r:7px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--txt);font:400 17px/1.55 var(--f-body)}
a{color:var(--brass2);text-underline-offset:3px}
a:hover{color:#fff3cf}
:focus-visible{outline:2px solid var(--brass2);outline-offset:3px;border-radius:4px}
h1,h2,h3{margin:0;text-wrap:balance}
p{margin:0}
.wrap{max-width:1080px;margin:0 auto;padding-inline:max(16px,env(safe-area-inset-left,0px)) max(16px,env(safe-area-inset-right,0px))}
.skip{position:absolute;left:-999px;top:8px;background:var(--brass);color:var(--ink);padding:8px 12px;border-radius:var(--r);z-index:9}
.skip:focus{left:12px}

/* nagłówek */
.top{border-bottom:1px solid var(--line);background:var(--bg2)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:12px}
.brand{font:700 28px/1 var(--f-display);color:var(--brass2);text-decoration:none;letter-spacing:.01em}
.lang{display:flex;border:1px solid var(--line2);border-radius:var(--r);overflow:hidden;font:600 15px/1 var(--f-label);letter-spacing:.06em}
.lang a,.lang span{padding:8px 12px;text-decoration:none;color:var(--mut)}
.lang [aria-current]{background:var(--panel2);color:var(--txt)}
.lang a:hover{color:var(--txt);background:var(--panel)}

/* hero */
.hero{padding-block:clamp(40px,8vw,88px) clamp(32px,6vw,64px);background:
  radial-gradient(1200px 400px at 85% -10%,rgba(217,171,85,.13),transparent 60%),
  linear-gradient(180deg,var(--bg2),var(--bg))}
.kicker{font:600 14px/1.2 var(--f-label);letter-spacing:.14em;text-transform:uppercase;color:var(--brass)}
h1{font:600 clamp(36px,6.4vw,64px)/1.02 var(--f-display);margin-top:14px;max-width:16ch;letter-spacing:.005em}
.lede{margin-top:20px;max-width:60ch;font-size:clamp(17px,2vw,19.5px);color:#dcd5c3}
.status{margin-top:28px;display:flex;gap:12px;align-items:flex-start;max-width:62ch;padding:14px 16px;border:1px solid #4d441d;background:#2a2612;border-radius:var(--r);color:#f0e2b4;font-size:16px}
.status b{color:#ffe9a8}
.dot{flex:0 0 auto;width:10px;height:10px;margin-top:7px;border-radius:50%;background:var(--brass);box-shadow:0 0 0 4px rgba(217,171,85,.18)}

/* sekcje */
main section{padding-block:clamp(36px,6vw,64px);border-top:1px solid var(--line)}
h2{font:600 clamp(28px,3.6vw,36px)/1.1 var(--f-display)}
.sub{margin-top:10px;color:var(--mut);max-width:62ch}
.grid{margin-top:26px;display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:20px 20px 22px}
.card h3{font:600 15px/1.2 var(--f-label);letter-spacing:.1em;text-transform:uppercase;color:var(--brass2)}
.card p{margin-top:10px;color:#d6d0bf;font-size:16px}
.classes{margin:24px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.classes li{display:flex;align-items:center;gap:8px;padding:8px 13px;border:1px solid var(--line2);border-radius:999px;background:var(--panel);font:600 16px/1.1 var(--f-label);letter-spacing:.03em}
.classes li i{width:10px;height:10px;border-radius:50%;background:var(--c)}
.classes li small{font:400 14px/1 var(--f-body);color:var(--mut);letter-spacing:0}
.c-warrior{--c:#c69b6d}
.c-paladin{--c:#f48cba}
.c-hunter{--c:#aad372}
.c-rogue{--c:#fff468}
.c-priest{--c:#ffffff}
.c-shaman{--c:#2f8ff0}
.c-mage{--c:#3fc7eb}
.c-warlock{--c:#8788ee}
.c-druid{--c:#ff7c0a}
.nw{white-space:nowrap}
.cats{margin-top:18px;color:var(--mut);font-size:16px}
.faq{margin-top:22px;display:grid;gap:10px;max-width:780px}
.faq details{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:0 18px}
.faq summary{cursor:pointer;padding:15px 0;font-weight:600;list-style:none;display:flex;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+";flex:0 0 1ch;color:var(--brass);font-weight:600}
.faq details[open] summary::before{content:"−"}
.faq details p{padding-bottom:16px;color:#d6d0bf}

/* stopka */
footer{border-top:1px solid var(--line);background:var(--bg2);color:var(--dim);font-size:14.5px}
footer .wrap{padding-block:28px 36px;display:grid;gap:10px}
footer nav{display:flex;gap:18px;flex-wrap:wrap}

/* 404 */
.nf{min-height:60vh;display:grid;align-content:center;gap:16px;padding-block:64px}
.nf .code{font:700 clamp(64px,14vw,120px)/1 var(--f-display);color:var(--brass)}
.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 16px;border-radius:var(--r);background:var(--brass);color:var(--ink);font-weight:600;text-decoration:none}
.btn:hover{background:var(--brass2);color:var(--ink)}
.row{display:flex;gap:10px;flex-wrap:wrap}
.btn.ghost{background:none;border:1px solid var(--line2);color:var(--txt)}

@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}