/*
 * NEOPOINT Exam Prep School – Cyberpunk/Cyber‑aesthetic website
 *
 * This stylesheet defines the dark, neon‑infused look and feel of the
 * landing page. Colours are stored in CSS variables for easy tweaking.
 */

/* CSS Reset & Base styles */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Montserrat', 'Roboto', sans-serif;
  line-height: 1.55;
  background: radial-gradient(circle at 50% 0%, #050921 0%, #010314 100%);
  color: #d9e3f6;
  overflow-x: hidden;
}

/* Global colour palette */
:root {
  --color-bg: #03081f;
  --color-surface: #070d2c;
  --color-accent: #05c3ff;
  --color-highlight: #c217ff;
  --color-text: #d9e3f6;
  --color-subtext: #8da2c5;
  --radius: 12px;
  --transition-fast: 0.2s;
}

/* Utility classes */
.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}

/* Reveal animations */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.flex-two {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  margin: 0.25rem;
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-decoration: none;
  color: var(--color-accent);
  border: 2px solid var(--color-accent);
  border-radius: var(--radius);
  transition: background var(--transition-fast), box-shadow var(--transition-fast), color var(--transition-fast);
}
.btn:hover {
  background: var(--color-accent);
  color: #010314;
  box-shadow: 0 0 10px var(--color-accent), 0 0 20px var(--color-accent);
}
.btn.secondary {
  color: var(--color-highlight);
  border-color: var(--color-highlight);
}
.btn.secondary:hover {
  background: var(--color-highlight);
  color: #010314;
  box-shadow: 0 0 10px var(--color-highlight), 0 0 20px var(--color-highlight);
}

/* Glass buttons for the hero section */
.btn.glass {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--color-accent);
  backdrop-filter: blur(6px);
}
.btn.glass:hover {
  background: var(--color-accent);
  color: #010314;
  box-shadow: 0 0 10px var(--color-accent), 0 0 20px var(--color-accent);
}
.btn.glass.cta {
  border-color: var(--color-highlight);
  color: var(--color-highlight);
}
.btn.glass.cta:hover {
  background: var(--color-highlight);
  color: #010314;
  box-shadow: 0 0 10px var(--color-highlight), 0 0 20px var(--color-highlight);
}

/* CTA button in the navigation */
.nav-cta {
  margin-left: 1.5rem;
  padding: 0.5rem 1.2rem;
  font-size: 0.9rem;
  font-weight: 600;
  border: 2px solid var(--color-highlight);
  color: var(--color-highlight);
  border-radius: var(--radius);
  transition: background var(--transition-fast), box-shadow var(--transition-fast), color var(--transition-fast);
}
.nav-cta:hover {
  background: var(--color-highlight);
  color: #010314;
  box-shadow: 0 0 10px var(--color-highlight), 0 0 20px var(--color-highlight);
}

/* Messenger buttons in the sign‑up section */
.signup-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-top: 2rem;
}
.btn.messenger {
  padding: 0.8rem 1.6rem;
  border-radius: var(--radius);
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #010314;
  border: none;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.btn.messenger:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.2);
}
.btn.messenger.tg {
  background: var(--color-accent);
}
.btn.messenger.vk {
  background: var(--color-highlight);
}
.btn.messenger.wa {
  background: linear-gradient(90deg, var(--color-accent), var(--color-highlight));
}

/* Review list additional styling */
.quote {
  color: var(--color-text);
}
.student-name {
  color: var(--color-accent);
  font-weight: 600;
}
.review-link {
  font-size: 0.8rem;
  color: var(--color-highlight);
  text-decoration: underline;
  margin-left: 0.5rem;
  transition: color var(--transition-fast);
}
.review-link:hover {
  color: var(--color-accent);
}

/* Adjust hero title glow for cross‑browser consistency */
.hero-title {
  /* Adjust glow for cross-browser consistency and Safari: reduce blur and add subtle stroke */
  /* Reduce the glow intensity for better readability in Safari and on small screens */
  text-shadow: 0 0 4px var(--color-accent);
  -webkit-text-stroke: 0.4px var(--color-accent);
}

/* Navigation layout adjustments */
.nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
}
.nav a {
  margin-left: 1.2rem;
  margin-top: 0.5rem;
}
.nav .nav-cta {
  /* Match the top margin of other navigation links for consistent alignment */
  margin-top: 0.5rem;
  /* Use inline-flex to align with other nav items and avoid line-height discrepancies */
  display: inline-flex;
  align-items: center;
}

/* Mobile navigation hamburger button */
.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.menu-toggle span {
  width: 26px;
  height: 3px;
  background: var(--color-subtext);
  margin: 3px 0;
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Mobile nav drawer */
.mobile-nav {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100vh;
  background: rgba(3, 8, 31, 0.95);
  backdrop-filter: blur(8px);
  transform: translateX(100%);
  transition: transform 0.4s ease;
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  opacity: 0;
}
.mobile-nav.open {
  transform: translateX(0);
  pointer-events: auto;
  opacity: 1;
}
.mobile-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: center;
}
.mobile-nav li {
  margin: 1rem 0;
}
.mobile-nav a {
  font-size: 1.4rem;
  color: var(--color-text);
  text-decoration: none;
  transition: color var(--transition-fast);
}
.mobile-nav a:hover {
  color: var(--color-accent);
}
.mobile-nav .mobile-cta a {
  font-size: 1.2rem;
  display: inline-block;
  padding: 0.8rem 1.6rem;
  border: 2px solid var(--color-highlight);
  color: var(--color-highlight);
  border-radius: var(--radius);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
  transition: background var(--transition-fast), box-shadow var(--transition-fast), color var(--transition-fast);
}
.mobile-nav .mobile-cta a:hover {
  background: var(--color-highlight);
  color: #010314;
  box-shadow: 0 0 10px var(--color-highlight), 0 0 20px var(--color-highlight);
}

/*
 * On any viewport narrower than 1440px, collapse the navigation into a
 * hamburger menu. This includes tablets and smaller laptops. Only on very
 * wide desktop screens will the full navigation links be shown. */
@media (max-width: 1024px) {
  .nav {
    display: none;
  }
  .menu-toggle {
    display: flex;
  }
}

/* Logo alignment refinement */
.logo-container .logo {
  width: 40px;
  height: 40px;
}
.logo-container .brand-name {
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
}

/* Sign‑up section styling */
.signup {
  padding: 4rem 0 6rem;
  text-align: center;
}

/* Responsive adjustments */
@media (max-width: 1439px) {
  .nav {
    justify-content: center;
  }
  .nav a {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
  }
  .nav .nav-cta {
    margin-left: 0;
    margin-top: 1rem;
  }
  .hero-title {
    /* On medium screens (tablets), reduce the hero heading slightly but keep it
       prominent. */
    font-size: 3rem;
  }
  .hero-subtitle {
    font-size: 1rem;
  }
  /* Removed hero button stacking and width rules from this breakpoint.  These
     styles are now handled in a more targeted breakpoint at 1024px and below
     to prevent the sign‑up button from shifting on medium and large screens. */
  .section-title {
    text-align: center;
  }
  .format-grid {
    grid-template-columns: 1fr;
  }
  .pricing-grid {
    grid-template-columns: 1fr;
  }
  .teachers-grid {
    grid-template-columns: 1fr;
  }
  .results-box {
    flex-direction: row;
    justify-content: space-around;
  }
  .result-item {
    flex: 1;
  }
  .stats-container {
    /* Keep stats horizontally aligned on medium screens and wrap if necessary */
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
  }
  .hero {
    padding-top: 60px;
  }
  .section::before {
    width: 95%;
  }
}

@media (min-width: 1024px) {
  .teacher-photo {
    width: 180px;
    height: 240px;
  }
}
.btn.small {
  padding: 0.5rem 1.25rem;
  font-size: 0.9rem;
}

/* Header */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(3, 8, 31, 0.8);
  backdrop-filter: blur(6px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
}
.logo-container {
  display: flex;
  align-items: center;
  /* Reduce the gap so the stacked brand sits closer to the logo, bringing
     the tagline nearer to NEOPOINT */
  gap: 0.4rem;
}
.logo-container .logo {
  width: 48px;
  height: 48px;
}
.logo-container .brand-name {
  font-family: 'Russo One', sans-serif;
  font-size: 1.5rem;
  color: var(--color-accent);
  letter-spacing: 1px;
}

/* Brand stack contains the main name and tagline on separate lines. */
.logo-container .brand-stack {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.logo-container .brand-tagline {
  font-family: 'Russo One', sans-serif;
  font-size: 1rem;
  color: var(--color-highlight);
  /* Pull the tagline closer to the brand name */
  margin-top: 0;
}
.nav a {
  margin-left: 1.5rem;
  font-weight: 500;
  color: var(--color-subtext);
  text-decoration: none;
  position: relative;
  transition: color var(--transition-fast);
  /* Use inline-flex to align items consistently with the CTA button */
  display: inline-flex;
  align-items: center;
}
.nav a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--color-accent), var(--color-highlight));
  transition: width var(--transition-fast);
}
.nav a:hover {
  color: var(--color-accent);
}
.nav a:hover::after {
  width: 100%;
}

/* Align navigation links and the call‑to‑action button perfectly along the baseline on larger screens.
   Removing the top margin and using padding ensures that the button sits flush with the other links. */
.nav a,
  .nav .nav-cta {
  margin-top: 0;
  /* Use slightly smaller vertical padding on nav links and CTA to align them perfectly on one line */
  padding-top: 0.45rem;
  padding-bottom: 0.45rem;
}

/* Hero Section */
.hero {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  position: relative;
  overflow: hidden;
  padding-top: 80px; /* offset for fixed header */
}

/* Add a subtle gradient overlay at the bottom of the hero to create a smooth transition
   into the next section. This helps separate the skyline image from the section container. */
.hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 150px;
  background: linear-gradient(to bottom, rgba(3, 8, 31, 0), var(--color-bg));
  pointer-events: none;
  z-index: 1;
}
.hero-content {
  z-index: 2;
  /* Centrally align all hero content horizontally. Using flexbox ensures that
     the heading, subtitle and buttons stay centered regardless of their
     intrinsic widths. The max width prevents lines from breaking awkwardly.
  */
  max-width: 1000px;
  margin: 0 auto;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero-title {
  font-family: 'Russo One', sans-serif;
  /* Enlarge the hero heading so it occupies more vertical space on both desktop and mobile */
  /* Make the hero heading occupy more vertical space on both desktop and mobile */
  /* Limit the hero heading to two lines. The clamp ensures it scales nicely
     across viewport sizes while staying within a range that prevents unwanted line
     breaks. */
  /* Increase the hero heading further to fill more of the viewport on both desktop and mobile. The clamp keeps
     the text within a reasonable range to prevent unwanted line breaks while still scaling up on large screens. */
  font-size: clamp(4.5rem, 9vw, 7.5rem);
  color: var(--color-accent);
  line-height: 1.05;
  margin-bottom: 1rem;
  position: relative;
  /* Add a light stroke to improve readability on high‑contrast displays */
  -webkit-text-stroke: 0.8px rgba(0, 0, 0, 0.4);
}

/* Create a blurred glow for the hero title using a pseudo-element. This approach is more consistent across browsers (including Safari) than multiple text-shadows. */
.hero-title::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: var(--color-accent);
  /* Respect newline characters in the data‑text attribute so the glow aligns
     exactly with the visible line breaks. */
  white-space: pre-line;
  opacity: 0.45;
  filter: blur(6px);
  z-index: -1;
  pointer-events: none;
}
.hero-subtitle {
  font-size: 1.25rem;
  max-width: 600px;
  margin: 0 auto 2rem;
  color: var(--color-subtext);
}
.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  /* Ensure buttons align nicely regardless of their text length */
  align-items: stretch;
}

/* Place the primary call‑to‑action button on its own row beneath the
   informational buttons. Using flex‑basis forces it to wrap to the next line. */
.hero-buttons .btn.cta {
  /* Force the main call‑to‑action onto its own row by taking the full
     available width and ordering it after the informational buttons. */
  flex-basis: 100%;
  order: 1;
  margin-top: 0.5rem;
}

/* Consistent sizing and alignment for hero buttons */
.hero-buttons .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0.75rem 1.5rem;
}
.hero-skyline {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60%;
  object-fit: cover;
  pointer-events: none;
  /* mask image so the skyline fades into the background */
  mask-image: linear-gradient(to top, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
}

/* Sections */
.section {
  /* Reduce the global section padding to bring headings and text closer to the
     top and bottom edges of the neon frame. This makes long pages feel less
     sparse, especially on mobile devices. */
  /* Trim vertical padding to tighten sections and reduce excessive blank space. */
  padding: 3rem 0;
  position: relative;
}
.section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  height: 100%;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: rgba(7, 13, 44, 0.8);
  box-shadow: 0 0 15px rgba(5, 195, 255, 0.15), 0 0 30px rgba(194, 23, 255, 0.1);
  z-index: -1;
}
.section-title {
  font-family: 'Russo One', sans-serif;
  font-size: 2rem;
  margin-bottom: 1.5rem;
  color: var(--color-accent);
  text-transform: uppercase;
}
.section-text {
  font-size: 1rem;
  color: var(--color-subtext);
  margin-bottom: 1rem;
}

/* Reviews & Results */
.reviews-box {
  flex: 1 1 55%;
  min-width: 300px;
}
.results-box {
  flex: 1 1 40%;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2rem;
}
.testimonial-list {
  list-style: none;
  margin-top: 1rem;
}
.testimonial-list li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.75rem;
  color: var(--color-text);
}
.testimonial-list li::before {
  content: '«'; /* simple quote symbol */
  font-family: 'Russo One', sans-serif;
  font-weight: normal;
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-highlight);
}
.result-item {
  text-align: center;
}
.result-number {
  font-family: 'Russo One', sans-serif;
  /* Display result numbers prominently to balance the bold headings in the
     adjacent reviews text. */
  font-size: 3rem;
  color: var(--color-highlight);
  text-shadow: 0 0 10px var(--color-highlight);
}
.result-label {
  font-size: 1rem;
  color: var(--color-subtext);
  margin-top: 0.25rem;
}

/* Reviews carousel */
.reviews-carousel {
  /* Set relative positioning so the carousel navigation aligns within the carousel box */
  position: relative;
  margin-top: 1.5rem;
}
.review-item {
  display: none;
  margin-bottom: 2rem;
}
.review-item.active {
  display: block;
}
.review-top {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.review-photo {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 8px rgba(5, 195, 255, 0.5);
}
.review-quote {
  font-size: 0.95rem;
  color: var(--color-text);
}
.review-author {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: var(--color-subtext);
}
.review-author .student-name {
  color: var(--color-accent);
  font-weight: 600;
}
.carousel-nav {
  /* Place the navigation controls directly below the review content and
     center them horizontally within the carousel. */
  margin-top: 0.75rem;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 1rem;
}
.carousel-prev,
  .carousel-next {
  /* Style carousel controls to be more prominent and easier to tap */
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--color-accent);
  font-size: 2.2rem;
  cursor: pointer;
  line-height: 1;
  border-radius: var(--radius);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}
  .carousel-prev:hover,
  .carousel-next:hover {
  background: var(--color-accent);
  color: #010314;
  box-shadow: 0 0 8px var(--color-accent), 0 0 16px var(--color-accent);
}

/* Format cards */
.format-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}
.format-card {
  background: var(--color-surface);
  border: 1px solid rgba(5, 195, 255, 0.3);
  border-radius: var(--radius);
  padding: 2rem;
  text-align: center;
  box-shadow: 0 0 10px rgba(5, 195, 255, 0.1), 0 0 20px rgba(194, 23, 255, 0.05);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.format-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 0 15px rgba(5, 195, 255, 0.3), 0 0 30px rgba(194, 23, 255, 0.15);
}
.format-card .icon {
  margin-bottom: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.format-card .icon-image {
  /* Increase the base icon size slightly for better legibility */
  width: 100px;
  height: 100px;
  display: block;
  /* Multiple drop-shadows create a thicker neon line. Increase radii to emphasise the glow. */
  /* Soften the neon glow around the icons for a more subtle effect */
  /* Tone down the neon glow on the icons so they don't overpower the card */
  /* Apply a softer neon glow around the icons. The radii here are smaller than
     before to prevent the icons from overpowering the surrounding text. */
  /* Soften the neon glow on the icons to avoid overpowering nearby text */
  filter: drop-shadow(0 0 0.5px var(--color-accent)) drop-shadow(0 0 1px var(--color-accent)) drop-shadow(0 0 1.5px var(--color-accent));
}
.format-card .card-title {
  font-family: 'Russo One', sans-serif;
  font-size: 1.25rem;
  color: var(--color-accent);
  margin-bottom: 0.5rem;
}
.format-card .card-text {
  font-size: 0.95rem;
  color: var(--color-subtext);
}

/* Pricing section */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}
.price-card {
  background: var(--color-surface);
  border: 1px solid rgba(194, 23, 255, 0.3);
  border-radius: var(--radius);
  padding: 2rem;
  position: relative;
  overflow: hidden;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.price-card.highlighted {
  border-color: rgba(5, 195, 255, 0.6);
  box-shadow: 0 0 20px rgba(5, 195, 255, 0.3);
}
.price-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 0 15px rgba(194, 23, 255, 0.3);
}
.price-card .card-title {
  font-family: 'Russo One', sans-serif;
  font-size: 1.5rem;
  color: var(--color-accent);
  margin-bottom: 0.5rem;
}
.price-card .card-price {
  font-size: 1.25rem;
  color: var(--color-highlight);
  margin-bottom: 1rem;
}
.price-features {
  list-style: none;
  margin-bottom: 1.5rem;
}
.price-features li {
  margin-bottom: 0.5rem;
  padding-left: 1rem;
  position: relative;
  color: var(--color-subtext);
}
.price-features li::before {
  content: '●';
  position: absolute;
  left: 0;
  color: var(--color-accent);
  font-size: 0.4rem;
  top: 0.4rem;
}

/* Teachers section */
.teachers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}
.teacher-card {
  background: var(--color-surface);
  border: 1px solid rgba(5, 195, 255, 0.3);
  border-radius: var(--radius);
  padding: 2rem 1.5rem;
  text-align: center;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.teacher-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 0 15px rgba(5, 195, 255, 0.3);
}
.teacher-photo {
  width: 150px;
  height: 200px;
  object-fit: contain;
  object-position: center top;
  margin: 0 auto 1rem;
  border-radius: var(--radius);
  display: block;
  box-shadow: 0 0 10px rgba(5, 195, 255, 0.2);
  margin-top: 0.5rem;
}
.teacher-name {
  font-family: 'Russo One', sans-serif;
  font-size: 1.5rem;
  color: var(--color-accent);
  margin-bottom: 0.25rem;
}
.teacher-subject {
  font-size: 1rem;
  color: var(--color-highlight);
  margin-bottom: 0.75rem;
}
.teacher-info {
  font-size: 0.9rem;
  color: var(--color-subtext);
}

/* Stats callout */
/*
 * Stats call‑out: show key metrics without consuming an entire mobile viewport.
 * Reduce the vertical padding to make the section more compact while restoring
 * the original, larger font sizes for the numbers. On narrow screens the
 * container wraps the items so they can sit on two rows if necessary. */
/* Stats call‑out: use minimal vertical padding so the block doesn’t dominate
   the viewport on mobile. */
.stats {
  padding: 2rem 0;
  background: linear-gradient(90deg, rgba(5,195,255,0.1), rgba(194,23,255,0.1));
}
/* Stats container orientation: allow wrapping on small screens rather than stacking
   items vertically. This keeps the call‑out short on phones while maintaining
   readability. */
/* Keep stats items spaced evenly without creating excessive height */
.stats-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  text-align: center;
  gap: 1rem;
}
.stats-item {
  flex: 1 1 200px;
}
/* Restore the original bolder number size for prominence */
.stats-number {
  font-family: 'Russo One', sans-serif;
  font-size: 3rem;
  color: var(--color-accent);
  text-shadow: 0 0 10px var(--color-accent);
}
.stats-label {
  font-size: 1rem;
  color: var(--color-subtext);
}

/* Add vertical spacing before the about section to create a clear separation from the hero */
/* Provide a subtle separation between the hero and the about section without wasting too much vertical space. */
.about {
  margin-top: 1rem;
}

/* Add internal padding within the about container to create comfortable text margins */
/* Apply generous padding inside all section containers to create safe zones around text on all screen sizes.
   Increase default padding slightly so content never touches the rounded frame. On mobile screens the padding
   remains ample but scales down slightly to conserve space. */
/* Provide a comfortable safe zone inside each section while reducing wasted space. */
.section .container {
  padding: 2rem;
}

/* Additional padding for About section is now handled by the global section container rule. */

/* Explicitly add padding to specific sections to ensure consistent spacing when nested inside grids or flex
   layouts. Without these rules some text areas can feel cramped on small screens. */
/* Ensure a consistent safe zone across all sections by applying the same
   container padding. The general rule above covers this, so this override is
   no longer necessary. */
/* Apply the same condensed padding to all content containers across sections. */
.reviews .container,
.format .container,
.prices .container,
.teachers .container,
.stats .container,
.signup .container {
  padding: 2rem;
}

/* Footer */
.footer {
  background: #010314;
  padding: 3rem 0 1rem;
  margin-top: 5rem;
  border-top: 1px solid rgba(5, 195, 255, 0.1);
}
.footer-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.footer-logo {
  width: 40px;
  height: 40px;
}
.footer-name {
  font-family: 'Russo One', sans-serif;
  font-size: 1.4rem;
  color: var(--color-accent);
}

/* Footer brand tagline inherits the highlight colour and sits beneath the
   NEOPOINT name. It uses the same display font as the brand name for
   consistency. */
.footer-brand-stack {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.footer-tagline {
  font-family: 'Russo One', sans-serif;
  font-size: 1rem;
  color: var(--color-highlight);
  margin-top: 0.1rem;
}
.footer-nav a {
  margin-right: 1rem;
  color: var(--color-subtext);
  text-decoration: none;
  transition: color var(--transition-fast);
}
.footer-nav a:hover {
  color: var(--color-accent);
}
.social-links a {
  margin-left: 1rem;
  color: var(--color-subtext);
  font-size: 1rem;
  text-decoration: none;
  transition: color var(--transition-fast);
}
.social-links a:hover {
  color: var(--color-accent);
}
.footer-bottom {
  text-align: center;
  color: var(--color-subtext);
  font-size: 0.85rem;
  border-top: 1px solid rgba(5, 195, 255, 0.05);
  padding-top: 1rem;
}

@media (max-width: 768px) {
  .footer-nav {
    width: 100%;
    text-align: center;
    margin-top: 1rem;
  }
  .footer-nav a {
    margin: 0 0.5rem;
    display: inline-block;
  }
  .social-links {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
  }
  .social-links a {
    margin: 0;
  }
}

/* Responsive tweaks */
@media (max-width: 768px) {
  .header {
    padding: 0.75rem 1rem;
  }
  .nav a {
    margin-left: 1rem;
  }
  .hero-title {
    /* Increase the hero title on mobile so it occupies more of the viewport */
    font-size: 2.8rem;
  }
  .hero-subtitle {
    font-size: 1rem;
  }
  .section {
    padding: 4rem 0;
  }
  .price-card .card-title {
    font-size: 1.3rem;
  }

  /* Even larger icons on mobile for better readability */
  .format-card .icon-image {
    width: 110px;
    height: 110px;
  }

  /* Ensure hero buttons span most of the width and are centered on mobile */
  .hero-buttons .btn {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
  }

  /* Ensure the call‑to‑action button matches the other hero buttons on small screens */
  .hero-buttons .btn.cta {
    flex-basis: auto;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Hide the tagline on very narrow screens to avoid overlap with the menu icon and adjust spacing */
@media (max-width: 480px) {
  /* Allow the tagline to remain visible on extra small screens. Previously it was hidden to
     avoid overlap, but the brand stack now handles alignment gracefully. */
  .logo-container .brand-tagline {
    display: inline;
  }
  .menu-toggle {
    margin-left: 0.5rem;
  }
}

/* Reduce internal padding on very small screens to make better use of space while preserving safe zones */
@media (max-width: 480px) {
  .section .container,
  .reviews .container,
  .format .container,
  .prices .container,
  .teachers .container,
  .stats .container,
  .signup .container {
    padding: 2rem;
  }

  /* Provide short labels for hero buttons when the data-mobile-label attribute is present. Hide the original
     text by reducing its font size to zero and display the mobile label via a pseudo-element. */
  .hero-buttons .btn[data-mobile-label] {
    font-size: 0;
    position: relative;
  }
  .hero-buttons .btn[data-mobile-label]::before {
    content: attr(data-mobile-label);
    font-size: 1rem;
    color: inherit;
    line-height: 1.2;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
  }
}

/* -------------------------------------------------------------------------
   HERO LAYOUT FIXES
   To ensure the hero section content (title, subtitle and buttons) is always
   centred on tablets and phones, the following overrides collapse the
   button grid into a single column and centre everything. These rules live
   at the end of the stylesheet so they override earlier declarations.
*/

/* Centre hero content and stack buttons on screens up to 1024px wide. */
@media (max-width: 1024px) {
  /* Align the entire hero content centrally */
  .hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
  /* Stack hero buttons vertically and centre them */
  .hero-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
  }
  /* Give all hero buttons (including the CTA) the same width and reset order
     so the sign‑up button doesn’t float to the side on tablets. Set flex to
     none so buttons don’t shrink unevenly across different widths. */
  .hero-buttons .btn,
  .hero-buttons .btn.cta {
    flex: 0 0 auto;
    width: 80%;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
    order: 0;
  }
}

/* On medium phones (up to 768px) make the buttons a bit narrower to avoid
   touching the edges. */
@media (max-width: 768px) {
  .hero-buttons .btn,
  .hero-buttons .btn.cta {
    width: 90%;
  }
}

/* On very small screens (up to 480px) make the buttons even narrower to
   maintain comfortable side margins. */
@media (max-width: 480px) {
  .hero-buttons .btn,
  .hero-buttons .btn.cta {
    width: 95%;
  }
}

/* Extra small phone adjustments (e.g. widths under 400px).
   Narrow the hero button widths further and slightly reduce the hero title
   size to prevent awkward line breaks when the viewport is extremely small. */
@media (max-width: 400px) {
  .hero-buttons .btn,
  .hero-buttons .btn.cta {
    width: 90%;
  }
  .hero-title {
    font-size: clamp(2.5rem, 10vw, 4rem);
  }
  .hero-subtitle {
    font-size: 0.9rem;
  }
}