/* =========================================
 * 银河兔 · 教育平台前端 v3
 * 框架参考：掌门一对一 zhangmen.com（视觉/落地页风）
 * 主色 #1B5DA8（宝石蓝） + CTA #ff6e2e（活力橙）
 * 全宽 section + 渐变背景 + 大标题 H2 + 大量留白
 * ========================================= */

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    font-family: "PingFang SC", "Microsoft YaHei", "微软雅黑", "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    color: #2c2c2c;
    background: #fff;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; color: inherit; transition: color .2s; }
a:hover { color: #1B5DA8; }
ul { list-style: none; }
img { max-width: 100%; display: block; border: 0; }
button { font-family: inherit; cursor: pointer; border: 0; background: transparent; }
input, textarea, select { font-family: inherit; outline: none; }

:root {
    --primary: #1B5DA8;
    --primary-dark: #154a85;
    --primary-light: #e7eff9;
    --cta: #ff6e2e;
    --cta-dark: #e85a1c;
    --gold: #ffd566;
    --text: #2c2c2c;
    --text-sub: #666;
    --text-mute: #999;
    --line: #e6e6e6;
    --line-2: #f0f0f0;
}

/* ===== Layout ===== */
.layout {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.section-wrapper {
    padding: 80px 0;
    position: relative;
    overflow: hidden;
    background: #fff;
}
.section-title {
    text-align: center;
    font-size: 38px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: 1px;
    margin-bottom: 14px;
}
.section-subtitle {
    text-align: center;
    font-size: 18px;
    font-weight: 400;
    color: var(--text-sub);
    letter-spacing: 1px;
    margin-bottom: 56px;
}

/* 背景色变化（让多个 section 之间有节奏感） */
.bg-light { background: #f7f9fc; }
.bg-blue { background: linear-gradient(135deg, #f0f4fb 0%, #e7eff9 100%); }
.bg-dark { background: linear-gradient(135deg, #102b4f 0%, #1B5DA8 100%); color: #fff; }
.bg-dark .section-title { color: #fff; }
.bg-dark .section-subtitle { color: rgba(255,255,255,.85); }

/* ===== Buttons ===== */
.btn {
    display: inline-block;
    padding: 14px 42px;
    border-radius: 30px;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    transition: all .2s;
    cursor: pointer;
    line-height: 1.4;
    letter-spacing: 1px;
}
.btn-primary {
    background: var(--primary);
    color: #fff !important;
    box-shadow: 0 6px 18px rgba(27,93,168,.25);
}
.btn-primary:hover {
    background: var(--primary-dark);
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(27,93,168,.35);
}
.btn-cta {
    background: var(--cta);
    color: #fff !important;
    box-shadow: 0 6px 18px rgba(255,110,46,.3);
}
.btn-cta:hover {
    background: var(--cta-dark);
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(255,110,46,.4);
}
.btn-ghost {
    background: rgba(255,255,255,.08);
    color: #fff !important;
    border: 1px solid rgba(255,255,255,.5);
}
.btn-ghost:hover { background: rgba(255,255,255,.15); border-color: #fff; }
.btn-block { display: block; width: 100%; }

.btn-wrapper { text-align: center; margin-top: 50px; }

/* ============================================
 * 三层顶部：topbar / header / nav（chweifeng 风）
 * ============================================ */

/* ----- topbar 细条 ----- */
.tq-topbar {
    background: #0a1e3d;
    color: #c8d3e4;
    font-size: 13px;
    line-height: 36px;
}
.tq-topbar .layout {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.tq-topbar a { color: #c8d3e4; margin-left: 18px; }
.tq-topbar a:hover { color: #fff; }
.tq-topbar-left a { color: var(--gold); margin-left: 4px; }

/* ===== 首页 hero header(透明叠加在 banner 上,滚动后变白) ===== */
body.page-home .tq-topbar,
body.page-home .tq-header,
body.page-home .tq-nav {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 100;
    transition: background-color .3s ease, color .3s ease, box-shadow .3s ease, border-color .3s ease;
}
body.page-home .tq-topbar { top: 0; }
body.page-home .tq-header { top: 36px; }
body.page-home .tq-nav { top: 144px; }

/* 默认透明态(首页 banner 区) */
body.page-home .tq-topbar {
    background: rgba(10,30,61,.4);
    color: rgba(255,255,255,.88);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(255,255,255,.08);
}
body.page-home .tq-topbar a { color: rgba(255,255,255,.88); }
body.page-home .tq-topbar-left a { color: #ffd566; }

body.page-home .tq-header {
    background: rgba(10,30,61,.25);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255,255,255,.06);
}
body.page-home .tq-brand-name { color: #fff; }
body.page-home .tq-brand-sub { color: rgba(255,255,255,.65); }
body.page-home .tq-tel-info span { color: rgba(255,255,255,.78); }
body.page-home .tq-tel-info p { color: #fff; }

body.page-home .tq-nav {
    background: rgba(10,30,61,.55);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(255,255,255,.06);
    border-bottom: 1px solid rgba(255,213,102,.5);
    box-shadow: none;
}
body.page-home .tq-nav-list li a { color: rgba(255,255,255,.95); }
body.page-home .tq-nav-list li a:hover { color: #ffd566; }

/* 滚动后白底态 — 当 body.scrolled 时 */
body.page-home.scrolled .tq-topbar {
    background: #0a1e3d;
    color: #c8d3e4;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom-color: transparent;
}
body.page-home.scrolled .tq-topbar a { color: #c8d3e4; }
body.page-home.scrolled .tq-topbar-left a { color: var(--gold); }

body.page-home.scrolled .tq-header {
    background: #fff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid var(--line-2);
}
body.page-home.scrolled .tq-brand-name { color: var(--text); }
body.page-home.scrolled .tq-brand-sub { color: var(--text-mute); }
body.page-home.scrolled .tq-tel-info span { color: var(--text-mute); }
body.page-home.scrolled .tq-tel-info p { color: var(--primary); }

body.page-home.scrolled .tq-nav {
    background: #fff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-top: 1px solid var(--line-2);
    border-bottom: 4px solid var(--primary);
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
body.page-home.scrolled .tq-nav-list li a { color: var(--text); }

/* ----- Header（logo + 电话） ----- */
.tq-header {
    background: #fff;
    padding: 18px 0;
    border-bottom: 1px solid var(--line-2);
}
.tq-header .layout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.tq-logo {
    display: flex;
    align-items: center;
    gap: 12px;
}
.tq-logo img {
    width: 68px;
    height: 72px;
    object-fit: contain;
    background: transparent;
    flex-shrink: 0;
    filter: drop-shadow(0 2px 6px rgba(13,58,133,.25));
}
.tq-logo .tq-brand-name {
    font-size: 46px;
    font-weight: 900;
    color: var(--primary);
    letter-spacing: 6px;
    line-height: 1;
    font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
}
.tq-logo .tq-brand-sub {
    display: block;
    font-size: 13px;
    color: var(--text-mute);
    margin-top: 10px;
    letter-spacing: 4px;
    font-weight: 600;
    font-family: Arial, sans-serif;
}

/* logo + 全国 切换器 包一组 */
.tq-logo-wrap {
    display: flex;
    align-items: center;
    gap: 18px;
}

.tq-tel {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}
.tq-tel-icon {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--cta), #ff8a4d);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    box-shadow: 0 4px 14px rgba(255,110,46,.3);
}
.tq-tel-info span {
    font-size: 13px;
    color: var(--text-mute);
    display: block;
    line-height: 1.2;
}
.tq-tel-info p {
    font-size: 26px;
    font-weight: 800;
    color: var(--cta);
    line-height: 1.2;
    letter-spacing: 1px;
    font-family: Arial, sans-serif;
    margin: 2px 0 0;
}

/* ----- 主导航 4 项（白底加粗大字，更明显） ----- */
.tq-nav {
    background: #fff;
    border-top: 1px solid var(--line-2);
    border-bottom: 4px solid var(--primary);
    position: sticky;
    top: 0;
    z-index: 999;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.tq-nav-list {
    display: flex;
    justify-content: center;
    align-items: stretch;
}
.tq-nav-list li {
    flex: 1;
    text-align: center;
    max-width: 240px;
    position: relative;
}
.tq-nav-list li a {
    display: block;
    line-height: 56px;
    font-size: 19px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: 4px;
    transition: all .25s;
    position: relative;
}
.tq-nav-list li a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0;
    height: 4px;
    background: var(--cta);
    transition: width .3s;
    transform: translateX(-50%);
    border-radius: 2px 2px 0 0;
}
.tq-nav-list li a:hover,
.tq-nav-list li a.active {
    color: var(--primary);
    background: var(--primary-light);
}
.tq-nav-list li a:hover::after,
.tq-nav-list li a.active::after {
    width: 60%;
}


/* ============================================
 * 首屏 Banner：深蓝渐变 + 装饰浮动 + 巨型文字（chweifeng 装饰风）
 * ============================================ */
.tq-banner {
    position: relative;
    height: 620px;
    background-color: #050d24;
    background-image:
        linear-gradient(180deg, rgba(8,18,46,.35) 0%, rgba(8,18,46,.15) 35%, rgba(8,18,46,.45) 80%, rgba(5,13,36,.7) 100%),
        url('../images/banner-bg.jpg?v=2026050501');
    background-image:
        linear-gradient(180deg, rgba(8,18,46,.35) 0%, rgba(8,18,46,.15) 35%, rgba(8,18,46,.45) 80%, rgba(5,13,36,.7) 100%),
        image-set(
            url('../images/banner-bg.webp?v=2026050501') type('image/webp'),
            url('../images/banner-bg.jpg?v=2026050501') type('image/jpeg')
        );
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 首页 body 加 padding-top,把 banner 整体推到 fixed header 下方 */
body.page-home {
    padding-top: 204px;
    background-color: #050d24;
}

/* 抽象渐变光斑(纯 CSS,自研) */
.tq-banner-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    z-index: 0;
    pointer-events: none;
}
.tq-blob-1 {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(96,165,250,.45) 0%, transparent 65%);
    top: -150px;
    left: -100px;
    animation: blobMove1 14s ease-in-out infinite;
}
.tq-blob-2 {
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, rgba(167,139,250,.4) 0%, transparent 65%);
    bottom: -200px;
    right: -150px;
    animation: blobMove2 18s ease-in-out infinite;
}
.tq-blob-3 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(255,213,102,.18) 0%, transparent 65%);
    top: 30%;
    right: 20%;
    animation: blobMove3 12s ease-in-out infinite;
}
@keyframes blobMove1 {
    0%,100% { transform: translate(0,0) scale(1); }
    50% { transform: translate(60px,40px) scale(1.1); }
}
@keyframes blobMove2 {
    0%,100% { transform: translate(0,0) scale(1); }
    50% { transform: translate(-50px,-60px) scale(1.05); }
}
@keyframes blobMove3 {
    0%,100% { transform: translate(0,0) scale(1); opacity:.8; }
    50% { transform: translate(40px,30px) scale(.9); opacity:1; }
}

/* 网格底纹(极淡,只为增加深度) */
.tq-banner-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 80px 80px;
    z-index: 0;
    pointer-events: none;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
}

.tq-banner-svg { display: none; }

/* 底部信任数据条 */
.tq-banner-stats {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 50px;
    padding: 22px 40px;
    background: linear-gradient(to bottom, rgba(8,18,46,0) 0%, rgba(5,13,36,.7) 60%, rgba(5,13,36,.95) 100%);
    border-top: 1px solid rgba(255,255,255,.08);
}
.tbs-item {
    text-align: center;
    color: #fff;
    min-width: 130px;
}
.tbs-num {
    font-size: 36px;
    font-weight: 800;
    color: #ffd566;
    line-height: 1;
    letter-spacing: 1px;
}
.tbs-num span {
    font-size: 18px;
    font-weight: 700;
    margin-left: 2px;
    color: #fff;
}
.tbs-label {
    font-size: 13px;
    color: rgba(255,255,255,.7);
    letter-spacing: 1px;
    margin-top: 6px;
}
.tbs-divider {
    width: 1px;
    height: 36px;
    background: rgba(255,255,255,.18);
}
@media (max-width: 900px) {
    .tq-banner-stats { gap: 16px; padding: 14px 16px; }
    .tbs-num { font-size: 26px; }
    .tbs-num span { font-size: 14px; }
    .tbs-label { font-size: 11px; }
    .tbs-item { min-width: 70px; }
}
.tq-banner::before {
    content: "";
    position: absolute;
    top: -20%; left: -10%;
    width: 600px; height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(25,118,210,.18) 0%, transparent 60%);
    pointer-events: none;
}
.tq-banner::after {
    content: "";
    position: absolute;
    bottom: -15%; right: -5%;
    width: 500px; height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,188,212,.12) 0%, transparent 60%);
    pointer-events: none;
}

.tq-banner-side-tag {
    position: absolute;
    top: 0; left: 0;
    background: #e53935;
    color: #fff !important;
    padding: 16px 14px;
    font-size: 16px;
    font-weight: 800;
    writing-mode: vertical-lr;
    letter-spacing: 4px;
    z-index: 5;
    border-radius: 0 0 8px 0;
    box-shadow: 2px 2px 12px rgba(229,57,53,.3);
    transition: all .2s;
}
.tq-banner-side-tag:hover {
    background: #c62828;
    color: #fff !important;
    padding-top: 22px;
}

.tq-banner-decor {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}
.tq-banner-decor span {
    position: absolute;
    border-radius: 50%;
    animation: tqFloat 6s ease-in-out infinite;
    pointer-events: none;
}
.tq-banner-decor .d1 { top: -5%; left: 8%; width: 400px; height: 400px; border: 3px solid rgba(0,188,212,.18); animation-duration: 8s; }
.tq-banner-decor .d2 { top: 8%; left: 14%; width: 300px; height: 300px; border: 2px solid rgba(103,58,183,.15); animation-duration: 7s; animation-delay: 1s; }
.tq-banner-decor .d3 { top: 50%; left: 5%; width: 320px; height: 320px; border: 2px solid rgba(76,175,80,.12); animation-duration: 7.5s; animation-delay: 2s; }
.tq-banner-decor .d4 { top: 0; right: 8%; width: 400px; height: 400px; border: 3px solid rgba(245,166,35,.18); animation-duration: 8s; animation-delay: .5s; }
.tq-banner-decor .d5 { top: 10%; right: 14%; width: 300px; height: 300px; border: 2px solid rgba(13,71,161,.15); animation-duration: 7s; animation-delay: 1.5s; }
.tq-banner-decor .d6 { top: 48%; right: 5%; width: 320px; height: 320px; border: 2px solid rgba(255,160,0,.12); animation-duration: 7.5s; animation-delay: 2.5s; }
.tq-banner-decor .d7 { top: 18%; left: 22%; width: 14px; height: 14px; background: rgba(0,188,212,.5); box-shadow: 0 0 24px rgba(0,188,212,.4); animation-duration: 3s; }
.tq-banner-decor .d8 { top: 65%; right: 18%; width: 16px; height: 16px; background: rgba(245,166,35,.5); box-shadow: 0 0 26px rgba(245,166,35,.4); animation-duration: 3.5s; animation-delay: 1s; }

.tq-banner-shape {
    position: absolute;
    border-radius: 28px;
    animation: tqFloat 5.5s ease-in-out infinite;
    pointer-events: none;
}
.tq-banner-shape.s1 { top: 8%; left: 20%; width: 130px; height: 130px; border: 2.5px solid rgba(0,188,212,.18); transform: rotate(15deg); }
.tq-banner-shape.s2 { top: 30%; left: 26%; width: 90px; height: 90px; border: 2px solid rgba(103,58,183,.16); transform: rotate(-12deg); animation-delay: 1.2s; }
.tq-banner-shape.s3 { bottom: 18%; left: 24%; width: 110px; height: 110px; border: 2px solid rgba(233,30,99,.16); transform: rotate(25deg); animation-delay: 2s; }
.tq-banner-shape.s4 { top: 6%; right: 22%; width: 130px; height: 130px; border: 2.5px solid rgba(245,166,35,.18); transform: rotate(-20deg); animation-delay: .5s; }
.tq-banner-shape.s5 { top: 30%; right: 26%; width: 90px; height: 90px; border: 2px solid rgba(13,71,161,.16); transform: rotate(12deg); animation-delay: 1.5s; }
.tq-banner-shape.s6 { bottom: 18%; right: 24%; width: 110px; height: 110px; border: 2px solid rgba(255,160,0,.16); transform: rotate(-15deg); animation-delay: 2.5s; }

@keyframes tqFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-18px) rotate(2deg); }
}


.tq-banner-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 980px;
    padding: 0 32px;
}

/* ============================================
 * 右侧浮动「在线咨询」白色简洁相框
 * ============================================ */
.tq-frame {
    position: absolute;
    right: 70px;
    top: 130px;
    z-index: 10;
    width: 240px;
    padding: 16px 16px 14px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 12px 36px rgba(0,0,0,.22);
}

.tf-inner {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 12px;
}
.tf-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.tf-inner.tf-empty {
    background: linear-gradient(135deg, #f5f7fb, #e8edf5);
}
.tf-inner.tf-empty::after {
    content: "二维码占位\A请上传 wechat-qr.png";
    white-space: pre;
    position: absolute;
    inset: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 11px;
    color: #94a3b8;
    line-height: 1.7;
    border: 1px dashed #cbd5e1;
    border-radius: 4px;
}

.tf-caption {
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    color: #0d3a85;
    letter-spacing: 4px;
    line-height: 1;
    padding: 4px 0 2px;
}

/* 左文字 + 右插画 双栏布局 */
.tq-banner-content--row {
    max-width: 1200px;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    width: 100%;
}
.tq-banner-text {
    flex: 1;
    max-width: 640px;
}


/* ============================================
 * 右侧 SaaS 风浮动数据卡片（学情诊断 / 老师 / 提分曲线）
 * ============================================ */
.tq-banner-illus {
    position: relative;
    width: 460px;
    height: 440px;
    flex-shrink: 0;
}
.tq-banner-illus .illus-glow {
    position: absolute;
    inset: -20px;
    background: radial-gradient(circle at center, rgba(255,213,102,.22) 0%, rgba(173,216,255,.08) 50%, transparent 75%);
    filter: blur(40px);
    pointer-events: none;
}

.ill-card {
    position: absolute;
    background: rgba(255,255,255,.97);
    border-radius: 14px;
    padding: 18px 20px;
    box-shadow: 0 14px 40px rgba(0,0,0,.25), 0 0 0 1px rgba(255,255,255,.4) inset;
    color: #2c2c2c;
    animation: cardFloat 6s ease-in-out infinite;
}
@keyframes cardFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}

.ic-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
.ic-tag {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}
.ic-tag-blue   { background: linear-gradient(135deg, #1976d2, #42a5f5); }
.ic-tag-orange { background: linear-gradient(135deg, #ff7043, #ffab91); }
.ic-tag-green  { background: linear-gradient(135deg, #43a047, #81c784); }
.ic-title {
    font-size: 15px;
    font-weight: 700;
    color: #1a2e5e;
    line-height: 1.2;
    letter-spacing: .5px;
}
.ic-sub {
    font-size: 11px;
    color: #94a3b8;
    margin-top: 3px;
    letter-spacing: .5px;
}
.ic-num {
    margin-top: 3px;
    line-height: 1;
}
.ic-num strong {
    font-size: 24px;
    font-weight: 900;
    color: #ff7043;
    font-family: Arial, sans-serif;
    letter-spacing: 1px;
}
.ic-num span {
    font-size: 12px;
    color: #ff7043;
    margin-left: 2px;
    font-weight: 600;
}

.ic-rows {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ic-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: #475569;
}
.ic-row .ic-r-l {
    width: 32px;
    flex-shrink: 0;
    font-weight: 600;
}
.ic-row .ic-bar {
    flex: 1;
    height: 6px;
    background: #f0f4fb;
    border-radius: 4px;
    overflow: hidden;
    display: block;
}
.ic-row .ic-bar i {
    display: block;
    height: 100%;
    border-radius: 4px;
}
.ic-row .ic-r-r {
    width: 32px;
    text-align: right;
    font-weight: 700;
    color: #1a2e5e;
    font-family: Arial, sans-serif;
}

.ic-head-teacher .ic-avatar {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1976d2, #42a5f5);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 800;
    flex-shrink: 0;
}
.ic-stars {
    font-size: 12px;
    color: #ffa726;
    margin-top: 3px;
    letter-spacing: 1px;
}
.ic-stars span {
    color: #94a3b8;
    margin-left: 4px;
    font-weight: 500;
}
.ic-meta {
    font-size: 12px;
    color: #64748b;
    line-height: 1.5;
    padding-top: 10px;
    border-top: 1px dashed #e2e8f0;
}

.ic-chart {
    width: 100%;
    height: 38px;
    margin-top: 10px;
}

.ill-card-1 {
    width: 280px;
    top: 80px;
    left: 0;
    z-index: 3;
}
.ill-card-2 {
    width: 240px;
    top: 0;
    right: 0;
    z-index: 4;
    animation-delay: -2s;
}
.ill-card-3 {
    width: 220px;
    bottom: 20px;
    right: 30px;
    z-index: 5;
    animation-delay: -4s;
}

.ill-spark {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.ill-spark.s1 {
    width: 12px; height: 12px;
    top: 20%; left: 35%;
    background: rgba(255,213,102,.7);
    box-shadow: 0 0 24px rgba(255,213,102,.6);
    animation: cardFloat 4s ease-in-out infinite;
}
.ill-spark.s2 {
    width: 10px; height: 10px;
    top: 65%; left: 15%;
    background: rgba(173,216,255,.7);
    box-shadow: 0 0 20px rgba(173,216,255,.5);
    animation: cardFloat 5s ease-in-out 1s infinite;
}
.ill-spark.s3 {
    width: 14px; height: 14px;
    bottom: 25%; right: 8%;
    background: rgba(255,112,67,.6);
    box-shadow: 0 0 26px rgba(255,112,67,.5);
    animation: cardFloat 4.5s ease-in-out 2s infinite;
}


.tq-banner-eyebrow {
    display: inline-block;
    padding: 7px 22px;
    background: rgba(255,213,102,.14);
    border: 1px solid rgba(255,213,102,.4);
    border-radius: 30px;
    font-size: 13px;
    color: #ffd566;
    letter-spacing: 3px;
    margin-bottom: 22px;
}
.tq-banner-title {
    font-size: 76px;
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: 2px;
    color: #fff;
    margin-bottom: 28px;
}
.tq-banner-subtitle {
    font-size: 22px;
    font-weight: 400;
    color: rgba(255,255,255,.78);
    letter-spacing: 2px;
    margin-bottom: 14px;
}
.tq-banner-card {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    background: none;
    border: none;
    padding: 0;
    border-radius: 0;
    margin-bottom: 36px;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.tq-banner-card .tbc-dot {
    width: 36px;
    height: 1px;
    border-radius: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.45) 100%);
    box-shadow: none;
    animation: none;
}
.tq-banner-card span:not(.tbc-dot) {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 4px;
    color: rgba(255,255,255,.75);
    background: none;
    -webkit-text-fill-color: initial;
}
.tq-banner-desc {
    font-size: 14px;
    color: rgba(255,255,255,.55);
    margin-bottom: 36px;
    line-height: 1.6;
    letter-spacing: 4px;
    font-weight: 400;
}
.tq-banner-cta-wrap {
    display: flex;
    justify-content: center;
}
.tq-cta-big {
    padding: 18px 36px;
    font-size: 20px;
    letter-spacing: 3px;
}

/* ===== Banner 响应式断点 ===== */
@media (max-width: 1280px) {
    body.page-home { padding-top: 192px; }
    .tq-banner { height: 560px; }
    .tq-banner-title { font-size: 60px; letter-spacing: 1px; margin-bottom: 22px; }
    .tq-banner-subtitle { font-size: 20px; letter-spacing: 2px; }
    .tq-banner-desc { font-size: 13px; letter-spacing: 3px; margin-bottom: 30px; }
    .tq-banner-card { margin-bottom: 28px; }
    .tq-cta-big { padding: 16px 32px; font-size: 18px; }
}
@media (max-width: 900px) {
    body.page-home { padding-top: 180px; }
    .tq-banner { height: 480px; }
    .tq-banner-title { font-size: 44px; line-height: 1.18; letter-spacing: 1px; margin-bottom: 18px; }
    .tq-banner-subtitle { font-size: 17px; letter-spacing: 1.5px; margin-bottom: 10px; }
    .tq-banner-desc { font-size: 12px; letter-spacing: 2px; margin-bottom: 24px; }
    .tq-banner-card { margin-bottom: 22px; }
    .tq-banner-card span:not(.tbc-dot) { font-size: 12px; letter-spacing: 3px; }
    .tq-banner-card .tbc-dot { width: 24px; }
    .tq-cta-big { padding: 14px 28px; font-size: 16px; letter-spacing: 2px; }
}
@media (max-width: 600px) {
    body.page-home { padding-top: 168px; }
    .tq-banner { height: 420px; }
    .tq-banner-content { padding: 0 18px; }
    .tq-banner-title { font-size: 32px; letter-spacing: .5px; margin-bottom: 14px; }
    .tq-banner-subtitle { font-size: 14px; letter-spacing: 1px; margin-bottom: 8px; }
    .tq-banner-desc { font-size: 11px; letter-spacing: 1.5px; margin-bottom: 20px; line-height: 1.55; }
    .tq-banner-card { margin-bottom: 18px; }
    .tq-cta-big { padding: 12px 24px; font-size: 15px; letter-spacing: 1.5px; }
}
.tq-banner-cta {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    margin: 0;
    padding: 0;
    background: none;
    box-shadow: none;
    border: none;
    border-radius: 0;
}
.tq-cta-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 44px;
    background: linear-gradient(135deg, #f4b942 0%, #ffd566 50%, #f4b942 100%);
    color: #2a1c00 !important;
    border-radius: 40px;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 2px;
    box-shadow: 0 8px 28px rgba(244,185,66,.4), 0 0 60px rgba(255,213,102,.2);
    border: 1.5px solid rgba(255,255,255,.35);
    transition: transform .2s, box-shadow .2s, background .2s;
}
.tq-cta-primary:hover {
    transform: scale(1.05);
    background: linear-gradient(135deg, #ffd566 0%, #ffe082 50%, #ffd566 100%);
    box-shadow: 0 10px 36px rgba(244,185,66,.55), 0 0 80px rgba(255,213,102,.3);
    color: #2a1c00 !important;
}
.tq-cta-ghost {
    display: inline-flex;
    align-items: center;
    padding: 14px 30px;
    color: rgba(255,255,255,.92) !important;
    border: 1.5px solid rgba(255,255,255,.4);
    border-radius: 40px;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 2px;
    transition: background .2s, border-color .2s;
}
.tq-cta-ghost:hover {
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.7);
    color: #fff !important;
}

/* ===== 浮动卡片(3D 浮动面板派) ===== */
/* 隐藏旧的大圆环装饰(跟浮动卡片冲突) */
.tq-banner-decor .d1, .tq-banner-decor .d2, .tq-banner-decor .d3,
.tq-banner-decor .d4, .tq-banner-decor .d5, .tq-banner-decor .d6 { display: none; }

.tq-float-card {
    position: absolute;
    background: rgba(255,255,255,.07);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 16px;
    padding: 18px 20px;
    color: #fff;
    box-shadow: 0 12px 36px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.12);
    z-index: 5;
    width: 220px;
    animation: tq-float 6s ease-in-out infinite;
}
.tq-float-card--tl {
    top: 12%;
    left: 5%;
    transform: rotate(-3deg);
    animation-delay: 0s;
}
.tq-float-card--tr {
    top: 14%;
    right: 5%;
    transform: rotate(2.5deg);
    animation-delay: 1s;
    width: 230px;
}
.tq-float-card--bl {
    bottom: 14%;
    left: 6%;
    transform: rotate(2deg);
    animation-delay: 2s;
    width: 200px;
}
.tq-float-card--br {
    bottom: 13%;
    right: 6%;
    transform: rotate(-2.5deg);
    animation-delay: 3s;
    width: 210px;
}
@keyframes tq-float {
    0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); }
    50% { transform: translateY(-8px) rotate(var(--r, 0deg)); }
}
.tq-float-card--tl { --r: -3deg; }
.tq-float-card--tr { --r: 2.5deg; }
.tq-float-card--bl { --r: 2deg; }
.tq-float-card--br { --r: -2.5deg; }

/* 卡片内部组件 */
.tfc-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.tfc-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.tfc-dot--blue { background: #60a5fa; box-shadow: 0 0 8px #60a5fa; }
.tfc-dot--green { background: #4ade80; box-shadow: 0 0 8px #4ade80; }
.tfc-dot--orange { background: #fb923c; box-shadow: 0 0 8px #fb923c; }
.tfc-title { font-size: 13px; color: rgba(255,255,255,.85); letter-spacing: 1px; }
.tfc-foot {
    font-size: 12px;
    color: rgba(255,255,255,.65);
    letter-spacing: .5px;
    margin-top: 8px;
    line-height: 1.5;
}
.tfc-radar { display: block; margin: 6px auto 4px; }
.tfc-bignum {
    font-size: 36px;
    font-weight: 800;
    color: #fff;
    line-height: 1;
    letter-spacing: 1px;
    margin: 4px 0 6px;
}
.tfc-bignum span { font-size: 16px; font-weight: 600; color: rgba(255,255,255,.75); margin-left: 2px; }
.tfc-teacher { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.tfc-avatar {
    width: 42px; height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, #60a5fa, #a78bfa);
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(96,165,250,.4);
}
.tfc-name { font-size: 15px; font-weight: 700; color: #fff; }
.tfc-tag { font-size: 12px; color: rgba(255,255,255,.65); margin-top: 2px; }
.tfc-stars { font-size: 14px; color: #ffd566; letter-spacing: 1px; }
.tfc-stars span { color: rgba(255,255,255,.85); margin-left: 6px; font-weight: 700; }

@media (max-width: 1100px) {
    .tq-float-card { width: 180px; padding: 14px 16px; }
    .tq-float-card--tr, .tq-float-card--bl, .tq-float-card--br { width: 180px; }
    .tfc-bignum { font-size: 30px; }
    .tfc-radar { width: 100px; height: 100px; }
}
@media (max-width: 900px) {
    .tq-float-card { display: none; }
}

/* 主标题第二行:金色统一,饱和度调低让它跟暖色系不打架 */
.tq-banner-title .hl {
    color: #ffd566;
    background: none;
    -webkit-text-fill-color: initial;
    position: relative;
    display: inline-block;
}
.tq-banner-title .hl::after {
    content: none;
}

/* 装饰元素：金色"小银河"标识 + 星点 + 虚线 */
.tq-banner-ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: 100%;
}
.tq-banner-ornament-top { margin-bottom: 28px; }
.tq-banner-ornament-bottom { margin-top: 36px; }

.orn-line {
    width: 80px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,213,102,.65), transparent);
    flex-shrink: 0;
}
.orn-line-dashed {
    width: 60px;
    height: 1px;
    background: none;
    border-top: 1px dashed rgba(255,213,102,.45);
}

.orn-star {
    color: #ffd566;
    text-shadow: 0 0 14px rgba(255,213,102,.65);
    line-height: 1;
    animation: ornTwinkle 3s ease-in-out infinite alternate;
}
.orn-star-sm { font-size: 12px; opacity: .7; }
.orn-star-lg { font-size: 18px; }
.orn-star-lg + * { animation-delay: .8s; }

@keyframes ornTwinkle {
    0%   { opacity: .55; transform: scale(.92); }
    100% { opacity: 1;   transform: scale(1.08); }
}

.orn-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #ffd566;
    box-shadow: 0 0 10px rgba(255,213,102,.7);
    flex-shrink: 0;
}
.orn-dot-lg {
    width: 8px;
    height: 8px;
    box-shadow: 0 0 16px rgba(255,213,102,.85), 0 0 32px rgba(255,213,102,.4);
}

/* 主标题下方一个小 tag（zhangmen 风格） */
.tq-banner-tagline {
    display: inline-block;
    margin-top: 32px;
    margin-bottom: 28px;
    padding: 10px 28px;
    background: rgba(255,255,255,.95);
    color: #0d3a85;
    border-radius: 4px;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 3px;
    box-shadow: 0 6px 18px rgba(0,0,0,.18);
}
.tq-banner-tagline em {
    font-style: normal;
    background: linear-gradient(135deg, #0a1e3d, #0d47a1, #1976d2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 800;
}

/* 核心优点（chweifeng 风格：3 项用 · 分隔的描述行） */
.tq-banner-features {
    margin-top: 18px;
    font-size: 28px;
    font-weight: 500;
    color: rgba(255,255,255,.92);
    letter-spacing: 6px;
    line-height: 1.6;
    text-shadow: 0 2px 6px rgba(0,0,0,.3);
}

/* ============================================
 * 右侧微信小程序二维码卡（在线咨询）
 * ============================================ */
.tq-banner-qr {
    position: absolute;
    right: 80px;
    top: 100px;
    z-index: 10;
    width: 280px;
    background: #fff;
    border-radius: 14px;
    padding: 28px 24px 22px;
    box-shadow:
      0 16px 50px rgba(0,0,0,.25),
      0 0 0 1px rgba(255,213,102,.3);
    text-align: center;
    box-sizing: border-box;
    overflow: hidden;
}
.tq-banner-qr::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 5px;
    background: linear-gradient(90deg, #ffa726, #ffd566 50%, #ffa726);
}
.bq-badge {
    display: inline-block;
    padding: 4px 14px;
    background: linear-gradient(135deg, #fff7e1, #ffe9a8);
    color: #c98a00;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
    border-radius: 20px;
    margin-bottom: 12px;
    border: 1px solid rgba(255,167,38,.3);
}
.bq-title {
    font-size: 22px;
    font-weight: 800;
    color: #0d3a85;
    margin-bottom: 6px;
    letter-spacing: 2px;
    line-height: 1.3;
}
.bq-sub {
    font-size: 12px;
    color: #94a3b8;
    margin-bottom: 16px;
    letter-spacing: 1px;
}

/* 二维码框 */
.bq-qr-frame {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 0 auto 14px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 6px;
    box-shadow: 0 4px 14px rgba(0,0,0,.06);
}
.bq-qr {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
/* 二维码图加载失败时的占位空状态 */
.bq-qr-empty {
    background: linear-gradient(135deg, #f0f4fb 0%, #e0e8f5 100%);
}
.bq-qr-empty::after {
    content: "二维码占位\A（请上传 wechat-qr.png）";
    white-space: pre;
    position: absolute;
    inset: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 12px;
    color: #94a3b8;
    line-height: 1.7;
    border: 2px dashed #cbd5e1;
    border-radius: 4px;
}

/* 4 个金色定位角标（微信小程序码风） */
.bq-qr-corner {
    position: absolute;
    width: 18px;
    height: 18px;
    border: 3px solid #ffa726;
    pointer-events: none;
}
.bq-c-tl { top: -3px; left: -3px;    border-right: 0; border-bottom: 0; border-radius: 5px 0 0 0; }
.bq-c-tr { top: -3px; right: -3px;   border-left: 0;  border-bottom: 0; border-radius: 0 5px 0 0; }
.bq-c-bl { bottom: -3px; left: -3px; border-right: 0; border-top: 0;    border-radius: 0 0 0 5px; }
.bq-c-br { bottom: -3px; right: -3px; border-left: 0; border-top: 0;    border-radius: 0 0 5px 0; }

.bq-tip {
    font-size: 13px;
    color: #475569;
    font-weight: 600;
    letter-spacing: 1.5px;
}

/* ============================================
 * 右侧浮动预约卡：1对1精品规划体验课（银河兔精致版）
 * ============================================ */
.tq-banner-form {
    position: absolute;
    right: 80px;
    top: 100px;
    z-index: 10;
    width: 340px;
    background: #fff;
    border-radius: 14px;
    padding: 30px 30px 22px;
    box-shadow:
      0 16px 50px rgba(0,0,0,.25),
      0 0 0 1px rgba(255,213,102,.3);
    text-align: center;
    box-sizing: border-box;
    overflow: hidden;
}
.tq-banner-form::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 5px;
    background: linear-gradient(90deg, #ffa726, #ffd566 50%, #ffa726);
}
.bf-badge {
    display: inline-block;
    padding: 4px 14px;
    background: linear-gradient(135deg, #fff7e1, #ffe9a8);
    color: #c98a00;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
    border-radius: 20px;
    margin-bottom: 12px;
    border: 1px solid rgba(255,167,38,.3);
}
.bf-title {
    font-size: 26px;
    font-weight: 800;
    color: #0d3a85;
    line-height: 1.35;
    margin-bottom: 8px;
    letter-spacing: 2px;
}
.bf-title-row {
    display: block;
}
.bf-hl {
    background: linear-gradient(135deg, #ffa726, #d8262a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.bf-sub {
    font-size: 13px;
    color: #94a3b8;
    margin-bottom: 22px;
    letter-spacing: 1.5px;
}
.bf-input-wrap {
    margin-bottom: 12px;
}
.tq-banner-form input[type="tel"] {
    width: 100%;
    height: 48px;
    padding: 0 18px;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    font-size: 15px;
    background: #f8fafc;
    text-align: center;
    letter-spacing: 1.5px;
    transition: all .2s;
    color: #2c2c2c;
    font-family: inherit;
}
.tq-banner-form input[type="tel"]:focus {
    border-color: #1976d2;
    background: #fff;
}
.tq-banner-form input[type="tel"]::placeholder {
    color: #94a3b8;
    letter-spacing: 1.5px;
}
.bf-submit {
    width: 100%;
    height: 50px;
    background: linear-gradient(135deg, #ffa726 0%, #ff7043 100%);
    color: #fff;
    border-radius: 8px;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: 4px;
    transition: all .2s;
    box-shadow: 0 6px 20px rgba(255,112,67,.32);
    cursor: pointer;
}
.bf-submit:hover {
    background: linear-gradient(135deg, #ef9712, #e85a1c);
    transform: translateY(-1px);
    box-shadow: 0 10px 28px rgba(255,112,67,.42);
}

.bf-protocol {
    margin-top: 14px;
    font-size: 12px;
    color: #94a3b8;
    line-height: 1.6;
}
.bf-check {
    display: inline-block;
    width: 11px;
    height: 11px;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 2px;
    vertical-align: middle;
    margin-right: 4px;
    margin-top: -2px;
}
.bf-link {
    color: #1976d2;
}
.bf-link:hover { color: #0d3a85; }

/* 4 学段快速入口（实质内容） */
.tq-banner-stages {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    max-width: 880px;
    margin: 0 auto;
}
.bs-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 14px;
    color: #fff !important;
    text-align: left;
    transition: all .25s;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.bs-card:hover {
    background: rgba(255,255,255,.95);
    border-color: rgba(255,213,102,.6);
    color: #0d3a85 !important;
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0,0,0,.25);
}
.bs-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(255,213,102,.25), rgba(255,213,102,.1));
    border: 1px solid rgba(255,213,102,.4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
    transition: all .25s;
}
.bs-card:hover .bs-icon {
    background: linear-gradient(135deg, #ffe082, #ffd566);
    border-color: rgba(255,213,102,.8);
}
.bs-title {
    font-size: 17px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 1.5px;
    margin-bottom: 4px;
}
.bs-sub {
    font-size: 12px;
    opacity: .75;
    letter-spacing: .5px;
    line-height: 1.3;
}
.bs-card:hover .bs-sub { opacity: .85; }
/* 白色卡片里的数字高亮 */
.tq-banner-card em {
    font-style: normal;
    font-size: 28px;
    font-weight: 900;
    background: linear-gradient(135deg, #ff7a45 0%, #ff5722 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 4px;
    letter-spacing: 1px;
    font-family: Arial, sans-serif;
}

/* 底部 3 项 ✦ 数据点 */
.tq-banner-meta {
    display: inline-flex;
    align-items: center;
    gap: 36px;
    padding: 14px 32px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 40px;
    font-size: 14px;
    color: rgba(255,255,255,.92);
    letter-spacing: 2px;
}
.tq-banner-meta li {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.tq-banner-meta .m-star {
    color: #ffd566;
    font-size: 14px;
    text-shadow: 0 0 10px rgba(255,213,102,.55);
    font-style: normal;
}


/* 旧的透明吸顶导航完全隐藏 */
.top-nav { display: none !important; }

/* ============================================
 * 在线咨询区（参考 chweifeng .tq-miniapp 风格）
 * 顶部标题 + 左二维码 + 右 4 张特色卡
 * ============================================ */
.miniapp-section {
    background: linear-gradient(180deg, #f7f9fc 0%, #ffffff 100%);
    padding: 70px 0 60px;
    position: relative;
}
.miniapp-title {
    text-align: center;
    margin-bottom: 50px;
}
.miniapp-title em {
    display: block;
    font-size: 14px;
    color: #94a3b8;
    letter-spacing: 6px;
    font-style: normal;
    font-family: Arial, sans-serif;
    font-weight: 700;
    margin-bottom: 10px;
}
.miniapp-title h2 {
    font-size: 52px;
    font-weight: 800;
    color: #0d3a85;
    letter-spacing: 8px;
    line-height: 1.2;
    background: linear-gradient(135deg, #0d3a85 0%, #1976d2 50%, #00bcd4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 12px;
}
.miniapp-title h2 span { letter-spacing: 8px; }
.miniapp-title p {
    font-size: 17px;
    color: #64748b;
    letter-spacing: 2px;
}

.miniapp-content {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 60px;
    align-items: center;
}

/* 左侧：二维码 */
.miniapp-left {
    text-align: center;
}
.miniapp-qr {
    position: relative;
    width: 220px;
    height: 220px;
    margin: 0 auto 16px;
    background: #fff;
    border-radius: 12px;
    padding: 10px;
    box-shadow: 0 8px 30px rgba(13,71,161,.18);
    border: 1px solid #e2e8f0;
}
.miniapp-qr img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.miniapp-qr.mq-empty {
    background: linear-gradient(135deg, #f0f4fb, #e0e8f5);
}
.miniapp-qr.mq-empty::after {
    content: "二维码占位\A（请上传 wechat-qr.png）";
    white-space: pre;
    position: absolute;
    inset: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 13px;
    color: #94a3b8;
    line-height: 1.7;
    border: 2px dashed #cbd5e1;
    border-radius: 6px;
}
.miniapp-qr-text {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: #0d3a85;
    letter-spacing: 2px;
    margin-bottom: 4px;
}
.miniapp-qr-tip {
    font-size: 13px;
    color: #94a3b8;
    letter-spacing: 1px;
}

/* 右侧：4 张特色卡（2x2） */
.miniapp-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
}
.miniapp-item {
    background: #fff;
    border-radius: 12px;
    padding: 24px 26px;
    border: 1px solid #e6ebf2;
    box-shadow: 0 2px 12px rgba(0,0,0,.04);
    transition: all .25s;
    display: flex;
    align-items: flex-start;
    gap: 16px;
}
.miniapp-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(13,71,161,.15);
    border-color: rgba(13,71,161,.3);
}
.miniapp-item .mi-icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    flex-shrink: 0;
}
.mi-icon.mi-icon-1 { background: linear-gradient(135deg, #e3f2ff, #b6daff); color: #1976d2; }
.mi-icon.mi-icon-2 { background: linear-gradient(135deg, #fff5e1, #ffe1a8); color: #c98a00; }
.mi-icon.mi-icon-3 { background: linear-gradient(135deg, #e6f7ec, #b6e8c6); color: #15a87a; }
.mi-icon.mi-icon-4 { background: linear-gradient(135deg, #ffe9e9, #ffc4c4); color: #d8262a; }
.miniapp-item h3 {
    font-size: 17px;
    font-weight: 700;
    color: #0d3a85;
    margin-bottom: 6px;
    letter-spacing: 1px;
    line-height: 1.3;
}
.miniapp-item p {
    font-size: 13px;
    color: #64748b;
    line-height: 1.7;
}

@media (max-width: 1024px) {
    .miniapp-content { grid-template-columns: 1fr; gap: 30px; }
    .miniapp-features { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .miniapp-section { padding: 48px 0 40px; }
    .miniapp-title h2 { font-size: 32px; letter-spacing: 4px; }
    .miniapp-title em { letter-spacing: 4px; font-size: 12px; }
}

/* ===== Section 1：全宽通栏视觉大片（Apple/特斯拉风） ===== */
.hero-banner-strip {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    aspect-ratio: 16 / 5;
    max-height: 580px;
    min-height: 360px;
    overflow: hidden;
    background:
      linear-gradient(135deg, rgba(10,30,80,.55) 0%, rgba(10,30,80,.25) 50%, rgba(10,30,80,.55) 100%),
      linear-gradient(135deg, #1565c0 0%, #1976d2 30%, #2a7bc7 60%, #5e35b1 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}
/* 占位渐变上的几何光纹 */
.hero-banner-strip::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle at 18% 30%, rgba(255,213,102,.15), transparent 40%),
      radial-gradient(circle at 78% 72%, rgba(0,188,212,.18), transparent 40%);
    pointer-events: none;
    z-index: 1;
}
/* 用户后期传图：images/hero-strip.jpg */
.hbs-img {
    position: absolute;
    inset: 0;
    background-image: url('images/hero-strip.jpg');
    background-size: cover;
    background-position: center;
    z-index: 2;
}
.hbs-img:not([style*="display"]) {
    /* 当背景图加载失败时不显示（仍然由后端验证） */
}
/* 强制：如果图加载失败保持空，让占位渐变可见 */
.hero-banner-strip::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.2) 50%, rgba(0,0,0,.45) 100%);
    z-index: 3;
    pointer-events: none;
}

.hbs-overlay {
    position: relative;
    z-index: 5;
    text-align: center;
    color: #fff;
    padding: 0 24px;
    max-width: 1100px;
}
.hbs-line1 {
    font-size: 38px;
    font-weight: 600;
    letter-spacing: 14px;
    line-height: 1.6;
    color: #ffe9a8;
    text-shadow: 0 4px 16px rgba(0,0,0,.5), 0 2px 4px rgba(0,0,0,.4);
    margin-bottom: 8px;
    background: linear-gradient(180deg, #ffeec2 0%, #ffd566 60%, #d4a000 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.5));
}
.hbs-line2 {
    font-size: 32px;
    font-weight: 400;
    letter-spacing: 10px;
    line-height: 1.7;
    color: rgba(255,255,255,.92);
    text-shadow: 0 3px 12px rgba(0,0,0,.5);
    margin-bottom: 28px;
}
.hbs-mark {
    display: inline-block;
    padding: 6px 24px;
    font-size: 13px;
    color: rgba(255,213,102,.85);
    letter-spacing: 4px;
    border: 1px solid rgba(255,213,102,.4);
    border-radius: 30px;
}

@media (max-width: 1024px) {
    .hero-banner-strip { aspect-ratio: 16 / 6; }
    .hbs-line1 { font-size: 28px; letter-spacing: 8px; }
    .hbs-line2 { font-size: 22px; letter-spacing: 6px; }
}
@media (max-width: 768px) {
    .hero-banner-strip { aspect-ratio: 4 / 3; min-height: 320px; }
    .hbs-line1 { font-size: 20px; letter-spacing: 4px; }
    .hbs-line2 { font-size: 16px; letter-spacing: 3px; }
    .hbs-mark { font-size: 11px; padding: 4px 14px; }
}

/* 隐藏旧 bento-gallery / scene-grid 残留样式 */
.bento-gallery, .scene-grid { display: none; }

/* ===== Section 2：五大核心优势（横向大卡 + 左右双栏） ===== */
.advantage-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.adv-item {
    display: grid;
    grid-template-columns: 280px 1fr;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(13,71,161,.08);
    transition: all .3s;
}
.adv-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 36px rgba(13,71,161,.18);
}

/* 左侧：序号 + 图标 + 标题（蓝色渐变背景） */
.adv-left {
    background: linear-gradient(135deg, #0d3a85 0%, #1976d2 60%, #2a7bc7 100%);
    color: #fff;
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.adv-left::before {
    content: "";
    position: absolute;
    top: -30px; right: -30px;
    width: 160px; height: 160px;
    border-radius: 50%;
    background: rgba(255,213,102,.12);
    pointer-events: none;
}
.adv-left::after {
    content: "";
    position: absolute;
    bottom: -50px; left: -30px;
    width: 140px; height: 140px;
    border-radius: 50%;
    background: rgba(255,255,255,.06);
    pointer-events: none;
}
.adv-num {
    font-size: 64px;
    font-weight: 900;
    line-height: 1;
    color: rgba(255,213,102,.85);
    font-family: Arial, sans-serif;
    letter-spacing: 1px;
    text-shadow: 0 2px 8px rgba(0,0,0,.2);
    margin-bottom: 12px;
    position: relative;
    z-index: 2;
}
.adv-icon {
    font-size: 36px;
    line-height: 1;
    margin-bottom: 16px;
    position: relative;
    z-index: 2;
}
.adv-title {
    font-size: 22px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: 2px;
    color: #fff;
    text-shadow: 0 2px 6px rgba(0,0,0,.25);
    position: relative;
    z-index: 2;
}

/* 右侧：要点列表 */
.adv-right {
    padding: 28px 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
}
.adv-point {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}
.adv-point::before {
    content: "✓";
    flex-shrink: 0;
    width: 20px; height: 20px;
    background: linear-gradient(135deg, #ffd566, #ffa726);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    margin-top: 3px;
}
.adv-point strong {
    flex-shrink: 0;
    width: 110px;
    font-size: 15px;
    font-weight: 700;
    color: #0d3a85;
    letter-spacing: 1px;
    line-height: 1.6;
}
.adv-point p {
    flex: 1;
    font-size: 14px;
    color: #475569;
    line-height: 1.8;
    margin: 0;
}
/* 单段简介（项 03/04/05 用） */
.adv-point-single::before {
    content: none;
}
.adv-point-single p {
    font-size: 15px;
    color: #475569;
    line-height: 1.9;
    padding-left: 0;
    border-left: 3px solid #ffd566;
    padding-left: 16px;
}

@media (max-width: 1024px) {
    .adv-item { grid-template-columns: 220px 1fr; }
    .adv-left { padding: 24px 20px; }
    .adv-num { font-size: 48px; }
    .adv-icon { font-size: 28px; }
    .adv-title { font-size: 18px; }
}
@media (max-width: 768px) {
    .adv-item { grid-template-columns: 1fr; }
    .adv-left { padding: 20px 22px; flex-direction: row; align-items: center; gap: 14px; }
    .adv-num { font-size: 36px; margin-bottom: 0; }
    .adv-icon { font-size: 24px; margin-bottom: 0; }
    .adv-title { font-size: 17px; line-height: 1.3; flex: 1; }
    .adv-title br { display: none; }
    .adv-right { padding: 18px 20px; gap: 10px; }
    .adv-point { flex-wrap: wrap; gap: 10px; }
    .adv-point strong { width: auto; flex: 1 0 100%; font-size: 14px; }
}

/* ===== Section 1：四学段课程卡（旧，已废弃） ===== */
.art-education {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
.art-card {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    transition: all .3s;
    cursor: pointer;
    aspect-ratio: 3/4;
    box-shadow: 0 6px 20px rgba(0,0,0,.06);
}
.art-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 40px rgba(27,93,168,.2);
}
.art-card .art-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s;
}
.art-card:hover .art-img { transform: scale(1.05); }
.art-card .art-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(13,42,94,.85) 0%, rgba(13,42,94,.3) 50%, transparent 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 24px;
    color: #fff;
}
.art-card .art-tag {
    align-self: flex-start;
    padding: 4px 12px;
    background: var(--cta);
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 12px;
    letter-spacing: 1px;
}
.art-card .art-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 6px;
    letter-spacing: 1px;
}
.art-card .art-desc {
    font-size: 13px;
    color: rgba(255,255,255,.85);
    line-height: 1.6;
}

/* ===== Section 2：六大优势 grid ===== */
.course-box {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.course-item {
    position: relative;
    aspect-ratio: 5 / 3;
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    transition: all .3s;
    box-shadow: 0 4px 14px rgba(0,0,0,.08);
}
.course-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(13,71,161,.22);
}
/* 6 张卡的占位渐变（图未上传时显示，6 种主题色彼此区分） */
.course-item:nth-child(1) { background: linear-gradient(135deg, #1976d2 0%, #42a5f5 60%, #80d8ff 100%); }
.course-item:nth-child(2) { background: linear-gradient(135deg, #d8262a 0%, #ff7043 60%, #ffa726 100%); }
.course-item:nth-child(3) { background: linear-gradient(135deg, #5e35b1 0%, #7e57c2 60%, #b39ddb 100%); }
.course-item:nth-child(4) { background: linear-gradient(135deg, #15a87a 0%, #43a047 60%, #81c784 100%); }
.course-item:nth-child(5) { background: linear-gradient(135deg, #c98a00 0%, #ffd566 60%, #ffe9a8 100%); }
.course-item:nth-child(6) { background: linear-gradient(135deg, #ec407a 0%, #ad1457 60%, #4a0072 100%); }

/* 图片层（cover 铺满整个卡片） */
.course-item .ci-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    transition: transform .5s;
}
.course-item:hover .ci-img { transform: scale(1.06); }

/* emoji fallback（图未上传时居中显示在背景之上） */
.course-item .ci-emoji {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 88px;
    line-height: 1;
    z-index: 2;
    opacity: .9;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,.3));
}
/* 当真实图片加载成功时，img 默认 z-index:1 + cover 会覆盖 emoji，但 emoji 也在 z-index:2，
   所以图片成功加载就让 emoji 隐藏（onerror 把 img 隐藏的话 emoji 就重新可见）：
   做法：让 emoji 默认在 z-index:0（图片下方），img 加载成功盖住 emoji；img 失败 img 被 display:none，
   此时让 emoji 升到 z-index:2 并显示。这里改成默认 emoji 显示在图片下层。 */
.course-item .ci-img + .ci-emoji { z-index: 0; }
.course-item .ci-img[style*="display:none"] + .ci-emoji,
.course-item .ci-img[style*="display: none"] + .ci-emoji {
    z-index: 2;
}

/* 文字浮层：渐变蒙版 + 底部文字 */
.course-item .ci-overlay {
    position: absolute;
    inset: 0;
    z-index: 3;
    background: linear-gradient(to top, rgba(8,26,67,.7) 0%, rgba(8,26,67,.35) 18%, rgba(8,26,67,.05) 32%, transparent 42%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 22px 24px 22px;
    color: #fff;
}
.course-item .ci-title {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 2px;
    margin-bottom: 8px;
    line-height: 1.4;
    text-shadow: 0 2px 8px rgba(0,0,0,.5);
}
.course-item .ci-desc {
    font-size: 13px;
    color: rgba(255,255,255,.92);
    line-height: 1.7;
    text-shadow: 0 2px 6px rgba(0,0,0,.4);
}

@media (max-width: 1024px) {
    .course-box { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .course-box { grid-template-columns: 1fr; }
    .course-item { aspect-ratio: 16 / 9; }
}

/* 旧 .img-box / .item-title / .item-desc 样式作废（不影响） */
.course-item .img-box,
.course-item .item-title,
.course-item .item-desc { display: none; }

/* ===== Section 3：教育资讯（zhangmen 大图风） ===== */
.info-section {
    display: block;
}
.info-featured {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0,0,0,.06);
    transition: all .3s;
}
.info-featured:hover { box-shadow: 0 16px 40px rgba(27,93,168,.15); transform: translateY(-4px); }
.info-featured-img {
    aspect-ratio: 32/9;
    background: linear-gradient(135deg, var(--primary), #2a7bc7);
    overflow: hidden;
    position: relative;
}
.info-featured-img img { width: 100%; height: 100%; object-fit: cover; }
.info-featured-tag {
    position: absolute;
    top: 18px;
    left: 18px;
    padding: 5px 14px;
    background: var(--cta);
    color: #fff;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
}
.info-featured-body {
    padding: 28px 30px;
}
.info-featured-body h3 {
    font-size: 22px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 12px;
    line-height: 1.4;
}
.info-featured-body p {
    font-size: 14px;
    color: var(--text-sub);
    line-height: 1.8;
    margin-bottom: 16px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.info-featured-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: var(--text-mute);
}
.info-featured-meta a { color: var(--cta); font-weight: 500; }

.info-list {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 6px 20px rgba(0,0,0,.06);
    padding: 24px 28px;
}
.info-list-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--primary);
    margin-bottom: 8px;
}
.info-list-head h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
    padding-left: 12px;
    border-left: 4px solid var(--cta);
}
.info-list-head a { font-size: 13px; color: var(--text-mute); }
.info-list-head a:hover { color: var(--cta); }
.info-list ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 36px;
}
.info-list ul li {
    padding: 14px 0;
    border-bottom: 1px dashed var(--line-2);
}
.info-list ul li:last-child { border-bottom: 0; }
.info-list ul li:nth-last-child(-n+2) { border-bottom: 0; }
.info-list ul li a {
    display: flex;
    align-items: center;
    color: var(--text);
    font-size: 16px;
}
.info-list ul li a::before {
    content: "·";
    color: var(--primary);
    font-weight: 700;
    font-size: 22px;
    margin-right: 10px;
    line-height: 1;
}
.info-list ul li a:hover { color: var(--cta); }
.info-list ul li a:hover::before { color: var(--cta); }
.info-list .text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.info-list .date {
    font-size: 13px;
    color: var(--text-mute);
    margin-left: 14px;
    font-family: Arial, sans-serif;
    flex-shrink: 0;
}

/* ===== Section 4：家长问答（zhangmen 学习模式风） ===== */
.qa-section {
    display: block;
}
.qa-panel {
    background: #fff;
    border: 1px solid var(--line-2);
    border-radius: 6px;
    overflow: hidden;
}
.qa-panel-head {
    background: var(--primary);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    padding: 11px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.qa-panel-more {
    color: #fff;
    font-size: 13px;
    font-weight: 400;
    text-decoration: none;
    opacity: .85;
    transition: opacity .15s;
}
.qa-panel-more:hover { opacity: 1; }
.qa-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 28px;
    padding: 8px 18px;
}
/* 单一 list_article 时,自动分两列(代替原 qa-col 拆分) */
.qa-grid-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 28px;
    padding: 8px 18px;
    grid-auto-flow: row;
}
.qa-grid-cols .qa-row:nth-child(7n+7),
.qa-grid-cols .qa-row:last-child { border-bottom: 0; }
@media (max-width: 768px) {
    .qa-grid-cols { grid-template-columns: 1fr; }
}
.qa-row {
    height: 44px;
    line-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px dashed var(--line-2);
    gap: 12px;
}
.qa-col .qa-row:last-child { border-bottom: 0; }
.qa-question {
    flex: 1;
    font-size: 16px;
    color: var(--primary);
    text-decoration: none;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    transition: color .15s;
}
.qa-question::before {
    content: "·";
    color: var(--primary);
    font-weight: 700;
    font-size: 22px;
    margin-right: 8px;
    line-height: 1;
}
.qa-question:hover {
    color: var(--cta);
}
.qa-meta {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
}
.qa-resolved {
    color: #18a058;
    font-weight: 600;
}
.qa-date {
    color: var(--text-mute);
    font-family: Arial, sans-serif;
}

/* ===== Section 5：新闻横向卡片 ===== */
.news-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.news-card {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0,0,0,.06);
    transition: all .3s;
    display: flex;
    flex-direction: column;
}
.news-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(27,93,168,.15);
}
.news-card-img {
    aspect-ratio: 16/9;
    background: linear-gradient(135deg, var(--primary), #2a7bc7);
    overflow: hidden;
}
.news-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.news-card:hover .news-card-img img { transform: scale(1.05); }
.news-card-body {
    padding: 22px 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.news-card-tag {
    align-self: flex-start;
    padding: 3px 10px;
    background: var(--primary-light);
    color: var(--primary);
    border-radius: 3px;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 10px;
}
.news-card-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.5;
    margin-bottom: 10px;
    flex: 1;
}
.news-card-foot {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--text-mute);
}

/* ===== 最新动态:杂志风(左大头条 + 右侧列表) ===== */
.news-magazine {
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: 24px;
    align-items: stretch;
}

/* 头条大卡 */
.news-feature {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0,0,0,.06);
    display: flex;
    flex-direction: column;
    transition: all .3s;
}
.news-feature:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(27,93,168,.15);
}
.news-feature-img {
    position: relative;
    aspect-ratio: 16/9;
    background: linear-gradient(135deg, var(--primary), #2a7bc7);
    overflow: hidden;
}
.news-feature-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .4s;
}
.news-feature:hover .news-feature-img img { transform: scale(1.05); }
.news-feature-tag {
    position: absolute;
    top: 16px; left: 16px;
    padding: 5px 14px;
    background: var(--cta);
    color: #fff;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    box-shadow: 0 2px 8px rgba(255,110,46,.35);
}
.news-feature-body {
    padding: 24px 28px 26px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.news-feature-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.5;
    margin-bottom: 12px;
}
.news-feature-intro {
    font-size: 14px;
    line-height: 1.75;
    color: var(--text-sub);
    margin-bottom: 16px;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.news-feature-foot {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: var(--text-mute);
    padding-top: 14px;
    border-top: 1px dashed var(--line-2);
}

/* 右侧列表 */
.news-side {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 6px 20px rgba(0,0,0,.06);
    padding: 14px 24px;
    display: flex;
    flex-direction: column;
}
/* 隐藏与头条重复的第 1 条,保留第 2-7 条作为列表 */
.news-side .news-side-item:first-child { display: none; }
.news-side-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px dashed var(--line-2);
    color: var(--text);
    transition: padding-left .2s, color .2s;
}
.news-side-item:last-child { border-bottom: 0; }
.news-side-item:hover { padding-left: 4px; color: var(--primary); }
.news-side-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--primary);
    flex-shrink: 0;
}
.news-side-item:hover .news-side-dot { background: var(--cta); }
.news-side-title {
    flex: 1;
    font-size: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.news-side-date {
    font-size: 13px;
    color: var(--text-mute);
    font-family: Arial, sans-serif;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .news-magazine { grid-template-columns: 1fr; }
    .news-feature-title { font-size: 17px; }
    .news-side { padding: 6px 16px; }
}

/* ===== Study Block(分类 tab + panel,参考 cnzhenling 风格) ===== */
.study-block {
    background: #fff;
    border-radius: 14px;
    padding: 22px 26px 26px;
    box-shadow: 0 6px 20px rgba(0,0,0,.06);
    margin-bottom: 18px;
}
.study-header {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding-bottom: 14px;
    margin-bottom: 22px;
    border-bottom: 2px solid var(--primary-light);
}
.study-label {
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
    padding: 4px 0 4px 12px;
    border-left: 4px solid var(--primary);
    margin-right: 18px;
}
.study-tab {
    padding: 6px 16px;
    font-size: 14px;
    color: var(--text-sub);
    cursor: pointer;
    border-radius: 6px;
    transition: all .2s;
    user-select: none;
}
.study-tab:hover { color: var(--primary); background: var(--primary-light); }
.study-tab.active {
    color: #fff;
    background: var(--primary);
    font-weight: 600;
}
.study-panel { display: none; }
.study-panel.active { display: block; }
/* 进入动画 */
.study-panel.active .news-magazine { animation: studyFade .25s ease; }
@keyframes studyFade {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* study-block 内的文章列表(纯列表,无图,两列网格) */
.study-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 32px;
}
.study-list li { border-bottom: 1px dashed var(--line-2); }
.study-list a {
    display: flex;
    align-items: center;
    padding: 13px 4px;
    color: var(--text);
    font-size: 15px;
    transition: padding-left .2s, color .2s;
}
.study-list a::before {
    content: '·';
    color: var(--primary);
    font-size: 22px;
    font-weight: 700;
    margin-right: 10px;
    line-height: 1;
}
.study-list a:hover { padding-left: 6px; color: var(--primary); }
.study-list a:hover::before { color: var(--cta); }
.study-list-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.study-list-date {
    font-size: 13px;
    color: var(--text-mute);
    margin-left: 12px;
    font-family: Arial, sans-serif;
    flex-shrink: 0;
}
.study-empty { padding: 16px 4px; font-size: 14px; color: var(--text-mute); text-align: center; grid-column: 1 / -1; }

@media (max-width: 768px) {
    .study-list { grid-template-columns: 1fr; gap: 0; }
    .study-list a { font-size: 14px; padding: 12px 4px; }
}

@media (max-width: 768px) {
    .study-block { padding: 16px 14px; }
    .study-header { gap: 4px; padding-bottom: 10px; margin-bottom: 16px; }
    .study-label { font-size: 16px; margin-right: 10px; }
    .study-tab { padding: 4px 10px; font-size: 13px; }
}

/* ===== Section 6：数据条/信任背书 ===== */
.stats-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
    text-align: center;
}
.stats-item strong {
    display: block;
    font-size: 56px;
    font-weight: 800;
    color: var(--gold);
    line-height: 1;
    letter-spacing: 1px;
    font-family: Arial, sans-serif;
}
.stats-item strong i {
    font-size: 24px;
    margin-left: 4px;
    font-style: normal;
    color: rgba(255,213,102,.85);
}
.stats-item span {
    display: block;
    font-size: 16px;
    color: rgba(255,255,255,.85);
    margin-top: 12px;
    letter-spacing: 1px;
}

/* ===== 底部 CTA Section ===== */
.bottom-cta {
    text-align: center;
    padding: 70px 20px;
    background: linear-gradient(135deg, var(--cta) 0%, #ff8a4d 100%);
    color: #fff;
}
.bottom-cta h2 {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 12px;
    letter-spacing: 1px;
}
.bottom-cta p {
    font-size: 16px;
    opacity: .92;
    margin-bottom: 28px;
}
.bottom-cta .btn-wrapper { margin: 0; }
.bottom-cta .btn {
    background: #fff;
    color: var(--cta) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.18);
}
.bottom-cta .btn:hover {
    background: #fff7f1;
    transform: translateY(-2px);
}

/* ===== Footer ===== */
.footer {
    background: #15233f;
    color: #aab2c0;
    padding: 36px 0 28px;
    border-top: 4px solid var(--primary);
}
.footer-bottom { text-align: center; line-height: 1.9; font-size: 13px; }
.footer-bottom a { color: #aab2c0; transition: color .15s; }
.footer-bottom a:hover { color: #fff; }
.footer-info {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px 14px;
    margin: 0;
}
.footer-sep { color: #4a5878; user-select: none; }
@media (max-width: 700px) {
    .footer-info { flex-direction: column; gap: 6px; }
    .footer-sep { display: none; }
}
.footer-sub { font-size: 12px; color: #6e798e; margin-top: 8px !important; letter-spacing: 1.5px; }

/* ===== Modal ===== */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 16px;
    overflow-y: auto;
}
.modal-overlay.open { display: flex; }
.modal-box {
    background: #fff;
    border-radius: 12px;
    width: 480px;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    box-shadow: 0 16px 50px rgba(0,0,0,.3);
    border-top: 4px solid var(--primary);
    -webkit-overflow-scrolling: touch;
}
.modal-header {
    padding: 18px 22px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.modal-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary);
    margin: 0;
    padding-bottom: 12px;
    position: relative;
}
.modal-title::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 36px;
    height: 3px;
    background: var(--primary);
    border-radius: 2px;
}
.modal-close { font-size: 18px; color: var(--text-mute); cursor: pointer; padding: 4px 8px; line-height: 1; }
.modal-close:hover { color: var(--cta); }
.modal-body { padding: 24px 26px 22px; }
.form-group { margin-bottom: 14px; }
.form-group label {
    display: block;
    font-size: 13px;
    color: var(--text-sub);
    margin-bottom: 6px;
    font-weight: 500;
}
.form-required { color: var(--cta); margin-left: 3px; }
.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 6px;
    font-size: 14px;
    background: #fafafa;
    font-family: inherit;
    color: var(--text);
}
.form-group input,
.form-group select {
    height: 42px;
}
.form-group textarea {
    padding: 10px 14px;
    line-height: 1.6;
    resize: vertical;
    min-height: 72px;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--primary);
    background: #fff;
    outline: none;
}
.modal-submit {
    width: 100%;
    height: 46px;
    background: var(--cta);
    color: #fff;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 600;
    margin-top: 6px;
    transition: background .2s;
}
.modal-submit:hover { background: var(--cta-dark); }
.auth-success { text-align: center; padding: 30px 0 10px; display: none; }
.auth-success-icon {
    width: 60px; height: 60px;
    margin: 0 auto 14px;
    background: #18a058;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
}
.auth-success-text { font-size: 18px; color: var(--text); font-weight: 600; }
.auth-success-sub { font-size: 13px; color: var(--text-mute); margin-top: 6px; }

/* ===== 品牌 Slogan 横条(豆包图 + 主色蓝染色,跟 AI 板块同色调) ===== */
.brand-slogan {
    position: relative;
    background-image:
        linear-gradient(rgba(13, 38, 69, 0.18), rgba(13, 38, 69, 0.32)),
        url("../images/brand-slogan-bg.jpg?v=2026043006");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    padding: 80px 20px;
    text-align: center;
    overflow: hidden;
    min-height: 240px;
}
.bs-content {
    position: relative;
    z-index: 2;
    max-width: 1100px;
    margin: 0 auto;
}
.bs-title {
    font-size: 38px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 5px;
    line-height: 1.5;
    margin: 0 0 18px;
    text-shadow: 0 2px 12px rgba(0,0,0,.4);
}
.bs-sub {
    font-size: 17px;
    color: rgba(255,255,255,.88);
    letter-spacing: 3px;
    margin: 0;
    font-weight: 500;
    text-shadow: 0 1px 8px rgba(0,0,0,.35);
}

@media (max-width: 768px) {
    .brand-slogan { padding: 50px 16px; min-height: 0; }
    .bs-title { font-size: 24px; letter-spacing: 2px; }
    .bs-sub { font-size: 14px; letter-spacing: 1px; }
}

/* ===== Section 6:AI 赋能教育(深色舞台 + 5 白卡立柱 — 大气版) ===== */
/* 板块用主色按钮蓝 #1B5DA8 渐变,跟全站按钮色统一 */
.ai-section {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 60%, #0d2645 100%) !important;
    padding: 90px 0 100px !important;
    position: relative;
    overflow: hidden;
}
/* 星空粒子背景(纯 CSS,多个 radial-gradient 散布) */
.ai-section::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(1.5px 1.5px at 5% 12%, rgba(255,255,255,.7), transparent 50%),
        radial-gradient(1px 1px at 14% 25%, rgba(255,255,255,.5), transparent 50%),
        radial-gradient(1px 1px at 23% 8%, rgba(255,213,102,.7), transparent 50%),
        radial-gradient(2px 2px at 35% 18%, rgba(255,255,255,.55), transparent 50%),
        radial-gradient(1px 1px at 48% 30%, rgba(255,255,255,.7), transparent 50%),
        radial-gradient(1px 1px at 60% 9%, rgba(255,213,102,.55), transparent 50%),
        radial-gradient(2px 2px at 73% 22%, rgba(255,255,255,.6), transparent 50%),
        radial-gradient(1px 1px at 84% 11%, rgba(255,255,255,.5), transparent 50%),
        radial-gradient(1.5px 1.5px at 92% 25%, rgba(255,255,255,.7), transparent 50%),
        radial-gradient(1px 1px at 8% 60%, rgba(255,255,255,.5), transparent 50%),
        radial-gradient(2px 2px at 18% 80%, rgba(255,255,255,.65), transparent 50%),
        radial-gradient(1px 1px at 32% 70%, rgba(255,213,102,.6), transparent 50%),
        radial-gradient(1px 1px at 44% 88%, rgba(255,255,255,.55), transparent 50%),
        radial-gradient(1.5px 1.5px at 58% 75%, rgba(255,255,255,.7), transparent 50%),
        radial-gradient(1px 1px at 70% 92%, rgba(255,255,255,.5), transparent 50%),
        radial-gradient(2px 2px at 82% 80%, rgba(255,213,102,.5), transparent 50%),
        radial-gradient(1px 1px at 95% 70%, rgba(255,255,255,.55), transparent 50%);
    background-size: 100% 100%;
}
.ai-section .layout { position: relative; z-index: 2; }
.ai-section .section-title {
    color: #fff;
    font-size: 42px;
    margin-bottom: 16px;
}
.ai-section .section-subtitle {
    color: rgba(255,255,255,.85);
    font-size: 17px;
    margin-bottom: 60px;
}

.ai-stage {
    position: relative;
    height: 700px;
    max-width: 1200px;
    margin: 0 auto;
}

/* 底部椭圆光环 — 半透明白色调,深色背景上更柔和 */
.ai-orbit {
    position: absolute;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    width: 1100px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center,
        rgba(255,255,255,0.10) 0%,
        rgba(255,255,255,0.04) 60%,
        transparent 90%);
    border: 1px dashed rgba(255,255,255,0.30);
}
.ai-orbit::before {
    content: "";
    position: absolute;
    inset: 36px 100px;
    border-radius: 50%;
    border: 1px dashed rgba(255,255,255,0.20);
}
.ai-orbit::after {
    content: "";
    position: absolute;
    inset: 76px 200px;
    border-radius: 50%;
    border: 1px dashed rgba(255,255,255,0.13);
}

/* 中央装饰 + 标题(底部居中) */
.ai-stage-center {
    position: absolute;
    bottom: 130px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 5;
    width: 620px;
    max-width: 90%;
}
.ai-stage-emoji {
    line-height: 1;
    margin-bottom: 14px;
    filter: drop-shadow(0 6px 20px rgba(255,213,102,.5));
    display: flex;
    justify-content: center;
}
.ai-stage-emoji img {
    width: 72px;
    height: 72px;
    animation: rocketFloat 3.5s ease-in-out infinite;
}
@keyframes rocketFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
.ai-stage-title-main {
    display: block;
    font-size: 32px;
    font-weight: 800;
    color: #fff;
    letter-spacing: 2px;
    line-height: 1.3;
    margin-bottom: 10px;
    white-space: nowrap;
    text-shadow: 0 4px 16px rgba(0,0,0,.35);
}
.ai-stage-title-sub {
    display: inline-block;
    padding: 6px 20px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.30);
    border-radius: 22px;
    font-size: 14px;
    color: rgba(255,255,255,.92);
    letter-spacing: 2px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* 5 个立柱(瘦身版 — 圆形图标 + 浮文字,无卡片框) */
.ai-pillar {
    position: absolute;
    width: 220px;
    text-align: center;
    z-index: 4;
}
.ai-pillar-card {
    background: transparent;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    border: 0;
    transition: transform .25s;
}
.ai-pillar-card:hover { transform: translateY(-4px); }
.ai-pillar-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.05));
    border: 1px solid rgba(255,255,255,.30);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #fff;
    line-height: 1;
    margin: 0 auto 14px;
    box-shadow: 0 10px 28px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.25);
    transition: all .25s;
}
.ai-pillar-icon svg { display: block; }
.ai-pillar-card:hover .ai-pillar-icon {
    background: linear-gradient(135deg, rgba(255,255,255,.30), rgba(255,255,255,.10));
    box-shadow: 0 14px 36px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.4);
}
.ai-pillar-title {
    font-size: 19px;
    font-weight: 800;
    color: #fff;
    margin: 0 0 8px;
    letter-spacing: 2px;
    text-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.ai-pillar-text {
    font-size: 13px;
    line-height: 1.7;
    color: rgba(255,255,255,.78);
    margin: 0;
}
.ai-pillar-line {
    width: 1px;
    height: 32px;
    background: linear-gradient(to bottom, rgba(255,255,255,.5) 0%, transparent 100%);
    margin: 12px auto 0;
}
.ai-pillar-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,.85);
    margin: 0 auto;
    box-shadow: 0 0 0 4px rgba(255,255,255,.10), 0 0 12px rgba(255,255,255,.4);
}

/* 5 个立柱位置 */
.ai-pillar-2 { top: 0;     left: 50%; transform: translateX(-50%); }
.ai-pillar-1 { top: 90px;  left: 30px; }
.ai-pillar-3 { top: 90px;  right: 30px; }
.ai-pillar-4 { top: 290px; left: 240px; }
.ai-pillar-5 { top: 290px; right: 240px; }

@media (max-width: 1100px) {
    .ai-stage { height: auto; padding-bottom: 30px; }
    .ai-orbit, .ai-stage-center { display: none; }
    .ai-pillar { position: static; transform: none; margin: 18px auto; width: 100%; max-width: 480px; }
    .ai-pillar-line, .ai-pillar-dot { display: none; }
}
@media (max-width: 768px) {
    .ai-section .section-title { font-size: 28px; }
    .ai-section .section-subtitle { font-size: 14px; margin-bottom: 30px; }
}
.online-wrapper {
    padding: 80px 0;
}
.part3 {
    position: relative;
    height: 580px;
    margin-top: 30px;
}
/* 装饰图 — 像素层已染色为按钮蓝,无需 CSS filter */
.part3-bg { width: 1107px; height: 333px; position: absolute; bottom: 0; left: 0; right: 0; margin: auto; }

/* 中央替代 title 图 — 用银河兔自己的文字 */
.part3-center {
    position: absolute;
    bottom: 143px;
    left: 0; right: 0;
    margin: auto;
    width: 320px;
    text-align: center;
    z-index: 5;
}
.part3-center-icon {
    font-size: 56px;
    line-height: 1;
    margin-bottom: 12px;
    filter: drop-shadow(0 4px 10px rgba(27,93,168,.3));
}
.part3-center-text {
    font-size: 28px;
    font-weight: 800;
    color: var(--primary);
    letter-spacing: 4px;
    line-height: 1.3;
    margin-bottom: 8px;
}
.part3-center-sub {
    font-size: 15px;
    color: var(--text-sub);
    letter-spacing: 2px;
    font-weight: 500;
}

/* 5 个银河兔能力卡(纯 CSS,布局位置参考 zhangmen tree1~5) */
.part3-card {
    position: absolute;
    width: 200px;
    text-align: center;
    z-index: 4;
}
.part3-card-text {
    font-size: 13px;
    color: var(--text-sub);
    line-height: 1.6;
    margin: 0 0 12px;
    font-weight: 500;
}
.part3-card-tag {
    display: inline-block;
    padding: 8px 22px;
    background: var(--cta);
    color: #fff;
    border-radius: 24px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 2px;
    box-shadow: 0 6px 16px rgba(255,110,46,.32);
    margin-bottom: 10px;
}
.part3-card-line {
    width: 1px;
    height: 30px;
    background: linear-gradient(to bottom, var(--cta), rgba(255,110,46,.3));
    margin: 0 auto;
}
.part3-card-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    border: 2px solid var(--cta);
    background: #fff;
    margin: 0 auto;
}
/* 5 张卡片各自位置(顶部 3 张,底部 2 张,围绕中央) */
.part3-card-1 { left: 30px;   top: 20px; }
.part3-card-2 { left: 50%;    top: 0;     transform: translateX(-50%); }
.part3-card-3 { right: 30px;  top: 20px; }
.part3-card-4 { left: 220px;  top: 290px; }
.part3-card-5 { right: 220px; top: 290px; }
/* 底部 2 张的连接线方向调整(向上指,而不是向下) */
.part3-card-4, .part3-card-5 {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
}
.part3-card-4 .part3-card-line,
.part3-card-5 .part3-card-line {
    background: linear-gradient(to top, var(--cta), rgba(255,110,46,.3));
}

@media (max-width: 1200px) {
    .part3 { transform: scale(0.85); transform-origin: top center; height: 500px; }
}
@media (max-width: 768px) {
    .online-wrapper { padding: 50px 0; }
    .part3 { height: auto; transform: none; }
    .part3-bg, .part3-card-line, .part3-card-dot { display: none; }
    .part3-center { position: static; width: auto; margin: 0 auto 24px; }
    .part3-card { position: static; width: auto; margin: 16px auto; transform: none; }
}

/* ===== Section 7:全新学习模式(横向时间线 — 上下交替) ===== */
.learn-section { padding: 90px 0 100px; }
.learn-timeline {
    position: relative;
    height: 460px;
    margin: 60px auto 30px;
    max-width: 1100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.lt-axis {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 4px;
    border-radius: 4px;
    background: linear-gradient(to right, transparent 0%, var(--primary) 6%, var(--primary) 94%, transparent 100%);
    transform: translateY(-50%);
    z-index: 1;
}
.lt-axis::before, .lt-axis::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--primary);
    transform: translateY(-50%);
    box-shadow: 0 0 0 6px rgba(27,93,168,.18);
}
.lt-axis::before { left: 0; }
.lt-axis::after { right: 0; }

.lt-node {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 2;
}
.lt-node.lt-up {
    justify-content: flex-end;
    height: 50%;
    align-self: flex-start;
}
.lt-node.lt-down {
    justify-content: flex-start;
    height: 50%;
    align-self: flex-end;
}
.lt-dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    border: 4px solid var(--primary);
    box-shadow: 0 0 0 6px rgba(27,93,168,.15), 0 8px 18px rgba(27,93,168,.25);
    z-index: 3;
}
.lt-node.lt-up .lt-dot { margin-bottom: -11px; margin-top: 14px; }
.lt-node.lt-down .lt-dot { margin-top: -11px; margin-bottom: 14px; }

.lt-card {
    background: #fff;
    border-radius: 14px;
    padding: 22px 22px 20px;
    width: 230px;
    text-align: center;
    box-shadow: 0 12px 32px rgba(20,40,80,.12), 0 4px 10px rgba(20,40,80,.06);
    border: 1px solid #ebf0f7;
    position: relative;
    transition: all .3s;
}
.lt-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(27,93,168,.20);
    border-color: var(--primary);
}
.lt-up .lt-card::after {
    content: "";
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 14px;
    height: 14px;
    background: #fff;
    border-right: 1px solid #ebf0f7;
    border-bottom: 1px solid #ebf0f7;
}
.lt-down .lt-card::before {
    content: "";
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 14px;
    height: 14px;
    background: #fff;
    border-left: 1px solid #ebf0f7;
    border-top: 1px solid #ebf0f7;
}

.lt-stage {
    display: inline-block;
    padding: 3px 12px;
    background: var(--primary-light);
    color: var(--primary);
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    margin-bottom: 12px;
    font-family: Arial, sans-serif;
}
.lt-title {
    font-size: 18px;
    font-weight: 800;
    color: var(--text);
    margin: 0 0 10px;
    letter-spacing: 1.5px;
}
.lt-text {
    font-size: 13px;
    line-height: 1.7;
    color: var(--text-sub);
    margin: 0;
}

@media (max-width: 1024px) {
    .learn-timeline {
        height: auto;
        flex-direction: column;
        gap: 28px;
        align-items: stretch;
    }
    .lt-axis { display: none; }
    .lt-node { width: 100%; flex: none; height: auto; align-self: stretch; }
    .lt-node.lt-up, .lt-node.lt-down {
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        gap: 16px;
    }
    .lt-dot { margin: 0 !important; flex-shrink: 0; }
    .lt-card { width: 100%; max-width: 460px; }
    .lt-up .lt-card::after, .lt-down .lt-card::before { display: none; }
}
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 36px;
}
.tech-card {
    background: #fff;
    border-radius: 14px;
    padding: 36px 24px 30px;
    text-align: center;
    box-shadow: 0 6px 20px rgba(0,0,0,.05);
    transition: all .3s;
    border: 1px solid #ebf0f7;
}
.tech-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 36px rgba(27,93,168,.14);
    border-color: var(--primary);
}
.tech-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-light), #d6e4f3);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 32px;
    transition: all .3s;
}
.tech-card:hover .tech-icon {
    background: linear-gradient(135deg, var(--primary), #2a7bc7);
    transform: scale(1.05);
}
.tech-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 12px;
    letter-spacing: 1px;
}
.tech-desc {
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-sub);
    margin: 0;
}

@media (max-width: 1024px) {
    .tech-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .tech-grid { grid-template-columns: 1fr; gap: 16px; }
    .tech-card { padding: 28px 20px 24px; }
}

.page-banner {
    background: linear-gradient(135deg, var(--primary), #2a7bc7);
    color: #fff;
    padding: 50px 0;
    text-align: center;
}
.page-banner .pb-title {
    font-size: 36px;
    font-weight: 700;
    letter-spacing: 1px;
}
.page-banner .pb-sub {
    font-size: 15px;
    color: rgba(255,255,255,.85);
    margin-top: 12px;
    letter-spacing: 1px;
}

/* ===== 内页两栏（资讯/问答/新闻列表） ===== */
.main-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 24px;
    padding: 30px 20px;
    max-width: 1200px;
    margin: 0 auto;
}
.side-col { display: flex; flex-direction: column; gap: 16px; }
.main-layout.no-side { grid-template-columns: 1fr; max-width: 900px; }
.side-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0,0,0,.05);
}
.side-card-head {
    background: var(--primary);
    color: #fff;
    padding: 14px 18px;
    font-size: 16px;
    font-weight: 600;
}
.side-cat li { border-bottom: 1px solid var(--line-2); }
.side-cat li:last-child { border-bottom: 0; }
.side-cat a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 18px;
    font-size: 14px;
    color: var(--text);
}
.side-cat a:hover { background: var(--primary-light); color: var(--primary); }
.side-cat i { color: var(--text-mute); }
.side-list { padding: 8px 18px; }
.side-list li { padding: 9px 0; border-bottom: 1px dashed var(--line-2); font-size: 13px; }
.side-list li:last-child { border-bottom: 0; }
.side-list a { color: var(--text); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-list a:hover { color: var(--cta); }

.main-col {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(0,0,0,.05);
    padding: 24px 28px;
    min-height: 600px;
}
.crumbs {
    padding-bottom: 14px;
    margin-bottom: 18px;
    border-bottom: 1px dashed var(--line);
    font-size: 13px;
    color: var(--text-mute);
}
.crumbs a:hover { color: var(--cta); }

/* ===== Article List ===== */
.article-list { display: flex; flex-direction: column; }
.al-item {
    display: flex;
    gap: 18px;
    padding: 18px 0;
    border-bottom: 1px dashed var(--line-2);
    align-items: flex-start;
}
.al-item:last-child { border-bottom: 0; }
.al-date {
    flex-shrink: 0;
    width: 70px; height: 70px;
    background: var(--primary-light);
    color: var(--primary);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all .15s;
}
.al-item:hover .al-date { background: var(--primary); color: #fff; }
.al-date strong { font-size: 26px; font-weight: 700; line-height: 1; }
.al-date span { font-size: 11px; margin-top: 4px; font-family: Arial, sans-serif; }
.al-cover {
    flex-shrink: 0;
    width: 150px;
    aspect-ratio: 4/3;
    background: var(--primary-light);
    border-radius: 8px;
    overflow: hidden;
}
.al-cover img { width: 100%; height: 100%; object-fit: cover; }
.al-body { flex: 1; min-width: 0; }
.al-title { font-size: 17px; font-weight: 600; color: var(--text); margin-bottom: 8px; line-height: 1.5; }
.al-title a:hover { color: var(--cta); }
.al-remark { font-size: 13px; color: var(--text-sub); line-height: 1.7; margin-bottom: 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.al-meta { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-mute); }
.al-more { color: var(--cta) !important; font-weight: 500; }

/* ===== Pager ===== */
.pager { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line-2); }
.pager a { padding: 8px 14px; border: 1px solid var(--line); border-radius: 4px; font-size: 13px; color: var(--text-sub); }
.pager a:hover, .pager a.cur { background: var(--primary); color: #fff; border-color: var(--primary); }

/* ===== Article Detail ===== */
.article-detail { padding: 8px 0; }
.ad-head { text-align: center; padding-bottom: 18px; border-bottom: 1px dashed var(--line); }
.ad-title { font-size: 26px; font-weight: 700; color: var(--text); margin-bottom: 14px; line-height: 1.4; }
.ad-meta { display: flex; justify-content: center; gap: 22px; font-size: 13px; color: var(--text-mute); flex-wrap: wrap; }
.ad-body { padding: 30px 0; font-size: 16px; line-height: 1.85; color: #333; }
.ad-body p { margin-bottom: 17px; text-align: justify; word-break: break-word; }
.ad-body h2 { font-size: 20px; font-weight: 600; color: var(--text); margin: 26px 0 13px; padding-left: 11px; border-left: 4px solid var(--primary); line-height: 1.5; }
.ad-body h3 { font-size: 18px; font-weight: 600; color: var(--text); margin: 21px 0 11px; line-height: 1.5; }
.ad-body h4 { font-size: 16px; font-weight: 600; color: var(--text); margin: 17px 0 9px; }
.ad-body strong, .ad-body b { color: var(--text); font-weight: 600; }
.ad-body a { color: var(--cta); border-bottom: 1px solid rgba(0,0,0,.08); padding-bottom: 1px; }
.ad-body a:hover { border-bottom-color: var(--cta); }
.ad-body ul, .ad-body ol { margin: 0 0 18px 24px; padding: 0; }
.ad-body ul li { list-style: disc; margin-bottom: 8px; }
.ad-body ol li { list-style: decimal; margin-bottom: 8px; }
.ad-body blockquote { margin: 18px 0; padding: 14px 18px; background: var(--primary-light); border-left: 4px solid var(--primary); color: #555; font-size: 15px; border-radius: 0 6px 6px 0; }
.ad-body blockquote p:last-child { margin-bottom: 0; }
.ad-body img { max-width: 100%; height: auto !important; border-radius: 6px; margin: 18px auto; display: block; box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.ad-body table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 14px; }
.ad-body th, .ad-body td { padding: 10px 12px; border: 1px solid var(--line-2); text-align: left; }
.ad-body th { background: var(--primary-light); color: var(--primary); font-weight: 600; }
.ad-body code { background: #f5f5f5; padding: 2px 6px; border-radius: 4px; font-size: 14px; color: #c7254e; }


/* ===== QA Page ===== */
.qa-page { padding: 30px 20px; max-width: 1400px; margin: 0 auto; }
.qa-page-header {
    background: #fff;
    border-radius: 12px;
    padding: 22px 26px;
    margin-bottom: 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    box-shadow: 0 4px 14px rgba(0,0,0,.05);
}
.qa-page-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.qa-page-tab {
    padding: 8px 18px;
    font-size: 14px;
    color: var(--text-sub);
    cursor: pointer;
    border-radius: 22px;
    transition: all .15s;
}
.qa-page-tab:hover, .qa-page-tab.active { background: var(--primary); color: #fff; }
.qa-page-cta {
    padding: 10px 22px;
    background: var(--cta);
    color: #fff !important;
    border-radius: 22px;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(255,110,46,.25);
}
.qa-page-cta:hover { background: var(--cta-dark); color: #fff !important; }
.qa-list-card {
    background: #fff;
    border-radius: 12px;
    padding: 0 28px 18px;
    margin-bottom: 18px;
    box-shadow: 0 4px 14px rgba(0,0,0,.05);
}
.qa-pager {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin: 24px 0 32px;
    user-select: none;
}
.qa-pager a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--line-2);
    border-radius: 4px;
    background: #fff;
    color: var(--text-sub);
    font-size: 14px;
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
}
.qa-pager a:hover:not(.is-disabled):not(.active) {
    border-color: var(--primary);
    color: var(--primary);
}
.qa-pager a.active {
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
    cursor: default;
}
.qa-pager a.is-disabled {
    color: #ccc;
    cursor: not-allowed;
}
.qa-row { display: flex; align-items: center; padding: 15px 0; border-bottom: 1px dashed var(--line-2); }
.qa-row:last-child { border-bottom: 0; }
.qa-question {
    flex: 1;
    font-size: 15px;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-right: 14px;
    cursor: pointer;
}
.qa-question::before {
    content: "·";
    color: var(--primary);
    font-size: 22px;
    font-weight: 700;
    margin-right: 10px;
    line-height: 1;
    vertical-align: middle;
}
.qa-question:hover { color: var(--cta); }
.qa-question:hover::before { color: var(--cta); }
.qa-meta { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.qa-resolved { background: #e6f7e6; color: #18a058; padding: 3px 10px; border-radius: 3px; font-size: 12px; font-weight: 500; }
.qa-pending { background: #fff5e0; color: #d29200; padding: 3px 10px; border-radius: 3px; font-size: 12px; font-weight: 500; }
.qa-date { font-size: 12px; color: var(--text-mute); font-family: Arial, sans-serif; }
.qa-detail {
    padding: 14px 28px 14px 56px;
    margin: -8px 0 8px;
    background: #f7f9fc;
    border-radius: 8px;
    border-left: 3px solid var(--cta);
    font-size: 14px;
    color: var(--text-sub);
    line-height: 1.85;
}

/* ============================================
 * 关于我们 about.html 专属样式
 * ============================================ */
.about-page {
    padding: 36px 20px 30px;
    max-width: 1200px;
    margin: 0 auto;
}
.about-section {
    margin-bottom: 40px;
}
.about-section-title {
    text-align: center;
    margin-bottom: 28px;
}
.about-section-title em {
    display: block;
    font-size: 14px;
    color: var(--text-mute);
    letter-spacing: 4px;
    font-style: normal;
    font-family: Arial, sans-serif;
    font-weight: 600;
    margin-bottom: 8px;
}
.about-section-title h2 {
    font-size: 32px;
    font-weight: 800;
    color: var(--text);
    letter-spacing: 2px;
}
.about-section-title h2 span {
    color: var(--primary);
    margin-left: 6px;
}

/* 公司简介 - 顶部介绍卡 */
.about-intro {
    background: linear-gradient(135deg, #f0f7ff 0%, #e8f3ff 100%);
    border-radius: 14px;
    padding: 44px 40px;
    margin-bottom: 26px;
    text-align: center;
    border: 1px solid #d6e7ff;
}
.about-intro h3 {
    font-size: 24px;
    color: var(--primary);
    margin-bottom: 14px;
    line-height: 1.6;
    font-weight: 700;
}
.about-intro h3 strong { color: var(--cta); }
.about-intro p {
    font-size: 16px;
    color: var(--text-sub);
    line-height: 1.9;
    max-width: 900px;
    margin: 0 auto;
}

/* 4 张特色卡片网格（2x2） */
.about-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
}
.about-card {
    background: #fff;
    border-radius: 12px;
    padding: 28px 30px;
    box-shadow: 0 2px 14px rgba(0,0,0,.06);
    border-left: 4px solid var(--primary);
    transition: all .25s;
}
.about-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(13,71,161,.14);
}
.about-card h4 {
    font-size: 18px;
    color: var(--primary);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    font-weight: 700;
    letter-spacing: 1px;
}
.about-card h4 .ac-emoji {
    font-size: 24px;
    margin-right: 10px;
}
.about-card p {
    font-size: 14px;
    color: var(--text-sub);
    line-height: 1.9;
}
.about-card.about-card--blue { border-left-color: #0d47a1; }
.about-card.about-card--blue h4 { color: #0d47a1; }
.about-card.about-card--cyan { border-left-color: #1976d2; }
.about-card.about-card--cyan h4 { color: #1976d2; }
.about-card.about-card--gold { border-left-color: #f5a623; }
.about-card.about-card--gold h4 { color: #f5a623; }
.about-card.about-card--green { border-left-color: #27ae60; }
.about-card.about-card--green h4 { color: #27ae60; }

/* 蓝渐变核心数据条 */
.about-stats {
    background: linear-gradient(135deg, #0d47a1 0%, #1976d2 100%);
    border-radius: 14px;
    padding: 50px 40px;
    box-shadow: 0 6px 24px rgba(13,71,161,.25);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 36px;
    text-align: center;
    color: #fff;
}
.about-stat-item .as-num {
    font-size: 46px;
    font-weight: 900;
    margin-bottom: 8px;
    line-height: 1;
    font-family: Arial, sans-serif;
    letter-spacing: 1px;
}
.about-stat-item .as-num span {
    font-size: 26px;
    font-weight: 700;
    margin-left: 2px;
}
.about-stat-item .as-label {
    font-size: 16px;
    opacity: .95;
    margin-bottom: 8px;
    letter-spacing: 1px;
}
.about-stat-item .as-desc {
    font-size: 13px;
    opacity: .7;
    line-height: 1.7;
}

/* 教学优势 3 步 */
.about-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}
.about-feature-item {
    background: #fff;
    border-radius: 12px;
    padding: 44px 32px;
    text-align: center;
    border: 1px solid var(--line-2);
    transition: all .25s;
    position: relative;
}
.about-feature-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(13,71,161,.14);
    border-color: var(--primary);
}
.about-feature-item .afi-num {
    display: none;
}
.about-feature-item h4 {
    font-size: 24px;
    color: var(--text);
    margin-bottom: 16px;
    font-weight: 700;
    letter-spacing: 1px;
}
.about-feature-item p {
    font-size: 17px;
    color: var(--text-sub);
    line-height: 1.85;
}

/* 联系我们 4 列 */
.about-contact-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    align-items: stretch;
}
.acg-item--qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    padding: 12px 16px 16px;
}
.acg-item--qr .acg-label {
    margin-bottom: 10px;
    font-size: 17px;
}
.acg-sub {
    font-size: 15px;
    color: var(--text-sub);
    letter-spacing: 1px;
    margin-top: 4px;
}
.acg-qr {
    width: 220px;
    height: 220px;
    background: #f5f7fa;
    border: 1px dashed var(--line-2);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 6px;
}
.acg-qr img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.acg-qr--empty::before {
    content: "二维码";
    color: #aaa;
    font-size: 13px;
}
.acg-item {
    background: #fff;
    border-radius: 12px;
    padding: 36px 24px;
    text-align: center;
    border: 1px solid var(--line-2);
    transition: all .2s;
}
.acg-item:hover {
    border-color: var(--primary);
    box-shadow: 0 6px 18px rgba(13,71,161,.1);
}
.acg-icon {
    font-size: 44px;
    margin-bottom: 18px;
}
.acg-label {
    font-size: 17px;
    color: var(--text-mute);
    margin-bottom: 10px;
    letter-spacing: 1px;
}
.acg-value {
    font-size: 22px;
    color: var(--primary);
    font-weight: 700;
    word-break: break-all;
}

@media (max-width: 1024px) {
    .about-cards { grid-template-columns: 1fr; }
    .about-stats { grid-template-columns: repeat(2, 1fr); gap: 30px; padding: 36px 24px; }
    .about-feature-grid { grid-template-columns: repeat(2, 1fr); }
    .about-contact-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .about-section-title h2 { font-size: 24px; }
    .about-intro { padding: 28px 20px; }
    .about-intro h3 { font-size: 19px; }
    .about-intro p { font-size: 14px; }
    .about-stats { grid-template-columns: 1fr; gap: 24px; padding: 30px 20px; }
    .about-stat-item .as-num { font-size: 38px; }
    .about-feature-grid, .about-contact-grid { grid-template-columns: 1fr; }
}

/* ===== Mobile bottombar ===== */
.m-bottombar {
    display: none;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: 54px;
    background: #fff;
    border-top: 1px solid var(--line);
    box-shadow: 0 -2px 10px rgba(0,0,0,.06);
    z-index: 90;
}
.m-bottombar a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: var(--text-sub);
    padding: 6px 0;
}
.m-bottombar .mb-icon { font-size: 18px; line-height: 1; margin-bottom: 2px; }
.mb-i-home::before { content: "🏠"; }
.mb-i-info::before { content: "📰"; }
.mb-i-msg::before { content: "💬"; }
.mb-i-news::before { content: "📢"; }

.back-to-top {
    position: fixed;
    right: 24px; bottom: 90px;
    width: 44px; height: 44px;
    background: var(--cta);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    box-shadow: 0 4px 14px rgba(255,110,46,.3);
    opacity: 0;
    transition: all .25s;
    z-index: 99;
    cursor: pointer;
}
.back-to-top.show { opacity: 1; }

/* ===== Responsive ===== */
@media (max-width: 1024px) {
    .hero-content { flex-direction: column; gap: 30px; }
    .hero-illus { width: 100%; max-width: 460px; }
    .hero-form { width: 100%; max-width: 380px; }
    .art-education { grid-template-columns: repeat(2, 1fr); }
    .course-box { grid-template-columns: repeat(2, 1fr); }
    .info-section { grid-template-columns: 1fr; }
    .qa-section { grid-template-columns: 1fr; }
    .news-cards { grid-template-columns: repeat(2, 1fr); }
    .stats-strip { grid-template-columns: repeat(2, 1fr); gap: 30px; }
    .main-layout { grid-template-columns: 1fr; }
    .side-col { display: grid; grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    body { padding-bottom: 54px; }
    .tq-topbar, .tq-tel { display: none; }
    .tq-header { padding: 12px 0; }
    .tq-header .layout { justify-content: center; }
    .tq-logo .tq-brand-name { font-size: 22px; }
    .tq-logo img { width: 40px; height: 40px; }
    .tq-nav-list li a { font-size: 16px; line-height: 48px; letter-spacing: 2px; }
    .tq-banner { height: 460px; }
    .tq-banner-title { font-size: 36px; letter-spacing: 3px; }
    .tq-banner-subtitle { font-size: 20px; letter-spacing: 2px; }
    .tq-banner-card { padding: 10px 24px; margin-bottom: 16px; }
    .tq-banner-card span { font-size: 15px; letter-spacing: 1.5px; }
    .tq-banner-desc { font-size: 13px; letter-spacing: 1px; margin-bottom: 24px; }
    .tq-banner-cta { padding: 14px 36px; font-size: 18px; letter-spacing: 2px; }
    .tq-banner-side-tag { padding: 12px 10px; font-size: 13px; letter-spacing: 2px; }
    /* 移动端隐藏部分装饰 */
    .tq-banner-decor .d3, .tq-banner-decor .d6,
    .tq-banner-shape.s2, .tq-banner-shape.s5,
    .tq-banner-shape.s3, .tq-banner-shape.s6 { display: none; }
    .tq-banner-decor .d1, .tq-banner-decor .d4 { width: 220px; height: 220px; }
    .tq-banner-decor .d2, .tq-banner-decor .d5 { width: 160px; height: 160px; }
    .nav-bar { height: 56px; }
    .site-link-item { padding: 0 14px; font-size: 14px; line-height: 32px; }
    .nav-cta { padding: 7px 16px; font-size: 13px; }
    .main-logo .logo-text { font-size: 18px; }
    .hero-banner { padding: 90px 0 56px; }
    .hero-title { font-size: 32px; }
    .hero-subtitle { font-size: 15px; }
    .section-wrapper { padding: 56px 0; }
    .section-title { font-size: 26px; }
    .section-subtitle { font-size: 14px; margin-bottom: 36px; }
    .art-education { grid-template-columns: 1fr; }
    .course-box { grid-template-columns: 1fr; }
    .news-cards { grid-template-columns: 1fr; }
    .stats-strip { grid-template-columns: repeat(2, 1fr); }
    .stats-item strong { font-size: 40px; }
    .bottom-cta h2 { font-size: 26px; }
    .qa-section { gap: 24px; }
    .qa-illus { font-size: 56px; }
    .m-bottombar { display: flex; }
    .side-col { grid-template-columns: 1fr; }
    .main-col { padding: 18px; }
    .ad-title { font-size: 20px; }
    .ad-pager { grid-template-columns: 1fr; }
    .rel-grid { grid-template-columns: 1fr; }
    .al-item { flex-wrap: wrap; }
    .al-cover { width: 100%; }
    .page-banner { padding: 36px 0; }
    .page-banner .pb-title { font-size: 24px; }
    .qa-page-header { flex-direction: column; align-items: stretch; }
    .qa-question { padding-left: 0; }
    .qa-question::before { display: none; }
}

/* ===== 预约 modal 移动端适配 ===== */
@media (max-width: 600px) {
    .modal-overlay { padding: 12px; }
    .modal-box { width: 100%; border-radius: 10px; }
    .modal-header { padding: 16px 18px 0; }
    .modal-title { font-size: 17px; padding-bottom: 10px; }
    .modal-body { padding: 18px 18px 16px; }
    .form-group { margin-bottom: 12px; }
    .form-group label { font-size: 13px; margin-bottom: 5px; }
    /* iOS 聚焦防止页面缩放：input/select/textarea 字号 ≥ 16px */
    .form-group input,
    .form-group select,
    .form-group textarea { font-size: 16px; }
    .form-group input,
    .form-group select { height: 44px; }
    .form-group textarea { min-height: 80px; }
    .modal-submit { height: 48px; font-size: 16px; }
    .modal-close { font-size: 22px; padding: 6px 10px; }
}

/* ============ 微信扫码咨询(悬浮组件) ============ */
.qr-fab { position: fixed; right: 18px; top: 50%; transform: translateY(-50%); z-index: 9998; }
.qr-fab-card { width: 184px; background: #fff; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.18); padding: 16px 14px 14px; text-align: center; border: 1px solid #e5e9ef; }
.qr-fab-title { font-size: 17px; font-weight: 700; color: #0d47a1; margin-bottom: 10px; line-height: 1.3; letter-spacing: 1px; }
.qr-fab-img { width: 154px; height: 154px; object-fit: contain; display: block; margin: 0 auto 10px; background: #f7f7f7; border-radius: 6px; -webkit-touch-callout: default; }
.qr-fab-sub { font-size: 13px; color: #1a1a1a; line-height: 1.55; font-weight: 500; }
.qr-fab-sub strong { color: #0d47a1; font-weight: 700; }
.qr-fab-close { position: absolute; top: 4px; right: 8px; font-size: 16px; color: #bbb; cursor: pointer; line-height: 1; padding: 4px; background: none; border: 0; }
.qr-fab-close:hover { color: #666; }

/* 手机端:隐藏 PC 卡片,显示圆形按钮 */
.qr-mob { display: none; position: fixed; right: 14px; bottom: 80px; z-index: 9998; width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg,#1aad19,#16a085); color: #fff; box-shadow: 0 6px 18px rgba(26,173,25,.45); border: 0; font-size: 12px; font-weight: 600; line-height: 1.2; cursor: pointer; }
.qr-mob span { display: block; }
.qr-mob i { display: block; font-size: 20px; margin-bottom: 2px; font-style: normal; }

/* 手机端弹层 */
.qr-mask { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 9999; align-items: center; justify-content: center; padding: 20px; }
.qr-mask.show { display: flex; }
.qr-mask-card { background: #fff; border-radius: 14px; padding: 22px 20px 18px; width: 100%; max-width: 320px; text-align: center; position: relative; }
.qr-mask-title { font-size: 17px; font-weight: 600; color: #1a1a1a; margin-bottom: 12px; }
.qr-mask-img { width: 220px; height: 220px; object-fit: contain; display: block; margin: 0 auto 12px; background: #f7f7f7; border-radius: 8px; -webkit-touch-callout: default; user-select: none; }
.qr-mask-tip { font-size: 13px; color: #444; line-height: 1.5; margin-bottom: 4px; }
.qr-mask-tip-sm { font-size: 12px; color: #888; line-height: 1.5; }
.qr-mask-close { position: absolute; top: 8px; right: 12px; font-size: 22px; color: #999; background: none; border: 0; cursor: pointer; line-height: 1; padding: 4px 8px; }

@media (max-width: 768px) {
  .qr-fab { display: none; }
  .qr-mob { display: flex; align-items: center; justify-content: center; flex-direction: column; }
}

.qr-mask-tip strong { color: #0d47a1; }