:root{
  /* Primary colors extracted from your favicon */
  --bg: #1a0e0e;      /* deep dark (primary background) */
  --accent: #2b84b7;  /* teal/blue accent */
  --muted: #afa49f;   /* neutral muted (derived) */
  --surface: #241416; /* slightly lighter surface */
  --text: #faf6ea;    /* warm off-white */
  --glass: rgba(255,255,255,0.03);
  --radius: 10px;
  --max-width: 1100px;
  --nav-height: 72px;
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* Reset-ish */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background: linear-gradient(180deg, var(--bg) 0%, #180909 100%);
  color: var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
}

/* Header */
.site-header{
  position:sticky;
  top:0;
  z-index:60;
  backdrop-filter: blur(6px);
  background: linear-gradient(180deg, rgba(26,14,14,0.85), rgba(26,14,14,0.6));
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.header-inner{
  max-width: var(--max-width);
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding: 12px 20px;
  height: var(--nav-height);
}

/* Brand */
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:var(--text);
}
.brand-icon{
  width:44px;
  height:44px;
  border-radius:8px;
  box-shadow: 0 4px 18px rgba(43,132,183,0.12);
  background: linear-gradient(135deg, rgba(43,132,183,0.10), rgba(43,132,183,0.03));
}
.brand-text{
  font-weight:700;
  font-size:18px;
  letter-spacing:0.4px;
}

/* Desktop nav */
.nav-desktop{
  display:flex;
  gap:16px;
  align-items:center;
}
.nav-link{
  color:var(--text);
  text-decoration:none;
  padding:8px 10px;
  border-radius:8px;
  font-weight:600;
  font-size:14px;
  opacity:0.95;
}
.nav-link:hover, .nav-link:focus{
  background: var(--glass);
  outline: none;
}

/* Actions */
.header-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

/* Buttons */
.btn-primary, .btn-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 14px;
  background: linear-gradient(180deg, var(--accent), #196a95);
  color: white;
  border-radius: 10px;
  text-decoration:none;
  font-weight:600;
  font-size:14px;
  box-shadow: 0 6px 22px rgba(43,132,183,0.16);
  border: none;
}
.btn-primary.full{width:100%}
.btn-cta{
  background:transparent;
  border:1px solid rgba(255,255,255,0.06);
  color:var(--text);
}

/* Hamburger */
.hamburger{
  display:inline-grid;
  place-items:center;
  width:44px;
  height:44px;
  border-radius:8px;
  background:transparent;
  border:1px solid rgba(255,255,255,0.03);
  color:var(--text);
  cursor:pointer;
}
.hamburger:focus{outline:2px solid rgba(43,132,183,0.25)}

/* Mobile menu (hidden on desktop) */
.mobile-menu{
  position:absolute; 
  min-width:220px;
  max-width:320px;
  border-radius:12px;
  padding:10px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.6);
  background: linear-gradient(180deg, rgba(36,20,20,0.98), rgba(30,12,12,0.98));
  border:1px solid rgba(255,255,255,0.03);
  display:flex;
  flex-direction:column;
  gap:8px;
  z-index:65;
  transform-origin: top left;
  animation: pop 140ms cubic-bezier(.2,.8,.2,1);
}
@keyframes pop{ from{transform: translateY(-6px) scale(.98); opacity:0} to{transform:none; opacity:1} }

.mobile-menu{display:none !important}
.hamburger{display:none}

.mobile-link{
  display:block;
  padding:10px;
  text-decoration:none;
  color:var(--text);
  border-radius:8px;
  font-weight:600;
}
.mobile-link:focus, .mobile-link:hover{
  background: var(--glass);
}
.mobile-cta{padding-top:6px; border-top:1px solid rgba(255,255,255,0.02)}

/* Hero to show page look */
.hero{
  padding: 96px 20px;
  text-align:center;
}
.hero-inner{max-width:920px;margin:0 auto}
.hero h1{font-size:48px;margin:0 0 10px}
.hero p{font-size:18px;margin:0 0 22px;color:var(--muted)}

.site-footer{
  background: var(--surface);
  border-top: 1px solid rgba(255,255,255,0.04);
  padding: 40px 20px;
  text-align:center;
  color: var(--muted);
}
.footer-inner{
  max-width: var(--max-width);
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
}
.footer-brand{
  display:flex;
  align-items:center;
  gap:10px;
}
.footer-icon{
  width:36px;
  height:36px;
  border-radius:8px;
  background: rgba(255,255,255,0.04);
}
.footer-title{
  font-weight:700;
  color: var(--text);
}
.footer-links{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:14px;
}
.footer-links a{
  text-decoration:none;
  color: var(--muted);
  font-weight:500;
}
.footer-links a:hover,
.footer-links a:focus{
  color: var(--accent);
}
.footer-copy{
  font-size:13px;
  color: var(--muted);
  opacity:0.8;
}

/* Responsive */
@media (max-width: 800px) {
  .nav-desktop{display:none}
  .brand-text{display:none}
  .btn-primary{display:none}
}