/* ==========================================================================
   DNH Hero Section — hero.css
   Dark navy / electric cyan / indigo design system
   ========================================================================== */

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

.home-hero{
    position:relative;
    overflow:hidden;
    isolation:isolate;

    background:

        /* Top Right Glow */
        radial-gradient(circle at 82% 15%,
            rgba(74,130,255,.40) 0%,
            rgba(40,95,255,.22) 18%,
            rgba(20,70,220,.10) 35%,
            transparent 55%),

        /* Glow behind Server */
        radial-gradient(circle at 73% 52%,
            rgba(0,120,255,.18) 0%,
            rgba(0,90,255,.12) 25%,
            rgba(0,60,180,.06) 42%,
            transparent 70%),

        /* Left Glow */
        radial-gradient(circle at 18% 18%,
            rgba(0,110,255,.12) 0%,
            transparent 38%),

        /* Bottom Glow */
        radial-gradient(circle at 50% 100%,
            rgba(0,80,255,.10) 0%,
            transparent 55%),

        /* Main Gradient */
        linear-gradient(
            135deg,
            #02071b 0%,
            #031041 20%,
            #061d63 45%,
            #04144c 72%,
            #02091f 100%
        );

    min-height:450px;
    padding:25px 0;
}

.home-hero-bg-grid{
    position:absolute;
    inset:0;

    background:

        radial-gradient(circle,#2f7fff 1px,transparent 1px),

        linear-gradient(
            rgba(255,255,255,.02) 1px,
            transparent 1px),

        linear-gradient(
            90deg,
            rgba(255,255,255,.02) 1px,
            transparent 1px);

    background-size:
        70px 70px,
        40px 40px,
        40px 40px;

    opacity:.22;

    pointer-events:none;
    z-index:0;
}

.home-hero::before{

    content:"";

    position:absolute;
    inset:0;

    background:

        radial-gradient(circle at 78% 48%,
            rgba(0,160,255,.16),
            transparent 35%),

        radial-gradient(circle at 90% 10%,
            rgba(120,170,255,.08),
            transparent 28%);

    pointer-events:none;
    z-index:1;
}

.home-hero::after{

    content:"";

    position:absolute;

    left:-10%;
    right:-10%;
    bottom:-180px;

    height:420px;

    background:

        linear-gradient(
            rgba(255,255,255,.025) 1px,
            transparent 1px),

        linear-gradient(
            90deg,
            rgba(255,255,255,.025) 1px,
            transparent 1px);

    background-size:45px 45px;

    transform:
        perspective(900px)
        rotateX(76deg);

    opacity:.35;

    pointer-events:none;

    z-index:1;
}

.home-hero .container {
    position: relative;
    z-index: 2;
    max-width: 1320px;
    margin:auto;
    /*padding: 0 24px;*/
}

.home-hero-wrapper {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    align-items: center;
    gap: 40px;
}

/* ---------------------------------------------------------------------- */
/* Hero Content (left side)                                               */
/* ---------------------------------------------------------------------- */

.home-hero-content {
    color: #e7ecf7;
}

.home-hero-badge {
    display: inline-flex;
    align-items: center;
    padding: 7px 16px;
    border-radius: 30px;
    background: rgba(34, 211, 238, 0.12);
    border: 1px solid rgba(34, 211, 238, 0.35);
    margin-bottom: 22px;
}

.home-hero-badge span {
    font-size: 12px;
    letter-spacing: 1.5px;
    font-weight: 600;
    color: #67e8f9;
}

.home-hero h1,
.home-hero-title {
    font-size: 36px;
    line-height: 1.18;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 20px;
}

.home-hero h1 .home-accent,
.home-hero-title .home-accent {
    background: linear-gradient(90deg, #22d3ee, #818cf8);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.home-hero-description {
    font-size: 14px;
    line-height: 1.4;
    color: #a8b3cc;
    max-width: 520px;
    margin-bottom: 10px;
}

.home-hero-description strong {
    color: #67e8f9;
    font-weight: 600;
}

/* Buttons */

.home-hero-buttons {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 36px;
    flex-wrap: wrap;
}

.home-domain-btn,
.home-demo-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 600;
    padding: 15px 26px;
    border-radius: 10px;
    text-decoration: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
    white-space: nowrap;
}

.home-domain-btn {
    /*background: linear-gradient(90deg, #06b6d4, #6366f1);*/
    background:#0b5fff;
    color: #ffffff;
    box-shadow: 0 8px 24px rgba(34, 211, 238, 0.25);
}

.home-domain-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(34, 211, 238, 0.4);
}

.home-demo-btn {
    background: transparent;
    color: #e7ecf7;
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.home-demo-btn:hover {
    border-color: rgba(34, 211, 238, 0.5);
    background: rgba(34, 211, 238, 0.08);
    transform: translateY(-2px);
}

/* Feature strip */

.home-hero-features {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    padding: 10px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius:16px;
}

.home-feature {
    position:relative;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #9aa6c3;
}

.home-feature i {
    font-size: 15px;
    color: #22d3ee;
}


/*.home-hero-features{*/
/*    display:flex;*/
/*    align-items:center;*/
/*    justify-content:space-between;*/
/*    flex-wrap:wrap;*/

/*    padding:14px 20px;*/

/*    background:rgba(255,255,255,.04);*/
/*    border:1px solid rgba(255,255,255,.08);*/
/*    border-radius:16px;*/

/*    backdrop-filter:blur(12px);*/
/*}*/

/*.home-feature{*/
/*    position:relative;*/

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

/*    padding:0 22px;*/

/*    color:#fff;*/
/*    font-size:14px;*/
/*    font-weight:500;*/
/*}*/

/*.home-feature i{*/
/*    font-size:18px;*/
/*    color:#22d3ee;*/
/*}*/

/*.home-feature span{*/
/*    white-space:nowrap;*/
/*}*/

/* Vertical Divider */

/*.home-feature:not(:last-child)::after{*/
/*    content:"";*/

/*    position:absolute;*/

/*    right:0;*/
/*    top:50%;*/

/*    transform:translateY(-50%);*/

/*    width:1px;*/
/*    height:24px;*/

/*    background:rgba(255,255,255,.15);*/
/*}*/

/* ---------------------------------------------------------------------- */
/* Hero Visual (right side)                                                */
/* ---------------------------------------------------------------------- */

.home-hero-visual {
    position: relative;
    height: 440px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Floating glass cards */

.home-visual-card {
    position: absolute;
    /*background: rgba(13, 21, 46, 0.85);*/
    background:#0c2a71;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 16px 18px;
    backdrop-filter: blur(14px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
    z-index: 5;
    animation: floatCard 5s ease-in-out infinite;
}

.home-vcard-label {
    font-size: 12px;
    color: #8b97b8;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    white-space: nowrap;
}

.home-vcard-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 8px #34d399;
}

.home-vcard-value {
    font-size: 26px;
    font-weight: 700;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 10px;
}

.home-vcard-icon {
    font-size: 14px;
    color: #34d399;
    background: rgba(52, 211, 153, 0.15);
    padding: 6px;
    border-radius: 7px;
}

.home-vcard-sub {
    font-size: 12px;
    color: #6b7793;
    margin-top: 4px;
}

.home-vcard-text {
    font-size: 13px;
    color: #c2cae0;
    max-width: 190px;
    line-height: 1.5;
    margin-bottom: 10px;
}

.home-vcard-line {
    font-size: 14px;
    color: #d7deef;
    font-weight: 500;
}

.home-vcard-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #34d399;
    margin-top: 10px;
}

.home-vcard-status-icon {
    margin-left: auto;
    color: #67e8f9;
}

.home-vcard-sparkline {
    width: 100%;
    height: 32px;
    overflow: visible;
}

.home-vcard-sparkline polyline {
    fill: none;
    stroke: #34d399;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.home-vcard-avatars {
    display: flex;
    margin-top: 10px;
}

.avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, #22d3ee, #6366f1);
    border: 2px solid #0b1638;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    color: #ffffff;
    /*margin-left: -10px;*/
}

.avatar:first-child {
    /*margin-left: 0;*/
}

/* Card placement */

.home-card-top-left {
    top: 6%;
    left: -2%;
    animation-delay: 0s;
}

.home-card-mid-left {
    top: 36%;
    left: -6%;
    animation-delay: 0.6s;
}

.home-card-top-right {
    top: 4%;
    right: -4%;
    animation-delay: 1.1s;
}

.home-card-bottom-right {
    bottom: 8%;
    right: -8%;
    animation-delay: 1.6s;
}

@keyframes floatCard {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* ---------------------------------------------------------------------- */
/* Server stack illustration                                              */
/* ---------------------------------------------------------------------- */

.hero-server-image{
    width:100%;
    max-width:650px;
    height:auto;
    display:block;

    animation:floatServer 5s ease-in-out infinite;
}

@keyframes floatServer{
    0%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-15px);
    }
    100%{
        transform:translateY(0);
    }
}

.home-server-stack {
    position: relative;
    width: 340px;
    height: 380px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 2;
}

.home-cloud-icon {
    position: absolute;
    top: -38px;
    left: 50%;
    transform: translateX(-50%);
    width: 150px;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
}

.home-cloud-icon i.fa-cloud {
    position: absolute;
    inset: 0;
    font-size: 110px;
    color: #0b1638;
    -webkit-text-stroke: 2px #22d3ee;
    text-shadow:
        0 0 18px rgba(34, 211, 238, 0.85),
        0 0 40px rgba(34, 211, 238, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
}

.home-cloud-logo {
    position: relative;
    font-weight: 700;
    font-size: 17px;
    letter-spacing: 1px;
    color: #f97316;
    text-shadow: 0 0 14px rgba(249, 115, 22, 0.8);
    z-index: 5;
}

.home-server-beam {
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    height: 70px;
    background: linear-gradient(180deg, rgba(34, 211, 238, 0.9), rgba(34, 211, 238, 0));
    box-shadow: 0 0 12px rgba(34, 211, 238, 0.8);
    z-index: 3;
}

.home-server-tower {
    position: relative;
    width: 84px;
    height: 230px;
    background: linear-gradient(160deg, #0f1a3d 0%, #0a1330 100%);
    border: 1px solid rgba(34, 211, 238, 0.25);
    border-radius: 6px;
    margin: 0 3px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 6px;
    padding: 10px 8px;
    box-shadow:
        inset 0 0 16px rgba(0, 0, 0, 0.5),
        0 18px 34px rgba(0, 0, 0, 0.45);
    z-index: 2;
}

.home-tower-1 { transform: translateY(14px) scale(0.94); opacity: 0.92; }
.home-tower-2 { height: 250px; z-index: 3; }
.home-tower-3 { transform: translateY(14px) scale(0.94); opacity: 0.92; }

.home-server-rack {
    display: flex;
    align-items: center;
    gap: 5px;
    height: 12px;
    background: rgba(34, 211, 238, 0.05);
    border-radius: 3px;
    padding: 0 6px;
}

.home-server-rack span {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #1a2550;
}

.home-server-rack span:nth-child(1) {
    background: #34d399;
    box-shadow: 0 0 5px #34d399;
    animation: blink 2.4s ease-in-out infinite;
}

.home-server-rack span:nth-child(2) {
    background: #22d3ee;
    box-shadow: 0 0 5px #22d3ee;
    animation: blink 2.4s ease-in-out infinite 0.4s;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.25; }
}

.home-server-platform {
    position: absolute;
    bottom: -22px;
    left: 50%;
    transform: translateX(-50%) rotateX(60deg);
    width: 320px;
    height: 60px;
    background: linear-gradient(90deg, rgba(34, 211, 238, 0.18), rgba(99, 102, 241, 0.18));
    border: 1px solid rgba(34, 211, 238, 0.3);
    border-radius: 50%;
    box-shadow: 0 0 60px rgba(34, 211, 238, 0.35);
    z-index: 1;
}

/* ---------------------------------------------------------------------- */
/* Swiper nav / pagination                                                */
/* ---------------------------------------------------------------------- */

.hom-hero-slider {
    overflow: hidden;
}

.hero-prev,
.hero-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(13, 21, 46, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #c2cae0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.hero-prev { left: 24px; }
.hero-next { right: 24px; }

.hero-prev:hover,
.hero-next:hover {
    background: rgba(34, 211, 238, 0.15);
    border-color: rgba(34, 211, 238, 0.5);
    color: #67e8f9;
}

.home-hero .swiper-pagination {
    position: absolute;
    bottom: 16px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 8px;
    z-index: 10;
}

.home-hero .swiper-pagination-bullet {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    opacity: 1;
    transition: background 0.25s ease, width 0.25s ease;
}

.home-hero .swiper-pagination-bullet-active {
    width: 26px;
    border-radius: 5px;
    background: linear-gradient(90deg, #22d3ee, #6366f1);
}

/* ---------------------------------------------------------------------- */
/* Responsive                                                              */
/* ---------------------------------------------------------------------- */
/* ==========================================================
   3840px+ (4K / Ultra Wide)
========================================================== */

@media (min-width:3000px){

    .home-hero{
        min-height:700px;
        padding:50px 0;
    }

    .home-hero .container{
        max-width:2400px;
        padding:0 60px;
    }

    .home-hero-wrapper{
        grid-template-columns:1.1fr .9fr;
        align-items:center;
        gap:140px;
    }

    /* =====================================
       Hero Content
    ====================================== */

    .home-hero h1,
    .home-hero-title{
        font-size:62px;
        line-height:1.08;
        margin-bottom:32px;
    }

    .home-hero-description{
        max-width:900px;
        font-size:28px;
        line-height:1.85;
        margin-bottom:40px;
    }

    /* =====================================
       Hero Buttons
    ====================================== */

    .home-hero-buttons{
        gap:24px;
        margin-bottom:42px;
    }

    .home-domain-btn,
    .home-demo-btn{
        padding:22px 42px;
        font-size:22px;
        border-radius:14px;
    }

    /* =====================================
       Feature Strip
    ====================================== */

    .home-hero-features{
        padding:22px 28px;
        gap:26px;
        border-radius:18px;
    }

    .home-feature{
        font-size:20px;
        gap:12px;
    }

    .home-feature i{
        font-size:24px;
    }

    /* =====================================
       Hero Visual
    ====================================== */

    .home-hero-visual{
        height:700px;
    }

    .home-server-stack{
        width:100%;
        max-width:650px;
        height:auto;
    }

    .hero-server-image{
        width:100%;
        max-width:650px;
        height:auto;
    }

    /* =====================================
       Floating Cards
    ====================================== */

    .home-visual-card{
        transform:scale(1.35);
        transform-origin:center;
    }

    .home-card-top-left{
        top:25px;
        left:-60px;
    }

    .home-card-mid-left{
        top:270px;
        left:-80px;
    }

    .home-card-top-right{
        top:25px;
        right:-60px;
    }

    .home-card-bottom-right{
        bottom:25px;
        right:-80px;
    }

    /* =====================================
       Slider Navigation
    ====================================== */

    .hero-prev,
    .hero-next{
        width:64px;
        height:64px;
        font-size:22px;
    }

    .home-hero .swiper-pagination{
        bottom:28px;
    }

}

/* ==========================================================
   2200px - 2999px (2560px / 2K)
========================================================== */

@media (min-width:2200px) and (max-width:2999px){

    .home-hero{
        min-height:650px;
        padding:40px 0;
    }

    .home-hero .container{
        max-width:1800px;
        padding:0 40px;
    }

    .home-hero-wrapper{
        grid-template-columns:1.1fr .9fr;
        align-items:center;
        gap:100px;
    }

    /* =====================================
       Hero Content
    ====================================== */

    .home-hero h1,
    .home-hero-title{
        font-size:56px;
        line-height:1.12;
        margin-bottom:28px;
    }

    .home-hero-description{
        max-width:760px;
        font-size:22px;
        line-height:1.8;
        margin-bottom:36px;
    }

    /* =====================================
       Buttons
    ====================================== */

    .home-hero-buttons{
        gap:20px;
        margin-bottom:36px;
    }

    .home-domain-btn,
    .home-demo-btn{
        padding:18px 32px;
        font-size:18px;
        border-radius:12px;
    }

    /* =====================================
       Feature Strip
    ====================================== */

    .home-hero-features{
        padding:18px 24px;
        gap:22px;
    }

    .home-feature{
        font-size:17px;
        gap:12px;
    }

    .home-feature i{
        font-size:20px;
    }

    /* =====================================
       Hero Visual
    ====================================== */

    .home-hero-visual{
        height:640px;
    }

    .home-server-stack{
        width:100%;
        max-width:600px;
        height:auto;
    }

    .hero-server-image{
        width:100%;
        max-width:600px;
        height:auto;
    }

    /* =====================================
       Floating Cards
    ====================================== */

    .home-visual-card{
        transform:scale(1.15);
        transform-origin:center;
    }

    .home-card-top-left{
        top:20px;
        left:-30px;
    }

    .home-card-mid-left{
        top:220px;
        left:-45px;
    }

    .home-card-top-right{
        top:20px;
        right:-30px;
    }

    .home-card-bottom-right{
        bottom:20px;
        right:-45px;
    }

    /* =====================================
       Slider Navigation
    ====================================== */

    .hero-prev,
    .hero-next{
        width:56px;
        height:56px;
        font-size:18px;
    }

    .home-hero .swiper-pagination{
        bottom:22px;
    }

}
/* =========================================================
   1920px
========================================================= */

@media (min-width:1600px) and (max-width:2199px){

    .home-hero{
        min-height:600px;
        padding:40px 0;
    }

    .home-hero .container{
        max-width:1540px;
        padding:0 30px;
    }

    .home-hero-wrapper{
        grid-template-columns:1.08fr .92fr;
        align-items:center;
        gap:70px;
    }

    /* ==========================
       Hero Content
    ========================== */

    .home-hero h1,
    .home-hero-title{
        font-size:48px;
        line-height:1.15;
        margin-bottom:22px;
    }

    .home-hero-description{
        max-width:620px;
        font-size:18px;
        line-height:1.8;
        margin-bottom:30px;
    }

    /* ==========================
       Buttons
    ========================== */

    .home-hero-buttons{
        gap:18px;
        margin-bottom:32px;
    }

    .home-domain-btn,
    .home-demo-btn{
        padding:16px 28px;
        font-size:16px;
    }

    /* ==========================
       Feature Bar
    ========================== */

    .home-hero-features{
        padding:16px 20px;
        gap:18px;
    }

    .home-feature{
        font-size:15px;
        gap:10px;
    }

    .home-feature i{
        font-size:18px;
    }

    /* ==========================
       Hero Visual
    ========================== */

    .home-hero-visual{
        height:520px;
    }

    .home-server-stack{
        width:100%;
        max-width:520px;
        height:auto;
    }

    .hero-server-image{
        width:100%;
        max-width:520px;
        height:auto;
    }

    /* ==========================
       Floating Cards
    ========================== */

    .home-visual-card{
        transform:scale(1);
        transform-origin:center;
    }

    .home-card-top-left{
        top:18px;
        left:-10px;
    }

    .home-card-mid-left{
        top:185px;
        left:-25px;
    }

    .home-card-top-right{
        top:18px;
        right:-10px;
    }

    .home-card-bottom-right{
        bottom:18px;
        right:-25px;
    }

    /* ==========================
       Navigation
    ========================== */

    .hero-prev,
    .hero-next{
        width:48px;
        height:48px;
    }

    .home-hero .swiper-pagination{
        bottom:18px;
    }
}

/* =========================================================
   1440px
========================================================= */


@media (max-width:1440px){

    .home-hero{
        min-height:500px;
        padding:30px 0;
    }

    .home-hero .container{
        max-width:1280px;
        padding:0 24px;
    }

    .home-hero-wrapper{
        grid-template-columns:1.05fr .95fr;
        align-items:center;
        gap:45px;
    }

    /* Hero Content */

    .home-hero h1,
    .home-hero-title{
        font-size:40px;
        line-height:1.18;
        margin-bottom:20px;
    }

    .home-hero-description{
        max-width:520px;
        font-size:16px;
        line-height:1.75;
        margin-bottom:24px;
    }

    /* Buttons */

    .home-hero-buttons{
        gap:16px;
        margin-bottom:28px;
    }

    .home-domain-btn,
    .home-demo-btn{
        padding:14px 24px;
        font-size:15px;
    }

    /* Feature Strip */

    .home-hero-features{
        gap:16px;
        padding:14px 18px;
    }

    .home-feature{
        font-size:14px;
        gap:8px;
    }

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

    /* Hero Visual */

    .home-hero-visual{
        height:460px;
    }

    .home-server-stack{
        width:100%;
        max-width:470px;
        height:auto;
    }

    .hero-server-image{
        width:100%;
        max-width:470px;
        height:auto;
    }

    /* Floating Cards */

    .home-visual-card{
        transform:scale(.92);
        transform-origin:center;
    }

    .home-card-top-left{
        top:12px;
        left:-8px;
    }

    .home-card-mid-left{
        top:165px;
        left:-18px;
    }

    .home-card-top-right{
        top:12px;
        right:-8px;
    }

    .home-card-bottom-right{
        bottom:12px;
        right:-18px;
    }

    /* Slider Navigation */

    .hero-prev,
    .hero-next{
        width:44px;
        height:44px;
    }
}

/* =========================================================
   1366px
========================================================= */

@media (max-width:1366px){

    .home-hero{
        min-height:460px;
        padding:30px 0;
    }

    .home-hero .container{
        max-width:1200px;
        padding:0 20px;
    }

    .home-hero-wrapper{
        grid-template-columns:1.05fr .95fr;
        gap:30px;
        align-items:center;
    }

    /* Hero Content */

    .home-hero h1,
    .home-hero-title{
        font-size:36px;
        line-height:1.2;
        margin-bottom:18px;
    }

    .home-hero-description{
        max-width:480px;
        font-size:15px;
        line-height:1.7;
        margin-bottom:22px;
    }

    /* Buttons */

    .home-hero-buttons{
        gap:14px;
        margin-bottom:24px;
    }

    .home-domain-btn,
    .home-demo-btn{
        padding:13px 22px;
        font-size:14px;
    }

    /* Feature Strip */

    .home-hero-features{
        gap:14px;
        padding:12px 16px;
    }

    .home-feature{
        font-size:13px;
        gap:8px;
    }

    .home-feature i{
        font-size:15px;
    }

    /* Hero Visual */

    .home-hero-visual{
        height:420px;
    }

    .home-server-stack{
        max-width:420px;
        width:100%;
        height:auto;
    }

    .hero-server-image{
        width:100%;
        max-width:420px;
        height:auto;
    }

    /* Floating Cards */

    .home-visual-card{
        transform:scale(.85);
        transform-origin:center;
    }

    .home-card-top-left{
        top:10px;
        left:-12px;
    }

    .home-card-mid-left{
        top:145px;
        left:-22px;
    }

    .home-card-top-right{
        top:10px;
        right:-12px;
    }

    .home-card-bottom-right{
        bottom:10px;
        right:-22px;
    }

    /* Slider Navigation */

    .hero-prev,
    .hero-next{
        width:42px;
        height:42px;
    }
}

/* =========================================================
   1280px
========================================================= */
@media (max-width:1280px){

    .home-hero{
        min-height:420px;
        padding:10px 0;
    }

    .home-hero .container{
        max-width:1180px;
        padding:0 20px;
    }

    .home-hero-wrapper{
        grid-template-columns:1.05fr 0.95fr;
        gap:20px;
        align-items:center;
    }

    /* Left Content */

    .home-hero h1,
    .home-hero-title{
        font-size:32px;
        line-height:1.15;
        margin-bottom:18px;
    }

    .home-hero-description{
        max-width:500px;
        font-size:15px;
        line-height:1.7;
        margin-bottom:20px;
    }

    /* Buttons */

    .home-hero-buttons{
        gap:12px;
        margin-bottom:22px;
    }

    .home-domain-btn,
    .home-demo-btn{
        padding:13px 22px;
        font-size:14px;
    }

    /* Features */

    .home-hero-features{
        padding:10px 10px;
        gap:0;
    }

    .home-feature{
        padding:0 10px;
        font-size:12px;
    }

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

    /* Right */

    .home-hero-visual{
        height:440px;
    }

    .hero-server-image{
        max-width:420px;
    }

    /* Floating Cards */

    .home-visual-card{
        transform:scale(.82);
        transform-origin:center;
    }

    .home-card-top-left{
        left:-20px;
        top:15px;
    }

    .home-card-mid-left{
        left:-10px;
        top:180px;
    }

    .home-card-top-right{
        right:-20px;
        top:20px;
    }

    .home-card-bottom-right{
        right:-10px;
        bottom:20px;
    }

    .hero-prev,
    .hero-next{
        width:42px;
        height:42px;
    }
    
}

/* =========================================================
   1024px
========================================================= */

@media (max-width:1024px){

    .home-hero{
        min-height:450px;
        padding:25px 0;
    }

    .home-hero .container{
        max-width:991px;
        padding:0 20px;
    }

    .home-hero-wrapper{
        grid-template-columns:1fr 0.95fr;
        gap:20px;
        align-items:center;
    }

    /* Left Content */

    .home-hero h1,
    .home-hero-title{
        font-size:30px;
        line-height:1.15;
        margin-bottom:16px;
    }

    .home-hero-description{
        font-size:14px;
        line-height:1.7;
        max-width:440px;
        margin-bottom:20px;
    }

    .home-hero-buttons{
        gap:12px;
        margin-bottom:20px;
    }

    .home-domain-btn,
    .home-demo-btn{
        padding:12px 20px;
        font-size:14px;
    }

    /* Feature Bar */

    .home-hero-features{
        padding:10px 14px;
        gap:10px;
    }

    .home-feature{
        font-size:12px;
        gap:8px;
    }

    .home-feature i{
        font-size:14px;
    }

    /* Right Side */

    .home-hero-visual{
        height:380px;
    }

    .hero-server-image{
        max-width:380px;
        width:100%;
    }

    /* Floating Cards */

    .home-visual-card{
        transform:scale(.72);
    }

    .home-card-top-left{
        top:5%;
        left:-18px;
    }

    .home-card-mid-left{
        top:42%;
        left:-12px;
    }

    .home-card-top-right{
        top:5%;
        right:-18px;
    }

    .home-card-bottom-right{
        bottom:2%;
        right:-12px;
    }

    /* Slider Controls */

    .hero-prev,
    .hero-next{
        width:42px;
        height:42px;
    }
}

/* =========================================================
   768px
========================================================= */

/* ==========================================================
   768px
========================================================== */

@media (max-width:768px){

    .home-hero{
        min-height:auto;
        padding:50px 0;
    }

    .home-hero .container{
        padding:0 20px;
    }

    .home-hero-wrapper{
        display:flex;
        flex-direction:column;
        gap:40px;
        align-items:center;
        text-align:center;
    }

    /* Content First */

    .home-hero-content{
        order:1;
        width:100%;
        max-width:650px;
    }

    .home-hero h1,
    .home-hero-title{
        font-size:34px;
        line-height:1.2;
        margin-bottom:18px;
    }

    .home-hero-description{
        max-width:100%;
        margin:0 auto 24px;
        font-size:16px;
        line-height:1.7;
    }

    .home-hero-buttons{
        justify-content:center;
        gap:14px;
        margin-bottom:24px;
        flex-wrap:wrap;
    }

    .home-domain-btn,
    .home-demo-btn{
        min-width:210px;
        justify-content:center;
        padding:14px 22px;
        font-size:15px;
    }

    /* Feature Bar */

    .home-hero-features{
        justify-content:center;
        gap:14px;
        padding:14px;
    }

    .home-feature{
        font-size:13px;
    }

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

    /* Image Second */

    .home-hero-visual{
        order:2;
        position:relative;
        width:100%;
        height:480px;
        display:flex;
        justify-content:center;
        align-items:center;
    }

    .home-server-stack{
        width:100%;
        max-width:420px;
        height:auto;
    }

    .hero-server-image{
        width:100%;
        max-width:420px;
        height:auto;
    }

    /* Floating Cards */

    .home-visual-card{
        display:block;
        transform:scale(.72);
    }

    .home-card-top-left{
        top:0;
        left:0;
    }

    .home-card-mid-left{
        top:160px;
        left:-5px;
    }

    .home-card-top-right{
        top:10px;
        right:0;
    }

    .home-card-bottom-right{
        bottom:10px;
        right:-5px;
    }

    /* Hide Navigation */

    .hero-prev,
    .hero-next{
        display:none;
    }

    .home-hero .swiper-pagination{
        bottom:10px;
    }
}
/* =========================================================
   576px
========================================================= */

@media (max-width:576px){

    .home-hero{
        min-height:auto;
        padding:20px 0;
    }

    .home-hero .container{
        padding:0 18px;
    }

    .home-hero-wrapper{
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:40px;
        text-align:center;
    }

    /* =============================
       Hero Content
    ============================== */

    .home-hero-content{
        order:1;
        width:100%;
        max-width:100%;
    }

    .home-hero-badge{
        margin-bottom:18px;
    }

    .home-hero h1,
    .home-hero-title{
        font-size:30px;
        line-height:1.18;
        margin-bottom:18px;
    }

    .home-hero-description{
        max-width:100%;
        font-size:15px;
        line-height:1.75;
        margin:0 auto 24px;
    }

    /* =============================
       Buttons
    ============================== */

    .home-hero-buttons{
        justify-content:center;
        flex-wrap:wrap;
        gap:14px;
        margin-bottom:26px;
    }

    .home-domain-btn,
    .home-demo-btn{

        min-width:210px;
        justify-content:center;

        padding:14px 22px;

        font-size:14px;
    }

    /* =============================
       Feature Bar
    ============================== */

    .home-hero-features{

        justify-content:center;

        gap:12px;

        padding:14px;

        border-radius:14px;
    }

    .home-feature{

        width:calc(50% - 10px);

        justify-content:center;

        font-size:13px;

        text-align:center;
    }

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

    /* =============================
       Hero Image
    ============================== */

    .home-hero-visual{

        order:2;

        position:relative;

        width:100%;

        height:430px;

        display:flex;

        justify-content:center;

        align-items:center;
    }

    .home-server-stack{

        width:100%;

        max-width:320px;

        height:auto;
    }

    .hero-server-image{

        width:100%;

        max-width:320px;

        height:auto;
    }

    /* =============================
       Floating Cards
    ============================== */

    .home-visual-card{

        display:block;

        transform:scale(.62);

        transform-origin:center;
    }

    .home-card-top-left{

        top:-6px;

        left:-12px;
    }

    .home-card-mid-left{

        top:145px;

        left:-10px;
    }

    .home-card-top-right{

        top:-6px;

        right:-12px;
    }

    .home-card-bottom-right{

        bottom:5px;

        right:-12px;
    }

    /* =============================
       Navigation
    ============================== */

    .hero-prev,
    .hero-next{
        display:none;
    }

    .home-hero .swiper-pagination{
        bottom:8px;
    }

}


/* ==========================================================
   480px
========================================================== */

@media (max-width:480px){

    .home-hero{

        padding:20px 0;
    }

    .home-hero .container{

        padding:0 16px;
    }

    .home-hero h1,
    .home-hero-title{

        font-size:26px;

        line-height:1.2;
    }

    .home-hero-description{

        font-size:14px;

        margin-bottom:22px;
    }

    /* Buttons */

    .home-hero-buttons{

        flex-direction:column;

        align-items:center;

        gap:12px;
    }

    .home-domain-btn,
    .home-demo-btn{

        width:100%;

        max-width:270px;

        justify-content:center;

        padding:14px 18px;
    }

    /* Features */

    .home-feature{

        width:100%;

        justify-content:center;
    }

    /* Image */

    .home-hero-visual{

        height:380px;
    }

    .home-server-stack{

        max-width:280px;
    }

    .hero-server-image{

        max-width:280px;
    }

    /* Floating Cards */

.home-visual-card{
    display:block;
    transform:scale(.72);
    transform-origin:center center;
    padding:12px 14px;
}

.home-card-top-left{
    top:12px;
    left:10px;
}

.home-card-mid-left{
    top:150px;
    left:10px;
}

.home-card-top-right{
    top:18px;
    right:12px;
}

.home-card-bottom-right{
    bottom:12px;
    right:12px;
}

}

/* ==========================================================
   375px
========================================================== */

@media (max-width:375px){

    .home-hero{
        min-height:auto;
        padding:20px 0;
    }

    .home-hero .container{
        padding:0 15px;
    }

    .home-hero-wrapper{
        display:flex;
        flex-direction:column;
        gap:32px;
        align-items:center;
        text-align:center;
    }

    /* Hero Content */

    .home-hero-content{
        order:1;
        width:100%;
    }

    .home-hero-badge{
        padding:6px 14px;
        margin-bottom:16px;
    }

    .home-hero-badge span{
        font-size:11px;
    }

    .home-hero h1,
    .home-hero-title{
        font-size:22px;
        line-height:1.28;
        margin-bottom:16px;
    }

    .home-hero-description{
        font-size:13px;
        line-height:1.7;
        margin:0 auto 20px;
    }

    /* Buttons */

    .home-hero-buttons{
        flex-direction:column;
        gap:10px;
        margin-bottom:22px;
    }

    .home-domain-btn,
    .home-demo-btn{
        width:100%;
        max-width:240px;
        justify-content:center;
        padding:13px 18px;
        font-size:13px;
    }

    /* Feature Strip */

    .home-hero-features{
        padding:12px;
        gap:10px;
        justify-content:center;
    }

    .home-feature{
        width:100%;
        justify-content:center;
        font-size:12px;
        gap:8px;
    }

    .home-feature i{
        font-size:15px;
    }

    /* Hero Image */

    /*.home-hero-visual{*/
    /*    order:2;*/
    /*    position:relative;*/
    /*    height:320px;*/
    /*}*/

    /*.home-server-stack{*/
    /*    width:100%;*/
    /*    max-width:235px;*/
    /*    height:auto;*/
    /*}*/

    .hero-server-image{
        width:100%;
        max-width:235px;
        height:auto;
    }

    .home-hero-visual{
    position:relative;
    height:360px;
}

.home-server-stack{
    max-width:240px;
}

.home-visual-card{
    display:block;
    transform:scale(.62);
    transform-origin:center center;
    padding:10px 12px;
}

.home-card-top-left{
    top:8px;
    left:-2px;
}

.home-card-mid-left{
    top:140px;
    left:-6px;
}

.home-card-top-right{
    top:12px;
    right:-4px;
}

.home-card-bottom-right{
    bottom:10px;
    right:-6px;
}

    /* Navigation */

    .hero-prev,
    .hero-next{
        display:none;
    }

    .home-hero .swiper-pagination{
        bottom:6px;
    }

}


/* ==========================================================
   320px
========================================================== */

@media (max-width:320px){

    .home-hero{
        min-height:auto;
        padding:20px 0;
    }

    .home-hero .container{
        padding:0 12px;
    }

    .home-hero-wrapper{
        gap:28px;
    }

    /* Hero Content */

    .home-hero h1,
    .home-hero-title{
        font-size:20px;
        line-height:1.35;
        margin-bottom:14px;
    }

    .home-hero-description{
        font-size:12px;
        line-height:1.65;
        margin-bottom:18px;
    }

    /* Buttons */

    .home-domain-btn,
    .home-demo-btn{
        width:100%;
        max-width:210px;
        justify-content:center;
        padding:12px 16px;
        font-size:12px;
    }

    /* Feature Strip */

    .home-hero-features{
        padding:10px;
        gap:8px;
    }

    .home-feature{
        width:100%;
        justify-content:center;
        font-size:11px;
    }

    .home-feature i{
        font-size:14px;
    }

    /* Hero Image */

    /*.home-hero-visual{*/
    /*    height:280px;*/
    /*}*/

    /*.home-server-stack{*/
    /*    width:100%;*/
    /*    max-width:200px;*/
    /*    height:auto;*/
    /*}*/
    
    .home-hero-visual{
    position:relative;
    height:320px;
}

.home-server-stack{
    max-width:210px;
}

    .hero-server-image{
        width:100%;
        max-width:200px;
        height:auto;
    }

    .home-visual-card{
    display:block;
    transform:scale(.52);
    transform-origin:center center;
    padding:8px 10px;
}

.home-card-top-left{
    top:5px;
    left:-2px;
}

.home-card-mid-left{
    top:110px;
    left:-5px;
}

.home-card-top-right{
    top:8px;
    right:-2px;
}

.home-card-bottom-right{
    bottom:5px;
    right:-2px;
}

    /* Navigation */

    .hero-prev,
    .hero-next{
        display:none;
    }

    .home-hero .swiper-pagination{
        bottom:4px;
    }

}