/* 랜딩 — 히어로, 카드 그리드, 프로세스, 안심 카피 */
.hero {
  position: relative;
  padding: var(--space-16) 0 var(--space-12);
  overflow: hidden;
}
.hero__inner {
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: 0 var(--space-6);
  text-align: center;
  position: relative;
  z-index: 1;
}
.hero__eye {
  display: inline-flex; gap: 8px; align-items: center;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: var(--surface-glass);
  border: 1px solid var(--line);
  font-size: var(--fz-12);
  color: var(--ink-mute);
  font-weight: 500;
  margin-bottom: var(--space-5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.hero__eye-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--brand-copper);
  box-shadow: 0 0 0 3px rgba(31,58,138,0.18);
}
.hero__title { margin: 0; }
.hero__title-2 { display: block; margin-top: 8px; color: var(--ink-soft); font-weight: 500; font-size: clamp(18px, 2.4vw, 24px); font-family: var(--font-sans); letter-spacing: -0.005em; line-height: 1.4; }
.hero__lede {
  margin: var(--space-5) auto 0;
  max-width: 56ch;
  color: var(--ink-soft);
  font-size: var(--fz-18);
  line-height: 1.75;
  font-weight: 500;
}
.hero__cta {
  display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap;
  margin-top: var(--space-8);
}
.hero__cta .btn { min-width: 180px; }
.hero__chips {
  list-style: none; padding: 0; margin: var(--space-8) auto 0;
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  max-width: 560px;
}
.hero__chips li {
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: var(--surface-glass);
  font-size: var(--fz-13);
  color: var(--ink-mute);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* hero bg ornaments */
.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(60px);
  opacity: 0.55;
}
.hero__bg::before {
  width: 380px; height: 380px;
  top: 8%; left: -90px;
  background: radial-gradient(circle, rgba(31,58,138,0.18), transparent 70%);
}
.hero__bg::after {
  width: 460px; height: 460px;
  bottom: -120px; right: -120px;
  background: radial-gradient(circle, rgba(31,58,138,0.20), transparent 70%);
}
:root[data-theme="dark"] .hero__bg::before {
  background: radial-gradient(circle, rgba(138,180,248,0.22), transparent 70%);
}
:root[data-theme="dark"] .hero__bg::after {
  background: radial-gradient(circle, rgba(46,80,181,0.18), transparent 70%);
}

/* Process */
.process {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: var(--space-4);
  align-items: stretch;
  max-width: 980px;
  margin: 0 auto;
}
.process__step {
  padding: var(--space-6);
  text-align: center;
  display: flex; flex-direction: column; gap: var(--space-2);
}
.process__num {
  display: inline-grid; place-items: center;
  width: 36px; height: 36px;
  margin: 0 auto;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-indigo), var(--brand-copper));
  color: #fff;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--fz-14);
}
.process__title { margin: 8px 0 0; }
.process__desc { color: var(--ink-soft); font-size: var(--fz-14); line-height: 1.65; }
.process__arrow {
  display: grid; place-items: center;
  color: var(--brand-copper);
  opacity: 0.6;
}
:root[data-theme="dark"] .process__arrow { color: var(--accent-soft); }
.process__arrow svg { width: 36px; height: 24px; }

@media (max-width: 720px) {
  .process { grid-template-columns: 1fr; }
  .process__arrow { transform: rotate(90deg); margin: 6px auto; }
}

/* Cards grid (4 features) */
.feat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
}
@media (max-width: 1024px) { .feat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .feat-grid { grid-template-columns: 1fr; } }

.feat-card {
  padding: var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-3);
  text-decoration: none !important;
  color: var(--ink);
  min-height: 220px;
}
.feat-card[aria-disabled="true"] {
  opacity: 0.65;
  pointer-events: none;
}
.feat-card__icon {
  width: 44px; height: 44px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(31,58,138,0.10), rgba(31,58,138,0.16));
  display: grid; place-items: center;
  font-family: var(--font-serif); font-size: 22px; font-weight: 600;
  color: var(--accent);
}
:root[data-theme="dark"] .feat-card__icon {
  background: linear-gradient(135deg, rgba(138,180,248,0.16), rgba(46,80,181,0.18));
  color: var(--accent);
}
.feat-card__title { margin: 0; }
.feat-card__desc { color: var(--ink-soft); font-size: var(--fz-14); line-height: 1.65; flex: 1; }
.feat-card__more {
  font-size: var(--fz-13);
  color: var(--accent);
  font-weight: 600;
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: auto;
}

/* Reassure block */
.reassure-block {
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
  padding: var(--space-10) var(--space-6);
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, rgba(31,58,138,0.06), rgba(31,58,138,0.10));
  border: 1px solid var(--line);
}
:root[data-theme="dark"] .reassure-block {
  background: linear-gradient(135deg, rgba(138,180,248,0.08), rgba(46,80,181,0.10));
}
.reassure-block .quote {
  font-family: var(--font-serif);
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.45;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-4);
}
.reassure-block .quote .copper { font-style: italic; }
.reassure-block .small { color: var(--ink-soft); font-size: var(--fz-14); }