/* ============================================
   普光智物 · Responsive Styles
   Breakpoints: 1440, 1200, 992, 768, 480, 375
   ============================================ */

/* 1200px */
@media (max-width: 1200px) {
  .container { padding: 0 32px; }
  .nav-inner { padding: 0 32px; }
  .hero-content { padding: 120px 32px 80px; }
  .section-split { gap: 60px; }
  .capability-matrix { grid-template-columns: repeat(5, 1fr); }
  .ai-app-grid { grid-template-columns: repeat(4, 1fr); }
  .hardware-diagram { padding: 0 32px; }
  .process-steps { grid-template-columns: repeat(3, 1fr); }
}

/* 992px */
@media (max-width: 992px) {
  .nav-links { display: none; }
  .btn-cta-nav { display: none; }
  .hamburger { display: flex; }

  .section-split,
  .section-split.reverse {
    grid-template-columns: 1fr;
    gap: 48px;
    direction: ltr;
  }

  .section-split.reverse > * { direction: ltr; }

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

  .hardware-diagram {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .hw-center { height: 200px; }

  .hw-side.left,
  .hw-side.right {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }

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

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

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

  .footer-inner { flex-direction: column; gap: 48px; }
}

/* 768px */
@media (max-width: 768px) {
  .container { padding: 0 24px; }
  .nav-inner { padding: 0 24px; }
  .hero-content { padding: 100px 24px 80px; }
  .hardware-diagram { padding: 0 24px; }

  .reveal-section { padding: 80px 0; }
  .section-nocases { padding: 100px 0; }

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

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

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

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

  .demo-guarantees { gap: 16px; flex-direction: column; align-items: flex-start; }

  .nocases-title { font-size: clamp(32px, 7vw, 56px); }

  .contact-title { font-size: clamp(36px, 7vw, 52px); }

  .footer-nav { gap: 40px; }

  .mobile-bottom-cta { display: block; }

  /* Add bottom padding on mobile for fixed CTA */
  .footer { padding-bottom: 80px; }

  .workflow-nodes { padding: 0 20px; }

  .wf-node-inner {
    font-size: 10px;
    padding: 8px 10px;
  }

  .wf-node.ai-node .wf-node-inner {
    font-size: 14px;
    padding: 10px 14px;
  }
}

/* 480px */
@media (max-width: 480px) {
  .hero-title { font-size: clamp(38px, 10vw, 52px); }
  .hero-sub { font-size: 16px; }
  .hero-ctas { flex-direction: column; align-items: flex-start; }

  .section-title { font-size: clamp(30px, 8vw, 44px); }
  .section-title.large { font-size: clamp(34px, 9vw, 52px); }

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

  .matrix-node { padding: 28px 16px; }

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

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

  .footer-nav { flex-direction: column; gap: 32px; }

  .section-split { gap: 36px; }

  .mobile-frames {
    transform: scale(0.75);
    transform-origin: center center;
  }

  .ai-workflow-container { height: 200px; }

  .workflow-nodes {
    gap: 4px;
    padding: 0 10px;
  }

  .wf-node-inner {
    font-size: 9px;
    padding: 6px 8px;
  }
}

/* 375px */
@media (max-width: 375px) {
  .container { padding: 0 16px; }
  .nav-inner { padding: 0 16px; }
  .hero-content { padding: 90px 16px 60px; }

  .hero-title { font-size: 34px; }
  .hero-badges { flex-direction: column; align-items: flex-start; gap: 8px; }
  .hero-badge-sep { display: none; }

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

  .nocases-title { font-size: 30px; }

  .btn-primary,
  .btn-secondary { font-size: 14px; padding: 12px 22px; }
}

/* Large screens */
@media (min-width: 1440px) {
  .container { max-width: 1320px; }
  .nav-inner { max-width: 1320px; }
  .hardware-diagram { max-width: 1320px; }

  .hero-title { font-size: 104px; }
  .section-title.large { font-size: 80px; }
}

/* iPad specific */
@media (min-width: 768px) and (max-width: 1024px) {
  .section-split { gap: 48px; }
  .capability-matrix { grid-template-columns: repeat(4, 1fr); }
  .ai-app-grid { grid-template-columns: repeat(3, 1fr); }
  .why-grid { grid-template-columns: 1fr 1fr 1fr; }
  .process-steps { grid-template-columns: repeat(3, 1fr); }
}

/* Safe area for notched phones */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .mobile-bottom-cta {
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }
}

/* Hero canvas on mobile - simplified */
@media (max-width: 768px) {
  .hero-canvas {
    opacity: 0.6;
  }
  .hero-grid-overlay {
    display: none;
  }
}

/* ============================================
   V2 · Desktop-first touch fallbacks
   ============================================ */

/* Touch devices have no hover: keep capability tags readable */
@media (hover: none) {
  .node-tags {
    max-height: 120px;
    opacity: 1;
  }
  .matrix-hint {
    display: none;
  }
}

/* ============================================
   V2 · 992px
   ============================================ */

@media (max-width: 992px) {
  .audience-grid { grid-template-columns: repeat(2, 1fr); }
  .ai-app-grid.primary { grid-template-columns: repeat(2, 1fr); }
  .pipeline-step { min-width: 72px; }
}

/* ============================================
   V2 · 768px — real mobile layout, not a shrunk desktop
   ============================================ */

@media (max-width: 768px) {
  /* Hero */
  .hero-content { padding: 120px 24px 96px; }
  .hero-sub { font-size: 16px; margin-bottom: 28px; }
  .hero-ctas {
    width: 100%;
    gap: 12px;
    margin-bottom: 20px;
  }
  .hero-ctas .btn-primary,
  .hero-ctas .btn-secondary {
    width: 100%;
    justify-content: center;
    padding: 15px 24px;
    font-size: 15px;
  }
  .hero-scroll-hint { display: none; }
  .hero-promise { gap: 8px; }

  /* Section rhythm */
  .section-eyebrow { margin-bottom: 16px; }
  .section-title { margin-bottom: 16px; }
  .section-sub { font-size: 16px; margin-bottom: 40px; }
  .section-desc { font-size: 15px; margin-bottom: 28px; }

  /* Capability matrix */
  .matrix-node { padding: 22px 14px; }
  .node-label { font-size: 11px; letter-spacing: 0.1em; }

  /* Hardware */
  .hw-device-visual { width: 120px; }
  .fusion-pipeline { margin-top: 40px; }
  .pipeline-node { width: 46px; height: 46px; font-size: 13px; }
  .pipeline-label { font-size: 12px; }
  .pipeline-link { min-width: 14px; }
  .pipeline-note { font-size: 12px; }

  /* AI */
  .ai-workflow-container { height: 220px; }
  .ai-conclusion { font-size: 22px; padding: 44px 0; }

  /* Process */
  .process-title { font-size: 16px; }

  /* Demo */
  .demo-guarantees {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px 20px;
    align-items: center;
    justify-content: center;
  }

  /* Audience */
  .audience-block { margin-top: 52px; padding-top: 40px; }
  .audience-item { padding: 22px 18px; }

  /* Industry · 辅助信息，靠留白与标签压低存在感（标题与全站一致） */
  .section-industry { padding: 56px 0; }
  .industry-lead { font-size: 14px; margin-bottom: 22px; }
  .industry-tag { padding: 6px 12px; font-size: 12px; }
  .industry-note { font-size: 11px; margin-top: 22px; padding-top: 16px; }

  /* Contact */
  .contact-sub { font-size: 16px; margin-bottom: 40px; }

  /* Footer */
  .footer-inner { gap: 40px; margin-bottom: 48px; }
}

/* ============================================
   V2 · 480px
   ============================================ */

@media (max-width: 480px) {
  .hero-promise {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 8px;
  }
  .promise-item { justify-content: center; }

  .audience-grid { grid-template-columns: 1fr; }
  .ai-app-grid.primary { grid-template-columns: 1fr; }
  .ai-app-item.large { padding: 20px 16px; font-size: 15px; }

  .fusion-pipeline { margin-top: 32px; }
  .pipeline-inner { flex-direction: column; }
  .pipeline-step {
    flex-direction: row;
    gap: 12px;
    min-width: 0;
    padding: 6px 0;
  }
  .pipeline-link { display: none; }

  .nocases-line { font-size: 17px !important; margin-top: 36px !important; padding-top: 28px; }
}