:root{
  --bg:#0c1116;--panel:#111925;--soft:#192333;--brand:#3fb37f;--brand2:#5dc399;
  --text:#e9eef5;--muted:#a9b4c7;--ring:0 0 0 .12rem rgba(63,179,127,.35);
  --radius:16px;--shadow:0 6px 24px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.02)
}
*,*:before,*:after{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Helvetica Neue,Arial;
  background:radial-gradient(1200px 800px at 10% -10%, #122033 0%, #0c1116 60% 100%);color:var(--text);line-height:1.6}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:min(1100px,92vw);margin-inline:auto}
.stack{display:grid;gap:clamp(.75rem,1.5vw,1.25rem)}
.grid{display:grid;gap:1rem}
.card{background:var(--panel);border:1px solid #1a2636;border-radius:var(--radius);box-shadow:var(--shadow)}
.badge{display:inline-block;padding:.25rem .6rem;border-radius:999px;background:#1e2a3c;color:var(--brand);font-weight:700;
  font-size:.72rem;border:1px solid #24344d}
header{position:sticky;top:0;z-index:50;backdrop-filter:saturate(140%) blur(8px);
  background:linear-gradient(180deg, rgba(12,17,22,.9), rgba(12,17,22,.35));border-bottom:1px solid #1a2433}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:.65rem;font-weight:700;letter-spacing:.2px}
.brand .logo{width:36px;aspect-ratio:1;border-radius:10px;background:conic-gradient(from 210deg,var(--brand),var(--brand2));
  box-shadow:0 0 0 6px rgba(63,179,127,.08)}
.brand small{display:block;color:var(--muted);font-weight:500;font-size:.78rem;letter-spacing:.1px}
.menu{display:flex;gap:.5rem;align-items:center}
.menu>li{list-style:none;position:relative}
.menu>li>a{display:inline-flex;align-items:center;gap:.5rem;padding:.55rem .8rem;border-radius:12px;color:var(--muted);font-weight:600}
.menu>li>a:hover{color:var(--text);background:#182235}
.menu>li>a:focus-visible{outline:none;box-shadow:var(--ring)}
.submenu{position:absolute;top:calc(100% + 10px);left:0;min-width:220px;padding:.5rem;border-radius:14px;background:var(--panel);
  border:1px solid #1b2636;box-shadow:var(--shadow);opacity:0;transform:translateY(-6px);pointer-events:none;transition:.18s ease}
.submenu a{display:block;padding:.6rem .7rem;border-radius:10px;color:var(--muted);font-weight:600}
.menu>li:hover .submenu,.menu>li:focus-within .submenu{opacity:1;transform:translateY(0);pointer-events:auto}
.btn{display:inline-flex;align-items:center;gap:.55rem;padding:.7rem 1rem;border-radius:12px;
  background:linear-gradient(180deg,var(--brand),var(--brand2));color:#0b141c;font-weight:800;border:0}
.hero{padding:clamp(2.5rem,4vw,4rem) 0}
.hero h1{font-size:clamp(1.8rem,3.2vw,2.6rem);line-height:1.15;margin:0}
.hero p{margin:.5rem 0 0;color:var(--muted);max-width:60ch}
.cards{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
footer{margin-top:3rem;padding:2.5rem 0;border-top:1px solid #182335;background:linear-gradient(180deg,rgba(25,35,51,.45),rgba(12,17,22,.8))}
.footer-grid{display:grid;gap:1rem;grid-template-columns:1.2fr .8fr}
@media (max-width:720px){.menu{display:none}.mobile{display:flex}.footer-grid{grid-template-columns:1fr}}
.mobile{display:none}
.main{padding:2rem 0}