/* ==========================================================================
   Responsive refinements
   Component-level breakpoints live next to each component in styles.css;
   this file holds page-level layout shifts and device-specific tuning.
   Breakpoints follow Tailwind: sm 640 · md 768 · lg 1024 · xl 1280.
   ========================================================================== */

/* Phones ------------------------------------------------------------------- */
@media (max-width: 639px) {
  :root { --header-h: 68px; }
  .hero { padding-bottom: 6rem; align-items: flex-start; }
  .hero-ctas > a { flex: 1 1 100%; }
  .hero-tags { gap: 0.4rem 1rem; font-size: 0.75rem; }
  .scroll-cue { display: none; }
  .service-card { min-height: 0; }
  .cta-panel { border-radius: var(--radius-lg); }
  .cta-panel__orb--1 { width: 80px; height: 80px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .testimonial-card { padding: 1.5rem; }
  .article-cover { aspect-ratio: 16 / 10; border-radius: var(--radius-lg); }
  .prose-article { font-size: 1.02rem; }
  .filter-bar { flex-direction: column; align-items: stretch; }
  .service-detail__visual { min-height: 300px; }
  .viz-phones .mock-phone { max-width: 130px; }
  .viz-phones .mock-phone:nth-child(2) { max-width: 115px; }
}

/* Mobile & tablet: the 3D scene sits behind the copy, so dim it */
@media (max-width: 1023px) {
  .hero .hero-3d-scene { opacity: 0.55; }
  .hero .hero-3d-scene::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(5, 6, 15, 0.35), rgba(5, 6, 15, 0.1) 40%, rgba(5, 6, 15, 0.6));
  }
  .scene-fallback { right: -20%; top: 62%; width: 95vw; opacity: 0.6; }
  .service-index { top: 60px; }
}

/* Desktop ------------------------------------------------------------------ */
@media (min-width: 1024px) {
  .hero-visual { display: block; }
  .hero-copy { max-width: 35rem; }
}
@media (min-width: 1280px) {
  .hero-copy { max-width: 37rem; }
  .hero-visual { width: 52%; }
}

/* Large desktop: keep things from getting lost on huge screens */
@media (min-width: 1680px) {
  :root { --gutter: 3rem; }
  .section-container { max-width: 1400px; }
  .hero-visual { right: calc((100vw - 1400px) / 2); width: 760px; }
}

/* Short landscape screens (e.g. laptops with zoom, phones landscape) */
@media (max-height: 700px) and (min-width: 1024px) {
  .hero { min-height: 720px; }
  .hero-tags { margin-top: 2rem; }
}

/* Touch devices: no hover-only affordances */
@media (hover: none) {
  .glow-border::before { opacity: 0.5; }
  .spotlight::after { display: none; }
}

/* Print -------------------------------------------------------------------- */
@media print {
  .site-header, .site-footer, .ambient, .scroll-progress, .hero-3d-scene, .article-aside, .cta-panel { display: none !important; }
  body { background: #fff; color: #000; }
  .prose-article, .prose-article h2, .prose-article strong { color: #000; }
}