:root {
    --charcoal: #1c2329;
    --charcoal-dark: #151b20;
    --steel: #252e35;
    --steel-light: #303a42;

    --navy: #102d48;
    --blue: #1685c1;
    --blue-hover: #2198d3;

    --silver: #aeb7bd;
    --light: #e1e5e7;
    --light-soft: #d7dcdf;
    --off-white: #edf0f1;

    --text-dark: #1b252d;
    --text-light: #e8ecef;
    --muted: #9ca6ad;

    --border-dark: #3a454d;
    --border-light: #c4cbd0;

    --max-width: 1240px;
}


/* RESET */

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background: var(--charcoal);
    color: var(--text-light);
    overflow-x: hidden;
}

body.menu-open {
    overflow: hidden;
}

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

a {
    color: inherit;
}


/* HEADER */

header {
    position: fixed;
    top: 0;
    left: 0;

    width: 100%;
    z-index: 1000;

    background: rgba(28, 35, 41, 0.96);
    border-bottom: 1px solid rgba(255,255,255,0.08);

    transition: 0.3s;
}

header.scrolled {
    background: rgba(21, 27, 32, 0.98);
    box-shadow: 0 8px 30px rgba(0,0,0,0.18);
}

.navbar {
    width: 100%;
    max-width: var(--max-width);

    height: 88px;

    margin: auto;
    padding: 0 30px;

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

.logo {
    display: flex;
    align-items: center;

    position: relative;
    z-index: 1002;

    text-decoration: none;
}

.logo img {
    width: 150px;
    max-height: 68px;

    object-fit: contain;

    background: transparent;
    padding: 0;
}


/* NAV */

.nav-links {
    display: flex;
    align-items: center;
    gap: 29px;

    list-style: none;
}

.nav-links a {
    position: relative;

    padding: 34px 0;

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

    color: #c7ced3;

    text-decoration: none;

    transition: 0.25s;
}

.nav-links a:hover {
    color: #fff;
}

.nav-links a:not(.nav-contact)::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: 23px;

    width: 0;
    height: 2px;

    background: var(--blue);

    transition: 0.25s;
}

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

.nav-links .nav-contact {
    padding: 12px 19px;

    color: #fff;
    background: var(--blue);
}

.nav-links .nav-contact:hover {
    background: var(--blue-hover);
}


/* MOBILE MENU BUTTON */

.menu-button {
    display: none;

    position: relative;
    z-index: 1002;

    width: 31px;
    height: 25px;

    border: 0;
    background: transparent;

    cursor: pointer;
}

.menu-button span {
    position: absolute;
    left: 0;

    width: 100%;
    height: 2px;

    background: #fff;

    transition: 0.3s;
}

.menu-button span:nth-child(1) {
    top: 2px;
}

.menu-button span:nth-child(2) {
    top: 11px;
}

.menu-button span:nth-child(3) {
    top: 20px;
}

.menu-button.active span:nth-child(1) {
    top: 11px;
    transform: rotate(45deg);
}

.menu-button.active span:nth-child(2) {
    opacity: 0;
}

.menu-button.active span:nth-child(3) {
    top: 11px;
    transform: rotate(-45deg);
}


/* HERO */

.hero {
    min-height: 100vh;

    padding: 150px 30px 80px;

    display: flex;
    align-items: center;

    background: var(--charcoal);

    overflow: hidden;
}

.hero-container {
    width: 100%;
    max-width: var(--max-width);

    margin: auto;

    display: grid;
    grid-template-columns: 0.92fr 1.08fr;

    align-items: center;

    gap: 70px;
}

.hero-content {
    position: relative;
    z-index: 2;
}

.eyebrow {
    display: flex;
    align-items: center;

    gap: 14px;

    margin-bottom: 27px;

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

    letter-spacing: 3px;

    color: #63b7df;
}

.eyebrow::before {
    content: "";

    width: 36px;
    height: 2px;

    background: var(--blue);
}

.hero h1 {
    margin-bottom: 28px;

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

    line-height: 0.99;

    letter-spacing: -4px;

    color: var(--text-light);
}

.hero h1 span {
    color: #61b5dd;
}

.hero-content > p {
    max-width: 530px;

    margin-bottom: 34px;

    font-size: 17px;
    line-height: 1.75;

    color: var(--silver);
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 12px;
}


/* BUTTONS */

.button {
    min-height: 53px;

    padding: 0 25px;

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

    gap: 22px;

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

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

    text-decoration: none;

    transition: 0.25s;
}

.button.primary {
    color: #fff;

    background: var(--blue);
    border-color: var(--blue);
}

.button.primary:hover {
    background: var(--blue-hover);
    border-color: var(--blue-hover);
}

.button.secondary {
    color: var(--text-light);

    background: transparent;

    border-color: #53606a;
}

.button.secondary:hover {
    color: var(--charcoal);

    background: var(--text-light);

    border-color: var(--text-light);
}


/* HERO FEATURES */

.hero-features {
    max-width: 560px;

    margin-top: 53px;
    padding-top: 25px;

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

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

.hero-features div {
    padding-right: 20px;
}

.hero-features strong {
    display: block;

    margin-bottom: 7px;

    font-size: 26px;

    color: #fff;
}

.hero-features span {
    display: block;

    max-width: 105px;

    font-size: 10px;
    line-height: 1.45;

    letter-spacing: 1px;

    color: #8f9aa2;
}


/* HERO IMAGES */

.hero-visual {
    position: relative;

    min-height: 590px;
}

.hero-image-main {
    position: absolute;

    top: 0;
    right: 0;

    width: 88%;
    height: 505px;

    overflow: hidden;

    border: 1px solid #414c54;
}

.hero-image-main::after {
    content: "";

    position: absolute;
    inset: 0;

    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);

    pointer-events: none;
}

.hero-image-main img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.hero-image-secondary {
    position: absolute;

    left: 0;
    bottom: 0;

    width: 46%;
    height: 255px;

    padding: 7px;

    background: var(--steel-light);

    border: 1px solid #4a555d;
}

.hero-image-secondary img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.hero-badge {
    position: absolute;
    right: 22px;
    bottom: 28px;

    width: 190px;
    height: auto;

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

    padding: 16px 20px;

    background: #000;
    border: 1px solid rgba(255, 255, 255, 0.10);

    z-index: 5;
}

.hero-badge img {
    display: block;

    width: 100%;
    height: auto;

    object-fit: contain;

    background: transparent;
    padding: 0;

    filter: none;

    transition: transform 0.3s ease;
}

.hero-badge:hover img {
    transform: scale(1.03);
}


/* BRAND STRIP */

.brand-strip {
    color: #fff;

    background: var(--steel);
    border-top: 1px solid var(--border-dark);
    border-bottom: 1px solid var(--border-dark);
}

.brand-strip-inner {
    max-width: var(--max-width);
    min-height: 73px;

    margin: auto;
    padding: 0 30px;

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

    gap: 20px;
}

.brand-strip span {
    font-size: 10px;
    font-weight: 700;

    letter-spacing: 2px;

    color: #c9d0d5;
}

.brand-strip i {
    width: 4px;
    height: 4px;

    flex-shrink: 0;

    border-radius: 50%;

    background: var(--blue);
}


/* GENERAL */

.section {
    width: 100%;
    max-width: var(--max-width);

    margin: auto;
    padding: 115px 30px;
}

.section-top {
    padding-bottom: 27px;

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

    gap: 40px;

    border-bottom: 1px solid currentColor;

    border-color: rgba(100,110,118,0.25);
}

.section-top > div {
    display: flex;
    align-items: center;

    gap: 17px;
}

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

    color: var(--blue);
}

.section-label {
    font-size: 10px;
    font-weight: 700;

    letter-spacing: 3px;
}

.section-top > p {
    max-width: 260px;

    font-size: 13px;
    line-height: 1.6;

    text-align: right;

    opacity: 0.6;
}


/* ABOUT — METALLIC LIGHT */

.about-section {
    max-width: none;

    padding-left: max(30px, calc((100vw - var(--max-width)) / 2 + 30px));
    padding-right: max(30px, calc((100vw - var(--max-width)) / 2 + 30px));

    color: var(--text-dark);

    background: var(--light);
}

.about-section .section-top {
    max-width: calc(var(--max-width) - 60px);
    margin: auto;
}

.about-grid {
    width: 100%;
    max-width: calc(var(--max-width) - 60px);

    margin: auto;

    padding-top: 65px;

    display: grid;
    grid-template-columns: 1.05fr 0.95fr;

    gap: 100px;
}

.about-title h2 {
    font-size: clamp(42px, 5vw, 65px);

    line-height: 1.08;
    letter-spacing: -3px;

    color: var(--navy);
}

.about-title h2 span {
    display: block;

    margin-top: 8px;

    color: var(--blue-dark);
}

.about-content {
    padding-top: 8px;
}

.about-content p {
    margin-bottom: 25px;

    font-size: 15px;
    line-height: 1.9;

    color: #536069;
}

.about-content .lead {
    padding-bottom: 25px;

    border-bottom: 1px solid #bdc5ca;

    font-size: 19px;
    line-height: 1.75;

    color: #222d35;
}


/* SERVICES */

.services-section {
    color: var(--text-light);

    background: var(--steel);
}

.services-section .section-label {
    color: #d6dce0;
}

.services-section .section-top {
    border-color: var(--border-dark);
}

.section-heading {
    padding: 65px 0 50px;

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

    align-items: end;

    gap: 70px;
}

.section-heading h2 {
    font-size: clamp(48px, 6vw, 72px);

    line-height: 1;

    letter-spacing: -4px;

    color: #fff;
}

.section-heading h2 span {
    display: block;

    color: #64b8df;
}

.section-heading p {
    font-size: 15px;
    line-height: 1.8;

    color: var(--silver);
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

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

.service-card {
    position: relative;

    min-height: 325px;

    padding: 30px;

    background: var(--steel);

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

    transition: 0.3s;
}

.service-card:hover {
    z-index: 2;

    transform: translateY(-6px);

    background: var(--steel-light);
}

.service-number {
    margin-bottom: 50px;

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

    color: #5eb3dc;
}

.service-icon {
    position: absolute;

    top: 25px;
    right: 27px;

    width: 37px;
    height: 37px;

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

    border: 1px solid #4c5860;

    color: #cbd3d8;

    transition: 0.25s;
}

.service-card:hover .service-icon {
    color: #fff;

    background: var(--blue);

    border-color: var(--blue);
}

.service-card h3 {
    min-height: 60px;

    margin-bottom: 25px;

    font-size: 23px;
    line-height: 1.25;

    color: #f1f3f4;
}

.service-card p {
    font-size: 13px;
    line-height: 1.75;

    color: #a4aeb5;
}


/* PRODUCTS */

.products-section {
    color: var(--text-light);
    background: var(--charcoal);
}

.products-section .section-label {
    color: #dce1e4;
}

.products-heading {
    padding: 62px 0 42px;

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

    gap: 50px;
}

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

    letter-spacing: -4px;

    color: #f0f3f4;
}

.products-heading p {
    max-width: 390px;

    padding-bottom: 10px;

    font-size: 14px;
    line-height: 1.7;

    color: #9da7ae;
}

.products-grid {
    display: grid;
    grid-template-columns: 1.25fr 0.75fr;

    gap: 22px;
}

.product {
    background: var(--steel);
    border: 1px solid var(--border-dark);
}

.product-image {
    height: 430px;

    overflow: hidden;

    background: var(--steel-light);
}

.product-large .product-image {
    height: 520px;
}

.product-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 0.55s;
}

.product:hover .product-image img {
    transform: scale(1.035);
}

.product-bottom {
    min-height: 110px;

    padding: 22px 25px;

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

.product-bottom span {
    display: block;

    margin-bottom: 7px;

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

    letter-spacing: 2px;

    color: #60b6df;
}

.product-bottom h3 {
    font-size: 26px;

    color: #fff;
}

.product-arrow {
    width: 45px;
    height: 45px;

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

    border: 1px solid #4a555d;

    color: #d7dde1;

    transition: 0.25s;
}

.product:hover .product-arrow {
    color: #fff;

    background: var(--blue);

    border-color: var(--blue);
}


/* MACHINE PARK */

.machine-section {
    color: #fff;

    background: var(--navy);
}

.machine-heading {
    padding-bottom: 65px;

    display: grid;
    grid-template-columns: 1fr 0.7fr;

    align-items: end;

    gap: 80px;
}

.light-label {
    display: block;

    margin-bottom: 24px;

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

    letter-spacing: 3px;

    color: #7ac5e8;
}

.machine-heading h2 {
    font-size: clamp(52px, 6vw, 75px);

    line-height: 1;
    letter-spacing: -4px;
}

.machine-heading h2 span {
    display: block;

    color: #6bbce2;
}

.machine-heading p {
    padding-bottom: 5px;

    font-size: 14px;
    line-height: 1.8;

    color: #b4c4d0;
}

.machine-list {
    border-top: 1px solid rgba(255,255,255,0.17);
}

.machine-item {
    min-height: 103px;

    display: grid;
    grid-template-columns: 80px 1fr 160px;

    align-items: center;

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

    transition: 0.3s;
}

.machine-item:hover {
    padding: 0 20px;

    background: rgba(255,255,255,0.05);
}

.machine-index {
    font-size: 10px;

    color: #6bbce2;
}

.machine-item h3 {
    font-size: clamp(19px, 2.4vw, 28px);

    font-weight: 500;
}

.machine-type {
    font-size: 9px;

    letter-spacing: 2px;

    text-align: right;

    color: #8fa5b5;
}


/* SECTORS — LIGHT METAL */

.sectors-section {
    max-width: none;

    padding-left: max(30px, calc((100vw - var(--max-width)) / 2 + 30px));
    padding-right: max(30px, calc((100vw - var(--max-width)) / 2 + 30px));

    color: var(--text-dark);

    background: var(--light-soft);
}

.sectors-section .section-top,
.sectors-layout {
    width: 100%;
    max-width: calc(var(--max-width) - 60px);

    margin-left: auto;
    margin-right: auto;
}

.sectors-layout {
    padding-top: 65px;

    display: grid;
    grid-template-columns: 0.9fr 1.1fr;

    gap: 100px;
}

.sectors-title h2 {
    font-size: clamp(47px, 5.5vw, 70px);

    line-height: 1;
    letter-spacing: -4px;

    color: var(--navy);
}

.sectors-title h2 span {
    display: block;

    color: var(--blue-dark);
}

.sector-list {
    border-top: 1px solid #bac3c8;
}

.sector-item {
    min-height: 100px;

    padding: 0 5px;

    display: grid;
    grid-template-columns: 65px 1fr;

    align-items: center;

    border-bottom: 1px solid #bac3c8;

    transition: 0.25s;
}

.sector-item:hover {
    padding-left: 18px;

    background: rgba(255,255,255,0.3);
}

.sector-item span {
    font-size: 10px;
    font-weight: 700;

    color: var(--blue-dark);
}

.sector-item h3 {
    font-size: 23px;
    font-weight: 500;

    color: var(--navy);
}


/* STATEMENT */

.statement-section {
    padding: 95px 30px;

    color: var(--text-light);

    background: var(--steel);
}

.statement-inner {
    max-width: var(--max-width);

    margin: auto;

    display: grid;
    grid-template-columns: 210px 1fr;

    align-items: center;

    gap: 80px;
}

.statement-inner img {
    width: 100%;

    padding: 0;

    background: transparent;

    object-fit: contain;

    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.15));
}

.statement-inner > div > span {
    display: block;

    margin-bottom: 20px;

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

    letter-spacing: 3px;

    color: #68b9df;
}

.statement-inner h2 {
    max-width: 800px;

    font-size: clamp(36px, 4.5vw, 58px);

    line-height: 1.15;
    letter-spacing: -2px;

    color: #e9edef;
}

.statement-inner h2 strong {
    display: block;

    color: #6bbce2;
}


/* CONTACT */

.contact-section {
    color: var(--text-light);

    background: var(--charcoal);
}

.contact-section .section-label {
    color: #d6dde1;
}

.contact-layout {
    padding-top: 65px;

    display: grid;
    grid-template-columns: 1.1fr 0.9fr;

    gap: 100px;
}

.contact-main h2 {
    max-width: 650px;

    margin-bottom: 45px;

    font-size: clamp(45px, 5.5vw, 68px);

    line-height: 1.03;
    letter-spacing: -4px;

    color: #edf0f2;
}

.contact-main h2 span {
    display: block;

    color: #66b9e0;
}

.contact-phone {
    display: block;

    width: fit-content;

    margin-bottom: 15px;

    font-size: clamp(25px, 3vw, 38px);
    font-weight: 700;

    color: #fff;

    text-decoration: none;
}

.contact-mail {
    display: block;

    width: fit-content;

    margin-bottom: 38px;

    font-size: 16px;

    color: #6abbe1;

    text-decoration: none;
}

.contact-phone:hover,
.contact-mail:hover {
    text-decoration: underline;
}

.contact-buttons {
    display: flex;
    flex-wrap: wrap;

    gap: 10px;
}

.contact-details {
    border-top: 1px solid var(--border-dark);
}

.contact-detail {
    padding: 28px 0;

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

.contact-detail > span {
    display: block;

    margin-bottom: 13px;

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

    letter-spacing: 2px;

    color: #62b5dd;
}

.contact-detail p {
    font-size: 16px;
    line-height: 1.7;

    color: #d5dadd;
}

.contact-detail small {
    display: block;

    margin-top: 8px;

    color: #89949c;
}


/* FOOTER */

footer {
    padding: 65px 30px 35px;

    color: #fff;

    background: var(--charcoal-dark);

    border-top: 1px solid #313a41;
}

.footer-inner {
    max-width: var(--max-width);

    margin: auto;
}

.footer-logo {
    padding-bottom: 40px;

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

.footer-logo img {
    width: 165px;

    padding: 0;

    background: transparent;

    object-fit: contain;
}

.footer-slogan {
    padding: 42px 0;

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

    gap: 50px;
}

.footer-slogan strong {
    max-width: 560px;

    font-size: clamp(30px, 4vw, 48px);

    line-height: 1.1;
}

.footer-slogan span {
    max-width: 350px;

    font-size: 10px;
    line-height: 1.8;

    letter-spacing: 2px;

    color: #82929e;

    text-align: right;
}

.footer-bottom {
    padding-top: 25px;

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

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

    font-size: 10px;

    color: #75848f;
}

.footer-bottom a {
    color: #c9d0d5;

    text-decoration: none;
}


/* ANIMATIONS */

.reveal {
    opacity: 0;

    transform: translateY(25px);

    transition:
        opacity 0.7s ease,
        transform 0.7s ease;
}

.reveal.visible {
    opacity: 1;

    transform: translateY(0);
}


/* TABLET */

@media (max-width: 1050px) {

    .nav-links {
        gap: 18px;
    }

    .hero-container {
        gap: 35px;
    }

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

    .hero-image-main {
        height: 440px;
    }

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

    .sectors-layout {
        gap: 50px;
    }
}


/* MOBILE */

@media (max-width: 800px) {

    .navbar {
        height: 74px;

        padding: 0 20px;
    }

    .logo img {
        width: 125px;
        max-height: 58px;
    }

    .menu-button {
        display: block;
    }

    .nav-links {
        position: fixed;

        inset: 0;

        z-index: 1001;

        padding: 100px 30px 50px;

        display: flex;
        flex-direction: column;

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

        gap: 10px;

        background: #1c2329;

        transform: translateX(100%);

        transition: 0.35s;
    }

    .nav-links.active {
        transform: translateX(0);
    }

    .nav-links a {
        padding: 10px 0;

        font-size: 27px;

        color: #e7ebed;
    }

    .nav-links a:not(.nav-contact)::after {
        display: none;
    }

    .nav-links .nav-contact {
        margin-top: 15px;

        padding: 14px 20px;

        font-size: 17px;
    }


    /* HERO */

    .hero {
        min-height: auto;

        padding: 120px 20px 75px;
    }

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

        gap: 55px;
    }

    .hero h1 {
        font-size: clamp(48px, 14vw, 68px);

        letter-spacing: -3px;
    }

    .hero-content > p {
        font-size: 15px;
    }

    .hero-actions {
        flex-direction: column;
    }

    .hero-actions .button {
        width: 100%;
    }

    .hero-features {
        gap: 15px;
    }

    .hero-features strong {
        font-size: 21px;
    }

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

    .hero-image-main {
        width: 90%;
        height: 355px;
    }

    .hero-image-secondary {
        width: 55%;
        height: 195px;
    }

    .hero-badge {
        width: 100px;
        height: 100px;

        right: 3px;
    }

    .hero-badge strong {
        font-size: 18px;
    }


    /* BRAND STRIP */

    .brand-strip-inner {
        min-height: 64px;

        padding: 0 20px;

        overflow-x: auto;

        justify-content: flex-start;
    }

    .brand-strip span {
        white-space: nowrap;
    }


    /* SECTIONS */

    .section {
        padding: 82px 20px;
    }

    .about-section,
    .sectors-section {
        padding-left: 20px;
        padding-right: 20px;
    }

    .section-top {
        gap: 20px;
    }

    .section-top > p {
        display: none;
    }


    /* ABOUT */

    .about-grid {
        padding-top: 45px;

        grid-template-columns: 1fr;

        gap: 45px;
    }

    .about-title h2 {
        font-size: 43px;
    }


    /* SERVICES */

    .section-heading {
        padding: 50px 0 40px;

        grid-template-columns: 1fr;

        gap: 30px;
    }

    .section-heading h2 {
        font-size: 48px;
    }

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

    .service-card {
        min-height: 265px;
    }


    /* PRODUCTS */

    .products-heading {
        padding: 45px 0 35px;

        flex-direction: column;

        align-items: flex-start;

        gap: 20px;
    }

    .products-heading h2 {
        font-size: 50px;
    }

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

    .product-image,
    .product-large .product-image {
        height: 320px;
    }


    /* MACHINES */

    .machine-heading {
        grid-template-columns: 1fr;

        gap: 30px;

        padding-bottom: 45px;
    }

    .machine-heading h2 {
        font-size: 49px;
    }

    .machine-item {
        min-height: 100px;

        grid-template-columns: 45px 1fr;
    }

    .machine-type {
        display: none;
    }


    /* SECTORS */

    .sectors-layout {
        padding-top: 45px;

        grid-template-columns: 1fr;

        gap: 45px;
    }

    .sectors-title h2 {
        font-size: 48px;
    }

    .sector-item h3 {
        font-size: 19px;
    }


    /* STATEMENT */

    .statement-section {
        padding: 75px 20px;
    }

    .statement-inner {
        grid-template-columns: 1fr;

        gap: 40px;
    }

    .statement-inner img {
        width: 160px;
    }

    .statement-inner h2 {
        font-size: 38px;
    }


    /* CONTACT */

    .contact-layout {
        padding-top: 45px;

        grid-template-columns: 1fr;

        gap: 60px;
    }

    .contact-main h2 {
        font-size: 47px;
    }

    .contact-buttons {
        flex-direction: column;
    }

    .contact-buttons .button {
        width: 100%;
    }


    /* FOOTER */

    .footer-slogan {
        flex-direction: column;

        align-items: flex-start;
    }

    .footer-slogan span {
        text-align: left;
    }
}


/* SMALL MOBILE */

@media (max-width: 450px) {

    .hero h1 {
        font-size: 45px;
    }

    .hero-features {
        grid-template-columns: repeat(3, 1fr);
    }

    .hero-features span {
        font-size: 8px;
    }

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

    .hero-image-main {
        height: 310px;
    }

    .hero-image-secondary {
        height: 165px;
    }

    .product-image,
    .product-large .product-image {
        height: 270px;
    }

    .footer-bottom {
        gap: 20px;
    }
}
/* ===== PREMIUM ESTU EXTENSIONS ===== */
:root { --blue-dark:#0d6d9f; }
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E")}
.nav-links a.active:not(.nav-contact){color:#fff}.nav-links a.active:not(.nav-contact)::after{width:100%}
.hero::after{content:"ESTU";position:absolute;right:-2vw;bottom:-8vw;font-size:clamp(180px,28vw,480px);font-weight:900;line-height:1;color:rgba(255,255,255,.018);letter-spacing:-.08em;pointer-events:none}.hero{position:relative}.hero-image-main img,.hero-image-secondary img{transition:transform 1s cubic-bezier(.2,.7,.2,1),filter .5s}.hero-visual:hover .hero-image-main img{transform:scale(1.025)}.hero-visual:hover .hero-image-secondary img{transform:scale(1.045)}
.production-showcase{max-width:none;padding-left:max(30px,calc((100vw - var(--max-width))/2 + 30px));padding-right:max(30px,calc((100vw - var(--max-width))/2 + 30px))}.production-showcase .section-top,.production-showcase .products-heading,.production-showcase .showcase-grid{max-width:calc(var(--max-width) - 60px);margin-left:auto;margin-right:auto}.products-heading h2 span{display:block;color:#64b8df}
.showcase-grid{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:220px;gap:14px}.showcase-item{grid-column:span 4;grid-row:span 2;position:relative;overflow:hidden;border:1px solid var(--border-dark);padding:0;background:#151b20;cursor:zoom-in;text-align:left;color:#fff}.showcase-featured{grid-column:span 8;grid-row:span 3}.showcase-wide{grid-column:span 8}.showcase-item img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1),filter .45s}.showcase-item::after{content:"";position:absolute;inset:0;background:rgba(9,16,21,.12);transition:.4s}.showcase-item:hover img{transform:scale(1.045);filter:brightness(.78)}.showcase-item:hover::after{background:rgba(9,16,21,.3)}.showcase-overlay{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:28px;display:grid;grid-template-columns:1fr auto;align-items:end;background:linear-gradient(transparent,rgba(10,15,19,.9));transform:translateY(8px);transition:.35s}.showcase-overlay small{grid-column:1/-1;margin-bottom:8px;color:#70c2e7;font-size:9px;font-weight:700;letter-spacing:2px}.showcase-overlay strong{font-size:clamp(19px,2vw,28px)}.showcase-overlay i{font-size:10px;font-style:normal;color:#c3ccd1;opacity:0;transform:translateX(-8px);transition:.35s}.showcase-item:hover .showcase-overlay{transform:none}.showcase-item:hover .showcase-overlay i{opacity:1;transform:none}
.machine-item{position:relative;overflow:hidden}.machine-item::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:#63b7df;transform:scaleY(0);transition:.3s}.machine-item:hover::before{transform:scaleY(1)}.machine-item:hover .machine-index{transform:translateX(8px)}.machine-index{transition:.3s}
.project-cta{padding:105px 30px;background:#11181d;border-top:1px solid #303a42;border-bottom:1px solid #303a42}.project-cta-inner{max-width:var(--max-width);margin:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:60px}.project-cta-inner>div>span{display:block;margin-bottom:22px;color:#65b9e0;font-size:10px;font-weight:700;letter-spacing:3px}.project-cta h2{font-size:clamp(42px,5.6vw,76px);line-height:1.02;letter-spacing:-4px;color:#e9edef;font-weight:600}.project-cta h2 strong{color:#66b9e0;font-weight:600}.cta-link{flex:0 0 230px;min-height:72px;padding:0 24px;display:flex;align-items:center;justify-content:space-between;border:1px solid #4a5862;color:#fff;text-decoration:none;font-size:12px;font-weight:700;transition:.3s}.cta-link span{font-size:20px}.cta-link:hover{background:#1685c1;border-color:#1685c1;transform:translateY(-4px)}
.lightbox{position:fixed;inset:0;z-index:5000;display:flex;align-items:center;justify-content:center;padding:70px;background:rgba(7,11,14,.94);opacity:0;visibility:hidden;transition:.3s}.lightbox.open{opacity:1;visibility:visible}.lightbox figure{max-width:min(1200px,86vw);max-height:84vh;margin:0;text-align:center}.lightbox img{max-width:100%;max-height:78vh;object-fit:contain;margin:auto;box-shadow:0 30px 80px rgba(0,0,0,.4)}.lightbox figcaption{margin-top:16px;color:#aeb7bd;font-size:11px;letter-spacing:2px;text-transform:uppercase}.lightbox-close,.lightbox-nav{position:absolute;border:1px solid #52606a;background:#1c2329;color:#fff;cursor:pointer;transition:.25s}.lightbox-close{right:30px;top:30px;width:52px;height:52px;font-size:28px}.lightbox-nav{top:50%;width:54px;height:54px;font-size:22px}.lightbox-prev{left:30px}.lightbox-next{right:30px}.lightbox-close:hover,.lightbox-nav:hover{background:#1685c1;border-color:#1685c1}
@media(max-width:800px){.production-showcase{padding-left:20px;padding-right:20px}.showcase-grid{grid-template-columns:1fr;grid-auto-rows:auto}.showcase-item,.showcase-featured,.showcase-wide{grid-column:auto;grid-row:auto;height:310px}.showcase-featured{height:390px}.showcase-overlay{padding:20px}.showcase-overlay i{display:none}.project-cta{padding:75px 20px}.project-cta-inner{align-items:flex-start;flex-direction:column;gap:38px}.project-cta h2{font-size:45px;letter-spacing:-3px}.cta-link{flex:none;width:100%}.lightbox{padding:70px 16px}.lightbox-nav{top:auto;bottom:20px}.lightbox-prev{left:calc(50% - 64px)}.lightbox-next{right:calc(50% - 64px)}.lightbox-close{right:16px;top:16px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}
@media (max-width: 800px) {

    .hero-badge {
        width: 135px;
        right: 14px;
        bottom: 18px;
    }

}
/* SABİT BİZE ULAŞIN BUTONU */

.floating-contact {
    position: fixed;
    right: 24px;
    bottom: 24px;

    z-index: 999;

    min-height: 54px;
    padding: 0 22px 0 8px;

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

    background: #1685c1;
    border: 1px solid rgba(255, 255, 255, 0.15);

    color: #fff;
    text-decoration: none;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);

    transition:
        background 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.floating-contact-icon {
    width: 38px;
    height: 38px;

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

    background: rgba(0, 0, 0, 0.18);

    font-size: 17px;

    transition: transform 0.25s ease;
}

.floating-contact:hover {
    background: #2198d3;
    transform: translateY(-3px);

    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.35);
}

.floating-contact:hover .floating-contact-icon {
    transform: rotate(45deg);
}


/* MOBİL */

@media (max-width: 800px) {

    .floating-contact {
        right: 14px;
        bottom: 14px;

        min-height: 48px;

        padding: 0 16px 0 6px;

        font-size: 10px;
    }

    .floating-contact-icon {
        width: 36px;
        height: 36px;
    }
}