/* Utility for blue text color (primary) */
.text-primary {
  color: rgb(var(--color-primary)) !important;
}
/* Global text glow effect */
body, h1, h2, h3, h4, h5, h6, p, a, span, li, label, th, td, button, .btn {
  text-shadow: 0 2px 8px rgba(255,255,255,0.20);
}

/* Gradient text from bottom (brand → white) */
.text-gradient-bottom{
  display:inline-block; /* prevents line box quirks */
  line-height: 1.12;    /* give room for descenders */
  padding-bottom: 0.08em; /* tiny extra space for g/j/y */
  background-image: linear-gradient(
    to top,
    rgb(var(--color-primary)) 0%,
    rgb(var(--color-primary) / 0.60) 34%,
    #ffffff 86%
  );
  background-size: 100% 160%; /* extend beyond line box */
  background-position: 50% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)){
  .text-gradient-bottom{ color: #fff; }
}

/* Optional helper to disable global text glow on specific elements */
.no-text-shadow{ text-shadow: none !important; }


/* Utility for brand radial gradient using --brand-rgba */
.bg-brand-radial {
  background: radial-gradient(80% 60% at 50% 10%, var(--brand-rgba), transparent);
}
/* Sticky, transparent, blurred header */
header.sticky {
  box-shadow: 0 2px 24px 0 rgba(0,0,0,0.08);
  background: rgba(15,23,42,0.72); /* fallback for bg-surface/70 */
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: background 0.3s, box-shadow 0.3s;
}

@media (min-width: 1536px) {
  header .max-w-\[120rem\] { max-width: 120rem; }
}
:root{
  /* Brand color in HEX for easy change. Update this only. */
  --brand: #1976d2;
  /* Will be populated at runtime as RGB for Tailwind's primary color */
  --color-primary: 25 118 210;
  --brand-rgba: rgba(25, 118, 210, 0.089);
}

/* Light/Dark theme base (dark by default) */
html{ color-scheme: light; }

/* Smooth scroll and anchor offset for sticky header */
html{ scroll-behavior: smooth; }
section{ scroll-margin-top: 84px; }

/* Subtle crossfade between sections for smoother feel */
section{
  transition: background .6s ease, box-shadow .6s ease, transform .4s ease;
}

/* Section separators: subtle top/bottom fades for smoother transitions */
.section-fade{ position: relative; }
.section-fade::before,
.section-fade::after{
  content: ""; position: absolute; left:0; right:0; height:56px; pointer-events:none; z-index:1;
}
.section-fade::before{ top:-1px; background: transparent; }
.section-fade::after{ bottom:-1px; background: transparent; }


/* Reusable component classes without Tailwind @apply (CDN friendly) */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:0.5rem; /* rounded-lg */
  padding:0.625rem 1rem; /* py-2.5 px-4 */
  font-size:0.875rem; /* text-sm */
  font-weight:600; /* font-medium-ish */
  line-height:1.1;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.04);
  color:rgba(255,255,255,0.92);
  transition: transform .18s ease, box-shadow .22s ease, background .18s ease, filter .18s ease, border-color .18s ease, color .18s ease;
  transform: translateZ(0);
  will-change: transform, box-shadow;
}
.btn:focus{ outline: none; box-shadow: 0 0 0 4px rgb(var(--color-primary) / 0.35); }
.btn:hover{ transform: translateY(-1px); box-shadow: 0 10px 26px -18px rgb(var(--color-primary) / 0.45); }
.btn:active{ transform: translateY(0); filter: brightness(0.98); }

.btn-primary{
  background: rgb(var(--color-primary));
  color: #fff;
  border-color: rgb(var(--color-primary) / 0.4);
  box-shadow: 0 10px 30px -10px rgb(var(--color-primary) / 0.45);
}
.btn-primary:hover{
  background: rgb(var(--color-primary));
  background-image: linear-gradient(to bottom, rgba(255,255,255,0.16), rgba(255,255,255,0.00));
  filter: brightness(1.05);
  box-shadow: 0 14px 36px -14px rgb(var(--color-primary) / 0.55);
}
.btn-primary:active{ filter: brightness(0.98); }

/* Discord login style button */
.btn-discord{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border-radius:999px;
  padding:0.6rem 1.15rem;
  font-size:0.875rem;
  font-weight:600;
  color:#eef1ff;
  background:
    radial-gradient(120% 180% at 80% -20%, rgba(88,101,242,0.55), transparent 60%),
    linear-gradient(180deg, rgba(20,26,44,0.96), rgba(12,16,28,0.98));
  border:1px solid rgba(88,101,242,0.35);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 10px 28px -16px rgba(88,101,242,0.65),
    0 0 18px -10px rgba(88,101,242,0.75);
  transition: transform .18s ease, box-shadow .22s ease, filter .18s ease;
}
.btn-discord:hover{ transform: translateY(-1px); filter: brightness(1.04); }
.btn-discord:active{ transform: translateY(0); filter: brightness(0.98); }
.btn-discord i{
  font-size:1.15rem;
  color:#aeb7ff;
}

.btn-ghost{
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.92);
  border-color: rgba(255,255,255,0.12);
}
.btn-ghost:hover{ background: rgba(255,255,255,0.10); box-shadow: 0 10px 26px -18px rgb(var(--color-primary) / 0.35); }

/* PayPal brand-like button (visual only) */
.btn-paypal{
  background: #eceff3 !important;
  color: #1b3a8a !important; /* PayPal dark blue */
  border-color: rgba(0,0,0,0.20) !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 18px rgba(0,0,0,0.25) !important;
  gap: 0.5rem;
}
.btn-paypal:hover{ background:#e6eaef !important; }
.btn-paypal i{ color:#1b3a8a !important; font-size:1.125rem; line-height:1; }
.btn-paypal .pp-prefix{ color:#0b1a33; opacity:.75; }
.btn-paypal .pp-word{ color:#1b3a8a; font-weight:700; letter-spacing:.1px; }

/* Green success-style button (for Early Access modal) */
.btn-success{
  background: #2e7d32 !important; /* base green */
  color: #fff !important;
  border-color: rgba(46,125,50,0.4) !important;
  box-shadow: 0 10px 30px -10px rgba(46,125,50,0.55) !important;
}
.btn-success:hover{
  filter: brightness(1.05);
  box-shadow: 0 14px 36px -14px rgba(46,125,50,0.65) !important;
}
.btn-success:disabled{
  opacity: .6; filter: none; box-shadow: none !important; cursor: not-allowed;
}

.feature-card{
  border-radius: 0.75rem; /* rounded-xl */
  border: 1px solid rgba(255,255,255,0.10);
  background: #0f172a; /* surface */
  padding: 1.5rem; /* p-6 */
  transition: border-color .2s ease, box-shadow .25s ease, transform .25s ease;
  transform: translateZ(0); /* avoid repaint jank */
  position: relative; /* allow z-index on hover */
  will-change: transform, box-shadow;
}
.feature-card:hover{
  border-color: rgb(var(--color-primary) / 0.4);
  box-shadow: 0 18px 56px -22px rgb(var(--color-primary) / 0.55);
  transform: translateY(-4px);
  z-index: 2;
}
.feature-card i{ font-size:1.25rem; color: rgb(var(--color-primary)); }
.feature-card h3{ margin-top:0.75rem; font-size:1.125rem; font-weight:600; }
/* Do NOT set margin-top here, so Tailwind mt-* utilities in markup take effect */
.feature-card p{ color:rgba(255,255,255,0.7); font-size:0.9rem; }
/* Allow spacing to be controlled only via utility classes (mt-10 etc.) */

.metric-card{
  border-radius: 0.75rem;
  border: 1px solid rgba(255,255,255,0.10);
  background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(17,26,46,0.6));
  padding: 1.25rem; /* p-5 */
  text-align:center;
  transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
  transform: translateZ(0);
}
.metric-card .metric{ font-size:1.875rem; font-weight:800; color:#fff; letter-spacing:-0.01em; }
.metric-card .label{ margin-top:0.25rem; font-size:0.75rem; text-transform:uppercase; letter-spacing:0.08em; color:rgba(255,255,255,0.6); }

.metric-card:hover{
  border-color: rgb(var(--color-primary) / 0.35);
  box-shadow: 0 16px 44px -18px rgb(var(--color-primary) / 0.45);
  transform: translateY(-2px);
}

/* Generic hover lift utility for larger cards */
.hover-lift{
  transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
  transform: translateZ(0);
  position: relative;
  will-change: transform, box-shadow;
}
.hover-lift:hover{
  border-color: rgb(var(--color-primary) / 0.35);
  box-shadow: 0 18px 56px -22px rgb(var(--color-primary) / 0.55);
  transform: translateY(-4px);
  z-index: 2;
}

/* Small utility overrides */
summary::-webkit-details-marker{ display:none; }

/* Smooth header styling when page is scrolled */
header.scrolled{
  background: rgba(15,23,42,0.6) !important;
  box-shadow: 0 10px 40px -10px rgba(0,0,0,0.45);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* Active nav link highlight */
.nav-link{ position: relative; }
.nav-link.active{ color: rgb(var(--color-primary)) !important; text-shadow: 0 2px 12px rgb(var(--color-primary) / 0.25); }
.nav-link::after{
  content:""; position:absolute; left:0; right:0; bottom:-10px; height:2px; border-radius:2px;
  background: rgb(var(--color-primary)); transform: scaleX(0); opacity: .85; transition: transform .25s ease;
}
.nav-link.active::after{ transform: scaleX(1); }

/* Scroll-reveal animations (CSS-only utilities) */
[data-reveal]{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1) !important;
  will-change: transform, opacity;
}
[data-reveal="up"]{ transform: translateY(22px); }
[data-reveal="down"]{ transform: translateY(-22px); }
[data-reveal="left"]{ transform: translateX(-28px); }
[data-reveal="right"]{ transform: translateX(28px); }
[data-reveal="zoom"]{ transform: scale(.96); }
[data-reveal].is-visible{ opacity:1; transform:none !important; }

/* Parallax helper removed (no longer used) */

/* Ensure hover lift overrides reveal's is-visible transform reset */
.hover-lift:hover{ transform: translateY(-4px); }
.feature-card.hover-lift:hover{ transform: translateY(-4px); }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity:1; transform:none !important; transition:none !important; }
  .feature-card, .metric-card{ transition: none !important; }
  .feature-card:hover, .metric-card:hover{ transform: none !important; }
  .hover-lift{ transition: none !important; }
  .hover-lift:hover{ transform: none !important; }
  .btn{ transition: none !important; }
  .btn:hover, .btn:active{ transform: none !important; box-shadow: none !important; filter: none !important; }
}

/* Offer button advanced gradient hover (shared across pages) */
.offer-hover{position:relative;overflow:hidden;transition:color .35s ease, border-color .35s ease, background .4s ease, box-shadow .4s ease; background:linear-gradient(120deg,rgba(var(--color-primary) / 0.06),rgba(var(--color-primary) / 0.10)); border:1px solid rgba(var(--color-primary) / 0.35) !important;}
.offer-hover::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(115deg,rgba(var(--color-primary) / 0.18),rgba(var(--color-primary) / 0.65));opacity:0;transform:scale(1.15);transition:opacity .5s ease,transform .8s cubic-bezier(.55,.1,.25,1);}
.offer-hover:hover::before{opacity:1;transform:scale(1);}          
.offer-hover::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:40%;border-radius:inherit;pointer-events:none;opacity:0;background:linear-gradient(100deg,transparent 0%,rgba(var(--color-primary) / 0.0) 10%,rgba(var(--color-primary) / 0.55) 50%,rgba(var(--color-primary) / 0.0) 90%,transparent 100%);transform:skewX(-18deg) translateX(0);filter:blur(2px);transition:opacity .35s ease;}
.offer-hover:hover::after{animation:offer-shimmer 1.15s cubic-bezier(.6,.05,.25,1) forwards;opacity:1;}
@keyframes offer-shimmer{0%{transform:skewX(-18deg) translateX(-60%);}100%{transform:skewX(-18deg) translateX(220%);} }
@media (prefers-reduced-motion: reduce){
  .offer-hover::after{display:none !important;animation:none !important;}
  .offer-hover::before{transition:opacity .4s ease;}
}
.offer-hover:hover{background:linear-gradient(100deg,rgba(var(--color-primary) / 0.30),rgba(var(--color-primary) / 0.75)) !important;color:#fff !important;box-shadow:0 6px 24px -6px rgba(var(--color-primary) / 0.55);} 
.offer-hover > i,.offer-hover span,.offer-hover strong{position:relative;z-index:2;}

/* Low-performance mode (added via JS based on hardwareConcurrency / deviceMemory / prefers-reduced-motion) */
.low-perf .offer-hover::after{display:none !important;}
.low-perf .qualities-marquee .qm-flow{animation-duration:60s !important;}
.low-perf .hover-lift,.low-perf .feature-card,.low-perf .metric-card{transition:none !important;}
.low-perf .hover-lift:hover,.low-perf .feature-card:hover,.low-perf .metric-card:hover{transform:none !important;box-shadow:none !important;border-color:rgba(255,255,255,0.10)!important;}
.low-perf [class*="backdrop-blur"],
.low-perf [style*="backdrop-filter"],
.low-perf .backdrop-blur-sm,
.low-perf .backdrop-blur-md,
.low-perf .backdrop-blur-xl{backdrop-filter:none !important;-webkit-backdrop-filter:none !important;}
.low-perf .bg-surface\/70{background:rgba(15,23,42,0.90)!important;}
.low-perf .bg-surface\/80{background:rgba(15,23,42,0.94)!important;}
.low-perf .bg-surface\/60{background:rgba(15,23,42,0.88)!important;}
.low-perf .shadow-glow{box-shadow:none !important;}
.low-perf [data-reveal]{transition:none !important;opacity:1 !important;transform:none !important;}

/* Star rating component (supports decimals via width clipping) */
.rating-stars{ position:relative; display:inline-block; font-size:0.95rem; line-height:1; letter-spacing:1px; }
.rating-stars .stars-base{ color: rgba(255,255,255,0.28); }
.rating-stars .stars-fill{ position:absolute; inset:0 auto 0 0; width: var(--p, 100%); color:#fbbf24; overflow:hidden; white-space:nowrap; }


/* Neon glass button (for Offer CTA) */
.neon-btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 36px;
  border-radius: 16px;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: #fff;
  /* Fallback solid tint for older browsers */
  background-color: rgba(25,118,210,0.14);
  /* Layered gradients (with CSS var + fallback RGBA) */
  background:
    radial-gradient(120% 180% at 70% 120%, rgba(25,118,210,0.50) 0%, transparent 62%),
    linear-gradient(180deg, rgba(22,40,70,0.92) 0%, rgba(10,22,45,0.88) 100%);
  /* Prefer var-based colors when supported */
  background:
    radial-gradient(120% 180% at 70% 120%, rgb(var(--color-primary) / 0.50) 0%, transparent 62%),
    linear-gradient(180deg, rgba(22,40,70,0.92) 0%, rgba(10,22,45,0.88) 100%);
  border: 1px solid rgba(25,118,210,0.50);
  border-color: rgb(var(--color-primary) / 0.50);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 0 0 1px rgba(9,42,96,0.35),
    0 10px 30px -10px rgba(25,118,210,0.60),
    0 0 28px -6px rgba(25,118,210,0.45);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 0 0 1px rgba(9,42,96,0.35),
    0 10px 30px -10px rgb(var(--color-primary) / 0.60),
    0 0 28px -6px rgb(var(--color-primary) / 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: transform .25s ease, box-shadow .35s ease, background .35s ease, filter .35s ease;
  min-width: 280px;
}

@media (min-width: 640px){
  .neon-btn{ min-width: 320px; }
}
.neon-btn::before{
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0));
  pointer-events: none;
}
.neon-btn:hover{
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    0 0 0 1px rgba(9,42,96,0.40),
    0 16px 42px -12px rgb(var(--color-primary) / 0.70),
    0 0 36px -4px rgb(var(--color-primary) / 0.55);
}
.neon-btn:active{
  transform: translateY(0);
  filter: brightness(0.98);
}