/* Global polish + mobile UX tweaks */

/* Один плавный фон на всю страницу — без резких границ между секциями */
.page-sections-bg {
  background: linear-gradient(
    180deg,
    #050505 0%,
    #050506 8%,
    #060708 16%,
    #050507 24%,
    #060809 32%,
    #070a0d 40%,
    #080b10 48%,
    #090d14 52%,
    #0a0f1c 56%,
    #090d14 60%,
    #070a0e 68%,
    #050506 76%,
    #050505 84%,
    #040404 92%,
    #030303 100%
  );
  background-attachment: scroll;
}

/* Better anchor scrolling with fixed navbar */
[id] {
  scroll-margin-top: 96px;
}

/* Improve tap behavior on mobile */
* {
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  height: 100%;
}

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

/* Nicer form controls on mobile */
input,
textarea,
select,
button {
  font: inherit;
}

/* Prefer-reduced-motion: keep things calm */
@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Services section underlay (no photos, not plain black) */
.services-underlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Smooth blend with соседними секциями */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.services-underlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    /* Edge fade to section background (prevents hard cut) */
    linear-gradient(to bottom, rgba(5, 5, 5, 1) 0%, rgba(5, 5, 5, 0) 22%, rgba(5, 5, 5, 0) 78%, rgba(5, 5, 5, 1) 100%),
    /* Mesh blobs moved вниз — без резких полос на границе */
    radial-gradient(1200px 760px at 10% 34%, rgba(var(--svc-accent, 254, 202, 93), 0.55), transparent 62%),
    radial-gradient(1100px 820px at 90% 38%, rgba(var(--svc-accent2, 56, 189, 248), 0.45), transparent 64%),
    radial-gradient(1400px 980px at 50% 118%, rgba(255, 255, 255, 0.12), transparent 66%),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.02), rgba(5, 5, 5, 0.18));
}

.services-underlay::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.055) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 7px);
}

/* Premium glass blocks */
.glass-card,
.glass-soft {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(10, 12, 18, 0.32);
  -webkit-backdrop-filter: blur(14px) saturate(135%);
  backdrop-filter: blur(14px) saturate(135%);
  box-shadow:
    0 14px 44px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.glass-soft {
  background: rgba(10, 12, 18, 0.22);
  box-shadow:
    0 10px 34px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.glass-card::before,
.glass-soft::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(900px 420px at 12% 0%, rgba(255, 255, 255, 0.10), transparent 55%),
    radial-gradient(800px 420px at 95% 18%, rgba(254, 202, 93, 0.08), transparent 62%),
    radial-gradient(900px 520px at 50% 120%, rgba(255, 255, 255, 0.04), transparent 60%);
  opacity: 0.75;
}

.glass-card::after,
.glass-soft::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.10), transparent 45%);
  opacity: 0.22;
}