/* MJULTRA Landing · Dark, animation-forward */
:root{
  --bg0:#05070a;
  --bg1:#0b1020;
  --fg:#ffffff;
  --muted:#9aa3b2;
  --neon:#00ffa6;
  --neon2:#2e7bff;
  --shadow: rgba(0,0,0,.5);
}
*{box-sizing:border-box}
html,body{height:100%;}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--fg);
  background: radial-gradient(1200px 800px at 70% 20%, rgba(46,123,255,.12), transparent 60%) , linear-gradient(180deg, var(--bg0), var(--bg1) 70%);
  overflow-x:hidden;
}
/* Animated background canvas */
#bg{
  position:fixed; inset:0;
  z-index:-2;
}
.grid-overlay{
  position:fixed; inset:0;
  background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 60px 60px, 60px 60px;
  mask-image: radial-gradient(60% 60% at 50% 40%, black, transparent 70%);
  z-index:-1;
  animation: drift 18s linear infinite;
  opacity:.3;
}
@keyframes drift{
  0% { transform: translateY(0) }
  50% { transform: translateY(-10px) }
  100% { transform: translateY(0) }
}

/* Top nav */
.nav{
  position:sticky; top:0; display:flex; align-items:center; justify-content:space-between;
  padding:14px 22px;
  background: rgba(5,7,10,.4);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.brand{
  font-family: Orbitron, Inter, sans-serif;
  font-weight:800; letter-spacing:.08em; text-decoration:none; color:var(--fg);
  display:inline-flex; gap:.25rem; align-items:center;
}
.brand span{
  color:var(--neon);
  text-shadow: 0 0 12px color-mix(in srgb, var(--neon) 60%, transparent);
}
.nav nav a{
  color:var(--fg); text-decoration:none; margin-left:18px; font-weight:500;
  position:relative;
}
.nav nav a::after{
  content:""; position:absolute; left:0; bottom:-6px; height:2px; width:0; background:linear-gradient(90deg,var(--neon),var(--neon2));
  transition:width .25s ease;
}
.nav nav a:hover::after{ width:100% }

/* Hero */
.hero{
  min-height:72vh; display:grid; place-items:center; text-align:center;
  padding:8vh 22px 6vh;
}
.logo{ margin:0 0 6px 0; }
.logo-word{
  font-family: Orbitron, Inter, sans-serif; font-weight:800; letter-spacing:.14em; font-size:min(12vw,72px);
  text-shadow: 0 0 24px rgba(0,255,166,.15), 0 0 32px rgba(46,123,255,.12);
  background: linear-gradient(90deg, #fff, #dff, #fff);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.tag{
  display:block; margin-top:6px; font-weight:600; letter-spacing:.28em; color:var(--muted);
}
.sub{ color:#c9d2e3; max-width:780px; margin:10px auto 22px; font-size:1.05rem }
.cta{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.btn{
  padding:12px 18px; border-radius:10px; border:1px solid rgba(255,255,255,.12);
  text-decoration:none; color:var(--fg); font-weight:600; box-shadow: 0 8px 24px rgba(0,0,0,.25);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.btn.primary{
  background: radial-gradient(120% 180% at 0% 0%, rgba(0,255,166,.16), transparent 40%), 
              radial-gradient(120% 180% at 100% 0%, rgba(46,123,255,.16), transparent 40%);
  border-color: color-mix(in srgb, var(--neon) 30%, rgba(255,255,255,.2));
}
.btn.ghost{ background: rgba(255,255,255,.04) }
.btn:hover{ transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,0,0,.35) }
.btn.tiny{ padding:10px 14px; font-size:.95rem }

.disclaimer-chip{
  margin-top:18px; display:inline-block; padding:8px 12px; border-radius:999px;
  font-size:.85rem; color:#cfe; background:rgba(0,255,166,.08); border:1px solid rgba(0,255,166,.25);
  box-shadow: inset 0 0 24px rgba(0,255,166,.08);
}

/* Split panels */
.split{
  display:grid; grid-template-columns: 1fr 1fr; gap:18px; padding:32px 22px; max-width:1100px; margin:0 auto;
}
.panel{
  border:1px solid rgba(255,255,255,.08);
  padding:28px; border-radius:16px; background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  backdrop-filter: blur(6px);
  box-shadow: 0 12px 40px rgba(0,0,0,.30);
  transition: transform .25s ease, border-color .25s ease;
}
.panel:hover{ transform: translateY(-4px); border-color: rgba(0,255,166,.35) }
.panel h2{ margin:0 0 6px; font-family: Orbitron, Inter, sans-serif; letter-spacing:.1em }
.panel p{ margin:0; color:#d7dfef }

/* Tiles */
.tiles{
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:18px; padding:28px 22px 40px; max-width:1100px; margin:0 auto;
}
.tile{ aspect-ratio: 16/9; border-radius:16px; overflow:hidden; position:relative;
  background: radial-gradient(120% 180% at 0% 0%, rgba(0,255,166,.12), transparent 40%), 
              radial-gradient(120% 180% at 100% 100%, rgba(46,123,255,.12), transparent 40%),
              linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  border:1px solid rgba(255,255,255,.06);
  box-shadow: 0 12px 38px rgba(0,0,0,.30);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.tile:hover{ transform: translateY(-6px); border-color: rgba(0,255,166,.35); box-shadow: 0 16px 48px rgba(0,0,0,.40) }
.tile-inner{
  position:absolute; inset:0; display:grid; place-content:center; text-align:center; gap:10px;
}
.tile h3{ margin:0 0 6px 0; font-family: Orbitron, Inter, sans-serif; letter-spacing:.12em }
.links{
  padding:10px 22px 80px; max-width:900px; margin:0 auto; display:grid; gap:12px;
}
.link-card{
  display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 18px;
  border-radius:12px; text-decoration:none; color:var(--fg);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.06);
  transition: transform .2s ease, border-color .2s ease;
}
.link-card:hover{ transform: translateY(-2px); border-color: rgba(46,123,255,.35) }

.footer{
  padding:30px 22px 60px; text-align:center; color:var(--muted);
  border-top:1px solid rgba(255,255,255,.06);
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.25));
}
.footer .muted{ color:var(--muted); text-decoration:none }
.footer .muted:hover{ text-decoration:underline }

/* Responsive */
@media (max-width: 900px){
  .split{ grid-template-columns: 1fr }
  .tiles{ grid-template-columns: 1fr }
}