:root{
  --bg0:#070816;
  --bg1:#0a0b1e;
  --bg2:#0d0f2d;

  --text:#eaf0ff;
  --muted:rgba(234,240,255,.72);

  --glass:rgba(255,255,255,.06);
  --glass2:rgba(255,255,255,.09);
  --stroke:rgba(255,255,255,.12);

  --sol-green:#14f195;
  --sol-purple:#9945ff;
  --sol-cyan:#03e1ff;
  --sol-pink:#ff00f7;
  --sol-orange:#ff7e00;

  --shadow: 0 20px 60px rgba(0,0,0,.45);
  --glowA: 0 0 30px rgba(20,241,149,.25);
  --glowB: 0 0 40px rgba(153,69,255,.22);

  --radius:18px;
  --radius-lg:26px;
  --max:1100px;

  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  background: radial-gradient(1000px 600px at 20% 20%, rgba(153,69,255,.18), transparent 60%),
              radial-gradient(900px 520px at 80% 40%, rgba(20,241,149,.14), transparent 60%),
              linear-gradient(180deg, var(--bg0), var(--bg1));
  overflow-x:hidden;
}

a{color:inherit}
img{max-width:100%; display:block}

.bg-orbs{ position:fixed; inset:0; pointer-events:none; z-index:-10; }
.orb{
  position:absolute;
  width:520px; height:520px;
  filter: blur(45px);
  opacity:.65;
  transform: translate3d(0,0,0);
}
.orb-a{ left:-160px; top:-120px; background: radial-gradient(circle at 30% 30%, rgba(153,69,255,.65), transparent 60%); }
.orb-b{ right:-180px; top:120px; background: radial-gradient(circle at 40% 40%, rgba(20,241,149,.55), transparent 60%); }
.orb-c{ left:20%; bottom:-240px; background: radial-gradient(circle at 50% 50%, rgba(3,225,255,.40), transparent 60%); }

/* Header / Nav */
.header{ position:fixed; top:0; left:0; right:0; z-index:1000; }
.header-compact .navbar{ padding: 14px 5%; }

.navbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 18px 5%;
  backdrop-filter: blur(12px);
  background: rgba(7,8,22,.55);
  border-bottom: 1px solid rgba(255,255,255,.07);
  transition: background .25s ease, border-color .25s ease;
}
.navbar.scrolled{
  background: rgba(7,8,22,.78);
  border-bottom-color: rgba(255,255,255,.11);
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  white-space:nowrap;
}
.brand-badge{
  width:34px; height:34px;
  display:grid; place-items:center;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(153,69,255,.35), rgba(20,241,149,.25));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: var(--glowB);
}
.brand-title{ font-weight:800; letter-spacing:.3px; }
.brand-sub{ font-size:.78rem; opacity:.72; margin-left:6px; }

.nav-links{
  display:flex;
  gap:18px;
  list-style:none;
  margin:0; padding:0;
}
.nav-links a{
  text-decoration:none;
  font-weight:700;
  font-size:.95rem;
  opacity:.9;
  padding:10px 12px;
  border-radius: 12px;
  border: 1px solid transparent;
  transition: .2s ease;
}
.nav-links a:hover{
  opacity:1;
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  box-shadow: var(--glowA);
}

.nav-right{ display:flex; gap:10px; align-items:center; }

.burger{
  display:none;
  cursor:pointer;
  font-size:1.4rem;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  color:var(--text);
  border-radius: 12px;
  padding:8px 12px;
}

/* Hero */
.hero{
  position:relative;
  min-height: 100vh;
  overflow:hidden;
  display:grid;
  place-items:center;
}
.background-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  z-index:-3;
  filter: brightness(1.15) saturate(1.15);
}
@media (max-width:768px){
  .background-video{ object-position: 15% center; }
}
.hero-overlay{
  position:absolute;
  inset:0;
  z-index:-2;
  background:
    radial-gradient(900px 500px at 50% 35%, rgba(153,69,255,.20), transparent 60%),
    linear-gradient(to bottom, rgba(7,8,22,.30), rgba(7,8,22,.86));
}

.hero-wrap{
  width: min(var(--max), 92vw);
  padding-top: 88px; /* space for fixed nav */
  padding-bottom: 70px;
}
.hero-content{
  text-align:center;
  margin: 0 auto;
  padding: 26px 18px 8px;
}

.pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
  color: rgba(234,240,255,.86);
  box-shadow: var(--glowB);
}
.pill .dot{
  width:10px; height:10px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, var(--sol-green), var(--sol-cyan));
  box-shadow: 0 0 18px rgba(20,241,149,.55);
}

.hero-title{
  font-size: clamp(2.2rem, 4vw, 4.2rem);
  line-height:1.05;
  margin: 18px 0 10px;
  text-shadow: 0 0 26px rgba(153,69,255,.45);
  letter-spacing: .2px;
}
.hero-accent{
  color: var(--sol-green);
  text-shadow: 0 0 22px rgba(20,241,149,.45);
}
.hero-subtitle{
  max-width: 740px;
  margin: 0 auto;
  font-size: 1.05rem;
  opacity:.92;
  color: rgba(234,240,255,.84);
}

/* Buttons */
.button-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:14px;
  max-width: 520px;
  margin: 26px auto 10px;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 14px 16px;
  border-radius: 14px;
  text-decoration:none;
  font-weight: 900;
  letter-spacing: .3px;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 12px 26px rgba(0,0,0,.25);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  user-select:none;
}
.btn:hover{
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 0 26px rgba(255,255,255,.18), 0 18px 40px rgba(0,0,0,.35);
  filter: saturate(1.08);
}
.btn:active{ transform: translateY(0) scale(.99); }

.btn-ghost{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
  font-weight: 800;
}
.btn-ghost:hover{ box-shadow: var(--glowA); }

.btn-join{ background: linear-gradient(45deg, #00ffa3, #03e1ff); box-shadow: 0 0 22px rgba(0,255,163,.25); }
.btn-leaderboard{ background: linear-gradient(45deg, #ff00f7, #7000ff); box-shadow: 0 0 22px rgba(255,0,247,.22); }
.btn-trendings{ background: linear-gradient(45deg, #ff7e00, #ff00d0); box-shadow: 0 0 22px rgba(255,126,0,.22); }
.btn-support{ background: linear-gradient(45deg, #00c6ff, #0072ff); box-shadow: 0 0 22px rgba(0,198,255,.22); }

.btn-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 14px 26px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--sol-purple), var(--sol-green));
  border: 1px solid rgba(255,255,255,.12);
  font-weight: 900;
  letter-spacing:.3px;
  text-decoration:none;
  transition: transform .18s ease, box-shadow .18s ease;
}
.btn-primary:hover{ transform: translateY(-2px) scale(1.02); box-shadow: var(--glowB); }

.glow{ box-shadow: 0 0 20px rgba(153,69,255,.40); }

/* Hero KPIs */
.hero-kpis{
  margin: 18px auto 0;
  max-width: 820px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:12px;
}
.kpi-card{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 16px;
  padding: 14px 14px;
  backdrop-filter: blur(10px);
}
.kpi-label{ font-size:.78rem; opacity:.72; margin-bottom:4px; }
.kpi-value{ font-weight:900; }

/* Sections */
.section{
  padding: 76px 6%;
}
.section-head{
  width: min(var(--max), 92vw);
  margin: 0 auto 22px;
  text-align:center;
}
.section-title{
  margin:0;
  font-size: 2rem;
  text-shadow: 0 0 22px rgba(20,241,149,.25);
}
.section-subtitle{
  margin: 10px auto 0;
  max-width: 760px;
  color: var(--muted);
}

/* Features grid */
.features{
  background: linear-gradient(180deg, rgba(13,15,45,.75), rgba(7,8,22,0));
}
.features-grid{
  width: min(var(--max), 92vw);
  margin: 0 auto;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap:16px;
}
.feature-card{
  cursor:pointer;
  padding: 18px 18px 16px;
  border-radius: var(--radius);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
  box-shadow: 0 16px 46px rgba(0,0,0,.25);
  position:relative;
  overflow:hidden;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.feature-card::before{
  content:"";
  position:absolute;
  inset:-60px;
  background: radial-gradient(circle at 30% 20%, rgba(20,241,149,.15), transparent 45%),
              radial-gradient(circle at 80% 0%, rgba(153,69,255,.14), transparent 50%);
  transform: rotate(12deg);
}
.feature-card > *{ position:relative; z-index:1; }

.feature-icon{
  width:44px; height:44px;
  display:grid; place-items:center;
  border-radius: 16px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  margin: 0 auto 10px;
  box-shadow: var(--glowA);
}
.feature-card h3{ margin: 6px 0 6px; font-size: 1.1rem; }
.feature-card p{ margin:0; color: var(--muted); font-size: .95rem; line-height:1.35; }
.feature-cta{
  display:inline-block;
  margin-top: 12px;
  font-weight: 900;
  font-size: .9rem;
  opacity:.9;
  color: rgba(234,240,255,.92);
}
.glow-card{ box-shadow: 0 0 18px rgba(20,241,149,.18), 0 16px 46px rgba(0,0,0,.25); }
.glow-card:hover{
  transform: translateY(-6px);
  border-color: rgba(20,241,149,.22);
  box-shadow: 0 0 28px rgba(20,241,149,.22), 0 22px 60px rgba(0,0,0,.34);
}

/* About */
.about{ background: linear-gradient(180deg, rgba(7,8,22,0), rgba(10,11,30,.55)); }
.about-cards{
  width: min(var(--max), 92vw);
  margin: 18px auto 0;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:14px;
}
.glass-card{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius);
  padding: 18px;
  backdrop-filter: blur(10px);
  box-shadow: 0 16px 46px rgba(0,0,0,.25);
}
.glass-card h3{ margin:0 0 6px; }
.glass-card p{ margin:0; color: var(--muted); }

/* Join */
.join{
  background: linear-gradient(90deg, rgba(153,69,255,.85), rgba(20,241,149,.80));
}
.join-inner{
  width: min(var(--max), 92vw);
  margin: 0 auto;
  text-align:center;
}
.join-inner p{ margin: 8px auto 16px; opacity:.92; }

/* Footer */
.footer{
  padding: 22px 6%;
  text-align:center;
  background: rgba(7,8,22,.65);
  border-top: 1px solid rgba(255,255,255,.08);
  font-size: .92rem;
  color: rgba(234,240,255,.75);
}

/* Popup */
.popup-overlay{
  position:fixed;
  inset:0;
  background: rgba(5, 0, 20, 0.78);
  display:none;
  align-items:center;
  justify-content:center;
  z-index: 2000;
  padding: 18px;
}
.popup-content{
  position:relative;
  width: min(880px, 92vw);
  background: rgba(12, 7, 28, 0.88);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 0 28px rgba(3,225,255,.16), 0 26px 80px rgba(0,0,0,.55);
  backdrop-filter: blur(14px);
  animation: popupFade .22s ease-out;
}
.popup-inner{
  display:flex;
  gap:16px;
  flex-wrap: wrap;
  align-items:center;
}
.popup-image{
  width: 280px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 0 20px rgba(3,225,255,.18);
}
.popup-text{ flex:1; min-width: 240px; }
.popup-text h3{
  margin:0 0 8px;
  color: rgba(234,240,255,.96);
  text-shadow: 0 0 16px rgba(20,241,149,.18);
}
.popup-text p{ margin:0; color: var(--muted); line-height:1.5; }
.popup-btn{
  display:inline-flex;
  margin-top: 14px;
  padding: 10px 16px;
  border-radius: 12px;
  background: linear-gradient(90deg, var(--sol-cyan), var(--sol-purple));
  border: 1px solid rgba(255,255,255,.12);
  font-weight: 900;
  text-decoration:none;
  width: fit-content;
  transition: transform .18s ease, box-shadow .18s ease;
}
.popup-btn:hover{
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 0 20px rgba(3,225,255,.22);
}
.popup-close{
  position:absolute;
  top: 10px; right: 12px;
  width: 38px; height: 38px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(234,240,255,.92);
  font-size: 22px;
  cursor:pointer;
  transition: .18s ease;
}
.popup-close:hover{
  background: rgba(255,0,247,.12);
  border-color: rgba(255,0,247,.22);
  box-shadow: 0 0 22px rgba(255,0,247,.18);
}
@keyframes popupFade{
  from{ transform: translateY(8px) scale(.98); opacity:0; }
  to{ transform: translateY(0) scale(1); opacity:1; }
}

/* Leaderboard page */
.lb-wrap{
  width: min(var(--max), 92vw);
  margin: 0 auto;
  padding-top: 92px; /* nav */
  padding-bottom: 60px;
}
.lb-head{
  text-align:center;
  margin-bottom: 16px;
}
.lb-head h1{
  margin:0 0 6px;
  color: var(--sol-green);
  text-shadow: 0 0 24px rgba(20,241,149,.25);
}
.lb-head p{ margin:0; color: var(--muted); }

.leaderboard{ margin-top: 18px; display:grid; gap: 12px; }

.lb-item{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius);
  padding: 14px 14px;
  backdrop-filter: blur(10px);
  box-shadow: 0 16px 46px rgba(0,0,0,.25);
  cursor:pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.lb-item:hover{
  transform: translateY(-2px);
  border-color: rgba(153,69,255,.22);
  box-shadow: 0 0 24px rgba(153,69,255,.14), 0 22px 60px rgba(0,0,0,.32);
}
.lb-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
.lb-left{ display:flex; align-items:center; gap:10px; min-width: 0; }
.lb-rank{
  width: 54px;
  text-align:center;
  font-weight: 1000;
  letter-spacing:.3px;
  opacity:.95;
}
.lb-rank.gold{ color: gold; text-shadow: 0 0 14px gold; }
.lb-rank.silver{ color: silver; text-shadow: 0 0 14px silver; }
.lb-rank.bronze{ color: #cd7f32; text-shadow: 0 0 14px #cd7f32; }

.lb-logo{
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 2px solid rgba(20,241,149,.75);
  object-fit: cover;
  flex: 0 0 auto;
}
.lb-name{
  white-space:nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
  max-width: 520px;
}
.lb-votes{ font-weight: 900; opacity:.9; }

.lb-meta{
  margin-top: 8px;
  display:flex;
  align-items:center;
  gap: 8px;
  flex-wrap: wrap;
  color: rgba(234,240,255,.86);
}
.lb-chip{
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  font-size: .88rem;
  opacity:.92;
}
.copy-btn{
  cursor:pointer;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  transition: background .15s ease;
}
.copy-btn:hover{ background: rgba(255,255,255,.10); }

.lb-barwrap{
  margin-top: 10px;
  height: 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  overflow:hidden;
}
.lb-bar{
  height:100%;
  width:0%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(153,69,255,.95), rgba(20,241,149,.95));
  box-shadow: 0 0 16px rgba(20,241,149,.18);
  transition: width 1.2s ease;
}
.lb-bar.gold{ background: linear-gradient(90deg, gold, #ffcc33); }
.lb-bar.silver{ background: linear-gradient(90deg, silver, #e0e0e0); }
.lb-bar.bronze{ background: linear-gradient(90deg, #cd7f32, #e07b39); }

/* Responsive */
@media (max-width: 920px){
  .about-cards{ grid-template-columns: 1fr; }
  .hero-kpis{ grid-template-columns: 1fr; }
}
@media (max-width: 768px){
  .burger{ display:block; }
  .nav-links{
    display:none;
    position:absolute;
    top: 70px;
    right: 18px;
    width: 220px;
    flex-direction:column;
    padding: 10px;
    border-radius: 16px;
    background: rgba(7,8,22,.92);
    border: 1px solid rgba(255,255,255,.12);
    backdrop-filter: blur(14px);
    box-shadow: var(--shadow);
  }
  .nav-links.active{ display:flex; }
  .button-grid{ grid-template-columns: 1fr; max-width: 420px; }
  .popup-image{ width: 100%; max-width: 360px; margin: 0 auto; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}

.lb-visits {
  margin: 10px auto 20px;
  width: fit-content;
  padding: 8px 16px;
  border-radius: 999px;
  font-weight: 900;
  letter-spacing: .3px;
  color: #14f195;
  background: rgba(20, 241, 149, 0.08);
  border: 1px solid rgba(20, 241, 149, 0.35);
  box-shadow: 0 0 18px rgba(20, 241, 149, 0.35);
  backdrop-filter: blur(10px);
  text-shadow: 0 0 10px rgba(20, 241, 149, 0.8);
}


/* =========================
   LEADERBOARD HEADER SIMPLE
   ========================= */
.navbar.navbar-simple{
  justify-content: flex-start;
  gap: 12px;
  padding: 12px 14px;
}

.home-btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 14px;
  text-decoration: none;
  font-weight: 900;
  letter-spacing: .4px;

  color: #eafff7;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
  box-shadow: 0 0 18px rgba(20,241,149,.15), 0 0 18px rgba(153,69,255,.12);
}

.home-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 0 22px rgba(20,241,149,.22), 0 0 22px rgba(153,69,255,.18);
}

.home-ico{
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(20,241,149,.25), rgba(153,69,255,.25));
}

.home-txt{ font-size: 14px; }

/* =========================
   LB LAYOUT RESPONSIVE
   ========================= */
.page-leaderboard .lb-wrap{
  padding: 86px 14px 24px; /* laisse la place au header fixed */
  max-width: 980px;
  margin: 0 auto;
}

.page-leaderboard .lb-head h1{
  line-height: 1.1;
  margin-bottom: 10px;
}

.page-leaderboard .lb-visits{
  margin: 8px auto 12px;
}

/* items */
.lb-item{
  width: 100%;
  border-radius: 18px;
  padding: 12px 12px;
  box-sizing: border-box;
}

/* top row wraps nicely on mobile */
.lb-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.lb-left{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1 1 220px;
}

.lb-name{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lb-votes{
  flex: 0 0 auto;
  font-weight: 800;
}

/* meta chips wrap */
.lb-meta{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.lb-chip{
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* bar keeps full width */
.lb-barwrap{
  margin-top: 10px;
}

/* =========================
   MOBILE TUNING
   ========================= */
@media (max-width: 520px){
  .page-leaderboard .lb-wrap{
    padding-top: 78px;
  }

  .page-leaderboard .lb-head h1{
    font-size: 1.9rem;
  }

  .lb-item{
    padding: 12px;
  }

  .lb-logo{ width: 28px; height: 28px; }

  .lb-rank{
    width: auto;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.95rem;
  }

  .lb-votes{
    font-size: 0.95rem;
    opacity: .95;
  }

  .home-btn{
    padding: 9px 12px;
  }
  .home-txt{
    font-size: 13px;
  }
}


/* =========================
   MOBILE POLISH — INDEX
   ========================= */

/* Better base on mobile */
@media (max-width: 520px) {
  body {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  /* Navbar compact */
  .navbar {
    padding: 12px 14px;
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }

  .logo {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.2px;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .burger {
    display: block;
    width: 44px;
    height: 40px;
    border-radius: 14px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.10);
    box-shadow: 0 0 18px rgba(20,241,149,0.12), 0 0 18px rgba(153,69,255,0.10);
    display: grid;
    place-items: center;
  }

  /* Nav dropdown */
  .nav-links {
    right: 14px;
    top: 64px;
    width: min(260px, calc(100vw - 28px));
    border-radius: 16px;
    padding: 10px;
    border: 1px solid rgba(255,255,255,0.10);
    box-shadow: 0 0 25px rgba(0,0,0,0.45);
    backdrop-filter: blur(14px);
  }

  .nav-links li a {
    display: block;
    padding: 12px 12px;
    margin: 0;
    border-radius: 12px;
    background: rgba(255,255,255,0.04);
  }

  /* Hero: more breathing room, avoid cramped text */
  .hero {
    height: auto;              /* let it grow */
    min-height: 100svh;        /* mobile safe viewport */
    padding: 92px 14px 28px;   /* account for fixed navbar */
    align-items: flex-start;
  }

  .hero-content {
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
  }

  .hero-content h1 {
    font-size: 2.25rem;
    line-height: 1.08;
    margin: 8px 0 10px;
    letter-spacing: -0.02em;
  }

  .hero-content p {
    font-size: 1.02rem;
    line-height: 1.45;
    margin: 0 auto;
    max-width: 34ch;
    opacity: 0.92;
  }

  /* If you have a small pill/label above title (like "Live automation...") */
  .hero .pill,
  .hero .badge,
  .hero .tagline {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.10);
    box-shadow: 0 0 18px rgba(20,241,149,0.10);
    margin: 0 auto 12px;
  }

  /* CTA buttons: single column, premium spacing */
  .button-grid {
    grid-template-columns: 1fr;
    gap: 14px;
    max-width: 520px;
    margin: 22px auto 18px;
  }

  .btn {
    padding: 15px 16px;
    font-size: 16px;
    border-radius: 16px;
    letter-spacing: 0.2px;
    border: 1px solid rgba(255,255,255,0.10);
    backdrop-filter: blur(10px);
  }

  .btn:hover {
    transform: translateY(-1px) scale(1.01);
  }

  /* Features section: less padding, tighter grid */
  .features {
    padding: 52px 14px;
  }

  .features h2 {
    font-size: 1.6rem;
    margin-bottom: 16px;
  }

  .features-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  /* Feature cards: more premium */
  .feature-card {
    border-radius: 18px;
    padding: 16px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
  }

  .feature-card h3 {
    margin: 2px 0 8px;
    font-size: 1.05rem;
  }

  .feature-card p {
    margin: 0;
    opacity: 0.9;
    line-height: 1.45;
  }

  /* About / Join spacing */
  .about {
    padding: 46px 14px;
  }

  .join {
    padding: 46px 14px;
  }

  footer {
    padding: 18px 14px;
  }

  /* Popup: fit small screens better */
  .popup-content {
    width: calc(100vw - 28px);
    max-width: 520px;
    padding: 16px;
  }

  .popup-image {
    width: 180px;
  }
}

/* =========================
   OPTIONAL: “glass overlay” to make video nicer on mobile
   ========================= */
@media (max-width: 520px) {
  .hero-overlay {
    background:
      radial-gradient(70% 45% at 50% 25%, rgba(20,241,149,0.12), transparent 60%),
      radial-gradient(60% 40% at 70% 35%, rgba(153,69,255,0.16), transparent 55%),
      linear-gradient(to bottom, rgba(10,11,30,0.35), rgba(10,11,30,0.90));
  }
}