:root{
    --bg-1: #0f2027;
    --bg-2: #203a43;
    --bg-3: #2c5364;
    --accent-1: #00c6ff;
    --accent-2: #00ffcc;
    --card-bg: rgba(255,255,255,0.06);
    --glass: rgba(255,255,255,0.05);
    --muted: rgba(255,255,255,0.75);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
    font-family: 'Poppins', sans-serif;
    background: linear-gradient(135deg,var(--bg-1),var(--bg-2),var(--bg-3));
    color: #fff;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    line-height:1.5;
}
/* Layout container */
.site{max-width:1100px;margin:36px auto;padding:18px;min-height:calc(100vh - 120px);display:flex;flex-direction:column}

/* Page header for inner pages */
.page-header{display:flex;align-items:center;gap:18px;margin-bottom:18px}
.page-header a{color:var(--accent-1);text-decoration:none;font-weight:600;background:transparent}
.page-header h1{margin:0;color:var(--accent-2);font-size:26px}

/* Header / Hero */
header{
    background: linear-gradient(90deg,var(--accent-1),#0072ff 70%);
    border-radius:16px;padding:48px 32px;text-align:center;color:#012;
    box-shadow: 0 10px 30px rgba(0,0,0,0.45);
}
header h1{font-size:28px;letter-spacing:1px;margin-bottom:8px}
header p{opacity:0.95;color:#002;max-width:900px;margin:0 auto}

/* Navigation */
.nav{display:flex;gap:12px;justify-content:center;margin-top:18px}
.nav a{background:rgba(255,255,255,0.9);padding:8px 14px;border-radius:999px;color:#002;text-decoration:none;font-weight:600;box-shadow:0 6px 18px rgba(0,0,0,0.12)}

/* Grid of clubs */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:28px;margin:40px 0}
.card{background:var(--card-bg);border-radius:18px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,0.6);transition:transform .36s ease,box-shadow .36s ease}
.card:hover{transform:translateY(-10px);box-shadow:0 30px 90px rgba(0,0,0,0.7)}
.card img{width:100%;height:220px;object-fit:cover;display:block}
.card-body{padding:28px}
.card h2{background:linear-gradient(90deg,var(--accent-1),var(--accent-2));-webkit-background-clip:text;color:transparent;font-size:20px;margin-bottom:8px}
.card p{color:var(--muted)}
.btn{display:inline-block;margin-top:14px;padding:10px 22px;border-radius:999px;background:linear-gradient(90deg,var(--accent-1),var(--accent-2));color:#002;text-decoration:none;font-weight:700}

/* Section common */
.section{background:var(--glass);padding:22px;border-radius:14px;margin-bottom:22px;border:1px solid rgba(255,255,255,0.02)}
h1,h2{margin-bottom:12px}

/* Forms */
form{display:grid;gap:10px}
input[type="text"],input,select,textarea{
    width:100%;padding:12px;border-radius:10px;border:1px solid rgba(255,255,255,0.06);background:transparent;color:#fff;outline:none
}
input::placeholder{color:rgba(255,255,255,0.35)}
input[type="file"]{padding:8px;border-radius:8px;border:1px solid rgba(255,255,255,0.04)}
/* keep button width auto and align actions */
.form-actions{display:flex;justify-content:flex-end;margin-top:6px}
button{background:linear-gradient(90deg,var(--accent-1),var(--accent-2));color:#002;border:none;font-weight:700;padding:10px 18px;border-radius:10px;cursor:pointer;max-width:220px}


/* Footer */
/* Footer inside .site will stick to bottom when content is short */
.site footer{margin-top:auto;text-align:center;padding:22px;color:rgba(255,255,255,0.8)}

/* Small screens */
@media (max-width:520px){
    header{padding:28px 18px}
    .card img{height:180px}
}

/* Homepage-specific sizing for easier reading */
body.home{font-size:17px}
body.home header h1{font-size:34px}
body.home .nav a{padding:10px 16px}
body.home .card h2{font-size:18px}