:root {
  --jus-ink: #090909;
  --jus-paper: #f5f5f2;
  --jus-white: #fff;
  --jus-line: rgba(9, 9, 9, .17);
}

.jus360-case { background: var(--jus-paper); color: var(--jus-ink); }
.jus360-case .button,
.jus360-case .menu-toggle { border-color: #fff; background: #fff; color: #111; }
.jus360-case .menu-toggle span { background: #111; }
.jus360-case .button:hover { background: #d8d8d8; }
.jus-shell { width: min(1540px, calc(100% - 96px)); margin-inline: auto; }
.jus-section { padding: clamp(96px, 9vw, 164px) 0; }
.jus-eyebrow { margin: 0; font-size: 10px; font-weight: 700; letter-spacing: .15em; line-height: 1.2; text-transform: uppercase; }
.jus-heading-grid { display: grid; grid-template-columns: .55fr 2fr 1fr; gap: 4.5vw; align-items: start; }
.jus-heading-grid h2 {
  margin: 0;
  font-family: "Lebowski GB Preview", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(62px, 6.7vw, 126px);
  font-weight: 400;
  letter-spacing: -.05em;
  line-height: .88;
}
.jus-copy { max-width: 600px; }
.jus-copy p { margin: 0; font-size: clamp(17px, 1.08vw, 21px); line-height: 1.5; }
.jus-copy p + p { margin-top: 1em; }

.jus-hero { position: relative; min-height: calc(100svh - var(--header-h)); overflow: hidden; isolation: isolate; background: #fff; }
.jus-hero::before { content: ""; position: absolute; z-index: -1; inset: 0 0 0 50%; background: #0b0b0b url("/ru-v1-case-jus360-v1/assets/texture.jpg?v=1") center / cover; }
.jus-hero::after { content: ""; position: absolute; z-index: -1; top: -13vw; right: -7vw; width: min(41vw, 760px); aspect-ratio: 1; border: 1px solid rgba(255, 255, 255, .14); border-radius: 50%; }
.jus-hero__meta { position: absolute; top: 28px; right: var(--gutter); left: var(--gutter); display: flex; justify-content: space-between; color: #858585; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.jus-hero__meta span:last-child { color: rgba(255, 255, 255, .52); }
.jus-hero__wordmark { position: absolute; top: 45%; left: 50%; width: min(58vw, 1040px); transform: translate(-50%, -50%); }
.jus-hero__wordmark img { display: block; width: 100%; height: auto; }
.jus-hero__wordmark-light { position: absolute; inset: 0; filter: invert(1); clip-path: inset(0 0 0 50%); }
.jus-hero__bottom { position: absolute; right: var(--gutter); bottom: 58px; left: var(--gutter); display: grid; grid-template-columns: 1fr 1fr; gap: 10vw; align-items: end; }
.jus-hero__bottom p { margin: 0; font-family: "Lebowski GB Preview", "Helvetica Neue", Arial, sans-serif; font-size: clamp(56px, 5.7vw, 108px); letter-spacing: -.045em; line-height: .86; }
.jus-hero__bottom span { max-width: 420px; color: rgba(255, 255, 255, .66); font-size: 16px; line-height: 1.45; }
.jus-hero__scroll { position: absolute; right: var(--gutter); bottom: 24px; color: rgba(255, 255, 255, .52); font-size: 9px; letter-spacing: .14em; text-decoration: none; text-transform: uppercase; }

.jus-idea { background: #fff; }
.jus-construction { width: min(1320px, calc(100% - 96px)); margin: clamp(66px, 8vw, 126px) auto 0; }
.jus-construction img { display: block; width: 100%; height: auto; }
.jus-construction figcaption,
.jus-system__visual figcaption { padding-top: 10px; font-size: 9px; letter-spacing: .13em; text-transform: uppercase; }

.jus-system { overflow: hidden; background: var(--jus-ink); color: #fff; }
.jus-heading-grid--dark .jus-copy { color: rgba(255, 255, 255, .65); }
.jus-system__visual { width: min(1760px, calc(100% - 48px)); margin: clamp(70px, 8vw, 128px) auto 0; }
.jus-system__visual img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 56%; }
.jus-system__visual figcaption { color: rgba(255, 255, 255, .5); }
.jus-palette { display: grid; grid-template-columns: 1fr 1fr; margin-top: 30px; }
.jus-palette span { padding: 20px; border: 1px solid rgba(255, 255, 255, .22); font-size: 9px; letter-spacing: .13em; text-transform: uppercase; }
.jus-palette span:last-child { background: #fff; color: #111; }

.jus-digital { background: var(--jus-paper); }
.jus-browser { margin-top: clamp(70px, 8vw, 124px); border: 1px solid var(--jus-line); background: #fff; box-shadow: 0 28px 80px rgba(0, 0, 0, .08); }
.jus-browser__bar { height: 46px; display: flex; align-items: center; gap: 7px; padding: 0 16px; border-bottom: 1px solid var(--jus-line); }
.jus-browser__bar span { width: 7px; height: 7px; border-radius: 50%; background: #c9c9c9; }
.jus-browser__bar b { margin-left: auto; color: #999; font-size: 9px; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; }
.jus-browser__screen { min-height: min(64vw, 850px); display: grid; grid-template-columns: 38% 62%; }
.jus-browser__menu { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8vw 4vw; background: #fff; }
.jus-browser__menu img { width: min(72%, 410px); height: auto; }
.jus-browser__menu nav { display: grid; gap: 13px; margin-top: clamp(46px, 6vw, 88px); color: #777; font-size: 10px; letter-spacing: .16em; text-align: center; text-transform: uppercase; }
.jus-browser__content { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 7vw; background: #0b0b0b url("/ru-v1-case-jus360-v1/assets/texture.jpg?v=1") center / cover; color: #fff; text-align: center; }
.jus-browser__content p { margin: 0; font: 400 clamp(58px, 6vw, 112px)/.88 "Lebowski GB Preview", "Helvetica Neue", Arial, sans-serif; letter-spacing: -.045em; }
.jus-browser__content span { margin-top: 32px; color: rgba(255, 255, 255, .62); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.jus-result { display: grid; grid-template-columns: .55fr 2fr 1fr; gap: 4.5vw; align-items: start; margin-top: clamp(78px, 8vw, 126px); padding-top: 30px; border-top: 1px solid var(--jus-line); }
.jus-result > p:nth-child(2) { max-width: 900px; margin: 0; font: 400 clamp(42px, 4vw, 76px)/.95 "Lebowski GB Preview", "Helvetica Neue", Arial, sans-serif; letter-spacing: -.04em; }
.jus-result ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--jus-line); }
.jus-result li { padding: 14px 0; border-bottom: 1px solid var(--jus-line); font-size: 14px; }

.jus-contact { background: #090909; }
.jus-contact .gradient-text { --text-gradient: linear-gradient(105deg, #fff 0%, #b5b5b5 48%, #444 100%); }
.jus-contact .contact__main .jus-eyebrow { margin-bottom: 40px; color: rgba(255, 255, 255, .64); }

.js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .72s ease, transform .72s ease; }
.js [data-reveal].is-visible { opacity: 1; transform: none; }

@media (max-width: 1050px) {
  .jus-heading-grid,
  .jus-result { grid-template-columns: .45fr 1.65fr 1fr; }
  .jus-hero__wordmark { width: 66vw; }
}

@media (max-width: 900px) {
  .jus-shell { width: calc(100% - 40px); }
  .jus-section { padding: 88px 0; }
  .jus-heading-grid,
  .jus-result { grid-template-columns: 1fr; gap: 24px; }
  .jus-heading-grid h2 { font-size: clamp(54px, 15.5vw, 84px); line-height: .9; }
  .jus-hero { min-height: 820px; }
  .jus-hero::before { inset: 50% 0 0; }
  .jus-hero::after { top: auto; right: -25vw; bottom: -28vw; width: 90vw; }
  .jus-hero__meta { top: 22px; right: 20px; left: 20px; }
  .jus-hero__meta span:last-child { display: none; }
  .jus-hero__wordmark { top: 50%; width: 82vw; }
  .jus-hero__wordmark-light { clip-path: inset(50% 0 0); }
  .jus-hero__bottom { right: 20px; bottom: 48px; left: 20px; grid-template-columns: 1fr; gap: 16px; }
  .jus-hero__bottom p { align-self: end; color: #fff; font-size: clamp(52px, 14.8vw, 82px); }
  .jus-hero__bottom span { display: none; }
  .jus-hero__scroll { right: 20px; bottom: 18px; }
  .jus-construction { width: calc(100% - 24px); margin-top: 54px; }
  .jus-system__visual { width: calc(100% - 24px); margin-top: 56px; }
  .jus-palette { width: calc(100% - 24px); }
  .jus-browser { width: calc(100% - 24px); margin-top: 56px; }
  .jus-browser__screen { min-height: 720px; grid-template-columns: 1fr; grid-template-rows: 42% 58%; }
  .jus-browser__menu { padding: 54px 30px; }
  .jus-browser__menu img { width: min(68%, 360px); }
  .jus-browser__menu nav { grid-template-columns: repeat(4, auto); gap: 18px; margin-top: 44px; }
  .jus-browser__content { padding: 48px 24px; }
  .jus-result { margin-top: 70px; }
}

@media (max-width: 560px) {
  .jus-hero { min-height: calc(100svh - var(--header-h)); }
  .jus-hero__wordmark { width: 88vw; }
  .jus-hero__bottom p { font-size: clamp(48px, 15.5vw, 70px); }
  .jus-construction figcaption,
  .jus-system__visual figcaption { font-size: 8px; }
  .jus-browser__screen { min-height: 610px; }
  .jus-browser__menu nav { grid-template-columns: 1fr 1fr; }
  .jus-browser__content p { font-size: clamp(48px, 13.4vw, 68px); }
}

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
}