/* ============================================================
   宠物食品复合型天然抗氧化剂 - H5宣传册样式表
   高级商务自然风 | B端工业品质感 | 移动端优先
   ============================================================ */

/* ============================================================
   CSS 变量
   ============================================================ */
:root {
    /* 主色调 - 草木自然系 */
    --color-primary: #3d6b4f;
    --color-primary-dark: #2a4a36;
    --color-primary-light: #7aaa8a;
    --color-primary-pale: #e6f0e9;
    /* 辅色 */
    --color-accent: #c8923a;
    --color-accent-light: #e8d5a3;
    /* 中性暖色 */
    --color-cream: #faf7f1;
    --color-warm: #f5efe2;
    --color-brown-light: #c0a882;
    --color-brown: #8b7355;
    --color-brown-dark: #5c4033;
    /* 功能色 */
    --color-white: #ffffff;
    --color-text: #3a3028;
    --color-text-light: #8a7e72;
    --color-text-muted: #b5ab9f;
    --color-border: #e5dfd3;
    --color-red-soft: #fef5f5;
    --color-red-border: #f0d5d5;
    /* 间距 */
    --sp-xs: 0.5rem;
    --sp-sm: 0.75rem;
    --sp-md: 1rem;
    --sp-lg: 1.5rem;
    --sp-xl: 2rem;
    --sp-2xl: 2.5rem;
    --sp-3xl: 3.5rem;
    --sp-4xl: 4.5rem;
    /* 圆角 */
    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.25rem;
    /* 阴影 */
    --shadow-xs: 0 1px 4px rgba(92,64,51,0.04);
    --shadow-sm: 0 2px 12px rgba(92,64,51,0.06);
    --shadow-md: 0 4px 24px rgba(92,64,51,0.08);
    --shadow-lg: 0 8px 40px rgba(92,64,51,0.1);
    /* 字体 */
    --font-base: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
    --font-title: "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
    /* 过渡 */
    --t-fast: 0.2s ease;
    --t-normal: 0.3s ease;
    --t-slow: 0.6s ease;
    /* 导航高度 */
    --nav-height: 42px;
}

/* ============================================================
   Reset
   ============================================================ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

html{
    font-size:16px;
    scroll-behavior:smooth;
    -webkit-text-size-adjust:100%;
    -webkit-tap-highlight-color:transparent;
    scroll-padding-top:var(--nav-height);
}

body{
    font-family:var(--font-base);
    color:var(--color-text);
    background:var(--color-cream);
    line-height:1.7;
    -webkit-font-smoothing:antialiased;
    max-width:480px;
    margin:0 auto;
    min-height:100vh;
    padding-bottom:env(safe-area-inset-bottom);
}

img{display:block;max-width:100%;height:auto}

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

/* ============================================================
   通用组件
   ============================================================ */
.page-section{
    padding:var(--sp-4xl) var(--sp-lg);
    position:relative;
    background:var(--color-white);
}
.section-light{background:var(--color-cream)}

/* 分区标题 */
.section-header{text-align:center;margin-bottom:var(--sp-2xl)}
.section-label{
    display:inline-block;
    font-size:.68rem;
    font-weight:600;
    color:var(--color-primary);
    background:var(--color-primary-pale);
    padding:.22rem .9rem;
    border-radius:1rem;
    letter-spacing:.1em;
    margin-bottom:var(--sp-sm);
}
.section-title{
    font-family:var(--font-title);
    font-size:1.45rem;
    font-weight:700;
    color:var(--color-brown-dark);
    letter-spacing:.03em;
}
.section-subtitle{
    font-size:.8rem;
    color:var(--color-text-light);
    margin-top:var(--sp-xs);
}
.divider-accent{
    width:2.2rem;
    height:3px;
    background:var(--divider-color, linear-gradient(90deg,var(--color-primary-light),var(--color-accent)));
    margin:var(--sp-sm) auto 0;
    border-radius:2px;
}

/* 按钮 */
.btn-primary{
    display:inline-block;
    padding:.78rem 2.2rem;
    background:linear-gradient(135deg,var(--color-primary),var(--color-primary-dark));
    color:#fff;
    font-size:.92rem;
    font-weight:600;
    border-radius:2rem;
    letter-spacing:.04em;
    transition:transform var(--t-fast),box-shadow var(--t-fast);
    box-shadow:0 4px 14px rgba(61,107,79,.3);
}
.btn-primary:active{transform:scale(.96)}

/* ============================================================
   动画
   ============================================================ */
.anim-fade-up{
    opacity:0;
    transform:translateY(32px);
    transition:opacity .65s ease,transform .65s ease;
}
.anim-fade-up.visible{opacity:1;transform:translateY(0)}
.anim-fade-in{opacity:0;transition:opacity .55s ease}
.anim-fade-in.visible{opacity:1}

/* ============================================================
   板块1：封面
   ============================================================ */
.hero-section{
    min-height:100vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    background:linear-gradient(180deg,#e6f0e9 0%,#f0ead8 35%,#faf7f1 70%,#f5efe2 100%);
    padding:var(--sp-xl);
    overflow:hidden;
}

/* 封面顶部背景图 */
.hero-section::before{
    content:'';
    position:absolute;
    top:0;left:0;
    width:100%;
    height:45%;
    background:#b8d4a0 url('../images/hero-top.jpg.jpg') center top / cover no-repeat;
    opacity:.65;
    pointer-events:none;
    z-index:0;
}
/* 封面顶部背景图占位 div（兼容方案，保留） */
.hero-top-bg{
    display:none;
}
/* 封面底部草坪背景图（低透明度） */
.hero-bg{
    position:absolute;
    bottom:0;
    left:50%;
    transform:translateX(-50%);
    width:100%;
    height:45%;
    opacity:.08;
    pointer-events:none;
    overflow:hidden;
}
.hero-bg-img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center bottom;
}
.hero-top-bg .hero-bg-img{
    object-position:center top;
}

/* 阳光光晕 */
.hero-sunlight{
    position:absolute;
    top:-60px;
    right:-50px;
    width:220px;
    height:220px;
    background:radial-gradient(circle,rgba(255,248,220,.35) 0%,rgba(255,235,180,.12) 40%,transparent 70%);
    pointer-events:none;
    z-index:1;
}

/* 品牌标识 */
.hero-brand{
    font-size:.72rem;
    font-weight:600;
    color:var(--color-primary);
    letter-spacing:.1em;
    margin-bottom:var(--sp-lg);
    z-index:1;
}
.hero-title{
    font-family:var(--font-title);
    font-weight:800;
    color:var(--color-brown-dark);
    letter-spacing:.04em;
    line-height:1.35;
    z-index:1;
    margin-bottom:var(--sp-md);
}
.hero-brand-name{
    display:block;
    font-size:2.6rem;
    font-weight:800;
    line-height:1.1;
    letter-spacing:.12em;
    color:var(--color-brown-dark);
    margin-bottom:.25rem;
}
.hero-title-divider{
    display:block;
    width:2rem;
    height:2px;
    background:var(--color-primary-light);
    margin:.4rem auto;
    border-radius:1px;
    opacity:.6;
}
.hero-title .highlight{
    color:var(--color-primary);
    position:relative;
}
.hero-title .highlight::after{
    content:'';
    position:absolute;
    bottom:3px;left:0;right:0;
    height:7px;
    background:var(--color-primary-pale);
    z-index:-1;
    border-radius:3px;
}
.hero-subtitle{
    font-size:.9rem;
    color:var(--color-brown-light);
    z-index:1;
    margin-bottom:var(--sp-xl);
    letter-spacing:.04em;
    font-weight:500;
}
.hero-tags{
    display:flex;
    gap:var(--sp-sm);
    flex-wrap:wrap;
    justify-content:center;
    z-index:1;
    margin-bottom:var(--sp-lg);
}
.hero-tag{
    padding:.32rem .85rem;
    background:rgba(255,255,255,.65);
    border:1px solid var(--color-border);
    border-radius:1rem;
    font-size:.7rem;
    color:var(--color-brown);
    backdrop-filter:blur(6px);
}
.hero-company{
    font-size:.75rem;
    color:var(--color-text-light);
    z-index:1;
    font-weight:500;
    letter-spacing:.04em;
}
.hero-scroll-hint{
    position:absolute;
    bottom:1.2rem;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:.35rem;
    opacity:.45;
    animation:bounce-down 2s infinite;
    z-index:1;
}
.hero-scroll-hint span{font-size:.62rem;color:var(--color-text-light);letter-spacing:.06em}
.scroll-arrow{
    width:16px;height:16px;
    border-right:2px solid var(--color-brown-light);
    border-bottom:2px solid var(--color-brown-light);
    transform:rotate(45deg);
}
@keyframes bounce-down{
    0%,100%{transform:translateX(-50%) translateY(0)}
    50%{transform:translateX(-50%) translateY(5px)}
}

/* ============================================================
   顶部锚点导航
   ============================================================ */
.anchor-nav{
    position:sticky;
    top:0;
    z-index:100;
    display:flex;
    background:rgba(255,255,255,.92);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border-bottom:1px solid var(--color-border);
    overflow-x:auto;
    scrollbar-width:none;
    -ms-overflow-style:none;
    padding:0 var(--sp-xs);
}
.anchor-nav::-webkit-scrollbar{display:none}
.anchor-item{
    flex-shrink:0;
    padding:.6rem .65rem;
    font-size:.68rem;
    font-weight:600;
    color:var(--color-text-light);
    white-space:nowrap;
    transition:color var(--t-fast);
    border-bottom:2px solid transparent;
    margin-bottom:-1px;
}
.anchor-item.active{
    color:var(--color-primary);
    border-bottom-color:var(--color-primary);
}

/* ============================================================
   板块2：产品简介
   ============================================================ */

/* 产品简介配图 */
.intro-image{
    border-radius:var(--radius-xl);
    overflow:hidden;
    margin-bottom:var(--sp-lg);
    box-shadow:var(--shadow-md);
}
.intro-image img{
    width:100%;
    aspect-ratio:16/10;
    object-fit:cover;
    display:block;
}

.intro-body{margin-bottom:var(--sp-lg)}
.intro-text{
    font-size:.85rem;
    color:var(--color-text);
    line-height:1.9;
    text-align:justify;
    margin-bottom:var(--sp-md);
}

/* 对比块 */
.compare-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:var(--sp-md);
}
.compare-box{
    padding:var(--sp-lg) var(--sp-sm);
    border-radius:var(--radius-lg);
    text-align:center;
}
.compare-box--bad{
    background:var(--color-red-soft);
    border:1px solid var(--color-red-border);
}
.compare-box--good{
    background:var(--color-primary-pale);
    border:1px solid var(--color-primary-light);
}
.compare-box-icon{
    font-size:1.3rem;
    margin-bottom:var(--sp-xs);
    font-weight:700;
}
.compare-box--bad .compare-box-icon{color:#c0392b}
.compare-box--good .compare-box-icon{color:var(--color-primary-dark)}
.compare-box-title{
    font-size:.7rem;
    font-weight:700;
    letter-spacing:.04em;
    margin-bottom:.25rem;
}
.compare-box--bad .compare-box-title{color:#8b3a3a}
.compare-box--good .compare-box-title{color:var(--color-primary-dark)}
.compare-box-desc{
    font-size:.68rem;
    color:var(--color-text-light);
    line-height:1.5;
}

/* ============================================================
   板块3：核心成分
   ============================================================ */
.ingredients-list{
    display:flex;
    flex-direction:column;
    gap:var(--sp-lg);
}
.ing-card{
    background:var(--color-white);
    border-radius:var(--radius-lg);
    padding:var(--sp-lg);
    box-shadow:var(--shadow-xs);
    border:1px solid var(--color-border);
    transition:transform var(--t-fast);
}
.ing-card:active{transform:scale(.985)}
.ing-card-header{
    display:flex;
    align-items:center;
    gap:var(--sp-md);
    margin-bottom:var(--sp-md);
}
.ing-icon{
    width:52px;height:52px;
    border-radius:var(--radius-md);
    background:var(--color-primary-pale);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}
.ing-icon img{width:34px;height:34px}
.ing-card-title-area{flex:1}
.ing-card-title-area h4{
    font-size:.92rem;
    font-weight:700;
    color:var(--color-brown-dark);
    margin-bottom:.1rem;
}
.ing-source{
    font-size:.66rem;
    color:var(--color-primary);
    font-weight:600;
}
.ing-card-num{
    font-size:1.3rem;
    font-weight:800;
    color:var(--color-primary-pale);
}
.ing-card-desc{
    font-size:.78rem;
    color:var(--color-text-light);
    line-height:1.75;
    margin-bottom:var(--sp-sm);
}
.ing-card-tag-row{
    display:flex;
    gap:var(--sp-xs);
    flex-wrap:wrap;
}
.ing-tag{
    font-size:.62rem;
    color:var(--color-primary);
    background:var(--color-primary-pale);
    padding:.18rem .55rem;
    border-radius:.6rem;
    font-weight:600;
}

/* ============================================================
   板块4：核心优势
   ============================================================ */
.adv-grid{
    display:flex;
    flex-direction:column;
    gap:var(--sp-md);
}
.adv-item{
    display:flex;
    gap:var(--sp-md);
    padding:var(--sp-lg);
    background:var(--color-white);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-xs);
    border-left:4px solid transparent;
    transition:transform var(--t-fast);
}
.adv-item:nth-child(1){border-left-color:#3d6b4f}
.adv-item:nth-child(2){border-left-color:#5a8f6a}
.adv-item:nth-child(3){border-left-color:#7aaa8a}
.adv-item:nth-child(4){border-left-color:#c8923a}
.adv-item:nth-child(5){border-left-color:#d4ab5a}
.adv-item:nth-child(6){border-left-color:#b8d4a0}
.adv-item:nth-child(7){border-left-color:#8ba888}
.adv-item:active{transform:scale(.985)}
.adv-num{
    width:38px;height:38px;
    flex-shrink:0;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:.95rem;
    font-weight:700;
    background:var(--color-primary-pale);
    color:var(--color-primary);
}
.adv-content h4{
    font-size:.9rem;
    font-weight:700;
    color:var(--color-brown-dark);
    margin-bottom:.2rem;
}
.adv-content p{
    font-size:.75rem;
    color:var(--color-text-light);
    line-height:1.65;
}

/* ============================================================
   板块5：对比测试图表
   ============================================================ */
.chart-container{margin-bottom:var(--sp-xl)}
.chart-placeholder{
    border:2px dashed var(--color-primary-light);
    border-radius:var(--radius-xl);
    background:var(--color-primary-pale);
    padding:var(--sp-3xl) var(--sp-lg);
    text-align:center;
}
.chart-placeholder-icon{
    font-size:2.8rem;
    margin-bottom:var(--sp-sm);
    opacity:.5;
}
.chart-placeholder-title{
    font-size:.88rem;
    font-weight:700;
    color:var(--color-primary);
    margin-bottom:var(--sp-sm);
}
.chart-placeholder-hint{
    font-size:.7rem;
    color:var(--color-text-light);
    line-height:1.7;
    max-width:320px;
    margin:0 auto;
}

/* 测试备注 */
.chart-notes{
    border:1px solid var(--color-border);
    border-radius:var(--radius-lg);
    overflow:hidden;
}
.chart-notes-title{
    font-size:.82rem;
    font-weight:700;
    color:var(--color-brown-dark);
    padding:var(--sp-md) var(--sp-lg);
    background:var(--color-warm);
    border-bottom:1px solid var(--color-border);
}
.chart-notes-content{padding:var(--sp-lg)}
.chart-note-placeholder{
    font-size:.78rem;
    color:var(--color-text-light);
    margin-bottom:var(--sp-sm);
    font-style:italic;
}
.chart-note-list{
    list-style:disc;
    padding-left:1.2rem;
    display:flex;
    flex-direction:column;
    gap:.4rem;
}
.chart-note-list li{
    font-size:.75rem;
    color:var(--color-text-light);
    line-height:1.6;
}

/* ============================================================
   板块6：应用场景与方案
   ============================================================ */
.sub-section{margin-bottom:var(--sp-2xl)}
.sub-section:last-child{margin-bottom:0}
.sub-section-title{
    display:flex;
    align-items:center;
    gap:var(--sp-sm);
    font-size:.95rem;
    font-weight:700;
    color:var(--color-brown-dark);
    margin-bottom:var(--sp-lg);
}
.sub-section-icon{width:24px;height:24px;flex-shrink:0}

/* 场景卡片 */
.scene-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:var(--sp-md);
}
.scene-card{
    background:var(--color-white);
    border-radius:var(--radius-lg);
    overflow:hidden;
    box-shadow:var(--shadow-xs);
    border:1px solid var(--color-border);
    transition:transform var(--t-fast);
}
.scene-card:active{transform:scale(.97)}
.scene-card-img{
    position:relative;
    aspect-ratio:16/10;
    overflow:hidden;
    background:var(--color-warm);
}
.scene-card-img img{
    width:100%;
    height:100%;
    object-fit:cover;
}
.scene-card-tag{
    position:absolute;
    top:8px;left:8px;
    font-size:.6rem;
    font-weight:600;
    color:#fff;
    background:rgba(61,107,79,.7);
    padding:.15rem .55rem;
    border-radius:.6rem;
}
.scene-card h4{
    font-size:.82rem;
    font-weight:700;
    color:var(--color-brown-dark);
    padding:var(--sp-sm) var(--sp-sm) 0;
}
.scene-card p{
    font-size:.7rem;
    color:var(--color-text-light);
    padding:var(--sp-xs) var(--sp-sm) var(--sp-sm);
    line-height:1.55;
}

/* 应用方案表格 */
.solution-table-wrap{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    margin-bottom:var(--sp-lg);
    border-radius:var(--radius-md);
    border:1px solid var(--color-border);
}
.solution-table{
    width:100%;
    border-collapse:collapse;
    font-size:.72rem;
    min-width:400px;
}
.solution-table th{
    background:var(--color-primary);
    color:#fff;
    font-weight:600;
    padding:.55rem .6rem;
    text-align:center;
    font-size:.7rem;
    white-space:nowrap;
}
.solution-table td{
    padding:.5rem .6rem;
    border-bottom:1px solid var(--color-border);
    text-align:center;
    color:var(--color-text);
    background:#fff;
}
.solution-table tr:last-child td{border-bottom:none}
.solution-table tbody tr:nth-child(even) td{background:var(--color-cream)}

/* 使用注意 */
.usage-notes{
    background:var(--color-warm);
    border-radius:var(--radius-lg);
    padding:var(--sp-lg);
    border-left:3px solid var(--color-accent);
}
.usage-notes h4{
    font-size:.82rem;
    font-weight:700;
    color:var(--color-brown-dark);
    margin-bottom:var(--sp-sm);
}
.usage-notes ul{
    list-style:disc;
    padding-left:1.2rem;
    display:flex;
    flex-direction:column;
    gap:.4rem;
}
.usage-notes li{
    font-size:.73rem;
    color:var(--color-text-light);
    line-height:1.65;
}

/* ============================================================
   板块7：品质保障
   ============================================================ */
.quality-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:var(--sp-md);
    margin-bottom:var(--sp-xl);
}
.q-item{
    text-align:center;
    padding:var(--sp-lg) var(--sp-sm);
    background:var(--color-white);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-xs);
    border:1px solid var(--color-border);
    transition:transform var(--t-fast);
}
.q-item:active{transform:scale(.97)}
.q-icon{width:42px;height:42px;margin:0 auto var(--sp-sm)}
.q-item h4{font-size:.78rem;font-weight:700;color:var(--color-brown-dark);margin-bottom:.2rem}
.q-item p{font-size:.66rem;color:var(--color-text-light);line-height:1.55}

/* 认证条 */
.cert-strip{
    display:flex;
    justify-content:center;
    gap:var(--sp-lg);
    padding-top:var(--sp-lg);
    border-top:1px solid var(--color-border);
}
.cert-badge{
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:.25rem;
}
.cert-badge img{width:40px;height:40px}
.cert-badge span{font-size:.62rem;color:var(--color-text-light)}

/* ============================================================
   板块8：结尾页
   ============================================================ */
.footer-section{
    background:linear-gradient(180deg,#2a4a36 0%,#1a3022 100%);
    color:#fff;
    text-align:center;
    padding:var(--sp-4xl) var(--sp-lg) var(--sp-2xl);
    position:relative;
    overflow:hidden;
}

/* 底部草坪装饰 */
.footer-bg-grass{
    position:absolute;
    bottom:0;left:0;right:0;
    height:80px;
    background:linear-gradient(0deg,rgba(143,188,143,.08) 0%,transparent 100%);
    pointer-events:none;
}

.footer-label{background:rgba(255,255,255,.1);color:rgba(255,255,255,.75)}
.footer-message{
    font-size:.78rem;
    color:rgba(255,255,255,.7);
    line-height:2;
    margin:0 auto var(--sp-2xl);
    max-width:300px;
}
.footer-message strong{color:var(--color-accent-light)}

/* 联系方式卡片 */
.contact-card{
    background:rgba(255,255,255,.06);
    border-radius:var(--radius-lg);
    padding:var(--sp-lg);
    margin-bottom:var(--sp-xl);
    text-align:left;
}
.contact-card h4{
    font-size:.78rem;
    font-weight:700;
    color:var(--color-accent-light);
    text-align:center;
    margin-bottom:var(--sp-md);
}
.contact-info-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:var(--sp-md);
}
.contact-info-item{
    display:flex;
    flex-direction:column;
    gap:.15rem;
}
.ci-label{
    font-size:.62rem;
    color:rgba(255,255,255,.45);
    letter-spacing:.05em;
}
.ci-value{
    font-size:.78rem;
    color:rgba(255,255,255,.8);
    font-weight:500;
}
.ci-value a{color:rgba(255,255,255,.8)}

/* 二维码 */
.footer-qr-wrap{text-align:center}
.footer-qr{
    width:110px;height:110px;
    margin:0 auto var(--sp-sm);
    border-radius:var(--radius-md);
    background:#fff;
    padding:5px;
}
.footer-qr img{width:100%;height:100%}
.footer-qr-text{
    font-size:.66rem;
    color:rgba(255,255,255,.5);
}

/* CTA */
.footer-cta{margin:var(--sp-xl) 0}
.footer-cta .btn-primary{
    background:linear-gradient(135deg,var(--color-accent),#a8772a);
    box-shadow:0 4px 14px rgba(200,146,58,.35);
}
.footer-copyright{
    font-size:.62rem;
    color:rgba(255,255,255,.35);
    padding-top:var(--sp-lg);
    border-top:1px solid rgba(255,255,255,.06);
}

/* ============================================================
   回到顶部按钮
   ============================================================ */
.back-to-top{
    position:fixed;
    bottom:20px;
    right:calc(50% - 230px);
    width:40px;height:40px;
    border-radius:50%;
    background:var(--color-primary);
    color:#fff;
    border:none;
    font-size:1.2rem;
    cursor:pointer;
    z-index:99;
    opacity:0;
    transform:translateY(20px);
    transition:opacity .3s,transform .3s;
    box-shadow:0 2px 12px rgba(61,107,79,.3);
    pointer-events:none;
}
.back-to-top.visible{
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
}
.back-to-top:active{transform:scale(.9)}

@media (max-width:480px){
    .back-to-top{right:12px}
}

/* ============================================================
   响应式
   ============================================================ */
@media (max-width:374px){
    html{font-size:14px}
    .scene-grid{grid-template-columns:1fr}
    .quality-grid{grid-template-columns:1fr}
    .compare-row{grid-template-columns:1fr}
    .contact-info-grid{grid-template-columns:1fr}
    .hero-title{font-size:1.45rem}
}
@media (min-width:375px) and (max-width:413px){
    html{font-size:15px}
    .hero-title{font-size:1.6rem}
}
@media (min-width:481px){
    html{font-size:17px}
    body{box-shadow:var(--shadow-lg)}
}
@media (orientation:landscape) and (max-height:500px){
    .hero-section{min-height:380px;padding:var(--sp-lg)}
    .hero-scroll-hint{display:none}
}
@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){
    body{-webkit-font-smoothing:antialiased}
}