/* IZAZU DEVELOPERS — MOBILE + STABILITY HOTFIX
   Load AFTER assets/style.css on every page.
*/

/* ---------- STABILITY ---------- */
.reveal,
.reveal.visible {
  opacity: 1 !important;
  transform: none !important;
}

html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* ---------- TABLET ---------- */
@media (max-width: 980px) {
  .hero-visual {
    width: 100%;
    max-width: 680px;
    margin-inline: auto;
  }

  .capability-copy {
    left: 24px;
    right: 24px;
  }
}

/* ---------- MOBILE ---------- */
@media (max-width: 700px) {
  .logo-wrap img {
    width: 180px !important;
    height: auto !important;
    max-height: 62px;
  }

  .nav {
    min-height: 72px;
  }

  .hero-grid {
    gap: 18px !important;
  }

  .hero-visual {
    min-height: 390px !important;
    height: 390px !important;
    margin-top: 6px !important;
    overflow: hidden;
  }

  .device-main {
    width: 90% !important;
    right: 5% !important;
    top: 7% !important;
  }

  .device-screen {
    min-height: 255px !important;
  }

  .screen-content {
    padding: 18px !important;
  }

  .float-card {
    transform: scale(.86);
    transform-origin: center;
  }

  .fc-1 {
    left: -3% !important;
    top: 4% !important;
  }

  .fc-2 {
    right: -5% !important;
    bottom: 12% !important;
  }

  .logo-strip .value {
    padding: 24px 18px !important;
  }

  .capability-panel,
  .capability-panel.large {
    min-height: 560px !important;
    height: auto !important;
  }

  .web-concept {
    inset: 20px 20px 220px !important;
  }

  .social-concept,
  .ad-concept {
    inset: 20px 20px 210px !important;
  }

  .capability-copy {
    position: absolute !important;
    left: 22px !important;
    right: 22px !important;
    bottom: 24px !important;
    z-index: 5 !important;
  }

  .capability-copy h3 {
    font-size: 25px !important;
    line-height: 1.08 !important;
    margin: 6px 0 8px !important;
  }

  .capability-copy p {
    font-size: 13px !important;
    line-height: 1.55 !important;
  }

  .concept-note {
    font-size: 11px !important;
    line-height: 1.45 !important;
  }

  .capability-copy .tag {
    margin-bottom: 8px !important;
  }

  .showcase-hero-grid,
  .capability-grid {
    gap: 18px !important;
  }

  .whatsapp-float {
    width: 54px !important;
    height: 54px !important;
    right: 16px !important;
    bottom: 18px !important;
  }

  .contact-card {
    padding: 16px !important;
  }

  .form-card {
    padding: 22px !important;
  }

  .section {
    padding: 66px 0 !important;
  }

  .section-sm {
    padding: 48px 0 !important;
  }
}

@media (max-width: 390px) {
  .logo-wrap img {
    width: 164px !important;
  }

  .hero-visual {
    height: 360px !important;
    min-height: 360px !important;
  }

  .capability-panel,
  .capability-panel.large {
    min-height: 590px !important;
  }

  .web-concept {
    inset: 18px 18px 240px !important;
  }

  .social-concept,
  .ad-concept {
    inset: 18px 18px 225px !important;
  }
}