:root {
    --red: #c8102e;
    --red-dark: #a40d25;
    --ink: #111827;
    --muted: #5b6474;
    --line: #e3e8ef;
    --soft: #f4f6f8;
    --paper: #fff;
    --warm: #fafafa;
    --gold: #b85c00;
    --radius: 10px;
    --shadow: 0 20px 50px rgba(15,23,42,.10)
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    font-family: Inter,Arial,sans-serif;
    color: var(--ink);
    background: #fff;
    line-height: 1.55
}

    body > .skiptranslate {
        display: none !important
    }

body {
    top: 0 !important
}

.goog-te-banner-frame.skiptranslate, .goog-logo-link, .goog-te-gadget span {
    display: none !important
}

.translate-host {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important
}

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

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

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

.material-symbols-outlined {
    font-size: 20px;
    line-height: 1
}

.container {
    width: min(1180px,calc(100% - 40px));
    margin: 0 auto
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--red)
}

    .eyebrow:before {
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--red)
    }

h1, h2, h3, h4 {
    font-family: "Space Grotesk",Inter,sans-serif;
    line-height: 1.1;
    margin: 0
}

p {
    margin: 0
}

.section {
    padding: 86px 0
}

.section-soft {
    background: var(--soft)
}

.section-title {
    font-size: clamp(34px,4vw,50px);
    margin: 10px 0 16px
}

.section-lead {
    font-size: 17px;
    color: var(--muted);
    max-width: 760px
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 46px;
    padding: 0 20px;
    border-radius: 5px;
    border: 1px solid transparent;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .02em;
    cursor: pointer;
    transition: .2s
}

.btn-primary {
    background: var(--red);
    color: #fff
}

    .btn-primary:hover {
        background: var(--red-dark);
        transform: translateY(-1px)
    }

.btn-light {
    background: #fff;
    border-color: var(--line);
    color: var(--ink)
}

.btn-dark {
    background: var(--ink);
    color: #fff
}

.btn-ghost {
    background: #f1f3f6;
    color: var(--ink)
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(255,255,255,.97);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid #edf0f4
}

.header-inner {
    height: 82px;
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 0 32px;
    max-width: 1600px;
    margin: 0 auto
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0
}

    .brand img {
        width: 78px;
        height: 44px;
        object-fit: contain
    }

.brand-name {
    display: flex;
    flex-direction: column;
    line-height: 1.05
}

    .brand-name strong {
        font-family: "Space Grotesk";
        font-size: 17px;
        letter-spacing: .02em
    }

    .brand-name small {
        font-size: 9px;
        color: #7b8492;
        letter-spacing: .13em;
        text-transform: uppercase;
        margin-top: 4px
    }

.desktop-nav {
    display: flex;
    align-items: center;
    gap: 19px;
    margin-left: auto;
    font-size: 13px;
    color: #5a4543
}

    .desktop-nav > a, .nav-drop-trigger {
        padding: 29px 0;
        white-space: nowrap
    }

    .desktop-nav a:hover {
        color: var(--red)
    }

.nav-drop {
    position: relative
}

.nav-drop-trigger {
    display: flex;
    align-items: center;
    gap: 2px
}

    .nav-drop-trigger .material-symbols-outlined {
        font-size: 16px
    }

.nav-drop-menu {
    position: absolute;
    top: 72px;
    left: -12px;
    width: 260px;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    padding: 8px;
    display: none;
    border-radius: 8px
}

    .nav-drop-menu.wide {
        width: 300px
    }

.nav-drop:hover .nav-drop-menu {
    display: block
}

.nav-drop-menu a {
    display: block;
    padding: 10px 12px;
    border-radius: 5px;
    font-size: 13px
}

    .nav-drop-menu a:hover {
        background: #f7f8fa
    }

.header-actions {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-left: 4px
}

.header-soft, .header-cta, .language-trigger {
    height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 0;
    border-radius: 4px;
    padding: 0 13px;
    font-weight: 700;
    font-size: 12px;
    white-space: nowrap
}

.header-soft {
    background: #eff2f5
}

.header-cta {
    background: var(--red);
    color: #fff
}

.header-soft:hover {
    background: #e5e9ee
}

.header-cta:hover {
    background: var(--red-dark)
}

.language-menu {
    position: relative;
    display: flex;
    align-items: center;
}

.language-trigger {
    background: transparent;
    cursor: pointer;
    padding: 0 7px
}

.language-panel {
    position: absolute;
    right: 0;
    top: 100%;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    padding: 6px;
    display: none;
    min-width: 80px;
    border-radius: 6px
}

.language-menu:hover .language-panel,
.language-menu:focus-within .language-panel,
.language-menu.open .language-panel {
    display: grid
}

.language-panel button, .footer-languages button {
    border: 0;
    background: transparent;
    padding: 7px 8px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 700
}

    .language-panel button:hover, .footer-languages button:hover {
        color: var(--red)
    }

.mobile-toggle {
    display: none;
    border: 0;
    background: #f1f3f6;
    width: 40px;
    height: 40px;
    border-radius: 5px;
    align-items: center;
    justify-content: center
}

.mobile-menu {
    display: none;
    background: #fff;
    border-top: 1px solid var(--line);
    padding: 10px 20px 20px
}

    .mobile-menu > a, .mobile-menu summary, .mobile-menu details > a {
        display: block;
        padding: 11px 4px;
        font-size: 14px
    }

    .mobile-menu details > a {
        padding-left: 18px;
        color: var(--muted)
    }

    .mobile-menu summary {
        cursor: pointer;
        font-weight: 600
    }

.mobile-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 10px
}

    .mobile-actions a {
        background: #eff2f5;
        padding: 12px;
        text-align: center;
        border-radius: 4px;
        font-size: 12px;
        font-weight: 700
    }

    .mobile-actions .mobile-primary {
        grid-column: 1/-1;
        background: var(--red);
        color: #fff
    }

.home-hero {
    position: relative;
    min-height: 620px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background-image: linear-gradient(90deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.93) 40%,rgba(255,255,255,.46) 63%,rgba(15,23,42,.13) 100%),url('/images/factory-hero-v2.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 35% center
}

    .home-hero:after {
        content: "";
        position: absolute;
        inset: 0;
        background-image: radial-gradient(rgba(200,16,46,.20) 1px,transparent 1px);
        background-size: 24px 24px;
        opacity: .45;
        pointer-events: none
    }

.hero-content {
    position: relative;
    z-index: 2;
    width: min(1180px,calc(100% - 40px));
    margin: 0 auto;
    padding: 78px 0;
    display: flex
}

.hero-copy {
    max-width: 640px
}

    .hero-copy h1 {
        font-size: clamp(46px,5.1vw,72px);
        letter-spacing: -.035em;
        margin: 20px 0 20px
    }

        .hero-copy h1 em {
            font-style: normal;
            color: var(--red);
            text-decoration: underline;
            text-decoration-color: rgba(200,16,46,.18);
            text-underline-offset: 8px
        }

    .hero-copy > p {
        max-width: 610px;
        font-size: 18px;
        color: #283548;
        line-height: 1.65
    }

.hero-buttons {
    display: flex;
    gap: 12px;
    margin-top: 30px;
    flex-wrap: wrap
}

.stats-strip {
    background: #101827;
    color: #fff
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 1px
}

.stat {
    padding: 30px 22px;
    border-right: 1px solid rgba(255,255,255,.08)
}

    .stat:last-child {
        border-right: 0
    }

    .stat strong {
        font-family: "Space Grotesk";
        font-size: 38px
    }

        .stat strong.accent {
            color: #ffb4bd
        }

        .stat strong.gold {
            color: #d66a00
        }

    .stat b {
        display: block;
        font-family: "Space Grotesk";
        font-size: 17px;
        margin-top: 2px
    }

    .stat span {
        font-size: 12px;
        color: #bac6d9
    }

.section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 34px
}

.text-link {
    color: var(--red);
    font-weight: 700;
    font-size: 13px
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 18px
}

.product-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    min-height: 330px;
    transition: .25s
}

    .product-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow);
        border-color: #d8dde5
    }

.product-media {
    height: 145px;
    background: linear-gradient(135deg,#f7f8fa,#eef1f4);
    display: grid;
    place-items: center;
    border-radius: 7px;
    margin: 14px 0;
    overflow: hidden
}

    .product-media img {
        width: 100%;
        height: 100%;
        object-fit: contain
    }

.product-no {
    font-size: 10px;
    color: #7b8492;
    font-weight: 700;
    letter-spacing: .08em
}

.product-card h3 {
    font-size: 19px;
    margin: 7px 0
}

.product-card p {
    font-size: 13px;
    color: var(--muted);
    flex: 1
}

.product-card .product-link {
    margin-top: 18px;
    color: var(--red);
    font-size: 12px;
    font-weight: 800
}

.sector-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 18px
}

.sector-card {
    min-height: 260px;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    background: linear-gradient(135deg,#1f2937,#101827);
    color: #fff;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end
}

    .sector-card:before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 70% 15%,rgba(200,16,46,.30),transparent 40%)
    }

    .sector-card > * {
        position: relative
    }

    .sector-card small {
        color: #ffbdc6;
        font-weight: 700
    }

    .sector-card h3 {
        font-size: 24px;
        margin: 8px 0
    }

    .sector-card p {
        color: #d3dbe7;
        font-size: 13px
    }

    .sector-card span {
        margin-top: 14px;
        font-size: 12px;
        color: #ffc06c;
        font-weight: 700
    }

.engineering-band {
    background: #f4f6f8
}

.engineering-grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 48px;
    align-items: center
}

.engineering-visual {
    min-height: 420px;
    border-radius: 12px;
    background: linear-gradient(rgba(15,23,42,.2),rgba(15,23,42,.7)),url('https://lh3.googleusercontent.com/aida-public/AB6AXuAeN4Nqz6oOpdvRxh9zNx02Tweu-NTPEZsA44jCbNIo0yiyulT8bwOlgmp0MSckf4_DeI-fZao9ve9rhQ5MYkWRkXgT-hbIdojA2gC_1coKtmBmKK6kiG74qnbWind4uA7rtoq7MvmRfZL5GMojtLsYwfR4xB8GdhzflWIOY6-XnYgeCy1DqzEG_wnm1scNTIESYJFoR9OUoF0ZjyASrrTouJlfupYldVbpT4VY-owhUcTz57RzpHosIw') center/cover;
    color: #fff;
    display: flex;
    align-items: flex-end;
    padding: 28px
}

.engineering-copy h2 {
    font-size: 44px;
    margin: 10px 0 16px
}

.feature-list {
    display: grid;
    gap: 10px;
    margin-top: 24px
}

.feature {
    display: flex;
    gap: 12px;
    padding: 14px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 7px
}

    .feature .material-symbols-outlined {
        color: var(--red);
        margin-top: 2px
    }

    .feature strong {
        display: block;
        font-size: 14px
    }

    .feature span {
        font-size: 12px;
        color: var(--muted)
    }

.config-teaser-wrap {
    background: #f3f5f8;
    padding: 70px 0
}

.config-teaser {
    background: #101827;
    color: #fff;
    border-radius: 15px;
    padding: 48px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 46px;
    position: relative;
    overflow: hidden
}

    .config-teaser:before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: radial-gradient(rgba(255,255,255,.11) 1px,transparent 1px);
        background-size: 20px 20px
    }

    .config-teaser > * {
        position: relative
    }

    .config-teaser h2 {
        font-size: 42px;
        margin: 12px 0
    }

    .config-teaser p {
        color: #c8d3e2;
        font-size: 17px
    }

.config-points {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 24px 0
}

    .config-points span {
        font-size: 12px;
        color: #fff
    }

    .config-points .material-symbols-outlined {
        color: #d66a00;
        font-size: 17px;
        margin-right: 5px;
        vertical-align: middle
    }

.sim-card {
    background: #fff;
    color: var(--ink);
    border-radius: 10px;
    padding: 22px
}

.sim-head {
    display: flex;
    justify-content: space-between;
    background: #f0f3f6;
    padding: 10px 12px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 800
}

.range-row {
    margin: 18px 0
}

.range-label {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 8px
}

    .range-label b {
        font-size: 15px;
        color: var(--red)
    }

.range-row input {
    width: 100%;
    accent-color: var(--red)
}

.sim-result {
    margin-top: 20px;
    background: #f1f4f7;
    border-radius: 6px;
    padding: 16px
}

    .sim-result small {
        font-size: 10px;
        color: #64748b;
        font-weight: 700
    }

    .sim-result strong {
        display: block;
        font-family: "Space Grotesk";
        font-size: 38px;
        color: var(--red)
    }

    .sim-result p {
        color: #5b6474;
        font-size: 11px
    }

.sim-note {
    font-size: 10px !important;
    color: #7b8492 !important;
    margin-top: 8px !important
}

.contact-home {
    padding: 80px 0;
    background: #eef2f5
}

.contact-shell {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--shadow)
}

.contact-form {
    padding: 46px
}

    .contact-form h2 {
        font-size: 42px;
        margin: 10px 0
    }

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 26px
}

.field {
    display: flex;
    flex-direction: column;
    gap: 7px
}

    .field.full {
        grid-column: 1/-1
    }

    .field label {
        font-size: 10px;
        letter-spacing: .08em;
        text-transform: uppercase;
        font-weight: 800;
        color: #596171
    }

    .field input, .field select, .field textarea {
        width: 100%;
        border: 1px solid #e0e5eb;
        background: #f8f9fb;
        padding: 12px 13px;
        border-radius: 4px;
        outline: none
    }

        .field input:focus, .field select:focus, .field textarea:focus {
            border-color: #bdc3cd;
            box-shadow: 0 0 0 3px rgba(200,16,46,.06)
        }

.contact-actions {
    display: flex;
    gap: 12px;
    justify-content: space-between;
    align-items: center;
    margin-top: 18px;
    flex-wrap: wrap
}

.contact-info {
    background: #101827;
    color: #fff;
    padding: 46px;
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

    .contact-info h3 {
        font-size: 32px;
        margin: 10px 0 12px
    }

    .contact-info > p {
        color: #c7d1df
    }

.location-box {
    margin: 28px 0;
    padding: 22px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.04);
    border-radius: 8px
}

    .location-box strong {
        display: block;
        margin-bottom: 6px
    }

    .location-box span {
        font-size: 12px;
        color: #c6d0de
    }

.contact-lines {
    display: grid;
    gap: 12px
}

.contact-line {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 13px
}

    .contact-line .material-symbols-outlined {
        color: #ffb4bd
    }

.shipping {
    margin-top: 30px;
    background: rgba(255,255,255,.06);
    padding: 13px 14px;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    font-size: 11px
}

    .shipping b {
        color: #df7c20
    }

.site-footer {
    background: #fff;
    border-top: 1px solid var(--line)
}

.footer-main {
    width: min(1380px,calc(100% - 60px));
    margin: 0 auto;
    padding: 58px 0 48px;
    display: grid;
    grid-template-columns: 1.5fr .75fr .8fr 1.25fr;
    gap: 50px
}

    .footer-main h4 {
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: .07em;
        margin-bottom: 14px
    }

    .footer-main > div:not(:first-child) > a {
        display: block;
        font-size: 13px;
        color: #263245;
        margin: 9px 0
    }

.footer-brand {
    margin-bottom: 18px
}

    .footer-brand img {
        width: 86px
    }

.footer-brand-col > p {
    font-size: 13px;
    color: var(--muted);
    max-width: 430px
}

.cert-badges {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    margin-top: 18px
}

    .cert-badges span {
        font-size: 10px;
        background: #f1f4f7;
        padding: 6px 8px;
        font-weight: 800
    }

.footer-languages {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-top: 20px;
    font-size: 11px;
    color: #717b8a
}

.footer-whatsapp {
    display: inline-flex !important;
    align-items: center;
    gap: 8px !important;
    background: #fff0f2;
    color: var(--red) !important;
    padding: 10px 12px;
    border-radius: 5px;
    margin-top: 15px !important;
    width: max-content
}

.footer-bottom {
    border-top: 1px solid var(--line);
    width: min(1380px,calc(100% - 60px));
    margin: 0 auto;
    padding: 18px 0 28px;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    font-size: 10px;
    letter-spacing: .04em
}

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

.page-hero {
    padding: 70px 0;
    background: linear-gradient(180deg,#f6f7f9,#fff);
    border-bottom: 1px solid var(--line)
}

    .page-hero h1 {
        font-size: clamp(38px,5vw,62px);
        margin: 14px 0
    }

    .page-hero p {
        max-width: 760px;
        color: var(--muted);
        font-size: 17px
    }

.breadcrumb {
    font-size: 11px;
    color: #7a8492;
    display: flex;
    gap: 7px
}

    .breadcrumb a:hover {
        color: var(--red)
    }

.listing-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 20px
}

.listing-card {
    border: 1px solid var(--line);
    border-radius: 9px;
    background: #fff;
    padding: 22px;
    min-height: 220px;
    display: flex;
    flex-direction: column
}

    .listing-card h3 {
        font-size: 23px;
        margin: 10px 0
    }

    .listing-card p {
        font-size: 13px;
        color: var(--muted);
        flex: 1
    }

    .listing-card a {
        margin-top: 20px;
        color: var(--red);
        font-weight: 800;
        font-size: 12px
    }

.detail-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center
}

.detail-visual {
    min-height: 400px;
    border-radius: 12px;
    background: linear-gradient(135deg,#f6f7f9,#e9edf2);
    display: grid;
    place-items: center;
    padding: 35px
}

    .detail-visual img {
        max-height: 330px;
        object-fit: contain
    }

.detail-title h1 {
    font-size: clamp(40px,5vw,64px);
    margin: 14px 0
}

.detail-title > p {
    color: var(--muted);
    font-size: 17px
}

.spec-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 22px 0
}

    .spec-pills span {
        background: #f1f4f7;
        padding: 8px 10px;
        border-radius: 4px;
        font-size: 11px;
        font-weight: 700
    }

.detail-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap
}

.tech-grid {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 30px
}

.tech-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px
}

    .tech-table th, .tech-table td {
        padding: 13px;
        border-bottom: 1px solid var(--line);
        text-align: left
    }

    .tech-table th {
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: .06em;
        color: #687384
    }

.diagram {
    min-height: 330px;
    border: 1px solid var(--line);
    background: #fafbfc;
    border-radius: 8px;
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden
}

    .diagram:before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: linear-gradient(#edf0f3 1px,transparent 1px),linear-gradient(90deg,#edf0f3 1px,transparent 1px);
        background-size: 20px 20px
    }

    .diagram .spring {
        width: 72%;
        height: 16px;
        background: #252b35;
        border-radius: 10px;
        position: relative
    }

        .diagram .spring:before {
            content: "";
            position: absolute;
            left: -20%;
            top: 5px;
            width: 25%;
            height: 6px;
            background: #777f8a
        }

        .diagram .spring:after {
            content: "";
            position: absolute;
            right: -8%;
            top: 2px;
            width: 10%;
            height: 12px;
            border: 3px solid #252b35;
            border-radius: 50%
        }

.article-body {
    max-width: 850px
}

    .article-body p {
        margin: 0 0 16px;
        color: #3d4959
    }

    .article-body h2, .article-body h3 {
        margin: 26px 0 10px
    }

.cert-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 18px
}

.cert-card {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 22px
}

    .cert-card .material-symbols-outlined {
        font-size: 34px;
        color: var(--red)
    }

    .cert-card h3 {
        font-size: 20px;
        margin: 14px 0 8px
    }

    .cert-card p {
        font-size: 12px;
        color: var(--muted)
    }

    .cert-card a {
        display: inline-flex;
        margin-top: 14px;
        color: var(--red);
        font-size: 11px;
        font-weight: 800
    }

.blog-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 20px
}

.blog-card {
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden
}

    .blog-card .blog-image {
        height: 170px;
        background: #eff2f5
    }

    .blog-card .blog-content {
        padding: 20px
    }

    .blog-card time {
        font-size: 10px;
        color: #7b8492
    }

    .blog-card h3 {
        font-size: 21px;
        margin: 8px 0
    }

    .blog-card p {
        font-size: 13px;
        color: var(--muted)
    }

.catalog-list {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 18px
}

.catalog-card {
    border: 1px solid var(--line);
    padding: 22px;
    border-radius: 8px
}

    .catalog-card h3 {
        font-size: 21px;
        margin-bottom: 9px
    }

    .catalog-card p {
        font-size: 12px;
        color: var(--muted);
        margin-bottom: 18px
    }

    .catalog-card button, .catalog-card a {
        border: 0;
        cursor: pointer
    }

.flipbook-overlay {
    position: fixed;
    inset: 0;
    background: rgba(8,15,28,.88);
    z-index: 5000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px
}

    .flipbook-overlay.open {
        display: flex
    }

.flipbook-shell {
    width: min(1100px,96vw);
    height: min(760px,92vh);
    background: #151d2b;
    border-radius: 12px;
    padding: 18px;
    display: flex;
    flex-direction: column
}

.flipbook-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
    margin-bottom: 12px
}

    .flipbook-top strong {
        font-family: "Space Grotesk"
    }

    .flipbook-top button {
        background: rgba(255,255,255,.08);
        color: #fff;
        border: 0;
        width: 38px;
        height: 38px;
        border-radius: 5px;
        cursor: pointer
    }

.book-stage {
    flex: 1;
    min-height: 0;
    display: grid;
    place-items: center;
    perspective: 1800px;
    background: #0c1422;
    border-radius: 8px;
    overflow: hidden
}

.book-page {
    height: 100%;
    max-height: 650px;
    max-width: 100%;
    background: #fff;
    box-shadow: 0 20px 50px rgba(0,0,0,.35);
    transform-origin: left center;
    transition: transform .42s ease,opacity .42s ease
}

    .book-page.turning {
        transform: rotateY(-82deg);
        opacity: .18
    }

    .book-page canvas {
        display: block;
        max-width: 100%;
        height: 100%;
        width: auto
    }

.flip-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    color: #fff;
    padding-top: 12px
}

    .flip-controls button {
        border: 0;
        background: #fff;
        color: #111827;
        border-radius: 4px;
        padding: 9px 14px;
        cursor: pointer;
        font-weight: 700
    }

        .flip-controls button:disabled {
            opacity: .35
        }

    .flip-controls span {
        font-size: 12px
    }

.config-page {
    background: #f4f6f8;
    padding: 42px 0 80px
}

.config-shell {
    width: min(1180px,calc(100% - 40px));
    margin: 0 auto
}

.config-intro {
    background: #101827;
    color: #fff;
    border-radius: 14px;
    padding: 38px;
    margin-bottom: 20px;
    display: grid;
    grid-template-columns: 1.3fr .7fr;
    gap: 28px;
    align-items: center
}

    .config-intro h1 {
        font-size: clamp(36px,5vw,58px);
        margin: 12px 0
    }

    .config-intro p {
        color: #c8d3e2
    }

.config-quick {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 10px
}

    .config-quick div {
        background: rgba(255,255,255,.07);
        padding: 14px;
        border-radius: 6px;
        font-size: 11px
    }

.stepper {
    display: grid;
    grid-template-columns: repeat(6,1fr);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 18px
}

.step {
    padding: 13px 10px;
    text-align: center;
    font-size: 10px;
    font-weight: 800;
    color: #7a8492;
    border-right: 1px solid var(--line)
}

    .step:last-child {
        border-right: 0
    }

    .step.active {
        color: var(--red);
        background: #fff4f5
    }

.config-workspace {
    display: grid;
    grid-template-columns: 1fr 330px;
    gap: 18px
}

.config-form-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 28px
}

    .config-form-card h2 {
        font-size: 28px;
        margin-bottom: 8px
    }

    .config-form-card > p {
        color: var(--muted);
        font-size: 13px;
        margin-bottom: 24px
    }

.config-section {
    padding: 24px 0;
    border-top: 1px solid var(--line)
}

    .config-section:first-of-type {
        border-top: 0;
        padding-top: 0
    }

    .config-section h3 {
        font-size: 19px;
        margin-bottom: 14px
    }

.choice-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 10px
}

.choice {
    position: relative
}

    .choice input {
        position: absolute;
        opacity: 0
    }

    .choice label {
        display: block;
        padding: 14px;
        border: 1px solid var(--line);
        border-radius: 6px;
        cursor: pointer;
        font-size: 12px;
        font-weight: 700
    }

    .choice input:checked + label {
        border-color: var(--red);
        background: #fff4f5;
        color: var(--red)
    }

.config-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px
}

.input-unit {
    position: relative
}

    .input-unit input {
        padding-right: 52px
    }

    .input-unit span {
        position: absolute;
        right: 12px;
        bottom: 12px;
        font-size: 10px;
        font-weight: 700;
        color: #7a8492
    }

.upload-zone {
    border: 1.5px dashed #c9d0da;
    border-radius: 8px;
    padding: 28px;
    text-align: center;
    background: #fafbfc
}

    .upload-zone input {
        margin-top: 12px
    }

.config-summary {
    background: #101827;
    color: #fff;
    border-radius: 10px;
    padding: 22px;
    position: sticky;
    top: 100px;
    height: max-content
}

    .config-summary h3 {
        font-size: 20px;
        margin-bottom: 15px
    }

.summary-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
    font-size: 11px
}

    .summary-row span:first-child {
        color: #aebbd0
    }

.summary-force {
    padding: 18px 0
}

    .summary-force small {
        color: #aebbd0;
        font-size: 10px
    }

    .summary-force strong {
        font-size: 36px;
        color: #ffbdc6;
        display: block
    }

.summary-disclaimer {
    font-size: 10px;
    color: #9dacbf;
    margin-bottom: 16px
}

.request-ok {
    padding: 16px;
    border: 1px solid #b9e3c7;
    background: #f0fbf4;
    border-radius: 7px;
    margin-bottom: 20px;
    color: #166534;
    font-weight: 700
}

.empty-state {
    padding: 40px;
    border: 1px dashed #ccd3dd;
    border-radius: 8px;
    background: #fafbfc;
    text-align: center;
    color: #667181
}

.oem-search {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 28px
}

.oem-grid {
    display: grid;
    grid-template-columns: repeat(5,1fr) auto;
    gap: 10px
}

.oem-home-grid {
    grid-template-columns: repeat(4,1fr) auto
}

.oem-results {
    margin-top: 18px;
    display: grid;
    gap: 8px
}

.oem-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 12px;
    padding: 12px;
    background: #f7f9fb;
    border-radius: 5px;
    font-size: 12px
}

.policy {
    max-width: 850px
}

@media(max-width:1280px) {
    .desktop-nav {
        gap: 13px;
        font-size: 12px
    }

    .header-inner {
        padding: 0 18px
    }

    .brand-name {
        display: none
    }

    .header-soft span:not(.material-symbols-outlined) {
        display: none
    }

    .header-soft {
        padding: 0 11px
    }

    .header-cta span:not(.material-symbols-outlined) {
        display: none
    }

    .header-cta {
        padding: 0 12px
    }
}

@media(max-width:1000px) {
    .desktop-nav {
        display: none
    }

    .mobile-toggle {
        display: inline-flex
    }

    .header-actions {
        margin-left: auto
    }

    .home-hero {
        min-height: 560px;
        background-image: linear-gradient(90deg,rgba(255,255,255,.97),rgba(255,255,255,.80)),url('/images/factory-hero-v2.png')
    }

    .stats-grid {
        grid-template-columns: 1fr 1fr
    }

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

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

    .engineering-grid, .config-teaser, .contact-shell, .detail-hero, .tech-grid, .config-intro {
        grid-template-columns: 1fr
    }

    .listing-grid, .blog-grid {
        grid-template-columns: repeat(2,1fr)
    }

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

    .footer-main {
        grid-template-columns: 1.5fr 1fr 1fr
    }

        .footer-main > div:last-child {
            grid-column: 1/-1
        }

    .config-workspace {
        grid-template-columns: 1fr
    }

    .config-summary {
        position: static
    }

    .catalog-list {
        grid-template-columns: repeat(2,1fr)
    }

    .oem-grid, .oem-home-grid {
        grid-template-columns: repeat(2,1fr)
    }

        .oem-grid .btn {
            grid-column: 1/-1
        }
}

@media(max-width:700px) {
    .container, .hero-content, .config-shell {
        width: min(100% - 28px,1180px)
    }

    .header-inner {
        height: 68px;
        padding: 0 14px;
        gap: 10px
    }

    .brand img {
        width: 64px;
        height: 38px
    }

    .brand-name {
        display: flex
    }

        .brand-name strong {
            font-size: 13px
        }

        .brand-name small {
            display: none
        }

    .header-soft, .payment, .language-menu {
        display: none
    }

    .header-cta {
        height: 38px
    }

        .header-cta span:not(.material-symbols-outlined) {
            display: none
        }

    .mobile-menu.open {
        display: block
    }

    .home-hero {
        min-height: 590px;
        background-position: 62% center
    }

    .hero-content {
        padding: 55px 0;
        align-items: flex-end
    }

    .hero-copy {
        background: rgba(255,255,255,.89);
        padding: 20px;
        border-radius: 8px;
        backdrop-filter: blur(4px)
    }

        .hero-copy h1 {
            font-size: 42px
        }

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

    .hero-buttons {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%
    }

        .hero-buttons .btn {
            width: 100%
        }

    .stats-grid {
        grid-template-columns: 1fr 1fr
    }

    .stat {
        padding: 20px 14px
    }

        .stat strong {
            font-size: 30px
        }

        .stat b {
            font-size: 14px
        }

    .section {
        padding: 60px 0
    }

    .section-head {
        align-items: flex-start;
        flex-direction: column
    }

    .product-grid, .sector-grid, .listing-grid, .blog-grid, .cert-grid, .catalog-list {
        grid-template-columns: 1fr
    }

    .engineering-copy h2, .contact-form h2 {
        font-size: 34px
    }

    .engineering-visual {
        min-height: 300px
    }

    .config-teaser {
        padding: 28px 20px
    }

        .config-teaser h2 {
            font-size: 34px
        }

    .config-points {
        grid-template-columns: 1fr
    }

    .contact-form, .contact-info {
        padding: 28px 20px
    }

    .form-grid, .config-fields, .choice-grid {
        grid-template-columns: 1fr
    }

    .footer-main {
        width: min(100% - 30px,1380px);
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 40px 0
    }

        .footer-main > div:last-child {
            grid-column: auto
        }

    .footer-bottom {
        width: min(100% - 30px,1380px);
        flex-direction: column
    }

        .footer-bottom div {
            flex-wrap: wrap;
            gap: 10px 18px
        }

    .stepper {
        overflow-x: auto;
        display: flex
    }

    .step {
        min-width: 115px
    }

    .config-intro {
        padding: 24px
    }

    .config-quick {
        grid-template-columns: 1fr
    }

    .oem-grid, .oem-home-grid {
        grid-template-columns: 1fr
    }

    .oem-row {
        grid-template-columns: 1fr 1fr
    }

    .flipbook-shell {
        height: 88vh;
        padding: 10px
    }

    .book-stage {
        min-height: 0
    }

    .detail-visual {
        min-height: 280px
    }

    .tech-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap
    }
}

/* =========================================================
   Multilingual + Responsive stability layer
   Prevents translated text and Material Symbols from forcing
   the page wider than the viewport.
   ========================================================= */
html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
}

@supports not (overflow: clip) {
    html,
    body {
        overflow-x: hidden;
    }
}

main,
section,
.site-header,
.header-inner,
.container,
.hero-content,
.config-shell,
.footer-main,
.footer-bottom {
    min-width: 0;
    max-width: 100%;
}

.material-symbols-outlined {
    white-space: nowrap;
    word-break: keep-all;
    overflow-wrap: normal;
    flex: 0 0 auto;
}

.header-inner {
    width: 100%;
}

.brand,
.header-actions,
.nav-drop,
.nav-drop-trigger {
    min-width: 0;
}

.desktop-nav {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: flex-end;
}

.desktop-nav > a,
.desktop-nav .nav-drop-trigger {
    line-height: 1.2;
    text-align: center;
}

.header-actions {
    flex: 0 0 auto;
}

/* If translated menu text no longer fits, JS adds nav-compact. */
.site-header.nav-compact .desktop-nav {
    display: none !important;
}

.site-header.nav-compact .mobile-toggle {
    display: inline-flex !important;
    flex: 0 0 40px;
}

.site-header.nav-compact .header-actions {
    margin-left: auto;
}

.site-header.nav-compact .header-soft span:not(.material-symbols-outlined),
.site-header.nav-compact .header-cta span:not(.material-symbols-outlined) {
    display: none;
}

.site-header.nav-compact .header-soft,
.site-header.nav-compact .header-cta {
    padding-left: 11px;
    padding-right: 11px;
}

/* Grid children must be allowed to shrink when translations are long. */
.product-grid,
.sector-grid,
.listing-grid,
.blog-grid,
.cert-grid,
.catalog-list,
.stats-grid,
.engineering-grid,
.config-teaser,
.contact-shell,
.detail-hero,
.tech-grid,
.config-intro,
.config-workspace,
.choice-grid,
.config-fields,
.oem-grid,
.oem-home-grid,
.oem-row,
.form-grid,
.config-points,
.footer-main {
    min-width: 0;
}

.product-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.sector-grid,
.listing-grid,
.blog-grid,
.catalog-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cert-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.stats-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.product-card,
.sector-card,
.listing-card,
.blog-card,
.cert-card,
.catalog-card,
.product-media,
.blog-content,
.feature,
.sim-card,
.contact-form,
.contact-info,
.config-form-card,
.config-summary,
.detail-title,
.detail-visual,
.stat,
.footer-main > div {
    min-width: 0;
    max-width: 100%;
}

.product-card h3,
.product-card p,
.sector-card h3,
.sector-card p,
.listing-card h3,
.listing-card p,
.blog-card h3,
.blog-card p,
.cert-card h3,
.cert-card p,
.catalog-card h3,
.catalog-card p,
.section-title,
.section-lead,
.hero-copy h1,
.hero-copy p,
.feature,
.stat,
.footer-main,
.footer-bottom,
.mobile-menu {
    overflow-wrap: anywhere;
    word-break: normal;
}

.product-media,
.blog-card .blog-image,
.detail-visual,
.engineering-visual {
    overflow: hidden;
}

.product-media img,
.blog-card img,
.detail-visual img,
.engineering-visual img {
    max-width: 100%;
    min-width: 0;
}

/* Medium desktops / tablets */
@media (max-width: 1200px) {
    .product-grid,
    .cert-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .sector-grid,
    .listing-grid,
    .blog-grid,
    .catalog-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .section {
        padding: 72px 0;
    }
}

/* Always use compact navigation on small laptops/tablets. */
@media (max-width: 1100px) {
    .desktop-nav {
        display: none !important;
    }

    .mobile-toggle {
        display: inline-flex !important;
    }

    .header-actions {
        margin-left: auto;
    }

    .product-grid,
    .cert-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .engineering-grid,
    .config-teaser,
    .contact-shell,
    .detail-hero,
    .tech-grid,
    .config-intro,
    .config-workspace {
        grid-template-columns: minmax(0, 1fr);
    }

    .config-summary {
        position: static;
    }
}

@media (max-width: 700px) {
    .header-inner {
        height: 68px;
        padding: 0 12px;
        gap: 7px;
    }

    .brand {
        gap: 7px;
        min-width: 0;
    }

    .brand img {
        width: 58px;
        height: 34px;
        flex: 0 0 auto;
    }

    .brand-name {
        min-width: 0;
    }

    .brand-name strong {
        font-size: 12px;
        white-space: nowrap;
    }

    .brand-name small {
        display: none;
    }

    .header-actions {
        gap: 5px;
    }

    .header-soft,
    .payment {
        display: none !important;
    }

    .header-cta {
        width: 40px;
        min-width: 40px;
        height: 40px;
        padding: 0 !important;
    }

    .header-cta span:not(.material-symbols-outlined) {
        display: none !important;
    }

    .mobile-toggle {
        width: 40px;
        min-width: 40px;
        height: 40px;
    }

    .mobile-menu.open {
        display: block;
        width: 100%;
        max-height: calc(100dvh - 68px);
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
    }

    .mobile-menu > a,
    .mobile-menu summary,
    .mobile-menu details > a,
    .mobile-actions a {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .container,
    .hero-content,
    .config-shell {
        width: min(calc(100% - 28px), 1180px);
    }

    .home-hero {
        min-height: 560px;
        background-position: 55% center;
    }

    .hero-content {
        padding: 46px 0;
        align-items: flex-end;
    }

    .hero-copy {
        width: 100%;
        max-width: 100%;
        padding: 18px;
    }

    .hero-copy h1 {
        font-size: clamp(34px, 10.5vw, 44px);
        line-height: 1.04;
    }

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

    .hero-buttons {
        grid-template-columns: minmax(0, 1fr);
    }

    .stats-grid,
    .product-grid,
    .sector-grid,
    .listing-grid,
    .blog-grid,
    .cert-grid,
    .catalog-list,
    .choice-grid,
    .config-fields,
    .form-grid,
    .oem-grid,
    .oem-home-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .oem-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .section {
        padding: 56px 0;
    }

    .section-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .section-title {
        font-size: clamp(30px, 9vw, 40px);
    }

    .product-card,
    .listing-card,
    .cert-card,
    .catalog-card {
        width: 100%;
    }

    .product-media {
        width: 100%;
        height: 170px;
    }

    .config-points {
        grid-template-columns: minmax(0, 1fr);
    }

    .footer-main {
        grid-template-columns: minmax(0, 1fr);
    }

    .footer-main > div:last-child {
        grid-column: auto;
    }

    .tech-table {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 430px) {
    .brand-name {
        display: none;
    }

    .home-hero {
        min-height: 520px;
        background-position: 58% center;
    }

    .hero-copy h1 {
        font-size: clamp(30px, 10vw, 38px);
    }

    .stats-grid,
    .oem-row {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* CMS hero slider */
.cms-hero-slider{position:relative;overflow:hidden}.cms-hero-slide{display:none}.cms-hero-slide.active{display:flex}.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}.cms-hero-slide .hero-content{z-index:2}.hero-dots{position:absolute;z-index:5;left:50%;bottom:18px;transform:translateX(-50%);display:flex;gap:7px}.hero-dots button{width:9px;height:9px;border:0;border-radius:50%;background:rgba(17,24,39,.35);padding:0;cursor:pointer}.hero-dots button.active{background:var(--red);transform:scale(1.2)}


/* Language dropdown interaction fix */
.language-menu {
    position: relative;
    display: flex;
    align-items: center;
    z-index: 2100;
}

.language-panel {
    top: 100% !important;
    right: 0;
    margin-top: 0 !important;
    z-index: 2200;
    min-width: 80px;
}

/* Keep dropdown open while pointer moves from trigger to menu,
   while focused, or when JS toggles it on touch/click. */
.language-menu:hover .language-panel,
.language-menu:focus-within .language-panel,
.language-menu.open .language-panel {
    display: grid !important;
}

.language-panel::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -6px;
    height: 6px;
    background: transparent;
}

/* Language selector must remain usable on phones too. */
@media (max-width: 700px) {
    .header-actions .language-menu {
        display: flex !important;
    }

    .language-trigger {
        width: 40px;
        min-width: 40px;
        height: 40px;
        justify-content: center;
        padding: 0 5px;
    }

    .language-panel {
        max-height: min(320px, calc(100dvh - 80px));
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}


/* =========================================================
   CMS visual controls: banners, product media and animations
   ========================================================= */
.cms-hero-slider{
    min-height:var(--cms-hero-desktop,620px);
    position:relative;
    overflow:hidden;
    background:#e9edf2;
}
.cms-hero-slider>.cms-hero-slide{
    position:absolute;
    inset:0;
    display:flex;
    width:100%;
    min-height:var(--cms-hero-desktop,620px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .65s ease,visibility .65s ease;
}
.cms-hero-slider>.cms-hero-slide.active{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}
.cms-hero-slide,
.cms-hero-fallback{
    background-image:var(--hero-bg) !important;
    background-size:cover !important;
    background-position:var(--hero-position,center center) !important;
    background-repeat:no-repeat !important;
    color:var(--hero-text-color,#111827);
    isolation:isolate;
}
.cms-hero-fallback{display:flex}
.cms-hero-slide::before,
.cms-hero-fallback::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    opacity:var(--hero-overlay-opacity,.62);
    background:linear-gradient(
        90deg,
        var(--hero-overlay-color,#fff) 0%,
        var(--hero-overlay-color,#fff) 38%,
        color-mix(in srgb,var(--hero-overlay-color,#fff) 72%,transparent) 58%,
        transparent 82%
    );
}
.cms-hero-slide::after,
.cms-hero-fallback::after{z-index:1}
.cms-hero-slide .hero-content,
.cms-hero-fallback .hero-content{position:relative;z-index:2}
.cms-hero-slide .hero-copy h1,
.cms-hero-slide .hero-copy>p,
.cms-hero-fallback .hero-copy h1,
.cms-hero-fallback .hero-copy>p{color:var(--hero-text-color,#111827)}
.cms-hero-slide .hero-copy>p,
.cms-hero-fallback .hero-copy>p{opacity:.86}
.cms-hero-slide .hero-video{z-index:0}
.hero-dots{z-index:6}

/* Product images keep a consistent card shape without stretching. */
.product-media{
    height:var(--cms-product-image,220px);
    aspect-ratio:4/3;
}
.product-media img{
    width:100%;
    height:100%;
    object-fit:var(--cms-product-fit,contain) !important;
    object-position:center;
}

/* Product technical drawing */
.tech-grid.single-column{grid-template-columns:1fr}
.product-spec-list{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    margin-top:20px;
}
.product-spec-list>div{
    min-width:0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:12px 14px;
    border:1px solid var(--line);
    border-radius:7px;
    background:#fff;
}
.product-spec-list span{font-size:11px;color:var(--muted)}
.product-spec-list strong{font-size:12px;text-align:right}
.technical-drawing-panel{min-width:0}
.technical-drawing-media{
    min-height:330px;
    aspect-ratio:8/5;
    display:grid;
    place-items:center;
    overflow:hidden;
    border:1px solid var(--line);
    border-radius:8px;
    background:#fff;
    padding:18px;
}
.technical-drawing-media img{
    width:100%;
    height:100%;
    object-fit:contain;
}

/* Site-wide subtle reveal animations controlled from Site Settings. */
.animations-enabled .reveal-on-scroll{
    opacity:0;
    transform:translateY(18px);
    transition:
        opacity .58s cubic-bezier(.22,.61,.36,1),
        transform .58s cubic-bezier(.22,.61,.36,1);
    transition-delay:var(--reveal-delay,0ms);
}
.animations-enabled[data-animation-style="fade"] .reveal-on-scroll{
    transform:none;
}
.animations-enabled .reveal-on-scroll.is-revealed{
    opacity:1;
    transform:none;
}
@media (prefers-reduced-motion:reduce){
    .animations-enabled .reveal-on-scroll{
        opacity:1 !important;
        transform:none !important;
        transition:none !important;
    }
}

/* Long translated menus should never overlap. */
.desktop-nav{
    overflow:visible;
}
.desktop-nav>a,
.desktop-nav .nav-drop-trigger{
    white-space:nowrap;
}
.site-header.nav-compact .desktop-nav{display:none !important}
.site-header.nav-compact .mobile-toggle{display:inline-flex !important}

@media(max-width:700px){
    .cms-hero-slider,
    .cms-hero-slider>.cms-hero-slide,
    .cms-hero-fallback{
        min-height:var(--cms-hero-mobile,560px);
    }
    .cms-hero-slide,
    .cms-hero-fallback{
        background-image:var(--hero-mobile-bg,var(--hero-bg)) !important;
        background-position:center center !important;
    }
    .cms-hero-slide::before,
    .cms-hero-fallback::before{
        opacity:min(1,calc(var(--hero-overlay-opacity,.62) + .12));
        background:linear-gradient(
            180deg,
            color-mix(in srgb,var(--hero-overlay-color,#fff) 84%,transparent) 0%,
            color-mix(in srgb,var(--hero-overlay-color,#fff) 90%,transparent) 62%,
            color-mix(in srgb,var(--hero-overlay-color,#fff) 72%,transparent) 100%
        );
    }
    .cms-hero-slide .hero-copy,
    .cms-hero-fallback .hero-copy{
        background:color-mix(in srgb,var(--hero-overlay-color,#fff) 84%,transparent);
        color:var(--hero-text-color,#111827);
    }
    .product-spec-list{grid-template-columns:1fr}
    .technical-drawing-media{min-height:240px}
}


/* Exact CMS banner sizing */
.cms-hero-slider,
.cms-hero-slider > .cms-hero-slide,
.cms-hero-fallback {
    height: var(--cms-hero-desktop, 620px);
    min-height: var(--cms-hero-desktop, 620px);
}
@media (max-width:700px) {
    .cms-hero-slider,
    .cms-hero-slider > .cms-hero-slide,
    .cms-hero-fallback {
        height: var(--cms-hero-mobile, 560px);
        min-height: var(--cms-hero-mobile, 560px);
    }
}

/* =========================================================
   Language-safe layout: Arabic + long Google translations
   Keeps the site shell stable while allowing RTL text.
   ========================================================= */
html[dir="ltr"] body{
    direction:ltr;
}

/* Keep structural layout LTR even when the selected language is Arabic. */
html.lang-ar .site-header,
html.lang-ar .header-inner,
html.lang-ar .desktop-nav,
html.lang-ar .header-actions,
html.lang-ar .mobile-menu,
html.lang-ar .hero-content,
html.lang-ar .stats-grid,
html.lang-ar .product-grid,
html.lang-ar .sector-grid,
html.lang-ar .engineering-grid,
html.lang-ar .config-teaser,
html.lang-ar .contact-shell,
html.lang-ar .footer-main,
html.lang-ar .footer-bottom{
    direction:ltr;
}

/* Arabic text reads RTL without moving the components themselves. */
html.lang-ar .hero-copy,
html.lang-ar .section-head > div,
html.lang-ar .section-title,
html.lang-ar .section-lead,
html.lang-ar .product-card,
html.lang-ar .sector-card,
html.lang-ar .engineering-copy,
html.lang-ar .feature,
html.lang-ar .config-teaser > div,
html.lang-ar .sim-card,
html.lang-ar .contact-form,
html.lang-ar .contact-info,
html.lang-ar .listing-card,
html.lang-ar .blog-card,
html.lang-ar .cert-card,
html.lang-ar .catalog-card,
html.lang-ar .oem-search,
html.lang-ar .detail-title,
html.lang-ar .article-body,
html.lang-ar .technical-drawing-panel,
html.lang-ar .footer-main > div,
html.lang-ar .footer-bottom{
    direction:rtl;
    text-align:right;
    unicode-bidi:plaintext;
}

html.lang-ar .desktop-nav a,
html.lang-ar .nav-drop-menu a,
html.lang-ar .mobile-menu a,
html.lang-ar .mobile-menu summary{
    direction:rtl;
    unicode-bidi:plaintext;
}

html.lang-ar .hero-copy{
    margin-right:0;
    margin-left:0;
}

html.lang-ar .hero-copy h1{
    letter-spacing:0;
    line-height:1.15;
    font-size:clamp(38px,4.2vw,62px);
}

html.lang-ar .hero-copy > p{
    line-height:1.85;
}

html.lang-ar .hero-buttons{
    direction:rtl;
    justify-content:flex-start;
}

/* Google translations can be much longer than Turkish. Keep headings fluid. */
html[lang="de"] .hero-copy h1,
html[lang="es"] .hero-copy h1,
html[lang="ru"] .hero-copy h1{
    font-size:clamp(38px,4.15vw,62px);
    line-height:1.06;
    letter-spacing:-.025em;
}

html[lang="de"] .hero-copy,
html[lang="es"] .hero-copy,
html[lang="ru"] .hero-copy,
html[lang="ar"] .hero-copy{
    width:min(680px,100%);
    max-width:680px;
}

.hero-copy h1,
.section-title,
.detail-title h1,
.engineering-copy h2,
.contact-form h2,
.config-teaser h2,
.product-card h3,
.sector-card h3,
.listing-card h3,
.blog-card h3,
.catalog-card h3{
    max-width:100%;
    overflow-wrap:anywhere;
    word-break:normal;
    hyphens:auto;
}

.hero-copy > p,
.section-lead,
.product-card p,
.sector-card p,
.listing-card p,
.blog-card p,
.catalog-card p,
.feature span,
.contact-info p,
.footer-main p,
.footer-main a{
    max-width:100%;
    overflow-wrap:anywhere;
}

/* Never allow translated header actions to push the viewport wider. */
.header-inner{
    overflow:visible;
}
.desktop-nav,
.header-actions{
    max-width:100%;
}
.site-header.nav-compact .desktop-nav{
    display:none !important;
}
.site-header.nav-compact .mobile-toggle{
    display:inline-flex !important;
}
.site-header.nav-compact .header-actions{
    min-width:0;
    max-width:calc(100% - 95px);
}
.site-header.nav-compact .header-soft,
.site-header.nav-compact .header-cta{
    flex:0 0 40px;
    width:40px;
    min-width:40px;
    padding:0 !important;
    justify-content:center;
}
.site-header.nav-compact .header-soft span:not(.material-symbols-outlined),
.site-header.nav-compact .header-cta span:not(.material-symbols-outlined){
    display:none !important;
}

/* Drop-downs stay inside the viewport in every language. */
.nav-drop-menu{
    max-width:min(320px,calc(100vw - 24px));
}
.language-panel{
    max-width:calc(100vw - 20px);
}

@media(max-width:900px){
    html[lang="de"] .hero-copy h1,
    html[lang="es"] .hero-copy h1,
    html[lang="ru"] .hero-copy h1,
    html.lang-ar .hero-copy h1{
        font-size:clamp(34px,7vw,50px);
    }
}

@media(max-width:700px){
    html.lang-ar .hero-copy,
    html[lang="de"] .hero-copy,
    html[lang="es"] .hero-copy,
    html[lang="ru"] .hero-copy{
        width:100%;
        max-width:100%;
    }
    html.lang-ar .hero-copy h1,
    html[lang="de"] .hero-copy h1,
    html[lang="es"] .hero-copy h1,
    html[lang="ru"] .hero-copy h1{
        font-size:clamp(30px,9.4vw,40px);
        line-height:1.12;
    }
    html.lang-ar .hero-buttons{
        direction:rtl;
    }
    .header-actions{
        min-width:0;
    }
}


/* =========================================================
   Full-page language switch
   The page is translated while hidden, then revealed once.
   ========================================================= */
html.tst-language-ready .site-header,
html.tst-language-ready main,
html.tst-language-ready .site-footer {
    animation: tstLanguagePageReveal .24s ease both;
}

@keyframes tstLanguagePageReveal {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Keep the structural shell stable for Arabic.
   Only actual content text uses RTL rules below. */
html.lang-ar,
html.lang-ar body {
    direction: ltr !important;
}

/* Google may add its own translated RTL class. Do not let it reverse
   the complete website grid/header structure. */
html.lang-ar.translated-rtl body,
html.lang-ar body.translated-rtl {
    direction: ltr !important;
}

html.lang-ar .hero-copy,
html.lang-ar .article-body,
html.lang-ar .product-card,
html.lang-ar .listing-card,
html.lang-ar .blog-card,
html.lang-ar .cert-card,
html.lang-ar .catalog-card,
html.lang-ar .contact-form,
html.lang-ar .contact-info,
html.lang-ar .footer-main > div {
    direction: rtl;
    text-align: right;
}