:root{
    --primary:#1f5fff;
    --primary-dark:#0f36a9;
    --accent:#00bec7;
    --text:#0f1523;
    --muted:#6a768f;
    --line:#e1e7f2;
    --surface:#ffffff;
    --bg-soft:#f7f9fc;
    --radius:18px;
    --radius-soft:26px;
    --shadow:0 18px 45px rgba(15,21,35,.08);
    --shadow-soft:0 26px 70px rgba(7,14,32,.12);
    --max-width:1880px;
    --gutter:5vw;
    font-family:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
    color-scheme:light;
}
*{box-sizing:border-box;margin:0;padding:0;list-style-type: none}
body{
    background:#ffffff;
    color:var(--text);
    line-height:1.2;
    overflow-x:hidden;
}

a{text-decoration:none;color:inherit}
img{max-width:100%;}
button{font:inherit;border:none;
    background:none;cursor:pointer;height:2.6rem;
    width:6rem;
}

.page{
    width:100%;
    max-width:var(--max-width);
    margin:0 auto;
    padding:0 var(--gutter);
}

/* HEADER */
header{
    position:sticky;
    top:0;
    z-index:999;
    background:#fff;
    transition:box-shadow .3s ease;    box-shadow: var(--shadow);
}
header.scrolled{box-shadow:0 20px 60px rgba(12,18,40,.12);}
.nav{
    height:80px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:32px;
}
.logo{
    display:flex;
    align-items:center;
    gap:12px;
    font-weight:700;
    font-size:1.4rem;
    letter-spacing:.08em;
    text-transform:uppercase;
}
.logo img{height: 45px}
nav ul{
    list-style:none;
    display:flex;
    gap:24px;
    font-weight:500;
    font-size:.95rem;
}
nav a{
    position:relative;
    padding-bottom:6px;
    color:var(--text);
    transition:color .25s;
    font-weight: bold;
}
nav a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    height:2px;
    width:0;
    background:var(--primary);
    transition:width .25s;
}
nav a:hover,nav a.on{
    color:var(--primary);
}
nav a:hover,nav a.on::after{width:100%}

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

/* 一级菜单 li */
nav ul > li{
    position:relative;
}


/* 二级菜单基础样式 */
.submenu{
    position:absolute;
    top:200%;
    left:0;
    min-width:220px;
    background:#fff;
    border-radius:12px;
    box-shadow:0 20px 40px rgba(15,23,42,.12);
    padding:10px 0;
    opacity:0;
    visibility:hidden;
    transform:translateY(8px);
    transition:opacity .18s ease,transform .18s ease,visibility .18s;
    z-index:50;
    display: block;
}
.submenu li{
    width:100%;
}
.submenu a{
    display:block;
    padding:8px 25px;
    font-size:.85rem;
    color:#111827;
    white-space:nowrap;
}
.submenu a:hover{
    background:#f3f4f6;
    color:var(--primary);
}

/* 鼠标移上“About”时显示二级菜单 */
nav ul > li.has-submenu:hover > .submenu{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

/* ===== menu 按钮（PC <=1200 & 移动端 <=640） ===== */
.nav-mobile-open nav{top: 80px}
.nav ul > li {
    position: relative;
    float: left;
    padding-right: 30px;
}
.menu-toggle{
    display:none;
    align-items:center;
    justify-content:center;
    width:38px;
    height:38px;
    border-radius:999px;
    background:#fff;
    cursor:pointer;
}
.menu-toggle span{
    display:block;
    width:18px;
    height:2px;
    background:#111827;
    position:relative;
}
.menu-toggle span::before,
.menu-toggle span::after{
    content:"";
    position:absolute;
    left:0;
    width:18px;
    height:2px;
    background:#111827;
    transition:transform .2s,top .2s,bottom .2s,opacity .2s;
}
.menu-toggle span::before{
    top:-6px;
}
.menu-toggle span::after{
    bottom:-6px;
}
.menu-toggle.active span{
    background:transparent;
}
.menu-toggle.active span::before{
    top:0;
    transform:rotate(45deg);
}
.menu-toggle.active span::after{
    bottom:0;
    transform:rotate(-45deg);
}

/* mobile/小屏菜单容器（与主 nav 复用：通过 class 控制） */
.nav-mobile-open nav{
    position:absolute;
    inset:100% 0 auto 0;
    background:#fff;
    box-shadow:0 15px 35px rgba(15,23,42,.16);
    padding:12px 24px 16px;
}
.nav-mobile-open nav ul{
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
}

/* --- 响应式 --- */

/* 1200 以下：显示 menu 按钮，隐藏水平菜单，使用下拉 */
@media (max-width:1200px){
    nav ul{
        display:none;
    }
    .menu-toggle{
        display:flex;
    }

    .logo{
        margin-left:20px;
    }
    /* 当 body 上有 .nav-mobile-open 时，显示菜单 */
    .nav-mobile-open nav{width:100%;}
    .nav-mobile-open nav ul{
        /*display:flex;*/
        display:block
    }
}

.search-toggle{
    width:25px;
    height:25px;
    border-radius:50%;
    display:grid;
    place-items:center;
    /*transition:border .3s,transform .3s;*/
}
/*.search-toggle:hover{*/
/*    border-color:var(--primary);*/
/*    transform:translateY(-2px);*/
/*}*/
.search-wrap{position:relative}
.search-panel{
    position:absolute;
    top:120%;
    right:0;
    width:clamp(260px,28vw,380px);
    padding:18px;
    border-radius:18px;
    background:#fff;
    box-shadow:var(--shadow);
    display:none;
}
.search-panel.active{display:block}
.search-panel input{
    width:100%;
    border-radius:999px;
    border:1px solid var(--line);
    padding:10px 16px;
    font-size:.95rem;
}

.phone-pill{
    display:flex;
    align-items:center;
    gap:10px;
    padding:8px 18px;
    border-radius:999px;
    background:var(--primary);
    color:#fff;
    font-weight:600;
    white-space:nowrap;
    font-size: 0.8rem;text-align: center;
}
.phone-pill-icon{
    width:20px;height:20px;display:grid;place-items:center;font-size:.8rem;
}
.whatsapp-icon{
    width:36px;height:36px;
    border-radius:50%;
    /*  background:rgba(0,190,199,.12); */
    display:grid;
    place-items:center;
    color:#00c300;
    font-size:1.1rem;
}

/* HERO */

.hero{
    margin-top:0px;
    overflow:hidden;
    position:relative;
    min-height:700px;
}
.hero-slide{
    position:absolute;
    inset:0;
    opacity:0;
    transition:opacity .8s ease;height:100%;width: 100%;
}
.hero-slide img{
    height:100%;width: 100%;object-fit:cover;filter:brightness(.55);
}
.hero-slide.active{opacity:1}

.hero-inner{
    position:relative;
    z-index:2;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:end;
    text-align:center;
    color:#fff;
    padding:60px 12px;
    top:400px;
}
.hero-eyebrow{
    font-size:.85rem;
    letter-spacing:.35em;
    text-transform:uppercase;
    margin-bottom:10px;
}
.hero-title{
    font-family:"Space Grotesk",sans-serif;
    font-size:clamp(2.2rem,6vw,8rem);
    line-height:1.1;
    text-transform:uppercase;
    margin-bottom:16px;
}
.hero-title span{display:block;}
.hero-sub{
    font-size:1rem;
    margin-bottom:24px;
    color:rgba(255,255,255,.86);
}
.hero-email{
    display:inline-flex;
    align-items:stretch;
    border-radius:999px;
    overflow:hidden;
    /*border:1px solid rgba(255,255,255,.45);*/
    backdrop-filter:blur(6px);
    background:rgba(0,0,0,.18);
    max-width:550px;
    width:100%;
}
.hero-email input{
    flex:1;
    border:none;
    /*background:transparent;*/
    padding:12px 18px;
    color:#fff;
}
.hero-email input::placeholder{color:rgba(255,255,255,.7)}
.hero-email button{
    background:var(--primary);
    color:#fff;
    padding:0 22px;
    font-weight:600;
    width: 8rem;
    font-size: .8rem;
    white-space:nowrap;
}
.hero-dots{
    display:flex;
    gap:10px;
    margin-top:50px;
    justify-content:center;
}
.hero-dots button{
    width:10px;height:10px;border-radius:50%;
    background:rgba(255,255,255,.5);
    border:none;
}
.hero-dots button.active{background:#fff}

/* SECTION HEAD */
.index section{margin-top:70px;}
.section-head{
    text-align:center;
    margin-bottom:32px;
}
.section-eyebrow{
    text-transform:uppercase;
    letter-spacing:.35em;
    font-size:.85rem;
    color:var(--accent);
    font-weight:600;
    margin-bottom:6px;
}
.section-title{
    font-size:clamp(1.9rem,3.2vw,2.4rem);
    font-weight:600;
    margin-bottom:6px;
}
.section-sub{
    font-size:.98rem;
    color:var(--muted);
    max-width:640px;
    margin:0 auto;
}

/* Button（统一，用于产品 / WHY / Intro 等） */
.btn-ghost{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:10px 20px;
    border-radius:999px;
    background:#fff;
    border:1px solid var(--line);
    font-size:.65rem;
    font-weight:500;
    transition:background .25s,color .25s,border .25s;
    white-space:nowrap;
    width:10rem;
}


/* Recommended Products & Recommend For You */
.prod-grid-3{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
}
.prod-grid-4{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
}
.prod-grid-5{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:24px;
}
.prod-card{
    position:relative;
    padding:20px 20px 18px;
    border-radius:18px;
    background:#fff;
    box-shadow:var(--shadow);
    overflow:hidden;
    display:flex;
    flex-direction:column;
    transition:transform .35s,box-shadow .35s;
    text-align:center;
}
.prod-card::after{
    content:"";
    position:absolute;
    inset:0;
    backdrop-filter:blur(0);
    transition:backdrop-filter .35s;
}
.prod-card:hover{
    transform:translateY(-8px);
    box-shadow:var(--shadow-soft);
}
.prod-card:hover::after{backdrop-filter:blur(4px);}
.prod-img{
    /* border-radius:14px;*/
    overflow:hidden;
    margin-bottom:30px;
    position:relative;
    z-index:1;
    border-bottom:1px solid var(--line);
}
.prod-img img{transition: transform 0.3s ease;}
.prod-img img:hover{
    transform: scale(1.1);
}

.prod-card h3{
    position:relative;
    z-index:1;
    font-size:1.05rem;
    margin-bottom:6px;
}
.prod-card p{
    position:relative;
    z-index:1;
    font-size:.92rem;
    color:var(--muted);
    margin-bottom:14px;
}
.prod-card .btn-ghost{
    position:relative;
    z-index:1;
    align-self:flex-start;
    margin:0 auto;
    margin-bottom:2rem;
}

/* Company Introduction & 子模块 */
.company-wrap{
    display:grid;
    /* grid-template-columns:1.4fr 1fr;*/
    gap:24px;
}
.company-main{
    position:relative;
    border-radius:var(--radius-soft);
    overflow:hidden;
    min-height:500px;
    color:#fff;
}

.company-main img.bg{
    position:absolute;
    inset:0;
    width:100%;height:100%;object-fit:cover;
    filter:brightness(.45);
}

.company-main-inner{
    position:relative;
    padding:150px 32px;margin: 0 auto;
    text-align: center;
}
.company-main-inner .section-eyebrow,
.company-main-inner .section-title{
    text-align:center;
}
.company-main-inner .section-title{
    font-size:3.5rem;
    margin-bottom:10px;width: 80%;
    margin: auto auto 20px auto;
}
.company-main-inner p{
    font-size:.96rem;
    max-width:750px;line-height: 30px;
    margin-bottom:18px;
    color:rgba(255,255,255,.88);    margin: 0 auto;
    text-align: center;
}
.company-main-inner .btn-ghost{
    background:#fff;
    color:var(--text);margin-top:30px;
}

.company-side{
    display:grid;
    flex-direction:column;
    gap:24px;grid-template-columns: 1fr 1fr;
}
.company-side-card{
    position:relative;
    border-radius:var(--radius-soft);
    overflow:hidden;
    color:#fff;
    min-height:450px;
}
.company-side-card img.bg{
    position:absolute;
    inset:0;
    width:100%;height:100%;object-fit:cover;
    filter:brightness(.45);transition: transform 0.3s ease;
}
.company-side-card:hover img {
    transform: scale(1.05);
}

.company-side-inner{
    position:relative;
    padding:150px 22px;margin: 0 auto;
    text-align: center;
}
.company-side-inner h3{
    font-size:2rem;
    margin-bottom:8px;
}
.company-side-inner p{
    font-size:.96rem;
    margin: auto;
    margin-bottom:12px;
    color:rgba(255,255,255,.9);
}
.company-side-inner .btn-ghost{
    background:#fff;
    color:var(--text);  margin-top: 20px;
}

.company-side-inner .btn-ghost:hover{
    background:var(--primary);
    color:#fff;
}

.btn-ghost:hover{
    background:var(--primary);
    color:#fff;
    border-color:var(--primary);
}
.company-main img{transition: transform 0.3s ease;}
.company-main:hover  img{transform: scale(1.05);}

/* WHY CHOOSE US */
.why-grid-2{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:24px;
    margin-bottom:24px;
}
.why-grid-3{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
}
.why-card{
    background:#fff;
    border-radius:18px;
    padding:35px 35px 35px;
    box-shadow:var(--shadow);
    display:flex;
    flex-direction:column;
    gap:8px;
    transition:transform .3s,box-shadow .3s;
}
.why-card:hover{
    transform:translateY(-6px);
    box-shadow:var(--shadow-soft);
}
.why-icon{
    width:60px;height:60px;border-radius:30px;
    background:#f0f4ff;
    display:grid;place-items:center;
    color:var(--primary);
    margin-bottom:6px;
    font-size:1.1rem;
}
.why-card h3{
    font-size:1.02rem;
}
.why-card p{
    font-size:.92rem;
    color:var(--muted);
    flex:1;
}
.why-card .btn-ghost{margin-top:15px;}

/* 数字模块合并 */
.stats-wrap{
    margin-top:70px;
    /*  background:var(--bg-soft); */
    border-radius:24px;
    padding:26px 24px;
    box-shadow:var(--shadow);
}
.stats-inner{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
    text-align:center;margin: 20px;
}
.stat-box{
    display:flex;
    flex-direction:column;
    gap:4px;
}
.stat-num{
    font-size:2.2rem;
    font-weight:600;
    color:var(--primary);
}
.stat-label{
    font-size:.9rem;
    color:var(--muted);
}

/* Trusted by logos */
.logo-grid{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:18px;
}
.logo-item{
    background:#fff;
    border-radius:16px;
    box-shadow:var(--shadow);
    padding:16px;
    display:grid;
    place-items:center;
    transition:transform .25s,filter .25s;
    filter:saturate(0);
}
.logo-item:hover{
    transform:translateY(-4px);
    filter:saturate(1);
}

/* Explore more information */
.explore-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
}
.explore-card{
    background:#fff;
    border-radius:18px;
    box-shadow:var(--shadow);
    /*  padding:16px; */
    display:flex;
    flex-direction:column;
    gap:10px;padding-bottom: 30px;
    transition:transform .35s,box-shadow .35s;overflow: hidden;
}
.explore-card:hover{
    transform:translateY(-6px);
    box-shadow:var(--shadow-soft);
}
.explore-card img{
    border-radius:14px 14px 0px 0px;
    margin-bottom:6px;overflow: hidden;transition: transform 0.3s ease;
}
.explore-card:hover img {
    transform: scale(1.05);
}
.explore-title-main{
    font-weight:700;
    font-size:1.02rem;
    margin: 4px 20px 10px 25px;
}
.explore-list{
    list-style:none;
    font-size:.9rem;
    color:var(--muted);
    display:grid;
    gap:4px;margin: 4px 20px 0 25px;line-height: 25px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}
/*  .explore-list li:first-child{
  font-weight:600;
  color:var(--text);
}

/* FAQ */
.faq-wrap{
    background:#fff;
    border-radius:20px;
    box-shadow:var(--shadow);
    padding:24px 26px;
}
.faq-item{border-bottom:1px solid var(--line);  padding: 15px 0 15px 0}
.faq-btn{
    width:100%;
    text-align:left;
    padding:14px 0;
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-weight:600;
    font-size:.96rem;
}
.faq-body{
    max-height:0;
    overflow:hidden;
    transition:max-height .35s ease;
}
.faq-body.open{max-height:180px;}
.faq-body p{
    font-size:.9rem;
    color:var(--muted);
    padding-bottom:10px;
}

/* Trending */
.trending-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:18px;
}
.trend-block{
    background:#fff;
    border-radius:18px;
    box-shadow:var(--shadow);
    padding:16px 18px;
}
.trend-title{
    font-size:.96rem;
    font-weight:600;
    margin-bottom:8px;
}
.trend-list{
    list-style:none;
    display:grid;
    gap:6px;
    font-size:.8rem;
    padding:1rem 0 1rem .5rem
}
.trend-list li{
    color:var(--muted);
    cursor:pointer;
    transition:color .25s,transform .25s;
    line-height:1.5rem;
}
.trend-list li:hover{
    color:var(--primary);
    transform:translateX(4px);
}

/* Contact 三列：左1 右2竖排 */
.contact-layout{
    display:grid;
    grid-template-columns:1.1fr 1.1fr;
    gap:24px;
    margin-top:70px;
}
.contact-left,
.contact-right-column{
    display:flex;
    flex-direction:column;
    gap:24px;
}

.contact-left{
    box-shadow: var(--shadow);border-radius: 20px;
}

.contact-left  .contact-card{
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}

.contact-card{
    background:#fff;
    border-radius:20px;
    box-shadow:var(--shadow);
    padding: 60px 20px 60px 60px;
}


.contact-card h3{
    font-size:1.15rem;
    margin-bottom:6px;
}
.contact-card p{
    font-size:.92rem;
    color:var(--muted);
    margin-bottom:16px;
}
.contact-card form{
    display:grid;
    gap:10px;margin-top: 40px;
}
.contact-card input,
.contact-card textarea{
    width:90%;
    border-radius:12px;
    border:1px solid var(--line);
    padding:10px 12px;
    font-size:.9rem;
    font-family:inherit;margin-bottom: 10px;
}
.contact-card textarea{min-height:130px;resize:vertical;}
.btn-primary{
    border-radius:25px;
    background:var(--primary);
    color:#fff;
    font-size:.8rem;
    font-weight:600;
    border:none;width: 150px;margin-top:15px;
}
.qr-row{
    display:flex;
    align-items:flex-start;
    gap:12px;
}
.qr-box{
    width:140px;
    height:140px;
    border-radius:14px;
    border:1px dashed var(--line);
    display:grid;
    place-items:center;
    font-size:.8rem;
    color:var(--muted);
}

/* FOOTER + Newsletter */
footer{
    margin-top:80px;
    background:var(--bg-soft);
    padding:36px var(--gutter) 24px;
}
.footer-inner{
    max-width:var(--max-width);
    margin:0 auto;
}
.newsletter-row{
    display:grid;
    grid-template-columns:2fr 3fr 1.5fr;
    align-items:center;
    gap:18px;
    margin:30px 0 50px 0px;
}
.newsletter-title{
    font-weight:600;
    font-size:1.8rem;
}
.newsletter-search{
    display:flex;
    align-items:stretch;
    border-radius:999px;
    overflow:hidden;
    background:#fff;

}
.newsletter-search input{
    flex:1;
    border:none;
    padding:10px 20px;
    font-size:.8rem;
}
.newsletter-search button{
    background:var(--primary);
    color:#fff;
    padding:0 18px;
    font-weight:600;
    font-size:.9rem;
    width: 8rem;
    white-space:nowrap;
}
.footer-social{
    display:flex;
    justify-content:flex-end;
    gap:10px;
}
.footer-social a{
    width:55px;height:55px;border-radius:30px;
    background:#fff;
    display:grid;place-items:center;
    font-size:.9rem;
    color:var(--text);
    box-shadow:0 8px 18px rgba(0,0,0,.04);
}
.footer-cols{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:20px;
    margin-top:16px;
    font-size:.9rem;
    border-top:1px solid #e1e7f2;
    padding-top:40px;
}
.footer-cols h4{
    font-size:.95rem;
    margin-bottom:8px;
    font-weight:600;
}
.footer-cols ul{
    list-style:none;
    display:grid;
    gap:4px;
    line-height:25px;
}
.footer-cols li{
    color:var(--muted);
    cursor:pointer;
    transition:color .25s;font-size: .8rem;
}
.footer-cols li:hover{color:var(--primary);}
.footer-bottom{
    margin-top:100px;
    border-top:1px solid #e1e5f0;
    padding-top:20px;
    display:flex;
    justify-content:space-between;
    gap:10px;
    font-size:.8rem;
    color:var(--muted);
    flex-wrap:wrap;
}

input:focus {
    outline: none;
}
textarea:focus {
    outline: none; /* 直接移除默认黑框 */
}
button:focus {
    outline: none;
}
.hero-email input::placeholder {
    color: var(--muted);
    opacity: 1; /* 确保颜色完全不透明（部分浏览器默认半透明） */
}
/* 针对旧版 WebKit 内核浏览器（如旧版 Safari）的兼容写法 */
.hero-email input::-webkit-input-placeholder {
    color: var(--muted);
    opacity: 1;
}

/* 针对旧版 Firefox 的兼容写法 */
.hero-email input::-moz-placeholder {
    color: var(--muted);
    opacity: 1;
}

/* 针对旧版 IE 的兼容写法 */
.hero-email input:-ms-input-placeholder {
    color: var(--muted);
    opacity: 1;
}

.hero-email input {
    color: #000;
    flex:1;
    border:none;
}



/* 响应 */

@media(max-width:1850px){
    .prod-grid-4 {
        display: grid;
        grid-template-columns: repeat(4,1fr);
    }
    .prod-grid-4 .prod-card:last-child {display: block}
}

@media(max-width:1400px){
    .trending-grid { display: grid; grid-template-columns: repeat(4,1fr);gap: 18px;}

    .trend-block:nth-child(n+5) {display: none;}
}

@media(max-width:1200px){
    .nav-mobile-open nav {width: 100%;top: 80px;}
    .nav-mobile-open .submenu li{padding-right: 0px;}
    nav ul > li.has-submenu:hover > .submenu{top: 25px;}
    .prod-grid-3{grid-template-columns:repeat(3,minmax(0,1fr));}
    .prod-grid-4{grid-template-columns:repeat(3,minmax(0,1fr));}
    .prod-grid-5{grid-template-columns:repeat(3,minmax(0,1fr));}
    .why-grid-3{grid-template-columns:repeat(3,minmax(0,1fr));}
    .trending-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
    .company-wrap{grid-template-columns:1fr;}
    .company-main-inner .section-title{font-size: 3rem;width: 100%;}
    .contact-layout{grid-template-columns:1fr;}
    .explore-grid {display: grid;grid-template-columns: repeat(2,1fr);gap: 24px;}
    .explore-grid .explore-card:last-child {display: none;}
    .newsletter-row{
        grid-template-columns:1.4fr 2fr;
        grid-template-rows:auto auto;
    }
    .newsletter-row>.footer-social{
        grid-column:1/3;
        justify-content:flex-start;
    }
    .prod-grid-4 .prod-card:last-child {display: none;}
    .trend-block:nth-child(n+4) {display: none;}
    .newsletter-title{font-weight:600;font-size:1.6rem;}
}
@media(max-width:900px){
    nav ul{display:none;} /* 可按需换成汉堡菜单，这里保持简化 */
    .logo{margin-left:20px}
    .nav-right{margin-right:20px}
    .prod-grid-3{grid-template-columns:repeat(2,minmax(0,1fr));}
    .prod-grid-4{grid-template-columns:repeat(2,minmax(0,1fr));}
    .prod-grid-5{grid-template-columns:repeat(2,minmax(0,1fr));}
    .why-grid-2{grid-template-columns:1fr;}
    .why-grid-3{grid-template-columns:repeat(2,minmax(0,1fr));}
    .stats-inner{grid-template-columns:repeat(2,minmax(0,1fr));}
    .logo-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
    .explore-grid{grid-template-columns:repeat(1,minmax(0,1fr));}
    .trending-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
    .newsletter-title{font-weight:600;font-size:1.05rem;}
    .footer-cols{grid-template-columns:repeat(3,minmax(0,1fr));}
    .nav{height:80px;padding:12px 0;flex-wrap:wrap;}
    .explore-card:last-child {display: none;}
    .trend-block:last-child {display: none;}
    .prod-grid-4 .prod-card:last-child { display: block;}
    .trend-block:nth-child(n+4) {display: block;}
    .trend-block:last-child { display: none;}
    /*.why-grid-3 .why-card:last-child { display: none;}*/
    .company-main-inner .section-title{font-size: 3rem;width: 100%;}
    .hero{min-height: 700px;}
}

@media(max-width:640px){
    .prod-grid-3,
    .prod-grid-4,
    .prod-grid-5,
    .why-grid-3,
    .explore-grid,
    .trending-grid,
    .stats-inner{grid-template-columns:1fr !important;}
    .logo-grid{grid-template-columns: repeat(2, 1fr) !important;;}
    .footer-bottom{ margin-top: 30px;}
    .hero-inner{padding:40px 16px;}
    .hero-email{
        /* flex-direction:column;*/
        border-radius:16px;
    }
    .hero-email button{
        width:30%;
        /*  border-radius:0 0 16px 16px;*/
    }
    .logo{margin-left:20px}
    .search-wrap{display: none;}
    .nav-right{margin-right:0px}
    .whatsapp-icon{margin-right: 20px;}
    .hero{min-height: 300px}
    .hero-title{font-size: clamp(3rem,6vw,8rem);}
    .hero-email{width:85%}
    .company-main{height: 450px;}
    .company-side{grid-template-columns: 1fr 0;
        display: block;
        flex-direction: column;
        gap: 24px;
    }
    .company-side .company-side-card:nth-child(1) {
        margin-bottom: 25px;
    }
    .company-side-inner p {
        width: auto;
    }
    .menu-toggle{margin-right: 20px;}

    .company-main-inner {
        position: relative;
        padding: 90px 32px;
        margin: 0 auto;
        text-align: center;
    }
    .company-main-inner .section-title {
        font-size: 2rem;
        width: 100%;
        margin: auto auto 20px auto;
    }
    .company-main-inner p{line-height: 20px;}
    .company-side-card{ width:100%;min-height:200px}
    .newsletter-row{
        grid-template-columns:1fr;
    }
    .prod-grid-3 .prod-card:nth-child(n+5) {display: none;}

    .footer-social{justify-content:flex-start;}
    .contact-layout{gap:18px;}
    .newsletter-title {font-size: .5rem;}
    .trending-grid .trend-block. nbhgvykt:nth-child(n+3) {display: none;}
    .footer-cols{grid-template-columns: 1fr 1fr;}
}

@media(max-width:450px){
    .logo-grid{grid-template-columns: 1fr 1fr;}
    .whatsapp-icon{display: none;}
    .phone-pill{margin-right: 20px;display: none;}
    .hero-email button{width: 35%;}
    section{margin-top: 40px;}
    .newsletter-row{display:block}
    .newsletter-title{display:block;font-size: 1.5rem;}
    .newsletter-search{margin: 20px 0;}
    .nav-mobile-open nav {width: 70%;top: 0px;height: 100vh; }
    .nav-mobile-open nav ul{display: flex; margin: 60px 20px 0px 30px;font-size: 1.5rem; line-height: 40px;}
    .nav-mobile-open .submenu{margin: 0px;top: 0px;line-height: 15px;display: block;float: left;
        position: relative;min-width: 100px;box-shadow:none;}
    /* 鼠标移上“About”时显示二级菜单 */
    .submenu{display:none;height:0px;margin: 0px;padding:0px}
    nav ul > li.has-submenu:hover > .submenu{opacity:1;visibility:visible;transform:translateY(0);
        display:block;height: auto; padding: 10px 0px 0 0px;top:0px}
    .nav ul > li {padding:0px}
    .submenu a{padding: 8px 0px}
}


/** 文本超出省略号 **/
.omit{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* 网站面包屑 */
.breadcrumb {
    margin: 30px 0;
    padding-bottom: 30px;
    font-size: 14px;
    color: var(--muted);
    border-bottom: 1px solid var(--line);
}

/* 整个内容再包一层，让内容不贴边，并有卡片感 */
.body-shell {
    background: transparent;
    border-radius: 0;
}

/* 四等分布局：左 1/4，右 3/4 */
.body-layout {
    display: grid;
    grid-template-columns: 1fr 3fr; /* 左 1 右 3 */
    gap: 24px;
    align-items: flex-start;
}

/* ========== 左侧栏（占全宽的 1/4） ========== */
.case-sidebar {
    background: var(--surface);
    border-radius: var(--radius);
    padding: 30px 30px 50px 30px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    box-shadow: var(--shadow);
}

.sidebar-block {
    border-bottom: 1px solid var(--line);
    padding-bottom: 12px;
    margin-bottom: 10px;
}

.sidebar-block:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.sidebar-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--text);
}

.sidebar-title span {
    font-size: 13px;display: none;
    color: var(--muted);
}


/* Case 菜单 */
.case-menu{margin-bottom: 15px;}
.case-menu > li {
    margin-bottom: 6px;
}

.case-menu-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    padding: 8px 18px 10px 0px;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.2s, color 0.2s;
    color: var(--text);
}

.case-menu-link:hover {
    background: #eef3ff;
    color: var(--primary);width: 105%;left: -10px;position: relative;padding-left: 20px;
}
.case-menu-link.on {
     background: #eef3ff;
     color: var(--primary);width: 105%;left: -10px;position: relative;padding-left: 20px;
 }

.case-menu-link .toggle-icon {
    font-size: 12px;
    color: var(--muted);
    margin-left: 6px;
    transition: transform 0.2s;
}

.case-submenu {
    margin-left: 4px;
    margin-top: 4px;
    padding-left: 10px;
    border-left: 2px solid #eef1f8;
    display: none;
}

.case-submenu li {
    font-size: 13px;
    padding: 4px 0;
    cursor: pointer;
    color: var(--muted);
    transition: color 0.2s;
}

.case-submenu li:hover,.case-submenu li.active {
    color: var(--primary);
}

.case-menu-link.active {
    color: var(--primary);
    font-weight: 600;
    background: #eef3ff;left: -10px;width: 105%;padding-left: 20px;position: relative
}

.case-menu-link.active .toggle-icon {
    transform: rotate(90deg);
    color: var(--primary);
}

/* Alt 热门标签 */
.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;margin-bottom: 20px;
}

.tag {
    font-size: 12px;
    padding: 5px 10px;
    border-radius: 999px;
    background: #eff3fb;
    color: #425075;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid transparent;
}

.tag:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: #f4f6ff;
}

/* Contact 咨询 */
.contact-box {
    font-size: 14px;
    color: var(--muted);
}

.contact-item {
    margin-bottom: 10px;
}

.contact-btn {
    margin-top: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 18px;
    border-radius: 999px;
    border: none;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s;
    box-shadow: 0 5px 10px rgba(31,95,255,0.35);
    white-space: nowrap;width: 100%;
}

.contact-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 12px rgba(31,95,255,0.45);
}

.contact-btn:active {
    transform: translateY(0);
    box-shadow: 0 6px 12px rgba(31,95,255,0.35);
    opacity: 0.95;
}

.contact-box .tel {
    color: var(--primary);font-size: 20px;font-weight: 600;padding-bottom: 5px
}

/* ========== 右侧案例区域（占全宽的 3/4） ========== */

/* 案例列表：桌面 4 列 */
.case-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.case-card {
    background: var(--surface);
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--line);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.25s ease, transform 0.25s ease,
    border-color 0.25s ease;
}

.case-card:hover {
    box-shadow: var(--shadow);
    transform: translateY(-3px);

}

/* 4:3 比例图 */
.case-thumb-wrapper {
    /*position: relative;*/
    /*width: 100%;*/
    /*padding-top: 75%; !* 4:3 比例 *!*/
    /*background: #dde4f3;*/
    /*overflow: hidden;*/
}
.case-thumb-wrapper img{top: 0px;}

.case-thumb {
    /*position: absolute;*/
    inset: 0;
    width: 100%;
    /*height: 100%;*/
    object-fit: cover;
}

.case-card-body {
    padding: 10px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;    margin: 10px 10px;text-align: center;
}

.case-card-title {
    font-size: 14px;
    font-weight: 600;
    color: #151a33;
}

.case-card-subtitle {
    font-size: 12px;
    color: var(--muted);
}

/* 分页 */
.pagination {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 40px;
    flex-wrap: wrap;
}

.pagination a {
    min-width: 25px;
    width: 3rem;
    height: 32px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--surface);
    font-size: 13px;
    color: #3b4664;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    padding: 0 10px;
}

.pagination a:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: #f3f6ff;
}

.pagination a.curr {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
    box-shadow: 0 8px 20px rgba(31,95,255,0.5);
}

.page-btn.disabled {
    cursor: default;
    color: #b4bfd6;
    border-color: #e0e6f2;
    background: #f4f6fb;
    box-shadow: none;
}

/* --- 响应式 --- */

/* 1200 以下：显示 menu 按钮，隐藏水平菜单，使用下拉 */
@media (max-width:1200px){
    nav ul{
        display:none;
    }
    .menu-toggle{
        display:flex;
    }

    .logo{
        margin-left:20px;
    }
    /* 当 body 上有 .nav-mobile-open 时，显示菜单 */
    .nav-mobile-open nav{width:100%;}
    .nav-mobile-open nav ul{
        /*display:flex;*/
        display:block
    }
}

.search-toggle{
    width:25px;
    height:25px;
    border-radius:50%;
    display:grid;
    place-items:center;
    transition:border .3s,transform .3s;
}
.search-toggle:hover{
    border-color:var(--primary);
    transform:translateY(-2px);
}
.search-wrap{position:relative}
.search-panel{
    position:absolute;
    top:120%;
    right:0;
    width:clamp(260px,28vw,380px);
    padding:18px;
    border-radius:18px;
    background:#fff;
    box-shadow:var(--shadow);
    display:none;
}
.search-panel.active{display:block}
.search-panel input{
    width:100%;
    border-radius:999px;
    border:1px solid var(--line);
    padding:10px 16px;
    font-size:.95rem;
}

.phone-pill-icon{
    width:20px;height:20px;display:grid;place-items:center;font-size:.8rem;
}
.whatsapp-icon{
    width:36px;height:36px;
    border-radius:50%;
    /*  background:rgba(0,190,199,.12); */
    display:grid;
    place-items:center;
    color:#00c300;
    font-size:1.1rem;
}



/* FOOTER + Newsletter */
footer{
    margin-top:80px;
    background:var(--bg-soft);
    padding:36px var(--gutter) 24px;
}
.footer-inner{
    max-width:var(--max-width);
    margin:0 auto;
}
.newsletter-row{
    display:grid;
    grid-template-columns:2fr 3fr 1.5fr;
    align-items:center;
    gap:18px;
    margin:30px 0 50px 0px;
}
.newsletter-title{
    font-weight:600;
    font-size:1.8rem;
}
.newsletter-search{
    display:flex;
    align-items:stretch;
    border-radius:999px;
    overflow:hidden;
    background:#fff;

}
.newsletter-search input{
    flex:1;
    border:none;
    padding:10px 20px;
    font-size:.8rem;
}
.newsletter-search button{
    background:var(--primary);
    color:#fff;
    padding:0 18px;
    font-weight:600;
    font-size:.9rem;
    width: 8rem;
    white-space:nowrap;
}
.footer-social{
    display:flex;
    justify-content:flex-end;
    gap:10px;
}
.footer-social a{
    width:40px;height:40px;border-radius:30px;
    background:#fff;
    display:grid;place-items:center;
    font-size:.9rem;
    color:var(--text);
    box-shadow:0 8px 18px rgba(0,0,0,.04);
}

.footer-cols{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:20px;
    margin-top:16px;
    font-size:.9rem;
    border-top:1px solid #e1e7f2;
    padding-top:40px;
}
.footer-cols h4{
    font-size:.95rem;
    margin-bottom:8px;
    font-weight:600;
}
.footer-cols ul{
    list-style:none;
    display:grid;
    gap:4px;
    line-height:25px;
}
.footer-cols li{
    color:var(--muted);
    cursor:pointer;
    transition:color .25s;font-size: .8rem;
}
.footer-cols li:hover{color:var(--primary);}
.footer-bottom{
    margin-top:100px;
    border-top:1px solid #e1e5f0;
    padding-top:20px;
    display:flex;
    justify-content:space-between;
    gap:10px;
    font-size:.8rem;
    color:var(--muted);
    flex-wrap:wrap;
}

input:focus {
    outline: none;
}
textarea:focus {
    outline: none; /* 直接移除默认黑框 */
}
button:focus {
    outline: none;
}
.hero-email input::placeholder {
    color: var(--muted);
    opacity: 1; /* 确保颜色完全不透明（部分浏览器默认半透明） */
}
/* 针对旧版 WebKit 内核浏览器（如旧版 Safari）的兼容写法 */
.hero-email input::-webkit-input-placeholder {
    color: var(--muted);
    opacity: 1;
}

/* 针对旧版 Firefox 的兼容写法 */
.hero-email input::-moz-placeholder {
    color: var(--muted);
    opacity: 1;
}

/* 针对旧版 IE 的兼容写法 */
.hero-email input:-ms-input-placeholder {
    color: var(--muted);
    opacity: 1;
}

.hero-email input {
    color: #000;
    flex:1;
    border:none;
}



/* 响应 */



@media(max-width:1200px){
    .nav-mobile-open nav {width: 100%;top: 80px;}
    .nav-mobile-open .submenu li{padding-right: 0px;}
    nav ul > li.has-submenu:hover > .submenu{top: 25px;}

    .newsletter-row{
        grid-template-columns:1.4fr 2fr;
        grid-template-rows:auto auto;
    }
    .newsletter-row>.footer-social{
        grid-column:1/3;
        justify-content:flex-start;
    }
    .prod-grid-4 .prod-card:last-child {display: none;}
    .trend-block:nth-child(n+4) {display: none;}
    .newsletter-title{font-weight:600;font-size:1.6rem;}
}
@media(max-width:900px){
    nav ul{display:none;} /* 可按需换成汉堡菜单，这里保持简化 */
    .logo{margin-left:20px}
    .nav-right{margin-right:20px}

    .newsletter-title{font-weight:600;font-size:1.05rem;}
    .footer-cols{grid-template-columns:repeat(3,minmax(0,1fr));}
    .nav{height:80px;padding:12px 0;flex-wrap:wrap;}

}

@media(max-width:640px){
    .footer-cols{grid-template-columns:1fr;}
    .footer-bottom{ margin-top: 30px;}
    .logo{margin-left:20px}
    .search-wrap{display: none;}
    .nav-right{margin-right:0px}
    .whatsapp-icon{margin-right: 20px;}

    .company-main{height: 450px;}
    .company-side{grid-template-columns: 1fr 0;
        display: block;
        flex-direction: column;
        gap: 24px;
    }
    .company-side .company-side-card:nth-child(1) {
        margin-bottom: 25px;
    }
    .menu-toggle{margin-right: 20px;}

    .company-main-inner {
        position: relative;
        padding: 90px 32px;
        margin: 0 auto;
        text-align: center;
    }
    .company-main-inner .section-title {
        font-size: 2rem;
        width: 100%;
        margin: auto auto 20px auto;
    }
    .company-main-inner p{line-height: 20px;}
    .company-side-card{ width:100%;min-height:200px}
    .newsletter-row{
        grid-template-columns:1fr;
    }

    .footer-social{justify-content:flex-start;}
    .contact-layout{gap:18px;}
    .newsletter-title {font-size: .5rem;}

    .contact-card{padding: 50px 30px}
    .footer-cols{grid-template-columns: 1fr 1fr;}
}

@media(max-width:450px){
    .logo-grid{grid-template-columns: 1fr 1fr;}
    .whatsapp-icon{display: none;}
    .phone-pill{margin-right: 20px;display: none;}
    section{margin-top: 40px;}
    .newsletter-row{display:block}
    .newsletter-title{display:block;font-size: 1.5rem;}
    .newsletter-search{margin: 20px 0;}
    .nav-mobile-open nav {width: 70%;top: 0px;height: 100vh; }
    .nav-mobile-open nav ul{display: flex; margin: 60px 20px 0px 30px;font-size: 1.5rem; line-height: 40px;}
    .nav-mobile-open .submenu{margin: 0px;top: 0px;line-height: 15px;display: block;float: left;
        position: relative;min-width: 100px;box-shadow:none;}
    /* 鼠标移上“About”时显示二级菜单 */
    .submenu{display:none;height:0px;margin: 0px;padding:0px}
    nav ul > li.has-submenu:hover > .submenu{opacity:1;visibility:visible;transform:translateY(0);
        display:block;height: auto; padding: 10px 0px 0 0px;top:0px}
    .nav ul > li {padding:0px}
    .submenu a{padding: 8px 0px}
}


@media (max-width: 1250px) {
    .product-hero { flex-direction: column; text-align: center; }
    .body-layout {
        grid-template-columns: 280px 1fr;
    }
}


/* ========== 案例响应式 ========== */
@media (max-width: 1200px) {
    /* 右侧卡片变少一点列数 */
    .case-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 992px) {
    /* 布局仍是左右结构，但更紧凑 */
    .case-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    /* 小屏改成上下结构 */
    .case-page {
        margin: 16px auto;
        padding: 0 16px;
    }

    .body-layout {
        grid-template-columns: 1fr;
    }

    .case-sidebar {
        order: 1;
    }

    .case-main {
        order: 2;
    }

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

@media (max-width: 480px) {
    .case-grid {
        grid-template-columns: 1fr;
    }
    .case-main-title {
        font-size: 18px;
    }
}

/* 案例详情页主标题区 */
.command{width: 80%;
    margin: 0 auto;}
.caseDes-header {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 22px;
}

.caseDes-tag {
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(31,95,255,0.08);
    color: var(--primary);
    font-weight: 500;
    width: fit-content;
}

.caseDes-title {
    font-size: 26px;
    font-weight: 700;
    color: #0b1020;
}

.caseDes-subtitle {
    font-size: 14px;
    color: var(--muted);
}

/* 主内容区：左文右图布局 */
.caseDes-hero {
    display: grid;
    gap: 28px;
    margin-bottom: 20px;
    align-items: center;
}

.caseDes-hero-text {
    background: var(--surface);
    border-radius: var(--radius);
    padding: 35px;
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;    display: grid;
    grid-template-columns: 1fr 1fr;
}

.caseDes-hero-tagline {
    font-size: 13px;
    font-weight: none;
    letter-spacing: .03em;
    color: var(--muted);

}

.caseDes-hero-mainline {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 10px;
    color: #000;
}




.caseDes-hero-btns {
    display: block;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.btn-primary {
    border: none;
    cursor: pointer;
    padding: 9px 18px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 3px 5px rgba(31,95,255,0.4);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s;
    white-space: nowrap;width: 200px;float: right;
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(31,95,255,0.5);
}

.btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 10px 24px rgba(31,95,255,0.45);
    opacity: 0.95;
}





.caseDes-hero-badge {
    position: absolute;
    left: 16px;
    bottom: 16px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(7,10,23,0.86);
    color: #f7f9ff;
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    backdrop-filter: blur(10px);
}

.caseDes-hero-badge-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #00e6b0;
    box-shadow: 0 0 10px rgba(0,230,176,0.9);
}

/* 文章块通用 */
.caseDes-section {
    background: var(--surface);
    border-radius: var(--radius);
    padding: 35px;
    margin-bottom: 18px;
    box-shadow: var(--shadow);
}

.caseDes-section + .caseDes-section {
    margin-top: 6px;
}

.caseDes-section-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
    color: #111528;
}



.caseDes-text {
    font-size: 14px;
    color: var(--text);line-height: 24px;
}

.caseDes-text p + p {
    margin-top: 10px;
}

.caseDes-text strong {
    font-weight: 600;
}

.caseDes-list {
    margin-top: 8px;
    padding-left: 16px;
}

.caseDes-list li {
    font-size: 14px;
    color: var(--text);
    margin-bottom: 4px;
}

/* 关键词模块 */
.keywords-section {
    display: grid;

    gap: 18px;
    margin-top: 4px;

}

.keywords-section {
    background: var(--surface);
    border-radius: var(--radius);
    padding: 35px;
    box-shadow: var(--shadow);
    font-size: 12px;
    color: #445075;
    line-height: 22px;
}

.keywords-title {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 8px;
    color: #111528;
    display: inline-block;
}

.keyword-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.keyword-tag {
    padding: 7px 15px;
    border-radius: 999px;
    background: #eff3ff;
}
.keywords-box .part-2,.keywords-box .part-3 {
    border-top: 1px solid var(--line);
    margin-top: 15px;
    padding-top: 15px;
}

/* 相关文章列表（右边列模拟） */
.related-links-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 6px;
    color: #111528;
}

.related-links-list {
    font-size: 13px;
    color: var(--muted);display: grid;
    grid-template-columns: 1fr 1fr; /* 分成两列 */
    gap: 10px; /* 列之间的水平间距 */
    list-style-type: disc; /* 保留列表圆点（和参考图一致） */
    margin-top: 20px;
}

.related-links-list li {
    margin-bottom: 4px;
}

.related-links-list a {
    font-size: 12px;color: #445075;text-decoration: none;
}

.related-links-list a:hover {
    color:var(--primary);
}

/* 下方“模块到 Powder Coating Machine”（简化为分组列表） */
.caseDes-bottom-links {
    background: var(--surface);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    padding: 18px 20px 12px;
    box-shadow: var(--shadow);
}

.bottom-links-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 18px;
}

.bottom-column-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 6px;
    color: #111528;
}

.bottom-links-list {
    font-size: 13px;
    color: var(--muted);
}

.bottom-links-list li {
    margin-bottom: 4px;
}

.bottom-links-list a {
    color: var(--muted);
}

.bottom-links-list a:hover {
    color: var(--primary);
}



/* 响应 */

@media(max-width:1200px){
    .nav-mobile-open nav {width: 100%;top: 80px;}
    .nav-mobile-open .submenu li{padding-right: 0px;}
    nav ul > li.has-submenu:hover > .submenu{top: 25px;}

    .newsletter-row{
        grid-template-columns:1.4fr 2fr;
        grid-template-rows:auto auto;
    }
    .newsletter-row>.footer-social{
        grid-column:1/3;
        justify-content:flex-start;
    }
    .prod-grid-4 .prod-card:last-child {display: none;}
    .trend-block:nth-child(n+4) {display: none;}
    .newsletter-title{font-weight:600;font-size:1.6rem;}
    .caseDes-hero {
        grid-template-columns: 1fr;
    }
    .bottom-links-grid {
        grid-template-columns: repeat(4, minmax(0,1fr));
    }
    .command{width: 100%;
        margin: 0 auto;}
}


@media(max-width:900px){
    nav ul{display:none;} /* 可按需换成汉堡菜单，这里保持简化 */
    .logo{margin-left:5%}
    .nav-right{margin-right:20px}

    .newsletter-title{font-weight:600;font-size:1.05rem;}
    .footer-cols{grid-template-columns:repeat(3,minmax(0,1fr));}
    .nav{height:80px;padding:12px 0;flex-wrap:wrap;}

    .caseDes-hero {
        grid-template-columns: 1fr;
    }

    .keywords-section {
        grid-template-columns: 1fr;
    }
    .bottom-links-grid {
        grid-template-columns: repeat(3, minmax(0,1fr));
    }
    .related-links-list{grid-template-columns:1fr}

}

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

    .footer-bottom {
        margin-top: 30px;
    }

    .logo {
        margin-left: 20px
    }

    .search-wrap {
        display: none;
    }

    .nav-right {
        margin-right: 0px
    }

    .whatsapp-icon {
        margin-right: 20px;
    }

    .company-main {
        height: 450px;
    }

    .company-side {
        grid-template-columns: 1fr 0;
        display: block;
        flex-direction: column;
        gap: 24px;
    }

    .company-side .company-side-card:nth-child(1) {
        margin-bottom: 25px;
    }

    .menu-toggle {
        margin-right: 20px;
    }

    .company-main-inner {
        position: relative;
        padding: 90px 32px;
        margin: 0 auto;
        text-align: center;
    }

    .company-main-inner .section-title {
        font-size: 2rem;
        width: 100%;
        margin: auto auto 20px auto;
    }

    .company-main-inner p {
        line-height: 20px;
    }

    .company-side-card {
        width: 100%;
        min-height: 200px
    }

    .newsletter-row {
        grid-template-columns:1fr;
    }
}

.main-page h3 {
    font-size: 22px;
    border-bottom: 1px solid var(--line);
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.main-page {
    line-height: 24px;
    background: var(--surface);
    border-radius: var(--radius);
    padding: 35px;
    box-shadow: var(--shadow);
    margin-bottom: 20px;
}

.main-page table {
    width: auto !important;
}

/* --- Main Content --- */
.product-hero {
    display: flex;
    gap: 30px;
    align-items: center;
}

.product-hero img {
    width: 350px;
    border-radius: 8px;
}

.hero-info h4 { color: #999; font-weight: normal; font-size: 14px; }
.hero-info h1 { font-size: 26px; margin: 10px 0; }
.hero-info p { font-size: 13px; color: var(--text-gray); margin-bottom: 20px; }

.btn-group {
    display: flex;
    gap: 15px;
}

.btn-outline {
    border: 1px solid var(--primary);
    color: var(--primary);
    padding: 10px 25px;
    border-radius: 20px;
    text-decoration: none;
    font-size: 14px;
}

.btn-solid {
    background: var(--primary);
    color: white;
    padding: 10px 25px;
    border-radius: 20px;
    text-decoration: none;
    font-size: 14px;
}

@media (max-width: 992px) {
    .main-layout { grid-template-columns: 1fr; }
    .footer-cols { grid-template-columns: repeat(2, 1fr); }
    .newsletter-flex { flex-direction: column; gap: 20px; text-align: center; }
}

/* 新闻列表：6个，图片比例 4:3 */
.news-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}
@media (max-width: 450px){
    .news-grid {
        grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 24px;
    }
}
.news-card {
    background: var(--surface);
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--line);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.25s ease, transform 0.25s ease,
    border-color 0.25s ease;
}

.news-card:hover {
    box-shadow: var(--shadow);
    transform: translateY(-3px);

}

/* 4:3 图片区域 */
.news-thumb-wrapper {
    position: relative;
    width: 100%;
    padding-top: 75%; /* 4:3 比例 */
    background: #dde4f3;
    overflow: hidden;
}

.news-thumb-wrapper .case-thumb {
    position: absolute;
inset: 0;
    width: 100%;
     height: 100%;
    top: 0px;
    object-fit: cover;
}

.news-thumb {
    position: absolute;
    inset: 0;top:0px;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.news-card-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.news-card-title {
    font-size: 16px;
    font-weight: 600;
    color: #151a33;
}

.news-card-subtitle {
    font-size: 13px;
    color: var(--muted);
}

.news-card-meta {
    font-size: 12px;
    color: #000;
    margin-top: 4px;font-weight: 600;
}
@media (max-width: 450px) {
    .caseDes-title {
        font-size: 20px;
    }
}
@media (max-width: 640px) {
    .caseDes-title {
        font-size: 22px;
    }
}
@media (max-width: 450px) {
    .caseDes-subtitle {
        font-size: 13px;
    }
}
@media (max-width: 900px) {
    .caseDes-hero {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 450px) {
    .caseDes-hero-text {
        grid-template-columns: 1fr;
        padding: 30px 30px 40px 30px;
    }
}
@media (max-width: 450px) {
    .btn-primary {
        float: none;
    }
}

/*搜索*/
.search-main {
    padding: 30px 0;
}

.search-title {
    font-size: 24px;
    margin-bottom: 40px;
    font-weight: 600;
}

.search-title span {
    color: var(--primary);
}
.no-results-box span {
    color: var(--primary);
}

.results-card {
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
}

.result-item {
    display: block;
    padding: 20px 30px;
    font-size: 13px;
    color: var(--text-gray);
    border-bottom: 1px solid var(--line);
    position: relative;
}

.result-item:last-child {
    border-bottom: none;
}

.result-item::before {
    content: "•";
    position: absolute;
    left: 15px;
    color: #ccc;
}

.result-item:hover {
    background-color: #fcfcfc;
    color: var(--primary);
    padding-left: 35px;
}

/* --- Newsletter --- */
.newsletter {
    background-color: #f4f7ff;
    padding: 50px 0;
    margin-top: 40px;
}

.newsletter-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.newsletter h2 {
    font-size: 22px;
    max-width: 300px;
    line-height: 1.2;
}

.subscribe-form {
    display: flex;
    background: white;
    padding: 5px;
    border-radius: 35px;
    width: 100%;
    max-width: 550px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.subscribe-form input {
    flex: 1;
    border: none;
    padding: 10px 25px;
    border-radius: 35px;
    outline: none;
    font-size: 14px;
}

.subscribe-form button {
    background: var(--primary);
    color: white;
    border: none;
    padding: 10px 35px;
    border-radius: 35px;
    cursor: pointer;
    font-weight: bold;
}

.social-icons {
    display: flex;
    gap: 15px;
    font-size: 20px;
}
.no-results-box {
    margin: 0 auto;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 80px 40px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
}
.no-results-box h2 {
    font-size: 26px;
    margin-bottom: 15px;
    color: #000;
}
.no-results-box p {
    font-size: 14px;
    line-height: 25px;
    color: var(--text-gray);
}

/*online*/
/* 主内容 */
.online-content {
    background: var(--surface);
    border-radius: var(--radius);
    padding: 30px 28px;
    box-shadow: var(--shadow);
    text-align: center;width: 80%;
    margin: 0 auto;
}

.online-title {
    font-size: 24px;
    font-weight: 600;
    margin: 25px 0px 5px 0px;
    color: #111528;
}

.online-subtitle {
    font-size: 14px;
    color: var(--muted);
    margin-bottom: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin:0 auto 20px;width: 80%;
}

.form-input,
.form-textarea {
    width: 100%;
    border-radius: 6px;
    border: 1px solid var(--line);
    padding: 10px 14px;
    font-size: 14px;
    font-family: inherit;
    color: var(--text);
    background: #fdfdff;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease,
    background 0.15s ease;
}

.form-input:focus,
.form-textarea:focus {
    border-color: var(--primary);
    background: #ffffff;
    box-shadow: 0 0 0 1px rgba(31,95,255,0.1);
}

.form-textarea {
    resize: vertical;
    min-height: 100px;
    max-height: 220px;
}

.btn-submit {
    border: none;
    cursor: pointer;
    padding: 12px 24px;
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    box-shadow: 0 12px 25px rgba(31,95,255,0.35);
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s;width: 150px;
}

.btn-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 30px rgba(31,95,255,0.45);
}

.btn-submit:active {
    transform: translateY(0);
    box-shadow: 0 10px 20px rgba(31,95,255,0.35);
    opacity: 0.95;
}


/* 响应 */

@media(max-width:1200px){
    .nav-mobile-open nav {width: 100%;top: 80px;}
    .nav-mobile-open .submenu li{padding-right: 0px;}
    nav ul > li.has-submenu:hover > .submenu{top: 25px;}

    .newsletter-row{
        grid-template-columns:1.4fr 2fr;
        grid-template-rows:auto auto;
    }
    .newsletter-row>.footer-social{
        grid-column:1/3;
        justify-content:flex-start;
    }
    .prod-grid-4 .prod-card:last-child {display: none;}
    .trend-block:nth-child(n+4) {display: none;}
    .newsletter-title{font-weight:600;font-size:1.6rem;}
}
@media(max-width:900px){
    nav ul{display:none;} /* 可按需换成汉堡菜单，这里保持简化 */
    .logo{margin-left:20px}
    .nav-right{margin-right:20px}

    .newsletter-title{font-weight:600;font-size:1.05rem;}
    .footer-cols{grid-template-columns:repeat(3,minmax(0,1fr));}
    .nav{height:80px;padding:12px 0;flex-wrap:wrap;}

}

@media(max-width:640px){
    .footer-cols{grid-template-columns:1fr;}
    .footer-bottom{ margin-top: 30px;}
    .logo{margin-left:20px}
    .search-wrap{display: none;}
    .nav-right{margin-right:0px}
    .whatsapp-icon{margin-right: 20px;}

    .company-main{height: 450px;}
    .company-side{grid-template-columns: 1fr 0;
        display: block;
        flex-direction: column;
        gap: 24px;
    }
    .company-side .company-side-card:nth-child(1) {
        margin-bottom: 25px;
    }
    .menu-toggle{margin-right: 20px;}

    .company-main-inner {
        position: relative;
        padding: 90px 32px;
        margin: 0 auto;
        text-align: center;
    }
    .company-main-inner .section-title {
        font-size: 2rem;
        width: 100%;
        margin: auto auto 20px auto;
    }
    .company-main-inner p{line-height: 20px;}
    .company-side-card{ width:100%;min-height:200px}
    .newsletter-row{
        grid-template-columns:1fr;
    }

    .footer-social{justify-content:flex-start;}
    .contact-layout{gap:18px;}
    .newsletter-title {font-size: .5rem;}

    .contact-card{padding: 50px 20px 50px 45px;}
    .footer-cols{grid-template-columns: 1fr 1fr;}
}

@media(max-width:450px){
    .logo-grid{grid-template-columns: 1fr 1fr;}
    .whatsapp-icon{display: none;}
    .phone-pill{margin-right: 20px;display: none;}
    section{margin-top: 40px;}
    .newsletter-row{display:block}
    .newsletter-title{display:block;font-size: 1.5rem;}
    .newsletter-search{margin: 20px 0;}
    .nav-mobile-open nav {width: 70%;top: 0px;height: 100vh; }
    .nav-mobile-open nav ul{display: flex; margin: 60px 20px 0px 30px;font-size: 1.5rem; line-height: 40px;}
    .nav-mobile-open .submenu{margin: 0px;top: 0px;line-height: 15px;display: block;float: left;
        position: relative;min-width: 100px;box-shadow:none;}
    /* 鼠标移上“About”时显示二级菜单 */
    .submenu{display:none;height:0px;margin: 0px;padding:0px}
    nav ul > li.has-submenu:hover > .submenu{opacity:1;visibility:visible;transform:translateY(0);
        display:block;height: auto; padding: 10px 0px 0 0px;top:0px}
    .nav ul > li {padding:0px}
    .submenu a{padding: 8px 0px}
}

.hero-text {
    position: absolute;
    top: 160px;
    color: #fff;
    text-align: center;
    width: 100%;
    justify-content: center;
}