/* Basic Reset */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0f1113;
  --panel:#191c20;
  --muted:#a7b0b8;
  --text:#e9eef3;
  --accent:#ff6a33;
  --accent-press:#e05524;
  --ring:#ffffff22;
}
html,body{height:100%}
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
}
.container{max-width:1100px;margin:0 auto;padding:0 20px}
a{color:inherit;text-decoration:none}
.small{font-size:.9rem;color:var(--muted)}
/* Header */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(15,17,19,.8);
  backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid #ffffff10;
}
.site-header .nav{display:flex;align-items:center;justify-content:space-between;height:56px}
.brand{font-weight:600;color:var(--muted)}
.nav-links{display:flex;gap:20px;align-items:center}
.nav-links a{opacity:.9}
.nav-links a:hover{opacity:1}
.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:10px;padding:.6rem .9rem;font-weight:600;border:1px solid #ffffff18;box-shadow:0 2px 0 #00000055;transition:.15s}
.btn:hover{transform:translateY(-1px);}
.btn:active{transform:translateY(0);}
.btn-primary{background:var(--accent);border-color:transparent;color:#111}
.btn-primary:active{background:var(--accent-press)}
.btn-lg{padding:.8rem 1.1rem;border-radius:12px}
.nav-toggle{display:none;flex-direction:column;gap:4px;background:transparent;border:0}
.nav-toggle span{width:22px;height:2px;background:#fff;display:block}

/* Hero */
.hero{padding:80px 0 40px;background:linear-gradient(180deg,#121418,transparent)}
.hero-inner{text-align:center}
.hero h1{font-size:clamp(28px,5vw,44px);letter-spacing:.02em;font-weight:800;margin-bottom:8px}
.subtitle{color:var(--muted);margin-bottom:18px}

/* Sections */
.section{padding:28px 0}
h2{font-size:1.25rem;margin-bottom:12px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:8px}
.card{background:var(--panel);border:1px solid #ffffff10;border-radius:16px;padding:22px;display:flex;flex-direction:column;align-items:flex-start;gap:10px;box-shadow:0 2px 0 #00000055}
.card .icon{width:28px;height:28px;color:#cfd6dd}
.card h3{text-transform:uppercase;font-size:.95rem;letter-spacing:.06em}

/* About/Contact grid */
.grid-2{display:grid;grid-template-columns:1.1fr .9fr;gap:28px}
label{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
input,textarea{background:#0c0f12;border:1px solid #2a2f35;color:var(--text);border-radius:10px;padding:.7rem .8rem;outline:none}
input:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--ring)}
.hint{margin-top:10px}

/* Footer */
.site-footer{border-top:1px solid #ffffff10;margin-top:30px}
.footer-inner{padding:18px 0;text-align:center;color:var(--muted)}

/* Responsive */
@media (max-width:900px){
  .cards{grid-template-columns:1fr 1fr}
  .grid-2{grid-template-columns:1fr}
}
@media (max-width:640px){
  .cards{grid-template-columns:1fr}
  .nav-toggle{display:flex}
  .nav-links{display:none;position:absolute;right:16px;top:56px;background:var(--panel);border:1px solid #ffffff10;border-radius:12px;padding:10px;flex-direction:column;gap:10px;box-shadow:0 10px 30px #00000066}
  .nav-links.open{display:flex}
}