/* === CJIS WOW THEME === */

/* Palette */
:root{
  --bg:#070a14;        /* page background */
  --bg-2:#0b1220;      /* gradient stop */
  --card:#0e1626;      /* panels/cards */
  --border:#1e2a3f;    /* borders */
  --text:#eaf0ff;      /* main text */
  --muted:#9fb0c9;     /* secondary text */
  --accent:#22d3ee;    /* CTA/link glow */
  --accent-2:#7df9ff;  /* hover */
}

html,body{margin:0;padding:0}
body.app{
  color:var(--text);
  background: radial-gradient(1200px 500px at 20% -10%, rgba(34,211,238,.12), transparent 60%),
              radial-gradient(900px 400px at 80% 0%, rgba(125,249,255,.10), transparent 60%),
              linear-gradient(180deg,var(--bg) 0%, var(--bg-2) 100%);
  font:16px/1.6 Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}

/* Subtle animated grid overlay */
body.app::before{
  content:"";
  position:fixed; inset:0; z-index:-1;
  background:
    repeating-linear-gradient(to right, rgba(125,249,255,.04) 0 1px, transparent 1px 80px),
    repeating-linear-gradient(to bottom, rgba(125,249,255,.03) 0 1px, transparent 1px 80px);
  mask-image: radial-gradient(60% 60% at 50% 20%, black 60%, transparent 100%);
  animation: gridPan 30s linear infinite;
}
@keyframes gridPan{
  0%{ transform: translate3d(0,0,0); }
  100%{ transform: translate3d(-80px,-80px,0); }
}

/* Header */
.nav{
  position:sticky; top:0; z-index:10;
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 20px;
  background: rgba(7,10,20,.55);
  border-bottom:1px solid var(--border);
  backdrop-filter: blur(8px);
}
.nav__links a{ margin-left:16px; color:var(--text); opacity:.9 }
.nav__links a:hover{ color:var(--accent) }

/* Hero with halo */
.hero{
  position:relative;
  display:grid; grid-template-columns:1.1fr .9fr; gap:28px; align-items:center;
  max-width:1100px; margin:0 auto; padding:48px 20px 24px;
}
.hero::after{
  content:""; position:absolute; inset:-10% -10% auto -10%; height:70%;
  background: radial-gradient(600px 240px at 25% 15%, rgba(34,211,238,.18), transparent 60%);
  filter: blur(2px);
  pointer-events:none;
}
.hero__copy p{ color:var(--muted) }

/* Buttons */
.btn{ border:1px solid var(--border); padding:10px 14px; border-radius:12px; color:var(--text); display:inline-flex; align-items:center; gap:8px; transition:.15s ease; }
.btn--primary{
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(34,211,238,.20), transparent 60%),
    linear-gradient(90deg, rgba(34,211,238,.10), rgba(34,211,238,.02));
  border-color:#134E4A;
  box-shadow: 0 0 0 0 rgba(34,211,238,.0);
}
.btn--primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 30px rgba(34,211,238,.18), inset 0 0 18px rgba(34,211,238,.18);
}
.btn--ghost:hover{ border-color:var(--accent); color:var(--accent-2) }
.btn--mini{ padding:6px 10px; border-radius:8px }

/* Panels & cards */
.panel{ max-width:1100px; margin:28px auto; padding:24px 20px; border-top:1px solid var(--border); }
.card{
  background: linear-gradient(180deg, rgba(14,22,38,.95), rgba(14,22,38,.85));
  border:1px solid var(--border);
  border-radius:16px; padding:16px;
  box-shadow: 0 0 0 0 rgba(125,249,255,.0);
  transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.card:hover{
  transform: translateY(-2px);
  border-color: rgba(125,249,255,.25);
  box-shadow: 0 12px 36px rgba(125,249,255,.10);
}

.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px }
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px }

.kpis .card strong{ font-size:1.2rem }
.muted{ color:var(--muted) }
.micro{ font-size:.85rem }

/* Media */
.img, .iframe-wrap{
  border:1px solid var(--border);
  border-radius:16px;
  background: rgba(7,10,20,.5);
}
.iframe-wrap{ overflow:hidden; min-height:420px }

/* Footer */
.footer{ max-width:1100px; margin:28px auto; padding:24px 20px; border-top:1px solid var(--border) }
.disclaimer{ color:var(--muted); font-size:.95rem; margin-bottom:6px }

/* Responsive */
@media (max-width: 900px){
  .hero{ grid-template-columns:1fr; gap:16px }
  .grid-4{ grid-template-columns:repeat(2,1fr) }
  .grid-3,.grid-2{ grid-template-columns:1fr }
}