:root {
      --bg: #f6f5f1;
      --paper: #ffffff;
      --ink: #0b1220;
      --ink-2: #334155;
      --muted: #64748b;
      --line: #e6e4dd;
      --line-2: #eeece5;
      --accent: #1a56db;
      /* bitrix-ish blue, a touch more saturated */
      --accent-2: #0f3a9e;
      --accent-soft: #e8efff;
      --chip: #f1efe8;
      --success: #0f766e;
      --warn: #b45309;
      --radius: 14px;
      --shadow: 0 1px 0 rgba(15, 23, 42, .04), 0 18px 40px -24px rgba(15, 23, 42, .18);
    }

    * {
      box-sizing: border-box
    }

    html,
    body {
      margin: 0;
      padding: 0
    }

    body {
      font-family: 'Manrope', system-ui, -apple-system, Segoe UI, sans-serif;
      background: var(--bg);
      color: var(--ink);
      -webkit-font-smoothing: antialiased;
      font-feature-settings: "ss01", "cv11";
      line-height: 1.5;
    }

    a {
      color: inherit
    }

    .mono {
      font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
      font-feature-settings: "zero"
    }

    /* top bar */
    .topbar {
      position: sticky;
      top: 0;
      z-index: 20;
      display: flex;
      gap: 12px;
      align-items: center;
      justify-content: space-between;
      padding: 10px 20px;
      background: color-mix(in oklab, var(--bg) 80%, transparent);
      backdrop-filter: saturate(1.2) blur(10px);
      border-bottom: 1px solid var(--line);
    }

    .topbar .brand {
      display: flex;
      align-items: center;
      gap: 10px;
      font-weight: 700;
      letter-spacing: -0.01em
    }

    .topbar .brand .dot {
      width: 10px;
      height: 10px;
      border-radius: 3px;
      background: var(--accent)
    }

    .topbar .actions {
      display: flex;
      gap: 8px;
      align-items: center
    }

    .btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      border-radius: 10px;
      border: 1px solid var(--line);
      background: var(--paper);
      color: var(--ink);
      font: inherit;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: all .15s ease;
    }

    .btn:hover {
      border-color: #cfcdc4;
      transform: translateY(-1px)
    }

    .btn.primary {
      background: var(--ink);
      border-color: var(--ink);
      color: #fff
    }

    .btn.primary:hover {
      background: #111827
    }

    .lang {
      display: inline-flex;
      border: 1px solid var(--line);
      border-radius: 10px;
      overflow: hidden;
      background: var(--paper)
    }

    .lang button {
      background: transparent;
      border: 0;
      padding: 7px 10px;
      font: inherit;
      font-size: 12px;
      font-weight: 700;
      color: var(--muted);
      cursor: pointer;
      letter-spacing: .04em
    }

    .lang button.on {
      background: var(--ink);
      color: #fff
    }

    /* page */
    .page {
      max-width: 1120px;
      margin: 24px auto 80px;
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: 20px;
      box-shadow: var(--shadow);
      overflow: hidden;
    }

    /* HERO */
    .hero {
      display: grid;
      grid-template-columns: 220px 1fr auto;
      gap: 36px;
      padding: 44px 56px 36px;
      border-bottom: 1px solid var(--line-2);
      position: relative;
    }

    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(900px 300px at 85% -10%, rgba(26, 86, 219, .09), transparent 60%),
        radial-gradient(600px 200px at 10% 110%, rgba(26, 86, 219, .06), transparent 60%);
      pointer-events: none;
    }

    .photo {
      width: 220px;
      height: 260px;
      border-radius: 16px;
      position: relative;
      overflow: hidden;
      box-shadow: 0 10px 30px -12px rgba(26, 86, 219, .5);
      grid-column: 1;
      grid-row: 1;
    }

    .photo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center top;
      display: block;
    }

    .photo::after {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .25), transparent 55%);
    }

    .hero-main {
      min-width: 0;
      position: relative;
      grid-column: 2;
      grid-row: 1;
    }

    .hero-details {
      grid-column: 1 / 3;
      grid-row: 2;
      min-width: 0;
      position: relative;
    }

    .hero-details .lede {
      max-width: none;
      margin: 0 0 14px;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 5px 10px;
      border-radius: 999px;
      background: var(--accent-soft);
      color: var(--accent-2);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .02em;
      border: 1px solid rgba(26, 86, 219, .18);
    }

    .eyebrow .pulse {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #10b981;
      box-shadow: 0 0 0 4px rgba(16, 185, 129, .2)
    }

    h1 {
      font-size: clamp(34px, 4vw, 48px);
      line-height: 1.05;
      letter-spacing: -0.02em;
      margin: 14px 0 6px;
      font-weight: 800;
    }

    h1 .accent {
      color: var(--accent)
    }

    .role {
      font-size: 18px;
      color: var(--ink-2);
      font-weight: 500;
      margin: 0 0 18px;
    }

    .lede {
      font-size: 15.5px;
      color: var(--ink-2);
      max-width: 58ch;
      margin: 0 0 20px;
    }

    .meta {
      display: flex;
      flex-wrap: wrap;
      gap: 8px 20px;
      color: var(--muted);
      font-size: 13px;
    }

    .meta span {
      display: inline-flex;
      gap: 8px;
      align-items: center
    }

    .meta svg {
      width: 14px;
      height: 14px;
      stroke: currentColor;
      fill: none;
      stroke-width: 1.8
    }

    .hero-side {
      display: flex;
      flex-direction: column;
      gap: 10px;
      align-items: flex-end;
      position: relative;
      min-width: 200px;
      grid-column: 3;
      grid-row: 1 / 3;
    }

    .stat-card {
      padding: 12px 14px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: var(--paper);
      min-width: 200px;
    }

    .stat-card .k {
      font-size: 11px;
      color: var(--muted);
      font-weight: 600;
      letter-spacing: .06em;
      text-transform: uppercase
    }

    .stat-card .v {
      font-size: 14px;
      font-weight: 700;
      margin-top: 2px;
      display: flex;
      align-items: center;
      gap: 8px
    }

    .dot-ok {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #10b981
    }

    /* sections */
    .section {
      padding: 36px 56px;
      border-bottom: 1px solid var(--line-2)
    }

    .section:last-child {
      border-bottom: 0
    }

    .section-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 20px;
      margin-bottom: 22px;
    }

    .section h2 {
      margin: 0;
      font-size: 12px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--muted);
      font-weight: 700;
    }

    .section h2 .num {
      color: var(--ink);
      margin-right: 8px
    }

    .section-title {
      font-size: clamp(22px, 2.4vw, 30px);
      font-weight: 800;
      letter-spacing: -0.015em;
      margin: 4px 0 0;
      line-height: 1.15;
      max-width: 30ch;
    }

    .section-right {
      color: var(--muted);
      font-size: 13px;
      max-width: 36ch;
      text-align: right
    }

    /* KPIs */
    .kpis {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
      margin-top: 6px;
    }

    .kpi {
      padding: 18px 18px 16px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: var(--paper);
      position: relative;
    }

    .kpi .num {
      font-size: 38px;
      font-weight: 800;
      letter-spacing: -0.02em;
      line-height: 1;
      font-family: 'Manrope', sans-serif;
    }

    .kpi .num sup {
      font-size: 18px;
      font-weight: 700;
      color: var(--accent);
      margin-left: 2px;
      top: -14px;
      position: relative
    }

    .kpi .lbl {
      margin-top: 6px;
      font-size: 13px;
      color: var(--ink-2);
      font-weight: 500
    }

    .kpi .sub {
      font-size: 11.5px;
      color: var(--muted);
      margin-top: 2px
    }

    .kpi::after {
      content: "";
      position: absolute;
      left: 16px;
      right: 16px;
      top: 0;
      height: 2px;
      background: linear-gradient(90deg, var(--accent), transparent);
      border-radius: 2px;
    }

    /* SKILLS */
    .skill-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 18px;
    }

    .skill-card {
      padding: 20px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: #fbfaf6;
    }

    .skill-card h3 {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 0 0 10px;
      font-size: 15px;
      letter-spacing: -0.01em;
    }

    .skill-card h3 .ico {
      width: 28px;
      height: 28px;
      border-radius: 8px;
      background: var(--accent-soft);
      color: var(--accent-2);
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .skill-card h3 .ico svg {
      width: 16px;
      height: 16px;
      stroke: currentColor;
      fill: none;
      stroke-width: 2
    }

    .skill-card p {
      margin: 0 0 12px;
      font-size: 13.5px;
      color: var(--ink-2)
    }

    .tags {
      display: flex;
      flex-wrap: wrap;
      gap: 6px
    }

    .tag {
      display: inline-block;
      padding: 4px 10px;
      border-radius: 999px;
      background: var(--paper);
      border: 1px solid var(--line);
      font-size: 12px;
      color: var(--ink-2);
      font-weight: 500;
    }

    .tag.pri {
      background: var(--accent-soft);
      color: var(--accent-2);
      border-color: rgba(26, 86, 219, .2)
    }

    /* SERVICES */
    .services {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
    }

    .svc {
      padding: 18px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: var(--paper);
      display: flex;
      flex-direction: column;
      gap: 8px;
      position: relative;
      overflow: hidden;
    }

    .svc .n {
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      color: var(--muted);
      letter-spacing: .1em
    }

    .svc h3 {
      margin: 0;
      font-size: 15.5px;
      font-weight: 700;
      letter-spacing: -0.01em
    }

    .svc p {
      margin: 0;
      color: var(--ink-2);
      font-size: 13.5px
    }

    .svc .meta-row {
      margin-top: auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: var(--muted);
      font-size: 12px;
      padding-top: 10px;
      border-top: 1px dashed var(--line);
      margin-top: 4px
    }

    /* EXPERIENCE TIMELINE */
    .timeline {
      position: relative;
      padding-left: 28px
    }

    .timeline::before {
      content: "";
      position: absolute;
      left: 8px;
      top: 6px;
      bottom: 6px;
      width: 2px;
      background: linear-gradient(var(--accent), var(--line));
      border-radius: 2px;
    }

    .tl-item {
      position: relative;
      padding: 0 0 26px
    }

    .tl-item:last-child {
      padding-bottom: 0
    }

    .tl-item::before {
      content: "";
      position: absolute;
      left: -24px;
      top: 6px;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: var(--paper);
      border: 2px solid var(--accent);
      box-shadow: 0 0 0 4px var(--accent-soft);
    }

    .tl-head {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: baseline;
      gap: 10px 16px;
    }

    .tl-role {
      font-weight: 700;
      font-size: 17px;
      letter-spacing: -0.01em
    }

    .tl-company {
      color: var(--ink-2);
      font-weight: 500;
      font-size: 14px
    }

    .tl-company b {
      color: var(--ink)
    }

    .tl-date {
      font-family: 'JetBrains Mono', monospace;
      font-size: 12px;
      color: var(--muted);
      white-space: nowrap;
    }

    .tl-body {
      margin-top: 8px;
      color: var(--ink-2);
      font-size: 13.5px;
      max-width: 80ch
    }

    .tl-body ul {
      margin: 6px 0 0;
      padding-left: 18px
    }

    .tl-body li {
      margin: 3px 0
    }

    .tl-stack {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 10px
    }

    /* CASES */
    .cases {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px
    }

    .case {
      border: 1px solid var(--line);
      border-radius: 14px;
      background: var(--paper);
      padding: 18px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      position: relative;
      overflow: hidden;
    }

    .case .industry {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: var(--muted);
    }

    .case h3 {
      margin: 0;
      font-size: 16px;
      letter-spacing: -0.01em;
      line-height: 1.25
    }

    .case .desc {
      font-size: 13px;
      color: var(--ink-2);
      margin: 0
    }

    .case .result {
      display: flex;
      gap: 10px;
      align-items: flex-start;
      padding: 10px 12px;
      border-radius: 10px;
      background: var(--accent-soft);
      color: var(--accent-2);
      font-size: 13px;
      font-weight: 600;
      border-left: 3px solid var(--accent);
    }

    .case .result .big {
      font-size: 22px;
      font-weight: 800;
      line-height: 1;
      color: var(--accent);
      letter-spacing: -0.02em
    }

    /* EDUCATION */
    .edu-row {
      display: grid;
      grid-template-columns: 180px 1fr;
      gap: 16px;
      padding: 14px 0;
      border-top: 1px solid var(--line-2);
    }

    .edu-row:first-child {
      border-top: 0
    }

    .edu-date {
      font-family: 'JetBrains Mono', monospace;
      color: var(--muted);
      font-size: 12px;
      padding-top: 2px
    }

    .edu-title {
      font-weight: 700;
      font-size: 15px
    }

    .edu-sub {
      color: var(--ink-2);
      font-size: 13.5px;
      margin-top: 2px
    }

    .edu-certificates {
      margin-top: 12px;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .cert-btn {
      width: 68px;
      height: 92px;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: #f8f9fc;
      display: grid;
      place-items: center;
      cursor: pointer;
      transition: all .15s ease;
      padding: 0;
      overflow: hidden;
      position: relative;
    }

    .cert-btn:hover {
      transform: translateY(-1px);
      border-color: #cfcdc4;
      background: #fff;
    }

    .cert-thumb {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center top;
      display: block;
      background: #f1f3f8;
    }

    .cert-icon {
      display: none;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      background: linear-gradient(180deg, #ffffff, #f5f6fb);
    }

    .cert-btn.no-thumb .cert-icon {
      display: flex;
    }

    .cert-btn.no-thumb .cert-thumb {
      display: none;
    }

    .cert-icon svg {
      width: 20px;
      height: 20px;
      stroke: var(--accent-2);
      fill: none;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .diploma-modal {
      position: fixed;
      inset: 0;
      background: rgba(10, 19, 43, .6);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 50;
      padding: 20px;
    }

    .diploma-modal.is-open {
      display: flex;
    }

    .diploma-modal-content {
      width: min(920px, 100%);
      max-height: 90vh;
      border-radius: 14px;
      background: #fff;
      border: 1px solid var(--line);
      box-shadow: 0 24px 60px -30px rgba(10, 19, 43, .55);
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    .diploma-modal-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 12px 14px;
      border-bottom: 1px solid var(--line-2);
      background: #fbfaf6;
    }

    .diploma-modal-head strong {
      font-size: 14px;
      letter-spacing: -0.01em;
    }

    .diploma-modal-close {
      width: 34px;
      height: 34px;
      border: 1px solid var(--line);
      border-radius: 9px;
      background: #fff;
      cursor: pointer;
      font-size: 18px;
      line-height: 1;
    }

    .diploma-modal-frame {
      width: 100%;
      height: min(76vh, 720px);
      border: 0;
      background: #f5f6fa;
    }

    /* CONTACT */
    .contact-grid {
      display: grid;
      grid-template-columns: 1.1fr 1fr;
      gap: 30px;
    }

    .contact-cards {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px
    }

    .ccard {
      display: flex;
      gap: 12px;
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: #fbfaf6;
      text-decoration: none;
      color: inherit;
      transition: all .15s ease;
    }

    .ccard:hover {
      transform: translateY(-2px);
      border-color: #cfcdc4;
      background: #fff
    }

    .ccard .ico {
      width: 40px;
      height: 40px;
      border-radius: 10px;
      flex-shrink: 0;
      display: grid;
      place-items: center;
      background: var(--paper);
      border: 1px solid var(--line);
      color: var(--ink);
    }

    .ccard .ico svg {
      width: 20px;
      height: 20px
    }

    .ccard .l {
      font-size: 11px;
      font-weight: 700;
      color: var(--muted);
      letter-spacing: .06em;
      text-transform: uppercase
    }

    .ccard .v {
      font-size: 14px;
      font-weight: 600;
      margin-top: 2px
    }

    .contact-form {
      padding: 22px;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: linear-gradient(180deg, #fbfaf6, #fff);
    }

    .contact-form h3 {
      margin: 0 0 4px;
      font-size: 18px;
      letter-spacing: -0.01em
    }

    .contact-form p {
      margin: 0 0 16px;
      color: var(--ink-2);
      font-size: 13.5px
    }

    .field {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin-bottom: 12px
    }

    .field label {
      font-size: 12px;
      font-weight: 600;
      color: var(--ink-2)
    }

    .field input,
    .field textarea,
    .field select {
      font: inherit;
      font-size: 14px;
      padding: 10px 12px;
      border-radius: 10px;
      border: 1px solid var(--line);
      background: var(--paper);
      color: var(--ink);
      outline: none;
      transition: border-color .15s, box-shadow .15s;
    }

    .field input:focus,
    .field textarea:focus,
    .field select:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 4px var(--accent-soft);
    }

    .field textarea {
      min-height: 90px;
      resize: vertical
    }

    .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px
    }

    .cta-row {
      display: flex;
      gap: 10px;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap
    }

    .chip-row {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin: 4px 0 14px
    }

    .chip-row .tag {
      cursor: pointer;
      user-select: none;
      transition: all .12s
    }

    .chip-row .tag:hover {
      border-color: var(--accent);
      color: var(--accent-2)
    }

    .chip-row .tag.active {
      background: var(--accent);
      color: #fff;
      border-color: var(--accent)
    }

    .muted-note {
      color: var(--muted);
      font-size: 12px
    }

    /* footer strip */
    .footer {
      padding: 20px 56px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: var(--muted);
      font-size: 12px;
      background: #fbfaf6;
      border-top: 1px solid var(--line-2);
    }

    /* PRINT */
    @media print {
      @page {
        size: A4;
        margin: 12mm
      }

      :root {
        --shadow: none
      }

      body {
        background: #fff
      }

      .topbar,
      .footer,
      .contact-form,
      .btn {
        display: none !important
      }

      .page {
        box-shadow: none;
        border: 0;
        margin: 0;
        max-width: none;
        border-radius: 0
      }

      .hero {
        padding: 0 0 18px;
        gap: 20px;
        grid-template-columns: 150px 1fr auto
      }

      .hero-details {
        grid-column: 1 / 3;
        grid-row: 2;
      }

      .hero-side {
        grid-column: 3;
        grid-row: 1 / 3;
      }

      .photo {
        width: 150px;
        height: 180px;
        font-size: 48px
      }

      .section {
        padding: 16px 0;
        break-inside: avoid
      }

      .kpi::after {
        background: #000
      }

      .case,
      .svc,
      .skill-card,
      .stat-card,
      .kpi,
      .ccard {
        break-inside: avoid
      }

      .contact-grid {
        grid-template-columns: 1fr
      }

      .ccard {
        background: #fff
      }

      h1 {
        font-size: 30px
      }

      .hero::before {
        display: none
      }
    }

    @media (max-width: 960px) {
      .hero {
        grid-template-columns: 160px 1fr;
        padding: 32px 24px
      }

      .hero-main,
      .hero-details {
        grid-column: auto;
        grid-row: auto;
      }

      .hero-side {
        grid-column: 1 / -1;
        grid-row: auto;
        flex-direction: row;
        justify-content: flex-start;
        flex-wrap: wrap
      }

      .photo {
        width: 160px;
        height: 190px;
        font-size: 54px
      }

      .section {
        padding: 28px 24px
      }

      .kpis {
        grid-template-columns: repeat(2, 1fr)
      }

      .skill-grid,
      .services,
      .cases,
      .contact-grid {
        grid-template-columns: 1fr
      }

      .form-row {
        grid-template-columns: 1fr
      }

      .edu-row {
        grid-template-columns: 1fr
      }

      .footer {
        padding: 16px 24px
      }
    }