/* ============================================================
   BPMKEY — Responsive breakpoints
   ============================================================ */

/* Large desktops / laptops: keep two column hero */
@media (max-width: 1180px) {
  .hero-grid { gap: 34px; }
}

/* Tablet landscape & portrait */
@media (max-width: 992px) {
  :root { --header-h: 66px; }

  /* Header: hide desktop nav, show hamburger */
  .main-nav { display: none; }
  .header-actions .btn-donate { display: none; }
  .hamburger { display: flex; }

  /* Hero stacks to one column */
  .hero { padding: 38px 0 50px; }
  .hero-grid { grid-template-columns: 1fr; gap: 30px; }
  .hero-right { order: 3; }

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

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

  .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .footer-brand { grid-column: 1 / -1; }
}

/* Large mobile / small tablet */
@media (max-width: 720px) {
  .section { padding: 56px 0; }
  .container { padding: 0 18px; }

  .hero-left h1 { font-size: clamp(1.9rem, 8vw, 2.5rem); }
  .hero-btns { flex-direction: column; }
  .hero-btns .btn { width: 100%; }

  .dashboard-head { flex-wrap: wrap; }
  .dashboard-head h2 { font-size: 1.05rem; }
  .dashboard-controls { padding: 14px; }
  .dashboard-controls .search,
  .select-wrap,
  .sort-btn { flex: 1 1 100%; }
  .sort-btn { justify-content: center; }
  .dashboard-controls select { width: 100%; }

  .content-card { padding: 24px 20px; }
  .form-row { grid-template-columns: 1fr; }
  .cta { padding: 32px 22px; }
}

/* Standard / small mobile */
@media (max-width: 540px) {
  .brand { font-size: 1.1rem; }
  .brand .logo-mark { width: 30px; height: 30px; flex-basis: 30px; }
  .icon-btn { width: 38px; height: 38px; }

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

  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }

  .table-wrap { margin: 0 -2px; }
  .tracks-table th, .tracks-table td { padding: 11px 11px; }
  .track-name { max-width: 130px; }

  .dropzone { padding: 24px 16px; }
  .toast-wrap { width: calc(100% - 24px); }
}

/* Very small devices */
@media (max-width: 360px) {
  .hero-left h1 { font-size: 1.8rem; }
  .dashboard-actions .btn-sm { padding: 7px 10px; font-size: .8rem; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}


/* Homepage intro + analyzer responsive layout */
@media (max-width: 1080px) {
  .hero-intro-grid { grid-template-columns:1fr 1fr; gap:42px; }
  .hero-converter .hero-left h1 { font-size:clamp(2.7rem,5.8vw,4.3rem); }
  .analyzer-workspace { grid-template-columns:270px minmax(0,1fr); }
}

@media (max-width: 900px) {
  .hero-converter { padding:56px 0 64px; }
  .hero-intro-grid { grid-template-columns:1fr; gap:34px; }
  .hero-converter .hero-left { max-width:760px; }
  .hero-preview { max-width:680px; width:100%; }
  .analyzer-workspace { grid-template-columns:1fr; }
  .upload-panel { position:static; }
  .upload-panel .dropzone { padding:28px 18px; }
  .upload-panel-btn { max-width:340px; }
}

@media (max-width: 720px) {
  .hero-converter { padding:42px 0 50px; }
  .hero-kicker { font-size:.72rem; letter-spacing:.1em; margin-bottom:15px; }
  .hero-converter .hero-left h1 { font-size:clamp(2.55rem,11vw,3.8rem); line-height:1.02; }
  .hero-converter .hero-desc { font-size:1rem; margin:20px 0 23px; }
  .hero-converter .hero-btns { flex-direction:row; }
  .hero-converter .hero-btns .btn { width:auto; flex:1 1 190px; }
  .trust-points { gap:10px 16px; font-size:.82rem; }
  .hero-preview { padding:22px 18px 15px; border-radius:22px; }
  .preview-status { margin-bottom:24px; }
  .preview-flow { grid-template-columns:1fr 20px 1fr 20px 1fr; gap:5px; padding-bottom:22px; }
  .preview-format, .preview-result { min-height:76px; border-radius:15px; font-size:.69rem; }
  .preview-result strong { font-size:1rem; }
  .preview-arrow { font-size:1.15rem; }
  .analyzer-section { padding:56px 0; }
  .analyzer-heading { margin-bottom:22px; }
  .analyzer-heading .section-title { font-size:clamp(1.75rem,7vw,2.35rem); }
}

@media (max-width: 480px) {
  .hero-converter .hero-btns { flex-direction:column; }
  .hero-converter .hero-btns .btn { width:100%; flex:auto; }
  .preview-flow { grid-template-columns:1fr; gap:8px; }
  .preview-arrow { transform:rotate(90deg); line-height:1; height:20px; }
  .preview-format, .preview-result { min-height:62px; }
  .preview-meta > div { font-size:.8rem; }
  .upload-panel { padding:17px; border-radius:18px; }
}

/* ============================================================
   MOBILE / TABLET ALIGNMENT HOTFIX
   Keep primary actions visually centered and touch-friendly.
   ============================================================ */
@media (max-width: 900px) {
  .hero-converter .hero-left { width:100%; }
  .hero-converter .hero-btns {
    justify-content:center;
    align-items:center;
  }
  .hero-converter .hero-btns .btn { justify-content:center; }
  .hero-converter .trust-points { justify-content:center; }
  .analyzer-heading { text-align:center; justify-content:center; }
  .analyzer-heading > div { margin-inline:auto; }
  .upload-panel { width:100%; }
  .upload-panel-btn,
  .clear-library-link { display:flex; align-items:center; justify-content:center; text-align:center; }
}

@media (max-width: 720px) {
  .hero-converter .hero-left { text-align:center; }
  .hero-kicker { justify-content:center; }
  .hero-converter .hero-left h1 { margin-inline:auto; }
  .hero-converter .hero-desc { margin-left:auto; margin-right:auto; }
  .hero-converter .hero-btns {
    width:100%;
    justify-content:center;
    gap:12px;
  }
  .hero-converter .hero-btns .btn {
    min-width:min(100%, 220px);
    flex:0 1 220px;
  }
  .trust-points { width:100%; }
  .upload-panel-top { justify-content:center; text-align:left; }
  .upload-panel .dropzone { text-align:center; }
  .upload-panel-btn { width:100%; }
  .clear-library-link { margin-inline:auto; }
}

@media (max-width: 480px) {
  .hero-converter .hero-btns {
    flex-direction:column;
    align-items:center;
  }
  .hero-converter .hero-btns .btn {
    width:min(100%, 360px);
    flex:0 0 auto;
  }
  .trust-points {
    flex-direction:column;
    align-items:center;
    gap:8px;
  }
  .analyzer-heading p { margin-inline:auto; }
  .dashboard-actions { width:100%; justify-content:center; }
  .dashboard-actions .btn-sm { flex:1 1 auto; justify-content:center; }
}

/* Final mobile upload button alignment fix — center only, no other UI changes */
@media (max-width: 900px) {
  .upload-panel-btn {
    width: min(100%, 340px);
    margin-left: auto;
    margin-right: auto;
  }
}