@media (max-width: 767px) {

  /* ===== BASE & RESET ===== */
  html, body {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    box-sizing: border-box;
  }

  *, *::before, *::after {
    box-sizing: inherit;
  }

  /* ===== HERO SECTION ===== */
  .hero-section {
    position: relative;
    height: 100svh;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    padding: 0;
    font-family: "Inter", sans-serif;
  }

  .background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100svh;
    object-fit: cover;
    object-position: center center;
    z-index: -1;
    margin: 0;
    padding: 0;
    display: block;
  }

  /* ===== HEADER ===== */
  .header {
    position: absolute;
    top: 0.6rem;
    left: 0.6rem;
    z-index: 10;
    font-family: "Inter", sans-serif;
  }

  .logo-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .logo-img {
    width: 2rem;
    height: auto;
  }

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

  .logo-text h1 {
    font-family: "Poppins", sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: #111;
    margin: 0;
  }

  .logo-text p {
    font-family: "Inter", sans-serif;
    font-size: 0.38rem;
    color: #333;
    margin: 0;
  }

  /* ===== MAIN CONTENT ===== */
  .content {
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    text-align: center;
  }

  .text-content {
    display: block;
    /* MODIFIED: Increased top margin to move the text block down */
    margin: 4.5rem auto 0 auto;
    width: 92%;
    max-width: 360px;
    text-align: center;
  }

  .main-heading {
    font-family: "Poppins", sans-serif;
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 0.4rem;
    text-align: center;
    color: #111;
  }

  .sub-heading {
    font-family: "Inter-Bold", sans-serif;
    font-size: 0.60rem;
    font-weight: 600;
    margin-bottom: 1rem;
    text-align: center;
    color: #222;
  }

  .description {
    font-family: "Inter", sans-serif;
    font-size: 0.82rem;
    line-height: 1.8;
    color: #222;
    text-align: center;
    margin: 0 auto 1.6rem auto;
    width: 92%;
    max-width: 340px;
    word-spacing: 0.02em;
    letter-spacing: 0.01em;
  }

  .description br {
    display: none;
  }

  .founder {
    font-family: "Consolas", monospace;
    font-size: 0.78rem;
    text-align: center;
    margin-bottom: 2.6rem;
    color: #111;
    letter-spacing: 0.02em;
  }

  .founder span {
    font-family: "Consolas", monospace;
    font-weight: 700;
    font-style: normal;
    color: #000;
  }

  /* ===== TYPEWRITER TEXT ===== */
  .equation {
    font-family: "Consolas", monospace;
    font-size: 0.9rem;
    font-weight: 700;
    position: absolute;
    bottom: 55%;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    text-align: center;
    color: #111;
    z-index: 15;
  }

  /* ===== CHARACTER (ANNA) ===== */
  .character-container {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
  }

  .character-img {
    width: 95%;
    max-width: 350px;
    height: auto;
    object-fit: contain;
    will-change: opacity, transform;
  }

  /* ===== CHARACTER ANIMATION (Mobile) ===== */
  @keyframes fadeInRight {
    from {
      opacity: 0;
      transform: translateX(50px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes fadeOutLeft {
    from {
      opacity: 1;
      transform: translateX(0);
    }
    to {
      opacity: 0;
      transform: translateX(-50px);
    }
  }

  .character-img.fade-in {
    animation: fadeInRight 0.6s ease-out forwards;
  }

  .character-img.fade-out {
    animation: fadeOutLeft 0.6s ease forwards;
  }

  /* ===== SCROLL BUTTON ===== */
  .scroll-container {
    position: fixed;
    bottom: 0.8rem;
    left: 0.8rem;
    z-index: 5;
  }

  #scrollBtn {
    font-family: "Consolas", monospace;
    color: #111;
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    font-size: 0.7rem;
    opacity: 0.9;
  }

/* =====================================
   CORE SECTION – Mobile Fix
   ===================================== */
.core-section {
  position: relative;
  min-height: 100vh;
  width: 100%;
  padding: 1rem 0;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  font-family: "Inter", sans-serif;
  overflow: hidden;
}

.core-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  opacity: 0.85;
}

.core-container {
  width: 92%;
  max-width: 380px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.core-left,
.core-right {
  width: 100%;
}

.core-left {
  text-align: center;
}

.core-title {
  font-family: "Poppins", sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: #111;
  margin-top: 0;
  margin-bottom: 0.4rem;
}

.core-subtitle {
  font-family: "Inter", sans-serif;
  font-size: 0.8rem;
  color: #333;
  font-weight: 500;
  margin-bottom: 0.2rem;
}

.core-members {
  font-family: "Consolas", monospace;
  font-size: 0.75rem;
  color: #000;
  margin-bottom: 0.8rem;
}

.core-note {
  font-family: "Inter", sans-serif;
  /* CHANGE 1: Reduced font size */
  font-size: 0.7rem;
  color: #222;
  line-height: 1.6;
  text-align: center;
  /* CHANGE 2: Reduced bottom margin to pull button up */
  margin-bottom: 1rem;
  padding: 0;
}

.core-note h3 {
  font-family: "Poppins", sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: #000;
}

.core-btn {
  font-family: "Consolas", monospace;
  background: #111;
  color: #fff;
  border: none;
  padding: 0.7rem 1.4rem;
  font-size: 0.75rem;
  border-radius: 5px;
  /* CHANGE 3: Reduced top/bottom margin to move button & status up */
  margin: 0.6rem auto 0.8rem;
  display: block;
  cursor: pointer;
}

.core-status {
  font-family: "Consolas", monospace;
  font-size: 0.9rem;
  font-weight: 700;
  color: #000;
  /* CHANGE 4: Reduced top margin for tighter spacing */
  margin-top: 0.4rem;
}

.core-right {
  margin-top: 0;
  text-align: center;
}

.core-logo {
  width: 60%;
  max-width: 180px;
  height: auto;
  /* CHANGE 5: Reduced bottom margin to pull icons up */
  margin: 0 auto 0.5rem auto;
  opacity: 0.9;
}

.core-icons {
  /* FIX 1: Reset position to allow element to flow in the column layout */
  position: static;
  transform: none; /* Also reset any transform from desktop styles */
  
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  /* CHANGE 6: Reduced vertical margin to pull icons up */
  margin: 1.2rem 0;
  font-size: 1.2rem;
}

.core-icons a {
  color: #333;
}

.core-date,
.core-phase {
  /* FIX 2: Reset position from 'fixed' to 'static' to place it at the end */
  position: static;

  font-family: "Consolas", monospace;
  font-size: 0.7rem;
  color: #444;
  opacity: 0.8;
  margin-top: 0.6rem;
}


/* ===========================================
   RECRUITING MODAL (MOBILE)
   =========================================== */
@media (max-width: 767px) {
  /* This class makes the modal visible AND centers it with flexbox */
  .modal.modal-open {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .modal-content {
    /* Reset margin and set a responsive width */
    margin: 0;
    width: 92%;
    max-width: 380px;

    /* Reduce padding for smaller screens */
    padding: 25px 20px;

    /* Adjust animation for a subtle effect */
    animation: fadeInModal 0.3s ease-out;
  }

  .close-btn {
    top: 5px;
    right: 15px;
    font-size: 26px;
  }

  /* Make all fonts smaller for readability on small screens */
  .modal-content h2 {
    font-size: 1.25rem;
  }

  .modal-content p {
    font-size: 0.85rem;
    line-height: 1.6;
  }

  .modal-content .contact-info {
    margin-top: 1.2rem;
    font-size: 0.9rem;
  }
}