/* MemeRadarGuru — Ultra-modern cosmic premium theme */

:root{
  --bg0:#0a0a1a;
  --bg1:#1a0033;

  --text:#eef0ff;
  --muted:rgba(238,240,255,.72);

  --purple:#7c3aed;
  --cyan:#00f5ff;

  --glass: rgba(255,255,255,.08);
  --glass2: rgba(255,255,255,.06);
  --line: rgba(255,255,255,.14);

  --radius: 18px;
  --shadow: 0 18px 55px rgba(0,0,0,.45);
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background: linear-gradient(180deg, var(--bg0), var(--bg1));
  overflow-x: hidden;
}

a{ color:inherit; text-decoration:none; }
.container{ max-width: 1160px; margin: 0 auto; padding: 0 18px; }

.glass{
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(20px);
}

/* IMPORTANT: hidden must hide */
[hidden] { display: none !important; }

/* ===== Cosmic background ===== */
.cosmos{
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(1200px 700px at 20% 10%, rgba(124,58,237,.18), transparent 60%),
    radial-gradient(900px 600px at 80% 25%, rgba(0,245,255,.12), transparent 60%),
    radial-gradient(900px 600px at 50% 85%, rgba(124,58,237,.12), transparent 60%);
}

.stars{
  position:absolute;
  inset:-20%;
  opacity: .75;
  filter: drop-shadow(0 0 6px rgba(0,245,255,.10));
}
.stars-1::before,
.stars-2::before{
  content:"";
  position:absolute;
  width:2px; height:2px;
  background: rgba(255,255,255,.9);
  box-shadow:
    10vw 10vh rgba(255,255,255,.8),
    20vw 30vh rgba(255,255,255,.7),
    30vw 15vh rgba(255,255,255,.6),
    40vw 40vh rgba(255,255,255,.7),
    55vw 25vh rgba(255,255,255,.7),
    65vw 55vh rgba(255,255,255,.65),
    75vw 20vh rgba(255,255,255,.7),
    85vw 45vh rgba(255,255,255,.6),
    15vw 70vh rgba(255,255,255,.65),
    35vw 80vh rgba(255,255,255,.6),
    60vw 78vh rgba(255,255,255,.6),
    88vw 76vh rgba(255,255,255,.55),
    5vw 40vh rgba(255,255,255,.6),
    95vw 12vh rgba(255,255,255,.55);
  border-radius: 999px;
}
.stars-1{ animation: driftA 14s linear infinite; opacity: .55; }
.stars-2{ animation: driftB 22s linear infinite; opacity: .35; }
@keyframes driftA{ from{ transform: translate3d(0,0,0);} to{ transform: translate3d(-3%, 2%, 0);} }
@keyframes driftB{ from{ transform: translate3d(0,0,0);} to{ transform: translate3d(2%, -2%, 0);} }

.glow{
  position:absolute;
  width: 680px;
  height: 680px;
  border-radius: 999px;
  filter: blur(40px);
  opacity: .28;
}
.glow-a{
  left: -180px;
  top: -220px;
  background: radial-gradient(circle, rgba(124,58,237,.55), transparent 70%);
  animation: pulse 6.5s ease-in-out infinite;
}
.glow-b{
  right: -180px;
  bottom: -240px;
  background: radial-gradient(circle, rgba(0,245,255,.45), transparent 70%);
  animation: pulse 7.5s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{ transform: scale(1); opacity: .26; }
  50%{ transform: scale(1.08); opacity: .34; }
}

/* ===== NAV ===== */
.nav{
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(10,10,26,.55);
  backdrop-filter: blur(14px);

  /* header now fixed + animated hide/show */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;

  transform: translateY(0);
  transition: transform .18s ease;
}
.nav--hidden{
  transform: translateY(-110%);
}

/* spacing for fixed header */
body{ padding-top: 74px; }

.nav-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
}

.brand{
  display:flex;
  align-items:center;
  gap: 12px;
  font-weight: 800;
  letter-spacing: .2px;
}

/* BIGGER LOGO */
.brand-logo{
  width: 52px;
  height: 52px;
  display:block;
  object-fit: contain;
  filter: drop-shadow(0 0 20px rgba(124,58,237,.22));
}

/* slightly larger brand text to match bigger logo */
.brand-name{
  font-size: 16px;
  font-weight: 900;
}

.nav-links{
  display:flex;
  align-items:center;
  gap: 18px;
}
.nav-links a{
  color: var(--muted);
  font-weight: 600;
}
.nav-links a:hover{ color: rgba(255,255,255,.92); }

.nav-burger{
  display:none;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  border-radius: 14px;
  padding: 10px;
  cursor: pointer;
}
.nav-burger span{
  display:block;
  width: 18px;
  height: 2px;
  margin: 4px 0;
  background: rgba(255,255,255,.85);
}

.mobile-menu{
  padding: 12px 18px 18px;
  display: grid;
  gap: 10px;
  background: rgba(10,10,26,.70);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.mobile-menu a{
  color: var(--muted);
  font-weight: 700;
}
.mobile-menu a:hover{ color: rgba(255,255,255,.92); }

/* ===== Buttons ===== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 16px;
  border-radius: 16px;
  font-weight: 800;
  border: 1px solid rgba(124,58,237,.50);
  background: linear-gradient(135deg, rgba(124,58,237,.95), rgba(0,245,255,.22));
  color: #07071a;
  box-shadow: 0 12px 30px rgba(124,58,237,.18);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.03);
  box-shadow: 0 16px 44px rgba(124,58,237,.22);
}
.btn-ghost{
  background: rgba(255,255,255,.04);
  color: var(--text);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: none;
}
.btn-ghost:hover{
  border-color: rgba(0,245,255,.35);
  box-shadow: 0 0 0 3px rgba(0,245,255,.08);
}
.btn-small{
  padding: 10px 12px;
  border-radius: 14px;
}

/* ===== Hero ===== */
.hero{
  min-height: calc(100vh - 82px);
  display:flex;
  align-items:center;
  padding: 56px 0 36px;
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 18px;
  align-items:center;
}

.pill{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.85);
  font-weight: 700;
  letter-spacing: .2px;
}
.pill-dot{
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--cyan);
  box-shadow: 0 0 20px rgba(0,245,255,.55);
}

.glow-title{
  font-family: "Space Grotesk", Inter, system-ui, sans-serif;
  margin: 16px 0 12px;
  font-size: 58px;
  line-height: 1.02;
  letter-spacing: -0.8px;
  text-shadow: 0 0 20px rgba(124,58,237,.65);
}
.glow-title .accent{
  color: rgba(0,245,255,.92);
  text-shadow: 0 0 20px rgba(0,245,255,.50);
}

.lead{
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.75;
  max-width: 640px;
}

.cta-row{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.fineprint{
  margin-top: 12px;
  color: rgba(238,240,255,.64);
  font-size: 13px;
  line-height: 1.6;
}

.stats{
  margin-top: 18px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.stat{ padding: 12px; }
.stat-top{ font-weight: 900; letter-spacing: .2px; }
.stat-bottom{ margin-top: 4px; color: var(--muted); font-size: 13px; }

/* ===== Hero right orbital ===== */
.orbital{ padding: 0; overflow:hidden; position: relative; }
.orbital-head{
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  display:flex; align-items:center; gap: 10px;
}
.signal{
  width: 10px; height: 10px; border-radius: 999px;
  background: var(--cyan);
  box-shadow: 0 0 18px rgba(0,245,255,.6);
}
.orbital-title{ font-weight: 900; letter-spacing: .2px; }
.orbital-sub{ margin-left:auto; color: rgba(238,240,255,.62); font-size: 12px; }

.orbit-stage{ position: relative; height: 320px; display:grid; place-items:center; }
.solana-core{
  width: 116px; height: 116px; border-radius: 28px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(12px);
  box-shadow: 0 0 0 1px rgba(124,58,237,.12), 0 18px 44px rgba(0,0,0,.35);
  display:grid; place-items:center;
  position:absolute; z-index: 3;
}
.solana-stripe{
  width: 76px; height: 12px; border-radius: 999px;
  background: linear-gradient(90deg, rgba(0,245,255,.95), rgba(124,58,237,.95));
  box-shadow: 0 0 18px rgba(124,58,237,.35);
}
.s1{ transform: translateY(-16px) skewX(-18deg); }
.s2{ transform: translateY(0px) skewX(-18deg); opacity: .95; }
.s3{ transform: translateY(16px) skewX(-18deg); opacity: .9; }

.orbit{
  position:absolute;
  width: 260px; height: 260px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  animation: spin 10s linear infinite;
}
.orbit-2{
  width: 210px; height: 210px;
  animation-duration: 7.5s;
  animation-direction: reverse;
  opacity: .9;
}
@keyframes spin{ from{ transform: rotate(0deg); } to{ transform: rotate(360deg); } }

.coin{
  width: 40px; height: 40px;
  border-radius: 999px;
  display:grid; place-items:center;
  font-weight: 900;
  color: rgba(255,255,255,.9);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 0 24px rgba(0,245,255,.12);
  position:absolute;
}
.orbit-1 .c1{ top: -18px; left: 50%; transform: translateX(-50%); }
.orbit-1 .c2{ right: -18px; top: 50%; transform: translateY(-50%); }
.orbit-1 .c3{ left: -18px; top: 65%; transform: translateY(-50%); }
.orbit-2 .c4{ left: 50%; bottom: -18px; transform: translateX(-50%); }
.orbit-2 .c5{ left: -18px; top: 20%; transform: translateY(-50%); }

.ring{
  position:absolute;
  border-radius: 999px;
  border: 1px solid rgba(124,58,237,.16);
  filter: drop-shadow(0 0 12px rgba(124,58,237,.18));
}
.ring-a{ width: 300px; height: 120px; transform: rotate(22deg); }
.ring-b{ width: 320px; height: 120px; transform: rotate(-18deg); border-color: rgba(0,245,255,.14); }

.orbital-foot{
  padding: 14px 16px 16px;
  border-top: 1px solid rgba(255,255,255,.10);
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.kpi-label{ display:block; color: rgba(238,240,255,.62); font-size: 12px; margin-bottom: 4px; }
.kpi-value{ font-weight: 800; }

.mini{ margin-top: 14px; padding: 14px 16px; }
.mini-title{ font-weight: 900; }
.mini-text{ margin-top: 6px; color: var(--muted); line-height: 1.6; }
.mini-link{
  display:inline-block;
  margin-top: 10px;
  font-weight: 900;
  color: rgba(0,245,255,.92);
  text-shadow: 0 0 14px rgba(0,245,255,.25);
}
.mini-link:hover{ color: rgba(124,58,237,.95); }

/* ===== Sections ===== */
.section{ padding: 56px 0; }
.section.alt{ background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)); }
.section-head{ margin-bottom: 18px; }
.section-title{
  font-family: "Space Grotesk", Inter, system-ui, sans-serif;
  margin:0 0 8px;
  font-size: 30px;
  letter-spacing: -0.3px;
  text-shadow: 0 0 20px rgba(124,58,237,.35);
}
.section-sub{ margin:0; color: var(--muted); line-height: 1.7; }

.grid3{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 14px;
}
.grid2{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 14px;
}

.card{
  padding: 16px;
  background: var(--glass2);
  border: 1px solid rgba(255,255,255,.14);
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.card:hover{
  transform: translateY(-2px);
  border-color: rgba(0,245,255,.35);
  box-shadow: 0 0 0 3px rgba(0,245,255,.08), var(--shadow);
}
.card h3{ margin: 0 0 8px; font-size: 16px; }
.card p{ margin: 0; color: var(--muted); line-height: 1.7; }

.bullets{ margin: 10px 0 0; padding-left: 18px; color: var(--muted); line-height: 1.9; }

.cta-wide{
  margin-top: 18px;
  padding: 18px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  background:
    radial-gradient(700px 220px at 20% 50%, rgba(124,58,237,.18), transparent 60%),
    radial-gradient(700px 220px at 80% 50%, rgba(0,245,255,.12), transparent 60%),
    rgba(255,255,255,.04);
}
.cta-wide-title{
  font-weight: 900;
  font-family: "Space Grotesk", Inter, system-ui, sans-serif;
  text-shadow: 0 0 18px rgba(124,58,237,.35);
}
.cta-wide-sub{ margin-top: 4px; color: var(--muted); line-height: 1.6; }

/* ===== Forms ===== */
.form{ max-width: 720px; }
label{ display:block; margin: 12px 0; }
label span{ display:block; font-weight: 800; margin-bottom: 6px; }
input, textarea{
  width: 100%;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(10,10,26,.45);
  color: var(--text);
  outline: none;
}
input:focus, textarea:focus{
  border-color: rgba(124,58,237,.55);
  box-shadow: 0 0 0 3px rgba(124,58,237,.12);
}

.alert{
  border-radius: 16px;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(10,10,26,.45);
  margin: 14px 0;
}
.alert-error{ border-color: rgba(255,90,90,.35); }
.alert ul{ margin: 8px 0 0; padding-left: 18px; color: var(--muted); }

/* ===== Footer ===== */
.footer{
  padding: 22px 0;
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(10,10,26,.35);
  backdrop-filter: blur(12px);
}
.footer-inner{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.footer-note{ margin-top: 6px; color: rgba(238,240,255,.60); font-size: 13px; }
.footer-right{ display:flex; gap: 10px; }
.social{
  width: 42px; height: 42px;
  display:grid; place-items:center;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: rgba(238,240,255,.88);
  transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.social:hover{
  transform: translateY(-1px);
  border-color: rgba(0,245,255,.40);
  box-shadow: 0 0 0 3px rgba(0,245,255,.10);
  color: rgba(0,245,255,.92);
}

/* ===== Responsive ===== */
@media (max-width: 980px){
  body{ padding-top: 70px; }
  .brand-logo{ width: 34px; height: 34px; }
  .brand-name{ font-size: 15px; }

  .hero{ min-height: auto; padding: 42px 0 28px; }
  .hero-grid{ grid-template-columns: 1fr; gap: 14px; }
  .glow-title{ font-size: 44px; }
  .stats{ grid-template-columns: 1fr; }
  .grid3{ grid-template-columns: 1fr; }
  .grid2{ grid-template-columns: 1fr; }
  .cta-wide{ flex-direction: column; align-items:flex-start; }

  .nav-links{ display:none; }
  .nav-burger{ display:block; }
}