/* Caedrel vs One Hundred - variables, reset, nav, buttons (V0.2, extracted unchanged from V0.1) */
:root{
  --navy:#060a1c; --navy2:#0b1230; --navy3:#121b45;
  --red:#e0123f; --red2:#ff2d5f; --yellow:#ffc906; --gold:#c8aa6e; --hex:#0ac8b9; --twitch:#9146ff;
  --text:#eef1ff; --muted:#9aa4d1; --line:rgba(200,170,110,.28);
  --display:"Bebas Neue",Impact,"Haettenschweiler","Arial Narrow Bold","Arial Black",sans-serif;
  --body:"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--navy);color:var(--text);font-family:var(--body);line-height:1.5;overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;z-index:-1;background:
  radial-gradient(1200px 600px at 85% -10%,rgba(224,18,63,.25),transparent 60%),
  radial-gradient(900px 600px at -10% 30%,rgba(10,200,185,.12),transparent 60%),
  linear-gradient(180deg,var(--navy) 0%,var(--navy2) 100%)}
a{color:var(--yellow)}
h1,h2,h3{font-family:var(--display);font-weight:400;letter-spacing:.02em;text-transform:uppercase;line-height:.95}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
section{padding:70px 0;position:relative}
.eyebrow{display:inline-block;font:700 12px var(--body);letter-spacing:.22em;text-transform:uppercase;color:var(--yellow);margin-bottom:10px}
.h2{font-size:clamp(38px,6vw,64px);margin-bottom:10px}
.lead{color:var(--muted);max-width:700px;font-size:17px;margin-bottom:28px}
.skew{transform:skewX(-8deg)} .skew>*{transform:skewX(8deg)}

/* NAV */
nav{position:sticky;top:0;z-index:50;background:rgba(6,10,28,.82);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
nav .wrap{display:flex;align-items:center;gap:18px;height:62px}
.brand{font-family:var(--display);font-size:26px;letter-spacing:.04em;text-decoration:none;color:#fff;white-space:nowrap}
.brand b{color:var(--red2);font-weight:400}.brand i{color:var(--yellow);font-style:normal}
.navlinks{display:flex;gap:4px;margin-left:auto;align-items:center;flex-wrap:wrap}
.navlinks a{color:var(--text);text-decoration:none;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:8px 10px;border-radius:6px;opacity:.85}
.navlinks a:hover{opacity:1;background:rgba(255,255,255,.07)}
.rb{font:800 10px var(--body);letter-spacing:.18em;text-transform:uppercase;padding:5px 9px;border:1px solid var(--yellow);color:var(--yellow);border-radius:3px;white-space:nowrap}
.lock{cursor:pointer;background:transparent;border:1px solid var(--line);color:var(--text);padding:7px 12px;border-radius:6px;font:600 12px var(--body);letter-spacing:.06em;text-transform:uppercase}
.lock.on{background:var(--yellow);color:#111;border-color:var(--yellow)}
@media(max-width:900px){.navlinks a{display:none}.rb{display:none}}
@media(max-width:600px){.brand{font-size:19px}.lock{padding:6px 8px;font-size:11px}nav .wrap{gap:8px}}

/* BUTTONS */
.btn{cursor:pointer;border:0;font:800 15px var(--body);letter-spacing:.1em;text-transform:uppercase;padding:14px 26px;border-radius:4px;color:#fff;background:var(--red);transition:.15s;clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%)}
a.btn{text-decoration:none;display:inline-block}
.btn:hover{background:var(--red2);transform:translateY(-2px)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn.y{background:var(--yellow);color:#111}.btn.y:hover{background:#ffd93a}
.btn.g{background:transparent;color:var(--text);outline:1px solid var(--line);outline-offset:-1px}.btn.g:hover{background:rgba(255,255,255,.08)}
.btn.win{background:#13a86b}.btn.win:hover{background:#19c77f}
.btn.sm{padding:9px 16px;font-size:12px}
