@charset "UTF-8";
/* ==========================================================================
   度橙 — 首页样式
   主色 #bd1b21（沿用参考站视觉语言）
   ========================================================================== */

/* ---------- 变量 ---------- */
:root{
    --red:        #bd1b21;
    --red-dark:   #94141a;
    --red-light:  #da1d24;
    --ink:        #1f1f1f;
    --text:       #333;
    --gray:       #666;
    --gray-l:     #999;
    --line:       #e5e5e5;
    --bg:         #eef0f4;
    --bg-2:       #e5e9ef;
    --white:      #fff;
    --container:  1200px;
    --radius:     4px;
    --ease:       .35s cubic-bezier(.22,.61,.36,1);
}

/* ---------- 基础 ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
    margin:0;
    font-family:"Microsoft YaHei","PingFang SC","Hiragino Sans GB",Arial,Helvetica,sans-serif;
    font-size:15px;
    line-height:1.75;
    color:var(--text);
    background:var(--white);
    overflow-x:hidden;
}
h1,h2,h3,h4,h5,h6,p,ul,ol{ margin:0; }
ul,ol{ padding:0; list-style:none; }
img{ max-width:100%; display:block; border:0; }
a{ color:inherit; text-decoration:none; transition:color var(--ease); }
button{ font-family:inherit; border:0; background:none; cursor:pointer; }

.container{
    width:100%;
    max-width:var(--container);
    margin:0 auto;
    padding:0 24px;
}
.section{ padding:96px 0; }

/* 区块标题 */
h5{
    display:inline-block;
    position:relative;
    padding-left:32px;
    font-size:14px;
    font-weight:400;
    letter-spacing:3px;
    color:var(--red);
}
h5::before{
    content:"";
    position:absolute;
    left:0; top:50%;
    width:20px; height:2px;
    background:var(--red);
    transform:translateY(-50%);
}
.vision-text .title,
.hot-main .title{
    margin-top:14px;
    font-size:36px;
    line-height:1.45;
    font-weight:700;
    color:var(--ink);
    letter-spacing:.5px;
}

/* 了解更多（产品中心各面板的 CTA） */
.view-more{
    display:inline-flex;
    align-items:center;
    gap:12px;
    margin-top:34px;
    padding:13px 30px;
    border:1px solid var(--red);
    border-radius:var(--radius);
    font-size:15px;
    color:var(--red);
    letter-spacing:1px;
    transition:all var(--ease);
}
.view-more:hover{ background:var(--red); color:var(--white); }
.motion{
    position:relative;
    display:inline-block;
    width:16px; height:8px;
}
.motion::before,
.motion::after{
    content:"";
    position:absolute;
    top:50%;
    background:currentColor;
    transition:all var(--ease);
}
.motion::before{ left:0; width:14px; height:1.5px; transform:translateY(-50%); }
.motion::after{
    right:2px; width:6px; height:6px;
    border-top:1.5px solid currentColor;
    border-right:1.5px solid currentColor;
    background:none;
    transform:translateY(-50%) rotate(45deg);
}
.view-more:hover .motion::before{ width:16px; }

/* ---------- 图标（mask 方式，颜色跟随 currentColor） ---------- */
.ico{
    display:inline-block;
    width:32px; height:32px;
    background-color:currentColor;
    -webkit-mask-repeat:no-repeat;
            mask-repeat:no-repeat;
    -webkit-mask-position:center;
            mask-position:center;
    -webkit-mask-size:contain;
            mask-size:contain;
    transition:background-color var(--ease);
}
.ico-shield{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21.5s7.5-3.8 7.5-9.5V5.5L12 2.8 4.5 5.5V12c0 5.7 7.5 9.5 7.5 9.5z'/%3E%3Cpath d='M9.2 11.8l2 2 3.6-3.8'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21.5s7.5-3.8 7.5-9.5V5.5L12 2.8 4.5 5.5V12c0 5.7 7.5 9.5 7.5 9.5z'/%3E%3Cpath d='M9.2 11.8l2 2 3.6-3.8'/%3E%3C/svg%3E"); }
.ico-car{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 16.5v-4l2-5.5h14l2 5.5v4'/%3E%3Cpath d='M3 16.5h18'/%3E%3Cpath d='M9.5 16.5h5'/%3E%3Ccircle cx='7' cy='17.6' r='1.9'/%3E%3Ccircle cx='17' cy='17.6' r='1.9'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 16.5v-4l2-5.5h14l2 5.5v4'/%3E%3Cpath d='M3 16.5h18'/%3E%3Cpath d='M9.5 16.5h5'/%3E%3Ccircle cx='7' cy='17.6' r='1.9'/%3E%3Ccircle cx='17' cy='17.6' r='1.9'/%3E%3C/svg%3E"); }
.ico-build{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 21V4.5h10.5V21'/%3E%3Cpath d='M14 9.5h6.5V21'/%3E%3Cpath d='M2 21h20'/%3E%3Cpath d='M6.5 8h4M6.5 11.5h4M6.5 15h4M17 13h1.5M17 16.5h1.5'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 21V4.5h10.5V21'/%3E%3Cpath d='M14 9.5h6.5V21'/%3E%3Cpath d='M2 21h20'/%3E%3Cpath d='M6.5 8h4M6.5 11.5h4M6.5 15h4M17 13h1.5M17 16.5h1.5'/%3E%3C/svg%3E"); }
.ico-truck{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 15.5V6.5h11v9'/%3E%3Cpath d='M13.5 9.5h4l3.5 3.5v2.5h-7.5'/%3E%3Cpath d='M8.5 15.5h5'/%3E%3Ccircle cx='6' cy='17.5' r='1.9'/%3E%3Ccircle cx='17' cy='17.5' r='1.9'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 15.5V6.5h11v9'/%3E%3Cpath d='M13.5 9.5h4l3.5 3.5v2.5h-7.5'/%3E%3Cpath d='M8.5 15.5h5'/%3E%3Ccircle cx='6' cy='17.5' r='1.9'/%3E%3Ccircle cx='17' cy='17.5' r='1.9'/%3E%3C/svg%3E"); }
.ico-heart{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.8 5.9a4.9 4.9 0 0 0-7 0L12 7.7l-1.8-1.8a4.9 4.9 0 1 0-7 7L12 21.4l8.8-8.5a4.9 4.9 0 0 0 0-7z'/%3E%3Cpath d='M3.5 12h4l1.6-2.6 2 4.4 1.9-3 1.2 1.2h6.3'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.8 5.9a4.9 4.9 0 0 0-7 0L12 7.7l-1.8-1.8a4.9 4.9 0 1 0-7 7L12 21.4l8.8-8.5a4.9 4.9 0 0 0 0-7z'/%3E%3Cpath d='M3.5 12h4l1.6-2.6 2 4.4 1.9-3 1.2 1.2h6.3'/%3E%3C/svg%3E"); }
.ico-phone{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 16.9v2.5a1.6 1.6 0 0 1-1.7 1.6 17.6 17.6 0 0 1-7.7-2.7 17.2 17.2 0 0 1-5.3-5.3A17.6 17.6 0 0 1 3.6 5.3 1.6 1.6 0 0 1 5.2 3.6h2.5a1.6 1.6 0 0 1 1.6 1.4c.1.9.3 1.8.6 2.6a1.6 1.6 0 0 1-.4 1.7L8.3 10.5a14 14 0 0 0 5.3 5.3l1.2-1.2a1.6 1.6 0 0 1 1.7-.4c.8.3 1.7.5 2.6.6a1.6 1.6 0 0 1 1.4 1.6z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 16.9v2.5a1.6 1.6 0 0 1-1.7 1.6 17.6 17.6 0 0 1-7.7-2.7 17.2 17.2 0 0 1-5.3-5.3A17.6 17.6 0 0 1 3.6 5.3 1.6 1.6 0 0 1 5.2 3.6h2.5a1.6 1.6 0 0 1 1.6 1.4c.1.9.3 1.8.6 2.6a1.6 1.6 0 0 1-.4 1.7L8.3 10.5a14 14 0 0 0 5.3 5.3l1.2-1.2a1.6 1.6 0 0 1 1.7-.4c.8.3 1.7.5 2.6.6a1.6 1.6 0 0 1 1.4 1.6z'/%3E%3C/svg%3E"); }
.ico-top{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20V5'/%3E%3Cpath d='M5.6 11.4L12 5l6.4 6.4'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20V5'/%3E%3Cpath d='M5.6 11.4L12 5l6.4 6.4'/%3E%3C/svg%3E"); }

/* ==========================================================================
   头部
   ========================================================================== */
.header{
    position:absolute;
    left:0; top:0;
    z-index:97;
    width:100%;
    height:124px;
    background:transparent;
    border-bottom:1px solid var(--line);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    transition:all var(--ease);
}
.header-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:28px;
    height:100%;
}

/* logo：PNG 已抠掉白底，直接浮在深/浅背景上 */
.logo{ display:flex; align-items:center; flex-shrink:0; }
.logo img{
    height:108px;
    width:auto;
    transition:height var(--ease);
}

/* 头部电话 */
.header-tel{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.header-tel .label{
    font-size:11px;
    line-height:1.3;
    color:var(--gray-l);
    text-align:right;
}
.header-tel .num{
    font-size:22px;
    font-weight:700;
    color:var(--red);
    letter-spacing:.5px;
}
.header-tel .num:hover{ color:var(--red-light); }

/* 滚动后固定态 */
.header.is-fixed{
    position:fixed;
    height:104px;
    background:rgba(255,255,255,.97);
    border-bottom-color:var(--line);
    box-shadow:0 4px 20px rgba(0,0,0,.07);
}
.header.is-fixed .logo img{ height:88px; }


/* ==========================================================================
   首屏轮播
   ========================================================================== */
.banner{
    position:relative;
    height:660px;
    overflow:hidden;
    background:var(--white);
    border-bottom:1px solid var(--line);
}
.banner-slides{ position:absolute; inset:0; }
.banner-slide{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    opacity:0;
    visibility:hidden;
    transition:opacity .9s ease,visibility .9s;
}
.banner-slide.is-active{ opacity:1; visibility:visible; }
.banner-slide::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 76% 24%, rgba(189,27,33,.07), transparent 46%),
        linear-gradient(115deg,#ffffff 0%,#fdf8f8 100%);
}
.banner-slide:nth-child(2)::before{
    background:
        radial-gradient(circle at 84% 30%, rgba(189,27,33,.05), transparent 48%),
        linear-gradient(115deg,#fdf8f8 0%,#ffffff 100%);
}
.banner-slide:nth-child(3)::before{
    background:
        radial-gradient(circle at 72% 26%, rgba(189,27,33,.07), transparent 46%),
        linear-gradient(115deg,#ffffff 0%,#fcf6f6 100%);
}
.banner-slide::after{
    content:"";
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(31,31,31,.022) 1px,transparent 1px),
        linear-gradient(90deg,rgba(31,31,31,.022) 1px,transparent 1px);
    background-size:64px 64px;
}
.banner .container{ position:relative; z-index:2; }
/* 首屏两列：左侧文案 + 右侧浙商保险 logo（业务往来展示） */
.banner-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:40px;
}
.banner-brand{ flex:0 0 auto; }
.banner-brand a{ display:block; }
.banner-brand img{
    display:block;
    height:clamp(150px,16vw,215px);
    width:auto;
    max-width:100%;
    transition:opacity var(--ease);
}
.banner-brand a:hover img{ opacity:.82; }
.banner-text{ max-width:660px; }
.banner-text .eyebrow{
    display:inline-block;
    padding:6px 16px;
    border:1px solid rgba(189,27,33,.35);
    border-radius:100px;
    font-size:13px;
    letter-spacing:3px;
    color:var(--red);
}
.banner-text h2{
    margin-top:22px;
    font-size:54px;
    line-height:1.28;
    font-weight:700;
    color:var(--ink);
    letter-spacing:1px;
}
.banner-text .desc{
    max-width:560px;
    margin-top:22px;
    font-size:16px;
    line-height:2;
    color:var(--gray);
}
.banner-arrow{
    position:absolute;
    top:50%;
    z-index:3;
    width:52px; height:52px;
    margin-top:-26px;
    border:1px solid var(--line);
    border-radius:50%;
    background:var(--white);
    box-shadow:0 8px 22px rgba(0,0,0,.06);
    transition:all var(--ease);
}
.banner-arrow::before{
    content:"";
    position:absolute;
    left:50%; top:50%;
    width:9px; height:9px;
    border-top:2px solid var(--gray);
    border-right:2px solid var(--gray);
}
.banner-arrow.prev{ left:32px; }
.banner-arrow.prev::before{ transform:translate(-30%,-50%) rotate(-135deg); }
.banner-arrow.next{ right:32px; }
.banner-arrow.next::before{ transform:translate(-70%,-50%) rotate(45deg); }
.banner-arrow:hover{ background:var(--red); border-color:var(--red); }
.banner-arrow:hover::before{ border-top-color:var(--white); border-right-color:var(--white); }

.banner-dots{
    position:absolute;
    left:0; bottom:38px;
    z-index:3;
    display:flex;
    justify-content:center;
    gap:12px;
    width:100%;
}
.banner-dots button{
    width:34px; height:3px;
    background:rgba(31,31,31,.18);
    border-radius:2px;
    transition:all var(--ease);
}
.banner-dots button.is-active{ width:52px; background:var(--red); }

/* ==========================================================================
   我们的愿景
   ========================================================================== */
.vision-box{ background:var(--white); }
.vision-main{
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:80px;
}
.vision-text .title{ font-size:34px; }
.vision-text .info{
    margin-top:24px;
    font-size:15px;
    line-height:2.1;
    color:var(--gray);
}

/* 纯 CSS 视觉块 */
.vision-visual{ position:relative; padding:0 0 40px 40px; }
.vv-card{
    position:relative;
    padding:34px;
    border-radius:6px;
    background:linear-gradient(140deg,#c4232b 0%,#bd1b21 55%,#a8161c 100%);
    box-shadow:0 26px 60px rgba(148,20,26,.22);
    overflow:hidden;
}
.vv-card::before{
    content:"";
    position:absolute;
    right:-70px; top:-70px;
    width:230px; height:230px;
    border:1px solid rgba(255,255,255,.18);
    border-radius:50%;
}
.vv-card::after{
    content:"";
    position:absolute;
    right:-30px; bottom:-110px;
    width:280px; height:280px;
    border:1px solid rgba(255,255,255,.1);
    border-radius:50%;
}
.vv-row{ position:relative; z-index:1; display:flex; align-items:center; gap:12px; }
.vv-dot{ width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.85); }
.vv-bar{ width:88px; height:6px; border-radius:3px; background:rgba(255,255,255,.35); }
.vv-grid{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:repeat(6,1fr);
    align-items:end;
    gap:10px;
    height:124px;
    margin:34px 0 28px;
}
.vv-grid i{
    border-radius:3px 3px 0 0;
    background:rgba(255,255,255,.16);
}
.vv-grid i:nth-child(1){ height:36%; }
.vv-grid i:nth-child(2){ height:56%; }
.vv-grid i:nth-child(3){ height:44%; }
.vv-grid i:nth-child(4){ height:78%; }
.vv-grid i:nth-child(5){ height:62%; }
.vv-grid i:nth-child(6){ height:100%; background:rgba(255,255,255,.34); }
.vv-tag{
    position:relative;
    z-index:1;
    display:inline-block;
    padding:7px 18px;
    border-radius:100px;
    background:rgba(255,255,255,.14);
    border:1px solid rgba(255,255,255,.24);
    font-size:13px;
    letter-spacing:2px;
    color:rgba(255,255,255,.92);
}
.vv-badge{
    position:absolute;
    right:0; bottom:0;
    z-index:2;
    padding:20px 26px;
    border-radius:6px;
    background:var(--white);
    box-shadow:0 16px 40px rgba(0,0,0,.14);
}
.vv-badge strong{
    display:block;
    font-size:32px;
    line-height:1.1;
    color:var(--red);
    letter-spacing:.5px;
}
.vv-badge span{ font-size:13px; color:var(--gray-l); }

/* 数据统计 */
.data-list{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
    margin-top:82px;
    padding-top:56px;
    border-top:1px solid var(--line);
}
.data-list .item{ text-align:center; }
.data-list .num{
    font-size:42px;
    font-weight:700;
    line-height:1.1;
    color:var(--red);
    letter-spacing:-.5px;
}
.data-list .num i,
.data-list .num span{
    margin-left:3px;
    font-size:16px;
    font-style:normal;
    font-weight:400;
    color:var(--gray);
}
.data-list p{ margin-top:12px; font-size:14px; color:var(--gray-l); }

/* ==========================================================================
   交通保险专题
   ========================================================================== */
/* 交通保险：给中段一块明确的浅色带，避免白 → 浅灰过渡太弱 */
.hot-box{ background:var(--bg-2); border-top:1px solid var(--line); }
.hot-inner{
    display:grid;
    grid-template-columns:460px 1fr;
    align-items:center;
    gap:70px;
}
.hot-visual{
    position:relative;
    height:400px;
    border-radius:6px;
    background:linear-gradient(150deg,#c4232b 0%,#bd1b21 52%,#a8161c 100%);
    overflow:hidden;
    box-shadow:0 24px 56px rgba(148,20,26,.22);
}
.hv-road{ position:absolute; inset:0; }
.hv-line{
    position:absolute;
    left:-20%; top:-30%;
    width:150%; height:2px;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent);
    transform:rotate(-30deg);
}
.hv-line:nth-child(1){ top:34%; }
.hv-line:nth-child(2){ top:52%; opacity:.6; }
.hv-line:nth-child(3){ top:70%; opacity:.32; }
.hv-label{
    position:absolute;
    left:34px; bottom:34px;
    padding:12px 26px;
    border-radius:3px;
    background:rgba(255,255,255,.95);
    font-size:18px;
    font-weight:700;
    letter-spacing:4px;
    color:var(--red);
}
.hot-main .title{ margin-top:12px; }
.hot-main .info{
    margin-top:22px;
    font-size:15px;
    line-height:2.1;
    color:var(--gray);
}
.hot-main h6{
    margin-top:30px;
    font-size:15px;
    font-weight:700;
    color:var(--ink);
}
.field{ display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.field span{
    padding:8px 18px;
    border:1px solid var(--line);
    border-radius:100px;
    background:var(--white);
    font-size:14px;
    color:var(--gray);
    transition:all var(--ease);
}
.field span:hover{ border-color:var(--red); color:var(--red); }

/* ==========================================================================
   产品中心（图标 tab）
   ========================================================================== */
/* 这一块曾经压成近黑底，和红色配在一起发闷。
   改成浅色：白底 + 极淡的红色辉光（切 tab 时辉光横向移动），
   红只留在选中的 tab、步骤条的竖线和按钮上。 */
.pro-box{ position:relative; overflow:hidden; padding:84px 0; background:var(--bg); }
.pro-bg{ position:absolute; inset:0; z-index:0; }
.pro-bg-item{
    position:absolute;
    inset:0;
    opacity:0;
    visibility:hidden;
    transition:opacity .7s ease,visibility .7s;
    background-repeat:no-repeat;
}
.pro-bg-item.is-active{ opacity:1; visibility:visible; }
.pro-bg-item::after{
    content:"";
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(31,31,31,.024) 1px,transparent 1px),
        linear-gradient(90deg,rgba(31,31,31,.024) 1px,transparent 1px);
    background-size:58px 58px;
}
.pro-bg-item:nth-child(1){ background-image:radial-gradient(820px 420px at 6% -14%,rgba(189,27,33,.085),rgba(189,27,33,0) 72%); }
.pro-bg-item:nth-child(2){ background-image:radial-gradient(760px 400px at 30% -16%,rgba(189,27,33,.07),rgba(189,27,33,0) 72%); }
.pro-bg-item:nth-child(3){ background-image:radial-gradient(780px 400px at 52% -16%,rgba(189,27,33,.085),rgba(189,27,33,0) 72%); }
.pro-bg-item:nth-child(4){ background-image:radial-gradient(760px 400px at 74% -16%,rgba(189,27,33,.07),rgba(189,27,33,0) 72%); }
.pro-bg-item:nth-child(5){ background-image:radial-gradient(820px 420px at 96% -14%,rgba(189,27,33,.085),rgba(189,27,33,0) 72%); }

.pro-inner{ position:relative; z-index:2; }
.pro-head h5{ color:var(--red); }
.pro-head h5::before{ background:var(--red); }
.pro-head .title{ color:var(--ink); }

/* tab 导航 */
.pro-nav{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:16px;
    margin-top:8px;
}
.pro-tab{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:14px;
    padding:22px 12px;
    border:1px solid var(--line);
    border-radius:var(--radius);
    background:var(--white);
    color:var(--gray);
    font-size:15px;
    letter-spacing:1px;
    transition:all var(--ease);
}
.pro-tab .ico{ width:38px; height:38px; }
.pro-tab:hover{
    border-color:var(--red);
    color:var(--red);
}
.pro-tab.is-active{
    border-color:var(--red);
    background:var(--red);
    color:var(--white);
    box-shadow:0 14px 34px rgba(189,27,33,.24);
}

/* tab 内容 */
.pro-panes{
    margin-top:32px;
    padding:44px 48px;
    border:1px solid var(--line);
    border-radius:6px;
    background:var(--white);
}
.pro-pane{ display:none; }
.pro-pane.is-active{ display:block; animation:fadeUp .5s ease both; }
@keyframes fadeUp{
    from{ opacity:0; transform:translateY(14px); }
    to{ opacity:1; transform:translateY(0); }
}
.pro-pane .title{
    font-size:28px;
    font-weight:700;
    color:var(--ink);
    letter-spacing:1px;
}
.pro-pane .info{
    max-width:940px;
    margin-top:18px;
    font-size:15px;
    line-height:2.1;
    color:var(--gray);
}
.pro-pane .list{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:22px;
    margin-top:34px;
}
.pro-pane .step{
    padding:22px 26px;
    border-left:2px solid var(--red);
    background:var(--bg);
    border-radius:0 4px 4px 0;
}
.pro-pane .name{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:15px;
    font-weight:700;
    color:var(--ink);
}
.pro-pane .name i{
    display:inline-block;
    width:16px; height:16px;
    border-radius:50%;
    background:var(--red);
}
.pro-pane .name i.icon2{ background:var(--gray-l); }
.pro-pane .txt{
    margin-top:10px;
    font-size:14px;
    line-height:1.9;
    color:var(--gray);
}
.pro-pane .view-more{ margin-top:36px; }

/* ==========================================================================
   底部
   ========================================================================== */
/* 页脚：产品中心已是浅灰，页脚再深一档收尾，
   顶部那条红色渐变线做分隔，全页不再有深色块 */
.footer{
    position:relative;
    padding:34px 0;
    background:#e0e4ea;
    color:var(--gray);
}
.footer::before{
    content:"";
    position:absolute;
    left:0; top:0;
    width:100%; height:3px;
    background:linear-gradient(90deg,var(--red-dark),var(--red),var(--red-light));
}
.footer .logo img{ height:72px; }

/* ==========================================================================
   侧边栏
   ========================================================================== */
.aside{
    position:fixed;
    right:18px;
    bottom:96px;
    z-index:90;
    display:flex;
    flex-direction:column;
    gap:10px;
}
.aside-item{
    position:relative;
    display:grid;
    place-items:center;
    width:52px; height:52px;
    border:1px solid var(--line);
    border-radius:8px;
    background:var(--white);
    color:var(--gray);
    box-shadow:0 8px 22px rgba(0,0,0,.09);
    transition:all var(--ease);
}
.aside-item .ico{ width:22px; height:22px; }
.aside-item:hover{ background:var(--red); border-color:var(--red); color:var(--white); }
.aside-tel .pop,
.aside .pop{
    position:absolute;
    right:64px;
    top:50%;
    width:max-content;
    padding:12px 18px;
    border-radius:6px;
    background:var(--white);
    box-shadow:0 12px 30px rgba(0,0,0,.14);
    font-size:13px;
    line-height:1.7;
    text-align:center;
    color:var(--gray);
    opacity:0;
    visibility:hidden;
    transform:translate(8px,-50%);
    transition:all var(--ease);
    pointer-events:none;
}
.aside .pop b{ color:var(--red); font-size:16px; }
.aside-item:hover .pop{ opacity:1; visibility:visible; transform:translate(0,-50%); }
.aside-top{ opacity:0; visibility:hidden; }
.aside-top.is-show{ opacity:1; visibility:visible; }

/* ==========================================================================
   滚动入场动画
   ========================================================================== */
/* 仅在 JS 可用时启用（禁用 JS 时内容直接可见） */
.js .reveal{
    opacity:0;
    transform:translateY(34px);
    transition:opacity .9s ease,transform .9s cubic-bezier(.22,.61,.36,1);
}
.js .reveal.is-in{ opacity:1; transform:translateY(0); }
/* 禁用 JS 时轮播按钮无意义，直接隐藏 */
html:not(.js) .banner-arrow,
html:not(.js) .banner-dots{ display:none; }

/* 尊重系统「减少动效」设置 */
@media (prefers-reduced-motion:reduce){
    *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
    .reveal{ opacity:1; transform:none; }
}

/* ==========================================================================
   响应式
   ========================================================================== */
@media (max-width:1280px){
    .header-tel .num{ font-size:19px; }
}

@media (max-width:1080px){
    .section{ padding:74px 0; }
    .banner{ height:600px; }
    .banner-text h2{ font-size:42px; }
    .vision-main{ gap:52px; }
    .vision-text .title,
    .hot-main .title{ font-size:30px; }
    .data-list .num{ font-size:34px; }
    .hot-inner{ grid-template-columns:380px 1fr; gap:46px; }
}

@media (max-width:992px){
    .header{ position:fixed; height:92px; background:transparent; }
    .header .logo img{ height:72px; }
    .header-inner{ gap:14px; }
    .header-tel{ gap:8px; }
    .header-tel .label{ font-size:10px; }
    .header.is-fixed{ height:92px; }

    .banner{ height:auto; padding:168px 0 110px; }
    .banner-slides{ position:static; }
    .banner-slide{ position:relative; display:none; }
    .banner-slide.is-active{ display:block; }
    .banner-arrow{ display:none; }
    .banner-text h2{ font-size:36px; }
    .banner-row{ flex-direction:column; align-items:flex-start; gap:34px; }
    .banner-brand img{ height:auto; width:196px; }

    .vision-main{ grid-template-columns:1fr; gap:56px; }
    .vision-visual{ max-width:520px; }
    .hot-inner{ grid-template-columns:1fr; gap:40px; }
    .hot-visual{ height:300px; }
    .pro-nav{ grid-template-columns:repeat(3,1fr); }
    .pro-panes{ padding:40px 32px; }
    .pro-pane .list{ grid-template-columns:1fr; }
    .footer{ padding:30px 0; }
    .footer .logo img{ height:62px; }
}

@media (max-width:768px){
    .container{ padding:0 18px; }
    .section{ padding:60px 0; }

    .banner{ padding:142px 0 96px; }
    .banner-text h2{ font-size:29px; }
    .banner-text .desc{ font-size:15px; line-height:1.9; }
    .banner-brand img{ width:162px; }
    .banner-dots{ bottom:28px; }

    .vision-text .title,
    .hot-main .title{ font-size:24px; }
    .vision-visual{ padding:0 0 34px 24px; }
    .vv-grid{ height:96px; }
    .vv-badge strong{ font-size:26px; }

    .data-list{ grid-template-columns:repeat(2,1fr); gap:34px 16px; margin-top:56px; padding-top:42px; }
    .data-list .num{ font-size:28px; }

    .pro-nav{ grid-template-columns:repeat(2,1fr); gap:12px; }
    .pro-tab{ padding:18px 10px; font-size:14px; }
    .pro-tab .ico{ width:30px; height:30px; }
    .pro-panes{ padding:30px 22px; }
    .pro-pane .title{ font-size:22px; }
    .pro-pane .step{ padding:18px 18px; }

    .footer{ padding:26px 0; }

    .aside{ right:12px; bottom:76px; }
    .aside-item{ width:46px; height:46px; }
    .aside .pop{ display:none; }
}

/* 度橙标志：裁切图像空白区域并在页脚自然融合背景 */
.logo { position: relative; width: 64px; height: 108px; overflow: hidden; mix-blend-mode: multiply; }
.logo img { position: absolute; left: -75%; top: 50%; width: 250%; max-width: none; height: auto !important; transform: translateY(-50%); }
.header.is-fixed .logo { width: 52px; height: 88px; }
.footer .logo { width: 43px; height: 72px; }
@media (max-width: 992px) {
  .header .logo, .header.is-fixed .logo { width: 43px; height: 72px; }
  .footer .logo { width: 37px; height: 62px; }
}