:root{
  --bg: #0D1D2C;
  --panel: #142B3C;
  --panel-2: #234C61;
  --line: #2B4658;
  --line-soft: #1E3244;
  --red: #F93F34;
  --red-deep: #C23129;
  --glow: rgba(64,200,220,0.4);
  --steel: #7FA0B0;
  --white: #f4f5f7;
  --muted: #B7CBD3;
  --ink: #08131E;

  --display: 'Space Grotesk', 'Arial Narrow', sans-serif;
  --body: 'IBM Plex Sans', 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;

  --header-h: 76px;
}
@media (max-width: 560px){
  :root{ --header-h: 64px; }
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}

body{
  background:var(--white);
  color:var(--ink);
  font-family:var(--body);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

a{ color:inherit; text-decoration:none; }
img,svg{ display:block; max-width:100%; }
ul{ list-style:none; }
button{ font:inherit; cursor:pointer; }

.wrap{
  max-width:1180px;
  margin:0 auto;
  padding:0 32px;
}

:focus-visible{
  outline:2px solid var(--red);
  outline-offset:3px;
  border-radius:2px;
}

.eyebrow{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:0.16em;
  text-transform:uppercase;
}

/* ---------- Header ---------- */
header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:100;
  background:rgba(10,12,17,0.86);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-soft);
}
.header-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:var(--header-h);
  gap:24px;
}
.logo{
  display:flex;
  align-items:center;
  flex-shrink:0;
}
.logo-full{
  height:38px;
  width:auto;
  flex-shrink:0;
  display:block;
}
.logo-tagline{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:0.12em;
  color:var(--steel);
  text-transform:uppercase;
  margin-left:14px;
  padding-left:14px;
  border-left:1px solid var(--line);
  display:none;
}
@media (min-width: 780px){
  .logo-tagline{ display:block; }
}

nav.main-nav{
  display:flex;
  gap:36px;
  position:relative;
}
nav.main-nav a{
  font-size:14px;
  font-weight:500;
  color:var(--muted);
  position:relative;
  padding:6px 0;
  transition:color 0.2s ease;
}
nav.main-nav a:hover{ color:var(--white); }

/* пункт меню с «маячком» — активный анонс (страница выставки) */
nav.main-nav a.nav-expo{ position:relative; }
nav.main-nav a.nav-expo::after{
  content:"";
  position:absolute;
  top:2px; right:-9px;
  width:5px; height:5px;
  border-radius:50%;
  background:var(--red);
}

.nav-indicator{
  position:absolute;
  left:0;
  bottom:0;
  width:0;
  height:1px;
  background:var(--red);
  opacity:0;
  pointer-events:none;
  transition:left 0.22s cubic-bezier(.4,0,.2,1), width 0.22s cubic-bezier(.4,0,.2,1), opacity 0.15s ease;
}

.header-contact{
  display:flex;
  align-items:center;
  gap:18px;
  flex-shrink:0;
}
.phone-link{
  font-family:var(--mono);
  font-size:14px;
  color:var(--white);
  white-space:nowrap;
}
.hours-tag{
  font-family:var(--mono);
  font-size:11px;
  color:var(--steel);
  display:none;
}

.lang-toggle{
  flex-shrink:0;
  border:1px solid var(--line);
  border-radius:999px;
  background:transparent;
  color:var(--white);
  font-family:var(--mono);
  font-size:11.5px;
  font-weight:500;
  letter-spacing:0.05em;
  padding:7px 13px;
  transition:border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.lang-toggle:hover{ border-color:var(--red); color:var(--red); }

.nav-toggle{
  display:none;
  width:38px; height:38px;
  background:transparent;
  border:1px solid var(--line);
  border-radius:4px;
  align-items:center;
  justify-content:center;
  color:var(--white);
}
.nav-toggle svg{ width:18px; height:18px; }

/* ---------- Hero ---------- */
.hero{
  position:relative;
  background:var(--bg);
  color:var(--white);
  padding:168px 0 96px;
  overflow:hidden;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size:56px 56px;
  background-position:center top;
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse 700px 480px at 82% 18%, var(--glow), transparent 70%),
    linear-gradient(180deg, rgba(10,12,17,0) 0%, var(--bg) 92%);
  pointer-events:none;
}
.hero-inner{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:48px;
  align-items:center;
}
.hero-eyebrow{
  color:var(--red);
  margin-bottom:22px;
  display:flex;
  align-items:center;
  gap:10px;
}
.hero-eyebrow::before{
  content:"";
  width:8px; height:8px;
  background:var(--red);
  border-radius:50%;
  box-shadow:0 0 0 4px rgba(249,63,52,0.18);
}
.hero h1{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(34px, 4.6vw, 56px);
  line-height:1.06;
  letter-spacing:-0.01em;
  max-width:11.5ch;
}
.hero h1 em{
  font-style:normal;
  color:var(--red);
}
.hero p.lede{
  margin-top:22px;
  font-size:17px;
  color:var(--muted);
  max-width:46ch;
  line-height:1.65;
}
.hero-cta{
  margin-top:36px;
  display:flex;
  align-items:center;
  gap:22px;
  flex-wrap:wrap;
}
.btn-primary{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:var(--red);
  color:var(--white);
  font-weight:600;
  font-size:14px;
  padding:14px 24px;
  border-radius:3px;
  transition:background 0.2s ease, transform 0.2s ease;
  border:1px solid var(--red);
}
.btn-primary:hover{ background:var(--red-deep); border-color:var(--red-deep); transform:translateY(-1px); }
.btn-primary svg{ width:15px; height:15px; }

.hero-call{
  display:none;
  align-items:center;
  gap:9px;
  font-family:var(--mono);
  font-size:13px;
  color:var(--white);
  border:1px solid var(--line);
  border-radius:3px;
  padding:13px 22px;
  transition:border-color 0.2s ease, color 0.2s ease;
}
.hero-call svg{ width:15px; height:15px; flex-shrink:0; }
.hero-call:hover{ border-color:var(--red); color:var(--red); }

/* Hero graphic: schematic servo/arm line art */
.hero-graphic{
  position:relative;
  aspect-ratio:1/1;
}
.hero-graphic svg{ width:100%; height:100%; }

/* ---------- Ticker ---------- */
.ticker{
  background:var(--panel);
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
  overflow:hidden;
  padding:0;
  display:flex;
  align-items:stretch;
}
.ticker-track{
  flex:1;
  overflow:hidden;
  padding:13px 0;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}
.ticker-group{
  display:flex;
  gap:56px;
  white-space:nowrap;
  width:max-content;
  animation:ticker 32s linear infinite;
}
.ticker:hover .ticker-group{ animation-play-state:paused; }
@media (prefers-reduced-motion: reduce){ .ticker-group{ animation:none; } }
@keyframes ticker{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
.ticker-item{
  font-family:var(--mono);
  font-size:12.5px;
  color:var(--steel);
  display:flex;
  align-items:center;
  gap:10px;
  letter-spacing:0.02em;
}
.ticker-item b{ color:var(--white); font-weight:500; }
/* пункт ленты, который является ссылкой (например, анонс выставки) */
a.ticker-item.is-link{ transition:color 0.18s ease; }
a.ticker-item.is-link:hover,
a.ticker-item.is-link:hover b{ color:var(--red); }
.ticker-item::before{
  content:"";
  width:5px; height:5px;
  background:var(--red);
  flex-shrink:0;
}
.ticker-close{
  flex-shrink:0;
  width:40px;
  border:0;
  border-left:1px solid var(--line-soft);
  background:transparent;
  color:var(--steel);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:color 0.15s ease, background 0.15s ease;
}
.ticker-close:hover{ color:var(--white); background:var(--panel-2); }

.ticker-reopen{
  position:fixed;
  z-index:90;
  bottom:18px;
  right:18px;
  display:flex;
  align-items:center;
  gap:7px;
  border:1px solid var(--line);
  background:var(--panel);
  color:var(--red);
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:0.05em;
  text-transform:uppercase;
  padding:10px 16px;
  border-radius:999px;
  box-shadow:0 8px 22px rgba(0,0,0,0.35);
  transition:transform 0.15s ease, border-color 0.15s ease;
}
.ticker-reopen:hover{ border-color:var(--red-deep); transform:translateY(-1px); }
.ticker-reopen[hidden]{ display:none; }

/* ---------- Баннер выставки на главной ---------- */
.expo-banner{
  display:block;
  position:relative;
  background:var(--panel);
  border-bottom:1px solid var(--line);
  overflow:hidden;
  transition:background 0.25s ease;
}
.expo-banner::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(520px 240px at 14% 0%, rgba(249,63,52,0.10), transparent 60%);
  pointer-events:none;
}
.expo-banner:hover{ background:var(--panel-2); }

.expo-banner-inner{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:auto 1fr auto auto;
  align-items:center;
  gap:28px;
  padding:26px 0;
}

.expo-banner-badge{
  width:64px;
  height:auto;
  flex-shrink:0;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,0.35));
}

.expo-banner-eyebrow{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--red);
}
.expo-banner-title{
  font-family:var(--display);
  font-size:clamp(18px, 2.2vw, 23px);
  font-weight:700;
  color:var(--white);
  margin-top:6px;
  line-height:1.2;
}
.expo-banner-title em{ font-style:normal; color:var(--red); }
.expo-banner-desc{
  margin-top:6px;
  font-size:13.5px;
  color:var(--muted);
  max-width:52ch;
}

.expo-banner-photo{
  position:relative;
  width:96px;
  height:64px;
  flex-shrink:0;
  border:1px solid var(--line);
  overflow:hidden;
}
.expo-banner-photo img{
  /* Абсолютное позиционирование — надёжный способ не дать картинке
     задать себе "минимальный" размер по атрибутам width/height и
     вылезти за рамки контейнера (актуально для flex/grid-раскладок). */
  position:absolute;
  inset:0;
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transition:transform 0.4s ease;
}
.expo-banner:hover .expo-banner-photo img{ transform:scale(1.06); }

.expo-banner-arrow{
  display:flex;
  align-items:center;
  justify-content:center;
  width:38px; height:38px;
  flex-shrink:0;
  border:1px solid var(--line);
  border-radius:50%;
  color:var(--white);
  transition:border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.expo-banner-arrow svg{ width:15px; height:15px; }
.expo-banner:hover .expo-banner-arrow{
  border-color:var(--red);
  color:var(--red);
  transform:translate(2px,-2px);
}

@media (max-width: 900px){
  /* Раскладка в две строки: (эмблема, текст, стрелка) сверху,
     фото на всю ширину снизу. Специально НЕ используем
     grid-template-areas — это многострочное CSS-значение внутри
     кавычек иногда портится при автоматической минификации CSS
     на стороне хостинга. Вместо этого — обычное построчное
     размещение через grid-column/grid-row: то же самое визуально,
     но каждое правило умещается в одну строку. */
  .expo-banner-inner{
    grid-template-columns:auto 1fr auto;
    row-gap:16px;
  }
  .expo-banner-badge{ grid-column:1; grid-row:1; width:52px; }
  .expo-banner-text{ grid-column:2; grid-row:1; }
  .expo-banner-arrow{ grid-column:3; grid-row:1; }
  .expo-banner-photo{ grid-column:1 / -1; grid-row:2; width:100%; height:120px; }
}
@media (max-width: 560px){
  .expo-banner-inner{ padding:22px 0; }
  .expo-banner-desc{ display:none; }
}

/* ---------- About ---------- */
.about{
  position:relative;
  background:var(--white);
  padding:104px 0;
  overflow:hidden;
}
.about::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(14,16,21,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14,16,21,0.055) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
          mask-image:linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
  pointer-events:none;
}
.about-inner{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:0.85fr 1.15fr;
  gap:64px;
}
.about-inner .eyebrow{ color:var(--red-deep); }
.about h2{
  font-family:var(--display);
  font-size:clamp(26px, 3vw, 34px);
  font-weight:700;
  margin-top:14px;
  line-height:1.18;
  color:var(--ink);
}
.about-text p{
  font-size:16px;
  color:#3c4250;
  line-height:1.75;
  max-width:62ch;
}
.about-text p + p{ margin-top:16px; }

.pillars{
  position:relative;
  margin-top:36px;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.pillars::before{
  content:"";
  position:absolute;
  inset:-14px;
  pointer-events:none;
  background:
    linear-gradient(var(--red), var(--red)) no-repeat top left / 16px 2px,
    linear-gradient(var(--red), var(--red)) no-repeat top left / 2px 16px,
    linear-gradient(var(--red), var(--red)) no-repeat top right / 16px 2px,
    linear-gradient(var(--red), var(--red)) no-repeat top right / 2px 16px,
    linear-gradient(var(--red), var(--red)) no-repeat bottom left / 16px 2px,
    linear-gradient(var(--red), var(--red)) no-repeat bottom left / 2px 16px,
    linear-gradient(var(--red), var(--red)) no-repeat bottom right / 16px 2px,
    linear-gradient(var(--red), var(--red)) no-repeat bottom right / 2px 16px;
}
.pillar{
  background:var(--white);
  padding:22px 20px;
}
.pillar-icon{
  width:26px;
  height:26px;
  color:var(--red-deep);
}
.pillar h3{
  font-family:var(--display);
  font-size:15px;
  font-weight:600;
  margin-top:10px;
  color:var(--ink);
}
.pillar p{
  font-size:13px;
  color:#6b7180;
  margin-top:6px;
  line-height:1.5;
}

/* ---------- Directions / rail ---------- */
.directions{
  background:var(--bg);
  color:var(--white);
  padding:104px 0 120px;
  position:relative;
}
.directions .section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:24px;
  margin-bottom:58px;
  flex-wrap:wrap;
}
.directions .eyebrow{ color:var(--red); }
.directions h2{
  font-family:var(--display);
  font-size:clamp(26px, 3vw, 34px);
  font-weight:700;
  margin-top:14px;
  max-width:20ch;
}
.directions .section-head p{
  color:var(--muted);
  font-size:14.5px;
  max-width:34ch;
  line-height:1.6;
}

.rail{
  position:relative;
}
.rail-line{
  position:absolute;
  top:50%;
  left:0; right:0;
  height:1px;
  background:repeating-linear-gradient(90deg, var(--line) 0 8px, transparent 8px 16px);
  z-index:0;
  display:none;
}
.modules{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
  position:relative;
  z-index:1;
}
.module{
  background:var(--panel);
  border:1px solid var(--line);
  padding:32px 26px 28px;
  display:flex;
  flex-direction:column;
  transition:border-color 0.25s ease, transform 0.25s ease, background 0.25s ease;
}
.module:hover{
  border-color:var(--red-deep);
  background:var(--panel-2);
  transform:translateY(-4px);
}
.module-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.module-code{
  position:relative;
  font-family:var(--mono);
  font-size:11px;
  color:var(--red);
  letter-spacing:0.1em;
}
.module-code::after{
  content:attr(data-tooltip);
  position:absolute;
  bottom:calc(100% + 9px);
  left:0;
  background:var(--ink);
  color:var(--white);
  font-family:var(--body);
  font-size:12.5px;
  font-weight:400;
  letter-spacing:0;
  text-transform:none;
  white-space:nowrap;
  padding:7px 11px;
  border-radius:4px;
  border:1px solid var(--line-soft);
  box-shadow:0 8px 20px rgba(0,0,0,0.4);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(4px);
  transition:opacity 0.15s ease, transform 0.15s ease;
  z-index:5;
}
.module-code::before{
  content:"";
  position:absolute;
  bottom:calc(100% + 4px);
  left:10px;
  border:5px solid transparent;
  border-top-color:var(--ink);
  opacity:0;
  visibility:hidden;
  transition:opacity 0.15s ease;
  z-index:5;
}
@media (hover: hover) and (pointer: fine){
  .module:hover .module-code::after,
  .module:hover .module-code::before,
  .module:focus-within .module-code::after,
  .module:focus-within .module-code::before{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
  }
}
@media (prefers-reduced-motion: reduce){
  .module-code::after{ transition:none; }
}
.module-icon{
  width:42px; height:42px;
  color:var(--steel);
  transition:color 0.25s ease;
}
.module:hover .module-icon{ color:var(--red); }

.module h3{
  font-family:var(--display);
  font-size:19px;
  font-weight:600;
  margin-top:26px;
  color:var(--white);
}
.module .tag{
  font-family:var(--mono);
  font-size:11px;
  color:var(--steel);
  margin-top:6px;
  letter-spacing:0.03em;
}
.module p.desc{
  font-size:13.5px;
  color:var(--muted);
  line-height:1.65;
  margin-top:14px;
  flex-grow:1;
}
.module .goto{
  margin-top:22px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  font-weight:600;
  color:var(--white);
  padding-top:16px;
  border-top:1px solid var(--line);
}
.module .goto svg{
  width:13px; height:13px;
  transition:transform 0.2s ease;
}
.module:hover .goto svg{ transform:translate(3px,-3px); }
.module .goto{ transition:color 0.2s ease; }
.module:hover .goto{ color:var(--red); }

/* ---------- Footer ---------- */
footer{
  background:var(--ink);
  color:var(--steel);
  padding:52px 0 28px;
  border-top:1px solid var(--line-soft);
}
.footer-top{
  display:flex;
  justify-content:space-between;
  gap:32px;
  flex-wrap:wrap;
  padding-bottom:36px;
  border-bottom:1px solid var(--line-soft);
}
.footer-brand .logo-full{ height:26px; width:auto; }
.footer-brand p{
  margin-top:14px;
  font-size:13.5px;
  color:var(--steel);
  max-width:36ch;
  line-height:1.6;
}
.footer-cols{
  display:flex;
  gap:64px;
  flex-wrap:wrap;
}
.footer-col h4{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:14px;
}
.footer-col a, .footer-col p{
  display:block;
  font-size:13.5px;
  color:var(--steel);
  margin-bottom:9px;
}
.footer-col a:hover{ color:var(--red); }

.footer-bottom{
  margin-top:26px;
  font-size:12px;
  color:#5b6172;
}

/* ---------- reveal ---------- */
.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity 0.6s ease, transform 0.6s ease;
}
.reveal.in{
  opacity:1;
  transform:none;
}

/* ---------- Responsive ---------- */

/* Tablet / nav collapse */
@media (max-width: 980px){
  .wrap{ padding:0 24px; }
  nav.main-nav{ display:none; }
  .nav-toggle{ display:flex; }
  .hero{ padding-top:calc(var(--header-h) + 56px); }
  .hero-inner{ grid-template-columns:1fr; }
  .hero-graphic{ max-width:340px; margin:0 auto; order:-1; }
  .about{ padding:72px 0; }
  .about-inner{ grid-template-columns:1fr; gap:36px; }
  .directions{ padding:72px 0 88px; }
  .modules{ grid-template-columns:1fr; }
  .pillars{ grid-template-columns:1fr; }
  .footer-top{ flex-direction:column; }
  .footer-cols{ flex-direction:column; gap:32px; }
}

/* Phones */
@media (max-width: 640px){
  .wrap{ padding:0 20px; }
  .header-row{ gap:12px; }
  .logo-full{ height:32px; }
  .footer-brand .logo-full{ height:26px; }
  .logo-tagline{ display:none; }
  .phone-link{ display:none; }
  .lang-toggle{ font-size:11px; padding:6px 11px; }
  .hero{ padding-top:calc(var(--header-h) + 40px); padding-bottom:64px; }
  .hero h1{ max-width:none; }
  .hero p.lede{ font-size:15.5px; }
  /* На телефонах декоративная схема съедала весь первый экран —
     убираем её здесь, оставляя только текст и кнопки hero. */
  .hero-graphic{ display:none; }
  .hero-cta{ margin-top:28px; gap:16px; }
  .btn-primary{ width:100%; justify-content:center; }
  .hero-call{ display:inline-flex; width:100%; justify-content:center; }
  .ticker-track{
    padding:11px 0 11px 20px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg, #000 0, #000 calc(100% - 22px), transparent 100%);
            mask-image:linear-gradient(90deg, #000 0, #000 calc(100% - 22px), transparent 100%);
  }
  .ticker-track::-webkit-scrollbar{ display:none; }
  .ticker-group{ gap:28px; animation:none !important; }
  .ticker-group > .ticker-item:nth-child(n+5){ display:none; }
  .ticker-item{ scroll-snap-align:start; }
  .ticker-item{ font-size:11.5px; }
  .about h2, .directions h2{ font-size:24px; }
  .pillar{ padding:18px 16px; }
  .module{ padding:24px 20px 22px; }
}

/* Small phones */
@media (max-width: 400px){
  .wrap{ padding:0 16px; }
  .header-row{ gap:8px; }
  .hero h1{ font-size:30px; }
}

/* mobile nav panel */
.mobile-nav{
  position:fixed;
  top:var(--header-h); left:0; right:0;
  background:var(--panel);
  border-bottom:1px solid var(--line-soft);
  display:none;
  flex-direction:column;
  padding:8px 24px 20px;
  z-index:99;
  max-height:calc(100vh - var(--header-h));
  overflow-y:auto;
}
.mobile-nav.open{ display:flex; }
.mobile-nav a{
  padding:14px 0;
  border-bottom:1px solid var(--line-soft);
  font-size:15px;
  color:var(--white);
}
.mobile-nav a:last-child{ border-bottom:none; }
.mobile-nav a.mobile-nav-phone{
  font-family:var(--mono);
  color:var(--red);
  padding-top:18px;
}
@media (max-width: 640px){
  .mobile-nav{ padding:8px 20px 18px; }
}