/* ============================================================
   SERVICES PAGE — PREMIUM (в стиле about / team / blog)
   ============================================================ */

/* HERO: орбы + переливающийся заголовок */
.services-hero { position: relative; overflow: hidden; }
.services-hero .gold-shine {
  background: linear-gradient(110deg,#D4AF37 20%,#fff5cc 45%,#D4AF37 70%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  background-size: 200% auto; animation: goldShine 4s linear infinite;
}
@keyframes goldShine { to { background-position: 200% center; } }
.services-hero-orbs span { position:absolute; border-radius:50%; filter:blur(60px); opacity:.35; pointer-events:none; }
.services-hero-orbs span:nth-child(1){ width:320px;height:320px;background:#D4AF37;top:-80px;right:-60px;animation:floatOrb 9s ease-in-out infinite; }
.services-hero-orbs span:nth-child(2){ width:240px;height:240px;background:#1B6CA8;bottom:-60px;left:10%;animation:floatOrb 11s ease-in-out infinite reverse; }
.services-hero-orbs span:nth-child(3){ width:180px;height:180px;background:#D4AF37;top:40%;left:45%;opacity:.2;animation:floatOrb 13s ease-in-out infinite; }
@keyframes floatOrb { 0%,100%{transform:translate(0,0)} 50%{transform:translate(30px,-30px)} }

/* serv-card плавное появление (как на других страницах) */
.serv-card.reveal { opacity:0; transform:translateY(40px); transition:opacity .6s ease, transform .6s ease; }
.serv-card.reveal.visible { opacity:1; transform:translateY(0); }
.price-card.reveal { opacity:0; transform:translateY(40px); transition:opacity .6s ease, transform .6s ease; }
.price-card.reveal.visible { opacity:1; transform:translateY(0); }

/* ---- ПРЕИМУЩЕСТВА услуг (мини-карточки в ряд) ---- */
.serv-why { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.serv-why-card {
  position:relative; display:flex; align-items:center; gap:14px;
  padding:22px; border-radius:16px; overflow:hidden;
  background:rgba(255,255,255,.03); border:1px solid rgba(212,175,55,.14);
  transition:transform .35s var(--ease), border-color .35s, box-shadow .35s;
}
.serv-why-card:hover { transform:translateY(-6px); border-color:rgba(212,175,55,.4); box-shadow:0 20px 44px -24px rgba(0,0,0,.7); }
.serv-why-ic {
  width:50px; height:50px; flex-shrink:0; font-size:24px;
  display:flex; align-items:center; justify-content:center; border-radius:14px; color:var(--gold);
  background:linear-gradient(135deg,rgba(212,175,55,.16),rgba(212,175,55,.04));
  border:1px solid rgba(212,175,55,.2); transition:transform .4s, background .4s, color .4s;
}
.serv-why-card:hover .serv-why-ic { transform:rotate(-8deg) scale(1.08); background:linear-gradient(135deg,#F0D48A,#D4AF37); color:var(--navy); }
.serv-why-card h4 { font-size:15px; font-weight:600; color:#fff; margin-bottom:3px; }
.serv-why-card p { font-size:12.5px; color:rgba(255,255,255,.55); margin:0; }
.serv-why-card.reveal { opacity:0; transform:translateY(30px); transition:opacity .6s ease, transform .6s ease; }
.serv-why-card.reveal.visible { opacity:1; transform:translateY(0); }

@media (max-width:1024px){ .serv-why { grid-template-columns:repeat(2,1fr); } }
@media (max-width:768px){ .serv-why { grid-template-columns:1fr; } }