:root{
    --primary:#6d47f5;
    --primary-dark:#4e2ed2;
    --primary-soft:#eeeaff;
    --navy:#100b29;
    --navy-light:#171039;
    --cyan:#25d8d1;
    --text:#1d1b2d;
    --muted:#6f6b80;
    --border:#e6e3ef;
    --background:#f7f7fb;
    --success:#12a873;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

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

a{color:inherit}

.navbar{
    background:rgba(16,11,41,.96);
    padding-top:.9rem;
    padding-bottom:.9rem;
    backdrop-filter:blur(12px);
    border-bottom:1px solid rgba(255,255,255,.06);
}

.navbar-brand{
    color:#fff!important;
    font-weight:800;
    letter-spacing:-.02em;
    display:flex;
    align-items:center;
    gap:.55rem;
}

.brand-mark{
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    border-radius:9px;
    background:linear-gradient(145deg,var(--primary),#825fff);
    color:#fff;
}

.navbar .nav-link{
    color:rgba(255,255,255,.76);
    font-size:.92rem;
    font-weight:500;
    margin-left:.15rem;
    margin-right:.15rem;
}

.navbar .nav-link:hover{color:#fff}

.nav-contact{
    border:1px solid rgba(255,255,255,.28);
    border-radius:10px;
    padding:.5rem .85rem!important;
    margin-left:.5rem!important;
}

.hero{
    position:relative;
    overflow:hidden;
    color:#fff;
    background:
      radial-gradient(circle at 12% 18%,rgba(109,71,245,.38),transparent 33%),
      radial-gradient(circle at 88% 18%,rgba(37,216,209,.16),transparent 31%),
      var(--navy);
    padding:95px 0 145px;
}

.hero::after{
    content:"";
    position:absolute;
    left:-5%;
    bottom:-110px;
    width:110%;
    height:165px;
    background:#fff;
    border-radius:50% 50% 0 0/80px 80px 0 0;
}

.hero .container{z-index:2}

.hero-label{
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    padding:.5rem .8rem;
    border:1px solid rgba(255,255,255,.18);
    background:rgba(255,255,255,.07);
    border-radius:999px;
    font-size:.84rem;
    margin-bottom:1.35rem;
}

.hero h1{
    font-weight:800;
    letter-spacing:-.05em;
    font-size:clamp(2.45rem,5.4vw,4.6rem);
    max-width:970px;
    margin-left:auto;
    margin-right:auto;
}

.hero-text{
    max-width:760px;
    margin:1.35rem auto 0;
    color:rgba(255,255,255,.72);
    font-size:1.08rem;
    line-height:1.85;
}

.hero-actions{
    margin-top:2rem;
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:.8rem;
}

.btn-main{
    color:#fff!important;
    background:var(--primary);
    border:0;
    padding:.82rem 1.4rem;
    border-radius:10px;
    font-weight:700;
    text-decoration:none;
}

.btn-main:hover{background:#7b5bfa}

.btn-ghost{
    color:#fff!important;
    border:1px solid rgba(255,255,255,.3);
    padding:.82rem 1.4rem;
    border-radius:10px;
    font-weight:600;
    text-decoration:none;
}

.btn-ghost:hover{
    background:rgba(255,255,255,.08);
    border-color:#fff;
}

.hero-features{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:1.25rem;
    margin-top:2rem;
    color:rgba(255,255,255,.72);
    font-size:.87rem;
}

.hero-features i{color:var(--cyan);margin-right:.3rem}

.page-hero{
    color:#fff;
    background:
      radial-gradient(circle at 85% 10%,rgba(109,71,245,.3),transparent 30%),
      var(--navy);
    padding:78px 0 88px;
}

.page-hero h1{
    max-width:920px;
    font-weight:800;
    letter-spacing:-.045em;
    font-size:clamp(2.2rem,4.8vw,4rem);
    margin:0;
}

.page-hero p{
    max-width:760px;
    color:rgba(255,255,255,.68);
    margin-top:1.1rem;
    font-size:1.05rem;
    line-height:1.8;
}

.cloud-hero{
    background:
      radial-gradient(circle at 82% 20%,rgba(37,216,209,.19),transparent 30%),
      radial-gradient(circle at 15% 15%,rgba(109,71,245,.32),transparent 32%),
      var(--navy);
}

.baremetal-hero{
    background:
      radial-gradient(circle at 88% 15%,rgba(255,166,77,.12),transparent 28%),
      radial-gradient(circle at 12% 15%,rgba(109,71,245,.28),transparent 33%),
      var(--navy);
}

.managed-hero{
    background:
      radial-gradient(circle at 90% 10%,rgba(37,216,209,.15),transparent 32%),
      radial-gradient(circle at 15% 20%,rgba(109,71,245,.28),transparent 32%),
      var(--navy);
}

.section-space{padding:88px 0}

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

.section-heading{
    max-width:760px;
    margin:0 auto 3rem;
    text-align:center;
}

.section-heading h2{
    font-weight:800;
    letter-spacing:-.035em;
    font-size:clamp(1.8rem,3vw,2.55rem);
}

.section-heading p{
    color:var(--muted);
    margin-top:.8rem;
    line-height:1.8;
}

.eyebrow{
    display:inline-block;
    color:var(--primary-dark);
    font-size:.74rem;
    letter-spacing:.13em;
    font-weight:800;
    margin-bottom:.75rem;
}

.eyebrow-light{color:#bdb0ff}

.service-overview{padding-top:45px}

.service-card{
    display:flex;
    flex-direction:column;
    height:100%;
    text-decoration:none;
    color:var(--text);
    border:1px solid var(--border);
    border-radius:18px;
    background:#fff;
    padding:1.6rem;
    transition:.22s ease;
}

.service-card:hover{
    color:var(--text);
    transform:translateY(-5px);
    box-shadow:0 18px 42px rgba(28,20,62,.09);
    border-color:#d8d2ee;
}

.service-icon{
    width:50px;
    height:50px;
    display:grid;
    place-items:center;
    border-radius:13px;
    background:var(--primary-soft);
    color:var(--primary);
    font-size:1.35rem;
    margin-bottom:1.15rem;
}

.service-card h3{
    font-size:1.03rem;
    font-weight:750;
}

.service-card p{
    color:var(--muted);
    font-size:.88rem;
    line-height:1.7;
    flex-grow:1;
}

.service-card span{
    color:var(--primary-dark);
    font-size:.83rem;
    font-weight:700;
}

.dark-band{
    background:
      radial-gradient(circle at 15% 25%,rgba(109,71,245,.26),transparent 35%),
      var(--navy);
}

.dark-band h2{
    font-weight:800;
    letter-spacing:-.035em;
    font-size:clamp(1.9rem,3.4vw,3rem);
}

.lead-copy{line-height:1.8}

.terminal-card{
    background:#0b071a;
    border:1px solid rgba(255,255,255,.1);
    border-radius:16px;
    overflow:hidden;
    box-shadow:0 20px 50px rgba(0,0,0,.25);
}

.terminal-top{
    height:42px;
    display:flex;
    gap:.45rem;
    align-items:center;
    padding:0 1rem;
    background:#171129;
    border-bottom:1px solid rgba(255,255,255,.07);
}

.terminal-top span{
    width:10px;
    height:10px;
    border-radius:50%;
    background:#8b8499;
}

.terminal-card pre{
    margin:0;
    padding:1.6rem;
    color:#bdeee7;
    font-size:.9rem;
    line-height:1.8;
    white-space:pre-wrap;
}

.why-card{
    height:100%;
    background:#fff;
    border:1px solid var(--border);
    border-radius:15px;
    padding:1.5rem;
}

.why-icon{
    width:46px;
    height:46px;
    display:grid;
    place-items:center;
    border-radius:11px;
    background:var(--primary-soft);
    color:var(--primary);
    font-size:1.25rem;
    margin-bottom:1rem;
}

.why-card h3{
    font-size:1rem;
    font-weight:750;
}

.why-card p{
    color:var(--muted);
    font-size:.86rem;
    line-height:1.75;
    margin:0;
}

.pricing-section{background:#fff}

.pricing-card{
    position:relative;
    overflow:hidden;
    border:1px solid var(--border);
    border-radius:18px;
    background:#fff;
    padding:1.7rem;
    transition:.22s ease;
}

.pricing-card:hover{
    transform:translateY(-5px);
    box-shadow:0 18px 45px rgba(30,20,70,.09);
}

.pricing-card.featured{
    color:#fff;
    background:linear-gradient(145deg,#191133,#100b27);
    border-color:transparent;
    box-shadow:0 22px 54px rgba(36,22,80,.17);
}

.recommended{
    margin:-1.7rem -1.7rem 1.35rem;
    width:calc(100% + 3.4rem);
    padding:.65rem 1rem;
    background:var(--primary);
    color:#fff;
    text-align:center;
    font-size:.75rem;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.plan-type{
    display:inline-block;
    width:max-content;
    background:var(--primary-soft);
    color:var(--primary-dark);
    border-radius:999px;
    padding:.35rem .65rem;
    font-size:.7rem;
    font-weight:800;
    margin-bottom:1rem;
    text-transform:uppercase;
    letter-spacing:.04em;
}

.featured .plan-type{
    background:rgba(255,255,255,.1);
    color:#d9d1ff;
}

.plan-name{
    font-weight:780;
    font-size:1.12rem;
    min-height:32px;
    margin-bottom:0;
}

.price{
    display:flex;
    align-items:flex-end;
    gap:.25rem;
}

.currency{
    font-weight:650;
    font-size:.9rem;
    margin-bottom:.45rem;
}

.amount{
    font-size:2.05rem;
    font-weight:820;
    line-height:1;
    letter-spacing:-.045em;
}

.period{
    color:var(--muted);
    font-size:.8rem;
    margin-bottom:.3rem;
}

.featured .period{color:rgba(255,255,255,.55)}

.billing-info{
    min-height:74px;
    color:var(--muted);
    font-size:.82rem;
    line-height:1.65;
    margin-top:1rem;
}

.featured .billing-info{color:rgba(255,255,255,.64)}

.btn-plan{
    width:100%;
    margin:.5rem 0 1.3rem;
    padding:.75rem;
    border-radius:9px;
    font-weight:700;
    border:1.5px solid var(--primary);
    color:var(--primary);
    background:transparent;
}

.btn-plan:hover{
    color:#fff;
    background:var(--primary);
}

.featured .btn-plan{
    color:#fff;
    background:var(--primary);
}

.plan-divider{
    border-top:1px solid var(--border);
    margin-bottom:1.15rem;
}

.featured .plan-divider{border-color:rgba(255,255,255,.13)}

.feature-title{
    font-weight:750;
    font-size:.84rem;
    margin-bottom:.8rem;
}

.feature-list{
    list-style:none;
    padding:0;
    margin:0;
}

.feature-list li{
    display:flex;
    gap:.55rem;
    margin-bottom:.7rem;
    font-size:.81rem;
    line-height:1.45;
}

.feature-list i{
    color:var(--success);
    margin-top:.1rem;
}

.featured .feature-list i{color:#55e5bd}

.note-box{
    display:flex;
    gap:.9rem;
    align-items:flex-start;
    max-width:900px;
    margin-left:auto;
    margin-right:auto;
    padding:1rem 1.2rem;
    border:1px solid #ded8f7;
    border-radius:13px;
    background:#f7f4ff;
    color:#554c6b;
    font-size:.88rem;
    line-height:1.7;
}

.note-box>i{
    color:var(--primary);
    font-size:1.2rem;
    margin-top:.1rem;
}

.content-panel{
    background:#fff;
    border:1px solid var(--border);
    border-radius:16px;
    padding:2rem;
}

.content-panel h2{
    font-weight:800;
    letter-spacing:-.03em;
    font-size:1.75rem;
}

.content-panel p{
    color:var(--muted);
    line-height:1.8;
}

.clean-list{
    list-style:none;
    padding:0;
    margin:1.2rem 0 0;
}

.clean-list li{
    margin-bottom:.85rem;
    color:#514c60;
}

.clean-list i{
    color:var(--success);
    margin-right:.5rem;
}

.btn-outline-brand{
    border:1.5px solid var(--primary);
    color:var(--primary-dark);
    font-weight:700;
    padding:.75rem 1.1rem;
    border-radius:10px;
}

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

.step-card{
    height:100%;
    border:1px solid var(--border);
    border-radius:16px;
    background:#fff;
    padding:1.5rem;
}

.step-no{
    color:var(--primary);
    font-size:.78rem;
    font-weight:800;
    letter-spacing:.1em;
}

.step-card h3{
    font-size:1.05rem;
    font-weight:760;
    margin-top:.8rem;
}

.step-card p{
    color:var(--muted);
    font-size:.86rem;
    line-height:1.7;
    margin-bottom:0;
}

.tech-grid{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:.85rem;
}

.tech-pill{
    min-height:92px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:.55rem;
    text-align:center;
    border:1px solid var(--border);
    border-radius:14px;
    background:#fff;
    padding:1rem;
    font-size:.82rem;
    font-weight:650;
}

.tech-pill i{
    color:var(--primary);
    font-size:1.35rem;
}

.cta-section{padding:0 0 90px}

.cta-box{
    position:relative;
    overflow:hidden;
    text-align:center;
    border-radius:22px;
    color:#fff;
    background:
      radial-gradient(circle at 90% 20%,rgba(37,216,209,.17),transparent 35%),
      var(--navy);
    padding:3.5rem 2rem;
}

.cta-box h2{
    font-weight:800;
    letter-spacing:-.035em;
}

.cta-box p{
    max-width:650px;
    margin:1rem auto 1.8rem;
    color:rgba(255,255,255,.67);
    line-height:1.8;
}

footer{
    background:#0d0920;
    color:rgba(255,255,255,.62);
}

.footer-brand{
    color:#fff;
    font-size:1.05rem;
    font-weight:800;
    margin-bottom:.8rem;
}

.footer-brand i{color:var(--cyan)}

.footer-copy{max-width:520px;line-height:1.75}

footer a{
    color:rgba(255,255,255,.68);
    text-decoration:none;
}

footer a:hover{color:#fff}

.footer-links{
    display:flex;
    flex-direction:column;
    gap:.5rem;
}

.footer-rule{border-color:rgba(255,255,255,.13)}

@media(max-width:1199px){
    .tech-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media(max-width:991px){
    .navbar .nav-link{margin-left:0}
    .nav-contact{margin-left:0!important;margin-top:.5rem;display:inline-block}
    .hero{padding-top:70px}
}

@media(max-width:767px){
    .section-space{padding:68px 0}
    .hero{padding:65px 0 125px}
    .hero h1{font-size:2.4rem}
    .hero-text{font-size:.95rem}
    .page-hero{padding:60px 0 68px}
    .tech-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .pricing-card{padding:1.5rem}
    .recommended{
        margin:-1.5rem -1.5rem 1.3rem;
        width:calc(100% + 3rem);
    }
}

@media(max-width:480px){
    .tech-grid{grid-template-columns:1fr}
    .hero-actions .btn{width:100%}
}