/* ==========================================================================
   LOFA CODE — Responsive Rules

   Breakpoint strategy (kept intentionally small — five tiers, no
   duplicated/conflicting overrides):
     1200px — laptop / small desktop tightening
     1024px — tablet (nav becomes hamburger; two-column layouts)
     768px  — small tablet / phablet (container padding step-down)
     480px  — mobile (single-column layouts; mobile typography/spacing)
     360px  — small mobile (320–360px phones; tightest spacing)
   ========================================================================== */

/* ==========================================================================
   1200px — Laptop / small desktop
   ========================================================================== */

@media (max-width: 1200px) {
  :root {
    --space-2xl: 84px;
    --space-3xl: 110px;
  }

  .capability-grid { grid-template-columns: repeat(3, 1fr); }
  .industries-strip { grid-template-columns: repeat(4, 1fr); row-gap: 28px; }
}

/* ==========================================================================
   1024px — Tablet
   ========================================================================== */

@media (max-width: 1024px) {
  :root {
    --space-2xl: 72px;
    --header-h: 72px;
  }

  .container { padding: 0 32px; }

  /* Navigation */
  .main-nav { display: none; }
  .nav-toggle {
    display: flex;
    width: 44px;
    height: 44px;
  }
  .logo .logo-img { height: 38px; }

  /* iOS/Android zoom-on-focus prevention: inputs need >=16px font-size */
  .form-group input,
  .form-group select,
  .form-group textarea {
    font-size: 16px;
  }

  /* Hero: stack, message before visual (DOM order already puts
     .hero-content before .hero-visual — no order override needed) */
  .hero .container {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .hero-subtitle { max-width: 100%; }
  .hero-visual { height: 380px; }

  /* Core services bar: 2 columns on tablet */
  .services-bar .container {
    grid-template-columns: repeat(2, 1fr);
  }
  .service-col {
    border-left: none;
    border-top: 1px solid var(--border-soft);
    padding: var(--space-lg) 0;
  }
  .service-col:nth-child(1), .service-col:nth-child(2) { border-top: none; }
  .service-col:nth-child(odd) { padding-right: var(--space-lg); }
  .service-col:nth-child(even) { padding-left: var(--space-lg); }

  /* Why LOFA Code: stack, text before visual (DOM order already puts
     .why-content before .dashboard-visual — no order override needed) */
  .why-section .container {
    grid-template-columns: 1fr;
    gap: 48px;
  }

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

  .industries-panel { padding: 56px 32px; }
  .industries-strip { grid-template-columns: repeat(4, 1fr); }

  .cta-panel {
    flex-direction: column;
    text-align: center;
    padding: 44px 36px;
  }
  .cta-panel-content { flex-direction: column; text-align: center; }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px 24px; }

  .two-col { grid-template-columns: 1fr; gap: 40px; }
  .value-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-divider { grid-template-columns: 1fr; gap: 32px; }
  .stat-divider .stat-block { border-left: none; border-top: 1px solid var(--border-soft); padding-top: 32px; }
  .stat-divider .stat-block:first-child { border-top: none; padding-top: 0; }

  .service-detail { grid-template-columns: 1fr; gap: 24px; }
  .service-detail-body { grid-template-columns: 1fr; gap: 20px; }

  /* Solution detail: always read text before the icon visual once
     stacked, regardless of the desktop-only alternating layout */
  .solution-detail,
  .solution-detail.reverse {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .solution-detail .sd-text,
  .solution-detail.reverse .sd-text {
    order: -1;
  }
  .solution-detail .sd-visual,
  .solution-detail.reverse .sd-visual {
    order: 1;
  }
  .solution-detail .sd-visual { min-height: 220px; }

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

  .contact-layout { grid-template-columns: 1fr; gap: 32px; }
  .contact-form-card { padding: 32px; }
}

/* ==========================================================================
   768px — Small tablet / phablet
   ========================================================================== */

@media (max-width: 768px) {
  .container { padding: 0 28px; }

  .industry-detail-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   480px — Mobile
   ========================================================================== */

@media (max-width: 480px) {
  :root {
    --space-2xl: 64px;
    --space-xl: 44px;
    --header-h: 64px;
  }

  .container { padding: 0 20px; }

  .logo .logo-img { height: 32px; }
  .logo-plate { padding: 5px 10px; }
  .footer-brand .logo .logo-img { height: 40px; }

  /* Hero */
  .hero { padding: 32px 0 var(--space-2xl); }
  .hero-subtitle { font-size: 16px; }
  .hero-ctas { flex-direction: column; align-items: stretch; gap: 12px; }
  .hero-ctas .btn { width: 100%; min-height: 48px; }

  /* Hero visual: compact "orbiting chip" composition rather than four
     full-size cards pinned to the corners — smaller, pulled inward,
     each with a thin line pointing back toward the core. */
  .hero-visual { height: 280px; }
  .hero-core { width: 92px; height: 92px; }
  .hero-core .core-layer.l3 svg { width: 22px; height: 22px; }

  .float-card {
    width: 106px;
    padding: 9px 10px;
    gap: 6px;
    position: absolute;
  }
  .float-card span { font-size: 10.5px; line-height: 1.25; }
  .float-card .fc-icon { width: 24px; height: 24px; }

  .float-card.fc-1 { top: 10%; left: 10%; }
  .float-card.fc-2 { top: 8%; right: 6%; }
  .float-card.fc-3 { bottom: 14%; left: 6%; }
  .float-card.fc-4 { bottom: 10%; right: 10%; }

  .float-card::before {
    content: "";
    position: absolute;
    width: 28px;
    height: 1px;
    background: linear-gradient(90deg, var(--border-blue), transparent);
    top: 50%;
    pointer-events: none;
  }
  .float-card.fc-1::before, .float-card.fc-3::before { right: -28px; }
  .float-card.fc-2::before, .float-card.fc-4::before { left: -28px; transform: scaleX(-1); }

  /* Core services bar: horizontal swipe rail — each card gets its own
     border, next card peeks at the edge so the swipe affordance reads
     immediately. Native scroll only, no JS carousel. */
  .services-bar { padding: 28px 0; }
  .services-bar .container {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .services-bar .container::-webkit-scrollbar { display: none; }
  .service-col {
    flex: 0 0 82%;
    scroll-snap-align: start;
    border: 1px solid var(--border-soft) !important;
    border-radius: var(--radius-card);
    background: var(--bg-card);
    padding: 22px 20px !important;
  }

  .section-head { margin-bottom: 32px; }

  /* Why LOFA Code: numbered timeline connected by a thin vertical line,
     instead of four generic stacked boxes */
  .feature-grid {
    grid-template-columns: 1fr;
    gap: 4px;
    counter-reset: feature;
    position: relative;
  }
  .feature-grid::before {
    content: "";
    position: absolute;
    left: 19px;
    top: 12px;
    bottom: 12px;
    width: 1px;
    background: linear-gradient(var(--border-blue), var(--border-soft));
  }
  .feature-item { position: relative; padding: 14px 0; }
  .feature-item .icon-box { position: relative; z-index: 1; background: var(--bg-main); }
  .feature-item::after {
    counter-increment: feature;
    content: counter(feature, decimal-leading-zero);
    position: absolute;
    top: -6px;
    left: 46px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--blue-bright);
  }

  .dash-stats { grid-template-columns: 1fr; gap: 10px; }

  .solutions-grid { grid-template-columns: 1fr; gap: 16px; }
  .solution-card { padding: 24px; }

  .capability-grid { grid-template-columns: 1fr; gap: 14px; }
  .capability-card { padding: 20px 18px; }

  .industries-panel { padding: 32px 20px; }
  .industries-strip { grid-template-columns: repeat(2, 1fr); gap: 10px; }

  .cta-panel { padding: 32px 22px; }
  .cta-panel .btn { width: 100%; min-height: 48px; }

  .footer-grid { grid-template-columns: 1fr; gap: 32px; padding-bottom: 40px; }
  .footer-bottom { flex-direction: column; gap: 14px; text-align: center; }
  .footer-legal { gap: 18px; flex-wrap: wrap; justify-content: center; }

  .page-hero { padding: 32px 0 var(--space-xl); }
  .page-hero p { font-size: 16px; }

  .value-grid { grid-template-columns: 1fr; }
  .numbered-step { flex-direction: column; gap: 12px; }
  .numbered-step .step-num { width: auto; font-size: 26px; }

  .solution-outline .so-row { flex-direction: column; gap: 4px; }
  .solution-outline .so-row strong { min-width: 0; }

  .form-grid { grid-template-columns: 1fr; gap: 0; }
  .contact-form-card { padding: 20px; }
  .contact-info-card { padding: 24px 20px; }

  .error-actions { flex-direction: column; width: 100%; }
  .error-actions .btn { width: 100%; min-height: 48px; }

  .mobile-nav a { font-size: 17px; padding: 14px 4px; min-height: 44px; display: flex; align-items: center; }
}

/* ==========================================================================
   360px — Small mobile (320–360px phones)
   ========================================================================== */

@media (max-width: 360px) {
  .container { padding: 0 16px; }

  .hero-visual { height: 250px; }
  .hero-core { width: 80px; height: 80px; }
  .hero-core .core-layer.l3 svg { width: 18px; height: 18px; }
  .float-card { width: 94px; padding: 8px 9px; gap: 5px; }
  .float-card span { font-size: 10px; }
  .float-card .fc-icon { width: 22px; height: 22px; }
  .float-card::before { width: 20px; }
  .float-card.fc-1::before, .float-card.fc-3::before { right: -20px; }
  .float-card.fc-2::before, .float-card.fc-4::before { left: -20px; }

  .capability-grid { grid-template-columns: 1fr; }
  .industries-strip { grid-template-columns: repeat(2, 1fr); gap: 8px; }

  .cta-panel { padding: 28px 18px; }
  .contact-form-card { padding: 16px; }
}