:root{--bg:#000;--panel-2:#0d0d0e;--text:#d5d9e0;--muted:#93a0af;--accent:#32d46a;--accent-2:#22d3ee;--border:#18222e}*{box-sizing:border-box}body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}a{color:var(--accent-2);text-decoration:none}a:hover{text-decoration:underline}.container{max-width:1200px;margin:0 auto;padding:0 18px}.nav{position:fixed;inset:0 0 auto 0;height:64px;display:flex;align-items:center;z-index:30;background:#000}.nav .container{display:flex;align-items:center;justify-content:space-between;width:100%}.brand{font-weight:800;letter-spacing:.04em;color:#fff;text-decoration:none}.brand:hover{text-decoration:none}.nav-links{display:flex;align-items:center;gap:18px}.nav a{color:#cbd5e1}.nav a:hover{color:var(--accent-2);text-decoration:none}.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:10px;border:1px solid var(--border);background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(0,0,0,0));color:var(--text);font-weight:600;text-decoration:none}.btn:hover{border-color:#234055;text-decoration:none}.btn.primary{background:linear-gradient(180deg,rgba(50,212,106,.15),rgba(50,212,106,.05));border-color:rgba(50,212,106,.35)}.hero{padding:100px 0 40px;text-align:center}.breadcrumb{font-size:14px;color:var(--muted);margin-bottom:16px}.breadcrumb a{color:var(--muted)}.breadcrumb a:hover{color:var(--accent-2)}.hero h1{font-size:clamp(36px,8vw,56px);font-weight:900;margin:0 0 16px;display:flex;align-items:center;justify-content:center;gap:16px}.hero-icon{font-size:56px}.hero p{font-size:20px;color:var(--muted);max-width:700px;margin:0 auto 24px}.cta-row{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}.stats{display:flex;gap:24px;justify-content:center;margin:32px 0 48px;flex-wrap:wrap}.stat-box{padding:20px 28px;background:var(--panel-2);border:1px solid var(--border);border-radius:12px;text-align:center;transition:all .2s}.stat-box:hover{border-color:var(--accent);transform:translateY(-2px)}.stat-box .number{font-size:36px;font-weight:900;color:#fff}.stat-box .label{color:var(--muted);font-size:14px}.section{padding:48px 0}.region-group{margin-bottom:48px}.region-group h3{font-size:20px;font-weight:700;margin:0 0 20px;padding-bottom:12px;border-bottom:1px solid var(--border);color:var(--accent-2)}.leagues-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}.league-card{background:var(--panel-2);border:1px solid var(--border);border-radius:12px;padding:20px 24px;display:flex;align-items:center;justify-content:space-between;transition:all .2s;text-decoration:none;color:inherit}.league-card:hover{border-color:var(--accent);transform:translateX(4px);text-decoration:none}.league-info h3{font-size:16px;font-weight:700;color:#fff;margin:0 0 4px}.league-info p{font-size:13px;color:var(--muted);margin:0}.league-arrow{color:var(--accent-2);font-size:18px;margin-left:12px}.highlight-box{background:linear-gradient(180deg,rgba(42,42,42,.7),rgba(42,42,42,.4));border:1px solid #333;border-radius:16px;padding:48px 32px;margin:48px 0;text-align:center}.highlight-box h2{font-size:28px;font-weight:800;margin-bottom:12px}.highlight-box p{font-size:18px;color:var(--muted);margin-bottom:24px}.highlight-box .cta{display:inline-flex;padding:14px 28px;background:linear-gradient(180deg,rgba(50,212,106,.15),rgba(50,212,106,.05));border:1px solid rgba(50,212,106,.35);border-radius:10px;color:#fff;font-weight:600;font-size:18px;text-decoration:none;transition:all .2s}.highlight-box .cta:hover{transform:translateY(-2px);text-decoration:none}.footer{padding:48px 0;border-top:1px solid var(--border);background:#0d0d0e;margin-top:48px}.mobile-menu-toggle{display:none;background:none;border:none;color:#fff;font-size:24px;cursor:pointer}@media(max-width:768px){.nav-links{display:none}.mobile-menu-toggle{display:block}.leagues-grid{grid-template-columns:1fr}.hero h1{font-size:32px;flex-direction:column;gap:8px}}
    /* Region Modal */
    .region-modal-backdrop { position: fixed; inset: 0; display: none; align-items: flex-end; justify-content: flex-end; z-index: 40; background: transparent; pointer-events: none; padding: 16px; }
    .region-modal-backdrop.show { display: flex; }
    .region-modal { width: 100%; max-width: 260px; background: linear-gradient(180deg, rgba(42,42,42,0.9), rgba(42,42,42,0.7)); border: 1px solid #333; border-radius: 12px; padding: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.4); pointer-events: auto; }
    .region-modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
    .region-modal-title { font-size: 18px; font-weight: 800; line-height: 1.2; }
    .region-modal-close { border: none; background: transparent; color: #64748b; cursor: pointer; font-size: 18px; line-height: 1; }
    .region-modal-label { position: absolute; left: -9999px; }
    .region-modal-input, .region-modal-select { width: 100%; padding: 8px 10px; border-radius: 8px; border: 1px solid #333; background: #2a2a2a; color: #e5e7eb; font-size: 14px; margin-bottom: 10px; }
    .region-modal-input:focus, .region-modal-select:focus { outline: none; border-color: #333; }
    .region-modal-select option { background: #2a2a2a; color: #e5e7eb; }
    .region-modal-footer { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
    .region-modal-primary { width: 100%; padding: 10px 14px; border-radius: 8px; border: none; cursor: pointer; font-weight: 600; font-size: 14px; background: linear-gradient(135deg, #22c55e, #16a34a); color: #020617; }
    .region-modal-primary:hover { background: linear-gradient(135deg, #16a34a, #15803d); }

    /* Dropdown */
    .dropdown { position: relative; }
    .dropdown-toggle { cursor: pointer; display: flex; align-items: center; gap: 4px; padding: 8px 0; }
    .dropdown-menu { display: none; position: absolute; top: 100%; left: -20px; background: #0d0d0e; border: 1px solid #333; border-radius: 12px; padding: 20px; min-width: 520px; box-shadow: 0 10px 40px rgba(0,0,0,0.5); z-index: 100; }
    .dropdown:hover .dropdown-menu { display: flex; gap: 32px; }
    .dropdown::before { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 20px; z-index: 99; }
    .dropdown-section { flex: 1; }
    .dropdown-section h4 { margin: 0 0 12px; color: var(--accent); font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }
    .dropdown-section a { display: block; padding: 8px 12px; color: var(--text); border-radius: 6px; margin-bottom: 4px; font-size: 14px; }
    .dropdown-section a:hover { background: rgba(50,212,106,0.1); text-decoration: none; }

    /* Mobile Menu */
    .mobile-menu { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: #000; z-index: 40; display: none; flex-direction: column; overflow: hidden; }
    .mobile-menu.active { display: flex; }
    .mobile-menu-header { display: flex; justify-content: space-between; align-items: center; padding: 20px; flex-shrink: 0; }
    .mobile-menu-links { flex: 1; display: flex; flex-direction: column; gap: 32px; align-items: center; justify-content: center; height: 100%; }
    .mobile-menu-links a { color: #fff; font-size: 32px; line-height: 1.25; text-decoration: none; font-weight: 600; }
    .mobile-menu-cta { flex-shrink: 0; padding: 0; display: flex; justify-content: center; margin-top: 24px; margin-bottom: 72px; }
    .mobile-menu-cta .btn { width: 240px; text-align: center; font-size: 20px; padding: 16px 24px; }
    .mobile-menu-close { background: none; border: none; color: white; font-size: 28px; cursor: pointer; font-weight: 300; }
    body.mobile-menu-open { overflow: hidden; }