:root{
  --bg:#0f1222;
  --fg:#e9ecff;
  --muted:#a6abbd;
  --card:#141734;
  --line:#2a2f52;
  --grad: linear-gradient(90deg,#ff5f00,#ff9900,#007bff,#7b2ff7);
  --accent:#007bff;
  --warn:#e84b4b;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;
  color:var(--fg);
  background:
    radial-gradient(1000px 600px at 10% -10%, #171a3a 0%, transparent 60%),
    radial-gradient(1000px 600px at 100% 0%, #1a1d3f 0%, transparent 60%),
    var(--bg);
}

/* Header */
.em-header{
  position:sticky; top:0; z-index:10;
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 5vw; background:rgba(10,12,26,.6);
  backdrop-filter:blur(10px); border-bottom:1px solid #1e2142;
}
.brand{ display:flex; align-items:center; gap:10px; color:#fff; text-decoration:none; font-weight:800; }
.brand img{ width:42px; height:42px; border-radius:50%; box-shadow:0 8px 26px rgba(0,0,0,.35); }
.header-actions{ display:flex; gap:10px; }
.btn{
  appearance:none; cursor:pointer; border:0; border-radius:12px;
  padding:10px 14px; font-weight:800; color:#fff; background:var(--grad);
  box-shadow:0 14px 34px rgba(0,0,0,.25); transition:.2s transform, .2s box-shadow, .2s opacity;
  text-decoration:none; display:inline-flex; align-items:center; justify-content:center;
}
.btn:hover{ transform:translateY(-2px) }
.btn.ghost{ background:#141734; border:1px solid var(--line); color:#e9ecff; }
.btn.line{ background:transparent; border:1px solid var(--line); color:#cfd5ff; }
.btn.warn{ background:#2a1120; border:1px solid #7a2b42; }
.btn.xl{ padding:14px 18px; border-radius:14px; font-size:1.05rem; }

/* Hero */
.hero{ position:relative; overflow:clip; padding: clamp(70px, 8vh, 150px) 5vw 50px }
.bg-orbs .orb{
  position:absolute; width:36vmax; height:36vmax; border-radius:50%; filter:blur(40px); opacity:.35;
  animation: float 18s ease-in-out infinite;
}
.o1{ top:-16vmax; left:-12vmax; background:radial-gradient(circle at 40% 40%, #ff5f00, transparent 60%); }
.o2{ right:-14vmax; bottom:-14vmax; background:radial-gradient(circle at 60% 60%, #007bff, transparent 60%); animation-delay:3s; }
.o3{ right:10vmax; top:6vmax; background:radial-gradient(circle at 50% 50%, #7b2ff7, transparent 60%); animation-delay:6s; }
.mesh{ position:absolute; inset:0; opacity:.12;
  background:
    linear-gradient(transparent 94%, rgba(255,255,255,.15) 0) top/100% 50px,
    linear-gradient(90deg, transparent 94%, rgba(255,255,255,.15) 0) left/50px 100%;
}
.hero-inner{ position:relative; z-index:1; text-align:center; }
.hero h1{ margin:0 0 8px; font-size: clamp(32px, 6vw, 64px); line-height:1.05; }
.gradient{ background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.lead{ color:#cdd2f8; max-width: 900px; margin: 0 auto 16px; }
.hero-cta{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.badges{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:12px; }
.badges span{ background:#121633; border:1px solid var(--line); color:#dfe3ff; padding:8px 12px; border-radius:999px; font-weight:800; }

/* Center */
.container{ width:min(1100px, 92vw); margin: 26px auto; }
.center{ display:grid; grid-template-columns: 240px 1fr; gap:18px; align-items:start; }
.tabs{ position:sticky; top:82px; display:flex; flex-direction:column; gap:8px; }
.tab{
  appearance:none; background:#121633; color:#e9ecff; border:1px solid var(--line); border-radius:12px;
  padding:10px 12px; text-align:left; font-weight:800; cursor:pointer;
}
.tab.active{ background: linear-gradient(180deg,#161a3d,#101330); border-color:#3a3f6f; box-shadow: inset 0 0 0 1px #2a2f52; }

.panels{ min-height: 400px; }
.panel{ display:none; background:#101330; border:1px solid #2a2f52; border-radius:16px; padding:18px; box-shadow:0 16px 42px rgba(0,0,0,.3); }
.panel.active{ display:block; animation: fadeIn .35s ease; }
.panel h2{ margin: 4px 0 8px; font-size:1.6rem; }
.card{
  background:#121633; border:1px solid #2a2f52; border-radius:14px; padding:14px; box-shadow:0 10px 26px rgba(0,0,0,.25);
}
.card-title{ margin:0 0 8px; font-size:1.15rem; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }

.note{ margin-top:14px; color:#cfd3ea; }
.note time{ font-weight:800; }
.muted{ color:#a6abbd; }
.small{ font-size:.9rem; }

.status-list{ list-style:none; padding:0; margin:0; display:grid; gap:8px; }
.status-list li{ display:flex; justify-content:space-between; gap:10px; background:#0f1229; border:1px solid #2a2f52; padding:10px 12px; border-radius:10px; }
.status-list .on{ color:#67f68a; font-weight:800; }
.status-list .off{ color:#f8a067; font-weight:800; }

.pill-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }
.actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }

.toggles{ display:grid; gap:10px; margin-top:10px; }
.toggle{ display:flex; justify-content:space-between; align-items:center; background:#121633; border:1px solid #2a2f52; padding:12px; border-radius:14px; }
.toggle.locked{ opacity:.75 }
.toggle .meta h3{ margin:0 0 4px; }
.toggle .meta p{ margin:0; color:#c2c7e8; }

.switch{ position:relative; width:56px; height:32px; }
.switch input{ position:absolute; opacity:0; }
.slider{
  position:absolute; inset:0; background:#20244a; border:1px solid #3a3f6f; border-radius:999px; transition:.2s;
}
.slider::after{
  content:""; position:absolute; left:4px; top:3px; width:24px; height:24px; border-radius:50%;
  background:linear-gradient(180deg,#fff,#d9ddff); box-shadow:0 6px 12px rgba(0,0,0,.3); transition:.2s;
}
.switch input:checked + .slider{ background:linear-gradient(90deg,#0066ff55,#7b2ff755); border-color:#5f77ff; box-shadow: inset 0 0 0 1px #4a5ae4; }
.switch input:checked + .slider::after{ transform: translateX(24px); }

.table-wrap{ overflow:auto; border-radius:12px; border:1px solid #2a2f52; }
.table{ width:100%; border-collapse:separate; border-spacing:0; }
.table th,.table td{ padding:10px 12px; border-bottom:1px solid #23284d; }
.table thead th{ position:sticky; top:0; background:#151a3a; }
.table tbody tr:nth-child(even){ background:#0f1229; }

.vendor-list{ margin:8px 0 0; padding-left:16px; }
.vendor-list li{ margin:6px 0; }

.em-footer{ border-top:1px solid #1f2448; color:#bfc5ef; }
.em-footer .container{ padding:22px 5vw; text-align:center; }

/* Consent banner */
.consent-banner{
  position:fixed; inset:auto 12px 12px 12px; z-index:50;
}
.cb-inner{
  display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap;
  padding:14px; border-radius:14px; background:rgba(16,19,48,.92); color:#e9ecff;
  border:1px solid #2a2f52; box-shadow: 0 12px 40px rgba(0,0,0,.45);
  backdrop-filter: blur(10px);
}
.cb-text h3{ margin:0 0 6px; font-size:1.1rem; }
.cb-text p{ margin:0 0 4px; color:#cfd3ef; }
.cb-text .link{ color:#9ec5ff; text-decoration:underline; }

/* Animations */
@keyframes float { 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-16px) } }
@keyframes fadeIn{ from{ opacity:0; transform:translateY(8px)} to{ opacity:1; transform:none } }

/* Responsive */
@media (max-width: 1020px){
  .center{ grid-template-columns: 1fr; }
  .tabs{ position:static; display:grid; grid-template-columns: repeat(4,1fr); }
  .tab{ text-align:center }
}
@media (max-width: 640px){
  .tabs{ grid-template-columns: repeat(2,1fr); }
  .grid-2{ grid-template-columns: 1fr; }
  .btn.xl{ width:100% }
}