/* ========== RESET ========== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --pink: #ff3cac;
  --purple: #784ba0;
  --aqua: #2b86c5;
  --white: #fff;
  --bg: #0b0018;
  --font-heading: 'Arial Black', sans-serif;
  --font-body: 'Segoe UI', sans-serif;
}

body {
  font-family: var(--font-body);
  background: linear-gradient(to bottom, #0b0018 0%, #1a002f 100%);
  color: var(--white);
  scroll-behavior: smooth;
  overflow-x: hidden;
}

/* ========== HEADER ========== */
.main-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2rem 4%;
  position: relative;
  z-index: 10;
}

.logo {
  width: 200px;
  height: auto;
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 2rem;
}

.nav-links a {
  color: #00ffff;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.1rem;
  transition: color 0.3s ease;
}

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

/* ========== HERO SECTION ========== */
.hero {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 3rem;
  padding: 4rem 4%;
  min-height: 90vh;
}

.hero-text {
  flex: 1 1 480px;
  text-align: center;
}

.hero-text h1 {
  font-family: var(--font-heading);
  font-size: 3.5rem;
  line-height: 1.2;
  margin-bottom: 1.2rem;
  background: linear-gradient(to right, var(--pink), var(--aqua));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 10px #ff3cac88, 0 0 20px #ff3cac44;
}

.hero-text p {
  font-size: 1.2rem;
  color: #c2f9ff;
  margin-bottom: 2rem;
}

.cta-btn {
  background: var(--pink);
  color: var(--white);
  padding: 0.9rem 2rem;
  border: none;
  font-size: 1rem;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 0 15px #ff3cac99;
  transition: all 0.3s ease-in-out;
}

.cta-btn:hover {
  background: var(--aqua);
  box-shadow: 0 0 25px #2b86c5cc, 0 0 40px #2b86c5aa;
}

.hero-image {
  flex: 1 1 600px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding-top: 2rem;
}

.hero-image img {
  width: auto;
  height: 90vh;
  max-height: 800px;
  object-fit: contain;
  filter: drop-shadow(0 0 30px #ff00ccaa);
}


/* ========== FEATURES ========== */
.features {
  padding: 4rem 4% 2rem;
  text-align: center;
  background: linear-gradient(to bottom, #13022e, #0b0018);
}

.features h2 {
  font-size: 2.5rem;
  margin-bottom: 2rem;
  color: var(--pink);
  text-shadow: 0 0 10px #ff3cac88;
}

.feature-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
}

.feature-card {
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid #6600cc;
  border-radius: 15px;
  padding: 2rem 1.5rem;
  max-width: 260px;
  box-shadow: 0 0 30px rgba(0, 255, 255, 0.15);
  transition: transform 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 0 40px rgba(255, 0, 255, 0.3);
}

.feature-card img {
  width: 64px;
  margin-bottom: 1rem;
}

.feature-card h3 {
  color: var(--aqua);
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}

.feature-card p {
  font-size: 0.95rem;
  color: #d5faff;
}

/* ========== TESTIMONIAL ========== */
.testimonial {
  padding: 3rem 4%;
  text-align: center;
  font-size: 1.3rem;
  background: #0b0018;
  color: #00ffff;
  font-style: italic;
}

.testimonial cite {
  display: block;
  margin-top: 0.75rem;
  font-style: normal;
  color: #ff99f0;
}

/* ========== FOOTER ========== */
.footer {
  padding: 2rem 4%;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.3);
  color: #66ffe6;
  font-size: 0.9rem;
  border-top: 1px solid #330066;
}

/* ========== SCROLL ANIMATIONS ========== */
.fade-in,
.slide-up {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease-out;
}

.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
  .hero {
    flex-direction: column-reverse;
    text-align: center;
    padding: 2rem 4%;
  }

  .hero-text h1 {
    font-size: 2.2rem;
  }

  .hero-image img {
    max-height: 400px;
  }

  .feature-grid {
    flex-direction: column;
    align-items: center;
  }
}
/* ========== AI PROMPT DEMO ========== */
.ai-demo {
  margin-top: 5rem;
  padding: 3rem 4%;
  text-align: center;
  background: linear-gradient(to bottom, #0e0220, #140032);
  border-top: 2px solid #ff00cc44;
}

.ai-demo h2 {
  font-size: 2rem;
  color: var(--pink);
  margin-bottom: 2rem;
  text-shadow: 0 0 10px #ff3cac88;
}

.ai-box {
  max-width: 600px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.04);
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.2);
}

.ai-box input {
  width: 100%;
  padding: 0.8rem 1rem;
  font-size: 1rem;
  border: none;
  border-radius: 8px;
  margin-bottom: 1rem;
  background-color: #1a0033;
  color: #fff;
  outline: none;
}

.ai-box button {
  padding: 0.6rem 1.5rem;
  background: var(--pink);
  color: white;
  border: none;
  font-size: 1rem;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.ai-box button:hover {
  background: var(--aqua);
}

.ai-response-wrap {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-top: 1.5rem;
}

.ai-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 15px #ff3cac99;
  border: 2px solid #2b86c5;
}

.response-box {
  flex: 1;
  min-height: 60px;
  font-family: monospace;
  color: #66ffe6;
  background: rgba(0, 0, 0, 0.2);
  padding: 1rem;
  border-radius: 12px;
  white-space: pre-line;
  box-shadow: 0 0 20px #00ffff33;
}
/* === Coaching Plans Section === */
.plans-section {
	padding: 4rem 2rem;
	background: linear-gradient(to right, #1e002b, #110018);
	text-align: center;
	color: #fdfcff;
}

.plans-section h2 {
	font-size: 2.8rem;
	color: #f760c4;
	text-shadow: 0 0 10px #f760c4;
	margin-bottom: 3rem;
	letter-spacing: 1px;
}

.pricing-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 2rem;
	justify-content: center;
	align-items: stretch;
	max-width: 1200px;
	margin: 0 auto;
}

.plan-card {
	background: rgba(255, 255, 255, 0.05);
	border: 2px solid rgba(255, 255, 255, 0.1);
	border-radius: 1rem;
	padding: 2rem;
	box-shadow: 0 0 20px rgba(247, 96, 196, 0.2);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	backdrop-filter: blur(12px);
}

.plan-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 0 30px rgba(255, 255, 255, 0.2);
}

.plan-card h3 {
	font-size: 1.6rem;
	margin-bottom: 1rem;
	color: #ffffff;
	text-shadow: 0 0 6px #fdfcff;
}

.plan-card .price {
	font-size: 2rem;
	color: #f0aaf7;
	text-shadow: 0 0 8px #f760c4;
	margin: 1rem 0;
}

.plan-card ul {
	list-style: none;
	padding: 0;
	margin: 1rem 0 2rem;
}

.plan-card ul li {
	margin: 0.5rem 0;
	font-size: 1rem;
	color: #ddd;
}

.plan-card .cta-button {
	background: linear-gradient(135deg, #f760c4, #ff93ec);
	color: #0b0018;
	border: none;
	padding: 0.75rem 1.5rem;
	border-radius: 50px;
	font-weight: bold;
	cursor: pointer;
	transition: background 0.3s ease, transform 0.2s ease;
	box-shadow: 0 0 10px #f760c4;
}

.plan-card .cta-button:hover {
	background: linear-gradient(135deg, #ff93ec, #f760c4);
	transform: scale(1.05);
	box-shadow: 0 0 15px #ffb6f0;
}

.plan-card.highlight {
	border-color: #f760c4;
	box-shadow: 0 0 25px #f760c4;
}
/* === SIGNUP SECTION - POLISHED RETRO FUTURISTIC === */

.checkout-section {
  padding: 4rem 1.5rem;
  background: linear-gradient(145deg, #0b0014, #1a0033);
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.retro-wrapper {
  max-width: 420px;
  width: 100%;
  background: #1e1e2f;
  border: 2px solid #ff3cac;
  border-radius: 18px;
  padding: 2.5rem;
  box-shadow: 
    0 0 15px rgba(255, 60, 172, 0.6), 
    0 0 35px rgba(96, 246, 255, 0.4) inset;
  animation: glowPulse 3s infinite alternate;
}

.glow-text {
  font-size: 1.8rem;
  font-weight: bold;
  color: #ff3cac;
  text-shadow: 0 0 6px #ff3cac, 0 0 12px #60f6ff;
  text-align: center;
  margin-bottom: 1rem;
  font-family: 'Orbitron', sans-serif;
}

.checkout-price {
  font-size: 1.3rem;
  text-align: center;
  margin-bottom: 1rem;
  color: #ffffff;
}

.subtext {
  font-size: 0.95rem;
  text-align: center;
  margin-bottom: 2rem;
  color: #cccccc;
  font-family: 'Orbitron', sans-serif;
}

form label {
  display: block;
  margin-bottom: 0.3rem;
  font-weight: 600;
  color: #ffffff;
}

form input {
  width: 100%;
  padding: 0.75rem;
  margin-bottom: 1.2rem;
  border-radius: 10px;
  border: none;
  background-color: #2c2c3c;
  color: #ffffff;
  font-size: 1rem;
}

form input::placeholder {
  color: #888;
}

.cta-button.pulse-button {
  width: 100%;
  padding: 0.85rem;
  font-size: 1.1rem;
  background: #ff3cac;
  color: #fff;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  animation: pulseGlow 2s infinite;
  transition: background 0.3s ease;
  font-weight: 600;
  font-family: 'Orbitron', sans-serif;
}

.cta-button.pulse-button:hover {
  background: #ff5fcb;
}

#signup-success {
  text-align: center;
  margin-top: 1rem;
  color: #ff3cac;
  font-weight: bold;
  display: none;
}

.hidden {
  display: none !important;
}

.close-btn {
  margin-top: 1.5rem;
  background: transparent;
  color: #aaa;
  border: none;
  cursor: pointer;
  font-size: 0.9rem;
  text-align: center;
  display: block;
  width: 100%;
}

/* === Neon Glow Animations === */
@keyframes pulseGlow {
  0% {
    box-shadow: 0 0 5px #ff3cac;
  }
  100% {
    box-shadow: 0 0 20px #ff3cac, 0 0 40px #60f6ff;
  }
}

@keyframes glowPulse {
  0% {
    box-shadow: 0 0 10px #ff3cac, 0 0 30px #60f6ff inset;
  }
  100% {
    box-shadow: 0 0 30px #ff3cac, 0 0 60px #60f6ff inset;
  }
}
/* === MOBILE SUPERCHARGE === */
@media (max-width: 768px) {
  /* HEADER */
  .main-header {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
    padding: 1.5rem 1rem;
  }

  .logo {
    width: 140px;
  }

  .nav-links {
    flex-direction: column;
    gap: 0.75rem;
  }

  .nav-links a {
    font-size: 1rem;
  }

  /* HERO */
  .hero {
    flex-direction: column-reverse;
    padding: 2rem 1rem;
    gap: 2rem;
  }

  .hero-text h1 {
    font-size: 2.2rem;
  }

  .hero-text p {
    font-size: 1rem;
  }

  .hero-image img {
    max-height: 320px;
    width: 100%;
    height: auto;
  }

  /* FEATURES */
  .features h2 {
    font-size: 1.8rem;
  }

  .feature-grid {
    flex-direction: column;
    gap: 1.5rem;
  }

  .feature-card {
    max-width: 90%;
    margin: 0 auto;
    padding: 1.5rem;
  }

  /* TESTIMONIAL */
  .testimonial {
    font-size: 1.1rem;
    padding: 2rem 1.5rem;
  }

  /* PLANS SECTION */
  .plans-section h2 {
    font-size: 2.2rem;
  }

  .pricing-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .plan-card {
    padding: 1.5rem;
  }

  .plan-card h3 {
    font-size: 1.4rem;
  }

  .plan-card .price {
    font-size: 1.8rem;
  }

  .plan-card ul li {
    font-size: 0.95rem;
  }

  .plan-card .cta-button {
    font-size: 1rem;
  }

  /* AI DEMO */
  .ai-demo {
    padding: 2rem 1rem;
  }

  .ai-demo h2 {
    font-size: 1.8rem;
  }

  .ai-box {
    padding: 1.5rem;
  }

  .ai-box input,
  .ai-box button {
    font-size: 1rem;
  }

  .ai-response-wrap {
    flex-direction: column;
    align-items: center;
    text-align: left;
  }

  .response-box {
    width: 100%;
  }

  /* SIGNUP MODAL */
  .checkout-section {
    padding: 2rem 1rem;
  }

  .retro-wrapper {
    padding: 2rem 1rem;
    width: 100%;
    max-width: 95%;
  }

  .glow-text {
    font-size: 1.5rem;
  }

  .checkout-price {
    font-size: 1.2rem;
  }

  .subtext {
    font-size: 0.9rem;
  }

  form input {
    font-size: 0.95rem;
    padding: 0.6rem;
  }

  .cta-button.pulse-button {
    font-size: 1rem;
    padding: 0.75rem;
  }

  .close-btn {
    font-size: 0.8rem;
  }

  /* FOOTER */
  .footer {
    font-size: 0.85rem;
    padding: 1rem 0.5rem;
  }
}