* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: clip;        /* reveal translateX 등으로 인한 가로 오버플로우 차단 (clip이라 sticky 유지) */
}

body {
  font-family: 'Paperlogy', 'Pretendard', -apple-system, 'Malgun Gothic', sans-serif;
  background: #fff;
  color: var(--black);
  word-break: keep-all;
}

img {
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

ul {
  list-style: none;
}

section,
footer {
  padding-left: var(--side-pad);
  padding-right: var(--side-pad);
}

/* 공통 대형 헤딩 (80px Black) */
.heading-xl {
  font-size: 80px;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.4px;
  text-transform: uppercase;
  color: var(--black);
}

.heading-xl--white {
  color: #fff;
}

/* 헤딩 내 퍼플 강조 (예: HOW <IT> WORKS) */
.heading-accent {
  color: #6a50f0;
}

/* ---------- 스크롤 리빌 공통 ----------
   .js 게이트: 스크립트가 실패해도 콘텐츠가 숨겨진 채 남지 않는다. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.7s var(--ease-out),
    transform 0.7s var(--ease-out);
  transition-delay: var(--reveal-delay, 0s);
}

/* 방향 변형: 오른쪽에서 밀려 들어온다 */
.js [data-reveal='right'] {
  transform: translateX(48px);
}

.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(32px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   NAVBAR
   ========================================================================== */
.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--navbar-h);
  padding: 0 var(--side-pad);
  background: #fff;
}

.navbar__logo {
  font-size: 32px;
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: -0.16px;
  text-transform: uppercase;
}

.navbar__menu {
  display: flex;
  align-items: center;
  gap: 32px;
}

.navbar__menu a {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.6;
  text-transform: uppercase;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}

.navbar__menu a:not(.navbar__cta):hover {
  opacity: 0.55;
}

.navbar__menu .navbar__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 32px;
  background: #6a50f0;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  border-radius: 6px;
  transition: background-color 0.2s ease;
}

.navbar__cta:hover {
  background: #5a41e0;
}

/* ==========================================================================
   HERO — 풀블리드 배경 영상 위 중앙 텍스트 (Figma: hero_video)
   ========================================================================== */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  height: calc(100vh - 80px); /* 스티키 네비바(80px) 아래로 한 화면을 꽉 채운다 */
  min-height: 720px;
  padding: 0; /* 배경 영상을 화면 끝까지: 공통 section 좌우 패딩 해제 */
  background: #000; /* 상단 검정 영역용 — poster 는 <video poster> + reduced-motion 폴백에서 사용 */
  overflow: hidden;
  isolation: isolate;
}

/* 배경 영상: 히어로 전체를 덮는다 (poster = 로드 전/모션최소화 시 정지 이미지) */
.hero__video {
  position: absolute;
  /* 영상을 아래로 내려 상단에 검정 영역을 노출하고, 넘친 하단은 overflow:hidden 으로 잘라낸다.
     주의 1: transform(translateY) 로 내리면 overlay 의 top(레이아웃)과 픽셀 라운딩이 달라
     OS 배율 환경에서 영상 윗변이 그라데이션 위로 1px 삐져나온다 — 반드시 top 으로 내릴 것.
     주의 2: video 는 대체 요소라 inset 만으론 늘어나지 않는다 — width/height 명시 필수 */
  top: 150px; /* overlay top:150px 과 동일 기준·동일 값 */
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100%; /* hero 높이만큼 — 하단 150px 초과분은 overflow:hidden 으로 클립 */
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}

/* 상단 다크 그라데이션 — 밝은 프레임에서도 흰 텍스트 가독성 확보 */
.hero__overlay {
  position: absolute;
  top: 150px; /* 영상 시작 지점(.hero__video translateY)과 동일하게 맞춤 */
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  pointer-events: none;
  /* Figma: Rectangle 161123870 — 상단 검정 → 하단 투명 */
  background: linear-gradient(
    180deg,
    #000000 0%,
    rgba(0, 0, 0, 0.807692) 28.85%,
    rgba(0, 0, 0, 0) 100%
  );
}

.hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 66px 24px 0; /* 텍스트를 상단 1/3 지점에 배치 (기준 96px에서 30px 위로) */
}

/* 최초 로드 시 텍스트 순차 등장 */
.hero__title,
.hero__sub,
.hero__powered {
  animation: fade-up 0.9s var(--ease-out) both;
}

.hero__sub {
  animation-delay: 0.15s;
}

.hero__powered {
  animation-delay: 0.28s;
}

.hero__title {
  font-size: 100px;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -2px;
  text-align: center;
  color: #fff;
}

/* 타이틀 강조 — "그레잇!" 퍼플 포인트 */
.hero__accent {
  color: #6a50f0;
}

.hero__sub {
  padding: 8px 12px 0;
  font-size: 28px;
  font-weight: 500;
  line-height: 1.55;
  text-align: center;
  color: #fff;
}

.hero__powered {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding-top: 10px;
}

.hero__powered span {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  color: #fff;
}

/* ==========================================================================
   SECTION 0 — 브랜드 네이밍 스토리 (사이드형 슬라이드, 피그마 442:2854)
   지속 워드마크: 모든 세그먼트(Growth·그로스·“ ”·< >·I[NTELLIGEN]T·잇·다)가 항상
   DOM에 있고, 섹션의 data-state 에 따라 폭(grid 0fr↔1fr)·크기·색이 전환되며
   글자들이 재조립된다. .naming.typing = 인트로 타자 모드(스텝 삭제/타이핑).
   상태: base(그로스잇) → growth → it → tech → intel → connect → growth → …
   컴포넌트 전용 스케일은 --nm-* 변수로 묶고 아래 자체 미디어쿼리에서 축소한다.
   ========================================================================== */
.naming {
  --nm-big: 180px;        /* 워드마크 글자 (딤 0.556em · 따옴표 0.444em) */
  --nm-label: 45px;       /* 하단 라벨 */
  --nm-cap: 24px;         /* 하단 캡션 */
  --nm-obj: 234px;        /* 오브젝트 높이 (Figma 288×234) */
  --nm-gap-word: 100px;   /* 헤드라인 → 워드마크 */
  --nm-gap-panels: 90px;  /* 워드마크 → 하단 행 */
  --nm-purple: #6a50f0;
  --nm-dim: rgba(255, 255, 255, 0.25);
  position: relative;
  padding: 120px var(--side-pad) 110px;
  background: #000;
  text-align: center;
  overflow: hidden;
}

.naming__sub {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.4;
  color: #a7a7a7;
}

.naming__headline {
  margin-top: 14px;
  line-height: 1.05;
}

/* ---------- 워드마크 ---------- */
.nm-word {
  display: flex;
  align-items: baseline;
  justify-content: center;
  margin-top: var(--nm-gap-word);
  font-size: var(--nm-big);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.005em;
  white-space: nowrap;
  user-select: none;
  transition: font-size 0.6s var(--ease-out); /* intel 상태 축소가 부드럽게 */
}

.nm-word .seg {
  display: inline-grid;
  grid-template-columns: 0fr;
  transition:
    grid-template-columns 0.6s var(--ease-out),
    font-size 0.75s var(--ease-out),
    letter-spacing 0.75s var(--ease-out),
    color 0.6s var(--ease-out);
}

.nm-word .seg > i {
  display: block;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-style: normal;
}

.nm-word .seg.open { grid-template-columns: 1fr; }

.nm-word .lt {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.18em);
  transition:
    opacity 0.22s var(--ease-out),
    transform 0.26s var(--ease-out),
    color 0.6s var(--ease-out);
  /* 지워질 때: 오른쪽 글자부터 역순 (--n = 세그먼트 글자 수) */
  transition-delay: calc((var(--n, 1) - 1 - var(--i, 0)) * 0.045s);
}

.nm-word .seg.open .lt {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.3s var(--ease-out),
    transform 0.36s var(--ease-out),
    color 0.6s var(--ease-out);
  /* 쳐질 때: 왼쪽 글자부터 스태거 */
  transition-delay: calc(0.16s + var(--i, 0) * 0.055s);
}

/* 중첩 세그먼트(NTELLIGEN)는 I 다음 순서로 이어 쳐진다 */
.nm-word .s-mid.open .lt { transition-delay: calc(0.16s + (var(--i, 0) + 1) * 0.055s); }

/* intel 상태에서 마지막 T는 NTELLIGEN 뒤에 찍힌다 */
.naming[data-state='intel'] .s-core.open .lt-t { transition-delay: calc(0.16s + 11 * 0.055s); }

/* --- 세그먼트별 기본 모습 --- */
.nm-word .s-en { color: var(--nm-purple); }                  /* Growth */
.nm-word .s-kr { font-size: 0.556em; color: var(--nm-dim); } /* 그로스 */

.nm-word .s-q {                                              /* “ ” — 캡하이트 상단 */
  align-self: flex-start;
  font-size: 0.444em;
  color: #fff;
}

.nm-word .s-ab {                                             /* < > — 세로 중앙 */
  align-self: center;
  font-size: 0.556em;
  color: #fff;
}

.nm-word .s-core { color: var(--nm-purple); }                /* I···T 코어 */
.nm-word .s-core .c-w { color: #fff; }                       /* NTELLIGEN 중간 글자 */
.nm-word .s-mid { display: inline-grid; }
.nm-word .s-core > i { perspective: 700px; }

.nm-word .s-ikr {                                            /* 잇 */
  font-size: 0.556em;
  color: var(--nm-dim);
}

/* 기본형(그로스잇)·connect 에선 잇이 퍼플 대형 */
.naming[data-state='base'] .s-ikr,
.naming[data-state='connect'] .s-ikr {
  font-size: 1em;
  color: var(--nm-purple);
}

/* 기본형은 브랜드 로고타입 그대로 — 그로스잇 전체 퍼플 대형 */
.naming[data-state='base'] .s-kr {
  font-size: 1em;
  color: var(--nm-purple);
}

.nm-word .s-da { color: #fff; }                              /* 다 */

/* --- 상태별 변형 --- */
/* it: 소문자 플립 팝 */
.naming[data-state='it'] .s-core { text-transform: lowercase; }
.naming[data-state='it'] .s-core.open .lt-i,
.naming[data-state='it'] .s-core.open .lt-t { animation: nm-pop 0.5s var(--ease-out) both; animation-delay: 0.25s; }

@keyframes nm-pop {
  0% { transform: scaleY(0.6); opacity: 0.3; }
  100% { transform: none; opacity: 1; }
}

/* tech: 자간 확장 + 스플릿플랩 — 소문자 it 이 대문자 I·T 로 카드 뒤집히듯 전환 */
.naming[data-state='tech'] .s-core { letter-spacing: 0.045em; }

.naming[data-state='tech'] .s-core.open .lt-i,
.naming[data-state='tech'] .s-core.open .lt-t { animation: nm-flip 0.55s var(--ease-out) both; }

.naming[data-state='tech'] .s-core.open .lt-t { animation-delay: 0.14s; }

@keyframes nm-flip {
  0% { transform: rotateX(-90deg); opacity: 0.15; }
  55% { transform: rotateX(16deg); opacity: 1; }
  100% { transform: none; opacity: 1; }
}

/* 꺾쇠는 좌우 바깥에서 스프링으로 튕겨 들어온다 */
.naming[data-state='tech'] .s-ab.open .lt {
  animation: nm-bracket-l 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: 0.3s;
}

.naming[data-state='tech'] .s-ab--close.open .lt { animation-name: nm-bracket-r; }

@keyframes nm-bracket-l {
  0% { opacity: 0; transform: translateX(-0.5em) scale(0.5); }
  100% { opacity: 1; transform: none; }
}

@keyframes nm-bracket-r {
  0% { opacity: 0; transform: translateX(0.5em) scale(0.5); }
  100% { opacity: 1; transform: none; }
}

/* 인트로 타자 모드 — 글자가 페이드·이동 없이 탁탁탁 찍히고 지워진다 (커서 없음) */
.naming.typing .lt {
  transform: none;
  transition-property: opacity, color;
  transition-duration: 0s, 0.6s;
}

.naming.typing .seg:not(.open) .lt {
  transition-delay: calc((var(--n, 1) - 1 - var(--i, 0)) * 0.04s);
}

.naming.typing .seg.open .lt {
  transition-delay: calc(0.04s + var(--i, 0) * 0.055s);
}

.naming.typing .seg { transition-duration: 0.4s, 0.7s, 0.7s, 0.6s; }

/* ---------- 하단 행: 오브젝트 | 세로선 | 좌측정렬 라벨·캡션 ---------- */
.nm-panels {
  position: relative;
  height: calc(var(--nm-obj) + 20px);
  margin-top: var(--nm-gap-panels);
}

.nm-panel {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s var(--ease-out), visibility 0s linear 0.45s;
}

.nm-panel.is-on {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s var(--ease-out) 0.15s, visibility 0s;
}

.nm-panel__object img {
  height: var(--nm-obj);
  width: auto;
  object-fit: contain;
  opacity: 0;
  transform: translateY(26px) scale(0.96);
  transition: opacity 0.6s var(--ease-out) 0.3s, transform 0.7s var(--ease-out) 0.3s;
}

.nm-panel.is-on .nm-panel__object img { opacity: 1; transform: none; }

.nm-panel__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding: 6px 0 6px 26px;
  border-left: 2px solid rgba(255, 255, 255, 0.35);
}

.nm-panel__label {
  display: flex;
  align-items: baseline;
  gap: 0.5em;
  font-size: var(--nm-label);
  font-weight: 700;
  line-height: 1.6;
}

.nm-panel__en { color: #fff; }
.nm-panel__kr { color: var(--nm-purple); }

.nm-panel__caption {
  margin-top: 2px;
  font-size: var(--nm-cap);
  font-weight: 500;
  line-height: 1.5;
  color: #fff;
  word-break: keep-all;
}

/* 좌우 내비게이션 — 하단 행 세로 중앙, 중앙 기준 ±616px */
.nm-nav {
  position: absolute;
  top: 50%;
  width: 80px;
  height: 80px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #c9c9c9;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
  transition: background 0.3s var(--ease-out), color 0.3s var(--ease-out);
  z-index: 1;
}

.nm-nav:hover { background: var(--nm-purple); color: #fff; }

.nm-nav svg { width: 34%; height: auto; display: block; }

.nm-nav--prev { left: max(0px, calc(50% - 616px)); }
.nm-nav--next { right: max(0px, calc(50% - 616px)); }

/* ---------- NAMING 반응형 (컴포넌트 전용 --nm-* 캐스케이드) ---------- */
@media (max-width: 1919px) {
  .naming {
    --nm-big: 132px;
    --nm-label: 34px;
    --nm-cap: 18px;
    --nm-obj: 180px;
    --nm-gap-word: 68px;
    --nm-gap-panels: 60px;
    padding: 100px var(--side-pad) 90px;
  }

  .naming__sub { font-size: 20px; }

  .nm-nav { width: 64px; height: 64px; }
  .nm-nav--prev { left: max(0px, calc(50% - 480px)); }
  .nm-nav--next { right: max(0px, calc(50% - 480px)); }
}

@media (max-width: 1024px) {
  .naming {
    --nm-big: 88px;
    --nm-label: 26px;
    --nm-cap: 15px;
    --nm-obj: 150px;
    --nm-gap-word: 44px;
    --nm-gap-panels: 40px;
    padding: 64px var(--side-pad) 64px;
  }

  .naming__sub { font-size: 16px; }

  /* 긴 단어(그로스INTELLIGENT)가 좁은 폭에서 잘리지 않게 intel 상태만 축소 */
  .naming[data-state='intel'] .nm-word { font-size: min(88px, 8.4vw); }

  .nm-nav { width: 48px; height: 48px; }
  .nm-nav--prev { left: 0; }
  .nm-nav--next { right: 0; }
}

@media (max-width: 768px) {
  .naming {
    --nm-big: 15vw;
    --nm-obj: 120px;
    --nm-gap-word: 36px;
    --nm-gap-panels: 32px;
  }

  .naming__sub { font-size: 14px; }

  .naming[data-state='intel'] .nm-word { font-size: 8vw; }

  /* 좁은 화면: 세로 스택. 하단 76px 은 화살표 행으로 비운다 */
  .nm-panels { height: auto; min-height: 320px; }

  .nm-panel {
    position: absolute;
    inset: 0 0 76px 0; /* 하단 화살표 공간 확보 */
    flex-direction: column;
    gap: 14px;
  }

  .nm-panel__meta { align-items: center; text-align: center; border-left: none; padding: 0 16px; }

  /* 화살표를 하단 중앙에 좌우로 나란히 배치 (48px, 가운데 기준 ±8px) */
  .nm-nav {
    top: auto;
    bottom: 0;
    transform: none;
  }

  .nm-nav--prev { left: calc(50% - 56px); right: auto; }
  .nm-nav--next { right: calc(50% - 56px); left: auto; }
}

/* ==========================================================================
   SECTION 1 — 3개의 역할, 3가지 생각
   ========================================================================== */
.section1 {
  display: flex;
  flex-direction: column;
  gap: 80px;
  padding-top: var(--section-pad-y);
  padding-bottom: var(--section-pad-y);
  background: #fff;
}

.section1__header {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.section1 .heading-xl {
  line-height: 1.05;
}

.section1__desc {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--gray);
}

.section1__desc strong {
  font-weight: 700;
}

.section1__cards {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 24px;
  /* 활성 카드(371px + 상단 오프셋 50px) 기준 높이 고정 — 호버로 카드가 아래에 붙은 채 위로만 자란다. */
  min-height: 421px;
}

/* 세 칼럼(카드·중앙 래퍼) 동일 폭 — flex-basis:0은 패딩·보더가 분배에 얹혀 폭이 틀어지므로
   border-box 기준 1/3 폭을 명시한다. */
.section1__cards > * {
  flex: 0 0 calc((100% - 48px) / 3);
  min-width: 1px;
}

/* 3개 카드 모두 동일한 정적 스타일 — 퍼플 스트로크 박스 + 3D 이미지 상시 노출.
   호버/포인터 인터랙션 없이 세 카드가 콘텐츠 폭(1680px)을 균등 분할한다. 직각 박스. */
.role-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 70px 40px;
  border: 2px solid #6a50f0;
  border-radius: 2px;
  background: #fff;
  color: var(--black);
  box-shadow: 0 16px 36px -20px rgba(106, 80, 240, 0.5);
}

/* 리빌 전환(opacity·transform)만 유지 */
.js .role-card[data-reveal] {
  transition:
    opacity 0.7s var(--ease-out) var(--reveal-delay, 0s),
    transform 0.7s var(--ease-out) var(--reveal-delay, 0s);
}

/* 래퍼 내부 카드는 래퍼 폭을 그대로 채운다 (중앙 강조 오프셋 없이 3장 동일 높이) */
.role-card-center .role-card {
  width: 100%;
}

.role-card__num {
  font-size: 36px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.18px;
  color: var(--black);
}

.role-card__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.role-card__title {
  font-size: 42px;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}

.role-card__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.role-card__list li {
  font-size: 16px;
  font-weight: 500;
  white-space: nowrap;
}

/* 3D 이미지 — 카드 우상단, 3장 모두 상시 노출. 244→200 비율로 축소(188→154).
   bottom 기준 배치로 이미지 폭이 달라도 하단선이 카드 상단에서 92px 안쪽으로 정렬된다. */
.role-card__3d {
  position: absolute;
  right: 28px;
  bottom: calc(100% - 92px);
  height: 154px;
  pointer-events: none;
}

.role-card__3d img {
  height: 100%;
  width: auto;
  display: block;
}

/* ==========================================================================
   SECTION 2 — HOW IT WORKS (탭 + 캐러셀)
   ========================================================================== */
.section2 {
  display: flex;
  flex-direction: column;
  gap: 36px;
  padding-top: var(--section-pad-y);
  padding-bottom: var(--section-pad-y);
  background: #fff;
}

.section2__header {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.section2 .heading-xl {
  line-height: 1.05;
  color: var(--black);
}

.section2__desc {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--gray-2);
}

.tabs {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 40px;
}

.tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--gray-2);
  white-space: nowrap;
  transition: color 0.25s ease;
}

.tab:hover {
  color: var(--black);
}

.tab::after {
  content: '';
  width: 100%;
  height: 3px;
  border-radius: 2px;
  background: transparent;
  transition: background-color 0.25s ease;
}

.tab.is-active {
  font-weight: 700;
  color: var(--black);
}

.tab.is-active::after {
  background: #6a50f0;
}

/* 캐러셀 — 탭마다 패널 하나, 패널 안에서는 우측 기기 화면만 롤링되고 좌측 배지가 따라 강조된다 */
.carousel {
  display: flex;
  gap: 48px;
  height: 640px;
  max-width: 1680px;
  width: 100%;
  margin: 0 auto;
}

/* display: flex가 [hidden] UA 규칙을 이겨버리므로 비활성 패널 숨김을 명시 */
.carousel[hidden] {
  display: none;
}

.carousel__desc {
  width: 544px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-top: 20px;
}

.carousel__heading {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.carousel__eyebrow {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--gray-2);
}

.carousel__title {
  font-size: 46px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--black);
}

.carousel__subtitle {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--gray-2);
}

.carousel__divider {
  width: 100%;
  height: 1px;
  background: var(--border-light);
}

.carousel__badges {
  flex: 1 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.feature-badge {
  flex: 1 0 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  width: 100%;
  padding: 24px;
  border-radius: 12px;
  background: #f3f4f6;
  border: 1px solid transparent;
  color: var(--black);
  text-align: left;
  transition:
    background-color 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    color 0.25s ease;
}

.feature-badge:not(.is-active):hover {
  border-color: #d8d2f7;
  background: #eceef2;
}

/* 활성 배지 — 브랜드 퍼플 그라데이션 (Figma) */
.feature-badge.is-active {
  background: linear-gradient(97deg, #4f35f0 0%, #6a50f0 100%);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 14px 30px -12px rgba(106, 80, 240, 0.55);
}

.feature-badge.is-active .feature-badge__desc {
  color: rgba(255, 255, 255, 0.8);
}

.feature-badge__title {
  display: block;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
}

.feature-badge__desc {
  display: block;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
}

/* 배지가 많은 패널은 패딩을 줄여 고정 높이(640px) 안에 수납 (4개 기준) */
.carousel--dense .feature-badge {
  padding: 14px 24px;
}

/* 배지 5개 패널 — 폰트는 유지하고 패딩·간격만 더 좁혀 640px 안에 수납 */
.carousel--denser .carousel__desc {
  padding-top: 16px;
}

.carousel--denser .carousel__badges {
  gap: 6px;
}

.carousel--denser .feature-badge {
  padding: 8px 24px;
}

/* 준비 중(플레이스홀더) 배지 — 실제 콘텐츠와 구분되도록 점선·저채도로 표시 */
.feature-badge--placeholder {
  background: #fafafa;
  border-style: dashed;
  color: #9ca3af;
}

.feature-badge--placeholder .feature-badge__desc {
  color: #b0b6bf;
}

.feature-badge--placeholder:not(.is-active):hover {
  background: #f3f4f6;
  border-color: #c4c9d2;
}

/* 기기 프레임 패널 — 본사(모니터/브라우저), 가맹점주·고객(폰). 프레임을 중앙에 띄운다. */
.device-card {
  position: relative; /* 화살표 오버레이 기준 */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1088px;
  height: 640px;
  flex-shrink: 0;
  border-radius: 16px;
  background: #f5f5f7;
}

/* 기기 화면 스택 — 같은 셀에 겹쳐 두고 활성 화면만 보여준다.
   행/열을 컨테이너 크기(100%)로 고정해, 세로로 긴 이미지는 화면 밖으로 자라지 않고 스크롤된다. */
.device-screens {
  display: grid;
  grid-template-rows: 100%;
  grid-template-columns: 100%;
  width: 100%;
  height: 100%;
}

.device-screen {
  grid-area: 1 / 1;
  overflow-y: auto;              /* 세로로 긴 UI 이미지 스크롤 */
  overflow-x: hidden;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.4s ease,
    visibility 0s linear 0.4s;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.22) transparent;
}

.device-screen.is-active {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.device-screen::-webkit-scrollbar {
  width: 6px;
}

.device-screen::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}

.device-screen::-webkit-scrollbar-track {
  background: transparent;
}

/* 이동 방향에서 새 화면이 밀려 들어온다 (annotation: 캐러셀 클릭 시 이미지 스와이프 변경) */
.carousel[data-dir='next'] .device-screen.is-active {
  animation: screen-in-right 0.5s var(--ease-out);
}

.carousel[data-dir='prev'] .device-screen.is-active {
  animation: screen-in-left 0.5s var(--ease-out);
}

@keyframes screen-in-right {
  from {
    opacity: 0;
    transform: translateX(60px);
  }
}

@keyframes screen-in-left {
  from {
    opacity: 0;
    transform: translateX(-60px);
  }
}

/* 이미지는 프레임 화면 폭에 맞추고 세로는 원본 비율 유지(길면 스크롤) */
.device-screen > img {
  width: 100%;
  height: auto;
  display: block;
}

/* ---- 모니터 틀 (본사 관리 · 웹) — 다크 베젤 + 브라우저 크롬 ---- */
.monitor-frame {
  display: flex;
  flex-direction: column;
  width: min(908px, 100%);
  background: #1c1c24;
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 34px 70px -34px rgba(17, 17, 24, 0.5);
}

.monitor-frame__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  background: #2b2b35;
  border-radius: 8px 8px 0 0;
}

.monitor-frame__dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
}

.monitor-frame__dot--r { background: #ff5f57; }
.monitor-frame__dot--y { background: #febc2e; }
.monitor-frame__dot--g { background: #28c840; }

.monitor-frame__addr {
  margin-left: 12px;
  flex: 1;
  max-width: 360px;
  height: 24px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  border-radius: 12px;
  background: #3a3a45;
  color: #b9b9c3;
  font-size: 12px;
  letter-spacing: -0.01em;
}

/* 화면은 폭에 따라 높이가 비례(aspect-ratio)해 모든 티어에서 프레임이 유동적으로 축소된다 */
.monitor-frame .device-screens {
  aspect-ratio: 880 / 512;
  height: auto;
  background: #fff;
  border-radius: 0 0 8px 8px;
  overflow: hidden; /* 라운드 클립 — 실제 스크롤은 .device-screen이 담당 */
}

/* ---- 폰 틀 (가맹점주·고객 · 모바일) — 다크 베젤 ----
   폰 패널은 슬라이드(.device-screen)가 폰 프레임을 직접 품는다 —
   프로모션처럼 한 슬라이드에 폰 2대를 나란히 배치할 수 있다. */
.device-card--phone .device-screens {
  width: 100%;
  height: 100%;
}

.device-card--phone .device-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  overflow: visible; /* 스크롤은 폰 화면(.phone-frame__screen) 내부에서 */
}

.phone-frame {
  flex: 0 1 320px;
  width: 320px;
  max-width: 100%;
  min-width: 0;
  padding: 8px; /* 베젤 두께 */
  background: #14141a;
  border-radius: 38px;
  box-shadow: 0 34px 70px -30px rgba(17, 17, 24, 0.55);
}

/* 폰 화면 — 세로로 긴 UI 이미지는 여기서 스크롤 */
.phone-frame__screen {
  width: 100%;
  aspect-ratio: 304 / 604;
  background: #fff;
  border-radius: 30px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.22) transparent;
}

.phone-frame__screen::-webkit-scrollbar {
  width: 6px;
}

.phone-frame__screen::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}

.phone-frame__screen::-webkit-scrollbar-track {
  background: transparent;
}

.phone-frame__screen > img {
  width: 100%;
  height: auto;
  display: block;
}

/* 캐러셀 화살표 */
.arrow {
  position: absolute;
  top: calc(50% - 26px);
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: transform 0.25s var(--ease-out);
}

.arrow:hover {
  transform: scale(1.15);
}

.arrow--left {
  left: 0;
}

.arrow--right {
  right: 0;
}

/* ==========================================================================
   SECTION 3 — Growth Loop
   ========================================================================== */
.section3 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 140px; /* Figma: 루프 영역 → 도입 효과 간격 */
  padding-top: var(--section-pad-y);
  padding-bottom: var(--section-pad-y);
  background: var(--dark-2);
}

.section3__header {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  color: #fff;
}

/* Figma 331:7005 — 두 줄 모두 80px Black, 흰색 + 퍼플 */
.section3__title {
  display: flex;
  flex-direction: column;
}

.section3__title-top {
  font-size: 80px;
  font-weight: 900;
  line-height: 1.08;
  color: #fff;
  white-space: nowrap;
}

.section3__title-loop {
  font-size: 80px;
  font-weight: 900;
  line-height: 1.08;
  color: #6a50f0;
}

.section3__desc {
  font-size: 24px;
  font-weight: 500;
  color: #fff;
}

.section3__loop {
  display: flex;
  align-items: center;
  gap: 40px;
  width: 100%;
  max-width: var(--content-max);
}

.section3__loop-left {
  display: flex;
  flex-direction: column;
  gap: 50px;
  width: 650px;
  flex-shrink: 0;
}

/* 디자인상 헤더→소제목 간격은 100px (컬럼 gap 50 + 50) */
.section3__loop-left .section3__header {
  margin-bottom: 50px;
}

.section3__loop-title {
  font-size: 36px;
  font-weight: 700;
  line-height: 1.3;
  color: #f5f5f5;
}

/* 세로 목록 — 활성 항목만 선명(번호 퍼플), 나머지는 흐리게. 링의 왼쪽 도착 아이템과 동기화 */
.loop-list {
  display: flex;
  flex-direction: column;
  gap: 50px;
  width: 100%;
}

/* 비활성은 항목 전체를 40% — 번호는 항상 퍼플 (Figma 331:7013~) */
.loop-item {
  display: flex;
  gap: 14px;
  cursor: pointer;
  opacity: 0.4;
  transition: opacity 0.5s ease;
}

.loop-item.is-active {
  opacity: 1;
}

.loop-item__num {
  font-size: 28px;
  font-weight: 600;
  color: #6a50f0;
  white-space: nowrap;
}

.loop-item__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 1px;
}

.loop-item__title {
  font-size: 28px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}

.loop-item__title--semibold {
  font-weight: 600;
}

.loop-item__desc {
  font-size: 20px;
  font-weight: 400;
  color: #d9d9d9;
}

/* ---------- 회전 링 (우측) ---------- */
/* 남는 가로 공간의 중앙에 배치 (디자인: 링 중심이 center 컬럼의 정중앙)
   --rs = 링 전체 스케일. 모든 지오메트리가 이 값에 비례하므로
   반응형 티어에서는 --rs 하나만 낮추면 된다. */
.section3__ring {
  --rs: 1;
  position: relative;
  width: calc(700px * var(--rs));
  height: calc(700px * var(--rs));
  flex-shrink: 0;
  margin-inline: auto;
}

/* 아이템 뒤에 그리는 원형 트랙 — 그라데이션 스트로크 (우상 라벤더 → 좌하 퍼플) */
.ring-track {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(696px * var(--rs));
  height: calc(696px * var(--rs));
  transform: translate(-50%, -50%);
  border-radius: 50%;
  padding: calc(8px * var(--rs));
  background: linear-gradient(225deg, #d6cdfb, #6a50f0);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
}

/* 궤도 컨테이너 — 시계방향 회전(JS가 --orbit-angle 누적) */
.ring-orbit {
  position: absolute;
  inset: 0;
  transform: rotate(var(--orbit-angle, 0deg));
  transition: transform 1.1s var(--ease-out);
}

.ring-item {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  --r: calc(344px * var(--rs));
  transform: rotate(var(--base, 0deg)) translateY(calc(-1 * var(--r)));
}

/* base+orbit 회전을 상쇄해 아이템은 항상 정립, 활성(왼쪽 도착) 시 ×1.31 확대 */
.ring-item__inner {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(330px * var(--rs));
  height: calc(330px * var(--rs));
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%)
    rotate(calc(-1 * var(--base, 0deg) - var(--orbit-angle, 0deg)))
    scale(var(--item-scale, 1));
  transition: transform 1.1s var(--ease-out);
}

.ring-item.is-active .ring-item__inner {
  --item-scale: 1.31;
}

.ring-item__inner img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.4));
}

.section3__benefits {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
  width: 100%;
  text-align: center;
}

.section3__benefits-title {
  font-size: 32px;
  font-weight: 700;
  color: #e5e5e5;
}

.benefit-list {
  display: flex;
  justify-content: center;
  gap: 57px;
  width: 100%;
}

/* Figma: benefit-1/2/3 — 510×226 박스, 중앙 정렬.
   테두리는 박스마다 다른 그라데이션 스트로크 — 1→2→3이 색을 이어받는 체인
   (6A50F0 → BDB796 → 9CE0BA → 6B51EF) */
.benefit {
  position: relative;
  box-sizing: border-box;
  width: 510px;
  height: 226px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 30px 24px;
  text-align: center;
}

/* 그라데이션 보더: 배경을 두르고 안쪽을 마스크로 뚫어 1.5px 스트로크만 남긴다 */
.benefit::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1.5px;
  background: var(--stroke, #6a50f0);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

.benefit:nth-child(1) { --stroke: linear-gradient(135deg, #6a50f0, #bdb796); }
.benefit:nth-child(2) { --stroke: linear-gradient(45deg, #bdb796, #9ce0ba); }
.benefit:nth-child(3) { --stroke: linear-gradient(135deg, #9ce0ba, #6b51ef); }

.benefit__title {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
  width: 100%;
}

.benefit__desc {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--light);
  width: 100%;
}

/* ==========================================================================
   SECTION 4 — Powered by Wylie
   ========================================================================== */
.section4 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
  padding-top: var(--section-pad-y);
  padding-bottom: var(--section-pad-y);
  background: #fff;
}

.section4__header {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.section4__header .heading-xl {
  color: #111827;
}

.section4__desc {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.25;
  color: var(--gray);
}

.section4__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 140px;
  width: 100%;
  max-width: 1680px;
}

/* 모니터+폰+말풍선 합성 그래픽 (Figma 절대좌표 재현) */
.device-composite {
  position: relative;
  width: 1162px;
  height: 620px;
}

/* 노트북(퍼플 대시보드) — 우측 일부가 폰 카드에 덮이는 Figma 배치 재현.
   좌표·크기는 Figma 노드 376:6708(703×444, x59.75/y94.69) 그대로. */
.device-composite__monitor {
  position: absolute;
  left: 59.75px;
  top: 94.69px;
  width: 703px;
  height: 444px;
}

.device-composite__monitor img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom;
  pointer-events: none;
}

/* 노트북↔폰 이음새 그림자 — Figma 노드 331:7061(x564.3/y18.17, 49×601).
   그라데이션이 폰 쪽(진한 회색) → 노트북 쪽(투명)으로 페이드해 폰이 노트북 위에 얹힌 접촉 그림자를 만든다.
   노트북 위·폰 아래 레이어(DOM 순서로 정렬). */
.device-composite__strip {
  position: absolute;
  left: 564.3px;
  top: 18.17px;
  width: 49.15px;
  height: 600.84px;
  pointer-events: none;
}

.device-composite__strip img {
  width: 100%;
  height: 100%;
  display: block;
}

/* AI 알림 폰 카드 — 흰 카드 프레임(div) + 내부 알림 콘텐츠 이미지.
   Figma 410:6071(378×606, 콘텐츠 인셋 16px) 프레이밍. */
.device-composite__phone {
  position: absolute;
  left: 603px;
  top: 14px;
  width: 378px;
  height: 606px;
  background: #fff;
  border: 1px solid #e3e3e8;
  border-radius: 24px;
  box-shadow: 0 18px 40px -24px rgba(17, 17, 24, 0.28);
  overflow: hidden;
}

.device-composite__phone-img {
  position: absolute;
  left: 16px;
  top: 17px;
  width: 346px;
  height: 572px;
  pointer-events: none;
}

/* 말풍선의 터치 기기 대체 텍스트 — 데스크톱에선 숨김 (≤1024 티어에서 노출) */
.device-composite-notes {
  display: none;
}

/* 말풍선 3개는 상시 노출 (호버 인터랙션 없음). → 로 시작하는 AI 액션 라인은 포인트 컬러로 강조. */
.speech-bubble {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 75.58px;
  padding: 11.34px 22.67px;
  background: #fff;
  border: 0.945px solid #000;
  font-size: 22.67px;
  font-weight: 500;
  letter-spacing: -0.907px;
  line-height: normal;
  white-space: nowrap;
  text-align: left;
  pointer-events: none;
}

/* → AI가 다음 스텝 제안 등 액션 라인 — 포인트 컬러 강조 */
.speech-bubble__accent {
  color: #6a50f0;
  font-weight: 700;
}

.speech-bubble--r1 {
  left: 874.61px;
  top: 141.26px;
  width: 287.19px;
  border-radius: 13.226px 13.226px 13.226px 0;
  transform-origin: bottom left;
}

.speech-bubble--r2 {
  left: 874.61px;
  top: 0;
  width: 230.51px;
  border-radius: 13.226px 13.226px 13.226px 0;
  transform-origin: bottom left;
}

.speech-bubble--l1 {
  left: 0;
  top: 56.9px;
  width: 232.4px;
  border-radius: 13.226px 13.226px 0 13.226px;
  transform-origin: bottom right;
}

/* 마케팅 서비스 쇼케이스 */
.section4__services {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

.section4__services-header {
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.section4__services-title {
  font-size: 80px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.4px;
  text-transform: uppercase;
  color: #111827;
}

.section4__services-sub {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--gray);
}

.service-showcase {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 46px;
  padding-top: 66px;
  padding-bottom: 40px;
  overflow: hidden;
}

.service-objects {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 80px;
}

.service-object {
  position: relative;
  width: 404px;
  height: 344px;
  overflow: hidden;
}

.service-object img {
  position: absolute;
  max-width: none;
  pointer-events: none;
}

.service-labels {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 236px;
  width: 100%;
  padding: 10px;
}

.service-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.service-label__pill {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  background: #dbd6fc;
  border: 1.5px solid transparent;
  border-radius: 8px;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -1.12px;
  color: #6a50f0;
  white-space: nowrap;
}

.service-label__desc {
  font-size: 36px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -1.44px;
  text-align: center;
  white-space: nowrap;
}

.section4__note {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--gray);
}

/* ==========================================================================
   SECTION 5 — 레퍼런스 (마퀴)
   ========================================================================== */
.section5 {
  display: flex;
  flex-direction: column;
  gap: 80px;
  padding-top: var(--section-pad-y);
  padding-bottom: var(--section-pad-y);
  background: var(--dark);
  overflow: hidden;
}

.section5__header {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.section5__desc {
  max-width: 920px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--light);
}

.section5__groups {
  display: flex;
  flex-direction: column;
  gap: 80px;
  width: 100%;
}

.ref-group {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
}

.ref-group__title {
  padding-bottom: 16px;
  font-size: 32px;
  font-weight: 500;
  line-height: 1.2;
  color: #fff;
}

/* 섹션 좌우 패딩을 벗어나 화면 전체 폭으로 흐른다 — 카드가 패딩 라인에서 잘리지 않고 화면 끝까지 보이게 */
.marquee {
  width: calc(100% + var(--side-pad) * 2);
  margin: 0 calc(-1 * var(--side-pad));
  height: 220px;
  overflow: hidden;
}

.marquee__track {
  display: flex;
  gap: 24px;
  width: max-content;
  animation: marquee-left 60s linear infinite;
}

.marquee__track--reverse {
  animation-name: marquee-right;
}

.marquee:hover .marquee__track {
  animation-play-state: paused;
}

/* 복제된 두 절반 사이에 낀 gap(24px)의 절반을 보정해야 루프 이음새가 튀지 않는다 */
@keyframes marquee-left {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - 12px)); }
}

@keyframes marquee-right {
  from { transform: translateX(calc(-50% - 12px)); }
  to   { transform: translateX(0); }
}

.brand-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 422px;
  height: 220px;
  padding: 30px;
  background: var(--card-dark);
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}

.brand-card__logo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 40px;
}

.brand-card__name {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  text-transform: uppercase;
  white-space: nowrap;
}

.brand-card__name p {
  font-size: 28px;
  font-weight: 900;
  color: #fff;
}

.brand-card__name span {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.4);
}

/* ---------- 브랜드 컬러 카드 (Figma) ---------- */
/* 카드마다 --brand 배경 + 로고를 흰색 실루엣으로 통일 */
.brand-card--tinted {
  position: relative;
  background: var(--brand, var(--card-dark));
}

.brand-card--tinted .brand-card__logo img {
  filter: brightness(0) invert(1);
}

.brand-card--tinted .brand-card__name span {
  color: rgba(255, 255, 255, 0.55);
}

/* 도입 브랜드(1행): 이름 좌하단 + 우측 앱 폰 목업 */
.brand-card--app .brand-card__name {
  align-items: flex-start;
}

/* 폰 이미지 = 피그마 카드의 우측 슬랩(폰+여백+배경)을 통째로 잘라온 것.
   카드 우측에 원본 크기로 붙이면 디자인과 동일한 위치·크기가 재현된다. */
.brand-card__phone {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: auto;
  pointer-events: none;
}

/* ==========================================================================
   SECTION 6 — 믿고 맡길 수 있는 이유
   ========================================================================== */
.section6 {
  display: flex;
  flex-direction: column;
  gap: 80px;
  padding-top: var(--section-pad-y);
  padding-bottom: var(--section-pad-y);
  background: var(--dark);
}

.section6 .heading-xl {
  line-height: normal;
  text-transform: none;
  letter-spacing: 0;
}

.trust-cards {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

.trust-card {
  display: flex;
  align-items: center;
  gap: 134px;
  width: 100%;
}

.trust-card__text {
  flex: 1 0 0;
  min-width: 1px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.trust-card__text--right {
  text-align: right;
}

.trust-card__title {
  font-size: 50px;
  font-weight: 700;
  line-height: normal;
  color: #fff;
}

.trust-card__desc {
  font-size: 18px;
  font-weight: 400;
  color: #9a9aaf;
}

/* 미디어 박스 — Figma에서 추출한 3D 이미지(배경·페이드 포함)를 그대로 채운다 */
.trust-card__media {
  position: relative;
  width: 718px;
  height: 280px;
  overflow: hidden;
  background: #000;
  flex-shrink: 0;
}

.trust-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* ==========================================================================
   SECTION 7 — CTA + 추천
   ========================================================================== */
.section7 {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 24px;
  padding-top: var(--section-pad-y);
  padding-bottom: var(--section-pad-y);
  background: var(--dark);
}

/* 우측 추천 리스트가 스크롤되는 동안 CTA는 고정 (annotation: 스크롤 시 고정 영역) */
.section7__cta {
  flex: 1 0 0;
  min-width: 1px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  position: sticky;
  top: 160px; /* 네비 80px + 여백 */
}

.section7__text {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.section7__desc {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--light);
}

.section7__buttons {
  display: flex;
  align-items: center;
  gap: 24px;
}

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 36px;
  font-size: 24px;
  font-weight: 600;
  text-transform: uppercase;
  white-space: nowrap;
  transition:
    background-color 0.25s ease,
    transform 0.25s var(--ease-out);
}

.btn:hover {
  transform: translateY(-3px);
}

/* Figma: 도입 문의하기 = 퍼플 필, 소개서 다운로드 = 퍼플 아웃라인 */
.btn--primary {
  background: #6a50f0;
  color: #fff;
  border-radius: 6px;
}

.btn--primary:hover {
  background: #5a41e0;
}

.btn--ghost {
  background: transparent;
  border: 1.5px solid #6a50f0;
  color: #a495ff;
  border-radius: 6px;
}

.btn--ghost:hover {
  background: rgba(106, 80, 240, 0.12);
}

.section7__recommend {
  flex: 1 0 0;
  min-width: 1px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 24px;
}

.section7__recommend-title {
  width: 100%;
  font-size: 32px;
  font-weight: 500;
  text-transform: uppercase;
  color: #fff;
}

.bubble-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  width: 100%;
}

.bubble {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px 14px 18px;
  background: #fff;
  border-radius: 6px;
}

.bubble p {
  font-size: 22px;
  font-weight: 500;
  line-height: 1.4;
  color: #000;
  white-space: nowrap;
}

/* ==========================================================================
   SECTION 8 — FAQ
   ========================================================================== */
.section8 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px;
  padding-top: var(--section-pad-y);
  padding-bottom: var(--section-pad-y);
  background: #fff;
}

.section8__title {
  width: 100%;
  font-size: 58px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.29px;
  text-align: center;
  text-transform: uppercase;
  color: #6a50f0;
}

.faq-list {
  display: flex;
  flex-direction: column;
  width: 866px;
  max-width: 100%;
}

.faq-item {
  border-bottom: 1px solid #000;
}

.faq-item__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 28px 0;
  text-align: left;
}

.faq-item__header:hover .faq-item__q {
  opacity: 0.65;
}

.faq-item__q {
  flex: 1 0 0;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.4;
  color: #000;
  transition: opacity 0.2s ease;
}

.faq-item__toggle {
  font-size: 32px;
  font-weight: 900;
  line-height: 1.3;
  color: #000;
  white-space: nowrap;
  transition: color 0.25s ease;
}

/* 열린 항목의 − 토글은 퍼플 (Figma) */
.faq-item.is-open .faq-item__toggle {
  color: #6a50f0;
}

/* grid-template-rows 0fr → 1fr 트릭으로 높이를 부드럽게 여닫는다 (annotation: 아코디언 인터랙션 적용) */
.faq-item__answer {
  display: grid;
  grid-template-rows: 0fr;
  padding: 0;
  border-top: 1px solid transparent;
  transition:
    grid-template-rows 0.45s var(--ease-out),
    padding 0.45s var(--ease-out),
    border-color 0.45s ease;
}

.faq-item.is-open .faq-item__answer {
  grid-template-rows: 1fr;
  padding: 24px 0;
  border-top-color: rgba(0, 0, 0, 0.15);
}

.faq-item__answer p {
  overflow: hidden;
  min-height: 0;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  color: #333;
}

/* 답변이 비어있는 항목은 열려도 여백만 표시하지 않도록 (JS에서도 토글을 막는다) */
.faq-item__answer:has(p:empty) {
  display: none;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px;
  padding-top: 80px;
  padding-bottom: 80px;
  background: #fff;
  border-top: 1px solid #000;
  white-space: nowrap;
}

.footer__info {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

.footer__logo {
  font-size: 24px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.12px;
  text-transform: uppercase;
  color: #000;
}

.footer__company {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 16px;
  line-height: 1.6;
}

.footer__row {
  display: flex;
  gap: 12px;
}

.footer__row span {
  font-weight: 400;
  color: var(--gray);
}

.footer__row i {
  font-style: normal;
  font-weight: 200;
  color: #dbdbdb;
}

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-size: 14px;
  line-height: 1.6;
  color: var(--gray);
}

.footer__links {
  display: flex;
  gap: 24px;
}

.footer__links--bold {
  font-weight: 700;
}

/* ==========================================================================
   상담신청 팝업 — 라이브(growthit.co.kr) popupRequest 이식
   라이브처럼 화면 전체를 덮는 다크 레이어. 데스크톱은 좌(타이틀)/우(폼) 2컬럼.
   필드·동의 문구는 라이브 그대로, 색·폰트는 리뉴얼 토큰(#6a50f0, Paperlogy) 기준
   ========================================================================== */
.contact-popup {
  position: fixed;
  inset: 0;
  z-index: 200; /* 스티키 네비바(100) 위 */
  display: flex;
  flex-direction: column;
  overflow: hidden; /* 데스크톱: 레이어 자체는 고정, 폼 컬럼만 내부 스크롤 */
  background: var(--dark);
  animation: cp-fade 0.3s ease;
}

.contact-popup[hidden] {
  display: none;
}

/* 팝업이 열린 동안 뒷배경 스크롤 잠금 */
body.is-popup-open {
  overflow: hidden;
}

@keyframes cp-fade {
  from {
    opacity: 0;
  }
}

/* 상단 바 — 네비바와 같은 높이, 로고 + 닫기 */
.contact-popup__bar {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  height: var(--navbar-h);
  padding: 0 var(--side-pad);
}

.contact-popup__logo {
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -0.12px;
  text-transform: uppercase;
  color: #fff;
}

.contact-popup__close {
  padding: 0 4px;
  font-size: 60px;
  font-weight: 300;
  line-height: 1;
  color: #fff;
  transition: opacity 0.2s ease;
}

.contact-popup__close:hover {
  opacity: 0.6;
}

/* 본문 — 좌 타이틀 / 우 폼 2컬럼 (Figma 콘텐츠 폭 규칙과 동일한 --side-pad 사용)
   데스크톱은 남은 높이를 그리드가 채우고 폼 컬럼(.contact-form)만 스크롤된다 */
.contact-popup__content {
  flex: 1;
  min-height: 0;
  display: grid;
  /* 폼 컬럼이 우측 --side-pad까지 품어 스크롤바가 화면 오른쪽 끝에 붙는다 */
  grid-template-columns: minmax(0, 1fr) minmax(0, calc(680px + var(--side-pad)));
  gap: 64px 120px;
  padding: 96px 0 0 var(--side-pad);
  animation: fade-up 0.5s var(--ease-out);
}

.contact-popup__eyebrow {
  font-size: 36px;
  font-weight: 800;
  color: #6a50f0;
}

.contact-popup__title {
  margin-top: 24px;
  font-size: 64px;
  font-weight: 900;
  line-height: 1.2;
  color: #fff;
}

.contact-popup__desc {
  margin-top: 24px;
  font-size: 22px;
  line-height: 1.6;
  color: #c7c7cd;
}

/* ---------- 폼 ---------- */
/* 데스크톱: 폼 컬럼만 자체 스크롤 (좌측 타이틀은 고정).
   내부 우측 패딩 = --side-pad → 입력창은 콘텐츠 폭에, 스크롤바는 화면 끝에 정렬 */
.contact-form {
  min-height: 0;
  overflow-y: auto;
  padding-right: var(--side-pad);
  padding-bottom: 96px;
  scrollbar-width: thin;
  scrollbar-color: #3a3a41 transparent;
}

.contact-form::-webkit-scrollbar {
  width: 6px;
}

.contact-form::-webkit-scrollbar-thumb {
  background: #3a3a41;
  border-radius: 3px;
}

.contact-form__fields {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.contact-form__field label {
  display: block;
  margin-bottom: 20px;
  font-size: 32px;
  font-weight: 700;
  color: #fff;
}

.contact-form__input {
  position: relative;
}

.contact-form__field input {
  width: 100%;
  padding: 24px 68px 24px 24px;
  font-family: inherit;
  font-size: 22px;
  color: #fff;
  background: transparent;
  border: 1px solid #3a3a41;
  border-radius: 12px;
  outline: none;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.contact-form__field input::placeholder {
  color: var(--gray-2);
}

.contact-form__field input:focus {
  border-color: #6a50f0;
  box-shadow: 0 0 0 3px rgba(106, 80, 240, 0.25);
}

.contact-form__field.is-error input {
  border-color: #ff6b70;
}

/* 입력값 지우기 (라이브 button-clear) */
.contact-form__clear {
  position: absolute;
  top: 50%;
  right: 20px;
  padding: 4px;
  font-size: 38px;
  line-height: 1;
  color: #7a7a82;
  transform: translateY(-50%);
  transition: color 0.2s ease;
}

.contact-form__clear:hover {
  color: #fff;
}

.contact-form__error {
  margin-top: 10px;
  font-size: 18px;
  color: #ff6b70;
}

.contact-form__error:empty {
  display: none;
}

/* ---------- 동의 ---------- */
.contact-form__agree {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 56px;
}

/* ↗ 토글은 행 끝이 아니라 동의 문구 바로 오른쪽에 붙는다 */
.contact-form__check {
  display: flex;
  align-items: center;
  gap: 12px;
}

.contact-form__check label {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 24px;
  color: #fff;
  cursor: pointer;
}

/* 네이티브 체크박스는 숨기고 라이브식 원형 체크로 표시 */
.contact-form__check input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.contact-form__tick {
  position: relative;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border: 1.5px solid var(--gray-2);
  border-radius: 50%;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease;
}

.contact-form__tick::after {
  content: '';
  position: absolute;
  top: 5px;
  left: 11px;
  width: 8px;
  height: 14px;
  border: solid var(--gray-2);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
  transition: border-color 0.2s ease;
}

.contact-form__check input:checked + .contact-form__tick {
  background: #6a50f0;
  border-color: #6a50f0;
}

.contact-form__check input:checked + .contact-form__tick::after {
  border-color: #fff;
}

.contact-form__check input:focus-visible + .contact-form__tick {
  box-shadow: 0 0 0 3px rgba(106, 80, 240, 0.35);
}

/* 개인정보처리방침 열기 화살표 (푸터 ↗ 표기와 동일한 어휘) */
.contact-form__policy-toggle {
  flex-shrink: 0;
  padding: 0 4px;
  font-size: 32px;
  line-height: 1;
  color: #fff;
  transition: color 0.2s ease;
}

.contact-form__policy-toggle:hover {
  color: #6a50f0;
}

.contact-form__policy {
  padding: 28px 32px;
  background: var(--dark-2);
  border-radius: 12px;
}

.contact-form__policy dt {
  margin-top: 18px;
  font-size: 19px;
  font-weight: 700;
  color: #fff;
}

.contact-form__policy dt:first-child {
  margin-top: 0;
}

.contact-form__policy dd {
  margin-top: 4px;
  font-size: 19px;
  line-height: 1.6;
  color: #b8b8bf;
}

.contact-form__submit {
  width: 100%;
  margin-top: 64px;
  padding: 24px;
  font-size: 26px;
  border: none;
}

/* ==========================================================================
   모션 최소화 환경 대응
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .js [data-reveal] {
    opacity: 1;
    transform: none;
  }

  /* 배경 영상 대신 히어로 poster 정지 이미지를 노출 */
  .hero__video {
    display: none;
  }

  .hero {
    background: #000 center/cover no-repeat url('../assets/hero-poster.jpg');
  }
}

/* ==========================================================================
   반응형 — 브레이크포인트 체계 (시안 기준폭: 데스크탑 1920 / 태블릿 1024 /
   모바일 가로 768 / 모바일 세로 360)
   기준(base) 스타일은 1920 데스크톱 시안 그대로 두고,
   반응형 오버라이드는 전부 이 아래 4개 블록 안에만 쌓는다.

   ① 데스크탑→노트북 축소  @media (max-width: 1919px) — 1025~1919.
      1920 시안을 노트북 폭에 맞게 한 단계 축소 (구조 유지)
   ② 태블릿               @media (max-width: 1024px) —  769~1024. 컬럼 스택 등 구조 전환
   ③ 모바일 가로           @media (max-width:  768px) —  361~768. 완전 1열
   ④ 모바일 세로           @media (max-width:  360px) —     ~360. 세로폰 미세조정

   각 시안 기준폭(1024/768/360)은 해당 티어의 경계에 포함된다 —
   1024 뷰포트에선 태블릿 시안이 그대로 보인다.

   데스크톱-퍼스트 캐스케이드: 넓은 블록이 좁은 화면에도 상속 적용되므로
   공통 축소 규칙은 ①에 한 번만 쓰고, ②③④에는 그 폭에서 달라지는 것만 쓴다.

   크기 축소 원칙 — clamp()/vw 유동 스케일 금지:
   · 스케일 변수(--fs-*, --gap-section 등)는 tokens.css의 브레이크포인트별
     :root에서 고정값으로 계단식 선언한다. 아래 규칙들은 var()로 참조만.
   · 개별 px 오버라이드는 그 폭에서 정말 달라지는 요소에만 쓴다.
   · 나머지는 %, flex, aspect-ratio가 흡수하게 둔다.
   ========================================================================== */

/* ---------- ① 데스크탑 → 노트북 축소 (1025~1919px) ---------- */
@media (max-width: 1919px) {
  body {
    overflow-x: clip;
  }

  .heading-xl {
    font-size: var(--fs-display);
  }

  /* --- NAVBAR --- */
  .navbar__logo {
    font-size: var(--fs-title);
  }

  .navbar__menu {
    gap: 24px;
  }

  /* --- HERO --- */
  .hero {
    padding-top: 48px;
  }

  /* 히어로 타이틀은 노트북 구간에서도 110px 유지 (축소는 ②③에서) */

  .hero__sub {
    font-size: var(--fs-lead);
  }

  .hero__visual {
    width: min(872px, 58vw);
    height: auto;
    aspect-ratio: 872 / 492;
  }

  .hero__content {
    margin-bottom: min(-16px, -2vw);
  }

  /* --- SECTION 1 --- */
  .section1 {
    gap: var(--gap-section);
  }

  .section1__desc {
    font-size: var(--fs-body-md);
  }

  .role-card {
    width: auto;
    flex: 1 1 0;
    min-width: 0;
  }

  .role-card {
    padding: var(--pad-card);
  }

  .role-card__num {
    font-size: var(--fs-label-lg);
  }

  .role-card__title {
    font-size: 32px; /* 원본 42px */
    white-space: normal;
  }

  .role-card__list li {
    font-size: var(--fs-caption);
    white-space: normal;
  }

  .role-card__3d {
    right: 24px;
    width: 123px; /* 244→200 비율 축소 (원본 150px) */
    height: auto;
    aspect-ratio: 192 / 239;
  }

  /* 컨테이너가 width 기준으로 바뀌므로 이미지가 원본 크기로 풀리지 않게 박스에 맞춘다 */
  .role-card__3d img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  /* --- SECTION 2 --- */
  .section2__desc {
    font-size: var(--fs-body);
  }

  .carousel {
    height: auto;
    gap: 32px;
  }

  .carousel__desc {
    width: 440px; /* 원본 544px */
  }

  .carousel__title {
    font-size: 36px; /* 원본 46px */
  }

  .feature-badge {
    padding: 18px;
  }

  .feature-badge__title {
    font-size: var(--fs-body-lg);
  }

  /* 프레임(유동형)이 카드 높이를 결정하도록 height:auto — 카드가 프레임을 감싼다 */
  .device-card {
    width: auto;
    flex: 1 1 0;
    min-width: 0;
    height: auto;
  }

  .arrow {
    top: 50%;
    transform: translateY(-50%);
  }

  .arrow:hover {
    transform: translateY(-50%) scale(1.15);
  }

  /* --- SECTION 3 --- */
  .section3 {
    gap: var(--gap-section);
  }

  .section3__desc {
    font-size: var(--fs-body);
  }

  .section3__loop-title,
  .section3__benefits-title {
    font-size: var(--fs-title);
  }

  .loop-item__num,
  .loop-item__title {
    font-size: var(--fs-title-sm);
  }

  .loop-item__desc {
    font-size: var(--fs-caption);
  }

  .section3__title-top,
  .section3__title-loop {
    font-size: var(--fs-display);
  }

  .section3__loop-left {
    width: 480px;
  }

  .section3__ring {
    --rs: 0.72;
  }

  .benefit-list {
    gap: 24px;
  }

  .benefit {
    width: auto;
    flex: 1 1 0;
    min-width: 0;
    height: auto;
    min-height: 200px; /* 원본 260px — 카드 3장 높이 통일 */
    padding: 24px 20px;
  }

  .benefit__title {
    font-size: var(--fs-title);
  }

  /* --- SECTION 4 --- */
  .section4 {
    gap: var(--gap-section);
  }

  .section4__content {
    gap: var(--section-pad-y); /* 원본 140px — 섹션 상하 패딩과 같은 리듬 */
  }

  .section4__desc,
  .section4__services-sub {
    font-size: var(--fs-body);
  }

  .section4__services-title {
    font-size: var(--fs-display);
  }

  .section4__note {
    font-size: var(--fs-body-md);
  }

  /* 합성 그래픽: 피그마 px 절대좌표를 컨테이너 비율(%)로 환산 —
     박스 폭에 따라 통째로 비례 축소된다. 글자 크기만 --dc-w로 함께 스케일. */
  .device-composite {
    width: min(1162px, 100%);
    height: auto;
    aspect-ratio: 1162 / 620;
    --dc-w: min(1162px, 100vw - var(--side-pad) * 2);
  }

  .device-composite__monitor {
    left: 5.14%;
    top: 15.27%;
    width: 60.53%;
    height: 71.67%;
  }

  .device-composite__strip {
    left: 48.56%;
    top: 2.93%;
    width: 4.23%;
    height: 96.91%;
  }

  .device-composite__phone {
    left: 51.89%;
    top: 2.26%;
    width: 32.53%; /* 378 / 1162 */
    height: 97.74%; /* 606 / 620 */
  }

  .device-composite__phone-img {
    left: 4.23%; /* 16 / 378 */
    top: 2.8%; /* 17 / 606 */
    width: 91.53%; /* 346 / 378 */
    height: 94.39%; /* 572 / 606 */
  }

  .device-composite__phone-mask {
    left: -0.26%;
    top: 91.25%;
    width: 100%;
    height: 11.25%;
  }

  .device-composite__phone-frame {
    left: 5.75%;
    width: 87.83%;
  }

  .device-composite__phone-frame--body {
    top: 24.22%;
    height: 68.12%;
  }

  .device-composite__phone-frame--top {
    top: 8.59%;
    height: 11.25%;
  }

  .speech-bubble {
    height: 12.19%;
    padding: 0 calc(var(--dc-w) * 0.0195);
    font-size: calc(var(--dc-w) * 0.0195);
    letter-spacing: -0.04em;
  }

  .speech-bubble--r1 {
    left: 75.27%;
    top: 22.78%;
    width: 24.71%;
  }

  .speech-bubble--r2 {
    left: 75.27%;
    top: 0;
    width: 19.84%;
  }

  .speech-bubble--l1 {
    left: 0;
    top: 9.18%;
    width: 20%;
  }

  /* 서비스 쇼케이스 */
  .service-objects {
    gap: var(--gap-section);
  }

  .service-object {
    width: 300px; /* 원본 404px */
    height: auto;
    aspect-ratio: 404 / 344;
  }

  .service-labels {
    gap: 176px; /* 원본 236px — 위 오브젝트 줄과 정렬되는 간격 */
  }

  .service-label__pill {
    padding: 10px 18px;
    font-size: var(--fs-lead);
    letter-spacing: -0.04em;
  }

  .service-label__desc {
    font-size: var(--fs-label-lg);
    letter-spacing: -0.04em;
  }

  /* --- SECTION 5 --- */
  .section5__groups {
    gap: var(--gap-section);
  }

  .section5__desc {
    font-size: var(--fs-body);
  }

  .ref-group__title {
    font-size: var(--fs-title);
  }

  /* --- SECTION 6 --- */
  .section6 {
    gap: var(--gap-section);
  }

  .trust-card {
    gap: 100px; /* 원본 134px */
  }

  .trust-card__media {
    width: 540px; /* 원본 718px */
    height: auto;
    aspect-ratio: 718 / 280;
  }

  .trust-card__title {
    font-size: 38px; /* 원본 50px */
  }

  .trust-card__desc {
    font-size: var(--fs-body);
  }

  .trust-card__object--lock {
    width: 140px; /* 원본 187px */
    height: auto;
    aspect-ratio: 187.47 / 237.39;
  }

  .trust-card__object--trophy {
    width: 135px; /* 원본 180px */
    height: auto;
    aspect-ratio: 180 / 227.94;
    margin-left: 32px;
  }

  /* --- SECTION 7 --- */
  .section7__desc {
    font-size: var(--fs-body);
  }

  .btn {
    /* 패딩을 em으로 묶어 폰트와 같은 곡선으로 축소 (원본 18px 36px = 0.75em 1.5em) */
    padding: 0.75em 1.5em;
    font-size: var(--fs-body-lg);
  }

  .section7__recommend-title {
    font-size: var(--fs-title);
  }

  .bubble p {
    font-size: var(--fs-title-sm);
    white-space: normal;
  }

  /* --- SECTION 8 --- */
  .section8__title {
    font-size: 44px; /* 원본 58px */
  }

  .faq-item__q {
    font-size: var(--fs-body-lg);
  }

  .faq-item__answer p {
    font-size: var(--fs-body);
  }

  /* --- 상담신청 팝업 --- */
  .contact-popup__content {
    grid-template-columns: minmax(0, 1fr) minmax(0, calc(620px + var(--side-pad)));
    gap: 48px 80px;
    padding: 64px 0 0 var(--side-pad);
  }

  .contact-popup__eyebrow {
    font-size: var(--fs-label-lg);
  }

  .contact-popup__title {
    font-size: 48px;
  }

  .contact-popup__desc {
    font-size: var(--fs-lead);
  }

  .contact-form {
    padding-bottom: 80px;
  }

  .contact-form__fields {
    gap: 40px;
  }

  .contact-form__field label {
    margin-bottom: 14px;
    font-size: 26px;
  }

  .contact-form__field input {
    padding: 20px 62px 20px 20px;
    font-size: 20px;
  }

  .contact-form__clear {
    right: 16px;
    font-size: 32px;
  }

  .contact-form__agree {
    gap: 20px;
    margin-top: 44px;
  }

  .contact-form__check label {
    gap: 14px;
    font-size: 20px;
  }

  .contact-form__tick {
    width: 28px;
    height: 28px;
  }

  .contact-form__tick::after {
    top: 4px;
    left: 9px;
    width: 7px;
    height: 12px;
    border-width: 0 2px 2px 0;
  }

  .contact-form__policy-toggle {
    font-size: 28px;
  }

  .contact-form__policy {
    padding: 22px 24px;
  }

  .contact-form__policy dt,
  .contact-form__policy dd {
    font-size: 17px;
  }

  .contact-form__submit {
    margin-top: 52px;
    padding: 20px;
    font-size: 22px;
  }
}

/* ---------- ② 태블릿 (~1024px) ---------- */
@media (max-width: 1024px) {
  /* --- NAVBAR --- */
  .navbar__menu {
    gap: 16px;
  }

  .navbar__menu a {
    font-size: 14px;
  }

  .navbar__menu .navbar__cta {
    padding: 10px 20px;
    font-size: 16px;
  }

  /* --- HERO --- */
  .hero__title {
    font-size: 64px;
  }

  .hero__visual {
    width: min(640px, 76vw);
  }

  /* --- SECTION 1: 태블릿까지 3장 가로(row) 유지, ≤768에서 세로 스택. 3D 이미지는 흐름 안 상시 노출 --- */
  /* section1__cards는 기본 row를 그대로 두고(스택 안 함), 호버 확대가 없으니 상단 정렬 */
  .section1__cards {
    align-items: flex-start;
    min-height: 0; /* 팝업 이미지 자리 예약 불필요 */
  }

  /* 카드는 notebook의 flex:1 1 0을 그대로 써서 3장이 가로로 나뉜다.
     터치 기기: 활성(02)·호버 확대 인터랙션을 전부 끄고 3장을 대등하게 정적 배치.
     기본 호버 규칙(.role-card--muted:hover 등)이 특이도가 높아 같은 선택자로 다시 눌러쓴다. */
  .role-card,
  .role-card:hover,
  .role-card--outlined,
  .role-card--muted:hover,
  .section1__cards:has(.role-card--muted:hover) .role-card--outlined {
    padding: 0;
    color: var(--black);
    border-color: transparent;
    box-shadow: none;
  }

  /* 중앙(02) 래퍼의 강조용 오프셋 제거 — 세 카드 같은 높이에서 시작 */
  .role-card-center {
    padding-top: 0;
  }

  /* 번호는 세 카드 모두 퍼플로 통일, 호버해도 변하지 않는다 */
  .role-card__num,
  .role-card--outlined .role-card__num,
  .role-card--muted:hover .role-card__num,
  .section1__cards:has(.role-card--muted:hover) .role-card--outlined .role-card__num {
    color: #6a50f0;
  }

  /* 3D 이미지는 상시 노출 고정 — 호버로 사라지거나 나타나지 않는다 */
  .role-card__3d,
  .role-card--muted:hover .role-card__3d,
  .section1__cards:has(.role-card--muted:hover) .role-card--outlined .role-card__3d {
    opacity: 1;
    transform: none;
  }

  /* 3D 이미지: 흐름 안(카드 하단·오른쪽)에 상시 노출 */
  .role-card__3d {
    position: static;
    align-self: flex-end;
    width: 108px; /* 244→200 비율 축소 (원본 132px) */
    height: auto;
    aspect-ratio: 192 / 239;
    margin-top: 8px;
    opacity: 1;
    transform: none;
  }

  .role-card__title {
    font-size: 26px;
  }

  /* --- SECTION 2: 캐러셀 세로 스택 --- */
  .carousel {
    flex-direction: column;
  }

  .carousel__desc {
    width: 100%;
  }

  .carousel__title {
    font-size: 28px;
  }

  .device-card {
    flex: none;
    width: 100%;
  }

  /* --- SECTION 3: 루프 키워드 2×2 --- */
  .loop-list {
    flex-wrap: wrap;
    gap: 20px 24px;
  }

  .loop-item {
    flex: 1 1 calc(50% - 12px);
  }

  .loop-item__title {
    white-space: normal;
  }

  /* 좌 텍스트/우 링 2컬럼 → 세로 스택. 링은 가운데 정렬 + 활성 아이템 오버플로 여백 확보 */
  .section3__loop {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
  }

  .section3__loop-left {
    width: 100%;
  }

  /* 링 아이템이 박스 밖으로 삐져나오는 만큼(±약 90px) 아래위 여백을 넉넉히 확보 —
     하단 아이템과 '도입 효과' 헤딩이 붙어 보이지 않게 */
  .section3__ring {
    --rs: 0.56;
    margin: 110px auto 130px;
  }

  .benefit {
    min-height: 180px;
  }

  /* --- SECTION 4: 노트북+알림폰 합성을 그대로 두고 통째로 작게(중앙) 비례 축소.
     ① 티어의 %-기반 배치가 그대로 내려오므로 배치는 끄지 않고 컨테이너 폭만 줄인다.
     호버 전용 말풍선은 끄고, 같은 내용을 이미지 아래 정적 리스트로 보여준다. --- */
  .device-composite {
    width: min(440px, 100%);
    margin: 0 auto;
  }

  /* 합성이 작아진 만큼 폰 카드 모서리 R 도 함께 줄인다(24px 고정이면 과하게 둥글어 보임) */
  .device-composite__phone {
    border-radius: 14px;
  }

  .speech-bubble {
    display: none;
  }

  .device-composite-notes {
    display: flex;
    flex-direction: column;
    gap: 10px;
    list-style: none;
    margin: calc(24px - var(--section-pad-y)) 0 0; /* content gap(--section-pad-y)을 상쇄해 이미지 바로 아래 24px */
    padding: 0;
    font-size: var(--fs-body);
    color: var(--gray-2);
  }

  .device-composite-notes li {
    position: relative;
    padding-left: 16px;
  }

  .device-composite-notes li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #6a50f0;
  }

  .device-composite-notes strong {
    font-weight: 700;
    color: #6a50f0;
  }

  /* 서비스 쇼케이스: 오브젝트-라벨 쌍을 세로로 인터리브
     (display: contents로 두 그룹의 자식을 한 컬럼에 합치고 order로 짝 맞춤) */
  .service-showcase {
    gap: 16px;
    padding-top: 24px;
    padding-bottom: 16px;
  }

  .service-objects,
  .service-labels {
    display: contents;
  }

  .service-object {
    width: min(200px, 52vw);
  }

  .service-object:nth-child(1) { order: 1; }
  .service-label:nth-child(1)  { order: 2; margin-bottom: 32px; }
  .service-object:nth-child(2) { order: 3; }
  .service-label:nth-child(2)  { order: 4; margin-bottom: 32px; }
  .service-object:nth-child(3) { order: 5; }
  .service-label:nth-child(3)  { order: 6; }

  .service-label {
    gap: 12px;
  }

  .service-label__pill {
    font-size: 18px;
  }

  .service-label__desc {
    font-size: 20px;
  }

  /* --- SECTION 5: 브랜드 카드 축소 --- */
  .marquee {
    height: 190px;
  }

  .brand-card {
    width: 360px;
    height: 190px;
    padding: 24px;
  }

  .brand-card__name p {
    font-size: 22px;
  }

  /* --- SECTION 6: 텍스트 → 미디어 세로 스택 --- */
  .trust-cards {
    gap: 56px;
  }

  .trust-card {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }

  .trust-card__text {
    order: -1; /* 미디어가 먼저 오는 행도 텍스트부터 */
  }

  .trust-card__text--right {
    text-align: left;
  }

  .trust-card__media {
    width: 100%;
  }

  .trust-card__title {
    font-size: 26px;
  }

  /* --- SECTION 7: CTA 고정 해제, 세로 스택 --- */
  .section7 {
    flex-direction: column;
    gap: 64px;
  }

  .section7__cta {
    position: static;
    flex: none;
    width: 100%;
  }

  .section7__recommend {
    flex: none;
    width: 100%;
    align-items: flex-start;
  }

  /* --- SECTION 8 --- */
  .section8__title {
    font-size: 32px;
  }

  /* --- 상담신청 팝업 — 세로 스택 전환, 내부 스크롤 대신 레이어 전체 스크롤 --- */
  .contact-popup {
    overflow-y: auto;
  }

  .contact-popup__content {
    flex: none;
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
    padding: 40px var(--side-pad) 64px;
  }

  .contact-popup__title {
    font-size: var(--fs-display);
  }

  .contact-form {
    overflow: visible;
    padding-right: 0;
    padding-bottom: 0;
  }
}

/* ---------- ③ 모바일 가로 (~768px) ---------- */
@media (max-width: 768px) {
  /* --- NAVBAR: 햄버거 메뉴 도입 전 임시 — 로고 + CTA만 노출 --- */
  .navbar__menu a:not(.navbar__cta) {
    display: none;
  }

  .navbar__logo {
    font-size: 22px;
  }

  /* --- HERO --- */
  .hero {
    min-height: 640px;
  }

  .hero__title {
    font-size: 40px;
  }

  .hero__sub {
    padding: 4px 8px;
    white-space: normal;
  }

  .hero__visual {
    width: 100%;
  }

  .hero__content {
    margin-bottom: -12px;
  }

  /* --- SECTION 1: 모바일에선 카드를 세로로 스택(폭 100%) --- */
  .section1__cards {
    flex-direction: column;
    align-items: stretch;
  }

  .role-card {
    flex: none;
    width: 100%;
  }

  /* --- SECTION 2 --- */
  .tabs {
    gap: 8px;
  }

  .tab {
    padding: 0 8px;
    font-size: 15px;
  }

  .arrow {
    width: 40px;
    height: 40px;
  }

  .arrow img {
    width: 28px;
    height: 28px;
  }

  /* --- SECTION 3 --- */
  .loop-item {
    flex-basis: 100%;
  }

  .section3__ring {
    --rs: 0.36;
    margin: 90px auto 100px;
  }

  .benefit-list {
    flex-direction: column;
    gap: 16px;
  }

  .benefit {
    width: 100%;
    flex: none;
    padding: 28px 20px;
  }

  .benefit__title {
    font-size: 22px;
  }

  /* --- SECTION 5 --- */
  .marquee {
    height: 170px;
  }

  .brand-card {
    width: 300px;
    height: 170px;
    padding: 20px;
  }

  .brand-card__name p {
    font-size: 18px;
  }

  .brand-card__name span {
    font-size: 11px;
  }

  /* --- SECTION 7 --- */
  .section7__buttons {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .bubble-list {
    gap: 12px;
  }

  .bubble {
    padding: 12px 20px 12px 16px;
  }

  /* --- SECTION 8 --- */
  .section8 {
    gap: 32px;
  }

  .faq-item__header {
    padding: 20px 0;
  }

  .faq-item__toggle {
    font-size: 24px;
  }

  /* --- FOOTER --- */
  .footer {
    gap: 32px;
    padding-top: 48px;
    padding-bottom: 48px;
    white-space: normal;
  }

  .footer__company {
    font-size: 14px;
  }

  .footer__row {
    flex-wrap: wrap;
    gap: 4px 12px;
  }

  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  /* --- 상담신청 팝업 --- */
  .contact-popup__content {
    gap: 32px;
    padding-top: 24px;
    padding-bottom: 48px;
  }

  .contact-popup__title {
    font-size: var(--fs-display);
  }

  .contact-popup__close {
    font-size: 44px;
  }

  .contact-form__field label {
    font-size: 18px;
  }

  .contact-form__field input {
    padding: 15px 48px 15px 15px;
    font-size: 16px;
  }

  .contact-form__clear {
    font-size: 26px;
  }

  .contact-form__check label {
    align-items: flex-start;
    font-size: 16px;
  }

  .contact-form__tick {
    margin-top: 1px;
  }

  .contact-form__policy-toggle {
    font-size: 20px;
  }

  .contact-form__submit {
    margin-top: 32px;
    font-size: 18px;
  }
}

/* ---------- ④ 모바일 세로 (~360px) ---------- */
@media (max-width: 360px) {
  .hero__title {
    font-size: 36px;
  }

  .section3__ring {
    --rs: 0.3;
  }
}

/* ==========================================================================
   BI 로고 이미지 (헤더/푸터/팝업) — 기존 "growth it" 텍스트 대체
   ========================================================================== */
.navbar__logo img,
.footer__logo img,
.contact-popup__logo img {
  display: block;
  width: auto;
}
.navbar__logo img { height: 31px; }
.footer__logo img { height: 29px; }
.contact-popup__logo img { height: 31px; }

@media (max-width: 1024px) {
  .navbar__logo img { height: 28px; }
}
@media (max-width: 768px) {
  .navbar__logo img { height: 24px; }
  .footer__logo img { height: 24px; }
  .contact-popup__logo img { height: 28px; }
}

/* ==========================================================================
   개인정보처리방침 팝업 (.privacy-modal — 가운데 뜨는 다크 카드 모달)
   ========================================================================== */
.privacy-modal {
  position: fixed;
  inset: 0;
  z-index: 300; /* 상담팝업(200) 위 */
  display: grid;
  place-items: center;
  padding: 24px;
}
/* display: grid가 [hidden] UA 규칙을 이겨버리므로 숨김을 명시 */
.privacy-modal[hidden] {
  display: none;
}
.privacy-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  animation: cp-fade 0.3s ease;
}
.privacy-modal__dialog {
  position: relative;
  width: 100%;
  max-width: 640px;
  max-height: 85vh;
  overflow-y: auto;
  padding: 56px 48px 48px;
  background: var(--dark-2);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  animation: fade-up 0.4s var(--ease-out);
}
.privacy-modal__close {
  position: absolute;
  top: 20px;
  right: 24px;
  font-size: 40px;
  font-weight: 300;
  line-height: 1;
  color: #fff;
  transition: opacity 0.2s ease;
}
.privacy-modal__close:hover { opacity: 0.6; }
.privacy-modal__eyebrow {
  font-size: 20px;
  font-weight: 800;
  color: #6a50f0;
}
.privacy-modal__title {
  margin-top: 8px;
  font-size: 32px;
  font-weight: 900;
  line-height: 1.2;
  color: #fff;
}
.privacy-modal__body { margin-top: 32px; }
.privacy-modal__body dt {
  margin-top: 24px;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
}
.privacy-modal__body dt:first-child { margin-top: 0; }
.privacy-modal__body dd {
  margin-top: 6px;
  font-size: 16px;
  line-height: 1.7;
  color: #b8b8bf;
}
@media (max-width: 768px) {
  .privacy-modal__dialog { padding: 48px 24px 32px; border-radius: 16px; }
  .privacy-modal__title { font-size: 26px; }
  .privacy-modal__eyebrow { font-size: 18px; }
  .privacy-modal__body dt { font-size: 16px; }
  .privacy-modal__body dd { font-size: 15px; }
}