/* ==========================================================================
   Hariram Mailer Pro v2.0
   Enterprise Design System
   Part 1 - Foundation
   ========================================================================== */


/* ==========================================================================
   1. Design Tokens
   ========================================================================== */

:root{

    /* Brand */

    --hp-primary:#2563eb;
    --hp-primary-dark:#1d4ed8;
    --hp-primary-light:#60a5fa;

    --hp-success:#22c55e;
    --hp-warning:#f59e0b;
    --hp-danger:#ef4444;
    --hp-info:#06b6d4;

    /* Background */

    --hp-bg:#020617;
    --hp-bg-secondary:#0f172a;
    --hp-surface:#111827;
    --hp-surface-light:#1e293b;

    /* Text */

    --hp-text:#f8fafc;
    --hp-text-light:#cbd5e1;
    --hp-text-muted:#94a3b8;

    /* Borders */

    --hp-border:rgba(255,255,255,.08);
    --hp-border-light:rgba(255,255,255,.12);

    /* Glass */

    --hp-glass:rgba(255,255,255,.05);
    --hp-glass-hover:rgba(255,255,255,.08);

    /* Radius */

    --hp-radius-sm:.5rem;
    --hp-radius:1rem;
    --hp-radius-lg:1.5rem;
    --hp-radius-xl:2rem;

    /* Shadows */

    --hp-shadow-sm:0 10px 24px rgba(0,0,0,.18);
    --hp-shadow:0 20px 50px rgba(0,0,0,.28);
    --hp-shadow-lg:0 35px 90px rgba(0,0,0,.45);

    /* Layout */

    --hp-container:1320px;

    /* Animation */

    --hp-speed:.30s;

}


/* ==========================================================================
   2. Reset
   ========================================================================== */

*,
*::before,
*::after{

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    margin:0;

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

    background:var(--hp-bg);

    color:var(--hp-text);

    line-height:1.6;

    overflow-x:hidden;

    text-rendering:optimizeLegibility;

    -webkit-font-smoothing:antialiased;

    background:
        radial-gradient(circle at top right,
            rgba(37,99,235,.16),
            transparent 42%),

        radial-gradient(circle at bottom left,
            rgba(6,182,212,.12),
            transparent 38%),

        linear-gradient(
            180deg,
            #020617,
            #0f172a 100%);

}

img{

    display:block;

    max-width:100%;

}

svg{

    display:block;

}

a{

    color:inherit;

    text-decoration:none;

    transition:all var(--hp-speed);

}

button,
input,
textarea,
select{

    font:inherit;

}


/* ==========================================================================
   3. Background Grid
   ========================================================================== */

.page-wrapper{

    position:relative;

    overflow:hidden;

}

.page-wrapper::before{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    opacity:.35;

    background-image:

        linear-gradient(

            rgba(255,255,255,.02) 1px,

            transparent 1px),

        linear-gradient(

            90deg,

            rgba(255,255,255,.02) 1px,

            transparent 1px);

    background-size:60px 60px;

}


/* ==========================================================================
   4. Typography
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6{

    margin:0 0 1rem;

    line-height:1.15;

    font-weight:700;

    color:white;

}

h1{

    font-size:clamp(3rem,6vw,5rem);

}

h2{

    font-size:clamp(2.2rem,4vw,3.4rem);

}

h3{

    font-size:1.65rem;

}

p{

    margin:0 0 1rem;

    color:var(--hp-text-light);

}

.text-gradient{

    background:

        linear-gradient(

            90deg,

            #60a5fa,

            #22d3ee);

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

.text-muted-light{

    color:var(--hp-text-muted);

}


/* ==========================================================================
   5. Layout
   ========================================================================== */

.container-xl{

    max-width:var(--hp-container);

}

.section{

    position:relative;

    padding:7rem 0;

}

.section-sm{

    padding:4rem 0;

}

.section-title{

    max-width:760px;

    margin:0 auto 1.5rem;

    text-align:center;

}

.section-subtitle{

    max-width:720px;

    margin:0 auto;

    text-align:center;

}

.py-7{

    padding-top:7rem;

    padding-bottom:7rem;

}


/* ==========================================================================
   6. Buttons
   ========================================================================== */

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:.75rem;

    border:none;

    font-weight:600;

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

    transition:all .30s ease;

}

.btn:hover{

    transform:translateY(-3px);

}

.btn-lg{

    padding:1rem 2rem;

    font-size:1.05rem;

}

.btn-primary{

    color:#fff;

    background:

        linear-gradient(

            135deg,

            var(--hp-primary),

            var(--hp-primary-dark));

    box-shadow:

        0 18px 40px

        rgba(37,99,235,.35);

}

.btn-primary:hover{

    box-shadow:

        0 25px 50px

        rgba(37,99,235,.45);

}

.btn-outline-light{

    color:#fff;

    border:1px solid rgba(255,255,255,.14);

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

    backdrop-filter:blur(10px);

}

.btn-outline-light:hover{

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

    border-color:rgba(255,255,255,.25);

}


/* ==========================================================================
   7. Glass Components
   ========================================================================== */

.glass-card{

    position:relative;

    padding:2rem;

    border-radius:var(--hp-radius-lg);

    background:var(--hp-glass);

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

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

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

    transition:all .35s ease;

}

.glass-card:hover{

    transform:translateY(-8px);

    border-color:rgba(255,255,255,.16);

    box-shadow:var(--hp-shadow-lg);

}


/* ==========================================================================
   8. Dark Card
   ========================================================================== */

.card-dark{

    background:var(--hp-surface);

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

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

    transition:all .30s ease;

}

.card-dark:hover{

    transform:translateY(-6px);

    border-color:rgba(255,255,255,.16);

}


/* ==========================================================================
   9. Utilities
   ========================================================================== */

.shadow-lg{

    box-shadow:var(--hp-shadow-lg);

}

.rounded-xl{

    border-radius:var(--hp-radius-xl);

}

.text-center{

    text-align:center;

}

.w-100{

    width:100%;

}

.mb-0{

    margin-bottom:0;

}

.mt-5{

    margin-top:3rem;

}

.pt-5{

    padding-top:3rem;

}

/* ==========================================================================
   10. Premium Navigation
   ========================================================================== */

.navbar-landing{
    position:sticky;
    top:0;
    z-index:1030;
    background:rgba(2,6,23,.72);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    border-bottom:1px solid rgba(255,255,255,.06);
    transition:
        background .30s ease,
        box-shadow .30s ease,
        border-color .30s ease;
}

.navbar-landing.scrolled{
    background:rgba(2,6,23,.90);
    border-color:rgba(255,255,255,.08);
    box-shadow:0 10px 35px rgba(0,0,0,.30);
}

.navbar-landing .navbar{
    min-height:82px;
    padding:.65rem 0;
}

.navbar-brand{
    display:flex;
    align-items:center;
    gap:.8rem;
    font-size:1.35rem;
    font-weight:700;
    color:#fff;
}

.navbar-brand i{
    font-size:1.6rem;
    color:var(--hp-primary);
}

.landing-nav-link{
    position:relative;
    padding:1rem !important;
    font-weight:500;
    color:rgba(255,255,255,.74);
    transition:.30s;
}

.landing-nav-link:hover,
.landing-nav-link.active{
    color:#fff;
}

.landing-nav-link::after{
    content:"";
    position:absolute;
    left:16px;
    right:16px;
    bottom:10px;
    height:2px;
    background:linear-gradient(
        90deg,
        var(--hp-primary),
        #38bdf8
    );
    border-radius:999px;
    transform:scaleX(0);
    transform-origin:left;
    transition:.30s;
}

.landing-nav-link:hover::after,
.landing-nav-link.active::after{
    transform:scaleX(1);
}

.landing-nav-actions{
    display:flex;
    align-items:center;
    gap:.85rem;
}

.landing-nav-actions .btn{
    min-width:135px;
}

@media (max-width:991.98px){

    .navbar-collapse{
        margin-top:1rem;
        padding:1.5rem;
        border-radius:20px;
        background:#0f172a;
        border:1px solid rgba(255,255,255,.08);
    }

    .landing-nav-actions{
        width:100%;
        margin-top:1.25rem;
        flex-direction:column;
    }

    .landing-nav-actions .btn{
        width:100%;
    }

}

/* ==========================================================
   11. HERO SECTION
========================================================== */

.hero-section{
    position:relative;
    overflow:hidden;
    padding:110px 0 90px;
    background:
        radial-gradient(circle at top right,#1d4ed8 0%,transparent 45%),
        radial-gradient(circle at bottom left,#0f172a 0%,transparent 55%),
        #020617;
}

.hero-background{
    position:absolute;
    inset:0;
    background:
        linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
    background-size:40px 40px;
    opacity:.45;
    pointer-events:none;
}

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

.hero-badge{
    display:inline-flex;
    align-items:center;
    gap:.65rem;
    padding:.75rem 1.35rem;
    border-radius:999px;
    border:1px solid rgba(59,130,246,.30);
    background:rgba(30,64,175,.18);
    color:#93c5fd;
    font-size:.92rem;
    font-weight:600;
    margin-bottom:28px;
}

.hero-badge i{
    font-size:1rem;
}

.hero-title{
    margin:0;
    font-size:4.4rem;
    font-weight:800;
    line-height:1.02;
    letter-spacing:-2px;
    color:#fff;
}

.hero-title span{
    display:block;
    color:#60a5fa;
}

.hero-description{
    max-width:560px;
    margin:28px 0 40px;
    font-size:1.15rem;
    line-height:1.8;
    color:#cbd5e1;
}

.hero-buttons{
    display:flex;
    flex-wrap:wrap;
    gap:16px;
    margin-bottom:45px;
}

.hero-buttons .btn{
    padding:.95rem 1.8rem;
    border-radius:14px;
    font-weight:600;
}

.hero-buttons .btn-primary{
    background:#2563eb;
    border-color:#2563eb;
}

.hero-buttons .btn-primary:hover{
    background:#1d4ed8;
    border-color:#1d4ed8;
}

.hero-buttons .btn-outline-light{
    border-width:2px;
}

.hero-metrics{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
}

.metric-card{
    padding:22px;
    border-radius:18px;
    background:rgba(15,23,42,.75);
    border:1px solid rgba(255,255,255,.08);
    backdrop-filter:blur(14px);
    transition:.3s ease;
}

.metric-card:hover{
    transform:translateY(-5px);
    border-color:rgba(59,130,246,.45);
}

.metric-card h3{
    margin:0;
    color:#fff;
    font-size:2rem;
    font-weight:800;
}

.metric-card span{
    display:block;
    margin-top:8px;
    color:#94a3b8;
    font-size:.95rem;
}

/* ==========================================================================
   12. Hero Dashboard
   ========================================================================== */

.dashboard-card{
    position:relative;
    padding:30px;
    border-radius:28px;
    background:rgba(15,23,42,.82);
    border:1px solid rgba(255,255,255,.08);
    backdrop-filter:blur(18px);
    box-shadow:
        0 20px 60px rgba(0,0,0,.35),
        inset 0 1px 0 rgba(255,255,255,.04);
}

.dashboard-card::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    padding:1px;
    background:linear-gradient(
        135deg,
        rgba(59,130,246,.45),
        rgba(255,255,255,.04)
    );
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;
}

.dashboard-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:28px;
}

.dashboard-header h5{
    margin:0;
    color:#fff;
    font-size:1.35rem;
    font-weight:700;
}

.dashboard-header small{
    color:#94a3b8;
}

.status-live{
    color:#22c55e;
    font-weight:600;
    font-size:.95rem;
}

.dashboard-stats{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
    margin-bottom:28px;
}

.mini-stat{
    padding:18px;
    border-radius:16px;
    background:rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.06);
    text-align:center;
}

.mini-stat h4{
    margin:0;
    color:#fff;
    font-size:1.9rem;
    font-weight:800;
}

.mini-stat span{
    display:block;
    margin-top:8px;
    color:#94a3b8;
    font-size:.85rem;
}

.dashboard-grid{
    display:grid;
    grid-template-columns:1.3fr .9fr;
    gap:1.5rem;
    margin-top:2rem;
}

.dashboard-panel{

    padding:1.5rem;

    border-radius:18px;

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

    border:1px solid rgba(255,255,255,.05);

}

.dashboard-panel-title{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:1.25rem;

}

.dashboard-panel-title h6{

    margin:0;

    color:#fff;

    font-size:1rem;

    font-weight:600;

}

.dashboard-panel-title small{

    color:var(--hp-text-light);

}

/* ==========================================================================
   SMTP Infrastructure
   ========================================================================== */

.smtp-list{

    display:flex;

    flex-direction:column;

    gap:1rem;

}

.smtp-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:1rem;

    border-radius:14px;

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

    transition:.3s;

}

.smtp-item:hover{

    background:rgba(37,99,235,.08);

}

.smtp-info{

    display:flex;

    align-items:center;

    gap:.9rem;

}

.smtp-icon{

    width:42px;

    height:42px;

    border-radius:12px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(37,99,235,.15);

    color:#60a5fa;

    font-size:1.1rem;

}

.smtp-name{

    color:#fff;

    font-weight:600;

}

.smtp-meta{

    color:var(--hp-text-light);

    font-size:.82rem;

}

.smtp-status{

    padding:.45rem .9rem;

    border-radius:999px;

    font-size:.78rem;

    font-weight:600;

}

.smtp-online{

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

    color:#4ade80;

}

.smtp-warning{

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

    color:#fbbf24;

}

.smtp-offline{

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

    color:#f87171;

}

/* ==========================================================================
   Queue Processing
   ========================================================================== */

.queue-list{

    display:flex;

    flex-direction:column;

    gap:1rem;

}

.queue-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.queue-name{

    color:#fff;

    font-weight:500;

}

.queue-value{

    color:#38bdf8;

    font-weight:700;

}

.queue-bar{

    margin-top:.55rem;

    height:8px;

    border-radius:999px;

    overflow:hidden;

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

}

.queue-fill{

    height:100%;

    border-radius:999px;

    background:linear-gradient(
        90deg,
        var(--hp-primary),
        #38bdf8
    );

}

/* ==========================================================================
   Worker Status
   ========================================================================== */

.worker-list{

    display:flex;

    flex-direction:column;

    gap:.85rem;

}

.worker{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:.9rem 1rem;

    border-radius:14px;

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

}

.worker-left{

    display:flex;

    align-items:center;

    gap:.8rem;

}

.worker-dot{

    width:10px;

    height:10px;

    border-radius:50%;

    background:#22c55e;

    box-shadow:0 0 12px #22c55e;

}

.worker-name{

    color:#fff;

    font-weight:600;

}

.worker-meta{

    color:var(--hp-text-light);

    font-size:.8rem;

}

.worker-load{

    color:#38bdf8;

    font-weight:700;

}

/* ==========================================================================
   Activity Feed
   ========================================================================== */

.activity-list{

    display:flex;

    flex-direction:column;

    gap:1rem;

}

.activity-item{

    display:flex;

    gap:1rem;

    align-items:flex-start;

}

.activity-icon{

    width:38px;

    height:38px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(37,99,235,.15);

    color:#60a5fa;

    flex-shrink:0;

}

.activity-content{

    flex:1;

}

.activity-title{

    color:#fff;

    font-size:.92rem;

    font-weight:600;

}

.activity-time{

    color:var(--hp-text-light);

    font-size:.8rem;

}

/* ==========================================================================
   System Health
   ========================================================================== */

.health-grid{

    display:grid;

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

    gap:1rem;

    margin-top:1rem;

}

.health-card{

    padding:1rem;

    border-radius:16px;

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

    border:1px solid rgba(255,255,255,.05);

}

.health-label{

    color:var(--hp-text-light);

    font-size:.8rem;

}

.health-value{

    margin-top:.45rem;

    color:#fff;

    font-size:1.45rem;

    font-weight:700;

}

.health-good{

    color:#22c55e;

}

.health-warning{

    color:#fbbf24;

}

.health-danger{

    color:#ef4444;

}

/* ==========================================================================
   Dashboard Responsive
   ========================================================================== */

@media (max-width:1200px){

    .dashboard-stats{

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

    }

}

@media (max-width:991px){

    .dashboard-grid{

        grid-template-columns:1fr;

    }

}

@media (max-width:768px){

    .dashboard-card{

        padding:1.5rem;

    }

    .dashboard-header{

        flex-direction:column;

        align-items:flex-start;

        gap:1rem;

    }

    .dashboard-stats{

        grid-template-columns:1fr;

    }

    .health-grid{

        grid-template-columns:1fr;

    }

}

@media (max-width:576px){

    .dashboard-card{

        padding:1.2rem;

    }

    .mini-stat-value{

        font-size:1.5rem;

    }

}

/* ==========================================================================
   14. Features Section
   ========================================================================== */

.features-section{
    position:relative;
    padding:7rem 0;
}

.section-header{
    max-width:760px;
    margin:0 auto 4rem;
    text-align:center;
}

.section-badge{
    display:inline-flex;
    align-items:center;
    gap:.6rem;
    padding:.55rem 1rem;
    margin-bottom:1.25rem;
    border-radius:999px;
    background:rgba(37,99,235,.12);
    border:1px solid rgba(37,99,235,.25);
    color:#93c5fd;
    font-size:.85rem;
    font-weight:600;
}

.section-title{
    color:#fff;
    font-size:clamp(2.3rem,5vw,3.5rem);
    font-weight:800;
    line-height:1.15;
    margin-bottom:1.25rem;
}

.section-description{
    color:var(--hp-text-light);
    font-size:1.08rem;
    line-height:1.8;
}

.features-grid{

    display:grid;

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

    gap:1.75rem;

}

.feature-card{

    position:relative;

    overflow:hidden;

    padding:2rem;

    border-radius:24px;

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

    border:1px solid rgba(255,255,255,.06);

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

}

.feature-card:hover{

    transform:translateY(-10px);

    background:rgba(37,99,235,.08);

    border-color:rgba(37,99,235,.35);

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

}

.feature-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            135deg,

            rgba(37,99,235,.08),

            transparent 45%);

    opacity:0;

    transition:.35s;

}

.feature-card:hover::before{

    opacity:1;

}

.feature-icon{

    width:70px;

    height:70px;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:1.5rem;

    background:linear-gradient(
        135deg,
        var(--hp-primary),
        #38bdf8
    );

    color:#fff;

    font-size:1.7rem;

    box-shadow:
        0 15px 35px rgba(37,99,235,.35);

}

.feature-title{

    color:#fff;

    font-size:1.3rem;

    font-weight:700;

    margin-bottom:1rem;

}

.feature-description{

    color:var(--hp-text-light);

    line-height:1.8;

    margin-bottom:1.5rem;

}

.feature-list{

    list-style:none;

    padding:0;

    margin:0;

}

.feature-list li{

    display:flex;

    align-items:center;

    gap:.75rem;

    margin-bottom:.85rem;

    color:#cbd5e1;

}

.feature-list li i{

    color:#22c55e;

    font-size:.9rem;

}

.feature-link{

    display:inline-flex;

    align-items:center;

    gap:.6rem;

    margin-top:1.25rem;

    color:#60a5fa;

    font-weight:600;

    text-decoration:none;

    transition:.3s;

}

.feature-link i{

    transition:.3s;

}

.feature-card:hover .feature-link{

    color:#93c5fd;

}

.feature-card:hover .feature-link i{

    transform:translateX(6px);

}

@media (max-width:1200px){

    .features-grid{

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

    }

}

@media (max-width:768px){

    .features-grid{

        grid-template-columns:1fr;

    }

    .section-header{

        margin-bottom:3rem;

    }

    .feature-card{

        padding:1.75rem;

    }

}

/* ==========================================================================
   15. Statistics Section
   ========================================================================== */

.statistics-section{
    position:relative;
    padding:7rem 0;
    overflow:hidden;
}

.statistics-section::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at top right,
            rgba(37,99,235,.12),
            transparent 45%);
    pointer-events:none;
}

.statistics-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:1.75rem;
}

.stat-card{

    position:relative;

    overflow:hidden;

    text-align:center;

    padding:2.25rem 1.5rem;

    border-radius:24px;

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

    border:1px solid rgba(255,255,255,.06);

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

}

.stat-card:hover{

    transform:translateY(-8px);

    background:rgba(37,99,235,.08);

    border-color:rgba(37,99,235,.35);

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

}

.stat-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            135deg,
            rgba(37,99,235,.10),
            transparent 45%
        );

    opacity:0;

    transition:.35s;

}

.stat-card:hover::before{

    opacity:1;

}

.stat-icon{

    width:72px;

    height:72px;

    margin:0 auto 1.5rem;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:
        linear-gradient(
            135deg,
            var(--hp-primary),
            #38bdf8
        );

    color:#fff;

    font-size:1.75rem;

    box-shadow:
        0 18px 40px rgba(37,99,235,.35);

}

.stat-number{

    display:block;

    color:#fff;

    font-size:2.8rem;

    font-weight:800;

    line-height:1;

    margin-bottom:.8rem;

}

.stat-label{

    color:var(--hp-text-light);

    font-size:1rem;

    margin-bottom:1rem;

}

.stat-growth{

    display:inline-flex;

    align-items:center;

    gap:.45rem;

    padding:.45rem .9rem;

    border-radius:999px;

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

    color:#4ade80;

    font-size:.82rem;

    font-weight:600;

}

.statistics-summary{

    margin-top:4rem;

    padding:2rem;

    border-radius:24px;

    display:grid;

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

    gap:2rem;

    background:
        linear-gradient(
            180deg,
            rgba(15,23,42,.95),
            rgba(2,6,23,.98)
        );

    border:1px solid rgba(255,255,255,.06);

}

.summary-item{

    text-align:center;

}

.summary-value{

    display:block;

    color:#fff;

    font-size:2rem;

    font-weight:700;

    margin-bottom:.5rem;

}

.summary-label{

    color:var(--hp-text-light);

}

@media (max-width:1200px){

    .statistics-grid{

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

    }

}

@media (max-width:768px){

    .statistics-grid{

        grid-template-columns:1fr;

    }

    .statistics-summary{

        grid-template-columns:1fr;

        gap:1.5rem;

    }

    .stat-number{

        font-size:2.3rem;

    }

}

/* ==========================================================================
   16. Platform Architecture
   ========================================================================== */

.platform-section{
    position:relative;
    padding:7rem 0;
    overflow:hidden;
}

.platform-grid{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:2rem;
    align-items:center;
}

.platform-content{
    position:relative;
}

.platform-title{
    margin-bottom:1.5rem;
}

.platform-description{
    max-width:620px;
    color:var(--hp-text-light);
    line-height:1.9;
    margin-bottom:2.5rem;
}

.architecture-card{

    position:relative;

    overflow:hidden;

    padding:2rem;

    border-radius:28px;

    background:linear-gradient(
        180deg,
        rgba(15,23,42,.96),
        rgba(2,6,23,.98)
    );

    border:1px solid rgba(255,255,255,.06);

    box-shadow:
        0 30px 70px rgba(0,0,0,.40);

}

.architecture-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            135deg,
            rgba(37,99,235,.10),
            transparent 45%
        );

    pointer-events:none;

}

.platform-layers{

    display:flex;

    flex-direction:column;

    gap:1rem;

}

.platform-layer{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:1rem;

    padding:1.1rem 1.4rem;

    border-radius:16px;

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

    border:1px solid rgba(255,255,255,.05);

    transition:.35s;

}

.platform-layer:hover{

    transform:translateX(8px);

    background:rgba(37,99,235,.08);

    border-color:rgba(37,99,235,.35);

}

.platform-layer-left{

    display:flex;

    align-items:center;

    gap:1rem;

}

.platform-icon{

    width:48px;

    height:48px;

    border-radius:14px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(37,99,235,.15);

    color:#60a5fa;

    font-size:1.2rem;

}

.platform-layer-title{

    color:#fff;

    font-weight:700;

}

.platform-layer-text{

    color:var(--hp-text-light);

    font-size:.85rem;

}

.platform-layer:not(:last-child)::after{

    content:"";

    position:absolute;

    left:24px;

    bottom:-18px;

    width:2px;

    height:18px;

    background:linear-gradient(
        to bottom,
        rgba(37,99,235,.70),
        transparent
    );

}

.tech-stack{

    display:flex;

    flex-wrap:wrap;

    gap:.9rem;

    margin-top:2rem;

}

.tech-badge{

    padding:.75rem 1.1rem;

    border-radius:999px;

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

    border:1px solid rgba(255,255,255,.08);

    color:#cbd5e1;

    font-size:.88rem;

    transition:.30s;

}

.tech-badge:hover{

    background:rgba(37,99,235,.12);

    border-color:rgba(37,99,235,.35);

    color:#fff;

}

.platform-visual{

    position:relative;

}

.platform-panel{

    padding:2rem;

    border-radius:24px;

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

    border:1px solid rgba(255,255,255,.06);

}

.platform-node{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:1rem 1.25rem;

    margin-bottom:1rem;

    border-radius:16px;

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

    transition:.3s;

}

.platform-node:hover{

    background:rgba(37,99,235,.08);

}

.platform-node-title{

    color:#fff;

    font-weight:600;

}

.platform-node-status{

    color:#22c55e;

    font-size:.85rem;

    font-weight:600;

}

@media (max-width:992px){

    .platform-grid{

        grid-template-columns:1fr;

    }

    .platform-content{

        text-align:center;

    }

    .platform-description{

        margin-left:auto;

        margin-right:auto;

    }

}

@media (max-width:768px){

    .platform-layer{

        flex-direction:column;

        align-items:flex-start;

    }

    .platform-layer:not(:last-child)::after{

        display:none;

    }

}

/* ==========================================================================
   17. Call To Action
   ========================================================================== */

.cta-section{
    position:relative;
    padding:8rem 0;
    overflow:hidden;
}

.cta-section::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at top left,
            rgba(37,99,235,.16),
            transparent 45%),
        radial-gradient(circle at bottom right,
            rgba(6,182,212,.14),
            transparent 45%);
    pointer-events:none;
}

.cta-card{

    position:relative;

    overflow:hidden;

    padding:4rem;

    border-radius:32px;

    text-align:center;

    background:
        linear-gradient(
            180deg,
            rgba(15,23,42,.97),
            rgba(2,6,23,.99)
        );

    border:1px solid rgba(255,255,255,.06);

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

}

.cta-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            135deg,
            rgba(37,99,235,.10),
            transparent 45%
        );

    pointer-events:none;

}

.cta-content{

    position:relative;

    z-index:2;

}

.cta-title{

    font-size:clamp(2.5rem,5vw,4rem);

    font-weight:800;

    line-height:1.1;

    margin-bottom:1.5rem;

}

.cta-description{

    max-width:760px;

    margin:0 auto 2.5rem;

    color:var(--hp-text-light);

    font-size:1.12rem;

    line-height:1.9;

}

.cta-actions{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:1rem;

    margin-top:2rem;

}

.cta-actions .btn{

    min-width:220px;

}

.cta-trust{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:2rem;

    margin-top:3rem;

}

.cta-trust-item{

    display:flex;

    align-items:center;

    gap:.75rem;

}

.cta-trust-icon{

    width:46px;

    height:46px;

    border-radius:14px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(37,99,235,.12);

    color:#60a5fa;

    font-size:1.1rem;

}

.cta-trust-title{

    color:#fff;

    font-weight:600;

}

.cta-trust-text{

    color:var(--hp-text-light);

    font-size:.85rem;

}

.cta-glow{

    position:absolute;

    width:420px;

    height:420px;

    right:-140px;

    top:-140px;

    border-radius:50%;

    background:

        radial-gradient(

            circle,

            rgba(37,99,235,.22),

            transparent 70%);

    pointer-events:none;

}

@media (max-width:992px){

    .cta-card{

        padding:3rem 2rem;

    }

}

@media (max-width:768px){

    .cta-actions{

        flex-direction:column;

    }

    .cta-actions .btn{

        width:100%;

    }

    .cta-trust{

        flex-direction:column;

        align-items:flex-start;

        gap:1.5rem;

    }

}

/* ==========================================================================
   18. Enterprise Footer
   ========================================================================== */

.footer-section{
    position:relative;
    padding:6rem 0 2rem;
    background:linear-gradient(
        180deg,
        rgba(2,6,23,.98),
        #020617
    );
    border-top:1px solid rgba(255,255,255,.06);
}

.footer-grid{
    display:grid;
    grid-template-columns:2fr 1fr 1fr 1fr;
    gap:3rem;
}

.footer-brand{

    max-width:420px;

}

.footer-logo{

    display:flex;

    align-items:center;

    gap:.85rem;

    margin-bottom:1.5rem;

    font-size:1.45rem;

    font-weight:700;

    color:#fff;

}

.footer-logo i{

    font-size:1.6rem;

    color:var(--hp-primary);

}

.footer-description{

    color:var(--hp-text-light);

    line-height:1.9;

    margin-bottom:2rem;

}

.footer-title{

    margin-bottom:1.5rem;

    color:#fff;

    font-size:1.05rem;

    font-weight:700;

}

.footer-links{

    list-style:none;

    margin:0;

    padding:0;

}

.footer-links li{

    margin-bottom:.9rem;

}

.footer-links a{

    color:var(--hp-text-light);

    transition:.3s;

}

.footer-links a:hover{

    color:#fff;

    padding-left:6px;

}

.footer-social{

    display:flex;

    gap:.8rem;

    margin-top:2rem;

}

.footer-social a{

    width:44px;

    height:44px;

    border-radius:14px;

    display:flex;

    align-items:center;

    justify-content:center;

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

    border:1px solid rgba(255,255,255,.08);

    color:#cbd5e1;

    transition:.30s;

}

.footer-social a:hover{

    background:rgba(37,99,235,.12);

    color:#fff;

    transform:translateY(-4px);

}

.footer-bottom{

    margin-top:4rem;

    padding-top:2rem;

    border-top:1px solid rgba(255,255,255,.06);

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:1rem;

}

.footer-copyright{

    color:#94a3b8;

    font-size:.9rem;

}

.footer-bottom-links{

    display:flex;

    gap:1.5rem;

}

.footer-bottom-links a{

    color:#94a3b8;

    transition:.30s;

}

.footer-bottom-links a:hover{

    color:#fff;

}

.back-to-top{

    position:fixed;

    right:30px;

    bottom:30px;

    width:54px;

    height:54px;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(
        135deg,
        var(--hp-primary),
        #38bdf8
    );

    color:#fff;

    box-shadow:
        0 20px 40px rgba(37,99,235,.35);

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:1000;

}

.back-to-top.show{

    opacity:1;

    visibility:visible;

}

.back-to-top:hover{

    transform:translateY(-5px);

}

@media (max-width:1200px){

    .footer-grid{

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

    }

}

@media (max-width:768px){

    .footer-grid{

        grid-template-columns:1fr;

        gap:2.5rem;

    }

    .footer-bottom{

        flex-direction:column;

        text-align:center;

    }

    .footer-bottom-links{

        flex-wrap:wrap;

        justify-content:center;

    }

}

@media (max-width:576px){

    .footer-social{

        flex-wrap:wrap;

    }

}

/* ==========================================================================
   19. Global Animations & Utilities
   ========================================================================== */

/* ----------------------------------------------------------
   Smooth Reveal
---------------------------------------------------------- */

.fade-up{
    opacity:0;
    transform:translateY(30px);
    transition:
        opacity .7s ease,
        transform .7s ease;
}

.fade-up.show{
    opacity:1;
    transform:none;
}

.fade-in{
    opacity:0;
    transition:opacity .7s ease;
}

.fade-in.show{
    opacity:1;
}

.scale-in{
    opacity:0;
    transform:scale(.94);
    transition:
        opacity .6s ease,
        transform .6s ease;
}

.scale-in.show{
    opacity:1;
    transform:scale(1);
}

/* ----------------------------------------------------------
   Floating Effects
---------------------------------------------------------- */

.float-animation{
    animation:hpFloat 6s ease-in-out infinite;
}

.float-slow{
    animation:hpFloat 8s ease-in-out infinite;
}

.float-fast{
    animation:hpFloat 4s ease-in-out infinite;
}

@keyframes hpFloat{

    0%{
        transform:translateY(0);
    }

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

    100%{
        transform:translateY(0);
    }

}

/* ----------------------------------------------------------
   Pulse
---------------------------------------------------------- */

.pulse{

    animation:hpPulse 2s infinite;

}

@keyframes hpPulse{

    0%{
        box-shadow:0 0 0 0 rgba(37,99,235,.40);
    }

    70%{
        box-shadow:0 0 0 18px rgba(37,99,235,0);
    }

    100%{
        box-shadow:0 0 0 0 rgba(37,99,235,0);
    }

}

/* ----------------------------------------------------------
   Animated Gradient
---------------------------------------------------------- */

.gradient-border{

    position:relative;

}

.gradient-border::before{

    content:"";

    position:absolute;

    inset:-1px;

    border-radius:inherit;

    padding:1px;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #06b6d4,
            #2563eb
        );

    background-size:300%;

    animation:borderFlow 6s linear infinite;

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

    mask-composite:exclude;

}

@keyframes borderFlow{

    0%{
        background-position:0%;
    }

    100%{
        background-position:300%;
    }

}

/* ----------------------------------------------------------
   Scrollbar
---------------------------------------------------------- */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#020617;

}

::-webkit-scrollbar-thumb{

    background:#2563eb;

    border-radius:999px;

}

::-webkit-scrollbar-thumb:hover{

    background:#3b82f6;

}

/* ----------------------------------------------------------
   Text Selection
---------------------------------------------------------- */

::selection{

    background:#2563eb;

    color:#fff;

}

::-moz-selection{

    background:#2563eb;

    color:#fff;

}

/* ----------------------------------------------------------
   Accessibility
---------------------------------------------------------- */

:focus-visible{

    outline:3px solid rgba(37,99,235,.45);

    outline-offset:3px;

}

button:focus-visible,
a:focus-visible{

    border-radius:8px;

}

/* ----------------------------------------------------------
   Reduced Motion
---------------------------------------------------------- */

@media (prefers-reduced-motion:reduce){

    *{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}

/* ----------------------------------------------------------
   Print
---------------------------------------------------------- */

@media print{

    .navbar-landing,
    .back-to-top,
    .cta-section{

        display:none !important;

    }

    body{

        background:#fff;

        color:#000;

    }

}

/* ----------------------------------------------------------
   Utility Helpers
---------------------------------------------------------- */

.text-white{
    color:#fff !important;
}

.text-light{
    color:var(--hp-text-light) !important;
}

.bg-glass{
    background:rgba(255,255,255,.04);
}

.border-glass{
    border:1px solid rgba(255,255,255,.08);
}

.radius-lg{
    border-radius:24px;
}

.radius-xl{
    border-radius:32px;
}

.shadow-soft{
    box-shadow:0 20px 60px rgba(0,0,0,.30);
}

.shadow-large{
    box-shadow:0 35px 90px rgba(0,0,0,.45);
}

.transition{
    transition:.35s ease;
}
/* ==========================================================================
   Definitive Hero Section Layout Fix
   ========================================================================== */
@media (min-width: 992px) {
    .hero-section .container,
    .hero-section .container-xl {
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 40px !important;
        padding-right: 40px !important;
    }
    .hero-section .row {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        margin: 0 !important;
    }
    .hero-section .col-lg-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        padding: 0 20px !important;
    }
}