:root{
  --blue-deep:#0a1a30;
  --blue-dark:#132a47;
  --blue:#1d3e6b;
  --blue-bright:#346a9e;
  --red:#d32f2f;
  --red-dark:#b71c1c;
  --gold:#ffe8b5;
  --gold-strong:#f1c40f;
  --white:#ffffff;
  --soft:#f5f8fe;
  --gray:#5a6f8a;
  --light:#eef3fa;
  --text:#1a2639;
  --border:rgba(10,26,48,.08);
  --shadow:0 18px 50px rgba(10,26,48,.12);
}

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

html{
  scroll-behavior:smooth;
}

body{
  font-family:Arial,"Microsoft YaHei",sans-serif;
  color:var(--text);
  background:#fbfdff;
  line-height:1.7;
}

a{
  color:inherit;
  text-decoration:none;
}

.container{
  width:min(1240px,92%);
  margin:auto;
}

.site-header{
  position:sticky;
  top:0;
  z-index:1000;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(10,26,48,.08);
}

.header-inner{
  width:min(1240px,92%);
  height:82px;
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
}

.brand{
  display:flex;
  align-items:center;
  gap:14px;
  flex-shrink:0;
}

.brand-logo{
  width:50px;
  height:50px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:var(--blue-deep);
  color:#fff;
  border:3px solid var(--red);
  font-size:22px;
  font-weight:900;
  box-shadow:0 8px 24px rgba(211,47,47,.22);
}

.brand-text strong{
  display:block;
  font-size:22px;
  color:var(--blue-deep);
  line-height:1.15;
}

.brand-text small{
  display:block;
  margin-top:3px;
  font-size:11px;
  color:var(--gray);
  letter-spacing:2px;
}

.nav{
  display:flex;
  align-items:center;
  gap:6px;
}

.nav a{
  padding:10px 18px;
  border-radius:999px;
  font-size:15px;
  color:var(--blue-dark);
  transition:.25s;
}

.nav a:hover,
.nav a.active{
  background:var(--red);
  color:#fff;
  box-shadow:0 8px 18px rgba(211,47,47,.22);
}

.menu-btn{
  display:none;
  border:none;
  background:var(--blue-deep);
  color:#fff;
  width:44px;
  height:44px;
  border-radius:12px;
  font-size:22px;
}

.hero-slider{
  position:relative;
  height:680px;
  overflow:hidden;
  background:var(--blue-deep);
  color:#fff;
}

.slide{
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
  transition:opacity .7s ease;
}

.slide.active{
  opacity:1;
  pointer-events:auto;
}

.slide-bg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
}

.slide-bg::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 76% 26%,rgba(211,47,47,.24),transparent 26%),
    linear-gradient(105deg,rgba(10,26,48,.96),rgba(19,42,71,.84),rgba(29,62,107,.55));
}

.slide-bg::after{
  content:"";
  position:absolute;
  right:-70px;
  bottom:-70px;
  width:520px;
  height:520px;
  border-radius:50%;
  border:90px solid rgba(255,255,255,.035);
}

.slide-bg-1{
  background:
    repeating-linear-gradient(135deg,rgba(255,232,181,.18) 0 18px,rgba(255,255,255,.05) 18px 34px,rgba(211,47,47,.12) 34px 52px),
    linear-gradient(135deg,#0a1a30,#1d3e6b);
}

.slide-bg-2{
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.12) 0 18px,rgba(255,232,181,.22) 18px 22px,rgba(211,47,47,.14) 22px 44px),
    linear-gradient(135deg,#0a1a30,#254b78);
}

.slide-bg-3{
  background:
    radial-gradient(circle at 20% 35%,rgba(255,232,181,.16) 0 12px,transparent 13px),
    radial-gradient(circle at 42% 64%,rgba(255,255,255,.10) 0 16px,transparent 17px),
    repeating-linear-gradient(45deg,rgba(255,232,181,.14) 0 20px,rgba(255,255,255,.06) 20px 40px),
    linear-gradient(135deg,#0a1a30,#1d3e6b);
}

.slide-inner{
  position:relative;
  z-index:2;
  width:min(1240px,92%);
  height:100%;
  margin:auto;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
}

.hero-badge{
  display:inline-block;
  background:linear-gradient(180deg,var(--red),var(--red-dark));
  color:#fff;
  padding:10px 28px;
  border-radius:0 0 16px 16px;
  font-weight:900;
  margin-bottom:28px;
  box-shadow:0 12px 30px rgba(211,47,47,.32);
}

.slide h1{
  font-size:76px;
  line-height:1.08;
  letter-spacing:.04em;
  color:var(--gold);
  text-shadow:0 8px 24px rgba(0,0,0,.35);
  max-width:780px;
}

.slide p{
  max-width:760px;
  margin-top:24px;
  font-size:22px;
  color:rgba(255,255,255,.82);
  line-height:1.9;
}

.hero-actions{
  display:flex;
  gap:18px;
  margin-top:38px;
  flex-wrap:wrap;
}

.btn{
  min-height:52px;
  padding:0 30px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  font-weight:800;
  transition:.25s;
}

.btn:hover{
  transform:translateY(-3px);
}

.btn-red{
  background:linear-gradient(135deg,var(--red),var(--red-dark));
  color:#fff;
  box-shadow:0 12px 30px rgba(211,47,47,.3);
}

.btn-outline{
  color:var(--gold);
  border:1px solid rgba(255,232,181,.5);
  background:rgba(255,255,255,.06);
}

.slider-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:5;
  width:54px;
  height:54px;
  border:none;
  border-radius:50%;
  background:rgba(255,255,255,.13);
  color:#fff;
  font-size:42px;
  line-height:1;
  cursor:pointer;
  transition:.25s;
}

.slider-arrow:hover{
  background:var(--red);
}

.slider-arrow.prev{
  left:32px;
}

.slider-arrow.next{
  right:32px;
}

.slider-dots{
  position:absolute;
  left:50%;
  bottom:34px;
  transform:translateX(-50%);
  z-index:5;
  display:flex;
  gap:12px;
}

.slider-dots button{
  width:12px;
  height:12px;
  border:none;
  border-radius:999px;
  background:rgba(255,255,255,.4);
  cursor:pointer;
  transition:.25s;
}

.slider-dots button.active{
  width:38px;
  background:var(--red);
}

.section{
  padding:88px 0;
}

.section-title{
  text-align:center;
  margin-bottom:52px;
}

.section-title span,
.about-label,
.contact-title span{
  display:inline-block;
  color:var(--red);
  font-size:13px;
  letter-spacing:3px;
  font-weight:900;
  margin-bottom:10px;
}

.section-title h2,
.about h2,
.contact-footer h2{
  font-size:42px;
  color:var(--blue-deep);
  line-height:1.25;
}

.section-title p{
  max-width:680px;
  margin:14px auto 0;
  color:var(--gray);
  font-size:17px;
}

.section-title.white span,
.section-title.white h2,
.section-title.white p{
  color:#fff;
}

.products{
  background:#fff;
}

.product-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
}

.product-card{
  background:var(--soft);
  border:1px solid var(--border);
  border-radius:24px;
  padding:30px 24px;
  transition:.25s;
  position:relative;
  overflow:hidden;
}

.product-card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:5px;
  background:linear-gradient(90deg,var(--red),var(--gold-strong));
  opacity:0;
  transition:.25s;
}

.product-card:hover{
  transform:translateY(-8px);
  background:#fff;
  box-shadow:var(--shadow);
}

.product-card:hover::before{
  opacity:1;
}

.product-icon{
  width:58px;
  height:58px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:18px;
  background:rgba(52,106,158,.1);
  color:var(--blue);
  font-size:30px;
  font-weight:900;
  margin-bottom:18px;
}

.product-card h3{
  color:var(--blue-deep);
  font-size:21px;
  margin-bottom:10px;
}

.product-card p{
  color:var(--gray);
  font-size:15px;
  min-height:104px;
}

.product-card a{
  display:inline-flex;
  margin-top:18px;
  color:var(--red);
  font-weight:800;
}

.samples{
  background:
    radial-gradient(circle at 80% 16%,rgba(211,47,47,.20),transparent 24%),
    linear-gradient(135deg,var(--blue-deep),var(--blue));
}

.sample-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:26px;
}

.sample-card{
  background:#fff;
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 20px 50px rgba(0,0,0,.16);
  transition:.25s;
}

.sample-card:hover{
  transform:translateY(-8px);
}

.sample-img{
  height:220px;
  position:relative;
  overflow:hidden;
}

.pattern-1{
  background:
    radial-gradient(circle at 20px 50%,#fff 0 8px,transparent 9px),
    radial-gradient(circle at 58px 50%,#f5f5f5 0 8px,transparent 9px),
    repeating-linear-gradient(90deg,#f7dede 0 18px,#fff 18px 34px);
}

.pattern-2{
  background:
    repeating-linear-gradient(90deg,#ffe8b5 0 8px,#d7a344 8px 12px,#fff7e0 12px 28px),
    linear-gradient(#fff,#fff);
}

.pattern-3{
  background:
    repeating-linear-gradient(45deg,#fff4c9 0 16px,#c9a84c 16px 20px,#fefefe 20px 38px);
}

.pattern-4{
  background:
    repeating-linear-gradient(135deg,#ffffff 0 14px,#dbe7f5 14px 28px,#1d3e6b 28px 31px);
}

.pattern-5{
  background:
    radial-gradient(circle at 20px 50%,#d32f2f 0 8px,transparent 9px),
    radial-gradient(circle at 58px 50%,#f1c40f 0 8px,transparent 9px),
    radial-gradient(circle at 96px 50%,#346a9e 0 8px,transparent 9px),
    repeating-linear-gradient(90deg,#fff 0 34px,#f6f6f6 34px 68px);
}

.pattern-6{
  background:
    repeating-linear-gradient(90deg,#f2dfc2 0 12px,#b98b55 12px 15px,#fff7ea 15px 32px);
}

.sample-info{
  padding:24px;
}

.sample-info span{
  display:inline-block;
  background:var(--red);
  color:#fff;
  font-size:12px;
  border-radius:999px;
  padding:3px 14px;
  margin-bottom:10px;
}

.sample-info h3{
  color:var(--blue-deep);
  font-size:21px;
  margin-bottom:8px;
}

.sample-info p{
  color:var(--gray);
  font-size:15px;
}

.knowledge{
  background:#fff;
}

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

.knowledge-grid article,
.faq-list article{
  background:var(--soft);
  border:1px solid var(--border);
  border-radius:24px;
  padding:30px;
  transition:.25s;
}

.knowledge-grid article:hover,
.faq-list article:hover{
  background:#fff;
  box-shadow:var(--shadow);
  transform:translateY(-5px);
}

.knowledge-grid h3,
.faq-list h3{
  color:var(--blue-deep);
  font-size:21px;
  margin-bottom:12px;
}

.knowledge-grid p,
.faq-list p{
  color:var(--gray);
}

.faq{
  background:var(--soft);
}

.faq-list{
  max-width:980px;
  margin:auto;
  display:grid;
  gap:18px;
}

.about{
  background:#fff;
}

.about-inner{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:60px;
  align-items:center;
}

.about p{
  margin-top:18px;
  color:var(--gray);
  font-size:18px;
  line-height:1.9;
}

.about-cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}

.about-cards div{
  min-height:150px;
  border-radius:24px;
  background:linear-gradient(135deg,var(--blue-deep),var(--blue));
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
}

.about-cards strong{
  font-size:36px;
  color:var(--gold);
}

.about-cards span{
  margin-top:6px;
  color:rgba(255,255,255,.78);
}

.contact-footer{
  background:
    radial-gradient(circle at 20% 20%,rgba(255,255,255,.1),transparent 24%),
    linear-gradient(135deg,#07111f,var(--blue-deep));
  color:#fff;
  padding:86px 0;
  border-top:6px solid var(--red);
}

.contact-inner{
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:60px;
  align-items:center;
}

.contact-title span{
  color:var(--gold);
}

.contact-footer h2{
  color:var(--gold);
}

.contact-title p{
  margin-top:16px;
  color:rgba(255,255,255,.72);
  font-size:18px;
}

.contact-box{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  border-radius:28px;
  padding:34px;
}

.contact-box p{
  color:rgba(255,255,255,.8);
  margin-bottom:14px;
}

.contact-box strong{
  color:#fff;
}

.contact-btn{
  margin-top:18px;
  width:100%;
  min-height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:linear-gradient(135deg,var(--red),var(--red-dark));
  color:#fff;
  font-weight:900;
  box-shadow:0 12px 30px rgba(211,47,47,.28);
}

@media(max-width:1100px){
  .product-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .sample-grid,
  .knowledge-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .about-inner,
  .contact-inner{
    grid-template-columns:1fr;
  }
}

@media(max-width:820px){
  .header-inner{
    height:72px;
  }

  .menu-btn{
    display:block;
  }

  .nav{
    position:absolute;
    top:72px;
    left:0;
    right:0;
    background:#fff;
    border-bottom:3px solid var(--red);
    padding:18px 24px;
    display:none;
    flex-direction:column;
    align-items:stretch;
  }

  .nav.open{
    display:flex;
  }

  .nav a{
    width:100%;
    border-radius:14px;
    padding:14px 18px;
  }

  .brand-text strong{
    font-size:18px;
  }

  .brand-text small{
    font-size:9px;
  }

  .hero-slider{
    height:620px;
  }

  .slide h1{
    font-size:44px;
  }

  .slide p{
    font-size:18px;
  }

  .slider-arrow{
    display:none;
  }

  .section{
    padding:68px 0;
  }

  .section-title h2,
  .about h2,
  .contact-footer h2{
    font-size:32px;
  }

  .product-grid,
  .sample-grid,
  .knowledge-grid,
  .about-cards{
    grid-template-columns:1fr;
  }

  .product-card p{
    min-height:auto;
  }
}

/* FIX_SAMPLE_IMAGE_SQUARE_V1 */
/* 花边样品展示区，图片区域改为正方形，避免图片被截断 */
.samples .sample-card{
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.samples .sample-img{
  width:100% !important;
  aspect-ratio:1 / 1 !important;
  height:auto !important;
  min-height:0 !important;
  background-size:contain !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  background-color:#fff3df !important;
}

/* 没上传真实图片时，保留原来的花边纹理占位效果 */
.samples .sample-img:not([style*="background-image"]){
  background-size:cover !important;
  background-repeat:repeat !important;
}

/* 手机端也保持正方形 */
@media(max-width:820px){
  .samples .sample-img{
    aspect-ratio:1 / 1 !important;
    height:auto !important;
  }
}

/* FIX_HERO_IMAGE_NO_OPACITY_V1 */
/* 真实上传的首页轮播图，不再整张覆盖蓝色透明遮罩 */
.hero-slider .slide-bg[style*="background-image"]{
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
}

/* 只在左侧文字区域保留轻微暗底，右侧和主体图片保持原图颜色 */
.hero-slider .slide-bg[style*="background-image"]::before{
  background:linear-gradient(
    90deg,
    rgba(10,26,48,.78) 0%,
    rgba(10,26,48,.58) 30%,
    rgba(10,26,48,.18) 52%,
    rgba(10,26,48,0) 72%,
    rgba(10,26,48,0) 100%
  ) !important;
}

/* 去掉大圆环透明装饰，避免压到轮播图片 */
.hero-slider .slide-bg[style*="background-image"]::after{
  display:none !important;
}

/* 让文字靠左侧暗底显示，图片主体不被压暗 */
.hero-slider .slide-inner{
  text-shadow:0 4px 16px rgba(0,0,0,.35);
}

/* 手机端文字区域稍微加深，避免看不清 */
@media(max-width:820px){
  .hero-slider .slide-bg[style*="background-image"]::before{
    background:linear-gradient(
      180deg,
      rgba(10,26,48,.78) 0%,
      rgba(10,26,48,.48) 45%,
      rgba(10,26,48,.12) 100%
    ) !important;
  }
}