:root{
  --clr-deep:#002a48; --clr-accent:#39a0ff; --clr-ivory:#f5f6f7;; --clr-text:#fff;
  --glass-rgb:20,34,52; --glass:rgba(var(--glass-rgb),.52); --glass-hr:rgba(255,255,255,.08); --bd:rgba(255,255,255,.12);
  --radius-lg:20px; --radius-md:16px;
  --wrap:min(1120px,100% - 32px); --header-h:64px;
  --shadow-2:0 2px 10px rgba(0,0,0,.25);
}

*,*:before,*:after{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,"Noto Sans","Helvetica Neue",sans-serif;color:var(--clr-text);
  background:radial-gradient(1200px 600px at 70% -10%,#053a62 0%,var(--clr-deep) 56%) fixed;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img,picture,svg{display:block;max-width:100%}
a{color:var(--clr-ivory);text-decoration:none}
a:hover,a:focus-visible{color:var(--clr-accent)}
.skip{position:absolute;left:-9999px;top:-9999px}
.skip:focus{left:12px;top:12px;z-index:10000;background:var(--clr-accent);color:#001523;padding:8px 10px;border-radius:8px}

/* Layout */
.wrap{width:var(--wrap);margin-inline:auto}
.section{padding:calc(24px + env(safe-area-inset-top)) 0 64px;scroll-margin-top:calc(var(--header-h) + 12px)}
.section-title{font-size:clamp(22px,2vw + 12px,34px);margin:0 0 14px;letter-spacing:.3px}
.section-sub{margin:0 0 20px;color:rgba(255,255,255,.9)}

/* Header */
.site-header{position:sticky;top:0;z-index:1000;height:var(--header-h);backdrop-filter:blur(12px);
  background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.35));border-bottom:1px solid var(--glass-hr)}
.site-header .wrap{height:100%;display:flex;align-items:center;gap:12px;padding:0 env(safe-area-inset-right) 0 env(safe-area-inset-left)}
.logo{color:var(--clr-ivory);display:flex;align-items:center}
.main-nav{margin-left:auto;display:flex;align-items:center;gap:12px}
.nav-list{display:flex;align-items:center;gap:12px;list-style:none;padding:0;margin:0}
.nav-link{display:inline-flex;align-items:center;justify-content:center;height:36px;padding:0 12px;border-radius:999px;color:rgba(255,255,255,.9)}
.nav-link.is-active,.nav-link:hover{background:rgba(57,160,255,.15);color:var(--clr-text);outline:1px solid rgba(57,160,255,.25)}
.nav-cta{display:flex;align-items:center;gap:10px}
.nav-cta .btn-cta{height:38px}

/* Burger */
.burger{display:none;width:42px;height:42px;border-radius:10px;border:1px solid var(--glass-hr);background:rgba(0,0,0,.25);position:relative}
.burger-box,.burger-box:before,.burger-box:after{content:"";position:absolute;left:9px;right:9px;height:2px;background:#fff;border-radius:2px;transition:.2s ease}
.burger-box{top:20px}.burger-box:before{top:-8px}.burger-box:after{bottom:-8px}
.burger[aria-expanded="true"] .burger-box{transform:rotate(45deg)}
.burger[aria-expanded="true"] .burger-box:before{top:0;transform:rotate(90deg)}
.burger[aria-expanded="true"] .burger-box:after{bottom:0;opacity:0}

/* NAV container (desktop as flow; mobile becomes fullscreen panel) */
.nav-panel{display:contents}

/* ================= MOBILE NAV — FULLSCREEN (как панель языка) ================ */
@media (max-width:1000px){
  .burger{ display:inline-block; }

  /* iOS/Sticky header hack: вытащить панель из-под шапки и растянуть на полный экран */
  .nav-panel{
    position: fixed;
    left: 0; right: 0;
    top: calc(-1 * var(--header-h));
    height: calc(100vh + var(--header-h));
    z-index: 1100;

    display: flex; flex-direction: column;
    background: rgba(0,0,0,.65);
    backdrop-filter: blur(10px);

    opacity: 0; pointer-events: none; transform: translateY(-6px);
    transition: opacity .18s ease, transform .18s ease;
  }
  .nav-panel.open{ opacity: 1; pointer-events: auto; transform: translateY(0); }

  .nav-panel::before{
    content: "Меню";
    position: sticky; top: 0; z-index: 1;
    display: block;
    padding: 12px 16px;
    font-size: 18px; font-weight: 700; color: var(--clr-text);
    background: rgba(var(--glass-rgb), .72);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--glass-hr);
    margin-bottom: 8px;
  }

  .nav-list{
    flex: 1; overflow: auto;
    display: grid; gap: 10px;
    list-style: none; margin: 0; padding: 8px 16px 16px;
    align-content: start;
  }

  .nav-link{
    display: flex; align-items: center; justify-content: flex-start;
    height: 48px; padding: 0 14px;
    border-radius: var(--radius-md);
    background: rgba(var(--glass-rgb), .88);   /* плотный фон = читаемо */
    border: 1px solid var(--bd);
    box-shadow: var(--shadow-2);
    color: var(--clr-text); font-size: 16px; font-weight: 600;
  }
  .nav-link.is-active, .nav-link:hover{
    background: rgba(57,160,255, .16);
    outline: 1px solid rgba(57,160,255, .28);
  }
}


/* Glass (общий) */
.glass{background:var(--glass);border:1px solid var(--bd);border-radius:var(--radius-lg);box-shadow:var(--shadow-2);backdrop-filter:blur(10px)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;gap:8px;height:40px;border-radius:999px;border:1px solid var(--bd);background:rgba(255,255,255,.06);color:var(--clr-text);
  transition:transform .08s ease,box-shadow .08s ease,background .12s ease}
.btn:hover{background:rgba(255,255,255,.12)}
.btn:active{transform:translateY(1px)}
.btn-lg{padding:12px 18px}
.btn-cta{background:linear-gradient(180deg,#53b2ff,var(--clr-accent));color:#001523;border-color:rgba(255,255,255,.25);box-shadow:0 6px 18px rgba(57,160,255,.35)}
.btn-ghost{background:rgba(0,0,0,.2);border-color:rgba(255,255,255,.18)}
.btn-icon .ico{width:18px;height:18px}
.link-under{margin-top:8px}

/* BG decor */
.bg-grid{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(800px 400px at 90% -20%, rgba(57,160,255,.12), transparent 70%),
    radial-gradient(600px 300px at 10% -10%, rgba(217,212,193,.08), transparent 70%),
    linear-gradient(transparent, transparent),
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:100% 100%,100% 100%,100% 100%,56px 56px,56px 56px}

/* ================= HERO (только эта секция переоформлена) ================ */
.hero{ padding-bottom:24px; }
.grid-hero{
  display:grid;
  grid-template-columns:7fr 3fr; /* 70% / 30% */
  gap:12px;
  align-items:stretch;
}
.hero-equal{ min-height:clamp(320px,44vh,460px); display:flex; flex-direction:column; justify-content:center; }
.hero .glass{ background:transparent; border:none; box-shadow:none; backdrop-filter:none; }
.hero-card{ padding:8px 0 0 0; }
.hero-card .lead{ color:rgba(255,255,255,.9); margin:8px 0 12px; }
.hero-ctas{ display:flex; gap:10px; flex-wrap:wrap }

.hero-visual{ position:relative; padding:6px; display:flex; align-items:center; justify-content:center; overflow:visible; }
.hero-visual-img{ width:clamp(180px,85%,360px); aspect-ratio:1/1; border-radius:999px; object-fit:cover; box-shadow:inset 0 0 80px rgba(0,0,0,.25); }
/* Кольца */
.ring{ position:absolute; inset:0; margin:auto; border-radius:999px; pointer-events:none; transform:none; }
.ring-1{ width:86%; height:86%; border:1px dashed rgba(217,212,193,.25); }
.ring-2{ width:70%; height:70%; border:1px dashed rgba(57,160,255,.25); }
.ring-3{ width:54%; height:54%; border:1px solid rgba(255,255,255,.10); }

@media (max-width:960px){
  .grid-hero{ grid-template-columns:1fr; }
  .hero-card{ padding:6px 0 0 0; }
  .hero-visual-img{ width:clamp(160px,60vw,360px); }
}

/* VALUE STRIP (верх и контакты) */
.value-strip{padding-top:16px;padding-bottom:16px}
.strip-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.strip-item{
  display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--radius-md);
  background:rgba(255,255,255,.04);border:1px solid var(--bd)
}
.strip-ic{
  width:50px;height:50px;border-radius:999px;display:grid;place-items:center;
  background:radial-gradient(100% 100% at 50% 0%, rgba(255,255,255,.12), rgba(255,255,255,.02));
  border:1px solid var(--bd)
}
.strip-ic svg{width:35px;height:35px}
.strip-t{font-weight:600}

/* Гриды секций */
.grid{display:grid;gap:14px}
.cards-3{grid-template-columns:repeat(3,1fr)}
.cards-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:960px){.cards-3{grid-template-columns:repeat(2,1fr)}.cards-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.cards-3,.cards-4{grid-template-columns:1fr}}

/* Карточки / иконки */
.card{padding:16px;min-height:120px}
.card h3{margin:2px 0 6px}
.muted{color:rgba(255,255,255,.7)}
.ic{display:flex;align-items:center;justify-content:center;margin-bottom:8px}
.ic-circle{width:54px;height:54px;border-radius:999px;background:radial-gradient(100% 100% at 50% 0%, rgba(255,255,255,.12), rgba(255,255,255,.04));border:1px solid var(--bd);position:relative}
.ab-icon{width:64px;height:64px;border-radius:12px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.06);object-fit:cover}

/* мелкие декоративные иконки в механиках */
.dot{width:8px;height:8px;border-radius:999px;background:var(--clr-accent);display:block}
.dot-lg{width:10px;height:10px}
.split-icon,.feed-icon,.virus-icon,.spore-icon,.league-icon{
  position:absolute;inset:0;margin:auto;width:28px;height:28px;border-radius:999px;
  background:conic-gradient(from 0deg, rgba(57,160,255,.85), rgba(217,212,193,.85));
  mask:radial-gradient(circle at 50% 50%, transparent 34%, #000 34.5%)
}
.virus-icon{background:conic-gradient(from 30deg, rgba(217,212,193,.9), rgba(57,160,255,.9))}
.spore-icon{background:radial-gradient(circle at 30% 30%, rgba(57,160,255,.9), rgba(0,0,0,0) 60%), conic-gradient(rgba(217,212,193,.9), rgba(57,160,255,.9))}
.league-icon{background:conic-gradient(rgba(57,160,255,.9), rgba(57,160,255,.3), rgba(217,212,193,.9))}

/* Скины — базовая сетка колонок */
.circle-grid{display:grid;grid-template-columns:repeat(4,1fr);align-items:start}
@media (max-width:900px){.circle-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.circle-grid{grid-template-columns:repeat(2,1fr)}}

/* VIP */
.vip-card{position:relative;overflow:hidden}
.vip-card:after{content:"";position:absolute;inset:-10% -10% auto -10%;height:60%;pointer-events:none;background:radial-gradient(60% 60% at 20% 0%, rgba(57,160,255,.22), transparent 60%)}
.vip-badge{position:absolute;top:12px;right:12px;background:rgba(57,160,255,.2);border:1px solid rgba(57,160,255,.35);color:var(--clr-text);padding:6px 10px;border-radius:999px;font-weight:700}

/* FAQ */
.faq{display:grid;gap:10px}
.faq-item{overflow:hidden}
.faq-q{width:100%;text-align:left;padding:14px 16px;font-size:16px;background:transparent;color:var(--clr-text);border:none;border-bottom:1px solid var(--glass-hr);display:flex;align-items:center;justify-content:space-between}
.faq-q:after{content:"";width:18px;height:18px;border-radius:4px;border:1px solid var(--bd);background:linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,0))}
.faq-q[aria-expanded="true"]:after{background:linear-gradient(180deg, rgba(57,160,255,.25), rgba(57,160,255,.05));border-color:rgba(57,160,255,.45)}
.faq-a{height:0;overflow:hidden;transition:height .2s ease;padding-inline:16px}
.faq-a>p{margin:12px 0 16px}

/* Links / footer */
.links-grid{display:flex;flex-wrap:wrap;gap:10px}
.link-chip{border-color:rgba(57,160,255,.35);background:rgba(57,160,255,.12)}
.site-footer{padding:24px 0 32px;border-top:1px solid var(--glass-hr)}
.center{text-align:center}.mt-16{margin-top:16px}

/* Overlay */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(2px);z-index:900;opacity:0;pointer-events:none;transition:opacity .15s ease}
.overlay.show{opacity:1;pointer-events:auto}
body.lock{overflow:hidden}

/* Lang dropdown (desktop inline) */
.lang{position:relative}
.lang-toggle{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 12px;border-radius:999px;border:1px solid var(--bd);background:rgba(255,255,255,.06);color:#fff}
.lang-toggle:focus-visible{outline:2px solid rgba(57,160,255,.55)}
.lang-menu{position:absolute;right:0;top:110%;min-width:140px;padding:6px;background:rgba(0,0,0,.6);border:1px solid var(--bd);border-radius:12px;backdrop-filter:blur(8px);box-shadow:var(--shadow-2);display:none}
.lang-menu.open{display:block}
.lang-menu .lang-item{width:100%;border:none;background:transparent;color:#fff;text-align:left;padding:8px 10px;border-radius:8px;cursor:pointer}
.lang-menu .lang-item:hover{background:rgba(255,255,255,.08)}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ==== HERO: убрать кольца и дать мягкую тень под маскотом ==== */
.hero-visual .ring { display: none !important; }
.hero-visual::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-6px;
  transform:translateX(-50%);
  width:min(82%, 360px);
  height:18px;
  background:radial-gradient(50% 100% at 50% 50%, rgba(0,0,0,.45), rgba(0,0,0,0) 70%);
  filter: blur(6px);
  opacity:.7;
  pointer-events:none;
}

/* ==== Скины: только круги ==== */
.circle-grid { gap:18px; }
.circle-card{
  padding:0; background:none !important; border:none !important; box-shadow:none !important;
}
.circle-card img{
  display:block; width:100%; aspect-ratio:1/1; border-radius:999px; object-fit:cover;
  background:none !important; border:1px solid rgba(255,255,255,.12);
}
.circle-card figcaption{ display:none !important; }
.circle-grid { grid-auto-rows:auto; }
.circle-card{ aspect-ratio:1/1; overflow:hidden; }

/* === Eat Mode v2 === */
body.eat-mode .site-main { pointer-events: none; }
#eatLayer{ position:fixed; inset:0; z-index:9999; pointer-events:none; }
#eatMascot{
  position:absolute; left:0; top:0;
  width:clamp(120px,12vw,180px); aspect-ratio:1/1;
  border-radius:50%;
  transform:translate(-50%,-50%);
  will-change:transform, filter;
  filter:drop-shadow(0 12px 24px rgba(0,0,0,.45));
  pointer-events:auto;
}
@keyframes dustOut{
  to{
    opacity:0;
    transform:translate(calc(var(--dx,0)*16px), calc(var(--dy,-1)*16px)) scale(.85) rotate(calc(var(--rot,0)*12deg));
    filter:blur(8px) saturate(.8);
  }
}
.eating{animation:dustOut .24s ease forwards;}
.eaten{opacity:0!important;visibility:hidden!important;pointer-events:none!important;}
body.eat-mode #eatMascot{ width:clamp(180px,18vw,270px); }

/* Link cards */
.link-card{ display:flex; align-items:center; gap:14px; padding:14px 16px; min-height:72px; }
.link-ico{ width:44px; height:44px; flex:0 0 44px; border-radius:12px; overflow:hidden; box-shadow:0 4px 12px rgba(0,0,0,.15); }
.link-ico img{ width:100%; height:100%; object-fit:contain; display:block; }
.link-meta{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.link-title{ font-weight:600; font-size:16px; line-height:1.2; padding-bottom:5px; }
.link-url{ font-size:13px; opacity:.82; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.link-card:hover .link-url{ opacity:1; }
@media (min-width:1024px){ .link-ico{ width:58px; height:58px; flex-basis:58px; } }

/* === SKINS orbit anim === */
.circle-grid{
  --orbit-r:12px; --orbit-dur:7s; --scale-min:.88; --stroke-w:3px; --stroke-color:#2ad1ff; --stroke-alpha:.9;
}
.circle-card{
  position:relative; border-radius:999px; overflow:hidden; isolation:isolate;
  will-change:transform; transform-origin:50% 50%;
  animation:nmk-orbit var(--orbit-dur) linear infinite;
}
.circle-card picture, .circle-card img{ display:block; width:100%; height:100%; object-fit:cover; }
.circle-card::after{ content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 var(--stroke-w) #001727; pointer-events:none; z-index:2; }
@keyframes nmk-orbit{
  0%{   transform:rotate(0deg)   translateX(var(--orbit-r)) rotate(0deg)    scale(1); }
  50%{  transform:rotate(180deg) translateX(var(--orbit-r)) rotate(-180deg) scale(var(--scale-min)); }
  100%{ transform:rotate(360deg) translateX(var(--orbit-r)) rotate(-360deg) scale(1); }
}
.circle-grid .circle-card:nth-child(1) { animation-delay: 0s; }
.circle-grid .circle-card:nth-child(2) { animation-delay: calc(-var(--orbit-dur) * 1/8); }
.circle-grid .circle-card:nth-child(3) { animation-delay: calc(-var(--orbit-dur) * 2/8); }
.circle-grid .circle-card:nth-child(4) { animation-delay: calc(-var(--orbit-dur) * 3/8); }
.circle-grid .circle-card:nth-child(5) { animation-delay: calc(-var(--orbit-dur) * 4/8); }
.circle-grid .circle-card:nth-child(6) { animation-delay: calc(-var(--orbit-dur) * 5/8); }
.circle-grid .circle-card:nth-child(7) { animation-delay: calc(-var(--orbit-dur) * 6/8); }
.circle-grid .circle-card:nth-child(8) { animation-delay: calc(-var(--orbit-dur) * 7/8); }
.circle-card picture{ animation:none !important; transform:none !important; }
@media (prefers-reduced-motion:reduce){
  .circle-card{ animation:none !important; transform:none !important; }
}

/* ==== Layout tweaks ==== */
#mech .card{
  display:grid; grid-template-columns:56px 1fr; grid-template-rows:auto auto;
  column-gap:12px; align-items:center;
}
#mech .card .ic{ grid-column:1; grid-row:1; margin:0; }
#mech .card h3{ grid-column:2; grid-row:1; margin:0; }
#mech .card p{ grid-column:1 / -1; grid-row:2; margin-top:8px; }

.hero-ctas{ display:flex; flex-wrap:wrap; gap:10px; }
.hero-ctas .btn{ flex:1 1 calc(50% - 8px); }
@media (max-width:640px){ .hero-ctas .btn{ flex-basis:calc(50% - 8px); } }

@media (max-width:640px){ .cards-3, .cards-4{ grid-template-columns:repeat(2,1fr); } }
html{ font-size: clamp(15px, 1.9vw, 16px); }

/* A11y helper text over burger */
.sr{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}

/* value-strip tweaks + zoom */
@media (max-width:720px){ .strip-grid{ grid-template-columns:repeat(2,1fr) !important; } }
.btn-icon{ justify-content:center; }
.btn-icon::after{ content:""; width:18px; height:18px; flex:0 0 auto; }
@media (max-width:650px){ html{ zoom:.9; } }
@media (max-width:460px){ html{ zoom:.7; } }
@media (max-width:650px){
  .hero-equal{ min-height:clamp(320px,30vh,460px); }
  .value-strip .strip-grid{ grid-template-columns:repeat(2,1fr) !important; }
  .value-strip .strip-grid > .strip-item:nth-child(3){ grid-column:1 / -1; }
}
.btn-lg{ height:56px; font-size:18px; }

/* ABILITIES layout */
.ability{
  display:grid; grid-template-columns:56px 1fr; grid-template-rows:auto auto;
  column-gap:12px; row-gap:8px; align-items:center;
}
.ability-head{ grid-column:1 / -1; display:flex; align-items:center; gap:12px; }
.ability-ico{ width:56px; height:56px; border-radius:12px; }
.ability h3{ margin:0; }
.ability-desc{ grid-column:1 / -1; margin-top:8px; }

/* Language fullscreen panel (мобилка) */
@media (max-width:1000px){
  .lang-top-toggle{
    display:inline-flex; align-items:center; gap:6px;
    height:38px; padding:0 12px; border-radius:999px; border:1px solid var(--bd);
    background:rgba(255,255,255,.06); color:var(--clr-text);
  }
  .lang-panel[hidden]{ display:none; }
  .lang-panel{
    position:fixed; inset:0; z-index:1100;
    display:flex; flex-direction:column;
    background:rgba(0,0,0,.65); backdrop-filter:blur(8px);
  }
  .lang-panel-title{
    position:sticky; top:0; z-index:1; margin:0 0 8px; padding:12px 16px;
    font-size:18px; font-weight:700; color:var(--clr-text);
    background:rgba(var(--glass-rgb), .72); border-bottom:1px solid var(--glass-hr);
  }
  .lang-panel-inner{ flex:1; overflow:auto; padding:16px; }
  .lang-list{ display:grid; gap:10px; }
  .lang-list .lang-item{
    width:100%; text-align:left; padding:14px 16px;
    border-radius:var(--radius-md); border:1px solid var(--bd);
    background:rgba(var(--glass-rgb), .88); color:var(--clr-text);
    font-weight:600; font-size:16px; cursor:pointer; box-shadow:var(--shadow-2);
  }
  .lang-list .lang-item.is-active{ outline:2px solid rgba(57,160,255,.45); }
}

/* DESKTOP (≥1000px): показываем только десктопный язык, ставим его справа */
@media (min-width:1000px){
  /* если есть мобильные элементы языка — глушим их на ПК */
  .lang-top-toggle,
  .lang-panel { display: none !important; }

  /* язык справа от меню */
  .nav-list{ margin-right: auto; }  /* меню тянет пространство */
  .nav-cta{ margin-left: 0; }       /* язык остаётся справа от меню */
  .burger{ display: none; }         /* бургер прячем на ПК, если он не скрывается сам */
}

/* MOBILE (<1000px): показываем только мобильный язык; десктопный дропдаун глушим */
@media (max-width:999.98px){
  /* если в DOM есть десктопный .lang (дропдаун) — прячем его на мобиле,
     оставляем только мобильные элементы: .lang-top-toggle + .lang-panel */
  .lang{ display: none !important; }
  .lang-top-toggle{ display: inline-flex; } /* сам вид переключалки в шапке */
  /* .lang-panel показывается/прячется скриптом через [hidden], CSS ниже только базовый стиль */
}
/* DESKTOP (≥1000px): меню слева, язык справа, без дублей */
@media (min-width:1000px){
  .nav-list{ order:1; }                 /* список меню – первым */
  .lang-inline{ order:2; margin-left:auto; }  /* язык – вторым и прижат вправо */

  /* скрыть мобильные элементы языка и бургер на ПК */
  .lang-top-toggle,
  .lang-panel,
  .burger{ display:none !important; }
}

/* === MECHANICS: webp-иконки 1..6 из /img, без правок HTML/JS === */
#mech .ic-circle > span{ display:none !important; }     /* прячем старые псевдоиконки */
#mech .ic-circle{ position:relative; }
#mech .ic-circle::after{
  content:""; position:absolute; inset:0; margin:auto;
  width:28px; height:28px; border-radius:6px;
  background-repeat:no-repeat; background-position:center; background-size:contain;
}

/* соответствие карточек и файлов */
#mech .grid.cards-3 > .card:nth-child(1) .ic-circle::after{ background-image:url("./img/1.webp"); }
#mech .grid.cards-3 > .card:nth-child(2) .ic-circle::after{ background-image:url("./img/2.webp"); }
#mech .grid.cards-3 > .card:nth-child(3) .ic-circle::after{ background-image:url("./img/3.webp"); }
#mech .grid.cards-3 > .card:nth-child(4) .ic-circle::after{ background-image:url("./img/4.webp"); }
#mech .grid.cards-3 > .card:nth-child(5) .ic-circle::after{ background-image:url("./img/5.webp"); }
#mech .grid.cards-3 > .card:nth-child(6) .ic-circle::after{ background-image:url("./img/6.webp"); }

.logo{ gap:8px; }                 /* отступ между иконкой и словом */
.logo-ico{
  width:22px; height:22px;        /* компактный размер в шапке */
  border-radius:6px;              /* слегка скруглить, чтобы смотрелось аккуратно */
  display:block;
}