/* =====================================================
   TANGGA HIDROLIK DALTON
   STYLE.CSS
   STEP 1
   FOUNDATION + HEADER + HERO
===================================================== */


/* =====================================================
   01. DESIGN SYSTEM
===================================================== */

:root {

    --navy-950: #06111f;
    --navy-900: #081625;
    --navy-850: #0b1b2d;
    --navy-800: #10253b;
    --navy-750: #142d46;

    --orange-600: #f05a16;
    --orange-500: #ff6a00;
    --orange-400: #ff8a24;
    --orange-soft: rgba(255, 106, 0, 0.12);

    --white: #ffffff;
    --white-soft: #eef3f8;

    --text: #17212d;
    --text-muted: #687586;

    --border-dark: rgba(255, 255, 255, 0.10);
    --border-light: rgba(14, 32, 52, 0.10);

    --shadow-sm:
        0 1px 2px rgba(3, 12, 22, 0.04),
        0 8px 25px rgba(3, 12, 22, 0.08);

    --shadow-md:
        0 2px 6px rgba(3, 12, 22, 0.05),
        0 18px 45px rgba(3, 12, 22, 0.14);

    --shadow-lg:
        0 4px 12px rgba(2, 12, 23, 0.10),
        0 30px 80px rgba(2, 12, 23, 0.24);

    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 22px;
    --radius-xl: 30px;

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

    --transition:
        260ms cubic-bezier(.16,1,.3,1);
}


/* =====================================================
   02. RESET
===================================================== */

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

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;

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

    color: var(--text);

    background:
        #ffffff;

    line-height: 1.65;

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

    text-rendering: optimizeLegibility;

    font-kerning: normal;

    font-feature-settings: "kern" 1, "liga" 1;
}

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

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

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

button {
    border: 0;
}

::selection {
    background:
        var(--orange-500);

    color:
        #ffffff;
}


/* =====================================================
   03. GLOBAL CONTAINER
===================================================== */

.section-container,
.header-container,
.hero-container {
    width:
        var(--container);

    margin:
        0 auto;
}


/* =====================================================
   04. HEADER
===================================================== */

.site-header {

    position: sticky;

    top: 0;

    z-index: 1000;

    width: 100%;

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

    border-bottom:
        1px solid
        rgba(8, 22, 37, 0.08);

    backdrop-filter: blur(22px);

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


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

.header-container {

    min-height: 72px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;
}


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

.brand {

    display: flex;

    align-items: center;

    justify-content: flex-start;

    flex: 0 0 auto;

    width: 155px;

    height: 48px;

    overflow: hidden;

    text-decoration: none;
}


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

.brand-logo {

    display: block;

    width: 150px !important;

    height: 46px !important;

    max-width: 150px !important;

    max-height: 46px !important;

    min-width: 0 !important;

    min-height: 0 !important;

    object-fit: contain !important;

    object-position: left center;

    margin: 0 !important;

    padding: 0 !important;

    border: none !important;

    border-radius: 0 !important;

    background: transparent !important;

    box-shadow: none !important;

    color: transparent;

}


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

.brand-mark,
.brand-text,
.brand-text strong,
.brand-text small {

    display: none !important;
}


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

.main-nav {

    display: flex;

    align-items: center;

    gap: 28px;

    margin-left: auto;
}


.main-nav a {

    position: relative;

    color: var(--gray-700);

    font-size: 13px;

    font-weight: 600;

    white-space: nowrap;

    padding: 5px 0;

    transition:
        color .2s ease;
}


.main-nav a::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: -5px;

    width: 0;

    height: 2px;

    background: var(--orange);

    border-radius: 10px;

    transition:
        width .2s ease;
}


.main-nav a:hover {

    color: var(--navy-900);
}


.main-nav a:hover::after {

    width: 100%;
}


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

.header-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 40px;

    padding:
        0 17px;

    border-radius: 8px;

    background: var(--navy-900);

    color: #ffffff;

    font-size: 11.5px;

    font-weight: 700;

    white-space: nowrap;

    flex-shrink: 0;

    box-shadow:
        0 1px 3px rgba(7, 17, 31, 0.066),
        0 6px 16px
        rgba(7, 17, 31, .12);

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


.header-button:hover {

    background: var(--orange);

    transform:
        translateY(-1px);
}


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

@media (max-width: 900px) {

    .header-container {

        min-height: 68px;

        gap: 20px;
    }


    .brand {

        width: 130px;

        height: 42px;
    }


    .brand-logo {

        width: 125px !important;

        height: 40px !important;

        max-width: 125px !important;

        max-height: 40px !important;
    }


    .main-nav {

        gap: 18px;
    }


    .main-nav a {

        font-size: 11.5px;
    }

}


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

@media (max-width: 650px) {

    .header-container {

        min-height: 62px;

        gap: 12px;
    }


    .brand {

        width: 105px;

        height: 34px;
    }


    .brand-logo {

        width: 100px !important;

        height: 32px !important;

        max-width: 100px !important;

        max-height: 32px !important;
    }


    .main-nav {

        gap: 10px;
    }


    .main-nav a {

        font-size: 9.5px;
    }


    .header-button {

        min-height: 34px;

        padding:
            0 10px;

        font-size: 9px;
    }

}


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

.main-navigation {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        29px;

    margin-left:
        auto;
}

.main-navigation a {

    position:
        relative;

    color:
        #354252;

    font-size:
        13px;

    font-weight:
        600;

    transition:
        color var(--transition);
}

.main-navigation a:hover {

    color:
        var(--orange-500);
}

.main-navigation a::after {

    content:
        "";

    position:
        absolute;

    left:
        0;

    bottom:
        -8px;

    width:
        0;

    height:
        2px;

    border-radius:
        999px;

    background:
        var(--orange-500);

    transition:
        width var(--transition);
}

.main-navigation a:hover::after {

    width:
        100%;
}


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

.header-contact {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        38px;

    padding:
        0 15px;

    border-radius:
        9px;

    background:
        var(--navy-900);

    color:
        #ffffff;

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        .3px;

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

.header-contact:hover {

    transform:
        translateY(-2px);

    background:
        var(--orange-500);
}


/* =====================================================
   05. HERO
===================================================== */

.hero-section {

    position:
        relative;

    overflow:
        hidden;

    background:
        linear-gradient(
            135deg,
            #f8fafc 0%,
            #ffffff 52%,
            #fff8f2 100%
        );
}

.hero-section::before {

    content:
        "";

    position:
        absolute;

    width:
        560px;

    height:
        560px;

    right:
        -250px;

    top:
        -220px;

    border-radius:
        50%;

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

    pointer-events:
        none;
}

.hero-section::after {

    content:
        "";

    position:
        absolute;

    width:
        420px;

    height:
        420px;

    left:
        -250px;

    bottom:
        -250px;

    border-radius:
        50%;

    background:
        rgba(8, 27, 45, 0.025);

    pointer-events:
        none;
}


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

.hero-container {

    position:
        relative;

    z-index:
        2;

    min-height:
        620px;

    display:
        grid;

    grid-template-columns:
        minmax(0, .95fr)
        minmax(0, 1.05fr);

    align-items:
        center;

    gap:
        65px;

    padding:
        75px 0;
}


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

.hero-content {

    max-width:
        620px;
}

.hero-badge {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    min-height:
        30px;

    padding:
        0 11px;

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

    border-radius:
        999px;

    background:
        var(--orange-soft);

    color:
        var(--orange-600);

    font-size:
        9px;

    font-weight:
        850;

    letter-spacing:
        1.2px;

    text-transform:
        uppercase;
}

.hero-badge::before {

    content:
        "";

    width:
        6px;

    height:
        6px;

    border-radius:
        50%;

    background:
        var(--orange-500);

    box-shadow:
        0 0 10px
        rgba(255,106,0,.5);
}


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

.hero-content h1 {

    margin:
        19px 0 0;

    color:
        var(--navy-900);

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

    line-height:
        .98;

    letter-spacing:
        -3px;

    font-weight:
        950;
}

.hero-content h1 span {

    display:
        block;

    color:
        var(--orange-500);
}


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

.hero-description {

    max-width:
        590px;

    margin:
        21px 0 0;

    color:
        var(--text-muted);

    font-size:
        14px;

    line-height:
        1.8;
}


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

.hero-badges {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        8px;

    margin-top:
        24px;
}

.hero-badges span {

    display:
        inline-flex;

    align-items:
        center;

    min-height:
        29px;

    padding:
        0 10px;

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

    border-radius:
        7px;

    background:
        #ffffff;

    color:
        #536172;

    font-size:
        9px;

    font-weight:
        750;

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


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

.hero-actions {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        10px;

    margin-top:
        27px;
}

.btn {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        45px;

    padding:
        0 18px;

    border-radius:
        9px;

    font-size:
        11px;

    font-weight:
        850;

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

.btn:hover {

    transform:
        translateY(-2px);
}

.btn-primary {

    background:
        var(--orange-500);

    color:
        #ffffff;

    box-shadow:
        0 1px 4px rgba(255, 106, 0, 0.121),
        0 10px 25px
        rgba(255,106,0,.22);
}

.btn-primary:hover {

    background:
        var(--orange-600);
}

.btn-secondary {

    border:
        1px solid
        rgba(8,27,45,.12);

    background:
        #ffffff;

    color:
        var(--navy-900);
}

.btn-secondary:hover {

    border-color:
        rgba(255,106,0,.25);

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


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

.hero-trust {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        15px;

    margin-top:
        25px;

    color:
        #7a8695;

    font-size:
        9px;

    font-weight:
        650;
}

.hero-trust span {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        6px;
}

.hero-trust span::before {

    content:
        "✓";

    color:
        #22a66f;

    font-weight:
        900;
}


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

.hero-visual {

    position:
        relative;

    min-height:
        500px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;
}


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

.hero-image-card {

    position:
        relative;

    width:
        100%;

    min-height:
        500px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;

    border-radius:
        28px;

    background:
        linear-gradient(
            145deg,
            #071625,
            #102b44
        );

    box-shadow:
        0 4px 14px rgba(6, 17, 31, 0.099),
        0 30px 80px
        rgba(6,17,31,.18);
}

.hero-image-card::before {

    content:
        "";

    position:
        absolute;

    width:
        430px;

    height:
        430px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(255,106,0,.22),
            transparent 68%
        );

    filter:
        blur(6px);
}

.hero-image-card::after {

    content:
        "";

    position:
        absolute;

    inset:
        14px;

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

    border-radius:
        21px;

    pointer-events:
        none;
}


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

.hero-image-card img {

    position:
        relative;

    z-index:
        3;

    width:
        92%;

    max-height:
        500px;

    object-fit:
        contain;

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

    transition:
        transform 500ms
        cubic-bezier(.16,1,.3,1);
}

.hero-image-card:hover img {

    transform:
        scale(1.025)
        translateY(-5px);
}


/* =====================================================
   HERO STOCK LABEL
===================================================== */

.hero-stock {

    position:
        absolute;

    z-index:
        5;

    top:
        18px;

    right:
        18px;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    min-height:
        30px;

    padding:
        0 10px;

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

    border-radius:
        999px;

    background:
        rgba(6,17,31,.72);

    backdrop-filter:
        blur(14px);

    color:
        rgba(255,255,255,.82);

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        .8px;
}

.hero-stock::before {

    content:
        "";

    width:
        6px;

    height:
        6px;

    border-radius:
        50%;

    background:
        #32d583;

    box-shadow:
        0 0 10px
        rgba(50,213,131,.6);
}


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

.hero-visual-label {

    position:
        absolute;

    z-index:
        5;

    left:
        22px;

    bottom:
        20px;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    min-height:
        29px;

    padding:
        0 10px;

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

    border-radius:
        7px;

    background:
        rgba(6,17,31,.72);

    backdrop-filter:
        blur(14px);

    color:
        rgba(255,255,255,.78);

    font-size:
        8px;

    font-weight:
        750;

    letter-spacing:
        .8px;
}


/* =====================================================
   HERO DECORATION LINE
===================================================== */

.hero-line {

    position:
        absolute;

    right:
        -30px;

    bottom:
        35px;

    width:
        110px;

    height:
        2px;

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

    opacity:
        .8;
}


/* =====================================================
   06. RESPONSIVE TABLET
===================================================== */

@media (max-width: 950px) {

    .main-navigation {
        gap:
            18px;
    }

    .hero-container {

        grid-template-columns:
            1fr;

        min-height:
            auto;

        gap:
            45px;
    }

    .hero-content {

        max-width:
            760px;

        text-align:
            center;

        margin:
            0 auto;
    }

    .hero-content h1 {
        margin-left:
            auto;

        margin-right:
            auto;
    }

    .hero-description {

        margin-left:
            auto;

        margin-right:
            auto;
    }

    .hero-badges,
    .hero-actions,
    .hero-trust {

        justify-content:
            center;
    }

    .hero-visual {

        min-height:
            430px;
    }

    .hero-image-card {

        min-height:
            400px;
    }
}


/* =====================================================
   07. RESPONSIVE MOBILE
===================================================== */

@media (max-width: 700px) {

    :root {

        --container:
            min(100% - 30px, 1180px);
    }

    .site-header {

        position:
            relative;
    }

    .header-container {

        min-height:
            70px;
    }

    .main-navigation {

        display:
            none;
    }

    .header-contact {

        min-height:
            36px;

        padding:
            0 12px;

        font-size:
            10px;
    }

    .brand-logo {

        width:
            38px;

        height:
            38px;
    }

    .brand-text strong {

        font-size:
            13px;
    }

    .hero-container {

        min-height:
            auto;

        padding:
            55px 0;

        gap:
            40px;
    }

    .hero-content {

        text-align:
            left;
    }

    .hero-content h1 {

        font-size:
            clamp(
                38px,
                11vw,
                52px
            );

        letter-spacing:
            -2px;
    }

    .hero-description {

        font-size:
            13px;

        line-height:
            1.7;
    }

    .hero-badges,
    .hero-actions,
    .hero-trust {

        justify-content:
            flex-start;
    }

    .hero-actions {

        flex-direction:
            column;

        align-items:
            stretch;
    }

    .hero-actions .btn {

        width:
            100%;
    }

    .hero-trust {

        flex-direction:
            column;

        gap:
            7px;
    }

    .hero-visual {

        min-height:
            330px;
    }

    .hero-image-card {

        min-height:
            330px;

        border-radius:
            20px;
    }

    .hero-image-card img {

        width:
            96%;
    }

    .hero-stock {

        top:
            12px;

        right:
            12px;

        font-size:
            8px;
    }
}


/* =====================================================
   08. REDUCED MOTION
===================================================== */

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

    html {
        scroll-behavior:
            auto;
    }

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

        transition-duration:
            0.01ms !important;
    }
}


/* =====================================================
   TANGGA HIDROLIK DALTON
   STEP 2
   INTRO + SINGLE MAST + DOUBLE MAST
===================================================== */


/* =====================================================
   01. PRODUCT INTRO
===================================================== */

.product-intro {

    position: relative;

    padding:
        90px 0 85px;

    background:
        #ffffff;

    overflow: hidden;
}


/* =====================================================
   SUBTLE BACKGROUND DECORATION
===================================================== */

.product-intro::before {

    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    left: -230px;
    top: 30px;

    border-radius: 50%;

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

.product-intro::after {

    content: "";

    position: absolute;

    width: 260px;
    height: 260px;

    right: -140px;
    bottom: -100px;

    border-radius: 50%;

    background:
        rgba(8, 27, 45, 0.025);
}


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

.intro-content {

    position: relative;

    z-index: 2;

    max-width:
        850px;

    margin:
        0 auto;

    text-align:
        center;
}


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

.section-label {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    margin-bottom:
        13px;

    color:
        var(--orange-500);

    font-size:
        10px;

    font-weight:
        850;

    letter-spacing:
        1.8px;

    text-transform:
        uppercase;
}

.section-label::before {

    content:
        "";

    width:
        22px;

    height:
        2px;

    border-radius:
        999px;

    background:
        var(--orange-500);
}


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

.intro-content h2 {

    margin:
        0;

    color:
        var(--navy-900);

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

    line-height:
        1.08;

    letter-spacing:
        -1.8px;

    font-weight:
        900;
}

.intro-content h2 span {

    color:
        var(--orange-500);
}


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

.intro-content > p {

    max-width:
        760px;

    margin:
        18px auto 0;

    color:
        var(--text-muted);

    font-size:
        14px;

    line-height:
        1.8;
}


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

.intro-highlight {

    display:
        grid;

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

    gap:
        14px;

    max-width:
        920px;

    margin:
        40px auto 0;
}


/* =====================================================
   INTRO HIGHLIGHT ITEM
===================================================== */

.intro-highlight-item {

    padding:
        21px 20px;

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

    border-radius:
        var(--radius-md);

    background:
        #ffffff;

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

    text-align:
        left;

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

.intro-highlight-item:hover {

    transform:
        translateY(-4px);

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

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


/* =====================================================
   HIGHLIGHT ICON
===================================================== */

.intro-highlight-icon {

    width:
        38px;

    height:
        38px;

    display:
        grid;

    place-items:
        center;

    margin-bottom:
        14px;

    border-radius:
        10px;

    background:
        var(--orange-soft);

    color:
        var(--orange-500);

    font-size:
        16px;

    font-weight:
        900;
}


/* =====================================================
   HIGHLIGHT TITLE
===================================================== */

.intro-highlight-item h3 {

    margin:
        0 0 5px;

    color:
        var(--navy-900);

    font-size:
        13px;

    font-weight:
        850;
}


/* =====================================================
   HIGHLIGHT DESCRIPTION
===================================================== */

.intro-highlight-item p {

    margin:
        0;

    color:
        var(--text-muted);

    font-size:
        11px;

    line-height:
        1.65;
}


/* =====================================================
   02. WORK PLATFORM TYPES
===================================================== */

.platform-types {

    position:
        relative;

    padding:
        95px 0 100px;

    background:
        #f5f7fa;

    overflow:
        hidden;
}


/* =====================================================
   TOP INDUSTRIAL LINE
===================================================== */

.platform-types::before {

    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        0;

    width:
        100%;

    height:
        3px;

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

    opacity:
        .7;
}


/* =====================================================
   PLATFORM HEADING
===================================================== */

.platform-heading {

    position:
        relative;

    z-index:
        2;

    max-width:
        760px;

    margin:
        0 auto 48px;

    text-align:
        center;
}

.platform-heading h2 {

    margin:
        0;

    color:
        var(--navy-900);

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

    line-height:
        1.1;

    letter-spacing:
        -1.6px;

    font-weight:
        900;
}

.platform-heading h2 span {

    color:
        var(--orange-500);
}

.platform-heading p {

    max-width:
        680px;

    margin:
        15px auto 0;

    color:
        var(--text-muted);

    font-size:
        13px;

    line-height:
        1.75;
}


/* =====================================================
   TYPE GRID
===================================================== */

.platform-grid {

    position:
        relative;

    z-index:
        2;

    display:
        grid;

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

    gap:
        24px;
}


/* =====================================================
   PLATFORM CARD
===================================================== */

.platform-card {

    position:
        relative;

    display:
        grid;

    grid-template-columns:
        0.95fr
        1.05fr;

    min-height:
        430px;

    overflow:
        hidden;

    border:
        1px solid
        rgba(8, 27, 45, 0.10);

    border-radius:
        var(--radius-xl);

    background:
        #ffffff;

    box-shadow:
        0 2px 9px rgba(6, 17, 31, 0.044),
        0 18px 50px
        rgba(6, 17, 31, 0.08);

    transition:
        transform 350ms
        cubic-bezier(.16,1,.3,1),
        box-shadow 350ms
        cubic-bezier(.16,1,.3,1),
        border-color 350ms;
}

.platform-card:hover {

    transform:
        translateY(-7px);

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

    box-shadow:
        0 3px 12px rgba(6, 17, 31, 0.077),
        0 28px 65px
        rgba(6, 17, 31, 0.14);
}


/* =====================================================
   PLATFORM IMAGE
===================================================== */

.platform-card-image {

    position:
        relative;

    min-height:
        430px;

    overflow:
        hidden;

    background:
        linear-gradient(
            145deg,
            #0b1c2e,
            #102b44
        );
}

.platform-card-image::after {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            180deg,
            transparent 55%,
            rgba(3, 12, 22, 0.45)
        );

    pointer-events:
        none;
}

.platform-card-image img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform 600ms
        cubic-bezier(.16,1,.3,1);
}

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

    transform:
        scale(1.045);
}


/* =====================================================
   IMAGE TAG
===================================================== */

.platform-image-tag {

    position:
        absolute;

    top:
        17px;

    left:
        17px;

    z-index:
        3;

    display:
        inline-flex;

    align-items:
        center;

    min-height:
        28px;

    padding:
        0 10px;

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

    border-radius:
        999px;

    background:
        rgba(6,17,31,.72);

    color:
        #ffffff;

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        1px;

    backdrop-filter:
        blur(12px);
}


/* =====================================================
   PLATFORM CONTENT
===================================================== */

.platform-card-content {

    display:
        flex;

    flex-direction:
        column;

    padding:
        35px 30px;
}


/* =====================================================
   PLATFORM NUMBER
===================================================== */

.platform-number {

    width:
        36px;

    height:
        36px;

    display:
        grid;

    place-items:
        center;

    margin-bottom:
        18px;

    border-radius:
        10px;

    background:
        var(--orange-soft);

    color:
        var(--orange-500);

    font-size:
        11px;

    font-weight:
        900;
}


/* =====================================================
   PLATFORM TITLE
===================================================== */

.platform-card-content h3 {

    margin:
        0;

    color:
        var(--navy-900);

    font-size:
        25px;

    line-height:
        1.15;

    letter-spacing:
        -0.8px;

    font-weight:
        900;
}

.platform-card-content h3 span {

    display:
        block;

    color:
        var(--orange-500);
}


/* =====================================================
   PLATFORM DESCRIPTION
===================================================== */

.platform-card-content > p {

    margin:
        15px 0 0;

    color:
        var(--text-muted);

    font-size:
        12px;

    line-height:
        1.75;
}


/* =====================================================
   PLATFORM FEATURE LIST
===================================================== */

.platform-feature-list {

    display:
        flex;

    flex-direction:
        column;

    gap:
        9px;

    margin:
        22px 0 0;

    padding:
        0;

    list-style:
        none;
}

.platform-feature-list li {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        9px;

    color:
        #344252;

    font-size:
        11px;

    line-height:
        1.5;
}

.platform-feature-list li::before {

    content:
        "✓";

    flex:
        0 0 auto;

    width:
        18px;

    height:
        18px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        5px;

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

    color:
        var(--orange-500);

    font-size:
        9px;

    font-weight:
        900;
}


/* =====================================================
   PLATFORM SPECS
===================================================== */

.platform-specs {

    display:
        grid;

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

    gap:
        8px;

    margin-top:
        23px;
}

.platform-spec {

    padding:
        10px 11px;

    border:
        1px solid
        rgba(8, 27, 45, 0.08);

    border-radius:
        8px;

    background:
        #f8fafc;
}

.platform-spec small {

    display:
        block;

    margin-bottom:
        3px;

    color:
        #8a95a3;

    font-size:
        8px;

    font-weight:
        700;

    text-transform:
        uppercase;

    letter-spacing:
        .7px;
}

.platform-spec strong {

    display:
        block;

    color:
        var(--navy-900);

    font-size:
        10px;

    font-weight:
        800;
}


/* =====================================================
   PLATFORM ACTION
===================================================== */

.platform-card-action {

    margin-top:
        auto;

    padding-top:
        24px;
}

.platform-card-action a {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        40px;

    padding:
        0 15px;

    border-radius:
        8px;

    background:
        var(--navy-900);

    color:
        #ffffff;

    font-size:
        10px;

    font-weight:
        800;

    transition:
        all var(--transition);
}

.platform-card-action a:hover {

    background:
        var(--orange-500);

    transform:
        translateX(3px);
}


/* =====================================================
   03. INDUSTRIAL NOTE
===================================================== */

.platform-note {

    display:
        flex;

    align-items:
        center;

    gap:
        15px;

    max-width:
        850px;

    margin:
        45px auto 0;

    padding:
        18px 22px;

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

    border-radius:
        12px;

    background:
        rgba(255, 106, 0, 0.045);
}

.platform-note-icon {

    flex:
        0 0 auto;

    width:
        38px;

    height:
        38px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        10px;

    background:
        var(--orange-soft);

    color:
        var(--orange-500);

    font-weight:
        900;
}

.platform-note p {

    margin:
        0;

    color:
        #566273;

    font-size:
        11px;

    line-height:
        1.65;
}

.platform-note strong {

    color:
        var(--navy-900);
}


/* =====================================================
   04. RESPONSIVE TABLET
===================================================== */

@media (max-width: 980px) {

    .intro-highlight {

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

    .platform-grid {

        grid-template-columns:
            1fr;

        max-width:
            760px;

        margin:
            0 auto;
    }

    .platform-card {

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


/* =====================================================
   05. RESPONSIVE MOBILE
===================================================== */

@media (max-width: 700px) {

    .product-intro {

        padding:
            65px 0;
    }

    .intro-content h2 {

        font-size:
            30px;
    }

    .intro-content > p {

        font-size:
            12px;
    }

    .intro-highlight {

        grid-template-columns:
            1fr;

        margin-top:
            28px;
    }

    .intro-highlight-item {

        padding:
            18px;
    }

    .platform-types {

        padding:
            65px 0;
    }

    .platform-heading {

        margin-bottom:
            30px;
    }

    .platform-heading h2 {

        font-size:
            30px;
    }

    .platform-grid {

        gap:
            18px;
    }

    .platform-card {

        grid-template-columns:
            1fr;

        min-height:
            auto;

        border-radius:
            18px;
    }

    .platform-card-image {

        min-height:
            280px;
    }

    .platform-card-content {

        padding:
            27px 22px;
    }

    .platform-card-content h3 {

        font-size:
            23px;
    }

    .platform-specs {

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

    .platform-note {

        align-items:
            flex-start;

        margin-top:
            28px;

        padding:
            16px;
    }
}


/* =====================================================
   TANGGA HIDROLIK DALTON
   STEP 3
   MODEL DETAIL
   SINGLE MAST + DOUBLE MAST
===================================================== */


/* =====================================================
   MODEL DETAIL SECTION
===================================================== */

.model-detail-section {

    position:
        relative;

    padding:
        100px 0;

    background:
        #ffffff;

    overflow:
        hidden;
}

.model-detail-section::before {

    content:
        "";

    position:
        absolute;

    width:
        520px;

    height:
        520px;

    top:
        5%;

    right:
        -350px;

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

    border-radius:
        50%;

    pointer-events:
        none;
}

.model-detail-section::after {

    content:
        "";

    position:
        absolute;

    width:
        300px;

    height:
        300px;

    bottom:
        -180px;

    left:
        -150px;

    border-radius:
        50%;

    background:
        rgba(8, 27, 45, 0.025);

    pointer-events:
        none;
}


/* =====================================================
   MODEL DETAIL LIST
===================================================== */

.model-detail-list {

    position:
        relative;

    z-index:
        2;

    display:
        flex;

    flex-direction:
        column;

    gap:
        30px;
}


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

.model-detail-card {

    position:
        relative;

    display:
        grid;

    grid-template-columns:
        minmax(0, 0.95fr)
        minmax(0, 1.05fr);

    min-height:
        500px;

    overflow:
        hidden;

    border:
        1px solid
        rgba(8, 27, 45, 0.10);

    border-radius:
        24px;

    background:
        #ffffff;

    box-shadow:
        0 2px 11px rgba(6, 17, 31, 0.05),
        0 20px 60px
        rgba(6, 17, 31, 0.09);

    transition:
        transform 350ms
        cubic-bezier(.16,1,.3,1),
        box-shadow 350ms
        cubic-bezier(.16,1,.3,1),
        border-color 350ms;
}

.model-detail-card:hover {

    transform:
        translateY(-6px);

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

    box-shadow:
        0 4px 14px rgba(6, 17, 31, 0.077),
        0 30px 75px
        rgba(6, 17, 31, 0.14);
}


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

.model-detail-image {

    position:
        relative;

    min-height:
        500px;

    overflow:
        hidden;

    background:
        linear-gradient(
            145deg,
            #071625,
            #102b44
        );
}

.model-detail-image::before {

    content:
        "";

    position:
        absolute;

    width:
        380px;

    height:
        380px;

    top:
        50%;

    left:
        50%;

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

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 106, 0, 0.16),
            transparent 68%
        );

    filter:
        blur(6px);
}

.model-detail-image img {

    position:
        relative;

    z-index:
        2;

    width:
        100%;

    height:
        100%;

    object-fit:
        contain;

    padding:
        35px;

    filter:
        drop-shadow(
            0 25px 30px
            rgba(0,0,0,.32)
        );

    transition:
        transform 550ms
        cubic-bezier(.16,1,.3,1);
}

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

    transform:
        scale(1.045);
}


/* =====================================================
   IMAGE BADGE
===================================================== */

.model-detail-badge {

    position:
        absolute;

    z-index:
        5;

    top:
        18px;

    left:
        18px;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    min-height:
        30px;

    padding:
        0 12px;

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

    border-radius:
        999px;

    background:
        rgba(6,17,31,.78);

    color:
        #ffffff;

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        1px;

    backdrop-filter:
        blur(12px);
}

.model-detail-badge::before {

    content:
        "";

    width:
        6px;

    height:
        6px;

    border-radius:
        50%;

    background:
        var(--orange-500);

    box-shadow:
        0 0 10px
        rgba(255,106,0,.65);
}


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

.model-detail-content {

    display:
        flex;

    flex-direction:
        column;

    padding:
        43px 42px;
}


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

.model-detail-number {

    width:
        42px;

    height:
        42px;

    display:
        grid;

    place-items:
        center;

    margin-bottom:
        18px;

    border-radius:
        11px;

    background:
        rgba(255,106,0,.10);

    color:
        var(--orange-500);

    font-size:
        11px;

    font-weight:
        900;
}


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

.model-detail-content h3 {

    margin:
        0;

    color:
        var(--navy-900);

    font-size:
        clamp(
            26px,
            3vw,
            36px
        );

    line-height:
        1.08;

    letter-spacing:
        -1.2px;

    font-weight:
        900;
}

.model-detail-content h3 span {

    display:
        block;

    color:
        var(--orange-500);
}


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

.model-detail-content > p {

    margin:
        16px 0 0;

    color:
        var(--text-muted);

    font-size:
        12px;

    line-height:
        1.8;
}


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

.model-detail-features {

    display:
        grid;

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

    gap:
        9px;

    margin-top:
        24px;
}

.model-detail-feature {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        9px;

    padding:
        11px;

    border:
        1px solid
        rgba(8,27,45,.08);

    border-radius:
        9px;

    background:
        #f8fafc;
}


/* =====================================================
   FEATURE ICON
===================================================== */

.model-detail-feature-icon {

    flex:
        0 0 auto;

    width:
        20px;

    height:
        20px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        6px;

    background:
        rgba(255,106,0,.10);

    color:
        var(--orange-500);

    font-size:
        9px;

    font-weight:
        900;
}

.model-detail-feature strong {

    display:
        block;

    color:
        var(--navy-900);

    font-size:
        9px;

    line-height:
        1.45;
}


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

.model-detail-specs {

    margin-top:
        24px;

    border:
        1px solid
        rgba(8,27,45,.09);

    border-radius:
        11px;

    overflow:
        hidden;
}

.model-detail-spec {

    display:
        grid;

    grid-template-columns:
        42% 58%;

    min-height:
        36px;

    border-bottom:
        1px solid
        rgba(8,27,45,.07);
}

.model-detail-spec:last-child {

    border-bottom:
        none;
}

.model-detail-spec span {

    display:
        flex;

    align-items:
        center;

    padding:
        8px 11px;

    background:
        #f7f9fb;

    color:
        #7d8996;

    font-size:
        9px;

    font-weight:
        700;
}

.model-detail-spec strong {

    display:
        flex;

    align-items:
        center;

    padding:
        8px 11px;

    color:
        var(--navy-900);

    font-size:
        9px;

    font-weight:
        800;
}


/* =====================================================
   MODEL DETAIL ACTION
===================================================== */

.model-detail-action {

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    margin-top:
        auto;

    padding-top:
        25px;
}

.model-detail-action a {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        40px;

    padding:
        0 16px;

    border-radius:
        8px;

    background:
        var(--navy-900);

    color:
        #ffffff;

    font-size:
        10px;

    font-weight:
        800;

    transition:
        all var(--transition);
}

.model-detail-action a:hover {

    background:
        var(--orange-500);

    transform:
        translateY(-2px);
}

.model-detail-action a.secondary {

    color:
        var(--navy-900);

    border:
        1px solid
        rgba(8,27,45,.12);

    background:
        #ffffff;
}

.model-detail-action a.secondary:hover {

    color:
        var(--orange-500);

    border-color:
        rgba(255,106,0,.25);

    background:
        rgba(255,106,0,.04);
}


/* =====================================================
   MODEL META
===================================================== */

.model-detail-meta {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        7px;

    margin-top:
        18px;
}

.model-detail-meta span {

    min-height:
        26px;

    display:
        inline-flex;

    align-items:
        center;

    padding:
        0 9px;

    border:
        1px solid
        rgba(8,27,45,.08);

    border-radius:
        6px;

    background:
        #ffffff;

    color:
        #657283;

    font-size:
        8px;

    font-weight:
        700;
}


/* =====================================================
   ALTERNATING CARD
===================================================== */

.model-detail-card:nth-child(even) {

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(0, 0.95fr);
}

.model-detail-card:nth-child(even)
.model-detail-image {

    order:
        2;
}

.model-detail-card:nth-child(even)
.model-detail-content {

    order:
        1;
}


/* =====================================================
   ORANGE EDGE
===================================================== */

.model-detail-card::before {

    content:
        "";

    position:
        absolute;

    top:
        0;

    bottom:
        0;

    left:
        0;

    width:
        4px;

    z-index:
        10;

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

    opacity:
        .9;
}


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

@media (max-width: 900px) {

    .model-detail-card,
    .model-detail-card:nth-child(even) {

        grid-template-columns:
            1fr;
    }

    .model-detail-card:nth-child(even)
    .model-detail-image {

        order:
            1;
    }

    .model-detail-card:nth-child(even)
    .model-detail-content {

        order:
            2;
    }

    .model-detail-image {

        min-height:
            390px;
    }

    .model-detail-content {

        padding:
            32px 30px;
    }
}


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

@media (max-width: 600px) {

    .model-detail-section {

        padding:
            65px 0;
    }

    .model-detail-list {

        gap:
            20px;
    }

    .model-detail-card {

        border-radius:
            17px;
    }

    .model-detail-image {

        min-height:
            290px;
    }

    .model-detail-image img {

        padding:
            22px;
    }

    .model-detail-content {

        padding:
            25px 20px;
    }

    .model-detail-content h3 {

        font-size:
            26px;
    }

    .model-detail-features {

        grid-template-columns:
            1fr;
    }

    .model-detail-action {

        flex-direction:
            column;

        align-items:
            stretch;
    }

    .model-detail-action a {

        width:
            100%;
    }

    .model-detail-spec {

        grid-template-columns:
            40% 60%;
    }
}


/* =====================================================
   TANGGA HIDROLIK DALTON
   STEP 4
   ADVANTAGES / KEUNGGULAN PRODUK
===================================================== */


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

.advantages-section {

    position:
        relative;

    padding:
        105px 0;

    background:
        #f7f9fb;

    overflow:
        hidden;
}


/* =====================================================
   BACKGROUND DECORATION
===================================================== */

.advantages-section::before {

    content:
        "";

    position:
        absolute;

    width:
        520px;

    height:
        520px;

    top:
        -260px;

    left:
        -240px;

    border:
        1px solid
        rgba(255,106,0,.08);

    border-radius:
        50%;

    pointer-events:
        none;
}

.advantages-section::after {

    content:
        "";

    position:
        absolute;

    width:
        360px;

    height:
        360px;

    right:
        -180px;

    bottom:
        -220px;

    border-radius:
        50%;

    background:
        rgba(8,27,45,.025);

    pointer-events:
        none;
}


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

.advantages-grid {

    position:
        relative;

    z-index:
        2;

    display:
        grid;

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

    gap:
        18px;

    margin-top:
        48px;
}


/* =====================================================
   ADVANTAGE CARD
===================================================== */

.advantage-card {

    position:
        relative;

    min-height:
        260px;

    padding:
        30px 27px;

    overflow:
        hidden;

    border:
        1px solid
        rgba(8,27,45,.08);

    border-radius:
        18px;

    background:
        #ffffff;

    box-shadow:
        0 1px 6px rgba(6, 17, 31, 0.03),
        0 12px 35px
        rgba(6,17,31,.055);

    transition:
        transform 350ms
        cubic-bezier(.16,1,.3,1),
        box-shadow 350ms
        cubic-bezier(.16,1,.3,1),
        border-color 350ms;
}

.advantage-card:hover {

    transform:
        translateY(-8px);

    border-color:
        rgba(255,106,0,.24);

    box-shadow:
        0 3px 10px rgba(6, 17, 31, 0.061),
        0 24px 55px
        rgba(6,17,31,.11);
}


/* =====================================================
   CARD TOP LINE
===================================================== */

.advantage-card::before {

    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        0;

    width:
        100%;

    height:
        3px;

    background:
        linear-gradient(
            90deg,
            var(--orange-500),
            rgba(255,106,0,.08)
        );

    transform:
        scaleX(.25);

    transform-origin:
        left;

    transition:
        transform 350ms
        cubic-bezier(.16,1,.3,1);
}

.advantage-card:hover::before {

    transform:
        scaleX(1);
}


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

.advantage-number {

    position:
        absolute;

    top:
        22px;

    right:
        23px;

    color:
        rgba(8,27,45,.055);

    font-size:
        42px;

    line-height:
        1;

    font-weight:
        900;

    letter-spacing:
        -2px;

    transition:
        color 300ms,
        transform 300ms;
}

.advantage-card:hover
.advantage-number {

    color:
        rgba(255,106,0,.12);

    transform:
        translateY(-3px);
}


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

.advantage-icon {

    width:
        46px;

    height:
        46px;

    display:
        grid;

    place-items:
        center;

    margin-bottom:
        25px;

    border:
        1px solid
        rgba(255,106,0,.18);

    border-radius:
        12px;

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

    color:
        var(--orange-500);

    font-size:
        16px;

    font-weight:
        900;

    box-shadow:
        0 1px 4px rgba(255, 106, 0, 0.044),
        0 8px 20px
        rgba(255,106,0,.08);

    transition:
        transform 300ms,
        background 300ms,
        box-shadow 300ms;
}

.advantage-card:hover
.advantage-icon {

    transform:
        translateY(-3px)
        scale(1.05);

    background:
        rgba(255,106,0,.13);

    box-shadow:
        0 1px 4px rgba(255, 106, 0, 0.072),
        0 12px 25px
        rgba(255,106,0,.13);
}


/* =====================================================
   ADVANTAGE TITLE
===================================================== */

.advantage-card h3 {

    margin:
        0;

    max-width:
        230px;

    color:
        var(--navy-900);

    font-size:
        15px;

    line-height:
        1.35;

    font-weight:
        850;

    letter-spacing:
        -.3px;
}


/* =====================================================
   ADVANTAGE DESCRIPTION
===================================================== */

.advantage-card p {

    margin:
        13px 0 0;

    color:
        var(--text-muted);

    font-size:
        11px;

    line-height:
        1.75;
}


/* =====================================================
   ADVANTAGE HOVER GLOW
===================================================== */

.advantage-card::after {

    content:
        "";

    position:
        absolute;

    width:
        150px;

    height:
        150px;

    right:
        -85px;

    bottom:
        -85px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(255,106,0,.10),
            transparent 70%
        );

    opacity:
        0;

    transition:
        opacity 350ms;
}

.advantage-card:hover::after {

    opacity:
        1;
}


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

@media (max-width: 1000px) {

    .advantages-grid {

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

        gap:
            16px;
    }

    .advantage-card {

        min-height:
            235px;
    }
}


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

@media (max-width: 600px) {

    .advantages-section {

        padding:
            70px 0;
    }

    .advantages-grid {

        grid-template-columns:
            1fr;

        gap:
            14px;

        margin-top:
            34px;
    }

    .advantage-card {

        min-height:
            auto;

        padding:
            26px 22px;
    }

    .advantage-number {

        top:
            18px;

        right:
            19px;

        font-size:
            34px;
    }

    .advantage-icon {

        width:
            42px;

        height:
            42px;

        margin-bottom:
            20px;
    }

    .advantage-card h3 {

        font-size:
            14px;
    }

    .advantage-card p {

        font-size:
            10.5px;

        line-height:
            1.7;
    }
}



/* =====================================================
   TANGGA HIDROLIK DALTON
   STEP 5
   SAFETY / KESELAMATAN KERJA
===================================================== */


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

.safety-section {

    position:
        relative;

    padding:
        105px 0;

    overflow:
        hidden;

    background:
        var(--navy-900);

    color:
        #ffffff;
}


/* =====================================================
   BACKGROUND GRID
===================================================== */

.safety-section::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    background-image:
        linear-gradient(
            rgba(255,255,255,.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.025) 1px,
            transparent 1px
        );

    background-size:
        42px 42px;

    opacity:
        .5;

    pointer-events:
        none;
}


/* =====================================================
   ORANGE GLOW
===================================================== */

.safety-section::after {

    content:
        "";

    position:
        absolute;

    width:
        520px;

    height:
        520px;

    right:
        -250px;

    top:
        -180px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(255,106,0,.18),
            transparent 68%
        );

    filter:
        blur(9px);

    pointer-events:
        none;
}


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

.safety-layout {

    position:
        relative;

    z-index:
        2;

    display:
        grid;

    grid-template-columns:
        minmax(0, .9fr)
        minmax(0, 1.1fr);

    align-items:
        center;

    gap:
        70px;
}


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

.safety-content {

    max-width:
        570px;
}


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

.safety-content .section-label {

    color:
        var(--orange-400);
}

.safety-content .section-label::before {

    background:
        var(--orange-400);
}


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

.safety-content h2 {

    margin:
        0;

    color:
        #ffffff;

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

    line-height:
        1.05;

    letter-spacing:
        -1.8px;

    font-weight:
        900;
}

.safety-content h2 span {

    display:
        block;

    color:
        var(--orange-400);
}


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

.safety-content > p {

    margin:
        18px 0 0;

    color:
        rgba(255,255,255,.62);

    font-size:
        13px;

    line-height:
        1.8;
}


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

.safety-list {

    display:
        flex;

    flex-direction:
        column;

    gap:
        12px;

    margin-top:
        32px;
}


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

.safety-item {

    display:
        grid;

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

    align-items:
        start;

    gap:
        14px;

    padding:
        16px;

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

    border-radius:
        12px;

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

    backdrop-filter:
        blur(12px);

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

.safety-item:hover {

    transform:
        translateX(5px);

    border-color:
        rgba(255,106,0,.28);

    background:
        rgba(255,255,255,.065);
}


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

.safety-item > span {

    width:
        40px;

    height:
        40px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid
        rgba(255,106,0,.25);

    border-radius:
        10px;

    background:
        rgba(255,106,0,.12);

    color:
        var(--orange-400);

    font-size:
        13px;

    font-weight:
        900;
}


/* =====================================================
   SAFETY ITEM TITLE
===================================================== */

.safety-item strong {

    display:
        block;

    margin-top:
        1px;

    color:
        #ffffff;

    font-size:
        12px;

    line-height:
        1.4;

    font-weight:
        800;
}


/* =====================================================
   SAFETY ITEM DESCRIPTION
===================================================== */

.safety-item p {

    margin:
        5px 0 0;

    color:
        rgba(255,255,255,.52);

    font-size:
        10px;

    line-height:
        1.65;
}


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

.safety-visual {

    position:
        relative;

    min-height:
        530px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;

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

    border-radius:
        26px;

    background:
        linear-gradient(
            145deg,
            #102b44,
            #071522
        );

    box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.138),
        0 30px 80px
        rgba(0,0,0,.25);
}


/* =====================================================
   VISUAL INNER BORDER
===================================================== */

.safety-visual::before {

    content:
        "";

    position:
        absolute;

    inset:
        13px;

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

    border-radius:
        18px;

    pointer-events:
        none;

    z-index:
        3;
}


/* =====================================================
   VISUAL ORANGE GLOW
===================================================== */

.safety-visual::after {

    content:
        "";

    position:
        absolute;

    width:
        420px;

    height:
        420px;

    left:
        50%;

    top:
        50%;

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

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(255,106,0,.18),
            transparent 68%
        );

    pointer-events:
        none;
}


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

.safety-visual img {

    position:
        relative;

    z-index:
        2;

    width:
        94%;

    height:
        100%;

    max-height:
        500px;

    object-fit:
        contain;

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

    transition:
        transform 500ms
        cubic-bezier(.16,1,.3,1);
}

.safety-visual:hover img {

    transform:
        scale(1.025)
        translateY(-4px);
}


/* =====================================================
   SAFETY VISUAL LABEL
===================================================== */

.safety-visual::marker {
    display:
        none;
}


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

@media (max-width: 950px) {

    .safety-layout {

        grid-template-columns:
            1fr;

        gap:
            45px;
    }

    .safety-content {

        max-width:
            760px;

        margin:
            0 auto;

        text-align:
            center;
    }

    .safety-content .section-label {

        justify-content:
            center;
    }

    .safety-content h2 span {

        display:
            inline;
    }

    .safety-visual {

        min-height:
            450px;

        max-width:
            760px;

        width:
            100%;

        margin:
            0 auto;
    }
}


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

@media (max-width: 600px) {

    .safety-section {

        padding:
            70px 0;
    }

    .safety-content {

        text-align:
            left;
    }

    .safety-content .section-label {

        justify-content:
            flex-start;
    }

    .safety-content h2 {

        font-size:
            31px;

        letter-spacing:
            -1.2px;
    }

    .safety-content h2 span {

        display:
            block;
    }

    .safety-content > p {

        font-size:
            11px;

        line-height:
            1.7;
    }

    .safety-list {

        gap:
            9px;

        margin-top:
            25px;
    }

    .safety-item {

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

        gap:
            10px;

        padding:
            13px;
    }

    .safety-item > span {

        width:
            34px;

        height:
            34px;

        border-radius:
            8px;

        font-size:
            11px;
    }

    .safety-item strong {

        font-size:
            10.5px;
    }

    .safety-item p {

        font-size:
            9px;
    }

    .safety-visual {

        min-height:
            320px;

        border-radius:
            18px;
    }

    .safety-visual::before {

        inset:
            9px;

        border-radius:
            13px;
    }

    .safety-visual img {

        width:
            98%;
    }
}


/* =====================================================
   TANGGA HIDROLIK DALTON
   STEP 6
   SPECIFICATION / DATA TEKNIS
===================================================== */


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

.specification-section {

    position:
        relative;

    padding:
        105px 0;

    background:
        #ffffff;

    overflow:
        hidden;
}


/* =====================================================
   BACKGROUND DECORATION
===================================================== */

.specification-section::before {

    content:
        "";

    position:
        absolute;

    width:
        480px;

    height:
        480px;

    top:
        -250px;

    right:
        -230px;

    border-radius:
        50%;

    border:
        1px solid
        rgba(255,106,0,.08);

    pointer-events:
        none;
}

.specification-section::after {

    content:
        "";

    position:
        absolute;

    width:
        260px;

    height:
        260px;

    bottom:
        -150px;

    left:
        -120px;

    border-radius:
        50%;

    background:
        rgba(8,27,45,.025);

    pointer-events:
        none;
}


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

.specification-layout {

    position:
        relative;

    z-index:
        2;

    display:
        grid;

    grid-template-columns:
        minmax(260px, .72fr)
        minmax(0, 1.28fr);

    gap:
        65px;

    align-items:
        start;

    margin-top:
        48px;
}


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

.specification-intro {

    position:
        sticky;

    top:
        105px;

    padding:
        32px;

    border:
        1px solid
        rgba(8,27,45,.08);

    border-radius:
        18px;

    background:
        #f7f9fb;
}


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

.specification-intro::before {

    content:
        "";

    display:
        block;

    width:
        38px;

    height:
        3px;

    margin-bottom:
        20px;

    border-radius:
        999px;

    background:
        var(--orange-500);
}


/* =====================================================
   SPECIFICATION INTRO TITLE
===================================================== */

.specification-intro h3 {

    margin:
        0;

    color:
        var(--navy-900);

    font-size:
        22px;

    line-height:
        1.2;

    letter-spacing:
        -.7px;

    font-weight:
        900;
}


/* =====================================================
   SPECIFICATION INTRO TEXT
===================================================== */

.specification-intro p {

    margin:
        13px 0 0;

    color:
        var(--text-muted);

    font-size:
        11px;

    line-height:
        1.75;
}


/* =====================================================
   TECHNICAL TAG
===================================================== */

.specification-intro::after {

    content:
        "TECHNICAL DATA";

    display:
        inline-flex;

    align-items:
        center;

    min-height:
        28px;

    margin-top:
        24px;

    padding:
        0 10px;

    border:
        1px solid
        rgba(255,106,0,.15);

    border-radius:
        7px;

    background:
        rgba(255,106,0,.06);

    color:
        var(--orange-500);

    font-size:
        8px;

    font-weight:
        850;

    letter-spacing:
        1px;
}


/* =====================================================
   TABLE WRAPPER
===================================================== */

.specification-table-wrap {

    overflow:
        hidden;

    border:
        1px solid
        rgba(8,27,45,.10);

    border-radius:
        18px;

    background:
        #ffffff;

    box-shadow:
        0 2px 9px rgba(6, 17, 31, 0.039),
        0 18px 50px
        rgba(6,17,31,.07);
}


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

.specification-table {

    width:
        100%;

    border-collapse:
        collapse;

    table-layout:
        fixed;
}


/* =====================================================
   TABLE ROW
===================================================== */

.specification-table tr {

    border-bottom:
        1px solid
        rgba(8,27,45,.07);

    transition:
        background var(--transition);
}

.specification-table tr:last-child {

    border-bottom:
        none;
}

.specification-table tr:hover {

    background:
        rgba(255,106,0,.025);
}


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

.specification-table th {

    width:
        40%;

    padding:
        16px 20px;

    text-align:
        left;

    vertical-align:
        middle;

    background:
        #f7f9fb;

    color:
        #6e7b8b;

    font-size:
        10px;

    line-height:
        1.4;

    font-weight:
        750;
}


/* =====================================================
   TABLE VALUE
===================================================== */

.specification-table td {

    padding:
        16px 20px;

    color:
        var(--navy-900);

    font-size:
        11px;

    line-height:
        1.5;

    font-weight:
        800;

    vertical-align:
        middle;
}


/* =====================================================
   TABLE DIVIDER
===================================================== */

.specification-table th {

    border-right:
        1px solid
        rgba(8,27,45,.07);
}


/* =====================================================
   IMPORTANT VALUE
===================================================== */

.specification-table td strong {

    color:
        var(--orange-500);

    font-weight:
        850;
}


/* =====================================================
   SPECIFICATION TOP BAR
===================================================== */

.specification-table-wrap::before {

    content:
        "SPESIFIKASI PRODUK";

    display:
        flex;

    align-items:
        center;

    min-height:
        48px;

    padding:
        0 20px;

    background:
        var(--navy-900);

    color:
        #ffffff;

    font-size:
        9px;

    font-weight:
        850;

    letter-spacing:
        1.4px;
}


/* =====================================================
   TECHNICAL STATUS
===================================================== */

.specification-status {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        9px;

    margin-top:
        18px;
}

.specification-status span {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        6px;

    min-height:
        28px;

    padding:
        0 10px;

    border:
        1px solid
        rgba(8,27,45,.08);

    border-radius:
        7px;

    background:
        #ffffff;

    color:
        #677486;

    font-size:
        8px;

    font-weight:
        750;
}

.specification-status span::before {

    content:
        "✓";

    color:
        #22a66f;

    font-weight:
        900;
}


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

.specification-note {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        11px;

    margin-top:
        20px;

    padding:
        15px 17px;

    border:
        1px solid
        rgba(255,106,0,.13);

    border-radius:
        10px;

    background:
        rgba(255,106,0,.045);
}

.specification-note-icon {

    flex:
        0 0 auto;

    width:
        25px;

    height:
        25px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        7px;

    background:
        rgba(255,106,0,.11);

    color:
        var(--orange-500);

    font-size:
        10px;

    font-weight:
        900;
}

.specification-note p {

    margin:
        0;

    color:
        #697585;

    font-size:
        9px;

    line-height:
        1.65;
}


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

@media (max-width: 900px) {

    .specification-layout {

        grid-template-columns:
            1fr;

        gap:
            28px;

        margin-top:
            38px;
    }

    .specification-intro {

        position:
            relative;

        top:
            auto;

        max-width:
            700px;
    }

    .specification-table-wrap {

        max-width:
            100%;
    }
}


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

@media (max-width: 600px) {

    .specification-section {

        padding:
            70px 0;
    }

    .specification-layout {

        margin-top:
            30px;
    }

    .specification-intro {

        padding:
            24px 20px;

        border-radius:
            14px;
    }

    .specification-intro h3 {

        font-size:
            19px;
    }

    .specification-intro p {

        font-size:
            10px;
    }

    .specification-table-wrap {

        border-radius:
            13px;

        overflow-x:
            auto;
    }

    .specification-table {

        min-width:
            560px;
    }

    .specification-table-wrap::before {

        min-height:
            44px;

        padding:
            0 15px;

        font-size:
            8px;
    }

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

        padding:
            13px 14px;

        font-size:
            9px;
    }

    .specification-table th {

        width:
            40%;
    }

    .specification-status {

        gap:
            6px;
    }

    .specification-note {

        padding:
            13px;
    }
}


/* =====================================================
   TANGGA HIDROLIK DALTON
   STEP 7
   APPLICATION / PENGGUNAAN INDUSTRI
===================================================== */


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

.application-section {

    position:
        relative;

    padding:
        105px 0;

    background:
        #f7f9fb;

    overflow:
        hidden;
}


/* =====================================================
   BACKGROUND DECORATION
===================================================== */

.application-section::before {

    content:
        "";

    position:
        absolute;

    width:
        460px;

    height:
        460px;

    left:
        -270px;

    top:
        -170px;

    border:
        1px solid
        rgba(255,106,0,.08);

    border-radius:
        50%;

    pointer-events:
        none;
}

.application-section::after {

    content:
        "";

    position:
        absolute;

    width:
        330px;

    height:
        330px;

    right:
        -170px;

    bottom:
        -190px;

    border-radius:
        50%;

    background:
        rgba(8,27,45,.025);

    pointer-events:
        none;
}


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

.applications-grid {

    position:
        relative;

    z-index:
        2;

    display:
        grid;

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

    gap:
        14px;

    margin-top:
        48px;
}


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

.application-item {

    position:
        relative;

    min-height:
        120px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;

    padding:
        21px;

    overflow:
        hidden;

    border:
        1px solid
        rgba(8,27,45,.08);

    border-radius:
        15px;

    background:
        #ffffff;

    box-shadow:
        0 1px 5px rgba(6, 17, 31, 0.028),
        0 10px 30px
        rgba(6,17,31,.05);

    transition:
        transform 300ms
        cubic-bezier(.16,1,.3,1),
        border-color 300ms,
        box-shadow 300ms;
}

.application-item:hover {

    transform:
        translateY(-6px);

    border-color:
        rgba(255,106,0,.24);

    box-shadow:
        0 2px 8px rgba(6, 17, 31, 0.055),
        0 20px 45px
        rgba(6,17,31,.10);
}


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

.application-item::before {

    content:
        attr(data-number);

    position:
        absolute;

    top:
        13px;

    right:
        17px;

    color:
        rgba(8,27,45,.055);

    font-size:
        31px;

    line-height:
        1;

    font-weight:
        900;

    letter-spacing:
        -1px;
}


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

.application-item > span {

    width:
        34px;

    height:
        34px;

    display:
        grid;

    place-items:
        center;

    margin-bottom:
        16px;

    border:
        1px solid
        rgba(255,106,0,.16);

    border-radius:
        9px;

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

    color:
        var(--orange-500);

    font-size:
        11px;

    font-weight:
        900;

    transition:
        transform 300ms,
        background 300ms;
}

.application-item:hover > span {

    transform:
        scale(1.08);

    background:
        rgba(255,106,0,.13);
}


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

.application-item strong {

    display:
        block;

    max-width:
        180px;

    color:
        var(--navy-900);

    font-size:
        11px;

    line-height:
        1.45;

    font-weight:
        800;
}


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

.application-item::after {

    content:
        "";

    position:
        absolute;

    left:
        0;

    bottom:
        0;

    width:
        0;

    height:
        3px;

    border-radius:
        0 999px 999px 0;

    background:
        var(--orange-500);

    transition:
        width 300ms
        cubic-bezier(.16,1,.3,1);
}

.application-item:hover::after {

    width:
        48px;
}


/* =====================================================
   APPLICATION INTRO HEADING
===================================================== */

.application-section
.section-heading {

    position:
        relative;

    z-index:
        2;
}

.application-section
.section-heading h2 {

    max-width:
        760px;
}


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

@media (max-width: 1000px) {

    .applications-grid {

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


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

@media (max-width: 700px) {

    .application-section {

        padding:
            70px 0;
    }

    .applications-grid {

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

        gap:
            10px;

        margin-top:
            32px;
    }

    .application-item {

        min-height:
            105px;

        padding:
            17px;
    }

    .application-item > span {

        width:
            30px;

        height:
            30px;

        margin-bottom:
            12px;
    }

    .application-item strong {

        font-size:
            10px;
    }

    .application-item::before {

        font-size:
            24px;

        top:
            11px;

        right:
            13px;
    }
}


@media (max-width: 420px) {

    .applications-grid {

        grid-template-columns:
            1fr;
    }

    .application-item {

        min-height:
            88px;

        flex-direction:
            row;

        align-items:
            center;

        gap:
            13px;
    }

    .application-item > span {

        flex:
            0 0 auto;

        margin:
            0;
    }

    .application-item strong {

        max-width:
            none;
    }
}


/* =====================================================
   TANGGA HIDROLIK DALTON
   STEP 8
   FEATURES / FITUR UTAMA
===================================================== */


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

.features-section {

    position:
        relative;

    padding:
        110px 0;

    background:
        #ffffff;

    overflow:
        hidden;
}


/* =====================================================
   BACKGROUND DECORATION
===================================================== */

.features-section::before {

    content:
        "";

    position:
        absolute;

    width:
        520px;

    height:
        520px;

    right:
        -280px;

    top:
        -250px;

    border-radius:
        50%;

    border:
        1px solid
        rgba(255,106,0,.075);

    pointer-events:
        none;
}


.features-section::after {

    content:
        "";

    position:
        absolute;

    width:
        240px;

    height:
        240px;

    left:
        -120px;

    bottom:
        -120px;

    border-radius:
        50%;

    background:
        rgba(8,27,45,.025);

    pointer-events:
        none;
}


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

.features-layout {

    position:
        relative;

    z-index:
        2;

    display:
        grid;

    grid-template-columns:
        minmax(260px, .72fr)
        minmax(0, 1.28fr);

    gap:
        75px;

    align-items:
        start;
}


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

.features-heading {

    position:
        sticky;

    top:
        105px;

    max-width:
        470px;
}


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

.features-heading .section-label {

    color:
        var(--orange-500);
}


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

.features-heading h2 {

    margin:
        0;

    color:
        var(--navy-900);

    font-size:
        clamp(
            32px,
            4vw,
            49px
        );

    line-height:
        1.04;

    letter-spacing:
        -1.8px;

    font-weight:
        900;
}


.features-heading h2 span {

    display:
        block;

    color:
        var(--orange-500);
}


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

.features-list {

    display:
        flex;

    flex-direction:
        column;

    gap:
        0;

    border-top:
        1px solid
        rgba(8,27,45,.09);
}


/* =====================================================
   FEATURE ITEM
===================================================== */

.feature-item {

    position:
        relative;

    display:
        grid;

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

    gap:
        24px;

    align-items:
        start;

    padding:
        25px 15px 25px 0;

    border-bottom:
        1px solid
        rgba(8,27,45,.09);

    transition:
        padding-left 300ms
        cubic-bezier(.16,1,.3,1),
        background 300ms;
}


/* =====================================================
   FEATURE HOVER BACKGROUND
===================================================== */

.feature-item::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    left:
        -18px;

    right:
        -18px;

    border-radius:
        12px;

    background:
        rgba(255,106,0,.035);

    opacity:
        0;

    transform:
        scaleX(.97);

    transition:
        opacity 300ms,
        transform 300ms;

    z-index:
        -1;
}


.feature-item:hover::before {

    opacity:
        1;

    transform:
        scaleX(1);
}


/* =====================================================
   FEATURE NUMBER
===================================================== */

.feature-number {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        48px;

    height:
        48px;

    border:
        1px solid
        rgba(8,27,45,.10);

    border-radius:
        12px;

    background:
        #f7f9fb;

    color:
        #7b8795;

    font-size:
        10px;

    font-weight:
        850;

    letter-spacing:
        .5px;

    transition:
        background 300ms,
        color 300ms,
        border-color 300ms,
        transform 300ms;
}


.feature-item:hover
.feature-number {

    border-color:
        rgba(255,106,0,.20);

    background:
        rgba(255,106,0,.09);

    color:
        var(--orange-500);

    transform:
        translateY(-2px);
}


/* =====================================================
   FEATURE TITLE
===================================================== */

.feature-item strong {

    display:
        block;

    margin:
        1px 0 0;

    color:
        var(--navy-900);

    font-size:
        14px;

    line-height:
        1.45;

    font-weight:
        850;

    letter-spacing:
        -.25px;

    transition:
        color 250ms;
}


.feature-item:hover strong {

    color:
        var(--orange-500);
}


/* =====================================================
   FEATURE DESCRIPTION
===================================================== */

.feature-item p {

    max-width:
        620px;

    margin:
        7px 0 0;

    color:
        var(--text-muted);

    font-size:
        10.5px;

    line-height:
        1.75;
}


/* =====================================================
   FEATURE ACCENT LINE
===================================================== */

.feature-item::after {

    content:
        "";

    position:
        absolute;

    left:
        -1px;

    bottom:
        -1px;

    width:
        0;

    height:
        2px;

    border-radius:
        999px;

    background:
        var(--orange-500);

    transition:
        width 350ms
        cubic-bezier(.16,1,.3,1);
}


.feature-item:hover::after {

    width:
        65px;
}


/* =====================================================
   FEATURE HEADER DECORATION
===================================================== */

.features-heading::after {

    content:
        "DALTON • INDUSTRIAL WORK PLATFORM";

    display:
        inline-flex;

    margin-top:
        30px;

    padding:
        9px 12px;

    border:
        1px solid
        rgba(8,27,45,.08);

    border-radius:
        7px;

    background:
        #f7f9fb;

    color:
        #8b96a3;

    font-size:
        7px;

    line-height:
        1;

    font-weight:
        850;

    letter-spacing:
        1.3px;
}


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

@media (max-width: 900px) {

    .features-section {

        padding:
            85px 0;
    }

    .features-layout {

        grid-template-columns:
            1fr;

        gap:
            45px;
    }

    .features-heading {

        position:
            relative;

        top:
            auto;

        max-width:
            720px;
    }

    .features-heading h2 span {

        display:
            inline;
    }

    .feature-item {

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

        gap:
            20px;
    }
}


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

@media (max-width: 600px) {

    .features-section {

        padding:
            70px 0;
    }

    .features-layout {

        gap:
            32px;
    }

    .features-heading h2 {

        font-size:
            31px;

        letter-spacing:
            -1.2px;
    }

    .features-heading h2 span {

        display:
            block;
    }

    .features-heading::after {

        margin-top:
            20px;

        font-size:
            6.5px;
    }

    .feature-item {

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

        gap:
            13px;

        padding:
            19px 5px 19px 0;
    }

    .feature-number {

        width:
            38px;

        height:
            38px;

        border-radius:
            9px;

        font-size:
            8px;
    }

    .feature-item strong {

        font-size:
            11px;
    }

    .feature-item p {

        font-size:
            9px;

        line-height:
            1.65;
    }

    .feature-item::before {

        left:
            -8px;

        right:
            -8px;
    }
}


/* =====================================================
   TANGGA HIDROLIK DALTON
   STEP 9
   WHY DALTON
===================================================== */


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

.why-section {

    position:
        relative;

    padding:
        105px 0;

    background:
        #f7f9fb;

    overflow:
        hidden;
}


/* =====================================================
   BACKGROUND DECORATION
===================================================== */

.why-section::before {

    content:
        "";

    position:
        absolute;

    width:
        560px;

    height:
        560px;

    left:
        -300px;

    top:
        -250px;

    border-radius:
        50%;

    border:
        1px solid
        rgba(255,106,0,.07);

    pointer-events:
        none;
}


.why-section::after {

    content:
        "";

    position:
        absolute;

    width:
        420px;

    height:
        420px;

    right:
        -220px;

    bottom:
        -230px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(8,27,45,.045),
            transparent 68%
        );

    pointer-events:
        none;
}


/* =====================================================
   WHY CARD
===================================================== */

.why-card {

    position:
        relative;

    z-index:
        2;

    display:
        grid;

    grid-template-columns:
        minmax(250px, .72fr)
        minmax(0, 1.28fr);

    gap:
        65px;

    padding:
        55px;

    overflow:
        hidden;

    border:
        1px solid
        rgba(8,27,45,.09);

    border-radius:
        24px;

    background:
        #ffffff;

    box-shadow:
        0 3px 12px rgba(6, 17, 31, 0.041),
        0 22px 65px
        rgba(6,17,31,.075);
}


/* =====================================================
   WHY CARD TOP ACCENT
===================================================== */

.why-card::before {

    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        0;

    width:
        100%;

    height:
        4px;

    background:
        linear-gradient(
            90deg,
            var(--orange-500),
            rgba(255,106,0,.12),
            transparent
        );
}


/* =====================================================
   WHY HEADING
===================================================== */

.why-heading {

    position:
        relative;

    align-self:
        start;
}


/* =====================================================
   WHY LABEL
===================================================== */

.why-heading .section-label {

    color:
        var(--orange-500);
}


/* =====================================================
   WHY TITLE
===================================================== */

.why-heading h2 {

    margin:
        0;

    color:
        var(--navy-900);

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

    line-height:
        1.04;

    letter-spacing:
        -1.8px;

    font-weight:
        900;
}


.why-heading h2 span {

    display:
        block;

    color:
        var(--orange-500);
}


/* =====================================================
   WHY HEADING DECORATION
===================================================== */

.why-heading::after {

    content:
        "ENGINEERED FOR PROFESSIONAL WORK";

    display:
        inline-flex;

    margin-top:
        28px;

    padding:
        9px 11px;

    border:
        1px solid
        rgba(8,27,45,.08);

    border-radius:
        7px;

    background:
        #f7f9fb;

    color:
        #8a95a2;

    font-size:
        7px;

    line-height:
        1;

    font-weight:
        850;

    letter-spacing:
        1.2px;
}


/* =====================================================
   WHY GRID
===================================================== */

.why-grid {

    display:
        grid;

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

    gap:
        10px;

    align-content:
        start;
}


/* =====================================================
   WHY ITEM
===================================================== */

.why-item {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    min-height:
        82px;

    padding:
        16px 18px;

    border:
        1px solid
        rgba(8,27,45,.075);

    border-radius:
        12px;

    background:
        #fafbfc;

    transition:
        transform 300ms
        cubic-bezier(.16,1,.3,1),
        background 300ms,
        border-color 300ms,
        box-shadow 300ms;
}


.why-item:hover {

    transform:
        translateY(-4px);

    border-color:
        rgba(255,106,0,.22);

    background:
        #ffffff;

    box-shadow:
        0 2px 6px rgba(6, 17, 31, 0.041),
        0 14px 32px
        rgba(6,17,31,.075);
}


/* =====================================================
   WHY CHECK
===================================================== */

.why-item > span {

    flex:
        0 0 auto;

    width:
        34px;

    height:
        34px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid
        rgba(255,106,0,.18);

    border-radius:
        9px;

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

    color:
        var(--orange-500);

    font-size:
        11px;

    font-weight:
        900;

    transition:
        transform 300ms,
        background 300ms;
}


.why-item:hover > span {

    transform:
        scale(1.08);

    background:
        rgba(255,106,0,.13);
}


/* =====================================================
   WHY TEXT
===================================================== */

.why-item strong {

    color:
        var(--navy-900);

    font-size:
        10.5px;

    line-height:
        1.5;

    font-weight:
        800;
}


/* =====================================================
   WHY ITEM ACCENT
===================================================== */

.why-item::after {

    content:
        "";

    position:
        absolute;

    left:
        18px;

    bottom:
        0;

    width:
        0;

    height:
        2px;

    border-radius:
        999px;

    background:
        var(--orange-500);

    transition:
        width 300ms
        cubic-bezier(.16,1,.3,1);
}


.why-item:hover::after {

    width:
        35px;
}


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

@media (max-width: 900px) {

    .why-section {

        padding:
            85px 0;
    }

    .why-card {

        grid-template-columns:
            1fr;

        gap:
            40px;

        padding:
            42px;
    }

    .why-heading {

        max-width:
            650px;
    }

    .why-heading h2 span {

        display:
            inline;
    }
}


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

@media (max-width: 600px) {

    .why-section {

        padding:
            70px 0;
    }

    .why-card {

        gap:
            30px;

        padding:
            28px 20px;

        border-radius:
            18px;
    }

    .why-heading h2 {

        font-size:
            31px;

        letter-spacing:
            -1.2px;
    }

    .why-heading h2 span {

        display:
            block;
    }

    .why-heading::after {

        margin-top:
            20px;

        font-size:
            6px;
    }

    .why-grid {

        grid-template-columns:
            1fr;

        gap:
            8px;
    }

    .why-item {

        min-height:
            70px;

        padding:
            13px;
    }

    .why-item > span {

        width:
            31px;

        height:
            31px;

        border-radius:
            8px;
    }

    .why-item strong {

        font-size:
            9.5px;
    }

    .why-item::after {

        left:
            13px;
    }
}


/* =====================================================
   TANGGA HIDROLIK DALTON
   STEP 10
   FAQ / PERTANYAAN UMUM
===================================================== */


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

.faq-section {

    position:
        relative;

    padding:
        110px 0;

    background:
        #ffffff;

    overflow:
        hidden;
}


/* =====================================================
   BACKGROUND DECORATION
===================================================== */

.faq-section::before {

    content:
        "";

    position:
        absolute;

    width:
        500px;

    height:
        500px;

    right:
        -270px;

    top:
        -210px;

    border:
        1px solid
        rgba(255,106,0,.07);

    border-radius:
        50%;

    pointer-events:
        none;
}


.faq-section::after {

    content:
        "";

    position:
        absolute;

    width:
        280px;

    height:
        280px;

    left:
        -150px;

    bottom:
        -150px;

    border-radius:
        50%;

    background:
        rgba(8,27,45,.025);

    pointer-events:
        none;
}


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

.faq-section .section-heading {

    position:
        relative;

    z-index:
        2;

    max-width:
        760px;

    margin:
        0 auto;

    text-align:
        center;
}


.faq-section .section-heading
.section-label {

    justify-content:
        center;
}


.faq-section .section-heading h2 {

    margin:
        0;

    color:
        var(--navy-900);

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

    line-height:
        1.05;

    letter-spacing:
        -1.8px;

    font-weight:
        900;
}


.faq-section .section-heading h2 span {

    color:
        var(--orange-500);
}


.faq-section .section-heading p {

    max-width:
        600px;

    margin:
        17px auto 0;

    color:
        var(--text-muted);

    font-size:
        11px;

    line-height:
        1.8;
}


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

.faq-list {

    position:
        relative;

    z-index:
        2;

    max-width:
        900px;

    margin:
        48px auto 0;

    border-top:
        1px solid
        rgba(8,27,45,.09);
}


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

.faq-item {

    border-bottom:
        1px solid
        rgba(8,27,45,.09);

    transition:
        background 250ms;
}


.faq-item.active {

    background:
        #fafbfc;
}


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

.faq-question {

    position:
        relative;

    width:
        100%;

    display:
        grid;

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

    align-items:
        center;

    gap:
        20px;

    padding:
        23px 8px;

    border:
        0;

    background:
        transparent;

    color:
        var(--navy-900);

    text-align:
        left;

    cursor:
        pointer;

    font-family:
        inherit;

    transition:
        color 250ms,
        padding 300ms;
}


.faq-question:hover {

    color:
        var(--orange-500);

    padding-left:
        14px;
}


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

.faq-question > span {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        15px;

    font-size:
        12px;

    line-height:
        1.55;

    font-weight:
        800;
}


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

.faq-question small {

    flex:
        0 0 auto;

    min-width:
        24px;

    color:
        var(--orange-500);

    font-size:
        8px;

    line-height:
        1.7;

    font-weight:
        900;

    letter-spacing:
        .5px;
}


/* =====================================================
   FAQ PLUS BUTTON
===================================================== */

.faq-question > b {

    width:
        34px;

    height:
        34px;

    display:
        grid;

    place-items:
        center;

    justify-self:
        end;

    border:
        1px solid
        rgba(8,27,45,.10);

    border-radius:
        9px;

    background:
        #f7f9fb;

    color:
        var(--navy-900);

    font-size:
        18px;

    line-height:
        1;

    font-weight:
        400;

    transition:
        transform 300ms
        cubic-bezier(.16,1,.3,1),
        background 300ms,
        border-color 300ms,
        color 300ms;
}


/* =====================================================
   ACTIVE PLUS
===================================================== */

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

    transform:
        rotate(45deg);

    border-color:
        rgba(255,106,0,.20);

    background:
        var(--orange-500);

    color:
        #ffffff;
}


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

.faq-answer {

    display:
        grid;

    grid-template-rows:
        0fr;

    overflow:
        hidden;

    transition:
        grid-template-rows 350ms
        cubic-bezier(.16,1,.3,1);
}


.faq-answer > p {

    min-height:
        0;

    margin:
        0;

    padding:
        0 65px 0 47px;

    color:
        var(--text-muted);

    font-size:
        10.5px;

    line-height:
        1.8;

    opacity:
        0;

    transform:
        translateY(-6px);

    transition:
        opacity 250ms,
        transform 350ms,
        padding 350ms;
}


/* =====================================================
   ACTIVE ANSWER
===================================================== */

.faq-item.active
.faq-answer {

    grid-template-rows:
        1fr;
}


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

    padding:
        0 65px 24px 47px;

    opacity:
        1;

    transform:
        translateY(0);
}


/* =====================================================
   FAQ ITEM ACTIVE ACCENT
===================================================== */

.faq-item.active::before {

    content:
        "";

    position:
        absolute;

    left:
        0;

    width:
        2px;

    height:
        48px;

    background:
        var(--orange-500);
}


/* =====================================================
   FAQ HOVER LINE
===================================================== */

.faq-item {

    position:
        relative;
}


.faq-item::after {

    content:
        "";

    position:
        absolute;

    left:
        0;

    bottom:
        -1px;

    width:
        0;

    height:
        2px;

    background:
        var(--orange-500);

    transition:
        width 300ms
        cubic-bezier(.16,1,.3,1);
}


.faq-item:hover::after {

    width:
        55px;
}


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

@media (max-width: 700px) {

    .faq-section {

        padding:
            80px 0;
    }

    .faq-list {

        margin-top:
            36px;
    }

    .faq-question {

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

        gap:
            12px;

        padding:
            19px 5px;
    }

    .faq-question > span {

        gap:
            10px;

        font-size:
            10.5px;
    }

    .faq-question small {

        min-width:
            21px;

        font-size:
            7px;
    }

    .faq-question > b {

        width:
            30px;

        height:
            30px;

        font-size:
            16px;
    }

    .faq-answer > p {

        padding:
            0 45px 0 36px;

        font-size:
            9px;

        line-height:
            1.7;
    }

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

        padding:
            0 45px 20px 36px;
    }
}


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

@media (max-width: 480px) {

    .faq-section {

        padding:
            70px 0;
    }

    .faq-section
    .section-heading h2 {

        font-size:
            30px;

        letter-spacing:
            -1.1px;
    }

    .faq-section
    .section-heading p {

        font-size:
            9.5px;

        line-height:
            1.7;
    }

    .faq-question {

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

        padding:
            17px 2px;
    }

    .faq-question:hover {

        padding-left:
            6px;
    }

    .faq-question > span {

        gap:
            8px;

        font-size:
            9.5px;

        line-height:
            1.5;
    }

    .faq-question small {

        min-width:
            18px;

        font-size:
            6.5px;
    }

    .faq-question > b {

        width:
            27px;

        height:
            27px;

        border-radius:
            7px;

        font-size:
            14px;
    }

    .faq-answer > p {

        padding:
            0 35px 0 29px;

        font-size:
            8.5px;

        line-height:
            1.7;
    }

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

        padding:
            0 35px 18px 29px;
    }
}


/* =====================================================
   TANGGA HIDROLIK DALTON
   STEP 11
   FINAL CTA + FOOTER
===================================================== */


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

.final-cta {

    position:
        relative;

    padding:
        35px 0 100px;

    background:
        #ffffff;

    overflow:
        hidden;
}


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

.cta-card {

    position:
        relative;

    z-index:
        2;

    display:
        grid;

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

    align-items:
        center;

    gap:
        50px;

    padding:
        52px 58px;

    overflow:
        hidden;

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

    border-radius:
        24px;

    background:
        linear-gradient(
            125deg,
            #071522 0%,
            #0c2439 55%,
            #102f49 100%
        );

    box-shadow:
        0 4px 14px rgba(6, 17, 31, 0.11),
        0 30px 75px
        rgba(6,17,31,.20);
}


/* =====================================================
   CTA BACKGROUND GLOW
===================================================== */

.cta-card::before {

    content:
        "";

    position:
        absolute;

    width:
        500px;

    height:
        500px;

    right:
        -220px;

    top:
        -250px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(255,106,0,.23),
            transparent 68%
        );

    pointer-events:
        none;
}


.cta-card::after {

    content:
        "";

    position:
        absolute;

    left:
        0;

    bottom:
        0;

    width:
        42%;

    height:
        3px;

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

    pointer-events:
        none;
}


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

.cta-content {

    position:
        relative;

    z-index:
        2;

    max-width:
        720px;
}


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

.cta-content .section-label {

    color:
        var(--orange-400);
}


.cta-content .section-label::before {

    background:
        var(--orange-400);
}


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

.cta-content h2 {

    margin:
        0;

    color:
        #ffffff;

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

    line-height:
        1.07;

    letter-spacing:
        -1.6px;

    font-weight:
        900;
}


.cta-content h2 span {

    color:
        var(--orange-400);
}


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

.cta-content p {

    max-width:
        650px;

    margin:
        16px 0 0;

    color:
        rgba(255,255,255,.62);

    font-size:
        11px;

    line-height:
        1.8;
}


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

.cta-action {

    position:
        relative;

    z-index:
        3;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;
}


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

.btn-whatsapp {

    position:
        relative;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        50px;

    padding:
        0 24px;

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

    border-radius:
        10px;

    background:
        #ffffff;

    color:
        var(--navy-900);

    text-decoration:
        none;

    white-space:
        nowrap;

    font-size:
        10px;

    font-weight:
        850;

    letter-spacing:
        .1px;

    box-shadow:
        0 1px 5px rgba(0, 0, 0, 0.099),
        0 12px 30px
        rgba(0,0,0,.18);

    transition:
        transform 300ms
        cubic-bezier(.16,1,.3,1),
        box-shadow 300ms,
        background 300ms,
        color 300ms;
}


.btn-whatsapp:hover {

    transform:
        translateY(-4px);

    background:
        var(--orange-500);

    color:
        #ffffff;

    box-shadow:
        0 2px 7px rgba(0, 0, 0, 0.138),
        0 18px 38px
        rgba(0,0,0,.25);
}


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

.site-footer {

    position:
        relative;

    background:
        #06131f;

    color:
        #ffffff;

    overflow:
        hidden;
}


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

.footer-container {

    position:
        relative;

    z-index:
        2;

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

    margin:
        0 auto;
}


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

.site-footer > .footer-container {

    display:
        grid;

    grid-template-columns:
        1.5fr
        .75fr
        .9fr
        .8fr;

    gap:
        55px;

    padding:
        70px 0 60px;
}


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

.footer-brand {

    max-width:
        340px;
}


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

.footer-logo {

    display:
        inline-flex;

    align-items:
        center;

    color:
        #ffffff;

    font-size:
        22px;

    line-height:
        1;

    font-weight:
        950;

    letter-spacing:
        2px;
}


.footer-logo::before {

    content:
        "DA";

    display:
        grid;

    place-items:
        center;

    width:
        38px;

    height:
        38px;

    margin-right:
        11px;

    border:
        1px solid
        rgba(255,106,0,.30);

    border-radius:
        9px;

    background:
        rgba(255,106,0,.10);

    color:
        var(--orange-400);

    font-size:
        11px;

    letter-spacing:
        0;
}


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

.footer-brand p {

    max-width:
        310px;

    margin:
        20px 0 0;

    color:
        rgba(255,255,255,.46);

    font-size:
        10px;

    line-height:
        1.8;
}


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

.footer-links {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;
}


.footer-links h3 {

    margin:
        0 0 19px;

    color:
        #ffffff;

    font-size:
        11px;

    font-weight:
        850;

    letter-spacing:
        .2px;
}


.footer-links a {

    position:
        relative;

    width:
        fit-content;

    margin:
        0 0 11px;

    color:
        rgba(255,255,255,.47);

    text-decoration:
        none;

    font-size:
        9.5px;

    line-height:
        1.5;

    transition:
        color 250ms,
        transform 250ms;
}


.footer-links a:hover {

    color:
        var(--orange-400);

    transform:
        translateX(4px);
}


.footer-links p {

    margin:
        0 0 10px;

    color:
        rgba(255,255,255,.38);

    font-size:
        9px;

    line-height:
        1.6;
}


/* =====================================================
   FOOTER LINK ACCENT
===================================================== */

.footer-links a::before {

    content:
        "";

    position:
        absolute;

    left:
        -9px;

    top:
        50%;

    width:
        3px;

    height:
        3px;

    border-radius:
        50%;

    background:
        var(--orange-500);

    opacity:
        0;

    transform:
        translateY(-50%);

    transition:
        opacity 250ms;
}


.footer-links a:hover::before {

    opacity:
        1;
}


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

.footer-bottom {

    position:
        relative;

    z-index:
        2;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

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

    margin:
        0 auto;

    padding:
        20px 0;

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

    color:
        rgba(255,255,255,.32);

    font-size:
        8px;

    line-height:
        1.5;
}


/* =====================================================
   FOOTER BOTTOM ACCENT
===================================================== */

.footer-bottom::before {

    content:
        "";

    position:
        absolute;

    left:
        0;

    top:
        -1px;

    width:
        70px;

    height:
        1px;

    background:
        var(--orange-500);
}


/* =====================================================
   CTA + FOOTER TABLET
===================================================== */

@media (max-width: 900px) {

    .final-cta {

        padding:
            25px 0 80px;
    }

    .cta-card {

        grid-template-columns:
            1fr;

        gap:
            30px;

        padding:
            42px;
    }

    .cta-action {

        justify-content:
            flex-start;
    }

    .site-footer > .footer-container {

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

        gap:
            45px 35px;

        padding:
            55px 0 45px;
    }
}


/* =====================================================
   CTA + FOOTER MOBILE
===================================================== */

@media (max-width: 600px) {

    .final-cta {

        padding:
            15px 0 65px;
    }

    .cta-card {

        gap:
            25px;

        padding:
            32px 22px;

        border-radius:
            18px;
    }

    .cta-content h2 {

        font-size:
            29px;

        letter-spacing:
            -1px;
    }

    .cta-content p {

        font-size:
            9.5px;

        line-height:
            1.7;
    }

    .cta-action {

        justify-content:
            stretch;
    }

    .btn-whatsapp {

        width:
            100%;

        min-height:
            47px;
    }

    .site-footer > .footer-container {

        grid-template-columns:
            1fr 1fr;

        gap:
            35px 25px;

        padding:
            50px 0 40px;
    }

    .footer-brand {

        grid-column:
            1 / -1;

        max-width:
            none;
    }

    .footer-logo {

        font-size:
            19px;
    }

    .footer-logo::before {

        width:
            34px;

        height:
            34px;
    }

    .footer-brand p {

        max-width:
            330px;

        font-size:
            9px;
    }

    .footer-links h3 {

        font-size:
            10px;

        margin-bottom:
            15px;
    }

    .footer-links a {

        font-size:
            8.5px;

        margin-bottom:
            9px;
    }

    .footer-links p {

        font-size:
            8.5px;
    }

    .footer-bottom {

        flex-direction:
            column;

        align-items:
            flex-start;

        gap:
            6px;

        padding:
            17px 0;

        font-size:
            7.5px;
    }
}


/* =====================================================
   EXTRA SMALL
===================================================== */

@media (max-width: 380px) {

    .site-footer > .footer-container {

        grid-template-columns:
            1fr;
    }

    .footer-brand {

        grid-column:
            auto;
    }

    .footer-bottom {

        font-size:
            7px;
    }
}


/* =====================================================
   TANGGA HIDROLIK DALTON
   STEP 12
   FINAL POLISH / MICRO INTERACTION
===================================================== */


/* =====================================================
   GLOBAL SMOOTH SCROLL
===================================================== */

html {
    scroll-behavior:
        smooth;
}


/* =====================================================
   SELECTION
===================================================== */

::selection {

    background:
        var(--orange-500);

    color:
        #ffffff;
}


/* =====================================================
   IMAGE RENDERING
===================================================== */

img {

    image-rendering:
        auto;

    -webkit-user-drag:
        none;
}


/* =====================================================
   BUTTON MICRO INTERACTION
===================================================== */

.btn {

    position:
        relative;

    overflow:
        hidden;

    isolation:
        isolate;

    transition:
        transform 280ms
        cubic-bezier(.16,1,.3,1),
        box-shadow 280ms
        cubic-bezier(.16,1,.3,1),
        background 280ms,
        border-color 280ms,
        color 280ms;
}


.btn::before {

    content:
        "";

    position:
        absolute;

    width:
        0;

    height:
        0;

    left:
        50%;

    top:
        50%;

    border-radius:
        50%;

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

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

    transition:
        width 450ms
        cubic-bezier(.16,1,.3,1),
        height 450ms
        cubic-bezier(.16,1,.3,1);

    pointer-events:
        none;

    z-index:
        -1;
}


.btn:hover::before {

    width:
        280px;

    height:
        280px;
}


.btn:active {

    transform:
        translateY(1px)
        scale(.985);
}


/* =====================================================
   LINK FOCUS
===================================================== */

a:focus-visible,
button:focus-visible {

    outline:
        2px solid
        var(--orange-500);

    outline-offset:
        4px;
}


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

.site-header {

    transition:
        background 300ms,
        box-shadow 300ms,
        border-color 300ms;
}


.site-header:hover {

    box-shadow:
        0 1px 5px rgba(6, 17, 31, 0.03),
        0 8px 30px
        rgba(6,17,31,.055);
}


.main-navigation a {

    position:
        relative;
}


.main-navigation a::after {

    content:
        "";

    position:
        absolute;

    left:
        50%;

    bottom:
        -7px;

    width:
        0;

    height:
        2px;

    border-radius:
        999px;

    background:
        var(--orange-500);

    transform:
        translateX(-50%);

    transition:
        width 250ms
        cubic-bezier(.16,1,.3,1);
}


.main-navigation a:hover::after {

    width:
        70%;
}


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

.section-heading {

    position:
        relative;
}


.section-heading h2 {

    text-wrap:
        balance;
}


.section-heading p {

    text-wrap:
        pretty;
}


/* =====================================================
   HERO TEXT POLISH
===================================================== */

.hero-content h1 {

    text-wrap:
        balance;
}


.hero-description {

    text-wrap:
        pretty;
}


/* =====================================================
   CARD CONSISTENCY
===================================================== */

.advantage-card,
.application-item,
.model-card,
.model-detail,
.why-item,
.specification-table-wrap,
.faq-item {

    will-change:
        transform;
}


/* =====================================================
   IMAGE HOVER
===================================================== */

.model-image img,
.model-detail-image img,
.safety-visual img,
.hero-image-card img {

    will-change:
        transform;
}


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

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

    html {
        scroll-behavior:
            auto;
    }

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

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;

        scroll-behavior:
            auto !important;
    }
}


/* =====================================================
   LARGE DESKTOP
===================================================== */

@media (min-width: 1400px) {

    .section-container,
    .hero-container {

        max-width:
            1240px;
    }

    .hero-content h1 {

        font-size:
            58px;
    }

    .advantages-grid {

        gap:
            22px;
    }

    .applications-grid {

        gap:
            17px;
    }
}


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

@media (max-width: 900px) {

    .hero-container {

        gap:
            45px;
    }

    .section-heading h2 {

        font-size:
            clamp(
                30px,
                6vw,
                42px
            );
    }
}


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

@media (max-width: 600px) {

    body {

        overflow-x:
            hidden;
    }


    .section-container,
    .hero-container {

        width:
            min(
                100% - 30px,
                1180px
            );
    }


    .section-heading {

        margin-bottom:
            0;
    }


    .section-heading h2 {

        text-wrap:
            balance;
    }


    .hero-content h1 {

        text-wrap:
            balance;
    }


    /* prevent oversized shadows */

    .advantage-card,
    .model-card,
    .why-card,
    .cta-card,
    .specification-table-wrap {

        box-shadow:
            0 1px 6px rgba(6, 17, 31, 0.039),
            0 12px 35px
            rgba(6,17,31,.07);
    }


    /* prevent hover movement on touch */

    .advantage-card:hover,
    .application-item:hover,
    .why-item:hover {

        transform:
            none;
    }


    /* cleaner buttons */

    .btn {

        min-height:
            45px;
    }
}


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

@media (max-width: 380px) {

    .section-container,
    .hero-container {

        width:
            calc(100% - 24px);
    }

    .section-heading h2 {

        font-size:
            27px;
    }

    .hero-content h1 {

        font-size:
            29px;
    }
}