:root {
  --civic-black: #02070d;
  --civic-ink: #071018;
  --civic-graphite: #0b111a;
  --civic-panel: rgba(9, 18, 29, .92);
  --civic-panel-2: rgba(13, 24, 38, .96);
  --civic-line: rgba(137, 226, 255, .18);
  --civic-line-strong: rgba(56, 189, 248, .42);
  --civic-cyan: #20e7ff;
  --civic-blue: #3b82f6;
  --civic-electric: #67e8f9;
  --civic-green: #34d399;
  --civic-amber: #fbbf24;
  --civic-red: #fb7185;
  --civic-text: #f8fbff;
  --civic-soft: #d8e7f0;
  --civic-muted: #91a4b7;
  --civic-shadow: 0 30px 90px rgba(0, 0, 0, .55), 0 0 70px rgba(32, 231, 255, .06);
}

html { min-height: 100%; scroll-behavior: smooth; }
body {
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(circle at 18% -8%, rgba(32, 231, 255, .18), transparent 30rem),
    radial-gradient(circle at 78% 12%, rgba(59, 130, 246, .14), transparent 34rem),
    linear-gradient(180deg, #03070d 0%, #071018 48%, #03070d 100%);
  color: var(--civic-text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.75), transparent 80%);
}
main { min-height: 72vh; }
a { color: var(--civic-electric); text-decoration: none; }
a:hover { color: #fff; }

.civic-nav { position: sticky; top: 0; z-index: 1000; background: rgba(2, 7, 13, .88) !important; border-bottom: 1px solid var(--civic-line); backdrop-filter: blur(20px); box-shadow: 0 14px 42px rgba(0,0,0,.35); }
.civic-brand { display:flex; align-items:center; gap:.75rem; color:#fff !important; letter-spacing:.02em; }
.civic-brand small { display:block; color: var(--civic-muted); font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.13em; }
.brand-mark { width:2.3rem; height:2.3rem; display:grid; place-items:center; border-radius:.8rem; color:#001018; background: linear-gradient(135deg, #fff, var(--civic-cyan)); box-shadow: 0 0 30px rgba(32,231,255,.38); }
.navbar .nav-link { color: #dce8ef !important; font-weight: 750; border-radius: 999px; padding: .55rem .82rem !important; }
.navbar .nav-link:hover, .navbar .nav-link:focus, .nav-accent { color:#fff !important; background: rgba(32,231,255,.10); box-shadow: inset 0 0 0 1px rgba(32,231,255,.16); }
.staff-link { opacity:.78; }
.dropdown-menu { background: #08111c; border: 1px solid var(--civic-line); box-shadow: var(--civic-shadow); border-radius: 18px; padding:.6rem; }
.dropdown-item, .dropdown-item-text { color: var(--civic-soft); border-radius: 12px; }
.dropdown-item:hover { background: rgba(32,231,255,.12); color:#fff; }

.container, .container-fluid { position: relative; }
.civic-page { max-width: 1240px; }
.hero-panel, .ops-card, .card, .mobile-phone, .agent-console, .tour-step, .control-map {
  background: linear-gradient(145deg, rgba(12, 23, 36, .96), rgba(5, 12, 21, .96));
  border: 1px solid var(--civic-line);
  border-radius: 28px;
  box-shadow: var(--civic-shadow);
  color: var(--civic-text);
}
.hero-panel { padding: clamp(1.5rem, 4vw, 4rem); overflow: hidden; position: relative; }
.hero-panel::after { content:""; position:absolute; width:42rem; height:42rem; border-radius:50%; right:-14rem; bottom:-24rem; background: radial-gradient(circle, rgba(32,231,255,.18), transparent 62%); pointer-events:none; }
.ops-card, .card, .tour-step { padding: 1.35rem; }
.card { margin-bottom: 1.25rem; }
.card-header { background: rgba(32,231,255,.08) !important; color:#fff !important; border-bottom: 1px solid var(--civic-line); }
.card-body { color: var(--civic-text); }

h1, h2, h3, h4, h5, h6, .display-4, .display-5 { color: #fff; font-weight: 900; letter-spacing: -.04em; }
.display-4 { font-size: clamp(3rem, 7vw, 6.5rem); line-height:.9; }
p, li, td, th, label, .form-text { color: var(--civic-soft); }
.lead { color: #e9f9ff; font-weight: 560; font-size: clamp(1.05rem, 2vw, 1.3rem); }
.text-muted, .text-muted-strong { color: var(--civic-muted) !important; }
.eyebrow { color: var(--civic-cyan); text-transform: uppercase; letter-spacing: .16em; font-size: .76rem; font-weight: 900; }
.section-title { font-size: clamp(2rem, 4vw, 3.3rem); }

.btn { border-radius: 999px; font-weight: 850; border-width: 1px; }
.btn-primary { background: linear-gradient(135deg, #0ea5e9, #20e7ff 48%, #2563eb); border: 0; color: #001018; box-shadow: 0 18px 45px rgba(32,231,255,.24); }
.btn-primary:hover { transform: translateY(-1px); filter: brightness(1.06); color:#001018; }
.btn-outline-info { border-color: rgba(32,231,255,.72); color: #c9fbff; }
.btn-outline-info:hover { background: rgba(32,231,255,.16); color:#fff; border-color: var(--civic-cyan); }
.btn-outline-light { border-color: rgba(248,251,255,.45); color:#fff; }
.btn-outline-warning { color: #fde68a; border-color: rgba(251,191,36,.75); }
.btn-success { background:#0f9f82; border-color:#0f9f82; }
.btn-warning { background: var(--civic-amber); border-color: var(--civic-amber); color:#1c1202; }

.badge, .status-pill { border-radius:999px; padding:.45rem .7rem; font-weight:850; letter-spacing:.01em; }
.badge.bg-success, .status-ok { background:rgba(52,211,153,.16) !important; color:#bbf7d0 !important; border:1px solid rgba(52,211,153,.45); }
.badge.bg-warning, .status-warn { background:rgba(251,191,36,.16) !important; color:#fde68a !important; border:1px solid rgba(251,191,36,.45); }
.badge.bg-danger, .status-risk { background:rgba(251,113,133,.15) !important; color:#fecdd3 !important; border:1px solid rgba(251,113,133,.45); }
.badge.bg-info, .status-info { background:rgba(32,231,255,.13) !important; color:#cffafe !important; border:1px solid rgba(32,231,255,.45); }
.badge.bg-secondary { background:rgba(148,163,184,.16) !important; color:#e2e8f0 !important; border:1px solid rgba(148,163,184,.35); }

.form-control, .form-select, textarea, input[type=text], input[type=email], input[type=tel], input[type=password] { background:rgba(2,7,13,.82) !important; border:1px solid rgba(183,200,217,.25) !important; color:#fff !important; border-radius:16px !important; }
.form-control::placeholder { color:#71869a !important; }
.form-control:focus, .form-select:focus { border-color:var(--civic-cyan) !important; box-shadow:0 0 0 .22rem rgba(32,231,255,.14) !important; }
.form-check-input { background-color:rgba(2,7,13,.9); border-color:rgba(183,200,217,.42); }
.form-check-input:checked { background-color:var(--civic-blue); border-color:var(--civic-blue); }
.validation-summary-errors, .text-danger { color:#fecdd3 !important; }

.table { color: var(--civic-soft); }
.table > :not(caption) > * > * { background: transparent; color: var(--civic-soft); border-color: rgba(183,200,217,.13); }
.timeline-list { margin:0; padding-left:1.2rem; }
.timeline-list li { margin-bottom:.7rem; }
.metric { font-size: clamp(2rem, 5vw, 3.4rem); font-weight:950; color:#fff; line-height:.95; }
.grid-auto { display:grid; grid-template-columns:repeat(auto-fit, minmax(235px, 1fr)); gap:1rem; }

.ops-stat { border-left:3px solid var(--civic-cyan); padding-left:1rem; }
.command-strip { display:flex; flex-wrap:wrap; gap:.75rem; padding:.9rem; border:1px solid var(--civic-line); background:rgba(255,255,255,.035); border-radius:22px; }
.signal-line { height:1px; background:linear-gradient(90deg, transparent, rgba(32,231,255,.7), transparent); }
.area-chip { display:inline-flex; align-items:center; gap:.35rem; padding:.45rem .7rem; margin:.18rem; border-radius:999px; color:#e9fbff; background:rgba(32,231,255,.09); border:1px solid rgba(32,231,255,.22); font-weight:750; }
.control-map { min-height: 360px; padding:1rem; position:relative; overflow:hidden; background: radial-gradient(circle at 25% 22%, rgba(32,231,255,.18), transparent 14rem), linear-gradient(145deg, rgba(10,20,32,.97), rgba(2,7,13,.97)); }
.map-node { position:absolute; width:12px; height:12px; border-radius:50%; background:var(--civic-cyan); box-shadow:0 0 28px var(--civic-cyan); }
.map-node::after { content:""; position:absolute; inset:-12px; border:1px solid rgba(32,231,255,.32); border-radius:50%; }

.mobile-phone { max-width:430px; margin:0 auto; padding:1rem; border-radius:38px; background:linear-gradient(145deg, #050a12, #111827); }
.mobile-screen { border-radius:28px; min-height:660px; padding:1rem; background:radial-gradient(circle at top, rgba(32,231,255,.16), transparent 18rem), #050b13; border:1px solid rgba(255,255,255,.08); }
.app-profile { border:1px solid var(--civic-line); background:rgba(32,231,255,.08); border-radius:20px; padding:1rem; }
.app-tile { display:flex; justify-content:space-between; align-items:center; gap:.8rem; padding:1rem; margin-bottom:.7rem; border-radius:18px; background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.08); color:#fff; font-weight:800; }
.app-tile:hover { border-color:var(--civic-line-strong); background:rgba(32,231,255,.11); }
.app-tile.secondary { opacity:.78; }

.alert { border-radius:18px; border-width:1px; }
.alert-info { color:#dffaff; background:rgba(32,231,255,.10); border-color:rgba(32,231,255,.30); }
.alert-warning { color:#fde68a; background:rgba(251,191,36,.10); border-color:rgba(251,191,36,.32); }
.alert-danger { color:#fecdd3; background:rgba(251,113,133,.10); border-color:rgba(251,113,133,.32); }
.alert-success { color:#bbf7d0; background:rgba(52,211,153,.10); border-color:rgba(52,211,153,.32); }

.civic-footer { background:rgba(2,7,13,.92); border-top:1px solid var(--civic-line); padding:2.4rem 0; margin-top:5rem; color:var(--civic-muted); }

@media (max-width: 768px) {
  .hero-panel { border-radius:22px; }
  .display-4 { font-size:3.2rem; }
  .command-strip .btn { width:100%; }
}