.main-banner-video {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background-color: #05070f;
}

.main-banner-video video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
    transition: all 1.2s cubic-bezier(0.215, 0.61, 0.355, 1);
    opacity: 1;
    filter: brightness(0.9) contrast(1.05) saturate(1.02);
}

.main-banner-video video.fade-out {
    opacity: 0.2;
}

.main-banner-video video.fade-in {
    opacity: 1;
    transition: opacity 0.8s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.main-banner-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 2;
    padding: 90px 20px 120px;
    box-sizing: border-box;
}

/* 🔹 히어로 카피 레이아웃 */
.hero-copy {
    position: relative;
    width: min(94%, 1120px);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* 🔹 등장 애니메이션 (blur + rise, 순차 지연) */
.hero-eyebrow,
.hero-line,
.banner-accent-line,
.hero-rotator,
.hero-badges,
.hero-cta {
    opacity: 0;
    transform: translateY(28px);
    filter: blur(10px);
    transition:
        opacity 0.95s cubic-bezier(0.19, 1, 0.22, 1),
        transform 0.95s cubic-bezier(0.19, 1, 0.22, 1),
        filter 0.95s cubic-bezier(0.19, 1, 0.22, 1);
    transition-delay: var(--d, 0s);
}

.is-revealed .hero-eyebrow,
.is-revealed .hero-line,
.is-revealed .banner-accent-line,
.is-revealed .hero-rotator,
.is-revealed .hero-badges,
.is-revealed .hero-cta {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

.hero-eyebrow { --d: 0.05s; }
.hero-line:nth-child(1) { --d: 0.18s; }
.hero-line:nth-child(2) { --d: 0.32s; }
.banner-accent-line { --d: 0.50s; }
.hero-rotator { --d: 0.62s; }
.hero-badges { --d: 0.74s; }
.hero-cta { --d: 0.86s; }

/* 🔹 상단 아이브로우 */
.hero-eyebrow {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0 0 26px;
    font-size: clamp(0.72rem, 1vw, 0.86rem);
    font-weight: 500;
    letter-spacing: 0.34em;
    color: rgba(255, 255, 255, 0.78);
    text-indent: 0.34em;
}

.hero-eyebrow::before,
.hero-eyebrow::after {
    content: '';
    width: 36px;
    height: 1px;
    background: rgba(255, 255, 255, 0.5);
}

/* 🔹 메인 헤드라인 */
.hero-headline {
    margin: 0;
    font-size: clamp(2rem, 5.2vw, 4.2rem);
    font-weight: 700;
    line-height: 1.24;
    letter-spacing: -0.025em;
    color: #fff;
    text-shadow: 0 4px 34px rgba(0, 0, 0, 0.45);
}

.hero-line {
    display: block;
}

.hero-word {
    display: inline-block;
}

/* 🔹 강조 텍스트 - 그라데이션 shimmer */
.hero-accent-wrap {
    position: relative;
    display: inline-block;
}

.hero-accent {
    font-style: normal;
    background-image: linear-gradient(
        100deg,
        #ffffff 0%,
        #c3d2ff 22%,
        #4d6de3 44%,
        #c3d2ff 66%,
        #ffffff 100%
    );
    background-size: 250% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: heroShimmer 6s linear infinite;
}

.hero-accent-wrap::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.1em;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, transparent, #4d6de3, #a9bfff, transparent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 1.1s cubic-bezier(0.19, 1, 0.22, 1) 1.15s;
}

.is-revealed .hero-accent-wrap::after {
    transform: scaleX(1);
}

@keyframes heroShimmer {
    0%   { background-position: 150% 0; }
    100% { background-position: -150% 0; }
}

/* 🔹 세로 구분선 */
.banner-accent-line {
    width: 1px;
    height: 44px;
    margin: 26px 0 22px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0));
}

/* 🔹 회전 서브 카피 */
.hero-rotator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    margin: 0 0 32px;
    min-height: 1.7em;
    font-size: clamp(0.95rem, 1.6vw, 1.28rem);
    font-weight: 300;
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}

.hero-rotator-text {
    display: inline-block;
    transition: opacity 0.42s ease, transform 0.42s ease;
}

.hero-rotator.is-swapping .hero-rotator-text {
    opacity: 0;
    transform: translateY(-10px);
}

.hero-caret {
    display: inline-block;
    width: 2px;
    height: 1.05em;
    background: #a9bfff;
    animation: heroCaret 1.1s steps(1) infinite;
}

@keyframes heroCaret {
    0%, 49%   { opacity: 1; }
    50%, 100% { opacity: 0; }
}

/* 🔹 신뢰 배지 */
.hero-badges {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 0 0 36px;
    padding: 0;
}

.hero-badges li {
    padding: 9px 19px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font-size: clamp(0.75rem, 1.05vw, 0.9rem);
    font-weight: 400;
    color: rgba(255, 255, 255, 0.88);
}

.hero-badges b {
    font-weight: 700;
    color: #fff;
}

/* 🔹 메인 CTA */
.hero-cta {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 38px;
    border-radius: 999px;
    font-size: clamp(0.9rem, 1.2vw, 1.02rem);
    font-weight: 600;
    letter-spacing: 0.01em;
    color: #0d1b3d;
    text-decoration: none;
    background: linear-gradient(135deg, #ffffff 0%, #dde5ff 100%);
    box-shadow: 0 10px 40px rgba(77, 109, 227, 0.35);
    transition:
        transform 0.45s cubic-bezier(0.19, 1, 0.22, 1),
        box-shadow 0.45s ease,
        opacity 0.95s cubic-bezier(0.19, 1, 0.22, 1),
        filter 0.95s cubic-bezier(0.19, 1, 0.22, 1);
}

.hero-cta:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 52px rgba(77, 109, 227, 0.5);
}

.hero-cta-arrow {
    transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}

.hero-cta:hover .hero-cta-arrow {
    transform: translateX(6px);
}

/* CTA 위를 지나가는 광택 */
.hero-cta::after {
    content: '';
    position: absolute;
    top: 0;
    left: -120%;
    width: 55%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.75), transparent);
    transform: skewX(-20deg);
    animation: heroSheen 4.8s ease-in-out infinite;
    pointer-events: none;
}

@keyframes heroSheen {
    0%, 74%   { left: -120%; }
    90%, 100% { left: 135%; }
}

/* 배너 영상 하단에 스크롤 버튼*/
.scroll-btn {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.05em;
    color: white;
    background: rgba(255, 255, 255, 0.08);
    padding: 12px 28px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50px;
    text-decoration: none;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    cursor: pointer;
    z-index: 3;
    transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    animation: bounce 3s infinite;
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.25);
}

.scroll-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateX(-50%) scale(1.05);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}

.scroll-btn .icon {
    font-size: 18px;
    margin-left: 4px;
    animation: downArrow 1.8s infinite;
}

@keyframes bounce {
    0%, 100% {
        transform: translateX(-50%) translateY(0);
    }
    50% {
        transform: translateX(-50%) translateY(8px);
    }
}

@keyframes downArrow {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(5px);
    }
}

/* ============================================
   🔹 히어로 배경 레이어
   ============================================ */

.hero-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}

.hero-bg > * {
    position: absolute;
    inset: 0;
}

/* 1) 스크림 - 영상 위 명도를 낮춰 텍스트 대비 확보 */
.hero-scrim {
    background:
        radial-gradient(ellipse 90% 72% at 50% 45%, rgba(5, 9, 24, 0.30) 0%, rgba(5, 9, 24, 0.80) 100%),
        linear-gradient(180deg, rgba(5, 9, 24, 0.62) 0%, transparent 26%, transparent 64%, rgba(5, 9, 24, 0.72) 100%);
}

/* 2) 오로라 - 브랜드 컬러 글로우가 느리게 부유 */
.hero-aurora {
    mix-blend-mode: screen;
}

.hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    will-change: transform;
}

.hero-orb-1 {
    width: 46vw;
    height: 46vw;
    left: -9vw;
    top: -8vw;
    background: radial-gradient(circle, rgba(77, 109, 227, 0.85) 0%, rgba(77, 109, 227, 0) 68%);
    animation: heroOrbA 24s ease-in-out infinite;
}

.hero-orb-2 {
    width: 38vw;
    height: 38vw;
    right: -7vw;
    top: 14vh;
    background: radial-gradient(circle, rgba(124, 160, 255, 0.7) 0%, rgba(124, 160, 255, 0) 70%);
    animation: heroOrbB 28s ease-in-out infinite;
}

.hero-orb-3 {
    width: 32vw;
    height: 32vw;
    left: 36vw;
    bottom: -14vw;
    background: radial-gradient(circle, rgba(118, 104, 240, 0.6) 0%, rgba(118, 104, 240, 0) 70%);
    animation: heroOrbC 32s ease-in-out infinite;
}

@keyframes heroOrbA {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50%      { transform: translate3d(6vw, 5vh, 0) scale(1.12); }
}

@keyframes heroOrbB {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1.05); }
    50%      { transform: translate3d(-7vw, 7vh, 0) scale(0.92); }
}

@keyframes heroOrbC {
    0%, 100% { transform: translate3d(0, 0, 0) scale(0.95); }
    50%      { transform: translate3d(4vw, -6vh, 0) scale(1.15); }
}

/* 3) 설계 그리드 - 헤드라인의 "설계" 컨셉을 시각화한 청사진 격자 */
.hero-grid {
    inset: -12%;
    background-image:
        linear-gradient(to right, rgba(165, 195, 255, 0.10) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(165, 195, 255, 0.10) 1px, transparent 1px),
        linear-gradient(to right, rgba(165, 195, 255, 0.16) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(165, 195, 255, 0.16) 1px, transparent 1px);
    background-size: 64px 64px, 64px 64px, 320px 320px, 320px 320px;
    -webkit-mask-image: radial-gradient(ellipse 66% 62% at 50% 45%, #000 0%, rgba(0, 0, 0, 0.35) 55%, transparent 80%);
    mask-image: radial-gradient(ellipse 66% 62% at 50% 45%, #000 0%, rgba(0, 0, 0, 0.35) 55%, transparent 80%);
    animation: heroGridDrift 30s linear infinite;
    will-change: transform;
}

/* 한 칸(64px)만큼만 이동해 이음매 없이 반복된다 */
@keyframes heroGridDrift {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(64px, 64px, 0); }
}

/* 4) 스캔라인 - 위에서 아래로 훑고 지나가는 얇은 빛 */
.hero-scanline {
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(160, 190, 255, 0.11) 46%,
        rgba(200, 220, 255, 0.22) 50%,
        rgba(160, 190, 255, 0.11) 54%,
        transparent 100%
    );
    height: 42%;
    inset: auto 0 auto 0;
    animation: heroScan 9s cubic-bezier(0.45, 0, 0.55, 1) infinite;
    will-change: transform;
}

@keyframes heroScan {
    0%        { transform: translateY(-60vh); opacity: 0; }
    12%       { opacity: 1; }
    72%       { opacity: 1; }
    88%, 100% { transform: translateY(120vh); opacity: 0; }
}

/* 5) 그레인 - 평평한 그라데이션에 질감을 더한다 */
.hero-noise {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity: 0.16;
    mix-blend-mode: overlay;
}

/* 6) 비네트 - 시선을 중앙 카피로 모은다 */
.hero-vignette {
    background: radial-gradient(ellipse 80% 70% at 50% 46%, transparent 40%, rgba(3, 6, 18, 0.58) 100%);
}

/* 배너 오버레이 */
.banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    opacity: 0;
    mix-blend-mode: normal;
    z-index: 2;
    pointer-events: none;
}

/* 미디어 쿼리 - 모바일 최적화 */
@media screen and (max-width: 768px) {
    .main-banner-content {
        padding: 80px 18px 110px;
    }

    .hero-eyebrow {
        gap: 10px;
        letter-spacing: 0.24em;
        margin-bottom: 20px;
    }

    .hero-eyebrow::before,
    .hero-eyebrow::after {
        width: 22px;
    }

    .banner-accent-line {
        height: 44px;
        margin: 24px 0 20px;
    }

    .hero-badges {
        gap: 8px;
        margin-bottom: 28px;
    }

    .hero-badges li {
        padding: 8px 15px;
    }

    .hero-cta {
        padding: 14px 30px;
    }

    .scroll-btn {
        bottom: 25px;
        padding: 10px 24px;
    }

    /* 좁은 화면에서는 배경 레이어 부하를 줄인다 */
    .hero-grid {
        background-size: 44px 44px, 44px 44px, 220px 220px, 220px 220px;
    }

    @keyframes heroGridDrift {
        from { transform: translate3d(0, 0, 0); }
        to   { transform: translate3d(44px, 44px, 0); }
    }

    .hero-orb {
        filter: blur(60px);
    }

    .hero-orb-1 { width: 74vw; height: 74vw; }
    .hero-orb-2 { width: 62vw; height: 62vw; }
    .hero-orb-3 { display: none; }

    .hero-scanline {
        display: none;
    }
}

/* 미디어 쿼리 - 태블릿 최적화 */
@media screen and (min-width: 769px) and (max-width: 1200px) {
    .banner-accent-line {
        height: 52px;
    }
}

/* 모션 최소화 설정 존중 */
@media (prefers-reduced-motion: reduce) {
    .hero-eyebrow,
    .hero-line,
    .banner-accent-line,
    .hero-rotator,
    .hero-badges,
    .hero-cta {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }

    .hero-accent-wrap::after {
        transform: scaleX(1);
        transition: none;
    }

    .hero-accent,
    .hero-caret,
    .hero-cta::after,
    .scroll-btn,
    .scroll-btn .icon,
    .hero-orb,
    .hero-grid {
        animation: none;
    }

    /* 화면을 훑는 움직임은 완전히 제거 */
    .hero-scanline {
        display: none;
    }
}