/* ═══════════════════════════════════════════════════════════════
   Responsive layout + light/dark theme polish (MiraalTech)
   ═══════════════════════════════════════════════════════════════ */

/* Solid muted backgrounds (no grid pattern) */
#hero,
.hero-alt.bg-grid,
#cta-banner {
  background-color: var(--bg-muted);
}

/* ── Mobile nav ── */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: 8px;
  border: 1.5px solid var(--g200);
  border-radius: 12px;
  background: var(--w);
  color: var(--dark);
  flex-shrink: 0;
}

.nav-drawer {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 250;
  flex-direction: column;
  gap: 4px;
  padding: 12px 16px 16px;
  background: var(--w);
  border-bottom: 1px solid var(--g200);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

.nav-drawer a {
  display: block;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--dark);
  transition: background 0.15s;
}

.nav-drawer a:hover {
  background: var(--g50);
  color: var(--red);
}

#hdr {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
}

#hdr .hdr-main {
  position: relative;
}

#hdr.nav-open .nav-drawer {
  display: flex;
}

.hdr-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* ── Tablet & small desktop (fix overflow, keep phone layout) ── */
@media (max-width: 1280px) {
  .site-nav {
    display: none !important;
  }

  .nav-toggle {
    display: flex;
  }

  .hdr-main {
    padding: 0 24px;
  }

  .mega-drop {
    min-width: 0 !important;
    width: min(820px, calc(100vw - 32px));
  }
}

@media (max-width: 1100px) {
  #hero,
  #hero-figma,
  .hero-alt {
    flex-direction: column;
    padding: 48px 28px;
    min-height: auto;
    gap: 32px;
  }

  .hero-left {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
    align-items: center;
  }

  .hero-title__tagline {
    font-size: clamp(18px, 4.2vw, 30px);
  }

  .hero-desc {
    max-width: 100%;
  }

  .hero-btns,
  .hero-trust,
  .hero-stats {
    justify-content: center;
  }

  .hero-right {
    flex: none;
    width: 100%;
    max-width: min(520px, 100%);
    height: auto;
    min-height: 400px;
    margin: 0 auto;
  }

  #hero .hero-right--orbit {
    max-width: min(600px, 100%);
    min-height: 0;
  }

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

  .cmp-grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    justify-items: stretch;
    padding: 0 8px;
  }

  .cmp-card {
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    grid-row: auto;
    grid-template-rows: none;
  }

  .cmp-badge,
  .cmp-title,
  .cmp-list {
    grid-row: auto;
    display: flex;
    flex-direction: column;
    grid-template-rows: none;
  }

  .cmp-list {
    flex: 1;
  }

  .cmp-li {
    min-height: 48px;
  }

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

  .why-body {
    grid-template-columns: 1fr;
    gap: 32px;
  }

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

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

  #awards,
  section.best-for,
  section.surface-flex {
    flex-direction: column;
    padding: 48px 28px !important;
    min-height: auto !important;
  }

  #awards .aw-left,
  section.best-for > div:first-child,
  section.surface-flex > div:first-child {
    flex: none;
    width: 100%;
    max-width: 100%;
  }

  #awards .aw-right,
  section.best-for > div:last-child,
  section.surface-flex > div:last-child {
    flex: none;
    width: 100%;
    max-width: 520px;
    height: auto;
    min-height: 280px;
    margin: 0 auto;
  }

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

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

  #faq {
    padding-left: 40px;
    padding-right: 40px;
  }

  .svc-bento__row--four {
    grid-template-columns: 1fr;
  }

  #portfolio .grid-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Hero alt decorative panels — stack on tablet+ */
  .hero-alt .hero-visual {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    margin: 0 auto 16px;
  }

  .hero-alt .hero-visual-wrap {
    flex: none !important;
    width: 100% !important;
    max-width: 520px !important;
    height: auto !important;
    min-height: 0 !important;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding-top: 8px;
  }
}

/* ── Phone (preserve tight mobile layout) ── */
@media (max-width: 768px) {
  .hdr-top {
    display: none;
  }

  .hdr-main {
    padding: 0 16px;
    height: 60px;
  }

  .btn-cta {
    padding: 10px 16px;
    font-size: 13px;
  }

  button.hdr-brief-hub {
    max-width: none;
    padding: 9px 12px;
    gap: 0;
  }

  .hdr-brief-hub__text {
    display: none;
  }

  .nav-toggle {
    width: 40px;
    height: 40px;
  }

  #hero,
  .hero-alt,
  #stats,
  #process,
  #whyus,
  #comparison,
  #industries,
  #ai-guide-lead,
  #testis,
  #form-sec,
  #cta-banner,
  #services-section,
  #awards,
  section.best-for,
  section.surface-flex,
  section.surface-pad {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  #miraaltech-pod.pod-section {
    margin: 0 16px 24px !important;
    padding: 40px 20px !important;
    border-radius: 16px !important;
  }

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

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

  .stats-nums {
    flex-direction: column;
    gap: 20px;
  }

  .stat-col + .stat-col::before {
    display: none;
  }

  .tstat-row {
    flex-direction: column;
    gap: 16px;
  }

  .tstat + .tstat {
    border-left: none;
    padding: 12px 0;
    border-top: 1px solid var(--g300);
  }

  .vid-grid,
  .rev-grid {
    grid-template-columns: 1fr;
  }

  .f-row {
    grid-template-columns: 1fr;
  }

  #faq {
    padding: 48px 16px 56px !important;
  }

  .footer-top {
    grid-template-columns: 1fr;
  }

  .ft-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .big-num {
    font-size: 44px;
  }

  .pod-feats {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .pod-reviews {
    flex-direction: column;
  }

  .aw-title {
    font-size: clamp(28px, 8vw, 40px);
  }

  #portfolio .grid-4 {
    grid-template-columns: 1fr !important;
  }

  .wa-chat-fab {
    width: 54px;
    height: 54px;
    right: 20px;
    bottom: 24px;
  }

  .wa-chat-fab i {
    font-size: 26px;
  }

  .wa-chat-fab__tip {
    display: none;
  }

  #scroll-top {
    bottom: 92px;
    right: 20px;
  }
}

@media (min-width: 1101px) and (max-width: 1280px) {
  #portfolio .grid-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ── Large desktop: prevent ultra-wide stretch issues ── */
@media (min-width: 1400px) {
  .hero-desc {
    max-width: 520px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   DARK MODE — full site surfaces & inline-style overrides
   ═══════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
  body {
    color: var(--text-primary);
    background: var(--bg-page);
  }

  #hdr {
    background: var(--bg-elevated);
    border-bottom-color: var(--border-default);
  }

  #hdr.scrolled {
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.35);
  }

  .hdr-top {
    background: #0a0a0a;
  }

  .mega-drop {
    background: var(--bg-elevated);
    border-color: var(--border-default);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  }

  .mega-item:hover {
    background: var(--g50);
  }

  .mega-item-title,
  .gc-title {
    color: var(--text-primary);
  }

  .mega-item-desc,
  .gc-desc {
    color: var(--text-secondary);
  }

  .mega-icon,
  .guarantee-card,
  .rating-chip,
  .rating-badge {
    background: var(--g50);
    border-color: var(--border-default);
  }

  .nav-link {
    color: var(--text-secondary);
  }

  .nav-drawer {
    background: var(--bg-elevated);
    border-bottom-color: var(--border-default);
  }

  .nav-toggle {
    background: var(--bg-elevated);
    border-color: var(--border-default);
    color: var(--text-primary);
  }

  .btn-cta {
    background: var(--red);
    color: #fff;
  }

  .btn-outline {
    background: transparent;
    color: var(--red);
    border-color: var(--red);
  }

  .btn-outline:hover {
    background: var(--red-l);
  }

  #hero,
  .hero-alt.bg-grid,
  #stats,
  #cta-banner {
    background-color: var(--bg-muted);
  }

  #logos,
  #process,
  #comparison,
  #faq,
  #services-section,
  #awards,
  section.surface-pad,
  section.best-for {
    background: var(--bg-section) !important;
  }

  #whyus,
  #industries,
  #testis,
  section.surface-muted {
    background: var(--bg-page) !important;
  }

  .hero-badge-icon,
  .orbit-center,
  .ti-chip,
  .logo-card,
  .step-card,
  .ind-header,
  .rev-card,
  .promo-card,
  .form-card,
  .cmp-list {
    background: var(--bg-elevated);
    border-color: var(--border-default);
  }

  .ring {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(38, 163, 163, 0.2);
  }

  .hero-badge-text,
  .hero-desc,
  .stat-label,
  .pill,
  .cta-d,
  .faq-cta,
  .cmp-li,
  .rev-text,
  .tstat-label {
    color: var(--text-secondary);
  }

  .rev-role {
    color: var(--text-tertiary);
  }

  .stat-label {
    color: var(--text-tertiary);
  }

  .hero-badge-icon {
    background: var(--bg-elevated);
    border-color: var(--border-default);
  }

  .hero-badge-text {
    color: var(--text-secondary);
  }

  .step-desc {
    color: var(--text-secondary);
  }

  .nav-link {
    color: var(--text-secondary);
  }

  .f-label {
    color: var(--text-primary);
    background: transparent;
  }

  .f-input {
    color: var(--text-primary);
    background: var(--input-bg, transparent);
    border-color: var(--input-border, var(--g300));
  }

  .f-input:focus {
    background: var(--input-bg-focus, rgba(255, 255, 255, 0.06));
    border-color: var(--input-border-focus, var(--red));
    box-shadow: 0 0 0 3px var(--overlay-brand-06);
  }

  .f-input::placeholder {
    color: var(--g500);
  }

  .f-input:-webkit-autofill,
  .f-input:-webkit-autofill:hover,
  .f-input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text-primary);
    -webkit-box-shadow: 0 0 0 1000px var(--bg-elevated) inset;
  }

  .cmp-li {
    border-bottom-color: var(--g200);
  }

  .ri-g,
  .pi-g {
    background: var(--bg-elevated);
    border-color: var(--g300);
  }

  /* Inline white cards in sections */
  section [style*="background:#fff"],
  section [style*="background: #fff"],
  section [style*="background:#fafafa"],
  section [style*="background: #fafafa"] {
    background: var(--bg-elevated) !important;
    border-color: var(--border-default);
  }

  section [style*="background:#fff5f5"] {
    background: var(--red-l) !important;
  }

  section [style*="background:#eee"],
  section [style*="background: #eee"],
  section [style*="background:#f5f5f5"],
  section [style*="background: #f5f5f5"] {
    background: var(--g200) !important;
  }

  section [style*="color:#555"],
  section [style*="color: #555"],
  section [style*="color:#444"],
  section [style*="color: #444"],
  section [style*="color:#333"],
  section [style*="color: #333"],
  section [style*="color:#666"],
  section [style*="color: #666"],
  section [style*="color:#888"],
  section [style*="color: #888"],
  section [style*="color:#999"],
  section [style*="color: #999"],
  section [style*="color:#111"],
  section [style*="color: #111"] {
    color: var(--text-secondary) !important;
  }

  #hero [style*="background:#fff"],
  #hero [style*="background: #fff"],
  .hero-alt [style*="background:#fff"],
  .hero-alt [style*="background: #fff"] {
    background: var(--bg-elevated) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
  }

  section [style*="background:#e8f5f5"] {
    background: var(--red-l) !important;
  }

  section [style*="border:1.5px dashed"] {
    border-color: rgba(38, 163, 163, 0.25) !important;
  }

  .hero-alt [style*="background:var(--g50)"] {
    background: var(--g50) !important;
  }

  /* Services bento */
  #services-section.svc-bento {
    background: var(--bg-page) !important;
  }

  .svc-bento-card,
  .svc-bento-card--lux {
    background: var(--bg-elevated);
    border-color: var(--border-default);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.22);
  }

  a.svc-bento-card:hover {
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.32);
  }

  .svc-bento-card__visual {
    background: var(--g50);
    border-color: var(--border-default);
  }

  .svc-bento-card--lux .svc-lux__icon {
    background: var(--g50);
    border-color: var(--border-default);
  }

  .svc-lux-pkg {
    background: var(--g50);
    border-color: var(--border-default);
  }

  /* Who we serve */
  .who-we-serve {
    background: var(--bg-section) !important;
  }

  .who-we-serve__panel {
    background: var(--bg-muted);
    box-shadow: 0 14px 44px rgba(0, 0, 0, 0.28);
  }

  .who-we-serve__brand {
    background: var(--bg-elevated);
    border-color: var(--border-default);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  }

  /* Subpages */
  .page-form-card,
  .page-badge,
  .solution-pick-card,
  .service-pick-card,
  .industry-pick-card {
    background: var(--bg-elevated);
    border-color: var(--border-default);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  }

  .form-status--success {
    background: rgba(34, 197, 94, 0.12);
    color: #4ade80;
  }

  .form-status--error {
    background: rgba(239, 68, 68, 0.12);
    color: #f87171;
  }

  .form-status--info {
    background: var(--red-l);
    color: var(--text-primary);
  }

  /* AI guide — form feedback on dark card */
  .ai-guide-lead__form .form-status--success {
    background: rgba(34, 197, 94, 0.18);
    color: #86efac;
  }

  .ai-guide-lead__form .form-status--error {
    background: rgba(239, 68, 68, 0.18);
    color: #fca5a5;
  }

  .ai-guide-lead__form .form-status--info {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
  }

  /* Hero figma */
  #hero-figma.hero-figma {
    background: var(--bg-section);
    border-bottom-color: var(--border-default);
  }

  .hero-figma__title-rest {
    color: var(--text-primary);
  }

  .hero-figma__badges span {
    color: var(--text-tertiary);
  }

  .hero-figma__badges i {
    color: var(--g500);
  }

  /* Logo marquee — dark inline text */
  #logos .logo-card span[style*="color:#111"],
  #logos .logo-card span[style*="color: #111"],
  #logos .logo-card span[style*="color:#2d2d5e"],
  #logos .logo-card span[style*="color: #2d2d5e"] {
    color: var(--text-secondary) !important;
  }

  /* Comparison */
  .cmp-card {
    background: var(--g50);
    border-color: var(--border-default);
  }

  .cmp-card--featured {
    background: rgba(34, 197, 94, 0.1);
    border-color: rgba(74, 222, 128, 0.28);
  }

  .cmp-list {
    background: var(--bg-elevated);
    border-color: var(--border-default);
  }

  .cmp-li {
    color: var(--text-secondary);
    border-bottom-color: var(--g200);
  }

  /* Form section homepage */
  #form-sec {
    background: var(--bg-muted) !important;
  }

  /* FAQ */
  .faq-item {
    background: var(--g50);
    border-color: var(--border-default);
  }

  .faq-q {
    color: var(--text-primary);
  }

  /* Industries */
  .ind-card {
    background: var(--g50);
    border-color: var(--border-default);
  }

  .ind-header {
    background: var(--bg-elevated);
  }

  /* Portfolio */
  .portfolio-card {
    background: var(--bg-elevated);
    border-color: var(--border-default);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
  }

  .portfolio-filter-panel {
    background: var(--bg-elevated);
    border-color: var(--border-default);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  }

  .portfolio-filter-panel--sub {
    background: var(--g50);
    border-color: var(--border-default);
  }

  .portfolio-filter-panel__head--sub {
    border-bottom-color: var(--border-default);
  }

  .portfolio-empty {
    color: var(--text-secondary);
  }

  /* Services page — package tiles */
  .svc-pkg-tile {
    background: var(--bg-elevated);
    border-color: var(--border-default);
  }

  .svc-pkg-tile--featured {
    background: var(--g50);
    border-color: rgba(38, 163, 163, 0.35);
  }

  .svc-pkg-tile--premium {
    background: var(--g50);
    border-color: var(--g400);
  }

  .svc-pkg-tile--premium .svc-pkg-tile__pay {
    color: var(--text-primary);
  }

  .svc-pkg-tile__onetime {
    background: var(--red-l);
    border-color: var(--red-b);
    color: var(--red);
  }

  .svc-detail-tier {
    background: var(--bg-elevated);
    border-color: var(--border-default);
  }

  .solution-pick-card,
  .service-pick-card,
  .industry-pick-card,
  .svc-pkg-tile {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  }

  /* Subpages */
  .page-breadcrumb,
  .page-breadcrumb a {
    color: var(--text-secondary);
  }

  .page-hero h1 {
    color: var(--text-primary);
  }

  .page-hero .hero-lead {
    color: var(--text-secondary);
  }

  .page-badge {
    background: var(--bg-elevated);
    color: var(--text-secondary);
    border-color: var(--border-default);
  }

  .contact-chip {
    color: var(--text-primary);
  }

  /* Legal */
  .legal-content p,
  .legal-content li {
    color: var(--text-secondary);
  }

  .legal-content h2,
  .legal-content h3 {
    color: var(--text-primary);
  }

  /* Blueprint / discount badges */
  .btn-blueprint-offer__inner .price-discount-off,
  .price-discount-off {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
  }

  .blueprint-list li {
    color: var(--text-secondary);
  }

  /* Modals — panel shadow */
  .audit-modal__panel {
    background: var(--bg-section);
    border-color: var(--border-default);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
  }

  .audit-modal__backdrop {
    background: rgba(0, 0, 0, 0.55);
  }

  /* Page form status */
  .form-status--success {
    background: rgba(34, 197, 94, 0.12);
    color: #4ade80;
  }

  .form-status--error {
    background: rgba(239, 68, 68, 0.12);
    color: #f87171;
  }

  .form-status--info {
    background: var(--red-l);
    color: var(--text-primary);
  }
}