/* main.css - Auto-merged from 7 section files */
/* Do not edit directly - regenerate with merge_section_css.py */

/* ========== 01-hero-section ========== */
/* ==========================================================================
   Hero Section (main / flow-1)
   Figma node: 317:871 — 1920 x 1000
   ========================================================================== */

.hero-section {
  position: relative; /* positioning context for slider + scroll button */
  width: 100%;
  min-height: 100vh; /* fp-on overrides .v-section to exactly 100vh */
  background-color: #001c1a;
  overflow: hidden; /* clip the bg scale/translate animation */
}

/* --------------------------------------------------------------------------
   Slider — two full-bleed slides cross-fade/loop (Stellar-Souls style).
   Background descends from the top while the copy rises from below: the two
   layers cross vertically on every slide change. JS toggles .is-active.
   -------------------------------------------------------------------------- */
.hero-slider {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-slide {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  overflow: hidden; /* clip the 1000px frame + rise-from-bottom masks to the
                       viewport → hero never gains extra scroll height (which
                       made the fullpage panel scroll internally and reveal the
                       dark section bg instead of advancing to the next section) */
  transition: opacity 1.1s ease, visibility 1.1s ease;
}
/* Resting, incoming and outgoing slides are all on-screen; only idle slides
   are hidden. The entering slide reveals via its bg curtain + copy rise — NOT
   an opacity fade — so it snaps to opaque (transition: none). */
.hero-slide.is-active,
.hero-slide.is-entering,
.hero-slide.is-leaving {
  opacity: 1;
  visibility: visible;
}
.hero-slide.is-active {
  z-index: 1; /* resting slide above idle ones */
}
.hero-slide.is-leaving {
  z-index: 1; /* outgoing slide stays under the descending curtain */
}
.hero-slide.is-entering {
  z-index: 2; /* incoming slide (bg curtain + new copy) sits on top */
  transition: none;
}

.hero-section__inner {
  position: relative;
  z-index: 1; /* content sits above the full-bleed bg */
  width: 100%;
  max-width: 120rem; /* 1920px — content stays centered; bg extends full width */
  height: 62.5rem; /* 1000px */
  align-self: center; /* vertically center the 1000px frame in the panel */
}

/* --------------------------------------------------------------------------
   Background layers — the media wrapper descends (cross with the rising copy),
   the inner bg drifts with a slow Ken-Burns zoom. Two elements keep the two
   transforms from clobbering each other.
   -------------------------------------------------------------------------- */
.hero-slide__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden; /* clips the bg at rest — no clip-path layer needed when idle */
}
.hero-section__bg {
  position: absolute;
  inset: -3%; /* slight bleed so the Ken-Burns zoom never reveals edges */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform-origin: center center;
}
.hero-section__bg--1 {
  background-image: url("../assets/images/main/hero-bg.png");
}
.hero-section__bg--2 {
  background-image: url("../assets/images/main/hero3-bg.png");
}

/* --------------------------------------------------------------------------
   Transition (phase 2 of 3): the INCOMING background descends from the top
   edge down like a curtain, covering the outgoing slide. The inner bg keeps a
   slow Ken-Burns drift the whole time it is on screen (entering/active/leaving
   share one declaration so the zoom never restarts mid-transition).
   -------------------------------------------------------------------------- */
.hero-slide.is-entering .hero-slide__media {
  animation: hero-bg-reveal 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.5s both;
  will-change: clip-path; /* 커튼 애니메이션 동안에만 레이어 승격 */
}
.hero-slide.is-entering .hero-section__bg,
.hero-slide.is-active .hero-section__bg,
.hero-slide.is-leaving .hero-section__bg {
  animation: hero-bg-kenburns 8s ease-out both;
  will-change: transform; /* 화면에 보이는 슬라이드에서만 레이어 승격 */
}

@keyframes hero-bg-reveal {
  0% {
    clip-path: inset(0 0 100% 0); /* hidden — revealed from the top edge … */
  }
  100% {
    clip-path: inset(0 0 0% 0); /* … descending down to fully cover */
  }
}
@keyframes hero-bg-kenburns {
  0% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1.22);
  }
}

/* --------------------------------------------------------------------------
   Navbar (317:889) — 1920 x 90, top overlay
   -------------------------------------------------------------------------- */
.hero-navbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 5.625rem; /* 90px */
  padding: 0 3.75rem; /* 0 60px */
  background-color: #ffffff;
  box-shadow: 0 0.625rem 0.9375rem rgba(0, 0, 0, 0.1);
}

.hero-navbar__brand a {
  display: inline-flex;
  align-items: center;
}

.hero-navbar__logo {
  width: 11.3125rem; /* 181px */
  height: 2.125rem; /* 34px */
  display: block;
}

.hero-navbar__nav {
  display: flex;
  align-items: stretch;
  gap: 0.75rem; /* 12px */
  list-style: none;
  margin: 0;
  padding: 0;
  height: 100%;
}

.hero-navbar__link {
  display: flex;
  align-items: center;
}

.hero-navbar__link a {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 0.75rem; /* 0 12px */
  font-family: "Pretendard", sans-serif;
  font-weight: 600;
  font-size: 1rem; /* 16px */
  line-height: 1.25; /* 20/16 */
  color: #475569;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.hero-navbar__link a:hover {
  color: #001c1a;
}

/* 네비바 등장/숨김 모션은 includes/navbar.php(JS) + common.css(.is-hidden)로
   전 페이지 통일 처리한다. (과거 main 전용 navbar-slide-down 애니메이션은
   animation 의 fill-mode:both 가 .is-hidden 의 transform 을 덮어써 메인에서
   숨김이 동작하지 않게 만들었으므로 제거함.) */

/* Hamburger (mobile only) */
.hero-navbar__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 0.3125rem;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.hero-navbar__toggle .hamburger-line {
  display: block;
  width: 1.625rem;
  height: 0.125rem;
  background-color: #475569;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

/* --------------------------------------------------------------------------
   Hero content (Frame 13 — 317:880) at x:96 y:468, 1440 x 516
   -------------------------------------------------------------------------- */
/* No bottom clip here on purpose: the real bottom clip is .hero-section's
   overflow (= the true section/viewport bottom, below the centered 1000px
   frame). That way the copy can rise from the actual bottom of the section
   — past the empty band where the Scroll Down button sits — not just from
   the inner frame's bottom. */
.hero-content {
  position: absolute;
  left: 6rem; /* 96px */
  top: 29.25rem; /* 468px — the mask line */
  width: 90rem; /* 1440px */
  max-width: calc(100% - 12rem);
  z-index: 5;
}

/* Headline and desc each get their OWN clip mask, so each disappears at its
   OWN line (the mask's top edge). The clip is extended far DOWN (padding-bottom)
   so the copy stays visible all the way from the section bottom up; the matching
   negative margin keeps the resting flow layout unchanged. pointer-events:none
   so the tall (transparent) mask never blocks the Scroll Down button below it. */
.hero-content__mask {
  overflow: hidden;
  /* Top/left padding gives the headline's soft drop-shadow room so the clip
     never cuts the glow into a hard-edged band (the photo side, top-left, is
     where it shows). Negative margins cancel it in flow → resting layout
     unchanged. Bottom keeps the long clip for the rise-from-bottom. */
  padding: 4rem 0 100rem 4rem;
  margin: -4rem 0 -100rem -4rem;
  pointer-events: none;
}
/* Per-element start offset — each begins from the true section bottom (viewport
   bottom). The 1000px frame is centred in 100vh, so a slot's distance to the
   viewport bottom is ≈ 50vh ± its own offset from the frame centre. */
.hero-content__mask--headline {
  --rise: calc(50vh + 3rem); /* headline line → viewport bottom */
}
.hero-content__mask--desc {
  margin-top: calc(1.4375rem - 4rem); /* gap below headline, minus the mask's 4rem top padding */
  --rise: calc(50vh - 15rem); /* desc line → viewport bottom */
}

.hero-content__headline {
  margin: 0; /* gap to desc now lives on .hero-content__mask--desc */
  max-width: 68.3125rem; /* 1093px — matches Figma box so it always wraps to 2 lines */
  text-transform: uppercase; /* Figma: EVOLVING for TOMORROW. ("for" stays lowercase below) */
  font-family: "Paperlogy", sans-serif;
  font-weight: 900;
  font-size: 7.5rem; /* 120px */
  line-height: 1.0833; /* 130/120 */
  color: #ffffff;
  text-shadow: 0 0.25rem 3.125rem rgba(0, 28, 26, 1),
    0 0.25rem 0.25rem rgba(0, 0, 0, 0.25);
}

.hero-content__headline--light {
  font-weight: 400;
  text-transform: lowercase;
}

.hero-content__desc {
  margin: 0; /* gap handled by .hero-content__mask--desc */
  max-width: 68.3125rem; /* 1093px */
  font-family: "Pretendard", sans-serif;
  font-weight: 600;
  font-size: 1.375rem; /* 22px */
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: #f9f3e2;
  text-shadow: 0 0.25rem 0.625rem rgba(0, 0, 0, 0.25);
}

/* Transition phase 1 of 3 — copy changes FIRST. Headline and desc roll UP and
   each vanishes above its OWN mask line, staggered (headline leads, desc trails). */
.hero-slide.is-leaving .hero-content__headline {
  animation: hero-copy-exit 0.55s cubic-bezier(0.4, 0, 0.6, 1) 0s both;
}
.hero-slide.is-leaving .hero-content__desc {
  animation: hero-copy-exit 0.55s cubic-bezier(0.4, 0, 0.6, 1) 0.15s both;
}

/* Transition phase 3 of 3 — AFTER the background curtain has descended, each
   line rises from the very bottom into place, staggered (delay 1.4s = 0.5+0.9). */
.hero-slide.is-entering .hero-content__headline {
  animation: hero-copy-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) 1.4s both;
}
.hero-slide.is-entering .hero-content__desc {
  animation: hero-copy-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) 1.58s both;
}

/* First paint — gentle staggered rise (short distance), no leaving/curtain. */
.hero-slide.is-intro .hero-content__mask {
  --rise: 3.5rem;
}
.hero-slide.is-intro .hero-content__headline {
  animation: hero-copy-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
}
.hero-slide.is-intro .hero-content__desc {
  animation: hero-copy-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.42s both;
}

@keyframes hero-copy-exit {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  60% {
    opacity: 1; /* stays solid while travelling, fades only near its line */
  }
  100% {
    opacity: 0;
    transform: translateY(-130%); /* clears its own mask top → masked away */
  }
}
@keyframes hero-copy-rise {
  0% {
    opacity: 0;
    transform: translateY(var(--rise)); /* starts at the very bottom (per line) */
  }
  30% {
    opacity: 1; /* solid for most of the climb */
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --------------------------------------------------------------------------
   Scroll Down button (317:879) — centered, near bottom
   -------------------------------------------------------------------------- */
.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: 2.5625rem; /* 41px */
  transform: translateX(-50%);
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem; /* 8px */
  height: 3rem; /* 48px */
  padding: 0.75rem 1.5rem; /* 12px 24px */
  border: 0.0625rem solid rgba(255, 255, 255, 0.7);
  border-radius: 3rem; /* 48px */
  text-decoration: none;
  transition: background-color 0.2s ease;
  animation: hero-fade-in 0.8s ease 1.1s both;
}

@keyframes hero-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Respect reduced-motion: show final state, no entrance/cross animation */
@media (prefers-reduced-motion: reduce) {
  .hero-scroll,
  .navbar,
  .hero-slide .hero-slide__media,
  .hero-slide .hero-section__bg,
  .hero-slide .hero-content__headline,
  .hero-slide .hero-content__desc {
    animation: none;
  }
  .hero-slide {
    transition: none;
  }
  .hero-slide__media {
    clip-path: inset(0 0 0 0); /* never leave the curtain half-drawn */
  }
}

.hero-scroll:hover {
  background-color: rgba(255, 255, 255, 0.12);
}

.hero-scroll__text {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-size: 0.875rem; /* 14px */
  line-height: 1.5;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

.hero-scroll__icon {
  width: 2.25rem; /* 36px */
  height: 2.25rem;
  display: block;
}

/* ==========================================================================
   Responsive — Tablet (<= 1199px)
   ========================================================================== */
@media (max-width: 1199px) {
  .hero-section__inner {
    height: auto;
    min-height: 100vh;
  }

  .hero-navbar__nav {
    position: absolute;
    top: 5.625rem;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    height: auto;
    background-color: #ffffff;
    box-shadow: 0 0.625rem 0.9375rem rgba(0, 0, 0, 0.1);
    transform: translateY(-150%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }

  .hero-navbar__nav.active {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .hero-navbar__link a {
    height: auto;
    min-height: 44px;
    padding: 0.875rem 5%;
  }

  .hero-navbar__toggle {
    display: flex;
  }

  .hero-navbar__toggle.active .hamburger-line:nth-child(1) {
    transform: translateY(0.4375rem) rotate(45deg);
  }
  .hero-navbar__toggle.active .hamburger-line:nth-child(2) {
    opacity: 0;
  }
  .hero-navbar__toggle.active .hamburger-line:nth-child(3) {
    transform: translateY(-0.4375rem) rotate(-45deg);
  }

  .hero-content {
    position: static;
    width: 100%;
    max-width: none;
    padding: 0 5%;
    padding-top: 12rem;
    padding-bottom: 9rem;
  }

  .hero-content__mask--headline {
    --rise: 13rem; /* shorter screens: rise from the bottom, scaled down */
  }
  .hero-content__mask--desc {
    --rise: 6rem;
  }

  .hero-content__headline {
    font-size: 6vw;
  }

  .hero-content__desc {
    max-width: 100%;
    margin-top: 1.5rem;
  }
}

/* ==========================================================================
   Responsive — Mobile (<= 768px)
   ========================================================================== */
@media (max-width: 768px) {
  .hero-navbar {
    padding: 0 5%;
    height: 4.5rem;
  }

  .hero-navbar__logo {
    width: 8.5rem;
    height: auto;
  }

  .hero-navbar__nav {
    top: 4.5rem;
  }

  .hero-content {
    padding-top: 9rem;
    padding-bottom: 8rem;
  }

  .hero-content__headline {
    font-size: 2.75rem; /* 44px */
    line-height: 1.1;
  }

  .hero-content__desc {
    font-size: 1rem; /* 16px */
    margin-top: 1.25rem;
  }

  .hero-content__desc br {
    display: none;
  }

  .hero-scroll {
    bottom: 1.5rem;
    min-height: 44px;
  }
}

/* ========== 02-regen-hero ========== */
/* ==========================================================================
   Hero Section (main / 02)
   ========================================================================== */

.regen-hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.625rem; /* 10px */
  width: 100%;
  height: 62.5rem; /* 1000px */
  background-color: #eef1f3; /* 이미지 로드 전/전환 중 어두운 배경이 비치지 않도록 밝은 폴백 */
  background-image:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.2) 0%,
      rgba(255, 255, 255, 0.8) 49%,
      rgba(255, 255, 255, 0.2) 98%
    ),
    url("../assets/images/main/hero2-bg.png");
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}

.regen-hero__container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.5rem; /* 24px */
  width: 100%;
  max-width: 90rem; /* 1440px */
  padding: 5.625rem 0; /* 90px 0 */
  border-radius: 3.75rem; /* 60px */
}

/* Badge ------------------------------------------------------------------- */
.regen-hero__badge {
  display: flex;
  align-items: center;
  width: max-content;
  padding: 0.375rem 1.5rem; /* 6px 24px */
  border: 1px solid darkgray;
  border-radius: 9999px;
}

.regen-hero__badge-text {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 0.875rem; /* 14px */
  line-height: 1;
  letter-spacing: 0.0857em; /* 8.57% */
  text-transform: uppercase;
  color: #222222;
}

/* Heading ----------------------------------------------------------------- */
.regen-hero__heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.regen-hero__title {
  margin: 0;
  font-family: "Pretendard", sans-serif;
  font-weight: 700;
  font-size: 5.625rem; /* 90px */
  line-height: 1.2;
  letter-spacing: -0.03em; /* -3% */
  text-align: center;
  color: #222222;
  text-shadow: 0px 4px 100px rgba(255, 255, 255, 0.7);
}

.regen-hero__title--light {
  font-weight: 300;
  letter-spacing: -0.0107em;
}

.regen-hero__title--accent {
  color: #e33345;
}

.regen-hero__title--light-accent {
  font-weight: 300;
  letter-spacing: -0.0107em;
  color: #e33345;
}

/* Description ------------------------------------------------------------- */
.regen-hero__desc-wrap {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  padding-bottom: 0.043rem; /* ~0.695px */
}

.regen-hero__desc {
  margin: 0;
  font-family: "Pretendard", sans-serif;
  font-weight: 400;
  font-size: 1.25rem; /* 20px */
  line-height: 1.4; /* 140% */
  text-align: center;
  color: #454545;
}

/* Actions / Button -------------------------------------------------------- */
.regen-hero__actions {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  gap: 1rem; /* 16px */
  width: 100%;
  padding-top: 1.569rem; /* 25.1px */
}

.regen-hero__button {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: max-content;
  padding: 1.0625rem 2.5rem; /* 17px 40px */
  background-color: #7cc743;
  border-radius: 1.875rem; /* 30px */
  text-decoration: none;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.regen-hero__button:hover {
  background-color: #6fb53a;
  transform: translateY(-2px);
}

.regen-hero__button-text {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 0.875rem; /* 14px */
  line-height: 1;
  letter-spacing: 0.0857em; /* 8.57% */
  text-transform: uppercase;
  text-align: center;
  color: #ffffff;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1199px) {
  .regen-hero__container {
    max-width: 100%;
    padding-inline: 5%;
  }

  .regen-hero__title {
    font-size: clamp(2.5rem, 7vw, 5.625rem);
  }
}

@media (max-width: 768px) {
  .regen-hero {
    height: auto;
    min-height: 100vh;
    padding-block: 4rem;
  }

  .regen-hero__container {
    padding-block: 3rem;
    gap: 1.25rem;
  }

  .regen-hero__title {
    font-size: clamp(2rem, 9vw, 3.5rem);
  }

  .regen-hero__title br {
    display: none;
  }

  .regen-hero__desc {
    font-size: 1rem;
  }

  .regen-hero__desc br {
    display: none;
  }

  .regen-hero__button {
    min-height: 44px;
    width: 100%;
    max-width: 20rem;
  }

  .regen-hero__actions {
    flex-direction: column;
    align-items: center;
  }
}

/* ========== 03-section-1 ========== */
/* ============================================
   Section_1 - Core Technology (main)
   Figma node: 317:916 (1920 x 1000)
   ============================================ */

.sec1-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  background-image: url("../assets/images/main/section-1-bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.sec1-content {
  width: 100%;
  max-width: none; /* no 1920 cap — cards spread full-width on large screens */
  min-height: 62.5rem; /* 1000px */
  padding: 5rem 5rem; /* 80px side gutters so cards keep a margin from the edges */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.sec1-inner {
  display: flex;
  flex-direction: column;
  gap: 5rem; /* 80px */
  width: 100%;
}

/* ---------- Heading block ---------- */
.sec1-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.875rem; /* 30px */
  width: 100%;
}

.sec1-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 1.5rem; /* 6px 24px */
  border: 1px solid #ffffff;
  border-radius: 9999px;
}

.sec1-badge-text {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 0.875rem; /* 14px */
  line-height: 1;
  letter-spacing: 0.075em; /* 8.57% */
  text-transform: uppercase;
  color: #ffffff;
}

.sec1-title {
  font-family: "Pretendard", sans-serif;
  font-weight: 700;
  font-size: 4.375rem; /* 70px */
  letter-spacing: -0.03em;
  text-align: center;
  color: #e33345;
  margin: 0;
  width: 100%;
}

.sec1-title-light {
  font-weight: 300;
  letter-spacing: -0.02em;
  color: #d9d9d9;
}

.sec1-subtitle {
  font-family: "Pretendard", sans-serif;
  font-weight: 400;
  font-size: 1.25rem; /* 20px */
  line-height: 1.4;
  text-align: center;
  color: #ffffff;
  margin: 0;
  width: 100%;
}

/* ---------- Steps ---------- */
.sec1-steps {
  display: flex;
  flex-direction: row;
  width: 100%;
}

.sec1-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.5625rem 0.5625rem; /* 25px 9px */
  text-align: center;
  /* NOTE: Figma sets BACKGROUND_BLUR 20px + 12px radius on these cards, but
     the card has no fill and the bg behind is a smooth gradient, so the blur
     is visually imperceptible. Omitted to avoid backdrop-filter GPU cost. */
}

.sec1-step-icon {
  width: 4.5rem; /* 72px */
  height: 4.5rem;
  border-radius: 9999px;
  background-color: #e33345;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem; /* 24px */
}

.sec1-step-icon img {
  width: 3rem; /* 48px */
  height: 3rem;
  object-fit: contain;
}

.sec1-step-title {
  font-family: "Pretendard", sans-serif;
  font-weight: 700;
  font-size: 3.125rem; /* 50px */
  letter-spacing: -0.02em;
  text-align: center;
  color: #ffffff;
  margin: 0 0 0.75rem; /* 12px */
}

.sec1-step-desc {
  font-family: "Pretendard", sans-serif;
  font-weight: 400;
  font-size: 1.125rem; /* 18px */
  line-height: 1.5;
  text-align: center;
  color: #ffffff;
  margin: 0;
}

/* ============================================
   Tablet (max-width: 1199px)
   ============================================ */
@media (max-width: 1199px) {
  .sec1-content {
    padding: 4rem 5%;
    min-height: auto;
  }

  .sec1-inner {
    gap: 3.5rem;
  }

  .sec1-title {
    font-size: clamp(2.5rem, 6vw, 4.375rem);
  }

  .sec1-step-title {
    font-size: clamp(2rem, 4.5vw, 3.125rem);
  }
}

/* ============================================
   Mobile (max-width: 768px)
   ============================================ */
@media (max-width: 768px) {
  .sec1-content {
    padding: 3rem 5%;
  }

  .sec1-inner {
    gap: 2.5rem;
  }

  .sec1-heading {
    gap: 1.25rem;
  }

  .sec1-subtitle {
    font-size: 1rem;
  }

  /* Column Drop: cards stack vertically */
  .sec1-steps {
    flex-direction: column;
    gap: 1.5rem;
  }

  .sec1-step {
    width: 100%;
    padding: 1.75rem 1rem;
  }

  .sec1-step-title {
    font-size: 2.25rem;
  }

  .sec1-step-desc {
    font-size: 1rem;
  }
}

/* ========== 04-section-2 ========== */
/* ============================================
   Section_2 - New Drug Development (main)
   Desktop base: 1920 x 1000
   ============================================ */

.sec2-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  background-color: #f5f5f5;
  background-image: url("../assets/images/main/section2-bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.sec2-content {
  width: 100%;
  max-width: none; /* >1920: rows go full-width so the media's flat edge meets the screen edge */
  min-height: 1000px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 2.5rem; /* 40px */
  padding: 5rem 0 0; /* 80px top */
  box-sizing: border-box;
}

/* ---------- Heading block ---------- */
.sec2-heading {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem; /* 24px */
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

.sec2-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 1.5rem; /* 6px 24px */
  border: 1px solid rgba(0, 0, 0, 0.6);
  border-radius: 9999px;
}

.sec2-badge-text {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 0.875rem; /* 14px */
  line-height: 1;
  letter-spacing: 0.075em; /* 8.57% */
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.6);
}

.sec2-title {
  width: 100%;
  margin: 0;
  font-family: "Pretendard", sans-serif;
  font-weight: 700;
  font-size: 4.375rem; /* 70px */
  line-height: 1.2;
  letter-spacing: -0.03em;
  text-align: center;
  color: #222222;
}

.sec2-title-light {
  font-weight: 300;
}

.sec2-title-accent {
  color: #e33345;
}

.sec2-subtitle {
  width: 100%;
  margin: 0;
  font-family: "Pretendard", sans-serif;
  font-weight: 400;
  font-size: 1.25rem; /* 20px */
  line-height: 1.4;
  text-align: center;
  color: #454545;
}

/* ---------- Business rows ---------- */
.sec2-rows {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* rows separated (default for 1280–1900) */
}

.sec2-row {
  display: flex;
  align-items: center;
  gap: 3rem; /* 48px */
}

.sec2-row--right {
  justify-content: flex-end;
  align-items: flex-end;
}

/* ============================================
   Full-res only (~1920 design): rows overlap.
   At 1280–1900px they stay separated (above).
   ============================================ */
@media (min-width: 1901px) {
  .sec2-rows {
    justify-content: flex-start;
  }

  .sec2-row--right {
    margin-top: -308px; /* Figma: Row2 overlaps Row1 by 308px vertically */
    position: relative;
    z-index: 1; /* paint above Row1 in the overlap zone */
  }
}

/* ---------- Media (image) ---------- */
.sec2-media {
  position: relative;
  flex: 0 0 auto;
  width: 600px;
  height: 500px;
  overflow: hidden;
}

.sec2-media--left {
  border-radius: 0 600px 600px 0;
  box-shadow: 12px 12px 20px 0 rgba(0, 0, 0, 0.15);
}

.sec2-media--right {
  border-radius: 600px 0 0 600px;
  box-shadow: -10px 12px 20px 0 rgba(0, 0, 0, 0.15);
}

.sec2-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sec2-media-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    0deg,
    rgba(36, 32, 63, 1) 0%,
    rgba(36, 32, 63, 0.4) 50%,
    rgba(36, 32, 63, 0) 100%
  );
  pointer-events: none;
}

/* ---------- Text block ---------- */
.sec2-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.925rem; /* 14.8px */
  padding: 5rem 0; /* 80px */
}

.sec2-text--right {
  align-items: flex-end;
  text-align: right;
}

.sec2-row-title {
  margin: 0;
  font-family: "Pretendard", sans-serif;
  font-weight: 500;
  line-height: 1.4;
}

.sec2-row-title-accent {
  font-weight: 600;
  font-size: 2.5rem; /* 40px */
  line-height: 1.4;
  color: #e33345;
}

.sec2-row-title-main {
  font-weight: 700;
  font-size: 3.125rem; /* 50px */
  letter-spacing: -0.02em;
  color: #454545;
}

.sec2-row-desc {
  margin: 0;
  font-family: "Pretendard", sans-serif;
  font-weight: 400;
  font-size: 1.125rem; /* 18px */
  line-height: 1.5;
  color: #454545;
}

/* ============================================
   Tablet (~1199px)
   ============================================ */
@media (max-width: 1199px) {
  .sec2-content {
    min-height: auto;
    gap: 3rem;
    padding: 4rem 5% 4rem;
  }

  .sec2-title {
    font-size: clamp(2.25rem, 5vw, 4rem);
  }

  .sec2-rows {
    gap: 3rem;
  }

  .sec2-media {
    width: 50%;
    max-width: 600px;
    height: auto;
    aspect-ratio: 6 / 5;
  }

  .sec2-row-title-accent {
    font-size: clamp(1.5rem, 3vw, 2.5rem);
  }

  .sec2-row-title-main {
    font-size: clamp(1.75rem, 3.5vw, 3.125rem);
  }
}

/* ============================================
   Mobile (~768px)
   ============================================ */
@media (max-width: 768px) {
  .sec2-content {
    padding: 3rem 5%;
    gap: 2.5rem;
  }

  .sec2-title {
    font-size: clamp(1.75rem, 8vw, 2.5rem);
  }

  .sec2-subtitle {
    font-size: 1rem;
  }

  .sec2-rows {
    gap: 3rem;
  }

  .sec2-row,
  .sec2-row--right {
    flex-direction: column;
    align-items: stretch;
    gap: 1.5rem;
  }

  /* Image always above text on mobile */
  .sec2-media,
  .sec2-media--left,
  .sec2-media--right {
    order: -1;
    width: 100%;
    max-width: none;
    height: auto;
    aspect-ratio: 6 / 5;
    border-radius: 1rem;
  }

  .sec2-text,
  .sec2-text--left,
  .sec2-text--right {
    padding: 0;
    align-items: flex-start;
    text-align: left;
  }

  .sec2-row-title-accent {
    font-size: 1.5rem;
  }

  .sec2-row-title-main {
    font-size: 1.75rem;
  }

  .sec2-row-desc {
    font-size: 1rem;
  }

  .sec2-row-desc br {
    display: none;
  }
}

/* ========== 05-section-3 ========== */
/* ============================================
   Section_3 - Latest News (main)
   Desktop base: 1920 x 1000
   ============================================ */

.sec3-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  background-color: #ffffff;
}

.sec3-content {
  width: 80rem; /* 1280px — 콘텐츠 고정 */
  min-width: 80rem; /* 브라우저가 줄어도 콘텐츠는 1280px 유지(좌우 마진만 사라짐) */
  margin: 0 auto; /* 남는 좌우 공간은 auto 마진으로 */
  min-height: 1000px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0;
}

/* ---------- Heading block ---------- */
.sec3-heading {
  width: 100%;
  max-width: 80rem; /* 1280px */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem; /* 24px */
  margin-bottom: 3rem; /* 48px gap to list */
}

.sec3-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 1.5rem; /* 6px 24px */
  border: 1px solid #222222;
  border-radius: 9999px;
}

.sec3-badge-text {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 0.875rem; /* 14px */
  line-height: 1;
  letter-spacing: 0.0857em; /* 8.57% */
  text-transform: uppercase;
  color: #222222;
}

.sec3-title {
  width: 100%;
  text-align: center;
  font-family: "Pretendard", sans-serif;
  font-weight: 700;
  font-size: 4.375rem; /* 70px */
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: #222222;
  margin: 0;
}

.sec3-title-light {
  font-weight: 300;
  letter-spacing: -0.02em;
}

.sec3-title-accent {
  color: #e33345;
}

.sec3-subtitle {
  width: 100%;
  text-align: center;
  font-family: "Pretendard", sans-serif;
  font-weight: 400;
  font-size: 1.25rem; /* 20px */
  line-height: 1.4;
  color: rgba(0, 0, 0, 0.6);
  margin: 0;
}

/* ---------- News list ---------- */
.sec3-list {
  width: 100%;
  max-width: 80rem; /* 1280px */
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(0, 0, 0, 0.15);
}

.sec3-card {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

/* Media (left, fixed 270px) */
.sec3-card-media {
  flex: 0 0 16.875rem; /* 270px */
  width: 16.875rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #c2c6d8;
  overflow: hidden;
  text-decoration: none;
}

.sec3-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sec3-card-media--logo {
  background-color: transparent;
}

.sec3-card-media--logo img {
  width: 11.3125rem; /* 181px */
  height: auto;
  object-fit: contain;
}

/* Body (right, fill) */
.sec3-card-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem; /* 12px */
  padding: 2rem 3rem; /* 32px 48px */
  box-sizing: border-box;
}

.sec3-card-title {
  font-family: "Pretendard", sans-serif;
  font-weight: 700;
  font-size: 1.5rem; /* 24px */
  line-height: 1.3;
  color: #141b2c;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sec3-card-desc-wrap {
  padding-top: 0.25rem; /* 4px */
}

.sec3-card-desc {
  font-family: "Pretendard", sans-serif;
  font-weight: 400;
  font-size: 1.125rem; /* 18px */
  line-height: 1.5;
  color: #424656;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sec3-card-time {
  padding: 1.25rem 0; /* 20px */
}

.sec3-card-time time {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 0.875rem; /* 14px */
  line-height: 1;
  letter-spacing: 0.0857em;
  text-transform: uppercase;
  color: #727687;
}

/* ---------- More button ---------- */
.sec3-more {
  align-self: flex-end; /* 콘텐츠 우측 끝에 정렬 */
  height: 3rem; /* 48px */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem; /* 8px */
  padding: 0 1.5rem; /* 0 24px */
  border-radius: 48px;
  text-decoration: none;
  box-sizing: border-box;
}

.sec3-more-text {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 0.875rem; /* 14px */
  line-height: 1;
  letter-spacing: 0.0857em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.6);
}

.sec3-more-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem; /* 16px */
  height: 1rem;
}

.sec3-more-icon img {
  width: 1rem;
  height: 1rem;
  display: block;
}

/* ============================================
   Responsive - Tablet
   ============================================ */
@media (max-width: 1199px) {
  .sec3-content {
    /* 태블릿 이하: 고정폭 해제 → 유동형 복귀 */
    width: 100%;
    min-width: 0;
    max-width: 1920px;
    margin: 0;
    min-height: auto;
    padding: 5rem 5%;
  }

  .sec3-title {
    font-size: clamp(2.5rem, 6vw, 4.375rem);
  }

  .sec3-more {
    position: static;
    margin-top: 2rem;
    align-self: flex-end;
  }
}

/* ============================================
   Responsive - Mobile
   ============================================ */
@media (max-width: 768px) {
  .sec3-content {
    padding: 3.5rem 5%;
  }

  .sec3-heading {
    margin-bottom: 2rem;
  }

  .sec3-title {
    font-size: clamp(1.75rem, 8vw, 2.5rem);
  }

  .sec3-subtitle {
    font-size: 1rem;
  }

  /* Column drop: image stacks above text */
  .sec3-card {
    flex-direction: column;
  }

  .sec3-card-media {
    flex: none;
    width: 100%;
    aspect-ratio: 16 / 9;
  }

  .sec3-card-media--logo {
    aspect-ratio: 16 / 6;
  }

  .sec3-card-body {
    padding: 1.5rem 1.25rem;
  }

  .sec3-card-title {
    font-size: 1.25rem; /* 20px */
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .sec3-card-desc {
    font-size: 1rem; /* 16px */
  }

  .sec3-more {
    margin-top: 1.5rem;
    min-height: 44px;
  }
}

/* ========== 06-section-4 ========== */
/* ============================================
   Section_4 - New Drug Development (main)
   Desktop base: 1920 x 1000
   ============================================ */

.sec4-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  background-color: #000000;
  /* full-bleed bg: extends beyond 1920 instead of leaving black side bands */
  background-image: url("../assets/images/main/section-4-bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.sec4-content {
  position: relative;
  width: 100%;
  max-width: 1920px;
  height: 62.5rem; /* 1000px */
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

/* Inner stack: heading + cards (gap 80px) */
.sec4-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5rem; /* 80px */
  box-sizing: border-box;
  padding: 0 5rem;
}

/* ---------- Heading block ---------- */
.sec4-heading {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem; /* 24px */
}

.sec4-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 1.5rem; /* 6px 24px */
  border: 1px solid #ffffff;
  border-radius: 9999px;
}

.sec4-badge-text {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 0.875rem; /* 14px */
  line-height: 1;
  letter-spacing: 0.0857em; /* 8.57% */
  text-transform: uppercase;
  color: #ffffff;
}

.sec4-title {
  margin: 0;
  text-align: center;
  font-family: "Pretendard", sans-serif;
  font-weight: 700;
  font-size: 4.375rem; /* 70px */
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: #ffffff;
}

.sec4-title-light {
  font-weight: 300;
  letter-spacing: -0.02em;
}

.sec4-subtitle {
  margin: 0;
  text-align: center;
  font-family: "Pretendard", sans-serif;
  font-weight: 400;
  font-size: 1.25rem; /* 20px */
  line-height: 1.4;
  color: #ffffff;
}

/* ---------- Cards area ---------- */
.sec4-card-area {
  width: 80rem; /* 1280px */
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.875rem; /* 30px */
}

.sec4-list {
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0 5rem; /* 0 80px */
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.sec4-item {
  flex: 0 0 18.75rem; /* 300px */
  width: 18.75rem;
  height: 18.75rem; /* 300px */
  box-sizing: border-box;
  padding: 0.9375rem 1.5rem; /* 15px 24px */
  background-color: #ffffff;
  border-radius: 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem; /* 16px */
}

.sec4-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem; /* 64px */
  height: 4rem;
}

.sec4-item-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.sec4-item-text {
  margin: 0;
  text-align: center;
  font-family: "Pretendard", sans-serif;
  font-weight: 700;
  font-size: 1.5rem; /* 24px */
  line-height: 1.3;
  color: #454545;
}

.sec4-caption {
  margin: 0;
  text-align: left;
  font-family: "Pretendard", sans-serif;
  font-weight: 700;
  font-size: 3.125rem; /* 50px */
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #ffffff;
}

/* ============================================
   Responsive - Tablet
   ============================================ */
@media (max-width: 1199px) {
  .sec4-content {
    height: auto;
    min-height: 50rem;
    padding: 5rem 0;
  }

  .sec4-container {
    gap: 3.5rem;
    padding: 0 5%;
  }

  .sec4-title {
    font-size: clamp(2.5rem, 6vw, 4.375rem);
  }

  .sec4-card-area {
    width: 100%;
  }

  .sec4-list {
    padding: 0;
    gap: 1.5rem;
    flex-wrap: wrap;
    justify-content: center;
  }

  .sec4-item {
    flex: 0 0 15rem;
    width: 15rem;
    height: 15rem;
  }

  .sec4-caption {
    text-align: center;
    font-size: clamp(2rem, 4vw, 3.125rem);
  }
}

/* ============================================
   Responsive - Mobile
   ============================================ */
@media (max-width: 768px) {
  .sec4-content {
    padding: 3.5rem 0;
  }

  .sec4-container {
    gap: 2.5rem;
  }

  .sec4-title {
    font-size: clamp(1.75rem, 8vw, 2.5rem);
  }

  .sec4-subtitle {
    font-size: 1rem;
  }

  .sec4-subtitle br {
    display: none;
  }

  /* Column drop: cards stack vertically */
  .sec4-list {
    flex-direction: column;
    align-items: center;
  }

  .sec4-item {
    flex: none;
    width: 13.75rem;
    height: 13.75rem;
  }

  .sec4-item-text {
    font-size: 1.25rem;
  }

  .sec4-caption {
    font-size: 1.75rem;
  }
}

/* ========== 07-cta-section ========== */
/* ===== CTA Section ===== */
.cta-section {
  position: relative; /* 일러스트 레이어 기준 */
  overflow: hidden; /* 올라오는 동안 넘치는 부분 클립 */
  width: 100%;
  height: 40.125rem; /* 642px */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 4.9375rem 0 5rem; /* 79px 0 80px */
  box-sizing: border-box;
}

/* 사람 일러스트 배경 레이어 — 진입 시 아래에서 위로 쑥(translateY 60px→0).
   위쪽 60px 여유를 둬 올라오는 동안 빈틈이 보이지 않게 함. (1.md Section 7) */
.cta-section__bg {
  position: absolute;
  left: 0;
  right: 0;
  top: -3.75rem;  /* -60px */
  bottom: 0;
  z-index: 0;
  background-image: url("../assets/images/main/cta-bg.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
/* 풀페이지(데스크탑)에서만 진입 모션 — 모바일/JS 미동작 시엔 정상 위치로 노출 */
body.fp-on .cta-section__bg {
  transform: translateY(3.75rem); /* 시작: 60px 아래 */
  transition: transform 1s cubic-bezier(0.25, 1, 0.5, 1);
  transition-delay: calc(300ms * 2 + 0.55s); /* 카피 등장 후, 섹션이 자리잡은 뒤 상승 */
}
body.fp-on .v-section.active .cta-section__bg {
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  body.fp-on .cta-section__bg { transition: none; transform: translateY(0); }
}

.cta-section__container {
  position: relative;
  z-index: 1; /* 일러스트 배경 레이어 위로 텍스트 노출 */
  width: 80rem; /* 1280px */
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4375rem; /* 23px */
}

/* Heading */
.cta-section__heading {
  width: 100%;
}

.cta-section__title {
  margin: 0;
  width: 100%;
  font-family: "Pretendard", sans-serif;
  font-weight: 700;
  font-size: 4.375rem; /* 70px */
  letter-spacing: -0.03em;
  color: #ffffff;
  text-align: center;
}

/* Subtitle */
.cta-section__subtitle-box {
  width: 100%;
  padding-bottom: 1.611875rem; /* 25.79px */
  opacity: 0.8;
}

.cta-section__subtitle {
  margin: 0;
  width: 100%;
  font-family: "Pretendard", sans-serif;
  font-weight: 400;
  font-size: 1.25rem; /* 20px */
  line-height: 1.4; /* 140% */
  color: #ffffff;
  text-align: center;
}

/* Button */
.cta-section__button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 1.25rem 3rem; /* 20px 48px */
  background-color: #ffffff;
  border-radius: 5rem; /* 80px */
  box-shadow:
    0px 8px 10px -6px rgba(0, 0, 0, 0.1),
    0px 20px 25px -5px rgba(0, 0, 0, 0.1);
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 0.875rem; /* 14px */
  line-height: 1; /* 14px */
  letter-spacing: 0.0857em;
  text-transform: uppercase;
  color: #09ad76;
  text-decoration: none;
  white-space: nowrap;
}

.cta-section__button:hover {
  opacity: 0.9;
}

/* ===== Tablet ===== */
@media (max-width: 1199px) {
  .cta-section {
    height: auto;
    min-height: 32rem;
    padding: 4rem 5%;
  }

  .cta-section__container {
    width: 100%;
  }

  .cta-section__title {
    font-size: clamp(2.25rem, 5vw, 4.375rem);
  }
}

/* ===== Mobile ===== */
@media (max-width: 768px) {
  .cta-section {
    min-height: 24rem;
    padding: 3rem 5%;
  }

  .cta-section__title {
    font-size: clamp(1.75rem, 7vw, 2.5rem);
  }

  .cta-section__subtitle {
    font-size: 1rem;
  }

  .cta-section__subtitle-box {
    padding-bottom: 1rem;
  }

  .cta-section__button {
    min-height: 44px;
    padding: 1rem 2rem;
    box-sizing: border-box;
  }
}