html, body {
	overflow-x: hidden;
}

.theme-inzu{
	--inzu-bg:#090b12;
	--inzu-text:#f3f6ff;
	--inzu-muted:#b8c0d0;
	--inzu-line:rgba(255,255,255,.12);

	--inzu-teal:#10f0c5;
	--inzu-cyan:#25d1ff;
	--inzu-mag:#a855ff;
	--inzu-gold:#ffbe2e;

	--bs-body-bg: var(--inzu-bg);
	--bs-body-color: var(--inzu-text);
	--bs-border-color: var(--inzu-line);
	--bs-heading-color: var(--inzu-text);
	--bs-link-color: #e8fcff;
	--bs-link-hover-color: #ffffff;
	--bs-navbar-color: #e9eefb;
	--bs-navbar-hover-color: #ffffff;
	--bs-nav-link-color: #e9eefb;
	--bs-nav-link-hover-color: #ffffff;

	--nav-h: 72px;
}

.theme-inzu{
	background: 
	radial-gradient(900px 480px at 70% -10%, rgba(16,240,197,.14), transparent 60%),
	radial-gradient(700px 420px at 20% 110%, rgba(168,85,255,.10), transparent 60%),
	var(--inzu-bg);
	color     : var(--inzu-text);
	padding-top: var(--nav-h); 
}

/* ---------- Navbar (glass, high contrast) ---------- */
.inzu-nav{
	z-index        : 1030;    
	backdrop-filter: blur(10px);
	background     : rgba(9,11,18,.75) !important;
	border-bottom  : 1px solid var(--inzu-line);
}

.inzu-nav .navbar-brand,
.inzu-nav .nav-link {
	color      : var(--bs-nav-link-color) !important;
	position   : relative;
	font-weight: 600;
}

/* underline hover */
.inzu-nav .nav-link::after {
	content   : "";
	position  : absolute; left             : .6rem; right: .6rem; bottom: .3rem;
	height    : 2px; border-radius         : 2px;
	background: linear-gradient(90deg, var(--inzu-teal), var(--inzu-mag), var(--inzu-gold));
	transform : scaleX(0); transform-origin: left;
	transition: transform .25s ease;
	opacity   : .95;
}
.inzu-nav .nav-link:hover,
.inzu-nav .nav-link:focus{ color: var(--bs-nav-link-hover-color) !important; }
.inzu-nav .nav-link:hover::after,
.inzu-nav .nav-link:focus::after{ transform: scaleX(1) }
/* ensure generic .nav-link rules can't override us */
.nav-link{ color: var(--bs-nav-link-color) !important; background: transparent !important; border: 0 !important; }

/* Logo sizes (you requested these) */
.navbar-logo{ width:80px; height:60px; object-fit:contain }
.hero-logo{
width:160px; height:auto; object-fit:contain;
border-radius:24px;
filter: drop-shadow(0 8px 30px rgba(0,0,0,.45));
}

/* ---------- Hero ---------- */
.hero-section{ position:relative; padding-block: 5.5rem 4.5rem; }
.text-gradient{
background: linear-gradient(90deg, var(--inzu-teal), var(--inzu-mag), var(--inzu-gold));
-webkit-background-clip:text; background-clip:text; color:transparent;
}
.bg-glow {
position:absolute;
inset:0;               /* cover the entire hero section */
pointer-events:none;
z-index:-1;

/* spread large radial gradients far beyond the box edges */
background:
radial-gradient(60% 60% at 50% 20%, rgba(16,240,197,.25), transparent 70%),
radial-gradient(70% 70% at 80% 80%, rgba(168,85,255,.20), transparent 70%),
radial-gradient(50% 50% at 20% 90%, rgba(255,190,46,.15), transparent 70%);

/* let it fade smoothly instead of hard edge */
background-repeat:no-repeat;
background-attachment:fixed;   /* makes it feel infinite */
mask-image: radial-gradient(circle at center, rgba(0,0,0,1) 70%, transparent 100%);
-webkit-mask-image: radial-gradient(circle at center, rgba(0,0,0,1) 70%, transparent 100%);
}


/* ---------- Sections, cards, features ---------- */
.section-title{ font-weight:800; letter-spacing:.2px }
.rounded-4{ border-radius:1.2rem }
.border-light-subtle{ border-color: var(--inzu-line)!important }
.py-6{ padding-block:4.5rem }

.game-card, .about-card, .feature{
background: linear-gradient(180deg, #111726, #0e1423);
border:1px solid var(--inzu-line);
color:var(--inzu-text);
}
.feature i{
background: linear-gradient(90deg, var(--inzu-teal), var(--inzu-cyan));
-webkit-background-clip:text; background-clip:text; color:transparent;
}

/* Tap Race accent card */
.tr-card{ background: linear-gradient(180deg, #0f2246, #0b1c3a); border-color: rgba(207,234,255,.18) }
.tr-card:hover{ border-color: rgba(207,234,255,.35) }
.tr-chip{ background:#0c2042; color:#eaf3ff; border:1px solid rgba(207,234,255,.35) }

/* Rotor Rush accent card */
.rr-card{ background: linear-gradient(180deg, #111726, #0c1220); border-color: rgba(16,240,197,.18) }
.rr-card:hover{ border-color: rgba(16,240,197,.35) }
.rr-chip{ background:#0d1a26; color:#c9fff5; border:1px solid rgba(16,240,197,.35) }

/* ---------- Buttons ---------- */
.btn-gradient{
color:#061115; font-weight:700; border:0;
background: linear-gradient(90deg, var(--inzu-teal), var(--inzu-mag), var(--inzu-gold));
box-shadow: 0 10px 32px rgba(16,240,197,.20);
}
.btn-gradient:hover{ opacity:.96; color:#061115 }

/* Store buttons (Google / App) — brighter & on-brand */
.store-btn{
display:inline-flex; align-items:center; gap:.55rem;
border:1px solid rgba(255,255,255,.20);
padding:.7rem 1.05rem; border-radius:.8rem; font-weight:700;
text-decoration:none;
transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease, filter .2s ease;
}
.store-btn i{ font-size:1.1rem }

/* Google Play: teal → cyan */
.store-btn.play{
color:#031116;
background: linear-gradient(90deg, var(--inzu-teal), var(--inzu-cyan));
border-color: transparent;
box-shadow: 0 12px 28px rgba(16,240,197,.22);
}
.store-btn.play:hover{
transform: translateY(-1px);
filter: brightness(1.02);
box-shadow: 0 18px 40px rgba(16,240,197,.28);
}

/* App Store: glassy dark pill */
.store-btn.ios{
color:#f3f7ff; background:#0e1726;
border-color: rgba(255,255,255,.24);
box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}
.store-btn.ios:hover{
transform: translateY(-1px);
border-color:#ffffff;
box-shadow: 0 16px 36px rgba(168,85,255,.18);
}
.store-btn.disabled,
.store-btn[disabled]{ opacity:.65; cursor:not-allowed; filter: grayscale(.15) }

/* ---------- Links on dark ---------- */
a{ color: var(--bs-link-color) }
a:hover{ color: var(--bs-link-hover-color) }

/* ---------- Small responsive polish ---------- */
@media (max-width: 768px){
.hero-section{ padding-block: 5rem 3.5rem }
.hero-logo{ width:140px }
}


/* Make hero buttons smaller on mobile */
@media (max-width: 576px) {
.hero-section .btn-lg {
font-size: 0.95rem;   /* smaller text */
padding: 0.55rem 1rem; /* less padding */
border-radius: 0.6rem;
}



.store-btn {
font-size: 0.9rem;
padding: 0.55rem 0.9rem;
border-radius: 0.6rem;
}

.store-btn i {
font-size: 1rem; /* shrink icon slightly */
}
} 

.form-select {
    color: #6b707c;
}

.form-control::placeholder {
    color: #6b707c;
    
}

.su-card {
  background: radial-gradient(circle at top, #101828 0%, #060911 100%);
  border: 1px solid rgba(255,255,255,0.08);
}

/* ---------- Store buttons (Google / App) — on-brand ---------- */
.store-btn{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.7rem 1.05rem; border-radius:.8rem;
  font-weight:700; font-size:0.95rem; text-decoration:none;
  border:1px solid rgba(255,255,255,.20);
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease, filter .2s ease, background .2s ease, color .2s ease;
  will-change: transform, box-shadow;
}
.store-btn i{ font-size:1.1rem; }

/* Google Play — on-brand teal→cyan */
.store-btn.play{
  color:#031116;
  background: linear-gradient(90deg, var(--inzu-teal), var(--inzu-cyan));
  border-color: transparent;
  box-shadow: 0 12px 28px rgba(16,240,197,.22);
}
.store-btn.play:hover{
  transform: translateY(-1px);
  filter: brightness(1.02);
  box-shadow: 0 18px 40px rgba(16,240,197,.28);
}

/* App Store — dark glass with neon edge */
.store-btn.ios{
  color: var(--inzu-text);
  background: linear-gradient(180deg, #0b1323, #0a101c);
  border: 1px solid rgba(168,85,255,.28); /* tie to --inzu-mag */
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.04),
    0 10px 26px rgba(37,209,255,.12);     /* tie to --inzu-cyan */
}
.store-btn.ios i{ color: currentColor; }
.store-btn.ios:hover{
  transform: translateY(-1px);
  border-color: rgba(37,209,255,.55);     /* cyan edge on hover */
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.06),
    0 16px 38px rgba(37,209,255,.22);
}

/* Optional: “live” variant when iOS is released */
.store-btn.ios.active{
  color:#061115;
  background: linear-gradient(90deg, var(--inzu-mag), var(--inzu-teal));
  border-color: transparent;
  box-shadow: 0 16px 40px rgba(168,85,255,.24);
}
.store-btn.ios.active:hover{
  transform: translateY(-1px);
  box-shadow: 0 22px 52px rgba(168,85,255,.32);
}

/* Disabled / Coming soon */
.store-btn:disabled,
.store-btn[disabled],
.store-btn.disabled{
  opacity:.65; cursor:not-allowed; filter: grayscale(.1);
  transform:none; box-shadow:none;
}

/* Mobile tweaks (keeps your existing breakpoints) */
@media (max-width: 576px){
  .store-btn{ font-size:.9rem; padding:.55rem .9rem; border-radius:.6rem; }
  .store-btn i{ font-size:1rem; }
}