/* =============================================
   TOKENS
   ============================================= */
:root {
  --blue-deep:  #1A0404;
  --blue-dark:  #200606;
  --blue-mid:   #2E0A0A;
  --blue-card:  #380D0D;
  --blue-1:     #E51B1B;
  --blue-2:     #FF3B3B;
  --blue-3:     #FF6B5B;
  --cyan:       #FF8A3D;
  --violet:     #FF2D6B;
  --gold:       #FFB830;
  --white:      #FFF3EE;
  --muted:      rgba(255,190,180,0.38);
  --border:     rgba(255,107,91,0.12);
  --glass:      rgba(229,27,27,0.06);
  --fh: 'Syne', sans-serif;
  --fb: 'DM Sans', sans-serif;
  --nav-h: 64px;
}

/* =============================================
   RESET & BASE
   ============================================= */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  font-family:var(--fb);
  background:var(--blue-deep);
  color:var(--white);
  overflow-x:hidden;
  cursor:none;
  -webkit-font-smoothing:antialiased;
}
/* Disable custom cursor on touch */
@media (hover:none) {
  body { cursor:auto; }
  #cur, #cur2 { display:none; }
}
img, svg { display:block; max-width:100%; }
a { -webkit-tap-highlight-color:transparent; }

/* =============================================
   CUSTOM CURSOR (desktop only)
   ============================================= */
#cur {
  position:fixed; width:10px; height:10px;
  background:var(--blue-2); border-radius:50%;
  pointer-events:none; z-index:9999;
  transform:translate(-50%,-50%);
  mix-blend-mode:screen;
  transition:width .2s, height .2s, background .2s;
  will-change:left,top;
}
#cur2 {
  position:fixed; width:32px; height:32px;
  border:1.5px solid rgba(255,107,91,0.45); border-radius:50%;
  pointer-events:none; z-index:9998;
  transform:translate(-50%,-50%);
  transition:left .08s ease, top .08s ease;
  will-change:left,top;
}

/* =============================================
   NAVBAR
   ============================================= */
nav {
  position:fixed; top:0; left:0; right:0; z-index:300;
  height:var(--nav-h);
  padding:0 2rem;
  display:flex; align-items:center; justify-content:space-between;
  background:rgba(26,4,4,0.85);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border-bottom:1px solid rgba(255,107,91,0.08);
  transition:background .35s, box-shadow .35s;
}
nav.scrolled {
  background:rgba(26,4,4,0.97);
  box-shadow:0 1px 32px rgba(0,0,0,0.5);
}

.nav-logo {
  font-family:var(--fh); font-weight:800; font-size:.95rem;
  background:linear-gradient(135deg,var(--blue-2),var(--cyan));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  text-decoration:none; display:flex; align-items:center; gap:.65rem;
  white-space:nowrap;
}
.nav-logo-mark {
  width:30px; height:30px; border-radius:9px; flex-shrink:0;
  background:linear-gradient(135deg,var(--blue-1),var(--cyan));
  display:flex; align-items:center; justify-content:center;
}
.nav-logo em {
  -webkit-text-fill-color:rgba(255,190,180,.3);
  font-style:normal; font-weight:300; font-size:.85rem;
}

.nav-links { display:flex; gap:1.75rem; list-style:none; }
.nav-links a {
  font-size:.72rem; font-weight:500; letter-spacing:.09em; text-transform:uppercase;
  color:var(--muted); text-decoration:none; transition:color .2s;
  padding:.25rem 0;
}
.nav-links a:hover { color:var(--blue-3); }

.nav-right { display:flex; align-items:center; gap:1rem; }
.nav-disc {
  font-family:var(--fh); font-size:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  text-decoration:none; color:#fff;
  background:linear-gradient(135deg,#E51B1B,#FF6B5B);
  padding:.55rem 1.4rem; border-radius:100px;
  transition:transform .2s,box-shadow .2s;
  display:flex; align-items:center; gap:.5rem; white-space:nowrap;
}
.nav-disc:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(229,27,27,.5); }

/* Hamburger */
.hamburger {
  display:none;
  width:40px; height:40px; border-radius:10px;
  background:rgba(255,107,91,0.08); border:1px solid var(--border);
  flex-direction:column; align-items:center; justify-content:center;
  gap:5px; cursor:pointer; flex-shrink:0;
  transition:background .2s, border-color .2s;
  -webkit-tap-highlight-color:transparent;
}
.hamburger:hover { background:rgba(255,107,91,0.14); border-color:rgba(255,107,91,0.25); }
.hamburger span {
  display:block; width:18px; height:1.5px; background:var(--blue-3);
  border-radius:2px; transition:all .3s;
}
.hamburger.open span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
.hamburger.open span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); }

/* Mobile menu */
.mobile-menu {
  position:fixed; top:var(--nav-h); left:0; right:0; z-index:290;
  background:rgba(26,4,4,0.98);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  border-bottom:1px solid var(--border);
  padding:1.5rem 1.5rem 2rem;
  display:flex; flex-direction:column; gap:1rem;
  transform:translateY(-110%);
  transition:transform .35s cubic-bezier(0.16,1,0.3,1), opacity .35s;
  opacity:0;
  pointer-events:none;
}
.mobile-menu.open {
  transform:translateY(0);
  opacity:1;
  pointer-events:all;
}
.mobile-menu a {
  font-family:var(--fh); font-size:1.1rem; font-weight:700;
  color:rgba(255,190,180,.6); text-decoration:none;
  padding:.75rem 0; border-bottom:1px solid var(--border);
  transition:color .2s;
}
.mobile-menu a:last-child { border-bottom:none; }
.mobile-menu a:hover { color:var(--blue-3); }
.mobile-menu .m-disc {
  margin-top:.5rem;
  background:linear-gradient(135deg,#E51B1B,#FF6B5B);
  color:#fff; border:none; border-radius:12px;
  padding:1rem; text-align:center; font-size:.85rem; letter-spacing:.08em; text-transform:uppercase;
  display:flex; align-items:center; justify-content:center; gap:.6rem;
}

/* =============================================
   HERO
   ============================================= */
.hero {
  min-height:100svh;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center;
  padding:calc(var(--nav-h) + 4rem) 1.5rem 5rem;
  position:relative; overflow:hidden;
}
.hero-bg {
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 90% 70% at 50% -10%, rgba(229,27,27,.22) 0%, transparent 60%),
    radial-gradient(ellipse 55% 55% at 5% 85%, rgba(255,45,107,.11) 0%, transparent 55%),
    radial-gradient(ellipse 40% 40% at 95% 65%, rgba(255,138,61,.07) 0%, transparent 50%),
    var(--blue-deep);
  animation:bgGlow 10s ease-in-out infinite alternate;
}
@keyframes bgGlow {
  0%  { filter:hue-rotate(0deg) brightness(1); }
  100%{ filter:hue-rotate(12deg) brightness(1.06); }
}
.hero-grid {
  position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,107,91,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,107,91,.035) 1px, transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, black 15%, transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, black 15%, transparent 78%);
}
.orb { position:absolute; border-radius:50%; pointer-events:none; filter:blur(80px); animation:orbFloat 12s ease-in-out infinite; will-change:transform; }
.orb1 { width:500px; height:500px; top:-150px; left:-100px; background:rgba(229,27,27,.14); }
.orb2 { width:400px; height:400px; bottom:-100px; right:-80px; background:rgba(255,45,107,.1); animation-delay:-5s; }
.orb3 { width:300px; height:300px; top:40%; left:62%; background:rgba(255,138,61,.07); animation-delay:-8s; }
@keyframes orbFloat { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(28px,-28px) scale(1.05)} }

.stars { position:absolute; inset:0; pointer-events:none; }
.star  { position:absolute; border-radius:50%; background:#fff; animation:twinkle ease-in-out infinite; }
@keyframes twinkle { 0%,100%{opacity:.1;transform:scale(1)} 50%{opacity:.55;transform:scale(1.4)} }

.hero-badge {
  display:inline-flex; align-items:center; gap:.6rem;
  background:rgba(229,27,27,.1); border:1px solid rgba(255,107,91,.22);
  border-radius:100px; padding:.4rem 1.1rem;
  font-size:.68rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--blue-3); margin-bottom:1.75rem;
  opacity:0; animation:fadeUp .8s .2s forwards;
}
.hbdot { width:7px; height:7px; border-radius:50%; background:var(--cyan); box-shadow:0 0 8px var(--cyan); animation:blink 2s ease-in-out infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.25} }

.hero-title {
  font-family:var(--fh); font-weight:800;
  font-size:clamp(2.8rem,11vw,7.5rem);
  line-height:.95; letter-spacing:-0.04em; margin-bottom:1.1rem;
  opacity:0; animation:fadeUp .9s .4s forwards;
}
.hero-title .t1 { display:block; color:var(--white); }
.hero-title .t2 {
  display:block;
  background:linear-gradient(135deg,var(--blue-2) 0%,var(--cyan) 50%,var(--violet) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 60px rgba(255,107,91,.35));
}
.hero-sub {
  font-size:clamp(.88rem,2.2vw,1.12rem); font-weight:300;
  color:var(--muted); max-width:500px; line-height:1.8; margin:0 auto 2.5rem;
  opacity:0; animation:fadeUp .9s .6s forwards;
}
.hero-btns {
  display:flex; gap:1rem; flex-wrap:wrap; justify-content:center;
  opacity:0; animation:fadeUp .9s .8s forwards;
}
.btn-main {
  font-family:var(--fh); font-size:.78rem; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; text-decoration:none; color:#fff;
  background:linear-gradient(135deg,#E51B1B,#FF2D6B);
  padding:.9rem 2.2rem; border-radius:100px;
  box-shadow:0 4px 24px rgba(229,27,27,.4);
  transition:transform .25s,box-shadow .25s;
  display:inline-flex; align-items:center; gap:.6rem;
  min-height:48px;
}
.btn-main:hover  { transform:translateY(-3px); box-shadow:0 14px 40px rgba(229,27,27,.55); }
.btn-main:active { transform:translateY(-1px); }

.hero-stats {
  display:flex; gap:clamp(1.5rem,4vw,3rem); margin-top:4rem;
  opacity:0; animation:fadeUp .9s 1s forwards;
  flex-wrap:wrap; justify-content:center;
}
.st { text-align:center; }
.st-n {
  font-family:var(--fh); font-weight:800;
  font-size:clamp(1.7rem,5vw,2.8rem);
  background:linear-gradient(135deg,var(--white),var(--blue-3));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; line-height:1;
}
.st-l { font-size:.62rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--muted); margin-top:.35rem; }
.st-div { width:1px; background:rgba(255,107,91,.12); align-self:stretch; }

@keyframes fadeUp { from{opacity:0;transform:translateY(26px)} to{opacity:1;transform:translateY(0)} }

.scroll-arrow {
  position:absolute; bottom:1.5rem; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.4rem;
  color:rgba(255,190,180,.2); font-size:.58rem; letter-spacing:.15em; text-transform:uppercase;
  animation:fadeUp 1s 1.5s both;
}
.scroll-bar { width:1px; height:40px; background:linear-gradient(to bottom,rgba(255,107,91,.6),transparent); animation:pulse 2.2s ease-in-out infinite; }
@keyframes pulse { 0%,100%{transform:scaleY(1);opacity:.55} 50%{transform:scaleY(.45);opacity:1} }

/* =============================================
   SHARED SECTION
   ============================================= */
section { padding:clamp(4rem,8vw,7rem) 1.5rem; }
.wrap { max-width:1160px; margin:0 auto; }
.sec-tag { font-family:var(--fh); font-size:.6rem; font-weight:700; letter-spacing:.25em; text-transform:uppercase; color:var(--blue-2); margin-bottom:.9rem; }
.sec-h   { font-family:var(--fh); font-weight:800; font-size:clamp(1.8rem,4.5vw,3.2rem); letter-spacing:-.03em; line-height:1.08; margin-bottom:1.1rem; }
.sec-p   { font-size:.93rem; font-weight:300; color:var(--muted); line-height:1.82; max-width:500px; }

/* =============================================
   ECONOMY
   ============================================= */
.economy { background:var(--blue-dark); position:relative; overflow:hidden; }
.eco-glow {
  position:absolute; top:-200px; right:-200px;
  width:600px; height:600px; border-radius:50%;
  background:radial-gradient(circle,rgba(255,184,48,.05) 0%,transparent 70%);
  pointer-events:none;
}
.eco-layout { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; }
.eco-cards  { display:flex; flex-direction:column; gap:.9rem; }
.eco-card {
  background:var(--blue-card); border:1px solid var(--border); border-radius:16px;
  padding:1.35rem 1.4rem; display:flex; align-items:center; gap:1.1rem;
  transition:all .3s; cursor:none;
}
.eco-card:hover { border-color:rgba(255,107,91,.3); transform:translateX(5px); background:rgba(229,27,27,.08); }
.eco-icon {
  width:44px; height:44px; flex-shrink:0; border-radius:11px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,rgba(229,27,27,.18),rgba(255,138,61,.1));
  border:1px solid rgba(255,107,91,.2);
}
.eco-card:nth-child(2) .eco-icon { background:linear-gradient(135deg,rgba(255,184,48,.15),rgba(255,140,0,.08)); border-color:rgba(255,184,48,.25); }
.eco-card:nth-child(3) .eco-icon { background:linear-gradient(135deg,rgba(255,45,107,.15),rgba(255,107,91,.08)); border-color:rgba(255,45,107,.25); }
.eco-card:nth-child(4) .eco-icon { background:linear-gradient(135deg,rgba(255,138,61,.12),rgba(229,27,27,.08)); border-color:rgba(255,138,61,.25); }
.eco-name { font-family:var(--fh); font-weight:700; font-size:.86rem; margin-bottom:.22rem; }
.eco-desc { font-size:.77rem; color:var(--muted); line-height:1.56; }

/* =============================================
   GAMES
   ============================================= */
.games { background:var(--blue-mid); position:relative; overflow:hidden; }
.games-bg { position:absolute; inset:0; background:radial-gradient(ellipse 60% 60% at 50% 0%, rgba(255,45,107,.08), transparent 60%); pointer-events:none; }
.games-header { text-align:center; margin-bottom:3.5rem; }
.games-header .sec-p { margin:0 auto; }
.games-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(175px,1fr)); gap:1.1rem; }
.game-item {
  background:var(--blue-card); border:1px solid var(--border); border-radius:16px;
  padding:1.6rem 1.2rem; text-align:center; cursor:none;
  transition:all .3s; position:relative; overflow:hidden;
}
.game-item::after {
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 50% 0%, var(--gc,rgba(255,107,91,.08)), transparent 70%);
  opacity:0; transition:opacity .3s;
}
.game-item:hover { transform:translateY(-5px); border-color:rgba(255,107,91,.3); box-shadow:0 16px 48px rgba(0,0,0,.3); }
.game-item:hover::after { opacity:1; }
.game-item:hover .gico { transform:scale(1.1) rotate(4deg); }
.gico { width:46px; height:46px; margin:0 auto .85rem; display:flex; align-items:center; justify-content:center; transition:transform .3s; }
.gico svg { width:100%; height:100%; }
.gname { font-family:var(--fh); font-weight:700; font-size:.84rem; margin-bottom:.3rem; }
.gtag  { font-size:.68rem; color:var(--muted); line-height:1.5; }
.rsubs { display:flex; flex-wrap:wrap; gap:.3rem; margin-top:.5rem; justify-content:center; }
.rsub  { font-size:.58rem; font-weight:600; background:rgba(255,184,48,.1); border:1px solid rgba(255,184,48,.2); color:var(--gold); padding:.15rem .5rem; border-radius:100px; }

/* =============================================
   COMMUNITY
   ============================================= */
.community { background:var(--blue-dark); }
.comm-layout { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; }
.act-list { display:flex; flex-direction:column; gap:.8rem; margin-top:1.8rem; }
.act-item {
  display:flex; align-items:center; gap:1rem; padding:.9rem 1.15rem;
  background:var(--glass); border:1px solid var(--border); border-radius:12px;
  transition:all .25s; cursor:none;
}
.act-item:hover { border-color:rgba(255,107,91,.25); background:rgba(229,27,27,.07); transform:translateX(4px); }
.act-ico { width:30px; height:30px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.act-ico svg { width:17px; height:17px; }
.act-text { font-size:.82rem; color:rgba(255,190,180,.65); line-height:1.5; }
.act-text strong { color:var(--white); font-weight:600; }

/* Discord box */
.disc-box {
  background:var(--blue-card); border:1px solid rgba(229,27,27,.28); border-radius:22px;
  padding:2.5rem 2rem; text-align:center; position:relative; overflow:hidden;
}
.disc-box::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,#E51B1B,var(--violet),transparent); }
.disc-logo { width:52px; height:52px; margin:0 auto 1.1rem; }
.disc-big  {
  font-family:var(--fh); font-weight:800; font-size:3.2rem; letter-spacing:-.04em;
  background:linear-gradient(135deg,#fff,var(--blue-3));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; line-height:1;
}
.disc-sub-lbl { font-size:.7rem; color:var(--muted); font-weight:600; letter-spacing:.1em; text-transform:uppercase; margin-top:.3rem; margin-bottom:1.4rem; }
.disc-desc { font-size:.86rem; color:var(--muted); line-height:1.72; margin-bottom:1.75rem; max-width:280px; margin-left:auto; margin-right:auto; }
.disc-join {
  font-family:var(--fh); font-size:.76rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; text-decoration:none; color:#fff;
  background:linear-gradient(135deg,#E51B1B,#FF2D6B);
  padding:.95rem 2.2rem; border-radius:100px;
  display:inline-flex; align-items:center; gap:.6rem;
  box-shadow:0 6px 24px rgba(229,27,27,.4);
  transition:transform .25s,box-shadow .25s;
  min-height:48px;
}
.disc-join:hover  { transform:translateY(-3px); box-shadow:0 14px 40px rgba(229,27,27,.55); }
.disc-join:active { transform:translateY(-1px); }

/* =============================================
   FINAL CTA
   ============================================= */
.final-cta { padding:6rem 1.5rem; text-align:center; position:relative; overflow:hidden; background:var(--blue-deep); }
.fcglow { position:absolute; inset:0; background:radial-gradient(ellipse 70% 60% at 50% 50%, rgba(229,27,27,.1), transparent 70%); pointer-events:none; }
.big-h   { font-family:var(--fh); font-weight:800; font-size:clamp(2rem,6vw,4.8rem); letter-spacing:-.04em; margin-bottom:.9rem; line-height:1.05; }
.big-sub { font-size:clamp(.9rem,2vw,1rem); color:var(--muted); margin-bottom:2.75rem; }

/* =============================================
   FOOTER
   ============================================= */
footer {
  padding:2rem 1.5rem;
  padding-bottom:calc(2rem + env(safe-area-inset-bottom));
  background:var(--blue-dark);
  border-top:1px solid var(--border);
}
.foot {
  max-width:1160px; margin:0 auto;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1.25rem;
}
.flogo { font-family:var(--fh); font-weight:800; font-size:.92rem; background:linear-gradient(135deg,var(--blue-2),var(--cyan)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.flinks { display:flex; gap:1.5rem; flex-wrap:wrap; }
.flinks a { font-size:.72rem; color:rgba(255,190,180,.22); text-decoration:none; transition:color .2s; padding:.25rem 0; }
.flinks a:hover { color:var(--blue-3); }
.fcopy { font-size:.7rem; color:rgba(255,190,180,.14); }

/* =============================================
   REVEAL ANIMATION
   ============================================= */
.reveal { opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease; }
.reveal.up { opacity:1; transform:translateY(0); }

/* =============================================
   RESPONSIVE — TABLET ≤ 900px
   ============================================= */
@media (max-width:900px) {
  .eco-layout  { grid-template-columns:1fr; gap:3rem; }
  .comm-layout { grid-template-columns:1fr; gap:3rem; }
  .nav-links   { display:none; }
  .hamburger   { display:flex; }
  .nav-disc    { display:none; }
}

/* =============================================
   RESPONSIVE — MOBILE ≤ 600px
   ============================================= */
@media (max-width:600px) {
  :root { --nav-h:58px; }
  nav   { padding:0 1.1rem; }

  .hero { padding:calc(var(--nav-h) + 3rem) 1.2rem 4rem; }
  .hero-stats { gap:1.5rem; }
  .st-div     { display:none; }

  .hero-btns { flex-direction:column; align-items:center; }
  .btn-main  { width:100%; max-width:320px; justify-content:center; }

  .games-grid { grid-template-columns:1fr 1fr; }

  .eco-cards { gap:.75rem; }
  .eco-card  { padding:1.1rem 1.1rem; }

  .disc-box  { padding:2rem 1.4rem; }

  .foot { flex-direction:column; align-items:flex-start; gap:1rem; }
  .flinks { gap:1rem; }

  .scroll-arrow { display:none; }
}

/* =============================================
   RESPONSIVE — SMALL MOBILE ≤ 380px
   ============================================= */
@media (max-width:380px) {
  .games-grid { grid-template-columns:1fr; }
  .hero-badge { font-size:.6rem; }
}

/* =============================================
   SAFE AREA — notch / home bar
   ============================================= */
nav {
  padding-left:max(2rem, env(safe-area-inset-left));
  padding-right:max(2rem, env(safe-area-inset-right));
}
@media (max-width:600px) {
  nav {
    padding-left:max(1.1rem, env(safe-area-inset-left));
    padding-right:max(1.1rem, env(safe-area-inset-right));
  }
}

/* =============================================
   REDUCE MOTION
   ============================================= */
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.2s !important; }
  html { scroll-behavior:auto; }
}