:root{--bg:#070b18;--card:#111833;--line:#222d57;--text:#e8ecf8;--muted:#9aa6cc;--a:#4f8cff;--b:#8a5cff;--grad:linear-gradient(135deg,var(--a),var(--b))}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--bg);color:var(--text);line-height:1.6;overflow-x:hidden}
a{color:inherit}

.nav{display:flex;justify-content:space-between;align-items:center;padding:1rem 5%;position:sticky;top:0;z-index:10;background:#070b18b3;backdrop-filter:blur(12px);border-bottom:1px solid #ffffff10}
.nav nav{display:flex;gap:1.5rem;align-items:center}
.nav nav a{text-decoration:none;color:var(--muted);transition:color .2s}
.nav nav a:hover{color:#fff}
.logo{font-weight:800;font-size:1.4rem;text-decoration:none;letter-spacing:-.02em}
.logo span{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

.btn{display:inline-block;background:var(--grad);color:#fff!important;padding:.95rem 2rem;border-radius:999px;text-decoration:none;font-weight:600;box-shadow:0 8px 30px #4f8cff40;transition:transform .2s,box-shadow .2s}
.btn:hover{transform:translateY(-3px);box-shadow:0 12px 40px #8a5cff60}
.btn.small{padding:.45rem 1.2rem;box-shadow:none}

.hero{text-align:center;padding:9rem 5% 6rem;background:radial-gradient(ellipse 70% 60% at 50% 0,#2a449a66,transparent 70%),radial-gradient(circle at 85% 30%,#8a5cff2a,transparent 40%)}
.badge{display:inline-block;border:1px solid #4f8cff80;background:#4f8cff18;color:#8fb4ff;padding:.25rem 1rem;border-radius:999px;font-size:.85rem;margin-bottom:1.5rem}
h1{font-size:clamp(2.6rem,8vw,5.2rem);line-height:1.05;letter-spacing:-.03em;margin-bottom:1.5rem}
h1 span{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{max-width:660px;margin:0 auto 2.5rem;color:var(--muted);font-size:1.25rem}

section{padding:5rem 5%}
h2{text-align:center;font-size:clamp(1.8rem,4vw,2.6rem);letter-spacing:-.02em;margin-bottom:1.5rem}

.cat{max-width:1100px;margin:3rem auto 1.2rem;color:#8fb4ff;font-size:.95rem;text-transform:uppercase;letter-spacing:.12em;display:flex;align-items:center;gap:1rem}
.cat::after{content:"";flex:1;height:1px;background:var(--line)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.2rem;max-width:1100px;margin:auto}
article{background:linear-gradient(180deg,#151d3d,var(--card));border:1px solid var(--line);border-radius:18px;padding:1.5rem;transition:transform .25s,border-color .25s,box-shadow .25s}
article:hover{transform:translateY(-5px);border-color:var(--a);box-shadow:0 14px 40px #4f8cff25}
article h3{margin-bottom:.5rem;font-size:1.1rem}
article p{color:var(--muted);font-size:.95rem}
.more{text-align:center;color:var(--muted);margin-top:3rem}

.contact{text-align:center;max-width:800px;margin:2rem auto 4rem;border:1px solid var(--line);border-radius:28px;background:radial-gradient(circle at 50% 0,#4f8cff22,transparent 70%),var(--card)}
.contact p{margin:0 auto 2rem;color:var(--muted);max-width:520px}

footer{text-align:center;padding:2rem;color:#6f7aa3;font-size:.9rem;border-top:1px solid #ffffff10}
footer a{text-decoration:none}
footer a:hover{color:#fff}

@media(max-width:600px){.hero{padding:6rem 5% 4rem}section{padding:3rem 5%}}