@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css');
/* =========================================================
   Z.COM CLOUD VPS — SINGLE HTML FILE
   HTML + CSS in this file
   ========================================================= */

:root{
    --navy:#071a43;
    --navy-2:#0b2458;
    --blue:#1165ee;
    --blue-2:#008cff;
    --blue-light:#eaf3ff;
    --red:#ed1c24;
    --red-dark:#d81018;
    --white:#ffffff;
    --text:#091a40;
    --muted:#52617d;
    --line:#d7e0ef;
    --bg:#eef5ff;
    --shadow:0 18px 45px rgba(23,65,125,.12);
}

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

html{
    scroll-behavior:smooth;
}

main{
    font-family:Arial, Helvetica, sans-serif;
    color:var(--white);
    background:#fff;
    overflow-x:hidden;
}

a{
    color:inherit;
    text-decoration:none;
}

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

.site-header{
    height:102px;
    display:flex;
    align-items:center;
    padding:0 3.8%;
    background:#fff;
    position:relative;
    z-index:20;
    border-bottom:1px solid #eef1f6;
}

.logo{
    display:flex;
    align-items:center;
    gap:9px;
    min-width:300px;
}

.logo-z{
    color:#e51d25;
    font-size:48px;
    font-weight:900;
    font-style:italic;
    letter-spacing:-5px;
    line-height:1;
}

.logo-com{
    color:#e51d25;
    font-size:39px;
    font-weight:800;
    letter-spacing:-2px;
}

.logo-cloud{
    color:#e51d25;
    font-size:34px;
    font-weight:300;
    margin-left:2px;
}
img.img-cloudVPS {width: 130%;}
.reseller{
    display:flex;
    align-items:center;
    gap:9px;
    background:#f0f4fb;
    color:#17377a;
    padding:10px 18px;
    border-radius:30px;
    font-size:15px;
    font-weight:700;
    white-space:nowrap;
}

.flag{
    font-size:22px;
    line-height:1;
}

.main-nav{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:39px;
    margin-left:auto;
    font-size:16px;
    font-weight:600;
}

.nav-item{
    white-space:nowrap;
    transition:.2s ease;
}

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

.nav-item i{
    font-size:11px;
    margin-left:4px;
}

.header-actions{
    display:flex;
    align-items:center;
    gap:21px;
    margin-left:28px;
}

.phone{
    display:flex;
    align-items:center;
    gap:12px;
    border:1.5px solid var(--red);
    color:var(--red);
    border-radius:28px;
    padding:10px 18px;
    font-weight:700;
    white-space:nowrap;
}

.phone i{
    font-size:15px;
}

.login-btn{
    background:var(--red);
    color:#fff;
    border-radius:28px;
    padding:13px 23px;
    font-weight:700;
    white-space:nowrap;
    box-shadow:0 7px 18px rgba(237,28,36,.18);
}

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

/*.hero{
    min-height:694px;
    position:relative;
    overflow:hidden;
    background:
        radial-gradient(circle at 80% 38%, rgba(255,255,255,.95) 0 4%, transparent 25%),
        linear-gradient(115deg,#f7faff 0%,#edf4ff 47%,#dfeaff 100%);
}

.hero:before{
    content:"";
    position:absolute;
    inset:0;
    opacity:.6;
    background:
        linear-gradient(128deg, transparent 62%, rgba(255,255,255,.85) 62.2%, transparent 62.5%),
        linear-gradient(135deg, transparent 68%, rgba(255,255,255,.7) 68.2%, transparent 68.5%),
        linear-gradient(140deg, transparent 74%, rgba(255,255,255,.55) 74.2%, transparent 74.45%);
    pointer-events:none;
}

.hero:after{
    content:"";
    position:absolute;
    left:-100px;
    bottom:-100px;
    width:430px;
    height:430px;
    border-radius:50%;
    background-image:radial-gradient(#fff 1.5px,transparent 1.5px);
    background-size:14px 14px;
    opacity:.65;
    mask-image:linear-gradient(to left,black,transparent);
}*/
/*new*/
/* =========================================================
   HERO
========================================================= */

/*.hero {
    position: relative;
    width: 100%;
    min-height: 650px;
    height: 90svh;
    padding-block: clamp(30px, 6vh, 100px);
    overflow: hidden;
    background: radial-gradient(ellipse at 80% 70%, rgba(0, 104, 255, .20) 0%, rgba(0, 55, 150, .12) 25%, transparent 60%), linear-gradient(180deg, #020713 0%, #031022 50%, #020914 100%);
    box-sizing: border-box;
}
.hero-inner{
    width:min(1120px,92%);
    margin:auto;
    position:relative;
    display:grid;
    grid-template-columns:35% 65%;
    align-items:center;
    z-index: 50;
}*/
.hero {
    position: relative;
    width: 100%;
    min-height: 650px;
    height: 90svh;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: clamp(30px, 5vh, 80px) 0;

    overflow: hidden;
    box-sizing: border-box;

    background:
        radial-gradient(
            ellipse at 80% 70%,
            rgba(0, 104, 255, .20) 0%,
            rgba(0, 55, 150, .12) 25%,
            transparent 60%
        ),
        linear-gradient(
            180deg,
            #020713 0%,
            #031022 50%,
            #020914 100%
        );
}

.hero-inner {
    width: min(1300px, 92%);
    margin: 0 auto;

    position: relative;
    z-index: 50;

    display: grid;
    grid-template-columns: 35% 65%;
    align-items: center;
}


/* =========================================================
   DARK VIGNETTE
========================================================= */

/*.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 20;
    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(1, 8, 20, .95) 0%,
            rgba(1, 8, 20, .75) 25%,
            rgba(1, 8, 20, .15) 55%,
            transparent 100%
        );

    box-shadow:
        inset 0 0 180px rgba(0, 0, 0, .8);
}*/


/* =========================================================
   DIGITAL FLOOR
========================================================= */

.digital-floor {
    position: absolute;
    right: -10%;
    bottom: -35%;
    width: 120%;
    height: 75%;
    transform: perspective(500px) rotateX(62deg);
    transform-origin: center bottom;

    background-image:
        linear-gradient(
            rgba(0, 119, 255, .18) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(0, 119, 255, .18) 1px,
            transparent 1px
        );

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

    mask-image:
        linear-gradient(
            to top,
            rgba(0,0,0,1),
            rgba(0,0,0,.85) 45%,
            transparent 100%
        );

    -webkit-mask-image:
        linear-gradient(
            to top,
            rgba(0,0,0,1),
            rgba(0,0,0,.85) 45%,
            transparent 100%
        );

    opacity: .65;
}


/* =========================================================
   FLOOR GLOW
========================================================= */

.floor-glow {
    position: absolute;
    right: 20%;
    bottom: 17%;
    width: 65%;
    height: 80px;

    background:
        radial-gradient(
            ellipse,
            rgba(0, 136, 255, .65) 0%,
            rgba(0, 87, 255, .25) 35%,
            transparent 70%
        );

    filter: blur(18px);
    opacity: .9;
}


/* =========================================================
   HORIZON LINE
========================================================= */

.horizon {
    position: absolute;
    right: 20%;
    left: -10%;
    bottom: 29%;

    height: 3px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #0077ff 20%,
            #00b7ff 45%,
            #ff4c9a 75%,
            transparent
        );

    filter:
        blur(1px)
        drop-shadow(0 0 10px #008cff)
        drop-shadow(0 0 25px #008cff);

    opacity: .8;
}


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

.world-map {
    position: absolute;
    left: -2%;
    top: 5%;
    width: 68%;
    height: 48%;

    opacity: .5;

    background-image:
        radial-gradient(
            circle,
            rgba(0, 102, 255, .95) 1px,
            transparent 2px
        );

    background-size: 10px 10px;

    mask-image:
        radial-gradient(
            ellipse at center,
            black 0%,
            rgba(0,0,0,.85) 50%,
            transparent 78%
        );

    -webkit-mask-image:
        radial-gradient(
            ellipse at center,
            black 0%,
            rgba(0,0,0,.85) 50%,
            transparent 78%
        );

    transform:
        perspective(700px)
        rotateY(-10deg);

    filter:
        drop-shadow(0 0 8px rgba(0, 104, 255, .5));
}


/* =========================================================
   DIGITAL VERTICAL DATA
========================================================= */

.data-lines {
    position: absolute;
    left: 38%;
    top: 28%;
    width: 40%;
    height: 40%;

    background:
        repeating-linear-gradient(
            90deg,
            transparent 0,
            transparent 20px,
            rgba(0, 119, 255, .18) 21px,
            transparent 22px
        );

    opacity: .7;

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

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


/* =========================================================
   LIGHT PARTICLES
========================================================= */

.particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.particles span {
    position: absolute;

    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: #4bb7ff;

    box-shadow:
        0 0 5px #0077ff,
        0 0 15px #0077ff,
        0 0 30px #008cff;

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

.particles span:nth-child(1) {
    right: 48%;
    top: 40%;
    animation-delay: 0s;
}

.particles span:nth-child(2) {
    right: 60%;
    top: 31%;
    animation-delay: 1s;
}

.particles span:nth-child(3) {
    right: 72%;
    top: 52%;
    animation-delay: 2s;
}

.particles span:nth-child(4) {
    right: 83%;
    top: 35%;
    animation-delay: 1.5s;
}

.particles span:nth-child(5) {
    right: 69%;
    top: 65%;
    animation-delay: 3s;
}

.particles span:nth-child(6) {
    right: 55%;
    top: 72%;
    animation-delay: 2.5s;
}

.particles span:nth-child(7) {
    right: 91%;
    top: 48%;
    animation-delay: 1.2s;
}

.particles span:nth-child(8) {
    right: 76%;
    top: 24%;
    animation-delay: 3.5s;
}

@keyframes particleFloat {

    0%,
    100% {
        transform: translateY(0) scale(1);
        opacity: .4;
    }

    50% {
        transform: translateY(-30px) scale(1.7);
        opacity: 1;
    }
}


/* =========================================================
   NEON CURVE LINES
========================================================= */

.neon-lines {
    position: absolute;
    left: -5%;
    bottom: 20%;
    width: 72%;
    height: 35%;
    transform: rotate(-2deg);
}


/* Main Blue Curve */

.neon-blue {
    position: absolute;
    right: -10%;
    top: 30%;
    width: 120%;
    height: 100px;

    border-top: 3px solid #008cff;

    border-radius:
        50% 50% 0 0;

    transform:
        rotate(-2deg)
        skewX(-12deg);

    filter:
        drop-shadow(0 0 5px #008cff)
        drop-shadow(0 0 15px #006eff)
        drop-shadow(0 0 35px rgba(0, 111, 255, .7));
}


/* Pink Curve */

.neon-pink {
    position: absolute;
    right: 15%;
    top: 38%;
    width: 100%;
    height: 90px;

    border-top: 2px solid #ff3d91;

    border-radius:
        50% 50% 0 0;

    transform:
        rotate(-7deg)
        skewX(-15deg);

    filter:
        drop-shadow(0 0 5px #ff3d91)
        drop-shadow(0 0 18px #ff247f)
        drop-shadow(0 0 35px rgba(255, 38, 128, .6));
}


/* Red Curve */

.neon-red {
    position: absolute;
    right: 22%;
    top: 51%;
    width: 100%;
    height: 80px;

    border-top: 3px solid #ff4b67;

    border-radius:
        50% 50% 0 0;

    transform:
        rotate(5deg)
        skewX(-12deg);

    filter:
        drop-shadow(0 0 5px #ff405c)
        drop-shadow(0 0 20px #ff2b4f)
        drop-shadow(0 0 40px rgba(255, 43, 79, .5));
}


/* Thin blue line */

.neon-thin {
    position: absolute;
    right: 10%;
    top: 15%;
    width: 110%;
    height: 100px;

    border-top: 1px solid rgba(44, 151, 255, .7);

    border-radius: 50%;

    transform:
        rotate(-13deg);

    filter:
        drop-shadow(0 0 8px #006eff);
}


/* =========================================================
   GLOW POINTS
========================================================= */

.glow-point {
    position: absolute;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #fff;

    box-shadow:
        0 0 5px #fff,
        0 0 15px #008cff,
        0 0 30px #008cff,
        0 0 60px #006eff;

    animation: glowPulse 2s infinite ease-in-out;
}

.glow-point.p1 {
    left: 25%;
    top: 28%;
}

.glow-point.p2 {
    left: 14%;
    top: 34%;
}

.glow-point.p3 {
    left: 35%;
    top: 51%;
}

.glow-point.p4 {
    left: 9%;
    top: 44%;
    background: #ff668e;

    box-shadow:
        0 0 5px #fff,
        0 0 15px #ff4679,
        0 0 30px #ff4679,
        0 0 60px #ff4679;
}

@keyframes glowPulse {

    0%,
    100% {
        transform: scale(.8);
        opacity: .6;
    }

    50% {
        transform: scale(1.5);
        opacity: 1;
    }
}


/* =========================================================
   LIGHT BEAMS
========================================================= */

.beam {
    position: absolute;

    width: 2px;
    height: 350px;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(0, 136, 255, .8),
            transparent
        );

    filter:
        blur(1px)
        drop-shadow(0 0 10px #0077ff);

    opacity: .45;

    transform: rotate(4deg);
}

.beam.b1 {
    left: 43%;
    top: 25%;
}

.beam.b2 {
    left: 37%;
    top: 20%;
    height: 300px;
}

.beam.b3 {
    left: 28%;
    top: 23%;
    height: 350px;
}

.beam.b4 {
    left: 18%;
    top: 17%;
    height: 400px;
}
/*.new*/

.hero-copy{
   padding: 0;
}

.hero-title{
    /*font-size:clamp(52px,4.5vw,86px);*/
    line-height:1.2;
    font-weight:800;
    color:var(--white);
    font-size: 3.4rem;
}

.hero-title .blue{
    color: #1fcfff;
    text-shadow: 0 0 10px #008cff, 0 0 30px rgba(0, 140, 255, .6);
}

.underline{
    width:206px;
    height:3px;
    margin:15px 0;
    background:linear-gradient(90deg,#62ccfa 0 82%,transparent 82%);
    position:relative;
}

.underline:after{
    content:"";
    position:absolute;
    right:0;
    top:-3px;
    width:8px;
    height:8px;
    background:#62ccfa;
    border-radius:50%;
}

.hero-subtitle{
    font-size:18px;
    line-height:1.45;
    margin-bottom:15px;
    max-width:700px;
    color:var(--white);
}

/* =========================
   USP ROW
   ========================= */

.usps{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    margin:0 0 5px;
    max-width:740px;
}

.usp{
    min-height:82px;
    padding:0 17px;
    border-right:1px solid #2c3f5e;
    display:flex;
    flex-direction:column;
    justify-content:normal;
    align-items:center;
    text-align:center;
    color:var(--white);
    font-size:14px;
    font-weight:normal;
    line-height:1.3;
}

.usp:first-child{
    padding-left:0;
}

.usp:last-child{
    border-right:0;
}

.usp i{
    font-size:31px;
    color:#1fcfff;
    margin-bottom:7px;
}

.usp.shield{
    align-items:flex-start;
    text-align:left;
    flex-direction:row;
    gap:11px;
    width: 150px;
    min-width: 150px;
}

.usp.shield i{
    font-size:36px;
}

.usp.shield span{
    padding-top:4px;
}

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

.price-card{
    width:100%;
    max-width:710px;
    height:130px;
    display:grid;
    grid-template-columns:54% 46%;
    border-radius:18px;
    overflow:hidden;
    background:#fff;
    border:1px solid #061550;
    box-shadow:0 12px 26px rgba(38,84,150,.08);
    margin-bottom:8px;
}

.price-left{
    background-image: linear-gradient(to right, #1c3497 0%, #009dee 51%, #1c3497 100%);
    color:#fff;
    padding:5px 33px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    border-right:1px solid rgba(255,255,255,.3);
}

.starting{
    font-size:22px;
    font-weight:normal;
    margin-bottom:7px;
    line-height: 1;
}

.price{
    display:flex;
    align-items:baseline;
    gap:9px;
    white-space:nowrap;
}

.price strong{
    font-size:55px;
    line-height:1;
    /*letter-spacing:-2px;*/
}

.price span{
    font-size:22px;
    font-weight:700;
}

.price-right{
    padding:5px 30px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:12px;
    font-size:16px;
    font-weight:normal;
    line-height: 1;
}

.check{
    display:flex;
    align-items:center;
    gap:12px;
    color:var(--text);
}

.check i{
    color:#d93831;
    font-size:24px;
}

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

.cta-row{
    display:flex;
    gap:18px;
    max-width:710px;
}

.cta{
    height:60px;
    flex:1;
    border-radius:32px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:24px;
    font-size:22px;
    font-weight:normal;
    transition:.2s ease;
}

.cta a, .cta a:hover, .cta a:active, .cta a:visited{
    transform:translateY(-2px);
    color: #fff;
}

.cta-primary{
    background:var(--red);
    color:#fff!important;
    box-shadow:0 12px 24px rgba(237,28,36,.16);
}
.cta-primary a, .cta-primary a:hover, .cta-primary a:active, .cta-primary a:visited{color:#fff!important;}
.cta-secondary{
    background:#fff;
    color:var(--red);
    border:2px solid var(--red);
}
.cta-secondary a, .cta-secondary a:hover, .cta-secondary a:active, .cta-secondary a:visited{color:var(--red);}

/* =========================
   SERVER ILLUSTRATION
   ========================= */

.hero-visual{
    height:100%;
    /*min-height:620px;*/
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    padding-top:0;
}

.cloud{
    position:absolute;
    top:55px;
    right:16%;
    width:390px;
    height:220px;
    border-radius:120px;
    background:
        radial-gradient(circle at 30% 30%,rgba(31,133,255,.9),transparent 35%),
        radial-gradient(circle at 70% 55%,rgba(0,87,221,.9),transparent 50%),
        linear-gradient(145deg,#123f91,#021c52);
    box-shadow:
        0 0 15px #fff,
        0 0 30px #48a2ff,
        0 0 65px rgba(0,124,255,.55);
    clip-path:path("M 50 175 C 8 170 0 142 18 111 C 31 88 54 80 82 82 C 91 38 127 12 170 18 C 202 21 225 40 236 68 C 251 48 278 38 306 43 C 346 50 367 80 368 113 C 394 115 414 137 410 161 C 406 187 384 199 357 199 L 61 199 Z");
}

.cloud:before{
    content:"";
    position:absolute;
    inset:30px;
    background-image:
        linear-gradient(rgba(92,175,255,.16) 1px,transparent 1px),
        linear-gradient(90deg,rgba(92,175,255,.16) 1px,transparent 1px);
    background-size:26px 26px;
    transform:perspective(300px) rotateX(35deg);
}

.cloud-arrow{
    position:absolute;
    z-index:3;
    font-size:94px;
    font-weight:900;
    line-height:1;
    filter:drop-shadow(0 0 8px currentColor);
}

.cloud-up{
    left:40%;
    top:93px;
    color:#ff2635;
}

.cloud-down{
    right:23%;
    top:140px;
    color:#1ca4ff;
}

.server-floor{
    position:absolute;
    bottom:80px;
    left:50%;
    transform:translateX(-50%);
    width:570px;
    height:55px;
    border:2px solid rgba(47,169,255,.65);
    border-radius:50%;
    box-shadow:0 0 22px rgba(34,165,255,.25);
}

/* Server cabinet */
.server{
    position:absolute;
    bottom:100px;
    left:50%;
    transform:translateX(-50%);
    width:480px;
    height:360px;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    gap:0;
    perspective:900px;
}

.rack{
    position:relative;
    width:120px;
    height:310px;
    background:
        linear-gradient(90deg,#07121e 0,#152637 45%,#020a13 100%);
    border:3px solid #192b3e;
    border-radius:4px 4px 10px 10px;
    box-shadow:
        inset 10px 0 12px rgba(255,255,255,.04),
        inset -12px 0 16px rgba(0,0,0,.7),
        10px 18px 30px rgba(1,12,28,.32);
}

.rack:nth-child(1){
    height:292px;
    transform:translateX(22px) perspective(500px) rotateY(8deg);
    z-index:1;
}

.rack:nth-child(2){
    width:137px;
    height:330px;
    z-index:3;
}

.rack:nth-child(3){
    height:305px;
    transform:translateX(-22px) perspective(500px) rotateY(-8deg);
    z-index:1;
}

.rack:before{
    content:"";
    position:absolute;
    top:12px;
    left:12px;
    right:12px;
    bottom:12px;
    border-radius:2px;
    background:
        radial-gradient(circle,#0d91ff 0 2px,transparent 2.5px) 0 0/17px 17px,
        linear-gradient(90deg,rgba(0,102,255,.2),transparent 60%);
    opacity:.9;
    box-shadow:inset 0 0 18px rgba(0,0,0,.8);
}

.rack:after{
    content:"";
    position:absolute;
    left:17px;
    right:17px;
    bottom:20px;
    height:4px;
    background:#0a63d5;
    box-shadow:
        0 -28px #0a63d5,
        0 -56px #0a63d5,
        0 -84px #0a63d5,
        0 -112px #0a63d5,
        0 -140px #0a63d5,
        0 -168px #0a63d5,
        0 -196px #0a63d5;
    opacity:.5;
}

/* =========================
   BOTTOM FEATURE BAR
   ========================= */

/*.feature-bar{
    position:absolute;
    left:3.7%;
    right:3.7%;
    bottom:-1px;
    min-height:110px;
    background:rgba(255,255,255,.97);
    border-radius:20px 20px 0 0;
    box-shadow:0 -2px 18px rgba(30,67,116,.07);
    display:grid;
    grid-template-columns:repeat(4,1fr);
    align-items:center;
    z-index:52;
}*/
.feature-bar{
    position:relative;
    /*left:3.7%;
    right:3.7%;
    bottom:-1px;*/
    min-height:110px;
    background:rgba(255,255,255,.97);
    border-radius:20px;
        box-shadow: 0 8px 28px #274e8512;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    align-items:center;
    margin: 8px auto 15px auto;
    width: 1000px;
    min-width: 1120px;
    border: 1px solid #e3e3e3;
}

.feature{
    min-height:68px;
    padding:0 35px;
    display:flex;
    align-items:center;
    gap:22px;
    border-right:1px solid #d3ddea;
    color:var(--text);
}

.feature:last-child{
    border-right:0;
}

.feature i{
    font-size:38px;
    color:#0c4db7;
    width:50px;
    text-align:center;
}

.feature strong{
    display:block;
    font-size:16px;
    line-height: 1;
    /*margin-bottom:7px;*/
}

.feature span{
    font-size:14px;
    line-height:1;
}

/* =========================
   MOBILE MENU
   ========================= */

.menu-toggle{
    display:none;
    border:0;
    background:transparent;
    font-size:25px;
    color:var(--navy);
}

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

@media (max-width:1450px){
    .site-header{
        padding:0 3%;
    }

    .logo{
        min-width:260px;
    }

    .logo-z{font-size:43px;}
    .logo-com{font-size:34px;}
    .logo-cloud{font-size:30px;}

    .main-nav{
        gap:24px;
    }

    .header-actions{
        margin-left:18px;
        gap:10px;
    }

    .phone{
        padding:9px 14px;
    }

    .login-btn{
        padding:12px 17px;
    }

    /*.hero-inner{
        width:94%;
    }*/

    .hero-title{
        font-size:3.3rem;
    }

    .server{
        transform:translateX(-50%) scale(.88);
    }

    .cloud{
        transform:scale(.9);
        right:11%;
    }
}

@media (max-width:1150px){
    .reseller{
        display:none;
    }

    .main-nav{
        gap:18px;
    }

    .phone{
        display:none;
    }

    .hero-inner{
        grid-template-columns:52% 48%;
    }

    .hero-title{
        font-size:56px;
    }

    .hero-subtitle{
        font-size:17px;
    }

    .price{
        gap:5px;
    }

    .price strong{
        font-size:42px;
    }

    .price-right{
        padding:12px 20px;
        font-size:15px;
    }

    .hero-visual{
        transform:scale(.86);
    }

    .feature{
        padding:0 18px;
        gap:12px;
    }

    .feature i{
        font-size:30px;
        width:38px;
    }

    .feature strong{
        font-size:14px;
    }

    .feature span{
        font-size:12px;
    }
}

@media (max-width:900px){
    .site-header{
        height:78px;
    }

    .logo{
        min-width:auto;
    }

    .logo-z{font-size:36px;}
    .logo-com{font-size:29px;}
    .logo-cloud{font-size:25px;}

    .main-nav,
    .header-actions{
        display:none;
    }

    .menu-toggle{
        display:block;
        margin-left:auto;
    }

    .hero{
        min-height:auto;
        height: auto;
        padding-bottom:10px;
    }

    .hero-inner{
        display:flex;
        flex-direction:column;
        min-height:auto;
        width:92%;
    }

    .hero-copy{
        width:100%;
        padding:48px 0 0;
    }

    .hero-title{
        font-size:clamp(48px,8vw,72px);
    }

    .hero-subtitle{
        max-width:700px;
    }

    .usps{
        max-width:100%;
    }

    .price-card,
    .cta-row{
        max-width:720px;
    }

    .hero-visual{
        width:100%;
        height:500px;
        min-height:500px;
        transform:none;
        margin-top:-10px;
    }

    .feature-bar{
        position:relative;
        left:auto;
        right:auto;
        bottom:auto;
        width:92%;
        margin:0 auto 20px;
        border-radius:18px;
        grid-template-columns:repeat(2,1fr);
        overflow:hidden;
    }

    .feature{
        padding:18px 25px;
        border-bottom:1px solid #d3ddea;
    }

    .feature:nth-child(2){
        border-right:0;
    }

    .feature:nth-child(3),
    .feature:nth-child(4){
        border-bottom:0;
    }
    .hero-visual {display: none;}
}

@media (max-width:620px){
    .logo-cloud{
        display:none;
    }

    .hero-copy{
        padding-top:5px;
    }

    .hero-title{
        font-size:1.6rem;
        line-height: 1.2;
    }

    .hero-subtitle{
        font-size:16px;
    }

    .underline{
        margin:5px 0;
    }
h1{margin-top: 8px;}
    .usps{
        grid-template-columns:repeat(1,1fr);
        gap:0;
    }

    .usp{
        /*border-bottom:1px solid #ccd6e6;*/
        border-bottom: 1px solid rgb(44, 63, 94);
        border: none;
        padding:1px 8px;
        display: inline-block;
        min-height:auto;
        text-align: left;
    }
    .usp i {font-size: 15px;width: 32px;float: left;}
    .cta-row{gap: 8px;}
    .usp:nth-child(2){
        border-right:0;
    }

    .usp:nth-child(4){
        border-right:0;
    }

    .usp.shield{
        align-items:center;
        text-align:center;
        flex-direction:column;
        gap:3px;
        width: auto;
        min-width: auto;
    }
.starting, .price span{font-size: 18px;}
.price {justify-content: center;}
    .price-card{
        height:auto;
        grid-template-columns:1fr;
    }

    .price-left{
        padding:8px 25px;text-align: center;
    }

    .price-right{
        padding:20px 25px;
        display: none;
    }

    .price strong{
        font-size:40px;
    }

    .cta-row{
        flex-direction:column;
    }

    .cta{
        flex:none;
        width:100%;
        height: auto;
        padding: 10px 20px;
        font-size: 16px;
    }

    .hero-visual{
        height:390px;
        min-height:390px;
        transform:scale(.78);
        transform-origin:top center;
        margin-bottom:-70px;
    }

    .feature-bar{
        grid-template-columns:1fr;margin-top: 8px;
    }

    .feature{
        border-right:0;
        border-bottom:1px solid #d3ddea !important;
    }

    .feature:last-child{
        border-bottom:0 !important;
    }
}