/* 
=========================================================
 iQuins 공식 홈페이지 메인 스타일시트 (style.css)
 모던 글래스모피즘(Modern Glassmorphism) & 입체감 리뉴얼 버전
=========================================================
*/

:root {
    --primary-color: #00519a;
    /* 메인 테마색 (진한 로고 파란색) */
    --primary-dark: #002244;
    /* 더 진한 딥 네이비 */
    --primary-light: #3385ff;
    /* 밝은 파란색 */
    --secondary-color: #ffffff;
    /* 보조색 (주로 흰색 배경이나 글씨) */
    --text-color: #2d3748;
    /* 기본 글씨 색상 */
    --text-light: #718096;
    /* 보조 글씨 색상 */
    --bg-light: #f7fafc;
    /* 연한 배경색 */
    --bg-white: #ffffff;
    /* 순백색 배경 */
    --transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    /* 더 부드럽고 탄력있는 애니메이션 */
    --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 25px 50px -12px rgba(0, 51, 102, 0.25);
    /* 깊은 푸른빛 그림자 */
    --glass-bg: rgba(255, 255, 255, 0.85);
    /* 유리 투명도 */
    --glass-border: rgba(255, 255, 255, 0.4);
    /* 유리 테두리 반사광 */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Noto Sans KR', sans-serif;
    color: var(--text-color);
    background-color: var(--bg-white);
    line-height: 1.6;
    overflow-x: hidden;
    overflow-y: scroll;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    /* 화면 전체 높이를 최소로 잡음 */
    margin: 0;
    /* 마진 초기화 추가 */
}

/* 🔒 글로벌 이미지 무단 저장 방지 설정 (모바일 저장 팝업, 드래그 방지 등) */
img {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

main {
    flex: 1;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

.container {
    width: 85%;
    max-width: 1400px;
    /* 모던한 레이아웃을 위해 폭을 살짝 조정 */
    margin: 0 auto;
    padding: 0 20px;
}

/* ----------------------------------------------------
   [리뉴얼] 플로팅 글래스모피즘 헤더
---------------------------------------------------- */
.header {
    position: fixed;
    top: 20px;
    /* 화면 상단에서 살짝 떨어짐 */
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 1200px;
    height: 80px;
    z-index: 1000;
    transition: var(--transition);

    /* 글래스모피즘 효과 */
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: 40px;
    /* 둥근 캡슐 형태 */
    box-shadow: var(--shadow-md);
}

.header.scrolled {
    top: 10px;
    width: 95%;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: var(--shadow-lg);
}

.header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    width: 100%;
}

.logo img {
    height: 50px;
    /* 기존 40px에서 1.5배 키움 */
    vertical-align: middle;
}

/* 네비게이션 컨테이너 */
.nav {
    height: 100%;
}

.nav ul {
    display: flex;
    gap: 75px;
    /* 균형잡힌 간격에서 조금 더 넓게 벌림 */
    height: 100%;
}

.nav li.dropdown {
    position: static;
    /* 메가 메뉴 배경판을 전체 기준으로 띄우기 위해 static으로 변경 */
    height: 100%;
    display: flex;
    align-items: center;
}

.nav>ul>li>a {
    font-weight: 700;
    font-size: 19px;
    color: var(--text-color);
    position: relative;
    padding: 5px 0;
    transition: var(--transition);
}

/* 모던한 점(Dot) 호버 인디케이터 */
.nav>ul>li>a::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%) scale(0);
    width: 70px;
    height: 2px;
    border-radius: 50%;
    background-color: var(--primary-color);
    transition: var(--transition);
}

.nav>ul>li:hover>a::after {
    transform: translateX(-50%) scale(1);
}

.nav>ul>li:hover>a {
    color: var(--primary-color);
}

/* ----------------------------------------------------
   [리뉴얼] 입체형 메가 메뉴 박스 (거대한 플로팅 카드)
---------------------------------------------------- */
/* 
기존에는 nav::before로 풀사이즈 배경을 그렸으나,
이제는 헤더와 통일된 카드 형태의 배경을 띄웁니다.
*/
.nav::before {
    content: '';
    position: absolute;
    top: 85px;
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    width: 100%;
    max-width: 1200px;
    height: 240px;
    /* Fixed height instead of 0 to prevent text overflow during close */
    background: var(--bg-white);
    border-radius: 24px;
    box-shadow: var(--shadow-lg);
    border: 1px solid rgba(0, 0, 0, 0.03);
    transition: opacity 0.2s ease, transform 0.3s ease, visibility 0s linear 0.2s;
    /* Faster fade out */
    opacity: 0;
    visibility: hidden;
    z-index: 90;
    pointer-events: none;
}

.nav:hover::before {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0s;
}

/* 각 하위 메뉴 컬럼들 */
.dropdown-menu {
    position: absolute;
    top: 70px;
    background-color: transparent;
    padding: 50px 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, transform 0.3s ease, visibility 0s linear 0.15s;
    /* Faster fade out */
    transform: translateY(-5px);
    display: flex;
    flex-direction: column;
    z-index: 100;
}

.nav:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.3s ease 0.1s, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.1s, visibility 0s linear 0s;
    /* Slight delay on open so box opens first */
}

.dropdown-menu li {
    width: 100%;
    padding: 0;
    margin: 0 !important;
}

.dropdown-menu a {
    display: block;
    padding: 0px 0 !important;
    line-height: 1.1 !important;
    color: var(--text-light) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-align: left;
    white-space: nowrap;
    transition: var(--transition) !important;
    position: relative;
    padding-left: 15px !important;
    /* 선 애니메이션을 위한 여백 */
}

/* 좌측 파란색 강조선(Glow Line) 애니메이션 */
.dropdown-menu a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%) scaleY(0);
    width: 2px;
    height: 15px;
    background-color: var(--primary-light);
    transition: var(--transition);
    opacity: 0;
}

.dropdown-menu a:hover::before {
    transform: translateY(-50%) scaleY(1);
    opacity: 1;
}

.dropdown-menu a:hover {
    color: var(--primary-color) !important;
    font-weight: 700 !important;
    background: linear-gradient(90deg, rgba(51, 133, 255, 0.05) 0%, rgba(255, 255, 255, 0) 100%) !important;
    border-radius: 4px;
}

/* ----------------------------------------------------
   [리뉴얼] 히어로 배너 & 그라데이션 오버레이
---------------------------------------------------- */
.hero {
    position: relative;
    height: 100vh;
    min-height: 700px;
    display: flex;
    align-items: center;
    overflow: hidden;
    margin-top: 0;
    /* 헤더가 fixed이므로 겹치게 둠 */
}

.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../img/main_flash_bg.gif') center/cover no-repeat;
    z-index: -2;
}

/* GIF 위에 덮이는 네이비 그라데이션 오버레이 */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(0, 34, 68, 0.3) 0%, rgba(0, 81, 154, 0.1) 100%);
    z-index: -1;
}

.hero-content {
    position: relative;
    z-index: 1;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.hero-content img {
    max-width: 100%;
    filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.2));
    /* 텍스트 이미지 입체감 */
}

/* 스크롤 다운 애니메이션 */
.scroll-indicator {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
    opacity: 0.8;
    z-index: 10;
    animation: bounce 2s infinite ease-in-out;
}

.scroll-indicator span {
    font-size: 12px;
    letter-spacing: 2px;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.scroll-indicator svg {
    width: 24px;
    height: 24px;
}

@keyframes bounce {

    0%,
    100% {
        transform: translate(-50%, 0);
    }

    50% {
        transform: translate(-50%, 10px);
    }
}

/* ----------------------------------------------------
   [리뉴얼] 핵심 사업분야 섹션 (Glow 테두리 & 3D 부유)
---------------------------------------------------- */
.features {
    padding: 150px 0;
    background-color: var(--bg-light);
    position: relative;
}

.section-header {
    text-align: center;
    margin-bottom: 80px;
}

.section-header h2 {
    font-size: 2.8rem;
    color: var(--primary-dark);
    margin-bottom: 20px;
    font-weight: 800;
    letter-spacing: -1px;
}

.section-header p {
    color: var(--text-light);
    font-size: 1.15rem;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

/* 카드 기본 스타일 */
.feature-card {
    background: var(--bg-white);
    padding: 60px 40px;
    border-radius: 30px;
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    position: relative;
    border: 1px solid rgba(0, 0, 0, 0.04);
    z-index: 1;
}

/* 카드 Glow (빛나는 테두리) 효과를 위한 가상 요소 */
.feature-card::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(135deg, var(--primary-light), var(--primary-dark));
    border-radius: 32px;
    z-index: -1;
    opacity: 0;
    transition: var(--transition);
}

.feature-card:hover {
    transform: translateY(-15px) scale(1.02);
    box-shadow: var(--shadow-lg);
    background: var(--bg-white);
}

.feature-card:hover::before {
    opacity: 1;
    /* 호버 시 네이비/블루 그라데이션 테두리 발광 */
}

/* 아이콘 */
.feature-card .icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 30px;
    background: rgba(37, 99, 235, 0.05);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    color: var(--primary-color);
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.1);
}

.feature-card .icon svg {
    width: 40px;
    height: 40px;
    transition: var(--transition);
}

.feature-card:hover .icon {
    background: rgba(255, 255, 255, 0.2);
    color: var(--bg-white);
    transform: scale(1.1) rotate(5deg);
}


.feature-card h3 {
    font-size: 1.5rem;
    color: var(--text-color);
    margin-bottom: 15px;
    font-weight: 800;
}

.feature-card p {
    color: var(--text-light);
    font-size: 1.05rem;
    line-height: 1.7;
}

/* ----------------------------------------------------
   [리뉴얼] 딥 네이비 푸터 (이미지 꽉 차게 변경)
---------------------------------------------------- */
.footer {
    background-color: var(--primary-dark);
    width: 100%;
    padding: 0;
    /* 위아래 빈 공간(여백) 완전히 제거 */
    margin-top: auto;
    /* 내용이 짧아도 무조건 화면 맨 아래에 딱 붙도록 강제 설정 */
}

.footer .container {
    width: 100%;
    /* 이미지가 화면 가로에 꽉 차게 하려면 max-width 해제 (선택적) */
    max-width: 100%;
    padding: 0;
    /* 컨테이너 양옆 여백 제거 */
}

.footer-content {
    display: flex;
    align-items: center;
    width: 100%;
}

.footer-info {
    width: 100%;
    display: flex;
}

.footer-copy-img {
    width: 100%;
    /* 가로 크기를 화면에 꽉 차게 100%로 설정 */
    height: auto;
    /* 가로 비율에 맞춰 세로가 자동으로 늘어남 */
    object-fit: cover;
    /* 빈틈없이 꽉 채움 */
    object-position: center;
    display: block;
    /* 필터 효과 제거 (JPG 이미지가 온전히 보이도록 함) */
}

/* ----------------------------------------------------
   애니메이션 & 반응형
---------------------------------------------------- */
.fade-up {
    opacity: 0;
    transform: translateY(40px);
    animation: fadeUpAnim 1s forwards cubic-bezier(0.16, 1, 0.3, 1);
}

.delay-1 {
    animation-delay: 0.2s;
}

.delay-2 {
    animation-delay: 0.4s;
}

@keyframes fadeUpAnim {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 992px) {
    .feature-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .header {
        width: 95%;
        border-radius: 20px;
    }
}

@media (max-width: 768px) {
    .nav {
        display: none;
    }

    .feature-grid {
        grid-template-columns: 1fr;
    }
}

/* ----------------------------------------------------
   [리뉴얼] 조달 등록 제품 슬라이더 (4칸)
---------------------------------------------------- */
.slider-wrapper {
    position: relative;
    width: 100%;
    margin-top: 20px;
    padding: 0 60px;
    /* 화살표를 배치하기 위한 양옆 빈 공간 */
}

.slider-track {
    display: flex;
    gap: 25px;
    /* 카드 사이 간격 */
    overflow-x: auto;
    /* 넘치면 스크롤 생성 */
    scroll-snap-type: x mandatory;
    /* 스크롤이 카드 단위로 딱딱 맞물려 멈추게 함 */
    scroll-behavior: smooth;
    padding: 20px 0 40px 0;
    /* 위아래 여유 공간 (그림자가 잘리지 않게 방지) */
    -ms-overflow-style: none;
    /* IE 스크롤바 숨김 */
    scrollbar-width: none;
    /* 파이어폭스 스크롤바 숨김 */
}

/* 크롬/사파리 스크롤바 숨김 */
.slider-track::-webkit-scrollbar {
    display: none;
}

.product-card {
    /* 4칸 맞춤: (gap 25px * 3개의 틈새 = 75px)을 뺀 나머지 너비를 4등분 */
    flex: 0 0 calc(25% - 18.75px);
    scroll-snap-align: start;
    /* 슬라이드 멈춤 기준점 */
    background: var(--bg-white);
    border-radius: 20px;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    border: 1px solid rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.product-card:hover {
    transform: translateY(-10px);
    /* 마우스 올리면 살짝 위로 뜸 */
    box-shadow: var(--shadow-md);
}

.product-img {
    width: 100%;
    height: 250px;
    /* 기존 180px에서 키움 */
    background: #e2e8f0;
    /* 사진이 없을 때 회색 배경 */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.product-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 사진 비율 유지하며 꽉 채움 */
    transition: transform 0.4s ease;
}

.product-card:hover .product-img img {
    transform: scale(1.05);
    /* 마우스 올리면 사진 살짝 확대 */
}

.product-info {
    padding: 25px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.product-info h3 {
    font-size: 1.3rem;
    color: var(--text-color);
    margin-bottom: 10px;
    font-weight: 700;
}

.product-info p {
    color: var(--text-light);
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 20px;
    flex: 1;
    /* 링크 버튼을 항상 맨 아래로 밀어냄 */
}

/* 외부 링크 버튼 (구매하기 등) */
.product-link {
    display: inline-block;
    text-align: center;
    padding: 12px 0;
    background: var(--bg-light);
    color: var(--primary-color);
    font-weight: 700;
    border-radius: 10px;
    transition: var(--transition);
    border: 1px solid rgba(0, 81, 154, 0.1);
}

.product-link:hover {
    background: var(--primary-color);
    color: var(--secondary-color);
}

/* 슬라이더 좌우 화살표 버튼 */
.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--bg-white);
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    color: var(--primary-color);
    transition: var(--transition);
}

.slider-btn:hover {
    background: var(--primary-color);
    color: var(--secondary-color);
    box-shadow: var(--shadow-md);
}

.slider-btn svg {
    width: 24px;
    height: 24px;
}

/* 버튼 위치 */
.prev-btn {
    left: 0;
}

.next-btn {
    right: 0;
}

/* 화면 크기에 따른 반응형 설정 (태블릿/모바일) */
@media (max-width: 1200px) {
    .product-card {
        flex: 0 0 calc(33.333% - 16.666px);
        /* 3칸 */
    }
}

@media (max-width: 900px) {
    .product-card {
        flex: 0 0 calc(50% - 12.5px);
        /* 2칸 */
    }
}

@media (max-width: 600px) {
    .product-card {
        flex: 0 0 100%;
        /* 1칸 */
    }

    .slider-wrapper {
        padding: 0 40px;
        /* Make room for the arrows on small screens */
    }

    .slider-btn {
        display: flex !important;
        width: 35px;
        height: 35px;
    }
}

/* TOP ��ư */
.top-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    background-color: var(--primary-color);
    color: var(--bg-white);
    border: none;
    border-radius: 50%;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: var(--shadow-md);
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
    z-index: 999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

.top-btn svg {
    width: 20px;
    height: 20px;
}


.top-btn:hover {
    background-color: var(--primary-dark);
    transform: translateY(-5px);
}

.top-btn.visible {
    opacity: 1;
    visibility: visible;
}

/* TOP 버튼 */
.top-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    background-color: var(--primary-color);
    color: var(--bg-white);
    border: none;
    border-radius: 50%;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: var(--shadow-md);
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
    z-index: 999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

.top-btn svg {
    width: 20px;
    height: 20px;
}


.top-btn:hover {
    background-color: var(--primary-dark);
    transform: translateY(-5px);
}

.top-btn.visible {
    opacity: 1;
    visibility: visible;
}

/* ----------------------------------------------------
   제품소개 5칸 버튼식 카드 레이아웃
---------------------------------------------------- */
.products-section {
    padding: 100px 0;
    background-color: var(--bg-light);
    position: relative;
}

.product-grid-5 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    margin-top: 50px;
}

@media (max-width: 1200px) {
    .product-grid-5 {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .product-grid-5 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .product-grid-5 {
        grid-template-columns: 1fr;
    }
}

.prod-btn-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 20px;
    padding: 40px 20px;
    text-align: center;
    text-decoration: none;
    color: var(--text-color);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.prod-btn-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    opacity: 0;
    z-index: 0;
    transition: opacity 0.4s ease;
}

.prod-btn-card>* {
    position: relative;
    z-index: 1;
}

.prod-icon {
    width: 70px;
    height: 70px;
    background: var(--bg-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    color: var(--primary-color);
    box-shadow: 0 5px 15px rgba(37, 99, 235, 0.1);
    transition: transform 0.4s ease, color 0.4s ease;
}

.prod-icon svg {
    width: 35px;
    height: 35px;
}

.prod-btn-card h3 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 15px;
    transition: color 0.4s ease;
}

.prod-btn-card p {
    font-size: 15px;
    color: #666;
    line-height: 1.5;
    margin-bottom: 25px;
    transition: color 0.4s ease;
}

.view-more {
    margin-top: auto;
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-color);
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* 호버 효과 */
.prod-btn-card:hover {
    transform: translateY(-15px);
    box-shadow: 0 20px 40px rgba(37, 99, 235, 0.2);
    border-color: transparent;
}

.prod-btn-card:hover::before {
    opacity: 1;
}

.prod-btn-card:hover .prod-icon {
    transform: scale(1.1) rotate(5deg);
    color: var(--primary-dark);
}

.prod-btn-card:hover h3,
.prod-btn-card:hover p,
.prod-btn-card:hover .view-more {
    color: var(--bg-white);
}

.prod-btn-card:hover .view-more {
    gap: 10px;
}

/* ----------------------------------------------------
   찾아오시는 길 (Location) 영역
---------------------------------------------------- */
.location-section {
    padding: 100px 0;
    background-color: var(--bg-white);
}

.location-content {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-top: 50px;
}

.map-container {
    width: 100%;
    height: 450px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    background: #e2e8f0;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.contact-info-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.info-card {
    display: flex;
    align-items: center;
    gap: 20px;
    background: rgba(255, 255, 255, 0.5);
    padding: 30px;
    border-radius: 20px;
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(0, 0, 0, 0.03);
    transition: var(--transition);
}

.info-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    background: #fff;
}

.info-card .icon {
    width: 60px;
    height: 60px;
    background: rgba(37, 99, 235, 0.1);
    color: var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.info-card .icon svg {
    width: 30px;
    height: 30px;
}

.info-card .details h4 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--primary-dark);
}

.info-card .details p {
    font-size: 15px;
    color: #555;
    margin: 0;
    line-height: 1.4;
}

/* ----------------------------------------------------
   핵심 사업분야 (.feature-card) 호버 시 배경/텍스트 반전 효과
---------------------------------------------------- */
.feature-card {
    transition: all 0.4s ease;
}

.feature-card h3,
.feature-card p {
    transition: color 0.4s ease;
}

.feature-card:hover {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%) !important;
}

.feature-card:hover h3,
.feature-card:hover p {
    color: #ffffff !important;
}

/* 제품 소개 카드 임시 로고 이미지 스타일 */
.prod-logo {
    width: 70%;
    height: auto;
    object-fit: contain;
    transition: transform 0.4s ease;
}

.prod-btn-card:hover .prod-icon {
    transform: scale(1.05) translateY(-5px) !important;
}

/* 제품소개 로고 컨테이너 직사각형+라운드 변경 */
.prod-icon {
    width: 160px !important;
    height: 75px !important;
    border-radius: 16px !important;
}

.prod-logo {
    width: 80% !important;
    height: 80% !important;
}

/* 메가 메뉴(하위메뉴) 간격 및 패딩 수정 */
.dropdown-menu {
    padding: 20px 0 !important;
    /* 상하 여백 줄임 */
    gap: 15px !important;
    /* 항목 간 간격 설정 */
}

.dropdown-menu li {
    margin: 0 !important;
}

.dropdown-menu a {
    padding: 5px 0 5px 15px !important;
    line-height: 1.4 !important;
}

/* 하위메뉴 색상 커스텀 (글씨 검정 -> 호버시 파랑, 바 주황색) */
.dropdown-menu a {
    color: #222222 !important;
    /* 부드러운 검은색 */
}

.dropdown-menu a:hover {
    color: var(--primary-color) !important;
    /* 파란색 */
}

.dropdown-menu a::before {
    background-color: #f97316 !important;
    /* 세련된 주황색 */
}

/* 하위메뉴 전체(가운데 정렬) 밸런스 조정 */
.nav li.dropdown {
    position: relative !important;
}

.dropdown-menu {
    left: 50% !important;
    transform: translateX(-50%) translateY(10px) !important;
    /* 기본 상태에서 살짝 위 */
    align-items: center;
    /* 텍스트 가운데 정렬 느낌을 위해 flex-align */
}

.nav:hover .dropdown-menu,
.nav li.dropdown:hover .dropdown-menu {
    transform: translateX(-50%) translateY(0) !important;
    /* 호버 시 제자리 */
}

.dropdown-menu a {
    text-align: center !important;
    /* 텍스트도 완벽하게 가운데 정렬 */
    padding: 8px 15px !important;
}

.dropdown-menu a:hover {
    transform: translateY(-2px) !important;
    /* 호버 시 위로 살짝 뜨도록 (오른쪽 이동 대신) */
}

/* ----------------------------------------------------
   서브 페이지 카테고리 탭 (반응형)
---------------------------------------------------- */
.category-nav {
    display: flex;
    justify-content: center;
    /* 데스크탑 중앙 정렬 */
    gap: 15px;
    padding: 20px;
    margin: -30px auto 40px;
    background: rgba(255, 255, 255, 0.8);
    /* 글래스모피즘 베이스 */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 50px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    width: fit-content;
    max-width: 95%;
    overflow-x: auto;
    /* 모바일 스크롤 지원 */
    -webkit-overflow-scrolling: touch;
}

/* 스크롤바 숨기기 (깔끔한 디자인을 위해) */
.category-nav::-webkit-scrollbar {
    display: none;
}

.category-nav {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.category-btn {
    background: var(--bg-white);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 30px;
    /* 모던한 알약 모양 */
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.category-btn:hover {
    background: rgba(37, 99, 235, 0.05);
    border-color: var(--primary-light);
    color: var(--primary-dark);
    transform: translateY(-2px);
}

.category-btn.active {
    background: var(--primary-color);
    color: var(--bg-white);
    border-color: var(--primary-color);
    box-shadow: 0 6px 15px rgba(37, 99, 235, 0.3);
    transform: translateY(-2px);
}

@media (max-width: 768px) {
    .category-nav {
        justify-content: flex-start;
        /* 모바일에서는 좌측 정렬 후 가로스크롤 */
        border-radius: 20px;
        margin: -20px auto 30px;
        padding: 15px;
    }
}

/* ----------------------------------------------------
   카테고리 버튼 디자인 커스텀 (프리미엄 & 세련된 스타일)
---------------------------------------------------- */
.category-nav {
    background: rgba(255, 255, 255, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.05) !important;
}

.category-btn {
    background: rgba(255, 255, 255, 0.7) !important;
    border: none !important;
    color: #444 !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02) !important;
    backdrop-filter: blur(4px) !important;
    font-weight: 500 !important;
    letter-spacing: -0.3px;
}

.category-btn:hover {
    background: rgba(255, 255, 255, 1) !important;
    color: var(--primary-color) !important;
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.1) !important;
}

.category-btn.active {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.4) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

/* 카테고리 탭 위치를 흰 배경 위로 이동 */
.category-nav {
    margin: 20px auto 40px !important;
    /* 음수 마진 제거하여 헤더 아래(흰 배경)로 내림 */
}

@media (max-width: 768px) {
    .category-nav {
        margin: 10px auto 30px !important;
    }
}

/* 흰 배경에서 잘 보이도록 카테고리 탭 시인성 개선 */
.category-nav {
    background: transparent !important;
    /* 컨테이너 배경 제거하여 답답함 해소 */
    border: none !important;
    box-shadow: none !important;
}

.category-btn {
    background: #ffffff !important;
    /* 버튼 자체를 완전한 흰색으로 */
    border: 1px solid #e2e8f0 !important;
    /* 뚜렷한 연회색 테두리 */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06) !important;
    /* 부드럽지만 확실한 그림자 */
    color: #475569 !important;
    /* 진한 회색 글씨로 가독성 상승 */
}

.category-btn:hover {
    background: #f8fafc !important;
    /* 호버 시 아주 살짝 어두워짐 */
    border-color: #cbd5e1 !important;
    color: var(--primary-color) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1) !important;
    /* 호버 시 그림자 강해짐 */
}

/* ----------------------------------------------------
   2차 서브 카테고리 탭 (L3, L2 등)
---------------------------------------------------- */
.subcategory-nav {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: -20px auto 40px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 15px;
}

.subcategory-nav::-webkit-scrollbar {
    display: none;
}

.subcategory-nav {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.sub-btn {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 8px 18px;
    font-size: 14px;
    font-weight: 500;
    color: #64748b;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.3s ease;
}

.sub-btn:hover {
    color: var(--primary-color);
    background: #ffffff;
    border-color: #cbd5e1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.sub-btn.active {
    background: var(--primary-color);
    color: #ffffff;
    border-color: var(--primary-color);
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

/* ----------------------------------------------------
   제품 상세 갤러리 및 레이아웃
---------------------------------------------------- */
.product-detail-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* 5:5 분할 */
    gap: 25px;
    align-items: center;
    /* 사진과 텍스트를 위아래 중앙 정렬 */
    background: #ffffff;
    padding: 15px 25px;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(255, 140, 0, 0.05);
    margin-bottom: 30px;
}

/* 모바일에서는 세로 배치 */
@media (max-width: 768px) {
    .product-detail-layout {
        grid-template-columns: 1fr;
        padding: 20px;
        gap: 20px;
    }
}

.product-gallery {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.main-image-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 4/3;
    border-radius: 12px;
    overflow: hidden;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.main-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: opacity 0.3s ease;
}

.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.8);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 18px;
    color: #333;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);

    z-index: 2;
}

.slider-arrow:hover {
    background: #ffffff;
    color: var(--primary-color);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.slider-prev {
    left: 10px;
}

.slider-next {
    right: 10px;
}

.thumb-list {
    display: flex;
    gap: 10px;
    overflow-x: auto;
}

.thumb-list::-webkit-scrollbar {
    display: none;
}

.thumb-item {
    width: 70px;
    height: 50px;
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer;
    border: 2px solid transparent;
    opacity: 0.6;

}

.thumb-item:hover {
    opacity: 0.9;
}

.thumb-item.active {
    border-color: var(--primary-color);
    opacity: 1;
}

.product-info h3 {
    font-size: 24px;
    color: var(--primary-dark);
    margin-bottom: 20px;
    font-weight: 700;
    border-bottom: 2px solid #f1f5f9;
    padding-bottom: 15px;
}

.info-content p {
    font-size: 15px;
    color: #475569;
    line-height: 1.7;
    margin-bottom: 15px;
}







/* 2차 카테고리 버튼 크기 키우기 */
.sub-btn {
    padding: 12px 24px !important;
    font-size: 16px !important;
}

/* ----------------------------------------------------
   제품 설명 영역 (최적화된 디자인)
---------------------------------------------------- */
.prod-badge {
    display: inline-block;
    background: #e2e8f0;
    color: #475569;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 4px;
    margin-bottom: 10px;
}

.prod-title {
    font-size: 1.6rem !important;
    color: var(--primary-dark) !important;
    margin-bottom: 8px !important;
    font-weight: 800 !important;
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

.prod-summary {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.summary-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px dashed #cbd5e1;
    padding-bottom: 6px;
}

.summary-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.summary-item .label {
    color: #64748b;
    font-size: 0.95rem;
    font-weight: 600;
}

.summary-item .value {
    color: #1e293b;
    font-size: 1rem;
    font-weight: 700;
}

.summary-item .price {
    color: #ef4444;
    font-size: 1.25rem;
}

.summary-item .price small {
    font-size: 0.9rem;
    color: #64748b;
}

.info-content h4 {
    font-size: 1.1rem;
    color: #334155;
    margin-bottom: 10px;
    font-weight: 700;
}

/* ----------------------------------------------------
   제품 상세 하단 액션 버튼 (조달/다운로드)
---------------------------------------------------- */
.prod-actions {
    /* 양쪽 칸을 모두 합쳐서 전체 너비 사용 */
    display: flex;
    justify-content: flex-start;
    gap: 20px;
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid #e2e8f0;
}

.action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 10px;
    /* 큼지막한 고정 너비 */
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;

    flex: 1;
    text-align: center;
}

.primary-btn {
    background-color: var(--primary-color);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
}

.primary-btn:hover {
    background-color: var(--primary-dark);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.3);
}

.secondary-btn {
    background-color: #f1f5f9;
    color: #475569;
    border: 1px solid #cbd5e1;
}

.secondary-btn:hover {
    background-color: #e2e8f0;
    color: #1e293b;
    transform: translateY(-2px);
}

/* ----------------------------------------------------
   버튼 2개 하단 중앙 정렬 덮어쓰기
---------------------------------------------------- */
.prod-actions {
    /* 양쪽 칸을 모두 합쳐서 전체 너비 사용 */
    display: flex;
    justify-content: flex-start;
    gap: 20px;
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid #e2e8f0;
}

.action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 10px;
    /* 큼지막한 고정 너비 */
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;

    flex: 1;
    text-align: center;
}

/* product-info를 flex로 만들어서 내부 요소를 위아래로 분배 */
.product-info {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.info-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    /* 남은 공간을 모두 차지하도록 설정 */
}


.info-content ul {
    margin-top: 10px;
    padding-left: 0;
    list-style: none;
    border-radius: 6px;
    overflow: hidden;
    /* 모서리 둥글게 잘리도록 */
    border: 1px solid #e2e8f0;
}

.info-content li {
    padding: 6px 15px;
    /* 위아래 여백을 대폭 줄여 슬림하게 */
    background: #f8fafc;
    margin-bottom: 0 !important;
    /* 빈공간 0 */
    border-radius: 0 !important;
    /* 개별 모서리 둥글기 제거 */
    border-bottom: 1px solid #e2e8f0;
    /* 줄 사이에 실선만 */
    font-size: 0.85rem !important;
    /* 글씨 크기도 약간 축소 */
    color: #334155;
    display: flex;
    align-items: center;
}

.info-content li:nth-child(even) {
    background: #ffffff;
}

.info-content li:last-child {
    border-bottom: none;
    /* 마지막 줄은 밑줄 제거 */
}

.info-content li strong {
    color: var(--primary-dark);
    width: 90px;
    /* 글씨가 작아졌으니 너비도 살짝 축소 */
    flex-shrink: 0;
    font-size: 0.85rem !important;
}


/* Company Intro Layout */
.company-intro-layout {
    max-width: 900px;
    margin: 0 auto;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.03);
    padding: 50px;
    border: 1px solid #e2e8f0;
}

.intro-header {
    text-align: center;
    margin-bottom: 50px;
    padding-bottom: 40px;
    border-bottom: 2px solid #f1f5f9;
}

.intro-header .section-title {
    font-size: 1.8rem;
    color: var(--primary-dark);
    margin-bottom: 20px;
    font-weight: 800;
}

.intro-header .section-subtitle {
    font-size: 1.1rem;
    color: #475569;
    line-height: 1.8;
    word-break: keep-all;
}

.company-info-table {
    display: flex;
    flex-direction: column;
}

.info-row {
    display: flex;
    padding: 20px 0;
    border-bottom: 1px dashed #e2e8f0;
}

.info-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.info-label {
    width: 180px;
    font-weight: 700;
    color: #334155;
    font-size: 1.05rem;
    flex-shrink: 0;
}

.info-value {
    flex-grow: 1;
    color: #475569;
    font-size: 1.05rem;
    line-height: 1.6;
}

.business-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.business-list li {
    position: relative;
    padding-left: 15px;
    margin-bottom: 8px;
}

.business-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    width: 5px;
    height: 5px;
    background: var(--primary-color);
    border-radius: 50%;
}


/* ------------------------------------------------ */
/* ------------------------------------------------ */

/* Vision Section */
.about-vision {
    text-align: center;
    padding: 60px 20px;
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
    border-radius: 20px;
    margin-bottom: 40px;
    border: 1px solid rgba(0, 0, 0, 0.03);
}

.vision-title {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--primary-dark);
    margin-bottom: 25px;
    line-height: 1.4;
    letter-spacing: -0.5px;
}

.vision-desc {
    font-size: 1.1rem;
    color: #475569;
    line-height: 1.8;
    max-width: 760px;
    margin: 0 auto;
    word-break: keep-all;
}

/* Core Values (3 Cards) */
.about-core-values {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    margin-bottom: 60px;
}

.value-card {
    background: #fff;
    padding: 40px 30px;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.02);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.value-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.08);
}

.value-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 20px;
    background: #f1f5f9;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
}

.value-icon svg {
    width: 34px;
    height: 34px;
}

.value-card h3 {
    font-size: 1.3rem;
    color: var(--primary-dark);
    margin-bottom: 15px;
    font-weight: 700;
}

.value-card p {
    font-size: 0.95rem;
    color: #64748b;
    line-height: 1.6;
    word-break: keep-all;
}

/* Overview Grid */
.about-overview {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.02);
    padding: 50px;
}

.overview-header {
    text-align: center;
    margin-bottom: 40px;
}

.overview-header h3 {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--primary-dark);
    margin-bottom: 10px;
}

.overview-header p {
    color: var(--primary-color);
    font-weight: 600;
}

.overview-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.grid-item {
    background: #f8fafc;
    padding: 25px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border: 1px solid rgba(0, 0, 0, 0.03);
}

.grid-item.full-width {
    grid-column: 1 / -1;
}

.grid-label {
    font-size: 0.9rem;
    color: #64748b;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.grid-value {
    font-size: 1.15rem;
    color: var(--primary-dark);
    font-weight: 700;
}

@media (max-width: 768px) {
    .overview-grid {
        grid-template-columns: 1fr;
    }

    .vision-title {
        font-size: 1.7rem;
    }

    .about-overview {
        padding: 30px 20px;
    }
}


/* ------------------------------------------------ */
/* High Impact Company Intro V3 (No Responsive Constraints) */
/* ------------------------------------------------ */

.impact-intro {
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    font-family: 'Noto Sans KR', sans-serif;
    padding-bottom: 100px;
}

.impact-hero {
    position: relative;
    background: linear-gradient(135deg, #020617 0%, #1e293b 100%);
    border-radius: 40px;
    padding: 120px 80px;
    color: #fff;
    overflow: hidden;
    box-shadow: 0 40px 80px rgba(2, 6, 23, 0.4);
}

.impact-watermark {
    position: absolute;
    top: -50px;
    right: -30px;
    font-size: 250px;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.03);
    line-height: 1;
    letter-spacing: -10px;
    pointer-events: none;
    z-index: 0;
}

.impact-hero-content {
    position: relative;
    z-index: 1;
    max-width: 800px;
}

.impact-title {
    font-size: 6rem;
    font-weight: 900;
    line-height: 1.05;
    margin-bottom: 20px;
    background: linear-gradient(to right, #ffffff, #94a3b8);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    letter-spacing: -2px;
}

.impact-subtitle {
    font-size: 2rem;
    font-weight: 300;
    color: #38bdf8;
    margin-bottom: 10px;
    letter-spacing: -1px;
}

.impact-line {
    width: 680px;
    height: 4px;
    background: #38bdf8;
    margin-bottom: 40px;
    border-radius: 2px;
}

.impact-desc {
    font-size: 1.25rem;
    color: #cbd5e1;
    line-height: 1.8;
    font-weight: 300;
    word-break: keep-all;
}

.impact-desc strong {
    color: #fff;
    font-weight: 700;
}

/* Glassmorphism Stats */
.impact-stats-container {
    display: flex;
    justify-content: space-between;
    margin-top: -60px;
    padding: 0 80px;
    position: relative;
    z-index: 10;
    gap: 30px;
}

.impact-stat-box {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 40px;
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 1);
    flex: 1;
    text-align: center;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.impact-stat-box:hover {
    transform: translateY(-15px) scale(1.02);
}

.stat-number {
    display: block;
    font-size: 4rem;
    font-weight: 900;
    color: #0f172a;
    line-height: 1;
    margin-bottom: 15px;
    letter-spacing: -2px;
}

.stat-label {
    color: #475569;
    font-size: 1.05rem;
    letter-spacing: 1px;
    font-weight: 600;
}

/* Details Grid */
.impact-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 40px;
    margin-top: 80px;
    padding: 0 20px;
}

.detail-card {
    background: #fff;
    padding: 50px 40px;
    border-radius: 30px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.04);
    border: 1px solid #f1f5f9;
}

.detail-card:hover {
    transform: translateY(-5px);
}

.highlight-card {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid #e2e8f0;
}

.dc-title {
    font-size: 1.6rem;
    font-weight: 900;
    color: #0f172a;
    margin-bottom: 40px;
    display: flex;
    align-items: center;
    letter-spacing: -0.5px;
}

.dc-title::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    background: #38bdf8;
    border-radius: 50%;
    margin-right: 15px;
}

.dc-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.dc-list li {
    font-size: 1.15rem;
    color: #334155;
    margin-bottom: 25px;
    line-height: 1.6;
    display: flex;
    flex-direction: column;
}

.dc-list li strong {
    font-size: 0.9rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 8px;
}

.business-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.business-tags li {
    background: #fff;
    padding: 15px 25px;
    border-radius: 16px;
    font-size: 1.1rem;
    font-weight: 700;
    color: #0f172a;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);
    display: inline-block;
    margin-bottom: 0;
    border: 1px solid #e2e8f0;

}



/* 가로선에서 각 부서로 내려가는 짧은 세로선 */
.org-departments {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-top: 30px;
    position: relative;
}

.org-departments .org-dept {
    position: relative;
}

.org-departments .org-dept::before {
    content: '';
    position: absolute;
    top: -30px;
    left: 50%;
    width: 1px;
    height: 30px;
    background: #cbd5e1;
}


/* ------------------------------------------------ */
/* High Impact Organization Chart V2 */
/* ------------------------------------------------ */

.impact-org {
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    font-family: 'Noto Sans KR', sans-serif;
    padding-bottom: 80px;
}

.org-header-impact {
    text-align: center;
    margin-bottom: 60px;
}

.org-header-impact h2 {
    font-size: 3rem;
    font-weight: 900;
    color: var(--primary-dark);
    margin-bottom: 15px;
    letter-spacing: -1px;
}

.org-header-impact p {
    font-size: 1.2rem;
    color: #64748b;
    font-weight: 400;
}

/* Top Tier (CEO) */
.org-top-tier {
    display: flex;
    justify-content: center;
    margin-bottom: 0;
    /* Changed for connection lines */
}

.org-card {
    background: #ffffff;
    border-radius: 24px;
    padding: 40px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.03);
    border: 1px solid #f1f5f9;
    text-align: center;
}



.ceo-card {
    width: 320px;
    padding: 25px 30px;
    background: linear-gradient(135deg, var(--primary-dark) 0%, #1e293b 100%);
    color: #ffffff;
    z-index: 2;
    position: relative;
}

.ceo-card .org-card-icon {
    font-size: 2.5rem;
    margin-bottom: 10px;
}

.ceo-card .org-card-title {
    color: #ffffff;
    font-size: 1.4rem;
    margin-bottom: 10px;
}

.ceo-card .org-card-desc {
    color: #cbd5e1;
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 0;
}

/* Connection Lines */
.org-connection-line {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}


.line-vertical-main {
    width: 2px;
    height: 100px;
    background: #cbd5e1;
}

/* 4 Main Departments Grid */
.org-main-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

.dept-card {
    padding: 30px 20px;
    border-top: 4px solid var(--primary-color);
    position: relative;
    margin-top: 100px;
}

/* Vertical line connecting to card */
.dept-card::before {
    content: '';
    position: absolute;
    top: -104px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 100px;
    background: #cbd5e1;
}

/* Horizontal connecting lines */
.dept-card::after {
    content: '';
    position: absolute;
    top: -104px;
    height: 2px;
    background: #cbd5e1;
}

/* Left-most card: line from center to right gap */
.dept-card:first-child::after {
    left: 50%;
    width: calc(50% + 12.5px);
}

/* Middle cards: line spanning full width + gap */
.dept-card:not(:first-child):not(:last-child)::after {
    left: -12.5px;
    width: calc(100% + 25px);
}

/* Right-most card: line from left gap to center */
.dept-card:last-child::after {
    left: -12.5px;
    width: calc(50% + 12.5px);
}




.dept-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
}

.dept-icon {
    font-size: 2.5rem;
    margin-bottom: 15px;
}

.dept-header h4 {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--primary-dark);
}

.dept-desc {
    font-size: 0.95rem;
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 25px;
    min-height: 70px;
}

.org-teams {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.team-tag {
    background: #f8fafc;
    color: #334155;
    padding: 12px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.95rem;
    border: 1px solid #e2e8f0;
    letter-spacing: 0.5px;
}


@media (max-width: 1024px) {
    .org-main-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .dept-card {
        margin-top: 20px;
    }

    .dept-card::before,
    .dept-card::after,
    .line-vertical-main {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .org-top-tier {
        flex-direction: column;
        align-items: center;
    }

    .org-main-grid {
        grid-template-columns: 1fr;
    }
}


/* ------------------------------------------------ */

/* ------------------------------------------------ */
/* High Impact Location V2 (오시는길) */
/* ------------------------------------------------ */
.impact-location {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    font-family: 'Noto Sans KR', sans-serif;
    padding: 0px 20px 80px 20px;
    /* Reduced top padding to 40px, kept bottom at 80px */
}

/* Glowing Background Orb */
.impact-location::before {
    content: '';
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80vw;
    height: 80vw;
    background: radial-gradient(circle, rgba(56, 189, 248, 0.06) 0%, rgba(255, 255, 255, 0) 60%);
    z-index: 0;
    pointer-events: none;
}

.location-header-impact {
    position: relative;
    z-index: 1;
    text-align: center;
    margin-bottom: 60px;
}

.location-header-impact h2 {
    font-size: 4rem;
    font-weight: 900;
    background: linear-gradient(to right, var(--primary-dark), #3b82f6);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    margin-bottom: 15px;
    letter-spacing: -2px;
}

.location-header-impact p {
    font-size: 1.25rem;
    color: #64748b;
    font-weight: 300;
}

/* Google Map Container Enhancement */
.map-container-impact {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 550px;
    border-radius: 32px;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.7) inset;
    margin-bottom: 60px;
    border: 8px solid rgba(255, 255, 255, 0.6);
    background: #ffffff;
    backdrop-filter: blur(10px);
}

/* Info Cards Grid */
.location-info-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.loc-card {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 35px 40px;
    border-radius: 24px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.8);
}

.loc-icon {
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    border-radius: 20px;
    margin-right: 30px;
    flex-shrink: 0;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
    background: #ffffff;
    /* Default background */
}

/* Soft Icon Background Colors */
.loc-card:nth-child(1) .loc-icon {
    color: #0ea5e9;
    border: 2px solid #e0f2fe;
}

.loc-card:nth-child(2) .loc-icon {
    color: #10b981;
    border: 2px solid #d1fae5;
}

.loc-card:nth-child(3) .loc-icon {
    color: #6366f1;
    border: 2px solid #e0e7ff;
}

.loc-card:nth-child(4) .loc-icon {
    color: #f97316;
    border: 2px solid #ffedd5;
}

.loc-content {
    flex: 1;
}

.loc-content h4 {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--primary-dark);
    margin-bottom: 12px;
}

.loc-content p {
    font-size: 1.05rem;
    color: #475569;
    line-height: 1.6;
    margin: 0;
    word-break: keep-all;
}

.loc-content p strong {
    color: var(--primary-dark);
    font-weight: 800;
    margin-right: 6px;
}

.phone-number {
    font-size: 1.6rem !important;
    font-weight: 900 !important;
    color: var(--primary-color) !important;
    letter-spacing: 1px;
    text-shadow: 0 2px 10px rgba(56, 189, 248, 0.2);
}

@media (max-width: 768px) {
    .map-container-impact {
        height: 350px;
    }

    .location-info-grid {
        grid-template-columns: 1fr;
    }

    .loc-card {
        padding: 25px;
    }
}

/* ------------------------------------------------ */
/* R&D Tab Design (연구소 - 연구개발) */
/* ------------------------------------------------ */
.impact-rnd {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    font-family: 'Noto Sans KR', sans-serif;
    padding: 40px 0 80px 0;
}

/* R&D Hero Section */
.rnd-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    border-radius: 32px;
    padding: 60px;
    margin-bottom: 80px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
}

.rnd-hero-content {
    flex: 1;
    max-width: 600px;
    z-index: 2;
}

.rnd-badge {
    display: inline-block;
    padding: 8px 18px;
    background: #38bdf8;
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 900;
    border-radius: 50px;
    margin-bottom: 25px;
    letter-spacing: 1.5px;
    box-shadow: 0 4px 15px rgba(56, 189, 248, 0.5);
}

.rnd-hero-content h2 {
    font-size: 2.8rem;
    font-weight: 900;
    color: #ffffff;
    line-height: 1.3;
    margin-bottom: 25px;
    letter-spacing: -1px;
}

.highlight-text {
    background: linear-gradient(to right, #ea580c, #f43f5e);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.rnd-hero-content p {
    font-size: 1.15rem;
    color: #94a3b8;
    line-height: 1.7;
    word-break: keep-all;
}

/* Abstract Tech Visual (Replaces old image) */
.rnd-hero-visual {
    flex: 1;
    height: 300px;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 1;
}


.floating-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
    z-index: 0;
    animation: float 6s ease-in-out infinite;
}

.orb-red {
    width: 200px;
    height: 200px;
    background: rgba(244, 63, 94, 0.15);
    top: -50px;
    right: -50px;
}

.orb-blue {
    width: 300px;
    height: 300px;
    background: rgba(56, 189, 248, 0.1);
    bottom: -100px;
    left: -50px;
    animation-delay: -3s;
}

/* R&D Fields Section */
.rnd-section-title {
    font-size: 2rem;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 40px;
    text-align: center;
}

.rnd-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.rnd-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 24px;
    padding: 40px;
    display: flex;
    align-items: flex-start;
    transition: all 0.3s ease;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
}

.rnd-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06);
    border-color: #cbd5e1;
}

.rnd-icon {
    width: 60px;
    height: 60px;
    background: #f8fafc;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    margin-right: 25px;
    flex-shrink: 0;
    border: 1px solid #f1f5f9;
}

.rnd-info h4 {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--primary-dark);
    margin-bottom: 15px;
}

.rnd-info p {
    font-size: 1rem;
    color: #475569;
    line-height: 1.6;
    word-break: keep-all;
    margin: 0;
}

/* The last card spans full width */
.full-width-card {
    grid-column: 1 / -1;
    background: linear-gradient(135deg, #f8fafc, #ffffff);
}

.full-width-card:hover {
    border-color: #bae6fd;
    box-shadow: 0 20px 40px rgba(56, 189, 248, 0.1);
}

.full-width-card .rnd-icon {
    background: #e0f2fe;
}

@media (max-width: 1024px) {
    .rnd-hero {
        flex-direction: column;
        text-align: center;
        padding: 40px;
    }

    .rnd-hero-content {
        margin-bottom: 40px;
    }

    .rnd-hero-visual {
        width: 100%;
        height: 250px;
    }
}

@media (max-width: 768px) {
    .rnd-grid {
        grid-template-columns: 1fr;
    }

    .full-width-card {
        grid-column: auto;
    }
}


/* R&D Tags */
.rnd-tags {
    margin-top: 20px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.r-tag {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--primary-color);
    background: #e0f2fe;
    padding: 4px 10px;
    border-radius: 4px;
}

/* Core Competencies */
.rnd-competencies-container {
    margin-top: 80px;
}

.competency-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.comp-card {
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    padding: 40px 30px;
    border-radius: 24px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
    transition: transform 0.3s ease;
}

.comp-card:hover {
    transform: translateY(-10px);
    background: #ffffff;
    box-shadow: 0 20px 40px rgba(56, 189, 248, 0.1);
}

.comp-icon {
    font-size: 3rem;
    margin-bottom: 20px;
}

.comp-card h4 {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--primary-dark);
    margin-bottom: 15px;
}

.comp-card p {
    font-size: 0.95rem;
    color: #64748b;
    line-height: 1.6;
    word-break: keep-all;
}

/* R&D Process Timeline */
.rnd-process-container {
    margin-top: 100px;
}

.process-timeline {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-top: 50px;
    position: relative;
}

.process-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 150px;
    position: relative;
    z-index: 2;
}

.step-circle {
    width: 60px;
    height: 60px;
    background: #ffffff;
    border: 3px solid var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--primary-color);
    margin-bottom: 20px;
    box-shadow: 0 10px 20px rgba(14, 165, 233, 0.2);
    transition: all 0.3s ease;
}

.process-step h5 {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--primary-dark);
    margin-bottom: 10px;
}

.process-step p {
    font-size: 0.9rem;
    color: #64748b;
    line-height: 1.5;
}

.process-line {
    flex: 1;
    height: 4px;
    background: #e2e8f0;
    margin-top: 30px;
    position: relative;
    z-index: 1;
}

.process-line::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    background: var(--primary-color);
    transition: width 0.5s ease;
}


@media (max-width: 768px) {
    .competency-grid {
        grid-template-columns: 1fr;
    }

    .process-timeline {
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }

    .process-line {
        display: none;
    }
}





/* Perfect Loop Animation - No Delays */
.step-circle {
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

.process-line::after {
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

/* 1. Node 1 */
@keyframes node1 {

    0%,
    90% {
        background: #ffffff;
        color: var(--primary-color);
        transform: scale(1);
        box-shadow: 0 10px 20px rgba(14, 165, 233, 0.2);
    }

    5%,
    85% {
        background: var(--primary-color);
        color: #ffffff;
        transform: scale(1.1);
        box-shadow: 0 15px 30px rgba(14, 165, 233, 0.6);
    }

    100% {
        background: #ffffff;
        color: var(--primary-color);
        transform: scale(1);
        box-shadow: 0 10px 20px rgba(14, 165, 233, 0.2);
    }
}

.process-step:nth-child(1) .step-circle {
    animation-name: node1;
}

/* 2. Line 1 */
@keyframes line1 {

    0%,
    5%,
    90% {
        width: 0;
    }

    10%,
    85% {
        width: 100%;
    }

    100% {
        width: 0;
    }
}

.process-line:nth-child(2)::after {
    animation-name: line1;
}

/* 3. Node 2 */
@keyframes node2 {

    0%,
    15%,
    90% {
        background: #ffffff;
        color: var(--primary-color);
        transform: scale(1);
        box-shadow: 0 10px 20px rgba(14, 165, 233, 0.2);
    }

    20%,
    85% {
        background: var(--primary-color);
        color: #ffffff;
        transform: scale(1.1);
        box-shadow: 0 15px 30px rgba(14, 165, 233, 0.6);
    }

    100% {
        background: #ffffff;
        color: var(--primary-color);
        transform: scale(1);
        box-shadow: 0 10px 20px rgba(14, 165, 233, 0.2);
    }
}

.process-step:nth-child(3) .step-circle {
    animation-name: node2;
}

/* 4. Line 2 */
@keyframes line2 {

    0%,
    20%,
    90% {
        width: 0;
    }

    25%,
    85% {
        width: 100%;
    }

    100% {
        width: 0;
    }
}

.process-line:nth-child(4)::after {
    animation-name: line2;
}

/* 5. Node 3 */
@keyframes node3 {

    0%,
    30%,
    90% {
        background: #ffffff;
        color: var(--primary-color);
        transform: scale(1);
        box-shadow: 0 10px 20px rgba(14, 165, 233, 0.2);
    }

    35%,
    85% {
        background: var(--primary-color);
        color: #ffffff;
        transform: scale(1.1);
        box-shadow: 0 15px 30px rgba(14, 165, 233, 0.6);
    }

    100% {
        background: #ffffff;
        color: var(--primary-color);
        transform: scale(1);
        box-shadow: 0 10px 20px rgba(14, 165, 233, 0.2);
    }
}

.process-step:nth-child(5) .step-circle {
    animation-name: node3;
}

/* 6. Line 3 */
@keyframes line3 {

    0%,
    35%,
    90% {
        width: 0;
    }

    40%,
    85% {
        width: 100%;
    }

    100% {
        width: 0;
    }
}

.process-line:nth-child(6)::after {
    animation-name: line3;
}

/* 7. Node 4 */
@keyframes node4 {

    0%,
    45%,
    90% {
        background: #ffffff;
        color: var(--primary-color);
        transform: scale(1);
        box-shadow: 0 10px 20px rgba(14, 165, 233, 0.2);
    }

    50%,
    85% {
        background: var(--primary-color);
        color: #ffffff;
        transform: scale(1.1);
        box-shadow: 0 15px 30px rgba(14, 165, 233, 0.6);
    }

    100% {
        background: #ffffff;
        color: var(--primary-color);
        transform: scale(1);
        box-shadow: 0 10px 20px rgba(14, 165, 233, 0.2);
    }
}

.process-step:nth-child(7) .step-circle {
    animation-name: node4;
}

/* 8. Line 4 */
@keyframes line4 {

    0%,
    50%,
    90% {
        width: 0;
    }

    55%,
    85% {
        width: 100%;
    }

    100% {
        width: 0;
    }
}

.process-line:nth-child(8)::after {
    animation-name: line4;
}

/* 9. Node 5 */
@keyframes node5 {

    0%,
    60%,
    90% {
        background: #ffffff;
        color: var(--primary-color);
        transform: scale(1);
        box-shadow: 0 10px 20px rgba(14, 165, 233, 0.2);
    }

    65%,
    85% {
        background: var(--primary-color);
        color: #ffffff;
        transform: scale(1.1);
        box-shadow: 0 15px 30px rgba(14, 165, 233, 0.6);
    }

    100% {
        background: #ffffff;
        color: var(--primary-color);
        transform: scale(1);
        box-shadow: 0 10px 20px rgba(14, 165, 233, 0.2);
    }
}

.process-step:nth-child(9) .step-circle {
    animation-name: node5;
}








/* Clean Abstract Tech Chart */
.rnd-hero-visual {
    flex: 1;
    height: 300px;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 1;
}

.abstract-chart {
    display: flex;
    align-items: flex-end;
    gap: 20px;
    height: 200px;
    position: relative;
    width: 100%;
    max-width: 400px;
    z-index: 2;
}

.abstract-chart .bar {
    flex: 1;
    background: linear-gradient(to top, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.2));
    border-radius: 10px 10px 0 0;
    box-shadow: -10px 10px 20px rgba(0, 0, 0, 0.2);
    position: relative;
    transform-origin: bottom;
    animation: cleanBarGlow 3s ease-in-out infinite alternate;
}

.abstract-chart .bar::after {
    content: '';
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 12px;
    background: #ea580c;
    border-radius: 50%;
    box-shadow: 0 0 15px rgba(234, 88, 12, 0.8);
}

.bar-1 {
    height: 40%;
    animation-delay: -0.3s;
}

.bar-2 {
    height: 60%;
    animation-delay: -0.6s;
}

.bar-3 {
    height: 50%;
    animation-delay: -0.9s;
}

.bar-4 {
    height: 80%;
    animation-delay: -1.2s;
}

.bar-5 {
    height: 100%;
    animation-delay: -1.5s;
    background: linear-gradient(to top, rgba(244, 63, 94, 0.1), #f43f5e) !important;
}

.bar-5::after {
    background: #e11d48 !important;
    width: 16px !important;
    height: 16px !important;
    top: -14px !important;
    box-shadow: 0 0 20px rgba(225, 29, 72, 0.8);
}




@keyframes cleanBarGlow {
    0% {
        opacity: 0.6;
    }

    100% {
        opacity: 1;
    }
}


.floating-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
    z-index: 0;
    animation: floatOrb 6s ease-in-out infinite;
}

.orb-red {
    width: 200px;
    height: 200px;
    background: rgba(244, 63, 94, 0.15);
    top: -50px;
    right: -50px;
}

.orb-blue {
    width: 300px;
    height: 300px;
    background: rgba(56, 189, 248, 0.1);
    bottom: -100px;
    left: -50px;
    animation-delay: -3s;
}

@keyframes floatOrb {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-20px);
    }
}




.trend-svg {
    position: absolute;
    top: -90px;
    left: 0;
    width: 130%;
    height: 120%;
    z-index: 10;
    pointer-events: none;
    filter: drop-shadow(0 5px 15px rgba(225, 29, 72, 0.8));
    animation: revealTrend 5s ease-in-out infinite;
}

@keyframes revealTrend {

    0%,
    5% {
        clip-path: polygon(0% -50%, 0% 150%, 0% 150%, 0% -50%);
        opacity: 0;
    }

    15% {
        opacity: 1;
    }

    85%,
    100% {
        clip-path: polygon(0% -50%, 0% 150%, 150% 150%, 150% -50%);
        opacity: 0;
    }
}

/* ------------------------------------- */
/* Premium Epic Achievements Timeline */
/* ------------------------------------- */

.ach-premium-header {
    position: relative;
    padding: 0 20px 20px 20px;
    background: transparent;
    margin-bottom: 0;
    overflow: hidden;
}

.ach-bg-glow {
    display: none;
}

.ach-stats-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 40px;
}

.ach-stat {
    text-align: center;
}

.stat-num {
    font-size: 3rem;
    font-weight: 800;
    color: #0f172a;
    font-family: 'Montserrat', sans-serif;
    text-shadow: 0 5px 15px rgba(14, 165, 233, 0.3);
    margin-bottom: 10px;
}

.stat-label {
    color: #475569;
    font-size: 1.05rem;
    letter-spacing: 1px;
    font-weight: 600;
}

.ach-header-text {
    position: relative;
    z-index: 1;
    text-align: center;
}

.ach-header-text h3 {
    font-size: 2.4rem;
    color: #0f172a;
    margin-bottom: 20px;
    font-weight: 800;
}

.ach-header-text h3 span {
    color: var(--primary-color);
}

.ach-header-text p {
    color: #334155;
    font-size: 1.15rem;
    line-height: 1.7;
    word-break: keep-all;
}

/* Timeline Layout */
.epic-timeline-container {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 0 40px 0;
}

.epic-timeline-line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    background: rgba(14, 165, 233, 0.4);
    /* Darkened for visibility */
    z-index: 1;
}

.glow-runner {
    position: absolute;
    top: 0;
    left: -1px;
    width: 4px;
    height: 100px;
    background: linear-gradient(to bottom, transparent, var(--primary-color), transparent);
    animation: runGlow 4s linear infinite;
    box-shadow: 0 0 20px var(--primary-color);
}

@keyframes runGlow {
    0% {
        top: -100px;
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        top: 100%;
        opacity: 0;
    }
}

.epic-item {
    position: relative;
    width: 100%;
    margin-bottom: 80px;
    z-index: 2;
    display: flex;
}

.epic-item.left {
    justify-content: flex-start;
}

.epic-item.right {
    justify-content: flex-end;
}

.epic-item.center-end {
    justify-content: center;
    margin-bottom: 0;
}

.epic-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    background: var(--bg-light);
    border: 4px solid var(--primary-color);
    border-radius: 50%;
    box-shadow: 0 0 15px rgba(14, 165, 233, 0.6);
    z-index: 3;
    transition: all 0.3s ease;
}

.final-dot {
    width: 30px;
    height: 30px;
    border-width: 6px;
    background: var(--primary-color);
    box-shadow: 0 0 30px rgba(14, 165, 233, 0.8);
    top: 0;
}

.epic-card {
    width: 45%;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(203, 213, 225, 0.8);
    /* Slate-300 border for crispness */
    border-radius: 20px;
    padding: 35px;
    box-shadow: 0 10px 40px rgba(15, 23, 42, 0.08);
    /* Stronger, darker shadow */
    position: relative;
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease;
}

.epic-item:hover .epic-card {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 25px 50px rgba(14, 165, 233, 0.15);
    border-color: rgba(14, 165, 233, 0.3);
}

.epic-item:hover .epic-dot {
    transform: translate(-50%, -50%) scale(1.5);
    background: var(--primary-color);
}

.epic-card.final-card {
    box-shadow: 0 15px 40px rgba(14, 165, 233, 0.15);
    /* Make final card pop */
    width: 60%;
    text-align: center;
    margin-top: 50px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(248, 250, 252, 0.9));
    border: 2px solid rgba(14, 165, 233, 0.3);
}

/* Connecting arrows */
.epic-item.left .epic-card::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -15px;
    transform: translateY(-50%);
    border-width: 15px 0 15px 15px;
    border-style: solid;
    border-color: transparent transparent transparent rgba(255, 255, 255, 0.6);
}

.epic-item.right .epic-card::after {
    content: '';
    position: absolute;
    top: 50%;
    left: -15px;
    transform: translateY(-50%);
    border-width: 15px 15px 15px 0;
    border-style: solid;
    border-color: transparent rgba(255, 255, 255, 0.6) transparent transparent;
}

.epic-card.final-card::after {
    display: none;
}

.epic-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    padding-bottom: 15px;
}

.e-tag {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--primary-color);
    background: rgba(14, 165, 233, 0.1);
    padding: 4px 12px;
    border-radius: 12px;
}

.e-tag.highlight {
    background: var(--secondary-color);
    color: #fff;
    box-shadow: 0 0 10px rgba(225, 29, 72, 0.4);
}

.e-code {
    font-family: monospace;
    font-size: 0.85rem;
    color: #475569;
    /* Darkened from #94a3b8 */
    letter-spacing: 1px;
    font-weight: 600;
}

.epic-card h4 {
    font-size: 1.45rem;
    color: #0f172a;
    /* Slate-900, extremely dark */
    margin-bottom: 15px;
    font-weight: 800;
    line-height: 1.4;
}

.epic-card p {
    font-size: 1.05rem;
    color: #334155;
    /* Slate-700, highly legible */
    line-height: 1.7;
    margin: 0;
    word-break: keep-all;
}

.epic-card strong {
    color: var(--primary-color);
    /* Highlight important words in primary blue */
    font-weight: 700;
}

.card-glare {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.8), transparent);
    transform: rotate(45deg) translateY(100%);
    transition: transform 0.6s ease;
    opacity: 0;
}

.epic-card:hover .card-glare {
    opacity: 1;
    transform: rotate(45deg) translateY(-100%);
}

.special-card {
    border: 2px solid transparent;
    background-clip: padding-box;
}

.card-border-run {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    margin: -2px;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color), var(--primary-color));
    background-size: 200% 200%;
    animation: borderRun 3s linear infinite;
}

@keyframes borderRun {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 200% 50%;
    }
}

@media (max-width: 768px) {
    .ach-stats-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .epic-timeline-line {
        left: 20px;
    }

    .epic-item.left,
    .epic-item.right {
        justify-content: flex-end;
    }

    .epic-card,
    .epic-card.final-card {
        box-shadow: 0 15px 40px rgba(14, 165, 233, 0.15);
        /* Make final card pop */
        width: calc(100% - 50px);
    }

    .epic-dot {
        left: 20px;
    }

    .epic-item.left .epic-card::after,
    .epic-item.right .epic-card::after {
        left: -15px;
        right: auto;
        border-width: 15px 15px 15px 0;
        border-color: transparent rgba(255, 255, 255, 0.6) transparent transparent;
    }
}


/* ------------------------------------- */
/* Business Network Tab Styles */
/* ------------------------------------- */

/* Hero Section */
.biz-hero {
    background: linear-gradient(135deg, rgba(248, 250, 252, 1), rgba(226, 232, 240, 0.5));
    border-radius: 24px;
    padding: 60px 50px;
    margin-bottom: 60px;
    border: 1px solid rgba(255, 255, 255, 1);
    box-shadow: 0 15px 40px rgba(15, 23, 42, 0.05);
    position: relative;
    overflow: hidden;
}




@keyframes meshWave {
    0% {
        background-position: 0px 0px, 0px 0px, 0px 0px, 0px 0px;
        transform: perspective(1000px) rotateX(20deg) rotateY(-15deg) translateZ(-50px);
    }

    50% {
        background-position: 50px 30px, -50px 20px, 30px -30px, -20px 40px;
        transform: perspective(1000px) rotateX(-10deg) rotateY(20deg) translateZ(50px);
    }

    100% {
        background-position: 0px 0px, 0px 0px, 0px 0px, 0px 0px;
        transform: perspective(1000px) rotateX(20deg) rotateY(-15deg) translateZ(-50px);
    }
}

.biz-hero::before {
    content: '';
    position: absolute;
    top: -200px;
    left: -200px;
    right: -200px;
    bottom: -200px;
    /* Massive overflow to hide edges during 3D rotation */
    background-image:
        linear-gradient(to right, rgba(14, 165, 233, 0.08) 2px, transparent 2px),
        linear-gradient(to bottom, rgba(14, 165, 233, 0.08) 2px, transparent 2px),
        linear-gradient(45deg, rgba(14, 165, 233, 0.04) 2px, transparent 2px),
        linear-gradient(-45deg, rgba(14, 165, 233, 0.04) 2px, transparent 2px);
    background-size: 80px 80px;
    /* Slightly larger grid for 3D visibility */
    z-index: 0;
    pointer-events: none;
    animation: meshWave 12s ease-in-out infinite;
}

.biz-hero::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 50%;
    background: radial-gradient(circle at top right, rgba(14, 165, 233, 0.1), transparent 70%);
    pointer-events: none;
}

.biz-badge {
    display: inline-block;
    padding: 6px 16px;
    background: var(--primary-color);
    color: #fff;
    border-radius: 30px;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 20px;
    box-shadow: 0 4px 15px rgba(14, 165, 233, 0.4);
}

.biz-hero-content {
    position: relative;
    z-index: 1;
}

.biz-hero-content h2 {
    font-size: 2.8rem;
    color: #0f172a;
    font-weight: 800;
    margin-bottom: 25px;
    letter-spacing: -1px;
}

.biz-hero-content p {
    font-size: 1.15rem;
    color: #475569;
    line-height: 1.8;
    max-width: 900px;
    word-break: keep-all;
}

.biz-hero-content p strong {
    color: var(--primary-color);
    font-weight: 700;
}

/* Process Grid (5 Steps) */
.biz-process-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    margin-bottom: 80px;
}

.process-card {
    background: #fff;
    border-radius: 20px;
    padding: 30px 20px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(226, 232, 240, 0.8);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.process-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(14, 165, 233, 0.1);
    border-color: rgba(14, 165, 233, 0.3);
}

.process-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
    opacity: 0;
    transition: opacity 0.3s ease;
}

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

.p-icon {
    font-size: 2.5rem;
    font-weight: 900;
    color: rgba(14, 165, 233, 0.7);
    /* Improved legibility */
    margin-bottom: 15px;
    font-family: 'Montserrat', sans-serif;
    transition: color 0.3s ease;
}

.process-card:hover .p-icon {
    color: var(--primary-color);
}

.process-card h4 {
    font-size: 1.2rem;
    color: #1e293b;
    margin-bottom: 15px;
    font-weight: 700;
}

.process-card p {
    font-size: 0.95rem;
    color: #64748b;
    line-height: 1.6;
    word-break: keep-all;
}

/* Architecture Diagram */
.biz-architecture-section {
    background: #0f172a;
    border-radius: 24px;
    padding: 60px;
    margin-bottom: 80px;
    text-align: center;
    position: relative;
}

.arch-header h3 {
    color: #fff;
    font-size: 2.2rem;
    margin-bottom: 20px;
    font-weight: 800;
}

.arch-header p {
    color: #94a3b8;
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 40px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.arch-diagram-viewer {
    position: relative;
    display: inline-block;
    background: #fff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 0 50px rgba(14, 165, 233, 0.2);
    overflow: hidden;
}

.arch-img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    position: relative;
    z-index: 1;
}

/* Blueprint Scanner Effect */
.scanner-line {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 150px;
    background: linear-gradient(to bottom, transparent, rgba(14, 165, 233, 0.2), transparent);
    z-index: 2;
    pointer-events: none;
    animation: scan 4s ease-in-out infinite;
    border-bottom: 2px solid rgba(14, 165, 233, 0.8);
}

@keyframes scan {
    0% {
        transform: translateY(-100%);
    }

    100% {
        transform: translateY(800px);
    }
}

/* Sci-fi corners */
.diagram-corners span {
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid var(--primary-color);
    z-index: 3;
}

.diagram-corners span:nth-child(1) {
    top: 10px;
    left: 10px;
    border-right: none;
    border-bottom: none;
}

.diagram-corners span:nth-child(2) {
    top: 10px;
    right: 10px;
    border-left: none;
    border-bottom: none;
}

.diagram-corners span:nth-child(3) {
    bottom: 10px;
    left: 10px;
    border-right: none;
    border-top: none;
}

.diagram-corners span:nth-child(4) {
    bottom: 10px;
    right: 10px;
    border-left: none;
    border-top: none;
}

/* Value Proposition */
.biz-value-section {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 80px;
}

.value-box {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    background: rgba(255, 255, 255, 0.8);
    padding: 40px 30px;
    border-radius: 20px;
    border: 1px solid rgba(226, 232, 240, 0.8);
    transition: transform 0.3s ease;
}

.value-box:hover {
    transform: translateY(-5px);
    background: #fff;
    box-shadow: 0 15px 35px rgba(15, 23, 42, 0.05);
}

.v-icon {
    font-size: 2.5rem;
    line-height: 1;
}

.v-text h4 {
    font-size: 1.25rem;
    color: #0f172a;
    margin-bottom: 12px;
    font-weight: 700;
}

.v-text p {
    font-size: 1rem;
    color: #475569;
    line-height: 1.6;
    margin: 0;
    word-break: keep-all;
}

/* Responsive */
@media (max-width: 1024px) {
    .biz-process-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .biz-process-grid {
        grid-template-columns: 1fr;
    }

    .biz-value-section {
        grid-template-columns: 1fr;
    }

    .biz-hero {
        padding: 40px 20px;
    }

    .biz-hero-content {
        position: relative;
        z-index: 1;
    }

    .biz-hero-content h2 {
        font-size: 2.2rem;
    }

    .biz-architecture-section {
        padding: 40px 20px;
    }
}



/* ------------------------------------- */
/* Next-Gen Security Tab Styles */
/* ------------------------------------- */

/* Security Wheel Section */
.sec-wheel-section {
    background: #fff;
    border-radius: 24px;
    padding: 80px 60px;
    margin-bottom: 80px;
    box-shadow: 0 15px 40px rgba(15, 23, 42, 0.03);
    border: 1px solid rgba(226, 232, 240, 0.8);
    position: relative;
    overflow: hidden;
}

.sec-wheel-container {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
}

.wheel-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    position: relative;
}

.wheel-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 140px;
    height: 140px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(14, 165, 233, 0.2), inset 0 0 0 8px rgba(241, 245, 249, 1);
    z-index: 10;
    padding: 20px;
}

.wheel-center img {
    max-width: 100%;
    height: auto;
}

.wheel-card {
    background: rgba(248, 250, 252, 0.5);
    border: 1px solid rgba(226, 232, 240, 0.8);
    border-radius: 20px;
    padding: 40px 40px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

/* Add vibrant accent colors for each quadrant based on the original image */
.wheel-card.q1 {
    border-top: 4px solid #38bdf8;
}

/* Connection: Light Blue */
.wheel-card.q2 {
    border-top: 4px solid #818cf8;
}

/* Application: Indigo */
.wheel-card.q3 {
    border-top: 4px solid #f43f5e;
}

/* Contents: Rose */
.wheel-card.q4 {
    border-top: 4px solid #10b981;
}

/* Networking: Emerald */

.wheel-card:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08);
    background: #fff;
    z-index: 5;
}

.w-card-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(226, 232, 240, 0.8);
    padding-bottom: 15px;
}

.w-icon {
    font-size: 1.8rem;
}

.w-card-header h4 {
    font-size: 1.3rem;
    color: #0f172a;
    font-weight: 800;
}

.w-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.w-list>li {
    font-size: 1.05rem;
    color: #334155;
    margin-bottom: 12px;
    padding-left: 20px;
    position: relative;
    line-height: 1.5;
}

.w-list>li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary-color);
}

.w-list>li>strong {
    color: #0f172a;
    font-weight: 700;
}

.w-list ul {
    list-style: none;
    padding-left: 10px;
    margin-top: 8px;
}

.w-list ul li {
    font-size: 0.95rem;
    color: #64748b;
    margin-bottom: 6px;
}

/* Challenge & Solution Section */
.biz-solution-section {
    display: flex;
    align-items: stretch;
    gap: 20px;
    margin-bottom: 80px;
}

.sol-card {
    flex: 1;
    border-radius: 24px;
    padding: 50px 40px;
    position: relative;
    overflow: hidden;
}

.sol-card.challenge {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.sol-card.solution {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.05), rgba(14, 165, 233, 0.15));
    border: 1px solid rgba(14, 165, 233, 0.3);
    box-shadow: 0 10px 30px rgba(14, 165, 233, 0.1);
}

.sol-icon {
    font-size: 3rem;
    margin-bottom: 20px;
}

.sol-card h4 {
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 20px;
}

.sol-card.challenge h4 {
    color: #334155;
}

.sol-card.solution h4 {
    color: var(--primary-color);
}

.sol-card p {
    font-size: 1.1rem;
    line-height: 1.8;
    word-break: keep-all;
}

.sol-card.challenge p {
    color: #64748b;
}

.sol-card.solution p {
    color: #334155;
}

.sol-card p strong {
    color: #0f172a;
}

.sol-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #cbd5e1;
    width: 60px;
}

.sol-arrow svg {
    width: 40px;
    height: 40px;
}

/* Responsive */
@media (max-width: 768px) {
    .wheel-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .wheel-center {
        position: relative;
        transform: none;
        top: 0;
        left: 0;
        margin: 0 auto 30px;
    }

    .biz-solution-section {
        flex-direction: column;
    }

    .sol-arrow {
        width: 100%;
        height: 60px;
        transform: rotate(90deg);
    }
}



/* Firewall Detail Section */
.fw-detail-section {
    margin-bottom: 100px;
}

.fw-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.fw-card {
    background: #0f172a;
    border: 1px solid rgba(56, 189, 248, 0.2);
    border-radius: 20px;
    padding: 40px 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    text-align: left;
    position: relative;
    overflow: hidden;
}

.fw-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #38bdf8, #818cf8);
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

.fw-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(56, 189, 248, 0.15);
    border-color: rgba(56, 189, 248, 0.5);
}

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

.fw-icon-box {
    width: 60px;
    height: 60px;
    background: rgba(56, 189, 248, 0.1);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    margin-bottom: 25px;
    border: 1px solid rgba(56, 189, 248, 0.2);
}

.fw-card h4 {
    color: #f8fafc;
    font-size: 1.35rem;
    font-weight: 700;
    margin-bottom: 15px;
}

.fw-card p {
    color: #94a3b8;
    font-size: 1.05rem;
    line-height: 1.7;
    margin: 0;
    word-break: keep-all;
}

/* Radar Monitoring Section */
.fw-radar-section {
    background: linear-gradient(135deg, #020617, #0f172a);
    border-radius: 24px;
    padding: 60px;
    display: flex;
    align-items: center;
    gap: 60px;
    margin-bottom: 80px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.radar-content {
    flex: 1;
}

.radar-content h3 {
    color: #fff;
    font-size: 2.2rem;
    font-weight: 800;
    margin-bottom: 20px;
}

.radar-content p {
    color: #94a3b8;
    font-size: 1.15rem;
    line-height: 1.8;
    margin-bottom: 40px;
    word-break: keep-all;
}

.radar-content p strong {
    color: #38bdf8;
}

.radar-stats {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 30px;
}

.radar-stats li {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 20px 30px;
    border-radius: 15px;
    text-align: center;
    flex: 1;
}

.radar-stats li strong {
    display: block;
    color: #38bdf8;
    font-size: 2rem;
    font-weight: 800;
    font-family: 'Montserrat', sans-serif;
    margin-bottom: 5px;
}

.radar-stats li span {
    color: #cbd5e1;
    font-size: 0.95rem;
    font-weight: 600;
}

.radar-visual {
    width: 350px;
    height: 350px;
    flex-shrink: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.radar-circle {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    border: 2px solid rgba(56, 189, 248, 0.3);
    position: relative;
    background:
        radial-gradient(circle, transparent 30%, rgba(56, 189, 248, 0.1) 31%, transparent 32%),
        radial-gradient(circle, transparent 60%, rgba(56, 189, 248, 0.1) 61%, transparent 62%);
    background-size: 100% 100%;
    box-shadow: 0 0 50px rgba(56, 189, 248, 0.1), inset 0 0 30px rgba(56, 189, 248, 0.1);
    overflow: hidden;
}

.radar-circle::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: rgba(56, 189, 248, 0.3);
}

.radar-circle::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: rgba(56, 189, 248, 0.3);
}

.radar-sweep {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150px;
    height: 150px;
    transform-origin: 0 0;
    background: conic-gradient(from 0deg, rgba(3, 119, 168, 0) 0deg, rgba(56, 189, 248, 0.6) 90deg, rgba(56, 189, 248, 0) 90deg);
    animation: radarSpin 4s linear infinite;
}

@keyframes radarSpin {
    100% {
        transform: rotate(360deg);
    }
}

.radar-dot {
    position: absolute;
    width: 8px;
    height: 8px;
    background: #ef4444;
    /* Threat color */
    border-radius: 50%;
    box-shadow: 0 0 10px #ef4444;
    animation: radarBlink 4s infinite;
    opacity: 0;
}

.radar-dot.d1 {
    top: 30%;
    left: 60%;
    animation-delay: 0.5s;
}

.radar-dot.d2 {
    top: 70%;
    left: 30%;
    animation-delay: 1.5s;
}

.radar-dot.d3 {
    top: 40%;
    left: 20%;
    animation-delay: 2.5s;
}

.radar-dot.d4 {
    top: 75%;
    left: 75%;
    animation-delay: 3.5s;
}

@keyframes radarBlink {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }

    10% {
        opacity: 1;
        transform: scale(1.2);
    }

    30% {
        opacity: 0;
        transform: scale(0.5);
    }

    100% {
        opacity: 0;
    }
}

@media (max-width: 1024px) {
    .fw-grid {
        grid-template-columns: 1fr;
    }

    .fw-radar-section {
        flex-direction: column;
        text-align: center;
    }
}



/* Maintenance Solutions Section */
.fw-card:hover .mnt-card-border {
    opacity: 1 !important;
}

#tab-solution .sol-card.challenge img {
    transition: transform 0.5s ease;
}

#tab-solution .sol-card.challenge:hover img {
    transform: scale(1.03);
}

#tab-solution .sol-icon {
    font-size: 3.5rem;
    margin-bottom: 25px;
    animation: floatIcon 3s ease-in-out infinite;
}

@keyframes floatIcon {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0);
    }
}



/* Maintenance Coverage & SLA Sections */
.mnt-coverage-section {
    margin-bottom: 80px;
}

.mnt-coverage-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.mnt-cov-card {
    background: #fff;
    border: 1px solid rgba(226, 232, 240, 0.8);
    border-radius: 20px;
    padding: 50px 40px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    transition: all 0.3s ease;
}

.mnt-cov-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.3);
}

.cov-icon {
    font-size: 3rem;
    margin-bottom: 20px;
}

.mnt-cov-card h4 {
    font-size: 1.5rem;
    color: #0f172a;
    font-weight: 800;
    margin-bottom: 15px;
}

.cov-desc {
    font-size: 1.05rem;
    color: #f59e0b;
    font-weight: 600;
    margin-bottom: 25px;
}

.cov-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cov-list li {
    font-size: 1.05rem;
    color: #475569;
    margin-bottom: 12px;
    padding-left: 20px;
    position: relative;
    line-height: 1.6;
}

.cov-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 0;
    color: #f59e0b;
    font-weight: 900;
}

.cov-list li strong {
    color: #0f172a;
}

/* SLA Banner & Steps */
.mnt-process-section {
    margin-bottom: 100px;
}

.process-banner {
    background: linear-gradient(135deg, #0f172a, #1e293b);
    border-radius: 20px;
    padding: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 40px;
    box-shadow: 0 15px 40px rgba(15, 23, 42, 0.1);
}

.p-banner-text {
    flex: 1;
}

.p-banner-text h3 {
    color: #fff;
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 15px;
}

.p-banner-text p {
    color: #94a3b8;
    font-size: 1.1rem;
    line-height: 1.7;
    margin: 0;
}

.p-banner-text p strong {
    color: #fbbf24;
}

.p-banner-stats {
    display: flex;
    gap: 30px;
}

.p-stat {
    text-align: center;
}

.p-stat strong {
    display: block;
    font-size: 2.2rem;
    font-weight: 900;
    color: #fbbf24;
    font-family: 'Montserrat', sans-serif;
}

.p-stat span {
    color: #cbd5e1;
    font-size: 1rem;
    font-weight: 600;
}

.mnt-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.m-step {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 15px;
    padding: 30px 20px;
    text-align: center;
    transition: all 0.3s ease;
}

.m-step:hover {
    background: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border-color: #cbd5e1;
    transform: translateY(-5px);
}

.m-step-num {
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
    font-weight: 800;
    font-size: 1.1rem;
    border-radius: 50%;
    margin-bottom: 20px;
    font-family: 'Montserrat', sans-serif;
}

.m-step h5 {
    font-size: 1.2rem;
    color: #0f172a;
    font-weight: 700;
    margin-bottom: 15px;
}

.m-step p {
    font-size: 0.95rem;
    color: #64748b;
    line-height: 1.6;
    margin: 0;
    word-break: keep-all;
}

@media (max-width: 1024px) {
    .mnt-coverage-grid {
        grid-template-columns: 1fr;
    }

    .process-banner {
        flex-direction: column;
        text-align: center;
    }

    .mnt-steps {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .p-banner-stats {
        flex-direction: column;
        gap: 15px;
    }

    .mnt-steps {
        grid-template-columns: 1fr;
    }
}



/* Product Pages CSS (Products Tab Content) */


.prod-hero-section {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 20px;
    margin-bottom: 10px;
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 기본적으로 가운데 공간에 배치 (필요시 수정 가능) */
    padding: 60px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

.prod-hero-text-overlay {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(2px);
    padding: 50px;
    border-radius: 20px;
    max-width: 670px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.7);
    z-index: 2;
}

.prod-hero-text-overlay .prod-subtitle {
    color: var(--primary-light);
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 5px;
    letter-spacing: 1px;
}

.prod-hero-text-overlay .prod-title {
    font-size: 3.2rem;
    color: var(--primary-dark);
    font-weight: 900;
    margin-bottom: 25px;
    line-height: 1.1;
}

.prod-hero-text-overlay .prod-title span {
    color: var(--primary-color);
}

.prod-hero-text-overlay .prod-desc {
    font-size: 1.15rem;
    color: #334155;
    line-height: 1.8;
}

.prod-hero-text-overlay .prod-desc strong {
    color: #0f172a;
}

@media (max-width: 1024px) {
    .prod-hero-section {
        justify-content: center;
        padding: 40px 20px;
        min-height: 500px;
    }

    .prod-hero-text-overlay {
        padding: 30px;
        max-width: 100%;
        text-align: center;
    }

    .prod-hero-text-overlay .prod-title {
        font-size: 2.5rem;
    }
}

.prod-cards-section {
    margin-bottom: 80px;
}

.prod-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.prod-item-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.prod-item-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 81, 154, 0.1);
    border-color: rgba(0, 81, 154, 0.2);
}

.prod-item-img {
    background: #f8fafc;
    padding: 20px;
    text-align: center;
    border-bottom: 1px solid #f1f5f9;
    height: 220px;
    /* 모든 카드 이미지 영역 높이 고정 */
    display: flex;
    justify-content: center;
    align-items: center;
}

.prod-item-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* 이미지 원본 비율을 유지하며 지정된 박스 안에 꽉 차게 맞춤 */
    transition: transform 0.3s ease;
}

.prod-item-card:hover .prod-item-img img {
    transform: scale(1.05);
}

.prod-item-info {
    padding: 25px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.prod-item-info h4 {
    font-size: 1.25rem;
    color: #0f172a;
    font-weight: 800;
    margin-bottom: 15px;
}

.prod-item-info p {
    color: #64748b;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 25px;
    flex: 1;
}

.prod-btn {
    display: inline-block;
    padding: 12px 20px;
    background: var(--bg-light);
    color: var(--primary-color);
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    text-align: center;
    border-radius: 8px;
    transition: all 0.2s ease;
    border: 1px solid #e2e8f0;
}

.prod-btn:hover {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
}

@media (max-width: 1024px) {
    .prod-hero-section {
        flex-direction: column;
        text-align: center;
    }

    .prod-card-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .prod-card-grid {
        grid-template-columns: 1fr;
    }
}



/* Center Circle */
.node-center-circle {
    width: 260px;
    height: 260px;
    background: #fff;
    border: 5px solid var(--primary-light);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    box-shadow: 0 10px 30px rgba(51, 133, 255, 0.2), inset 0 0 20px rgba(0, 0, 0, 0.02);
    padding: 30px;
    position: relative;
}

.node-center-circle::before {
    content: '';
    position: absolute;
    top: -15px;
    left: -15px;
    right: -15px;
    bottom: -15px;
    border-radius: 50%;
    border: 1px dashed var(--primary-light);
    opacity: 0.5;
    animation: rotate 20s linear infinite;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.node-center-circle h4 {
    font-size: 1.3rem;
    color: var(--primary-color);
    font-weight: 900;
    margin-bottom: 15px;
    line-height: 1.2;
}

.node-center-circle ul {
    list-style: none;
    padding: 0;
    margin: 0 0 15px 0;
}

.node-center-circle ul li {
    font-size: 0.8rem;
    color: #475569;
    margin-bottom: 5px;
}

.node-center-circle .brand {
    font-size: 1.1rem;
    color: var(--primary-color);
}

@media (max-width: 1024px) {
    .platform-diagram {
        flex-direction: column;
    }

    .node-col.left,
    .node-col.right {
        align-items: center;
    }

    .node-item:not(.reverse) .node-content,
    .node-item.reverse .node-content {
        margin: 0;
        padding: 20px;
    }

    .node-item {
        flex-direction: column !important;
        text-align: center;
        gap: 15px;
    }

    .node-content ul li {
        text-align: left;
    }
}



/* Security Intelligence Platform (Safe Flex Layout) */
.secui-platform-simple {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 60px 30px;
    margin-bottom: 80px;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.02);
}

.sps-header {
    text-align: center;
    margin-bottom: 50px;
}

.sps-header h3 {
    font-size: 2rem;
    color: var(--primary-color);
    font-weight: 900;
    margin-bottom: 10px;
}

.sps-header p {
    font-size: 1.2rem;
    color: #475569;
    font-weight: 500;
}

.sps-diagram {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    max-width: 1100px;
    margin: 0 auto;
    flex-wrap: nowrap;
}

.sps-col {
    display: flex;
    flex-direction: column;
    gap: 30px;
    flex: 1;
}

.sps-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-top: 4px solid var(--primary-color);
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.sps-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 81, 154, 0.1);
}

.sps-icon {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--primary-color);
    margin-bottom: 15px;
    display: inline-block;
    padding-bottom: 8px;
    border-bottom: 2px solid #e2e8f0;
    width: 100%;
}

.sps-card h5 {
    font-size: 1.1rem;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 10px;
}

.sps-card h5 span {
    font-style: italic;
    font-weight: 400;
}

.sps-card p {
    font-size: 0.9rem;
    color: #475569;
    line-height: 1.6;
    margin: 0;
}

.sps-center {
    flex: 0 0 auto;
}

.sps-circle {
    width: 280px;
    height: 280px;
    background: #fff;
    border: 5px solid var(--primary-light);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    box-shadow: 0 15px 35px rgba(0, 81, 154, 0.15), inset 0 0 20px rgba(0, 0, 0, 0.02);
    padding: 30px;
    position: relative;
}

.sps-circle::before {
    content: '';
    position: absolute;
    top: -15px;
    left: -15px;
    right: -15px;
    bottom: -15px;
    border-radius: 50%;
    border: 2px dashed #93c5fd;
    animation: sps-spin 25s linear infinite;
}

@keyframes sps-spin {
    100% {
        transform: rotate(360deg);
    }
}

.sps-circle h4 {
    font-size: 1.3rem;
    color: var(--primary-color);
    font-weight: 900;
    margin-bottom: 15px;
    line-height: 1.2;
}

.sps-circle p {
    font-size: 0.85rem;
    color: #475569;
    margin-bottom: 15px;
    line-height: 1.4;
}

.sps-circle strong {
    font-size: 1.2rem;
    color: var(--primary-color);
}

.sps-circle strong span {
    font-style: italic;
}

@media (max-width: 1024px) {
    .sps-diagram {
        flex-direction: column;
    }

    .sps-center {
        order: -1;
        margin-bottom: 20px;
    }

    .sps-col {
        width: 100%;
        max-width: 500px;
    }
}


/* HC Corp Core Values Cards (White Premium Theme) */
.hcv-header {
    text-align: center;
    margin-bottom: 50px;
}

.hcv-header h2 {
    font-size: 2.2rem;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 20px;
    letter-spacing: -0.5px;
}

.hcv-header p {
    font-size: 1.05rem;
    color: #475569;
    line-height: 1.8;
    margin: 0;
}

.hcc-core-values {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 60px 30px;
    margin-bottom: 80px;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.02);
}

.hcv-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.hcv-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 40px 30px;
    min-height: 420px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hcv-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 81, 154, 0.1);
}

.hcv-icon-container {
    height: 160px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    position: relative;
    perspective: 800px;
}

/* Recreating Abstract 3D Icons for White BG */
/* 1. Innovation Tower (Sleek Blue Columns) */
.css-icon-tower {
    position: relative;
    width: 80px;
    height: 80px;
    transform-style: preserve-3d;
    transform: rotateX(15deg) rotateY(-20deg);
}

.tower-bar {
    position: absolute;
    bottom: 10px;
    width: 20px;
    background: linear-gradient(to top, #1e3a8a 0%, #3b82f6 100%);
    box-shadow: -5px 5px 15px rgba(37, 99, 235, 0.3);
    border-radius: 4px 4px 0 0;
}

.tower-bar.t1 {
    height: 35px;
    left: 10px;
}

.tower-bar.t2 {
    height: 55px;
    left: 35px;
    opacity: 0.9;
}

.tower-bar.t3 {
    height: 75px;
    left: 60px;
    opacity: 0.8;
    background: linear-gradient(to top, #0f172a 0%, #2563eb 100%);
}

/* 2. Platform Ring (Overlapping Vibrant Rings) */
.css-icon-platform {
    position: relative;
    width: 80px;
    height: 80px;
}

.plat-ring-1,
.plat-ring-2 {
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.plat-ring-1 {
    top: 5px;
    left: 5px;
    border: 6px solid rgba(59, 130, 246, 0.2);
    border-top: 6px solid #3b82f6;
    animation: hcv-spin 8s linear infinite;
}

.plat-ring-2 {
    bottom: 5px;
    right: 5px;
    border: 6px solid rgba(139, 92, 246, 0.2);
    border-bottom: 6px solid #8b5cf6;
    animation: hcv-spin 12s linear infinite reverse;
}

.plat-center-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    border-radius: 50%;
    box-shadow: 0 0 15px rgba(139, 92, 246, 0.4);
}

/* 3. Quality Shield (Diamond Checkmark) */
.css-icon-quality {
    position: relative;
    width: 80px;
    height: 80px;
}

.qual-diamond {
    position: absolute;
    top: 15px;
    left: 15px;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #0ea5e9, #0369a1);
    transform: rotate(45deg);
    border-radius: 10px;
    box-shadow: 10px 10px 20px rgba(3, 105, 161, 0.3);
}

.qual-check {
    position: absolute;
    top: 25px;
    left: 35px;
    width: 12px;
    height: 22px;
    border-right: 4px solid #fff;
    border-bottom: 4px solid #fff;
    transform: rotate(45deg);
    z-index: 2;
}

@keyframes hcv-spin {
    0% {
        transform: rotateZ(0deg);
    }

    100% {
        transform: rotateZ(360deg);
    }
}

/* Typography for White Cards */
.hcv-en {
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--primary-color);
    letter-spacing: 1.5px;
    margin-bottom: 5px;
}

.hcv-ko {
    font-size: 1.3rem;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 15px;
}

.hcv-text p {
    font-size: 0.95rem;
    color: #475569;
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 992px) {
    .hcv-grid {
        grid-template-columns: 1fr;
    }
}



/* Extreme Networks Intro Section */
.extr-intro-section {
    position: relative;
    background-color: #0b1120;
    background-image:
        radial-gradient(circle at 15% 50%, rgba(79, 70, 229, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 85% 30%, rgba(14, 165, 233, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 50% 80%, rgba(139, 92, 246, 0.15) 0%, transparent 50%),
        radial-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        radial-gradient(rgba(255, 255, 255, 0.02) 2px, transparent 2px);
    background-size:
        100% 100%,
        100% 100%,
        100% 100%,
        40px 40px,
        90px 90px;
    background-position:
        0 0,
        0 0,
        0 0,
        0 0,
        45px 45px;
    border-radius: 20px;
    padding: 40px 30px;
    margin-bottom: 80px;
    color: #fff;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    z-index: 1;
}

.extr-intro-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 60px 60px;
    z-index: -1;
    pointer-events: none;
}

.extr-header {
    text-align: center;
    margin-bottom: 30px;
}


.extr-header h2 {
    font-size: 1.8rem;
    font-weight: 800;
    margin-bottom: 20px;
    color: #fff;
}

.extr-header p {
    font-size: 0.95rem;
    color: #cbd5e1;
    line-height: 1.7;
    margin: 0;
}

.extr-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    max-width: 900px;
    margin: 0 auto;
}

.extr-stat-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 35px 25px;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.extr-stat-card:hover {
    transform: translateY(-5px);
}

.extr-stat-text {
    flex: 1;
    padding-right: 30px;
}

.extr-stat-text h4 {
    font-size: 1.8rem;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 15px;
}

.extr-stat-text p {
    font-size: 0.85rem;
    color: #475569;
    line-height: 1.6;
    margin: 0;
    word-break: keep-all;
}

.extr-stat-chart {
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    /* CSS conic-gradient for the donut chart. We use var(--percent) defined inline */
    background: conic-gradient(var(--color) calc(var(--percent) * 1%), #e2e8f0 0);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.05);
}

.extr-stat-chart .chart-circle {
    width: 70px;
    height: 70px;
    background: #27272a;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.5), 0 5px 15px rgba(0, 0, 0, 0.1);
}

.extr-stat-chart .chart-circle span {
    font-size: 1.3rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -1px;
}

@media (max-width: 992px) {
    .extr-stats-grid {
        grid-template-columns: 1fr;
    }

    .extr-intro-section {
        padding: 40px 20px;
    }
}



/* Twinkling Stars Background */
.twinkling-stars {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 0;
}

.twinkling-stars .star {
    position: absolute;
    width: 4px;
    height: 4px;
    background-color: #ffffff;
    border-radius: 50%;
    box-shadow: 0 0 8px 2px rgba(255, 255, 255, 0.8), 0 0 15px 4px rgba(79, 70, 229, 0.8);
    opacity: 0;
    margin-left: 0.5px;
    margin-top: 0.5px;
}

@keyframes twinkle-anim-grid {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5);
    }

    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.5);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5);
    }
}

.twinkling-stars .s1 {
    top: 60px;
    left: 60px;
    animation: twinkle-anim-grid 4s infinite ease-in-out 0s;
    width: 3px;
    height: 3px;
}

.twinkling-stars .s2 {
    top: 180px;
    left: 120px;
    animation: twinkle-anim-grid 5s infinite ease-in-out 1.5s;
    width: 5px;
    height: 5px;
}

.twinkling-stars .s3 {
    top: 300px;
    left: 60px;
    animation: twinkle-anim-grid 3.5s infinite ease-in-out 3s;
}

.twinkling-stars .s4 {
    top: 420px;
    left: 120px;
    animation: twinkle-anim-grid 4.5s infinite ease-in-out 0.8s;
}

.twinkling-stars .s5 {
    top: 540px;
    left: 60px;
    animation: twinkle-anim-grid 6s infinite ease-in-out 2.2s;
    width: 6px;
    height: 6px;
}

.twinkling-stars .s6 {
    top: 120px;
    left: 60px;
    animation: twinkle-anim-grid 4s infinite ease-in-out 1.1s;
}

.twinkling-stars .s7 {
    top: 360px;
    left: 120px;
    animation: twinkle-anim-grid 5s infinite ease-in-out 3.5s;
}

.twinkling-stars .s8 {
    top: 60px;
    left: 1080px;
    animation: twinkle-anim-grid 3s infinite ease-in-out 0.4s;
    width: 3px;
    height: 3px;
}

.twinkling-stars .s9 {
    top: 180px;
    left: 1020px;
    animation: twinkle-anim-grid 4.5s infinite ease-in-out 1.8s;
}

.twinkling-stars .s10 {
    top: 300px;
    left: 1080px;
    animation: twinkle-anim-grid 5.5s infinite ease-in-out 2.9s;
}

.twinkling-stars .s11 {
    top: 420px;
    left: 1020px;
    animation: twinkle-anim-grid 3.8s infinite ease-in-out 0.2s;
}

.twinkling-stars .s12 {
    top: 540px;
    left: 1080px;
    animation: twinkle-anim-grid 4.2s infinite ease-in-out 1.7s;
}

.twinkling-stars .s13 {
    top: 120px;
    left: 1020px;
    animation: twinkle-anim-grid 5s infinite ease-in-out 3.1s;
    width: 5px;
    height: 5px;
}

.twinkling-stars .s14 {
    top: 360px;
    left: 1080px;
    animation: twinkle-anim-grid 4.8s infinite ease-in-out 0.5s;
}

.twinkling-stars .s15 {
    top: 300px;
    left: 600px;
    animation: twinkle-anim-grid 6.5s infinite ease-in-out 2.5s;
    width: 3px;
    height: 3px;
}

/* 인접한 카테고리 탭 간격 반으로 줄이기 */
.category-nav+.category-nav {
    margin-top: -20px !important;
}

/* ====================================================
   Mobile Hamburger Menu & Responsive Nav
==================================================== */
.hamburger {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 21px;
    cursor: pointer;
    z-index: 1000;
}

.hamburger span {
    display: block;
    height: 3px;
    width: 100%;
    background-color: #333;
    border-radius: 3px;
    transition: all 0.3s ease;
}

.hamburger.active span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
}

.hamburger.active span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}

@media (max-width: 768px) {
    .hamburger {
        display: flex;
    }

    .nav {
        display: block !important;
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        max-width: 300px;
        height: 100vh;
        background: #fff;
        box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
        transition: right 0.3s ease;
        z-index: 999;
        overflow-y: auto;
        padding: 80px 20px 20px;
    }

    .nav.active {
        right: 0;
    }

    .nav ul {
        flex-direction: column;
        gap: 0;
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
        width: 100% !important;
        align-items: center !important;
    }

    .nav li {
        width: 100% !important;
        text-align: center !important;
    }

    /* Disable the desktop white dropdown background */
    .nav::before {
        display: none !important;
    }

    .nav li.dropdown {
        display: block;
        height: auto;
        border-bottom: 1px solid #eee;
        position: relative;
        width: 100% !important;
    }

    .nav li.dropdown>a {
        display: flex !important;
        justify-content: center !important;
        /* Force exact center */
        align-items: center !important;
        padding: 15px 0 !important;
        font-size: 1.1rem !important;
        font-weight: 700 !important;
        width: 100% !important;
        color: #333 !important;
        position: relative !important;
        text-align: center !important;
    }

    .dropdown-menu {
        position: static !important;
        width: 100% !important;
        display: block !important;
        max-height: 0;
        overflow: hidden;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: max-height 0.4s ease, opacity 0.4s ease, padding 0.4s ease !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        background: transparent !important;
        transform: none !important;
        left: 0 !important;
    }

    /* Prevent desktop hover transform from shifting the menu left */
    .nav:hover .dropdown-menu,
    .nav li.dropdown:hover .dropdown-menu {
        transform: none !important;
    }

    .dropdown.active .dropdown-menu {
        max-height: 400px;
        opacity: 1 !important;
        visibility: visible !important;
        padding: 10px 0 15px 0 !important;
    }

    .dropdown-menu li {
        width: 100% !important;
        text-align: center !important;
    }

    .dropdown-menu a {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        padding: 12px 0 !important;
        font-size: 1rem !important;
        color: #555 !important;
        white-space: normal !important;
        text-align: center !important;
    }
}

@media (max-width: 480px) {
    .prod-actions {
        flex-direction: column;
        gap: 10px;
    }

    .action-btn {
        width: 100%;
        justify-content: center;
    }
}

/* === ABOUT PAGE STYLES === */
.page-header {
    padding: 150px 0 80px;
    /* 여기서 123.jpg를 원하는 이미지 파일명으로 변경하세요 */
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('../img/123.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: white;
    text-align: center;
}

.page-header h1 {
    font-size: 3rem;
    font-weight: 700;
}

/* --- 주요 연혁(History) 스타일 (PREMIUM TECH THEME) --- */
#tab-history {
    background: linear-gradient(180deg, #ffffff 0%, #f4f8fb 100%);
    padding: 80px 0;
    position: relative;
    overflow: hidden;
    border-radius: 40px;
    box-shadow: inset 0 20px 40px rgba(0, 0, 0, 0.02);
    margin-top: 20px;
}

/* Abstract soft blobs in background for depth */
#tab-history::after {
    content: '';
    position: absolute;
    top: 5%;
    right: -5%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(0, 198, 255, 0.04) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

#tab-history::before {
    content: '';
    position: absolute;
    bottom: 5%;
    left: -5%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(0, 81, 154, 0.04) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.history-header-impact {
    text-align: center;
    margin-bottom: 80px;
    position: relative;
    z-index: 2;
}

.history-header-impact h2 {
    font-size: 3rem;
    color: #0f172a;
    font-weight: 900;
    letter-spacing: -1px;
    margin-bottom: 15px;
}

.history-header-impact h2 span {
    background: linear-gradient(135deg, #00519a 0%, #00c6ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.history-header-impact p {
    font-size: 1.2rem;
    color: #64748b;
    font-weight: 500;
}

.unique-timeline {
    max-width: 1000px;
    margin: 0 auto 50px auto;
    position: relative;
    z-index: 2;
}

/* Subtle track for the spine */
.unique-timeline::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 120px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    background: rgba(203, 213, 225, 0.4);
    border-radius: 4px;
}

.ut-item {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    margin-bottom: 70px;
    position: relative;
}

.ut-item:nth-child(even) {
    justify-content: flex-start;
}

/* Premium Glassmorphism Card */
.ut-content {
    width: 44%;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 40px;
    border-radius: 24px;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.02);
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.9);
    transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    z-index: 2;
}

.ut-item:hover .ut-content {
    transform: translateY(-8px);
    box-shadow: 0 30px 60px rgba(0, 81, 154, 0.08), 0 4px 10px rgba(0, 81, 154, 0.03);
    border-color: #ffffff;
    background: rgba(255, 255, 255, 0.95);
}

/* Elegant Year Badge */
.ut-year {
    position: absolute;
    top: -24px;
    background: #ffffff;
    color: #00519a;
    padding: 8px 28px;
    border-radius: 30px;
    font-size: 1.5rem;
    font-weight: 800;
    box-shadow: 0 10px 25px rgba(0, 81, 154, 0.15);
    border: 1px solid rgba(0, 81, 154, 0.1);
    transition: all 0.4s ease;
    letter-spacing: 1px;
}

.ut-item:nth-child(odd) .ut-year {
    left: 40px;
}

.ut-item:nth-child(even) .ut-year {
    right: 40px;
}

.ut-item:hover .ut-year {
    background: linear-gradient(135deg, #00519a 0%, #00c6ff 100%);
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(0, 198, 255, 0.3);
    border: none;
}

/* Center connecting node (Modern Dot) */
.ut-item::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    background: #ffffff;
    border: 4px solid #cbd5e1;
    border-radius: 50%;
    z-index: 3;
    transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    box-shadow: 0 0 0 0 rgba(0, 198, 255, 0.2);
}

.ut-item.active::after {
    border-color: #00c6ff;
    background: #00519a;
    box-shadow: 0 0 0 8px rgba(0, 198, 255, 0.15);
}

.ut-item:hover::after {
    transform: translate(-50%, -50%) scale(1.3);
    box-shadow: 0 0 0 12px rgba(0, 198, 255, 0.2);
}

/* Clean List */
.ut-content ul {
    list-style: none;
    padding: 0;
    margin: 20px 0 0 0;
}

.ut-content li {
    font-size: 1.15rem;
    color: #334155;
    margin-bottom: 16px;
    padding-left: 24px;
    position: relative;
    font-weight: 500;
    line-height: 1.6;
}

.ut-content li:last-child {
    margin-bottom: 0;
}

.ut-content li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 2px;
    color: #94a3b8;
    font-size: 1rem;
    font-weight: 900;
    transition: all 0.3s ease;
}

.ut-item:hover .ut-content li::before {
    color: #00c6ff;
    transform: scale(1.2);
}



/* Foundation Block (2002) - Premium Holographic style */
.ut-foundation {
    width: 100%;
    margin-top: 150px;
    position: relative;
    text-align: center;
    z-index: 5;
}

.ut-foundation-card {
    display: inline-block;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border-radius: 30px;
    padding: 50px 70px;
    position: relative;
    transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 1);
    box-shadow: 0 20px 50px rgba(0, 81, 154, 0.05), inset 0 0 0 1px rgba(0, 198, 255, 0.1);
    margin: 0 auto;
    overflow: hidden;
}

/* Soft highlight in foundation */
.ut-foundation-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(from 0deg, transparent 0%, rgba(0, 198, 255, 0.1) 25%, transparent 50%);
    animation: slow-spin 8s linear infinite;
    pointer-events: none;
    z-index: -1;
}

@keyframes slow-spin {
    100% {
        transform: rotate(360deg);
    }
}

.ut-foundation-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 30px 60px rgba(0, 81, 154, 0.12);
}

.ut-foundation-year {
    font-size: 2.8rem;
    font-weight: 900;
    background: linear-gradient(135deg, #00519a 0%, #00c6ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 8px;
    letter-spacing: 2px;
}

.ut-foundation-title {
    font-size: 1.6rem;
    font-weight: 800;
    margin-bottom: 0;
    color: #0f172a;
    letter-spacing: -0.5px;
}

/* Connecting line to foundation */
.ut-foundation::before {
    content: '';
    position: absolute;
    top: -150px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 150px;
    background: linear-gradient(to bottom, transparent, #00519a);
}

/* Responsive */
@media (max-width: 768px) {
    #tab-history {
        padding: 20px 0;
    }

    .unique-timeline::before {
        left: 24px;
    }

    .ut-item,
    .ut-item:nth-child(even) {
        justify-content: flex-end;
        margin-bottom: 50px;
    }

    .ut-item::after {
        left: 24px;
    }

    .ut-content {
        width: calc(100% - 50px);
        padding: 25px 20px;
    }

    .ut-item:nth-child(odd) .ut-year,
    .ut-item:nth-child(even) .ut-year {
        left: 20px;
        right: auto;
        top: -15px;
        font-size: 1.2rem;
        padding: 6px 16px;
    }

    .ut-foundation-year {
        font-size: 2rem;
    }

    .ut-foundation-title {
        font-size: 1.3rem;
    }

    .ut-foundation-card {
        padding: 30px 20px;
    }

    .ut-foundation::before {
        left: 24px;
    }
}

/* --- 파트너 & 고객사 (Partners & Clients) 스타일 --- */
.clients-section {
    padding: 20px 0 80px;
    animation: fadeIn 0.5s ease;
}

.clients-section-title {
    text-align: center;
    font-size: 2.2rem;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 50px;
    position: relative;
}

.clients-section-title::after {
    content: '';
    display: block;
    width: 250px;
    height: 4px;
    background: linear-gradient(135deg, #00519a 0%, #00c6ff 100%);
    margin: 5px auto 0;
    border-radius: 2px;
}

.clients-category {
    margin-bottom: 120px;
}

.clients-category-title {
    font-size: 1.6rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 30px;
    padding-bottom: 10px;
    border-bottom: 2px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.clients-category-title::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 24px;
    background: #00519a;
    margin-right: 12px;
    border-radius: 4px;
}

.clients-subcategory-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: #00519a;
    background: rgba(0, 81, 154, 0.05);
    margin: 60px auto 30px;
    padding: 12px 35px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
}

.clients-subcategory-title::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #00c6ff;
    border-radius: 50%;
    margin-right: 12px;
    box-shadow: 0 0 8px rgba(0, 198, 255, 0.6);
}

.logo-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-bottom: 100px;
}

.logo-card {
    width: calc((100% - 80px) / 5);
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px 10px;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.logo-img-wrapper {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    width: 100%;
}

.logo-img-wrapper img {
    max-width: 90%;
    max-height: 100%;
    object-fit: contain;
}

.logo-name {
    font-size: 1rem;
    font-weight: 600;
    color: #334155;
    margin: 0;
    word-break: keep-all;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 992px) {
    .logo-card {
        width: calc((100% - 60px) / 4);
    }
}

@media (max-width: 768px) {
    .logo-card {
        width: calc((100% - 40px) / 3);
    }

    .clients-section-title {
        font-size: 1.8rem;
    }
}

@media (max-width: 480px) {
    .logo-card {
        width: calc((100% - 20px) / 2);
    }
}