/*
 * Site visual refresh for yujuwang.com.
 * This file is intentionally loaded after the legacy stylesheet so the
 * existing PHP templates and SEO content remain untouched.
 */
:root{
  --brand:#0f766e;
  --brand-2:#0891b2;
  --brand-3:#14b8a6;
  --accent:#f59e0b;
  --ink:#0f172a;
  --muted:#64748b;
  --soft:#f8fafc;
  --soft-2:#ecfeff;
  --line:#e2e8f0;
  --card:#ffffff;
  --radius:18px;
  --radius-lg:28px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.04),0 8px 22px rgba(15,23,42,.06);
  --shadow-md:0 16px 40px rgba(15,23,42,.10);
}

html{scroll-behavior:smooth}
body{
  color:var(--ink)!important;
  background:
    radial-gradient(circle at 12% 0%,rgba(8,145,178,.08),transparent 28rem),
    linear-gradient(180deg,#fff 0%,var(--soft) 42%,#fff 100%)!important;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",Arial,sans-serif!important;
  letter-spacing:.01em;
}
.container,
.page-banner .container{
  max-width:1180px!important;
  padding-left:24px!important;
  padding-right:24px!important;
}
a{transition:color .2s ease,background .2s ease,box-shadow .2s ease,transform .2s ease,border-color .2s ease}
img{display:inline-block}

/* Header */
.header{
  background:linear-gradient(135deg,#0f766e 0%,#0e7490 52%,#155e75 100%)!important;
  box-shadow:0 10px 30px rgba(15,23,42,.16)!important;
  border-bottom:1px solid rgba(255,255,255,.14);
  padding:12px 0!important;
}
.header-inner{
  justify-content:space-between!important;
  gap:14px!important;
}
.logo a{
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.14);
  border-radius:16px;
  padding:6px 10px 6px 8px;
}
.logo img{filter:drop-shadow(0 4px 10px rgba(0,0,0,.18))}
.logo span{font-size:21px!important;letter-spacing:.04em!important}
.nav{
  gap:6px!important;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  padding:5px;
}
.nav a{
  color:rgba(255,255,255,.92)!important;
  border-radius:999px!important;
  padding:7px 10px!important;
  font-size:13px!important;
  font-weight:700!important;
  text-shadow:none!important;
}
.nav a:hover,.nav a.active{
  background:#fff!important;
  color:#0f766e!important;
}
.nav-tel{border-left-color:rgba(255,255,255,.18)!important}
.nav-btn,.header-btn{
  background:#f59e0b!important;
  color:#111827!important;
  border:none!important;
  border-radius:999px!important;
  box-shadow:0 8px 20px rgba(245,158,11,.24);
}
.lang-switch{
  display:flex;
  align-items:center;
  gap:4px;
  padding:4px;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.14);
  flex-shrink:0;
}
.lang-switch a{
  color:#fff!important;
  font-size:12px!important;
  font-weight:800!important;
  line-height:1;
  padding:7px 8px!important;
  border-radius:999px!important;
}
.lang-switch a:hover{
  background:#fff!important;
  color:#0f766e!important;
}
.mobile-menu-btn{
  width:42px;height:42px;align-items:center;justify-content:center;
  border-radius:12px;background:rgba(255,255,255,.12)!important;
}
.mobile-nav{
  background:#0f766e!important;
  box-shadow:0 16px 28px rgba(15,23,42,.16);
}
.mobile-nav a{border-bottom:1px solid rgba(255,255,255,.10)}
.mobile-language-links{display:grid!important;grid-template-columns:repeat(3,1fr);gap:8px;padding:10px 14px;border-top:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.14)}
.mobile-language-links a{text-align:center!important;border:1px solid rgba(255,255,255,.22)!important;border-radius:8px!important;padding:8px 4px!important;font-size:13px!important}

/* Banners */
.kv-banner,.page-banner{
  position:relative;
  isolation:isolate;
  background:
    radial-gradient(circle at 82% 18%,rgba(20,184,166,.28),transparent 22rem),
    radial-gradient(circle at 16% 16%,rgba(245,158,11,.15),transparent 18rem),
    linear-gradient(135deg,#f8fafc 0%,#ecfeff 45%,#cffafe 100%)!important;
  color:var(--ink)!important;
  padding:88px 0 76px!important;
  overflow:hidden;
}
.kv-banner:before,.page-banner:before{
  content:"";
  position:absolute;
  inset:auto -8rem -10rem auto;
  width:28rem;height:28rem;
  border-radius:999px;
  background:rgba(8,145,178,.10);
  z-index:-1;
}
.kv-banner h1,.page-banner h1{
  max-width:900px;
  margin-left:auto!important;
  margin-right:auto!important;
  color:#0f172a!important;
  font-size:clamp(34px,5vw,58px)!important;
  line-height:1.12!important;
  letter-spacing:-.04em!important;
  text-shadow:none!important;
}
.kv-banner p,.page-banner p{
  max-width:760px;
  margin-left:auto!important;
  margin-right:auto!important;
  color:#475569!important;
  font-size:clamp(16px,2vw,20px)!important;
  font-weight:500!important;
  line-height:1.8!important;
}
.page-banner{padding:54px 0 46px!important}
.page-banner h1{font-size:clamp(28px,4vw,42px)!important}

/* Generic sections */
.section,section{scroll-margin-top:92px}
.section{padding:72px 0!important}
section[style*="background:#FAFAF5"],
section[style*="background:#FAFAFA"],
div[style*="background:#FAFAF5"]{
  background:var(--soft)!important;
}
section[style*="padding:64px 0"],
section[style*="padding:60px 0"],
section[style*="padding:68px 0"],
section[style*="padding:72px 0"]{
  padding-top:72px!important;
  padding-bottom:72px!important;
}
.section-title{margin-bottom:34px!important}
.section-title h2,
section h2[style],
.related-title{
  color:#0f172a!important;
  letter-spacing:-.03em!important;
}
.section-title h2{font-size:clamp(26px,3vw,38px)!important}
.section-title p,
section p[style*="font-size:14px"],
section p[style*="font-size:15px"]{
  color:var(--muted)!important;
}

/* Cards and panels */
.feature-card,.strength-card,.advantage-card,
.news-card,.case-card,.contact-card,.custom-adv-card,
.product-card,
.faq-item,
.cat-card,
.adv-card,
div[style*="box-shadow:0 2px 12px"],
div[style*="box-shadow:0 2px 16px"],
div[style*="box-shadow:0 4px 24px"],
a[style*="box-shadow:0 2px 12px"],
a[style*="box-shadow:0 2px 8px"]{
  background:var(--card)!important;
  border:1px solid rgba(226,232,240,.9)!important;
  border-radius:var(--radius)!important;
  box-shadow:var(--shadow-sm)!important;
}
.feature-card:hover,.strength-card:hover,.advantage-card:hover,
.news-card:hover,.case-card:hover,.contact-card:hover,
.product-card:hover,
a[style*="box-shadow:0 2px 12px"]:hover,
a[style*="box-shadow:0 2px 8px"]:hover{
  transform:translateY(-4px)!important;
  box-shadow:var(--shadow-md)!important;
}
div[style*="border-left:4px solid"],
div[style*="border-top:4px solid"],
.news-card,.case-card{
  border-top:1px solid rgba(226,232,240,.9)!important;
  border-left:1px solid rgba(226,232,240,.9)!important;
}

/* Buttons */
.btn,.btn-primary,.btn-white,.btn-cta-home,.btn-cta-green,.custom-cta-btn,
a[href="/contact.html"][style*="padding"],
a[href="/news.html"][style*="padding"],
a[href="/faq.html"][style*="padding"]{
  border-radius:999px!important;
  font-weight:800!important;
}
.btn-primary,.btn-cta-home,.btn-cta-green,.custom-cta-btn{
  background:linear-gradient(135deg,#0f766e,#0891b2)!important;
  color:#fff!important;
  border:0!important;
  box-shadow:0 12px 28px rgba(8,145,178,.24)!important;
}
.btn-primary:hover,.btn-cta-home:hover,.btn-cta-green:hover,.custom-cta-btn:hover{
  transform:translateY(-2px)!important;
  box-shadow:0 16px 34px rgba(8,145,178,.30)!important;
}
.btn-white{
  background:#fff!important;
  color:#0f766e!important;
}

/* Product grids */
.product-grid,.page-product-grid{
  gap:18px!important;
}
.page-product-grid{
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr))!important;
}
.product-card{
  overflow:hidden!important;
  padding:12px!important;
  text-align:left!important;
}
.product-card .card-img,
.product-card img.card-img{
  border-radius:14px!important;
  background:#f1f5f9;
  margin-bottom:10px!important;
}
.card-title{
  color:#0f172a!important;
  font-size:14px!important;
  line-height:1.55!important;
  min-height:43px;
}
.card-sku{
  color:var(--muted)!important;
  font-size:12px!important;
}
.sub-cats{
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  padding:12px;
  gap:8px!important;
  box-shadow:var(--shadow-sm);
}
.tab-btn{
  background:#f1f5f9!important;
  color:#0f766e!important;
  border:1px solid transparent;
  border-radius:999px!important;
}
.tab-btn:hover,.tab-btn.active{
  background:#0f766e!important;
  color:#fff!important;
}

/* Case and article list cards built with inline styles */
a[href^="/case-"][style*="display:flex"],
a[href^="/news-"][style*="display:flex"]{
  align-items:stretch!important;
  border-radius:18px!important;
  padding:14px!important;
}
a[href^="/case-"][style*="display:flex"] > div:first-child,
a[href^="/news-"][style*="display:flex"] > div:first-child{
  width:180px!important;
  height:auto!important;
  min-height:120px!important;
  border-radius:14px!important;
}
a[href^="/case-"] h3,
a[href^="/news-"] h3{
  color:#0f172a!important;
  line-height:1.5!important;
  white-space:normal!important;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}

/* Product detail */
.product-wrap{
  background:linear-gradient(180deg,#f8fafc 0%,#fff 100%)!important;
}
.main-container{
  max-width:1180px!important;
  margin:0 auto!important;
  padding:18px 24px 44px!important;
}
.product-layout{
  gap:30px!important;
  align-items:flex-start!important;
}
.main-image-frame{
  border-radius:22px!important;
  background:#f8fafc!important;
  border:1px solid var(--line)!important;
}
.thumb-item{border-radius:12px!important}
.product-title{
  color:#0f172a!important;
  font-size:clamp(24px,3vw,36px)!important;
  line-height:1.25!important;
  letter-spacing:-.03em!important;
}
.tag-direct,.status-badge{
  border-radius:999px!important;
}
.attr-list,.desc-block,.content-verification-note{
  border-radius:18px!important;
  border-color:var(--line)!important;
  background:#fff!important;
}
.attr-row{border-color:#eef2f7!important}
.desc-section-title,.desc-title{
  color:#0f766e!important;
}
.related-section{max-width:1180px!important}

/* Pagination */
.pagination{gap:10px!important}
.page-btn,
.pagination a,
.pagination span{
  border-radius:999px!important;
  border:1px solid var(--line)!important;
  box-shadow:var(--shadow-sm)!important;
}
.page-btn.active,
.pagination .current{
  background:#0f766e!important;
  color:#fff!important;
}

/* Footer and floating actions */
.footer{
  background:linear-gradient(135deg,#0f172a 0%,#134e4a 100%)!important;
  color:#cbd5e1!important;
  padding:42px 0 22px!important;
}
.footer a{color:#e2e8f0!important}
.footer a:hover{color:#67e8f9!important}
.footer-bottom{border-top-color:rgba(255,255,255,.12)!important}
.float-buttons{right:22px!important;bottom:22px!important}
.float-btn{
  background:linear-gradient(135deg,#0f766e,#0891b2)!important;
  box-shadow:0 12px 28px rgba(8,145,178,.28)!important;
}

/* Mobile */
@media(max-width:1024px){
  .nav{display:none!important}
  .lang-switch{display:none!important}
  .mobile-menu-btn{display:flex!important}
  .header-inner{justify-content:space-between!important}
}
@media(max-width:768px){
  .container,.page-banner .container{padding-left:16px!important;padding-right:16px!important}
  .header{padding:10px 0!important}
  .logo a{padding:5px 8px!important}
  .logo img{width:36px!important;height:36px!important}
  .logo span{font-size:17px!important}
  .kv-banner{padding:54px 0 46px!important;text-align:left!important}
  .page-banner{padding:40px 0 34px!important;text-align:left!important}
  .kv-banner h1,.kv-banner p,.page-banner h1,.page-banner p{margin-left:0!important;margin-right:0!important}
  .section,section[style*="padding"]{padding-top:44px!important;padding-bottom:44px!important}
  div[style*="grid-template-columns:repeat(2"],
  div[style*="grid-template-columns:repeat(3"],
  div[style*="grid-template-columns:repeat(4"],
  div[style*="grid-template-columns:repeat(7"]{
    grid-template-columns:1fr!important;
  }
  .features-grid,.strength-grid,.advantage-grid,.news-grid,.case-grid,.custom-advantage-grid{
    grid-template-columns:1fr!important;
  }
  .product-grid,.page-product-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:12px!important;
  }
  .product-card{padding:10px!important;border-radius:14px!important}
  .card-title{font-size:13px!important;min-height:auto}
  a[href^="/case-"][style*="display:flex"],
  a[href^="/news-"][style*="display:flex"]{
    flex-direction:column!important;
  }
  a[href^="/case-"][style*="display:flex"] > div:first-child,
  a[href^="/news-"][style*="display:flex"] > div:first-child{
    width:100%!important;
    height:180px!important;
  }
  .main-container{padding:10px 12px 34px!important}
  .product-layout{display:block!important}
  .float-buttons{right:14px!important;bottom:14px!important}
}
@media(max-width:480px){
  .kv-banner h1{font-size:30px!important}
  .page-banner h1{font-size:26px!important}
  .product-grid,.page-product-grid{grid-template-columns:1fr 1fr!important}
}