/* Адаптив: планшеты и телефоны (≤1024px, ≤380px) */
@media (max-width: 1024px) {
  /* 1. Отключаем кастомный курсор */
  #cur { display: none !important; }
  body { cursor: auto !important; }

  /* 1b. Nav компактнее на мобильных */
  nav { padding: 16px 20px !important; }
  .n-cta { font-size: .56rem !important; padding: 9px 14px !important; letter-spacing: .1em !important; }

  /* 2. Ломаем горизонтальную структуру */
  #hs-outer, #hs-sticky { height: auto !important; }
  #hs-rail { 
    display: block !important; 
    height: auto !important; 
    transform: none !important; 
  }
  .hp { 
    width: 100% !important; 
    height: auto !important; 
    padding: 80px 20px !important; 
    border-bottom: 1px solid var(--line);
  }

  /* 3. Адаптация контента панелей */
  .p1-content { position: relative; padding: 20px !important; }
  .p1-name .first, .p1-name .last { font-size: 16vw !important; }
  .p1-role { max-width: 100% !important; }
  
  .p2, .p3-stats { position: relative; padding: 40px 20px !important; }
  .p2-h { font-size: 12vw !important; }
  .p2-cols { grid-template-columns: 1fr !important; gap: 30px !important; }
  
  .p3-big { font-size: 12vw !important; padding-left: 20px !important; }
  .p3-stat-grid { grid-template-columns: 1fr 1fr !important; }

  /* 4. Видео панель */

  /* 5. Общие вертикальные секции */
  .vs { padding: 80px 20px !important; }
  .clients-h, .what-h { font-size: 10vw !important; }
  .about-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
  .about-img { aspect-ratio: 4 / 3 !important; }
  .about-facts { gap: 32px !important; flex-wrap: wrap; }
  .proc-grid { grid-template-columns: 1fr 1fr !important; }
  .faq-q { font-size: 1.05rem; }
  .faq-a p { padding: 0 8px 20px 62px; }
  .gal-detail__close { top: max(16px, env(safe-area-inset-top)) !important; right: 16px !important; width: 40px !important; height: 40px !important; }
  .gal-detail__visual { padding: 40px 20px !important; min-height: 42vh !important; }
  .gal-detail__visual-meta { left: 20px !important; right: 20px !important; bottom: 16px !important; font-size: .58rem !important; }
  .gal-detail__body { padding: 40px 20px !important; gap: 24px !important; }
  .gal-detail__title { font-size: clamp(1.8rem, 8vw, 2.6rem) !important; }
  .gal-tile__label { display: none !important; }
  
  /* Сетки */
  .prob-grid, .svc, .faq-grid { grid-template-columns: 1fr !important; gap: 36px !important; }
  .prob-head, .faq-side, .svc-view { position: static !important; }
  .svc-view { display: none; }
  .prob-head .prh { font-size: 15vw !important; }
  
  /* Навыки */
  .feat-sec { 
    grid-template-columns: 1fr !important; 
    padding: 80px 20px !important; 
    gap: 40px !important; 
  }
  .skill-row { 
    display: grid !important;
    grid-template-columns: 1fr 44px !important;
    grid-template-areas: "name name" "track pct" !important;
    row-gap: 8px !important;
    column-gap: 12px !important;
    align-items: center;
    padding: 16px 0 !important;
  }
  .skill-name { grid-area: name !important; font-size: 1rem !important; }
  .skill-track { grid-area: track !important; }
  .skill-pct { grid-area: pct !important; text-align: right; }

  /* 6. Финальный блок и футер */
  .final { padding: 80px 20px !important; }
  .finh { font-size: 12vw !important; }
  .finb { grid-template-columns: 1fr !important; gap: 40px !important; }
  footer { flex-direction: column; gap: 20px; text-align: center; }
}

/* ─ Extra-small phones (≤380px, z.B. iPhone SE) ─ */
@media (max-width: 380px) {
  .gal-mosaic { grid-template-columns: repeat(2, 1fr); }
  .gal-detail__meta { grid-template-columns: 1fr; gap: 8px; }
  .gal-detail__tags span { font-size: .58rem; padding: 6px 10px; }
  .about-facts { gap: 24px !important; }
  .af-n { font-size: 2.1rem; }
}

/* ─ Kunden-Liste, Projekt-Popup und Cases auf dem Handy ─ */
.gal-detail__body { min-width: 0; }
.gal-detail__meta div strong { overflow-wrap: anywhere; hyphens: auto; }
@media (max-width: 768px) {
  .ni-v { flex-direction: column; align-items: flex-start; gap: 8px; color: rgba(16,15,12,.28); }
  .ni-meta { opacity: .9; flex-shrink: 1; flex-wrap: wrap; }
  .ni-arr { opacity: 1; transform: none; }
  .gal-detail__meta { grid-template-columns: 1fr 1fr; }
  .gal-detail__meta div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 768px) {
  .gal-browser__view { height: 56vh; }
  .gal-browser { border-radius: 8px; }
}
@media (max-width: 768px) {
  .skills-wrap { column-gap: 20px; }
  .skill-track { width: auto !important; min-width: 0 !important; max-width: none !important; }
  .skill-name { font-size: .95rem !important; line-height: 1.05; }
}
/* Hero-Foto auf Handy/Tablet: Foto oben in Farbe, Text darunter */
@media (max-width: 1024px) {
  #p1 { min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; }
  .p1-photo { top: 64px; bottom: auto; right: 50%; height: auto; width: min(96vw, 520px); max-width: none; transform: translateX(50%); filter: none; opacity: 1; animation: none; }
  #p1::after { width: 100%; height: 100%; background: linear-gradient(to top, #080808 46%, rgba(8,8,8,.7) 58%, transparent 76%); }
}
/* Vision auf Handy/Tablet: Video im abgerundeten Rahmen (keine Maske) */
@media (max-width: 1024px) {
  #p4-video-panel { display: flex; flex-direction: column; gap: 18px; padding: 80px 20px 48px !important; }
  #p4-canvas, .p4-intro, .p4-next { display: none !important; }
  #p4-yt-bg { position: relative !important; inset: auto; height: auto; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; }
}
@media (max-width: 1024px) {
  .p4-sound { position: relative; right: auto; bottom: auto; align-self: flex-start; }
}

/* ═══ Handy-Korrekturen (Screenshots vom iPhone) ═══ */
@media (max-width: 1024px) {
  /* Kopfzeile: beim Scrollen dunkle Leiste statt frei schwebender Knöpfe; nach unten → ausblenden, nach oben → zeigen (main.js) */
  nav { transition: transform .35s cubic-bezier(.2,.8,.2,1), background .3s, padding .3s; }
  nav.nav-solid { background: rgba(10,10,10,.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); padding: 10px 16px !important; pointer-events: all; }
  nav.nav-solid .n-cta { background: var(--red); color: #fff; }
  nav.nav-hide { transform: translateY(-100%); }

  /* Hero: Foto oben im Fluss, Text darunter — keine Überlappung mit dem Gesicht, auch bei niedriger Bildschirmhöhe */
  #p1 { justify-content: flex-start; padding-top: 72px !important; padding-bottom: 48px !important; }
  #p1::after { display: none; }
  .p1-photo { position: relative; top: auto; right: auto; bottom: auto; transform: none; display: block; width: min(84vw, 440px); margin: 0 auto -16vw; z-index: 1;
    -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 94%); mask-image: linear-gradient(to bottom, #000 55%, transparent 94%); }
  .p1-content { padding: 0 !important; }

  /* Ergebnisse: Überschrift bündig links mit den Zahlen */
  .p3-stats { padding: 0 !important; border-left: 0; }
  .p3-big { padding-left: 0 !important; margin-bottom: 24px; }
  .p3l { padding-left: 0; }
  .sb { padding: 22px 18px; }
  .sn { font-size: 2.6rem; }
}
@media (max-width: 640px) {
  /* Werkzeuge: Untertitel nicht „klebend“, sonst liegt er über der Liste */
  .fstk { position: static !important; }
  .feat-sec { padding-top: 56px !important; gap: 20px !important; }
  /* Prozess: eine Spalte, sonst zu schmal zum Lesen */
  .proc-grid { grid-template-columns: 1fr !important; }
  /* Über mich: drei Zahlen in einer Reihe */
  .about-facts { display: grid !important; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 16px !important; }
}
/* Handy/Tablet: Panels stehen untereinander — Hinweis „Scroll →“ (seitlich) ist hier sinnlos */
@media (max-width: 1024px) { #p1 .disc { display: none !important; } }
/* Handy: Seite darf sich nicht seitlich verschieben lassen (Laufband, Text-Animationen ragen über den Rand) */
@media (max-width: 1024px) {
  html, body { overflow-x: hidden; }
  @supports (overflow: clip) { html, body { overflow-x: clip; } }
  .final, main, section { max-width: 100vw; }
}
/* Kontakt: rotierendes Badge nicht über der Überschrift, sondern darunter rechts */
@media (max-width: 768px) {
  .final { padding-top: 64px !important; }
  .fin-badge { position: relative; right: auto; top: auto; margin: 0 0 18px auto; width: 96px; }
}