@font-face {font-family: 'Manrope'; font-style: normal; font-weight: 500; font-display: swap; src: url(../_fonts/manrope-500-normal-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
@font-face {font-family: 'Manrope'; font-style: normal; font-weight: 500; font-display: swap; src: url(../_fonts/manrope-500-normal-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face {font-family: 'Manrope'; font-style: normal; font-weight: 500; font-display: swap; src: url(../_fonts/manrope-500-normal-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face {font-family: 'Manrope'; font-style: normal; font-weight: 500; font-display: swap; src: url(../_fonts/manrope-500-normal-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face {font-family: 'Manrope'; font-style: normal; font-weight: 700; font-display: swap; src: url(../_fonts/manrope-700-normal-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
@font-face {font-family: 'Manrope'; font-style: normal; font-weight: 700; font-display: swap; src: url(../_fonts/manrope-700-normal-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face {font-family: 'Manrope'; font-style: normal; font-weight: 700; font-display: swap; src: url(../_fonts/manrope-700-normal-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face {font-family: 'Manrope'; font-style: normal; font-weight: 700; font-display: swap; src: url(../_fonts/manrope-700-normal-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face {font-family: 'Manrope'; font-style: normal; font-weight: 800; font-display: swap; src: url(../_fonts/manrope-800-normal-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
@font-face {font-family: 'Manrope'; font-style: normal; font-weight: 800; font-display: swap; src: url(../_fonts/manrope-800-normal-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face {font-family: 'Manrope'; font-style: normal; font-weight: 800; font-display: swap; src: url(../_fonts/manrope-800-normal-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face {font-family: 'Manrope'; font-style: normal; font-weight: 800; font-display: swap; src: url(../_fonts/manrope-800-normal-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

:root{
  --ember-2:#FF3D00;
  --spark:#FFC24B;
  --trust:#3B82F6;
}

.af-nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--steel) 68%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.af-nav-in{display:flex;align-items:center;gap:16px;height:96px}
.wrap.af-nav-in{max-width:1152px;padding:0 24px}

.af-nav a,.af-mobile a{text-decoration:none}
.af-brand{display:flex;align-items:center;transition:opacity .2s}
.af-brand:hover{opacity:.9}
.af-logo{height:64px;width:auto;flex:none;display:block}

.af-menu{margin-left:auto;display:none;gap:28px;font-size:15px;font-weight:500}
.af-menu a{color:var(--muted);transition:color .2s}
.af-menu a:hover{color:var(--text)}
.af-menu a.on{color:var(--ember);border-bottom:2px solid var(--ember);padding-bottom:2px}

.af-cta{margin-left:auto;display:inline-flex;align-items:center;gap:8px;padding:13px 22px;border-radius:12px;font-size:15px;font-weight:600;white-space:nowrap;color:#0b0d10;background:linear-gradient(135deg,var(--ember),var(--ember-2));box-shadow:0 10px 30px color-mix(in srgb,var(--ember) 38%,transparent);transition:transform .18s ease,filter .18s ease}
.af-cta:hover{transform:translateY(-2px);filter:brightness(1.07)}
.af-cta-full{display:none}

.af-burger{display:grid;place-items:center;width:40px;height:40px;flex:none;border-radius:12px;border:1px solid var(--line);background:transparent;color:var(--muted);font-size:20px;line-height:1;cursor:pointer}

.af-mobile{border-top:1px solid var(--line);padding:6px 0 14px}
.af-mobile[hidden]{display:none}
.af-mobile .wrap{display:flex;flex-direction:column;max-width:1152px;padding:0 24px}
.af-mobile a{padding:12px 0;font-size:15px;font-weight:500;color:var(--text);border-bottom:1px solid var(--line)}
.af-mobile a:last-child{border-bottom:0}
.af-mobile a.on{color:var(--ember)}

@media(max-width:639px){
  .af-nav-in{gap:12px;height:80px}
  .wrap.af-nav-in,.af-mobile .wrap{padding:0 16px}
  .af-logo{height:52px}
  .af-cta{padding:10px 15px}
}
@media(min-width:640px){.af-cta-full{display:inline}.af-cta-short{display:none}}
@media(min-width:1024px){.af-menu{display:flex}.af-cta{margin-left:8px}.af-burger,.af-mobile{display:none}}
@media(min-width:1024px) and (max-width:1151px){.af-menu{gap:16px}}

.af-aurora{position:absolute;inset:-25% -10% auto -10%;height:680px;z-index:0;pointer-events:none;filter:blur(18px);
  background:
    radial-gradient(600px 340px at 28% 18%,color-mix(in srgb,var(--ember) 26%,transparent),transparent 70%),
    radial-gradient(560px 320px at 80% 6%,color-mix(in srgb,var(--trust) 22%,transparent),transparent 70%);
  animation:af-drift 15s ease-in-out infinite alternate}
@keyframes af-drift{from{transform:translate3d(-2%,0,0) scale(1)}to{transform:translate3d(3%,2%,0) scale(1.08)}}

.af-grid{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.6;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 0%,#000 40%,transparent 76%);
  mask-image:radial-gradient(ellipse 70% 60% at 50% 0%,#000 40%,transparent 76%)}

@media(prefers-reduced-motion:reduce){.af-aurora{animation:none}}

.af-crumbs{position:relative;z-index:1;margin-bottom:22px;font-size:14px;color:var(--muted)}
.af-crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;list-style:none;margin:0;padding:0}
.af-crumbs li{display:flex;align-items:center;gap:8px;min-width:0}
.af-crumbs a{color:var(--muted);transition:color .2s}
.af-crumbs a:hover{color:var(--text)}
.af-crumbs [aria-current]{color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

body{position:relative}
.af-tech{position:absolute;inset:0;z-index:-1;pointer-events:none}
.af-tech-grid{
  position:absolute;inset:0;opacity:.40;
  background-image:
    linear-gradient(rgba(255,255,255,.20) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.20) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:
    radial-gradient(760px 520px at 76% 6%,#000 0%,transparent 72%),
    radial-gradient(680px 460px at 12% 34%,#000 0%,transparent 72%),
    radial-gradient(640px 440px at 88% 60%,#000 0%,transparent 72%),
    radial-gradient(720px 480px at 30% 89%,#000 0%,transparent 72%);
  mask-image:
    radial-gradient(760px 520px at 76% 6%,#000 0%,transparent 72%),
    radial-gradient(680px 460px at 12% 34%,#000 0%,transparent 72%),
    radial-gradient(640px 440px at 88% 60%,#000 0%,transparent 72%),
    radial-gradient(720px 480px at 30% 89%,#000 0%,transparent 72%);
}
.af-tech-glow{
  position:absolute;inset:0;
  background:
    radial-gradient(760px 520px at 76% 6%,color-mix(in srgb,var(--ember) 20%,transparent),transparent 70%),
    radial-gradient(680px 460px at 12% 34%,color-mix(in srgb,var(--ember) 12%,transparent),transparent 70%),
    radial-gradient(640px 440px at 88% 60%,color-mix(in srgb,var(--spark) 10%,transparent),transparent 70%),
    radial-gradient(720px 480px at 30% 89%,color-mix(in srgb,var(--ember) 14%,transparent),transparent 70%);
}
.af-tech-nodes{position:absolute;inset:0;opacity:.55}
.af-tech-nodes i{position:absolute;width:4px;height:4px;border-radius:50%;background:var(--ember);
  box-shadow:0 0 10px color-mix(in srgb,var(--ember) 90%,transparent)}
.af-tech-nodes s{position:absolute;width:6px;height:6px;text-decoration:none;
  border-left:1px solid rgba(255,255,255,.22);border-top:1px solid rgba(255,255,255,.22)}
.af-sysline{position:absolute;height:1px;width:300px;transform-origin:0 50%;opacity:.4;
  background:linear-gradient(90deg,transparent,var(--ember),transparent)}
.af-sysline::after{content:"";position:absolute;right:-2px;top:-2px;width:5px;height:5px;border-radius:50%;
  background:var(--ember);box-shadow:0 0 10px color-mix(in srgb,var(--ember) 90%,transparent)}
@media(max-width:680px){.af-sysline{display:none}}

.w{position:relative;overflow:hidden}
.w::after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;opacity:0;pointer-events:none;
  background:linear-gradient(135deg,#6E7A8C,transparent 38%,transparent 62%,var(--ember));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;transition:opacity .3s ease;
}
.w:hover::after{opacity:1}

/* переключатель языка: тот же вид, что в приложении Next, но на переменных портфолио.
   Подсказка нарисована на CSS, скрипт не участвует. Своё title не ставим, иначе
   рядом всплывёт вторая, системная. */
.af-lang{
  position:relative;flex:none;display:none;align-items:center;justify-content:center;
  height:36px;min-width:46px;padding:0 12px;border:1px solid var(--line);border-radius:10px;
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;font-weight:500;letter-spacing:.08em;
  color:var(--muted);transition:color .18s,border-color .18s,background .18s}
.af-lang:hover,.af-lang:focus-visible{
  color:var(--ember);border-color:color-mix(in srgb,var(--ember) 50%,transparent);
  background:color-mix(in srgb,var(--ember) 8%,transparent)}
.af-lang::after{
  content:attr(data-tip);position:absolute;top:calc(100% + 11px);left:50%;
  transform:translateX(-50%) translateY(-4px);padding:7px 11px;border-radius:9px;
  border:1px solid var(--line);background:var(--steel-2);color:var(--text);
  font-family:var(--sans);font-size:12.5px;font-weight:500;letter-spacing:0;line-height:1.3;
  white-space:nowrap;opacity:0;pointer-events:none;box-shadow:0 10px 28px rgba(0,0,0,.5);
  transition:opacity .16s ease,transform .16s ease;z-index:60}
.af-lang:hover::after,.af-lang:focus-visible::after{opacity:1;transform:translateX(-50%) translateY(0)}
/* до 640 px переключателя в строке нет, он уходит в раскрытое меню: четвёртый
   элемент в строку на телефоне не влезает, это замерено на основном сайте */
@media(min-width:640px){.af-lang{display:inline-flex;margin-left:auto}.af-cta{margin-left:0}}
@media(min-width:1024px){.af-lang{margin-left:0}.af-cta{margin-left:8px}}
.af-mobile .af-lang-row{display:flex;align-items:center;justify-content:space-between;padding-top:16px}
.af-mobile .af-lang-row span{color:var(--muted);font-size:15px;font-weight:500}
.af-mobile .af-lang{display:inline-flex}
@media(min-width:640px){.af-mobile .af-lang-row{display:none}}

/* ---------- список «Услуги» в шапке ---------- */
/* details, а не скрипт: портфолио это статика, и меню обязано работать без JS */
.af-drop{position:relative}
.af-drop>summary{list-style:none;cursor:pointer;color:var(--muted);display:inline-flex;align-items:center;gap:6px;transition:color .2s}
.af-drop>summary::-webkit-details-marker{display:none}
.af-drop>summary:hover,.af-drop[open]>summary{color:var(--text)}
.af-caret{width:8px;height:8px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg);margin-top:-3px;transition:transform .2s}
.af-drop[open] .af-caret{transform:rotate(-135deg);margin-top:2px}
/* панель висит под шапкой: 96px это её высота, кнопка стоит по центру */
.af-drop-panel{position:absolute;left:0;top:calc(100% + 46px);width:268px;display:flex;flex-direction:column;
  gap:2px;padding:8px;border-radius:16px;border:1px solid var(--line);background:var(--steel);
  box-shadow:0 18px 44px rgba(0,0,0,.45)}
.af-drop-panel a{padding:10px 12px;border-radius:10px;color:var(--muted);transition:color .2s,background .2s}
.af-drop-panel a:hover{color:var(--text);background:rgba(255,255,255,.05)}

/* мобильное меню: «Услуги» подписью, пункты с отступом, без вложенного раскрытия */
.af-mob-label{padding:12px 0;font-size:15px;font-weight:500;color:var(--muted);border-bottom:1px solid var(--line)}
.af-mobile a.af-sub{padding-left:20px}