@charset "utf-8";

/* 일반 서브비주얼: 글자 마스크가 섹션에 잘리지 않도록. 배경 이미지는 안쪽 레이어에서 자름 */
.subvisual-hero {
    overflow: visible;
    perspective: 1200px;
}

/* 제품 서브비주얼: 배경 글로우·그리드·모니터 뒤 빛 */
.product-hero-section {
    position: relative;
    overflow: visible;
    perspective: 1200px;
}

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

.product-hero-bg-glow {
    position: absolute;
    top: -15%;
    right: -5%;
    width: 45rem;
    height: 45rem;
    background: radial-gradient(circle, rgba(0, 120, 231, 0.22) 0%, rgba(37, 99, 235, 0.10) 35%, transparent 70%);
    filter: blur(80px);
    pointer-events: none;
    z-index: 1;
    border-radius: 9999px;
}

.product-hero-grid-pattern {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: radial-gradient(ellipse 75% 75% at 65% 45%, black 20%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 75% 75% at 65% 45%, black 20%, transparent 80%);
    pointer-events: none;
    z-index: 1;
}

.hero-title-line {
    overflow: hidden;
    perspective: 600px;
}

.hero-title-text {
    display: inline-block;
    transform-origin: bottom left;
}

.product-hero-visual-wrap {
    transform-style: preserve-3d;
}

.product-hero-visual-card {
    position: relative;
    transform-style: preserve-3d;
}

.product-hero-visual-card::before {
    content: '';
    position: absolute;
    inset: -15px;
    background: radial-gradient(circle, rgba(0, 120, 231, 0.28) 0%, rgba(0, 120, 231, 0.05) 50%, transparent 70%);
    filter: blur(35px);
    z-index: -1;
    opacity: 0.85;
    pointer-events: none;
    border-radius: 20px;
}