/* Minification failed. Returning unminified contents.
(9,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(10,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(11,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(12,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(13,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(17,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(18,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(19,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(20,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(21,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(22,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(23,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(24,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(44,28): run-time error CSS1039: Token not allowed after unary operator: '-body-bg'
(47,17): run-time error CSS1039: Token not allowed after unary operator: '-text-dark'
(106,50): run-time error CSS1039: Token not allowed after unary operator: '-gold'
(106,63): run-time error CSS1039: Token not allowed after unary operator: '-silver'
(110,21): run-time error CSS1039: Token not allowed after unary operator: '-dark'
(169,30): run-time error CSS1039: Token not allowed after unary operator: '-silver'
(182,25): run-time error CSS1039: Token not allowed after unary operator: '-silver'
(198,34): run-time error CSS1039: Token not allowed after unary operator: '-red'
(212,17): run-time error CSS1039: Token not allowed after unary operator: '-text-light'
(228,22): run-time error CSS1039: Token not allowed after unary operator: '-red'
(243,26): run-time error CSS1039: Token not allowed after unary operator: '-red-hover'
(342,25): run-time error CSS1039: Token not allowed after unary operator: '-red'
(343,41): run-time error CSS1039: Token not allowed after unary operator: '-red'
(374,22): run-time error CSS1039: Token not allowed after unary operator: '-dark'
(375,17): run-time error CSS1039: Token not allowed after unary operator: '-text-muted-light'
(389,17): run-time error CSS1039: Token not allowed after unary operator: '-white'
(410,21): run-time error CSS1039: Token not allowed after unary operator: '-white'
(416,17): run-time error CSS1039: Token not allowed after unary operator: '-text-muted-light'
(422,21): run-time error CSS1039: Token not allowed after unary operator: '-white'
(442,50): run-time error CSS1039: Token not allowed after unary operator: '-gold'
(442,63): run-time error CSS1039: Token not allowed after unary operator: '-silver'
(446,21): run-time error CSS1039: Token not allowed after unary operator: '-dark'
(575,17): run-time error CSS1039: Token not allowed after unary operator: '-text-light'
(602,17): run-time error CSS1039: Token not allowed after unary operator: '-dark-mid'
(619,17): run-time error CSS1039: Token not allowed after unary operator: '-text-light'
(623,21): run-time error CSS1039: Token not allowed after unary operator: '-dark-mid'
(630,17): run-time error CSS1039: Token not allowed after unary operator: '-text-muted-light'
(658,22): run-time error CSS1039: Token not allowed after unary operator: '-dark-mid'
(659,17): run-time error CSS1039: Token not allowed after unary operator: '-white'
(660,30): run-time error CSS1039: Token not allowed after unary operator: '-dark-mid'
(664,26): run-time error CSS1039: Token not allowed after unary operator: '-dark'
(665,28): run-time error CSS1039: Token not allowed after unary operator: '-dark'
(666,21): run-time error CSS1039: Token not allowed after unary operator: '-white'
(671,17): run-time error CSS1039: Token not allowed after unary operator: '-text-dark'
(672,30): run-time error CSS1039: Token not allowed after unary operator: '-silver'
(677,28): run-time error CSS1039: Token not allowed after unary operator: '-text-dark'
(678,21): run-time error CSS1039: Token not allowed after unary operator: '-text-dark'
(718,30): run-time error CSS1039: Token not allowed after unary operator: '-dark-mid'
(737,22): run-time error CSS1039: Token not allowed after unary operator: '-white'
(751,34): run-time error CSS1039: Token not allowed after unary operator: '-silver-light'
(788,17): run-time error CSS1039: Token not allowed after unary operator: '-dark-mid'
(801,17): run-time error CSS1039: Token not allowed after unary operator: '-text-dark'
(807,17): run-time error CSS1039: Token not allowed after unary operator: '-text-muted'
(821,17): run-time error CSS1039: Token not allowed after unary operator: '-dark-mid'
(852,21): run-time error CSS1039: Token not allowed after unary operator: '-dark-mid'
(877,25): run-time error CSS1039: Token not allowed after unary operator: '-dark-mid'
(883,22): run-time error CSS1039: Token not allowed after unary operator: '-silver-faint'
(908,22): run-time error CSS1039: Token not allowed after unary operator: '-white'
(926,21): run-time error CSS1039: Token not allowed after unary operator: '-dark-mid'
(950,21): run-time error CSS1039: Token not allowed after unary operator: '-dark-mid'
(974,39): run-time error CSS1039: Token not allowed after unary operator: '-silver-light'
(1010,39): run-time error CSS1039: Token not allowed after unary operator: '-silver-light'
(1101,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1102,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1103,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1104,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1105,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1106,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1107,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1108,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1109,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1110,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1111,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1158,17): run-time error CSS1039: Token not allowed after unary operator: '-red'
(1171,26): run-time error CSS1039: Token not allowed after unary operator: '-red'
(1203,22): run-time error CSS1039: Token not allowed after unary operator: '-dark-2'
(1204,17): run-time error CSS1039: Token not allowed after unary operator: '-white'
(1208,22): run-time error CSS1039: Token not allowed after unary operator: '-dark-3'
(1209,17): run-time error CSS1039: Token not allowed after unary operator: '-white'
(1213,22): run-time error CSS1039: Token not allowed after unary operator: '-light-bg'
(1214,17): run-time error CSS1039: Token not allowed after unary operator: '-text-dark'
(1271,16): run-time error CSS1030: Expected identifier, found '.'
(1271,32): run-time error CSS1031: Expected selector, found ')'
(1271,32): run-time error CSS1025: Expected comma or open brace, found ')'
(1296,17): run-time error CSS1039: Token not allowed after unary operator: '-text-dark'
(1449,17): run-time error CSS1039: Token not allowed after unary operator: '-dark'
(1477,22): run-time error CSS1039: Token not allowed after unary operator: '-dark'
(1479,24): run-time error CSS1039: Token not allowed after unary operator: '-dark'
(1483,26): run-time error CSS1039: Token not allowed after unary operator: '-red-deep'
(1484,28): run-time error CSS1039: Token not allowed after unary operator: '-red-deep'
(1491,17): run-time error CSS1039: Token not allowed after unary operator: '-text-dark'
(1773,22): run-time error CSS1039: Token not allowed after unary operator: '-red'
 */
/* =====================================================
    Home.css  —  เป็นหนึ่ง โฮลดิ้ง
    Theme: Gold / White / Silver  +  Red Highlight
   ===================================================== */

/* ===== Design Tokens (ปรับเฉพาะเฉดสี) ===== */
:root {
    /* Text Colors */
    --text-dark: #1D1D1F;
    --text-muted: #6E6E73;
    --text-light: #FFFFFF;
    --text-muted-light: rgba(255,255,255,0.70);
    --navbar-height: 72px;

    --dark: #1A1A1A;
    --dark-mid: #C0001A;
    --white: #FFFFFF;
    --gold: #D4AF37;
    --silver: #A1A1A6;
    --silver-light: #E5E5EA;
    --silver-faint: #F5F5F7;
    --red: #E3001B;
    --red-hover: #B8001A;
    --body-bg: #FAFAFA;
}   


/* ===== Reset / Base ===== */
* {
    box-sizing: border-box;
}

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'IBM Plex Sans Thai', sans-serif;
    background-color: var(--body-bg);
    margin: 0;
    padding: 0;
    color: var(--text-dark);
    -webkit-text-size-adjust: 100%;
}

img, svg {
    max-width: 100%;
    height: auto;
    display: block;
}

/* =====================================================
    Top Navigation
   ===================================================== */
.site-header {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 0 0 16px 16px;
    color: #1D1D1F;
    position: sticky;
    top: 0;
    z-index: 1030;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
    transition: background .3s ease, box-shadow .3s ease, border-color .3s ease;
}

    .site-header.scrolled {
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(22px);
        -webkit-backdrop-filter: blur(22px);
        border-color: rgba(0, 0, 0, 0.12);
        box-shadow: 0 4px 28px rgba(0, 0, 0, 0.12);
    }

.site-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px clamp(16px, 4vw, 40px);
    gap: clamp(12px, 2vw, 24px);
    max-width: 1400px;
    margin: 0 auto;
}

/* Logo */
.brand-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #1D1D1F;
    flex-shrink: 0;
}

    .brand-logo .logo-mark {
        width: 40px;
        height: 40px;
        border-radius: 8px;
        background: linear-gradient(135deg, var(--gold), var(--silver));
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--dark);
        font-weight: 800;
        font-size: 20px;
        flex-shrink: 0;
    }

    .brand-logo .logo-text {
        display: flex;
        flex-direction: column;
        line-height: 1.1;
    }

        .brand-logo .logo-text strong {
            font-size: clamp(15px, 2vw, 18px);
            font-weight: 700;
            letter-spacing: 0.2px;
            white-space: nowrap;
        }

        .brand-logo .logo-text small {
            font-size: 10px;
            color: #6E6E73;
            margin-top: 3px;
            white-space: nowrap;
        }

/* Menu */
.nav-menu {
    list-style: none;
    display: flex;
    gap: clamp(14px, 1.8vw, 28px);
    margin: 0;
    padding: 0;
    align-items: center;
}

    .nav-menu a {
        color: #1D1D1F;
        text-decoration: none;
        font-size: 14.5px;
        font-weight: 400;
        position: relative;
        padding: 6px 0;
        white-space: nowrap;
        transition: color .15s ease;
    }

        .nav-menu a:hover {
            color: #C0001A;
        }

        /* Underline draw on hover */
        .nav-menu a::before {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: -6px;
            height: 2px;
            background: var(--silver);
            border-radius: 2px;
            transform: scaleX(0);
            transform-origin: right center;
            transition: transform .3s cubic-bezier(.2,.7,.3,1);
        }

        .nav-menu a:hover::before {
            transform: scaleX(1);
            transform-origin: left center;
        }

        .nav-menu a.active {
            color: var(--silver);
            font-weight: 600;
        }

            .nav-menu a.active::before {
                display: none;
            }

            /* Red underline for active item */
            .nav-menu a.active::after {
                content: "";
                position: absolute;
                left: 0;
                right: 0;
                bottom: -6px;
                height: 2px;
                background: var(--red);
                border-radius: 2px;
            }

/* Right side */
.nav-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.nav-lang {
    background: transparent;
    color: var(--text-light);
    /* เปลี่ยนจากทองส้มเป็นทองสว่าง */
    border: 1px solid rgba(255,215,0,0.4);
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 13px;
    cursor: pointer;
    -webkit-appearance: none;
}

    .nav-lang option {
        color: #000;
    }

/* CTA button */
.btn-contact {
    background: var(--red);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 9px 20px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    transition: background .15s ease;
}

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

    /* Shimmer effect */
    .btn-contact::after {
        content: "";
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
        transition: left .6s ease;
    }

    .btn-contact:hover::after {
        left: 100%;
    }

/* Mobile toggle */
.nav-toggle {
    display: none;
    background: transparent;
    border: 1px solid rgba(0,0,0,0.18);
    border-radius: 6px;
    color: #1D1D1F;
    font-size: 22px;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* Tablet */
@media (max-width: 1100px) {
    .nav-menu {
        gap: 16px;
    }

        .nav-menu a {
            font-size: 13.5px;
        }

    .brand-logo .logo-text small {
        display: none;
    }
}

/* Mobile */
@media (max-width: 900px) {
    .nav-toggle {
        display: inline-flex;
    }

    .nav-menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        flex-direction: column;
        padding: 16px 20px;
        gap: 0;
        border-top: 1px solid rgba(0,0,0,0.08);
        border-radius: 0 0 16px 16px;
        box-shadow: 0 12px 32px rgba(0,0,0,0.12);
        display: none;
        align-items: stretch;
    }

        .nav-menu.mobile-open {
            display: flex;
        }

        .nav-menu li {
            width: 100%;
        }

        .nav-menu a {
            display: block;
            padding: 14px 4px;
            border-bottom: 1px solid rgba(0,0,0,0.07);
            font-size: 15px;
            color: #1D1D1F !important; /* override dynamiccolor inline style */
        }

        .nav-menu li:last-child a {
            border-bottom: none;
        }

        .nav-menu a.active::after {
            display: none;
        }

        .nav-menu a.active {
            color: var(--red) !important;
            border-left: 3px solid var(--red);
            padding-left: 12px;
        }

        .nav-menu a::before {
            display: none;
        }
}

@media (max-width: 480px) {
    .btn-contact {
        padding: 8px 14px;
        font-size: 13px;
    }

    .nav-lang {
        padding: 4px 10px;
        font-size: 12px;
    }

    .brand-logo .logo-mark {
        width: 36px;
        height: 36px;
        font-size: 18px;
    }
}

/* =====================================================
    Footer
   ===================================================== */
.site-footer {
    background: var(--dark);
    color: var(--text-muted-light);
    padding: clamp(40px, 6vw, 60px) clamp(20px, 4vw, 40px) 20px;
    margin-top: 60px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.2fr;
    gap: clamp(24px, 3vw, 40px);
    max-width: 1280px;
    margin: 0 auto 30px;
}

.footer-col h5 {
    color: var(--white);
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 14px;
}

.footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-col li {
    margin-bottom: 10px;
    font-size: 14px;
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

    .footer-col li i {
        color: var(--white);
        margin-top: 3px;
        flex-shrink: 0;
    }

.footer-col a {
    color: var(--text-muted-light);
    text-decoration: none;
    font-size: 14px;
}

    .footer-col a:hover {
        color: var(--white);
    }

.footer-col p {
    font-size: 14px;
    line-height: 1.7;
    margin: 0 0 14px;
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

    .footer-brand .mark {
        width: 36px;
        height: 36px;
        border-radius: 8px;
        background: linear-gradient(135deg, var(--gold), var(--silver));
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--dark);
        font-weight: 800;
    }

    .footer-brand strong {
        color: #fff;
        font-size: 16px;
    }

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.15);
    padding-top: 18px;
    text-align: center;
    font-size: 13px;
    color: rgba(255,255,255,0.45);
    max-width: 1280px;
    margin: 0 auto;
}

@media (max-width: 900px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }

    .footer-col:first-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 520px) {
    .footer-grid {
        grid-template-columns: 1fr;
    }

    .footer-col:first-child {
        grid-column: auto;
    }
}

/* =====================================================
    Animations & Keyframes
   ===================================================== */
@keyframes rfid-pulse {
    0% {
        transform: scale(.6);
        opacity: .7;
    }

    100% {
        transform: scale(2.4);
        opacity: 0;
    }
}

@keyframes scan-line {
    0% {
        transform: translateY(-100%);
    }

    100% {
        transform: translateY(100%);
    }
}

@keyframes float-y {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

@keyframes glow-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(200,200,208,0.5);
    }

    50% {
        box-shadow: 0 0 0 12px rgba(200,200,208,0);
    }
}


/* Scroll reveal */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .8s cubic-bezier(.2,.7,.3,1), transform .8s cubic-bezier(.2,.7,.3,1);
    will-change: opacity, transform;
}

    .reveal.in-view {
        opacity: 1;
        transform: translateY(0);
    }

.reveal-delay-1 {
    transition-delay: .1s;
}

.reveal-delay-2 {
    transition-delay: .25s;
}

.reveal-delay-3 {
    transition-delay: .4s;
}

.reveal-delay-4 {
    transition-delay: .55s;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}

/* =====================================================
    Hero Section
   ===================================================== */
.hero {
    position: relative;
    min-height: clamp(440px, 65vh, 620px);
    background: url('/images/background.jpg') center/cover no-repeat;
    color: var(--text-light);
    display: flex;
    align-items: center;
    padding: clamp(50px, 8vw, 90px) clamp(20px, 5vw, 60px);
    overflow: hidden;
}

    .hero::after {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(0,0,0,0.45);
        pointer-events: none;
        z-index: 1;
    }

.hero-inner {
    max-width: 1280px;
    margin: 0 auto;
    width: 100%;
    position: relative;
    z-index: 2;
}

.hero .eyebrow {
    display: inline-block;
    background: rgba(200,200,208,0.15);
    color: var(--dark-mid);
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 18px;
    border: 1px solid rgba(200,200,208,0.35);
    animation: float-y 4s ease-in-out infinite;
}

.hero h1 {
    font-size: clamp(28px, 5.2vw, 54px);
    font-weight: 700;
    line-height: 1.18;
    margin: 0 0 20px;
    max-width: 760px;
    word-wrap: break-word;
    color: var(--text-light);
}

    .hero h1 .accent {
        color: var(--dark-mid);
    }

.hero p.lead {
    font-size: clamp(14px, 1.5vw, 17px);
    line-height: 1.7;
    max-width: 580px;
    color: var(--text-muted-light);
    margin-bottom: clamp(24px, 4vw, 36px);
}

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

/* Hero buttons */
.btn-hero-primary,
.btn-hero-outline {
    padding: clamp(10px, 1.3vw, 13px) clamp(18px, 2.5vw, 26px);
    border-radius: 8px;
    font-size: clamp(13px, 1.3vw, 15px);
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    position: relative;
    overflow: hidden;
    transition: all .15s ease;
    white-space: nowrap;
}

.btn-hero-primary {
    background: var(--dark-mid);
    color: var(--white);
    border: 1.5px solid var(--dark-mid);
}

    .btn-hero-primary:hover {
        background: var(--dark);
        border-color: var(--dark);
        color: var(--white);
    }

.btn-hero-outline {
    background: transparent;
    color: var(--text-dark);
    border: 1.5px solid var(--silver);
}

    .btn-hero-outline:hover {
        background: rgba(161,161,166,0.1);
        border-color: var(--text-dark);
        color: var(--text-dark);
    }

    /* Shimmer on hero buttons */
    .btn-hero-primary::after,
    .btn-hero-outline::after {
        content: "";
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
        transition: left .7s ease;
    }

    .btn-hero-primary:hover::after,
    .btn-hero-outline:hover::after {
        left: 100%;
    }

/* Hero dots */
.hero-dots {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
}

    .hero-dots span {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: rgba(161,161,166,0.35);
        transition: width .2s ease;
    }

        .hero-dots span.active {
            background: var(--dark-mid);
            width: 26px;
            border-radius: 5px;
        }


/* =====================================================
    Feature Cards (Brand Pillars)
   ===================================================== */
.features-band {
    padding: 0 clamp(16px, 4vw, 40px);
    margin-top: clamp(-40px, -5vw, -60px);
    position: relative;
    z-index: 10;
}

.features-grid {
    max-width: 1280px;
    margin: 0 auto;
    background: var(--white);
    border-radius: 14px;
    box-shadow: 0 10px 35px rgba(0,0,0,0.08);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    overflow: hidden;
}

.feature-card {
    padding: clamp(20px, 2.5vw, 28px) clamp(18px, 2vw, 24px);
    display: flex;
    align-items: center;
    gap: 14px;
    border-right: 1px solid var(--silver-light);
    position: relative;
    transition: transform .35s cubic-bezier(.2,.7,.3,1), background .25s ease;
    overflow: hidden;
}

    .feature-card:last-child {
        border-right: none;
    }

    .feature-card::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, rgba(200,200,208,0.07), transparent);
        opacity: 0;
        transition: opacity .3s ease;
    }

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

        .feature-card:hover::before {
            opacity: 1;
        }

        .feature-card:hover .feature-icon {
            transform: scale(1.1) rotate(-6deg);
            background: rgba(200,200,208,0.2);
        }

.feature-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background: rgba(200,200,208,0.12);
    color: var(--dark-mid);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
    transition: transform .35s cubic-bezier(.2,.7,.3,1), background .25s ease;
}

.feature-text h6 {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-dark);
}

.feature-text p {
    margin: 0;
    font-size: 12.5px;
    color: var(--text-muted);
    line-height: 1.5;
}

/* =====================================================
    About Section
   ===================================================== */
.about-section {
    padding: clamp(50px, 8vw, 90px) clamp(20px, 4vw, 40px) clamp(30px, 5vw, 50px);
    max-width: 1280px;
    margin: 0 auto;
}

.about-tag {
    color: var(--dark-mid);
    font-weight: 600;
    font-size: 60px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    justify-content: center
}

    .about-tag::before {
        display: inline-block;
    }

.about-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr 1.2fr;
    gap: clamp(24px, 3.5vw, 40px);
    align-items: center;
}

.about-title {
    font-size: clamp(22px, 3.2vw, 34px);
    font-weight: 700;
    line-height: 1.3;
    color: #111;
    margin: 0 0 18px;
    word-wrap: break-word;
}

    .about-title .accent {
        color: var(--dark-mid);
    }

.about-desc {
    color: #555;
    font-size: clamp(13.5px, 1.4vw, 15px);
    line-height: 1.75;
    margin: 0 0 16px;
}

.about-points {
    list-style: none;
    padding: 0;
    margin: 16px 0 0;
}

    .about-points li {
        display: flex;
        gap: 10px;
        font-size: 14px;
        color: #333;
        margin-bottom: 8px;
    }

        .about-points li i {
            color: var(--dark-mid);
            font-size: 18px;
            flex-shrink: 0;
        }

.about-illustration {
    background: var(--silver-faint);
    border-radius: 16px;
    padding: clamp(20px, 3vw, 30px);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    border: 1px solid rgba(200,200,208,0.15);
    animation: float-y 5s ease-in-out infinite;
}

    .about-illustration svg {
        max-width: 260px;
        width: 100%;
        height: auto;
    }

/* Stats */
.stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(12px, 1.5vw, 16px);
}

.stat-card {
    background: var(--white);
    border-radius: 14px;
    padding: clamp(16px, 2vw, 22px);
    border: 1px solid rgba(200,200,208,0.15);
    transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease;
    cursor: default;
}

    .stat-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 28px rgba(200,200,208,0.18);
    }

    .stat-card .icon {
        width: 42px;
        height: 42px;
        border-radius: 10px;
        background: rgba(200,200,208,0.12);
        color: var(--dark-mid);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        margin-bottom: 12px;
        animation: glow-pulse 2.8s ease-in-out infinite;
    }

    .stat-card:nth-child(2) .icon {
        animation-delay: .4s;
    }

    .stat-card:nth-child(3) .icon {
        animation-delay: .8s;
    }

    .stat-card:nth-child(4) .icon {
        animation-delay: 1.2s;
    }

    .stat-card .num {
        font-size: clamp(22px, 2.8vw, 28px);
        font-weight: 700;
        color: var(--dark-mid);
        line-height: 1;
    }

    .stat-card .label {
        font-size: 13px;
        color: #6E6E73;
        margin-top: 6px;
    }

/* =====================================================
    Responsive
   ===================================================== */
@media (max-width: 1100px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .feature-card:nth-child(2) {
        border-right: none;
    }

    .feature-card:nth-child(1),
    .feature-card:nth-child(2) {
        border-bottom: 1px solid var(--silver-light);
    }

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

    .about-illustration {
        grid-column: 1 / -1;
        order: -1;
    }
}

@media (max-width: 768px) {
    .about-grid {
        grid-template-columns: 1fr;
    }

    .about-illustration {
        grid-column: auto;
        order: 0;
        min-height: 180px;
    }

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

@media (max-width: 560px) {
    .features-grid {
        /*grid-template-columns: 1fr;*/
    }

    .feature-card {
        border-right: none !important;
        border-bottom: 1px solid var(--silver-light);
    }

        .feature-card:last-child {
            border-bottom: none;
        }

    .hero-buttons {
        width: 100%;
    }

    .btn-hero-primary,
    .btn-hero-outline {
        flex: 1 1 auto;
        justify-content: center;
    }
}

@media (max-width: 380px) {
    .stats-grid {
      /*  grid-template-columns: 1fr;*/
    }
    .feature-card {

        display:block;

    }
}

/* =====================================================
   Product Carousel — Bootstrap 5 + prod-card
   ===================================================== */
.prod-carousel {
    width: 100%;
    overflow: hidden;
}

.prod-carousel .carousel-item {
    width: 100%;
}

.prod-carousel .prod-card {
    width: 100%;
    min-height: 88vh;
    border-radius: 0;
}

.prod-carousel .carousel-control-prev,
.prod-carousel .carousel-control-next {
    width: 60px;
    z-index: 10;
    opacity: 0.7;
}

.prod-carousel .carousel-control-prev:hover,
.prod-carousel .carousel-control-next:hover {
    opacity: 1;
}

.prod-carousel .carousel-indicators {
    bottom: 80px;
    z-index: 10;
}

.prod-carousel .carousel-indicators [data-bs-target] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgba(255,255,255,0.5);
    border: none;
}

.prod-carousel .carousel-indicators .active {
    background-color: #fff;
}

@media (max-width: 768px) {
    .prod-carousel .prod-card {
        min-height: 70vh;
    }
    .prod-carousel .carousel-indicators {
        bottom: 60px;
    }
}

/* =====================================================
   Products Section CSS  —  เป็นหนึ่ง โฮลดิ้ง
   ก๊อปต่อท้าย Home.css ได้เลย
   ===================================================== */
/* ── Brand tokens (mirror Home.css) ─────────────────────── */
:root {
    --red: #C0001A;
    --red-deep: #8F0013;
    --dark: #1A1A1A;
    --dark-2: #0d0d0d;
    --dark-3: #111318;
    --gold: #D4AF37;
    --silver: #C8C8D0;
    --white: #FFFFFF;
    --light-bg: #F5F5F7;
    --text-dark: #1D1D1F;
    --text-muted: #6E6E73;
}

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

body {
    font-family: 'IBM Plex Sans Thai', sans-serif;
    background: #FAFAFA;
    overflow-x: hidden;
}

/* ── Context bar (demo only) ─────────────────────────────── */
.ctx-bar {
    text-align: center;
    padding: 22px;
    font-size: 12px;
    color: #aaa;
    letter-spacing: .06em;
    background: #FAFAFA;
    border-bottom: 1px solid #eee;
}

.ctx-bar--dark {
    background: #1A1A1A;
    border-top: 1px solid #333;
    border-bottom: none;
}

/* ══════════════════════════════════════════════════════════
       PRODUCTS SECTION  — Tesla-style
    ══════════════════════════════════════════════════════════ */
.products-section {
    width: 100%;
}

/* Section label row */
.prod-section-label {
    padding: clamp(40px,5vw,64px) clamp(20px,4vw,60px) 0;
    max-width: 1280px;
    margin: 0 auto;
}

.prod-section-tag {
    color: var(--red);
    font-weight: 600;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 0px;
}

    .prod-section-tag::before {
        content: "";
        width: 26px;
        height: 2px;
        background: var(--red);
        display: inline-block;
    }

/* Product grid */
.prod-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
}

.prod-card--full {
    grid-column: 1 / -1;
}

/* Individual card */
.prod-card {
    position: relative;
    min-height: 88vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    cursor: default;
}

.prod-card--full {
    min-height: 70vh;
}

/* ── Themes ───────────────────────────────────────────────── */
.prod-card--dark {
    background: var(--dark-2);
    color: var(--white);
}

.prod-card--mid {
    background: var(--dark-3);
    color: var(--white);
}

.prod-card--light {
    background: var(--light-bg);
    color: var(--text-dark);
}

/* Thin divider between columns */
.prod-card--dark {
    border-right: 1px solid rgba(255,255,255,0.06);
}

    /* ── Ambient glow per card ─────────────────────────────── */
    .prod-card--dark::before {
        content: "";
        position: absolute;
        width: 600px;
        height: 600px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(192,0,26,0.18) 0%, transparent 65%);
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        pointer-events: none;
        z-index: 0;
        transition: opacity .6s ease;
    }

.prod-card--mid::before {
    content: "";
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(212,175,55,0.13) 0%, transparent 65%);
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    pointer-events: none;
    z-index: 0;
}

.prod-card--light::before {
    content: "";
    position: absolute;
    width: 800px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(192,0,26,0.06) 0%, transparent 65%);
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 0;
}

/* Card hover lift */
.prod-card {
    transition: filter .4s ease;
}

.prod-grid:has(.prod-card:hover) .prod-card:not(:hover) {
    filter: brightness(0.72);
}

/* ── Top area: name + tagline ─────────────────────────── */
.prod-top {
    position: relative;
    z-index: 2;
    padding: clamp(36px, 5vw, 56px) clamp(28px,4vw,52px) 0;
    text-align: left;
}

.prod-card--full .prod-top {
    text-align: left;
}

.prod-name {
    font-size: clamp(26px, 3.2vw, 48px);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin-bottom: 10px;
}

.prod-card--light .prod-name {
    color: var(--text-dark);
}

.prod-tagline {
    font-size: clamp(12px, 1.1vw, 15px);
    font-weight: 400;
    opacity: .68;
    letter-spacing: .01em;
}

.prod-specs {
    display: flex;
    gap: 16px;
    margin-top: 14px;
    flex-wrap: wrap;
}

.prod-spec-chip {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.2);
    opacity: .8;
}

.prod-card--light .prod-spec-chip {
    border-color: rgba(0,0,0,0.15);
}

/* ── Center: product placeholder image ───────────────── */
.prod-visual-wrap {
    position: relative;
    z-index: 2;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(20px,3vw,40px);
}

.prod-placeholder {
    width: 100%;
    max-width: 480px;
    aspect-ratio: 4/3;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
}

.prod-card--full .prod-placeholder {
    max-width: 700px;
    aspect-ratio: 16/9;
}

/* Striped placeholder */
.prod-placeholder-inner {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .prod-placeholder-inner svg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }

.prod-placeholder-label {
    position: relative;
    z-index: 1;
    font-family: 'Courier New', monospace;
    font-size: clamp(9px, 1vw, 12px);
    letter-spacing: .04em;
    text-align: center;
    line-height: 1.8;
    opacity: 0.5;
}

.prod-card--dark .prod-placeholder-label,
.prod-card--mid .prod-placeholder-label {
    color: #fff;
}

.prod-card--light .prod-placeholder-label {
    color: #333;
}

/* Subtle border on placeholder */
.prod-card--dark .prod-placeholder-inner,
.prod-card--mid .prod-placeholder-inner {
    border: 1px dashed rgba(255,255,255,0.15);
    border-radius: 4px;
}

.prod-card--light .prod-placeholder-inner {
    border: 1px dashed rgba(0,0,0,0.12);
    border-radius: 4px;
}

/* ── Bottom area: buttons ─────────────────────────────── */
.prod-bottom {
    position: relative;
    z-index: 2;
    padding: 0 clamp(28px,4vw,52px) clamp(36px,5vw,56px);
}

.prod-divider {
    width: 100%;
    height: 1px;
    background: rgba(255,255,255,0.1);
    margin-bottom: 28px;
}

.prod-card--light .prod-divider {
    background: rgba(0,0,0,0.08);
}

.prod-buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}

/* Shared button base */
.prod-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    border-radius: 6px;
    font-family: 'IBM Plex Sans Thai', sans-serif;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: all .18s ease;
    border: 1.5px solid transparent;
    letter-spacing: .01em;
}

/* Dark card buttons */
.prod-card--dark .prod-btn-primary,
.prod-card--mid .prod-btn-primary {
    background: rgba(255,255,255,0.96);
    color: var(--dark);
    border-color: transparent;
}

    .prod-card--dark .prod-btn-primary:hover,
    .prod-card--mid .prod-btn-primary:hover {
        background: #fff;
        transform: translateY(-1px);
        box-shadow: 0 6px 20px rgba(0,0,0,0.4);
    }

.prod-card--dark .prod-btn-outline,
.prod-card--mid .prod-btn-outline {
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.92);
    border-color: rgba(255,255,255,0.3);
    backdrop-filter: blur(8px);
}

    .prod-card--dark .prod-btn-outline:hover,
    .prod-card--mid .prod-btn-outline:hover {
        background: rgba(255,255,255,0.16);
        border-color: rgba(255,255,255,0.55);
        transform: translateY(-1px);
    }

/* Light card buttons */
.prod-card--light .prod-btn-primary {
    background: var(--dark);
    color: #fff;
    border-color: var(--dark);
}

    .prod-card--light .prod-btn-primary:hover {
        background: var(--red-deep, #8F0013);
        border-color: var(--red-deep, #8F0013);
        transform: translateY(-1px);
        box-shadow: 0 6px 20px rgba(143,0,19,0.3);
    }

.prod-card--light .prod-btn-outline {
    background: transparent;
    color: var(--text-dark);
    border-color: rgba(29,29,31,0.35);
}

    .prod-card--light .prod-btn-outline:hover {
        background: rgba(0,0,0,0.05);
        border-color: rgba(29,29,31,0.6);
        transform: translateY(-1px);
    }

/* ── Responsive ───────────────────────────────────────── */
@media (max-width: 900px) {
    .prod-grid {
        grid-template-columns: 1fr;
    }

    .prod-card--full {
        grid-column: auto;
    }

    .prod-card {
        min-height: 75vmax;
    }

    .prod-card--full {
        min-height: 60vmax;
    }

    .prod-card--dark {
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,0.06);
    }
}

@media (max-width: 560px) {
    .prod-buttons {
        flex-direction: column;
        align-items: flex-start;
    }

    .prod-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ── Scroll reveal (match existing site) ─────────────── */
.prod-reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1);
}

    .prod-reveal.in {
        opacity: 1;
        transform: none;
    }

.prod-reveal-d1 {
    transition-delay: .12s;
}

.prod-reveal-d2 {
    transition-delay: .22s;
}

.prod-reveal-d3 {
    transition-delay: .34s;
}

/* ===== Tesla-style product card overrides ===== */
.prod-grid {
    gap: 16px;
    padding: 16px clamp(16px, 3vw, 40px) clamp(40px, 5vw, 70px);
}

.prod-card {
    border-radius: 16px;
    overflow: hidden;
}

.prod-card--dark {
    border-right: none;
}

.prod-visual-wrap {
    position: absolute;
    inset: 0;
    z-index: 0;
    padding: 0;
    flex: unset;
}

.prod-visual-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.prod-placeholder {
    width: 100%;
    height: 100%;
    max-width: none;
    aspect-ratio: unset;
    border-radius: 0;
    background: transparent;
    border: none;
    padding: 0;
}

.prod-placeholder-inner {
    width: 100%;
    height: 100%;
    border-radius: 0;
}

.prod-card--full .prod-placeholder {
    max-width: none;
    aspect-ratio: unset;
}

.prod-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.25) 0%, transparent 30%, transparent 55%, rgba(0,0,0,0.80) 100%);
    z-index: 1;
    pointer-events: none;
    border-radius: inherit;
}

.prod-top,
.prod-bottom {
    position: relative;
    z-index: 2;
}

.prod-card--light .prod-name {
    color: #fff;
}

.prod-card--light .prod-tagline {
    color: rgba(255,255,255,0.75);
}

.prod-card--light .prod-spec-chip {
    border-color: rgba(255,255,255,0.3);
    color: rgba(255,255,255,0.85);
}

.prod-card--light .prod-btn-primary {
    background: rgba(255,255,255,0.95);
    color: #111;
}

.prod-card--light .prod-btn-outline {
    background: rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.92);
    border-color: rgba(255,255,255,0.3);
}

.prod-card--light .prod-divider {
    background: rgba(255,255,255,0.15);
}

/* =====================================================
   Metro Tile Grid  —  Windows Phone style
   ===================================================== */
.metro-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding: clamp(12px, 2vw, 24px) 0 clamp(40px, 5vw, 70px);
}

/* ── Base tile ───────────────────────────────────────── */
.metro-tile {
    position: relative;
    overflow: hidden;
    border-radius: 6px;
    min-height: 220px;
    display: block;
    text-decoration: none;
    background: #111318;
    cursor: pointer;
    transition: transform .25s cubic-bezier(.2,.7,.3,1),
                box-shadow .25s ease;
}

    .metro-tile:hover {
        transform: scale(1.025);
        box-shadow: 0 16px 40px rgba(0,0,0,0.45);
        z-index: 2;
    }

/* Featured tile — 1st item: 2×2 */
.metro-tile--featured {
    grid-column: span 2;
    grid-row: span 2;
    min-height: 448px;
    border-radius: 8px;
}

/* Wide tile — 6th item: 2×1 */
.metro-tile--wide {
    grid-column: span 2;
}

/* Full-width tile — last item when count == 6 */
.metro-tile--full {
    grid-column: 1 / -1;
    min-height: 200px;
}

/* ── Photo background ────────────────────────────────── */
.metro-tile__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform .5s cubic-bezier(.2,.7,.3,1);
}

.metro-tile:hover .metro-tile__img {
    transform: scale(1.08);
}

/* ── Dark gradient overlay ───────────────────────────── */
.metro-tile__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        160deg,
        rgba(0,0,0,0.15) 0%,
        rgba(0,0,0,0.65) 100%
    );
    transition: background .3s ease;
}

.metro-tile:hover .metro-tile__overlay {
    background: linear-gradient(
        160deg,
        rgba(255,255,255,0.10) 0%,
        rgba(0,0,0,0.72) 100%
    );
}

/* ── Content body ────────────────────────────────────── */
.metro-tile__body {
    position: relative;
    z-index: 2;
    height: 100%;
    padding: clamp(16px, 2vw, 24px);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 4px;
}

/* Icon */
.metro-tile__icon {
    font-size: clamp(22px, 3vw, 32px);
    color: rgba(255,255,255,0.85);
    margin-bottom: 6px;
    transition: transform .3s ease, color .3s ease;
}

.metro-tile:hover .metro-tile__icon {
    color: #fff;
    transform: translateY(-3px);
}

.metro-tile--featured .metro-tile__icon {
    font-size: clamp(30px, 4vw, 44px);
}

/* Badge */
.metro-tile__badge {
    display: inline-block;
    background: var(--red, #C0001A);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    padding: 3px 8px;
    border-radius: 3px;
    text-transform: uppercase;
    margin-bottom: 4px;
    width: fit-content;
}

/* Product name */
.metro-tile__name {
    color: #fff;
    font-size: clamp(14px, 1.6vw, 18px);
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
}

.metro-tile--featured .metro-tile__name {
    font-size: clamp(20px, 2.4vw, 28px);
}

/* English subtitle */
.metro-tile__sub {
    color: rgba(255,255,255,0.6);
    font-size: 11px;
    margin: 0;
    letter-spacing: .02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Responsive ─────────────────────────────────────── */
@media (max-width: 900px) {
    .metro-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }

    .metro-tile--featured {
        grid-column: span 2;
        grid-row: span 1;
        min-height: 240px;
    }

    .metro-tile--wide {
        grid-column: span 2;
    }

    .metro-tile {
        min-height: 170px;
    }
}

@media (max-width: 480px) {
    .metro-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 5px;
    }

    .metro-tile {
        min-height: 140px;
    }

    .metro-tile--featured {
        min-height: 180px;
    }

    .metro-tile__name {
        font-size: 13px;
    }

    .metro-tile--featured .metro-tile__name {
        font-size: 16px;
    }
}

/* =====================================================
   CLAUDE DESIGN INTEGRATION  —  pen1 v2
   ===================================================== */

/* ── Reveal ─────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .85s cubic-bezier(.2,.7,.3,1),transform .85s cubic-bezier(.2,.7,.3,1)}
.reveal.visible,.reveal.in-view{opacity:1;transform:translateY(0)}
.rv1{transition-delay:.08s}.rv2{transition-delay:.18s}.rv3{transition-delay:.28s}.rv4{transition-delay:.38s}

/* ── Hero ───────────────────────────────────────────── */
.hero{
  position:relative;min-height:100svh;
  display:flex;align-items:center;
  background:#0A0008;overflow:hidden;
  padding:clamp(64px,9vw,110px) clamp(16px,5vw,64px);
}
.hero-aurora{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.orb{position:absolute;border-radius:50%;filter:blur(90px);will-change:transform}
.orb-a{width:680px;height:680px;background:radial-gradient(circle,rgba(192,0,26,.65) 0%,transparent 70%);top:-200px;left:-80px;animation:float-a 14s ease-in-out infinite}
.orb-b{width:460px;height:460px;background:radial-gradient(circle,rgba(143,0,19,.5) 0%,transparent 70%);bottom:-120px;right:15%;animation:float-b 11s ease-in-out infinite 2s}
.orb-c{width:280px;height:280px;background:radial-gradient(circle,rgba(212,175,55,.18) 0%,transparent 70%);top:35%;right:8%;animation:float-c 9s ease-in-out infinite 1s}
@keyframes float-a{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(36px,-28px) scale(1.06)}}
@keyframes float-b{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-28px,22px) scale(1.09)}}
@keyframes float-c{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(18px,-36px) scale(.94)}}
.hero-dots{position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.05) 1px,transparent 1px);background-size:30px 30px;pointer-events:none}
.hero-inner{position:relative;z-index:2;max-width:1280px;margin:0 auto;width:100%}
.hero-left{max-width:780px}
.hero-eyebrow{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:999px;padding:7px 18px;color:rgba(255,255,255,.85);font-size:13px;font-weight:500;margin-bottom:26px;animation:badge-float 4s ease-in-out infinite}
.hero-eyebrow i{color:#D4AF37}
@keyframes badge-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.hero-h1{font-size:clamp(36px,5.2vw,74px);font-weight:700;line-height:1.1;color:#fff;margin-bottom:22px;letter-spacing:-.025em}
.hero-h1 .acc{color:#C0001A}
.hero-sub{font-size:clamp(15px,1.5vw,18px);color:rgba(255,255,255,.62);line-height:1.75;max-width:520px;margin-bottom:36px}
.hero-btns{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:44px}
.btn-red{display:inline-flex;align-items:center;gap:9px;padding:13px 28px;border-radius:10px;background:#C0001A;color:#fff;font-size:15px;font-weight:600;text-decoration:none;border:2px solid #C0001A;transition:background .2s,transform .18s;position:relative;overflow:hidden}
.btn-red:hover{background:#8F0013;border-color:#8F0013;color:#fff;transform:translateY(-2px)}
.btn-red::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);transform:translateX(-100%);transition:transform .6s ease}
.btn-red:hover::after{transform:translateX(100%)}
.btn-outline-w{display:inline-flex;align-items:center;gap:9px;padding:13px 28px;border-radius:10px;background:rgba(255,255,255,.08);color:#fff;font-size:15px;font-weight:500;text-decoration:none;border:2px solid rgba(255,255,255,.22);transition:background .2s,border-color .2s,transform .18s}
.btn-outline-w:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.45);color:#fff;transform:translateY(-2px)}
.hero-trust{display:flex;flex-wrap:wrap;gap:10px}
.trust-chip{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:5px 15px;font-size:12.5px;color:rgba(255,255,255,.72);font-weight:500;display:inline-flex;align-items:center;gap:6px}
.trust-chip i{color:#D4AF37;font-size:12px}

/* ── Features band (overlaps hero) ─────────────────── */
.s-feat{padding:0 clamp(16px,5vw,64px);margin-top:-52px;position:relative;z-index:10}
.feat-wrap{max-width:1280px;margin:0 auto;background:#fff;border-radius:20px;box-shadow:0 20px 70px rgba(0,0,0,.09);display:grid;grid-template-columns:repeat(4,1fr);overflow:hidden}
.feat-card{padding:32px 26px;border-right:1px solid #E5E5EA;transition:background .25s;cursor:default;position:relative;overflow:hidden}
.feat-card:last-child{border-right:none}
.feat-card:hover{background:#F5F5F7}
.feat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#C0001A,#D4AF37);transform:scaleX(0);transform-origin:left;transition:transform .35s ease}
.feat-card:hover::before{transform:scaleX(1)}
.feat-icon{width:52px;height:52px;background:linear-gradient(135deg,rgba(192,0,26,.12),rgba(192,0,26,.05));border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:24px;color:#C0001A;margin-bottom:16px;transition:transform .3s ease}
.feat-card:hover .feat-icon{transform:scale(1.1) rotate(-6deg)}
.feat-title{font-size:16px;font-weight:700;color:#1D1D1F;margin-bottom:7px}
.feat-desc{font-size:13px;color:#6E6E73;line-height:1.6;margin:0}

/* ── About ──────────────────────────────────────────── */
.s-about{padding:clamp(64px,9vw,110px) clamp(16px,5vw,64px)}
.about-inner{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.about-label{font-size:14px;font-weight:700;letter-spacing:.10em;text-transform:uppercase;color:#C0001A;margin-bottom:14px}
.about-h2{font-size:clamp(28px,3.5vw,46px);font-weight:700;line-height:1.18;color:#1D1D1F;margin-bottom:22px;letter-spacing:-.02em}
.about-h2 em{font-style:normal;color:#C0001A}
.about-p{font-size:16px;line-height:1.82;color:#6E6E73;margin-bottom:28px}
.about-checks{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:14px}
.about-checks li{display:flex;gap:13px;align-items:flex-start;font-size:15px;color:#1D1D1F;line-height:1.55}
.chk{width:26px;height:26px;flex-shrink:0;background:rgba(192,0,26,.1);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#C0001A;font-size:14px;margin-top:1px}
.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.stat-card{background:#fff;border-radius:20px;padding:30px 26px;border:1px solid #E5E5EA;box-shadow:0 4px 24px rgba(0,0,0,.04);transition:transform .3s,box-shadow .3s}
.stat-card:hover{transform:translateY(-5px);box-shadow:0 16px 40px rgba(0,0,0,.09)}
.stat-num{font-size:clamp(36px,4vw,52px);font-weight:800;color:#C0001A;line-height:1;margin-bottom:8px}
.stat-label{font-size:14px;color:#6E6E73;font-weight:500}

/* ── Clients band ───────────────────────────────────── */
.s-clients{background:#F5F5F7;border-top:1px solid #E5E5EA;border-bottom:1px solid #E5E5EA;padding:clamp(36px,5vw,56px) clamp(16px,5vw,64px)}
.clients-inner{max-width:1280px;margin:0 auto;text-align:center}
.clients-label{font-size:13px;font-weight:600;color:#6E6E73;letter-spacing:.08em;text-transform:uppercase;margin-bottom:28px}
.clients-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.client-chip{background:#fff;border:1px solid #E5E5EA;border-radius:10px;padding:10px 22px;font-size:14px;font-weight:600;color:#6E6E73;display:flex;align-items:center;gap:8px;transition:border-color .2s,color .2s,box-shadow .2s}
.client-chip:hover{border-color:#C0001A;color:#C0001A;box-shadow:0 4px 16px rgba(192,0,26,.08)}
.client-chip i{font-size:18px}

/* ── CTA Banner ─────────────────────────────────────── */
.s-cta{background:linear-gradient(135deg,#6b000f,#C0001A 60%,#a80014);padding:clamp(64px,9vw,96px) clamp(16px,5vw,64px);text-align:center;position:relative;overflow:hidden}
.s-cta::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.055) 1px,transparent 1px);background-size:28px 28px}
.s-cta::after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:80px;background:linear-gradient(to top,#FAFAFA,transparent)}
.cta-content{position:relative;z-index:1}
.cta-h2{font-size:clamp(26px,4vw,52px);font-weight:700;color:#fff;margin-bottom:14px;letter-spacing:-.02em}
.cta-sub{font-size:18px;color:rgba(255,255,255,.72);margin-bottom:40px;line-height:1.65;max-width:600px;margin-left:auto;margin-right:auto}
.btn-white{display:inline-flex;align-items:center;gap:9px;padding:16px 40px;border-radius:10px;background:#fff;color:#C0001A;font-size:16px;font-weight:700;text-decoration:none;transition:background .2s,transform .2s,box-shadow .2s;box-shadow:0 8px 32px rgba(0,0,0,.2)}
.btn-white:hover{background:#F5F5F7;transform:translateY(-2px);box-shadow:0 16px 48px rgba(0,0,0,.3);color:#C0001A}

/* ── Products section (keep dark) ──────────────────── */
section#products.about-section{background:#0f0f0f;max-width:100%;margin:0;border-top:1px solid rgba(255,255,255,.06);padding:clamp(50px,8vw,90px) clamp(20px,4vw,80px)}
section#products .about-tag{color:#ff6666;font-size:clamp(32px,5vw,60px)}

/* ── Responsive ─────────────────────────────────────── */
@media(max-width:1100px){
  .hero-inner{grid-template-columns:1fr}
  .feat-wrap{grid-template-columns:repeat(2,1fr)}
  .about-inner{grid-template-columns:1fr;gap:44px}
}
@media(max-width:720px){
  .feat-wrap{grid-template-columns:1fr}
  .feat-card{border-right:none;border-bottom:1px solid #E5E5EA}
  .feat-card:last-child{border-bottom:none}
  .stats-grid{grid-template-columns:1fr 1fr}
  .s-feat{margin-top:0}
}
@media(max-width:480px){
  .stats-grid{grid-template-columns:1fr}
  .hero-btns{flex-direction:column;align-items:flex-start}
}

/* ── Hero ─────────────────────────────────────────── */
.s-hero {
    position: relative;
    min-height: 100vh;
    background-color: #0a0a0a;
    background-image:
        linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size: 64px 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 120px 24px 80px;
}

.s-hero__glow-a {
    position: absolute;
    top: -160px;
    right: -160px;
    width: 680px;
    height: 680px;
    background: radial-gradient(circle, rgba(192,0,26,.28) 0%, transparent 65%);
    pointer-events: none;
}

.s-hero__glow-b {
    position: absolute;
    bottom: -180px;
    left: -120px;
    width: 520px;
    height: 520px;
    background: radial-gradient(circle, rgba(192,0,26,.14) 0%, transparent 65%);
    pointer-events: none;
}

.s-hero__inner {
    position: relative;
    z-index: 1;
    max-width: 860px;
    width: 100%;
    text-align: center;
}

.s-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(192,0,26,.12);
    border: 1px solid rgba(192,0,26,.30);
    color: #ff8080;
    font-size: 12px;
    font-weight: 500;
    padding: 6px 18px;
    border-radius: 100px;
    margin-bottom: 36px;
    letter-spacing: .02em;
}

.s-hero__h1 {
    font-size: clamp(46px, 7.5vw, 82px);
    font-weight: 800;
    line-height: 1.08;
    color: #fff;
    margin: 0 0 24px;
    letter-spacing: -.03em;
}

.s-hero__h1 .s-acc {
    background: linear-gradient(130deg, #ff4466 0%, #C0001A 55%, #ff6633 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.s-hero__sub {
    font-size: clamp(15px, 1.8vw, 18px);
    color: rgba(255,255,255,.58);
    max-width: 580px;
    margin: 0 auto 44px;
    line-height: 1.75;
    font-weight: 400;
}

.s-hero__btns {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}

.s-btn-primary {
    background: #C0001A;
    color: #fff;
    border: none;
    padding: 14px 30px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background .18s, transform .18s, box-shadow .18s;
    box-shadow: 0 0 0 0 rgba(192,0,26,0);
}
.s-btn-primary:hover {
    background: #a00016;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(192,0,26,.35);
}

.s-btn-ghost {
    background: transparent;
    color: rgba(255,255,255,.80);
    border: 1px solid rgba(255,255,255,.18);
    padding: 14px 30px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: border-color .18s, color .18s, transform .18s;
}
.s-btn-ghost:hover {
    border-color: rgba(255,255,255,.45);
    color: #fff;
    transform: translateY(-2px);
}

.s-hero__trust {
    position: relative;
    z-index: 1;
    margin-top: 72px;
    padding-top: 32px;
    border-top: 1px solid rgba(255,255,255,.07);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    width: 100%;
}

.s-hero__trust-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: rgba(255,255,255,.28);
    margin-right: 4px;
}

.s-hero__trust-chip {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.09);
    color: rgba(255,255,255,.45);
    font-size: 12px;
    font-weight: 500;
    padding: 5px 14px;
    border-radius: 6px;
}

/* ── Features ─────────────────────────────────────── */
.s-features {
    background: #0f0f0f;
    padding: 96px 24px;
    border-top: 1px solid rgba(255,255,255,.06);
}

.s-wrap {
    max-width: 1160px;
    margin: 0 auto;
}

.s-section-label {
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #ff6666;
    margin-bottom: 14px;
}

.s-section-title {
    text-align: center;
    font-size: clamp(26px, 4vw, 40px);
    font-weight: 800;
    color: #fff;
    margin: 0 0 12px;
    letter-spacing: -.025em;
    line-height: 1.18;
}

.s-section-sub {
    text-align: center;
    font-size: 16px;
    color: rgba(255,255,255,.45);
    max-width: 520px;
    margin: 0 auto 60px;
    line-height: 1.65;
}

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

.s-feat-card {
    background: #1a1a1a;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 16px;
    padding: 28px 22px;
    transition: box-shadow .22s, transform .22s, border-color .22s;
}
.s-feat-card:hover {
    box-shadow: 0 10px 40px rgba(192,0,26,.18);
    transform: translateY(-4px);
    border-color: rgba(192,0,26,.40);
}

.s-feat-card__icon {
    width: 46px;
    height: 46px;
    background: rgba(192,0,26,.15);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ff6666;
    font-size: 20px;
    margin-bottom: 18px;
}

.s-feat-card__title {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 6px;
}

.s-feat-card__desc {
    font-size: 13px;
    color: rgba(255,255,255,.45);
    line-height: 1.65;
    margin: 0;
}

/* ── About ────────────────────────────────────────── */
.s-about {
    background: #0a0a0a;
    padding: 96px 24px;
    border-top: 1px solid rgba(255,255,255,.06);
}

.s-about__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 72px;
    align-items: center;
}

.s-about__tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #ff6666;
    margin-bottom: 18px;
}

.s-about__title {
    font-size: clamp(26px, 3.2vw, 38px);
    font-weight: 800;
    color: #fff;
    line-height: 1.18;
    letter-spacing: -.025em;
    margin: 0 0 18px;
}
.s-about__title span { color: #ff4455; }

.s-about__desc {
    font-size: 15px;
    color: rgba(255,255,255,.55);
    line-height: 1.80;
    margin: 0 0 28px;
}

.s-about__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.s-about__list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 14px;
    color: rgba(255,255,255,.65);
    line-height: 1.65;
}

.s-about__list li .s-check {
    width: 20px;
    min-width: 20px;
    height: 20px;
    background: rgba(192,0,26,.20);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ff6666;
    font-size: 11px;
    margin-top: 2px;
}

/* ── Stats 2×2 ────────────────────────────────────── */
.s-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.s-stat-card {
    background: #1a1a1a;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 16px;
    padding: 28px 20px;
    text-align: center;
    transition: box-shadow .20s, transform .20s, border-color .20s;
}
.s-stat-card:hover {
    box-shadow: 0 6px 24px rgba(192,0,26,.20);
    transform: translateY(-3px);
    border-color: rgba(192,0,26,.35);
}

.s-stat-num {
    font-size: 38px;
    font-weight: 800;
    color: #ff4455;
    letter-spacing: -.025em;
    line-height: 1;
    margin-bottom: 8px;
}

.s-stat-label {
    font-size: 12px;
    color: rgba(255,255,255,.40);
    font-weight: 500;
}

/* ── Products section — dark override ─────────────── */
section#products.about-section {
    background: #0f0f0f;
    max-width: 100%;
    margin: 0;
    border-top: 1px solid rgba(255,255,255,.06);
    padding: clamp(50px, 8vw, 90px) clamp(20px, 4vw, 80px);
}

section#products .about-tag {
    color: #ff6666;
    font-size: clamp(32px, 5vw, 60px);
}

/* ── Responsive ───────────────────────────────────── */
@media (max-width: 900px) {
    .s-feat-grid { grid-template-columns: 1fr 1fr; }
    .s-about__grid { grid-template-columns: 1fr; gap: 48px; }
}

@media (max-width: 520px) {
    .s-feat-grid { grid-template-columns: 1fr; }
    .s-hero { padding: 100px 20px 60px; }
    .s-hero__btns { flex-direction: column; align-items: center; }
    .s-hero__btns a { width: 100%; justify-content: center; }
    .s-features, .s-about { padding: 64px 20px; }
}

/* ======================================================
   LIGHT THEME — White Smoke
   ====================================================== */

/* Body */
body { background-color: #F5F5F5; }

/* ── Features band ── */
.s-feat { background: #ffffff; margin-top: -52px; border-top: none; }
.feat-wrap {
  background: #fff;
  border: 1px solid #E5E5EA;
  box-shadow: 0 20px 70px rgba(0,0,0,.09);
}
.feat-card { border-right-color: #E5E5EA; }
.feat-card:hover { background: #F9F9FB; }
.feat-title { color: #1D1D1F; }
.feat-desc  { color: #6E6E73; }
.feat-icon  { background: rgba(192,0,26,.10); color: #C0001A; }

/* ── About section ── */
.s-about { background: #F5F5F5; }
.about-label { color: #C0001A; }
.about-h2 { color: #1D1D1F; }
.about-h2 em { color: #C0001A; }
.about-p { color: #6E6E73; }
.about-checks li { color: #1D1D1F; }
.chk { background: rgba(192,0,26,.10); color: #C0001A; }
.stat-card {
  background: #fff;
  border-color: #E5E5EA;
  box-shadow: 0 4px 24px rgba(0,0,0,.04);
}
.stat-card:hover { box-shadow: 0 12px 32px rgba(192,0,26,.12); }
.stat-num { color: #C0001A; }
.stat-label { color: #6E6E73; }

/* ── Clients band ── */
.s-clients {
  background: #EBEBEB;
  border-top-color: #E0E0E0;
  border-bottom-color: #E0E0E0;
}
.clients-label { color: #6E6E73; }
.client-chip {
  background: #fff;
  border-color: #E5E5EA;
  color: #6E6E73;
}
.client-chip i { color: #6E6E73; }
.client-chip:hover {
  border-color: #C0001A;
  color: #C0001A;
  box-shadow: 0 4px 16px rgba(192,0,26,.10);
}

/* ── Products section ── */
section#products.about-section { background: #fff; border-top: 1px solid #E5E5EA; }

/* ── CTA ── */
.s-cta::after { display: none; }

/* ── Language dropdown ── */
.lang-dropdown { position: relative; }

.lang-drop-btn {
    display: flex; align-items: center; gap: 5px;
    background: rgba(0,0,0,.06);
    border: 1px solid rgba(0,0,0,.10);
    border-radius: 8px; padding: 6px 10px;
    font-size: 13px; font-weight: 600; letter-spacing: .04em;
    font-family: inherit; color: #1D1D1F;
    cursor: pointer; white-space: nowrap;
    transition: background .15s;
}
.lang-drop-btn:hover { background: rgba(0,0,0,.11); }
.lang-drop-btn .bi-globe2 { font-size: 14px; opacity: .65; }
.lang-caret { font-size: 10px; opacity: .55; transition: transform .2s; }
.lang-dropdown.open .lang-caret { transform: rotate(180deg); }

.lang-drop-panel {
    display: none;
    position: absolute; top: calc(100% + 6px); right: 0;
    background: #fff;
    border: 1px solid rgba(0,0,0,.10);
    border-radius: 10px; padding: 5px;
    box-shadow: 0 8px 24px rgba(0,0,0,.14);
    min-width: 130px; z-index: 1200;
    flex-direction: column; gap: 1px;
}
.lang-dropdown.open .lang-drop-panel { display: flex; }

.lang-drop-item {
    background: none; border: none; cursor: pointer;
    text-align: left; padding: 8px 12px; border-radius: 6px;
    font-size: 13px; font-weight: 500; font-family: inherit;
    color: #1D1D1F; transition: background .1s;
    width: 100%;
}
.lang-drop-item:hover  { background: rgba(0,0,0,.06); }
.lang-drop-item.active { color: #C0001A; background: rgba(192,0,26,.07); font-weight: 700; }

/* Mobile lang row (inside hamburger menu) */
.nav-lang-item { border-top: 1px solid rgba(0,0,0,.07) !important; }
.mobile-lang-row {
    display: flex; align-items: center; gap: 8px;
    padding: 12px 4px;
}
.mobile-lang-label {
    font-size: 13px; color: rgba(0,0,0,.45);
    margin-right: 4px; flex-shrink: 0;
}
.mobile-lang-btn {
    background: rgba(0,0,0,.06); border: none; cursor: pointer;
    border-radius: 6px; padding: 5px 13px;
    font-size: 13px; font-weight: 600; font-family: inherit;
    color: #1D1D1F; transition: all .1s;
}
.mobile-lang-btn:hover  { background: rgba(0,0,0,.12); }
.mobile-lang-btn.active { background: #C0001A; color: #fff; }

/* Desktop: hide mobile lang item from menu */
@media (min-width: 901px) {
    .nav-lang-item { display: none !important; }
}
/* Mobile: hide desktop dropdown, use mobile menu lang row */
@media (max-width: 900px) {
    .lang-dropdown { display: none; }
}

/* ── Core Expertise Section ── */
.s-expertise {
  background: #fff;
  padding: clamp(64px,9vw,100px) clamp(16px,5vw,64px);
  border-top: 1px solid #E5E5EA;
}
.expertise-inner { max-width: 1280px; margin: 0 auto; }
.expertise-head  { text-align: center; margin-bottom: 52px; }
.expertise-label {
  font-size: 13px; font-weight: 700; letter-spacing: .10em;
  text-transform: uppercase; color: #C0001A; margin-bottom: 12px;
}
.expertise-h2 {
  font-size: clamp(26px,3vw,40px); font-weight: 700;
  color: #1D1D1F; letter-spacing: -.02em; margin-bottom: 14px;
}
.expertise-h2 em { font-style: normal; color: #C0001A; }
.expertise-sub {
  font-size: 16px; color: #6E6E73; line-height: 1.7;
  max-width: 560px; margin: 0 auto;
}
.expertise-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 28px;
}
.exp-card {
  background: #F8F8FA;
  border: 1px solid #E5E5EA;
  border-radius: 16px;
  padding: 32px 28px;
  transition: transform .25s ease, box-shadow .25s ease;
}
.exp-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0,0,0,.08);
}
.exp-icon {
  width: 52px; height: 52px; border-radius: 14px;
  background: rgba(192,0,26,.10); color: #C0001A;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; margin-bottom: 20px;
}
.exp-card-title {
  font-size: 18px; font-weight: 700; color: #1D1D1F;
  margin: 0 0 10px; letter-spacing: -.01em;
}
.exp-card-desc {
  font-size: 14px; color: #6E6E73; line-height: 1.78; margin: 0;
}

/* ── Values Section ── */
.s-values {
  background: #F5F5F5;
  padding: clamp(64px,9vw,100px) clamp(16px,5vw,64px);
}
.values-inner { max-width: 1280px; margin: 0 auto; }
.values-head  { text-align: center; margin-bottom: 52px; }
.values-label {
  font-size: 40px; font-weight: 700; letter-spacing: .10em;
  text-transform: uppercase; color: #C0001A; margin-bottom: 12px;
}
.values-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 28px;
}
.val-card {
  background: #fff;
  border: 1px solid #E5E5EA;
  border-radius: 16px;
  padding: 36px 28px;
  text-align: center;
  transition: transform .25s ease, box-shadow .25s ease;
}
.val-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0,0,0,.08);
}
.val-icon {
  width: 60px; height: 60px; border-radius: 50%;
  background: rgba(192,0,26,.08); color: #C0001A;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; margin: 0 auto 20px;
}
.val-title {
  font-size: 18px; font-weight: 700; color: #1D1D1F;
  margin: 0 0 12px; letter-spacing: -.01em;
}
.val-desc {
  font-size: 14px; color: #6E6E73; line-height: 1.80; margin: 0;
}

@media (max-width: 900px) {
  .expertise-grid, .values-grid { grid-template-columns: 1fr; gap: 20px; }
  .exp-card, .val-card { padding: 28px 22px; }
}

/* ── Hero (static image, soft red glow) ── */
.hero {
  position: relative;
  min-height: clamp(500px, 72vh, 720px);
  background:
    linear-gradient(90deg,
      rgba(255,255,255,.88) 0%,
      rgba(255,255,255,.78) 20%,
      rgba(255,255,255,.42) 40%,
      rgba(255,255,255,.06) 58%,
      rgba(255,255,255,0)   68%),
    url('/images/background.jpg') center/cover no-repeat;
  color: #1D1D1F;
  display: flex;
  align-items: center;
  padding: clamp(56px, 8vw, 96px) clamp(20px, 5vw, 60px);
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 16% 24%, rgba(192,0,26,.05) 0%, transparent 35%);
  pointer-events: none;
  z-index: 1;
}

.hero::after { display: none; }
.hero-inner { max-width: 1280px; margin: 0 auto; width: 100%; position: relative; z-index: 2; }
.hero-left { max-width: 760px; }
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.74);
  border: 1px solid rgba(192,0,26,.14);
  border-radius: 999px;
  padding: 8px 16px;
  color: #4b4b4f;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 24px;
  box-shadow: 0 10px 28px rgba(192,0,26,.08);
  animation: none;
}
.hero-eyebrow i { color: #C0001A; }
.hero-h1 {
  font-size: clamp(36px, 5.6vw, 74px);
  font-weight: 800;
  line-height: 1.05;
  color: #1D1D1F;
  margin: 0 0 18px;
  max-width: 760px;
  letter-spacing: -.03em;
  text-wrap: balance;
}
.hero-h1 .acc { color: #C0001A; }
.hero-sub {
  font-size: clamp(15px, 1.5vw, 18px);
  color: #4f4f54;
  line-height: 1.8;
  max-width: 560px;
  margin-bottom: 34px;
}
.hero-btns { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 34px; }
.btn-red {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 28px;
  border-radius: 10px;
  background: #C0001A;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  border: 1.5px solid #C0001A;
  transition: background .18s, transform .18s, box-shadow .18s;
  box-shadow: 0 10px 24px rgba(192,0,26,.16);
}
.btn-red:hover {
  background: #8F0013;
  border-color: #8F0013;
  color: #fff;
  transform: translateY(-2px);
}
.btn-outline-w {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 28px;
  border-radius: 10px;
  background: rgba(255,255,255,.72);
  color: #1D1D1F;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  border: 1.5px solid rgba(192,0,26,.18);
  backdrop-filter: blur(10px);
  transition: background .18s, border-color .18s, transform .18s, color .18s;
}
.btn-outline-w:hover {
  background: #fff;
  border-color: #C0001A;
  color: #C0001A;
  transform: translateY(-2px);
}
.hero-trust { display: flex; flex-wrap: wrap; gap: 10px; }
.trust-chip {
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(192,0,26,.12);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12.5px;
  color: #505056;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,.04);
}
.trust-chip i { color: #C0001A; font-size: 12px; }

@media (max-width: 900px) {
  .hero-left { max-width: 640px; }
}

@media (max-width: 720px) {
  .hero {
    min-height: auto;
    padding: 44px 20px 56px;
  }

  .hero-btns {
    flex-direction: column;
    align-items: flex-start;
  }

  .btn-red,
  .btn-outline-w {
    width: 100%;
    justify-content: center;
  }

  .hero-sub {
    max-width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-eyebrow { animation: none; }
  .btn-red, .btn-outline-w { transition: none; }
}

/* =====================================================
   Mobile — 480px (iPhone SE and up)
   ===================================================== */
@media (max-width: 480px) {

  /* ── Hero eyebrow: allow wrap, prevent overflow ── */
  .hero-eyebrow {
    display: flex;
    flex-wrap: wrap;
    max-width: 100%;
    font-size: 11px;
    padding: 6px 12px;
    line-height: 1.5;
    gap: 4px;
  }
  .hero-eyebrow span {
    white-space: normal;
    word-break: break-word;
  }

  /* ── Hero H1 slightly tighter ── */
  .hero-h1 {
    font-size: clamp(28px, 7.5vw, 36px);
    letter-spacing: -.02em;
  }

  /* ── Hero sub ── */
  .hero-sub {
    font-size: 14px;
    margin-bottom: 24px;
  }

  /* ── Hero buttons stack ── */
  .hero-btns {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-bottom: 24px;
  }
  .btn-red, .btn-outline-w {
    width: 100%;
    justify-content: center;
    padding: 12px 20px;
    font-size: 14px;
  }

  /* ── Trust chips smaller ── */
  .trust-chip {
    font-size: 11px;
    padding: 5px 12px;
  }

  /* ── About gap on single column ── */
  .about-inner { gap: 32px; }

  /* ── Stats grid: 2 cols is fine on 480px ── */
  .stats-grid { grid-template-columns: 1fr 1fr; }

  /* ── Products dark section ── */
  section#products.about-section {
    padding: 40px 16px 48px;
  }

  /* ── Metro grid → single column on phone ── */
  .metro-grid {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .metro-tile--featured,
  .metro-tile--wide {
    grid-column: auto;
    grid-row: auto;
  }
  .metro-tile         { min-height: 200px; }
  .metro-tile--featured { min-height: 240px; }

  /* ── CTA section ── */
  .cta-sub { font-size: 15px; margin-bottom: 28px; }
  .btn-white { padding: 14px 28px; font-size: 14px; }

  /* ── Values / Expertise labels ── */
  .values-label { font-size: 26px; }
  .about-tag    { font-size: 36px; }

  /* ── Footer single column ── */
  .footer-grid { grid-template-columns: 1fr; }
  .footer-col:first-child { grid-column: auto; }
}

/* =====================================================
   Mobile — 375px (iPhone SE exact)
   ===================================================== */
@media (max-width: 375px) {

  /* Hero tighter padding */
  .hero { padding: 44px 14px 52px; }

  /* Eyebrow even smaller */
  .hero-eyebrow { font-size: 10px; padding: 5px 10px; }

  /* Features band flush */
  .s-feat { padding: 0 12px; }

  /* Sections horizontal padding */
  .s-about, .s-expertise, .s-values, .s-clients {
    padding-left: 14px;
    padding-right: 14px;
  }

  /* Expertise / values cards */
  .exp-card, .val-card { padding: 22px 16px; }

  /* Stats stack on very narrow */
  .stats-grid { grid-template-columns: 1fr; gap: 10px; }

  /* Nav: hide logo subtitle */
  .brand-logo .logo-text small { display: none; }
}