@font-face {
      font-family: 'MerchantCopy';
      src: url('fonts/merchant-copy.regular.ttf') format('truetype');
      font-weight: 400;
      font-style: normal;
      font-display: swap;
    }
    @font-face {
      font-family: 'MerchantCopyWide';
      src: url('fonts/merchant-copy.wide.ttf') format('truetype');
      font-weight: 400;
      font-style: normal;
      font-display: swap;
    }
    @font-face {
      font-family: 'KoratkiBook';
      src: url('fonts/korataki_book.otf') format('opentype'),
           url('fonts/korataki_book.ttf') format('truetype');
      font-weight: 400;
      font-style: normal;
      font-display: swap;
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    .nav-logo-h1 { display: inline-flex; font-size: inherit; font-weight: inherit; }

    :root {
      --bg: #080808;
      --white: #f0ede8;
      --dim: rgba(240,237,232,0.45);
      --line: rgba(240,237,232,0.1);
      /* Заголовки — Merchant Copy Wide */
      --display: 'MerchantCopyWide', sans-serif;
      /* Основной текст — обычный Space Mono */
      --mono: 'Space Mono', monospace;
      /* Сноски — Merchant Copy Regular */
      --wide: 'MerchantCopy', 'Space Mono', monospace;
    }

    html.lenis { height: auto; }
    .lenis.lenis-smooth { scroll-behavior: auto !important; }
    html {
      scrollbar-gutter: stable;
    }

    body {
      background: var(--bg);
      color: var(--white);
      font-family: var(--mono);
      overflow-x: hidden;
      cursor: none;
    }

    /* Лёгкий блюр по краям экрана (верх / низ) */
    .edge-blur {
      position: fixed;
      left: 0;
      right: 0;
      height: 10px;
      z-index: 8000;
      pointer-events: none;
      backdrop-filter: blur(3px);
      -webkit-backdrop-filter: blur(3px);
    }
    .edge-blur { display: none !important; }
    .edge-blur--top {
      top: 0;
      mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);
      -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);
    }
    .edge-blur--bottom {
      bottom: 0;
      mask-image: linear-gradient(to top, #000 0%, transparent 100%);
      -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 100%);
    }
    @media (prefers-reduced-motion: reduce) {
      .edge-blur { display: none; }
    }

    /* ── Custom cursor ── */
    #cursor {
      position: fixed;
      top: 0; left: 0;
      width: 10px; height: 10px;
      background: var(--white);
      border-radius: 50%;
      pointer-events: none;
      z-index: 9999;
      transform: translate(-50%, -50%);
      transition: width .2s, height .2s, background .2s;
      mix-blend-mode: difference;
    }
    #cursor.expand { width: 40px; height: 40px; }

    /* ── Scroll fade-up ── */
    .fade-up {
      opacity: 0;
      transform: translateY(40px);
      transition: opacity .8s ease, transform .8s ease;
    }
    .fade-up.visible { opacity: 1; transform: none; }

    /* ── Nav ── */
    nav {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 100;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 1.5rem 2.5rem;
      clip-path: inset(0);
    }
    .nav-logo-wrap {
      display: flex;
      align-items: center;
    }
    .nav-logo {
      font-family: var(--display);
      font-size: 2rem;
      letter-spacing: .05em;
      text-decoration: none;
      color: #ffffff;
      text-shadow: 0 0 12px rgba(0,0,0,0.9), 0 2px 8px rgba(0,0,0,0.8);
      display: inline-block;
      transform: translateX(calc(-100% - 2.5rem - 10vw));
      transition: transform .65s cubic-bezier(.22,.61,.36,1);
    }
    .nav-logo.visible {
      transform: translateX(0);
    }
    .nav-logo.black-bar {
      color: #080808;
      text-shadow: none;
    }
    /* Hide old text links */
    .nav-links { display: none; }

    /* ── Hamburger — always shown, perfect geometry ── */
    .hamburger {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 36px;
      height: 36px;
      gap: 0;
      background: none;
      border: none;
      cursor: none;
      padding: 0;
      position: relative;
    }
    /* Three lines via pseudo + span */
    .hamburger .bar {
      display: block;
      width: 26px;
      height: 2px;
      background: #000;
      border-radius: 1px;
      position: absolute;
      left: 50%;
      transform-origin: center;
      transition: transform .35s cubic-bezier(.22,.61,.36,1), opacity .25s, background .4s;
    }
    .hamburger .bar:nth-child(1) { transform: translateX(-50%) translateY(-8px); }
    .hamburger .bar:nth-child(2) { transform: translateX(-50%) translateY(0px); }
    .hamburger .bar:nth-child(3) { transform: translateX(-50%) translateY(8px); }

    /* Open state → perfect ✕ — always white */
    .hamburger.open .bar { background: #ffffff !important; }
    .hamburger.open .bar:nth-child(1) { transform: translateX(-50%) translateY(0) rotate(45deg); }
    .hamburger.open .bar:nth-child(2) { opacity: 0; transform: translateX(-50%) scaleX(0); }
    .hamburger.open .bar:nth-child(3) { transform: translateX(-50%) translateY(0) rotate(-45deg); }

    /* White state (after hero scrolled) */
    .hamburger.white .bar { background: #ffffff; }
    /* Black state (over white about section) */
    .hamburger.black-bar .bar { background: #000000; }

    /* ── Full-screen mobile menu ── */
    .mobile-menu {
      display: flex;
      position: fixed;
      inset: 0;
      background: rgba(8,8,8,.97);
      z-index: 90;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2.5rem;
      opacity: 0;
      pointer-events: none;
      transition: opacity .4s;
    }
    .mobile-menu.open { opacity: 1; pointer-events: auto; }
    .mobile-menu a {
      font-family: var(--display);
      font-size: clamp(2.5rem, 8vw, 5rem);
      letter-spacing: .05em;
      text-decoration: none;
      color: var(--white);
      opacity: .7;
      transition: opacity .2s;
    }
    .mobile-menu a:hover { opacity: 1; }

    /* ── Hero ── */
    #hero {
  position: relative;
  z-index: 5;
  width: 100%;
  padding: 0 !important;
}
    .hero-visual {
      position: relative;
      width: 100%;
      font-size: 0;
      line-height: 0;
    }
    .hero-bg-layer {
  position: relative;
  width: 100%;
}

#hero-bg {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  display: block;
  content: url('img/main_back1.png');
}

@media (max-width: 768px) {
  #hero-bg {
    content: url('img/main_back1_phone.png');
  }
}

.hero-hotspot {
  position: absolute;
  left: 48.8%;
  top: 7.9%;
  width: 47%;
  height: 64.8%;
  z-index: 3;
  border: none;
  background: transparent;
  padding: 0;
  cursor: none;
}

.hero-hotspot.hero-hotspot-window {
  display: flex;
  flex-direction: column;
  background: #d4d0c8;
  border: 2px solid #fff;
  border-right-color: #404040;
  border-bottom-color: #404040;
  box-shadow: 1px 1px 0 #808080, 2px 2px 8px rgba(0,0,0,0.45);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.hero-hotspot-window .xp-titlebar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  padding: 2px 4px 2px 5px;
  cursor: none;
  gap: 3px;
}

.hero-hotspot-window .xp-titlebar-icon {
  width: clamp(10px, 1.8vw, 14px);
  height: clamp(10px, 1.8vw, 14px);
  flex-shrink: 0;
}

.hero-hotspot-window .xp-titlebar-text {
  flex: 0 1 auto;
  text-align: left;
  font-family: var(--wide) !important;
  font-size: clamp(8px, 1.5vw, 14px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hero-hotspot-window .hero-hotspot-imgwrap {
  flex: 1;
  min-height: 0;
  margin: 0 3px;
  border: 2px solid #404040;
  border-right-color: #fff;
  border-bottom-color: #fff;
  background: #000;
  overflow: hidden;
}

.hero-hotspot-window .hero-hotspot-imgwrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: filter 0.35s ease;
  pointer-events: none;
}

.hero-hotspot-window:hover .hero-hotspot-imgwrap img {
  filter: brightness(0.9);
}

.hero-hotspot-window .xp-statusbar {
  flex-shrink: 0;
  padding: 2px 4px;
  gap: 4px;
}

.hero-hotspot-window .xp-statusbar-panel {
  font-family: var(--wide) !important;
  font-size: clamp(7px, 1.2vw, 10px);
  padding: 1px 4px;
}

@media (max-width: 768px) {
  .hero-hotspot {
    left: 3%;
    top: 60%;
    width: 94%;
    height: 33%;
  }

  .hero-hotspot-window .xp-titlebar {
    padding: 2px 3px;
    gap: 2px;
  }

  .hero-hotspot-window .xp-titlebar-text {
    font-size: clamp(15px, 2.8vw, 11px);
  }

  .hero-hotspot-window .xp-statusbar-panel {
    font-size: clamp(13px, 2.4vw, 9px);
    padding: 0 3px;
  }
}

.hero-hotspot:hover {
  background: transparent;
}

.hero-hotspot.hero-hotspot-window:hover {
  background: #d4d0c8;
}

.hero-reveal-bars {
  z-index: 4;
}


.hero-reveal-bars {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(16, minmax(0, 1fr));
  gap: 0;
  width: 100%;
  overflow: hidden;
  pointer-events: none;
}
    .hero-reveal-bars span {
      position: relative;
      left: -1px;
      width: calc(100% + 2px);
      background: #080808;
      transform: scaleY(1);
      transform-origin: top center;
      will-change: transform;
    }
    .hero-reveal-bars span:first-child { left: 0; width: calc(100% + 1px); }
    .hero-reveal-bars.is-done {
      opacity: 0;
      visibility: hidden;
    }
    .hero-visual.hero-intro-play .hero-reveal-bars span {
      animation: heroStripReveal 0.82s cubic-bezier(0.76, 0, 0.24, 1) forwards;
    }
    @keyframes heroStripReveal {
      to { transform: scaleY(0); }
    }

  
    

    .hero-scroll {
  position: absolute;
  /* Привязка к нижнему краю: на широком выше (14vw снизу), при сужении тоже уходит вниз пропорционально */
  bottom: clamp(1.5rem, 8vw, 9rem);
  left: 50%;
  z-index: 8;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.35rem, 1.2vw, 0.5rem);
  padding-bottom: 0;
  opacity: 1;
  transform: translateX(-50%) scale(var(--scroll-hint-scale, 1));
  transition:
    opacity 0.7s ease 0.15s,
    transform 0.85s cubic-bezier(0.4, 0, 0.2, 1),
    gap 0.85s cubic-bezier(0.4, 0, 0.2, 1),
    bottom 0.85s cubic-bezier(0.4, 0, 0.2, 1);
}
    .hero-visual.hero-window-open ~ .hero-scroll {
      opacity: 1;
    }

    @media (max-width: 768px) {
      .hero-scroll { display: none !important; }
    }
        opacity: 1;
        transform: none;
        filter: none;
        animation: none !important;
      }
      .hero-scroll { opacity: 1; transition: none; }
    }
    .hero-scroll span {
      font-size: var(--scroll-font-size, 0.6rem);
      letter-spacing: 0.25em;
      text-transform: uppercase;
      color: #ffffff;
      text-shadow: 0 0 10px rgba(0,0,0,1), 0 2px 6px rgba(0,0,0,0.9);
      transition: font-size 0.85s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .scroll-line {
      width: 1px;
      height: clamp(17px, 4.25vh, 48px);
      background: rgba(240,237,232,.2);
      overflow: hidden;
      transition: height 0.85s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .scroll-line::after {
      content: '';
      display: block;
      width: 100%; height: 100%;
      background: var(--white);
      animation: slideDown 1.6s ease-in-out infinite;
    }
    @keyframes slideDown {
      0% { transform: translateY(-100%); }
      100% { transform: translateY(100%); }
    }

    /* ── Checkerboard divider ── */
    .checker-wrap {
      width: 100%;
      overflow: hidden;
      display: block;
      line-height: 0;
    }
    .checker-canvas {
      display: block;
      width: 100%;
    }

    /* ── Parallax: checker + section move together; lower block overlaps above -- */
    .parallax-stack { position: relative; }
.parallax-block {
  position: relative;
  z-index: 0;
}
.parallax-stack .parallax-block:nth-child(1) { z-index: 10; }
.parallax-stack .parallax-block:nth-child(2) { z-index: 11; }
.parallax-stack .parallax-block:nth-child(3) { z-index: 12; }
.parallax-stack .parallax-block:nth-child(4) { z-index: 13; }

    /* ── Section commons ── */
    section {
      width: 100%;
      padding: 6rem 2.5rem;
    }
    .section-inner {
      max-width: 1400px;
      margin: 0 auto;
    }
    .section-eyebrow {
      font-family: var(--wide);
      font-size: .65rem;
      letter-spacing: .3em;
      text-transform: uppercase;
      opacity: .5;
      margin-bottom: 1rem;
    }
    .section-title {
      font-family: var(--display);
      font-size: clamp(3rem, 12vw, 10rem);
      line-height: 1;
      margin-bottom: 4rem;
      word-break: break-word;
      overflow-wrap: break-word;
    }

    /* ── Projects ── */
    #projects {
      position: relative;
      background: #000;
      border-top: 1px solid var(--line);
      overflow: hidden;
    }
    .projects-stage {
      position: absolute;
      inset: 0;
      z-index: 0;
    }
    .proj-bg-video {
      position: absolute;
      inset: 0;
      z-index: 0;
      overflow: hidden;
    }
    .proj-bg-video video {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .proj-scanlines {
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0,0,0,0.06) 2px,
        rgba(0,0,0,0.06) 4px
      );
    }
    .proj-top-banner {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      z-index: 20;
      width: 100%;
      pointer-events: none;
    }
    .proj-top-banner img {
      width: 100%;
      height: auto;
      display: block;
    }
    .proj-char-side {
      position: absolute;
      top: 0;
      bottom: 0;
      z-index: 6;
      pointer-events: none;
      display: flex;
      align-items: flex-end;
      opacity: 0;
      transition:
  opacity 0.34s ease,
  transform 0.42s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .proj-char-left {
      left: 0;
      transform: translateX(-120px);
    }
    .proj-char-right {
      right: 0;
      transform: translateX(120px);
    }
    .proj-char-side img {
      height: 85vh;
      width: auto;
      display: block;
    }
    .proj-char-side.show {
      opacity: 0.6;
      transform: translateX(0);
    }
    .projects-inner {
      position: relative;
      z-index: 10;
    }
    .projects-head {
      position: relative;
      z-index: 12;
    }
    #projects .section-eyebrow { color: #fff; opacity: .5; }
    #projects .section-title { color: #fff; margin-bottom: 2rem; }
    .projects-main {
      position: relative;
      z-index: 10;
      width: 100%;
    }
    .proj-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1.5rem;
    }
    /* Квадраты проектов используют те же классы xp-window/xp-titlebar/xp-btn/xp-statusbar,
       что и попап открытого проекта — рамка идентична */
    .proj-square.xp-window {
      position: relative !important;
      left: auto !important;
      top: auto !important;
      width: 100% !important;
      min-width: 0 !important;
      aspect-ratio: 1 / 1;
      display: flex;
      flex-direction: column;
      box-shadow: 1px 1px 0 #808080, 0 8px 28px rgba(0,0,0,.5);
      cursor: none;
    }
    .proj-square .xp-titlebar { cursor: none; flex-shrink: 0; }
    .proj-square .xp-titlebar-text { font-size: 20px; }
    .proj-square .xp-btn { cursor: none; pointer-events: none; }
    .proj-square .proj-square-imgwrap {
      position: relative;
      flex: 1;
      min-height: 0;
      margin: 0 4px;
      border: 2px solid #404040;
      border-right-color: #fff;
      border-bottom-color: #fff;
      background: #000;
      overflow: hidden;
    }
    .proj-square img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform .5s ease;
    }
    .proj-square:hover img { transform: scale(1.05); }
    .proj-square-overlay {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: .75rem;
      background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.78) 100%);
      pointer-events: none;
    }
    .proj-square-tag {
      font-family: var(--mono);
      font-size: .6rem;
      letter-spacing: .15em;
      text-transform: uppercase;
      color: #fff;
      opacity: .55;
    }
    .proj-square-name {
      font-family: var(--display);
      font-size: clamp(.8rem, 1.4vw, 1.05rem);
      letter-spacing: .02em;
      color: #fff;
      margin-top: .2rem;
    }
    .proj-square.is-empty {
      display: flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: 1px dashed rgba(255,255,255,.25);
      box-shadow: none;
      aspect-ratio: 1 / 1;
    }
    .proj-square-order {
      font-family: var(--mono);
      font-size: .7rem;
      letter-spacing: .15em;
      text-transform: uppercase;
      color: #fff;
      opacity: .6;
      background: none;
      border: none;
      cursor: none;
      text-align: center;
      line-height: 1.5;
      transition: opacity .2s;
    }
    .proj-square-order:hover { opacity: 1; }

    @media (max-width: 1024px) and (min-width: 769px) {
      .proj-grid { grid-template-columns: repeat(3, 1fr); }
    }

    /* На мобиле — оригинальный лейаут (большая карточка + превью), сетка скрыта */
    @media (max-width: 768px) {
      .proj-grid { display: none !important; }
      #projects .proj-char-side { display: none; }

      .projects-main {
        padding: 0;
        display: block;
      }

      .proj-mobile-layout {
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: 0 12px;
        gap: 8px;
      }

      .proj-mobile-main {
        width: 100%;
        aspect-ratio: 1 / 1;
        background: #d4d0c8;
        border: 2px solid #fff;
        border-right-color: #404040;
        border-bottom-color: #404040;
        box-shadow: 1px 1px 0 #808080, 0 4px 24px rgba(0,0,0,0.6);
        overflow: hidden;
        position: relative;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        user-select: none;
      }
      .proj-mobile-main .xp-titlebar {
        background: linear-gradient(to bottom, #245edb 0%, #1941a5 50%, #1432a0 51%, #0e2795 100%);
        padding: 3px 6px;
        display: flex;
        align-items: center;
        gap: 6px;
        flex-shrink: 0;
      }
      .proj-mobile-main .xp-titlebar-icon {
        width: 14px; height: 14px;
        background: #d4d0c8;
        border: 1px solid #808080;
        flex-shrink: 0;
      }
      .proj-mobile-main .xp-titlebar-text {
        font-family: var(--wide) !important;
        font-size: 16px;
        color: #fff;
        font-weight: bold;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }
      .proj-mobile-img {
        width: 100%;
        height: calc(100% - 44px);
        object-fit: cover;
        display: block;
      }
      .proj-mobile-main .proj-card-statusbar {
        position: absolute;
        bottom: 0; left: 0; right: 0;
        background: #d4d0c8;
        border-top: 1px solid #808080;
        padding: 3px 6px;
        font-family: var(--wide);
        font-size: 15px;
        color: #333;
        display: flex;
        gap: 6px;
      }
      .proj-mobile-main .proj-card-statusbar span {
        border: 1px solid #808080;
        border-right-color: #fff;
        border-bottom-color: #fff;
        padding: 1px 6px;
      }

      .proj-mobile-thumbs {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
        width: 100%;
      }
      .proj-mobile-thumb {
        aspect-ratio: 1 / 1;
        background: #d4d0c8;
        border: 2px solid #888;
        border-right-color: #404040;
        border-bottom-color: #404040;
        overflow: hidden;
        position: relative;
        opacity: 0.55;
        transition: opacity 0.2s;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
      }
      .proj-mobile-thumb.active-thumb {
        opacity: 1;
        border-color: #fff;
        border-right-color: #404040;
        border-bottom-color: #404040;
      }
      .proj-mobile-thumb .xp-titlebar {
        background: linear-gradient(to bottom, #245edb 0%, #1941a5 50%, #1432a0 51%, #0e2795 100%);
        padding: 2px 4px;
        display: flex;
        align-items: center;
        gap: 3px;
      }
      .proj-mobile-thumb .xp-titlebar-text {
        font-family: var(--wide) !important;
        font-size: 7px;
        color: #fff;
        letter-spacing: 0.05em;
        white-space: nowrap;
        overflow: hidden;
        text-transform: uppercase;
      }
      .proj-mobile-thumb img {
        width: 100%;
        height: calc(100% - 18px);
        object-fit: cover;
        display: block;
      }
      .proj-mobile-thumb .proj-card-statusbar {
        position: absolute;
        bottom: 0; left: 0; right: 0;
        background: #d4d0c8;
        border-top: 1px solid #808080;
        padding: 1px 3px;
        font-family: var(--wide);
        font-size: 7px;
        color: #333;
        display: flex;
        gap: 3px;
      }
      .proj-mobile-thumb .proj-card-statusbar span {
        border: 1px solid #808080;
        padding: 0 3px;
      }

      .proj-carousel-controls--mobile {
        display: flex !important;
        min-width: unset;
        width: 100%;
        gap: 8px;
        margin-top: 4px;
        height: auto;
        padding: 0;
        background: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border: none;
        justify-content: center;
        align-items: center;
        pointer-events: auto;
      }
      .proj-carousel-btn--mobile {
        display: flex !important;
        width: 44px;
        height: 44px;
        align-items: center;
        justify-content: center;
        background: rgba(255,255,255,0.08);
        border: 1px solid rgba(255,255,255,0.22);
        border-radius: 8px;
        color: #fff;
        font-size: 22px;
        cursor: pointer;
        pointer-events: auto;
        flex-shrink: 0;
        transition: background 0.15s;
        -webkit-tap-highlight-color: transparent;
        backdrop-filter: blur(10px) saturate(1.2);
        -webkit-backdrop-filter: blur(10px) saturate(1.2);
      }
      .proj-carousel-btn--mobile:active {
        background: rgba(255,255,255,0.28);
      }
      .proj-select-label--mobile {
        font-family: var(--wide) !important;
        font-size: clamp(23.09px, 6.75vw, 35.53px);
        width: auto;
        min-width: max-content;
        max-width: calc(100vw - 140px);
        text-align: center;
        line-height: 1.1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 0 14px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255,255,255,0.08);
        border: 1px solid rgba(255,255,255,0.22);
        border-radius: 8px;
        color: #fff;
        backdrop-filter: blur(10px) saturate(1.2);
        -webkit-backdrop-filter: blur(10px) saturate(1.2);
        flex: 1;
      }
    }

    body.proj-xp-open { overflow: hidden; }
    body.proj-xp-open .proj-xp-scroll { touch-action: pan-y; }
    .proj-xp-layer {
      position: fixed;
      inset: 0;
      z-index: 300;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: clamp(12px, 3vw, 28px);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.35s ease;
    }
    .proj-xp-layer.open {
      opacity: 1;
      pointer-events: auto;
    }
    .proj-xp-layer .proj-overlay {
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,0.72);
      z-index: 0;
    }
    .proj-xp-layer .proj-xp-window {
      position: relative !important;
      left: auto !important;
      top: auto !important;
      z-index: 1;
      width: min(1123px, 97vw);
      max-height: min(94vh, 1677px);
      min-width: 0;
      display: flex;
      flex-direction: column;
      transform: scale(0.94);
      transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .proj-xp-layer.open .proj-xp-window {
      transform: scale(1);
    }
    .proj-xp-layer .xp-btn.min,
    .proj-xp-layer .xp-btn.max {
      pointer-events: none;
      opacity: 0.85;
    }
    .proj-xp-layer,
    .proj-xp-layer *,
  #orderXpLayer,
  #orderXpLayer * {
      cursor: none !important;
    }
    .proj-xp-window .xp-titlebar { cursor: none !important; }
    .proj-xp-window .xp-btn { cursor: none !important; }
    .proj-xp-viewport {
      flex: 1;
      min-height: 0;
      margin: 0 4px;
      border: 2px solid #404040;
      border-right-color: #fff;
      border-bottom-color: #fff;
      background: #c0c0c0;
      aspect-ratio: 4 / 3;
      width: calc(100% - 8px);
      max-height: min(1369px, calc(90vh - 76px));
      overflow: hidden;
    }
    .proj-xp-scroll {
      height: 100%;
      overflow-x: hidden;
      overflow-y: auto;
      padding: 10px;
      background: #ece9d8;
      user-select: text;
      scrollbar-width: thin;
      scrollbar-color: #808080 #d4d0c8;
    }
    .proj-xp-scroll::-webkit-scrollbar { width: 14px; }
    .proj-xp-scroll::-webkit-scrollbar-track {
      background: #d4d0c8;
      border-left: 1px solid #fff;
    }
    .proj-xp-scroll::-webkit-scrollbar-thumb {
      background: linear-gradient(to right, #e8e4dc, #c8c4bc);
      border: 1px solid #fff;
      border-right-color: #404040;
      border-bottom-color: #404040;
    }
    .proj-xp-tag {
      font-family: var(--wide);
      font-size: 11px;
      font-weight: normal;
      color: #444;
      margin-bottom: 8px;
      letter-spacing: 0.5px;
    }
    .proj-xp-heading {
      font-family: var(--display);
      font-size: 22px;
      font-weight: normal;
      color: #000;
      margin-bottom: 10px;
      line-height: 1.2;
    }
    .proj-xp-coming-soon {
      font-family: var(--display);
      font-size: clamp(2.5rem, 9vw, 5.5rem);
      font-weight: normal;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      text-align: center;
      color: #000;
      min-height: min(50vh, 420px);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 2rem 1.5rem;
    }
    .proj-xp-scroll p {
      font-family: var(--mono);
      font-size: 12px;
      line-height: 1.65;
      color: #222;
      margin-bottom: 12px;
    }
    .proj-xp-scroll img,
    .proj-xp-scroll video {
      width: 100%;
      display: block;
      margin-bottom: 10px;
      border: 1px solid #808080;
      background: #000;
    }
    .proj-xp-scroll video { aspect-ratio: 16 / 9; object-fit: cover; }
    .proj-xp-gallery {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6px;
      margin-bottom: 10px;
    }
    .proj-xp-gallery img {
      width: 100%;
      height: auto;
      margin: 0;
    }

    /* Project case — медиа вплотную, на всю ширину окна */
    .proj-xp-viewport:has(.proj-xp-scroll--case) {
      margin-left: 0;
      margin-right: 0;
      width: 100%;
    }
    .proj-xp-scroll.proj-xp-scroll--case {
      background: #000;
      padding: 0;
      line-height: 0;
    }
    .proj-xp-scroll.proj-xp-scroll--case img {
      width: 100%;
      height: auto;
      display: block;
      margin: 0;
      padding: 0;
      border: none;
      vertical-align: top;
    }
    .proj-xp-scroll.proj-xp-scroll--case .xp-wmp {
      width: calc(100% - 4px);
      margin: 2px;
      box-sizing: border-box;
      background: #1a1a1a;
      border: 2px solid #404040;
      border-right-color: #fff;
      border-bottom-color: #fff;
      font-family: Tahoma, Arial, sans-serif;
      font-size: 11px;
      line-height: normal;
    }
    .xp-wmp-screen {
      position: relative;
      background: #000;
      line-height: 0;
      border: 2px solid #404040;
      border-right-color: #fff;
      border-bottom-color: #fff;
      margin: 2px 2px 0;
    }
    .xp-wmp-screen video {
      width: 100%;
      height: auto;
      display: block;
      vertical-align: top;
      background: #000;
    }
    .xp-wmp--vertical .xp-wmp-screen {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: min(52vw, 420px);
      background: #0a0a0a;
    }
    .xp-wmp--vertical .xp-wmp-screen video {
      width: auto;
      max-width: calc(100% - 8px);
      max-height: min(70vh, 560px);
      height: auto;
      object-fit: contain;
    }
    .xp-wmp-overlay-play {
      position: absolute;
      inset: 0;
      margin: auto;
      width: 56px;
      height: 56px;
      border: none;
      border-radius: 50%;
      background: rgba(0, 0, 0, 0.55);
      color: #fff;
      font-size: 22px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      padding-left: 4px;
    }
    .xp-wmp.is-playing .xp-wmp-overlay-play { display: none; }
    .xp-wmp-bar {
      display: flex;
      align-items: center;
      gap: 5px;
      padding: 7px 10px;
      margin: 0 2px 2px;
      background: linear-gradient(180deg, #ece9d8 0%, #d4d0c8 100%);
      border: 2px solid #404040;
      border-right-color: #fff;
      border-bottom-color: #fff;
      line-height: normal;
    }
    .xp-wmp-btn {
      width: 28px;
      height: 24px;
      flex-shrink: 0;
      border: 1px solid #fff;
      border-right-color: #404040;
      border-bottom-color: #404040;
      background: linear-gradient(180deg, #f4f1ea 0%, #c8c4bc 100%);
      font-size: 11px;
      cursor: pointer;
      color: #000;
      padding: 0;
    }
    .xp-wmp-btn:hover {
      background: linear-gradient(180deg, #eef6ff 0%, #b8d4f0 100%);
    }
    .xp-wmp-seek {
      flex: 1;
      height: 14px;
      background: #fff;
      border: 1px solid #808080;
      position: relative;
      cursor: pointer;
    }
    .xp-wmp-seek-fill {
      height: 100%;
      width: 0;
      background: linear-gradient(180deg, #6b9fd8 0%, #3a6ea8 100%);
      pointer-events: none;
    }
    .xp-wmp-seek input {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      cursor: pointer;
      margin: 0;
    }
    .xp-wmp-time {
      font-size: 10px;
      color: #222;
      min-width: 68px;
      text-align: right;
      flex-shrink: 0;
    }
    .xp-wmp-vol {
      display: flex;
      align-items: center;
      gap: 4px;
      flex-shrink: 0;
      width: 72px;
    }
    .xp-wmp-vol input[type="range"] {
      width: 100%;
      height: 14px;
      margin: 0;
      cursor: none;
      accent-color: #3a6ea8;
    }
    .proj-case-order-btn {
      display: block;
      width: 100%;
      margin: 0;
      padding: 1.1rem 1.5rem;
      border: none;
      border-top: 1px solid rgba(255,255,255,0.12);
      background: linear-gradient(180deg, #3a7ee8 0%, #1941a5 45%, #0e2795 100%);
      color: #fff;
      font-family: var(--display);
      font-size: clamp(1.1rem, 3vw, 1.65rem);
      letter-spacing: 0.14em;
      text-align: center;
      text-transform: uppercase;
      cursor: none;
      line-height: 1;
    }
    .proj-case-order-btn:hover {
      filter: brightness(1.08);
    }
    /* XP order form window */
    #orderXpLayer .proj-xp-window {
      width: min(520px, 94vw);
    }
    .xp-order-body {
      padding: 10px;
      background: #ece9d8;
      margin: 4px;
      border: 2px solid #404040;
      border-right-color: #fff;
      border-bottom-color: #fff;
    }
    .xp-order-form {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .xp-order-field label {
      display: block;
      font-family: Tahoma, Arial, sans-serif;
      font-size: 11px;
      font-weight: bold;
      color: #222;
      margin-bottom: 3px;
    }
    .xp-order-field input,
    .xp-order-field textarea {
      width: 100%;
      box-sizing: border-box;
      font-family: Tahoma, Arial, sans-serif;
      font-size: 12px;
      padding: 5px 6px;
      border: 2px solid #808080;
      border-right-color: #fff;
      border-bottom-color: #fff;
      background: #fff;
      color: #000;
      outline: none;
      cursor: none;
    }
    .xp-order-field textarea {
      resize: vertical;
      min-height: 72px;
    }
    .xp-order-submit {
      align-self: flex-start;
      margin-top: 4px;
      padding: 6px 18px;
      font-family: Tahoma, Arial, sans-serif;
      font-size: 11px;
      font-weight: bold;
      border: 1px solid #fff;
      border-right-color: #404040;
      border-bottom-color: #404040;
      background: linear-gradient(180deg, #f4f1ea 0%, #c8c4bc 100%);
      cursor: none;
    }
    .xp-order-submit:hover {
      background: linear-gradient(180deg, #eef6ff, #b8d4f0);
    }
    @media (max-width: 768px) {
      /* ── 1. Отключаем параллакс + убираем большой отступ ── */
      .parallax-stack .parallax-block:nth-child(1) {
        transform: none !important;
        margin-bottom: 0 !important;
      }
      .projects-inner {
        padding: 1.2rem 0 1.5rem;
      }
      #projects .section-title {
        margin-bottom: 1rem;
        padding-left: 1rem;
      }
      #projects .section-eyebrow {
        padding-left: 1rem;
      }

      /* XP popup — bottom sheet */
      .proj-xp-layer {
        padding: 0;
        align-items: flex-end;
      }
      .proj-xp-layer .proj-xp-window {
        width: 100vw;
        max-height: 92vh;
        border-radius: 8px 8px 0 0;
        transform: translateY(40px);
        transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
      }
      .proj-xp-layer.open .proj-xp-window {
        transform: translateY(0);
      }
      /* окно карточки проекта — выше в 1.5 раза, не квадрат */
      .proj-xp-viewport {
        aspect-ratio: 4 / 4.5;
        max-height: min(1369px, calc(92vh - 76px));
      }

      /* ── Credits в 2 колонки на мобиле ── */
      .credits-cols {
        grid-template-columns: 1fr 1fr;
        gap: 0.8rem;
      }
      .credits-col-title {
        font-size: 1.3rem;
        margin-bottom: 0.6rem;
        letter-spacing: 0.03em;
      }
      .credits-item {
        padding: 0.45rem 0.55rem;
        font-size: 1rem;
        letter-spacing: 0.08em;
        word-break: break-word;
        white-space: normal;
      }
      /* section-eyebrow 2x bigger on mobile */
      .section-eyebrow {
        font-size: 1.3rem;
        letter-spacing: .2em;
      }
    }

    /* ── Project modal ── */
    #modal {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 200;
      background: rgba(0,0,0,.95);
      overflow-y: auto;
      justify-content: center;
    }
    #modal.open { display: flex; }
    .modal-backdrop {
      position: fixed;
      inset: 0;
    }
    .modal-content {
      position: relative;
      z-index: 1;
      width: 100%;
      max-width: 900px;
      background: #0a0a0a;
      padding: 3rem 2rem 4rem;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: 2.5rem;
    }
    @media (min-width: 768px) {
      .modal-content { padding: 5rem 4rem; margin: 3rem auto; border-radius: 4px; }
    }
    .modal-close {
      position: fixed;
      top: 1.5rem; right: 1.5rem;
      font-size: 2.5rem;
      font-weight: 300;
      background: none;
      border: none;
      color: rgba(240,237,232,.5);
      cursor: none;
      z-index: 210;
      transition: color .2s;
      line-height: 1;
    }
    .modal-close:hover { color: var(--white); }
    .modal-title {
      font-family: var(--display);
      font-size: clamp(3rem, 8vw, 5.5rem);
      line-height: 1;
    }
    .modal-img, .modal-video {
      width: 100%;
      border-radius: 2px;
      background: #111;
      display: block;
    }
    .modal-text {
      font-size: .95rem;
      line-height: 1.9;
      opacity: .75;
      font-weight: 400;
    }
    .modal-gallery {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: .75rem;
    }
    .modal-gallery img {
      width: 100%; height: auto;
      border-radius: 2px;
      background: #111;
      display: block;
    }
    .modal-cta {
      display: flex;
      justify-content: center;
      padding-top: 2.5rem;
      border-top: 1px solid var(--line);
    }
    .modal-cta a {
      display: inline-block;
      padding: 1rem 2.5rem;
      border: 1px solid rgba(240,237,232,.2);
      color: var(--white);
      font-size: .7rem;
      letter-spacing: .2em;
      text-transform: uppercase;
      text-decoration: none;
      transition: background .2s, color .2s;
    }
    .modal-cta a:hover { background: var(--white); color: var(--bg); }

    /* ── About ── */
    #about {
      border-top: 1px solid var(--line);
      background: #ffffff;
      color: #080808;
      position: relative;
      overflow: hidden;
      isolation: isolate;
    }
    #about .section-inner {
      position: relative;
      z-index: 2;
    }
    #about .section-eyebrow { color: #080808; opacity: .5; }
    #about .section-title { color: #080808; }
    #about .about-text { color: #080808; }
    #about .about-stat-num { color: #080808; }
    #about .about-stat-label { color: #080808; }
    section[data-lang="ru"] .about-text p,
    section[data-lang="ru"] .about-stat-label,
    section[data-lang="ru"] .section-title {
      font-family: 'KoratkiBook', 'Arial', 'Helvetica Neue', sans-serif;
    }
    section[data-lang="ru"] .about-text p {
      font-size: 0.8rem !important;
    }
    section[data-lang="ru"] .about-stat-label {
      font-size: 0.43rem !important;
    }
    .about-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 4rem;
    }
    @media (min-width: 1024px) {
      .about-grid { grid-template-columns: 1fr 1fr; gap: 6rem; }
    }
    /* ── About text — наш шрифт (везде) ── */
    .about-text {
      font-family: var(--wide);
      font-size: 1.2rem;
      line-height: 2;
      opacity: .75;
    }
    .about-text p + p { margin-top: 1.5rem; }

    /* ── Contact emails — наш шрифт ── */
    .contact-emails a {
      font-family: var(--wide);
      font-size: 1.1rem;
      letter-spacing: .1em;
      color: var(--white);
      text-decoration: none;
      opacity: .8;
      transition: opacity .2s;
    }

    /* ── Form — наш шрифт ── */
    .form-label {
      font-family: var(--wide);
      font-size: 1rem;
      letter-spacing: .25em;
      text-transform: uppercase;
      opacity: .5;
    }
    .form-input, .form-textarea {
      font-family: var(--wide);
    }
    .form-btn {
      font-family: var(--wide);
    }

    /* ── Footer — наш шрифт ── */
    footer p {
      font-family: var(--wide);
      font-size: .65rem;
      letter-spacing: .2em;
      text-transform: uppercase;
    }

    /* ── Credits SLOMANO background — вертикально и светлее ── */
    /* (решается через JS canvas в buildTextMask — добавляем rotate через CSS transform на canvas не получится,
       поэтому добавляем data-attribute для JS логики) */

    /* ── Credits mobile swipe layout ── */
    .credits-cols--desktop { display: grid; }
    .credits-mobile { display: none; }

    @media (max-width: 768px) {
      .credits-cols--desktop { display: none !important; }
      .credits-mobile { display: block; }
    }

    .credits-mobile-tabs {
      display: flex;
      gap: 8px;
      margin-bottom: 1.2rem;
    }
    .credits-mobile-tab {
      padding: 10px 22px;
      border: 1px solid rgba(255,255,255,0.22);
      border-radius: 8px;
      background: rgba(255,255,255,0.07);
      color: var(--white);
      font-family: var(--display);
      font-size: 1.1rem;
      letter-spacing: .08em;
      opacity: .55;
      cursor: pointer;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      transition: opacity .2s, background .2s;
      -webkit-tap-highlight-color: transparent;
    }
    .credits-mobile-tab.active {
      opacity: 1;
      background: rgba(255,255,255,0.15);
      border-color: rgba(255,255,255,0.45);
    }
    .credits-mobile-slider {
      overflow: hidden;
      position: relative;
    }
    .credits-mobile-panels-wrap {
      display: flex;
      transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
      will-change: transform;
    }
    .credits-mobile-panel {
      min-width: 100%;
      flex-shrink: 0;
    }
    .about-stats {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2.5rem;
      align-content: start;
    }
    .about-stat-num {
      font-family: var(--display);
      font-size: clamp(3rem, 6vw, 5rem);
      line-height: 1;
      letter-spacing: .02em;
    }
    .about-stat-label {
      font-size: .65rem;
      letter-spacing: .25em;
      text-transform: uppercase;
      opacity: .45;
      margin-top: .4rem;
    }
    .about-lang-switch {
      display: inline-flex;
      align-items: center;
      gap: 0;
      margin-bottom: 1.75rem;
      border: 1px solid rgba(8,8,8,.22);
    }
    .about-lang-btn {
      padding: 0.45rem 0.85rem;
      font-family: var(--mono);
      font-size: 0.6rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      background: transparent;
      border: none;
      color: #080808;
      opacity: 0.45;
      cursor: none;
      transition: opacity 0.2s, background 0.2s, color 0.2s;
    }
    .about-lang-btn:hover { opacity: 0.75; }
    .about-lang-btn.is-active {
      opacity: 1;
      background: #080808;
      color: #f0ede8;
    }

    /* ── Windows XP style popup windows ── */
    .xp-window,
    .xp-window * {
      cursor: none !important;
    }
    .xp-window {
      position: fixed;
      z-index: 8000;
      min-width: 420px;
      width: 480px;
      background: #d4d0c8;
      border: 2px solid #fff;
      border-right-color: #404040;
      border-bottom-color: #404040;
      box-shadow: 1px 1px 0 #808080, 3px 3px 10px rgba(0,0,0,0.55);
      font-family: 'Tahoma', 'Arial', sans-serif;
      font-size: 11px;
      color: #000;
      user-select: none;
      cursor: default;
    }
    @media (max-width: 768px) {
  .xp-window,
  .credits-xp-window,
  .proj-xp-layer .proj-xp-window {
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: calc(100vw - 16px) !important;
    min-width: 0 !important;
    max-height: 90vh;
    overflow-y: auto;
  }
  .credits-xp-window .xp-body {
    height: 200px;
    min-height: 200px;
    max-height: 200px;
  }
}
    .xp-titlebar {
      display: flex;
      align-items: center;
      padding: 3px 4px 3px 6px;
      background: linear-gradient(to bottom, #245edb 0%, #1941a5 50%, #1432a0 51%, #0e2795 100%);
      cursor: move;
      gap: 4px;
    }
    .xp-titlebar-icon {
      width: 16px; height: 16px;
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect width='16' height='16' fill='%234a9cdb'/%3E%3Crect x='2' y='4' width='12' height='8' fill='white' rx='1'/%3E%3Crect x='2' y='4' width='12' height='3' fill='%231941a5' rx='1'/%3E%3C/svg%3E") center/contain no-repeat;
      flex-shrink: 0;
    }
    .xp-titlebar-text {
      flex: 1;
      color: white;
      font-weight: bold;
      font-size: 12px;
      text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .xp-btn {
      width: 21px; height: 21px;
      display: flex; align-items: center; justify-content: center;
      font-size: 12px;
      font-weight: bold;
      color: #000;
      background: linear-gradient(to bottom, #e8e4dc, #c8c4bc);
      border: 1px solid #fff;
      border-right-color: #404040;
      border-bottom-color: #404040;
      cursor: pointer;
      flex-shrink: 0;
    }
    .xp-btn.close:hover { background: linear-gradient(to bottom, #e04040, #a00000); color: #fff; }
    .xp-toolbar {
      background: #d4d0c8;
      border-bottom: 1px solid #808080;
      padding: 3px 5px;
      display: flex; align-items: center; gap: 3px;
    }
    .xp-nav-btn {
      width: 28px; height: 22px;
      display: flex; align-items: center; justify-content: center;
      background: linear-gradient(to bottom, #e8e4dc, #c8c4bc);
      border: 1px solid #fff;
      border-right-color: #404040;
      border-bottom-color: #404040;
      cursor: pointer;
      font-size: 12px;
    }
    .xp-nav-btn:hover { background: linear-gradient(to bottom, #ddeeff, #aaccee); }
    .xp-nav-btn.disabled {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
  background: linear-gradient(to bottom, #e8e4dc, #c8c4bc);
}
    .xp-nav-counter {
      font-size: 11px;
      padding: 0 8px;
      color: #222;
    }
    .xp-body {
      padding: 4px;
      background: #c0c0c0;
      margin: 4px;
      border: 2px solid #404040;
      border-right-color: #fff;
      border-bottom-color: #fff;
      min-height: 240px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }
    .xp-body img {
      width: 100%;
      aspect-ratio: 16/9;
      object-fit: cover;
      display: block;
    }
    .xp-body-loading,
    .xp-body-empty {
      font-family: 'Tahoma', sans-serif;
      font-size: 12px;
      color: #555;
      text-align: center;
      padding: 40px 20px;
      width: 100%;
      aspect-ratio: 16/9;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .credits-xp-window {
  width: 480px;
  min-width: 480px;
}

.credits-xp-window .xp-body {
  width: calc(100% - 8px);
  height: 270px;
  min-height: 270px;
  max-height: 270px;
}

.credits-xp-window .xp-body img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: contain;
  display: block;
  background: #000;
}
    .xp-statusbar {
      background: #d4d0c8;
      border-top: 1px solid #808080;
      padding: 2px 6px;
      font-family: var(--wide);
      font-size: 10px;
      color: #333;
      display: flex;
      gap: 6px;
    }
    .xp-statusbar-panel {
      border: 1px solid #808080;
      border-right-color: #fff;
      border-bottom-color: #fff;
      padding: 1px 6px;
    }
    /* ── Credits items ── */
    .credits-item { cursor: none; }
    .credits-item:hover { color: #f0ede8; opacity: 1; border-color: var(--white); cursor: none; }

    /* ── Credits ── */
    #credits {
  background: #080808;  /* ← добавь эту строку */
  border-top: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
    #credits-canvas {
      position: absolute;
      inset: 0;
      pointer-events: none;
      opacity: .68;
    }
    .credits-overlay {
      position: absolute;
      inset: 0;
      background: rgba(8,8,8,.75);
      pointer-events: none;
    }
    .credits-inner {
      position: relative;
      z-index: 1;
    }
    .credits-cols {
      display: grid;
      grid-template-columns: 1fr;
      gap: 3rem;
    }
    @media (min-width: 769px) {
      .credits-cols { grid-template-columns: 1fr 1fr; gap: 4rem; }
    }
    .credits-col-title {
      font-family: var(--display);
      font-size: 2.5rem;
      opacity: .4;
      margin-bottom: 1.5rem;
      letter-spacing: .05em;
    }
    .credits-list { display: flex; flex-direction: column; align-items: flex-start; }
    .credits-item {
      display: inline-block;
      padding: .9rem 1.5rem;
      border-left: 1px solid rgba(240,237,232,.15);
      font-family: var(--wide);
      font-size: 1rem;
      letter-spacing: .15em;
      text-transform: uppercase;
      opacity: .55;
      transition: opacity .2s, border-color .2s;
    }
    .credits-item:hover { opacity: 1; border-color: var(--white); }

    /* ── Contact ── */
    #contact {
  background: #080808;  /* ← добавь эту строку */
  border-top: 1px solid var(--line);
  position: relative;
  overflow: hidden;
  min-height: clamp(440px, 38vw, 560px);
  padding-top: 6rem;
  padding-bottom: 7rem;
}
    #contact .section-inner {
      position: relative;
      z-index: 20;
    }
    .contact-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 4rem;
    }
    @media (min-width: 1024px) {
      .contact-grid { grid-template-columns: 1fr 1fr; gap: 6rem; }
    }
    .contact-emails { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 2rem; }
    .contact-emails a:hover { opacity: 1; }
    .contact-phone { font-size: .75rem; letter-spacing: .15em; opacity: .35; margin-bottom: 2rem; }
    .contact-social { display: flex; gap: 1.5rem; margin-top: 1rem; }
    .contact-social a { opacity: .7; transition: opacity .2s; }
    .contact-social a:hover { opacity: 1; }
    .contact-social img {
  width: 56px;
  height: 56px;
  filter: invert(1);
}

    /* Form */
    .form { display: flex; flex-direction: column; gap: 2.5rem; }
    @media (min-width: 1024px) { .form { padding-top: 8rem; } }
    .form-group { display: flex; flex-direction: column; gap: .5rem; }
    .form-input, .form-textarea {
      background: transparent;
      border: none;
      border-bottom: 1px solid rgba(240,237,232,.2);
      padding-bottom: 1rem;
      color: var(--white);
      font-size: 1.2rem;
      outline: none;
      transition: border-color .2s;
      cursor: none;
    }
    .form-input::placeholder, .form-textarea::placeholder { color: rgba(240,237,232,.2); }
    .form-input:focus, .form-textarea:focus { border-bottom-color: var(--white); }
    .form-textarea { resize: none; }
    .form-btn {
      align-self: flex-start;
      padding: 1rem 2.5rem;
      border: 1px solid rgba(240,237,232,.2);
      background: transparent;
      color: var(--white);
      font-size: 1rem;
      letter-spacing: .2em;
      text-transform: uppercase;
      cursor: none;
      transition: background .2s, color .2s;
    }
    .form-btn:hover { background: var(--white); color: var(--bg); }

    /* ── Footer ── */
    footer {
      border-top: 1px solid var(--line);
      padding: 2rem 2.5rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 1rem;
      opacity: .3;
    }

    /* ══════════════════════════════════════════
       DESKTOP-ONLY OVERRIDES  (min-width: 769px)
       ══════════════════════════════════════════ */
    @media (min-width: 769px) {

      /* 1. SCROLL шрифт — см. ниже в п.10 блоке */

      /* 3. Форма — вернуть исходную ширину (не растягивать) */
      .form {
        max-width: 480px;
      }

      /* 5. Credits SLOMANO -20% */
      /* handled in buildTextMask via JS — see below */

      /* 7. section-title 5.1vw */
      .section-title {
        font-size: 5.1vw !important;
      }
      /* Projects заголовок тоже */
      #projects .section-title {
        font-size: 5.1vw !important;
      }

      /* 8. about-text 1.35rem */
      .about-text {
        font-size: 1.35rem !important;
      }

      /* 6. About RU — отдельный шрифт под кириллицу, размер уменьшен в 1.5 раза */
      section[data-lang="ru"] .about-text p,
      section[data-lang="ru"] .about-stat-label {
        font-family: 'KoratkiBook', 'Arial', 'Helvetica Neue', sans-serif !important;
        letter-spacing: 0.04em;
      }
      section[data-lang="ru"] .about-text p {
        font-size: 0.9rem !important;
      }
      section[data-lang="ru"] .about-stat-label {
        font-size: 0.77rem !important;
      }
      .section-eyebrow {
        font-size: 1.15rem !important;
        letter-spacing: .25em;
      }

      
      .form-label {
        font-size: 1.35rem !important;
        letter-spacing: .15em;
      }
      .form-input, .form-textarea {
        font-size: 1.3rem !important;
      }
      .form-input::placeholder, .form-textarea::placeholder {
        font-size: 1.3rem;
      }
      .form-btn {
        font-size: 1.3rem !important;
        letter-spacing: .15em;
      }

      
      footer p {
        font-size: 1.3rem !important;
      }

      
      .contact-emails a {
        font-size: 1.3rem !important;
      }

     
      .about-text {
        font-size: 1.55rem !important;
      }
      .about-stat-label {
        font-family: var(--wide) !important;
        font-size: 1.15rem !important;
        letter-spacing: .12em;
        opacity: .55;
      }

      
      .credits-item {
        font-size: 1.2rem !important;
        letter-spacing: .1em;
        white-space: normal;
        word-break: break-word;
      }

      /* 7. XP окошко (credits + проекты) — titlebar и statusbar 15px, наш шрифт */
      .xp-titlebar-text {
        font-family: var(--wide) !important;
        font-size: 20px !important;
      }
      .xp-statusbar {
        font-size: 15px !important;
      }
      .xp-statusbar-panel {
        font-family: var(--wide) !important;
        font-size: 15px !important;
      }

      /* 8. SCROLL шрифт — наш (font-size override в п.10) */

      /* 9. Окошко проектов — titlebar наш шрифт (уже в п.7, продублируем явно) */
      .proj-xp-window .xp-titlebar-text {
        font-family: var(--wide) !important;
        font-size: 15px !important;
      }
      .proj-xp-window .xp-statusbar,
      .proj-xp-window .xp-statusbar-panel {
        font-family: var(--wide) !important;
        font-size: 15px !important;
      }

      /* 10. Ширина окна проектов — вернуть как было (min(1123px, 97vw)) — НЕ для order формы */
      .proj-xp-layer .proj-xp-window {
        width: min(1123px, 97vw) !important;
      }
      /* Order форма — в два раза меньше */
      #orderXpLayer .proj-xp-window {
        width: min(480px, 94vw) !important;
      }

      /* SCROLL — в два раза больше, наш шрифт */
      .hero-scroll span {
        font-family: var(--wide) !important;
        font-size: calc(var(--scroll-font-size, 0.6rem) * 2) !important;
      }

    } /* end @media (min-width: 769px) */

    @media (max-width: 767px) {
      section { padding: 4rem 1.25rem; }
      #contact {
        min-height: auto;
        padding-top: 4.5rem;
        padding-bottom: 5.5rem;
      }
      nav { padding: 1.25rem 1.25rem; }
      .hero-content img { width: 220px; }
      .modal-gallery { grid-template-columns: 1fr; }
    }
    /* ── Paint-fill intro overlay ── */
    .intro-loader {
      position: fixed;
      inset: 0;
      z-index: 10000;
      pointer-events: none;
      overflow: hidden;
      background: #080808;
    }

    .intro-loader.is-done {
      display: none;
    }

    .intro-logo {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-family: var(--display);
      font-size: clamp(2.8rem, min(10vw, 7.2vh), 6.2rem);
      letter-spacing: .04em;
      color: var(--white);
      white-space: nowrap;
      z-index: 2;
      pointer-events: none;
      display: flex;
      align-items: center;
    }

    .intro-cursor-blink {
      display: inline-block;
      width: clamp(2px, 0.35vw, 5px);
      height: .78em;
      margin-left: .06em;
      background: var(--white);
      transform: translateY(-0.03em);
      animation: introCursorBlink .45s step-end infinite;
    }

    @keyframes introCursorBlink {
      50% { opacity: 0; }
    }

    /* SVG — маска которая обрезает лоадер снизу волной */
    .intro-clip-svg {
      position: absolute;
      width: 0;
      height: 0;
      overflow: hidden;
      pointer-events: none;
    }
.proj-xp-scroll img,
.proj-xp-scroll video,
.xp-body img {
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

  







    /* ── Footer physics objects ── */
    footer.footer-physics {
      border-top: 1px solid var(--line);
      padding: 2rem 2.5rem;
      background: #080808;
      opacity: 1;
    }

    .footer-physics-copy {
      position: relative;
      z-index: 1;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 1rem;
      pointer-events: none;
      opacity: .38;
    }

    .footer-physics-copy p {
      font-family: var(--wide);
      font-size: .65rem;
      letter-spacing: .2em;
      text-transform: uppercase;
    }

    @media (min-width: 769px) {
      .footer-physics-copy p {
        font-size: 1.15rem !important;
      }
    }

    @media (max-width: 768px) {
      footer.footer-physics {
        padding: 1.25rem;
      }
      .footer-physics-copy {
      }
    }