/* =====================================================
   TANGGA DORONG ALUMINIUM DALTON
   STYLE.CSS
   PROFESSIONAL INDUSTRIAL DESIGN
===================================================== */


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

:root {

    --navy:
        #0b1b2b;

    --navy-2:
        #10283d;

    --blue:
        #145da0;

    --blue-light:
        #eaf4fb;

    --orange:
        #ff7a00;

    --orange-light:
        #fff1e4;

    --yellow:
        #ffb703;

    --white:
        #ffffff;

    --bg:
        #f6f8fb;

    --bg-soft:
        #eef3f7;

    --text:
        #14202b;

    --text-light:
        #66717d;

    --border:
        #dce3ea;

    --shadow:
        0 15px 40px rgba(
            11,
            27,
            43,
            0.08
        );

    --shadow-hover:
        0 22px 55px rgba(
            11,
            27,
            43,
            0.14
        );

    --radius:
        18px;

    --container:
        1180px;

}


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

* {

    margin:
        0;

    padding:
        0;

    box-sizing:
        border-box;

}


html {

    scroll-behavior:
        smooth;

}


body {

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    background:
        var(--white);

    color:
        var(--text);

    line-height:
        1.7;

    overflow-x:
        hidden;

}


img {

    max-width:
        100%;

    height:auto;

}


a {

    color:
        inherit;

    text-decoration:
        none;

}


button,
input {

    font:
        inherit;

}


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

.container {

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

    margin:
        0 auto;

}


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

.site-header {

    position: sticky;

    top: 0;

    z-index: 1000;

    width: 100%;

    height: 68px;

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

    backdrop-filter: blur(14px);

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

    border-bottom:
        1px solid rgba(220, 227, 234, 0.8);

}


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

.site-header .container {

    width: 100%;

    max-width: var(--container);

    height: 68px;

    min-height: 68px;

    margin: 0 auto;

    padding-left: 24px;
    padding-right: 24px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    overflow: hidden;

}


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

.logo {

    display: flex !important;

    align-items: center;

    justify-content: flex-start;

    flex: 0 0 auto;

    width: 145px !important;

    height: 42px !important;

    max-width: 145px !important;

    max-height: 42px !important;

    min-width: 145px !important;

    min-height: 42px !important;

    margin: 0 !important;

    padding: 0 !important;

    overflow: hidden;

    text-decoration: none;

    color: transparent;

    font-size: 0;

    line-height: 0;

}


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

.logo img {

    display: block !important;

    width: 145px !important;

    height: 42px !important;

    max-width: 145px !important;

    max-height: 42px !important;

    min-width: 0 !important;

    min-height: 0 !important;

    margin: 0 !important;

    padding: 0 !important;

    border: 0 !important;

    object-fit: contain !important;

    object-position: left center !important;

}


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

.logo::before,
.logo::after {

    display: none !important;

    content: none !important;

}


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

.site-header {

    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
    height: 68px;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(220, 227, 234, 0.8);

    /* tambahan: kunci tinggi header agar tidak ada yang bisa tumpah keluar */
    overflow: hidden;
}

/* jaring pengaman: paksa SEMUA gambar di dalam header, apapun class-nya,
   untuk tidak lebih besar dari tinggi header */
.site-header img {
    max-height: 42px !important;
    width: auto !important;
    object-fit: contain !important;
}

.site-header nav {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 25px;

    flex: 0 0 auto;

    height: 68px;

    white-space: nowrap;

}


/* =====================================================
   NAV LINK
===================================================== */

.site-header nav a {

    display: inline-flex;

    align-items: center;

    height: 68px;

    color: var(--gray-600, #5b6675);

    font-size: 12px;

    font-weight: 600;

    line-height: 1;

    white-space: nowrap;

    text-decoration: none;

    transition:
        color .2s ease;

}


.site-header nav a:hover {

    color: var(--orange, #f58220);

}


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

@media (max-width: 900px) {

    .site-header {

        height: 62px;

    }

    .site-header .container {

        height: 62px;

        min-height: 62px;

        padding-left: 18px;
        padding-right: 18px;

        gap: 18px;

    }

    /* LOGO */
.logo{
    display:flex;
    align-items:center;
    flex:0 0 auto;

    width:150px;
    height:42px;

    overflow:hidden;
}

/* WAJIB ADA */
.logo img{
    width:150px !important;
    height:42px !important;

    max-width:150px !important;
    max-height:42px !important;

    object-fit:contain;
    object-position:left center;

    display:block;
}

    .site-header nav {

        height: 62px;

        gap: 18px;

    }

    .site-header nav a {

        height: 62px;

        font-size: 11px;

    }

}


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

@media (max-width: 600px) {

    .site-header {

        height: 58px;

    }

    .site-header .container {

        height: 58px;

        min-height: 58px;

        padding-left: 14px;
        padding-right: 14px;

        gap: 12px;

    }

    .logo {

        width: 95px !important;

        height: 30px !important;

        max-width: 95px !important;

        max-height: 30px !important;

        min-width: 95px !important;

        min-height: 30px !important;

    }

    .logo img {

        width: 95px !important;

        height: 30px !important;

        max-width: 95px !important;

        max-height: 30px !important;

    }

    .site-header nav {

        height: 58px;

        gap: 12px;

        overflow: hidden;

    }

    .site-header nav a {

        height: 58px;

        font-size: 9px;

    }

}

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

.main-nav {

    display:
        flex;

    align-items:
        center;

    gap:
        28px;

}


.main-nav a {

    position:
        relative;

    font-size:
        14px;

    font-weight:
        600;

    color:
        #52606d;

    transition:
        color 0.25s ease;

}


.main-nav a::after {

    content:
        "";

    position:
        absolute;

    left:
        0;

    bottom:
        -7px;

    width:
        0;

    height:
        2px;

    border-radius:
        2px;

    background:
        var(--orange);

    transition:
        width 0.25s ease;

}


.main-nav a:hover {

    color:
        var(--orange);

}


.main-nav a:hover::after {

    width:
        100%;

}


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

.hero-product {

    position:
        relative;

    padding:
        90px 0;

    background:
        linear-gradient(
            135deg,
            #081725 0%,
            #102b43 55%,
            #173e5b 100%
        );

    overflow:
        hidden;

}


.hero-product::before {

    content:
        "";

    position:
        absolute;

    width:
        500px;

    height:
        500px;

    border-radius:
        50%;

    right:
        -180px;

    top:
        -250px;

    background:
        rgba(
            255,
            122,
            0,
            0.12
        );

}


.hero-product::after {

    content:
        "";

    position:
        absolute;

    width:
        280px;

    height:
        280px;

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

    border-radius:
        50%;

    right:
        160px;

    bottom:
        -180px;

}


.hero-product-grid {

    position:
        relative;

    z-index:
        2;

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    align-items:
        center;

    gap:
        70px;

}


.hero-content {

    max-width:
        600px;

}


.hero-eyebrow {

    display:
        inline-flex;

    align-items:
        center;

    padding:
        8px 14px;

    margin-bottom:
        20px;

    border:
        1px solid
        rgba(
            255,
            183,
            3,
            0.4
        );

    border-radius:
        999px;

    background:
        rgba(
            255,
            183,
            3,
            0.1
        );

    color:
        #ffd166;

    font-size:
        12px;

    font-weight:
        800;

    text-transform:
        uppercase;

    letter-spacing:
        0.8px;

}


.hero-content h1 {

    margin-bottom:
        20px;

    color:
        var(--white);

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

    line-height:
        1.04;

    letter-spacing:
        -2px;

    font-weight:
        900;

}


.hero-content h1 strong {

    display:
        block;

    color:
        var(--orange);

}


.hero-content > p {

    max-width:
        590px;

    margin-bottom:
        24px;

    color:
        #c7d3df;

    font-size:
        16px;

}


.hero-badges {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        9px;

    margin-bottom:
        28px;

}


.hero-badge {

    padding:
        6px 11px;

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

    border-radius:
        999px;

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

    color:
        #e8eef4;

    font-size:
        11px;

    font-weight:
        700;

}


.hero-actions {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        12px;

}


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

.btn {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        46px;

    padding:
        0 20px;

    border-radius:
        10px;

    font-size:
        13px;

    font-weight:
        800;

    transition:
        all 0.25s ease;

    cursor:
        pointer;

}


.btn-primary {

    background:
        var(--orange);

    color:
        var(--white);

    box-shadow:
        0 10px 25px
        rgba(
            255,
            122,
            0,
            0.25
        );

}


.btn-primary:hover {

    background:
        #e96800;

    transform:
        translateY(-2px);

    box-shadow:
        0 14px 30px
        rgba(
            255,
            122,
            0,
            0.32
        );

}


.btn-outline {

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

    color:
        var(--white);

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

}


.btn-outline:hover {

    background:
        var(--white);

    color:
        var(--navy);

}


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

.hero-image {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        460px;

}


.hero-image::before {

    content:
        "";

    position:
        absolute;

    width:
        430px;

    height:
        430px;

    border-radius:
        50%;

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

}


.hero-image img {

    position:
        relative;

    z-index:
        2;

    width:
        min(
            100%,
            570px
        );

    max-height:
        500px;

    object-fit:
        contain;

    border-radius:
        18px;

    filter:
        drop-shadow(
            0 25px 45px
            rgba(
                0,
                0,
                0,
                0.3
            )
        );

}


/* =====================================================
   QUICK INFO
===================================================== */

.quick-info-section {

    position:
        relative;

    z-index:
        5;

    margin-top:
        -35px;

}


.quick-info-grid {

    display:
        grid;

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

    gap:
        14px;

}


.quick-info-card {

    padding:
        22px;

    background:
        var(--white);

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

    border-radius:
        14px;

    box-shadow:
        var(--shadow);

}


.quick-info-card span {

    display:
        block;

    margin-bottom:
        5px;

    color:
        var(--text-light);

    font-size:
        11px;

    font-weight:
        700;

    text-transform:
        uppercase;

}


.quick-info-card strong {

    color:
        var(--navy);

    font-size:
        17px;

}


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

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

    padding:
        100px 0;

}


.intro-section,
.advantages-section,
.specification-section,
.brand-section,
.faq-section {

    background:
        var(--bg);

}


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

.section-heading {

    max-width:
        780px;

    margin:
        0 auto 50px;

    text-align:
        center;

}


.section-heading > span {

    display:
        inline-block;

    margin-bottom:
        10px;

    color:
        var(--orange);

    font-size:
        11px;

    font-weight:
        900;

    text-transform:
        uppercase;

    letter-spacing:
        1.5px;

}


.section-heading h2 {

    color:
        var(--navy);

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

    line-height:
        1.15;

    letter-spacing:
        -1px;

    font-weight:
        900;

}


.section-heading h2 strong {

    color:
        var(--orange);

}


.section-heading p {

    max-width:
        680px;

    margin:
        14px auto 0;

    color:
        var(--text-light);

    font-size:
        14px;

}


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

.intro-description {

    max-width:
        820px;

    margin:
        auto;

}


.intro-description p {

    margin-bottom:
        18px;

    color:
        #566370;

    font-size:
        15px;

    line-height:
        1.9;

}


.intro-description p:last-child {

    margin-bottom:
        0;

}


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

.models-grid {

    display:
        grid;

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

    gap:
        24px;

}


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

.model-card {

    overflow:
        hidden;

    background:
        var(--white);

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

    border-radius:
        var(--radius);

    box-shadow:
        var(--shadow);

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

}


.model-card:hover {

    transform:
        translateY(-7px);

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

}


/* =========================================================
   MODEL PRODUCT IMAGE
   RASIO 570 × 348 — LANDSCAPE
========================================================= */

.model-card-image {
    position: relative;

    width: 100%;

    aspect-ratio: 570 / 348;

    height: auto;

    overflow: hidden;

    background: #eef2f6;

    display: flex;

    align-items: center;

    justify-content: center;
}


.model-card-image img {
    display: block;

    width: 100%;

    height: 100%;

    object-fit: contain;

    padding: 5px;

    box-sizing: border-box;

    transform: scale(1.25);

    transition: transform 0.3s ease;
}


.model-card:hover .model-card-image img {
    transform: scale(1.3);
}

.model-number {

    position:
        absolute;

    top:
        15px;

    left:
        15px;

    width:
        35px;

    height:
        35px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        10px;

    background:
        var(--navy);

    color:
        var(--white);

    font-size:
        11px;

    font-weight:
        900;

}


.model-type {

    position:
        absolute;

    top:
        18px;

    right:
        15px;

    padding:
        5px 9px;

    border-radius:
        999px;

    background:
        var(--orange-light);

    color:
        var(--orange);

    font-size:
        9px;

    font-weight:
        900;

}


.model-card-content {

    padding:
        26px;

}


.model-card-label {

    margin-bottom:
        8px;

    color:
        var(--orange);

    font-size:
        10px;

    font-weight:
        900;

    text-transform:
        uppercase;

    letter-spacing:
        1px;

}


.model-card-content h3 {

    margin-bottom:
        12px;

    color:
        var(--navy);

    font-size:
        19px;

    line-height:
        1.35;

}


.model-card-content > p {

    margin-bottom:
        18px;

    color:
        var(--text-light);

    font-size:
        13px;

}


.model-specs {

    list-style:
        none;

    margin-bottom:
        22px;

    padding:
        16px;

    border-radius:
        12px;

    background:
        var(--bg);

}


.model-specs li {

    display:
        flex;

    gap:
        8px;

    margin-bottom:
        8px;

    color:
        #52606d;

    font-size:
        12px;

}


.model-specs li:last-child {

    margin-bottom:
        0;

}


.model-specs li span {

    color:
        #1ba34a;

    font-weight:
        900;

}


.model-detail-link {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    padding:
        11px 15px;

    border-radius:
        9px;

    background:
        var(--navy);

    color:
        var(--white);

    font-size:
        12px;

    font-weight:
        800;

    transition:
        all 0.25s ease;

}


.model-detail-link:hover {

    background:
        var(--orange);

    transform:
        translateX(3px);

}


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

.empty-models {

    grid-column:
        1 / -1;

    padding:
        50px;

    text-align:
        center;

    color:
        var(--text-light);

}


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

.advantages-grid {

    display:
        grid;

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

    gap:
        22px;

}


.advantage-card {

    position:
        relative;

    padding:
        32px;

    background:
        var(--white);

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

    border-radius:
        var(--radius);

    box-shadow:
        var(--shadow);

    transition:
        transform 0.25s ease;

}


.advantage-card:hover {

    transform:
        translateY(-5px);

}


.advantage-number {

    position:
        absolute;

    top:
        18px;

    right:
        20px;

    color:
        #e6ebf0;

    font-size:
        30px;

    font-weight:
        900;

}


.advantage-icon {

    width:
        48px;

    height:
        48px;

    margin-bottom:
        20px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        14px;

    background:
        var(--orange-light);

    color:
        var(--orange);

    font-size:
        20px;

    font-weight:
        900;

}


.advantage-card h3 {

    margin-bottom:
        9px;

    color:
        var(--navy);

    font-size:
        18px;

}


.advantage-card p {

    color:
        var(--text-light);

    font-size:
        13px;

}


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

.why-grid {

    display:
        grid;

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

    gap:
        18px;

}


.why-card {

    display:
        flex;

    gap:
        15px;

    padding:
        24px;

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

    border-radius:
        14px;

    background:
        var(--white);

    transition:
        all 0.25s ease;

}


.why-card:hover {

    border-color:
        rgba(
            255,
            122,
            0,
            0.4
        );

    box-shadow:
        var(--shadow);

    transform:
        translateY(-3px);

}


.why-icon {

    flex:
        0 0 42px;

    width:
        42px;

    height:
        42px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        12px;

    background:
        var(--navy);

    color:
        var(--white);

    font-weight:
        900;

}


.why-card h3 {

    margin-bottom:
        5px;

    color:
        var(--navy);

    font-size:
        15px;

}


.why-card p {

    color:
        var(--text-light);

    font-size:
        12px;

}


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

.specification-table-wrapper {

    overflow-x:
        auto;

    background:
        var(--white);

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

    border-radius:
        16px;

    box-shadow:
        var(--shadow);

}


.specification-table {

    width:
        100%;

    border-collapse:
        collapse;

}


.specification-table tr {

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

}


.specification-table tr:last-child {

    border-bottom:
        0;

}


.specification-table th,
.specification-table td {

    padding:
        18px 22px;

    text-align:
        left;

    font-size:
        13px;

}


.specification-table th {

    width:
        35%;

    background:
        #f7f9fb;

    color:
        var(--navy);

    font-weight:
        800;

}


.specification-table td {

    color:
        #566370;

}


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

.applications-grid {

    display:
        grid;

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

    gap:
        14px;

}


.application-item {

    min-height:
        100px;

    padding:
        22px 15px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        9px;

    text-align:
        center;

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

    border-radius:
        14px;

    background:
        var(--white);

    transition:
        all 0.25s ease;

}


.application-item:hover {

    transform:
        translateY(-4px);

    box-shadow:
        var(--shadow);

    border-color:
        var(--orange);

}


.application-icon {

    width:
        34px;

    height:
        34px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        var(--orange-light);

    color:
        var(--orange);

    font-weight:
        900;

}


.application-item strong {

    color:
        var(--navy);

    font-size:
        12px;

}


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

.features-grid {

    display:
        grid;

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

    gap:
        16px;

}


.feature-item {

    display:
        flex;

    gap:
        18px;

    padding:
        24px;

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

    border-radius:
        14px;

    background:
        var(--white);

}


.feature-number {

    flex:
        0 0 42px;

    width:
        42px;

    height:
        42px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        11px;

    background:
        var(--navy);

    color:
        var(--white);

    font-size:
        11px;

    font-weight:
        900;

}


.feature-item strong {

    display:
        block;

    margin-bottom:
        5px;

    color:
        var(--navy);

    font-size:
        15px;

}


.feature-item p {

    color:
        var(--text-light);

    font-size:
        12px;

}


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

.brand-grid {

    display:
        grid;

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

    gap:
        14px;

}


.brand-item {

    min-height:
        75px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        15px;

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

    border-radius:
        12px;

    background:
        var(--white);

    color:
        var(--navy);

    font-size:
        13px;

    font-weight:
        800;

    box-shadow:
        0 6px 20px
        rgba(
            11,
            27,
            43,
            0.04
        );

}


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

.why-dalton-grid {

    display:
        grid;

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

    gap:
        14px;

}


.why-item {

    display:
        flex;

    align-items:
        center;

    gap:
        13px;

    padding:
        18px 20px;

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

    border-radius:
        12px;

    background:
        var(--white);

}


.why-check {

    flex:
        0 0 30px;

    width:
        30px;

    height:
        30px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        #e8f8ee;

    color:
        #1a9b48;

    font-weight:
        900;

}


.why-item strong {

    color:
        var(--navy);

    font-size:
        13px;

}


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

.shipping-section {

    background:
        var(--navy);

}


.shipping-card {

    padding:
        50px;

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

    border-radius:
        20px;

    background:
        linear-gradient(
            135deg,
            #10283d,
            #173e5b
        );

    box-shadow:
        0 25px 60px
        rgba(
            0,
            0,
            0,
            0.2
        );

}


.shipping-label {

    display:
        inline-block;

    margin-bottom:
        10px;

    color:
        #ffb703;

    font-size:
        11px;

    font-weight:
        900;

    letter-spacing:
        1.5px;

}


.shipping-content h3 {

    margin-bottom:
        10px;

    color:
        var(--white);

    font-size:
        28px;

}


.shipping-content p {

    max-width:
        750px;

    color:
        #c8d5df;

    font-size:
        14px;

}


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

.cta-section {

    padding:
        100px 0;

    background:
        linear-gradient(
            135deg,
            #ff7a00,
            #ff9d32
        );

}


.cta-box {

    padding:
        65px 40px;

    text-align:
        center;

    border-radius:
        24px;

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

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

}


.cta-box > span {

    display:
        inline-block;

    margin-bottom:
        10px;

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

    font-size:
        12px;

    font-weight:
        900;

    text-transform:
        uppercase;

    letter-spacing:
        1.3px;

}


.cta-box h2 {

    max-width:
        800px;

    margin:
        0 auto 15px;

    color:
        var(--white);

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

    line-height:
        1.15;

}


.cta-box p {

    max-width:
        720px;

    margin:
        0 auto 25px;

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

    font-size:
        14px;

}


.cta-actions {

    display:
        flex;

    justify-content:
        center;

    flex-wrap:
        wrap;

    gap:
        12px;

}


.cta-actions .btn-primary {

    background:
        var(--navy);

}


.cta-actions .btn-outline {

    border-color:
        var(--white);

}


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

.faq-container {

    max-width:
        850px;

    margin:
        0 auto;

}


.faq-item {

    margin-bottom:
        10px;

    overflow:
        hidden;

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

    border-radius:
        12px;

    background:
        var(--white);

}


.faq-question {

    width:
        100%;

    min-height:
        62px;

    padding:
        16px 20px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    border:
        0;

    background:
        var(--white);

    color:
        var(--navy);

    text-align:
        left;

    font-size:
        13px;

    font-weight:
        800;

    cursor:
        pointer;

}


.faq-question span {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

}


.faq-question small {

    color:
        var(--orange);

    font-size:
        10px;

}


.faq-question b {

    width:
        28px;

    height:
        28px;

    flex:
        0 0 28px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        var(--bg);

    color:
        var(--navy);

    transition:
        transform 0.25s ease;

}


.faq-answer {

    display:
        grid;

    grid-template-rows:
        0fr;

    transition:
        grid-template-rows 0.3s ease;

}


.faq-answer p {

    min-height:
        0;

    overflow:
        hidden;

    padding:
        0 20px;

    color:
        var(--text-light);

    font-size:
        13px;

}


.faq-item.active .faq-answer {

    grid-template-rows:
        1fr;

}


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

    padding:
        0 20px 20px;

}


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

    transform:
        rotate(45deg);

    background:
        var(--orange);

    color:
        var(--white);

}


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

.site-footer {

    padding:
        35px 0;

    background:
        #07131f;

    color:
        #aebbc7;

}


.site-footer .container {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

}


.footer-product {

    display:
        flex;

    flex-direction:
        column;

    gap:
        4px;

}


.footer-product strong {

    color:
        var(--orange);

    font-size:
        11px;

    text-transform:
        uppercase;

}


.footer-product-name {

    color:
        var(--white);

    font-size:
        14px;

    font-weight:
        700;

}


.footer-contact a {

    display:
        inline-flex;

    padding:
        10px 16px;

    border-radius:
        9px;

    background:
        #1aa260;

    color:
        var(--white);

    font-size:
        12px;

    font-weight:
        800;

}


/* =====================================================
   SEARCH TAGS
===================================================== */

.search-tags {

    max-width:
        1100px;

    margin:
        0 auto;

    padding:
        18px 20px;

    color:
        transparent;

    font-size:
        1px;

    line-height:
        1px;

    user-select:
        none;

    opacity:
        0;

    height:
        1px;

    overflow:
        hidden;

}


/* =====================================================
   ERROR PAGE
===================================================== */

.page-error {

    min-height:
        100vh;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        30px;

    background:
        var(--bg);

}


.error-card {

    width:
        min(
            100%,
            500px
        );

    padding:
        45px;

    text-align:
        center;

    background:
        var(--white);

    border-radius:
        20px;

    box-shadow:
        var(--shadow);

}


.error-icon {

    width:
        60px;

    height:
        60px;

    margin:
        0 auto 20px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        #fff0f0;

    color:
        #d93025;

    font-size:
        28px;

    font-weight:
        900;

}


.error-card h1 {

    margin-bottom:
        10px;

    color:
        var(--navy);

}


.error-card p {

    margin-bottom:
        25px;

    color:
        var(--text-light);

    font-size:
        14px;

}


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

@media (
    max-width: 1000px
) {

    .hero-product-grid {

        grid-template-columns:
            1fr;

        gap:
            45px;

    }


    .hero-content {

        max-width:
            760px;

        margin:
            auto;

        text-align:
            center;

    }


    .hero-eyebrow {

        margin-left:
            auto;

        margin-right:
            auto;

    }


    .hero-content > p {

        margin-left:
            auto;

        margin-right:
            auto;

    }


    .hero-badges,
    .hero-actions {

        justify-content:
            center;

    }


    .hero-image {

        min-height:
            400px;

    }


    .models-grid {

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

    }


    .advantages-grid,
    .why-grid {

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

    }


    .applications-grid {

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

    }


    .brand-grid {

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

    }


    .quick-info-grid {

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

    }

}


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

@media (
    max-width: 680px
) {

    .container {

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

    }


    .site-header .container {

        min-height:
            62px;

    }


    .logo {

        font-size:
            20px;

    }


    .main-nav {

        display:
            none;

    }


    .hero-product {

        padding:
            60px 0;

    }


    .hero-content h1 {

        font-size:
            38px;

        letter-spacing:
            -1.5px;

    }


    .hero-content > p {

        font-size:
            14px;

    }


    .hero-image {

        min-height:
            300px;

    }


    .hero-image::before {

        width:
            280px;

        height:
            280px;

    }


    .quick-info-section {

        margin-top:
            -20px;

    }


    .quick-info-grid {

        grid-template-columns:
            1fr 1fr;

        gap:
            10px;

    }


    .quick-info-card {

        padding:
            16px;

    }


    .quick-info-card strong {

        font-size:
            14px;

    }


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

        padding:
            70px 0;

    }


    .section-heading {

        margin-bottom:
            35px;

    }


    .section-heading h2 {

        font-size:
            28px;

    }


    .models-grid,
    .advantages-grid,
    .why-grid,
    .features-grid,
    .why-dalton-grid {

        grid-template-columns:
            1fr;

    }


    .applications-grid {

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

    }


    .brand-grid {

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

    }


    .model-card-image {

        min-height:
            250px;

    }


    .model-card-image img {

        height:
            230px;

    }


    .specification-table th,
    .specification-table td {

        padding:
            14px;

        font-size:
            12px;

    }


    .shipping-card {

        padding:
            35px 24px;

    }


    .cta-section {

        padding:
            70px 0;

    }


    .cta-box {

        padding:
            45px 22px;

    }


    .cta-box h2 {

        font-size:
            29px;

    }


    .site-footer .container {

        flex-direction:
            column;

        align-items:
            flex-start;

    }

}


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

@media (
    max-width: 420px
) {

    .quick-info-grid {

        grid-template-columns:
            1fr;

    }


    .applications-grid,
    .brand-grid {

        grid-template-columns:
            1fr;

    }


    .hero-content h1 {

        font-size:
            32px;

    }


    .hero-actions {

        flex-direction:
            column;

    }


    .hero-actions .btn {

        width:
            100%;

    }


    .cta-actions {

        flex-direction:
            column;

    }


    .cta-actions .btn {

        width:
            100%;

    }

}



/* =====================================================
   STEP 2
   PREMIUM INDUSTRIAL POLISH
   TANGGA DORONG ALUMINIUM DALTON
===================================================== */


/* =====================================================
   1. GLOBAL TEXT IMPROVEMENT
===================================================== */

body {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}


/* =====================================================
   2. HERO - PREMIUM DETAIL
===================================================== */

.hero-product {
    isolation: isolate;
}


.hero-product-grid {
    min-height: 560px;
}


.hero-content {
    animation: heroContentIn 0.8s ease both;
}


.hero-image {
    animation: heroImageIn 0.9s ease 0.15s both;
}


@keyframes heroContentIn {

    from {
        opacity: 0;
        transform: translateY(25px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


@keyframes heroImageIn {

    from {
        opacity: 0;
        transform: translateX(35px) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }

}


/* =====================================================
   3. HERO IMAGE FRAME
===================================================== */

.hero-image {
    padding: 25px;
}


.hero-image img {
    padding: 8px;
    background: #ffffff;
    border: 1px solid rgba(255,255,255,0.16);
    box-shadow:
        0 30px 70px rgba(0,0,0,0.30),
        0 0 0 1px rgba(255,255,255,0.05);
    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease;
}


.hero-image:hover img {
    transform: translateY(-6px) scale(1.015);

    box-shadow:
        0 38px 85px rgba(0,0,0,0.38),
        0 0 0 1px rgba(255,255,255,0.08);
}


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

.hero-eyebrow::before {
    content: "●";
    margin-right: 7px;
    color: #ffb703;
    font-size: 8px;
}


/* =====================================================
   5. QUICK INFO PREMIUM
===================================================== */

.quick-info-section {
    position: relative;
}


.quick-info-grid {
    position: relative;
}


.quick-info-card {
    position: relative;
    overflow: hidden;

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


.quick-info-card::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 4px;
    height: 100%;

    background: var(--orange);

    transform: scaleY(0);
    transform-origin: bottom;

    transition:
        transform 0.3s ease;
}


.quick-info-card:hover {
    transform: translateY(-5px);

    border-color:
        rgba(255,122,0,0.3);

    box-shadow:
        0 18px 40px rgba(11,27,43,0.12);
}


.quick-info-card:hover::before {
    transform: scaleY(1);
}


/* =====================================================
   6. SECTION BACKGROUND DECORATION
===================================================== */

.intro-section,
.models-section,
.advantages-section,
.why-section,
.specification-section,
.applications-section,
.features-section,
.brand-section,
.why-dalton-section,
.faq-section {
    position: relative;
    overflow: hidden;
}


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

    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    border-radius: 50%;

    background:
        rgba(255,122,0,0.025);

    pointer-events: none;

}


.intro-section::before,
.advantages-section::before,
.specification-section::before,
.brand-section::before {

    right: -100px;
    top: -80px;

}


.models-section::before,
.why-section::before,
.applications-section::before,
.features-section::before,
.why-dalton-section::before,
.faq-section::before {

    left: -100px;
    bottom: -80px;

}


/* =====================================================
   7. SECTION HEADING IMPROVEMENT
===================================================== */

.section-heading > span {
    position: relative;
}


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

    width: 22px;
    height: 2px;

    margin-right: 8px;

    vertical-align: middle;

    background: var(--orange);

    border-radius: 5px;
}


.section-heading h2 {
    position: relative;
}


/* =====================================================
   8. INTRO CONTENT CARD
===================================================== */

.intro-description {
    position: relative;

    padding:
        38px 42px;

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

    border-radius:
        18px;

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

    box-shadow:
        0 12px 35px rgba(11,27,43,0.05);
}


.intro-description::before {
    content: "“";

    position: absolute;

    top: 5px;
    left: 22px;

    color:
        rgba(255,122,0,0.12);

    font-family:
        Georgia,
        serif;

    font-size:
        90px;

    line-height:
        1;
}


.intro-description p {
    position: relative;
    z-index: 2;
}


/* =====================================================
   9. MODEL CARD PREMIUM
===================================================== */

.model-card {
    position: relative;
}


.model-card::after {

    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 3px;

    background:
        linear-gradient(
            90deg,
            var(--orange),
            var(--yellow)
        );

    transform:
        scaleX(0);

    transform-origin:
        left;

    transition:
        transform 0.35s ease;

}


.model-card:hover::after {
    transform: scaleX(1);
}


.model-card-image {
    overflow: hidden;
}


.model-card-image img {
    transition:
        transform 0.45s ease;
}


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

    transform:
        scale(1.045);

}


/* =====================================================
   10. MODEL NUMBER
===================================================== */

.model-number {
    z-index: 5;

    box-shadow:
        0 7px 18px rgba(11,27,43,0.18);
}


.model-type {
    z-index: 5;
}


/* =====================================================
   11. ADVANTAGE CARD PREMIUM
===================================================== */

.advantage-card {
    overflow: hidden;
}


.advantage-card::before {

    content: "";

    position: absolute;

    right: -45px;
    bottom: -45px;

    width: 130px;
    height: 130px;

    border-radius: 50%;

    background:
        rgba(255,122,0,0.045);

    transition:
        transform 0.35s ease;

}


.advantage-card:hover::before {
    transform: scale(1.5);
}


.advantage-icon {
    position: relative;
    z-index: 2;

    transition:
        transform 0.3s ease;
}


.advantage-card:hover
.advantage-icon {

    transform:
        rotate(-5deg)
        scale(1.08);

}


/* =====================================================
   12. WHY CARD
===================================================== */

.why-card {
    position: relative;
    overflow: hidden;
}


.why-card::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            var(--orange),
            transparent
        );

    transform:
        scaleX(0);

    transform-origin:
        left;

    transition:
        transform 0.3s ease;

}


.why-card:hover::after {
    transform:
        scaleX(1);
}


/* =====================================================
   13. SPECIFICATION TABLE PREMIUM
===================================================== */

.specification-table thead {
    background: var(--navy);
}


.specification-table tr {
    transition:
        background 0.2s ease;
}


.specification-table tbody tr:hover {
    background:
        #fffaf5;
}


.specification-table th {
    position: relative;
}


.specification-table th::before {

    content: "";

    display: inline-block;

    width: 3px;
    height: 14px;

    margin-right: 8px;

    vertical-align: -2px;

    border-radius: 4px;

    background:
        var(--orange);

}


/* =====================================================
   14. APPLICATION CARD
===================================================== */

.application-item {
    position: relative;
    overflow: hidden;
}


.application-item::before {

    content: "";

    position: absolute;

    width: 80px;
    height: 80px;

    right: -35px;
    top: -35px;

    border-radius: 50%;

    background:
        rgba(255,122,0,0.05);

    transition:
        transform 0.3s ease;

}


.application-item:hover::before {
    transform:
        scale(1.6);
}


.application-icon {
    position: relative;
    z-index: 2;
}


/* =====================================================
   15. FEATURE CARD PREMIUM
===================================================== */

.feature-item {
    position: relative;

    overflow: hidden;

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


.feature-item::before {

    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 3px;
    height: 100%;

    background:
        var(--orange);

    transform:
        scaleY(0);

    transform-origin:
        bottom;

    transition:
        transform 0.3s ease;
}


.feature-item:hover {

    transform:
        translateY(-4px);

    border-color:
        rgba(255,122,0,0.25);

    box-shadow:
        var(--shadow);

}


.feature-item:hover::before {
    transform:
        scaleY(1);
}


.feature-number {
    transition:
        all 0.3s ease;
}


.feature-item:hover .feature-number {

    background:
        var(--orange);

    transform:
        scale(1.05);

}


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

.brand-item {

    position: relative;

    overflow: hidden;

    transition:
        all 0.3s ease;

}


.brand-item::before {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            135deg,
            rgba(255,122,0,0.08),
            transparent
        );

    opacity: 0;

    transition:
        opacity 0.3s ease;

}


.brand-item:hover {

    transform:
        translateY(-4px);

    border-color:
        rgba(255,122,0,0.35);

    box-shadow:
        0 14px 30px rgba(11,27,43,0.08);

}


.brand-item:hover::before {
    opacity: 1;
}


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

.why-item {

    position: relative;

    overflow: hidden;

    transition:
        all 0.3s ease;

}


.why-item:hover {

    transform:
        translateY(-3px);

    border-color:
        rgba(255,122,0,0.25);

    box-shadow:
        var(--shadow);

}


.why-check {

    transition:
        transform 0.3s ease;

}


.why-item:hover .why-check {

    transform:
        scale(1.1)
        rotate(5deg);

}


/* =====================================================
   18. SHIPPING PREMIUM
===================================================== */

.shipping-section {
    position: relative;
    overflow: hidden;
}


.shipping-section::before {

    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    right: -200px;
    top: -250px;

    border-radius: 50%;

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

}


.shipping-card {
    position: relative;
    overflow: hidden;
}


.shipping-card::after {

    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    right: -80px;
    bottom: -110px;

    border-radius: 50%;

    background:
        rgba(255,122,0,0.08);

}


/* =====================================================
   19. CTA PREMIUM
===================================================== */

.cta-section {
    position: relative;
    overflow: hidden;
}


.cta-section::before {

    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    left: -180px;
    top: -220px;

    border-radius: 50%;

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

}


.cta-section::after {

    content: "";

    position: absolute;

    width: 250px;
    height: 250px;

    right: -100px;
    bottom: -130px;

    border-radius: 50%;

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

}


.cta-box {
    position: relative;
    z-index: 2;

    backdrop-filter:
        blur(8px);

    box-shadow:
        0 25px 60px
        rgba(0,0,0,0.12);
}


/* =====================================================
   20. FAQ PREMIUM
===================================================== */

.faq-item {

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

}


.faq-item:hover {

    border-color:
        rgba(255,122,0,0.25);

}


.faq-item.active {

    border-color:
        rgba(255,122,0,0.35);

    box-shadow:
        0 10px 30px
        rgba(11,27,43,0.07);

}


.faq-question {

    transition:
        background 0.25s ease;

}


.faq-item.active .faq-question {

    background:
        #fffaf5;

}


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

.site-footer {
    border-top:
        3px solid var(--orange);
}


.footer-contact a {

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

}


.footer-contact a:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 10px 25px
        rgba(26,162,96,0.25);

}


/* =====================================================
   22. SMOOTH HOVER GLOBAL
===================================================== */

a,
button,
.model-card,
.advantage-card,
.why-card,
.feature-item,
.application-item,
.brand-item,
.why-item,
.quick-info-card {

    -webkit-tap-highlight-color:
        transparent;

}


/* =====================================================
   23. TABLET REFINEMENT
===================================================== */

@media (max-width: 1000px) {

    .hero-product-grid {
        min-height:
            auto;
    }


    .hero-image {
        padding:
            10px 30px 20px;
    }


    .intro-description {
        max-width:
            760px;
    }

}


/* =====================================================
   24. MOBILE REFINEMENT
===================================================== */

@media (max-width: 680px) {

    .hero-image {
        padding:
            0 10px;
    }


    .hero-image img {
        border-radius:
            14px;
    }


    .intro-description {
        padding:
            30px 22px;
    }


    .intro-description::before {
        font-size:
            70px;

        left:
            12px;
    }


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


    .advantage-card {
        padding:
            26px 22px;
    }


    .feature-item {
        padding:
            20px;
    }


    .shipping-card {
        position:
            relative;
    }

}


/* =====================================================
   25. REDUCE MOTION
===================================================== */

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

    *,
    *::before,
    *::after {

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        scroll-behavior:
            auto !important;

        transition-duration:
            0.01ms !important;

    }

}



/* =====================================================
   STEP 3
   PREMIUM PRODUCT / MODEL SECTION
   TANGGA DORONG ALUMINIUM DALTON
===================================================== */


/* =====================================================
   1. MODELS SECTION
===================================================== */

.models-section {
    background:
        linear-gradient(
            180deg,
            #f8fafc 0%,
            #ffffff 100%
        );
}


.models-grid {
    position: relative;
    z-index: 2;
}


/* =====================================================
   2. MODEL CARD
===================================================== */

.model-card {

    background: #ffffff;

    border:
        1px solid
        rgba(11, 27, 43, 0.09);

    border-radius:
        22px;

    overflow: hidden;

    box-shadow:
        0 12px 35px
        rgba(11, 27, 43, 0.07);

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

}


.model-card:hover {

    transform:
        translateY(-8px);

    border-color:
        rgba(255, 122, 0, 0.28);

    box-shadow:
        0 25px 55px
        rgba(11, 27, 43, 0.13);

}


/* =====================================================
   3. MODEL IMAGE AREA
===================================================== */

.model-card-image {

    position: relative;

    min-height:
        330px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        35px;

    background:
        linear-gradient(
            145deg,
            #f8fafc,
            #eef2f5
        );

    border-bottom:
        1px solid
        rgba(11, 27, 43, 0.06);

}


.model-card-image::before {

    content: "";

    position: absolute;

    width:
        210px;

    height:
        210px;

    border-radius:
        50%;

    background:
        rgba(255, 122, 0, 0.055);

    right:
        -70px;

    top:
        -70px;

}


.model-card-image::after {

    content: "";

    position: absolute;

    width:
        150px;

    height:
        150px;

    border-radius:
        50%;

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

    left:
        -65px;

    bottom:
        -65px;

}


/* =====================================================
   4. MODEL IMAGE
===================================================== */

.model-card-image img {

    position: relative;

    z-index: 2;

    display:
        block;

    width:
        100%;

    max-width:
        380px;

    max-height:
        300px;

    object-fit:
        contain;

    filter:
        drop-shadow(
            0 18px 18px
            rgba(11, 27, 43, 0.14)
        );

    transition:
        transform 0.45s ease,
        filter 0.45s ease;

}


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

    transform:
        scale(1.055)
        translateY(-4px);

    filter:
        drop-shadow(
            0 25px 25px
            rgba(11, 27, 43, 0.18)
        );

}


/* =====================================================
   5. MODEL NUMBER
===================================================== */

.model-number {

    position: absolute;

    top:
        18px;

    left:
        18px;

    z-index: 5;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    min-width:
        48px;

    height:
        48px;

    padding:
        0 12px;

    border-radius:
        12px;

    background:
        #0b1b2b;

    color:
        #ffffff;

    font-size:
        13px;

    font-weight:
        800;

    letter-spacing:
        0.08em;

    box-shadow:
        0 8px 20px
        rgba(11, 27, 43, 0.20);

}


/* =====================================================
   6. MODEL TYPE
===================================================== */

.model-type {

    position: absolute;

    top:
        18px;

    right:
        18px;

    z-index: 5;

    padding:
        8px 13px;

    border-radius:
        999px;

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

    color:
        #0b1b2b;

    border:
        1px solid
        rgba(11, 27, 43, 0.08);

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        0.08em;

    box-shadow:
        0 6px 18px
        rgba(11, 27, 43, 0.08);

}


/* =====================================================
   7. MODEL CONTENT
===================================================== */

.model-card-content {

    position:
        relative;

    padding:
        30px;

}


.model-card-label {

    margin-bottom:
        9px;

    color:
        #ff7a00;

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;

}


.model-card-content h3 {

    margin:
        0 0 13px;

    color:
        #0b1b2b;

    font-size:
        clamp(
            20px,
            2vw,
            25px
        );

    line-height:
        1.25;

    font-weight:
        800;

}


.model-card-content > p {

    margin:
        0 0 20px;

    color:
        #64748b;

    font-size:
        14px;

    line-height:
        1.75;

}


/* =====================================================
   8. MODEL SPECS
===================================================== */

.model-specs {

    display:
        grid;

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

    gap:
        9px;

    margin:
        0 0 25px;

    padding:
        0;

    list-style:
        none;

}


.model-specs li {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        8px;

    padding:
        10px 11px;

    border-radius:
        10px;

    background:
        #f8fafc;

    border:
        1px solid
        rgba(11, 27, 43, 0.06);

    color:
        #334155;

    font-size:
        12px;

    line-height:
        1.45;

}


.model-specs li span {

    flex:
        0 0 auto;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        18px;

    height:
        18px;

    border-radius:
        50%;

    background:
        rgba(255, 122, 0, 0.12);

    color:
        #ff7a00;

    font-size:
        10px;

    font-weight:
        900;

}


/* =====================================================
   9. MODEL DETAIL BUTTON
===================================================== */

.model-detail-link {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    width:
        100%;

    padding:
        13px 16px;

    border-radius:
        11px;

    background:
        #0b1b2b;

    color:
        #ffffff;

    font-size:
        13px;

    font-weight:
        800;

    text-decoration:
        none;

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

}


.model-detail-link span {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        28px;

    height:
        28px;

    border-radius:
        50%;

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

    transition:
        transform 0.25s ease;

}


.model-detail-link:hover {

    background:
        #ff7a00;

    color:
        #ffffff;

    transform:
        translateY(-2px);

    box-shadow:
        0 10px 25px
        rgba(255, 122, 0, 0.22);

}


.model-detail-link:hover span {

    transform:
        translateX(4px);

}


/* =====================================================
   10. EMPTY MODEL STATE
===================================================== */

.empty-models {

    grid-column:
        1 / -1;

    margin:
        0;

    padding:
        45px 25px;

    text-align:
        center;

    border:
        1px dashed
        rgba(11, 27, 43, 0.16);

    border-radius:
        18px;

    color:
        #64748b;

    background:
        #f8fafc;

}


/* =====================================================
   11. IMAGE PLACEHOLDER
===================================================== */

.image-placeholder {

    position:
        absolute;

    inset:
        0;

    z-index:
        3;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    background:
        linear-gradient(
            145deg,
            #f1f5f9,
            #e2e8f0
        );

    color:
        #0b1b2b;

}


.image-placeholder span {

    font-size:
        24px;

    font-weight:
        900;

    letter-spacing:
        0.12em;

}


.image-placeholder small {

    color:
        #64748b;

    font-size:
        11px;

}


/* =====================================================
   12. PRODUCT IMAGE GLOW
===================================================== */

.hero-image::after {

    content: "";

    position: absolute;

    width:
        280px;

    height:
        280px;

    border-radius:
        50%;

    background:
        rgba(255, 122, 0, 0.07);

    filter:
        blur(45px);

    z-index:
        -1;

}


/* =====================================================
   13. MOBILE MODEL
===================================================== */

@media (max-width: 760px) {

    .model-card-image {

        min-height:
            270px;

        padding:
            25px;

    }


    .model-card-image img {

        max-height:
            245px;

    }


    .model-card-content {

        padding:
            24px 20px;

    }


    .model-specs {

        grid-template-columns:
            1fr;

    }


    .model-card-content h3 {

        font-size:
            20px;

    }

}


/* =====================================================
   14. SMALL MOBILE
===================================================== */

@media (max-width: 480px) {

    .model-card-image {

        min-height:
            240px;

    }


    .model-number {

        top:
            13px;

        left:
            13px;

        min-width:
            42px;

        height:
            42px;

        font-size:
            11px;

    }


    .model-type {

        top:
            13px;

        right:
            13px;

        padding:
            7px 10px;

        font-size:
            9px;

    }


    .model-card-content {

        padding:
            21px 17px;

    }


    .model-card-label {

        font-size:
            9px;

    }


    .model-card-content > p {

        font-size:
            13px;

    }

}




/* =====================================================
   STEP 4
   QUICK INFO + SPECIFICATION + APPLICATIONS
   PREMIUM INDUSTRIAL UI
===================================================== */


/* =====================================================
   1. QUICK INFO SECTION
===================================================== */

.quick-info-section {

    position: relative;

    padding:
        0 0 70px;

    background:
        #ffffff;

}


.quick-info-grid {

    display: grid;

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

    gap:
        16px;

}


.quick-info-card {

    position: relative;

    min-height:
        125px;

    padding:
        22px 22px 22px 26px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    border:
        1px solid
        rgba(11, 27, 43, 0.08);

    border-radius:
        16px;

    background:
        #ffffff;

    box-shadow:
        0 10px 28px
        rgba(11, 27, 43, 0.06);

}


.quick-info-card strong {

    display:
        block;

    margin-bottom:
        7px;

    color:
        #0b1b2b;

    font-size:
        15px;

    line-height:
        1.3;

}


.quick-info-card span {

    color:
        #64748b;

    font-size:
        12px;

    line-height:
        1.5;

}


.quick-info-card::after {

    content: "";

    position: absolute;

    right:
        18px;

    bottom:
        15px;

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        #ff7a00;

    box-shadow:
        0 0 0 5px
        rgba(255,122,0,0.08);

}


/* =====================================================
   2. QUICK INFO RESPONSIVE
===================================================== */

@media (max-width: 1000px) {

    .quick-info-grid {

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

    }

}


@media (max-width: 560px) {

    .quick-info-section {

        padding-bottom:
            45px;

    }


    .quick-info-grid {

        grid-template-columns:
            1fr;

    }


    .quick-info-card {

        min-height:
            105px;

    }

}


/* =====================================================
   3. SPECIFICATION SECTION
===================================================== */

.specification-section {

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f7f9fb 100%
        );

}


.specification-table-wrapper {

    position:
        relative;

    overflow:
        hidden;

    border:
        1px solid
        rgba(11,27,43,0.09);

    border-radius:
        18px;

    background:
        #ffffff;

    box-shadow:
        0 18px 45px
        rgba(11,27,43,0.07);

}


.specification-table {

    width:
        100%;

    border-collapse:
        collapse;

}


.specification-table tr {

    border-bottom:
        1px solid
        rgba(11,27,43,0.07);

}


.specification-table tr:last-child {

    border-bottom:
        none;

}


.specification-table th,
.specification-table td {

    padding:
        18px 22px;

    text-align:
        left;

    vertical-align:
        middle;

}


.specification-table th {

    width:
        34%;

    background:
        #f8fafc;

    color:
        #0b1b2b;

    font-size:
        13px;

    font-weight:
        800;

}


.specification-table td {

    color:
        #475569;

    font-size:
        14px;

    line-height:
        1.6;

}


.specification-table tr:hover th {

    background:
        #fff8f1;

}


.specification-table tr:hover td {

    background:
        #fffdfb;

}


/* =====================================================
   4. SPECIFICATION ACCENT
===================================================== */

.specification-table th::before {

    width:
        4px;

    height:
        16px;

    background:
        linear-gradient(
            180deg,
            #ff7a00,
            #ff9d3d
        );

}


/* =====================================================
   5. APPLICATION SECTION
===================================================== */

.applications-section {

    background:
        #ffffff;

}


.applications-grid {

    display:
        grid;

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

    gap:
        14px;

}


.application-item {

    min-height:
        75px;

    padding:
        17px 18px;

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    border:
        1px solid
        rgba(11,27,43,0.08);

    border-radius:
        14px;

    background:
        #ffffff;

    box-shadow:
        0 8px 24px
        rgba(11,27,43,0.045);

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

}


.application-item:hover {

    transform:
        translateY(-4px);

    border-color:
        rgba(255,122,0,0.28);

    box-shadow:
        0 15px 35px
        rgba(11,27,43,0.09);

}


.application-icon {

    flex:
        0 0 auto;

    width:
        32px;

    height:
        32px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        10px;

    background:
        rgba(255,122,0,0.10);

    color:
        #ff7a00;

    font-size:
        13px;

    font-weight:
        900;

}


.application-item strong {

    position:
        relative;

    z-index:
        2;

    color:
        #1e293b;

    font-size:
        13px;

    line-height:
        1.4;

}


/* =====================================================
   6. APPLICATION RESPONSIVE
===================================================== */

@media (max-width: 1000px) {

    .applications-grid {

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

    }

}


@media (max-width: 560px) {

    .applications-grid {

        grid-template-columns:
            1fr;

    }


    .application-item {

        min-height:
            68px;

    }

}


/* =====================================================
   7. MOBILE SPECIFICATION TABLE
===================================================== */

@media (max-width: 600px) {

    .specification-table-wrapper {

        border-radius:
            14px;

        overflow-x:
            auto;

    }


    .specification-table {

        min-width:
            620px;

    }


    .specification-table th,
    .specification-table td {

        padding:
            15px 17px;

    }

}


/* =====================================================
   8. SECTION SPACING
===================================================== */

.quick-info-section .container,
.specification-section .container,
.applications-section .container {

    position:
        relative;

    z-index:
        2;

}


/* =====================================================
   9. INDUSTRIAL DIVIDER
===================================================== */

.specification-section
.section-heading::after {

    content: "";

    display:
        block;

    width:
        55px;

    height:
        3px;

    margin-top:
        18px;

    border-radius:
        999px;

    background:
        linear-gradient(
            90deg,
            #ff7a00,
            #ffb703
        );

}


/* =====================================================
   10. APPLICATION HEADING
===================================================== */

.applications-section
.section-heading {

    margin-bottom:
        38px;

}


/* =====================================================
   11. QUICK INFO MOBILE POLISH
===================================================== */

@media (max-width: 420px) {

    .quick-info-card {

        padding:
            19px 20px;

    }


    .quick-info-card strong {

        font-size:
            14px;

    }


    .quick-info-card span {

        font-size:
            11px;

    }

}


/* =====================================================
   12. SPECIFICATION MOBILE POLISH
===================================================== */

@media (max-width: 600px) {

    .specification-table th {

        font-size:
            12px;

    }


    .specification-table td {

        font-size:
            13px;

    }

}


/* =====================================================
   STEP 5
   FINAL FINISHING
   FEATURES + BRAND + WHY + SHIPPING + CTA + FAQ + FOOTER
===================================================== */


/* =====================================================
   1. FEATURES SECTION
===================================================== */

.features-section {
    background:
        linear-gradient(
            180deg,
            #f7f9fb 0%,
            #ffffff 100%
        );
}

.features-grid {
    display:
        grid;

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

    gap:
        15px;
}

.feature-item {
    position:
        relative;

    display:
        flex;

    align-items:
        flex-start;

    gap:
        17px;

    min-height:
        105px;

    padding:
        22px;

    border:
        1px solid
        rgba(11,27,43,0.08);

    border-radius:
        16px;

    background:
        #ffffff;

    box-shadow:
        0 9px 27px
        rgba(11,27,43,0.05);

    overflow:
        hidden;
}

.feature-number {
    flex:
        0 0 auto;

    width:
        42px;

    height:
        42px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        12px;

    background:
        #0b1b2b;

    color:
        #ffffff;

    font-size:
        11px;

    font-weight:
        900;

    letter-spacing:
        0.05em;
}

.feature-item strong {
    display:
        block;

    margin-bottom:
        6px;

    color:
        #0b1b2b;

    font-size:
        14px;

    line-height:
        1.45;
}

.feature-item p {
    margin:
        0;

    color:
        #64748b;

    font-size:
        12px;

    line-height:
        1.65;
}


/* =====================================================
   2. FEATURES MOBILE
===================================================== */

@media (max-width: 700px) {

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

}

@media (max-width: 480px) {

    .feature-item {
        padding:
            18px;

        gap:
            13px;
    }

    .feature-number {
        width:
            36px;

        height:
            36px;

        border-radius:
            10px;
    }

}


/* =====================================================
   3. BRAND SECTION
===================================================== */

.brand-section {
    background:
        #ffffff;
}

.brand-grid {
    display:
        grid;

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

    gap:
        13px;
}

.brand-item {
    position:
        relative;

    min-height:
        82px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        15px;

    border:
        1px solid
        rgba(11,27,43,0.08);

    border-radius:
        14px;

    background:
        #ffffff;

    color:
        #0b1b2b;

    font-size:
        13px;

    font-weight:
        800;

    text-align:
        center;

    box-shadow:
        0 8px 22px
        rgba(11,27,43,0.045);
}


/* =====================================================
   4. BRAND ACCENT
===================================================== */

.brand-item::after {
    content:
        "";

    position:
        absolute;

    left:
        20%;

    right:
        20%;

    bottom:
        0;

    height:
        2px;

    background:
        linear-gradient(
            90deg,
            #ff7a00,
            #ffb703
        );

    transform:
        scaleX(0);

    transition:
        transform 0.3s ease;
}

.brand-item:hover::after {
    transform:
        scaleX(1);
}


/* =====================================================
   5. BRAND RESPONSIVE
===================================================== */

@media (max-width: 1000px) {

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

}

@media (max-width: 620px) {

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

}

@media (max-width: 380px) {

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

}


/* =====================================================
   6. WHY DALTON
===================================================== */

.why-dalton-section {
    background:
        linear-gradient(
            180deg,
            #f8fafc,
            #ffffff
        );
}

.why-dalton-grid {
    display:
        grid;

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

    gap:
        15px;
}

.why-item {
    display:
        flex;

    align-items:
        center;

    gap:
        13px;

    min-height:
        78px;

    padding:
        17px 19px;

    border:
        1px solid
        rgba(11,27,43,0.08);

    border-radius:
        14px;

    background:
        #ffffff;

    box-shadow:
        0 8px 25px
        rgba(11,27,43,0.05);
}

.why-check {
    flex:
        0 0 auto;

    width:
        33px;

    height:
        33px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        10px;

    background:
        rgba(255,122,0,0.11);

    color:
        #ff7a00;

    font-size:
        13px;

    font-weight:
        900;
}

.why-item strong {
    color:
        #1e293b;

    font-size:
        13px;

    line-height:
        1.45;
}


/* =====================================================
   7. WHY DALTON RESPONSIVE
===================================================== */

@media (max-width: 950px) {

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

}

@media (max-width: 580px) {

    .why-dalton-grid {
        grid-template-columns:
            1fr;
    }

}


/* =====================================================
   8. SHIPPING SECTION
===================================================== */

.shipping-section {
    padding:
        70px 0;

    background:
        #0b1b2b;
}

.shipping-card {
    position:
        relative;

    display:
        flex;

    align-items:
        center;

    min-height:
        190px;

    padding:
        35px 42px;

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

    border-radius:
        22px;

    background:
        linear-gradient(
            135deg,
            #10283c,
            #0b1b2b
        );

    overflow:
        hidden;

    box-shadow:
        0 25px 60px
        rgba(0,0,0,0.18);
}

.shipping-content {
    position:
        relative;

    z-index:
        2;

    max-width:
        820px;
}

.shipping-label {
    display:
        inline-block;

    margin-bottom:
        9px;

    color:
        #ff9b45;

    font-size:
        10px;

    font-weight:
        900;

    letter-spacing:
        0.14em;
}

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

    color:
        #ffffff;

    font-size:
        25px;

    font-weight:
        800;
}

.shipping-card p {
    margin:
        0;

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

    font-size:
        13px;

    line-height:
        1.75;
}


/* =====================================================
   9. SHIPPING RESPONSIVE
===================================================== */

@media (max-width: 600px) {

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

    .shipping-card {
        padding:
            28px 23px;

        min-height:
            160px;
    }

    .shipping-card h3 {
        font-size:
            21px;
    }

}


/* =====================================================
   10. CTA SECTION
===================================================== */

.cta-section {
    padding:
        85px 0;

    background:
        linear-gradient(
            135deg,
            #ff7a00,
            #f05d00
        );
}

.cta-box {
    text-align:
        center;

    padding:
        55px 40px;

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

    border-radius:
        24px;

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

.cta-box > span {
    display:
        inline-block;

    margin-bottom:
        10px;

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

    font-size:
        11px;

    font-weight:
        900;

    letter-spacing:
        0.13em;

    text-transform:
        uppercase;
}

.cta-box h2 {
    max-width:
        780px;

    margin:
        0 auto 16px;

    color:
        #ffffff;

    font-size:
        clamp(
            27px,
            4vw,
            43px
        );

    line-height:
        1.18;

    font-weight:
        900;
}

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

    margin:
        0 auto 30px;

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

    font-size:
        14px;

    line-height:
        1.75;
}

.cta-actions {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        12px;

    flex-wrap:
        wrap;
}


/* =====================================================
   11. CTA BUTTON OVERRIDE
===================================================== */

.cta-actions .btn-primary {
    background:
        #0b1b2b;

    border-color:
        #0b1b2b;

    color:
        #ffffff;

    box-shadow:
        0 12px 30px
        rgba(11,27,43,0.22);
}

.cta-actions .btn-primary:hover {
    background:
        #142f46;

    transform:
        translateY(-3px);
}

.cta-actions .btn-outline {
    color:
        #ffffff;

    border-color:
        rgba(255,255,255,0.40);

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

.cta-actions .btn-outline:hover {
    color:
        #0b1b2b;

    background:
        #ffffff;

    border-color:
        #ffffff;
}


/* =====================================================
   12. FAQ SECTION
===================================================== */

.faq-section {
    background:
        #f7f9fb;
}

.faq-container {
    max-width:
        900px;

    margin:
        0 auto;
}

.faq-item {
    margin-bottom:
        10px;

    border:
        1px solid
        rgba(11,27,43,0.08);

    border-radius:
        14px;

    background:
        #ffffff;

    overflow:
        hidden;

    box-shadow:
        0 6px 20px
        rgba(11,27,43,0.035);
}

.faq-question {
    width:
        100%;

    min-height:
        68px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    padding:
        15px 20px;

    border:
        none;

    background:
        #ffffff;

    color:
        #0b1b2b;

    text-align:
        left;

    cursor:
        pointer;

    font-family:
        inherit;

    font-size:
        14px;

    font-weight:
        800;
}

.faq-question > span {
    display:
        flex;

    align-items:
        center;

    gap:
        13px;
}

.faq-question small {
    flex:
        0 0 auto;

    color:
        #ff7a00;

    font-size:
        10px;

    font-weight:
        900;

    letter-spacing:
        0.05em;
}

.faq-question b {
    flex:
        0 0 auto;

    width:
        31px;

    height:
        31px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        9px;

    background:
        #f1f5f9;

    color:
        #0b1b2b;

    font-size:
        19px;

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

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

    background:
        #ff7a00;

    color:
        #ffffff;
}


/* =====================================================
   13. FAQ ANSWER
===================================================== */

.faq-answer {
    display:
        grid;

    grid-template-rows:
        0fr;

    transition:
        grid-template-rows 0.3s ease;
}

.faq-answer p {
    overflow:
        hidden;

    margin:
        0;

    padding:
        0 20px;

    color:
        #64748b;

    font-size:
        13px;

    line-height:
        1.75;
}

.faq-item.active
.faq-answer {
    grid-template-rows:
        1fr;
}

.faq-item.active
.faq-answer p {
    padding:
        0 20px 20px;
}


/* =====================================================
   14. FAQ MOBILE
===================================================== */

@media (max-width: 600px) {

    .faq-question {
        min-height:
            62px;

        padding:
            13px 15px;

        font-size:
            13px;
    }

    .faq-question > span {
        gap:
            9px;
    }

    .faq-question b {
        width:
            28px;

        height:
            28px;
    }

    .faq-answer p {
        font-size:
            12px;
    }

}


/* =====================================================
   15. FOOTER
===================================================== */

.site-footer {
    padding:
        32px 0;

    background:
        #071521;

    color:
        #ffffff;
}

.site-footer .container {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        25px;
}

.footer-product {
    display:
        flex;

    flex-direction:
        column;

    gap:
        5px;
}

.footer-product strong {
    color:
        #ff8a2a;

    font-size:
        10px;

    font-weight:
        900;

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;
}

.footer-product-name {
    color:
        rgba(255,255,255,0.86);

    font-size:
        13px;

    font-weight:
        700;
}

.footer-contact a {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        11px 17px;

    border-radius:
        10px;

    background:
        #1aa260;

    color:
        #ffffff;

    font-size:
        12px;

    font-weight:
        800;

    text-decoration:
        none;
}


/* =====================================================
   16. FOOTER MOBILE
===================================================== */

@media (max-width: 600px) {

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

        align-items:
            flex-start;
    }

    .footer-contact {
        width:
            100%;
    }

    .footer-contact a {
        width:
            100%;
    }

}


/* =====================================================
   17. SEARCH TAGS
===================================================== */

.search-tags {
    position:
        absolute;

    width:
        1px;

    height:
        1px;

    padding:
        0;

    margin:
        -1px;

    overflow:
        hidden;

    clip:
        rect(0,0,0,0);

    white-space:
        nowrap;

    border:
        0;
}


/* =====================================================
   18. GLOBAL SECTION POLISH
===================================================== */

.section-heading {
    position:
        relative;

    z-index:
        2;
}

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


/* =====================================================
   19. FINAL BUTTON POLISH
===================================================== */

.btn {
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease,
        border-color 0.25s ease;
}

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


/* =====================================================
   20. FINAL MOBILE SPACING
===================================================== */

@media (max-width: 600px) {

    .cta-section {
        padding:
            55px 0;
    }

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

    .cta-box h2 {
        font-size:
            27px;
    }

    .cta-box p {
        font-size:
            13px;
    }

}



/* =========================================================
   FINAL OVERRIDE
   TANGGA DORONG ALUMINIUM
   PUSAT DALTON
========================================================= */


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

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


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

.about-section,
.specification-section,
.dimension-section,
.safety-section,
.construction-section,
.advantages-section,
.application-section,
.cta-section,
.faq-section {
    width: 100%;
    padding: 90px 0;
}


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

.section-heading {
    width: 100%;
    max-width: 850px;
    margin: 0 auto 50px;
    text-align: center;
}

.section-heading span {
    display: block;
    margin-bottom: 10px;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.8px;
    text-transform: uppercase;

    color: #ff7200;
}

.section-heading h2 {
    margin: 0;

    font-size: clamp(30px, 4vw, 46px);
    line-height: 1.1;
    font-weight: 800;

    color: #0b1728;
}

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

.section-heading p {
    max-width: 700px;
    margin: 16px auto 0;

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

    color: #667085;
}


/* =========================================================
   ABOUT / TENTANG PRODUK
========================================================= */

.about-section {
    background: #ffffff;
}

.about-content {
    width: min(900px, 100%);
    margin: 0 auto;
}

.about-content p {
    margin: 0 0 18px;

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

    color: #475467;
}

.about-content p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   MODEL / TANGGA PLATFORM
========================================================= */

.models-section {
    padding: 100px 0;
    background: #f7f9fc;
}

.models-grid {
    width: 100%;

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

    gap: 28px;

    align-items: stretch;
}


/*
   Kalau hanya ada 1 model,
   jangan biarkan card menempel di kiri.
*/

.models-grid > .model-card:only-child {
    grid-column: 1 / -1;
    width: min(900px, 100%);
    max-width: 900px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 42% 58%;   /* ← ini biang masalahnya */
    min-height: 360px;
    border-radius: 18px;
}


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

.model-card {
    width: 100%;
    min-width: 0;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid #e4e7ec;
    border-radius: 18px;

    box-shadow:
        0 10px 30px rgba(16, 24, 40, 0.07);

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

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

    border-color: rgba(255, 114, 0, 0.45);

    box-shadow:
        0 18px 45px rgba(16, 24, 40, 0.12);
}


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

.model-card-image {
    position: relative;

    width: 100%;
    height: 360px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #eef2f6,
            #dfe5eb
        );

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

.model-card-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    padding: 25px;

    transition: transform 0.3s ease;
}

.model-card:hover .model-card-image img {
    transform: scale(1.03);
}


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

.model-number {
    position: absolute;

    top: 16px;
    left: 16px;

    z-index: 2;

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

    width: 38px;
    height: 38px;

    border-radius: 10px;

    background: #0b1728;
    color: #ffffff;

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


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

.model-type {
    position: absolute;

    top: 18px;
    right: 16px;

    z-index: 2;

    padding: 7px 12px;

    border-radius: 999px;

    background: #ffffff;

    border: 1px solid #ffd7bd;

    color: #ff7200;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.8px;

    text-transform: uppercase;
}


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

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

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

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

    letter-spacing: 1.2px;
    text-transform: uppercase;

    color: #ff7200;
}

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

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

    color: #0b1728;
}

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

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

    color: #667085;
}


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

.model-specs {
    display: grid;

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

    gap: 10px;

    margin: 0 0 24px;
    padding: 0;

    list-style: none;
}

.model-specs li {
    display: flex;
    align-items: flex-start;
    gap: 8px;

    padding: 10px;

    border: 1px solid #eaecf0;
    border-radius: 9px;

    background: #f9fafb;

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

    color: #475467;
}

.model-specs li span {
    flex: 0 0 auto;

    color: #ff7200;
    font-weight: 900;
}


/* =========================================================
   MODEL DETAIL BUTTON
========================================================= */

.model-detail-link {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;

    padding: 13px 17px;

    border-radius: 9px;

    background: #0b1728;
    color: #ffffff;

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

    text-decoration: none;

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}

.model-detail-link:hover {
    background: #ff7200;

    transform: translateY(-2px);
}

.model-detail-link span {
    font-size: 18px;
}


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

.dimension-section {
    background: #ffffff;
}

.dimension-table-wrapper {
    width: min(850px, 100%);

    margin: 0 auto;

    overflow-x: auto;

    border: 1px solid #e4e7ec;
    border-radius: 16px;

    background: #ffffff;

    box-shadow:
        0 12px 35px rgba(16, 24, 40, 0.06);
}


/* =========================================================
   DIMENSION TABLE
========================================================= */

.dimension-table {
    width: 100%;

    border-collapse: collapse;

    table-layout: fixed;
}

.dimension-table tr {
    border-bottom: 1px solid #eaecf0;
}

.dimension-table tr:last-child {
    border-bottom: none;
}

.dimension-table th,
.dimension-table td {
    padding: 18px 22px;

    text-align: left;

    font-size: 14px;
    line-height: 1.5;
}

.dimension-table th {
    width: 55%;

    font-weight: 700;

    color: #344054;

    background: #f8fafc;
}

.dimension-table td {
    font-weight: 600;

    color: #ff7200;

    background: #ffffff;
}


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

.specification-grid {
    width: 100%;

    display: grid;

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

    gap: 20px;
}

.specification-card {
    padding: 26px;

    border: 1px solid #e4e7ec;
    border-radius: 16px;

    background: #ffffff;

    box-shadow:
        0 8px 25px rgba(16, 24, 40, 0.05);
}

.specification-card .spec-number {
    display: flex;

    width: 34px;
    height: 34px;

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

    margin-bottom: 22px;

    border-radius: 9px;

    background: #0b1728;
    color: #ffffff;

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

.specification-card small {
    display: block;

    margin-bottom: 8px;

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

    letter-spacing: 1.2px;

    color: #ff7200;
}

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

    font-size: 20px;

    color: #0b1728;
}

.specification-card p {
    margin: 0;

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

    color: #667085;
}


/* =========================================================
   SAFETY
========================================================= */

.safety-section {
    background: #f7f9fc;
}

.safety-grid {
    display: grid;

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

    gap: 22px;
}

.safety-card {
    padding: 28px;

    border: 1px solid #e4e7ec;
    border-radius: 16px;

    background: #ffffff;

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

.safety-card:hover {
    transform: translateY(-5px);

    box-shadow:
        0 15px 35px rgba(16, 24, 40, 0.08);
}

.safety-icon {
    display: flex;

    width: 40px;
    height: 40px;

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

    margin-bottom: 20px;

    border-radius: 10px;

    background: #fff1e8;
    color: #ff7200;

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

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

    font-size: 18px;

    color: #0b1728;
}

.safety-card p {
    margin: 0;

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

    color: #667085;
}


/* =========================================================
   CONSTRUCTION
========================================================= */

.construction-section {
    background: #ffffff;
}

.construction-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.3fr)
        minmax(300px, 0.7fr);

    gap: 50px;

    align-items: stretch;
}

.construction-content {
    padding: 20px 0;
}

.construction-content > span {
    display: block;

    margin-bottom: 10px;

    color: #ff7200;

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

    letter-spacing: 1.5px;
}

.construction-content h2 {
    margin: 0 0 18px;

    font-size: 36px;

    color: #0b1728;
}

.construction-content h2 strong {
    color: #ff7200;
}

.construction-content p {
    margin-bottom: 22px;

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

    color: #667085;
}

.construction-content ul {
    display: grid;

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

    gap: 10px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.construction-content li {
    padding: 13px 15px;

    border: 1px solid #eaecf0;
    border-radius: 10px;

    background: #f8fafc;

    font-size: 12px;
    color: #475467;
}

.construction-content li::before {
    content: "✓";

    margin-right: 8px;

    color: #ff7200;
    font-weight: 900;
}

.construction-highlight {
    display: flex;

    min-height: 350px;

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

    padding: 40px;

    border-radius: 22px;

    background:
        linear-gradient(
            135deg,
            #0b1728,
            #1c2a3e
        );

    color: #ffffff;

    text-align: center;
}

.construction-highlight small {
    display: block;

    margin-bottom: 12px;

    color: #ff7200;

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

    letter-spacing: 2px;
}

.construction-highlight strong {
    display: block;

    font-size: 45px;
    letter-spacing: 2px;
}

.construction-highlight span {
    display: block;

    margin-top: 8px;

    color: #d0d5dd;

    font-size: 13px;
}


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

.advantages-section {
    background: #f7f9fc;
}

.advantages-grid {
    display: grid;

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

    gap: 20px;
}

.advantage-card {
    position: relative;

    padding: 28px;

    min-height: 200px;

    border: 1px solid #e4e7ec;
    border-radius: 16px;

    background: #ffffff;
}

.advantage-card > span {
    display: block;

    margin-bottom: 28px;

    color: #ff7200;

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

    letter-spacing: 1px;
}

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

    font-size: 19px;

    color: #0b1728;
}

.advantage-card p {
    margin: 0;

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

    color: #667085;
}


/* =========================================================
   APPLICATION
========================================================= */

.application-section {
    background: #ffffff;
}

.application-grid {
    display: grid;

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

    gap: 15px;
}

.application-item {
    padding: 20px;

    border: 1px solid #e4e7ec;
    border-radius: 12px;

    background: #ffffff;

    text-align: center;

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

    color: #344054;

    box-shadow:
        0 5px 15px rgba(16, 24, 40, 0.04);

    transition:
        transform 0.2s ease,
        border-color 0.2s ease;
}

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

    border-color: #ff7200;

    color: #ff7200;
}


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

.cta-section {
    background: #ff7200;
}

.cta-box {
    width: min(900px, 100%);

    margin: 0 auto;

    padding: 60px 50px;

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

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

    text-align: center;

    color: #ffffff;
}

.cta-box > span {
    display: block;

    margin-bottom: 12px;

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

    letter-spacing: 1.8px;
}

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

    max-width: 650px;

    font-size: clamp(28px, 4vw, 42px);
    line-height: 1.15;
}

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

    margin: 0 auto 25px;

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

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

.cta-actions {
    display: flex;

    justify-content: center;

    gap: 12px;

    flex-wrap: wrap;
}


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

.faq-section {
    background: #f7f9fc;
}

.faq-container {
    width: min(850px, 100%);

    margin: 0 auto;
}

.faq-item {
    margin-bottom: 10px;

    overflow: hidden;

    border: 1px solid #e4e7ec;
    border-radius: 12px;

    background: #ffffff;
}

.faq-question {
    display: flex;

    width: 100%;

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

    padding: 19px 22px;

    border: none;

    background: #ffffff;

    color: #0b1728;

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

    text-align: left;

    cursor: pointer;
}

.faq-question b {
    display: flex;

    width: 28px;
    height: 28px;

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

    flex: 0 0 auto;

    border-radius: 50%;

    background: #f2f4f7;

    color: #ff7200;

    transition: transform 0.2s ease;
}

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

    background: #fff1e8;
}

.faq-answer {
    display: none;

    padding: 0 22px 20px;
}

.faq-item.active .faq-answer {
    display: block;
}

.faq-answer p {
    margin: 0;

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

    color: #667085;
}


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

.site-footer {
    padding: 35px 0;

    background: #071321;

    color: #ffffff;
}

.site-footer .container {
    display: flex;

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

    gap: 25px;
}

.footer-product {
    display: flex;

    flex-direction: column;

    gap: 5px;
}

.footer-product strong {
    color: #ff7200;

    font-size: 10px;

    letter-spacing: 1px;

    text-transform: uppercase;
}

.footer-product span {
    font-size: 13px;

    color: #d0d5dd;
}

.footer-contact a {
    display: inline-flex;

    padding: 10px 16px;

    border-radius: 8px;

    background: #25d366;
    color: #ffffff;

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

    text-decoration: none;
}


/* =========================================================
   SEARCH TAGS
========================================================= */

.search-tags {
    display: none !important;

    visibility: hidden;

    height: 0;

    overflow: hidden;
}


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

.image-placeholder {
    position: absolute;

    inset: 0;

    display: flex;

    flex-direction: column;

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

    background: #eef2f6;

    text-align: center;
}

.image-placeholder span {
    font-size: 25px;
    font-weight: 900;

    color: #0b1728;
}

.image-placeholder small {
    margin-top: 8px;

    color: #667085;
}


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

@media (max-width: 1000px) {

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

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

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

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

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

    .construction-highlight {
        min-height: 250px;
    }

}


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

@media (max-width: 700px) {

    .container {
        width: min(100% - 28px, 600px);
    }


    .about-section,
    .specification-section,
    .dimension-section,
    .safety-section,
    .construction-section,
    .advantages-section,
    .application-section,
    .cta-section,
    .faq-section,
    .models-section {
        padding: 65px 0;
    }


    .section-heading {
        margin-bottom: 35px;
    }


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


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


    .models-grid > .model-card:only-child {
    grid-column: 1 / -1;
    width: min(900px, 100%);
    max-width: 900px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 32% 68%;   /* ← ini biang masalahnya */
    min-height: 360px;
    border-radius: 18px;
}


    .model-card-image {
        height: 300px;
    }


    .model-specs {
        grid-template-columns: 1fr;
    }


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


    .dimension-table {
        min-width: 600px;
    }


    .dimension-table th,
    .dimension-table td {
        padding: 14px 16px;

        font-size: 13px;
    }


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


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


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


    .construction-content ul {
        grid-template-columns: 1fr;
    }


    .construction-highlight {
        min-height: 220px;
    }


    .construction-highlight strong {
        font-size: 34px;
    }


    .cta-box {
        padding: 40px 24px;
    }


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

        align-items: flex-start;
    }

}


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

@media (max-width: 430px) {

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


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


    .model-card-content h3 {
        font-size: 20px;
    }


    .model-card-image {
        height: 260px;
    }

}




/* =========================================================
   FIX MODEL CARD - LANDSCAPE
   PUSAT DALTON
========================================================= */

.models-grid > .model-card:only-child {
    grid-column: 1 / -1;

    width: min(900px, 100%);
    max-width: 900px;

    margin: 0 auto;

    display: grid;
    grid-template-columns: 42% 58%;

    min-height: 360px;

    border-radius: 18px;
}


/* BAGIAN GAMBAR */
.models-grid > .model-card:only-child .model-card-image {
    height: 100%;
    min-height: 360px;

    border-radius: 18px 0 0 18px;
}


/* GAMBAR PRODUK */
.models-grid > .model-card:only-child
.model-card-image img {
    width: 100%;
    height: 100%;

    padding: 25px;

    object-fit: contain;
}


/* BAGIAN INFORMASI */
.models-grid > .model-card:only-child
.model-card-content {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 35px;
}


/* JUDUL */
.models-grid > .model-card:only-child
.model-card-content h3 {
    font-size: 25px;
    line-height: 1.25;

    margin-bottom: 14px;
}


/* DESKRIPSI */
.models-grid > .model-card:only-child
.model-card-content p {
    font-size: 13px;
    line-height: 1.7;

    max-width: 500px;
}


/* SPESIFIKASI */
.models-grid > .model-card:only-child
.model-specs {
    grid-template-columns: repeat(2, 1fr);

    margin-top: 5px;
}


/* BUTTON */
.models-grid > .model-card:only-child
.model-detail-link {
    max-width: 260px;
}


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

@media (max-width: 800px) {

    .models-grid > .model-card:only-child {
        grid-template-columns: 1fr;

        width: min(600px, 100%);

        min-height: auto;
    }

    .models-grid > .model-card:only-child
    .model-card-image {

        min-height: 300px;

        height: 300px;

        border-radius: 18px 18px 0 0;
    }

}


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

@media (max-width: 500px) {

    .models-grid > .model-card:only-child {
        width: 100%;
    }

    .models-grid > .model-card:only-child
    .model-card-image {

        height: 260px;
        min-height: 260px;
    }

    .models-grid > .model-card:only-child
    .model-card-content {

        padding: 24px;
    }

    .models-grid > .model-card:only-child
    .model-card-content h3 {

        font-size: 20px;
    }

    .models-grid > .model-card:only-child
    .model-specs {

        grid-template-columns: 1fr;
    }

}