/**
 * Guowei Chemical — visual theme enhancements
 * Industrial blue palette for chemical industry branding.
 */

:root {
  --gw-green: #58b2dc;
  --gw-green-dark: #3a8fb7;
  --gw-green-deep: #1e4a6b;
  --gw-teal: #2e7a9e;
  --gw-teal-light: #7cc9e8;
  --gw-gold: #d4a017;
  --gw-bg-soft: #eef6fa;
  --gw-bg-section: #e0eef6;
  --gw-shadow: 0 8px 28px rgba(58, 143, 183, 0.12);
  --gw-shadow-hover: 0 16px 40px rgba(58, 143, 183, 0.2);
  --gw-gradient-brand: linear-gradient(135deg, #0f2d42 0%, #1e4a6b 35%, #58b2dc 70%, #7cc9e8 100%);
  --gw-gradient-header: linear-gradient(180deg, #ffffff 0%, #f0f8fc 100%);
  --gw-gradient-cta: linear-gradient(135deg, #0f2d42 0%, #1e4a6b 45%, #3a8fb7 100%);
}

body {
  color: #444;
  background: linear-gradient(180deg, #f6fafc 0%, #eef4f8 100%);
  background-attachment: fixed;
}

/* ── Header ── */
.header.header-hover {
  background: var(--gw-gradient-header) !important;
  box-shadow: 0 2px 16px rgba(30, 74, 107, 0.08) !important;
  border-bottom: none !important;
}

.header.header-hover::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gw-green-dark), var(--gw-green), var(--gw-teal-light), var(--gw-green), var(--gw-green-dark));
  background-size: 200% 100%;
  animation: gw-shimmer 6s linear infinite;
}

@keyframes gw-shimmer {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

.nav ul li.on a,
.nav ul li a:hover {
  color: var(--gw-green) !important;
}

/* ── Section titles ── */
.index-title span {
  font-weight: 700;
  background: linear-gradient(135deg, var(--gw-green-deep) 0%, var(--gw-green) 55%, var(--gw-teal-light) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 0.02em;
}

.index-title {
  position: relative;
  padding-bottom: 18px;
}

.index-title::after {
  content: "";
  display: block;
  width: 64px;
  height: 4px;
  margin: 14px auto 0;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--gw-green), var(--gw-gold), var(--gw-teal-light));
}

/* ── Homepage sections ── */
.section02 {
  background: linear-gradient(180deg, var(--gw-bg-section) 0%, #f0f5f8 100%) !important;
}

.section03 {
  background: linear-gradient(180deg, #fff 0%, var(--gw-bg-soft) 100%) !important;
}

.section04 {
  background: linear-gradient(180deg, var(--gw-bg-soft) 0%, #fff 100%) !important;
}

/* Product / case cards */
.index-case ul li,
.index-case .item,
.product-carousel__track > .item {
  box-shadow: var(--gw-shadow);
  border: 1px solid rgba(88, 178, 220, 0.12);
  transition: box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}

.index-case ul li:hover,
.product-carousel__track > .item:hover {
  box-shadow: var(--gw-shadow-hover);
  border-color: rgba(88, 178, 220, 0.35);
}

.index-case ul li .pic {
  border-bottom: 3px solid var(--gw-green);
}

.index-news .item {
  border: 1px solid rgba(88, 178, 220, 0.1);
  box-shadow: var(--gw-shadow);
}

.index-news .item:hover {
  box-shadow: var(--gw-shadow-hover);
  border-color: rgba(88, 178, 220, 0.3);
}

.index-news .item .tmain .title {
  color: #1a3d52;
}

.index-news .item .tmain .more {
  font-weight: 600;
  padding-bottom: 2px;
}

/* Client logos strip */
.index-kehu ul li {
  border-color: rgba(88, 178, 220, 0.15) !important;
  background: #fff;
  transition: background 0.25s ease;
}

.index-kehu ul li:hover {
  background: #f0f8fc;
}

/* ── Inner page banners ── */
.contain > .nybanner.page-banner {
  background: var(--gw-gradient-brand) !important;
  position: relative;
  overflow: hidden;
}

.contain > .nybanner.page-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 80%, rgba(124, 201, 232, 0.25) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(46, 122, 158, 0.2) 0%, transparent 45%);
  pointer-events: none;
}

.contain > .nybanner.page-banner .ny-title h1,
.contain > .nybanner.page-banner .ny-title h2 {
  color: #fff !important;
  font-weight: 700;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
  letter-spacing: 0.06em;
}

.contain > .nybanner.page-banner .ny-title h3 {
  color: rgba(255, 255, 255, 0.88) !important;
  font-weight: 400;
}

/* Product detail title accent */
.contain.product-detail > .news-warp .news-title {
  border-bottom-color: rgba(88, 178, 220, 0.25);
}

.contain.product-detail > .news-warp .news-title h1 {
  color: var(--gw-green-deep);
}

.contain.product-detail > .news-warp .news-title .tou::before {
  content: "";
  display: block;
  width: 48px;
  height: 4px;
  background: var(--gw-gradient-brand);
  border-radius: 2px;
  margin-bottom: 12px;
}

/* ── CTA / inquiry form ── */
.gf-demand {
  background: var(--gw-gradient-cta) !important;
  position: relative;
  overflow: hidden;
}

.gf-demand::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -10%;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124, 201, 232, 0.15) 0%, transparent 70%);
  pointer-events: none;
}

.gf-demand .h2,
.gf-demand .h3 {
  color: #fff !important;
  position: relative;
}

.gf-demand .italic {
  color: rgba(255, 255, 255, 0.75) !important;
}

.gf-demand .inquiry-form__note {
  color: rgba(255, 255, 255, 0.75) !important;
  position: relative;
}

.gf-demand .write input {
  background: rgba(255, 255, 255, 0.95) !important;
  border: 2px solid transparent;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.gf-demand .write input:focus {
  border-color: var(--gw-gold);
  box-shadow: 0 0 0 3px rgba(212, 160, 23, 0.25);
}

.gf-demand .write .submit {
  background: linear-gradient(135deg, var(--gw-gold) 0%, #e8b923 100%) !important;
  border-color: var(--gw-gold) !important;
  color: var(--gw-green-deep) !important;
  font-weight: 700;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.gf-demand .write .submit:hover {
  background: #fff !important;
  color: var(--gw-green-dark) !important;
  border-color: #fff !important;
}

/* ── Product network grid ── */
.product-network {
  background: linear-gradient(180deg, #e8f2f8 0%, #f5f9fc 100%) !important;
}

.product-network__grid li a {
  background: linear-gradient(145deg, #fff 0%, #f0f8fc 100%) !important;
  border: 1px solid rgba(88, 178, 220, 0.2) !important;
  box-shadow: 0 4px 14px rgba(46, 122, 158, 0.08);
}

.product-network__grid li a:hover {
  background: var(--gw-gradient-brand) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: var(--gw-shadow-hover);
}

.product-network__grid li a:hover em {
  color: rgba(255, 255, 255, 0.85) !important;
}

.product-microsite-link {
  background: linear-gradient(135deg, rgba(88, 178, 220, 0.08) 0%, rgba(46, 122, 158, 0.08) 100%) !important;
  border-left: 3px solid var(--gw-green) !important;
}

/* ── Company intro & videos ── */
.company-intro {
  background: linear-gradient(180deg, #fff 0%, var(--gw-bg-soft) 50%, #fff 100%) !important;
}

.company-intro__highlights li {
  background: linear-gradient(145deg, #fff, #f0f8fc) !important;
  border: 1px solid rgba(88, 178, 220, 0.15) !important;
  box-shadow: 0 4px 12px rgba(46, 122, 158, 0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.company-intro__highlights li:hover {
  transform: translateY(-3px);
  box-shadow: var(--gw-shadow);
}

.company-intro__highlights li strong {
  color: var(--gw-green-deep) !important;
}

.home-videos {
  background: linear-gradient(180deg, var(--gw-bg-soft) 0%, #fff 100%) !important;
}

.home-videos__item {
  border-color: rgba(88, 178, 220, 0.2) !important;
  box-shadow: var(--gw-shadow) !important;
}

.home-videos__title {
  color: var(--gw-green-deep) !important;
}

/* ── FAQ ── */
.geo-faq {
  background: linear-gradient(180deg, #fff 0%, var(--gw-bg-soft) 100%) !important;
}

.geo-faq__item {
  border-left: 4px solid var(--gw-green) !important;
  background: #fff !important;
  box-shadow: 0 2px 12px rgba(46, 122, 158, 0.06);
  transition: box-shadow 0.25s ease;
}

.geo-faq__item:hover {
  box-shadow: var(--gw-shadow);
}

.geo-faq__item dt {
  color: var(--gw-green-deep) !important;
}

/* ── Footer ── */
.site-network-footer {
  background: linear-gradient(160deg, #0a1f2e 0%, #1e4a6b 40%, #2e7a9e 100%) !important;
}

.site-network-footer__heading {
  color: #7cc9e8 !important;
}

.site-network-footer a:hover {
  color: #fcd34d !important;
}

/* ── Social float ── */
.social-float {
  box-shadow: 0 8px 24px rgba(30, 74, 107, 0.25);
  border-radius: 28px;
  overflow: hidden;
}

.social-float__link {
  transition: transform 0.2s ease, background 0.2s ease;
}

.social-float__link:hover {
  transform: scale(1.08);
}

/* ── Misc accents ── */
.product-card-microsite a {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  background: rgba(88, 178, 220, 0.1);
  transition: background 0.2s ease, color 0.2s ease;
}

.product-card-microsite a:hover {
  background: var(--gw-green);
  color: #fff !important;
  text-decoration: none;
}

.navigation a:hover,
.navigation a.on {
  color: var(--gw-green) !important;
}

.contain.product-detail > .news-warp .news-details a:not([class]) {
  color: var(--gw-green-dark);
  font-weight: 600;
}

.contain.product-detail > .news-warp .news-details a:not([class]):hover {
  color: var(--gw-teal);
}

@media screen and (max-width: 768px) {
  .header.header-hover::after {
    height: 2px;
  }

  .index-title span {
    font-size: 28px;
  }

  .contain > .nybanner.page-banner {
    padding: 32px 0 28px !important;
  }
}