/* HUMECCA Website - Complete Replit Clone */
@font-face {
    font-family: 'Pretendard';
    font-weight: 800;
    font-display: block;
    src: local('Pretendard ExtraBold'), url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/packages/pretendard/dist/web/static/woff2/Pretendard-ExtraBold.woff2') format('woff2');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 700;
    font-display: block;
    src: local('Pretendard Bold'), url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/packages/pretendard/dist/web/static/woff2/Pretendard-Bold.woff2') format('woff2');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 600;
    font-display: block;
    src: local('Pretendard SemiBold'), url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/packages/pretendard/dist/web/static/woff2/Pretendard-SemiBold.woff2') format('woff2');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 500;
    font-display: block;
    src: local('Pretendard Medium'), url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/packages/pretendard/dist/web/static/woff2/Pretendard-Medium.woff2') format('woff2');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 400;
    font-display: block;
    src: local('Pretendard Regular'), url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/packages/pretendard/dist/web/static/woff2/Pretendard-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 300;
    font-display: block;
    src: local('Pretendard Light'), url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/packages/pretendard/dist/web/static/woff2/Pretendard-Light.woff2') format('woff2');
}

/* CSS Variables */
:root {
    --bg-white: #ffffff;
    --bg-gray-50: #f8fafc;
    --text-main: #0f172a;
    --text-sub: #475569;
    --accent: #E94D36;
    --accent-hover: #d93d2b;
    --border-light: #e2e8f0;
    --footer-bg: #0f172a;
}

/* Theme Color Overrides */
.theme-green {
    --accent: #03C75A;
    --accent-hover: #02b351;
}

.theme-blue {
    --accent: #2563eb;
    --accent-hover: #1d4ed8;
}

/* Reset & Base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
    color: #0f172a;
    line-height: 1.6;
}

.container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 80px;
}

/* Primary Color (Red) */
:root {
    --primary-red: #EF4444;
    --dark-navy: #1a237e;
    --border-gray: #e2e8f0;
}

/* Header - Sticky */
.header {
    position: sticky;
    top: 0;
    z-index: 9999;
    background: white;
    border-bottom: 1px solid var(--border-gray);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    overflow: visible !important;
}

.header-container {
    display: flex;
    align-items: center;
    height: 80px;
    overflow: visible !important;
}

.nav {
    height: 100%;
}

.header-buttons {
    display: flex;
    gap: 12px;
    margin-left: auto;
}

/* Logo */
.logo-text {
    font-family: 'Outfit', sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: var(--primary-red);
    text-decoration: none;
    letter-spacing: -1px;
}

.logo-text:hover {
    opacity: 0.9;
}



/* Navigation */
.nav {
    display: flex;
    margin: 0 auto;
    height: 100%;
}

/* Fix for Loader Layout Shift */
/* Fix for Loader Layout Shift */
#header-placeholder {
    min-height: 80px;
    display: block;
}

@media (max-width: 768px) {
    #header-placeholder {
        min-height: 60px;
    }
}

.nav-list {
    display: flex;
    /* Removed gap: 36px to prevent hover dead zones */
    height: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ... (Existing Nav Item styles) ... */

/* Hero Slider Styles */
.hero-slider-stack {
    display: grid;
    grid-template-areas: "stack";
    align-items: center;
    width: 100%;
}

.hero-slide {
    grid-area: stack;
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    pointer-events: none;
}

.hero-slide.active {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
    z-index: 10;
}

.nav-item {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    /* Add padding here instead of gap in list */
    padding: 0 18px;
}

.nav-link {
    font-weight: 500;
    font-size: 14px;
    color: #334155;
    text-decoration: none;
    padding: 10px 0;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s;
    white-space: nowrap;
}

.nav-link:hover {
    color: var(--primary-red);
}

.nav-link .fa-chevron-down {
    font-size: 10px;
    opacity: 0.7;
}

/* Dropdown Menu - Enhanced to prevent ghosting */
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    /* Left aligned as requested */
    transform: none;
    /* Remove center transform */
    background: white;
    border: 1px solid var(--border-gray);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
    padding: 8px;
    /* CRITICAL: Start completely hidden */
    display: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    min-width: 280px;
    z-index: 10000;
    margin-top: 10px;
    /* Spacing from header */
}

/* Invisible bridge to prevent menu from disappearing */
.dropdown-menu::before {
    content: '';
    position: absolute;
    top: -20px;
    /* Extend upwards to overlap with nav-item */
    left: 0;
    width: 100%;
    height: 20px;
    background: transparent;
}

/* Show dropdown on hover */
/* Show dropdown on hover or when active */
.nav-item:hover>.dropdown-menu,
.dropdown-menu.show {
    display: block;
    opacity: 1;
    visibility: visible;
    pointer-events: auto !important;
}

/* Fix for right-aligned menus (prevent off-screen) */
.nav-item:nth-last-child(1) .dropdown-menu,
.nav-item:nth-last-child(2) .dropdown-menu {
    left: auto;
    right: 0;
    transform: none;
}

/* Ensure Mega Menus on the right don't overflow */
.nav-item:nth-last-child(1) .mega-menu,
.nav-item:nth-last-child(2) .mega-menu,
.nav-item:nth-last-child(3) .mega-menu {
    left: auto;
    right: 0;
    transform: none;
}

.dropdown-item {
    display: flex;
    align-items: start;
    gap: 12px;
    padding: 12px;
    border-radius: 8px;
    text-decoration: none;
    color: #334155;
    transition: background 0.15s;
}

.dropdown-item:hover {
    background: #f8fafc;
}

.dropdown-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(239, 68, 68, 0.1);
    color: var(--primary-red);
    font-size: 16px;
    flex-shrink: 0;
}

.dropdown-text {
    flex: 1;
}

.dropdown-title {
    display: block;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 2px;
    color: #0f172a;
}

.dropdown-desc {
    display: block;
    font-size: 12px;
    color: #64748b;
    line-height: 1.4;
}

/* Mega Menu (Cloud) */
.mega-menu {
    min-width: 500px;
    /* Increased by ~20% */
}

/* ... (Existing Mega Menu styles) ... */

/* Hero Arrow Styles */
/* Hero Arrow Styles - Updated for Flex Layout */
.hero-arrow {
    position: static;
    /* No longer absolute */
    width: 32px;
    /* Small size */
    height: 32px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(4px);
    margin: 0;
}

.hero-arrow:hover {
    background: white;
    color: var(--primary-red);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
}

/* Remove absolute positioning classes as they are no longer needed */
.hero-arrow.prev,
.hero-arrow.next {
    left: auto;
    right: auto;
}

/* Term Modal Styles (More Premium) */
.term-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    z-index: 20000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.term-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.term-modal {
    background: white;
    width: 90%;
    max-width: 800px;
    border-radius: 20px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    transform: translateY(20px);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    max-height: 85vh;
}

.term-modal-overlay.active .term-modal {
    transform: translateY(0);
}

.term-header {
    background: white;
    padding: 24px 30px;
    border-bottom: 1px solid #f3f4f6;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.term-header h3 {
    font-size: 20px;
    font-weight: 700;
    color: #111827;
}

.term-body {
    padding: 30px;
    overflow-y: auto;
    font-size: 15px;
    line-height: 1.7;
    color: #4b5563;
    background: #f9fafb;
}

.term-close-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #f3f4f6;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    color: #4b5563;
}

.term-close-btn:hover {
    background: #e5e7eb;
    color: #111827;
}

.mega-section-title {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 12px 0 6px 12px;
}

.mega-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
}

.mega-grid .dropdown-item {
    padding: 8px 10px;
}

.mega-grid .dropdown-icon {
    width: 26px;
    height: 26px;
    font-size: 13px;
}

.mega-grid .dropdown-title {
    font-size: 12px;
}

.mega-cta {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border-gray);
}

.mega-cta a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    background: var(--primary-red);
    color: white;
    padding: 12px 20px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: background 0.2s;
}

.mega-cta a:hover {
    background: #dc2626;
}

.mega-cta .fa-external-link-alt {
    font-size: 12px;
}

/* Buttons */
.header-buttons {
    display: flex;
    gap: 12px;
}

/* Logo */
.logo-link img {
    height: 40px;
    width: auto;
    /* Prevent CLS (Cumulative Layout Shift) */
    min-width: 140px;
    aspect-ratio: 140 / 40;
    display: block;
    object-fit: contain;
    object-position: left center;
}

/* Navigation */
.nav {
    display: flex;
    margin: 0 auto;
}

/* ... (skip to btn) ... */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
    cursor: pointer;
    border: none;
}

.btn-outline {
    border: 1px solid var(--border-gray);
    color: #334155;
    background: white;
}

.btn-outline:hover {
    background: #f8fafc;
}

.hero-btn-outline {
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    background: rgba(255, 255, 255, 0.05);
    /* Glassy */
    backdrop-filter: blur(4px);
}

.hero-btn-outline:hover {
    background: white;
    color: #0f172a;
    border-color: white;
}

.hero-dots {
    display: none !important;
}

.btn-primary {
    background: var(--primary-red);
    color: white;
}

.btn-primary:hover {
    background: #dc2626;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
    transform: translateY(-1px);
}

/* Hero Section */
/* Hero Section - Replit Clone */
.hero-section {
    position: relative;
    min-height: 650px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    overflow: hidden;
    /* Cybernetic Space Background */
    background: url('images/hero_bg_cyber.png') no-repeat center center;
    background-size: cover;
    background-attachment: fixed;
    /* Parallax feel */
    padding: 40px 0 20px 0;
}

.hero-bg-overlay {
    position: absolute;
    inset: 0;
    /* Dark gradient for text readability against 3D bg */
    background: linear-gradient(to right, rgba(10, 15, 30, 0.9) 0%, rgba(10, 15, 30, 0.7) 50%, rgba(10, 15, 30, 0.3) 100%);
    opacity: 1;
}

#hero-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    /* Above bg (0), below content (10) */
    pointer-events: none;
}

.subpage-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

/* Ensure hero contents are above canvas */
.idc-hero,
.sw-hero,
.cloud-hero,
.sub-visual {
    position: relative;
    /* Anchor for absolute canvas */
    background-color: transparent;
    /* Allow canvas if bg is on wrapper? No, canvas is on TOP of bg color usually. */
}

.idc-hero>.idc-container,
.sw-hero>.container,
.cloud-hero>.container,
.sub-visual>.container {
    position: relative;
    z-index: 10;
    /* Above canvas */
}

/* Container alignment handled by base .container class */

.hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    position: relative;
    z-index: 10;
    align-items: start;
    justify-items: start;
    width: 100%;
    margin-bottom: 40px;
}

@media (min-width: 1024px) {
    .hero-grid {
        grid-template-columns: 1fr 400px;
        gap: 60px;
    }
}

@media (min-width: 1280px) {
    .hero-content {
        margin-left: -137px;
    }

    .glass-card {
        margin-left: auto;
        margin-right: -98px;
    }
}

.hero-content {
    color: white;
    text-align: left;
    margin-left: 0;
    padding-left: 0;
}

.hero-slider-stack {
    text-align: left;
}

.hero-slide {
    text-align: left;
}

.hero-badge {
    display: inline-block;
    padding: 6px 16px;
    background: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 99px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 24px;
}

.hero-title {
    font-size: 32px;
    /* Smaller default for mobile */
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 24px;
}

@media (min-width: 480px) {
    .hero-title {
        font-size: 40px;
    }
}

@media (min-width: 768px) {
    .hero-title {
        font-size: 56px;
    }
}

.hero-buttons {
    display: flex;
    gap: 16px;
    margin-top: 32px;
}

/* Cutting-Edge Glass Card Design */
.glass-card {
    background: rgba(15, 23, 42, 0.65);
    /* Deep dark blue-gray */
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-top: 2px solid rgba(239, 68, 68, 0.6);
    /* Red Neon Top */
    box-shadow:
        0 25px 50px -12px rgba(0, 0, 0, 0.5),
        /* Deep Shadow */
        0 0 40px rgba(239, 68, 68, 0.15),
        /* Subtle Red Glow */
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    /* Inner Highlight */
    border-radius: 24px;
    padding: 24px 32px;
    /* Reduced vertical padding from 32px */
    width: 320px;
    /* Fixed width for sleek profile */
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    height: fit-content;
    /* Ensure it wraps content tightly */
}

/* Shine effect overlay */
.glass-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
    transform: skewX(-15deg);
    transition: 0.5s;
    pointer-events: none;
}

.glass-card:hover::before {
    left: 100%;
    transition: 0.7s;
}

@media (max-width: 480px) {
    .glass-card {
        width: 100% !important;
        max-width: 360px;
        padding: 24px 20px;
        /* Squeeze padding slightly */
    }
}

/* Quick Contact Grid (Mobile Stack Fix) */
.quick-contact-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

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

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

/* Fix Homepage Stats Overlap */
@media (max-width: 768px) {
    .stats-container {
        margin-top: 120px !important;
        /* Push it down from Glass Card */
        padding-top: 20px;
    }
}

@media (max-width: 480px) {
    .stats-container {
        margin-top: 260px !important;
        /* Aggressive push for mobile */
    }
}

/* =========================================
   Responsive Grid Fixes (Why Choose Us & IDC Intro)
   ========================================= */

/* Why Choose Us Grid (Index) */
.why-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    max-width: 1150px;
    margin: 0 auto;
}

@media (max-width: 900px) {
    .why-grid {
        grid-template-columns: 1fr;
        /* Stack vertically on tablet/mobile */
        padding: 0 20px;
    }
}

/* IDC Intro Responsive Fixes */
.infra-grid,
.sec-grid,
.svc-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr) !important;
    gap: 20px;
}

.cert-flex {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Tablet & Desktop overrides */
@media (min-width: 768px) {

    .infra-grid,
    .sec-grid,
    .svc-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .cert-flex {
        flex-direction: row;
        flex-wrap: wrap;
    }
}

@media (min-width: 1024px) {

    .infra-grid,
    .svc-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .sec-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

/* Prevent text vertical wrapping squashing */
.why-card h3,
.why-card p,
.infra-card h3,
.infra-card p,
.sec-box h4,
.sec-box li,
.svc-title,
.svc-desc {
    word-break: keep-all;
    overflow-wrap: break-word;
}

.glass-card h3 {
    color: #ffffff;
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 6px;
    letter-spacing: -0.5px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.glass-card>p {
    color: #94a3b8;
    font-size: 14px;
    margin-bottom: 24px;
    font-weight: 500;
}

/* List container */
#quick-links-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.quick-link-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 16px;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.quick-link-item:hover {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.4);
    transform: translateX(6px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.1);
}

.quick-link-icon-box {
    width: 42px;
    height: 42px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #cbd5e1;
    font-size: 18px;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.05);
    flex-shrink: 0;
}

.quick-link-item:hover .quick-link-icon-box {
    background: #EF4444;
    color: white;
    border-color: #EF4444;
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.4);
}

.quick-link-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.quick-link-title {
    color: white;
    font-weight: 700;
    font-size: 15px;
}

.quick-link-desc {
    color: #94a3b8;
    font-size: 12px;
    font-weight: 400;
}

.quick-link-item i.fa-chevron-right {
    color: rgba(255, 255, 255, 0.2);
    font-size: 12px;
    transition: all 0.3s;
}

.quick-link-item:hover i.fa-chevron-right {
    color: #EF4444;
    transform: translateX(3px);
}

.btn-white-full {
    display: block;
    width: 100%;
    background: #f5f5f5;
    color: #1a1a1a;
    text-align: center;
    padding: 14px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.2s;
    margin-top: 18px;
}

.btn-white-full:hover {
    background: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.text-primary {
    color: var(--primary-red);
}



.hero-content .badge {
    display: inline-block;
    padding: 6px 16px;
    background: rgba(239, 68, 68, 0.9);
    color: white;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 20px;
}

.hero-content h1 {
    font-size: 60px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 24px;
}

.hero-content p {
    font-size: 20px;
    color: #cbd5e1;
    margin-bottom: 30px;
    max-width: 600px;
}

/* Quick Menu Cards */
.quick-menu {
    padding: 80px 0;
    background: white;
}

.quick-menu h2 {
    text-align: center;
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 50px;
}

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

.quick-card {
    background: white;
    border: 1px solid var(--border-gray);
    border-radius: 16px;
    padding: 32px;
    text-align: center;
    transition: all 0.3s;
    cursor: pointer;
}

.quick-card:hover {
    border-color: var(--primary-red);
    box-shadow: 0 8px 24px rgba(239, 68, 68, 0.15);
    transform: translateY(-4px);
}

.quick-card .icon {
    font-size: 48px;
    color: var(--primary-red);
    margin-bottom: 20px;
}

.quick-card h3 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 12px;
}

.quick-card p {
    font-size: 14px;
    color: #64748b;
}

/* Service Grid */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
    margin: 60px 0;
}

.service-card {
    background: white;
    border: 1px solid var(--border-gray);
    border-radius: 12px;
    padding: 28px;
    transition: all 0.3s;
}

.service-card:hover {
    border-color: var(--primary-red);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.service-icon {
    width: 48px;
    height: 48px;
    background: rgba(239, 68, 68, 0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-red);
    font-size: 24px;
    margin-bottom: 16px;
}

.service-card h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 12px;
}

.service-card p {
    font-size: 14px;
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 16px;
}

.service-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--primary-red);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
}

/* Pricing Cards */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 32px;
}

.plan-card {
    border: 2px solid var(--border-gray);
    border-radius: 16px;
    padding: 40px;
    background: white;
    position: relative;
    transition: all 0.3s;
}

.plan-card:hover {
    border-color: var(--primary-red);
    box-shadow: 0 12px 32px rgba(239, 68, 68, 0.15);
}

.plan-card.popular {
    border-color: var(--primary-red);
    box-shadow: 0 8px 24px rgba(239, 68, 68, 0.2);
    /* transform: scale(1.05); Removed per user request */
    z-index: 10;
}

.plan-card .badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary-red);
    color: white;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.plan-card h3 {
    font-size: 20px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 20px;
}

.plan-card .price {
    text-align: center;
    margin: 24px 0;
}

.plan-card .price .amount {
    font-size: 42px;
    font-weight: 800;
    color: var(--primary-red);
}

.plan-card .price .period {
    font-size: 14px;
    color: #94a3b8;
}

.plan-card ul {
    list-style: none;
    margin-bottom: 32px;
}

.plan-card ul li {
    padding: 12px 0;
    border-bottom: 1px solid #f1f5f9;
    font-size: 14px;
    color: #475569;
    display: flex;
    align-items: center;
    gap: 10px;
}

.plan-card ul li i {
    color: var(--primary-red);
}

/* Footer */
.footer-new {
    background: #1a1a2e;
    color: #cbd5e1;
    padding: 60px 0 40px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr auto 300px auto 2fr;
    gap: 40px;
    align-items: start;
}

.separator {
    width: 1px;
    background: #334155;
    align-self: stretch;
    min-height: 200px;
}

.footer-new h3 {
    color: white;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 16px;
}

.footer-new h4 {
    color: #94a3b8;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 12px;
}

.footer-phone {
    display: block;
    font-size: 32px;
    font-weight: 700;
    color: white;
    text-decoration: none;
    margin-bottom: 16px;
}

.footer-phone:hover {
    color: var(--primary-red);
}

.footer-new a {
    color: #cbd5e1;
    text-decoration: none;
}

.footer-new a:hover {
    color: white;
    text-decoration: underline;
}

.footer-links {
    list-style: none;
    margin-top: 16px;
}

.footer-links li {
    margin-bottom: 8px;
}

/* Responsive */
@media (max-width: 1024px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .separator {
        display: none;
    }

    .nav {
        display: none;
    }

    .mobile-menu-btn {
        display: block;
        font-size: 24px;
        color: #334155;
        background: none;
        border: none;
        cursor: pointer;
    }

    .hero-content h1 {
        font-size: 40px;
    }
}

@media (min-width: 1025px) {
    .mobile-menu-btn {
        display: none;
    }
}

/* Utility Classes */
.text-center {
    text-align: center;
}

.mb-4 {
    margin-bottom: 16px;
}

.mt-4 {
    margin-top: 16px;
}

.py-12 {
    padding-top: 48px;
    padding-bottom: 48px;
}

.py-16 {
    padding-top: 64px;
    padding-bottom: 64px;
}

.section {
    padding: 80px 0;
}

.bg-white {
    background: white;
}

.bg-gray-50 {
    background: #f8fafc;
}

/* =========================================
   Centralized Styles from Cloud Sub-pages
   ========================================= */

/* --- Styles from sub_cloud_intro.html --- */

/* Cloud Sub-Page Layout */
/* Old Cloud Hero Removed */

.cloud-hero .container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

.cloud-hero .badge {
    display: inline-block;
    font-size: 12px;
    color: #EF4444;
    font-weight: 600;
    margin-bottom: 8px;
}

.cloud-hero h1 {
    color: #1f2937;
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 6px;
}

.cloud-hero p {
    color: #6b7280;
    font-size: 14px;
}

/* Two Column Layout */
.cloud-layout {
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    gap: 60px;
    padding: 60px 80px;
    /* Align with Header Container (Logo) */
    align-items: flex-start;
}

/* Sidebar Wrapper */
.cloud-sidebar {
    width: 250px;
    flex-shrink: 0;
    position: sticky;
    /* Keeps menu visible while scrolling if height permits */
    top: 100px;
    z-index: 10;
}

/* Sidebar Menu List */
.sidebar-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-menu li {
    margin-bottom: 6px;
}

/* Sidebar Links */
.sidebar-menu li a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-radius: 10px;
    color: #111827;
    /* Changed from Gray to Black per request */
    font-weight: 600;
    font-size: 15px;
    transition: all 0.2s ease;
    text-decoration: none;
}

/* Hover State */
.sidebar-menu li a:hover {
    background-color: #f3f4f6;
    /* Gray-100 */
    color: #111827;
    /* Gray-900 */
}

/* Active State (Red Button Style as requested) */
.sidebar-menu li a.active {
    background-color: #dc2626;
    /* Red-600 */
    color: white !important;
    box-shadow: 0 4px 10px rgba(220, 38, 38, 0.25);
}

.sidebar-menu li a i {
    width: 24px;
    text-align: center;
    font-size: 16px;
    transition: color 0.2s;
}

.sidebar-menu li a.active i {
    color: white !important;
}

/* Main Content Area */
.cloud-content {
    flex: 1;
    min-width: 0;
    /* Prevent overflow */
    width: 100%;
    /* For full width within flex item */
}

/* Mobile Responsiveness */
@media (max-width: 1024px) {
    .cloud-layout {
        flex-direction: column;
        padding: 40px 20px;
        gap: 30px;
    }

    .cloud-sidebar {
        width: 100%;
        position: static;
        margin-bottom: 0;
    }

    .sidebar-menu {
        display: flex;
        overflow-x: auto;
        padding-bottom: 10px;
        gap: 10px;
    }

    .sidebar-menu li {
        min-width: fit-content;
        margin-bottom: 0;
    }

    .sidebar-menu li a {
        white-space: nowrap;
    }
}

/* ==========================================================================
   Restored Cloud Content Styles (Typography & Spacing)
   ========================================================================== */
.cloud-content {
    flex: 1;
    min-width: 0;
    font-size: 16px;
    line-height: 1.75;
    color: #334155;
    /* Slate-700 for good readability */
}

/* Headings within content */
.cloud-content h2,
.cloud-content .content-header h2 {
    font-size: 30px;
    font-weight: 800;
    color: #0f172a;
    /* Slate-900 */
    margin-bottom: 16px;
    letter-spacing: -0.02em;
}

.cloud-content h3 {
    font-size: 22px;
    font-weight: 700;
    color: #1e293b;
    margin-top: 40px;
    margin-bottom: 16px;
}

.cloud-content p {
    margin-bottom: 16px;
}

/* Adjust layout gap slightly to ensure content isn't squeezed */
.cloud-layout {
    gap: 50px;
}

/* Global Table Styles (Restored) */
.cloud-content table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 30px 0 50px;
    font-size: 14px;
    border-top: 2px solid #334155;
    /* Dark top border for emphasis */
}

.cloud-content th {
    background-color: #f8fafc;
    color: #0f172a;
    font-weight: 700;
    padding: 16px;
    border-bottom: 1px solid #cbd5e1;
    text-align: center;
    white-space: nowrap;
}

.cloud-content td {
    padding: 16px;
    border-bottom: 1px solid #e2e8f0;
    color: #334155;
    text-align: center;
    background: white;
    vertical-align: middle;
}

.cloud-content tr:last-child td {
    border-bottom: 1px solid #cbd5e1;
    /* Bottom closure */
}

.cloud-content tr:hover td {
    background-color: #f8fafc;
    /* Hover effect */
}

/* Price Highlight Text */
.cloud-content strong {
    font-weight: 700;
}

/* Tab Button Style Restoration (Ensures tabs look like buttons, not text) */
.engine-tab {
    display: flex;
    gap: 4px;
    margin-bottom: 30px;
    border-bottom: 1px solid #e2e8f0;
    padding: 0 4px;
}

.engine-tab button {
    padding: 12px 24px;
    background: white;
    border: 1px solid #e2e8f0;
    border-bottom: none;
    cursor: pointer;
    font-weight: 600;
    color: #64748b;
    border-radius: 8px 8px 0 0;
    transition: all 0.2s;
    font-family: inherit;
    font-size: 15px;
}

.engine-tab button:hover {
    color: #dc2626;
    background: #fef2f2;
}

.engine-tab button.active {
    background: #dc2626;
    color: white;
    border-color: #dc2626;
}

/* ==========================================================================
   Pricing & Design Updates (User Request)
   ========================================================================== */

/* 1. Pricing Highlight (Logo Color) */
.cloud-content td.price {
    color: #dc2626 !important;
    /* Humecca Red */
    font-weight: 700;
}

.cloud-content .highlight-sub {
    background-color: #f1f5f9;
    color: #334155;
    font-weight: 600;
}

/* 2. Stylish Service Overview (Feature Cards) */
/* Replaces simple text with a modern card grid layout */

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin: 40px 0 60px;
}

.feature-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 32px 24px;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
    /* Soft shadow */
    border-color: #fca5a5;
    /* Red tint border */
}

/* Icon Styling */
.feature-card .icon,
.process-icon-box,
.gen-card img {
    /* Added gen-card img */
    width: 64px;
    height: 64px;
    background: #fef2f2;
    /* Light Red bg */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    color: #dc2626;
    font-size: 24px;
    transition: transform 0.6s ease-in-out, background 0.3s ease, color 0.3s ease;
    /* Smooth 3D spin */
}

/* Override specifics for Gen Card Images causing size issues */
.gen-card img {
    width: auto !important;
    height: 100px !important;
    background: transparent !important;
    border-radius: 0 !important;
    margin-bottom: 15px !important;
}

.feature-card .icon i,
.process-icon-box i {
    transition: color 0.3s ease;
    /* Ensure icon color animates smoothly */
}

.feature-card:hover .icon,
.feature-card:hover .process-icon-box,
.process-step:hover .process-icon-box,
.gen-card:hover img {
    /* added hover target */
    transform: rotateY(360deg) scale(1.1);
    /* 3D Spin Effect */
    background: #dc2626;
    color: white !important;
    /* Force White Icon */
}

/* Additional Global Rotation Rules for non-standard structures */
.feature-card:hover i,
.info-card:hover i {
    transform: rotateY(360deg);
    transition: transform 0.6s ease;
    display: inline-block;
    /* Ensure transform works */
}

/* IDC Page Icon Rotations */
.infra-card:hover .infra-icon,
.sec-box:hover h4 i,
.cert-item:hover .cert-icon,
.svc-card:hover .svc-icon {
    transform: rotateY(360deg);
    transition: transform 0.6s ease;
    display: inline-block;
}

/* FIX: Gen Card Image shouldn't get red background */
.gen-card:hover img {
    background: transparent !important;
}

.feature-card:hover .icon i,
.process-step:hover .process-icon-box i {
    color: white !important;
    /* Explicitly target child icon */
}

/* Typography for Features */
.feature-card h3 {
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 12px;
}

.feature-card p {
    font-size: 15px;
    color: #64748b;
    line-height: 1.6;
}

/* Content Header Tweaks */
.content-header {
    margin-bottom: 40px;
}

.content-header p {
    font-size: 18px;
    line-height: 1.8;
    color: #475569;
}

/* =========================================
   New Intro Page Design Styles (User Request)
   ========================================= */

/* Server Generation Cards */
.gen-grid {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.gen-card {
    flex: 1;
    min-width: 250px;
    background: white;
    padding: 25px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease, border-color 0.2s;
    position: relative;
    overflow: hidden;
}

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

.gen-card h4 {
    font-size: 18px;
    margin-bottom: 12px;
    font-weight: 700;
}

.gen-card p {
    font-size: 14px;
    color: #64748b;
    line-height: 1.6;
    margin: 0;
}

.gen-card.gen-1 {
    border-top: 4px solid #94a3b8;
}

.gen-card.gen-2 {
    border-top: 4px solid #3b82f6;
}

.gen-card.gen-3 {
    border-top: 4px solid #dc2626;
}

/* Key Function Boxes */
.func-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    margin-bottom: 40px;
}

.func-box {
    background: white;
    padding: 25px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
}

.func-box:hover {
    border-color: #94a3b8;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.func-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #f1f5f9;
}

.func-icon {
    width: 40px;
    height: 40px;
    background: #f1f5f9;
    color: #475569;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.func-box h4 {
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

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

.func-list li {
    font-size: 14px;
    color: #64748b;
    margin-bottom: 8px;
    padding-left: 14px;
    position: relative;
    line-height: 1.5;
}

.func-list li::before {
    content: "•";
    color: #3b82f6;
    position: absolute;
    left: 0;
    font-weight: bold;
}

/* Related Product Badges */
.related-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.product-badge {
    background: white;
    border: 1px solid #e2e8f0;
    padding: 12px 24px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    color: #475569;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
}

.product-badge:hover {
    border-color: #3b82f6;
    color: #3b82f6;
    background: #f0f9ff;
    transform: translateY(-2px);
}

.product-badge i {
    color: #94a3b8;
    transition: color 0.2s;
}

.product-badge:hover i {
    color: #3b82f6;
}

/* Case Study Box */
.case-study-box {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 30px;
    margin-bottom: 30px;
    display: flex;
    gap: 30px;
    align-items: center;
    flex-wrap: wrap;
}

.case-content {
    flex: 1;
    min-width: 300px;
}

.case-img {
    flex: 1;
    min-width: 300px;
    text-align: center;
    background: #f8fafc;
    padding: 20px;
    border-radius: 12px;
}

.case-content h4 {
    font-size: 18px;
    color: #1e293b;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.case-tag {
    font-size: 12px;
    background: #eff6ff;
    color: #3b82f6;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: 600;
}


/* =========================================
   GLOBAL CLOUD PAGE STYLES (STANDARD)
   Applied to ALL cloud subpages
   ========================================= */

/* Sticky Hero Section - REMOVED sticky to allow scrolling */
/* Sticky Hero Section - REMOVED sticky to allow scrolling */
.cloud-hero {
    position: relative;
    padding: 24px 0 !important;
    /* Explicitly Compact like Right Ref */
    min-height: 0 !important;
    z-index: 1;
    background: #fff5f5;
    /* Pinkish background restored */
    border-bottom: 1px solid #fecaca;
}

/* Hero Container - Left aligned, indented 1.5cm */
.cloud-hero .container {
    padding-left: 60px;
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    position: relative;
    /* Enabled for absolute positioning of hero button */
}

/* Hide Icon Box (2nd div) only */
.cloud-hero .container>div:nth-of-type(2) {
    display: none;
}

/* KT Cloud Partner Text (1st Element) */
.cloud-badgetext {
    font-size: 13px;
    /* Smaller badge */
    font-weight: 700;
    color: #EF4444;
    /* Red Color */
    margin-bottom: 8px;
    /* Tight gap */
    display: block !important;
    /* Unhide */
}

/* Hero Text Elements - Ensure left alignment */
.cloud-hero h1 {
    text-align: left;
    margin-left: 0;
    align-self: flex-start;
    font-size: 28px;
    /* Compact Title (was 38px) */
    margin-bottom: 8px;
    /* Tight margin */
    font-weight: 800;
    color: #1f2937;
    /* Dark Slate */
    line-height: 1.2;
}

/* --- SHORTCUT BUTTONS --- */
.sidebar-shortcut {
    display: block;
    margin-top: 20px;
    background: #dc2626;
    color: white !important;
    text-align: center;
    padding: 12px;
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s;
    box-shadow: 0 4px 6px rgba(220, 38, 38, 0.2);
}

.sidebar-shortcut:hover {
    background: #b91c1c;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(220, 38, 38, 0.3);
}

.hero-shortcut {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: 1px solid #dc2626;
    color: #dc2626;
    padding: 8px 16px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.2s;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
}

.hero-shortcut:hover {
    background: #dc2626;
    color: white;
}

@media (max-width: 768px) {
    .sidebar-shortcut {
        margin-bottom: 20px;
    }

    .hero-shortcut {
        position: static;
        margin-top: 15px;
        transform: none;
        display: inline-flex;
    }
}

.cloud-hero p {
    text-align: left;
    margin-left: 0;
    align-self: flex-start;
    font-size: 18px;
    color: #64748b;
    /* Gray-500 per screenshot */
    font-weight: 400;
    max-width: 800px;
}

.cloud-hero .badge {
    text-align: left;
    margin-left: 0;
    align-self: flex-start;
}

/* Cloud Layout Container - Consistent spacing */
.cloud-layout {
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    gap: 60px;
    padding: 60px 80px;
    align-items: flex-start;
}

/* Sidebar - Fixed width and standard styling */
.cloud-sidebar {
    width: 240px;
    min-width: 240px;
    position: sticky;
    top: 100px;
    /* Adjusted for static hero: Header (80px) + Gap (20px) */
}

/* Sidebar Navigation - Updated Style */
.sidebar-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-menu li {
    margin-bottom: 8px;
    /* Spacing between items */
}

.sidebar-menu a {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    color: #4b5563;
    /* Gray text */
    text-decoration: none;
    border-radius: 8px;
    /* Rounded corners */
    font-weight: 500;
    font-size: 15px;
    transition: all 0.2s;
    background: transparent;
}

.sidebar-menu a i {
    width: 24px;
    /* Fixed width for icon alignment */
    margin-right: 10px;
    color: #6b7280;
    /* Lighter gray for icon */
    font-size: 16px;
    text-align: center;
}

.sidebar-menu a:hover {
    background-color: #f3f4f6;
    /* Light gray hover */
    color: #111827;
}

.sidebar-menu a:hover i {
    color: #111827;
}

/* Active State - Red Background */
.sidebar-menu a.active {
    background-color: #EF4444;
    /* Red background */
    color: white;
    /* White text */
    font-weight: 600;
    box-shadow: 0 4px 6px rgba(239, 68, 68, 0.2);
}

.sidebar-menu a.active i {
    color: white;
    /* White icon */
}

/* Sidebar Section Container */
.cloud-sidebar {
    width: 250px;
    flex-shrink: 0;
}

/* Dropdown Menu Positioning Fix */
.nav-item {
    position: relative;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    /* Align left edge with parent item, but offset slightly to avoid edge clipping */
    left: 0;
    transform: none;
    /* Remove center transform */
    margin-top: 10px;
    /* Spacing from header */
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.2s ease;
    z-index: 1000;
    min-width: 240px;
}

/* For specific mega menus or wider menus, we can still use specific widths */
.mega-menu {
    left: 0;
    transform: none;
}

/* Fix for right-side items overflow */
.nav-item:nth-last-child(1) .dropdown-menu,
.nav-item:nth-last-child(2) .dropdown-menu {
    left: auto;
    right: 0;
}

/* Main Content Area */
.cloud-content {
    flex: 1;
    min-width: 0;
}

/* Content Header */
.cloud-content .content-header {
    margin-bottom: 40px;
    padding-bottom: 30px;
    border-bottom: 1px solid #e2e8f0;
}

.cloud-content .content-header h2 {
    font-size: 28px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 12px;
}

.cloud-content .content-header p {
    font-size: 16px;
    color: #64748b;
    line-height: 1.7;
}

/* Section Title */
.cloud-content .section-title {
    font-size: 22px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 2px solid #e2e8f0;
}

/* Content Section */
.cloud-content .content-section {
    margin-bottom: 50px;
}

/* =========================================
   FIX: Nested Container Layout Alignment
   For pages with .container > .cloud-layout structure
   (IDC, Security, VPN pages etc.)
   ========================================= */

/* When cloud-layout is inside a container, reset its padding */
.container .cloud-layout,
.sub-content .cloud-layout,
main.sub-content .container .cloud-layout {
    padding: 60px 0 !important;
    /* Remove horizontal padding since container already has it */
    margin: 0;
    max-width: none;
}

/* Ensure .container doesn't add extra horizontal padding when wrapping cloud-layout */
.sub-content>.container {
    padding-left: 80px;
    padding-right: 80px;
    max-width: 1440px;
    margin: 0 auto;
}

/* Override top padding from sub-content wrapper */
main.sub-content {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Ensure sidebar position matches cloud pages */
.sub-content .cloud-sidebar,
.container .cloud-sidebar {
    position: sticky;
    top: 100px;
}

/* Add-on Menu Styles (Global) */
.dropdown-item.icon-left {
    display: flex;
    align-items: flex-start;
    padding: 12px 20px;
    border-bottom: 1px solid #f9fafb;
    text-decoration: none;
}

.dropdown-item.icon-left:last-child {
    border-bottom: none;
}

.dropdown-item.icon-left:hover {
    background-color: #fef2f2;
}

.dropdown-item.icon-left .icon-box {
    width: 40px;
    height: 40px;
    background-color: #fee2e2;
    color: #dc2626;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    flex-shrink: 0;
    font-size: 18px;
}

.dropdown-item.icon-left .text-box {
    display: flex;
    flex-direction: column;
}

.dropdown-item.icon-left .title {
    font-weight: 700;
    color: #1f2937;
    font-size: 15px;
    margin-bottom: 2px;
    display: block;
}

.dropdown-item.icon-left .desc {
    font-size: 13px;
    color: #6b7280;
    line-height: 1.4;
    display: block;
}

/* Service Page Specific Styles (Added for Enterprise/Addon Pages) */
.sw-hero {
    background-color: #111827;
    padding: 80px 0;
    text-align: center;
    color: white;
    background-size: cover;
    background-position: center;
    position: relative;
    /* Default overlay is mostly handled per page or can be here */
}

.sw-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(17, 24, 39, 0.7);
    z-index: 1;
}

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

.sw-hero h1 {
    font-size: 42px;
    font-weight: 800;
    margin-bottom: 20px;
}

.sw-hero p {
    font-size: 18px;
    color: #e2e8f0;
    max-width: 700px;
    margin: 0 auto;
    font-weight: 400;
}

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

.section-header h2 {
    font-size: 36px;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 12px;
}

.section-header p {
    font-size: 18px;
    color: #64748b;
}

.pricing-grid-custom {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
    align-items: stretch;
}

.price-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 40px 24px;
    display: flex;
    flex-direction: column;
    transition: all 0.3s;
    position: relative;
    height: 100%;
}

.price-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.price-card.recommended {
    border: 2px solid #EF4444;
    box-shadow: 0 10px 30px rgba(239, 68, 68, 0.15);
    z-index: 10;
}

.price-card .badge-rec {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: #EF4444;
    color: white;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
}

.plan-name {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #0f172a;
}

.plan-price {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 10px;
    color: #0f172a;
}

.plan-price sub {
    font-size: 16px;
    font-weight: 500;
    color: #64748b;
    margin-left: 4px;
    vertical-align: middle;
}

.plan-desc {
    font-size: 14px;
    color: #64748b;
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid #e2e8f0;
}

.feature-list {
    list-style: none;
    padding: 0;
    margin-bottom: 32px;
    flex-grow: 1;
}

.feature-list li {
    margin-bottom: 12px;
    font-size: 15px;
    color: #334155;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    line-height: 1.5;
}

.feature-list li i {
    color: #EF4444;
    font-size: 14px;
    margin-top: 4px;
}

.btn-price {
    width: 100%;
    padding: 14px;
    background: white;
    color: #1e293b;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    display: block;
    transition: all 0.2s;
}

.btn-price:hover {
    background-color: #f1f5f9;
    border-color: #94a3b8;
}

.price-card.recommended .btn-price {
    background: #EF4444;
    color: white;
    border-color: #EF4444;
}

.price-card.recommended .btn-price:hover {
    background: #dc2626;
}

/* Feature Grid */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-bottom: 80px;
}

.feature-item {
    text-align: center;
    padding: 40px 30px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.feature-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.feature-icon {
    font-size: 40px;
    color: #EF4444;
    margin-bottom: 20px;
}

.feature-item h3 {
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 12px;
}

.feature-item p {
    color: #64748b;
    line-height: 1.6;
}

/* Theme Modifiers */
.theme-blue .price-card.recommended {
    border-color: #2563eb;
    box-shadow: 0 10px 30px rgba(37, 99, 235, 0.15);
}

.theme-blue .badge-rec {
    background: #2563eb;
}

.theme-blue .feature-list li i {
    color: #2563eb;
}

.theme-blue .price-card.recommended .btn-price {
    background: #2563eb;
    border-color: #2563eb;
}

.theme-blue .price-card.recommended .btn-price:hover {
    background: #1d4ed8;
}

.theme-blue .feature-icon {
    color: #2563eb;
}

.theme-green .price-card.recommended {
    border-color: #10b981;
    box-shadow: 0 10px 30px rgba(16, 185, 129, 0.15);
}

.theme-green .badge-rec {
    background: #10b981;
}

.theme-green .feature-list li i {
    color: #10b981;
}

.theme-green .price-card.recommended .btn-price {
    background: #10b981;
    border-color: #10b981;
}

.theme-green .price-card.recommended .btn-price:hover {
    background: #059669;
}

.theme-green .feature-icon {
    color: #10b981;
}

/* ========== Standard Hero Section (sw-hero) ========== */
/* 모든 서비스 페이지의 Hero 섹션 표준 스타일 */
/* 기준: sub_sol_ms365.html - 높이 100px padding */

.sw-hero {
    padding: 100px 0 !important;
    text-align: center;
    position: relative;
    background-size: cover;
    background-position: center;
}

.sw-hero .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.sw-hero h1 {
    font-size: 48px;
    font-weight: 800;
    color: white;
    margin: 0 0 20px 0;
    letter-spacing: -1px;
    line-height: 1.2;
}

.sw-hero p {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.8);
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.6;
}

/* 반응형 - 모바일 */
@media (max-width: 768px) {
    .sw-hero {
        padding: 60px 0 !important;
    }

    .sw-hero h1 {
        font-size: 32px;
    }

    .sw-hero p {
        font-size: 16px;
    }
}

/* HUMECCA Website - Complete Replit Clone */
/* ... (Existing content preserved via append, effectively) ... */

/* MEGA MENU STYLES (Added for Cloud Menu Layout) */
.mega-menu {
    padding: 24px !important;
}

.mega-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* 2 Columns as requested */
    gap: 16px;
    margin-top: 12px;
}

.mega-section-title {
    font-size: 13px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    margin-bottom: 12px;
    letter-spacing: 0.5px;
}

.mega-cta {
    margin-top: 24px;
    padding-top: 0;
    border-top: none;
    text-align: center;
}

.mega-cta a {
    display: flex;
    width: 100%;
    height: 48px;
    background-color: #EF4444;
    color: white;
    font-weight: 700;
    font-size: 15px;
    border-radius: 8px;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.2s;
    gap: 8px;
    box-shadow: 0 4px 6px rgba(239, 68, 68, 0.2);
}

.mega-cta a i {
    color: white;
    /* White Icon */
}

.mega-cta a:hover {
    background-color: #DC2626;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(239, 68, 68, 0.3);
    color: white;
}

.mega-cta a:hover {
    text-decoration: underline;
}

/* Ensure Titles don't wrap */
.dropdown-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* =========================================
   RESTORED CONTENT STYLES (Grid & Cards)
   ========================================= */

/* Feature Grid (for "Key Features" with Icons) */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    margin-top: 20px;
}

.feature-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 32px 24px;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
    border-color: #fca5a5;
    /* Red tint border */
}

/* Generation Grid (for "Server Generation") */
.gen-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* Exactly 3 columns for 3 generations */
    gap: 30px;
    margin-top: 20px;
}

@media (max-width: 992px) {
    .gen-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }
}

.gen-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 30px;
    text-align: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.gen-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.gen-card h4 {
    font-size: 18px;
    font-weight: 700;
    color: #1f2937;
    margin: 10px 0;
}

/* Process Grid (for "Service Process") */
.process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 20px;
}

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

.process-step {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 24px;
    text-align: center;
    transition: all 0.3s ease;
}

.process-step:hover {
    background: #ffffff;
    border-color: #cbd5e1;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    transform: translateY(-3px);
}

.process-step h4 {
    font-size: 16px;
    font-weight: 700;
    color: #334155;
    margin: 15px 0 10px;
}

.process-step p {
    font-size: 14px;
    color: #64748b;
    line-height: 1.6;
    margin: 0;
}

/* --- Server Hosting Page Improvements --- */

/* Base Pricing Styles (Migrated from sub_hosting.html) */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 32px;
    align-items: start;
}

@media (min-width: 900px) {
    .pricing-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.plan-card {
    background: white;
    border: 1px solid var(--border-light);
    border-radius: 20px;
    padding: 40px 30px;
    text-align: center;
    position: relative;
    transition: all 0.3s;
}

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

.plan-card.popular {
    border: 2px solid var(--accent);
    transform: scale(1.05);
    z-index: 2;
    box-shadow: 0 20px 40px -5px rgba(233, 77, 54, 0.15);
}

.plan-card.popular:hover {
    transform: scale(1.05) translateY(-5px);
}

.plan-badge {
    background: var(--accent);
    color: white;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 700;
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    white-space: nowrap;
}

.plan-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 24px;
}

.plan-summary {
    font-size: 0.95rem;
    color: #64748b;
    margin-bottom: 24px;
    min-height: 24px;
}

.plan-price {
    margin-bottom: 32px;
    color: var(--accent);
}

.amount {
    font-size: 2.5rem;
    font-weight: 800;
}

.period {
    font-size: 1rem;
    color: var(--text-sub);
    font-weight: 400;
}

.specs-list {
    background: #f8fafc;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 24px;
    text-align: left;
}

.spec-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.spec-item:last-child {
    margin-bottom: 0;
}

.spec-label {
    color: #64748b;
    font-weight: 500;
}

.spec-value {
    color: #0f172a;
    font-weight: 700;
}

.plan-features {
    list-style: none;
    padding: 0;
    margin: 0 0 32px;
    text-align: left;
}

.plan-features li {
    padding: 12px 0;
    border-bottom: 1px solid #f8fafc;
    color: var(--text-sub);
    display: flex;
    align-items: center;
    gap: 12px;
}

.plan-features li:last-child {
    border-bottom: none;
}

.plan-features i {
    color: var(--accent);
    font-size: 0.9rem;
}

.plan-btn {
    display: block;
    width: 100%;
    padding: 16px;
    border-radius: 10px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s;
    box-sizing: border-box;
}

.plan-btn.outline {
    border: 1px solid var(--border-light);
    color: var(--text-main);
    background: white;
}

.plan-btn.outline:hover {
    border-color: var(--text-main);
    background: #f8fafc;
}

.plan-btn.solid {
    background: var(--accent);
    color: white;
    border: none;
}

.plan-btn.solid:hover {
    background: var(--accent-hover);
}

/* 1. Compact Pricing Grid */
.compact-pricing {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 30px !important;
    /* Increased horizontal gap */
    row-gap: 60px !important;
    /* Increased vertical gap to prevent badge overlap */
    max-width: 1200px;
    /* Increased overall width by ~20% */
    margin: 0 auto;
}

.compact-pricing .plan-card {
    padding: 30px 20px;
    transition: all 0.3s ease;
}

.compact-pricing .plan-title {
    font-size: 1.3rem;
    /* [Chief Design Fix] Add structure for hover state */
    padding-bottom: 15px;
    margin-bottom: 20px;
    border-bottom: 1px solid transparent;
    /* Reserve space */
}

/* On Hover: Show the separator line - Stronger Visibility */
.compact-pricing .plan-card:hover .plan-title,
.theme-blue .compact-pricing .plan-card:hover .plan-title {
    border-bottom-color: rgba(255, 255, 255, 0.8) !important;
}

.compact-pricing .amount {
    font-size: 2rem;
}

.compact-pricing .specs-list {
    padding: 15px;
    font-size: 0.85rem;
}

/* Hover Effect: Color Inversion */
.compact-pricing .plan-card:hover {
    background-color: var(--accent);
    border-color: var(--accent);
    transform: translateY(-8px);
}

.theme-blue .compact-pricing .plan-card:hover {
    background-color: #2563eb !important;
    border-color: #2563eb !important;
}

/* Also ensure 'popular' card in blue theme isn't red by default if that's what's happening */
.theme-blue .compact-pricing .plan-card.popular {
    /* If popular makes it red, we need to override it here too, but users request was about "mouse effect" */
    /* Let's stick to fixing hover strongly first. */
}

.compact-pricing .plan-card:hover .plan-title,
.compact-pricing .plan-card:hover .plan-summary,
.compact-pricing .plan-card:hover .plan-price,
.compact-pricing .plan-card:hover .amount,
.compact-pricing .plan-card:hover .period,
.compact-pricing .plan-card:hover .spec-label,
.compact-pricing .plan-card:hover .spec-value,
.compact-pricing .plan-card:hover .plan-features li {
    color: white !important;
}

.compact-pricing .plan-card:hover .specs-list {
    background-color: rgba(255, 255, 255, 0.1);
}

.compact-pricing .plan-card:hover .plan-features li {
    border-bottom-color: rgba(255, 255, 255, 0.2);
}

.compact-pricing .plan-card:hover .plan-features i {
    color: white !important;
}

.compact-pricing .plan-card:hover .plan-btn.outline {
    background-color: white;
    color: var(--accent) !important;
    border-color: white;
}

.compact-pricing .plan-card:hover .plan-btn.solid {
    background-color: white;
    color: var(--accent) !important;
}

.theme-blue .compact-pricing .plan-card:hover .plan-btn.solid {
    color: #2563eb !important;
}

.compact-pricing .plan-badge {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    /* Ensure it is above the card border */
    white-space: nowrap;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
    /* Ensure it has a base style if not defined elsewhere */
    background: var(--accent);
    color: white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.theme-blue .compact-pricing .plan-badge {
    background: #2563eb;
}

/* Fix Badge Visibility on Hover */
.compact-pricing .plan-card:hover .plan-badge {
    background-color: white !important;
    color: var(--accent) !important;
    border: 2px solid var(--accent) !important;
    /* Added Border */
}

.theme-blue .compact-pricing .plan-card:hover .plan-badge {
    color: #2563eb !important;
    border-color: #2563eb !important;
    /* Blue Border */
}

/* 2. Server Hosting Intro Diagram */
.server-diagram-box {
    background: white;
    border: 1px solid var(--border-light);
    border-radius: 20px;
    padding: 60px 40px;
    margin: 40px 0;
    text-align: center;
    position: relative;
}

.diagram-flow {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 40px;
}

.diagram-node {
    flex: 1;
    max-width: 250px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
}

.diagram-circle {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: #f8fafc;
    border: 3px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    position: relative;
    z-index: 2;
    transition: transform 0.3s;
}

.diagram-circle:hover {
    transform: scale(1.05);
    border-color: var(--accent);
}

.diagram-circle i {
    font-size: 40px;
    color: var(--accent);
    margin-bottom: 10px;
}

.diagram-circle span {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--text-main);
}

.diagram-text {
    font-size: 0.95rem;
    color: var(--text-sub);
    line-height: 1.5;
}

.diagram-arrow {
    flex: 0 0 100px;
    height: 2px;
    background: #cbd5e1;
    position: relative;
}

.diagram-arrow::after {
    content: '';
    position: absolute;
    right: 0;
    top: -4px;
    width: 0;
    height: 0;
    border-left: 8px solid #cbd5e1;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
}

.diagram-arrow-text {
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.85rem;
    color: #64748b;

    font-weight: 500;
}

/* 3. Server Hosting Intro Key Points */
.intro-key-points {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
    flex-wrap: wrap;
}

.intro-point-box {
    background: #f8fafc;
    border: 1px solid var(--border-light);
    border-radius: 15px;
    padding: 25px 20px;
    flex: 1;
    min-width: 280px;
    max-width: 350px;
    text-align: center;
    transition: transform 0.3s;
}

.intro-point-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
    background: white;
    border-color: var(--accent);
}

.intro-point-icon {
    width: 60px;
    height: 60px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    color: var(--accent);
    font-size: 24px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.intro-point-icon i {
    transition: transform 0.6s ease;
    display: inline-block;
}

.intro-point-box:hover .intro-point-icon i {
    transform: rotateY(360deg);
}

.intro-point-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 10px;
}

.intro-point-desc {
    font-size: 0.95rem;
    color: var(--text-sub);
    line-height: 1.5;
}

@media (max-width: 768px) {
    .diagram-flow {
        flex-direction: column;
        gap: 60px;
    }

    .diagram-arrow {
        width: 2px;
        height: 50px;
        flex: 0 0 50px;
    }

    .diagram-arrow::after {
        top: auto;
        bottom: 0;
        right: -3px;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 8px solid #cbd5e1;
    }

    .diagram-arrow-text {
        top: 50%;
        left: 20px;
        transform: translateY(-50%);
    }
}

/* Mega Menu Grid Styles */
.mega-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    padding: 8px 0;
}

.mega-section-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-sub);
    margin: 16px 0 8px;
    padding-left: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mega-cta {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border-light);
    text-align: center;
}

.mega-cta a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--primary-red);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    padding: 8px 16px;
    border-radius: 6px;
    transition: background 0.2s;
}

.mega-cta a:hover {
    background: #FEF2F2;
}

/* Customer Logo Grid Premium Effects */
.logo-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.logo-card:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 20px 25px -5px rgba(239, 68, 68, 0.25), 0 10px 10px -5px rgba(239, 68, 68, 0.1) !important;
    border-color: #EF4444 !important;
    /* Stronger Red */
}

.logo-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(255, 255, 255, 0) 100%);
    /* 3x Opacity */
    opacity: 0;
    transition: opacity 0.4s ease;
}

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

.logo-card img {
    filter: grayscale(100%) opacity(0.7);
    transition: all 0.4s ease;
    transform: scale(1);
    max-width: 80%;
    max-height: 50px;
    object-fit: contain;
}

.logo-card:hover img {
    filter: grayscale(0%) opacity(1);
    transform: scale(1.1);
}

.logo-card span {
    transition: color 0.3s ease;
}

.logo-card:hover span {
    color: #EF4444 !important;
}

/* =========================================
   MOBILE MENU STYLES (Added for Fix)
   ========================================= */
@media (max-width: 768px) {

    /* 1. Header Layout Adjustments */
    .header-container {
        padding: 0 20px;
        /* Reduces padding on mobile */
        height: 60px;
        /* Slightly smaller header */
    }

    .logo-link img {
        height: 32px !important;
        /* Smaller logo */
    }

    /* 2. Mobile Menu Button */
    .mobile-menu-btn {
        display: block !important;
        background: none;
        border: none;
        font-size: 24px;
        color: #1e293b;
        cursor: pointer;
        z-index: 10001;
        /* Above mobile menu */
        margin-left: auto;
        /* Push to right */
        padding: 8px;
    }

    /* 3. Navigation Container (The Slide-out Menu) */
    .nav {
        display: block !important;
        position: fixed;
        top: 60px;
        /* Below header */
        left: 0;
        width: 100%;
        height: calc(100vh - 60px);
        background: white;
        z-index: 10000;
        transform: translateX(100%);
        /* Hidden by default */
        transition: transform 0.3s ease-in-out;
        overflow-y: auto;
        padding-bottom: 40px;
        border-top: 1px solid var(--border-light);
    }

    .nav.active {
        transform: translateX(0) !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* 4. Navigation List */
    .nav-list {
        flex-direction: column;
        height: auto;
        padding: 20px;
    }

    .nav-item {
        width: 100%;
        height: auto;
        border-bottom: 1px solid #f1f5f9;
        display: block;
        /* Stack vertically */
        padding: 0;
    }

    .nav-link {
        padding: 16px 0;
        font-size: 16px;
        font-weight: 600;
        justify-content: space-between;
        /* Arrow to right */
        width: 100%;
    }

    /* 5. Submenus (Dropdowns) */
    .dropdown-menu,
    .dropdown-menu.mega-menu {
        position: static;
        /* Flow within the list */
        visibility: visible;
        /* Always visible in DOM flow if parent open, but we use display */
        opacity: 1;
        width: 100% !important;
        min-width: 100% !important;
        box-shadow: none;
        border: none;
        background: #f8fafc;
        padding: 0;
        margin: 0;
        transform: none;
        pointer-events: auto;

        /* Hide by default on mobile, show via JS toggle class if needed, 
           OR simplified: just show all for now or rely on specific mobile-toggle class.
           For now, let's make them visible to verify layout first, or check JS.
           Loader.js logic toggles .active on nav, but doesn't toggle submenus.
           Existing CSS hides them. We need to override. */
        display: none;
    }

    /* Show submenu when nav-item has 'open' class (will add JS for this) */
    .nav-item.open>.dropdown-menu {
        display: block !important;
    }

    .dropdown-item {
        padding: 12px 20px;
        background: transparent;
    }

    .mega-grid {
        grid-template-columns: 1fr;
        /* 1 column for mega menu items */
    }

    .mega-menu {
        padding: 10px !important;
    }

    /* 6. Hide Desktop-only elements if needed */
    .header-buttons .btn {
        display: none;
        /* Hide login button text or button itself if too crowded */
    }

    /* Keep the V.version text but maybe smaller */
    /* Keep the V.version text visible as requested */
    .header-buttons span {
        display: inline-block !important;
        /* Force show */
        font-size: 10px;
        /* Make it small enough to fit */
        color: #64748b;
        margin-right: 10px;
    }
}

/* NProgress-like Loading Bar */
#nprogress-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: var(--primary-red);
    z-index: 10000;
    transition: width 0.3s ease, opacity 0.3s ease;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.5);
}

/* =========================================
   IDC Intro Page Styles (Migrated from sub_idc_intro.html)
   ========================================= */

/* IDC White Theme Override */
.idc-wrapper {
    width: 100%;
    position: relative;
    z-index: 10;
    background-color: var(--bg-white, #ffffff);
}

.idc-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* --- Hero --- */
.idc-hero {
    background-color: #0f172a;
    padding: 80px 0;
    text-align: center;
    position: relative;
}

.idc-hero h2 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #cbd5e1;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 24px;
}

.idc-hero h1 {
    font-size: 42px;
    font-weight: 900;
    color: white;
    line-height: 1.1;
    margin: 0 0 32px;
    letter-spacing: -0.02em;
}

.idc-hero p {
    font-size: 18px;
    color: #94a3b8;
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.6;
    font-weight: 400;
}

/* --- Section Common --- */
.idc-section {
    padding: 80px 0;
    border-top: 1px solid #e2e8f0;
}

.idc-section.bg-gray {
    background-color: #f8fafc;
    border-top: none;
    border-bottom: 1px solid #e2e8f0;
}

.idc-sec-header {
    text-align: center;
    margin-bottom: 60px;
}

.idc-sec-sub {
    color: #E94D36;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 0.9rem;
    margin-bottom: 12px;
    display: block;
}

.idc-sec-title {
    font-size: 2.5rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 16px;
}

.idc-sec-desc {
    font-size: 1.15rem;
    color: #475569;
    max-width: 640px;
    margin: 0 auto;
}

/* Stats Grid */
.stats-section {
    padding: 80px 0;
    background-color: white;
    border-top: 1px solid #e2e8f0;
}

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

@media (min-width: 768px) {
    .stats-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1200px) {
    .stats-grid {
        grid-template-columns: repeat(6, 1fr);
    }
}

.stat-card {
    background: white;
    border: 1px solid #e2e8f0;
    padding: 32px 20px;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease;
}

.stat-card:hover {
    transform: translateY(-4px);
    border-color: #E94D36;
}

.stat-val {
    display: block;
    font-size: 1.75rem;
    font-weight: 800;
    color: #E94D36;
    margin-bottom: 8px;
}

.stat-label {
    font-size: 0.95rem;
    color: #475569;
}

/* Infra Grid */
.infra-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
}

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

@media (min-width: 1024px) {
    .infra-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.infra-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 40px;
    height: 100%;
    box-sizing: border-box;
    transition: all 0.2s;
}

.infra-card:hover {
    border-color: #E94D36;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.infra-icon {
    font-size: 2.5rem;
    color: #E94D36;
    margin-bottom: 24px;
}

.infra-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 12px;
    color: #0f172a;
}

.infra-desc {
    font-size: 1.05rem;
    color: #475569;
    margin-bottom: 24px;
    line-height: 1.5;
}

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

.infra-list li {
    position: relative;
    padding-left: 24px;
    margin-bottom: 8px;
    color: #475569;
}

.infra-list li::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 4px;
    color: #E94D36;
}

/* Security */
.sec-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 24px;
}

@media (min-width: 576px) {
    .sec-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 992px) {
    .sec-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.sec-box {
    background: #f8fafc;
    padding: 30px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.sec-box h4 {
    font-size: 1.2rem;
    margin: 0 0 16px;
    color: #0f172a;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sec-box ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

.sec-box li {
    padding-left: 14px;
    position: relative;
    margin-bottom: 6px;
    color: #475569;
}

.sec-box li::before {
    content: "";
    width: 5px;
    height: 5px;
    background: #E94D36;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 9px;
}

/* Certs */
.cert-flex {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    justify-content: center;
}

.cert-item {
    display: flex;
    align-items: center;
    gap: 16px;
    background: white;
    padding: 24px 40px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02);
}

.cert-icon {
    font-size: 2.5rem;
    color: #E94D36;
    opacity: 0.9;
}

.cert-text strong {
    display: block;
    font-size: 1.15rem;
    color: #0f172a;
}

/* Services */
.svc-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

@media (min-width: 768px) {
    .svc-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.svc-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 40px 30px;
    text-align: center;
    transition: all 0.2s;
}

.svc-card:hover {
    border-color: #E94D36;
    box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.05);
    transform: translateY(-5px);
}

.svc-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #fff1f2;
    /* Light Red bg */
    color: #E94D36;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin: 0 auto 24px;
}

.svc-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 12px;
}

.svc-desc {
    color: #475569;
    margin-bottom: 24px;
    min-height: 48px;
}

.svc-btn {
    display: inline-block;
    padding: 10px 24px;
    border-radius: 6px;
    background: #f8fafc;
    color: #0f172a;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
}

.svc-btn:hover {
    background: #E94D36;
    color: white;
}

/* CTA Centered */
.cta-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 80px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.cta-btn-wrap {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: center;
    margin-top: 32px;
    flex-wrap: wrap;
}

.cta-btn-main {
    background: #E94D36;
    color: white;
    border-radius: 8px;
    padding: 16px 48px;
    font-size: 1.1rem;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: background 0.2s;
}

.cta-btn-main:hover {
    background: #d93d2b;
}

.cta-btn-sub {
    background: white;
    border: 1px solid #e2e8f0;
    color: #0f172a;
    border-radius: 8px;
    padding: 16px 32px;
    font-size: 1.1rem;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: background 0.2s;
}

.cta-btn-sub:hover {
    background: #f1f5f9;
}

@media (max-width: 600px) {
    .cta-btn-wrap {
        flex-direction: column;
        width: 100%;
    }

    .cta-btn-main,
    .cta-btn-sub {
        width: 100%;
        justify-content: center;
        box-sizing: border-box;
    }
}

/* =========================================
   Support Page Styles (Migrated from sub_support.html)
   ========================================= */

.support-info-bar {
    background: #f8fafc;
    padding: 40px 0;
    border-bottom: 1px solid #e2e8f0;
}

.support-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.info-card {
    background: white;
    padding: 30px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    gap: 20px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.info-icon {
    width: 50px;
    height: 50px;
    background: #eff6ff;
    color: #3b82f6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.info-text h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 4px;
    color: #1e293b;
}

.info-text p {
    font-size: 1.25rem;
    font-weight: 800;
    color: #3b82f6;
    margin: 0;
}

.info-text span {
    font-size: 0.9rem;
    color: #64748b;
    font-weight: 500;
}

/* Tabs */
.tab-container {
    margin-top: 60px;
}

.tabs {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 40px;
    border-bottom: 2px solid #e2e8f0;
    flex-wrap: wrap;
    /* 모바일 대응 */
}

.tab-btn {
    padding: 15px 40px;
    font-size: 1.1rem;
    font-weight: 600;
    color: #64748b;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    transition: all 0.3s;
    margin-bottom: -2px;
}

.tab-btn.active {
    color: #3b82f6;
    border-bottom-color: #3b82f6;
}

.tab-btn:hover:not(.active) {
    color: #1e293b;
}

.tab-content {
    display: none;
    animation: fadeIn 0.4s ease;
}

.tab-content.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

/* FAQ Accordion */
.faq-item {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    margin-bottom: 15px;
    overflow: hidden;
    background: white;
}

.faq-header {
    padding: 20px;
    background: white;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.faq-header h4 {
    margin: 0;
    font-size: 1rem;
    color: #1e293b;
    font-weight: 600;
}

.faq-icon {
    color: #94a3b8;
    transition: transform 0.3s;
}

.faq-item.active .faq-icon {
    transform: rotate(180deg);
}

.faq-body {
    display: none;
    padding: 20px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    color: #475569;
    line-height: 1.6;
}

.faq-item.active .faq-body {
    display: block;
}

/* =========================================
   Standardized Pricing Card Hover Effects
   ========================================= */

/* Base Transitions */
.plan-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: white;
    z-index: 1;
}

/* 1. RED THEME (Software, General) - Default */
.plan-card:hover,
.theme-red .plan-card:hover {
    background: #EF4444 !important;
    border-color: #EF4444 !important;
    box-shadow: 0 20px 40px -5px rgba(239, 68, 68, 0.4) !important;
    transform: translateY(-10px) scale(1.02);
    z-index: 10;
}

/* 2. GREEN THEME (Groupware / Naver Works) */
.theme-green .plan-card:hover {
    background: #03C75A !important;
    border-color: #03C75A !important;
    box-shadow: 0 20px 40px -5px rgba(3, 199, 90, 0.4) !important;
    transform: translateY(-10px) scale(1.02);
    z-index: 10;
}

/* Universal Text/Element Color Inversion on Hover */
.plan-card:hover .plan-title,
.plan-card:hover .plan-price,
.plan-card:hover .plan-summary,
.plan-card:hover .plan-desc,
.plan-card:hover .amount,
.plan-card:hover .period,
.plan-card:hover i,
.plan-card:hover li {
    color: white !important;
    border-bottom-color: rgba(255, 255, 255, 0.2) !important;
}

/* Universal Button Inversion */
.plan-card:hover .plan-btn,
.plan-card:hover .btn-price {
    background: white !important;
    border: none !important;
}

.theme-red .plan-card:hover .plan-btn,
.theme-red .plan-card:hover .btn-price {
    color: #EF4444 !important;
}

.theme-green .plan-card:hover .plan-btn,
.theme-green .plan-card:hover .btn-price {
    color: #03C75A !important;
}

/* Recommended/Popular Card Specifics */
/* If a card is recommended, it might have a default highlight border, but we want hover to be consistent */
.plan-card.recommended {
    /* Keep default white state, specific border handled by page CSS or default */
    background: white;
}

/* Badge Adjustment on Hover */
.plan-card:hover .plan-badge,
.plan-card:hover .badge-rec {
    background: white !important;
}

.theme-red .plan-card:hover .plan-badge,
.theme-red .plan-card:hover .badge-rec {
    color: #EF4444 !important;
}

.theme-green .plan-card:hover .plan-badge,
.theme-green .plan-card:hover .badge-rec {
    color: #03C75A !important;
}

/* FINAL RESPONSIVE OVERRIDES (Must be last) */
@media (max-width: 480px) {
    .plan-card:hover {
        transform: none !important;
    }
}