/* =========================================================
   HOSTING & DEPLOYMENT PAGE
   FAZASAZ
========================================================= */


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

.hosting-hero {
    position: relative;

    overflow: hidden;

    padding:
        160px 0
        110px;

    background:
        radial-gradient(
            circle at 85% 15%,
            rgba(16, 185, 129, .15),
            transparent 30%
        ),
        radial-gradient(
            circle at 15% 75%,
            rgba(37, 99, 235, .15),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #eef6ff 0%,
            #edf9f5 100%
        );
}


.hosting-grid {
    position: absolute;

    inset: 0;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(37, 99, 235, .045) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(37, 99, 235, .045) 1px,
            transparent 1px
        );

    background-size:
        45px 45px;

    mask-image:
        linear-gradient(
            to bottom,
            black,
            transparent
        );
}


.hosting-orb {
    position: absolute;

    border-radius: 50%;

    filter:
        blur(10px);

    pointer-events: none;
}


.orb-one {
    width: 420px;
    height: 420px;

    top: -150px;
    right: -120px;

    background:
        rgba(37, 99, 235, .14);
}


.orb-two {
    width: 320px;
    height: 320px;

    bottom: -150px;
    left: 4%;

    background:
        rgba(16, 185, 129, .13);
}


.hosting-hero-content {
    position: relative;

    display: grid;

    grid-template-columns:
        1fr
        1.05fr;

    gap: 70px;

    align-items: center;
}


/* =========================================================
   PRODUCT LABEL
========================================================= */

.product-label {
    width: fit-content;

    display: flex;

    align-items: center;

    gap: 10px;

    padding:
        8px 16px;

    border:
        1px solid
        rgba(37, 99, 235, .15);

    border-radius:
        100px;

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

    color:
        #2563eb;

    font-size:
        12px;

    font-weight:
        800;

    letter-spacing:
        1px;

    box-shadow:
        0 10px 30px
        rgba(37, 99, 235, .08);
}


.label-icon {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 28px;
    height: 28px;

    border-radius:
        8px;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #10b981
        );
}


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

.hosting-hero h1 {
    margin:
        25px 0
        20px;

    max-width:
        680px;

    font-size:
        clamp(
            38px,
            5vw,
            65px
        );

    line-height:
        1.3;

    color:
        #0b2850;
}


.hosting-hero h1 span {
    display: block;

    background:
        linear-gradient(
            90deg,
            #2563eb,
            #10b981
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;
}


.hero-description {
    max-width:
        620px;

    margin: 0;

    color:
        #56708f;

    font-size:
        17px;

    line-height:
        2.1;
}


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

.hero-actions {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap:
        15px;

    margin-top:
        35px;
}


.primary-button,
.secondary-button {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    min-height:
        54px;

    padding:
        0 25px;

    border-radius:
        14px;

    font-weight:
        700;

    text-decoration:
        none;

    transition:
        .3s ease;
}


.primary-button {
    color:
        white;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #0ea5a4
        );

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


.primary-button:hover {
    transform:
        translateY(-4px);

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


.secondary-button {
    border:
        1px solid
        rgba(37, 99, 235, .15);

    color:
        #174678;

    background:
        rgba(255, 255, 255, .78);
}


.secondary-button:hover {
    transform:
        translateY(-3px);

    background:
        white;
}


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

.hero-mini-features {
    display: flex;

    flex-wrap: wrap;

    gap:
        12px 20px;

    margin-top:
        30px;

    color:
        #466887;

    font-size:
        14px;
}


.hero-mini-features div {
    display: flex;

    align-items: center;

    gap: 7px;
}


.hero-mini-features span {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 20px;
    height: 20px;

    border-radius:
        50%;

    color:
        #059669;

    background:
        rgba(16, 185, 129, .12);

    font-size:
        12px;

    font-weight:
        900;
}


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

.hosting-hero-visual {
    position: relative;
}


.hosting-window {
    position: relative;

    overflow: hidden;

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

    border-radius:
        26px;

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

    box-shadow:
        0 35px 80px
        rgba(20, 70, 130, .18);

    backdrop-filter:
        blur(20px);
}


.hosting-window-top {
    display: flex;

    align-items: center;

    justify-content: space-between;

    padding:
        18px 22px;

    border-bottom:
        1px solid
        #e9eef5;
}


.window-title {
    display: flex;

    align-items: center;

    gap: 12px;
}


.window-icon {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 42px;
    height: 42px;

    border-radius:
        12px;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #10b981
        );
}


.window-title strong {
    display: block;

    color:
        #183b63;

    font-size:
        14px;
}


.window-title span {
    display: block;

    margin-top:
        3px;

    color:
        #8aa0b8;

    font-size:
        11px;
}


.status-dot {
    padding:
        7px 12px;

    border-radius:
        100px;

    background:
        rgba(16, 185, 129, .1);

    color:
        #059669;

    font-size:
        11px;

    font-weight:
        700;
}


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

.hosting-dashboard-body {
    padding:
        25px;
}


.server-card {
    display: flex;

    align-items: center;

    gap: 15px;

    padding:
        20px;

    border:
        1px solid
        #edf2f7;

    border-radius:
        17px;

    background:
        linear-gradient(
            135deg,
            #f6faff,
            #f1fbf7
        );
}


.server-icon {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 52px;
    height: 52px;

    border-radius:
        15px;

    background:
        white;

    box-shadow:
        0 8px 20px
        rgba(20, 70, 120, .08);

    font-size:
        24px;
}


.server-card small {
    display: block;

    margin-bottom:
        5px;

    color:
        #91a4b8;

    font-size:
        9px;
}


.server-card strong {
    color:
        #173d66;

    font-size:
        17px;
}


.server-status {
    margin-right:
        auto;

    padding:
        6px 11px;

    border-radius:
        100px;

    color:
        #059669;

    background:
        #d1fae5;

    font-size:
        10px;

    font-weight:
        800;
}


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

.dashboard-row {
    display: flex;

    align-items: center;

    gap: 14px;

    margin-top:
        13px;

    padding:
        15px;

    border:
        1px solid
        #edf1f5;

    border-radius:
        14px;

    background:
        white;
}


.row-icon {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 40px;
    height: 40px;

    border-radius:
        12px;

    background:
        #eaf1ff;
}


.row-icon.green {
    background:
        #dcfce7;
}


.dashboard-row div:nth-child(2) {
    flex:
        1;
}


.dashboard-row small {
    display: block;

    margin-bottom:
        4px;

    color:
        #9baabd;

    font-size:
        9px;
}


.dashboard-row strong {
    color:
        #365574;

    font-size:
        12px;
}


.dashboard-row > span {
    color:
        #10b981;

    font-weight:
        900;
}


/* =========================================================
   SETUP BOX
========================================================= */

.setup-box {
    margin-top:
        20px;

    padding:
        20px;

    border-radius:
        18px;

    background:
        #f6faff;
}


.setup-heading {
    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom:
        12px;
}


.setup-heading strong {
    color:
        #254a70;

    font-size:
        13px;
}


.setup-heading span {
    color:
        #059669;

    font-size:
        12px;

    font-weight:
        800;
}


.progress-bar {
    height:
        8px;

    overflow: hidden;

    border-radius:
        20px;

    background:
        #e4edf5;
}


.progress-bar div {
    width:
        100%;

    height:
        100%;

    border-radius:
        inherit;

    background:
        linear-gradient(
            90deg,
            #2563eb,
            #10b981
        );
}


.setup-list {
    display: flex;

    flex-wrap: wrap;

    gap:
        10px;

    margin-top:
        15px;
}


.setup-list span {
    color:
        #66809a;

    font-size:
        10px;
}


/* =========================================================
   FLOATING CARDS
========================================================= */

.floating-card {
    position: absolute;

    display: flex;

    align-items: center;

    gap: 8px;

    padding:
        12px 16px;

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

    border-radius:
        13px;

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

    box-shadow:
        0 20px 45px
        rgba(30, 70, 110, .15);

    color:
        #315271;

    font-size:
        11px;

    font-weight:
        700;

    backdrop-filter:
        blur(12px);
}


.card-location {
    bottom:
        -20px;

    right:
        35px;
}


.card-global {
    top:
        100px;

    left:
        -45px;
}


/* =========================================================
   COMMON SECTIONS
========================================================= */

.hosting-position,
.hosting-plans,
.setup-service,
.hosting-combination,
.hosting-features,
.hosting-cta {
    padding:
        110px 0;
}


.section-heading {
    margin-bottom:
        55px;
}


.center-heading {
    max-width:
        720px;

    margin:
        0 auto 55px;

    text-align:
        center;
}


.section-tag {
    display: inline-block;

    margin-bottom:
        16px;

    color:
        #2563eb;

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        1.5px;
}


.section-heading h2 {
    margin:
        0 0 18px;

    color:
        #0d3159;

    font-size:
        clamp(
            30px,
            4vw,
            48px
        );
}


.section-heading p {
    margin:
        0;

    color:
        #617b96;

    line-height:
        2;
}


/* =========================================================
   HOSTING POSITION
========================================================= */

.hosting-position {
    padding:
        70px 0;

    background:
        #f8fbff;
}


.position-box {
    display: flex;

    align-items: center;

    gap:
        35px;

    max-width:
        1050px;

    margin:
        auto;

    padding:
        40px;

    border:
        1px solid
        #e7eef5;

    border-radius:
        25px;

    background:
        white;

    box-shadow:
        0 20px 50px
        rgba(20, 70, 120, .06);
}


.position-icon {
    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink:
        0;

    width: 75px;
    height: 75px;

    border-radius:
        22px;

    background:
        linear-gradient(
            135deg,
            #e5efff,
            #dcf8ef
        );

    font-size:
        32px;
}


.position-content h2 {
    margin:
        0 0 15px;

    color:
        #12395f;

    font-size:
        clamp(
            24px,
            3vw,
            34px
        );
}


.position-content p {
    margin: 0;

    color:
        #69839d;

    line-height:
        2;
}


/* =========================================================
   HOSTING PLANS
========================================================= */

.hosting-plans {
    background:
        white;
}


.hosting-options-grid {
    display: grid;

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

    gap:
        25px;

    max-width:
        1050px;

    margin:
        auto;
}


.hosting-option-card {
    padding:
        45px;

    border:
        1px solid
        #e8eff5;

    border-radius:
        26px;

    background:
        #fbfdff;

    transition:
        .35s ease;
}


.hosting-option-card:hover {
    transform:
        translateY(-8px);

    box-shadow:
        0 25px 55px
        rgba(20, 70, 120, .1);
}


.hosting-option-card.iran {
    border-top:
        4px solid
        #10b981;
}


.hosting-option-card.global {
    border-top:
        4px solid
        #2563eb;
}


.hosting-card-top {
    display: flex;

    align-items: center;

    justify-content: space-between;
}


.hosting-icon {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 65px;
    height: 65px;

    border-radius:
        18px;

    background:
        linear-gradient(
            135deg,
            #e8f1ff,
            #e2f9f0
        );

    font-size:
        30px;
}


.hosting-card-top > span {
    color:
        #91a3b6;

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        1.5px;
}


.hosting-option-card h3 {
    margin:
        28px 0 15px;

    color:
        #123b63;

    font-size:
        27px;
}


.hosting-option-card p {
    margin:
        0;

    color:
        #7189a1;

    line-height:
        2;
}


.hosting-option-card ul {
    display: grid;

    gap:
        13px;

    margin:
        28px 0 0;

    padding:
        0;

    list-style:
        none;
}


.hosting-option-card li {
    color:
        #4f6d89;

    font-size:
        14px;
}


/* =========================================================
   SETUP SERVICE
========================================================= */

.setup-service {
    background:
        linear-gradient(
            135deg,
            #f1f8ff,
            #eefbf6
        );
}


.setup-grid {
    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap:
        80px;

    align-items:
        center;
}


.setup-content h2 {
    margin:
        0 0 20px;

    color:
        #10365e;

    font-size:
        clamp(
            32px,
            4vw,
            48px
        );

    line-height:
        1.5;
}


.setup-content h2 span {
    display: block;

    color:
        #0b9b89;
}


.setup-content > p {
    max-width:
        620px;

    color:
        #66809a;

    line-height:
        2;
}


.setup-services-list {
    display: grid;

    gap:
        12px;

    margin-top:
        35px;
}


.setup-services-list div {
    display: flex;

    align-items: center;

    gap:
        15px;

    padding:
        14px;

    border-radius:
        13px;

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

    color:
        #456583;

    font-weight:
        600;
}


.setup-services-list span {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 32px;
    height: 32px;

    border-radius:
        9px;

    color:
        #2563eb;

    background:
        #e8f0ff;

    font-size:
        10px;

    font-weight:
        800;
}


/* =========================================================
   DEPLOYMENT VISUAL
========================================================= */

.deployment-card {
    padding:
        30px;

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

    border-radius:
        25px;

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

    box-shadow:
        0 30px 70px
        rgba(20, 70, 120, .14);

    backdrop-filter:
        blur(20px);
}


.deployment-header {
    display: flex;

    align-items: center;

    justify-content: space-between;

    padding-bottom:
        22px;

    border-bottom:
        1px solid
        #e8eef5;
}


.deployment-header span {
    display: block;

    margin-bottom:
        6px;

    color:
        #94a7ba;

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        1.5px;
}


.deployment-header strong {
    color:
        #183d64;

    font-size:
        20px;
}


.deployment-check {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 48px;
    height: 48px;

    border-radius:
        15px;

    color:
        white;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #10b981
        );

    font-size:
        22px;
}


.deployment-steps {
    display: grid;

    gap:
        15px;

    margin-top:
        25px;
}


.deployment-step {
    display: flex;

    align-items: center;

    gap:
        15px;

    padding:
        16px;

    border:
        1px solid
        #edf2f6;

    border-radius:
        15px;
}


.deployment-step > span {
    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink:
        0;

    width: 36px;
    height: 36px;

    border-radius:
        50%;

    color:
        #10b981;

    background:
        #dcfce7;

    font-weight:
        900;
}


.deployment-step strong {
    display: block;

    color:
        #365574;

    font-size:
        13px;
}


.deployment-step small {
    display: block;

    margin-top:
        5px;

    color:
        #97a8b9;

    font-size:
        11px;
}


.deployment-step.active {
    border-color:
        rgba(16, 185, 129, .3);

    background:
        #f1fcf7;
}


/* =========================================================
   COMBINATION
========================================================= */

.hosting-combination {
    background:
        white;
}


.combination-grid {
    display: grid;

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

    gap:
        18px;
}


.combination-card {
    padding:
        32px 25px;

    border:
        1px solid
        #eaf0f6;

    border-radius:
        22px;

    background:
        #f9fcff;

    transition:
        .35s ease;
}


.combination-card:hover {
    transform:
        translateY(-8px);

    background:
        white;

    box-shadow:
        0 20px 50px
        rgba(20, 70, 120, .1);
}


.combination-card > div {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 58px;
    height: 58px;

    margin-bottom:
        20px;

    border-radius:
        17px;

    background:
        linear-gradient(
            135deg,
            #e5efff,
            #dff9ef
        );

    font-size:
        26px;
}


.combination-card h3 {
    margin:
        0 0 10px;

    color:
        #163d64;

    font-size:
        18px;
}


.combination-card p {
    margin: 0;

    color:
        #728aa1;

    line-height:
        1.9;

    font-size:
        14px;
}


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

.hosting-features {
    background:
        #f7fbff;
}


.features-layout {
    display: grid;

    grid-template-columns:
        .8fr
        1.2fr;

    gap:
        65px;

    align-items:
        start;
}


.features-text {
    position:
        sticky;

    top:
        120px;
}


.features-text h2 {
    margin:
        0 0 20px;

    color:
        #10365e;

    font-size:
        clamp(
            30px,
            4vw,
            46px
        );

    line-height:
        1.45;
}


.features-text p {
    margin: 0;

    color:
        #66809a;

    line-height:
        2;
}


.features-grid {
    display: grid;

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

    gap:
        20px;
}


.feature-card {
    padding:
        30px;

    border:
        1px solid
        rgba(31, 100, 180, .08);

    border-radius:
        22px;

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

    transition:
        .35s ease;
}


.feature-card:hover {
    transform:
        translateY(-7px);

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

    box-shadow:
        0 20px 45px
        rgba(20, 70, 120, .09);
}


.feature-icon {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 52px;
    height: 52px;

    margin-bottom:
        22px;

    border-radius:
        16px;

    background:
        linear-gradient(
            135deg,
            #e5efff,
            #ddf8f0
        );

    font-size:
        24px;
}


.feature-card h3 {
    margin:
        0 0 12px;

    color:
        #183d66;

    font-size:
        19px;
}


.feature-card p {
    margin: 0;

    color:
        #7289a0;

    line-height:
        1.9;

    font-size:
        14px;
}


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

.hosting-cta {
    padding-top:
        70px;

    background:
        #f7fbff;
}


.cta-box {
    position: relative;

    overflow: hidden;

    padding:
        85px 30px;

    border-radius:
        32px;

    text-align:
        center;

    color:
        white;

    background:
        linear-gradient(
            135deg,
            #0e3f85,
            #0c9d8a
        );

    box-shadow:
        0 30px 70px
        rgba(10, 90, 130, .2);
}


.cta-glow {
    position: absolute;

    width:
        400px;

    height:
        400px;

    top:
        -250px;

    left:
        -100px;

    border-radius:
        50%;

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

    filter:
        blur(10px);
}


.cta-content {
    position: relative;

    z-index:
        2;
}


.cta-content > span {
    color:
        #77f5d0;

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        2px;
}


.cta-content h2 {
    margin:
        20px 0
        15px;

    font-size:
        clamp(
            30px,
            4vw,
            48px
        );
        color:white;
}


.cta-content p {
    max-width:
        620px;

    margin:
        auto;

    color:
        #d3edf2;

    line-height:
        2;
}


.cta-button {
    display: inline-flex;

    align-items: center;

    gap:
        12px;

    margin-top:
        30px;

    padding:
        15px 28px;

    border-radius:
        14px;

    color:
        #0d5f76;

    background:
        white;

    font-weight:
        800;

    text-decoration:
        none;

    transition:
        .3s ease;
}


.cta-button:hover {
    transform:
        translateY(-5px);

    box-shadow:
        0 15px 30px
        rgba(0, 0, 0, .15);
}


/* =========================================================
   REVEAL ANIMATION
========================================================= */

.reveal {
    opacity:
        0;

    transform:
        translateY(30px);

    transition:
        opacity .7s ease,
        transform .7s ease;
}


.reveal.show {
    opacity:
        1;

    transform:
        translateY(0);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1100px) {


    .hosting-hero-content {
        grid-template-columns:
            1fr;

        gap:
            60px;
    }


    .hosting-hero-text {
        max-width:
            750px;
    }


    .hosting-hero-visual {
        max-width:
            700px;

        width:
            100%;

        margin:
            auto;
    }


    .setup-grid {
        grid-template-columns:
            1fr;

        gap:
            60px;
    }


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


    .features-layout {
        grid-template-columns:
            1fr;
    }


    .features-text {
        position:
            static;

        max-width:
            650px;
    }


}


@media (max-width: 850px) {


    .hosting-hero {
        padding:
            130px 0
            80px;
    }


    .hosting-options-grid {
        grid-template-columns:
            1fr;
    }


    .position-box {
        align-items:
            flex-start;

        flex-direction:
            column;
    }


}


@media (max-width: 650px) {


    .hosting-hero,
    .hosting-plans,
    .setup-service,
    .hosting-combination,
    .hosting-features,
    .hosting-cta {
        padding:
            75px 0;
    }


    .hosting-hero {
        padding-top:
            120px;
    }


    .hosting-position {
        padding:
            50px 0;
    }


    .hero-actions {
        flex-direction:
            column;

        align-items:
            stretch;
    }


    .primary-button,
    .secondary-button {
        width:
            100%;
            
    }


    .hero-mini-features {
        flex-direction:
            column;
    }


    .floating-card {
        display:
            none;
    }


    .hosting-window {
        border-radius:
            18px;
    }


    .hosting-dashboard-body {
        padding:
            18px;
    }


    .server-card {
        padding:
            15px;
    }


    .setup-list {
        flex-direction:
            column;
    }


    .position-box {
        padding:
            28px 23px;
    }


    .hosting-option-card {
        padding:
            30px 23px;
    }


    .features-grid {
        grid-template-columns:
            1fr;
    }


    .combination-grid {
        grid-template-columns:
            1fr;
    }


    .deployment-card {
        padding:
            22px;
    }


    .cta-box {
        padding:
            60px 20px;
    }


}


@media (max-width: 420px) {


    .hosting-window-top {
        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            15px;
    }


    .server-card {
        align-items:
            flex-start;

        flex-wrap:
            wrap;
    }


    .server-status {
        margin-right:
            0;
    }


    .dashboard-row {
        align-items:
            flex-start;
    }


}