/* Slide-in panel */
.panel-slide {
  position:fixed;
  top:0; right:-100%;
  width:320px; height:100%;
  background:#121318;
  color:#f5f6f8;
  box-shadow:-2px 0 8px rgba(0,0,0,.4);
  transition:right .3s ease;
  z-index:200;
  padding:20px;
}
.panel-slide.open { right:0; }

.panel-content h2 { margin-top:0; }
.panel-content label { display:block; margin-top:12px; }
.panel-content input, .panel-content textarea {
  width:100%; padding:10px; margin-top:6px;
  border-radius:8px; border:1px solid #333;
  background:rgba(255,255,255,.05); color:white;
}
.close-btn {
  font-size:28px; background:none; border:none;
  color:white; float:right; cursor:pointer;
}

/* --- Fixes & Enhancements --- */

/* 1. About section bug fix */
#about strong {
  font-weight: 700;
}

/* 2. Pricing cards alignment */
#pricing .pricing-cards {
  max-width: 1000px;   /* matches other panels */
  margin: 0 auto;      /* centers the grid */
}

#pricing .pricing-card {
  display: grid;
  grid-template-rows: 1fr auto; /* body grows, button pinned bottom */
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px;
}

/* 3. Class options list readability */
#pricing .class-options h3 {
  margin-bottom: 8px;
}
#pricing .class-options li {
  line-height: 1.5;
  margin: 6px 0;
  position: relative;
  padding-left: 18px;
}
#pricing .class-options li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--brand);
}

/* 4. Contact links (no blue/underline) */
.contact-link {
  color: inherit;
  text-decoration: none;
  font-weight: 600;
}
.contact-link:hover {
  color: var(--brand);
}

/* 5. Footer links inherit same style */
footer .foot-links a {
  color: inherit;
  text-decoration: none;
  font-weight: 600;
}
footer .foot-links a:hover {
  color: var(--brand);
}

    /* Social icons shared styling */
.social-header,
.social-footer {
  display: flex;
  gap: 14px;
  align-items: center;
}

.social-header a,
.social-footer a {
  color: var(--muted);
  transition: color .2s ease;
}

.social-header a:hover,
.social-footer a:hover {
  color: var(--brand);
}

/* Footer layout adjustment */
.social-footer {
  margin-top: 10px;
  justify-content: center;
}

/* Mobile adjustments */
@media (max-width: 700px) {
  .social-header {
    display: none; /* optional: hide icons in header on mobile */
  }

  .social-footer {
    justify-content: center;
  }
}



    :root{
      --bg:#0b0c10;
      --panel:#121318;
      --text:#f5f6f8;
      --muted:#c9ccd6;
      --brand:#e53935;
      --brand-700:#c62828;
      --accent:#ffcf5c;
      --link:#4fc3f7;
      --border:#1c1f27;
      --success:#2ecc71;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      background:var(--bg);
      color:var(--text);
      font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
      line-height:1.6;
    }

    /* Header / Nav */
    header{
      position:sticky; top:0; z-index:100;
      background:rgba(10,10,14,.85);
      backdrop-filter:saturate(140%) blur(8px);
      border-bottom:1px solid var(--border);
    }
    .nav {
  max-width: 1100px;
  margin: 0 auto;
  padding: 14px 20px;

  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
nav {
  justify-self: center;
}
.cta {
  justify-self: end;
}


    .brand{
      display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text);
    }
    .brand .logo{
      width:36px; height:36px; border:2px solid var(--brand);
      border-radius:50%; display:grid; place-items:center;
      font-weight:700; font-size:14px; letter-spacing:.5px;
    }
    .brand .name{
      font-family:"League Spartan",Inter,sans-serif;
      font-size:18px; font-weight:700; text-transform:uppercase; letter-spacing:1px;
    }
    nav ul{display:flex; gap:18px; list-style:none; margin:0; padding:0}
    nav a{
      color:var(--muted); text-decoration:none; font-weight:600; font-size:14px;
      padding:8px 10px; border-radius:8px;
    }
    nav a:hover{color:var(--text); background:rgba(255,255,255,.06)}
    .cta{
      display:inline-flex; align-items:center; gap:10px;
      background:var(--brand); color:white; text-decoration:none;
      padding:10px 14px; border-radius:10px; font-weight:700;
    }
    .cta:hover{background:var(--brand-700)}

    /* Hero */
    .hero{
      position:relative; overflow:hidden;
      min-height:72vh; display:grid; place-items:center;
    }
    .hero::before{
      content:""; position:absolute; inset:0;
      background:url('https://images.unsplash.com/photo-1608151138275-2d7185ef2ca0?q=80&w=1600&auto=format&fit=crop') center/cover no-repeat;
      filter:grayscale(20%) contrast(105%);
      opacity:.35;
    }
    .hero::after{
      content:""; position:absolute; inset:0;
      background:radial-gradient(1000px 500px at 80% -50%, rgba(229,57,53,.35), transparent 55%),
                 linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,.55));
      mix-blend-mode:screen;
    }
    .hero-inner{
      position:relative; z-index:1; max-width:900px; margin:0 auto; padding:60px 20px; text-align:center;
    }
    .eyebrow{
      display:inline-block; padding:6px 10px; border:1px solid var(--border);
      border-radius:999px; color:var(--accent); font-weight:700; font-size:12px; letter-spacing:.5px; background:rgba(255,255,255,.04);
    }
    h1{
      font-family:"League Spartan",Inter,sans-serif;
      font-size:48px; line-height:1.1; margin:18px 0 12px;
    }
    .sub{
      color:var(--muted); font-size:18px; max-width:720px; margin:0 auto 26px;
    }
    .actions{display:flex; flex-wrap:wrap; gap:14px; justify-content:center}
    .btn{
      display:inline-flex; align-items:center; gap:10px;
      padding:12px 16px; border-radius:12px; font-weight:700; text-decoration:none; transition:.15s ease;
      border:1px solid transparent;
    }
    .btn-primary{background:var(--brand); color:white}
    .btn-primary:hover{background:var(--brand-700)}
    .btn-secondary{background:rgba(255,255,255,.06); color:var(--text); border-color:var(--border)}
    .btn-secondary:hover{background:rgba(255,255,255,.1)}

    /* Sections */
    .section{max-width:1100px; margin:0 auto; padding:50px 20px}
    .panel{
      background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:26px;
    }
    .grid{
      display:grid; gap:20px;
      grid-template-columns:repeat(12, 1fr);
    }
    .col-7{grid-column:span 7}
    .col-5{grid-column:span 5}
    .kicker{
      color:var(--accent); font-weight:700; font-size:13px; letter-spacing:.4px; text-transform:uppercase;
    }
    h2{
      font-family:"League Spartan",Inter,sans-serif;
      font-size:32px; margin:10px 0 14px;
    }
    p{margin:0 0 12px}

    /* Cards */
    .cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px}
    .card{
      background:rgba(255,255,255,.04); border:1px solid var(--border); border-radius:14px; padding:18px;
    }
    .card h3{margin:6px 0 6px; font-size:18px}
    .pill{display:inline-block; padding:6px 10px; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid var(--border); font-size:12px; color:var(--muted); font-weight:700}

    /* Footer */
    footer{
      margin-top:40px; border-top:1px solid var(--border);
      background:rgba(255,255,255,.03);
    }
    .footer-inner{max-width:1100px; margin:0 auto; padding:24px 20px; display:flex; gap:20px; align-items:center; justify-content:space-between}
    .foot-links{display:flex; gap:16px}
    .foot-links a{color:var(--muted); text-decoration:none}
    .foot-links a:hover{color:var(--text)}

    /* Responsive */
    @media (max-width:900px){
      .grid{grid-template-columns:repeat(6,1fr)}
      .col-7{grid-column:1/-1}
      .col-5{grid-column:1/-1}
      h1{font-size:38px}
      h2{font-size:28px}
    }
    .contact-link {
  color: inherit;          /* makes it match surrounding text color */
  text-decoration: none;   /* removes underline */
  font-weight: 600;        /* optional: makes it stand out */
}

.contact-link:hover {
  color: var(--brand);     /* optional: highlight in your red brand color on hover */
}
/* Contain to the same width as other panels */
#pricing .panel {
  max-width: 1000px;
  margin: 0 auto;
}

/* Grid for equal-height cards and aligned buttons */
#pricing .pricing-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  align-items: stretch;         /* makes all cards equal height */
}

/* Card layout with body + actions pinned at bottom */
#pricing .pricing-card {
  display: grid;
  grid-template-rows: 1fr auto; /* body grows, actions stick to bottom */
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px;
}

#pricing .card-body h3 { margin-top: 0; }
#pricing .card-body p { margin: 8px 0; }

#pricing .card-actions {
  margin-top: 10px;
  display: flex;
  justify-content: flex-start;
}

/* Class options vertical list */
#pricing .class-options {
  margin-top: 24px;
}

#pricing .class-options ul {
  list-style: none;
  padding: 0;
  margin: 8px 0 0 0;
}

#pricing .class-options li {
  margin: 6px 0;
  position: relative;
  padding-left: 18px;
}

#pricing .class-options li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--brand); /* your red accent */
}
nav ul {
  display: flex;
  gap: 18px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ================================
   FOOTER OPTIMIZATION — RMA
   ================================ */

/* Desktop footer cleanup */
footer {
  background: rgba(255,255,255,.03);
  border-top: 1px solid var(--border);
  padding: 20px 0;
}

.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;

  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;

  font-size: 14px;
  color: var(--muted);
}

.foot-links {
  display: flex;
  gap: 16px;
}

.foot-links a {
  color: var(--muted);
  text-decoration: none;
  font-weight: 600;
}

.foot-links a:hover {
  color: var(--text);
}

/* Mobile footer layout */
@media (max-width: 700px) {
  .footer-inner {
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }

  .foot-links {
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
  }
}

/* Slide-in panel */
.panel-slide {
  position:fixed;
  top:0; right:-100%;
  width:320px; height:100%;
  background:#121318;
  color:#f5f6f8;
  box-shadow:-2px 0 8px rgba(0,0,0,.4);
  transition:right .3s ease;
  z-index:200;
  padding:20px;
}
.panel-slide.open { right:0; }

.panel-content h2 { margin-top:0; }
.panel-content label { display:block; margin-top:12px; }
.panel-content input, .panel-content textarea {
  width:100%; padding:10px; margin-top:6px;
  border-radius:8px; border:1px solid #333;
  background:rgba(255,255,255,.05); color:white;
}
.close-btn {
  font-size:28px; background:none; border:none;
  color:white; float:right; cursor:pointer;
}
#pricing .pricing-card h3 {
  text-align: center;
  margin: 0 0 12px;
}
/* Center the pricing section title area */
#pricing .panel > .kicker,
#pricing .panel > h2 {
  display: block;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

/* Keep cards and lists left-aligned */
#pricing .pricing-cards,
#pricing .class-options {
  text-align: left;
}
  /* ================================
   FINAL HEADER FIX — RMA
   ================================ */

/* Prevent header from overflowing viewport */
header {
  width: 100%;
  overflow-x: hidden;
}

/* Ensure nav container never exceeds screen width */
.nav {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 14px 20px;
  box-sizing: border-box;
}

/* Mobile header fix */
@media (max-width: 700px) {

  /* Simplify grid so it cannot overflow */
  .nav {
    grid-template-columns: auto 1fr auto;
    column-gap: 10px;
    padding: 12px 10px;
  }

  /* Hide desktop nav */
  nav ul {
    display: none;
  }

  /* Keep Join button aligned right */
  #menuToggle {
    justify-self: end;
  }

  /* Prevent logo from pushing layout too wide */
  .brand .name {
    font-size: 14px;
  }

  .brand .logo {
    width: 30px;
    height: 30px;
    font-size: 12px;
  }
}
/* Header layout */
.nav {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 14px 20px;
  box-sizing: border-box;
}

/* Right side: social + button */
.header-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Prevent overflow */
header {
  width: 100%;
  overflow-x: hidden;
}

/* Mobile layout */
@media (max-width: 700px) {
  .nav {
    grid-template-columns: auto auto;
    padding: 12px 10px;
  }

  nav ul {
    display: none;
  }

  .social-header {
    display: none;
  }

  .brand .name {
    font-size: 14px;
  }

  .brand .logo {
    width: 30px;
    height: 30px;
    font-size: 12px;
  }

  .cta {
    font-size: 14px;
    padding: 8px 12px;
  }
}
/* Header right side: button + icons */
.header-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

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

.social-header a {
  color: var(--muted);
  transition: color .2s ease;
}

.social-header a:hover {
  color: var(--brand);
}

/* Mobile layout */
@media (max-width: 700px) {
  .header-right {
    flex-direction: row-reverse;
    justify-content: space-between;
    width: 100%;
  }

  .social-header {
    order: -1;
  }

  #menuToggle {
    font-size: 14px;
    padding: 8px 12px;
  }
}

/* Slide-in panel */
.panel-slide {
  position:fixed;
  top:0; right:-100%;
  width:320px; height:100%;
  background:#121318;
  color:#f5f6f8;
  box-shadow:-2px 0 8px rgba(0,0,0,.4);
  transition:right .3s ease;
  z-index:200;
  padding:20px;
}
.panel-slide.open { right:0; }

.panel-content h2 { margin-top:0; }
.panel-content label { display:block; margin-top:12px; }
.panel-content input, .panel-content textarea {
  width:100%; padding:10px; margin-top:6px;
  border-radius:8px; border:1px solid #333;
  background:rgba(255,255,255,.05); color:white;
}
.close-btn {
  font-size:28px; background:none; border:none;
  color:white; float:right; cursor:pointer;
}
#pricing .pricing-card h3 {
  text-align: center;
  margin: 0 0 12px;
}
/* Center the pricing section title area */
#pricing .panel > .kicker,
#pricing .panel > h2 {
  display: block;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

/* Keep cards and lists left-aligned */
#pricing .pricing-cards,
#pricing .class-options {
  text-align: left;
}
  /* ================================
   FINAL HEADER FIX — RMA
   ================================ */

/* Prevent header from overflowing viewport */
header {
  width: 100%;
  overflow-x: hidden;
}

/* Ensure nav container never exceeds screen width */
.nav {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 14px 20px;
  box-sizing: border-box;
}

/* Mobile header fix */
@media (max-width: 700px) {

  /* Simplify grid so it cannot overflow */
  .nav {
    grid-template-columns: auto 1fr auto;
    column-gap: 10px;
    padding: 12px 10px;
  }

  /* Hide desktop nav */
  nav ul {
    display: none;
  }

  /* Keep Join button aligned right */
  #menuToggle {
    justify-self: end;
  }

  /* Prevent logo from pushing layout too wide */
  .brand .name {
    font-size: 14px;
  }

  .brand .logo {
    width: 30px;
    height: 30px;
    font-size: 12px;
  }
}
/* Header layout */
.nav {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 14px 20px;
  box-sizing: border-box;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

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

.social-header a {
  color: var(--muted);
  transition: color .2s ease;
}

.social-header a:hover {
  color: var(--brand);
}

/* Mobile layout */
@media (max-width: 700px) {
  .nav {
    grid-template-columns: 1fr;
    padding: 12px 10px;
  }

  .header-right {
    justify-content: space-between;
    width: 100%;
  }

  /* Flip order: icons left, button right */
  .social-header {
    order: -1;
  }

  .cta {
    font-size: 14px;
    padding: 8px 12px;
  }

  .brand .name {
    font-size: 14px;
  }

  .brand .logo {
    width: 30px;
    height: 30px;
    font-size: 12px;
  }
}
.header-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

.social-header {
  display: flex;
  gap: 12px;
}

.social-header a {
  color: var(--muted);
  transition: color .2s ease;
}

.social-header a:hover {
  color: var(--brand);
}

/* Mobile layout */
@media (max-width: 700px) {
  .header-right {
    justify-content: space-between;
    width: 100%;
  }

  .social-header {
    order: -1;
  }

  .cta {
    font-size: 14px;
    padding: 8px 12px;
  }
}
/* Social icons */
.social-header {
  display: flex;
  gap: 12px;
  align-items: center;
}

.social-header svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

.social-header a {
  color: var(--muted);
  transition: color .2s ease;
}

.social-header a:hover {
  color: var(--brand);
}

/* Desktop: icons to the right of Join Now */
.header-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Mobile: icons shift left, button stays right */
@media (max-width: 700px) {
  .header-right {
    justify-content: space-between;
    width: 100%;
  }

  .social-header {
    order: -1;
  }
}
.logo-img {
  height: 100px;
  width: auto;
  object-fit: contain;
}