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

html,
body {
  width: 100%;
  min-height: 100%;
  font-family: "Space Grotesk", sans-serif;
  scroll-behavior: smooth;
}

/* ===============================
   ROOT VARIABLES
================================ */
:root {
  --reffto-blue: #2563eb;
  --reffto-yellow: #facc15;
  --glass-bg: rgba(255, 255, 255, 0.4);
  --glass-border: rgba(255, 255, 255, 0.6);
  --energy-gradient: linear-gradient(
    90deg,
    var(--reffto-blue),
    #60a5fa 45%,
    var(--reffto-yellow)
  );
  --accent-shadow: 0 10px 30px rgba(37, 99, 235, 0.08);
  --max-content-width: 1200px;
}

/* ===============================
   REDUCED MOTION
================================ */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ===============================
   ACCESSIBILITY
================================ */
.visually-hidden {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

/* ===============================
   MOBILE HEADER DROPDOWN
================================ */
#mobile-menu {
  opacity: 0;
  transform: scaleY(0.95);
  transform-origin: top;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

#mobile-menu.open {
  opacity: 1;
  transform: scaleY(1);
  pointer-events: auto;
}

@media (min-width: 768px) {
  #mobile-menu {
    display: none !important;
  }
}

/* ==================================================
   ABOUT HERO — MOBILE ONLY (DESKTOP 100% SAFE)
================================================== */
@media (max-width: 768px) {

  /* FIX CTA WRAPPER (kills flex-col stretch) */
  #about-hero article > div:last-child {
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    gap: 14px !important;
  }

  /* FIX BUTTON SIZE (REAL FIX) */
  #about-hero article > div:last-child a {
    display: inline-flex !important;
    width: fit-content !important;
    padding: 10px 20px !important;
    font-size: 14px !important;
    line-height: 1.2;
    border-radius: 999px !important;
    white-space: nowrap !important;
    justify-content: flex-start !important;
  }

  /* Mobile hero image spacing */
  #about-hero article .md\\:hidden {
    margin: 24px 0;
  }

  #about-hero article .md\\:hidden img {
    height: 220px;
    border-radius: 18px;
  }
}
/* =========================================
   IMPACT STATS — MOBILE HORIZONTAL FIX
   ========================================= */
@media (max-width: 768px) {

  /* Stats container ko row bana do */
  #about-hero .max-w-5xl {
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 12px !important;
  }

  /* Har stat ko equal width */
  #about-hero .max-w-5xl > div {
    flex: 1 1 0;
    min-width: 0;
  }

  /* Text thoda compact */
  #about-hero .max-w-5xl h3 {
    font-size: 1.5rem; /* ~text-2xl */
  }

  #about-hero .max-w-5xl p {
    font-size: 0.7rem;
    line-height: 1.1;
  }
}
/* =========================================
   MISSION–VISION — MOBILE FONT TUNING
   ========================================= */
@media (max-width: 768px) {

  /* Section padding thoda compact */
  #mission-vision {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  /* Small label */
  #mission-vision p.uppercase {
    font-size: 0.7rem; /* ~text-xs */
    margin-bottom: 8px;
  }

  /* Main heading (hero se clearly chhota) */
  #mission-vision h2 {
    font-size: 1.75rem;   /* ~text-2xl */
    line-height: 1.25;
  }

  /* Highlighted words */
  #mission-vision h2 span {
    font-size: inherit;
  }

  /* Description under heading */
  #mission-vision .max-w-lg {
    font-size: 0.95rem;
    line-height: 1.5;
    margin-top: 16px;
  }

  /* Timeline titles (Vision / Mission / Core Values) */
  #mission-vision h3 {
    font-size: 1rem; /* ~text-base */
    margin-bottom: 6px;
  }

  /* Timeline text */
  #mission-vision .text-gray-600 {
    font-size: 0.85rem;
    line-height: 1.45;
  }

  /* Icons slightly smaller on mobile */
  #mission-vision img {
    width: 32px;
    height: 32px;
  }

  /* Timeline spacing tighten */
  #mission-vision .space-y-10 > div {
    margin-bottom: 28px;
  }
}
/* =========================================
   JOURNEY — MOBILE CARD (STABLE & SAFE)
   ========================================= */
@media (max-width: 768px) {

  /* Section padding */
  #journey {
    padding-top: 56px;
    padding-bottom: 56px;
  }

  /* Remove desktop timeline visuals */
  #journey .absolute.left-1\/2,
  #journey .rounded-full.border-4 {
    display: none !important;
  }

  /* Neutralize Tailwind space-y */
  #journey .space-y-32 > * {
    margin-top: 0 !important;
  }

  /* Card layout */
  #journey .relative.flex {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;

    background: #ffffff;
    border-radius: 18px;
    padding: 14px;
    margin-bottom: 20px;

    box-shadow: 0 6px 16px rgba(0,0,0,0.08);
  }

  /* Image */
  #journey figure {
    order: 1 !important;
    width: 100% !important;
    margin: 0 0 12px 0 !important;
    border-radius: 14px;
    overflow: hidden;
  }

  #journey figure img {
    width: 100%;
    height: 180px;
    object-fit: cover;
  }

  /* Content */
  #journey article {
    order: 2 !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: left !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  #journey article h3 {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 6px;
  }

  #journey article p {
    font-size: 0.88rem;
    line-height: 1.45;
    color: #4b5563;
  }
}


/* =========================================
   FOUNDERS — MOBILE REFINEMENT
   ========================================= */
@media (max-width: 768px) {

  /* Section padding reduce */
  #founders {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  /* Header text scale down */
  #founders h2 {
    font-size: 2rem; /* ~text-3xl */
  }

  #founders header p {
    font-size: 0.95rem;
    line-height: 1.5;
  }

  /* Card spacing & padding */
  #founders .group {
    padding: 20px !important;
    border-radius: 20px;
  }

  /* Profile image smaller */
  #founders figure img {
    width: 120px;
    height: 120px;
  }

  /* Founder name */
  #founders h3 {
    font-size: 1.3rem;
  }

  /* Role text */
  #founders p.font-medium {
    font-size: 0.9rem;
    margin-bottom: 10px;
  }

  /* Bio text */
  #founders p.text-sm {
    font-size: 0.85rem;
    line-height: 1.45;
  }

  /* Icons compact */
  #founders .flex.justify-center a {
    padding: 10px;
  }

  /* Kill hover scale on mobile */
  #founders *:hover {
    transform: none !important;
  }
}
/* =========================================
   WHY CHOOSE — MOBILE REFINEMENT
   ========================================= */
@media (max-width: 768px) {

  /* Section spacing */
  #why-choose {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  /* Header scale down */
  #why-choose h2 {
    font-size: 2rem; /* ~text-3xl */
  }

  #why-choose header p {
    font-size: 0.95rem;
    line-height: 1.5;
  }

  /* Stack image & features naturally */
  #why-choose .grid {
    gap: 32px;
  }

  /* Image container */
  #why-choose figure {
    order: 1;
  }

  #why-choose figure img {
    height: 220px !important;
    transform: none !important; /* ❌ no hover zoom */
  }

  /* Kill hover scale on mobile */
  #why-choose figure:hover,
  #why-choose figure *:hover {
    transform: none !important;
  }

  /* Features container */
  #why-choose .space-y-8 {
    order: 2;
    gap: 16px;
  }

  /* Feature card compact */
  #why-choose .space-y-8 > div {
    padding: 16px !important;
    border-radius: 18px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.08);
  }

  /* Icon size */
  #why-choose i {
    width: 20px;
    height: 20px;
  }

  /* Feature title */
  #why-choose h3 {
    font-size: 1rem;
    margin-bottom: 4px;
  }

  /* Feature text */
  #why-choose p.text-gray-600 {
    font-size: 0.88rem;
    line-height: 1.45;
  }

  /* Disable translate hover on cards */
  #why-choose .group:hover {
    transform: none !important;
  }
}
/* =========================================
   JOIN OUR MISSION — MOBILE BUTTON FIX (FINAL)
   ========================================= */
@media (max-width: 768px) {

  /* Section spacing */
  #join-mission {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  /* Heading */
  #join-mission h2 {
    font-size: 2rem;
    line-height: 1.25;
    margin-bottom: 16px;
  }

  /* Paragraph */
  #join-mission p {
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 28px;
  }

  /* CTA wrapper — FORCE SAME LINE */
  #join-mission .flex {
    flex-direction: row !important;   /* ✅ force row */
    justify-content: center;
    gap: 10px;
    flex-wrap: nowrap;                /* ❌ no wrap */
  }

  /* Buttons — compact */
  #join-mission a {
    padding: 10px 18px !important;
    font-size: 0.85rem !important;
    line-height: 1.2;
    border-radius: 999px;
    width: fit-content;
    white-space: nowrap;              /* ✅ text never breaks */
  }

  /* Icons smaller */
  #join-mission a i {
    width: 16px;
    height: 16px;
  }

  /* No hover jump on mobile */
  #join-mission a:hover {
    transform: none !important;
    box-shadow: none !important;
  }

  #join-mission a:active {
    transform: scale(0.96);
  }
}



/* ===============================
   GLOBAL UTILITIES
================================ */
.gradient-text {
  background: linear-gradient(to right, #2563eb, #facc15);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.reffto-btn {
  background: linear-gradient(90deg, #2563eb, #1d4ed8);
  color: #fff;
  font-weight: 600;
  transition: 0.25s ease;
}
.reffto-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.3);
}

/* ===============================
   ABOUT HERO
================================ */
#about-hero img {
  transition: transform 0.5s ease;
}
#about-hero img:hover {
  transform: scale(1.03);
}

/* ===============================
   MISSION – VISION
================================ */
#mission-vision {
  position: relative;
}
#mission-vision .icon-block {
  transition: transform 0.25s ease;
}
#mission-vision .item:hover .icon-block {
  transform: rotate(6deg) scale(1.1);
}

/* ===============================
   JOURNEY TIMELINE
================================ */
#journey img {
  transition: 0.4s ease;
}
#journey img:hover {
  transform: scale(1.05);
}
#progress-line {
  transition: height 0.25s linear;
}

/* ===============================
   FOUNDERS
================================ */
#founders .card {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(18px);
  border-radius: 24px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  transition: 0.4s ease;
}
#founders .card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.1);
}
#founders img {
  transition: transform 0.4s ease;
}
#founders img:hover {
  transform: scale(1.08);
}

#founders a {
  transition: 0.3s ease;
}
#founders a:hover {
  transform: scale(1.1);
}

/* ===============================
   WHY CHOOSE REFFTO
================================ */
#why-choose .feature-card {
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(14px);
  border-radius: 20px;
  transition: 0.35s ease;
}
#why-choose .feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.1);
}
#why-choose .feature-card i {
  transition: 0.3s ease;
}
#why-choose .feature-card:hover i {
  transform: scale(1.1) rotate(5deg);
}

/* ===============================
   JOIN OUR MISSION
================================ */
#join-mission .reffto-btn {
  background: linear-gradient(90deg, #2563eb, #facc15);
}
#join-mission .reffto-btn:hover {
  box-shadow: 0 10px 30px rgba(37, 99, 235, 0.25);
}

/* ===============================
   FOOTER
================================ */
footer {
  background: #ffffff;
  border-top: 1px solid #e5e7eb;
}
footer h3 {
  font-weight: 600;
}
footer h3::after {
  content: "";
  width: 40px;
  height: 2px;
  background: linear-gradient(90deg, #1e3a8a, #facc15);
  display: block;
  margin-top: 6px;
}
footer a {
  transition: 0.25s ease;
}
footer a:hover {
  color: #1e3a8a;
  transform: translateX(3px);
}