:root{
  --bg:#0e0f11;
  --panel:#121316;
  --text:#e7e9ee;
  --muted:#a9b0bd;
  --accent:#9aa4b2;
  --link:#dfe3ea;
  --ring:rgba(255,255,255,.12);
  --maxw:1200px;
}

/* Base */
html,body{height:100%}
body{
  margin:0;
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,"Apple Color Emoji","Segoe UI Emoji";
  background:radial-gradient(1200px 800px at 50% -200px,#181a1f 0%,var(--bg) 55%);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  letter-spacing:.2px;
}

/* Layout Helpers */
.wrap{max-width:var(--maxw);margin-inline:auto;padding:.75rem 1rem}

/* Header / Nav */
.site-header{position:sticky;top:0;z-index:50;backdrop-filter:blur(8px);background:color-mix(in srgb,var(--panel) 86%, transparent);border-bottom:1px solid rgba(255,255,255,.06)}
nav{display:flex;align-items:center;gap:.75rem}
.brand{margin-right:auto;font-weight:700;letter-spacing:.6px;font-size:1rem;color:var(--muted);text-transform:uppercase}
.nav-list{display:flex;list-style:none;gap:.5rem;padding:0;margin:0}
.nav-list a{display:inline-block;padding:.5rem .85rem;text-decoration:none;color:var(--link);border-radius:.6rem;border:1px solid transparent;transition:border-color .15s ease,background-color .15s ease,color .15s ease,transform .08s ease}
.nav-list a:hover{border-color:var(--ring);background:rgba(255,255,255,.03)}
.nav-list a:active{transform:translateY(1px)}

/* Main / Banner */
main{padding:2rem 1rem 4rem}
.hero{max-width:var(--maxw);margin:2.5rem auto 0;display:grid;place-items:center}
.hero img{width:min(1100px,95vw);height:auto;display:block;border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.04);outline:1px solid rgba(255,255,255,.04)}

/* Footer */
footer{border-top:1px solid rgba(255,255,255,.06);background:#0f1115}
footer .wrap{font-size:.9rem;color:var(--muted);display:flex;justify-content:space-between;align-items:center;gap:1rem}

/* Utility */
.container{max-width:var(--maxw);margin-inline:auto;padding:2rem 1rem}
.card{background:var(--panel);border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:1rem 1.25rem;box-shadow:0 6px 18px rgba(0,0,0,.28)}

/* Forms */
input,textarea,select,button{font:inherit;color:inherit}
button{background:#17191e;border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:.6rem .9rem;cursor:pointer}
button:hover{border-color:var(--ring);background:rgba(255,255,255,.04)}

/* Responsive */
@media (max-width:560px){
  .nav-list a{padding:.45rem .7rem;font-size:.95rem}
  .brand{display:none}
  main{padding-top:1.25rem}
}