:root{
    --blue:#087df1;
    --blue2:#159cff;
    --blue3:#0099d5;
    --dark:#07172d;
    --dark2:#0b2745;
    --brown:brown;
    --text:#0b1730;
    --muted:#68758b;
    --line:#e7edf5;
    --bg:#f6f9fc;
    --white:#fff;
    --radius:14px;
    --shadow:0 12px 35px rgba(11,45,85,.08);
}

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

html{scroll-behavior:smooth}

body{
    font-family:Inter,Arial,sans-serif;
    color:var(--text);
    background:#fff;
    line-height:1.5;
}

a{
    color:inherit;
    text-decoration:none;
}
hr {
	margin: 50px 0 20px 0;	
	border: 2px solid var(--line);
}
.price-domains {
	margin: 10px 0;
}
.plan-desc h4 {
	font-size:1.3em;
	margin: 10px 0;
	font-weight: 500;
}
.dname {
	margin: 0 5px 0 0;
	padding: 3px 5px;
	border: 1px solid var(--line);
	background-color: var(--line);
	border-radius: 6px;
	color: var(--dark);	
	
}
.container{
    width:min(1180px,calc(100% - 40px));
    margin:auto;
}

/* HEADER */

.header{
    height:74px;
    height:90px;
    background:#fff;
    display:flex;
    align-items:center;
    position:sticky;
    top:0;
    z-index:100;
    box-shadow:0 2px 15px rgba(0,0,0,.04);
	
	
  backdrop-filter: blur(10px);
  background: rgba(248,251,255,0.95);
  border-bottom: 1px solid rgba(223,231,241,.7);	
}

.header-inner{
    display:flex;
    align-items:center;
    gap:35px;
}

.logo{
    margin-right:auto;
}
.logo span{
	color: var(--blue);
}
.logo-main{
    font-size:25px;
    font-size:36px;
    font-size:40px;
    font-weight:800;
    letter-spacing:-1px;
    letter-spacing:-0.5px;
    color:var(--blue);
    color:var(--dark);
	line-height:1;
}

.logo-sub{
    font-size:11px;
    font-size:13px;
    color:#8490a2;
	color: var(--muted);
    margin-top:-2px;
	
}

.nav{
    display:flex;
    gap:24px;
    align-items:center;
    font-size:17px;
    font-weight:700;
}

.nav a:hover{color:var(--blue)}


.mobile-menu {
    display: none;
    border: 0;
    background: transparent;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    color: #111827;
    padding: 8px;
}


/* MOBILE */

@media(max-width:900px){
 .header-inner{position:relative}
 .mobile-menu{
	 display:block! important;
	 border:0;
	 background:transparent;
	 font-size:28px;
	 line-height:1;
	 cursor:pointer;
	 padding:8px;
	 z-index:1002
	 }
 .nav{display:none!important;
	 position:absolute;
	 top:calc(100% + 10px);
	 left:0;
	 right:0;
	 background:#fff;
	 padding:16px;
	 border-radius:14px;
	 box-shadow:0 20px 40px rgba(15,23,42,.14);
	 z-index:1000
	 }
 .nav.mobile-open{
	 display:flex!important;
	 flex-direction:column;
	 align-items: stretch;
	 gap:0
	 }
 .nav.mobile-open a{
	 display:block;
	 padding:14px 12px;
	 border-bottom:1px solid #eef2f7;
	 text-decoration:none
	 }
 .nav.mobile-open a:last-child{
	 border-bottom:0
	 }
 .logo-main{
	font-size: 32px;
    letter-spacing: -0.25px;
    }	
}


.lang{
    display:flex;
    border:1px solid var(--line);
    border-radius:8px;
    overflow:hidden;
}

.lang button{
    border:0;
    background:#fff;
    padding:7px 8px;
    cursor:pointer;
    font-size:11px;
	
	border: 0;
	background: #fff;
	padding: 9px 12px;
	cursor: pointer;
	font-size: 12px;	
}

.lang button.active{
    background:var(--blue);
    color:#fff;
}

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:8px;
    padding:13px 23px;
    font-weight:600;
    font-size:15px;
    transition:.2s;
    cursor:pointer;
    border:0;
	font-family: Inter,Arial,sans-serif;
}

.btn-primary{
    color:#fff;
    background:linear-gradient(135deg,var(--blue),var(--blue2));
}

.btn-primary:hover{
    transform:translateY(-1px);
    box-shadow:0 10px 25px rgba(8,125,241,.25);
}

.btn-outline{
    color:#fff;
    border:1px solid rgba(255,255,255,.65);
    background:transparent;
}

.btn-outline:hover{
    background:#fff;
    color:var(--dark);
}

.apply {
	width:180px;
}
/* HERO */
/*
.hero{
    min-height:480px;
    display:flex;
    align-items:center;
    position:relative;
    overflow:hidden;
    color:#fff;

    background:
    linear-gradient(90deg,
        rgba(3,16,33,.98) 0%,
        rgba(4,24,48,.92) 45%,
        rgba(4,30,58,.52) 100%),
    url("../../assets/images/server-room.jpg") center/cover no-repeat;
	background:
	linear-gradient(90deg, 
		rgba(3,16,33,.98) 10%, 
		rgba(4,24,48,0.92) 5%, 
		rgba(4,30,58,.52) 60%), 
		url("../../assets/images/server-room.jpg") center/cover no-repeat;
	background: radial-gradient(cornflowerblue,black);	
}
*/
.hero::after{
    content:"";
    position:absolute;
    inset:0;
    background:
      radial-gradient(circle at 80% 50%,rgba(0,136,255,.22),transparent 35%);
}


.hero{
    position:relative;
    overflow:hidden;
    padding:72px 0 65px;
    background:
        radial-gradient(circle at 80% 20%,rgba(16,143,255,.18),transparent 30%),
        linear-gradient(135deg,#06162b,#0a2847);
    color:#fff;
	
    background:
    linear-gradient(90deg,
        rgba(3,16,33,.98) 0%,
        rgba(4,24,48,.92) 45%,
        rgba(4,30,58,.52) 100%),
    url("../../assets/images/server-room2.jpg") center/cover no-repeat;	
}

.hero::after{
    content:"";
    position:absolute;
    width:500px;
    height:500px;
    right:-180px;
    top:-200px;
    border-radius:50%;
    border:80px solid rgba(0,145,255,.06);
}


.hero-title{
	max-width:600px;
    min-height:125px;
    display:flex;
    flex-direction:column;
    justify-content:center;

    transition:
        opacity .45s ease,
        transform .45s ease;
}
@media(max-width:700px){
    .hero-title{
        min-height:145px;
    }
}
.hero-title.hero-hide{
    opacity:0;
    transform:translateY(12px);
}

.hero-content{
    position:relative;
    z-index:2;
    max-width:670px;
    padding:70px 0;
}

.eyebrow{
    text-transform:uppercase;
    letter-spacing:6px;
    font-size:11px;
    color:#a9bdd4;
    margin-bottom:20px;
}

.hero h1{
    font-size:52px;
    line-height:1.07;
    letter-spacing:-2px;
    margin-bottom:20px;
}

.hero h1 span{
    color:#3ba9ff;
}

.hero p{
    font-size:18px;
    max-width:600px;
    color:#d9e3ee;
    margin-bottom:30px;
}

.hero-actions{
    display:flex;
    gap:15px;
}

/* QUICK BENEFITS */

.quick{
    border-bottom:1px solid var(--line);
    background:#fff;
}

.quick-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
}

.quick-item{
    padding:25px 20px;
    display:flex;
    align-items:center;
    gap:15px;
}

.quick-item:not(:last-child){
    border-right:1px solid var(--line);
}

.quick-icon{
    width:43px;
    height:43px;
    border-radius:10px;
    background:#eef7ff;
    color:var(--blue);
    display:grid;
    place-items:center;
    font-size:28px;
	
    width:48px;
    height:48px;	
	font-size:32px;
}

.quick-item strong{
    display:block;
    font-size:14px;
}

.quick-item span{
    color:var(--muted);
    font-size:12px;
}

/* SECTIONS */

.section{
    padding:70px 0;
    padding:100px 0;
	
}

.section-soft{
    background:var(--bg);
}

.section-title-row{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    margin-bottom:30px;
}

.section-title{
    font-size:34px;
    letter-spacing:-1px;
}

.section-title span{color:var(--blue)}
.section-title strong {font-weight:700}
.section-subtitle{
    color:var(--muted);
    margin-top:5px;
}

.more{
    color:var(--blue);
    font-size:14px;
    font-weight:600;
}

/* ADVANTAGES */

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

.feature{
    background:#fff;
    border:1px solid #edf1f6;
    border-radius:var(--radius);
    padding:27px;
    box-shadow:var(--shadow);
}

.feature-icon{
    width:50px;
    height:50px;
    display:grid;
    place-items:center;
    background:#edf7ff;
    border-radius:12px;
    color:var(--blue);
    font-size:25px;
    font-size:36px;
    margin-bottom:20px;
}

.feature h3{
    font-size:18px;
    margin-bottom:10px;
	
	font-size: 20px;
	margin-bottom: 14px;
	line-height: 1;	
}

.feature p{
    color:var(--muted);
    font-size:14px;
}

/* PRICING */

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

.plan{
    background:#fff;
    border:3px solid #e7edf4;
    border-radius:var(--radius);
    padding:27px 23px;
    position:relative;
}
.plan:hover {
	background:rgba(200,225,245,.25);
	border:3px solid #ffffff;
	box-shadow:0 0px 10px rgba(165,200,210,.75);
}

.plan.popular{
    border:2px solid var(--blue);
}

.popular-label{
    position:absolute;
    left:-2px;
    right:-2px;
    top:-2px;
    height:35px;
    background:var(--blue);
    color:#fff;
    border-radius:12px 12px 0 0;
    text-align:center;
    font-size:16px;
    padding-top:5px;
	/*background: linear-gradient(135deg,brown,blue,blue,bisque,brown);*/
}

.plan.popular{
    padding-top:44px;
}

.plan h3{
    color:var(--blue);
    font-size:21px;
	line-height: 1;
	margin: 10px 0;	
}

.plan-desc{
    color:var(--muted);
    min-height:45px;
    font-size:13px;
    margin:7px 0 15px;
}

.price{
    font-size:29px;
    font-weight:800;
    margin-bottom:20px;
}

.price small{
    font-size:13px;
    font-weight:400;
    color:var(--muted);
}

.plan ul{
    list-style:none;
    margin-bottom:25px;
}

.plan li{
    font-size:13px;
    margin:11px 0;
    color:#46546a;
}

.plan li::before{
    content:"✓";
    color:var(--blue);
    font-weight:bold;
    margin-right:9px;
}

.plan .btn{
    width:100%;
    border:1px solid var(--blue);
}

.plan:not(.popular) .btn{
    color:var(--text);
    background:#fff;
}

.plan:not(.popular) .btn:hover{
    color:var(--white);
    background:var(--blue);
}

.plan-specs{
    border-top:1px solid #edf1f5; 
    margin:18px 0;
    padding-top:15px;
    display:grid;
    gap:8px;
}

#result {
    display: none;
    margin-top: 20px;
    padding: 15px;
    border-radius: 14px;
    /*font-size: 16px;*/
    line-height: 1.15;
}

#result.ok {
    display: block;
    background: #ecfdf3;
    border: 1px solid #b7efd0;
    color: #137a43;
}

#result.busy {
    display: block;
    background: #fff4f4;
    border: 1px solid #ffd0d0;
    color: #c23939;
}

#result.error {
    display: block;
    background: #fff8e8;
    border: 1px solid #f5df9d;
    color: #9a6700;
}

.result-domain {
    font-size: 19px;
    font-weight: bold;
}

.result-note {
    display: block;
    margin-top: 5px;
    font-size: 13px;
    opacity: .8;
}


.spec{
    display:flex;
    justify-content:space-between;
    gap:10px;
    font-size:12px;
}

.spec strong{font-size:1.2em}
.spec .quota {
	color:var(--blue);
	font-size: 1.2rem;
	font-weight: 500;

}

.spec span:first-child{color:var(--muted)}

/* INFRA */

.duo{
    display:grid;
    grid-template-columns:1.15fr .85fr;
    gap:20px;
}

.infra{
    min-height:300px;
    padding:38px;
    border-radius:var(--radius);
    color:#fff;
    background:
      linear-gradient(90deg,rgba(4,21,40,.98),rgba(4,35,65,.67)),
      url("../../assets/images/server-room.jpg") center/cover;
}

.infra h2,
.domain-box h2{
    font-size:27px;
    margin-bottom:12px;
	line-height:1.25
}

.infra p{
    max-width:560px;
    color:#cbd8e6;
    margin-bottom:25px;
}

.infra-points{
    display:flex;
    flex-wrap:wrap;
    gap:18px;
    margin-top:28px;
    font-size:12px;
    color:#d8e5f1;
}

.domain-box{
    border-radius:var(--radius);
    background:#f5f9fd;
    background:var(--line);
    padding:38px;
}

.domain-box p{
    color:var(--muted);
    margin-bottom:25px;
}

.domain-search{
    display:flex;
}

.domain-search input{
    flex:1;
    min-width:0;
    border:1px solid #dfe6ef;
    padding:15px;
    outline:none;
    border-radius:8px 0 0 8px;
	font-size:16px;
}

.domain-search select{
    border:1px solid #dfe6ef;
    border-left:0;
    padding:0 14px;
    background:#fff;
	font-weight: 700;
	font-size: 14px;
	text-transform: uppercase;
}

.domain-search input,
.domain-search select {
	font-family: Inter, Arial;
}	
 
.domain-search button{
    border-radius:0 8px 8px 0;
}

.domain-prices{
    margin-top:17px;
    color:#6f7d91;
    font-size:12px;
}

/* STEPS */

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

.step{
    display:flex;
    gap:16px;
}

.step-number{
    flex:0 0 48px;
    width:48px;
    height:48px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:#e8f4ff;
    color:var(--blue);
    font-weight:800;
    font-size:18px;
    font-size:42px;
}

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

.step p{
    font-size:12px;
    color:var(--muted);
    margin-top:5px;
}

/* CLIENTS */

.clients{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:35px;
    opacity:.65;
    filter:grayscale(1);
    margin-top:30px;
}

.client{
    font-size:17px;
    font-weight:700;
    color:#43536a;
}

/* CTA */

.cta{
    padding:55px 0;
    background:linear-gradient(135deg,#087df1,#0065c9);
    color:#fff;
}

.cta-inner{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:30px;
}

.cta h2{
    font-size:30px;
}

.cta p{
    color:#dcecff;
    margin-top:5px;
}

.cta .btn{
    background:#fff;
    color:var(--blue);
}

/* FOOTER */

.footer{
    background:#07172d;
    color:#fff;
    padding:50px 0 25px;
}

.footer-grid{
    display:grid;
    grid-template-columns:1.3fr 1fr 1fr 1fr;
    gap:40px;
}

.footer h4{
    margin-bottom:15px;
}

.footer p,
.footer a{
    color:#9eafc3;
    font-size:13px;
}

.footer a{
    display:block;
    margin:8px 0;
}

.footer a:hover{color:#fff}

.copyright{
    margin-top:40px;
    padding-top:20px;
    border-top:1px solid rgba(255,255,255,.1);
    color:#8294a9;
    font-size:12px;
}
.footer a.developer{
	display:initial;
    color:#8294a9;
    font-size:12px;	
}
.footer a.developer:hover {
	color:var(--white);
}

/* MOBILE */

.mobile-menu{
    display:none;
    border:0;
    background:none;
    font-size:26px;
}

@media(max-width:1000px){
    .nav{display:none}
    .mobile-menu{display:block}
    .features,.pricing{grid-template-columns:repeat(2,1fr)}
    .duo{grid-template-columns:1fr}
    .quick-grid{grid-template-columns:repeat(2,1fr)}
    .steps{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:650px){
    .container{
        width:min(100% - 28px,1180px);
    }

    .header .btn-primary{
        display:none;
    }

    .hero{
        min-height:540px;
		padding: 15px 0 15px;
    }

    .hero h1{
        font-size:39px;
    }

    .hero-actions{
        flex-direction:column;
        align-items:flex-start;
    }

    .features,
    .pricing,
    .quick-grid,
    .steps,
    .footer-grid{
        grid-template-columns:1fr;
    }

    .quick-item{
        border-right:0!important;
        border-bottom:1px solid var(--line);
    }

    .section{
        padding:50px 0;
    }

    .section-title{
        font-size:28px;
    }

    .section-title-row{
        align-items:flex-start;
        flex-direction:column;
        gap:10px;
    }

    .domain-search{
        flex-wrap:wrap;
    }

    .domain-search input{
        width:70%;
    }

    .domain-search button{
        width:100%;
        margin-top:8px;
        border-radius:8px;
    }

    .cta-inner{
        flex-direction:column;
        align-items:flex-start;
    }

    .clients{
        flex-wrap:wrap;
        justify-content:flex-start;
    }
}