/* =========================
   index.css (INDEX ONLY)
   ========================= */

/* ================= HERO ================= */
.hero{
  position: relative;
  overflow: hidden;

  margin-top: 14px;
  padding: 26px 22px;

  border:1px solid var(--line-strong);
  border-radius: calc(var(--r) + 6px);
  background: #ffffff;
  box-shadow: var(--shadow);
}

/* 은은한 배경 라이트 */
.hero::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(900px 520px at 20% 0%, rgba(37,99,235,.10), transparent 60%),
    radial-gradient(820px 560px at 85% 15%, rgba(99,102,241,.10), transparent 60%);
  pointer-events:none;
}

.hero-inner{ position: relative; z-index: 1; }

.hero-title{
  margin:0 0 12px;
  font-size: 32px;
  line-height: 1.15;
  letter-spacing: -0.4px;
  font-weight: 900;
}

.hero-sub{
  margin:0 0 10px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}

@media (max-width: 520px){
  .hero{ padding: 20px 16px; }
  .hero-title{ font-size: 26px; }
}

/* ================= ACTIONS(4개 설명 박스) ================= */
.feature-box{
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  padding: 20px 16px;
  background: #ffffff;
  height: 100%;

  /* 왼쪽 포인트 라인 */
  border-left: 4px solid var(--a);

  box-shadow: 0 6px 16px rgba(0,0,0,.04);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.feature-box:hover{
  transform: translateY(-4px);
  border-color: rgba(37,99,235,.45);
  box-shadow: 0 12px 28px rgba(37,99,235,.12);
}

.feature-box h4{
  margin: 0 0 8px;
  font-weight: 900;
}

.feature-box p{
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}