/* ========================================
   TEN10&0 Main Stylesheet
   공통 스타일 + PC/태블릿 스타일
   ======================================== */

/* ==================== 공통 스타일 (모든 디바이스) ==================== */

/* 좌우 스크롤 방지 */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

.break-keep {
    word-break: keep-all;
}

.scroll-snap-container {
    scroll-snap-type: y mandatory;
    overflow-y: scroll;
    overflow-x: hidden;
    height: 100vh;
    max-width: 100vw;
}

.scroll-snap-section {
    scroll-snap-align: start;
    min-height: 100vh;
}

.scroll-snap-container::-webkit-scrollbar {
    width: 8px;
}

.scroll-snap-container::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
}

.scroll-snap-container::-webkit-scrollbar-thumb {
    background: rgba(16, 185, 129, 0.5);
    border-radius: 4px;
}

.scroll-snap-container::-webkit-scrollbar-thumb:hover {
    background: rgba(16, 185, 129, 0.7);
}

.nav-scrolled {
    background-color: rgba(0, 0, 0, 0.95) !important;
    backdrop-filter: blur(10px);
}

.animate-on-scroll {
    opacity: 0;
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-on-scroll.animated {
    opacity: 1;
    transform: translateY(0) !important;
}

/* Hero 섹션 공통 */
#heroContent {
    padding-top: 80px;
}

/* 부 글자 스타일 (EARTH FIRST, ZERO FIRST) */
.sub-title-container {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    padding: 0 24px;
}

.sub-title-line {
    width: 40px;
    height: 1px;
    background: rgba(255, 255, 255, 0.3);
}

#heroSubtitle {
    font-weight: 300;
    letter-spacing: 0.2em;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
}

#heroSubtitle span {
    color: rgba(16, 185, 129, 0.6);
    font-weight: 400;
}

/* 주 글자 스타일 (자연으로 되돌리는...) */
#heroTitle {
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: #ffffff;
    text-shadow: 0 4px 24px rgba(0,0,0,0.4);
}

#heroTitle .brand {
    color: #10b981;
    font-weight: 900;
    position: relative;
}

#heroTitle .brand::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #10b981 0%, transparent 100%);
}

#heroVideo {
    max-width: 100%;
}

/* Content Group - 모든 디바이스 공통 */
#contentGroup {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ===== 프로세스 섹션 공통 스타일 ===== */

/* Section */
#processSection {
    min-height: 100vh;
    padding: 140px 60px 100px;
    position: relative;
    background: linear-gradient(180deg, #0A0A0A 0%, #1A1A1A 100%);
}

/* 프로세스 히어로 섹션 - 개별 스크롤 스냅 */
#processHero {
    scroll-snap-align: start;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 각 카드를 개별 스크롤 스냅 섹션으로 */
.step-snap-section {
    scroll-snap-align: start;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 0;
}

/* Final 섹션도 개별 스냅 */
#finalSnap {
    scroll-snap-align: start;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 0;
}

/* Hero */
.process-hero {
    text-align: center;
    padding: 80px 0 100px;
    position: relative;
    z-index: 1;
}

.process-hero-title {
    font-size: 72px;
    font-weight: 900;
    color: #FFFFFF;
    line-height: 1.4;
    margin-bottom: 32px;
    letter-spacing: 1.5px;
}

.process-hero-subtitle {
    font-size: 26px;
    color: #CCCCCC;
    font-weight: 300;
    line-height: 2.1;
    margin-bottom: 80px;
    letter-spacing: 0px;
}

.process-hero-scroll-text {
    font-size: 24px;
    color: #97BC62;
    font-weight: 600;
    letter-spacing: 2px;
    position: absolute;
    bottom: 56px;
    left: calc(50% + 0px);
    transform: translateX(-50%);
    animation: bounceArrow 3s infinite;
    white-space: nowrap;
}

@keyframes bounceArrow {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    25% { transform: translateX(-50%) translateY(-15px); }
    50% { transform: translateX(-50%) translateY(0); }
    75% { transform: translateX(-50%) translateY(-8px); }
}

/* Journey Container */
.journey {
    max-width: 1600px;
    margin: 0 auto;
    position: relative;
    padding: 60px 0;
    width: 100%;
}

/* Timeline - 중앙 세로선 */
.journey-path {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, transparent 0%, #97BC62 10%, #2C5F2D 90%, transparent 100%);
    transform: translateX(-50%);
    z-index: 0;
}

/* Step Wrapper */
.step-wrapper {
    position: relative;
    width: 100%;
    opacity: 1;
    transform: translateY(0);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Step Container */
.step-container {
    display: flex;
    align-items: center;
    position: relative;
    z-index: 1;
}

/* 홀수: 왼쪽 정렬 */
.step-wrapper:nth-child(odd) .step-container {
    justify-content: flex-start;
}

/* 짝수: 오른쪽 정렬 */
.step-wrapper:nth-child(even) .step-container {
    justify-content: flex-end;
}

/* Step Card - 크기 완전 고정 */
.step-card {
    width: 100% !important;
    max-width: 1400px !important;
    min-height: 400px !important;
    height: auto !important;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 32px;
    padding: 60px 70px;
    backdrop-filter: blur(20px);
    position: relative;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
    overflow: hidden;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 30px !important;
    align-items: center !important;
}

.step-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #2C5F2D 0%, #97BC62 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
    border-radius: 32px 32px 0 0;
}

.step-card:hover {
    border-color: rgba(151, 188, 98, 0.3);
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-8px);
}

.step-card:hover::before {
    opacity: 1;
}

/* ========== Step 1, 3, 5 (홀수) - 텍스트 왼쪽, 이미지 오른쪽 ========== */
.step-wrapper[data-step="1"] .step-card,
.step-wrapper[data-step="3"] .step-card,
.step-wrapper[data-step="5"] .step-card {
    text-align: left;
}

/* ========== Step 2, 4, 6 (짝수) - 이미지 왼쪽, 텍스트 오른쪽 ========== */
.step-wrapper[data-step="2"] .step-card,
.step-wrapper[data-step="4"] .step-card,
.step-wrapper[data-step="6"] .step-card {
    text-align: right;
}

/* Step Header - 기본 스타일 */
.step-header {
    display: flex;
    align-items: center;
    gap: 44px;
    margin-bottom: 32px;
}

/* Step 1, 3, 5 (홀수) - 헤더 왼쪽 열 */
.step-wrapper[data-step="1"] .step-header,
.step-wrapper[data-step="3"] .step-header,
.step-wrapper[data-step="5"] .step-header {
    grid-column: 1 / 2;
    grid-row: 1;
}

/* Step 2, 4, 6 (짝수) - 헤더 오른쪽 열 */
.step-wrapper[data-step="2"] .step-header,
.step-wrapper[data-step="4"] .step-header,
.step-wrapper[data-step="6"] .step-header {
    grid-column: 2 / 3;
    grid-row: 1;
    justify-content: flex-end;
}

.step-number {
    font-size: 80px;
    font-weight: 900;
    background: linear-gradient(135deg, #2C5F2D 0%, #97BC62 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
}

.step-icon {
    font-size: 40px;
    gap: 18px;
    display: flex;
    align-items: center;
    filter: drop-shadow(0 0 20px rgba(151, 188, 98, 0.3));
    color: #97BC62;
}

.material-symbols-rounded {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    font-size: 1.2em;
}

.step-label {
    display: inline-block;
    background: linear-gradient(135deg, #2C5F2D 0%, #97BC62 100%);
    color: #FFFFFF;
    padding: 10px 24px;
    border-radius: 24px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 20px;
    width: fit-content;
}

/* Step 1, 3, 5 (홀수) - 레이블 왼쪽 열 */
.step-wrapper[data-step="1"] .step-label,
.step-wrapper[data-step="3"] .step-label,
.step-wrapper[data-step="5"] .step-label {
    grid-column: 1 / 2;
    grid-row: 2;
}

/* Step 2, 4, 6 (짝수) - 레이블 오른쪽 열 */
.step-wrapper[data-step="2"] .step-label,
.step-wrapper[data-step="4"] .step-label,
.step-wrapper[data-step="6"] .step-label {
    grid-column: 2 / 3;
    grid-row: 2;
    justify-self: end;  /* 오른쪽 정렬 */
}

/* Step별 레이블 크기 최적화 - PC */
.step-wrapper[data-step="1"] .step-label {
    padding: 10px 22px;  /* 세계 최초 기술 (7글자) */
}

.step-wrapper[data-step="2"] .step-label {
    padding: 10px 20px;  /* 고효율 처리 (6글자) */
}

.step-wrapper[data-step="3"] .step-label {
    padding: 10px 18px;  /* 필터 제로 (5글자) */
}

.step-wrapper[data-step="4"] .step-label {
    padding: 10px 18px;  /* 완전 자동 (5글자) */
}

.step-wrapper[data-step="5"] .step-label {
    padding: 10px 26px;  /* 스마트 위생 시스템 (10글자) */
}

.step-wrapper[data-step="6"] .step-label {
    padding: 10px 28px;  /* AUTO 살균 시스템 (12글자) */
}

.step-title {
    font-size: 48px;
    font-weight: 900;
    color: #FFFFFF;
    margin-bottom: 32px;
    line-height: 1.2;
}

/* Step 1, 3, 5 (홀수) - 제목 왼쪽 열 */
.step-wrapper[data-step="1"] .step-title,
.step-wrapper[data-step="3"] .step-title,
.step-wrapper[data-step="5"] .step-title {
    grid-column: 1 / 2;
    grid-row: 3;
}

/* Step 2, 4, 6 (짝수) - 제목 오른쪽 열 */
.step-wrapper[data-step="2"] .step-title,
.step-wrapper[data-step="4"] .step-title,
.step-wrapper[data-step="6"] .step-title {
    grid-column: 2 / 3;
    grid-row: 3;
}

/* 설명 글 - 1.5배 크기 + 줄바꿈 최적화 */
.step-desc {
    font-size: 30px;
    color: #AAAAAA;
    line-height: 1.7;
    margin-bottom: 40px;
    font-weight: 400;
    word-break: keep-all;
    overflow-wrap: break-word;
    white-space: normal;
    text-indent: 0;
    padding-left: 0;
}

/* Step 1, 3, 5 (홀수) - 설명 왼쪽 열 */
.step-wrapper[data-step="1"] .step-desc,
.step-wrapper[data-step="3"] .step-desc,
.step-wrapper[data-step="5"] .step-desc {
    grid-column: 1 / 2;
    grid-row: 4;
}

/* Step 2, 4, 6 (짝수) - 설명 오른쪽 열 */
.step-wrapper[data-step="2"] .step-desc,
.step-wrapper[data-step="4"] .step-desc,
.step-wrapper[data-step="6"] .step-desc {
    grid-column: 2 / 3;
    grid-row: 4;
}

/* 각 문장 라인 스타일 */
.desc-line {
    display: block;
    position: relative;
    transition: all 0.3s ease;
    margin-left: 0;
    padding-left: 0 !important;
}

.step-features {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

/* Step 1, 3, 5 (홀수) - 태그 왼쪽 열 */
.step-wrapper[data-step="1"] .step-features,
.step-wrapper[data-step="3"] .step-features,
.step-wrapper[data-step="5"] .step-features {
    grid-column: 1 / 2;
    grid-row: 5;
}

/* Step 2, 4, 6 (짝수) - 태그 오른쪽 열 */
.step-wrapper[data-step="2"] .step-features,
.step-wrapper[data-step="4"] .step-features,
.step-wrapper[data-step="6"] .step-features {
    grid-column: 2 / 3;
    grid-row: 5;
    justify-content: flex-end;
}

/* Step 1, 3, 5 (홀수) - 이미지 오른쪽 열 */
.step-wrapper[data-step="1"] .step-image,
.step-wrapper[data-step="3"] .step-image,
.step-wrapper[data-step="5"] .step-image {
    grid-column: 2 / 3;
    grid-row: 1 / 6;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Step 2, 4, 6 (짝수) - 이미지 왼쪽 열 */
.step-wrapper[data-step="2"] .step-image,
.step-wrapper[data-step="4"] .step-image,
.step-wrapper[data-step="6"] .step-image {
    grid-column: 1 / 2;
    grid-row: 1 / 6;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 타원형 태그 - 2배 크기 */
.feature-pill {
    background: rgba(151, 188, 98, 0.15);
    border: 1px solid rgba(151, 188, 98, 0.3);
    padding: 16px 32px;
    border-radius: 32px;
    font-size: 30px;
    font-weight: 600;
    color: #97BC62;
    transition: all 0.3s ease;
}

.feature-pill:hover {
    background: rgba(151, 188, 98, 0.25);
    border-color: #97BC62;
}

/* Final Section */
.final {
    text-align: center;
    padding: 100px 60px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 32px;
    margin-top: 0;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
    min-height: 500px;
}

/* Background Layer */
.final-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('https://images.unsplash.com/photo-1542601906990-b4d3fb778b09?w=1600&q=80');
    background-size: cover;
    background-position: center;
    filter: blur(2.5px) brightness(0.55) saturate(1.2);
    animation: videoZoom 30s ease-in-out infinite;
    z-index: 0;
}

@keyframes videoZoom {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* Firefly Container */
.firefly-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    pointer-events: none;
}

.firefly {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(1px);
}

/* Content Layer */
.final-content {
    position: relative;
    z-index: 10;
}

.final-title {
    font-size: 56px;
    font-weight: 900;
    color: #FFFFFF;
    margin-bottom: 28px;
    line-height: 1.3;
    letter-spacing: 0px;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.final-desc {
    font-size: 31px;
    color: #CCCCCC;
    margin-bottom: 48px;
    line-height: 1.9;
    letter-spacing: 0px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.final-brand {
    font-size: 56px;
    font-weight: 900;
    color: #FFFFFF;
    margin-top: 20px;
    letter-spacing: 2px;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

/* Firefly Animations */
@keyframes firefly-move-0 {
    0% { left: 41.17%; top: 20.96%; opacity: 0.42; }
    20% { left: 55.67%; top: 11.46%; opacity: 0.53; }
    40% { left: 28.17%; top: 38.96%; opacity: 0.31; }
    60% { left: 48.67%; top: 5.96%; opacity: 0.58; }
    80% { left: 35.42%; top: 32.46%; opacity: 0.26; }
    100% { left: 41.17%; top: 20.96%; opacity: 0.42; }
}

@keyframes firefly-move-1 {
    0% { left: 33.11%; top: 2.65%; opacity: 0.48; }
    20% { left: 18.61%; top: 25.15%; opacity: 0.35; }
    40% { left: 50.61%; top: 7.15%; opacity: 0.56; }
    60% { left: 25.11%; top: 15.15%; opacity: 0.29; }
    80% { left: 43.36%; top: 20.15%; opacity: 0.52; }
    100% { left: 33.11%; top: 2.65%; opacity: 0.48; }
}

@keyframes firefly-move-2 {
    0% { left: 4.35%; top: 78.75%; opacity: 0.38; }
    20% { left: 26.85%; top: 63.25%; opacity: 0.57; }
    40% { left: 1.85%; top: 96.25%; opacity: 0.24; }
    60% { left: 18.35%; top: 71.25%; opacity: 0.51; }
    80% { left: 8.85%; top: 88.00%; opacity: 0.33; }
    100% { left: 4.35%; top: 78.75%; opacity: 0.38; }
}

@keyframes firefly-move-3 {
    0% { left: 15.99%; top: 26.34%; opacity: 0.44; }
    20% { left: 3.49%; top: 48.84%; opacity: 0.28; }
    40% { left: 33.49%; top: 13.84%; opacity: 0.59; }
    60% { left: 8.49%; top: 38.84%; opacity: 0.37; }
    80% { left: 25.24%; top: 18.59%; opacity: 0.54; }
    100% { left: 15.99%; top: 26.34%; opacity: 0.44; }
}

@keyframes firefly-move-4 {
    0% { left: 22.95%; top: 40.01%; opacity: 0.51; }
    20% { left: 40.45%; top: 27.51%; opacity: 0.34; }
    40% { left: 10.45%; top: 57.51%; opacity: 0.26; }
    60% { left: 32.45%; top: 32.51%; opacity: 0.58; }
    80% { left: 16.70%; top: 50.26%; opacity: 0.39; }
    100% { left: 22.95%; top: 40.01%; opacity: 0.51; }
}

@keyframes firefly-move-5 {
    0% { left: 40.71%; top: 79.42%; opacity: 0.36; }
    20% { left: 58.21%; top: 61.92%; opacity: 0.55; }
    40% { left: 28.21%; top: 96.92%; opacity: 0.23; }
    60% { left: 48.21%; top: 71.92%; opacity: 0.49; }
    80% { left: 34.46%; top: 89.67%; opacity: 0.32; }
    100% { left: 40.71%; top: 79.42%; opacity: 0.36; }
}

@keyframes firefly-move-6 {
    0% { left: 58.69%; top: 92.59%; opacity: 0.42; }
    20% { left: 76.19%; top: 75.09%; opacity: 0.57; }
    40% { left: 46.19%; top: 100%; opacity: 0.28; }
    60% { left: 66.19%; top: 85.09%; opacity: 0.53; }
    80% { left: 52.44%; top: 100%; opacity: 0.35; }
    100% { left: 58.69%; top: 92.59%; opacity: 0.42; }
}

@keyframes firefly-move-7 {
    0% { left: 24.59%; top: 16.98%; opacity: 0.47; }
    20% { left: 9.09%; top: 39.48%; opacity: 0.31; }
    40% { left: 42.09%; top: 4.48%; opacity: 0.58; }
    60% { left: 17.09%; top: 29.48%; opacity: 0.38; }
    80% { left: 34.84%; top: 9.23%; opacity: 0.54; }
    100% { left: 24.59%; top: 16.98%; opacity: 0.47; }
}

@keyframes firefly-move-8 {
    0% { left: 23.30%; top: 29.72%; opacity: 0.39; }
    20% { left: 40.80%; top: 12.22%; opacity: 0.56; }
    40% { left: 10.80%; top: 47.22%; opacity: 0.24; }
    60% { left: 30.80%; top: 22.22%; opacity: 0.51; }
    80% { left: 17.05%; top: 39.97%; opacity: 0.33; }
    100% { left: 23.30%; top: 29.72%; opacity: 0.39; }
}

@keyframes firefly-move-9 {
    0% { left: 64.70%; top: 24.16%; opacity: 0.53; }
    20% { left: 82.20%; top: 6.66%; opacity: 0.36; }
    40% { left: 52.20%; top: 41.66%; opacity: 0.28; }
    60% { left: 72.20%; top: 16.66%; opacity: 0.59; }
    80% { left: 58.45%; top: 34.41%; opacity: 0.41; }
    100% { left: 64.70%; top: 24.16%; opacity: 0.53; }
}

@keyframes firefly-move-10 {
    0% { left: 71.44%; top: 68.57%; opacity: 0.45; }
    20% { left: 88.94%; top: 46.07%; opacity: 0.58; }
    40% { left: 58.94%; top: 86.07%; opacity: 0.27; }
    60% { left: 78.94%; top: 61.07%; opacity: 0.52; }
    80% { left: 65.19%; top: 78.82%; opacity: 0.34; }
    100% { left: 71.44%; top: 68.57%; opacity: 0.45; }
}

@keyframes firefly-move-11 {
    0% { left: 55.72%; top: 11.61%; opacity: 0.49; }
    20% { left: 73.22%; top: 0%; opacity: 0.32; }
    40% { left: 43.22%; top: 29.11%; opacity: 0.26; }
    60% { left: 63.22%; top: 4.11%; opacity: 0.57; }
    80% { left: 49.47%; top: 21.86%; opacity: 0.38; }
    100% { left: 55.72%; top: 11.61%; opacity: 0.49; }
}

@keyframes firefly-move-12 {
    0% { left: 24.85%; top: 96.62%; opacity: 0.37; }
    20% { left: 42.35%; top: 79.12%; opacity: 0.55; }
    40% { left: 12.35%; top: 100%; opacity: 0.23; }
    60% { left: 32.35%; top: 89.12%; opacity: 0.48; }
    80% { left: 18.60%; top: 100%; opacity: 0.31; }
    100% { left: 24.85%; top: 96.62%; opacity: 0.37; }
}

@keyframes firefly-move-13 {
    0% { left: 40.70%; top: 52.28%; opacity: 0.52; }
    20% { left: 58.20%; top: 29.78%; opacity: 0.35; }
    40% { left: 28.20%; top: 69.78%; opacity: 0.27; }
    60% { left: 48.20%; top: 44.78%; opacity: 0.59; }
    80% { left: 34.45%; top: 62.53%; opacity: 0.41; }
    100% { left: 40.70%; top: 52.28%; opacity: 0.52; }
}

@keyframes firefly-move-14 {
    0% { left: 87.71%; top: 60.45%; opacity: 0.46; }
    20% { left: 100%; top: 37.95%; opacity: 0.58; }
    40% { left: 75.21%; top: 77.95%; opacity: 0.29; }
    60% { left: 95.21%; top: 52.95%; opacity: 0.54; }
    80% { left: 81.46%; top: 70.70%; opacity: 0.36; }
    100% { left: 87.71%; top: 60.45%; opacity: 0.46; }
}


/* ==================== PC 버전 (1024px 이상) ==================== */
@media (min-width: 1024px) {
    /* 전체 콘텐츠 위치 */
    #heroContent {
        padding-top: 5px;
    }
    
    /* 부 글자 (EARTH FIRST, ZERO FIRST) */
    #heroSubtitle {
        font-size: 26px;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
    }
    
    .sub-title-container {
        margin-bottom: 10px;
    }
    
    .sub-title-line {
        width: 60px;
        height: 1px;
    }
    
    /* 주 글자 (자연으로 되돌리는...) */
    #heroTitle {
        font-size: 68px;
        font-weight: 700;
        line-height: 1.4;
        letter-spacing: -0.01em;
    }
    
    /* 영상 */
    #heroVideo {
        width: 650px;
        margin-top: 74px;
    }
    
    /* 스크롤 화살표 */
    #scrollArrow {
        position: absolute;
        bottom: -87px;
        left: 50%;
        transform: translateX(-50%);
    }
    #scrollArrow i {
        font-size: 30px;
        color: rgba(255, 255, 255, 1);
    }
    #scrollArrow > div {
        width: 45px;
        height: 45px;
        border: 3px solid rgba(255, 255, 255, 1);
    }
}


/* ==================== 태블릿 버전 (768-1023px) ==================== */
@media (min-width: 768px) and (max-width: 1023px) {
    /* 전체 콘텐츠 위치 */
    #heroContent {
        padding-top: 5px;
    }
    
    /* 부 글자 (EARTH FIRST, ZERO FIRST) */
    #heroSubtitle {
        font-size: 26px;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
    }
    
    .sub-title-container {
        margin-bottom: 10px;
    }
    
    .sub-title-line {
        width: 60px;
        height: 1px;
    }
    
    /* 주 글자 (자연으로 되돌리는...) */
    #heroTitle {
        font-size: 68px;
        font-weight: 700;
        line-height: 1.4;
        letter-spacing: -0.01em;
    }
    
    /* 영상 */
    #heroVideo {
        width: 650px;
        margin-top: 74px;
    }
    
    /* 스크롤 화살표 */
    #scrollArrow {
        position: absolute;
        bottom: -87px;
        left: 50%;
        transform: translateX(-50%);
    }
    #scrollArrow i {
        font-size: 30px;
        color: rgba(255, 255, 255, 1);
    }
    #scrollArrow > div {
        width: 45px;
        height: 45px;
        border: 3px solid rgba(255, 255, 255, 1);
    }
}


/* ==================== 반응형 조정 ==================== */
@media (max-width: 1400px) {
    .step-card {
        max-width: 700px;
    }
}

@media (max-width: 1200px) {
    .step-card {
        width: 60%;
        max-width: 600px;
    }
    
    .step-desc {
        font-size: 24px;
    }
    
    .feature-pill {
        font-size: 24px;
        padding: 12px 24px;
    }
}