/* ═══════════════════════════════════════════════════════════
   HEEIZ RESPONSIVE STYLES
   Mobile-first breakpoints
   ═══════════════════════════════════════════════════════════ */

/* ─── Tablet (< 1024px) ─── */
@media (max-width: 1024px) {
  /* v1 legacy */
  .services-grid  { grid-template-columns: repeat(2, 1fr); }
  /* audience-grid v1 legacy — removed */
  .footer-grid    { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-8); }
  .footer-grid > .footer-brand { grid-column: 1 / -1; }
  .footer-grid > .footer-brand .footer-brand-desc { max-width: 100%; }
  .compare-grid   { grid-template-columns: 1fr; }
  .compare-vs     { display: none; }
  .how-it-works-grid { grid-template-columns: 1fr; }
  .steps-visual   { position: static; }
  .delivery-grid  { grid-template-columns: 1fr; }
  .app-grid       { grid-template-columns: 1fr; }
  .phone-frame    { width: 220px; height: 460px; transform: rotate(-1.5deg); }
  .hero-stats-bar { grid-template-columns: repeat(3, 1fr); }
  .stat-divider   { display: none; }

  /* v2 — pipeline rows */
  .plv2-row            { grid-template-columns: 160px 1fr; gap: var(--space-8); }
  .plv2-phase-pills    { display: none; }
  .services-grid       { grid-template-columns: repeat(2, 1fr); }
  .srv-card--feat      { grid-column: span 2; padding: var(--space-8); }
  .srv-feat-num        { font-size: 3.5rem; }
  .aud-grid            { grid-template-columns: repeat(3, 1fr); }
  .aud-card--feat      { grid-column: span 1; flex-direction: column; align-items: flex-start; }
  .hiw-row             { grid-template-columns: repeat(2, 1fr); }
  .hiw-row::before     { display: none; }
  .hiw-rows            { gap: var(--space-10); }
  .compare-v2          { grid-template-columns: 1fr; }
  .delivery-v2-grid    { grid-template-columns: 1fr; gap: var(--space-10); }
  /* Delivery v5 */
  .dnet2-stats         { grid-template-columns: repeat(2, 1fr); }
  /* FAQ v3 */
  .faq-v3-body         { grid-template-columns: 200px 1fr; gap: var(--space-8); }
  .faq-v3-header       { align-items: flex-start; }
  .app-grid            { grid-template-columns: 1fr 320px; gap: var(--space-10); }
  .app-badge--new-order { right: -70px; }
  .app-badge--delivered { left: -70px; }
  .app-badge--stat      { right: -60px; }
  /* API section */
  .api-main-grid       { grid-template-columns: 1fr; gap: var(--space-10); }
  .api-window          { position: static; }
  .api-window-wrap     { padding-top: var(--space-4); }
  .api-float-badge     { display: none; }
  .api-metrics-strip   { flex-wrap: wrap; justify-content: center; gap: 0; }
  .hero-v2-stats       { grid-template-columns: repeat(2, 1fr); max-width: 420px; }

  /* Map Coverage — reduce gap at tablet */
  .mcs-body            { gap: var(--space-12); }

  /* Cards — slightly reduced padding on tablet */
  .srv-card            { padding: var(--space-6); }
  .hiw-step-body       { padding: var(--space-5) var(--space-4); }
  .why-col             { padding: var(--space-8); }
  .plv2-card           { padding: var(--space-5); }

  /* Partners v4 */
  .ptns2-grid          { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

  /* Merchants (mfeat) */
  .mfeat-grid          { grid-template-columns: repeat(2, 1fr); }
}

/* ─── Mobile Large (< 768px) ─── */
@media (max-width: 768px) {
  /* ── Mobile Menu Panel ── */
  .nav-menu {
    position: fixed;
    top: 0; bottom: 0;
    inset-inline-end: 0;
    width: min(300px, 82vw);
    background: var(--heeiz-ink-950);
    border-inline-start: 1px solid rgba(26,154,166,0.14);
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    gap: 0;
    transform: translateX(110%);
    transition: transform 0.32s cubic-bezier(0.32,0.72,0,1);
    z-index: calc(var(--z-overlay) + 5);
    overflow-y: auto;
    box-shadow: -24px 0 60px rgba(0,0,0,0.45);
  }

  [dir="rtl"] .nav-menu { transform: translateX(-110%); }
  .nav-menu.open { transform: translateX(0); }

  .nav-toggle { display: flex; }
  .nav-whatsapp-btn { display: none; }
  .nav-live { display: none; }
  .nav-sep  { display: none; }
  /* Hide desktop CTA from navbar — mobile menu footer has its own */
  .nav-actions .btn-primary { display: none; }
  /* Hide desktop lang switcher — mobile menu footer has its own */
  .nav-actions .lang-switcher { display: none; }

  /* ── Mobile Nav Header ── */
  .mobile-nav-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-5) var(--space-5);
    border-bottom: 1px solid rgba(255,255,255,0.07);
    flex-shrink: 0;
  }

  .mobile-nav-close {
    width: 34px; height: 34px;
    border-radius: var(--radius-md);
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.10);
    color: rgba(255,255,255,0.7);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
  }
  .mobile-nav-close:hover { background: rgba(220,38,38,0.15); color: #f87171; border-color: rgba(220,38,38,0.25); }

  /* ── Nav Links in mobile ── */
  .nav-link {
    display: block;
    width: 100%;
    padding: 14px var(--space-5);
    font-size: 0.95rem;
    font-weight: 500;
    color: rgba(255,255,255,0.68);
    border-radius: 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    border-inline-start: 2px solid transparent;
    transition: color 0.18s, background 0.18s, border-color 0.18s, padding-inline-start 0.18s;
  }

  .nav-link::after { display: none; }

  .nav-link:hover {
    color: rgba(255,255,255,0.95);
    background: rgba(26,154,166,0.07);
    padding-inline-start: calc(var(--space-5) + 5px);
  }

  .nav-link.active {
    color: var(--heeiz-teal-300);
    font-weight: 600;
    background: rgba(26,154,166,0.08);
    border-inline-start-color: var(--heeiz-teal-500);
  }

  /* ── Mobile Footer ── */
  .mobile-nav-footer {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-5);
    margin-top: auto;
    border-top: 1px solid rgba(255,255,255,0.07);
    background: rgba(0,0,0,0.12);
    flex-shrink: 0;
  }

  .mobile-nav-footer .btn { width: 100%; justify-content: center; }

  .mobile-lang {
    width: 100%;
    justify-content: center;
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.08);
  }

  .mobile-lang .lang-btn { flex: 1; text-align: center; }

  /* ── Overlay ── */
  .mobile-nav-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.65);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: calc(var(--z-overlay) + 4);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
  }

  .mobile-nav-overlay.active { opacity: 1; pointer-events: auto; }

  /* Hero v1 legacy */
  .hero-title-main { font-size: clamp(4rem, 18vw, 6rem); }
  .hero-title-sub  { font-size: clamp(1.1rem, 4vw, 1.5rem); }
  .hero-stats-bar  { grid-template-columns: repeat(2, 1fr); padding: var(--space-4); }
  .hero-cta-group  { flex-direction: column; align-items: center; }
  .hero-cta-group .btn { width: 100%; max-width: 300px; }

  /* Services v1 */
  .services-grid  { grid-template-columns: 1fr; }
  .aud-grid       { grid-template-columns: repeat(2, 1fr); }

  /* Footer */
  .footer-grid    { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
  .footer-grid > .footer-brand { grid-column: 1 / -1; }
  .footer-brand-desc  { max-width: 100%; }
  .footer-brand-tagline::before { display: none; }
  .footer-contact-block { margin-top: var(--space-5); padding-top: var(--space-4); }
  .footer-bottom  { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
  .footer-legal   { flex-wrap: wrap; gap: var(--space-3); }
  .footer-back-top { align-self: flex-end; }

  /* API section */
  .api-flow              { flex-wrap: wrap; gap: var(--space-3); justify-content: center; }
  .api-flow-connector    { min-width: 60px; }
  .api-win-status        { display: none; }
  .api-integrations      { gap: var(--space-3); }
  .api-code-panel        { max-height: 280px; }

  /* Section padding */
  .section    { padding-block: clamp(56px, 9vw, 96px); }
  .section-sm { padding-block: clamp(40px, 6vw, 64px); }
  .section-lg { padding-block: clamp(72px, 11vw, 112px); }

  /* v2 Mobile */
  .hero-v2-inner  { grid-template-columns: 1fr; text-align: center; padding-block: clamp(72px, 16vw, 112px); }
  .hero-v2-text   { align-items: center; }
  .hero-v2-visual { display: none; }
  .hero-v2-lead   { margin-inline: auto; text-align: center; }
  .hero-v2-stats  { grid-column: 1; margin-top: var(--space-10); }
  .hero-v2-cta { flex-direction: column; align-items: center; justify-content: center; }
  .hero-v2-cta .btn { width: 100%; max-width: 300px; }
  /* Hero BG animation */
  .hba-diamond-1 { width: 260px; height: 260px; top: -60px; right: -50px; }
  .hba-diamond-2 { display: none; }
  .hba-corner-bl, .hba-corner-br { display: none; }
  .hba-grid { background-size: 32px 32px; opacity: 0.6; }
  .hba-blob-1 { width: 420px; height: 420px; filter: blur(80px); }
  .hba-blob-2 { width: 280px; height: 280px; filter: blur(60px); }
  /* Feature grid */
  .hero-feat-grid  { grid-template-columns: repeat(2, 1fr); }
  .hfg-item        { padding: var(--space-5); }
  .hero-stats-strip { gap: var(--space-4); padding: var(--space-4) var(--space-5); }
  /* Cards — reduce padding on mobile */
  .srv-card        { padding: var(--space-6); }
  .srv-card--feat  { padding: var(--space-7); }
  .hiw-step-body   { padding: var(--space-5) var(--space-4); }
  .why-col         { padding: var(--space-7); }
  .plv2-card       { padding: var(--space-4); }
  /* Map Coverage Section */
  .mcs-body          { grid-template-columns: 1fr; gap: var(--space-10); }
  .mcs-map-col       { order: -1; }
  .mcs-stats-bar     { grid-template-columns: repeat(2, 1fr); }
  .mcs-coverage-badge { display: none; }
  .mcs-lead          { max-width: 100%; }
  .map-info-panel    { inset-inline-start: 4px; min-width: 140px; }
  /* pipeline mobile */
  .plv2-row          { grid-template-columns: 1fr; gap: var(--space-5); padding-block-start: var(--space-10); padding-block-end: var(--space-8); }
  .plv2-row-label    { flex-direction: row; align-items: center; gap: var(--space-3); position: static; }
  .plv2-row-num      { font-size: 2rem; margin-bottom: 0; }
  .plv2-top          { flex-direction: column; gap: var(--space-5); }
  .services-grid       { grid-template-columns: repeat(2, 1fr); }
  .srv-card--feat      { grid-column: span 2; }
  .aud-grid            { grid-template-columns: repeat(2, 1fr); }
  .hiw-row             { grid-template-columns: repeat(2, 1fr); }
  .compare-v2          { grid-template-columns: 1fr; }
  /* Delivery v5 mobile */
  .dnet2-stats         { grid-template-columns: repeat(2, 1fr); }
  .dnet2-logo-pill     { padding: 14px 24px; min-width: 120px; }
  .dnet2-logo-pill img { height: 28px; }
  /* FAQ v3 mobile */
  .faq-v3-body         { grid-template-columns: 1fr; }
  .faq-v3-sidebar      { flex-direction: row; flex-wrap: wrap; position: static; gap: var(--space-1); }
  .faq-v3-sidebar-title{ display: none; }
  .faq-v3-sidebar-cta  { display: none; }
  .faq-v3-cat          { width: auto; flex: 0 0 auto; }
  .faq-v3-header       { flex-direction: column; gap: var(--space-5); }
  .faq-v3-badge        { align-self: flex-start; padding: var(--space-4) var(--space-6); }
  .faq-v3-badge strong { font-size: 2rem; }
  .faq-v3-q            { padding: var(--space-4) var(--space-5); }
  .faq-v3-a-inner      { padding: var(--space-4) var(--space-5) var(--space-5); }
  .app-grid            { grid-template-columns: 1fr; }
  .app-visual          { margin-top: var(--space-8); }
  .app-badge--new-order { top: 60px; right: -10px; }
  .app-badge--delivered { bottom: 160px; left: -10px; }
  .app-badge--stat      { display: none; }
  .cta-actions         { flex-direction: column; align-items: center; }
  .cta-btn             { width: 100%; max-width: 340px; justify-content: center; }
  .cta-stats-panel     { flex-wrap: wrap; gap: var(--space-2); padding: var(--space-5); }
  .cta-stat-item       { flex: 0 0 40%; padding: var(--space-3); }
  .cta-stat-sep        { display: none; }
  .cta-ring-2, .cta-ring-3 { display: none; }
  .cta-micro           { gap: var(--space-3); }

  /* Pipeline cards — slightly smaller min for 2-col on narrow screens */
  .plv2-cards          { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }

  /* Why Heeiz — stack columns */
  .why-compare         { grid-template-columns: 1fr; gap: var(--space-5); }
  .why-vs              { display: none; }
  .why-metrics         { flex-wrap: wrap; }
  .why-divider         { display: none; }
  .why-metric          { flex: 0 0 50%; border-bottom: 1px solid rgba(255,255,255,0.07); }

  /* Partners v4 */
  .ptns2-grid          { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: var(--space-3); }
  .ptns2-card-inner    { min-height: 96px; padding: var(--space-5); }
  .ptns2-cta           { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
  .btn-outline-teal    { width: 100%; justify-content: center; }

  /* Merchants (mfeat) */
  .mfeat-grid          { grid-template-columns: 1fr; }
  .mfeat-footer        { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
  .mfeat-footer .btn   { width: 100%; justify-content: center; }
}

/* ─── Mobile Small (< 480px) ─── */
@media (max-width: 480px) {
  .footer-grid    { grid-template-columns: 1fr; }
  .footer-app-btns { flex-direction: column; }
  .footer-app-btn  { width: 100%; }
  .footer-trust    { gap: var(--space-2); }
  .api-win-tabs .api-win-tab:nth-child(n+3) { display: none; }
  .api-flow-connector .api-flow-label       { display: none; }
  .api-win-footer span:nth-child(n+3)       { display: none; }
  .api-cta-row  { flex-direction: column; }
  .api-btn      { width: 100%; justify-content: center; }
  .aud-grid       { grid-template-columns: 1fr; }
  .aud-card-bg-num { display: none; }

  /* Partners v4 */
  .ptns2-grid          { grid-template-columns: repeat(2, 1fr); }
  /* Delivery v5 */
  .dnet2-stats         { grid-template-columns: repeat(2, 1fr); }

  /* Merchants (mfeat) */
  .mfeat-card          { padding: var(--space-4); }
  .mfeat-card-footer   { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
  .hero-stats-bar { grid-template-columns: 1fr 1fr; gap: var(--space-4); }
  .lang-switcher  { display: none; }
  .footer-bottom  { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
  .mcs-stats-grid { grid-template-columns: repeat(2, 1fr); }

  /* Hero title */
  .hero-title-main { font-size: clamp(3.5rem, 18vw, 5rem); }

  /* Step items simplified */
  .step-desc { font-size: .85rem; }

  /* Hero feature grid — single column on tiny screens */
  .hero-feat-grid { grid-template-columns: 1fr; max-width: 280px; }
  .hba-diamond-3  { display: none; }
  .hba-corner-tl, .hba-corner-tr { width: 36px; height: 36px; top: 16px; }
  .hba-corner-tl { left: 16px; }
  .hba-corner-tr { right: 16px; }

  /* Hero stats strip — wrap separators */
  .hss-dot { display: none; }
  .hero-stats-strip { gap: var(--space-5); flex-wrap: wrap; border-radius: var(--radius-lg); }

  /* Services — single column */
  .services-grid  { grid-template-columns: 1fr; }
  .srv-card--feat { grid-column: span 1; padding: var(--space-6); }
  .srv-feat-num   { font-size: 2.5rem; }

  /* Steps — single column */
  .hiw-row { grid-template-columns: 1fr; }

  /* Compare columns — less padding */
  .compare-v2-col { padding: var(--space-5); }

  /* App — hide all badges, smaller phone */
  .app-badge        { display: none; }
  .app-phone-wrap   { width: 210px; animation: none; }
  .phone-frame      { width: 210px; transform: none !important; border-radius: 38px; padding: 8px; }
  .phone-screen     { border-radius: 30px; }
  .phone-screen-glare { border-radius: 30px 30px 0 0; }
  .phone-island     { width: 76px; height: 24px; top: 10px; }
  .app-downloads    { flex-direction: column; }
  .app-dl-btn       { width: 100%; }

  /* Pipeline cards — 2 col fixed */
  .plv2-cards { grid-template-columns: 1fr 1fr; }
  .plv2-row-num { font-size: 1.6rem; }
  .plv2-row-label strong { font-size: 0.85rem; }

  /* Map stats */
  .mcs-stats-bar { grid-template-columns: repeat(2, 1fr); }

  /* Why Heeiz metrics — single column on tiny screens */
  .why-metric { flex: 0 0 100%; }
  .why-col    { padding: var(--space-5); }
  /* Cards — minimal padding on tiny screens */
  .srv-card        { padding: var(--space-5); }
  .hiw-step-body   { padding: var(--space-4) var(--space-3); }
  .plv2-card       { padding: var(--space-4); }
  .audience-v2-card { padding: var(--space-6) var(--space-4); }
}

/* ─── Large Desktop (> 1440px) ─── */
@media (min-width: 1440px) {
  .services-grid { grid-template-columns: repeat(4, 1fr); }
  .srv-card--feat { grid-column: span 2; }
  .aud-grid { grid-template-columns: repeat(4, 1fr); }
  .container     { padding-inline: var(--space-16); }
}

/* ─── Print ─── */
@media print {
  .site-header,
  .whatsapp-float,
  .heeiz-cursor,
  .heeiz-cursor-dot,
  .page-loader,
  #hero-canvas,
  .aurora,
  .scroll-indicator,
  nav,
  footer {
    display: none !important;
  }

  body { color: #000; background: #fff; }
  .container { max-width: 100%; }
  a::after { content: ' (' attr(href) ')'; font-size: .8em; color: #666; }
}

/* ─── Dark Mode (future) ─── */
@media (prefers-color-scheme: dark) {
  /* Minimal dark mode adjustments — full dark design already uses dark backgrounds */
  .bg-light { background: var(--heeiz-ink-900); }
  .card:not(.card-dark) {
    background: var(--heeiz-ink-800);
    border-color: rgba(255,255,255,.06);
    color: var(--white);
  }
  .text-ink  { color: rgba(255,255,255,.9); }
  .text-muted { color: rgba(255,255,255,.5); }
  .stat-label { color: rgba(255,255,255,.5); }
}

/* ─── Reduced Motion ─── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration:   0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration:  0.01ms !important;
    scroll-behavior: auto !important;
  }

  .marquee-track { animation: none; }
  .glitch-text   { animation: none; }
  .aurora::before,
  .aurora::after { animation: none; }
  .map-pulse::before,
  .map-pulse::after { animation: none; }
  .scroll-indicator { animation: none; }
  .float-element { animation: none !important; }
}

/* ─── Focus Visible (Accessibility) ─── */
:focus-visible {
  outline: 2px solid var(--heeiz-teal-400);
  outline-offset: 3px;
  border-radius: 4px;
}

button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--heeiz-gold-400);
  outline-offset: 3px;
}

/* ─── High Contrast ─── */
@media (forced-colors: active) {
  .btn-primary { background: ButtonText; color: ButtonFace; }
  .badge { border: 1px solid ButtonText; }
}

/* ── Delivery Network v6 — responsive ── */
@media (max-width: 900px) {
  .dnet3-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .dnet3-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
  .dnet3-card { padding: var(--space-5) var(--space-4); }
  .dnet3-card-img-wrap { height: 60px; }
  .dnet3-card-img { max-height: 54px; }
  .dnet3-stats { flex-wrap: wrap; border-radius: 14px; }
  .dnet3-stat { flex: 0 0 50%; }
  .dnet3-stat-sep:nth-child(4) { display: none; }
}

/* ── Block Dark — mobile: reduce blob sizes ── */
@media (max-width: 768px) {
  .block-dark-blob-1 { width: 420px; height: 380px; }
  .block-dark-blob-2 { width: 300px; height: 300px; top: 18%; }
  .block-dark-blob-3 { width: 380px; height: 320px; }
  .block-dark-blob-4 { width: 260px; height: 260px; }
  .block-dark-blob-5 { width: 240px; height: 240px; }
  .block-dark-vline  { display: none; }
  .block-dark::before { opacity: 0.5; }
}