<script setup lang="ts">
// 메인(채용 홈) — Hero / About / 브랜드 / Growth / People / CTA
useHead({ title: '이너탭 (innertab)' })

// 브랜드 타일 데이터
interface BrandTile {
  name: string
  img: string
  feature?: boolean
}
const brands: BrandTile[] = [
  { name: 'selite', img: '/images/img-selite.png', feature: true },
  { name: 'INNERDYSET', img: '/images/img-innerdyset.png' },
  { name: 'recurely', img: '/images/img-recurely.png' },
  { name: 'innerzen', img: '/images/img-innerzen.png' },
  { name: 'retriq', img: '/images/img-retriq.png' },
]

// 성장 지표 데이터
interface Stat {
  title: string
  value: number
  unit: string
  desc: string
}
const stats: Stat[] = [
  { title: '운영 브랜드', value: 5, unit: '개', desc: '서로 다른 문제를 해결하기 위해\n각기 다른 브랜드를 정교하게 설계했습니다.' },
  { title: '누적 매출', value: 150, unit: '억', desc: '고객의 믿음과 선택으로\n이너탭은 꾸준히 성장해왔습니다.' },
  { title: '연 평균 성장률', value: 320, unit: '%', desc: '끊임없는 도전과 실행으로\n이너탭은 더 빠르게 확장하고 있습니다.' },
  { title: '더 나은 일상을 연구한 시간', value: 1200, unit: '일', desc: '작은 변화가 만드는 큰 차이를\n매일 관찰하고 개선해왔습니다.' },
]

// 주요 연혁
const history: string[] = [
  '일 최대 매출 4,500만원 달성',
  '미국 법인 설립',
  '홍콩 법인 설립',
  '한국 소비자 평가 대상 2회',
]

// 구성원 카드 (실제 사진 준비 전 — 플레이스홀더)
interface PeopleCard {
  label: string
  shape: 'tall' | 'wide'
  title: string
  desc: string
}
const peopleColA: PeopleCard[] = [
  { label: '회사 사진 — 종무식', shape: 'tall', title: '2025 이너탭 종무식 : “Together, We Rise”', desc: '함께 만든 시간, 더 높이 올라가기 위한 시작' },
  { label: '회사 사진 — 인터뷰', shape: 'wide', title: '꿈은 크게, 실행은 집요하게!', desc: '브랜드사업본부장, 조이' },
]
const peopleColB: PeopleCard[] = [
  { label: '회사 사진 — 구성원', shape: 'wide', title: '2025 Innertab Superookie', desc: '최고의 순간은 함께 만든 성장 속에서 — 슈퍼루키 5인의 성장 스토리' },
  { label: '회사 사진 — 인터뷰', shape: 'tall', title: '실험·회고·학습으로 실제로 팔리는 브랜드를 만듭니다', desc: '글로벌사업본부 영미권실장, Gaby' },
]
</script>

<template>
  <div>
    <AppHeader variant="home" />

    <!-- ===================== HERO ===================== -->
    <section class="hero">
      <div class="hero-video"><span class="ph-label">▶ Hero Video</span></div>
      <div class="scroll-hint"><span>SCROLL</span><i /></div>
    </section>

    <!-- ===================== ABOUT ===================== -->
    <section id="mission" class="about">
      <div class="wrap">
        <div class="inner">
          <p v-reveal class="m-eyebrow">ABOUT ITAB</p>
          <p v-reveal="{ delay: 80 }" class="m-lead">누군가의 매일을 더 낫게 만드는 일,</p>
          <h2 v-reveal="{ delay: 160 }" class="m-title">이너탭은 <mark>그 답</mark>을 제시합니다.</h2>

          <p v-reveal class="about-intro">매일은 당연한 의문들로 시작됩니다.</p>
          <ul class="q-list">
            <li v-reveal="{ delay: 60 }">더 가뿐한 아침은 불가능할까?</li>
            <li v-reveal="{ delay: 160 }">더 단단한 나를 만드는 방법은 무엇일까?</li>
          </ul>

          <div v-reveal class="about-statement">
            <p>이너탭은 질문에 답하는 무게가 다릅니다.</p>
            <p>타협 없는 설계로 본질을 짚고, 데이터와 결과로 증명합니다.</p>
            <p>우리는 안주하지 않습니다.</p>
            <p class="closing">사람의 매일이 닿는 모든 곳에서,<br >우리는 가장 앞선 답을 증명합니다.</p>
          </div>
        </div>

        <!-- 브랜드 벤토 그리드 -->
        <div id="brands" class="brand-bento">
          <article
            v-for="(brand, i) in brands"
            :key="brand.name"
            v-reveal:scale="{ delay: i * 70 }"
            class="btile"
            :class="{ feature: brand.feature }"
          >
            <img :src="brand.img" :alt="`${brand.name} 브랜드 이미지`" >
            <div class="tile-overlay" />
            <span class="tile-name">{{ brand.name }}</span>
            <span class="tile-arrow" aria-hidden="true">↗</span>
          </article>
        </div>
      </div>
    </section>

    <!-- ===================== GROWTH ===================== -->
    <section id="growth" class="growth">
      <div class="growth-bg"><span class="bg-label">BACKGROUND VIDEO</span></div>
      <div class="wrap">
        <div class="growth-head">
          <p v-reveal class="m-eyebrow">Growth</p>
          <h2 v-reveal="{ delay: 100 }">우리가 만든 변화를 증명하며,<br >끊임없이 성장하고 있습니다.</h2>
        </div>

        <div class="growth-layout">
          <div class="stat-grid">
            <div
              v-for="(stat, i) in stats"
              :key="stat.title"
              v-reveal="{ delay: i * 90 }"
              class="gcard stat-card"
            >
              <div class="stat-orb" />
              <div class="gcard-title">{{ stat.title }}</div>
              <div class="stat-big">
                <CountUp :value="stat.value" /><small>{{ stat.unit }}</small><span class="plus">+</span>
              </div>
              <p class="stat-desc">
                <template v-for="(line, li) in stat.desc.split('\n')" :key="li">
                  {{ line }}<br v-if="li === 0" >
                </template>
              </p>
            </div>
          </div>

          <div v-reveal="{ delay: 120 }" class="gcard history-card">
            <div class="gcard-title">주요 연혁 내역</div>
            <ul class="timeline">
              <li v-for="(item, i) in history" :key="i" v-reveal="{ delay: 200 + i * 90 }">
                <span class="t-text">{{ item }}</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </section>

    <!-- ===================== PEOPLE ===================== -->
    <section id="people" class="people">
      <div class="wrap">
        <div class="people-head">
          <p v-reveal class="people-lead">이너탭은</p>
          <h2 v-reveal="{ delay: 100 }">구성원들과 함께 성장합니다.</h2>
        </div>
        <div class="people-cols">
          <div class="pcol pcol-a">
            <article v-for="(card, i) in peopleColA" :key="i" v-reveal="{ delay: i * 120 }" class="pcard">
              <div class="pshot" :class="card.shape">
                <ImagePlaceholder :label="card.label" />
              </div>
              <h3>{{ card.title }}</h3>
              <p>{{ card.desc }}</p>
            </article>
          </div>
          <div class="pcol pcol-b">
            <article v-for="(card, i) in peopleColB" :key="i" v-reveal="{ delay: 80 + i * 120 }" class="pcard">
              <div class="pshot" :class="card.shape">
                <ImagePlaceholder :label="card.label" />
              </div>
              <h3>{{ card.title }}</h3>
              <p>{{ card.desc }}</p>
            </article>
          </div>
        </div>
      </div>
    </section>

    <!-- ===================== CTA ===================== -->
    <section id="cta" class="cta">
      <div class="cta-bg" />
      <div class="cta-overlay" />
      <div class="wrap">
        <div class="cta-inner">
          <h2 v-reveal>바로 지금,<br >이너탭의 여정에 함께 하세요!</h2>
          <p v-reveal="{ delay: 120 }">저희와 함께 더 큰 성장을 만들어 나갈 구성원을 기다리고 있습니다.</p>
          <div v-reveal="{ delay: 240 }" class="cta-btns">
            <NuxtLink to="/coffee-chat" class="btn btn-primary">커피챗 신청하기</NuxtLink>
          </div>
        </div>
      </div>
    </section>

    <AppFooter />
  </div>
</template>

<style scoped>
/* ===================== HERO ===================== */
.hero {
  position: relative;
  min-height: clamp(35rem, 86vh, 51.25rem); /* 560~820px */
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.hero-video {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, #161d33 0%, #202a44 55%, #33415f 100%);
  /* 로드 시 살짝 확대된 상태에서 천천히 안착 (Ken Burns) */
  animation: hero-settle 2.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes hero-settle {
  from {
    transform: scale(1.12);
  }
  to {
    transform: scale(1);
  }
}

.hero-video .ph-label {
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.9375rem; /* 15px */
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  animation: hero-fade-in 1.2s ease 0.4s both;
}

@keyframes hero-fade-in {
  from {
    opacity: 0;
    transform: translateY(0.5rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.scroll-hint {
  position: absolute;
  bottom: 1.75rem; /* 28px */
  right: var(--pad);
  z-index: 2;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.75rem; /* 12px */
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem; /* 10px */
  animation: hero-fade-in 1.2s ease 0.7s both;
}

.scroll-hint span {
  writing-mode: vertical-rl;
}

.scroll-hint i {
  position: relative;
  width: 0.0625rem; /* 1px */
  height: 2.875rem; /* 46px */
  background: rgba(255, 255, 255, 0.25);
  display: block;
  overflow: hidden;
}

/* 라인을 따라 아래로 흐르는 펄스 — 스크롤 유도 */
.scroll-hint i::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.9);
  animation: scroll-pulse 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes scroll-pulse {
  0% {
    top: -100%;
  }
  60%,
  100% {
    top: 100%;
  }
}

/* ===================== ABOUT ===================== */
.about {
  padding: clamp(4.5rem, 11vw, 9.375rem) 0; /* 72~150px */
  background: var(--white);
}

.about .inner {
  max-width: 100%; /* 사이트 폭(.wrap)에 맞춰 브랜드 벤토와 동일하게 */
  margin: 0 auto;
}

.m-eyebrow {
  font-size: 1.4375rem; /* 23px */
  font-weight: 700;
  color: var(--label);
  font-family: var(--font-display);
  letter-spacing: 0.1em;
}

.m-lead {
  font-size: clamp(1rem, 1.7vw, 1.25rem); /* 16~20px */
  color: var(--ink-soft);
  font-weight: 500;
  margin-top: 1.875rem; /* 30px */
}

.m-title {
  font-size: clamp(1.875rem, 4.4vw, 3.375rem); /* 30~54px */
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.3;
  margin-top: 0.875rem; /* 14px */
}

.m-title mark {
  background: var(--brand);
  color: var(--white);
  padding: 0.04em 0.14em;
  border-radius: 0.125rem; /* 2px */
}

.about-intro {
  font-size: clamp(1rem, 1.5vw, 1.1875rem); /* 16~19px */
  color: var(--ink-soft);
  margin-top: clamp(2.5rem, 5vw, 4rem); /* 40~64px */
}

.q-list {
  list-style: none;
  margin-top: 1.375rem; /* 22px */
  display: flex;
  flex-direction: column;
  gap: 0.875rem; /* 14px */
}

.q-list li {
  font-size: clamp(1.25rem, 2.4vw, 1.875rem); /* 20~30px */
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.35;
  padding-left: 1.625rem; /* 26px */
  position: relative;
}

.q-list li::before {
  content: 'Q.';
  position: absolute;
  left: 0;
  top: 0.08em;
  color: var(--label);
  font-weight: 800;
  font-size: 0.78em;
}

.about-statement {
  margin-top: clamp(3.5rem, 7vw, 6rem); /* 56~96px */
  padding-top: clamp(2.5rem, 5vw, 3.75rem); /* 40~60px */
  border-top: 0.0625rem solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 0.25rem; /* 4px */
}

.about-statement p {
  font-size: clamp(1rem, 1.6vw, 1.25rem); /* 16~20px */
  color: var(--ink-soft);
  line-height: 1.5;
}

.about-statement .closing {
  font-size: clamp(1.375rem, 2.6vw, 2.125rem); /* 22~34px */
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.4;
  margin-top: 0.875rem; /* 14px */
}

/* ===================== 브랜드 벤토 ===================== */
.brand-bento {
  margin-top: clamp(3.5rem, 7vw, 6rem); /* 56~96px */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: auto;
  gap: clamp(0.75rem, 1.4vw, 1.125rem); /* 12~18px */
}

.btile {
  position: relative;
  overflow: hidden;
  border-radius: 1.25rem; /* 20px */
  aspect-ratio: 1;
  background: #11151f;
  cursor: pointer; /* 이미지 위에서 포인터 커서 */
}

.btile.feature {
  /* 가로로 2칸 차지하는 와이드 타일 — 가로(landscape) 이미지가 잘리지 않도록 */
  grid-column: span 2;
  aspect-ratio: 2 / 1;
}

.btile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.btile:hover img {
  transform: scale(1.05); /* 호버 시 이미지 확대 */
}

.btile .tile-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to top, rgba(8, 11, 18, 0.78) 0%, rgba(8, 11, 18, 0.25) 34%, transparent 60%);
}

.btile .tile-name {
  position: absolute;
  left: clamp(1.25rem, 2vw, 1.875rem); /* 20~30px */
  bottom: clamp(1.25rem, 2vw, 1.75rem); /* 20~28px */
  z-index: 3;
  color: #fff;
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1;
  text-transform: uppercase;
  font-size: clamp(1.125rem, 1.6vw, 1.5rem); /* 18~24px */
  pointer-events: none;
  text-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.35);
}

.btile.feature .tile-name {
  font-size: clamp(1.75rem, 2.8vw, 2.625rem); /* 28~42px */
}

.btile .tile-arrow {
  position: absolute;
  right: clamp(1rem, 1.6vw, 1.375rem); /* 16~22px */
  bottom: clamp(1rem, 1.6vw, 1.375rem);
  z-index: 3;
  width: 2.875rem; /* 46px */
  height: 2.875rem;
  border-radius: 50%;
  border: 0.09375rem solid rgba(255, 255, 255, 0.7); /* 1.5px */
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 1.0625rem; /* 17px */
  pointer-events: none;
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.btile:hover .tile-arrow {
  background: #fff;
  color: var(--brand);
  transform: translateY(-0.125rem);
}

/* ===================== GROWTH ===================== */
.growth {
  position: relative;
  padding: clamp(4.5rem, 11vw, 9.375rem) 0; /* 72~150px */
  overflow: hidden;
}

.growth-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 16% 24%, rgba(255, 255, 255, 0.55), transparent 20%),
    radial-gradient(circle at 70% 62%, rgba(255, 255, 255, 0.4), transparent 16%),
    radial-gradient(circle at 88% 16%, rgba(255, 255, 255, 0.45), transparent 13%),
    radial-gradient(circle at 38% 82%, rgba(255, 255, 255, 0.4), transparent 16%),
    radial-gradient(circle at 58% 38%, rgba(120, 128, 136, 0.45), transparent 32%),
    linear-gradient(125deg, #aeb6bc 0%, #cbd1d6 46%, #a6aeb4 100%);
}

.bg-label {
  position: absolute;
  right: 1.125rem; /* 18px */
  bottom: 0.875rem; /* 14px */
  font-family: var(--font-display);
  font-size: 0.75rem; /* 12px */
  letter-spacing: 0.18em;
  color: rgba(40, 50, 70, 0.32);
}

.growth .wrap {
  position: relative;
  z-index: 1;
}

.growth-head {
  text-align: center;
  margin-bottom: clamp(2.5rem, 5vw, 4.375rem); /* 40~70px */
}

.growth-head .m-eyebrow {
  margin-bottom: 1.125rem; /* 18px */
}

.growth-head h2 {
  font-size: clamp(1.75rem, 4.2vw, 3.125rem); /* 28~50px */
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.32;
  color: var(--ink);
}

.growth-layout {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: clamp(1rem, 1.8vw, 1.5rem); /* 16~24px */
  align-items: stretch;
}

.stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 1.8vw, 1.5rem);
}

.gcard {
  position: relative;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(0.375rem) saturate(1.1);
  -webkit-backdrop-filter: blur(0.375rem) saturate(1.1);
  border: 0.0625rem solid rgba(255, 255, 255, 0.5);
  border-radius: 1.5rem; /* 24px */
  padding: clamp(1.625rem, 2.6vw, 2.375rem); /* 26~38px */
  box-shadow: 0 1.25rem 3.125rem -2.125rem rgba(30, 40, 60, 0.5);
  overflow: hidden;
}

.gcard-title,
.stat-big,
.stat-desc,
.timeline {
  position: relative;
  z-index: 1;
}

.stat-card {
  display: flex;
  flex-direction: column;
}

.stat-card .stat-orb {
  position: absolute;
  z-index: 0;
  width: clamp(9.375rem, 17vw, 12.5rem); /* 150~200px */
  aspect-ratio: 1;
  border-radius: 50%;
  left: 1rem; /* 16px — 카드 안쪽으로 이동 */
  top: 3.75rem; /* 60px */
  /* 가장자리를 투명하게 → 하드한 동그라미 테두리 제거 */
  background: radial-gradient(
    circle at 50% 42%,
    rgba(255, 255, 255, 0.95),
    rgba(255, 255, 255, 0.55) 54%,
    rgba(255, 255, 255, 0) 78%
  );
}

.gcard-title {
  font-size: 1.0625rem; /* 17px */
  font-weight: 700;
  color: var(--ink);
}

.stat-card .stat-big {
  font-size: clamp(2.5rem, 5vw, 3.75rem); /* 40~60px */
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ink);
  line-height: 1;
  margin: clamp(1.75rem, 4vw, 3rem) 0 clamp(1.25rem, 3vw, 1.875rem);
}

.stat-card .stat-big small {
  font-size: 0.36em;
  font-weight: 700;
  margin-left: 0.1875rem; /* 3px */
  letter-spacing: 0;
}

.plus {
  display: inline-grid;
  place-items: center;
  width: 1.125rem; /* 18px */
  height: 1.125rem;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: 0.6875rem; /* 11px */
  font-weight: 700;
  vertical-align: top;
  margin-left: 0.25rem; /* 4px */
}

.stat-card .stat-desc {
  font-size: 0.875rem; /* 14px */
  color: var(--ink-soft);
  line-height: 1.65;
  margin-top: auto;
}

.history-card {
  display: flex;
  flex-direction: column;
}

.timeline {
  list-style: none;
  margin-top: clamp(1.25rem, 2.5vw, 1.875rem); /* 20~30px */
  display: flex;
  flex-direction: column;
}

.timeline li {
  display: flex;
  gap: 1.125rem; /* 18px */
  align-items: baseline;
  padding: clamp(0.9375rem, 1.6vw, 1.1875rem) 0; /* 15~19px */
  border-top: 0.0625rem solid rgba(40, 50, 70, 0.1);
}

.timeline li:first-child {
  border-top: 0;
}

.timeline .t-text {
  font-size: 0.9375rem; /* 15px */
  color: var(--ink);
  font-weight: 500;
  line-height: 1.4;
}

/* ===================== PEOPLE ===================== */
.people {
  padding: clamp(4.5rem, 11vw, 9.375rem) 0; /* 72~150px */
}

.people-lead {
  font-size: clamp(1.125rem, 1.9vw, 1.5rem); /* 18~24px */
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.people-head h2 {
  font-size: clamp(1.875rem, 4.4vw, 3.5rem); /* 30~56px */
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.18;
  color: var(--ink);
  margin-top: 0.625rem; /* 10px */
}

.people-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 2.6vw, 2.75rem); /* 24~44px */
  margin-top: clamp(2.25rem, 4.5vw, 3.75rem); /* 36~60px */
  align-items: start;
}

.pcol {
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 5vw, 4.5rem); /* 40~72px */
}

.pcol-b {
  margin-top: clamp(3rem, 7vw, 6.5rem); /* 48~104px */
}

.pcard {
  cursor: pointer;
}

.pcard .pshot {
  position: relative;
  width: 100%;
  border-radius: 1rem; /* 16px */
  overflow: hidden;
  background: #edeff2;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.pcard .pshot.tall {
  aspect-ratio: 4 / 5;
}

.pcard .pshot.wide {
  aspect-ratio: 4 / 3;
}

.pcard:hover .pshot {
  box-shadow: 0 1.625rem 3.5rem -2rem rgba(30, 40, 60, 0.5);
  transform: translateY(-0.25rem); /* -4px */
}

.pcard h3 {
  font-size: clamp(1.125rem, 1.7vw, 1.375rem); /* 18~22px */
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-top: 1.25rem; /* 20px */
  line-height: 1.4;
}

.pcard p {
  font-size: clamp(0.8125rem, 1.2vw, 0.9375rem); /* 13~15px */
  color: var(--ink-soft);
  margin-top: 0.5rem; /* 8px */
  line-height: 1.55;
}

/* ===================== CTA ===================== */
.cta {
  position: relative;
  overflow: hidden;
  padding: clamp(4.5rem, 10vw, 8rem) 0; /* 72~128px — 높이 축소 */
}

.cta-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* 배너 이미지 배경 */
  background: url('/images/img-banner.png') center / cover no-repeat;
}

.cta-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* 더 어둡게 */
  background: linear-gradient(90deg, rgba(16, 13, 9, 0.82) 0%, rgba(16, 13, 9, 0.7) 60%, rgba(16, 13, 9, 0.6) 100%);
}

.cta .wrap {
  position: relative;
  z-index: 2;
}

.cta-inner {
  color: var(--white);
  max-width: 45rem; /* 720px */
}

.cta-inner h2 {
  font-size: clamp(1.75rem, 4.2vw, 3.25rem); /* 28~52px */
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.cta-inner p {
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(0.9375rem, 1.5vw, 1.125rem); /* 15~18px */
  margin-top: 1.125rem; /* 18px */
}

.cta-btns {
  display: flex;
  gap: 0.875rem; /* 14px */
  margin-top: clamp(2rem, 4vw, 3rem); /* 32~48px */
  flex-wrap: wrap;
}

/* ===================== 반응형 ===================== */
@media (max-width: 56.25rem) {
  /* 900px */
  .growth-layout {
    grid-template-columns: 1fr;
  }

  .brand-bento {
    grid-template-columns: 1fr 1fr;
  }

  .btile.feature {
    grid-row: auto;
    grid-column: span 2;
    aspect-ratio: 16 / 10;
  }
}

@media (max-width: 32.5rem) {
  /* 520px */
  .brand-bento {
    grid-template-columns: 1fr;
  }

  .btile.feature {
    grid-column: auto;
    aspect-ratio: 1; /* 1열에서는 다른 타일과 동일한 정사각 비율 */
  }

  /* Growth 스탯: 가장 작은 화면에서는 2x2 → 1열 나열 */
  .stat-grid {
    grid-template-columns: 1fr;
  }

  .people-cols {
    grid-template-columns: 1fr;
    gap: clamp(2.5rem, 8vw, 4rem);
  }

  .pcol {
    gap: clamp(2.5rem, 8vw, 4rem);
  }

  .pcol-b {
    margin-top: 0;
  }

  .pcard .pshot.tall,
  .pcard .pshot.wide {
    aspect-ratio: 4 / 3;
  }
}

/* 모션 최소화 선호 시 히어로/호버 애니메이션 비활성화 */
@media (prefers-reduced-motion: reduce) {
  .hero-video,
  .hero-video .ph-label,
  .scroll-hint,
  .scroll-hint i::after {
    animation: none !important;
  }

  .btile img {
    transition: none;
  }

  .btile:hover img {
    transform: none;
  }
}
</style>
