@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&display=swap");

html,
body {
height: 100%;
scroll-behavior: smooth;
}

body {
font-family: "Space Grotesk", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
background-color: #02040a;
color: #f5f5f5;
}

a {
text-decoration: none;
}

a:hover {
text-decoration: none;
}

.glass-nav {
background: rgba(2, 4, 10, 0.8);
backdrop-filter: blur(14px);
border-bottom: 1px solid rgba(0, 255, 136, 0.15);
transition: background 0.3s ease, padding 0.3s ease, box-shadow 0.3s ease;
}

.navbar-scrolled {
background: rgba(2, 4, 10, 0.98);
box-shadow: 0 16px 60px rgba(0, 0, 0, 0.9);
}

.navbar .nav-link {
font-size: 0.9rem;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #b4becf;
position: relative;
padding-inline: 0.9rem;
}

.brand-avatar {
width: 28px;
height: 28px;
border-radius: 50%;
object-fit: cover;
border: 1px solid rgba(0, 255, 136, 0.75);
box-shadow: 0 0 18px rgba(0, 255, 136, 0.8);
}

.navbar .nav-link::after {
content: "";
position: absolute;
left: 50%;
bottom: 0.1rem;
width: 0;
height: 2px;
background: linear-gradient(90deg, #00ff88, #00c0ff);
transform: translateX(-50%);
transition: width 0.25s ease;
}

.navbar .nav-link:hover,
.navbar .nav-link.active {
color: #f8fafc;
}

.navbar .nav-link:hover::after,
.navbar .nav-link.active::after {
width: 80%;
}

.hero-section {
position: relative;
min-height: 100vh;
padding-top: 90px;
padding-bottom: 90px;
overflow: hidden;
background: radial-gradient(circle at top left, #061826, #02040a 55%, #000000 100%);
}

.matrix-overlay {
position: absolute;
inset: 0;
background-image: linear-gradient(180deg, rgba(0, 255, 136, 0.1) 0, transparent 40%, rgba(0, 192, 255, 0.08) 100%), repeating-linear-gradient(180deg, rgba(0, 255, 136, 0.2) 0, rgba(0, 255, 136, 0.2) 1px, transparent 1px, transparent 3px);
opacity: 0.35;
mix-blend-mode: screen;
pointer-events: none;
animation: matrixScroll 18s linear infinite;
}

.hero-section .container {
position: relative;
z-index: 1;
}

.text-gradient {
background: linear-gradient(120deg, #00ff88, #00c0ff, #7c3aed);
background-size: 200% auto;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: gradientShift 8s ease infinite;
}

.btn-neon {
background: linear-gradient(120deg, #00ff88, #00c0ff);
border: none;
color: #02040a;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
box-shadow: 0 0 24px rgba(0, 255, 136, 0.5);
position: relative;
overflow: hidden;
}

.btn-neon::before {
content: "";
position: absolute;
left: -20%;
top: 0;
width: 30%;
height: 100%;
background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.7), transparent);
transform: skewX(-15deg) translateX(-100%);
transition: transform 0.5s ease;
}

.btn-neon:hover::before {
transform: skewX(-15deg) translateX(260%);
}

.btn-neon:hover {
transform: translateY(-1px);
box-shadow: 0 0 34px rgba(0, 255, 136, 0.75);
}

.btn-neon:active {
transform: translateY(1px);
}

.stats-row {
margin-top: 1rem;
}

.stat-item {
background: radial-gradient(circle at top, rgba(0, 255, 136, 0.16), rgba(0, 8, 20, 0.96));
border-radius: 16px;
padding: 0.8rem 0.6rem;
border: 1px solid rgba(0, 255, 136, 0.18);
box-shadow: 0 14px 40px rgba(0, 0, 0, 0.8);
text-align: center;
}

.stat-value {
font-size: 1.1rem;
font-weight: 700;
color: #e5f9ff;
}

.stat-label {
font-size: 0.75rem;
color: #7f8ea3;
}

.hero-avatar-wrapper {
position: relative;
display: inline-block;
padding: 10px;
border-radius: 32px;
background: radial-gradient(circle at top, rgba(0, 255, 136, 0.16), rgba(0, 8, 20, 0.96));
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.9);
}

.hero-avatar {
display: block;
border-radius: 24px;
width: 100%;
max-width: 420px;
object-fit: cover;
}

.hero-glow {
position: absolute;
inset: 15%;
background: radial-gradient(circle at 20% 0, rgba(0, 255, 136, 0.4), transparent 55%), radial-gradient(circle at 80% 100%, rgba(0, 192, 255, 0.4), transparent 55%);
filter: blur(24px);
z-index: -1;
opacity: 0.6;
animation: pulseGlow 6s ease-in-out infinite;
}

.live-badge {
position: absolute;
bottom: 18px;
left: 24px;
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.2rem 0.7rem;
border-radius: 999px;
background: rgba(2, 4, 10, 0.85);
border: 1px solid rgba(0, 255, 136, 0.7);
backdrop-filter: blur(8px);
font-size: 0.8rem;
}

.live-dot {
width: 9px;
height: 9px;
border-radius: 50%;
background: #10b981;
box-shadow: 0 0 12px rgba(16, 185, 129, 0.9);
animation: livePulse 1.3s infinite;
}

.live-text {
color: #e5f9ff;
}

.section-padding {
padding-top: 90px;
padding-bottom: 90px;
}

.bg-dark-alt {
background: radial-gradient(circle at top left, #050814, #050816);
}

.section-title {
font-size: 2.1rem;
font-weight: 700;
margin-bottom: 0.6rem;
}

.section-subtitle {
color: #94a3b8;
max-width: 620px;
margin-inline: auto;
}

.feature-pill {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.6rem 0.8rem;
border-radius: 999px;
background: rgba(15, 23, 42, 0.85);
border: 1px solid rgba(148, 163, 184, 0.3);
font-size: 0.85rem;
color: #e2e8f0;
}

.feature-pill i {
color: #00ff88;
}

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

.about-card {
background: radial-gradient(circle at top, rgba(15, 23, 42, 0.98), rgba(15, 23, 42, 1));
border-radius: 18px;
border: 1px solid rgba(148, 163, 184, 0.4);
padding: 1.1rem 1rem;
box-shadow: 0 18px 35px rgba(0, 0, 0, 0.6);
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.about-card h5 {
font-size: 1rem;
margin-bottom: 0.4rem;
}

.about-card p {
font-size: 0.9rem;
color: #9ca3af;
}

.about-card:hover {
transform: translateY(-4px);
border-color: rgba(0, 255, 136, 0.45);
box-shadow: 0 22px 60px rgba(0, 0, 0, 0.9);
}

.nav-pills .nav-link {
border-radius: 999px;
padding-inline: 1.4rem;
padding-block: 0.4rem;
text-transform: uppercase;
font-size: 0.8rem;
letter-spacing: 0.08em;
color: #9ca3af;
background: transparent;
border: 1px solid rgba(148, 163, 184, 0.3);
}

.nav-pills .nav-link.active {
background: radial-gradient(circle at top left, #00ff88, #00c0ff);
color: #020617;
border-color: transparent;
box-shadow: 0 0 22px rgba(0, 255, 136, 0.45);
}

.game-card {
position: relative;
background: radial-gradient(circle at top left, rgba(15, 23, 42, 0.98), rgba(15, 23, 42, 1));
border-radius: 20px;
border: 1px solid rgba(148, 163, 184, 0.38);
padding: 1.2rem 1.1rem;
height: 100%;
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.8);
}

.badge-format {
display: inline-flex;
align-items: center;
padding: 0.2rem 0.6rem;
border-radius: 999px;
background: rgba(15, 23, 42, 0.95);
border: 1px solid rgba(0, 255, 136, 0.6);
color: #a7f3d0;
font-size: 0.75rem;
margin-bottom: 0.5rem;
}

.game-card h5 {
font-size: 1.1rem;
margin-bottom: 0.4rem;
}

.game-card p {
font-size: 0.9rem;
color: #9ca3af;
}

.game-tags {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
margin-top: 0.7rem;
}

.game-tags span {
font-size: 0.75rem;
padding: 0.2rem 0.5rem;
border-radius: 999px;
background: rgba(15, 23, 42, 0.9);
border: 1px solid rgba(148, 163, 184, 0.5);
color: #e5e7eb;
}

.game-card a {
display: inline-flex;
align-items: center;
gap: 0.2rem;
font-size: 0.8rem;
margin-top: 0.8rem;
color: #38bdf8;
}

.hover-raise {
transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.hover-raise:hover {
transform: translateY(-6px) translateZ(0);
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.9);
border-color: rgba(0, 255, 136, 0.55);
}

.feature-card {
background: radial-gradient(circle at top right, rgba(0, 255, 136, 0.16), rgba(15, 23, 42, 1));
border-radius: 24px;
padding: 1.6rem 1.3rem;
border: 1px solid rgba(148, 163, 184, 0.4);
height: 100%;
transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
box-shadow: 0 20px 46px rgba(0, 0, 0, 0.9);
}

.feature-icon {
width: 42px;
height: 42px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
background: radial-gradient(circle at top, #00ff88, #00c0ff);
color: #020617;
margin-bottom: 0.8rem;
box-shadow: 0 0 26px rgba(0, 255, 136, 0.6);
}

.feature-card h5 {
font-size: 1.05rem;
margin-bottom: 0.4rem;
}

.feature-card p {
font-size: 0.9rem;
color: #cbd5f5;
}

.hover-glow:hover {
transform: translateY(-4px);
border-color: rgba(0, 255, 136, 0.65);
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.96);
}

.pricing-card {
background: radial-gradient(circle at top, rgba(15, 23, 42, 0.98), rgba(5, 7, 17, 1));
border-radius: 26px;
border: 1px solid rgba(148, 163, 184, 0.4);
padding: 2rem 1.7rem 1.8rem;
height: 100%;
position: relative;
transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.9);
}

.pricing-card h5 {
font-size: 1.1rem;
text-transform: uppercase;
letter-spacing: 0.12em;
color: #e5e7eb;
}

.pricing-price {
font-size: 1.4rem;
font-weight: 600;
margin: 0.7rem 0 1.1rem;
color: #a5b4fc;
}

.pricing-card ul li {
font-size: 0.9rem;
color: #cbd5f5;
margin-bottom: 0.4rem;
display: flex;
align-items: center;
gap: 0.4rem;
}

.pricing-card ul li::before {
content: "•";
color: #22c55e;
}

.pricing-card.featured {
border-color: rgba(0, 255, 136, 0.7);
transform: translateY(-8px);
box-shadow: 0 30px 80px rgba(0, 0, 0, 1);
background: radial-gradient(circle at top, rgba(16, 185, 129, 0.26), rgba(5, 7, 17, 1));
}

.pricing-badge {
position: absolute;
top: 1.2rem;
right: 1.4rem;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.12em;
background: rgba(0, 255, 136, 0.18);
border-radius: 999px;
padding: 0.2rem 0.7rem;
color: #bbf7d0;
border: 1px solid rgba(0, 255, 136, 0.8);
}

.pricing-card:hover {
transform: translateY(-6px);
border-color: rgba(0, 255, 136, 0.7);
box-shadow: 0 32px 90px rgba(0, 0, 0, 0.98);
}

.schedule-grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 0.9rem;
}

.schedule-item {
display: flex;
align-items: stretch;
border-radius: 20px;
overflow: hidden;
background: radial-gradient(circle at left, rgba(0, 255, 136, 0.18), rgba(15, 23, 42, 1));
border: 1px solid rgba(148, 163, 184, 0.5);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.9);
}

.schedule-day {
min-width: 110px;
display: flex;
align-items: center;
justify-content: center;
background: radial-gradient(circle at left, #00ff88, #00c0ff);
color: #020617;
font-weight: 600;
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 0.12em;
}

.schedule-content {
flex: 1;
padding: 0.8rem 1rem;
}

.schedule-time {
font-size: 0.85rem;
color: #a5b4fc;
margin-bottom: 0.1rem;
}

.schedule-title {
font-size: 1rem;
font-weight: 600;
}

.schedule-meta {
font-size: 0.85rem;
color: #cbd5f5;
}

.live-status-card {
background: radial-gradient(circle at top, rgba(15, 23, 42, 0.98), rgba(15, 23, 42, 1));
border-radius: 22px;
border: 1px solid rgba(148, 163, 184, 0.5);
padding: 1.4rem 1.2rem;
box-shadow: 0 22px 55px rgba(0, 0, 0, 0.95);
font-size: 0.9rem;
color: #e5e7eb;
}

.live-indicator {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.2rem 0.6rem;
border-radius: 999px;
font-size: 0.75rem;
}

.live-indicator .bullet {
width: 9px;
height: 9px;
border-radius: 50%;
}

.live-indicator .label {
text-transform: uppercase;
letter-spacing: 0.12em;
}

.live-indicator.offline {
background: rgba(148, 163, 184, 0.16);
color: #e5e7eb;
}

.live-indicator.offline .bullet {
background: #ef4444;
}

.live-indicator.online {
background: rgba(22, 163, 74, 0.18);
color: #bbf7d0;
}

.live-indicator.online .bullet {
background: #22c55e;
box-shadow: 0 0 16px rgba(34, 197, 94, 0.9);
animation: livePulse 1.1s infinite;
}

.social-card {
text-align: center;
border-radius: 20px;
background: radial-gradient(circle at top, rgba(15, 23, 42, 0.98), rgba(15, 23, 42, 1));
border: 1px solid rgba(148, 163, 184, 0.4);
padding: 1.2rem 0.8rem 1.1rem;
box-shadow: 0 18px 45px rgba(0, 0, 0, 0.9);
}

.social-card i {
font-size: 1.6rem;
margin-bottom: 0.3rem;
}

.social-card h6 {
font-size: 0.95rem;
margin-bottom: 0.15rem;
}

.social-card p {
font-size: 0.8rem;
color: #9ca3af;
margin-bottom: 0.3rem;
}

.social-meta {
font-size: 0.75rem;
color: #a5b4fc;
}

.social-card:nth-child(1) i {
color: #a855f7;
}

.social-card:nth-child(2) i {
color: #ef4444;
}

.social-card:nth-child(3) i {
color: #3b82f6;
}

.social-card:nth-child(4) i {
color: #f97316;
}

.accordion-button {
background-color: rgba(15, 23, 42, 0.9);
color: #e5e7eb;
font-size: 0.95rem;
}

.accordion-button:not(.collapsed) {
background-color: rgba(15, 23, 42, 1);
color: #22c55e;
box-shadow: none;
}

.accordion-body {
background-color: rgba(15, 23, 42, 0.98);
color: #cbd5f5;
font-size: 0.9rem;
}

.accordion-item {
border-color: rgba(30, 64, 175, 0.4);
}

.contact-list li {
display: flex;
align-items: center;
gap: 0.6rem;
margin-bottom: 0.5rem;
font-size: 0.9rem;
color: #e5e7eb;
}

.contact-list i {
color: #22c55e;
}

.contact-card {
border-radius: 24px;
background: radial-gradient(circle at top, rgba(15, 23, 42, 0.98), rgba(15, 23, 42, 1));
border: 1px solid rgba(148, 163, 184, 0.5);
padding: 1.6rem 1.4rem;
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.96);
}

.contact-card .form-control {
background-color: rgba(15, 23, 42, 0.96);
border-radius: 14px;
border: 1px solid rgba(51, 65, 85, 0.9);
color: #e5e7eb;
}

.contact-card .form-control:focus {
border-color: rgba(0, 255, 136, 0.8);
box-shadow: 0 0 0 1px rgba(0, 255, 136, 0.4);
background-color: rgba(15, 23, 42, 1);
}

.contact-card .form-control::placeholder {
color: #64748b;
}

footer {
background: linear-gradient(180deg, rgba(15, 23, 42, 0.98), #02040a);
}

.border-neon {
border-image: linear-gradient(90deg, rgba(0, 255, 136, 0.7), rgba(0, 192, 255, 0.7)) 1;
}

.footer-links a {
color: #9ca3af;
margin-left: 1.1rem;
position: relative;
}

.footer-links a::after {
content: "";
position: absolute;
left: 0;
bottom: -0.1rem;
width: 0;
height: 1px;
background: linear-gradient(90deg, #00ff88, #00c0ff);
transition: width 0.2s ease;
}

.footer-links a:hover {
color: #e5e7eb;
}

.footer-links a:hover::after {
width: 100%;
}

.scroll-reveal {
opacity: 0;
transform: translateY(28px);
transition: opacity 0.7s ease, transform 0.7s ease;
}

.scroll-reveal-visible {
opacity: 1;
transform: translateY(0);
}

@keyframes matrixScroll {
0% {
background-position: 0 0, 0 0;
}
100% {
background-position: 0 600px, 0 600px;
}
}

@keyframes gradientShift {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}

@keyframes pulseGlow {
0% {
opacity: 0.35;
}
50% {
opacity: 0.8;
}
100% {
opacity: 0.35;
}
}

@keyframes livePulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.35);
}
100% {
transform: scale(1);
}
}

@media (max-width: 991.98px) {
.hero-section {
padding-top: 100px;
text-align: center;
}

.stats-row {
justify-content: center;
}

.hero-avatar-wrapper {
margin-top: 1.5rem;
}

.about-grid {
grid-template-columns: minmax(0, 1fr);
}
}

@media (max-width: 575.98px) {
.section-padding {
padding-top: 70px;
padding-bottom: 70px;
}

.section-title {
font-size: 1.7rem;
}

.navbar .nav-link {
padding-inline: 0;
}
}