*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,Arial,sans-serif;background:#080b0d;color:#e8eee9}
body{position:relative;overflow-x:hidden}
.grid{position:fixed;inset:0;opacity:.12;background-image:linear-gradient(#5cff9a 1px,transparent 1px),linear-gradient(90deg,#5cff9a 1px,transparent 1px);background-size:70px 70px;mask-image:linear-gradient(to bottom,#000,transparent 80%);pointer-events:none}
header{height:90px;padding:0 7%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #1c2922}
.logo{display:flex;align-items:center;gap:14px;font-weight:800;letter-spacing:3px}
.logo span{font-size:27px;color:#64ff9b}
.logo small{font-size:10px;color:#748078;letter-spacing:2px}
.status{font-size:10px;letter-spacing:2px;color:#8d9b92}
.status i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#64ff9b;box-shadow:0 0 12px #64ff9b;margin-right:8px}
main{max-width:1200px;margin:auto;padding:110px 7% 80px}
.hero{max-width:850px}
.eyebrow{font-size:10px;letter-spacing:3px;color:#64ff9b;margin-bottom:25px}
h1{font-size:clamp(54px,8vw,100px);line-height:.94;letter-spacing:-5px;margin:0 0 30px;font-weight:700}
h1 strong{color:#64ff9b;font-weight:700}
.hero p{max-width:560px;color:#89958e;font-size:17px;line-height:1.7;margin:0}
.line{height:1px;background:linear-gradient(90deg,#64ff9b,transparent);margin:55px 0}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{position:relative;min-height:270px;padding:28px;background:#0d1210;border:1px solid #1d2922;text-decoration:none;color:inherit;transition:.25s}
.card:hover{transform:translateY(-5px);border-color:#64ff9b;background:#101713}
.num{position:absolute;right:22px;top:20px;color:#47534c;font-size:11px}
.icon{font-size:28px;color:#64ff9b;margin-bottom:55px}
.card h2{font-size:21px;margin:0 0 12px}
.card p{font-size:13px;line-height:1.6;color:#7e8a83;margin:0}
.card span{position:absolute;bottom:24px;left:28px;font-size:9px;letter-spacing:2px;color:#64ff9b}
footer{max-width:1200px;margin:auto;padding:25px 7%;border-top:1px solid #1c2922;display:flex;justify-content:space-between;color:#536058;font-size:9px;letter-spacing:2px}
@media(max-width:700px){header{padding:0 6%;height:75px}.logo small{display:none}main{padding:75px 6% 60px}h1{letter-spacing:-3px}.cards{grid-template-columns:1fr}.card{min-height:230px}.icon{margin-bottom:35px}footer{margin:0 6%;padding-left:0;padding-right:0}}

@keyframes pulse{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes gridmove{0%{transform:translateY(0)}100%{transform:translateY(70px)}}
.status i{animation:pulse 2s infinite}
.grid{animation:gridmove 12s linear infinite}
.hero{animation:fadein .7s ease-out}
@keyframes fadein{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:none}}
.card{animation:fadein .7s ease-out both}
.card:nth-child(2){animation-delay:.12s}
.card:nth-child(3){animation-delay:.24s}