/* ==========================================================================
   MAIN SCREEN — Desktop (1280px – 1920px)
   Content below the hero. Design reference: 1920x6836 (height excludes
   the hero, which lives on its own). Height is in rem so it scales
   proportionally with the viewport width (see global.css fluid scale).
   ========================================================================== */

.main-screen {
    position: relative;
    width: 100%;
    height: 683.6rem;
    background-color: #000000;
    overflow: hidden;
}

/* Mobile-only card carousel (see main_screen.mobile.css) — hidden here
   so it doesn't leak through on desktop. */
.main-screen-mobile__scroll-now,
.main-screen-mobile__concept-label,
.main-screen-mobile__cases,
.main-screen-mobile__heading,
.main-screen-mobile__subheading,
.main-screen-mobile__text,
.main-screen-mobile__section-bg,
.main-screen-mobile__section-line,
.main-screen-mobile__section-line-active,
.main-screen-mobile__step-label,
.main-screen-mobile__lines,
.main-screen-mobile__result,
.main-screen-mobile__statistics-link,
.main-screen-mobile__reviews-intro,
.main-screen-mobile__reviews-avatar,
.main-screen-mobile__reviews-btn,
.main-screen-mobile__heading-2,
.main-screen-mobile__greed,
.main-screen-mobile__services-banner,
.main-screen-mobile__service-card,
.main-screen-mobile__faq-heading,
.main-screen-mobile__faq-divider,
.main-screen-mobile__white-bg,
.main-screen-mobile__faq-list,
.main-screen-mobile__bottom-bg,
.main-screen-mobile__bottom-logo,
.main-screen-mobile__faq-cta-heading,
.main-screen-mobile__faq-cta-subheading,
.main-screen-mobile__faq-email,
.main-screen-mobile__faq-question-input,
.main-screen-mobile__faq-counter,
.main-screen-mobile__faq-send,
.main-screen-mobile__contact-social-icon,
.main-screen-mobile__contact-social-heading,
.main-screen-mobile__contact-social-subheading {
    display: none;
}

/* Seam patch — solid black strip right at the bottom edge, covering
   any hairline gap between main-screen and the footer that follows it. */
.main-screen__seam-patch {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0.5rem;
    background-color: #000000;
    z-index: 10;
}

/* Zero-size scroll targets — the actual anchor jump points for the
   Services/FAQ links on hero, in the main menu, and in the footer. */
.main-screen__anchor {
    position: absolute;
    left: 0;
    width: 1px;
    height: 1px;
}

.main-screen__anchor--services { top: 368.6rem; }
.main-screen__anchor--faq { top: 498.6rem; }

/* Partner logos — infinite marquee, scrolling right to left. */
.main-screen__partners {
    position: absolute;
    top: 2rem;
    left: 0;
    width: 100%;
    height: 4.8rem;
    overflow: hidden;
    z-index: 1;
}

.main-screen__partners-track {
    display: flex;
    align-items: center;
    gap: 4rem;
    width: max-content;
    animation: partners-scroll 35s linear infinite;
}

@keyframes partners-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.main-screen__partner-logo {
    flex-shrink: 0;
    height: 4.8rem;
    width: auto;
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

.main-screen__partner-logo:hover {
    opacity: 1;
}

/* Black edge fades — sit above the logo track, masking logos as they
   scroll off/on screen. */
.main-screen__fade {
    position: absolute;
    top: 2rem;
    width: 12rem;
    height: 9.6rem;
    z-index: 2;
    pointer-events: none;
}

.main-screen__fade--left {
    left: 0;
    background: linear-gradient(to right, #000000 0%, rgba(0, 0, 0, 0) 100%);
}

.main-screen__fade--right {
    right: 0;
    background: linear-gradient(to left, #000000 0%, rgba(0, 0, 0, 0) 100%);
}

/* Background wordmark, sits behind the intro/heading copy. */
.main-screen__logo {
    position: absolute;
    top: 47rem;
    left: 50%;
    transform: translateX(-50%);
    width: 182rem;
    height: 43rem;
    z-index: 0;
}

/* Left/right intro copy blocks. */
.main-screen__intro {
    position: absolute;
    top: 26rem;
    font-family: 'Atyp Display', sans-serif;
    font-size: 2rem;
    line-height: 2rem;
    letter-spacing: -0.05em;
    color: #ffffff;
    opacity: 0.5;
    white-space: pre-line;
    z-index: 1;
}

.main-screen__intro--left {
    left: 10rem;
    text-align: left;
}

.main-screen__intro--right {
    right: 10rem;
    text-align: right;
    font-weight: 500;
}

.main-screen__intro-part--medium {
    display: block;
    font-weight: 500;
}

.main-screen__intro-part--regular {
    display: block;
    font-weight: 400;
    margin-top: 2rem;
}

/* Big centered heading + subheading. */
.main-screen__heading {
    position: absolute;
    top: 71.3rem;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Atyp Display', sans-serif;
    font-weight: 600;
    font-size: 10rem;
    line-height: 10rem;
    letter-spacing: -0.08em;
    color: #ffffff;
    opacity: 1;
    white-space: nowrap;
    z-index: 1;
}

.main-screen__subheading {
    position: absolute;
    top: 81.8rem;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Atyp Display', sans-serif;
    font-weight: 500;
    font-size: 3rem;
    line-height: 3rem;
    letter-spacing: -0.05em;
    color: #ffffff;
    opacity: 0.5;
    white-space: nowrap;
    z-index: 1;
}

/* Case cards — grayscale by default, colored + logo reveal on hover. */
.main-screen__case {
    position: absolute;
    display: block;
    overflow: hidden;
    z-index: 1;
}

.main-screen__case--1 {
    left: 5rem;
    top: 90rem;
    width: 34rem;
    height: 42rem;
}

.main-screen__case--2 {
    left: 42rem;
    top: 90rem;
    width: 34rem;
    height: 42rem;
}

.main-screen__case--3 {
    left: 79rem;
    top: 90rem;
    width: 34rem;
    height: 42rem;
}

.main-screen__case--4 {
    left: 5rem;
    top: 135rem;
    width: 71rem;
    height: 42rem;
}

.main-screen__case--5 {
    left: 79rem;
    top: 135rem;
    width: 34rem;
    height: 42rem;
}

.main-screen__case--6 {
    left: 116rem;
    top: 90rem;
    width: 71rem;
    height: 87rem;
}

.main-screen__case--7 {
    left: 42rem;
    top: 180rem;
    width: 34rem;
    height: 42rem;
}

.main-screen__case--8 {
    left: 79rem;
    top: 180rem;
    width: 34rem;
    height: 42rem;
}

.main-screen__case-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%);
    transition: filter 0.3s ease;
}

.main-screen__case:hover .main-screen__case-photo {
    filter: grayscale(0%);
}

.main-screen__case-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 17rem;
    height: 14.5rem;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.main-screen__case--2 .main-screen__case-logo { width: 19.5rem; height: 16rem; }
.main-screen__case--3 .main-screen__case-logo { width: 15.4rem; height: 15.4rem; }
.main-screen__case--4 .main-screen__case-logo { width: 52rem; height: 12rem; }
.main-screen__case--5 .main-screen__case-logo { width: 17rem; height: 21.5rem; }
.main-screen__case--6 .main-screen__case-logo { width: 25.2rem; height: 14.8rem; }
.main-screen__case--7 .main-screen__case-logo { width: 22rem; height: 9rem; }
.main-screen__case--8 .main-screen__case-logo { width: 31rem; height: 20.5rem; }

.main-screen__case:hover .main-screen__case-logo {
    opacity: 1;
}

/* "More cases" tile — links to the portfolio, just shrinks slightly
   on hover (no grayscale/logo-reveal like the numbered case cards). */
.main-screen__more-cases {
    position: absolute;
    left: 116rem;
    top: 180rem;
    width: 34rem;
    height: 42rem;
    z-index: 1;
    transition: transform 0.3s ease;
}

.main-screen__more-cases:hover {
    transform: scale(0.96);
}

.main-screen__more-cases img {
    display: block;
    width: 100%;
    height: 100%;
}

/* Services section — big centered heading. Font-size, line-height and
   top all differ per language (each translation is a different length),
   same idea as the menu contact line / footer links. */
.main-screen__services-heading {
    position: absolute;
    top: 378.6rem;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Atyp Display', sans-serif;
    font-weight: 600;
    font-size: 13rem;
    line-height: 12rem;
    letter-spacing: -0.06em;
    color: #000000;
    text-align: center;
    white-space: pre;
    z-index: 1;
}

.main-screen__services-heading-part--full {
    display: block;
    opacity: 1;
}

.main-screen__services-heading-part--half {
    display: block;
    opacity: 0.5;
}

html[data-lang="uk"] .main-screen__services-heading {
    top: 377.5rem;
    font-size: 11rem;
    line-height: 10rem;
}

html[data-lang="ja"] .main-screen__services-heading {
    top: 375.5rem;
    font-size: 11rem;
    line-height: 11rem;
}

/* Services section — supporting left/right paragraphs (same size/position
   across all languages, only the text itself and its line breaks change). */
.main-screen__services-text {
    position: absolute;
    top: 428.7rem;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 500;
    font-size: 1.5rem;
    line-height: 1.5rem;
    letter-spacing: -0.05em;
    color: #000000;
    opacity: 0.5;
    white-space: pre-line;
    z-index: 1;
}

.main-screen__services-text--left {
    left: 10rem;
    text-align: left;
}

/* Animated service cards — flat gray tiles that grow taller and reveal
   a photo on hover, swapping their mark icon and lifting the title
   text to make room for it. Shared structure, one position modifier
   per card. */
.main-screen__service-card {
    position: absolute;
    top: 438.6rem;
    width: 32.5rem;
    height: 32.5rem;
    border-radius: 3.5rem;
    background-color: #e5e5e5;
    overflow: hidden;
    z-index: 1;
    transition: height 0.3s ease;
}

.main-screen__service-card:hover {
    height: 42rem;
}

.main-screen__service-card--brand { left: 10rem; }
.main-screen__service-card--social { left: 44.9rem; }
.main-screen__service-card--ads { left: 79.8rem; }
.main-screen__service-card--web { left: 114.7rem; }
.main-screen__service-card--digital { left: 149.6rem; }

.main-screen__service-card-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 0;
}

.main-screen__service-card:hover .main-screen__service-card-bg {
    opacity: 1;
}

.main-screen__service-card-mark {
    position: absolute;
    left: 2.5rem;
    width: 12.3rem;
    height: 3.5rem;
    z-index: 1;
    transition: opacity 0.3s ease;
}

.main-screen__service-card-mark--default {
    top: 2.5rem;
    opacity: 1;
}

.main-screen__service-card-mark--hover {
    bottom: 2.5rem;
    opacity: 0;
}

.main-screen__service-card:hover .main-screen__service-card-mark--default {
    opacity: 0;
}

.main-screen__service-card:hover .main-screen__service-card-mark--hover {
    opacity: 1;
}

.main-screen__service-card-title {
    position: absolute;
    left: 2.5rem;
    bottom: 2.5rem;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 500;
    font-size: 3.5rem;
    line-height: 3.5rem;
    letter-spacing: -0.05em;
    color: #000000;
    opacity: 0.7;
    z-index: 1;
    transition: color 0.3s ease, opacity 0.3s ease, bottom 0.3s ease;
}

.main-screen__service-card:hover .main-screen__service-card-title {
    bottom: 7rem;
    color: #ffffff;
    opacity: 1;
}

/* FAQ / ask-a-question zone. Positioned with "bottom" (like the rest of
   .main-screen's children, since it's position:relative with a fixed
   height, "bottom" measures cleanly from the section's bottom edge). */
.main-screen__faq-graphic {
    position: absolute;
    left: 10rem;
    bottom: 148.1rem;
    width: 50rem;
    height: 30rem;
    z-index: 1;
}

.main-screen__faq-prompt {
    position: absolute;
    left: 123rem;
    bottom: 170rem;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 500;
    font-size: 3rem;
    line-height: 3rem;
    letter-spacing: -0.05em;
    color: #ffffff;
    z-index: 1;
}

.main-screen__faq-email {
    position: absolute;
    left: 123rem;
    bottom: 164.2rem;
    width: 59rem;
    height: 4.5rem;
    display: flex;
    align-items: center;
    padding: 0 2rem;
    border: none;
    outline: none;
    border-radius: 2rem 2rem 2rem 0.5rem;
    background-color: #ffffff;
    box-shadow: inset 0 0.5rem 0.5rem rgba(0, 0, 0, 0.4);
    font-family: 'Atyp Display', sans-serif;
    font-weight: 500;
    font-size: 2rem;
    line-height: 2rem;
    letter-spacing: -0.05em;
    color: #000000;
    z-index: 1;
}

.main-screen__faq-email::placeholder {
    color: #000000;
    opacity: 0.3;
}

.main-screen__faq-question {
    position: absolute;
    left: 123rem;
    bottom: 147.9rem;
    width: 59rem;
    height: 15.4rem;
    padding: 2rem;
    resize: none;
    border: none;
    outline: none;
    border-radius: 0.5rem 2rem 2rem 2rem;
    background-color: #ffffff;
    box-shadow: inset 0 0.5rem 0.5rem rgba(0, 0, 0, 0.4);
    font-family: 'Atyp Display', sans-serif;
    font-weight: 500;
    font-size: 2rem;
    line-height: 2rem;
    letter-spacing: -0.05em;
    color: #000000;
    z-index: 1;
}

.main-screen__faq-question::placeholder {
    color: #000000;
    opacity: 0.3;
}

.main-screen__faq-counter {
    position: absolute;
    left: 177.3rem;
    bottom: 160.3rem;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 500;
    font-size: 1rem;
    line-height: 1rem;
    letter-spacing: -0.05em;
    color: #000000;
    text-align: right;
    z-index: 2;
}

.main-screen__faq-send {
    position: absolute;
    left: 176rem;
    bottom: 149.9rem;
    width: 4rem;
    height: 4rem;
    padding: 0;
    background: none;
    border: none;
    opacity: 0.3;
    cursor: pointer;
    transition: opacity 0.2s ease;
    z-index: 2;
}

.main-screen__faq-send.is-active {
    opacity: 1;
}

.main-screen__faq-send img {
    display: block;
    width: 100%;
    height: 100%;
}

/* FAQ divider line, above the question list. */
.main-screen__faq-divider {
    position: absolute;
    left: 50%;
    bottom: 141rem;
    transform: translateX(-50%);
    width: 172rem;
    height: 0.1rem;
    background-color: rgba(255, 255, 255, 0.5);
    z-index: 1;
}

/* Each question + its answer share a wrapper purely so hovering the
   button can reveal that button's own answer via CSS — no JS needed.
   All answers sit at the same spot; only the hovered one is visible. */
.main-screen__faq-btn {
    position: absolute;
    z-index: 1;
    cursor: pointer;
    user-select: none;
    transition: transform 0.2s ease;
}

.main-screen__faq-btn:hover {
    transform: scale(0.96);
}

.main-screen__faq-btn img {
    display: block;
    width: 100%;
    height: 100%;
}

.main-screen__faq-btn-text {
    position: absolute;
    left: 3rem;
    top: 2.9rem;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 400;
    font-size: 3rem;
    line-height: 3rem;
    letter-spacing: -0.05em;
    color: #ffffff;
    opacity: 0.5;
    z-index: 1;
}

.main-screen__faq-answer {
    position: absolute;
    left: 10rem;
    top: 555.6rem;
    width: 79rem;
    height: 52.5rem;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 400;
    font-size: 4rem;
    line-height: 4rem;
    letter-spacing: -0.05em;
    color: #ffffff;
    text-align: justify;
    opacity: 0;
    z-index: 1;
    transition: opacity 0.3s ease;
}

.main-screen__faq-item:hover .main-screen__faq-answer {
    opacity: 0.5;
}

.main-screen__faq-btn--1,
.main-screen__faq-btn--2,
.main-screen__faq-btn--3,
.main-screen__faq-btn--4,
.main-screen__faq-btn--5,
.main-screen__faq-btn--6 {
    left: 96rem;
    width: 86rem;
    height: 9rem;
}

.main-screen__faq-btn--1 { bottom: 119rem; }
.main-screen__faq-btn--2 { bottom: 108.5rem; }
.main-screen__faq-btn--3 { bottom: 98rem; }
.main-screen__faq-btn--4 { bottom: 87.5rem; }
.main-screen__faq-btn--5 { bottom: 77rem; }
.main-screen__faq-btn--6 { bottom: 66.5rem; }

.main-screen__faq-logo {
    position: absolute;
    left: 10rem;
    bottom: 66.3rem;
    width: 23.9rem;
    height: 5.7rem;
    z-index: 1;
}

.main-screen__services-text--right {
    right: 10rem;
    text-align: right;
}

/* Bottom-left small logo, same row as the footer links. */
.main-screen__bottom-logo {
    position: absolute;
    left: 5rem;
    top: 235rem;
    width: 21.5rem;
    height: 3rem;
    z-index: 1;
}

/* Footer nav links (Info / Services / FAQ / Contact us). Positioned by
   "right" — each language gets its own offset below, since translated
   labels are different lengths (same idea as the menu contact line). */
.main-screen__footer-link {
    position: absolute;
    top: 235rem;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 400;
    font-size: 4rem;
    line-height: 4rem;
    letter-spacing: -0.08em;
    color: #ffffff;
    opacity: 1;
    white-space: nowrap;
    transition: opacity 0.2s ease;
    z-index: 1;
}

.main-screen__footer-link:hover {
    opacity: 0.5;
}

.main-screen__footer-link--faq,
.main-screen__footer-link--contact {
    text-transform: uppercase;
}

/* English (default) positions */
.main-screen__footer-link--info { right: 61.8rem; }
.main-screen__footer-link--services { right: 44.4rem; }
.main-screen__footer-link--faq { right: 33.4rem; }
.main-screen__footer-link--contact { right: 5rem; }

/* Ukrainian positions */
html[data-lang="uk"] .main-screen__footer-link--info { right: 101.9rem; }
html[data-lang="uk"] .main-screen__footer-link--services { right: 83.7rem; }
html[data-lang="uk"] .main-screen__footer-link--faq { right: 43.5rem; }
html[data-lang="uk"] .main-screen__footer-link--contact { right: 5rem; }

/* Japanese positions */
html[data-lang="ja"] .main-screen__footer-link--info { right: 73.3rem; }
html[data-lang="ja"] .main-screen__footer-link--services { right: 54.2rem; }
html[data-lang="ja"] .main-screen__footer-link--faq { right: 31.4rem; }
html[data-lang="ja"] .main-screen__footer-link--contact { right: 5rem; }

/* Reviews section background — same treatment as hero's bg: fixed rem
   box (this isn't a first-screen viewport thing, just a section image),
   sits behind the text/button/avatars. */
.main-screen__reviews-bg {
    position: absolute;
    top: 252rem;
    left: 0;
    width: 100%;
    height: 92.2rem;
    object-fit: cover;
    object-position: center center;
    z-index: 0;
}

.main-screen__reviews-intro {
    position: absolute;
    top: 295rem;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Atyp Display', sans-serif;
    font-weight: 500;
    font-size: 3rem;
    line-height: 3rem;
    letter-spacing: -0.05em;
    color: #000000;
    opacity: 0.5;
    white-space: nowrap;
    z-index: 1;
}

.main-screen__reviews-avatar {
    position: absolute;
    top: 300rem;
    width: 9.7rem;
    height: 9.7rem;
    border-radius: 50%;
    object-fit: cover;
    z-index: 1;
}

.main-screen__reviews-avatar--1 { left: 59.6rem; }
.main-screen__reviews-avatar--2 { left: 66.1rem; }
.main-screen__reviews-avatar--3 { left: 72.6rem; }
.main-screen__reviews-avatar--4 { right: 72.6rem; }
.main-screen__reviews-avatar--5 { right: 66.1rem; }
.main-screen__reviews-avatar--6 { right: 59.6rem; }

/* Button painted last (below in DOM) so it sits visually on top of the
   avatars' inner edges, matching the reference composition. */
.main-screen__reviews-btn {
    position: absolute;
    top: 300rem;
    left: 50%;
    transform: translateX(-50%);
    width: 33.5rem;
    height: 9.7rem;
    z-index: 2;
    transition: opacity 0.2s ease;
}

.main-screen__reviews-btn:hover {
    opacity: 0.3;
}

.main-screen__reviews-btn-img {
    display: block;
    width: 100%;
    height: 100%;
}

/* White backing for the next (light) section — placed before
   .main-screen__reviews-bg in the DOM so it paints underneath it,
   overlapping on purpose to avoid any seam between the two. */
.main-screen__white-bg {
    position: absolute;
    top: 333.6rem;
    left: 0;
    width: 100%;
    height: 165rem;
    background-color: #ffffff;
    z-index: 0;
}

/* "Greed" logo marquee — same infinite-scroll technique as the partner
   logos up top, just bigger tiles and its own gap/speed. */
.main-screen__greed {
    position: absolute;
    top: 327rem;
    left: 0;
    width: 100%;
    height: 32.5rem;
    overflow: hidden;
    z-index: 1;
}

.main-screen__greed-track {
    display: flex;
    align-items: center;
    gap: 2rem;
    width: max-content;
    animation: greed-scroll 40s linear infinite;
}

@keyframes greed-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.main-screen__greed-logo {
    flex-shrink: 0;
    width: 26rem;
    height: 32.5rem;
}

.main-screen__greed-fade {
    position: absolute;
    top: 327rem;
    width: 12rem;
    height: 32.5rem;
    z-index: 2;
    pointer-events: none;
}

.main-screen__greed-fade--left {
    left: 0;
    background: linear-gradient(to right, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
}

.main-screen__greed-fade--right {
    right: 0;
    background: linear-gradient(to left, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
}