*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Inter','Segoe UI',sans-serif;
}

body{
    background:#0f1115;
    color:#ffffff;
    overflow-x:hidden;
}

header{
    min-height:35vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:80px 20px 60px;
    background:linear-gradient(135deg, #0f1115 0%, #1b1f26 100%);
    text-align:center;
    position:relative;
    overflow:hidden;
}

header::before{
    content:'';
    position:absolute;
    width:400px;
    height:400px;
    background:radial-gradient(circle, rgba(123,97,255,0.12) 0%, transparent 70%);
    border-radius:50%;
    top:-100px;
    right:-150px;
}

header::after{
    content:'';
    position:absolute;
    width:300px;
    height:300px;
    background:radial-gradient(circle, rgba(123,97,255,0.08) 0%, transparent 70%);
    border-radius:50%;
    bottom:-80px;
    left:-100px;
}

.hero{
    max-width:900px;
    z-index:1;
    animation:slideUp 1s ease-out;
}

@keyframes slideUp{
    from{
        opacity:0;
        transform:translateY(50px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

.hero h1{
    font-size:3.5rem;
    margin-bottom:15px;
    font-weight:800;
    background:linear-gradient(135deg, #ffffff 0%, #e0e7ff 100%);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
    letter-spacing:-1px;
}

.hero p{
    font-size:1.1rem;
    color:#cbd5e1;
    margin-bottom:30px;
    line-height:1.6;
    font-weight:300;
}

/* Logo area (small animated mark + text) */
.logo-area{ display:inline-flex; gap:20px; align-items:center; }
.logo-img{ width:36px; height:36px; display:inline-block; border-radius:8px; background:linear-gradient(135deg,#7b61ff,#6b4fee); box-shadow:0 6px 18px rgba(123,97,255,0.18); transform-origin:center; animation:logo-bob 4s ease-in-out infinite; }
.logo-mark{ width:12px; height:12px; display:inline-block; border-radius:8px; background:linear-gradient(135deg,#7b61ff,#6b4fee); box-shadow:0 6px 18px rgba(123,97,255,0.18); transform-origin:center; animation:logo-bob 4s ease-in-out infinite; }
.logo-mark svg{ display:block; width:100%; height:100%; }
@keyframes logo-bob{ 0%{transform:translateY(0)}50%{transform:translateY(-4px) rotate(6deg)}100%{transform:translateY(0)} }
.logo-text{ font-size:1.5rem; background:linear-gradient(135deg, #ffffff 0%, #e0e7ff 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

/* Inline SVG helper to match site accent */
.icon-svg{ width:18px; height:18px; display:inline-block; vertical-align:middle; fill:currentColor; color:#7b61ff; }

/* Small status icon inside server cards */
.server-name .icon-svg{ width:14px; height:14px; margin-right:10px; color:#94a3b8; }

main{margin-top:90px;padding:80px 10%;min-height:calc(100vh - 90px)}

.content-wrapper{
    max-width:1200px;
    margin:0 auto;
}

.section-title{
    font-size:2rem;
    font-weight:600;
    margin-bottom:40px;
    color:#ffffff;
}

.legend{
    display:flex;
    gap:20px;
    align-items:center;
    margin-bottom:40px;
    flex-wrap:wrap;
    background:linear-gradient(135deg,#1b1f26,#16181c);
    padding:20px;
    border-radius:12px;
    border:1px solid rgba(123,97,255,0.1);
}
.legend .item{
    display:flex;
    gap:10px;
    align-items:center;
    font-weight:500;
    color:#cbd5e1;
}

.legend .status-dot{
    width:12px;
    height:12px;
    border-radius:50%;
}

.servers-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
    gap:24px;
    margin-bottom:60px;
}

.server-card{
    background:linear-gradient(135deg, #1b1f26 0%, #161a20 100%);
    padding:30px;
    border-radius:16px;
    border:1px solid rgba(123,97,255,0.12);
    transition:all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position:relative;
    overflow:hidden;
}

.server-card::before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:linear-gradient(135deg, rgba(123,97,255,0.08) 0%, transparent 100%);
    opacity:0;
    transition:opacity 0.4s;
}

.server-card:hover{
    transform:translateY(-6px);
    border-color:rgba(123,97,255,0.25);
    box-shadow:0 20px 50px rgba(123,97,255,0.1);
}

.server-card:hover::before{
    opacity:1;
}

.server-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    margin-bottom:16px;
    position:relative;
    z-index:1;
}

.server-name{
    font-size:1.2rem;
    font-weight:700;
    color:#ffffff;
}

.status-badge{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:6px 12px;
    border-radius:999px;
    font-weight:600;
    font-size:0.8rem;
}

.status-online{
    background:rgba(20, 184, 166, 0.15);
    color:#14b8a6;
    border:1px solid rgba(20, 184, 166, 0.3);
}

.status-degraded{
    background:rgba(245, 158, 11, 0.15);
    color:#f59e0b;
    border:1px solid rgba(245, 158, 11, 0.3);
}

.status-down{
    background:rgba(239, 68, 68, 0.15);
    color:#ef4444;
    border:1px solid rgba(239, 68, 68, 0.3);
}

.status-dot{
    width:8px;
    height:8px;
    border-radius:50%;
    display:inline-block;
}

.dot-online{ background:#14b8a6; }
.dot-degraded{ background:#f59e0b; }
.dot-down{ background:#ef4444; }

.server-meta{
    color:#94a3b8;
    font-size:0.9rem;
    line-height:1.5;
    position:relative;
    z-index:1;
}

.server-meta p{
    margin-bottom:8px;
}

.server-meta strong{
    color:#cbd5e1;
    font-weight:600;
}

.timestamp{
    color:#94a3b8;
    font-size:0.85rem;
    margin-top:12px;
    position:relative;
    z-index:1;
}

.update-bar{
    background:linear-gradient(135deg,#1b1f26,#16181c);
    padding:20px;
    border-radius:12px;
    border:1px solid rgba(123,97,255,0.1);
    text-align:center;
    color:#cbd5e1;
    font-size:0.95rem;
}

.update-bar .timestamp{
    color:#94a3b8;
    margin-top:6px;
}

footer{
    padding:40px;
    text-align:center;
    color:#64748b;
    border-top:1px solid rgba(123,97,255,0.1);
    background:#0f1115;
    font-weight:300;
}

#page-transition{
    position:fixed;
    inset:0;
    background:#0f1115;
    z-index:2000;
    pointer-events:none;
    opacity:1;
    transition:opacity 0.55s ease;
}

#page-transition.hidden{
    opacity:0;
}
.lang-btn{
    background:transparent;
    border:0;
    color:#cbd5e1;
    cursor:pointer;
    font-weight:500;
    transition:all 0.3s ease;
    padding: 5px 5px;
    border-radius: 5px;
}
.lang-switch{
    display:flex;
    gap:8px;
    align-items:center;
}
.lang-btn:active{
    color:#ffffff;
    font-weight:700;
    background: #5a3ddc;
}
.lang-btn:hover{
    color:#ffffff;
    transform: translateY(-1px);
    background: #7b61ff1a;
}

.page-title{
    font-size:3.5rem;
    font-weight:700;
    margin-bottom:30px;
    background:linear-gradient(135deg, #ffffff 0%, #e0e7ff 100%);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
}

.page-subtitle{
    font-size:1.2rem;
    color:#cbd5e1;
    margin-bottom:60px;
    line-height:1.6;
}

html{
    scroll-behavior:smooth;
}

@media (max-width:768px){

    header{
        min-height:30vh;
        padding:60px 15px 40px;
    }

    .hero h1{
        font-size:2rem;
    }

    .hero p{
        font-size:0.95rem;
    }

    main{
        padding:80px 20px;
    }

    .section-title{
        font-size:1.5rem;
        margin-bottom:30px;
    }

    .servers-grid{
        grid-template-columns:1fr;
    }
    .page-title{
        font-size:2rem;
    }
    .legend{
        flex-direction:column;
        align-items:flex-start;
        gap:12px;
    }
}