/* ============================================
   嵘鳄 RONGE 官网 — 画板1精准还原
   主色：爱马仕橙 #E85D04
   ============================================ */

/* ---- 基础重置 ---- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 16px; line-height: 1.6; color: #333; background: #fff;
}
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; transition: color 0.3s; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* ==================== 精致动画效果 ==================== */
/* 1. 淡入上滑 — 优雅缓动 */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(50px); }
    to { opacity: 1; transform: translateY(0); }
}
/* 2. 数字弹跳 — 更圆润 */
@keyframes countUp {
    0% { opacity: 0; transform: scale(0.5); }
    70% { transform: scale(1.05); }
    100% { opacity: 1; transform: scale(1); }
}
/* 3. 脉冲光效 — 柔和呼吸 */
@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(232,93,4,0.5); }
    50% { box-shadow: 0 0 25px 8px rgba(232,93,4,0); }
}
/* 4. 渐变流动背景 */
@keyframes gradientFlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
/* 5. 发光脉动 — 柔和版 */
@keyframes glow {
    0%, 100% { 
        text-shadow: 0 0 15px rgba(232,93,4,0.6), 0 0 30px rgba(232,93,4,0.2); 
    }
    50% { 
        text-shadow: 0 0 25px rgba(232,93,4,0.9), 0 0 50px rgba(232,93,4,0.4), 0 0 70px rgba(232,93,4,0.15); 
    }
}
/* 6. 浮动 — 轻柔 */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
/* 7. 文字光泽扫过 */
@keyframes shimmer {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
}
/* 8. 涟漪扩散 */
@keyframes ripple {
    0% { transform: scale(0); opacity: 0.5; }
    100% { transform: scale(4); opacity: 0; }
}
/* 9. 缓慢旋转（用于装饰元素）*/
@keyframes slowSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
/* 10. 进度条填充 */
@keyframes progressFill {
    from { width: 0; }
}

/* ---- 滚动进度条 ---- */
.scroll-progress {
    position: fixed;
    top: 0; left: 0;
    height: 3px;
    background: linear-gradient(90deg, #E85D04, #ff6b25, #ffb347);
    z-index: 9999;
    transition: width 0.1s linear;
    border-radius: 0 2px 2px 0;
    box-shadow: 0 0 8px rgba(232,93,4,0.5);
}

/* ---- 涟漪效果容器 ---- */
.ripple-wrap {
    position: relative;
    overflow: hidden;
}
.ripple-effect {
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,0.35);
    animation: ripple 0.6s ease-out forwards;
    pointer-events: none;
}

/* ==================== 1. 顶部Logo区（白底居中）==================== */
.top-bar {
    background: #fff;
    padding: 24px 0 20px;
    text-align: center;
    border-bottom: 1px solid #eee;
}
.top-logo { 
    height: 70px; 
    width: auto; 
    display: inline-block;
    animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==================== 2. 导航栏（白底，吸顶）==================== */
.main-nav {
    position: sticky;
    top: 0; z-index: 1000;
    background: #fff;
    box-shadow: 0 1px 8px rgba(0,0,0,0.06);
}
.nav-inner {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2px;
    height: 54px;
}
.nav-link {
    font-size: 14px;
    font-weight: 500;
    color: #444;
    padding: 16px 36px;
    white-space: nowrap;
    position: relative;
}
.nav-link::after {
    content: '';
    position: absolute;
    bottom: 10px; left: 50%;
    transform: translateX(-50%);
    width: 0; height: 2.5px;
    background: linear-gradient(90deg, #E85D04, #ff6b25);
    border-radius: 2px;
    transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-link:hover { 
    color: #E85D04; 
    transform: translateY(-1px);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-link:hover::after { width: 70%; }
.nav-link.active { color: #E85D04; font-weight: 700; }
.nav-link.active::after { width: 60%; }

/* 移动端菜单按钮 */
.mobile-toggle {
    display: none;
    position: absolute; right: 20px; top: 50%;
    transform: translateY(-50%);
    width: 28px; height: 22px;
    background: none; border: none; cursor: pointer; z-index: 110;
}
.mobile-toggle span {
    display: block; width: 100%; height: 3px;
    background: #333; margin: 5px 0; border-radius: 2px; transition: all 0.3s;
}

@media (max-width: 960px) {
    .mobile-toggle { display: block; }
    .nav-inner {
        display: none;
        position: absolute;
        top: 100%; left: 0; right: 0;
        background: #fff;
        flex-direction: column;
        padding: 12px 0;
        box-shadow: 0 4px 15px rgba(0,0,0,0.12);
        gap: 0;
    }
    .nav-inner.show { display: flex; }
    .nav-link { padding: 12px 24px; text-align: center; }
}

/* ==================== 3. Hero首屏 ==================== */
.hero {
    position: relative;
    width: 100%;
    min-height: 800px;
    max-height: 950px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: #111;
}
.hero-bg {
    position: absolute;
    inset: 0;
}
.hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.2) 0%,
        rgba(0,0,0,0.05) 35%,
        rgba(0,0,0,0.55) 80%,
        rgba(0,0,0,0.7) 100%
    );
}
.hero-content {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 80px;
}
.hero-title { 
    display: flex; 
    flex-direction: column;
    align-items: flex-start; 
    gap: 16px; 
}
.hero-slogan-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.hero-ronge {
    font-size: 110px;
    font-weight: 900;
    color: #E85D04;
    letter-spacing: 8px;
    line-height: 1;
    text-shadow: 0 4px 20px rgba(0,0,0,0.7);
    animation: fadeInUp 1s cubic-bezier(0.16, 1, 0.3, 1), glow 3s ease-in-out infinite, float 5s ease-in-out infinite;
    display: inline-block;
    /* 光泽扫过效果 */
    background: linear-gradient(
        90deg, 
        #E85D04 0%, #E85D04 40%, 
        #ffb347 50%, 
        #E85D04 60%, #E85D04 100%
    );
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: fadeInUp 1s cubic-bezier(0.16, 1, 0.3, 1), glow 3s ease-in-out infinite, float 5s ease-in-out infinite, shimmer 4s ease-in-out infinite;
}
.hero-slogan {
    font-size: 38px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 10px;
    text-shadow: 0 2px 12px rgba(0,0,0,0.7);
    line-height: 1.3;
    animation: fadeInUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
    transition: letter-spacing 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-slogan:hover {
    letter-spacing: 14px;
}

@media (max-width: 768px) {
    .hero { min-height: 480px; }
    .hero-ronge { font-size: 42px; letter-spacing: 2px; }
    .hero-slogan { font-size: 22px; letter-spacing: 5px; }
    .hero-content { padding: 30px 24px; }
}

@media (max-width: 768px) {
    .products-wrapper {
        flex-direction: column;
    }
    .products-tag-vertical {
        writing-mode: horizontal-tb;
        text-orientation: mixed;
        padding: 14px 20px;
        font-size: 18px;
        letter-spacing: 6px;
        border-radius: 0 0 12px 12px;
        order: 2;
    }
    .products-slider {
        min-height: 220px;
        border-radius: 10px 10px 0 0;
        order: 1;
    }
}

/* ==================== 4. 产品轮播 ==================== */
.products-section {
    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
    padding: 50px 0;
}
.products-wrapper { 
    position: relative; 
    display: flex;
    align-items: stretch;
    gap: 0;
}
.products-slider { 
    flex: 1;
    min-height: 400px; 
    border-radius: 10px; 
}
.products-tag-vertical {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    background: linear-gradient(180deg, #E85D04 0%, #ff6b25 50%, #E85D04 100%);
    background-size: 100% 200%;
    animation: gradientFlow 3s ease infinite;
    color: #fff;
    padding: 40px 22px;
    font-size: 26px; 
    font-weight: 900; 
    letter-spacing: 8px;
    border-radius: 0 12px 12px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.products-slider {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
}
.slider-track { display: flex; transition: transform 0.5s ease; }
.slide { flex: 0 0 100%; min-width: 100%; }
.slide img { width: 100%; height: auto; display: block; }
.slider-btn {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 44px; height: 44px;
    background: rgba(232,93,4,0.75); color: #fff;
    border: none; border-radius: 50%;
    cursor: pointer; font-size: 14px;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); z-index: 10;
    backdrop-filter: blur(4px);
}
.slider-btn:hover { 
    background: #E85D04; 
    transform: translateY(-50%) scale(1.1); 
    box-shadow: 0 4px 15px rgba(232,93,4,0.4);
}
.prev-btn { left: 14px; }
.next-btn { right: 14px; }



/* 轮播指示点 */
.slider-dots { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; z-index: 10; }
.slider-dot { width: 12px; height: 12px; border-radius: 50%; background: rgba(255,255,255,0.4); cursor: pointer; transition: all 0.3s ease; }
.slider-dot.active { background: #E85D04; transform: scale(1.3); box-shadow: 0 0 8px rgba(232,93,4,0.5); }
.slider-dot:hover { background: rgba(232,93,4,0.7); }
/* ==================== 5. 电商入口（橙色背景）==================== */
.shop-section { background: #f5f5f5; padding: 40px 0; }
.shop-flex {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}
.shop-item {
    background: #fff;
    border: 1px solid #e0e0e0;
    padding: 18px 32px;
    border-radius: 8px;
    color: #333;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 1;
    max-width: 280px;
    justify-content: center;
    transition: all 0.3s;
}
.shop-item.shop-orange {
    background: #E85D04;
    border-color: #E85D04;
    color: #fff;
}
.shop-item.shop-orange { 
    animation: pulse 2.5s infinite;
}
.shop-item.shop-orange:hover { 
    background: #d14a00; 
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(232,93,4,0.35);
}
.shop-main { font-size: 18px; font-weight: 800; }
.shop-sub { font-size: 13px; opacity: 0.9; }
.search-box {
    background: #fff;
    border: 1px solid #e0e0e0;
    padding: 16px 24px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1.2;
    max-width: 320px;
}
.search-box i { color: #999; font-size: 16px; }
.search-box input {
    border: none; background: none;
    font-size: 14px; color: #666;
    width: 100%; outline: none;
}

@media (max-width: 768px) {
    .shop-flex { flex-wrap: wrap; gap: 10px; }
    .shop-item, .search-box { flex: 1 1 45%; min-width: 140px; justify-content: center; }
}

/* ==================== 6. 品牌优势（2×2网格）==================== */
.brand-section { padding: 75px 0; background: #faf9f5; }
.section-header { text-align: center; margin-bottom: 45px; }
.section-title {
    font-size: 36px; font-weight: 900; color: #e65c00;
    letter-spacing: 4px; margin-bottom: 6px;
}
.section-sub {
    font-size: 17px; font-weight: 400; color: #E85D04;
    letter-spacing: 6px;
}
.brand-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
}
.brand-card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 18px rgba(0,0,0,0.09);
    transition: transform 0.3s;
}
.brand-card { 
    animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    transform-style: preserve-3d;
    perspective: 800px;
}
.brand-card:nth-child(1) { animation-delay: 0.1s; }
.brand-card:nth-child(2) { animation-delay: 0.2s; }
.brand-card:nth-child(3) { animation-delay: 0.35s; }
.brand-card:nth-child(4) { animation-delay: 0.5s; }
.brand-card:hover { 
    transform: translateY(-10px) scale(1.03);
    box-shadow: 0 25px 50px rgba(0,0,0,0.2), 0 0 0 2px rgba(232,93,4,0.15);
}
/* 品牌卡片图片悬停缩放 */
.brand-card img {
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.brand-card:hover img {
    transform: scale(1.08);
}
.brand-card img {
    width: 100%;
    height: auto;
    min-height: 300px;
    object-fit: cover;
    display: block;
}
.brand-overlay {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 28px 24px;
    background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.4) 60%, transparent 100%);
}
.brand-num {
    font-size: 52px; font-weight: 900;
    color: #ff6b25;
    text-shadow: 0 2px 8px rgba(0,0,0,0.35), 0 0 15px rgba(255,107,37,0.2);
    line-height: 1;
    display: block;
    animation: countUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.5s both;
}
.brand-unit { font-size: 20px; color: #ff6b25; font-weight: 700; margin-left: 6px; }
.brand-desc { font-size: 15px; color: rgba(255,255,255,0.95); margin-top: 8px; }

@media (max-width: 768px) {
    .brand-grid { grid-template-columns: 1fr; }
    .brand-card img { height: 260px; }
}

/* ==================== 7. CCTV报道 ==================== */
.cctv-section { padding: 65px 0; background: #fff; }
.cctv-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 26px;
}
.cctv-card {
    background: #faf9f5;
    padding: 28px;
    border-radius: 12px;
    border-left: 5px solid #E85D04;
    animation: fadeInUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}
.cctv-card::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(232,93,4,0.08), transparent);
    transition: left 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.cctv-card:nth-child(1) { animation-delay: 0.15s; }
.cctv-card:nth-child(2) { animation-delay: 0.35s; }
.cctv-card:hover {
    transform: translateX(8px);
    box-shadow: 0 12px 30px rgba(232,93,4,0.18);
    border-left-color: #ff6b25;
    border-left-width: 6px;
}
.cctv-card:hover::before {
    left: 100%;
}
.cctv-tag {
    display: inline-block;
    background: #E85D04; color: #fff;
    padding: 4px 14px; border-radius: 20px;
    font-size: 12px; margin-bottom: 12px;
}
.cctv-card h4 { font-size: 18px; font-weight: 700; color: #222; margin-bottom: 10px; }
.cctv-card p { font-size: 13.5px; color: #666; line-height: 1.8; }

@media (max-width: 768px) { .cctv-grid { grid-template-columns: 1fr; } }

/* ==================== 8. 新闻（1大2小）==================== */
.news-section { padding: 75px 0; background: #faf9f5; }
.news-header { margin-bottom: 38px; }
.news-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    grid-template-rows: 1fr;
    gap: 18px;
    align-items: stretch;
}
.news-big {
    grid-row: 1 / -1;
}
.news-big img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.news-card {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0,0,0,0.07);
    transition: transform 0.3s;
    background: #fff;
}
.news-card { 
    animation: fadeInUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}
.news-card:nth-child(1) { animation-delay: 0.1s; }
.news-card:nth-child(2) { animation-delay: 0.25s; }
.news-card:nth-child(3) { animation-delay: 0.4s; }
.news-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(232,93,4,0.6) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.4s;
}
.news-card:hover { 
    transform: translateY(-8px); 
    box-shadow: 0 15px 35px rgba(0,0,0,0.15);
}
.news-card:hover::after {
    opacity: 1;
}
.news-card:hover img {
    transform: scale(1.06);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.news-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* News card title overlay */
.news-card {
    position: relative;
}
.news-img-title-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 30px 16px 14px;
    background: linear-gradient(transparent, rgba(0,0,0,0.7));
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    z-index: 3;
}
.news-img-title-overlay span {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.news-small .news-img-title-overlay span {
    -webkit-line-clamp: 1;
}
.news-big .news-img-title-overlay span {
    -webkit-line-clamp: 2;
    font-size: 18px;
}

.news-big { grid-row: span 2; }

@media (max-width: 768px) {
    .news-grid { grid-template-columns: 1fr; grid-template-rows: auto; }
    .news-big { grid-row: auto; }
    
.news-card img { height: 240px; object-fit: cover; }
}

/* ==================== 9. 页脚 ==================== */
.footer {
    background: linear-gradient(135deg, #E85D04 0%, #d14a00 50%, #E85D04 100%);
    background-size: 200% 200%;
    animation: gradientFlow 8s ease infinite;
    color: #fff; padding: 48px 0 16px;
}
.footer-inner {
    display: grid;
    grid-template-columns: 1fr 1.5fr 1fr;
    gap: 34px;
    padding-bottom: 28px;
    border-bottom: 1px solid rgba(255,255,255,0.2);
}
.footer-brand { display: flex; flex-direction: column; align-items: center; text-align: center; }
.footer-logo { height: 54px; width: auto; margin-bottom: 10px; }
.footer-slogan { font-size: 16px; font-weight: 500; letter-spacing: 2px; }
.footer-contact p { margin: 8px 0; font-size: 13.5px; }
.footer-contact i { margin-right: 10px; width: 16px; text-align: center; }
.footer-qr-col { display: flex; flex-direction: column; align-items: center; }
.footer-qr-col .qr-wrapper { flex-direction: row; }
.footer-qr { width: 104px; height: 104px; border-radius: 8px; margin-bottom: 6px; background: #fff; padding: 4px; }
.footer-qr-col span { font-size: 11.5px; opacity: 0.82; }
.footer-bottom { text-align: center; padding-top: 16px; font-size: 12.5px; opacity: 0.7; }

@media (max-width: 768px) {
    .footer-inner { grid-template-columns: 1fr; text-align: center; gap: 24px; }
    .footer-brand { align-items: center; }
    .footer-qr-col { align-items: center; }
}

/* ===== 新闻板块4小图网格 ===== */
.news-small-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 16px;
}
.news-small-grid .news-small {
    height: 100%;
}
.news-small-grid .news-small img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

/* ===== 底部双二维码并排 ===== */
.qr-wrapper {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}
.qr-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.qr-item .footer-qr {
    margin-bottom: 8px;
}
.qr-item span {
    font-size: 11.5px;
    opacity: 0.82;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .news-small-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }
    .qr-wrapper {
        flex-direction: column;
        gap: 16px;
    }
}