/* =====================================
   Riftspire Website Styles — v9.2 (FULL)
   ===================================== */

/* Palette */
:root{
  --rs-indigo: #4f46e5;   /* indigo-600 */
  --rs-violet: #4338ca;   /* indigo/violet-700 */
  --rs-sky:    #3b82f6;   /* blue-500 */
  --rs-sky-hi: #60a5fa;   /* blue-400 */
  --rs-deep:   #0a0614;   /* near-black purple */
}

html{
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial;
}

/* ===== Background */
.rs-bg{
  background:
    radial-gradient(1200px 800px at 80% -10%, rgba(99,102,241,.18), transparent 60%),
    radial-gradient(900px 700px at -10% 40%, rgba(56,189,248,.12), transparent 60%),
    radial-gradient(700px 600px at 50% 110%, rgba(154,164,255,.10), transparent 60%),
    var(--rs-deep);
  position: relative;
  overflow-x: hidden;
}
.rs-bg::before{
  content:"";
  position:absolute; inset: -20vh 0 -20vh 0;
  margin:auto; width:2px;
  background: linear-gradient(180deg, transparent, rgba(99,102,241,.7), transparent);
  filter: blur(18px) drop-shadow(0 0 30px rgba(99,102,241,.7));
  opacity:.45; pointer-events:none;
}
.rs-bg::after{
  content:"";
  position:absolute; inset:0;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160" viewBox="0 0 160 160"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)" opacity="0.035"/></svg>');
  background-size: 160px 160px;
  mix-blend-mode: screen; pointer-events:none;
}

/* ===== Hero */
.rs-hero{ min-height: 68vh; }
.rs-hero-overlay{ background: linear-gradient(180deg, rgba(0,0,0,.66), rgba(0,0,0,.66)); }

/* ===== Neon / Glass / Cards */
.neon{
  color:#fff;
  text-shadow:
    0 0 8px rgba(79,70,229,.55),
    0 0 20px rgba(59,130,246,.30),
    0 0 40px rgba(59,130,246,.25);
}
.glass{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  backdrop-filter: blur(10px);
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
}
.card{ border-radius: 16px; border:1px solid rgba(255,255,255,.10); }

/* ===== Buttons: purple → blue neon (no pink) */
.btn-primary{
  background: linear-gradient(100deg, var(--rs-indigo) 0%, var(--rs-violet) 45%, var(--rs-sky) 100%);
  color:#fff;
  border:1px solid rgba(79,70,229,.35);
  box-shadow:
    0 0 0 1px rgba(79,70,229,.22),
    0 10px 22px -10px rgba(59,130,246,.28),
    0 0 26px rgba(59,130,246,.22);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn-primary:hover,
.btn-primary:focus-visible{
  transform: translateY(-1px);
  filter: saturate(1.06);
  box-shadow:
    0 0 0 1px rgba(59,130,246,.38),
    0 14px 34px -12px rgba(59,130,246,.40),
    0 0 34px rgba(99,102,241,.45);
}
.btn-ghost{
  color:#fff;
  background: rgba(79,70,229,.10);
  border:1px solid rgba(79,70,229,.30);
  box-shadow: inset 0 0 18px rgba(59,130,246,.08);
  transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.btn-ghost:hover,
.btn-ghost:focus-visible{
  background: rgba(79,70,229,.16);
  box-shadow:
    0 0 0 1px rgba(59,130,246,.35),
    0 10px 24px -12px rgba(59,130,246,.28),
    0 0 22px rgba(99,102,241,.32);
  transform: translateY(-1px);
}

/* ===== Header layout */
.header-inner{
  display: grid;
  grid-template-columns: auto 1fr auto auto; /* hamburger | logo | nav | ctas */
  gap: .5rem;
  align-items: center;
}
@media (min-width: 768px){
  .header-inner{
    grid-template-columns: 1fr auto auto; /* logo | nav | ctas (hamburger hidden) */
  }
}

/* Top nav (brighter hover; no popovers) */
.topnav{
  display: none;
}
@media (min-width: 768px){
  .topnav{ display:flex; gap:1.1rem; align-items:center; white-space:nowrap; }
}
.topnav a{
  color:#cbd5e1; /* slate-300 */
  transition: color .15s ease;
}
.topnav a:hover,
.topnav a:focus-visible{
  color: var(--rs-sky-hi); /* brighter blue on hover */
}

/* CTAs container */
.cta-wrap{ display:flex; gap:.5rem; align-items:center; }

/* Status chip */
.status-chip{
  display:inline-flex; align-items:center; gap:.4rem;
  height:1.25rem; padding:0 .5rem; font-size:.68rem; line-height:1;
  border-radius:9999px; border:1px solid rgba(148,163,184,.18);
  background: rgba(15,15,25,.72);
}
.status-dot{ width:.42rem; height:.42rem; border-radius:9999px; }

/* ===== Mobile: hamburger left + full-width left-aligned menu */
.hamburger{ margin-left: -.25rem; } /* tiny nudge off the edge */

#mobileMenu{
  position: absolute;
  left: 0; right: 0; top: 64px; /* below header */
  background: rgba(6,8,18,.92);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255,255,255,.10);
  border-bottom: 1px solid rgba(255,255,255,.12);
  z-index: 60;
}
#mobileMenu .mx-auto{
  /* override container so the sheet is full-width on mobile */
  max-width: 100% !important;
  padding-left: 1rem; padding-right: 1rem;
}
#mobileMenu a{
  text-align: left;
  color:#cbd5e1;
}
#mobileMenu a:hover{ color:#fff; background: rgba(79,70,229,.18); }

/* ===== Images / badges used in content */
.platform-img{
  width:100%; max-width:480px; border-radius: 18px;
}
.badge{
  display:inline-flex; align-items:center; gap:.5rem;
  border:1px solid rgba(99,102,241,.35);
  background: rgba(99,102,241,.10);
  color:#c7d2fe; /* indigo-200 */
  padding:.25rem .55rem; border-radius:.75rem; font-size:.75rem;
}