/* ==========================================
   SPORTBN LANDING PAGE
   Author: ChatGPT
   ========================================== */

   :root{

    --primary:#16a34a;
    --primary-dark:#15803d;
    --secondary:#22c55e;
    
    --bg:#08111f;
    --bg2:#101c30;
    --card:#132238;
    
    --white:#ffffff;
    --text:#d6dbe4;
    --gray:#8d9aad;
    
    --border:rgba(255,255,255,.08);
    
    --shadow:0 20px 60px rgba(0,0,0,.35);
    
    --radius:18px;
    
    --transition:.35s ease;
    
    --container:1200px;
    
    }
    
    *{
    margin:0;
    padding:0;
    box-sizing:border-box;
    }
    
    html{
    scroll-behavior:smooth;
    }
    
    body{
    
    font-family:
    Inter,
    Segoe UI,
    Arial,
    sans-serif;
    
    background:var(--bg);
    
    color:var(--white);
    
    overflow-x:hidden;
    
    line-height:1.7;
    
    }
    
    /* ================= */
    
    body::before{
    
    content:"";
    
    position:fixed;
    
    left:-200px;
    top:-200px;
    
    width:500px;
    height:500px;
    
    background:#16a34a;
    
    filter:blur(180px);
    
    opacity:.15;
    
    z-index:-2;
    
    }
    
    body::after{
    
    content:"";
    
    position:fixed;
    
    right:-250px;
    bottom:-200px;
    
    width:550px;
    height:550px;
    
    background:#2563eb;
    
    filter:blur(220px);
    
    opacity:.18;
    
    z-index:-2;
    
    }
    
    /* ================= */
    
    .bg-animation{
    
    position:fixed;
    
    inset:0;
    
    background:
    
    radial-gradient(circle at 20% 20%,rgba(34,197,94,.12),transparent 30%),
    
    radial-gradient(circle at 80% 60%,rgba(59,130,246,.12),transparent 35%),
    
    radial-gradient(circle at 50% 90%,rgba(16,185,129,.10),transparent 25%);
    
    animation:bgMove 20s linear infinite;
    
    z-index:-1;
    
    }
    
    @keyframes bgMove{
    
    0%{
    
    transform:translateY(0);
    
    }
    
    50%{
    
    transform:translateY(-25px);
    
    }
    
    100%{
    
    transform:translateY(0);
    
    }
    
    }
    
    /* ================= */
    
    .container{
    
    width:min(92%,var(--container));
    
    margin:auto;
    
    }
    
    /* ================= */
    
    header{
    
    position:fixed;
    
    top:0;
    left:0;
    
    width:100%;
    
    backdrop-filter:blur(18px);
    
    background:rgba(8,17,31,.72);
    
    border-bottom:1px solid rgba(255,255,255,.06);
    
    z-index:999;
    
    }
    
    header .container{
    
    display:flex;
    
    justify-content:space-between;
    
    align-items:center;
    
    padding:18px 0;
    
    }
    
    .logo{
    
    font-size:30px;
    
    font-weight:800;
    
    color:var(--white);
    
    letter-spacing:.5px;
    
    }
    
    .logo span{
    
    color:var(--secondary);
    
    }
    
    nav{
    
    display:flex;
    
    gap:35px;
    
    }
    
    nav a{
    
    text-decoration:none;
    
    color:var(--text);
    
    font-weight:600;
    
    transition:var(--transition);
    
    }
    
    nav a:hover{
    
    color:var(--secondary);
    
    }
    
    .header-btn{
    
    padding:13px 24px;
    
    background:linear-gradient(135deg,var(--secondary),var(--primary));
    
    border-radius:12px;
    
    text-decoration:none;
    
    color:white;
    
    font-weight:700;
    
    transition:var(--transition);
    
    box-shadow:0 12px 30px rgba(34,197,94,.35);
    
    }
    
    .header-btn:hover{
    
    transform:translateY(-3px);
    
    }
    
    /* ================= */
    
    .hero{
    
    padding-top:170px;
    
    padding-bottom:120px;
    
    }
    
    .hero-grid{
    
    display:grid;
    
    grid-template-columns:1.1fr .9fr;
    
    align-items:center;
    
    gap:70px;
    
    }
    
    .badge{
    
    display:inline-flex;
    
    padding:8px 18px;
    
    background:rgba(34,197,94,.14);
    
    border:1px solid rgba(34,197,94,.25);
    
    border-radius:100px;
    
    font-size:14px;
    
    font-weight:700;
    
    color:#6ee7b7;
    
    margin-bottom:20px;
    
    }
    
    .hero h1{
    
    font-size:65px;
    
    line-height:1.1;
    
    margin-bottom:25px;
    
    }
    
    .hero p{
    
    font-size:20px;
    
    color:var(--gray);
    
    max-width:650px;
    
    }
    
    .buttons{
    
    display:flex;
    
    gap:18px;
    
    margin-top:40px;
    
    flex-wrap:wrap;
    
    }
    
    .btn{
    
    display:inline-flex;
    
    align-items:center;
    
    justify-content:center;
    
    padding:18px 34px;
    
    border-radius:15px;
    
    font-weight:700;
    
    text-decoration:none;
    
    transition:var(--transition);
    
    }
    
    .btn:first-child{
    
    background:linear-gradient(135deg,#22c55e,#16a34a);
    
    color:white;
    
    box-shadow:0 15px 40px rgba(34,197,94,.30);
    
    }
    
    .btn.secondary{
    
    background:transparent;
    
    border:1px solid rgba(255,255,255,.1);
    
    color:white;
    
    }
    
    .btn:hover{
    
    transform:translateY(-5px);
    
    }
    
    /* ================= */
    
    .hero-card{
    
    background:rgba(255,255,255,.05);
    
    backdrop-filter:blur(25px);
    
    border:1px solid rgba(255,255,255,.08);
    
    border-radius:25px;
    
    padding:40px;
    
    box-shadow:var(--shadow);
    
    }
    
    .live-dot{
    
    width:15px;
    height:15px;
    
    border-radius:50%;
    
    background:#ef4444;
    
    margin-bottom:25px;
    
    animation:pulse 1.4s infinite;
    
    }
    
    @keyframes pulse{
    
    0%{
    
    transform:scale(1);
    
    box-shadow:0 0 0 0 rgba(239,68,68,.7);
    
    }
    
    70%{
    
    transform:scale(1.15);
    
    box-shadow:0 0 0 15px rgba(239,68,68,0);
    
    }
    
    100%{
    
    transform:scale(1);
    
    }
    
    }
    
    .hero-card h3{
    
    font-size:28px;
    
    margin-bottom:20px;
    
    }
    
    .hero-card ul{
    
    list-style:none;
    
    display:grid;
    
    gap:15px;
    
    }
    
    .hero-card li{
    
    padding:15px 18px;
    
    background:rgba(255,255,255,.04);
    
    border-radius:12px;
    
    border:1px solid rgba(255,255,255,.05);
    
    transition:.3s;
    
    }
    
    .hero-card li:hover{
    
    background:rgba(34,197,94,.10);
    
    transform:translateX(8px);
    
    }

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

.section{

    padding:100px 0;
    
    }
    
    .section h2{
    
    font-size:42px;
    
    text-align:center;
    
    margin-bottom:60px;
    
    font-weight:800;
    
    }
    
    .cards{
    
    display:grid;
    
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    
    gap:30px;
    
    }
    
    .card{
    
    background:rgba(255,255,255,.04);
    
    backdrop-filter:blur(18px);
    
    border:1px solid rgba(255,255,255,.08);
    
    border-radius:20px;
    
    padding:35px;
    
    transition:.35s;
    
    overflow:hidden;
    
    position:relative;
    
    }
    
    .card::before{
    
    content:"";
    
    position:absolute;
    
    top:0;
    
    left:-100%;
    
    width:100%;
    
    height:100%;
    
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);
    
    transition:.7s;
    
    }
    
    .card:hover::before{
    
    left:100%;
    
    }
    
    .card:hover{
    
    transform:translateY(-12px);
    
    border-color:rgba(34,197,94,.35);
    
    box-shadow:0 20px 50px rgba(0,0,0,.35);
    
    }
    
    .icon{
    
    width:70px;
    
    height:70px;
    
    display:flex;
    
    align-items:center;
    
    justify-content:center;
    
    font-size:32px;
    
    border-radius:18px;
    
    background:linear-gradient(135deg,#22c55e,#16a34a);
    
    margin-bottom:25px;
    
    }
    
    .card h3{
    
    font-size:24px;
    
    margin-bottom:15px;
    
    }
    
    .card p{
    
    color:var(--gray);
    
    font-size:16px;
    
    line-height:1.8;
    
    }
    
    /* ==========================================
       LEAGUES
    ========================================== */
    
    .dark{
    
    background:#0d1729;
    
    }
    
    .league-grid{
    
    display:grid;
    
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    
    gap:20px;
    
    }
    
    .league-grid div{
    
    padding:22px;
    
    text-align:center;
    
    border-radius:16px;
    
    background:rgba(255,255,255,.04);
    
    border:1px solid rgba(255,255,255,.08);
    
    font-weight:700;
    
    transition:.35s;
    
    cursor:pointer;
    
    }
    
    .league-grid div:hover{
    
    background:linear-gradient(135deg,#22c55e,#16a34a);
    
    transform:translateY(-8px);
    
    }
    
    /* ==========================================
       CTA
    ========================================== */
    
    .cta{
    
    padding:120px 0;
    
    text-align:center;
    
    }
    
    .cta h2{
    
    font-size:48px;
    
    margin-bottom:20px;
    
    }
    
    .cta p{
    
    color:var(--gray);
    
    font-size:20px;
    
    margin-bottom:40px;
    
    }
    
    .btn.big{
    
    padding:22px 50px;
    
    font-size:20px;
    
    border-radius:18px;
    
    }
    
    /* ==========================================
       FAQ
    ========================================== */
    
    .faq{
    
    max-width:900px;
    
    margin:auto;
    
    }
    
    .faq-item{
    
    background:rgba(255,255,255,.04);
    
    border:1px solid rgba(255,255,255,.08);
    
    border-radius:16px;
    
    margin-bottom:18px;
    
    overflow:hidden;
    
    }
    
    .faq-item button{
    
    width:100%;
    
    background:none;
    
    border:none;
    
    color:#fff;
    
    font-size:19px;
    
    font-weight:700;
    
    padding:22px 28px;
    
    text-align:left;
    
    cursor:pointer;
    
    transition:.3s;
    
    }
    
    .faq-item button:hover{
    
    color:#6ee7b7;
    
    }
    
    .answer{
    
    display:none;
    
    padding:0 28px 24px;
    
    color:var(--gray);
    
    line-height:1.8;
    
    }
    
    /* ==========================================
       FOOTER
    ========================================== */
    
    footer{
    
    padding:80px 0;
    
    text-align:center;
    
    border-top:1px solid rgba(255,255,255,.08);
    
    background:#08111f;
    
    }
    
    footer h3{
    
    font-size:34px;
    
    margin-bottom:15px;
    
    }
    
    footer p{
    
    color:var(--gray);
    
    }
    
    .footer-btn{
    
    display:inline-block;
    
    margin:35px 0;
    
    padding:16px 35px;
    
    border-radius:14px;
    
    background:linear-gradient(135deg,#22c55e,#16a34a);
    
    color:white;
    
    text-decoration:none;
    
    font-weight:700;
    
    transition:.35s;
    
    }
    
    .footer-btn:hover{
    
    transform:translateY(-5px);
    
    }
    
    .copyright{
    
    margin-top:30px;
    
    font-size:14px;
    
    opacity:.7;
    
    }
    
    /* ==========================================
       RESPONSIVE
    ========================================== */
    
    @media(max-width:992px){
    
    .hero-grid{
    
    grid-template-columns:1fr;
    
    }
    
    .hero{
    
    text-align:center;
    
    }
    
    .hero h1{
    
    font-size:48px;
    
    }
    
    .hero-card{
    
    margin-top:40px;
    
    }
    
    nav{
    
    display:none;
    
    }
    
    header .container{
    
    justify-content:space-between;
    
    }
    
    }
    
    @media(max-width:768px){
    
    .hero{
    
    padding-top:130px;
    
    }
    
    .hero h1{
    
    font-size:38px;
    
    }
    
    .hero p{
    
    font-size:17px;
    
    }
    
    .section h2{
    
    font-size:32px;
    
    }
    
    .cta h2{
    
    font-size:34px;
    
    }
    
    .cards{
    
    grid-template-columns:1fr;
    
    }
    
    .league-grid{
    
    grid-template-columns:repeat(2,1fr);
    
    }
    
    }
    
    @media(max-width:480px){
    
    .logo{
    
    font-size:24px;
    
    }
    
    .header-btn{
    
    padding:10px 18px;
    
    font-size:14px;
    
    }
    
    .hero h1{
    
    font-size:30px;
    
    }
    
    .hero-card{
    
    padding:25px;
    
    }
    
    .btn{
    
    width:100%;
    
    }
    
    .buttons{
    
    flex-direction:column;
    
    }
    
    .league-grid{
    
    grid-template-columns:1fr;
    
    }
    
    }

    /* ===========================
   JS EFFECTS
=========================== */

.hidden{

    opacity:0;
    
    transform:translateY(50px);
    
    transition:all .8s ease;
    
    }
    
    .show{
    
    opacity:1;
    
    transform:translateY(0);
    
    }
    
    .btn,
    .header-btn,
    .footer-btn{
    
    position:relative;
    
    overflow:hidden;
    
    }
    
    .ripple{
    
    position:absolute;
    
    width:15px;
    
    height:15px;
    
    background:rgba(255,255,255,.5);
    
    border-radius:50%;
    
    transform:translate(-50%,-50%);
    
    animation:ripple .6s linear;
    
    pointer-events:none;
    
    }
    
    @keyframes ripple{
    
    from{
    
    width:0;
    
    height:0;
    
    opacity:1;
    
    }
    
    to{
    
    width:450px;
    
    height:450px;
    
    opacity:0;
    
    }
    
    }