:root{
  --border:#e6e8ef;
  --shadow:0 12px 36px rgba(16,24,40,.08);
  --radius:18px;
}

html {
  height: 100%;
  scroll-behavior: smooth;
}

body{
  min-height: 100%;
  background:#f6f7fb;
}

.site-header{
  position: sticky;
  top: 0;
  z-index: 1020;
  background: rgba(248,249,250,.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 6px 18px rgba(16,24,40,.06);
}

.navbar-brand{
  gap:2px;
}

.brand-title{
  font-weight: 800;
  font-size: 1.1rem;
  color:#111827;
  line-height: 1.1;
}

.brand-subtitle{
  font-size:.9rem;
  color:#6b7280;
  line-height: 1.1;
}

.page-shell{
  background:#fff;
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
  box-shadow: var(--shadow);
  max-width: 1240px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 576px){
  .page-shell{
    padding: 18px;
  }
}

.nav-link{
  border-radius: 12px;
}

.nav-link.active{
  background:#eaf2ff;
  border:1px solid #b9d3ff;
}

.footer{
  color:#6b7280;
  font-size:.95rem;
  padding: 22px 0 34px;
}

.footer a{
  text-decoration:none;
}

.footer a:hover{
  text-decoration:underline;
}

/* Мелкая косметика для карточек кейсов */
.case-badge{
  border:1px solid var(--border);
  background:#f8fafc;
  color:#111827;
}

.kv-box{
  border:1px solid var(--border);
  border-radius: 14px;
  padding: 10px 12px;
  background:#fff;
  height: 100%;
}

.kv-label{
  font-size:.82rem;
  color:#6b7280;
}

.kv-value{
  font-weight: 700;
  color:#111827;
  word-break: normal;
  overflow-wrap: anywhere;
}

/* === Layout tweaks for wide screens === */
.container-portfolio {
  max-width: 1440px;
}

@media (min-width: 1600px) {
  .container-portfolio {
    max-width: 1520px;
  }
}

/* Cards */
.page-card{
  border-radius: 18px;
}

/* Case layout */
.case-sticky{
  position: sticky;
  top: 96px;
}

@media (max-width: 991.98px) {
  .case-sticky{
    position: static;
    top: auto;
  }
}

.metric-card{
  border: 1px solid rgba(0,0,0,.08);
  background: #fff;
  border-radius: 14px;
  padding: .75rem;
}

.metric-label{
  font-size: .82rem;
  color: #6c757d;
  margin-bottom: .25rem;
}

.metric-value{
  font-weight: 600;
  line-height: 1.25;
  word-break: normal;
  overflow-wrap: normal;
}

.case-content h2{
  margin-top: 1.75rem;
}

.case-content h3{
  margin-top: 1.25rem;
}

.case-content ul{
  margin-bottom: 1rem;
}

/* Левый блок кейса: фиксируем на десктопе */
@media (min-width: 992px){
  .case-aside{
    position: sticky;
    top: calc(72px + 1rem);
  }
}

/* Не даём тексту ломаться "по буквам" */
.case-metric .metric-value{
  word-break: normal;
  overflow-wrap: break-word;
}

/* Projects cards */
.project-card{
  border-radius: 18px;
}

.metric{
  background: var(--bs-body-tertiary-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 14px;
  padding: .85rem .9rem;
}

.metric-label{
  color: var(--bs-secondary-color);
  font-size: .85rem;
  margin-bottom: .25rem;
}

.metric-value{
  font-weight: 600;
  line-height: 1.25;
  overflow-wrap: break-word;
  word-break: normal;
}

/* Compact bullet list inside metric */
.metric-list{
  margin: 0;
  padding-left: 1.1rem;
  font-size: .9rem;
  line-height: 1.25;
  font-weight: 600;
}

/* ===== Base app layout: normal page scroll ===== */
body.app-layout{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: visible;
}

body.app-layout .app-header,
body.app-layout .app-footer{
  flex: 0 0 auto;
}

body.app-layout .app-main{
  flex: 1 0 auto;
  overflow: visible;
  min-width: 0;
}

body.app-layout .app-header{
  background: var(--bs-body-bg);
  z-index: 1030;
}

body.app-layout .app-footer{
  background: var(--bs-body-bg);
  border-top: 1px solid var(--bs-border-color);
  padding-bottom: calc(0.25rem + env(safe-area-inset-bottom));
}

/* ===== Glass / metallic buttons ===== */

.btn{
  border-radius: 14px;
  transition:
    background-color .22s ease,
    border-color .22s ease,
    color .22s ease,
    box-shadow .22s ease,
    transform .18s ease,
    backdrop-filter .22s ease,
    -webkit-backdrop-filter .22s ease;
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
}

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

.btn:active{
  transform: translateY(0);
}

.btn:focus,
.btn:focus-visible{
  box-shadow:
    0 0 0 0.2rem rgba(160, 210, 255, 0.22),
    0 10px 30px rgba(15, 23, 42, 0.10);
}

/* ===== Синие кнопки ===== */
.btn-primary{
  color: #1f4f70;
  border: 1px solid rgba(180, 225, 255, 0.42);
  background:
    linear-gradient(
      180deg,
      rgba(210, 238, 255, 0.34) 0%,
      rgba(120, 190, 235, 0.34) 48%,
      rgba(76, 149, 201, 0.30) 100%
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08),
    0 8px 24px rgba(56, 139, 201, 0.18);
  text-shadow: none;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle{
  color: #163d59;
  border-color: rgba(195, 235, 255, 0.55);
  background:
    linear-gradient(
      180deg,
      rgba(220, 243, 255, 0.42) 0%,
      rgba(132, 199, 241, 0.40) 48%,
      rgba(83, 157, 210, 0.36) 100%
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.52),
    inset 0 -1px 0 rgba(255, 255, 255, 0.10),
    0 12px 28px rgba(56, 139, 201, 0.24);
}

/* Голубой outline */
.btn-outline-primary{
  color: #2f6d96;
  border: 1px solid rgba(152, 214, 255, 0.42);
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.18) 0%,
      rgba(194, 231, 255, 0.16) 52%,
      rgba(132, 199, 241, 0.12) 100%
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.48),
    0 8px 24px rgba(56, 139, 201, 0.10);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary.active,
.show > .btn-outline-primary.dropdown-toggle{
  color: #1f4f70;
  border-color: rgba(160, 220, 255, 0.56);
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.28) 0%,
      rgba(202, 235, 255, 0.24) 52%,
      rgba(138, 204, 244, 0.18) 100%
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.58),
    0 10px 26px rgba(56, 139, 201, 0.16);
}

/* ЯВНОЕ СОСТОЯНИЕ АКТИВНОЙ СТРАНИЦЫ В ШАПКЕ */
.site-header .btn-outline-primary.active,
.site-header .btn-outline-primary[aria-current="page"],
.site-header .btn-outline-primary.active:hover,
.site-header .btn-outline-primary.active:focus{
  color: #14344c;
  border-color: rgba(125, 205, 255, 0.72);
  background:
    linear-gradient(
      180deg,
      rgba(214, 240, 255, 0.68) 0%,
      rgba(150, 210, 245, 0.58) 52%,
      rgba(103, 177, 224, 0.48) 100%
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.68),
    0 12px 28px rgba(56, 139, 201, 0.22);
  font-weight: 600;
}

/* ===== Серые кнопки ===== */
.btn-outline-secondary{
  color: #4f5b68;
  border: 1px solid rgba(210, 218, 228, 0.42);
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.18) 0%,
      rgba(232, 237, 243, 0.14) 52%,
      rgba(191, 199, 209, 0.12) 100%
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.50),
    0 8px 24px rgba(100, 116, 139, 0.10);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active,
.btn-outline-secondary.active,
.show > .btn-outline-secondary.dropdown-toggle{
  color: #364150;
  border-color: rgba(218, 225, 234, 0.58);
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.26) 0%,
      rgba(236, 241, 246, 0.22) 52%,
      rgba(199, 207, 216, 0.18) 100%
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.60),
    0 10px 28px rgba(100, 116, 139, 0.16);
}

/* Немного мягче для маленьких кнопок */
.btn-sm{
  border-radius: 12px;
}

/* Dropdown в том же glass-стиле */
.dropdown-menu{
  border: 1px solid rgba(230, 232, 239, 0.72);
  background: rgba(255, 255, 255, 0.74);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  box-shadow: 0 14px 32px rgba(16, 24, 40, 0.12);
}