:root {
  --scale: calc(100vw / 1280);
  --grid-columns: 12;
  --grid-margin: calc(var(--scale) * 10);
  --grid-gap: calc(var(--scale) * 20);
  --color-bg-dark: #1a1a1a;
  --color-bg-light: #a8a8a8;
  --color-text-primary: #ff4757;
  --color-text-dark: #1a1a1a;
  --color-text-light: #ffffff;
  --color-border: #ffffff;
  --gradient-hero-bg: linear-gradient(180deg, #1D1E20 0%, #181A1C 25.01%, #1E1F23 37.52%, #1D1F22 43.77%, #28282A 50.03%, #484242 56.28%, #776D6E 62.53%, #999497 68.79%, #AAA9AE 75.04%, #B0B4BA 87.55%, #B9BFC4 100.05%);
  --gradient-text: linear-gradient(180deg, #FE647C 0%, #FD0507 100%);
  --color-overlay-creative: rgba(198, 150, 166, 0.7);
  --color-overlay-many: rgba(129, 164, 214, 0.7);
  --color-overlay-fast: rgba(198, 177, 150, 0.7);
  --font-heading: "Noto Serif", serif;
  --font-body: "JetBrains Mono", monospace;
  --weight-regular: 400;
  --weight-bold: 700;
  --header-height: calc(var(--scale) * 76);
  --hero-height: 100vh;
}

@media (max-width: 768px) {
  :root {
    --scale: calc(100vw / 375);
  }
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-body);
  font-size: calc(var(--scale) * 14);
  line-height: 1;
  color: var(--color-text-dark);
  background: var(--color-bg-light);
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

a {
  text-decoration: none;
  color: inherit;
}

.btn {
  display: inline-block;
  padding: calc(var(--scale) * 10) calc(var(--scale) * 20);
  font-size: calc(var(--scale) * 14);
  font-weight: var(--weight-regular);
  border: calc(var(--scale) * 1) solid var(--color-border);
  background: transparent;
  color: var(--color-text-light);
  transition: all 0.3s ease;
  white-space: nowrap;
}
.btn:hover {
  background: var(--color-text-light);
  color: var(--color-text-dark);
}
.btn--hero {
  background: var(--color-text-light);
  color: var(--color-text-dark);
  border-color: var(--color-text-light);
}
.btn--hero:hover {
  background: transparent;
  color: var(--color-text-light);
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height);
  z-index: 1000;
  mix-blend-mode: difference;
}
.header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 0 var(--grid-margin);
  max-width: none;
}
.header__logo {
  position: absolute;
  left: var(--grid-margin);
  top: calc(var(--scale) * 28);
}
.header__logo svg {
  width: calc(var(--scale) * 129);
  height: calc(var(--scale) * 22);
}
.header__nav {
  display: flex;
  align-items: center;
  gap: calc(var(--scale) * 44);
  position: absolute;
  left: calc(var(--scale) * 543);
  top: calc(var(--scale) * 29);
}
.header__nav .nav-link {
  font-size: calc(var(--scale) * 14);
  color: var(--color-text-light);
  transition: opacity 0.3s ease;
}
.header__nav .nav-link:hover {
  opacity: 0.7;
}
.header .btn--header {
  position: absolute;
  right: var(--grid-margin);
  top: calc(var(--scale) * 20);
}
.header__burger {
  display: none;
  position: absolute;
  right: calc(var(--grid-margin) + var(--scale) * 140);
  top: calc(var(--scale) * 22);
  width: calc(var(--scale) * 32);
  height: calc(var(--scale) * 24);
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.header__burger span {
  display: block;
  height: calc(var(--scale) * 2);
  background: #fff;
  margin-bottom: calc(var(--scale) * 6);
  width: 100%;
}

.hero {
  height: var(--hero-height);
  position: relative;
  background: var(--gradient-hero-bg);
  display: flex;
  flex-direction: column;
}
.hero .container {
  flex: 1;
  display: flex;
  flex-direction: column;
  max-width: none;
  padding: 0;
}
.hero__content {
  flex: 1;
  display: flex;
  gap: calc(var(--scale) * 213);
  padding: calc(var(--scale) * 102) var(--grid-margin) 0;
  position: relative;
}
.hero__image {
  width: calc(var(--scale) * 320);
  height: calc(var(--scale) * 320);
  flex-shrink: 0;
}
.hero__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__text {
  flex: 1;
  max-width: calc(var(--scale) * 620);
}
.hero__title {
  font-family: var(--font-heading);
  font-size: calc(var(--scale) * 64);
  font-weight: var(--weight-bold);
  font-variation-settings: "wdth" 62.5;
  line-height: 1;
  margin-bottom: calc(var(--scale) * 44);
  display: flex;
  flex-direction: column;
  gap: 0;
}
.hero__title-line {
  display: block;
  background: var(--gradient-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.tagline__wrapper {
  position: absolute;
  bottom: calc(var(--scale) * 20);
  left: var(--grid-margin);
  right: var(--grid-margin);
  display: flex;
  gap: calc(var(--scale) * 233);
}

.tagline__item {
  font-family: var(--font-body);
  font-size: calc(var(--scale) * 14);
  line-height: 1.3;
  color: var(--color-text-light);
  mix-blend-mode: difference;
}
.tagline__item--short {
  width: calc(var(--scale) * 300);
}
.tagline__item--long {
  flex: 1;
  max-width: calc(var(--scale) * 299);
}
.tagline__item p {
  margin: 0;
}

.tagline {
  background: var(--color-bg-light);
  position: relative;
  height: calc(var(--scale) * 91);
}
.tagline .tagline__wrapper {
  position: static;
  height: 100%;
  align-items: center;
}

.triptych {
  background: var(--color-bg-dark);
}
.triptych__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.triptych__card {
  height: calc(var(--scale) * 660);
  padding: calc(var(--scale) * 460) var(--grid-margin) calc(var(--scale) * 44);
  display: flex;
  flex-direction: column;
  gap: calc(var(--scale) * 10);
  position: relative;
  background: var(--gradient-hero-bg);
  overflow: hidden;
}
.triptych__card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.triptych__card--1::before {
  background: var(--color-overlay-creative);
}
.triptych__card--2::before {
  background: var(--color-overlay-many);
}
.triptych__card--3::before {
  background: var(--color-overlay-fast);
}
.triptych__image {
  position: absolute;
  left: calc(var(--scale) * -37);
  top: calc(var(--scale) * -39);
  width: calc(var(--scale) * 500);
  height: calc(var(--scale) * 525);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  z-index: 1;
}
.triptych__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.triptych__content {
  display: flex;
  flex-direction: column;
  gap: calc(var(--scale) * 22);
  align-items: flex-end;
  position: relative;
  z-index: 2;
  width: 100%;
}
.triptych__title {
  font-family: var(--font-heading);
  font-size: calc(var(--scale) * 64);
  font-weight: var(--weight-bold);
  font-variation-settings: "wdth" 62.5;
  line-height: 1;
  background: var(--gradient-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 0;
  width: 100%;
}
.triptych__text {
  font-family: var(--font-body);
  font-size: calc(var(--scale) * 14);
  line-height: 1.4;
  width: calc(var(--scale) * 300);
  height: calc(var(--scale) * 72);
  mix-blend-mode: difference;
}

@media (max-width: 768px) {
  .header__nav {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    top: var(--header-height);
    flex-direction: column;
    gap: calc(var(--scale) * 20);
    background: rgba(0, 0, 0, 0.95);
    padding: calc(var(--scale) * 30) var(--grid-margin);
    z-index: 999;
    align-items: center;
  }
  .header__burger {
    display: block;
    right: var(--grid-margin);
    top: 50%;
    transform: translateY(-50%);
    z-index: 1001;
  }
  .header__logo {
    top: 50%;
    transform: translateY(-50%);
  }
  .header--open .header__nav {
    display: flex;
  }
  .header--open .header__burger span:nth-child(2) {
    opacity: 0;
  }
  .header .btn--header {
    display: none;
  }
  .hero {
    height: auto;
    min-height: auto;
  }
  .hero__content {
    padding: calc(var(--scale) * 77) var(--grid-margin) 0;
    display: flex;
    flex-direction: column;
    gap: calc(var(--scale) * 44);
  }
  .hero__image {
    width: calc(var(--scale) * 168);
    height: calc(var(--scale) * 168);
    flex-shrink: 0;
  }
  .hero .tagline__wrapper {
    position: static;
    display: flex;
    flex-direction: row;
    gap: calc(var(--scale) * 20);
    padding-top: calc(var(--scale) * 44);
    padding-bottom: calc(var(--scale) * 20);
  }
  .hero__text {
    width: 100%;
    max-width: 100%;
  }
  .hero__title {
    font-size: calc(var(--scale) * 36);
    line-height: 1;
    margin-bottom: calc(var(--scale) * 44);
  }
  .tagline__wrapper {
    flex-direction: row;
    gap: calc(var(--scale) * 20);
  }
  .tagline__item--short, .tagline__item--long {
    width: auto;
    flex: 1;
    min-width: 0;
  }
  .btn--hero {
    width: calc(var(--scale) * 355);
    height: calc(var(--scale) * 50);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(var(--scale) * 9) calc(var(--scale) * 22);
    font-size: calc(var(--scale) * 14);
    border-width: calc(var(--scale) * 1);
  }
  .triptych__grid {
    grid-template-columns: 1fr;
  }
  .triptych__card {
    height: calc(var(--scale) * 546);
    padding: 0;
    display: block;
    position: relative;
    overflow: hidden;
  }
  .triptych__image {
    position: absolute;
    left: calc(var(--scale) * -37);
    top: calc(var(--scale) * 115);
    width: calc(var(--scale) * 445.714);
    height: calc(var(--scale) * 468);
    margin: 0;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
  }
  .triptych__image img {
    height: auto;
    max-height: 100%;
    width: 100%;
    object-fit: contain;
  }
  .triptych__content {
    position: absolute;
    top: calc(var(--scale) * 33);
    left: var(--grid-margin);
    right: var(--grid-margin);
    width: calc(100% - var(--grid-margin) * 2);
    display: flex;
    flex-direction: column;
    gap: calc(var(--scale) * 22);
    align-items: flex-end;
    z-index: 1;
  }
  .triptych__title {
    font-size: calc(var(--scale) * 64);
    line-height: 1;
    margin-bottom: 0;
    width: 100%;
    text-align: left;
    grid-column: auto;
  }
  .triptych__text {
    font-size: calc(var(--scale) * 14);
    line-height: 1.3;
    max-width: calc(var(--scale) * 300);
    width: 100%;
    grid-column: auto;
    color: var(--color-text-light);
    mix-blend-mode: difference;
  }
}

/*# sourceMappingURL=styles.css.map */