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

/*======================================
    DESIGN TOKENS
======================================*/

:root {

    /* Colors */

    --primary: #D4AF37;
    --accent: #2563EB;

    --bg: #0F172A;
    --surface: #111827;
    --card: #111827;

    --text: #FFFFFF;
    --text-secondary: #CBD5E1;

    --border: #374151;

    /* Radius */

    --radius-button: 12px;
    --radius-card: 20px;

    /* Shadow */

    --shadow: 0 15px 40px rgba(0, 0, 0, .18);

    /* Transition */

    --transition: .35s ease;

}

/*======================================
    GLOBAL
======================================*/

body {

    font-family: "Poppins", sans-serif;

    background: var(--bg);

    color: var(--text);

    line-height: 1.7;

    overflow-x: hidden;

    -webkit-font-smoothing: antialiased;

    text-rendering: optimizeLegibility;

    transition:
        background .35s ease,
        color .35s ease;

}

body.light-mode {

    --bg: #F8FAFC;

    --surface: #FFFFFF;

    --card: #FFFFFF;

    --text: #0F172A;

    --text-secondary: #475569;

    --border: #E2E8F0;

}

a {

    text-decoration: none;

    color: inherit;

    transition: var(--transition);

}

ul {

    list-style: none;

}

.container {

    width: min(92%, 1200px);

    margin: auto;

}

/*======================================
    HEADER
======================================*/

header {

    width: 100%;

    background: var(--surface);


    border-bottom: 1px solid var(--border);

    position: sticky;

    top: 0;

    z-index: 1000;

}

header.sticky {

    backdrop-filter: blur(14px);

    background: rgba(15, 23, 42, .92);

    box-shadow: 0 12px 35px rgba(0, 0, 0, .25);

}

body.light-mode header.sticky {

    background: rgba(255, 255, 255, .92);

}

.navbar {

    position: relative;

    height: 88px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 40px;

}

.nav-actions {

    display: flex;

    align-items: center;

    gap: 16px;

}

.language-select {

    min-width: 70px;

    height: 46px;

    padding: 0 14px;

    background: var(--surface);

    color: var(--text);

    border: 1px solid var(--border);

    border-radius: var(--radius-button);

    font-size: 15px;

    font-weight: 500;

    cursor: pointer;

    transition: var(--transition);

}

.language-select:hover {

    border-color: var(--primary);

}

.language-select:focus {

    outline: none;

    border-color: var(--primary);

}

.theme-toggle {

    width: 48px;

    height: 48px;

    border-radius: var(--radius-button);

    border: 1px solid var(--border);

    background: var(--surface);

    color: var(--text);

    cursor: pointer;

    font-size: 20px;

    transition: var(--transition);

}

.theme-toggle:hover {

    border-color: var(--primary);

    color: var(--primary);

}

.theme-toggle i {

    transition: .35s;

}

.theme-toggle:hover i {

    transform: rotate(180deg);

}

.menu-toggle {

    display: none;

    width: 48px;

    height: 48px;

    border: none;

    border-radius: var(--radius-button);

    background: var(--surface);

    color: var(--text);

    cursor: pointer;
    display: none;

    justify-content: center;

    align-items: center;

    transition: var(--transition);

}


.menu-toggle:hover {

    border: 1px solid var(--border);

    color: var(--primary);

}

.menu-toggle i {

    font-size: 18px;

}

.logo a {

    font-size: 30px;

    color: #ffffff;

    font-weight: 800;

    letter-spacing: 3px;

    transition: var(--transition);

}

.logo a:hover {

    color: var(--primary);

}

.nav-links {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 34px;

    flex: 1;

    transition: var(--transition);

}

.nav-links a {

    position: relative;

    color: var(--text);

    font-size: 15px;

    font-weight: 500;

    transition: var(--transition);

}

.nav-links a::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: -8px;

    width: 0;

    height: 2px;

    background: var(--primary);

    transition: width .35s ease;

}

.nav-links a:hover {

    color: var(--primary);

}

.nav-links a:hover::after {

    width: 100%;

}

.nav-links a.active {

    color: var(--primary);

}

.nav-links a.active::after {

    width: 100%;

}

/*======================================
    BUTTONS
======================================*/

.btn-primary {

    padding: 14px 30px;

    background: var(--primary);

    color: var(--bg);

    border-radius: var(--radius-button);

    font-weight: 700;
    display: flex;

    align-items: center;

    justify-content: center;
    white-space: nowrap;
    min-width: 160px;

    transition: var(--transition);

}

.btn-primary:hover {

    transform: translateY(-2px);

    box-shadow: 0 14px 25px rgba(212, 175, 55, .35);

}

.btn-secondary {

    padding: 16px 34px;

    border: 2px solid #2563eb;

    border-radius: var(--radius-button);

    color: #2563eb;

    font-weight: 600;

    font-size: 17px;

    transition: var(--transition);

}

.btn-secondary:hover {

    background: #2563eb;

    color: #fff;

}

/*======================================
    HERO
======================================*/

body.light-mode .hero {

    background: var(--bg);

}

body.light-mode .hero-image img {

    box-shadow: 0 30px 70px rgba(15, 23, 42, .12);

}

.hero {

    background: var(--bg);

    min-height: calc(100vh - 88px);

    display: flex;

    align-items: center;

    padding: 120px 0;

    transition: var(--transition);

}

.hero-container {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 100px;

}

.hero-content {

    flex: 1;

}

.hero-content p {

    max-width: 620px;

}

.hero-badge {

    display: inline-block;

    background: rgba(212, 175, 55, .12);

    color: var(--primary);

    border: 1px solid rgba(212, 175, 55, .35);

    padding: 8px 18px;

    border-radius: var(--radius-pill);

    margin-bottom: 20px;

}

.hero h1 {

    font-size: 65px;

    font-weight: 800;

    line-height: 1.05;

    letter-spacing: -2px;

    margin-bottom: 28px;

    color: var(--text);

    transition: var(--transition);

}

.hero p {

    max-width: 600px;

    font-size: 20px;

    line-height: 1.8;

    color: var(--text-secondary);

    transition: var(--transition);

}

.hero-buttons {

    display: flex;

    gap: 20px;

    margin-top: 40px;

}

.hero-image {

    flex: 1;

    display: flex;

    justify-content: center;

    align-items: center;

}

.hero-image img {

    width: 100%;

    max-width: 820px;

    border-radius: var(--radius-large);

    border: 1px solid var(--border);

    box-shadow: 0 35px 90px rgba(0, 0, 0, .35);

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;

}

.hero-image img:hover {

    transform: translateY(-8px);

    box-shadow: 0 45px 110px rgba(0, 0, 0, .45);

}

/*======================================
    TRUSTED
======================================*/

/*======================================
    TRUSTED
======================================*/

.trusted {

    padding: 80px 0;

    border-top: 1px solid var(--border);

    border-bottom: 1px solid var(--border);

    background: var(--surface);

    transition: var(--transition);

}

.trusted-title {

    text-align: center;

    color: var(--text-secondary);

    margin-bottom: 40px;

    letter-spacing: 1px;

    text-transform: uppercase;

    font-size: 15px;

    font-weight: 600;

    transition: var(--transition);

}

.trusted-logos {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 70px;

    flex-wrap: wrap;

}

.trusted-logos span {

    color: var(--text-secondary);

    font-size: 22px;

    font-weight: 700;

    opacity: .7;

    transition: var(--transition);

}

.trusted-logos span:hover {

    opacity: 1;

    color: var(--primary);

}

/*======================================
    WHY CORXOR
======================================*/

.why {

    padding: 120px 0;

    background: var(--bg);

    transition: var(--transition);

}

.why h2 {

    text-align: center;

    font-size: 48px;

    font-weight: 700;

    line-height: 1.2;

    margin-bottom: 20px;

    color: var(--text);

    transition: var(--transition);

}

.section-subtitle {

    text-align: center;

    color: var(--text-secondary);

    font-size: 20px;

    line-height: 1.8;

    max-width: 720px;

    margin: 0 auto 70px;

    transition: var(--transition);

}

.why-grid {

    display: flex;

    justify-content: center;

    align-items: stretch;

    gap: 40px;

    flex-wrap: wrap;

}

/*======================================
    WHY CARD
======================================*/

.why-card {

    width: 320px;

    height: 250px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

    background: var(--card);

    border: 1px solid var(--border);

    border-radius: var(--radius-card);

    padding: 35px 30px;

    transition: var(--transition);

}

.why-card:hover {

    transform: translateY(-10px);

    border-color: var(--primary);

    box-shadow: var(--shadow-card);

}

.why-card h3 {

    font-size: 24px;

    font-weight: 600;

    line-height: 1.35;

    margin-bottom: 20px;

    color: var(--text) !important;

    transition: var(--transition);

}

.why-card p {

    color: var(--text-secondary) !important;

    font-size: 18px;

    line-height: 1.8;

    text-align: center;

    transition: var(--transition);

}

/*======================================
    FEATURES
======================================*/

.features {

    padding: 120px 0;

    background: var(--surface);

    transition: var(--transition);

}

.features h2 {

    text-align: center;

    font-size: 48px;

    font-weight: 700;

    line-height: 1.2;

    margin-bottom: 20px;

    color: var(--text);

    transition: var(--transition);

}

.features-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 30px;

    align-items: stretch;

}

.feature-card {

    display: flex;

    flex-direction: column;

    background: var(--card);

    border: 1px solid var(--border);

    border-radius: var(--radius-card);

    padding: 35px;

    min-height: 340px;

    transition: var(--transition);

}

.feature-card:hover {

    transform: translateY(-8px);

    border-color: var(--primary);

    box-shadow: var(--shadow-card);

}

.feature-card i {

    width: 70px;

    height: 70px;

    display: flex;

    justify-content: center;

    align-items: center;

    margin-bottom: 25px;

    border-radius: 18px;

    background: rgba(212, 175, 55, .12);

    border: 1px solid rgba(212, 175, 55, .25);

    color: var(--primary);

    font-size: 28px;

    transition: var(--transition);

}



.feature-card h3 {

    font-size: 23px;

    font-weight: 600;

    line-height: 1.35;

    margin-bottom: 15px;

    color: var(--text);

    transition: var(--transition);

}

.feature-card p {

    flex: 1;

    color: var(--text-secondary);

    font-size: 17px;

    line-height: 1.9;

    transition: var(--transition);

}




/*======================================
    FOOTER
======================================*/

footer {

    background: var(--surface);

    padding-top: 90px;

    margin-top: 0;

    border-top: 1px solid var(--border);

    transition: var(--transition);

}

.footer-container {

    display: grid;

    grid-template-columns: 2fr 1fr 1fr 1fr;

    gap: 60px;

}

.footer-about h2 {

    font-size: 34px;

    font-weight: 700;

    line-height: 1.2;

    margin-bottom: 20px;

    color: var(--text);

    transition: var(--transition);

}

.footer-about p {

    color: var(--text-secondary);

    font-size: 18px;

    line-height: 1.8;

    max-width: 400px;

    transition: var(--transition);

}

.footer-column {

    display: flex;

    flex-direction: column;

}

.footer-column h3 {

    margin-bottom: 22px;

    font-size: 22px;

    font-weight: 600;

    color: var(--text);

    transition: var(--transition);

}

.footer-column a {

    margin-bottom: 14px;

    color: var(--text-secondary);

    transition: var(--transition);

}

.footer-column a:hover {

    color: var(--primary);

    padding-left: 4px;

}

.footer-bottom {

    border-top: 1px solid var(--border);

    margin-top: 70px;

    padding: 28px 0;

    text-align: center;

    color: var(--text-secondary);

    font-size: 16px;

    line-height: 1.8;

    transition: var(--transition);

}

.workflow {

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px;
    flex-wrap: nowrap;

}

.workflow-section {

    padding: 120px 0;

    border-top: 1px solid var(--border);

    background: var(--bg);

    transition: var(--transition);

}

.workflow-section h2 {

    text-align: center;

    font-size: 48px;

    margin-bottom: 20px;

    color: var(--text);

    transition: var(--transition);

}

.workflow-section .section-subtitle {

    text-align: center;

    max-width: 700px;

    margin: 0 auto 80px;

    color: var(--text-secondary);

    transition: var(--transition);

}

.step-card {

    width: 250px;

    min-height: 390px;

    padding: 40px 28px;

    background: var(--card);

    border: 1px solid var(--border);

    border-radius: 22px;
    box-sizing: border-box;


    text-align: center;

    transition: var(--transition);

}

.step-card:hover {

    transform: translateY(-10px);

    border-color: var(--primary);

    box-shadow: var(--shadow-card);

}

.step-icon {

    width: 82px;

    height: 82px;

    margin: 0 auto 28px;

    border-radius: 20px;

    background: rgba(212, 175, 55, .08);

    border: 1px solid rgba(212, 175, 55, .30);

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 34px;

    color: var(--primary);

    transition: var(--transition);

}

.step-card:hover .step-icon {

    background: var(--primary);

    color: var(--bg);

}

.step-card h3 {

    font-size: 30px;

    margin-bottom: 18px;

    color: var(--text);

    transition: var(--transition);

}

.step-card p {

    color: var(--text-secondary);

    line-height: 1.8;

    font-size: 17px;

    transition: var(--transition);

}

.step-arrow {

    font-size: 34px;

    color: var(--primary);

    opacity: .85;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: var(--transition);

}

.step-card:last-child {

    background: linear-gradient(180deg,
            rgba(212, 175, 55, .08),
            var(--card));

}

/* ==========================================
   PLATFORM ARCHITECTURE
========================================== */

/*======================================
    ARCHITECTURE
======================================*/

.architecture {
    padding: 120px 0;
    background: var(--bg);
}

.architecture h2 {
    text-align: center;
    font-size: 48px;
    margin-bottom: 18px;
    color: var(--text);
}

.architecture .section-subtitle {
    max-width: 760px;
    margin: 0 auto 70px;
    text-align: center;
    font-size: 19px;
    line-height: 1.8;
    color: var(--text-secondary);
}


/*======================================
    DIAGRAM
======================================*/

.architecture-diagram {
    display: flex;
    flex-direction: column;
    align-items: center;
}


/*======================================
    COMMON CARD
======================================*/

.arch-box {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 35px;
    min-height: 300px;

    display: flex;
    flex-direction: column;
    align-items: center;

    transition: .35s;
}

.arch-box:hover {
    transform: translateY(-8px);
    border-color: var(--primary);
    box-shadow: var(--shadow-card);
}

.arch-box>i {
    font-size: 38px;
    color: var(--primary);
    margin-bottom: 18px;
}

.arch-box h3 {
    font-size: 28px;
    margin-bottom: 12px;
    color: var(--text);
    text-align: center;
}

.arch-description {
    font-size: 18px;
    color: var(--text-secondary);
    line-height: 1.8;
    text-align: center;
    margin-bottom: 25px;
}


/*======================================
    TOP CARD
======================================*/

.center {
    width: 420px;
    background: linear-gradient(180deg, var(--surface), var(--card));
    border: 1px solid rgba(212, 175, 55, .35);
}


/*======================================
    GRID
======================================*/

.architecture-grid {
    width: 990px;
    display: flex;
    justify-content: center;
    gap: 30px;
}

.architecture-grid .arch-box {

    width: 310px;

}


/*======================================
    BOTTOM CARD
======================================*/

.endpoint {
    width: 420px;
    border: 1px solid rgba(212, 175, 55, .35);
}


/*======================================
    CONNECTOR
======================================*/

.arch-line {
    width: 2px;
    height: 65px;
    background: linear-gradient(to bottom,
            transparent,
            var(--primary),
            transparent);
}


/*======================================
    LIST
======================================*/

.arch-list {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

.arch-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 14px 0;
    font-size: 18px;
    line-height: 1.7;
    color: var(--text-secondary);
}

.arch-list li i {
    color: var(--primary);
    font-size: 13px;
    margin-top: 8px;
    flex-shrink: 0;
}


/*======================================
    STATS
======================================*/

.architecture-stats {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 30px;

    margin-top: 80px;

}

.stat-card {

    background: var(--card);

    border: 1px solid var(--border);

    border-radius: 20px;

    padding: 32px;

    text-align: center;

    transition: .35s;

}

.stat-card:hover {

    transform: translateY(-6px);

    border-color: var(--primary);

    box-shadow: var(--shadow-card);

}

.stat-card h3 {

    font-size: 38px;

    color: var(--primary);

    margin-bottom: 10px;

}

.stat-card p {

    font-size: 18px;

    color: var(--text-secondary);

}

/*======================================
    THREAT INTELLIGENCE
======================================*/

.threat-intelligence {

    width: 100%;

    padding: 120px 0;

    background: var(--bg);

}

.threat-intelligence h2 {

    text-align: center;

    font-size: 48px;

    font-weight: 700;

    line-height: 1.2;

    margin-bottom: 20px;

    color: var(--text);

}

.threat-intelligence .section-subtitle {

    text-align: center;

    max-width: 760px;

    margin: 0 auto 50px;

    color: var(--text-secondary);

    font-size: 20px;

    line-height: 1.8;

}




/*======================================
    THREAT CARD
======================================*/

.threat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
    margin-top: 70px;
    align-items: stretch;
}

.threat-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 380px;

    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 22px;

    padding: 40px;

    transition: .35s;
}


.threat-card:hover {

    transform: translateY(-8px);

    border-color: var(--primary);

    box-shadow: var(--shadow-card);

}

.threat-icon {

    width: 70px;

    height: 70px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: var(--radius-card);

    background: rgba(212, 175, 55, .12);

    color: var(--primary);

    font-size: 30px;

    margin-bottom: 25px;

    transition: var(--transition);

}

.threat-card h3 {

    font-size: 28px;

    font-weight: 600;

    line-height: 1.35;

    margin-bottom: 18px;

    color: var(--text);

}

.threat-card p {

    color: var(--text-secondary);

    flex: 1;

    margin-bottom: 30px;

    font-size: 18px;

    line-height: 1.8;


    min-height: 65px;

}

.threat-card a {

    display: inline-flex;
    margin-top: auto;

    align-items: center;

    gap: 10px;

    color: var(--primary);

    font-weight: 600;

    transition: var(--transition);

}

.threat-card a:hover {

    gap: 16px;

}

.threat-card::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: 0;

    width: 0;

    height: 3px;

    background: var(--primary);

    transition: width .35s ease;

}

.threat-card:hover::after {

    width: 100%;

}


/*======================================
    DOCUMENTATION
======================================*/

.documentation {

    width: 100%;

    padding: 100px 0;

    background: var(--surface);

}

.documentation h2 {

    text-align: center;

    font-size: 48px;

    font-weight: 700;

    line-height: 1.2;

    margin-bottom: 20px;

    color: var(--text);

}

.documentation .section-subtitle {

    text-align: center;

    max-width: 760px;

    margin: 0 auto 50px;

    color: var(--text-secondary);

    font-size: 20px;

    line-height: 1.8;

}


/*======================================
    DOCUMENTATION GRID
======================================*/



/*======================================
    ICON
======================================*/

.doc-icon {

    width: 52px;

    height: 52px;

    display: flex;

    justify-content: center;

    align-items: center;

    border-radius: var(--radius-button);

    background: rgba(212, 175, 55, .08);

    color: var(--primary);

    font-size: 22px;

    margin-bottom: 18px;

}


/*======================================
    TAG
======================================*/

.doc-tag {

    display: inline-block;

    width: fit-content;

    padding: 6px 14px;

    border-radius: var(--radius-pill);

    background: rgba(212, 175, 55, .08);

    color: var(--primary);

    font-size: 13px;

    font-weight: 600;

    margin-bottom: 14px;

}


/*======================================
    TITLE
======================================*/

.doc-card h3 {

    font-size: 20px;

    font-weight: 600;

    line-height: 1.35;

    color: var(--text);

    margin-bottom: 12px;

}


/*======================================
    TEXT
======================================*/

.doc-card p {

    color: var(--text-secondary);

    font-size: 16px;

    line-height: 1.8;

    margin-bottom: 18px;

    min-height: 70px;

}


/*======================================
    LINK
======================================*/

.doc-card a {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-top: auto;

    color: var(--primary);

    font-size: 15px;

    font-weight: 600;

    transition: var(--transition);

}

.doc-card a:hover {

    gap: 14px;

}


/*======================================
    GOLD LINE
======================================*/

.doc-card::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: 0;

    width: 0;

    height: 3px;

    background: var(--primary);

    transition: width .35s ease;

}

.doc-card:hover::after {

    width: 100%;

}


/*======================================
    FOOTER LINK
======================================*/

.documentation .section-footer-link {

    width: 100%;

    max-width: 1280px;

    margin: 50px auto 0;

}


/*======================================
    BLOG
======================================*/

.blog {

    padding: 120px 0;

    background: var(--bg);

}

.blog h2 {

    text-align: center;

    font-size: 48px;

    font-weight: 700;

    line-height: 1.2;

    margin-bottom: 20px;

    color: var(--text);

}

.blog-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 30px;

    margin-top: 70px;

}


/*======================================
    BLOG CARD
======================================*/

.blog-card {

    overflow: hidden;

    background: var(--surface);

    border: 1px solid var(--border);

    border-radius: var(--radius-card);

    transition: var(--transition);

}

.blog-card:hover {

    transform: translateY(-8px);

    border-color: var(--primary);

    box-shadow: var(--shadow-card);

}

.blog-image {

    height: 180px;

    display: flex;

    justify-content: center;

    align-items: center;

    background: linear-gradient(135deg, var(--surface), var(--bg));

    font-size: 60px;

    color: var(--primary);

}

.blog-date {

    display: block;

    margin: 25px 30px 12px;

    color: var(--primary);

    font-size: 14px;

    font-weight: 600;

}

.blog-card h3 {

    margin: 0 30px 18px;

    font-size: 28px;

    font-weight: 600;

    line-height: 1.35;

    color: var(--text);

}

.blog-card p {

    margin: 0 30px;

    color: var(--text-secondary);

    font-size: 18px;

    line-height: 1.8;

    min-height: 90px;

}

.blog-card a {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin: 25px 30px 30px;

    color: var(--primary);

    font-size: 15px;

    font-weight: 600;

    transition: var(--transition);

}

.blog-card a:hover {

    gap: 16px;

}

/*======================================
    CTA
======================================*/

.cta {

    padding: 120px 0;

    background: var(--surface);

}

.cta-box {

    max-width: 1000px;

    margin: auto;

    padding: 80px 60px;

    text-align: center;

    background: linear-gradient(135deg,
            var(--card),
            var(--bg));

    border: 1px solid rgba(212, 175, 55, .25);

    border-radius: var(--radius-large);

    box-shadow: var(--shadow-card);

}

/*======================================
    CTA BADGE
======================================*/

.cta-badge {

    display: inline-block;

    padding: 8px 18px;

    border-radius: var(--radius-pill);

    background: rgba(212, 175, 55, .12);

    border: 1px solid rgba(212, 175, 55, .30);

    color: var(--primary);

    font-size: 14px;

    font-weight: 600;

    margin-bottom: 25px;

}

/*======================================
    CTA TEXT
======================================*/

.cta h2 {

    font-size: 48px;

    font-weight: 700;

    line-height: 1.2;

    margin-bottom: 25px;

    color: var(--text);

}

.cta p {

    max-width: 700px;

    margin: auto;

    color: var(--text-secondary);

    font-size: 20px;

    line-height: 1.8;

}

.cta-buttons {

    display: flex;

    justify-content: center;

    gap: 25px;

    margin: 50px 0;

}

.cta-features {

    display: flex;

    justify-content: center;

    gap: 40px;

    flex-wrap: wrap;

}

.cta-features span {

    display: flex;

    align-items: center;

    gap: 10px;

    color: var(--text-secondary);

    font-size: 16px;

    line-height: 1.6;

}

.cta-features i {

    color: var(--primary);

}

/*======================================
    PRODUCT HERO
======================================*/

/*======================================
    PRODUCT HERO
======================================*/

.product-hero {

    background: var(--bg);

    min-height: calc(100vh - 88px);

    display: flex;

    align-items: center;

    padding: 120px 0;

}

.product-hero-container {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 90px;

}

.product-content {

    flex: 1;

}

.product-content h1 {

    font-size: 72px;

    font-weight: 800;

    line-height: 1.05;

    letter-spacing: -2px;

    margin: 25px 0;

    color: var(--text);

}

.product-content p {

    max-width: 620px;

    margin-bottom: 40px;

    color: var(--text-secondary);

    font-size: 21px;

    line-height: 1.8;

}

.product-image {

    flex: 1;

    display: flex;

    justify-content: center;

    align-items: center;

}

.product-image img {

    width: 100%;

    max-width: 760px;

    border-radius: var(--radius-large);

    border: 1px solid var(--border);

    box-shadow: var(--shadow-card);

    transition: var(--transition);

}

.product-image img:hover {

    transform: translateY(-8px);

    box-shadow: var(--shadow-card);

}

/*======================================
    PRODUCT OVERVIEW
======================================*/

.product-overview {

    padding: 120px 0;

    background: var(--surface);

}

.overview-content {

    display: grid;

    grid-template-columns: 1fr 1fr;

    align-items: center;

    gap: 80px;

}

.overview-text h2 {

    margin: 20px 0 30px;

    font-size: 48px;

    font-weight: 700;

    line-height: 1.2;

    color: var(--text);

}

.overview-text p {

    margin-bottom: 40px;

    color: var(--text-secondary);

    font-size: 18px;

    line-height: 1.8;

}

.overview-list {

    display: flex;

    flex-direction: column;

    gap: 18px;

}

.overview-list li {

    display: flex;

    align-items: center;

    gap: 14px;

    color: var(--text);

    font-size: 18px;

    line-height: 1.8;

}

.overview-list i {

    color: var(--primary);

    font-size: 18px;

}

.overview-image img {

    width: 100%;

    border-radius: var(--radius-card);

    border: 1px solid var(--border);

    box-shadow: var(--shadow-card);

}

/*==========================
        AI ENGINE
==========================*/

/*======================================
    AI ENGINE
======================================*/

/*======================================
    AI ENGINE
======================================*/

.ai-engine {

    padding: 120px 0;

    background: var(--bg);

}

.ai-engine-container {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 80px;

    align-items: center;

}

/*======================================
    SECTION TAG
======================================*/

.section-tag {

    display: inline-block;

    padding: 10px 22px;

    border: 1px solid rgba(212, 175, 55, .40);

    border-radius: var(--radius-pill);

    background: rgba(212, 175, 55, .08);

    color: var(--primary);

    font-size: 14px;

    font-weight: 600;

    margin-bottom: 25px;

}

/*======================================
    CONTENT
======================================*/

.ai-content h2 {

    font-size: 48px;

    font-weight: 700;

    line-height: 1.2;

    margin-bottom: 25px;

    color: var(--text);

}

.ai-content p {

    color: var(--text-secondary);

    font-size: 18px;

    line-height: 1.8;

    margin-bottom: 40px;

}

/*======================================
    FEATURES
======================================*/

.ai-features {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 20px;

}

.ai-item {

    display: flex;

    align-items: center;

    gap: 15px;

    padding: 18px 22px;

    background: var(--surface);

    border: 1px solid var(--border);

    border-radius: var(--radius-button);

    transition: var(--transition);

    font-size: 18px;

    font-weight: 600;

    color: var(--text);

}

.ai-item:hover {

    transform: translateY(-5px);

    border-color: var(--primary);

    box-shadow: var(--shadow-card);

}

.ai-item i {

    color: var(--primary);

    font-size: 20px;

}

/*======================================
    DASHBOARD
======================================*/

.ai-dashboard {

    display: flex;

    justify-content: center;

    align-items: center;

}

.ai-dashboard img {

    width: 100%;

    max-width: 620px;

    border-radius: var(--radius-card);

    border: 1px solid var(--border);

    box-shadow: var(--shadow-card);

    transition: var(--transition);

}

.ai-dashboard img:hover {

    transform: scale(1.03);

}

/*======================================
    BEHAVIOR FLOW
======================================*/

.behavior-flow {

    padding: 120px 0;

    background: var(--surface);

}

.behavior-flow h2 {

    text-align: center;

    font-size: 48px;

    font-weight: 700;

    line-height: 1.2;

    margin-bottom: 20px;

    color: var(--text);

}

.behavior-timeline {

    margin-top: 70px;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 24px;

    flex-wrap: wrap;

}

/*======================================
    BEHAVIOR CARD
======================================*/

.behavior-card {

    width: 260px;

    min-height: 330px;

    background: var(--card);

    border: 1px solid var(--border);

    border-radius: var(--radius-card);

    padding: 35px 28px;

    text-align: center;

    transition: var(--transition);

}

.behavior-card:hover {

    transform: translateY(-10px);

    border-color: var(--primary);

    box-shadow: var(--shadow-card);

}

.behavior-icon {

    width: 80px;

    height: 80px;

    margin: 0 auto 24px;

    display: flex;

    justify-content: center;

    align-items: center;

    border-radius: var(--radius-card);

    background: rgba(212, 175, 55, .12);

}

.behavior-icon i {

    font-size: 34px;

    color: var(--primary);

}

.behavior-card h3 {

    margin-bottom: 18px;

    font-size: 24px;

    font-weight: 600;

    line-height: 1.35;

    color: var(--text);

}

.behavior-card p {

    color: var(--text-secondary);

    font-size: 18px;

    line-height: 1.8;

}

.behavior-arrow {

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--primary);

    font-size: 30px;

}

/*==============================
     EXPLAINABLE AI
==============================*/

/*======================================
    EXPLAINABLE AI
======================================*/

/*======================================
    EXPLAINABLE AI
======================================*/

.explainable-ai {

    padding: 120px 0;

    background: var(--bg);

}

.explainable-container {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 70px;

    align-items: center;

}

/*======================================
    CONTENT
======================================*/

.explainable-content h2 {

    font-size: 48px;

    font-weight: 700;

    line-height: 1.2;

    margin: 25px 0;

    color: var(--text);

}

.explainable-content p {

    color: var(--text-secondary);

    font-size: 18px;

    line-height: 1.8;

    margin-bottom: 35px;

}

/*======================================
    GRID
======================================*/

.explainable-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 25px;

}

/*======================================
    CARD
======================================*/

.explain-card {

    background: var(--card);

    border: 1px solid var(--border);

    border-radius: var(--radius-card);

    padding: 30px;

    transition: var(--transition);

}

.explain-card:hover {

    transform: translateY(-8px);

    border-color: var(--primary);

    box-shadow: var(--shadow-card);

}

.explain-card i {

    font-size: 34px;

    color: var(--primary);

    margin-bottom: 20px;

}

.explain-card h3 {

    font-size: 24px;

    font-weight: 600;

    line-height: 1.35;

    margin-bottom: 15px;

    color: var(--text);

}

.explain-card p {

    color: var(--text-secondary);

    font-size: 18px;

    line-height: 1.8;

}

/*======================================
    AUTONOMOUS RESPONSE
======================================*/

.autonomous-response {

    padding: 120px 0;

    background: var(--surface);

    text-align: center;

}

.autonomous-response h2 {

    font-size: 48px;

    font-weight: 700;

    line-height: 1.2;

    margin: 20px 0;

    color: var(--text);

}

/*======================================
    RESPONSE GRID
======================================*/

.response-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 30px;

    margin-top: 70px;

}

/*======================================
    RESPONSE CARD
======================================*/

.response-card {

    background: var(--card);

    border: 1px solid var(--border);

    border-radius: var(--radius-card);

    padding: 35px;

    transition: var(--transition);

}

.response-card:hover {

    transform: translateY(-10px);

    border-color: var(--primary);

    box-shadow: var(--shadow-card);

}

.response-card i {

    font-size: 42px;

    color: var(--primary);

    margin-bottom: 20px;

}

.response-card h3 {

    font-size: 24px;

    font-weight: 600;

    line-height: 1.35;

    margin-bottom: 15px;

    color: var(--text);

}

.response-card p {

    color: var(--text-secondary);

    font-size: 18px;

    line-height: 1.8;

}

/*======================================
    PLATFORM BENEFITS
======================================*/

.platform-benefits {

    padding: 120px 0;

    background: var(--bg);

    text-align: center;

}

.platform-benefits .section-tag {

    display: block;

    width: fit-content;

    margin: 0 auto 20px;

}

.benefits-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 30px;

    margin-top: 70px;

}

/*======================================
    BENEFIT CARD
======================================*/

.benefit-card {

    background: var(--card);

    border: 1px solid var(--border);

    border-radius: var(--radius-card);

    padding: 45px;

    transition: var(--transition);

}

.benefit-card:hover {

    transform: translateY(-8px);

    border-color: var(--primary);

    box-shadow: var(--shadow-card);

}

.benefit-card h3 {

    font-size: 46px;

    font-weight: 700;

    line-height: 1.2;

    color: var(--primary);

    margin-bottom: 15px;

}

.benefit-card p {

    color: var(--text-secondary);

    font-size: 18px;

    line-height: 1.8;

}

/*======================================
    DASHBOARD GALLERY
======================================*/

.dashboard-gallery {

    padding: 120px 0;

    background: var(--surface);

}

.gallery-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 30px;

    margin-top: 70px;

}

.gallery-grid img {

    width: 100%;

    border-radius: var(--radius-card);

    border: 1px solid var(--border);

    box-shadow: var(--shadow-card);

    transition: var(--transition);

}

.gallery-grid img:hover {

    transform: scale(1.04);

}

/*======================================
    FAQ
======================================*/

.faq {

    padding: 120px 0;

    background: var(--bg);

}

.faq h2 {

    text-align: center;

    font-size: 48px;

    font-weight: 700;

    line-height: 1.2;

    margin: 20px 0;

    color: var(--text);

}

.faq .section-tag {

    display: block;

    width: fit-content;

    margin: 0 auto 20px;

}

.faq-grid {

    display: grid;

    gap: 25px;

    margin-top: 60px;

}

.faq-item {

    background: var(--card);

    border: 1px solid var(--border);

    border-radius: var(--radius-card);

    padding: 30px;

    transition: var(--transition);

}

.faq-item:hover {

    transform: translateY(-5px);

    border-color: var(--primary);

    box-shadow: var(--shadow-card);

}

.faq-item h3 {

    margin-bottom: 12px;

    font-size: 24px;

    font-weight: 600;

    line-height: 1.35;

    color: var(--text);

}

.faq-item p {

    color: var(--text-secondary);

    font-size: 18px;

    line-height: 1.8;

}

/*======================================
    PRODUCT CTA
======================================*/

.product-cta {

    padding: 140px 0;

    background: linear-gradient(180deg,
            var(--surface),
            var(--bg));

    text-align: center;

}

.product-cta .section-tag {

    display: block;

    width: fit-content;

    margin: 0 auto 20px;

}

.product-cta h2 {

    font-size: 54px;

    font-weight: 700;

    line-height: 1.2;

    margin-bottom: 20px;

    color: var(--text);

}

.product-cta p {

    color: var(--text-secondary);

    font-size: 20px;

    line-height: 1.8;

    margin-bottom: 40px;

}

/*======================================
    PLATFORM MODULES
======================================*/

.platform-modules {

    padding: 120px 0;

    background: var(--surface);

}

.platform-modules h2 {

    text-align: center;

    font-size: 48px;

    font-weight: 700;

    line-height: 1.2;

    margin: 20px 0;

    color: var(--text);

}

.platform-modules .section-tag {

    display: block;

    width: fit-content;

    margin: 0 auto 20px;

}

.platform-modules .section-subtitle {

    text-align: center;

    max-width: 760px;

    margin: 0 auto 70px;

    color: var(--text-secondary);

    font-size: 20px;

    line-height: 1.8;

}

.modules-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 30px;

}

.module-card {

    background: var(--card);

    border: 1px solid var(--border);

    border-radius: var(--radius-card);

    padding: 40px;

    transition: var(--transition);

}

.module-card:hover {

    transform: translateY(-10px);

    border-color: var(--primary);

    box-shadow: var(--shadow-card);

}

.module-card i {

    font-size: 40px;

    color: var(--primary);

    margin-bottom: 25px;

}

.module-card h3 {

    font-size: 26px;

    font-weight: 600;

    line-height: 1.35;

    margin-bottom: 15px;

    color: var(--text);

}

.module-card p {

    color: var(--text-secondary);

    font-size: 18px;

    line-height: 1.8;

}

/*======================================
    COMMON TITLES
======================================*/

.platform-benefits h2,
.dashboard-gallery h2 {

    text-align: center;

    font-size: 48px;

    font-weight: 700;

    line-height: 1.2;

    margin: 20px 0;

    color: var(--text);

}

.dashboard-gallery .section-tag {

    display: block;

    width: fit-content;

    margin: 0 auto 20px;

}

/*==============================
SOLUTIONS HERO
==============================*/

/*==============================
SOLUTIONS HERO
==============================*/

.solutions-hero {
    padding: 120px 0;
    background: var(--bg);
}

.solutions-hero-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 80px;
}

.solutions-content {
    flex: 1;
}

.solutions-content h1 {
    font-size: 72px;
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -2px;
    color: var(--text);
    margin: 24px 0;
}

.solutions-content p {
    font-size: 18px;
    color: var(--text-secondary);
    line-height: 1.85;
    max-width: 650px;
    margin-bottom: 40px;
}

.solutions-image {
    flex: 1;
    text-align: center;
}

.solutions-image img {
    width: 100%;
    max-width: 650px;
    border-radius: var(--radius-large);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-card);
    transition: var(--transition);
}

.solutions-image img:hover {
    transform: translateY(-8px);
}

.industries {
    padding: 120px 0;
    background: var(--surface);
}

.industries h2 {
    text-align: center;
    color: var(--text);
    font-size: 48px;
    margin: 20px 0;
}

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

.industry-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 40px;
    transition: var(--transition);
}

.industry-card:hover {
    transform: translateY(-8px);
    border-color: var(--primary);
    box-shadow: var(--shadow-card);
}

.industry-card i {
    font-size: 42px;
    color: var(--primary);
    margin-bottom: 24px;
}

.industry-card h3 {
    color: var(--text);
    font-size: 24px;
    margin-bottom: 18px;
}

.industry-card p {
    color: var(--text-secondary);
    font-size: 18px;
    line-height: 1.85;
}

.enterprise-security {
    padding: 120px 0;
    background: var(--bg);
}

.enterprise-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.enterprise-content h2 {
    font-size: 48px;
    line-height: 1.2;
    margin: 24px 0;
    color: var(--text);
}

.enterprise-content p {
    color: var(--text-secondary);
    font-size: 18px;
    line-height: 1.85;
    margin-bottom: 36px;
}

.enterprise-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.enterprise-list li {
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--text);
    font-size: 18px;
}

.enterprise-list i {
    color: var(--primary);
    font-size: 18px;
}

.enterprise-image {
    display: flex;
    justify-content: center;
}

.enterprise-image img {
    width: 100%;
    max-width: 620px;
    border-radius: var(--radius-large);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-card);
    transition: var(--transition);
}

.enterprise-image img:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-card);
}

/*==============================
SMB SECURITY
==============================*/

/*=========================
SMB SECURITY
==========================*/

.smb-security {
    padding: 120px 0;
    background: var(--bg);
}

.smb-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 80px;
    align-items: center;
}

.smb-image {
    display: flex;
    justify-content: center;
}

.smb-image img {
    width: 100%;
    max-width: 620px;
    border-radius: var(--radius-large);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-card);
    transition: var(--transition);
}

.smb-image img:hover {
    transform: translateY(-8px);
}

.smb-content h2 {
    font-size: 48px;
    line-height: 1.2;
    margin: 24px 0;
    font-weight: 700;
    color: var(--text);
}

.smb-content p {
    color: var(--text-secondary);
    font-size: 18px;
    line-height: 1.85;
    margin-bottom: 35px;
}

.smb-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.smb-list li {
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--text);
    font-size: 18px;
    line-height: 1.85;
}

.smb-list i {
    color: var(--primary);
    font-size: 18px;
}

/*=========================
DEVELOPER SECURITY
==========================*/

.developer-security {
    padding: 120px 0;
    background: var(--bg);
}

.developer-security h2 {
    text-align: center;
    font-size: 48px;
    font-weight: 700;
    margin: 24px 0;
    color: var(--text);
}

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

.developer-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 40px;
    transition: var(--transition);
}

.developer-card:hover {
    transform: translateY(-10px);
    border-color: var(--primary);
    box-shadow: var(--shadow-card);
}

.developer-card i {
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 28px;
    font-size: 30px;
    color: var(--primary);
    background: rgba(212, 175, 55, .12);
    border: 1px solid rgba(212, 175, 55, .20);
    border-radius: var(--radius-card);
    transition: var(--transition);
}

.developer-card:hover i {
    background: var(--primary);
    color: var(--bg);
}

.developer-card h3 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 18px;
    line-height: 1.35;
    color: var(--text);
}

.developer-card p {
    color: var(--text-secondary);
    font-size: 18px;
    line-height: 1.85;
}


/*==================================
MSSP SECURITY
==================================*/

/*==================================
MSSP SECURITY
==================================*/

.mssp-security {
    padding: 120px 0;
    background: var(--bg);
}

.mssp-security h2 {
    text-align: center;
    font-size: 48px;
    font-weight: 700;
    line-height: 1.2;
    margin: 24px 0;
    color: var(--text);
}

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

.mssp-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 40px;
    transition: var(--transition);
}

.mssp-card:hover {
    transform: translateY(-10px);
    border-color: var(--primary);
    box-shadow: var(--shadow-card);
}

.mssp-card i {
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-card);
    background: rgba(212, 175, 55, .12);
    border: 1px solid rgba(212, 175, 55, .20);
    color: var(--primary);
    font-size: 30px;
    margin-bottom: 28px;
    transition: var(--transition);
}

.mssp-card:hover i {
    background: var(--primary);
    color: var(--bg);
}

.mssp-card h3 {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.35;
    margin-bottom: 18px;
    color: var(--text);
}

.mssp-card p {
    color: var(--text-secondary);
    font-size: 18px;
    line-height: 1.85;
}

/*==================================
        WHY CORIXOR
===================================*/

/*======================================
    WHY CORIXOR
======================================*/

.why-corixor {

    padding: 120px 0;

    background: var(--bg);

}

.why-corixor h2 {

    text-align: center;

    font-size: 48px;

    font-weight: 700;

    line-height: 1.2;

    margin: 24px 0;

    color: var(--text);

}

.why-corixor .section-tag {

    display: block;

    width: fit-content;

    margin: 0 auto 20px;

}

.why-corixor-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 30px;

    margin-top: 70px;

}

/*======================================
    CARD
======================================*/

.corixor-card {

    background: var(--card);

    border: 1px solid var(--border);

    border-radius: var(--radius-card);

    padding: 40px;

    transition: var(--transition);

}

.corixor-card:hover {

    transform: translateY(-10px);

    border-color: var(--primary);

    box-shadow: var(--shadow-card);

}

.corixor-icon {

    width: 72px;

    height: 72px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: var(--radius-card);

    background: rgba(212, 175, 55, .12);

    border: 1px solid rgba(212, 175, 55, .20);

    margin-bottom: 28px;

    transition: var(--transition);

}

.corixor-card:hover .corixor-icon {

    background: var(--primary);

}

.corixor-icon i {

    font-size: 30px;

    color: var(--primary);

    transition: var(--transition);

}

.corixor-card:hover .corixor-icon i {

    color: var(--bg);

}

.corixor-card h3 {

    font-size: 24px;

    font-weight: 600;

    line-height: 1.35;

    margin-bottom: 18px;

    color: var(--text);

}

.corixor-card p {

    color: var(--text-secondary);

    font-size: 18px;

    line-height: 1.85;

}


/*=========================
      SOLUTIONS CTA
==========================*/

.solutions-cta {

    padding: 120px 0;

    background: var(--surface);

}

.solutions-cta-box {

    max-width: 1000px;

    margin: auto;

    text-align: center;

    padding: 80px 60px;

    border-radius: var(--radius-large);

    background: linear-gradient(135deg,
            var(--card),
            var(--surface));

    border: 1px solid var(--border);

    box-shadow: var(--shadow-card);

}

.solutions-cta h2 {

    font-size: 48px;

    font-weight: 700;

    line-height: 1.2;

    margin: 24px 0;

    color: var(--text);

}

.solutions-cta p {

    max-width: 700px;

    margin: auto;

    color: var(--text-secondary);

    font-size: 18px;

    line-height: 1.85;

}

.solutions-cta .cta-buttons {

    display: flex;

    justify-content: center;

    gap: 24px;

    margin: 48px 0;

}

.solutions-cta .cta-features {

    display: flex;

    justify-content: center;

    gap: 36px;

    flex-wrap: wrap;

}

.solutions-cta .cta-features span {

    display: flex;

    align-items: center;

    gap: 10px;

    color: var(--text);

    font-size: 16px;

}

.solutions-cta .cta-features i {

    color: var(--primary);

}

.compare-hero {

    padding: 120px 0 100px;

    background: var(--bg);

}

.compare-hero-container {

    display: grid;

    grid-template-columns: 1fr 1fr;

    align-items: center;

    gap: 80px;

}

.compare-content h1 {

    font-size: 64px;
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -2px;
    margin: 24px 0;
    color: var(--text);

}

.compare-content p {

    max-width: 620px;

    font-size: 18px;

    line-height: 1.85;

    color: var(--text-secondary);

    margin-bottom: 40px;

}

.compare-image {

    display: flex;

    justify-content: center;

}

.compare-image img {

    width: 100%;

    max-width: 640px;

    border-radius: var(--radius-large);

    border: 1px solid var(--border);

    box-shadow: var(--shadow-card);

    transition: var(--transition);

}

.compare-image img:hover {

    transform: translateY(-8px);

    box-shadow: 0 42px 100px rgba(212, 175, 55, .15);

}

/* =========================
   Why Compare
========================= */

/* ====================================
   Compare Hero
==================================== */

.compare-hero {
    padding: 120px 0 100px;
    background: var(--bg-color);
}

.compare-hero-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 70px;
}

.compare-content h1 {
    font-size: 72px;
    line-height: 1.1;
    margin: 24px 0;
    font-weight: 800;
    letter-spacing: -2px;
}

.compare-content p {
    font-size: 18px;
    color: var(--text-light);
    line-height: 1.8;
    margin-bottom: 40px;
    max-width: 620px;
}

.compare-image {
    display: flex;
    justify-content: center;
}

.compare-image img {
    width: 100%;
    max-width: 620px;
    border-radius: var(--radius-large);
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 30px 70px rgba(0, 0, 0, .45);
    transition: .35s;
}

.compare-image img:hover {
    transform: translateY(-8px);
}

/* ==========================================
   Why Compare
========================================== */

.why-compare {
    padding: 120px 0;
    background: var(--section-bg);
}

.why-compare .section-subtitle {
    max-width: 760px;
    margin: 0 auto 70px;
    text-align: center;
}

.why-compare-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.container h2 {
    font-size: 48px;
    font-weight: 800;
    color: var(--white);
    margin: 20px 0;
    line-height: 1.2;
}

/* ==========================================
   Compare Platforms
========================================== */

.compare-platforms {

    padding: 120px 0;

    background: var(--bg);

}

.platform-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 30px;

    margin-top: 70px;

}

.platform-card {

    background: var(--card);

    border: 1px solid var(--border);

    border-radius: var(--radius-card);

    padding: 40px;

    transition: var(--transition);

}

.platform-card:hover {

    transform: translateY(-8px);

    border-color: var(--primary);

    box-shadow: var(--shadow-card);

}

.platform-card i {

    font-size: 32px;

    color: var(--primary);

    margin-bottom: 24px;

}

.platform-card h3 {

    font-size: 24px;

    margin-bottom: 16px;

    line-height: 1.4;

    color: var(--text);

}

.platform-card p {

    color: var(--text-secondary);

    line-height: 1.8;

    margin-bottom: 30px;

}

.platform-card a {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    color: var(--primary);

    font-weight: 600;

    text-decoration: none;

    transition: var(--transition);

}

.platform-card:hover a {

    gap: 16px;

}

/*======================================
   FEATURE COMPARISON TABLE
======================================*/

.comparison-table-section {
    padding: 120px 0;
    background: var(--bg-color);
}

.comparison-table-section h2 {
    text-align: center;
    font-size: 48px;
    margin-bottom: 20px;
}

.comparison-table-section .section-subtitle {
    max-width: 760px;
    margin: 0 auto 70px;
    text-align: center;
    color: var(--text-light);
    line-height: 1.8;
}

.table-wrapper {
    overflow-x: auto;
}

.compare-table {

    width: 100%;

    min-width: 1050px;

    border-collapse: collapse;

    border-radius: var(--radius-card);

    overflow: hidden;

    background: var(--card);

}

.compare-table thead th {

    padding: 22px 20px;

    font-size: 16px;

    font-weight: 700;

    color: var(--text);

    text-align: center;

    border-bottom: 1px solid var(--border);

}

.compare-table thead th:first-child {

    text-align: left;

    padding-left: 35px;

}

.quicksecure-head {

    background: rgba(212, 175, 55, .10);

    color: var(--primary);

    border: none;

}

.compare-table tbody tr {

    border-bottom: 1px solid var(--border);

    transition: var(--transition);

}

.compare-table tbody tr:nth-child(even) {

    background: rgba(127, 127, 127, .04);

}

.compare-table tbody tr:hover {

    background: rgba(212, 175, 55, .06);

}

.compare-table td {

    padding: 22px 18px;

    text-align: center;

    color: var(--text-secondary);

}

.compare-table td:first-child {

    text-align: left;

    padding-left: 35px;

    font-weight: 600;

    color: var(--text);

    width: 260px;

}

/* Status */

.status {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 10px 18px;

    border-radius: var(--radius-pill);

    font-size: 14px;

    font-weight: 600;

    min-width: 130px;

}

.status.success {

    background: rgba(34, 197, 94, .15);

    color: #22c55e;

}

.status.warning {

    background: rgba(245, 158, 11, .15);

    color: #f59e0b;

}

.status.danger {

    background: rgba(239, 68, 68, .15);

    color: #ef4444;

}

/*======================================
PERFORMANCE
======================================*/

.performance-section {

    padding: 120px 0;

    background: var(--bg);

}

.performance-grid {

    margin-top: 70px;

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 30px;

}

.performance-card {

    background: var(--card);

    border: 1px solid var(--border);

    border-radius: var(--radius-card);

    padding: 45px;

    transition: var(--transition);

}

.performance-card:hover {

    transform: translateY(-8px);

    border-color: var(--primary);

    box-shadow: var(--shadow-card);

}

.performance-card h3 {

    font-size: 46px;

    color: var(--primary);

    margin-bottom: 15px;

    font-weight: 700;

}

.performance-card h4 {

    font-size: 24px;

    margin-bottom: 20px;

    line-height: 1.4;

    color: var(--text);

}

.performance-card p {

    color: var(--text-secondary);

    font-size: 16px;

    line-height: 1.8;

}

/*======================================
WHY CHOOSE
======================================*/

.choose-section {

    padding: 120px 0;

    background: var(--bg);

}

.choose-grid {

    margin-top: 70px;

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 30px;

}

.choose-card {

    background: var(--card);

    border: 1px solid var(--border);

    border-radius: var(--radius-card);

    padding: 40px;

    transition: var(--transition);

}

.choose-card:hover {

    transform: translateY(-8px);

    border-color: var(--primary);

    box-shadow: var(--shadow-card);

}

.choose-card i {

    font-size: 36px;

    color: var(--primary);

    margin-bottom: 24px;

}

.choose-card h3 {

    margin-bottom: 16px;

    font-size: 24px;

    line-height: 1.4;

    color: var(--text);

}

.choose-card p {

    color: var(--text-secondary);

    font-size: 16px;

    line-height: 1.8;

}


/*======================================
COMPARE CTA
======================================*/

.compare-cta {

    padding: 120px 0;

    background: var(--surface);

}

.compare-cta .cta-box {

    max-width: 1000px;

    margin: auto;

    background: linear-gradient(135deg,
            var(--card),
            var(--bg));

    border: 1px solid rgba(212, 175, 55, .25);

    border-radius: var(--radius-large);

    text-align: center;

    padding: 80px 60px;

    box-shadow: var(--shadow-card);

}

.compare-cta .cta-box h2 {

    font-size: 48px;

    margin-bottom: 24px;

    line-height: 1.2;

    color: var(--text);

}

.compare-cta .cta-box p {

    max-width: 700px;

    margin: 0 auto 40px;

    color: var(--text-secondary);

    font-size: 18px;

    line-height: 1.8;

}

.compare-cta .hero-buttons {

    justify-content: center;

    gap: 20px;

}

/*======================================
DOCUMENTATION HERO
======================================*/

.documentation-hero {

    padding: 120px 0 100px;

    background: var(--bg);

}

.documentation-hero-container {

    display: grid;

    grid-template-columns: 1fr 1fr;

    align-items: center;

    gap: 80px;

}

.documentation-content h1 {

    font-size: 72px;

    line-height: 1.1;

    margin: 24px 0;

    font-weight: 800;

    letter-spacing: -2px;

    color: var(--text);

}

.documentation-content p {

    max-width: 620px;

    color: var(--text-secondary);

    font-size: 18px;

    line-height: 1.8;

    margin-bottom: 40px;

}

.documentation-image {

    text-align: center;

}

.documentation-image img {

    width: 100%;

    max-width: 620px;

    border-radius: var(--radius-large);

    border: 1px solid var(--border);

    box-shadow: var(--shadow-card);

    transition: var(--transition);

}

.documentation-image img:hover {

    transform: translateY(-8px);

}

/*======================================
DOCUMENTATION CATEGORIES
======================================*/

.documentation-categories {

    padding: 120px 0;

    background: var(--surface);

}

.documentation-categories h2 {

    text-align: center;

    font-size: 48px;

    margin: 20px 0;

    color: var(--text);

}

.documentation-categories .section-tag {

    display: block;

    width: fit-content;

    margin: 0 auto 20px;

}

.documentation-categories .section-subtitle {

    max-width: 760px;

    margin: 0 auto 70px;

    text-align: center;

    color: var(--text-secondary);

    font-size: 18px;

    line-height: 1.8;

}

.docs-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 30px;

}

.doc-card {

    background: var(--card);

    border: 1px solid var(--border);

    border-radius: var(--radius-card);

    padding: 40px;

    text-decoration: none;

    transition: var(--transition);

    display: flex;

    flex-direction: column;

    height: 100%;

}

.doc-card:hover {

    transform: translateY(-8px);

    border-color: var(--primary);

    box-shadow: var(--shadow-card);

}

.doc-card i {

    width: 70px;

    height: 70px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: var(--radius-button);

    background: rgba(212, 175, 55, .12);

    color: var(--primary);

    font-size: 30px;

    margin-bottom: 24px;

    transition: var(--transition);

}

.doc-card:hover i {

    background: var(--primary);

    color: var(--bg);

}

.doc-card h3 {

    color: var(--text);

    font-size: 24px;

    margin-bottom: 16px;

    transition: var(--transition);

}

.doc-card p {

    color: var(--text-secondary);

    font-size: 16px;

    line-height: 1.8;

    margin-bottom: 24px;

    flex: 1;

    transition: var(--transition);

}

.doc-card span {

    color: var(--primary);

    font-weight: 600;

    transition: var(--transition);

}


/*======================================
FEATURED DOCUMENTATION
======================================*/

/*======================================
FEATURED DOCS
======================================*/

.featured-docs {
    padding: 120px 0;
    background: var(--surface);
    text-align: center;
}

.featured-docs .section-tag {
    display: block;
    width: fit-content;
    margin: 0 auto 20px;
}

.featured-docs h2 {
    font-size: 48px;
    margin-bottom: 20px;
    color: var(--text);
}

.featured-docs .section-subtitle {
    max-width: 760px;
    margin: 0 auto 70px;
    color: var(--text-secondary);
    font-size: 18px;
    line-height: 1.8;
}

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

.featured-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 40px;
    text-align: left;
    transition: var(--transition);
}

.featured-card:hover {
    transform: translateY(-8px);
    border-color: var(--primary);
    box-shadow: var(--shadow-card);
}

.featured-icon {
    width: 70px;
    height: 70px;
    border-radius: var(--radius-button);
    background: rgba(212, 175, 55, .12);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    transition: var(--transition);
}

.featured-card:hover .featured-icon {
    background: var(--primary);
}

.featured-icon i {
    font-size: 30px;
    color: var(--primary);
    transition: var(--transition);
}

.featured-card:hover .featured-icon i {
    color: var(--bg);
}

.featured-card h3 {
    font-size: 30px;
    margin-bottom: 24px;
    color: var(--text);
}

.featured-card ul {
    list-style: none;
    padding: 0;
    margin: 0 0 32px;
}

.featured-card ul li {
    color: var(--text-secondary);
    margin-bottom: 18px;
    font-size: 16px;
    line-height: 1.8;
    position: relative;
    padding-left: 24px;
}

.featured-card ul li::before {
    content: "•";
    color: var(--primary);
    position: absolute;
    left: 0;
}

.featured-card a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--primary);
    font-weight: 600;
    transition: .3s;
}

.featured-card a:hover {
    gap: 16px;
}


/*======================================
API & INTEGRATION
======================================*/

.api-section {
    padding: 120px 0;
    background: var(--surface);
    text-align: center;
}

.api-section .section-tag {
    display: block;
    width: fit-content;
    margin: 0 auto 20px;
}

.api-section h2 {
    font-size: 48px;
    margin-bottom: 20px;
    color: var(--text);
}

.api-section .section-subtitle {
    max-width: 760px;
    margin: 0 auto 70px;
    color: var(--text-secondary);
    font-size: 18px;
    line-height: 1.8;
}

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

.api-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 40px;
    transition: var(--transition);
}

.api-card:hover {
    transform: translateY(-8px);
    border-color: var(--primary);
    box-shadow: var(--shadow-card);
}

.api-card i {
    font-size: 34px;
    color: var(--primary);
    margin-bottom: 24px;
}

.api-card h3 {
    margin-bottom: 16px;
    font-size: 24px;
    color: var(--text);
}

.api-card p {
    color: var(--text-secondary);
    font-size: 16px;
    line-height: 1.8;
}


/*======================================
WHITEPAPERS
======================================*/

.whitepapers {
    padding: 120px 0;
    background: var(--bg);
    text-align: center;
}

.whitepapers .section-tag {
    display: block;
    width: fit-content;
    margin: 0 auto 20px;
}

.whitepapers h2 {
    font-size: 48px;
    margin-bottom: 20px;
    color: var(--text);
}

.whitepapers .section-subtitle {
    max-width: 760px;
    margin: 0 auto 70px;
    color: var(--text-secondary);
    font-size: 18px;
    line-height: 1.8;
}

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

.whitepaper-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 40px;
    text-align: left;
    text-decoration: none;
    transition: var(--transition);
}

.whitepaper-card:hover {
    transform: translateY(-8px);
    border-color: var(--primary);
    box-shadow: var(--shadow-card);
}

.whitepaper-card i {
    font-size: 34px;
    color: var(--primary);
    margin-bottom: 24px;
}

.whitepaper-card h3 {
    margin-bottom: 16px;
    color: var(--text);
    font-size: 24px;
}

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

.whitepaper-card span {
    color: var(--primary);
    font-weight: 600;
}

/*======================================
DOCUMENTATION CTA
======================================*/

/*======================================
DOCUMENTATION CTA
======================================*/

/*======================================
DOCUMENTATION CTA
======================================*/

.documentation-cta {
    padding: 120px 0;
    background: var(--surface);
}

.documentation-cta-box {
    max-width: 900px;
    margin: auto;
    text-align: center;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-large);
    padding: 80px 60px;
    transition: var(--transition);
}

.documentation-cta-box:hover {
    transform: translateY(-8px);
    border-color: var(--primary);
    box-shadow: var(--shadow-card);
}

.documentation-cta .section-tag {
    display: block;
    width: fit-content;
    margin: 0 auto 24px;
}

.documentation-cta h2 {
    font-size: 48px;
    margin-bottom: 24px;
    color: var(--text);
}

.documentation-cta p {
    max-width: 700px;
    margin: 0 auto 40px;
    color: var(--text-secondary);
    font-size: 18px;
    line-height: 1.8;
}

.documentation-cta .cta-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.documentation-cta .btn-primary,
.documentation-cta .btn-secondary {
    min-width: 210px;
}


/*======================================
BLOG HERO
======================================*/

.blog-hero {
    padding: 120px 0 100px;
    background: var(--surface);
}

.blog-hero-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.blog-hero-content .section-tag {
    margin-bottom: 24px;
}

.blog-hero-content h1 {
    font-size: 72px;
    line-height: 1.1;
    margin-bottom: 24px;
    font-weight: 800;
    letter-spacing: -2px;
    color: var(--text);
}

.blog-hero-content p {
    max-width: 620px;
    font-size: 18px;
    line-height: 1.8;
    color: var(--text-secondary);
    margin-bottom: 40px;
}

.hero-buttons {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}

.blog-hero-image {
    display: flex;
    justify-content: center;
    align-items: center;
}

.blog-hero-image img {
    width: 100%;
    max-width: 620px;
    border-radius: var(--radius-large);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-card);
    transition: var(--transition);
}

.blog-hero-image img:hover {
    transform: translateY(-8px);
}


/*======================================
BLOG SEARCH
======================================*/

.blog-search {
    padding: 80px 0;
    background: var(--bg);
}

.search-box {
    max-width: 850px;
    margin: auto;
    display: flex;
    overflow: hidden;
    border-radius: 60px;
    background: var(--card);
    border: 1px solid var(--border);
}

.search-box input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text);
    font-size: 16px;
    padding: 22px 28px;
}

.search-box input::placeholder {
    color: var(--text-secondary);
}

.search-box button {
    border: none;
    cursor: pointer;
    background: var(--primary);
    color: var(--bg);
    font-weight: 700;
    padding: 0 35px;
    transition: var(--transition);
}

.search-box button:hover {
    opacity: .9;
}

/*======================================
BLOG CATEGORIES
======================================*/

/*======================================
BLOG CATEGORIES
======================================*/

.blog-categories {
    padding: 120px 0;
    background: var(--surface);
}

.blog-categories .section-tag {
    display: block;
    width: fit-content;
    margin: 0 auto 20px;
}

.blog-categories h2 {
    text-align: center;
    font-size: 48px;
    margin-bottom: 70px;
    color: var(--text);
}

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

.category-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 40px 25px;
    text-align: center;
    text-decoration: none;
    transition: var(--transition);
}

.category-card:hover {
    transform: translateY(-8px);
    border-color: var(--primary);
    box-shadow: var(--shadow-card);
}

.category-card i {
    font-size: 36px;
    color: var(--primary);
    margin-bottom: 24px;
}

.category-card h3 {
    color: var(--text);
    font-size: 22px;
}


/*======================================
FEATURED ARTICLE
======================================*/

.featured-article {
    padding: 120px 0;
    background: var(--bg);
}

.featured-article .section-tag {
    display: block;
    width: fit-content;
    margin: 0 auto 20px;
}

.featured-article h2 {
    text-align: center;
    font-size: 48px;
    margin-bottom: 70px;
    color: var(--text);
}

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

.featured-text {
    background: var(--card);
    padding: 50px;
    border-radius: var(--radius-large);
    border: 1px solid var(--border);
}

.featured-label {
    display: inline-block;
    background: rgba(212, 175, 55, .12);
    color: var(--primary);
    padding: 8px 18px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 24px;
}

.featured-text h3 {
    font-size: 36px;
    margin-bottom: 20px;
    color: var(--text);
}

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

.featured-text ul {
    list-style: none;
    margin-bottom: 35px;
    padding: 0;
}

.featured-text ul li {
    margin-bottom: 15px;
    color: var(--text);
}

.featured-text ul li::before {
    content: "✔";
    color: var(--primary);
    margin-right: 12px;
}

.read-btn {
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
}

.featured-image img {
    width: 100%;
    border-radius: var(--radius-large);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-card);
}


/*======================================
LATEST ARTICLES
======================================*/

.latest-articles {
    padding: 120px 0;
    background: var(--surface);
}

.latest-articles .section-tag {
    display: block;
    width: fit-content;
    margin: 0 auto 20px;
}

.latest-articles h2 {
    text-align: center;
    font-size: 48px;
    margin-bottom: 70px;
    color: var(--text);
}

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

.article-card {
    background: var(--card);
    border-radius: var(--radius-card);
    padding: 35px;
    border: 1px solid var(--border);
    transition: var(--transition);
}

.article-card:hover {
    transform: translateY(-8px);
    border-color: var(--primary);
    box-shadow: var(--shadow-card);
}

.article-time {
    color: var(--primary);
    font-size: 14px;
    font-weight: 600;
}

.article-card h3 {
    margin: 18px 0;
    font-size: 24px;
    color: var(--text);
}

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

.article-card a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
}


/*======================================
THREAT INTELLIGENCE
======================================*/

.threat-intelligence {
    padding: 120px 0;
    background: var(--bg);
}

.threat-intelligence .section-tag {
    display: block;
    width: fit-content;
    margin: 0 auto 20px;
}

.threat-intelligence h2 {
    text-align: center;
    font-size: 48px;
    margin-bottom: 70px;
    color: var(--text);
}

.threat-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 35px;
    text-align: center;
    transition: var(--transition);
}

.threat-card:hover {
    transform: translateY(-8px);
    border-color: var(--primary);
    box-shadow: var(--shadow-card);
}

.threat-card h3 {
    margin-bottom: 18px;
    font-size: 24px;
    color: var(--text);
}

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

.threat-card a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
}

/*======================================
RESEARCH PAPERS
======================================*/
.research-papers {
    padding: 120px 0;
    background: var(--section-bg);
}

.research-papers .section-tag {
    display: block;
    width: fit-content;
    margin: 0 auto 20px;
}

.research-papers h2 {
    text-align: center;
    font-size: 48px;
    margin-bottom: 70px;
}

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

.paper-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-card);
    padding: 35px;
    text-align: center;
    transition: var(--transition);
}

.paper-card:hover {
    transform: translateY(-8px);
    border-color: var(--primary-color);
    box-shadow: var(--shadow-card);
}

.paper-card span {
    display: inline-block;
    color: var(--primary-color);
    margin-bottom: 18px;
    font-weight: 600;
}

.paper-card h3 {
    font-size: 24px;
    margin-bottom: 24px;
}

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

.paper-card a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
}


/*======================================
CASE STUDIES
======================================*/

.case-studies {
    padding: 120px 0;
    background: var(--bg-color);
}

.case-studies .section-tag {
    display: block;
    width: fit-content;
    margin: 0 auto 20px;
}

.case-studies h2 {
    text-align: center;
    font-size: 48px;
    margin-bottom: 70px;
}

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

.case-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-card);
    padding: 40px;
    transition: var(--transition);
}

.case-card:hover {
    transform: translateY(-8px);
    border-color: var(--primary-color);
    box-shadow: var(--shadow-card);
}

.case-card h3 {
    font-size: 24px;
    margin-bottom: 20px;
}

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

.case-card a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
}


/*======================================
NEWSLETTER CTA
======================================*/

.newsletter-cta {
    padding: 120px 0;
    background: var(--section-bg);
}

.newsletter-box {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-large);
    padding: 80px 70px;
    text-align: center;
    transition: var(--transition);
}

.newsletter-box:hover {
    transform: translateY(-8px);
    border-color: var(--primary-color);
    box-shadow: var(--shadow-card);
}

.newsletter-box .section-tag {
    display: block;
    width: fit-content;
    margin: 0 auto 20px;
}

.newsletter-box h2 {
    font-size: 48px;
    margin-bottom: 20px;
}

.newsletter-box p {
    max-width: 700px;
    margin: 0 auto 40px;
    color: var(--text-light);
    font-size: 18px;
    line-height: 1.8;
}

.newsletter-form {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.newsletter-form input {
    width: 420px;
    padding: 18px 22px;
    border: 1px solid var(--border-color);
    outline: none;
    border-radius: 12px;
    background: var(--card-bg);
    color: var(--text-color);
    font-size: 16px;
}

.newsletter-form input::placeholder {
    color: var(--text-muted);
}

.newsletter-form input:focus {
    border-color: var(--primary-color);
}

.newsletter-form button {
    padding: 18px 40px;
    border: none;
    border-radius: 12px;
    background: var(--primary-color);
    color: var(--bg-color);
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
}

.newsletter-form button:hover {
    opacity: .9;
}

/*======================================
   FAQ HERO
======================================*/

.faq-hero {

    padding: 120px 0 100px;
    background: var(--bg-color);

}

.faq-hero-container {

    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 80px;

}

.faq-content h1 {

    font-size: 65px;

    font-weight: 800;

    line-height: 1.05;

    letter-spacing: -2px;

    margin-bottom: 28px;
}

.faq-content p {

    max-width: 620px;
    color: var(--text-light);
    line-height: 1.8;
    font-size: 1.08rem;
    margin-bottom: 40px;

}

.faq-image {

    display: flex;
    justify-content: center;

}

.faq-image img {

    width: 100%;
    max-width: 600px;

}

/*======================================
   FAQ SEARCH
======================================*/

.faq-search {

    padding: 60px 0 100px;
    background: var(--bg-color);

}

.faq-search-box {

    max-width: 900px;
    margin: auto;

    display: flex;
    align-items: center;

    background: var(--card-bg);

    border: 1px solid var(--border-color);

    border-radius: 60px;

    overflow: hidden;

}

.faq-search-box input {

    flex: 1;

    background: none;

    border: none;

    outline: none;

    color: var(--text-color);

    padding: 22px 30px;

    font-size: 1rem;

}

.faq-search-box input::placeholder {

    color: var(--text-muted);

}

.faq-search-box button {

    border: none;

    background: var(--primary-color);

    color: var(--bg-color);

    padding: 22px 35px;

    cursor: pointer;

    font-size: 1rem;

    font-weight: 600;

    display: flex;
    align-items: center;
    gap: 10px;

    transition: var(--transition);

}

.faq-search-box button:hover {

    background: var(--primary-hover);

}

/*======================================
   POPULAR QUESTIONS
======================================*/

.popular-questions {
    padding: 100px 0;
    background: var(--bg-color);
}

.popular-questions .section-tag {
    display: inline-block;
    left: 50%;
    transform: translateX(-50%);
    position: relative;
}

.popular-questions h2 {
    text-align: center;
    font-size: 2.8rem;
    margin: 25px 0 60px;
    color: var(--text-color);
}

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

.popular-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    padding: 35px;
    text-decoration: none;
    transition: var(--transition);
}

.popular-card:hover {
    transform: translateY(-8px);
    border-color: var(--primary-color);
}

.popular-card h3 {
    color: var(--text-color);
    font-size: 1.2rem;
    margin-bottom: 25px;
    line-height: 1.6;
}

.popular-card span {
    color: var(--primary-color);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}


/*======================================
   FAQ SECTIONS
======================================*/
.faq-section {
    padding: 100px 0;
    background: var(--bg-color);
}

.faq-section .section-tag {
    display: inline-block;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

.faq-section h2 {
    text-align: center;
    font-size: 2.8rem;
    color: var(--text-color);
    margin: 25px 0 60px;
}

.faq-container {
    max-width: 900px;
    margin: auto;
}

.faq-item {

    background: var(--card-bg);

    border: 1px solid var(--border-color);

    border-radius: 16px;

    margin-bottom: 20px;

    overflow: hidden;

    transition: var(--transition);

}

.faq-item:hover {

    border-color: var(--primary-color);

    box-shadow: var(--shadow-card);

}

.faq-question {

    width: 100%;

    background: transparent;

    border: none;

    color: var(--text-color);

    padding: 25px 30px;

    cursor: pointer;

    display: flex;

    justify-content: space-between;

    align-items: center;

    font-size: 1.08rem;

    font-weight: 600;

    transition: var(--transition);

}

.faq-question:hover {

    color: var(--primary-color);

}

.faq-question i {

    color: var(--primary-color);

    transition: var(--transition);

}

.faq-answer {

    max-height: 0;

    overflow: hidden;

    transition: .4s ease;

}

.faq-answer p {

    color: var(--text-light);

    line-height: 1.9;

    padding: 0 30px 25px;

}

.faq-item.active .faq-answer {

    max-height: 300px;

}

.faq-item.active i {

    transform: rotate(45deg);

}

/*======================================
   FAQ CTA
======================================*/



/*======================================
    ABOUT HERO
======================================*/

.about-hero {
    padding: 170px 0 120px;
    background: var(--bg-color);
}

.about-hero-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    gap: 70px;
}

.about-hero-content h1 {
    font-size: 65px;

    font-weight: 800;

    line-height: 1.05;

    letter-spacing: -2px;

    margin-bottom: 28px;
}

.about-hero-content p {
    font-size: 1.1rem;
    color: var(--text-light);
    line-height: 1.9;
    margin-bottom: 40px;
    max-width: 650px;
}

.about-hero-image {
    display: flex;
    justify-content: center;
}

.about-hero-image img {
    width: 100%;
    max-width: 600px;
}

/*======================================
    MISSION & VISION
======================================*/

.our-mission,
.our-vision {

    padding: 110px 0;
    background: var(--bg);

}

.our-mission .section-tag,
.our-vision .section-tag {

    display: inline-block;
    position: relative;
    left: 50%;
    transform: translateX(-50%);

}

.our-mission h2,
.our-vision h2 {

    text-align: center;
    color: var(--text);
    font-size: 2.8rem;
    margin: 25px 0;

}

.our-mission .section-subtitle,
.our-vision .section-subtitle {

    max-width: 850px;
    margin: auto;
    text-align: center;
    color: var(--text-secondary);
    line-height: 1.9;

}


/*======================================
    WHY CORIXOR
======================================*/

.why-corixor {

    padding: 110px 0;
    background: var(--bg);

}

.why-corixor .section-tag {

    display: inline-block;
    position: relative;
    left: 50%;
    transform: translateX(-50%);

}

.why-corixor h2 {

    text-align: center;
    font-size: 2.8rem;
    color: var(--text);
    margin: 25px 0 70px;

}


/*======================================
    CORE VALUES
======================================*/

.core-values {

    padding: 110px 0;
    background: var(--bg);

}

.core-values .section-tag {

    display: inline-block;
    position: relative;
    left: 50%;
    transform: translateX(-50%);

}

.core-values h2 {

    text-align: center;
    font-size: 2.8rem;
    color: var(--text);
    margin: 25px 0 70px;

}

.values-grid {

    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;

}

.value-card {

    background: var(--card);
    padding: 35px;
    border-radius: 20px;
    border: 1px solid var(--border);
    transition: var(--transition);

}

.value-card:hover {

    transform: translateY(-8px);
    border-color: var(--primary);

}

.value-card h3 {

    color: var(--text);
    margin-bottom: 15px;

}

.value-card p {

    color: var(--text-secondary);
    line-height: 1.8;

}


/*======================================
    LEADERSHIP
======================================*/

.leadership {

    padding: 110px 0;
    background: var(--bg);

}

.leadership .section-tag {

    display: inline-block;
    position: relative;
    left: 50%;
    transform: translateX(-50%);

}

.leadership h2 {

    text-align: center;
    font-size: 2.8rem;
    color: var(--text);
    margin: 25px 0 70px;

}

.leadership-grid {

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 35px;

}

.leader-card {

    background: var(--card);
    padding: 30px;
    text-align: center;
    border-radius: 20px;
    border: 1px solid var(--border);
    transition: var(--transition);

}

.leader-card:hover {

    transform: translateY(-8px);
    border-color: var(--primary);

}

.leader-card img {

    width: 140px;
    height: 140px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 25px;

}

.leader-card h3 {

    color: var(--text);
    margin-bottom: 10px;

}

.leader-card span {

    color: var(--primary);

}


/*======================================
    COMPANY TIMELINE
======================================*/

.company-timeline {

    padding: 110px 0;
    background: var(--bg);

}

.company-timeline .section-tag {

    display: inline-block;
    position: relative;
    left: 50%;
    transform: translateX(-50%);

}

.company-timeline h2 {

    text-align: center;
    font-size: 2.8rem;
    color: var(--text);
    margin: 25px 0 70px;

}

.timeline {

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

}

.timeline-item {

    background: var(--card);
    padding: 40px;
    border-radius: 20px;
    text-align: center;
    border: 1px solid var(--border);

}

.timeline-item h3 {

    color: var(--primary);
    font-size: 2rem;
    margin-bottom: 15px;

}

.timeline-item p {

    color: var(--text-secondary);

}


/*======================================
    GLOBAL PRESENCE
======================================*/

.global-presence {

    padding: 110px 0;
    background: var(--bg);

}

.global-presence .section-tag {

    display: inline-block;
    position: relative;
    left: 50%;
    transform: translateX(-50%);

}

.global-presence h2 {

    text-align: center;
    color: var(--text);
    font-size: 2.8rem;
    margin: 25px 0;

}

.global-presence .section-subtitle {

    max-width: 850px;
    margin: auto;
    text-align: center;
    color: var(--text-secondary);
    line-height: 1.9;

}


/*======================================
    PARTNERS
======================================*/

.partners {

    padding: 110px 0;
    background: var(--bg-color);

}

.partners .section-tag {

    display: inline-block;
    position: relative;
    left: 50%;
    transform: translateX(-50%);

}

.partners h2 {

    text-align: center;
    font-size: 2.8rem;
    color: var(--text);
    margin: 25px 0 70px;

}

.partner-grid {

    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;

}

.partner-card {

    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 35px 20px;
    text-align: center;
    color: var(--text);
    font-weight: 600;
    transition: .35s;

}

.partner-card:hover {

    border-color: var(--primary);
    transform: translateY(-6px);

}


/*======================================
    ABOUT CTA
======================================*/

.about-cta {

    padding: 120px 0;
    background: var(--bg-color);

}

.about-cta .container {

    max-width: 900px;
    background: var(--card);
    padding: 70px;
    border-radius: 24px;
    text-align: center;
    border: 1px solid var(--border);

}

.about-cta h2 {

    color: var(--text);
    font-size: 2.8rem;
    margin-bottom: 20px;

}

.about-cta p {

    color: var(--text-light);
    line-height: 1.8;
    margin-bottom: 40px;

}

.cta-buttons {

    display: flex;
    justify-content: center;
    gap: 20px;

}

/*======================================
    CONTACT HERO
======================================*/

.contact-hero {

    padding: 170px 0 120px;
    background: var(--bg-color);

}

.contact-hero-container {

    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    gap: 70px;

}

.contact-hero-content h1 {

    font-size: 65px;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -2px;
    margin-bottom: 28px;
    color: var(--text);

}

.contact-hero-content p {

    color: var(--text-light);
    line-height: 1.9;
    font-size: 1.08rem;
    margin-bottom: 40px;
    max-width: 620px;

}

.contact-hero-image {

    display: flex;
    justify-content: center;

}

.contact-hero-image img {

    width: 100%;
    max-width: 560px;

}


/*======================================
    CONTACT CARDS
======================================*/

.contact-cards {

    padding: 110px 0;
    background: var(--bg-color);

}

.contact-card-grid {

    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;

}

.contact-card {

    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 22px;
    padding: 40px 30px;
    transition: .35s;
    text-align: center;

}

.contact-card:hover {

    transform: translateY(-8px);
    border-color: var(--primary);

}

.contact-card i {

    font-size: 2.6rem;
    color: var(--primary);
    margin-bottom: 25px;

}

.contact-card h3 {

    color: var(--text);
    margin-bottom: 15px;
    font-size: 1.35rem;

}

.contact-card p {

    color: var(--text-light);
    line-height: 1.8;
    margin-bottom: 25px;

}

.contact-card a {

    color: var(--primary);
    text-decoration: none;
    font-weight: 600;

}

.contact-card a:hover {

    color: var(--text);

}

/*======================================
    CONTACT FORM
======================================*/

.contact-form-section {
    padding: 110px 0;
    background: var(--bg-color);
}

.contact-form-section .section-tag {
    display: inline-block;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

.contact-form-section h2 {
    text-align: center;
    color: var(--text);
    font-size: 2.8rem;
    margin: 25px 0 60px;
}

.contact-form {
    max-width: 900px;
    margin: auto;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 50px;
}

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

.contact-form input,
.contact-form textarea {

    width: 100%;
    padding: 18px 20px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 14px;
    color: var(--text);
    font-size: 1rem;
    outline: none;

}

.contact-form textarea {
    resize: none;
    margin-bottom: 30px;
}

.contact-form input:focus,
.contact-form textarea:focus {

    border-color: var(--primary);

}


/*======================================
    OFFICE LOCATIONS
======================================*/

.office-locations {
    padding: 110px 0;
    background: var(--bg-color);
}

.office-locations .section-tag {
    display: inline-block;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

.office-locations h2 {
    text-align: center;
    color: var(--text);
    font-size: 2.8rem;
    margin: 25px 0 70px;
}

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

.office-card {

    background: var(--card);
    border-radius: 20px;
    border: 1px solid var(--border);
    padding: 35px;
    text-align: center;
    transition: .35s;

}

.office-card:hover {

    transform: translateY(-8px);
    border-color: var(--primary);

}

.office-card h3 {

    color: var(--text);
    margin-bottom: 15px;

}

.office-card p {

    color: var(--text-light);
    line-height: 1.7;

}

/*======================================
    SUPPORT CHANNELS
======================================*/

.support-channels {
    padding: 110px 0;
    background: var(--bg-color);
}

.support-channels .section-tag {
    display: inline-block;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

.support-channels h2 {
    text-align: center;
    color: var(--text);
    font-size: 2.8rem;
    margin: 25px 0 70px;
}

.support-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 25px;
}

.support-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 35px 25px;
    text-align: center;
    transition: .35s;
}

.support-card:hover {
    transform: translateY(-8px);
    border-color: var(--primary);
}

.support-card i {
    font-size: 2.3rem;
    color: var(--primary);
    margin-bottom: 20px;
}

.support-card h3 {
    color: var(--text);
    font-size: 1.15rem;
}


/*======================================
    FAQ PREVIEW
======================================*/

.faq-preview {
    padding: 110px 0;
    background: var(--bg-color);
}

.faq-preview .section-tag {
    display: inline-block;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

.faq-preview h2 {
    text-align: center;
    color: var(--text);
    font-size: 2.8rem;
    margin: 25px 0 70px;
}

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

.faq-preview-grid a {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 30px;
    color: var(--text);
    text-decoration: none;
    transition: .35s;

    display: flex;
    justify-content: space-between;
    align-items: center;
}

.faq-preview-grid a:hover {
    transform: translateY(-8px);
    border-color: var(--primary);
}

.faq-preview-grid span {
    color: var(--primary);
    font-weight: 600;
}


/*======================================
    MAP
======================================*/

.contact-map {
    padding: 110px 0;
    background: var(--bg-color);
}

.contact-map .section-tag {
    display: inline-block;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

.contact-map h2 {
    text-align: center;
    color: var(--text);
    font-size: 2.8rem;
    margin: 25px 0 60px;
}

.map-image {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 24px;
    overflow: hidden;
}

.map-image img {
    width: 100%;
    display: block;
}


/*======================================
    CONTACT CTA
======================================*/

.contact-cta {
    padding: 120px 0;
    background: var(--bg-color);
}

.contact-cta .container {
    max-width: 900px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 70px;
    text-align: center;
}

.contact-cta h2 {
    color: var(--text);
    font-size: 2.8rem;
    margin-bottom: 20px;
}

.contact-cta p {
    color: var(--text-light);
    line-height: 1.9;
    margin-bottom: 40px;
}

.contact-cta .cta-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
}

/*======================================
    PLATFORM HERO
======================================*/

.platform-hero {
    padding: 170px 0 120px;
    background: var(--bg-color);
}

.platform-hero-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    gap: 70px;
}

.platform-hero-content h1 {
    font-size: 3.6rem;
    color: var(--text);
    line-height: 1.2;
    margin: 25px 0;
}

.platform-hero-content p {
    color: var(--text-light);
    line-height: 1.9;
    font-size: 1.08rem;
    max-width: 650px;
    margin-bottom: 40px;
}

.platform-hero-image {
    display: flex;
    justify-content: center;
}

.platform-hero-image img {
    width: 100%;
    max-width: 600px;
}


/*======================================
    PLATFORM OVERVIEW
======================================*/

.platform-overview {
    padding: 110px 0;
    background: var(--bg-color);
}

.platform-overview .section-tag {
    display: inline-block;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

.platform-overview h2 {
    text-align: center;
    font-size: 2.8rem;
    color: var(--text);
    margin: 25px 0;
}

.platform-overview .section-subtitle {
    max-width: 900px;
    margin: auto;
    text-align: center;
    color: var(--text-light);
    line-height: 1.9;
}


/*======================================
    PLATFORM ARCHITECTURE
======================================*/

.platform-architecture {
    padding: 110px 0;
    background: var(--bg-color);
}

.platform-architecture .section-tag {
    display: inline-block;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

.platform-architecture h2 {
    text-align: center;
    color: var(--text);
    font-size: 2.8rem;
    margin: 25px 0 70px;
}

.architecture-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 30px;
}

.architecture-card {
    width: 100%;
    max-width: none;
    min-width: 0;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 22px;
    padding: 45px 30px;
    text-align: center;
    transition: .35s;
}

.architecture-card:hover {
    transform: translateY(-8px);
    border-color: var(--primary);
}

.architecture-card i {
    font-size: 2.8rem;
    color: var(--primary);
    margin-bottom: 25px;
}

.architecture-card h3 {
    color: var(--text);
    font-size: 1.25rem;
}

/*======================================
    CORE MODULES
======================================*/

.core-modules {
    padding: 110px 0;
    background: var(--bg-color);
}

.core-modules .section-tag {
    display: inline-block;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

.core-modules h2 {
    text-align: center;
    color: var(--text);
    font-size: 2.8rem;
    margin: 25px 0 70px;
}

.modules-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 30px;

}

.module-card {

    background: var(--card);

    border: 1px solid var(--border);

    border-radius: 20px;

    padding: 40px 30px;

    text-align: center;

    transition: var(--transition);

}

.module-card:hover {

    transform: translateY(-8px);

    border-color: var(--primary);

    box-shadow: var(--shadow-card);

}

.module-card h3 {

    color: var(--text);

    font-size: 1.25rem;

    transition: var(--transition);

}

.module-card p {

    color: var(--text-secondary);

    margin-top: 15px;

    line-height: 1.8;

    transition: var(--transition);

}

/*======================================
    AI DETECTION PIPELINE
======================================*/

.ai-pipeline {
    padding: 110px 0;
    background: var(--bg-color);
}

.ai-pipeline .section-tag {
    display: inline-block;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

.ai-pipeline h2 {
    text-align: center;
    color: var(--text);
    font-size: 2.8rem;
    margin: 25px 0 70px;
}

.pipeline {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.pipeline div {
    background: var(--card);
    color: var(--text);
    padding: 20px 28px;
    border-radius: 18px;
    border: 1px solid var(--border);
    font-weight: 600;
    transition: .35s;
}

.pipeline div:hover {
    border-color: var(--primary);
    transform: translateY(-5px);
}

.pipeline i {
    color: var(--primary);
    font-size: 1.4rem;
}

/*======================================
    CLOUD INFRASTRUCTURE
======================================*/

.cloud-infrastructure {
    padding: 110px 0;
    background: var(--bg);
}

.cloud-infrastructure .section-tag {
    display: inline-block;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

.cloud-infrastructure h2 {
    text-align: center;
    color: var(--text);
    font-size: 2.8rem;
    margin: 25px 0 70px;
}

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

.cloud-card {
    background: var(--card);
    padding: 40px 30px;
    text-align: center;
    border-radius: 20px;
    border: 1px solid var(--border);
    transition: var(--transition);
}

.cloud-card:hover {
    border-color: var(--primary);
    transform: translateY(-8px);
    box-shadow: var(--shadow-card);
}

.cloud-card h3 {
    color: var(--text);
}


/*======================================
    INTEGRATIONS
======================================*/

.integrations {
    padding: 110px 0;
    background: var(--bg);
}

.integrations .section-tag {
    display: inline-block;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

.integrations h2 {
    text-align: center;
    color: var(--text);
    font-size: 2.8rem;
    margin: 25px 0 70px;
}

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

.integration-card {
    background: var(--card);
    padding: 35px;
    border-radius: 18px;
    border: 1px solid var(--border);
    text-align: center;
    color: var(--text);
    font-weight: 600;
    transition: var(--transition);
}

.integration-card:hover {
    border-color: var(--primary);
    transform: translateY(-6px);
    box-shadow: var(--shadow-card);
}


/*======================================
    PERFORMANCE METRICS
======================================*/

.performance-metrics {
    padding: 110px 0;
    background: var(--bg);
}

.performance-metrics .section-tag {
    display: inline-block;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

.performance-metrics h2 {
    text-align: center;
    color: var(--text);
    font-size: 2.8rem;
    margin: 25px 0 70px;
}

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

.metric-card {
    background: var(--card);
    text-align: center;
    padding: 45px 30px;
    border-radius: 22px;
    border: 1px solid var(--border);
    transition: var(--transition);
}

.metric-card:hover {
    border-color: var(--primary);
    transform: translateY(-8px);
    box-shadow: var(--shadow-card);
}

.metric-card h3 {
    font-size: 2.6rem;
    color: var(--primary);
    margin-bottom: 15px;
}

.metric-card p {
    color: var(--text-secondary);
}


/*======================================
    SECURITY WORKFLOW
======================================*/

.security-workflow {
    padding: 110px 0;
    background: var(--bg);
}

.security-workflow .section-tag {
    display: inline-block;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

.security-workflow h2 {
    text-align: center;
    color: var(--text);
    font-size: 2.8rem;
    margin: 25px 0 70px;
}


/*======================================
    PLATFORM CTA
======================================*/

.platform-cta {
    padding: 120px 0;
    background: var(--bg);
}

.platform-cta .container {
    max-width: 900px;
    background: var(--card);
    border-radius: 24px;
    border: 1px solid var(--border);
    padding: 70px;
    text-align: center;
    transition: var(--transition);
}

.platform-cta .container:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-card);
    transform: translateY(-8px);
}

.platform-cta h2 {
    color: var(--text);
    font-size: 2.8rem;
    margin-bottom: 20px;
}

.platform-cta p {
    color: var(--text-secondary);
    line-height: 1.9;
    margin-bottom: 40px;
}

.platform-cta .cta-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
}


/*======================================
    SECTION FOOTER LINK
======================================*/

.section-footer-link {

    margin-top: 60px;

    background: var(--card);

    border: 1px solid var(--border);

    border-radius: 18px;

    padding: 35px 40px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 40px;

    transition: var(--transition);

}

.section-footer-link:hover {

    border-color: var(--primary);

    transform: translateY(-4px);

    box-shadow: var(--shadow-card);

}

.section-footer-link a {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 14px 22px;

    border: 1px solid var(--primary);

    border-radius: 50px;

    color: var(--primary);

    font-weight: 600;

    transition: var(--transition);

    white-space: nowrap;

}

.section-footer-link a:hover {

    background: var(--primary);

    color: var(--bg);

}

.section-footer-content h4 {

    font-size: 1.7rem;

    margin-bottom: 12px;

    color: var(--text);

}

.section-footer-content p {

    color: var(--text-secondary);

    line-height: 1.8;

    max-width: 700px;

}

/*======================================
    ENTERPRISE HERO
======================================*/

.enterprise-hero {
    padding: 160px 0 120px;
    background: var(--bg-color);
}

.enterprise-hero-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    gap: 70px;
}

.enterprise-content h1 {
    font-size: 3.8rem;
    line-height: 1.15;
    margin: 25px 0;
    color: #fff;
}

.enterprise-content p {
    max-width: 640px;
    color: var(--text-light);
    line-height: 1.9;
    font-size: 1.08rem;
    margin-bottom: 40px;
}

.enterprise-image {
    display: flex;
    justify-content: center;
}

.enterprise-image img {
    width: 100%;
    max-width: 620px;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 25px 60px rgba(0, 0, 0, .35);
}

.enterprise-hero .hero-buttons {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}


/*======================================
    ENTERPRISE CHALLENGES
======================================*/

.enterprise-challenges {
    padding: 120px 0;
    background: var(--bg-secondary);
}

.enterprise-challenges .section-tag {
    display: block;
    width: fit-content;
    margin: 0 auto 20px;
}

.enterprise-challenges h2 {
    text-align: center;
    font-size: 2.9rem;
    margin-bottom: 20px;
}

.enterprise-challenges .section-subtitle {
    max-width: 760px;
    margin: 0 auto 70px;
    text-align: center;
    color: var(--text-light);
    line-height: 1.9;
}

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

.challenge-card {
    background: #1a2133;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 22px;
    padding: 40px;
    transition: .35s;
}

.challenge-card:hover {
    transform: translateY(-8px);
    border-color: var(--primary-color);
    box-shadow: 0 20px 45px rgba(0, 0, 0, .35);
}

.challenge-card i {
    font-size: 38px;
    color: var(--primary-color);
    margin-bottom: 25px;
}

.challenge-card h3 {
    font-size: 1.45rem;
    margin-bottom: 18px;
    color: #fff;
}

.challenge-card p {
    color: var(--text-light);
    line-height: 1.9;
}


/*======================================
    WHY ENTERPRISE
======================================*/

.why-enterprise {
    padding: 120px 0;
    background: var(--bg-color);
}

.why-enterprise .section-tag {
    display: block;
    width: fit-content;
    margin: 0 auto 20px;
}

.why-enterprise h2 {
    text-align: center;
    font-size: 2.9rem;
    margin-bottom: 20px;
}

.why-enterprise .section-subtitle {
    max-width: 760px;
    margin: 0 auto 70px;
    text-align: center;
    color: var(--text-light);
    line-height: 1.9;
}

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



.why-card:hover {
    transform: translateY(-8px);
    border-color: var(--primary-color);
    box-shadow: 0 20px 45px rgba(0, 0, 0, .35);
}

.why-card i {
    font-size: 38px;
    color: var(--primary-color);
    margin-bottom: 25px;
}




/*======================================
    PLATFORM ARCHITECTURE
======================================*/

.platform-architecture {
    padding: 120px 0;
    background: var(--bg-secondary);
}

.platform-architecture .section-tag {
    display: block;
    width: fit-content;
    margin: 0 auto 20px;
}

.platform-architecture h2 {
    text-align: center;
    color: var(--text);
    font-size: 2.9rem;
    margin-bottom: 20px;
}

.platform-architecture .section-subtitle {
    max-width: 760px;
    margin: 0 auto 80px;
    text-align: center;
    color: var(--text-secondary);
    line-height: 1.9;
}

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

.architecture-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 22px;
    padding: 45px 30px;
    text-align: center;
    transition: var(--transition);
}

.architecture-card:hover {
    transform: translateY(-8px);
    border-color: var(--primary);
    box-shadow: var(--shadow-card);
}

.architecture-card i {
    font-size: 2.8rem;
    color: var(--primary);
    margin-bottom: 25px;
}

.architecture-card h3 {
    color: var(--text);
    font-size: 1.25rem;
    line-height: 1.6;
}

.architecture-flow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
}


.flow-arrow {
    font-size: 32px;
    color: var(--primary-color);
}

/*======================================
    ENTERPRISE FEATURES
======================================*/

.enterprise-features {
    padding: 120px 0;
    background: var(--bg-color);
}

.enterprise-features .section-tag {
    display: block;
    width: fit-content;
    margin: 0 auto 20px;
}

.enterprise-features h2 {
    text-align: center;
    font-size: 2.9rem;
    margin-bottom: 20px;
}

.enterprise-features .section-subtitle {
    max-width: 760px;
    margin: 0 auto 70px;
    text-align: center;
    color: var(--text-light);
    line-height: 1.9;
}




/*======================================
    ENTERPRISE COMPLIANCE
======================================*/

.enterprise-compliance {
    padding: 120px 0;
    background: var(--bg-secondary);
}

.enterprise-compliance .section-tag {
    display: block;
    width: fit-content;
    margin: 0 auto 20px;
}

.enterprise-compliance h2 {
    text-align: center;
    font-size: 2.9rem;
    margin-bottom: 20px;
}

.enterprise-compliance .section-subtitle {
    max-width: 760px;
    margin: 0 auto 70px;
    text-align: center;
    color: var(--text-light);
    line-height: 1.9;
}

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

.compliance-card {
    display: flex;
    align-items: center;
    gap: 25px;
    background: #1a2133;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 22px;
    padding: 30px;
    transition: .35s;
}

.compliance-card:hover {
    transform: translateY(-6px);
    border-color: var(--primary-color);
}

.compliance-icon {
    width: 70px;
    height: 70px;
    border-radius: 18px;
    background: rgba(212, 175, 55, .12);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

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

.compliance-content {
    flex: 1;
}

.compliance-content h3 {
    margin-bottom: 10px;
    color: #fff;
}

.compliance-content p {
    color: var(--text-light);
    line-height: 1.8;
}

.status-badge {
    padding: 8px 16px;
    border-radius: 50px;
    background: rgba(212, 175, 55, .15);
    color: var(--primary-color);
    font-size: .85rem;
    font-weight: 600;
}


/*======================================
    ENTERPRISE CTA
======================================*/

.enterprise-cta {
    padding: 120px 0;
    background: var(--bg-color);
    text-align: center;
}

.enterprise-cta .section-tag {
    display: block;
    width: fit-content;
    margin: 0 auto 20px;
}

.enterprise-cta h2 {
    font-size: 3.2rem;
    line-height: 1.2;
    margin-bottom: 25px;
}

.enterprise-cta .section-subtitle {
    max-width: 760px;
    margin: 0 auto 45px;
    color: var(--text-light);
    line-height: 1.9;
}

.enterprise-cta .hero-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 55px;
}

.enterprise-cta .cta-features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

.enterprise-cta .cta-feature {
    background: #1a2133;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 18px;
    padding: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    transition: .35s;
}

.enterprise-cta .cta-feature:hover {
    transform: translateY(-5px);
    border-color: var(--primary-color);
}

.enterprise-cta .cta-feature i {
    color: var(--primary-color);
    font-size: 18px;
}

.enterprise-cta .cta-feature span {
    color: #fff;
    font-weight: 500;
}

/*======================================
    HEALTHCARE HERO
======================================*/

.healthcare-hero {
    padding: 170px 0 120px;
    background: var(--bg-color);
}

.healthcare-hero-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    gap: 70px;
}

.healthcare-content h1 {
    font-size: 3.6rem;
    line-height: 1.2;
    color: #fff;
    margin: 25px 0;
}

.healthcare-content p {
    font-size: 1.08rem;
    color: var(--text-light);
    line-height: 1.9;
    margin-bottom: 40px;
    max-width: 650px;
}

.healthcare-image {
    display: flex;
    justify-content: center;
}

.healthcare-image img {
    width: 100%;
    max-width: 620px;
}

.healthcare-content .hero-buttons {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 50px;
}

.hero-stats {
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
}

.hero-stat h3 {
    font-size: 2rem;
    color: #d4af37;
    margin-bottom: 8px;
}

.hero-stat span {
    color: var(--text-light);
    font-size: .95rem;
}


/*======================================
    HEALTHCARE CHALLENGES
======================================*/

.healthcare-challenges {
    padding: 120px 0;
    background: var(--bg-color);
}

.healthcare-challenges .section-tag {
    display: block;
    width: fit-content;
    margin: 0 auto 20px;
}

.healthcare-challenges h2 {
    text-align: center;
    color: #fff;
    font-size: 2.9rem;
    margin-bottom: 25px;
}

.healthcare-challenges .section-subtitle {
    max-width: 800px;
    margin: 0 auto 70px;
    text-align: center;
    color: var(--text-light);
    line-height: 1.9;
}

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

.healthcare-card {
    background: #141d31;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 20px;
    padding: 40px;
    transition: .35s;
}

.healthcare-card:hover {
    transform: translateY(-8px);
    border-color: #d4af37;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
}

.healthcare-card i {
    font-size: 38px;
    color: #d4af37;
    margin-bottom: 25px;
}

.healthcare-card h3 {
    color: #fff;
    font-size: 1.55rem;
    margin-bottom: 18px;
    line-height: 1.3;
}

.healthcare-card p {
    color: var(--text-light);
    line-height: 1.9;
}

/*======================================
    HIPAA COMPLIANCE
======================================*/

.hipaa-compliance {
    padding: 120px 0;
    background: var(--bg-color);
}

.hipaa-compliance .section-tag {
    display: block;
    width: fit-content;
    margin: 0 auto 20px;
}

.hipaa-compliance h2 {
    text-align: center;
    color: #fff;
    font-size: 2.9rem;
    margin-bottom: 25px;
}

.hipaa-compliance .section-subtitle {
    max-width: 800px;
    margin: 0 auto 70px;
    text-align: center;
    color: var(--text-light);
    line-height: 1.9;
}

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

.hipaa-card {
    background: #141d31;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 20px;
    padding: 40px;
    transition: .35s;
}

.hipaa-card:hover {
    transform: translateY(-8px);
    border-color: #d4af37;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
}

.hipaa-card i {
    font-size: 38px;
    color: #d4af37;
    margin-bottom: 22px;
}

.hipaa-card h3 {
    color: #fff;
    font-size: 1.55rem;
    margin-bottom: 18px;
    line-height: 1.3;
}

.hipaa-card p {
    color: var(--text-light);
    line-height: 1.9;
}


/*======================================
    MEDICAL DEVICE SECURITY
======================================*/

.medical-device-security {
    padding: 120px 0;
    background: var(--bg-color);
}

.medical-device-security .section-tag {
    display: block;
    width: fit-content;
    margin: 0 auto 20px;
}

.medical-device-security h2 {
    text-align: center;
    color: #fff;
    font-size: 2.9rem;
    margin-bottom: 25px;
}

.medical-device-security .section-subtitle {
    max-width: 800px;
    margin: 0 auto 70px;
    text-align: center;
    color: var(--text-light);
    line-height: 1.9;
}

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

.device-card {
    background: #141d31;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 20px;
    padding: 40px;
    transition: .35s;
}

.device-card:hover {
    transform: translateY(-8px);
    border-color: #d4af37;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
}

.device-card i {
    font-size: 38px;
    color: #d4af37;
    margin-bottom: 22px;
}

.device-card h3 {
    color: #fff;
    font-size: 1.55rem;
    margin-bottom: 18px;
    line-height: 1.3;
}

.device-card p {
    color: var(--text-light);
    line-height: 1.9;
}


/*======================================
    HOSPITAL NETWORK
======================================*/

.hospital-network {
    padding: 120px 0;
    background: var(--bg-color);
}

.hospital-network .section-tag {
    display: block;
    width: fit-content;
    margin: 0 auto 20px;
}

.hospital-network h2 {
    text-align: center;
    color: #fff;
    font-size: 2.9rem;
    margin-bottom: 25px;
}

.hospital-network .section-subtitle {
    max-width: 800px;
    margin: 0 auto 70px;
    text-align: center;
    color: var(--text-light);
    line-height: 1.9;
}

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

.hospital-card {
    background: #141d31;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 20px;
    padding: 40px;
    transition: .35s;
}

.hospital-card:hover {
    transform: translateY(-8px);
    border-color: #d4af37;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
}

.hospital-card i {
    font-size: 38px;
    color: #d4af37;
    margin-bottom: 22px;
}

.hospital-card h3 {
    color: #fff;
    font-size: 1.55rem;
    margin-bottom: 18px;
    line-height: 1.3;
}

.hospital-card p {
    color: var(--text-light);
    line-height: 1.9;
}

/*======================================
    HEALTHCARE CASE STUDY
======================================*/

.healthcare-case-study {
    padding: 120px 0;
    background: var(--bg-color);
}

.healthcare-case-study .section-tag {
    display: block;
    width: fit-content;
    margin: 0 auto 20px;
}

.healthcare-case-study h2 {
    text-align: center;
    color: #fff;
    font-size: 2.9rem;
    margin-bottom: 25px;
}

.healthcare-case-study .section-subtitle {
    max-width: 820px;
    margin: 0 auto 70px;
    text-align: center;
    color: var(--text-light);
    line-height: 1.9;
}

.case-study-box {
    background: #141d31;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 24px;
    padding: 60px;
    transition: .35s;
}

.case-study-box:hover {
    border-color: #d4af37;
    transform: translateY(-6px);
}

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

.case-header h3 {
    font-size: 2rem;
    color: #fff;
    margin-bottom: 15px;
}

.case-header p {
    color: #d4af37;
    font-size: 1.05rem;
}

.case-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-bottom: 60px;
}

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

.case-stat h2 {
    font-size: 3rem;
    color: #d4af37;
    margin-bottom: 10px;
}

.case-stat span {
    color: var(--text-light);
    line-height: 1.7;
}

.case-description {
    max-width: 900px;
    margin: auto;
    text-align: center;
}

.case-description p {
    color: var(--text-light);
    line-height: 2;
}


/*======================================
    HEALTHCARE CTA
======================================*/

.healthcare-cta {
    padding: 120px 0;
    background: var(--bg-color);
}

.healthcare-cta .section-tag {
    display: block;
    width: fit-content;
    margin: 0 auto 20px;
}

.healthcare-cta h2 {
    text-align: center;
    color: #fff;
    font-size: 3rem;
    line-height: 1.2;
    margin-bottom: 25px;
}

.healthcare-cta .section-subtitle {
    max-width: 780px;
    margin: 0 auto 50px;
    text-align: center;
    color: var(--text-light);
    line-height: 1.9;
}

.healthcare-cta .hero-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 55px;
}

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

.cta-feature {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-size: 1rem;
}

.cta-feature i {
    color: #d4af37;
    font-size: 18px;
}

/*======================================
    FINANCIAL HERO
======================================*/

.financial-hero {
    padding: 170px 0 120px;
    background: var(--bg-color);
}

.financial-hero-container {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    align-items: center;
    gap: 70px;
}

.financial-content h1 {
    font-size: 3.8rem;
    line-height: 1.15;
    margin: 25px 0;
}

.financial-content p {
    color: var(--text-light);
    line-height: 1.9;
    margin-bottom: 40px;
}

.financial-image img {
    width: 100%;
    display: block;
}

.financial-hero .hero-buttons {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 55px;
}

.financial-hero .hero-stats {
    display: flex;
    gap: 50px;
    flex-wrap: wrap;
}

.financial-hero .hero-stat h3 {
    font-size: 2rem;
    color: var(--primary-color);
    margin-bottom: 6px;
}

.financial-hero .hero-stat span {
    color: var(--text-light);
}

/*======================================
    FINANCIAL CHALLENGES
======================================*/

.financial-challenges {
    padding: 120px 0;
    background: #0f172a;
}

.financial-challenges h2 {
    text-align: center;
    font-size: 3rem;
    margin: 20px 0;
}

.financial-challenges .section-tag {
    display: table;
    margin: 0 auto 20px;
}

.financial-challenges .section-subtitle {
    max-width: 760px;
    margin: 0 auto 70px;
    text-align: center;
    color: var(--text-light);
    line-height: 1.9;
}

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

.financial-card {
    background: #1e293b;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 18px;
    padding: 38px;
    transition: .35s;
}

.financial-card:hover {
    transform: translateY(-8px);
    border-color: var(--primary-color);
    box-shadow: 0 20px 45px rgba(0, 0, 0, .35);
}

.financial-card i {
    font-size: 38px;
    color: var(--primary-color);
    margin-bottom: 22px;
}

.financial-card h3 {
    font-size: 1.6rem;
    margin-bottom: 15px;
}

.financial-card p {
    color: var(--text-light);
    line-height: 1.8;
}

/*======================================
    FRAUD PREVENTION
======================================*/

.fraud-prevention {
    padding: 120px 0;
    background: var(--bg-color);
}

.fraud-prevention h2 {
    text-align: center;
    font-size: 3rem;
    margin: 20px 0;
}

.fraud-prevention .section-tag {
    display: table;
    margin: 0 auto 20px;
}

.fraud-prevention .section-subtitle {
    max-width: 760px;
    margin: 0 auto 70px;
    text-align: center;
    color: var(--text-light);
    line-height: 1.9;
}

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

.fraud-card {
    background: var(--card-bg);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 18px;
    padding: 38px;
    transition: .35s;
}

.fraud-card:hover {
    transform: translateY(-8px);
    border-color: var(--primary-color);
}

.fraud-card i {
    font-size: 38px;
    color: var(--primary-color);
    margin-bottom: 22px;
}

.fraud-card h3 {
    font-size: 1.55rem;
    margin-bottom: 15px;
}

.fraud-card p {
    color: var(--text-light);
    line-height: 1.8;
}

/*======================================
    PAYMENT SECURITY
======================================*/

.payment-security {
    padding: 120px 0;
    background: #0f172a;
}

.payment-security h2 {
    text-align: center;
    font-size: 3rem;
    margin: 20px 0;
}

.payment-security .section-tag {
    display: table;
    margin: 0 auto 20px;
}

.payment-security .section-subtitle {
    max-width: 760px;
    margin: 0 auto 70px;
    text-align: center;
    color: var(--text-light);
    line-height: 1.9;
}

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

.payment-card {
    background: #1e293b;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 18px;
    padding: 38px;
    transition: .35s;
}

.payment-card:hover {
    transform: translateY(-8px);
    border-color: var(--primary-color);
    box-shadow: 0 20px 45px rgba(0, 0, 0, .35);
}

.payment-card i {
    font-size: 38px;
    color: var(--primary-color);
    margin-bottom: 22px;
}

.payment-card h3 {
    font-size: 1.55rem;
    margin-bottom: 15px;
}

.payment-card p {
    color: var(--text-light);
    line-height: 1.8;
}

/*======================================
    BANKING INFRASTRUCTURE
======================================*/

.banking-infrastructure {
    padding: 120px 0;
    background: var(--bg-color);
}

.banking-infrastructure h2 {
    text-align: center;
    font-size: 3rem;
    margin: 20px 0;
}

.banking-infrastructure .section-tag {
    display: table;
    margin: 0 auto 20px;
}

.banking-infrastructure .section-subtitle {
    max-width: 760px;
    margin: 0 auto 70px;
    text-align: center;
    color: var(--text-light);
    line-height: 1.9;
}

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

.banking-card {
    background: var(--card-bg);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 18px;
    padding: 38px;
    transition: .35s;
}

.banking-card:hover {
    transform: translateY(-8px);
    border-color: var(--primary-color);
}

.banking-card i {
    font-size: 38px;
    color: var(--primary-color);
    margin-bottom: 22px;
}

.banking-card h3 {
    font-size: 1.55rem;
    margin-bottom: 15px;
}

.banking-card p {
    color: var(--text-light);
    line-height: 1.8;
}

/*======================================
    FINANCIAL FEATURES
======================================*/

.financial-features {
    padding: 120px 0;
    background: #0f172a;
}

.financial-features h2 {
    text-align: center;
    font-size: 3rem;
    margin: 20px 0;
}

.financial-features .section-tag {
    display: table;
    margin: 0 auto 20px;
}

.financial-features .section-subtitle {
    max-width: 760px;
    margin: 0 auto 70px;
    text-align: center;
    color: var(--text-light);
    line-height: 1.9;
}

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

.financial-features .feature-card {
    background: #1e293b;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 18px;
    padding: 35px;
    transition: .35s;
}

.financial-features .feature-card:hover {
    transform: translateY(-8px);
    border-color: var(--primary-color);
    box-shadow: 0 20px 45px rgba(0, 0, 0, .35);
}

.financial-features .feature-card i {
    font-size: 38px;
    color: var(--primary-color);
    margin-bottom: 22px;
}

.financial-features .feature-card h3 {
    font-size: 1.5rem;
    margin-bottom: 15px;
}

.financial-features .feature-card p {
    color: var(--text-light);
    line-height: 1.8;
}

/*======================================
    FINANCIAL CASE STUDY
======================================*/

.financial-case-study {
    padding: 120px 0;
    background: var(--bg-color);
}

.financial-case-study .section-tag {
    display: table;
    margin: 0 auto 20px;
}

.financial-case-study h2 {
    text-align: center;
    font-size: 3rem;
    margin: 20px 0;
}

.financial-case-study .section-subtitle {
    max-width: 760px;
    margin: 0 auto 70px;
    text-align: center;
    color: var(--text-light);
    line-height: 1.9;
}

.case-study-box {
    background: #1e293b;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 22px;
    padding: 60px;
}

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

.case-header h3 {
    font-size: 2rem;
    margin-bottom: 10px;
}

.case-header p {
    color: var(--text-light);
}

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

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

.case-stat h2 {
    font-size: 3rem;
    color: var(--primary-color);
    margin-bottom: 10px;
}

.case-stat span {
    color: var(--text-light);
    line-height: 1.6;
}

.case-description {
    max-width: 900px;
    margin: auto;
    text-align: center;
}

.case-description p {
    color: var(--text-light);
    line-height: 1.9;
}

/*======================================
    FINANCIAL CTA
======================================*/

.financial-cta {
    padding: 120px 0;
    background: #0f172a;
}

.financial-cta .section-tag {
    display: table;
    margin: 0 auto 20px;
}

.financial-cta h2 {
    text-align: center;
    font-size: 3rem;
    line-height: 1.2;
    margin-bottom: 25px;
}

.financial-cta .section-subtitle {
    max-width: 760px;
    margin: 0 auto 45px;
    text-align: center;
    color: var(--text-light);
    line-height: 1.9;
}

.financial-cta .hero-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 45px;
}

.financial-cta .cta-features {
    display: flex;
    justify-content: center;
    gap: 35px;
    flex-wrap: wrap;
}

.financial-cta .cta-feature {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-size: 1rem;
}

.financial-cta .cta-feature i {
    color: var(--primary-color);
}

/*==================================
GOVERNMENT HERO
==================================*/

.government-hero {
    padding: 140px 0 100px;
    background: linear-gradient(180deg, #08111f 0%, #0d1728 100%);
    position: relative;
    overflow: hidden;
}

.government-hero::before {
    content: "";
    position: absolute;
    width: 700px;
    height: 700px;
    background: rgba(0, 212, 255, .08);
    filter: blur(120px);
    top: -250px;
    right: -200px;
}

.government-hero-container {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 70px;
    align-items: center;
    position: relative;
    z-index: 2;
}

.government-content h1 {
    font-size: 58px;
    line-height: 1.1;
    color: #fff;
    margin: 22px 0;
}

.government-content p {
    color: #b7c5d6;
    font-size: 18px;
    line-height: 1.8;
    margin-bottom: 35px;
    max-width: 720px;
}

.government-image img {
    width: 100%;
    display: block;
}

.hero-stats {
    display: flex;
    gap: 25px;
    margin-top: 45px;
    flex-wrap: wrap;
}

.hero-stat {
    flex: 1;
    min-width: 170px;
    background: #111d31;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 18px;
    padding: 25px;
    text-align: center;
}

.hero-stat h3 {
    color: #00d4ff;
    font-size: 34px;
    margin-bottom: 10px;
}

.hero-stat span {
    color: #c8d4e5;
    font-size: 15px;
}

/*==================================
COMMON SECTION
==================================*/

.government-challenges,
.critical-infrastructure,
.public-sector-security,
.national-security,
.government-features,
.government-compliance,
.government-cta {
    padding: 110px 0;
}

.government-challenges,
.public-sector-security,
.government-features {
    background: #07111f;
}

.critical-infrastructure,
.national-security,
.government-compliance {
    background: #0c1727;
}

.section-subtitle {
    max-width: 820px;
    margin: 20px auto 60px;
    text-align: center;
    color: #9fb2c9;
    line-height: 1.8;
    font-size: 18px;
}

/*==================================
GRIDS
==================================*/

.government-challenges-grid,
.infrastructure-grid,
.public-sector-grid,
.national-security-grid,
.government-features-grid,
.government-compliance-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/*==================================
CARDS
==================================*/

.government-card,
.infrastructure-card,
.public-sector-card,
.national-card,
.compliance-card {
    background: #121f32;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 22px;
    padding: 35px;
    transition: .35s;
}

.government-card:hover,
.infrastructure-card:hover,
.public-sector-card:hover,
.national-card:hover,
.compliance-card:hover {
    transform: translateY(-10px);
    border-color: #00d4ff;
}

.government-card i,
.infrastructure-card i,
.public-sector-card i,
.national-card i {
    width: 70px;
    height: 70px;
    border-radius: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #00d4ff;
    color: #07111f;
    font-size: 28px;
    margin-bottom: 25px;
}

.government-card h3,
.infrastructure-card h3,
.public-sector-card h3,
.national-card h3 {
    color: #fff;
    margin-bottom: 15px;
    font-size: 23px;
}

.government-card p,
.infrastructure-card p,
.public-sector-card p,
.national-card p {
    color: #b6c5d8;
    line-height: 1.8;
}

/*==================================
COMPLIANCE CARDS
==================================*/

.compliance-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.compliance-left {
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 1;
}

.compliance-icon {
    width: 70px;
    height: 70px;
    background: #00d4ff;
    color: #07111f;
    border-radius: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 28px;
    flex-shrink: 0;
}

.compliance-content h3 {
    color: #fff;
    font-size: 22px;
    margin-bottom: 10px;
}

.compliance-content p {
    color: #b8c7d8;
    line-height: 1.7;
}

.status-badge {
    background: #00d4ff;
    color: #07111f;
    font-size: 13px;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: 30px;
    white-space: nowrap;
}

/*==================================
CTA
==================================*/

.government-cta {
    background: linear-gradient(180deg, #07111f, #0d1728);
    text-align: center;
}

.government-cta h2 {
    color: #fff;
    font-size: 54px;
    line-height: 1.15;
    margin: 20px 0;
}

.government-cta .section-subtitle {
    max-width: 900px;
    margin: 0 auto 45px;
}

.cta-features {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 55px;
}

.cta-feature {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 22px;
    background: #111d31;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 40px;
}

.cta-feature i {
    color: #00d4ff;
    font-size: 18px;
}

.cta-feature span {
    color: #d8e3f1;
    font-weight: 500;
}

/*==================================
BUTTONS
==================================*/

.hero-buttons {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}

.btn-primary,
.btn-secondary {
    padding: 16px 34px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
    transition: .35s;
}

.btn-primary {
    background: #00d4ff;
    color: #07111f;
}

.btn-primary:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 35px rgba(0, 212, 255, .35);
}

.btn-secondary {
    border: 1px solid rgba(255, 255, 255, .15);
    color: #fff;
}

.btn-secondary:hover {
    border-color: #00d4ff;
    color: #00d4ff;
}

/*==================================
SECTION HEADINGS
==================================*/

.government-challenges h2,
.critical-infrastructure h2,
.public-sector-security h2,
.national-security h2,
.government-features h2,
.government-compliance h2 {
    text-align: center;
    color: #fff;
    font-size: 46px;
    line-height: 1.2;
    margin-top: 18px;
    margin-bottom: 20px;
}

.government-challenges .section-tag,
.critical-infrastructure .section-tag,
.public-sector-security .section-tag,
.national-security .section-tag,
.government-features .section-tag,
.government-compliance .section-tag,
.government-cta .section-tag {
    display: inline-block;
    background: rgba(0, 212, 255, .12);
    color: #00d4ff;
    border: 1px solid rgba(0, 212, 255, .25);
    padding: 10px 22px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.government-challenges .container,
.critical-infrastructure .container,
.public-sector-security .container,
.national-security .container,
.government-features .container,
.government-compliance .container,
.government-cta .container {
    text-align: center;
}

/*==================================
CARD EFFECTS
==================================*/

.government-card,
.infrastructure-card,
.public-sector-card,
.national-card,
.compliance-card {
    position: relative;
    overflow: hidden;
}

.government-card::before,
.infrastructure-card::before,
.public-sector-card::before,
.national-card::before,
.compliance-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 0;
    background: #00d4ff;
    transition: .4s;
}

.government-card:hover::before,
.infrastructure-card:hover::before,
.public-sector-card:hover::before,
.national-card:hover::before,
.compliance-card:hover::before {
    height: 100%;
}

.government-card:hover i,
.infrastructure-card:hover i,
.public-sector-card:hover i,
.national-card:hover i,
.compliance-card:hover .compliance-icon {
    transform: rotate(6deg) scale(1.08);
}

.government-card i,
.infrastructure-card i,
.public-sector-card i,
.national-card i,
.compliance-icon {
    transition: .35s;
}

.government-card p,
.infrastructure-card p,
.public-sector-card p,
.national-card p,
.compliance-content p {
    font-size: 16px;
}

/*==================================
CTA BUTTON ALIGNMENT
==================================*/

.government-cta .hero-buttons {
    justify-content: center;
    margin-top: 35px;
}

/*==================================
SMOOTH ANIMATIONS
==================================*/

.government-card,
.infrastructure-card,
.public-sector-card,
.national-card,
.compliance-card,
.hero-stat {
    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;
}

.government-card:hover,
.infrastructure-card:hover,
.public-sector-card:hover,
.national-card:hover,
.compliance-card:hover,
.hero-stat:hover {
    box-shadow: 0 20px 45px rgba(0, 212, 255, .12);
}

.hero-stat:hover {
    transform: translateY(-8px);
}

.status-badge {
    transition: .3s;
}

.compliance-card:hover .status-badge {
    background: #fff;
    color: #07111f;
}

/*==================================================
    CLOUD & DEVOPS HERO
==================================================*/

.cloud-hero {
    padding: 140px 0 100px;
    background: linear-gradient(180deg, #07111f 0%, #0b1728 100%);
    overflow: hidden;
    position: relative;
}

.cloud-hero::before {
    content: "";
    position: absolute;
    width: 600px;
    height: 600px;
    background: #2563eb;
    filter: blur(170px);
    opacity: .12;
    top: -220px;
    right: -200px;
}

.cloud-hero-container {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 70px;
    align-items: center;
}

.cloud-content h1 {
    font-size: 58px;
    line-height: 1.12;
    color: #fff;
    margin: 22px 0;
}

.cloud-content p {
    color: #a9b6cb;
    line-height: 1.9;
    font-size: 17px;
    margin-bottom: 35px;
    max-width: 680px;
}

.cloud-image img {
    width: 100%;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 30px 70px rgba(37, 99, 235, .18);
}

.hero-stats {
    display: flex;
    gap: 25px;
    margin-top: 45px;
    flex-wrap: wrap;
}

.hero-stat {
    min-width: 170px;
    padding: 22px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .06);
    backdrop-filter: blur(14px);
}

.hero-stat h3 {
    color: #fff;
    font-size: 30px;
    margin-bottom: 8px;
}

.hero-stat span {
    color: #9fb0c6;
    font-size: 14px;
}

/*==================================================
        CLOUD CHALLENGES
==================================================*/

.cloud-challenges {
    padding: 120px 0;
    background: #08111f;
}

.cloud-challenges h2 {
    text-align: center;
    color: #fff;
    margin: 20px 0;
}

.cloud-challenges-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-top: 70px;
}

.cloud-card {
    padding: 35px;
    border-radius: 20px;
    background: var(--card);
    border: 1px solid var(--border);
    transition: var(--transition);
}

.cloud-card:hover {
    transform: translateY(-8px);
    border-color: var(--primary);
    box-shadow: var(--shadow-card);
}

.cloud-card i {
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    margin-bottom: 25px;
    color: #60a5fa;
    background: rgba(59, 130, 246, .12);
    font-size: 28px;
}

.cloud-card h3 {
    color: var(--text);
    margin-bottom: 15px;
    font-size: 22px;
}

.cloud-card p {
    color: #a8b5ca;
    line-height: 1.8;
}

/*==================================================
        CNAPP PLATFORM
==================================================*/

.cnapp-platform {
    padding: 120px 0;
    background: #0b1627;
}

.cnapp-platform h2 {
    text-align: center;
    color: #fff;
    margin: 20px 0;
}

.cnapp-grid {
    margin-top: 70px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.cnapp-card {
    background: #111f35;
    border-radius: 20px;
    padding: 35px;
    border: 1px solid rgba(255, 255, 255, .06);
    transition: .35s;
}

.cnapp-card:hover {
    transform: translateY(-8px);
    border-color: #2563eb;
}

.cnapp-card i {
    font-size: 30px;
    color: #60a5fa;
    margin-bottom: 22px;
}

.cnapp-card h3 {
    color: #fff;
    margin-bottom: 15px;
}

.cnapp-card p {
    color: #a9b7ca;
    line-height: 1.8;
}

/*==================================================
        CONTAINER SECURITY
==================================================*/

.container-security {
    padding: 120px 0;
    background: #08111f;
}

.container-security h2 {
    color: #fff;
    text-align: center;
    margin: 20px 0;
}

.container-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-top: 70px;
}

.container-card {
    background: #0d1a2d;
    padding: 35px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, .06);
    transition: .35s;
}

.container-card:hover {
    transform: translateY(-8px);
    border-color: #3b82f6;
    box-shadow: 0 20px 40px rgba(37, 99, 235, .16);
}

.container-card i {
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(59, 130, 246, .12);
    color: #60a5fa;
    border-radius: 16px;
    font-size: 28px;
    margin-bottom: 22px;
}

.container-card h3 {
    color: #fff;
    margin-bottom: 15px;
}

.container-card p {
    color: #aab8cc;
    line-height: 1.8;
}

/*==================================================
        DEVSECOPS PIPELINE
==================================================*/

.devsecops-pipeline {
    padding: 120px 0;
    background: #0b1627;
}

.devsecops-pipeline h2 {
    text-align: center;
    color: #fff;
    margin: 20px 0;
}

.pipeline-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-top: 70px;
}

.pipeline-card {
    background: #111f35;
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 20px;
    padding: 35px;
    transition: .35s;
}

.pipeline-card:hover {
    transform: translateY(-8px);
    border-color: #3b82f6;
    box-shadow: 0 20px 40px rgba(37, 99, 235, .15);
}

.pipeline-card i {
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(59, 130, 246, .12);
    color: #60a5fa;
    border-radius: 16px;
    margin-bottom: 22px;
    font-size: 28px;
}

.pipeline-card h3 {
    color: #fff;
    margin-bottom: 15px;
    font-size: 22px;
}

.pipeline-card p {
    color: #a8b6ca;
    line-height: 1.8;
}

/*==================================================
        CLOUD FEATURES
==================================================*/

.cloud-features {
    padding: 120px 0;
    background: #08111f;
}

.cloud-features h2 {
    text-align: center;
    color: #fff;
    margin: 20px 0;
}

.cloud-features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
    margin-top: 70px;
}

.cloud-features .feature-card {
    background: #0d1b2f;
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 20px;
    padding: 35px 28px;
    transition: .35s;
}

.cloud-features .feature-card:hover {
    transform: translateY(-8px);
    border-color: #3b82f6;
    box-shadow: 0 20px 45px rgba(37, 99, 235, .18);
}

.cloud-features .feature-card i {
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(59, 130, 246, .12);
    color: #60a5fa;
    border-radius: 16px;
    margin-bottom: 22px;
    font-size: 28px;
}

.cloud-features .feature-card h3 {
    color: #fff;
    margin-bottom: 15px;
    font-size: 21px;
}

.cloud-features .feature-card p {
    color: #a8b6ca;
    line-height: 1.8;
}

/*==================================================
        SUCCESS STORY
==================================================*/

.cloud-case-study {
    padding: 120px 0;
    background: #0b1627;
}

.cloud-case-study h2 {
    text-align: center;
    color: #fff;
    margin: 20px 0;
}

.case-study-box {
    margin-top: 70px;
    background: #111f35;
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 24px;
    padding: 55px;
}

.case-header {
    text-align: center;
    margin-bottom: 55px;
}

.case-header h3 {
    color: #fff;
    font-size: 32px;
    margin-bottom: 12px;
}

.case-header p {
    color: #8fa3bf;
}

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

.case-stat {
    background: #0d1b2f;
    border-radius: 18px;
    padding: 30px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, .05);
}

.case-stat h2 {
    color: #60a5fa;
    font-size: 42px;
    margin-bottom: 10px;
}

.case-stat span {
    color: #a9b7cb;
    font-size: 15px;
    line-height: 1.6;
    display: block;
}

.case-description {
    max-width: 900px;
    margin: auto;
    text-align: center;
}

.case-description p {
    color: #aab8cb;
    line-height: 1.9;
    font-size: 17px;
}

/*==================================================
        CLOUD CTA
==================================================*/

.cloud-cta {
    padding: 120px 0;
    background: linear-gradient(180deg, #08111f 0%, #0d1b2f 100%);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.cloud-cta::before {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    background: #2563eb;
    opacity: .12;
    filter: blur(180px);
    left: 50%;
    transform: translateX(-50%);
    top: -220px;
}

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

.cloud-cta h2 {
    color: #fff;
    font-size: 52px;
    margin: 20px 0;
    line-height: 1.2;
}

.cloud-cta .section-subtitle {
    max-width: 900px;
    margin: 0 auto 45px;
    color: #a8b5ca;
    line-height: 1.9;
}

.cloud-cta .hero-buttons {
    justify-content: center;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 55px;
}

.cta-features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

.cta-feature {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 22px;
    border-radius: 18px;
    background: #111f35;
    border: 1px solid rgba(255, 255, 255, .06);
    transition: .35s;
}

.cta-feature:hover {
    transform: translateY(-6px);
    border-color: #3b82f6;
    box-shadow: 0 20px 40px rgba(37, 99, 235, .18);
}

.cta-feature i {
    color: #60a5fa;
    font-size: 20px;
}

.cta-feature span {
    color: #fff;
    font-weight: 600;
    font-size: 15px;
}

/*==================================================
        GLOBAL HOVER EFFECTS
==================================================*/

.cloud-card,
.cnapp-card,
.container-card,
.pipeline-card,
.cloud-features .feature-card,
.case-stat,
.cta-feature {
    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;
}

.cloud-card:hover,
.cnapp-card:hover,
.container-card:hover,
.pipeline-card:hover,
.cloud-features .feature-card:hover,
.case-stat:hover {
    transform: translateY(-8px);
}

.cloud-card i,
.cnapp-card i,
.container-card i,
.pipeline-card i,
.cloud-features .feature-card i {
    transition: .35s;
}

.cloud-card:hover i,
.cnapp-card:hover i,
.container-card:hover i,
.pipeline-card:hover i,
.cloud-features .feature-card:hover i {
    transform: scale(1.12) rotate(-5deg);
}

/*==================================================
        CASE STUDY EFFECT
==================================================*/

.case-stat:hover {
    border-color: #3b82f6;
    box-shadow: 0 18px 35px rgba(37, 99, 235, .16);
}

.case-study-box {
    transition: .35s;
}

.case-study-box:hover {
    box-shadow: 0 35px 70px rgba(37, 99, 235, .10);
}

/*==================================================
        SECTION SPACING
==================================================*/

.cloud-challenges,
.cnapp-platform,
.container-security,
.devsecops-pipeline,
.cloud-features,
.cloud-case-study,
.cloud-cta {
    position: relative;
}

.cloud-challenges::after,
.cnapp-platform::after,
.container-security::after,
.devsecops-pipeline::after,
.cloud-features::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 180px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #2563eb55, transparent);
}

/*==================================================
        MANUFACTURING HERO
==================================================*/

.manufacturing-hero {
    padding: 140px 0 100px;
    background: linear-gradient(180deg, #07111f 0%, #0b1728 100%);
    position: relative;
    overflow: hidden;
}

.manufacturing-hero::before {
    content: "";
    position: absolute;
    width: 620px;
    height: 620px;
    background: #2563eb;
    filter: blur(180px);
    opacity: .12;
    top: -220px;
    right: -200px;
}

.manufacturing-hero-container {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 70px;
    align-items: center;
}

.manufacturing-content h1 {
    font-size: 58px;
    color: #fff;
    line-height: 1.15;
    margin: 22px 0;
}

.manufacturing-content p {
    color: #a9b7ca;
    font-size: 17px;
    line-height: 1.9;
    max-width: 680px;
    margin-bottom: 35px;
}

.manufacturing-image img {
    width: 100%;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 30px 70px rgba(37, 99, 235, .18);
}

.hero-stats {
    display: flex;
    gap: 25px;
    margin-top: 45px;
    flex-wrap: wrap;
}

.hero-stat {
    min-width: 170px;
    padding: 22px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .06);
    backdrop-filter: blur(14px);
}

.hero-stat h3 {
    color: #fff;
    font-size: 30px;
    margin-bottom: 8px;
}

.hero-stat span {
    color: #9fb0c6;
    font-size: 14px;
}

/*==================================================
    MANUFACTURING CHALLENGES
==================================================*/

.manufacturing-challenges {
    padding: 120px 0;
    background: #08111f;
}

.manufacturing-challenges h2 {
    color: #fff;
    text-align: center;
    margin: 20px 0;
}

.manufacturing-challenges-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-top: 70px;
}

.manufacturing-card {
    background: #0d1b2f;
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 20px;
    padding: 35px;
    transition: .35s;
}

.manufacturing-card:hover {
    transform: translateY(-8px);
    border-color: #3b82f6;
    box-shadow: 0 25px 45px rgba(37, 99, 235, .16);
}

.manufacturing-card i {
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(59, 130, 246, .12);
    color: #60a5fa;
    border-radius: 16px;
    font-size: 28px;
    margin-bottom: 22px;
}

.manufacturing-card h3 {
    color: #fff;
    font-size: 22px;
    margin-bottom: 15px;
}

.manufacturing-card p {
    color: #aab8cb;
    line-height: 1.8;
}

/*==================================================
        OT & ICS SECURITY
==================================================*/

.ot-ics-security {
    padding: 120px 0;
    background: #0b1627;
}

.ot-ics-security h2 {
    color: #fff;
    text-align: center;
    margin: 20px 0;
}

.ot-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-top: 70px;
}

.ot-card {
    background: #111f35;
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 20px;
    padding: 35px;
    transition: .35s;
}

.ot-card:hover {
    transform: translateY(-8px);
    border-color: #3b82f6;
}

.ot-card i {
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(59, 130, 246, .12);
    color: #60a5fa;
    border-radius: 16px;
    font-size: 28px;
    margin-bottom: 22px;
}

.ot-card h3 {
    color: #fff;
    font-size: 22px;
    margin-bottom: 15px;
}

.ot-card p {
    color: #a9b7ca;
    line-height: 1.8;
}

/*==================================================
    INDUSTRIAL NETWORK PROTECTION
==================================================*/

.industrial-network {
    padding: 120px 0;
    background: #08111f;
}

.industrial-network h2 {
    color: #fff;
    text-align: center;
    margin: 20px 0;
}

.industrial-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-top: 70px;
}

.industrial-card {
    background: #0d1b2f;
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 20px;
    padding: 35px;
    transition: .35s;
}

.industrial-card:hover {
    transform: translateY(-8px);
    border-color: #3b82f6;
    box-shadow: 0 20px 40px rgba(37, 99, 235, .16);
}

.industrial-card i {
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(59, 130, 246, .12);
    color: #60a5fa;
    border-radius: 16px;
    font-size: 28px;
    margin-bottom: 22px;
}

.industrial-card h3 {
    color: #fff;
    margin-bottom: 15px;
    font-size: 22px;
}

.industrial-card p {
    color: #aab8cb;
    line-height: 1.8;
}

/*==================================================
        SMART FACTORY SECURITY
==================================================*/

.smart-factory-security {
    padding: 120px 0;
    background: #0b1627;
}

.smart-factory-security h2 {
    color: #fff;
    text-align: center;
    margin: 20px 0;
}

.smart-factory-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-top: 70px;
}

.smart-card {
    background: #111f35;
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 20px;
    padding: 35px;
    transition: .35s;
}

.smart-card:hover {
    transform: translateY(-8px);
    border-color: #3b82f6;
    box-shadow: 0 20px 40px rgba(37, 99, 235, .16);
}

.smart-card i {
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(59, 130, 246, .12);
    color: #60a5fa;
    border-radius: 16px;
    font-size: 28px;
    margin-bottom: 22px;
}

.smart-card h3 {
    color: #fff;
    margin-bottom: 15px;
    font-size: 22px;
}

.smart-card p {
    color: #aab8cb;
    line-height: 1.8;
}

/*==================================================
        MANUFACTURING FEATURES
==================================================*/

.manufacturing-features {
    padding: 120px 0;
    background: #08111f;
}

.manufacturing-features h2 {
    color: #fff;
    text-align: center;
    margin: 20px 0;
}

.manufacturing-features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
    margin-top: 70px;
}

.manufacturing-features .feature-card {
    background: #0d1b2f;
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 20px;
    padding: 35px 28px;
    transition: .35s;
}

.manufacturing-features .feature-card:hover {
    transform: translateY(-8px);
    border-color: #3b82f6;
    box-shadow: 0 20px 45px rgba(37, 99, 235, .18);
}

.manufacturing-features .feature-card i {
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(59, 130, 246, .12);
    color: #60a5fa;
    border-radius: 16px;
    font-size: 28px;
    margin-bottom: 22px;
}

.manufacturing-features .feature-card h3 {
    color: #fff;
    font-size: 21px;
    margin-bottom: 15px;
}

.manufacturing-features .feature-card p {
    color: #aab8cb;
    line-height: 1.8;
}

/*==================================================
        SUCCESS STORY
==================================================*/

.manufacturing-case-study {
    padding: 120px 0;
    background: #0b1627;
}

.manufacturing-case-study h2 {
    color: #fff;
    text-align: center;
    margin: 20px 0;
}

.manufacturing-case-study .case-study-box {
    margin-top: 70px;
    background: #111f35;
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 24px;
    padding: 55px;
}

.manufacturing-case-study .case-header {
    text-align: center;
    margin-bottom: 55px;
}

.manufacturing-case-study .case-header h3 {
    color: #fff;
    font-size: 32px;
    margin-bottom: 12px;
}

.manufacturing-case-study .case-header p {
    color: #90a4bf;
}

.manufacturing-case-study .case-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    margin-bottom: 50px;
}

.manufacturing-case-study .case-stat {
    background: #0d1b2f;
    border: 1px solid rgba(255, 255, 255, .05);
    border-radius: 18px;
    padding: 30px;
    text-align: center;
    transition: .35s;
}

.manufacturing-case-study .case-stat:hover {
    transform: translateY(-8px);
    border-color: #3b82f6;
    box-shadow: 0 20px 40px rgba(37, 99, 235, .15);
}

.manufacturing-case-study .case-stat h2 {
    color: #60a5fa;
    font-size: 42px;
    margin-bottom: 10px;
}

.manufacturing-case-study .case-stat span {
    color: #aab8cb;
    font-size: 15px;
    line-height: 1.6;
    display: block;
}

.manufacturing-case-study .case-description {
    max-width: 900px;
    margin: auto;
    text-align: center;
}

.manufacturing-case-study .case-description p {
    color: #aab8cb;
    font-size: 17px;
    line-height: 1.9;
}

/*==================================================
        MANUFACTURING CTA
==================================================*/

.manufacturing-cta {
    padding: 120px 0;
    background: linear-gradient(180deg, #08111f 0%, #0d1b2f 100%);
    position: relative;
    overflow: hidden;
    text-align: center;
}

.manufacturing-cta::before {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    background: #2563eb;
    opacity: .12;
    filter: blur(180px);
    top: -220px;
    left: 50%;
    transform: translateX(-50%);
}

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

.manufacturing-cta h2 {
    color: #fff;
    font-size: 52px;
    line-height: 1.2;
    margin: 20px 0;
}

.manufacturing-cta .section-subtitle {
    max-width: 900px;
    margin: 0 auto 45px;
    color: #aab8cb;
    line-height: 1.9;
}

.manufacturing-cta .hero-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 55px;
}

.manufacturing-cta .cta-features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

.manufacturing-cta .cta-feature {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 22px;
    border-radius: 18px;
    background: #111f35;
    border: 1px solid rgba(255, 255, 255, .06);
    transition: .35s;
}

.manufacturing-cta .cta-feature:hover {
    transform: translateY(-6px);
    border-color: #3b82f6;
    box-shadow: 0 20px 40px rgba(37, 99, 235, .18);
}

.manufacturing-cta .cta-feature i {
    color: #60a5fa;
    font-size: 20px;
}

.manufacturing-cta .cta-feature span {
    color: #fff;
    font-size: 15px;
    font-weight: 600;
}

/*==================================================
        GLOBAL HOVER EFFECTS
==================================================*/

.manufacturing-card,
.ot-card,
.industrial-card,
.smart-card,
.manufacturing-features .feature-card,
.manufacturing-case-study .case-stat,
.manufacturing-cta .cta-feature {
    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;
}

.manufacturing-card:hover,
.ot-card:hover,
.industrial-card:hover,
.smart-card:hover,
.manufacturing-features .feature-card:hover,
.manufacturing-case-study .case-stat:hover {
    transform: translateY(-8px);
}

.manufacturing-card i,
.ot-card i,
.industrial-card i,
.smart-card i,
.manufacturing-features .feature-card i {
    transition: .35s ease;
}

.manufacturing-card:hover i,
.ot-card:hover i,
.industrial-card:hover i,
.smart-card:hover i,
.manufacturing-features .feature-card:hover i {
    transform: scale(1.1) rotate(-5deg);
}

/*==================================================
        CASE STUDY
==================================================*/

.manufacturing-case-study .case-study-box {
    transition: .35s;
}

.manufacturing-case-study .case-study-box:hover {
    box-shadow: 0 35px 70px rgba(37, 99, 235, .10);
}

/*==================================================
        SECTION DIVIDERS
==================================================*/

.manufacturing-challenges,
.ot-ics-security,
.industrial-network,
.smart-factory-security,
.manufacturing-features,
.manufacturing-case-study,
.manufacturing-cta {
    position: relative;
}

.manufacturing-challenges::after,
.ot-ics-security::after,
.industrial-network::after,
.smart-factory-security::after,
.manufacturing-features::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 180px;
    height: 1px;
    background: linear-gradient(90deg,
            transparent,
            rgba(59, 130, 246, .45),
            transparent);
}

/* ===========================
THEME
=========================== */