/* ====================================================================
   PARENTOLOGY — COMPREHENSIVE PHONE RESPONSIVE STYLESHEET
   Applies from ≤900px down. Finely tuned per section.
   Breakpoints:
   • ≤900px   → Tablet / large phone
   • ≤768px   → Portrait tablet / large phone  
   • ≤600px   → Phone (main target)
   • ≤480px   → Small phone
   • ≤360px   → Extra small phone
   ==================================================================== */

/* =============================================================
   BASE SAFETY
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; }
img, video, svg { max-width: 100%; height: auto; }

/* Mobile CTA inside nav overlay — hidden on desktop */
.nav-mobile-cta { display: none; }

/* =============================================================
   NAVBAR — HAMBURGER MENU (≤1150px)
   ============================================================= */
@media (max-width: 1150px) {
  .navbar { padding: 14px 0; }
  .nav-container { padding: 0 18px; gap: 12px; }
  .nav-logo-img { height: 32px; }

  /* Hide desktop nav links and CTA on mobile */
  .nav-links { display: none !important; }
  .nav-cta   { display: none !important; }

  /* Show hamburger button */
  .hamburger { display: flex !important; }
}

@media (max-width: 480px) {
  .navbar { padding: 11px 0; }
  .nav-container { padding: 0 14px; }
  .nav-logo-img { height: 28px; }
  .hamburger span { width: 22px; height: 2px; }
}

/* ================= HERO ================= */

@media (max-width: 900px) { 
  .hero { padding: 110px 20px 60px; min-height: auto; }

  .home-page .hero-wrapper {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 30px; /* 🔥 improved spacing */
    text-align: center;
  }

  /* TEXT */
  .home-page .hero-content {
    order: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    grid-column: unset;
    grid-row: unset;
    margin-bottom: 8px; /* 🔥 subtle spacing */
  }

  /* IMAGE */
  .home-page .hero-image-wrap {
    order: 1;
    justify-content: center;
    width: 100%;
    grid-column: unset !important;
    grid-row: unset !important;

    margin-top: 20px;  /* 🔥 FIX overlap */
    margin-bottom: 10px;
  }

  /* 👉 BUTTON FIX (MAIN CHANGE) */
  .home-page .hero-actions {
    order: 2;
    align-items: center !important;
    width: 100%;
    grid-column: unset !important;
    grid-row: unset !important;
    gap: 24px !important;

    margin-top: 24px; /* 🔥 PUSH BUTTON DOWN */
  }

  .home-page .hero-trusted {
    align-items: center !important;
  }

  .home-page .hero-title  { 
    font-size: clamp(2rem, 7vw, 3rem); 
    line-height: 1.15;
  }

  .home-page .hero-subtitle { 
    font-size: 1.05rem; 
    max-width: 520px; 
  }

  .home-page .hero-img { max-width: 420px; }
}


/* ================= ≤600px ================= */

@media (max-width: 600px) {
  .hero { padding: 95px 16px 50px; }

  .home-page .hero-title { 
    font-size: clamp(1.9rem, 8vw, 2.6rem); 
  }

  .home-page .hero-subtitle { font-size: 0.97rem; }

  .home-page .hero-img { max-width: 300px; }

  .home-page .hero-badge { 
    font-size: 0.8rem; 
    padding: 6px 14px; 
  }

  /* 🔥 Better spacing for CTA */
  .home-page .hero-actions {
    margin-top: 28px;
  }

  /* Hide clutter */
  .floaties, .card-sparkle, .card-butterfly { 
    display: none; 
  }
}


/* ================= ≤480px ================= */

@media (max-width: 480px) {
  .hero { padding: 90px 14px 44px; }

  .home-page .hero-title { 
    font-size: 1.85rem !important; 
    line-height: 1.2; 
  }

  .home-page .hero-subtitle { 
    font-size: 0.93rem; 
  }

  /* 🔥 BEST MOBILE BUTTON POSITION */
  .home-page .hero-actions {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 20px !important;
    width: 100%;

    margin-top: 32px; /* 🔥 PERFECT SPACING */
  }

  .home-page .btn-hero-primary {
    width: 100% !important;
    text-align: center !important;
    padding: 15px 20px !important;
    font-size: 0.97rem !important;
    border-radius: 50px !important;
  }

  .home-page .hero-trusted {
    align-items: center !important;
  }

  .home-page .hero-img { max-width: 260px; }
}


/* ================= ≤360px ================= */

@media (max-width: 360px) {
  .home-page .hero-title { font-size: 1.65rem !important; }
  .home-page .hero-img { max-width: 230px; }
}

/* =============================================================
   SECTION 2 — ECOSYSTEM SLIDER (≤768px)
   ============================================================= */
@media (max-width: 768px) {
  .ecosystem-section { padding: 56px 0; }
  .ecosystem-slider-container { overflow: hidden; }
  .ecosystem-grid {
    display: flex !important;
    gap: 20px;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .ecosystem-card {
    min-width: calc(85vw - 32px) !important;
    max-width: calc(85vw - 32px) !important;
    border-radius: 24px !important;
    padding: 24px 20px !important;
  }
  .ecosystem-card.is-inactive {
    opacity: 0.6;
    filter: blur(0px) !important;
    transform: scale(0.96) !important;
  }
  .role-main-img { max-height: 180px; object-fit: contain; }
}

@media (max-width: 480px) {
  .ecosystem-card {
    min-width: calc(90vw - 28px) !important;
    max-width: calc(90vw - 28px) !important;
    padding: 20px 16px !important;
  }
  .card-role-title { font-size: 1.1rem; }
  .card-role-desc { font-size: 0.88rem; }
  .role-badge { font-size: 0.75rem; padding: 4px 10px; }
}

/* =============================================================
   SECTION 3 — PRODUCT LOGO TICKER (≤600px)
   ============================================================= */
@media (max-width: 600px) {
  .product-logo-section { padding: 48px 0; }
  .product-logo-item { padding: 10px 20px; }
  .logo-text { font-size: clamp(1.2rem, 5vw, 1.8rem) !important; }
  .logo-desc { font-size: 0.78rem; }
  .section-container { padding: 0 14px; }
}

/* =============================================================
   SECTION 4 — VALUES GRID (≤900px)
   ============================================================= */
@media (max-width: 900px) {
  .values-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 16px; }
  .values-section { padding: 64px 0; }
}

@media (max-width: 500px) {
  .values-grid { grid-template-columns: 1fr !important; gap: 14px; }
  .value-card { padding: 28px 20px !important; border-radius: 20px !important; }
  .value-icon-circle { width: 52px !important; height: 52px !important; }
  .value-card h3 { font-size: 1.05rem; }
  .value-card p { font-size: 0.88rem; }
}

/* =============================================================
   SECTION 5 — FLOW STEPS (≤768px)
   ============================================================= */
@media (max-width: 768px) {
  .flow-section { padding: 56px 0; }
  .flow-steps-inner {
    flex-direction: column !important;
    align-items: center !important;
    gap: 16px !important;
  }
  .flow-arrow {
    transform: rotate(90deg) !important;
    width: 36px !important;
    margin: -4px 0 !important;
  }
  .flow-circle { width: 80px !important; height: 80px !important; }
  .flow-circle img { width: 44px !important; height: 44px !important; }
  .flow-pill { font-size: 0.82rem !important; padding: 6px 14px !important; }
  .flow-step { gap: 10px !important; }
}

@media (max-width: 480px) {
  .flow-circle { width: 70px !important; height: 70px !important; }
  .flow-pill { font-size: 0.78rem !important; }
}

/* =============================================================
   SECTION COMMONS — ALL PAGES (≤768px)
   ============================================================= */
@media (max-width: 768px) {
  .section-container { padding: 0 16px; }
  .section-header { margin-bottom: 36px; }
  .section-header h2 { font-size: clamp(1.55rem, 5.5vw, 2rem) !important; }
  .section-header p { font-size: 0.93rem; }
  .section-subtitle, .section-subtitle-faded { font-size: 0.93rem !important; }
}

@media (max-width: 480px) {
  .section-container { padding: 0 14px; }
  .section-header h2 { font-size: clamp(1.4rem, 6.5vw, 1.8rem) !important; }
}

/* (Section 2 responsive rules intentionally left as defined elsewhere) */

/* =============================================================
   ABOUT PAGE — HERO (≤900px)
   ============================================================= */
@media (max-width: 900px) {
  .page-hero--about { padding: 110px 16px 60px; overflow: hidden; }
  .about-page .page-hero--about .page-hero-content {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 40px !important;
  }
  .about-hero-text { align-items: center; display: flex; flex-direction: column; }
  .about-page .page-hero--about h1 {
    font-size: clamp(2rem, 6vw, 3rem) !important;
    text-align: center;
  }
  .about-subtitle { text-align: center !important; font-size: 0.97rem; }

  /* Scale orbit constellation rather than hiding capsules */
  .about-founders-wrap {
    position: relative !important;
    width: 100% !important;
    max-width: 620px;
    height: 520px;
    margin: -20px auto;
    display: flex !important;
    justify-content: center;
    align-items: center;
    transform: scale(0.82);
    transform-origin: center center;
  }
}

@media (max-width: 768px) {
  .about-founders-wrap {
    transform: scale(0.72);
    height: 460px;
    margin: -45px auto;
  }
}

@media (max-width: 680px) {
  .page-hero--about { padding: 90px 14px 48px; }
  .about-page .page-hero--about h1 { font-size: clamp(1.8rem, 8vw, 2.4rem) !important; }
  .about-page .page-hero--about .page-hero-content {
    gap: 20px !important;
  }
  
  .about-orbit-circle {
    display: none !important;
  }
  
  .about-founders-wrap {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 16px !important;
    height: auto !important;
    width: 100% !important;
    max-width: 440px !important;
    margin: 0 auto !important;
    transform: none !important;
    position: relative !important;
  }

  /* Founder cards on row 1 */
  .founder-card {
    position: relative !important;
    top: auto !important; left: auto !important;
    transform: none !important;
    margin: 0 !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 0.74 !important;
  }
  .founder-card.card-male {
    grid-column: span 3 !important;
    grid-row: 1 !important;
  }
  .founder-card.card-female {
    grid-column: span 3 !important;
    grid-row: 1 !important;
  }
  .founder-card img {
    height: 100% !important;
    object-fit: contain !important;
  }
  .founder-banner {
    padding: 6px !important;
    bottom: 8px !important;
    left: 8px !important;
    right: 8px !important;
  }
  .banner-underline {
    font-size: 0.75rem !important;
  }

  /* App capsules on rows 2, 3, and 4 (styled as horizontal cards) */
  .orbit-capsule {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    animation: none !important;
    margin: 0 !important;
    width: 100% !important;
    height: auto !important;
    z-index: 5 !important;
  }
  .orbit-capsule .capsule-inner {
    width: 100% !important;
    height: 72px !important;
    border-radius: 18px !important;
    padding: 10px 12px !important;
    gap: 12px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
    box-sizing: border-box !important;
  }
  .orbit-capsule .capsule-inner img {
    width: 44px !important;
    height: 44px !important;
    flex-shrink: 0 !important;
    border-radius: 8px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
  .cap-sugar .capsule-inner img,
  .cap-kahani .capsule-inner img {
    width: 40px !important;
    height: 40px !important;
  }
  .orbit-capsule .capsule-text {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 2px !important;
    overflow: hidden !important;
    text-align: left !important;
  }
  .orbit-capsule .capsule-title {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.88rem !important;
    color: #1E1B4B !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-align: left !important;
    width: auto !important;
  }
  .orbit-capsule .capsule-subtitle {
    font-family: 'Nunito', sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.68rem !important;
    color: #475569 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Positioning inside the 6-column grid: 3 on upper row, 2 centered on lower row */
  .cap-parentology {
    grid-column: span 2 !important;
    grid-row: 2 !important;
  }
  .cap-sugar {
    grid-column: span 2 !important;
    grid-row: 2 !important;
  }
  .cap-kahani {
    grid-column: span 2 !important;
    grid-row: 2 !important;
  }
  .cap-spoon {
    grid-column: 2 / span 2 !important;
    grid-row: 3 !important;
  }
  .cap-mana {
    grid-column: 4 / span 2 !important;
    grid-row: 3 !important;
  }
}

@media (max-width: 400px) {
  .orbit-capsule .capsule-inner {
    padding: 8px 10px !important;
    gap: 8px !important;
    height: 60px !important;
    border-radius: 14px !important;
  }
  .orbit-capsule .capsule-inner img {
    width: 36px !important;
    height: 36px !important;
  }
  .cap-sugar .capsule-inner img,
  .cap-kahani .capsule-inner img {
    width: 32px !important;
    height: 32px !important;
  }
  .orbit-capsule .capsule-title {
    font-size: 0.80rem !important;
  }
  .orbit-capsule .capsule-subtitle {
    font-size: 0.60rem !important;
  }
}

@media (max-width: 360px) {
  .about-founders-wrap {
    gap: 8px !important;
    transform: scale(0.92) !important;
    transform-origin: center center !important;
  }
}

/* =============================================================
   ABOUT — WHY STARTED (≤900px)
   ============================================================= */
@media (max-width: 900px) {
  .about-why-started { padding: 56px 0; }
  .why-started-grid {
    grid-template-columns: 1fr !important;
    gap: 24px;
  }
  .why-started-image-wrap { order: -1; }
  .why-started-img { max-width: 100%; border-radius: 24px; }
  .why-started-card { padding: 28px 24px !important; border-radius: 24px; }
  .why-started-title { font-size: clamp(1.5rem, 5vw, 2rem); }
}

@media (max-width: 600px) {
  .why-started-img {
    max-height: 280px !important;
    width: 100% !important;
    object-fit: cover !important;
  }
}

@media (max-width: 480px) {
  .why-started-card { padding: 22px 18px !important; }
  .why-started-title { font-size: 1.4rem; }
  .why-started-text-box p { font-size: 0.92rem; line-height: 1.65; }
}

/* =============================================================
   ABOUT — VISION & MISSION (≤768px)
   ============================================================= */
@media (max-width: 768px) {
  .vision-mission-section { padding: 56px 0; }
  .vision-mission-grid {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }
  .purpose-card { padding: 32px 24px !important; min-height: auto !important; border-radius: 24px !important; }
  .vision-mission-title { font-size: clamp(1.5rem, 5.5vw, 2rem) !important; }
  .card-desc { font-size: 0.93rem; }
  .vision-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.88) 0%, rgba(255, 255, 255, 0.94) 100%), url('/about_us/images/our_vision.png') no-repeat bottom center !important;
    background-size: cover !important;
  }
  .mission-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.88) 0%, rgba(255, 255, 255, 0.94) 100%), url('/about_us/images/our_mission.png') no-repeat bottom center !important;
    background-size: cover !important;
  }
  .purpose-card .card-bg-illust {
    display: none !important;
  }
}

@media (max-width: 480px) {
  .purpose-card { 
    padding: 24px 18px !important; 
    border-radius: 20px !important; 
  }
  .purpose-card .card-title {
    font-size: 1.4rem !important;
  }
  .purpose-card .card-icon-wrap {
    width: 50px !important;
    height: 50px !important;
  }
  .purpose-card .card-icon-wrap img {
    width: 28px !important;
    height: 28px !important;
  }
  .vision-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.96) 100%), url('/about_us/images/our_vision.png') no-repeat bottom center !important;
    background-size: cover !important;
  }
  .mission-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.96) 100%), url('/about_us/images/our_mission.png') no-repeat bottom center !important;
    background-size: cover !important;
  }
  .card-title { font-size: 1.1rem; }
  .card-desc { font-size: 0.88rem; }
}

/* =============================================================
   ABOUT — FOUNDERS DETAIL CARDS (≤900px)
   ============================================================= */
@media (max-width: 900px) {
  .about-founders { padding: 56px 0; }
  .founders-grid {
    grid-template-columns: 1fr !important;
    gap: 20px;
  }
  .founder-detail-card {
    grid-template-columns: 1fr !important;
    padding: 24px !important;
    border-radius: 24px !important;
  }
  .founder-card-visual { 
    width: 100% !important; 
    min-height: 220px !important; 
    overflow: hidden; 
    border-radius: 18px; 
    display: flex !important;
    justify-content: center !important;
    align-items: flex-end !important;
    padding-top: 20px !important;
  }
  .founder-portrait { max-height: 200px !important; object-fit: contain; width: auto !important; margin: 0 auto !important; }
  .founder-bg-blob { width: 140px !important; height: 140px !important; bottom: 0px !important; }
  .founder-card-info { padding: 24px 0 0 0 !important; align-items: center !important; text-align: center !important; }
  .info-name { font-size: 1.2rem; }
  .info-tags { flex-wrap: wrap; gap: 6px; justify-content: center !important; }
}

@media (max-width: 480px) {
  .founder-detail-card { padding: 18px !important; }
  .info-name { font-size: 1.05rem; }
  .info-desc { font-size: 0.88rem; }
  .info-tag { font-size: 0.73rem; padding: 4px 10px; }
  .founder-portrait { max-height: 180px !important; }
  .founder-card-visual { min-height: 190px !important; }
  .founder-bg-blob { width: 120px !important; height: 120px !important; }
}

/* =============================================================
   ABOUT — TEAM GRID (≤900px)
   ============================================================= */
@media (max-width: 900px) {
  .team-section { padding: 56px 0; }
  .team-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px;
  }
  .team-card { border-radius: 20px !important; padding: 20px !important; }
  .team-card-avatar { max-height: 110px; }
}

@media (max-width: 600px) {
  .team-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    margin: 30px 0 !important;
  }
  .team-card {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 20px 12px !important;
    border-radius: 20px !important;
    gap: 12px !important;
  }
  
  .team-card-info {
    order: 2 !important;
    flex: none !important;
    padding-right: 0 !important;
    align-items: center !important;
    width: 100% !important;
  }
  
  .team-card-icon-wrap {
    width: 44px !important;
    height: 44px !important;
    margin: 0 auto 10px auto !important;
  }
  
  .team-card-icon-wrap img {
    width: 22px !important;
    height: 22px !important;
  }
  
  .team-card-title {
    font-size: 0.95rem !important;
    margin-bottom: 4px !important;
    text-align: center !important;
  }
  
  .team-card-desc {
    font-size: 0.76rem !important;
    margin-bottom: 10px !important;
    text-align: center !important;
    line-height: 1.35 !important;
  }
  
  .team-card-line {
    margin: 0 auto !important;
  }
  
  .team-card-visual {
    order: 1 !important;
    flex: none !important;
    width: 90px !important;
    height: 90px !important;
    min-height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
  }
  
  .team-card-blob {
    width: 80px !important;
    height: 80px !important;
    top: 50% !important;
    left: 50% !important;
    margin-top: -40px !important;
    margin-left: -40px !important;
    border-radius: 50% !important;
    right: auto !important;
    bottom: auto !important;
  }
  
  .team-card-avatar {
    max-height: 85px !important;
    width: auto !important;
    object-fit: contain !important;
    position: relative !important;
    z-index: 2 !important;
    margin: 0 auto !important;
    transform: none !important;
  }
}

@media (max-width: 380px) {
  .team-card {
    padding: 16px 8px !important;
  }
  .team-card-visual {
    width: 76px !important;
    height: 76px !important;
  }
  .team-card-blob {
    width: 68px !important;
    height: 68px !important;
    margin-top: -34px !important;
    margin-left: -34px !important;
  }
  .team-card-avatar {
    max-height: 72px !important;
  }
  .team-card-title {
    font-size: 0.88rem !important;
  }
  .team-card-desc {
    font-size: 0.72rem !important;
  }
}

/* =============================================================
   ABOUT — TRUST SECTION (≤768px)
   ============================================================= */
@media (max-width: 768px) {
  .trust-section { padding: 56px 0; }
  .trust-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 14px; }
  .trust-card { padding: 20px 16px !important; border-radius: 18px !important; }
  .trust-stat { font-size: 1.6rem !important; }
  .trust-label { font-size: 0.85rem; }
}

@media (max-width: 480px) {
  .trust-grid { grid-template-columns: 1fr !important; gap: 12px; }
}

/* =============================================================
   ABOUT — HOW WE BUILD SECTION (≤480px)
   ============================================================= */
@media (max-width: 480px) {
  .build-card {
    max-width: 100% !important;
  }
}

/* =============================================================
   ABOUT — CTA SECTION (≤768px)
   ============================================================= */
@media (max-width: 768px) {
  .cta-banner {
    padding: 60px 24px !important;
    min-height: 320px !important;
    border-radius: 28px !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: 0 15px 35px rgba(124, 58, 237, 0.08) !important;
  }
  /* Overlay card background for text readability on mobile */
  .cta-banner::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    background: white !important;
    z-index: 1 !important;
    pointer-events: none !important;
  }
  .cta-content {
    position: relative !important;
    z-index: 2 !important;
  }
  .cta-title {
    font-size: 1.85rem !important;
    line-height: 1.25 !important;
  }
  .cta-desc {
    font-size: 0.96rem !important;
    margin-bottom: 24px !important;
  }
}

@media (max-width: 480px) {
  .cta-banner {
    padding: 48px 16px !important;
    min-height: 300px !important;
    border-radius: 24px !important;
  }
  .cta-title {
    font-size: 1.6rem !important;
    line-height: 1.25 !important;
  }
  .cta-desc {
    font-size: 0.9rem !important;
  }
  .cta-actions {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    width: 100% !important;
  }
  .btn-cta-primary,
  .btn-cta-outline {
    width: 100% !important;
    text-align: center !important;
    padding: 12px 24px !important;
  }
}

/* =============================================================
   APPS / PRODUCTS PAGE (≤900px)
   ============================================================= */
@media (max-width: 900px) {
  .apps-section { padding: 64px 0; }
  .apps-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px;
  }
  .app-card { border-radius: 22px; padding: 24px 20px !important; }
}

@media (max-width: 540px) {
  .apps-grid { grid-template-columns: 1fr !important; gap: 16px; }
  .app-card { padding: 20px 16px !important; border-radius: 18px !important; }
  .app-icon-wrap { width: 52px !important; height: 52px !important; font-size: 1.5rem !important; }
  .app-card h3 { font-size: 1rem; }
  .app-card p { font-size: 0.87rem; }
}

/* =============================================================
   CONTACT PAGE (≤900px)
   ============================================================= */
@media (max-width: 900px) {
  .contact-grid {
    grid-template-columns: 1fr !important;
    gap: 28px;
  }
  .contact-info { order: 2; }
  .contact-form-wrap { order: 1; }
}

@media (max-width: 600px) {
  .contact-form-wrap { padding: 28px 20px !important; border-radius: 22px !important; }
  .form-row { flex-direction: column !important; gap: 14px; }
  .contact-info-grid { grid-template-columns: 1fr !important; gap: 12px; }
  .contact-card { padding: 18px 14px !important; border-radius: 16px !important; }
}

@media (max-width: 480px) {
  .contact-form-wrap { padding: 22px 16px !important; }
  /* Prevent iOS auto-zoom on input focus */
  input, textarea, select { font-size: 16px !important; }
  .submit-btn, .contact-submit, .form-submit {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
    padding: 14px !important;
  }
}

/* =============================================================
   PAGE HERO (About, Apps, Contact) (≤768px)
   ============================================================= */
@media (max-width: 768px) {
  .page-hero {
    padding: 96px 16px 56px;
    min-height: auto;
  }
  .page-hero-content { text-align: center; }
  .page-hero-content h1 { font-size: clamp(1.7rem, 6vw, 2.6rem) !important; }
  .page-hero-content p { font-size: 0.95rem !important; max-width: 100%; }
}

/* =============================================================
   FOOTER — handled in style.css footer media queries
   ============================================================= */

/* =============================================================
   TYPOGRAPHY SCALE (≤768px)
   ============================================================= */
@media (max-width: 768px) {
  h1 { font-size: clamp(1.75rem, 6.5vw, 2.4rem) !important; line-height: 1.2 !important; }
  h2 { font-size: clamp(1.45rem, 5.5vw, 2rem) !important; line-height: 1.25 !important; }
  h3 { font-size: clamp(1rem, 4vw, 1.3rem) !important; }
  p  { font-size: 0.94rem; line-height: 1.72; }
}

@media (max-width: 480px) {
  h1 { font-size: clamp(1.55rem, 8vw, 2rem) !important; }
  h2 { font-size: clamp(1.3rem, 6vw, 1.7rem) !important; }
  h3 { font-size: clamp(0.95rem, 4.5vw, 1.2rem) !important; }
  p  { font-size: 0.9rem; }
}

/* =============================================================
   BUTTONS — TOUCH-FRIENDLY (≤768px)
   ============================================================= */
@media (max-width: 768px) {
  .btn {
    min-height: 44px;
    touch-action: manipulation;
  }
  .btn-connect, .btn-free-tools {
    padding: 11px 20px !important;
    font-size: 0.9rem !important;
  }
}

/* =============================================================
   PARTICLE CANVAS — HIDE ON PHONES (PERFORMANCE)
   ============================================================= */
@media (max-width: 600px) {
  #particleCanvas { display: none !important; }
}

/* =============================================================
   SAFE AREA INSETS — iPhone NOTCH
   ============================================================= */
.navbar {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
.nav-container {
  padding-left: max(18px, env(safe-area-inset-left));
  padding-right: max(18px, env(safe-area-inset-right));
}
@media (max-width: 1150px) {
  .nav-container {
    padding-left: max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right));
  }
}

/* =============================================================
   SCROLL OVERFLOW HELPERS
   ============================================================= */
@media (max-width: 768px) {
  .product-logos-slider-wrap,
  .ecosystem-slider-container,
  .tracker-tabs,
  .tracker-chart-wrap {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .product-logos-slider-wrap::-webkit-scrollbar,
  .ecosystem-slider-container::-webkit-scrollbar,
  .tracker-tabs::-webkit-scrollbar { display: none; }
}

/* =============================================================
   GENERIC GRID HELPERS
   ============================================================= */
@media (max-width: 900px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr) !important; }
  .grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 560px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr !important; }
}

/* =============================================================
   360PX — VERY SMALL PHONES
   ============================================================= */
@media (max-width: 360px) {
  .navbar { padding: 10px 0; }
  .nav-logo-img { height: 25px; }
  .hero { padding: 80px 12px 40px; }
  .home-page .hero-title { font-size: 1.55rem !important; }
  .section-container { padding: 0 12px; }
  .btn { padding: 10px 16px; font-size: 0.86rem; }
  .btn-connect, .btn-free-tools { font-size: 0.84rem !important; }
  .purpose-card, .value-card, .team-card, .app-card { border-radius: 16px !important; }
}

/* =============================================================
   PREMIUM RESPONSIVE MICRO-ANIMATIONS & INTERACTIONS
   ============================================================= */
@media (max-width: 900px) {
  /* Touch Active physical feedback states for mobile */
  .team-card:active,
  .trust-card:active,
  .build-card:active,
  .value-card:active,
  .app-card:active,
  .purpose-card:active,
  .founder-detail-card:active,
  .tool-card:active,
  .why-card:active,
  .testi-card:active,
  .btn:active {
    transform: scale(0.96) translateY(2px) !important;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.04) !important;
    transition: transform 0.1s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  }

  /* Staggered Card Slide-Up Entrance on viewport reveal */
  .reveal.revealed .team-card,
  .reveal.revealed .trust-card,
  .reveal.revealed .build-card,
  .reveal.revealed .value-card,
  .reveal.revealed .app-card,
  .reveal.revealed .purpose-card,
  .reveal.revealed .tool-card {
    animation: cardSpringSlideUp 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  }

  /* Delay configurations for cascading stagger flow */
  .reveal.revealed .team-card:nth-child(1),
  .reveal.revealed .trust-card:nth-child(1),
  .reveal.revealed .build-card:nth-child(1),
  .reveal.revealed .value-card:nth-child(1),
  .reveal.revealed .app-card:nth-child(1),
  .reveal.revealed .purpose-card:nth-child(1),
  .reveal.revealed .tool-card:nth-child(1) { animation-delay: 60ms; }

  .reveal.revealed .team-card:nth-child(2),
  .reveal.revealed .trust-card:nth-child(2),
  .reveal.revealed .build-card:nth-child(2),
  .reveal.revealed .value-card:nth-child(2),
  .reveal.revealed .app-card:nth-child(2),
  .reveal.revealed .purpose-card:nth-child(2),
  .reveal.revealed .tool-card:nth-child(2) { animation-delay: 140ms; }

  .reveal.revealed .team-card:nth-child(3),
  .reveal.revealed .trust-card:nth-child(3),
  .reveal.revealed .build-card:nth-child(3),
  .reveal.revealed .value-card:nth-child(3),
  .reveal.revealed .app-card:nth-child(3),
  .reveal.revealed .tool-card:nth-child(3) { animation-delay: 220ms; }

  .reveal.revealed .team-card:nth-child(4),
  .reveal.revealed .trust-card:nth-child(4),
  .reveal.revealed .build-card:nth-child(4),
  .reveal.revealed .value-card:nth-child(4),
  .reveal.revealed .app-card:nth-child(4),
  .reveal.revealed .tool-card:nth-child(4) { animation-delay: 300ms; }

  .reveal.revealed .team-card:nth-child(5),
  .reveal.revealed .trust-card:nth-child(5),
  .reveal.revealed .build-card:nth-child(5),
  .reveal.revealed .value-card:nth-child(5),
  .reveal.revealed .app-card:nth-child(5) { animation-delay: 380ms; }

  .reveal.revealed .team-card:nth-child(6),
  .reveal.revealed .trust-card:nth-child(6),
  .reveal.revealed .build-card:nth-child(6),
  .reveal.revealed .app-card:nth-child(6) { animation-delay: 460ms; }

  @keyframes cardSpringSlideUp {
    0% {
      opacity: 0;
      transform: translateY(28px) scale(0.96);
    }
    100% {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  /* Hamburger Menu Links Entrance Stagger Animation */
  .mob-drawer.is-open .mob-link {
    animation: mobLinkSwipeIn 0.38s cubic-bezier(0.25, 0.8, 0.25, 1) both;
  }
  .mob-drawer.is-open .mob-link:nth-child(1) { animation-delay: 80ms; }
  .mob-drawer.is-open .mob-link:nth-child(2) { animation-delay: 130ms; }
  .mob-drawer.is-open .mob-link:nth-child(3) { animation-delay: 180ms; }
  .mob-drawer.is-open .mob-link:nth-child(4) { animation-delay: 230ms; }
  .mob-drawer.is-open .mob-link:nth-child(5) { animation-delay: 280ms; }
  
  .mob-drawer.is-open .mob-drawer-cta {
    animation: mobLinkSwipeIn 0.45s cubic-bezier(0.25, 0.8, 0.25, 1) both;
    animation-delay: 330ms;
  }

  @keyframes mobLinkSwipeIn {
    0% {
      opacity: 0;
      transform: translateX(-18px);
    }
    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }

  /* Gentle drift animations for mobile floaty elements */
  @keyframes mobileFloatyMotion {
    0% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-12px) rotate(3deg); }
    100% { transform: translateY(0px) rotate(0deg); }
  }

  .floaty {
    animation: mobileFloatyMotion 4.5s ease-in-out infinite !important;
  }
  .floaty:nth-child(2n) {
    animation-duration: 5.8s !important;
    animation-delay: 0.8s !important;
  }
  .floaty:nth-child(3n) {
    animation-duration: 7s !important;
    animation-delay: 0.4s !important;
  }
}

/* =============================================================
   TESTIMONIALS SWIPER CAROUSEL RESPONSIVENESS (≤768px)
   ============================================================= */
@media (max-width: 768px) {
  .testi-card-new {
    width: 290px !important;
    padding: 30px 24px !important;
  }
  
  .testi-text-new {
    font-size: 0.95rem !important;
    margin-bottom: 20px !important;
  }
  
  .testi-quote-new {
    font-size: 2.8rem !important;
    margin-top: -10px !important;
    margin-bottom: 8px !important;
  }

  .testi-slider-container {
    padding: 20px 0 !important;
  }
  
  .testi-cards-grid {
    gap: 20px !important;
  }
}