:root{
    --red:#9b111e;
    --dark-red:#740b14;
    --navy:#0f172a;
    --blue:#1e3a8a;
    --bg:#f3f5f8;
    --card:#ffffff;
    --text:#1f2937;
    --muted:#64748b;
    --line:#e5e7eb;
    --soft-red:#fff1f2;
    --soft-blue:#eff6ff;
    --soft-yellow:#fffbeb;
    --green:#15803d;
}

*{box-sizing:border-box}
body{
    margin:0;
    font-family:Arial,Helvetica,sans-serif;
    background:var(--bg);
    color:var(--text);
}
a{color:inherit}
.container{
    width:min(1240px, calc(100% - 34px));
    margin:0 auto;
}
.topbar{
    background:#fff;
    border-bottom:1px solid var(--line);
    position:sticky;
    top:0;
    z-index:20;
}
.nav{
    min-height:82px;
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    padding:12px 0;
}
.logo-link{
    display:flex;
    align-items:center;
    flex-shrink:0;
}
.logo-link img{
    height:64px;
    width:auto;
    display:block;
}
.nav-links{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:18px;
    font-size:14px;
    font-weight:800;
    flex-wrap:wrap;
    margin-left:auto;
}
.nav-links a{
    text-decoration:none;
    color:#334155;
}
.nav-links a:hover{color:var(--red)}
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    border:0;
    border-radius:10px;
    padding:11px 15px;
    font-weight:900;
    cursor:pointer;
}
.btn-primary{
    background:var(--red);
    color:#fff;
}
.btn-primary:hover{background:var(--dark-red)}
.btn-light{
    background:#fff;
    color:var(--red);
}
.btn-outline{
    border:1px solid rgba(255,255,255,.5);
    color:#fff;
    background:rgba(255,255,255,.12);
}
.hero{
    background:linear-gradient(135deg, var(--red), var(--dark-red) 62%, #3b0710);
    color:#fff;
    padding:42px 0 48px;
}
.hero-flow-wrap{
    text-align:center;
}
.kicker{
    color:#fde68a;
    text-transform:uppercase;
    letter-spacing:.13em;
    font-size:12px;
    font-weight:900;
}
.hero h1{
    margin:10px auto 26px;
    max-width:820px;
    font-size:42px;
    line-height:1.05;
    letter-spacing:-.035em;
}
.hero-bubbles{
    display:grid;
    grid-template-columns:1fr auto 1fr auto 1fr;
    align-items:center;
    gap:18px;
}
.hero-bubble{
    width:min(100%, 265px);
    aspect-ratio:1;
    justify-self:center;
    border-radius:50%;
    background:#ffffff;
    color:#0f172a;
    border:8px solid rgba(255,255,255,.22);
    box-shadow:0 18px 42px rgba(15,23,42,.22);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:26px;
    text-align:center;
}
.hero-bubble-number{
    width:38px;
    height:38px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:var(--red);
    color:#ffffff;
    font-weight:900;
    margin-bottom:12px;
}
.hero-bubble strong{
    display:block;
    color:var(--navy);
    font-size:21px;
    line-height:1.12;
}
.hero-bubble span{
    display:block;
    color:#475569;
    font-size:14px;
    line-height:1.38;
    margin-top:9px;
}
.hero-bubble-arrow{
    width:54px;
    height:2px;
    background:rgba(255,255,255,.62);
    position:relative;
}
.hero-bubble-arrow:after{
    content:"";
    position:absolute;
    right:-2px;
    top:50%;
    width:12px;
    height:12px;
    border-top:2px solid rgba(255,255,255,.72);
    border-right:2px solid rgba(255,255,255,.72);
    transform:translateY(-50%) rotate(45deg);
}
.hero-actions{
    display:flex;
    justify-content:center;
    gap:12px;
    flex-wrap:wrap;
    margin-top:26px;
}
.date-card{
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.22);
    border-radius:18px;
    padding:20px;
}
.date-card .big{
    font-size:34px;
    font-weight:900;
}
.date-card .sub{
    opacity:.88;
    margin-top:5px;
}
.system-status{
    margin-top:14px;
    background:rgba(255,255,255,.14);
    border:1px solid rgba(255,255,255,.25);
    border-radius:14px;
    padding:13px;
    line-height:1.45;
    font-size:13px;
}
.stats{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:14px;
    margin-top:-24px;
    position:relative;
    z-index:2;
}
.stat{
    background:#fff;
    border:1px solid var(--line);
    border-radius:16px;
    padding:18px;
    box-shadow:0 8px 24px rgba(15,23,42,.08);
}
.stat .num{
    font-size:31px;
    font-weight:900;
    color:var(--navy);
}
.stat .label{
    color:var(--muted);
    font-size:13px;
    margin-top:4px;
}
.main-grid{
    display:grid;
    grid-template-columns:1.35fr .75fr;
    gap:18px;
    margin:22px 0 40px;
}
.card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:18px;
    box-shadow:0 8px 22px rgba(15,23,42,.06);
    overflow:hidden;
}
.card-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:17px 18px;
    border-bottom:1px solid var(--line);
}
.card-header h2{
    margin:0;
    font-size:20px;
    color:var(--navy);
}
.card-header span{
    color:var(--muted);
    font-size:13px;
}
.card-body{
    padding:18px;
}
.widget-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
}
.call-row{
    display:grid;
    grid-template-columns:110px 1fr auto;
    gap:12px;
    align-items:start;
    padding:14px 0;
    border-bottom:1px solid var(--line);
}
.call-row:last-child{border-bottom:0}
.call-row.fire-row{
    background:var(--soft-red);
    margin-left:-18px;
    margin-right:-18px;
    padding-left:18px;
    padding-right:18px;
}
.badge{
    display:inline-block;
    border-radius:999px;
    padding:5px 9px;
    font-size:12px;
    font-weight:900;
    background:#e2e8f0;
}
.badge.fire{
    background:#b91c1c;
    color:#fff;
}
.badge.open{
    background:#dcfce7;
    color:#166534;
}
.call-title{
    font-weight:900;
    color:var(--red);
}
.call-meta{
    margin-top:4px;
    color:var(--muted);
    font-size:13px;
}
.call-id{
    font-size:12px;
    color:var(--muted);
    text-align:right;
    min-width:110px;
}
.call-id a{
    display:inline-block;
    margin-top:5px;
    color:var(--red);
    font-weight:900;
    text-decoration:none;
}
.call-id a:hover{text-decoration:underline}
.news-item{
    padding:15px 0;
    border-bottom:1px solid var(--line);
}
.news-item:last-child{border-bottom:0}
.news-cat{
    color:var(--red);
    font-size:12px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.08em;
}
.news-item h3{
    margin:5px 0 6px;
    font-size:18px;
    color:var(--navy);
}
.news-item p{
    margin:0;
    color:var(--muted);
    line-height:1.45;
    font-size:14px;
}
.weather-card{
    background:linear-gradient(135deg,#eff6ff,#fff);
}
.weather-now{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:14px;
}
.weather-temp{
    font-size:50px;
    font-weight:900;
    color:var(--blue);
}
.weather-cond{
    font-weight:900;
    color:var(--navy);
}
.weather-risk{
    margin-top:14px;
    background:#fff7ed;
    border:1px solid #fed7aa;
    color:#9a3412;
    padding:12px;
    border-radius:12px;
    font-weight:800;
    font-size:14px;
}
.threshold-ad{
    background:
        radial-gradient(circle at top right, rgba(251,191,36,.25), transparent 35%),
        linear-gradient(135deg,#111827,#1e293b);
    color:#fff;
}
.threshold-ad h2{
    color:#fff;
}
.threshold-ad p{
    color:#d1d5db;
    line-height:1.55;
}
.threshold-logo{
    font-size:28px;
    font-weight:900;
    letter-spacing:-.04em;
    margin-bottom:8px;
}
.threshold-logo img{
    max-width:190px;
    height:auto;
}
.threshold-screen{
    float:right;
    width:92px;
    margin:0 0 12px 16px;
}
.threshold-screen img{
    display:block;
    width:100%;
    height:auto;
    filter:drop-shadow(0 12px 18px rgba(0,0,0,.28));
}
.threshold-ad .card-body::after{
    content:"";
    display:block;
    clear:both;
}
.threshold-points{
    list-style:none;
    padding:0;
    margin:16px 0;
}
.threshold-points li{
    margin:10px 0;
    color:#e5e7eb;
}
.alert-form{
    display:grid;
    gap:10px;
}
.alert-form input,
.alert-form select{
    width:100%;
    padding:12px 13px;
    border:1px solid #cbd5e1;
    border-radius:10px;
    font-size:14px;
}
.sidebar-stack{
    display:grid;
    gap:18px;
}
.editorial{
    margin:36px 0 54px;
}
.editorial-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
}
.editorial-card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:18px;
    padding:22px;
    box-shadow:0 8px 22px rgba(15,23,42,.06);
}
.editorial-card .icon{
    font-size:28px;
    margin-bottom:12px;
}
.editorial-card h3{
    margin:0 0 8px;
    color:var(--navy);
}
.editorial-card p{
    margin:0;
    color:var(--muted);
    line-height:1.5;
}
.footer{
    border-top:1px solid var(--line);
    padding:28px 0;
    color:var(--muted);
    font-size:14px;
}
.footer-flex{
    display:flex;
    justify-content:space-between;
    gap:18px;
}
@media(max-width:980px){
    .hero-grid,.main-grid,.widget-grid,.editorial-grid{
        grid-template-columns:1fr;
    }
    .hero-bubbles{
        grid-template-columns:1fr;
        gap:12px;
    }
    .hero-bubble{
        width:min(100%, 320px);
        aspect-ratio:auto;
        min-height:210px;
    }
    .hero-bubble-arrow{
        width:2px;
        height:32px;
        justify-self:center;
    }
    .hero-bubble-arrow:after{
        right:auto;
        left:50%;
        top:auto;
        bottom:-2px;
        transform:translateX(-50%) rotate(135deg);
    }
    .stats{
        grid-template-columns:repeat(2,1fr);
    }
}
@media(max-width:720px){
    .nav{
        flex-direction:column;
        align-items:flex-start;
        min-height:auto;
        padding:12px 0;
    }
    .logo-link img{
        height:52px;
    }
    .nav-links{
        width:100%;
        justify-content:flex-start;
        gap:10px;
    }
    .hero h1{
        font-size:32px;
    }
    .hero{
        padding:34px 0 42px;
    }
    .hero-bubble{
        min-height:190px;
        padding:22px;
    }
    .hero-bubble strong{
        font-size:19px;
    }
    .stats{
        grid-template-columns:1fr;
        margin-top:18px;
    }
    .call-row{
        grid-template-columns:1fr;
    }
    .call-id{
        text-align:left;
    }
    .footer-flex{
        display:block;
    }
}

.weather-risk{
    margin-top:14px;
    padding:12px;
    border-radius:12px;
    font-weight:800;
    font-size:14px;
    line-height:1.4;
}

.weather-risk.green{
    background:#dcfce7;
    border:1px solid #22c55e;
    color:#166534;
}

.weather-risk.yellow{
    background:#fef9c3;
    border:1px solid #facc15;
    color:#854d0e;
}

.weather-risk.red{
    background:#fee2e2;
    border:1px solid #dc2626;
    color:#991b1b;
}

.call-section-title{
    margin:0 0 10px;
    font-size:15px;
    color:var(--navy);
    text-transform:uppercase;
    letter-spacing:.08em;
}

.closed-title{
    margin-top:22px;
}

.call-active{
    background:#fff1f2;
    margin-left:-18px;
    margin-right:-18px;
    padding-left:18px;
    padding-right:18px;
    border-left:5px solid #dc2626;
}

.call-monitoring{
    background:#fffbeb;
    margin-left:-18px;
    margin-right:-18px;
    padding-left:18px;
    padding-right:18px;
    border-left:5px solid #f59e0b;
}

.call-closed{
    background:#f8fafc;
    margin-left:-18px;
    margin-right:-18px;
    padding-left:18px;
    padding-right:18px;
    opacity:.82;
    border-left:5px solid #94a3b8;
}

.call-ok{
    background:#f0fdf4;
    margin-left:-18px;
    margin-right:-18px;
    padding-left:18px;
    padding-right:18px;
    border-left:5px solid #22c55e;
}

.badge.closed{
    background:#e2e8f0;
    color:#475569;
}

.status-pill{
    display:inline-block;
    border-radius:999px;
    padding:3px 7px;
    font-size:11px;
    font-weight:900;
}

.status-pill.active{
    background:#dc2626;
    color:white;
}

.status-pill.closed{
    background:#cbd5e1;
    color:#334155;
}

.status-pill.qualified{
    background:#b91c1c;
    color:#fff;
}

.status-pill.monitoring{
    background:#fef3c7;
    color:#92400e;
}

.status-pill.unqualified{
    background:#e2e8f0;
    color:#475569;
}

.qual-note{
    display:inline-block;
    margin-left:6px;
    color:#64748b;
    font-size:12px;
}

.news-item{
    padding:18px 0;
    border-bottom:1px solid #e5e7eb;
}

.news-item:last-child{
    border-bottom:none;
}

.news-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:8px;
}

.news-cat{
    display:inline-block;
    background:#eef2ff;
    color:#1e3a8a;
    padding:4px 10px;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
}

.news-date{
    color:#64748b;
    font-size:12px;
}

.news-item h3{
    margin:6px 0 10px;
    font-size:18px;
    line-height:1.35;
}

.news-item h3 a{
    color:#0f172a;
    text-decoration:none;
}

.news-item h3 a:hover{
    color:#9b111e;
}

.news-item p{
    margin:0 0 10px;
    color:#475569;
    line-height:1.6;
}

.news-source{
    font-size:12px;
    color:#64748b;
}
.stat-chart{

    position:relative;
    overflow:hidden;
    min-height:135px;
    padding:0;

}

.stat-chart canvas{

    position:absolute;

    left:0;
    top:0;

    width:100%!important;
    height:100%!important;

    z-index:1;

}

.stat-overlay{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    justify-content:center;

    padding:18px;

    z-index:5;

    background:
        linear-gradient(
            to right,
            rgba(255,255,255,.93) 0%,
            rgba(255,255,255,.78) 40%,
            rgba(255,255,255,.18) 100%
        );

}

.stat-overlay .num{

    font-size:40px;
    font-weight:900;
    color:#0f172a;

    line-height:1;

    text-shadow:0 2px 6px rgba(255,255,255,.8);

}

.stat-overlay .label{

    margin-top:8px;

    font-size:13px;

    color:#64748b;

    font-weight:700;

}
.logo-link{
    display:flex;
    flex-direction:column;
    text-decoration:none;
}

.logo-link > img{
    height:52px;
    width:auto;
}

.brand-credit{
    display:flex;
    gap:6px;
    margin-top:3px;
    font-size:10px;
color:rgba(0,0,0,.75);
    font-weight:600;
    letter-spacing:.03em;
}

.brand-credit img{
    height:14px;
    width:auto;
    opacity:.9;
    
}