/* ── Fonts ──────────────────────────────────────────── */
@font-face {
  font-family: 'Lazurski';
  src: url('assets/fonts/lazurski_regular.otf') format('opentype'),
       url('assets/fonts/lazurski_regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Lazurski';
  src: url('assets/fonts/lazurski_bold.otf') format('opentype'),
       url('assets/fonts/lazurski_bold.ttf') format('truetype');
  font-weight: 700 900;
  font-style: normal;
  font-display: swap;
}

/* ── Reset & tokens ─────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg:       #23292b;
  --card-bg:  #1c2224;
  --border:   #3f4c55;
  --accent:   #00aeff;
  --radius:   20px;
  --gap:      20px;
  --pad-x:    40px;
  --fs-base:  18px;
  --fs-lg:    22px;
  --fs-xl:    24px;
}

body {
  background: var(--bg);
  font-family: 'Lazurski', Georgia, serif;
  color: #fff;
  line-height: 1.5;
  font-size: var(--fs-base);
  -webkit-font-smoothing: antialiased;
}

.content {
  animation: fadeIn 0.3s ease;
}
.content.fade-out {
  opacity: 0;
  transition: opacity 0.25s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

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

.page {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--pad-x) 80px;
}

/* ── Hero ───────────────────────────────────────────── */
.hero {
  display: flex;
  gap: 0;
  padding: 10px 0 58px;
  align-items: flex-start;
}

.hero-left {
  flex: 0 0 195px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.photo-wrap {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}
.photo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-name {
  font-size: var(--fs-lg);
  font-weight: 900;
  line-height: 1.2;
  white-space: nowrap;
}

.hero-contacts {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 17px;
}

/* Right column: speech bubble */
.hero-right {
  flex: 1;
  position: relative;
  border: none;
  border-radius: 0;
  display: flex;
  align-items: flex-start;
  margin-top: 10px;
  overflow: visible;
}
.hero-right::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: -35px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1119' height='315' viewBox='0 0 1119 315' fill='none'%3E%3Cpath d='M190.944 0.5H1038.82C1057.7 0.5 1071.8 0.50102 1082.65 1.95996C1093.49 3.41697 1101.01 6.31986 1106.76 12.0693C1112.5 17.8188 1115.41 25.3387 1116.86 36.1758C1118.32 47.0273 1118.32 61.1297 1118.32 80V235C1118.32 253.87 1118.32 267.973 1116.86 278.824C1115.41 289.661 1112.5 297.181 1106.76 302.931C1101.01 308.68 1093.49 311.583 1082.65 313.04C1071.8 314.499 1057.7 314.5 1038.82 314.5H200.733C181.863 314.5 167.76 314.499 156.909 313.04C146.072 311.583 138.552 308.68 132.802 302.931C127.053 297.181 124.15 289.661 122.693 278.824C121.234 267.973 121.233 253.87 121.233 235V210.879C121.233 197.724 121.233 187.818 120.365 179.929C119.495 172.028 117.75 166.103 114.228 160.922C110.706 155.741 105.839 151.938 98.813 148.222C91.7972 144.511 82.5847 140.867 70.353 136.026L23.0444 117.305C15.2151 114.206 9.37197 111.895 5.56299 110.039C3.65451 109.109 2.29419 108.311 1.45557 107.607C0.590891 106.882 0.437416 106.393 0.520996 106.058C0.60472 105.723 0.969981 105.363 2.07471 105.129C3.14589 104.902 4.72173 104.838 6.84326 104.915C11.0774 105.069 17.3214 105.777 25.688 106.726L58.7856 110.479C69.326 111.675 77.2602 112.574 83.6343 112.798C90.0137 113.022 94.8725 112.572 99.2593 111.044C107.795 108.07 115.091 102.327 119.985 94.7285C122.5 90.823 124.078 86.2051 125.358 79.9512C126.637 73.7028 127.625 65.7799 128.938 55.2539C130.124 45.7425 131.01 38.6353 132.14 33.001C133.269 27.3724 134.636 23.2488 136.762 19.6992C140.959 12.6941 147.224 7.16201 154.695 3.86426C158.48 2.19328 162.741 1.3485 168.466 0.924805C174.197 0.500697 181.359 0.5 190.944 0.5Z' stroke='%2300AEFF'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  min-height: 315px;
  pointer-events: none;
  z-index: 0;
}
.hero-right::after { display: none; }
.hero-right-bg { display: none; }
.hero-bio {
  position: relative;
  z-index: 1;
  padding: 38px 38px 38px calc(14% - 7px);
  font-size: 20px;
  font-weight: 400;
  line-height: normal;
}
.hero-bio p + p { margin-top: 1.1em; }

/* ── Navigation ─────────────────────────────────────── */
.nav-wrap {
  display: flex;
  justify-content: center;
  padding-top: 30px;
  margin-bottom: 20px;
}
.nav {
  position: relative;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.nav-pill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: var(--card-bg);
  border-radius: var(--radius);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  z-index: 0;
}
.nav-item {
  position: relative;
  z-index: 1;
  cursor: pointer;
  white-space: nowrap;
  padding: 0 30px;
  height: 50px;
  display: flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
}
.nav-item:hover { color: var(--accent); text-decoration: none; }
.nav-item.active { color: #fff; }

.online-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: #00A846;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: -2px;
  animation: pulse 2.5s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.2; }
}

/* ── Cards ───────────────────────────────────────────── */
.works-section {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}
.cards-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
}

.card {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 30px;
  display: flex;
  flex-direction: column;
}

.card-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 28px;
}
.card-logo {
  width: 51px;
  height: 51px;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
}
.card-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.card-meta { flex: 1; }
.card-company {
  font-size: var(--fs-xl);
  font-weight: 900;
  line-height: 1.2;
}
.card-role {
  font-size: var(--fs-base);
  font-weight: 900;
  margin-top: 2px;
}
.card-period {
  font-size: var(--fs-base);
  white-space: nowrap;
  flex-shrink: 0;
  opacity: 0.85;
  display: flex;
  align-items: center;
  gap: 3px;
  line-height: 1;
}

.card-tasks {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--fs-base);
}

.card-link {
  display: inline-block;
  margin-top: 20px;
  font-size: var(--fs-base);
  color: var(--accent);
}

/* ── Portfolio ───────────────────────────────────────── */
.portfolio-section {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 40px;
  padding: 40px 0 100px 0;
}
.portfolio-img {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}
.portfolio-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Separator ───────────────────────────────────────── */
.separator {
  height: 1px;
  background: var(--border);
  margin-bottom: 40px;
}

/* ── Recommendations ─────────────────────────────────── */
.recommendations {
  max-width: 836px;
  margin: 0 auto;
}
.recommendations-title {
  text-align: center;
  font-size: var(--fs-xl);
  font-weight: 900;
  margin-bottom: 32px;
}
.recommendations-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px 16px;
}
.rec-item { font-size: var(--fs-base); }
.rec-name  { display: block; font-weight: 400; }
.rec-role  { display: block; font-size: 15px; opacity: 0.6; margin-top: 3px; }

/* ── Tablet ≤1100px ──────────────────────────────────── */
@media (max-width: 1100px) {
  :root {
    --pad-x:  24px;
    --fs-base: 16px;
    --fs-lg:   20px;
    --fs-xl:   22px;
  }
  .portfolio-img { width: 120px; height: 120px; }
  .portfolio-section { gap: 28px; }
}

/* ── Bubble → bordered box ≤1400px ───────────────────── */
@media (max-width: 1400px) {
  .hero {
    min-height: 0;
    padding: 32px 0 40px;
  }
  .hero-left {
    display: flex;
    width: auto;
    flex: none;
  }
  .hero-right {
    position: static;
    width: 100%;
    margin-top: 20px;
    border: 1.5px solid var(--accent);
    border-radius: var(--radius);
    overflow: hidden;
  }
  .hero-right::before,
  .hero-right::after { display: none; }
  .hero-bio {
    padding: 20px;
    min-height: 0;
  }
}

/* ── Tablet ≤768px ───────────────────────────────────── */
@media (max-width: 768px) {
  :root {
    --pad-x:   16px;
    --fs-base: 15px;
    --fs-lg:   19px;
    --fs-xl:   20px;
  }

  .hero {
    flex-direction: column;
    align-items: center;
    padding: 24px 0 32px;
    text-align: center;
  }
  .hero-left {
    align-items: center;
    width: 100%;
  }
  .photo-wrap { width: 150px; height: 150px; }
  .hero-contacts { align-items: center; font-size: 15px; }
  .hero-name { white-space: normal; }

  .hero-bio { text-align: left; }

  /* Cards: single column */
  .cards-row { grid-template-columns: 1fr; }

  /* Portfolio */
  .portfolio-section { gap: 20px; }
  .portfolio-img { width: 100px; height: 100px; }

  /* Recommendations */
  .recommendations-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Mobile ≤480px ───────────────────────────────────── */
@media (max-width: 480px) {
  :root { --pad-x: 12px; }

  .photo-wrap { width: 120px; height: 120px; }

  .portfolio-img { width: 76px; height: 76px; }
  .portfolio-section { gap: 14px; }

  .recommendations-grid { grid-template-columns: 1fr; }

  .card-header { gap: 12px; }
  .card-logo { width: 42px; height: 42px; }
}
/* ── Brand colors ────────────────────────────────────── */
.brand-megamarket { color: #8654CC; }
.brand-vtb        { color: #009FDF; }
.brand-ozon       { color: #005BFF; }
.brand-mts        { color: #E30611; }
.brand-sbertech   { color: #1E7AFE; }