:root {
    --color-primary: #2156a9;
    --color-primary-dark: #18438a;
    --color-text: #1e1e1e;
    --color-text-light: #666;
    --color-white: #ffffff;
    --color-bg-light: #f8fafc;
    --color-border: #e5e7eb;

    --container: 1400px;
    --container-wide: 1400px;

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;

    --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 8px 25px rgba(0, 0, 0, 0.08);

    --transition: 0.3s ease;
    --font-main: 'Roboto', sans-serif;
}

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

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    font-family: var(--font-main);
    color: var(--color-text);
    background: #fff;
    line-height: 1.6;
    overflow-x: hidden;
}

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

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

ul {
    list-style: none;
}

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

/* ===== LAYOUT ===== */
.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 clamp(16px, 3vw, 40px);
}

.container-wide {
    width: 100%;
    max-width: var(--container-wide);
    margin: 0 auto;
    padding: 0 clamp(16px, 3vw, 40px);
}

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

.full-width-inner {
    max-width: 100%;
    padding: 0;
}

/* ===== COMPONENTS ===== */
.btn-primary,
.btn-outline-light,
.btn-header,
.btn-dark-blue {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    font-size: 15px;
    font-weight: 600;
    transition: var(--transition);
    cursor: pointer;
}

.btn-primary {
    background: var(--color-primary);
    color: #fff;
    padding: 12px 30px;
    border: none;
}

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

.btn-outline-light {
    border: 1px solid #fff;
    color: #fff;
    background: transparent;
    padding: 12px 30px;
}

.btn-outline-light:hover {
    background: rgba(255, 255, 255, 0.1);
}

.btn-header {
    background: var(--color-primary);
    color: #fff !important;
    padding: 10px 24px;
    border: none;
    border-radius: var(--radius-sm);
}

.btn-header:hover {
    background: var(--color-primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(33, 86, 169, 0.35);
}

.lang-toggle {
    background: transparent;
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
    margin-left: 8px;
}

.lang-toggle:hover {
    background: var(--color-primary);
    color: #fff;
}

/* ===== SCROLL REVEAL ===== */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }
.reveal-delay-6 { transition-delay: 0.6s; }

.btn-dark-blue {
    background: var(--color-primary);
    color: #fff;
    padding: 12px 30px;
    border: none;
}

.btn-dark-blue:hover {
    background: var(--color-primary-dark);
}

.section-heading,
.section-heading-center {
    text-align: center;
    margin-bottom: 50px;
}

.section-heading small,
.section-heading-center small {
    color: var(--color-primary);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.section-heading h2,
.section-heading-center h2 {
    font-size: 36px;
    margin: 10px 0;
    color: #1e1e1e;
    font-weight: 800;
}

.section-heading p,
.section-heading-center p {
    color: var(--color-text-light);
    font-size: 15px;
}

.section-heading-center--industries h2 {
    color: #0b3d91;
    font-size: 42px;
    font-weight: 900;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.heading-divider,
.heading-underline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-top: 4px;
}

.heading-divider span {
    width: 40px;
    height: 2px;
    background: #ccc;
}

.heading-divider p {
    font-size: 16px;
    color: #666;
    font-weight: 500;
    letter-spacing: 2px;
}

.heading-underline {
    width: 40px;
    height: 3px;
    background: var(--color-primary);
    margin: 5px auto 0;
}

.active {
    color: var(--color-primary);
}

/* ===== HEADER ===== */
.site-header {
    background: transparent;
    border-bottom: 1px solid transparent;
    padding: 15px 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 500;
    transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.site-header .nav-links > a,
.site-header .dropdown-trigger,
.site-header .logo-text {
    color: #fff;
}
.site-header .nav-links > a i {
    color: rgba(255,255,255,0.7);
}
.site-header .lang-toggle {
    color: #fff;
    border-color: #fff;
}
.site-header .hamburger-bar {
    background: #fff;
}

.site-header.scrolled {
    background: #fff !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    border-bottom-color: transparent;
}
.site-header:hover {
    background: #fff !important;
}
.site-header:hover .nav-links > a,
.site-header:hover .dropdown-trigger,
.site-header:hover .logo-text {
    color: #333;
}
.site-header:hover .nav-links > a i {
    color: #999;
}
.site-header:hover .hamburger-bar {
    background: var(--color-primary);
}
.site-header.scrolled .nav-links > a,
.site-header.scrolled .dropdown-trigger,
.site-header.scrolled .logo-text {
    color: #333;
}
.site-header.scrolled .nav-links > a i {
    color: #999;
}
.site-header.scrolled .lang-toggle {
    color: var(--color-primary);
    border-color: var(--color-primary);
}
.site-header.scrolled .hamburger-bar {
    background: var(--color-primary);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.logo-area {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.logo-img {
    height: 48px;
    width: auto;
    display: block;
}

.logo-icon {
    width: 30px;
    height: 30px;
    background: var(--color-primary);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
}

.logo-text {
    font-size: 28px;
    font-weight: 700;
    color: #000;
    white-space: nowrap;
}

/* Hamburger button (hidden by default) */
.hamburger-toggle {
    display: none;
    flex-direction: column;
    gap: 4px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 6px;
}

.hamburger-bar {
    width: 28px;
    height: 3px;
    background: var(--color-primary);
    border-radius: 2px;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 25px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.nav-links a {
    font-size: 15px;
    font-weight: 500;
    color: #000;
    display: flex;
    align-items: center;
    gap: 4px;
    position: relative;
}

.nav-links > a:not(.btn-header)::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--color-primary);
    transition: width 0.25s ease;
}

.nav-links > a:not(.btn-header):hover::after,
.nav-links > a.active::after {
    width: 100%;
}

.nav-links a:hover {
    color: var(--color-primary);
}

.nav-links > a.active,
.nav-dropdown.active > .dropdown-trigger {
    color: var(--color-primary);
}

.nav-links a i {
    font-size: 12px;
    color: #999;
    margin-left: 4px;
    transition: transform 0.25s ease;
}
.nav-dropdown.is-open > .dropdown-trigger i.fa-chevron-down,
.nav-dropdown:hover > .dropdown-trigger i.fa-chevron-down {
    transform: rotate(180deg);
}

.nav-dropdown {
    position: relative;
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: #fff !important;
    border: 1px solid #dce4f0;
    border-radius: 10px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    padding: 8px 0;
    z-index: 999;
}

.dropdown-menu a {
    padding: 10px 22px;
    display: block;
    font-weight: 500;
    color: #333 !important;
    transition: all 0.2s ease;
}

.dropdown-menu a:hover {
    background: var(--color-primary) !important;
    color: #fff !important;
}
.nav-dropdown.svc .dropdown-menu a:hover {
    background: transparent !important;
    color: inherit !important;
}

.nav-dropdown.is-open .dropdown-menu,
.nav-dropdown:hover > .dropdown-menu {
    display: block;
}

/* ===== SERVICES MEGA MENU ===== */
.nav-dropdown.svc .dropdown-menu {
    min-width: 420px;
    padding: 20px 0 12px;
    left: -30px;
    top: calc(100% + 6px);
    border: none;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.12);
}
.nav-dropdown.svc .svc-head {
    font-size: 11px;
    font-weight: 700;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 0 22px 10px;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 4px;
}
.nav-dropdown.svc .svc-row {
    display: flex;
    gap: 0;
    padding: 8px 22px;
    transition: background 0.2s ease;
}
.nav-dropdown.svc .svc-row:hover {
    background: #f8fafc;
}
.nav-dropdown.svc .svc-row + .svc-row {
    border-top: 1px solid #f5f5f5;
}
.nav-dropdown.svc .svc-item {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    padding: 4px 0;
}
.nav-dropdown.svc .svc-item i {
    font-size: 16px;
    color: var(--color-primary);
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}
.nav-dropdown.svc .svc-item .si-text {
    display: flex;
    flex-direction: column;
}
.nav-dropdown.svc .svc-item .si-title {
    font-size: 14px;
    font-weight: 600;
    color: #0a1a30;
    line-height: 1.3;
}
.nav-dropdown.svc .svc-item .si-desc {
    font-size: 11px;
    color: #aaa;
    line-height: 1.3;
}
.nav-dropdown.svc .svc-item:hover .si-title {
    color: var(--color-primary);
}

@media (max-width: 992px) {
    .nav-dropdown.svc .dropdown-menu {
        min-width: auto;
        left: 0;
    }
    .nav-dropdown.svc .svc-row {
        flex-direction: column;
        gap: 8px;
    }
}

.nav-dropdown.active > .dropdown-trigger {
    color: var(--color-primary);
}

.nav-dropdown.active > .dropdown-trigger::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--color-primary);
}

/* ===== HERO ===== */
.hero-section {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 100px 0 80px;
    background: url('../img/factory.webp') center / cover no-repeat;
    color: #fff;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0,20,50,0.75) 0%, rgba(0,0,0,0.45) 100%);
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
}

/* Hero entrance animations */
.hero-title {
    font-size: 56px;
    line-height: 1.15;
    font-weight: 900;
    margin-bottom: 24px;
    text-transform: uppercase;
    letter-spacing: 2px;
    animation: heroFadeUp 0.6s 0.3s ease both;
}

.hero-description {
    font-size: 18px;
    color: rgba(255,255,255,0.85);
    margin-bottom: 36px;
    max-width: 620px;
    line-height: 1.7;
    animation: heroFadeUp 0.6s 0.7s ease both;
}

.hero-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    animation: heroFadeUp 0.6s 1.1s ease both;
}

.hero-features {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 24px;
    margin-top: 60px;
    padding-top: 40px;
    border-top: 1px solid rgba(255,255,255,0.15);
    animation: heroFadeUp 0.6s 1.5s ease both;
}

@keyframes heroFadeUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}

.feature-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.feature-item i {
    font-size: 28px;
    color: #fff;
    margin-top: 2px;
}

.feature-item h4 {
    font-size: 16px;
    font-weight: 700;
}

.feature-item span {
    font-size: 13px;
    color: #cbd5e1;
}

/* ===== HOME CTA ===== */
.home-cta {
    padding: 80px 0;
    background: linear-gradient(135deg, rgba(11, 31, 58, 0.93), rgba(26, 58, 107, 0.88)), url('../img/equipment-showcase.webp') center / cover;
}

@media (max-width: 768px) {
    .home-cta { padding: 50px 0; }
}

/* ===== PROCESS ===== */
.process-section {
    padding: 50px 0 40px;
    background: #f8fafc;
}

.process-steps {
    display: flex;
    justify-content: center;
    align-items: stretch;
}

.step-card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    flex: 1;
    position: relative;
    transition: transform 0.3s ease;
}

.step-card:hover {
    transform: scale(1.04);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.step-card-img {
    height: 200px;
    background-color: #e2e8f0;
    background-size: cover;
    background-position: center;
    position: relative;
}

.step-number {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #fff;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    color: var(--color-primary);
}

.step-card-body {
    padding: 18px 14px;
    text-align: center;
}

.step-card-body h4 {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 6px;
}

.step-card-body p {
    font-size: 13px;
    color: #666;
}

.step-connector {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    color: var(--color-primary);
}

.step-connector span {
    background: var(--color-primary);
    color: #fff;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

/* ===== ABOUT ===== */
.about-section {
    padding: 50px 0;
    background: #fff;
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: center;
}

.about-content small {
    color: var(--color-primary);
    font-weight: 700;
    letter-spacing: 2px;
    font-size: 13px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 6px;
}

.about-content h2 {
    font-size: 36px;
    font-weight: 800;
    margin: 10px 0 20px;
    color: #1e1e1e;
}

.about-content p {
    color: #4b5563;
    font-size: 16px;
    margin-bottom: 25px;
}

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

.about-stats .stat-item {
    display: block;
    color: inherit;
    border-right: none;
    text-align: left;
}

.about-stats .stat-item h3 {
    font-size: 24px;
    font-weight: 800;
    color: var(--color-primary);
}

.about-stats .stat-item span {
    font-size: 13px;
    color: #6b7280;
}

.about-img {
    background: #e2e8f0;
    height: 400px;
    background-size: cover;
    background-position: center;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
}

.video-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(0,0,0,0.55);
    border: 3px solid rgba(255,255,255,0.9);
    color: #fff;
    font-size: 28px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 10;
    padding-left: 5px;
}
.video-play-btn:hover {
    background: rgba(0,0,0,0.8);
    transform: translate(-50%, -50%) scale(1.1);
}
.video-play-btn.is-hidden {
    opacity: 0;
    pointer-events: none;
}

/* ===== INDUSTRIES ===== */
.industries-section {
    padding: 20px 0 40px;
    background: #f8fafc;
}

.industries-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 30px;
    align-items: stretch;
}

.industry-card {
    background: #fff;
    border-radius: 12px;
    padding: 28px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
    border: 1px solid #e5e7eb;
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.industry-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(11, 61, 145, 0.12);
    border-color: var(--color-primary);
}

.industry-top {
    display: flex;
    flex-direction: row;
    gap: 16px;
    flex: 1;
}

.industry-left {
    flex: 0 0 45%;
    display: flex;
    flex-direction: column;
}

.card-header-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.badge-number {
    background: #0b3d91;
    color: #fff;
    width: 32px;
    height: 32px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 800;
    flex-shrink: 0;
}

.card-title-group {
    display: flex;
    flex-direction: column;
}

.card-title-group h4 {
    font-size: 15px;
    font-weight: 700;
    margin: 0;
    color: #1e1e1e;
    line-height: 1.2;
    white-space: nowrap;
}

.card-title-group .en-title {
    font-size: 10px;
    text-transform: uppercase;
    color: #6b7280;
    white-space: nowrap;
}

.feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
    flex: 1;
}

.industry-left > a {
    margin-top: auto;
    display: inline-block;
    padding: 8px 18px;
    background: #0b3d91;
    color: #fff;
    border-radius: 6px;
    font-size: 13px;
    text-decoration: none;
    font-weight: 600;
    align-self: flex-start;
}

.feature-list li {
    font-size: 14px;
    color: #4b5563;
    margin-bottom: 8px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.feature-list li i {
    color: var(--color-primary);
    margin-top: 2px;
    flex-shrink: 0;
}

.industry-right {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.industry-main-img {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border-radius: 6px;
    overflow: hidden;
    min-height: 200px;
    max-height: 220px;
}

.industry-main-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.industry-thumbnails {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding-top: 8px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.industry-thumbnails img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 4px;
    transition: 0.3s ease;
}

.industry-thumbnails img:hover {
    border-color: #0b3d91;
    transform: scale(1.05);
}

/* ===== PARTNERS ===== */
.partners-section {
    padding: 2px 0 40px;
    background: #fff;
}

.partners-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 40px 80px;
    margin-top: 30px;
}

.partner-logo {
    width: 200px;
    height: 95px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.partner-logo img[alt="IKEA logo"],
.partner-logo img[alt="JBL logo"] {
    max-width: 100px;
    max-height: 50px;
}

.partner-logo img {
    max-width: 100%;
    max-height: 100%;
    transition: 0.3s ease;
}

.partner-logo img:hover {
    transform: scale(1.05);
}

/* ===== QUOTE ===== */
.industry-quote-section {
    background: url('../img/background.webp') center / cover no-repeat;
    color: #fff;
    padding: 50px 0;
    position: relative;
}

.industry-quote-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(26, 37, 49, 0.7);
    z-index: 0;
}

.industry-quote-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 40px;
}

.industry-icons h3,
.quote-form h3 {
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 20px;
    letter-spacing: 1px;
}

.industry-img-container {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 20px;
}

.industry-img-container .img-box {
    flex: 1;
    aspect-ratio: 3 / 4;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.industry-img-container .img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.industry-img-container .img-box img:hover {
    transform: scale(1.05);
}

.quote-form input,
.quote-form select,
.quote-form textarea {
    width: 100%;
    padding: 12px 15px;
    border-radius: 4px;
    border: none;
    background: #fff;
    margin-bottom: 15px;
    font-size: 14px;
    color: #333;
}

.quote-form textarea {
    resize: vertical;
    height: 80px;
}

.quote-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.quote-form .btn-primary {
    width: 100%;
    padding: 14px;
    font-size: 16px;
    margin-top: 5px;
    border: none;
}

/* ===== ABOUT PAGE HERO ===== */
.about-hero {
    position: relative;
    background: linear-gradient(to right, #0f1724 0%, #0f1724 5%, rgba(15, 23, 36, 0) 100%), url('../img/factory.webp') no-repeat center center / cover;
    color: #fff;
    min-height: 550px;
    display: flex;
    flex-direction: column;
    padding: 80px 0 60px;
}

.about-hero-content {
    position: relative;
    max-width: 700px;
    z-index: 2;
    margin-top: 80px;
}

.about-hero-content h1 {
    font-size: 48px;
    font-weight: 900;
    margin-bottom: 20px;
    line-height: 1.2;
    animation: heroFadeUp 0.8s ease both;
}

.about-hero-content h3 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 18px;
    letter-spacing: 1px;
    animation: heroFadeUp 0.8s 0.15s ease both;
}

.about-hero-content p {
    color: #d1d5db;
    font-size: 16px;
    line-height: 1.6;
    max-width: 600px;
    animation: heroFadeUp 0.8s 0.2s ease both;
}

/* ===== ABOUT DETAILS ===== */
.about-details {
    padding: 60px 0;
    background: #f8fafc;
    overflow: hidden;
}

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

.detail-card {
    background: #fff;
    border-radius: 8px;
    padding: 25px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
    transition: var(--transition);
    border-top: 3px solid transparent;
}

.detail-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(33, 86, 169, 0.12);
    border-top-color: var(--color-primary);
}

.detail-number {
    display: inline-block;
    width: 40px;
    height: 40px;
    background: var(--color-primary);
    color: #fff;
    border-radius: 50%;
    text-align: center;
    line-height: 40px;
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 15px;
}

.detail-img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 6px;
    margin-bottom: 15px;
    background-color: #e2e8f0;
}

.detail-card h4 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 4px;
}

.detail-card p {
    color: #4b5563;
    font-size: 14px;
    line-height: 1.6;
}

.detail-highlight-number {
    font-size: 28px;
    font-weight: 800;
    color: var(--color-primary);
    display: block;
    margin-bottom: 5px;
}

/* ===== STATS BANNER ===== */
.stats-banner {
    background: linear-gradient(135deg, #0f1f3d 0%, #1a335f 50%, #0f2550 100%);
    padding: 50px 0;
    overflow: hidden;
}

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

.stat-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    color: #fff;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.stat-item:last-child {
    border-right: none;
}

.stat-icon {
    font-size: 30px;
    color: #a3c2e8;
}

.stat-text h3 {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
}

.stat-text span {
    font-size: 14px;
    opacity: 0.8;
    color: #fff;
}

/* ===== SERVICE PAGE ===== */
.service-hero {
    position: relative;
    color: #fff;
    min-height: 540px;
    display: flex;
    align-items: center;
    padding: 100px 0 60px;
    overflow: hidden;
}

.service-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, rgba(15, 23, 36, 0.88) 0%, rgba(15, 23, 36, 0.76) 38%, rgba(15, 23, 36, 0.28) 100%);
}

.service-hero--design {
    background: url('../img/product-design.webp') center / cover no-repeat;
}

.service-hero-content {
    position: relative;
    z-index: 1;
    max-width: 700px;
}

.service-hero-content small {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #bfdbfe;
    margin-bottom: 12px;
}

.service-hero-content h1 {
    font-size: 52px;
    line-height: 1.1;
    font-weight: 900;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.service-hero-content h3 {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 18px;
}

.service-hero-content p {
    max-width: 620px;
    color: #dbe4ef;
    font-size: 16px;
    margin-bottom: 30px;
}

.service-overview {
    background: #fff;
}

.service-overview-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 50px;
    align-items: center;
}

.service-overview-grid--reverse {
    grid-template-columns: 0.95fr 1.05fr;
}

.service-overview-content small {
    color: var(--color-primary);
    font-weight: 700;
    letter-spacing: 2px;
    font-size: 13px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 6px;
}

.service-overview-content h2 {
    font-size: 36px;
    font-weight: 800;
    margin: 10px 0 18px;
    color: #1e1e1e;
}

.service-overview-content p {
    color: #4b5563;
    font-size: 16px;
    margin-bottom: 16px;
}

.service-points {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 20px;
    margin-top: 28px;
}

.service-point {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: #334155;
}

.service-point i {
    color: var(--color-primary);
    margin-top: 3px;
}

.service-overview-media {
    position: relative;
}

.service-overview-image {
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 20px 45px rgba(15, 23, 36, 0.12);
    background: #e2e8f0;
}

.service-overview-image img {
    width: 100%;
    height: 100%;
    min-height: 360px;
    object-fit: cover;
}

.service-info-card {
    width: min(280px, calc(100% - 30px));
    margin: -45px 0 0 auto;
    position: relative;
    z-index: 2;
    background: #fff;
    border-radius: 12px;
    padding: 22px;
    box-shadow: 0 12px 35px rgba(33, 86, 169, 0.16);
    border: 1px solid #dbe4ef;
}

.service-info-card h4 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 8px;
}

.service-info-card p {
    color: #4b5563;
    font-size: 14px;
    margin: 0;
}

.design-capabilities {
    background: #f8fafc;
}

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

.capability-card {
    background: #fff;
    padding: 28px 24px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 8px 25px rgba(15, 23, 36, 0.04);
    transition: var(--transition);
}

.capability-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(33, 86, 169, 0.1);
    border-color: #bfd0ea;
}

.capability-icon {
    width: 54px;
    height: 54px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(33, 86, 169, 0.1);
    color: var(--color-primary);
    font-size: 22px;
    margin-bottom: 18px;
}

.capability-card h4 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
}

.capability-card p {
    color: #4b5563;
    font-size: 14px;
}

.design-process {
    background: #fff;
}

.design-process-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.process-item {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 26px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.process-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 18px;
}

.process-item h4 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
}

.process-item p {
    font-size: 14px;
    color: #4b5563;
}

.design-advantages {
    background: #f8fafc;
}

.advantage-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-top: 26px;
}

.advantage-item {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 22px;
}

.advantage-item h4 {
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 8px;
}

.advantage-item p {
    margin: 0;
    color: #4b5563;
    font-size: 14px;
}

.service-cta-section {
    padding: 60px 0;
    background: linear-gradient(135deg, #0f1f3d 0%, #1a335f 100%);
}

.service-cta-box {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 18px;
    padding: 36px 40px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
}

.service-cta-box small {
    display: inline-block;
    color: #bfdbfe;
    letter-spacing: 2px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.service-cta-box h2 {
    font-size: 34px;
    font-weight: 800;
    margin-bottom: 10px;
}

.service-cta-box p {
    color: #dbe4ef;
    max-width: 760px;
}

.service-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    flex-shrink: 0;
}

/* ===== FOOTER ===== */
.site-footer {
    background: #121a24;
    color: #ccd6e0;
    padding: 50px 0 20px;
    font-size: 14px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1.5fr 1.5fr 1.5fr 1.5fr;
    gap: 30px;
    border-bottom: 1px solid #2a3742;
    padding-bottom: 40px;
    margin-bottom: 20px;
}

.footer-col h4 {
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 20px;
    letter-spacing: 0.5px;
}

.footer-col p {
    color: #9ca3af;
    line-height: 1.8;
    margin-bottom: 10px;
}

.footer-col ul li {
    margin-bottom: 8px;
}

.footer-col ul li a {
    color: #9ca3af;
    transition: var(--transition);
}

.footer-col ul li a:hover {
    color: #fff;
}

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

.footer-logo-img {
    height: 30px;
    width: auto;
    display: block;
}

.footer-brand-text {
    color: #fff;
    font-weight: bold;
    font-size: 20px;
    white-space: nowrap;
}

.social-links {
    display: flex;
    gap: 12px;
}

.social-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(33, 86, 169, 0.25);
    border-radius: 50%;
    color: #fff;
    transition: var(--transition);
    box-shadow: 0 0 10px rgba(33, 86, 169, 0.3);
}

.social-links a:hover {
    background: var(--color-primary);
    color: #fff;
    box-shadow: 0 0 18px rgba(33, 86, 169, 0.6);
    transform: translateY(-2px);
}

.contact-list i {
    width: 18px;
    text-align: center;
    margin-right: 6px;
}

.copyright {
    text-align: center;
    color: #6b7280;
    font-size: 13px;
    padding-top: 10px;
}

/* ===== WHATSAPP ===== */
.whatsapp-float {
    position: fixed;
    width: 90px;
    height: 90px;
    bottom: 40px;
    right: 40px;
    background-color: #25d366;
    color: #fff;
    border-radius: 50%;
    text-align: center;
    font-size: 48px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s ease;
}

.whatsapp-float:hover {
    transform: scale(1.05);
    background-color: #20b858;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

/* ===== GLOBAL REACH FLOAT ===== */
.global-float {
    position: fixed;
    width: 90px;
    height: 90px;
    bottom: 150px;
    right: 40px;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s ease;
    overflow: hidden;
    background: #fff;
}

.global-float img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.global-float:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1200px) {
    .industries-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .hero-title {
        font-size: 46px;
    }
}

@media (max-width: 992px) {
    .hamburger-toggle {
        display: flex;
    }

    .nav-links {
        display: none;
        flex-direction: column;
        width: 100%;
        background: #fff;
        padding: 20px 0;
        gap: 12px;
        border-top: 1px solid var(--color-border);
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 200;
        box-shadow: var(--shadow-md);
    }

    .nav-links.is-open {
        display: flex;
    }

    .nav-dropdown .dropdown-menu {
        position: static;
        box-shadow: none;
        border: none;
        padding-left: 20px;
    }

    .header-inner {
        position: relative;
        flex-wrap: wrap;
    }

    .hero-section {
        min-height: auto;
    }

    .hero-content {
        padding: 80px 0 60px;
    }

    .hero-features {
        grid-template-columns: repeat(2, 1fr);
    }

    .process-steps {
        flex-wrap: wrap;
    }

    .step-card {
        flex: 0 0 calc(50% - 10px);
    }

    .step-connector {
        display: none;
    }

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

    .about-stats {
        grid-template-columns: repeat(2, 1fr);
    }

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

    .industry-top {
        flex-direction: column;
    }

    .industry-left,
    .industry-right {
        width: 100%;
    }

    .industry-main-img {
        height: 260px;
    }

    .industry-quote-grid {
        grid-template-columns: 1fr;
    }

    .service-overview-grid,
    .service-overview-grid--reverse,
    .capability-grid,
    .design-process-grid {
        grid-template-columns: 1fr;
    }

    .service-cta-box {
        flex-direction: column;
        align-items: flex-start;
    }

    .industry-img-container {
        grid-template-columns: repeat(2, 1fr);
    }

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

@media (max-width: 768px) {
    .service-hero {
        min-height: auto;
        padding: 90px 0 60px;
    }

    .service-hero-content h1 {
        font-size: 36px;
    }

    .service-hero-content h3 {
        font-size: 17px;
    }

    .service-overview-content h2,
    .service-cta-box h2 {
        font-size: 28px;
    }

    .service-points,
    .advantage-list {
        grid-template-columns: 1fr;
    }

    .service-overview-image img {
        min-height: 260px;
    }

    .hero-title {
        font-size: 34px;
    }

    .hero-description {
        font-size: 14px;
    }

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

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

    .step-card {
        flex: 1 1 100%;
    }

    .about-hero-content h1 {
        font-size: 34px;
    }

    .about-hero-content h3 {
        font-size: 17px;
    }

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

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

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

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

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

    .stat-item {
        border-right: none;
        gap: 10px;
    }

    .stat-text h3 {
        font-size: 20px;
    }

    .stat-text span {
        font-size: 12px;
    }

    .industry-card {
        padding: 15px;
    }

    .industry-main-img {
        height: 200px;
    }

    .industry-thumbnails img {
        width: 65px;
        height: 65px;
    }

    .quote-row {
        grid-template-columns: 1fr;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .footer-brand {
        justify-content: center;
    }

    .social-links {
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .container,
    .container-wide {
        padding-left: 20px;
        padding-right: 20px;
    }
}

@media (max-width: 576px) {
    .container,
    .container-wide {
        padding-left: 12px;
        padding-right: 12px;
    }

    .hero-title {
        font-size: 28px;
    }

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

    .about-hero-content h1 {
        font-size: 28px;
    }

    .about-img {
        height: 280px;
    }

    .industry-main-img {
        height: 180px;
    }

    .industry-thumbnails img {
        width: 55px;
        height: 55px;
    }

    .industry-img-container {
        grid-template-columns: 1fr;
    }

    .partner-logo {
        width: 100px;
        height: 50px;
    }

    .whatsapp-float {
        width: 52px;
        height: 52px;
        font-size: 26px;
        right: 15px;
        bottom: 15px;
    }

    .global-float {
        width: 52px;
        height: 52px;
        right: 15px;
        bottom: 83px;
    }
}

/* ===== MATERIAL PAGES (generic - shared across all material pages) ===== */
.md-hero { padding: 120px 0 50px; background: linear-gradient(to right, rgba(8,27,51,0.92), rgba(8,27,51,0.65)), url('../img/equipment-showcase.webp') center / cover; color: #fff; }
.md-hero .container { display: flex; align-items: center; gap: 40px; }
.md-hero-img { flex: 0 0 180px; }
.md-hero-img img { width: 100%; border-radius: 8px; background: #fff; }
.md-hero-text h1 { font-size: 38px; font-weight: 900; margin-bottom: 8px; }
.md-hero-text .md-tag { font-size: 13px; font-weight: 600; color: #93b4e8; margin-bottom: 10px; display: block; }
.md-hero-text p { font-size: 15px; color: #d1d5db; max-width: 600px; line-height: 1.6; }
.md-hero-text { display: flex; gap: 30px; align-items: flex-start; }
.md-hero-left { flex: 1; }
.md-hero-right { flex: 0 0 420px; border-left: 1px solid rgba(255,255,255,0.15); padding-left: 30px; }
.md-hero-right p { font-size: 17px; color: #b0c4de; line-height: 1.8; margin: 0; }
.md-breadcrumb {
    padding: 12px 0;
    background: #f5f7fa;
    border-bottom: 1px solid #e5e7eb;
}
.md-breadcrumb a {
    color: var(--color-primary);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
}
.md-breadcrumb a:hover {
    text-decoration: underline;
}
.md-breadcrumb span {
    color: #999;
    font-size: 13px;
    margin: 0 6px;
}
.md-breadcrumb span:last-child {
    color: #555;
    font-weight: 600;
}
.md-section { padding: 30px 0; }
.md-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.md-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.md-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.md-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 24px; }
.md-card h3 { font-size: 16px; font-weight: 700; color: #0b1f3b; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 2px solid #eef3fc; }
.md-card table { width: 100%; border-collapse: collapse; font-size: 14px; }
.md-card td { padding: 8px 0; border-bottom: 1px solid #f3f4f6; }
.md-card td:last-child { text-align: right; font-weight: 600; color: #1a56db; }
.md-prop-bar { height: 8px; background: #eef3fc; border-radius: 4px; margin: 6px 0 10px; overflow: hidden; }
.md-prop-bar span { display: block; height: 100%; border-radius: 4px; background: #1a56db; }
.md-app-item { text-align: center; padding: 20px 16px; background: #f8fafc; border-radius: 8px; }
.md-app-icon { font-size: 32px; color: #1a56db; margin-bottom: 10px; display: block; }
.md-app-item h4 { font-size: 14px; font-weight: 700; margin-bottom: 4px; }
.md-app-item p { font-size: 13px; color: #666; }
.md-param-row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #f3f4f6; font-size: 14px; }
.md-param-row .label { color: #666; }
.md-param-row .value { font-weight: 600; color: #0b1f3b; }

.mat-nav-wrap { background: #f0f4fa; border-bottom: 1px solid #e0e7ef; padding: 10px 0; }
.mat-nav-wrap .container { overflow-x: auto; }
.mat-nav { display: flex; gap: 4px; white-space: nowrap; padding: 2px 0; }
.mat-nav a { display: inline-block; padding: 5px 12px; font-size: 13px; font-weight: 600; color: #4a5568; background: #fff; border: 1px solid #e2e8f0; border-radius: 6px; text-decoration: none; transition: 0.2s; }
.mat-nav a:hover { border-color: #1a56db; color: #1a56db; }
.mat-nav a.active { background: #1a56db; color: #fff; border-color: #1a56db; }

/* ===== MATERIAL DETAILS (Applications / Properties / PDF Download) ===== */
.md-quick-nav {
    display: flex;
    gap: 12px;
    padding: 16px 20px;
    max-width: var(--container);
    margin: 0 auto;
}
.md-quick-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    transition: all 0.2s;
    text-decoration: none;
}
.md-quick-link:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    box-shadow: 0 4px 12px rgba(33, 86, 169, 0.1);
    transform: translateY(-2px);
}
.md-quick-link i {
    color: var(--color-primary);
    font-size: 16px;
}

.md-section-heading {
    font-size: 22px;
    font-weight: 700;
    color: #0b1f3b;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 3px solid var(--color-primary);
    display: flex;
    align-items: center;
    gap: 10px;
}
.md-section-heading i {
    color: var(--color-primary);
    font-size: 20px;
}

.md-desc-text {
    font-size: 15px;
    line-height: 1.8;
    color: #444;
    max-width: 900px;
}
.md-desc-text p {
    margin-bottom: 12px;
}

.md-props-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
}
.md-props-table thead th {
    background: #f0f4fa;
    padding: 12px 16px;
    text-align: left;
    font-weight: 700;
    font-size: 13px;
    color: #0b1f3b;
    border-bottom: 2px solid #dce4f0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.md-props-table thead th:last-child {
    text-align: right;
    width: 180px;
}
.md-props-table tbody td {
    padding: 10px 16px;
    border-bottom: 1px solid #f0f2f5;
    color: #444;
}
.md-props-table tbody td:last-child {
    text-align: right;
    font-weight: 600;
    color: #1a56db;
}
.md-props-table tbody tr:nth-child(even) {
    background: #fafbfc;
}
.md-props-table tbody tr:hover {
    background: #eef3fc;
}
.md-props-table tbody tr:last-child td {
    border-bottom: none;
}

.md-props-group {
    margin-bottom: 30px;
}
.md-props-group:last-child {
    margin-bottom: 0;
}
.md-props-group-title {
    font-size: 15px;
    font-weight: 700;
    color: #0b1f3b;
    padding: 10px 16px;
    background: #f5f8fe;
    border-left: 3px solid var(--color-primary);
    margin-bottom: 0;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.md-download-card {
    background: #f8fafc;
    border: 2px dashed #dce4f0;
    border-radius: 12px;
    padding: 24px;
    text-align: center;
    transition: border-color 0.3s;
}
.md-download-card:hover {
    border-color: var(--color-primary);
}
.md-download-card i {
    font-size: 32px;
    color: var(--color-primary);
    margin-bottom: 10px;
    display: block;
}
.md-download-card h3 {
    font-size: 15px;
    font-weight: 700;
    color: #0b1f3b;
    margin-bottom: 6px;
}
.md-download-card p {
    font-size: 13px;
    color: #666;
    margin-bottom: 12px;
}
.md-download-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 20px;
    background: var(--color-primary);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    border-radius: 6px;
    transition: all 0.3s;
    text-decoration: none;
}
.md-download-btn:hover {
    background: var(--color-primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(33, 86, 169, 0.3);
}

@media (max-width: 768px) {
    .md-hero { padding: 90px 0 30px; }
    .md-hero .container { flex-direction: column; text-align: center; }
    .md-hero-img { flex: none; width: 120px; margin: 0 auto; }
    .md-hero-text { flex-direction: column; gap: 16px; }
    .md-hero-right { flex: none; width: 100%; border-left: none; padding-left: 0; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.15); }
    .md-hero-text h1 { font-size: 26px; }
    .md-hero-right p { font-size: 14px; }
    .md-grid-2, .md-grid-3, .md-grid-4 { grid-template-columns: 1fr; }
    .md-quick-nav { flex-wrap: wrap; gap: 8px; }
    .md-quick-link { padding: 6px 12px; font-size: 12px; }
    .mat-nav-wrap .container { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .md-props-table { font-size: 12px; }
    .md-props-table thead th:last-child { width: auto; }
    .md-props-table tbody td { padding: 8px 10px; }
    .md-section-heading { font-size: 18px; }
    .md-app-item { padding: 16px; }
}

/* ===== BREADCRUMB ===== */
.breadcrumb {
    padding: 95px 0 8px;
    background: transparent;
    font-size: 13px;
    margin-bottom: -42px;
    position: relative;
    z-index: 1;
}
.breadcrumb a {
    color: rgba(255,255,255,0.9);
    text-decoration: none;
}
.breadcrumb a:hover {
    text-decoration: underline;
    color: #fff;
}
.breadcrumb span {
    color: rgba(255,255,255,0.4);
    margin: 0 6px;
}
.breadcrumb .current {
    color: rgba(255,255,255,0.7);
    font-weight: 500;
}

/* ===== WHY CHOOSE US ===== */
.why-choose-section {
    padding: 60px 0;
    background: #fff;
}
.why-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 40px;
}
.why-card {
    text-align: center;
    padding: 32px 20px;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    transition: var(--transition);
}
.why-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(33, 86, 169, 0.1);
    border-color: var(--color-primary);
}
.why-card i {
    font-size: 40px;
    color: var(--color-primary);
    margin-bottom: 16px;
    display: block;
}
.why-card h4 {
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 8px;
}
.why-card p {
    font-size: 14px;
    color: #4b5563;
    line-height: 1.6;
}
.why-badge-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 30px;
}
.why-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--color-primary);
    color: #fff;
    padding: 8px 18px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
}
.why-badge i {
    font-size: 14px;
}

/* ===== NEWS & INSIGHTS ===== */
.news-section {
    padding: 60px 0;
    background: #f8fafc;
}
.news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 40px;
}
.news-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    transition: var(--transition);
}
.news-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(33, 86, 169, 0.08);
}
.news-card-img {
    height: 200px;
    background-size: cover;
    background-position: center;
    position: relative;
}
.news-card-tag {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--color-primary);
    color: #fff;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}
.news-card-body {
    padding: 20px;
}
.news-card-body .news-date {
    font-size: 12px;
    color: #9ca3af;
    display: block;
    margin-bottom: 8px;
}
.news-card-body h4 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 8px;
    line-height: 1.4;
}
.news-card-body p {
    font-size: 14px;
    color: #6b7280;
    line-height: 1.6;
}
.news-card-body a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-primary);
    font-weight: 600;
    font-size: 14px;
    margin-top: 12px;
}
.news-card-body a:hover {
    gap: 10px;
}

/* ===== OUR TEAM ===== */
.team-section {
    padding: 60px 0;
    background: #fff;
}
.team-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 40px;
}
.team-card {
    text-align: center;
    padding: 24px 16px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    transition: var(--transition);
}
.team-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(33, 86, 169, 0.08);
}
.team-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: #e2e8f0;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    color: var(--color-primary);
    overflow: hidden;
}
.team-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.team-card h4 {
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 4px;
}
.team-card .team-role {
    font-size: 13px;
    color: var(--color-primary);
    font-weight: 600;
    display: block;
    margin-bottom: 8px;
}
.team-card p {
    font-size: 13px;
    color: #6b7280;
    line-height: 1.5;
}

/* ===== TESTIMONIALS ===== */
.testimonials-section {
    padding: 60px 0;
    background: linear-gradient(135deg, #f0f5ff 0%, #f8fafc 100%);
}
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 40px;
}
.testimonial-card {
    background: #fff;
    padding: 28px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 4px 15px rgba(0,0,0,0.04);
    position: relative;
}
.testimonial-card::before {
    content: '"';
    position: absolute;
    top: 12px;
    right: 20px;
    font-size: 60px;
    color: var(--color-primary);
    opacity: 0.12;
    font-family: Georgia, serif;
    line-height: 1;
}
.testimonial-stars {
    color: #f59e0b;
    font-size: 14px;
    margin-bottom: 12px;
}
.testimonial-card p {
    font-size: 14px;
    color: #4b5563;
    line-height: 1.7;
    margin-bottom: 16px;
    font-style: italic;
}
.testimonial-author {
    display: flex;
    align-items: center;
    gap: 12px;
}
.testimonial-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    flex-shrink: 0;
}
.testimonial-author-info strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
}
.testimonial-author-info span {
    font-size: 12px;
    color: #6b7280;
}

/* ===== FAQ ACCORDION ===== */
.faq-section {
    padding: 60px 0;
    background: #fff;
}
.faq-list {
    max-width: 800px;
    margin: 40px auto 0;
}
.faq-item {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    margin-bottom: 12px;
    overflow: hidden;
}
.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    cursor: pointer;
    background: #f8fafc;
    font-weight: 600;
    font-size: 15px;
    transition: var(--transition);
    user-select: none;
}
.faq-question:hover {
    background: #eef2f7;
}
.faq-question i {
    font-size: 14px;
    transition: transform 0.3s ease;
    color: var(--color-primary);
}
.faq-item.is-open .faq-question i {
    transform: rotate(180deg);
}
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, padding 0.35s ease;
    padding: 0 22px;
    background: #fff;
}
.faq-item.is-open .faq-answer {
    max-height: 300px;
    padding: 0 22px 18px;
}
.faq-answer p {
    font-size: 14px;
    color: #4b5563;
    line-height: 1.7;
    margin: 0;
}

/* ===== QUALIFICATION CENTER ===== */
.qc-hero {
    padding: 120px 0 60px;
    background: linear-gradient(135deg, #0b1f3d 0%, #1a3a6b 100%);
    color: #fff;
    text-align: center;
}
.qc-hero h1 {
    font-size: 42px;
    font-weight: 900;
    margin-bottom: 12px;
}
.qc-hero p {
    font-size: 16px;
    color: #bfdbfe;
    max-width: 650px;
    margin: 0 auto;
}
.qc-section {
    padding: 60px 0;
}
.qc-section:nth-child(even) {
    background: #f8fafc;
}
.qc-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}
.qc-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.qc-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.qc-cert-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    transition: var(--transition);
    cursor: pointer;
}
.qc-cert-card:hover {
    transform: scale(1.04);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}
.qc-cert-card i {
    font-size: 48px;
    color: var(--color-primary);
    margin-bottom: 12px;
    display: block;
}
.qc-cert-card h4 {
    font-size: 15px;
    font-weight: 700;
}
.qc-cert-card p {
    font-size: 13px;
    color: #6b7280;
}
.qc-equip-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    font-size: 14px;
}
.qc-equip-table th {
    background: var(--color-primary);
    color: #fff;
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
}
.qc-equip-table td {
    padding: 10px 16px;
    border-bottom: 1px solid #e5e7eb;
}
.qc-equip-table tr:nth-child(even) td {
    background: #f8fafc;
}
.qc-equip-table tr:hover td {
    background: #eef2f7;
}

/* ===== RESPONSIVE FOR NEW SECTIONS ===== */
@media (max-width: 992px) {
    .why-grid,
    .team-grid,
    .testimonials-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .news-grid,
    .qc-grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
    .qc-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
    .qc-grid-2 {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 768px) {
    .why-grid,
    .news-grid,
    .team-grid,
    .testimonials-grid,
    .qc-grid-3,
    .qc-grid-4 {
        grid-template-columns: 1fr;
    }
    .qc-hero h1 {
        font-size: 30px;
    }
}
@media (max-width: 576px) {
    .why-card {
        padding: 24px 16px;
    }
}


/* ================================================================
   PAGE-SPECIFIC STYLES (extracted from inline <style> blocks)
   ================================================================ */


/* --- ai-hardware-cases.html --- */

        .ce-header{background:#0b1f3b;color:#fff;padding:70px 0 60px;text-align:center}
        .ce-header h1{font-size:40px;font-weight:700;margin-bottom:12px}
        .ce-header h1 span{color:#f0c040;font-weight:900}
        .ce-header p{font-size:18px;color:#b0c4de;margin-top:6px}

        .ce-stats{display:flex;justify-content:center;gap:40px;max-width:1100px;margin:0 auto;padding:0 0 10px}
        .ce-stat-item{display:flex;flex-direction:column;align-items:center;text-align:center;flex:1}
        .ce-stat-item i{font-size:34px;color:#1a56db;margin-bottom:6px}
        .ce-stat-item h4{font-size:18px;font-weight:700;color:#0b1f3b}
        .ce-stat-item p{font-size:13px;color:#666;margin-top:4px;max-width:200px}

        .ce-card{background:#f0f6ff;border-radius:14px;padding:20px 28px 14px;margin-bottom:20px;box-shadow:0 2px 8px rgba(0,0,0,0.04);border:1px solid #e5e7eb;display:flex;gap:24px;transition:var(--transition)}
        .ce-card:hover{box-shadow:0 8px 25px rgba(0,0,0,0.08);border-color:var(--color-primary)}

        .ce-card-left{flex:0 0 500px;border-right:1px solid #eef0f2;padding-right:24px}
        .ce-card-left .num{font-size:26px;font-weight:900;color:#1a56db;line-height:1}
        .ce-card-left .num small{font-size:13px;font-weight:400;color:#999}
        .ce-card-left h3{font-size:17px;font-weight:700;margin:6px 0 8px;color:#0b1f3b}
        .ce-card-left .sub{font-size:13px;color:#1a56db;font-weight:600;margin-bottom:4px}
        .ce-card-left .desc{font-size:13px;color:#555;line-height:1.5}

        .ce-card-mid{flex:1;display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px}
        .ce-card-mid .item{text-align:center;border-right:1px solid #f0f0f0;padding:0 14px}
        .ce-card-mid .item:last-child{border-right:0}
        .ce-card-mid .img-box{height:100px;display:flex;align-items:center;justify-content:center;margin-bottom:8px}
        .ce-card-mid .img-box img{max-height:100%;max-width:100%;object-fit:contain}
        .ce-card-mid .item h5{font-size:15px;font-weight:700;color:#0b1f3b;margin-bottom:6px}
        .ce-card-mid .item ul{list-style:none;padding:0;text-align:left}
        .ce-card-mid .item ul li{font-size:13px;color:#555;margin-bottom:4px;display:flex;align-items:baseline;gap:4px}
        .ce-card-mid .item ul li i{color:#1a56db;font-size:10px}

        .ce-card-right{flex:0 0 200px;border-left:1px solid #eef0f2;padding-left:24px}
        .ce-card-right h5{font-size:15px;font-weight:700;color:#0b1f3b;margin-bottom:12px;text-align:center}
        .ce-card-right .res-item{display:flex;align-items:center;gap:10px;margin-bottom:12px;font-size:15px;color:#333}
        .ce-card-right .res-item i{color:#1a56db;font-size:20px;width:28px;text-align:center}
        .ce-card-right .res-item .val{font-weight:700;color:#1a56db;font-size:18px}

        .ce-bottom{padding:30px 0;background:#fff}
        .ce-bottom-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:40px}
        .ce-col h4{font-size:17px;font-weight:700;color:#0b1f3b;margin-bottom:14px}
        .ce-col ul{list-style:none}
        .ce-col ul li{font-size:14px;color:#555;margin-bottom:8px;display:flex;align-items:center;gap:8px}
        .ce-col ul li i{color:#1a56db;font-size:16px}
        .ce-icon-box{display:flex;gap:24px;flex-wrap:wrap}
        .ce-icon-box .ic{display:flex;flex-direction:column;align-items:center;text-align:center;width:90px}
        .ce-icon-box .ic i{font-size:32px;color:#1a56db;margin-bottom:8px}
        .ce-icon-box .ic span{font-size:13px;color:#333;font-weight:600}
        .ce-cta{background:#0b1f3b;color:#fff;border-radius:10px;padding:28px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}
        .ce-cta h4{font-size:18px;font-weight:700;margin-bottom:8px;color:#fff}
        .ce-cta p{font-size:14px;color:#b0c4de}

        @media(max-width:1024px){
            .ce-stats{flex-wrap:wrap}.ce-stat-item{flex:0 0 30%}.ce-card{flex-direction:column}
            .ce-card-left{border-right:0;border-bottom:1px solid #eef0f2;padding-bottom:18px;flex:auto}
            .ce-card-right{border-left:0;border-top:1px solid #eef0f2;padding-top:18px;padding-left:0;flex:auto;display:flex;flex-wrap:wrap;gap:15px;justify-content:center}
            .ce-card-right .res-item{margin-bottom:0}
            .ce-bottom-grid{grid-template-columns:1fr 1fr}
            .ce-card-mid{grid-template-columns:1fr 1fr}
            .ce-card-mid .item:last-child{border-right:1px solid #f0f0f0}
        }
        @media(max-width:768px){
            .ce-header{padding:50px 0 40px}
            .ce-header h1{font-size:26px}
            .ce-header p{font-size:15px}
            .ce-stats{gap:20px}
            .ce-stat-item{flex:0 0 45%}
            .ce-card{padding:16px 16px 12px;gap:16px}
            .ce-card-left{flex-direction:column;padding-right:0;flex:auto}
            .ce-card-img{width:100%;max-width:200px;align-self:center}
            .ce-card-img .img-placeholder{max-height:220px;aspect-ratio:3/4}
            .ce-card-mid{grid-template-columns:1fr}.ce-card-mid .item{border-right:0!important;border-bottom:1px solid #f0f0f0;padding:12px 0}
            .ce-card-mid .item:last-child{border-bottom:0}.ce-bottom-grid{grid-template-columns:1fr}
            .ce-card-right{flex-direction:column;align-items:center;flex:auto;border-left:0;border-top:1px solid #eef0f2;padding-top:14px;padding-left:0}
            .ce-card-right .res-item{font-size:14px;width:100%;justify-content:flex-start}
            .home-cta h2{font-size:24px}
            .home-cta p{font-size:14px}
        }
    
        .ce-card-left {
            display: flex;
            flex-direction: row;
            gap: 16px;
            align-items: stretch;
        }
        .ce-card-text {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .ce-card-img {
            width: 220px;
            flex-shrink: 0;
            display: flex;
            flex-direction: column;
            align-self: stretch;
        }
        .ce-card-img .img-placeholder {
            width: 100%;
            aspect-ratio: 9 / 16;
            max-height: 320px;
            background: #fff;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #ccc;
            font-size: 14px;
            border: 1px dashed #ddd;
            overflow: hidden;
        }

    

/* --- case-studies.html --- */

        .cases-hero {
            height: 550px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 100px 0 60px;
            background: linear-gradient(to right, rgba(8,27,51,0.95), rgba(8,27,51,0.7)), url('../img/factory.webp') center / cover;
        }

        .cases-hero .container {
            text-align: center;
        }

        .cases-hero h1 {
            font-size: 64px;
            font-weight: 900;
            color: #fff;
            margin-bottom: 24px;
            line-height: 1.15;
            letter-spacing: 1px;
            animation: heroFadeUp 0.8s ease both;
        }

        .cases-hero p {
            font-size: 20px;
            color: #d1d5db;
            max-width: 700px;
            line-height: 1.7;
            margin: 0 auto;
            animation: heroFadeUp 0.8s 0.2s ease both;
        }

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

        .case-card {
            display: flex;
            gap: 30px;
            background: #fff;
            border: 1px solid #e5e7eb;
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 30px;
            transition: var(--transition);
        }

        .case-card:hover {
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
            border-color: var(--color-primary);
        }

        .case-card-img {
            flex: 0 0 35%;
            background: #f0f0f0;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 220px;
            overflow: hidden;
        }

        .case-card-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .case-content {
            flex: 1;
            padding: 5px 0;
        }

        .case-tag {
            color: var(--color-primary);
            font-weight: 700;
            font-size: 13px;
            text-transform: uppercase;
        }

        .case-title {
            font-size: 22px;
            font-weight: 700;
            margin: 4px 0;
            color: #1e1e1e;
        }

        .case-subtitle {
            font-size: 15px;
            color: #555;
            margin-bottom: 20px;
        }

        .case-grid {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 15px;
        }

        .case-col {
            padding-right: 15px;
            border-right: 1px solid #e5e7eb;
        }

        .case-col:last-child {
            border-right: 0;
        }

        .case-col-head {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 12px;
        }

        .case-col-head .ic {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            color: #fff;
            flex-shrink: 0;
        }

        .case-view-btn {
            display: inline-block;
            margin-top: 20px;
            padding: 10px 24px;
            background: var(--color-primary);
            color: #fff;
            border-radius: 6px;
            font-size: 14px;
            font-weight: 600;
            text-decoration: none;
            transition: var(--transition);
        }

        .case-view-btn:hover {
            background: var(--color-secondary);
        }

        .ic-red {
            background: #fde8e8;
            color: #d92626 !important;
        }

        .ic-blue {
            background: #e6f0fa;
            color: var(--color-primary) !important;
        }

        .ic-green {
            background: #e6f7e6;
            color: #16a34a !important;
        }

        .case-col-head h4 {
            font-size: 16px;
            font-weight: 700;
            color: #1e1e1e;
        }

        .case-col ul {
            list-style: none;
        }

        .case-col ul li {
            font-size: 14px;
            color: #444;
            margin-bottom: 5px;
            display: flex;
            align-items: baseline;
            gap: 4px;
        }

        .case-col ul li i {
            font-size: 10px;
            color: var(--color-primary);
        }

        .case-col ul li b {
            color: #000;
        }

        .cases-cta {
            padding: 0 0 50px;
        }

        .cases-cta-box {
            background: #0a1a30;
            border-radius: 12px;
            padding: 30px 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: #fff;
        }

        .cases-cta-left {
            display: flex;
            align-items: center;
            gap: 20px;
        }

        .cases-cta-icon {
            font-size: 40px;
            border: 2px solid #fff;
            border-radius: 50%;
            width: 60px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            transform: rotate(-10deg);
        }

        .cases-cta-text h3 {
            font-size: 22px;
            font-weight: 700;
        }

        .cases-cta-text p {
            font-size: 14px;
            color: #b0bed0;
        }

        @media (max-width: 768px) {
            .cases-hero {
                height: 430px;
                padding: 20px;
            }
            .cases-hero h1 {
                font-size: 28px;
            }
            .case-card {
                flex-direction: column;
            }
            .case-card-img {
                height: 180px;
            }
            .case-grid {
                grid-template-columns: 1fr;
            }
            .case-col {
                border-right: 0;
                border-bottom: 1px solid #e5e7eb;
                padding-bottom: 10px;
                margin-bottom: 10px;
            }
            .cases-cta-box {
                flex-direction: column;
                text-align: center;
                gap: 15px;
            }
            .cases-cta-left {
                flex-direction: column;
            }
        }
    

/* --- consumer-electronics-cases.html --- */

        .ce-header{background:#0b1f3b;color:#fff;padding:70px 0 60px;text-align:center}
        .ce-header h1{font-size:40px;font-weight:700;margin-bottom:12px}
        .ce-header h1 span{color:#f0c040;font-weight:900}
        .ce-header p{font-size:18px;color:#b0c4de;margin-top:6px}

        .ce-stats{display:flex;justify-content:center;gap:40px;max-width:1100px;margin:0 auto;padding:0 0 10px}
        .ce-stat-item{display:flex;flex-direction:column;align-items:center;text-align:center;flex:1}
        .ce-stat-item i{font-size:34px;color:#1a56db;margin-bottom:6px}
        .ce-stat-item h4{font-size:18px;font-weight:700;color:#0b1f3b}
        .ce-stat-item p{font-size:13px;color:#666;margin-top:4px;max-width:200px}

        .ce-card{background:#f0f6ff;border-radius:14px;padding:20px 28px 14px;margin-bottom:20px;box-shadow:0 2px 8px rgba(0,0,0,0.04);border:1px solid #e5e7eb;display:flex;gap:24px;transition:var(--transition)}
        .ce-card:hover{box-shadow:0 8px 25px rgba(0,0,0,0.08);border-color:var(--color-primary)}

        .ce-card-left{flex:0 0 500px;border-right:1px solid #eef0f2;padding-right:24px}
        .ce-card-left .num{font-size:26px;font-weight:900;color:#1a56db;line-height:1}
        .ce-card-left .num small{font-size:13px;font-weight:400;color:#999}
        .ce-card-left h3{font-size:17px;font-weight:700;margin:6px 0 8px;color:#0b1f3b}
        .ce-card-left .sub{font-size:13px;color:#1a56db;font-weight:600;margin-bottom:4px}
        .ce-card-left .desc{font-size:13px;color:#555;line-height:1.5}

        .ce-card-mid{flex:1;display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px}
        .ce-card-mid .item{text-align:center;border-right:1px solid #f0f0f0;padding:0 14px}
        .ce-card-mid .item:last-child{border-right:0}
        .ce-card-mid .img-box{height:100px;display:flex;align-items:center;justify-content:center;margin-bottom:8px}
        .ce-card-mid .img-box img{max-height:100%;max-width:100%;object-fit:contain}
        .ce-card-mid .item h5{font-size:15px;font-weight:700;color:#0b1f3b;margin-bottom:6px}
        .ce-card-mid .item ul{list-style:none;padding:0;text-align:left}
        .ce-card-mid .item ul li{font-size:13px;color:#555;margin-bottom:4px;display:flex;align-items:baseline;gap:4px}
        .ce-card-mid .item ul li i{color:#1a56db;font-size:10px}

        .ce-card-right{flex:0 0 200px;border-left:1px solid #eef0f2;padding-left:24px}
        .ce-card-right h5{font-size:15px;font-weight:700;color:#0b1f3b;margin-bottom:12px;text-align:center}
        .ce-card-right .res-item{display:flex;align-items:center;gap:10px;margin-bottom:12px;font-size:15px;color:#333}
        .ce-card-right .res-item i{color:#1a56db;font-size:20px;width:28px;text-align:center}
        .ce-card-right .res-item .val{font-weight:700;color:#1a56db;font-size:18px}

        .ce-bottom{padding:30px 0;background:#fff}
        .ce-bottom-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:40px}
        .ce-col h4{font-size:17px;font-weight:700;color:#0b1f3b;margin-bottom:14px}
        .ce-col ul{list-style:none}
        .ce-col ul li{font-size:14px;color:#555;margin-bottom:8px;display:flex;align-items:center;gap:8px}
        .ce-col ul li i{color:#1a56db;font-size:16px}
        .ce-icon-box{display:flex;gap:24px;flex-wrap:wrap}
        .ce-icon-box .ic{display:flex;flex-direction:column;align-items:center;text-align:center;width:90px}
        .ce-icon-box .ic i{font-size:32px;color:#1a56db;margin-bottom:8px}
        .ce-icon-box .ic span{font-size:13px;color:#333;font-weight:600}
        .ce-cta{background:#0b1f3b;color:#fff;border-radius:10px;padding:28px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}
        .ce-cta h4{font-size:18px;font-weight:700;margin-bottom:8px;color:#fff}
        .ce-cta p{font-size:14px;color:#b0c4de}

        @media(max-width:1024px){
            .ce-stats{flex-wrap:wrap}.ce-stat-item{flex:0 0 30%}.ce-card{flex-direction:column}
            .ce-card-left{border-right:0;border-bottom:1px solid #eef0f2;padding-bottom:18px;flex:auto}
            .ce-card-right{border-left:0;border-top:1px solid #eef0f2;padding-top:18px;padding-left:0;flex:auto;display:flex;flex-wrap:wrap;gap:15px;justify-content:center}
            .ce-card-right .res-item{margin-bottom:0}
            .ce-bottom-grid{grid-template-columns:1fr 1fr}
            .ce-card-mid{grid-template-columns:1fr 1fr}
            .ce-card-mid .item:last-child{border-right:1px solid #f0f0f0}
        }
        @media(max-width:768px){
            .ce-header{padding:50px 0 40px}
            .ce-header h1{font-size:26px}
            .ce-header p{font-size:15px}
            .ce-stats{gap:20px}
            .ce-stat-item{flex:0 0 45%}
            .ce-card{padding:16px 16px 12px;gap:16px}
            .ce-card-left{flex-direction:column;padding-right:0;flex:auto}
            .ce-card-img{width:100%;max-width:200px;align-self:center}
            .ce-card-img .img-placeholder{max-height:220px;aspect-ratio:3/4}
            .ce-card-mid{grid-template-columns:1fr}.ce-card-mid .item{border-right:0!important;border-bottom:1px solid #f0f0f0;padding:12px 0}
            .ce-card-mid .item:last-child{border-bottom:0}.ce-bottom-grid{grid-template-columns:1fr}
            .ce-card-right{flex-direction:column;align-items:center;flex:auto;border-left:0;border-top:1px solid #eef0f2;padding-top:14px;padding-left:0}
            .ce-card-right .res-item{font-size:14px;width:100%;justify-content:flex-start}
            .home-cta h2{font-size:24px}
            .home-cta p{font-size:14px}
        }
    
        .ce-card-left {
            display: flex;
            flex-direction: row;
            gap: 16px;
            align-items: stretch;
        }
        .ce-card-text {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .ce-card-img {
            width: 220px;
            flex-shrink: 0;
            display: flex;
            flex-direction: column;
            align-self: stretch;
        }
        .ce-card-img .img-placeholder {
            width: 100%;
            aspect-ratio: 9 / 16;
            max-height: 320px;
            background: #fff;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #ccc;
            font-size: 14px;
            border: 1px dashed #ddd;
            overflow: hidden;
        }

    

/* --- get-quote.html --- */

        .quote-hero {
            position: relative;
            height: 400px;
            background: linear-gradient(to right, rgba(10, 26, 48, 0.92), rgba(10, 26, 48, 0.6)), url('../img/equipment-showcase.webp') center / cover;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 100px 0 60px;
        }

        .quote-hero-content {
            color: #fff;
            max-width: 700px;
            width: 100%;
            margin: 0 auto;
            padding: 0 15px;
            text-align: center;
        }

        .quote-hero-content h1 {
            font-size: 54px;
            font-weight: 900;
            margin-bottom: 20px;
            line-height: 1.15;
            letter-spacing: 1px;
            animation: heroFadeUp 0.8s ease both;
        }

        .quote-hero-content p {
            font-size: 20px;
            font-weight: 300;
            color: #d1d5db;
            max-width: 600px;
            line-height: 1.7;
            margin: 0 auto;
            animation: heroFadeUp 0.8s 0.2s ease both;
        }

        .quote-main {
            padding: 20px 0 60px;
        }

        .quote-main-grid {
            display: grid;
            grid-template-columns: 1fr 1.3fr;
            gap: 50px;
            align-items: start;
        }

        .quote-left-col h2 {
            font-size: 24px;
            font-weight: 700;
            margin-bottom: 20px;
            color: #1e1e1e;
        }

        .quote-left-col p {
            font-size: 15px;
            color: #555;
            line-height: 1.7;
            margin-bottom: 30px;
        }

        .quote-left-col .contact-info {
            margin-bottom: 30px;
        }

        .quote-left-col .contact-info li {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 12px;
            font-size: 15px;
            color: #333;
        }

        .quote-left-col .contact-info li i {
            width: 20px;
            color: var(--color-primary);
            font-size: 16px;
        }

        .right-col-title {
            font-size: 24px;
            font-weight: 700;
            margin-bottom: 25px;
            color: #1e1e1e;
        }

        .quote-form-wrap {
            background: #fff;
            border: 1px solid #e5e7eb;
            border-radius: 10px;
            padding: 30px;
            box-shadow: 0 4px 16px rgba(0,0,0,0.04);
        }

        .quote-form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
            margin-bottom: 15px;
        }

        .quote-form-group {
            display: flex;
            flex-direction: column;
        }

        .quote-form-group label {
            font-size: 13px;
            font-weight: 600;
            color: #333;
            margin-bottom: 5px;
        }
        .quote-form-group label span { color: #dc2626; }

        .quote-form-group input,
        .quote-form-group select,
        .quote-form-group textarea {
            padding: 10px 14px;
            border: 1px solid #d1d5db;
            border-radius: 6px;
            font-size: 14px;
            font-family: inherit;
            outline: none;
            transition: border 0.2s;
        }
        .quote-form-group input:focus,
        .quote-form-group select:focus,
        .quote-form-group textarea:focus {
            border-color: var(--color-primary);
        }
        .quote-form-group textarea {
            resize: vertical;
            min-height: 100px;
        }

        .quote-btn-submit {
            width: 100%;
            padding: 14px;
            background: var(--color-primary);
            color: #fff;
            font-size: 16px;
            font-weight: 700;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: background 0.2s;
            margin-top: 6px;
        }
        .quote-btn-submit:hover {
            background: #082d6b;
        }

        @media (max-width: 992px) {
            .quote-main-grid {
                grid-template-columns: 1fr;
                gap: 40px;
            }
        }

        @media (max-width: 768px) {
            .quote-hero { height: 330px; }
            .quote-hero-content h1 { font-size: 32px; }
            .quote-form-row { grid-template-columns: 1fr; }
        }
    

/* --- global-partnership.html --- */

        .partner-hero {
            position: relative;
            height: 550px;
            background: linear-gradient(to right, rgba(10, 26, 48, 0.92), rgba(10, 26, 48, 0.6)), url('../img/global-cooperation.webp') center / cover;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 100px 0 60px;
        }

        .partner-hero-content {
            color: #fff;
            max-width: 700px;
            width: 100%;
            margin: 0 auto;
            padding: 0 15px;
            text-align: center;
        }

        .partner-hero-content h1 {
            font-size: 64px;
            font-weight: 900;
            margin-bottom: 24px;
            line-height: 1.15;
            letter-spacing: 1px;
            animation: heroFadeUp 0.8s ease both;
        }

        .partner-hero-content p {
            font-size: 20px;
            font-weight: 300;
            color: #d1d5db;
            max-width: 700px;
            line-height: 1.7;
            margin: 0 auto;
            animation: heroFadeUp 0.8s 0.2s ease both;
        }

        .partner-features {
            padding-bottom: 40px;
        }

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

        .partner-feature-card {
            background: #fff;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            padding: 30px 20px;
            text-align: center;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
            transition: var(--transition);
        }

        .partner-feature-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(33, 86, 169, 0.1);
            border-color: var(--color-primary);
        }

        .partner-feature-icon {
            width: 60px;
            height: 60px;
            background-color: var(--color-primary);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 15px;
        }

        .partner-feature-icon i {
            font-size: 28px;
            color: #fff;
        }

        .partner-feature-card h3 {
            font-size: 17px;
            font-weight: 700;
            margin-bottom: 10px;
            color: #1e1e1e;
        }

        .partner-feature-card p {
            font-size: 14px;
            color: #666;
            line-height: 1.6;
        }

        .partner-main {
            padding: 20px 0 50px;
        }

        .partner-main-grid {
            display: grid;
            grid-template-columns: 1fr 1.2fr;
            gap: 50px;
            align-items: start;
        }

        .partner-left-col h2 {
            font-size: 24px;
            font-weight: 700;
            margin-bottom: 25px;
            color: #1e1e1e;
        }

        .partner-target-list {
            list-style: none;
            margin-bottom: 30px;
        }

        .partner-target-list li {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 14px;
            font-size: 15px;
            font-weight: 500;
            color: #333;
            border-bottom: 1px solid #f5f5f5;
            padding-bottom: 14px;
        }

        .partner-target-list li:last-child {
            border-bottom: none;
        }

        .partner-target-list li .partner-check-icon {
            flex-shrink: 0;
            width: 28px;
            height: 28px;
            background-color: var(--color-primary);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 14px;
        }

        .partner-map iframe {
            width: 100%;
            height: 280px;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        }

        .partner-right-col h2 {
            font-size: 24px;
            font-weight: 700;
            margin-bottom: 25px;
            color: #1e1e1e;
        }

        .partner-form-container {
            background: #fff;
            border-radius: 8px;
        }

        .partner-form-row {
            display: flex;
            gap: 20px;
            margin-bottom: 16px;
        }

        .partner-form-group {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 5px;
        }

        .partner-form-group label {
            font-size: 13px;
            font-weight: 700;
            color: #1e1e1e;
        }

        .partner-form-group label span {
            color: #d32f2f;
        }

        .partner-form-group input,
        .partner-form-group select,
        .partner-form-group textarea {
            width: 100%;
            padding: 12px 14px;
            border: 1px solid #e0e0e0;
            border-radius: 6px;
            font-size: 14px;
            background-color: #fff;
            color: #333;
            transition: 0.2s;
            font-family: inherit;
        }

        .partner-form-group input:focus,
        .partner-form-group select:focus,
        .partner-form-group textarea:focus {
            outline: none;
            border-color: var(--color-primary);
            box-shadow: 0 0 0 3px rgba(33, 86, 169, 0.1);
        }

        .partner-form-group input::placeholder,
        .partner-form-group textarea::placeholder {
            color: #aaa;
        }

        .partner-form-group select {
            appearance: none;
            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
            background-repeat: no-repeat;
            background-position: right 12px center;
            background-size: 14px;
            cursor: pointer;
        }

        .partner-form-group textarea {
            min-height: 90px;
            resize: vertical;
        }

        .partner-btn-submit {
            width: 100%;
            padding: 14px;
            background-color: var(--color-primary);
            color: #fff;
            border: none;
            border-radius: 6px;
            font-size: 16px;
            font-weight: 700;
            cursor: pointer;
            margin-top: 10px;
            transition: 0.3s;
        }

        .partner-btn-submit:hover {
            background-color: var(--color-primary-dark);
        }

        @media (max-width: 1024px) {
            .partner-features-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            .partner-main-grid {
                grid-template-columns: 1fr;
                gap: 40px;
            }
        }

        @media (max-width: 768px) {
            .partner-hero {
                height: 430px;
            }
            .partner-hero-content h1 {
                font-size: 28px;
            }
            .partner-features-grid {
                grid-template-columns: 1fr;
            }
            .partner-form-row {
                flex-direction: column;
                gap: 12px;
            }
        }
    

/* --- injection-molding.html --- */

        .im-hero {
            height: 550px;
            display: flex;
            flex-direction: column;
            padding: 100px 0 60px;
            background: linear-gradient(rgba(10, 30, 60, 0.9), rgba(10, 30, 60, 0.5)), url('../img/injection-machine-1.webp') center / cover;
        }

        .im-hero h1 {
            font-size: 48px;
            font-weight: 900;
            color: #fff;
            margin-bottom: 20px;
            line-height: 1.2;
            animation: heroFadeUp 0.8s ease both;
        }

        .im-hero p {
            font-size: 16px;
            color: #d1d5db;
            max-width: 600px;
            margin-bottom: 30px;
            line-height: 1.6;
            animation: heroFadeUp 0.8s 0.2s ease both;
        }

        .im-hero-btns {
            display: flex;
            gap: 16px;
            animation: heroFadeUp 0.8s 0.35s ease both;
        }

        .im-benefits {
            padding: 40px 0;
        }

        .im-benefit-grid {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            gap: 20px;
            text-align: center;
        }

        .im-benefit-item i {
            font-size: 28px;
            color: var(--color-primary);
            margin-bottom: 8px;
            display: block;
        }

        .im-benefit-item h4 {
            font-size: 14px;
            font-weight: 700;
            margin-bottom: 4px;
            color: #1e1e1e;
        }

        .im-benefit-item p {
            font-size: 12px;
            color: #666;
        }

        .im-section-header {
            text-align: center;
            margin-bottom: 30px;
        }

        .im-tag {
            color: var(--color-primary);
            font-weight: 700;
            font-size: 13px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            margin-bottom: 6px;
        }

        .im-tag::before {
            content: '';
            width: 16px;
            height: 3px;
            background: var(--color-primary);
        }

        .im-section-header h2 {
            font-size: 28px;
            font-weight: 700;
            color: #1e1e1e;
        }

        .im-section-header p {
            color: #666;
            margin-top: 6px;
        }

        .im-process {
            padding: 40px 0;
        }

        .im-process-steps {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            margin-top: 20px;
        }

        .im-step {
            background: #fff;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            overflow: hidden;
            position: relative;
            transition: var(--transition);
        }

        .im-step:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(33, 86, 169, 0.1);
            border-color: var(--color-primary);
        }

        .im-step img {
            width: 100%;
            height: 140px;
            object-fit: cover;
            background-color: #e2e8f0;
        }

        .im-step-content {
            padding: 15px;
            position: relative;
        }

        .im-step .im-num {
            position: absolute;
            top: -12px;
            left: 15px;
            width: 28px;
            height: 28px;
            background: var(--color-primary);
            color: #fff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: 700;
            border: 2px solid #fff;
        }

        .im-step h4 {
            font-size: 15px;
            font-weight: 700;
            margin-top: 8px;
            margin-bottom: 4px;
            color: #1e1e1e;
        }

        .im-step p {
            font-size: 13px;
            color: #666;
            line-height: 1.4;
        }

        .im-cap {
            padding: 40px 0 20px;
        }

        .im-cap-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
            margin-top: 20px;
        }

        .im-cap-img img {
            width: 100%;
            height: 300px;
            object-fit: cover;
            border-radius: 8px;
        }

        .im-cap-list {
            background: #fff;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            padding: 20px 30px;
        }

        .im-cap-row {
            display: flex;
            padding: 12px 0;
            border-bottom: 1px solid #e5e7eb;
            font-size: 14px;
        }

        .im-cap-row:last-child {
            border-bottom: 0;
        }

        .im-cap-row .im-label {
            width: 180px;
            font-weight: 700;
            color: #1e1e1e;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .im-cap-row .im-label i {
            color: var(--color-primary);
            font-size: 18px;
        }

        .im-cap-row .im-value {
            flex: 1;
            color: #555;
        }

        .im-ind {
            padding: 40px 0;
            background: #f8f9fa;
        }

        .im-ind-grid {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 16px;
            margin-top: 20px;
        }
        .im-ind-card {
            background: #fff;
            border-radius: 8px;
            overflow: hidden;
            border: 1px solid #e5e7eb;
            position: relative;
            transition: var(--transition);
            flex: 0 0 calc(16.666% - 14px);
            min-width: 140px;
        }

        .im-ind-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(33, 86, 169, 0.1);
            border-color: var(--color-primary);
        }

        .im-ind-card img {
            width: 100%;
            height: 120px;
            object-fit: cover;
        }

        .im-ind-overlay {
            padding: 12px 10px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .im-ind-overlay .im-ind-num {
            width: 24px;
            height: 24px;
            background: var(--color-primary);
            color: #fff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 11px;
            font-weight: 700;
            flex-shrink: 0;
        }

        .im-ind-overlay h4 {
            font-size: 13px;
            font-weight: 700;
            color: #1e1e1e;
        }

        .im-cta {
            padding: 0 0 40px;
        }

        .im-cta-box {
            background: #0a1a30;
            border-radius: 12px;
            padding: 30px 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: #fff;
        }

        .im-cta-text h3 {
            font-size: 22px;
            font-weight: 700;
            margin-bottom: 4px;
        }

        .im-cta-text p {
            font-size: 14px;
            color: #b0bed0;
        }

        .im-cta-btns {
            display: flex;
            gap: 15px;
        }

        @media (max-width: 1024px) {
            .im-benefit-grid {
                grid-template-columns: repeat(3, 1fr);
            }
            .im-process-steps {
                grid-template-columns: repeat(2, 1fr);
            }
            .im-cap-grid {
                grid-template-columns: 1fr;
            }
            .im-ind-grid {
                flex-direction: row;
            }
            .im-ind-card {
                flex: 0 0 calc(33.333% - 12px);
            }
        }

        @media (max-width: 768px) {
            .im-hero {
                height: 430px;
            }
            .im-hero h1 {
                font-size: 28px;
            }
            .im-benefit-grid {
                grid-template-columns: 1fr;
            }
            .im-process-steps {
                grid-template-columns: 1fr;
            }
            .im-ind-grid {
                flex-direction: column;
                align-items: center;
            }
            .im-ind-card {
                flex: 0 0 auto;
                width: 100%;
                max-width: 400px;
            }
            .im-cap-row {
                flex-direction: column;
                gap: 4px;
            }
            .im-cta-box {
                flex-direction: column;
                text-align: center;
                gap: 15px;
            }
            .im-cta-btns {
                flex-direction: column;
            }
        }
    

/* --- medical-devices-cases.html --- */

        .md-header{background:#0b1f3b;color:#fff;padding:70px 0 60px;text-align:center}
        .md-header h1{font-size:40px;font-weight:700;margin-bottom:12px}
        .md-header h1 span{color:#f0c040;font-weight:900}
        .md-header p{font-size:18px;color:#b0c4de;margin-top:6px}

        .md-stats{display:flex;justify-content:center;gap:40px;max-width:1100px;margin:0 auto;padding:0 0 10px}
        .md-stat-item{display:flex;flex-direction:column;align-items:center;text-align:center;flex:1}
        .md-stat-item i{font-size:34px;color:#1a56db;margin-bottom:6px}
        .md-stat-item h4{font-size:18px;font-weight:700;color:#0b1f3b}
        .md-stat-item p{font-size:13px;color:#666;margin-top:4px;max-width:200px}

        .md-card{background:#f0f6ff;border-radius:14px;padding:20px 28px 14px;margin-bottom:20px;box-shadow:0 2px 8px rgba(0,0,0,0.04);border:1px solid #e5e7eb;display:flex;gap:24px;transition:var(--transition)}
        .md-card:hover{box-shadow:0 8px 25px rgba(0,0,0,0.08);border-color:var(--color-primary)}

        .md-card-left{flex:0 0 500px;border-right:1px solid #eef0f2;padding-right:24px}
        .md-card-left .num{font-size:26px;font-weight:900;color:#1a56db;line-height:1}
        .md-card-left .num small{font-size:13px;font-weight:400;color:#999}
        .md-card-left h3{font-size:17px;font-weight:700;margin:6px 0 8px;color:#0b1f3b}
        .md-card-left .sub{font-size:13px;color:#1a56db;font-weight:600;margin-bottom:4px}
        .md-card-left .desc{font-size:13px;color:#555;line-height:1.5}

        .md-card-mid{flex:1;display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px}
        .md-card-mid .item{text-align:center;border-right:1px solid #f0f0f0;padding:0 14px}
        .md-card-mid .item:last-child{border-right:0}
        .md-card-mid .img-box{height:100px;display:flex;align-items:center;justify-content:center;margin-bottom:8px}
        .md-card-mid .img-box img{max-height:100%;max-width:100%;object-fit:contain}
        .md-card-mid .item h5{font-size:15px;font-weight:700;color:#0b1f3b;margin-bottom:6px}
        .md-card-mid .item ul{list-style:none;padding:0;text-align:left}
        .md-card-mid .item ul li{font-size:13px;color:#555;margin-bottom:4px;display:flex;align-items:baseline;gap:4px}
        .md-card-mid .item ul li i{color:#1a56db;font-size:10px}

        .md-card-right{flex:0 0 200px;border-left:1px solid #eef0f2;padding-left:24px}
        .md-card-right h5{font-size:15px;font-weight:700;color:#0b1f3b;margin-bottom:12px;text-align:center}
        .md-card-right .res-item{display:flex;align-items:center;gap:10px;margin-bottom:12px;font-size:15px;color:#333}
        .md-card-right .res-item i{color:#1a56db;font-size:20px;width:28px;text-align:center}
        .md-card-right .res-item .val{font-weight:700;color:#1a56db;font-size:18px}

        .md-bottom{padding:30px 0;background:#fff}
        .md-bottom-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:40px}
        .md-col h4{font-size:17px;font-weight:700;color:#0b1f3b;margin-bottom:14px}
        .md-col ul{list-style:none}
        .md-col ul li{font-size:14px;color:#555;margin-bottom:8px;display:flex;align-items:center;gap:8px}
        .md-col ul li i{color:#1a56db;font-size:16px}
        .md-icon-box{display:flex;gap:24px;flex-wrap:wrap}
        .md-icon-box .ic{display:flex;flex-direction:column;align-items:center;text-align:center;width:90px}
        .md-icon-box .ic i{font-size:32px;color:#1a56db;margin-bottom:8px}
        .md-icon-box .ic span{font-size:13px;color:#333;font-weight:600}
        .md-cta{background:#0b1f3b;color:#fff;border-radius:10px;padding:28px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}
        .md-cta h4{font-size:18px;font-weight:700;margin-bottom:8px;color:#fff}
        .md-cta p{font-size:14px;color:#b0c4de}

        @media(max-width:1024px){
            .md-stats{flex-wrap:wrap}.md-stat-item{flex:0 0 30%}.md-card{flex-direction:column}
            .md-card-left{border-right:0;border-bottom:1px solid #eef0f2;padding-bottom:18px;flex:auto}
            .md-card-right{border-left:0;border-top:1px solid #eef0f2;padding-top:18px;padding-left:0;flex:auto;display:flex;flex-wrap:wrap;gap:15px;justify-content:center}
            .md-card-right .res-item{margin-bottom:0}
            .md-bottom-grid{grid-template-columns:1fr 1fr}
            .md-card-mid{grid-template-columns:1fr 1fr}
            .md-card-mid .item:last-child{border-right:1px solid #f0f0f0}
        }
        @media(max-width:768px){
            .md-header{padding:50px 0 40px}
            .md-header h1{font-size:26px}
            .md-header p{font-size:15px}
            .md-stats{gap:20px}
            .md-stat-item{flex:0 0 45%}
            .md-card{padding:16px 16px 12px;gap:16px}
            .md-card-left{flex-direction:column;padding-right:0;flex:auto}
            .md-card-img{width:100%;max-width:200px;align-self:center}
            .md-card-img .img-placeholder{max-height:220px;aspect-ratio:3/4}
            .md-card-mid{grid-template-columns:1fr}.md-card-mid .item{border-right:0!important;border-bottom:1px solid #f0f0f0;padding:12px 0}
            .md-card-mid .item:last-child{border-bottom:0}.md-bottom-grid{grid-template-columns:1fr}
            .md-card-right{flex-direction:column;align-items:center;flex:auto;border-left:0;border-top:1px solid #eef0f2;padding-top:14px;padding-left:0}
            .md-card-right .res-item{font-size:14px;width:100%;justify-content:flex-start}
            .home-cta h2{font-size:24px}
            .home-cta p{font-size:14px}
        }
    
        .md-card-left {
            display: flex;
            flex-direction: row;
            gap: 16px;
            align-items: stretch;
        }
        .md-card-text {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .md-card-img {
            width: 220px;
            flex-shrink: 0;
            display: flex;
            flex-direction: column;
            align-self: stretch;
        }
        .md-card-img .img-placeholder {
            width: 100%;
            aspect-ratio: 9 / 16;
            max-height: 320px;
            background: #fff;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #ccc;
            font-size: 14px;
            border: 1px dashed #ddd;
            overflow: hidden;
        }

    

/* --- mold-development.html --- */

        .md-mold-hero {
            height: 550px;
            display: flex;
            flex-direction: column;
            padding: 100px 0 60px;
        }

        .md-mold-hero .container {
            display: block;
        }

        .md-mold-hero h1 {
            font-size: 48px;
            font-weight: 900;
            color: #fff;
            margin-bottom: 20px;
            line-height: 1.2;
            animation: heroFadeUp 0.8s ease both;
        }

        .md-mold-hero p {
            font-size: 16px;
            color: #d1d5db;
            max-width: 600px;
            margin-bottom: 30px;
            line-height: 1.6;
            animation: heroFadeUp 0.8s 0.2s ease both;
        }

        .md-hero-btns {
            display: flex;
            gap: 16px;
            animation: heroFadeUp 0.8s 0.35s ease both;
        }

        .md-benefits {
            padding: 40px 0;
        }

        .md-benefit-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 20px;
            text-align: center;
        }

        .md-benefit-item i {
            font-size: 28px;
            color: var(--color-primary);
            margin-bottom: 10px;
            display: block;
        }

        .md-benefit-item h4 {
            font-size: 15px;
            font-weight: 700;
            margin-bottom: 4px;
            color: #1e1e1e;
        }

        .md-benefit-item p {
            font-size: 13px;
            color: #666;
        }

        .md-services {
            padding: 40px 0;
        }

        .md-section-header {
            text-align: center;
            margin-bottom: 30px;
        }

        .md-tag {
            color: var(--color-primary);
            font-weight: 700;
            font-size: 13px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            margin-bottom: 6px;
        }

        .md-tag::before {
            content: '';
            width: 16px;
            height: 3px;
            background: var(--color-primary);
        }

        .md-section-header h2 {
            font-size: 28px;
            font-weight: 700;
            color: #1e1e1e;
        }

        .md-section-header p {
            color: #666;
            margin-top: 6px;
        }

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

        .md-service-card {
            background: #fff;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            overflow: hidden;
            padding: 16px;
            transition: var(--transition);
        }

        .md-service-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(33, 86, 169, 0.1);
            border-color: var(--color-primary);
        }

        .md-service-card img {
            width: 100%;
            height: 160px;
            object-fit: cover;
            border-radius: 6px;
            margin-bottom: 12px;
            background-color: #e2e8f0;
        }

        .md-service-card h4 {
            font-size: 16px;
            font-weight: 700;
            margin-bottom: 4px;
            color: #1e1e1e;
        }

        .md-service-card p {
            font-size: 13px;
            color: #666;
            line-height: 1.4;
        }

        .md-process {
            padding: 40px 0;
            background: #f8f9fa;
        }

        .md-process-steps {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 20px;
        }

        .md-pstep {
            flex: 1;
            text-align: center;
            min-width: 100px;
        }

        .md-pstep .md-circle {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: var(--color-primary);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            margin: 0 auto 12px;
        }

        .md-pstep h4 {
            font-size: 14px;
            font-weight: 700;
            color: #1e1e1e;
        }

        .md-pstep p {
            font-size: 12px;
            color: #666;
        }

        .md-pstep .md-num {
            font-size: 14px;
            font-weight: 700;
            color: var(--color-primary);
            margin-bottom: 5px;
        }

        .md-why {
            padding: 40px 0;
        }

        .md-why-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 40px;
            align-items: center;
        }

        .md-why-text h2 {
            font-size: 26px;
            font-weight: 700;
            color: #1e1e1e;
            margin-bottom: 15px;
        }

        .md-why-text ul {
            list-style: none;
            margin-top: 15px;
        }

        .md-why-text ul li {
            font-size: 14px;
            color: #444;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .md-why-text ul li i {
            color: var(--color-primary);
        }

        .md-why-img img {
            width: 100%;
            height: 300px;
            object-fit: cover;
            border-radius: 8px;
        }

        .md-mold-types {
            padding: 40px 0;
        }

        .md-mold-grid {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            gap: 12px;
            margin-top: 20px;
        }

        .md-mold-card {
            background: #fff;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            padding: 15px 10px;
            text-align: center;
            transition: var(--transition);
        }

        .md-mold-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(33, 86, 169, 0.1);
            border-color: var(--color-primary);
        }

        .md-mold-card img {
            width: 100%;
            height: 90px;
            object-fit: contain;
            margin-bottom: 8px;
        }

        .md-mold-card h4 {
            font-size: 13px;
            font-weight: 700;
            color: #1e1e1e;
        }

        .md-mold-card p {
            font-size: 11px;
            color: #666;
        }

        .md-cta {
            padding: 0 0 40px;
        }

        .md-cta-box {
            background: #0a1a30;
            border-radius: 12px;
            padding: 30px 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: #fff;
        }

        .md-cta-text h3 {
            font-size: 22px;
            font-weight: 700;
            margin-bottom: 4px;
        }

        .md-cta-text p {
            font-size: 14px;
            color: #b0bed0;
        }

        .md-cta-btns {
            display: flex;
            gap: 15px;
        }

        @media (max-width: 1024px) {
            .md-benefit-grid {
                grid-template-columns: repeat(3, 1fr);
            }
            .md-service-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            .md-mold-grid {
                grid-template-columns: repeat(3, 1fr);
            }
            .md-process-steps {
                justify-content: center;
            }
            .md-pstep {
                flex: 0 0 30%;
            }
        }

        @media (max-width: 768px) {
            .md-mold-hero {
                height: 430px;
            }
            .md-mold-hero h1 {
                font-size: 28px;
            }
            .md-benefit-grid {
                grid-template-columns: 1fr;
            }
            .md-service-grid {
                grid-template-columns: 1fr;
            }
            .md-why-grid {
                grid-template-columns: 1fr;
            }
            .md-mold-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            .md-pstep {
                flex: 0 0 45%;
            }
            .md-cta-box {
                flex-direction: column;
                text-align: center;
                gap: 15px;
            }
            .md-cta-btns {
                flex-direction: column;
            }
        }
    

/* --- new-energy-cases.html --- */

        .ce-header{background:#0b1f3b;color:#fff;padding:70px 0 60px;text-align:center}
        .ce-header h1{font-size:40px;font-weight:700;margin-bottom:12px}
        .ce-header h1 span{color:#f0c040;font-weight:900}
        .ce-header p{font-size:18px;color:#b0c4de;margin-top:6px}

        .ce-stats{display:flex;justify-content:center;gap:40px;max-width:1100px;margin:0 auto;padding:0 0 10px}
        .ce-stat-item{display:flex;flex-direction:column;align-items:center;text-align:center;flex:1}
        .ce-stat-item i{font-size:34px;color:#1a56db;margin-bottom:6px}
        .ce-stat-item h4{font-size:18px;font-weight:700;color:#0b1f3b}
        .ce-stat-item p{font-size:13px;color:#666;margin-top:4px;max-width:200px}

        .ce-card{background:#f0f6ff;border-radius:14px;padding:20px 28px 14px;margin-bottom:20px;box-shadow:0 2px 8px rgba(0,0,0,0.04);border:1px solid #e5e7eb;display:flex;gap:24px;transition:var(--transition)}
        .ce-card:hover{box-shadow:0 8px 25px rgba(0,0,0,0.08);border-color:var(--color-primary)}

        .ce-card-left{flex:0 0 500px;border-right:1px solid #eef0f2;padding-right:24px}
        .ce-card-left .num{font-size:26px;font-weight:900;color:#1a56db;line-height:1}
        .ce-card-left .num small{font-size:13px;font-weight:400;color:#999}
        .ce-card-left h3{font-size:17px;font-weight:700;margin:6px 0 8px;color:#0b1f3b}
        .ce-card-left .sub{font-size:13px;color:#1a56db;font-weight:600;margin-bottom:4px}
        .ce-card-left .desc{font-size:13px;color:#555;line-height:1.5}

        .ce-card-mid{flex:1;display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px}
        .ce-card-mid .item{text-align:center;border-right:1px solid #f0f0f0;padding:0 14px}
        .ce-card-mid .item:last-child{border-right:0}
        .ce-card-mid .img-box{height:100px;display:flex;align-items:center;justify-content:center;margin-bottom:8px}
        .ce-card-mid .img-box img{max-height:100%;max-width:100%;object-fit:contain}
        .ce-card-mid .item h5{font-size:15px;font-weight:700;color:#0b1f3b;margin-bottom:6px}
        .ce-card-mid .item ul{list-style:none;padding:0;text-align:left}
        .ce-card-mid .item ul li{font-size:13px;color:#555;margin-bottom:4px;display:flex;align-items:baseline;gap:4px}
        .ce-card-mid .item ul li i{color:#1a56db;font-size:10px}

        .ce-card-right{flex:0 0 200px;border-left:1px solid #eef0f2;padding-left:24px}
        .ce-card-right h5{font-size:15px;font-weight:700;color:#0b1f3b;margin-bottom:12px;text-align:center}
        .ce-card-right .res-item{display:flex;align-items:center;gap:10px;margin-bottom:12px;font-size:15px;color:#333}
        .ce-card-right .res-item i{color:#1a56db;font-size:20px;width:28px;text-align:center}
        .ce-card-right .res-item .val{font-weight:700;color:#1a56db;font-size:18px}

        .ce-bottom{padding:30px 0;background:#fff}
        .ce-bottom-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:40px}
        .ce-col h4{font-size:17px;font-weight:700;color:#0b1f3b;margin-bottom:14px}
        .ce-col ul{list-style:none}
        .ce-col ul li{font-size:14px;color:#555;margin-bottom:8px;display:flex;align-items:center;gap:8px}
        .ce-col ul li i{color:#1a56db;font-size:16px}
        .ce-icon-box{display:flex;gap:24px;flex-wrap:wrap}
        .ce-icon-box .ic{display:flex;flex-direction:column;align-items:center;text-align:center;width:90px}
        .ce-icon-box .ic i{font-size:32px;color:#1a56db;margin-bottom:8px}
        .ce-icon-box .ic span{font-size:13px;color:#333;font-weight:600}
        .ce-cta{background:#0b1f3b;color:#fff;border-radius:10px;padding:28px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}
        .ce-cta h4{font-size:18px;font-weight:700;margin-bottom:8px;color:#fff}
        .ce-cta p{font-size:14px;color:#b0c4de}

        @media(max-width:1024px){
            .ce-stats{flex-wrap:wrap}.ce-stat-item{flex:0 0 30%}.ce-card{flex-direction:column}
            .ce-card-left{border-right:0;border-bottom:1px solid #eef0f2;padding-bottom:18px;flex:auto}
            .ce-card-right{border-left:0;border-top:1px solid #eef0f2;padding-top:18px;padding-left:0;flex:auto;display:flex;flex-wrap:wrap;gap:15px;justify-content:center}
            .ce-card-right .res-item{margin-bottom:0}
            .ce-bottom-grid{grid-template-columns:1fr 1fr}
            .ce-card-mid{grid-template-columns:1fr 1fr}
            .ce-card-mid .item:last-child{border-right:1px solid #f0f0f0}
        }
        @media(max-width:768px){
            .ce-header{padding:50px 0 40px}
            .ce-header h1{font-size:26px}
            .ce-header p{font-size:15px}
            .ce-stats{gap:20px}
            .ce-stat-item{flex:0 0 45%}
            .ce-card{padding:16px 16px 12px;gap:16px}
            .ce-card-left{flex-direction:column;padding-right:0;flex:auto}
            .ce-card-img{width:100%;max-width:200px;align-self:center}
            .ce-card-img .img-placeholder{max-height:220px;aspect-ratio:3/4}
            .ce-card-mid{grid-template-columns:1fr}.ce-card-mid .item{border-right:0!important;border-bottom:1px solid #f0f0f0;padding:12px 0}
            .ce-card-mid .item:last-child{border-bottom:0}.ce-bottom-grid{grid-template-columns:1fr}
            .ce-card-right{flex-direction:column;align-items:center;flex:auto;border-left:0;border-top:1px solid #eef0f2;padding-top:14px;padding-left:0}
            .ce-card-right .res-item{font-size:14px;width:100%;justify-content:flex-start}
            .home-cta h2{font-size:24px}
            .home-cta p{font-size:14px}
        }
    
        .ce-card-left {
            display: flex;
            flex-direction: row;
            gap: 16px;
            align-items: stretch;
        }
        .ce-card-text {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .ce-card-img {
            width: 220px;
            flex-shrink: 0;
            display: flex;
            flex-direction: column;
            align-self: stretch;
        }
        .ce-card-img .img-placeholder {
            width: 100%;
            aspect-ratio: 9 / 16;
            max-height: 320px;
            background: #f0f6ff;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }
        .ce-card-img .img-placeholder img {
            background: #f0f6ff;
        }

    

/* --- news.html --- */

        .news-hero {
            height: 550px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 100px 0 60px;
            background: linear-gradient(to right, rgba(8,27,51,0.92), rgba(8,27,51,0.65)), url('../img/factory.webp') center / cover;
        }

        .news-hero .container {
            text-align: center;
        }

        .news-hero h1 {
            font-size: 64px;
            font-weight: 900;
            color: #fff;
            margin-bottom: 20px;
            line-height: 1.15;
            letter-spacing: 1px;
            animation: heroFadeUp 0.8s ease both;
        }

        .news-hero p {
            font-size: 18px;
            color: #d1d5db;
            max-width: 600px;
            line-height: 1.6;
            margin: 0 auto;
            animation: heroFadeUp 0.8s 0.2s ease both;
        }

        .tabs-bar {
            background: #f8fafc;
            border-bottom: 1px solid #e5e7eb;
            padding: 16px 0;
        }

        .tabs-flex {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .tabs-left {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }

        .tab-btn {
            font-size: 14px;
            padding: 7px 20px;
            border-radius: 20px;
            cursor: pointer;
            background: transparent;
            border: 1px solid #d1d5db;
            color: #666;
            transition: all 0.2s;
            font-family: inherit;
        }

        .tab-btn.active {
            background: var(--color-primary);
            color: #fff;
            border-color: var(--color-primary);
            font-weight: 500;
        }

        .tab-btn:hover:not(.active) {
            color: var(--color-primary);
            border-color: var(--color-primary);
        }

        .news-list {
            padding: 40px 0 60px;
        }

        .news-item {
            display: flex;
            gap: 28px;
            padding: 28px 0;
            border-bottom: 1px solid #f0f0f0;
            align-items: flex-start;
        }

        .news-item:last-child {
            border-bottom: none;
        }

        .news-img {
            flex: 0 0 280px;
            height: 185px;
            border-radius: 8px;
            overflow: hidden;
        }

        .news-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s;
        }

        .news-img:hover img {
            transform: scale(1.03);
        }

        .news-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            min-height: 185px;
        }

        .news-content h3 {
            font-size: 19px;
            font-weight: 700;
            color: #111;
            margin-bottom: 8px;
            cursor: pointer;
            line-height: 1.4;
            transition: color 0.2s;
        }

        .news-content h3 a {
            color: inherit;
        }

        .news-content h3:hover {
            color: var(--color-primary);
        }

        .news-content p {
            font-size: 14px;
            color: #666;
            line-height: 1.65;
            margin-bottom: 12px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .news-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 13px;
        }

        .news-meta .cat {
            color: var(--color-primary);
            font-weight: 600;
        }

        .news-meta .date {
            color: #999;
        }

        .pagination {
            padding: 30px 0 60px;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 6px;
        }

        .page-btn {
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 6px;
            border: 1px solid #e5e7eb;
            color: #666;
            font-size: 14px;
            cursor: pointer;
            background: #fff;
            transition: all 0.2s;
            font-family: inherit;
        }

        .page-btn:hover {
            border-color: var(--color-primary);
            color: var(--color-primary);
        }

        .page-btn.active {
            background: var(--color-primary);
            color: #fff;
            border-color: var(--color-primary);
        }

        .page-btn.disabled {
            color: #ccc;
            cursor: not-allowed;
            border-color: #f0f0f0;
        }

        .page-ellipsis {
            color: #999;
            font-size: 14px;
            padding: 0 4px;
        }

        @media (max-width: 768px) {
            .news-hero { height: 320px; padding: 60px 0 40px; }
            .news-hero h1 { font-size: 32px; }
            .news-hero p { font-size: 15px; }
            .news-item { flex-direction: column; }
            .news-img { flex: auto; height: 200px; width: 100%; }
            .tabs-flex { flex-direction: column; align-items: flex-start; gap: 12px; }
            .news-content { min-height: auto; }
            .news-content h3 { font-size: 17px; }
        }
    

/* --- odm-oem.html --- */

        .oem-hero {
            height: 550px;
            display: flex;
            flex-direction: column;
            padding: 100px 0 60px;
            background: linear-gradient(rgba(10, 30, 60, 0.9), rgba(10, 30, 60, 0.5)), url('../img/assembly.webp') center / cover;
        }

        .oem-hero h1 {
            font-size: 48px;
            font-weight: 900;
            color: #fff;
            margin-bottom: 20px;
            line-height: 1.2;
            animation: heroFadeUp 0.8s ease both;
        }

        .oem-hero p {
            font-size: 16px;
            color: #d1d5db;
            max-width: 600px;
            margin-bottom: 30px;
            line-height: 1.6;
            animation: heroFadeUp 0.8s 0.2s ease both;
        }

        .oem-hero-btns {
            display: flex;
            gap: 16px;
            animation: heroFadeUp 0.8s 0.35s ease both;
        }

        .oem-section {
            padding: 60px 0;
        }

        .oem-tag {
            color: var(--color-primary);
            font-weight: 700;
            font-size: 13px;
            display: flex;
            align-items: center;
            margin-bottom: 8px;
        }

        .oem-tag::before {
            content: '';
            width: 15px;
            height: 3px;
            background: var(--color-primary);
            margin-right: 10px;
        }

        .oem-grid4 {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
            margin-top: 20px;
        }

        .oem-card {
            text-align: center;
            padding: 35px 15px;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            transition: var(--transition);
        }

        .oem-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 30px rgba(33, 86, 169, 0.12);
            border-color: var(--color-primary);
        }

        .oem-card .oem-icon {
            width: 70px;
            height: 70px;
            background: var(--color-primary);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 15px;
        }

        .oem-card .oem-icon i {
            font-size: 30px;
            color: #fff;
        }

        .oem-card h3 {
            font-size: 17px;
            font-weight: 700;
            margin-bottom: 8px;
            color: #1e1e1e;
        }

        .oem-card p {
            font-size: 14px;
            color: #666;
        }

        .oem-grid4.oem-adv {
            gap: 30px;
        }

        .oem-adv-item {
            display: flex;
            gap: 15px;
        }

        .oem-adv-item i {
            width: 50px;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 22px;
            color: var(--color-primary);
            background: #fff;
            border-radius: 50%;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            flex-shrink: 0;
        }

        .oem-adv-item .oem-txt h4 {
            font-size: 16px;
            font-weight: 700;
            color: #1e1e1e;
        }

        .oem-adv-item .oem-txt p {
            font-size: 13px;
            color: #777;
        }

        .oem-process-wrap {
            display: flex;
            justify-content: space-between;
            gap: 8px;
            margin-top: 30px;
        }

        .oem-step {
            flex: 1;
            text-align: center;
        }

        .oem-step img {
            width: 100%;
            height: 150px;
            object-fit: cover;
            border-radius: 8px;
            margin-bottom: 10px;
            background-color: #e2e8f0;
        }

        .oem-step h4 {
            font-size: 16px;
            font-weight: 700;
            color: #1e1e1e;
        }

        .oem-step p {
            font-size: 13px;
            color: #666;
        }

        .oem-arrow {
            display: flex;
            align-items: flex-start;
            padding-top: 60px;
            flex-shrink: 0;
        }

        .oem-arrow .oem-circle {
            width: 32px;
            height: 32px;
            background: var(--color-primary);
            color: #fff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
        }

        @media (max-width: 768px) {
            .oem-hero {
                height: 430px;
            }
            .oem-hero h1 {
                font-size: 28px;
            }
            .oem-grid4 {
                grid-template-columns: 1fr;
            }
            .oem-process-wrap {
                display: grid;
                grid-template-columns: 1fr;
                gap: 20px;
            }
            .oem-arrow {
                display: none;
            }
        }
    

/* --- office-furniture-cases.html --- */

        .of-header{background:#0b1f3b;color:#fff;padding:70px 0 60px;text-align:center}
        .of-header h1{font-size:40px;font-weight:700;margin-bottom:12px}
        .of-header h1 span{color:#f0c040;font-weight:900}
        .of-header p{font-size:18px;color:#b0c4de;margin-top:6px}

        .of-stats{display:flex;justify-content:center;gap:40px;max-width:1100px;margin:0 auto;padding:0 0 10px}
        .of-stat-item{display:flex;flex-direction:column;align-items:center;text-align:center;flex:1}
        .of-stat-item i{font-size:34px;color:#1a56db;margin-bottom:6px}
        .of-stat-item h4{font-size:18px;font-weight:700;color:#0b1f3b}
        .of-stat-item p{font-size:13px;color:#666;margin-top:4px;max-width:200px}

        .of-card{background:#f0f6ff;border-radius:14px;padding:20px 28px 14px;margin-bottom:20px;box-shadow:0 2px 8px rgba(0,0,0,0.04);border:1px solid #e5e7eb;display:flex;gap:24px;transition:var(--transition)}
        .of-card:hover{box-shadow:0 8px 25px rgba(0,0,0,0.08);border-color:var(--color-primary)}

        .of-card-left{flex:0 0 500px;border-right:1px solid #eef0f2;padding-right:24px}
        .of-card-left .num{font-size:26px;font-weight:900;color:#1a56db;line-height:1}
        .of-card-left .num small{font-size:13px;font-weight:400;color:#999}
        .of-card-left h3{font-size:17px;font-weight:700;margin:6px 0 8px;color:#0b1f3b}
        .of-card-left .sub{font-size:13px;color:#1a56db;font-weight:600;margin-bottom:4px}
        .of-card-left .desc{font-size:13px;color:#555;line-height:1.6}

        .of-card-mid{flex:1;display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px}
        .of-card-mid .item{text-align:center;border-right:1px solid #f0f0f0;padding:0 14px}
        .of-card-mid .item:last-child{border-right:0}
        .of-card-mid .img-box{height:100px;display:flex;align-items:center;justify-content:center;margin-bottom:8px}
        .of-card-mid .img-box img{max-height:100%;max-width:100%;object-fit:contain}
        .of-card-mid .item h5{font-size:15px;font-weight:700;color:#0b1f3b;margin-bottom:6px}
        .of-card-mid .item ul{list-style:none;padding:0;text-align:left}
        .of-card-mid .item ul li{font-size:13px;color:#555;margin-bottom:4px;display:flex;align-items:baseline;gap:4px}
        .of-card-mid .item ul li i{color:#1a56db;font-size:10px}

        .of-card-right{flex:0 0 200px;border-left:1px solid #eef0f2;padding-left:24px}
        .of-card-right h5{font-size:15px;font-weight:700;color:#0b1f3b;margin-bottom:12px;text-align:center}
        .of-card-right .res-item{display:flex;align-items:center;gap:10px;margin-bottom:12px;font-size:15px;color:#333}
        .of-card-right .res-item i{color:#1a56db;font-size:20px;width:28px;text-align:center}
        .of-card-right .res-item .val{font-weight:700;color:#1a56db;font-size:18px}

        .of-bottom{padding:30px 0;background:#fff}
        .of-bottom-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:40px}
        .of-col h4{font-size:17px;font-weight:700;color:#0b1f3b;margin-bottom:14px}
        .of-col ul{list-style:none}
        .of-col ul li{font-size:14px;color:#555;margin-bottom:8px;display:flex;align-items:center;gap:8px}
        .of-col ul li i{color:#1a56db;font-size:16px}
        .of-icon-box{display:flex;gap:24px;flex-wrap:wrap}
        .of-icon-box .ic{display:flex;flex-direction:column;align-items:center;text-align:center;width:90px}
        .of-icon-box .ic i{font-size:32px;color:#1a56db;margin-bottom:8px}
        .of-icon-box .ic span{font-size:13px;color:#333;font-weight:600}
        .of-cta{background:#0b1f3b;color:#fff;border-radius:10px;padding:28px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}
        .of-cta h4{font-size:18px;font-weight:700;margin-bottom:8px;color:#fff}
        .of-cta p{font-size:14px;color:#b0c4de}

        @media(max-width:1024px){
            .of-stats{flex-wrap:wrap}.of-stat-item{flex:0 0 30%}.of-card{flex-direction:column}
            .of-card-left{border-right:0;border-bottom:1px solid #eef0f2;padding-bottom:18px;flex:auto}
            .of-card-right{border-left:0;border-top:1px solid #eef0f2;padding-top:18px;padding-left:0;flex:auto;display:flex;flex-wrap:wrap;gap:15px;justify-content:center}
            .of-card-right .res-item{margin-bottom:0}
            .of-bottom-grid{grid-template-columns:1fr 1fr}
            .of-card-mid{grid-template-columns:1fr 1fr}
            .of-card-mid .item:last-child{border-right:1px solid #f0f0f0}
        }
        @media(max-width:768px){
            .of-header{padding:50px 0 40px}
            .of-header h1{font-size:26px}
            .of-header p{font-size:15px}
            .of-stats{gap:20px}
            .of-stat-item{flex:0 0 45%}
            .of-card{padding:16px 16px 12px;gap:16px}
            .of-card-left{flex-direction:column;padding-right:0;flex:auto}
            .of-card-img{width:100%;max-width:200px;align-self:center}
            .of-card-img .img-placeholder{max-height:220px;aspect-ratio:3/4}
            .of-card-mid{grid-template-columns:1fr}.of-card-mid .item{border-right:0!important;border-bottom:1px solid #f0f0f0;padding:12px 0}
            .of-card-mid .item:last-child{border-bottom:0}.of-bottom-grid{grid-template-columns:1fr}
            .of-card-right{flex-direction:column;align-items:center;flex:auto;border-left:0;border-top:1px solid #eef0f2;padding-top:14px;padding-left:0}
            .of-card-right .res-item{font-size:14px;width:100%;justify-content:flex-start}
            .home-cta h2{font-size:24px}
            .home-cta p{font-size:14px}
        }
    
        .of-card-left {
            display: flex;
            flex-direction: row;
            gap: 16px;
            align-items: stretch;
        }
        .of-card-text {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .of-card-img {
            width: 220px;
            flex-shrink: 0;
            display: flex;
            flex-direction: column;
            align-self: stretch;
        }
        .of-card-img .img-placeholder {
            width: 100%;
            aspect-ratio: 9 / 16;
            max-height: 320px;
            background: #fff;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #ccc;
            font-size: 14px;
            border: 1px dashed #ddd;
            overflow: hidden;
        }

    

/* --- pet-supplies-cases.html --- */

        .ps-header{background:#0b1f3b;color:#fff;padding:70px 0 60px;text-align:center}
        .ps-header h1{font-size:40px;font-weight:700;margin-bottom:12px}
        .ps-header h1 span{color:#f0c040;font-weight:900}
        .ps-header p{font-size:18px;color:#b0c4de;margin-top:6px}

        .ps-stats{display:flex;justify-content:center;gap:40px;max-width:1100px;margin:0 auto;padding:0 0 10px}
        .ps-stat-item{display:flex;flex-direction:column;align-items:center;text-align:center;flex:1}
        .ps-stat-item i{font-size:34px;color:#1a56db;margin-bottom:6px}
        .ps-stat-item h4{font-size:18px;font-weight:700;color:#0b1f3b}
        .ps-stat-item p{font-size:13px;color:#666;margin-top:4px;max-width:200px}

        .ps-card{background:#f0f6ff;border-radius:14px;padding:20px 28px 14px;margin-bottom:20px;box-shadow:0 2px 8px rgba(0,0,0,0.04);border:1px solid #e5e7eb;display:flex;gap:24px;transition:var(--transition)}
        .ps-card:hover{box-shadow:0 8px 25px rgba(0,0,0,0.08);border-color:var(--color-primary)}

        .ps-card-left{flex:0 0 500px;border-right:1px solid #eef0f2;padding-right:24px}
        .ps-card-left .num{font-size:26px;font-weight:900;color:#1a56db;line-height:1}
        .ps-card-left .num small{font-size:13px;font-weight:400;color:#999}
        .ps-card-left h3{font-size:17px;font-weight:700;margin:6px 0 8px;color:#0b1f3b}
        .ps-card-left .sub{font-size:13px;color:#1a56db;font-weight:600;margin-bottom:4px}
        .ps-card-left .desc{font-size:13px;color:#555;line-height:1.5}

        .ps-card-mid{flex:1;display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px}
        .ps-card-mid .item{text-align:center;border-right:1px solid #f0f0f0;padding:0 14px}
        .ps-card-mid .item:last-child{border-right:0}
        .ps-card-mid .img-box{height:100px;display:flex;align-items:center;justify-content:center;margin-bottom:8px}
        .ps-card-mid .img-box img{max-height:100%;max-width:100%;object-fit:contain}
        .ps-card-mid .item h5{font-size:15px;font-weight:700;color:#0b1f3b;margin-bottom:6px}
        .ps-card-mid .item ul{list-style:none;padding:0;text-align:left}
        .ps-card-mid .item ul li{font-size:13px;color:#555;margin-bottom:4px;display:flex;align-items:baseline;gap:4px}
        .ps-card-mid .item ul li i{color:#1a56db;font-size:10px}

        .ps-card-right{flex:0 0 200px;border-left:1px solid #eef0f2;padding-left:24px}
        .ps-card-right h5{font-size:15px;font-weight:700;color:#0b1f3b;margin-bottom:12px;text-align:center}
        .ps-card-right .res-item{display:flex;align-items:center;gap:10px;margin-bottom:12px;font-size:15px;color:#333}
        .ps-card-right .res-item i{color:#1a56db;font-size:20px;width:28px;text-align:center}
        .ps-card-right .res-item .val{font-weight:700;color:#1a56db;font-size:18px}

        .ps-bottom{padding:30px 0;background:#fff}
        .ps-bottom-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:40px}
        .ps-col h4{font-size:17px;font-weight:700;color:#0b1f3b;margin-bottom:14px}
        .ps-col ul{list-style:none}
        .ps-col ul li{font-size:14px;color:#555;margin-bottom:8px;display:flex;align-items:center;gap:8px}
        .ps-col ul li i{color:#1a56db;font-size:16px}
        .ps-icon-box{display:flex;gap:24px;flex-wrap:wrap}
        .ps-icon-box .ic{display:flex;flex-direction:column;align-items:center;text-align:center;width:90px}
        .ps-icon-box .ic i{font-size:32px;color:#1a56db;margin-bottom:8px}
        .ps-icon-box .ic span{font-size:13px;color:#333;font-weight:600}
        .ps-cta{background:#0b1f3b;color:#fff;border-radius:10px;padding:28px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}
        .ps-cta h4{font-size:18px;font-weight:700;margin-bottom:8px;color:#fff}
        .ps-cta p{font-size:14px;color:#b0c4de}

        .ps-card-left {
            display: flex;
            flex-direction: row;
            gap: 16px;
            align-items: stretch;
        }
        .ps-card-text {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .ps-card-img {
            width: 220px;
            flex-shrink: 0;
            display: flex;
            flex-direction: column;
            align-self: stretch;
        }
        .ps-card-img .img-placeholder {
            width: 100%;
            aspect-ratio: 9 / 16;
            max-height: 320px;
            background: #f0f6ff;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

        @media(max-width:1024px){
            .ps-stats{flex-wrap:wrap}.ps-stat-item{flex:0 0 30%}.ps-card{flex-direction:column}
            .ps-card-left{border-right:0;border-bottom:1px solid #eef0f2;padding-bottom:18px;flex:auto}
            .ps-card-right{border-left:0;border-top:1px solid #eef0f2;padding-top:18px;padding-left:0;flex:auto;display:flex;flex-wrap:wrap;gap:15px;justify-content:center}
            .ps-card-right .res-item{margin-bottom:0}
            .ps-bottom-grid{grid-template-columns:1fr 1fr}
            .ps-card-mid{grid-template-columns:1fr 1fr}
            .ps-card-mid .item:last-child{border-right:1px solid #f0f0f0}
        }
        @media(max-width:768px){
            .ps-header{padding:50px 0 40px}
            .ps-header h1{font-size:26px}
            .ps-header p{font-size:15px}
            .ps-stats{gap:20px}
            .ps-stat-item{flex:0 0 45%}
            .ps-card{padding:16px 16px 12px;gap:16px}
            .ps-card-left{flex-direction:column;padding-right:0;flex:auto}
            .ps-card-img{width:100%;max-width:200px;align-self:center}
            .ps-card-img .img-placeholder{max-height:220px;aspect-ratio:3/4}
            .ps-card-mid{grid-template-columns:1fr}.ps-card-mid .item{border-right:0!important;border-bottom:1px solid #f0f0f0;padding:12px 0}
            .ps-card-mid .item:last-child{border-bottom:0}.ps-bottom-grid{grid-template-columns:1fr}
            .ps-card-right{flex-direction:column;align-items:center;flex:auto;border-left:0;border-top:1px solid #eef0f2;padding-top:14px;padding-left:0}
            .ps-card-right .res-item{font-size:14px;width:100%;justify-content:flex-start}
            .ps-bottom{padding:20px 0}
            .home-cta h2{font-size:24px}
            .home-cta p{font-size:14px}
        }
    

/* --- product-design.html --- */

        .pd-hero {
            height: 550px;
            display: flex;
            flex-direction: column;
            padding: 100px 0 60px;
            background: linear-gradient(rgba(10, 30, 60, 0.85), rgba(10, 30, 60, 0.5)), url('../img/product-design-1.webp') center / cover;
        }

        .pd-hero h1 {
            font-size: 48px;
            font-weight: 900;
            color: #fff;
            margin-bottom: 20px;
            line-height: 1.2;
            animation: heroFadeUp 0.8s ease both;
        }

        .pd-hero p {
            font-size: 16px;
            color: #d1d5db;
            max-width: 600px;
            margin-bottom: 30px;
            line-height: 1.6;
            animation: heroFadeUp 0.8s 0.2s ease both;
        }

        .pd-hero-btns {
            display: flex;
            gap: 16px;
            animation: heroFadeUp 0.8s 0.35s ease both;
        }

        .pd-benefits {
            padding: 40px 0;
        }

        .pd-benefit-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 20px;
            text-align: center;
        }

        .pd-benefit-item i {
            font-size: 28px;
            color: var(--color-primary);
            margin-bottom: 8px;
            display: block;
        }

        .pd-benefit-item h4 {
            font-size: 15px;
            font-weight: 700;
            margin-bottom: 4px;
            color: #1e1e1e;
        }

        .pd-benefit-item p {
            font-size: 13px;
            color: #666;
        }

        .pd-section-header {
            text-align: center;
            margin-bottom: 30px;
        }

        .pd-tag {
            color: var(--color-primary);
            font-weight: 700;
            font-size: 13px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            margin-bottom: 6px;
        }

        .pd-tag::before {
            content: '';
            width: 16px;
            height: 3px;
            background: var(--color-primary);
        }

        .pd-section-header h2 {
            font-size: 28px;
            font-weight: 700;
            color: #1e1e1e;
        }

        .pd-section-header p {
            color: #666;
            margin-top: 6px;
        }

        .pd-process {
            padding: 40px 0;
        }

        .pd-process-steps {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            margin-top: 20px;
        }

        .pd-step {
            background: #fff;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            padding: 20px;
            text-align: left;
            transition: var(--transition);
        }

        .pd-step:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(33, 86, 169, 0.1);
            border-color: var(--color-primary);
        }

        .pd-step img {
            width: 100%;
            height: 130px;
            object-fit: cover;
            border-radius: 6px;
            margin-bottom: 12px;
            background-color: #e2e8f0;
        }

        .pd-step .pd-num {
            background: var(--color-primary);
            color: #fff;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 13px;
            font-weight: 700;
            margin-bottom: 10px;
        }

        .pd-step h4 {
            font-size: 16px;
            font-weight: 700;
            margin-bottom: 4px;
            color: #1e1e1e;
        }

        .pd-step p {
            font-size: 13px;
            color: #666;
            line-height: 1.4;
        }

        .pd-cap {
            padding: 40px 0;
        }

        .pd-cap-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 20px;
            margin-top: 20px;
        }

        .pd-cap-card {
            background: #fff;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            padding: 16px;
            transition: var(--transition);
        }

        .pd-cap-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(33, 86, 169, 0.1);
            border-color: var(--color-primary);
        }

        .pd-cap-card img {
            width: 100%;
            height: 120px;
            object-fit: contain;
            border-radius: 6px;
            margin-bottom: 12px;
            background: #f9fafb;
        }

        .pd-cap-card h4 {
            font-size: 15px;
            font-weight: 700;
            margin-bottom: 8px;
            color: #1e1e1e;
        }

        .pd-cap-card ul {
            list-style: none;
            padding: 0;
        }

        .pd-cap-card ul li {
            font-size: 12px;
            color: #555;
            margin-bottom: 4px;
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .pd-cap-card ul li i {
            font-size: 8px;
            color: var(--color-primary);
        }

        .pd-industries {
            padding: 40px 0;
            background: #f8f9fa;
        }

        .pd-ind-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 16px;
            margin-top: 20px;
        }

        .pd-ind-card {
            background: #fff;
            border-radius: 8px;
            overflow: hidden;
            border: 1px solid #e5e7eb;
            position: relative;
            transition: var(--transition);
        }

        .pd-ind-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(33, 86, 169, 0.1);
            border-color: var(--color-primary);
        }

        .pd-ind-card img {
            width: 100%;
            height: 130px;
            object-fit: cover;
        }

        .pd-ind-overlay {
            position: relative;
            padding: 12px;
            text-align: center;
        }

        .pd-ind-circle {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: var(--color-primary);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: 700;
            position: absolute;
            top: -15px;
            left: 10px;
        }

        .pd-ind-card h4 {
            font-size: 14px;
            font-weight: 700;
            margin-top: 10px;
            color: #1e1e1e;
        }

        .pd-cta {
            padding: 0 0 40px;
        }

        .pd-cta-box {
            background: #0a1a30;
            border-radius: 12px;
            padding: 30px 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: #fff;
        }

        .pd-cta-text h3 {
            font-size: 22px;
            font-weight: 700;
            margin-bottom: 4px;
        }

        .pd-cta-text p {
            font-size: 14px;
            color: #b0bed0;
        }

        .pd-cta-btns {
            display: flex;
            gap: 15px;
        }

        @media (max-width: 1024px) {
            .pd-benefit-grid {
                grid-template-columns: repeat(3, 1fr);
            }
            .pd-cap-grid {
                grid-template-columns: repeat(3, 1fr);
            }
            .pd-ind-grid {
                grid-template-columns: repeat(3, 1fr);
            }
            .pd-process-steps {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 768px) {
            .pd-hero {
                height: 430px;
            }
            .pd-hero h1 {
                font-size: 28px;
            }
            .pd-benefit-grid {
                grid-template-columns: 1fr;
            }
            .pd-cap-grid {
                grid-template-columns: 1fr;
            }
            .pd-ind-grid {
                grid-template-columns: 1fr;
            }
            .pd-process-steps {
                grid-template-columns: 1fr;
            }
            .pd-cta-box {
                flex-direction: column;
                text-align: center;
                gap: 15px;
            }
            .pd-cta-btns {
                flex-direction: column;
            }
        }
    

/* --- quality-control.html --- */

        .quality-hero {
            position: relative;
            color: #fff;
            min-height: 550px;
            display: flex;
            flex-direction: column;
            padding: 100px 0 60px;
            overflow: hidden;
            background: url('../img/quality-control-1.webp') center / cover no-repeat;
        }

        @media (max-width: 768px) {
            .quality-hero { min-height: 430px; }
        }

        .quality-hero::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(110deg, rgba(15, 23, 36, 0.88) 0%, rgba(15, 23, 36, 0.76) 38%, rgba(15, 23, 36, 0.28) 100%);
        }

        .quality-hero-content {
            position: relative;
            z-index: 1;
            max-width: 700px;
        }

        .quality-hero-content h1 {
            font-size: 48px;
            line-height: 1.2;
            font-weight: 900;
            margin-bottom: 20px;
            animation: heroFadeUp 0.8s ease both;
        }

        .quality-hero-content h3 {
            font-size: 20px;
            font-weight: 700;
            letter-spacing: 1px;
            margin-bottom: 18px;
            animation: heroFadeUp 0.8s 0.15s ease both;
        }

        .quality-hero-content p {
            max-width: 600px;
            color: #d1d5db;
            font-size: 16px;
            margin-bottom: 30px;
            line-height: 1.6;
            animation: heroFadeUp 0.8s 0.2s ease both;
        }

        .quality-hero-actions {
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
            animation: heroFadeUp 0.8s 0.35s ease both;
        }

        .quality-control-main {
            padding: 60px 0;
            background: #fff;
        }

        .quality-process-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
            margin-top: 40px;
        }

        .quality-process-card {
            background: #fff;
            padding: 40px 20px;
            text-align: center;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            transition: var(--transition);
        }

        .quality-process-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 30px rgba(33, 86, 169, 0.12);
            border-color: var(--color-primary);
        }

        .quality-process-icon {
            width: 70px;
            height: 70px;
            background: rgba(33, 86, 169, 0.08);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 20px;
        }

        .quality-process-icon i {
            font-size: 32px;
            color: var(--color-primary);
        }

        .quality-process-card h3 {
            font-size: 18px;
            font-weight: 700;
            margin-bottom: 4px;
            color: #1e1e1e;
        }

        .quality-process-card .qc-subtitle {
            font-size: 14px;
            font-weight: 600;
            color: #333;
            margin-bottom: 12px;
        }

        .quality-process-card p {
            font-size: 14px;
            color: #777;
            line-height: 1.5;
        }

        .quality-equipment-section {
            padding: 60px 0;
            background: #f8fafc;
        }

        .quality-equipment-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
            margin-top: 40px;
        }

        .quality-equipment-card img {
            width: 100%;
            height: 200px;
            object-fit: cover;
            border-radius: 8px;
            margin-bottom: 15px;
            background-color: #e2e8f0;
        }

        .quality-equipment-card h4 {
            font-size: 16px;
            font-weight: 700;
            margin-bottom: 4px;
            color: #1e1e1e;
        }

        .quality-equipment-card .eq-subtitle {
            font-size: 14px;
            font-weight: 600;
            color: #444;
            margin-bottom: 6px;
        }

        .quality-equipment-card p {
            font-size: 13px;
            color: #777;
        }

        .quality-standards-section {
            padding: 60px 0;
            background: #fff;
        }

        .quality-standards-row {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            gap: 24px;
            margin-top: 40px;
        }

        .quality-standard-item {
            flex: 1;
            min-width: 200px;
            display: flex;
            gap: 15px;
            align-items: flex-start;
        }

        .quality-standard-item i {
            font-size: 28px;
            color: var(--color-primary);
            margin-top: 5px;
            flex-shrink: 0;
        }

        .quality-standard-item h4 {
            font-size: 16px;
            font-weight: 700;
            margin-bottom: 8px;
            color: #1e1e1e;
        }

        .quality-standard-item p {
            font-size: 13px;
            color: #666;
            line-height: 1.4;
        }

        @media (max-width: 992px) {
            .quality-process-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            .quality-equipment-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 768px) {
            .quality-hero-content h1 {
                font-size: 32px;
            }
            .quality-hero-content h3 {
                font-size: 17px;
            }
            .quality-process-grid {
                grid-template-columns: 1fr;
            }
            .quality-equipment-grid {
                grid-template-columns: 1fr;
            }
            .quality-standards-row {
                flex-direction: column;
            }
        }
    

/* --- raw-materials.html --- */

        .rm-hero {
            height: 550px;
            display: flex;
            flex-direction: column;
            padding: 100px 0 60px;
            background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.3)), url('../img/raw-materials-1.webp') center / cover;
        }

        .rm-hero-content {
            color: #fff;
            max-width: 700px;
        }

        .rm-hero-content h1 {
            font-size: 48px;
            font-weight: 900;
            margin-bottom: 20px;
            line-height: 1.2;
            animation: heroFadeUp 0.8s ease both;
        }

        .rm-hero-content p {
            font-size: 16px;
            margin-bottom: 30px;
            color: #d1d5db;
            max-width: 600px;
            line-height: 1.6;
            animation: heroFadeUp 0.8s 0.2s ease both;
        }

        .rm-hero-btns {
            display: flex;
            gap: 16px;
            animation: heroFadeUp 0.8s 0.35s ease both;
        }

        .rm-benefits {
            padding: 50px 0;
        }

        .rm-benefit-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 30px;
            text-align: center;
        }

        .rm-benefit-item i {
            font-size: 32px;
            color: var(--color-primary);
            margin-bottom: 12px;
            display: block;
        }

        .rm-benefit-item h4 {
            font-size: 16px;
            font-weight: 700;
            margin-bottom: 6px;
            color: #1e1e1e;
        }

        .rm-benefit-item p {
            font-size: 13px;
            color: #666;
        }

        .rm-portfolio {
            padding: 0 0 50px;
        }

        .rm-portfolio-header {
            text-align: center;
            margin-bottom: 40px;
        }

        .rm-tag {
            color: var(--color-primary);
            font-weight: 700;
            font-size: 13px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            margin-bottom: 8px;
        }

        .rm-tag::before {
            content: '';
            width: 16px;
            height: 3px;
            background: var(--color-primary);
        }

        .rm-portfolio-header h2 {
            font-size: 28px;
            font-weight: 700;
            color: #1e1e1e;
        }

        .rm-portfolio-header p {
            color: #666;
            margin-top: 10px;
            max-width: 750px;
            margin-left: auto;
            margin-right: auto;
        }

        .rm-main-grid {
            display: grid;
            grid-template-columns: 240px 1fr;
            gap: 40px;
        }

        .rm-sidebar {
            list-style: none;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            overflow: hidden;
        }

        .rm-sidebar li {
            padding: 14px 20px;
            font-size: 14px;
            color: #333;
            border-bottom: 1px solid #e5e7eb;
            cursor: pointer;
        }

        .rm-sidebar li:last-child {
            border-bottom: 0;
        }

        .rm-sidebar li.rm-active {
            background: var(--color-primary);
            color: #fff;
        }

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

        .rm-mat-card {
            background: #fff;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            padding: 16px;
            text-align: left;
            transition: var(--transition);
        }

        .rm-mat-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(33, 86, 169, 0.1);
            border-color: var(--color-primary);
        }

        .rm-mat-card img {
            width: 100%;
            height: 130px;
            object-fit: cover;
            border-radius: 6px;
            margin-bottom: 12px;
            background-color: #e2e8f0;
        }

        .rm-mat-card h4 {
            font-size: 16px;
            font-weight: 700;
            margin-bottom: 4px;
            color: #1e1e1e;
        }

        .rm-mat-card p {
            font-size: 13px;
            color: #666;
            margin-bottom: 8px;
            line-height: 1.4;
            min-height: 40px;
        }

        .rm-mat-card a {
            font-size: 13px;
            color: var(--color-primary);
            font-weight: 600;
            text-decoration: none;
        }

        .rm-mat-card a:hover {
            text-decoration: underline;
        }

        .rm-comparison {
            padding: 50px 0;
            background: #fafbfc;
            overflow: hidden;
        }

        .rm-comp-wrap {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 40px;
        }

        .rm-comp-table {
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            overflow: hidden;
            max-width: 100%;
            background: #fff;
        }

        .rm-comp-table table {
            width: 100%;
            border-collapse: collapse;
        }

        .rm-comp-table th {
            background: #f8f9fa;
            padding: 14px;
            font-size: 13px;
            font-weight: 700;
            text-align: left;
            border-bottom: 1px solid #e5e7eb;
            color: #1e1e1e;
        }

        .rm-comp-table td {
            padding: 14px;
            font-size: 13px;
            border-bottom: 1px solid #f0f0f0;
            word-break: break-word;
        }

        .rm-comp-table tr:last-child td {
            border-bottom: 0;
        }

        .rm-rating-dots {
            display: flex;
            gap: 2px;
        }

        .rm-rating-dots span {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #e0e0e0;
            display: block;
        }

        .rm-rating-dots span.rm-filled {
            background: var(--color-primary);
        }

        .rm-legend {
            display: flex;
            gap: 20px;
            margin-top: 12px;
            font-size: 12px;
            color: #666;
        }

        .rm-legend span {
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .rm-legend span i {
            font-size: 8px;
        }

        .rm-help-box {
            background: #0a1a30;
            border-radius: 8px;
            padding: 30px;
            color: #fff;
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .rm-help-box .rm-help-img {
            border-radius: 6px;
            overflow: hidden;
        }

        .rm-help-box .rm-help-img img {
            width: 100%;
            height: auto;
            display: block;
        }

        .rm-help-box h3 {
            font-size: 20px;
            font-weight: 700;
            margin-bottom: 10px;
        }

        .rm-help-box p {
            font-size: 14px;
            color: #b0bed0;
            margin-bottom: 20px;
        }

        .rm-why {
            padding: 60px 0;
        }

        .rm-why h2 {
            text-align: center;
            font-size: 26px;
            font-weight: 700;
            color: #0a1a30;
            margin-bottom: 40px;
        }

        .rm-why-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 30px;
            text-align: center;
        }

        .rm-why-item .rm-icon-circle {
            width: 56px;
            height: 56px;
            border: 2px solid var(--color-primary);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 12px;
            font-size: 28px;
            color: var(--color-primary);
        }

        .rm-why-item h4 {
            font-size: 16px;
            font-weight: 700;
            margin-bottom: 6px;
            color: #1e1e1e;
        }

        .rm-why-item p {
            font-size: 13px;
            color: #666;
        }

        .rm-cta {
            padding: 0 0 50px;
        }

        .rm-cta-box {
            background: #0a1a30;
            border-radius: 12px;
            padding: 30px 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: #fff;
        }

        .rm-cta-box .rm-text h3 {
            font-size: 22px;
            font-weight: 700;
            margin-bottom: 4px;
        }

        .rm-cta-box .rm-text p {
            font-size: 14px;
            color: #b0bed0;
        }

        .rm-cta-btns {
            display: flex;
            gap: 15px;
        }

        @media (max-width: 1024px) {
            .rm-main-grid {
                grid-template-columns: 1fr;
            }
            .rm-material-grid {
                grid-template-columns: repeat(3, 1fr);
            }
            .rm-benefit-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            .rm-why-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            .rm-comp-wrap {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 768px) {
            .rm-hero {
                height: 430px;
            }
            .rm-hero-content h1 {
                font-size: 28px;
            }
            .rm-hero-btns {
                flex-direction: column;
            }
            .rm-main-grid {
                grid-template-columns: 1fr;
            }
            .rm-material-grid {
                grid-template-columns: 1fr;
            }
            .rm-benefit-grid {
                grid-template-columns: 1fr;
            }
            .rm-why-grid {
                grid-template-columns: 1fr;
            }
            .rm-comp-wrap {
                grid-template-columns: 1fr;
            }
            .rm-help-box {
                flex-direction: column;
                text-align: center;
            }
            .rm-portfolio-header h2 {
                font-size: 22px;
            }
            .rm-comp-table th,
            .rm-comp-table td {
                padding: 8px 6px;
                font-size: 11px;
            }
            .rm-cta-box {
                flex-direction: column;
                text-align: center;
                gap: 15px;
            }
            .rm-cta-btns {
                flex-direction: column;
            }
        }
    

/* --- rd-strength.html [1] --- */

        .rd-hero {
            height: 550px;
            display: flex;
            flex-direction: column;
            padding: 100px 0 60px;
            background: linear-gradient(rgba(9, 30, 66, 0.9), rgba(9, 30, 66, 0.6)), url('../img/engineering-team.webp') center / cover;
        }

        .rd-hero h1 {
            font-size: 48px;
            font-weight: 900;
            color: #fff;
            margin-bottom: 20px;
            line-height: 1.2;
            animation: heroFadeUp 0.8s ease both;
        }

        .rd-hero p {
            font-size: 16px;
            color: #d1d5db;
            max-width: 600px;
            line-height: 1.6;
            animation: heroFadeUp 0.8s 0.2s ease both;
        }

        @media(max-width:768px){
            .rd-hero{height:auto;padding:80px 0 40px}
            .rd-hero h1{font-size:28px}
            .rd-hero p{font-size:14px}
        }



/* --- rd-strength.html [2] --- */

.factory-section{padding:40px 0;border-bottom:1px solid #eef0f2}
.factory-section:last-child{border-bottom:0}
.factory-inner{display:flex;gap:40px;align-items:flex-start}

.f-left{flex:0 0 240px;padding-right:20px;border-right:2px solid var(--color-primary)}
.f-left .num{font-size:44px;font-weight:900;color:var(--color-primary);line-height:1;margin-bottom:6px}
.f-left h2{font-size:22px;font-weight:700;color:#0a1a30;margin-bottom:6px}
.f-left .sub{font-size:15px;font-weight:600;color:var(--color-primary)}
.f-left .desc{font-size:14px;color:#555;margin-top:10px;line-height:1.6}

.f-mid{flex:1}
.f-mid .tag{font-size:13px;font-weight:700;color:var(--color-primary);text-transform:uppercase;letter-spacing:1px;margin-bottom:8px;border-bottom:2px solid var(--color-primary);padding-bottom:6px;display:inline-block}
.f-mid .flist{list-style:none;margin-bottom:15px}
.f-mid .flist li{font-size:14px;color:#444;margin-bottom:4px;display:flex;align-items:center;gap:8px}
.f-mid .flist li i{color:var(--color-primary);font-size:10px}
.f-adv{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-top:10px}
.f-adv-item{background:#f0f4fa;border-radius:6px;padding:12px 8px;text-align:center;display:flex;flex-direction:column;align-items:center}
.f-adv-item i{font-size:20px;color:var(--color-primary);margin-bottom:4px}
.f-adv-item span{font-size:12px;color:#333;font-weight:500}

.f-right{flex:0 0 380px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.f-right .f-img{width:100%;height:140px;border-radius:8px;overflow:hidden;background:#e2e8f0}
.f-right .f-img img{width:100%;height:100%;object-fit:cover}
.f-right .f-img.full{grid-column:1/3;height:200px}

.f-right.cert{grid-template-columns:1fr 1fr 1fr;gap:10px}
.f-right.cert .f-img{height:120px}
.f-right.cert .f-img.full{grid-column:1/4;height:140px}

.f-process{display:flex;justify-content:space-between;gap:5px;margin:15px 0}
.f-process .fp-item{flex:1;text-align:center}
.f-process .fp-item .fp-icon{width:36px;height:36px;border-radius:50%;border:2px solid var(--color-primary);color:var(--color-primary);display:flex;align-items:center;justify-content:center;font-size:14px;margin:0 auto 4px}
.f-process .fp-item .fp-icon.arrow{border:none;color:var(--color-primary);font-size:12px}
.f-process .fp-item .fp-label{font-size:11px;color:#333;font-weight:600}

@media(max-width:1024px){
  .factory-inner{flex-direction:column}
  .f-left{border-right:0;border-bottom:2px solid var(--color-primary);padding-bottom:15px;padding-right:0;flex:auto;width:100%}
  .f-right{flex:auto;width:100%}
  .f-adv{grid-template-columns:repeat(2,1fr)}
  .f-right .f-img{height:120px}
}
@media(max-width:768px){
  .f-left .num{font-size:32px}
  .f-right{grid-template-columns:1fr}
  .f-right .f-img.full{grid-column:1/2;height:160px}
  .f-right.cert{grid-template-columns:1fr 1fr}
  .f-right.cert .f-img.full{grid-column:1/3}
  .f-adv{grid-template-columns:1fr}
  .f-process{flex-wrap:wrap;justify-content:center}
  .f-process .fp-item{flex:0 0 30%;margin-bottom:10px}
}


/* --- services.html --- */

        .sv-hero {
            height: 550px;
            display: flex;
            flex-direction: column;
            padding: 100px 0 60px;
            background: linear-gradient(rgba(10, 30, 60, 0.85), rgba(10, 30, 60, 0.5)), url('../img/factory.webp') center / cover;
        }
        .sv-hero h1 {
            font-size: 44px;
            font-weight: 900;
            color: #fff;
            margin-bottom: 16px;
            line-height: 1.2;
            animation: heroFadeUp 0.8s ease both;
        }
        .sv-hero p {
            font-size: 16px;
            color: #d1d5db;
            max-width: 600px;
            line-height: 1.6;
            animation: heroFadeUp 0.8s 0.2s ease both;
        }
        .sv-section-title {
            text-align: center;
            margin-bottom: 40px;
        }
        .sv-section-title h2 {
            font-size: 30px;
            font-weight: 700;
            color: #0a1a30;
            margin-bottom: 6px;
        }
        .sv-section-title p {
            font-size: 14px;
            color: #666;
        }
        .sv-approach {
            padding: 50px 0;
            background: #f8f9fa;
        }
        .sv-app-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
            text-align: center;
        }
        .sv-app-item {
            padding: 24px 16px;
        }
        .sv-app-item i {
            font-size: 34px;
            color: var(--color-primary);
            margin-bottom: 12px;
            display: block;
        }
        .sv-app-item h4 {
            font-size: 16px;
            font-weight: 700;
            color: #0a1a30;
            margin-bottom: 6px;
        }
        .sv-app-item p {
            font-size: 13px;
            color: #666;
        }
        @media (max-width: 1024px) {
            .sv-app-grid { grid-template-columns: repeat(2, 1fr); }
        }
        @media (max-width: 768px) {
            .sv-hero { height: 380px; }
            .sv-hero h1 { font-size: 28px; }
            .sv-app-grid { grid-template-columns: 1fr; }
        }
    

/* --- technical-docs.html --- */

        .td-hero {
            height: 550px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 100px 0 60px;
            background: linear-gradient(to right, rgba(8,27,51,0.92), rgba(8,27,51,0.65)), url('../img/equipment-showcase.webp') center / cover;
        }

        .td-hero .container { text-align: center; }

        .td-hero h1 {
            font-size: 54px;
            font-weight: 900;
            color: #fff;
            margin-bottom: 20px;
            line-height: 1.15;
            letter-spacing: 1px;
            animation: heroFadeUp 0.8s ease both;
        }

        .td-hero p {
            font-size: 20px;
            color: #d1d5db;
            max-width: 650px;
            line-height: 1.7;
            margin: 0 auto;
            animation: heroFadeUp 0.8s 0.2s ease both;
        }

        .td-list-section { padding: 40px 0; }

        .td-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .td-list-item {
            padding: 20px 0;
            border-bottom: 1px solid #edf2f7;
        }

        .td-list-item:last-child { border-bottom: none; }

        .td-list-item .td-date {
            font-size: 13px;
            color: #999;
            margin-bottom: 4px;
        }

        .td-list-item .td-date i { margin-right: 4px; }

        .td-list-item h3 {
            font-size: 16px;
            font-weight: 700;
            margin-bottom: 6px;
        }

        .td-list-item h3 a {
            color: #0b1f3b;
            text-decoration: none;
            transition: color 0.2s;
        }

        .td-list-item h3 a:hover { color: #1a56db; }

        .td-list-item .td-desc {
            font-size: 14px;
            color: #666;
            line-height: 1.6;
            margin-bottom: 8px;
        }

        .td-list-item .td-detail-link {
            font-size: 13px;
            font-weight: 600;
            color: #1a56db;
            text-decoration: none;
        }

        .td-list-item .td-detail-link:hover { text-decoration: underline; }

        .td-pagination {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 6px;
            margin-top: 30px;
            padding-top: 20px;
            border-top: 1px solid #edf2f7;
        }

        .td-pagination a {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            border: 1px solid #e5e7eb;
            border-radius: 4px;
            color: #333;
            text-decoration: none;
            font-size: 14px;
            transition: 0.2s;
        }

        .td-pagination a:hover {
            border-color: #1a56db;
            color: #1a56db;
        }

        .td-pagination a.active {
            background: #1a56db;
            color: #fff;
            border-color: #1a56db;
        }

        .td-pagination a.prev-next {
            width: auto;
            padding: 0 12px;
        }

        .td-category-nav {
            padding: 16px 0;
            background: #fff;
            border-bottom: 1px solid #edf2f7;
        }

        .td-cat-btns {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

        .td-cat-btn {
            display: inline-block;
            padding: 8px 20px;
            border: 1px solid #d1d5db;
            border-radius: 6px;
            color: #555;
            text-decoration: none;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.25s;
            background: #fff;
        }

        .td-cat-btn:hover {
            border-color: #1a56db;
            color: #1a56db;
            background: #f0f4ff;
        }

        .td-cat-btn.active {
            background: #1a56db;
            color: #fff;
            border-color: #1a56db;
        }

        @media (max-width: 768px) {
            .td-hero { height: 430px; }
            .td-hero h1 { font-size: 34px; }
            .td-cat-btn { padding: 6px 14px; font-size: 13px; }
        }
    

/* --- work.html --- */

        .news-hero {
            height: 550px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 100px 0 60px;
            background: linear-gradient(to right, rgba(8,27,51,0.92), rgba(8,27,51,0.65)), url('../img/factory.webp') center / cover;
        }

        .news-hero .container {
            text-align: center;
        }

        .news-hero h1 {
            font-size: 64px;
            font-weight: 900;
            color: #fff;
            margin-bottom: 20px;
            line-height: 1.15;
            letter-spacing: 1px;
            animation: heroFadeUp 0.8s ease both;
        }

        .news-hero p {
            font-size: 18px;
            color: #d1d5db;
            max-width: 600px;
            line-height: 1.6;
            margin: 0 auto;
            animation: heroFadeUp 0.8s 0.2s ease both;
        }

        .tabs-bar {
            background: #f8fafc;
            border-bottom: 1px solid #e5e7eb;
            padding: 16px 0;
        }

        .news-item:last-child {
            border-bottom: none;
        }

        .news-link {
            display: flex;
            gap: 28px;
            align-items: flex-start;
            text-decoration: none;
            color: inherit;
            transition: background 0.2s, box-shadow 0.2s;
        }

        .news-link:hover {
            background: rgba(33, 86, 169, 0.04);
            box-shadow: 0 2px 12px rgba(33, 86, 169, 0.06);
        }

        .news-link:hover .news-content h3 {
            color: var(--color-primary, #2156a9);
        }

        .tabs-flex {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .tabs-left {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }

        .tab-btn {
            font-size: 14px;
            padding: 7px 20px;
            border-radius: 20px;
            cursor: pointer;
            background: transparent;
            border: 1px solid #d1d5db;
            color: #666;
            transition: all 0.2s;
            font-family: inherit;
        }

        .tab-btn.active {
            background: var(--color-primary);
            color: #fff;
            border-color: var(--color-primary);
            font-weight: 500;
        }

        .tab-btn:hover:not(.active) {
            color: var(--color-primary);
            border-color: var(--color-primary);
        }

        .news-list {
            padding: 40px 0 60px;
        }

        .news-item {
            display: flex;
            gap: 28px;
            padding: 28px 0;
            border-bottom: 1px solid #f0f0f0;
            align-items: flex-start;
        }

        .news-item:last-child {
            border-bottom: none;
        }

        .news-img {
            flex: 0 0 280px;
            height: 185px;
            border-radius: 8px;
            overflow: hidden;
        }

        .news-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s;
        }

        .news-img:hover img {
            transform: scale(1.03);
        }

        .news-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            min-height: 185px;
        }

        .news-content h3 {
            font-size: 19px;
            font-weight: 700;
            color: #111;
            margin-bottom: 8px;
            cursor: pointer;
            line-height: 1.4;
            transition: color 0.2s;
        }

        .news-content h3:hover {
            color: var(--color-primary);
        }

        .news-content p {
            font-size: 14px;
            color: #666;
            line-height: 1.65;
            margin-bottom: 12px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .news-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 13px;
        }

        .news-meta .cat {
            color: var(--color-primary);
            font-weight: 600;
        }

        .news-meta .date {
            color: #999;
        }

        .pagination {
            padding: 30px 0 60px;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 6px;
        }

        .page-btn {
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 6px;
            border: 1px solid #e5e7eb;
            color: #666;
            font-size: 14px;
            cursor: pointer;
            background: #fff;
            transition: all 0.2s;
            font-family: inherit;
        }

        .page-btn:hover {
            border-color: var(--color-primary);
            color: var(--color-primary);
        }

        .page-btn.active {
            background: var(--color-primary);
            color: #fff;
            border-color: var(--color-primary);
        }

        .page-btn.disabled {
            color: #ccc;
            cursor: not-allowed;
            border-color: #f0f0f0;
        }

        .news-tabs-icon {
            color: #999;
            font-size: 16px;
        }

        .news-article-hero {
            min-height: 450px;
            display: flex;
            align-items: center;
            padding: 120px 0 60px;
            background: linear-gradient(to right, #0a1a30 0%, rgba(10, 26, 48, 0.7) 100%), url('../img/news1.webp') center / cover;
            color: #fff;
        }

        .news-article-title {
            font-size: 40px;
            font-weight: 900;
            color: #fff;
            max-width: 1100px;
            line-height: 1.25;
        }

        .news-article-section {
            padding: 40px 0 60px;
        }

        .news-article-wrap {
            max-width: 1120px;
            margin: 0 auto;
        }

        .news-article-meta {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            gap: 14px;
            margin-bottom: 28px;
            padding: 18px 24px;
            border: 1px solid #e5e7eb;
            border-radius: 16px;
            background: #f8fafc;
        }

        .news-article-meta .cat,
        .news-article-meta .date {
            font-size: 14px;
        }

        .news-article-body {
            font-size: 16px;
            color: #333;
            line-height: 1.8;
        }

        .news-article-body p {
            margin-bottom: 14px;
        }

        .news-article-body h2 {
            font-size: 24px;
            font-weight: 700;
            color: #0a1a30;
            margin-bottom: 12px;
        }

        .news-article-body h3 {
            font-size: 20px;
            font-weight: 700;
            color: #1e3a5f;
            margin: 20px 0 10px;
        }

        .news-article-body h4 {
            font-size: 17px;
            font-weight: 700;
            color: #0a1a30;
            margin: 14px 0 8px;
        }

        .news-article-body ul {
            padding-left: 24px;
            margin: 12px 0 18px;
            columns: 2;
            column-gap: 32px;
        }

        .news-article-body li {
            break-inside: avoid;
            margin-bottom: 8px;
        }

        .news-article-divider {
            border: none;
            border-top: 1px solid #e5e7eb;
            margin: 24px 0;
        }

        .news-article-table-wrap {
            overflow-x: auto;
            margin: 14px 0 22px;
        }

        .news-article-table {
            width: 100%;
            border-collapse: collapse;
            border: 1px solid #e5e7eb;
            font-size: 15px;
        }

        .news-article-table thead tr {
            background: #f8f9fa;
        }

        .news-article-table th {
            padding: 12px 16px;
            text-align: left;
            font-weight: 700;
            border: 1px solid #e5e7eb;
        }

        .news-article-table td {
            padding: 10px 16px;
            border: 1px solid #e5e7eb;
        }

        .qc-process-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 12px;
            margin: 16px 0 24px;
            text-align: center;
        }

        .news-qc-card {
            background: #f0f4ff;
            border-radius: 8px;
            padding: 20px 12px;
        }

        .news-qc-code {
            font-size: 24px;
            font-weight: 800;
            color: #1a56db;
            margin-bottom: 8px;
        }

        .news-qc-label {
            font-size: 14px;
            color: #555;
        }

        .news-article-cta {
            background: #f0f4ff;
            border-radius: 12px;
            padding: 30px;
            text-align: center;
            margin: 40px 0 20px;
        }

        .news-article-cta h2 {
            font-size: 22px;
            margin-bottom: 8px;
        }

        .news-article-cta-text {
            color: #555;
            margin-bottom: 20px;
        }

        .news-article-cta-actions {
            display: flex;
            gap: 12px;
            justify-content: center;
            flex-wrap: wrap;
        }

        .news-btn-outline-dark {
            background: #fff;
            color: #0a1a30;
            border-color: #0a1a30;
        }

        .news-btn-outline-dark:hover {
            background: #0a1a30;
            color: #fff;
        }

        @media (max-width: 1024px) {
            .news-hero { height: 320px; padding: 60px 0 40px; }
            .news-hero h1 { font-size: 32px; }
            .news-hero p { font-size: 15px; }
            .news-item { flex-direction: column; }
            .news-img { flex: auto; height: 200px; width: 100%; }
            .tabs-flex { flex-direction: column; align-items: flex-start; gap: 12px; }
            .news-content { min-height: auto; }
            .news-content h3 { font-size: 17px; }
            .news-article-hero { min-height: 360px; padding: 110px 0 50px; }
            .news-article-title { font-size: 34px; }
            .news-article-wrap {
                max-width: 1040px;
            }
            .news-article-meta {
                padding: 18px 20px;
            }
            .news-article-body ul {
                columns: 1;
            }
        }
        @media (max-width: 768px) {
            .news-hero { height: 240px; padding: 50px 0 30px; }
            .news-hero h1 { font-size: 26px; margin-bottom: 12px; }
            .news-hero p { font-size: 13px; }
            .news-item { padding: 20px 0; }
            .news-img { height: 160px; }
            .tabs-bar { padding: 12px 0; }
            .tab-btn { font-size: 12px; padding: 5px 14px; }
            .news-content h3 { font-size: 15px; }
            .news-content p { font-size: 13px; -webkit-line-clamp: 3; }
            .news-meta { flex-wrap: wrap; gap: 4px; }
            .pagination { padding: 20px 0 40px; gap: 4px; }
            .page-btn { width: 32px; height: 32px; font-size: 12px; }
            .news-article-hero { min-height: 300px; padding: 100px 0 40px; }
            .news-article-title { font-size: 28px; }
            .news-article-section { padding: 28px 0 48px; }
            .news-article-meta { gap: 8px; padding: 14px 16px; }
            .qc-process-grid { grid-template-columns: repeat(2, 1fr); }
            .news-article-body h2 { font-size: 18px; }
            .news-article-body h3 { font-size: 16px; }
            .news-article-body table { font-size: 13px; }
            .news-article-table th,
            .news-article-table td { padding: 8px 10px; }
            .news-article-cta { padding: 24px 18px; }
            .news-article-cta h2 { font-size: 20px; }
        }

        @media (max-width: 576px) {
            .news-article-hero {
                min-height: 260px;
                padding: 92px 0 34px;
            }

            .news-article-title {
                font-size: 24px;
            }

            .news-article-meta .cat,
            .news-article-meta .date,
            .news-qc-label {
                font-size: 13px;
            }

            .news-article-body {
                font-size: 15px;
            }

            .news-article-body ul {
                padding-left: 20px;
                columns: 1;
            }

            .qc-process-grid {
                grid-template-columns: 1fr;
            }

            .news-article-cta-actions .btn-primary,
            .news-article-cta-actions .btn-outline-light {
                width: 100%;
            }
        }
    

/* ===== ARTICLE BODY IMAGES ===== */
.article-body-img {
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    margin: 20px 0 16px;
    object-fit: cover;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

@media (max-width: 768px) {
    .article-body-img {
        border-radius: 8px;
        margin: 14px 0 10px;
    }
}

/* ===== ARTICLE TWO-COLUMN LAYOUT ===== */
.news-article-layout {
    display: flex;
    gap: 36px;
    align-items: flex-start;
}

.article-main {
    flex: 1;
    min-width: 0;
}

.article-sidebar {
    flex: 0 0 320px;
    max-width: 320px;
    position: sticky;
    top: 90px;
}

.sidebar-block {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 22px 20px;
    margin-bottom: 20px;
}

.sidebar-block-title {
    font-size: 16px;
    font-weight: 700;
    color: #0a1a30;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--color-primary, #2156a9);
    display: flex;
    align-items: center;
    gap: 8px;
}

.sidebar-block-title i {
    color: var(--color-primary, #2156a9);
    font-size: 15px;
}

.sidebar-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #eef1f6;
    transition: background 0.2s;
}

.sidebar-item:last-child {
    border-bottom: none;
}

.sidebar-item:hover {
    background: #f0f4ff;
    border-radius: 8px;
}

.sidebar-item-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #eef3ff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary, #2156a9);
    font-size: 15px;
    flex-shrink: 0;
}

.sidebar-item-text a {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    text-decoration: none;
    line-height: 1.45;
    display: block;
}

.sidebar-item-text a:hover {
    color: var(--color-primary, #2156a9);
}

.sidebar-item-desc {
    font-size: 12px;
    color: #888;
    line-height: 1.35;
    margin-top: 2px;
}

.sidebar-cta-block {
    background: linear-gradient(135deg, #0a1a30 0%, #1a3a5f 100%);
    border-radius: 14px;
    padding: 24px 20px;
    text-align: center;
    margin-bottom: 20px;
}

.sidebar-cta-block h3 {
    font-size: 17px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 8px;
}

.sidebar-cta-block p {
    font-size: 13px;
    color: #d1d5db;
    line-height: 1.55;
    margin-bottom: 16px;
}

.sidebar-cta-block .btn-primary {
    display: inline-block;
    padding: 10px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    background: var(--color-primary, #2156a9);
    color: #fff;
    text-decoration: none;
    transition: background 0.2s;
}

.sidebar-cta-block .btn-primary:hover {
    background: #1a4a8f;
}

@media (max-width: 1024px) {
    .news-article-layout {
        gap: 28px;
    }
    .article-sidebar {
        flex: 0 0 280px;
        max-width: 280px;
    }
}

@media (max-width: 768px) {
    .news-article-layout {
        flex-direction: column;
        gap: 0;
    }
    .article-sidebar {
        flex: auto;
        max-width: 100%;
        position: static;
        margin-top: 32px;
        order: 2;
    }
    .article-main {
        order: 1;
    }
    .sidebar-block {
        padding: 18px 16px;
    }
    .sidebar-block-title {
        font-size: 15px;
    }
    .sidebar-cta-block {
        padding: 20px 16px;
    }
}