/* ==========================================
   上海和晟仪器科技有限公司 网站样式表
   主色调: #C41E24 (和晟红)
   ========================================== */

/* ========== 基础动画 ========== */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in { animation: fadeInUp 0.8s ease-out forwards; }

/* ========== Banner 4层浮动波浪 ========== */
@keyframes waveFloat1 {
    0% { transform: translateX(0) translateY(0); }
    25% { transform: translateX(-2%) translateY(6px); }
    50% { transform: translateX(-1%) translateY(0); }
    75% { transform: translateX(-3%) translateY(8px); }
    100% { transform: translateX(0) translateY(0); }
}
@keyframes waveFloat2 {
    0% { transform: translateX(0) translateY(0); }
    30% { transform: translateX(2%) translateY(-5px); }
    60% { transform: translateX(1%) translateY(-10px); }
    100% { transform: translateX(0) translateY(0); }
}
@keyframes waveFloat3 {
    0% { transform: translateX(0) translateY(0); }
    35% { transform: translateX(-1.5%) translateY(4px); }
    65% { transform: translateX(1.5%) translateY(-3px); }
    100% { transform: translateX(0) translateY(0); }
}
@keyframes waveFloat4 {
    0% { transform: translateX(0) translateY(0); }
    40% { transform: translateX(1%) translateY(-7px); }
    70% { transform: translateX(-1%) translateY(2px); }
    100% { transform: translateX(0) translateY(0); }
}
.wave-layer-1 { animation: waveFloat1 7s ease-in-out infinite; }
.wave-layer-2 { animation: waveFloat2 9s ease-in-out infinite; }
.wave-layer-3 { animation: waveFloat3 8s ease-in-out infinite; }
.wave-layer-4 { animation: waveFloat4 10s ease-in-out infinite; }

/* ========== 粒子上升 ========== */
@keyframes particleRise {
    0% { transform: translateY(0) translateX(0) scale(1); opacity: 0; }
    10% { opacity: 0.5; }
    90% { opacity: 0.5; }
    100% { transform: translateY(-720px) translateX(50px) scale(0.2); opacity: 0; }
}
.particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,0.12);
    pointer-events: none;
    animation: particleRise linear infinite;
}

/* ========== 轮播 ========== */
.carousel-track {
    display: flex;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.carousel-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: #d1d5db;
    cursor: pointer;
    transition: all 0.3s ease;
}
.carousel-dot.active {
    background: #C41E24;
    width: 28px;
    border-radius: 4px;
}
@keyframes slideIn {
    from { opacity: 0; transform: translateX(40px); }
    to { opacity: 1; transform: translateX(0); }
}
.slide-active { animation: slideIn 0.5s ease-out; }

/* ========== 产品卡片 ========== */
.product-card {
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.product-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(196,30,36,0.12);
    border-color: rgba(196,30,36,0.3);
}
.product-card:hover .product-img { transform: scale(1.06); }
.product-img {
    transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* ========== 下箭头弹跳 ========== */
@keyframes bounceDown {
    0%, 100% { transform: translateY(0); opacity: 0.5; }
    50% { transform: translateY(10px); opacity: 1; }
}
.animate-bounce-down { animation: bounceDown 2s ease-in-out infinite; }

/* ========== 客户logo滚动 ========== */
@keyframes scrollLogos {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.logo-scroll { animation: scrollLogos 35s linear infinite; }
.logo-scroll:hover { animation-play-state: paused; }

/* ========== 技术文章卡片 ========== */
.article-card { transition: all 0.3s ease; }
.article-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.08);
}

/* ========== 滚动条 ========== */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: #f9fafb; }
::-webkit-scrollbar-thumb { background: #C41E24; border-radius: 3px; }

/* ========== 区域背景 ========== */
.banner-bg {
    background: linear-gradient(135deg, #1a0a0a 0%, #3d1012 25%, #8B1A1F 50%, #5c1215 75%, #1a0a0a 100%);
}
.advantages-bg {
    background: linear-gradient(135deg, #1a0a0a 0%, #3d1012 25%, #8B1A1F 50%, #5c1215 75%, #1a0a0a 100%);
}
.cases-bg {
    background: linear-gradient(135deg, #1a0a0a 0%, #3d1012 40%, #8B1A1F 70%, #3d1012 100%);
}
.footer-bg { background: #1A0A0A; }

/* ========== 光晕效果 ========== */
.glow-red {
    background: radial-gradient(circle, #e74c3c 0%, transparent 70%);
}
.glow-gold {
    background: radial-gradient(circle, #f39c12 0%, transparent 70%);
}
.glow-white {
    background: radial-gradient(circle, #ffffff 0%, transparent 70%);
}

/* ========== Banner 右侧图片容器 ========== */
.banner-img-wrap {
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.6s ease;
}
.banner-img-wrap:hover {
    transform: translateY(-6px);
    box-shadow: 0 30px 70px rgba(0,0,0,0.5), 0 0 100px rgba(196,30,36,0.2), inset 0 1px 0 rgba(255,255,255,0.1);
}
.banner-img-wrap:hover .banner-img-glow {
    opacity: 0.6;
}
.banner-img-glow {
    transition: opacity 0.6s ease;
}

/* ========== 波浪分隔线 ========== */
.wave-divider-top { height: 80px; }
.wave-divider-bottom { height: 80px; }
.banner-wave-bottom { height: 60px; }

/* ========== 回到顶部 ========== */
.back-to-top {
    box-shadow: 0 4px 20px rgba(196,30,36,0.4);
}

/* ========== 客户案例质感层 ========== */
.cases-texture {
    background-image: url('data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%224%22 height=%224%22><rect width=%224%22 height=%224%22 fill=%22white%22 opacity=%220.03%22/></svg>');
    background-size: 4px 4px;
}
.cases-gradient-overlay {
    background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.08) 0%, transparent 60%),
                radial-gradient(ellipse at 80% 100%, rgba(196,30,36,0.3) 0%, transparent 50%);
}

/* ========== 合作伙伴滚动遮罩 ========== */
.logo-scroll-wrapper {
    mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
}

/* ==========================================
   语义化短类名（替代Tailwind长串）
   ========================================== */

/* --- 布局 --- */
.wrap    { max-width:1300px; margin:0 auto; padding:0 1.25rem; position:relative; z-index:10; }
.sec     { padding:6rem 0; position:relative; overflow:hidden; background:#fff; }
.sec-g   { padding:6rem 0; position:relative; overflow:hidden; background:#f9fafb; }
.sec-r   { padding:5rem 0; position:relative; overflow:hidden; }
.head    { text-align:center; margin-bottom:3.5rem; }
.hbar    { display:flex; flex-direction:column; margin-bottom:3.5rem; }
@media(min-width:768px){ .hbar{flex-direction:row; justify-content:space-between; align-items:flex-end;} }

/* --- 标题组件 --- */
.stag    { color:#C41E24; font-size:.875rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; }
.stit    { font-size:2.25rem; font-weight:800; color:#111827; margin-top:.75rem; margin-bottom:1rem; }
@media(min-width:768px){ .stit{font-size:3rem;} }
.sline   { width:5rem; height:.25rem; background:linear-gradient(90deg,#C41E24,#e74c3c); border-radius:9999px; margin:0 auto; }
.sdesc   { color:#6b7280; margin-top:1rem; max-width:32rem; margin-left:auto; margin-right:auto; }
.sline-l { width:4rem; height:.25rem; background:linear-gradient(90deg,#C41E24,#e74c3c); border-radius:9999px; margin-bottom:2rem; }
.more    { display:inline-flex; align-items:center; color:#C41E24; font-weight:700; margin-top:1rem; }
@media(min-width:768px){ .more{margin-top:0;} }
.more:hover { text-decoration:underline; }

/* --- 按钮 --- */
.btn-r   { display:inline-flex; align-items:center; gap:.5rem; background:linear-gradient(90deg,#C41E24,#e74c3c); color:#fff; padding:1rem 2rem; border-radius:9999px; font-weight:700; font-size:1.125rem; transition:all .3s; box-shadow:0 10px 30px rgba(0,0,0,.3); }
.btn-r:hover { background:linear-gradient(90deg,#A0181D,#C41E24); transform:translateY(-2px); box-shadow:0 15px 40px rgba(196,30,36,.25); }
.btn-o   { display:inline-flex; align-items:center; gap:.5rem; border:2px solid rgba(255,255,255,.25); color:#fff; padding:1rem 2rem; border-radius:9999px; font-weight:700; font-size:1.125rem; transition:all .3s; backdrop-filter:blur(4px); }
.btn-o:hover { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.4); }

/* --- 文字 --- */
.red     { color:#C41E24; }
.dark    { color:#111827; }
.gray    { color:#6b7280; }
.gray-l  { color:#9ca3af; }
.white-80{ color:rgba(255,255,255,.8); }
.white-60{ color:rgba(255,255,255,.6); }
.white-50{ color:rgba(255,255,255,.5); }
.white-40{ color:rgba(255,255,255,.4); }
.bold    { font-weight:700; }
.xbold   { font-weight:800; }

/* --- 产品卡片 --- */
.pcard   { background:#fff; border-radius:1rem; overflow:hidden; border:1px solid #f3f4f6; box-shadow:0 1px 2px rgba(0,0,0,.05); transition:all .4s cubic-bezier(.165,.84,.44,1); }
.pcard:hover { transform:translateY(-6px); box-shadow:0 20px 50px rgba(196,30,36,.12); border-color:rgba(196,30,36,.3); }
.pcard:hover .product-img { transform:scale(1.06); }
.pimg    { position:relative; aspect-ratio:4/3; overflow:hidden; background:linear-gradient(135deg,#f9fafb,#f3f4f6); }
.pbody   { padding:1.25rem; }
.pname   { font-size:1rem; font-weight:700; color:#111827; margin-bottom:.5rem; transition:color .2s; }
.pname:hover { color:#C41E24; }
.pdesc   { font-size:.875rem; color:#6b7280; margin-bottom:1rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.pbot    { display:flex; align-items:center; justify-content:space-between; }
.pmodel  { color:#C41E24; font-weight:700; font-size:.875rem; }
.plink   { display:inline-flex; align-items:center; font-size:.875rem; font-weight:700; color:#C41E24; gap:.25rem; transition:all .3s; }
.plink:hover { gap:.375rem; }
.pill    { color:#fff; font-size:.75rem; padding:.25rem .75rem; border-radius:9999px; font-weight:500; }
.pill-r  { background:#C41E24; }
.pill-b  { background:#3b82f6; }
.pill-a  { background:#f59e0b; }

/* --- 新闻卡片 --- */
.news    { display:flex; gap:1.5rem; padding:1.5rem; background:#fff; border:1px solid #f3f4f6; border-radius:1rem; overflow:hidden; transition:all .3s; cursor:pointer; }
.news:hover { box-shadow:0 10px 20px rgba(0,0,0,.08); border-color:#fecaca; }
.ndate   { width:6rem; height:6rem; background:#C41E24; border-radius:.75rem; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#fff; flex-shrink:0; }
.nday    { font-size:1.875rem; font-weight:800; line-height:1; }
.nyear   { font-size:.75rem; margin-top:.25rem; opacity:.8; }
.nbody   { flex:1; min-width:0; overflow:hidden; }

/* 新闻/文章a标签包裹 */
.g2-lg a, .g2 a { display:block; }
.ntag    { font-size:.75rem; color:#C41E24; font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
.ntit    { font-size:1.125rem; font-weight:700; color:#111827; margin-top:.25rem; margin-bottom:.5rem; transition:color .2s;text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
line-clamp: 1;
-webkit-box-orient: vertical; }
.news:hover .ntit { color:#C41E24; }
.ndesc   { font-size:.875rem; color:#6b7280; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* --- 技术文章 --- */
.acard   { background:#fff; border-radius:1rem; border:1px solid #f3f4f6; padding:2rem; box-shadow:0 1px 2px rgba(0,0,0,.05); cursor:pointer; transition:all .3s; }
.acard:hover { transform:translateY(-4px); box-shadow:0 12px 40px rgba(0,0,0,.08); }
.aicon   { width:4rem; height:4rem; background:#fef2f2; border-radius:.75rem; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.atag    { font-size:.75rem; color:#C41E24; font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
.atit    { font-size:1.125rem; font-weight:700; color:#111827; margin-top:.375rem; margin-bottom:.5rem; transition:color .2s; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.acard:hover .atit { color:#C41E24; }
.adesc   { font-size:.875rem; color:#6b7280; line-height:1.625; margin-bottom:1rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.abot    { display:flex; align-items:center; justify-content:space-between; }
.adate   { display:flex; align-items:center; font-size:.75rem; color:#9ca3af; }
.alink   { font-size:.875rem; font-weight:700; color:#C41E24; display:flex; align-items:center; gap:.25rem; transition:all .3s; }
.alink:hover { gap:.5rem; }

/* --- 客户logo卡片 --- */
.cop     { background:rgba(255,255,255,.1); backdrop-filter:blur(4px); border:1px solid rgba(255,255,255,.15); border-radius:.75rem; padding:1.25rem 2rem; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5rem; min-width:180px; transition:all .3s; }
.cop:hover { background:rgba(255,255,255,.18); }
.cop-i   { font-size:1.875rem; color:rgba(255,255,255,.7); }
.cop-n   { font-size:.875rem; font-weight:500; color:rgba(255,255,255,.8); }

/* --- 优势卡片（白底） --- */
.acard-w { background:#fff; border-radius:1rem; box-shadow:0 25px 50px rgba(0,0,0,.15); padding:2rem 2.5rem; }
@media(min-width:1024px){ .acard-w{padding:2.5rem;} }
.a-num   { font-size:1.875rem; font-weight:800; color:#C41E24; flex-shrink:0; }
.a-tit   { font-size:1.125rem; font-weight:700; color:#111827; margin-bottom:.25rem; }
.a-desc  { font-size:.875rem; color:#6b7280; line-height:1.625; }

/* --- Banner数据 --- */
.bnum    { font-size:1.875rem; font-weight:800; }
.blab    { font-size:.75rem; color:rgba(255,255,255,.4); margin-top:.25rem; letter-spacing:.05em; }

/* --- 页脚 --- */
.ftit    { color:#fff; font-weight:700; margin-bottom:1.5rem; font-size:.875rem; letter-spacing:.05em; }
.flink   { color:#9ca3af; transition:color .2s; }
.flink:hover { color:#C41E24; }

/* --- 标签 --- */
.top-tag { display:inline-flex; align-items:center; gap:.5rem; background:rgba(255,255,255,.08); backdrop-filter:blur(4px); border:1px solid rgba(255,255,255,.15); border-radius:9999px; padding:.625rem 1.25rem; margin-bottom:2rem; }

/* --- 网格 --- */
.g4  { display:grid; grid-template-columns:1fr; gap:1.5rem; }
@media(min-width:768px){ .g4{grid-template-columns:repeat(2,1fr);} }
@media(min-width:1024px){ .g4{grid-template-columns:repeat(4,1fr);} }
.g2  { display:grid; grid-template-columns:1fr; gap:1.5rem; }
@media(min-width:768px){ .g2{grid-template-columns:repeat(2,1fr);} }
.g2-lg { display:grid; grid-template-columns:1fr; gap:2rem; }
@media(min-width:1024px){ .g2-lg{grid-template-columns:repeat(2,1fr);} }
.g3  { display:grid; grid-template-columns:1fr; gap:2rem; }
@media(min-width:768px){ .g3{grid-template-columns:repeat(2,1fr);} }
@media(min-width:1024px){ .g3{grid-template-columns:repeat(3,1fr);} }
.g4f { display:grid; grid-template-columns:1fr; gap:3rem; margin-bottom:4rem; }
@media(min-width:768px){ .g4f{grid-template-columns:repeat(4,1fr);} }

/* --- 辅助 --- */
.flex-ct { display:flex; align-items:center; justify-content:center; }
.car-btn { position:absolute; top:50%; transform:translateY(-50%); z-index:20; width:3rem; height:3rem; background:#fff; border-radius:50%; box-shadow:0 5px 20px rgba(0,0,0,.1); border:1px solid #f3f4f6; display:flex; align-items:center; justify-content:center; transition:all .3s; }
.car-btn:hover { background:#C41E24; color:#fff; }
.car-prev { left:-1rem; }
.car-next { right:-1rem; }