/* BASE */
* {margin:0; padding:0; box-sizing:border-box; scroll-behavior:smooth;}
body {font-family: Arial,sans-serif; color:white; background:linear-gradient(135deg,#0e0e0e 0%,#1a1a1a 100%); transition:0.3s;}
body.light {background:linear-gradient(135deg,#f4f4f4 0%,#e0e0e0 100%); color:#111;}

/* NAV */
nav {position:sticky; top:0; background:black; padding:15px 30px; display:flex; justify-content:space-between; align-items:center; z-index:100;}
nav ul {list-style:none; display:flex; gap:20px;}
nav a {color:white; text-decoration:none; font-weight:bold;}
nav button {background:none; border:none; font-size:20px; cursor:pointer; color:white;}

/* HERO */
.hero-container {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:40px; padding:60px 20px; animation:fadeUp 1.5s ease;}
.hero-card {background:#222; padding:10px; border-radius:15px; box-shadow:0 6px 25px rgba(0,188,212,0.5); transition:transform 0.3s, box-shadow 0.3s; position:relative;}
.hero-card::after {content:''; position:absolute; top:-10px; left:-10px; width:calc(100% + 20px); height:calc(100% + 20px); border-radius:15px; background:rgba(0,188,212,0.1); z-index:-1;}
.hero-card img {width:250px; height:auto; border-radius:15px; display:block;}
.hero-card:hover {transform:translateY(-5px); box-shadow:0 8px 25px rgba(0,188,212,0.5);}
.hero-text {max-width:400px; text-align:center;}
.hero-text h1 {font-size:36px; margin-bottom:10px; color:#00bcd4;}
.hero-text p {font-size:18px; margin-bottom:20px;}
.hero-text .btn {padding:12px 30px; font-weight:bold; border-radius:8px; background:#00bcd4; color:black; text-decoration:none; transition:transform 0.3s, box-shadow 0.3s;}
.hero-text .btn:hover {transform:translateY(-3px); box-shadow:0 6px 20px rgba(0,188,212,0.4);}
body.light .hero-card {background:#eee; box-shadow:0 6px 20px rgba(0,0,0,0.2);}
body.light .hero-text h1 {color:#007a8c;}
body.light .hero-text .btn {background:#007a8c; color:#fff;}
body.light .hero-text .btn:hover {box-shadow:0 6px 20px rgba(0,122,140,0.4);}

/* SECTIONS */
.section {padding:60px 20px; max-width:900px; margin:auto; animation:fadeUp 1s ease; border-radius:15px; background:rgba(20,20,20,0.6); opacity:0; transform:translateY(30px); transition:all 0.8s ease-out;}
body.light .section {background:rgba(255,255,255,0.7);}
.section.visible {opacity:1; transform:translateY(0);}
.section + .section {margin-top:40px;}

/* CARDS */
.stats-cards,.cards-container {display:grid; gap:20px; margin-bottom:40px;}
.stats-cards {grid-template-columns:repeat(auto-fit,minmax(120px,1fr));}
.cards-container {grid-template-columns:repeat(auto-fit,minmax(180px,1fr));}
.card {background:#222; padding:20px; border-radius:10px; text-align:center; transition:transform 0.3s, background 0.3s; box-shadow:0 4px 15px rgba(0,0,0,0.3);}
.card h3,h4 {margin-bottom:10px; font-size:16px; color:#00bcd4;}
.card p {font-size:16px; line-height:1.4;}
.card:hover {transform:translateY(-5px); background:#333;}
body.light .card {background:#eee; color:#111;}
body.light .card h3,h4 {color:#007a8c;}
body.light .card:hover {background:#ddd;}

/* Full width cards for Performance & Training */
.cards-container.full-width-cards {
  grid-template-columns: 1fr; /* single column for desktop */
}


/* ABOUT */
.about-card {background:#222; padding:30px 25px; border-radius:15px; box-shadow:0 6px 20px rgba(0,0,0,0.4); max-width:800px; margin:20px auto 0; line-height:1.8; transition:transform 0.3s, box-shadow 0.3s; text-align:center;}
.about-card:hover {transform:translateY(-5px); box-shadow:0 8px 25px rgba(0,0,0,0.5);}
body.light .about-card {background:#eee; color:#111;}
body.light .about-card:hover {box-shadow:0 8px 25px rgba(0,122,140,0.3);}

/* GALLERY */
.gallery-cards .card img,.gallery-cards .card video {width:100%; height:auto; border-radius:10px; display:block; box-shadow:0 4px 15px rgba(0,0,0,0.3); transition:transform 0.3s, box-shadow 0.3s;}
.gallery-cards .card:hover img,.gallery-cards .card:hover video {transform:scale(1.05); box-shadow:0 6px 20px rgba(0,0,0,0.4);}
body.light .gallery-cards .card img,body.light .gallery-cards .card video {box-shadow:0 4px 15px rgba(0,0,0,0.2);}
body.light .gallery-cards .card:hover img,body.light .gallery-cards .card:hover video {box-shadow:0 6px 20px rgba(0,0,0,0.3);}

/* CONTACT */
.contact-info {text-align:center; margin-bottom:25px; line-height:1.8;}
form {display:flex; flex-direction:column; gap:15px; max-width:500px; margin:auto;}
input,textarea {padding:10px; border-radius:5px; border:none; font-size:16px;}
body.light input,body.light textarea {background:#fff; color:#111;}

/* MODERN SEND BUTTON */
.btn-send {background:linear-gradient(135deg,#00bcd4,#008bb0); color:#fff; font-weight:bold; border:none; border-radius:12px; padding:14px 25px; font-size:16px; cursor:pointer; transition:all 0.3s ease; box-shadow:0 5px 15px rgba(0,188,212,0.4);}
.btn-send:hover {transform:translateY(-3px) scale(1.05); box-shadow:0 8px 25px rgba(0,188,212,0.5); background:linear-gradient(135deg,#008bb0,#00bcd4);}
body.light .btn-send {background:linear-gradient(135deg,#007a8c,#005f6b); box-shadow:0 5px 15px rgba(0,122,140,0.4);}
body.light .btn-send:hover {background:linear-gradient(135deg,#005f6b,#007a8c); box-shadow:0 8px 25px rgba(0,122,140,0.5);}

/* BUTTON LOADING */
.btn-loading {font-style:italic; letter-spacing:1px; animation:pulse 1s infinite;}
@keyframes pulse {0%{opacity:0.3;}50%{opacity:1;}100%{opacity:0.3;}}

/* FORM MESSAGE */
#formMessage {font-weight:bold; font-size:16px; text-align:center;}

/* FOOTER */
footer {text-align:center; padding:25px; background:rgba(0,0,0,0.8); border-top:2px solid #00bcd4; font-size:14px;}
body.light footer {background:rgba(255,255,255,0.8); border-top-color:#007a8c;}

/* LIGHTBOX */
.lightbox {display:none; position:fixed; z-index:1000; padding-top:60px; left:0; top:0; width:100%; height:100%; overflow:auto; background-color:rgba(0,0,0,0.9);}
.lightbox-content,.lightbox-video {margin:auto; display:block; max-width:90%; max-height:80%; border-radius:12px;}
.lightbox-video {display:none;}
.lightbox-close {position:absolute; top:20px; right:35px; color:#fff; font-size:40px; font-weight:bold; cursor:pointer; transition:0.3s;}
.lightbox-close:hover {color:#00bcd4;}

/* MEDIA QUERIES */
@media(max-width:768px){
  nav ul{display:none;}
  .hero-container{flex-direction:column;}
  .hero-card img{width:200px;}
  .hero-text h1{font-size:28px;}
  .hero-text p{font-size:16px;}
  .gallery-cards,.stats-cards,.cards-container{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));}
}

/* ANIMATIONS */
@keyframes fadeUp{from{opacity:0; transform:translateY(30px);} to{opacity:1; transform:translateY(0);}}