/* THEME VARS */
:root{
  --bg-base:#0A0F1C; --bg:#0F1222; --panel:#0A0F1C; --text:#F8FAFC; --muted:#96A3B8;
  --bd:rgba(255,255,255,.10);
  --card:linear-gradient(180deg, rgba(10,15,28,.82), rgba(10,15,28,.64));

  /* Brand accents */
  --heart-1:#ff3b3f; --heart-2:#ff6b6b;          /* Heart: red */
  --of-1:#ff6b6b; --of-2:#f4d174;                /* Of: red -> gold */
  --gaming-1:#f4d174; --gaming-2:#1fb6ff; --gaming-3:#22c55e; /* Gaming: gold -> blue -> green */

  --gold:#D4AF37; --gold-soft:rgba(244,209,116,.22);
  --teal:#1fb6ff; --teal-soft:rgba(31,182,255,.22);
  --moss:#22C55E; --moss-soft:rgba(34,197,94,.22);
  --rose:#ff6b6b; --rose-soft:rgba(255,107,107,.24);
}

:root.theme-light{
  --bg-base:#FFFFFF; --bg:#FAFBFF; --panel:#FFFFFF; --text:#0F172A; --muted:#475569;
  --bd:rgba(2,6,23,.08);
  --card:linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.92));
}

/* BASE */
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial;
  color:var(--text);
  background: var(--bg-base);
  min-height:100%;
}
/* BRAND BACKGROUND — FULL PAGE (DEFAULT ON) */
.bg-brand{
  background:
    linear-gradient(110deg, rgba(255,59,63,.28) 0%, rgba(244,209,116,.24) 35%, rgba(31,182,255,.22) 70%, rgba(34,197,94,.20) 100%),
    radial-gradient(1000px 520px at -10% -20%, rgba(255,77,79,.34), transparent 65%),
    radial-gradient(900px 400px at 85% -30%, rgba(31,182,255,.22), transparent 60%),
    radial-gradient(900px 420px at 110% 10%, rgba(34,197,94,.20), transparent 65%),
    linear-gradient(0deg, rgba(2,6,23,.08), rgba(2,6,23,.08)),
    var(--bg);
  background-attachment: fixed,fixed,fixed,fixed,fixed,fixed;
}



h1,h2,h3{font-family:Cinzel,serif}
a{color:inherit;text-decoration:none}

.container{max-width:1200px;margin:0 auto;padding:18px 24px}
.badge{display:inline-block;padding:.35em .6em;border:1px solid var(--bd);border-radius:999px;color:var(--muted);font-size:.85rem}
.btn{display:inline-flex;align-items:center;gap:.6em;padding:.8em 1.1em;border-radius:10px;border:1px solid var(--bd);font-weight:700;transition:.2s;background:transparent}
.btn:hover{transform:translateY(-1px)}.btn:active{transform:none}
.btn--gold{background:linear-gradient(180deg,var(--gold-soft),transparent)}
.btn--teal{background:linear-gradient(180deg,var(--teal-soft),transparent)}
.btn--moss{background:linear-gradient(180deg,var(--moss-soft),transparent)}
.btn--rose{background:linear-gradient(180deg,var(--rose-soft),transparent)}

.card{background:var(--card);border:1px solid var(--bd);border-radius:16px;padding:20px;box-shadow:0 14px 36px rgba(0,0,0,.22)}
.muted{color:var(--muted)}

.grid{display:grid;gap:22px}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
@media (max-width: 980px){.grid--3{grid-template-columns:1fr}.grid--2{grid-template-columns:1fr}}

/* TOP BAR */
.topbar{
  position:sticky;top:0;z-index:70;
  background:
    linear-gradient(90deg, rgba(255,77,79,.24) 0%, rgba(244,209,116,.18) 40%, rgba(31,182,255,.18) 70%, rgba(34,197,94,.18) 100%),
    linear-gradient(180deg, rgba(10,15,28,.92), rgba(10,15,28,.72));
  backdrop-filter:blur(8px);border-bottom:1px solid var(--bd)
}
.theme-light .topbar{
  background:
    linear-gradient(90deg, rgba(255,77,79,.12) 0%, rgba(244,209,116,.10) 40%, rgba(31,182,255,.10) 70%, rgba(34,197,94,.10) 100%),
    linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.8));
}
.nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px}
.nav-center{display:flex;align-items:center;justify-content:center;gap:12px}
.brand{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:12px;border:1px solid var(--bd);background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02))}
.brand img{width:34px;height:34px}
.brand strong{display:flex;gap:.35ch;font-size:20px;line-height:1}
.brand .t-heart{background:linear-gradient(90deg,var(--heart-1),var(--heart-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.brand .t-of{background:linear-gradient(90deg,var(--of-1),var(--of-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.brand .t-gaming{background:linear-gradient(90deg,var(--gaming-1),var(--gaming-2),var(--gaming-3));-webkit-background-clip:text;background-clip:text;color:transparent}

.nav-left,.nav-right{display:flex;align-items:center}
.nav-right{justify-content:flex-end}
.nav-pill{display:inline-flex;align-items:center;gap:.6em;padding:.6em 1em;border-radius:999px;border:1px solid var(--bd);transition:.2s;transform:perspective(600px) rotateY(0) rotateX(0) scale(.98)}
.nav-pill:hover{transform:perspective(600px) rotateY(4deg) rotateX(2deg) scale(1.03);box-shadow:0 18px 50px rgba(0,0,0,.18)}
.nav-pill--fivem{background:linear-gradient(180deg,rgba(31,182,255,.20),rgba(31,182,255,.08))}
.nav-pill--mc{background:linear-gradient(180deg,rgba(34,197,94,.22),rgba(34,197,94,.10))}

/* SUBNAV */
.subnav{position:sticky;top:58px;z-index:60;background:var(--panel);border-bottom:1px solid var(--bd)}
.subnav .tabs{display:flex;gap:12px;flex-wrap:wrap;align-items:center;padding:10px 0}
.tab{position:relative;display:inline-flex;align-items:center;gap:.5em;padding:.55em .95em;border-radius:999px;border:1px solid var(--bd);opacity:.95;transition:.2s;background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02))}
.tab:hover{opacity:1;transform:translateY(-1px)}
.tab.active{box-shadow:0 8px 24px rgba(0,0,0,.18);background:linear-gradient(180deg,rgba(244,209,116,.22),rgba(244,209,116,.06))}

/* Dropdown */
.tab--menu{padding-right:2.1em}
.tab--menu::after{content:"▾"; position:absolute; right:.8em; top:50%; transform:translateY(-50%); opacity:.8; font-size:.9em}
.menu{position:absolute;top:calc(100% + 8px);left:0;min-width:220px;background:var(--panel);border:1px solid var(--bd);border-radius:12px;box-shadow:0 18px 60px rgba(0,0,0,.28);padding:6px;display:none;opacity:0;transform:translateY(6px);transition:.18s;z-index:65}
.menu a{display:flex;padding:.6em .8em;border-radius:8px;border:1px solid transparent}
.menu a:hover{background:linear-gradient(180deg,rgba(244,209,116,.16),rgba(244,209,116,.08));border-color:var(--bd)}
.tab--menu:hover .menu, .tab--menu[aria-expanded="true"] .menu{display:block;opacity:1;transform:translateY(0)}

/* THEME TOGGLE */

/* THEME TOGGLE ICONS */
.theme-toggle{
  position:fixed;right:16px;top:12px;z-index:90;
  width:44px;height:44px;padding:0;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--bd);
  background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05));
  box-shadow:0 10px 28px rgba(0,0,0,.35);
  color:var(--text);
  font-variant-ligatures:none; /* prevent weird fi/fl gl issues */
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
.theme-toggle svg{width:20px;height:20px;display:block}
.theme-toggle .icon-sun{display:none}
.theme-light .theme-toggle .icon-sun{display:block}
.theme-light .theme-toggle .icon-moon{display:none}





/* GALLERY */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.gallery img{width:100%;height:220px;object-fit:cover;border-radius:12px;border:1px solid var(--bd);background:#0B1222}
.theme-light .gallery img{background:#e2e8f0}

/* FORMS */
.copy{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.copy input{background:var(--panel);border:1px solid var(--bd);color:var(--text);padding:.8em 1em;border-radius:12px;min-width:260px}

/* FOOTER */
.footer{padding:32px 0;color:var(--muted);text-align:center;border-top:1px solid var(--bd)}