/* ===== CSS Variables ===== */
:root {
    --blue-dark: #0a2342;
    --blue-primary: #154785;
    --blue-mid: #1e5fa8;
    --blue-light: #3d8ad6;
    --blue-pale: #e8f2fc;
    --blue-surface: #f4f8fd;
    --white: #ffffff;
    --gray-50: #f8fafc;
    --gray-100: #f1f5f9;
    --gray-200: #e2e8f0;
    --gray-300: #cbd5e1;
    --gray-400: #94a3b8;
    --gray-500: #64748b;
    --gray-600: #475569;
    --gray-700: #334155;
    --gray-800: #1e293b;
    --gray-900: #0f172a;
    --accent-orange: #f59e0b;
    --accent-green: #10b981;
    --font-display: 'Outfit', sans-serif;
    --font-body: 'Inter', sans-serif;
    --topbar-height: 44px;
    --header-height: 96px;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.05);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.04);
    --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.04);
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-2xl: 32px;
    --t-fast: 150ms ease;
    --t-base: 250ms ease;
    --t-slow: 400ms cubic-bezier(0.16,1,0.3,1);
}

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

html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; }

body {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    color: var(--gray-800);
    background: var(--white);
    overflow-x: hidden;
}

img { max-width:100%; height:auto; display:block; }
a { text-decoration:none; color:inherit; }
ul { list-style:none; }

.container { width:100%; max-width:1280px; margin:0 auto; padding:0 24px; }

/* Navigation */
/* Top Bar */
.top-bar {
    position:fixed; top:0; left:0; right:0; z-index:1001;
    height:var(--topbar-height);
    background:var(--blue-dark);
    border-bottom:1px solid rgba(255,255,255,0.08);
}
.top-bar-container {
    max-width:1280px; margin:0 auto; padding:0 24px;
    height:100%; display:flex; align-items:center;
    justify-content:space-between; gap:16px;
}
.top-bar-contact { display:flex; align-items:center; gap:20px; }
.top-bar-contact a {
    display:flex; align-items:center; gap:6px;
    color:rgba(255,255,255,0.8); font-size:13px; font-weight:500;
    transition:color var(--t-fast); font-family:var(--font-body);
}
.top-bar-contact a:hover { color:var(--white); }
.top-bar-contact a i { font-size:15px; }
.top-bar-search {
    display:flex; align-items:center;
    background:rgba(255,255,255,0.1); border-radius:var(--radius-lg);
    padding:4px; transition:background var(--t-fast);
}
.top-bar-search:focus-within { background:rgba(255,255,255,0.18); }
.top-search-input {
    width:160px; padding:4px 12px; border:none; outline:none;
    background:transparent; color:var(--white);
    font-size:13px; font-family:var(--font-body);
}
.top-search-input::placeholder { color:rgba(255,255,255,0.45); }
.top-search-btn {
    width:32px; height:28px; display:flex; align-items:center; justify-content:center;
    border:none; background:rgba(255,255,255,0.15); border-radius:12px;
    color:rgba(255,255,255,0.7); font-size:14px; cursor:pointer;
    transition:all var(--t-fast);
}
.top-search-btn:hover { background:rgba(255,255,255,0.25); color:var(--white); }

/* Navigation */
.nav-header {
    position:fixed; top:var(--topbar-height); left:0; right:0; z-index:1000;
    height:var(--header-height);
    background:rgba(255,255,255,1);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    border-bottom:1px solid var(--gray-100);
    transition:all var(--t-base);
}
.nav-header.scrolled { box-shadow:var(--shadow-md); height:78px; }
.nav-container {
    max-width:1280px; margin:0 auto; padding:0 24px;
    height:100%; display:flex; align-items:center;
    justify-content:space-between; gap:32px;
}
.nav-logo { flex-shrink:0; }
.logo-img { height:68px; width:auto; }
.nav-links { display:flex; gap:8px; }
.nav-links > li { position:relative; }
.nav-links a {
    padding:8px 16px; border-radius:var(--radius-sm);
    font-weight:600; font-size:16px; color:var(--gray-700);
    transition:all var(--t-fast);
}
.nav-links a:hover, .nav-links a.active {
    color:var(--blue-primary); background:var(--blue-pale);
}
.nav-links a.active { font-weight:700; }
.nav-dropdown > a::after { content:'▾'; margin-left:6px; font-size:11px; }
.nav-submenu { position:absolute; top:calc(100% + 10px); left:0; width:270px; padding:10px; background:var(--white); border:1px solid var(--gray-100); border-radius:var(--radius-md); box-shadow:var(--shadow-xl); opacity:0; visibility:hidden; transform:translateY(-6px); transition:all var(--t-fast); }
.nav-dropdown:hover .nav-submenu, .nav-dropdown:focus-within .nav-submenu { opacity:1; visibility:visible; transform:translateY(0); }
.nav-submenu a { display:block; padding:10px 12px; font-size:13px; border-radius:var(--radius-sm); }
.nav-actions { display:flex; align-items:center; gap:12px; }

.lang-switch {
    display:flex; align-items:center; gap:6px;
    padding:8px 12px; border:1px solid var(--gray-200);
    border-radius:var(--radius-sm); background:var(--white);
    color:var(--gray-600); font-size:14px; font-weight:500;
    cursor:pointer; transition:all var(--t-fast); font-family:var(--font-body);
}
.lang-switch:hover { border-color:var(--blue-light); color:var(--blue-primary); background:var(--blue-pale); }

.mobile-menu-btn { display:none; padding:8px; border:none; background:none; color:var(--gray-700); font-size:24px; cursor:pointer; border-radius:var(--radius-sm); }
.mobile-menu-btn:hover { background:var(--gray-100); }

/* Buttons */
.btn {
    display:inline-flex; align-items:center; gap:8px;
    padding:12px 24px; border-radius:var(--radius-md);
    font-family:var(--font-display); font-weight:600; font-size:15px;
    cursor:pointer; transition:all var(--t-fast); border:none; white-space:nowrap;
}
.btn-sm { padding:8px 16px; font-size:14px; }
.btn-lg { padding:16px 32px; font-size:16px; }
.btn-primary { background:var(--blue-primary); color:var(--white); box-shadow:0 1px 3px rgba(21,71,133,0.3); }
.btn-primary:hover { background:var(--blue-dark); box-shadow:0 4px 12px rgba(21,71,133,0.4); transform:translateY(-1px); }
.btn-outline { background:transparent; color:var(--blue-primary); border:1.5px solid var(--blue-primary); }
.btn-outline:hover { background:var(--blue-primary); color:var(--white); }
.btn-white { background:var(--white); color:var(--blue-primary); box-shadow:var(--shadow-md); }
.btn-white:hover { background:var(--gray-50); box-shadow:var(--shadow-lg); transform:translateY(-1px); }
.btn-outline-white { background:transparent; color:var(--white); border:1.5px solid rgba(255,255,255,0.5); }
.btn-outline-white:hover { background:rgba(255,255,255,0.15); border-color:var(--white); }

/* Sections */
.section { padding:100px 0; }
.section-header { text-align:center; max-width:640px; margin:0 auto 60px; }
.section-tag {
    display:inline-block; padding:6px 16px; background:var(--blue-pale);
    color:var(--blue-mid); font-size:13px; font-weight:600;
    border-radius:100px; letter-spacing:0.5px; text-transform:uppercase; margin-bottom:16px;
}
.section-title {
    font-family:var(--font-display); font-size:clamp(2rem,4vw,2.75rem);
    font-weight:700; color:var(--blue-dark); line-height:1.15;
    letter-spacing:-0.02em; margin-bottom:16px;
}
.section-desc { font-size:1.1rem; color:var(--gray-500); line-height:1.7; }
.center-cta { text-align:center; margin-top:48px; }

/* Hero Slider */
.hero-slider {
    position:relative; width:100%; height:100dvh; overflow:hidden;
    background:var(--blue-dark);
}
.hero-slides {
    position:relative; width:100%; height:100%;
}
.hero-slide {
    position:absolute; inset:0;
    display:flex; align-items:center; justify-content:flex-start;
    padding:164px max(24px, calc((100vw - 1200px) / 2)) 80px;
    background-size:cover; background-position:center;
    opacity:0; visibility:hidden;
    transition:opacity 0.8s ease, visibility 0.8s ease, transform 0.8s ease;
    transform:scale(1.03);
}
.hero-slide.active {
    opacity:1; visibility:visible;
    transform:scale(1);
    z-index:1;
}
.hero-slide-overlay {
    position:absolute; inset:0;
    background:linear-gradient(90deg, rgba(6,28,58,0.34) 0%, rgba(9,39,78,0.15) 52%, rgba(6,28,58,0.05) 100%);
    z-index:1;
}
.hero-content { position:relative; z-index:2; text-align:left; max-width:690px; }
.hero-tag {
    display:inline-block; padding:8px 20px;
    background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.2);
    color:rgba(255,255,255,0.9); font-size:14px; font-weight:500;
    border-radius:100px; margin-bottom:28px;
}
.hero-title {
    font-family:var(--font-display); font-size:clamp(2.5rem,6vw,4rem);
    font-weight:800; color:var(--white); line-height:1.1;
    letter-spacing:-0.02em; margin-bottom:24px;
}
.hero-highlight {
    background:linear-gradient(135deg, #60a5fa, #93c5fd);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.hero-desc { font-size:1.15rem; color:rgba(255,255,255,0.82); line-height:1.7; max-width:560px; margin:0 0 40px; }
.hero-ctas { display:flex; gap:16px; justify-content:flex-start; flex-wrap:wrap; margin-bottom:60px; }
.hero-ctas .btn-outline { color:var(--white); border-color:rgba(255,255,255,0.4); }
.hero-ctas .btn-outline:hover { background:rgba(255,255,255,0.15); border-color:var(--white); color:var(--white); }
.hero-stats { display:flex; gap:48px; justify-content:flex-start; flex-wrap:wrap; }
.stat-item { text-align:left; }
.stat-number { display:block; font-family:var(--font-display); font-size:2.5rem; font-weight:800; color:var(--white); line-height:1; }
.stat-label { display:block; font-size:0.85rem; color:rgba(255,255,255,0.6); margin-top:6px; text-transform:uppercase; letter-spacing:1px; }

/* Slider Navigation */
.hero-slider-arrow {
    position:absolute; top:50%; transform:translateY(-50%); z-index:10;
    width:48px; height:48px; border-radius:50%;
    background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.2);
    color:var(--white); font-size:24px; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:all var(--t-fast); backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
}
.hero-slider-arrow:hover {
    background:rgba(255,255,255,0.25); border-color:rgba(255,255,255,0.4);
}
.hero-slider-prev { left:24px; }
.hero-slider-next { right:24px; }

.hero-slider-dots {
    position:absolute; bottom:40px; left:50%; transform:translateX(-50%); z-index:10;
    display:flex; gap:12px;
}
.hero-dot {
    width:12px; height:12px; border-radius:50%;
    background:rgba(255,255,255,0.3); border:1.5px solid rgba(255,255,255,0.5);
    cursor:pointer; transition:all var(--t-fast);
}
.hero-dot.active {
    background:var(--white); border-color:var(--white);
    width:32px; border-radius:6px;
}

/* Services */
.services { background:var(--white); }
.services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.service-card {
    background:var(--white); border:1px solid var(--gray-100);
    border-radius:var(--radius-xl); padding:40px 32px;
    transition:all var(--t-slow); position:relative; overflow:hidden;
}
.service-card::before {
    content:''; position:absolute; top:0; left:0; right:0; height:3px;
    background:var(--blue-primary); transform:scaleX(0);
    transform-origin:left; transition:transform var(--t-slow);
}
.service-card:hover { border-color:var(--blue-light); box-shadow:var(--shadow-xl); transform:translateY(-4px); }
.service-card:hover::before { transform:scaleX(1); }
.service-icon {
    width:56px; height:56px; background:var(--blue-pale);
    border-radius:var(--radius-md); display:flex; align-items:center;
    justify-content:center; margin-bottom:24px; color:var(--blue-primary); font-size:28px;
}
.service-card h3 { font-family:var(--font-display); font-size:1.3rem; font-weight:700; color:var(--blue-dark); margin-bottom:12px; }
.service-card p { color:var(--gray-500); line-height:1.7; margin-bottom:20px; }
.service-link { display:inline-flex; align-items:center; gap:6px; color:var(--blue-primary); font-weight:600; font-size:0.95rem; transition:gap var(--t-fast); }
.service-link:hover { gap:10px; }

/* Product Highlights */
.product-highlights { background:var(--blue-surface); }
.products-scroll { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.product-highlight-card {
    background:var(--white); border-radius:var(--radius-xl); overflow:hidden;
    box-shadow:var(--shadow-sm); border:1px solid var(--gray-100);
    transition:all var(--t-slow);
}
.product-highlight-card:hover { box-shadow:var(--shadow-xl); border-color:var(--blue-light); transform:translateY(-2px); }
.product-highlight-img {
    display:block; width:100%; height:420px; overflow:hidden;
    background:var(--gray-50); position:relative;
}
.product-highlight-img img {
    width:100%; height:100%; object-fit:contain; padding:24px;
    transition:transform 0.4s cubic-bezier(0.16,1,0.3,1);
}
.product-highlight-img:hover img { transform:scale(1.06); }
.product-info { padding:24px; }
.product-type { display:inline-block; padding:4px 12px; background:var(--blue-pale); color:var(--blue-mid); font-size:12px; font-weight:600; border-radius:100px; margin-bottom:12px; }
.product-info h4 { font-family:var(--font-display); font-size:1.2rem; font-weight:700; color:var(--blue-dark); margin-bottom:8px; }
.product-info p { color:var(--gray-500); font-size:0.95rem; line-height:1.6; margin-bottom:16px; }
.product-specs { display:flex; flex-direction:column; gap:8px; }
.product-specs li { display:flex; gap:8px; font-size:0.9rem; color:var(--gray-600); }
.product-specs li span { font-weight:600; color:var(--gray-700); min-width:100px; }

/* Why Us */
.why-us-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.why-us-content .section-tag { margin-bottom:16px; }
.why-us-content .section-title { margin-bottom:20px; }
.why-us-content p { color:var(--gray-500); line-height:1.7; margin-bottom:24px; max-width:540px; }
.why-list { display:flex; flex-direction:column; gap:14px; margin-bottom:32px; }
.why-list li { display:flex; align-items:flex-start; gap:12px; font-size:0.95rem; color:var(--gray-700); }
.why-list i { color:var(--accent-green); font-size:1.2rem; margin-top:2px; flex-shrink:0; }
.why-us-card {
    background:linear-gradient(150deg, var(--blue-dark), var(--blue-primary));
    border-radius:var(--radius-2xl); padding:48px 40px;
    display:flex; flex-direction:column; gap:32px;
    box-shadow:var(--shadow-xl);
}
.why-us-stat { padding-bottom:24px; border-bottom:1px solid rgba(255,255,255,0.15); }
.why-us-stat:last-child { border-bottom:none; padding-bottom:0; }
.big-number { display:block; font-family:var(--font-display); font-size:2.5rem; font-weight:800; color:var(--white); line-height:1; margin-bottom:6px; }
.why-us-stat span:last-child { color:rgba(255,255,255,0.7); font-size:0.95rem; }

/* CTA Section */
.cta-section { padding:80px 0; }
.cta-card {
    background:linear-gradient(150deg, var(--blue-dark), var(--blue-primary));
    border-radius:var(--radius-2xl); padding:64px; text-align:center;
    box-shadow:var(--shadow-xl);
}
.cta-card h2 { font-family:var(--font-display); font-size:2.25rem; font-weight:700; color:var(--white); margin-bottom:16px; letter-spacing:-0.02em; }
.cta-card p { color:rgba(255,255,255,0.8); font-size:1.1rem; max-width:500px; margin:0 auto 32px; line-height:1.7; }
.cta-buttons { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.cta-card-alt { display:flex; align-items:center; justify-content:space-between; text-align:left; padding:48px 56px; gap:32px; }
.cta-card-content h2 { margin-bottom:8px; }
.cta-card-content p { margin:0; }

/* Page Hero */
.page-hero {
    position:relative;
    padding:204px 24px 100px;
    background:linear-gradient(160deg, var(--blue-dark) 0%, var(--blue-primary) 60%, #0d3b6e 100%);
    background-size:cover;
    background-position:center;
    text-align:center;
    overflow:hidden;
}
/* Dark overlay keeps text readable over background images */
.page-hero::before {
    content:'';
    position:absolute; inset:0;
    background:rgba(11,37,72,0.50);
    z-index:1;
}
.page-hero .container {
    position:relative; z-index:2;
}
.page-hero-brand-left { background-position:center; text-align:left; }
.page-hero-brand-left::before { background:linear-gradient(90deg, rgba(8,34,67,0.78) 0%, rgba(12,48,92,0.50) 48%, rgba(8,34,67,0.12) 100%); }
.page-hero-brand-left .page-hero-desc { margin-left:0; }
.page-hero .section-tag { background:rgba(255,255,255,0.15); color:rgba(255,255,255,0.9); border:1px solid rgba(255,255,255,0.2); }
.page-hero-title { font-family:var(--font-display); font-size:clamp(2.5rem,5vw,3.5rem); font-weight:800; color:var(--white); letter-spacing:-0.02em; margin-bottom:16px; }
.page-hero-desc { font-size:1.15rem; color:rgba(255,255,255,0.75); max-width:560px; margin:0 auto; line-height:1.7; }

/* Search Box */
.search-box { position:relative; max-width:480px; margin:32px auto 0; }
.search-box i { position:absolute; left:16px; top:50%; transform:translateY(-50%); color:var(--gray-400); font-size:20px; }
.search-input {
    width:100%; padding:14px 16px 14px 48px;
    border:1.5px solid rgba(255,255,255,0.2); border-radius:var(--radius-lg);
    background:rgba(255,255,255,0.1); color:var(--white);
    font-size:1rem; font-family:var(--font-body); transition:all var(--t-fast);
}
.search-input::placeholder { color:rgba(255,255,255,0.5); }
.search-input:focus { outline:none; border-color:rgba(255,255,255,0.5); background:rgba(255,255,255,0.15); }

/* Product Categories */
.product-category { margin-bottom:80px; }
.product-category:last-child { margin-bottom:0; }
.category-header { display:flex; align-items:flex-start; gap:24px; margin-bottom:40px; padding-bottom:24px; border-bottom:2px solid var(--gray-100); }
.category-icon { width:64px; height:64px; background:var(--blue-pale); border-radius:var(--radius-lg); display:flex; align-items:center; justify-content:center; color:var(--blue-primary); font-size:32px; flex-shrink:0; }
.category-header h2 { font-family:var(--font-display); font-size:1.75rem; font-weight:700; color:var(--blue-dark); letter-spacing:-0.02em; margin-bottom:8px; }
.category-header p { color:var(--gray-500); line-height:1.7; }
.products-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }

.product-card {
    background:var(--white); border-radius:var(--radius-xl); overflow:hidden;
    border:1px solid var(--gray-100); box-shadow:var(--shadow-sm);
    transition:all var(--t-slow);
}
.product-card:hover { box-shadow:var(--shadow-xl); border-color:var(--blue-light); transform:translateY(-2px); }
.product-card-img { height:200px; position:relative; }
.product-card-img.electric-bg { background:linear-gradient(135deg,#166534,#22c55e); }
.product-card-img.diesel-bg { background:linear-gradient(135deg,#92400e,#f59e0b); }
.product-card-img.reach-bg { background:linear-gradient(135deg,#1e3a8a,#3b82f6); }
.product-badge { position:absolute; top:16px; right:16px; padding:4px 14px; background:var(--white); color:var(--blue-primary); font-size:12px; font-weight:700; border-radius:100px; box-shadow:var(--shadow-md); }
.product-card-body { padding:24px; }
.product-card-body h3 { font-family:var(--font-display); font-size:1.15rem; font-weight:700; color:var(--blue-dark); margin-bottom:8px; }
.product-card-desc { color:var(--gray-500); font-size:0.9rem; line-height:1.6; margin-bottom:16px; }
.product-card-specs { display:flex; flex-direction:column; gap:6px; margin-bottom:20px; padding:14px; background:var(--gray-50); border-radius:var(--radius-md); }
.product-card-specs li { font-size:0.85rem; color:var(--gray-600); }
.product-card-specs strong { color:var(--gray-800); }
.product-card-actions { display:flex; gap:10px; }

/* Contact Page */
.contact-grid { display:grid; grid-template-columns:1fr 1.5fr; gap:64px; align-items:start; }
.contact-info h2, .contact-form-wrapper h2 { font-family:var(--font-display); font-size:2rem; font-weight:700; color:var(--blue-dark); margin-bottom:12px; letter-spacing:-0.02em; }
.contact-info > p, .contact-form-wrapper > p { color:var(--gray-500); line-height:1.7; margin-bottom:32px; }
.contact-methods { display:flex; flex-direction:column; gap:20px; margin-bottom:32px; }
.contact-method { display:flex; gap:16px; align-items:flex-start; }
.contact-method-icon { width:48px; height:48px; background:var(--blue-pale); border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; color:var(--blue-primary); font-size:20px; flex-shrink:0; }
.contact-method h4 { font-size:1rem; font-weight:600; color:var(--gray-800); margin-bottom:4px; }
.contact-method a, .contact-method span { color:var(--gray-500); font-size:0.95rem; }
.contact-method a:hover { color:var(--blue-primary); }
.contact-hours { padding:20px; background:var(--blue-surface); border-radius:var(--radius-lg); border:1px solid var(--blue-pale); }
.contact-hours h4 { display:flex; align-items:center; gap:8px; font-size:0.95rem; font-weight:600; color:var(--gray-700); margin-bottom:12px; }
.contact-hours ul { display:flex; flex-direction:column; gap:8px; }
.contact-hours li { display:flex; justify-content:space-between; font-size:0.9rem; color:var(--gray-500); }
.contact-hours li span:last-child { font-weight:500; color:var(--gray-700); }

/* Form */
.contact-form-wrapper { background:var(--white); padding:48px; border-radius:var(--radius-2xl); border:1px solid var(--gray-100); box-shadow:var(--shadow-lg); }
.contact-form { display:flex; flex-direction:column; gap:20px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.form-group { display:flex; flex-direction:column; gap:6px; }
.form-group label { font-size:0.9rem; font-weight:600; color:var(--gray-700); }
.form-group input, .form-group select, .form-group textarea {
    padding:12px 16px; border:1.5px solid var(--gray-200);
    border-radius:var(--radius-md); font-size:0.95rem;
    font-family:var(--font-body); color:var(--gray-800);
    transition:all var(--t-fast); background:var(--white);
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    outline:none; border-color:var(--blue-light);
    box-shadow:0 0 0 3px rgba(21,71,133,0.1);
}
.form-group textarea { resize:vertical; min-height:120px; }
.checkbox-label { display:flex; align-items:center; gap:10px; font-size:0.9rem; color:var(--gray-500); cursor:pointer; font-weight:400 !important; }
.checkbox-label input { width:18px; height:18px; accent-color:var(--blue-primary); }
.form-note { font-size:0.85rem; color:var(--gray-600); line-height:1.6; text-align:left; margin-top:4px; }
.form-note a { color:var(--blue-primary); text-decoration:underline; }
.form-hp { position:absolute !important; left:-10000px !important; width:1px !important; height:1px !important; overflow:hidden !important; }
.form-status { display:none; padding:14px 16px; border-radius:var(--radius-md); font-size:.92rem; line-height:1.5; outline:none; }
.form-status.success { display:block; color:#14532d; background:#ecfdf3; border:1px solid #86efac; }
.form-status.error { display:block; color:#7f1d1d; background:#fef2f2; border:1px solid #fca5a5; }
.contact-form button[disabled] { cursor:wait; opacity:.72; transform:none; }
.form-success { text-align:center; padding:48px 24px; }
.success-icon { font-size:56px; color:var(--accent-green); margin-bottom:16px; }
.form-success h3 { font-family:var(--font-display); font-size:1.5rem; font-weight:700; color:var(--blue-dark); margin-bottom:12px; }
.form-success p { color:var(--gray-500); line-height:1.7; }

/* About Page */
.about-grid { display:grid; grid-template-columns:1.2fr 1fr; gap:80px; align-items:start; }
.about-content h2 { font-family:var(--font-display); font-size:2rem; font-weight:700; color:var(--blue-dark); margin-bottom:24px; letter-spacing:-0.02em; }
.about-content p { color:var(--gray-500); line-height:1.8; margin-bottom:20px; font-size:1.05rem; }
.about-visual { display:flex; flex-direction:column; gap:24px; }
.about-card { background:var(--blue-surface); border-radius:var(--radius-xl); padding:32px; border:1px solid var(--blue-pale); }
.about-icon { width:48px; height:48px; background:var(--blue-pale); border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; color:var(--blue-primary); font-size:24px; margin-bottom:16px; }
.about-card h3 { font-family:var(--font-display); font-size:1.2rem; font-weight:700; color:var(--blue-dark); margin-bottom:8px; }
.about-card p { color:var(--gray-500); line-height:1.7; font-size:0.95rem; }

.values-section { background:var(--blue-surface); }
.values-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.value-card {
    background:var(--white); border-radius:var(--radius-xl); padding:32px;
    border:1px solid var(--gray-100); text-align:center;
    transition:all var(--t-slow);
}
.value-card:hover { box-shadow:var(--shadow-lg); border-color:var(--blue-light); transform:translateY(-2px); }
.value-icon { width:56px; height:56px; background:var(--blue-pale); border-radius:var(--radius-lg); display:flex; align-items:center; justify-content:center; color:var(--blue-primary); font-size:28px; margin:0 auto 20px; }
.value-card h3 { font-family:var(--font-display); font-size:1.15rem; font-weight:700; color:var(--blue-dark); margin-bottom:10px; }
.value-card p { color:var(--gray-500); font-size:0.9rem; line-height:1.7; }

.coverage-section { background:var(--white); }
.coverage-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.coverage-item {
    display:flex; align-items:center; gap:12px;
    padding:16px 24px; background:var(--blue-surface);
    border-radius:var(--radius-md); border:1px solid var(--blue-pale);
    font-weight:500; color:var(--gray-700); font-size:0.95rem;
    transition:all var(--t-fast);
}
.coverage-item i { color:var(--blue-primary); font-size:18px; }
.coverage-item:hover { border-color:var(--blue-light); box-shadow:var(--shadow-sm); }

/* Footer */
.footer { background:var(--blue-dark); color:var(--white); padding:80px 0 32px; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1.5fr; gap:48px; margin-bottom:48px; }
.footer-logo { height:40px; width:auto; margin-bottom:16px; }
.footer-brand p { color:rgba(255,255,255,0.6); font-size:0.95rem; line-height:1.7; max-width:280px; margin-bottom:20px; }
.footer-social { display:flex; gap:12px; }
.footer-social a { width:40px; height:40px; border-radius:var(--radius-sm); background:rgba(255,255,255,0.1); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,0.8); font-size:18px; transition:all var(--t-fast); }
.footer-social a:hover { background:var(--blue-primary); color:var(--white); }
.footer-links h4, .footer-contact h4 { font-family:var(--font-display); font-size:1rem; font-weight:600; margin-bottom:20px; }
.footer-links ul, .footer-contact ul { display:flex; flex-direction:column; gap:10px; }
.footer-links a, .footer-contact a { color:rgba(255,255,255,0.6); font-size:0.95rem; transition:color var(--t-fast); }
.footer-links a:hover, .footer-contact a:hover { color:var(--white); }
.footer-contact li { display:flex; align-items:center; gap:10px; color:rgba(255,255,255,0.6); font-size:0.95rem; }
.footer-contact i { font-size:16px; flex-shrink:0; }
.footer-bottom { padding-top:32px; border-top:1px solid rgba(255,255,255,0.1); text-align:center; }
.footer-bottom p { color:rgba(255,255,255,0.4); font-size:0.9rem; }
.footer-bottom a { display:inline-block; color:rgba(255,255,255,0.8); font-size:0.9rem; margin-top:10px; text-decoration:underline; }
.footer-bottom a:hover { color:var(--white); }
.privacy-content { max-width:860px; margin:0 auto; color:var(--gray-700); line-height:1.75; }
.privacy-content h2 { color:var(--blue-dark); margin:32px 0 10px; font-size:1.45rem; }
.privacy-content p, .privacy-content ul { margin-bottom:14px; }
.privacy-content ul { padding-left:24px; list-style:disc; }
.privacy-content a { color:var(--blue-primary); text-decoration:underline; }

/* Mobile Menu */
.mobile-menu {
    position:fixed; top:0; right:-100%; width:320px; max-width:85vw;
    height:100dvh; background:var(--white); z-index:2000;
    padding:24px; box-shadow:var(--shadow-xl);
    transition:right var(--t-slow); display:flex; flex-direction:column;
}
.mobile-menu.open { right:0; }
.mobile-menu-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:40px; }
.mobile-logo { height:52px; width:auto; }
.mobile-close-btn { padding:8px; border:none; background:var(--gray-100); border-radius:var(--radius-sm); color:var(--gray-700); font-size:20px; cursor:pointer; }
.mobile-nav-links { display:flex; flex-direction:column; gap:4px; flex:1; }
.mobile-nav-links a { display:block; padding:14px 16px; font-size:17px; font-weight:500; color:var(--gray-700); border-radius:var(--radius-md); transition:all var(--t-fast); }
.mobile-nav-links a:hover { background:var(--blue-pale); color:var(--blue-primary); }
.mobile-quote-btn { margin-top:auto; text-align:center; justify-content:center; padding:14px !important; font-size:16px !important; }
.menu-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:1500; opacity:0; visibility:hidden; transition:all var(--t-base); }
.menu-overlay.open { opacity:1; visibility:visible; }

/* Animations */
[data-reveal] { opacity:0; transform:translateY(30px); transition:all 0.7s cubic-bezier(0.16,1,0.3,1); }
[data-reveal].revealed { opacity:1; transform:translateY(0); }

/* Responsive */
@media (max-width: 1024px) {
    .services-grid, .products-scroll, .products-grid { grid-template-columns:repeat(2,1fr); }
    .why-us-grid { grid-template-columns:1fr; gap:48px; }
    .about-grid { grid-template-columns:1fr; gap:48px; }
    .values-grid { grid-template-columns:repeat(2,1fr); }
    .coverage-grid { grid-template-columns:repeat(3,1fr); }
    .footer-grid { grid-template-columns:1fr 1fr; }
    .contact-grid { grid-template-columns:1fr; }
    .cta-card-alt { flex-direction:column; text-align:center; }
}

@media (max-width: 768px) {
    .nav-links { display:none; }
    .nav-actions .btn-primary { display:none; }
    .mobile-menu-btn { display:block; }
    .section { padding:64px 0; }
    .services-grid, .products-scroll, .products-grid { grid-template-columns:1fr; }
    .hero-stats { gap:32px; }
}

/* ===== Product Detail Page ===== */
.breadcrumb { padding:144px 0 0; background:var(--blue-surface); }
.breadcrumb .container { display:flex; align-items:center; gap:8px; padding-top:16px; padding-bottom:16px; font-size:0.9rem; }
.breadcrumb a { color:var(--blue-primary); font-weight:500; }
.breadcrumb a:hover { text-decoration:underline; }
.breadcrumb span { color:var(--gray-400); }
.breadcrumb span:last-child { color:var(--gray-600); }

.product-detail-hero { padding:40px 0 80px; background:var(--blue-surface); }
.product-detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; }

.product-detail-gallery { position:relative; }
.gallery-main { width:100%; height:420px; border-radius:var(--radius-xl); position:relative; overflow:hidden; }
.gallery-main.electric-bg { background:linear-gradient(135deg,#166534,#22c55e); }
.gallery-main .product-badge { top:20px; left:20px; right:auto; padding:6px 18px; font-size:14px; }

.gallery-thumbs { display:flex; gap:12px; margin-top:12px; }
.thumb { width:80px; height:60px; border-radius:var(--radius-md); cursor:pointer; border:2px solid transparent; opacity:0.5; transition:all var(--t-fast); }
.thumb.active { border-color:var(--blue-primary); opacity:1; }

.product-detail-info { position:sticky; top:144px; }
.product-detail-info .product-type { margin-bottom:16px; }
.product-detail-info h1 { font-family:var(--font-display); font-size:clamp(1.75rem,3vw,2.5rem); font-weight:800; color:var(--blue-dark); line-height:1.2; letter-spacing:-0.02em; margin-bottom:20px; }
.product-detail-desc { color:var(--gray-500); font-size:1.05rem; line-height:1.7; margin-bottom:28px; }

.product-key-specs { display:flex; gap:24px; margin-bottom:32px; flex-wrap:wrap; }
.key-spec { display:flex; align-items:flex-start; gap:12px; padding:16px; background:var(--white); border-radius:var(--radius-md); border:1px solid var(--gray-100); min-width:150px; }
.key-spec i { color:var(--blue-primary); font-size:24px; margin-top:2px; }
.key-spec-value { display:block; font-family:var(--font-display); font-weight:700; font-size:1.1rem; color:var(--blue-dark); }
.key-spec-label { display:block; font-size:0.8rem; color:var(--gray-400); text-transform:uppercase; letter-spacing:0.5px; }

.product-detail-ctas { display:flex; gap:16px; flex-wrap:wrap; }

/* Features Grid */
.features-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.feature-card {
    background:var(--white); border:1px solid var(--gray-100);
    border-radius:var(--radius-xl); padding:32px;
    transition:all var(--t-slow);
}
.feature-card:hover { border-color:var(--blue-light); box-shadow:var(--shadow-lg); transform:translateY(-2px); }
.feature-icon { width:48px; height:48px; background:var(--blue-pale); border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; color:var(--blue-primary); font-size:24px; margin-bottom:20px; }
.feature-card h3 { font-family:var(--font-display); font-size:1.1rem; font-weight:700; color:var(--blue-dark); margin-bottom:10px; }
.feature-card p { color:var(--gray-500); font-size:0.9rem; line-height:1.7; }

/* Specs Table */
.specs-section { background:var(--blue-surface); }
.specs-table-wrapper { overflow-x:auto; border-radius:var(--radius-xl); border:1px solid var(--gray-200); background:var(--white); }
.specs-table { width:100%; border-collapse:collapse; font-size:0.9rem; }
.specs-table thead { background:var(--blue-primary); color:var(--white); }
.specs-table th { padding:14px 16px; text-align:left; font-weight:600; font-size:0.85rem; white-space:nowrap; }
.specs-table th:first-child { border-radius:var(--radius-xl) 0 0 0; }
.specs-table th:last-child { border-radius:0 var(--radius-xl) 0 0; }
.specs-table td { padding:12px 16px; border-bottom:1px solid var(--gray-100); color:var(--gray-600); }
.specs-table tr:last-child td { border-bottom:none; }
.specs-table tr:hover td { background:var(--blue-pale); }
.specs-table td strong { color:var(--gray-800); }

/* Dual Column */
.dual-col { display:grid; grid-template-columns:1fr 1fr; gap:40px; }
.dual-col h3 { font-family:var(--font-display); font-size:1.3rem; font-weight:700; color:var(--blue-dark); margin-bottom:20px; display:flex; align-items:center; gap:10px; }
.dual-col h3 i { color:var(--accent-green); }
.dual-col .optional h3 i { color:var(--blue-primary); }
.check-list { list-style:none; display:flex; flex-direction:column; gap:10px; }
.check-list li { padding:10px 16px; background:var(--gray-50); border-radius:var(--radius-sm); font-size:0.9rem; color:var(--gray-600); position:relative; padding-left:32px; }
.check-list li::before { content:''; position:absolute; left:12px; top:50%; transform:translateY(-50%); width:6px; height:6px; border-radius:50%; background:var(--accent-green); }

/* Applications */
.applications-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:16px; }
.app-card {
    text-align:center; padding:24px 16px; background:var(--blue-surface);
    border-radius:var(--radius-lg); border:1px solid var(--blue-pale);
    transition:all var(--t-fast);
}
.app-card i { font-size:32px; color:var(--blue-primary); margin-bottom:12px; display:block; }
.app-card h4 { font-family:var(--font-display); font-size:0.95rem; font-weight:600; color:var(--gray-700); }
.app-card:hover { border-color:var(--blue-light); box-shadow:var(--shadow-md); transform:translateY(-2px); }

/* Features Alt */
.features-alt { background:var(--white); }

@media (max-width: 1024px) {
    .product-detail-grid { grid-template-columns:1fr; gap:40px; }
    .features-grid { grid-template-columns:repeat(2,1fr); }
    .applications-grid { grid-template-columns:repeat(3,1fr); }
    .dual-col { grid-template-columns:1fr; }
}
@media (max-width: 768px) {
    .features-grid { grid-template-columns:1fr; }
    .applications-grid { grid-template-columns:repeat(2,1fr); }
    .product-detail-ctas { flex-direction:column; }
    .product-detail-ctas .btn { width:100%; justify-content:center; }
    .specs-table { font-size:0.8rem; }
    .specs-table th, .specs-table td { padding:10px 12px; }
}

/* ===== New Product Page - Category Card Style ===== */
.cat-tabs {
    display:flex; gap:8px; flex-wrap:wrap; margin-bottom:40px;
    padding-bottom:2px; overflow-x:auto; -webkit-overflow-scrolling:touch;
}
.cat-tab {
    padding:10px 20px; border:1.5px solid var(--gray-200); border-radius:100px;
    background:var(--white); color:var(--gray-600); font-size:14px; font-weight:500;
    cursor:pointer; transition:all var(--t-fast); white-space:nowrap;
    font-family:var(--font-body);
}
.cat-tab:hover { border-color:var(--blue-light); color:var(--blue-primary); }
.cat-tab.active { background:var(--blue-primary); color:var(--white); border-color:var(--blue-primary); }
.cat-select-wrap { display:none; margin-bottom:28px; }
.cat-select-wrap label { display:block; margin-bottom:8px; color:var(--gray-600); font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.cat-select { width:100%; padding:13px 44px 13px 14px; border:1.5px solid var(--gray-200); border-radius:var(--radius-md); background:var(--white); color:var(--blue-dark); font:600 15px var(--font-body); }

.cat-desc { margin-bottom:40px; padding:24px 28px; border-left:4px solid var(--blue-primary); border-radius:0 var(--radius-lg) var(--radius-lg) 0; background:var(--blue-surface); }
.cat-desc h2 { font-family:var(--font-display); font-size:1.8rem; font-weight:700; color:var(--blue-dark); margin-bottom:12px; letter-spacing:-0.02em; }
.cat-desc p { color:var(--gray-500); line-height:1.7; max-width:720px; }
.cat-desc-points { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px 22px; max-width:1000px; }
.cat-desc-points li { position:relative; padding-left:22px; color:var(--gray-600); line-height:1.55; }
.cat-desc-points li::before { content:'✓'; position:absolute; left:0; top:0; color:var(--blue-primary); font-weight:800; }

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

.cat-product-card {
    background:var(--white); border-radius:10px; overflow:hidden;
    border:1px solid #e8ecf0; box-shadow:0 2px 8px rgba(0,0,0,0.08);
    transition:all var(--t-base); display:flex; flex-direction:column;
}
.cat-product-card:hover { box-shadow:0 4px 16px rgba(0,0,0,0.12); transform:translateY(-2px); }

.cat-product-link { display:block; width:100%; height:100%; position:relative; cursor:pointer; }
.cat-product-img { aspect-ratio:1/1; overflow:hidden; position:relative; background:#f5f7fa; }
.cat-product-img img { width:100%; height:100%; object-fit:contain; padding:12px; position:absolute; inset:0; transition:opacity 0.35s ease; }
.cat-product-img img.hover-img { opacity:0; }
.cat-product-img:hover img.hover-img { opacity:1; }
.cat-product-img.placeholder { display:flex; align-items:center; justify-content:center; font-size:48px; color:var(--white); }

.cat-product-body { padding:20px; display:flex; flex-direction:column; flex:1; }
.cat-product-tags { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
.cat-product-tags span {
    padding:3px 10px; background:var(--blue-pale); color:var(--blue-mid);
    font-size:11px; font-weight:600; border-radius:100px; letter-spacing:0.5px;
    text-transform:uppercase;
}

.cat-product-body h3 {
    font-family:var(--font-display); font-size:1.05rem; font-weight:700;
    color:var(--blue-dark); margin-bottom:16px; line-height:1.3;
}
.cat-product-body h3 a,
.product-title-link { color:inherit; text-decoration:none; }
.cat-product-body h3 a:hover,
.product-title-link:hover { color:var(--blue-primary); text-decoration:underline; text-underline-offset:3px; }

.cat-product-specs { display:flex; flex-direction:column; gap:10px; margin-bottom:20px; }
.cat-product-specs > div { display:flex; justify-content:space-between; align-items:baseline; padding-bottom:8px; border-bottom:1px solid var(--gray-100); }
.cat-product-specs .spec-label { font-size:0.8rem; color:var(--gray-400); text-transform:uppercase; letter-spacing:0.5px; }
.cat-product-specs .spec-value { font-size:0.9rem; font-weight:600; color:var(--gray-700); }

.cat-product-actions { display:flex; gap:8px; }
.cat-product-body .cat-product-actions { margin-top:auto; }
.cat-product-actions .btn-sm { flex:1; justify-content:center; }
.cat-product-card-featured { border-color:var(--blue-light); box-shadow:0 8px 24px rgba(21,71,133,.14); }

/* Guide */
.guide-section { background:var(--blue-surface); }
.guide-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.guide-card {
    background:var(--white); border-radius:var(--radius-xl); padding:32px;
    border:1px solid var(--gray-100); transition:all var(--t-slow);
}
.guide-card:hover { box-shadow:var(--shadow-lg); border-color:var(--blue-light); }
.guide-card i { font-size:32px; color:var(--blue-primary); margin-bottom:16px; display:block; }
.guide-card h4 { font-family:var(--font-display); font-size:1.1rem; font-weight:700; color:var(--blue-dark); margin-bottom:12px; }
.guide-card p { color:var(--gray-500); font-size:0.9rem; line-height:1.7; }

@media (max-width: 1024px) {
    .cat-products-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 768px) {
    .cat-products-grid { grid-template-columns:1fr; }
    .guide-grid { grid-template-columns:1fr; }
    .cat-tabs { display:none; }
    .cat-select-wrap { display:block; }
}

/* Hide the temporary Netlify preview badge in public-facing pages. */
#nl-badge-frame { display:none !important; }

/* Compare */
.compare-label {
    display:flex; align-items:center; gap:8px; margin-bottom:16px;
    font-size:0.85rem; color:var(--gray-500); cursor:pointer;
}
.compare-label input { accent-color:var(--blue-primary); width:16px; height:16px; }

.compare-bar {
    position:fixed; bottom:0; left:0; right:0; z-index:999;
    background:var(--white); border-top:2px solid var(--blue-primary);
    box-shadow:0 -4px 24px rgba(0,0,0,0.1); padding:16px 0;
    transform:translateY(100%); transition:transform var(--t-slow);
}
.compare-bar.show { transform:translateY(0); }
.compare-bar-inner { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.compare-bar-left { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.compare-bar-left strong { color:var(--blue-dark); white-space:nowrap; }
.compare-bar-items { display:flex; gap:8px; flex-wrap:wrap; }
.compare-item-pill {
    display:inline-flex; align-items:center; gap:6px;
    padding:4px 12px; background:var(--blue-pale); border-radius:100px;
    font-size:0.8rem; color:var(--blue-primary); font-weight:500; max-width:180px;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.compare-remove { border:none; background:none; color:var(--blue-primary); cursor:pointer; font-size:16px; line-height:1; padding:0; }
.compare-bar-right { display:flex; gap:8px; }

/* Compare Page */
.compare-page { padding:120px 0 80px; }
.compare-table-wrap { overflow-x:auto; }
.compare-table { width:100%; border-collapse:collapse; min-width:600px; }
.compare-table thead th { padding:20px; background:var(--blue-surface); border-bottom:2px solid var(--gray-200); text-align:center; vertical-align:top; }
.compare-table thead th:first-child { text-align:left; background:transparent; }
.compare-table thead h3 { font-family:var(--font-display); font-size:1.1rem; color:var(--blue-dark); margin-bottom:4px; }
.compare-table thead .compare-img { width:120px; height:90px; background:var(--gray-100); border-radius:var(--radius-md); margin:0 auto 12px; display:flex; align-items:center; justify-content:center; font-size:28px; }
.compare-table thead .compare-img.electric { background:linear-gradient(135deg,#166534,#22c55e); color:white; }
.compare-table thead .compare-img.diesel { background:linear-gradient(135deg,#92400e,#f59e0b); color:white; }
.compare-table thead .compare-img.reach { background:linear-gradient(135deg,#1e3a8a,#3b82f6); color:white; }
.compare-table td { padding:14px 20px; border-bottom:1px solid var(--gray-100); text-align:center; }
.compare-table td:first-child { text-align:left; font-weight:600; color:var(--gray-700); background:var(--gray-50); white-space:nowrap; }
.compare-table td { font-size:0.9rem; color:var(--gray-600); }

@media (max-width: 768px) {
    .compare-bar-inner { flex-direction:column; align-items:stretch; }
    .compare-bar-right { justify-content:flex-end; }
}

/* ===== Product Detail Page ===== */
.breadcrumb-nav { padding:calc(var(--topbar-height) + var(--header-height)) 0 0; background:var(--white); }
.breadcrumb-nav .container { display:flex; align-items:center; gap:8px; padding:20px 0; font-size:0.85rem; flex-wrap:wrap; }
.breadcrumb-nav a { color:var(--blue-primary); font-weight:500; }
.breadcrumb-nav a:hover { text-decoration:underline; }
.breadcrumb-nav span { color:var(--gray-400); }
.breadcrumb-nav span:last-child { color:var(--gray-600); }

/* Hero */
.pd-hero { padding:24px 0 60px; background:var(--white); }
.pd-hero-grid { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; }
.pd-summary-list { display:grid; gap:10px; margin:18px 0 26px; }
.pd-summary-list li { position:relative; padding:10px 12px 10px 38px; border:1px solid var(--gray-100); border-radius:var(--radius-md); background:var(--gray-50); color:var(--gray-600); line-height:1.55; }
.pd-summary-list li::before { content:'✓'; position:absolute; left:14px; top:10px; color:var(--blue-primary); font-weight:800; }
.pd-summary-list .pd-enquiry-point { border-color:#f4c56b; background:#fff8e8; color:#7a4b00; font-weight:600; }
.pd-summary-list .pd-enquiry-point::before { content:'!'; color:#b76b00; }

/* Gallery */
.pd-gallery { position:sticky; top:144px; }
.pd-main-img { background:var(--gray-50); border-radius:var(--radius-xl); overflow:hidden; border:1px solid var(--gray-100); cursor:zoom-in; }
.pd-main-img img { width:100%; height:auto; display:block; max-height:500px; object-fit:contain; padding:20px; }
.pd-thumbs { display:flex; display:-webkit-flex; flex-direction:row; -webkit-flex-direction:row; gap:10px; margin-top:12px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:4px; flex-wrap:nowrap; -webkit-flex-wrap:nowrap; }
.pd-thumbs::-webkit-scrollbar { display:none; }
.pd-thumbs img { width:72px; height:72px; min-width:72px; max-width:72px; min-height:72px; max-height:72px; flex:0 0 72px; border-radius:var(--radius-md); border:2px solid transparent; cursor:pointer; object-fit:cover; opacity:0.6; transition:all var(--t-fast); }
.pd-thumbs img:hover { opacity:0.9; }
.pd-thumbs img.active { border-color:var(--blue-primary); opacity:1; }

/* Lightbox */
.pd-lightbox { position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,0.92); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:40px; }
.pd-lightbox img { max-width:90%; max-height:80vh; object-fit:contain; border-radius:var(--radius-lg); }
.pd-lightbox-close { position:absolute; top:20px; right:20px; background:none; border:none; color:var(--white); font-size:36px; cursor:pointer; line-height:1; }
.pd-lightbox-thumbs { display:flex; gap:10px; margin-top:20px; }
.pd-lightbox-thumbs img { width:56px; height:56px; border-radius:var(--radius-sm); border:2px solid rgba(255,255,255,0.3); cursor:pointer; opacity:0.5; transition:all var(--t-fast); }
.pd-lightbox-thumbs img.active { border-color:var(--white); opacity:1; }

/* Info */
.pd-info { padding-top:10px; }
.pd-badge-row { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:16px; }
.pd-badge { padding:4px 12px; background:var(--blue-pale); color:var(--blue-mid); font-size:11px; font-weight:600; border-radius:100px; letter-spacing:0.5px; text-transform:uppercase; }
.pd-brand-logo { height:36px; margin-bottom:20px; display:block; }
.pd-title { font-family:var(--font-display); font-size:clamp(1.75rem,3vw,2.5rem); font-weight:800; color:var(--blue-dark); line-height:1.15; letter-spacing:-0.02em; margin-bottom:4px; }
.pd-subtitle { font-family:var(--font-display); font-size:1.15rem; font-weight:500; color:var(--gray-500); margin-bottom:20px; }
.pd-desc { color:var(--gray-500); line-height:1.7; margin-bottom:28px; font-size:0.95rem; }

.pd-key-stats { display:flex; gap:20px; margin-bottom:28px; flex-wrap:wrap; }
.pd-stat { flex:1; min-width:130px; padding:20px; background:var(--blue-surface); border-radius:var(--radius-lg); border:1px solid var(--blue-pale); text-align:center; }
.pd-stat-val { display:block; font-family:var(--font-display); font-size:1.1rem; font-weight:700; color:var(--blue-dark); margin-bottom:4px; }
.pd-stat-label { display:block; font-size:0.8rem; color:var(--gray-400); text-transform:uppercase; letter-spacing:0.5px; }

.pd-ctas { display:flex; gap:12px; margin-bottom:28px; }
.pd-ctas .btn { flex:1; justify-content:center; }

.pd-warranty { display:flex; flex-direction:column; gap:12px; padding-top:20px; border-top:1px solid var(--gray-100); }
.pd-warranty-item { display:flex; gap:12px; align-items:flex-start; }
.pd-warranty-item i { color:var(--accent-green); font-size:22px; margin-top:1px; }
.pd-warranty-item strong { display:block; color:var(--gray-800); font-size:0.9rem; }
.pd-warranty-item span { color:var(--gray-400); font-size:0.8rem; }

/* Highlights - alternating image/text */
.pd-highlights { padding:60px 0; background:var(--blue-surface); }
.pd-highlight-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.pd-highlight-card { display:flex; flex-direction:column; }
.pd-highlight-card-img { aspect-ratio:1/1; border-radius:var(--radius-xl); overflow:hidden; margin-bottom:20px; }
.pd-highlight-card-img img { width:100%; height:100%; object-fit:cover; display:block; }
.pd-highlight-card h3 { font-family:var(--font-display); font-size:1.1rem; font-weight:700; color:var(--blue-dark); margin-bottom:10px; line-height:1.3; }
.pd-highlight-card p { color:var(--gray-500); line-height:1.6; font-size:0.9rem; }

/* Features Tabs */
.pd-features { padding:80px 0; }
.pd-section-title { font-family:var(--font-display); font-size:1.5rem; font-weight:800; color:var(--blue-dark); margin-bottom:32px; text-transform:uppercase; letter-spacing:0.5px; }.pd-features-tabs { display:flex; gap:0; margin-bottom:0; }
.pd-features-tab {
    flex:1; padding:18px 24px; background:var(--gray-100); border:none;
    font-family:var(--font-display); font-size:1.05rem; font-weight:700;
    color:var(--gray-500); cursor:pointer; transition:all var(--t-fast);
    text-align:center;
}
.pd-features-tab:first-child { border-radius:var(--radius-lg) 0 0 0; }
.pd-features-tab:last-child { border-radius:0 var(--radius-lg) 0 0; }
.pd-features-tab:hover { color:var(--blue-primary); background:var(--blue-pale); }
.pd-features-tab.active { background:var(--blue-primary); color:var(--white); }
.pd-features-panels { background:var(--blue-surface); border-radius:0 0 var(--radius-xl) var(--radius-xl); border:1px solid var(--blue-pale); border-top:none; }
.pd-features-panel { display:none; padding:40px; animation:fadeIn 0.3s ease; }
.pd-features-panel.active { display:block; }
.pd-features-panel ul { list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:16px 32px; }
.pd-features-panel li { font-size:0.95rem; color:var(--gray-600); padding-left:20px; position:relative; line-height:1.6; }
.pd-features-panel li::before { content:'•'; position:absolute; left:0; color:var(--blue-primary); font-weight:700; }

/* Specs Grid */
.pd-specs { padding:80px 0; background:var(--blue-surface); }
.pd-specs-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--gray-200); border-radius:var(--radius-xl); overflow:hidden; border:1px solid var(--gray-200); }
.pd-spec-item { background:var(--white); padding:24px; display:flex; flex-direction:column; gap:4px; }
.pd-spec-label { font-size:0.8rem; color:var(--gray-400); text-transform:uppercase; letter-spacing:0.5px; }
.pd-spec-val { font-family:var(--font-display); font-size:1.05rem; font-weight:700; color:var(--blue-dark); }

/* Related Products */
.pd-additional-options {
    background: #f4f8fc;
}

.pd-options-card {
    padding: 40px 44px;
    border-left: 5px solid var(--primary, #005baa);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0, 49, 92, 0.08);
}

.pd-options-heading {
    max-width: 800px;
}

.pd-options-kicker {
    display: block;
    margin-bottom: 8px;
    color: var(--primary, #005baa);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.pd-options-card h2 {
    margin: 0 0 12px;
}

.pd-options-card p {
    margin: 0;
    color: #4d5d6c;
    line-height: 1.75;
}

.pd-options-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 28px;
}

.pd-option-item {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 88px;
    padding: 18px;
    border: 1px solid #dce8f2;
    border-radius: 8px;
    background: #f8fbfe;
}

.pd-option-item i {
    display: grid;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 50%;
    background: #e5f1fb;
    color: var(--primary, #005baa);
    font-size: 1.35rem;
}

.pd-option-item strong,
.pd-option-item span {
    display: block;
}

.pd-option-item strong {
    color: var(--blue-dark);
    font-family: var(--font-display);
    font-size: 0.98rem;
}

.pd-option-item span {
    margin-top: 4px;
    color: #637485;
    font-size: 0.8rem;
}

.pd-options-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    margin-top: 26px;
    padding-top: 24px;
    border-top: 1px solid #e3ebf2;
}

.pd-options-footer p {
    max-width: 670px;
    font-size: 0.88rem;
}

.pd-options-footer .btn {
    flex: 0 0 auto;
}

.pd-related { padding:80px 0; }
.pd-related-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.pd-related-card {
    background:var(--white); border-radius:var(--radius-xl); overflow:hidden;
    border:1px solid var(--gray-100); transition:all var(--t-slow);
}
.pd-related-card:hover { box-shadow:var(--shadow-lg); border-color:var(--blue-light); transform:translateY(-2px); }
.pd-related-img { display:block; height:240px; overflow:hidden; background:var(--gray-100); cursor:pointer; }
.pd-related-img img { width:100%; height:100%; object-fit:contain; padding:20px; transition:transform 0.35s ease; display:block; }
.pd-related-card:hover .pd-related-img img { transform:scale(1.05); }
.pd-related-tags { display:flex; gap:6px; padding:16px 20px 0; }
.pd-related-tags span { padding:3px 10px; background:var(--blue-pale); color:var(--blue-mid); font-size:10px; font-weight:600; border-radius:100px; letter-spacing:0.5px; text-transform:uppercase; }
.pd-related-card h4 { padding:10px 20px; font-family:var(--font-display); font-size:0.95rem; font-weight:700; color:var(--blue-dark); }
.pd-related-specs { padding:0 20px 8px; display:flex; flex-direction:column; gap:6px; }
.pd-related-specs .val { font-size:0.8rem; color:var(--gray-400); }

/* AGV Solutions */
.agv-hero { background-position:center 58%; }
.agv-capability { background:#f5f8fb; }
.agv-capability-grid { display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center; }
.agv-capability-grid p { color:var(--gray-500); line-height:1.75; margin-top:14px; }
.agv-capability-points { display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.agv-capability-points span { display:flex; align-items:center; gap:8px; padding:9px 13px; border-radius:100px; background:#fff; color:var(--blue-dark); font-size:0.82rem; font-weight:600; box-shadow:0 4px 14px rgba(0,49,92,.07); }
.agv-capability-points i { color:var(--blue-primary); font-size:1.05rem; }
.agv-capability-image { overflow:hidden; border-radius:var(--radius-xl); background:#fff; box-shadow:var(--shadow-lg); }
.agv-capability-image img { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; }
.agv-capability-image figcaption { padding:10px 14px; color:var(--gray-400); font-size:.75rem; text-align:right; }
.agv-solution-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.agv-visual-card { overflow:hidden; border:1px solid var(--gray-100); border-radius:var(--radius-xl); background:#fff; transition:all var(--t-slow); }
.agv-visual-card:hover { transform:translateY(-3px); border-color:var(--blue-light); box-shadow:var(--shadow-lg); }
.agv-visual-card img { display:block; width:100%; height:220px; object-fit:cover; }
.agv-visual-card > div { padding:22px; }
.agv-visual-card span { color:var(--blue-primary); font-size:.7rem; font-weight:700; letter-spacing:.08em; }
.agv-visual-card h3 { margin:7px 0 10px; color:var(--blue-dark); font-family:var(--font-display); }
.agv-visual-card p { color:var(--gray-500); font-size:.9rem; line-height:1.65; }
.agv-process-grid { grid-template-columns:repeat(4,1fr); }
.agv-note-section { padding-top:0; }
.agv-note { display:flex; gap:18px; align-items:flex-start; padding:28px 32px; border-left:4px solid var(--blue-primary); border-radius:8px; background:var(--blue-pale); }
.agv-note > i { color:var(--blue-primary); font-size:1.8rem; }
.agv-note h3 { margin-bottom:6px; color:var(--blue-dark); }
.agv-note p { margin:0; color:var(--gray-500); line-height:1.7; }
.pd-related-card .btn-sm { margin:0 20px 20px; }

@media (max-width:900px) {
    .pd-hero-grid { grid-template-columns:1fr; }
    .pd-gallery { position:static; }
    .pd-specs-grid { grid-template-columns:repeat(2,1fr); }
    .pd-highlight-grid { grid-template-columns:repeat(2,1fr); gap:20px; }
    .pd-related-grid { grid-template-columns:repeat(2,1fr); }
    .pd-features-tab { font-size:0.9rem; padding:14px 12px; }
    .pd-features-panel ul { grid-template-columns:1fr; }
}
@media (max-width:768px) {
    .pd-specs-grid { grid-template-columns:1fr; }
    .pd-related-grid { grid-template-columns:1fr; }
    .pd-highlight-grid { grid-template-columns:1fr; gap:32px; }
    .pd-ctas { flex-direction:column; }
    .pd-ctas .btn { width:100%; }
    .pd-key-stats { flex-direction:column; }
    .pd-thumbs img { width:56px; height:56px; }
}

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

/* Video thumb */
.pd-thumb-video { position:relative; width:72px; height:72px; min-width:72px; max-width:72px; flex:0 0 72px; border-radius:8px; overflow:hidden; cursor:pointer; border:2px solid transparent; }
.pd-thumb-video img { width:100% !important; height:100% !important; min-width:auto !important; max-width:none !important; min-height:auto !important; max-height:none !important; flex:auto !important; object-fit:cover; border-radius:0; border:none; opacity:0.6; }
.pd-thumb-video:hover img { opacity:0.9; }
.pd-thumb-play {
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    font-size:28px; color:rgba(255,255,255,0.9); background:rgba(0,0,0,0.25);
    pointer-events:none; transition:all var(--t-fast);
}
.pd-thumb-video:hover .pd-thumb-play { color:#fff; background:rgba(0,0,0,0.4); }

/* Video lightbox */
.pd-video-lightbox { position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,0.92); display:flex; align-items:center; justify-content:center; padding:40px; }
.pd-video-wrap { position:relative; width:100%; max-width:960px; aspect-ratio:16/9; }
.pd-video-wrap iframe { position:absolute; inset:0; width:100%; height:100%; border:none; border-radius:12px; }
.pd-video-lightbox .pd-lightbox-close { position:absolute; top:20px; right:20px; background:none; border:none; color:#fff; font-size:36px; cursor:pointer; z-index:1; }

/* ===== Support Page ===== */
.support-cards-grid {
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; max-width:1040px; margin:0 auto;
}
.support-card {
    background:var(--white); border:1px solid var(--gray-100);
    border-radius:var(--radius-xl); padding:36px 32px;
    transition:all var(--t-slow);
}
.support-card:hover {
    border-color:var(--blue-light); box-shadow:var(--shadow-lg); transform:translateY(-2px);
}
.support-card-icon {
    width:56px; height:56px; background:var(--blue-pale);
    border-radius:var(--radius-lg); display:flex; align-items:center;
    justify-content:center; color:var(--blue-primary); font-size:28px;
    margin-bottom:20px;
}
.support-card h3 {
    font-family:var(--font-display); font-size:1.25rem;
    font-weight:700; color:var(--blue-dark); margin-bottom:12px;
}
.support-card > p {
    color:var(--gray-500); font-size:0.95rem; line-height:1.7;
    margin-bottom:20px; padding-bottom:20px;
    border-bottom:1px solid var(--gray-100);
}
.support-features {
    list-style:none; display:flex; flex-direction:column; gap:10px;
}
.support-features li {
    display:flex; align-items:center; gap:10px;
    font-size:0.9rem; color:var(--gray-600);
}
.support-features li i {
    color:var(--accent-green); font-size:1rem; flex-shrink:0;
}

/* Process Steps */
.process-section { background:var(--blue-surface); }
.process-steps {
    display:flex; align-items:flex-start; justify-content:center;
    gap:0; max-width:1000px; margin:0 auto;
}
.process-step {
    text-align:center; flex:1; position:relative;
}
.process-step-num {
    font-family:var(--font-display); font-size:3rem; font-weight:800;
    color:var(--blue-pale); line-height:1; margin-bottom:8px;
}
.process-step-icon {
    width:64px; height:64px; background:var(--blue-primary);
    border-radius:50%; display:flex; align-items:center;
    justify-content:center; color:var(--white); font-size:28px;
    margin:0 auto 16px; position:relative; z-index:1;
}
.process-step h4 {
    font-family:var(--font-display); font-size:1.1rem;
    font-weight:700; color:var(--blue-dark); margin-bottom:8px;
}
.process-step p {
    color:var(--gray-500); font-size:0.9rem; line-height:1.6;
}
.process-connector {
    flex:0 0 60px; height:2px; background:var(--blue-light);
    margin-top:32px;
}

/* Maintenance Plans */
.plans-grid {
    display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
    max-width:1000px; margin:0 auto;
}
.plan-card {
    background:var(--white); border:1px solid var(--gray-200);
    border-radius:var(--radius-xl); overflow:hidden;
    transition:all var(--t-slow); position:relative;
}
.plan-card:hover {
    border-color:var(--blue-light); box-shadow:var(--shadow-lg);
}
.plan-featured {
    border-color:var(--blue-primary);
    box-shadow:0 4px 20px rgba(21,71,133,0.15);
    transform:translateY(-8px);
}
.plan-featured:hover { transform:translateY(-12px); }
.plan-badge {
    position:absolute; top:0; left:50%; transform:translateX(-50%);
    background:var(--blue-primary); color:var(--white);
    font-size:0.8rem; font-weight:600; padding:6px 24px;
    border-radius:0 0 var(--radius-sm) var(--radius-sm);
}
.plan-header {
    padding:36px 28px 0; text-align:center;
}
.plan-featured .plan-header { padding-top:52px; }
.plan-header h3 {
    font-family:var(--font-display); font-size:1.5rem;
    font-weight:700; color:var(--blue-dark);
}
.plan-desc {
    color:var(--gray-400); font-size:0.9rem; margin-top:6px;
}
.plan-body {
    padding:24px 28px 28px;
}
.plan-body ul {
    list-style:none; display:flex; flex-direction:column; gap:12px;
}
.plan-body li {
    display:flex; align-items:center; gap:10px;
    font-size:0.9rem; color:var(--gray-600); padding:8px 0;
    border-bottom:1px solid var(--gray-50);
}
.plan-body li:last-child { border-bottom:none; }
.plan-body li i {
    color:var(--accent-green); font-size:1rem; flex-shrink:0;
}
.plan-footer {
    padding:0 28px 28px; text-align:center;
}
.plan-footer .btn { width:100%; justify-content:center; }

/* FAQ */
.faq-section { background:var(--blue-surface); }
.faq-grid {
    display:grid; grid-template-columns:repeat(2,1fr); gap:20px;
    max-width:900px; margin:0 auto;
}
.faq-item {
    background:var(--white); border-radius:var(--radius-lg);
    padding:28px; border:1px solid var(--gray-100);
    transition:all var(--t-fast);
}
.faq-item:hover { border-color:var(--blue-light); box-shadow:var(--shadow-md); }
.faq-q {
    display:flex; align-items:flex-start; gap:12px; margin-bottom:12px;
}
.faq-q i {
    color:var(--blue-primary); font-size:1.2rem; margin-top:2px; flex-shrink:0;
}
.faq-q h4 {
    font-family:var(--font-display); font-size:1.05rem;
    font-weight:600; color:var(--blue-dark); line-height:1.4;
}
.faq-a p {
    color:var(--gray-500); font-size:0.9rem; line-height:1.7;
    padding-left:32px;
}

/* Support Page Responsive */
@media (max-width: 1024px) {
    .support-cards-grid { grid-template-columns:repeat(2,1fr); }
    .plans-grid { grid-template-columns:repeat(2,1fr); }
    .plan-featured { transform:none; }
    .plan-featured:hover { transform:translateY(-2px); }
    .process-steps { flex-direction:column; align-items:center; gap:24px; }
    .process-connector { display:none; }
    .process-step { max-width:320px; }
    .faq-grid { grid-template-columns:1fr; }
}
@media (max-width: 768px) {
    .support-cards-grid { grid-template-columns:1fr; }
    .plans-grid { grid-template-columns:1fr; max-width:400px; }
    .plan-featured { transform:none; }
}

/* ===== Page Bottom Banner ===== */
.page-bottom-banner {
    position:relative;
    padding:100px 0;
    background-size:cover;
    background-position:center top;
    overflow:hidden;
    min-height:320px;
    display:flex;
    align-items:center;
}
.page-bottom-banner::before {
    content:'';
    position:absolute; inset:0;
    background:rgba(11,37,72,0.15);
    z-index:1;
}
.page-bottom-banner .container {
    position:relative; z-index:2;
    text-align:center;
    width:100%;
}
.page-bottom-banner h2 {
    font-family:var(--font-display); font-size:2.2rem;
    font-weight:700; color:var(--white);
    margin-bottom:12px;
    text-shadow:0 2px 8px rgba(0,0,0,0.3);
}
.page-bottom-banner p {
    font-size:1.1rem; color:rgba(255,255,255,0.9);
    margin-bottom:28px; max-width:600px; margin-left:auto; margin-right:auto;
    text-shadow:0 1px 4px rgba(0,0,0,0.2);
}
@media (max-width: 768px) {
    .page-bottom-banner { padding:60px 0; min-height:200px; }
    .page-bottom-banner h2 { font-size:1.5rem; }
    .page-bottom-banner p { font-size:0.95rem; }
}