:root{
  --primary:#0f2f55;
  --accent:#d71920;
  --muted:#6b7280;
  --bg:#f5f7fb;
  --card:#ffffff;
  --text:#172033;
  --border:#dfe5ee;
  --shadow:0 14px 35px rgba(15,47,85,0.11);
}
*{box-sizing:border-box}
body{margin:0;font-family:"Noto Sans TC","Microsoft JhengHei",Arial,sans-serif;color:var(--text);background:var(--bg);line-height:1.65}
a{text-decoration:none;color:inherit}img{max-width:100%;display:block}.container{width:min(1180px,92%);margin:auto}.topbar{background:#091c33;color:#dbe7f6;font-size:14px}.topbar .container{display:flex;justify-content:space-between;gap:16px;padding:8px 0}.navbar{position:sticky;top:0;z-index:20;background:#fff;box-shadow:0 2px 12px rgba(0,0,0,0.06)}.nav-inner{height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{display:flex;align-items:center;gap:12px;font-weight:800;color:var(--primary);font-size:22px}.brand-mark{width:42px;height:42px;border-radius:10px;background:linear-gradient(135deg,var(--primary),#2f6ca3);display:grid;place-items:center;color:#fff;font-weight:900}.nav-links{display:flex;align-items:center;gap:4px}.nav-links a{padding:12px 16px;border-radius:10px;color:#24344d;font-weight:700}.nav-links a:hover,.nav-links a.active{background:#edf3fb;color:var(--primary)}.menu-toggle{display:none;border:0;background:var(--primary);color:#fff;padding:10px 12px;border-radius:8px;font-weight:700}.hero{position:relative;overflow:hidden;background:#0b1f39}.slides{display:flex;width:400%;animation:slide 18s infinite}.slide{width:25%;min-height:520px;background-size:cover;background-position:center;position:relative}.slide:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,14,28,0.72),rgba(4,14,28,0.31),rgba(4,14,28,0.07))}.slide-content{position:relative;z-index:1;width:min(1180px,92%);margin:auto;padding:110px 0;color:#fff}.slide-content h1{font-size:clamp(36px,5vw,62px);line-height:1.15;margin:0 0 18px}.slide-content p{font-size:20px;max-width:680px;color:#e8eef7}.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 22px;border-radius:999px;background:var(--accent);color:#fff;font-weight:800;margin-top:16px}.btn.secondary{background:#fff;color:var(--primary)}@keyframes slide{0%,20%{transform:translateX(0)}25%,45%{transform:translateX(-25%)}50%,70%{transform:translateX(-50%)}75%,95%{transform:translateX(-75%)}100%{transform:translateX(0)}}.section{padding:72px 0}.section-title{margin:0 0 12px;font-size:34px;color:var(--primary)}.section-subtitle{color:var(--muted);margin:0 0 34px}.grid{display:grid;gap:24px}.grid-3{grid-template-columns:repeat(3,1fr)}.feature-card,.product-card,.content-card{background:var(--card);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow);overflow:hidden}.feature-card{padding:30px}.feature-card h3{color:var(--primary);margin-top:0}.page-hero{background:linear-gradient(135deg,var(--primary),#163d6d);color:#fff;padding:68px 0}.page-hero h1{font-size:42px;margin:0 0 8px}.layout{display:grid;grid-template-columns:260px 1fr;gap:28px;align-items:start}.side-menu{background:#fff;border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow);padding:12px;position:sticky;top:96px}.side-menu button{width:100%;border:0;background:transparent;text-align:left;padding:14px 16px;border-radius:12px;font-weight:800;color:#26364f;cursor:pointer}.side-menu button.active,.side-menu button:hover{background:#edf3fb;color:var(--primary)}.tab-panel{display:none}.tab-panel.active{display:block}.content-card{padding:34px}.timeline{border-left:3px solid var(--primary);padding-left:22px}.timeline p{margin:0 0 20px}.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:28px}.filter-btn{border:1px solid var(--border);background:#fff;border-radius:999px;padding:10px 18px;cursor:pointer;font-weight:800}.filter-btn.active,.filter-btn:hover{background:var(--primary);color:#fff}.product-grid{grid-template-columns:repeat(4,1fr)}.product-card{transition:.2s}.product-card:hover{transform:translateY(-4px)}.product-img{height:190px;background:linear-gradient(135deg,#e7edf5,#f9fbff);display:grid;place-items:center;color:#375a84;font-weight:900;text-align:center;padding:18px}.product-body{padding:18px}.badge{display:inline-block;background:#eef4fb;color:var(--primary);border-radius:999px;padding:4px 10px;font-size:13px;font-weight:800}.product-body h3{margin:12px 0 8px;font-size:18px}.detail-hero{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center}.detail-image{min-height:360px;border-radius:22px;background:linear-gradient(135deg,#dfe8f3,#fff);display:grid;place-items:center;color:var(--primary);font-size:34px;font-weight:900;text-align:center;padding:30px;box-shadow:var(--shadow)}.spec-list{background:#fff;border-radius:18px;padding:24px;border:1px solid var(--border)}.spec-list li{margin-bottom:10px}.contact-form{display:grid;gap:16px}.contact-form input,.contact-form textarea,.contact-form select{width:100%;padding:13px 14px;border:1px solid var(--border);border-radius:10px;font:inherit}.contact-form textarea{min-height:150px}.footer{background:#07192e;color:#dce7f5;padding:42px 0;margin-top:60px}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:28px}.footer h3,.footer h4{color:#fff;margin-top:0}.placeholder-note{font-size:13px;color:#758299;margin-top:8px}
@media (max-width:900px){.menu-toggle{display:block}.nav-links{display:none;position:absolute;left:4%;right:4%;top:72px;background:#fff;box-shadow:var(--shadow);border-radius:16px;padding:10px;flex-direction:column;align-items:stretch}.nav-links.open{display:flex}.nav-links a{display:block}.topbar .container{flex-direction:column;gap:2px}.slide{min-height:460px}.grid-3,.product-grid,.footer-grid{grid-template-columns:1fr 1fr}.layout,.detail-hero{grid-template-columns:1fr}.side-menu{position:static}.page-hero h1{font-size:34px}}
@media (max-width:560px){.grid-3,.product-grid,.footer-grid{grid-template-columns:1fr}.section{padding:50px 0}.slide-content{padding:80px 0}.slide-content p{font-size:17px}.product-img{height:170px}.nav-inner{height:64px}.nav-links{top:64px}.brand{font-size:18px}.brand-mark{width:36px;height:36px}.page-hero{padding:48px 0}}

.topbar-inner{display:flex;justify-content:space-between;gap:16px;padding:8px 0}.topbar-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap}.language-switch{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,0.09);border:1px solid rgba(255,255,255,0.16);border-radius:999px;padding:3px 8px}.language-switch a{color:#dbe7f6;font-weight:800;font-size:13px}.language-switch a.active{color:#fff;text-decoration:underline;text-underline-offset:3px}@media (max-width:900px){.topbar-inner{flex-direction:column;gap:4px}.topbar-actions{justify-content:space-between}}


/* Brand logo image */
.brand{min-width:220px;}
.brand-logo{height:54px;width:auto;display:block;object-fit:contain;}
@media (max-width:768px){.brand{min-width:auto;}.brand-logo{height:42px;max-width:220px;}}
@media (max-width:560px){.brand-logo{height:38px;max-width:190px;}}


/* About company profile: text left, image right, no image cropping */
.about-profile-grid,
.company-profile-grid,
.profile-company-grid,
.about-intro-layout,
.company-intro-layout,
.about-content-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(320px, 1.05fr);
    gap: 36px;
    align-items: center;
}

.about-profile-text,
.company-profile-text,
.about-info,
.company-info,
.profile-info {
    align-self: center;
}

.about-profile-image,
.company-profile-image,
.about-image,
.company-image,
.profile-image {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
}

.about-profile-image img,
.company-profile-image img,
.about-image img,
.company-image img,
.profile-image img {
    width: 100%;
    height: auto !important;
    max-width: 100%;
    max-height: none !important;
    min-height: 0 !important;
    object-fit: contain !important;
    object-position: center;
    display: block;
    border-radius: 14px;
}

@media (max-width: 900px) {
    .about-profile-grid,
    .company-profile-grid,
    .profile-company-grid,
    .about-intro-layout,
    .company-intro-layout,
    .about-content-grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .about-profile-image img,
    .company-profile-image img,
    .about-image img,
    .company-image img,
    .profile-image img {
        width: 100%;
        height: auto !important;
        object-fit: contain !important;
    }
}


/* ===== Yue Sheng refined corporate polish v1 ===== */
:root{
  --ys-primary:#123a63;
  --ys-primary-dark:#08243f;
  --ys-accent:#b4202a;
  --ys-text:#1f2937;
  --ys-muted:#6b7280;
  --ys-line:#e5e7eb;
  --ys-soft:#f6f8fb;
  --ys-card:#ffffff;
  --ys-shadow:0 14px 34px rgba(12,35,64,0.09);
  --ys-radius:14px;
}
body{color:var(--ys-text);background:#fff;line-height:1.75}
.container{max-width:1180px}
.topbar{background:var(--ys-primary-dark)}
.navbar{background:rgba(255,255,255,0.84);backdrop-filter:blur(10px);box-shadow:0 1px 0 rgba(0,0,0,0.05)}
.brand img{height:54px;width:auto;max-width:250px;object-fit:contain}
.nav-menu a,.nav-link{font-weight:650;letter-spacing:.01em}
.nav-menu a:hover,.nav-link:hover{color:var(--ys-primary)}
.hero,.page-hero{position:relative}
.hero::after,.page-hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(8,36,63,0.55),rgba(8,36,63,0.16),rgba(8,36,63,0.00))}
.hero .container,.page-hero .container{position:relative;z-index:1}
.hero h1,.page-hero h1{letter-spacing:.01em}
.btn,.button,.primary-btn,button[type="submit"]{border-radius:999px;font-weight:700;transition:.2s ease}
.btn:hover,.button:hover,.primary-btn:hover{transform:translateY(-1px)}
section{scroll-margin-top:96px}
.section-title h2,.section-head h2,h2{color:#111827}
.card,.product-card,.cert-card,.info-card,.contact-card{
  border:1px solid var(--ys-line);
  border-radius:var(--ys-radius);
  box-shadow:var(--ys-shadow);
  background:var(--ys-card);
}
.product-card{overflow:hidden;transition:.22s ease}
.product-card:hover{transform:translateY(-5px);box-shadow:0 18px 42px rgba(12,35,64,0.12)}
.product-card img{background:var(--ys-soft)}
.filter-btn,.category-btn{
  border:1px solid var(--ys-line);
  border-radius:999px;
  transition:.18s ease;
}
.filter-btn.active,.filter-btn:hover,.category-btn.active,.category-btn:hover{
  background:var(--ys-primary);
  color:#fff;
  border-color:var(--ys-primary);
}
.side-menu,.sidebar{
  border:1px solid var(--ys-line);
  border-radius:var(--ys-radius);
  box-shadow:var(--ys-shadow);
  background:#fff;
}
.side-menu button,.sidebar a,.sidebar button{
  border-radius:10px;
  font-weight:700;
}
.side-menu button.active,.sidebar a.active,.sidebar button.active,
.side-menu button:hover,.sidebar a:hover,.sidebar button:hover{
  background:#eef4fa;
  color:var(--ys-primary);
}
.tab-panel{
  border:1px solid var(--ys-line);
  border-radius:var(--ys-radius);
  box-shadow:var(--ys-shadow);
  background:#fff;
}
.about-profile-grid{
  display:grid !important;
  grid-template-columns:minmax(0,.95fr) minmax(320px,1.05fr) !important;
  gap:34px !important;
  align-items:center !important;
}
.about-profile-text,.about-info,.company-info{align-self:center}
.about-profile-image,.about-image,.company-image{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.about-profile-image img,.about-image img,.company-image img{
  width:100% !important;
  height:auto !important;
  max-width:100% !important;
  min-height:0 !important;
  max-height:none !important;
  object-fit:contain !important;
  border-radius:12px;
  box-shadow:var(--ys-shadow);
}
.company-data-list,.about-data-list{
  display:grid;
  gap:0;
  border-top:1px solid var(--ys-line);
}
.company-data-list p,.about-data-list p{
  margin:0;
  padding:11px 0;
  border-bottom:1px solid var(--ys-line);
}
.company-data-list strong,.about-data-list strong{
  color:var(--ys-primary-dark);
}
.timeline,.history-list{position:relative}
.timeline-item,.history-item{
  border-left:4px solid var(--ys-primary);
  background:var(--ys-soft);
  border-radius:10px;
  padding:16px 18px;
  margin-bottom:14px;
}
.logo-wall,.customer-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
.logo-wall span,.customer-grid span,.customer-item{
  background:var(--ys-soft);
  border:1px solid var(--ys-line);
  border-radius:10px;
  padding:16px;
  text-align:center;
  font-weight:700;
  color:#4b5563;
}
.cert-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
}
.cert-card{padding:24px}
.contact-form input,.contact-form textarea,form input,form textarea{
  border:1px solid var(--ys-line);
  border-radius:10px;
  padding:12px 14px;
}
.footer{background:var(--ys-primary-dark)}
.footer a:hover{color:#fff}
img[alt]{font-size:12px}
@media(max-width:900px){
  .about-profile-grid{grid-template-columns:1fr !important;gap:22px !important}
  .cert-grid,.logo-wall,.customer-grid{grid-template-columns:1fr}
  .brand img{height:44px;max-width:210px}
}
@media(max-width:640px){
  .topbar-actions{gap:10px;flex-wrap:wrap}
  .about-profile-image img,.about-image img,.company-image img{border-radius:10px}
}


/* ===== Tab panel spacing adjustment ===== */
.tab-panel{
  padding:56px 64px !important;
  box-sizing:border-box !important;
}

@media(max-width:900px){
  .tab-panel{
    padding:32px !important;
  }
}

@media(max-width:640px){
  .tab-panel{
    padding:24px 20px !important;
  }
}


/* ===== Customer logo wall ===== */
.customer-logo-section{
  margin-top:24px;
}

.customer-logo-section h4{
  margin:0 0 8px;
  color:#111827;
  font-size:20px;
}

.customer-logo-section p{
  margin:0 0 22px;
  color:#6b7280;
}

.customer-logo-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:18px;
}

.customer-logo-grid a{
  aspect-ratio:2.45 / 1;
  min-height:112px;
  border:1px solid #e5e7eb;
  border-radius:14px;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px 24px;
  overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease;
}

.customer-logo-grid a:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 30px rgba(12,35,64,0.11);
  border-color:#cbd5e1;
}

.customer-logo-grid img{
  display:block;
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  object-position:center;
  box-shadow:none !important;
  border-radius:0 !important;
}

@media(max-width:1100px){
  .customer-logo-grid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }
}

@media(max-width:760px){
  .customer-logo-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:14px;
  }

  .customer-logo-grid a{
    aspect-ratio:2.2 / 1;
    min-height:88px;
    padding:14px 16px;
  }
}

@media(max-width:420px){
  .customer-logo-grid{
    grid-template-columns:1fr;
  }

  .customer-logo-grid a{
    aspect-ratio:2.6 / 1;
    min-height:96px;
  }
}


/* ===== Fix tab panel visibility ===== */
.tab-panel{
  display:none;
}

.tab-panel.active{
  display:block;
}


/* ===== Final tab visibility repair ===== */
.tab-panel:not(.active){
  display:none !important;
}

.tab-panel.active{
  display:block !important;
}


/* ===== Footer 2.0 corporate layout ===== */
.footer-v2{
  background:#0e2b4c !important;
  color:#b8c7d9 !important;
  padding:56px 0 22px !important;
}

.footer-grid-v2{
  display:grid;
  grid-template-columns:1.35fr .75fr .85fr 1.25fr;
  gap:34px;
}

.footer-v2 h3,
.footer-v2 h4{
  color:#fff !important;
  margin:0 0 16px !important;
  line-height:1.35;
}

.footer-v2 p{
  margin:0 0 18px;
  color:#b8c7d9;
}

.footer-v2 a{
  color:#b8c7d9 !important;
  display:block;
  margin:8px 0;
  transition:color .18s ease, transform .18s ease;
}

.footer-v2 a:hover{
  color:#fff !important;
  transform:translateX(2px);
}

.footer-badges{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.footer-badges span{
  border:1px solid rgba(255,255,255,0.16);
  border-radius:999px;
  padding:5px 10px;
  font-size:13px;
  color:#dce8f5;
}

.footer-contact-item{
  display:flex !important;
  align-items:flex-start;
  gap:10px;
  margin:10px 0 !important;
}

.footer-icon{
  width:22px;
  min-width:22px;
  height:22px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,0.09);
  color:#fff;
  font-size:13px;
  line-height:1;
  margin-top:2px;
}

.footer-bottom-v2{
  border-top:1px solid rgba(255,255,255,0.12);
  margin-top:34px;
  padding-top:18px;
  display:flex;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
  font-size:14px;
  color:#91a5bb;
}

.footer-bottom-v2 a{
  display:inline !important;
  margin:0 !important;
}

.contact-map{
  margin-top:28px;
  border:1px solid #e5e7eb;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 14px 34px rgba(12,35,64,0.09);
}

.contact-map iframe{
  width:100%;
  height:360px;
  border:0;
  display:block;
}

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

@media(max-width:640px){
  .footer-grid-v2{
    grid-template-columns:1fr;
    gap:26px;
  }

  .footer-v2{
    padding:42px 0 20px !important;
  }

  .footer-bottom-v2{
    display:block;
  }

  .footer-bottom-v2 div + div{
    margin-top:8px;
  }

  .contact-map iframe{
    height:300px;
  }
}


/* ===== Local AOS scroll animation ===== */
[data-aos]{
  opacity:0;
  transition-property:opacity, transform;
  transition-duration:.75s;
  transition-timing-function:cubic-bezier(.22,.61,.36,1);
  will-change:opacity, transform;
}

[data-aos="fade-up"]{transform:translateY(28px);}
[data-aos="fade-down"]{transform:translateY(-28px);}
[data-aos="fade-left"]{transform:translateX(32px);}
[data-aos="fade-right"]{transform:translateX(-32px);}
[data-aos="zoom-in"]{transform:scale(.96);}
[data-aos="fade"]{transform:none;}

[data-aos].aos-animate{
  opacity:1;
  transform:none;
}

@media (prefers-reduced-motion: reduce){
  [data-aos]{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
}


/* ===== UI Polish v2: color system, buttons, icons, scroll progress ===== */
:root{
  --ys-primary:#123A63;
  --ys-primary-dark:#0B2745;
  --ys-primary-light:#EAF2F9;
  --ys-accent:#C1272D;
  --ys-accent-dark:#9E1F28;
  --ys-gray:#F5F7FA;
  --ys-text:#1F2937;
  --ys-muted:#6B7280;
  --ys-border:#E5E7EB;
  --ys-shadow:0 16px 38px rgba(12,35,64,0.11);
  --ys-radius:12px;
}

body{color:var(--ys-text);background:#fff;}

a{transition:color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;}

.navbar, header.navbar{
  background:rgba(255,255,255,0.84);
  border-bottom:1px solid rgba(18,58,99,0.07);
  backdrop-filter:blur(12px);
}

.nav-link:hover,.nav-links a:hover,.nav-menu a:hover{color:var(--ys-primary) !important;}

.nav-link.active,.nav-links a.active,.nav-menu a.active{
  color:var(--ys-primary) !important;
  background:var(--ys-primary-light);
}

.btn,.button,.primary-btn,.secondary-btn,input[type="submit"],button[type="submit"],.form button,.hero a[class*="btn"],a.btn{
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:12px 22px;
  border-radius:999px !important;
  border:1px solid transparent;
  font-weight:700;
  letter-spacing:.02em;
  cursor:pointer;
  box-shadow:none;
}

.btn,.primary-btn,button[type="submit"],.form button,input[type="submit"]{
  background:var(--ys-primary) !important;
  color:#fff !important;
}

.btn:hover,.primary-btn:hover,button[type="submit"]:hover,.form button:hover,input[type="submit"]:hover{
  background:var(--ys-accent) !important;
  color:#fff !important;
  transform:translateY(-2px);
  box-shadow:var(--ys-shadow);
}

.secondary-btn,.btn.secondary,.btn-outline{
  background:#fff !important;
  color:var(--ys-primary) !important;
  border-color:var(--ys-primary) !important;
}

.secondary-btn:hover,.btn.secondary:hover,.btn-outline:hover{
  background:var(--ys-primary) !important;
  color:#fff !important;
}

.card,.product-card,.cert-card,.tab-panel,.contact-card{
  border-color:var(--ys-border) !important;
  border-radius:var(--ys-radius) !important;
  box-shadow:0 10px 26px rgba(12,35,64,0.07);
}

.product-card:hover,.cert-card:hover,.card:hover{
  transform:translateY(-4px);
  box-shadow:var(--ys-shadow);
}

.filter-btn.active,.filter-btn:hover,.category-btn.active,.category-btn:hover{
  background:var(--ys-primary) !important;
  border-color:var(--ys-primary) !important;
  color:#fff !important;
}

.footer,.footer-v2{background:var(--ys-primary-dark) !important;}

.footer-icon{display:inline-flex;align-items:center;justify-content:center;}
.footer-icon i{font-size:12px;line-height:1;}

.scroll-progress{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:4px;
  z-index:9999;
  background:rgba(18,58,99,0.09);
  pointer-events:none;
}

.scroll-progress span{
  display:block;
  width:0%;
  height:100%;
  background:linear-gradient(90deg,var(--ys-primary),var(--ys-accent));
  transition:width .08s linear;
}

.back-to-top{
  position:fixed;
  right:22px;
  bottom:24px;
  width:48px;
  height:48px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,0.19);
  background:var(--ys-primary);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 14px 34px rgba(12,35,64,0.21);
  opacity:0;
  visibility:hidden;
  transform:translateY(12px);
  z-index:9998;
  cursor:pointer;
}

.back-to-top.is-visible{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

.back-to-top:hover{
  background:var(--ys-accent);
  transform:translateY(-3px);
}

[data-aos]{
  opacity:0;
  transition-property:opacity, transform;
  transition-duration:.82s;
  transition-timing-function:cubic-bezier(.22,.61,.36,1);
  will-change:opacity, transform;
}

[data-aos="fade-up"]{transform:translateY(34px);}
[data-aos="fade-down"]{transform:translateY(-34px);}
[data-aos="fade-left"]{transform:translateX(36px);}
[data-aos="fade-right"]{transform:translateX(-36px);}
[data-aos="zoom-in"]{transform:scale(.94);}
[data-aos="fade"]{transform:none;}

[data-aos].aos-animate{
  opacity:1;
  transform:none;
}

@media(max-width:768px){
  .back-to-top{width:44px;height:44px;right:16px;bottom:18px;}
  [data-aos="fade-left"],[data-aos="fade-right"]{transform:translateY(28px);}
}

@media (prefers-reduced-motion: reduce){
  *,[data-aos]{transition:none !important;animation:none !important;}
  [data-aos]{opacity:1 !important;transform:none !important;}
}



/* About page corporate timeline, philosophy cards and policy cards */
.section-lead{
  max-width:820px;
  margin:0 0 28px;
  color:#4b5563;
  line-height:1.8;
}
.timeline-intro{
  margin:0 0 34px;
  padding:22px 26px;
  border-left:4px solid var(--accent);
  border-radius:0 18px 18px 0;
  background:linear-gradient(135deg,#f8fafc,#fff);
  box-shadow:0 8px 24px rgba(15,47,85,0.05);
}
.timeline-intro p{margin:0;color:#374151;line-height:1.85;font-weight:600;}
.corporate-timeline.upgraded-timeline{
  position:relative;
  display:grid;
  gap:0;
  margin-top:8px;
  padding:8px 0 8px;
}
.corporate-timeline.upgraded-timeline::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:2px;
  transform:translateX(-50%);
  background:linear-gradient(180deg,rgba(15,47,85,0.07),var(--primary),rgba(15,47,85,0.07));
}
.timeline-decade{
  position:relative;
  z-index:2;
  display:flex;
  justify-content:center;
  margin:22px 0 18px;
}
.timeline-decade:first-child{margin-top:0;}
.timeline-decade span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:108px;
  min-height:42px;
  padding:8px 20px;
  border-radius:999px;
  background:linear-gradient(135deg,var(--primary),#1d568c);
  color:#fff;
  font-weight:900;
  letter-spacing:.04em;
  box-shadow:0 12px 26px rgba(15,47,85,0.19);
}
.timeline-entry{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) 96px minmax(0,1fr);
  align-items:start;
  gap:20px;
  margin:0 0 22px;
}
.timeline-marker{
  position:absolute;
  left:50%;
  top:23px;
  width:16px;
  height:16px;
  transform:translateX(-50%);
  border-radius:50%;
  background:var(--accent);
  border:4px solid #fff;
  box-shadow:0 0 0 6px rgba(215,25,32,0.11),0 6px 16px rgba(15,47,85,0.16);
  z-index:2;
}
.timeline-entry::before{
  content:"";
  position:absolute;
  top:31px;
  width:calc(50% - 80px);
  height:1px;
  background:linear-gradient(90deg,rgba(15,47,85,0.09),rgba(15,47,85,0.26));
}
.timeline-entry:nth-of-type(even)::before{left:calc(50% + 18px);}
.timeline-entry:nth-of-type(odd)::before{right:calc(50% + 18px);}
.timeline-year{
  grid-column:2;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:8px 14px;
  border-radius:14px;
  background:#fff;
  border:1px solid rgba(15,47,85,0.14);
  color:var(--primary);
  font-size:1.08rem;
  font-weight:900;
  letter-spacing:.03em;
  box-shadow:0 8px 20px rgba(15,47,85,0.07);
  z-index:3;
}
.timeline-content{
  position:relative;
  background:#fff;
  border:1px solid var(--border);
  border-radius:18px;
  padding:22px 24px;
  box-shadow:0 10px 28px rgba(15,47,85,0.07);
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.timeline-entry:nth-of-type(even) .timeline-content{grid-column:3;text-align:left;}
.timeline-entry:nth-of-type(odd) .timeline-content{grid-column:1;grid-row:1;text-align:right;}
.timeline-content::after{
  content:"";
  position:absolute;
  top:24px;
  width:12px;
  height:12px;
  background:#fff;
  border-top:1px solid var(--border);
  border-right:1px solid var(--border);
  transform:rotate(45deg);
}
.timeline-entry:nth-of-type(even) .timeline-content::after{left:-7px;transform:rotate(225deg);}
.timeline-entry:nth-of-type(odd) .timeline-content::after{right:-7px;}
.timeline-content:hover{
  transform:translateY(-5px);
  box-shadow:0 18px 42px rgba(15,47,85,0.12);
  border-color:rgba(15,47,85,0.25);
}
.timeline-content h3{
  margin:0 0 8px;
  color:var(--primary);
  font-size:1.08rem;
}
.timeline-content p{margin:0;color:#4b5563;line-height:1.78;}
.icon-card-grid,.policy-card-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
}
.icon-card,.policy-card{
  position:relative;
  overflow:hidden;
  min-height:100%;
  background:#fff;
  border:1px solid var(--border);
  border-radius:16px;
  padding:28px 24px;
  box-shadow:0 8px 24px rgba(0,0,0,0.07);
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.icon-card::after,.policy-card::after{
  content:"";
  position:absolute;
  right:-36px;
  top:-36px;
  width:108px;
  height:108px;
  border-radius:50%;
  background:rgba(15,47,85,0.04);
}
.icon-card:hover,.policy-card:hover{
  transform:translateY(-6px);
  box-shadow:0 16px 38px rgba(0,0,0,0.11);
  border-color:rgba(15,47,85,0.23);
}
.icon-card-symbol,.policy-card-icon{
  width:58px;
  height:58px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-bottom:18px;
  border-radius:16px;
  background:linear-gradient(135deg,var(--primary),#1e5a91);
  color:#fff;
  font-size:1.45rem;
  box-shadow:0 10px 22px rgba(15,47,85,0.19);
}
.icon-card h3,.policy-card h3{
  margin:0 0 10px;
  color:var(--primary);
  font-size:1.18rem;
}
.icon-card p,.policy-card p{
  margin:0;
  color:#4b5563;
  line-height:1.75;
}
.management-policy-card{
  margin-top:24px;
  border:1px solid var(--border);
  border-radius:16px;
  padding:26px;
  background:linear-gradient(135deg,#f8fafc,#fff);
  box-shadow:0 8px 24px rgba(0,0,0,0.05);
}
.management-policy-card h3{
  margin:0 0 18px;
  color:var(--primary);
}
.policy-list-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px 22px;
}
.policy-list-grid div{
  display:flex;
  align-items:flex-start;
  gap:10px;
  color:#374151;
  line-height:1.65;
  font-weight:600;
}
.policy-list-grid i{color:var(--accent);margin-top:5px;}
.policy-card ul{
  margin:0;
  padding-left:1.15rem;
  color:#4b5563;
  line-height:1.75;
}
.policy-card li+li{margin-top:6px;}
@media (max-width:900px){
  .corporate-timeline.upgraded-timeline{padding-left:28px;}
  .corporate-timeline.upgraded-timeline::before{left:8px;transform:none;}
  .timeline-decade{justify-content:flex-start;margin-left:-28px;}
  .timeline-entry{grid-template-columns:86px minmax(0,1fr);gap:14px;margin-bottom:18px;}
  .timeline-entry::before{display:none;}
  .timeline-marker{left:8px;top:18px;}
  .timeline-year{grid-column:1;min-height:42px;font-size:1rem;}
  .timeline-entry:nth-of-type(even) .timeline-content,
  .timeline-entry:nth-of-type(odd) .timeline-content{grid-column:2;grid-row:auto;text-align:left;}
  .timeline-content::after{display:none;}
  .icon-card-grid,.policy-card-grid,.policy-list-grid{grid-template-columns:1fr;}
}
@media (max-width:640px){
  .timeline-intro{padding:18px 20px;margin-bottom:26px;}
  .timeline-entry{grid-template-columns:1fr;gap:8px;padding-left:18px;}
  .timeline-year{grid-column:1;width:max-content;}
  .timeline-entry:nth-of-type(even) .timeline-content,
  .timeline-entry:nth-of-type(odd) .timeline-content{grid-column:1;}
  .timeline-marker{left:8px;top:14px;}
  .timeline-content,.icon-card,.policy-card,.management-policy-card{padding:20px;}
}

/* v1.4 Timeline reverse order enhancements */
.timeline-decade-nav{
  position:sticky;
  top:92px;
  z-index:5;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  margin:0 0 28px;
  padding:14px 16px;
  border:1px solid rgba(18,58,99,0.09);
  border-radius:16px;
  background:rgba(255,255,255,0.81);
  box-shadow:0 10px 28px rgba(15,47,85,0.07);
  backdrop-filter:blur(12px);
}
.timeline-decade-nav a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:7px 13px;
  border-radius:999px;
  border:1px solid rgba(18,58,99,0.12);
  color:var(--primary);
  font-size:.9rem;
  font-weight:800;
  text-decoration:none;
  transition:background .25s ease,color .25s ease,transform .25s ease,border-color .25s ease;
}
.timeline-decade-nav a:hover,
.timeline-decade-nav a:focus-visible{
  background:var(--primary);
  color:#fff;
  border-color:var(--primary);
  transform:translateY(-2px);
}
.timeline-entry--latest .timeline-content{
  border-color:rgba(193,39,45,0.33);
  box-shadow:0 18px 42px rgba(193,39,45,0.11),0 10px 28px rgba(15,47,85,0.07);
}
.timeline-entry--latest .timeline-marker{
  background:var(--primary);
  box-shadow:0 0 0 7px rgba(18,58,99,0.12),0 8px 18px rgba(15,47,85,0.16);
}
.timeline-latest-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-left:8px;
  padding:4px 9px;
  border-radius:999px;
  background:var(--accent);
  color:#fff;
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.04em;
  vertical-align:middle;
}
@media (max-width:900px){
  .timeline-decade-nav{position:static;top:auto;margin-bottom:22px;padding:12px;}
  .timeline-decade-nav a{font-size:.86rem;min-height:32px;padding:6px 11px;}
}

/* ===== v1.5 International Corporate Color Upgrade ===== */
:root{
  --primary:#102F4F;
  --accent:#A91F2B;
  --muted:#64748B;
  --bg:#F6F8FB;
  --card:#FFFFFF;
  --text:#172033;
  --border:#DDE5EF;
  --shadow:0 18px 44px rgba(16,47,79,0.09);

  --ys-primary:#102F4F;
  --ys-primary-dark:#071B31;
  --ys-primary-medium:#1D4F7A;
  --ys-primary-light:#EAF1F7;
  --ys-accent:#A91F2B;
  --ys-accent-dark:#841923;
  --ys-gold:#B68A35;
  --ys-ink:#172033;
  --ys-text:#172033;
  --ys-muted:#64748B;
  --ys-gray:#F6F8FB;
  --ys-gray-2:#EEF3F8;
  --ys-border:#DDE5EF;
  --ys-card:#FFFFFF;
  --ys-shadow:0 18px 44px rgba(16,47,79,0.09);
  --ys-shadow-hover:0 24px 58px rgba(16,47,79,0.14);
  --ys-radius:16px;
}

html{scroll-behavior:smooth;}
body{
  color:var(--ys-ink) !important;
  background:linear-gradient(180deg,#fff 0%,#fff 42%,#f8fafc 100%) !important;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

::selection{background:rgba(16,47,79,0.14);color:var(--ys-primary-dark);}

a{color:inherit;}

.topbar{
  background:linear-gradient(90deg,#06192D 0%,#0B2745 52%,#102F4F 100%) !important;
  color:#C8D7E8 !important;
  border-bottom:1px solid rgba(255,255,255,0.07);
}
.topbar a,.language-switch a{color:#D9E6F4 !important;}
.language-switch{
  background:rgba(255,255,255,0.07) !important;
  border-color:rgba(255,255,255,0.14) !important;
}
.language-switch a.active{color:#fff !important;}

.navbar,header.navbar{
  background:rgba(255,255,255,0.86) !important;
  border-bottom:1px solid rgba(16,47,79,0.07) !important;
  box-shadow:0 8px 26px rgba(16,47,79,0.05) !important;
  backdrop-filter:blur(14px);
}
.brand,.brand a{color:var(--ys-primary) !important;}
.nav-links a,.nav-link,.nav-menu a{
  color:#25364C !important;
  font-weight:750 !important;
  letter-spacing:.01em;
}
.nav-links a:hover,.nav-link:hover,.nav-menu a:hover{
  color:var(--ys-primary) !important;
  background:var(--ys-primary-light) !important;
}
.nav-links a.active,.nav-link.active,.nav-menu a.active{
  color:var(--ys-primary) !important;
  background:linear-gradient(135deg,#EAF1F7,#F5F8FB) !important;
  box-shadow:inset 0 0 0 1px rgba(16,47,79,0.05);
}
.menu-toggle{
  background:linear-gradient(135deg,var(--ys-primary),var(--ys-primary-medium)) !important;
  color:#fff !important;
}

.hero,.page-hero{
  background:linear-gradient(135deg,#071B31 0%,#102F4F 58%,#1D4F7A 100%) !important;
  color:#fff !important;
}
.page-hero::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 85% 20%,rgba(255,255,255,0.11),transparent 28%),
    linear-gradient(90deg,rgba(7,27,49,0.77),rgba(16,47,79,0.48));
}
.hero::after,.page-hero::after{
  background:linear-gradient(90deg,rgba(7,27,49,0.76),rgba(16,47,79,0.42),rgba(16,47,79,0.09)) !important;
}
.slide:before{
  background:linear-gradient(90deg,rgba(7,27,49,0.77),rgba(16,47,79,0.44),rgba(7,27,49,0.09)) !important;
}
.hero h1,.page-hero h1,.slide-content h1{
  color:#fff !important;
  text-shadow:0 12px 30px rgba(0,0,0,0.19);
}
.hero p,.page-hero p,.slide-content p{color:#E4EDF7 !important;}

.section{background:transparent;}
.section:nth-of-type(even){background:linear-gradient(180deg,rgba(246,248,251,0.46),rgba(255,255,255,0.00));}
.section-title,.section-title h2,.section-head h2,h2{
  color:var(--ys-primary-dark) !important;
  letter-spacing:.005em;
}
.section-title::after,.section-head h2::after{
  background:linear-gradient(90deg,var(--ys-accent),rgba(169,31,43,0.00));
}
.section-subtitle,.section-lead,.timeline-intro p,p{color:var(--ys-muted);}

.btn,.button,.primary-btn,a.btn,button[type="submit"],input[type="submit"],.form button{
  background:linear-gradient(135deg,var(--ys-primary),var(--ys-primary-medium)) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,0.07) !important;
  border-radius:12px !important;
  box-shadow:0 12px 26px rgba(16,47,79,0.16) !important;
}
.btn:hover,.button:hover,.primary-btn:hover,a.btn:hover,button[type="submit"]:hover,input[type="submit"]:hover,.form button:hover{
  background:linear-gradient(135deg,var(--ys-accent),var(--ys-accent-dark)) !important;
  color:#fff !important;
  transform:translateY(-2px);
  box-shadow:0 18px 42px rgba(169,31,43,0.19) !important;
}
.btn.secondary,.secondary-btn,.btn-outline{
  background:rgba(255,255,255,0.84) !important;
  color:var(--ys-primary) !important;
  border:1px solid rgba(16,47,79,0.19) !important;
  box-shadow:0 10px 24px rgba(16,47,79,0.09) !important;
}
.btn.secondary:hover,.secondary-btn:hover,.btn-outline:hover{
  background:var(--ys-primary) !important;
  color:#fff !important;
}

.card,.feature-card,.product-card,.content-card,.cert-card,.info-card,.contact-card,.tab-panel,.side-menu,.sidebar,.spec-list,.management-policy-card,.contact-map{
  background:var(--ys-card) !important;
  border:1px solid var(--ys-border) !important;
  border-radius:var(--ys-radius) !important;
  box-shadow:var(--ys-shadow) !important;
}
.card:hover,.feature-card:hover,.product-card:hover,.cert-card:hover,.info-card:hover,.contact-card:hover,.icon-card:hover,.policy-card:hover{
  border-color:rgba(16,47,79,0.19) !important;
  box-shadow:var(--ys-shadow-hover) !important;
}
.feature-card h3,.product-body h3,.content-card h3,.cert-card h3,.info-card h3,.contact-card h3,
.icon-card h3,.policy-card h3,.management-policy-card h3{
  color:var(--ys-primary) !important;
}
.product-img,.detail-image{
  background:linear-gradient(135deg,#EDF3F8 0%,#F8FAFC 55%,#FFFFFF 100%) !important;
  color:var(--ys-primary) !important;
}
.badge,.product-body .badge{
  background:var(--ys-primary-light) !important;
  color:var(--ys-primary) !important;
  border:1px solid rgba(16,47,79,0.07);
}

.filter-btn,.category-btn{
  background:#fff !important;
  border:1px solid var(--ys-border) !important;
  color:#30445E !important;
}
.filter-btn.active,.filter-btn:hover,.category-btn.active,.category-btn:hover{
  background:linear-gradient(135deg,var(--ys-primary),var(--ys-primary-medium)) !important;
  border-color:var(--ys-primary) !important;
  color:#fff !important;
  box-shadow:0 12px 28px rgba(16,47,79,0.14);
}

.side-menu button,.sidebar a,.sidebar button{
  color:#30445E !important;
}
.side-menu button.active,.side-menu button:hover,.sidebar a.active,.sidebar button.active,.sidebar a:hover,.sidebar button:hover{
  background:linear-gradient(135deg,#EAF1F7,#F6F8FB) !important;
  color:var(--ys-primary) !important;
}

.timeline-intro{
  border-left-color:var(--ys-accent) !important;
  background:linear-gradient(135deg,#F8FAFC 0%,#FFFFFF 100%) !important;
  box-shadow:0 12px 30px rgba(16,47,79,0.06) !important;
}
.corporate-timeline.upgraded-timeline::before{
  background:linear-gradient(180deg,rgba(16,47,79,0.07),rgba(16,47,79,0.63),rgba(16,47,79,0.07)) !important;
}
.timeline-decade span{
  background:linear-gradient(135deg,#071B31,var(--ys-primary-medium)) !important;
  color:#fff !important;
  box-shadow:0 14px 30px rgba(16,47,79,0.19) !important;
}
.timeline-year{
  color:var(--ys-primary) !important;
  background:#fff !important;
  border-color:rgba(16,47,79,0.16) !important;
  box-shadow:0 10px 24px rgba(16,47,79,0.07) !important;
}
.timeline-marker{
  background:var(--ys-accent) !important;
  box-shadow:0 0 0 6px rgba(169,31,43,0.11),0 8px 18px rgba(16,47,79,0.16) !important;
}
.timeline-content{
  background:linear-gradient(180deg,#FFFFFF 0%,#FBFCFE 100%) !important;
  border-color:var(--ys-border) !important;
  box-shadow:0 14px 34px rgba(16,47,79,0.08) !important;
}
.timeline-content h3{color:var(--ys-primary) !important;}
.timeline-content p{color:#475569 !important;}
.timeline-entry--latest .timeline-content{
  border-color:rgba(169,31,43,0.33) !important;
  box-shadow:0 18px 44px rgba(169,31,43,0.11),0 12px 30px rgba(16,47,79,0.07) !important;
}
.timeline-entry--latest .timeline-marker{background:var(--ys-primary) !important;}
.timeline-latest-badge{
  background:linear-gradient(135deg,var(--ys-accent),var(--ys-accent-dark)) !important;
  color:#fff !important;
}
.timeline-decade-nav{
  background:rgba(255,255,255,0.83) !important;
  border-color:rgba(16,47,79,0.11) !important;
  box-shadow:0 14px 34px rgba(16,47,79,0.08) !important;
}
.timeline-decade-nav a{
  color:var(--ys-primary) !important;
  border-color:rgba(16,47,79,0.14) !important;
  background:#fff;
}
.timeline-decade-nav a:hover,.timeline-decade-nav a:focus-visible{
  background:var(--ys-primary) !important;
  color:#fff !important;
  border-color:var(--ys-primary) !important;
}

.icon-card,.policy-card{
  background:linear-gradient(180deg,#fff 0%,#FBFCFE 100%) !important;
  border:1px solid var(--ys-border) !important;
  border-radius:18px !important;
  box-shadow:0 14px 34px rgba(16,47,79,0.07) !important;
}
.icon-card::after,.policy-card::after{background:rgba(16,47,79,0.04) !important;}
.icon-card-symbol,.policy-card-icon{
  background:linear-gradient(135deg,var(--ys-primary),var(--ys-primary-medium)) !important;
  color:#fff !important;
  box-shadow:0 12px 26px rgba(16,47,79,0.19) !important;
}
.policy-list-grid i{color:var(--ys-accent) !important;}

.customer-logo-grid a,.customer-item,.logo-wall span,.customer-grid span{
  background:#fff !important;
  border-color:var(--ys-border) !important;
  box-shadow:0 10px 26px rgba(16,47,79,0.05);
}
.customer-logo-grid a:hover{
  border-color:rgba(16,47,79,0.21) !important;
  box-shadow:var(--ys-shadow) !important;
}
.customer-logo-grid img{
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:contain !important;
  object-position:center !important;
}

.contact-form input,.contact-form textarea,.contact-form select,form input,form textarea,form select{
  background:#fff !important;
  border:1px solid var(--ys-border) !important;
  color:var(--ys-ink) !important;
  box-shadow:inset 0 1px 0 rgba(16,47,79,0.02);
}
.contact-form input:focus,.contact-form textarea:focus,.contact-form select:focus,form input:focus,form textarea:focus,form select:focus{
  outline:none;
  border-color:rgba(16,47,79,0.42) !important;
  box-shadow:0 0 0 4px rgba(16,47,79,0.09) !important;
}

.footer,.footer-v2{
  background:linear-gradient(135deg,#06192D 0%,#0B2745 58%,#102F4F 100%) !important;
  color:#C8D7E8 !important;
}
.footer h3,.footer h4,.footer-v2 h3,.footer-v2 h4{color:#fff !important;}
.footer p,.footer-v2 p,.footer a,.footer-v2 a{color:#C8D7E8 !important;}
.footer a:hover,.footer-v2 a:hover{color:#fff !important;}
.footer-icon{
  background:rgba(255,255,255,0.09) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,0.11);
}
.footer-bottom-v2{border-top-color:rgba(255,255,255,0.12) !important;color:#93A8BF !important;}
.footer-badges span{border-color:rgba(255,255,255,0.16) !important;color:#D7E4F2 !important;}

.scroll-progress{background:rgba(16,47,79,0.07) !important;}
.scroll-progress span{background:linear-gradient(90deg,var(--ys-primary),var(--ys-accent),var(--ys-gold)) !important;}
.back-to-top{
  background:linear-gradient(135deg,var(--ys-primary),var(--ys-primary-medium)) !important;
  box-shadow:0 16px 38px rgba(16,47,79,0.21) !important;
}
.back-to-top:hover{background:linear-gradient(135deg,var(--ys-accent),var(--ys-accent-dark)) !important;}

@media(max-width:900px){
  .nav-links{border:1px solid var(--ys-border) !important;box-shadow:var(--ys-shadow) !important;}
}

/* ===== v1.7 Fix: Customer logo grid overlap prevention ===== */
.customer-logo-grid{
  display:grid !important;
  grid-template-columns:repeat(4, minmax(180px, 1fr)) !important;
  gap:20px !important;
  align-items:stretch !important;
  width:100% !important;
  margin-top:22px !important;
}

.customer-logo-grid > a{
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  height:112px !important;
  min-height:112px !important;
  aspect-ratio:auto !important;
  box-sizing:border-box !important;
  padding:22px 28px !important;
  overflow:hidden !important;
  isolation:isolate !important;
}

.customer-logo-grid > a > img{
  position:static !important;
  display:block !important;
  width:auto !important;
  height:auto !important;
  max-width:88% !important;
  max-height:64px !important;
  min-width:0 !important;
  min-height:0 !important;
  object-fit:contain !important;
  object-position:center !important;
  flex:0 1 auto !important;
  transform:none !important;
  margin:0 auto !important;
}

@media(max-width:1180px){
  .customer-logo-grid{grid-template-columns:repeat(3, minmax(180px, 1fr)) !important;}
}

@media(max-width:760px){
  .customer-logo-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:14px !important;
  }
  .customer-logo-grid > a{
    height:96px !important;
    min-height:96px !important;
    padding:18px 20px !important;
  }
  .customer-logo-grid > a > img{
    max-width:86% !important;
    max-height:54px !important;
  }
}

@media(max-width:460px){
  .customer-logo-grid{grid-template-columns:1fr !important;}
  .customer-logo-grid > a{
    height:94px !important;
    min-height:94px !important;
  }
}

/* ===== v1.8 Fix: Keep customer logo wall inside About tab panel ===== */
.content-card,
.tab-panel,
.customer-logo-section{
  min-width:0 !important;
  max-width:100% !important;
  box-sizing:border-box !important;
}

.tab-panel{
  overflow-x:hidden !important;
}

.customer-logo-section{
  width:100% !important;
  overflow:hidden !important;
}

.customer-logo-grid{
  width:100% !important;
  max-width:100% !important;
  box-sizing:border-box !important;
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  gap:18px !important;
  align-items:stretch !important;
  margin:22px 0 0 !important;
  padding:0 !important;
  overflow:hidden !important;
}

.customer-logo-grid > a{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  height:104px !important;
  min-height:104px !important;
  box-sizing:border-box !important;
  padding:20px 24px !important;
  overflow:hidden !important;
}

.customer-logo-grid > a > img{
  display:block !important;
  width:auto !important;
  height:auto !important;
  max-width:100% !important;
  max-height:56px !important;
  object-fit:contain !important;
  object-position:center !important;
}

@media(max-width:1180px){
  .customer-logo-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:16px !important;
  }
}

@media(max-width:760px){
  .customer-logo-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:14px !important;
  }
  .customer-logo-grid > a{
    height:92px !important;
    min-height:92px !important;
    padding:16px 18px !important;
  }
  .customer-logo-grid > a > img{
    max-height:48px !important;
  }
}

@media(max-width:520px){
  .customer-logo-grid{
    grid-template-columns:1fr !important;
  }
  .customer-logo-grid > a{
    height:92px !important;
    min-height:92px !important;
    padding:16px 20px !important;
  }
}


/* ===== v1.9 Customer logo grid safe spacing =====
   Adds inner breathing room so rectangular customer SVG logos do not touch
   or appear clipped by the About tab panel boundaries. */
.customer-logo-section{
  width:100% !important;
  max-width:100% !important;
  box-sizing:border-box !important;
  padding:8px 12px 14px !important;
  margin-inline:auto !important;
  overflow:visible !important;
}

.customer-logo-grid{
  width:100% !important;
  max-width:100% !important;
  box-sizing:border-box !important;
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  gap:22px !important;
  padding:8px !important;
  margin:0 auto !important;
  overflow:visible !important;
}

.customer-logo-grid a{
  width:100% !important;
  max-width:100% !important;
  box-sizing:border-box !important;
  min-width:0 !important;
  aspect-ratio:2.55 / 1 !important;
  min-height:116px !important;
  padding:24px 30px !important;
}

.customer-logo-grid img{
  width:100% !important;
  height:100% !important;
  max-width:88% !important;
  max-height:72% !important;
  object-fit:contain !important;
  object-position:center !important;
}

@media(max-width:1100px){
  .customer-logo-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:20px !important;
    padding:8px !important;
  }
}

@media(max-width:640px){
  .customer-logo-section{
    padding:6px 6px 12px !important;
  }

  .customer-logo-grid{
    grid-template-columns:1fr !important;
    gap:16px !important;
    padding:6px !important;
  }

  .customer-logo-grid a{
    min-height:104px !important;
    padding:20px 24px !important;
  }

  .customer-logo-grid img{
    max-width:86% !important;
    max-height:70% !important;
  }
}

/* ===== v2.0 Quality Certifications Enhancement ===== */
.cert-section-header{margin-bottom:28px;max-width:860px}
.section-kicker{display:inline-flex;align-items:center;gap:8px;margin-bottom:10px;color:#8b1e24;font-weight:900;font-size:13px;letter-spacing:.14em;text-transform:uppercase}
.section-kicker:before{content:"";width:34px;height:2px;background:linear-gradient(90deg,#8b1e24,#c1272d);display:inline-block;border-radius:999px}
.cert-section-header h2{margin:0 0 12px;color:var(--primary)}
.cert-section-header p{color:#5b6b82;line-height:1.8;margin:0}
.quality-cert-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:0 0 28px}
.quality-cert-summary>div{background:linear-gradient(135deg,#f8fbff,#eef4fb);border:1px solid rgba(18,58,99,0.11);border-radius:18px;padding:20px 22px;box-shadow:0 10px 28px rgba(9,28,51,0.05)}
.quality-cert-summary strong{display:block;color:var(--primary);font-size:28px;line-height:1.1;margin-bottom:6px;letter-spacing:-.02em}
.quality-cert-summary span{display:block;color:#5b6b82;font-weight:800;font-size:14px}
.quality-cert-grid{display:grid;gap:24px;max-width:100%;overflow:hidden}
.quality-cert-card{display:grid;grid-template-columns:minmax(220px,300px) 1fr;gap:0;background:#fff;border:1px solid rgba(18,58,99,0.12);border-radius:22px;overflow:hidden;box-shadow:0 16px 40px rgba(9,28,51,0.09);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.quality-cert-card:hover{transform:translateY(-4px);box-shadow:0 24px 56px rgba(9,28,51,0.12);border-color:rgba(18,58,99,0.25)}
.quality-cert-preview{background:linear-gradient(135deg,#eaf1f8,#f8fbff);padding:22px;display:flex;align-items:center;justify-content:center;min-height:310px;border-right:1px solid rgba(18,58,99,0.09)}
.quality-cert-preview img{width:100%;height:100%;max-height:290px;object-fit:contain;border-radius:12px;background:#fff;box-shadow:0 10px 24px rgba(9,28,51,0.11)}
.quality-cert-body{padding:28px;min-width:0}
.cert-type-badge{display:inline-flex;align-items:center;padding:6px 12px;border-radius:999px;background:#eef4fb;color:var(--primary);font-size:12px;font-weight:900;letter-spacing:.04em;text-transform:uppercase;margin-bottom:12px}
.quality-cert-body h3{margin:0 0 10px;color:var(--primary);font-size:24px;line-height:1.3}
.quality-cert-body p{margin:0 0 20px;color:#5b6b82;line-height:1.75}
.quality-cert-body dl{display:grid;gap:10px;margin:0 0 22px}
.quality-cert-body dl div{display:grid;grid-template-columns:140px 1fr;gap:14px;padding:10px 0;border-bottom:1px solid rgba(18,58,99,0.09)}
.quality-cert-body dt{color:#7a8797;font-size:13px;font-weight:900;text-transform:uppercase;letter-spacing:.04em}
.quality-cert-body dd{margin:0;color:#24344d;font-weight:800;word-break:break-word}
.cert-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.cert-actions .btn{margin-top:0;border-radius:12px;padding:10px 16px;gap:8px}
.cert-actions .btn.secondary{border:1px solid rgba(18,58,99,0.14);background:#fff;color:var(--primary)}
.cert-actions .btn.secondary:hover{background:#edf3fb}
@media (max-width: 900px){
  .quality-cert-summary{grid-template-columns:1fr}
  .quality-cert-card{grid-template-columns:1fr}
  .quality-cert-preview{border-right:0;border-bottom:1px solid rgba(18,58,99,0.09);min-height:260px}
  .quality-cert-preview img{max-height:250px}
}
@media (max-width: 560px){
  .quality-cert-body{padding:22px}
  .quality-cert-body h3{font-size:21px}
  .quality-cert-body dl div{grid-template-columns:1fr;gap:4px}
  .cert-actions .btn{width:100%}
}

/* ===== Certificate Lightbox v2.2 ===== */
.quality-cert-preview{
  position:relative;
  width:100%;
  border:0;
  cursor:zoom-in;
  font:inherit;
  color:inherit;
}
.quality-cert-preview:focus-visible{
  outline:3px solid rgba(193,39,45,0.31);
  outline-offset:-6px;
}
.quality-cert-preview .cert-preview-overlay{
  position:absolute;
  inset:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:8px;
  background:rgba(9,28,51,0.55);
  color:#fff;
  border-radius:12px;
  opacity:0;
  transform:scale(.98);
  transition:opacity .22s ease, transform .22s ease;
  font-weight:900;
  letter-spacing:.03em;
  pointer-events:none;
}
.quality-cert-preview .cert-preview-overlay i{font-size:28px;color:#fff}
.quality-cert-preview:hover .cert-preview-overlay,
.quality-cert-preview:focus-visible .cert-preview-overlay{opacity:1;transform:scale(1)}
.quality-cert-preview:hover img{transform:scale(1.018)}
.quality-cert-preview img{transition:transform .25s ease, box-shadow .25s ease}
.cert-lightbox{
  position:fixed;
  inset:0;
  z-index:9999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:clamp(18px,4vw,48px);
  background:rgba(4,12,24,0.72);
  backdrop-filter:blur(10px);
}
.cert-lightbox.is-open{display:flex}
.cert-lightbox__dialog{
  position:relative;
  width:min(920px,100%);
  max-height:92vh;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.cert-lightbox__title{
  align-self:stretch;
  margin:0 0 14px;
  color:#fff;
  font-size:clamp(18px,2vw,24px);
  font-weight:900;
  letter-spacing:.01em;
}
.cert-lightbox__image-wrap{
  width:100%;
  max-height:calc(92vh - 64px);
  overflow:auto;
  background:#f8fbff;
  border:1px solid rgba(255,255,255,0.16);
  border-radius:18px;
  padding:clamp(12px,2vw,22px);
  box-shadow:0 28px 80px rgba(0,0,0,0.33);
}
.cert-lightbox__image{
  display:block;
  width:100%;
  max-width:860px;
  height:auto;
  margin:0 auto;
  border-radius:10px;
  background:#fff;
  box-shadow:0 12px 32px rgba(9,28,51,0.18);
}
.cert-lightbox__close{
  position:absolute;
  top:-14px;
  right:-14px;
  width:44px;
  height:44px;
  border:0;
  border-radius:999px;
  background:#fff;
  color:#123A63;
  box-shadow:0 12px 30px rgba(0,0,0,0.25);
  cursor:pointer;
  font-size:20px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.cert-lightbox__close:hover{background:#f0f5fb;color:#C1272D}
body.cert-lightbox-open{overflow:hidden}
@media (max-width: 768px){
  .quality-cert-preview .cert-preview-overlay{inset:16px}
  .cert-lightbox{padding:14px}
  .cert-lightbox__close{top:8px;right:8px;z-index:2}
  .cert-lightbox__title{padding-right:54px}
}

/* ===== Motion Design System v2.3: Corporate Tech Interactions ===== */
:root{
  --motion-fast:160ms;
  --motion-normal:260ms;
  --motion-slow:760ms;
  --motion-ease:cubic-bezier(.22,.61,.36,1);
  --motion-shadow:0 20px 48px rgba(8,30,58,0.14),0 6px 18px rgba(8,30,58,0.07);
  --motion-shadow-strong:0 28px 68px rgba(8,30,58,0.19),0 10px 28px rgba(8,30,58,0.11);
  --motion-glow:0 0 0 1px rgba(255,255,255,0.16) inset,0 14px 30px rgba(18,58,99,0.25),0 0 24px rgba(44,117,188,0.19);
}

/* Card Hover: translate, shadow, border highlight */
.feature-card,
.product-card,
.content-card,
.cert-card,
.info-card,
.contact-card,
.card,
.icon-card,
.policy-card,
.management-policy-card,
.customer-logo-grid a,
.spec-list,
.contact-map{
  transition:
    transform var(--motion-normal) var(--motion-ease),
    box-shadow var(--motion-normal) var(--motion-ease),
    border-color var(--motion-normal) var(--motion-ease),
    background-color var(--motion-normal) var(--motion-ease),
    filter var(--motion-normal) var(--motion-ease);
  will-change:transform;
}

.feature-card:hover,
.product-card:hover,
.content-card:hover,
.cert-card:hover,
.info-card:hover,
.contact-card:hover,
.card:hover,
.icon-card:hover,
.policy-card:hover,
.management-policy-card:hover,
.customer-logo-grid a:hover,
.spec-list:hover,
.contact-map:hover{
  transform:translateY(-8px);
  box-shadow:var(--motion-shadow);
  border-color:rgba(44,117,188,0.37) !important;
}

.product-card:hover,
.cert-card:hover,
.timeline-content:hover,
.icon-card:hover,
.policy-card:hover{
  box-shadow:var(--motion-shadow-strong);
}

/* Subtle scan line for high-value corporate cards */
.product-card::before,
.cert-card::before,
.icon-card::before,
.policy-card::before,
.timeline-content::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,0.16) 35%,transparent 70%);
  opacity:0;
  transform:translateX(-32%);
  transition:opacity var(--motion-normal) var(--motion-ease),transform 680ms var(--motion-ease);
}
.product-card,
.cert-card,
.timeline-content{position:relative;overflow:hidden;}
.product-card:hover::before,
.cert-card:hover::before,
.icon-card:hover::before,
.policy-card:hover::before,
.timeline-content:hover::before{
  opacity:1;
  transform:translateX(32%);
}

/* Button Gradient + Glow */
.btn,
.button,
.primary-btn,
a.btn,
button[type="submit"],
input[type="submit"],
.form button,
.filter-btn.active,
.category-btn.active{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.16);
  background:linear-gradient(135deg,#0b2747 0%,#123a63 46%,#2c75bc 100%) !important;
  color:#fff !important;
  box-shadow:0 10px 24px rgba(18,58,99,0.18);
  transition:
    transform var(--motion-fast) var(--motion-ease),
    box-shadow var(--motion-normal) var(--motion-ease),
    filter var(--motion-normal) var(--motion-ease),
    border-color var(--motion-normal) var(--motion-ease);
}

.btn::after,
.button::after,
.primary-btn::after,
a.btn::after,
button[type="submit"]::after,
input[type="submit"]::after,
.form button::after{
  content:"";
  position:absolute;
  inset:-1px;
  background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,0.25) 45%,transparent 70%);
  transform:translateX(-120%);
  transition:transform 620ms var(--motion-ease);
  pointer-events:none;
}

.btn:hover,
.button:hover,
.primary-btn:hover,
a.btn:hover,
button[type="submit"]:hover,
input[type="submit"]:hover,
.form button:hover,
.filter-btn.active:hover,
.category-btn.active:hover{
  transform:translateY(-2px);
  box-shadow:var(--motion-glow);
  border-color:rgba(255,255,255,0.32);
  filter:saturate(1.08);
}
.btn:hover::after,
.button:hover::after,
.primary-btn:hover::after,
a.btn:hover::after,
button[type="submit"]:hover::after,
input[type="submit"]:hover::after,
.form button:hover::after{
  transform:translateX(120%);
}

.btn:active,
.button:active,
.primary-btn:active,
a.btn:active,
button[type="submit"]:active,
input[type="submit"]:active,
.form button:active{
  transform:translateY(0);
  box-shadow:0 8px 18px rgba(18,58,99,0.18);
}

.btn.secondary,
.secondary-btn,
.btn-outline{
  background:linear-gradient(135deg,#ffffff 0%,#f3f7fb 100%) !important;
  color:var(--ys-primary,var(--primary)) !important;
  border:1px solid rgba(18,58,99,0.18) !important;
  box-shadow:0 8px 22px rgba(8,30,58,0.07);
}
.btn.secondary:hover,
.secondary-btn:hover,
.btn-outline:hover{
  box-shadow:0 16px 34px rgba(8,30,58,0.13),0 0 22px rgba(44,117,188,0.14);
  border-color:rgba(44,117,188,0.40) !important;
}

/* Section title line draw */
.section-title{
  position:relative;
  display:inline-block;
  padding-bottom:12px;
}
.section-title::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:64px;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--ys-accent,var(--accent)),#2c75bc);
  transform-origin:left center;
  transform:scaleX(.34);
  transition:transform 520ms var(--motion-ease),width 520ms var(--motion-ease);
}
.section-title:hover::after,
.section-title.aos-animate::after{
  width:96px;
  transform:scaleX(1);
}

/* Timeline Line Draw + node pulse */
.corporate-timeline.upgraded-timeline::before{
  bottom:auto !important;
  height:0;
  background:linear-gradient(180deg,rgba(44,117,188,0.11),#2c75bc 18%,var(--ys-primary,var(--primary)) 82%,rgba(44,117,188,0.09)) !important;
  box-shadow:0 0 18px rgba(44,117,188,0.18);
  transition:height 1400ms var(--motion-ease);
}
.corporate-timeline.upgraded-timeline.timeline-line-draw::before{
  height:100%;
}
.timeline-marker{
  transition:transform 360ms var(--motion-ease),box-shadow 360ms var(--motion-ease),background-color 360ms var(--motion-ease);
}
.timeline-entry.aos-animate .timeline-marker,
.timeline-entry:hover .timeline-marker{
  transform:translateX(-50%) scale(1.14);
  box-shadow:0 0 0 8px rgba(215,25,32,0.12),0 0 24px rgba(44,117,188,0.19),0 8px 18px rgba(8,30,58,0.18);
}
.timeline-entry.aos-animate .timeline-marker::after,
.timeline-entry:hover .timeline-marker::after{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius:50%;
  border:1px solid rgba(215,25,32,0.23);
  animation:timelinePulse 1150ms var(--motion-ease) infinite;
}
.timeline-entry::before{
  transform-origin:center;
  transform:scaleX(.18);
  opacity:.42;
  transition:transform 560ms var(--motion-ease),opacity 560ms var(--motion-ease);
}
.timeline-entry.aos-animate::before,
.timeline-entry:hover::before{
  transform:scaleX(1);
  opacity:1;
}
.timeline-content{
  transition:
    transform var(--motion-normal) var(--motion-ease),
    box-shadow var(--motion-normal) var(--motion-ease),
    border-color var(--motion-normal) var(--motion-ease),
    opacity 520ms var(--motion-ease);
}
.timeline-content:hover{
  transform:translateY(-8px) !important;
  border-color:rgba(44,117,188,0.39) !important;
}

@keyframes timelinePulse{
  0%{opacity:.55;transform:scale(.82)}
  100%{opacity:0;transform:scale(1.42)}
}

/* Header glass effect on scroll-capable layouts */
.navbar{
  transition:background-color var(--motion-normal) var(--motion-ease),box-shadow var(--motion-normal) var(--motion-ease),backdrop-filter var(--motion-normal) var(--motion-ease);
}
.navbar:hover,
.navbar.is-scrolled{
  background:rgba(255,255,255,0.81);
  backdrop-filter:blur(12px);
  box-shadow:0 10px 30px rgba(8,30,58,0.11);
}

@media (max-width:768px){
  .corporate-timeline.upgraded-timeline::before{
    left:8px !important;
    transform:none !important;
  }
  .timeline-entry.aos-animate .timeline-marker,
  .timeline-entry:hover .timeline-marker{
    transform:scale(1.12);
  }
  .feature-card:hover,
  .product-card:hover,
  .content-card:hover,
  .cert-card:hover,
  .info-card:hover,
  .contact-card:hover,
  .card:hover,
  .icon-card:hover,
  .policy-card:hover,
  .management-policy-card:hover,
  .customer-logo-grid a:hover{
    transform:translateY(-4px);
  }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
    transition-duration:.001ms !important;
  }
  .corporate-timeline.upgraded-timeline::before{height:100% !important;}
}

/* ===== Formspree Contact Form v2.4 ===== */
.formspree-contact-form .form-status{
  display:none;
  padding:14px 16px;
  border-radius:14px;
  border:1px solid transparent;
  font-weight:700;
  line-height:1.6;
}
.formspree-contact-form .form-status.is-visible{display:block;}
.formspree-contact-form .form-status.is-success{
  color:#0f5132;
  background:#eaf7ef;
  border-color:#badbcc;
}
.formspree-contact-form .form-status.is-error{
  color:#842029;
  background:#f8d7da;
  border-color:#f5c2c7;
}
.formspree-contact-form .form-honeypot{
  position:absolute !important;
  left:-9999px !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
}
.formspree-contact-form button[disabled],
.formspree-contact-form .form-submit-btn:disabled{
  cursor:not-allowed;
  opacity:.72;
  transform:none !important;
  box-shadow:none !important;
}
.formspree-contact-form input:focus,
.formspree-contact-form select:focus,
.formspree-contact-form textarea:focus{
  outline:3px solid rgba(44,117,188,0.16);
  border-color:var(--ys-accent-blue, #2c75bc);
}

/* v2.5 Breadcrumb / site positioning bar */
.breadcrumb-bar{
  background:linear-gradient(90deg,#F7FAFD 0%,#FFFFFF 55%,#F3F7FC 100%);
  border-top:1px solid rgba(226,232,240,0.63);
  border-bottom:1px solid rgba(203,213,225,0.63);
  box-shadow:0 8px 24px rgba(15,35,64,0.04);
  position:relative;
  z-index:9;
}
.breadcrumb-inner{
  min-height:56px;
  display:flex;
  align-items:center;
  overflow-x:auto;
  scrollbar-width:none;
}
.breadcrumb-inner::-webkit-scrollbar{display:none;}
.breadcrumb-list{
  list-style:none;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  margin:0;
  padding:10px 0;
  color:#607089;
  font-size:14px;
  line-height:1.4;
}
.breadcrumb-list li{
  display:inline-flex;
  align-items:center;
  min-width:0;
}
.breadcrumb-list a{
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:#3D516C;
  font-weight:700;
  transition:color .22s ease, transform .22s ease;
  white-space:nowrap;
}
.breadcrumb-list a:hover{
  color:var(--primary);
  transform:translateY(-1px);
}
.breadcrumb-list a i{
  color:var(--accent);
  font-size:13px;
}
.breadcrumb-separator{
  color:#A2AEC0;
  font-size:11px;
}
.breadcrumb-list .current{
  color:var(--primary);
  font-weight:800;
  max-width:100%;
}
@media (max-width:560px){
  .breadcrumb-inner{min-height:50px;}
  .breadcrumb-list{flex-wrap:nowrap;font-size:13px;gap:7px;padding:9px 0;}
  .breadcrumb-list .current{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
}


/* Environmental certification single-card layout */
.quality-cert-grid--single {
  grid-template-columns: minmax(0, 1fr);
  max-width: 560px;
  margin-inline: auto;
}
.quality-cert-grid--single .quality-cert-card {
  width: 100%;
}

/* ===== Certificate Lightbox v2.7: Multi-page Controls ===== */
.cert-lightbox__header{
  align-self:stretch;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin:0 0 14px;
  padding-right:54px;
}
.cert-lightbox__header .cert-lightbox__title{
  margin:0;
  padding:0;
}
.cert-lightbox__counter{
  flex:0 0 auto;
  min-width:64px;
  text-align:center;
  color:#fff;
  font-weight:900;
  letter-spacing:.08em;
  font-size:14px;
  line-height:1;
  padding:10px 13px;
  border:1px solid rgba(255,255,255,0.19);
  border-radius:999px;
  background:rgba(255,255,255,0.09);
  backdrop-filter:blur(8px);
}
.cert-lightbox__counter:empty{display:none}
.cert-lightbox__nav{
  position:absolute;
  top:50%;
  z-index:3;
  width:52px;
  height:52px;
  border:1px solid rgba(255,255,255,0.19);
  border-radius:999px;
  background:rgba(255,255,255,0.83);
  color:#123A63;
  box-shadow:0 14px 34px rgba(0,0,0,0.25);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  transform:translateY(-50%);
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, opacity .2s ease;
}
.cert-lightbox__nav--prev{left:-74px}
.cert-lightbox__nav--next{right:-74px}
.cert-lightbox__nav:hover:not(:disabled){
  transform:translateY(-50%) scale(1.06);
  background:#fff;
  box-shadow:0 18px 44px rgba(0,0,0,0.30),0 0 0 5px rgba(31,94,146,0.18);
}
.cert-lightbox__nav:disabled{
  opacity:.32;
  cursor:not-allowed;
  box-shadow:none;
}
.cert-lightbox__nav[hidden]{display:none!important}
@media (max-width: 1080px){
  .cert-lightbox__nav--prev{left:10px}
  .cert-lightbox__nav--next{right:10px}
  .cert-lightbox__nav{
    width:46px;
    height:46px;
    background:rgba(255,255,255,0.77);
  }
}
@media (max-width: 768px){
  .cert-lightbox__header{
    display:block;
    padding-right:54px;
  }
  .cert-lightbox__counter{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-top:10px;
  }
  .cert-lightbox__nav{
    top:auto;
    bottom:18px;
    transform:none;
  }
  .cert-lightbox__nav:hover:not(:disabled){transform:scale(1.04)}
  .cert-lightbox__nav--prev{left:24px}
  .cert-lightbox__nav--next{right:24px}
  .cert-lightbox__image-wrap{padding-bottom:74px}
}


/* v2.8 Timeline compatibility fix: keep history axis static and always visible */
.corporate-timeline.upgraded-timeline::before{
  top:0 !important;
  bottom:0 !important;
  height:auto !important;
  opacity:1 !important;
  transform:translateX(-50%) !important;
  transition:none !important;
  animation:none !important;
  background:linear-gradient(180deg,rgba(44,117,188,0.11),#2c75bc 18%,var(--ys-primary,var(--primary)) 82%,rgba(44,117,188,0.09)) !important;
  box-shadow:0 0 10px rgba(44,117,188,0.12);
}
.corporate-timeline.upgraded-timeline.timeline-line-draw::before{
  height:auto !important;
}
.corporate-timeline.upgraded-timeline .timeline-decade,
.corporate-timeline.upgraded-timeline .timeline-entry,
.corporate-timeline.upgraded-timeline .timeline-content,
.corporate-timeline.upgraded-timeline .timeline-year,
.corporate-timeline.upgraded-timeline .timeline-marker{
  opacity:1 !important;
  visibility:visible !important;
  animation:none !important;
}
.corporate-timeline.upgraded-timeline .timeline-entry::before{
  transform:scaleX(1) !important;
  opacity:1 !important;
  transition:none !important;
}
.corporate-timeline.upgraded-timeline .timeline-marker{
  transition:box-shadow .25s ease,background-color .25s ease !important;
}
.corporate-timeline.upgraded-timeline .timeline-entry.aos-animate .timeline-marker::after{
  animation:none !important;
}
@media (max-width:900px){
  .corporate-timeline.upgraded-timeline::before{
    left:8px !important;
    transform:none !important;
  }
}

/* ===== v3.1 Premium mobile hamburger button ===== */
.menu-toggle{
  position:relative !important;
  display:none;
  width:46px;
  height:46px;
  padding:0 !important;
  border:1px solid rgba(255,255,255,0.16) !important;
  border-radius:14px !important;
  background:linear-gradient(135deg,#102F4F 0%,#1D4F7A 100%) !important;
  color:#fff !important;
  box-shadow:0 10px 24px rgba(16,47,79,0.19), inset 0 1px 0 rgba(255,255,255,0.16) !important;
  cursor:pointer;
  transition:transform .22s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease;
  overflow:hidden;
}
.menu-toggle::before{
  content:"";
  position:absolute;
  inset:-45% -80%;
  background:linear-gradient(120deg,transparent 35%,rgba(255,255,255,0.25) 50%,transparent 65%);
  transform:translateX(-55%);
  transition:transform .55s ease;
  pointer-events:none;
}
.menu-toggle:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 34px rgba(16,47,79,0.26),0 0 0 4px rgba(29,79,122,0.09), inset 0 1px 0 rgba(255,255,255,0.19) !important;
  border-color:rgba(255,255,255,0.25) !important;
}
.menu-toggle:hover::before{transform:translateX(55%);}
.menu-toggle:focus-visible{
  outline:3px solid rgba(193,39,45,0.31);
  outline-offset:3px;
}
.menu-toggle__bar{
  position:absolute;
  left:50%;
  width:22px;
  height:2px;
  border-radius:999px;
  background:#fff;
  transform:translateX(-50%);
  box-shadow:0 0 12px rgba(255,255,255,0.22);
  transition:top .22s ease, transform .22s ease, opacity .18s ease, width .22s ease;
}
.menu-toggle__bar:nth-child(1){top:15px;}
.menu-toggle__bar:nth-child(2){top:22px;width:18px;}
.menu-toggle__bar:nth-child(3){top:29px;}
.menu-toggle:hover .menu-toggle__bar:nth-child(2){width:22px;}
.menu-toggle.is-active .menu-toggle__bar:nth-child(1){top:22px;transform:translateX(-50%) rotate(45deg);}
.menu-toggle.is-active .menu-toggle__bar:nth-child(2){opacity:0;transform:translateX(-35%);}
.menu-toggle.is-active .menu-toggle__bar:nth-child(3){top:22px;transform:translateX(-50%) rotate(-45deg);}
.menu-toggle__text{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
@media (max-width:900px){
  .menu-toggle{display:inline-flex !important;align-items:center;justify-content:center;flex:0 0 auto;}
  .nav-links{
    overflow:hidden;
    transform-origin:top right;
    animation:mobileMenuDrop .18s ease both;
  }
}
@keyframes mobileMenuDrop{
  from{opacity:0;transform:translateY(-8px) scale(.98);}
  to{opacity:1;transform:translateY(0) scale(1);}
}
@media (prefers-reduced-motion: reduce){
  .menu-toggle,.menu-toggle::before,.menu-toggle__bar,.nav-links{transition:none !important;animation:none !important;}
}

/* Product detail image support */
.detail-image.product-photo{
  overflow:hidden;
  padding:22px;
}
.detail-image.product-photo img{
  width:100%;
  height:100%;
  max-height:420px;
  object-fit:contain;
  object-position:center;
  border-radius:16px;
}
@media (max-width:900px){
  .detail-image.product-photo img{max-height:360px;}
}
@media (max-width:560px){
  .detail-image.product-photo{padding:14px;min-height:260px;}
  .detail-image.product-photo img{max-height:300px;}
}

/* Product card image support */
.product-img img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
}

/* ===== v3.5 Product Card CTA + Deeper Hover Treatment ===== */
.product-card{
  isolation:isolate;
  border-color:rgba(16,47,79,0.11) !important;
  transition:
    transform var(--motion-normal,260ms) var(--motion-ease,cubic-bezier(.22,.61,.36,1)),
    box-shadow var(--motion-normal,260ms) var(--motion-ease,cubic-bezier(.22,.61,.36,1)),
    border-color var(--motion-normal,260ms) var(--motion-ease,cubic-bezier(.22,.61,.36,1)),
    background-color var(--motion-normal,260ms) var(--motion-ease,cubic-bezier(.22,.61,.36,1));
}
.product-card .product-img{
  position:relative;
  overflow:hidden;
  transition:
    background var(--motion-normal,260ms) var(--motion-ease,cubic-bezier(.22,.61,.36,1)),
    filter var(--motion-normal,260ms) var(--motion-ease,cubic-bezier(.22,.61,.36,1));
}
.product-card .product-img::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,rgba(9,28,51,0.18),rgba(18,58,99,0.07));
  opacity:0;
  pointer-events:none;
  transition:opacity var(--motion-normal,260ms) var(--motion-ease,cubic-bezier(.22,.61,.36,1));
}
.product-card .product-img img{
  transition:
    transform var(--motion-normal,260ms) var(--motion-ease,cubic-bezier(.22,.61,.36,1)),
    filter var(--motion-normal,260ms) var(--motion-ease,cubic-bezier(.22,.61,.36,1));
}
.product-card .product-body{
  transition:background var(--motion-normal,260ms) var(--motion-ease,cubic-bezier(.22,.61,.36,1));
}
.product-card .product-body p{
  display:inline-flex;
  align-items:center;
  gap:8px;
  width:max-content;
  max-width:100%;
  margin:12px 0 0;
  padding:8px 14px;
  border:1px solid rgba(18,58,99,0.19);
  border-radius:999px;
  color:var(--ys-primary,var(--primary));
  font-weight:800;
  letter-spacing:.02em;
  background:linear-gradient(135deg,#ffffff 0%,#f4f8fc 100%);
  box-shadow:0 6px 16px rgba(8,30,58,0.05);
  transition:
    color var(--motion-normal,260ms) var(--motion-ease,cubic-bezier(.22,.61,.36,1)),
    background var(--motion-normal,260ms) var(--motion-ease,cubic-bezier(.22,.61,.36,1)),
    border-color var(--motion-normal,260ms) var(--motion-ease,cubic-bezier(.22,.61,.36,1)),
    box-shadow var(--motion-normal,260ms) var(--motion-ease,cubic-bezier(.22,.61,.36,1)),
    transform var(--motion-normal,260ms) var(--motion-ease,cubic-bezier(.22,.61,.36,1));
}
.product-card .product-body p::after{
  content:"→";
  line-height:1;
  transform:translateX(0);
  transition:transform var(--motion-normal,260ms) var(--motion-ease,cubic-bezier(.22,.61,.36,1));
}
.product-card:hover{
  transform:translateY(-8px);
  border-color:rgba(44,117,188,0.51) !important;
  box-shadow:0 30px 72px rgba(8,30,58,0.19),0 12px 26px rgba(8,30,58,0.11) !important;
  background:linear-gradient(180deg,#ffffff 0%,#f7fafc 100%) !important;
}
.product-card:hover .product-img{
  background:linear-gradient(135deg,#dce8f4 0%,#eef5fb 52%,#ffffff 100%) !important;
}
.product-card:hover .product-img::after{
  opacity:1;
}
.product-card:hover .product-img img{
  transform:scale(1.045);
  filter:contrast(1.08) saturate(1.06) brightness(.96);
}
.product-card:hover .product-body{
  background:linear-gradient(180deg,#ffffff 0%,#f2f7fc 100%);
}
.product-card:hover .product-body h3{
  color:#0b2747 !important;
}
.product-card:hover .product-body p{
  color:#fff;
  border-color:rgba(11,39,71,0.84);
  background:linear-gradient(135deg,#07192e 0%,#123a63 58%,#1c5f9e 100%);
  box-shadow:0 14px 30px rgba(18,58,99,0.23),0 0 24px rgba(44,117,188,0.16);
  transform:translateY(-1px);
}
.product-card:hover .product-body p::after{
  transform:translateX(4px);
}
@media (prefers-reduced-motion: reduce){
  .product-card,
  .product-card .product-img,
  .product-card .product-img::after,
  .product-card .product-img img,
  .product-card .product-body,
  .product-card .product-body p,
  .product-card .product-body p::after{
    transition:none !important;
  }
  .product-card:hover,
  .product-card:hover .product-img img,
  .product-card:hover .product-body p{
    transform:none !important;
  }
}

/* ===== v3.6 Product Card Image-First Hover Overlay ===== */
.product-grid .product-card{
  position:relative;
  display:block;
  min-height:0;
  border-radius:22px;
  overflow:hidden;
  background:#fff;
  border:1px solid rgba(16,47,79,0.12) !important;
}
.product-grid .product-card .product-img{
  width:100%;
  height:auto !important;
  min-height:230px;
  aspect-ratio:4 / 3;
  padding:24px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,#eef4fa 0%,#f8fbff 58%,#ffffff 100%);
  color:#355b83;
  font-weight:900;
  text-align:center;
  line-height:1.45;
  overflow:hidden;
}
.product-grid .product-card .product-img img{
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  object-fit:contain !important;
  object-position:center;
  transform:none;
}
.product-grid .product-card .product-img::after{
  background:linear-gradient(180deg,rgba(7,25,46,0.07) 0%,rgba(7,25,46,0.58) 100%);
  opacity:0;
  z-index:1;
}
.product-grid .product-card .product-body{
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:flex-start;
  gap:8px;
  padding:26px;
  color:#fff;
  background:linear-gradient(180deg,rgba(7,25,46,0.00) 18%,rgba(7,25,46,0.63) 72%,rgba(7,25,46,0.81) 100%) !important;
  opacity:0;
  visibility:hidden;
  transform:translateY(16px);
  transition:
    opacity var(--motion-normal,260ms) var(--motion-ease,cubic-bezier(.22,.61,.36,1)),
    visibility var(--motion-normal,260ms) var(--motion-ease,cubic-bezier(.22,.61,.36,1)),
    transform var(--motion-normal,260ms) var(--motion-ease,cubic-bezier(.22,.61,.36,1));
}
.product-grid .product-card .product-body .badge{
  background:rgba(255,255,255,0.14);
  color:#fff;
  border:1px solid rgba(255,255,255,0.30);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.product-grid .product-card .product-body h3{
  margin:2px 0 4px;
  color:#fff !important;
  font-size:20px;
  line-height:1.35;
  text-shadow:0 8px 18px rgba(0,0,0,0.25);
}
.product-grid .product-card .product-body p{
  margin:6px 0 0;
  padding:9px 16px;
  color:#fff;
  border-color:rgba(255,255,255,0.40);
  background:linear-gradient(135deg,rgba(255,255,255,0.14),rgba(255,255,255,0.07));
  box-shadow:0 12px 28px rgba(0,0,0,0.16);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.product-grid .product-card:hover,
.product-grid .product-card:focus-visible{
  transform:translateY(-8px);
  border-color:rgba(44,117,188,0.60) !important;
  box-shadow:0 30px 72px rgba(8,30,58,0.21),0 12px 26px rgba(8,30,58,0.11) !important;
}
.product-grid .product-card:hover .product-img::after,
.product-grid .product-card:focus-visible .product-img::after,
.product-grid .product-card:focus-within .product-img::after{
  opacity:1;
}
.product-grid .product-card:hover .product-img img,
.product-grid .product-card:focus-visible .product-img img,
.product-grid .product-card:focus-within .product-img img{
  transform:scale(1.035);
  filter:contrast(1.08) saturate(1.06) brightness(.9);
}
.product-grid .product-card:hover .product-body,
.product-grid .product-card:focus-visible .product-body,
.product-grid .product-card:focus-within .product-body{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.product-grid .product-card:hover .product-body p,
.product-grid .product-card:focus-visible .product-body p,
.product-grid .product-card:focus-within .product-body p{
  background:linear-gradient(135deg,#ffffff 0%,#dfefff 100%);
  color:#0b2747;
  border-color:rgba(255,255,255,0.69);
  box-shadow:0 14px 30px rgba(0,0,0,0.21),0 0 26px rgba(122,181,238,0.25);
}
@media (hover:none), (pointer:coarse){
  .product-grid .product-card .product-body{
    opacity:1;
    visibility:visible;
    transform:none;
    padding:22px;
    background:linear-gradient(180deg,rgba(7,25,46,0.00) 20%,rgba(7,25,46,0.56) 78%,rgba(7,25,46,0.79) 100%) !important;
  }
  .product-grid .product-card .product-img::after{opacity:1;}
  .product-grid .product-card .product-img img{
    filter:contrast(1.04) saturate(1.03) brightness(.96);
  }
}
@media (max-width:900px){
  .product-grid .product-card .product-img{
    min-height:220px;
    aspect-ratio:4 / 3;
    padding:22px;
  }
}
@media (max-width:560px){
  .product-grid .product-card .product-img{
    min-height:240px;
    aspect-ratio:1.22 / 1;
    padding:20px;
  }
  .product-grid .product-card .product-body{
    padding:20px;
  }
  .product-grid .product-card .product-body h3{
    font-size:19px;
  }
}
@media (prefers-reduced-motion: reduce){
  .product-grid .product-card .product-body,
  .product-grid .product-card .product-img::after,
  .product-grid .product-card .product-img img{
    transition:none !important;
  }
  .product-grid .product-card:hover .product-img img,
  .product-grid .product-card:focus-visible .product-img img,
  .product-grid .product-card:focus-within .product-img img{
    transform:none !important;
  }
}

/* ===== v3.7 Product Card CTA Pill Hover Enhancement ===== */
.product-grid .product-card .product-body p{
  position:relative;
  overflow:hidden;
  transition:
    background var(--motion-fast,180ms) var(--motion-ease,cubic-bezier(.22,.61,.36,1)),
    color var(--motion-fast,180ms) var(--motion-ease,cubic-bezier(.22,.61,.36,1)),
    border-color var(--motion-fast,180ms) var(--motion-ease,cubic-bezier(.22,.61,.36,1)),
    box-shadow var(--motion-fast,180ms) var(--motion-ease,cubic-bezier(.22,.61,.36,1)),
    transform var(--motion-fast,180ms) var(--motion-ease,cubic-bezier(.22,.61,.36,1));
}
.product-grid .product-card .product-body p:hover,
.product-grid .product-card .product-body p:focus-visible{
  background:linear-gradient(135deg,#c1272d 0%,#8f1f28 100%) !important;
  color:#fff !important;
  border-color:rgba(255,255,255,0.63) !important;
  transform:translateY(-2px);
  box-shadow:0 18px 34px rgba(193,39,45,0.28),0 0 28px rgba(255,255,255,0.18) !important;
}
.product-grid .product-card .product-body p:hover::after,
.product-grid .product-card .product-body p:focus-visible::after{
  opacity:.95;
  transform:translateX(4px);
}
@media (hover:none), (pointer:coarse){
  .product-grid .product-card .product-body p:hover{
    transform:none;
  }
}

/* ===== About company profile vertical layout v4.6.3 ===== */
.about-profile-grid{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:36px !important;
  align-items:start !important;
}
.about-profile-text{
  width:100% !important;
}
.about-profile-image{
  width:100% !important;
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  margin-top:4px !important;
}
.about-profile-image img{
  width:100% !important;
  max-width:860px !important;
  height:auto !important;
  object-fit:contain !important;
  object-position:center !important;
  border-radius:14px !important;
}
@media(max-width:900px){
  .about-profile-grid{gap:28px !important;}
  .about-profile-image img{max-width:100% !important;}
}
@media(max-width:560px){
  .about-profile-grid{gap:22px !important;}
  .about-profile-image img{border-radius:10px !important;}
}


/* ===== v4.6.6 Homepage slider readability + controls ===== */
.hero .slide:before{
  background:linear-gradient(90deg,rgba(7,27,49,0.51),rgba(16,47,79,0.21),rgba(7,27,49,0.02)) !important;
}
.hero::after{
  background:linear-gradient(90deg,rgba(7,27,49,0.37),rgba(16,47,79,0.14),rgba(16,47,79,0.00)) !important;
}
.hero .slide-content h1{
  text-shadow:0 14px 34px rgba(0,0,0,0.33),0 2px 8px rgba(0,0,0,0.19);
}
.hero .slide-content p{
  color:#F1F6FC !important;
  text-shadow:0 8px 24px rgba(0,0,0,0.28);
}
.hero .slides.is-js-slider{
  animation:none !important;
  transition:transform .7s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}
.hero-slider-btn{
  position:absolute;
  top:50%;
  z-index:4;
  width:52px;
  height:52px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,0.49);
  background:rgba(7,27,49,0.37);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 14px 36px rgba(0,0,0,0.21);
  backdrop-filter:blur(10px);
  transform:translateY(-50%);
  transition:background .22s ease,border-color .22s ease,transform .22s ease,box-shadow .22s ease;
}
.hero-slider-btn:hover,
.hero-slider-btn:focus-visible{
  background:linear-gradient(135deg,rgba(18,58,99,0.81),rgba(33,91,136,0.77));
  border-color:rgba(255,255,255,0.77);
  transform:translateY(-50%) scale(1.06);
  box-shadow:0 18px 46px rgba(0,0,0,0.30),0 0 0 4px rgba(255,255,255,0.12);
  outline:none;
}
.hero-slider-btn--prev{left:28px;}
.hero-slider-btn--next{right:28px;}
.hero-slider-btn i{font-size:18px;line-height:1;}
@media (max-width:900px){
  .hero .slide:before{
    background:linear-gradient(90deg,rgba(7,27,49,0.60),rgba(16,47,79,0.30),rgba(7,27,49,0.09)) !important;
  }
  .hero-slider-btn{width:44px;height:44px;}
  .hero-slider-btn--prev{left:14px;}
  .hero-slider-btn--next{right:14px;}
}
@media (max-width:560px){
  .hero-slider-btn{width:40px;height:40px;top:auto;bottom:22px;transform:none;}
  .hero-slider-btn:hover,.hero-slider-btn:focus-visible{transform:scale(1.04);}
  .hero-slider-btn--prev{left:auto;right:68px;}
  .hero-slider-btn--next{right:18px;}
}
@media (prefers-reduced-motion: reduce){
  .hero .slides.is-js-slider{transition:none;}
}


/* ===== v4.6.8 Homepage slider fade transition, no arrow controls ===== */
.hero .slides.is-fade-slider{
  position:relative;
  display:block !important;
  width:100% !important;
  min-height:520px;
  animation:none !important;
  overflow:hidden;
  transform:none !important;
}
.hero .slides.is-fade-slider .slide{
  position:absolute;
  inset:0;
  width:100% !important;
  min-height:520px;
  opacity:0;
  visibility:hidden;
  transform:scale(1.035);
  z-index:0;
  transition:opacity 1.05s ease, transform 6.5s ease, visibility 0s linear 1.05s;
  will-change:opacity,transform;
}
.hero .slides.is-fade-slider .slide.active{
  opacity:1;
  visibility:visible;
  transform:scale(1);
  z-index:1;
  transition:opacity 1.05s ease, transform 6.5s ease, visibility 0s linear 0s;
}
.hero-slider-btn,
.hero-blinds-overlay{
  display:none !important;
}
@media (max-width:900px){
  .hero .slides.is-fade-slider,
  .hero .slides.is-fade-slider .slide{min-height:460px;}
}
@media (prefers-reduced-motion: reduce){
  .hero .slides.is-fade-slider .slide{transition:none;transform:none;}
}


/* ===== v4.6.9 Homepage slide CTA removed ===== */
.hero .slide-content p{
  margin-bottom:0;
}
.hero .slide-content .btn{
  display:none !important;
}

/* Timeline event list semantic structure */
.timeline-content .timeline-list{
  margin:0;
  padding-left:1.15rem;
  color:#475569;
  line-height:1.78;
  list-style:disc;
}
.timeline-entry:nth-of-type(odd) .timeline-content .timeline-list{
  direction:rtl;
  padding-left:0;
  padding-right:1.15rem;
}
.timeline-entry:nth-of-type(odd) .timeline-content .timeline-list li{
  direction:ltr;
}
.timeline-content .timeline-list li{
  margin:0 0 .35rem;
}
.timeline-content .timeline-list li:last-child{
  margin-bottom:0;
}
@media (max-width:768px){
  .timeline-entry:nth-of-type(odd) .timeline-content .timeline-list{
    direction:ltr;
    padding-left:1.15rem;
    padding-right:0;
  }
}

/* v4.6.13 - Timeline list readability alignment */
.timeline-content,
.timeline-entry:nth-of-type(even) .timeline-content,
.timeline-entry:nth-of-type(odd) .timeline-content{
  text-align:left !important;
}
.timeline-content .timeline-list,
.timeline-entry:nth-of-type(odd) .timeline-content .timeline-list{
  direction:ltr !important;
  text-align:left !important;
  list-style-position:outside;
  padding-left:1.2rem !important;
  padding-right:0 !important;
  margin:0;
}
.timeline-content .timeline-list li,
.timeline-entry:nth-of-type(odd) .timeline-content .timeline-list li{
  direction:ltr !important;
  text-align:left !important;
}

/* ===== v4.6.16 Fuyao-inspired product showcase ===== */
.home-products{position:relative;isolation:isolate;min-height:610px;overflow:hidden;background:#fff;color:#18324a}
.home-products__background{position:absolute;inset:0;z-index:-2;clip-path:polygon(0 0,100% 0,100% 86%,0 100%)}
.home-products__background-layer{position:absolute;inset:0;background:radial-gradient(circle at 72% 42%,rgba(0,155,220,0.11),transparent 32%),linear-gradient(135deg,#f8fbfd 0%,#fff 52%,#edf6fa 100%)}
.home-products__container{position:relative;width:min(1280px,calc(100% - 48px));margin:0 auto;padding:72px 0 66px}
.home-products__header{position:relative;z-index:3}
.home-products__heading{display:inline-flex;flex-direction:column;gap:2px;cursor:pointer}
.home-products__heading span{font-size:clamp(2rem,4vw,4.4rem);font-weight:300;letter-spacing:.08em;color:#173957}
.home-products__heading small{font-size:.85rem;text-transform:uppercase;letter-spacing:.38em;color:#13a6d8;font-weight:700}
.home-products__clear{clear:both}
.home-products__body{position:relative;min-height:410px;margin-top:18px}
#home-products-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.6}
.home-products__details{position:absolute;left:0;top:95px;z-index:5;width:340px}
.home-products__details::before{content:"";display:flex}
.home-products__tabs{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:22px}
.home-products__tab{border:1px solid rgba(18,58,99,0.16);background:rgba(255,255,255,0.72);padding:8px 12px;border-radius:999px;color:#34516a;font:inherit;cursor:pointer;transition:.25s ease}
.home-products__tab:hover,.home-products__tab.is-active{background:#123a63;color:#fff;border-color:#123a63;box-shadow:0 8px 18px rgba(18,58,99,0.16)}
.home-products__list{display:none;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px;margin:0;padding:0;list-style:none}
.home-products__list.is-active{display:grid;animation:ysProductFade .45s ease both}
.home-products__list a{display:block;padding:9px 3px;border-bottom:1px solid rgba(18,58,99,0.14);color:#45647c;text-decoration:none;font-size:.95rem;transition:.2s ease}
.home-products__list a:hover{color:#00a4d7;transform:translateX(4px)}
.home-products__visual{position:absolute;right:0;top:15px;width:min(760px,65%);height:390px;z-index:2}
.home-products__visual-list,.home-products__visual-list>li{position:relative;width:100%;height:100%;margin:0;padding:0;list-style:none}
.home-products__image{position:absolute;right:0;bottom:12px;width:100%;height:100%;object-fit:contain;object-position:right center;opacity:0;transform:translateX(28px) scale(.985);transition:opacity .55s ease,transform .7s ease;filter:drop-shadow(0 28px 26px rgba(18,58,99,0.14))}
.home-products__image.is-visible{opacity:1;transform:none}
@keyframes ysProductFade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}to{opacity:1}}
@media(max-width:980px){.home-products{min-height:760px}.home-products__container{padding-top:55px}.home-products__body{min-height:590px}.home-products__details{top:360px;width:100%}.home-products__visual{top:0;width:100%;height:345px}.home-products__tabs{justify-content:center}.home-products__heading{width:100%;align-items:center}.home-products__list{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:620px){.home-products{min-height:800px}.home-products__container{width:min(100% - 28px,1280px);padding:42px 0 48px}.home-products__body{min-height:660px}.home-products__visual{height:280px}.home-products__details{top:300px}.home-products__list{grid-template-columns:repeat(2,minmax(0,1fr))}.home-products__tab{font-size:.78rem;padding:7px 9px}.home-products__heading span{font-size:2rem}}
@media(prefers-reduced-motion:reduce){.home-products *{animation:none!important;transition:none!important}}

/* ===== v4.6.64 gradient per-car glass overlay with subtle floating pulse ===== */
.home-products__overlay{
  position:absolute;
  right:0;
  bottom:12px;
  z-index:6;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:right center;
  pointer-events:none;
  display:none;
  opacity:0;
  transform:translateY(0) scale(1);
  transform-origin:center center;
  mix-blend-mode:normal;
  filter:drop-shadow(0 0 12px rgba(0,174,255,0.60));
  will-change:opacity,transform,filter;
}
.home-products__overlay.is-visible{
  display:block;
  animation:ysOverlayFloatPulse 1.9s ease-in-out infinite alternate;
}
@keyframes ysOverlayFloatPulse{
  from{
    opacity:.48;
    transform:translateY(0) scale(1);
    filter:drop-shadow(0 0 10px rgba(0,174,255,0.51));
  }
  to{
    opacity:.96;
    transform:translateY(-3px) scale(1.006);
    filter:drop-shadow(0 3px 16px rgba(0,174,255,0.72));
  }
}
@media(max-width:620px){
  @keyframes ysOverlayFloatPulse{
    from{opacity:.52;transform:translateY(0) scale(1);filter:drop-shadow(0 0 8px rgba(0,174,255,0.48))}
    to{opacity:.94;transform:translateY(-2px) scale(1.004);filter:drop-shadow(0 2px 12px rgba(0,174,255,0.67))}
  }
}

/* ===== v4.6.66 visible technology-blue glass material =====
   Keep the blue gradient readable; glass feel comes from restrained
   translucency, contrast and edge glow instead of a white reflection layer. */
.home-products__overlay{
  mix-blend-mode:normal;
  opacity:0;
  filter:
    saturate(1.22)
    contrast(1.08)
    brightness(1.03)
    drop-shadow(0 0 5px rgba(105,220,255,0.63))
    drop-shadow(0 3px 14px rgba(0,145,255,0.49));
}
.home-products__overlay.is-visible{
  animation:ysBlueGlassFloat 2.6s cubic-bezier(.45,0,.55,1) infinite alternate;
}
@keyframes ysBlueGlassFloat{
  from{
    opacity:.80;
    transform:translateY(0) scale(1);
    filter:
      saturate(1.16)
      contrast(1.06)
      brightness(.98)
      drop-shadow(0 0 4px rgba(105,220,255,0.51))
      drop-shadow(0 2px 10px rgba(0,145,255,0.37));
  }
  to{
    opacity:.91;
    transform:translateY(-0.8px) scale(1.002);
    filter:
      saturate(1.30)
      contrast(1.10)
      brightness(1.08)
      drop-shadow(0 0 6px rgba(125,230,255,0.63))
      drop-shadow(0 3px 13px rgba(0,145,255,0.48));
  }
}
@media(max-width:620px){
  @keyframes ysBlueGlassFloat{
    from{opacity:.81;transform:translateY(0) scale(1);filter:saturate(1.16) contrast(1.06) brightness(.99) drop-shadow(0 0 4px rgba(105,220,255,0.46)) drop-shadow(0 2px 8px rgba(0,145,255,0.32))}
    to{opacity:.90;transform:translateY(-0.5px) scale(1.0015);filter:saturate(1.24) contrast(1.08) brightness(1.05) drop-shadow(0 0 5px rgba(125,230,255,0.58)) drop-shadow(0 2px 10px rgba(0,145,255,0.42))}
  }
}
@media(prefers-reduced-motion:reduce){
  .home-products__overlay.is-visible{
    animation:none!important;
    opacity:.86;
    transform:none;
  }
}


/* ===== v4.6.71 car and overlay fade in together, effects start afterward ===== */
.home-products__overlay{
  display:block;
  visibility:hidden;
  opacity:0;
  transform:translateX(28px) scale(.985);
  transition:opacity .55s ease, transform .7s ease, visibility 0s linear .7s;
  animation:none;
}
.home-products__overlay.is-visible{
  visibility:visible;
  opacity:.86;
  transform:none;
  transition:opacity .55s ease, transform .7s ease, visibility 0s;
  animation:none;
}
.home-products__overlay.is-visible.is-active{
  transition:none;
  animation:ysBlueGlassFloat 2.6s cubic-bezier(.45,0,.55,1) infinite alternate;
  animation-fill-mode:both;
}
@media(prefers-reduced-motion:reduce){
  .home-products__overlay,
  .home-products__overlay.is-visible,
  .home-products__overlay.is-visible.is-active{
    animation:none!important;
    transition:none!important;
    transform:none;
  }
  .home-products__overlay{opacity:0;visibility:hidden}
  .home-products__overlay.is-visible{opacity:.86;visibility:visible}
}

/* ===== v4.6.72 seamless overlay handoff into breathing effect =====
   The active animation starts from the exact visual state used during fade-in,
   preventing the overlay from jumping from bright to dark when the class changes. */
.home-products__overlay.is-visible{
  opacity:.86;
  filter:
    saturate(1.22)
    contrast(1.08)
    brightness(1.03)
    drop-shadow(0 0 5px rgba(105,220,255,0.56))
    drop-shadow(0 3px 12px rgba(0,145,255,0.42));
}
.home-products__overlay.is-visible.is-active{
  animation:ysBlueGlassFloatSeamless 2.8s cubic-bezier(.45,0,.55,1) infinite alternate;
}
@keyframes ysBlueGlassFloatSeamless{
  0%,12%{
    opacity:.86;
    transform:translateY(0) scale(1);
    filter:
      saturate(1.22)
      contrast(1.08)
      brightness(1.03)
      drop-shadow(0 0 5px rgba(105,220,255,0.56))
      drop-shadow(0 3px 12px rgba(0,145,255,0.42));
  }
  100%{
    opacity:.91;
    transform:translateY(-0.8px) scale(1.002);
    filter:
      saturate(1.28)
      contrast(1.10)
      brightness(1.07)
      drop-shadow(0 0 6px rgba(125,230,255,0.62))
      drop-shadow(0 3px 13px rgba(0,145,255,0.48));
  }
}
@media(max-width:620px){
  .home-products__overlay.is-visible.is-active{
    animation-name:ysBlueGlassFloatSeamlessMobile;
  }
  @keyframes ysBlueGlassFloatSeamlessMobile{
    0%,12%{
      opacity:.86;
      transform:translateY(0) scale(1);
      filter:saturate(1.20) contrast(1.07) brightness(1.03) drop-shadow(0 0 4px rgba(105,220,255,0.51)) drop-shadow(0 2px 9px rgba(0,145,255,0.37));
    }
    100%{
      opacity:.90;
      transform:translateY(-0.5px) scale(1.0015);
      filter:saturate(1.25) contrast(1.09) brightness(1.06) drop-shadow(0 0 5px rgba(125,230,255,0.58)) drop-shadow(0 2px 10px rgba(0,145,255,0.42));
    }
  }
}

/* v4.6.73 — Products section: text above, vehicle image below */
.home-products__body{
  display:flex;
  flex-direction:column;
  min-height:0;
  margin-top:24px;
}
.home-products__details{
  position:relative;
  left:auto;
  top:auto;
  z-index:5;
  width:100%;
}
.home-products__tabs{
  justify-content:flex-start;
  margin-bottom:18px;
}
.home-products__list{
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:8px 18px;
}
.home-products__visual{
  position:relative;
  right:auto;
  top:auto;
  width:100%;
  height:430px;
  margin-top:28px;
  z-index:2;
}
.home-products__image{
  object-position:center center;
}

@media(max-width:980px){
  .home-products{min-height:0}
  .home-products__body{min-height:0}
  .home-products__details{top:auto;width:100%}
  .home-products__visual{top:auto;width:100%;height:360px;margin-top:24px}
  .home-products__tabs{justify-content:center}
  .home-products__list{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:620px){
  .home-products{min-height:0}
  .home-products__body{min-height:0}
  .home-products__details{top:auto}
  .home-products__visual{height:285px;margin-top:20px}
  .home-products__list{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* v4.6.74 — keep every overlay in the exact same image coordinate system as its car */
.home-products__overlay{
  object-position:center center;
  right:0;
  bottom:12px;
  width:100%;
  height:100%;
  transform-origin:center center;
}

/* ===== v4.6.75 product showcase background tuned for vertical layout ===== */
.home-products{
  background:#f8fbfd;
}
.home-products__background{
  clip-path:polygon(0 0,100% 0,100% 94%,72% 98%,28% 98%,0 94%);
}
.home-products__background-layer{
  background:
    radial-gradient(ellipse at 50% 74%,rgba(0,164,215,0.10) 0%,rgba(0,164,215,0.04) 34%,transparent 66%),
    linear-gradient(180deg,#fbfdff 0%,#fff 42%,#eef7fb 100%);
}
#home-products-canvas{
  opacity:.78;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 12%,#000 88%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0%,#000 12%,#000 88%,transparent 100%);
}
@media(max-width:980px){
  .home-products__background{clip-path:polygon(0 0,100% 0,100% 97%,50% 100%,0 97%)}
  .home-products__background-layer{
    background:
      radial-gradient(ellipse at 50% 70%,rgba(0,164,215,0.08) 0%,rgba(0,164,215,0.03) 38%,transparent 70%),
      linear-gradient(180deg,#fbfdff 0%,#fff 38%,#f0f8fb 100%);
  }
  #home-products-canvas{opacity:.60}
}
@media(max-width:620px){
  #home-products-canvas{opacity:.46}
  .home-products__background-layer{
    background:
      radial-gradient(ellipse at 50% 68%,rgba(0,164,215,0.06),transparent 66%),
      linear-gradient(180deg,#fcfeff,#f3f9fc);
  }
}

/* ===== v4.6.77 Homepage hero responsive full-image scaling ===== */
@media (max-width:900px){
  .hero{
    background:#0b1f39;
  }
  .hero .slides.is-fade-slider{
    width:100% !important;
    min-height:0 !important;
    aspect-ratio:16 / 9;
  }
  .hero .slides.is-fade-slider .slide{
    min-height:0 !important;
    background-size:contain !important;
    background-repeat:no-repeat !important;
    background-position:center center !important;
    transform:none !important;
  }
  .hero .slides.is-fade-slider .slide.active{
    transform:none !important;
  }
  .hero .slide-content{
    padding:clamp(42px,8vw,72px) 0 clamp(34px,7vw,62px);
  }
  .hero .slide-content h1{
    font-size:clamp(27px,5.8vw,44px);
    margin-bottom:12px;
  }
  .hero .slide-content p{
    max-width:min(72%,620px);
    font-size:clamp(15px,2.6vw,19px);
    line-height:1.55;
  }
}
@media (max-width:560px){
  .hero .slide-content{
    width:92%;
    padding:28px 0 58px;
  }
  .hero .slide-content h1{
    max-width:80%;
    font-size:clamp(22px,6.4vw,32px);
    line-height:1.18;
  }
  .hero .slide-content p{
    max-width:78%;
    font-size:clamp(13px,3.3vw,16px);
    line-height:1.42;
  }
}

/* ===== v4.6.78 stable overlay luminance on compact layouts =====
   Keep the fade-in handoff and the breathing loop at the same luminance.
   Compact layouts retain only subtle float/glow motion, preventing a visible
   bright-to-dark jump when changing products or when the viewport is resized. */
@media(max-width:980px){
  .home-products__overlay.is-visible{
    opacity:.88;
    filter:
      saturate(1.23)
      contrast(1.08)
      brightness(1.04)
      drop-shadow(0 0 5px rgba(105,220,255,0.55))
      drop-shadow(0 2px 10px rgba(0,145,255,0.39));
  }
  .home-products__overlay.is-visible.is-active{
    animation-name:ysBlueGlassFloatStableCompact;
    animation-duration:3s;
    animation-timing-function:cubic-bezier(.45,0,.55,1);
    animation-iteration-count:infinite;
    animation-direction:alternate;
    animation-fill-mode:both;
  }
  @keyframes ysBlueGlassFloatStableCompact{
    0%,14%{
      opacity:.88;
      transform:translateY(0) scale(1);
      filter:
        saturate(1.23)
        contrast(1.08)
        brightness(1.04)
        drop-shadow(0 0 5px rgba(105,220,255,0.55))
        drop-shadow(0 2px 10px rgba(0,145,255,0.39));
    }
    100%{
      opacity:.88;
      transform:translateY(-0.55px) scale(1.0015);
      filter:
        saturate(1.23)
        contrast(1.08)
        brightness(1.04)
        drop-shadow(0 0 5.5px rgba(125,230,255,0.58))
        drop-shadow(0 2px 11px rgba(0,145,255,0.42));
    }
  }
}
@media(max-width:620px){
  .home-products__overlay.is-visible.is-active{
    animation-name:ysBlueGlassFloatStableCompact;
  }
}

/* v4.6.80 — keep longer product detail labels on one line at desktop widths */
@media (min-width:981px){
  .home-products__list{
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  }
  .home-products__list[data-name="車室內裝與 NVH 系統"] li:nth-child(2) a{
    white-space:nowrap;
  }
}


/* v4.6.82 mobile product list left align */
@media (max-width: 991px){
  .home-products__list{
    justify-content:flex-start !important;
    align-items:flex-start !important;
    text-align:left !important;
    margin-left:0 !important;
    margin-right:auto !important;
  }
  .home-products__list li,
  .home-products__list .item,
  .home-products__list .home-products__details{
    text-align:left !important;
    align-items:flex-start !important;
  }
}

/* v4.6.83 — keep long English Interior Trim & NVH detail labels on one line */
@media (min-width:981px){
  html[lang="en"] .home-products__list[data-name="Interior Trim & NVH Systems"]{
    grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
  }
  html[lang="en"] .home-products__list[data-name="Interior Trim & NVH Systems"] li:nth-child(2) a,
  html[lang="en"] .home-products__list[data-name="Interior Trim & NVH Systems"] li:nth-child(5) a{
    white-space:nowrap;
  }
}

/* v4.6.84 — keep all homepage product detail labels on one line */
.home-products__list li,
.home-products__list li a{
  min-width:0;
}
.home-products__list li a{
  white-space:nowrap;
}

/* Desktop: give every detail item enough horizontal room without shrinking text. */
@media (min-width:981px){
  .home-products__list{
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    justify-content:start;
  }
  html[lang="en"] .home-products__list{
    grid-template-columns:repeat(auto-fit,minmax(365px,1fr));
  }
}

/* Tablet and mobile: use a clean single-column list so long labels do not
   force neighbouring items onto uneven rows. Very narrow screens may scroll
   horizontally rather than breaking a product name. */
@media (max-width:980px){
  .home-products__list{
    grid-template-columns:minmax(max-content,1fr) !important;
    justify-content:start !important;
    overflow-x: auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
  }
  .home-products__list li{
    width:max-content;
    min-width:100%;
    max-width:none;
  }
  .home-products__list li a{
    width:max-content;
    min-width:100%;
    text-align:left;
  }
}


/* ===== v4.6.92 Products background: balanced lower-corner gradients ===== */
.home-products__background-layer{
  background:
    radial-gradient(ellipse at 72% 34%,rgba(0,133,205,0.13) 0%,rgba(0,133,205,0.05) 33%,transparent 63%),
    radial-gradient(ellipse at 18% 88%,rgba(15,96,160,0.075) 0%,rgba(15,96,160,0.03) 32%,transparent 58%),
    radial-gradient(ellipse at 82% 88%,rgba(15,96,160,0.075) 0%,rgba(15,96,160,0.03) 32%,transparent 58%),
    linear-gradient(180deg,#f9fcff 0%,#ffffff 18%,#ffffff 82%,#f9fcff 100%);
}
#home-products-canvas{
  opacity:.94;
  filter:saturate(1.18) contrast(1.06);
}
@media(max-width:980px){
  #home-products-canvas{opacity:.80;filter:saturate(1.12) contrast(1.04)}
}
@media(max-width:620px){
  #home-products-canvas{opacity:.67;filter:saturate(1.08)}
}
@media(prefers-reduced-motion:reduce){
  #home-products-canvas{opacity:.74}
}


/* ===== v4.6.93 Products background: remove curved lower edge and mirror top fade ===== */
.home-products__background{
  clip-path:none !important;
  -webkit-clip-path:none !important;
}
.home-products__background-layer{
  background:
    radial-gradient(ellipse at 72% 30%,rgba(0,133,205,0.13) 0%,rgba(0,133,205,0.05) 33%,transparent 63%),
    radial-gradient(ellipse at 72% 70%,rgba(0,133,205,0.13) 0%,rgba(0,133,205,0.05) 33%,transparent 63%),
    linear-gradient(180deg,#f9fcff 0%,#ffffff 18%,#ffffff 82%,#f9fcff 100%);
}
@media(max-width:980px){
  .home-products__background{
    clip-path:none !important;
    -webkit-clip-path:none !important;
  }
}

/* ===== v4.6.94 Products-to-footer continuous background =====
   Keep the Products background covering the full section and remove the
   generic footer top margin that exposed a separate white strip. */
.home-products{
  background:#f9fcff;
}
.home-products__background-layer{
  inset:0;
  bottom:0;
}
.home-products + .footer,
.home-products + .footer-v2{
  margin-top:0 !important;
}


.home-products__list{overflow-y:hidden;white-space:nowrap;scrollbar-width:none;-ms-overflow-style:none;}
.home-products__list::-webkit-scrollbar{display:none;}
.home-products__list li{overflow:visible;flex:0 0 auto;}

/* ===== v4.6.96 Remove product-list horizontal scrolling ===== */
@media (max-width:980px){
  .home-products__list{
    grid-template-columns:minmax(0,1fr) !important;
    width:100%;
    max-width:100%;
    overflow-x:hidden !important;
    overflow-y:visible !important;
    -webkit-overflow-scrolling:auto;
    white-space:normal;
    scrollbar-width:none;
  }
  .home-products__list li{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    overflow:visible;
  }
  .home-products__list li a{
    display:block;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    white-space:normal !important;
    overflow-wrap:anywhere;
    word-break:normal;
  }
}

/* ===== v4.7.0 Homepage Products BEM class refactor =====
   Unified the homepage Products block under the home-products namespace. */


/* ===== v4.7.1 Interactive SUV interior white model ===== */
.interior-showcase{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transform:translateX(28px) scale(.985);transition:opacity .55s ease,transform .7s ease,visibility 0s linear .7s;pointer-events:none}
.interior-showcase.is-visible{opacity:1;visibility:visible;transform:none;transition:opacity .55s ease,transform .7s ease,visibility 0s;pointer-events:auto}
.interior-showcase__stage{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.interior-showcase__svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 24px 22px rgba(18,58,99,.12))}
.interior-showcase__ground{fill:rgba(18,58,99,.09)}
.interior-showcase__window{fill:rgba(224,239,248,.68);stroke:#bccbd6;stroke-width:3}
.interior-showcase__pillar{fill:none;stroke:#d5dde3;stroke-width:13;stroke-linecap:round}
.interior-showcase__sill{fill:none;stroke:#cbd5dc;stroke-width:8;stroke-linecap:round}
.interior-showcase__wheel{fill:#e9eef2;stroke:#c2ccd3;stroke-width:5}.interior-showcase__wheel-hub{fill:#f9fbfc;stroke:#ccd5db;stroke-width:4}
.interior-showcase__seat{fill:#edf1f4;stroke:#cbd5dc;stroke-width:4}.interior-showcase__seat--rear{fill:#e8edf1}.interior-showcase__console{fill:#e4eaee;stroke:#c4d0d8;stroke-width:3}
.interior-showcase__cut-line{fill:none;stroke:rgba(18,58,99,.22);stroke-width:2;stroke-dasharray:7 8}
.interior-part{cursor:pointer;outline:none;transform-box:fill-box;transform-origin:center;transition:opacity .26s ease,transform .3s ease,filter .3s ease}
.interior-part>*{stroke:#b7c5cf;stroke-width:3;transition:fill .28s ease,stroke .28s ease}
.interior-part__detail{fill:none!important;stroke:#c5d0d7!important;stroke-width:2!important}.interior-part__detail-fill{fill:#e8eef2!important;stroke:#c1ccd4!important}
.interior-showcase.has-active .interior-part:not(.is-active){opacity:.28}
.interior-part.is-active{transform:translateY(-4px);filter:url(#partGlowZh)}
html[lang="en"] .interior-part.is-active{filter:url(#partGlowEn)}
.interior-part.is-active>*{fill:#00a4d7!important;stroke:#007ead!important}.interior-part.is-active .interior-part__detail{stroke:#d8f6ff!important}.interior-part.is-active .interior-part__detail-fill{fill:#63c9e8!important;stroke:#e2f8ff!important}
.interior-showcase__caption{position:absolute;right:3%;bottom:7%;display:flex;flex-direction:column;align-items:flex-end;padding:10px 14px;border:1px solid rgba(18,58,99,.12);border-radius:10px;background:rgba(255,255,255,.82);box-shadow:0 10px 28px rgba(18,58,99,.10);backdrop-filter:blur(8px);pointer-events:none}
.interior-showcase__caption small{font-size:.66rem;letter-spacing:.16em;color:#13a6d8;font-weight:700}.interior-showcase__caption strong{margin-top:3px;color:#173957;font-size:.98rem;font-weight:600}
.home-products__list[data-name="車室內裝與 NVH 系統"] a[data-part],html[lang="en"] .home-products__list[data-name="Interior Trim & NVH Systems"] a[data-part]{position:relative;padding-left:18px;cursor:pointer}
.home-products__list a[data-part]::before{content:"";position:absolute;left:2px;top:50%;width:7px;height:7px;border-radius:50%;background:#bdcbd4;transform:translateY(-50%);transition:.25s ease}
.home-products__list a[data-part].is-active{color:#0d5ea8;transform:translateX(4px);font-weight:600}.home-products__list a[data-part].is-active::before{background:#0d5ea8;box-shadow:0 0 0 5px rgba(13,94,168,.10)}
@media(max-width:620px){.interior-showcase__caption{right:2%;bottom:3%;padding:8px 10px}.interior-showcase__caption small{font-size:.54rem}.interior-showcase__caption strong{font-size:.8rem}.interior-part{touch-action:manipulation}}
@media(prefers-reduced-motion:reduce){.interior-showcase,.interior-part{transition:none!important}}

/* ===== v4.7.2 Photorealistic SUV interior clay model ===== */
.interior-showcase--render .interior-showcase__stage{isolation:isolate;overflow:hidden;border-radius:18px}
.interior-showcase__render{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;z-index:1;filter:drop-shadow(0 24px 28px rgba(18,58,99,.12));user-select:none;-webkit-user-drag:none}
.interior-showcase__hotspots{position:absolute;inset:0;width:100%;height:100%;z-index:2;overflow:visible}
/* Hover visual specification: restrained OEM clay-render treatment aligned with car1.png–car5.png. */
.interior-showcase--render .interior-part{cursor:pointer;outline:none;transform-box:fill-box;transform-origin:center;transition:opacity 240ms ease,filter 240ms ease}
.interior-showcase--render .interior-part path{fill:rgba(13,94,168,0);stroke:rgba(13,94,168,0);stroke-width:3.5;vector-effect:non-scaling-stroke;transition:fill 240ms ease,stroke 240ms ease,opacity 240ms ease}
.interior-showcase--render .interior-part:hover path,
.interior-showcase--render .interior-part:focus-visible path{fill:rgba(13,94,168,.12);stroke:rgba(13,94,168,.34)}
.interior-showcase--render.has-active .interior-part:not(.is-active){opacity:1}
.interior-showcase--render .interior-part.is-active{filter:url(#renderPartShadowZh)}
html[lang="en"] .interior-showcase--render .interior-part.is-active{filter:url(#renderPartShadowEn)}
.interior-showcase--render .interior-part.is-active path{fill:url(#activePartGradientZh);stroke:#0d5ea8;stroke-width:4;opacity:.90}
html[lang="en"] .interior-showcase--render .interior-part.is-active path{fill:url(#activePartGradientEn)}
.interior-showcase--render .interior-showcase__caption{z-index:3;right:3.5%;bottom:5%;background:rgba(255,255,255,.9);border-color:rgba(0,126,173,.18);box-shadow:0 14px 34px rgba(18,58,99,.14)}
@media(max-width:980px){.interior-showcase--render .interior-showcase__stage{border-radius:12px}.interior-showcase__render{transform:scale(1.03)}}
@media(max-width:620px){.interior-showcase--render .interior-showcase__caption{right:2%;bottom:2%}.interior-showcase--render .interior-part.is-active{transform:none}}

/* ===== v4.7.4 Headliner interactive MVP ===== */
.home-products__list a.is-pending{opacity:.42;cursor:default;pointer-events:none;text-decoration:none}
.home-products__list a.is-pending::after{content:""}
.home-products__list a.is-available{position:relative}
.home-products__list a.is-available::before{content:"";position:absolute;left:-13px;top:50%;width:5px;height:5px;border-radius:50%;background:#0d5ea8;transform:translateY(-50%);opacity:.72}
.interior-showcase--headliner-mvp .interior-showcase__stage{background:transparent}
.interior-showcase--headliner-mvp .interior-showcase__render{object-fit:contain;object-position:center;filter:drop-shadow(0 22px 28px rgba(18,58,99,.10))}
.interior-showcase--headliner-mvp .interior-part--headliner{cursor:pointer;outline:none;transition:filter 240ms ease}
.interior-showcase--headliner-mvp .interior-part--headliner path{fill:rgba(13,94,168,0);stroke:rgba(13,94,168,0);stroke-width:3;vector-effect:non-scaling-stroke;transition:fill 240ms ease,stroke 240ms ease,opacity 240ms ease}
.interior-showcase--headliner-mvp .interior-part--headliner:hover path,
.interior-showcase--headliner-mvp .interior-part--headliner:focus-visible path{fill:rgba(13,94,168,.11);stroke:rgba(13,94,168,.32)}
.interior-showcase--headliner-mvp .interior-part--headliner.is-active{filter:url(#headlinerShadowZh)}
html[lang="en"] .interior-showcase--headliner-mvp .interior-part--headliner.is-active{filter:url(#headlinerShadowEn)}
.interior-showcase--headliner-mvp .interior-part--headliner.is-active .headliner-surface{fill:url(#headlinerGradientZh);stroke:#0d5ea8;opacity:.90}
.interior-showcase--headliner-mvp .interior-part--headliner.is-active .headliner-rail{fill:rgba(13,94,168,.34);stroke:rgba(13,94,168,.72)}
html[lang="en"] .interior-showcase--headliner-mvp .interior-part--headliner.is-active .headliner-surface{fill:url(#headlinerGradientEn)}
@media(max-width:620px){.home-products__list a.is-available::before{left:-9px}.interior-showcase--headliner-mvp .interior-showcase__render{transform:scale(1.01)}}


/* ===== v4.7.5 Exact Headliner image layer ===== */
.interior-showcase__layer{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  z-index:2;
  opacity:0;
  pointer-events:none;
  transition:opacity 240ms ease,filter 240ms ease;
}
.interior-showcase__layer--headliner.is-active{
  opacity:1;
  filter:drop-shadow(0 2px 10px rgba(13,94,168,.15));
}
.interior-showcase__hotspots{z-index:3}


/* ===== v4.7.6 Overlay-only NVH showcase ===== */
.interior-showcase__hotspots,
.interior-showcase__caption{
  display:none!important;
}

.interior-showcase__stage{
  position:relative;
}

.interior-showcase__render{
  position:relative;
  z-index:1;
}

.interior-showcase__layer{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  z-index:2;
  opacity:0;
  pointer-events:none;
  transform:none;
  filter:saturate(.72) contrast(.98);
  transition:opacity 240ms ease,filter 240ms ease;
  will-change:opacity,filter;
}

.interior-showcase__layer.is-active{
  opacity:.88;
  filter:
    saturate(.78)
    contrast(1.01)
    drop-shadow(0 2px 9px rgba(13,94,168,.12));
}

.interior-showcase.has-active .interior-showcase__render{
  opacity:1;
  filter:none;
}

.home-products__list a[data-part].is-active{
  color:#0d5ea8;
}

@media (prefers-reduced-motion:reduce){
  .interior-showcase__layer{
    transition:none!important;
  }
}


/* ===== v4.8.0 NVH product information panel ===== */
.interior-showcase--headliner-mvp{
  align-items:stretch;
}

.interior-showcase--headliner-mvp .interior-showcase__stage{
  width:100%;
}

.interior-product-panel{
  position:relative;
  z-index:4;
  width:min(92%,680px);
  margin:18px auto 0;
  padding:22px 24px 20px;
  background:rgba(255,255,255,.94);
  border:1px solid rgba(18,58,99,.10);
  border-left:3px solid rgba(13,94,168,.22);
  box-shadow:0 14px 34px rgba(18,58,99,.08);
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  transition:
    opacity 240ms ease,
    transform 240ms ease,
    visibility 0s linear 240ms,
    border-color 240ms ease;
}

.interior-product-panel.is-active{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
  border-left-color:#0d5ea8;
  transition-delay:0s;
}

.interior-product-panel__eyebrow{
  margin-bottom:7px;
  color:#6b7c8d;
  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.interior-product-panel__title{
  margin:0;
  color:#123a63;
  font-size:clamp(24px,2.4vw,34px);
  line-height:1.15;
  font-weight:700;
}

.interior-product-panel__subtitle{
  margin:5px 0 11px;
  color:#0d5ea8;
  font-size:14px;
  font-weight:600;
  letter-spacing:.02em;
}

.interior-product-panel__description{
  max-width:58ch;
  margin:0;
  color:#536273;
  font-size:14px;
  line-height:1.75;
}

.interior-product-panel__features{
  display:flex;
  flex-wrap:wrap;
  gap:8px 18px;
  margin:14px 0 0;
  padding:0;
  list-style:none;
}

.interior-product-panel__features li{
  position:relative;
  padding-left:13px;
  color:#394b5d;
  font-size:13px;
  line-height:1.5;
}

.interior-product-panel__features li::before{
  content:"";
  position:absolute;
  left:0;
  top:.62em;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#0d5ea8;
}

.interior-product-panel__link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:16px;
  color:#0d5ea8;
  font-size:13px;
  font-weight:700;
  text-decoration:none;
}

.interior-product-panel__link span{
  transition:transform 180ms ease;
}

.interior-product-panel__link:hover span,
.interior-product-panel__link:focus-visible span{
  transform:translateX(3px);
}

@media(max-width:620px){
  .interior-product-panel{
    width:100%;
    margin-top:12px;
    padding:18px 17px 17px;
  }
  .interior-product-panel__features{
    display:block;
  }
  .interior-product-panel__features li+li{
    margin-top:5px;
  }
}

@media(prefers-reduced-motion:reduce){
  .interior-product-panel,
  .interior-product-panel__link span{
    transition:none!important;
  }
}


/* ===== v4.8.1 White model preview ===== */
.interior-showcase__render{
  filter:
    grayscale(1)
    saturate(0)
    brightness(1.18)
    contrast(.86);
  transition:filter .24s ease;
}

.interior-showcase.has-active .interior-showcase__render{
  filter:
    grayscale(1)
    saturate(0)
    brightness(1.22)
    contrast(.82);
}

.interior-showcase__layer.is-active{
  opacity:.94;
  filter:
    saturate(.92)
    contrast(1.02)
    drop-shadow(0 2px 8px rgba(13,94,168,.10));
}

/* ===== v4.8.2 Formal white-clay master scene ===== */
.interior-showcase__render{
  filter:drop-shadow(0 22px 28px rgba(18,58,99,.10));
}

.interior-showcase.has-active .interior-showcase__render{
  filter:drop-shadow(0 22px 28px rgba(18,58,99,.10));
}

.interior-showcase__layer.is-active{
  opacity:.94;
  filter:
    saturate(.92)
    contrast(1.02)
    drop-shadow(0 2px 8px rgba(13,94,168,.10));
}


/* v4.8.3 restore centered showcase */
.interior-product-panel{display:none!important;}
.interior-showcase--headliner-mvp{
 display:flex;
 flex-direction:column;
 align-items:center!important;
 justify-content:center;
}
.interior-showcase--headliner-mvp .interior-showcase__stage{
 margin:0 auto!important;
 max-width:100%;
}


/* ===== v4.8.9 Headliner uses the exact windshield overlay effect ===== */
.interior-showcase__layer--headliner{
  transform-origin:center center;
  mix-blend-mode:normal;
  will-change:opacity,transform,filter;
  transition:opacity .55s ease,transform .7s ease,filter .55s ease;
}

.interior-showcase__layer--headliner.is-active{
  opacity:.86;
  transform:translateY(0) scale(1);
  filter:
    saturate(1.22)
    contrast(1.08)
    brightness(1.03)
    drop-shadow(0 0 5px rgba(105,220,255,.56))
    drop-shadow(0 3px 12px rgba(0,145,255,.42));
  animation:ysBlueGlassFloatSeamless 2.8s cubic-bezier(.45,0,.55,1) infinite alternate;
  animation-fill-mode:both;
}

@media(max-width:980px){
  .interior-showcase__layer--headliner.is-active{
    opacity:.88;
    filter:
      saturate(1.23)
      contrast(1.08)
      brightness(1.04)
      drop-shadow(0 0 5px rgba(105,220,255,.55))
      drop-shadow(0 2px 10px rgba(0,145,255,.39));
    animation-name:ysBlueGlassFloatStableCompact;
    animation-duration:3s;
    animation-timing-function:cubic-bezier(.45,0,.55,1);
    animation-iteration-count:infinite;
    animation-direction:alternate;
    animation-fill-mode:both;
  }
}

@media(max-width:620px){
  .interior-showcase__layer--headliner.is-active{
    animation-name:ysBlueGlassFloatStableCompact;
  }
}

@media(prefers-reduced-motion:reduce){
  .interior-showcase__layer--headliner,
  .interior-showcase__layer--headliner.is-active{
    animation:none!important;
    transition:none!important;
    transform:none;
  }
  .interior-showcase__layer--headliner.is-active{
    opacity:.86;
    filter:
      saturate(1.22)
      contrast(1.08)
      brightness(1.03)
      drop-shadow(0 0 5px rgba(105,220,255,.56))
      drop-shadow(0 3px 12px rgba(0,145,255,.42));
  }
}

/* ===== v4.8.10 Headliner overlay always visible; hover adds tech highlight ===== */
.interior-showcase__layer--headliner{
  opacity:.58;
  transform:translateY(0) scale(1);
  filter:
    saturate(1.08)
    contrast(1.03)
    brightness(.94)
    drop-shadow(0 1px 4px rgba(13,94,168,.18));
}

.interior-showcase__layer--headliner.is-active{
  opacity:.86;
  transform:translateY(0) scale(1);
  filter:
    saturate(1.22)
    contrast(1.08)
    brightness(1.03)
    drop-shadow(0 0 5px rgba(105,220,255,.56))
    drop-shadow(0 3px 12px rgba(0,145,255,.42));
  animation:ysBlueGlassFloatSeamless 2.8s cubic-bezier(.45,0,.55,1) infinite alternate;
  animation-fill-mode:both;
}

@media(max-width:980px){
  .interior-showcase__layer--headliner{
    opacity:.60;
    filter:
      saturate(1.08)
      contrast(1.03)
      brightness(.95)
      drop-shadow(0 1px 4px rgba(13,94,168,.16));
  }
  .interior-showcase__layer--headliner.is-active{
    opacity:.88;
  }
}

@media(prefers-reduced-motion:reduce){
  .interior-showcase__layer--headliner{
    opacity:.58;
    transform:none;
    filter:
      saturate(1.08)
      contrast(1.03)
      brightness(.94)
      drop-shadow(0 1px 4px rgba(13,94,168,.18));
  }
  .interior-showcase__layer--headliner.is-active{
    opacity:.86;
    filter:
      saturate(1.22)
      contrast(1.08)
      brightness(1.03)
      drop-shadow(0 0 5px rgba(105,220,255,.56))
      drop-shadow(0 3px 12px rgba(0,145,255,.42));
  }
}


/* ===== v4.8.11 Response 2: persistent base + independently fading glow ===== */
.interior-showcase__layer--headliner-base{
  z-index:2;
  opacity:.62;
  transform:none!important;
  animation:none!important;
  filter:
    saturate(1.10)
    contrast(1.035)
    brightness(.96)
    drop-shadow(0 1px 4px rgba(13,94,168,.16));
  transition:
    filter 850ms cubic-bezier(.22,.61,.36,1),
    opacity 850ms cubic-bezier(.22,.61,.36,1)!important;
}

.interior-showcase__layer--headliner-base.is-active{
  opacity:.66;
  transform:none!important;
  animation:none!important;
  filter:
    saturate(1.14)
    contrast(1.05)
    brightness(1.00)
    drop-shadow(0 1px 5px rgba(13,94,168,.20));
}

.interior-showcase__layer--headliner-glow{
  z-index:3;
  opacity:0;
  transform-origin:center center;
  filter:
    saturate(1.34)
    contrast(1.10)
    brightness(1.16)
    drop-shadow(0 0 6px rgba(105,220,255,.62))
    drop-shadow(0 3px 15px rgba(0,145,255,.46));
  transition:opacity 780ms cubic-bezier(.22,.61,.36,1)!important;
  animation:ysBlueGlassFloatSeamless 3.2s cubic-bezier(.45,0,.55,1) infinite alternate;
  animation-fill-mode:both;
  will-change:opacity,transform;
}

.interior-showcase__layer--headliner-glow.is-active{
  opacity:.46;
}

@media(max-width:980px){
  .interior-showcase__layer--headliner-base{opacity:.64}
  .interior-showcase__layer--headliner-base.is-active{opacity:.68}
  .interior-showcase__layer--headliner-glow{
    animation-name:ysBlueGlassFloatStableCompact;
    animation-duration:3.4s;
  }
  .interior-showcase__layer--headliner-glow.is-active{opacity:.42}
}

@media(prefers-reduced-motion:reduce){
  .interior-showcase__layer--headliner-base,
  .interior-showcase__layer--headliner-base.is-active{
    transform:none!important;
    animation:none!important;
  }
  .interior-showcase__layer--headliner-glow,
  .interior-showcase__layer--headliner-glow.is-active{
    transform:none!important;
    animation:none!important;
    transition:opacity 780ms ease!important;
  }
}


/* Product portfolio redesign v4.8.12 */
.products-redesign,.product-detail-redesign{background:#fff;color:#172638}.product-kicker{margin:0 0 14px;color:#39749e;font-size:.78rem;font-weight:800;letter-spacing:.18em}.product-index-hero{padding:clamp(72px,9vw,132px) 0 64px;background:linear-gradient(145deg,#f5f8fb 0%,#fff 55%,#edf4f8 100%);overflow:hidden}.product-index-hero__inner{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:64px;align-items:end}.product-index-hero h1{max-width:900px;margin:0;font-size:clamp(2.25rem,4.8vw,4.8rem);line-height:1.08;letter-spacing:-.045em;color:#123a63}.product-index-hero p:not(.product-kicker){max-width:760px;margin:26px 0 0;font-size:1.08rem;line-height:1.9;color:#52677a}.product-index-hero__metric{display:flex;min-width:190px;aspect-ratio:1;flex-direction:column;justify-content:center;align-items:center;border:1px solid rgba(18,58,99,.18);border-radius:50%;background:rgba(255,255,255,.68);box-shadow:0 24px 70px rgba(18,58,99,.1)}.product-index-hero__metric strong{font-size:3.8rem;line-height:1;color:#123a63}.product-index-hero__metric span{margin-top:10px;color:#60758a;font-weight:700}.product-system-section{padding:90px 0 120px}.product-system-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}.product-system-card{position:relative;display:grid;grid-template-columns:46% 54%;min-height:420px;overflow:hidden;border:1px solid #dce6ee;border-radius:24px;background:#fff;color:inherit;text-decoration:none;box-shadow:0 18px 50px rgba(18,58,99,.07);transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease}.product-system-card:hover{transform:translateY(-8px);border-color:#aac8dc;box-shadow:0 30px 70px rgba(18,58,99,.14)}.product-system-card__number{position:absolute;z-index:3;top:22px;left:24px;color:rgba(18,58,99,.38);font-size:.78rem;font-weight:800;letter-spacing:.16em}.product-system-card__media{position:relative;display:flex;align-items:center;justify-content:center;min-height:100%;overflow:hidden;background:radial-gradient(circle at center,#fff 0%,#eef4f8 72%)}.product-system-card__media img{position:relative;z-index:1;width:96%;height:100%;object-fit:contain;transition:transform .5s ease}.product-system-card__media .product-system-card__overlay{position:absolute;z-index:2;inset:0;width:96%;height:100%;object-fit:contain;opacity:.42}.product-system-card:hover .product-system-card__media img{transform:scale(1.035)}.product-system-card__content{display:flex;flex-direction:column;justify-content:center;padding:46px 38px}.product-system-card__eyebrow{margin:0 0 12px;color:#39749e;font-size:.68rem;font-weight:800;letter-spacing:.18em}.product-system-card h2{margin:0;color:#123a63;font-size:clamp(1.45rem,2vw,2rem);line-height:1.25}.product-system-card__content>p:not(.product-system-card__eyebrow){margin:18px 0;color:#617487;line-height:1.8}.product-system-card__tags{display:flex;flex-wrap:wrap;gap:8px}.product-system-card__tags span{padding:6px 10px;border-radius:999px;background:#eef4f8;color:#47677f;font-size:.76rem}.product-system-card__link{margin-top:24px;color:#123a63;font-weight:800}.product-system-card__link i{margin-left:8px;transition:transform .25s}.product-system-card:hover .product-system-card__link i{transform:translateX(5px)}.product-contact-cta{padding:0 0 120px}.product-contact-cta__inner{display:flex;align-items:center;justify-content:space-between;gap:40px;padding:54px 58px;border-radius:28px;background:#123a63;color:#fff}.product-contact-cta h2{margin:0;font-size:clamp(1.6rem,3vw,2.7rem)}.product-contact-cta p:not(.product-kicker){margin:14px 0 0;color:#d6e2ec}.product-contact-cta .product-kicker{color:#91bed9}.product-contact-cta .btn{flex:none;background:#fff;color:#123a63}.product-detail-hero{position:relative;overflow:hidden;padding:72px 0 62px;background:linear-gradient(145deg,#f3f7fa,#fff 62%)}.product-detail-hero__grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(420px,1.08fr);align-items:center;gap:70px}.product-detail-hero h1{margin:0;color:#123a63;font-size:clamp(2.5rem,5vw,5rem);line-height:1.06;letter-spacing:-.045em}.product-detail-hero__lead{max-width:680px;margin:26px 0 0;color:#576d80;font-size:1.1rem;line-height:1.9}.product-detail-hero__meta{display:flex;gap:42px;margin-top:40px}.product-detail-hero__meta span{display:flex;flex-direction:column;color:#6b7e8f;font-size:.84rem}.product-detail-hero__meta strong{margin-bottom:6px;color:#123a63;font-size:1.55rem}.product-detail-hero__visual{position:relative;display:flex;align-items:center;justify-content:center;min-height:470px}.product-detail-hero__halo{position:absolute;width:76%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(103,167,204,.18),rgba(255,255,255,0) 68%)}.product-detail-hero__base,.product-detail-hero__overlay{position:absolute;width:100%;height:100%;object-fit:contain}.product-detail-hero__base{z-index:1}.product-detail-hero__overlay{z-index:2;opacity:.5}.product-detail-nav{position:sticky;z-index:20;top:0;border-top:1px solid #dfe8ef;border-bottom:1px solid #dfe8ef;background:rgba(255,255,255,.94);backdrop-filter:blur(14px)}.product-detail-nav .container{display:flex;gap:8px;overflow-x:auto;padding-top:13px;padding-bottom:13px;scrollbar-width:none}.product-detail-nav a{flex:none;padding:9px 14px;border-radius:999px;color:#49667e;font-size:.83rem;font-weight:700;text-decoration:none;white-space:nowrap}.product-detail-nav a:hover{background:#eaf2f7;color:#123a63}.technology-section{padding:48px 0 120px}.product-section-heading{max-width:760px;margin-bottom:46px}.product-section-heading h2{margin:0;color:#123a63;font-size:clamp(2rem,4vw,3.6rem)}.product-section-heading>p:last-child{color:#607487;line-height:1.8}.technology-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:30px;max-width:1080px;margin:0 auto}.technology-card{width:100%}.technology-card{scroll-margin-top:90px;border:1px solid #dae5ed;border-radius:22px;background:#fff;box-shadow:0 15px 44px rgba(18,58,99,.065);overflow:hidden}.technology-card__head{display:flex;gap:20px;align-items:flex-start;padding:30px 32px 24px;border-bottom:1px solid #e7eef3;background:linear-gradient(135deg,#f7fafc,#fff)}.technology-card__head>span{color:#8dafc5;font-size:.76rem;font-weight:800;letter-spacing:.14em}.technology-card__head p{margin:0 0 6px;color:#6e91a9;font-size:.66rem;font-weight:800;letter-spacing:.16em}.technology-card h3{margin:0;color:#123a63;font-size:1.45rem}.technology-card small{display:block;margin-top:5px;color:#758a9c}.technology-card__body{display:grid;grid-template-columns:1fr 1fr;gap:0}.technology-card__body>div{padding:28px 30px}.technology-card__body>div+div{border-left:1px solid #e7eef3}.technology-card h4{display:flex;align-items:center;gap:9px;margin:0 0 12px;color:#365c78;font-size:.87rem}.technology-card h4 i{color:#6497b8}.technology-card__body p{margin:0;color:#617486;line-height:1.8}.product-detail-bottom{padding:0 0 110px}.product-detail-bottom__inner{display:flex;align-items:center;justify-content:space-between;padding-top:38px;border-top:1px solid #dfe8ef}.product-detail-bottom__inner>a:first-child{color:#365c78;font-weight:700;text-decoration:none}.product-detail-bottom__inner>a:first-child i{margin-right:9px}
@media(max-width:1050px){.product-system-card{grid-template-columns:1fr;min-height:0}.product-system-card__media{height:290px}.product-system-card__content{padding:34px}.product-detail-hero__grid{grid-template-columns:1fr;gap:24px}.product-detail-hero__visual{min-height:430px}.product-detail-hero__copy{max-width:760px}.technology-card__body{grid-template-columns:1fr}.technology-card__body>div+div{border-left:0;border-top:1px solid #e7eef3}}
@media(max-width:760px){.product-index-hero{padding:58px 0 44px}.product-index-hero__inner{grid-template-columns:1fr;gap:34px}.product-index-hero__metric{min-width:0;width:142px}.product-index-hero__metric strong{font-size:3rem}.product-system-section{padding:54px 0 80px}.product-system-grid,.technology-grid{grid-template-columns:1fr}.product-system-card__media{height:250px}.product-system-card__content{padding:30px 24px}.product-contact-cta{padding-bottom:80px}.product-contact-cta__inner{display:block;padding:38px 26px}.product-contact-cta .btn{margin-top:28px}.product-detail-hero{padding:54px 0 34px}.product-detail-hero__grid{grid-template-columns:minmax(0,1fr)}.product-detail-hero__visual{min-height:300px}.product-detail-hero__meta{gap:24px}.technology-section{padding:36px 0 80px}.technology-card__head{padding:25px 22px}.technology-card__body>div{padding:24px 22px}.product-detail-bottom__inner{align-items:flex-start;flex-direction:column;gap:24px}.product-detail-nav{top:0}}



/* ===== v4.8.14 product technology tabs ===== */
.product-detail-nav a.is-active{background:#123a63;color:#fff;box-shadow:0 8px 22px rgba(18,58,99,.18)}
.technology-grid.is-tabbed .technology-card{display:none}
.technology-grid.is-tabbed .technology-card.is-active{display:block;animation:technologyPanelIn .38s ease both}
@keyframes technologyPanelIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.technology-card__body p{white-space:normal}
@media(prefers-reduced-motion:reduce){.technology-grid.is-tabbed .technology-card.is-active{animation:none}}

/* v4.8.15 | Compact product index hero */
.product-index-hero{
  padding:44px 0 46px;
}
.product-index-hero__inner{
  grid-template-columns:minmax(0,1fr) 150px;
  gap:44px;
  align-items:center;
  min-height:230px;
}
.product-index-hero h1{
  max-width:820px;
  font-size:clamp(2rem,3.35vw,3.35rem);
  line-height:1.12;
  letter-spacing:-.035em;
}
.product-index-hero p:not(.product-kicker){
  max-width:720px;
  margin-top:18px;
  font-size:1rem;
  line-height:1.75;
}
.product-index-hero__metric{
  min-width:0;
  width:150px;
  height:150px;
  aspect-ratio:auto;
}
.product-index-hero__metric strong{
  font-size:3.15rem;
}
.product-index-hero__metric span{
  margin-top:8px;
  font-size:.88rem;
}
.product-system-section{
  padding-top:68px;
}
@media(max-width:991px){
  .product-index-hero{
    padding:38px 0 40px;
  }
  .product-index-hero__inner{
    grid-template-columns:minmax(0,1fr) 124px;
    gap:30px;
    min-height:205px;
  }
  .product-index-hero__metric{
    width:124px;
    height:124px;
  }
  .product-index-hero__metric strong{
    font-size:2.6rem;
  }
}
@media(max-width:760px){
  .product-index-hero{
    padding:34px 0 36px;
  }
  .product-index-hero__inner{
    grid-template-columns:minmax(0,1fr) 88px;
    gap:18px;
    min-height:0;
    align-items:center;
  }
  .product-index-hero h1{
    font-size:clamp(1.75rem,8vw,2.35rem);
  }
  .product-index-hero p:not(.product-kicker){
    margin-top:14px;
    font-size:.94rem;
    line-height:1.68;
  }
  .product-index-hero__metric{
    width:88px;
    height:88px;
  }
  .product-index-hero__metric strong{
    font-size:2rem;
  }
  .product-index-hero__metric span{
    margin-top:4px;
    font-size:.7rem;
    text-align:center;
  }
  .product-system-section{
    padding-top:48px;
  }
}
@media(max-width:520px){
  .product-index-hero__inner{
    grid-template-columns:1fr;
  }
  .product-index-hero__metric{
    display:none;
  }
}


/* v4.8.16 | Minimal dark product index banner */
.product-index-hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:28px 0 30px;
  background:linear-gradient(105deg,#0b2944 0%,#123a63 56%,#1c4e72 100%);
}
.product-index-hero::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0 0 0 auto;
  width:min(48vw,720px);
  background:
    linear-gradient(90deg,rgba(18,58,99,1) 0%,rgba(18,58,99,.34) 38%,rgba(18,58,99,.08) 100%),
    url("templates/img/car1.png") center 46% / cover no-repeat;
  opacity:.48;
  filter:saturate(.72) contrast(1.08);
}
.product-index-hero::after{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:72px 100%;
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.25) 55%,rgba(0,0,0,.7) 100%);
}
.product-index-hero__inner{
  display:block;
  min-height:112px;
  padding-right:min(34vw,500px);
}
.product-index-hero .product-kicker{
  margin-bottom:8px;
  color:#9fc4dc;
  font-size:.7rem;
}
.product-index-hero h1{
  max-width:760px;
  margin:0;
  color:#fff;
  font-size:clamp(1.7rem,2.65vw,2.75rem);
  line-height:1.14;
  letter-spacing:-.025em;
}
.product-index-hero p:not(.product-kicker){
  max-width:700px;
  margin:11px 0 0;
  color:#d2e0ea;
  font-size:.92rem;
  line-height:1.62;
}
.product-index-hero__metric{display:none!important}
.product-system-section{padding-top:54px}
@media(max-width:991px){
  .product-index-hero{padding:26px 0 28px}
  .product-index-hero__inner{min-height:108px;padding-right:28vw}
  .product-index-hero::before{width:46vw;opacity:.38}
}
@media(max-width:760px){
  .product-index-hero{padding:24px 0 25px}
  .product-index-hero__inner{min-height:0;padding-right:0}
  .product-index-hero::before{display:none}
  .product-index-hero::after{opacity:.35}
  .product-index-hero h1{font-size:clamp(1.55rem,7vw,2rem)}
  .product-index-hero p:not(.product-kicker){margin-top:9px;font-size:.88rem;line-height:1.55}
  .product-system-section{padding-top:42px}
}

/* v4.8.17 — Products page header aligned with other primary navigation pages */
.products-redesign > .page-hero + .product-system-section{padding-top:72px;}
@media(max-width:760px){.products-redesign > .page-hero + .product-system-section{padding-top:50px;}}

/* v4.8.18 Products sidebar browser */
.product-browser-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:28px;align-items:start}
.product-browser-sidebar{top:96px}
.product-browser-sidebar button{display:flex;align-items:center;gap:12px}
.product-browser-sidebar__number{flex:0 0 30px;color:#8aa2b8;font-size:.72rem;letter-spacing:.12em}
.product-browser-sidebar button.active .product-browser-sidebar__number,.product-browser-sidebar button:hover .product-browser-sidebar__number{color:#39749e}
.product-browser-content{min-width:0}
.product-browser-empty{display:none;min-height:420px;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:58px}
.product-browser-empty.active{display:flex}
.product-browser-empty__icon{display:grid;place-items:center;width:72px;height:72px;margin-bottom:22px;border-radius:50%;background:#edf3fb;color:#123a63;font-size:1.55rem}
.product-browser-empty h2{margin:0;color:#123a63;font-size:clamp(1.65rem,3vw,2.35rem)}
.product-browser-empty p{max-width:580px;margin:16px 0 0;color:#617487;line-height:1.8}
.product-browser-panel{animation:productPanelIn .35s ease both}
.product-browser-panel[hidden]{display:none!important}
.product-browser-panel .product-system-card{grid-template-columns:44% 56%;width:100%;min-height:480px}
.product-browser-panel .product-system-card__media{min-height:480px}
@keyframes productPanelIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(max-width:900px){
 .product-browser-layout{grid-template-columns:1fr;gap:20px}
 .product-browser-sidebar{position:static;display:flex;gap:8px;overflow-x:auto;padding:10px;scrollbar-width:thin}
 .product-browser-sidebar button{flex:0 0 auto;width:auto;white-space:nowrap;padding:12px 15px}
 .product-browser-panel .product-system-card{grid-template-columns:1fr;min-height:0}
 .product-browser-panel .product-system-card__media{height:310px;min-height:0}
 .product-browser-empty{min-height:300px;padding:42px 24px}
}
@media(max-width:600px){
 .product-browser-sidebar__number{display:none}
 .product-browser-panel .product-system-card__media{height:250px}
}

/* v4.8.19 Products sidebar/detail links aligned with main inner pages */
.product-browser-sidebar button{justify-content:flex-start;gap:0;text-align:left}
.product-system-card--details{cursor:default}
.product-system-card--details:hover{transform:none;box-shadow:0 16px 42px rgba(18,58,99,.09)}
.product-detail-links{margin-top:28px;padding-top:24px;border-top:1px solid #dce4eb}
.product-detail-links h3{margin:0 0 7px;font-size:1.15rem;color:#173b5e;letter-spacing:.02em}
.product-detail-links__intro{margin:0 0 14px!important;color:#657687!important;font-size:.94rem}
.product-detail-links ul{list-style:none;margin:0;padding:0;border-top:1px solid #e5ebf0}
.product-detail-links li{margin:0;padding:0}
.product-detail-links a{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 4px;border-bottom:1px solid #e5ebf0;color:#294b68;text-decoration:none;font-weight:600;transition:background-color .2s ease,color .2s ease,padding .2s ease}
.product-detail-links a:hover,.product-detail-links a:focus-visible{padding-left:14px;padding-right:12px;background:#f3f7fa;color:#0d5b92;outline:none}
.product-detail-links i{font-size:.78rem;transition:transform .2s ease}
.product-detail-links a:hover i,.product-detail-links a:focus-visible i{transform:translateX(4px)}
@media (max-width:767px){.product-detail-links{margin-top:22px;padding-top:20px}.product-detail-links a{padding:13px 2px}}


/* v4.8.20 clickable detail pills */
.product-system-card__tags .product-system-card__tag-link{display:inline-flex;align-items:center;min-height:32px;padding:7px 12px;border:1px solid #d8e4ec;border-radius:999px;background:#eef4f8;color:#47677f;font-size:.78rem;font-weight:700;line-height:1.35;text-decoration:none;transition:background-color .2s ease,border-color .2s ease,color .2s ease,transform .2s ease,box-shadow .2s ease}
.product-system-card__tags .product-system-card__tag-link:hover,.product-system-card__tags .product-system-card__tag-link:focus-visible{border-color:#8eb6cf;background:#e3f0f8;color:#0d5b92;transform:translateY(-1px);box-shadow:0 6px 14px rgba(18,58,99,.10);outline:none}
.product-system-card__tags .product-system-card__tag-link:focus-visible{box-shadow:0 0 0 3px rgba(57,116,158,.18)}

/* ===== v4.8.25 Compact Inner Page Header ===== */
.breadcrumb-bar{
  background:#ffffff;
  border-bottom:1px solid #edf1f5;
}
.breadcrumb-inner{
  min-height:42px;
}
.breadcrumb-list{
  padding:7px 0;
  gap:8px;
  font-size:13px;
  color:#8a94a6;
}
.breadcrumb-list a{
  color:#7b8798;
  font-weight:600;
}
.breadcrumb-list a:hover{
  color:#006fcf;
}
.breadcrumb-list .current{
  color:#536174;
  font-weight:700;
}
.breadcrumb-list .breadcrumb-separator{
  color:#b8c1cc;
}

main > .page-hero,
.products-redesign > .page-hero,
.product-detail-redesign > .page-hero{
  background:#f7f9fc !important;
  color:#15324f !important;
  padding:34px 0 31px !important;
  border-bottom:1px solid #e5ebf1;
  box-shadow:none !important;
}
main > .page-hero::before,
main > .page-hero::after,
.products-redesign > .page-hero::before,
.products-redesign > .page-hero::after,
.product-detail-redesign > .page-hero::before,
.product-detail-redesign > .page-hero::after{
  display:none !important;
}
main > .page-hero .container,
.products-redesign > .page-hero .container,
.product-detail-redesign > .page-hero .container{
  position:relative;
  padding-left:22px;
}
main > .page-hero .container::before,
.products-redesign > .page-hero .container::before,
.product-detail-redesign > .page-hero .container::before{
  content:"";
  position:absolute;
  left:0;
  top:2px;
  bottom:2px;
  width:4px;
  border-radius:999px;
  background:#006fcf;
}
main > .page-hero h1,
.products-redesign > .page-hero h1,
.product-detail-redesign > .page-hero h1{
  margin:0 0 6px !important;
  color:#15324f !important;
  font-size:clamp(30px,3.2vw,39px) !important;
  line-height:1.18;
  letter-spacing:.01em;
}
main > .page-hero p,
.products-redesign > .page-hero p,
.product-detail-redesign > .page-hero p{
  margin:0 !important;
  max-width:760px;
  color:#657286 !important;
  font-size:15px;
  line-height:1.75;
}
.products-redesign > .page-hero + .product-system-section{
  padding-top:52px !important;
}
.product-detail-redesign > .page-hero + .product-detail-nav{
  margin-top:0;
}

@media(max-width:760px){
  .breadcrumb-inner{min-height:38px;}
  .breadcrumb-list{padding:6px 0;font-size:12px;}
  main > .page-hero,
  .products-redesign > .page-hero,
  .product-detail-redesign > .page-hero{
    padding:25px 0 23px !important;
  }
  main > .page-hero .container,
  .products-redesign > .page-hero .container,
  .product-detail-redesign > .page-hero .container{
    padding-left:17px;
  }
  main > .page-hero .container::before,
  .products-redesign > .page-hero .container::before,
  .product-detail-redesign > .page-hero .container::before{
    width:3px;
  }
  main > .page-hero h1,
  .products-redesign > .page-hero h1,
  .product-detail-redesign > .page-hero h1{
    font-size:28px !important;
    margin-bottom:5px !important;
  }
  main > .page-hero p,
  .products-redesign > .page-hero p,
  .product-detail-redesign > .page-hero p{
    font-size:14px;
    line-height:1.65;
  }
  .products-redesign > .page-hero + .product-system-section{
    padding-top:38px !important;
  }
}


/* v4.8.26 — restore compact deep-blue inner-page gradient */
main > .page-hero,
.products-redesign > .page-hero,
.product-detail-redesign > .page-hero{
  background:linear-gradient(135deg,#123a63 0%,#0b2b4d 58%,#071d35 100%) !important;
  color:#fff !important;
  border-bottom:1px solid rgba(255,255,255,.08);
}
main > .page-hero .container::before,
.products-redesign > .page-hero .container::before,
.product-detail-redesign > .page-hero .container::before{background:#54aef5;}
main > .page-hero h1,
.products-redesign > .page-hero h1,
.product-detail-redesign > .page-hero h1{color:#fff !important;}
main > .page-hero p,
.products-redesign > .page-hero p,
.product-detail-redesign > .page-hero p{color:#dce8f5 !important;}

/* ===== v4.8.27 Mobile product navigation: no horizontal scrolling ===== */
@media (max-width:900px){
  /* Products index: follow the same stacked inner-page navigation pattern as About / Certifications. */
  .product-browser-sidebar{
    display:block;
    overflow:visible;
    padding:10px;
  }
  .product-browser-sidebar button{
    width:100%;
    white-space:normal;
    padding:13px 15px;
  }
  .product-browser-sidebar button + button{
    margin-top:4px;
  }

  /* Product detail pages: technology links wrap naturally instead of becoming a swipe row. */
  .product-detail-nav{
    position:static;
  }
  .product-detail-nav .container{
    display:flex;
    flex-wrap:wrap;
    overflow:visible;
    gap:8px;
    padding-top:12px;
    padding-bottom:12px;
  }
  .product-detail-nav a{
    flex:0 1 auto;
    white-space:normal;
    text-align:center;
    line-height:1.35;
  }
}

@media (max-width:560px){
  .product-browser-sidebar{
    padding:8px;
  }
  .product-browser-sidebar button{
    padding:12px 13px;
  }
  .product-detail-nav .container{
    gap:7px;
  }
  .product-detail-nav a{
    padding:8px 11px;
    font-size:.8rem;
  }
}

/* ===== v4.8.28 Products card responsive media order ===== */
/* Desktop: copy on the left, product visual on the right. */
.product-browser-panel .product-system-card{
  grid-template-columns:minmax(0,55%) minmax(0,45%);
}
.product-browser-panel .product-system-card__content{
  grid-column:1;
  grid-row:1;
}
.product-browser-panel .product-system-card__media{
  grid-column:2;
  grid-row:1;
}

/* Tablet and mobile: copy first, visual immediately below. */
@media (max-width:900px){
  .product-browser-panel .product-system-card{
    grid-template-columns:minmax(0,1fr);
  }
  .product-browser-panel .product-system-card__content{
    grid-column:1;
    grid-row:1;
  }
  .product-browser-panel .product-system-card__media{
    grid-column:1;
    grid-row:2;
    height:310px;
    min-height:0;
  }
}

@media (max-width:600px){
  .product-browser-panel .product-system-card__media{
    height:250px;
  }
}

/* ======================================================================
   v4.8.29 — Global Typography & Design System
   Unified type scale, text hierarchy, surfaces, controls and responsive rhythm
   ====================================================================== */
:root{
  --ys-font-sans:"Inter","Noto Sans TC","Noto Sans","Microsoft JhengHei","PingFang TC","Segoe UI",Arial,sans-serif;
  --ys-ink:#0f172a;
  --ys-text:#334155;
  --ys-muted:#64748b;
  --ys-subtle:#94a3b8;
  --ys-primary:#123a63;
  --ys-primary-deep:#071d35;
  --ys-link:#075fae;
  --ys-link-hover:#006fcf;
  --ys-accent:#b4202a;
  --ys-surface:#ffffff;
  --ys-surface-soft:#f8fafc;
  --ys-surface-blue:#f2f6fb;
  --ys-border:#e2e8f0;
  --ys-border-strong:#cbd5e1;
  --ys-radius-sm:10px;
  --ys-radius-md:14px;
  --ys-radius-lg:18px;
  --ys-shadow-sm:0 8px 24px rgba(15,23,42,.06);
  --ys-shadow-md:0 14px 36px rgba(15,47,85,.09);
  --ys-shadow-hover:0 20px 44px rgba(15,47,85,.13);
  --ys-space-section:72px;
}

html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
body{
  font-family:var(--ys-font-sans) !important;
  color:var(--ys-text);
  background:var(--ys-surface);
  font-size:16px;
  line-height:1.78;
  letter-spacing:.005em;
}
button,input,textarea,select{font-family:inherit;}
p,li,dd,td,th,label,input,textarea,select{color:var(--ys-text);}
p{margin-top:0;}
small,.small,.caption,.eyebrow,.meta,.placeholder-note{color:var(--ys-muted);}
strong,b{color:var(--ys-ink);font-weight:700;}
a{transition:color .18s ease,background-color .18s ease,border-color .18s ease,transform .18s ease;}
main a:not(.btn):not(.button):not(.primary-btn):not(.nav-link):not(.product-detail-nav a):not(.product-browser-sidebar button){text-underline-offset:3px;}

h1,h2,h3,h4,h5,h6,
.section-title,.product-system-card__title,.tech-card h2,.tech-card h3{
  font-family:var(--ys-font-sans);
  color:var(--ys-ink);
  font-weight:700;
  line-height:1.28;
  letter-spacing:-.015em;
  text-wrap:balance;
}
h1{font-size:clamp(2rem,3.7vw,2.75rem);}
h2{font-size:clamp(1.7rem,3vw,2.125rem);}
h3{font-size:clamp(1.25rem,2vw,1.5rem);}
h4{font-size:1.125rem;}
h5{font-size:1rem;}
h6{font-size:.9375rem;}
.section-title{font-size:clamp(1.75rem,3vw,2.125rem);margin-bottom:10px;color:var(--ys-ink);}
.section-subtitle,.section-lead,.lead{color:var(--ys-muted);font-size:1rem;line-height:1.8;max-width:780px;}

/* Site chrome */
.topbar{font-size:13px;letter-spacing:.015em;}
.nav-links a,.nav-menu a,.nav-link{color:#24344d;font-size:15px;font-weight:650;letter-spacing:.015em;}
.nav-links a:hover,.nav-links a.active,.nav-menu a:hover,.nav-link:hover{color:var(--ys-primary);}
.brand{letter-spacing:-.01em;}
.breadcrumb-list{font-size:13px;letter-spacing:.01em;color:var(--ys-subtle);}
.breadcrumb-list a{color:#8290a3;font-weight:600;}
.breadcrumb-list .current{color:#aebdd0;font-weight:650;}

/* Deep-blue compact page header */
main > .page-hero h1,
.products-redesign > .page-hero h1,
.product-detail-redesign > .page-hero h1{
  font-size:clamp(1.9rem,3.1vw,2.5rem) !important;
  font-weight:750;
  line-height:1.2;
  letter-spacing:-.018em;
}
main > .page-hero p,
.products-redesign > .page-hero p,
.product-detail-redesign > .page-hero p{
  max-width:760px;
  color:#d8e5f2 !important;
  font-size:15px;
  line-height:1.72;
}

/* Section rhythm and surfaces */
.section{padding:var(--ys-space-section) 0;}
section:nth-of-type(even):not(.page-hero):not(.hero){background-color:var(--ys-surface-soft);}
.content-card,.feature-card,.product-card,.cert-card,.info-card,.contact-card,.tab-panel,
.product-system-card,.tech-card,.product-browser-sidebar,.side-menu,.sidebar{
  background:var(--ys-surface);
  border:1px solid var(--ys-border);
  border-radius:var(--ys-radius-md);
  box-shadow:var(--ys-shadow-sm);
}
.content-card,.feature-card,.cert-card,.info-card,.contact-card,.tech-card{padding:clamp(22px,3vw,34px);}
.product-card,.product-system-card{transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;}
.product-card:hover,.product-system-card:hover,.tech-card:hover{
  border-color:#cbd8e6;
  box-shadow:var(--ys-shadow-hover);
}

/* Product index typography */
.product-browser-sidebar button{
  color:#334155;
  font-size:14px;
  font-weight:650;
  line-height:1.45;
  letter-spacing:.005em;
}
.product-browser-sidebar button.active,.product-browser-sidebar button:hover{
  color:var(--ys-primary);
  background:#edf4fb;
}
.product-system-card__content{padding:clamp(26px,4vw,48px);}
.product-system-card__title{font-size:clamp(1.65rem,2.7vw,2.15rem);margin-bottom:8px;}
.product-system-card__content p{color:var(--ys-muted);line-height:1.82;}
.product-system-card__eyebrow,.product-system-card__en{
  color:var(--ys-link);
  font-size:12px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.product-system-card__links a,.product-pill,.detail-pill{
  color:#24405e;
  background:var(--ys-surface-blue);
  border:1px solid #dbe6f1;
  font-size:13px;
  font-weight:650;
  line-height:1.4;
}
.product-system-card__links a:hover,.product-pill:hover,.detail-pill:hover{
  color:#fff;
  background:var(--ys-primary);
  border-color:var(--ys-primary);
}

/* Product detail tabs and cards */
.product-detail-nav{border-bottom:1px solid var(--ys-border);background:rgba(255,255,255,.96);}
.product-detail-nav a{
  color:#42566d;
  background:#f8fafc;
  border:1px solid var(--ys-border);
  font-size:13px;
  font-weight:650;
  line-height:1.4;
  letter-spacing:.005em;
}
.product-detail-nav a:hover,.product-detail-nav a.active{
  color:#fff;
  background:var(--ys-primary);
  border-color:var(--ys-primary);
}
.tech-card h2,.tech-card h3{color:var(--ys-ink);}
.tech-card p,.tech-card li{color:var(--ys-text);line-height:1.8;}

/* Buttons and form controls */
.btn,.button,.primary-btn,button[type="submit"]{
  min-height:44px;
  padding:11px 20px;
  border-radius:999px;
  border:1px solid transparent;
  font-size:14px;
  font-weight:700;
  letter-spacing:.01em;
  box-shadow:none;
}
.btn:not(.secondary),.button.primary,.primary-btn,button[type="submit"]{background:var(--ys-primary);color:#fff;}
.btn:not(.secondary):hover,.button.primary:hover,.primary-btn:hover,button[type="submit"]:hover{background:#0b3157;box-shadow:0 8px 20px rgba(15,47,85,.18);}
.btn.secondary,.button.secondary{background:#fff;color:var(--ys-primary);border-color:var(--ys-border-strong);}
.btn.secondary:hover,.button.secondary:hover{background:var(--ys-surface-blue);border-color:#aebfd1;}
input,textarea,select,.contact-form input,.contact-form textarea,.contact-form select{
  color:var(--ys-ink);
  background:#fff;
  border:1px solid var(--ys-border-strong);
  border-radius:var(--ys-radius-sm);
  font-size:15px;
  line-height:1.5;
  outline:none;
  transition:border-color .18s ease,box-shadow .18s ease;
}
input::placeholder,textarea::placeholder{color:var(--ys-subtle);}
input:focus,textarea:focus,select:focus,.contact-form input:focus,.contact-form textarea:focus,.contact-form select:focus{
  border-color:#5794c8;
  box-shadow:0 0 0 3px rgba(0,111,207,.12);
}

/* Tables, timelines and certifications */
table{border-color:var(--ys-border);font-size:15px;}
th{color:var(--ys-ink);font-weight:700;background:var(--ys-surface-soft);}
td,th{border-color:var(--ys-border);}
.timeline-item,.history-item{background:var(--ys-surface-soft);border-left-color:var(--ys-primary);}
.timeline-year{color:var(--ys-primary);font-weight:750;letter-spacing:.02em;}
.cert-card h3,.feature-card h3{color:var(--ys-ink);}

/* Footer */
.footer{background:var(--ys-primary-deep);color:#cbd8e6;}
.footer p,.footer li,.footer a{color:#cbd8e6;}
.footer h3,.footer h4{color:#fff;font-weight:700;letter-spacing:-.01em;}
.footer a:hover{color:#fff;}

/* Responsive type and spacing */
@media(max-width:900px){
  :root{--ys-space-section:58px;}
  body{font-size:15.5px;line-height:1.74;}
  .product-system-card__content{padding:28px 24px 20px;}
  .product-browser-sidebar button{font-size:14px;}
  .product-detail-nav a{font-size:12.5px;}
}
@media(max-width:560px){
  :root{--ys-space-section:46px;}
  body{font-size:15px;line-height:1.72;}
  h1{font-size:1.9rem;}
  h2,.section-title{font-size:1.65rem;}
  h3{font-size:1.25rem;}
  main > .page-hero h1,
  .products-redesign > .page-hero h1,
  .product-detail-redesign > .page-hero h1{font-size:1.75rem !important;}
  main > .page-hero p,
  .products-redesign > .page-hero p,
  .product-detail-redesign > .page-hero p{font-size:14px;line-height:1.65;}
  .content-card,.feature-card,.cert-card,.info-card,.contact-card,.tech-card{padding:20px;}
  .product-system-card__content{padding:24px 18px 18px;}
  .product-system-card__title{font-size:1.55rem;}
  .btn,.button,.primary-btn,button[type="submit"]{min-height:42px;padding:10px 18px;}
}

/* =========================================================
   v4.8.31 Product detail section headings
   Remove mixed decorative icons and use one brand accent bar.
   ========================================================= */
.product-detail-redesign .technology-card__body h4 {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0 0 14px;
  padding: 0;
  color: var(--ys-heading, #0f172a);
  font-size: .9rem;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: .02em;
}
.product-detail-redesign .technology-card__body h4::before {
  content: "";
  flex: 0 0 auto;
  width: 4px;
  height: 1.15em;
  margin-right: 10px;
  border-radius: 999px;
  background: var(--ys-primary, #006fcf);
}
.product-detail-redesign .technology-card__body h4 i {
  display: none !important;
}

/* =========================================================
   v4.8.32 Product detail readability contrast
   Stronger hierarchy between canvas, cards, headings and body copy.
   ========================================================= */
.product-detail-redesign{
  background:#f3f6f9;
  color:#37475a;
}
.product-detail-redesign .breadcrumb-bar{
  background:#fff;
  border-bottom:1px solid #d7e0e8;
}
.product-detail-redesign .product-detail-nav{
  border-top:1px solid #d7e0e8;
  border-bottom:1px solid #cbd7e2;
  background:rgba(255,255,255,.98);
  box-shadow:0 8px 20px rgba(15,31,51,.045);
}
.product-detail-redesign .product-detail-nav a{
  color:#526577;
  background:#fff;
  border-color:#cfdae5;
  box-shadow:0 1px 0 rgba(15,31,51,.03);
}
.product-detail-redesign .product-detail-nav a:hover,
.product-detail-redesign .product-detail-nav a.active,
.product-detail-redesign .product-detail-nav a.is-active,
.product-detail-redesign .product-detail-nav a[aria-selected="true"]{
  color:#fff;
  background:#006fcf;
  border-color:#006fcf;
  box-shadow:0 8px 18px rgba(0,111,207,.22);
}
.product-detail-redesign .technology-section{
  background:#f3f6f9;
}
.product-detail-redesign .technology-card{
  border-color:#d2dde7;
  background:#fff;
  box-shadow:0 14px 34px rgba(15,31,51,.08);
}
.product-detail-redesign .technology-card__head{
  border-bottom-color:#d9e3ec;
  background:linear-gradient(135deg,#eaf2f8 0%,#f8fbfd 58%,#fff 100%);
}
.product-detail-redesign .technology-card__head>span{
  color:#39749e;
}
.product-detail-redesign .technology-card__head p{
  color:#39749e;
}
.product-detail-redesign .technology-card h3{
  color:#0b1f33;
  font-weight:750;
}
.product-detail-redesign .technology-card small{
  color:#66778a;
}
.product-detail-redesign .technology-card__body>div{
  background:#fff;
}
.product-detail-redesign .technology-card__body>div+div{
  border-left-color:#d9e3ec;
}
.product-detail-redesign .technology-card__body h4{
  margin:0 0 18px;
  padding:12px 16px;
  border-radius:10px;
  background:#eef5fb;
  color:#102a43;
  font-size:.94rem;
  font-weight:750;
  letter-spacing:.015em;
}
.product-detail-redesign .technology-card__body h4::before{
  width:4px;
  height:1.25em;
  margin-right:11px;
  background:#006fcf;
}
.product-detail-redesign .technology-card__body p,
.product-detail-redesign .technology-card__body li{
  color:#37475a;
  font-size:1rem;
  line-height:1.9;
}
.product-detail-redesign .technology-card__body strong,
.product-detail-redesign .technology-card__body b{
  color:#0b1f33;
}
.product-detail-redesign .product-detail-bottom{
  background:#f3f6f9;
}
.product-detail-redesign .product-detail-bottom__inner{
  border-top-color:#cbd7e2;
}
.product-detail-redesign .product-detail-bottom__inner>a:first-child{
  color:#274a68;
}
@media(max-width:1050px){
  .product-detail-redesign .technology-card__body>div+div{
    border-left:0;
    border-top:1px solid #d9e3ec;
  }
}
@media(max-width:760px){
  .product-detail-redesign .technology-card{
    border-radius:16px;
    box-shadow:0 10px 26px rgba(15,31,51,.075);
  }
  .product-detail-redesign .technology-card__head{
    padding:24px 22px 20px;
  }
  .product-detail-redesign .technology-card__body>div{
    padding:24px 22px 26px;
  }
  .product-detail-redesign .technology-card__body h4{
    margin-bottom:16px;
    padding:11px 14px;
  }
  .product-detail-redesign .technology-card__body p,
  .product-detail-redesign .technology-card__body li{
    font-size:.96rem;
    line-height:1.86;
  }
}

/* =========================================================
   v4.8.33 Product detail pills aligned with Products index
   Reuse the same visual language as .product-system-card__tag-link.
   ========================================================= */
.product-detail-redesign .product-detail-nav .container{
  gap:8px;
}
.product-detail-redesign .product-detail-nav a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:32px;
  padding:7px 12px;
  border:1px solid #d8e4ec;
  border-radius:999px;
  background:#eef4f8;
  color:#47677f;
  font-size:.78rem;
  font-weight:700;
  line-height:1.35;
  text-decoration:none;
  box-shadow:none;
  transition:background-color .2s ease,border-color .2s ease,color .2s ease,transform .2s ease,box-shadow .2s ease;
}
.product-detail-redesign .product-detail-nav a:hover,
.product-detail-redesign .product-detail-nav a:focus-visible{
  border-color:#8eb6cf;
  background:#e3f0f8;
  color:#0d5b92;
  transform:translateY(-1px);
  box-shadow:0 6px 14px rgba(18,58,99,.10);
  outline:none;
}
.product-detail-redesign .product-detail-nav a:focus-visible{
  box-shadow:0 0 0 3px rgba(57,116,158,.18);
}
.product-detail-redesign .product-detail-nav a.active,
.product-detail-redesign .product-detail-nav a.is-active,
.product-detail-redesign .product-detail-nav a[aria-selected="true"]{
  border-color:#006fcf;
  background:#006fcf;
  color:#fff;
  transform:none;
  box-shadow:0 7px 16px rgba(0,111,207,.20);
}
.product-detail-redesign .product-detail-nav a.active:hover,
.product-detail-redesign .product-detail-nav a.is-active:hover,
.product-detail-redesign .product-detail-nav a[aria-selected="true"]:hover{
  border-color:#005eaf;
  background:#005eaf;
  color:#fff;
}
@media(max-width:560px){
  .product-detail-redesign .product-detail-nav .container{gap:7px;}
  .product-detail-redesign .product-detail-nav a{
    min-height:31px;
    padding:7px 11px;
    font-size:.76rem;
  }
}

/* =========================================================
   v4.8.34 Product detail Glass Pill active state
   Keep the pill form while reducing the visual weight of the selected tab.
   ========================================================= */
.product-detail-redesign .product-detail-nav a{
  border-color:#d7e2eb;
  background:rgba(255,255,255,.82);
  color:#526779;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.92),0 1px 2px rgba(15,31,51,.035);
}
.product-detail-redesign .product-detail-nav a:hover{
  border-color:#91bfe3;
  background:#f5faff;
  color:#164f7e;
  box-shadow:inset 0 1px 0 #fff,0 5px 14px rgba(18,58,99,.08);
}
.product-detail-redesign .product-detail-nav a.active,
.product-detail-redesign .product-detail-nav a.is-active,
.product-detail-redesign .product-detail-nav a[aria-selected="true"]{
  border-color:#5fa8e8;
  background:linear-gradient(180deg,rgba(255,255,255,.98) 0%,rgba(247,251,255,.96) 100%);
  color:#005eaf;
  font-weight:750;
  transform:none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 0 0 3px rgba(0,111,207,.075),
    0 5px 14px rgba(18,58,99,.075);
}
.product-detail-redesign .product-detail-nav a.active:hover,
.product-detail-redesign .product-detail-nav a.is-active:hover,
.product-detail-redesign .product-detail-nav a[aria-selected="true"]:hover{
  border-color:#3f93d8;
  background:linear-gradient(180deg,#fff 0%,#f2f8fe 100%);
  color:#004f96;
  box-shadow:
    inset 0 1px 0 #fff,
    0 0 0 3px rgba(0,111,207,.10),
    0 7px 17px rgba(18,58,99,.09);
}
.product-detail-redesign .product-detail-nav a:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(0,111,207,.16),0 5px 14px rgba(18,58,99,.08);
}

/* ===== v4.8.37 Breadcrumb text contrast correction ===== */
.product-detail-redesign .breadcrumb-list{
  color:#40536a;
}
.product-detail-redesign .breadcrumb-list a{
  color:#40536a;
  font-weight:650;
  opacity:1;
}
.product-detail-redesign .breadcrumb-list a:hover{
  color:#005fae;
}
.product-detail-redesign .breadcrumb-list a i{
  color:#006fcf;
}
.product-detail-redesign .breadcrumb-list .breadcrumb-separator{
  color:#7d8a9a;
  opacity:1;
}
.product-detail-redesign .breadcrumb-list .current{
  color:#123a63;
  font-weight:750;
  opacity:1;
}

/* ===== v4.8.38 Global Breadcrumb Unification =====
   Single authoritative breadcrumb treatment for all Chinese and English inner pages. */
:root{
  --breadcrumb-bg:#ffffff;
  --breadcrumb-border:#e3e9ef;
  --breadcrumb-link:#40566d;
  --breadcrumb-link-hover:#006fcf;
  --breadcrumb-current:#123a63;
  --breadcrumb-separator:#78889a;
}
.breadcrumb-bar{
  position:relative;
  z-index:9;
  background:var(--breadcrumb-bg) !important;
  border-top:0 !important;
  border-bottom:1px solid var(--breadcrumb-border) !important;
  box-shadow:none !important;
}
.breadcrumb-inner{
  min-height:44px !important;
  display:flex;
  align-items:center;
  overflow:visible !important;
}
.breadcrumb-list{
  width:100%;
  list-style:none;
  display:flex;
  align-items:center;
  flex-wrap:wrap !important;
  column-gap:9px !important;
  row-gap:5px !important;
  margin:0;
  padding:8px 0 !important;
  color:var(--breadcrumb-link) !important;
  font-size:13px !important;
  line-height:1.5;
  letter-spacing:.01em;
}
.breadcrumb-list li{
  display:inline-flex;
  align-items:center;
  min-width:0;
}
.breadcrumb-list a{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--breadcrumb-link) !important;
  font-weight:650 !important;
  text-decoration:none;
  white-space:nowrap;
  transition:color .18s ease;
}
.breadcrumb-list a:hover,
.breadcrumb-list a:focus-visible{
  color:var(--breadcrumb-link-hover) !important;
  transform:none !important;
  outline:none;
}
.breadcrumb-list a:focus-visible{
  text-decoration:underline;
  text-underline-offset:3px;
}
.breadcrumb-list a i{
  color:var(--breadcrumb-link-hover) !important;
  font-size:12px !important;
}
.breadcrumb-list .breadcrumb-separator,
.breadcrumb-separator{
  color:var(--breadcrumb-separator) !important;
  font-size:10px !important;
  opacity:1 !important;
}
.breadcrumb-list .current{
  max-width:100% !important;
  overflow:visible !important;
  color:var(--breadcrumb-current) !important;
  font-weight:750 !important;
  white-space:normal !important;
  text-overflow:clip !important;
}
@media (max-width:560px){
  .breadcrumb-inner{min-height:42px !important;}
  .breadcrumb-list{
    flex-wrap:wrap !important;
    gap:5px 7px !important;
    padding:7px 0 !important;
    font-size:12px !important;
  }
  .breadcrumb-list .current{
    max-width:100% !important;
    overflow:visible !important;
    white-space:normal !important;
  }
}

/* ======================================================================
   v4.8.39 — Global restrained red accent system
   Red is used only as a small brand cue; primary actions remain blue.
   ====================================================================== */
:root{
  --ys-accent:#b4202a;
  --ys-accent-deep:#8f1f28;
  --ys-accent-soft:rgba(180,32,42,.10);
}

/* Compact page-header signature line */
main > .page-hero .container::before,
.products-redesign > .page-hero .container::before,
.product-detail-redesign > .page-hero .container::before{
  background:linear-gradient(90deg,var(--ys-accent),#d64a53) !important;
  box-shadow:0 0 0 1px rgba(255,255,255,.05);
}

/* Breadcrumb: retain the unified structure, add only a restrained current-page cue */
.breadcrumb-list .current{
  position:relative;
  color:var(--ys-primary) !important;
  font-weight:700 !important;
}
.breadcrumb-list .current::before{
  content:"";
  display:inline-block;
  width:3px;
  height:13px;
  margin-right:8px;
  border-radius:999px;
  background:var(--ys-accent);
  vertical-align:-2px;
}

/* Navigation and side-menu active states */
.nav-links a.active,
.nav-menu a.active,
.nav-link.active{
  position:relative;
}
.nav-links a.active::after,
.nav-menu a.active::after,
.nav-link.active::after{
  content:"";
  position:absolute;
  left:16px;
  right:16px;
  bottom:6px;
  height:2px;
  border-radius:999px;
  background:var(--ys-accent);
}
.side-menu button.active,
.product-browser-sidebar button.active{
  position:relative;
  color:var(--ys-primary) !important;
}
.side-menu button.active::before,
.product-browser-sidebar button.active::before{
  content:"";
  position:absolute;
  left:5px;
  top:50%;
  width:3px;
  height:20px;
  border-radius:999px;
  background:var(--ys-accent);
  transform:translateY(-50%);
}

/* Section titles: consistent short red rule, never a large red block */
.section-title,
.content-card > h2:first-child,
.content-card > h3:first-child,
.cert-section-header h2,
.timeline-intro h2{
  position:relative;
}
.section-title::after,
.content-card > h2:first-child::after,
.content-card > h3:first-child::after,
.cert-section-header h2::after,
.timeline-intro h2::after{
  content:"";
  display:block;
  width:34px;
  height:2px;
  margin-top:11px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--ys-accent),#cf3c45);
}
.section-kicker::before{
  background:linear-gradient(90deg,var(--ys-accent-deep),#c1272d) !important;
}

/* About / timeline / policy visual cues */
.timeline-marker,
.timeline-entry--latest .timeline-marker{
  border-color:var(--ys-accent) !important;
}
.timeline-entry--latest .timeline-marker{
  background:var(--ys-accent) !important;
  box-shadow:0 0 0 5px var(--ys-accent-soft);
}
.policy-card-icon,
.icon-card-symbol{
  color:var(--ys-accent);
}

/* Product pages: red only on metadata and numbering */
.product-system-card__eyebrow,
.product-system-card__en,
.product-kicker{
  color:var(--ys-accent) !important;
}
.technology-card__head > span,
.technology-card__head p{
  color:var(--ys-accent) !important;
}
.technology-card h4::before{
  content:"";
  width:3px;
  height:14px;
  flex:none;
  border-radius:999px;
  background:var(--ys-accent);
}

/* Certification and contact cards */
.cert-type-badge{
  color:var(--ys-accent-deep);
  background:var(--ys-accent-soft);
  border:1px solid rgba(180,32,42,.16);
}
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus{
  border-color:rgba(180,32,42,.48);
  box-shadow:0 0 0 3px var(--ys-accent-soft);
}

@media(max-width:760px){
  .nav-links a.active::after,
  .nav-menu a.active::after,
  .nav-link.active::after{
    left:12px;
    right:auto;
    bottom:7px;
    width:26px;
  }
  .breadcrumb-list .current::before{
    height:12px;
    margin-right:6px;
  }
}

/* ======================================================================
   v4.8.40 — Metallic accent refinement
   Replaces the v4.8.39 red cues with Steel Blue and Titanium Gray.
   ====================================================================== */
:root{
  --ys-accent:#3e5f7e;
  --ys-accent-deep:#2f4d68;
  --ys-accent-soft:rgba(62,95,126,.10);
  --ys-titanium:#9aa8b5;
  --ys-titanium-light:#cbd4dc;
}

/* Compact page-header signature line: steel blue fading into titanium */
main > .page-hero .container::before,
.products-redesign > .page-hero .container::before,
.product-detail-redesign > .page-hero .container::before{
  background:linear-gradient(90deg,var(--ys-accent) 0%,#6f879c 58%,var(--ys-titanium-light) 100%) !important;
  box-shadow:none !important;
}

/* Breadcrumb remains clean; current page receives a subtle metallic cue */
.breadcrumb-list .current::before{
  background:linear-gradient(180deg,var(--ys-accent),var(--ys-titanium)) !important;
}

/* Active navigation cues */
.nav-links a.active::after,
.nav-menu a.active::after,
.nav-link.active::after,
.side-menu button.active::before,
.product-browser-sidebar button.active::before{
  background:linear-gradient(90deg,var(--ys-accent),var(--ys-titanium)) !important;
}

/* Section title rules */
.section-title::after,
.content-card > h2:first-child::after,
.content-card > h3:first-child::after,
.cert-section-header h2::after,
.timeline-intro h2::after{
  background:linear-gradient(90deg,var(--ys-accent) 0%,#6f879c 62%,var(--ys-titanium-light) 100%) !important;
}
.section-kicker::before{
  background:linear-gradient(90deg,var(--ys-accent-deep),var(--ys-titanium)) !important;
}

/* About / timeline / policy visual cues */
.timeline-marker,
.timeline-entry--latest .timeline-marker{
  border-color:var(--ys-accent) !important;
}
.timeline-entry--latest .timeline-marker{
  background:linear-gradient(135deg,var(--ys-accent),#71879a) !important;
  box-shadow:0 0 0 5px var(--ys-accent-soft) !important;
}
.policy-card-icon,
.icon-card-symbol{
  color:var(--ys-accent) !important;
}

/* Product metadata and numbering */
.product-system-card__eyebrow,
.product-system-card__en,
.product-kicker,
.technology-card__head > span,
.technology-card__head p{
  color:var(--ys-accent) !important;
}
.technology-card h4::before{
  background:linear-gradient(180deg,var(--ys-accent),var(--ys-titanium)) !important;
}

/* Certification and form focus states */
.cert-type-badge{
  color:var(--ys-accent-deep) !important;
  background:var(--ys-accent-soft) !important;
  border-color:rgba(62,95,126,.18) !important;
}
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus{
  border-color:rgba(62,95,126,.52) !important;
  box-shadow:0 0 0 3px var(--ys-accent-soft) !important;
}


/* ===== v4.8.41 Inner Page English Eyebrow ===== */
.page-hero .page-hero-eyebrow{
  margin:0 0 7px;
  color:#aebdca;
  font-size:12px;
  line-height:1.2;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
}
@media (max-width:640px){
  .page-hero .page-hero-eyebrow{font-size:11px;letter-spacing:.15em;margin-bottom:6px;}
}

/* v4.8.42 — unified bilingual labels for inner-page navigation and section headings */
.side-menu button .nav-label-zh{
  display:block;
  color:inherit;
  font-size:inherit;
  font-weight:800;
  line-height:1.35;
}
.side-menu button .nav-label-en{
  display:block;
  margin-top:3px;
  color:#74879a;
  font-size:10px;
  font-weight:700;
  line-height:1.25;
  letter-spacing:.11em;
  text-transform:uppercase;
  transition:color .2s ease;
}
.side-menu button.active .nav-label-en,
.side-menu button:hover .nav-label-en{
  color:#486b8d;
}
.tab-panel > h2 .section-heading-copy,
.tab-panel h3 .section-heading-copy{
  display:inline-flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
}
.section-heading-zh{
  display:block;
  color:inherit;
  font-size:inherit;
  font-weight:inherit;
  line-height:inherit;
}
.section-heading-en{
  display:block;
  color:#667d92;
  font-size:11px;
  font-weight:700;
  line-height:1.25;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.tab-panel h3 .section-heading-en{
  font-size:10px;
  letter-spacing:.11em;
}
@media (max-width:900px){
  .side-menu button .nav-label-en{font-size:9px;letter-spacing:.09em}
  .section-heading-en{font-size:10px;letter-spacing:.11em}
}


/* v4.8.46: philosophy cards — outline SVG icon trial */
.icon-card-symbol .icon-card-outline{
  width:44px;
  height:44px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:1.65;
  stroke-linecap:round;
  stroke-linejoin:round;
  color:#2f6ea5;
  transition:color .3s ease,transform .3s ease;
}
.icon-card:hover .icon-card-outline{
  color:#1e5a91;
  transform:translateY(-2px);
}


/* v4.8.47 — unified Steel Blue circular card icons */
.icon-card-symbol,
.policy-card-icon{
  width:58px !important;
  height:58px !important;
  flex:0 0 58px;
  border-radius:50% !important;
  background:linear-gradient(135deg,#3e6f99 0%,#244f75 100%) !important;
  color:#fff !important;
  box-shadow:0 10px 24px rgba(36,79,117,.23) !important;
  transition:transform .28s ease,background .28s ease,box-shadow .28s ease !important;
}
.icon-card-symbol .icon-card-outline,
.policy-card-icon .card-circle-svg{
  width:30px;
  height:30px;
  display:block;
  fill:none;
  stroke:#fff !important;
  color:#fff !important;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:transform .28s ease !important;
}
.icon-card:hover .icon-card-symbol,
.policy-card:hover .policy-card-icon{
  background:linear-gradient(135deg,#315f87 0%,#173f64 100%) !important;
  transform:translateY(-2px);
  box-shadow:0 13px 28px rgba(36,79,117,.30) !important;
}
.icon-card:hover .icon-card-outline,
.policy-card:hover .card-circle-svg{
  color:#fff !important;
  stroke:#fff !important;
  transform:scale(1.04);
}

/* v4.8.53 — Product detail photography */
.product-detail-redesign .technology-card__media{
  grid-column:1/-1;
  margin:0;
  padding:26px 30px 0;
  background:#fff;
}
.product-detail-redesign .technology-card__media img{
  display:block;
  width:100%;
  aspect-ratio:3/2;
  object-fit:cover;
  object-position:center;
  border:1px solid #d6e1ea;
  border-radius:16px;
  background:#eef2f5;
  box-shadow:0 14px 30px rgba(15,31,51,.10);
}
.product-detail-redesign .technology-card__media figcaption{
  margin:10px 2px 0;
  color:#65778a;
  font-size:.82rem;
  line-height:1.6;
}
@media(max-width:760px){
  .product-detail-redesign .technology-card__media{padding:20px 20px 0}
  .product-detail-redesign .technology-card__media img{border-radius:12px}
}

/* v4.8.54 — Compact technical photography layout */
.product-detail-redesign .technology-card__body--with-media{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(300px,38%);
  align-items:stretch;
  gap:0;
}
.product-detail-redesign .technology-card__content{
  display:grid;
  grid-template-columns:1fr;
  min-width:0;
}
.product-detail-redesign .technology-card__content>div{
  padding:28px 30px;
  background:#fff;
}
.product-detail-redesign .technology-card__content>div+div{
  border-top:1px solid #d9e3ec;
}
.product-detail-redesign .technology-card__body--with-media .technology-card__media{
  grid-column:auto;
  grid-row:auto;
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
  margin:0;
  padding:28px 30px 28px 0;
  border-left:0;
  background:#fff;
}
.product-detail-redesign .technology-card__body--with-media .technology-card__media img{
  width:100%;
  max-width:420px;
  max-height:300px;
  margin-left:auto;
  aspect-ratio:4/3;
  object-fit:cover;
  object-position:center;
  border-radius:14px;
  box-shadow:0 12px 28px rgba(15,31,51,.09);
  transition:transform .28s ease,box-shadow .28s ease;
}
.product-detail-redesign .technology-card__body--with-media .technology-card__media:hover img{
  transform:scale(1.015);
  box-shadow:0 16px 34px rgba(15,31,51,.12);
}
.product-detail-redesign .technology-card__body--with-media .technology-card__media figcaption{
  width:100%;
  max-width:420px;
  margin:10px 0 0 auto;
}
@media(max-width:900px){
  .product-detail-redesign .technology-card__body--with-media{
    grid-template-columns:1fr;
  }
  .product-detail-redesign .technology-card__body--with-media .technology-card__media{
    padding:0 30px 30px;
  }
  .product-detail-redesign .technology-card__body--with-media .technology-card__media img,
  .product-detail-redesign .technology-card__body--with-media .technology-card__media figcaption{
    max-width:520px;
    margin-left:0;
  }
}
@media(max-width:760px){
  .product-detail-redesign .technology-card__content>div{
    padding:24px 22px 26px;
  }
  .product-detail-redesign .technology-card__body--with-media .technology-card__media{
    padding:0 22px 24px;
  }
  .product-detail-redesign .technology-card__body--with-media .technology-card__media img{
    max-width:none;
    max-height:260px;
    border-radius:12px;
  }
}
@media(prefers-reduced-motion:reduce){
  .product-detail-redesign .technology-card__body--with-media .technology-card__media img{
    transition:none;
  }
  .product-detail-redesign .technology-card__body--with-media .technology-card__media:hover img{
    transform:none;
  }
}


/* v4.8.55 — Compact two-photo technical gallery */
.product-detail-redesign .technology-card__body--with-gallery{
  display:block;
  background:#fff;
}
.product-detail-redesign .technology-card__content--two-column{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  border-bottom:1px solid #d9e3ec;
}
.product-detail-redesign .technology-card__content--two-column>div{
  padding:28px 30px;
  background:#fff;
}
.product-detail-redesign .technology-card__content--two-column>div+div{
  border-left:1px solid #d9e3ec;
}
.product-detail-redesign .technology-card__gallery{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,360px));
  justify-content:center;
  gap:22px;
  padding:28px 30px 30px;
  background:linear-gradient(180deg,#fbfdff 0%,#f5f8fb 100%);
}
.product-detail-redesign .technology-card__gallery-item{
  min-width:0;
  margin:0;
  padding:10px;
  border:1px solid #d7e2eb;
  border-radius:16px;
  background:#fff;
  box-shadow:0 10px 24px rgba(15,31,51,.08);
  overflow:hidden;
}
.product-detail-redesign .technology-card__gallery-item img{
  display:block;
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  object-position:center;
  border-radius:11px;
  background:#edf2f6;
  transition:transform .28s ease;
}
.product-detail-redesign .technology-card__gallery-item:first-child img{
  object-position:center 48%;
}
.product-detail-redesign .technology-card__gallery-item figcaption{
  margin:10px 4px 0;
  color:#5f7285;
  font-size:.82rem;
  line-height:1.5;
  text-align:center;
}
.product-detail-redesign .technology-card__gallery-item:hover img{
  transform:scale(1.018);
}
@media(max-width:760px){
  .product-detail-redesign .technology-card__content--two-column{
    grid-template-columns:1fr;
  }
  .product-detail-redesign .technology-card__content--two-column>div{
    padding:24px 22px 26px;
  }
  .product-detail-redesign .technology-card__content--two-column>div+div{
    border-left:0;
    border-top:1px solid #d9e3ec;
  }
  .product-detail-redesign .technology-card__gallery{
    grid-template-columns:1fr;
    gap:16px;
    padding:22px;
  }
  .product-detail-redesign .technology-card__gallery-item{
    max-width:520px;
    width:100%;
    justify-self:start;
    border-radius:14px;
  }
}
@media(prefers-reduced-motion:reduce){
  .product-detail-redesign .technology-card__gallery-item img{transition:none}
  .product-detail-redesign .technology-card__gallery-item:hover img{transform:none}
}


/* v4.8.58 — Thermal-control PVB structure diagram */
.product-detail-redesign .technology-card__body--with-diagram{
  display:block;
  background:#fff;
}
.product-detail-redesign .technology-card__body--with-diagram .technology-card__content--two-column{
  border-bottom:1px solid #d9e3ec;
}
.product-detail-redesign .technology-card__diagram{
  margin:0;
  padding:28px 30px 30px;
  background:linear-gradient(180deg,#fbfdff 0%,#f5f8fb 100%);
  text-align:center;
}
.product-detail-redesign .technology-card__diagram img{
  display:block;
  width:min(100%,900px);
  height:auto;
  margin:0 auto;
  object-fit:contain;
  border-radius:12px;
  background:#fff;
  box-shadow:0 10px 24px rgba(15,31,51,.07);
}
@media(max-width:760px){
  .product-detail-redesign .technology-card__diagram{
    padding:18px 16px 20px;
    overflow:visible;
  }
  .product-detail-redesign .technology-card__diagram img{
    display:block;
    width:100%;
    max-width:900px;
    min-width:0;
    height:auto;
    margin:0 auto;
    border-radius:10px;
  }
}

/* v4.8.79 — Wide tool-box photo with softly extended background */
.product-detail-redesign #tech-2 .technology-card__gallery-item--wide img{
  object-fit:cover;
  object-position:center;
  background:#edf2f6;
}

/* v4.8.83 — Separate product-photo and technical-diagram image scales */
.product-detail-redesign .technology-card__diagram--product{
  width:min(100%,360px);
  margin:0 auto;
  padding:10px;
  border:1px solid #d7e2eb;
  border-radius:16px;
  background:#fff;
  box-shadow:0 10px 24px rgba(15,31,51,.08);
}
.product-detail-redesign .technology-card__diagram--product img{
  width:100%;
  max-width:none;
  aspect-ratio:4/3;
  object-fit:contain;
  border-radius:11px;
  box-shadow:none;
}
@media(max-width:760px){
  .product-detail-redesign .technology-card__diagram--product{
    width:100%;
    max-width:520px;
    padding:10px;
    border-radius:14px;
  }
  .product-detail-redesign .technology-card__diagram--product img{
    width:100%;
    max-width:none;
    border-radius:10px;
  }
}

/* v4.8.84 — Match single-product photo interaction to two-photo gallery */
.product-detail-redesign .technology-card__diagram--product img{
  transition:transform .28s ease;
}
.product-detail-redesign .technology-card__diagram--product:hover img{
  transform:scale(1.018);
}
@media (hover:none), (pointer:coarse), (prefers-reduced-motion:reduce){
  .product-detail-redesign .technology-card__diagram--product img{
    transition:none;
  }
  .product-detail-redesign .technology-card__diagram--product:hover img{
    transform:none;
  }
}

/* v4.8.85 — Single-product photos reuse the exact two-photo gallery structure */
.product-detail-redesign .technology-card__gallery--single{
  grid-template-columns:minmax(0,360px);
  justify-content:center;
}
.product-detail-redesign .technology-card__gallery--single .technology-card__gallery-item{
  width:100%;
  justify-self:center;
}
@media(max-width:760px){
  .product-detail-redesign .technology-card__gallery--single{
    grid-template-columns:1fr;
  }
  .product-detail-redesign .technology-card__gallery--single .technology-card__gallery-item{
    justify-self:center;
  }
}


/* ===== v4.8.89 Breadcrumb current-page cleanup ===== */
.breadcrumb-list .current{
  color:var(--ys-primary, #123a63) !important;
  font-weight:700 !important;
}
.breadcrumb-list .current::before{
  content:none !important;
  display:none !important;
}
.breadcrumb-list .breadcrumb-separator{
  color:#aab5c2 !important;
  font-family:inherit;
  font-size:1em;
  font-weight:500;
  line-height:1;
}


/* ===== v4.8.95 Technical-diagram lightbox ===== */
.product-detail-redesign .technology-card__diagram:not(.technology-card__diagram--product) img{
  cursor:zoom-in;
}
.product-detail-redesign .technology-card__diagram:not(.technology-card__diagram--product) img:focus-visible{
  outline:3px solid rgba(18,58,99,.34);
  outline-offset:4px;
}
.tech-diagram-lightbox{
  position:fixed;
  inset:0;
  z-index:10000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:28px;
  background:rgba(3,12,22,.88);
  backdrop-filter:blur(5px);
}
.tech-diagram-lightbox.is-open{display:flex}
.tech-diagram-lightbox__viewport{
  position:relative;
  max-width:100%;
  max-height:100%;
  overflow:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.tech-diagram-lightbox__image{
  display:block;
  width:auto;
  height:auto;
  max-width:94vw;
  max-height:88vh;
  margin:auto;
  border-radius:10px;
  background:#fff;
  box-shadow:0 24px 70px rgba(0,0,0,.42);
  touch-action:pinch-zoom;
  user-select:none;
  -webkit-user-drag:none;
}
.tech-diagram-lightbox__close{
  position:fixed;
  top:max(16px,env(safe-area-inset-top));
  right:max(16px,env(safe-area-inset-right));
  z-index:2;
  width:46px;
  height:46px;
  border:1px solid rgba(255,255,255,.45);
  border-radius:50%;
  background:rgba(8,21,34,.72);
  color:#fff;
  font-size:28px;
  line-height:1;
  cursor:pointer;
}
.tech-diagram-lightbox__close:hover{background:rgba(18,58,99,.92)}
body.tech-diagram-lightbox-open{overflow:hidden}
@media(max-width:760px){
  .tech-diagram-lightbox{
    padding:58px 10px 16px;
    align-items:flex-start;
  }
  .tech-diagram-lightbox__viewport{
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .tech-diagram-lightbox__image{
    max-width:100%;
    max-height:calc(100vh - 88px);
    border-radius:7px;
  }
}
@media(prefers-reduced-motion:reduce){
  .tech-diagram-lightbox{backdrop-filter:none}
}


/* ===== v4.8.96 Home Interior & NVH static white-model scene ===== */
.home-products .interior-showcase--static{
  pointer-events:none;
}
.home-products .interior-showcase--static .interior-showcase__stage{
  overflow:visible;
  background:transparent;
  border-radius:0;
}
.home-products .interior-showcase--static .interior-showcase__render{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  transform:none;
  filter:drop-shadow(0 22px 28px rgba(18,58,99,.10));
}
@media(max-width:980px){
  .home-products .interior-showcase--static .interior-showcase__render{transform:none;}
}

/* V4.8.98 - Static safety equipment white-model scene on home product showcase */
.home-products .safety-equipment-showcase .interior-showcase__stage{
  overflow:hidden;
  border-radius:18px;
}
.home-products .safety-equipment-showcase .interior-showcase__render{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  transform:none;
  filter:none;
}
@media(max-width:620px){
  .home-products .safety-equipment-showcase .interior-showcase__stage{border-radius:12px;}
}


/* ===== Unified eight-system footer product navigation ===== */
.footer-products-col{min-width:0;}
.footer-product-links{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:18px;
  row-gap:0;
}
.footer-product-links a{
  line-height:1.45;
  overflow-wrap:anywhere;
}
.footer-products-all{
  margin-top:14px !important;
  color:#fff !important;
  font-weight:600;
}
@media(max-width:1180px){
  .footer-grid-v2{grid-template-columns:1.15fr .65fr 1.35fr 1fr;gap:28px;}
}
@media(max-width:980px){
  .footer-product-links{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:640px){
  .footer-product-links{grid-template-columns:1fr;}
}


/* v4.8.122 compact footer */
.footer-compact{padding-top:42px;}
.footer-grid-compact{grid-template-columns:1.25fr .72fr .62fr 1.2fr;gap:34px;padding-bottom:30px;}
.footer-grid-compact .footer-brand-col p{max-width:390px;margin-bottom:0;}
.footer-grid-compact .footer-brand-col .footer-badges,
.footer-grid-compact .footer-product-links{display:none;}
.footer-grid-compact .footer-products-all{display:inline-flex;margin-top:0;}
.footer-grid-compact .footer-contact-item{margin-bottom:10px;}
.footer-grid-compact h4{margin-bottom:14px;}
.footer-grid-compact .footer-nav-col>a{display:block;margin-bottom:9px;}
.footer-compact .footer-bottom-v2{padding-top:18px;padding-bottom:20px;}
@media (max-width: 980px){
  .footer-grid-compact{grid-template-columns:1.15fr .85fr;gap:28px 38px;}
}
@media (max-width: 640px){
  .footer-compact{padding-top:32px;}
  .footer-grid-compact{grid-template-columns:1fr;gap:24px;padding-bottom:24px;}
  .footer-grid-compact .footer-brand-col p{max-width:none;}
  .footer-grid-compact .footer-contact-item{margin-bottom:8px;}
  .footer-compact .footer-bottom-v2{padding-top:16px;padding-bottom:18px;}
}

/* v4.8.124 — Product browser image-area inset
   Creates visible breathing space between the image area and card edges. */
.product-browser-panel .product-system-card__media {
  margin: 14px;
  min-height: calc(480px - 28px);
}

@media (max-width: 900px) {
  .product-browser-panel .product-system-card__media {
    margin: 12px;
    height: calc(310px - 24px);
    min-height: 0;
  }
}

@media (max-width: 600px) {
  .product-browser-panel .product-system-card__media {
    margin: 10px;
    height: calc(250px - 20px);
  }
}

/* v4.8.125 — Product browser media refinement
   Keep the existing inset and give the image area a restrained rounded finish. */
.product-browser-panel .product-system-card__media {
  border-radius: 12px;
  overflow: hidden;
}