/* =====================================================================
 * SaaS Intro Hero Background (대표님 v1.3 시정 · 2026-05-10)
 * ---------------------------------------------------------------------
 * 적용 범위: hero 섹션 + viewport 100vw 풀 폭
 * 시정 (v1.3):
 *   1. 코발트블루 그라데이션 overlay 추가 (가독성 정합)
 *   2. hero 텍스트 흰색 (h1 + lede + trust + h1 em + eyebrow)
 *   3. 디팀 정본 saas-styles.css 변경 X (정본 보호)
 * ===================================================================== */

/* hero 섹션을 BG 컨테이너로 (position relative + isolation) */
.saas-intro-hero {
    position: relative;
    isolation: isolate;
}

/* hero 백그라운드 이미지 layer · viewport 100vw 풀 폭 */
.saas-intro-hero::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    z-index: -2;
    pointer-events: none;
    background-image: url('assets/intro-bg.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

/* 블랙 그라데이션 overlay layer · 이미지 위 가독성 정합 (대표님 v1.4 시정) */
.saas-intro-hero::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(
            135deg,
            rgba(0, 0, 0, 0.78) 0%,    /* deep black · 좌상 */
            rgba(0, 0, 0, 0.55) 35%,   /* mid black · 중간 */
            rgba(0, 0, 0, 0.45) 65%,   /* light black · 중하 */
            rgba(0, 0, 0, 0.82) 100%   /* deep black · 우하 */
        );
}

/* hero 안 텍스트 흰색 + 컨텐츠 z-index 정합 */
.saas-intro-hero > div {
    position: relative;
    z-index: 1;
}
.saas-intro-hero .saas-intro-eyebrow {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(4px);
}
.saas-intro-hero .saas-intro-eyebrow-pulse {
    background: #ffffff;
}
.saas-intro-hero .saas-intro-h1 {
    color: #ffffff;
}
.saas-intro-hero .saas-intro-h1 em {
    color: #ff6b6b;
    background: linear-gradient(120deg, #ff5e5e 0%, #ff8a8a 50%, #ffb3b3 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.saas-intro-hero .saas-intro-lede {
    color: rgba(255, 255, 255, 0.92);
}
.saas-intro-hero .saas-intro-trust {
    color: rgba(255, 255, 255, 0.85);
}
.saas-intro-hero .saas-intro-trust-dot {
    background: #ff8a8a;
}

/* ============================================================
 * v1.6 시정 (대표님 2026-05-10):
 *   1. orbit/node 가시성 (라이트/다크 어두운 BG에서 묻힘 차단)
 *   2. nav "1개월 무료" 라이트 모드 폰트 가독성 정합
 * ============================================================ */

/* hero flow orbit (도는 점선 링) · 어두운 이미지 BG에 가시성 정합 */
.saas-intro-hero .saas-flow-orbit {
    border-color: rgba(255, 255, 255, 0.45) !important;
    border-width: 1.5px !important;
}
.saas-intro-hero .saas-flow-orbit.is-mid {
    border-color: rgba(255, 255, 255, 0.35) !important;
}
.saas-intro-hero .saas-flow-orbit.is-inner {
    border-color: rgba(255, 138, 138, 0.7) !important;  /* 레드 강조 정합 */
    border-style: dashed !important;
}

/* hero flow node (5 노드 카드) · 어두운 BG 위 가독성 정합 */
.saas-intro-hero .saas-flow-node {
    background: rgba(0, 0, 0, 0.55) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    backdrop-filter: blur(6px);
}
.saas-intro-hero .saas-flow-node-meta {
    color: rgba(255, 255, 255, 0.72) !important;
}
.saas-intro-hero .saas-flow-node-ico {
    background: rgba(255, 138, 138, 0.18) !important;
    color: #ff8a8a !important;
}

/* nav "1개월 무료" 버튼 · 라이트 모드 가독성 강제 (인라인 style 호환) */
.saas-intro-nav-link.is-cta {
    background: var(--saas-accent) !important;
    color: #ffffff !important;
}
.saas-intro-nav-link.is-cta:hover {
    background: var(--saas-accent-strong, #d7263d) !important;
}