:root{
    --bg:#0b1220;
    --card:#111a2d;
    --soft:#18243d;
    --text:#e8eefc;
    --muted:#a9b4d0;
    --accent:#ffb000;
    --accent2:#ff6a00;
    --ok:#32d583;
    --danger:#ff4d4d;
    --ring: rgba(255,176,0,.22);
    --shadow: 0 12px 30px rgba(0,0,0,.25);
    --radius: 18px;
    --max: 1200px;
  }

  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
    color:var(--text);
    background:
      radial-gradient(900px 500px at 15% 10%, rgba(255,176,0,.20), transparent 60%),
      radial-gradient(800px 500px at 85% 15%, rgba(255,106,0,.18), transparent 60%),
      radial-gradient(900px 700px at 70% 90%, rgba(76,110,245,.18), transparent 60%),
      var(--bg);
    line-height:1.45;
  }
  a{color:inherit}
  .container{max-width:var(--max); margin:0 auto; padding:0 18px}

  .pill{
    display:inline-flex; gap:10px; align-items:center;
    padding:8px 12px; border:1px solid rgba(255,255,255,.10);
    border-radius:999px; background:rgba(255,255,255,.06);
    color:var(--muted); font-size:13px;
  }
  .dot{width:8px;height:8px;border-radius:999px;background:linear-gradient(135deg,var(--accent),var(--accent2))}



/* ================= BUTTONS ================= */
.btn{
  cursor:pointer;
  border:0;
  color:#0b1220;
  font-weight:700;
  padding:12px 16px;
  border-radius:14px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  box-shadow:0 12px 26px rgba(255,176,0,.20);
  transition:.15s ease;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.btn:hover{transform:translateY(-1px)}
.btn.secondary{
  background:rgba(255,255,255,.06);
  color:var(--text);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:none;
}


/* ================= HEADER ================= */
header{
  position:sticky;
  top:0;
  z-index:3000;
  background:#0b1220;        /* solid black */
  border-bottom:1px solid rgba(255,255,255,.08);
}

.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 16px;
}

/* ================= BRAND ================= */
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
}

.brandLogo{
  width:150px;
  height:auto;
  display:block;
}

/* ================= DESKTOP NAV ================= */
nav ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  gap:6px;
}

nav a{
  text-decoration:none;
  font-weight:600;
  font-size:14px;
  color:#bfc6d4;
  padding:10px 12px;
  border-radius:12px;
}

nav a:hover{
  background:rgba(255,255,255,.08);
  color:#fff;
}

nav a.active{
  background:rgba(255,176,0,.18);
  color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,176,0,.35);
}

.nav-cta{
  display:flex;
  gap:10px;
  align-items:center;
}
.menu-cta{
  display:none;
}
/* ================= HAMBURGER ================= */
.menuBtn{
  display:none;
  width:34px;
  height:22px;
  background:none;
  border:0;
  padding:0;
  cursor:pointer;
  flex-direction:column;
  justify-content:space-between;
}

.menuBtn span{
  display:block;
  width:100%;
  height:3px;
  background:#ffffff;
  border-radius:3px;
}

/* ================= MOBILE ================= */
@media (max-width:768px){

  /* hide desktop CTA */
  .nav-cta{
    display:none;
  }
  .menu-cta{
    display:flex;          /* force show on mobile */
  }
  /* show hamburger */
  .menuBtn{
    display:flex;
  }

  /* FLOATING MENU */
  nav{
    display:block;
    position:fixed;
    top:68px;                /* just below header */
    right:16px;
    width:150px;

    background:#0b1220;      /* BLACK MENU */
    border-radius:18px;
    padding:12px;

    box-shadow:0 20px 40px rgba(0,0,0,.5);

    opacity:0;
    transform:translateY(-10px);
    pointer-events:none;
    transition:.25s ease;

    z-index:99999;
  }

  nav.open{
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
  }

  nav ul{
    display:flex;
    flex-direction:column;
    gap:15px;
  }

  nav a{
    color:#ffffff;
    padding:8px 10px;      
  }

  nav a:hover{
    background:rgba(255,255,255,.1);
  }

  /* MOBILE CTA INSIDE MENU */
  .menu-cta{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-top:14px;
  }
}
 



  /* Hero */
  .hero{padding:46px 0 24px}
  .heroGrid{
    display:grid;
    grid-template-columns: 1.15fr .85fr;
    gap:18px;
    align-items:stretch;
  }
  .heroCard{
    border-radius:var(--radius);
    background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
    border:1px solid rgba(255,255,255,.10);
    box-shadow: var(--shadow);
    padding:26px;
    overflow:hidden;
    position:relative;
  }
  .heroCard:before{
    content:"";
    position:absolute; inset:-2px;
    background: radial-gradient(500px 260px at 20% 10%, rgba(255,176,0,.25), transparent 60%),
                radial-gradient(500px 260px at 80% 0%, rgba(255,106,0,.20), transparent 60%);
    pointer-events:none;
    opacity:.9;
  }
  .heroCard > *{position:relative}

  .hero h1{
    margin:14px 0 10px;
    font-size: clamp(30px, 4vw, 46px);
    line-height:1.05;
    letter-spacing:-.6px;
  }
  .hero p{margin:0 0 16px; color:var(--muted); font-size:16px; max-width:60ch}
  .heroActions{display:flex; gap:12px; flex-wrap:wrap; margin-top:8px}

  .miniCard{
    border-radius:var(--radius);
    background: rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.10);
    box-shadow: var(--shadow);
    padding:18px;
    overflow:hidden;
    position:relative;
  }
  .miniCard h3{margin:8px 0 8px; font-size:16px}
  .miniCard p{margin:0; color:var(--muted); font-size:14px}

  .statRow{display:flex; gap:12px; margin-top:14px; flex-wrap:wrap}
  .stat{
    padding:10px 12px;
    border-radius:14px;
    background: rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.10);
    min-width:120px;
  }
  .stat b{display:block; font-size:18px}
  .stat span{color:var(--muted); font-size:12px}

  /* Hero Right: Carousel */
  .heroRight{padding:18px}

  .carousel{
    position:relative;
    border-radius: var(--radius);
    overflow:hidden;
    border:1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.04);
    box-shadow: var(--shadow);
  }
  .carouselTrack{
    display:flex;
    width:100%;
    transition: transform .45s ease;
  }
  .slide{min-width:100%; position:relative}

  .slide img,
  .slide video{
    width:100%;
    height:420px;
    object-fit:cover;
    display:block;
    background: rgba(0,0,0,.2);
  }

  .slideCap{
    position:absolute;
    left:12px; right:12px; bottom:12px;
    padding:10px 12px;
    border-radius:14px;
    background: rgba(11,18,32,.58);
    backdrop-filter: blur(6px);
    border:1px solid rgba(255,255,255,.10);
    display:flex;
    flex-direction:column;
    gap:2px;
  }
  .slideCap b{font-size:13px}
  .slideCap span{font-size:12px; color:var(--muted); font-weight:600}

  .carBtn{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:44px;
    height:44px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.06);
    color: var(--text);
    cursor:pointer;
    font-weight:900;
    font-size:26px;
    display:grid;
    place-items:center;
    user-select:none;
  }
  .carBtn:hover{background: rgba(255,255,255,.10)}
  .carBtn.prev{left:10px}
  .carBtn.next{right:10px}

  .carDots{
    position:absolute;
    left:0; right:0;
    bottom:10px;
    display:flex;
    justify-content:center;
    gap:8px;
    padding: 0 12px;
  }
  .dotBtn{
    width:10px;
    height:10px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.10);
    cursor:pointer;
  }
  .dotBtn.active{
    background: linear-gradient(135deg,var(--accent),var(--accent2));
    border-color: rgba(255,176,0,.25);
  }

  /* Sections */
  section{padding:34px 0}
  .sectionTitle{
    display:flex; align-items:flex-end; justify-content:space-between; gap:14px;
    margin-bottom:14px;
    background-color: rgba(0, 0, 0, 0.9);
    border-radius: 20px;
    padding: 10px;
  }
  .sectionTitle h2{margin:0; font-size:22px}
  .sectionTitle p{margin:0; color:var(--muted); font-size:14px}

  .grid3{display:grid; grid-template-columns: repeat(3, 1fr); gap:14px}
  .card{
    border-radius:var(--radius);
    background: rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.10);
    padding:16px;
    box-shadow: var(--shadow);
    background-color: rgba(0, 0, 0, 0.9);
  }
  .card h3{margin:8px 0 8px; font-size:16px}
  .card p{margin:0; color:var(--muted); font-size:14px}

  .badge{
    display:inline-flex; align-items:center; gap:8px;
    padding:7px 10px; border-radius:999px;
    background: rgba(255,176,0,.14);
    border:1px solid rgba(255,176,0,.18);
    color:var(--text); font-weight:700; font-size:12px;
  }

  /* Coach section (your existing #coach section) */
  #coach{
    background: url('photos/section_coach.jpg') center/cover no-repeat;
  }
  #programs{
    background: url('photos/section_programs.jpg') center/cover no-repeat;
  }
  #contact{
    background: url('photos/section_contact.jpg') bottom/cover no-repeat;
  }
  .coachGrid{
    display:grid;
    grid-template-columns: 1.25fr .75fr;
    gap:14px;
  }
  .coachHeader{
    display:flex;
    gap:14px;
    align-items:center;
    margin-bottom:10px;
  }
  .coachAvatar{
    width:70px; height:70px;
    border-radius:18px;
    background: linear-gradient(135deg, rgba(255,176,0,.24), rgba(255,106,0,.16));
    border:1px solid rgba(255,255,255,.12);
    display:grid; place-items:center;
    font-weight:900;
    color: var(--text);
  }
  .coachMeta b{display:block; font-size:18px}
  .coachMeta span{color:var(--muted); font-size:13px}
  .coachList{
    margin:10px 0 0;
    padding:0;
    list-style:none;
    display:grid;
    gap:8px;
  }
  .coachList li{
    display:flex;
    gap:10px;
    align-items:flex-start;
    color: var(--muted);
    font-size:14px;
  }
  .bullet{
    width:10px; height:10px; border-radius:999px;
    background: linear-gradient(135deg,var(--accent),var(--accent2));
    margin-top:6px;
    flex: 0 0 10px;
  }
  .coachActions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top:14px;
  }
  .noteCard{
    background: rgba(255,255,255,.04);
    border:1px dashed rgba(255,255,255,.16);
    background-color: rgba(0, 0, 0, 0.9);
  }

  /* Schedule */
  .schedule{display:grid; grid-template-columns: 1.1fr .9fr; gap:14px}
  table{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
    overflow:hidden;
    border-radius:var(--radius);
    border:1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.04);
  }
  th, td{padding:12px 12px; text-align:left; font-size:14px}
  th{color:var(--muted); font-weight:700; background: rgba(255,255,255,.04)}
  tr:not(:last-child) td{border-bottom:1px solid rgba(255,255,255,.07)}
  .chip{
    display:inline-flex; align-items:center;
    padding:6px 10px; border-radius:999px;
    background: rgba(50,213,131,.14);
    border:1px solid rgba(50,213,131,.20);
    color:var(--text); font-weight:700; font-size:12px;
  }
  .chip.orange{
    background: rgba(255,176,0,.14);
    border-color: rgba(255,176,0,.20);
  }

  /* Gallery */
  .gallery{display:grid; grid-template-columns: repeat(3, 1fr); gap:12px}
  .photo{
    border-radius:var(--radius);
    overflow:hidden;
    border:1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.04);
    cursor:pointer;
    position:relative;
    box-shadow: var(--shadow);
  }
  .photo img{
    width:100%; height:220px; object-fit:cover; display:block;
    transform:scale(1.02);
    transition: transform .2s ease;
  }
  .photo:hover img{transform:scale(1.06)}
  .photo .cap{
    position:absolute; left:12px; right:12px; bottom:12px;
    padding:10px 12px;
    border-radius:14px;
    background: rgba(11,18,32,.58);
    backdrop-filter: blur(6px);
    border:1px solid rgba(255,255,255,.10);
    display:flex; 
    align-items:center; 
    justify-content:space-between; 
    gap:10px;
  }
  .photo .cap span{font-weight:800; font-size:13px}
  .photo .cap small{color:var(--muted); font-weight:600}

  .galleryTabs{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin: 10px 0 14px;
}

.tabBtn{
  cursor:pointer;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: var(--text);
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 800;
  font-size: 13px;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}

.tabBtn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.10); }

.tabBtn.active{
  background: rgba(255,176,0,.14);
  border-color: rgba(255,176,0,.22);
  box-shadow: inset 0 0 0 1px rgba(255,176,0,.16);
}

  /* Contact */
  .contactGrid{display:grid; grid-template-columns: 1fr 1fr; gap:14px}
  label{display:block; font-size:13px; color:var(--muted); margin:10px 0 6px}
  input, textarea{
    width:100%; padding:12px 12px; border-radius:14px;
    border:1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.05);
    color:var(--text);
    outline:none;
    transition: box-shadow .15s ease, border-color .15s ease;
    font-size:14px;
  }
  textarea{min-height:120px; resize:vertical}
  input:focus, textarea:focus{
    border-color: rgba(255,176,0,.40);
    box-shadow: 0 0 0 5px var(--ring);
  }
  .helper{color:var(--muted); font-size:13px; margin:8px 0 0}
  .err{color:var(--danger); font-weight:700; font-size:13px; margin-top:8px; display:none}
  .ok{color:var(--ok); font-weight:800; font-size:13px; margin-top:8px; display:none}


footer{
  padding:24px 0 40px;
  color:var(--muted);
  border-top:1px solid rgba(255,255,255,.08);
  margin-top:14px;
}

.footRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding: 30px;
  background-color: #000;
  flex-wrap:wrap;
  border-radius:20px;
}

/* Social icons */
.social-icons{
  display:flex;
  gap:12px;
  align-items:center;
}

.social-icons a{
  width:36px;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:rgba(255,255,255,.06);
  color:#fff;
  text-decoration:none;
  transition:.2s ease;
}

.social-icons a:hover{
  background:rgba(255,176,0,.2);
  color:#fff;
  transform:translateY(-2px);
}

/* Footer links */
.links{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  font-size: 12px;
}

.links a{
  color:var(--muted);
  text-decoration:none;
  padding:8px 5px;
  border-radius:12px;
}

.links a:hover{
  background:rgba(255,255,255,.06);
  color:var(--text);
}

/* Copyright line */
.copyright {
  margin-top: 14px;
  font-size: 14px;
  text-align: center;
  width: 100%;
}


/* Mobile */
@media (max-width:768px){
  .footRow{
    width: 100%;
        text-align: center;
    flex-direction:column;
   /* align-items:flex-start;*/
  }
  .photo .cap{
    display: grid;
  }
}

  /* Lightbox */
  .lightbox{
    position:fixed; inset:0;
    background: rgba(0,0,0,.70);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:200;
    padding:18px;
  }
  .lightbox.open{display:flex}
  .lbCard{
    max-width:980px; width:100%;
    border-radius:22px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.12);
    background: rgba(15,22,38,.96);
    box-shadow: 0 24px 60px rgba(0,0,0,.45);
    position:relative;
  }
  .lbCard img{width:100%; max-height:72vh; object-fit:cover; display:block}
  .lbBar{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:12px 14px;
    border-top:1px solid rgba(255,255,255,.08);
    color:var(--muted);
    font-size:13px;
  }
  .iconBtn{
    border:1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.06);
    color:var(--text);
    border-radius:12px;
    padding:10px 12px;
    cursor:pointer;
    font-weight:800;
  }
  .iconBtn:hover{background: rgba(255,255,255,.10)}
  .toast{
    position:fixed; right:16px; bottom:16px; z-index:250;
    background: rgba(17,26,45,.96);
    border:1px solid rgba(255,255,255,.12);
    color:var(--text);
    padding:12px 14px;
    border-radius:16px;
    box-shadow: var(--shadow);
    display:none;
    max-width: 360px;
  }
  .toast.show{display:block; animation: pop .16s ease}
  @keyframes pop{from{transform:translateY(8px);opacity:.6}to{transform:translateY(0);opacity:1}}

  /* Responsive */
  @media (max-width: 920px){
    .heroGrid{grid-template-columns:1fr}
    .slide img, .slide video{height:320px}
    .grid3{grid-template-columns:1fr}
    .schedule{grid-template-columns:1fr}
    .gallery{grid-template-columns:1fr 1fr}
    .contactGrid{grid-template-columns:1fr}
    .coachGrid{grid-template-columns:1fr}
  }
/*
  @media (max-width: 680px){
    nav ul{display:none}
    nav ul.open{display:flex; flex-direction:column; width:100%}
    .nav{flex-wrap:wrap}
    .menuBtn{display:inline-flex}
    .nav-cta{margin-left:auto}
    .gallery{grid-template-columns:1fr}
    .photo img{height:210px}
  }*/
/* Optional toast styling */
.toast{
  position: fixed;
  left: 16px;
  bottom: 16px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(20,20,30,0.95);
  color: #fff;
  font: 600 14px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial;
  opacity: 0;
  transform: translateY(8px);
  transition: 180ms ease;
  z-index: 9999;
  pointer-events: none;
}
.toast.show{ opacity: 1; transform: translateY(0); }
.err{ color:#ff5a5a; font-weight:600; margin-top:10px; }
.ok{ color:#57d18b; font-weight:600; margin-top:10px; }