/* ============================================================
   JAVIR — MOBILE UX OPTIMIZATION
   Comprehensive small-screen polish. Loaded LAST.
   Breakpoints: 768 (tablet) · 600 (phone) · 400 (small phone)
============================================================ */

/* ---------- Touch-device: kill cursor-only effects ---------- */
@media (hover: none) {
  .value-card::after, .usecase-card::after, .int-card::after,
  .workflow-step::after, .contact-card::after { display: none !important; }
  .hero-actions .btn, .cta-shell .btn-primary { transform: none !important; }

  /* Convert hover lift into a tap (:active) cue */
  .value-card:active, .usecase-card:active, .int-card:active,
  .javira-trait:active, .contact-card:active, .workflow-step:active {
    transform: translateY(-2px) scale(.997);
  }
}

/* ============================================================
   TABLET  ≤ 768px
============================================================ */
@media (max-width: 768px) {
  .section { padding: 72px 0; }

  /* Workflow: 2-up instead of a tall single column */
  .workflow-visual { grid-template-columns: 1fr 1fr !important; gap: 12px; }
  .workflow-step { min-height: 0; padding: 20px; }

  /* Use-cases: 2-up */
  .usecase-grid { grid-template-columns: 1fr 1fr !important; }

  /* Pain + guarantee value grids: 2-up */
  #masalah .value-grid,
  #garansi .value-grid { grid-template-columns: 1fr 1fr !important; }

  /* Integration backend cards stack to 2 then 1 */
  .int-cards-3 { grid-template-columns: 1fr 1fr !important; }

  /* Tame oversized section titles */
  .section-title { font-size: clamp(1.8rem, 5.4vw, 2.6rem); }
  .javira-name { font-size: clamp(2.2rem, 7vw, 3.2rem); }
}

/* ============================================================
   PHONE  ≤ 600px
============================================================ */
@media (max-width: 600px) {

  /* ---- Rhythm ---- */
  .section { padding: 56px 0; }
  .container { width: min(calc(100% - 28px), var(--max)); }

  /* ---- Navbar: refined dropdown ---- */
  header.navbar-wrap { top: 8px; padding: 0 12px; margin-top: 10px; }
  .navbar { padding: 10px 12px; border-radius: 16px; gap: 10px; }
  .logo-mark { width: 44px; height: 36px; }
  .logo small { font-size: .6rem; letter-spacing: .14em; }
  .logo strong { font-size: .86rem; }
  .mobile-menu { font-size: 1.1rem; padding: 9px 12px; min-width: 44px; min-height: 44px; }

  .nav-links.open {
    background: rgba(7, 17, 31, .6);
    border: 1px solid rgba(117,239,255,.12);
    border-radius: 14px;
    padding: 14px 16px;
    margin-top: 10px;
    gap: 4px;
  }
  .nav-links.open a {
    width: 100%;
    padding: 12px 4px;
    font-size: 1rem;
    border-bottom: 1px solid rgba(117,239,255,.07);
  }
  .nav-links.open a:last-child { border-bottom: none; }
  .nav-links.open a::after { display: none; }
  .btn-group.nav-actions { display: none; } /* CTA lives in hero on mobile */

  /* ---- Hero ---- */
  .hero { padding: 64px 0 40px; }
  .hero-content { gap: 32px; }
  .hero-title {
    font-size: clamp(2.3rem, 12vw, 3.2rem);
    letter-spacing: -.045em;
    line-height: 1.0;
  }
  .hero-title .line[style*=".52em"] { font-size: .58em !important; margin-top: 10px !important; }
  .hero-sub { font-size: .68rem !important; letter-spacing: .16em !important; }
  .hero-lead { font-size: 1rem; line-height: 1.7; margin-bottom: 24px; }

  /* Buttons: full width, comfy tap height, keep video distinct */
  .hero-actions { flex-direction: column; gap: 10px; width: 100%; }
  .hero-actions .btn { width: 100%; padding: 15px 18px; min-height: 52px; font-size: 1rem; }
  .btn-video { justify-content: center; }

  /* Status row: tighter, single line items */
  .hero-text > .reveal[style*="margin-top: 18px"] {
    gap: 10px !important;
    font-size: .8rem !important;
  }

  /* Pills: scrollable chip row (no awkward wrap) */
  .hero-pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 6px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    margin-left: -2px;
  }
  .hero-pills::-webkit-scrollbar { display: none; }
  .hero-pill { flex: 0 0 auto; font-size: .78rem; padding: 8px 13px; }

  /* Chat burst: contained, no overflow off-screen */
  .chat-burst { height: 400px; max-width: 100%; }
  .cb-stream { padding: 14px 6px 14px 18px; gap: 11px; }
  .cb-bubble { max-width: 85%; font-size: .86rem; padding: 11px 14px; border-radius: 18px; }
  .cb-chip { font-size: .68rem; padding: 6px 10px; }
  .cb-chip-1 { left: 0; top: 2%; }
  .cb-chip-2 { right: 0; top: 18%; }
  .cb-avatar { width: 48px; height: 48px; bottom: 2%; left: 2%; border-radius: 15px; }

  /* ---- Stats strip ---- */
  .stats-strip { margin-top: 48px !important; padding: 16px 6px; gap: 8px; }
  .stats-item { padding: 12px 10px; }
  .stats-value { font-size: 1.5rem; }
  .stats-label { font-size: .66rem; }

  /* ---- Trust marquee ---- */
  .trust-marquee { margin-top: 40px; padding: 12px 0; }
  .trust-track { gap: 36px; }
  .trust-item { font-size: .74rem; }

  /* ---- Section headers ---- */
  .section-title { font-size: clamp(1.7rem, 7.5vw, 2.4rem); margin-top: 14px; }
  .section-subtitle { font-size: .96rem; line-height: 1.7; }
  .eyebrow { font-size: .66rem; padding: 8px 13px; letter-spacing: .12em; }

  /* ---- Pain / guarantee: single column ---- */
  #masalah .value-grid,
  #garansi .value-grid { grid-template-columns: 1fr !important; gap: 14px; }
  #masalah { padding-top: 48px !important; }
  .value-card { padding: 24px; }
  .value-card h3 { font-size: 1.15rem; }

  /* Pain "kerugian" banner stacks */
  #masalah .reveal[style*="space-between"] { flex-direction: column; align-items: flex-start !important; gap: 18px !important; padding: 24px !important; }
  #masalah .reveal[style*="space-between"] .btn { width: 100%; }

  /* ---- Meet Javira ---- */
  #javira { padding-top: 48px !important; }
  .javira-shell { padding: 26px 22px !important; border-radius: 24px; }
  .javira-name { font-size: clamp(2rem, 9vw, 2.8rem); }
  .javira-lead { font-size: .98rem; line-height: 1.7; }
  .javira-traits { grid-template-columns: 1fr !important; gap: 10px; }
  .javira-cta-row { flex-direction: column; gap: 10px; }
  .javira-cta-row .btn { width: 100%; }
  /* Second decorative orb visual: hide on phone to save height */
  #javira .hero-visual { display: none !important; }

  /* ---- Pro/Cons: single column ---- */
  .procons-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .procons-card { padding: 24px !important; border-radius: 22px !important; }
  .procons-card h3 { font-size: 1.3rem !important; }
  .procons-card .procons-list li { font-size: .88rem !important; padding: 11px 13px !important; }
  /* Recommended ribbon: smaller, repositioned so it doesn't clip */
  .procons-card.javira-card > div[style*="rotate(35deg)"] {
    top: 14px !important; right: -40px !important;
    padding: 5px 48px !important; font-size: .62rem !important;
  }

  /* Quick comparison: 2-up */
  #hasil .reveal[style*="repeat(4"] { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  #hasil .reveal[style*="repeat(4"] > div { padding: 14px !important; }

  /* Pro/cons conversion CTA stacks */
  #hasil .reveal[style*="rgba(55,183,255,.14)"] { flex-direction: column; align-items: flex-start !important; padding: 24px !important; }
  #hasil .reveal[style*="rgba(55,183,255,.14)"] > div:last-child { width: 100%; flex-direction: column; }
  #hasil .reveal[style*="rgba(55,183,255,.14)"] .btn { width: 100%; }

  /* ---- Cara Kerja: single column workflow ---- */
  .sim-card { padding: 22px !important; border-radius: 22px; }
  .workflow-visual { grid-template-columns: 1fr !important; }
  .workflow-impact-grid { grid-template-columns: 1fr !important; gap: 10px; }

  /* ---- Training Brand ---- */
  .feature-layout { gap: 18px; }
  .content-card { padding: 24px !important; }
  .mockup-card { padding: 18px !important; }
  .bp-mock { min-height: 0; }
  .bp-stage { min-height: 420px; }
  .bp-tabs { gap: 2px; padding: 4px; }
  .bp-tab { padding: 7px 9px; font-size: .68rem; }
  .bp-field-row { grid-template-columns: 1fr !important; }
  .feature-points li { grid-template-columns: 30px 1fr; gap: 12px; }

  /* ---- Use cases: single column ---- */
  .usecase-grid { grid-template-columns: 1fr !important; }

  /* ---- Integration ---- */
  #integration { padding-top: 48px !important; }
  .int-map { padding: 24px 14px 14px !important; border-radius: 22px; }
  .int-cards-4 { grid-template-columns: 1fr 1fr !important; gap: 12px; }
  .int-cards-3 { grid-template-columns: 1fr !important; }
  .int-row-mid { grid-template-columns: 1fr !important; gap: 16px; }
  .int-hub { width: 100% !important; max-width: 100% !important; padding: 28px 20px !important; }
  .int-hub-inner img { width: 64px; }
  .int-connectors { display: none !important; }
  .int-row-top, .int-row-mid { margin-bottom: 28px !important; }
  .int-legend { width: 100%; justify-content: center; gap: 14px; }
  .int-card { padding: 18px 14px !important; }
  .int-card-side { padding: 20px 16px !important; }

  /* ---- FAQ ---- */
  .faq-section { padding-left: 14px; padding-right: 14px; }
  .faq-question { padding: 18px 16px; gap: 12px; }
  .faq-question h3 { font-size: .98rem; line-height: 1.45; }
  .faq-icon { min-width: 30px; }
  .faq-answer p { font-size: .92rem; }
  .faq-cta-box { flex-direction: column; text-align: center; padding: 24px; gap: 16px; }
  .faq-cta-box .btn { width: 100%; }

  /* ---- Final CTA + Footer ---- */
  #konsultasi .cta-shell { padding: 26px 22px !important; border-radius: 24px; }
  .contact-grid { gap: 14px; }
  .contact-card { padding: 24px !important; }
  .contact-value { font-size: 1.25rem; }
  #konsultasi .cta-shell .btn { width: 100%; }
  .footer-card { flex-direction: column; align-items: flex-start; gap: 18px; padding: 24px !important; }
  .footer-card > div[style*="flex"] { flex-direction: column; text-align: left; gap: 14px; }
  .footer-card .btn { width: 100%; }

  /* Pills row in final CTA: center + wrap */
  #konsultasi .cta-shell > div[style*="justify-content: center"] { gap: 10px; }

  /* ---- Back to top: above LiveChat bubble ---- */
  #backToTop { right: 12px; bottom: 86px; width: 44px; height: 44px; }

  /* ---- Video modal ---- */
  .video-modal-inner { width: 94vw; }
  .video-modal-close { top: -46px; right: 50%; transform: translateX(50%); }
  .video-modal.is-open .video-modal-inner .video-modal-close { transform: translateX(50%); }
}

/* ============================================================
   SMALL PHONE  ≤ 400px
============================================================ */
@media (max-width: 400px) {
  .hero-title { font-size: clamp(2rem, 13vw, 2.6rem); }
  .stats-strip { grid-template-columns: 1fr 1fr; }
  .stats-value { font-size: 1.35rem; }
  .int-cards-4 { grid-template-columns: 1fr !important; }
  .quick-row, #hasil .reveal[style*="repeat(4"] { grid-template-columns: 1fr !important; }
  .logo small { display: none; } /* keep brand name only */
  .cb-bubble { font-size: .82rem; }
  .procons-card .procons-list li { font-size: .85rem !important; }
}

/* ============================================================
   Landscape phones: keep hero from being too tall
============================================================ */
@media (max-height: 520px) and (max-width: 920px) {
  .hero { padding: 48px 0 32px; }
  .chat-burst { height: 320px; }
}

/* ============================================================
   PHONE CENTERING PASS  ≤ 600px
   Balance single-column stacks: center intros, eyebrows,
   buttons & pills — keep list/card body text left for reading.
============================================================ */
@media (max-width: 600px) {

  /* ---- HERO: center the whole intro stack ---- */
  .hero-text { text-align: center; }
  .hero-text .eyebrow { margin-left: auto; margin-right: auto; }
  .hero-lead { margin-left: auto; margin-right: auto; }
  .hero-actions { justify-content: center; }
  .hero-pills { justify-content: center; }
  /* status row (USDT / cancel / support) */
  .hero-text > .reveal[style*="margin-top: 18px"] {
    justify-content: center !important;
  }

  /* ---- MEET JAVIRA intro ---- */
  .javira-intro { text-align: center; }
  .javira-intro .eyebrow { margin-left: auto; margin-right: auto; }
  .javira-role { width: 100%; }
  .javira-cta-row { justify-content: center; }
  /* traits: keep icon+text rows left INSIDE each card, but center the icon nicely */
  .javira-trait { text-align: left; }

  /* ---- SECTION HEADERS that aren't already wrapped/centered ---- */
  /* (training-brand, use-cases put eyebrow/title/subtitle as direct children) */
  #training-brand > .container > .eyebrow,
  #training-brand > .container > .section-title,
  #training-brand > .container > .section-subtitle,
  #use-cases > .container > .eyebrow,
  #use-cases > .container > .section-title,
  #use-cases > .container > .section-subtitle {
    text-align: center;
  }
  #training-brand > .container > .eyebrow,
  #use-cases > .container > .eyebrow {
    margin-left: auto; margin-right: auto;
  }
  #training-brand > .container > .section-subtitle,
  #use-cases > .container > .section-subtitle {
    margin-left: auto; margin-right: auto;
  }

  /* Generic safety: any eyebrow that is a direct flex/inline child centers */
  .section .container > .eyebrow { margin-left: auto; margin-right: auto; }

  /* Subtitles inside centered wrappers get auto margins */
  .section-subtitle { margin-left: auto; margin-right: auto; }

  /* ---- CARD BODY stays LEFT (readability) ---- */
  .value-card,
  .usecase-card,
  .content-card,
  .procons-card,
  .int-card,
  .faq-item,
  .workflow-step,
  .contact-card { text-align: left; }
  /* but center the side-cards in integration (CS Human / Customer) */
  .int-card-side, .int-card { text-align: center; }

  /* ---- Pain & Guarantee cards: center the icon + heading, keep p left-ish ---- */
  #masalah .value-card, #garansi .value-card { text-align: center; }
  #masalah .value-card .num, #garansi .value-card .num {
    margin-left: auto; margin-right: auto;
  }

  /* ---- Footer: center brand block ---- */
  .footer-card { text-align: center; align-items: center; }
  .footer-card > div[style*="flex"] { align-items: center; text-align: center; }

  /* ---- CTA contact cards centered ---- */
  .contact-card { text-align: center; }
  .contact-card .btn { margin-left: auto; margin-right: auto; }

  /* Buttons that are direct CTAs: keep full-width + centered label */
  .btn { justify-content: center; }
}

/* Small phone: tighten centered hero lead width */
@media (max-width: 400px) {
  .hero-lead { font-size: .96rem; }
  .section-subtitle { font-size: .92rem; }
}