:root{
  --mp-bg:#0b0f17;
  --mp-panel:#0f1624;
  --mp-primary:#00fff0;
  --mp-accent:#7c4dff;
  --mp-danger:#ff4d6d;
  --mp-success:#00e676;
  --mp-text:#e8f1ff;
  --mp-dim:#9bb0c7;
  --mp-border:rgba(255,255,255,0.08);
  --mp-glow: 0 0 8px rgba(0,255,240,.65), 0 0 24px rgba(0,255,240,.35);
}

html,body{
  background: radial-gradient(1200px 600px at 80% -20%, rgba(124,77,255,.25), transparent),
              radial-gradient(900px 400px at -10% 120%, rgba(0,255,240,.15), transparent),
              var(--mp-bg);
  color: var(--mp-text);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

/* Cards / Buttons / Grid (shared) */
.mp-card{
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border: 1px solid var(--mp-border);
  border-radius: 20px;
  padding: 28px;
  box-shadow: 0 0 0 1px rgba(124,77,255,.12) inset;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  position: relative;
  overflow: hidden;
}
.mp-card:hover{ transform: translateY(-6px); box-shadow: var(--mp-glow); border-color: rgba(124,77,255,.45); }
.mp-card .mp-title{ font-family: Orbitron, Inter, sans-serif; letter-spacing: .6px; font-weight: 700; font-size: 1.25rem; margin: 0 0 8px; color: var(--mp-text); text-shadow: 0 0 8px rgba(124,77,255,.6); }
.mp-muted{ color: var(--mp-dim); }

.mp-btn{
  display:inline-flex; align-items:center; gap:10px; background:#0e1220;
  border:1px solid var(--mp-border); color:var(--mp-primary);
  padding:12px 18px; border-radius:12px; text-decoration:none;
  font-weight:700; letter-spacing:.4px; transition:.2s ease;
}
.mp-btn:hover{ transform: translateY(-2px); box-shadow: var(--mp-glow); background: #11172a; color:#0ff; }
.mp-grid{ display:grid; gap:20px; }
@media(min-width:768px){
  .mp-grid.cols-2{ grid-template-columns: repeat(2,1fr); }
  .mp-grid.cols-3{ grid-template-columns: repeat(3,1fr); }
  .mp-grid.cols-4{ grid-template-columns: repeat(4,1fr); }
}

/* Hero */
.mp-hero{ padding: 88px 0 48px; border-bottom: 1px solid var(--mp-border); position: relative; }
.mp-hero h1{ font-family: Orbitron, Inter, sans-serif; font-size: clamp(36px, 6vw, 64px); line-height: 1.06; margin: 0 0 10px; }
.mp-hero p{ color: var(--mp-dim); font-size: 1.05rem; max-width: 860px; }
.mp-hero .cta{ margin-top: 22px; display:flex; gap:14px; flex-wrap:wrap; }

/* Badges */
.mp-badge{ display:inline-flex; align-items:center; gap:8px; border:1px solid var(--mp-border); border-radius:999px; padding:8px 12px; background: rgba(124,77,255,.12); color:#d7c9ff; font-weight:700; font-size:.88rem; }

/* Popup triggers */
[data-mp-popup]{ cursor: pointer; }
[data-mp-popup]:hover{ filter: brightness(1.08); }

/* ====== PRO-LIKE MEGA MENU (FREE) ====== */
.mp-header{ position:sticky; top:0; z-index:999; backdrop-filter: blur(10px); background: rgba(15,22,36,.7); border-bottom:1px solid var(--mp-border); }
.mp-header .wrap{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding:12px 16px; }
.mp-logo{ font-family: Orbitron; font-weight:800; letter-spacing:.8px; color:var(--mp-primary); text-decoration:none; }
.mp-nav{ display:flex; align-items:center; gap:8px; }
.mp-nav > li{ position:relative; list-style:none; }
.mp-nav > li > a{ display:flex; align-items:center; gap:10px; padding:12px 14px; color:var(--mp-text); text-decoration:none; font-weight:700; }
.mp-nav > li:hover > a{ color:var(--mp-primary); }

/* Dropdown / Mega */
.mp-dropdown{ position:absolute; left:0; top:calc(100% + 12px); background: #0e1424; border:1px solid var(--mp-border); border-radius:16px; opacity:0; visibility:hidden; transform: translateY(10px); transition:.25s ease; min-width: 280px; box-shadow: var(--mp-glow); padding:14px; }
.mp-nav > li:hover .mp-dropdown{ opacity:1; visibility:visible; transform: translateY(0); }
.mp-mega{ width: min(920px, 90vw); }
.mp-dropdown .coltitle{ font-family: Orbitron; color:#bcd6ff; margin-bottom:8px; }
.mp-dropdown a{ color:#e8f1ff; text-decoration:none; display:block; padding:8px 10px; border-radius:10px; }
.mp-dropdown a:hover{ background: rgba(124,77,255,.18); }

/* Mobile */
@media(max-width:980px){
  .mp-nav-wrap{ position:fixed; inset:0 0 auto 0; top:60px; background:#0f1624; border-top:1px solid var(--mp-border); transform: translateY(-120%); transition:.25s ease; }
  .mp-nav-wrap.open{ transform: translateY(0); }
  .mp-nav{ flex-direction:column; padding:14px; }
  .mp-dropdown{ position:static; opacity:1; visibility:visible; transform:none; width:100%; box-shadow:none; }
}

.hamb{ width:36px; height:36px; border:1px solid var(--mp-border); border-radius:10px; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.hamb span{ width:18px; height:2px; background:#e8f1ff; position:relative; display:block; }
.hamb span::before, .hamb span::after{ content:''; position:absolute; height:2px; width:100%; background:#e8f1ff; left:0; }
.hamb span::before{ top:-6px; } .hamb span::after{ top:6px; }

/* ====== Built-in Modal (fallback if no Popup Maker) ====== */
.mp-modal{ position:fixed; inset:0; background: rgba(0,0,0,.7); display:none; align-items:center; justify-content:center; padding:20px; z-index:9999; }
.mp-modal.open{ display:flex; }
.mp-modal .box{ width:min(900px, 96vw); background:#0e1424; border:1px solid var(--mp-border); border-radius:18px; padding:18px; }
.mp-modal .close{ float:right; cursor:pointer; font-weight:800; color:#fff; }

/* Utility */
.hide{ display:none !important; }