/* 무료 3종 · 클로징 CTA — 문의 전환을 위해 새로 얹은 부분만 여기 둔다.
 *
 * # 왜 별도 파일인가
 * style.css 는 3,000줄 가까이 되고 스크롤 애니메이션과 얽혀 있다. 거기에
 * 손을 대면 무엇이 깨지는지 알기 어렵다. 새로 더하는 것은 새 파일에 두고
 * 기존 규칙은 건드리지 않는다 — 되돌릴 때도 이 파일만 빼면 된다.
 *
 * # 색은 사이트의 것을 그대로 쓴다
 * 참고 이미지는 크림색+주황이지만, 이 사이트의 정체성은 검정(#040607)과
 * 파랑(#00a8ff)이다. 이미지에서 가져온 것은 **구조와 문구**이지 색이
 * 아니다. 색까지 바꾸면 헤더·푸터·기존 섹션과 따로 논다.
 */

:root {
  --offer-ink: #111212;
  --offer-dim: #5b6166;
  --offer-line: #e4e7ea;
}

/* 히어로 위에 얹는 후킹 문구 --------------------------------------- */

.visual-kicker {
  display: inline-block;
  font-size: var(--font-size-15);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--point-color);
  margin-bottom: 1.2rem;
}

.visual-text .visual-badge {
  display: inline-block;
  margin-top: 2rem;
  padding: 0.7rem 1.6rem;
  background: var(--point-color);
  color: #04202e;
  font-size: var(--font-size-2);
  font-weight: 800;
  border-radius: 999px;
}

.visual-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 2rem;
  margin-left: 1rem;
  padding: 0.75rem 1.8rem;
  border: 2px solid var(--white-color);
  border-radius: 999px;
  background: transparent;
  color: var(--white-color);
  font-size: var(--font-size-2);
  font-weight: 700;
  cursor: pointer;
}
.visual-cta:hover { background: var(--white-color); color: #040607; }

/* 사이가 너무 멀면 후킹이 문의까지 못 간다. 장식 구간을 줄인다.
 * (섹션을 지우지 않고 여백만 줄인다 — 지우는 것은 되돌리기 어렵다) */
.intro-text { padding: 120px 0; }

/* 무료 3종 --------------------------------------------------------- */

/* 앞 절(포트폴리오)의 절대배치 자식이 자기 박스 밖으로 넘쳐 나와 다음 절을
 * 덮는다(실측: 박스는 안 겹치는데 화면에서는 파란 블록이 클로징 절 위에
 * 그려졌다). 원래 그 자리에 있던 #contact 는 position:relative 라 위로
 * 그려졌던 것이다 — 새로 넣는 절도 같은 조건을 갖춰야 한다. */
.offer, .closing {
  position: relative;
  z-index: 1;
}

.offer {
  padding: 9vw 5vw;
  background: #fff;
  color: var(--offer-ink);
}
.offer__head { margin-bottom: 5vw; }
.offer__kicker {
  font-size: var(--font-size-15);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--point-color);
}
.offer h2 {
  font-size: var(--font-size-55);
  font-weight: 800;
  line-height: 1.15;
  word-break: keep-all;   /* 한글은 이게 없으면 단어 중간에서 잘린다 */
  margin: 1.5rem 0;
}
.offer__lead {
  font-size: var(--font-size-2);
  color: var(--offer-dim);
  word-break: keep-all;
  max-width: 46ch;
}

.offer__list { border-top: 2px solid var(--offer-ink); }

.offer__item {
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: 2rem;
  align-items: start;
  padding: 3.2rem 0;
  border-bottom: 1px solid var(--offer-line);
}
.offer__no {
  font-size: var(--font-size-4);
  font-weight: 800;
  color: var(--point-color);
  line-height: 1;
}
.offer__item h3 {
  font-size: var(--font-size-35);
  font-weight: 800;
  line-height: 1.25;
  word-break: keep-all;
  margin-bottom: 1rem;
}
.offer__item p {
  font-size: var(--font-size-175);
  color: var(--offer-dim);
  line-height: 1.6;
  word-break: keep-all;
  max-width: 52ch;
}
.offer__proof {
  display: inline-block;
  margin-top: 1.2rem;
  font-size: var(--font-size-15);
  font-weight: 700;
  color: var(--offer-ink);
  border-bottom: 2px solid var(--point-color);
  padding-bottom: 0.2rem;
}

/* 무료 3종 절 안의 CTA. 여기가 관심이 가장 높은 지점인데 문의 폼은 열한
 * 화면 아래에 있다(실측). 그 거리를 건너뛸 수단을 절 안에 둔다. */
.offer__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 3.5rem;
  padding: 1.1rem 3rem;
  border: none;
  border-radius: 999px;
  background: var(--point-bg);
  color: var(--white-color);
  font-size: var(--font-size-2);
  font-weight: 800;
  cursor: pointer;
}
.offer__cta:hover { background: var(--point-color); color: #04202e; }

/* 클로징 CTA ------------------------------------------------------- */

.closing {
  padding: 9vw 5vw;
  background: var(--point-bg);
  color: var(--white-color);
}
.closing h2 {
  font-size: var(--font-size-55);
  font-weight: 800;
  line-height: 1.2;
  word-break: keep-all;
  margin-bottom: 2rem;
}
.closing p {
  font-size: var(--font-size-2);
  color: #b9c2c8;
  word-break: keep-all;
  max-width: 52ch;
  line-height: 1.6;
}
.closing__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 3rem;
  padding: 1.1rem 3rem;
  border: none;
  border-radius: 999px;
  background: var(--point-color);
  color: #04202e;
  font-size: var(--font-size-25);
  font-weight: 800;
  cursor: pointer;
}
.closing__btn:hover { filter: brightness(1.1); }
.closing__note {
  margin-top: 2.5rem;
  font-size: var(--font-size-15);
  color: #79838a;
  word-break: keep-all;
  max-width: 60ch;
}

/* 문의 폼 안내 ----------------------------------------------------- */

.contact__free-note {
  margin-top: 1.5rem;
  padding: 1.2rem 1.5rem;
  background: #f2f7fb;
  border-left: 3px solid var(--point-color);
  font-size: var(--font-size-15);
  color: var(--offer-dim);
  word-break: keep-all;
  line-height: 1.6;
}

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

@media (max-width: 998px) {
  .offer, .closing { padding: 14vw 6vw; }
  .offer h2, .closing h2 { font-size: var(--font-size-4); }
  .offer__item {
    grid-template-columns: 1fr;
    gap: 0.8rem;
    padding: 2.6rem 0;
  }
  .offer__no { font-size: var(--font-size-3); }
  .offer__item h3 { font-size: var(--font-size-3); }
  .visual-cta { margin-left: 0; display: flex; width: fit-content; }
  .intro-text { padding: 80px 0; }
}