/* Website developed by Syed Ahmed */
@media (max-width: 768px) {
  .fluid-hero-title { white-space: normal; line-height: 0.95; }
  
  #help-widget { bottom: 0; right: 0; left: 0; z-index: 90000; align-items: center; pointer-events: none; }
  #help-bubble { position: absolute; bottom: 20px; right: 20px; pointer-events: auto; }
  
  #help-panel { 
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100vw; 
      border-radius: 24px 24px 0 0;
      border: none;
      border-top: 1px solid rgba(255,255,255,0.15);
      transform: translateY(100%);
      transform-origin: bottom center;
      pointer-events: none;
  }
  #help-panel.active { 
      transform: translateY(0); 
      pointer-events: auto; 
  }
  
  #help-widget.panel-open #help-bubble { 
      transform: scale(0); 
      opacity: 0;
      pointer-events: none; 
  }
}

/* ==========================================================================
   SMART TYPOGRAPHY FIXES (SITE-WIDE AUDIT)
   ========================================================================== */

/* 1. Prevent Horizontal Overflow globally */
body, html, main, section, .container {
    max-width: 100vw;
}

/* 2. Responsive Headings using Clamp (Maintains luxury desktop size while scaling down) */
h1.font-heading, .font-heading.text-7xl, .font-heading.text-6xl {
    font-size: clamp(2.5rem, 8vw, 6.5rem) !important;
    line-height: 1.1 !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

h2.font-heading, .font-heading.text-5xl, .font-heading.text-4xl {
    font-size: clamp(2rem, 5vw, 4.5rem) !important;
    line-height: 1.2 !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

h3.font-heading, .font-heading.text-3xl, .font-heading.text-2xl {
    font-size: clamp(1.5rem, 4vw, 2.5rem) !important;
    line-height: 1.3 !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* 3. Paragraph & Description Optimization */
p {
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* 4. Prevent Card Content Breakouts */
.glass-card, .magnetic-card, [class*='bg-white/5'], .border-white\/5 {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* 5. Button Overflow & Wrapping */
.btn-premium, .explore-btn-premium {
    max-width: 100%;
    /* Allow wrapping on very small screens instead of overflowing */
    white-space: normal; 
    word-wrap: break-word;
    text-align: center;
}

/* Preserve whitespace-nowrap only for desktop, allow wrap on mobile if needed */
@media (max-width: 640px) {
    .btn-premium, .explore-btn-premium {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        font-size: 10px !important;
    }
}


/* ==========================================================================
   MOBILE PERFORMANCE OPTIMIZATIONS (GLOBAL)
   ========================================================================== */
@media (max-width: 1024px) {
    /* 1. Disable heavy scroll reveal animations */
    .gs-reveal, .in-view { 
        opacity: 1 !important; 
        transform: none !important; 
        transition: none !important; 
        visibility: visible !important; 
        will-change: auto !important; 
    }
    
    /* 2. Disable heavy parallax effects on mobile */
    .parallax-inner, .parallax-container { 
        transform: none !important; 
        transition: none !important; 
        will-change: auto !important; 
        height: 100% !important; 
    }
    
    /* 3. Disable hover-based CSS transitions that trigger layout recalculations on touch */
    .magnetic-card, .btn-premium, .glass-card, .interactive {
        transition-duration: 0.05s !important;
        transform: none !important;
    }
    
    /* 4. Disable custom cursor globally */
    #cursor-wrapper { display: none !important; }
    
    /* 5. Disable heavy backdrop-filters on mobile to fix scroll lag */
    .glass-card, #help-panel, #ai-panel, .backdrop-blur-md, [class*='backdrop-blur'] {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background-color: rgba(10, 10, 12, 0.95) !important; /* Slightly more opaque fallback */
    }
}



/* ==========================================================================
   NAVIGATION BREAKPOINT ENFORCEMENT & FLUID SCALING
   ========================================================================== */
/* At 1280px exactly, desktop navigation must be stable. We shrink the gap slightly to fit laptops. */
@media (min-width: 1280px) and (max-width: 1440px) {
    nav.hidden.xl\:flex {
        gap: clamp(1rem, 1.5vw, 2.5rem) !important;
    }
    nav.hidden.xl\:flex a {
        font-size: clamp(11px, 1vw, 15px) !important;
        letter-spacing: 0.15em !important;
    }
}

/* Hard enforcement of the breakpoint */
@media (min-width: 1280px) {
    #mobile-toggle, .xl\:hidden {
        display: none !important;
    }
    nav.hidden.xl\:flex {
        display: flex !important;
    }
}
@media (max-width: 1279px) {
    #mobile-toggle, .xl\:hidden {
        display: flex !important;
    }
    nav.hidden.xl\:flex {
        display: none !important;
    }
}

/* ==========================================================================
   HERO VERTICAL RHYTHM & FLUID SPACING
   ========================================================================== */
/* The layout relies on flex col or margin-bottom. We enforce fluid gaps to prevent bunching. */

.hero-eyebrow, span.tracking-\[0\.4em\], span.tracking-\[0\.3em\] {
    margin-bottom: clamp(1rem, 3vw, 2rem) !important;
    font-size: clamp(9px, 1.2vw, 12px) !important;
}

.hero-headline, h1, h2 {
    margin-bottom: clamp(1rem, 2.5vw, 2.5rem) !important;
}

.hero-description, p.text-fc-gray400.max-w-xl {
    margin-bottom: clamp(2rem, 5vw, 4rem) !important;
}

/* ==========================================================================
   TEAM PAGE ANTI-CLIPPING
   ========================================================================== */
.team-card {
    min-height: 100%;
    display: flex;
    flex-direction: column;
}
.team-card h3 {
    font-size: clamp(1.25rem, 3vw, 1.5rem) !important;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: auto;
}
.team-card p {
    flex-grow: 1;
}


/* ==========================================================================
   MOBILE HEADER & HERO SPACING HOTFIX (ONEPLUS 12 & SIMILAR)
   ========================================================================== */
/* Force Solid Black Header Globally (Remove confusing mix-blend-difference) */
#main-header {
    background-color: #050505 !important;
    mix-blend-mode: normal !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}


/* Missing Tailwind Padding Classes for Heros */
.pt-40 { padding-top: 7.5rem !important; }
.pt-48 { padding-top: 8rem !important; }
@media (min-width: 768px) {
    .md\:pt-16 { padding-top: 4rem !important; }
    .md\:pt-40 { padding-top: 8.5rem !important; }
    .md\:pt-52 { padding-top: 9.5rem !important; }
}

/* Fix mobile menu font size overflow */
.mobile-link { font-size: clamp(1.5rem, 5vw, 2.2rem) !important; padding: 10px 0 !important; letter-spacing: 0.1em !important; }