.server-intro { --intro-shift: -10vh; position: relative; display: grid; isolation: isolate; place-items: center; min-height: calc(100vh - 80px); padding: 80px 24px 120px; text-align: center; }
.server-intro::before { --glow-y: calc(58px + var(--intro-shift)); position: absolute; z-index: -1; width: min(720px, 88vw); height: 170px; content: ""; border-radius: 50%; background: radial-gradient(ellipse, rgba(61, 255, 118, .24) 0%, rgba(19, 174, 66, .1) 38%, transparent 72%); filter: blur(24px); transform: translateY(var(--glow-y)); animation: text-glow 9s ease-in-out infinite alternate; }
.intro-content { display: grid; justify-items: center; gap: 24px; transform: translateY(var(--intro-shift)); }
.intro-content h1 { margin: 0; font-family: Unbounded, sans-serif; font-size: clamp(34px, 5.5vw, 70px); font-weight: 800; line-height: 1.12; letter-spacing: -3px; background: linear-gradient(105deg, #e9ffef 5%, #a4ffb9 35%, #36dc68 68%, #d7ffe2 100%); background-size: 220% 100%; background-clip: text; -webkit-background-clip: text; color: transparent; text-shadow: 0 0 34px rgba(75, 255, 119, .18); animation: heading-shader 8s ease-in-out infinite alternate; }
.intro-content p { width: min(620px, 100%); margin: 0; color: #c5d2c8; font-size: clamp(16px, 1.65vw, 20px); font-weight: 500; line-height: 1.68; letter-spacing: -.25px; text-wrap: balance; text-shadow: 0 2px 24px rgba(0, 0, 0, .55); }
.play-button { display: inline-flex; align-items: center; gap: 11px; padding: 14px 21px; margin-top: -4px; border: 1px solid rgba(142, 255, 169, .38); border-radius: 11px; background: linear-gradient(135deg, #32b958, #1b7538); box-shadow: 0 10px 28px rgba(25, 164, 66, .22), inset 0 1px 0 rgba(235, 255, 239, .24); color: #edfff1; font: 700 14px/1 Manrope, sans-serif; cursor: pointer; transition: transform .2s ease, filter .2s ease, box-shadow .2s ease; }.play-button span { font-size: 18px; line-height: 1; transition: transform .2s ease; }.play-button:hover { box-shadow: 0 13px 34px rgba(25, 164, 66, .34), inset 0 1px 0 rgba(235, 255, 239, .3); filter: brightness(1.1); transform: translateY(-2px); }.play-button:hover span { transform: translateX(3px); }
@keyframes text-glow { from { opacity: .65; transform: translateY(var(--glow-y)) scale(.93); } to { opacity: 1; transform: translateY(var(--glow-y)) scale(1.08); } }
@keyframes heading-shader { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@media (max-width: 780px) { .server-intro { --intro-shift: 0px; min-height: calc(100vh - 70px); padding: 54px 22px 86px; align-items: start; }.intro-content { margin-top: clamp(34px, 11vh, 100px); gap: 20px; }.intro-content h1 { font-size: clamp(32px, 10vw, 45px); letter-spacing: -2px; }.intro-content p { font-size: clamp(16px, 4.5vw, 18px); line-height: 1.62; letter-spacing: -.18px; }.play-button { padding: 13px 19px; font-size: 13px; }.server-intro::before { --glow-y: clamp(90px, 22vh, 160px); width: 110vw; height: 140px; } }