.about-page {
min-height: 100vh;
padding-bottom: 80px;
}

.about-hero {
position: relative;
padding: 120px 0 90px;
overflow: hidden;
background:
radial-gradient(circle at 70% 30%, rgba(22, 131, 255, .16), transparent 35%),
linear-gradient(180deg, #050b13 0%, #081321 100%);
border-bottom: 1px solid rgba(80, 160, 255, .12);
}

.about-hero::before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(90deg, transparent 0%, rgba(22, 131, 255, .04) 50%, transparent 100%);
pointer-events: none;
}

.about-hero-content {
position: relative;
max-width: 800px;
}

.about-label,
.section-label {
display: inline-block;
color: #4aa3ff;
font-size: 11px;
font-weight: 800;
letter-spacing: 2.5px;
text-transform: uppercase;
margin-bottom: 14px;
}

.about-hero h1 {
margin: 0 0 18px;
font-size: clamp(42px, 7vw, 76px);
font-weight: 900;
letter-spacing: -2px;
}

.about-hero p {
max-width: 650px;
margin: 0;
color: #91a9c0;
font-size: 18px;
line-height: 1.7;
}

.about-container {
padding-top: 70px;
}

.about-section {
display: grid;
grid-template-columns: 90px 1fr;
gap: 30px;
margin-bottom: 100px;
}

.section-number {
color: rgba(74, 163, 255, .3);
font-size: 48px;
font-weight: 900;
line-height: 1;
}

.section-content {
min-width: 0;
}

.section-content h2 {
margin: 0 0 15px;
font-size: clamp(28px, 4vw, 42px);
font-weight: 800;
}

.section-intro {
max-width: 850px;
color: #91a9c0;
line-height: 1.8;
margin-bottom: 35px;
}

/* TIMELINE */

.timeline {
position: relative;
padding-left: 30px;
border-left: 2px solid rgba(74, 163, 255, .18);
}

.timeline-item {
position: relative;
padding: 0 0 30px 25px;
}

.timeline-item:last-child {
padding-bottom: 0;
}

.timeline-dot {
position: absolute;
left: -37px;
top: 3px;
width: 12px;
height: 12px;
border-radius: 50%;
background: #1683ff;
box-shadow: 0 0 14px rgba(22, 131, 255, .7);
}

.timeline-date {
color: #4aa3ff;
font-size: 12px;
font-weight: 800;
letter-spacing: 1px;
text-transform: uppercase;
margin-bottom: 7px;
}

.timeline-content {
color: #c3d3e3;
line-height: 1.7;
}

/* SERVERS */

.server-about-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
}

.server-about-card {
padding: 30px;
background: linear-gradient(
145deg,
rgba(22, 131, 255, .08),
rgba(255, 255, 255, .025)
);
border: 1px solid rgba(74, 163, 255, .13);
border-radius: 18px;
transition: .25s ease;
}

.server-about-card:hover {
transform: translateY(-5px);
border-color: rgba(74, 163, 255, .35);
box-shadow: 0 15px 45px rgba(0, 0, 0, .25);
}

.server-card-top {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 25px;
}

.server-index {
color: #607b96;
font-size: 11px;
font-weight: 800;
letter-spacing: 1.5px;
}

.server-status {
padding: 5px 9px;
border-radius: 6px;
background: rgba(53, 208, 127, .1);
border: 1px solid rgba(53, 208, 127, .2);
color: #35d07f;
font-size: 9px;
font-weight: 800;
}

.server-about-card h3 {
margin-bottom: 15px;
font-size: 30px;
font-weight: 800;
}

.server-about-card p {
color: #91a9c0;
line-height: 1.7;
}

.server-ip {
display: flex;
align-items: center;
justify-content: space-between;
gap: 15px;
margin-top: 25px;
padding: 13px 15px;
background: rgba(0, 0, 0, .2);
border: 1px solid rgba(255, 255, 255, .06);
border-radius: 10px;
}

.server-ip span {
color: #607b96;
font-size: 10px;
font-weight: 800;
letter-spacing: 1px;
}

.server-ip code {
color: #d9ecff;
}

/* STAFF */

.staff-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}

.staff-card {
display: flex;
flex-direction: column;
padding: 20px 22px;
background: rgba(255, 255, 255, .025);
border: 1px solid rgba(255, 255, 255, .07);
border-radius: 12px;
transition: .2s;
}

.staff-card:hover {
background: rgba(22, 131, 255, .06);
border-color: rgba(74, 163, 255, .2);
}

.staff-role {
color: #657f99;
font-size: 11px;
font-weight: 700;
margin-bottom: 7px;
}

.staff-card strong {
color: #e9f5ff;
font-size: 16px;
}

/* LINKS */

.links-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}

.info-link {
display: flex;
align-items: center;
gap: 14px;
padding: 17px;
color: #fff;
background: rgba(255, 255, 255, .025);
border: 1px solid rgba(255, 255, 255, .07);
border-radius: 12px;
transition: .2s;
}

.info-link:hover {
color: #fff;
transform: translateX(4px);
background: rgba(22, 131, 255, .07);
border-color: rgba(74, 163, 255, .22);
}

.link-icon {
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
flex-shrink: 0;
border-radius: 9px;
background: rgba(22, 131, 255, .1);
color: #4aa3ff;
font-weight: 800;
}

.info-link span:nth-child(2) {
min-width: 0;
flex: 1;
}

.info-link small {
display: block;
color: #607b96;
font-size: 9px;
font-weight: 800;
letter-spacing: 1px;
margin-bottom: 3px;
}

.info-link strong {
display: block;
color: #dcecff;
font-size: 14px;
}

.link-arrow {
color: #4aa3ff;
font-size: 18px;
}

/* IP */

.ip-section {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin-top: 20px;
}

.ip-card {
display: flex;
align-items: center;
gap: 15px;
padding: 18px;
background: rgba(22, 131, 255, .05);
border: 1px solid rgba(74, 163, 255, .13);
border-radius: 12px;
}

.ip-card span {
color: #607b96;
font-size: 10px;
font-weight: 800;
}

.ip-card strong {
flex: 1;
color: #e5f3ff;
font-family: monospace;
}
.ip-card button {
border: 1px solid rgba(74, 163, 255, .25);
background: rgba(22, 131, 255, .1);
color: #8bc5ff;
border-radius: 7px;
padding: 8px 11px;
font-size: 11px;
font-weight: 700;
cursor: pointer;
}

.ip-card button:hover {
background: rgba(22, 131, 255, .2);
color: #fff;
}

.ip-card button.copied {
color: #35d07f;
border-color: rgba(53, 208, 127, .3);
background: rgba(53, 208, 127, .1);
}

/* MOBILE */

@media (max-width: 768px) {

.about-hero {
    padding: 90px 0 65px;
}

.about-container {
    padding-top: 45px;
}

.about-section {
    grid-template-columns: 1fr;
    gap: 15px;
    margin-bottom: 70px;
}

.section-number {
    font-size: 30px;
}

.server-about-grid,
.staff-grid,
.links-grid,
.ip-section {
    grid-template-columns: 1fr;
}

.server-ip,
.ip-card {
    flex-wrap: wrap;
}

.ip-card strong {
    min-width: 100%;
}

.timeline {
    padding-left: 20px;
}

.timeline-item {
    padding-left: 20px;
}