: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(2.6rem, 5vw, 4.8rem); line-height:.96; }
.home-hero-title { max-width: 11ch; font-size: clamp(2.75rem, 5vw, 5rem); line-height: .94; }
.home-hero-lead { max-width: 46rem; }
.home-hero-note { max-width: 44rem; }
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:.85rem; border:1px solid var(--civic-line); background:rgba(255,255,255,.035); border-radius:20px; }
.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, .home-hero-title { font-size:2.75rem; line-height:1; max-width: none; }
  .command-strip .btn { width:100%; }
}

.app-shell-body { background:#02070d; overflow-x:hidden; }
.app-shell-body main { min-height:100vh; }
.citizen-app-shell { max-width: 520px; margin: 0 auto; min-height: 100vh; background: radial-gradient(circle at 50% 0%, rgba(32,231,255,.17), transparent 18rem), #050b13; border-left:1px solid rgba(32,231,255,.15); border-right:1px solid rgba(32,231,255,.15); position:relative; padding-bottom: 86px; }
.app-topbar { position:sticky; top:0; z-index:20; display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1rem 1.1rem .8rem; background:rgba(5,11,19,.88); backdrop-filter: blur(20px); border-bottom:1px solid rgba(32,231,255,.14); }
.app-topbar h1 { font-size:1.25rem; margin:0; letter-spacing:-.02em; }
.app-icon-btn { width:42px; height:42px; border-radius:16px; display:grid; place-items:center; background:rgba(32,231,255,.11); border:1px solid rgba(32,231,255,.28); color:#dffaff; }
.app-scroll { padding:1rem; }
.app-hero-card, .app-panel, .app-ticket, .app-grid-metrics > div { background:linear-gradient(145deg, rgba(13,24,38,.95), rgba(5,12,21,.95)); border:1px solid rgba(32,231,255,.18); border-radius:24px; box-shadow:0 18px 55px rgba(0,0,0,.42); }
.app-hero-card { display:grid; grid-template-columns:1fr 96px; gap:1rem; padding:1.1rem; overflow:hidden; }
.app-hero-card h2 { font-size:1.45rem; margin:.55rem 0; }
.app-radar { min-height:110px; position:relative; border-radius:24px; background:radial-gradient(circle, rgba(32,231,255,.28), rgba(32,231,255,.04) 45%, transparent 70%); }
.app-radar span { position:absolute; width:10px; height:10px; border-radius:50%; background:#20e7ff; box-shadow:0 0 28px #20e7ff; }
.app-radar span:nth-child(1){left:46%;top:28%}.app-radar span:nth-child(2){left:30%;top:62%}.app-radar span:nth-child(3){left:67%;top:55%}
.app-grid-metrics { display:grid; grid-template-columns:repeat(2,1fr); gap:.75rem; margin:1rem 0; }
.app-grid-metrics > div { padding:.9rem; }
.app-grid-metrics strong { display:block; color:#fff; font-size:1.55rem; line-height:1; }
.app-grid-metrics span { color:#91a4b7; font-size:.78rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
.app-panel { padding:1rem; margin-bottom:1rem; scroll-margin-top:84px; }
.app-panel h2 { font-size:1.25rem; margin-bottom:.75rem; }
.app-list { display:grid; gap:.75rem; }
.app-ticket { display:flex; justify-content:space-between; align-items:flex-start; gap:.75rem; padding:.9rem; }
.app-ticket p { margin:.1rem 0; color:#d8e7f0; }
.app-ticket small { color:#91a4b7; }
.app-result { min-height:1px; }
.app-bottom-nav { position:fixed; left:50%; bottom:0; transform:translateX(-50%); width:min(520px, 100vw); z-index:30; display:grid; grid-template-columns:repeat(6, 1fr); background:rgba(2,7,13,.94); backdrop-filter:blur(20px); border:1px solid rgba(32,231,255,.18); border-bottom:0; border-radius:24px 24px 0 0; padding:.55rem .35rem .7rem; }
.app-bottom-nav a { display:flex; flex-direction:column; align-items:center; gap:.1rem; color:#91a4b7; font-size:.67rem; font-weight:850; }
.app-bottom-nav i { color:#dffaff; font-size:1.15rem; }
.app-bottom-nav a:hover, .app-bottom-nav a:focus { color:#fff; }
@media (min-width: 900px) { .citizen-app-shell { margin-top:1rem; margin-bottom:1rem; border-radius:36px; min-height:calc(100vh - 2rem); overflow:hidden; } .app-bottom-nav { bottom:1rem; border-radius:24px; } }

/* Correction sprint: video-ready command centre surfaces */
.ops-dashboard-page, .incident-command-page, .agent-command-page { max-width: 1440px; }
.dashboard-command-hero, .incident-hero, .agent-hero { border-color: rgba(32,231,255,.28); }
.command-map-large, .ops-mini-map { position:relative; overflow:hidden; min-height:230px; border-radius:26px; border:1px solid rgba(32,231,255,.2); background:radial-gradient(circle at 35% 30%, rgba(32,231,255,.18), transparent 18rem), linear-gradient(145deg, rgba(2,7,13,.98), rgba(13,24,38,.94)); }
.command-map-large .map-grid { position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size:34px 34px; opacity:.9; }
.map-overlay-card { position:absolute; left:1rem; right:1rem; bottom:1rem; padding:1rem; border-radius:20px; background:rgba(2,7,13,.78); border:1px solid rgba(32,231,255,.2); backdrop-filter:blur(14px); }
.map-overlay-card strong, .ops-mini-map strong { display:block; color:#fff; font-size:1.05rem; }
.map-overlay-card small, .ops-mini-map small { color:var(--civic-muted); }
.ops-mini-map { min-height:170px; display:flex; flex-direction:column; justify-content:flex-end; padding:1rem; }
.ops-kpi-grid { display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:1rem; }
.ops-kpi { padding:1.1rem; border-radius:24px; background:linear-gradient(145deg, rgba(13,24,38,.96), rgba(5,12,21,.96)); border:1px solid rgba(32,231,255,.16); box-shadow:var(--civic-shadow); }
.ops-kpi span { color:var(--civic-muted); text-transform:uppercase; letter-spacing:.08em; font-size:.72rem; font-weight:900; }
.ops-kpi strong { display:block; color:#fff; font-size:2.45rem; line-height:1; margin:.35rem 0; }
.ops-kpi small { color:var(--civic-soft); }
.ops-kpi.danger { border-color:rgba(251,113,133,.35); }
.ops-kpi.success { border-color:rgba(52,211,153,.35); }
.command-table .ref-link { font-weight:950; letter-spacing:.02em; }
.dept-load-row { display:block; position:relative; padding:.9rem 0; border-bottom:1px solid rgba(255,255,255,.08); color:#fff; }
.dept-load-row span { position:relative; z-index:1; display:flex; justify-content:space-between; gap:.75rem; }
.dept-load-row small { color:var(--civic-muted); }
.dept-load-row em { display:block; height:4px; margin-top:.65rem; border-radius:999px; background:linear-gradient(90deg, var(--civic-cyan), var(--civic-blue)); box-shadow:0 0 22px rgba(32,231,255,.3); }
.alert-rec { display:flex; justify-content:space-between; gap:1rem; padding:.8rem; border:1px solid rgba(251,191,36,.22); background:rgba(251,191,36,.08); border-radius:16px; }
.alert-rec span { color:#fde68a; }
.intel-tile { padding:1rem; border-radius:18px; background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.08); }
.intel-tile span, .agent-result-card span { color:var(--civic-muted); text-transform:uppercase; letter-spacing:.08em; font-size:.7rem; font-weight:900; }
.intel-tile strong { display:block; color:#fff; margin-top:.15rem; }
.incident-description { padding:1rem; border-left:3px solid var(--civic-cyan); background:rgba(32,231,255,.06); border-radius:0 18px 18px 0; white-space:pre-wrap; }
.action-command-panel { top:1rem; border-color:rgba(32,231,255,.32); }
.action-grid { display:grid; grid-template-columns:1fr; gap:.65rem; }
.quick-action-form { margin:0; }
.quick-action-btn, .workflow-card { width:100%; display:flex; align-items:center; gap:.8rem; text-align:left; padding:.85rem; border-radius:18px; border:1px solid rgba(32,231,255,.18); background:rgba(32,231,255,.07); color:#fff; transition:.16s ease; }
.quick-action-btn:hover, .workflow-card:hover { transform:translateY(-1px); background:rgba(32,231,255,.13); border-color:rgba(32,231,255,.42); }
.quick-action-btn i, .workflow-card i { width:38px; height:38px; display:grid; place-items:center; border-radius:14px; background:linear-gradient(135deg, rgba(32,231,255,.22), rgba(59,130,246,.16)); color:#dffaff; font-size:1.2rem; }
.quick-action-btn strong, .workflow-card strong { display:block; color:#fff; }
.quick-action-btn small, .workflow-card small { display:block; color:var(--civic-muted); line-height:1.25; }
.manual-action-box { padding:1rem; border-radius:20px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.035); }
.command-timeline li { padding-bottom:.7rem; border-bottom:1px solid rgba(255,255,255,.07); }
.selected-report-card { padding:1.25rem; border-radius:28px; border:1px solid rgba(32,231,255,.24); background:linear-gradient(145deg, rgba(9,18,29,.98), rgba(2,7,13,.94)); box-shadow:var(--civic-shadow); }
.workflow-library { position:sticky; top:1rem; }
.workflow-section { margin-top:1rem; }
.workflow-section h3 { font-size:.82rem; color:var(--civic-cyan); text-transform:uppercase; letter-spacing:.12em; margin-bottom:.55rem; }
.workflow-card { margin-bottom:.55rem; }
.workflow-card.muted { opacity:.78; }
.agent-output-panel { min-height:560px; }
.agent-empty-state { min-height:240px; display:grid; place-items:center; text-align:center; padding:2rem; border-radius:24px; border:1px dashed rgba(32,231,255,.28); background:rgba(32,231,255,.045); }
.agent-empty-state i { font-size:3rem; color:var(--civic-cyan); }
.agent-result-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:1rem; }
.agent-result-card { padding:1rem; border-radius:20px; background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.08); }
.agent-result-card.primary { border-color:rgba(32,231,255,.38); background:rgba(32,231,255,.08); }
.agent-result-card.wide { grid-column:span 3; }
.agent-result-card strong { display:block; color:#fff; font-size:1.05rem; margin-top:.25rem; }
.agent-result-card p { margin:.35rem 0 0; }
.agent-json-preview pre { margin:.6rem 0 0; padding:1rem; color:#dffaff; border-radius:18px; background:#02070d; border:1px solid rgba(32,231,255,.16); }
.diagnostic-card dd { color:var(--civic-soft); }
@media (max-width: 1100px) { .ops-kpi-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); } .agent-result-grid { grid-template-columns:1fr; } .agent-result-card.wide { grid-column:auto; } }
@media (max-width: 640px) { .ops-kpi-grid { grid-template-columns:1fr; } .command-table-card { padding:.8rem; } .quick-action-btn, .workflow-card { padding:.75rem; } }

/* Final polish: app login gate and guided citizen Copilot */
.app-login-shell { min-height:100vh; display:grid; place-items:center; padding:1rem; }
.app-login-screen { width:100%; min-height:100vh; display:grid; align-content:center; gap:1rem; padding:1rem; }
.app-login-brand { display:flex; justify-content:center; align-items:center; gap:.7rem; }
.app-login-card { padding:1.35rem; border-radius:30px; background:linear-gradient(145deg, rgba(13,24,38,.98), rgba(2,7,13,.96)); border:1px solid rgba(32,231,255,.24); box-shadow:var(--civic-shadow); }
.app-login-card h1 { font-size:clamp(2rem, 8vw, 3.2rem); line-height:.95; margin:.8rem 0; }
.app-login-demo-grid { display:grid; grid-template-columns:1fr 1fr; gap:.7rem; }
.app-login-demo-grid a { padding:.85rem; border-radius:18px; background:rgba(32,231,255,.07); border:1px solid rgba(32,231,255,.18); color:#fff; }
.app-login-demo-grid small { display:block; color:var(--civic-muted); }
.copilot-chat { display:grid; gap:.55rem; max-height:310px; overflow:auto; padding:.75rem; border-radius:20px; background:rgba(2,7,13,.45); border:1px solid rgba(32,231,255,.13); }
.copilot-bubble { max-width:88%; padding:.75rem .9rem; border-radius:18px; color:#e9fbff; border:1px solid rgba(255,255,255,.08); }
.copilot-bubble.bot { justify-self:start; background:rgba(32,231,255,.10); border-color:rgba(32,231,255,.22); }
.copilot-bubble.user { justify-self:end; background:rgba(59,130,246,.18); border-color:rgba(59,130,246,.32); }

/* Native-feeling APK/PWA command visuals */
.app-command-hero { position:relative; min-height:238px; grid-template-columns:1fr; align-content:end; isolation:isolate; border-color:rgba(32,231,255,.28); background:linear-gradient(145deg, rgba(4,10,18,.98), rgba(10,19,31,.96)); }
.app-command-hero::after { content:""; position:absolute; inset:auto -18% -42% 26%; height:210px; border-radius:999px; background:radial-gradient(circle, rgba(251,113,133,.20), transparent 62%); filter:blur(18px); z-index:-1; }
.app-command-canvas { position:absolute; inset:0; width:100%; height:100%; opacity:.92; z-index:-1; }
.app-hero-copy { position:relative; max-width:21rem; padding-top:2.6rem; text-shadow:0 2px 18px rgba(0,0,0,.55); }
.app-hero-copy h2 { font-size:1.55rem; line-height:1.03; margin:.6rem 0; }
.app-agent-stack { display:flex; flex-wrap:wrap; gap:.42rem; margin-top:.75rem; }
.app-agent-stack span { border-radius:999px; padding:.38rem .56rem; color:#dffaff; background:rgba(2,7,13,.62); border:1px solid rgba(32,231,255,.22); box-shadow:0 0 22px rgba(32,231,255,.08); font-size:.7rem; font-weight:900; text-transform:uppercase; letter-spacing:.05em; backdrop-filter:blur(10px); }
.app-panel-head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:.8rem; }
.app-panel-head h2 { margin:.18rem 0 0; }
.app-live-dot { display:inline-flex; align-items:center; gap:.35rem; padding:.4rem .62rem; border-radius:999px; color:#bbf7d0; background:rgba(52,211,153,.12); border:1px solid rgba(52,211,153,.36); font-size:.72rem; font-weight:900; }
.app-live-dot::before { content:""; width:.48rem; height:.48rem; border-radius:50%; background:#34d399; box-shadow:0 0 18px #34d399; }
.app-report-native { border-color:rgba(32,231,255,.25); background:linear-gradient(145deg, rgba(10,19,31,.98), rgba(3,8,15,.97)); }
.app-channel-picker { display:grid; grid-template-columns:repeat(3, 1fr); gap:.55rem; margin-bottom:.8rem; padding:.35rem; border-radius:22px; background:rgba(2,7,13,.52); border:1px solid rgba(255,255,255,.08); }
.app-channel-picker button { min-height:58px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.18rem; border:0; border-radius:18px; color:#91a4b7; background:transparent; font-weight:900; font-size:.73rem; }
.app-channel-picker i { font-size:1.12rem; color:#dffaff; }
.app-channel-picker button.active { color:#fff; background:linear-gradient(145deg, rgba(32,231,255,.18), rgba(59,130,246,.13)); box-shadow:inset 0 0 0 1px rgba(32,231,255,.32), 0 12px 26px rgba(32,231,255,.10); }
.app-native-textarea { min-height:132px; resize:vertical; line-height:1.38; }
.app-intake-preview { display:grid; grid-template-columns:1fr; gap:.55rem; margin-top:.75rem; }
.app-intake-preview > div { display:flex; justify-content:space-between; gap:.75rem; align-items:center; padding:.74rem .82rem; border-radius:18px; background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.08); }
.app-intake-preview span { color:var(--civic-muted); text-transform:uppercase; letter-spacing:.08em; font-size:.67rem; font-weight:900; }
.app-intake-preview strong { color:#fff; text-align:right; font-size:.86rem; }
.app-submit-native { min-height:52px; box-shadow:0 18px 45px rgba(32,231,255,.22), inset 0 1px 0 rgba(255,255,255,.34); }
.app-submit-result { display:grid; gap:1rem; padding:1rem; border-radius:24px; background:radial-gradient(circle at 0% 0%, rgba(52,211,153,.16), transparent 14rem), linear-gradient(145deg, rgba(8,18,29,.98), rgba(2,7,13,.95)); border:1px solid rgba(52,211,153,.32); box-shadow:0 18px 55px rgba(0,0,0,.42); }
.app-submit-result strong { display:block; color:#fff; font-size:1.45rem; letter-spacing:-.02em; }
.app-submit-result p { margin:.35rem 0 .7rem; }
.app-submit-result ol { margin:0; padding-left:1.15rem; display:grid; gap:.42rem; }
.app-submit-result li { color:#d8e7f0; font-size:.9rem; }
.app-install-strip { display:flex; justify-content:space-between; align-items:center; gap:.8rem; margin:1rem 0; padding:.9rem; border-radius:22px; background:linear-gradient(145deg, rgba(251,191,36,.10), rgba(32,231,255,.07)); border:1px solid rgba(251,191,36,.24); box-shadow:0 16px 38px rgba(0,0,0,.28); }
.app-install-strip strong { display:block; color:#fff; }
.app-install-strip span { display:block; color:var(--civic-muted); font-size:.82rem; line-height:1.25; }
.app-install-strip .btn { white-space:nowrap; }
@media (max-width: 430px) { .app-install-strip { align-items:flex-start; flex-direction:column; } .app-install-strip .btn { width:100%; } }
@media (min-width: 460px) { .app-intake-preview { grid-template-columns:repeat(3, 1fr); } .app-intake-preview > div { display:block; } .app-intake-preview strong { display:block; text-align:left; margin-top:.18rem; } }
@media (prefers-reduced-motion: reduce) { .app-command-canvas { display:none; } .app-command-hero { background:radial-gradient(circle at 50% 20%, rgba(32,231,255,.18), transparent 13rem), linear-gradient(145deg, rgba(4,10,18,.98), rgba(10,19,31,.96)); } }

/* Hackathon cinematic command platform */
.hack-page { --h-bg:#04060c; --h-panel:rgba(10,18,32,.78); --h-line:rgba(103,232,249,.18); --h-cyan:#20e7ff; --h-blue:#3b82f6; --h-amber:#fbbf24; --h-red:#fb7185; --h-violet:#b86bff; background:radial-gradient(circle at 20% -8%, rgba(32,231,255,.13), transparent 30rem), radial-gradient(circle at 82% 6%, rgba(184,107,255,.10), transparent 30rem), #04060c; color:#f8fbff; min-height:100vh; overflow:hidden; }
.hack-page::before { content:""; position:fixed; inset:0; pointer-events:none; background-image:linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size:54px 54px; mask-image:linear-gradient(to bottom, rgba(0,0,0,.75), transparent 82%); }
.hack-nav { position:fixed; z-index:80; top:18px; left:50%; transform:translateX(-50%); width:min(1220px, calc(100% - 28px)); display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.7rem .9rem .7rem 1.1rem; border:1px solid var(--h-line); border-radius:999px; background:rgba(4,8,15,.78); backdrop-filter:blur(18px); box-shadow:0 18px 55px rgba(0,0,0,.48); }
.hack-brand { display:flex; align-items:center; gap:.65rem; color:#fff; }
.hack-brand span { width:28px; height:28px; border-radius:10px; background:radial-gradient(circle, #fff, var(--h-cyan)); box-shadow:0 0 28px rgba(32,231,255,.45); }
.hack-brand em { color:#91a4b7; font-style:normal; font-size:.68rem; text-transform:uppercase; letter-spacing:.14em; }
.hack-navlinks { display:flex; gap:1.2rem; }
.hack-navlinks a { color:#b9c7d4; font-weight:800; font-size:.9rem; }
.hack-nav-cta, .hack-btn { display:inline-flex; align-items:center; justify-content:center; gap:.45rem; border-radius:999px; padding:.82rem 1rem; font-weight:900; text-decoration:none; white-space:nowrap; }
.hack-nav-cta, .hack-btn.primary { background:linear-gradient(135deg, #20e7ff, #3b82f6); color:#021018; box-shadow:0 18px 45px rgba(32,231,255,.22); }
.hack-btn.ghost { color:#e9fbff; border:1px solid rgba(103,232,249,.28); background:rgba(255,255,255,.045); }
.hack-btn.amber { color:#fff3c4; border:1px solid rgba(251,191,36,.45); background:rgba(251,191,36,.12); }
.hack-hero { position:relative; min-height:100vh; display:grid; grid-template-columns:minmax(0, 1fr) minmax(320px, 440px); gap:3rem; align-items:center; width:min(1220px, calc(100% - 40px)); margin:0 auto; padding:8rem 0 5rem; }
#hackNetwork { position:absolute; inset:0; width:100%; height:100%; opacity:.95; }
.hack-hero-shade { position:absolute; inset:-8rem -20vw 0; background:radial-gradient(circle at 30% 40%, transparent 18rem, rgba(4,6,12,.45) 60%), linear-gradient(180deg, transparent 62%, #04060c); pointer-events:none; }
.hack-hero-copy, .hack-command-card { position:relative; z-index:2; }
.hack-kicker { display:inline-flex; align-items:center; gap:.55rem; padding:.45rem .85rem; border:1px solid rgba(32,231,255,.42); border-radius:999px; color:#bff8ff; background:rgba(32,231,255,.08); font-size:.72rem; font-weight:950; text-transform:uppercase; letter-spacing:.14em; }
.hack-kicker span { width:7px; height:7px; border-radius:50%; background:#34d399; box-shadow:0 0 14px #34d399; }
.hack-hero h1 { margin:.9rem 0 .2rem; font-size:clamp(4rem, 10vw, 7.6rem); line-height:.86; letter-spacing:-.06em; }
.hack-hero h1 span, .hack-center h2 span { color:var(--h-cyan); text-shadow:0 0 30px rgba(32,231,255,.42); }
.hack-hero h2 { max-width:650px; font-size:clamp(1.35rem, 2.5vw, 2.15rem); line-height:1.1; letter-spacing:-.035em; }
.hack-hero p { max-width:590px; color:#b9c7d4; font-size:1.08rem; line-height:1.65; }
.hack-actions { display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.3rem; }
.hack-actions.compact { margin:0; justify-content:flex-end; }
.hack-pipeline { position:relative; overflow:hidden; display:flex; flex-wrap:wrap; align-items:center; gap:.55rem; margin-top:1.6rem; padding:.8rem; border:1px solid var(--h-line); border-radius:18px; background:rgba(4,8,15,.68); }
.hack-pipeline::before { content:""; position:absolute; inset:0 auto 0 -30%; width:24%; background:linear-gradient(90deg, transparent, rgba(32,231,255,.16), transparent); animation:hackSweep 4s linear infinite; }
.hack-pipeline b { position:relative; color:#dffaff; font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; }
.hack-pipeline i, .hack-arch i { width:22px; height:1px; background:linear-gradient(90deg, transparent, var(--h-cyan)); }
.hack-command-card { padding:1.1rem; border:1px solid var(--h-line); border-radius:26px; background:linear-gradient(145deg, rgba(13,24,38,.82), rgba(4,8,15,.88)); box-shadow:0 30px 90px rgba(0,0,0,.55); backdrop-filter:blur(12px); }
.hack-command-card small, .hack-section small, .hack-live-paths small, .hack-agent-grid small { color:var(--h-cyan); text-transform:uppercase; letter-spacing:.14em; font-weight:950; font-size:.68rem; }
.hack-command-card h3 { font-size:2rem; margin:.35rem 0 1rem; }
.hack-signal-row { display:grid; grid-template-columns:36px minmax(0,1fr) auto; gap:.7rem; align-items:center; padding:.75rem; margin:.55rem 0; border:1px solid rgba(255,255,255,.08); border-radius:16px; background:rgba(255,255,255,.045); }
.hack-signal-row span { display:grid; place-items:center; width:36px; height:36px; border-radius:12px; color:#021018; background:var(--h-cyan); font-weight:950; }
.hack-signal-row p { margin:0; color:#eef8ff; font-weight:850; }
.hack-signal-row em { color:#fbbf24; font-style:normal; font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; }
.hack-section, .hack-live-paths { position:relative; z-index:2; width:min(1220px, calc(100% - 40px)); margin:0 auto; padding:5.5rem 0; }
.hack-live-paths { display:grid; grid-template-columns:minmax(0,1fr) minmax(320px, auto); gap:2rem; align-items:center; padding:2rem; border:1px solid var(--h-line); border-radius:28px; background:linear-gradient(145deg, rgba(13,24,38,.84), rgba(4,8,15,.88)); box-shadow:0 30px 90px rgba(0,0,0,.42); }
.hack-live-paths h2, .hack-section h2 { font-size:clamp(2rem, 4vw, 4rem); line-height:.98; letter-spacing:-.05em; margin:.5rem 0; }
.hack-live-paths p, .hack-section p { color:#b9c7d4; line-height:1.62; }
.hack-partner-strip { display:flex; flex-wrap:wrap; gap:.55rem; margin-top:1rem; }
.hack-partner-strip span { padding:.55rem .75rem; border-radius:999px; color:#dffaff; background:rgba(32,231,255,.07); border:1px solid rgba(32,231,255,.18); font-size:.82rem; }
.hack-partner-strip b { color:var(--h-cyan); }
.hack-two { display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1fr); gap:3rem; align-items:center; }
.hack-chaos { min-height:360px; position:relative; border:1px solid rgba(251,113,133,.18); border-radius:28px; background:radial-gradient(circle, rgba(251,113,133,.08), transparent 65%); }
.hack-chaos article, .hack-chaos strong { position:absolute; max-width:250px; padding:1rem; border-radius:18px; background:rgba(13,24,38,.86); border:1px solid rgba(255,255,255,.1); box-shadow:0 24px 60px rgba(0,0,0,.36); }
.hack-chaos article:nth-child(1){left:6%;top:12%}.hack-chaos article:nth-child(2){right:5%;top:36%}.hack-chaos article:nth-child(3){left:16%;bottom:12%}.hack-chaos strong{right:12%;bottom:8%;color:#fecdd3;border-color:rgba(251,113,133,.42);background:rgba(251,113,133,.10)}
.hack-center { text-align:center; max-width:820px; margin:0 auto 2.5rem; }
.hack-pillars, .hack-card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:1rem; }
.hack-pillars article, .hack-card-grid article { padding:1.25rem; border-radius:22px; border:1px solid var(--h-line); background:linear-gradient(145deg, rgba(13,24,38,.84), rgba(4,8,15,.88)); box-shadow:0 24px 70px rgba(0,0,0,.28); }
.hack-pillars b { color:var(--h-cyan); font-family:monospace; }
.hack-agent-grid { position:relative; display:grid; grid-template-columns:repeat(5, minmax(220px, 1fr)); gap:1rem; }
.hack-agent-grid::before { content:"Band Coordination Layer"; position:absolute; left:2rem; right:2rem; top:50%; transform:translateY(-50%); height:54px; display:grid; place-items:center; border-radius:999px; border:1px solid rgba(32,231,255,.34); background:linear-gradient(90deg, rgba(32,231,255,.04), rgba(32,231,255,.16), rgba(251,191,36,.10), rgba(251,113,133,.12), rgba(184,107,255,.10)); color:#bff8ff; font-size:.68rem; font-weight:950; letter-spacing:.16em; text-transform:uppercase; pointer-events:none; box-shadow:0 0 44px rgba(32,231,255,.12); }
.hack-agent-grid article { position:relative; z-index:1; min-height:330px; display:flex; flex-direction:column; padding:1.15rem; border:1px solid rgba(103,232,249,.20); border-radius:24px; background:linear-gradient(180deg, rgba(13,24,38,.90), rgba(4,8,15,.94)); box-shadow:0 28px 80px rgba(0,0,0,.38); overflow:hidden; }
.hack-agent-grid article::after { content:""; position:absolute; inset:auto 1.2rem 1.2rem; height:3px; border-radius:999px; background:linear-gradient(90deg, var(--h-cyan), transparent); box-shadow:0 0 20px rgba(32,231,255,.3); }
.hack-agent-grid article:nth-child(2)::after{background:linear-gradient(90deg,var(--h-amber),transparent)}.hack-agent-grid article:nth-child(3)::after{background:linear-gradient(90deg,var(--h-red),transparent)}.hack-agent-grid article:nth-child(4)::after{background:linear-gradient(90deg,var(--h-blue),transparent)}.hack-agent-grid article:nth-child(5)::after{background:linear-gradient(90deg,var(--h-violet),transparent)}
.hack-agent-grid b { width:44px; height:44px; display:grid; place-items:center; border-radius:15px; background:rgba(32,231,255,.14); color:var(--h-cyan); border:1px solid rgba(32,231,255,.34); font-family:monospace; }
.hack-agent-grid article:nth-child(2) b{background:rgba(251,191,36,.14);color:var(--h-amber);border-color:rgba(251,191,36,.34)}.hack-agent-grid article:nth-child(3) b{background:rgba(251,113,133,.14);color:var(--h-red);border-color:rgba(251,113,133,.34)}.hack-agent-grid article:nth-child(4) b{background:rgba(59,130,246,.14);color:#93c5fd;border-color:rgba(59,130,246,.34)}.hack-agent-grid article:nth-child(5) b{background:rgba(184,107,255,.14);color:var(--h-violet);border-color:rgba(184,107,255,.34)}
.hack-agent-grid h3 { font-size:1.15rem; margin:1rem 0 .2rem; letter-spacing:-.02em; }
.hack-agent-grid p { margin:.55rem 0 0; font-size:.88rem; }
.hack-agent-grid em { margin-top:auto; padding-top:1rem; color:#e9fbff; font-style:normal; font-weight:900; font-size:.82rem; }
.hack-demo { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:3rem; align-items:center; }
.hack-demo ol { list-style:none; padding:0; margin:0; display:grid; gap:.8rem; }
.hack-demo li { display:grid; grid-template-columns:120px minmax(0,1fr); gap:1rem; padding:1rem; border-radius:18px; border:1px solid var(--h-line); background:rgba(255,255,255,.04); }
.hack-demo b { color:var(--h-cyan); }
.hack-card-grid.three { grid-template-columns:repeat(3, minmax(0, 1fr)); }
.hack-arch { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.75rem; padding:1.3rem; border:1px solid var(--h-line); border-radius:26px; background:rgba(4,8,15,.72); }
.hack-arch span { padding:.85rem 1rem; border-radius:999px; background:rgba(32,231,255,.08); border:1px solid rgba(32,231,255,.18); font-weight:900; }
.hack-footer { position:relative; z-index:2; width:min(1220px, calc(100% - 40px)); margin:0 auto 5rem; padding:2rem; border:1px solid var(--h-line); border-radius:28px; background:linear-gradient(145deg, rgba(13,24,38,.84), rgba(4,8,15,.9)); }
@keyframes hackSweep { to { left:130%; } }
@media (max-width: 1100px) { .hack-hero, .hack-two, .hack-demo, .hack-live-paths { grid-template-columns:1fr; } .hack-command-card { max-width:560px; } .hack-agent-grid { grid-template-columns:1fr; } .hack-agent-grid::before { display:none; } .hack-card-grid.three { grid-template-columns:1fr; } }
@media (max-width: 760px) { .hack-navlinks { display:none; } .hack-nav { top:10px; } .hack-hero { padding-top:7rem; } .hack-brand em, .hack-nav-cta { display:none; } .hack-demo li { grid-template-columns:1fr; } .hack-actions.compact { justify-content:flex-start; } }
.band-command-console { padding-top:1.25rem !important; }
.band-command-nav { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.8rem 1rem; border:1px solid rgba(103,232,249,.18); border-radius:24px; background:rgba(4,8,15,.76); backdrop-filter:blur(16px); box-shadow:0 20px 55px rgba(0,0,0,.35); }
@media (max-width: 760px) { .band-command-nav { align-items:flex-start; flex-direction:column; } }