/* ==========================================
                STATUS HERO
========================================== */

.status-hero{

position:relative;

padding:180px 0 110px;

text-align:center;

overflow:hidden;

}

.status-hero::before{

content:"";

position:absolute;

width:550px;
height:550px;

left:50%;
top:-220px;

transform:translateX(-50%);

background:radial-gradient(circle,
rgba(0,212,255,.18),
transparent 72%);

filter:blur(90px);

pointer-events:none;

}

.status-pill{

display:inline-flex;

align-items:center;

gap:12px;

padding:10px 22px;

border-radius:999px;

background:rgba(16,185,129,.12);

border:1px solid rgba(16,185,129,.35);

backdrop-filter:blur(14px);

font-weight:700;

color:#34D399;

margin-bottom:26px;

animation:pulseStatus 2s infinite;

}

.status-pill span{

color:#E5F9FF;

font-weight:600;

}

.status-hero h1{

font-size:clamp(3rem,7vw,5.4rem);

font-weight:900;

line-height:1;

margin-bottom:24px;

letter-spacing:-2px;

}

.status-hero h1 span{

background:var(--gradient);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.status-hero p{

max-width:760px;

margin:auto;

font-size:1.15rem;

line-height:1.8;

color:var(--text-secondary);

}

.status-summary{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:22px;

margin-top:65px;

}

.summary-card{

padding:30px;

border-radius:22px;

background:rgba(255,255,255,.04);

border:1px solid rgba(255,255,255,.08);

backdrop-filter:blur(20px);

transition:.35s;

}

.summary-card:hover{

transform:translateY(-8px);

border-color:rgba(0,212,255,.28);

box-shadow:0 20px 60px rgba(0,212,255,.12);

}

.summary-card h2{

font-size:2.4rem;

font-weight:800;

margin-bottom:10px;

background:var(--gradient);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.summary-card p{

margin:0;

font-size:.95rem;

color:var(--text-secondary);

}

/* ==========================================
                ANIMATION
========================================== */

@keyframes pulseStatus{

0%{

box-shadow:0 0 0 rgba(16,185,129,0);

}

50%{

box-shadow:0 0 28px rgba(16,185,129,.35);

}

100%{

box-shadow:0 0 0 rgba(16,185,129,0);

}

}

/* ==========================================
            SERVICE STATUS
========================================== */

.status-services{

padding:90px 0;

}

.services-grid{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:22px;

margin-top:50px;

}

.service-card{

display:flex;

align-items:center;

justify-content:space-between;

padding:28px;

border-radius:22px;

background:rgba(255,255,255,.04);

border:1px solid rgba(255,255,255,.08);

backdrop-filter:blur(20px);

transition:.35s;

overflow:hidden;

position:relative;

}

.service-card::before{

content:"";

position:absolute;

inset:0;

background:linear-gradient(
135deg,
rgba(0,212,255,.06),
transparent 60%
);

opacity:0;

transition:.35s;

}

.service-card:hover{

transform:translateY(-8px);

border-color:rgba(0,212,255,.25);

box-shadow:0 20px 55px rgba(0,212,255,.12);

}

.service-card:hover::before{

opacity:1;

}

.service-left{

display:flex;

align-items:center;

gap:18px;

z-index:1;

}

.service-left h3{

font-size:1.2rem;

margin-bottom:6px;

}

.service-left p{

margin:0;

font-size:.95rem;

color:var(--text-secondary);

}

.service-right{

z-index:1;

}

.status-dot{

width:14px;

height:14px;

border-radius:50%;

background:#22c55e;

box-shadow:
0 0 10px #22c55e,
0 0 22px rgba(34,197,94,.55);

animation:statusPulse 2s infinite;

flex-shrink:0;

}

.status-badge{

display:inline-flex;
align-items:center;
justify-content:center;

padding:12px 22px;

white-space:nowrap;

font-weight:700;

}

.service-card.degraded .status-dot{

background:#facc15;

box-shadow:
0 0 10px #facc15,
0 0 22px rgba(250,204,21,.45);

}

.service-card.degraded .status-badge{

background:rgba(250,204,21,.12);

border-color:rgba(250,204,21,.35);

color:#FACC15;

}

.service-card.outage .status-dot{

background:#ef4444;

box-shadow:
0 0 10px #ef4444,
0 0 22px rgba(239,68,68,.5);

}

.service-card.outage .status-badge{

background:rgba(239,68,68,.12);

border-color:rgba(239,68,68,.35);

color:#F87171;

}

@keyframes statusPulse{

0%{

transform:scale(1);

opacity:1;

}

50%{

transform:scale(1.3);

opacity:.7;

}

100%{

transform:scale(1);

opacity:1;

}

}

/* ==========================================
                METRICS
========================================== */

.status-metrics{

padding:25px 0 100px;

}

.metrics-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:22px;

}

.metric-card{

padding:30px;

text-align:center;

border-radius:22px;

background:rgba(255,255,255,.04);

border:1px solid rgba(255,255,255,.08);

backdrop-filter:blur(20px);

transition:.35s;

}

.metric-card:hover{

transform:translateY(-8px);

border-color:rgba(0,212,255,.25);

box-shadow:0 18px 45px rgba(0,212,255,.12);

}

.metric-card h2{

font-size:2.4rem;

font-weight:800;

margin-bottom:12px;

background:var(--gradient);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.metric-card span{

font-size:.95rem;

color:var(--text-secondary);

}

/* ==========================================
            INCIDENT HISTORY
========================================== */

.incident-history{

padding:90px 0;

}

.timeline{

display:flex;

flex-direction:column;

gap:22px;

margin-top:50px;

}

.timeline-card{

display:flex;

gap:24px;

padding:28px;

border-radius:22px;

background:rgba(255,255,255,.04);

border:1px solid rgba(255,255,255,.08);

backdrop-filter:blur(20px);

transition:.35s;

}

.timeline-card:hover{

transform:translateY(-6px);

border-color:rgba(0,212,255,.25);

box-shadow:0 18px 45px rgba(0,212,255,.12);

}

.timeline-status{

display:flex;

justify-content:center;

}

.timeline-content{

flex:1;

}

.timeline-header{

display:flex;

justify-content:space-between;

align-items:center;

gap:20px;

margin-bottom:12px;

}

.timeline-header h3{

font-size:1.2rem;

margin:0;

}

.timeline-header span{

font-size:.9rem;

color:var(--text-secondary);

white-space:nowrap;

}

.timeline-content p{

margin:0;

line-height:1.8;

color:var(--text-secondary);

}

.status-dot.resolved{

background:#22c55e;

box-shadow:
0 0 12px rgba(34,197,94,.6);

}

/* ==========================================
        MAINTENANCE
========================================== */

.maintenance-section{

padding:20px 0 90px;

}

.maintenance-card{

display:flex;

align-items:center;

justify-content:space-between;

gap:28px;

padding:35px;

border-radius:24px;

background:rgba(255,255,255,.04);

border:1px solid rgba(255,255,255,.08);

backdrop-filter:blur(20px);

transition:.35s;

}

.maintenance-card:hover{

transform:translateY(-6px);

border-color:rgba(0,212,255,.25);

}

.maintenance-icon{

font-size:3rem;

}

.maintenance-info{

flex:1;

}

.maintenance-info h2{

margin-bottom:10px;

}

.maintenance-info p{

margin:0;

line-height:1.8;

color:var(--text-secondary);

}

.maintenance-status{

padding:10px 18px;

border-radius:999px;

background:rgba(34,197,94,.12);

border:1px solid rgba(34,197,94,.35);

color:#4ADE80;

font-weight:700;

white-space:nowrap;

}

/* ==========================================
            SUBSCRIBE
========================================== */

.status-subscribe{

padding:20px 0 120px;

}

.subscribe-card{

padding:55px;

text-align:center;

border-radius:26px;

background:rgba(255,255,255,.04);

border:1px solid rgba(255,255,255,.08);

backdrop-filter:blur(20px);

}

.subscribe-card h2{

font-size:2.4rem;

margin-bottom:18px;

}

.subscribe-card p{

max-width:720px;

margin:0 auto 35px;

line-height:1.8;

color:var(--text-secondary);

}

.subscribe-buttons{

display:flex;

justify-content:center;

gap:18px;

flex-wrap:wrap;

}

/* ==========================================
        RESPONSIVE
========================================== */

@media(max-width:992px){

.status-summary{

grid-template-columns:repeat(2,1fr);

}

.services-grid{

grid-template-columns:1fr;

}

.metrics-grid{

grid-template-columns:repeat(2,1fr);

}

.maintenance-card{

flex-direction:column;

text-align:center;

}

.timeline-header{

flex-direction:column;

align-items:flex-start;

}

}

@media(max-width:768px){

.status-hero{

padding:140px 0 80px;

}

.status-summary{

grid-template-columns:1fr;

}

.metrics-grid{

grid-template-columns:1fr;

}

.subscribe-card{

padding:35px 25px;

}

.subscribe-card h2{

font-size:2rem;

}

.subscribe-buttons{

flex-direction:column;

}

.subscribe-buttons .btn{

width:100%;

}

}

@media(max-width:480px){

.status-hero h1{

font-size:2.7rem;

}

.service-card{

padding:22px;

}

.timeline-card{

padding:22px;

}

.summary-card h2,

.metric-card h2{

font-size:2rem;

}

}

/* ==========================================
   UNDER DEVELOPMENT
========================================== */

.service-card.development{

border-color:rgba(255,170,0,.25);

background:rgba(255,170,0,.04);

}

.status-dot.development{

background:#ffb020;

box-shadow:0 0 12px #ffb020;

}

.status-badge.development{

display:inline-flex;

align-items:center;

justify-content:center;

gap:8px;

min-width:220px;

white-space:nowrap;

}lor:#ffb020;

border:1px solid rgba(255,170,0,.28);

}