/* =========================================================
   FABRICA DE ARTIȘTI
   MAIN STYLESHEET
========================================================= */


/* =========================================================
   RESET
========================================================= */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    width: 100%;
    overflow-x: hidden;
}

body {
    width: 100%;
    margin: 0;
    overflow-x: hidden;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background: #f3f1ec;
    color: #111111;
    line-height: 1.5;
    overflow-x: hidden;
}

body.menu-open {
    overflow: hidden;
}

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

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

button,
input,
textarea,
select {
    font: inherit;
}

button {
    cursor: pointer;
}


/* =========================================================
   VARIABLES
========================================================= */

:root {

    --bg: #f3f1ec;
    --paper: #fbfaf7;
    --dark: #111111;
    --muted: #6b6861;
    --light-muted: #96928a;
    --line: #d8d4cc;

    --accent: #ff4d2e;
    --accent-dark: #e43f22;

    --white: #ffffff;

    --container: 1380px;

    --radius-small: 4px;
    --radius-medium: 10px;
    --radius-large: 18px;

    --transition: 0.35s cubic-bezier(.22, .61, .36, 1);
}


/* =========================================================
   CONTAINER
========================================================= */

.container {
    width: min(
        calc(100% - 80px),
        var(--container)
    );

    margin: 0 auto;
}


/* =========================================================
   SECTION
========================================================= */

.section {
    padding: 150px 0;
}

.section-meta {
    display: flex;
    align-items: center;
    gap: 18px;

    color: var(--muted);

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.section-meta span:first-child {
    color: var(--dark);
}


/* =========================================================
   HEADER
========================================================= */


@media (max-width: 900px) {
    .site-header {
        padding-top: 10px;
        padding-bottom: 10px;
    }
}

.site-header {
    position: fixed;
    padding: 14px 0;
    top: 0;
    left: 0;
    right: 0;

    z-index: 1000;

    /* height: 84px; */
    height:100px;

    background: rgba(243, 241, 236, 0.88);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    border-bottom: 1px solid rgba(17, 17, 17, 0.08);
}

.header-inner {
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 40px;
}


/* LOGO */

.logo {
    display: flex;
    align-items: center;
    text-decoration: none;
}



.logo-img {
    display: block;
    width: 120px;
    height: auto;
}

@media (max-width: 900px) {
    .logo-img {
        width: 105px;
    }
}



/* .logo {
    display: inline-flex;
    flex-direction: column;

    line-height: 0.9;

    flex-shrink: 0;
} */

.logo-main {
    font-size: 20px;
    font-weight: 900;
    letter-spacing: -0.05em;
}

.logo-sub {
    margin-top: 4px;

    font-size: 8px;
    font-weight: 700;

    letter-spacing: 0.22em;
}


/* NAV */

.main-nav {
    display: flex;
    align-items: center;
    gap: 34px;

    margin-left: auto;
}

.main-nav a {
    position: relative;

    font-size: 13px;
    font-weight: 600;

    color: #33322f;

    transition: color var(--transition);
}

.main-nav a::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -7px;

    width: 0;
    height: 1px;

    background: var(--dark);

    transition: width var(--transition);
}

.main-nav a:hover::after {
    width: 100%;
}


/* HEADER CTA */

.header-cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    padding: 12px 17px;

    background: var(--dark);
    color: var(--white);

    font-size: 12px;
    font-weight: 700;

    border-radius: 100px;

    transition:
        transform var(--transition),
        background var(--transition);
}

.header-cta span {
    font-size: 15px;
}

.header-cta:hover {
    background: var(--accent);
    transform: translateY(-2px);
}


/* MOBILE TOGGLE */

.menu-toggle {
    display: none;

    width: 42px;
    height: 42px;

    border: 0;
    background: transparent;

    position: relative;
}

.menu-toggle span {
    position: absolute;

    left: 10px;

    width: 22px;
    height: 2px;

    background: var(--dark);

    transition: transform var(--transition);
}

.menu-toggle span:first-child {
    top: 16px;
}

.menu-toggle span:last-child {
    top: 24px;
}

.menu-toggle.active span:first-child {
    transform: translateY(4px) rotate(45deg);
}

.menu-toggle.active span:last-child {
    transform: translateY(-4px) rotate(-45deg);
}


/* =========================================================
   HERO
========================================================= */

.hero {
    min-height: 100vh;

    padding-top: 150px;
    padding-bottom: 100px;

    display: flex;
    align-items: center;

    overflow: hidden;
}

.hero-top {
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-bottom: 70px;
}

.hero-kicker,
.hero-year {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.13em;
}

.hero-kicker {
    display: flex;
    align-items: center;
    gap: 10px;
}

.status-dot {
    width: 7px;
    height: 7px;

    background: var(--accent);

    border-radius: 50%;

    animation: pulse 2s infinite;
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.4);
        opacity: 0.5;
    }
}


/* HERO CONTENT */

.hero-content {
    display: grid;

    grid-template-columns: minmax(0, 1fr) minmax(420px, 0.9fr);

    align-items: center;

    gap: 100px;
}

.hero-copy {
    max-width: 700px;
}

.hero h1 {
    font-size: clamp(64px, 7.5vw, 124px);

    line-height: 0.88;

    letter-spacing: -0.075em;

    font-weight: 900;
}

.hero h1 span {
    color: var(--accent);
}

.hero-description {
    max-width: 510px;

    margin-top: 45px;

    font-size: 18px;
    line-height: 1.55;

    color: var(--muted);
}

.hero-actions {
    display: flex;
    align-items: center;
    gap: 28px;

    margin-top: 40px;
}


/* BUTTONS */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 14px;

    min-height: 52px;

    padding: 0 23px;

    border-radius: 100px;

    font-size: 13px;
    font-weight: 700;

    transition:
        transform var(--transition),
        background var(--transition),
        color var(--transition),
        border-color var(--transition);
}

.btn span {
    font-size: 17px;
}

.btn-dark {
    background: var(--dark);
    color: var(--white);
}

.btn-dark:hover {
    background: var(--accent);
    transform: translateY(-3px);
}

.btn-light {
    background: var(--white);
    color: var(--dark);
}

.btn-light:hover {
    background: var(--accent);
    color: var(--white);
    transform: translateY(-3px);
}

.btn-outline {
    border: 1px solid var(--dark);
}

.btn-outline:hover {
    background: var(--dark);
    color: var(--white);
}

.btn-link {
    padding: 0;

    min-height: auto;

    border-radius: 0;
}


/* =========================================================
   HERO VISUAL
========================================================= */

.hero-visual {
    position: relative;

    min-height: 570px;
}

.visual-card {
    position: absolute;

    box-shadow:
        0 30px 70px rgba(0, 0, 0, 0.08);

    transition:
        transform 0.6s cubic-bezier(.22, .61, .36, 1);
}

.hero-visual:hover .visual-browser {
    transform: rotate(-2deg) translateY(-8px);
}

.hero-visual:hover .visual-social {
    transform: rotate(4deg) translateY(-10px);
}

.visual-browser {
    z-index: 2;

    top: 30px;
    left: 30px;

    width: 76%;

    background: var(--white);

    border-radius: 12px;

    overflow: hidden;

    transform: rotate(-3deg);
}

.browser-top {
    height: 42px;

    padding: 0 15px;

    display: flex;
    align-items: center;
    gap: 18px;

    border-bottom: 1px solid var(--line);

    color: #999;

    font-size: 9px;
}

.browser-dots {
    display: flex;
    gap: 5px;
}

.browser-dots i {
    width: 6px;
    height: 6px;

    background: #bbb;

    border-radius: 50%;
}

.browser-content {
    height: 310px;

    padding: 45px 35px;

    background:
        linear-gradient(
            135deg,
            #f8f8f6,
            #e8e7e2
        );
}

.browser-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.14em;
}

.browser-title {
    margin-top: 45px;

    font-size: clamp(28px, 3vw, 45px);

    line-height: 0.95;

    letter-spacing: -0.05em;

    font-weight: 800;
}

.browser-title strong {
    color: var(--accent);
}

.browser-line {
    width: 70px;
    height: 3px;

    margin-top: 35px;

    background: var(--dark);
}


/* SOCIAL CARD */

.visual-social {
    z-index: 3;

    right: 0;
    bottom: 40px;

    width: 45%;

    background: var(--white);

    border-radius: 10px;

    overflow: hidden;

    transform: rotate(5deg);
}

.social-header {
    height: 38px;

    padding: 0 13px;

    display: flex;
    justify-content: space-between;
    align-items: center;

    font-size: 8px;
    font-weight: 700;

    border-bottom: 1px solid var(--line);
}

.social-image {
    aspect-ratio: 1;

    background:
        linear-gradient(
            145deg,
            #1a1a1a 0%,
            #555 100%
        );

    display: flex;
    align-items: center;
    justify-content: center;

    color: white;

    font-size: 30px;
    font-weight: 900;

    letter-spacing: -0.05em;
}

.social-caption {
    padding: 14px;

    display: flex;
    flex-direction: column;
}

.social-caption strong {
    font-size: 11px;
}

.social-caption small {
    margin-top: 5px;

    color: var(--muted);

    font-size: 8px;
}



/* LOGO CARD */

.visual-logo {
    z-index: 4;

    left: 0;
    bottom: 55px;

    width: 125px;
    height: 125px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    padding: 15px;

    background: var(--accent);
    color: var(--white);

    border-radius: 50%;

    transform: rotate(-8deg);
}

.logo-circle {
    font-size: 28px;
    font-weight: 900;
    letter-spacing: -0.08em;
}

.visual-logo div {
    display: flex;
    flex-direction: column;
}

.visual-logo strong {
    font-size: 8px;
}

.visual-logo small {
    font-size: 7px;
}


/* NUMBER CARD */

.visual-number {
    z-index: 5;

    right: 17%;
    top: 0;

    width: 80px;
    height: 80px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 4px;

    background: var(--dark);
    color: white;

    border-radius: 50%;

    transform: rotate(8deg);
}

.visual-number span {
    font-size: 25px;
    font-weight: 900;
}

.visual-number small {
    font-size: 7px;
    line-height: 1.1;
}


/* =========================================================
   INTRO
========================================================= */

.intro {
    background: var(--paper);
}

.intro-grid {
    display: grid;

    grid-template-columns: 1.2fr 0.8fr;

    gap: 120px;

    margin-top: 75px;
}

.intro h2 {
    max-width: 800px;

    font-size: clamp(55px, 7vw, 110px);

    line-height: 0.9;

    letter-spacing: -0.07em;
}

.intro h2 em {
    color: var(--accent);
    font-style: normal;
}

.intro-text {
    padding-top: 10px;
}

.large-text {
    font-size: 29px;
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -0.03em;
}

.intro-text > p:not(.large-text) {
    margin-top: 28px;

    color: var(--muted);

    font-size: 16px;

    max-width: 450px;
}

.text-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    margin-top: 32px;

    font-size: 13px;
    font-weight: 700;

    border-bottom: 1px solid var(--dark);

    padding-bottom: 5px;

    transition:
        color var(--transition),
        border-color var(--transition);
}

.text-link:hover {
    color: var(--accent);
    border-color: var(--accent);
}


/* =========================================================
   SERVICES
========================================================= */

.services {
    background: var(--bg);
}

.section-heading {
    display: grid;

    grid-template-columns: 1fr 1.4fr 0.8fr;

    gap: 50px;

    align-items: end;

    margin-bottom: 80px;
}

.section-heading h2 {
    font-size: clamp(45px, 5vw, 78px);

    line-height: 0.92;

    letter-spacing: -0.065em;
}

.section-heading p {
    max-width: 340px;

    color: var(--muted);

    font-size: 15px;
}

.services-list {
    border-top: 1px solid var(--line);
}

.service-item {
    display: grid;

    grid-template-columns: 80px 1fr 50px;

    gap: 30px;

    padding: 38px 0;

    border-bottom: 1px solid var(--line);

    transition:
        padding var(--transition),
        background var(--transition);
}

.service-item:hover {
    padding-left: 20px;
    padding-right: 20px;

    background: var(--paper);
}

.service-number {
    font-size: 11px;
    font-weight: 700;

    color: var(--muted);
}

.service-main {
    display: grid;

    grid-template-columns: 0.6fr 1fr 1.2fr;

    gap: 40px;

    align-items: start;
}

.service-main h3 {
    font-size: 27px;

    line-height: 1;

    letter-spacing: -0.04em;
}

.service-main p {
    max-width: 400px;

    color: var(--muted);

    font-size: 14px;
}

.service-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.service-tags span {
    padding: 7px 10px;

    border: 1px solid var(--line);

    border-radius: 100px;

    color: var(--muted);

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.service-arrow {
    align-self: center;

    font-size: 24px;

    transition:
        transform var(--transition),
        color var(--transition);
}

.service-item:hover .service-arrow {
    transform: translate(5px, -5px);
    color: var(--accent);
}


/* =========================================================
   PROJECTS
========================================================= */

.projects {
    background: var(--dark);
    color: var(--white);
}

.projects .section-meta {
    color: #777;
}

.projects .section-meta span:first-child {
    color: var(--white);
}

.projects-intro {
    display: grid;

    grid-template-columns: 1.2fr 0.8fr;

    gap: 100px;

    align-items: end;

    margin-top: 70px;
    margin-bottom: 80px;
}

.projects-intro h2 {
    max-width: 900px;

    font-size: clamp(52px, 6vw, 96px);

    line-height: 0.9;

    letter-spacing: -0.07em;
}

.projects-intro h2 span {
    color: var(--accent);
}

.projects-intro p {
    max-width: 400px;

    color: #999;

    font-size: 15px;
}


/* PROJECT GRID */

.project-grid {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 80px 30px;
}

.project-card {
    display: block;
}

.project-image {
    position: relative;

    overflow: hidden;

    background: #252525;

    aspect-ratio: 1.45;

    border-radius: var(--radius-medium);
}

.project-card:nth-child(3),
.project-card:nth-child(6) {
    grid-column: span 2;
}

.project-card:nth-child(3) .project-image,
.project-card:nth-child(6) .project-image {
    aspect-ratio: 2.25;
}

.project-info {
    display: flex;

    justify-content: space-between;
    align-items: flex-end;

    gap: 20px;

    padding-top: 20px;
}

.project-info > div {
    display: flex;
    align-items: baseline;
    gap: 18px;
}

.project-info > div > span {
    color: #666;

    font-size: 10px;
}

.project-info h3 {
    font-size: 22px;

    letter-spacing: -0.04em;
}

.project-link {
    color: #999;

    font-size: 11px;
    font-weight: 700;

    transition: color var(--transition);
}

.project-card:hover .project-link {
    color: var(--accent);
}


/* PROJECT DEMOS */

.fake-browser {
    position: absolute;

    left: 7%;
    right: 7%;
    top: 9%;
    bottom: 0;

    background: white;

    color: var(--dark);

    border-radius: 8px 8px 0 0;

    overflow: hidden;

    transform:
        translateY(35px)
        rotate(-1deg);

    transition:
        transform 0.7s cubic-bezier(.22, .61, .36, 1);
}

.project-card:hover .fake-browser {
    transform:
        translateY(10px)
        rotate(0deg);
}

.fake-browser-top {
    height: 30px;

    border-bottom: 1px solid #ddd;

    display: flex;
    align-items: center;

    padding-left: 12px;

    gap: 5px;
}

.fake-browser-top span {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #bbb;
}

.medical-demo {
    height: calc(100% - 30px);

    padding: 50px;

    background:
        linear-gradient(
            130deg,
            #edf4f5,
            #dce8e9
        );
}

.medical-demo small,
.auto-demo small,
.horeca-demo small,
.services-demo small,
.beauty-demo small,
.ecommerce-demo small {
    font-size: 8px;
    font-weight: 700;

    letter-spacing: 0.15em;
}

.medical-demo h3 {
    margin-top: 35px;

    font-size: clamp(28px, 4vw, 60px);

    line-height: 0.9;

    letter-spacing: -0.06em;
}

.medical-demo button {
    margin-top: 30px;

    padding: 10px 17px;

    border: 0;

    background: var(--dark);
    color: white;

    border-radius: 100px;

    font-size: 9px;
}


/* AUTO */

.auto-demo {
    width: 100%;
    height: 100%;

    padding: 50px;

    background:
        linear-gradient(
            145deg,
            #1d1d1d,
            #454545
        );

    color: white;
}

.auto-demo h3 {
    margin-top: 25px;

    font-size: clamp(35px, 5vw, 75px);

    line-height: 0.85;

    letter-spacing: -0.07em;
}

.auto-circle {
    position: absolute;

    right: 12%;
    bottom: 12%;

    width: 120px;
    height: 120px;

    border: 1px solid #777;

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 10px;
    font-weight: 700;
}


/* HORECA */

.horeca-demo {
    width: 100%;
    height: 100%;

    padding: 50px;

    background:
        linear-gradient(
            135deg,
            #ddd3c5,
            #f0e9dd
        );

    color: #26231f;
}

.horeca-demo h3 {
    margin-top: 30px;

    font-size: clamp(40px, 6vw, 85px);

    line-height: 0.78;

    letter-spacing: -0.07em;
}


/* SERVICES DEMO */

.services-demo {
    width: 100%;
    height: 100%;

    padding: 50px;

    background: #eceae5;
}

.services-demo h3 {
    margin-top: 30px;

    font-size: clamp(32px, 5vw, 65px);

    line-height: 0.9;

    letter-spacing: -0.06em;
}

.services-lines {
    display: flex;
    flex-direction: column;
    gap: 10px;

    margin-top: 40px;
}

.services-lines span {
    display: block;

    height: 1px;

    background: #bbb;
}

.services-lines span:nth-child(1) {
    width: 60%;
}

.services-lines span:nth-child(2) {
    width: 40%;
}

.services-lines span:nth-child(3) {
    width: 75%;
}


/* BEAUTY */

.beauty-demo {
    width: 100%;
    height: 100%;

    padding: 50px;

    background:
        radial-gradient(
            circle at 70% 30%,
            #e8b8aa,
            #8d6860
        );

    color: white;
}

.beauty-demo h3 {
    margin-top: 30px;

    font-size: clamp(38px, 5vw, 70px);

    line-height: 0.82;

    letter-spacing: -0.07em;
}


/* ECOMMERCE */

.ecommerce-demo {
    position: relative;

    width: 100%;
    height: 100%;

    padding: 50px;

    background: #f5f3ef;
}

.ecommerce-demo h3 {
    margin-top: 30px;

    font-size: clamp(35px, 5vw, 70px);

    line-height: 0.86;

    letter-spacing: -0.07em;
}

.product-box {
    position: absolute;

    right: 10%;
    bottom: 10%;

    width: 25%;
    height: 45%;

    border: 1px solid #bbb;

    transform: rotate(8deg);
}


/* =========================================================
   FEATURED PROJECT
========================================================= */

.featured-project {
    background: var(--paper);
}

.featured-header {
    display: flex;

    justify-content: space-between;
    align-items: center;
}

.featured-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;

    color: var(--muted);
}

.featured-visual {
    margin-top: 70px;
}

.featured-browser {
    background: white;

    border: 1px solid var(--line);

    border-radius: 10px;

    overflow: hidden;

    box-shadow:
        0 40px 100px rgba(0, 0, 0, 0.08);
}

.featured-browser-top {
    height: 48px;

    display: flex;
    align-items: center;
    gap: 20px;

    padding: 0 18px;

    border-bottom: 1px solid var(--line);

    color: var(--muted);

    font-size: 9px;
}

.featured-page {
    min-height: 570px;
}

.featured-nav {
    height: 75px;

    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 0 45px;

    border-bottom: 1px solid var(--line);
}

.featured-nav strong {
    font-size: 14px;
}

.featured-nav div {
    display: flex;
    gap: 25px;

    font-size: 10px;
    color: var(--muted);
}

.featured-hero {
    display: grid;

    grid-template-columns: 1fr 0.8fr;

    gap: 50px;

    padding: 75px;
}

.featured-hero small {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.13em;
}

.featured-hero h2 {
    margin-top: 35px;

    font-size: clamp(40px, 5vw, 75px);

    line-height: 0.88;

    letter-spacing: -0.07em;
}

.featured-hero p {
    max-width: 350px;

    margin-top: 30px;

    color: var(--muted);

    font-size: 14px;
}

.featured-hero button {
    margin-top: 30px;

    border: 0;

    padding: 13px 20px;

    background: var(--dark);
    color: white;

    border-radius: 100px;

    font-size: 10px;
    font-weight: 700;
}

.featured-photo {
    min-height: 370px;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        linear-gradient(
            135deg,
            #d8e0e1,
            #9caeb0
        );

    color: white;

    font-size: 10px;
    letter-spacing: 0.15em;
}

.featured-bottom {
    display: grid;

    grid-template-columns: 1fr 0.7fr;

    gap: 120px;

    margin-top: 65px;
}

.featured-bottom h3 {
    max-width: 700px;

    font-size: 35px;

    line-height: 1;

    letter-spacing: -0.05em;
}

.featured-bottom p {
    color: var(--muted);

    font-size: 15px;
}


/* =========================================================
   DESIGN
========================================================= */

.design {
    background: #e5e1da;
}

.design-heading {
    display: grid;

    grid-template-columns: 1fr 0.6fr;

    gap: 100px;

    align-items: end;

    margin-top: 70px;
}

.design-heading h2 {
    font-size: clamp(65px, 8vw, 125px);

    line-height: 0.8;

    letter-spacing: -0.08em;
}

.design-heading h2 em {
    color: var(--accent);
    font-style: normal;
}

.design-heading p {
    color: var(--muted);

    max-width: 420px;
}


/* DESIGN GRID */

.design-grid {
    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 15px;

    margin-top: 75px;
}

.design-card {
    position: relative;

    min-height: 480px;

    padding: 18px;

    overflow: hidden;

    background: var(--paper);

    border-radius: 8px;

    transition:
        transform var(--transition);
}

.design-card:hover {
    transform: translateY(-8px);
}

.design-label {
    position: relative;
    z-index: 5;

    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.design-card-footer {
    position: absolute;

    left: 18px;
    right: 18px;
    bottom: 18px;

    display: flex;
    justify-content: space-between;

    font-size: 8px;
    font-weight: 700;
}


/* LOGO DESIGN */

.design-logo-card {
    background: var(--accent);
    color: white;
}

.big-logo {
    position: absolute;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    font-size: 150px;
    font-weight: 900;

    letter-spacing: -0.12em;
}


/* SOCIAL DESIGN */

.design-social-card {
    background: #171717;
    color: white;
}

.social-post-big {
    position: absolute;

    left: 15%;
    right: 15%;
    top: 17%;
    bottom: 15%;

    padding: 25px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    background:
        linear-gradient(
            145deg,
            #292929,
            #626262
        );

    border-radius: 4px;
}

.social-post-big small {
    font-size: 7px;
    letter-spacing: 0.12em;
}

.social-post-big strong {
    font-size: 40px;

    line-height: 0.8;

    letter-spacing: -0.07em;
}

.social-post-big span {
    font-size: 7px;
}


/* PRINT */

.design-print-card {
    background: #d7d2c9;
}

.print-stack {
    position: absolute;

    left: 15%;
    right: 15%;
    top: 18%;
    bottom: 17%;
}

.paper {
    position: absolute;

    width: 75%;
    height: 90%;

    background: white;

    box-shadow:
        0 15px 30px rgba(0, 0, 0, 0.1);
}

.paper-back {
    top: 8%;
    left: 10%;

    transform: rotate(9deg);

    background: #aaa;
}

.paper-front {
    top: 0;
    left: 0;

    padding: 20px;

    display: flex;
    flex-direction: column;

    transform: rotate(-4deg);
}

.paper-front small {
    font-size: 7px;
}

.paper-front strong {
    margin-top: auto;

    font-size: 40px;

    line-height: 0.8;

    letter-spacing: -0.08em;
}

.paper-front span {
    margin-top: 20px;

    font-size: 7px;
}


/* STORY */

.design-story-card {
    background: #171717;
    color: white;
}

.story-frame {
    position: absolute;

    left: 22%;
    right: 22%;
    top: 12%;
    bottom: 13%;

    padding: 20px;

    display: flex;
    flex-direction: column;

    justify-content: space-between;

    border: 1px solid #555;
}

.story-frame small {
    font-size: 7px;
}

.story-frame strong {
    font-size: 38px;

    line-height: 0.8;

    letter-spacing: -0.07em;
}

.story-frame span {
    font-size: 7px;
}


/* DESIGN FOOTER */

.design-footer {
    display: flex;

    justify-content: space-between;
    align-items: center;

    gap: 30px;

    margin-top: 50px;
}

.design-footer p {
    color: var(--muted);

    font-size: 14px;
}

.design-footer strong {
    color: var(--dark);
}


/* =========================================================
   SOCIAL MEDIA
========================================================= */

.social {
    background: var(--paper);
}

.social-heading {
    display: grid;

    grid-template-columns: 1fr 0.6fr;

    gap: 100px;

    align-items: end;

    margin-top: 70px;
}

.social-heading h2 {
    font-size: clamp(55px, 7vw, 105px);

    line-height: 0.86;

    letter-spacing: -0.075em;
}

.social-heading h2 span {
    color: var(--accent);
}

.social-heading p {
    color: var(--muted);
}


/* SOCIAL GRID */

.social-grid {
    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 15px;

    margin-top: 75px;
}

.social-item {
    aspect-ratio: 0.8;
}

.social-item-large {
    grid-column: span 2;
    aspect-ratio: 1.6;
}

.social-item-wide {
    grid-column: span 2;
    aspect-ratio: 1.6;
}

.fake-post,
.fake-story {
    width: 100%;
    height: 100%;

    padding: 25px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    border-radius: 7px;

    overflow: hidden;

    transition:
        transform var(--transition);
}

.social-item:hover .fake-post,
.social-item:hover .fake-story {
    transform: translateY(-7px);
}

.fake-post small,
.fake-story small {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.fake-post strong,
.fake-story strong {
    font-size: clamp(25px, 4vw, 55px);

    line-height: 0.82;

    letter-spacing: -0.07em;
}

.fake-post span {
    font-size: 8px;
}


/* POST 1 */

.post-one {
    background:
        linear-gradient(
            135deg,
            #bfc6c5,
            #596361
        );

    color: white;
}


/* POST 2 */

.post-two {
    background: var(--accent);
    color: white;
}


/* POST 3 */

.post-three {
    background: #1d1d1d;
    color: white;
}


/* STORY */

.fake-story {
    background: #ded9d0;
    color: var(--dark);
}


/* =========================================================
   MARKETING
========================================================= */

.marketing {
    background: var(--dark);
    color: white;
}

.marketing .section-meta {
    color: #777;
}

.marketing .section-meta span:first-child {
    color: white;
}

.marketing-content {
    display: grid;

    grid-template-columns: 0.9fr 1.1fr;

    gap: 100px;

    align-items: end;

    margin-top: 70px;
}

.marketing-content h2 {
    font-size: clamp(48px, 6vw, 90px);

    line-height: 0.88;

    letter-spacing: -0.075em;
}

.marketing-content h2 span {
    color: var(--accent);
}

.marketing-content p {
    max-width: 430px;

    margin-top: 30px;

    color: #999;

    font-size: 15px;
}


/* MARKETING FLOW */

.marketing-flow {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    padding-bottom: 10px;

    border-bottom: 1px solid #444;
}

.flow-item {
    display: flex;
    flex-direction: column;

    gap: 5px;
}

.flow-item span {
    color: #666;

    font-size: 8px;
}

.flow-item strong {
    font-size: 13px;
}

.flow-arrow {
    color: #555;

    font-size: 18px;
}

.flow-result strong {
    color: var(--accent);
}


/* MARKETING SERVICES */

.marketing-services {
    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 0;

    margin-top: 100px;

    border-top: 1px solid #333;
}

.marketing-services > div {
    padding: 35px 30px 0 0;

    border-right: 1px solid #333;

    margin-right: 30px;
}

.marketing-services > div:last-child {
    border-right: 0;
    margin-right: 0;
}

.marketing-services span {
    color: #666;

    font-size: 9px;
}

.marketing-services strong {
    display: block;

    margin-top: 12px;

    font-size: 18px;
}

.marketing-services p {
    margin-top: 15px;

    max-width: 240px;

    color: #888;

    font-size: 12px;
}


/* =========================================================
   MARKETPLACE
========================================================= */

.marketplace {
    background: var(--paper);
}

.marketplace-box {
    position: relative;
    overflow: hidden;

    padding: 55px;

    background: #171717;
    color: #fff;

    border-radius: 12px;
}

.marketplace-box::before {
    content: "";
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.035) 25%,
            transparent 25%
        ),
        linear-gradient(
            315deg,
            rgba(255, 255, 255, 0.025) 25%,
            transparent 25%
        );

    background-size: 32px 32px;
    pointer-events: none;
}

.marketplace-box > * {
    position: relative;
    z-index: 1;
}

.marketplace-box::after {
    content: "";
    position: absolute;

    width: 420px;
    height: 420px;

    right: -140px;
    bottom: -180px;

    border: 1px solid rgba(255, 77, 46, 0.35);
    border-radius: 50%;

    box-shadow:
        0 0 0 45px rgba(255, 77, 46, 0.04),
        0 0 0 90px rgba(255, 77, 46, 0.025);

    pointer-events: none;
}

.marketplace-top {
    display: flex;

    justify-content: space-between;
    align-items: center;
}

.marketplace .section-meta {
    color: rgba(255, 255, 255, 0.65);
}

.marketplace .section-meta span:first-child {
    color: white;
}

/* .marketplace-logos {
    display: flex;
    gap: 12px;
} */

/* LOGO EMAG / TRENDYOL */

.marketplace-logos {
    display: flex;
    align-items: center;
    gap: 28px;
}

.marketplace-logos img {
    display: block;
    width: 150px;
    height: auto;
    object-fit: contain;
}

@media (max-width: 900px) {

    .marketplace-logos {
        gap: 20px;
    }

    .marketplace-logos img {
        width: 125px;
    }

}

.marketplace-logos span {
    padding: 8px 12px;

    border: 1px solid rgba(255, 255, 255, 0.35);

    border-radius: 100px;

    font-size: 9px;
    font-weight: 700;
}

.marketplace-content {
    display: grid;

    grid-template-columns: 1.2fr 0.8fr;

    gap: 100px;

    margin-top: 100px;
}

.marketplace-content h2 {
    font-size: clamp(55px, 7vw, 105px);

    line-height: 0.84;

    letter-spacing: -0.075em;
}

.marketplace-content h2 em {
    /* color: var(--dark); */
    color: var(--accent);
    font-style: normal;
}

.marketplace-content p {
    max-width: 430px;

    font-size: 15px;

    color: rgba(255, 255, 255, 0.8);
}

.marketplace-content ul {
    margin-top: 35px;

    list-style: none;

    border-top: 1px solid rgba(255, 255, 255, 0.3);
}

.marketplace-content li {
    padding: 12px 0;

    border-bottom: 1px solid rgba(255, 255, 255, 0.3);

    font-size: 12px;
}

/* =========================================================
   MARKETPLACE BUTTON
========================================================= */

.marketplace-btn {
    display: inline-flex;
    align-items: center;
    gap: 18px;

    margin-top: 28px;
    padding: 14px 20px;

    background: var(--accent);
    color: #fff;

    text-decoration: none;
    font-size: 14px;
    font-weight: 700;

    border-radius: 6px;

    transition:
        transform 0.25s ease,
        background 0.25s ease,
        gap 0.25s ease;
}

.marketplace-btn span {
    font-size: 18px;
    line-height: 1;

    transition: transform 0.25s ease;
}

.marketplace-btn:hover {
    background: #ff6348;
    transform: translateY(-2px);
    gap: 22px;
}

.marketplace-btn:hover span {
    transform: translate(2px, -2px);
}


/* =========================================================
   CLIENTS
========================================================= */

.clients {
    background: var(--bg);
}

.clients-heading {
    display: grid;

    grid-template-columns: 1fr 0.6fr;

    gap: 100px;

    align-items: end;

    margin-top: 70px;
}

.clients-heading h2 {
    font-size: clamp(50px, 6vw, 90px);

    line-height: 0.88;

    letter-spacing: -0.07em;
}

.clients-heading h2 span {
    color: var(--accent);
}

.clients-heading p {
    max-width: 380px;

    color: var(--muted);

    font-size: 14px;
}


/* CLIENT GRID */

.clients-grid {
    display: grid;

    grid-template-columns: repeat(4, 1fr);

    margin-top: 80px;

    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
}

.client-logo {
    min-height: 150px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 30px;

    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);

    color: #777;

    font-size: 13px;
    font-weight: 800;

    letter-spacing: -0.02em;

    transition:
        background var(--transition),
        color var(--transition),
        transform var(--transition);
}

.client-logo:hover {
    background: var(--dark);
    color: white;
}


/* =========================================================
   RESULTS
========================================================= */

.results {
    background: #ddd8d0;
}

.results-intro {
    display: grid;

    grid-template-columns: 0.5fr 1fr;

    gap: 100px;
}

.results-intro h2 {
    font-size: clamp(60px, 8vw, 120px);

    line-height: 0.82;

    letter-spacing: -0.08em;
}

.results-intro h2 em {
    color: var(--accent);
    font-style: normal;
}

.results-statement {
    margin-top: 100px;

    margin-left: calc(50% + 30px);
}

.results-statement > p:first-child {
    color: var(--muted);

    font-size: 16px;
}

.statement-big {
    margin-top: 25px;

    font-size: clamp(45px, 6vw, 85px);

    line-height: 0.84;

    letter-spacing: -0.07em;

    font-weight: 900;
}

.result-equation {
    margin-top: 100px;

    padding-top: 30px;

    border-top: 1px solid #bbb;
}

.result-equation > div {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    flex-wrap: wrap;
}

.result-equation strong {
    font-size: clamp(14px, 2vw, 22px);

    letter-spacing: -0.03em;
}

.result-equation span {
    color: var(--accent);

    font-size: 25px;
}


/* =========================================================
   TEAM
========================================================= */

.team {
    background: var(--paper);
}

.team-heading {
    display: grid;

    grid-template-columns: 1fr 0.5fr;

    gap: 100px;

    margin-top: 70px;
}

.team-heading h2 {
    font-size: clamp(60px, 8vw, 115px);

    line-height: 0.82;

    letter-spacing: -0.08em;
}

.team-heading h2 span {
    color: var(--accent);
}

.team-heading p {
    max-width: 350px;

    color: var(--muted);

    align-self: end;
}


/* TEAM GRID */

.team-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 35px 15px;

    margin-top: 80px;
}

.team-member {
    min-width: 0;
}

.member-photo {
    aspect-ratio: 0.9;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #d9d5ce;

    border-radius: 7px;

    overflow: hidden;

    color: #999;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 0.1em;

    transition:
        transform var(--transition);
}

.team-member:hover .member-photo {
    transform: translateY(-5px);
}

.animal-photo {
    background: #242424;
    color: #888;
}

.member-info {
    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    margin-top: 15px;
}

.member-info h3 {
    font-size: 18px;

    line-height: 1;
}

.member-info span {
    display: block;

    margin-top: 6px;

    color: var(--muted);

    font-size: 10px;
}

.member-number {
    margin-top: 0 !important;

    color: #999 !important;
}


/* =========================================================
   ABOUT
========================================================= */

.about {
    background: var(--dark);
    color: white;
}

.about-grid {
    display: grid;

    grid-template-columns: 1fr 0.8fr;

    gap: 130px;
}

.about-title h2 {
    margin-top: 70px;

    font-size: clamp(55px, 7vw, 105px);

    line-height: 0.85;

    letter-spacing: -0.075em;
}

.about-title h2 em {
    color: var(--accent);
    font-style: normal;
}

.about-text {
    padding-top: 80px;
}

.about-large {
    font-size: 27px;

    line-height: 1.1;

    letter-spacing: -0.03em;

    font-weight: 700;
}

.about-text > p:not(.about-large) {
    margin-top: 30px;

    color: #999;

    font-size: 14px;
}

.about-details {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 25px;

    margin-top: 60px;

    padding-top: 25px;

    border-top: 1px solid #333;
}

.about-details div {
    display: flex;
    flex-direction: column;

    gap: 6px;
}

.about-details span {
    color: #666;

    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.about-details strong {
    font-size: 12px;
}


/* =========================================================
   CONTACT
========================================================= */

.contact {
    background: var(--dark);
    color: white;

    padding-top: 0;
}

.contact-box {
    padding: 60px;

    background: var(--accent);

    border-radius: 12px;
}

.contact-top,
.contact-bottom {
    display: flex;

    justify-content: space-between;
    align-items: center;

    gap: 30px;
}

.contact-top {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.14em;

    color: rgba(255, 255, 255, 0.65);
}

.contact-content {
    padding: 130px 0 100px;
}

.contact-content h2 {
    font-size: clamp(70px, 10vw, 150px);

    line-height: 0.78;

    letter-spacing: -0.085em;
}

.contact-content p {
    margin-top: 35px;

    font-size: 18px;
}

.contact-email {
    display: inline-flex;

    align-items: center;
    gap: 20px;

    margin-top: 45px;

    padding-bottom: 8px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.7);

    font-size: clamp(18px, 2vw, 30px);

    font-weight: 700;

    transition:
        border-color var(--transition),
        color var(--transition);
}

.contact-email:hover {
    color: var(--dark);
    border-color: var(--dark);
}

.contact-bottom {
    padding-top: 30px;

    border-top: 1px solid rgba(255, 255, 255, 0.3);
}

.contact-bottom p {
    max-width: 430px;

    color: rgba(255, 255, 255, 0.75);

    font-size: 12px;
}


/* =========================================================
   FOOTER
========================================================= */

.site-footer {
    background: var(--dark);
    color: white;

    padding: 0 0 30px;
}

.footer-top {
    display: grid;

    grid-template-columns: 1.5fr repeat(3, 1fr);

    gap: 50px;

    padding: 80px 0;

    border-top: 1px solid #333;
}

.logo-footer .logo-main {
    font-size: 27px;
}

.logo-footer .logo-sub {
    font-size: 9px;
}

.footer-brand p {
    margin-top: 25px;

    color: #777;

    font-size: 12px;
}

.footer-column {
    display: flex;
    flex-direction: column;

    gap: 12px;
}

.footer-column > span {
    margin-bottom: 8px;

    color: #555;

    font-size: 8px;
    font-weight: 700;

    letter-spacing: 0.13em;
}

.footer-column a {
    color: #999;

    font-size: 12px;

    transition: color var(--transition);
}

.footer-column a:hover {
    color: var(--accent);
}

.footer-bottom {
    display: grid;

    grid-template-columns: 1fr auto 1fr;

    align-items: center;

    gap: 30px;

    padding-top: 25px;

    border-top: 1px solid #333;

    color: #555;

    font-size: 8px;
}

.footer-bottom > div {
    display: flex;
    gap: 25px;
}

.footer-bottom > div a:hover {
    color: #999;
}

.footer-bottom > span:last-child {
    text-align: right;
}


/* =========================================================
   MOBILE MENU
========================================================= */

.mobile-menu {
    position: fixed;

    z-index: 900;

    inset: 0;

    background: var(--dark);
    color: white;

    display: flex;
    align-items: center;

    opacity: 0;
    visibility: hidden;

    transform: translateY(-15px);

    transition:
        opacity var(--transition),
        visibility var(--transition),
        transform var(--transition);
}

.mobile-menu.active {
    opacity: 1;
    visibility: visible;

    transform: translateY(0);
}

.mobile-menu-inner {
    width: min(
        calc(100% - 50px),
        600px
    );

    margin: auto;
}

.mobile-menu nav {
    display: flex;
    flex-direction: column;
}

.mobile-menu nav a {
    display: flex;
    align-items: baseline;
    gap: 20px;

    padding: 18px 0;

    border-bottom: 1px solid #333;

    font-size: 42px;
    font-weight: 800;

    letter-spacing: -0.06em;
}

.mobile-menu nav a span {
    color: #555;

    font-size: 9px;

    letter-spacing: 0;
}

.mobile-menu nav a:hover {
    color: var(--accent);
}

.mobile-menu-contact {
    margin-top: 50px;

    display: flex;
    flex-direction: column;

    gap: 10px;
}

.mobile-menu-contact span {
    color: #555;

    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.14em;
}

.mobile-menu-contact a {
    font-size: 14px;
}


/* =========================================================
   REVEAL ANIMATIONS
========================================================= */

.reveal {
    opacity: 0;

    transform: translateY(35px);

    transition:
        opacity 0.8s ease,
        transform 0.8s cubic-bezier(.22, .61, .36, 1);
}

.reveal.visible {
    opacity: 1;

    transform: translateY(0);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .container {
        width: min(
            calc(100% - 50px),
            var(--container)
        );
    }

    .main-nav {
        gap: 20px;
    }

    .hero-content {
        grid-template-columns: 1fr 0.8fr;

        gap: 50px;
    }

    .hero-visual {
        min-height: 470px;
    }

    .visual-browser {
        width: 82%;
    }

    .visual-social {
        width: 48%;
    }

    .intro-grid,
    .projects-intro,
    .social-heading,
    .clients-heading {
        gap: 60px;
    }

    .section-heading {
        grid-template-columns: 0.7fr 1.3fr 0.8fr;

        gap: 30px;
    }

    .service-main {
        grid-template-columns: 0.6fr 1fr;
    }

    .service-tags {
        grid-column: 2;
    }

    .design-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .design-card {
        min-height: 500px;
    }

    .team-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .about-grid {
        gap: 70px;
    }

    .footer-top {
        grid-template-columns: 1.5fr repeat(3, 1fr);
        gap: 30px;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 900px) {

    .section {
        padding: 100px 0;
    }

    .site-header {
        height: 72px;
    }

    .main-nav,
    .header-cta {
        display: none;
    }

    .menu-toggle {
        display: block;
    }


    /* HERO */

    .hero {
        min-height: auto;

        padding-top: 120px;
        padding-bottom: 80px;
    }

    .hero-top {
        margin-bottom: 50px;
    }

    .hero-content {
        display: block;
    }

    .hero h1 {
        font-size: clamp(
            64px,
            17vw,
            110px
        );
    }

    .hero-description {
        margin-top: 35px;

        font-size: 16px;
    }

    .hero-visual {
        min-height: 480px;

        margin-top: 70px;
    }

    .visual-browser {
        width: 80%;

        left: 5%;
    }

    .visual-social {
        width: 43%;

        right: 2%;
    }


    /* INTRO */

    .intro-grid {
        display: block;

        margin-top: 50px;
    }

    .intro-text {
        margin-top: 45px;
    }


    /* SERVICES */

    .section-heading {
        display: block;

        margin-bottom: 55px;
    }

    .section-heading h2 {
        margin-top: 45px;
    }

    .section-heading p {
        margin-top: 30px;
    }

    .service-item {
        grid-template-columns: 40px 1fr 30px;

        gap: 15px;

        padding: 28px 0;
    }

    .service-main {
        display: block;
    }

    .service-main h3 {
        font-size: 23px;
    }

    .service-main p {
        margin-top: 15px;
    }

    .service-tags {
        margin-top: 18px;
    }


    /* PROJECTS */

    .projects-intro {
        display: block;

        margin-top: 50px;
        margin-bottom: 55px;
    }

    .projects-intro p {
        margin-top: 30px;
    }

    .project-grid {
        grid-template-columns: 1fr;

        gap: 55px;
    }

    .project-card:nth-child(3),
    .project-card:nth-child(6) {
        grid-column: auto;
    }

    .project-card:nth-child(3) .project-image,
    .project-card:nth-child(6) .project-image {
        aspect-ratio: 1.45;
    }

    .project-image {
        aspect-ratio: 1.25;
    }

    .medical-demo,
    .auto-demo,
    .horeca-demo,
    .services-demo,
    .beauty-demo,
    .ecommerce-demo {
        padding: 30px;
    }


    /* FEATURED */

    .featured-hero {
        grid-template-columns: 1fr;

        padding: 45px;

        gap: 40px;
    }

    .featured-photo {
        min-height: 300px;
    }

    .featured-bottom {
        grid-template-columns: 1fr;

        gap: 30px;
    }


    /* DESIGN */

    .design-heading {
        display: block;

        margin-top: 50px;
    }

    .design-heading p {
        margin-top: 30px;
    }

    .design-grid {
        grid-template-columns: repeat(2, 1fr);

        margin-top: 55px;
    }

    .design-card {
        min-height: 430px;
    }

    .design-footer {
        align-items: flex-start;
        flex-direction: column;
    }


    /* SOCIAL */

    .social-heading {
        display: block;

        margin-top: 50px;
    }

    .social-heading p {
        margin-top: 30px;
    }

    .social-grid {
        grid-template-columns: repeat(2, 1fr);

        margin-top: 55px;
    }

    .social-item-large,
    .social-item-wide {
        grid-column: span 2;
    }


    /* MARKETING */

    .marketing-content {
        display: block;

        margin-top: 50px;
    }

    .marketing-content p {
        margin-top: 30px;
    }

    .marketing-flow {
        margin-top: 60px;

        overflow-x: auto;

        justify-content: flex-start;

        padding-bottom: 20px;

        min-width: 700px;
    }

    .marketing-services {
        grid-template-columns: repeat(2, 1fr);

        gap: 0;
    }

    .marketing-services > div {
        padding-bottom: 30px;

        border-bottom: 1px solid #333;
    }


    /* MARKETPLACE */

    .marketplace-box {
        padding: 35px;
    }

    .marketplace-content {
        display: block;

        margin-top: 70px;
    }

    .marketplace-content > div + div {
        margin-top: 50px;
    }


    /* CLIENTS */

    .clients-heading {
        display: block;

        margin-top: 50px;
    }

    .clients-heading p {
        margin-top: 30px;
    }

    .clients-grid {
        grid-template-columns: repeat(2, 1fr);

        margin-top: 55px;
    }

    .client-logo {
        min-height: 110px;
    }


    /* RESULTS */

    .results-intro {
        display: block;
    }

    .results-intro h2 {
        margin-top: 50px;
    }

    .results-statement {
        margin-left: 0;

        margin-top: 70px;
    }

    .result-equation {
        margin-top: 70px;
    }


    /* TEAM */

    .team-heading {
        display: block;

        margin-top: 50px;
    }

    .team-heading p {
        margin-top: 30px;
    }

    .team-grid {
        margin-top: 55px;
    }


    /* ABOUT */

    .about-grid {
        display: block;
    }

    .about-title h2 {
        margin-top: 50px;
    }

    .about-text {
        padding-top: 60px;
    }


    /* CONTACT */

    .contact-box {
        padding: 35px;
    }

    .contact-content {
        padding: 90px 0 80px;
    }

    .contact-bottom {
        align-items: flex-start;

        flex-direction: column;
    }


    /* FOOTER */

    .footer-top {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-brand {
        grid-column: span 2;

        margin-bottom: 20px;
    }

    .footer-bottom {
        grid-template-columns: 1fr;

        gap: 15px;
    }

    .footer-bottom > div {
        flex-wrap: wrap;
    }

    .footer-bottom > span:last-child {
        text-align: left;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 520px) {

    .container {
        width: calc(100% - 32px);
    }

    .section {
        padding: 80px 0;
    }

    .hero {
        padding-top: 110px;
    }

    .hero-top {
        margin-bottom: 40px;
    }

    .hero-year {
        display: none;
    }

    .hero h1 {
        font-size: 18vw;
    }

    .hero-description {
        font-size: 15px;
    }

    .hero-actions {
        align-items: flex-start;
        flex-direction: column;

        gap: 22px;
    }

    .hero-visual {
        min-height: 370px;

        margin-top: 50px;
    }

    .visual-browser {
        top: 20px;

        left: 0;

        width: 83%;
    }

    .browser-content {
        height: 230px;

        padding: 30px 25px;
    }

    .browser-title {
        margin-top: 30px;
    }

    .visual-social {
        bottom: 5px;

        width: 45%;
    }

    .visual-logo {
        width: 90px;
        height: 90px;

        bottom: 20px;
    }

    .visual-number {
        width: 60px;
        height: 60px;
    }

    .visual-number span {
        font-size: 18px;
    }


    /* TYPOGRAPHY */

    .intro h2,
    .projects-intro h2,
    .social-heading h2,
    .clients-heading h2 {
        font-size: 16vw;
    }

    .large-text {
        font-size: 23px;
    }


    /* SERVICES */

    .service-item {
        grid-template-columns: 28px 1fr;

        gap: 12px;
    }

    .service-arrow {
        display: none;
    }

    .service-main h3 {
        font-size: 21px;
    }

    .service-tags span {
        font-size: 8px;
    }


    /* PROJECTS */

    .fake-browser {
        left: 4%;
        right: 4%;
    }

    .medical-demo h3,
    .auto-demo h3,
    .horeca-demo h3,
    .services-demo h3,
    .beauty-demo h3,
    .ecommerce-demo h3 {
        font-size: 31px;
    }

    .auto-circle {
        width: 70px;
        height: 70px;
    }


    /* FEATURED */

    .featured-nav {
        padding: 0 20px;
    }

    .featured-nav div {
        display: none;
    }

    .featured-hero {
        padding: 30px;
    }


    /* DESIGN */

    .design-grid {
        grid-template-columns: 1fr;
    }

    .design-card {
        min-height: 500px;
    }


    /* SOCIAL */

    .social-grid {
        grid-template-columns: 1fr;
    }

    .social-item-large,
    .social-item-wide {
        grid-column: auto;
    }

    .social-item {
        aspect-ratio: 0.9;
    }


    /* MARKETING */

    .marketing-services {
        grid-template-columns: 1fr;
    }

    .marketing-services > div {
        border-right: 0;

        margin-right: 0;
    }


    /* MARKETPLACE */

    .marketplace-box {
        padding: 28px 22px;
    }

    .marketplace-top {
        align-items: flex-start;

        flex-direction: column;

        gap: 25px;
    }

    .marketplace-content h2 {
        font-size: 17vw;
    }


    /* CLIENTS */

    .clients-grid {
        grid-template-columns: 1fr 1fr;
    }

    .client-logo {
        min-height: 90px;

        padding: 15px;

        font-size: 10px;
    }


    /* TEAM */

    .team-grid {
        grid-template-columns: 1fr;
    }


    /* ABOUT */

    .about-details {
        grid-template-columns: 1fr;
    }


    /* CONTACT */

    .contact-box {
        padding: 25px;
    }

    .contact-content {
        padding: 75px 0;
    }

    .contact-content h2 {
        font-size: 20vw;
    }

    .contact-email {
        font-size: 17px;

        word-break: break-word;
    }


    /* FOOTER */

    .footer-top {
        grid-template-columns: 1fr;
    }

    .footer-brand {
        grid-column: auto;
    }

    .footer-bottom > div {
        flex-direction: column;

        gap: 8px;
    }


    /* MOBILE MENU */

    .mobile-menu nav a {
        font-size: 34px;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

}