/* ===== Base ===== */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:'Inter',sans-serif;
}

html, body{
  background:#050505;
  color:white;
  overflow-x:hidden;
}

/* Slightly lift overall darkness so animated background is visible */
body{
  background: radial-gradient(circle at 20% 10%, rgba(96,165,250,0.08), transparent 35%),
              radial-gradient(circle at 80% 0%, rgba(168,85,247,0.08), transparent 40%),
              #050505;
}


/* ===== Animated colored bg layer (behind orbs) ===== */
.bg-animated{
  position:fixed;
  inset:-20vh;
  z-index:-3;
  pointer-events:none;
  background:
    radial-gradient(circle at 20% 20%, rgba(37,99,235,0.55), transparent 48%),
    radial-gradient(circle at 80% 25%, rgba(168,85,247,0.45), transparent 52%),
    radial-gradient(circle at 40% 85%, rgba(56,189,248,0.40), transparent 56%),
    linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0.55));
  filter:saturate(1.55) contrast(1.12) brightness(1.08);

  animation: bgShift 10s ease-in-out infinite, bgHue 12s linear infinite;
  will-change: transform, filter;
}


@keyframes bgShift{
  0%{ transform: translate3d(0,0,0) scale(1); opacity:0.92; }
  25%{ transform: translate3d(-28px, 18px, 0) scale(1.03); opacity:1; }
  50%{ transform: translate3d(22px, -14px, 0) scale(1.01); opacity:0.96; }
  75%{ transform: translate3d(-10px, 10px, 0) scale(1.02); opacity:1; }
  100%{ transform: translate3d(0,0,0) scale(1); opacity:0.92; }
}

@keyframes bgHue{
  0%{ filter:hue-rotate(0deg) saturate(1.25) contrast(1.05); }
  50%{ filter:hue-rotate(35deg) saturate(1.35) contrast(1.05); }
  100%{ filter:hue-rotate(0deg) saturate(1.25) contrast(1.05); }
}


@media (prefers-reduced-motion: reduce){
  .bg-animated{ animation:none; }
}

/* ===== Animated Background ===== */
.bg-orbs{
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
}

.orb{
  position:absolute;
  width:680px;
  height:680px;
  border-radius:50%;
  filter: blur(30px);
  opacity:0.55;
  transform: translate3d(0,0,0);
  will-change: transform;
  animation: drift 14s ease-in-out infinite;
}

.orb-1{
  top:-220px;
  right:-260px;
  background: radial-gradient(circle at center, rgba(37,99,235,0.35), rgba(37,99,235,0) 70%);
  animation-duration: 16s;
}
.orb-2{
  bottom:-320px;
  left:-280px;
  background: radial-gradient(circle at center, rgba(124,58,237,0.32), rgba(124,58,237,0) 70%);
  animation-duration: 18s;
  animation-delay: -6s;
}
.orb-3{
  top:25vh;
  left:-320px;
  width:520px;
  height:520px;
  background: radial-gradient(circle at center, rgba(56,189,248,0.18), rgba(56,189,248,0) 70%);
  animation-duration: 20s;
  animation-delay: -10s;
}
.orb-4{
  top:-180px;
  left:18vw;
  width:420px;
  height:420px;
  background: radial-gradient(circle at center, rgba(168,85,247,0.22), rgba(168,85,247,0) 70%);
  animation-duration: 17s;
  animation-delay: -4s;
}
.orb-5{
  bottom:10vh;
  right:12vw;
  width:460px;
  height:460px;
  background: radial-gradient(circle at center, rgba(59,130,246,0.18), rgba(59,130,246,0) 70%);
  animation-duration: 19s;
  animation-delay: -12s;
}

@keyframes drift{
  0%   { transform: translate3d(0,0,0) scale(1); }
  35%  { transform: translate3d(-40px, 25px, 0) scale(1.06); }
  70%  { transform: translate3d(30px, -25px, 0) scale(0.98); }
  100% { transform: translate3d(0,0,0) scale(1); }
}

@media (prefers-reduced-motion: reduce){
  .orb{ animation: none; }
}

/* ===== Floating boxes (cards, stats, faq items, pricing) ===== */
.float-box{
  position:relative;
  animation: floaty 7s ease-in-out infinite;
  will-change: transform;
}

.float-box:nth-child(odd){
  animation-duration: 8s;
}

.float-box:nth-child(3n){
  animation-duration: 9s;
}

@keyframes floaty{
  0%{ transform: translate3d(0,0,0); }
  35%{ transform: translate3d(0, -12px, 0); }
  70%{ transform: translate3d(0, 8px, 0); }
  100%{ transform: translate3d(0,0,0); }
}

@media (prefers-reduced-motion: reduce){
  .float-box{ animation:none; }
}

/* ===== Hero Stats row (one row with proper boxes) ===== */
.stats{
  margin-top:35px;
  display:grid;
  grid-template-columns: repeat(4, minmax(170px, 1fr));
  gap:18px;
  justify-content:center;
  align-items:stretch;
}

.stat-box{
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.10);
  border-radius:22px;
  padding:22px 18px;
  text-align:center;
  box-shadow: 0 0 0 rgba(0,0,0,0);
}

.stat-box h2{
  font-size:34px;
  line-height:1.1;
  font-weight:800;
}

.stat-box p{
  margin-top:10px;
  color:#94a3b8;
  font-size:15px;
}

/* ===== Make content boxes float (lightweight + proper floating) ===== */
.stat-box,
.feature-card,
.faq-item,
.pricing{
  animation: floatLight 7.5s ease-in-out infinite;
  will-change: transform;
}

.stat-box{ animation-duration: 6.8s; }
.feature-card{ animation-duration: 7.8s; }
.faq-item{ animation-duration: 8.4s; }
.pricing{ animation-duration: 9s; }

@keyframes floatLight{
  0%{ transform: translate3d(0,0,0); }
  35%{ transform: translate3d(0, -8px, 0); }
  70%{ transform: translate3d(0, 6px, 0); }
  100%{ transform: translate3d(0,0,0); }
}

@media (prefers-reduced-motion: reduce){
  .stat-box,
  .feature-card,
  .faq-item,
  .pricing{
    animation:none;
  }
}










/* ===== Nav ===== */
nav{
  position:fixed;
  top:0;
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:20px 8%;
  background:rgba(0,0,0,0.4);
  backdrop-filter:blur(15px);
  border-bottom:1px solid rgba(255,255,255,0.08);
  z-index:1000;
}


.logo{
  display:flex;
  align-items:center;
  gap:12px;
}

.logo-img{
  height:36px;
  width:auto;
  display:block;
}

.logo-text{
  font-weight:800;
  font-size:26px;
  letter-spacing:0.6px;
  color:transparent;
  background:linear-gradient(90deg,#60a5fa 0%, #a855f7 50%, #22d3ee 100%);
  -webkit-background-clip:text;
  background-clip:text;
  position:relative;
  padding-bottom:2px;
}

/* Sci-fi electric wave glow */
.logo-text::after{
  content:attr(data-text);
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  color:transparent;
  background:linear-gradient(90deg, rgba(96,165,250,0.0), rgba(96,165,250,1), rgba(168,85,247,1), rgba(34,211,238,1), rgba(96,165,250,0.0));
  -webkit-background-clip:text;
  background-clip:text;
  opacity:0;
  filter: drop-shadow(0 0 10px rgba(96,165,250,0.7));
  animation:electricGlitch 1.8s ease-in-out infinite;
}

@keyframes electricGlitch{
  0%, 100%{ opacity:0; transform:translateX(-6px); }
  45%{ opacity:1; transform:translateX(0px); }
  60%{ opacity:0.75; transform:translateX(4px); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .logo-text::after{ animation:none; opacity:1; }
}




nav ul{
  display:flex;
  gap:30px;
  list-style:none;
}

nav ul li a{
  color:#cbd5e1;
  text-decoration:none;
  transition:0.3s;
}

nav ul li a:hover{
  color:white;
}

nav ul li a.nav-active{
  color:white;
  text-shadow: 0 0 14px rgba(96,165,250,0.55);
}

.join-btn{
  padding:12px 24px;
  border-radius:40px;
  background:white;
  color:black;
  text-decoration:none;
  font-weight:600;
  transition:0.3s;
}

.join-btn:hover{
  transform:scale(1.05);
}

/* ===== Page layout (for about.html / sponsor.html) ===== */
.page{
  padding:140px 8% 70px;
}

/* Sponsor page glitchy gradient background */
.sponsor-bg{
  /* boost visibility vs global dark background */
  background:
    radial-gradient(circle at 15% 10%, rgba(96,165,250,0.42), transparent 48%),
    radial-gradient(circle at 85% 15%, rgba(168,85,247,0.38), transparent 52%),
    radial-gradient(circle at 50% 90%, rgba(34,211,238,0.26), transparent 56%),
    linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04));
  border-top:1px solid rgba(255,255,255,0.16);
  position:relative;
  overflow:hidden;
}



.sponsor-bg::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:linear-gradient(90deg, rgba(96,165,250,0.0), rgba(96,165,250,0.35), rgba(168,85,247,0.28), rgba(34,211,238,0.28), rgba(96,165,250,0.0));
  opacity:0.55;
  filter: blur(18px);
  animation:sponsorGlow 3.6s ease-in-out infinite;
  z-index:0;
}

.sponsor-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(0deg,
      rgba(255,255,255,0.06) 0,
      rgba(255,255,255,0.06) 1px,
      rgba(0,0,0,0) 2px,
      rgba(0,0,0,0) 6px);
  mix-blend-mode:overlay;
  opacity:0.35;
  animation:sponsorScan 2.4s linear infinite;
  z-index:0;
  pointer-events:none;
}

.sponsor-bg > *{
  position:relative;
  z-index:1;
}

@keyframes sponsorGlow{
  0%,100%{ transform:translateX(-6px); opacity:0.45; filter:hue-rotate(0deg); }
  50%{ transform:translateX(8px); opacity:0.75; filter:hue-rotate(35deg); }
}


@keyframes sponsorScan{
  0%{ transform:translateY(-12px); }
  100%{ transform:translateY(12px); }
}

@media (prefers-reduced-motion: reduce){
  .sponsor-bg::before,
  .sponsor-bg::after{ animation:none; }
}


/* About page stats wrapper */
.page-stats{
  margin-top:34px;
  display:grid;
  grid-template-columns:repeat(3, minmax(160px, 1fr));
  gap:18px;
  justify-content:center;
  align-items:stretch;
}


.page-hero{
  max-width:1000px;
  margin:0 auto;
  text-align:center;
}

.page-title{
  font-size:62px;
  line-height:1.1;
  font-weight:800;
  margin-top:20px;
}

.page-subtitle{
  margin-top:22px;
  font-size:18px;
  color:#94a3b8;
  line-height:1.8;
}

.page-grid{
  margin-top:40px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:30px;
}

/* ===== Layout ===== */
.hero{

  min-height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding:120px 8% 90px;
}

.hero-content{
  max-width:1000px;
}

.tag{
  display:inline-block;
  padding:10px 18px;
  border:1px solid rgba(255,255,255,0.1);
  border-radius:40px;
  background:rgba(255,255,255,0.05);
  color:#cbd5e1;
  margin-bottom:25px;
}

.hero h1{
  font-size:72px;
  line-height:1.1;
  font-weight:800;
}

.gradient{
  background:linear-gradient(to right,#60a5fa,#a855f7);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.hero p{
  margin-top:25px;
  font-size:20px;
  color:#94a3b8;
  line-height:1.8;
}

.hero-buttons{
  margin-top:40px;
  display:flex;
  justify-content:center;
  gap:20px;
  flex-wrap:wrap;
}

.primary-btn{
  padding:18px 35px;
  background:white;
  color:black;
  border-radius:18px;
  text-decoration:none;
  font-weight:700;
  transition:0.3s;
}

.primary-btn:hover,
.secondary-btn:hover{
  transform:translateY(-3px);
}

.secondary-btn{
  padding:18px 35px;
  border:1px solid rgba(255,255,255,0.1);
  border-radius:18px;
  text-decoration:none;
  color:white;
  transition:0.3s;
}


.section-title{
  text-align:center;
  font-size:54px;
  margin-bottom:20px;
  font-weight:800;
}

.section-subtitle{
  text-align:center;
  color:#94a3b8;
  max-width:700px;
  margin:auto;
  line-height:1.8;
  margin-bottom:70px;
}

.features{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:30px;
}

.feature-card{
  position:relative;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.10);
  border-radius:28px;
  padding:35px;
  transition:0.3s;
  overflow:hidden;
}

/* Gradient glow border */
.feature-card::before{
  content:"";
  position:absolute;
  inset:-1px;
  background:linear-gradient(135deg, rgba(96,165,250,0.55), rgba(168,85,247,0.45), rgba(34,211,238,0.35));
  opacity:0;
  transition:0.3s;
  z-index:0;
}

.feature-card > *{
  position:relative;
  z-index:1;
}

.feature-card:hover{
  transform:translateY(-8px);
  border-color:rgba(59,130,246,0.55);
}

.feature-card:hover::before{
  opacity:1;
}

.feature-card h3{
  margin-top:20px;
  font-size:28px;
  letter-spacing:0.2px;
}

.feature-card p{
  margin-top:15px;
  color:#94a3b8;
  line-height:1.7;
}


.pricing{
  max-width:900px;
  margin:auto;
  text-align:center;
  background:linear-gradient(to bottom right,#1e3a8a35,#7c3aed35);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:40px;
  padding:70px;
  position:relative;
  overflow:hidden;
}

/* sci-fi glow for pricing box */
.pricing::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:linear-gradient(135deg, rgba(96,165,250,0.55), rgba(168,85,247,0.45), rgba(34,211,238,0.35));
  opacity:0;
  transition:0.35s;
  z-index:0;
}

.pricing > *{
  position:relative;
  z-index:1;
}

.pricing:hover::before{
  opacity:1;
}


.pricing-tag{
  display:inline-block;
  padding:10px 20px;
  border-radius:30px;
  background:#ef444420;
  color:#fca5a5;
  margin-bottom:25px;
}

.pricing h2{
  font-size:64px;
  letter-spacing:0.3px;
  background:linear-gradient(90deg,#60a5fa 0%, #a855f7 50%, #22d3ee 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow: 0 0 22px rgba(96,165,250,0.15);
}


.pricing p{
  margin-top:20px;
  color:#94a3b8;
  line-height:1.8;
}

.faq{
  max-width:900px;
  margin:auto;
}

.faq-item{
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:24px;
  padding:30px;
  margin-bottom:20px;
}

.faq-item h3{
  margin-bottom:15px;
}

.faq-item p{
  color:#94a3b8;
  line-height:1.7;
}

footer{
  border-top:1px solid rgba(255,255,255,0.08);
  padding:50px 8% 60px;
  display:grid;
  grid-template-columns: 1.4fr 0.8fr 0.8fr;
  gap:28px;
  align-items:start;
}

.footer-brand{
  max-width:520px;
}

.footer-logo{
  margin-bottom:12px;
}

.footer-tagline{
  margin-top:6px;
  color:#94a3b8;
  line-height:1.7;
}

.footer-mini{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:16px;
}

.mini-pill{
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  color:#cbd5e1;
  font-size:13px;
}

.footer-links h3{
  font-size:16px;
  margin-bottom:14px;
  letter-spacing:0.3px;
}

.footer-link{
  display:block;
  color:#cbd5e1;
  text-decoration:none;
  padding:8px 0;
  transition:0.25s;
}

.footer-link:hover{
  color:white;
  text-shadow: 0 0 14px rgba(96,165,250,0.35);
  transform: translateX(4px);
}

@media (max-width:900px){
  footer{ grid-template-columns: 1fr 1fr; }
}

@media (max-width:540px){
  footer{ grid-template-columns: 1fr; }
}



/* ===== Scroll Reveal ===== */
[data-reveal]{
  opacity:0;
  transform: translateY(22px);
  transition: opacity .7s ease, transform .7s ease;
}

[data-reveal].is-visible{
  opacity:1;
  transform: translateY(0);
}

/* ===== Responsive ===== */
@media(max-width:768px){
  nav ul{ display:none; }
  nav.nav-open ul{ 
    display:flex;
    flex-direction:column;
    position:absolute;
    top:78px;
    left:0;
    right:0;
    padding:14px 8%;
    background:rgba(0,0,0,0.55);
    backdrop-filter:blur(15px);
    border-bottom:1px solid rgba(255,255,255,0.08);
    gap:14px;
    z-index:1001;
  }

  nav ul li a{ padding:6px 0; }

  .hero h1{ font-size:48px; }
  .section-title{ font-size:38px; }
  .pricing h2{ font-size:48px; }

  /* Make hero stats usable on small screens */
  .stats{
    grid-template-columns: repeat(2, minmax(150px, 1fr));
    gap:14px;
  }

  /* Prevent fixed nav/menu from overlapping CTA buttons */
  .pricing a.primary-btn{
    display:inline-block;
    width:100%;
    max-width:360px;
  }

  body{
    padding-top:0;
  }
}



@media(max-width:480px){
  /* Phones: stack stats into 1 column so nothing gets cut */
  .stats{
    grid-template-columns: 1fr;
    gap:12px;
    margin-top:25px;
  }
}