/* ============================================================
   MINZAJ SOLUTIONS — responsive.css  v5.1
   MOBILE-FIRST. Hero float cards visible on ALL screen sizes.
   Breakpoints: 1280 → 1100 → 1024 → 900 → 768 → 480 → 380
   ============================================================ */

/* ── LARGE DESKTOP 1280px+ ────────────────────────────────── */
@media (min-width: 1280px) {
  #hero, #contact { padding: 140px 7% 100px; }
  section          { padding: 110px 7%; }
  footer           { padding: 80px 7% 40px; }
  #navbar          { padding: 0 7%; }
  #highlights      { padding: 64px 7%; }

  /* Give the stack more room on large screens */
  .hero-card-stack { max-width: 440px; }
  .hero-right      { height: 560px; }

  /* Float cards: tighter bleed on very large screens */
  .float-card-1 { right: -24%; top: -8%; }
  .float-card-2 { left:  -30%; bottom: 26%; }
  .float-card-3 { right: -22%; bottom: 2%; }
  .float-card-4 { left:  -32%; top: 34%; }
}

/* ── MEDIUM DESKTOP 1100px ────────────────────────────────── */
@media (max-width: 1100px) {
  .hero-inner      { gap: 40px; }
  .hero-card-stack { max-width: 360px; }

  /* Pull float cards inward so they don't clip against edge */
  .float-card-1 { right: -14%; }
  .float-card-2 { left:  -16%; }
  .float-card-3 { right: -10%; }
  .float-card-4 { left:  -18%; }
}

/* ── TABLET 1024px ────────────────────────────────────────── */
@media (max-width: 1024px) {

  /* Hero collapses to single column */
  .hero-inner  { grid-template-columns: 1fr; }

  /* Hide desktop right panel (mockup + float cards) */
  .hero-right  { display: none; }

  /* Show mobile service cards instead */
  .hero-mobile-cards { display: grid; }

  /* Old badge strip — replaced, keep hidden */
  .hero-mobile-badges { display: none !important; }

  /* Other section adjustments */
  .solutions-inner  { grid-template-columns: 1fr; gap: 48px; }
  .solutions-right  { display: none; }
  .whyus-inner      { grid-template-columns: 1fr; gap: 48px; }

  .services-grid    { grid-template-columns: repeat(2, 1fr); }
  .industries-grid  { grid-template-columns: repeat(3, 1fr); }
  .tech-grid        { grid-template-columns: repeat(3, 1fr); }
  .port-grid        { grid-template-columns: repeat(2, 1fr); }

  .footer-inner     { grid-template-columns: 1fr 1fr; gap: 40px; }
  .footer-brand     { grid-column: 1 / -1; }

  .contact-inner    { grid-template-columns: 1fr; gap: 48px; }

  .highlights-inner { flex-wrap: wrap; }
  .highlight-card   { flex: 1 1 calc(50% - 1px); }
}

/* ── TABLET SMALL 900px ───────────────────────────────────── */
@media (max-width: 900px) {
  .test-grid     { grid-template-columns: 1fr; }
  .port-grid     { grid-template-columns: 1fr; }
  .process-steps { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .process-steps::before { display: none; }
}

/* ══════════════════════════════════════════════════════════
   MOBILE 768px — CORE MOBILE BREAKPOINT
   ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Global spacing ───────────────────────────────────── */
  section     { padding: 64px 4%; }
  #hero       { padding: 92px 4% 60px; min-height: auto; }
  footer      { padding: 52px 4% 28px; }
  #contact    { padding: 64px 4%; }
  #highlights { padding: 40px 4%; }

  /* ── Navbar ───────────────────────────────────────────── */
  #navbar              { padding: 0 4%; height: 62px; }
  .nav-links           { display: none; }
  .nav-cta-btn         { display: none; }
  .nav-mobile-btn      { display: flex; }
  .mobile-menu         { display: flex; }
  .nav-logo-img        { height: 34px; }
  .footer-logo-img     { height: 34px; }

  /* ── Hero typography ──────────────────────────────────── */
  .hero h1 {
    font-size: clamp(30px, 8vw, 42px);
    letter-spacing: -1.2px;
  }
  .hero-sub    { font-size: 15px; margin-bottom: 28px; max-width: 100%; }
  .hero-badge  { font-size: 11px; padding: 6px 13px; margin-bottom: 22px; }
  .hero-trust  { font-size: 12px; }

  /* ── Hero CTAs ────────────────────────────────────────── */
  .hero-btns        { flex-direction: column; gap: 10px; margin-bottom: 28px; }
  .hero-btns .btn   {
    width: 100%; max-width: 100%;
    justify-content: center;
    padding: 15px 20px; font-size: 15px;
    min-height: 52px;
  }

  /* ── Mobile service cards (2×2 grid) ─────────────────── */
  .hero-mobile-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    margin-bottom: 28px;
  }
  .hero-mob-card      { padding: 11px 12px; gap: 9px; }
  .hero-mob-card-icon { width: 30px; height: 30px; font-size: 14px; }
  .hero-mob-card-title{ font-size: 11.5px; }
  .hero-mob-card-sub  { font-size: 10px; }

  /* Ensure old badge strip stays hidden */
  .hero-mobile-badges { display: none !important; }

  /* ── Highlights → stacked on mobile ──────────────────── */
  .highlights-inner  {
    flex-direction: column;
    background: none;
    border: none;
    border-radius: 0;
    gap: 2px;
  }
  .highlight-card {
    flex: none;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: rgba(255,255,255,0.02);
  }
  .highlight-card::before { display: none; }

  /* ── Services ─────────────────────────────────────────── */
  .services-grid  { grid-template-columns: 1fr; border-radius: var(--r-lg); }
  .srv-card       { padding: 28px 22px 40px; }
  .services-header{ margin-bottom: 40px; }

  /* ── Solutions ────────────────────────────────────────── */
  .solutions-inner{ grid-template-columns: 1fr; gap: 36px; }
  .solutions-right{ display: none; }

  /* ── Portfolio ────────────────────────────────────────── */
  .port-grid            { grid-template-columns: 1fr; }
  .portfolio-header     { flex-direction: column; align-items: flex-start; gap: 10px; }
  .portfolio-note       { max-width: 100%; }
  .port-thumb           { height: 200px; }
  .port-body            { padding: 18px; }
  .port-laptop          { width: 72%; }

  /* ── Industries ───────────────────────────────────────── */
  .industries-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .industry-card   { padding: 22px 14px; }

  /* ── Technologies ─────────────────────────────────────── */
  .tech-grid  { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .tech-card  { padding: 16px 14px; gap: 10px; }
  .tech-logo  { width: 36px; height: 36px; font-size: 17px; }

  /* ── Why us ───────────────────────────────────────────── */
  .whyus-inner { grid-template-columns: 1fr; gap: 36px; }
  .why-item    { padding: 14px 16px; }

  /* ── Process ──────────────────────────────────────────── */
  .process-steps         { grid-template-columns: 1fr 1fr; gap: 28px; }
  .process-steps::before { display: none; }
  .proc-step             { padding: 0 8px; }

  /* ── Testimonials ─────────────────────────────────────── */
  .test-grid { grid-template-columns: 1fr; gap: 14px; }
  .test-card { padding: 24px 20px; }

  /* ── Contact ──────────────────────────────────────────── */
  .contact-inner     { grid-template-columns: 1fr; gap: 36px; }
  .form-row          { grid-template-columns: 1fr; gap: 0; }
  .contact-form-wrap { padding: 24px 20px; }
  .contact-socials   { flex-wrap: wrap; gap: 8px; }
  .contact-cards     { gap: 8px; }
  .contact-card      { padding: 13px 14px; }

  /* ── Footer ───────────────────────────────────────────── */
  .footer-inner        { grid-template-columns: 1fr 1fr; gap: 28px; }
  .footer-brand        { grid-column: 1 / -1; }
  .footer-bottom       { flex-direction: column; align-items: flex-start; gap: 8px; }
  .footer-bottom-links { gap: 14px; }

  /* ── Mobile menu ──────────────────────────────────────── */
  .mobile-menu         { padding: 0 6%; }
  .mobile-menu-links a { font-size: clamp(26px, 7.5vw, 38px); padding: 8px 0; }
  .mobile-menu-ctas    { grid-template-columns: 1fr 1fr; }

  /* ── Section typography ───────────────────────────────── */
  .section-title { letter-spacing: -1px; }
  .section-sub   { font-size: 15px; }
}

/* ── SMALL PHONES 480px ───────────────────────────────────── */
@media (max-width: 480px) {
  section  { padding: 56px 4%; }
  #hero    { padding: 84px 4% 52px; }

  .hero h1   { font-size: clamp(28px, 7.5vw, 36px); letter-spacing: -1px; }
  .hero-badge{ font-size: 10.5px; }

  /* Stack mobile cards 2×2 — keep compact */
  .hero-mobile-cards       { gap: 8px; margin-bottom: 24px; }
  .hero-mob-card           { padding: 10px 11px; gap: 8px; }
  .hero-mob-card-icon      { width: 28px; height: 28px; font-size: 13px; }
  .hero-mob-card-title     { font-size: 11px; }
  .hero-mob-card-sub       { font-size: 9.5px; }

  .industries-grid { grid-template-columns: repeat(2, 1fr); }
  .tech-grid       { grid-template-columns: repeat(2, 1fr); }
  .process-steps   { grid-template-columns: 1fr; gap: 24px; }
  .proc-step       { max-width: 240px; margin: 0 auto; }
  .test-card blockquote { font-size: 14px; }
  .footer-inner    { grid-template-columns: 1fr; gap: 24px; }
  .mobile-menu-ctas{ grid-template-columns: 1fr; }
}

/* ── VERY SMALL 380px ─────────────────────────────────────── */
@media (max-width: 380px) {
  #navbar { height: 58px; }
  .nav-logo-img { height: 30px; }
  section { padding: 48px 4%; }

  .hero h1 { font-size: 26px; letter-spacing: -0.8px; }

  /* Single column cards on tiny screens */
  .hero-mobile-cards   { grid-template-columns: 1fr; gap: 7px; }
  .hero-mob-card       { padding: 10px 12px; }

  .highlight-card      { padding: 18px 16px; }
  .srv-card            { padding: 24px 18px 36px; }
  .port-body           { padding: 14px; }
  .contact-form-wrap   { padding: 20px 16px; }
}

/* ── TOUCH DEVICE OVERRIDES ───────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
  /* Remove hover transforms that get stuck on touch */
  .port-card:hover    { transform: none; }
  .industry-card:hover{ transform: none; }
  .tech-card:hover    { transform: none; }
  .sol-item:hover     { transform: none; }
  .feature-row:hover  { transform: none; }
  .why-item:hover     { border-color: transparent; background: transparent; }

  /* Ensure generous tap targets */
  .nav-mobile-btn    { min-width: 44px; min-height: 44px; }
  .mobile-close-btn  { min-width: 44px; min-height: 44px; }
  .footer-social-btn { min-width: 44px; min-height: 44px; }
  .btn               { min-height: 48px; }

  /* Mobile cards: no hover state needed */
  .hero-mob-card:hover { border-color: rgba(37,99,235,0.18); background: rgba(12,18,32,0.75); }
}

/* ── PRINT ────────────────────────────────────────────────── */
@media print {
  #navbar, .mobile-menu, .hero-right, #page-loader,
  .float-card, .hero-mobile-cards { display: none !important; }
  body { background: #fff; color: #000; }
  .section-title { color: #000 !important; }
  a { color: #000; }
}