/* Pages Common Styles - Enhanced v2.0 */

/* Dropdown Menu - Enhanced */
.dropdown {
    position: relative;
}

.dropdown::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 12px;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12), 0 2px 8px rgba(15, 23, 42, 0.06);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    min-width: 200px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    transition-delay: 0.15s;
    pointer-events: none;
    z-index: 1001;
    list-style: none;
    padding: var(--space-sm);
    margin-top: 12px;
}

.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s;
    pointer-events: auto;
}

.dropdown-menu li {
    margin: 0;
    list-style: none;
}

.dropdown-menu a {
    display: block;
    padding: 10px 16px;
    color: var(--text-dark);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
    border-radius: var(--radius-sm);
    margin: 0;
    position: relative;
    overflow: visible;
}

.dropdown-menu a:hover,
.dropdown-menu a:focus {
    background: var(--gradient-subtle);
    color: var(--accent-color);
    transform: translateX(4px);
}

.dropdown-menu a::before,
.dropdown-menu a::after {
    display: none;
}

/* Page Header - Enhanced v2.0 */
.page-header {
    position: relative;
    padding: 200px 0 120px;
    background: var(--gradient-hero);
    color: var(--text-white);
    text-align: center;
    overflow: hidden;
    margin-top: 70px;
}

.page-header-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.3;
    background-image: url('../images/hero-background.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.page-header-content {
    position: relative;
    z-index: 2;
}

.page-title {
    font-size: 64px;
    font-weight: 900;
    margin-bottom: 24px;
    animation: fadeInUp 0.8s ease;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--text-white);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* 가독성을 위한 그림자 */
}

.page-subtitle {
    font-size: 22px;
    margin-bottom: 40px;
    color: rgba(255, 255, 255, 0.95); /* 더 밝은 색상 */
    animation: fadeInUp 0.8s ease 0.2s backwards;
    line-height: 1.6;
    font-weight: 400;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); /* 가독성을 위한 그림자 */
}

.breadcrumb {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.9); /* 더 밝은 색상 */
    animation: fadeInUp 0.8s ease 0.4s backwards;
}

.breadcrumb a {
    color: rgba(255, 255, 255, 0.9); /* 더 밝은 색상 */
    text-decoration: none;
    transition: all 0.3s ease;
    padding: 8px 12px;
    border-radius: var(--border-radius-sm);
}

.breadcrumb a:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
    color: var(--text-white);
}

.breadcrumb span {
    color: rgba(255, 255, 255, 0.9); /* 더 밝은 색상 */
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Company Section - Enhanced v2.0 */
.company-section {
    padding: 120px 0;
    background: var(--white);
    position: relative;
}

.company-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border-light), transparent);
}

.company-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    margin-top: 60px;
}

.company-text h3 {
    font-size: 38px;
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 32px;
    color: var(--text-dark);
    letter-spacing: -0.01em;
}

.company-text p {
    font-size: 17px;
    line-height: 1.8;
    color: var(--text-light);
    margin-bottom: 24px;
}

.company-stats {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 50px;
}

.stat-box {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 28px;
    background: var(--gradient-card);
    border-radius: var(--border-radius-lg);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid var(--border-light);
    position: relative;
    overflow: hidden;
}

.stat-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--gradient-primary);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.stat-box:hover::before {
    transform: scaleX(1);
}

.stat-box:hover {
    transform: translateX(12px) scale(1.02);
    box-shadow: var(--shadow-lg);
    border-color: rgba(26, 26, 46, 0.1);
}

.stat-box i {
    font-size: 42px;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    padding: 12px;
    border-radius: var(--border-radius-sm);
}

.stat-box strong {
    display: block;
    font-size: 20px;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 4px;
}

.stat-box span {
    font-size: 15px;
    color: var(--text-light);
    font-weight: 500;
}

.company-visual {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

.visual-card {
    padding: 45px;
    background: var(--gradient-card);
    border-radius: var(--border-radius-xl);
    text-align: center;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid var(--border-light);
    position: relative;
    overflow: hidden;
}

.visual-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: var(--gradient-primary);
    transform: scaleX(0);
    transition: transform 0.4s ease;
}

.visual-card:hover::before {
    transform: scaleX(1);
}

.visual-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: var(--shadow-xl);
    border-color: rgba(26, 26, 46, 0.1);
}

.visual-card i {
    font-size: 56px;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 24px;
    display: block;
}

.visual-card h4 {
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 12px;
    color: var(--text-dark);
    letter-spacing: -0.01em;
}

.visual-card p {
    font-size: 15px;
    color: var(--text-light);
    line-height: 1.6;
}

/* Market Section - Enhanced v2.0 */
.market-section {
    padding: 120px 0;
    background: var(--light-bg);
    position: relative;
}

.market-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="%23000" opacity="0.02"/><circle cx="75" cy="75" r="1" fill="%23000" opacity="0.02"/><circle cx="50" cy="10" r="1" fill="%23000" opacity="0.02"/><circle cx="10" cy="90" r="1" fill="%23000" opacity="0.02"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
    opacity: 0.5;
}

.market-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    margin-top: 60px;
    position: relative;
    z-index: 1;
}

.market-highlight {
    background: var(--gradient-hero);
    padding: 60px;
    border-radius: var(--border-radius-xl);
    color: var(--white);
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-xl);
}

.market-highlight::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="dots" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="1" fill="%23fff" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23dots)"/></svg>');
    opacity: 0.3;
}

.market-number {
    font-size: 72px;
    font-weight: 900;
    margin-bottom: 20px;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    letter-spacing: -0.02em;
    position: relative;
    z-index: 1;
}

.market-desc {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 40px;
    opacity: 0.95;
    position: relative;
    z-index: 1;
}

.market-details {
    display: flex;
    flex-direction: column;
    gap: 18px;
    position: relative;
    z-index: 1;
}

.market-detail-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    padding: 18px 30px;
    border-radius: var(--border-radius-lg);
    font-size: 17px;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.market-detail-item:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.market-detail-item i {
    font-size: 22px;
}

.trust-network-visual {
    background: var(--gradient-card);
    padding: 50px;
    border-radius: var(--border-radius-xl);
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-lg);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.trust-network-visual:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
}

.trust-network-visual h3 {
    font-size: 28px;
    font-weight: 800;
    text-align: center;
    margin-bottom: 35px;
    color: var(--text-dark);
    letter-spacing: -0.01em;
}

.trust-levels {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 50px;
}

.trust-level-item {
    flex: 1;
    text-align: center;
    padding: 30px 20px;
    background: var(--white);
    border-radius: var(--border-radius-lg);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid var(--border-light);
    position: relative;
    overflow: hidden;
}

.trust-level-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--gradient-primary);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.trust-level-item:hover::before {
    transform: scaleX(1);
}

.trust-level-item:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
}

.trust-level-item.premium {
    background: var(--gradient-primary);
    color: var(--white);
    border-color: transparent;
}

.trust-level-item.premium::before {
    background: rgba(255, 255, 255, 0.3);
}

.trust-badge {
    display: inline-block;
    padding: 10px 24px;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 800;
    margin-bottom: 16px;
    letter-spacing: 0.5px;
}

.trust-badge.level-1 {
    background: linear-gradient(135deg, #008250 0%, #00693f 100%);
    color: var(--white);
}

.trust-badge.level-3 {
    background: var(--gradient-primary);
    color: var(--white);
}

.trust-badge.level-5 {
    background: rgba(255, 255, 255, 0.3);
    color: var(--white);
}

.trust-level-item p {
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--text-dark);
}

.trust-level-item.premium p,
.trust-level-item.premium span {
    color: var(--white);
}

.trust-level-item span {
    font-size: 14px;
    color: var(--text-light);
    font-weight: 500;
}

.trust-connections {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    position: relative;
}

.connection-node {
    background: var(--white);
    padding: 24px;
    border-radius: var(--border-radius-lg);
    text-align: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-sm);
}

.connection-node:hover {
    transform: scale(1.05);
    box-shadow: var(--shadow-md);
}

.connection-node.center {
    grid-column: 2;
    background: var(--gradient-primary);
    color: var(--white);
    border-color: transparent;
}

.connection-node i {
    font-size: 32px;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 12px;
}

.connection-node.center i {
    color: var(--white);
    background: none;
    -webkit-text-fill-color: var(--white);
}

.connection-node span {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-dark);
}

.connection-node.center span {
    color: var(--white);
}

/* Vision Detail Section */
.vision-detail-section {
    padding: 100px 0;
    background: var(--light-bg);
}

.vision-main-card {
    background: var(--gradient-hero);
    padding: 60px;
    border-radius: 24px;
    text-align: center;
    color: var(--white);
    margin-bottom: 50px;
}

.vision-icon-large {
    width: 120px;
    height: 120px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 30px;
}

.vision-icon-large i {
    font-size: 60px;
}

.vision-main-card h3 {
    font-size: 38px;
    font-weight: 800;
    margin-bottom: 20px;
    line-height: 1.3;
    color: var(--text-white);
}

.vision-tagline {
    font-size: 20px;
    opacity: 0.95;
}

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

.pillar-card {
    background: var(--white);
    padding: 40px 30px;
    border-radius: 16px;
    position: relative;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    transition: all 0.3s;
}

.pillar-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

.pillar-number {
    position: absolute;
    top: -20px;
    left: 30px;
    width: 50px;
    height: 50px;
    background: var(--gradient-1);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 800;
}

.pillar-card h4 {
    font-size: 24px;
    font-weight: 700;
    margin: 20px 0 15px;
    color: var(--text-dark);
}

.pillar-card p {
    font-size: 15px;
    line-height: 1.8;
    color: var(--text-light);
    margin-bottom: 20px;
}

.pillar-icon {
    margin-top: 30px;
    text-align: right;
}

.pillar-icon i {
    font-size: 48px;
    color: var(--primary-color);
    opacity: 0.2;
}

/* CEO Section */
.ceo-section {
    padding: 100px 0;
    background: var(--white);
}

.ceo-content {
    display: grid;
    grid-template-columns: 350px 1fr;
    gap: 60px;
    margin-top: 50px;
}

.ceo-photo {
    text-align: center;
}

.photo-placeholder {
    width: 280px;
    height: 320px;
    background: var(--gradient-1);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}

.photo-placeholder i {
    font-size: 120px;
    color: var(--white);
    opacity: 0.7;
}

.ceo-info h4 {
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--text-dark);
}

.ceo-info p {
    font-size: 16px;
    color: var(--text-light);
}

.ceo-message {
    position: relative;
}

.quote-mark {
    font-size: 120px;
    color: var(--primary-color);
    opacity: 0.1;
    position: absolute;
    top: -40px;
    left: -20px;
    font-family: Georgia, serif;
}

.ceo-message h3 {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 30px;
    color: var(--text-dark);
    position: relative;
}

.message-text {
    font-size: 16px;
    line-height: 1.9;
    color: var(--text-light);
    margin-bottom: 20px;
}

.message-text.signature {
    text-align: right;
    font-style: italic;
    margin-top: 40px;
}

.ceo-signature {
    text-align: right;
    margin-top: 10px;
}

.ceo-signature span {
    display: block;
    font-size: 14px;
    color: var(--text-light);
    margin-bottom: 5px;
}

.ceo-signature strong {
    font-size: 24px;
    color: var(--text-dark);
    font-family: 'Inter', sans-serif;
}

/* Team Section */
.team-section {
    padding: 100px 0;
    background: var(--light-bg);
}

.section-description {
    max-width: 700px;
    margin: 15px auto 0;
    font-size: 16px;
    color: var(--text-light);
    line-height: 1.7;
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 35px;
    margin-top: 50px;
}

.team-card {
    background: var(--white);
    padding: 40px 30px;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    transition: all 0.3s;
}

.team-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}

.team-photo {
    width: 140px;
    height: 140px;
    background: var(--gradient-1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
}

.team-photo i {
    font-size: 60px;
    color: var(--white);
}

.team-card h4 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--text-dark);
}

.team-role {
    font-size: 14px;
    color: var(--primary-color);
    font-weight: 600;
    margin-bottom: 15px;
}

.team-description {
    font-size: 14px;
    color: var(--text-light);
    line-height: 1.6;
    margin-bottom: 20px;
}

.team-social {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.team-social a {
    width: 36px;
    height: 36px;
    background: var(--light-bg);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-light);
    transition: all 0.3s;
}

.team-social a:hover {
    background: var(--primary-color);
    color: var(--white);
    transform: translateY(-3px);
}

/* Join Team Section */
.join-team-section {
    padding: 80px 0;
    background: var(--gradient-hero);
    color: var(--white);
}

.join-team-content {
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}

.join-team-content h2 {
    font-size: 42px;
    font-weight: 800;
    margin-bottom: 20px;
}

.join-team-content p {
    font-size: 18px;
    margin-bottom: 35px;
    opacity: 0.95;
}

/* DID Page Styles */
.did-overview-section {
    padding: 70px 0;
    background: var(--white);
}

.overview-main {
    text-align: center;
    max-width: 900px;
    margin: 0 auto 50px;
}

.overview-badge {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: var(--gradient-1);
    color: var(--white);
    padding: 12px 30px;
    border-radius: 50px;
    margin-bottom: 30px;
    font-weight: 600;
}

.overview-badge i {
    font-size: 24px;
}

.overview-main h3 {
    font-size: 34px;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 25px;
    color: var(--text-dark);
}

.overview-description {
    font-size: 17px;
    line-height: 1.8;
    color: var(--text-light);
}

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

.overview-feature-card {
    padding: 28px 20px;
    background: var(--light-bg);
    border-radius: 16px;
    text-align: center;
    transition: all 0.3s;
    border: 2px solid transparent;
}

.overview-feature-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    border-color: var(--primary-color);
}

.feature-icon-wrapper {
    width: 70px;
    height: 70px;
    margin: 0 auto 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.feature-icon-wrapper.blue {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.feature-icon-wrapper.green {
    background: linear-gradient(135deg, #008250 0%, #00693f 100%);
}

.feature-icon-wrapper.purple {
    background: linear-gradient(135deg, #8b6755 0%, #6b4a3a 100%);
}

.feature-icon-wrapper.orange {
    background: linear-gradient(135deg, #ffc300 0%, #d97706 100%);
}

.feature-icon-wrapper i {
    font-size: 32px;
    color: var(--white);
}

.overview-feature-card h4 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--text-dark);
}

.overview-feature-card p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-light);
}

/* Benefits Section */
.did-benefits-section {
    padding: 70px 0;
    background: var(--light-bg);
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
    margin-top: 40px;
}

.benefit-item {
    background: var(--white);
    padding: 35px;
    border-radius: 16px;
    position: relative;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    transition: all 0.3s;
}

.benefit-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

.benefit-number {
    position: absolute;
    top: 30px;
    right: 30px;
    font-size: 48px;
    font-weight: 800;
    color: var(--primary-color);
    opacity: 0.15;
}

.benefit-item h4 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--text-dark);
}

.benefit-item p {
    font-size: 15px;
    line-height: 1.8;
    color: var(--text-light);
}

/* Technology Section */
.did-technology-section {
    padding: 70px 0;
    background: var(--white);
    color: var(--text-dark);
}

.did-technology-section.healthcare-section {
    background: #151515;
    position: relative;
    overflow: hidden;
    --hc-overlay-top: 0.82;
    --hc-overlay-mid: 0.76;
    --hc-overlay-bottom: 0.72;
    --hc-video-brightness: 0.58;
    --hc-content-shift: -10px;
}

.did-technology-section.healthcare-section.overlay-soft {
    --hc-overlay-top: 0.72;
    --hc-overlay-mid: 0.66;
    --hc-overlay-bottom: 0.62;
    --hc-video-brightness: 0.66;
}

.did-technology-section.healthcare-section.overlay-strong {
    --hc-overlay-top: 0.88;
    --hc-overlay-mid: 0.82;
    --hc-overlay-bottom: 0.78;
    --hc-video-brightness: 0.54;
}

.hc-bg-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(var(--hc-video-brightness)) saturate(0.9);
    z-index: 0;
}

.hc-bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        180deg,
        rgba(8, 15, 30, var(--hc-overlay-top)) 0%,
        rgba(11, 18, 32, var(--hc-overlay-mid)) 45%,
        rgba(11, 18, 32, var(--hc-overlay-bottom)) 100%
    );
    z-index: 1;
}

.hc-container {
    position: relative;
    z-index: 2;
}

/* Healthcare 다크 배경 오버라이드 */
.healthcare-section .section-header,
.healthcare-section .tech-overview {
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
    padding: 20px 24px;
    background: linear-gradient(135deg, rgba(8, 15, 30, 0.62), rgba(20, 35, 58, 0.54));
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 18px;
    backdrop-filter: blur(8px);
}

.healthcare-section .section-header {
    margin-bottom: 18px;
    transform: translateY(var(--hc-content-shift));
}

.healthcare-section .tech-overview {
    transform: translateY(var(--hc-content-shift));
}

.healthcare-section .section-subtitle {
    color: #ffffff !important;
    background: rgba(37, 99, 235, 0.55);
    border: 1px solid rgba(96, 165, 250, 0.55);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

.healthcare-section .section-title {
    color: #ffffff;
    text-shadow: 0 6px 18px rgba(0, 0, 0, 0.42);
}

.healthcare-section .section-description,
.healthcare-section .tech-overview h3,
.healthcare-section .tech-overview p,
.healthcare-section .hc-card h4,
.healthcare-section .hc-tags span {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.healthcare-section .hc-card {
    background: rgba(15, 23, 42, 0.55) !important;
    border: 1px solid rgba(96, 165, 250, 0.28) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.healthcare-section .hc-tags span {
    background: rgba(37, 99, 235, 0.32) !important;
    border: 1px solid rgba(96, 165, 250, 0.35) !important;
}

.healthcare-section .tech-overview h3 {
    color: #ffffff;
    text-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

.healthcare-section .tech-overview p {
    color: #ffffff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.healthcare-section .hc-card {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
}

.healthcare-section .hc-card:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.3);
}

.healthcare-section .hc-card h4 {
    color: #ffffff;
}

.healthcare-section .hc-tags span {
    background: rgba(37, 99, 235, 0.35);
    color: #ffffff;
}

.healthcare-section .hc-benefit-item {
    background: rgba(255, 255, 255, 0.07);
    border-left-color: #fbb055;
}

.healthcare-section .hc-benefit-number {
    color: #ffffff;
}

.healthcare-section .hc-benefit-item h4 {
    color: #ffffff;
}

.healthcare-section .hc-benefit-item p {
    color: #ffffff;
}

/* Healthcare Card Grid */
.hc-card-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin: 40px 0;
}

.hc-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 28px 24px;
    border: 1px solid rgba(15, 23, 36, 0.07);
    transition: transform 0.25s, box-shadow 0.25s;
}

.hc-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(15, 23, 36, 0.09);
}

.hc-card-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--gradient-3);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
}

.hc-card-icon i {
    font-size: 22px;
    color: #ffffff;
}

.hc-card h4 {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 14px;
}

.hc-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.hc-tags span {
    display: inline-block;
    padding: 5px 12px;
    background: #eef3f8;
    color: #23406a;
    font-size: 12px;
    font-weight: 500;
    border-radius: 20px;
}

/* Healthcare Benefits */
.hc-benefits {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 20px;
}

.hc-benefit-item {
    padding: 24px;
    border-left: 3px solid var(--accent-color);
    background: #ffffff;
    border-radius: 0 12px 12px 0;
}

.hc-benefit-number {
    font-size: 28px;
    font-weight: 800;
    color: rgba(35, 64, 106, 0.15);
    line-height: 1;
    margin-bottom: 10px;
}

.hc-benefit-item h4 {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 8px;
}

.hc-benefit-item p {
    font-size: 13px;
    line-height: 1.7;
    color: var(--text-light);
}

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

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

@media (max-width: 768px) {
    .did-technology-section.healthcare-section {
        --hc-content-shift: -4px;
    }

    .healthcare-section .section-header,
    .healthcare-section .tech-overview {
        padding: 16px 14px;
        border-radius: 14px;
    }

    .healthcare-section .tech-overview p {
        font-size: 16px;
        line-height: 1.95;
        letter-spacing: 0.01em;
    }
}

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

    .hc-benefits {
        grid-template-columns: 1fr;
    }

    .healthcare-section .tech-overview p {
        font-size: 15px;
        line-height: 2;
    }
}

@media (max-width: 768px) {
    .page-header {
        padding: 150px 0 84px;
    }

    .page-title {
        font-size: 42px;
    }

    .page-subtitle {
        font-size: 18px;
    }

    .breadcrumb {
        flex-wrap: wrap;
    }
}

@media (max-width: 640px) {
    .page-header {
        padding: 136px 0 72px;
    }

    .page-title {
        font-size: 34px;
    }

    .page-subtitle {
        font-size: 16px;
    }
}

.did-technology-section .section-subtitle {
    color: #23406a;
    background: #eef3f8;
}

.did-technology-section .section-title {
    color: var(--text-dark);
}

.tech-overview {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 40px;
}

.tech-overview h3 {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--text-dark);
}

.tech-overview p {
    font-size: 17px;
    line-height: 1.8;
    color: var(--text-light);
}

.tech-stack-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
}

.tech-stack-card {
    background: #ffffff;
    padding: 35px;
    border-radius: 16px;
    transition: all 0.3s;
    border: 1px solid rgba(15, 23, 36, 0.08);
}

.tech-stack-card:hover {
    background: #ffffff;
    border-color: rgba(15, 23, 36, 0.16);
    transform: translateY(-4px);
}

.tech-icon {
    width: 70px;
    height: 70px;
    background: var(--gradient-3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
}

.tech-icon i {
    font-size: 32px;
    color: var(--white);
}

.tech-stack-card h4 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--text-dark);
}

.tech-list {
    list-style: none;
}

.tech-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    font-size: 15px;
    opacity: 1;
    color: var(--text-light);
}

.tech-list i {
    color: var(--accent-color);
    font-size: 14px;
}

/* Process Section */
.did-process-section {
    padding: 70px 0;
    background: var(--white);
}

.process-timeline {
    max-width: 900px;
    margin: 40px auto 0;
}

.process-step {
    display: grid;
    grid-template-columns: 70px 1fr 90px;
    gap: 25px;
    align-items: center;
    padding: 25px 0;
    position: relative;
}

.process-step:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 35px;
    top: 70px;
    width: 2px;
    height: calc(100% - 40px);
    background: var(--light-bg);
}

.step-circle {
    width: 70px;
    height: 70px;
    background: var(--gradient-1);
    color: #000000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 800;
    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
    position: relative;
    z-index: 2;
}

.step-content h4 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--text-dark);
}

.step-content p {
    font-size: 15px;
    line-height: 1.7;
    color: var(--text-light);
}

.step-icon {
    text-align: center;
}

.step-icon i {
    font-size: 56px;
    color: var(--primary-color);
    opacity: 0.2;
}

/* Use Cases Section */
.did-usecases-section {
    padding: 70px 0;
    background: var(--light-bg);
}

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

.usecase-card {
    background: var(--white);
    padding: 40px 30px;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    transition: all 0.3s;
}

.usecase-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

.usecase-card i {
    font-size: 52px;
    color: var(--primary-color);
    margin-bottom: 20px;
}

.usecase-card h4 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--text-dark);
}

.usecase-card p {
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-light);
}

/* App Download Section */
.app-download-section {
    padding: 100px 0;
    background: var(--white);
    color: #1e1e1e;
}

/* Force readable colors on white background */
.app-download-section .section-subtitle {
    color: #f5821f;
    background: rgba(37, 99, 235, 0.08);
    border-color: rgba(37, 99, 235, 0.2);
}
.app-download-section .section-title,
.app-download-section .download-info h3 {
    color: #0f172a;
}
.app-download-section .section-description,
.app-download-section .download-info > p {
    color: #334155;
}
.app-download-section .app-feature-item {
    color: #1e293b;
}
.app-download-section .app-feature-item i {
    color: #008250;
}
.app-download-section .download-note {
    color: #475569;
}
.app-download-section .download-note i {
    color: #f5821f;
}
.app-download-section .store-button {
    background: #0f172a !important;
    border: 1px solid #0f172a;
    color: #ffffff !important;
}
.app-download-section .store-button i {
    color: #ffffff !important;
    font-size: 36px;
}
.app-download-section .store-button span {
    opacity: 0.9;
    color: rgba(255, 255, 255, 0.9) !important;
}
.app-download-section .store-button strong {
    color: #ffffff !important;
}
.app-download-section .store-button:hover {
    background: #1e293b !important;
}

.download-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    margin-top: 50px;
}

.phone-mockup {
    width: 320px;
    height: 600px;
    background: var(--gradient-1);
    border-radius: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.2);
    position: relative;
}

.phone-mockup::before {
    content: '';
    position: absolute;
    top: 20px;
    width: 100px;
    height: 25px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 15px;
}

.phone-mockup i {
    font-size: 120px;
    color: var(--white);
    margin-bottom: 20px;
}

.phone-mockup span {
    font-size: 24px;
    font-weight: 700;
    color: var(--white);
}

/* Phone Mockup with Real Image */
.phone-mockup-image {
    margin: 0 auto;
    max-width: 400px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.25);
    border-radius: 30px;
    overflow: hidden;
    transition: all 0.3s;
}

.phone-mockup-image:hover {
    transform: translateY(-10px);
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.35);
}

.phone-mockup-image img {
    width: 100%;
    height: auto;
    display: block;
}

.download-info h3 {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 20px;
    color: var(--text-dark);
}

.download-info > p {
    font-size: 17px;
    line-height: 1.8;
    color: var(--text-light);
    margin-bottom: 30px;
}

.app-features-list {
    margin-bottom: 40px;
}

.app-feature-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px 0;
    font-size: 16px;
    color: var(--text-dark);
}

.app-feature-item i {
    color: var(--secondary-color);
    font-size: 18px;
}

.download-buttons {
    display: flex;
    gap: 20px;
    margin-bottom: 25px;
}

.store-button {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 25px;
    background: var(--dark-bg);
    color: var(--white);
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.3s;
}

.store-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.store-button i {
    font-size: 36px;
}

.store-button span {
    display: block;
    font-size: 11px;
    opacity: 0.8;
}

.store-button strong {
    display: block;
    font-size: 18px;
    font-weight: 700;
}

.download-note {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--text-light);
    font-style: italic;
}

.download-note i {
    color: var(--primary-color);
}

/* IR Page Styles */
.ir-summary-section {
    padding: 100px 0;
    background: var(--light-bg);
}

.summary-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    margin-top: 50px;
}

.summary-card {
    background: var(--white);
    padding: 40px 30px;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    transition: all 0.3s;
}

.summary-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}

.summary-card.highlight {
    background: var(--gradient-hero);
    color: var(--white);
}

.summary-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 20px;
    background: rgba(0, 180, 216, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.summary-card.highlight .summary-icon {
    background: rgba(255, 255, 255, 0.2);
}

.summary-icon i {
    font-size: 32px;
    color: var(--primary-color);
}

.summary-card.highlight .summary-icon i {
    color: var(--white);
}

.summary-card h3 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 15px;
    color: var(--text-dark);
}

.summary-card.highlight h3 {
    color: var(--white);
    opacity: 0.9;
}

.summary-value {
    font-size: 42px;
    font-weight: 900;
    margin-bottom: 10px;
    color: var(--primary-color);
}

.summary-card.highlight .summary-value {
    color: var(--white);
}

.summary-card p {
    font-size: 14px;
    color: var(--text-light);
}

.summary-card.highlight p {
    color: var(--white);
    opacity: 0.9;
}

/* Business Model */
.ir-business-model {
    padding: 100px 0;
    background: var(--white);
}

.bm-overview {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 50px;
}

.bm-overview h3 {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 15px;
    color: var(--text-dark);
}

.bm-overview p {
    font-size: 17px;
    color: var(--text-light);
}

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

.bm-card {
    background: var(--light-bg);
    padding: 40px 30px;
    border-radius: 16px;
    transition: all 0.3s;
    border: 2px solid transparent;
}

.bm-card:hover {
    border-color: var(--secondary-color);
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

.bm-card.highlight-card {
    background: var(--gradient-hero);
    color: var(--white);
}

.bm-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 2px solid rgba(0, 180, 216, 0.2);
}

.bm-card.highlight-card .bm-header {
    border-bottom-color: rgba(255, 255, 255, 0.3);
}

.bm-header i {
    font-size: 32px;
    color: var(--primary-color);
}

.bm-card.highlight-card .bm-header i {
    color: var(--white);
}

.bm-header h4 {
    font-size: 24px;
    font-weight: 800;
    color: var(--text-dark);
}

.bm-card.highlight-card .bm-header h4 {
    color: var(--white);
}

.bm-list {
    list-style: none;
    margin-bottom: 30px;
}

.bm-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    font-size: 15px;
    color: var(--text-dark);
}

.bm-card.highlight-card .bm-list li {
    color: var(--white);
}

.bm-list i {
    color: var(--secondary-color);
    font-size: 14px;
}

.bm-card.highlight-card .bm-list i {
    color: var(--white);
}

.bm-revenue {
    background: rgba(0, 180, 216, 0.1);
    padding: 15px 20px;
    border-radius: 10px;
    text-align: center;
}

.bm-card.highlight-card .bm-revenue {
    background: rgba(255, 255, 255, 0.2);
}

.bm-revenue span {
    display: block;
    font-size: 13px;
    color: var(--text-light);
    margin-bottom: 5px;
}

.bm-card.highlight-card .bm-revenue span {
    color: var(--white);
    opacity: 0.9;
}

.bm-revenue strong {
    font-size: 16px;
    font-weight: 700;
    color: var(--primary-color);
}

.bm-card.highlight-card .bm-revenue strong {
    color: var(--white);
}

/* Traction Timeline */
.ir-traction {
    padding: 100px 0;
    background: var(--light-bg);
}

.traction-timeline {
    max-width: 900px;
    margin: 50px auto 0;
}

.timeline-item {
    display: flex;
    gap: 30px;
    padding: 30px 0;
    position: relative;
}

.timeline-item:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 24px;
    top: 80px;
    width: 2px;
    height: calc(100% - 40px);
    background: #e6e2db;
}

.timeline-marker {
    width: 50px;
    height: 50px;
    background: #e6e2db;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
}

.timeline-item.completed .timeline-marker {
    background: var(--secondary-color);
}

.timeline-item.current .timeline-marker {
    background: var(--primary-color);
    animation: pulse 2s infinite;
}

.timeline-marker i {
    font-size: 20px;
    color: var(--white);
}

@keyframes pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(44, 95, 141, 0.7);
    }
    50% {
        box-shadow: 0 0 0 15px rgba(44, 95, 141, 0);
    }
}

.timeline-content {
    flex: 1;
    background: var(--white);
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}

.timeline-date {
    display: inline-block;
    background: var(--secondary-color);
    color: var(--white);
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 15px;
}

.timeline-content h4 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--text-dark);
}

.timeline-content > p {
    font-size: 15px;
    color: var(--text-light);
    margin-bottom: 15px;
}

.achievement-list {
    list-style: none;
    margin-top: 15px;
}

.achievement-list li {
    padding: 8px 0;
    font-size: 14px;
    color: var(--text-dark);
}

/* Advantage */
.ir-advantage {
    padding: 100px 0;
    background: var(--white);
}

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

.advantage-card {
    background: var(--light-bg);
    padding: 40px 30px;
    border-radius: 16px;
    position: relative;
    transition: all 0.3s;
}

.advantage-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

.advantage-number {
    position: absolute;
    top: 30px;
    right: 30px;
    font-size: 48px;
    font-weight: 900;
    color: var(--secondary-color);
    opacity: 0.15;
}

.advantage-card h4 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--text-dark);
}

.advantage-card p {
    font-size: 15px;
    line-height: 1.8;
    color: var(--text-light);
}

/* Investment */
.ir-investment {
    padding: 100px 0;
    background: var(--dark-bg);
    color: var(--text-white);
}

.investment-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.investment-info h2 {
    font-size: 42px;
    font-weight: 800;
    margin-bottom: 25px;
    line-height: 1.3;
    color: var(--text-white);
}

.investment-info p {
    font-size: 17px;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.9); /* 더 밝은 색상 */
    margin-bottom: 35px;
}

.investment-features {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.inv-feature {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 16px;
    font-weight: 600;
}

.inv-feature i {
    font-size: 24px;
    color: var(--secondary-color);
}

.cta-images-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    padding: 24px;
    background: var(--white);
    border: 1px solid var(--border-light);
    border-radius: 20px;
    box-shadow: 0 12px 32px rgba(15, 23, 36, 0.08);
}

.cta-images-grid img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
    object-fit: cover;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.cta-images-grid img:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 24px rgba(15, 23, 36, 0.15);
}

@media (max-width: 640px) {
    .cta-images-grid {
        padding: 16px;
        gap: 12px;
    }
}

.cta-box {
    background: rgba(255, 255, 255, 0.05);
    padding: 50px;
    border-radius: 20px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    text-align: center;
}

.cta-box h3 {
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 15px;
}

.cta-box > p {
    font-size: 16px;
    opacity: 0.9;
    margin-bottom: 30px;
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 30px;
}

.contact-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 15px;
}

.contact-item i {
    color: var(--secondary-color);
}

/* Contact Section */
.contact-section {
    padding: 100px 0;
    background: var(--light-bg);
}

.contact-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-top: 50px;
}

.contact-method {
    background: var(--white);
    padding: 40px 30px;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    transition: all 0.3s;
}

.contact-method:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

.contact-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 20px;
    background: var(--gradient-3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-icon i {
    font-size: 28px;
    color: var(--white);
}

.contact-method h4 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--text-dark);
}

.contact-method p {
    font-size: 15px;
    color: var(--text-light);
    margin: 5px 0;
}

/* Responsive Design */
@media (max-width: 968px) {
    .page-title {
        font-size: 42px;
    }
    
    .company-content {
        grid-template-columns: 1fr;
    }
    
    .market-content {
        grid-template-columns: 1fr;
    }
    
    .trust-levels {
        flex-direction: column;
    }
    
    .vision-pillars {
        grid-template-columns: 1fr;
    }
    
    .ceo-content {
        grid-template-columns: 1fr;
    }
    
    .team-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .overview-features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .benefits-grid {
        grid-template-columns: 1fr;
    }
    
    .tech-stack-grid {
        grid-template-columns: 1fr;
    }
    
    .usecases-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .download-content {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .page-header {
        padding: 140px 0 80px;
    }
    
    .page-title {
        font-size: 32px;
    }
    
    .page-subtitle {
        font-size: 16px;
    }
    
    .company-text h3 {
        font-size: 24px;
    }
    
    .vision-main-card {
        padding: 40px 25px;
    }
    
    .vision-main-card h3 {
        font-size: 28px;
    }
    
    .team-grid {
        grid-template-columns: 1fr;
    }
    
    .join-team-content h2 {
        font-size: 32px;
    }
    
    .overview-features-grid {
        grid-template-columns: 1fr;
    }
    
    .usecases-grid {
        grid-template-columns: 1fr;
    }
    
    .download-buttons {
        flex-direction: column;
    }
    
    .process-step {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .process-step::after {
        display: none;
    }
    
    .step-icon {
        display: none;
    }
}

/* Genealogy Page Styles */
.genealogy-overview-section {
    padding: 100px 0;
    background: var(--white);
}

.genealogy-features-section {
    padding: 100px 0;
    background: var(--light-bg);
}

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

.feature-item {
    background: var(--white);
    padding: 40px;
    border-radius: 16px;
    position: relative;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    transition: all 0.3s;
}

.feature-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

.feature-number {
    position: absolute;
    top: 30px;
    right: 30px;
    font-size: 48px;
    font-weight: 800;
    color: var(--primary-color);
    opacity: 0.15;
}

.feature-item h4 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--text-dark);
}

.feature-item p {
    font-size: 15px;
    line-height: 1.8;
    color: var(--text-light);
}

/* Preservation Section */
.preservation-section {
    padding: 100px 0;
    background: var(--white);
}

.preservation-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    margin-top: 50px;
}

.preservation-info h3 {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--text-dark);
}

.preservation-info p {
    font-size: 16px;
    line-height: 1.8;
    color: var(--text-light);
    margin-bottom: 30px;
}

.preservation-features {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.pres-feature {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-dark);
}

.pres-feature i {
    font-size: 24px;
    color: var(--secondary-color);
}

.preservation-timeline {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.preservation-timeline .timeline-item {
    display: flex;
    gap: 20px;
    align-items: center;
    padding: 25px;
    background: var(--light-bg);
    border-radius: 12px;
    transition: all 0.3s;
}

.preservation-timeline .timeline-item:hover {
    transform: translateX(10px);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}

.preservation-timeline .timeline-marker {
    width: 60px;
    height: 60px;
    background: var(--gradient-1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.preservation-timeline .timeline-item.present .timeline-marker {
    background: var(--gradient-2);
}

.preservation-timeline .timeline-item.future .timeline-marker {
    background: var(--gradient-3);
}

.preservation-timeline .timeline-marker i {
    font-size: 24px;
    color: var(--white);
}

.preservation-timeline .timeline-content h4 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--text-dark);
}

.preservation-timeline .timeline-content p {
    font-size: 14px;
    color: var(--text-light);
}

/* Blockchain Technology Section */
.blockchain-tech-section {
    padding: 100px 0;
    background: var(--dark-bg);
    color: var(--text-white);
}

.blockchain-tech-section .section-subtitle {
    color: rgba(255, 255, 255, 0.9); /* 더 밝은 색상 */
    background: rgba(255, 255, 255, 0.1); /* 배경 추가 */
}

.blockchain-tech-section .section-title {
    color: var(--text-white);
}

.blockchain-overview {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 50px;
}

.blockchain-overview h3 {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--text-white);
}

.blockchain-overview p {
    font-size: 17px;
    line-height: 1.8;
    opacity: 0.9;
}

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

.blockchain-feature-card {
    background: rgba(255, 255, 255, 0.05);
    padding: 40px 30px;
    border-radius: 16px;
    transition: all 0.3s;
    border: 2px solid transparent;
}

.blockchain-feature-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--secondary-color);
    transform: translateY(-5px);
}

.blockchain-icon {
    width: 70px;
    height: 70px;
    background: var(--gradient-3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
}

.blockchain-icon i {
    font-size: 32px;
    color: var(--white);
}

.blockchain-feature-card h4 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 20px;
}

.blockchain-list {
    list-style: none;
}

.blockchain-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    font-size: 15px;
    opacity: 0.9;
}

.blockchain-list i {
    color: var(--secondary-color);
    font-size: 14px;
}

/* Genealogy Use Cases */
.genealogy-usecases-section {
    padding: 100px 0;
    background: var(--light-bg);
}

.genealogy-usecases-section .usecases-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 50px;
}

.genealogy-usecases-section .usecase-card {
    background: var(--white);
    padding: 40px 30px;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    transition: all 0.3s;
}

.genealogy-usecases-section .usecase-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

.genealogy-usecases-section .usecase-card i {
    font-size: 52px;
    color: var(--primary-color);
    margin-bottom: 20px;
}

.genealogy-usecases-section .usecase-card h4 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--text-dark);
}

.genealogy-usecases-section .usecase-card p {
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-light);
}

/* Getting Started Section */
.getting-started-section {
    padding: 100px 0;
    background: var(--white);
}

.getting-started-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.getting-started-info h2 {
    font-size: 42px;
    font-weight: 800;
    margin-bottom: 25px;
    color: var(--text-dark);
}

.getting-started-info p {
    font-size: 17px;
    line-height: 1.8;
    color: var(--text-light);
    margin-bottom: 35px;
}

.getting-started-steps {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.step-item {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
    background: var(--light-bg);
    border-radius: 12px;
    transition: all 0.3s;
}

.step-item:hover {
    transform: translateX(10px);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}

.step-number {
    width: 50px;
    height: 50px;
    background: #ffffff;
    color: #000000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 800;
    flex-shrink: 0;
    border: 2px solid #000000;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.step-item span {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-dark);
}

.getting-started-cta {
    display: flex;
    justify-content: center;
    align-items: center;
}

.cta-box {
    background: var(--gradient-hero);
    padding: 50px;
    border-radius: 20px;
    text-align: center;
    color: var(--white);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}

.cta-box h3 {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 15px;
    color: var(--text-white);
}

.cta-box p {
    font-size: 16px;
    margin-bottom: 30px;
    opacity: 0.95;
}

.cta-box .btn {
    margin-bottom: 25px;
}

.cta-features {
    display: flex;
    justify-content: center;
    gap: 30px;
}

.cta-feature {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    opacity: 0.9;
}

.cta-feature i {
    font-size: 16px;
}

.trial-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    z-index: var(--z-modal-backdrop, 1040);
}

.trial-modal.show {
    display: flex;
}

/* Corporate Page Refinement */
.page-header {
    padding: 160px 0 88px;
    background: linear-gradient(135deg, #1e1e1e 0%, #172638 55%, #22354d 100%);
}

.page-header-background {
    opacity: 0.08;
    filter: grayscale(1);
}

.page-title {
    font-size: clamp(2.6rem, 4.8vw, 4.2rem);
    text-shadow: none;
}

.page-subtitle,
.breadcrumb,
.breadcrumb a,
.breadcrumb span {
    color: rgba(255, 255, 255, 0.76);
    text-shadow: none;
}

.breadcrumb i,
.overview-badge i,
.stat-box i,
.visual-card i,
.vision-icon-large,
.pillar-icon,
.feature-icon-wrapper,
.tech-icon,
.step-icon,
.contact-icon,
.quote-icon,
.usecase-card i,
.app-feature-item i,
.cta-feature i,
.download-note i {
    display: none !important;
}

.stat-box,
.visual-card,
.vision-main-card,
.pillar-card,
.overview-feature-card,
.tech-stack-card,
.process-step,
.usecase-card,
.cta-box {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 36, 0.08);
    border-radius: 22px;
    box-shadow: 0 16px 36px rgba(15, 23, 36, 0.06);
}

.stat-box:hover,
.visual-card:hover,
.overview-feature-card:hover,
.usecase-card:hover,
.tech-stack-card:hover,
.process-step:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 44px rgba(15, 23, 36, 0.08);
}

.stat-box,
.visual-card {
    text-align: left;
}

.visual-card,
.vision-main-card,
.pillar-card,
.overview-feature-card,
.tech-stack-card,
.usecase-card,
.cta-box {
    padding: 32px;
}

.overview-badge {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 36, 0.08);
    background: #eef3f8;
    color: #23406a;
}

.overview-badge span {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.tech-list li,
.app-feature-item,
.cta-feature {
    display: flex;
    align-items: flex-start;
    gap: 0;
}

.tech-list li::before,
.app-feature-item::before,
.cta-feature::before,
.download-note::before {
    content: '';
    width: 28px;
    height: 1px;
    margin: 12px 14px 0 0;
    background: #8f8f8f;
    flex-shrink: 0;
}

.download-note {
    display: flex;
    align-items: flex-start;
}

.store-button {
    padding: 18px 22px;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 36, 0.12);
    border-radius: 18px;
    box-shadow: none;
}

.store-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(15, 23, 36, 0.08);
}

.store-button i {
    display: none !important;
}

@media (max-width: 968px) {
    .page-header {
        padding: 138px 0 76px;
    }

    .visual-card,
    .vision-main-card,
    .pillar-card,
    .overview-feature-card,
    .tech-stack-card,
    .usecase-card,
    .cta-box {
        padding: 26px;
    }
}

/* Technology section readability on light backgrounds */
.did-technology-section {
    background: #ffffff;
    color: var(--text-dark);
}

.did-technology-section .section-subtitle {
    color: #23406a;
    background: #eef3f8;
}

.did-technology-section .section-title,
.did-technology-section .tech-overview h3,
.did-technology-section .tech-stack-card h4 {
    color: var(--text-dark);
}

.did-technology-section .tech-overview p,
.did-technology-section .tech-list li {
    color: var(--text-light);
    opacity: 1;
}

/* Strong contrast guard for identity technology section */
.did-technology-section,
.did-technology-section .technology-detail-content,
.did-technology-section .tech-stack-grid,
.did-technology-section .tech-stack-card,
.did-technology-section .tech-list,
.did-technology-section .tech-list li,
.did-technology-section .tech-overview,
.did-technology-section .tech-overview p,
.did-technology-section .tech-stack-card h4,
.did-technology-section .section-title {
    color: #111827 !important;
}

/* Keep Healthcare hero copy readable over the video background */
.did-technology-section.healthcare-section .section-subtitle,
.did-technology-section.healthcare-section .section-title,
.did-technology-section.healthcare-section .tech-overview h3,
.did-technology-section.healthcare-section .tech-overview p {
    color: #ffffff !important;
}

.trial-modal-content {
    background: var(--white);
    color: var(--text-dark);
    border-radius: 16px;
    padding: 28px;
    width: min(92vw, 420px);
    box-shadow: var(--shadow-xl);
    position: relative;
    z-index: var(--z-modal, 1050);
}

.trial-modal-body h3 {
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 10px;
}

.trial-modal-body p {
    font-size: 15px;
    line-height: 1.7;
    color: var(--text-light);
    margin: 0;
}

.trial-modal-actions {
    margin-top: 24px;
    display: flex;
    justify-content: center;
}

.trial-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: transparent;
    border: none;
    font-size: 18px;
    color: var(--text-muted);
    cursor: pointer;
}

.trial-modal-close:hover {
    color: var(--text-dark);
}

/* Responsive Design for Genealogy */
@media (max-width: 968px) {
    .features-grid {
        grid-template-columns: 1fr;
    }
    
    .preservation-content {
        grid-template-columns: 1fr;
    }
    
    .blockchain-features-grid {
        grid-template-columns: 1fr;
    }
    
    .genealogy-usecases-section .usecases-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .getting-started-content {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .genealogy-usecases-section .usecases-grid {
        grid-template-columns: 1fr;
    }
    
    .cta-features {
        flex-direction: column;
        gap: 15px;
    }
}

/* ===== IR Page Styles ===== */

/* Investment Overview Section */
.ir-overview {
    padding: 120px 0;
    background: linear-gradient(135deg, #faf9f7 0%, #ffffff 100%);
}

.ir-overview .container {
    display: flex;
    align-items: center;
    gap: 80px;
}

.overview-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    width: 100%;
    align-items: center;
}

.overview-text {
    flex: 1;
}

.overview-text h2 {
    font-size: 42px;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 20px;
    letter-spacing: -0.5px;
}

.overview-text p {
    font-size: 16px;
    line-height: 1.8;
    color: var(--text-secondary);
    margin-bottom: 30px;
}

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

.overview-highlights li {
    padding: 16px 0;
    border-bottom: 1px solid rgba(15, 23, 36, 0.1);
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.6;
}

.overview-highlights li:last-child {
    border-bottom: none;
}

.overview-highlights strong {
    color: var(--accent-color);
    font-weight: 600;
}

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

.stat-item {
    background: white;
    padding: 32px 24px;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
    text-align: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.stat-item:hover {
    box-shadow: var(--shadow-xl);
    transform: translateY(-4px);
}

.stat-number {
    font-size: 32px;
    font-weight: 700;
    color: var(--accent-color);
    margin-bottom: 8px;
    letter-spacing: -0.5px;
}

.stat-label {
    font-size: 14px;
    color: var(--text-secondary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Business Model Section */
/* 흰색 카드와 대비를 주기 위해 섹션 배경을 light-bg(#faf9f7)로 틴트 처리 */
.ir-business {
    padding: 120px 0;
    background: var(--light-bg);
}

.business-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-top: 60px;
}

.business-card {
    background: linear-gradient(135deg, #faf9f7 0%, #ffffff 100%);
    padding: 40px 32px;
    border-radius: var(--border-radius-lg);
    border: 1px solid rgba(37, 99, 235, 0.1);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.business-card:hover {
    border-color: var(--accent-color);
    box-shadow: 0 20px 40px rgba(37, 99, 235, 0.15);
    transform: translateY(-8px);
}

.business-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 10px;
}

.business-header i {
    font-size: 28px;
    color: var(--accent-color);
    flex-shrink: 0;
}

.business-header h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--primary-color);
    margin: 0;
}

.business-desc {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

.business-revenue {
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid rgba(15, 23, 36, 0.1);
}

.business-revenue strong {
    font-size: 14px;
    color: var(--accent-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
}

/* Milestones Section */
.ir-milestones {
    padding: 120px 0;
    background: linear-gradient(135deg, #faf9f7 0%, #ffffff 100%);
}

.milestone-timeline {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 60px;
    position: relative;
}

.milestone-timeline::before {
    content: '';
    position: absolute;
    top: 30px;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-color) 0%, var(--accent-color) 50%, rgba(37, 99, 235, 0.2) 50%, rgba(37, 99, 235, 0.2) 100%);
    z-index: 0;
    pointer-events: none;
}

.milestone {
    background: white;
    padding: 32px 24px;
    border-radius: var(--border-radius-lg);
    text-align: center;
    position: relative;
    z-index: 1;
    border: 1px solid rgba(15, 23, 36, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.milestone:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}

.milestone-badge {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 16px;
}

.milestone.completed .milestone-badge {
    background: #008250;
    color: white;
}

.milestone.current .milestone-badge {
    background: var(--accent-color);
    color: white;
}

.milestone:not(.completed):not(.current) .milestone-badge {
    background: rgba(15, 23, 36, 0.1);
    color: var(--text-secondary);
}

.milestone h4 {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary-color);
    margin: 12px 0 10px 0;
}

.milestone p {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* Competitive Advantages Section */
.ir-advantages {
    padding: 120px 0;
    background: white;
}

.advantages-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-top: 60px;
}

.advantage-box {
    padding: 40px 32px;
    background: linear-gradient(135deg, #faf9f7 0%, #ffffff 100%);
    border-radius: var(--border-radius-lg);
    border: 1px solid rgba(37, 99, 235, 0.1);
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.advantage-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--accent-color) 0%, #df3131 100%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.advantage-box:hover::before {
    transform: scaleX(1);
}

.advantage-box:hover {
    border-color: var(--accent-color);
    box-shadow: 0 20px 40px rgba(37, 99, 235, 0.15);
    transform: translateY(-8px);
}

.advantage-number {
    font-size: 48px;
    font-weight: 800;
    background: linear-gradient(135deg, var(--accent-color) 0%, #df3131 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 16px;
    display: block;
}

.advantage-box h4 {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary-color);
    margin: 0 0 12px 0;
}

.advantage-box p {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* Responsive Design for IR Page */
@media (max-width: 968px) {
    .overview-content {
        grid-template-columns: 1fr;
        gap: 50px;
    }
    
    .ir-overview .container {
        gap: 40px;
    }
    
    .overview-stats {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .business-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .milestone-timeline {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .milestone-timeline::before {
        display: none;
    }
    
    .advantages-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .ir-overview {
        padding: 80px 0;
    }
    
    .overview-text h2 {
        font-size: 32px;
    }
    
    .overview-stats {
        grid-template-columns: 1fr;
    }
    
    .ir-business {
        padding: 80px 0;
    }
    
    .business-grid {
        grid-template-columns: 1fr;
    }
    
    .ir-milestones {
        padding: 80px 0;
    }
    
    .milestone-timeline {
        grid-template-columns: 1fr;
    }
    
    .ir-advantages {
        padding: 80px 0;
    }
    
    .advantages-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .overview-text h2 {
        font-size: 26px;
    }
    
    .stat-number {
        font-size: 24px;
    }
    
    .overview-highlights li {
        padding: 12px 0;
        font-size: 13px;
    }
    
    .business-card {
        padding: 24px 18px;
    }
    
    .business-header {
        gap: 12px;
    }
    
    .business-header i {
        font-size: 24px;
    }
    
    .business-header h3 {
        font-size: 18px;
    }
    
    .milestone {
        padding: 24px 16px;
    }
    
    .milestone h4 {
        font-size: 16px;
    }
    
    .milestone p {
        font-size: 13px;
    }
    
    .advantage-box {
        padding: 28px 20px;
    }
    
    .advantage-number {
        font-size: 36px;
    }
    
    .advantage-box h4 {
        font-size: 16px;
    }
    
    .advantage-box p {
        font-size: 13px;
    }
}

/* =====================================================================
   Page Header — Force readable text on dark hero
   ===================================================================== */
.page-header .page-title {
    color: #ffffff !important;
    opacity: 1 !important;
    font-weight: 900;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6), 0 0 24px rgba(15, 23, 42, 0.4) !important;
    animation: none !important;
}

.page-header .page-subtitle {
    color: #ffffff !important;
    opacity: 1 !important;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55) !important;
    animation: none !important;
}

.page-header .breadcrumb,
.page-header .breadcrumb a,
.page-header .breadcrumb span {
    color: rgba(255, 255, 255, 0.95) !important;
    opacity: 1 !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
    animation: none !important;
}

.page-header .breadcrumb a {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.page-header .breadcrumb a:hover {
    background: rgba(255, 255, 255, 0.18);
}

/* Keep ceo-page light variant override intact */
body.ceo-page .page-header .page-title,
body.ceo-page .page-header .page-subtitle,
body.ceo-page .page-header .breadcrumb,
body.ceo-page .page-header .breadcrumb a,
body.ceo-page .page-header .breadcrumb span {
    text-shadow: none !important;
}

/* =====================================================================
   About — Company feature grid (6 uniform cards)
   ===================================================================== */
.company-intro-text {
    max-width: 960px;
    margin: 0 auto 56px;
}

.company-intro-text h3 {
    font-size: 26px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.45;
    margin-bottom: 22px;
    letter-spacing: -0.01em;
    word-break: keep-all;
}

.company-intro-text p {
    font-size: 16px;
    line-height: 1.85;
    color: #475569;
    margin-bottom: 18px;
    word-break: keep-all;
}

.company-intro-text p:last-child { margin-bottom: 0; }

.company-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    max-width: 1100px;
    margin: 0 auto;
}

.company-feature-grid .visual-card {
    background: #ffffff;
    border: 1px solid #e6e2db;
    border-radius: 18px;
    padding: 32px 26px;
    text-align: center;
    box-shadow: 0 8px 24px rgba(15, 23, 36, 0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    min-height: 200px;
}

.company-feature-grid .visual-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px rgba(15, 23, 36, 0.12);
    border-color: rgba(37, 99, 235, 0.25);
}

.company-feature-grid .visual-card i {
    font-size: 32px;
    color: #f5821f;
    background: rgba(37, 99, 235, 0.08);
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}

.company-feature-grid .visual-card h4 {
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
    line-height: 1.4;
    word-break: keep-all;
}

.company-feature-grid .visual-card p {
    font-size: 14px;
    line-height: 1.7;
    color: #565656;
    margin: 0;
    word-break: keep-all;
}

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

@media (max-width: 600px) {
    .company-feature-grid {
        grid-template-columns: 1fr;
    }
    .company-feature-grid .visual-card {
        min-height: auto;
        padding: 26px 22px;
    }
}

/* =====================================================================
   News card readability + Healthcare badge contrast (force overrides)
   ===================================================================== */

/* News card — force light background + readable text */
.news-card,
.news-card.text-only,
.news-card.featured.text-only {
    background: #ffffff !important;
    border: 1px solid #e6e2db !important;
    color: #0f172a !important;
}

.news-card .news-content,
.news-card .news-content-only {
    background: transparent !important;
}

.news-card .news-meta,
.news-card .news-source,
.news-card .news-date {
    color: #565656 !important;
}

.news-card .news-source {
    color: #f5821f !important;
    font-weight: 700;
}

.news-card .news-title,
.news-card .news-title a,
.news-card h3 {
    color: #0f172a !important;
}

.news-card .news-title a:hover {
    color: #f5821f !important;
}

.news-card .news-excerpt,
.news-card p {
    color: #475569 !important;
}

.news-card .news-badge {
    background: linear-gradient(135deg, #f5821f 0%, #c96200 100%) !important;
    color: #ffffff !important;
    border: none !important;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.news-card .tag {
    background: #efece6 !important;
    color: #f5821f !important;
    border: 1px solid #d9d4cb !important;
}

/* Healthcare badge — strong contrast on dark video background */
.healthcare-section .section-subtitle,
.did-technology-section.healthcare-section .section-subtitle {
    background: #f5821f !important;
    border: 2px solid #fbb055 !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    letter-spacing: 0.16em !important;
    padding: 8px 18px !important;
    font-size: 13px !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.45);
}

/* =====================================================================
   Remove all icons/emojis sitewide (FontAwesome + emoji backgrounds)
   ===================================================================== */

/* Hide every FontAwesome icon */
i[class*="fa-"],
i.fas, i.far, i.fab, i.fal, i.fad,
.fas, .far, .fab, .fal, .fad {
    display: none !important;
}

/* Hide icon wrappers/backgrounds and collapse the empty space they leave */
.feature-icon-wrapper,
.service-icon,
.hc-card-icon,
.expansion-icon,
.moat-icon,
.advantage-icon,
.stat-box > i,
.brand-story-card > i,
.brand-story-card-head .icon-wrap,
.visual-card > i,
.company-feature-grid .visual-card i,
.overview-badge,
.overview-feature-card .feature-icon-wrapper,
.cta-feature i,
.app-feature-item i,
.download-note i,
.store-button i,
.business-header i,
.advantage-box::before,
.connection-node i,
.partner-logo,
.news-image,
.news-card .news-image,
.btn i,
.btn-primary i,
.btn-outline i,
.btn-secondary i {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
}

/* Trim flex/grid gaps caused by hidden icons */
.app-feature-item,
.cta-feature,
.download-note,
.store-button,
.brand-story-card-head,
.layer-card h3,
.section-header,
.business-header {
    gap: 0 !important;
}

/* Tighten cards that previously reserved icon space */
.visual-card,
.company-feature-grid .visual-card {
    padding-top: 24px !important;
    min-height: auto !important;
}

.overview-feature-card {
    padding-top: 20px !important;
}

.expansion-card,
.moat-card,
.layer-card,
.hc-card,
.brand-story-card {
    padding-top: 28px !important;
}

/* Remove decorative icon list-markers (FontAwesome content via ::before) */
.app-feature-item::before,
.cta-feature::before,
.feature-item::before,
.overview-highlights li::before {
    content: none !important;
    display: none !important;
}

/* =====================================================================
   Strip all pill/tag/badge sub-titles to plain text (sitewide)
   ===================================================================== */
.brand-story-pill-list,
.brand-story-pill-list li,
.brand-story-card-tag,
.brand-story-card-tag-alt,
.brand-story-card-index,
.expansion-tag,
.expansion-card-tag,
.layer-tag,
.moat-tag,
.news-card .tag,
.news-tags .tag,
.tag,
.news-badge,
.patent-status-badge,
.market-tam-label,
.market-sam-label,
.economics-label,
.service-badge,
.feature-tag {
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    list-style: none !important;
    font-weight: 600;
}

/* Layout: pill list becomes inline text with a soft separator */
.brand-story-pill-list {
    display: block !important;
    margin: 8px 0 0 !important;
    padding: 0 !important;
}

.brand-story-pill-list li {
    display: inline !important;
    margin: 0 !important;
}

.brand-story-pill-list li:not(:last-child)::after {
    content: ' · ';
    margin: 0 6px;
    color: #8f8f8f;
    opacity: 0.7;
}

/* News card tags as plain inline labels */
.news-tags {
    display: block !important;
    margin-top: 8px;
}

.news-tags .tag {
    display: inline !important;
    margin-right: 6px;
}

.news-tags .tag:not(:last-child)::after {
    content: ' ·';
    color: #8f8f8f;
    margin-left: 4px;
}

/* Status badges (patent, news featured) as bold inline labels */
.news-badge,
.patent-status-badge,
.service-badge {
    display: inline-block !important;
}

/* =====================================================================
   News card — keep "주요 뉴스" badge above other text (no overlap)
   ===================================================================== */
.news-card,
.news-card.text-only,
.news-card.featured.text-only {
    position: relative !important;
    padding-top: 60px !important;
}

.news-card .news-content,
.news-card .news-content-only {
    position: relative !important;
    padding-top: 8px !important;
}

.news-card .news-badge {
    position: absolute !important;
    top: 18px !important;
    left: 20px !important;
    display: inline-flex !important;
    padding: 6px 14px !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #f5821f 0%, #c96200 100%) !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em;
    z-index: 2 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

/* Ensure meta sits below the badge with breathing room */
.news-card .news-meta {
    margin-top: 6px !important;
    padding-top: 4px;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* =====================================================================
   Hide "주요 뉴스" badge and collapse the reserved space
   ===================================================================== */
.news-badge {
    display: none !important;
}

.news-card,
.news-card.text-only,
.news-card.featured.text-only {
    padding-top: 28px !important;
}

.news-card .news-content,
.news-card .news-content-only {
    padding-top: 0 !important;
}

.news-card .news-meta {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* =====================================================================
   Final universal strip — every pill/tag/chip inside cards = plain text
   ===================================================================== */
.visual-card .brand-story-pill-list li,
.brand-story-card .brand-story-pill-list li,
.expansion-card .expansion-stats li,
.layer-card .layer-tag,
.moat-card .moat-tag,
.expansion-card .expansion-tag,
.news-tags .tag,
.news-card .tag,
.hc-tags span,
.healthcare-section .hc-tags span,
.app-feature-item span,
.cta-feature span,
.feature-item span,
.feature-tag,
.market-sam-label,
.market-tam-label,
.brand-story-card-tag,
.brand-story-card-tag-alt,
.brand-story-card-index,
.brand-story-pill-list li {
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    list-style: none !important;
    text-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Inline layout with soft separator for tag lists */
.brand-story-pill-list,
.news-tags,
.hc-tags {
    display: block !important;
    padding: 0 !important;
}

.brand-story-pill-list li,
.news-tags .tag,
.hc-tags span {
    display: inline !important;
    margin: 0 !important;
}

.brand-story-pill-list li:not(:last-child)::after,
.news-tags .tag:not(:last-child)::after,
.hc-tags span:not(:last-child)::after {
    content: ' · ';
    margin: 0 6px;
    color: #8f8f8f;
    opacity: 0.7;
}

/* =====================================================================
   Page Header — FORCE solid white text (kill any transparent/gradient fill)
   ===================================================================== */
body .page-header,
body .page-header * {
    -webkit-text-fill-color: initial;
    text-fill-color: initial;
}

body .page-header .page-title,
body .page-header h1,
body .page-header h1.page-title {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-fill-color: #ffffff !important;
    opacity: 1 !important;
    visibility: visible !important;
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    font-weight: 900 !important;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.75), 0 0 32px rgba(15, 23, 42, 0.55) !important;
    animation: none !important;
    transform: none !important;
    filter: none !important;
}

body .page-header .page-subtitle,
body .page-header p.page-subtitle {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    opacity: 1 !important;
    background: none !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7) !important;
    animation: none !important;
    filter: none !important;
}

body .page-header .breadcrumb,
body .page-header .breadcrumb a,
body .page-header .breadcrumb span,
body .page-header .breadcrumb i {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    opacity: 1 !important;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.65) !important;
    animation: none !important;
}

/* Keep ceo-page light override intact */
body.ceo-page .page-header .page-title,
body.ceo-page .page-header .page-subtitle,
body.ceo-page .page-header .breadcrumb,
body.ceo-page .page-header .breadcrumb a,
body.ceo-page .page-header .breadcrumb span {
    color: #151515 !important;
    -webkit-text-fill-color: #151515 !important;
    text-shadow: none !important;
}

/* =====================================================================
   Responsive override for inline repeat(4) / repeat(5) grids
   (about.html Core Values & Business Areas use inline style)
   ===================================================================== */
@media (max-width: 1024px) {
    .company-visual[style*="repeat(5"] {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
    .company-visual[style*="repeat(4"] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 768px) {
    .company-visual[style*="repeat(5"] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 600px) {
    .company-visual[style*="repeat(5"],
    .company-visual[style*="repeat(4"] {
        grid-template-columns: 1fr !important;
    }
}

/* Safety: ensure grid items never overflow their column */
.company-visual > .visual-card {
    min-width: 0;
}

/* =====================================================================
   IR PAGE — Force card visibility (cards were rendering as plain text)
   pages.css가 가장 늦게 로드되므로 여기서 강제 적용. 디자인 변경 X, 가시성만 확보.
   ===================================================================== */

body[data-page="ir"] .market-tam-card,
body[data-page="ir"] .market-sam-card,
body[data-page="ir"] .layer-card,
body[data-page="ir"] .moat-card,
body[data-page="ir"] .stat-item,
body[data-page="ir"] .milestone {
    background: #ffffff !important;
    border: 1px solid #e6e2db !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.05) !important;
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
}

/* Layer cards — keep colored left borders */
body[data-page="ir"] .layer-card                  { border-left: 4px solid #f5821f !important; padding: 26px 24px 22px !important; gap: 12px !important; }
body[data-page="ir"] .layer-card.layer-core       { border-left-color: #ffc300 !important; }
body[data-page="ir"] .layer-card.layer-killer    { border-left-color: #fdb94e !important; }
body[data-page="ir"] .layer-card.layer-future     { border-left-color: #008250 !important; }

/* Moat cards — centered with stronger shadow */
body[data-page="ir"] .moat-card {
    padding: 30px 26px 28px !important;
    text-align: center !important;
    align-items: center !important;
    gap: 12px !important;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.05) !important;
}

/* TAM cards — SAM과 동일한 크기/스타일 */
body[data-page="ir"] .market-tam-card {
    padding: 20px 16px !important;
    gap: 6px !important;
    border-top: 3px solid #d9d4cb !important;
    border-radius: 16px !important;
}

body[data-page="ir"] .market-tam-card.market-tam-highlight {
    background: linear-gradient(135deg, #f5821f 0%, #fdb94e 100%) !important;
    border-color: transparent !important;
    border-top-color: transparent !important;
    color: #ffffff !important;
}

body[data-page="ir"] .market-tam-highlight .market-tam-num,
body[data-page="ir"] .market-tam-highlight .market-tam-label,
body[data-page="ir"] .market-tam-highlight .market-tam-year,
body[data-page="ir"] .market-tam-highlight .market-tam-cagr {
    color: #ffffff !important;
}

body[data-page="ir"] .market-tam-label {
    font-size: 11.5px !important;
    letter-spacing: 0.04em !important;
}

body[data-page="ir"] .market-tam-num {
    font-size: clamp(22px, 2.4vw, 28px) !important;
    line-height: 1.1 !important;
}

/* SAM cards */
body[data-page="ir"] .market-sam-card {
    padding: 20px 16px !important;
    gap: 6px !important;
    border-top: 3px solid #d9d4cb !important;
}

body[data-page="ir"] .market-sam-card.market-sam-priority {
    border-top-color: #df3131 !important;
    background: linear-gradient(180deg, #fff5f5 0%, #ffffff 100%) !important;
}

/* Stat-item — centered text */
body[data-page="ir"] .stat-item {
    padding: 28px 20px !important;
    text-align: center !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Milestone — centered with timeline */
body[data-page="ir"] .milestone {
    padding: 26px 18px !important;
    text-align: center !important;
    align-items: center !important;
}

/* Force grid layouts */
body[data-page="ir"] .market-tam-grid     { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 18px !important; margin: 24px 0 48px !important; }
body[data-page="ir"] .market-sam-grid     { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 12px !important; margin-bottom: 22px !important; }
body[data-page="ir"] .layer-grid          { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 20px !important; }
body[data-page="ir"] .moat-grid           { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 22px !important; }

/* Competitive table — force visible thead and borders */
body[data-page="ir"] .competitive-table-wrap {
    background: #ffffff !important;
    border: 1px solid #e6e2db !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06) !important;
    overflow-x: auto !important;
}

body[data-page="ir"] .competitive-table {
    width: 100% !important;
    border-collapse: collapse !important;
}

body[data-page="ir"] .competitive-table thead th {
    background: #1e1e1e !important;
    color: #ffffff !important;
    padding: 15px 18px !important;
    text-align: left !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}

body[data-page="ir"] .competitive-table tbody td {
    padding: 16px 18px !important;
    border-bottom: 1px solid #efece6 !important;
    color: #1e1e1e !important;
    line-height: 1.6 !important;
    vertical-align: top !important;
}

body[data-page="ir"] .competitive-table tbody tr.competitive-row-chon { background: #1e1e1e !important; }
body[data-page="ir"] .competitive-table tbody tr.competitive-row-chon td { color: #ffffff !important; border-bottom: none !important; }

/* Responsive */
@media (max-width: 1024px) {
    body[data-page="ir"] .market-tam-grid { grid-template-columns: 1fr !important; }
    body[data-page="ir"] .market-sam-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    body[data-page="ir"] .layer-grid      { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    body[data-page="ir"] .moat-grid       { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 640px) {
    body[data-page="ir"] .market-sam-grid,
    body[data-page="ir"] .layer-grid,
    body[data-page="ir"] .moat-grid {
        grid-template-columns: 1fr !important;
    }
}

/* =====================================================================
   IR Download CTA
   ===================================================================== */
.ir-download {
    padding: 80px 0 100px;
    background: var(--light-bg);
}

.ir-download-card {
    max-width: 880px;
    margin: 0 auto;
    background: linear-gradient(135deg, #1e1e1e 0%, #1e3a5f 100%);
    border-radius: 20px;
    padding: 48px 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.18);
    color: #ffffff;
}

.ir-download-text h3 {
    font-size: clamp(22px, 2.4vw, 28px);
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 10px;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.ir-download-text p {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.78);
    margin: 0;
    line-height: 1.6;
    word-break: keep-all;
}

.ir-download-btn {
    flex-shrink: 0;
    background: #ffffff !important;
    color: #1e1e1e !important;
    border: none !important;
    padding: 16px 28px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s, box-shadow 0.2s;
    white-space: nowrap;
    cursor: pointer;
}

.ir-download-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22);
    background: #faf9f7 !important;
    color: #1e1e1e !important;
}

@media (max-width: 768px) {
    .ir-download-card {
        flex-direction: column;
        text-align: center;
        padding: 36px 28px;
        gap: 24px;
    }
    .ir-download-btn {
        width: 100%;
        justify-content: center;
    }
}