:root{
  --bg:#000;
  --text:#fff;
  --muted:rgba(255,255,255,.74);
  --muted2:rgba(255,255,255,.46);
  --border:rgba(255,255,255,.14);

  --line:rgba(255,255,255,.26);

  --accent:#ff7a00; /* исходник */
  --acid:#b6ff2a;   /* результат */

  --headerH: 48px;
}

*{ box-sizing:border-box; border-radius:0 !important; }
html,body{ margin:0; padding:0; background:var(--bg); color:var(--text); }
body{
  font-family:"Anonymous Pro", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

a{ color:var(--text); text-decoration:none; }
button{ font-family: inherit; }

body.modal-open{ overflow:hidden; }

/* FIX HEADER */
.case-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--headerH);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;  /* безопасно, центр не растягивает */
  align-items: center;
  padding: 0 14px;
  border-bottom: 1px solid var(--border);
  background: rgba(0,0,0,.92);
  backdrop-filter: blur(6px);
  
  /* Защита от переполнения */
  width: 100%;
  max-width: 100vw;
  box-sizing: border-box;
  overflow: hidden;
}

.topnav{
  display:flex;
  gap: 18px;
  justify-content:center;
  align-items:center;
  white-space: nowrap;
}
.toplink{
  font-size: 12.5px;
  letter-spacing: .06em;
  opacity: .72;
  padding: 6px 0;
  border-bottom: 1px solid transparent;
}
.toplink:hover{ opacity: 1; border-bottom-color: rgba(255,255,255,.22); }

.mail{
  justify-self:end;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.02);
  color: rgba(255,255,255,.72);
  cursor: default;
  opacity: .55;
}
.mailIcon{ display:block; transform: translateY(-1px); }

.case{
  max-width: 1380px;
  margin:0 auto;
  padding: 26px 14px 110px;
}

/* common */
.sectionHead{ margin: 0 0 14px; }
.sectionHead h2{
  font-size: 22px;
  margin: 0 0 6px 0;
  letter-spacing: -0.01em;
}
.sectionHead-quiet h2{ font-size: 18px; opacity:.85; letter-spacing: .02em; }
.sectionSub{
  margin: 0 0 22px;
  color: var(--muted2);
  opacity: .78;
  line-height: 1.8;
  max-width: 96ch;

  /* аккуратные переносы */
  overflow-wrap: break-word;
  hyphens: auto;
}

.sectionList{
  margin: -10px 0 22px;
  padding: 0 0 0 18px;
  color: var(--muted2);
  opacity: .78;
  line-height: 1.8;
  max-width: 96ch;
}
.sectionList li{ margin: 6px 0; }
.mono{ font-family: inherit; opacity:.78; }

/* HERO */
.hero{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 22px;
  align-items: stretch;
  padding-top: 6px;
  margin-bottom: 44px;
}
.hero-left{
  display:flex;
  flex-direction:column;
  min-height: 100%;
}
.hero-title{
  font-size: clamp(44px, 6.6vw, 78px);
  margin:0;
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.hero-sub{
  margin-top: 10px;
  font-size: 18px;
  opacity: .88;
  letter-spacing: .02em;
}
.hero-subBig{
  font-size: 27px;
  line-height: 1.15;
}
.hero-subBrand{ opacity: .96; }

.hero-en{
  margin-top: 10px;
  font-size: 16px;
  opacity: .52;
  letter-spacing: .02em;
}
.hero-lead{
  margin: 14px 0 0;
  color:var(--muted);
  line-height:1.9;
  max-width:84ch;
  overflow-wrap: break-word;
  hyphens: auto;
}


/* ТЕГИ ОПУЩЕНЫ ВНИЗ */
.hero-tags{
  margin-top: auto;
  padding-top: 18px;
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
}
.tagPill{
  border: 1px solid rgba(255,255,255,.22);
  padding: 8px 10px;
  font-size: 12px;
  letter-spacing: .02em;
  opacity: .78;
}
.tagPill:hover{ opacity:1; border-color: rgba(255,255,255,.42); }

.hero-right{
  border: 1px solid var(--border);
  background: rgba(255,255,255,.02);
  overflow:hidden;
  min-height: 360px;
  display:flex;
  flex-direction:column;
}
.hero-right img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  flex: 1 1 auto;
}
.hero-caption{
  border-top: 1px solid rgba(255,255,255,.10);
  padding: 10px 12px;
  font-size: 12px;
  color: rgba(255,255,255,.55);
}

/* TLDR */
.tldr{
  margin-top: 10px;
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.tldr .card{
  border: 1px solid rgba(255,255,255,.12);
  padding: 18px;
  background: rgba(255,255,255,.02);
  min-height: 150px;
}
.tldr h3{
  margin:0 0 12px;
  font-size: 14px;
  letter-spacing: .02em;
  color: rgba(255,255,255,.90);
}
.tldr p{
  margin:0;
  color: var(--muted);
  line-height: 1.85;
  font-size: 15.2px;
  overflow-wrap: break-word;
  hyphens: auto;
}


/* RESULT (acid) */
.tldr .card-accent{
  border-color: rgba(182,255,42,.55);
  background: rgba(182,255,42,.10);
}
.tldr .card-accent h3{ color: rgba(182,255,42,.95); }
.tldr .card-accent p{ color: rgba(255,255,255,.92); }

/* SOURCE (orange) */
.tldr .card-warn{
  border-color: rgba(255,122,0,.55);
  background: rgba(255,122,0,.10);
}
.tldr .card-warn h3{ color: rgba(255,122,0,.95); }
.tldr .card-warn p{ color: rgba(255,255,255,.90); }

/* MIND MAP */
.mind{ margin-top: 70px; }
.mindFrame{
  position: relative;
  border: 1px solid rgba(255,255,255,.12);

  /* фон без полос */
  background: rgba(255,255,255,.02);

  height: min(720px, 80vh);
  overflow: hidden;
}
.mindFrame canvas{
  position:absolute; inset:0;
  width:100%; height:100%;
  display:block;
}
/* mind: hint */
.mindHint{
  position:absolute;
  left:16px;
  bottom:14px;
  font-size:11.5px;
  opacity:.55;
  user-select:none;
  pointer-events:none;
  letter-spacing:.02em;
}

/* SYSTEM */
.system{ margin-top: 70px; }
.systemGrid{
  margin-top: 14px;
  display:grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 14px;
  align-items: start;
}
.sysLeft{
  display:flex;
  flex-direction:column;
  gap: 14px;
}
.sysText{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.02);
  padding: 16px;
}
.sysKicker{
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  opacity: .55;
  margin-bottom: 10px;
}
.sysBlocks{ display:flex; flex-direction:column; gap: 12px; }
.sysBlock{ padding: 0; }
.sysH{
  font-size: 14px;
  letter-spacing: .02em;
  color: rgba(255,255,255,.92);
  margin-bottom: 6px;
}
.sysP{
  color: var(--muted);
  line-height: 1.9;
  font-size: 14px;
  opacity: .95;
  overflow-wrap: break-word;
  hyphens: auto;
}

.sysTitle{
  margin:0 0 10px;
  font-size: 16px;
  letter-spacing: .02em;
}
.sysNote{
  margin: 0 0 12px;
  color: var(--muted);
  line-height: 1.9;
  font-size: 14px;
  overflow-wrap: break-word;
  hyphens: auto;
}

.sysList{
  margin:0;
  padding: 0 0 0 18px;
  color: var(--muted);
  line-height: 1.85;
  font-size: 14px;
}
.sysList li{ margin: 8px 0; }
.sysMicro{
  margin-top: 14px;
  font-size: 12px;
  opacity: .55;
}
.sysDoc{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.02);
  padding: 16px;
}

.sysSheet{
  margin:0;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.02);
  padding: 14px;
}
.sheetKicker{
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  opacity: .55;
  margin-bottom: 10px;
}
.sheet{
  position: relative;
  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(1200px 600px at 50% 15%, rgba(182,255,42,.06), rgba(0,0,0,0) 60%),
    radial-gradient(800px 500px at 15% 90%, rgba(255,122,0,.06), rgba(0,0,0,0) 55%),
    rgba(0,0,0,.30);
  min-height: 520px;
  overflow:hidden;
}
.sheetGrid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: .55;
  pointer-events:none;
}
.sheetBlock{
  position:absolute;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.35);
  padding: 16px;
}
.blockA{ left: 56px; top: 68px; width: min(520px, 58%); }
.bTitle{
  font-size: 18px;
  letter-spacing: .08em;
  color: rgba(255,255,255,.92);
}
.bSub{
  margin-top: 6px;
  font-size: 13px;
  opacity: .65;
}
.miniBox{
  margin-top: 14px;
  border: 1px solid rgba(255,255,255,.14);
  padding: 12px;
  background: rgba(0,0,0,.22);
}
.miniLabel{ font-size: 12px; opacity: .55; margin-bottom: 10px; }
.miniBig{ font-size: 16px; color: rgba(182,255,42,.92); }
.miniSmall{ margin-top: 6px; font-size: 12px; opacity: .62; }
.modules{
  margin-top: 12px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.mod{
  border: 1px solid rgba(255,255,255,.14);
  padding: 10px;
  font-size: 12px;
  opacity: .75;
}
.sheetCall{
  position:absolute;
  display:flex;
  gap: 10px;
  align-items:center;
  font-size: 13px;
  opacity: .9;
}
.sheetCall i{
  width: 42px;
  height: 1px;
  background: rgba(182,255,42,.75);
  box-shadow: 0 0 14px rgba(182,255,42,.18);
  display:block;
}
.sheetCall span{ color: rgba(255,255,255,.85); }
.c1{ right: 75px; top: 115px; }
.c2{ right: 69px; top: 170px; }
.c3{ right: 110px; top: 225px; }
.c2 i{ background: rgba(255,122,0,.72); box-shadow: 0 0 14px rgba(255,122,0,.16); }
.c3 i{ background: rgba(255,255,255,.62); box-shadow: 0 0 14px rgba(255,255,255,.10); }

.sheetLegend{
  position:absolute;
  right: 56px;
  bottom: 56px;
  width: min(420px, 46%);
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.35);
  padding: 14px;
}
.lTitle{
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .7;
  margin-bottom: 10px;
}
.sheetLegend ul{
  margin:0;
  padding: 0 0 0 18px;
  color: rgba(255,255,255,.82);
  line-height: 1.9;
  font-size: 13px;
}

/* AUTOMATION */
.auto{ margin-top: 70px; }
.autoGrid{
  margin-top: 14px;
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 14px;
  align-items: stretch;
}
.autoText{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.02);
  padding: 16px;
  height: 100%;

  display: flex;
  flex-direction: column;
}

.autoKicker{
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  opacity: .55;
  margin-bottom: 10px;
}
.autoLead{
  margin: 0 0 12px;
  color: rgba(255,255,255,.74);
  line-height: 1.9;
  font-size: 15.2px;
  overflow-wrap: break-word;
  hyphens: auto;
}

.autoList{
  margin:0;
  padding: 0 0 0 18px;
  color: rgba(255,255,255,.74);
  line-height: 1.85;
  font-size: 15px;
}
.autoList li{ margin: 8px 0; }
.autoStack{
  margin-top: auto;
  padding-top: 14px;
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
}

.pill{
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.18);
  font-size: 12px;
  letter-spacing: .02em;
  opacity: .85;
}
.pillDim{ opacity: .55; }

.autoViz{
  display:flex;
  flex-direction:column;
  gap: 12px;
  height: 100%;
}
.term{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.35);
  overflow: hidden;
  display:flex;
  flex-direction:column;
  height: 360px;        /* фикс: не прыгает при печати */
  flex: 0 0 auto;
}

.termTop{
  display:flex;
  align-items:center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
}
.termTop .dot{
  width: 10px; height: 10px;
  border: 1px solid rgba(255,255,255,.20);
  background: rgba(255,255,255,.06);
  display:inline-block;
}
.termTitle{
  margin-left: 6px;
  font-size: 12px;
  opacity: .65;
  letter-spacing: .06em;
}
.termBody{
  margin:0;
  padding: 12px;
  flex: 1 1 auto;
  overflow: auto; /* фикс: блок не прыгает, скролл внутри */
  font-size: 12px;
  line-height: 1.7;
  color: rgba(255,255,255,.78);
  white-space: pre-wrap;
}

/* done blink */
.term.isDone{
  border-color: rgba(182,255,42,.55);
  box-shadow: 0 0 0 1px rgba(182,255,42,.20) inset, 0 0 22px rgba(182,255,42,.10);
  animation: termDoneBlink 1.2s ease-in-out 0s 3;
}
@keyframes termDoneBlink{
  0%,100%{ box-shadow: 0 0 0 1px rgba(182,255,42,.10) inset, 0 0 10px rgba(182,255,42,.06); }
  50%{ box-shadow: 0 0 0 1px rgba(182,255,42,.38) inset, 0 0 24px rgba(182,255,42,.14); }
}

.pipe{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.02);
  padding: 12px;
}
.pipeRow{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
}
.pipeNode{
  flex: 1 1 auto;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.25);
  padding: 10px 10px;
  font-size: 12px;
  opacity: .85;
  text-align:center;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.pipeNode.isActive{
  border-color: rgba(182,255,42,.55);
  background: rgba(182,255,42,.10);
  box-shadow: 0 0 16px rgba(182,255,42,.10);
  opacity: .95;
}
.pipeArrow{ opacity:.55; font-size: 12px; }
.pipeHint{
  margin-top: 10px;
  font-size: 12px;
  opacity: .55;
}

/* PRINT VIEWER */
.viewer{ margin-top: 70px; }
.whiteFrame{
  margin-top: 14px;
  position: relative;
  width: min(1280px, 100%);
  margin-left: auto;
  margin-right: auto;
}
.vfViewport{
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.93);
  height: min(720px, 78vh);
  display:flex;
  align-items:center;
  justify-content:center;
}
.vfTrack{
  display:flex;
  height: 100%;
  width: 100%;
  transition: opacity .18s ease, transform .32s ease;
  will-change: transform;
}
.vfSlide{
  flex: 0 0 100%;
  height: 100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 18px;
}
.vfSlide img{
  display:block;
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  cursor: zoom-in;
}
.vfArrow{
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.55);
  color: rgba(255,255,255,.92);
  cursor: pointer;
  z-index: 5;
  transition: background .15s ease, opacity .15s ease, transform .12s ease;
}
.vfArrow:hover{ background: rgba(255,255,255,.06); }
.vfArrow:active{ transform: translateY(-50%) translateY(1px); }
.vfArrow:disabled{ opacity:.35; cursor:not-allowed; }
.vfArrow.left{ left: -54px; }
.vfArrow.right{ right: -54px; }
.vfCounter{
  position:absolute;
  right: 10px;
  bottom: 10px;
  font-size: 12px;
  color: rgba(0,0,0,.72);
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(0,0,0,.10);
  padding: 6px 8px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.viewerCaption{
  margin-top: 12px;
  text-align:center;
  font-size: 12px;
  opacity: .55;
}

/* MASTERPLANS */
.masterplans{ margin-top: 70px; }
.strip{ margin-top: 14px; position: relative; }
.stripViewport{
  border-top: 1px solid rgba(255,255,255,.10);
  border-bottom: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  overflow:hidden;
  height: min(740px, 86vh);
}
.stripTrack{
  height: 100%;
  display:flex;
  gap: 22px;
  padding: 18px;
  align-items:flex-start;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;

  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.18) rgba(255,255,255,.04);
}
.stripTrack::-webkit-scrollbar{ height: 12px; }
.stripTrack::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.14); }
.stripTrack::-webkit-scrollbar-track{ background: rgba(255,255,255,.04); }

.mpItem{
  flex: 0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap: 10px;
  scroll-snap-align: start;
  min-width: 260px;
  max-width: 860px;
}
.mpImgWrap{
  background: transparent;
  padding: 0;
  height: auto;
}
.mpImgWrap img{
  display:block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: min(640px, 72vh);
  object-fit: contain;
  cursor: zoom-in;
}
.mpCap{
  font-size: 12px;
  color: rgba(255,255,255,.62);
  letter-spacing: .02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60ch;
}

.stripArrow{
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.55);
  color: rgba(255,255,255,.92);
  cursor: pointer;
  z-index: 5;
}
.stripArrow:hover{ background: rgba(255,255,255,.06); }
.stripArrow.left{ left: 0; }
.stripArrow.right{ right: 0; }

/* RETOUCH */
.retouch{ margin-top: 70px; }
.retouchGrid{
  margin-top: 14px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.retouchItem{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.02);
  padding: 12px;
}
.ba{
  position: relative;
  height: min(520px, 64vh);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.35);
  overflow: hidden;
}
.ba img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: contain;
  display:block;
}
.baTop{ clip-path: inset(0 50% 0 0); }
.baLine{
  position:absolute;
  top:0; bottom:0;
  left: 50%;
  width: 1px;
  background: rgba(255,255,255,.70);
  box-shadow: 0 0 16px rgba(255,255,255,.14);
  pointer-events:none;
}
.baKnob{
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(0,0,0,.55);
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  opacity: .92;
}
.baKnob span{ opacity:.75; font-size: 12px; letter-spacing: .08em; }
.baRange{
  margin-top: 10px;
  width: 100%;
  accent-color: rgba(255,255,255,.55);
}
.retouchCap{
  margin-top: 10px;
  font-size: 12px;
  opacity: .62;
}

/* WEBSITE */
.website{ margin-top: 70px; }
.siteRow{
  margin-top: 14px;
  display:grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 14px;
  align-items:start;
}
.siteMeta{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.02);
  padding: 16px;
}
.siteKicker{
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  opacity: .55;
  margin-bottom: 10px;
}
.siteTitle{ font-size: 16px; margin-bottom: 12px; }
.siteBullets{
  margin:0;
  padding: 0 0 0 18px;
  color: var(--muted);
  line-height: 1.85;
  font-size: 14px;
}
.siteBullets li{ margin: 8px 0; }
.siteFrames{
  display:grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 14px;
}
.deviceFrame{
  margin:0;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.02);
  padding: 12px;
}
.deviceFrame figcaption{
  font-size: 12px;
  opacity: .55;
  letter-spacing: .02em;
  margin-bottom: 10px;
}
.deviceVideo{
  width:100%;
  height: min(520px, 64vh);
  background: #000;
  border: 1px solid rgba(255,255,255,.10);
  display:block;
  object-fit: contain;
}

/* FLYTHROUGH */
.fly{ margin-top: 70px; }
.flyFrame{
  margin-top: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.02);
  padding: 12px;
}
.flyVideo{
  width: 100%;
  height: min(640px, 72vh);
  border: 1px solid rgba(255,255,255,.10);
  background: #000;
  object-fit: contain;
  display:block;
}
.flyHint{
  margin-top: 10px;
  font-size: 12px;
  opacity: .55;
}

/* PHOTO HSCROLL */
.photo{ margin-top: 70px; }
.hscroll{
  margin-top: 14px;
  border-top: 1px solid rgba(255,255,255,.10);
  border-bottom: 1px solid rgba(255,255,255,.10);
  overflow-x: auto;
  background: rgba(255,255,255,.02);
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;

  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.18) rgba(255,255,255,.04);
}
.htrack{
  display:flex;
  gap: 14px;
  padding: 18px;
  align-items: flex-start;
}
.photoItem{
  flex: 0 0 auto;
  height: min(520px, 68vh);
  display:flex;
  align-items:flex-start;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.25);
  overflow:hidden;
  scroll-snap-align: start;
}
.photoItem img{
  height: 100%;
  width: auto;
  max-width: 88vw;
  object-fit: contain;
  display:block;
  cursor: zoom-in;
}
.hscroll::-webkit-scrollbar{ height: 12px; }
.hscroll::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.14); }
.hscroll::-webkit-scrollbar-track{ background: rgba(255,255,255,.04); }

/* SALES */
.sales{ margin-top: 70px; }
.salesGrid{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px;
}
.sale{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.02);
  overflow:hidden;
  grid-column: span 6;
}
.sale img{
  width:100%;
  height: min(420px, 56vh);
  object-fit: contain;               /* FIX: НЕ РЕЖЕМ */
  display:block;
  background: rgba(0,0,0,.28);       /* чтобы "contain" не выглядел пусто */
}
.saleCap{
  border-top: 1px solid rgba(255,255,255,.10);
  padding: 10px 12px;
  font-size: 12px;
  opacity: .62;
  overflow-wrap: break-word;
  hyphens: auto;
}


.pathHint{
  margin-top: 10px;
  font-size: 12px;
  opacity: .55;
}

/* FINAL */
.final{ margin-top: 90px; }
.finalText{
  border-top: 1px solid rgba(255,255,255,.10);
  padding-top: 26px;
  font-size: clamp(16px, 2vw, 22px);
  line-height: 1.55;
  color: rgba(255,255,255,.88);
}

/* MODAL */
.modal{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}
.modal.isOpen{ display:flex; }
.modalBack{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.86);
}
.modalBox{
  position: relative;
  margin: auto;
  width: min(1320px, 92vw);
  height: min(900px, 90vh);
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.45);
  display:flex;
  flex-direction:column;
}
.modalClose{
  position:absolute;
  top: 10px;
  right: 10px;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.55);
  color: rgba(255,255,255,.92);
  cursor:pointer;
  z-index: 2;
}
.modalClose:hover{ background: rgba(255,255,255,.06); }

.modalStage{
  flex: 1 1 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 18px;
}
.modalStage img,
.modalStage video{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display:block;
}
.modalCap{
  border-top: 1px solid rgba(255,255,255,.10);
  padding: 10px 12px;
  font-size: 12px;
  opacity: .62;
}

/* MOBILE */
@media (max-width: 980px){
  .case{ padding-top: 18px; padding-left: 16px; padding-right: 16px; }

  .case-header{
    height: auto;
    padding: 10px 12px;
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .topnav{ justify-content:flex-start; flex-wrap: wrap; gap: 12px; }
  .mail{ display:none; }

  .hero{ grid-template-columns: 1fr; }
  .hero-left{ min-height: auto; }
  .hero-tags{ margin-top: 18px; padding-top: 0; }

  .tldr{ grid-template-columns: 1fr; }
  .systemGrid{ grid-template-columns: 1fr; }
  .autoGrid{ grid-template-columns: 1fr; }
  .retouchGrid{ grid-template-columns: 1fr; }
  .siteRow{ grid-template-columns: 1fr; }
  .siteFrames{ grid-template-columns: 1fr; }

  /* mind map: нормальный размер и удобный drag */
  .mindFrame{ height: 72vh; min-height: 420px; }
  .mindHint{ left:12px; bottom:10px; font-size:7px; opacity:.52; }

  /* print viewer: меньше пустоты */
  .vfViewport{ height: 40vh; }
  .vfSlide{ padding: 10px; }
  .vfArrow{ width: 56px; height: 56px; }
  .vfArrow.left{ left: 0; }
  .vfArrow.right{ right: 0; }

 /* masterplans: чтобы полностью читалось на экране */
.stripViewport {
  height: 55vh;           /* фиксированная высота контейнера */
  min-height: 49vh;       /* на всякий случай, чтобы не сжимался */
  max-height: 45vh;
}

.mpItem {
  min-width: 84vw;
  max-width: 92vw;
}

.mpImgWrap img {
  max-height: calc(72vh - 90px);
  /* или более безопасный вариант относительно контейнера: */
  /* max-height: calc(100% - 20px); */   /* если картинка внутри .mpItem */
}

.baRange {
  height: 34px;
}

  /* system sheet: не слипается, скроллится горизонтально + чуть компактнее */
  .sysSheet{ overflow-x:auto; -webkit-overflow-scrolling: touch; }
  .sheet{ min-width: 700px; transform: scale(.92); transform-origin: top left; }

  .stripArrow{ display:none; }
  .modalBox{ width: 94vw; height: 88vh; }

  /* sales: 1 колонка, без кропа, меньше пустоты */
  .salesGrid{ grid-template-columns: 1fr; }
  .sale{ grid-column: span 12; }
  .sale img{ height: clamp(200px, 54vw, 420px); object-fit: contain; }

  /* local connect: фикс рамка, чтобы ничего не скакало */
  .term{ height: 320px; flex: 0 0 auto; }
  .termBody{ overflow: auto; -webkit-overflow-scrolling: touch; }

  /* фото: мягкий горизонтальный скролл без дерганий */
  .hscroll{ scroll-snap-type: x proximity; overscroll-behavior-x: contain; }
  .photoItem{ height: clamp(260px, 64vw, 520px); }
  .photoItem img{ max-width: 92vw; }
}

@media (max-width: 980px) {

  /* ── Hero ─────────────────────────────────────────────── */
  .hero {
    gap: 18px;
    padding-top: 8px;
    margin-bottom: 32px;
  }
  .hero-title {
    font-size: clamp(36px, 8.8vw, 52px);
    line-height: 0.92;
  }
  .hero-sub {
    font-size: 16px;
  }
  .hero-subBig {
    font-size: 22px;
  }
  .hero-lead {
    font-size: 15px;
    line-height: 1.65;
  }

  /* ── TLDR ─────────────────────────────────────────────── */
  .tldr {
    gap: 10px;
  }
  .tldr .card {
    padding: 14px 16px;
    min-height: 130px;
  }
  .tldr h3 {
    font-size: 13.5px;
  }
  .tldr p {
    font-size: 14.5px;
    line-height: 1.65;
  }

  /* ── Mind map (уже есть, но делаем чуть компактнее) ───── */
  .mind {
    margin-top: 50px;
  }
  .mindFrame {
    height: 72vh;
    min-height: 360px;
    border-width: 1px;
  }

  /* ── System ───────────────────────────────────────────── */
  .system {
    margin-top: 50px;
  }
  .systemGrid {
    gap: 12px;
  }
  .sysText,
  .sysDoc {
    padding: 14px;
  }
  .sysH {
    font-size: 13.5px;
  }
  .sysP,
  .sysNote {
    font-size: 14px;
    line-height: 1.65;
  }

  /* ── Sheet (большая схема) ────────────────────────────── */
  .sheet {
    transform: scale(0.82);
    transform-origin: top left;
    min-width: 620px;          /* чуть меньше, чтобы помещалось */
  }
  .sheetGrid {
    background-size: 48px 48px; /* мельче сетка на мобильных */
  }
  .blockA {
    width: min(460px, 54%);
  }

  /* ── Automation / Terms ───────────────────────────────── */
  .auto {
    margin-top: 50px;
  }
  .term {
    height: min(300px, 50vh);
  }
  .termTop {
    padding: 8px 10px;
  }
  .termTitle {
    font-size: 11.5px;
  }
  .termBody {
    padding: 10px;
    font-size: 12.5px;
  }

  /* ── Retouch Before/After ─────────────────────────────── */
  .retouch {
    margin-top: 50px;
  }
  .ba {
    height: min(340px, 52vh);
  }
  .baKnob {
    width: 40px;
    height: 40px;
  }
  .baKnob span {
    font-size: 11px;
  }

  /* ── Website ──────────────────────────────────────────── */
  .website {
    margin-top: 50px;
  }
  .deviceVideo {
    height: min(380px, 35vh);
  }

  /* ── Flythrough video ─────────────────────────────────── */
  .fly {
    margin-top: 50px;
  }
  .flyVideo {
    height: min(450px, 55vh);
  }

  /* ── Photo horizontal scroll ──────────────────────────── */
  .photo {
    margin-top: 50px;
  }
  .photoItem {
    height: clamp(280px, 68vw, 460px);
  }
  .photoItem img {
    max-width: 94vw;
  }

 @media (max-width: 980px) {
  /* ── Sales ────────────────────────────────────────────── */
  .sales {
    margin-top: 36px;          /* чуть меньше, экономим пространство */
  }

  .sale {
    padding: 0;
    border-radius: 8px;        /* лёгкое скругление для более современного вида */
    overflow: hidden;          /* на всякий случай, если будут вылезания */
  }

  .sale img {
    width: 100%;
    height: clamp(260px, 68vw, 400px)   /* ↑ чуть больше минимальная и базовая высота */
    object-fit: contain;
    background: rgba(0,0,0,.28);         /* фон на случай, если contain оставит пустоты */
    display: block;
  }

  /* Если подпись слишком прижата к картинке */
  .saleCap {
    padding: 10px 12px 14px;
    font-size: 12.5px;
    line-height: 1.4;
  }
}
  /* ── Общие отступы секций и текста для компактности ───── */
  .sectionHead {
    margin-bottom: 12px;
  }
  .sectionHead h2 {
    font-size: 20px;
  }
  .sectionSub,
  .sectionList {
    font-size: 14.5px;
    line-height: 1.65;
    margin-bottom: 18px;
  }

  /* ── Modal (чуть больше воздуха) ──────────────────────── */
  .modalBox {
    width: 95vw;
    height: 90vh;
    border-radius: 10px;
  }
  .modalStage {
    padding: 12px;
  }
}
@media (max-width: 980px) {
  .sysSheet {
    display: none;
  }
}

/* ==============================================
   HEADER — финальная адаптивная версия
   ============================================== */

/* ── HEADER ─────────────────────────────────────────────── */
.case-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--headerH);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  padding: 0 14px;
  border-bottom: 1px solid var(--border);
  background: rgba(0,0,0,.92);
  backdrop-filter: blur(6px);
  width: 100%;
  max-width: 100vw;
  box-sizing: border-box;
  overflow: visible;  /* ← КРИТИЧНОЕ ИСПРАВЛЕНИЕ: позволяет попапу вылезать вниз */
}

.back {
  opacity: 0.72;
  font-size: 14px;
  white-space: nowrap;
  transition: opacity 0.18s ease;
}

.back:hover {
  opacity: 1;
}

.topnav {
  display: flex;
  gap: 18px;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
}

.toplink {
  font-size: 12.5px;
  letter-spacing: .06em;
  opacity: .72;
  padding: 6px 0;
  border-bottom: 1px solid transparent;
}

.toplink:hover {
  opacity: 1;
  border-bottom-color: rgba(255,255,255,.22);
}

.social-icons {
  display: flex;
  gap: 6px;
  justify-content: flex-start;  /* ← сдвиг влево */
  align-items: center;
}

.social-btn {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 400;
  transition: all 0.16s ease;
  backdrop-filter: blur(4px);
}

.social-btn:hover {
  background: rgba(255,255,255,0.09);
  border-color: rgba(255,255,255,0.3);
  transform: translateY(-1px);
  color: white;
}

.social-btn.tg {
  font-size: 15px;
  font-weight: 350;
}

.mail-wrapper {
  position: relative;
  display: inline-flex;
}

.mail-tooltip {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  margin-top: 8px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 60;
}

.mail-tooltip.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.tooltip-content {
  background: rgba(20,20,25,0.94);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 13px;
  color: white;
  box-shadow: 0 8px 24px rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
}

.tooltip-arrow {
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid rgba(20,20,25,0.94);
}

.email-text {
  cursor: pointer;
  transition: color 0.2s ease;
}

.email-text:hover,
.copy-btn:hover {
  color: white;
}

.copy-btn {
  background: none;
  border: none;
  color: rgba(255,255,255,0.8);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  font-size: 15px;
}

.email-text.copied,
.copy-btn.copied {
  color: var(--acid) !important;
}

/* Мобильная адаптация: только back и иконки */
@media (max-width: 980px) {
  .case-header {
    height: auto;
    padding: 10px 12px;
    grid-template-columns: auto auto;  /* ← back слева, иконки справа */
    justify-content: space-between;    /* ← распределение по краям */
    gap: 10px;
    overflow: visible;  /* ← попап виден */
  }

  .topnav {
    display: none;  /* ← скрываем навигацию ("Для девелоперов" и т.д.) */
  }

  .social-icons {
    justify-content: flex-end;  /* ← иконки справа */
    gap: 8px;
  }

  .social-btn {
    width: 42px;  /* ← увеличено для лучшей кликабельности на мобильных */
    height: 42px;
    font-size: 18px;
  }

  .mail-tooltip {
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
    margin-top: 6px;
  }

  .mail-tooltip.active {
    transform: translateX(-50%) translateY(0);
  }

  .tooltip-content {
    padding: 7px 12px;
    font-size: 12.5px;
    gap: 10px;
  }

  .copy-btn {
    padding: 3px 5px;
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .social-btn {
    width: 40px;
    height: 40px;
    font-size: 17px;
  }

  .toplink {
    font-size: 11px;
  }

  .mail-tooltip {
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
  }
}
@media (max-width: 768px){
  .hero-tags > *:last-child{
    display: none;
  }
}

@media (max-width: 980px){

  .hero-sub{
    display: block;
  }

  .hero-subBrand{
    display: block;
  }

}