/* ============ Design Tokens ============ */
:root{
  --bg:#0b0c0d;
  --surface:#111214;
  --card:#17181a;
  --stroke:#232528;
  --text:#e7e9ea;
  --muted:#9aa0a6;
  --brand:#2fbf71;
  --link:#8ab4f8;
  --btn:#1f6feb;
  --btnText:#ffffff;
  --radius:16px;
  --radius-lg:18px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}

/* ============ Reset & Base ============ */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--text);
  font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block}

/* ============ Layout ============ */
.container{max-width:1100px;margin:0 auto;padding:24px 16px}
.section{padding:24px 0}

/* ============ Header ============ */
.header{
  position:sticky;top:0;z-index:100;
  backdrop-filter:saturate(160%) blur(8px);
  background:rgba(11,12,13,.85);
  border-bottom:1px solid var(--stroke);
}
.nav{display:flex;align-items:center;gap:20px;height:64px;}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--text);}
.logo img{height:32px;width:auto;border-radius:8px}
.navlinks{margin-left:auto;display:flex;gap:8px;align-items:center;}
.navlinks a{
  color:var(--text);
  padding:10px 14px;
  border-radius:999px;
  text-decoration:none;
  opacity:.9;
}
.navlinks a:hover{background:var(--card)}
.navlinks a.active{background:#0d2342;border:1px solid #12345b;}
.actions{display:flex;gap:10px;margin-left:16px;}
.badge-mail,.badge-call{
  padding:8px 12px;
  border-radius:999px;
  font-weight:600;
  border:1px solid #1d3557;
  background:#0d2342;
  color:#cfe2ff;
}
.badge-mail{border-color:#2b3a52;background:#0e233f;color:#b9d6ff;}
.badge-mail:hover,.badge-call:hover{filter:brightness(1.1);text-decoration:none}

/* ============ Footer ============ */
.footer{border-top:1px solid var(--stroke);background:#111214;color:var(--muted);}
.footer .container{padding:20px 16px;text-align:center}

/* ============ Typography ============ */
h1,h2,h3{margin:0 0 10px}
h1{font-size:32px}
h2{font-size:24px}
.lead{color:var(--muted);font-size:18px}

/* ============ Buttons ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:10px;height:44px;padding:0 18px;
  border-radius:999px;border:1px solid transparent;
  font-weight:700;cursor:pointer;transition:.15s ease;
}
.btn-primary{background:var(--btn);color:var(--btnText);}
.btn-primary:hover{filter:brightness(1.1);}
.btn-outline{background:transparent;color:var(--text);border:1px solid var(--stroke);}
.btn-outline:hover{background:#0f1113;}

/* ============ Cards ============ */
.card{
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius:var(--radius-lg);
  padding:20px;
  box-shadow:var(--shadow);
  margin-bottom:20px;
}

/* ============ Forms ============ */
.form{
  max-width:500px;margin:0 auto;
  background:var(--surface);
  border:1px solid var(--stroke);
  border-radius:var(--radius-lg);
  padding:24px;
  box-shadow:var(--shadow);
}
.input{
  width:100%;height:44px;
  border-radius:12px;
  border:1px solid var(--stroke);
  background:#0f1113;
  color:var(--text);
  padding:0 12px;
  margin-top:4px;
}
.input:focus{border-color:#1f6feb;outline:none;}

/* ============ Lists ============ */
.list{padding-left:20px;margin:0;}