/* ========== Reset ========== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:"Microsoft YaHei","PingFang SC","Helvetica Neue",Arial,sans-serif;color:#333;background:#f5f6f8;line-height:1.7;min-width:320px}
img{max-width:100%;height:auto;vertical-align:middle}
a{color:#d32f2f;text-decoration:none;transition:color .25s}
a:hover{color:#b71c1c}
ul,ol{list-style:none}
.container{max-width:1260px;margin:0 auto;padding:0 20px}

/* ========== Header Top Bar ========== */
.header-top{background:#1a1a2e;color:#ccc;font-size:13px;line-height:36px}
.header-top .container{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap}
.top-contact{display:flex;gap:18px}
.top-contact span{display:flex;align-items:center;gap:5px}
.top-contact svg{flex-shrink:0}

/* ========== Header Main ========== */
.header-main{background:#fff;box-shadow:0 2px 20px rgba(0,0,0,.06);position:sticky;top:0;z-index:1000}
.header-main .container{display:flex;align-items:center;justify-content:space-between;height:80px;gap:30px}

/* Logo */
.logo{display:flex;align-items:center;gap:12px;flex-shrink:0;text-decoration:none}
.logo-icon{flex-shrink:0}
.logo-img{display:block;height:40px;width:auto;max-width:160px;object-fit:contain;border-radius:4px}
.logo-text h1{font-size:24px;color:#1a1a2e;font-weight:700;line-height:1.3;white-space:nowrap}
.logo-text p{font-size:12px;color:#888;line-height:1;margin-top:4px;max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Nav */
.nav ul{display:flex;gap:0;align-items:center}
.nav > ul > li{position:relative}
.nav > ul > li > a{display:flex;align-items:center;gap:4px;padding:28px 18px;font-size:16px;font-weight:500;color:#333;text-decoration:none;transition:all .25s;white-space:nowrap}
.nav > ul > li > a:hover,
.nav > ul > li.active > a,
.nav > ul > li:hover > a{color:#d32f2f}
.nav > ul > li.active > a::after{content:'';position:absolute;bottom:0;left:18px;right:18px;height:3px;background:#d32f2f;border-radius:3px 3px 0 0}

/* Arrow */
.arrow{display:inline-block;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #888;margin-left:3px;transition:transform .25s}
.nav > ul > li:hover > a .arrow{transform:rotate(180deg);border-top-color:#d32f2f}

/* Dropdown */
.nav .submenu{position:absolute;top:100%;left:0;background:#fff;min-width:180px;box-shadow:0 8px 30px rgba(0,0,0,.12);border-radius:0 0 6px 6px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:all .25s;z-index:999;padding:8px 0;display:block;list-style:none;margin:0}
.nav .submenu li{display:block;width:100%;margin:0;padding:0;float:none}
.nav > ul > li:hover > .submenu{opacity:1;visibility:visible;transform:translateY(0)}
.nav .submenu li a{display:block;padding:10px 20px;font-size:14px;color:#555;border-left:3px solid transparent;transition:all .2s}
.nav .submenu li a:hover{color:#d32f2f;background:#fef5f5;border-left-color:#d32f2f}

/* Mobile Toggle */
.mobile-toggle{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px}
.mobile-toggle span{display:block;width:28px;height:3px;background:#333;border-radius:2px;transition:all .3s}
.mobile-toggle.active span:nth-child(1){transform:rotate(45deg) translate(5px,6px)}
.mobile-toggle.active span:nth-child(2){opacity:0}
.mobile-toggle.active span:nth-child(3){transform:rotate(-45deg) translate(5px,-6px)}

/* ========== Page Banner ========== */
.page-banner{padding:60px 0;text-align:center;position:relative;overflow:hidden;background-color:#1a1a2e;background-position:center;background-size:cover;background-repeat:no-repeat}
.page-banner::before{content:'';position:absolute;inset:0;background:rgba(26,26,46,.7)}
.page-banner .container{position:relative;z-index:1}
.page-banner h2{font-size:32px;color:#fff;font-weight:700}

/* ========== Breadcrumb ========== */
.breadcrumb{padding:16px 0;font-size:14px;color:#888;border-bottom:1px solid #eee;margin-bottom:25px}
.breadcrumb a{color:#666}
.breadcrumb a:hover{color:#d32f2f}
.breadcrumb .sep{margin:0 8px;color:#ccc}

/* ========== Main Layout ========== */
.main-layout{display:flex;gap:35px;padding:30px 20px 50px}
.content-area{flex:1;min-width:0;background:#fff;border-radius:8px;padding:30px;box-shadow:0 2px 12px rgba(0,0,0,.04)}

/* ========== Sidebar ========== */
.sidebar{width:260px;flex-shrink:0}
.sidebar-title{background:#d32f2f;border-radius:8px 8px 0 0;padding:18px 20px}
.sidebar-title h3{color:#fff;font-size:20px;font-weight:600}
.sidebar-nav{background:#fff;border:1px solid #e8e8e8;border-top:none;border-radius:0 0 8px 8px;overflow:hidden}
.sidebar-nav li{border-bottom:1px solid #f0f0f0}
.sidebar-nav li:last-child{border-bottom:none}
.sidebar-nav li a{display:block;padding:14px 20px;font-size:15px;color:#555;transition:all .2s;position:relative}
.sidebar-nav li a:hover,
.sidebar-nav li.active a{color:#d32f2f;background:#fef5f5;padding-left:24px}
.sidebar-nav li.active a::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:#d32f2f}
.sidebar-contact{margin-top:20px;background:#1a1a2e;color:#ccc;border-radius:8px;padding:20px;font-size:13px;line-height:2}
.sidebar-contact h4{color:#fff;font-size:16px;margin-bottom:10px}
.sidebar-contact p strong{color:#fff}

/* ========== Article List ========== */
.article-item{display:flex;gap:20px;padding:22px 0;border-bottom:1px solid #f0f0f0;align-items:flex-start}
.article-item:first-child{padding-top:0}
.article-item:last-child{border-bottom:none}
.article-thumb{flex-shrink:0;width:200px;height:140px;border-radius:6px;overflow:hidden;display:block;background:#f0f0f0}
.article-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.article-thumb:hover img{transform:scale(1.05)}
.article-info{flex:1;min-width:0}
.article-info h3{font-size:18px;font-weight:600;margin-bottom:8px}
.article-info h3 a{color:#1a1a2e}
.article-info h3 a:hover{color:#d32f2f}
.article-meta{display:flex;gap:18px;font-size:13px;color:#999;margin-bottom:8px}
.article-meta span{display:flex;align-items:center;gap:4px}
.article-desc{font-size:14px;color:#777;line-height:1.6;margin-bottom:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.read-more{font-size:13px;color:#d32f2f;font-weight:500}

/* ========== Pagination ========== */
.pagination-box{margin-top:30px;text-align:center}
.pagination-box ul{display:inline-flex;gap:6px;flex-wrap:wrap;justify-content:center}
.pagination-box li{list-style:none}
.pagination-box a,
.pagination-box span{display:inline-block;min-width:38px;height:38px;line-height:38px;text-align:center;border-radius:6px;font-size:14px;background:#f5f5f5;color:#666;text-decoration:none;transition:all .2s;padding:0 8px}
.pagination-box a:hover{background:#d32f2f;color:#fff}
.pagination-box .active span,
.pagination-box .current{background:#d32f2f;color:#fff;font-weight:600}
.pagination-box .disabled{color:#ccc;cursor:default}
.pagination-box .pagination ul{display:inline-flex;gap:6px;flex-wrap:wrap;justify-content:center}
.pagination-box .pagination li{list-style:none}
.pagination-box .pagination a,
.pagination-box .pagination span{display:inline-block;min-width:38px;height:38px;line-height:38px;text-align:center;border-radius:6px;font-size:14px;background:#f5f5f5;color:#666;text-decoration:none;transition:all .2s;padding:0 8px}
.pagination-box .pagination a:hover{background:#d32f2f;color:#fff}
.pagination-box .pagination .active span{background:#d32f2f;color:#fff;font-weight:600}

/* ========== Article Detail ========== */
.article-detail h1{font-size:26px;color:#1a1a2e;line-height:1.4;margin-bottom:16px}
.article-meta-bar{display:flex;gap:20px;font-size:13px;color:#999;padding-bottom:16px;border-bottom:1px solid #f0f0f0;margin-bottom:25px}
.article-meta-bar span{display:flex;align-items:center;gap:5px}
.article-content{font-size:16px;line-height:1.9;color:#444}
.article-content p{margin-bottom:16px}
.article-content img{max-width:100%;height:auto;border-radius:6px;margin:15px 0}
.article-content h2,.article-content h3,.article-content h4{color:#1a1a2e;margin:24px 0 14px}
.article-pager{margin-top:40px;padding-top:20px;border-top:1px solid #eee}.article-pager-row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}.article-pager-row a{font-size:14px;color:#555;text-decoration:none;max-width:48%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.article-pager-row a:hover{color:#d32f2f}.article-pager-row a:first-child::before{content:'\2190 上一篇：';color:#d32f2f;font-weight:600}.article-pager-row a:last-child::before{content:'下一篇：\2192';color:#d32f2f;font-weight:600}.article-pager-bottom{margin-top:16px;text-align:center}
.btn-back{display:inline-block;padding:10px 28px;border:1px solid #ddd;border-radius:6px;font-size:14px;color:#666;transition:all .2s}
.btn-back:hover{background:#f5f5f5;color:#333}

/* ========== Page Content ========== */
.page-content .page-heading{font-size:26px;color:#1a1a2e;margin-bottom:25px;padding-bottom:15px;border-bottom:2px solid #d32f2f;display:inline-block}
.content-body{font-size:16px;line-height:1.9;color:#444}
.content-body p{margin-bottom:16px}
.content-body img{max-width:100%;height:auto;border-radius:6px;margin:15px 0}

/* ========== Home Hero ========== */
.hero{position:relative;overflow:hidden;background:#1a1a2e;min-height:420px;display:flex;align-items:center}
.hero .container{position:relative;z-index:1}
.hero h2{font-size:40px;color:#fff;font-weight:700;margin-bottom:16px}
.hero p{font-size:18px;color:#ccc;max-width:600px;margin-bottom:30px}
.hero-btns{display:flex;gap:16px;flex-wrap:wrap}
.btn-primary{display:inline-block;padding:14px 36px;background:#d32f2f;color:#fff;border-radius:30px;font-size:16px;font-weight:600;text-decoration:none;transition:all .3s;box-shadow:0 4px 15px rgba(211,47,47,.3)}
.btn-primary:hover{background:#b71c1c;color:#fff;transform:translateY(-2px);box-shadow:0 6px 20px rgba(211,47,47,.4)}
.btn-outline{display:inline-block;padding:14px 36px;border:2px solid #fff;color:#fff;border-radius:30px;font-size:16px;font-weight:600;text-decoration:none;transition:all .3s}
.btn-outline:hover{background:#fff;color:#1a1a2e;transform:translateY(-2px)}

/* ========== Home Sections ========== */
.section{padding:60px 0}
.section-header{text-align:center;margin-bottom:40px}
.section-header h2{font-size:30px;color:#1a1a2e;margin-bottom:10px}
.section-header .divider{width:60px;height:3px;background:#d32f2f;margin:0 auto 12px;border-radius:2px}
.section-header p{font-size:16px;color:#888;max-width:600px;margin:0 auto}

/* Feature Grid */
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}
.feature-card{background:#fff;border-radius:10px;padding:35px 25px;text-align:center;box-shadow:0 4px 20px rgba(0,0,0,.04);transition:transform .3s,box-shadow .3s}
.feature-card:hover{transform:translateY(-6px);box-shadow:0 8px 30px rgba(0,0,0,.08)}
.feature-card .icon{width:64px;height:64px;background:linear-gradient(135deg,#d32f2f,#b71c1c);border-radius:16px;margin:0 auto 16px;display:flex;align-items:center;justify-content:center}
.feature-card .icon svg{width:30px;height:30px;fill:#fff}
.feature-card h3{font-size:18px;margin-bottom:8px;color:#1a1a2e}
.feature-card p{font-size:14px;color:#888;line-height:1.6}

/* Product Grid */
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}
.product-card{background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.04);transition:transform .3s}
.product-card:hover{transform:translateY(-4px)}
.product-card .prod-img{height:220px;background:#f0f3f8;display:flex;align-items:center;justify-content:center;overflow:hidden}
.product-card .prod-img img{width:100%;height:100%;object-fit:contain;transition:transform .3s}
.product-card:hover .prod-img img{transform:scale(1.08)}
.product-card .prod-info{padding:20px}
.product-card .prod-info h3{font-size:17px;margin-bottom:8px}
.product-card .prod-info h3 a{color:#1a1a2e}
.product-card .prod-info h3 a:hover{color:#d32f2f}
.product-card .prod-info p{font-size:13px;color:#888}

/* News Grid */
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}
.news-card{background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.04);transition:transform .3s}
.news-card:hover{transform:translateY(-4px)}
.news-card .news-img{height:180px;background:#f0f3f8;overflow:hidden}
.news-card .news-img img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.news-card:hover .news-img img{transform:scale(1.08)}
.news-card .news-info{padding:20px}
.news-card .news-info h3{font-size:16px;margin-bottom:8px;line-height:1.5}
.news-card .news-info h3 a{color:#1a1a2e}
.news-card .news-info h3 a:hover{color:#d32f2f}
.news-card .news-info .date{font-size:12px;color:#bbb}

/* About Preview */
.about-preview{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.about-img{background:#f0f3f8;border-radius:12px;overflow:hidden;height:360px;display:flex;align-items:center;justify-content:center}
.about-img img{width:100%;height:100%;object-fit:cover}
.about-content h3{font-size:28px;color:#1a1a2e;margin-bottom:20px}
.about-content p{font-size:16px;color:#666;line-height:1.8;margin-bottom:16px}

/* ========== Footer ========== */
.footer{background:#1a1a2e;color:#bbb;padding:50px 0 25px;margin-top:40px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1.5fr;gap:40px;margin-bottom:35px}
.footer-col h3{color:#fff;font-size:18px;margin-bottom:18px;position:relative;padding-bottom:10px}
.footer-col h3::after{content:'';position:absolute;left:0;bottom:0;width:30px;height:2px;background:#d32f2f}
.footer-col p{font-size:14px;line-height:1.8}
.footer-links ul li{margin-bottom:8px}
.footer-links ul li a{color:#bbb;font-size:14px;transition:color .2s;padding-left:0;transition:padding .2s,color .2s}
.footer-links ul li a:hover{color:#d32f2f;padding-left:5px}
.footer-contact ul li{display:flex;align-items:center;gap:8px;font-size:14px;margin-bottom:10px}
.footer-contact ul li svg{flex-shrink:0}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding-top:20px;text-align:center;font-size:13px;color:#888}
.footer-bottom a{color:#888}
.footer-bottom a:hover{color:#d32f2f}
.footer-social{margin-top:12px}
.geo-tag{display:inline-block;padding:4px 12px;background:rgba(211,47,47,.15);color:#d32f2f;border-radius:15px;font-size:13px}

/* ========== Empty / Error ========== */
.empty-list,.empty-page{text-align:center;padding:60px 20px;color:#999;font-size:16px}

/* ========== Home Index Sections (legacy classes) ========== */
/* Banner */
.banner{position:relative;overflow:hidden}
.swiper-container{position:relative;width:100%}
.swiper-wrapper{display:flex}
.swiper-slide{flex-shrink:0;width:100%}
.slide-bg{min-height:450px;background-size:cover;background-position:center;display:flex;align-items:center;position:relative}
.slide-bg::before{content:'';position:absolute;inset:0;background:rgba(0,0,0,.45)}
.slide-content{position:relative;z-index:1;color:#fff;max-width:600px}
.slide-content h2{font-size:42px;font-weight:700;margin-bottom:12px}
.slide-content p{font-size:18px;opacity:.9}
.swiper-pagination{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);display:flex;gap:10px;z-index:5}
.swiper-pagination span{width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.4);cursor:pointer;transition:all .3s}
.swiper-pagination span.active{background:#d32f2f;width:28px;border-radius:6px}
.swiper-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:44px;height:44px;background:rgba(255,255,255,.15);border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;transition:all .3s}
.swiper-btn:hover{background:rgba(255,255,255,.3)}
.swiper-prev{left:20px}
.swiper-next{right:20px}

/* Category Icons */
.cat-icons{background:#fff}
.cat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:25px}
.cat-card{background:#f8f9fb;border-radius:12px;padding:35px 25px;text-align:center;transition:all .3s;text-decoration:none;border:1px solid transparent}
.cat-card:hover{transform:translateY(-6px);box-shadow:0 8px 30px rgba(0,0,0,.08);border-color:#d32f2f}
.cat-card h3{color:#1a1a2e;font-size:18px;margin:15px 0 8px}
.cat-card p{color:#888;font-size:13px}
.cat-icon{width:64px;height:64px;margin:0 auto;display:flex;align-items:center;justify-content:center}

/* About Section */
.about-section{background:#f8f9fb}
.about-wrap{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.about-img{border-radius:12px;overflow:hidden;background:#e8e8e8;height:380px;display:flex;align-items:center;justify-content:center}
.about-img img{width:100%;height:100%;object-fit:cover}
.about-text .section-title{font-size:30px;color:#1a1a2e;margin-bottom:20px;text-align:left}
.about-desc{color:#666;font-size:15px;line-height:1.9;margin-bottom:25px}
.about-stats{display:flex;gap:35px;margin-bottom:25px}
.stat-item{text-align:center}
.stat-num{display:block;font-size:28px;font-weight:700;color:#d32f2f}
.stat-label{display:block;font-size:13px;color:#999;margin-top:4px}
.btn{display:inline-block;padding:12px 30px;border-radius:30px;font-size:15px;font-weight:600;text-decoration:none;transition:all .3s;cursor:pointer}
.btn-primary{background:#d32f2f;color:#fff;box-shadow:0 4px 15px rgba(211,47,47,.25)}
.btn-primary:hover{background:#b71c1c;color:#fff;transform:translateY(-2px);box-shadow:0 6px 20px rgba(211,47,47,.35)}

/* Product Home */
.product-home{background:#fff}
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}
.product-card{background:#fff;border-radius:10px;overflow:hidden;border:1px solid #eee;transition:all .3s}
.product-card:hover{transform:translateY(-4px);box-shadow:0 8px 30px rgba(0,0,0,.08)}
.product-thumb{display:block;height:220px;background:#f0f3f8;overflow:hidden}
.product-thumb img{width:100%;height:100%;object-fit:contain;transition:transform .3s}
.product-card:hover .product-thumb img{transform:scale(1.08)}
.product-info{padding:18px;text-align:center}
.product-name{font-size:16px;color:#1a1a2e;margin-bottom:6px}
.product-name a{color:#1a1a2e;text-decoration:none}
.product-name a:hover{color:#d32f2f}
.product-desc{font-size:13px;color:#888}

/* Case Home */
.case-home{background:#f8f9fb}
.case-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:25px}
.case-card{position:relative;border-radius:10px;overflow:hidden;display:block;text-decoration:none;height:240px}
.case-thumb{width:100%;height:100%}
.case-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.case-card:hover .case-thumb img{transform:scale(1.08)}
.case-overlay{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(0,0,0,.7));padding:30px 20px 20px;color:#fff}
.case-overlay h3{font-size:18px;font-weight:600}

/* Why Us */
.why-us{background:#fff}
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:25px}
.why-item{text-align:center;padding:35px 20px;background:#f8f9fb;border-radius:12px;transition:all .3s}
.why-item:hover{transform:translateY(-4px);box-shadow:0 8px 30px rgba(0,0,0,.06)}
.why-icon{font-size:42px;margin-bottom:15px}
.why-item h3{font-size:18px;color:#1a1a2e;margin-bottom:8px}
.why-item p{font-size:14px;color:#888}

/* News Home */
.news-home{background:#f8f9fb}
.news-wrap{display:grid;grid-template-columns:1fr 420px;gap:35px}
.news-list{list-style:none}
.news-list li{padding:14px 0;border-bottom:1px solid #e8e8e8}
.news-list li a{display:flex;align-items:center;text-decoration:none;color:#444;font-size:15px;transition:color .2s}
.news-list li a:hover{color:#d32f2f}
.news-date{flex-shrink:0;min-width:48px;font-size:12px;color:#999;margin-right:15px}
.news-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.contact-card{background:#1a1a2e;color:#ccc;border-radius:10px;padding:25px;margin-top:15px}
.cc-item{margin-bottom:10px;font-size:14px}
.cc-item strong{color:#fff}

/* Utility */
.bg-light{background:#f8f9fb}
.tac{text-align:center}
.section{padding:60px 0}
.section-title{font-size:30px;color:#1a1a2e;margin-bottom:8px}
.section-desc{font-size:15px;color:#888;margin-bottom:30px;max-width:600px;margin-left:auto;margin-right:auto}
.no-image{background:#f5f5f5!important;height:100%;display:flex;align-items:center;justify-content:center;color:#ccc;font-size:14px}
@media (max-width:1024px){
    .header-main .container{height:70px}
    .logo-text h1{font-size:20px}
    .feature-grid,.product-grid,.news-grid{grid-template-columns:repeat(2,1fr)}
    .about-preview{grid-template-columns:1fr}
    .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:768px){
    .header-top{display:none}
    .header-main .container{height:62px}
    .logo-text h1{font-size:18px}
    .logo-text p{display:none}
    .nav{position:fixed;top:62px;left:0;right:0;bottom:0;background:#fff;flex-direction:column;padding:0;overflow-y:auto;display:none;z-index:999}
    .nav.open{display:block}
    .nav ul{flex-direction:column}
    .nav > ul > li > a{padding:15px 20px;font-size:15px;border-bottom:1px solid #f0f0f0}
    .nav .submenu{position:static;box-shadow:none;opacity:1;visibility:visible;transform:none;padding:0;display:none}
    .nav > ul > li.dropdown.open > .submenu{display:block}
    .nav .submenu li a{padding:12px 20px 12px 35px}
    .mobile-toggle{display:flex}
    .container{padding:0 15px}
    .hero h2{font-size:28px}
    .hero p{font-size:15px}
    .hero{min-height:320px}
    .main-layout{flex-direction:column;padding:20px 15px;gap:20px}
    .sidebar{width:100%}
    .content-area{padding:20px}
    .feature-grid,.product-grid,.news-grid{grid-template-columns:1fr}
    .article-item{flex-direction:column}
    .article-thumb{width:100%;height:180px}
    .footer-grid{grid-template-columns:1fr;gap:30px}
    .section-header h2{font-size:24px}
    .page-banner h2{font-size:24px}
    .btn-primary,.btn-outline{padding:12px 28px;font-size:14px}
    .article-detail h1{font-size:22px}
}