
:root{
  --bg-dark:#0d0d0d; --bg-mid:#1b1b1b;
  --text:#eaeaea; --silver:#c0c0c0;
  --blue:#007aff; --orange:#ff7a00;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:radial-gradient(circle at 50% -20%, #222, var(--bg-dark));color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif}
a{color:var(--blue)}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:12px 18px;background:linear-gradient(180deg,#121212,#0b0b0b);position:sticky;top:0;z-index:50;border-bottom:1px solid rgba(255,255,255,.06)}
.brand{display:flex;align-items:center;gap:10px}
.brand .logo{width:28px;height:28px;border-radius:8px}
.brand-text{font-weight:600;color:#bdbdbd}
.nav-link{margin-left:14px;text-decoration:none;color:#bfbfbf}
.nav-link:hover{color:#fff}
.hero{padding:12vh 2rem 8vh;text-align:center;background:linear-gradient(180deg,#0d0d0d,#1a1a1a);position:relative;overflow:hidden}
.emblem{position:relative;width:220px;height:220px;margin:0 auto 18px;filter:drop-shadow(0 10px 40px rgba(0,0,0,.6))}
.core{position:absolute;inset:30%;border-radius:50%;background:radial-gradient(circle,#1e1e1e,#0b0b0b);border:1px solid rgba(255,255,255,.1)}
.ring{position:absolute;inset:0;border-radius:50%;mix-blend-mode:screen;filter:blur(12px);opacity:.8;animation:rotate 14s linear infinite}
.ring-blue{background:conic-gradient(from 0deg,#0000 0 40%, rgba(0,122,255,.85) 50%, #0000 60% 100%)}
.ring-orange{background:conic-gradient(from 180deg,#0000 0 40%, rgba(255,122,0,.75) 50%, #0000 60% 100%);animation-direction:reverse}
@keyframes rotate{to{transform:rotate(360deg)}}
.motto{font-size:clamp(2.2rem,4vw,4rem);color:var(--silver);letter-spacing:.5px;margin:0 0 10px}
.sub{color:#bdbdbd;margin:0 auto 24px;max-width:720px}
.cta-buttons{display:flex;justify-content:center;flex-wrap:wrap;gap:12px}
.btn{display:inline-block;padding:12px 18px;border-radius:10px;text-decoration:none;font-weight:700;letter-spacing:.2px;transition:.25s}
.btn.primary{color:#fff;background:linear-gradient(90deg,var(--blue),var(--orange))}
.btn.secondary{color:#fff;background:linear-gradient(90deg,#444,#777)}
.btn:hover{transform:translateY(-1px);filter:brightness(1.08)}
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;padding:48px 18px;background:#111}
.feature{padding:18px;border-radius:14px;background:linear-gradient(180deg,#151515,#0e0e0e);border:1px solid rgba(255,255,255,.06);text-align:center;color:#cfcfcf}
.proof{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;padding:40px 18px}
.card{background:linear-gradient(180deg,#151515,#0e0e0e);border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:18px}
.card h3{margin-top:0;color:#ddd}
.card ul{margin:0 0 0 18px}
.cta-final{padding:64px 18px;text-align:center;background:linear-gradient(180deg,#121212,#101010)}
.cta-final h2{color:#dcdcdc;font-size:clamp(1.8rem,4vw,2.6rem);margin:0 0 12px}
.btn.big{padding:14px 22px;font-size:1.05rem;border-radius:12px}
.alt{color:#9c9c9c}
footer{text-align:center;padding:24px 12px;color:#8a8a8a;background:#0d0d0d;border-top:1px solid rgba(255,255,255,.06)}
@media (max-width:768px){.brand-text{display:none}}
