/* ============================================================
   ATLANTIC BASKETBALL ACADEMY — style-v5.css
   ============================================================

   Shared stylesheet for index-v4.html and newsletter-v2.html.
   Change a variable or rule here and it updates both pages.

   TABLE OF CONTENTS
   -----------------
   1.  Reset & CSS Variables
   2.  Base
   3.  Nav
   4.  Hero (shared — used by both pages)
   5.  Marquee Strip         (index only)
   6.  Programs Section      (index only)
   7.  About Section         (index only)
   8.  CTA Banner            (index only)
   9.  Footer
   10. Newsletter Page
   11. Responsive

   LEFT-MARGIN SYSTEM
   ------------------
   All content on both pages starts at the same distance
   from the left edge of the screen. That distance is
   controlled by one variable: --page-left: 12%
   To shift everything left or right, change only that value.
   ============================================================ */


/* ─── 1. RESET & CSS VARIABLES ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --black:         #000000;
  --charcoal:      #141414;
  --dark-gray:     #1f1f1f;
  --neon-purple:   #bf00ff;
  --light-purple:  #d44dff;
  --white:         #ffffff;
  --off-white:     #f4f6f9;
  --gray:          #8a95a3;
  --text:          #1a1a1a;

  /* ← The one number that controls left-alignment across both pages */
  --page-left: 12%;
}


/* ─── 2. BASE ─── */
html { scroll-behavior: smooth; }

body {
  font-family: 'Barlow', sans-serif;
  color: var(--text);
  background: var(--white);
  overflow-x: hidden;
}


/* ─── 3. NAV ─── */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--page-left);
  height: 70px;
  background: rgba(0, 0, 0, 0.97);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(191, 0, 255, 0.2);
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.logo-icon { width: 38px; height: 38px; }

.logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.logo-text .aba {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--neon-purple);
  letter-spacing: 0.05em;
}

.logo-text .full {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.65rem;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
}

.nav-links a {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  transition: color 0.2s;
}

.nav-links a:hover { color: var(--neon-purple); }

.nav-cta {
  background: var(--neon-purple);
  color: var(--white) !important;
  padding: 8px 20px;
  border-radius: 4px;
  font-weight: 700 !important;
  transition: background 0.2s !important;
}

.nav-cta:hover { background: var(--light-purple) !important; }

/* Back link used on newsletter page instead of nav-links */
.nav-back {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  transition: color 0.2s;
}

.nav-back:hover { color: var(--neon-purple); }


/* ─── 4. HERO (shared) ─── */

/* Index hero wrapper */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: var(--black);
  overflow: hidden;
}

/* Newsletter hero wrapper */
.page-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: var(--black);
  overflow: hidden;
}

/* Index gradient background */
.hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 70% 50%, rgba(31, 0, 50, 0.7) 0%, transparent 70%),
    radial-gradient(ellipse 40% 40% at 20% 80%, rgba(208, 19, 255, 0.06) 0%, transparent 60%);
}

/* Newsletter gradient background */
.page-hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 60% 40%, rgba(31, 0, 50, 0.65) 0%, transparent 70%),
    radial-gradient(ellipse 40% 50% at 10% 70%, rgba(191, 0, 255, 0.06) 0%, transparent 60%);
}

/* Court lines SVG — sits behind all content */
.court-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.court-lines {
  position: absolute;
  right: -5%;
  top: 50%;
  transform: translateY(-50%);
  width: 55%;
  max-width: 960px;
  height: 90%;
  opacity: 0.07;
}

/* Newsletter watermark — the giant "1-3-1" behind the copy */
.watermark {
  position: absolute;
  right: 15%;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-size: clamp(14rem, 28vw, 26rem);
  color: rgba(255,255,255,0.03);
  letter-spacing: -0.06em;
  line-height: 1;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

/*
  THE KEY RULE — hero content container used on BOTH pages.
  margin-left: var(--page-left) is the single source of truth
  for how far content is pushed in from the left edge.
  Change --page-left in :root above to shift both pages at once.
*/
.hero-inner {
  position: relative;
  z-index: 2;
  padding: 2%;
  padding-top: 80px;
  max-width: 820px;
  margin-left: var(--page-left);
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--neon-purple);
  margin-bottom: 20px;
}

.hero-eyebrow::before {
  content: '';
  display: block;
  width: 28px;
  height: 2px;
  background: var(--neon-purple);
}

/* Hero h1 — index page */
.hero h1 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-size: clamp(3.2rem, 7vw, 6rem);
  line-height: 0.92;
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin-bottom: 24px;
}

.hero h1 .accent {
  color: var(--neon-purple);
  display: block;
}

/* Hero h1 — newsletter page */
.hero-inner h1 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-size: clamp(3rem, 6.5vw, 5.4rem);
  line-height: 0.94;
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}

.hero-inner h1 .accent { color: var(--neon-purple); }
.hero-inner h1 .accent-block { display: block; }

.hero-sub {
  font-size: 1.3rem;
  color: rgba(255,255,255,0.65);
  line-height: 1.7;
  max-width: 700px;
  margin-bottom: 40px;
}

.hero-highlight {
  font-weight: 600;
  font-style: normal;
  position: relative;
  display: inline-block;
}

.hero-highlight::after {
  content: '';
  position: absolute;
  left: -2px; right: -2px; bottom: -3px;
  height: 3px;
  background: var(--neon-purple);
  border-radius: 40% 20% 50% 30% / 60% 40% 60% 40%;
  transform: rotate(-0.8deg) scaleX(1.08);
  opacity: 0.9;
}

.hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
}

.btn-primary {
  display: inline-block;
  background: var(--neon-purple);
  color: var(--white);
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 15px 36px;
  border-radius: 4px;
  transition: background 0.2s, transform 0.15s;
}

.btn-primary:hover {
  background: var(--light-purple);
  transform: translateY(-1px);
}

.btn-ghost {
  display: inline-block;
  color: rgba(255,255,255,0.75);
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 15px 36px;
  border: 1.5px solid rgba(255,255,255,0.25);
  border-radius: 4px;
  transition: border-color 0.2s, color 0.2s;
}

.btn-ghost:hover {
  border-color: var(--neon-purple);
  color: var(--neon-purple);
}

.hero-location {
  margin-top: 48px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,0.4);
  font-size: 0.85rem;
  letter-spacing: 0.05em;
}

.hero-location svg { opacity: 0.6; }


/* ─── 5. MARQUEE STRIP ─── */
.strip {
  background: var(--neon-purple);
  padding: 14px 0;
  overflow: hidden;
  white-space: nowrap;
}

.strip-inner {
  display: inline-flex;
  animation: marquee 22s linear infinite;
}

.strip-item {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--white);
  padding: 0 32px;
}

.strip-dot { color: rgba(255,255,255,0.4); }

@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}


/* ─── 6. PROGRAMS SECTION ─── */

/*
  padding: 100px var(--page-left) aligns the left edge of each
  section with the hero content above it. Same --page-left
  variable — change it once, all sections move together.
*/
.section { padding: 100px var(--page-left); }

.section-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--neon-purple);
  margin-bottom: 16px;
}

.section-label::before {
  content: '';
  display: block;
  width: 24px;
  height: 2px;
  background: var(--neon-purple);
}

.section-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  line-height: 1;
  text-transform: uppercase;
  color: var(--black);
  margin-bottom: 16px;
}

.section-title .accent { color: var(--neon-purple); }

.section-intro {
  font-size: 1.05rem;
  color: #5a6475;
  line-height: 1.7;
  max-width: 580px;
  margin-bottom: 56px;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}

.service-card {
  background: var(--black);
  padding: 48px 36px;
  position: relative;
  overflow: hidden;
  transition: transform 0.25s;
  cursor: default;
  border-radius: 25px;
}

.service-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 3px;
  background: var(--neon-purple);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.service-card:hover { transform: translateY(-4px); }
.service-card:hover::after { transform: scaleX(1); }

.service-icon { font-size: 2rem; margin-bottom: 20px; }

.service-card h3 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 12px;
}

.service-card p {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.5);
  line-height: 1.65;
}

.service-tag {
  display: inline-block;
  margin-top: 20px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--neon-purple);
  border: 1.5px solid rgba(191, 0, 255, 0.3);
  padding: 4px 12px;
  border-radius: 2px;
}

.level-number {
  display: block;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--neon-purple);
  line-height: 1;
  margin-bottom: 8px;
}

.btn-level {
  display: inline-block;
  margin-top: 28px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 0.88rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--white);
  background: var(--neon-purple);
  padding: 10px 24px;
  border-radius: 4px;
  transition: background 0.2s, transform 0.15s;
}

.btn-level:hover {
  background: var(--light-purple);
  transform: translateY(-1px);
}


/* ─── 7. ABOUT SECTION ─── */
.about { background: var(--off-white); }

.about-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.about-visual { position: relative; }

.about-card {
  background: var(--black);
  border-radius: 8px;
  padding: 56px 48px;
  position: relative;
  overflow: hidden;
}

.about-card::before {
  content: '"';
  position: absolute;
  top: -20px; left: 32px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 14rem;
  font-weight: 900;
  color: rgba(191, 0, 255, 0.07);
  line-height: 1;
  pointer-events: none;
}

.about-quote {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.3;
  color: var(--white);
  margin-bottom: 28px;
  position: relative;
  z-index: 1;
}

.about-quote .gold { color: var(--neon-purple); }

.about-attr {
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
  z-index: 1;
}

.attr-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--neon-purple);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-size: 1rem;
  color: var(--white);
}

.attr-text .name {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--white);
  letter-spacing: 0.05em;
}

.attr-text .title {
  font-size: 0.78rem;
  color: var(--gray);
}

.badge-strip {
  display: flex;
  gap: 12px;
  margin-top: 20px;
  flex-wrap: wrap;
}

.badge {
  background: rgba(191,0,255,0.12);
  border: 1px solid rgba(191,0,255,0.25);
  color: var(--neon-purple);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 2px;
}

.about-text .section-intro { margin-bottom: 32px; }

.pillars { display: flex; flex-direction: column; gap: 16px; }

.pillar { display: flex; align-items: flex-start; gap: 16px; }

.pillar-num {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-size: 2rem;
  color: rgba(191, 0, 255, 0.25);
  line-height: 1;
  min-width: 36px;
}

.pillar-body h4 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--black);
  margin-bottom: 4px;
}

.pillar-body p {
  font-size: 0.88rem;
  color: #6a7585;
  line-height: 1.6;
}


/* ─── 8. CTA BANNER ─── */
.cta-banner {
  background: var(--black);
  padding: 90px var(--page-left);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta-banner::before {
  content: 'ABA';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-size: 22vw;
  color: rgba(255,255,255,0.025);
  letter-spacing: -0.05em;
  white-space: nowrap;
  pointer-events: none;
}

.cta-banner .section-label { justify-content: center; }

.cta-banner h2 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-size: clamp(2.4rem, 5vw, 4rem);
  text-transform: uppercase;
  color: var(--white);
  line-height: 1;
  margin-bottom: 20px;
}

.cta-banner h2 .accent { color: var(--neon-purple); }

.cta-banner p {
  color: rgba(255,255,255,0.55);
  max-width: 480px;
  margin: 0 auto 40px;
  font-size: 1rem;
  line-height: 1.7;
}


/* ─── 9. FOOTER ─── */
footer {
  background: #060606;
  padding: 48px var(--page-left);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}

.footer-brand .aba {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 1.2rem;
  color: var(--neon-purple);
  letter-spacing: 0.05em;
}

.footer-brand .location {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.35);
  margin-top: 2px;
}

.footer-links {
  display: flex;
  gap: 24px;
  list-style: none;
}

.footer-links a {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  text-decoration: none;
  transition: color 0.2s;
}

.footer-links a:hover { color: var(--neon-purple); }

.footer-copy {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.2);
}


/* ─── 10. NEWSLETTER PAGE ─── */

/* Newsletter subheadline under the h1 */
.subheadline {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: clamp(1.2rem, 2.2vw, 1.6rem);
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 32px;
}

/* Short purple divider line between subheadline and body copy */
.divider {
  width: 56px;
  height: 2px;
  background: var(--neon-purple);
  margin-bottom: 32px;
}

/* Body paragraph text */
.body-copy {
  font-size: 1.05rem;
  color: rgba(255,255,255,0.62);
  line-height: 1.75;
  max-width: 560px;
  margin-bottom: 32px;
}

/* Highlighted quote / CTA block with purple left border */
.cta-block {
  background: rgba(191, 0, 255, 0.06);
  border: 1px solid rgba(191, 0, 255, 0.18);
  border-left: 3px solid var(--neon-purple);
  border-radius: 4px;
  padding: 28px 32px;
  max-width: 580px;
  margin-bottom: 36px;
}

.cta-block p {
  font-size: 1rem;
  color: rgba(255,255,255,0.72);
  line-height: 1.75;
}

.cta-block strong { color: var(--neon-purple); font-weight: 600; }

/* Row of benefit tag pills — reuses .badge styles from section 7 */
.benefit-tags {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

/* Email signup form */
.signup-form {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  max-width: 540px;
}

.form-row {
  display: flex;
  gap: 12px
  
}

.form-row input {
  flex: 1;
  background: rgba(255,255,255,0.06);
  border: 1.5px solid rgba(255,255,255,0.15);
  border-radius: 4px;
  padding: 16px 20px;
  font-family: 'Barlow', sans-serif;
  font-size: 0.95rem;
  color: var(--white);
  outline: none;
  transition: border-color 0.2s;
}

.form-row input::placeholder { color: rgba(255,255,255,0.3); }
.form-row input:focus { border-color: var(--neon-purple); }


.signup-form input[type="email"] {
  flex: 2;
  background: rgba(255,255,255,0.06);
  border: 1.5px solid rgba(255,255,255,0.15);
  border-radius: 4px;
  padding: 16px 20px;
  font-family: 'Barlow', sans-serif;
  font-size: 0.95rem;
  color: var(--white);
  outline: none;
  transition: border-color 0.2s;
}

.signup-form input[type="email"]::placeholder { color: rgba(255,255,255,0.3); }
.signup-form input[type="email"]:focus { border-color: var(--neon-purple); }

.signup-form button {
  flex: 0 0 auto;
  border: none;
  cursor: pointer;
}

.form-note {
  margin-top: 12px;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.25);
  letter-spacing: 0.04em;
}

/* Success state shown after form submit */
.success-msg {
  display: none;
  align-items: center;
  gap: 12px;
  background: rgba(191,0,255,0.08);
  border: 1px solid rgba(191,0,255,0.25);
  border-radius: 4px;
  padding: 18px 24px;
  max-width: 540px;
}

.success-msg .check {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--neon-purple);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1rem;
  color: var(--white);
}

.success-msg p {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.05em;
  color: var(--white);
}

.success-msg p span { color: var(--neon-purple); }

/* "What's Inside" section below the newsletter signup */
.inside-section {
  background: var(--off-white);
  padding: 90px var(--page-left);
}

.inside-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 900px;
}

/* Large faint number inside each card */
.card-num {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-size: 3.5rem;
  color: rgba(191, 0, 255, 0.15);
  line-height: 1;
  margin-bottom: 12px;
}


/* ─── 11. RESPONSIVE ─── */
@media (max-width: 768px) {
  .form-row { flex-direction: column; }
  :root { --page-left: 6%; }   /* ← narrower screens get less indent */

  .nav-links { display: none; }
  .hero-inner { margin-left: var(--page-left); padding-top: 90px; }
  .hero h1 { font-size: clamp(2.8rem, 12vw, 4rem); }
  .about-inner { grid-template-columns: 1fr; gap: 40px; }
  .services-grid { grid-template-columns: 1fr; gap: 16px; }
  .inside-grid { grid-template-columns: 1fr; }
  .signup-form { flex-direction: column; }
  .signup-form button { width: 100%; }
  .watermark { display: none; }
  footer { flex-direction: column; align-items: flex-start; }
}