:root{
    --blue:#071f45;
    --blue2:#0b3971;
    --blue3:#126ec4;
    --green:#05ad78;
    --green2:#14d290;
    --ink:#061731;
    --muted:#64748b;
    --line:#dce5ef;
    --soft:#f4f8fc;
    --white:#fff;
}

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    background:#fff;
    color:var(--ink);
    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

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

.shell{
    width:90%;
    max-width:1500px;
    margin:0 auto;
}

/* NAV */

.topbar{
    background:rgba(255,255,255,.98);
    border-bottom:1px solid #edf2f7;
    position:sticky;
    top:0;
    z-index:100;
}

.nav{
    height:76px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
}

.logo{
    display:flex;
    align-items:center;
    gap:13px;
}

.logo-mark{
    display:flex;
    font-style:italic;
    letter-spacing:-14px;
    padding-right:11px;
}

.logo-mark b{
    font-size:44px;
    font-weight:900;
    line-height:.8;
    background:linear-gradient(135deg,#071f45,#148be3);
    -webkit-background-clip:text;
    color:transparent;
}

.logo-mark b:last-child{
    background:linear-gradient(135deg,#1683da,#0cb779);
    -webkit-background-clip:text;
}

.logo-copy{
    border-left:1px solid #a9b7c7;
    padding-left:13px;
}

.logo-copy strong{
    display:block;
    font-size:19px;
    letter-spacing:-.7px;
}

.logo-copy strong span{
    color:#087ebc;
}

.logo-copy small{
    display:block;
    margin-top:2px;
    color:#60758d;
    font-size:10px;
    letter-spacing:1.5px;
    text-transform:uppercase;
}

.menu{
    display:flex;
    align-items:center;
    gap:31px;
    font-size:14px;
    font-weight:700;
}

.menu a{
    padding:28px 0 24px;
    border-bottom:3px solid transparent;
}

.menu a:hover,
.menu a.active{
    color:#087e69;
    border-color:var(--green);
}

.nav-actions{
    display:flex;
    align-items:center;
    gap:17px;
}

.login{
    font-size:14px;
    font-weight:700;
}

.button{
    border-radius:8px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:48px;
    padding:0 28px;
    font-weight:800;
    transition:.2s ease;
}

.button.small{
    min-height:41px;
    padding:0 19px;
    font-size:13px;
}

.button.green{
    color:#fff;
    background:linear-gradient(135deg,#079968,#05bd7e);
    box-shadow:0 9px 25px rgba(3,166,112,.22);
}

.button.green:hover{
    transform:translateY(-2px);
    box-shadow:0 13px 30px rgba(3,166,112,.31);
}

.button.ghost{
    color:#fff;
    border:1px solid rgba(255,255,255,.7);
    backdrop-filter:blur(7px);
}

/* HERO */

.hero{
    min-height:450px;
    position:relative;
    overflow:hidden;
    background:#071f45;
}

.hero-image{
    position:absolute;
    inset:0 0 0 48%;
    background-size:cover;
    background-position:center 30%;
}

.hero-overlay{
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            90deg,
            rgba(4,23,52,1) 0%,
            rgba(5,34,70,.98) 32%,
            rgba(5,34,70,.88) 49%,
            rgba(5,34,70,.20) 71%,
            rgba(5,34,70,.12) 100%
        );
}

.hero-inner{
    position:relative;
    z-index:5;
    min-height:450px;
    display:grid;
    grid-template-columns:52% 48%;
    align-items:center;
}

.hero-copy{
    color:#fff;
    max-width:720px;
}

.eyebrow{
    letter-spacing:4px;
    font-size:12px;
    font-weight:700;
    color:#b5cee7;
    margin-bottom:15px;
}

.hero h1{
    margin:0;
    font-size:61px;
    line-height:.98;
    letter-spacing:-3.1px;
    max-width:720px;
}

.hero h1 span{
    display:block;
    color:#33a9ff;
}

.hero-copy > p{
    max-width:620px;
    font-size:18px;
    line-height:1.45;
    color:#e2ebf5;
    margin:18px 0 23px;
}

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

.hero-checks{
    display:flex;
    flex-wrap:wrap;
    gap:27px;
    color:#e5edf5;
    font-size:13px;
}

.hero-checks span::first-letter{
    color:var(--green2);
}

.hero-side{
    min-height:450px;
    position:relative;
}

.floating-card{
    position:absolute;
    right:0;
    top:105px;
    background:rgba(2,25,50,.75);
    border:1px solid rgba(255,255,255,.22);
    backdrop-filter:blur(13px);
    padding:17px 22px;
    border-radius:11px;
    min-width:235px;
    color:#fff;
}

.floating-card div{
    display:flex;
    gap:12px;
    align-items:center;
    margin:11px 0;
}

.floating-card span{
    font-size:13px;
}

.scribble{
    position:absolute;
    right:19px;
    bottom:30px;
    color:#fff;
    font-size:22px;
    font-style:italic;
    transform:rotate(-5deg);
    opacity:.85;
}

/* BENEFITS */

.benefits{
    border-bottom:1px solid #e7edf4;
    background:#fff;
}

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

.benefits article{
    min-height:132px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:17px 22px;
    border-right:1px solid #e7edf4;
}

.benefits article:last-child{
    border-right:0;
}

.benefit-icon{
    font-size:30px;
    color:#058f70;
    margin-bottom:7px;
}

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

.benefits span{
    color:#62748a;
    font-size:12px;
    margin-top:5px;
    line-height:1.3;
}

/* PLANS */

.plans-section{
    padding:58px 0 68px;
    background:
        radial-gradient(circle at 15% 90%,#eef9ff 0,transparent 28%),
        #f9fcff;
}

.section-heading{
    display:flex;
    justify-content:space-between;
    align-items:end;
    gap:40px;
    margin-bottom:28px;
}

.section-heading small{
    color:#7a8fa7;
    letter-spacing:3px;
    font-weight:800;
}

.section-heading h2{
    margin:5px 0 0;
    font-size:36px;
    letter-spacing:-1.7px;
}

.section-heading > p{
    max-width:430px;
    color:#74869b;
    font-size:13px;
    line-height:1.5;
}

.plans-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
}

.plan{
    position:relative;
    background:#fff;
    border:1px solid #dbe4ee;
    border-radius:10px;
    padding:30px 30px 23px;
    box-shadow:0 12px 35px rgba(14,51,86,.045);
}

.plan.popular{
    border:2px solid #1283da;
    box-shadow:0 18px 42px rgba(11,92,169,.12);
}

.popular-label{
    position:absolute;
    left:-2px;
    right:-2px;
    top:-2px;
    height:25px;
    border-radius:9px 9px 0 0;
    background:linear-gradient(90deg,#126ed0,#13aa7c);
    color:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:10px;
    font-weight:900;
    letter-spacing:2px;
}

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

.plan h3{
    font-size:21px;
    margin:0;
}

.plan > p{
    margin:3px 0 8px;
    font-size:13px;
    color:#75869a;
}

.plan-price{
    display:flex;
    align-items:baseline;
    margin:8px 0 15px;
}

.plan-price sup{
    font-size:24px;
    font-weight:900;
    top:auto;
}

.plan-price strong{
    font-size:51px;
    line-height:1;
    letter-spacing:-3px;
}

.plan.popular .plan-price strong,
.plan.popular .plan-price sup{
    color:#079368;
}

.plan-price span{
    margin-left:5px;
    font-size:20px;
}

.plan ul{
    list-style:none;
    padding:0;
    margin:0 0 22px;
}

.plan li{
    color:#405771;
    font-size:13px;
    margin:9px 0;
    padding-left:24px;
    position:relative;
}

.plan li::before{
    content:"✓";
    position:absolute;
    left:0;
    color:#06a873;
    font-weight:900;
}

.plan-button{
    width:100%;
    height:45px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid #9fb1c4;
    border-radius:6px;
    font-weight:800;
    font-size:14px;
}

.plan.popular .plan-button{
    color:#fff;
    border-color:#06a873;
    background:linear-gradient(135deg,#059b6c,#08c684);
}

/* DOMAINS */

.domain-bar{
    background:linear-gradient(95deg,#05214a,#064a67);
    color:#fff;
}

.domain-inner{
    min-height:82px;
    display:grid;
    grid-template-columns:260px 1fr auto;
    align-items:center;
    gap:30px;
}

.domain-title strong,
.domain-title span{
    display:block;
}

.domain-title strong{
    font-size:17px;
}

.domain-title span{
    font-size:11px;
    color:#cbdce7;
    margin-top:3px;
}

.domain-search{
    height:45px;
    background:#fff;
    border-radius:7px;
    display:flex;
    align-items:center;
    padding-left:16px;
    overflow:hidden;
}

.domain-search span{
    color:#173959;
}

.domain-search input{
    border:0;
    outline:0;
    flex:1;
    height:100%;
    padding:0 13px;
    font-size:13px;
}

.domain-search button{
    width:145px;
    border:0;
    height:100%;
    background:linear-gradient(135deg,#079a70,#05bd81);
    color:#fff;
    font-weight:800;
}

.domain-prices{
    display:flex;
    gap:23px;
}

.domain-prices div{
    display:flex;
    flex-direction:column;
    font-size:12px;
}

/* WHY */

.why{
    padding:68px 0;
}

.why-grid{
    display:grid;
    grid-template-columns:1.5fr 1fr 1fr;
    gap:20px;
}

.why-card{
    min-height:230px;
    padding:29px;
    border:1px solid #e0e8f0;
    border-radius:12px;
    background:#fff;
}

.why-card.primary{
    background:
        linear-gradient(135deg,rgba(6,35,73,.97),rgba(9,75,102,.97));
    color:#fff;
}

.why-card .label{
    color:#5ee2b3;
    font-size:11px;
    font-weight:800;
    letter-spacing:2px;
}

.why-card h2{
    font-size:31px;
    margin:11px 0 12px;
}

.why-card h3{
    font-size:20px;
}

.why-card p{
    color:#698096;
    line-height:1.6;
}

.why-card.primary p{
    color:#d6e3ed;
}

.why-card.primary a{
    color:#5ee2b3;
    font-weight:800;
}

.big-icon{
    width:52px;
    height:52px;
    border-radius:12px;
    background:#e9faf4;
    display:grid;
    place-items:center;
    color:#07916b;
    font-size:25px;
}

/* CTA */

.cta{
    background:#f2f8fd;
    border-top:1px solid #e0eaf3;
}

.cta-inner{
    min-height:160px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.cta small{
    color:#74869a;
    letter-spacing:2px;
}

.cta h2{
    font-size:31px;
    margin:7px 0 0;
}

/* FOOTER */

footer{
    color:#76889a;
    font-size:12px;
    border-top:1px solid #e6edf4;
}

.footer-grid{
    min-height:90px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.footer-brand{
    display:flex;
    flex-direction:column;
}

.footer-brand strong{
    color:#0a274c;
    font-size:17px;
}

@media(max-width:1100px){

    .menu{
        display:none;
    }

    .hero-inner{
        grid-template-columns:1fr;
    }

    .hero-copy{
        padding:55px 0;
    }

    .hero-image{
        left:30%;
    }

    .hero-side{
        display:none;
    }

    .benefits-grid{
        grid-template-columns:repeat(3,1fr);
    }

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

    .domain-inner{
        grid-template-columns:1fr;
        padding:22px 0;
    }

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

@media(max-width:650px){

    .shell{
        width:92%;
    }

    .nav-actions .login,
    .logo-copy small{
        display:none;
    }

    .logo-copy strong{
        font-size:14px;
    }

    .hero{
        min-height:530px;
    }

    .hero-inner{
        min-height:530px;
    }

    .hero-image{
        inset:0;
        opacity:.25;
    }

    .hero-overlay{
        background:linear-gradient(
            90deg,
            rgba(4,23,52,.98),
            rgba(5,34,70,.92)
        );
    }

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

    .hero-copy > p{
        font-size:16px;
    }

    .hero-checks{
        flex-direction:column;
        gap:8px;
    }

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

    .section-heading{
        align-items:start;
        flex-direction:column;
    }

    .section-heading h2{
        font-size:29px;
    }

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

    .cta-inner{
        align-items:flex-start;
        flex-direction:column;
        justify-content:center;
        gap:18px;
    }

}