:root {
--bg:#071426;
    --bg2:#0c1d36;
    --tx:#CBD5E1;
    --lk:#94A3B8;
    --ac:#34D399;
    --bd:rgba(148,163,184,.18);
    --r:18px}

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

html {
scroll-behavior:smooth;
    scroll-padding-top:80px}

 body {
background:var(--bg);
    color:var(--tx);
    font:16px/1.7 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
    overflow-x:hidden}

 a {
color:var(--lk);
    text-decoration:none;
    transition:.25s}

a:hover {
color:var(--ac)}

 h1,h2,h3 {
color:#fff;
    line-height:1.2}

h1 {
font-size:clamp(2.2rem,5.5vw,4.2rem)}

h2 {
font-size:clamp(1.7rem,3.5vw,2.5rem);
    margin-bottom:.6rem}

h3 {
font-size:1.15rem;
    margin-bottom:.4rem}

 .wrap {
max-width:1180px;
    margin:auto;
    padding:0 20px}

section {
padding:90px 0}

.alt {
background:var(--bg2)}

 .tag {
display:inline-block;
    color:var(--ac);
    font-weight:600;
    letter-spacing:.14em;
    text-transform:uppercase;
    font-size:.8rem;
    margin-bottom:.6rem}

 .head {
max-width:680px;
    margin:0 auto 46px;
    text-align:center}

 .btn {
display:inline-block;
    background:var(--ac);
    color:#04231a!important;
    padding:13px 28px;
    border-radius:50px;
    font-weight:700;
    border:0;
    cursor:pointer;
    font-size:1rem;
    transition:.3s;
    box-shadow:0 0 0 0 rgba(52,211,153,.5)}

 .btn:hover {
transform:translateY(-3px);
    box-shadow:0 10px 30px rgba(52,211,153,.35)}

 header {
position:fixed;
    inset:0 0 auto;
    z-index:50;
    background:rgba(7,20,38,.85);
    backdrop-filter:blur(14px);
    border-bottom:1px solid var(--bd)}

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

 .logo {
display:flex;
    align-items:center;
    gap:10px;
    color:#fff;
    font-weight:800;
    font-size:1.25rem}

.logo i {
font-style:normal;
    display:grid;
    place-items:center;
    width:38px;
    height:38px;
    border-radius:11px;
    background:linear-gradient(135deg,var(--ac),#0ea5a4)}

 .menu {
display:flex;
    align-items:center;
    gap:26px;
    list-style:none}

.menu a {
font-weight:500}

 .burger {
display:none;
    background:none;
    border:0;
    color:#fff;
    font-size:1.8rem;
    cursor:pointer}

 .hero {
min-height:100vh;
    display:flex;
    align-items:center;
    padding:150px 0 100px;
    position:relative;
    background:radial-gradient(circle at 80% 20%,rgba(52,211,153,.18),transparent 45%),radial-gradient(circle at 10% 90%,rgba(56,189,248,.12),transparent 40%)}

 .hero p {
max-width:600px;
    margin:20px 0 32px;
    font-size:1.1rem}

.hero .grid {
display:grid;
    grid-template-columns:1.3fr 1fr;
    gap:40px;
    align-items:center}

 .orb {
aspect-ratio:1;
    border-radius:50%;
    background:conic-gradient(from 0deg,var(--ac),#0ea5a4,#38bdf8,var(--ac));
    display:grid;
    place-items:center;
    font-size:6rem;
    animation:spin 18s linear infinite;
    box-shadow:0 0 90px rgba(52,211,153,.3)}

 .orb span {
animation:spin 18s linear infinite reverse}

@keyframes spin {
to {
transform:rotate(360deg)    }

}

 .stats {
display:flex;
    gap:34px;
    margin-top:40px;
    flex-wrap:wrap}

.stats b {
display:block;
    font-size:1.9rem;
    color:var(--ac)}

 .split {
display:grid;
    grid-template-columns:1fr 1fr;
    gap:50px;
    align-items:center}

.split p {
margin-bottom:14px}

 .pic {
aspect-ratio:4/3;
    border-radius:var(--r);
    background:linear-gradient(135deg,#0f2a4a,#0b3b3a);
    border:1px solid var(--bd);
    display:grid;
    place-items:center;
    font-size:5rem;
    animation:float 5s ease-in-out infinite}

 @keyframes float {
50% {
transform:translateY(-12px)    }

}

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

.cards.four {
grid-template-columns:repeat(4,1fr)}

 .card {
background:rgba(255,255,255,.035);
    border:1px solid var(--bd);
    border-radius:var(--r);
    padding:30px;
    transition:.35s}

 .card:hover {
transform:translateY(-8px);
    border-color:var(--ac);
    box-shadow:0 18px 40px rgba(0,0,0,.35)}

.card .ic {
font-size:2.2rem;
    margin-bottom:12px;
    display:block}

 .steps {
display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
    counter-reset:s}

.step {
position:relative;
    padding:30px;
    border:1px solid var(--bd);
    border-radius:var(--r);
    background:var(--bg)}

 .step:before {
counter-increment:s;
    content:counter(s);
    position:absolute;
    top:-18px;
    left:24px;
    width:38px;
    height:38px;
    border-radius:50%;
    background:var(--ac);
    color:#04231a;
    font-weight:800;
    display:grid;
    place-items:center;
    animation:pulse 2.4s infinite}

 @keyframes pulse {
70% {
box-shadow:0 0 0 14px rgba(52,211,153,0)    }

0% {
box-shadow:0 0 0 0 rgba(52,211,153,.5)    }

}

 form {
display:grid;
    gap:14px}

.two {
display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px}

 input,select,textarea {
width:100%;
    padding:14px 16px;
    border-radius:12px;
    border:1px solid var(--bd);
    background:var(--bg);
    color:#fff;
    font:inherit}

 input:focus,select:focus,textarea:focus {
outline:2px solid var(--ac);
    border-color:transparent}

 .box {
background:var(--bg2);
    padding:36px;
    border-radius:var(--r);
    border:1px solid var(--bd);
    max-width:860px;
    margin:auto}

.alt .box {
background:var(--bg)}

 .faq {
max-width:820px;
    margin:auto}

.q {
border:1px solid var(--bd);
    border-radius:14px;
    margin-bottom:12px;
    overflow:hidden;
    background:rgba(255,255,255,.03)}

 .q button {
width:100%;
    text-align:left;
    background:none;
    border:0;
    color:#fff;
    font:600 1.05rem inherit;
    padding:18px 22px;
    cursor:pointer;
    display:flex;
    justify-content:space-between;
    gap:12px}

 .q button:after {
content:"+";
    color:var(--ac);
    font-size:1.5rem;
    transition:.3s}

.q.open button:after {
transform:rotate(45deg)}

 .q div {
max-height:0;
    overflow:hidden;
    transition:max-height .4s;
    padding:0 22px}

.q.open div {
padding-bottom:18px}

 .stars {
color:#fbbf24;
    letter-spacing:3px}

.who {
margin-top:14px;
    color:#fff;
    font-weight:600}

.who small {
display:block;
    color:var(--lk);
    font-weight:400}

 .cinfo {
list-style:none;
    display:grid;
    gap:18px;
    margin-top:20px}

.cinfo li {
display:flex;
    gap:14px}

 footer {
background:#050f1d;
    border-top:1px solid var(--bd);
    padding:70px 0 0}

.fg {
display:grid;
    grid-template-columns:1.4fr 1fr 1fr 1.3fr;
    gap:36px}

 footer h4 {
color:#fff;
    margin-bottom:14px}

footer ul {
list-style:none;
    display:grid;
    gap:8px}

footer .sub {
display:flex;
    gap:8px;
    margin-top:10px}

footer .sub input {
padding:11px}

 .copy {
margin-top:50px;
    padding:22px 0;
    border-top:1px solid var(--bd);
    display:flex;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
    font-size:.9rem}

.copy span a {
margin-left:18px}

 .page {
padding:140px 0 70px;
    max-width:850px;
    margin:auto}

.page h2 {
margin:30px 0 8px;
    font-size:1.5rem}

.page p,.page li {
margin-bottom:10px}

.page ul {
padding-left:22px}

 .toast {
position:fixed;
    bottom:24px;
    left:50%;
    transform:translateX(-50%);
    background:var(--ac);
    color:#04231a;
    padding:14px 26px;
    border-radius:50px;
    font-weight:700;
    z-index:99}

 .rv {
opacity:0;
    transform:translateY(34px);
    transition:1s cubic-bezier(.2,.7,.2,1)}

.rv.in {
opacity:1;
    transform:none}

 @media(max-width:960px) {
.cards,.cards.four,.steps {
grid-template-columns:1fr 1fr    }

.fg {
grid-template-columns:1fr 1fr    }

.hero .grid,.split {
grid-template-columns:1fr    }

.orb {
max-width:260px    }

}

 @media(max-width:760px) {
.burger {
display:block    }

.menu {
position:absolute;
        top:72px;
        left:0;
        right:0;
        background:var(--bg);
        flex-direction:column;
        padding:24px;
        gap:18px;
        border-bottom:1px solid var(--bd);
        display:none    }

.menu.show {
display:flex    }

 .cards,.cards.four,.steps,.two,.fg {
grid-template-columns:1fr    }

section {
padding:64px 0    }

.copy {
flex-direction:column    }

}

 @media(prefers-reduced-motion:reduce) {
* {
animation:none!important;
        transition:none!important    }

.rv {
opacity:1;
        transform:none    }

}