/* ═══════════════════════════════════════════════════
   RESPONSIVE CSS - All breakpoints
   Mobile (320px) → Tablet (768px) → Desktop (1200px)
═══════════════════════════════════════════════════ */

/* ── MOBILE FIRST (< 480px) ── */
@media (max-width: 480px) {
  .lang-bar-inner { gap: 8px; }
  .lang-pills { gap: 4px; }
  .lang-pill { padding: 3px 8px; font-size: 11px; }

  .hero { min-height: 90svh; padding: 72px 20px 40px; }
  .hero-desc br { display: none; }
  .hero-pills { gap: 6px; }
  .hero-pill { font-size: 11px; padding: 5px 12px; }

  .pricing-inner { grid-template-columns: 1fr; max-width: 360px; margin: 0 auto; }

  .main-wrap { padding: 24px 12px 40px; }

  .steps-bar { gap: 2px; }
  .step-line { min-width: 20px; margin: 0 4px; }
  .step-label { display: none; }

  .form-row.two-col { grid-template-columns: 1fr; gap: 12px; }
  .card-header { padding: 20px 18px 18px; gap: 12px; }
  .card-num { font-size: 24px; }
  .card-title { font-size: 18px; }
  .form-row { padding: 16px 18px 0; }
  .pref-section-title { padding: 16px 18px 8px; }
  .tile-row { padding: 0 18px 12px; gap: 8px; }
  .tile-row.three { grid-template-columns: 1fr 1fr 1fr; }
  .tile-name { font-size: 12px; }
  .tile-desc { font-size: 10px; }
  .tile-icon-big { font-size: 22px; }
  .lang-selector { padding: 0 18px 12px; gap: 6px; }
  .rlang-btn { padding: 6px 12px; font-size: 12px; }
  .check-grid { grid-template-columns: 1fr; padding: 0 18px 12px; }
  .select-field { padding: 0 18px 12px; }
  .field-input.select-field { margin: 0 18px; width: calc(100% - 36px); }
  .card-footer { padding: 18px 18px 22px; }
  .order-summary { margin: 0 18px 16px; }
  .trust-row { padding: 0 18px 16px; }
  .pay-btn-wrap { padding: 0 18px 8px; }
  .demo-note { margin: 0 18px 12px; }

  .result-wrap { padding: 16px 12px 32px; }
  .result-topbar { padding: 18px 18px; flex-direction: column; align-items: flex-start; }
  .result-identity { gap: 12px; }
  .result-name { font-size: 20px; }
  .result-om { font-size: 28px; }
  .result-tabs { overflow-x: auto; }
  .rtab { padding: 12px 14px; font-size: 13px; white-space: nowrap; }
  .result-body { padding: 18px; }
  .key-stats { grid-template-columns: 1fr 1fr; gap: 8px; }
  .dl-bar { padding: 16px 18px; gap: 8px; }
  .dl-btn { padding: 10px 16px; font-size: 12px; flex: 1; justify-content: center; }

  .how-grid { flex-direction: column; align-items: center; }
  .how-arrow { transform: rotate(90deg); padding: 4px; margin-bottom: 0; }
  .how-card { max-width: 100%; width: 100%; }

  .features-grid { grid-template-columns: 1fr; }

  .modal-box { padding: 28px 20px; }
}

/* ── SMALL TABLET (481px - 767px) ── */
@media (min-width: 481px) and (max-width: 767px) {
  .pricing-inner { grid-template-columns: 1fr 1fr; }
  .pricing-card:last-child { grid-column: 1 / -1; max-width: 300px; margin: 0 auto; }

  .form-row.two-col { grid-template-columns: 1fr; gap: 14px; }

  .features-grid { grid-template-columns: 1fr 1fr; }

  .how-grid { flex-wrap: wrap; justify-content: center; gap: 16px; }
  .how-arrow { display: none; }
  .how-card { min-width: 160px; flex: 0 0 calc(50% - 16px); }

  .result-topbar { flex-direction: column; align-items: flex-start; }
  .dl-bar { justify-content: center; }
}

/* ── TABLET (768px - 1023px) ── */
@media (min-width: 768px) {
  .desktop-br { display: inline; }

  .lang-pill { padding: 4px 14px; }

  .hero { min-height: 100svh; }

  .pricing-inner { max-width: 900px; }

  .how-grid { flex-wrap: nowrap; }
  .how-arrow { display: block; }

  .features-grid { grid-template-columns: repeat(3,1fr); }

  .result-topbar { flex-direction: row; align-items: center; }
}

/* ── DESKTOP (1024px+) ── */
@media (min-width: 1024px) {
  .form-row.two-col { grid-template-columns: 1fr 1fr; }

  .result-wrap { padding: 40px 24px 64px; }

  .key-stats { grid-template-columns: repeat(5,1fr); }

  .dl-bar { justify-content: flex-start; }
}

/* ── LARGE DESKTOP (1440px+) ── */
@media (min-width: 1440px) {
  .hero-title .title-en { letter-spacing: 10px; }
  .how-card { max-width: 220px; }
}

/* ── SAFE AREA (iPhone notch / bottom bar) ── */
@supports (padding: max(0px)) {
  .lang-bar {
    padding-top: max(8px, env(safe-area-inset-top));
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
  .site-footer {
    padding-bottom: max(32px, env(safe-area-inset-bottom));
  }
  .toast {
    bottom: max(24px, env(safe-area-inset-bottom));
  }
}

/* ── HIGH CONTRAST / ACCESSIBILITY ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.1ms !important; }
}

/* ── DARK MODE (already default) ── */
@media (prefers-color-scheme: light) {
  /* Keep dark theme regardless - spiritual/temple aesthetic */
}

/* ── PRINT ── */
@media print {
  .lang-bar, .hero, .pricing-banner, .steps-bar,
  .form-card, .generate-wrap, .how-section, .features-section,
  .site-footer, .dl-bar, .result-tabs { display: none !important; }
  .result-wrap { padding: 0; }
  .result-container { border: none; box-shadow: none; background: white; color: black; }
  .result-topbar { background: white; }
  .rtab-panel { display: block !important; }
  .data-table th { background: #333; }
}

/* ── FOCUS STYLES (Keyboard Nav) ── */
:focus-visible {
  outline: 2px solid var(--saffron);
  outline-offset: 2px;
}

/* ── TOUCH DEVICES ── */
@media (hover: none) {
  .feat:hover, .pricing-card:hover, .tile-card:hover { transform: none; }
  .btn-next:hover, .btn-buy:hover, .btn-pay:hover { transform: none; }
}