/* Cross-browser / device compatibility + speed helpers */

/* Avoid expensive filters on low-power / small screens */
@media (max-width: 900px), (prefers-reduced-motion: reduce) {
  .cursor-glow,
  .noise { display: none !important; }
  .mesh {
    animation: none !important;
    filter: blur(40px);
    opacity: .35;
  }
  .glass,
  .glass-strong,
  .site-header.is-scrolled,
  .nav-menu {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* Paint containment for heavy cards */
.bento-card,
.project-card,
.price-card,
.process-step {
  contain: layout paint style;
}

img {
  content-visibility: auto;
}

/* Box model + media defaults */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

img, svg, video {
  max-width: 100%;
  height: auto;
}

/* Prevent iOS zoom on focus: 16px minimum on form controls */
.contact-form input,
.contact-form select,
.contact-form textarea,
.field-control {
  font-size: 16px !important;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 12px;
}

.contact-form select,
.field-control {
  background-image: linear-gradient(45deg, transparent 50%, #94a3b8 50%),
    linear-gradient(135deg, #94a3b8 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% - 3px), calc(100% - 13px) calc(50% - 3px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2.2rem;
}

/* Touch targets */
.btn,
.filter-btn,
.nav-toggle,
.back-to-top,
.btn-copy,
.nav-menu a {
  min-height: 44px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* 100vh fallbacks for mobile browser chrome */
.hero {
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100dvh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
}

/* Older browsers: solid fallbacks where color-mix unsupported */
@supports not (color: color-mix(in srgb, #000 50%, #fff)) {
  .bento-icon,
  .step-icon,
  .why-icon {
    background: rgba(37, 99, 255, 0.12);
    border-color: rgba(103, 232, 249, 0.28);
  }
  .bento-card:hover,
  .process-step:hover,
  .why-item:hover,
  .project-card:hover {
    border-color: rgba(103, 232, 249, 0.4);
  }
}

/* Reduce motion already handled in main CSS; double-check transforms on low power */
@media (prefers-reduced-motion: reduce) {
  .cursor-glow,
  .mobile-cta,
  .back-to-top {
    transition: none !important;
  }
}

/* Sticky footer safe area */
.mobile-cta {
  padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
}

/* Safari backdrop-filter fallback */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .site-header.is-scrolled,
  .glass,
  .glass-strong,
  .nav-menu {
    background: rgba(7, 11, 22, 0.96);
  }
}

/* dialog unsupported: hide custom styles won't break */
dialog.site-dialog:not([open]) {
  display: none;
}

/* High contrast / forced colors */
@media (forced-colors: active) {
  .btn,
  .glass,
  .filter-btn {
    border: 1px solid CanvasText;
  }
}

/* Print: readable single column */
@media print {
  .site-header,
  .bg-ambient,
  .cursor-glow,
  .noise,
  .mobile-cta,
  .back-to-top,
  .scroll-progress,
  .marquee-wrap {
    display: none !important;
  }
  body {
    background: #fff !important;
    color: #000 !important;
  }
  a { color: #000 !important; }
}