:root {
  --blue: #1755d5;
}
html {
  overflow-x: hidden;
  background: #f7f5ef;
}
body {
  color: #101010;
  font-family: Inter, Arial, sans-serif;
  overflow-x: hidden;
  background-color: #f7f5ef;
  background-image: url("/assets/images/hero/paper-background.webp");
  background-position: center top;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
main {
  position: relative;
  background: transparent;
}
.su-hero-v2 {
  --hero-stage-max-width: 1536px;
  --hero-stage-width: 1536px;
  --hero-left-column: 780px;
  --hero-artboard-width: 756px;
  --hero-artboard-height: 611px;
  --hero-artboard-scale: 1;
  --hero-fluid: 1;
  position: relative;
  width: 100%;
  height: 1152px;
  min-height: 1152px;
  background: transparent;
}
.su-hero-v2::before {
  content: "";
  position: absolute;
  left: 34px;
  top: 18px;
  width: 1px;
  height: 625px;
  background:
    linear-gradient(rgba(124, 124, 123, 0.35), rgba(124, 124, 123, 0.35)) center
      top/1px 38px no-repeat,
    linear-gradient(rgba(124, 124, 123, 0.35), rgba(124, 124, 123, 0.35)) center
      38px/1px 69px no-repeat,
    linear-gradient(rgba(124, 124, 123, 0.35), rgba(124, 124, 123, 0.35)) center
      268px/1px 357px no-repeat;
  pointer-events: none;
  z-index: 1;
}
.su-hero-v2 img {
  pointer-events: none;
  user-select: none;
}

/* Hero structure: header, content column, and artboard stage. */
.su-hero-v2__header {
  position: relative;
  z-index: 30;
  display: grid;
  grid-template-columns:
    calc(280px + 70px * var(--hero-fluid)) minmax(390px, 1fr)
    auto calc(210px + 10px * var(--hero-fluid));
  align-items: center;
  column-gap: calc(18px + 8px * var(--hero-fluid));
  width: min(100%, var(--hero-stage-max-width));
  height: 90px;
  margin-inline: auto;
  padding: 0 calc(20px + 4px * var(--hero-fluid)) 0
    calc(42px + 12px * var(--hero-fluid));
}
.su-hero-v2__header::before,
.su-hero-v2__header::after {
  content: "";
  position: absolute;
  bottom: 0;
  height: 1px;
  pointer-events: none;
}
.su-hero-v2__header::before {
  left: 18px;
  width: 38px;
  background: rgba(124, 124, 123, 0.18);
}
.su-hero-v2__header::after {
  left: 56px;
  right: 18px;
  background: rgba(124, 124, 123, 0.35);
}
.su-hero-v2__brand {
  align-self: start;
  margin-top: 18px;
}
.su-hero-v2__brand b {
  display: block;
  font-size: 38px;
  line-height: 1;
}
.su-hero-v2__brand span {
  display: block;
  margin-top: 4px;
  color: #555;
  font-size: 14px;
  line-height: 1.15;
}
.su-hero-v2__header i {
  position: absolute;
  left: calc(300px + 40px * var(--hero-fluid));
  top: 14px;
  width: 1px;
  height: 62px;
  background:
    linear-gradient(rgba(124, 124, 123, 0.25), rgba(124, 124, 123, 0.25)) center
      top/.5px 38px no-repeat,
    linear-gradient(rgba(124, 124, 123, 0.35), rgba(124, 124, 123, 0.35)) center
      38px/1px 24px no-repeat;
}
.su-hero-v2__route {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 13px;
  font-family: Caveat, "Segoe Print", "Bradley Hand", cursive;
  font-size: 16px;
  line-height: 1;
  white-space: nowrap;
}
.su-hero-v2__route::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -12px;
  width: 425px;
  height: 12px;
  background: url("/assets/images/hero/one-poloska.webp") left center/contain
    no-repeat;
}
.su-hero-v2__route img {
  width: 38px;
  transform: translateY(1px);
  flex: 0 0 auto;
}
.su-hero-v2__phone {
  color: inherit;
  text-decoration: none;
  font-size: 18px;
  white-space: nowrap;
}
.su-hero-v2__header-max {
  display: flex;
  transform: translateY(3px);
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: calc(210px + 10px * var(--hero-fluid));
  height: 52px;
  color: #fff;
  background: var(--blue);
  text-decoration: none;
}
.su-hero-v2__header-max img {
  width: 34px;
}
.su-hero-v2__header-max span {
  font-size: 18px;
  font-weight: 700;
}
.su-hero-v2__layout {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: var(--hero-left-column) minmax(
      0,
      var(--hero-artboard-width)
    );
  align-items: start;
  width: min(100%, var(--hero-stage-max-width));
  margin-inline: auto;
  height: calc(var(--hero-artboard-height) * var(--hero-artboard-scale));
}
.su-hero-v2__content {
  position: relative;
  z-index: 20;
  display: flex;
  flex-direction: column;
  width: calc(570px + 106px * var(--hero-fluid));
  margin: calc(38px + 6px * var(--hero-fluid)) 0 0
    calc(72px + 30px * var(--hero-fluid));
}
.su-hero-v2__heading {
  position: relative;
  width: calc(565px + 85px * var(--hero-fluid));
  margin-top: 25px;
}
.su-hero-v2 h1 {
  margin: 0;
  width: calc(565px + 85px * var(--hero-fluid));
  font-size: calc(45px + 5px * var(--hero-fluid));
  line-height: 0.94;
  letter-spacing: -0.04em;
}
.su-hero-v2 h1 span {
  display: block;
  white-space: nowrap;
}
.su-hero-v2__underline {
  width: 250px;
  margin: -1px 0 0 -10px;
}
.su-hero-v2__description {
  width: 430px;
  margin: calc(17px + 4px * var(--hero-fluid)) 0 0;
  font-size: calc(20px + 1px * var(--hero-fluid));
  line-height: 1.34;
  white-space: nowrap;
}
.su-hero-v2__price {
  position: relative;
  width: calc(485px + 35px * var(--hero-fluid));
  height: calc(90px + 6px * var(--hero-fluid));
  margin: calc(9px + 3px * var(--hero-fluid)) 0 0
    calc(-36px - 9px * var(--hero-fluid));
  transform: rotate(-1.3deg);
  isolation: isolate;
}
.su-hero-v2__price > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
}
.su-hero-v2__price > div {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: calc(207px + 18px * var(--hero-fluid)) 1fr;
  gap: calc(17px + 5px * var(--hero-fluid));
  align-items: center;
  padding: 9px 28px 9px 50px;
}
.su-hero-v2__price > div > span:first-child {
  color: var(--blue);
  font:
    800 calc(73px + 7px * var(--hero-fluid))/0.9 Arial,
    sans-serif;
  letter-spacing: -0.055em;
  white-space: nowrap;
  transform: scaleX(0.86);
  transform-origin: left center;
}
.su-hero-v2__price > div > span:last-child {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.14;
  white-space: nowrap;
}
.su-hero-v2__price > div > span:last-child::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -17px;
  width: 198px;
  height: 16px;
  background: url("/assets/images/hero/podcherkivanie.webp") left center/contain
    no-repeat;
}
.su-hero-v2__bottom {
  display: flex;
  align-items: flex-start;
  gap: calc(100px + 73px * var(--hero-fluid));
  margin: -1px 0 0 calc(-14px - 8px * var(--hero-fluid));
}
.su-hero-v2__sticky {
  position: relative;
  width: 185px;
  flex: 0 0 185px;
  transform: rotate(-2deg);
}
.su-hero-v2__sticky::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 13px;
  bottom: 3px;
  height: 17px;
  background: rgba(45, 39, 29, 0.62);
  border-radius: 50%;
  filter: blur(7px);
  transform: rotate(-1.5deg);
  z-index: 0;
}
.su-hero-v2__sticky-paper {
  position: relative;
  width: 185px;
  z-index: 1;
  filter: drop-shadow(0 4px 3px rgba(40, 35, 25, 0.16));
}
.su-hero-v2__sticky-tape {
  position: absolute;
  left: -30px;
  top: 3px;
  width: 81px;
  transform: rotate(-29deg) scaleY(2.3);
  opacity: 0.7;
  z-index: 2;
}
.su-hero-v2__sticky p {
  position: absolute;
  left: 26px;
  top: 31px;
  width: 150px;
  margin: 0;
  font:
    500 19px/1.4 Caveat,
    "Segoe Print",
    "Bradley Hand",
    cursive;
  letter-spacing: 0.01em;
  transform: rotate(-2deg);
  z-index: 4;
}
.su-hero-v2__sticky-circle {
  position: absolute;
  left: 11px;
  top: 45px;
  width: 151px;
  z-index: 3;
}
.su-hero-v2__max {
  position: relative;
  width: 340px;
  height: 100px;
  margin-top: 5px;
  flex: 0 0 340px;
}
.su-hero-v2__max > a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 340px;
  height: 100px;
  padding: 0 40px 0 29px;
  color: #fff;
  background: var(--blue);
  text-decoration: none;
}
.su-hero-v2__max > a img {
  width: 39px;
  height: 39px;
}
.su-hero-v2__max > a span {
  display: flex;
  flex-direction: column;
}
.su-hero-v2__max b {
  font-size: 25px;
  white-space: nowrap;
}
.su-hero-v2__max small {
  margin-top: 8px;
  font-size: 15px;
}
.su-hero-v2__max > img {
  position: absolute;
  right: -40px;
  bottom: -8px;
  width: 90px;
  z-index: 25;
}
/* Hero artboard: collage objects intentionally use local absolute coordinates. */
.su-hero-v2__artboard {
  position: relative;
  width: var(--hero-artboard-width);
  height: var(--hero-artboard-height);
  margin-top: -6px;
  transform: scale(var(--hero-artboard-scale));
  transform-origin: top left;
}
.su-hero-v2__artboard > * {
  position: absolute;
}
.grid {
  left: -240px;
  top: 1px;
  width: 800px;
  opacity: 0.55;
}
.grid-paper-top {
  left: -136px;
  top: 1px;
  width: 400px;
}
.grid-paper-bottom {
  left: -121px;
  top: 426px;
  width: 348px;
}
.lines {
  left: 55px;
  top: 36px;
  width: 175px;
}
.wire {
  left: -7px;
  top: 166px;
  width: 219px;
  transform: rotate(-10deg);
  z-index: 2;
}
.orange {
  left: -22px;
  top: 345px;
  width: 165px;
  z-index: 0;
  opacity: 0.45;
}
.arrow {
  left: -125px;
  top: 227px;
  width: 110px;
}
.portrait {
  left: 0;
  top: 50px;
  width: 532px;
  z-index: 10;
  filter: drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff)
    drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff)
    drop-shadow(2px 2px 0 #fff) drop-shadow(-2px 2px 0 #fff)
    drop-shadow(2px -2px 0 #fff) drop-shadow(-2px -2px 0 #fff);
}
.blue {
  left: 253px;
  top: 0;
  width: 180px;
  transform: translateY(7px) rotate(-3deg);
}
.blue-tape {
  left: 230px;
  top: 10px;
  width: 59px;
  transform: rotate(3deg) scaleY(2.3);
  opacity: 0.9;
  z-index: 3;
}
.dash {
  left: 311px;
  top: 0;
  width: 333px;
  transform: translateY(7px) rotate(-3deg);
}
.traffic {
  left: 398px;
  top: 175px;
  width: 228px;
  transform: rotate(-2deg);
}
.services {
  left: 539px;
  top: 341px;
  width: 140px;
  font:
    15px/1.05 Caveat,
    "Segoe Print",
    "Bradley Hand",
    cursive;
  transform: rotate(2deg);
  z-index: 12;
}
.services-arrow-up {
  left: 493px;
  top: 335px;
  width: 47px;
  transform: rotate(-20deg);
  z-index: 13;
}
.services-arrow-right {
  left: 527px;
  top: 399px;
  width: 174px;
  transform: rotate(-2deg);
  z-index: 13;
}
.code {
  left: 466px;
  top: 419px;
  width: 300px;
  transform: rotate(2deg);
  z-index: 50;
}
.code-note {
  left: 436px;
  top: 522px;
  width: 265px;
  z-index: 100;
}
.code-note > img:first-child {
  width: 100%;
}
.code-note span {
  position: absolute;
  top: 15px;
  left: 28px;
  font:
    18px/1.08 Caveat,
    cursive;
}
.code-note > img:last-child {
  position: absolute;
  right: 24px;
  top: 24px;
  width: 70px;
}
.dots,
.cross {
  position: absolute;
}
.dots {
  left: 20px;
  top: 135px;
  width: 27px;
  z-index: 3;
}
.cross {
  left: 18px;
  top: 650px;
  width: 32px;
}
@media (min-width: 1280px) and (max-height: 799px) {
  .su-hero-v2 {
    height: 1152px;
    min-height: 1152px;
  }
  .su-hero-v2--short {
    height: 1152px;
    min-height: 1152px;
  }
}

/* Services structure: grid flow with per-card art-direction offsets. */
.su-services-v2 {
  position: relative;
  min-height: 0;
  margin-top: -1px;
  padding: 24px 32px 90px;
  background: transparent;
  color: #101010;
}
.su-services-v2__container {
  position: relative;
  width: min(1040px, 100%);
  margin-inline: auto;
}
.su-services-v2__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: 32px;
  row-gap: 18px;
}
.su-services-v2__card {
  position: relative;
  left: auto;
  top: auto;
  display: grid;
  grid-column: span 2;
  place-items: center;
  width: 100%;
  aspect-ratio: 1.55;
  transform: none;
  isolation: isolate;
}
.su-services-v2__sheet {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 0;
  filter: drop-shadow(0 5px 4px rgba(45, 39, 29, 0.08));
}
.su-services-v2__icon {
  position: absolute;
  left: 13%;
  top: 50%;
  width: 20%;
  max-width: 72px;
  max-height: 48%;
  transform: translateY(-50%);
  object-fit: contain;
  z-index: 1;
}
.su-services-v2__card h2 {
  position: absolute;
  left: 40%;
  right: 8%;
  top: 50%;
  bottom: auto;
  margin: 0;
  transform: translateY(-50%);
  text-align: left;
  font:
    600 clamp(21px, 1.65vw, 27px)/1.05 Caveat,
    "Segoe Print",
    "Bradley Hand",
    cursive;
  z-index: 2;
}
.su-services-v2__card--1 {
  left: auto;
  top: auto;
  width: 100%;
  transform: none;
  z-index: 4;
}
.su-services-v2__card--2 {
  left: auto;
  top: auto;
  width: 100%;
  transform: none;
  z-index: 3;
}
.su-services-v2__card--3 {
  left: auto;
  top: auto;
  width: 100%;
  transform: none;
  z-index: 4;
}
.su-services-v2__card--4 {
  left: auto;
  top: auto;
  width: 100%;
  transform: none;
  z-index: 3;
}
.su-services-v2__card--5 {
  left: auto;
  top: auto;
  width: 100%;
  transform: none;
  z-index: 4;
}
.su-services-v2__card--6 {
  left: auto;
  top: auto;
  width: 100%;
  transform: none;
  z-index: 3;
}
.su-services-v2__card--7 {
  left: auto;
  top: auto;
  width: 100%;
  transform: none;
  z-index: 3;
}
.su-services-v2__card--8 {
  left: auto;
  top: auto;
  width: 100%;
  transform: none;
  z-index: 4;
}
.su-services-v2__card--9 {
  left: auto;
  top: auto;
  width: 100%;
  transform: none;
  z-index: 3;
}
.su-services-v2__card--10 {
  left: auto;
  top: auto;
  grid-column: 2 / span 2;
  width: 100%;
  transform: none;
  z-index: 4;
}
.su-services-v2__card--11 {
  left: auto;
  top: auto;
  grid-column: 4 / span 2;
  width: 100%;
  transform: none;
  z-index: 3;
}
.su-services-v2__decor {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
/* Service arrows are artboard objects, independent of the card grid. */
.su-services-v2__arrow {
  position: absolute;
  display: block;
  object-fit: contain;
}
.su-services-v2__arrow--1 {
  left: 29%;
  top: 135px;
  width: 130px;
  transform: rotate(5deg);
  z-index: 1;
}
.su-services-v2__arrow--2 {
  left: 63%;
  top: 170px;
  width: 145px;
  transform: rotate(-8deg);
  z-index: 2;
}
.su-services-v2__arrow--3 {
  left: 13%;
  top: 420px;
  width: 150px;
  transform: rotate(15deg);
  z-index: 1;
}
.su-services-v2__arrow--4 {
  left: 47%;
  top: 455px;
  width: 125px;
  transform: rotate(-12deg);
  z-index: 2;
}
.su-services-v2__arrow--5 {
  left: 79%;
  top: 430px;
  width: 140px;
  transform: rotate(8deg);
  z-index: 1;
}
.su-services-v2__arrow--6 {
  left: 27%;
  top: 755px;
  width: 155px;
  transform: rotate(-5deg);
  z-index: 2;
}
.su-services-v2__arrow--7 {
  left: 63%;
  top: 765px;
  width: 135px;
  transform: rotate(12deg);
  z-index: 1;
}