/* ===================== 홈페이지 전용 ===================== */

/* 히어로 타이틀은 홈에서만 더 크게 */
.hero-title{
  font-size:clamp(38px, 6.8vw, 80px);
  font-weight:800; line-height:1.3; letter-spacing:-1.5px;
}
.hero-title span{ color:var(--gold); }
.hero-sub{
  margin-top:26px; font-size:clamp(15px, 1.5vw, 19px);
  color:#e8e8e8; line-height:1.85;
}

/* 서비스 미리보기 카드 (6개, 상세페이지로 연결되는 요약형) */
.service-preview-grid{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:18px; margin-top:44px; max-width:1100px;
}

.sp-card{
  position:relative; border-radius:14px; overflow:hidden; height:280px;
  display:flex; align-items:flex-end; text-align:left;
  transition: transform .5s cubic-bezier(.22,.61,.36,1), box-shadow .5s ease;
}
.sp-card:hover{
  transform: translateY(-10px);
  box-shadow: 0 28px 50px rgba(0,0,0,.5);
}

/* 배경 이미지 레이어 (줌 + 어두워짐 효과) */
.sp-card-bg{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  transform:scale(1);
  transition: transform .7s cubic-bezier(.22,.61,.36,1), filter .7s ease;
  z-index:0;
}
.sp-card:hover .sp-card-bg{
  transform:scale(1.15);
  filter:brightness(.8);
}

/* 하단 그라데이션 오버레이 */
.sp-card::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(11,17,32,0) 30%, rgba(5,8,16,.92) 100%);
  z-index:1;
}

/* 우상단 플러스 배지 (회전하며 팝업) */
.sp-card-badge{
  position:absolute; top:18px; right:18px; z-index:3;
  width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.4);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:19px; font-weight:300;
  opacity:0; transform:scale(.4) rotate(-60deg);
  transition: all .45s cubic-bezier(.34,1.56,.64,1);
}
.sp-card:hover .sp-card-badge{
  opacity:1; transform:scale(1) rotate(0deg);
  background:var(--gold); border-color:var(--gold); color:var(--navy-deep);
}

.sp-card-body{
  position:relative; z-index:2; padding:22px; width:100%;
  transition: transform .45s ease;
}
.sp-card:hover .sp-card-body{ transform: translateY(-4px); }

.sp-card-num{ font-size:12px; color:var(--gold); font-weight:700; letter-spacing:.1em; }

/* 제목 밑줄 드로잉 효과 */
.sp-card-title{
  position:relative; margin-top:6px; font-size:18px; font-weight:800;
  padding-bottom:8px; display:inline-block;
}
.sp-card-title::after{
  content:""; position:absolute; left:0; bottom:0;
  width:0; height:2px; background:var(--gold);
  transition:width .5s ease;
}
.sp-card:hover .sp-card-title::after{ width:38px; }

.sp-card-desc{ margin-top:2px; font-size:12.5px; color:#ccc; line-height:1.5; }

.sp-card-link{
  margin-top:12px; display:inline-flex; align-items:center; gap:4px;
  font-size:12.5px; color:var(--gold); font-weight:700;
}
.sp-card-link .arrow{ display:inline-block; transition:transform .4s ease; }
.sp-card:hover .sp-card-link .arrow{ transform:translateX(7px); }

@media (max-width:900px){
  .service-preview-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:600px){
  .service-preview-grid{ grid-template-columns:1fr; }
  .sp-card{ height:220px; }
}

/* 철학 티저 하단 링크 */
.philosophy-more{
  margin-top:34px; display:inline-block; font-size:14px; color:var(--gold);
  border-bottom:1px solid var(--gold); padding-bottom:4px; font-weight:700;
}

/* 최종 CTA 배너 */
.home-cta-banner{ min-height:65vh; }

/* ===== 브랜드 영상 섹션 ===== */
.video-section {
 /* background: #05080F;*/
  padding: 130px 24px 150px;
  text-align: center;
}

/* 브랜드 필름 섹션은 다른 섹션보다 오버레이를 밝게 조정 */
.video-section::after {
  background: linear-gradient(180deg, rgba(11,17,32,.35) 0%, rgba(11,17,32,.55) 100%);
}

.video-section .section-title {
  color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,.5);
}
.video-section .section-desc {
  color: #f0f0f0;
  text-shadow: 0 1px 6px rgba(0,0,0,.4);
}
.video-section .eyebrow {
  text-shadow: 0 1px 6px rgba(0,0,0,.4);
}


.video-inner {
  position: relative;
  z-index: 2;
  max-width: 900px;
  margin: 0 auto;
}

.video-frame {
  position: relative;
  width: 320px;
  aspect-ratio: 9 / 16;
  margin: 50px auto 0;
  border-radius: 22px;
  overflow: hidden;
  border: 3px solid rgba(212,175,55,0.45);
  box-shadow: 0 30px 70px rgba(0,0,0,0.5);
  background: #000;
}

.video-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(1.18) contrast(1.05);
}


.video-toggle-sound {
  position: absolute;
  bottom: 16px;
  right: 16px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  z-index: 2;
  transition: background 0.3s;
}
.video-toggle-sound:hover { background: rgba(212,175,55,0.85); color:#0B1F3A; }

/* 모바일 대응 */
@media (max-width: 600px) {
  .video-frame { width: 78vw; max-width: 300px; }
  .video-section { padding: 90px 20px 110px; }
}