/* ============================================================
   Mercuders 포털 홈 전용 스타일 (brand.css 토큰 위에서만 동작)
   ============================================================ */

/* ---------------- 히어로 ---------------- */

.hero { position: relative; padding-block: var(--sp-9) var(--sp-8); overflow: hidden; }
.hero-inner { position: relative; z-index: 1; display: flex; flex-direction: column; gap: var(--sp-4); }
.hero h1 { max-width: 20ch; }
.hero .lede { margin-top: var(--sp-1); }
.hero-cta { margin-top: var(--sp-4); }

/* 히어로 뒤에서 아주 느리게 흐르는 컬러 덩어리 */
.hero-glow {
  position: absolute; inset: -30% -10% auto -10%; height: 120%;
  background:
    radial-gradient(closest-side, rgba(124, 92, 255, .30), transparent) 18% 30% / 46% 62% no-repeat,
    radial-gradient(closest-side, rgba(34, 211, 238, .22), transparent) 78% 18% / 40% 56% no-repeat,
    radial-gradient(closest-side, rgba(255, 92, 168, .16), transparent) 55% 72% / 38% 50% no-repeat;
  filter: blur(28px);
  animation: hero-drift 26s var(--ease) infinite alternate;
  pointer-events: none;
}
@keyframes hero-drift {
  from { transform: translate3d(-2%, -1%, 0) scale(1); }
  to   { transform: translate3d(3%, 2%, 0) scale(1.09); }
}

.hero-stats {
  list-style: none; margin: var(--sp-7) 0 0; padding: 0;
  display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  max-width: 720px;
}
.hero-stats li {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: rgba(22, 27, 36, .5);
  backdrop-filter: blur(6px);
}
.hero-stats strong { font-size: var(--fs-lg); font-weight: 700; letter-spacing: -.02em; }
.hero-stats span { font-size: var(--fs-xs); color: var(--text-dim); }

/* ---------------- 섹션 헤더 ---------------- */

.sec-head { display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-6); }

/* ---------------- 서비스 카드 그리드 ---------------- */

.svc-grid {
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.svc-card {
  position: relative;
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-2);
  text-decoration: none; color: inherit;
  overflow: hidden; isolation: isolate;
  transition: transform var(--dur-fast) var(--ease),
              border-color var(--dur-fast), box-shadow var(--dur-fast);
}
/* 커서를 따라다니는 은은한 하이라이트 (home.js 가 --mx/--my 를 갱신) */
.svc-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%),
              color-mix(in srgb, var(--c) 16%, transparent), transparent 70%);
  opacity: 0; transition: opacity var(--dur-fast);
}
/* 카드 상단 액센트 라인 */
.svc-card::after {
  content: ""; position: absolute; inset: 0 0 auto; height: 2px;
  background: linear-gradient(90deg, transparent, var(--c), transparent);
  opacity: .5; transition: opacity var(--dur-fast);
}
.svc-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--c) 45%, var(--line)); }
.svc-card:hover::before { opacity: 1; }
.svc-card:hover::after  { opacity: 1; }

.svc-card.is-soon { opacity: .6; pointer-events: none; }

.svc-top { display: flex; align-items: center; gap: var(--sp-3); }
.svc-ico {
  width: 46px; height: 46px; flex: none;
  display: grid; place-items: center;
  border-radius: 14px;
  font-size: 20px; line-height: 1;
  color: var(--c);
  background: color-mix(in srgb, var(--c) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--c) 30%, transparent);
}
.svc-top .badge { margin-left: auto; }

.svc-card h3 { font-size: var(--fs-lg); }
.svc-tagline { color: var(--c); font-size: var(--fs-sm); font-weight: 600; margin-top: -6px; }
.svc-desc { color: var(--text-dim); font-size: var(--fs-sm); flex: 1; }

.svc-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.svc-tags span {
  font-size: var(--fs-xs); color: var(--text-faint);
  padding: 2px 9px; border-radius: var(--r-full);
  border: 1px solid var(--line);
}

.svc-go {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-sm); font-weight: 600; color: var(--c);
  margin-top: var(--sp-1);
}
.svc-go span { transition: transform var(--dur-fast) var(--ease); }
.svc-card:hover .svc-go span { transform: translateX(5px); }

/* ---------------- 왜 ---------------- */

.why-grid {
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.why { display: flex; flex-direction: column; gap: var(--sp-3); }
.why-ico {
  width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: 12px; font-size: 18px;
  background: color-mix(in srgb, var(--c) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--c) 30%, transparent);
}
.why h3 { font-size: var(--fs-md); }
.why p { font-size: var(--fs-sm); }

/* ---------------- CTA ---------------- */

.cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--sp-5);
  padding: var(--sp-7) var(--sp-6);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background:
    radial-gradient(700px 300px at 12% 0%, rgba(255, 92, 168, .16), transparent 65%),
    radial-gradient(600px 280px at 90% 100%, rgba(124, 92, 255, .18), transparent 65%),
    var(--bg-2);
}
.cta h2 { font-size: var(--fs-xl); }
.cta .lede { font-size: var(--fs-sm); }

/* ---------------- 좁은 화면 ---------------- */

@media (max-width: 760px) {
  .hero { padding-block: var(--sp-7) var(--sp-6); }
  .hero-stats { grid-template-columns: repeat(2, 1fr); margin-top: var(--sp-6); }
  .hero-cta .btn { flex: 1 1 100%; }
  .section { padding-block: var(--sp-7); }
  .cta { padding: var(--sp-6) var(--sp-5); }
}