/* ===== NAVO - Bright Professional Design ===== *//* --- CSS Variables --- */:root {    --primary: #2563eb;    --primary-light: #3b82f6;    --primary-dark: #1d4ed8;        --sky: #0ea5e9;    --sky-light: #38bdf8;        --green: #10b981;    --green-light: #34d399;        --amber: #f59e0b;    --amber-light: #fbbf24;        --slate-900: #0f172a;    --slate-800: #1e293b;    --slate-700: #334155;    --slate-600: #475569;    --slate-500: #64748b;    --slate-400: #94a3b8;    --slate-300: #cbd5e1;    --slate-200: #e2e8f0;    --slate-100: #f1f5f9;    --slate-50: #f8fafc;        --white: #ffffff;    --text: var(--slate-800);    --text-light: var(--slate-500);    --bg: var(--slate-50);    --card: var(--white);        --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);    --shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);    --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);        --radius: 8px;    --radius-md: 10px;    --radius-lg: 12px;    --radius-xl: 16px;    --border: var(--slate-200);    --bg-alt: var(--slate-100);    --text-muted: var(--slate-500);    --shadow-md: 0 6px 12px -2px rgba(0,0,0,0.1), 0 3px 6px -3px rgba(0,0,0,0.08);}/* --- Reset & Base --- */*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }html { scroll-behavior: smooth; }body {    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Microsoft YaHei', sans-serif;    color: var(--text);    background: var(--bg);    line-height: 1.6;    -webkit-font-smoothing: antialiased;}a { text-decoration: none; color: inherit; }img { max-width: 100%; display: block; }/* --- Header --- */.header {    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 50%, #e2e8f0 100%);    backdrop-filter: blur(12px);    border-bottom: 1px solid var(--slate-200);    padding: 1rem 2rem;    position: sticky;    top: 0;    z-index: 100;    display: flex;    align-items: center;    justify-content: space-between;    box-shadow: var(--shadow-sm);}.logo-wrap {    display: flex;    align-items: center;    gap: 18px;    text-decoration: none;}.logo-mark {
    font-family: "Montserrat", sans-serif;
    font-size: 3.0rem;
    font-weight: 900;
    letter-spacing: 4px;
    line-height: 1;
    display: inline-flex;
    align-items: baseline;
    gap: 0;
    text-transform: uppercase;
}
.logo-mark .logo-li {
    color: #1e293b;
    text-shadow:
        0 1px 0 #94a3b8,
        0 2px 0 #64748b,
        0 3px 0 #475569,
        0 4px 6px rgba(0,0,0,0.3),
        0 0 20px rgba(219,234,254,0.3);
}
.logo-mark .logo-yun {
    color: #dbeafe;
    text-shadow:
        0 1px 0 #94a3b8,
        0 2px 0 #64748b,
        0 3px 0 #475569,
        0 4px 6px rgba(0,0,0,0.3),
        0 0 20px rgba(219,234,254,0.3);
}
.logo-mark .logo-tong {
    color: #0f172a;
    position: relative;
    text-shadow:
        0 1px 0 #334155,
        0 2px 0 #1e293b,
        0 3px 0 #0f172a,
        0 4px 6px rgba(0,0,0,0.5),
        0 0 25px rgba(15,23,42,0.3);
}
.logo-mark .logo-tong::after {
    content: "";
    position: absolute;
    bottom: 2px;
    left: 0;
    right: 0;
    height: 3px;
    background: #0f172a;
    border-radius: 2px;
    opacity: 0.4;
    box-shadow: 0 1px 3px rgba(15,23,42,0.4);
}
.logo-gold { color: #1e293b; font-weight: 900; }
.logo-obsidian { color: #d97706; font-weight: 900; }/* Logo Tagline */.logo-tagline {    font-size: 16px;    font-weight: 500;    color: var(--slate-700);    letter-spacing: 0.4px;    white-space: nowrap;    border-left: 1.5px solid var(--slate-300);    padding-left: 16px;    line-height: 1.3;}.nav { display: flex; gap: 2rem; align-items: center; }.nav a {    color: var(--slate-600);    font-weight: 500;    transition: all 0.2s;    font-size: 0.95rem;    position: relative;}.nav a:hover { color: var(--primary); }.nav a.active { color: var(--primary); }.nav a.active::after {    content: '';    position: absolute;    bottom: -4px;    left: 0;    right: 0;    height: 2px;    background: var(--primary);    border-radius: 1px;}/* --- Container --- */.container {    max-width: 1200px;    margin: 0 auto;    padding: 0 2rem;}/* --- Buttons --- */.btn {    display: inline-flex;    align-items: center;    gap: 0.5rem;    padding: 0.75rem 1.5rem;    border-radius: var(--radius);    font-weight: 600;    font-size: 0.95rem;    transition: all 0.2s;    cursor: pointer;    border: none;}.btn-primary {    background: var(--primary);    color: #ffffff;}.btn-primary:hover {    background: var(--primary-dark);    transform: translateY(-1px);    box-shadow: var(--shadow-lg);}.btn-accent {    background: var(--amber);    color: #ffffff;}.btn-accent:hover {    background: var(--amber-light);    transform: translateY(-1px);    box-shadow: var(--shadow-lg);}.btn-outline-white {    background: transparent;    color: #ffffff;    border: 2px solid rgba(255,255,255,0.7);}.btn-outline-white:hover {    background: rgba(255,255,255,0.15);    border-color: #ffffff;}.btn-sm { padding: 0.5rem 1rem; font-size: 0.85rem; }.btn-lg { padding: 1rem 2rem; font-size: 1.1rem; }/* --- Hero (Home) --- */.hero {    min-height: 100vh;    display: flex;    align-items: center;    position: relative;    overflow: hidden;}.hero-home {    background: url('../images/hero-ocean.jpg') center/cover no-repeat;    color: var(--amber);}.hero-home::before {    content: '';    position: absolute;    inset: 0;    background: linear-gradient(135deg, rgba(15,23,42,0.55) 0%, rgba(30,41,59,0.35) 50%, rgba(51,65,85,0.50) 100%);    z-index: 1;}.hero-content {    position: relative;    z-index: 2;    max-width: 800px;    padding: 4rem 2rem;}.hero-badge {    display: inline-flex;    align-items: center;    gap: 0.5rem;    background: rgba(255,255,255,0.1);    backdrop-filter: blur(8px);    padding: 0.5rem 1rem;    border-radius: 100px;    font-size: 0.85rem;    margin-bottom: 2rem;    border: 1px solid rgba(255,255,255,0.2);}.hero h1 {    font-size: 3.5rem;    font-weight: 700;    line-height: 1.2;    margin-bottom: 1.5rem;    color: #ffffff;    text-shadow: 2px 2px 8px rgba(0,0,0,0.6);}.hero h1 .hl {    color: #38bdf8;}.hero-sub {
    color: #ffffff !important;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.6);
    margin-bottom: 2.5rem;    line-height: 1.8;}.hero-actions {    display: flex;    gap: 1rem;    flex-wrap: wrap;}/* --- Hero (Inner Pages) --- */.hero-sourcing {    background: url('../images/hero-sourcing-new.jpg') center/cover no-repeat;    color: var(--amber);}.hero-sourcing::before {    content: '';    position: absolute;    inset: 0;    background: linear-gradient(135deg, rgba(15,23,42,0.55) 0%, rgba(30,41,59,0.35) 50%, rgba(51,65,85,0.50) 100%);    z-index: 1;}.hero-travel {    background: url('../images/hero-travel.jpg') center/cover no-repeat;    color: var(--amber);}.hero-travel::before {    content: '';    position: absolute;    inset: 0;    background: linear-gradient(135deg, rgba(15,23,42,0.55) 0%, rgba(30,41,59,0.35) 50%, rgba(51,65,85,0.50) 100%);    z-index: 1;}.hero-logistics {    background: url('../images/hero-ocean.jpg') center/cover no-repeat;    color: var(--amber);}.hero-logistics::before {    content: '';    position: absolute;    inset: 0;    background: linear-gradient(135deg, rgba(15,23,42,0.55) 0%, rgba(30,41,59,0.35) 50%, rgba(51,65,85,0.50) 100%);    z-index: 1;}.hero-about {    background: url('../images/hero-about.jpg') center/cover no-repeat;    color: var(--amber);}.hero-about::before {    content: '';    position: absolute;    inset: 0;    background: linear-gradient(135deg, rgba(15,23,42,0.55) 0%, rgba(30,41,59,0.35) 50%, rgba(51,65,85,0.50) 100%);    z-index: 1;}.hero-contact {    background: url('../images/hero-ocean.jpg') center/cover no-repeat;    color: var(--amber);}.hero-contact::before {    content: '';    position: absolute;    inset: 0;    background: linear-gradient(135deg, rgba(15,23,42,0.55) 0%, rgba(30,41,59,0.35) 50%, rgba(51,65,85,0.50) 100%);    z-index: 1;}/* --- Sections --- */section {    padding: 5rem 2rem;    scroll-margin-top: 80px;}.section-header {    text-align: center;    max-width: 700px;    margin: 0 auto 3rem;}.section-header h2 {    font-size: 2.5rem;    font-weight: 700;    color: var(--slate-900);    margin-bottom: 1rem;}.section-header p {    font-size: 1.1rem;    color: var(--text-light);    line-height: 1.8;}/* --- Cards --- */.card {    background: var(--card);    border-radius: var(--radius-lg);    padding: 2rem;    box-shadow: var(--shadow);    transition: all 0.3s;    border: 1px solid var(--slate-200);}.card:hover {    transform: translateY(-4px);    box-shadow: var(--shadow-xl);}.cards-grid {    display: grid;    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));    gap: 2rem;}/* --- Footer --- */.footer {    background: var(--slate-900);    color: var(--slate-400);    padding: 4rem 2rem 2rem;}.footer-inner {    max-width: 1200px;    margin: 0 auto;    display: grid;    grid-template-columns: 2fr 1fr 1fr 1fr;    gap: 3rem;}.footer-logo {    font-size: 1.5rem;    font-weight: 700;    color: var(--amber);    margin-bottom: 1rem;}.footer-logo span { color: var(--green); }.footer-col h4 {    color: var(--amber);    font-size: 0.95rem;    font-weight: 600;    margin-bottom: 1.5rem;}.footer-col a {    display: block;    color: var(--slate-400);    padding: 0.3rem 0;    transition: color 0.2s;    font-size: 0.9rem;}.footer-col a:hover { color: var(--amber); }.footer-bottom {    display: flex;    justify-content: space-between;    align-items: flex-start;    padding-top: 2rem;    border-top: 1px solid rgba(255,255,255,0.1);    font-size: 0.9rem;    color: var(--slate-400);    gap: 2rem;}
.footer-address {    text-align: right;    line-height: 1.6;    color: #94a3b8;}/* --- Responsive --- */@media (max-width: 768px) {    .hero h1 { font-size: 2.5rem; }    .footer-inner { grid-template-columns: 1fr; }    .nav { display: none; }    .header { padding: 1rem; }}/* --- Missing Styles (Appended) --- *//* Header Actions & Mobile */.header-inner { display: flex; align-items: center; justify-content: space-between; width: 100%; flex-wrap: wrap; gap: 0.5rem; }.header-actions { display: flex; align-items: center; gap: 1rem; }.lang-btn {    background: none;    border: 1px solid var(--slate-300);    color: var(--slate-600);    padding: 0.4rem 0.8rem;    border-radius: var(--radius);    cursor: pointer;    font-size: 0.85rem;}.mobile-toggle {    display: none;    flex-direction: column;    gap: 5px;    background: none;    border: none;    cursor: pointer;    padding: 0.5rem;}.mobile-toggle span {    display: block;    width: 24px;    height: 2px;    background: var(--slate-700);    border-radius: 2px;}/* Breadcrumb */.breadcrumb {    font-size: 0.85rem;    color: rgba(255,255,255,0.7);    margin-bottom: 1rem;}.breadcrumb a { color: rgba(255,255,255,0.7); }.breadcrumb a:hover { color: var(--amber); }/* Section Head */.section-head { text-align: center; max-width: 700px; margin: 0 auto 3rem; }.section-tag {    display: inline-block;    font-size: 0.8rem;    font-weight: 600;    text-transform: uppercase;    letter-spacing: 1px;    color: var(--primary);    margin-bottom: 0.5rem;}.section-intro {    font-size: 1.1rem;    color: var(--text-light);    margin-top: 0.5rem;}.center { text-align: center; }/* Card Grid */.card-grid {    display: grid;    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));    gap: 2rem;}.card-icon {    width: 48px;    height: 48px;    color: var(--primary);    margin-bottom: 1rem;}.card-icon svg { width: 100%; height: 100%; }.fade-up {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.6s, transform 0.6s;
}
html.js-ready .fade-up {
    opacity: 0;
    transform: translateY(20px);
}
html.js-ready .fade-up.visible {
    opacity: 1;
    transform: translateY(0);
}/* Section Alt */.section-alt { background: var(--slate-100); }/* Process Steps */.process-steps {    display: grid;    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));    gap: 2rem;    margin-top: 2rem;}.process-step {    text-align: center;    padding: 2rem;}.step-num {    font-size: 2.5rem;    font-weight: 700;    color: var(--primary);    margin-bottom: 1rem;}.process-step h4 {    font-size: 1.1rem;    font-weight: 600;    margin-bottom: 0.5rem;}.process-step p {    font-size: 0.9rem;    color: var(--text-light);    line-height: 1.6;}/* Footer Grid */.footer-grid {    display: grid;    grid-template-columns: 2fr 1fr 1fr 1fr;    gap: 3rem;}.footer-logo { font-size: 1.5rem; font-weight: 700; color: var(--amber); margin-bottom: 0.5rem; }.footer-logo span { color: var(--green); }.footer-tagline { font-size: 0.9rem; line-height: 1.6; margin-bottom: 1.5rem; }.footer-social { display: flex; gap: 1rem; }.footer-social a {    color: var(--slate-400);    transition: color 0.2s;}.footer-social a:hover { color: var(--amber); }.footer-social svg { width: 20px; height: 20px; }.footer-col { }.footer-col h5 {    color: var(--amber);    font-size: 0.95rem;    font-weight: 600;    margin-bottom: 1.5rem;}.footer-col a {    display: block;    color: var(--slate-400);    padding: 0.3rem 0;    transition: color 0.2s;    font-size: 0.9rem;}.footer-col a:hover { color: var(--amber); }.footer-bottom {    display: flex;    justify-content: space-between;    align-items: flex-start;    padding-top: 2rem;    border-top: 1px solid rgba(255,255,255,0.1);    font-size: 0.9rem;    color: var(--slate-400);    gap: 2rem;}
.footer-address {    text-align: right;    line-height: 1.6;    color: #94a3b8;}/* WhatsApp Float Button *//* ========== Contact Page ========== */.form-grid {    display: grid;    grid-template-columns: 1.2fr 1fr;    gap: 48px;    align-items: start;}.form-group {    margin-bottom: 20px;}.form-group label {    display: block;    font-size: 14px;    font-weight: 600;    color: var(--text);    margin-bottom: 6px;}.form-group input,.form-group select,.form-group textarea {    width: 100%;    padding: 12px 16px;    border: 1px solid var(--border);    border-radius: var(--radius-md);    font-size: 15px;    font-family: inherit;    color: var(--text);    background: var(--bg);    transition: border-color 0.2s, box-shadow 0.2s;    box-sizing: border-box;}.form-group input:focus,.form-group select:focus,.form-group textarea:focus {    outline: none;    border-color: var(--primary);    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);}.form-group textarea {    min-height: 120px;    resize: vertical;}.form-submit {    margin-top: 8px;}/* Contact Info Items */.contact-info-item {    display: flex;    align-items: flex-start;    gap: 16px;    margin-bottom: 24px;}.ci-icon {    width: 44px;    height: 44px;    min-width: 44px;    max-width: 44px;    display: flex;    align-items: center;    justify-content: center;    background: var(--bg-alt);    border-radius: var(--radius-md);    color: var(--primary);    flex-shrink: 0;}.ci-icon svg {    width: 22px !important;    height: 22px !important;    flex-shrink: 0;}.ci-label {    font-weight: 600;    font-size: 14px;    color: var(--text);    margin-bottom: 2px;}.ci-value {    font-size: 14px;    color: var(--text-muted);    line-height: 1.5;}.ci-value a {    color: var(--primary);    text-decoration: none;}.ci-value a:hover {    text-decoration: underline;}/* QR Code Cards */.qr-grid {    display: grid;    grid-template-columns: 1fr 1fr;    gap: 16px;    margin-top: 32px;}.qr-card {    background: var(--bg-alt);    border-radius: var(--radius-lg);    padding: 24px;    text-align: center;    border: 1px solid var(--border);    transition: box-shadow 0.2s;}.qr-card:hover {    box-shadow: var(--shadow-md);}.qr-card h4 {    font-size: 15px;    margin-bottom: 14px;    color: var(--text);}.qr-card img {    width: 160px;    height: auto;    border-radius: var(--radius-md);    border: 1px solid var(--border);}.qr-card p {    font-size: 12px;    color: var(--text-muted);    margin-top: 10px;}/* CTA card at bottom of contact info */.contact-cta {    background: var(--bg-alt);    border-radius: var(--radius-lg);    padding: 24px;    margin-top: 32px;    border: 1px solid var(--border);}.contact-cta h4 {    font-size: 15px;    margin-bottom: 8px;    color: var(--text);}.contact-cta p {    font-size: 13px;    color: var(--text-muted);    line-height: 1.7;    margin-bottom: 16px;}/* Responsive: contact page */@media (max-width: 768px) {    .form-grid {        grid-template-columns: 1fr;        gap: 40px;    }    .qr-grid {        grid-template-columns: 1fr;    }}/* Contact Info Icons */.contact-info-item {    display: flex;    align-items: flex-start;    gap: 16px;    margin-bottom: 24px;}.ci-label {    font-weight: 600;    font-size: 14px;    color: var(--text);    margin-bottom: 4px;}.ci-value {    font-size: 14px;    color: var(--text-muted);}.ci-value a {    color: var(--primary);    text-decoration: none;}.ci-value a:hover {    text-decoration: underline;}.ci-icon {    width: 40px;    height: 40px;    min-width: 40px;    max-width: 40px;    display: flex;    align-items: center;    justify-content: center;    flex-shrink: 0;    color: var(--primary);}.ci-icon svg {    width: 24px !important;    height: 24px !important;    flex-shrink: 0;}.wa-btn {    position: fixed;    bottom: 2rem;    right: 2rem;    width: 60px;    height: 60px;    background: #25d366;    color: #ffffff;    border-radius: 50%;    display: flex;    align-items: center;    justify-content: center;    box-shadow: var(--shadow-lg);    z-index: 999;    transition: transform 0.2s;}.wa-btn:hover { transform: scale(1.1); }.wa-btn svg { width: 32px; height: 32px; }/* Responsive */@media (max-width: 768px) {    .header-actions { display: none; }    .mobile-toggle { display: flex; }    .footer-grid { grid-template-columns: 1fr; }    .process-steps { grid-template-columns: 1fr; }}/* --- Trust Bar --- */.trust-bar {    background: var(--slate-100);    padding: 1.5rem 2rem;    display: flex;    justify-content: center;    gap: 3rem;    flex-wrap: wrap;    border-bottom: 1px solid var(--slate-200);}.trust-item {    display: flex;    align-items: center;    gap: 0.75rem;    font-size: 0.9rem;    color: var(--slate-700);    font-weight: 500;}.trust-item svg {    width: 20px;    height: 20px;    color: var(--green);    flex-shrink: 0;}/* --- Service Highlight --- */.service-highlight {    display: grid;    grid-template-columns: 1fr 1fr;    gap: 4rem;    align-items: center;}.service-highlight.reverse {    direction: rtl;}.service-highlight.reverse > * {    direction: ltr;}.sh-image img {    border-radius: var(--radius-lg);    box-shadow: var(--shadow-xl);}.sh-content h3 {    font-size: 2rem;    font-weight: 700;    color: var(--slate-900);    margin-bottom: 1rem;    line-height: 1.3;}.sh-content p {    color: var(--text-light);    margin-bottom: 1.5rem;    line-height: 1.8;}.sh-list {    display: flex;    flex-direction: column;    gap: 1rem;    margin-bottom: 2rem;}.sh-list-item {    display: flex;    align-items: flex-start;    gap: 0.75rem;}.check-icon {    width: 24px;    height: 24px;    color: var(--green);    flex-shrink: 0;    margin-top: 2px;}.check-icon svg {    width: 100%;    height: 100%;}/* --- Link Arrow --- */.link-arrow {    color: var(--primary);    font-weight: 600;    display: inline-flex;    align-items: center;    gap: 0.25rem;    transition: gap 0.2s;}.link-arrow:hover {    gap: 0.5rem;}/* --- Hero Stats --- */.hero-stats {    display: flex;    gap: 3rem;    margin-top: 3rem;    padding-top: 2rem;    border-top: 1px solid rgba(255,255,255,0.2);}.hero-stat-val {    font-size: 2.5rem;    font-weight: 700;    color: #fbbf24;    line-height: 1;}.hero-stat-label {    font-size: 0.9rem;    color: rgba(255,255,255,0.7);    margin-top: 0.5rem;}/* --- Section --- */.section {    padding: 5rem 2rem;}/* --- Outline Button --- */.btn-outline {    background: transparent;    color: var(--primary);    border: 2px solid var(--primary);}.btn-outline:hover {    background: var(--primary);    color: var(--amber);}/* ===== DETAIL POLISH - 缁嗚妭浼樺寲 ===== *//* --- 1. 澧炲己鎸夐挳鐘讹拷?--- */.btn {    position: relative;    overflow: hidden;}.btn::after {    content: '';    position: absolute;    inset: 0;    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.2) 50%, transparent 70%);    transform: translateX(-100%);    transition: transform 0.5s;}.btn:hover::after {    transform: translateX(100%);}.btn:active {    transform: translateY(1px) scale(0.98);}.btn:focus-visible {    outline: 2px solid var(--primary);    outline-offset: 2px;}/* --- 2. 鍗＄墖澧炲己鎮仠鏁堟灉 --- */.card {    position: relative;    overflow: hidden;}.card::before {    content: '';    position: absolute;    inset: 0;    border-radius: var(--radius-lg);    border: 2px solid transparent;    transition: border-color 0.3s;    pointer-events: none;}.card:hover::before {    border-color: var(--primary-light);}.card:hover .card-icon {    transform: scale(1.1);}.card-icon {    transition: transform 0.3s;}/* --- 3. 閾炬帴涓嬪垝绾垮姩锟?--- */.nav a,.footer-col a,.link-arrow,a:not(.btn) {    position: relative;}.nav a::after,.footer-col a:not(:hover)::after {    content: '';    position: absolute;    bottom: -2px;    left: 0;    width: 0;    height: 2px;    background: var(--primary);    transition: width 0.3s;}.nav a:hover::after,.footer-col a:hover::after {    width: 100%;}/* --- 4. 鏃犻殰纰嶇劍鐐圭姸锟?--- */:focus-visible {    outline: 2px solid var(--primary);    outline-offset: 2px;}button:focus:not(:focus-visible),a:focus:not(:focus-visible) {    outline: none;}/* --- 5. 鑷畾涔夋粴鍔ㄦ潯 --- */::-webkit-scrollbar {    width: 10px;    height: 10px;}::-webkit-scrollbar-track {    background: var(--slate-100);}::-webkit-scrollbar-thumb {    background: var(--slate-400);    border-radius: 5px;}::-webkit-scrollbar-thumb:hover {    background: var(--slate-500);}/* --- 6. 鑷畾涔夐€変腑棰滆壊 --- */::selection {    background: var(--primary);    color: #ffffff;}::-moz-selection {    background: var(--primary);    color: #ffffff;}/* --- 7. 绉诲姩绔彍鍗曟牱寮忎紭锟?--- */.mobile-toggle {    transition: transform 0.3s;}.mobile-toggle:hover {    transform: scale(1.1);}.mobile-toggle:active {    transform: scale(0.95);}.mobile-toggle.active span:nth-child(1) {    transform: rotate(45deg) translate(5px, 5px);}.mobile-toggle.active span:nth-child(2) {    opacity: 0;}.mobile-toggle.active span:nth-child(3) {    transform: rotate(-45deg) translate(5px, -5px);}.mobile-nav {    display: none;    position: fixed;    top: 0;    left: 0;    right: 0;    bottom: 0;    background: rgba(0,0,0,0.5);    backdrop-filter: blur(4px);    z-index: 99;    padding-top: 5rem;}.mobile-nav.open {    display: block;}.mobile-nav-content {    background: var(--white);    padding: 2rem;    display: flex;    flex-direction: column;    gap: 1.5rem;}.mobile-nav-content a {    font-size: 1.2rem;    font-weight: 500;    color: var(--slate-700);    padding: 0.5rem 0;    border-bottom: 1px solid var(--slate-200);}.mobile-nav-content a:last-child {    border-bottom: none;}.mobile-nav-content a:hover,.mobile-nav-content a.active {    color: var(--primary);}/* --- 8. Hero 鍝嶅簲寮忎紭锟?--- */.hero {    min-height: 100vh;}.hero-content {    padding: 6rem 2rem 4rem;}@media (max-width: 768px) {    .hero {        min-height: auto;        padding: 6rem 0 4rem;    }    .hero-content {        padding: 4rem 1.5rem 3rem;    }}@media (max-width: 480px) {    .hero h1 {        font-size: 2rem !important;    }    .hero-sub {        font-size: 1rem !important;    }    .hero-actions {        flex-direction: column;    }    .hero-actions .btn {        width: 100%;        justify-content: center;    }}/* --- 9. 缁熻鏁板瓧鍔ㄧ敾 --- */.hero-stat-val {    display: inline-block;}/* --- 10. 椤甸潰娣″叆鍔ㄧ敾 --- */@keyframes fadeInUp {    from {        opacity: 0;        transform: translateY(20px);    }    to {        opacity: 1;        transform: translateY(0);    }}.hero-content > * {    animation: fadeInUp 0.6s ease-out forwards;}.hero-content > *:nth-child(1) { animation-delay: 0.1s; }.hero-content > *:nth-child(2) { animation-delay: 0.2s; }.hero-content > *:nth-child(3) { animation-delay: 0.3s; }.hero-content > *:nth-child(4) { animation-delay: 0.4s; }.hero-content > *:nth-child(5) { animation-delay: 0.5s; }/* --- 11. WhatsApp 鎸夐挳澧炲己 --- *//* --- CTA Section --- */.cta-section {    background: linear-gradient(135deg, var(--primary) 0%, #1e40af 100%);    color: var(--amber);    text-align: center;    padding: 5rem 2rem;}.cta-section h2 {    font-size: 2.5rem;    font-weight: 800;    margin-bottom: 1rem;}.cta-section p {    font-size: 1.15rem;    opacity: 0.9;    margin-bottom: 2rem;}.cta-section .btn-accent {    background: var(--white);    color: var(--primary);}.cta-section .btn-accent:hover {    background: var(--slate-100);    color: var(--primary-dark);}/* ========== Contact Page ========== *//* (Duplicate contact styles removed - consolidated above) *//* ========== Contact Page (Duplicate Removed) ========== *//* ========== Contact Page (Duplicate Removed) ========== *//* --- 12. Footer 閾炬帴鎮仠鏁堟灉 --- */.footer-col a {    display: inline-flex;    align-items: center;    gap: 0.5rem;}.footer-col a::before {    content: '锟?;    opacity: 0;    transform: translateX(-10px);    transition: all 0.2s;}.footer-col a:hover::before {    opacity: 1;    transform: translateX(0);}/* --- 13. 鍗＄墖鍒楄〃椤规偓锟?--- */.sh-list-item {    transition: transform 0.2s;}.sh-list-item:hover {    transform: translateX(5px);}/* --- 14. Process Step 鏁板瓧鏍峰紡 --- */.process-step {    position: relative;}.process-step::before {    content: '';    position: absolute;    top: 50%;    left: 100%;    width: 2rem;    height: 2px;    background: var(--slate-300);    display: none;}@media (min-width: 769px) {    .process-step:not(:last-child)::before {        display: block;    }}/* --- 15. 绉诲姩锟?Section 浼樺寲 --- */@media (max-width: 768px) {    section {        padding: 3rem 1.5rem;    }    .section-header h2 {        font-size: 1.8rem;    }    .section-header p {        font-size: 1rem;    }    .card {        padding: 1.5rem;    }    .cards-grid,    .card-grid {        gap: 1.5rem;    }    .service-highlight {        grid-template-columns: 1fr;        gap: 2rem;    }    .hero-stats {        flex-wrap: wrap;        gap: 2rem;    }}/* --- 16. Logo hover --- */.logo-mark {    transition: letter-spacing 0.3s;}.logo-wrap:hover .logo-mark {    letter-spacing: 3px;}/* --- 17. 淇′换鏍忓搷搴斿紡 --- */@media (max-width: 768px) {    .trust-bar {        gap: 1.5rem;        padding: 1rem;    }    .trust-item {        font-size: 0.8rem;    }}/* ===== Client Stories / Testimonials ===== */.testimonial-grid {    display: grid;    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));    gap: 2rem;    margin-top: 3rem;}.testimonial-card {    background: #1e293b;    border: 1px solid rgba(255,255,255,0.15);    border-radius: var(--radius-lg);    padding: 2rem;    position: relative;    transition: transform 0.3s, box-shadow 0.3s;    box-shadow: 0 4px 12px rgba(0,0,0,0.3);}.testimonial-card:hover {    transform: translateY(-5px);    box-shadow: var(--shadow-xl);}.quote-icon {    width: 48px;    height: 48px;    color: #fbbf24;    margin-bottom: 1rem;    opacity: 1;}.quote-icon svg {    width: 100%;    height: 100%;}.testimonial-card p {    font-size: 1.05rem;    line-height: 1.7;    color: #f1f5f9;    font-style: italic;    margin-bottom: 1.5rem; }.testimonial-author {    display: flex;    align-items: center;    gap: 1rem;    padding-top: 1rem;    border-top: 1px solid rgba(255,255,255,0.12);}.ta-avatar {    width: 48px;    height: 48px;    border-radius: 50%;    background: linear-gradient(135deg, var(--primary), var(--sky));    color: var(--amber);    display: flex;    align-items: center;    justify-content: center;    font-weight: 600;    font-size: 0.9rem;}.ta-name {    font-weight: 600;    color: #ffffff;}.ta-role {    font-size: 0.85rem;    color: #94a3b8;}@media (max-width: 768px) {    .testimonial-grid {        grid-template-columns: 1fr;        gap: 1.5rem;    }    .testimonial-card {        padding: 1.5rem;    }}/* ===== 2-Column Grid (for 4 cards) ===== */.card-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; } @media (max-width: 768px) { .card-grid-2 { grid-template-columns: 1fr; } }
.grid-2col {    grid-template-columns: repeat(2, 1fr);}@media (max-width: 768px) {    .grid-2col {        grid-template-columns: 1fr;    }}/* ===== 3-Column Grid ===== */.grid-3col {    grid-template-columns: repeat(3, 1fr);}@media (max-width: 900px) {    .grid-3col {        grid-template-columns: repeat(2, 1fr);    }}@media (max-width: 600px) {    .grid-3col {        grid-template-columns: 1fr;    }}/* ===== Card Background Images ===== */.card-grid .card.has-bg {    position: relative;    background-size: cover;    background-position: center;    background-repeat: no-repeat;    overflow: hidden;}.card-grid .card.has-bg::before {    content: '';    position: absolute;    inset: 0;    background: linear-gradient(135deg, rgba(8,12,25,0.94) 0%, rgba(12,16,32,0.90) 100%);    z-index: 0;}.card-grid .card.has-bg > * {    position: relative;    z-index: 2;}/* Icon color for dark bg */.card-grid .card.has-bg .card-icon {    color: #60a5fa;}/* ===== Card Background Images ===== */.card.has-bg {    position: relative;    background-size: cover;    background-position: center;    background-repeat: no-repeat;    overflow: hidden;    border-radius: 12px;}.card.has-bg::before {    content: '';    position: absolute;    inset: 0;    background: linear-gradient(        160deg,        rgba(8, 12, 28, 0.92) 0%, rgba(10, 14, 30, 0.88) 100%    );    z-index: 0;}/* Lighter overlay for travel page - show more of the image */.hero-travel + .section .card.has-bg {    position: relative;    overflow: hidden;}.hero-travel + .section .card.has-bg::before {    display: none;}.hero-travel + .section .card.has-bg::after {    content: '';    position: absolute;    bottom: 0;    left: 0;    right: 0;    height: 65%;    background: linear-gradient(        to top,        rgba(255, 255, 255, 0.97) 0%,        rgba(255, 255, 255, 0.92) 60%,        rgba(255, 255, 255, 0) 100%    );    z-index: 1;    pointer-events: none;}.hero-travel + .section .card.has-bg > * {    position: relative;    z-index: 2;}.hero-travel + .section .card.has-bg .card-icon {    color: #1e3a5f;}.hero-travel + .section .card-grid .card.has-bg h3 {    color: #ffffff;    text-shadow: 0 2px 16px rgba(0,0,0,0.95);    font-size: 1.7rem;    font-weight: 900;    margin-bottom: 1rem;}.hero-travel + .section .card-grid .card.has-bg p {    color: #f8fafc;    text-shadow: 0 1px 10px rgba(0,0,0,0.85);    font-size: 1.1rem;    line-height: 1.7;    font-weight: 600;}.card.has-bg > * {    position: relative;    z-index: 1;}.card.has-bg .link-arrow {    color: #60a5fa;    font-weight: 700;    text-shadow: 0 1px 4px rgba(0,0,0,0.6);}
.card.has-bg .card-icon {    color: #93c5fd;    filter: drop-shadow(0 0 8px rgba(147, 197, 253, 0.4));}.card-grid .card.has-bg h3 {    color: #ffffff;    text-shadow: 0 2px 16px rgba(0,0,0,0.95);    font-size: 1.7rem;    font-weight: 900;    margin-bottom: 1rem;}.card.has-bg p {    color: #e2e8f0;    text-shadow: 0 1px 4px rgba(0,0,0,0.4);}/* ===== Products Section ===== */.product-categories {    display: grid;    grid-template-columns: repeat(2, 1fr);    gap: 3rem;    margin-top: 2.5rem;}@media (max-width: 900px) {    .product-categories {        grid-template-columns: 1fr;        gap: 2rem;    }}.product-category {    display: flex;    flex-direction: column;    background: var(--white);    border-radius: var(--radius-lg);    overflow: hidden;    box-shadow: var(--shadow);    transition: transform 0.3s, box-shadow 0.3s;}.product-category:hover {    transform: translateY(-5px);    box-shadow: var(--shadow-xl);}.pc-image {    height: 240px;    overflow: hidden;}.pc-image img {    width: 100%;    height: 100%;    object-fit: cover;    transition: transform 0.5s;}.product-category:hover .pc-image img {    transform: scale(1.05);}.pc-content {    padding: 2rem;}.pc-icon {    width: 48px;    height: 48px;    background: linear-gradient(135deg, var(--amber), var(--amber-light));    border-radius: 12px;    display: flex;    align-items: center;    justify-content: center;    color: var(--amber);    margin-bottom: 1rem;}.pc-icon svg {    width: 28px;    height: 28px;}.product-category h3 {    font-size: 1.5rem;    font-weight: 700;    margin-bottom: 0.75rem;    color: var(--slate-900);}.product-category > .pc-content > p {    color: var(--slate-600);    line-height: 1.7;    margin-bottom: 1.25rem;}.pc-list {    list-style: none;    display: grid;    grid-template-columns: repeat(2, 1fr);    gap: 0.5rem 1.5rem;    margin-bottom: 1.5rem;}@media (max-width: 600px) {    .pc-list {        grid-template-columns: 1fr;    }}.pc-list li {    position: relative;    padding-left: 1.25rem;    font-size: 0.9rem;    color: var(--slate-700);}.pc-list li::before {    content: '';    position: absolute;    left: 0;    top: 0.5rem;    width: 6px;    height: 6px;    background: var(--amber);    border-radius: 50%;}.pc-badges {    display: flex;    flex-wrap: wrap;    gap: 0.5rem;}.badge {    display: inline-block;    padding: 0.35rem 0.75rem;    background: var(--slate-100);    color: var(--slate-700);    font-size: 0.75rem;    font-weight: 600;    border-radius: 20px;    border: 1px solid var(--slate-200);}.product-cta {    text-align: center;    margin-top: 2.5rem;    padding: 1.5rem;    background: linear-gradient(135deg, rgba(37,99,235,0.08), rgba(245,158,11,0.08));    border-radius: var(--radius-lg);}.product-cta p {    color: var(--slate-600);    margin: 0;}.product-cta a {    color: var(--primary);    font-weight: 600;}.product-cta a:hover {    text-decoration: underline;}/* ===== Products Page ===== */.hero-products {    background: url('../images/hero-sourcing-new.jpg') center/cover no-repeat;    color: var(--amber);}.hero-products::before {    content: '';    position: absolute;    inset: 0;    background: linear-gradient(135deg, rgba(245,158,11,0.75) 0%, rgba(15,23,42,0.65) 100%);    z-index: 1;}/* Stats Row */.stats-row {    display: grid;    grid-template-columns: repeat(4, 1fr);    gap: 2rem;    margin-top: 2.5rem;}@media (max-width: 900px) {    .stats-row {        grid-template-columns: repeat(2, 1fr);    }}@media (max-width: 600px) {    .stats-row {        grid-template-columns: 1fr;    }}.stat-item {    text-align: center;    padding: 1.5rem;}.stat-icon {    width: 48px;    height: 48px;    margin: 0 auto 1rem;    background: linear-gradient(135deg, var(--amber), var(--amber-light));    border-radius: 12px;    display: flex;    align-items: center;    justify-content: center;    color: var(--amber);}.stat-icon svg {    width: 28px;    height: 28px;}.stat-item .stat-val {    font-size: 2.5rem;    font-weight: 800;    color: var(--slate-900);    line-height: 1;    margin-bottom: 0.5rem;}.stat-item .stat-label {    font-size: 0.9rem;    color: var(--slate-600);    line-height: 1.4;}/* Product Card 锟?for real product showcase */.product-card {    position: relative;    border-radius: var(--radius-lg);    overflow: hidden;    background: #fff;    box-shadow: 0 2px 12px rgba(0,0,0,0.08);    transition: transform 0.3s, box-shadow 0.3s;    display: flex;    flex-direction: column;}.product-card:hover {    transform: translateY(-4px);    box-shadow: 0 8px 24px rgba(0,0,0,0.12);}.product-card-img {    aspect-ratio: 1;    overflow: hidden;    background: #f8fafc;    display: flex;    align-items: center;    justify-content: center;}.product-card-img img {    width: 100%;    height: 100%;    object-fit: cover;    transition: transform 0.5s;}.product-card:hover .product-card-img img {    transform: scale(1.05);}.product-card-info {    padding: 0.85rem 1rem 1rem;    text-align: center;}.product-card-info h5 {    font-size: 0.85rem;    font-weight: 700;    color: var(--slate-800);    margin: 0 0 0.15rem;}.product-card-info .product-cn {    font-size: 0.72rem;    color: var(--slate-500);    margin: 0;}/* Gallery Grid */.gallery-grid {    display: grid;    grid-template-columns: repeat(5, 1fr);    gap: 1.25rem;    margin-top: 2.5rem;}@media (max-width: 1100px) {    .gallery-grid {        grid-template-columns: repeat(3, 1fr);    }}@media (max-width: 700px) {    .gallery-grid {        grid-template-columns: repeat(2, 1fr);    }}@media (max-width: 480px) {    .gallery-grid {        grid-template-columns: 1fr;    }}.gallery-item {    position: relative;    border-radius: var(--radius-lg);    overflow: hidden;    aspect-ratio: 1;    box-shadow: var(--shadow);}.gallery-item img {    width: 100%;    height: 100%;    object-fit: cover;    transition: transform 0.5s;}.gallery-item:hover img {    transform: scale(1.1);}.gallery-label {    position: absolute;    bottom: 0;    left: 0;    right: 0;    padding: 1rem;    background: linear-gradient(to top, rgba(0,0,0,0.75), transparent);    color: var(--amber);    font-weight: 600;    font-size: 0.95rem;}/* Certification Badges */.cert-badges {    display: flex;    flex-wrap: wrap;    gap: 0.5rem;    margin-top: 1.5rem;}.cert-badge {    display: inline-block;    padding: 0.4rem 0.85rem;    background: linear-gradient(135deg, var(--slate-800), var(--slate-700));    color: var(--amber-light);    font-size: 0.75rem;    font-weight: 600;    border-radius: 20px;}


/* Hero text visibility - make fully opaque */
.hero h1 {
    text-shadow: 2px 2px 8px rgba(0,0,0,0.5);
    color: #fff;
}
.hero-sub {
    color: #fff !important;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.5);
}

/* Fallback: ensure testimonial cards are always visible */
.testimonial-card {
    opacity: 1 !important;
}
/* Extra overlay to completely hide background images in card-grid */
.card-grid .card.has-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(8, 12, 28, 0.97);
    z-index: 1;
}
.card-grid .card.has-bg .card-icon,
.card-grid .card.has-bg h3,
.card-grid .card.has-bg p,
.card-grid .card.has-bg .link-arrow {
    position: relative;
    z-index: 2;
}