/* ============================================
   RELIX CHEATS — GLOBAL STYLES
   ============================================ */

/* --- Reset --- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

/* --- Variables --- */
:root{
  --bg-0:#080808;
  --bg-1:#0c0c0c;
  --bg-2:#111111;
  --bg-card:#131313;
  --bg-card-h:#181818;
  --bg-elevated:#1b1b1b;
  --border:#191919;
  --border-h:#262626;
  --text:#ededed;
  --text-2:#7a7a7a;
  --text-3:#474747;
  --accent:#7cb342;
  --accent-d:#558b2f;
  --accent-l:#9ccc65;
  --accent-glow:rgba(124,179,66,.12);
  --red:#ef4444;
  --green:#22c55e;
  --yellow:#eab308;
  --blue:#3b82f6;
  --purple:#a855f7;
  --r-sm:6px;
  --r-md:10px;
  --r-lg:14px;
  --r-xl:20px;
  --font:'Outfit',sans-serif;
  --mono:'JetBrains Mono',monospace;
  --ease:cubic-bezier(.4,0,.2,1);
}

html{scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:#1a1a1a var(--bg-0);overflow-y:scroll}
html::-webkit-scrollbar{width:5px}
html::-webkit-scrollbar-track{background:var(--bg-0)}
html::-webkit-scrollbar-thumb{background:#222;border-radius:3px}

body{
  font-family:var(--font);background:var(--bg-0);color:var(--text);
  -webkit-font-smoothing:antialiased;min-height:100vh;
}
.page-wrap{overflow-x:hidden}

/* Noise overlay — lightweight version */
body::after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.015;
  background:repeating-conic-gradient(rgba(255,255,255,.008) 0% 25%,transparent 0% 50%) 0 0/4px 4px;
}

a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font-family:var(--font)}

/* --- Utilities --- */
.container{max-width:1200px;margin:0 auto;padding:0 24px}
.page-wrap{padding-top:72px;min-height:100vh}

/* Touch & device support */
@supports(padding:env(safe-area-inset-bottom)){
  body{padding-bottom:env(safe-area-inset-bottom)}
  .navbar{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
}
input,select,textarea,button{font-size:16px} /* prevent iOS zoom on focus */
*{-webkit-tap-highlight-color:transparent}

@media(max-width:480px){
  .container{padding:0 16px}
  .page-wrap{padding-top:64px}
}
@media(min-width:481px) and (max-width:768px){
  .container{padding:0 20px}
}
@media(min-width:769px) and (max-width:1024px){
  .container{padding:0 28px}
}
.gradient-text{background:linear-gradient(135deg,var(--accent-l),var(--accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.mono{font-family:var(--mono)}

/* --- Animations --- */
@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes pulseDot{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}

.au{animation:fadeUp .5s var(--ease) both}
.au1{animation-delay:.05s}.au2{animation-delay:.1s}.au3{animation-delay:.15s}.au4{animation-delay:.2s}.au5{animation-delay:.25s}
.sa{opacity:0;transform:translateY(16px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.sa.visible{opacity:1;transform:translateY(0)}

/* --- Section Headers --- */
.sh{margin-bottom:48px}
.sh.center{text-align:center}
.sh-label{
  display:inline-flex;align-items:center;gap:8px;font-size:.7rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.12em;color:var(--accent);margin-bottom:12px;font-family:var(--mono);
}
.sh-label::before{content:'//';opacity:.4}
.sh h1,.sh h2{font-size:clamp(1.6rem,3.5vw,2.4rem);font-weight:800;letter-spacing:-.025em;line-height:1.15;margin-bottom:10px}
.sh p{font-size:.95rem;color:var(--text-2);max-width:500px;line-height:1.6}
.sh.center p{margin:0 auto}

/* --- Buttons --- */
.btn{
  display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border-radius:var(--r-md);
  font-size:.9rem;font-weight:600;cursor:pointer;border:none;font-family:var(--font);transition:all .25s ease;
}
.btn-p{background:var(--accent);color:#000}
.btn-p:hover{background:var(--accent-l);box-shadow:0 0 28px rgba(124,179,66,.25);transform:translateY(-1px)}
.btn-s{background:var(--bg-card);color:var(--text);border:1px solid var(--border)}
.btn-s:hover{border-color:var(--border-h);background:var(--bg-card-h);transform:translateY(-1px)}
.btn-sm{
  display:inline-flex;align-items:center;gap:6px;padding:7px 16px;border-radius:var(--r-sm);
  font-size:.8rem;font-weight:600;cursor:pointer;border:none;font-family:var(--font);transition:all .25s ease;
}
.btn-ghost{background:transparent;color:var(--text-2);border:1px solid var(--border)}
.btn-ghost:hover{color:var(--text);border-color:var(--border-h);background:rgba(255,255,255,.02)}
.btn-accent{background:var(--accent);color:#000}
.btn-accent:hover{background:var(--accent-l);box-shadow:0 0 20px rgba(124,179,66,.2)}

/* --- Cards --- */
.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-lg);transition:all .25s var(--ease);position:relative;overflow:hidden}
.card:hover{border-color:var(--border-h)}

/* --- Skeleton --- */
.skel{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-lg);position:relative;overflow:hidden}
.skel::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.015),transparent);animation:shimmer 1.5s infinite}