/* =====================================================
   RODA INDUSTRI HEAVY DUTY DALTON
   STYLE.CSS
   STEP 1 — FOUNDATION
===================================================== */


/* =====================================================
   GOOGLE FONT
===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Manrope:wght@500;600;700;800&display=swap');


/* =====================================================
   ROOT
===================================================== */

:root {

    --primary:
        #f58220;

    --primary-dark:
        #d9650b;

    --primary-light:
        #fff3e8;

    --dark:
        #111827;

    --dark-soft:
        #1f2937;

    --text:
        #374151;

    --text-light:
        #6b7280;

    --white:
        #ffffff;

    --background:
        #f8fafc;

    --surface:
        #ffffff;

    --border:
        #e5e7eb;

    --border-light:
        #eef0f3;

    --success:
        #16a34a;

    --shadow-sm:
        0 4px 15px rgba(15, 23, 42, 0.05);

    --shadow:
        0 12px 35px rgba(15, 23, 42, 0.08);

    --shadow-lg:
        0 22px 55px rgba(15, 23, 42, 0.12);

    --radius-sm:
        10px;

    --radius:
        16px;

    --radius-lg:
        24px;

    --container:
        1180px;

}


/* =====================================================
   RESET
===================================================== */

* {

    margin: 0;
    padding: 0;

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    font-family:
        "Inter",
        sans-serif;

    background:
        var(--background);

    color:
        var(--text);

    line-height:
        1.7;

    overflow-x:
        hidden;

}


img {

    display: block;

    max-width: 100%;

}


a {

    color: inherit;

    text-decoration: none;

}


button,
input,
textarea,
select {

    font: inherit;

}


button {

    cursor: pointer;

}


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

.container {

    width:
        min(
            calc(100% - 40px),
            var(--container)
        );

    margin:
        0 auto;

}


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

.site-header {

    position: sticky;

    top: 0;

    z-index: 1000;

    width: 100%;

    background:
        rgba(255, 255, 255, 0.94);

    border-bottom:
        1px solid rgba(220, 228, 235, 0.85);

    backdrop-filter:
        blur(16px);

    -webkit-backdrop-filter:
        blur(16px);
}


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

.header-container {

    width:
        min(
            calc(100% - 48px),
            var(--container)
        );

    min-height:
        72px;

    margin:
        0 auto;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;
}


/* =========================================================
   BRAND / LOGO
========================================================= */

.brand {

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-start;

    width:
        145px;

    height:
        46px;

    flex:
        0 0 145px;

    overflow:
        hidden;

    text-decoration:
        none;
}


/* =========================================================
   LOGO IMAGE
========================================================= */

.brand-logo {

    display:
        block;

    width:
        140px !important;

    height:
        44px !important;

    max-width:
        140px !important;

    max-height:
        44px !important;

    min-width:
        0 !important;

    min-height:
        0 !important;

    object-fit:
        contain !important;

    object-position:
        left center;

    margin:
        0 !important;

    padding:
        0 !important;

    border:
        0;
}


/* =========================================================
   MATIKAN LOGO LAMA
========================================================= */

.brand-mark,
.brand-text {

    display:
        none !important;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 900px) {

    .header-container {

        width:
            min(
                calc(100% - 32px),
                var(--container)
            );

        min-height:
            68px;

        gap:
            20px;
    }


    .brand {

        width:
            125px;

        height:
            40px;

        flex:
            0 0 125px;
    }


    .brand-logo {

        width:
            120px !important;

        height:
            38px !important;

        max-width:
            120px !important;

        max-height:
            38px !important;
    }

}


@media (max-width: 600px) {

    .header-container {

        min-height:
            62px;

        gap:
            14px;
    }


    .brand {

        width:
            110px;

        height:
            34px;

        flex:
            0 0 110px;
    }


    .brand-logo {

        width:
            105px !important;

        height:
            32px !important;

        max-width:
            105px !important;

        max-height:
            32px !important;
    }

}


/* =====================================================
   NAVIGATION
===================================================== */

.main-nav {

    display:
        flex;

    align-items:
        center;

    gap:
        30px;

}


.main-nav a {

    position:
        relative;

    font-size:
        14px;

    font-weight:
        600;

    color:
        var(--text);

    transition:
        color 0.25s ease;

}


.main-nav a::after {

    content:
        "";

    position:
        absolute;

    left:
        0;

    bottom:
        -7px;

    width:
        0;

    height:
        2px;

    border-radius:
        999px;

    background:
        var(--primary);

    transition:
        width 0.25s ease;

}


.main-nav a:hover {

    color:
        var(--primary);

}


.main-nav a:hover::after {

    width:
        100%;

}


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

.btn {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        48px;

    padding:
        0 22px;

    border-radius:
        10px;

    border:
        1px solid transparent;

    font-size:
        14px;

    font-weight:
        700;

    transition:
        all 0.25s ease;

}


.btn-primary {

    color:
        var(--white);

    background:
        var(--primary);

    box-shadow:
        0 8px 20px rgba(245, 130, 32, 0.20);

}


.btn-primary:hover {

    background:
        var(--primary-dark);

    transform:
        translateY(-2px);

    box-shadow:
        0 12px 28px rgba(245, 130, 32, 0.28);

}


.btn-outline {

    color:
        var(--dark);

    background:
        var(--white);

    border-color:
        var(--border);

}


.btn-outline:hover {

    color:
        var(--primary);

    border-color:
        var(--primary);

    transform:
        translateY(-2px);

}


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

section {

    position:
        relative;

}


.intro-section,
.models-section,
.advantages-section,
.why-section,
.specification-section,
.applications-section,
.features-section,
.brand-section,
.why-dalton-section,
.faq-section {

    padding:
        100px 0;

}


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

.section-heading {

    max-width:
        760px;

    margin:
        0 auto 55px;

    text-align:
        center;

}


.section-heading > span {

    display:
        inline-block;

    margin-bottom:
        12px;

    padding:
        6px 13px;

    border-radius:
        999px;

    background:
        var(--primary-light);

    color:
        var(--primary-dark);

    font-size:
        12px;

    font-weight:
        800;

    text-transform:
        uppercase;

    letter-spacing:
        0.1em;

}


.section-heading h2 {

    font-family:
        "Manrope",
        sans-serif;

    color:
        var(--dark);

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

    line-height:
        1.15;

    letter-spacing:
        -0.04em;

}


.section-heading h2 strong {

    color:
        var(--primary);

    font-weight:
        800;

}


.section-heading p {

    margin-top:
        18px;

    color:
        var(--text-light);

    font-size:
        15px;

}


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

.hero-product {

    min-height:
        650px;

    display:
        flex;

    align-items:
        center;

    background:
        linear-gradient(
            135deg,
            #111827 0%,
            #1f2937 55%,
            #273449 100%
        );

    overflow:
        hidden;

}


.hero-product::before {

    content:
        "";

    position:
        absolute;

    width:
        520px;

    height:
        520px;

    right:
        -180px;

    top:
        -180px;

    border-radius:
        50%;

    background:
        rgba(245, 130, 32, 0.12);

    filter:
        blur(10px);

}


.hero-product-grid {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    align-items:
        center;

    gap:
        70px;

    padding:
        80px 0;

}


.hero-content {

    position:
        relative;

    z-index:
        2;

}


.hero-eyebrow {

    display:
        inline-block;

    margin-bottom:
        20px;

    color:
        #fdba74;

    font-size:
        13px;

    font-weight:
        700;

    letter-spacing:
        0.06em;

}


.hero-content h1 {

    max-width:
        650px;

    font-family:
        "Manrope",
        sans-serif;

    color:
        var(--white);

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

    line-height:
        1.08;

    letter-spacing:
        -0.045em;

}


.hero-content h1 strong {

    display:
        block;

    color:
        var(--primary);

    font-weight:
        800;

}


.hero-content > p {

    max-width:
        620px;

    margin-top:
        24px;

    color:
        #cbd5e1;

    font-size:
        16px;

}


.hero-badges {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        9px;

    margin-top:
        25px;

}


.hero-badge {

    padding:
        7px 12px;

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

    border-radius:
        999px;

    background:
        rgba(
            255,
            255,
            255,
            0.06
        );

    color:
        #e5e7eb;

    font-size:
        12px;

    font-weight:
        600;

}


.hero-actions {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        12px;

    margin-top:
        32px;

}


.hero-image {

    position:
        relative;

    z-index:
        2;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

}


.hero-image::before {

    content:
        "";

    position:
        absolute;

    width:
        420px;

    height:
        420px;

    border-radius:
        50%;

    background:
        rgba(
            255,
            255,
            255,
            0.06
        );

    filter:
        blur(2px);

}


.hero-image img {

    position:
        relative;

    z-index:
        2;

    width:
        min(
            100%,
            520px
        );

    max-height:
        480px;

    object-fit:
        contain;

    filter:
        drop-shadow(
            0 30px 40px
            rgba(
                0,
                0,
                0,
                0.35
            )
        );

}


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

.intro-section {

    background:
        var(--white);

}


.intro-description {

    max-width:
        900px;

    margin:
        0 auto;

}


.intro-description p {

    margin-bottom:
        18px;

    color:
        var(--text);

    font-size:
        16px;

}


.intro-description p:last-child {

    margin-bottom:
        0;

}


/* =====================================================
   RESPONSIVE FOUNDATION
===================================================== */

@media (max-width: 900px) {

    .site-header .container {

        min-height:
            68px;

    }


    .main-nav {

        display:
            none;

    }


    .hero-product-grid {

        grid-template-columns:
            1fr;

        text-align:
            center;

        gap:
            40px;

    }


    .hero-content > p {

        margin-left:
            auto;

        margin-right:
            auto;

    }


    .hero-badges,
    .hero-actions {

        justify-content:
            center;

    }


    .hero-image img {

        max-height:
            380px;

    }


    .intro-section,
    .models-section,
    .advantages-section,
    .why-section,
    .specification-section,
    .applications-section,
    .features-section,
    .brand-section,
    .why-dalton-section,
    .faq-section {

        padding:
            75px 0;

    }

}


@media (max-width: 600px) {

    .container {

        width:
            min(
                calc(100% - 28px),
                var(--container)
            );

    }


    .hero-product {

        min-height:
            auto;

    }


    .hero-product-grid {

        padding:
            65px 0;

    }


    .hero-content h1 {

        font-size:
            38px;

    }


    .hero-content > p {

        font-size:
            14px;

    }


    .hero-actions {

        flex-direction:
            column;

    }


    .hero-actions .btn {

        width:
            100%;

    }


    .hero-image img {

        max-height:
            300px;

    }


    .section-heading {

        margin-bottom:
            38px;

    }


    .section-heading h2 {

        font-size:
            30px;

    }

}


/* =====================================================
   STEP 2 — PRODUCT / WHEEL TYPES
   RODA HEAVY DUTY DALTON
===================================================== */


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

.models-section {

    position: relative;

    background:
        #f8fafc;

}


.models-section::before {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.75),
            transparent 35%
        );

    pointer-events: none;

}


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

#modelsContainer {

    position: relative;

    display: grid;

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

    gap: 24px;

}


/* =====================================================
   MODEL CARD
===================================================== */

.model-card {

    position: relative;

    display: flex;

    flex-direction: column;

    min-width: 0;

    overflow: hidden;

    background:
        var(--white);

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

    border-radius:
        var(--radius);

    box-shadow:
        var(--shadow-sm);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;

}


.model-card:hover {

    transform:
        translateY(-7px);

    border-color:
        rgba(
            245,
            130,
            32,
            0.35
        );

    box-shadow:
        var(--shadow-lg);

}


/* =====================================================
   MODEL IMAGE
===================================================== */

.model-card-image {

    position:
        relative;

    height:
        300px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;

    background:
        #f4f6f8;

}


.model-card-image::after {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            180deg,
            transparent 65%,
            rgba(
                17,
                24,
                39,
                0.05
            )
        );

    pointer-events:
        none;

}


.model-card-image img {

    width:
        88%;

    height:
        88%;

    object-fit:
        contain;

    transition:
        transform 0.45s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );

}


.model-card:hover
.model-card-image img {

    transform:
        scale(1.06);

}


/* =====================================================
   MODEL NUMBER
===================================================== */

.model-number {

    position:
        absolute;

    top:
        16px;

    left:
        16px;

    z-index:
        5;

    width:
        42px;

    height:
        42px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        10px;

    background:
        var(--dark);

    color:
        var(--white);

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        12px;

    font-weight:
        800;

    letter-spacing:
        0.04em;

}


/* =====================================================
   MODEL TYPE
===================================================== */

.model-type {

    position:
        absolute;

    top:
        18px;

    right:
        16px;

    z-index:
        5;

    padding:
        7px 11px;

    border:
        1px solid
        rgba(
            245,
            130,
            32,
            0.20
        );

    border-radius:
        999px;

    background:
        rgba(
            255,
            255,
            255,
            0.94
        );

    color:
        var(--primary-dark);

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        0.08em;

}


/* =====================================================
   MODEL CONTENT
===================================================== */

.model-card-content {

    display:
        flex;

    flex-direction:
        column;

    flex: 1;

    padding:
        26px 25px 24px;

}


/* =====================================================
   MODEL LABEL
===================================================== */

.model-card-label {

    margin-bottom:
        8px;

    color:
        var(--primary);

    font-size:
        11px;

    font-weight:
        800;

    text-transform:
        uppercase;

    letter-spacing:
        0.10em;

}


/* =====================================================
   MODEL TITLE
===================================================== */

.model-card-content h3 {

    margin-bottom:
        12px;

    color:
        var(--dark);

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        20px;

    line-height:
        1.3;

    letter-spacing:
        -0.025em;

}


/* =====================================================
   MODEL DESCRIPTION
===================================================== */

.model-card-content > p {

    margin-bottom:
        20px;

    color:
        var(--text-light);

    font-size:
        13px;

    line-height:
        1.7;

}


/* =====================================================
   MODEL SPECS
===================================================== */

.model-specs {

    display:
        flex;

    flex-direction:
        column;

    gap:
        9px;

    margin:
        0 0 23px;

    padding:
        17px;

    list-style:
        none;

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

    border-radius:
        12px;

    background:
        #fafafa;

}


.model-specs li {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        9px;

    color:
        var(--text);

    font-size:
        12px;

    line-height:
        1.5;

}


.model-specs li span {

    flex:
        0 0 auto;

    width:
        18px;

    height:
        18px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin-top:
        1px;

    border-radius:
        50%;

    background:
        var(--primary-light);

    color:
        var(--primary-dark);

    font-size:
        10px;

    font-weight:
        900;

}


/* =====================================================
   MODEL DETAIL LINK
===================================================== */

.model-detail-link {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    margin-top:
        auto;

    padding:
        13px 15px;

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

    border-radius:
        10px;

    color:
        var(--dark);

    background:
        var(--white);

    font-size:
        13px;

    font-weight:
        700;

    transition:
        all 0.25s ease;

}


.model-detail-link span {

    color:
        var(--primary);

    font-size:
        18px;

    line-height:
        1;

    transition:
        transform 0.25s ease;

}


.model-detail-link:hover {

    border-color:
        var(--primary);

    color:
        var(--primary);

    background:
        var(--primary-light);

}


.model-detail-link:hover span {

    transform:
        translateX(5px);

}


/* =====================================================
   EMPTY MODEL
===================================================== */

.empty-models {

    grid-column:
        1 / -1;

    padding:
        45px 20px;

    text-align:
        center;

    border:
        1px dashed var(--border);

    border-radius:
        var(--radius);

    background:
        var(--white);

    color:
        var(--text-light);

}


/* =====================================================
   IMAGE PLACEHOLDER
===================================================== */

.image-placeholder {

    position:
        absolute;

    inset:
        0;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        6px;

    background:
        #f1f3f5;

    color:
        var(--dark);

}


.image-placeholder span {

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        24px;

    font-weight:
        800;

}


.image-placeholder small {

    color:
        var(--text-light);

    font-size:
        11px;

}


/* =====================================================
   PRODUCT COUNT / OPTIONAL
===================================================== */

.models-count {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    margin-bottom:
        25px;

}


.models-count span {

    color:
        var(--text-light);

    font-size:
        13px;

}


.models-count strong {

    color:
        var(--dark);

}


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

@media (max-width: 1000px) {

    #modelsContainer {

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

    }


    .model-card-image {

        height:
            270px;

    }

}


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

@media (max-width: 650px) {

    #modelsContainer {

        grid-template-columns:
            1fr;

        gap:
            18px;

    }


    .model-card-image {

        height:
            280px;

    }


    .model-card-content {

        padding:
            22px 20px 20px;

    }


    .model-card-content h3 {

        font-size:
            18px;

    }


    .model-card-content > p {

        font-size:
            13px;

    }

}


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

@media (max-width: 400px) {

    .model-card-image {

        height:
            245px;

    }


    .model-number {

        width:
            38px;

        height:
            38px;

        top:
            12px;

        left:
            12px;

    }


    .model-type {

        top:
            13px;

        right:
            12px;

        padding:
            6px 9px;

    }

}





/* =====================================================
   STEP 3 — ADVANTAGES / WHY / SPECIFICATION
   RODA HEAVY DUTY DALTON
===================================================== */


/* =====================================================
   ADVANTAGES
===================================================== */

#advantagesContainer {

    display: grid;

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

    gap: 22px;

}


.advantage-card {

    position: relative;

    min-height: 215px;

    padding: 28px 26px;

    overflow: hidden;

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

    border-radius: var(--radius);

    background: var(--white);

    box-shadow: var(--shadow-sm);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;

}


.advantage-card::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 4px;
    height: 0;

    background: var(--primary);

    transition:
        height 0.35s ease;

}


.advantage-card:hover {

    transform:
        translateY(-7px);

    border-color:
        rgba(245, 130, 32, 0.35);

    box-shadow:
        var(--shadow-lg);

}


.advantage-card:hover::before {

    height: 100%;

}


/* =====================================================
   ADVANTAGE NUMBER
===================================================== */

.advantage-number {

    position: absolute;

    top: 12px;
    right: 20px;

    color:
        rgba(17, 24, 39, 0.055);

    font-family:
        "Manrope",
        sans-serif;

    font-size: 58px;

    font-weight: 900;

    line-height: 1;

}


/* =====================================================
   ADVANTAGE ICON
===================================================== */

.advantage-icon {

    width: 46px;
    height: 46px;

    display: flex;

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

    margin-bottom: 20px;

    border-radius: 12px;

    background:
        var(--primary-light);

    color:
        var(--primary-dark);

    font-size: 17px;

    font-weight: 900;

}


.advantage-card h3 {

    position: relative;

    margin: 0 0 10px;

    color:
        var(--dark);

    font-family:
        "Manrope",
        sans-serif;

    font-size: 17px;

    font-weight: 800;

    line-height: 1.35;

}


.advantage-card p {

    position: relative;

    margin: 0;

    color:
        var(--text-light);

    font-size: 13px;

    line-height: 1.7;

}


/* =====================================================
   WHY CHOOSE DALTON
===================================================== */

#whyChooseContainer {

    display: grid;

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

    gap: 18px;

}


.why-card {

    position: relative;

    display: grid;

    grid-template-columns:
        50px 1fr;

    gap: 16px;

    padding: 22px;

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

    border-radius: 14px;

    background:
        var(--white);

    box-shadow:
        var(--shadow-sm);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;

}


.why-card:hover {

    transform:
        translateY(-5px);

    border-color:
        rgba(245, 130, 32, 0.3);

    box-shadow:
        var(--shadow-md);

}


.why-icon {

    width: 50px;
    height: 50px;

    display: flex;

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

    border-radius: 13px;

    background:
        var(--dark);

    color:
        var(--white);

    font-size: 15px;

    font-weight: 900;

}


.why-card h3 {

    margin:
        2px 0 7px;

    color:
        var(--dark);

    font-family:
        "Manrope",
        sans-serif;

    font-size: 16px;

    font-weight: 800;

    line-height: 1.35;

}


.why-card p {

    margin: 0;

    color:
        var(--text-light);

    font-size: 13px;

    line-height: 1.65;

}


/* =====================================================
   SPECIFICATION
===================================================== */

.specification-table,
.specification-card {

    overflow: hidden;

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

    border-radius:
        var(--radius);

    background:
        var(--white);

    box-shadow:
        var(--shadow-sm);

}


#specificationContainer {

    width: 100%;

}


#specificationContainer tr {

    transition:
        background 0.2s ease;

}


#specificationContainer tr:hover {

    background:
        #fafafa;

}


#specificationContainer th,
#specificationContainer td {

    padding:
        17px 21px;

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

    text-align:
        left;

    vertical-align:
        middle;

}


#specificationContainer th {

    width:
        34%;

    color:
        var(--dark);

    background:
        #f7f8fa;

    font-size:
        12px;

    font-weight:
        800;

}


#specificationContainer td {

    color:
        var(--text-light);

    font-size:
        13px;

    font-weight:
        600;

}


#specificationContainer tr:last-child th,
#specificationContainer tr:last-child td {

    border-bottom:
        0;

}


/* =====================================================
   APPLICATIONS
===================================================== */

#applicationsContainer {

    display: grid;

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

    gap: 13px;

}


.application-item {

    display: flex;

    align-items: center;

    gap: 11px;

    min-height: 60px;

    padding:
        13px 15px;

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

    border-radius:
        11px;

    background:
        var(--white);

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

}


.application-item:hover {

    transform:
        translateY(-4px);

    border-color:
        rgba(245, 130, 32, 0.35);

    background:
        var(--primary-light);

    box-shadow:
        var(--shadow-sm);

}


.application-icon {

    flex:
        0 0 auto;

    width: 27px;
    height: 27px;

    display: flex;

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

    border-radius:
        50%;

    background:
        var(--primary);

    color:
        var(--white);

    font-size:
        10px;

    font-weight:
        900;

}


.application-item strong {

    color:
        var(--dark);

    font-size:
        12px;

    font-weight:
        700;

    line-height:
        1.4;

}


/* =====================================================
   FEATURES
===================================================== */

#featuresContainer {

    display: grid;

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

    gap: 15px;

}


.feature-item {

    display: flex;

    align-items: flex-start;

    gap: 15px;

    padding:
        19px;

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

    border-radius:
        12px;

    background:
        var(--white);

    box-shadow:
        var(--shadow-sm);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;

}


.feature-item:hover {

    transform:
        translateY(-4px);

    border-color:
        rgba(245, 130, 32, 0.3);

    box-shadow:
        var(--shadow-md);

}


.feature-number {

    flex:
        0 0 auto;

    width: 34px;
    height: 34px;

    display: flex;

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

    border-radius:
        9px;

    background:
        var(--dark);

    color:
        var(--white);

    font-size:
        10px;

    font-weight:
        800;

}


.feature-item strong {

    display: block;

    margin-bottom: 5px;

    color:
        var(--dark);

    font-size:
        13px;

    font-weight:
        800;

    line-height:
        1.5;

}


.feature-item p {

    margin: 0;

    color:
        var(--text-light);

    font-size:
        12px;

    line-height:
        1.65;

}


/* =====================================================
   WHY DALTON
===================================================== */

#whyContainer {

    display: grid;

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

    gap: 13px;

}


.why-item {

    display: flex;

    align-items: center;

    gap: 11px;

    padding:
        16px;

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

    border-radius:
        11px;

    background:
        var(--white);

    transition:
        transform 0.25s ease,
        background 0.25s ease,
        border-color 0.25s ease;

}


.why-item:hover {

    transform:
        translateY(-3px);

    background:
        var(--primary-light);

    border-color:
        rgba(245, 130, 32, 0.3);

}


.why-check {

    flex:
        0 0 auto;

    width: 26px;
    height: 26px;

    display: flex;

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

    border-radius:
        50%;

    background:
        var(--primary);

    color:
        var(--white);

    font-size:
        10px;

    font-weight:
        900;

}


.why-item strong {

    color:
        var(--dark);

    font-size:
        12px;

    font-weight:
        700;

    line-height:
        1.5;

}


/* =====================================================
   EMPTY STATE
===================================================== */

.empty-models {

    grid-column:
        1 / -1;

    padding:
        50px 20px;

    text-align:
        center;

    border:
        1px dashed var(--border);

    border-radius:
        var(--radius);

    background:
        var(--white);

    color:
        var(--text-light);

}


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

@media (max-width: 1000px) {

    #advantagesContainer {

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

    }


    #applicationsContainer {

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

    }


    #whyContainer {

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

    }

}


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

@media (max-width: 650px) {

    #advantagesContainer {

        grid-template-columns:
            1fr;

        gap:
            16px;

    }


    #whyChooseContainer {

        grid-template-columns:
            1fr;

        gap:
            15px;

    }


    #featuresContainer {

        grid-template-columns:
            1fr;

        gap:
            13px;

    }


    #applicationsContainer {

        grid-template-columns:
            1fr;

        gap:
            10px;

    }


    #whyContainer {

        grid-template-columns:
            1fr;

        gap:
            10px;

    }


    .advantage-card {

        min-height:
            auto;

    }


    #specificationContainer th,
    #specificationContainer td {

        padding:
            14px 13px;

    }


    #specificationContainer th {

        width:
            40%;

        font-size:
            11px;

    }


    #specificationContainer td {

        font-size:
            12px;

    }

}


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

@media (max-width: 400px) {

    .why-card {

        grid-template-columns:
            42px 1fr;

        gap:
            12px;

        padding:
            18px;

    }


    .why-icon {

        width:
            42px;

        height:
            42px;

    }


    .feature-item {

        padding:
            16px;

    }


    .advantage-card {

        padding:
            23px 20px;

    }

}




/* =====================================================
   STEP 4 — FAQ / SHIPPING / CTA
   RODA HEAVY DUTY DALTON
===================================================== */


/* =====================================================
   SHIPPING
===================================================== */

.shipping-card {

    position: relative;

    padding: 30px 32px;

    overflow: hidden;

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

    border-radius: var(--radius);

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f8f9fb 100%
        );

    box-shadow:
        var(--shadow-sm);

}


.shipping-card::before {

    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 5px;
    height: 100%;

    background:
        var(--primary);

}


.shipping-card h3 {

    margin:
        0 0 10px;

    color:
        var(--dark);

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        20px;

    font-weight:
        800;

}


.shipping-card p {

    max-width:
        850px;

    margin:
        0;

    color:
        var(--text-light);

    font-size:
        14px;

    line-height:
        1.8;

}


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

#faqContainer {

    max-width:
        920px;

    margin:
        0 auto;

}


/* =====================================================
   FAQ ITEM
===================================================== */

.faq-item {

    margin-bottom:
        12px;

    overflow:
        hidden;

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

    border-radius:
        13px;

    background:
        var(--white);

    box-shadow:
        var(--shadow-sm);

    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease;

}


.faq-item:hover {

    border-color:
        rgba(245, 130, 32, 0.28);

}


.faq-item.active {

    border-color:
        rgba(245, 130, 32, 0.45);

    box-shadow:
        var(--shadow-md);

}


/* =====================================================
   FAQ QUESTION
===================================================== */

.faq-question {

    width:
        100%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    padding:
        21px 23px;

    border:
        0;

    background:
        transparent;

    color:
        var(--dark);

    cursor:
        pointer;

    text-align:
        left;

    font-family:
        inherit;

}


.faq-question > span {

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    font-size:
        14px;

    font-weight:
        750;

    line-height:
        1.5;

}


.faq-question small {

    flex:
        0 0 auto;

    width:
        31px;

    height:
        31px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        8px;

    background:
        var(--dark);

    color:
        var(--white);

    font-size:
        10px;

    font-weight:
        800;

}


.faq-question b {

    flex:
        0 0 auto;

    width:
        32px;

    height:
        32px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        #f2f3f5;

    color:
        var(--dark);

    font-size:
        19px;

    font-weight:
        500;

    line-height:
        1;

    transition:
        transform 0.3s ease,
        background 0.3s ease,
        color 0.3s ease;

}


.faq-item.active
.faq-question b {

    transform:
        rotate(45deg);

    background:
        var(--primary);

    color:
        var(--white);

}


/* =====================================================
   FAQ ANSWER
===================================================== */

.faq-answer {

    display:
        grid;

    grid-template-rows:
        0fr;

    transition:
        grid-template-rows 0.35s ease;

}


.faq-answer p {

    min-height:
        0;

    overflow:
        hidden;

    margin:
        0;

    padding:
        0 23px;

    color:
        var(--text-light);

    font-size:
        13px;

    line-height:
        1.8;

    transition:
        padding 0.35s ease;

}


.faq-item.active
.faq-answer {

    grid-template-rows:
        1fr;

}


.faq-item.active
.faq-answer p {

    padding:
        0 23px 23px 68px;

}


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

.cta-section {

    position:
        relative;

    overflow:
        hidden;

    padding:
        55px 40px;

    border-radius:
        22px;

    background:
        var(--dark);

    box-shadow:
        var(--shadow-lg);

}


.cta-section::before {

    content:
        "";

    position:
        absolute;

    width:
        280px;

    height:
        280px;

    right:
        -100px;

    top:
        -130px;

    border-radius:
        50%;

    background:
        rgba(245, 130, 32, 0.16);

}


.cta-section::after {

    content:
        "";

    position:
        absolute;

    width:
        180px;

    height:
        180px;

    left:
        -80px;

    bottom:
        -100px;

    border-radius:
        50%;

    background:
        rgba(255,255,255,0.035);

}


.cta-content {

    position:
        relative;

    z-index:
        2;

    max-width:
        850px;

    margin:
        0 auto;

    text-align:
        center;

}


.cta-content h2 {

    margin:
        0 0 13px;

    color:
        var(--white);

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        clamp(25px, 4vw, 36px);

    font-weight:
        850;

    line-height:
        1.2;

}


.cta-content p {

    max-width:
        680px;

    margin:
        0 auto 27px;

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

    font-size:
        14px;

    line-height:
        1.75;

}


/* =====================================================
   CTA BUTTON
===================================================== */

.cta-content .btn,
#ctaWhatsapp {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    min-height:
        50px;

    padding:
        0 27px;

    border:
        0;

    border-radius:
        10px;

    background:
        var(--primary);

    color:
        var(--white);

    font-size:
        13px;

    font-weight:
        800;

    text-decoration:
        none;

    box-shadow:
        0 8px 22px
        rgba(245, 130, 32, 0.24);

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

}


.cta-content .btn:hover,
#ctaWhatsapp:hover {

    transform:
        translateY(-3px);

    background:
        var(--primary-dark);

    box-shadow:
        0 12px 28px
        rgba(245, 130, 32, 0.32);

}


/* =====================================================
   WHATSAPP BUTTON
===================================================== */

#heroWhatsapp,
#headerWhatsapp,
#priceWhatsapp,
#ctaWhatsapp,
#footerWhatsapp {

    text-decoration:
        none;

}


#heroWhatsapp:not(.btn),
#headerWhatsapp:not(.btn),
#priceWhatsapp:not(.btn),
#footerWhatsapp:not(.btn) {

    cursor:
        pointer;

}


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

.footer-product-name {

    color:
        inherit;

    font-weight:
        800;

}


/* =====================================================
   RESPONSIVE FAQ
===================================================== */

@media (max-width: 650px) {

    .shipping-card {

        padding:
            24px 21px;

    }


    .shipping-card h3 {

        font-size:
            18px;

    }


    .shipping-card p {

        font-size:
            13px;

    }


    .faq-question {

        padding:
            17px 15px;

        gap:
            12px;

    }


    .faq-question > span {

        gap:
            10px;

        font-size:
            12px;

    }


    .faq-question small {

        width:
            27px;

        height:
            27px;

        font-size:
            9px;

    }


    .faq-question b {

        width:
            28px;

        height:
            28px;

        font-size:
            17px;

    }


    .faq-item.active
    .faq-answer p {

        padding:
            0 15px 19px 52px;

        font-size:
            12px;

        line-height:
            1.75;

    }


    .cta-section {

        padding:
            42px 22px;

        border-radius:
            17px;

    }


    .cta-content h2 {

        font-size:
            25px;

    }


    .cta-content p {

        font-size:
            13px;

    }


    .cta-content .btn,
    #ctaWhatsapp {

        width:
            100%;

    }

}


/* =====================================================
   ACCESSIBILITY / FOCUS
===================================================== */

.faq-question:focus-visible,
.cta-content .btn:focus-visible,
#ctaWhatsapp:focus-visible {

    outline:
        3px solid
        rgba(245, 130, 32, 0.35);

    outline-offset:
        3px;

}





/* =========================================================
   RODA HEAVY DUTY DALTON
   STEP 4 — PROFESSIONAL LAYOUT OVERRIDE
   ========================================================= */


/* =========================================================
   1. GLOBAL RESET
   ========================================================= */

html {
    width: 100%;
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
}

body {
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;

    font-family:
        Inter,
        "Segoe UI",
        Arial,
        sans-serif;

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

    color: #182536;
    background: #ffffff;

    overflow-x: hidden;
}

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


/* =========================================================
   2. GLOBAL CONTAINER
   ========================================================= */

.container {
    width: min(1180px, calc(100% - 48px)) !important;
    max-width: 1180px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    padding-left: 0 !important;
    padding-right: 0 !important;
}


/* =========================================================
   3. HEADER
   ========================================================= */

.site-header {
    width: 100%;
    min-height: 72px;

    background: #ffffff;

    border-bottom: 1px solid #e9edf2;

    display: flex;
    align-items: center;

    position: relative;
    z-index: 100;
}

.site-header .container {
    min-height: 72px;

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

.site-header .logo {
    color: #0b1f33;

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

    text-decoration: none;
}

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

.main-nav a {
    color: #344054;

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

    text-decoration: none;

    transition:
        color .2s ease;
}

.main-nav a:hover {
    color: #ff7800;
}


/* =========================================================
   4. HERO
   ========================================================= */

.hero-product {
    width: 100%;

    min-height: 560px;

    padding: 80px 0;

    background:
        radial-gradient(
            circle at 88% 20%,
            rgba(255, 122, 0, .20),
            transparent 220px
        ),
        radial-gradient(
            circle at 60% 45%,
            rgba(255, 255, 255, .08),
            transparent 180px
        ),
        linear-gradient(
            135deg,
            #0b1728 0%,
            #14263b 55%,
            #20334b 100%
        );

    color: #ffffff;
}

.hero-product-grid {
    min-height: 400px;

    display: grid !important;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(400px, .85fr) !important;

    align-items: center;

    gap: 70px;
}

.hero-content {
    max-width: 650px;
}

.hero-eyebrow {
    display: inline-flex;

    padding: 8px 14px;

    margin-bottom: 20px;

    border-radius: 999px;

    background: #ff9d00;

    color: #111827;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: .3px;
}

.hero-content h1,
#heroProductName {
    margin: 0 0 22px;

    color: #ffffff;

    font-size: clamp(42px, 5vw, 68px);

    line-height: 1.02;

    font-weight: 900;

    letter-spacing: -2px;
}

.hero-content h1 strong {
    display: block;

    color: #ff8a00;
}

.hero-content > p,
#heroShortDescription {
    max-width: 620px;

    margin: 0 0 25px;

    color: #d8e0ea;

    font-size: 16px;

    line-height: 1.8;
}

.hero-badges {
    display: flex;

    flex-wrap: wrap;

    gap: 9px;

    margin-bottom: 28px;
}

.hero-badge {
    padding: 7px 12px;

    border: 1px solid rgba(255,255,255,.20);

    border-radius: 999px;

    background: rgba(255,255,255,.08);

    color: #ffffff;

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

.hero-actions {
    display: flex;

    flex-wrap: wrap;

    gap: 12px;
}

.hero-image {
    width: 100%;

    min-height: 380px;

    display: flex;

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

.hero-image img {
    display: block;

    width: 100%;
    max-width: 560px;

    max-height: 420px;

    object-fit: contain;

    filter:
        drop-shadow(
            0 30px 45px rgba(0,0,0,.30)
        );
}


/* =========================================================
   5. BUTTON
   ========================================================= */

.btn {
    display: inline-flex;

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

    min-height: 46px;

    padding: 0 22px;

    border-radius: 9px;

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

    text-decoration: none;

    cursor: pointer;

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

.btn:hover {
    transform: translateY(-2px);
}

.btn-primary {
    background: #ff7800;

    color: #ffffff;

    box-shadow:
        0 8px 20px rgba(255,120,0,.25);
}

.btn-primary:hover {
    background: #e96800;
}

.btn-outline {
    background: transparent;

    color: inherit;

    border: 1px solid currentColor;
}


/* =========================================================
   6. ALL SECTIONS
   ========================================================= */

.intro-section,
.models-section,
.advantages-section,
.why-section,
.specification-section,
.applications-section,
.features-section,
.brand-section,
.why-dalton-section,
.faq-section,
.shipping-section {
    width: 100%;

    padding: 100px 0;
}


/* =========================================================
   7. ALTERNATING BACKGROUNDS
   ========================================================= */

.models-section,
.specification-section,
.faq-section {
    background: #f7f9fc;
}

.advantages-section,
.applications-section,
.brand-section,
.why-dalton-section,
.shipping-section {
    background: #ffffff;
}


/* =========================================================
   8. SECTION HEADING
   ========================================================= */

.section-heading {
    width: 100% !important;

    max-width: 850px !important;

    margin: 0 auto 55px !important;

    text-align: center;
}

.section-heading > span {
    display: inline-block;

    margin-bottom: 12px;

    color: #ff7800;

    font-size: 11px;

    font-weight: 900;

    letter-spacing: 2px;

    text-transform: uppercase;
}

.section-heading h2 {
    margin: 0;

    color: #102438;

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

    line-height: 1.15;

    font-weight: 900;

    letter-spacing: -1px;
}

.section-heading h2 strong {
    color: #ff7800;
}

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

    margin: 16px auto 0;

    color: #667085;

    font-size: 15px;

    line-height: 1.8;
}


/* =========================================================
   9. INTRO
   ========================================================= */

.intro-description {
    width: 100%;

    max-width: 850px;

    margin: 0 auto;
}

.intro-description p {
    margin: 0 0 18px;

    color: #596778;

    font-size: 16px;

    line-height: 1.9;

    text-align: left;
}

.intro-description p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   10. MODEL GRID
   ========================================================= */

.models-grid {
    width: 100% !important;

    max-width: 1100px !important;

    margin: 0 auto;

    display: grid !important;

    grid-template-columns:
        repeat(3, minmax(0, 1fr)) !important;

    gap: 24px !important;
}

.model-card {
    width: 100%;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid #e4e9ef;

    border-radius: 16px;

    box-shadow:
        0 10px 35px rgba(15, 35, 55, .07);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.model-card:hover {
    transform: translateY(-7px);

    box-shadow:
        0 18px 45px rgba(15, 35, 55, .13);
}

.model-card-image {
    position: relative;

    width: 100%;

    height: 250px;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #f5f7fa,
            #e9edf2
        );
}

.model-card-image img {
    width: 100%;
    height: 100%;

    object-fit: contain;

    padding: 25px;

    display: block;
}

.model-number {
    position: absolute;

    top: 14px;
    left: 14px;

    z-index: 2;

    width: 34px;
    height: 34px;

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

    border-radius: 9px;

    background: #0b1f33;

    color: #ffffff;

    font-size: 11px;
    font-weight: 900;
}

.model-type {
    position: absolute;

    top: 15px;
    right: 15px;

    z-index: 2;

    padding: 6px 10px;

    border-radius: 999px;

    background: #ffffff;

    color: #ff7800;

    border: 1px solid #ffd7b0;

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

.model-card-content {
    padding: 25px;
}

.model-card-label {
    margin-bottom: 8px;

    color: #ff7800;

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

    letter-spacing: .7px;

    text-transform: uppercase;
}

.model-card-content h3 {
    margin: 0 0 12px;

    color: #102438;

    font-size: 20px;

    line-height: 1.3;

    font-weight: 850;
}

.model-card-content p {
    margin: 0 0 18px;

    color: #667085;

    font-size: 13px;

    line-height: 1.7;
}

.model-specs {
    margin: 0 0 20px;

    padding: 15px;

    list-style: none;

    background: #f7f9fc;

    border-radius: 10px;
}

.model-specs li {
    display: flex;

    gap: 8px;

    margin-bottom: 7px;

    color: #526173;

    font-size: 12px;

    line-height: 1.5;
}

.model-specs li:last-child {
    margin-bottom: 0;
}

.model-specs li span {
    color: #ff7800;

    font-weight: 900;
}

.model-detail-link {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 11px 16px;

    border-radius: 8px;

    background: #0b1f33;

    color: #ffffff;

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

    text-decoration: none;
}

.model-detail-link:hover {
    background: #ff7800;
}


/* =========================================================
   11. ADVANTAGES
   ========================================================= */

.advantages-grid {
    width: 100%;

    display: grid;

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

    gap: 20px;
}

.advantage-card {
    padding: 30px 25px;

    background: #ffffff;

    border: 1px solid #e7ebf0;

    border-radius: 15px;

    box-shadow:
        0 8px 25px rgba(15,35,55,.06);
}

.advantage-icon {
    width: 48px;
    height: 48px;

    margin-bottom: 18px;

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

    border-radius: 12px;

    background: #fff2e7;

    color: #ff7800;

    font-size: 20px;
    font-weight: 900;
}

.advantage-card h3 {
    margin: 0 0 10px;

    color: #102438;

    font-size: 18px;
}

.advantage-card p {
    margin: 0;

    color: #667085;

    font-size: 13px;

    line-height: 1.7;
}


/* =========================================================
   12. WHY CHOOSE
   ========================================================= */

.why-grid {
    width: 100%;

    display: grid;

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

    gap: 20px;
}

.why-card {
    display: flex;

    gap: 18px;

    padding: 25px;

    background: #ffffff;

    border: 1px solid #e5e9ef;

    border-radius: 14px;

    box-shadow:
        0 8px 25px rgba(15,35,55,.05);
}

.why-icon {
    width: 44px;
    height: 44px;

    flex: 0 0 44px;

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

    border-radius: 10px;

    background: #0b1f33;

    color: #ffffff;

    font-weight: 900;
}

.why-card h3 {
    margin: 0 0 7px;

    color: #102438;

    font-size: 16px;
}

.why-card p {
    margin: 0;

    color: #667085;

    font-size: 13px;

    line-height: 1.7;
}


/* =========================================================
   13. SPECIFICATION
   ========================================================= */

.specification-table-wrapper {
    width: 100%;

    max-width: 1000px;

    margin: 0 auto;

    overflow-x: auto;

    background: #ffffff;

    border-radius: 14px;

    box-shadow:
        0 10px 35px rgba(15,35,55,.07);
}

.specification-table {
    width: 100%;

    border-collapse: collapse;

    font-size: 14px;
}

.specification-table th,
.specification-table td {
    padding: 17px 20px;

    border-bottom: 1px solid #e8ecf1;

    text-align: left;
}

.specification-table th {
    width: 35%;

    background: #f4f6f8;

    color: #102438;

    font-weight: 800;
}

.specification-table td {
    color: #596778;
}


/* =========================================================
   14. APPLICATIONS
   ========================================================= */

.applications-grid {
    width: 100%;

    display: grid;

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

    gap: 15px;
}

.application-item {
    padding: 18px;

    display: flex;

    align-items: center;

    gap: 12px;

    background: #f7f9fc;

    border: 1px solid #e5e9ef;

    border-radius: 10px;
}

.application-icon {
    width: 30px;
    height: 30px;

    flex: 0 0 30px;

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

    border-radius: 50%;

    background: #ff7800;

    color: #ffffff;

    font-size: 12px;
    font-weight: 900;
}

.application-item strong {
    color: #24364a;

    font-size: 13px;
}


/* =========================================================
   15. FEATURES
   ========================================================= */

.features-grid {
    width: 100%;

    display: grid;

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

    gap: 15px 25px;
}

.feature-item {
    display: flex;

    gap: 18px;

    padding: 22px;

    border: 1px solid #e6eaf0;

    border-radius: 12px;

    background: #ffffff;
}

.feature-number {
    color: #ff7800;

    font-size: 13px;

    font-weight: 900;
}

.feature-item strong {
    color: #102438;

    font-size: 14px;
}

.feature-item p {
    margin: 6px 0 0;

    color: #667085;

    font-size: 13px;
}


/* =========================================================
   16. BRAND
   ========================================================= */

.brand-grid {
    width: 100%;

    max-width: 1000px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        repeat(5, minmax(0, 1fr));

    gap: 15px;
}

.brand-item {
    min-height: 75px;

    display: flex;

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

    padding: 15px;

    background: #ffffff;

    border: 1px solid #e4e9ef;

    border-radius: 12px;

    color: #25364a;

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

    text-align: center;

    box-shadow:
        0 6px 20px rgba(15,35,55,.05);

    transition:
        transform .2s ease,
        border-color .2s ease;
}

.brand-item:hover {
    transform: translateY(-3px);

    border-color: #ff7800;

    color: #ff7800;
}


/* =========================================================
   17. WHY DALTON
   ========================================================= */

.why-dalton-grid {
    width: 100%;

    display: grid;

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

    gap: 15px;
}

.why-item {
    display: flex;

    align-items: center;

    gap: 12px;

    padding: 18px;

    border-radius: 10px;

    background: #f7f9fc;

    border: 1px solid #e6eaf0;
}

.why-check {
    width: 28px;
    height: 28px;

    flex: 0 0 28px;

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

    border-radius: 50%;

    background: #ff7800;

    color: #ffffff;

    font-size: 11px;
    font-weight: 900;
}

.why-item strong {
    color: #24364a;

    font-size: 13px;
}


/* =========================================================
   18. FAQ
   ========================================================= */

.faq-section {
    padding: 100px 0;
}

.faq-container {
    width: 100% !important;

    max-width: 900px !important;

    margin: 0 auto !important;

    display: flex !important;

    flex-direction: column;

    gap: 12px;
}

.faq-item {
    width: 100%;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid #e4e9ef;

    border-radius: 12px;

    box-shadow:
        0 5px 20px rgba(15,35,55,.05);
}

.faq-question {
    width: 100%;

    min-height: 68px;

    padding: 18px 22px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    border: 0;

    background: #ffffff;

    color: #102438;

    font-size: 14px;

    font-weight: 750;

    text-align: left;

    cursor: pointer;
}

.faq-question span {
    display: flex;

    align-items: center;

    gap: 14px;

    flex: 1;
}

.faq-question small {
    width: 30px;
    height: 30px;

    flex: 0 0 30px;

    display: flex;

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

    border-radius: 8px;

    background: #0b1f33;

    color: #ffffff;

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

.faq-question b {
    width: 32px;
    height: 32px;

    flex: 0 0 32px;

    display: flex;

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

    border-radius: 50%;

    background: #f0f3f6;

    color: #102438;

    font-size: 18px;

    transition:
        transform .3s ease,
        background .3s ease;
}

.faq-item.active .faq-question {
    color: #ff7800;
}

.faq-item.active .faq-question b {
    transform: rotate(45deg);

    background: #ff7800;

    color: #ffffff;
}

.faq-answer {
    max-height: 0;

    overflow: hidden;

    padding: 0 24px;

    transition:
        max-height .35s ease,
        padding .35s ease;
}

.faq-item.active .faq-answer {
    max-height: 500px;

    padding: 0 24px 24px;
}

.faq-answer p {
    margin: 0;

    padding-top: 18px;

    border-top: 1px solid #edf0f3;

    color: #667085;

    font-size: 14px;

    line-height: 1.8;
}


/* =========================================================
   19. SHIPPING
   ========================================================= */

.shipping-section {
    padding: 70px 0;
}

.shipping-card {
    width: 100%;

    max-width: 950px;

    margin: 0 auto;

    padding: 45px;

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            #0b1f33,
            #16466f
        );

    color: #ffffff;

    text-align: center;

    box-shadow:
        0 20px 45px rgba(11,31,51,.18);
}

.shipping-label {
    color: #ff9d00;

    font-size: 11px;

    font-weight: 900;

    letter-spacing: 2px;
}

.shipping-card h3 {
    margin: 10px 0;

    font-size: 30px;
}

.shipping-card p {
    max-width: 700px;

    margin: 0 auto;

    color: #dce6f0;

    font-size: 14px;
}


/* =========================================================
   20. CTA
   ========================================================= */

.cta-section {
    width: 100%;

    padding: 100px 0;

    background:
        linear-gradient(
            135deg,
            #ff7800,
            #ff9d00
        );
}

.cta-box {
    max-width: 900px;

    margin: 0 auto;

    padding: 55px;

    border-radius: 20px;

    background: #ffffff;

    text-align: center;

    box-shadow:
        0 20px 50px rgba(0,0,0,.15);
}

.cta-box > span {
    color: #ff7800;

    font-size: 12px;

    font-weight: 900;

    letter-spacing: 1px;

    text-transform: uppercase;
}

.cta-box h2 {
    margin: 12px 0 15px;

    color: #102438;

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

    line-height: 1.15;
}

.cta-box p {
    max-width: 700px;

    margin: 0 auto 25px;

    color: #667085;

    font-size: 14px;

    line-height: 1.8;
}

.cta-actions {
    display: flex;

    justify-content: center;

    gap: 12px;
}


/* =========================================================
   21. FOOTER
   ========================================================= */

.site-footer {
    width: 100%;

    padding: 35px 0;

    background: #091522;

    color: #ffffff;
}

.site-footer .container {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;
}

.footer-product {
    display: flex;

    flex-direction: column;

    gap: 3px;
}

.footer-product strong {
    color: #ff7800;

    font-size: 11px;

    text-transform: uppercase;
}

.footer-product-name {
    font-size: 15px;

    font-weight: 700;
}

.footer-contact a {
    color: #ffffff;

    font-size: 13px;

    font-weight: 700;

    text-decoration: none;
}


/* =========================================================
   22. SEARCH TAGS
   INI HARUS HILANG DARI TAMPILAN
   ========================================================= */

.search-tags {
    display: none !important;

    width: 0 !important;
    height: 0 !important;

    overflow: hidden !important;

    visibility: hidden !important;
}


/* =========================================================
   23. EMPTY MODEL
   ========================================================= */

.empty-models {
    width: 100%;

    padding: 50px;

    border-radius: 15px;

    background: #ffffff;

    color: #667085;

    text-align: center;
}


/* =========================================================
   24. IMAGE PLACEHOLDER
   ========================================================= */

.image-placeholder {
    width: 100%;
    height: 100%;

    display: flex;

    flex-direction: column;

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

    gap: 8px;

    background:
        linear-gradient(
            145deg,
            #edf1f5,
            #dfe5eb
        );

    color: #7a8795;

    text-align: center;
}

.image-placeholder span {
    color: #0b1f33;

    font-size: 25px;

    font-weight: 900;
}

.image-placeholder small {
    font-size: 11px;
}


/* =========================================================
   25. MOBILE
   ========================================================= */

@media (max-width: 900px) {

    .hero-product-grid {
        grid-template-columns: 1fr !important;

        gap: 40px;

        text-align: center;
    }

    .hero-content {
        max-width: 750px;

        margin: 0 auto;
    }

    .hero-badges,
    .hero-actions {
        justify-content: center;
    }

    .hero-image {
        min-height: 300px;
    }

    .models-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }

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

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

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

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

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


@media (max-width: 600px) {

    .container {
        width: calc(100% - 28px) !important;
    }

    .site-header .container {
        min-height: 60px;
    }

    .main-nav {
        display: none;
    }

    .hero-product {
        padding: 60px 0;
    }

    .hero-content h1,
    #heroProductName {
        font-size: 38px;
        letter-spacing: -1px;
    }

    .hero-content > p,
    #heroShortDescription {
        font-size: 14px;
    }

    .intro-section,
    .models-section,
    .advantages-section,
    .why-section,
    .specification-section,
    .applications-section,
    .features-section,
    .brand-section,
    .why-dalton-section,
    .faq-section {
        padding: 70px 0;
    }

    .models-grid,
    .advantages-grid,
    .why-grid,
    .applications-grid,
    .why-dalton-grid {
        grid-template-columns: 1fr !important;
    }

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

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

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

    .cta-box {
        padding: 35px 20px;
    }

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

    .cta-actions .btn {
        width: 100%;
    }

    .site-footer .container {
        flex-direction: column;

        align-items: flex-start;
    }
}



/* =========================================================
   STEP 5 — QUICK INFO CLEANUP
   ========================================================= */

/* Sembunyikan quick info yang tidak memiliki section HTML */
.quick-info,
.quick-info-section,
.product-quick-info,
.hero-quick-info,
.quickInfo,
.quick-info-grid {
    display: none !important;
}


/* =========================================================
   RAPATKAN BAGIAN SETELAH HERO
   ========================================================= */

.intro-section {
    padding-top: 80px !important;
    padding-bottom: 90px !important;
}


/* =========================================================
   SECTION TENTANG PRODUK
   ========================================================= */

.intro-section .section-heading {
    margin-bottom: 38px !important;
}


/* =========================================================
   INTRO TEXT LEBIH PROFESIONAL
   ========================================================= */

.intro-description {
    max-width: 850px !important;
}

.intro-description p {
    font-size: 15px !important;

    line-height: 1.85 !important;

    color: #5d6978 !important;

    margin-bottom: 18px !important;
}


/* =========================================================
   JENIS RODA
   ========================================================= */

.models-section {
    padding-top: 90px !important;
    padding-bottom: 100px !important;
}

.models-section .section-heading {
    margin-bottom: 45px !important;
}