/* ==========================================================================
       BASE
       ========================================================================== */

      /* dark-theme */
      :root {
        /* BRAND (sampled from logo) */
        --kyron-sky: #00A8FF;
        --kyron-blue: #0A6CFF;
        --kyron-indigo: #3B3FFF;
        --kyron-violet: #9226DB;
        --kyron-magenta: #C026A8;
        --kyron-red: #FF2A1F;
        --cta: #E5231B;
        --cta-hover: #C91D16;
        --kyron-gradient: linear-gradient(110deg, #00A8FF 0%, #0A6CFF 30%, #9226DB 62%, #C026A8 78%, #FF2A1F 100%);

        /* BACKGROUNDS */
        --bg: #05070D;
        --surface: #0B1020;
        --card: #0D1117;
        --surface-raised: #111827;
        --surface-elevated: #182235;

        /* TEXT */
        --text-primary: #F5F7FA;
        --text-secondary: #A8B0C0;
        --text-muted: #7C879B;
        --text-disabled: #4A5468;

        /* BORDERS */
        --border: rgba(255, 255, 255, 0.07);
        --border-strong: #202A40;
        --border-brand: rgba(0, 168, 255, 0.25);
        --border-cta: rgba(255, 42, 31, 0.35);

        /* GLOWS */
        --glow-blue: rgba(10, 108, 255, 0.25);
        --glow-violet: rgba(146, 38, 219, 0.18);
        --glow-red: rgba(255, 42, 31, 0.30);
        --hero-glow: rgba(10, 108, 255, 0.25);

        /* GAMES */
        --game-freefire: #00F5FF;
        --game-bgmi: #7B2FFF;
        --game-bgmi-text: #A78BFA;
        --game-chess: #F59E0B;
        --game-valorant: #FF4655;

        /* SOCIAL */
        --instagram: #E1306C;
        --whatsapp: #25D366;
        --youtube: #FF0000;
        --youtube-text: #FF4444;
        --discord: #5865F2;

        /* Grid & Nav */
        --grid-line: rgba(0, 168, 255, 0.025);
        --nav-bg: rgba(5, 7, 13, 0.85);

        /* Legacy aliases for backwards compatibility */
        --neon: #00A8FF;
        --neon2: #7B2FFF;
        --chess: #F59E0B;
        --valorant: #FF4655;
      }

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

      body {
        min-height: 100vh;
        background: var(--bg);
        font-family: "Rajdhani", sans-serif;
        color: var(--text-primary);
        overflow-x: hidden;
        transition: background-color 0.2s ease, color 0.2s ease;
      }

      /* Background grid */
      body::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 0;
        background-image:
          linear-gradient(var(--grid-line) 1px, transparent 1px),
          linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
        background-size: 60px 60px;
        pointer-events: none;
      }

      a {
        color: inherit;
        text-decoration: none;
      }

      .icon {
        display: block;
        fill: currentColor;
      }

      /* ==========================================================================
       NAV
       ========================================================================== */

      nav {
        position: fixed;
        inset: 0 0 auto 0;
        z-index: 50;
        background: var(--nav-bg);
        border-bottom: 1px solid var(--border);
        backdrop-filter: blur(20px);
      }

      .nav-inner {
        max-width: 1100px;
        height: 60px;
        margin: 0 auto;
        padding: 0 1.5rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      .nav-logo {
        font-family: "Orbitron", sans-serif;
        font-size: 1.2rem;
        font-weight: 700;
        color: var(--text-primary);
      }

      .nav-logo span {
        color: var(--neon);
      }

      .nav-links {
        display: flex;
        align-items: center;
        gap: 1.25rem;
      }

      .nav-links a {
        font-size: 0.78rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        color: var(--text-muted);
        transition: color 0.2s;
      }

      .nav-links a:hover {
        color: var(--neon);
      }

      .nav-socials {
        display: flex;
        align-items: center;
        gap: 0.85rem;
      }

      .nav-socials a {
        color: var(--c);
        transition: opacity 0.2s;
      }

      .nav-socials a:hover {
        color: var(--c);
        opacity: 0.7;
      }

      .nav-admin {
        padding: 0.4rem 1rem;
        border: 1px solid var(--neon);
        border-radius: 6px;
        font-family: "Orbitron", sans-serif;
        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        color: var(--neon);
        transition: background 0.2s;
      }

      .nav-links a.nav-admin:hover {
        background: var(--glow-cyan, rgba(0, 245, 255, 0.1));
      }

      /* theme-toggle */
      .switch {
        display: block;
        --width-of-switch: 2.5em;
        --height-of-switch: 1.25em;
        /* size of sliding icon -- sun and moon */
        --size-of-icon: 0.9em;
        /* it is like a inline-padding of switch */
        --slider-offset: 0.3em;
        position: relative;
        width: var(--width-of-switch);
        height: var(--height-of-switch);
      }

      /* Hide default HTML checkbox */
      .switch input {
        opacity: 0;
        width: 0;
        height: 0;
      }

      /* The slider */
      .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #f4f4f5;
        transition: 0.4s;
        border-radius: 30px;
      }

      .slider:before {
        position: absolute;
        content: "";
        height: var(--size-of-icon, 1.4em);
        width: var(--size-of-icon, 1.4em);
        border-radius: 20px;
        left: var(--slider-offset, 0.3em);
        top: 50%;
        transform: translateY(-50%);
        background: linear-gradient(40deg, #ff0080, #ff8c00 70%);
        transition: 0.4s;
      }

      input:checked + .slider {
        background-color: #303136;
      }

      input:checked + .slider:before {
        left: calc(
          100% - (var(--size-of-icon, 1.4em) + var(--slider-offset, 0.3em))
        );
        background: #303136;
        /* change the value of second inset in box-shadow to change the angle and direction of the moon  */
        box-shadow:
          inset -3px -2px 5px -2px #8983f7,
          inset -10px -4px 0 0 #a3dafb;
      }


      /* ==========================================================================
       HERO
       ========================================================================== */

      .hero {
        position: relative;
        min-height: 100vh;
        padding: 60px 1rem 0;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        overflow: hidden;
      }

      .hero-content {
        position: relative;
        z-index: 1;
        max-width: 700px;
      }

      /* Background orbs */
      .orb {
        position: absolute;
        border-radius: 50%;
        pointer-events: none;
      }

      .orb1 {
        width: 600px;
        height: 600px;
        top: -150px;
        left: -150px;
        background: radial-gradient(
          circle,
          rgba(0, 245, 255, 0.07) 0%,
          transparent 70%
        );
        animation: orbpulse 7s ease-in-out infinite;
      }

      .orb2 {
        width: 500px;
        height: 500px;
        top: 0;
        right: -100px;
        background: radial-gradient(
          circle,
          rgba(123, 47, 255, 0.09) 0%,
          transparent 70%
        );
        animation: orbpulse 9s ease-in-out infinite reverse;
      }

      /* Badge */
      .hero-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 2rem;
        padding: 0.4rem 1rem;
        border: 1px solid rgba(0, 245, 255, 0.2);
        border-radius: 100px;
        background: rgba(0, 245, 255, 0.05);
        font-family: "JetBrains Mono", monospace;
        font-size: 0.7rem;
        letter-spacing: 0.15em;
        color: var(--neon);
      }

      .hero-badge span {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--neon);
        animation: blink 1.5s ease-in-out infinite;
      }

      /* Text */
      .hero-title {
        margin-bottom: 0.5rem;
        font-family: "Orbitron", sans-serif;
        font-size: clamp(3rem, 10vw, 7rem);
        font-weight: 900;
        line-height: 1;
        letter-spacing: 0.05em;
        color: var(--text-primary);
        text-shadow: 0 0 40px var(--hero-glow, rgba(0, 245, 255, 0.4));
      }

      .hero-title span {
        color: var(--neon);
      }

      .hero-sub {
        margin-bottom: 1.5rem;
        font-family: "Orbitron", sans-serif;
        font-size: 1.1rem;
        font-weight: 700;
        letter-spacing: 0.4em;
        color: var(--text-muted);
      }

      .hero-desc {
        margin-bottom: 2.5rem;
        font-size: 1.1rem;
        line-height: 1.7;
        color: var(--text-secondary);
      }

      .hero-desc b {
        color: var(--neon);
      }

      .hero-desc b.bgmi {
        color: #a78bfa;
      }
      .hero-desc b.chess {
        color: var(--chess);
      }
      .hero-desc b.valorant {
        color: var(--valorant);
      }

      /* Buttons */
      .hero-btns {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 1rem;
      }

      .btn-solid,
      .btn-ghost {
        padding: 0.8rem 2rem;
        border-radius: 8px;
        font-family: "Orbitron", sans-serif;
        font-size: 0.8rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        transition:
          transform 0.3s,
          box-shadow 0.3s,
          background 0.3s;
      }

      .btn-solid {
        border: none;
        background: linear-gradient(135deg, var(--neon), #0099aa);
        color: var(--bg);
        cursor: pointer;
      }

      .btn-solid:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 30px rgba(0, 245, 255, 0.35);
      }

      .btn-ghost {
        display: inline-block;
        border: 1px solid rgba(0, 245, 255, 0.4);
        color: var(--neon);
      }

      .btn-ghost:hover {
        background: rgba(0, 245, 255, 0.08);
      }

      /* Social pills: set --c (color) and --rgb (same color as r, g, b) */
      .hero-socials {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 0.75rem;
        margin-top: 2rem;
      }

      .social-pill {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.55rem 1.25rem;
        border: 1px solid rgba(var(--rgb), 0.4);
        border-radius: 8px;
        background: rgba(var(--rgb), 0.07);
        font-size: 0.85rem;
        font-weight: 700;
        color: var(--c);
        transition:
          background 0.25s,
          transform 0.25s;
      }

      .social-pill:hover {
        background: rgba(var(--rgb), 0.15);
        transform: translateY(-2px);
      }

      .social-ig {
        --c: #e1306c;
        --rgb: 225, 48, 108;
      }
      .social-wa {
        --c: #25d366;
        --rgb: 37, 211, 102;
      }
      .social-yt {
        --c: #ff4444;
        --rgb: 255, 0, 0;
      }
      .social-dc {
        --c: #5865f2;
        --rgb: 88, 101, 242;
      }

      /* ==========================================================================
       STATS
       ========================================================================== */

      .stats-bar {
        position: relative;
        z-index: 1;
        border-block: 1px solid var(--border);
        background: var(--surface);
      }

      .stats-inner {
        max-width: 900px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
      }

      .stat {
        padding: 1.5rem;
        border-right: 1px solid var(--border);
        text-align: center;
      }

      .stat:last-child {
        border-right: none;
      }

      .stat-num {
        display: block;
        font-family: "Orbitron", sans-serif;
        font-size: 2rem;
        font-weight: 700;
        color: var(--neon);
      }

      .stat-num.alt {
        color: var(--neon2);
      }

      .stat-label {
        margin-top: 0.2rem;
        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: 0.15em;
        color: var(--text-muted);
      }

      /* ==========================================================================
       SECTIONS
       ========================================================================== */

      section {
        position: relative;
        z-index: 1;
      }

      .section-dim {
        background: var(--surface);
      }

      .section-inner {
        max-width: 1100px;
        margin: 0 auto;
        padding: 5rem 1.5rem;
      }

      .section-inner.tight {
        padding-block: 4rem;
      }

      .section-tag {
        margin-bottom: 0.75rem;
        font-family: "JetBrains Mono", monospace;
        font-size: 0.7rem;
        letter-spacing: 0.2em;
        color: var(--neon);
      }

      .section-title {
        margin-bottom: 3rem;
        font-family: "Orbitron", sans-serif;
        font-size: 2.5rem;
        font-weight: 900;
        color: var(--text-primary);
      }

      /* ==========================================================================
       GAME CARDS
       ========================================================================== */

      .game-cards {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
        gap: 1.5rem;
      }

      .game-card {
        display: block;
        padding: 2.5rem;
        border: 1px solid var(--border);
        border-radius: 16px;
        background: var(--card);
        text-align: center;
        box-shadow: var(--card-shadow, none);
        transition:
          transform 0.4s cubic-bezier(0.23, 1, 0.32, 1),
          border-color 0.4s cubic-bezier(0.23, 1, 0.32, 1),
          box-shadow 0.4s cubic-bezier(0.23, 1, 0.32, 1);
      }

      .game-card:hover {
        transform: translateY(-8px);
        border-color: var(--accent);
        box-shadow: 0 20px 60px var(--glow), var(--card-hover-shadow, none);
      }

      /* Variants: set accent + glow only */
      .game-card.ff {
        --accent: var(--neon);
        --glow: rgba(0, 245, 255, 0.15);
      }
      .game-card.bgmi {
        --accent: var(--neon2);
        --glow: rgba(123, 47, 255, 0.2);
      }
      .game-card.chess {
        --accent: var(--chess);
        --glow: rgba(245, 158, 11, 0.18);
      }
      .game-card.valorant {
        --accent: var(--valorant);
        --glow: rgba(255, 70, 85, 0.2);
      }

      .game-img-wrap {
        width: 100%;
        aspect-ratio: 16 / 9;
        margin-bottom: 1.5rem;
        border: 1px solid var(--border-subtle, var(--border));
        border-radius: 10px;
        background: var(--surface-secondary, var(--surface));
        overflow: hidden;
      }

      .game-img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
      }

      .game-card:hover .game-img {
        transform: scale(1.06);
      }

      .game-link {
        font-size: 0.8rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        color: var(--accent);
      }

      /* ==========================================================================
       FEATURES
       ========================================================================== */

      .features {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 2rem;
        margin-top: 1rem;
      }

      .feature {
        padding: 2rem;
        border: 1px solid var(--border);
        border-radius: 12px;
        background: var(--card);
        text-align: center;
        transition: border-color 0.2s ease, background 0.2s ease;
      }

      .feature-icon {
        margin-bottom: 1rem;
        font-size: 2.5rem;
      }

      .feature-title {
        margin-bottom: 0.5rem;
        font-family: "Orbitron", sans-serif;
        font-size: 1rem;
        font-weight: 700;
        color: var(--text-primary);
      }

      .feature-desc {
        font-size: 0.9rem;
        line-height: 1.6;
        color: var(--text-secondary);
      }

      /* ==========================================================================
       FOOTER
       ========================================================================== */

      footer {
        position: relative;
        z-index: 1;
        padding: 2rem;
        border-top: 1px solid var(--border);
        background: var(--bg);
        text-align: center;
      }

      footer .logo {
        margin-bottom: 0.5rem;
        font-family: "Orbitron", sans-serif;
        font-weight: 700;
        color: var(--text-primary);
      }

      footer .logo span {
        color: var(--neon);
      }

      footer p {
        font-size: 0.85rem;
        color: var(--text-muted);
      }

      /* ==========================================================================
       LIGHT THEME
       ========================================================================== */

      [data-theme="light"],
      body.light-theme {
        /* KYRON BRAND (Adjusted for Light Readability) */
        --kyron-cyan: #009FC2;
        --kyron-blue: #145FD1;
        --kyron-purple: #6848D8;
        --kyron-pink: #D6298A;
        --kyron-red: #E5232B;
        --kyron-red-hover: #F0323A;
        --kyron-sky: #009FC2;
        --kyron-violet: #6848D8;
        --cta: #E5232B;
        --cta-hover: #F0323A;

        /* BACKGROUNDS & SURFACES */
        --bg: #F7F9FC;
        --nav-bg: rgba(247, 249, 252, 0.92);
        --surface: #EEF2F7;
        --card: #FFFFFF;
        --surface-raised: #FFFFFF;
        --surface-secondary: #EEF2F7;
        --surface-elevated: #F8FAFF;

        /* TEXT SYSTEM */
        --text-primary: #111827;
        --text-secondary: #4B5563;
        --text-muted: #6B7280;
        --text-disabled: #9CA3AF;

        /* BORDERS */
        --border: #DCE2EC;
        --border-subtle: #DCE2EC;
        --border-strong: #C4CBD8;
        --border-brand: rgba(0, 159, 194, 0.28);
        --border-cta: rgba(229, 35, 43, 0.30);

        /* GLOW SYSTEM */
        --glow-cyan: rgba(0, 159, 194, 0.12);
        --glow-purple: rgba(104, 72, 216, 0.12);
        --glow-red: rgba(229, 35, 43, 0.15);
        --hero-glow: rgba(20, 95, 209, 0.12);

        /* LEGACY ALIAS OVERRIDES FOR LIGHT THEME */
        --neon: var(--kyron-cyan);
        --neon2: var(--kyron-purple);

        /* GRID OVERLAY */
        --grid-line: rgba(20, 95, 209, 0.03);
        --card-shadow: 0 4px 20px -2px rgba(17, 24, 39, 0.06), 0 2px 6px -1px rgba(17, 24, 39, 0.04);
        --card-hover-shadow: 0 12px 30px -4px rgba(17, 24, 39, 0.12), 0 4px 12px -2px rgba(17, 24, 39, 0.08);
      }


      /* ==========================================================================
       ANIMATIONS
       ========================================================================== */

      @keyframes orbpulse {
        0%,
        100% {
          transform: scale(1);
        }
        50% {
          transform: scale(1.15);
        }
      }

      @keyframes blink {
        0%,
        100% {
          opacity: 1;
        }
        50% {
          opacity: 0.3;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
          animation: none !important;
          transition: none !important;
        }
      }

      /* ==========================================================================
       RESPONSIVE
       ========================================================================== */

      @media (max-width: 600px) {
        .nav-links a:not(.nav-admin) {
          display: none;
        }

        .stats-inner {
          grid-template-columns: repeat(2, 1fr);
        }

        .stat:nth-child(2n) {
          border-right: none;
        }
      }