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

:root {
--bg:#080a0f;
--panel:#0e1118;
--text:#f5f7fb;
--muted:#8d96a8;
--line:rgba(255,255,255,.09);
--accent:#7c8cff;
--accent2:#52d6ff;
}

html {
scroll-behavior:smooth;
}

body {
background:
radial-gradient(circle at 75% 15%,rgba(84,100,255,.13),transparent 30%),
radial-gradient(circle at 15% 60%,rgba(0,190,255,.07),transparent 30%),
var(--bg);
color:var(--text);
font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
line-height:1.6;
}

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

.container {
width:min(1160px,calc(100% - 40px));
margin:auto;
}

.header {
position:relative;
z-index:10;
border-bottom:1px solid var(--line);
background:rgba(8,10,15,.72);
backdrop-filter:blur(18px);
}

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

.logo {
display:flex;
align-items:center;
gap:11px;
font-size:15px;
font-weight:800;
letter-spacing:.18em;
}

.logo svg {
width:34px;
height:34px;
fill:none;
stroke:currentColor;
stroke-width:2;
}

.nav nav {
display:flex;
gap:30px;
}

.nav nav a {
color:var(--muted);
font-size:14px;
transition:.25s;
}

.nav nav a:hover {
color:white;
}

.hero {
padding:110px 0 100px;
}

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

.badge {
display:inline-flex;
align-items:center;
gap:9px;
padding:8px 13px;
border:1px solid var(--line);
border-radius:30px;
color:#b9c2d4;
font-size:12px;
background:rgba(255,255,255,.025);
}

.status-dot {
width:7px;
height:7px;
border-radius:50%;
background:#52e68b;
box-shadow:0 0 12px #52e68b;
}

.hero h1 {
margin-top:25px;
font-size:clamp(52px,7vw,86px);
line-height:.98;
letter-spacing:-.055em;
}

.hero h1 span {
background:linear-gradient(90deg,#8995ff,#54d9ff);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
}

.hero p {
max-width:550px;
margin:28px 0;
color:var(--muted);
font-size:17px;
}

.hero-buttons {
display:flex;
gap:12px;
}

.button {
display:inline-flex;
align-items:center;
justify-content:center;
padding:13px 21px;
border-radius:10px;
font-size:14px;
font-weight:700;
transition:.25s;
}

.button.primary {
background:white;
color:#090b10;
}

.button.primary:hover {
transform:translateY(-2px);
box-shadow:0 12px 35px rgba(255,255,255,.12);
}

.button.secondary {
border:1px solid var(--line);
color:#cbd1dd;
}

.button.secondary:hover {
background:rgba(255,255,255,.05);
}

.network-card {
position:relative;
min-height:390px;
padding:24px;
border:1px solid var(--line);
border-radius:20px;
background:
linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.015)),
var(--panel);
box-shadow:0 30px 80px rgba(0,0,0,.35);
overflow:hidden;
}

.network-card:before {
content:"";
position:absolute;
inset:0;
background-image:
linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
background-size:38px 38px;
mask-image:linear-gradient(to bottom,black,transparent);
}

.card-header,
.network-footer {
position:relative;
z-index:2;
display:flex;
justify-content:space-between;
color:#697386;
font-size:10px;
letter-spacing:.15em;
}

.online {
color:#55e795;
}

.network {
position:relative;
height:270px;
margin-top:15px;
}

.node {
position:absolute;
text-align:center;
color:#778196;
font-size:9px;
letter-spacing:.12em;
}

.node-a {
left:4%;
top:105px;
}

.node-b {
left:43%;
top:75px;
}

.node-c {
right:4%;
top:105px;
}

.node-icon {
width:58px;
height:58px;
display:grid;
place-items:center;
margin:auto auto 10px;
border:1px solid rgba(255,255,255,.13);
border-radius:17px;
background:#111621;
font-size:24px;
}

.node-icon.central {
background:linear-gradient(135deg,#7786ff,#42cfff);
border:none;
color:#fff;
font-weight:900;
box-shadow:0 0 45px rgba(91,125,255,.35);
}

.line {
position:absolute;
top:133px;
height:1px;
background:linear-gradient(90deg,transparent,#7182ff,transparent);
width:38%;
opacity:.6;
}

.line-a {
left:13%;
}

.line-b {
right:13%;
}

.pulse {
position:absolute;
width:7px;
height:7px;
border-radius:50%;
background:#69d8ff;
box-shadow:0 0 15px #69d8ff;
top:130px;
}

.pulse-a {
animation:moveA 3s infinite linear;
}

.pulse-b {
animation:moveB 3s infinite linear 1.5s;
}

@keyframes moveA {
from {left:14%;opacity:0}
15% {opacity:1}
85% {opacity:1}
to {left:42%;opacity:0}
}

@keyframes moveB {
from {right:14%;opacity:0}
15% {opacity:1}
85% {opacity:1}
to {right:42%;opacity:0}
}

.network-footer {
position:absolute;
bottom:24px;
left:24px;
right:24px;
}

.network-footer strong {
color:#cbd2df;
margin-left:-60px;
}

.stats {
border-top:1px solid var(--line);
border-bottom:1px solid var(--line);
}

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

.stats-grid>div {
padding:30px 25px;
border-right:1px solid var(--line);
}

.stats-grid>div:first-child {
border-left:1px solid var(--line);
}

.stats strong {
display:block;
font-size:23px;
}

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

.section {
padding:110px 0;
}

.section-heading {
max-width:650px;
margin-bottom:50px;
}

.eyebrow {
color:#7d8cff;
font-size:11px;
font-weight:800;
letter-spacing:.2em;
}

.section-heading h2,
.cta h2 {
margin-top:12px;
font-size:clamp(35px,5vw,55px);
line-height:1.05;
letter-spacing:-.04em;
}

.section-heading p {
margin-top:20px;
color:var(--muted);
}

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

.service-card {
padding:30px;
min-height:270px;
border:1px solid var(--line);
border-radius:16px;
background:rgba(255,255,255,.025);
transition:.3s;
}

.service-card:hover {
transform:translateY(-5px);
border-color:rgba(130,145,255,.3);
background:rgba(255,255,255,.04);
}

.icon {
color:#7887ff;
font-size:11px;
font-weight:800;
letter-spacing:.15em;
}

.service-card h3 {
margin:45px 0 12px;
font-size:22px;
}

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

.service-card a {
display:inline-block;
margin-top:25px;
color:#b8c0ff;
font-size:13px;
}

.cta {
padding:70px 0;
border-top:1px solid var(--line);
}

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

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

footer {
border-top:1px solid var(--line);
}

.footer {
min-height:90px;
display:flex;
align-items:center;
justify-content:space-between;
color:#697386;
font-size:12px;
}

@media(max-width:850px) {

.nav nav {
display:none;
}

.hero {
padding:70px 0;
}

.hero-grid {
grid-template-columns:1fr;
gap:45px;
}

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

.stats-grid,
.cards {
grid-template-columns:1fr 1fr;
}

.stats-grid>div:nth-child(3) {
border-left:1px solid var(--line);
}

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

}

@media(max-width:550px) {

.container {
width:min(100% - 28px,1160px);
}

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

.hero p {
font-size:15px;
}

.stats-grid,
.cards {
grid-template-columns:1fr;
}

.stats-grid>div {
border-left:1px solid var(--line);
}

.network-card {
min-height:350px;
}

}

.page-title {
margin-top:15px;
font-size:clamp(48px,7vw,80px);
line-height:1;
letter-spacing:-.05em;
}

.page-title span {
color:#7887ff;
}

.page-text {
max-width:720px;
margin-top:35px;
color:var(--muted);
font-size:18px;
}

.page-cards {
margin-top:70px;
}

.contact-card {
max-width:700px;
margin-top:55px;
}

.contact-card p {
margin-top:20px;
}

.contact-button {
margin-top:30px;
}

@media(max-width:550px) {
.page-title {
font-size:48px;
}
}