:root {
  --bg:#0d0e11;
  --bg-alt:#16191f;
  --border:#20262d;
  --text:#eef0f2;
  --text-dim:#a0a8b2;
  --accent:#e21818;
  --accent-hover:#ff3a3a;
  --radius-sm:6px;
  --radius-md:12px;
  --transition:140ms ease;
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
}

* { box-sizing:border-box; -webkit-font-smoothing:antialiased; }

html,body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  line-height:1.5;
}

a { color:var(--accent); text-decoration:none; }
a:hover { color:var(--accent-hover); }

.site-header {
  position:sticky;
  top:0;
  background:rgba(13,14,17,.9);
  backdrop-filter:blur(10px);
  padding:.75rem 1rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  border-bottom:1px solid var(--border);
  z-index:40;
}

.brand {
  display:flex;
  align-items:center;
  gap:.5rem;
}

.brand-logo {
  width:34px;
  height:auto;
  display:block;
}

.brand-name {
  font-size:.9rem;
  font-weight:600;
  letter-spacing:.5px;
}

.main-nav {
  display:flex;
  gap:.65rem;
}

.main-nav a {
  font-size:.75rem;
  font-weight:500;
  color:var(--text-dim);
  padding:.35rem .55rem;
  border-radius:var(--radius-sm);
  border:1px solid transparent;
  transition:background var(--transition), color var(--transition), border-color var(--transition);
}

.main-nav a:hover {
  background:var(--bg-alt);
  color:var(--text);
  border-color:var(--border);
}

.hero {
  padding:3.2rem 1.2rem 2.2rem;
  text-align:center;
}


.lead {
  font-size:.9rem;
  color:var(--text-dim);
  margin:0 auto 1.8rem;
  max-width:26rem;
}

.hero-actions {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.75rem;
}

.btn {
  --btn-bg:var(--bg-alt);
  --btn-border:var(--border);
  padding:.7rem 1.05rem;
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.5px;
  border-radius:var(--radius-md);
  border:1px solid var(--btn-border);
  background:var(--btn-bg);
  color:var(--text);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:105px;
  transition:background var(--transition), border-color var(--transition), transform var(--transition);
}

.btn.primary {
  --btn-bg:var(--accent);
  --btn-border:var(--accent);
  color: #000000;
}

.btn.outline {
  --btn-bg:transparent;
  color:var(--text-dim);
}

.btn:hover {
  transform:translateY(-2px);
  
}

.btn.primary:hover { background:var(--accent-hover); border-color:var(--accent-hover); }
.btn.outline:hover { color:var(--text); border-color:var(--accent); }

.highlights {
  display:grid;
  gap:1rem;
  padding:0 1.2rem 2.4rem;
}

.card {
  background:#13161a;
  border:1px solid var(--border);
  border-radius:16px;
  padding:1.1rem 1rem 1.25rem;
  display:flex;
  flex-direction:column;
  gap:.55rem;
  transition:border-color var(--transition), transform var(--transition);
}

.card h2 {
  margin:0;
  font-size:.95rem;
  font-weight:600;
  letter-spacing:.4px;
}

.card p {
  margin:0;
  font-size:.78rem;
  line-height:1.35;
  color:var(--text-dim);
}

.card:hover {
  transform:translateY(-3px);
  border-color:#2a3139;
}

.social-contact {
  padding:0 1.2rem 3rem;
  text-align:center;
}

.social-contact h2 {
  font-size:1.15rem;
  margin:0 0 1.1rem;
  font-weight:600;
  letter-spacing:.4px;
}

.social-row {
  display:flex;
  justify-content:center;
  gap:.65rem;
  flex-wrap:wrap;
  margin-bottom:1rem;
}

.social-row a {
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  background:#13161a;
  border:1px solid var(--border);
  border-radius:50%;
  transition:background var(--transition), border-color var(--transition), transform var(--transition);
}

.social-row a img {
  width:22px;
  height:22px;
  display:block;
}

.social-row a:hover {
  background:var(--accent);
  border-color:var(--accent);
  transform:translateY(-2px);
}

.contact-mail {
  margin:0;
  font-size:.75rem;
  color:var(--text-dim);
}

.contact-mail a { color:var(--text); }
.contact-mail a:hover { color:var(--accent-hover); }

.site-footer {
  border-top:1px solid var(--border);
  padding:1rem 1.2rem 1.4rem;
  text-align:center;
  font-size:.65rem;
  color:var(--text-dim);
  letter-spacing:.5px;
}

/* Title Styles */
.first-level-title {
  font-size: 1.7rem;
  margin: 0;
  font-weight: 500;
  color: var(--text-dim);
  letter-spacing: 5px;
}

.second-level-title {
  font-size: 1.9rem;
  margin: 0;
  padding-top: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #aa1313;
}

.third-level-title {
  font-size: 1.5rem;
  margin: 0;
  font-weight: 500;
  color: var(--text-dim);
  margin-bottom: 1.3rem;
  letter-spacing: 2px;
}