/* Gusto page styles */
.gusto-section {
  /* FIX 1: Use svh (Small Viewport Height) to stop resizing on scroll */
  min-height: 100vh; /* Fallback */
  min-height: 100svh; /* Modern mobile fix */
  
  display: flex;
  align-items: center;
  padding: 0 10%;
  
  /* FIX 2: Stop horizontal bounce */
  width: 100%;
  max-width: 100vw; 
  overflow: hidden; 
  
  /* Animation props */
  opacity: 0;
  transform: translateY(60px); /* Reduced movement for smoother mobile feel */
  transition: opacity 1s ease, transform 1s ease;
}
.gusto-section.show {
  opacity: 1;
  transform: translateY(0);
}

.gusto-wrapper {
  max-width: 1200px;
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  position: relative;
  width: 100%;
  /* Removed height: 100% to let content flow naturally on mobile */
}
.gusto-text h2 { font-size: 3rem; color: white; margin-bottom: 20px; }
.gusto-text span { background: linear-gradient(90deg, #fb7185, #fbbf24); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.gusto-text p { color: #cbd5f5; font-size: 1.1rem; line-height: 1.7; }
@keyframes floatAI { 0% { transform: translateY(0); } 50% { transform: translateY(-18px); } 100% { transform: translateY(0); } }
@keyframes glowPulse { 0% { opacity: 0.4; } 50% { opacity: 0.85; } 100% { opacity: 0.4; } }
.gusto-figure { position: relative; width: 320px; margin: auto; transform-style: preserve-3d; animation: floatAI 6s ease-in-out infinite; transition: transform 0.2s ease; cursor: pointer; }
.gusto-figure img { width: 100%; position: relative; z-index: 2; border-radius: 20px; }
.gusto-glow { position: absolute; inset: -40px; background: radial-gradient(circle, rgba(251,191,36,0.35), transparent 70%); filter: blur(60px); animation: glowPulse 4s ease-in-out infinite; }
.gusto-figure::after { content: ""; position: absolute; inset: -28px; border-radius: 50%; border: 1px solid rgba(251,191,36,0.3); opacity: 0; transition: opacity 0.3s ease; }
.gusto-figure:hover::after { opacity: 1; }
.gusto-figure.large { width: 450px; margin: 80px auto 0; animation: floatAI 6s ease-in-out infinite; z-index:5; }
.gusto-figure.large::before { content: ''; position: absolute; top: -60px; left: 50%; width: 4px; height: 60px; background: linear-gradient(to bottom, transparent, rgba(251,191,36,0.4)); transform: translateX(-50%); filter: blur(1px); opacity: 0; transition: opacity 0.3s ease; }


.gusto-visual {
  position: relative;
}

.gusto-chat {
  position: absolute;
  bottom: 100%;              /* ⬆️ directly above image */
  left: 50%;
  transform: translateX(-50%) translateY(10px) scale(0.95);

  background: rgba(15, 23, 42, 0.95);
  color: white;
  padding: 10px 16px;
  border-radius: 14px;
  font-size: 0.9rem;
  line-height: 1.4;
  white-space: nowrap;

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;

  border: 1px solid rgba(96,165,250,0.35);
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
  z-index: 10;
}

/* Little chat arrow pointing DOWN to Gusto */
.gusto-chat::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 10px;
  height: 10px;
  background: inherit;
}

/* Visible state */
.gusto-chat.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
  .gusto-section {
    padding: 60px 5%; /* Less padding on sides */
    height: auto; /* Allow auto height on tablets if content is long */
    min-height: auto;
    padding-top: 100px;
    padding-bottom: 100px;
  }

  .gusto-wrapper {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 40px; /* Reduced gap */
    padding: 0;
  }

  .gusto-figure {
    width: 260px; /* Slightly smaller */
    margin: 0 auto;
  }
}

@media (max-width: 600px) {
  .gusto-text h2 { font-size: 2.2rem; }
}