:root{
      --bg:#14161a;
      --panel:rgba(255,255,255,0.04);
      --panel-line:rgba(255,255,255,0.09);
      --text:#FFF;
      --text-2:#9BA3A8;
      --text-3:#7C858B;  /* 4.8:1 к фону — проходит WCAG AA (было #6E767C = 3.9:1) */
      --green:#a6e08a;
      --blue:#4bb7ff;
      --aqua:#0affff;
      --violet:#7f3aef;
      --purple:#9b7bd9;
      --orange:#FF9F00;
    }

    *{box-sizing:border-box; margin:0; padding:0;}
    /* Прокрутка "Наверх" анимируется вручную через JS (см. script.js) —
       CSS scroll-behavior здесь не нужен и мог бы конфликтовать с ней. */
    html{overflow-x: hidden;}
    html,body{background:var(--bg);}
    body{min-height:100vh; overflow-x: hidden;}

    .stage{
      position:relative;
      width:100%;
      background:
        radial-gradient(ellipse 900px 500px at 85% -5%, rgba(75,183,255,0.10), transparent 60%),
        var(--bg);
      overflow:hidden;
      font-family:'Inter', sans-serif;
      color:var(--text);
      padding:45px 0 0 0;
      animation:stageIn 0.5s ease-out both;
    }
    @keyframes stageIn{
      from{opacity:0;transform:translateY(10px);}
      to{opacity:1;transform:translateY(0);}
    }

    .photo-glow{
      position:absolute;
      top:-65px; right:20px;
      width:380px; height:460px;
      background:radial-gradient(
        circle closest-corner at 50% 30%,
        rgba(210,225,255,0.8) 0%,
        rgba(75,183,255,0.15) 40%,
        rgba(120,100,200,0.5) 65%,
        transparent 70%
      );
      filter:blur(45px);
      z-index:0; pointer-events:none;
      animation:glowPulse 6s ease-in-out infinite alternate;
    }
    @keyframes glowPulse{
      0%  {opacity:.75; transform:scale(1);}
      100%{opacity:1;   transform:scale(1.04);}
    }

    .photo{
      position:absolute;
      top:0; right:0;
      width:400px; height:480px;
      object-fit:contain;
      object-position:center 15%;
      -webkit-mask-image:
        linear-gradient(180deg, black 30%, transparent 100%),
        linear-gradient(to bottom, black 40%, transparent 70%);
      mask-image:
        linear-gradient(180deg, black 60%, transparent 100%),
        linear-gradient(to bottom, black 35%, transparent 70%);
      mask-composite:intersect;
      -webkit-mask-composite:source-in;
      opacity:1;
      z-index:1; pointer-events:none;
      filter:grayscale(.6) contrast(1.05) brightness(1.1);
    }

    .content{
      position:relative; z-index:2;
      display:flex; flex-direction:column;
      max-width:1220px; margin:0 auto;
      padding:0;
    }

    .header-wrap{
      display:block;
      padding-right: 420px;
    }

    .eyebrow{
      display:inline-flex; align-items:center; gap:9px;
      font-family:'IBM Plex Mono', monospace;
      font-size:21px; letter-spacing:0.13em; text-transform:uppercase;
      color:#a6e08a; font-weight:500; margin-bottom:6px;
    }

    .meta-chip .dot{
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--green);
      box-shadow: 0 0 6px rgba(166,224,138,0.5);
      opacity: 1;
      transform: scale(1);
      flex-shrink: 0;
    }

    h1.name{
      font-family:'Space Grotesk', sans-serif;
      font-weight:700; font-size:44px;
      line-height:1.1; letter-spacing:-0.01em;
      margin-bottom:15px; text-transform:uppercase;
    }

    .descriptor{
      margin-top:5px; max-width:800px;
      font-size:16px; line-height:1.45;
      color:var(--text-2); margin-bottom:30px;
    }

    .meta-row{
      display:flex; flex-wrap:wrap; gap:5px 7px;
      margin-top:10px;
    }
    .meta-chip{
      display:flex; align-items:center; gap:6px;
      font-family:'IBM Plex Mono', monospace;
      font-size:14px; color:var(--text-2);
      background:var(--panel); border:1px solid var(--panel-line);
      padding:5px 10px; border-radius:7px;
      transition:border-color .2s, background .2s, color .2s;
      cursor:default;
    }
    .meta-chip:hover{
      border-color:rgba(255,255,255,0.18);
      background:rgba(255,255,255,0.07);
      color:var(--text);
    }
    .meta-chip svg{transition:transform .2s;}
    .meta-chip:hover svg{transform:translateX(1px);}

    .block{margin:50px 0 30px 0;}
    .block:first-of-type{margin-top:8px;}

    h2.section{
      font-family:'Space Grotesk', sans-serif;
      font-weight:600; font-size:24px;
      margin-bottom:40px;
      color:var(--text); text-transform:uppercase;
    }

    .stats{
      display:grid; grid-template-columns:repeat(4,1fr); gap:8px;
      margin-top:10px; margin-bottom:15px;
    }
    .stat{
      background:var(--panel); border:1px solid var(--panel-line);
      border-radius:9px; padding:7px 8px;
      transition:border-color .25s, background .25s, transform .25s;
    }
    .stat:hover{
      border-color:rgba(47,140,0,0.35);
      background:rgba(47,140,0,0.06);
      transform:translateY(-2px);
    }
    .stat:hover .num{color:#3da600;}
    .stat .num{
      font-family:'IBM Plex Mono', monospace; font-weight:700; font-size:24px;
      color:var(--green); line-height:1; transition:color .25s;
    }
    .stat .lbl{margin-top:5px; font-size:14px; color:var(--text-2); line-height:1.2;}

    .exp-list{display:flex; flex-direction:column; gap:10px;}
    .exp-row{
      padding:20px;
      border-bottom:1px solid var(--panel-line);
      transition:background .3s, border-color .3s;
      border-radius:6px; margin:0 -6px;
      position: relative;
      overflow: hidden;
    }
    .exp-row:last-child{border-bottom:none; padding-bottom:20px;}
    .exp-row:hover{
      background:rgba(255,255,255,0.015);
      border-color:rgba(255,255,255,0.13);
    }

    .exp-top{
      display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap;
    }
    .exp-info{justify-content:flex-start; gap:12px;}
    .exp-company{font-weight:600; font-size:18px; transition:color .2s;}

    .exp-years{
      font-family:'IBM Plex Mono', monospace; font-size:14px; color:var(--text-2);
      border:1px solid var(--panel-line); border-radius:6px; padding:6px 10px;
      white-space:nowrap; transition:border-color .2s, color .2s;
    }
    .exp-row:hover .exp-years{border-color:var(--green); color:var(--green);}
    .exp-niche{font-size:14px; color:#a6e08a; margin-top:7px; font-weight:400;}
    .exp-sub{font-size:16px; color:var(--text-2); margin:10px 0 10px 0; line-height:1.42;}

    .spoiler-toggle{
      display:inline-flex; align-items:center; gap:5px;
      font-family:'IBM Plex Mono', monospace;
      font-size:14px; color:var(--blue);
      margin-top:6px; cursor:pointer;
      border:none; background:none;
      /* минимальная область нажатия 24px по высоте (WCAG 2.2 Target Size) */
      padding:5px 0; min-height:24px;
      transition:color .2s, gap .2s; user-select:none;
    }
    .spoiler-toggle:focus-visible{
      outline:2px solid var(--blue); outline-offset:2px; border-radius:4px;
    }
    .spoiler-toggle:hover{color:#7dcbff;}
    .spoiler-toggle svg{
      width:14px; height:14px;
      transition:transform .3s ease; flex-shrink:0;
    }
    .spoiler-toggle.open svg{transform:rotate(180deg);}
    .spoiler-toggle.open{color:#7dcbff;}

    .exp-list-toggle{
      display:flex;
      width:100%;
      justify-content:center;
      padding: 14px;
      margin-bottom: 20px;
      border-radius: 8px;
      font-size: 14px;
      border: 1px solid var(--panel-line);
      background: rgba(255,255,255,0.02);
      transition: background .2s, border-color .2s, color .2s;
    }
    .exp-list-toggle:hover{
      background: rgba(75,183,255,0.06);
      border-color: rgba(75,183,255,0.35);
      color: #7dcbff;
    }

    .spoiler-body{
      max-height:0; overflow:hidden;
      transition:max-height .4s ease, opacity .3s ease; opacity:0;
    }
    /* Раньше было 400px — при длинном списке (особенно с переносом строк
       на узких экранах) контент выше 400px просто обрезался overflow:hidden.
       Ставим заведомо большой потолок вместо точной высоты по контенту —
       у этой техники анимации max-height нет способа анимировать к "auto" */
    .spoiler-body.open{max-height:3000px; opacity:1;}
    .spoiler-body-wide.open{max-height:5000px; opacity:1;}

    .exp-list .spoiler-body .spoiler-inner {
      border-top: 1px solid var(--panel-line);
      margin-top: 12px;
      padding-top: 15px;
    }

    .spoiler-list-container{
      position: relative;
      padding-top: 25px; 
      margin-top: 20px;
      border-top: 1px dashed rgba(255,255,255,0.15);
    }
    .spoiler-list-container::before {
      content: 'Предыдущий опыт';
      position: absolute;
      top: -10px;
      left: 50%;
      transform: translateX(-50%);
      background: #14161a;
      padding: 0 15px;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 11px;
      color: var(--text-3);
      text-transform: uppercase;
      letter-spacing: 0.15em;
      white-space: nowrap;
    }

    .spoiler-inner{padding-top:10px; font-size:14px; color:var(--text-2); line-height:1.55;}
    .spoiler-inner ul{list-style:none; padding:0; display:flex; flex-direction:column; gap:0;}

    .exp-list .spoiler-inner ul li{
      position:relative; 
      padding-left:0; 
      padding-bottom:10px; 
      margin-bottom:10px;
      border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .exp-list .spoiler-inner ul li:last-child{
      border-bottom: none;
      margin-bottom: 0;
      padding-bottom: 0;
    }
    .exp-list .spoiler-inner ul li::before{content:none;}

    .exp-list .spoiler-inner .stack-row {
      display: flex;
      align-items: flex-start;
      gap: 14px;
    }
    .exp-list .spoiler-inner .stack-label {
      width: 400px;
      max-width: 100%;
      flex-shrink: 0;
    }
    .exp-list .spoiler-inner ul {
      flex: 1;
      min-width: min(300px, 100%);
    }

    .body-grid{display:grid; grid-template-columns:1.05fr 0.95fr; gap:34px;}

    .bar-item{margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--panel-line);}
    .bar-top{
      display:flex; justify-content:space-between; align-items:center;
      font-size:18px; gap:15px;
    }
    .lvl-wrapper{
      display:flex; align-items:center; flex-shrink:0;
    }
    .dot-bar{
      display:flex; gap:10px; align-items:center;
    }
    .dot{
      width:10px; height:10px; border-radius:50%;
      background:var(--panel-line);
      opacity:0.4; transform:scale(0.8);
      transition:opacity .3s ease, background .3s ease, box-shadow .3s ease, transform .3s ease;
    }
    .lvl-wrapper.show .dot{opacity:1; transform:scale(1);}
    .lvl-wrapper.show .dot.active{
      background: var(--green);
      box-shadow: 0 0 6px rgba(166,224,138,0.5);
    }

    .tag-row{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; margin-bottom:15px;}
    .tag{
      font-family:'IBM Plex Mono', monospace;
      font-size:16px; padding:7px 12px; border-radius:18px;
      background:rgba(113,76,179,0.16); border:1px solid rgba(155,123,217,0.35);
      color:#c9b8ef; line-height:1.4;
      transition:background .2s, border-color .2s, transform .2s, box-shadow .2s;
      cursor:default;
    }
    .tag:hover{
      background:rgba(113,76,179,0.28);
      border-color:rgba(155,123,217,0.55);
      transform:translateY(-1px);
      box-shadow:0 2px 8px rgba(155,123,217,0.15);
    }
    .tag.niche{background:rgba(47,140,0,0.14); border:1px solid rgba(63,174,0,0.4); color:#a6e08a;}
    .tag.niche:hover{
      background:rgba(47,140,0,0.26);
      border-color:rgba(63,174,0,0.6);
      box-shadow:0 2px 8px rgba(47,140,0,0.15);
    }

    .roles-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;
    }
    .role-card {
      background: var(--panel);
      border: 1px solid var(--panel-line);
      border-radius: 12px;
      padding: 24px;
      display: flex;
      flex-direction: column;
      gap: 20px;
      text-decoration: none;
      color: var(--text);
      transition: border-color .25s, background .25s, transform .25s, box-shadow .25s;
      position: relative;
      overflow: hidden;
    }
    .role-card::before {
      content: "";
      position: absolute;
      left: 0; top: 0; bottom: 0;
      width: 3px;
      background: var(--green);
      transition: width .25s;
    }
    .role-card:hover {
      transform: translateY(-3px);
      background: rgba(47,140,0,0.03);
      border-color: rgba(47,140,0,0.4);
      box-shadow: 0 8px 20px rgba(47,140,0,0.08);
    }
    .role-card:hover::before {
      width: 5px;
    }
    .role-card-top {
      display: flex;
      align-items: flex-start;
      gap: 16px;
    }
    .role-icon-wrap {
      width: 44px; height: 44px;
      border-radius: 8px;
      background: rgba(47,140,0,0.1);
      border: 1px solid rgba(63,174,0,0.3);
      display: flex; align-items: center; justify-content: center;
      color: var(--green);
      flex-shrink: 0;
    }
    .role-icon-wrap svg { width: 22px; height: 22px; }
    .role-text { flex: 1; }
    .role-title {
      font-family: 'Space Grotesk', sans-serif;
      font-weight: 600; font-size: 17px;
      line-height: 1.3;
      color: var(--text);
      margin-bottom: 6px;
    }
    .role-subtitle {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 14px;
      color: var(--text-2);
    }
    .role-footer {
      margin-top: auto;
      padding-top: 16px;
      border-top: 1px solid var(--panel-line);
      font-family: 'IBM Plex Mono', monospace;
      font-size: 14px;
      color: var(--green);
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
    }
    .role-footer svg {
      width: 16px; height: 16px;
      transition: transform .2s;
    }
    .role-card:hover .role-footer svg {
      transform: translate(2px,-2px) scale(1.1);
    }


    .stack-panel{
      background:var(--panel);
      border:1px solid var(--panel-line);
      border-radius:10px;
      padding: 10px 20px;
      margin-bottom: 20px;
    }
    .stack-row{
      display:flex;
      gap:14px;
      padding:10px 0;
      border-bottom:1px solid var(--panel-line);
      align-items:baseline;
      flex-wrap:wrap;
    }
    .stack-row:last-child{border-bottom:none;}
    .stack-label{
      font-size:14px;
      color:var(--text-2);
      text-transform:uppercase;
      letter-spacing:.04em;
      width:400px;
      max-width:100%;   /* иначе на узких экранах фикс. 400px выходит за пределы карточки */
      flex-shrink:0;
    }
    .stack-items{
      font-size:14px;
      color:var(--text);
      line-height:1.6;
      flex:1;
      min-width:min(300px, 100%);
    }
    /* На планшете и уже — метка и список в колонку, иначе строка ломается */
    @media (max-width:899px){
      .stack-row{ flex-direction:column; gap:8px; }
      .stack-label{ width:100%; }
    }

    .tool4-block{
      position: relative;
      width: 100%;
      margin: 50px 0 0 0;
      box-sizing: border-box;
    }

    .tool4-header{
      display:flex; 
      justify-content:space-between; 
      align-items:center;
      margin: 0 0 40px 0;
      padding-bottom: 10px;
      border-bottom: 1px solid var(--panel-line);
      box-sizing: border-box;
    }
    .tool4-header .section {
      margin-bottom: 0;
    }
    .tool4-nav{ display:flex; gap:10px; }

    .tool4-nav-btn{
      width: 40px; height: 40px;
      border-radius: 8px;
      background: var(--panel);
      border: 1px solid var(--panel-line);
      color: var(--text-2);
      display: flex; align-items: center; justify-content: center;
      cursor: pointer;
      transition: all 0.2s ease;
      flex-shrink: 0;
    }
    .tool4-nav-btn:hover{
      border-color: rgba(75,183,255,0.5);
      color: var(--blue);
      box-shadow: 0 0 12px rgba(75,183,255,0.2);
    }
    .tool4-nav-btn svg{ width: 18px; height: 18px; }

    .tool4-row{
      display: flex !important;
      flex-wrap: nowrap !important;
      overflow-x: auto !important;
      gap: 16px;
      padding-top: 3px;
      padding-bottom: 20px;
      width: 100vw;
      margin-left: calc(50% - 50vw);
      padding-left: calc(50vw - 50%);
      padding-right: calc(50vw - 50%);
      align-items: flex-start;
      -webkit-overflow-scrolling: touch;
      touch-action: pan-x;
      scrollbar-width: none;
      -ms-overflow-style: none;
      cursor: grab;
    }

    .tool4-row::-webkit-scrollbar { display: none; }
    .tool4-row.dragging{ cursor: grabbing; scroll-snap-type: none; }
    .tool4-row.dragging .tool4-card{ pointer-events: none; }

    .tool4-card{
      flex: 0 0 400px !important;
      background: var(--panel);
      border: 1px solid var(--panel-line);
      border-radius: 12px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      transition: border-color .3s, background .3s, transform .3s, box-shadow .3s;
      cursor: pointer;
    }

    .tool4-card.tapped .tool4-extra{
      max-height: 250px;
      opacity: 1;
      margin-top: 12px;
      padding-top: 12px;
      border-top: 1px solid var(--panel-line);
    }

    .tool4-card.tapped{transform: translateY(-3px);}
    .tool4-card.c-green.tapped{border-color: rgba(47,140,0,0.4); box-shadow: 0 8px 20px rgba(47,140,0,0.08); background: rgba(47,140,0,0.02);}
    .tool4-card.c-blue.tapped{border-color: rgba(75,183,255,0.4); box-shadow: 0 8px 20px rgba(75,183,255,0.08); background: rgba(75,183,255,0.02);}
    .tool4-card.c-purple.tapped{border-color: rgba(155,123,217,0.45); box-shadow: 0 8px 20px rgba(155,123,217,0.08); background: rgba(155,123,217,0.02);}

    .tool4-card.c-green.tapped .tool4-icon-wrap{background: rgba(47,140,0,0.1); border-color: rgba(47,140,0,0.3); box-shadow: 0 0 12px rgba(47,140,0,0.15);}
    .tool4-card.c-blue.tapped .tool4-icon-wrap{background: rgba(75,183,255,0.1); border-color: rgba(75,183,255,0.3); box-shadow: 0 0 12px rgba(75,183,255,0.15);}
    .tool4-card.c-purple.tapped .tool4-icon-wrap{background: rgba(155,123,217,0.1); border-color: rgba(155,123,217,0.35); box-shadow: 0 0 12px rgba(155,123,217,0.15);}

    .tool4-card.tapped .tool4-img{ filter: grayscale(0.1) brightness(0.85) contrast(1.15); }

    .tool4-img{
      width: 100%; height: 120px;
      object-fit: cover;
      filter: grayscale(0.6) brightness(0.65) contrast(1.1);
      border-bottom: 1px solid var(--panel-line);
      transition: filter .3s ease;
    }
    .tool4-icon-wrap{
      width: 44px; height: 44px;
      border-radius: 8px;
      display: flex; align-items: center; justify-content: center;
      margin: -22px 0 0 20px;
      position: relative; z-index: 2;
      background: var(--bg);
      border: 1px solid var(--panel-line);
      transition: background .3s, border-color .3s, box-shadow .3s;
    }
    .tool4-icon-wrap svg{ width: 22px; height: 22px; }

    .tool4-content{
      padding: 12px 20px 20px;
      flex: 1;
      display: flex;
      flex-direction: column;
      position: relative;
    }

    .tool4-card.c-green .tool4-icon-wrap svg{color: var(--green);}
    .tool4-card.c-blue .tool4-icon-wrap svg{color: var(--blue);}
    .tool4-card.c-purple .tool4-icon-wrap svg{color: #c9b8ef;}

    .tool4-card:focus-visible{
      outline: 2px solid var(--green);
      outline-offset: 3px;
    }
    .tool4-card:hover{transform: translateY(-3px);}
    .tool4-card.c-green:hover{border-color: rgba(47,140,0,0.4); box-shadow: 0 8px 20px rgba(47,140,0,0.08); background: rgba(47,140,0,0.02);}
    .tool4-card.c-blue:hover{border-color: rgba(75,183,255,0.4); box-shadow: 0 8px 20px rgba(75,183,255,0.08); background: rgba(75,183,255,0.02);}
    .tool4-card.c-purple:hover{border-color: rgba(155,123,217,0.45); box-shadow: 0 8px 20px rgba(155,123,217,0.08); background: rgba(155,123,217,0.02);}

    .tool4-card.c-green:hover .tool4-icon-wrap{background: rgba(47,140,0,0.1); border-color: rgba(47,140,0,0.3); box-shadow: 0 0 12px rgba(47,140,0,0.15);}
    .tool4-card.c-blue:hover .tool4-icon-wrap{background: rgba(75,183,255,0.1); border-color: rgba(75,183,255,0.3); box-shadow: 0 0 12px rgba(75,183,255,0.15);}
    .tool4-card.c-purple:hover .tool4-icon-wrap{background: rgba(155,123,217,0.1); border-color: rgba(155,123,217,0.35); box-shadow: 0 0 12px rgba(155,123,217,0.15);}

    .tool4-title-row{
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 10px;
      margin: 12px 0 6px;
    }
    .tool4-title{
      font-family: 'Space Grotesk', sans-serif;
      font-weight: 600; font-size: 18px;
      line-height: 1.28; margin: 0;
    }
    .tool4-card.c-green .tool4-title{color: #a6e08a;}
    .tool4-card.c-blue .tool4-title{color: var(--blue);}
    .tool4-card.c-purple .tool4-title{color: #c9b8ef;}

    .tool4-chevron{
      width: 16px; height: 16px;
      flex-shrink: 0;
      margin-top: 3px;
      color: var(--text-2);
      transition: transform .3s ease, color .3s ease;
    }
    .tool4-card.tapped .tool4-chevron{
      transform: rotate(180deg);
      color: var(--text);
    }

    .tool4-short{
      font-size: 14px; color: var(--text-2); line-height: 1.45;
    }

    .tool4-extra{
      max-height: 0;
      opacity: 0;
      overflow: hidden;
      font-size: 14px;
      color: var(--text-2);
      line-height: 1.5;
      transition: max-height .4s ease, opacity .3s ease, margin-top .3s ease, padding-top .3s ease;
      border-top: 1px solid transparent;
    }

    /* === КОНТАКТЫ === */
    .footer-contacts {
      position: relative;
      display: flex;
      flex-direction: column;
      overflow: visible;
      /* Тот же верхний отступ, что у .stage в начале страницы */
      margin: 45px 0 0 0;
      min-height: 450px;
    }

    .contacts__qr {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      text-decoration: none;
      flex: 0 0 auto;
    }

    .contacts__qr-code {
      width: 80px; height: 80px;
      background: #fff;
      padding: 4px;
      border-radius: 6px;
    }

    .contacts__qr-code svg { width: 100%; height: 100%; display: block; }

    .contacts__qr-label {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 14px;
      color: var(--text-3);
    }

    /* === ВТОРОЙ CTA-БЛОК КОНТАКТОВ === */
    .cta-contacts{
      margin: 20px 0 0 0;
      background: var(--panel);
      border: 1px solid var(--panel-line);
      border-radius: 16px;
      overflow: hidden;
    }
    .cta-contacts__top{
      display: grid;
      grid-template-columns: 1fr 1fr;
    }
    .cta-contacts__photo-wrap{
      position: relative;
      min-height: 320px;
    }
    .cta-contacts__glow{
      position: absolute;
      inset: -20px;
      background: radial-gradient(
        circle closest-corner at 50% 30%,
        rgba(210,225,255,0.5) 0%,
        rgba(75,183,255,0.18) 40%,
        rgba(120,100,200,0.35) 65%,
        transparent 75%
      );
      filter: blur(40px);
      z-index: 0;
      pointer-events: none;
      animation: glowPulse 6s ease-in-out infinite alternate;
    }
    .cta-contacts__photo{
      position: absolute;
      inset: 0;
      z-index: 1;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: top center;
      filter: grayscale(.4) contrast(.95) brightness(1);
      -webkit-mask-image: linear-gradient(180deg, black 30%, transparent 100%), linear-gradient(to bottom, black 40%, transparent 70%);
      mask-image: linear-gradient(180deg, black 60%, transparent 100%), linear-gradient(to bottom, black 35%, transparent 70%);
    }
    .cta-contacts__body{
      padding: 40px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 22px;
    }
    .cta-contacts__blurb{
      font-size: 16px;
      line-height: 1.55;
      color: var(--text-2);
    }
    .cta-contacts__actions{
      display: flex;
      align-items: center;
      gap: 24px;
      flex-wrap: wrap;
    }
    .cta-contacts__button{
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: 'IBM Plex Mono', monospace;
      font-weight: 600;
      font-size: 14px;
      color: var(--bg);
      background: var(--green);
      padding: 11px 18px;
      border-radius: 9px;
      text-decoration: none;
      transition: transform .2s, box-shadow .2s;
    }
    .cta-contacts__button:hover{
      transform: translateY(-1px);
      box-shadow: 0 6px 16px rgba(166,224,138,0.25);
    }
    .cta-contacts__row{
      display: flex;
      flex-wrap: wrap;
      border-top: 1px solid var(--panel-line);
    }
    .cta-contacts__tile{
      flex: 1 1 200px;
      padding: 22px 32px;
      border-left: 1px solid var(--panel-line);
      text-decoration: none;
      display: flex;
      flex-direction: column;
      justify-content: center;
      transition: background .2s;
    }
    .cta-contacts__tile:first-child{ border-left: none; }
    a.cta-contacts__tile:hover{ background: rgba(255,255,255,0.03); }
    .cta-contacts__name{
      font-family: 'Space Grotesk', sans-serif;
      font-weight: 700;
      font-size: 16px;
      color: var(--text);
    }
    .cta-contacts__role{
      font-family: 'IBM Plex Mono', monospace;
      font-size: 12.5px;
      color: var(--green);
      margin-top: 5px;
    }
    .cta-contacts__label{
      font-family: 'IBM Plex Mono', monospace;
      font-size: 14px;
      letter-spacing: .05em;
      color: var(--text-3);
    }
    .cta-contacts__value{
      font-family: 'IBM Plex Mono', monospace;
      font-size: 14.5px;
      color: var(--text);
      margin-top: 5px;
      word-break: break-word;
    }

    /* === БЛОК С ПАДАЮЩИМИ ТЕГАМИ (matter.js) ===
       Базовые правила ОБЯЗАТЕЛЬНО должны стоять выше медиазапросов: у них
       одинаковая специфичность, и раньше этот блок лежал в конце файла —
       поэтому все адаптивные значения ниже перебивались базовыми и высота
       с размером шрифта оставались 450px/18px на любом экране. */
    .mjs-app-wrapper {
      position: relative;
      top: 0;
      left: 0;
      margin: 0;
      padding: 0;
      background: #14161a;
      color: transparent;
      font-family: 'IBM Plex Mono', monospace;
      width: 100%;
      height: 450px;
      overflow: hidden;
      /* вертикальный скролл страницы пальцем по блоку должен работать;
         горизонтальные жесты остаются перетаскиванию тегов */
      touch-action: pan-y;
    }

    .mjs-app-wrapper * {
      user-select: none;
    }

    .mjs-app-wrapper canvas{
      position: absolute;
      top: 0;
      left: 0;
    }

    .mjs-word {
      position: absolute;
      cursor: grab;
      font-size: 18px;
      color: #a6e08a; /* Зеленый текст */
      touch-action: none;
    }

    .mjs-word.mjs-highlighted {
      font-weight: bold;
      color: #c9b8ef; /* Фиолетовый текст для выделения */
    }

    /* Теги, не поместившиеся в контейнер по плотности, гасит JS */
    .mjs-word.mjs-dropped {
      display: none;
    }

    .mjs-main {
      position: relative;
      z-index: 2;
    }

    @media (min-width:1920px){
      .content{max-width:1440px; padding:0;}
      .stage{padding-top:44px; padding-bottom:20px;}
      h1.name{font-size:50px;}
      .eyebrow{font-size:23px; letter-spacing:0.15em;}
      .descriptor{font-size:17px; max-width:860px;}
      .meta-chip{font-size:17px; padding:6px 12px;}
      .meta-chip svg{width:22px; height:22px;}
      h2.section{font-size:23px;}
      .stat .num{font-size:28px;}
      .stat .lbl{font-size:15px;}
      .stat{padding:9px 10px;}
      .exp-company{font-size:20px;}
      .exp-sub{font-size:17px;}
      .bar-top{font-size:19px;}
      .tag{font-size:17px; padding:8px 14px;}
      .photo{width:460px; height:540px;}
      .photo-glow{width:440px; height:520px; top:0; right:-20px;}
      .block{margin:54px 0 32px 0;}
      .header-wrap{padding-right: 480px;}
      .role-card { padding: 28px; gap: 24px; }
      .role-title { font-size: 19px; }
      .role-icon-wrap { width: 48px; height: 48px; }
      .role-icon-wrap svg { width: 24px; height: 24px; }
      .mjs-app-wrapper { height: 440px; }
      .mjs-word { font-size: 24px; }
      .footer-contacts { min-height: 520px; margin-top: 44px; }
    }

    @media (max-width:1439px){
      .content{max-width:1080px; padding:0;}
      .stage{padding-top:30px;}
      .footer-contacts{margin-top:30px;}
      h1.name{font-size:40px;}
      .eyebrow{font-size:19px; letter-spacing:0.11em;}
      .descriptor{font-size:15px; max-width:700px;}
      .meta-chip{font-size:15px; padding:5px 9px;}
      h2.section{font-size:20px; margin-bottom:16px;}
      .stat .num{font-size:22px;}
      .stat .lbl{font-size:13px;}
      .stat{padding:6px 7px;}
      .exp-company{font-size:17px;}
      .exp-sub{font-size:15px;}
      .exp-niche{font-size:13px;}
      .bar-top{font-size:16px;}
      .tag{font-size:15px; padding:6px 11px;}
      .photo{width:360px; height:430px;}
      .photo-glow{width:340px; height:400px; top:0; right:-8px;}
      .body-grid{gap:28px;}
      .block{margin:44px 0 26px 0;}
      .header-wrap{padding-right: 380px;}
      .tool4-card { flex: 0 0 360px !important; }
      .tool4-title { font-size: 16px; }
      .tool4-short { font-size: 13px; }
      .tool4-extra { font-size: 12.5px; }
      .tool4-content { padding: 12px 18px 18px; }
    }

    @media (max-width:1219px){
      .content{max-width:980px; padding:0;}
      .stage{padding-top:28px;}
      h1.name{font-size:34px;}
      .eyebrow{font-size:16px; letter-spacing:0.09em; margin-bottom:4px;}
      .descriptor{font-size:14px; max-width:620px; line-height:1.4;}
      .meta-chip{font-size:13px; padding:4px 8px; gap:5px;}
      .meta-chip svg{width:16px; height:16px;}
      h2.section{font-size:18px; margin-bottom:14px; margin-top:8px;}
      .stats{gap:6px;}
      .stat .num{font-size:20px;}
      .stat .lbl{font-size:12px; margin-top:4px;}
      .stat{padding:5px 6px; border-radius:7px;}
      .exp-company{font-size:15px;}
      .exp-years{font-size:12px; padding:4px 8px;}
      .exp-sub{font-size:14px; margin-top:8px;}
      .exp-niche{font-size:12px; margin-top:6px;}
      .exp-row{padding:16px;}
      .bar-top{font-size:14px; margin-bottom:8px;}
      .bar-item{margin-bottom: 8px; padding-bottom: 8px;}
      .tag{font-size:13px; padding:5px 9px; border-radius:14px;}
      .tag-row{gap:6px; margin-top:8px; margin-bottom:12px;}
      .photo{width:300px; height:370px;}
      .photo-glow{width:280px; height:340px; top:0; right:-4px;}
      .body-grid{gap:22px;}
      .block{margin:36px 0 22px 0;}
      .spoiler-toggle{font-size:14px;}
      .spoiler-inner{font-size:13px;}
      .header-wrap{padding-right: 320px;}
      .tool4-card { flex: 0 0 320px !important; }
      .tool4-title { font-size: 16px; }
      .tool4-short { font-size: 12.5px; }
      .tool4-extra { font-size: 12px; }
      .tool4-content { padding: 10px 16px 16px;}
      .tool4-img { height: 110px; }
      .tool4-header { margin-bottom: 16px; padding-bottom: 8px; }
      .role-card { padding: 20px; gap: 16px; }
      .role-title { font-size: 15px; }

      /* На 1219px и ниже меняем структуру stacked row в опыте на колонку */
      .exp-list .spoiler-inner .stack-row {
        flex-direction: column;
        gap: 10px;
      }
      .exp-list .spoiler-inner .stack-label {
        width: 100%;
      }
      .exp-list .spoiler-inner ul {
        width: 100%;
      }

      /* Контакты: компактно в одну строку, без переноса */
      .footer-contacts{min-height:360px; margin-top:28px;}
      .contacts__qr-code{width:50px; height:50px;}
      .contacts__qr-label{font-size:10px;}
      .contacts__qr{gap:6px;}

      .cta-contacts__photo-wrap{min-height:280px;}
      .cta-contacts__body{padding:32px;}
      .cta-contacts__blurb{font-size:15px;}
      .cta-contacts__tile{padding:20px 26px;}
    }

    @media (max-width:1079px){
      .content{max-width:none; padding:0 20px;}
      .stage{padding-top:26px;}
      .header-wrap{
        display:block;
        padding-right: 240px;
        margin-bottom:10px;
      }
      .photo{width:220px; height:270px;}
      .photo-glow{width:220px; height:270px; top:0; right:-4px;}
      h1.name{font-size:28px;}
      .eyebrow{font-size:14px; letter-spacing:0.07em;}
      .descriptor{font-size:13px; max-width:100%;}
      .meta-chip{font-size:12px; padding:3px 7px; gap:4px; border-radius:5px;}
      .meta-chip svg{width:14px; height:14px;}
      h2.section{font-size:16px; margin-bottom:12px; margin-top:6px;}
      .stats{grid-template-columns:repeat(4,1fr); gap:5px;}
      .stat .num{font-size:18px;}
      .stat .lbl{font-size:11px; margin-top:8px;}
      .stat{padding:5px 5px; border-radius:6px;}
      .exp-company{font-size:14px;}
      .exp-years{font-size:11px; padding:3px 7px;}
      .exp-sub{font-size:13px; margin-top:6px; line-height:1.38;}
      .exp-niche{font-size:11px; margin-top:5px;}
      .exp-row{padding:14px;}
      .body-grid{gap:20px;}
      .bar-top{font-size:13px; margin-bottom:6px;}
      .bar-item{margin-bottom:10px;}
      .tag{font-size:12px; padding:4px 8px; border-radius:12px;}
      .tag-row{gap:5px; margin-top:6px; margin-bottom:10px;}
      .block{margin:28px 0 18px 0;}
      .spoiler-toggle{font-size:14px; margin-top:8px;}
      .spoiler-inner{font-size:12px; padding-top:8px;}
      .tool4-card { flex: 0 0 300px !important; }
      .tool4-title { font-size: 16px; }
      .tool4-short { font-size: 12px; }
      .tool4-extra { font-size: 11.5px; }
      .tool4-content { padding: 10px 14px 14px;}
      .tool4-img { height: 100px; }
      .tool4-icon-wrap { width: 40px; height: 40px; margin: -20px 0 0 16px; }
      .tool4-header { margin-bottom: 14px; padding-bottom: 6px; }
      .role-card { padding: 18px; gap: 14px; }
      .role-title { font-size: 14px; }
      .role-subtitle { font-size: 12px; }
      .role-icon-wrap { width: 40px; height: 40px; }
      .role-icon-wrap svg { width: 20px; height: 20px; }

      /* Контакты: ещё компактнее, всё ещё в одну строку */
      .footer-contacts{min-height:310px; margin-top:26px;}
      .contacts__qr-code{width:42px; height:42px; padding:3px;}
      .contacts__qr-label{font-size:10px;}
      .contacts__qr{gap:5px;}

      .cta-contacts__photo-wrap{min-height:240px;}
      .cta-contacts__body{padding:26px;}
      .cta-contacts__blurb{font-size:14px;}
      /* высота не ниже 44px — это основной CTA и на тач-устройствах он должен быть удобным */
      .cta-contacts__button{font-size:13px; padding:12px 16px; min-height:44px;}
      .cta-contacts__tile{padding:18px 16px; flex-basis:150px;}
      .cta-contacts__name{font-size:14px;}
      .cta-contacts__value{font-size:13px;}
    }

    @media (max-width:899px){
      .stage{padding-top:24px; padding-bottom:14px;}
      .photo{ width: 200px; height: 250px; }
      .photo-glow{ width: 200px; height: 250px; }
      .header-wrap{ padding-right: 220px; }
      h1.name{font-size:24px; margin-bottom:10px;}
      .eyebrow{font-size:12px; letter-spacing:0.06em; margin-bottom:4px;}
      .descriptor{font-size:12.5px; margin-bottom:10px; line-height:1.4;}
      .meta-row{gap:4px 5px; margin-top:8px;}
      .meta-chip{font-size:11px; padding:3px 6px; gap:4px; border-radius:4px;}
      .meta-chip svg{width:13px; height:13px;}
      h2.section{font-size:15px; margin-bottom:10px; margin-top:4px;}
      .stats{grid-template-columns:repeat(2,1fr); gap:5px; margin-bottom:10px;}
      .stat .num{font-size:17px;}
      .stat .lbl{font-size:11px;}
      .stat{padding:5px 6px;}
      .exp-top{gap:8px;}
      .exp-info{flex-direction:column; align-items:flex-start; gap:4px;}
      .exp-company{font-size:13px;}
      .exp-years{font-size:11px; padding:3px 7px;}
      .exp-sub{font-size:12px; margin-top:5px; line-height:1.36;}
      .exp-niche{font-size:11px; margin-top:4px;}
      .exp-row{padding:12px;}
      .bar-top{font-size:12px; margin-bottom:5px;}
      .bar-item{margin-bottom:10px;}
      .tag{font-size:11px; padding:4px 7px; border-radius:10px;}
      .tag-row{gap:8px; margin-top:6px; margin-bottom:8px;}
      .body-grid{grid-template-columns:1fr; gap:16px;}
      .block{margin:22px 0 14px 0;}
      .spoiler-toggle{font-size:14px; margin-top:6px;}
      .spoiler-inner{font-size:11.5px; padding-top:6px;}
      .tool4-card { flex: 0 0 260px !important; }
      .tool4-img { height: 90px; }
      .tool4-icon-wrap { width: 36px; height: 36px; margin: -18px 0 0 12px; }
      .tool4-icon-wrap svg { width: 18px; height: 18px; }
      .tool4-content { padding: 10px 12px 12px;}
      .tool4-title { font-size: 14px; }
      .tool4-short { font-size: 11.5px; }
      .tool4-extra { font-size: 11px; }
      /* на тач-экранах стрелки карусели не уменьшаем ниже 40px */
      .tool4-nav-btn svg { width: 16px; height: 16px; }
      .tool4-header { margin-bottom: 12px; padding-bottom: 5px; }
      .roles-grid { grid-template-columns: 1fr; }
      .mjs-app-wrapper { height: 340px; }
      .mjs-word { font-size: 16px; }

      /* Контакты: максимально плотно, всё ещё в одну строку (до 680px) */
      .footer-contacts{min-height:280px; margin-top:24px;}
      .contacts__qr-code{width:36px; height:36px; padding:2px;}
      .contacts__qr-label{font-size:10px;}
      .contacts__qr{gap:4px;}

      /* 540–899px: фото и текст остаются рядом (Вариант A — равные колонки), не в столбик */
      .cta-contacts__photo-wrap{min-height:260px;}
    }

    @media (max-width: 679px) {
      /* Теги: шрифт ~в 1.5 раза меньше базовых 18px, но не ниже 13px —
         ниже этого их уже неудобно и читать, и хватать пальцем */
      .mjs-app-wrapper { height: 330px; }
      .mjs-word { font-size: 13px; }

      .footer-contacts { min-height: auto;}
      .contacts__qr { flex-shrink: 0; }
      .contacts__qr-code { width: 46px; height: 46px; }
      .contacts__qr-label { display: none; }

      .cta-contacts{ margin-top: 30px; border-radius: 12px; }
      /* Всё ещё рядом (фото+текст) вплоть до 540px — только столбец с контактами ниже становится вертикальным */
      .cta-contacts__photo-wrap{ min-height: 230px; }
      .cta-contacts__body{ padding: 22px; gap: 16px; }
      .cta-contacts__blurb{ font-size: 13.5px; max-width: 100%; }
      .cta-contacts__row{ flex-direction: column; }
      .cta-contacts__tile{
        flex-basis: auto;
        border-left: none;
        border-top: 1px solid var(--panel-line);
        padding: 16px 22px;
      }
      .cta-contacts__tile:first-child{ border-top: none; }
    }

    /* ≤479px — самые узкие телефоны. Раньше этот порог стоял на 539px, и
       480-539px получали урезанные значения без реальной необходимости —
       470px "лишней" ширины хватает на то, чтобы выглядеть как 540-679px
       (see тир ниже). Пересчитано отдельно от 480-679, а не просто
       скопировано с 539px: там разброс уже не помещался. */
    @media (max-width:479px){
      /* На таких узких экранах фото сбоку не помещается ни в каком разумном
         размере — сжатый до 90px вариант делал его практически незаметным.
         Вместо этого фото физически перенесено в HTML внутрь .header-text,
         между .descriptor и первым .meta-row (см. index.html), и здесь
         просто выключается его абсолютное позиционирование — тогда оно
         встаёт в обычный поток документа на своём новом месте, по центру,
         во всю доступную ширину сверху и снизу от себя. */
      .header-wrap{ padding-right: 0; }
      /* .photo-frame — общий контейнер для фото и его свечения (см. HTML):
         сам он в потоке документа, а внутри него уже позиционируется
         свечение относительно фото, а не координат страницы. Ширина в %,
         не px — чтобы фото стабильно оставалось ≥50% ширины на всём
         диапазоне 320-479px, а не только у нижней границы. */
      .header-wrap .photo-frame{
        position: relative;
        width: 60%;
        max-width: 260px;
        margin: 24px auto 0;
      }
      .header-wrap .photo{
        position: static;
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 400 / 480;
      }
      .header-wrap .photo-glow{
        position: absolute;
        top: -14%; right: -14%; bottom: -14%; left: -14%;
        width: auto; height: auto;
      }
      /* Плашки ниже фото допустимо слегка наезжают на его нижний край —
         там фото и так уходит в прозрачность по маске */
      .photo-frame + .meta-row{ margin-top: -28px; }

      /* Ниже 480px даже 12-13px читается с трудом — держим пол 14px для
         содержательного текста и 12px для плашек/сносок/уточнений */
      .descriptor,
      .eyebrow,
      .exp-sub,
      .exp-company,
      .bar-top span,
      .role-subtitle,
      .cta-contacts__role,
      .cta-contacts__value,
      .cta-contacts__button,
      .cta-contacts__blurb,
      .exp-list .spoiler-inner li{
        font-size: 14px;
      }
      .meta-chip,
      .stat .lbl,
      .tag,
      .exp-years,
      .exp-niche{
        font-size: 12px;
      }

      /* Раньше строка/год всегда стояли колонкой (flex-direction:column) —
         год гарантированно уходил под название роли, даже когда места
         хватало. Теперь строка — обычный ряд без переноса самих элементов
         (flex-wrap:nowrap): год как был компактным и нерастяжимым, так и
         остаётся на месте, а сокращается (и переносится ВНУТРИ себя, если
         не помещается) только название роли — за счёт min-width:0, которая
         разрешает flex-элементу сжиматься меньше своей исходной ширины. */
      .exp-header{
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: baseline;
        justify-content: space-between;
        gap: 8px;
      }
      .exp-header .exp-company{
        min-width: 0;
        flex: 1 1 auto;
      }
      .exp-header .exp-years{
        flex-shrink: 0;
      }
      .tool4-card { flex: 0 0 85% !important; }
      .tool4-img { height: 80px; }
      .tool4-title { font-size: 16px; }
      .tool4-short, .tool4-extra { font-size: 11px; }
      .mjs-app-wrapper { height: 320px; }
      .mjs-word { font-size: 12px; }

      /* Ниже 480px фото и текст уже не помещаются рядом — переходят в столбик */
      .cta-contacts__top{ grid-template-columns: 1fr; }
      .cta-contacts__photo-wrap{ min-height: 200px; }
    }

    /* === RESUMEACTIONS: PDF / ПЕЧАТЬ / ПОДЕЛИТЬСЯ (плавающая панель) ===
       Наследует шрифты, цвета (CSS-переменные) и радиусы скругления страницы —
       собственной палитры/шрифтов у виджета нет. */
    .resume-actions{
      --fab-gap: 24px;
      position: fixed;
      left: 50%;
      right: auto;
      bottom: 10px;
      transform: translateX(-50%);
      z-index: 90;
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 6px;
      padding: 6px;
      background: var(--panel);
      border: 1px solid var(--panel-line);
      border-radius: 16px;
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      box-shadow: 0 12px 32px rgba(0,0,0,0.35);
    }
    .resume-actions__btn{
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: 'IBM Plex Mono', monospace;
      font-weight: 600;
      font-size: 13px;
      color: var(--text);
      background: transparent;
      border: 1px solid transparent;
      padding: 10px 14px;
      border-radius: 9px;
      cursor: pointer;
      text-decoration: none;
      transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease, color .2s ease;
    }
    .resume-actions__btn svg{ width: 17px; height: 17px; flex-shrink: 0; }
    .resume-actions__btn:hover{
      transform: translateY(-2px);
      border-color: rgba(166,224,138,0.4);
      background: rgba(166,224,138,0.06);
      color: var(--green);
    }
    .resume-actions__btn:active{ transform: translateY(0); }
    .resume-actions__btn:focus-visible{
      outline: 2px solid var(--green);
      outline-offset: 2px;
    }
    .resume-actions__btn--copied{
      border-color: rgba(166,224,138,0.5);
      background: rgba(166,224,138,0.1);
      color: var(--green);
    }


    /* Ниже 1080px — панель без подписей, только иконки (title показывает подсказку при наведении) */
    @media (max-width:1079px){
      .resume-actions{ --fab-gap: 16px; gap: 2px; padding: 5px; bottom: 8px;}
      .resume-actions__btn{ padding: 11px; }
      .resume-actions__label{
        position: absolute;
        width: 1px; height: 1px;
        overflow: hidden;
        clip: rect(0,0,0,0);
        white-space: nowrap;
      }
    }

    @media (min-width:540px) and (max-width:679px){
      .resume-actions{ bottom: 10px;}
    }

    /* От 1220px и выше — вертикально, иконками, над кнопкой "Наверх" (тот же правый угол) */
    @media (min-width:1220px){
      /* Вертикальная панель у правого края.
         В начале страницы висит в правом верхнем углу; как только появляется
         кнопка "Наверх" — плавно съезжает вниз, вставая ровно над этой кнопкой.
         Обратный скролл так же плавно возвращает её наверх.

         Якорь всегда один и тот же (top), движение — через transform, чтобы
         не анимировать переход top <-> bottom (браузер это не умеет).
         Саму анимацию делает JS (script.js, requestAnimationFrame) — он же
         на каждом кадре выставляет inline transform, перекрывая значение
         .is-docked ниже. Оно остаётся как мгновенный fallback на случай,
         если JS отключён. */
      .resume-actions{
        left: auto;
        right: 20px;
        top: 24px;
        bottom: auto;
        transform: translateY(0);
        will-change: transform;
        flex-direction: column;
        gap: 2px;
        padding: 6px;
      }
      .resume-actions.is-docked{
        transform: translateY(calc(100vh - 108px - 100%));
      }
      .resume-actions__btn{ padding: 11px; }
      .resume-actions__label{
        position: absolute;
        width: 1px; height: 1px;
        overflow: hidden;
        clip: rect(0,0,0,0);
        white-space: nowrap;
      }
    }

    /* === ПОДВАЛ СТРАНИЦЫ (копирайт) ===
       Независим от .block: свои отступы и своя логика по брейкпоинтам.
       Floating Action Bar и "Наверх" — fixed и лежат ПОВЕРХ подвала, на одном
       с ним уровне. Так и задумано: это убирает и большой зазор внизу страницы,
       и наложение бара на блок контактов. Место под бар НЕ резервируем —
       кроме экранов уже 540px, где бар по центру закрывал бы половину строки
       копирайта: там подвал отводит полосу ровно в высоту бара. */
    .page-footer{
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 16px;
      margin-top: 40px;
      padding-bottom: 32px;
    }
    @media (min-width:1920px){
      .page-footer{ margin-top: 50px; padding-bottom: 36px; }
    }
    @media (max-width:1439px){
      .page-footer{ margin-top: 44px; padding-bottom: 32px; }
    }
    @media (max-width:1219px){
      .page-footer{ margin-top: 36px; padding-bottom: 28px; }
    }
    @media (max-width:1079px){
      .page-footer{ margin-top: 28px; padding-bottom: 24px; }
    }
    @media (max-width:899px){
      .page-footer{ padding-bottom: 14px; }
    }
    @media (max-width:679px){
      .page-footer{ padding-bottom: 15px; }
    }
    /* Уже 540px строка копирайта короче ширины бара — отводим полосу под него:
       16px отступ снизу + 53px высота бара + 8px просвет */
    @media (max-width:539px){
      .page-footer{ margin-top: 20px; padding-bottom: 77px; }
    }

    /* === КНОПКА "НАВЕРХ" === */
    .back-to-top{
      position: fixed;
      bottom: 10px;
      right: 24px;
      z-index: 100;
      width: 50px; height: 50px;
      border-radius: 25%;
      background: var(--panel);
      backdrop-filter: blur(14px);
      border: 1px solid var(--panel-line);
      color: var(--text);
      display: flex; align-items: center; justify-content: center;
      text-decoration: none;
      opacity: 0;
      pointer-events: none;
      transform: translateY(14px) scale(.9);
      /* появление/скрытие — плавно, с лёгким выездом снизу */
      transition:
        opacity .32s cubic-bezier(.22,.61,.36,1),
        transform .32s cubic-bezier(.22,.61,.36,1),
        border-color .25s ease,
        color .25s ease,
        box-shadow .25s ease;
      will-change: opacity, transform;
    }
    .back-to-top.visible{
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0) scale(1);
    }
    .back-to-top:hover{
      border-color: rgba(166,224,138,0.5);
      color: var(--green);
      box-shadow: 0 6px 16px rgba(166,224,138,0.15);
    }
    .back-to-top:focus-visible{
      outline: 2px solid var(--green);
      outline-offset: 3px;
    }
    .back-to-top:active{ transform: translateY(0) scale(.94); }
    .back-to-top svg{ width: 20px; height: 20px; }

    @media (max-width:539px){
      /* 44x44 — минимальный размер тач-таргета, уменьшаем только отступы от края */
      .back-to-top{ bottom: 14px; right: 14px; }
      .back-to-top svg{ width: 18px; height: 18px; }
    }

    /* === ПЕЧАТЬ / PDF: раскрываем скрытый контент, убираем интерактивные элементы === */
    @media print{
      .back-to-top, .resume-actions, .tool4-nav, .spoiler-toggle, #stackToggleOpen, #stackToggleClose{
        display: none !important;
      }
      .spoiler-body, .tool4-extra, .spoiler-body-wide, .stack-panel{
        max-height: none !important;
        opacity: 1 !important;
        overflow: visible !important;
      }
      .tool4-row{
        overflow-x: visible !important;
        flex-wrap: wrap !important;
        width: auto !important;
        margin-left: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
      }
      .tool4-card{ flex: 0 0 320px !important; }
      .mjs-app-wrapper{ display: none !important; }
    }