/* ============================================================
   CivicBounce — Emergency Broadcast Theme
   ============================================================ */
:root {
    --cb-dark:    #0B0F19;
    --cb-slate:   #1E293B;
    --cb-orange:  #FF5A1F;
    --cb-green:   #10B981;
    --cb-blue:    #2563EB;
    --cb-text:    #E2E8F0;
    --cb-muted:   #94A3B8;
    --font-mono:  'Share Tech Mono', monospace;
    --font-sans:  'Plus Jakarta Sans', sans-serif;
    --font-disp:  'Space Grotesk', sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { background-color: var(--cb-dark); color: var(--cb-text); font-family: var(--font-sans); scroll-behavior: smooth; overflow-x: hidden; }
h1,h2,h3,h4 { font-family: var(--font-disp); font-weight: 800; }
.font-mono { font-family: var(--font-mono) !important; }

/* Broadcast Banner */
.broadcast-banner { background: var(--cb-orange); color:#fff; font-family:var(--font-mono); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; padding:.45rem 1rem; text-align:center; position:sticky; top:0; z-index:1000; }
.broadcast-dot { display:inline-block; width:8px; height:8px; background:#fff; border-radius:50%; margin-right:.5rem; animation:blink 1.2s ease-in-out infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.2} }

/* Navbar */
.cb-nav { background:rgba(11,15,25,.92); backdrop-filter:blur(8px); border-bottom:1px solid rgba(255,255,255,.06); padding:1rem 0; }
.cb-logo-badge { width:40px; height:40px; background:var(--cb-orange); border-radius:8px; display:inline-flex; align-items:center; justify-content:center; font-family:var(--font-disp); font-weight:800; font-size:1rem; color:#fff; }
.cb-logo-text { font-family:var(--font-disp); font-weight:800; font-size:1.4rem; color:#fff; }
.cb-logo-text span { color:var(--cb-orange); }
.channel-badge { font-family:var(--font-mono); font-size:.7rem; color:var(--cb-green); background:rgba(16,185,129,.08); border:1px solid rgba(16,185,129,.3); border-radius:999px; padding:.3rem .8rem; text-transform:uppercase; letter-spacing:.1em; }
.channel-badge i { animation:blink 2s infinite; }

/* Hero */
.hero-section { min-height:100vh; background:linear-gradient(to bottom,rgba(11,15,25,.55) 0%,rgba(11,15,25,.65) 40%,rgba(11,15,25,.88) 75%,rgba(11,15,25,.97) 100%), url('../hero_bg.png') center top/cover no-repeat; display:flex; flex-direction:column; justify-content:center; padding:5rem 0 3rem; }

/* Signal Block */
.signal-block { background:rgba(30,41,59,.6); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:1.1rem 1.4rem; font-family:var(--font-mono); font-size:.75rem; color:var(--cb-muted); }
.signal-label { text-transform:uppercase; letter-spacing:.1em; margin-bottom:.2rem; font-size:.68rem; }
.signal-value { font-size:.9rem; font-weight:700; color:var(--cb-text); }
.signal-value.green { color:var(--cb-green); animation:blink 2s infinite; }
.signal-divider { border-left:1px solid rgba(255,255,255,.1); }

/* Phoenix */
.phoenix-card { background:transparent !important; background-color:transparent !important; border:none !important; box-shadow:none !important; padding:2rem 1.5rem; text-align:center; position:relative; overflow:visible; }
.phoenix-img { width:260px; height:260px; object-fit:contain; filter:drop-shadow(0 12px 28px rgba(255,90,31,.3)); animation:bounce-float 4s ease-in-out infinite; position:relative; z-index:1; }
@keyframes bounce-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }

/* Pulse Rings */
.pulse-rings { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; z-index:0; }
.pulse-ring { position:absolute; border-radius:50%; border:2px solid var(--cb-orange); opacity:0; animation:ring-pulse 3s ease-out infinite; }
.pulse-ring:nth-child(1) { width:280px; height:280px; animation-delay:0s; }
.pulse-ring:nth-child(2) { width:340px; height:340px; animation-delay:.8s; border-color:var(--cb-green); }
.pulse-ring:nth-child(3) { width:400px; height:400px; animation-delay:1.6s; }
@keyframes ring-pulse { 0%{transform:scale(.85);opacity:.6} 100%{transform:scale(1.15);opacity:0} }

/* Countdown */
.countdown-section { background:var(--cb-slate); padding:3rem 0; border-top:1px solid rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.06); }
.countdown-unit { background:var(--cb-dark); border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:1.2rem 1.5rem; min-width:90px; text-align:center; }
.countdown-number { font-family:var(--font-mono); font-size:2.4rem; font-weight:700; color:var(--cb-orange); line-height:1; display:block; }
.countdown-label { font-family:var(--font-mono); font-size:.65rem; color:var(--cb-muted); text-transform:uppercase; letter-spacing:.12em; margin-top:.4rem; display:block; }

/* Tags */
.section-tag { display:inline-flex; align-items:center; gap:.4rem; font-family:var(--font-mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.12em; border-radius:999px; padding:.3rem .9rem; margin-bottom:1rem; }
.tag-orange { color:var(--cb-orange); background:rgba(255,90,31,.1); border:1px solid rgba(255,90,31,.25); }
.tag-green  { color:var(--cb-green);  background:rgba(16,185,129,.1); border:1px solid rgba(16,185,129,.25); }
.tag-blue   { color:var(--cb-blue);   background:rgba(37,99,235,.1);  border:1px solid rgba(37,99,235,.25); }

/* Pillars */
.pillar-card { background:rgba(11,15,25,.5); border:1px solid rgba(255,255,255,.07); border-radius:18px; padding:2rem 1.6rem; height:100%; transition:border-color .2s,transform .2s; }
.pillar-card:hover { transform:translateY(-4px); }
.pillar-card.orange:hover { border-color:rgba(255,90,31,.4); }
.pillar-card.green:hover  { border-color:rgba(16,185,129,.4); }
.pillar-card.blue:hover   { border-color:rgba(37,99,235,.4); }
.pillar-icon { width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.2rem; margin-bottom:1.2rem; }
.pillar-card.orange .pillar-icon { background:rgba(255,90,31,.1); color:var(--cb-orange); border:1px solid rgba(255,90,31,.25); }
.pillar-card.green  .pillar-icon { background:rgba(16,185,129,.1); color:var(--cb-green);  border:1px solid rgba(16,185,129,.25); }
.pillar-card.blue   .pillar-icon { background:rgba(37,99,235,.1);  color:var(--cb-blue);   border:1px solid rgba(37,99,235,.25); }

/* Terminal */
.terminal-wrap { background:#0d1117; border:1px solid rgba(255,255,255,.1); border-radius:14px; overflow:hidden; font-family:var(--font-mono); font-size:.82rem; }
.terminal-bar { background:#161b22; padding:.7rem 1rem; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(255,255,255,.07); }
.terminal-body { padding:1.4rem 1.6rem; line-height:2; color:var(--cb-green); }
.terminal-body .ts   { color:#4B5563; }
.terminal-body .warn { color:var(--cb-orange); }
.terminal-body .info { color:#fff; font-weight:700; }
.terminal-body .cmd  { color:var(--cb-muted); }
.terminal-body .out  { color:var(--cb-text); }
.terminal-cursor { display:inline-block; width:8px; height:1em; background:var(--cb-green); vertical-align:text-bottom; animation:blink .9s step-end infinite; }

/* Signup */
.signup-section { background:var(--cb-slate); padding:5rem 0; position:relative; overflow:hidden; }
.signup-section::before { content:''; position:absolute; top:-120px; right:-120px; width:360px; height:360px; background:radial-gradient(circle,rgba(255,90,31,.12) 0%,transparent 70%); pointer-events:none; }
.signup-section::after  { content:''; position:absolute; bottom:-120px; left:-120px; width:360px; height:360px; background:radial-gradient(circle,rgba(37,99,235,.1) 0%,transparent 70%); pointer-events:none; }
.signup-card { background:rgba(11,15,25,.85); border:1px solid rgba(255,255,255,.09); border-radius:24px; padding:2.5rem 2rem; position:relative; z-index:1; }
.cb-label { font-family:var(--font-mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.1em; color:var(--cb-muted); margin-bottom:.4rem; display:block; }
.cb-input { background:#0d1117 !important; border:1px solid rgba(255,255,255,.12) !important; border-radius:10px !important; color:var(--cb-text) !important; padding:.85rem 1rem !important; font-family:var(--font-sans) !important; transition:border-color .2s !important; }
.cb-input:focus { border-color:var(--cb-orange) !important; box-shadow:0 0 0 3px rgba(255,90,31,.15) !important; outline:none !important; }
.cb-input::placeholder { color:#4B5563 !important; }
.cb-btn { background:var(--cb-orange); color:#fff; border:none; border-radius:12px; padding:1rem 1.5rem; font-family:var(--font-disp); font-weight:700; font-size:1rem; width:100%; cursor:pointer; transition:background .15s,transform .1s; }
.cb-btn:hover { background:#e04e18; }
.cb-btn:active { transform:scale(.98); }
.cb-btn:disabled { opacity:.6; cursor:not-allowed; }
.success-icon { width:64px; height:64px; background:rgba(16,185,129,.1); border:1px solid rgba(16,185,129,.3); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.8rem; color:var(--cb-green); margin:0 auto 1rem; }

/* Footer */
.cb-footer { background:var(--cb-dark); border-top:1px solid rgba(255,255,255,.07); padding:3rem 0; font-family:var(--font-mono); font-size:.8rem; color:var(--cb-muted); text-align:center; }
.cb-footer a { color:var(--cb-muted); text-decoration:none; transition:color .15s; }
.cb-footer a:hover { color:var(--cb-orange); }

/* Utility */
.text-orange { color:var(--cb-orange) !important; }
.text-green  { color:var(--cb-green)  !important; }
.text-muted-cb { color:var(--cb-muted) !important; }
.section-pad { padding:5rem 0; }
.field-error { color:#f87171; font-size:.78rem; font-family:var(--font-mono); margin-top:.3rem; }
.cb-input.is-invalid { border-color:#f87171 !important; }
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:var(--cb-dark); }
::-webkit-scrollbar-thumb { background:var(--cb-slate); border-radius:3px; }
#blazor-error-ui { color-scheme:light only; background:lightyellow; bottom:0; box-shadow:0 -1px 2px rgba(0,0,0,.2); display:none; left:0; padding:.6rem 1.25rem .7rem; position:fixed; width:100%; z-index:1000; }
#blazor-error-ui .dismiss { cursor:pointer; position:absolute; right:.75rem; top:.5rem; }