/* =========================================
   NeonArena – base.css
   CSS Variables, Font, Reset & Layout
   ========================================= */

@import url('https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400&display=swap');

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

:root {
    --green:      #00ff88;
    --green-dim:  rgba(0,255,136,0.13);
    --orange:     #ff6200;
    --orange-dim: rgba(255,98,0,0.13);
    --cyan:       #00d4ff;
    --cyan-dim:   rgba(0,212,255,0.13);
    --hot:        #ff2e63;
    --deep:       #020c18;
    --card:       #081428;
    --nav-bg:     rgba(2,8,20,0.97);
    --text:       #d6f0ff;
    --muted:      rgba(214,240,255,0.5);
    --edge:       rgba(0,255,136,0.25);
    --c-glow:     0 0 40px rgba(0,255,136,0.15);
    --radius:     1rem;
}

html { scroll-behavior: smooth; }

body {
    font-family: 'Exo 2', 'Segoe UI', sans-serif;
    background: var(--deep);
    color: var(--text);
    min-height: 100vh;
    overflow-x: hidden;
    line-height: 1.6;
}

a { color: inherit; }

.wrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1rem;
}

section { padding: 5rem 2rem; }

.sec-heading {
    text-align: center;
    font-size: clamp(1.6rem, 3vw, 2.3rem);
    font-weight: 800;
    margin-bottom: 2.8rem;
    background: linear-gradient(135deg, var(--green), var(--cyan));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

@media (max-width: 768px) {
    section { padding: 3rem 1.2rem; }
    .wrap { padding-left: 1.2rem; padding-right: 1.2rem; }
}
@media (max-width: 640px) {
    section { padding: 2.5rem 1rem; }
    .wrap { padding-left: 1rem; padding-right: 1rem; }
}
@media (max-width: 425px) {
    section { padding: 2rem 0.8rem; }
    .wrap { padding-left: 0.8rem; padding-right: 0.8rem; }
}