/* MindBuddies brand — Color Palette + Typography (IN USE only) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  --primary-50: #EDFBFF;
  --primary-400: #48D6FF;
  --primary-700: #008AFF;
  --primary-950: #0E365D;

  --neutral-50: #FAFAFA;
  --neutral-100: #F5F5F5;
  --neutral-200: #E6E6E6;
  --neutral-300: #D3D3D3;
  --neutral-400: #A3A3A3;
  --neutral-600: #535353;
  --neutral-700: #404040;
  --neutral-900: #202020;

  --success-600: #16A34A;
  --success-700: #15803D;
  --warning-400: #FACC15;
  --error-50: #FEF2F2;
  --error-600: #DC2626;

  --white: #FFFFFF;
  --black: #000000;

  --gradient-banner: linear-gradient(90deg, #008AFF 0%, #48D6FF 100%);
  --gradient-dark: linear-gradient(180deg, #202020 0%, #404040 100%);

  --primary-100: var(--primary-50);
  --primary-200: var(--primary-400);
  --primary-300: var(--primary-400);
  --primary-500: var(--primary-400);
  --primary-600: var(--primary-700);
  --primary-800: var(--primary-950);
  --primary-900: var(--primary-950);
  --neutral-500: var(--neutral-400);
  --neutral-800: var(--neutral-700);
  --success-50: var(--neutral-100);
  --warning-50: var(--primary-50);
  --warning-100: var(--neutral-100);
  --warning-600: var(--primary-950);
  --error-200: var(--error-50);

  --color-bg: var(--primary-50);
  --color-bg-soft: var(--neutral-100);
  --color-bg-guides: var(--primary-50);
  --color-bg-card: var(--white);
  --color-navy: var(--primary-950);
  --color-navy-soft: var(--primary-950);
  --color-blue: var(--primary-700);
  --color-blue-dark: var(--primary-700);
  --color-cyan: var(--primary-400);
  --color-text: var(--neutral-900);
  --color-heading: var(--neutral-900);
  --color-subhead: var(--neutral-700);
  --color-muted: var(--neutral-600);
  --color-faint: var(--neutral-400);
  --color-border: var(--neutral-200);
  --color-input-border: var(--neutral-400);
  --color-error: var(--error-600);
  --color-error-bg: var(--error-50);
  --color-success: var(--success-700);
  --color-success-toast: var(--success-600);
  --color-rating: var(--warning-400);
  --color-note: var(--primary-950);

  --font-sans: 'Inter', sans-serif;
  --tracking-heading: -0.05em;
  --tracking-button: -0.05em;

  --text-h1-size: 40px;
  --text-h1-line: 1.2;
  --text-h2-size: 32px;
  --text-h2-line: 1.25;
  --text-h3-size: 24px;
  --text-h3-line: 1.3;
  --text-h5-size: 20px;
  --text-h5-line: 1.3;
  --text-body-lg: 18px;
  --text-body-md: 16px;
  --text-body-sm: 14px;
  --text-body-line: 1.55;
  --text-btn-lg: 16px;
  --text-btn-md: 14px;
  --text-btn-sm: 12px;
  --text-caption: 12px;
  --text-caption-line: 1.35;
  --text-extra: 12px;

  --max-width: 1280px;
  --page-gutter: clamp(20px, 3vw, 40px);
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 24px;
  --shadow-soft: 0 1px 2px rgba(14, 54, 93, 0.04), 0 8px 24px rgba(14, 54, 93, 0.06);
  --shadow-float: 0 2px 4px rgba(14, 54, 93, 0.04), 0 12px 28px rgba(14, 54, 93, 0.08);
  --shadow-card: 0 1px 1px rgba(14, 54, 93, 0.03), 0 10px 32px -12px rgba(14, 54, 93, 0.1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

html {
  scroll-behavior: smooth;
  overflow-x: clip;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
  background: var(--primary-50);
  color: var(--neutral-600);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  max-width: 100%;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: var(--tracking-heading);
}

.hero-title {
  color: var(--white);
}

button, input, select, textarea {
  font-family: var(--font-sans);
}

input::placeholder,
textarea::placeholder {
  color: var(--neutral-400);
}

/* Header chrome */
.pre-header {
  background: var(--gradient-banner) !important;
  color: var(--primary-950) !important;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: -0.02em;
}

.header {
  background: rgba(255, 255, 255, 0.96) !important;
  border-bottom: 1px solid var(--neutral-200);
}

.logo {
  display: flex !important;
  align-items: center;
  gap: 10px;
  width: auto !important;
  height: 40px !important;
  position: relative !important;
}

.logo img {
  position: static !important;
  transform: none !important;
  height: 40px !important;
  width: 40px;
  object-fit: contain;
  animation: none !important;
  opacity: 1 !important;
}

.logo-text {
  position: static !important;
  transform: none !important;
  animation: none !important;
  opacity: 1 !important;
  font-family: var(--font-sans) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: var(--tracking-heading);
  color: var(--primary-950) !important;
  text-shadow: none !important;
}

.nav-link {
  color: var(--neutral-700) !important;
  font-weight: 500;
}

.nav-link:hover {
  background: var(--primary-50) !important;
  color: var(--primary-950) !important;
}

.nav-link.active {
  color: var(--primary-700) !important;
}

.dropdown-item:hover,
.dropdown-view-all:hover {
  background: var(--primary-50) !important;
  color: var(--primary-950) !important;
}

.cta-button,
.mobile-cta-button,
.modal-submit {
  background: var(--primary-700) !important;
  color: var(--white) !important;
  font-weight: 600 !important;
  letter-spacing: var(--tracking-button);
  box-shadow: none !important;
}

.cta-button:hover,
.mobile-cta-button:hover,
.modal-submit:hover:not(:disabled) {
  background: var(--primary-950) !important;
  color: var(--white) !important;
  transform: none !important;
}

/* Footer */
.footer {
  background: var(--primary-950) !important;
  color: var(--white) !important;
}

.footer-column h3 {
  color: var(--primary-400) !important;
}

.footer-description,
.footer-links a,
.footer-bottom {
  color: var(--neutral-300) !important;
}

.footer-links a:hover {
  color: var(--primary-400) !important;
}

.footer-brand-text {
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: var(--tracking-heading);
  color: var(--white);
}

.footer-brand img {
  height: 36px;
  width: 36px;
  object-fit: contain;
}

/* Timeline */
.ptl2 {
  background: var(--primary-950) !important;
  color: var(--primary-50) !important;
}

.ptl2-path {
  stroke: var(--primary-400) !important;
  filter: drop-shadow(0 0 8px rgba(72, 214, 255, 0.45)) !important;
}

.ptl2-path-underlay {
  stroke: rgba(72, 214, 255, 0.28) !important;
}

.ptl2-dot {
  box-shadow: 0 0 0 2px var(--primary-400) inset, 0 0 10px 2px rgba(72, 214, 255, 0.4) !important;
}

.ptl2-connector {
  background: linear-gradient(90deg, rgba(72, 214, 255, 0.9), rgba(72, 214, 255, 0.25)) !important;
}

.ptl2-card .year {
  color: var(--primary-950) !important;
  background: var(--gradient-banner) !important;
}

/* Floating call */
.call-btn {
  background: var(--success-700) !important;
}

#appointmentModal .modal-content {
  max-width: 48rem;
  width: min(48rem, calc(100% - 2rem));
}

@media (max-width: 1100px) {
  .nav {
    display: none !important;
  }

  .mobile-menu-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
  }

  .logo img {
    height: 32px !important;
    width: 32px !important;
  }
}

@media (min-width: 1101px) {
  .mobile-menu-btn {
    display: none !important;
  }

  .mobile-menu {
    display: none !important;
  }
}

@media (max-width: 700px) {
  :root {
    --text-h1-size: 32px;
    --text-h2-size: 24px;
    --text-h3-size: 20px;
  }

  img,
  video,
  iframe {
    max-width: 100%;
  }

  .section-title,
  .about-text h2,
  .cta-title,
  .homepage-services-title {
    font-size: clamp(1.75rem, 6.5vw, 2.25rem) !important;
    line-height: 1.25;
  }

  .hero-title {
    font-size: clamp(2rem, 8vw, 2.75rem) !important;
    line-height: 1.2;
  }

  .founder-layout {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  .founder-content,
  .appointment-form-container-wide,
  .appointment-form-container {
    padding: 1.25rem !important;
  }

  .form-grid-wide,
  .services-grid,
  .team-grid,
  .mission-grid,
  .tips-grid {
    grid-template-columns: 1fr !important;
  }

  .submit-btn-wide {
    min-width: 0 !important;
    width: 100%;
    max-width: 100%;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .testimonial-card,
  .testimonials-swiper .swiper-slide {
    width: min(402px, calc(100vw - 2.5rem)) !important;
    max-width: calc(100vw - 2.5rem);
  }

  .social-link {
    min-width: 0 !important;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .floating-call-btn {
    bottom: 1rem;
    right: 1rem;
  }
}