:root{--bg:#000;--panel:#0d0d0d;--line:#2a2a2a;--text:#f4f4f4;--muted:#a3a3a3;--red:#ff1414;--red-d:#b80000;
--display:'Barlow Condensed','Arial Narrow',Impact,sans-serif;--body:'Barlow',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);color-scheme:dark}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#000;--text:#f4f4f4}}
:root[data-theme="dark"]{--bg:#000;--text:#f4f4f4}
html{height:100%;scroll-behavior:smooth;scroll-padding-top:calc(76px + env(safe-area-inset-top,0px))}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font:400 17px/1.6 var(--body);overflow-x:hidden}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--red);outline-offset:3px}
img{max-width:100%}

/* NAV */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:rgba(0,0,0,.9);backdrop-filter:blur(8px);border-bottom:2px solid var(--red)}
.nav-in{max-width:1160px;margin:0 auto;padding:10px 20px;display:flex;align-items:center;gap:28px}
.brand{display:flex;align-items:center;gap:12px;font:italic 900 30px/1 var(--display);letter-spacing:.5px}
.brand img{width:48px;height:48px;display:block}
.links{display:flex;gap:6px;margin-left:auto;align-items:center;list-style:none;padding:0;margin-block:0}
.links a{display:block;padding:10px 14px;font-weight:600;color:var(--muted);transition:color .15s}
.links a:hover{color:var(--text)}
.links .cta{background:var(--red);color:#fff;padding:10px 20px;margin-left:8px;clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);font-family:var(--display);font-style:italic;font-weight:800;font-size:19px;letter-spacing:.5px}
.links .cta:hover{background:#fff;color:#000}
.burger{display:none;margin-left:auto;background:none;border:2px solid var(--line);color:var(--text);width:46px;height:46px;font-size:22px;cursor:pointer}

/* HERO */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.hero::before{content:"";position:absolute;inset:0 0 0 52%;background:linear-gradient(115deg,transparent 0 12%,var(--red-d) 12% 40%,var(--red) 40% 100%);clip-path:polygon(22% 0,100% 0,100% 100%,0 100%);opacity:.9}
.hero-in{position:relative;max-width:1160px;margin:0 auto;padding:72px 20px 88px;display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center}
h1{margin:0;font:italic 900 clamp(76px,13vw,168px)/.86 var(--display);letter-spacing:1px}
.lead{max-width:46ch;color:var(--muted);font-size:19px;margin:26px 0 34px}
.btns{display:flex;gap:14px;flex-wrap:wrap}
.btn{display:inline-block;padding:14px 30px;font:italic 800 22px/1 var(--display);letter-spacing:.5px;clip-path:polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%)}
.btn.red{background:var(--red);color:#fff} .btn.red:hover{background:#fff;color:#000}
.btn.line{background:var(--text);color:#000} .btn.line:hover{background:var(--red);color:#fff}
.hero-logo{justify-self:center;width:min(380px,100%);filter:drop-shadow(0 20px 40px rgba(0,0,0,.6));transform:rotate(-4deg)}

/* SECTIONS */
section{max-width:1160px;margin:0 auto;padding:84px 20px}
h2{margin:0 0 26px;font:italic 900 clamp(44px,6vw,72px)/.95 var(--display)}
h2::after{content:"";display:block;width:90px;height:6px;background:var(--red);margin-top:14px;transform:skewX(-30deg)}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.big{font-size:22px;line-height:1.55;max-width:34ch;margin:0}
.facts{margin:0;padding:0;list-style:none;border-left:3px solid var(--red)}
.facts li{padding:6px 0 22px 24px}
.facts b{display:block;font:italic 800 28px/1.1 var(--display);letter-spacing:.5px}
.facts span{color:var(--muted)}
#regler{border-top:1px solid var(--line)}
.ladder{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;counter-reset:r}
.ladder li{counter-increment:r;margin-left:calc(var(--i)*clamp(6px,2.4vw,26px));padding:10px 18px;background:var(--panel);border-left:5px solid var(--red);font-weight:600;display:flex;gap:14px;align-items:baseline}
.ladder li::before{content:counter(r);font:italic 800 20px/1 var(--display);color:var(--red);min-width:1.4em}
.ladder li:last-child{background:var(--red);border-left-color:#fff;color:#fff}
.ladder li:last-child::before{color:#fff}
.rules{margin:0;padding:0;list-style:none;display:grid;gap:0}
.rules li{padding:18px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:minmax(160px,.4fr) 1fr;gap:20px}
.rules b{font:italic 800 26px/1.15 var(--display)}
.rules span{color:var(--muted)}
.join{background:var(--red);color:#fff;max-width:none;padding:0;clip-path:polygon(0 0,100% 0,100% calc(100% - 28px),0 100%)}
.join-in{max-width:1160px;margin:0 auto;padding:72px 20px 96px;display:flex;gap:30px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.join h2{margin:0} .join h2::after{background:#000}
.join .btn{background:#000;color:#fff} .join .btn:hover{background:#fff;color:#000}
footer{max-width:1160px;margin:0 auto;padding:28px 20px 40px;display:flex;gap:14px;align-items:center;color:var(--muted);font-size:15px}
footer img{width:32px;height:32px}

@media (max-width:860px){
  .burger{display:block}
  .links{position:absolute;left:0;right:0;top:100%;background:#000;border-bottom:2px solid var(--red);flex-direction:column;align-items:stretch;gap:0;padding:8px 20px 16px;display:none}
  .links.open{display:flex}
  .links .cta{margin:10px 0 0;text-align:center;clip-path:none}
  .hero::before{inset:55% 0 0 0;clip-path:polygon(0 18%,100% 0,100% 100%,0 100%)}
  .hero-in{grid-template-columns:1fr;padding:48px 20px 64px}
  .hero-logo{order:-1;width:170px;justify-self:start}
  .cols{grid-template-columns:1fr;gap:34px}
  .rules li{grid-template-columns:1fr;gap:4px}
  section{padding:60px 20px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* LINKS TIL PHP-SIDER */
#whitelist{border-top:1px solid var(--line)}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.tile{display:block;padding:24px;background:var(--panel);border-left:5px solid var(--red);transition:background .15s,transform .15s}
.tile:hover{background:#1a1a1a;transform:translateY(-2px)}
.tile b{display:block;font:italic 800 28px/1.1 var(--display);margin-bottom:6px}
.tile span{color:var(--muted)}
.foot-links{display:flex;gap:16px;flex-wrap:wrap;margin-left:auto}
.foot-links a{color:var(--muted)} .foot-links a:hover{color:var(--text)}

form.inline{display:inline}
.linkbtn{display:block;padding:10px 14px;font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.linkbtn:hover{color:#fff}