/* =========================
   MAIN SECTION
========================= */
.dr1060servicesbrief4 {
  padding: 95px 0;
  position: relative;

  background: radial-gradient(circle at top left, rgba(0, 150, 255, .18), transparent 45%),
              radial-gradient(circle at bottom right, rgba(140, 80, 255, .14), transparent 50%),
              linear-gradient(135deg, #050814, #070c1a);

  color: #fff;
  overflow: hidden;
}

/* =========================
   HEADER
========================= */
.domains-header {
  width: min(1100px, 92%);
  margin: 0 auto 45px;
  text-align: center;
}

.domains-header h2 {
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 700;
}

.domains-header h2 span {
  background: linear-gradient(90deg, #6be7ff, #a855f7, #ffffff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domains-header p {
  margin-top: 12px;
  opacity: .85;
  font-size: 1.1rem;
  line-height: 1.7;
}

/* =========================
   HERO IMAGE
========================= */
.domains-hero {
  width: min(1100px, 92%);
  margin: 40px auto 60px;
  position: relative;
  display: flex;
  justify-content: center;
}

.domains-glow {
  position: absolute;
  width: 520px;
  height: 520px;
  background: #00d4ff;
  border-radius: 50%;
  filter: blur(170px);
  opacity: .18;
  z-index: 0;
  animation: glowPulse 6s ease-in-out infinite;
}

@keyframes glowPulse {
  0%, 100% { transform: scale(1); opacity: .15; }
  50% { transform: scale(1.2); opacity: .25; }
}

.domains-image {
  width: 100%;
  max-width: 750px;
  border-radius: 26px;
  position: relative;
  z-index: 2;

  box-shadow: 0 45px 140px rgba(0, 0, 0, .6);
  border: 1px solid rgba(255, 255, 255, .12);

  transform: scale(1.02);
}

/* =========================
   GRID
========================= */
.domains-grid {
  width: min(1100px, 92%);
  margin: 0 auto;

  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
}

/* =========================
   CARD
========================= */
.domain-card {
  padding: 18px 14px;
  text-align: center;
  border-radius: 16px;

  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);

  backdrop-filter: blur(16px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .35);

  font-size: .95rem;
  font-weight: 500;

  cursor: default;

  transition: transform .35s ease, background .35s ease, box-shadow .35s ease;
  will-change: transform;
}

/* FIXED HOVER (IMPORTANT) */
.domain-card:hover {
  transform: translateY(-8px) scale(1.05);
  background: rgba(255, 255, 255, .10);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .5);
}

/* =========================
   REVEAL ANIMATION
========================= */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .8s ease, transform .8s ease;
  will-change: transform, opacity;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 900px) {
  .domains-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .domains-image {
    max-width: 100%;
  }
}