/* ==========================================================
   style.css — 面板加大 · 动画丝滑优化
   ========================================================== */

/* ── 1. 变量 ─────────────────────────────────── */
:root {
    --bg:           #f5f7fc;

    --g-bg:         rgba(255,255,255,0.56);
    --g-bg-strong:  rgba(255,255,255,0.74);
    --g-border:     rgba(255,255,255,0.72);
    --g-shadow:     0 8px 32px rgba(0,0,0,0.06);
    --g-blur:       22px;

    --accent:       #6366f1;
    --accent-hover: #4f46e5;
    --accent-light: #a5b4fc;
    --accent-soft:  rgba(99,102,241,0.07);
    --accent-glow:  rgba(99,102,241,0.12);

    --t1: #1a1a2e;
    --t2: #475569;
    --t3: #94a3b8;
    --white: #ffffff;

    --max-w:  1200px;
    --gap:    100px;
    --radius: 20px;
    --radius-sm: 14px;

    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);

    --ff-display: 'Noto Serif SC','STSong','SimSun','Songti SC',serif;
    --ff-body:    'Noto Sans SC','PingFang SC','Microsoft YaHei','Helvetica Neue',sans-serif;
}


/* ── 2. 重置 ─────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{
    font-family:var(--ff-body);
    color:var(--t1);
    line-height:1.7;
    background:var(--bg);
    background-image:
        radial-gradient(ellipse 70% 50% at 12% 0%,  rgba(99,102,241,0.035) 0%,transparent 100%),
        radial-gradient(ellipse 60% 60% at 88% 100%,rgba(165,180,252,0.035) 0%,transparent 100%);
    overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:var(--accent);text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
.container{max-width:var(--max-w);margin:0 auto;padding:0 32px}


/* ── 3. 噪点 ─────────────────────────────────── */
.noise{
    position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.022;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}


/* ── 4. 页面容器 ─────────────────────────────── */
.page-wrap{
    padding-top:70px;
    min-height:100vh;
}


/* ── 5. 毛玻璃 ───────────────────────────────── */
.glass{
    background:var(--g-bg);
    backdrop-filter:blur(var(--g-blur));
    -webkit-backdrop-filter:blur(var(--g-blur));
    border:1px solid var(--g-border);
    border-radius:var(--radius);
    box-shadow:var(--g-shadow),inset 0 1px 0 rgba(255,255,255,.55);
}


/* ── 6. 文字辅助 ─────────────────────────────── */
.section-tag{
    display:inline-block;
    font-family:var(--ff-body);
    font-size:.72rem;font-weight:700;
    letter-spacing:.14em;text-transform:uppercase;
    color:var(--accent);
    background:var(--accent-soft);
    padding:6px 16px;border-radius:100px;
    margin-bottom:16px;
}
.section-title{
    font-family:var(--ff-display);
    font-weight:900;
    font-size:clamp(1.6rem,3.5vw,2.5rem);
    line-height:1.25;
    margin-bottom:10px;
}
.section-desc{
    font-size:clamp(.88rem,1.4vw,1rem);
    color:var(--t2);
    max-width:580px;
    line-height:1.8;
}


/* ==========================================================
   轮播 — 面板加大 · 动画丝滑
   ========================================================== */
.hero{padding:18px 0 0}

.carousel{
    position:relative;
    width:100%;
    height:clamp(380px,54vh,580px);
    border-radius:var(--radius);
    overflow:hidden;
    background:#d9dde6;
    box-shadow:0 12px 48px rgba(0,0,0,0.07);
}

.carousel::before{
    content:'';position:absolute;top:0;left:0;right:0;
    height:2px;z-index:15;
    background:linear-gradient(90deg,var(--accent) 0%,var(--accent-light) 40%,transparent 80%);
}

/* ── 幻灯片（更长的淡入） ── */
.carousel-slide{
    position:absolute;inset:0;
    background-size:cover;background-position:center;
    opacity:0;
    transition:opacity 1.8s var(--ease-smooth);
    will-change:opacity,transform;
}
.carousel-slide.is-active{opacity:1}

.carousel-slide:nth-child(1){animation:kb1 28s ease-in-out infinite}
.carousel-slide:nth-child(2){animation:kb2 30s ease-in-out infinite}
.carousel-slide:nth-child(3){animation:kb3 32s ease-in-out infinite}
@keyframes kb1{0%,100%{transform:scale(1) translate(0,0)}50%{transform:scale(1.06) translate(-.4%,-.3%)}}
@keyframes kb2{0%,100%{transform:scale(1.03) translate(0,0)}50%{transform:scale(1) translate(.3%,.3%)}}
@keyframes kb3{0%,100%{transform:scale(1.02) translate(.2%,0)}50%{transform:scale(1.07) translate(-.2%,-.5%)}}

.carousel-gradient{
    position:absolute;inset:0;z-index:2;pointer-events:none;
    background:
        linear-gradient(to top,  rgba(0,0,0,.35) 0%, transparent 52%),
        linear-gradient(to right,rgba(0,0,0,.16) 0%, transparent 44%);
}

/* ── 计数器 ── */
.carousel-counter{
    position:absolute;z-index:12;
    top:clamp(14px,3%,24px);
    right:clamp(16px,3%,28px);
    font-family:var(--ff-body);
    font-weight:700;font-size:.78rem;
    letter-spacing:.08em;
    color:rgba(255,255,255,.75);
    padding:5px 14px;
    background:rgba(0,0,0,.18);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    border-radius:100px;
    border:1px solid rgba(255,255,255,.14);
    display:flex;align-items:center;gap:4px;
}
.counter-sep{opacity:.4;font-size:.68rem}


/* ── 玻璃态标题面板（加大版） ── */
.carousel-caption{
    position:absolute;z-index:10;
    left:clamp(22px,5%,58px);
    bottom:clamp(16px,7%,72px);
    width:clamp(340px,50%,600px);
    padding:clamp(18px,3.5vh,42px) clamp(22px,3.5vw,46px);
    background:rgba(255,255,255,0.63);
    backdrop-filter:blur(clamp(18px,2.5vw,30px)) saturate(1.5);
    -webkit-backdrop-filter:blur(clamp(18px,2.5vw,30px)) saturate(1.5);
    border-radius:clamp(14px,1.8vw,22px);
    border:1px solid rgba(255,255,255,0.82);
    box-shadow:
        0 clamp(6px,1.2vw,12px) clamp(20px,3.5vw,40px) rgba(0,0,0,0.08),
        inset 0 1px 0 rgba(255,255,255,0.7);
    /* 丝滑入场 */
    opacity:0;
    transform:translateY(20px);
    animation:panelIn .8s var(--ease-out) .2s forwards;
}

@keyframes panelIn{
    from{opacity:0;transform:translateY(20px)}
    to{opacity:1;transform:translateY(0)}
}

.caption-accent{
    position:absolute;left:0;
    top:clamp(18px,3.5vh,34px);
    bottom:clamp(18px,3.5vh,34px);
    width:3px;
    background:linear-gradient(to bottom,var(--accent),var(--accent-light));
    border-radius:4px;
}

.caption-tag{
    display:inline-block;
    font-family:var(--ff-body);
    font-size:.72rem;font-weight:700;
    letter-spacing:.12em;text-transform:uppercase;
    color:var(--accent);
    margin-bottom:clamp(8px,1.2vh,14px);
}
.caption-title{
    font-family:var(--ff-display);
    font-weight:900;
    font-size:clamp(1.2rem,3vw,2rem);
    line-height:1.3;
    margin-bottom:clamp(6px,1vh,12px);
}
.caption-sub{
    font-size:clamp(.82rem,1.2vw,.95rem);
    color:var(--t2);
    line-height:1.8;
    margin-bottom:clamp(10px,1.5vh,16px);
}

/* 要点列表 */
.caption-highlights{
    list-style:none;
    padding:0;margin:0 0 clamp(12px,1.8vh,20px);
    display:flex;flex-direction:column;
    gap:clamp(5px,.7vh,8px);
}
.caption-highlights li{
    font-size:clamp(.78rem,1.05vw,.88rem);
    color:var(--t2);
    padding-left:clamp(16px,2vw,22px);
    position:relative;
    line-height:1.6;
}
.caption-highlights li::before{
    content:'';
    position:absolute;left:0;
    top:clamp(5px,.8vh,8px);
    width:clamp(5px,.5vw,7px);
    height:clamp(5px,.5vw,7px);
    border-radius:50%;
    background:var(--accent);
    box-shadow:0 0 6px rgba(99,102,241,.3);
}

/* ── 阶梯入场动画（更丝滑的缓动） ── */
.carousel-caption > .caption-tag,
.carousel-caption > .caption-title,
.carousel-caption > .caption-sub,
.carousel-caption > .caption-highlights,
.carousel-caption > .caption-btn{
    transition:opacity .4s var(--ease-smooth),
               transform .4s var(--ease-smooth);
}
.carousel-caption.is-swapping > .caption-tag,
.carousel-caption.is-swapping > .caption-title,
.carousel-caption.is-swapping > .caption-sub,
.carousel-caption.is-swapping > .caption-highlights,
.carousel-caption.is-swapping > .caption-btn{
    opacity:0;transform:translateY(-10px);
}

.carousel-caption.is-entering > .caption-tag{animation:sIn .5s var(--ease-out) forwards}
.carousel-caption.is-entering > .caption-title{animation:sIn .5s var(--ease-out) .08s forwards}
.carousel-caption.is-entering > .caption-sub{animation:sIn .5s var(--ease-out) .16s forwards}
.carousel-caption.is-entering > .caption-highlights{animation:sIn .5s var(--ease-out) .24s forwards}
.carousel-caption.is-entering > .caption-btn{animation:sIn .5s var(--ease-out) .32s forwards}

@keyframes sIn{
    from{opacity:0;transform:translateY(16px)}
    to{opacity:1;transform:translateY(0)}
}

.caption-btn{
    display:inline-flex;align-items:center;gap:8px;
    font-family:var(--ff-body);
    font-weight:700;
    font-size:clamp(.82rem,1.1vw,.92rem);
    letter-spacing:.03em;
    padding:clamp(9px,1.2vh,14px) clamp(18px,2.4vw,28px);
    border-radius:100px;
    color:var(--white);
    background:var(--accent);
    transition:background .3s var(--ease-smooth),
               box-shadow .3s var(--ease-smooth),
               letter-spacing .35s var(--ease-smooth),
               transform .3s var(--ease-smooth);
}
.caption-btn:hover{
    background:var(--accent-hover);
    box-shadow:0 8px 28px rgba(99,102,241,.35);
    letter-spacing:.08em;
    transform:translateY(-1px);
}

/* ── 导航胶囊 ── */
.carousel-nav{
    position:absolute;z-index:12;
    bottom:clamp(10px,2%,20px);
    right:clamp(12px,2.5%,26px);
    display:flex;align-items:center;gap:4px;
    padding:5px 8px;
    background:rgba(255,255,255,0.5);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    border-radius:100px;
    border:1px solid rgba(255,255,255,0.68);
    box-shadow:0 4px 18px rgba(0,0,0,0.05);
}
.nav-btn{
    width:clamp(24px,3vw,32px);
    height:clamp(24px,3vw,32px);
    display:grid;place-items:center;
    border-radius:50%;
    color:var(--t2);
    transition:background .3s var(--ease-smooth),
               color .3s var(--ease-smooth),
               transform .3s var(--ease-smooth);
}
.nav-btn:hover{background:rgba(0,0,0,0.06);color:var(--t1);transform:scale(1.1)}

.nav-dots{
    display:flex;align-items:center;
    gap:clamp(4px,.5vw,6px);
    padding:0 4px;
}
.nav-dot{
    width:6px;height:6px;border-radius:100px;
    background:rgba(0,0,0,0.12);
    cursor:pointer;
    transition:width .4s var(--ease-out),
               background .4s var(--ease-smooth);
}
.nav-dot.is-active{
    width:clamp(16px,2.2vw,24px);
    background:var(--accent);
}
.nav-dot:hover:not(.is-active){background:rgba(0,0,0,0.22)}

.carousel-bar{
    position:absolute;bottom:0;left:0;right:0;
    height:2px;z-index:12;
    background:rgba(255,255,255,.15);
}
.carousel-bar span{
    display:block;height:100%;width:0;
    background:linear-gradient(90deg,var(--accent),var(--accent-light));
}


/* ==========================================================
   功能特性 — 4n 循环 · 丝滑浮动
   ========================================================== */
.features{padding:var(--gap) 0 calc(var(--gap) - 20px)}
.section-hd{margin-bottom:48px}

.ft-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
}

.ft-card:nth-child(4n+1){grid-column:1/3}
.ft-card:nth-child(4n+2){grid-column:3}
.ft-card:nth-child(4n+3){grid-column:1}
.ft-card:nth-child(4n+4){grid-column:2/4}

.ft-card{
    padding:34px 30px;
    transition:transform .5s var(--ease-out),
               box-shadow .5s var(--ease-smooth),
               border-color .4s var(--ease-smooth);
    will-change:transform;
}
.ft-card:hover{
    transform:translateY(-8px)!important;
    box-shadow:0 16px 48px var(--accent-glow);
    border-color:rgba(99,102,241,.18);
    animation-play-state:paused!important;
}

.ft-head{
    display:flex;align-items:center;gap:12px;
    margin-bottom:14px;
}
.ft-icon{
    width:42px;height:42px;
    display:flex;align-items:center;justify-content:center;
    font-size:1.2rem;
    background:var(--accent-soft);
    border-radius:12px;
    flex-shrink:0;
    transition:transform .4s var(--ease-out);
}
.ft-card:hover .ft-icon{transform:scale(1.08)}

.ft-title{
    font-family:var(--ff-display);
    font-weight:700;font-size:1.1rem;
    line-height:1.3;
}
.ft-desc{
    font-size:.88rem;
    color:var(--t2);
    line-height:1.85;
}

/* 丝滑浮动 — 用更柔和的缓动 */
.ft-card:nth-child(4n+1){animation:fl 6s var(--ease-smooth) infinite}
.ft-card:nth-child(4n+2){animation:fl 7s var(--ease-smooth) infinite .4s}
.ft-card:nth-child(4n+3){animation:fl 6.5s var(--ease-smooth) infinite .8s}
.ft-card:nth-child(4n+4){animation:fl 7.5s var(--ease-smooth) infinite 1.2s}
@keyframes fl{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}


/* ==========================================================
   信息栏
   ========================================================== */
.info{padding:0 0 var(--gap)}
.info-bar{
    display:flex;align-items:center;justify-content:center;
    padding:36px 44px;
    flex-wrap:wrap;
}
.info-item{flex:1;text-align:center;min-width:170px;padding:8px 18px}
.info-label{
    display:block;
    font-size:.75rem;font-weight:700;
    letter-spacing:.1em;text-transform:uppercase;
    color:var(--t3);margin-bottom:5px;
}
.info-val{
    font-family:var(--ff-display);
    font-weight:700;font-size:1.05rem;
    color:var(--t1);word-break:break-all;
}
.info-sep{width:1px;height:38px;background:rgba(0,0,0,.07);flex-shrink:0}


/* ==========================================================
   页脚 — 黑色
   ========================================================== */
.footer{
    background:#08080a;
    color:rgba(255,255,255,.55);
    position:relative;overflow:hidden;
}
.footer-glow{
    height:2px;
    background:linear-gradient(90deg,var(--accent) 0%,var(--accent-light) 35%,transparent 70%);
}
.footer .container{padding-top:38px;padding-bottom:30px}

.footer-main{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:36px;flex-wrap:wrap;
}
.footer-left{display:flex;gap:44px;align-items:flex-start;flex-wrap:wrap}
.footer-brand-col{min-width:160px}
.footer-brand{
    font-family:var(--ff-display);
    font-weight:900;font-size:1.3rem;
    color:#fff;display:block;
}
.footer-tagline{
    font-size:.82rem;color:rgba(255,255,255,.32);
    margin-top:4px;display:block;
}
.footer-heading{
    font-family:var(--ff-body);
    font-weight:700;font-size:.76rem;
    letter-spacing:.08em;
    color:rgba(255,255,255,.32);
    text-transform:uppercase;
    margin-bottom:14px;
}
.footer-links-col{display:flex;flex-direction:column;gap:10px}
.footer-links-col a{
    color:rgba(255,255,255,.5);font-size:.88rem;
    transition:color .3s var(--ease-smooth);
}
.footer-links-col a:hover{color:#fff}
.footer-contact-col{display:flex;flex-direction:column;gap:10px}
.footer-contact-item{
    display:flex;align-items:center;gap:8px;
    font-size:.85rem;color:rgba(255,255,255,.5);
}
.footer-contact-item svg{opacity:.5;flex-shrink:0}

.footer-right{text-align:center}
.footer-qr-group{display:flex;gap:16px;margin-top:4px}
.footer-qr{
    display:flex;flex-direction:column;align-items:center;gap:6px;
}
.footer-qr img{
    width:76px;height:76px;
    border-radius:10px;object-fit:cover;
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 2px 12px rgba(0,0,0,.3);
}
.footer-qr span{
    font-size:.72rem;font-weight:500;
    letter-spacing:.04em;color:rgba(255,255,255,.35);
}
.footer-bottom{
    margin-top:30px;
    padding-top:18px;
    border-top:1px solid rgba(255,255,255,.05);
    text-align:center;
    font-size:.78rem;
    color:rgba(255,255,255,.2);
}


/* ==========================================================
   滚动入场（更丝滑）
   ========================================================== */
.reveal{
    opacity:0;transform:translateY(36px);
    transition:opacity .8s var(--ease-out),
               transform .8s var(--ease-out);
    transition-delay:calc(var(--d,0) * 100ms);
}
.reveal.is-visible{opacity:1;transform:translateY(0)}


/* ==========================================================
   响应式
   ========================================================== */
@media(max-width:960px){
    .ft-grid{grid-template-columns:1fr 1fr}
    .ft-card:nth-child(4n+1),
    .ft-card:nth-child(4n+2),
    .ft-card:nth-child(4n+3),
    .ft-card:nth-child(4n+4){grid-column:auto}
    .footer-left{gap:28px}
}
@media(max-width:720px){
    .footer-main{flex-direction:column;align-items:center;text-align:center}
    .footer-left{flex-direction:column;align-items:center;gap:24px}
    .footer-right{margin-top:8px}
}
@media(max-width:600px){
    :root{--gap:60px;--radius:14px}
    .page-wrap{padding-top:56px}
    .container{padding:0 18px}

    .carousel{height:clamp(300px,56vh,460px)}
    .carousel-caption{
        left:4%;right:4%;bottom:8%;
        width:auto;
        padding:clamp(14px,2.5vh,22px) clamp(14px,2.5vw,22px);
    }
    .caption-highlights{display:none}

    .ft-grid{grid-template-columns:1fr}
    .ft-card:nth-child(4n+1),
    .ft-card:nth-child(4n+2),
    .ft-card:nth-child(4n+3),
    .ft-card:nth-child(4n+4){grid-column:auto}
    .ft-card{padding:26px 22px}

    .info-bar{flex-direction:column;gap:18px;padding:26px 22px}
    .info-sep{width:36px;height:1px}
}