/* Pervyy ekran: plavayushchie gradienty + setka + telefon s nashey kartoy */
.hero { position: relative; padding: 92px 0 84px; overflow: hidden; }

.hero-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.hero-bg::before, .hero-bg::after {
  content: ''; position: absolute; border-radius: 50%; filter: blur(120px); opacity: .38;
}
.hero-bg::before {
  width: 540px; height: 540px; top: -160px; left: -4%;
  background: radial-gradient(circle, #14b8a6 0%, transparent 70%);
  animation: float-a 14s ease-in-out infinite;
}
.hero-bg::after {
  width: 420px; height: 420px; bottom: -140px; right: 2%;
  background: radial-gradient(circle, #38bdf8 0%, transparent 70%);
  animation: float-a 17s ease-in-out infinite reverse;
}
@keyframes float-a { 0%,100% { transform: translate(0,0);} 50% { transform: translate(38px,-28px);} }

.hero-grid {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(20,184,166,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,184,166,.05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 35%, #000 40%, transparent 100%);
}

.hero .wrap { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr .95fr; gap: 60px; align-items: center; }
.hero h1 { margin: 16px 0 18px; font-size: clamp(34px, 5.2vw, 56px); line-height: 1.07; letter-spacing: -.032em; font-weight: 700; }
.hero h1 em { font-style: normal; background: linear-gradient(100deg, var(--l-teal3), var(--l-teal)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .lead { margin: 0 0 30px; font-size: clamp(16px, 1.9vw, 18.5px); color: var(--l-dim); max-width: 34em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-note { margin-top: 16px; font-size: 13px; color: var(--l-mute); }

/* Telefon */
.phone {
  position: relative; width: min(292px, 76vw); margin: 0 auto;
  aspect-ratio: 292 / 600; border-radius: 40px;
  border: 1px solid var(--l-line); background: var(--l-bg2);
  box-shadow: 0 46px 100px rgba(0,0,0,.6); overflow: hidden;
  transform: rotate(-2deg);
}
.phone-notch { position: absolute; top: 11px; left: 50%; transform: translateX(-50%); width: 98px; height: 22px; border-radius: 12px; background: #04141a; z-index: 3; }
.phone-map { position: absolute; inset: 0; }
.phone-map svg { width: 100%; height: 100%; display: block; }
.phone-chip {
  position: absolute; top: 46px; left: 14px; right: 14px; z-index: 2;
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; border-radius: 11px;
  background: rgba(11,30,34,.94); border: 1px solid var(--l-line);
  font-size: 12px; color: var(--l-text);
}
.phone-ad {
  position: absolute; left: 14px; right: 14px; bottom: 15px; height: 44px; z-index: 2;
  border-radius: 10px; border: 1px solid var(--l-line); background: rgba(14,33,38,.94);
  display: grid; place-items: center; font-size: 10px; letter-spacing: 2px; color: var(--l-mute);
}

@media (max-width: 900px) {
  .hero { padding: 56px 0 52px; }
  .hero .wrap { grid-template-columns: 1fr; gap: 42px; }
  .phone { transform: none; }
}