/* ============================================================
   Nolimit City Review — global.css
   Industrial Edgy / Cyberpunk Grunge
   Palette: Deep Black #090909 | White #FFFFFF | Toxic Yellow #E5FF00
   ============================================================ */

/* --- Reset & Base --- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px;-webkit-text-size-adjust:100%}
body{
  font-family:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
  background:#090909;color:#fff;line-height:1.65;overflow-x:hidden;
  cursor:none; /* custom cursor takes over */
}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
img{max-width:100%;display:block}
button{font:inherit;cursor:none;border:none;background:none;color:inherit}
::selection{background:#E5FF00;color:#090909}

/* --- Scrollbar --- */
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:#090909}
::-webkit-scrollbar-thumb{background:#E5FF00;border-radius:3px}

/* --- Custom Cursor --- */
.cursor{position:fixed;top:0;left:0;width:20px;height:20px;border:2px solid #E5FF00;border-radius:50%;pointer-events:none;z-index:10000;transform:translate(-50%,-50%);transition:width .2s,height .2s,border-color .2s}
.cursor.active{width:50px;height:50px;border-color:#fff}
.cursor-dot{position:fixed;top:0;left:0;width:6px;height:6px;background:#E5FF00;border-radius:50%;pointer-events:none;z-index:10001;transform:translate(-50%,-50%)}

/* --- Noise Overlay --- */
.noise{
  position:fixed;inset:0;pointer-events:none;z-index:9998;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat:repeat;background-size:128px 128px;
}

/* --- Scanlines --- */
.scanlines{
  position:fixed;inset:0;pointer-events:none;z-index:9997;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.06) 2px,rgba(0,0,0,.06) 4px);
}

/* --- Navbar --- */
.navbar{
  position:fixed;top:0;left:0;right:0;z-index:9000;
  background:rgba(9,9,9,.92);backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(229,255,0,.08);
  padding:0 2rem;height:64px;display:flex;align-items:center;justify-content:space-between;
}
.nav-logo{
  font-size:1.25rem;font-weight:900;letter-spacing:2px;text-transform:uppercase;
  color:#E5FF00;position:relative;
}
.nav-logo .glitch{position:relative;display:inline-block}
.nav-logo .glitch::before,.nav-logo .glitch::after{
  content:attr(data-text);position:absolute;left:0;top:0;width:100%;height:100%;
}
.nav-logo .glitch::before{animation:glitch-1 3s infinite linear alternate-reverse;clip-path:inset(0 0 80% 0);color:#fff}
.nav-logo .glitch::after{animation:glitch-2 2.5s infinite linear alternate-reverse;clip-path:inset(80% 0 0 0);color:#E5FF00}

.nav-links{display:flex;gap:1.75rem;align-items:center}
.nav-links a{
  font-size:.8rem;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;
  color:rgba(255,255,255,.6);transition:color .25s;position:relative;
}
.nav-links a:hover,.nav-links a.active{color:#E5FF00}
.nav-links a::after{
  content:'';position:absolute;bottom:-4px;left:0;width:0;height:2px;
  background:#E5FF00;transition:width .3s;
}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}

.nav-hamburger{display:none;flex-direction:column;gap:5px;cursor:none;padding:8px}
.nav-hamburger span{width:24px;height:2px;background:#E5FF00;transition:all .3s}
.nav-hamburger.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.nav-hamburger.open span:nth-child(2){opacity:0}
.nav-hamburger.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

.nav-mobile{
  display:none;position:fixed;top:64px;left:0;right:0;bottom:0;
  background:rgba(9,9,9,.97);z-index:8999;
  flex-direction:column;align-items:center;justify-content:center;gap:2rem;
}
.nav-mobile.open{display:flex}
.nav-mobile a{
  font-size:1.2rem;font-weight:700;letter-spacing:3px;text-transform:uppercase;
  color:#fff;transition:color .25s;
}
.nav-mobile a:hover{color:#E5FF00}

@media(max-width:768px){
  .nav-links{display:none}
  .nav-hamburger{display:flex}
}

/* --- Footer --- */
.footer{
  border-top:1px solid rgba(229,255,0,.1);padding:4rem 2rem 2rem;
  background:linear-gradient(180deg,transparent,rgba(229,255,0,.02));
}
.footer-inner{
  max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2rem;
}
.footer-col h4{font-size:.75rem;letter-spacing:2px;text-transform:uppercase;color:#E5FF00;margin-bottom:1rem}
.footer-col a{display:block;font-size:.85rem;color:rgba(255,255,255,.5);margin-bottom:.5rem;transition:color .2s}
.footer-col a:hover{color:#E5FF00}
.footer-col p{font-size:.8rem;color:rgba(255,255,255,.4);line-height:1.7}
.footer-bottom{
  max-width:1200px;margin:3rem auto 0;padding-top:2rem;
  border-top:1px solid rgba(255,255,255,.06);
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;
}
.footer-bottom span{font-size:.75rem;color:rgba(255,255,255,.3)}
.footer-18{font-size:.7rem;color:rgba(255,255,255,.25);background:rgba(255,255,255,.04);padding:.25rem .75rem;border-radius:3px;border:1px solid rgba(255,255,255,.06)}

/* --- Page Container --- */
.page{max-width:1200px;margin:0 auto;padding:0 2rem}
.page-hero{padding-top:120px;padding-bottom:4rem;text-align:center;position:relative}
.page-hero h1{font-size:clamp(2rem,5vw,3.5rem);font-weight:900;text-transform:uppercase;letter-spacing:2px;line-height:1.1;margin-bottom:1rem}
.page-hero p{font-size:1.05rem;color:rgba(255,255,255,.6);max-width:680px;margin:0 auto 2rem}

/* --- Section --- */
.section{padding:5rem 0}
.section-label{
  font-size:.7rem;font-weight:700;letter-spacing:3px;text-transform:uppercase;
  color:#E5FF00;margin-bottom:.75rem;display:inline-flex;align-items:center;gap:.5rem;
}
.section-label::before{content:'';width:24px;height:1px;background:#E5FF00}
.section-title{font-size:clamp(1.5rem,3.5vw,2.5rem);font-weight:900;text-transform:uppercase;letter-spacing:1px;margin-bottom:1.5rem;line-height:1.15}
.section-subtitle{font-size:1rem;color:rgba(255,255,255,.55);max-width:640px;line-height:1.7;margin-bottom:2.5rem}

/* --- Glitch Text --- */
.glitch-text{position:relative;display:inline-block}
.glitch-text::before,.glitch-text::after{
  content:attr(data-text);position:absolute;left:0;top:0;width:100%;height:100%;
}
.glitch-text::before{
  animation:glitch-1 3s infinite linear alternate-reverse;
  clip-path:inset(0 0 70% 0);color:#fff;
}
.glitch-text::after{
  animation:glitch-2 2.5s infinite linear alternate-reverse;
  clip-path:inset(70% 0 0 0);color:#E5FF00;
}

@keyframes glitch-1{
  0%{transform:translate(0)}20%{transform:translate(-2px,2px)}40%{transform:translate(-2px,-2px)}60%{transform:translate(2px,2px)}80%{transform:translate(2px,-2px)}100%{transform:translate(0)}
}
@keyframes glitch-2{
  0%{transform:translate(0)}20%{transform:translate(2px,-2px)}40%{transform:translate(2px,2px)}60%{transform:translate(-2px,-2px)}80%{transform:translate(-2px,2px)}100%{transform:translate(0)}
}

/* --- Magnetic Button (CTA) --- */
.magnetic-btn{
  position:relative;display:inline-flex;align-items:center;gap:.6rem;
  padding:.9rem 2rem;font-size:.85rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;
  color:#090909;background:#E5FF00;border:none;overflow:hidden;
  transition:transform .15s cubic-bezier(.23,1,.32,1),box-shadow .3s;
}
.magnetic-btn:hover{box-shadow:0 0 30px rgba(229,255,0,.3)}
.magnetic-btn::before{
  content:'';position:absolute;inset:0;background:rgba(255,255,255,.15);
  transform:translateX(-100%);transition:transform .4s;
}
.magnetic-btn:hover::before{transform:translateX(100%)}
.magnetic-btn svg{width:16px;height:16px;fill:#090909;transition:transform .3s}
.magnetic-btn:hover svg{transform:translateX(3px)}

.magnetic-btn-outline{
  position:relative;display:inline-flex;align-items:center;gap:.6rem;
  padding:.85rem 2rem;font-size:.85rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;
  color:#E5FF00;background:transparent;border:1px solid #E5FF00;
  transition:transform .15s cubic-bezier(.23,1,.32,1),background .3s,color .3s;
}
.magnetic-btn-outline:hover{background:#E5FF00;color:#090909}
.magnetic-btn-outline svg{width:16px;height:16px;fill:currentColor;transition:transform .3s}
.magnetic-btn-outline:hover svg{transform:translateX(3px)}

/* --- Scroll Reveal --- */
.reveal{opacity:0;transform:translateY(40px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-left{opacity:0;transform:translateX(-60px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.reveal-left.visible{opacity:1;transform:translateX(0)}
.reveal-right{opacity:0;transform:translateX(60px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.reveal-right.visible{opacity:1;transform:translateX(0)}

/* --- Stats Grid --- */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1.5rem;margin:2.5rem 0}
.stat-card{
  background:rgba(255,255,255,.03);border:1px solid rgba(229,255,0,.08);
  padding:2rem 1.5rem;text-align:center;position:relative;overflow:hidden;
  transition:border-color .3s;
}
.stat-card:hover{border-color:rgba(229,255,0,.25)}
.stat-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,#E5FF00,transparent);
}
.stat-value{font-size:2.5rem;font-weight:900;color:#E5FF00;line-height:1;margin-bottom:.5rem}
.stat-label{font-size:.75rem;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.45)}

/* --- Feature Cards (xMechanics, etc.) --- */
.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:2rem}
.feature-card{
  background:rgba(255,255,255,.02);border:1px solid rgba(229,255,0,.07);
  padding:2.5rem;position:relative;overflow:hidden;
  transition:border-color .35s,transform .35s;
}
.feature-card:hover{border-color:rgba(229,255,0,.2);transform:translateY(-4px)}
.feature-card::after{
  content:'';position:absolute;bottom:0;left:0;width:0;height:2px;
  background:#E5FF00;transition:width .4s;
}
.feature-card:hover::after{width:100%}
.feature-icon{width:48px;height:48px;margin-bottom:1.25rem;color:#E5FF00}
.feature-card h3{font-size:1.15rem;font-weight:800;text-transform:uppercase;letter-spacing:1px;margin-bottom:.75rem}
.feature-card p{font-size:.9rem;color:rgba(255,255,255,.55);line-height:1.7}
.feature-tag{
  display:inline-block;font-size:.65rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
  background:rgba(229,255,0,.1);color:#E5FF00;padding:.25rem .75rem;margin-bottom:1rem;
}

/* --- Game Cards --- */
.game-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:2rem}
.game-card{
  background:rgba(255,255,255,.02);border:1px solid rgba(229,255,0,.07);
  overflow:hidden;transition:border-color .35s,transform .35s;
}
.game-card:hover{border-color:rgba(229,255,0,.2);transform:translateY(-4px)}
.game-img{
  width:100%;aspect-ratio:16/9;overflow:hidden;position:relative;background:rgba(255,255,255,.03);
}
.game-img img{width:100%;height:100%;object-fit:cover;display:block}
.game-img .placeholder-overlay{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:.75rem;letter-spacing:2px;text-transform:uppercase;color:rgba(229,255,0,.3);
  border:1px dashed rgba(229,255,0,.15);
}
.game-body{padding:1.75rem}
.game-body h3{font-size:1.1rem;font-weight:800;text-transform:uppercase;letter-spacing:1px;margin-bottom:.5rem}
.game-meta{display:flex;gap:1rem;margin-bottom:.75rem;flex-wrap:wrap}
.game-meta span{font-size:.7rem;letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,0,.7);background:rgba(229,255,0,.08);padding:.2rem .6rem}
.game-body p{font-size:.88rem;color:rgba(255,255,255,.5);line-height:1.7;margin-bottom:1rem}
.game-footer{display:flex;justify-content:space-between;align-items:center}
.game-rating{font-size:.8rem;color:#E5FF00;font-weight:700}
.game-stars{color:#E5FF00;letter-spacing:2px}

/* --- Casino Cards (Partners) --- */
.casino-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem}
.casino-card{
  background:rgba(255,255,255,.02);border:1px solid rgba(229,255,0,.07);
  padding:2rem;transition:border-color .35s,transform .35s;
}
.casino-card:hover{border-color:rgba(229,255,0,.2);transform:translateY(-3px)}
.casino-card h3{font-size:1rem;font-weight:800;text-transform:uppercase;letter-spacing:1px;margin-bottom:.5rem}
.casino-detail{font-size:.8rem;color:rgba(255,255,255,.45);margin-bottom:.3rem}
.casino-rating{color:#E5FF00;letter-spacing:2px;margin:.5rem 0 .75rem;font-size:.85rem}
.casino-card .magnetic-btn-outline{font-size:.72rem;padding:.5rem 1.2rem}

/* --- Timeline --- */
.timeline{position:relative;padding-left:2rem}
.timeline::before{content:'';position:absolute;left:7px;top:0;bottom:0;width:2px;background:rgba(229,255,0,.15)}
.timeline-item{position:relative;margin-bottom:2.5rem;padding-left:1.5rem}
.timeline-item::before{
  content:'';position:absolute;left:-2rem;top:6px;width:16px;height:16px;
  border:2px solid #E5FF00;background:#090909;border-radius:50%;
}
.timeline-item .tl-year{font-size:.75rem;font-weight:700;letter-spacing:2px;color:#E5FF00;text-transform:uppercase;margin-bottom:.3rem}
.timeline-item h3{font-size:1.05rem;font-weight:800;margin-bottom:.4rem}
.timeline-item p{font-size:.88rem;color:rgba(255,255,255,.5);line-height:1.7}

/* --- Bonus Buy Tiers --- */
.tier-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem}
.tier-card{
  background:rgba(255,255,255,.02);border:1px solid rgba(229,255,0,.08);
  padding:2rem;text-align:center;position:relative;overflow:hidden;
  transition:border-color .3s;
}
.tier-card:hover{border-color:rgba(229,255,0,.2)}
.tier-card .tier-name{font-size:.7rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#E5FF00;margin-bottom:.75rem}
.tier-card .tier-mult{font-size:2.5rem;font-weight:900;color:#E5FF00;margin-bottom:.5rem}
.tier-card .tier-desc{font-size:.85rem;color:rgba(255,255,255,.5);line-height:1.6}

/* --- Security Badges --- */
.badge-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:2rem}
.badge-card{
  background:rgba(255,255,255,.02);border:1px solid rgba(229,255,0,.08);
  padding:2.5rem;text-align:center;transition:border-color .3s,transform .3s;
}
.badge-card:hover{border-color:rgba(229,255,0,.2);transform:translateY(-3px)}
.badge-icon{width:56px;height:56px;margin:0 auto 1.25rem;color:#E5FF00}
.badge-card h3{font-size:1rem;font-weight:800;text-transform:uppercase;letter-spacing:1px;margin-bottom:.5rem}
.badge-card p{font-size:.85rem;color:rgba(255,255,255,.5);line-height:1.7}

/* --- Parallax Strip --- */
.parallax-strip{
  padding:4rem 0;overflow:hidden;position:relative;
  border-top:1px solid rgba(229,255,0,.06);border-bottom:1px solid rgba(229,255,0,.06);
}
.marquee-wrap{overflow:hidden;white-space:nowrap}
.marquee{
  display:inline-flex;gap:4rem;animation:marquee 25s linear infinite;
  font-size:clamp(1.5rem,4vw,3rem);font-weight:900;text-transform:uppercase;letter-spacing:4px;
  color:rgba(229,255,0,.1);
}
.marquee span{flex-shrink:0}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* --- Two Column Layout --- */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start}
@media(max-width:768px){.two-col{grid-template-columns:1fr}}

/* --- Separator --- */
.sep{height:1px;background:linear-gradient(90deg,transparent,rgba(229,255,0,.15),transparent);margin:4rem 0}

/* --- External Link --- */
.ext-link{color:#E5FF00;text-decoration:underline;text-underline-offset:3px;transition:opacity .2s}
.ext-link:hover{opacity:.7}

/* --- CTA Banner --- */
.cta-banner{
  text-align:center;padding:5rem 2rem;position:relative;
  background:linear-gradient(180deg,transparent,rgba(229,255,0,.04));
  border-top:1px solid rgba(229,255,0,.08);
}
.cta-banner h2{font-size:clamp(1.5rem,3vw,2.2rem);font-weight:900;text-transform:uppercase;letter-spacing:1px;margin-bottom:.75rem}
.cta-banner p{color:rgba(255,255,255,.5);max-width:500px;margin:0 auto 2rem;font-size:.95rem}

/* --- Mechanic Flowchart (xMechanics page) --- */
.mechanic-flowchart{display:flex;align-items:center;justify-content:center;padding:1rem 0}
.flowchart-svg{width:100%;max-width:340px;height:auto}

/* --- CTA Button Group --- */
.cta-btn-group{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}

/* --- Section max-width (content pages) --- */
.section .section-label,.section .section-title,.section .section-subtitle,.section .section-intro{max-width:1200px;margin-left:auto;margin-right:auto;padding:0 2rem}
.section .feature-grid,.section .criteria-list,.section .tier-grid,.section .badge-grid{max-width:1200px;margin-left:auto;margin-right:auto;padding:0 2rem}
.section.two-col{max-width:1200px;margin-left:auto;margin-right:auto;padding:5rem 2rem}
.two-col .col-left p{font-size:.92rem;color:rgba(255,255,255,.55);line-height:1.75;margin-bottom:1.25rem}
.two-col .col-left .section-label,.two-col .col-left .section-title{padding:0;margin:0}

/* --- Criteria List --- */
.criteria-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.25rem;margin:2rem 0}
.criteria-item{
  display:flex;align-items:flex-start;gap:.75rem;
  font-size:.88rem;color:rgba(255,255,255,.55);line-height:1.6;
}
.criteria-item .check{color:#E5FF00;font-weight:700;flex-shrink:0;font-size:1rem}

/* --- Responsive --- */
@media(max-width:1024px){
  .feature-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
  .game-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
}
@media(max-width:640px){
  .page-hero{padding-top:100px;padding-bottom:2.5rem}
  .section{padding:3rem 0}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .feature-grid,.game-grid,.casino-grid,.badge-grid,.tier-grid{grid-template-columns:1fr}
  .two-col{gap:2rem}
  .footer-inner{grid-template-columns:1fr 1fr}
}

/* --- Print friendly --- */
@media print{
  .navbar,.cursor,.cursor-dot,.noise,.scanlines{display:none!important}
  body{background:#fff;color:#000}
}