:root{
  --bg:#0b1b33; --panel:#0f2446; --text:#e6f0ff; --muted:#a9b7d1;
  --blue:#4aa3ff; --blue-700:#2a73d6; --accent:#c26a2c;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif; color:var(--text); background:radial-gradient(900px 500px at 20% 0%, #122a52 0%, var(--bg) 60%)}
a{color:var(--blue); text-decoration:none}

/* Header */
.site-header{display:flex; align-items:center; justify-content:space-between; padding:18px 24px; background:rgba(10,22,44,.6); backdrop-filter:blur(6px); position:sticky; top:0; z-index:10}
.logo{display:flex; align-items:center; gap:.75rem}
.site-nav ul{list-style:none; display:flex; gap:1rem; margin:0; padding:0}
.site-nav a{color:var(--text); padding:.5rem .75rem; border-radius:.5rem}
.site-nav a:hover{background:#0e213f}

main{max-width:1050px; margin:0 auto; padding:1rem}

/* Hero */
.hero{display:grid; grid-template-columns: 1.25fr 1fr; gap:2rem; align-items:center; padding:2.5rem 0}
.hero h1{font-size:clamp(2rem,4.6vw,3rem); line-height:1.15; margin:0 0 .75rem}
.hero p{color:var(--muted); max-width:640px}
.btn{display:inline-block; background:var(--blue); color:#0a1830; font-weight:700; border-radius:.5rem; padding:.65rem 1.1rem; box-shadow:0 8px 18px rgba(74,163,255,.25)}
.btn:hover{background:var(--blue-700); color:#fff}
.hero-actions{display:flex; gap:.75rem; margin-top:1rem}

.hero-art{background:var(--panel); border-radius:.75rem; padding:1rem; height:240px; display:flex; align-items:center; justify-content:center; box-shadow:0 16px 30px rgba(0,0,0,.25)}
.art-icon{display:grid; grid-auto-flow:column; gap:.8rem}
.badge{width:44px; height:44px; border-radius:.75rem; display:flex; align-items:center; justify-content:center; background:#132b50; color:var(--blue)}

/* Feature row */
.features{padding:1rem 0}
.features .row{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem}
.feature{display:flex; gap:.6rem; background:var(--panel); border:1px solid #142e57; border-radius:.75rem; padding:.9rem}
.feature .icon{width:28px; height:28px; border-radius:.5rem; background:#12305a; display:flex; align-items:center; justify-content:center; color:var(--blue)}
.feature h3{margin:.1rem 0; font-size:1rem}
.feature p{color:var(--muted); margin:.25rem 0 0; font-size:.95rem}

/* About */
.about{margin-top:1.5rem; background:var(--panel); border:1px solid #142e57; border-radius:.75rem; padding:1.2rem}
.about h2{margin-top:0}
.about .cols{display:grid; grid-template-columns:repeat(2,1fr); gap:1rem}
.about ul{margin:.5rem 0 0 1rem}

/* Footer */
.site-footer{margin-top:2rem; padding:1.5rem 1rem; background:#0a1a32}
.footer-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem}

/* Responsive */
@media(max-width:900px){
  .hero{grid-template-columns:1fr}
}

.logo img{height:72px; display:inline-block; vertical-align:middle;}

@media(max-width:900px){ .logo img{height:60px;} }