/* Brutally Enforce Inter Font */
*, *::before, *::after, html, body, button, input, textarea, select {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
}

body {
  color: #4A6C7A;
  background-color: #FAFCFC;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.text-balance { text-wrap: balance; }

/* --- Magic Animations --- */
@keyframes gradientPan {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes float-up-stardust {
  0% { transform: translateY(100vh) scale(0); opacity: 0; }
  20% { opacity: 0.8; }
  80% { opacity: 0.4; }
  100% { transform: translateY(-20vh) scale(1.5); opacity: 0; }
}

@keyframes rotate-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes shine {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.text-gradient {
  background: linear-gradient(135deg, #072029 20%, #25A4BA 70%, #2EA76B 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% auto;
  animation: gradientPan 10s ease infinite;
}

/* --- Materializing Scroll Reveals --- */
.reveal-materialize {
  opacity: 0;
  filter: blur(15px);
  transform: perspective(1200px) translateY(40px) scale(0.97) rotateX(5deg);
  transition: all 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-materialize-left {
  opacity: 0;
  filter: blur(15px);
  transform: perspective(1200px) translateX(-40px) scale(0.97) rotateY(-5deg);
  transition: all 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-materialize-right {
  opacity: 0;
  filter: blur(15px);
  transform: perspective(1200px) translateX(40px) scale(0.97) rotateY(5deg);
  transition: all 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.is-visible {
  opacity: 1 !important;
  filter: blur(0px) !important;
  transform: perspective(1200px) translate(0) scale(1) rotateX(0deg) rotateY(0deg) !important;
}

/* Cinematic Footer Image Reveal */
.reveal-image {
  opacity: 0;
  filter: blur(30px) grayscale(1);
  transform: scale(1.2) translateY(50px);
  transition: all 2.5s cubic-bezier(0.22, 1, 0.36, 1);
  transform-origin: center;
}

.reveal-image.active {
  opacity: 1;
  filter: blur(0px) grayscale(0);
  transform: scale(1) translateY(0);
}

/* --- Aurora Glassmorphism --- */
.aurora-glass {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  border: 1px solid rgba(0, 0, 0, 0.03);
  box-shadow: 0 4px 25px -5px rgba(0, 0, 0, 0.02), inset 0 1px 0 rgba(255, 255, 255, 1);
  transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.aurora-glass:hover {
  box-shadow: 0 20px 40px -5px rgba(37, 164, 186, 0.1);
  transform: translateY(-4px) scale(1.01);
}

.giant-type {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 25vw;
  font-weight: 900;
  color: transparent;
  -webkit-text-stroke: 2px rgba(37, 164, 186, 0.03);
  white-space: nowrap;
  pointer-events: none;
  z-index: 0;
  user-select: none;
}

/* FAQ Accordion */
.accordion-content-wrapper {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.accordion-content-wrapper.expanded {
  grid-template-rows: 1fr;
}

.accordion-content-wrapper > div {
  overflow: hidden;
  min-height: 0;
  opacity: 0;
  transition: opacity 0.4s ease-out;
}

.accordion-content-wrapper.expanded > div {
  opacity: 1;
}

.accordion-icon {
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.accordion-icon.rotated {
  transform: rotate(45deg);
}

.image-blend-bottom {
  mask-image: linear-gradient(to bottom, black 65%, transparent 98%);
  -webkit-mask-image: linear-gradient(to bottom, black 65%, transparent 98%);
}

#navbar.scrolled {
  padding-top: 1rem;
  padding-bottom: 1rem;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(24px);
  border-bottom: 1px solid rgba(0,0,0,0.04);
  box-shadow: 0 4px 20px rgba(0,0,0,0.02);
}

/* Shine Badge Animation */
.shine-badge {
  position: relative;
  overflow: hidden;
}

.shine-badge::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  animation: shine 2.5s infinite;
}

/* Consultancy Button */
.consultancy-btn {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.consultancy-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 40px rgba(37, 164, 186, 0.3);
}

/* Ocean Window */
.ocean-window {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  border: 1px solid rgba(0, 0, 0, 0.03);
  box-shadow: 0 4px 25px -5px rgba(0, 0, 0, 0.02), inset 0 1px 0 rgba(255, 255, 255, 1);
  transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ocean-window:hover {
  box-shadow: 0 20px 40px -5px rgba(37, 164, 186, 0.1);
  transform: translateY(-4px) scale(1.01);
}

/* Melt Mask */
.melt-mask {
  mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
}

/* Step Icon Wrap */
.step-icon-wrap {
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.aurora-glass:hover .step-icon-wrap {
  transform: translateY(-8px) scale(1.1);
}

/* ========================================
   MOBILE RESPONSIVE STYLES
   ======================================== */

/* Mobile Menu Button Styles */
.mobile-menu-btn {
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(74, 108, 122, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.03);
  transition: all 0.3s ease;
  position: relative;
  z-index: 100;
}

/* Hide on desktop (768px and above) */
@media (min-width: 768px) {
  .mobile-menu-btn {
    display: none !important;
  }
}

.mobile-menu-btn:active {
  background: rgba(74, 108, 122, 0.1);
}

.mobile-menu-btn span {
  display: block;
  width: 18px;
  height: 2px;
  background: #072029;
  border-radius: 2px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Beautiful 'X' Transformation */
.mobile-menu-btn.active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.mobile-menu-btn.active span:nth-child(2) {
  opacity: 0;
}
.mobile-menu-btn.active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile Styles - Apply below 768px */
@media (max-width: 768px) {
  /* Prevent horizontal scroll */
  html, body {
    max-width: 100vw;
    overflow-x: hidden;
  }
  
  /* Navbar adjustments - FIXES THE HUGE HEIGHT ISSUE */
  #navbar {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
    background: rgba(255, 255, 255, 0.98); /* Solid white background for mobile readability */
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
  }
  
  #navbar.scrolled {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }
  
  /* Giant parallax text */
  .giant-type {
    font-size: 40vw;
    -webkit-text-stroke: 1px rgba(37, 164, 186, 0.03);
  }
  
  /* Hero sections */
  section[class*="pt-"] {
    padding-top: 6rem !important;
  }
  
  section[class*="pb-"] {
    padding-bottom: 3rem !important;
  }
  
  section[class*="py-"] {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
  
  /* Headings */
  h1 {
    font-size: 2rem !important;
    line-height: 1.2 !important;
  }
  
  h2 {
    font-size: 1.75rem !important;
    line-height: 1.3 !important;
  }
  
  h3 {
    font-size: 1.5rem !important;
  }
  
  h4 {
    font-size: 1.25rem !important;
  }
  
  /* Paragraphs */
  p {
    font-size: 0.95rem !important;
  }
  
  /* Aurora glass cards */
  .aurora-glass {
    padding: 1.5rem !important;
    border-radius: 1.5rem !important;
  }
  
  /* Images */
  img {
    max-width: 100%;
    height: auto;
  }
  
  /* Container padding */
  [class*="max-w-"] {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

/* Tablet Styles (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
  /* Headings */
  h1 {
    font-size: 2.5rem !important;
  }
  
  h2 {
    font-size: 2rem !important;
  }
  
  h3 {
    font-size: 1.75rem !important;
  }
  
  /* Grid - 2 columns on tablet */
  .grid[class*="lg:grid-cols-3"],
  .grid[class*="lg:grid-cols-4"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  /* Giant text */
  .giant-type {
    font-size: 30vw;
  }
}

/* Small phones (max 375px) */
@media (max-width: 375px) {
  h1 {
    font-size: 1.75rem !important;
  }
  
  h2 {
    font-size: 1.5rem !important;
  }
}

/* Page Specific Fixes ... (Keep your existing page specific mobile fixes here) */
@media (max-width: 768px) {
  /* Japiyo - Institutional Trust Section */
  #trust .grid[class*="lg:grid-cols"] {
    grid-template-columns: 1fr !important;
    gap: 3rem !important;
  }
  
  #trust .ocean-window {
    padding: 2rem !important;
    height: auto !important;
    min-height: 300px !important;
    border-radius: 2rem !important;
  }
  
  #trust .flex.gap-12 {
    flex-direction: column !important;
    gap: 2rem !important;
  }
  
  #trust .w-px {
    display: none !important;
  }
  
  #trust .text-5xl {
    font-size: 2.5rem !important;
  }
  
  #trust .grid.grid-cols-2 {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
  
  /* Wongaa Welocity & Robotics - Card Fixes */
  .ocean-window {
    padding: 1.5rem !important;
    height: auto !important;
    min-height: auto !important;
    border-radius: 1.5rem !important;
  }
  
  .ocean-window[class*="rounded-["] {
    border-radius: 1.5rem !important;
  }
  
  .ocean-window.p-10,
  .ocean-window.p-12,
  .ocean-window.p-16,
  .ocean-window.p-24 {
    padding: 1.5rem !important;
  }
  
  /* Large padding overrides */
  [class*="lg:p-"] {
    padding: 1.5rem !important;
  }
  
  /* Sticky elements become relative on mobile */
  .sticky {
    position: relative !important;
    top: auto !important;
  }
  
  /* Hidden on mobile */
  .hidden[class*="lg:block"] {
    display: none !important;
  }
  
  /* Gap adjustments */
  .gap-20,
  .gap-24 {
    gap: 2rem !important;
  }
  
  /* Order adjustments */
  .order-2 {
    order: 1 !important;
  }
  
  [class*="lg:order-"] {
    order: 2 !important;
  }
  
  /* Text size in cards */
  .ocean-window .text-5xl {
    font-size: 2rem !important;
  }
  
  .ocean-window .text-xl {
    font-size: 1.125rem !important;
  }
  
  .ocean-window .text-lg {
    font-size: 1rem !important;
  }
  
  /* Flex gaps in cards */
  .ocean-window .flex {
    flex-wrap: wrap !important;
  }
  
  .ocean-window .flex.gap-12 {
    gap: 1.5rem !important;
  }
  
  /* Blur decorations - reduce on mobile */
  .absolute[class*="blur-["] {
    opacity: 0.3 !important;
    transform: scale(0.5) !important;
  }
}

/* Tablet specific fixes */
@media (min-width: 769px) and (max-width: 1024px) {
  .ocean-window {
    padding: 2rem !important;
  }
  
  .ocean-window.p-12,
  .ocean-window.p-16,
  .ocean-window.p-24 {
    padding: 2rem !important;
  }
  
  #trust .ocean-window {
    height: auto !important;
    min-height: 350px !important;
  }
}