:root{
  --brand-blue: #0d6efd;        /* основной синий */
  --brand-blue-dark: #0b5ed7;   /* темный тон */
  --accent: #17a2b8;            /* акцент (бирюзовый) */
  --muted: #6c757d;
  --nav-height: 70px;
}

/* --- layout / sticky footer --- */
html, body {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding-top: var(--nav-height); /* чтобы контент не прятался под fixed navbar */
  margin: 0;
  background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
  color: #0b2140;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}
main {
  flex: 1 0 auto; /* main занимает свободное пространство, footer прижат к низу */
}

/* --- navbar --- */
.navbar-custom{
  background: linear-gradient(90deg, rgba(13,110,253,0.08), rgba(23,162,184,0.03));
  backdrop-filter: blur(4px);
  height: var(--nav-height);
}

/* --- hero / profile --- */
.hero {
  min-height: 70vh;
  display: flex;
  align-items: center;
  gap: 2rem;
}

.card-profile {
  border: none;
  box-shadow: 0 8px 30px rgba(13,38,77,0.06);
  border-radius: 12px;
}

.btn-primary-custom{
  background: linear-gradient(90deg, var(--brand-blue), var(--brand-blue-dark));
  border: none;
  box-shadow: 0 6px 18px rgba(13,110,253,0.18);
  color: #fff;
}

/* small rounded badges used for skills/tags */
.skill-badge{
	  display: inline-block;
  background: rgba(13,110,253,0.08);
  color: var(--brand-blue-dark);
  border-radius: 999px;
  padding: 6px 10px;
  font-weight: 600;
  font-size: 0.9rem;
  /*margin-right: 6px;*/
    margin: 0 8px 8px 0;
}

/*.skill-badge {
  display: inline-block; /* чтобы можно было задавать отступы и перенос */
  /*margin: 0 8px 8px 0;  /* справа и снизу отступ */
 /* padding: 4px 8px;
  background-color: #007bff;
  color: white;
  border-radius: 4px;
  font-size: 14px;
}
*/


/* cards (portfolio, posts) */
.card {
  border-radius: 12px;
  overflow: hidden;
}

/* footer */
footer{
  padding: 2rem 0;
  color: var(--muted);
  background: transparent;
}

/* small helpers */
.text-muted { color: var(--muted) !important; }

/* post styles */
.post-header img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(13,38,77,0.06);
}

/* responsive tweaks */
@media (max-width: 767px){
  .hero { padding-top: 1.5rem; min-height: 60vh; text-align: center; }
  .hero .col-md-4 { margin: 0 auto; }
}