/* ═══════════════════════════════════════════════════════════════════════════
   STYLE.CSS — все стили podoshlov.com (брутализм + Web 1.0 + responsive)
   ═══════════════════════════════════════════════════════════════════════════

   КАРТА ФАЙЛА (cм. секционные маркеры /* ─── НАЗВАНИЕ ─── */):

   1. CSS-переменные (:root)         — палитра, размеры, тени
   2. Reset + base typography        — html, body, paper-grid bg
   3. HEADER                         — логотип, навигация, RU/EN, бургер
   4. HERO                           — приветствие, имя, CTA, scroll-hint
   5. BUTTONS                        — .btn / .btn--primary / .btn--ghost / etc.
   6. SECTIONS                       — общие стили <section>
   7. ABOUT                          — about-text, stats-row, code-card, quote
   8. SKILLS                         — карточки технологий с цветными тенями
   9. PROJECTS                       — table-row карточки проектов
   10. CONTACT                       — соцсети + кнопки
   11. FOOTER                        — копирайт + ссылка на политику
   12. REVEAL + ANIMATIONS           — fade-in эффекты для секций
       ├─ Smile toggle (пасхалка)
       ├─ Datestrip (верхняя жёлтая полоса)
       ├─ Sidebar (Tripod 1996 style)
       ├─ Banners 88×31 + bottom-banner
       └─ Адаптация всех секций под Press Start 2P
   14. MODAL                         — overlay для Email + Privacy
   15. RESPONSIVE (@media)           — мобилка, планшет, landscape

   ПАЛИТРА (БРУТАЛИЗМ):
     --slime  #7FE04C    — основной акцент (CTA primary)
     --ember  #FF6B35    — вторичный акцент (Email button)
     --nuclear #FFF700   — светящийся жёлтый
     --blood  #DC1A1A    — красный для ошибок/тревог
     --cyan   #00E5FF    — голубой для info

   ПАЛИТРА (WEB 1.0):
     #008080 teal        — фон страницы
     #c0c0c0 silver      — Win95 кнопки/окошки
     #cccc00 yellow      — заголовки и логотип
     #339933 green       — фразы кода, счётчик
     #000080 navy        — заголовок code-card-header, гиперлинки

   ШРИФТЫ:
     --display: "Russo One"          — заголовки в брутализме
     --mono:    "JetBrains Mono"     — основной текст
   ═══════════════════════════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* Form-контролы (input/textarea/select/button) в некоторых браузерах
   игнорируют box-sizing из универсального reset — задаём явно, иначе
   width:100% + padding + border вылезает за контейнер. */
input,textarea,select,button{box-sizing:border-box;font-family:inherit}
/* Браузерные user-agent стили задают <ul>/<ol> логический padding-inline-start:40px,
   который НЕ сбрасывается shorthand'ом padding:0 выше. Явно зануляем. */
ul,ol{padding-inline-start:0;list-style:none}

/* ─── CSS-ПЕРЕМЕННЫЕ ──────────────────────────────────────
   Все цвета, толщины бордеров и размеры теней живут здесь.
   Меняй переменную — меняется весь сайт. */
:root{
  /* core */
  --bg:#FAFAF7;
  --ink:#0A0A0A;
  --gray:#444;
  --gray-light:#666;
  --paper:#FFFFFF;

  /* BLIQ palette */
  --slime:#7FE04C;
  --ember:#FF6B35;
  --nuclear:#FFF700;
  --blood:#DC1A1A;
  --cyan:#00E5FF;

  /* legacy bridge */
  --bli-green:#00CC66;
  --q-yellow:#E6B800;

  /* fonts */
  --display:"Russo One",system-ui,-apple-system,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;

  /* layout */
  --W:1160px;
  --px:clamp(20px,5vw,64px);
  --tr:0.18s cubic-bezier(.4,0,.2,1);

  /* brutalism core */
  --b:3px;
  --b-thick:4px;
  --shadow-sm:4px 4px 0 var(--ink);
  --shadow-md:6px 6px 0 var(--ink);
  --shadow-lg:8px 8px 0 var(--ink);
}

/* ─── RESET + BASE TYPOGRAPHY ─────────────────────────────
   Базовые стили html/body, отключение горизонтального скролла,
   smooth scroll для якорных ссылок, paper-grid фон. */
html{
  overflow-x:hidden;
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  background:var(--bg);
}

body{
  margin:0;
  font-family:var(--mono);
  /* paper-grid background прямо на body, без отдельного fixed-псевдоэлемента.
     Сетка прокручивается вместе с контентом — для брутализма это даже более
     уместно (характерная "бумажная" подложка). */
  background-color:var(--bg);
  background-image:
    linear-gradient(to right,rgba(10,10,10,0.04) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(10,10,10,0.04) 1px,transparent 1px);
  background-size:40px 40px;
  color:var(--ink);
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  line-height:1.5;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

::selection{background:var(--slime);color:var(--ink)}
::-webkit-scrollbar{width:12px;background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--ink);border:3px solid var(--bg)}

/* ─── HEADER ─────────────────────────────────────────── */
header{
  /* sticky вместо fixed — header в потоке, занимает место,
     но прилипает к верху при скролле. Никакого padding-top компенсации
     на hero не нужно: header не выпадает из flow. */
  position:sticky;top:0;z-index:100;
  /* Grid: brand | nav | lang — nav в потоке, не накладывается на соседей */
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;gap:12px;
  padding:14px var(--px);
  background:var(--paper);
  border-bottom:var(--b) solid var(--ink);
}

.brand-mark{
  font-family:var(--mono);
  color:var(--ink);
  flex-shrink:0;
  display:flex;flex-direction:column;
  line-height:1.1;
  gap:2px;
}
/* Якорные ссылки внутри логотипа — наследуют типографику родителя */
.brand-link,
.brand-section,
.brand-domain{
  color:inherit;
  text-decoration:none;
}
.brand-link:hover,
.brand-section:hover,
.brand-domain:hover{
  text-decoration:none;
}
/* Крупный логотип — показывается только в hero-режиме */
.brand-full{
  font-family:var(--display);
  font-weight:900;
  font-size:18px;
  letter-spacing:1px;
  color:var(--ink);
  text-transform:uppercase;
  display:none;
  white-space:nowrap;
}
.brand-full .dot{color:var(--ink);margin:0 1px}
/* Hero-режим: показываем только крупный логотип, прячем двухуровневый */
.brand-mark.hero-mode .brand-full{display:inline-block}
.brand-mark.hero-mode .brand-section,
.brand-mark.hero-mode .brand-domain{display:none}

.brand-section{
  font-size:14px;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--ink);
  white-space:nowrap;
  /* Резкое переключение текста — без анимаций для брутализма */
}
.brand-domain{
  font-family:var(--display);
  font-size:11px;
  font-weight:900;
  letter-spacing:0.5px;
  color:var(--gray);
  text-transform:uppercase;
  white-space:nowrap;
}
.brand-domain .dot-domain{color:var(--gray);margin:0 1px}

.lang-switcher{display:flex;gap:0;flex-shrink:0}

.lang-btn{
  width:38px;height:38px;
  font-family:var(--mono);font-size:12px;font-weight:700;
  letter-spacing:0.05em;
  border:var(--b) solid var(--ink);background:var(--paper);
  color:var(--ink);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  padding:0;
  transition:background var(--tr);
}
.lang-btn:first-child{border-right:none}
.lang-btn.active{background:var(--ink);color:var(--bg)}
.lang-btn:hover:not(.active){background:var(--nuclear)}

.nav-center{
  /* Центральная grid-колонка: nav сам центрируется внутри своей 1fr-ячейки */
  justify-self:center;
  min-width:0;
  max-width:100%;
}
.nav-links{
  display:flex;gap:0;list-style:none;
  border:var(--b) solid var(--ink);background:var(--paper);
  font-size:0;
  margin:0;padding:0;padding-inline-start:0;
  /* Ширина по контенту, сжимается с экраном */
  width:auto;
  max-width:100%;
}
/* Все li получают border-left той же толщины, чтобы контент-область была равна
   у всех 5 ячеек. Первый — прозрачный (не виден), остальные — чёрный разделитель.
   Без этого первая ячейка визуально шире на 3px при hover. */
.nav-links li{
  display:block;flex:1 1 0;min-width:0;
  border-left:var(--b) solid transparent;
  transition:background var(--tr);
}
.nav-links li+li{border-left-color:var(--ink)}
/* Hover-фон на <li>, а не на <a>: у первой ячейки border-left прозрачный
   (3px резерв для выравнивания) — фон на <a> не закрашивал бы эту зону. */
.nav-links li:hover{background:var(--slime)}
.nav-links a{
  display:block;
  font-family:var(--mono);font-size:11px;font-weight:700;
  letter-spacing:0.1em;text-decoration:none;
  /* Адаптивный padding — ячейки сжимаются при сужении окна */
  padding:8px clamp(8px,1.4vw,18px);
  text-align:center;
  color:var(--ink);text-transform:uppercase;
  white-space:nowrap;
}

.burger{
  display:none;flex-direction:column;gap:5px;
  background:var(--paper);
  border:var(--b) solid var(--ink);
  cursor:pointer;padding:8px;
  width:38px;height:38px;
  align-items:center;justify-content:center;
}
.burger span{
  display:block;width:18px;height:2.5px;
  background:var(--ink);transition:all 0.3s ease;
}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.nav-drawer{
  display:none;position:fixed;top:0;right:0;
  width:min(320px,85vw);height:100vh;height:100dvh;
  background:var(--paper);
  border-left:var(--b-thick) solid var(--ink);
  z-index:99;flex-direction:column;
  padding:90px 28px 36px;gap:0;
  transform:translateX(100%);
  transition:transform 0.3s cubic-bezier(.4,0,.2,1);
}
.nav-drawer.open{transform:translateX(0)}
.nav-drawer a{
  font-family:var(--mono);font-size:13px;font-weight:700;
  letter-spacing:0.12em;
  text-decoration:none;color:var(--ink);text-transform:uppercase;
  padding:16px 12px;border-bottom:2px solid var(--ink);
  transition:background var(--tr);
}
.nav-drawer a:hover{background:var(--slime)}
.nav-drawer a:first-child{border-top:2px solid var(--ink)}

.nav-overlay{
  display:none;position:fixed;inset:0;
  background:rgba(10,10,10,0.5);z-index:98;
}
.nav-overlay.open{display:block}

/* ─── HERO ───────────────────────────────────────────── */
#hero{
  /* С sticky header hero занимает оставшийся viewport (без вычитания header'а
     через padding-top:80px). flex:1 в sticky-footer layout растягивает hero
     до низа экрана, если контента в нём мало. */
  min-height:calc(100vh - 66px);
  min-height:calc(100dvh - 66px);
  min-height:calc(100svh - 66px);
  display:flex;flex-direction:column;align-items:center;
  text-align:center;
  padding:16px var(--px);
  overflow:hidden;
  box-sizing:border-box;
  gap:0;
}

/* Декоративные плашки — верхний ряд */
.hero-corners-top{
  display:flex;justify-content:space-between;align-items:flex-start;
  width:100%;
  flex-shrink:0;
}
.hero-corner{
  font-family:var(--mono);font-size:10px;font-weight:700;
  letter-spacing:0.15em;text-transform:uppercase;
  color:var(--ink);
  padding:6px 10px;
  border:var(--b) solid var(--ink);
  background:var(--paper);
}
.hero-corner.tl{box-shadow:3px 3px 0 var(--ember)}
.hero-corner.tr{box-shadow:3px 3px 0 var(--cyan)}
.hero-corner.bl{box-shadow:3px 3px 0 var(--nuclear)}
@media(max-width:768px){.hero-corner{display:none}}
@media(max-height:600px) and (orientation:landscape){.hero-corner{display:none}}

/* Приветствие-подводка перед именем */
.hero-greet{
  font-family:var(--mono);
  font-size:clamp(14px, min(2vw, 3vh), 24px);
  font-weight:500;
  letter-spacing:0.18em;
  color:var(--gray);
  text-transform:none;
  font-style:italic;
  margin-bottom:clamp(4px,0.8vh,12px);
  display:block;
}

/* Лейблы — под фамилией внутри .hero-name */
.hero-labels{
  display:flex;flex-direction:column;align-items:center;
  margin-top:clamp(10px,1.5vh,24px);
}

.hero-label{
  font-family:var(--mono);font-size:clamp(11px, min(2.8vw, 4.5vh), 36px);
  font-weight:700;letter-spacing:0.05em;color:var(--ink);
  text-transform:uppercase;
  display:block;
  white-space:nowrap;
}
.hero-label--sub{
  margin-top:6px;
  font-style:italic;font-weight:500;text-transform:none;
  color:var(--gray);
  font-size:clamp(11px, min(2vw, 3.5vh), 24px);
  letter-spacing:0.03em;
  white-space:nowrap;
}

/* Подмигивающий смайлик 😉 — одновременно эмодзи + кнопка переключения темы.
   <button> сбрасывает дефолтные браузерные стили (фон, бордер, padding, font-family,
   appearance). font-style:normal — обязательно с !important, т.к. родитель
   .hero-label--sub задаёт italic, а emoji в italic выглядит наклонённым. */
.hero-emoji{
  /* Размер: чуть крупнее текста, но не меньше 16px */
  font-size:clamp(16px, 1.6em, 28px);
  line-height:1;
  vertical-align:middle;
  position:relative;
  top:-0.08em;
  display:inline-block;
  font-style:normal !important;
  letter-spacing:0;
  /* Сброс <button>-дефолтов, чтобы выглядел как обычный emoji */
  background:transparent;
  border:none;
  padding:0 4px;
  margin:0;
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
  color:inherit;
  font-family:inherit;
  font-weight:inherit;
  transition:transform var(--tr);
  /* Намекаем, что кликабелен */
  transform-origin:center;
}
.hero-emoji:hover{
  transform:scale(1.2);
}
.hero-emoji:active{
  transform:scale(0.95);
}
.hero-emoji:focus-visible{
  outline:2px solid var(--slime);
  outline-offset:4px;
  border-radius:4px;
}

.hero-tagline{
  display:block;
  margin-top:clamp(8px,1.5vh,16px);
  font-family:var(--mono);
  font-size:clamp(12px, min(1.8vw, 2.5vh), 18px);
  font-weight:500;color:var(--gray);
  letter-spacing:0.02em;
  opacity:0;animation:fadeUp 0.6s 0.7s ease forwards;
}

/* Имя — в потоке flex, центрируется между corners-top и footer */
.hero-name{
  font-family:var(--display);
  line-height:0.9;
  letter-spacing:0;
  display:flex;flex-direction:column;align-items:center;gap:4px;
  width:100%;
  max-width:100%;
  margin-top:auto;
  opacity:0;
  animation:heroNameIn 0.7s 0.25s ease forwards;
}
@keyframes heroNameIn{
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:translateY(0)}
}
.hero-line-first{
  font-size:clamp(50px, min(11vw, 13vh), 160px);
  font-weight:900;
  white-space:nowrap;
  color:var(--ink);
  letter-spacing:-0.03em;
  text-shadow:
    1px 0 0 var(--ink), -1px 0 0 var(--ink), 0 1px 0 var(--ink), 0 -1px 0 var(--ink),
    1px 1px 0 var(--ink), -1px -1px 0 var(--ink), 1px -1px 0 var(--ink), -1px 1px 0 var(--ink);
}
.hero-line-last{
  font-size:clamp(32px, min(10.5vw, 12vh), 150px);
  font-weight:900;
  white-space:nowrap;
  color:var(--slime);
  letter-spacing:0.03em;
  text-shadow:
    1px 0 0 var(--slime), -1px 0 0 var(--slime), 0 1px 0 var(--slime), 0 -1px 0 var(--slime),
    1px 1px 0 var(--slime), -1px -1px 0 var(--slime), 1px -1px 0 var(--slime), -1px 1px 0 var(--slime),
    6px 6px 0 var(--ink),
    5px 5px 0 var(--ink),
    4px 4px 0 var(--ink),
    3px 3px 0 var(--ink),
    2px 2px 0 var(--ink);
}

/* Нижняя зона: cta + corner.bl + scroll */
.hero-bottom{
  margin-top:clamp(16px,2vh,36px);
  display:flex;flex-direction:column;align-items:center;
  width:100%;
  gap:12px;
}

.hero-cta{
  display:flex;gap:12px;
  flex-wrap:nowrap;justify-content:center;
  width:100%;
  max-width:620px;
  opacity:0;animation:fadeUp 0.6s 0.6s ease forwards;
}
.hero-cta .btn{text-align:center;justify-content:center;white-space:nowrap}

/* Нижний ряд: плашка since 2024 + scroll-hint — прижаты к низу */
.hero-footer{
  display:flex;flex-direction:column;align-items:center;
  width:100%;
  margin-top:auto;
  gap:8px;
  flex-shrink:0;
}
.hero-footer .hero-corner.bl{
  align-self:flex-start;
}

.scroll-hint{
  font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:0.25em;
  color:var(--ink);text-transform:uppercase;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  opacity:0;animation:fadeIn 0.8s 1s ease forwards;
  transition:opacity 0.3s ease;
  pointer-events:none;
}
.scroll-hint.hidden{opacity:0!important}
.scroll-line{
  width:2px;height:28px;background:var(--ink);
  position:relative;overflow:hidden;
}
.scroll-line::after{
  content:"";position:absolute;top:-100%;left:0;
  width:100%;height:100%;
  background:var(--slime);
  animation:scrollPulse 1.6s ease-in-out infinite;
}
@keyframes scrollPulse{
  0%{top:-100%}
  60%{top:100%}
  100%{top:100%}
}

/* ─── BUTTONS ────────────────────────────────────────── */
.btn{
  box-sizing:border-box;
  font-family:var(--mono);font-size:12px;font-weight:700;
  letter-spacing:0.12em;text-transform:uppercase;
  text-decoration:none;
  padding:14px 24px;
  border:var(--b-thick) solid var(--ink);
  cursor:pointer;
  transition:transform var(--tr),box-shadow var(--tr),background var(--tr);
  white-space:nowrap;display:inline-flex;align-items:center;gap:8px;
  background:var(--paper);
  color:var(--ink);
}
.btn:hover{
  transform:translate(-2px,-2px);
}
.btn:active{
  transform:translate(2px,2px);
  box-shadow:none!important;
}
.btn--primary{background:var(--slime);box-shadow:6px 6px 0 var(--ink)}
.btn--primary:hover{box-shadow:8px 8px 0 var(--ink)}
.btn--ghost{background:var(--paper);box-shadow:6px 6px 0 var(--ink)}
.btn--ghost:hover{background:var(--nuclear);box-shadow:8px 8px 0 var(--ink)}

/* ─── SECTIONS ───────────────────────────────────────── */
section{padding:clamp(64px,9vw,110px) var(--px);position:relative}

.section-label{
  display:inline-block;
  font-family:var(--mono);font-size:11px;font-weight:700;
  letter-spacing:0.18em;
  color:var(--ink);text-transform:uppercase;
  margin-bottom:24px;
  padding:5px 10px;
  border:var(--b) solid var(--ink);
  background:var(--paper);
}

/* ─── ABOUT ──────────────────────────────────────────── */
#about{
  background:var(--paper);
  border-top:var(--b-thick) solid var(--ink);
  /* border-bottom убран: следующая секция (#services) уже имеет border-top.
     Два border-а одной толщины давали визуально удвоенную линию (8px вместо 4px). */
}
.about-grid{
  max-width:var(--W);margin:0 auto;
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(36px,5vw,64px);align-items:start;
}
.about-grid > div:last-child{padding-top:clamp(28px,3vw,40px)}

.about-heading{
  font-family:var(--display);font-weight:900;
  font-size:clamp(40px,6.5vw,72px);
  line-height:0.95;color:var(--ink);
  margin-bottom:24px;
  letter-spacing:-0.02em;
}
.about-heading .hl{
  color:var(--slime);
  text-shadow:3px 3px 0 var(--ink),2px 2px 0 var(--ink),1px 1px 0 var(--ink);
  display:inline-block;
}

.about-text{
  font-size:clamp(14px,1.5vw,16px);color:var(--ink);
  line-height:1.7;margin-bottom:16px;
}
.about-text strong{font-weight:700}

.stats-row{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:0;margin-top:36px;
  border:var(--b) solid var(--ink);
  background:var(--paper);
  box-shadow:var(--shadow-sm) var(--ember);
}
.stat{
  display:flex;flex-direction:column;gap:2px;
  align-items:center;text-align:center;
  padding:10px 8px;
  border-right:2px solid var(--ink);
  min-width:0;
}
.stat:last-child{border-right:none}
.stat-prefix{
  font-family:var(--mono);font-size:9px;font-weight:700;
  letter-spacing:0.12em;color:var(--gray);
  text-transform:uppercase;text-align:center;
}
.stat-num{
  font-family:var(--display);font-weight:900;
  font-size:clamp(22px,3vw,34px);color:var(--ink);line-height:1;
}
.stat-label{
  font-family:var(--mono);font-size:9px;font-weight:700;
  letter-spacing:0.12em;color:var(--gray);
  text-transform:uppercase;text-align:center;
}

/* ─── CODE CARD ───────────────────────────────────────── */
.code-card{
  background:var(--ink);
  color:#E8E8E4;
  border:var(--b) solid var(--ink);
  font-family:var(--mono);font-size:clamp(12px,1.2vw,13px);
  line-height:1.7;
  box-shadow:var(--shadow-md) var(--slime);
}
.code-card-header{
  display:flex;align-items:center;gap:8px;
  padding:10px 14px;
  border-bottom:2px solid #444;
  background:#1A1A1A;
}
.code-dots{display:flex;gap:6px}
.code-dot{width:11px;height:11px;border-radius:50%;border:1.5px solid #000}
.code-dot:nth-child(1){background:#FF5F57}
.code-dot:nth-child(2){background:#FEBC2E}
.code-dot:nth-child(3){background:#28C840}
.code-filename{
  font-size:11px;color:#999;margin-left:6px;
  letter-spacing:0.05em;font-weight:500;
}
.code-body{
  padding:18px 20px;
  white-space:pre-wrap;overflow-wrap:anywhere;overflow-x:hidden;
  min-width:0;
}
.c-keyword{color:#C792EA}
.c-string{color:var(--slime)}
.c-key{color:#82AAFF}
.c-comment{color:#666}
.c-bool,.c-num{color:#F78C6C}

/* ─── ABOUT QUOTE ─────────────────────────────────────── */
.about-quote{
  max-width:var(--W);margin:48px auto 0;
  padding:24px;
  border:var(--b) solid var(--ink);
  background:var(--nuclear);
  box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;gap:8px;
}
.about-quote-text{
  font-family:var(--mono);font-weight:500;
  font-size:clamp(14px,1.5vw,16px);
  color:var(--ink);line-height:1.6;
  font-style:italic;
}
.about-quote-sign{
  font-family:var(--mono);font-weight:700;
  font-size:11px;letter-spacing:0.12em;
  color:var(--ink);text-transform:uppercase;
}

/* ─── SKILLS ──────────────────────────────────────────── */
#skills{background:var(--bg)}
.skills-wrap{max-width:var(--W);margin:0 auto}
.skills-heading{
  font-family:var(--display);font-weight:900;
  font-size:clamp(36px,5vw,60px);
  line-height:0.95;color:var(--ink);
  margin-bottom:40px;letter-spacing:-0.02em;
}
.skills-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.skill-item{
  background:var(--paper);
  padding:24px 22px;
  display:flex;flex-direction:column;gap:8px;
  border:var(--b) solid var(--ink);
  transition:transform var(--tr),box-shadow var(--tr);
  min-width:0;
  /* Цвет тени задаётся inline через --brand на каждом элементе */
  box-shadow:6px 6px 0 var(--brand,var(--ink));
}
.skill-item:hover{
  transform:translate(-2px,-2px);
  box-shadow:8px 8px 0 var(--brand,var(--ink));
}

.skill-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;
  padding:6px;
  border:2px solid var(--ink);
  background:var(--paper);
  flex-shrink:0;
  margin-bottom:4px;
}
.skill-icon svg,
.skill-icon img{
  width:100%;height:100%;
  display:block;
  object-fit:contain;
}
.skill-name{
  font-family:var(--display);font-weight:900;
  font-size:24px;color:var(--ink);
  letter-spacing:-0.01em;
  margin-top:6px;
}
.skill-level{display:flex;gap:4px;margin-top:4px}
.skill-dot{
  width:14px;height:8px;
  background:var(--paper);
  border:1.5px solid var(--ink);
}
.skill-dot.filled{background:var(--ink)}
.skill-desc{font-size:12px;color:var(--gray);line-height:1.5;font-weight:400}

/* ─── PROJECTS ────────────────────────────────────────── */
#projects{
  background:var(--paper);
  border-top:var(--b-thick) solid var(--ink);
  border-bottom:var(--b-thick) solid var(--ink);
}
.projects-inner{max-width:var(--W);margin:0 auto}
.projects-heading{
  font-family:var(--display);font-weight:900;
  font-size:clamp(36px,5vw,60px);
  line-height:0.95;color:var(--ink);
  margin-bottom:40px;letter-spacing:-0.02em;
}
.projects-list{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:28px;
}
/* NOTE: .project-row и логотипы проектов (.logo-bliq, .logo-fridgii, etc.)
   удалены — в текущем HTML только .project-placeholder. Когда появятся реальные
   карточки, верни стили из истории git. */

/* ─── CONTACT ─────────────────────────────────────────── */
#contact{text-align:center;background:var(--bg)}
.contact-inner{max-width:640px;margin:0 auto}
.contact-heading{
  font-family:var(--display);font-weight:900;
  font-size:clamp(48px,8.5vw,96px);
  line-height:0.9;color:var(--ink);
  margin-bottom:20px;letter-spacing:-0.02em;
}
.contact-heading .accent-word{
  color:var(--ember);
  text-shadow:4px 4px 0 var(--ink),3px 3px 0 var(--ink),2px 2px 0 var(--ink),1px 1px 0 var(--ink);
  display:inline-block;
  /* у Russo One кириллические буквы сильно сливаются при letter-spacing:-0.02em,
     который унаследован от .contact-heading. Чуть раздвигаем именно акцентное слово */
  letter-spacing:0.02em;
  padding:0 0.05em;
}
.contact-sub{
  font-size:clamp(14px,1.5vw,16px);color:var(--ink);
  line-height:1.6;margin-bottom:36px;
}
.contact-links{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;max-width:440px;margin:0 auto}
.contact-links .btn{
  /* равная ширина: каждая кнопка занимает половину ряда (минус половина gap).
     TELEGRAM и EMAIL becomes одинаковыми; INSTAGRAM переносится и тянется так же.
     box-sizing:border-box (задан на .btn) гарантирует, что padding входит в ширину. */
  flex:1 1 calc(50% - 7px);
  min-width:0;
  justify-content:center;
}

/* ─── FOOTER ──────────────────────────────────────────── */
footer{
  padding:24px var(--px) 18px;
  border-top:var(--b-thick) solid var(--ink);
  background:var(--paper);
  display:flex;align-items:center;justify-content:center;
  flex-wrap:wrap;gap:12px;
}
.footer-copy{
  font-family:var(--mono);font-size:11px;font-weight:700;
  color:var(--ink);letter-spacing:0.08em;
}
.footer-socials{display:flex;gap:12px}
.footer-socials a{
  font-family:var(--mono);font-size:11px;font-weight:700;
  letter-spacing:0.08em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;
  padding:4px 10px;
  border:2px solid var(--ink);
  background:var(--paper);
  transition:background var(--tr);
}
.footer-socials a:hover{background:var(--cyan)}
.footer-privacy{
  width:100%;text-align:center;
  font-family:var(--mono);font-size:10px;font-weight:400;
  color:var(--gray);letter-spacing:0.04em;
  margin-top:10px;
  padding-top:12px;
  border-top:2px solid var(--ink);
}
.link-underline{
  color:var(--ink);font-weight:700;
  text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:2px;
}
.link-accent{
  color:var(--ink);font-weight:700;
  text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:2px;
  background:var(--slime);padding:0 4px;
}

/* ─── REVEAL ──────────────────────────────────────────── */
.reveal{
  opacity:0;transform:translateY(20px);
  transition:opacity 0.5s ease,transform 0.5s ease;
}
.reveal.visible{opacity:1;transform:translateY(0)}

/* ─── ANIMATIONS ──────────────────────────────────────── */
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* Animista keyframes — используются только tracking-in-expanded и text-focus-in.
   Остальные (slide-in-blurred-top, flip-in-hor-bottom, shadow-pop-br, vibrate-1,
   roll-in-left, glitch-anim) удалены как неиспользуемый код. */

/* tracking-in-expanded — буквы расходятся из плотного состояния и расширяются */
@keyframes tracking-in-expanded{
  0%{letter-spacing:-0.5em;opacity:0}
  40%{opacity:0.6}
  100%{letter-spacing:normal;opacity:1}
}

/* text-focus-in — текст появляется из размытого состояния */
@keyframes text-focus-in{
  0%{filter:blur(12px);opacity:0}
  100%{filter:blur(0);opacity:1}
}

/* ─── HERO REVEAL — 3 варианта, переключаемые ────────── */


/* ───── ВАРИАНТ C: типографика-первый ───── */
/* Сначала имя крупно, потом по очереди раскрываются остальные элементы */

@keyframes fadeInDown{
  0%{transform:translateY(-30px);opacity:0}
  100%{transform:translateY(0);opacity:1}
}
@keyframes fadeInUp{
  0%{transform:translateY(30px);opacity:0}
  100%{transform:translateY(0);opacity:1}
}
@keyframes dropFromTop{
  0%{transform:translateY(-200px);opacity:0}
  60%{opacity:1}
  100%{transform:translateY(0);opacity:1}
}

body .hero-line-first{
  animation:text-focus-in 0.9s cubic-bezier(0.55,0.085,0.68,0.53) both;
}
body .hero-line-last{
  animation:text-focus-in 0.9s cubic-bezier(0.55,0.085,0.68,0.53) both;
  animation-delay:0.2s;
}
body .hero-greet{
  animation:tracking-in-expanded 0.5s cubic-bezier(0.215,0.61,0.355,1) both;
  animation-delay:0.4s;
}
body .hero-labels{
  animation:tracking-in-expanded 0.7s cubic-bezier(0.215,0.61,0.355,1) both;
  animation-delay:0.6s;
}
body header{
  animation:fadeInDown 0.5s ease-out both;
  animation-delay:0.7s;
}
body .hero-corner{
  animation:dropFromTop 0.6s cubic-bezier(0.85,0,0.15,1) both;
}
body .hero-corner.tl{animation-delay:0.85s}
body .hero-corner.tr{animation-delay:0.95s}
body .hero-corner.bl{animation-delay:1.0s}
body .hero-bottom{
  animation:fadeInUp 0.5s ease-out both;
  animation-delay:1.1s;
}


/* ─── SERVICES ────────────────────────────────────────── */
#services{
  background:var(--paper);
  border-top:var(--b-thick) solid var(--ink);
  border-bottom:var(--b-thick) solid var(--ink);
}
.services-inner{max-width:var(--W);margin:0 auto}
.services-heading{
  font-family:var(--display);font-weight:900;
  font-size:clamp(36px,5vw,60px);
  line-height:0.95;color:var(--ink);
  margin-bottom:40px;letter-spacing:-0.02em;
}
.services-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
}
.service-card{
  background:var(--paper);padding:24px 22px;
  display:flex;flex-direction:column;gap:10px;
  border:var(--b) solid var(--ink);
  transition:transform var(--tr),box-shadow var(--tr);min-width:0;
  box-shadow:6px 6px 0 var(--brand,var(--ink));
}
.service-card:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--brand,var(--ink))}

.service-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;padding:6px;
  border:2px solid var(--ink);background:var(--paper);
  flex-shrink:0;margin-bottom:4px;font-size:24px;
}
.service-icon img,
.service-icon svg{
  width:100%;height:100%;
  display:block;
  object-fit:contain;
}
.service-name{
  font-family:var(--display);font-weight:900;
  font-size:20px;color:var(--ink);letter-spacing:-0.01em;margin-top:2px;
}
.service-desc{
  font-size:clamp(12px,1.2vw,13px);color:var(--gray);line-height:1.6;font-weight:400;
}
.services-cta{
  margin-top:36px;font-family:var(--mono);font-size:clamp(13px,1.3vw,15px);color:var(--ink);
}
.services-cta a,
.services-cta-link{
  color:var(--ink);font-weight:700;
  font-family:var(--mono);font-size:inherit;
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px;
  background:var(--slime);padding:1px 4px 1px 0;cursor:pointer;
  border:none;
  letter-spacing:inherit;
  /* <button> по умолчанию имеет UA-стиль text-align:center, который не
     наследует left от родителя. При переносе на 2 строки строки центрировались.
     Принудительно выравниваем по левому краю. */
  text-align:left;
}
.services-cta-link:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* ─── PROJECTS PLACEHOLDER ────────────────────────────── */
.project-placeholder{
  border:var(--b-thick) dashed var(--ink);padding:48px 32px;
  text-align:center;display:flex;flex-direction:column;align-items:center;gap:20px;
  background:var(--paper);box-shadow:var(--shadow-md);
}
.project-placeholder-icon{font-size:48px}
.project-placeholder-text{
  font-family:var(--mono);font-size:clamp(14px,1.5vw,16px);
  color:var(--ink);line-height:1.6;font-weight:400;
}
/* ─── HERO ANIMATIONS (active) ─── */
/* text-focus-in на имени IVAN PODOSHLOV  */
body .hero-line-first,
body .hero-line-last{
  animation:text-focus-in 1.2s cubic-bezier(0.55,0.085,0.68,0.53) both;
}
body .hero-line-last{animation-delay:0.3s}

/* ─── MODAL ───────────────────────────────────────────── */
.modal-overlay{
  display:none;position:fixed;inset:0;z-index:200;
  background:rgba(10,10,10,0.6);
  align-items:center;justify-content:center;
  padding:20px;
}
.modal-overlay.open{display:flex}
.modal{
  background:var(--paper);
  border:var(--b-thick) solid var(--ink);
  width:100%;max-width:480px;
  padding:32px;
  position:relative;
  box-shadow:8px 8px 0 var(--ember);
  animation:modalIn 0.2s ease;
  /* поля внутри не должны выходить за пределы модалки ни при каких обстоятельствах */
  overflow-x:hidden;
}
@keyframes modalIn{
  from{opacity:0;transform:translate(-4px,-4px)}
  to{opacity:1;transform:translate(0,0)}
}
.modal-close{
  position:absolute;top:8px;right:8px;
  width:36px;height:36px;
  background:var(--paper);
  border:2px solid var(--ink);
  cursor:pointer;
  font-family:var(--display);font-weight:900;
  font-size:18px;color:var(--ink);
  line-height:1;padding:0;
  transition:background var(--tr);
}
.modal-close:hover{background:var(--blood);color:var(--paper)}
.modal-title{
  font-family:var(--display);font-weight:900;
  font-size:24px;color:var(--ink);
  margin-bottom:24px;letter-spacing:-0.01em;
  /* отступ справа, чтобы длинный заголовок не залезал под кнопку × */
  padding-right:48px;
}
.form-group{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.form-label{
  font-family:var(--mono);font-size:11px;font-weight:700;
  letter-spacing:0.1em;text-transform:uppercase;color:var(--ink);
}
.form-input,.form-textarea{
  font-family:var(--mono);font-size:16px;
  background:var(--paper);color:var(--ink);
  border:var(--b) solid var(--ink);
  padding:11px 13px;width:100%;
  outline:none;
  transition:background var(--tr),box-shadow var(--tr);
  /* КРИТИЧНО: без этого width:100% + padding + border дают ширину больше
     контейнера, и поле вылезает за правый край модалки. Глобальный reset
     box-sizing по какой-то причине не применился к form-контролам. */
  box-sizing:border-box;
}
.form-input:focus,.form-textarea:focus{
  background:var(--nuclear);
  box-shadow:3px 3px 0 var(--ink);
}
.form-textarea{resize:vertical;min-height:110px;line-height:1.5}
.form-submit{
  width:100%;margin-top:8px;
  font-family:var(--mono);font-size:12px;font-weight:700;
  letter-spacing:0.12em;text-transform:uppercase;
  padding:14px;
  border:var(--b) solid var(--ink);
  background:var(--slime);color:var(--ink);
  cursor:pointer;
  box-shadow:var(--shadow-sm);
  transition:transform var(--tr),box-shadow var(--tr);
}
.form-submit:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.form-submit:active{transform:translate(2px,2px);box-shadow:none}
.form-submit:disabled{opacity:0.5;cursor:not-allowed;transform:none;box-shadow:var(--shadow-sm)}

/* Toast */
.toast{
  position:fixed;bottom:32px;left:50%;
  transform:translateX(-50%) translateY(20px);
  background:var(--ink);color:var(--bg);
  font-family:var(--mono);font-size:12px;font-weight:700;
  letter-spacing:0.06em;
  padding:14px 22px;
  border:var(--b) solid var(--ink);
  box-shadow:var(--shadow-sm) var(--slime);
  opacity:0;transition:all 0.3s ease;
  z-index:300;max-width:90vw;text-align:center;
  pointer-events:none;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* Privacy modal */
.privacy-modal{max-height:85vh;display:flex;flex-direction:column;box-shadow:8px 8px 0 var(--cyan)}
.privacy-body{
  overflow-y:auto;padding-right:8px;flex:1;
  scrollbar-width:thin;
}
.privacy-body::-webkit-scrollbar{width:6px}
.privacy-body::-webkit-scrollbar-thumb{background:var(--ink)}
.privacy-body h3{
  font-family:var(--display);font-weight:900;
  font-size:16px;color:var(--ink);
  margin:18px 0 8px;letter-spacing:-0.01em;
  padding:4px 8px;border:2px solid var(--ink);
  background:var(--nuclear);
  display:inline-block;
}
.privacy-body h3:first-child{margin-top:0}
.privacy-body p{
  font-family:var(--mono);font-size:13px;font-weight:400;
  color:var(--ink);line-height:1.6;
  margin-bottom:8px;
}
.privacy-body strong{font-weight:700}

/* ─── RESPONSIVE ──────────────────────────────────────── */
/* Header: nav физически не помещается между brand-mark и lang-switcher
   на узких экранах. Переключаем на бургер начиная с 1024px. */
@media(max-width:1024px){
  header{
    display:flex;
    grid-template-columns:none;
  }
  .nav-links{display:none}
  .nav-center{display:none}
  .burger{display:flex}
  .nav-drawer{display:flex}
  .lang-switcher{margin-left:auto}
}
@media(max-width:900px){
  .about-grid{grid-template-columns:1fr}
  .about-grid > div:last-child{padding-top:0}
}
@media(max-width:768px){
  header{padding:12px var(--px);gap:10px}
  .brand-full{font-size:16px}
  .brand-section{font-size:12px;letter-spacing:0.06em}
  .brand-domain{font-size:9px;letter-spacing:0.4px}
  /* nav-links/nav-center/burger/nav-drawer уже переключаются в @media(max-width:1024px) выше */
  /* === HERO FIX: убираем absolute + 100vh, нормальный поток === */
  #hero{
    min-height:calc(100dvh - 110px);
    min-height:calc(100svh - 110px);
    justify-content:space-between;
    padding-top:70px;
    padding-bottom:24px;
    gap:0;
  }
  .hero-corners-top{display:none}
  .hero-name{
    position:static;
    transform:none;
    margin-top:auto;
    opacity:0;
    animation:fadeUp 0.7s 0.25s ease forwards;
  }
  .hero-bottom{
    margin-top:clamp(20px,4vw,36px);
    flex-shrink:0;
  }
  .hero-footer{
    margin-top:auto;
  }
  .skills-grid{grid-template-columns:repeat(2,1fr);gap:18px}
  .projects-list{grid-template-columns:1fr;gap:22px}
  .stats-row{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(2){border-right:none}
  .stat:nth-child(-n+2){border-bottom:2px solid var(--ink)}
  /* Уменьшаю тени крупного текста на мобилке */
  .hero-line-first{
    text-shadow:
      1px 0 0 var(--ink), -1px 0 0 var(--ink), 0 1px 0 var(--ink), 0 -1px 0 var(--ink);
  }
  .hero-line-last{
    text-shadow:
      1px 0 0 var(--slime), -1px 0 0 var(--slime), 0 1px 0 var(--slime), 0 -1px 0 var(--slime),
      4px 4px 0 var(--ink), 3px 3px 0 var(--ink), 2px 2px 0 var(--ink), 1px 1px 0 var(--ink);
  }
  .about-heading .hl,.contact-heading .accent-word{
    text-shadow:3px 3px 0 var(--ink),2px 2px 0 var(--ink),1px 1px 0 var(--ink);
  }
    /* Уменьшаю цветные тени карточек на мобилке */
  .skill-item{box-shadow:5px 5px 0 var(--brand,var(--ink))}
}
@media(max-width:480px){
  :root{--px:18px;--shadow-sm:3px 3px 0 var(--ink);--shadow-md:5px 5px 0 var(--ink)}
  header{gap:8px}
  .brand-full{font-size:14px;letter-spacing:0}
  .brand-section{font-size:11px}
  .brand-domain{font-size:8.5px}
  .lang-btn{width:36px;height:36px;font-size:11px}
  .burger{width:36px;height:36px}
  .hero-cta{flex-direction:column;align-items:stretch;width:100%;max-width:340px}
  .hero-cta .btn{justify-content:center;white-space:normal;line-height:1.3}
  footer{flex-direction:column;text-align:center}
  .skills-grid{grid-template-columns:1fr;gap:16px}
  .stats-row{grid-template-columns:repeat(2,1fr)}
  .modal{padding:24px 20px}
}
/* Landscape Easter egg (Pug Runner) удалён: фича не реализована,
   а из-за этого блока на низком viewport (например 1200×600) скрывалось
   всё содержимое сайта, а footer оставался висеть в пустоте.
   Хотите вернуть — восстановите из истории git. */


/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE FIXES — дополнительная адаптивность для тестирования
   ═══════════════════════════════════════════════════════════════ */

/* === Extra-small screens (<360px) === */
@media(max-width:360px){
  :root{--px:14px}
  .brand-full{font-size:12px}
  .brand-section{font-size:10px}
  .hero-greet{font-size:14px}
  .hero-line-first{font-size:46px}
  .hero-line-last{font-size:30px}
  .hero-label{font-size:10px}
  .hero-label--sub{font-size:11px}
  .hero-cta .btn{font-size:11px;padding:12px 16px}
  .about-heading{font-size:34px}
  .skills-heading,.projects-heading{font-size:30px}
  .contact-heading{font-size:42px}
  .stats-row{grid-template-columns:1fr 1fr}
  .stat{padding:8px 4px}
  .stat-num{font-size:20px}
  .stat-prefix,.stat-label{font-size:8px}
  .contact-links{flex-direction:column;align-items:stretch}
  .contact-links .btn{min-width:auto;justify-content:center}
  .code-body{font-size:11px;padding:12px 14px}
  .modal{
    padding:20px 16px;
    /* На мобиле уменьшаем вынос тени, чтобы оранжевая тень не упиралась
       в край экрана и не создавала ощущение "вылезания" */
    box-shadow:5px 5px 0 var(--ember);
    /* гарантируем, что модалка с тенью влезает: overlay имеет padding,
       но тень 8px могла выходить за него. max-width учитывает это. */
    max-width:calc(100vw - 40px);
    overflow-x:hidden;
  }
  .modal-title{font-size:20px}
  /* Поля и кнопка — строго по ширине контента модалки, тени внутрь не выносим вбок */
  .modal .form-input,
  .modal .form-textarea,
  .modal .form-submit{
    max-width:100%;
  }
  .form-input:focus,.form-textarea:focus{
    /* тень фокуса вниз-вправо могла выйти за правый край узкой модалки */
    box-shadow:2px 2px 0 var(--ink);
  }
  /* Web10 extra-small */
}

/* === Tablet portrait (600-768px) — промежуточный переход === */
@media(min-width:600px) and (max-width:768px){
  .skills-grid{grid-template-columns:repeat(2,1fr);gap:20px}
  .projects-list{grid-template-columns:repeat(2,1fr);gap:22px}
  .hero-cta{flex-direction:row;max-width:480px}
}

/* === Tablet landscape (769-1024px) — улучшение === */
@media(min-width:769px) and (max-width:1024px){
  .about-grid{gap:32px}
  .skills-grid{grid-template-columns:repeat(3,1fr);gap:20px}
  .hero-label{font-size:clamp(14px,3vw,30px)}
}

/* === Hero name vertical overflow protection === */
@media(max-height:500px){
  #hero{min-height:auto;padding-top:80px;padding-bottom:40px}
  .hero-name{position:static;transform:none;margin-top:20px;opacity:1;animation:none}
  .hero-line-first{font-size:clamp(36px,8vw,60px)}
  .hero-line-last{font-size:clamp(30px,7vw,50px)}
  .hero-labels{margin-top:16px}
  .hero-bottom{margin-top:24px}
  .scroll-hint{display:none}
}

/* Планшеты в landscape (500–800px по высоте, например iPad mini 768×1024 повернутый) —
   мини-игра у нас включается только до 600px, выше игра не показывается, но и hero
   плохо помещается. Уменьшаем имя, чтобы не вылезало за экран. */
@media(min-height:501px) and (max-height:800px) and (orientation:landscape){
  .hero-line-first{font-size:clamp(40px,9vh,90px)}
  .hero-line-last{font-size:clamp(34px,8vh,80px)}
  .hero-labels{margin-top:12px}
  .hero-bottom{margin-top:14px}
}

/* === Safe area for notched phones (iPhone X+) === */
@supports(padding:max(0px)){
  header{
    padding-left:max(var(--px), env(safe-area-inset-left));
    padding-right:max(var(--px), env(safe-area-inset-right));
  }
  section{
    padding-left:max(var(--px), env(safe-area-inset-left));
    padding-right:max(var(--px), env(safe-area-inset-right));
  }
  footer{
    padding-left:max(var(--px), env(safe-area-inset-left));
    padding-right:max(var(--px), env(safe-area-inset-right));
    padding-bottom:max(18px, env(safe-area-inset-bottom));
  }
}

/* === A11Y: focus-visible для всех интерактивных элементов ===
   Скринридер + клавиатурная навигация: каждый интерактивный элемент
   должен показывать чёткий фокус-стейт. По умолчанию — толстый бордер slime. */
.btn:focus-visible,
.burger:focus-visible,
.modal-close:focus-visible,
.form-submit:focus-visible,
.nav-links a:focus-visible,
.nav-drawer a:focus-visible,
.footer-socials a:focus-visible,
.contact-links a:focus-visible,
.contact-links button:focus-visible,
.skill-item:focus-visible,
.service-card:focus-visible,
.brand-link:focus-visible,
.brand-section:focus-visible,
.brand-domain:focus-visible,
.link-underline:focus-visible,
.link-accent:focus-visible{
  outline:3px solid var(--slime);
  outline-offset:2px;
}
.form-input:focus-visible,
.form-textarea:focus-visible{
  outline:3px solid var(--ink);
  outline-offset:0;
}
/* В web10 — синий фокус, соответствующий эпохе */
body.web10 *:focus-visible{
  outline:2px dotted #000080 !important;
  outline-offset:1px !important;
}

/* === Print styles (bonus) === */
@media print{
  header,.scroll-hint,.hero-corner,.burger,.nav-drawer,.nav-overlay{display:none}
  body{background-image:none}  /* убрать сетку при печати */
  section{break-inside:avoid;page-break-inside:avoid}
  .reveal{opacity:1!important;transform:none!important}
}

/* === Hover media query — disable hover effects on touch === */
@media(hover:none){
  .btn:hover{transform:none}
  .btn--primary:hover{box-shadow:6px 6px 0 var(--ink)}
  .btn--ghost:hover{background:var(--paper);box-shadow:6px 6px 0 var(--ink)}
  .skill-item:hover{transform:none}
}

/* === Fix iOS input zoom === */
@media(max-width:768px){
  .form-input,.form-textarea{font-size:16px}
}

/* Stats border fix on 2-column layout — третья ячейка нуждается в правом бордере,
   потому что .stat:last-child{border-right:none} убирает его у четвёртой */
@media(max-width:768px){
  .stat:nth-child(3){border-right:2px solid var(--ink)}
}

/* === Services responsive === */
@media(max-width:900px){.services-grid{grid-template-columns:repeat(2,1fr);gap:18px}}
@media(max-width:480px){
  .services-grid{grid-template-columns:1fr;gap:16px}
  .service-card{box-shadow:4px 4px 0 var(--brand,var(--ink))}
}
@media(hover:none){.service-card:hover{transform:none}}
/* На мобилке — увеличенная hit-area через invisible padding,
   чтобы попасть в Apple HIG-минимум 44×44. Размер пиксельного смайлика НЕ увеличиваем —
   он должен оставаться маленьким артефактом-реликтом 16×16. */
@media(max-width:768px){
  .smile-toggle{
    padding:14px 16px;
    margin:-10px -12px;
  }
}
/* Hero-режим: показываем только крупный логотип, прячем двухуровневый */


/* ─── WEB 1.0 MODE ────────────────────────────────────── */
/* Полное преображение в стиле 1996 при клике тоггла. */

@keyframes blink-1{0%,49%{opacity:1}50%,100%{opacity:0}}
/* Быстрый blink — для NEW! */
@keyframes blink-fast{0%,49%{opacity:1}50%,100%{opacity:0.15}}
/* Цветовая цикл-анимация — radиography текст 1996 */
@keyframes rainbow-color{
  0%{color:#ff0000}25%{color:#cccc00}50%{color:#339933}75%{color:#000099}100%{color:#ff0000}
}
/* Конструкционная стрелка-индикатор пульсирует */
@keyframes construction-pulse{
  0%,100%{transform:scale(1)}50%{transform:scale(1.06)}
}
/* Скачущий "NEW!" badge */
@keyframes badge-bounce{
  0%,100%{transform:translateY(0) rotate(-3deg)}
  50%{transform:translateY(-3px) rotate(3deg)}
}

body.web10{
  background:#008080 !important;
  /* Tiled "звёздный" паттерн через repeating gradient */
  background-image:
    repeating-linear-gradient(45deg, transparent 0 18px, rgba(255,255,255,0.04) 18px 19px),
    repeating-linear-gradient(-45deg, transparent 0 18px, rgba(255,255,255,0.04) 18px 19px) !important;
  font-family:"Press Start 2P", "Times New Roman", serif !important;
  font-size:10px !important;
  color:#cccc00 !important;
  -webkit-font-smoothing:auto !important;
  -moz-osx-font-smoothing:auto !important;
}

/* Полностью убираем брутализм-шрифты и стили */
body.web10 *{
  font-family:"Press Start 2P", "Times New Roman", serif !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  font-weight:normal !important;
  border-radius:0 !important;
  box-shadow:none !important;
  text-shadow:none !important;
  filter:none !important;
}

/* Модалка в web10: пиксельный шрифт (Press Start 2P) очень широкий,
   поэтому уменьшаем заголовок и разрешаем перенос, чтобы текст и поля
   не вылезали за края окна на мобильных. */
body.web10 .modal{
  /* На десктопе модалка ограничена 520px (modern: 480px, в web10 чуть шире
     потому что Press Start 2P — широкий пиксельный шрифт). На мобилке
     ниже растягивается почти на весь viewport — иначе текст полей вылазит. */
  max-width:520px !important;
  overflow-x:hidden !important;
  padding:20px 16px !important;
}
@media(max-width:600px){
  body.web10 .modal{
    max-width:calc(100vw - 32px) !important;
  }
}
body.web10 .modal-title{
  font-size:clamp(11px,3.2vw,16px) !important;
  line-height:1.6 !important;
  word-break:break-word !important;
  overflow-wrap:anywhere !important;
  padding-right:44px !important; /* чтобы не залезать под кнопку × */
}
body.web10 .modal .form-input,
body.web10 .modal .form-textarea{
  font-size:13px !important;
  max-width:100% !important;
}
body.web10 .modal .form-label{
  font-size:11px !important;
}
body.web10 .modal .form-submit{
  font-size:12px !important;
  max-width:100% !important;
}

/* Шапка — серый Win95 контейнер */
body.web10 header{
  background:#c0c0c0 !important;
  border-top:2px solid #ffffff !important;
  border-left:2px solid #ffffff !important;
  border-right:2px solid #808080 !important;
  border-bottom:2px solid #808080 !important;
  padding:6px 12px !important;
  position:relative !important;
}
body.web10 .brand-mark{
  display:flex !important;flex-direction:row !important;
  align-items:center !important;gap:8px !important;
  text-decoration:none !important;
  color:#000099 !important;
}
body.web10 .brand-full{
  display:inline !important;
  font-size:10px !important;
  font-weight:bold !important;
  color:#000099 !important;
}
/* Двухуровневый бренд (section + domain) скрываем — оставляем только PODOSHLOV.COM */
body.web10 .brand-section,
body.web10 .brand-domain{display:none !important}
body.web10 .brand-mark .dot{color:#000099 !important}

/* Кнопки навигации — Windows 95 buttons */
body.web10 .nav-links{border:none !important;background:transparent !important;width:auto !important}
body.web10 .nav-links li{border:none !important;flex:0 0 auto !important}
body.web10 .nav-links a{
  background:#c0c0c0 !important;
  border-top:2px solid #ffffff !important;
  border-left:2px solid #ffffff !important;
  border-right:2px solid #808080 !important;
  border-bottom:2px solid #808080 !important;
  color:#000000 !important;
  font-size:11px !important;
  padding:4px 10px !important;
  margin:0 2px !important;
  min-width:0 !important;
  text-align:center !important;
  white-space:nowrap !important;
}
body.web10 .nav-links a:hover{background:#a0a0a0 !important}
@media(max-width:900px){
  body.web10 .nav-links a{font-size:9px !important;padding:3px 6px !important}
}

/* RU/EN переключатель — старые радиокнопки-style */
body.web10 .lang-btn{
  background:#c0c0c0 !important;
  border-top:2px solid #ffffff !important;
  border-left:2px solid #ffffff !important;
  border-right:2px solid #808080 !important;
  border-bottom:2px solid #808080 !important;
  color:#000000 !important;
  width:auto !important;height:auto !important;
  padding:3px 10px !important;
  font-size:11px !important;
}
body.web10 .lang-btn.active{
  background:#000080 !important;color:#ffffff !important;
  border-top-color:#808080 !important;border-left-color:#808080 !important;
  border-right-color:#ffffff !important;border-bottom-color:#ffffff !important;
}

/* Hero — центрированный текст, без modern layout */
/* web10 HERO: геометрия (padding, flex, распределение, margin-top:auto на name/footer)
   полностью наследуется от брутализм-правил #hero/.hero-name/.hero-footer.
   Здесь — ТОЛЬКО скин: шрифты, цвета, тени. */
body.web10 #hero{
  /* В брутализме header position:fixed и НЕ занимает место — hero = 100vh.
     В web10 header + дата-стрип стоят в потоке (≈75px десктоп / больше на мобиле),
     поэтому 100vh у hero выталкивает контент за экран. Вычитаем их высоту,
     чтобы первый экран = ровно viewport, как в брутализме. */
  height:auto !important;
  max-height:none !important;
  /* -75px: высота хедера+дата-стрипа (в потоке). Дополнительно -42px: высота
     фиксированного нижнего баннера UNDER CONSTRUCTION, иначе scroll-hint внизу hero
     уходит под баннер и не виден (в брутализме баннера нет). */
  min-height:calc(100vh - 117px) !important;
  min-height:calc(100dvh - 117px) !important;
  /* В брутализме padding-top:80px нужен, чтобы контент ушёл из-под FIXED-хедера
     (зазор хедер→V.2026 ≈ 11px). В web10 хедер+дата-стрип стоят в потоке НАД hero
     и сами создают отступ, поэтому большой padding не нужен — оставляем те же ~11px,
     чтобы зазор до V.2026 совпадал с брутализмом. */
  padding-top:11px !important;
}
body.web10 .hero-name{
  /* гарантируем то же вертикальное распределение, что и в брутализме
     (имя по центру через auto-margin в flex-колонке) */
  margin-top:auto !important;
}
body.web10 .hero-greet{
  font-style:normal !important;
  color:#ffffff !important;
  /* Modern: clamp(14px, …, 24px) JBM → физ. высота 10–17 px.
     PS 2P 1:1 (физ. высота ≈ font-size) → совпадает по физической высоте. */
  font-size:clamp(10px, 1.4vw, 16px) !important;
  line-height:1.6 !important;
}
body.web10 .hero-line-first,
body.web10 .hero-line-last{
  font-weight:bold !important;
  /* кегль чуть меньше брутализма — пиксельный шрифт намного шире, иначе не влезает */
  font-size:clamp(28px, min(9vw, 10vh), 90px) !important;
  color:#cccc00 !important;
  text-shadow:2px 2px 0 #990000 !important;
  letter-spacing:1px !important;
}
body.web10 .hero-line-last{color:#339933 !important;text-shadow:2px 2px 0 #663366 !important}
body.web10 .hero-label{
  color:#cccc00 !important;
  /* Modern: clamp(11px, …, 36px) JBM → физ. высота 8–25 px.
     В web10 max=18px чтобы "Fullstack Web Developer · Фрилансер" не выходил
     за viewport — PS 2P 25px при 33 символах = ~825px ширины. */
  font-size:clamp(9px, 1.6vw, 18px) !important;
  line-height:1.6 !important;
}
body.web10 .hero-label--sub{
  font-style:normal !important;
  color:#ffffff !important;
  /* Modern: clamp(11px, …, 24px) JBM → физ. высота 8–17 px. */
  font-size:clamp(9px, 1.4vw, 16px) !important;
  line-height:1.6 !important;
}
/* Смайлик 😉 должен быть размером с текст или чуть крупнее, не мельче.
   clamp с min 16px гарантирует, что на узком экране (когда .hero-label--sub
   падает до 9px) смайлик не сжимается ниже читаемого размера.
   1.6em — чуть крупнее родительского текста. */
body.web10 .hero-emoji{
  font-size:clamp(16px, 1.6em, 28px) !important;
  line-height:1 !important;
  vertical-align:middle !important;
}
@media(max-width:480px){
  body.web10 .hero-label{
    font-size:12px !important;
    line-height:1.8 !important;
  }
  body.web10 .hero-label--sub{
    font-size:12px !important;
  }
}

/* Цветная "tagline" в стиле Tripod 1996 — отдельная строка псевдоэлементом.
   Невозможно сделать многоцветный <font>...</font> через CSS на одном элементе,
   поэтому используем layered text-shadow для эффекта раскрашенных слов.
   Альтернатива — через text-shadow с цветными словами не работает,
   используем градиент background-clip:text + смайл-разделители */
/* (декоративная строка "~ HTML * CSS * JS * PHP * REACT ~" удалена —
   в брутализме её нет, геометрия секций должна совпадать) */

/* CTA-кнопки — Win95 style */
body.web10 .btn,
body.web10 .btn--primary,
body.web10 .btn--ghost{
  background:#c0c0c0 !important;
  border-top:3px solid #ffffff !important;
  border-left:3px solid #ffffff !important;
  border-right:3px solid #808080 !important;
  border-bottom:3px solid #808080 !important;
  color:#000000 !important;
  font-size:10px !important;
  line-height:1.5 !important;
  padding:8px 10px !important;
  text-transform:none !important;
  word-spacing:-2px !important;
}
body.web10 .btn:active,
body.web10 .btn--primary:active,
body.web10 .btn--ghost:active{
  border-top-color:#808080 !important;border-left-color:#808080 !important;
  border-right-color:#ffffff !important;border-bottom-color:#ffffff !important;
}

/* Section-headings — выравнивание по левому краю как в брутализме.
   ВАЖНО: исключаем .hero-name, потому что в hero оба режима должны центрироваться.
   Селектор :not(.hero-name) на h1 предотвращает попадание hero под общее правило. */
body.web10 .skills-heading,
body.web10 .projects-heading,
body.web10 .about-heading,
body.web10 .contact-heading,
body.web10 h2,
body.web10 h3{
  font-size:clamp(20px, 5.5vw, 44px) !important;
  font-weight:bold !important;
  color:#cccc00 !important;
  text-align:start !important;
  text-decoration:none !important;
  margin:20px 0 !important;
  line-height:1.2 !important;
}
/* Hero (h1.hero-name) остаётся центрированным в обоих режимах */
body.web10 h1.hero-name{
  font-weight:bold !important;
  color:#cccc00 !important;
  text-align:center !important;
  /* margin НЕ задаём — берётся из брутализма (.hero-name margin-top:auto),
     чтобы вертикальное распределение hero совпадало */
}
/* Перекрашиваем оставшиеся бруталистические акценты на websafe-1996 */
body.web10 .hl,
body.web10 .accent-word{
  color:#cccc00 !important;
  -webkit-text-fill-color:#cccc00 !important;
}
body.web10 .link-accent{
  background:#cccc00 !important;
  color:#000000 !important;
  border:2px outset #cccc66 !important;
  text-decoration:underline !important;
}
body.web10 .c-string{color:#339933 !important}
/* about-quote: высокая специфичность + темнее, чтобы точно перебить --nuclear */
body.web10 .about-quote.about-quote{
  background:#999966 !important;
  border:2px ridge #666633 !important;
  color:#000000 !important;
}
body.web10 .about-quote *{color:#000000 !important}

/* Hero-name (h1) — снимаем подчёркивание с имени и лейблов
   (общее правило body.web10 h1 подчёркивает все заголовки,
   но имя — это декоративный блок, не ссылка) */
body.web10 .hero-name,
body.web10 .hero-name *{
  text-decoration:none !important;
}

/* Code-card (developer.config.js) — переводим в Win95-эстетику
   из современной dark VS Code темы */
body.web10 .code-card{
  background:#FFFFCC !important;
  color:#000000 !important;
  border:2px outset #c0c0c0 !important;
  box-shadow:none !important;
}
body.web10 .code-card-header{
  background:#000080 !important;
  border-bottom:2px solid #000000 !important;
  padding:4px 8px !important;
}
body.web10 .code-card-header *{
  color:#FFFFFF !important;
}
body.web10 .code-filename{
  font-size:10px !important;
  font-weight:bold !important;
  letter-spacing:0 !important;
}
/* macOS traffic-light dots → Win95 close-button style square */
body.web10 .code-dots{display:none !important}
body.web10 .code-body{
  font-size:10px !important;
  color:#000000 !important;
  padding:12px !important;
}
/* Описание над цифрами — мельче основного текста */
body.web10 .about-text,
body.web10 .skill-desc,
body.web10 .project-desc,
body.web10 .contact-sub,
body.web10 .about-quote,
body.web10 .about-quote-text{
  font-size:11px !important;
  line-height:1.7 !important;
}
/* Websafe syntax highlighting */
body.web10 .c-keyword{color:#000099 !important; font-weight:bold !important}
body.web10 .c-key{color:#990000 !important}
body.web10 .c-string{color:#006600 !important}
body.web10 .c-comment{color:#666666 !important; font-style:normal !important}
body.web10 .c-bool,
body.web10 .c-num{color:#993300 !important}

/* Section-labels (// обо мне, // навыки) скрываем — они дублируют большие заголовки
   и в брутализме у них белый фон, который не вписывается в эстетику Web 1.0 */
body.web10 .section-label{display:none !important}

/* Stats-row (2024, 20+, 999+, 100+) — тоже Win95 окошки */
body.web10 .stats-row{
  background:#c0c0c0 !important;
  border-top:2px solid #ffffff !important;
  border-left:2px solid #ffffff !important;
  border-right:2px solid #808080 !important;
  border-bottom:2px solid #808080 !important;
  padding:8px !important;
  display:grid !important;
  grid-template-columns:repeat(4,1fr) !important;
  overflow:hidden !important;
}
body.web10 .stat{
  background:#c0c0c0 !important;
  color:#000000 !important;
  border-top:2px solid #ffffff !important;
  border-left:2px solid #ffffff !important;
  border-right:2px solid #808080 !important;
  border-bottom:2px solid #808080 !important;
  padding:6px 4px !important;
  overflow:hidden !important;
}
body.web10 .stat-num{font-size:clamp(14px, min(2.5vw, 3vh), 26px) !important;white-space:nowrap !important}
body.web10 .stat-prefix{font-size:7px !important}
body.web10 .stat-label{font-size:7px !important}
body.web10 .stat *{color:#000000 !important}

/* Все фоны секций */
body.web10 section{
  background:transparent !important;
  border-top:2px ridge #c0c0c0 !important;
  border-bottom:2px ridge #c0c0c0 !important;
}

/* Карточки skill — окошки в стиле Win95 */
body.web10 .skill-item,
body.web10 .skills-grid > *{
  background:#c0c0c0 !important;
  color:#000000 !important;
  border-top:2px solid #ffffff !important;
  border-left:2px solid #ffffff !important;
  border-right:2px solid #808080 !important;
  border-bottom:2px solid #808080 !important;
  padding:10px !important;
  margin:0 !important;
}
body.web10 .skill-item *{color:#000000 !important}
/* В HTML web10 у .skill-item нет <h3>, заголовок — <span class="skill-name">.
   Базовый .skill-name = 24px Russo One; при подмене шрифта на Press Start 2P
   (пиксельный, высота кап-буквы ≈ font-size) 24px PS 2P даёт ~24px высоту
   буквы вместо ~17px у modern. Опускаем до 17px, чтобы физическая высота
   совпадала с modern. line-height и word-break — чтобы длинные технологии
   ("JavaScript") переносились, а не вылазили за карточку. */
body.web10 .skill-name{
  font-size:17px !important;
  line-height:1.4 !important;
  word-break:break-word !important;
  color:#000080 !important;
}

/* Service cards in Web 1.0 — same Win95 style as skill-items */
body.web10 .service-card,
body.web10 .services-grid > *{
  background:#c0c0c0 !important;
  color:#000000 !important;
  border-top:2px solid #ffffff !important;
  border-left:2px solid #ffffff !important;
  border-right:2px solid #808080 !important;
  border-bottom:2px solid #808080 !important;
  padding:10px !important;
  margin:0 !important;
}
body.web10 .service-card *{color:#000000 !important}
/* Аналогично .skill-name: базовый .service-name = 20px Russo One → 14px PS 2P
   для совпадения физической высоты. Длинные названия ("Telegram-боты и Mini Apps")
   переносятся на 2 строки благодаря word-break и line-height. */
body.web10 .service-name{
  font-size:14px !important;
  line-height:1.4 !important;
  word-break:break-word !important;
  color:#000080 !important;
}
body.web10 .service-icon{border:none !important;background:transparent !important}
body.web10 .services-cta a,
body.web10 .services-cta-link{
  background:#cccc00 !important;
  color:#000000 !important;
  border:2px outset #cccc66 !important;
  /* Press Start 2P высокий — без увеличенного line-height верх букв
     обрезается на переносе строки ("вместе") */
  line-height:1.8 !important;
  /* вертикальный padding для воздуха фона; левый = 0, чтобы текст был ровно
     под строкой "Не нашли нужную услугу?" выше (без сдвига вправо) */
  padding:4px 6px 4px 0 !important;
  /* компенсируем левый border 2px отрицательным margin, чтобы текст внутри
     плашки начинался ровно на той же вертикали, что и строка выше */
  margin-left:-2px !important;
  /* фон и padding корректно оборачивают КАЖДУЮ строку многострочного текста,
     а не только первую — иначе вторая строка съезжает за пределы фона */
  -webkit-box-decoration-break:clone !important;
  box-decoration-break:clone !important;
  /* <button> имеет UA text-align:center — выравниваем строки по левому краю */
  text-align:left !important;
}
body.web10 .services-cta{
  text-align:left !important;
  line-height:1.8 !important;
}
body.web10 .services-heading{
  font-size:clamp(20px, 5.5vw, 44px) !important;
  color:#cccc00 !important;
}
/* Project placeholder in Web 1.0 */
body.web10 .project-placeholder{
  background:#c0c0c0 !important;
  border:2px ridge #ffffff !important;
  padding:20px !important;
}
body.web10 .project-placeholder *{color:#000000 !important}

/* Иконки в Web 1.0 — заменяем SVG на 90s-style text-banner блоки 88x31 */
body.web10 .skill-icon{
  background:transparent !important;
  border:none !important;
  width:auto !important;height:auto !important;
  padding:0 !important;
  display:inline-block !important;
}
body.web10 .skill-icon svg,
body.web10 .skill-icon img{display:none !important}

/* Каждая иконка получает свой 88x31 текстовый "баннер" через ::before */
body.web10 .skill-item:nth-child(1) .skill-icon::before{
  content:"[ HTML 4.01 ]";
  background:#cc6633;color:#ffffff;
}
body.web10 .skill-item:nth-child(2) .skill-icon::before{
  content:"< CSS 2 >";
  background:#000080;color:#ffffff;
}
body.web10 .skill-item:nth-child(3) .skill-icon::before{
  content:"* JavaScript *";
  background:#cccc00;color:#000000;
}
body.web10 .skill-item:nth-child(4) .skill-icon::before{
  content:"~ React ~";
  background:#669999;color:#000000;
}
body.web10 .skill-item:nth-child(5) .skill-icon::before{
  content:"[ PHP 4 ]";
  background:#663399;color:#ffffff;
}
body.web10 .skill-item:nth-child(6) .skill-icon::before{
  content:"* MySQL *";
  background:#00678C;color:#ffffff;
}
body.web10 .skill-icon::before{
  display:inline-block;
  font-size:8px !important;
  font-weight:bold !important;
  padding:0 12px;
  border:2px outset #c0c0c0;
  letter-spacing:0;
  text-transform:none;
  min-width:88px;width:auto;height:31px;
  line-height:27px;
  text-align:center;
  box-sizing:border-box;
  white-space:nowrap;
  overflow:visible;
}

/* Hero-stack — те же иконки в маленьких чипах в hero. В Web 1.0 hero они скрыты. */
body.web10 .hero-stack{display:none !important}

/* Контактная секция — text-align:center наследуется от #contact в брутализме,
   восстанавливаем то же поведение для web10, перебивая общее правило h2-start */
body.web10 #contact .contact-heading{
  color:#cccc00 !important;
  text-decoration:none !important;
  text-align:center !important;
  /* Modern: 96px Russo One → физ. высота ~69px. Press Start 2P 64px даёт
     совпадение по высоте. На узкой ширине "Есть задача?" в PS 2P не помещается
     в .contact-inner{max-width:640px} одной строкой и переносится на две —
     это допустимо для 1996-стилистики. */
  font-size:clamp(24px, 6vw, 64px) !important;
  line-height:1.2 !important;
  word-break:break-word !important;
}
body.web10 .contact-sub{
  color:#ffffff !important;
  font-size:11px !important;
  font-style:normal !important;
}
body.web10 .contact-links a,
body.web10 .contact-links button{
  background:#c0c0c0 !important;
  border-top:3px solid #ffffff !important;
  border-left:3px solid #ffffff !important;
  border-right:3px solid #808080 !important;
  border-bottom:3px solid #808080 !important;
  color:#000099 !important;
  text-decoration:underline !important;
  padding:6px 12px !important;
  font-size:12px !important;
  margin:4px !important;
  /* Reset для <button> — убираем дефолтные стили браузера */
  box-shadow:none !important;
  cursor:pointer;
  font-family:inherit !important;
}

/* Web 1.0 — 88x31 web buttons (скрыты по дефолту) */
.web10-banners{display:none}
body.web10 .web10-banners{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
  padding:20px 16px 60px;
  background:transparent;
}
.w10b{
  min-width:88px;width:auto;height:auto;min-height:31px;
  padding:4px 6px;
  font-size:7px;
  font-weight:bold;
  line-height:1.4;
  text-align:center;
  display:inline-block;
  border:2px outset #c0c0c0;
  letter-spacing:0;
  text-transform:uppercase;
  box-sizing:border-box;
  flex-shrink:0;
}
@media(max-width:480px){
  /* Узкая portrait мобилка: 3 верхних в один ряд равной ширины,
     2 нижних во второй ряд равной ширины (вместе занимают ширину трёх верхних).
     Используем grid из 6 колонок: 2+2+2 для верхнего ряда, 3+3 для нижнего.
     На landscape мобилке/планшете/десктопе остаётся flex-wrap (одна строка). */
  body.web10 .web10-banners{
    display:grid;
    grid-template-columns:repeat(6, 1fr);
    gap:8px;
    padding:20px 12px 60px;
  }
  .w10b{
    min-width:0;width:auto;
    padding:6px 4px;
    grid-column:span 2;
  }
  body.web10 .web10-banners .w10b:nth-child(4),
  body.web10 .web10-banners .w10b:nth-child(5){
    grid-column:span 3;
  }
}
.w10b-netscape{background:#000080;color:#ffffff}
.w10b-html{background:#cc9933;color:#000000}
.w10b-notepad{background:#c0c0c0;color:#000000;border-color:#ffffff #808080 #808080 #ffffff}
.w10b-counter{
  background:#000000;color:#339933;
  animation:counter-flicker 3s steps(2) infinite;
}
@keyframes counter-flicker{
  0%,90%,100%{opacity:1}
  92%,94%{opacity:0.6}
}
.w10b-anchor{background:#cccc00;color:#000000;animation:blink-1 1.5s infinite}

/* Sticky-footer паттерн для web10:
   body — flex-column min-height:100vh. footer + bottom-banner находятся в потоке
   ПОСЛЕ всех секций. footer имеет margin-top:auto — это толкает footer + всё что
   ниже (т.е. bottom-banner) к низу страницы. Никаких fixed-позиционирований и
   магических padding-констант. */
body.web10{
  display:flex !important;
  flex-direction:column !important;
  min-height:100vh !important;
}

/* Нижний бегущий баннер — HTML-элемент с анимированными частями */
.w10-bottom-banner{display:none}
body.web10 .w10-bottom-banner{
  display:block;
  background:#cccc00;
  color:#000000;
  font-size:8px;
  font-weight:bold;
  text-align:center;
  padding:4px 12px;
  line-height:1.3;
  border-top:3px solid #990000;
  border-bottom:3px solid #990000;
  /* В потоке после footer — sticky-footer flex поднимает оба к низу страницы.
     Никакого position:fixed, никакого z-index. */
  width:100%;
}
.w10-bottom-banner .uc{
  display:inline-block;
  margin:0 10px;
  transform-origin:center center;
  animation:construction-pulse 1.6s ease-in-out infinite;
}
.w10-bottom-banner .new{
  display:inline-block;
  background:#ff0000;
  color:#ffff00;
  padding:0 5px;
  font-size:8px;
  margin:0 8px;
  border:1px solid #000000;
  animation:blink-fast 0.7s steps(2) infinite;
}
.w10-bottom-banner .star{
  display:inline-block;
  margin:0 4px;
  animation:rainbow-color 2s steps(4) infinite;
}
.w10-bottom-banner .guestbook-link{
  color:#000099 !important;
  text-decoration:none !important;
  font-weight:bold;
  white-space:nowrap;
}
@media(max-width:768px){
  .w10-bottom-banner{font-size:8px;padding:4px 8px;line-height:1.35}
  .w10-bottom-banner .new{font-size:8px;margin:0 6px;padding:0 4px}
  .w10-bottom-banner .uc{margin:0 6px}
  .w10-bottom-banner .star{margin:0 3px}
  /* На мобиле дата-стрип выше (VISITORS переносится) + нижний баннер: вычитаем больше */
  body.web10 #hero{
    min-height:calc(100vh - 132px) !important;
    min-height:calc(100dvh - 132px) !important;
  }
  /* Пиксельный шрифт Press Start 2P ~1.8× шире обычного — на узком экране
     текст hero вылезает за края. Уменьшаем кегль и разрешаем перенос длинных строк. */
  body.web10 .hero-line-first,
  body.web10 .hero-line-last{
    font-size:clamp(22px, 7vw, 40px) !important;
  }
  body.web10 .hero-label{
    font-size:8px !important;
    white-space:normal !important;   /* "Fullstack Web Developer · Фрилансер" переносится, а не вылезает */
    line-height:1.7 !important;
  }
  body.web10 .hero-label--sub{
    font-size:8px !important;
    white-space:normal !important;
  }
  body.web10 .hero-greet{
    font-size:10px !important;
  }
}
@media(max-width:480px){
  /* Узкий экран: оставляем только UC + NEW + © 1996-2026.
     Прячем: ★, Sign my guestbook!, Powered by HTML 4.01 и их звёзды. */
  .w10-bottom-banner .w10b-mobile-hide{display:none !important}
}

/* ─── FOOTER в Web 1.0 стиле (Win95 status bar) ───
   Скрывать footer нельзя: там единственная ссылка на Privacy-политику.
   Стилизуем под нижнюю строку Windows 95 — серый фон, inset-рамка,
   гиперссылки в стиле "Privacy" подчёркнуты navy-цветом. */
body.web10 footer{
  background:#c0c0c0 !important;
  /* Inset-рамка как у статус-бара Win95: тёмная сверху/слева, светлая снизу/справа */
  border-top:2px solid #808080 !important;
  border-left:2px solid #808080 !important;
  border-right:2px solid #ffffff !important;
  border-bottom:2px solid #ffffff !important;
  color:#000000 !important;
  text-align:center !important;
  padding:14px 16px !important;
  font-size:9px !important;
  line-height:1.7 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  gap:10px !important;
  /* Прижимаем footer к низу через margin-top:auto.
     Работает потому что body.web10 ниже выставлен в display:flex; flex-direction:column. */
  margin-top:auto !important;
  margin-bottom:0 !important;
}
body.web10 .footer-copy{
  font-size:9px !important;
  color:#000000 !important;
  letter-spacing:0 !important;
}
body.web10 .footer-socials{display:flex !important;gap:8px !important}
body.web10 .footer-socials a{
  font-size:8px !important;
  letter-spacing:0 !important;
  color:#000000 !important;
  background:#c0c0c0 !important;
  /* Win95 outset кнопка */
  border-top:2px solid #ffffff !important;
  border-left:2px solid #ffffff !important;
  border-right:2px solid #808080 !important;
  border-bottom:2px solid #808080 !important;
  padding:4px 10px !important;
  text-decoration:none !important;
}
body.web10 .footer-socials a:hover{background:#d4d0c8 !important}
body.web10 .footer-socials a:active{
  /* при клике инвертируем — inset (вдавленная) */
  border-top-color:#808080 !important;
  border-left-color:#808080 !important;
  border-right-color:#ffffff !important;
  border-bottom-color:#ffffff !important;
}
body.web10 .footer-privacy{
  font-size:8px !important;
  color:#000000 !important;
  line-height:1.7 !important;
  letter-spacing:0 !important;
  margin:0 !important;
  padding-top:8px !important;
  border-top:1px dashed #808080 !important;
  width:100% !important;
  max-width:680px !important;
}
/* Privacy-ссылка — классическая гиперссылка 1996: navy + подчёркивание */
body.web10 .footer-privacy .link-underline{
  color:#0000ee !important;
  text-decoration:underline !important;
  font-weight:normal !important;
  background:transparent !important;
}
body.web10 .footer-privacy .link-underline:visited{color:#551a8b !important}
body.web10 .footer-privacy .link-underline:hover{color:#ff0000 !important}

/* padding-bottom управляется выше (sticky-footer flex column). */

/* Тост и модалки нужны во всех режимах — wildcard ! важный для box-shadow убирает
   их тени, восстанавливаем явно через переопределение */
body.web10 .toast{
  background:#000080 !important;
  color:#ffffff !important;
  border:2px outset #c0c0c0 !important;
  font-size:9px !important;
  letter-spacing:0 !important;
}

/* ─── Web 1.0 DATESTRIP (полноширинная стрипа сверху) ─── */
/* Скрыто по умолчанию в брутализме */
.w10-datestrip{display:none}

body.web10 .w10-datestrip{
  display:block;
  background:#cccc66;
  color:#000080;
  font-style:normal;
  font-size:10px;
  text-align:center;
  padding:8px 16px;
  border-top:2px solid #ffffff;
  border-bottom:2px solid #808080;
  letter-spacing:0.3px;
}
body.web10 .w10-ds-day{
  font-weight:bold;
  font-style:normal;
  color:#990000;
  letter-spacing:1px;
}
body.web10 .w10-ds-date{
  font-weight:bold;
  font-style:normal;
}
body.web10 .w10-ds-sep{
  margin:0 10px;
  color:#808080;
  font-style:normal;
}
body.web10 .w10-ds-visitors{
  font-style:normal;
  font-size:8px;
  color:#000000;
  letter-spacing:1px;
  font-weight:bold;
}
body.web10 .w10-ds-counter{
  display:inline-block;
  background:#000000;
  color:#00ff00;
  font-size:8px;
  padding:1px 6px;
  margin-left:4px;
  border:1px inset #c0c0c0;
  letter-spacing:1px;
  animation:counter-flicker 3s steps(2) infinite;
}
@media(max-width:480px){
  /* Мобилка — складываем в две строки, чтобы не сжимать */
  body.web10 .w10-datestrip{
    font-size:8px;
    padding:6px 8px;
    line-height:1.5;
  }
  body.web10 .w10-ds-sep{display:block;height:0;visibility:hidden}
  body.web10 .w10-ds-visitors{font-size:8px;display:inline-block;margin-top:2px}
  body.web10 .w10-ds-counter{font-size:8px}
}


/* ─── Web 1.0 SIDEBAR (Tripod 1996 style) ─────────────── */
/* Скрыт по умолчанию в брутализме */
.w10-sidebar{display:none}

body.web10 .w10-sidebar{
  display:block;
  position:absolute;
  top:80px;
  right:30px;
  width:200px;
  background:#c0c0c0;
  border-top:2px solid #ffffff !important;
  border-left:2px solid #ffffff !important;
  border-right:2px solid #808080 !important;
  border-bottom:2px solid #808080 !important;
  padding:12px;
  text-align:center;
  z-index:5;
  color:#000000;
}
/* CSS-фолбэк: страхуем от race condition между resize и JS.
   - Ниже 1400px sidebar (230px справа) наезжал бы на "ПОДОШЛОВ" в hero.
   - Ниже 800px по высоте hero-tagline и hero-cta поднимаются и попадают
     в правую часть рядом с sidebar (наезд на "лишней бюрократии"). */
@media (max-width:1400px),(max-height:800px){
  body.web10 .w10-sidebar{display:none !important}
}

body.web10 .w10-sb-block{padding:6px 0}
body.web10 .w10-sb-date{font-style:normal;color:#000080;font-size:9px;line-height:1.3}
body.web10 .w10-sb-day{font-weight:bold}
body.web10 .w10-sb-fulldate{font-size:8px}
body.web10 .w10-sb-title{
  font-weight:bold;color:#990000;font-size:10px;
  margin:4px 0 6px;letter-spacing:1px;
}
body.web10 .w10-sb-list{
  list-style:none;padding:0;margin:0;
  font-size:8px;line-height:1.7;text-align:left;
}
body.web10 .w10-sb-list li{padding:0 4px}
body.web10 .w10-sb-list a{
  color:#000099 !important;
  text-decoration:underline !important;
  font-weight:normal !important;
}
body.web10 .w10-sb-list a:hover{color:#990000 !important}
body.web10 .w10-sb-new{
  display:inline-block;
  background:#ff0000;color:#ffff00 !important;
  font-size:8px;font-weight:bold;
  padding:1px 4px;margin-left:4px;
  animation:blink-fast 0.7s steps(2) infinite;
  border:1px solid #000000;
}
body.web10 .w10-hr{
  border:none;
  border-top:1px solid #808080;
  border-bottom:1px solid #ffffff;
  margin:6px 0;
}
body.web10 .w10-sb-counter-wrap{margin:6px 0}
body.web10 .w10-sb-counter-label{
  font-size:10px;font-weight:bold;letter-spacing:1px;
  color:#000000;margin-bottom:2px;
}
body.web10 .w10-sb-counter{
  display:inline-block;
  background:#000000;color:#00ff00 !important;
  font-size:12px;font-weight:bold;letter-spacing:2px;
  padding:3px 8px;border:2px inset #c0c0c0;
}
body.web10 .w10-sb-best-viewed{
  font-size:10px;color:#000000;
  margin-top:10px;line-height:1.4;
  border-top:1px solid #808080;
  padding-top:8px;
}
body.web10 .w10-sb-best-viewed b{color:#000080}

/* Скрываем модерн-вещи в Web 1.0 режиме */
body.web10 .nav-drawer,
body.web10 .burger,
body.web10 #brandSection{display:none !important}

/* ─── REDUCED MOTION ───
   Уважаем системную настройку пользователя. Гасим бесконечные мигалки
   web10 (blink-1, blink-fast, rainbow-color, construction-pulse,
   badge-bounce, counter-flicker), общие fade/transition-эффекты,
   и фиксируем элементы в видимом состоянии, чтобы не осталось
   "невидимых" опкастенных кадров. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
  /* Web 1.0 мигалки могут "застрять" на opacity:0 — принудительно показываем */
  body.web10 .new,
  body.web10 .star,
  body.web10 .w10b-anchor,
  body.web10 .w10b-counter{
    opacity:1 !important;
    color:inherit !important;
  }
  /* "Construction" 🚧 не должна пульсировать */
  body.web10 .uc{transform:none !important}
  /* scroll-pulse полоска hero — выключаем градиент-капельку */
  .scroll-line::after{display:none}
  /* reveal-анимации сразу в финальном состоянии */
  .reveal{opacity:1 !important;transform:none !important}
  /* hero-name из modern — финальное состояние без blur/translate */
  .hero-name,.hero-tagline,.hero-cta,.hero-corner,.hero-greet,.hero-labels,
  .hero-line-first,.hero-line-last,.hero-bottom,body header{
    opacity:1 !important;transform:none !important;filter:none !important;
    letter-spacing:normal !important;
  }
}



/* ═══ PUG RUNNER (landscape easter egg для mobile) ═══ */
/* ─── PUG RUNNER — стили ─── */
/* ─── PUG RUNNER — landscape Easter egg ─── */

  /* По умолчанию игра скрыта. Показывается ТОЛЬКО когда:
     - устройство touch (pointer:coarse) → мобильник/планшет;
     - экран в landscape;
     - высота ≤ 600px (чтобы на iPad в landscape с большой высотой
       игра не показывалась — там нормально работает основной сайт).
     Десктоп в режиме узкого окна не получит игру даже при сжатии. */
  #pugRunner{display:none}
  @media (max-height:600px) and (orientation:landscape) and (pointer:coarse){
    #pugRunner{
      display:flex;
      position:fixed !important;
      top:0;left:0;right:0;bottom:0;
      z-index:9999 !important;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      background:var(--paper);
      color:var(--ink);
      font-family:var(--mono);
    }
  }
  body.web10 #pugRunner{
    background:#008080 !important;
    color:#cccc00 !important;
    font-family:"Press Start 2P","Times New Roman",serif !important;
  }
  /* Splash screen */
  .pr-splash{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:12px;text-align:center;padding:16px;width:100%;height:100%;
  }
  .pr-splash-emoji{font-size:clamp(28px,6vw,48px);line-height:1}
  body.web10 .pr-splash-emoji{font-family:"Press Start 2P",monospace;font-size:clamp(16px,4vw,28px)}
  .pr-splash-text{
    font-size:clamp(12px,2.5vw,18px);font-weight:700;
    letter-spacing:0.05em;white-space:pre-wrap;line-height:1.5;
  }
  body.web10 .pr-splash-text{font-size:clamp(9px,2vw,14px);letter-spacing:0}
  .pr-start-btn{
    margin-top:8px;padding:10px 32px;
    font-family:var(--mono);font-size:clamp(12px,2vw,16px);font-weight:700;
    background:var(--slime);color:#0A0A0A;
    border:3px solid #0A0A0A;cursor:pointer;
    box-shadow:4px 4px 0 #0A0A0A;
    transition:transform 0.1s,box-shadow 0.1s;
    text-transform:uppercase;letter-spacing:0.1em;
  }
  .pr-start-btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 #0A0A0A}
  body.web10 .pr-start-btn{
    font-family:"Press Start 2P",monospace;font-size:clamp(9px,1.8vw,13px);
    background:#c0c0c0;color:#000;border:2px outset #fff;
    box-shadow:none;letter-spacing:0;
  }
  body.web10 .pr-start-btn:active{border-style:inset}
  /* Canvas */
  .pr-canvas-wrap{display:none;width:100%;height:100%;position:relative}
  .pr-canvas-wrap.active{display:flex;align-items:center;justify-content:center}
  #pugCanvas{max-width:100%;max-height:100%;display:block}
  /* Game Over overlay */
  .pr-gameover{
    display:none;position:absolute;top:0;left:0;right:0;bottom:0;
    flex-direction:column;align-items:center;justify-content:center;
    gap:10px;background:rgba(10,10,10,0.85);color:#fff;
    font-family:var(--mono);text-align:center;padding:16px;
  }
  .pr-gameover.active{display:flex}
  body.web10 .pr-gameover{background:rgba(0,0,128,0.88);font-family:"Press Start 2P",monospace}
  .pr-go-title{font-size:clamp(18px,4vw,32px);font-weight:900;color:#DC1A1A}
  body.web10 .pr-go-title{color:#ff0000;font-size:clamp(12px,3vw,22px)}
  .pr-go-score{font-size:clamp(12px,2.5vw,18px);font-weight:700}
  .pr-go-btn{
    padding:10px 28px;font-family:var(--mono);font-size:clamp(11px,2vw,15px);
    font-weight:700;background:#7FE04C;color:#0A0A0A;
    border:3px solid #0A0A0A;cursor:pointer;box-shadow:4px 4px 0 #0A0A0A;
    text-transform:uppercase;letter-spacing:0.1em;
  }
  .pr-go-btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 #0A0A0A}
  body.web10 .pr-go-btn{
    font-family:"Press Start 2P",monospace;font-size:clamp(8px,1.6vw,12px);
    background:#c0c0c0;color:#000;border:2px outset #fff;box-shadow:none;letter-spacing:0;
  }
  body.web10 .pr-go-btn:active{border-style:inset}
  /* GIF мопса — overlay над canvas, чтобы браузер анимировал кадры.
     Canvas.drawImage рисует только первый кадр GIF, поэтому используем <img>. */
  #pugSprite{
    position:absolute;
    pointer-events:none;
    display:none;
    /* image-rendering pixelated даёт чёткие края при scale на web10
       режиме, в modern — оставляем дефолт smooth. */
    image-rendering:auto;
  }
  #pugSprite.active{display:block}
  body.web10 #pugSprite{image-rendering:pixelated}