/* ==========================================================================
   培诺3D视界 · 首页样式
   设计稿基准：1920 × 1080，内容区 1720px（为什么选择区块 1822px）

   适配策略（三段）：
     ≥ 1920px        根字号锁定 16px，1:1 还原设计稿
     1200 – 1919px   根字号 = 100vw / 120，整页等比缩放
                     覆盖 1280 / 1366 / 1440 / 1536 / 1600 / 1680 等 PC 主流分辨率
     < 1200px        根字号回到 16px，切换为流式平板 / 移动端布局

   说明：本文件中的 rem 数值 = 设计稿 px ÷ 16，缩放由根字号统一承担，
        业务样式里不要再出现写死的 px 尺寸（边框、阴影等视觉细节除外）。
   ========================================================================== */

/* ===== 字体：思源黑体（SIL OFL 开源许可，免费商用） =====
   注意：全量 CJK 字重体积很大，上线前建议做子集化或按 unicode-range 切片。 */
@font-face {
    font-family: "Source Han Sans CN";
    src:
        url("https://static.pennonedu.com/fonts/SourceHanSansK-Regular.woff2")
            format("woff2"),
        url("https://static.pennonedu.com/fonts/SourceHanSansK-Regular.woff")
            format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Source Han Sans CN";
    src:
        url("https://static.pennonedu.com/fonts/SourceHanSansK-Medium.woff2")
            format("woff2"),
        url("https://static.pennonedu.com/fonts/SourceHanSansK-Medium.woff")
            format("woff");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Source Han Sans CN";
    src:
        url("https://static.pennonedu.com/fonts/SourceHanSansK-Bold.woff2")
            format("woff2"),
        url("https://static.pennonedu.com/fonts/SourceHanSansK-Bold.woff")
            format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ==========================================================================
   1. 变量与基础
   ========================================================================== */
:root {
    --brand-blue: #2b65f6;
    --brand-blue-soft: #568ff0;
    --text-dark: #1a2233;
    --text-title: #262626;
    --text-muted: #828282;
    --bg-light: #f5f8ff;
    --bg-dark: #101d2d;

    /* 内容区宽度 */
    --content-w: 107.5rem; /* 1720px */
    --content-w-wide: 113.875rem; /* 1822px（为什么选择区块） */
    --stage-w: 120rem; /* 1920px 整屏区块 */

    /* 常用节奏 */
    --gap-sm: 0.625rem; /* 10px */
    --gap-md: 2.5rem; /* 40px */
    --gap-lg: 3.75rem; /* 60px */

    --font-cn:
        "Source Han Sans CN", "Source Han Sans SC", "Noto Sans SC",
        "PingFang SC", "Microsoft YaHei", sans-serif;
}

/* --- 根字号：PC 区间等比缩放 --- */
html {
    font-size: 16px;
    scroll-behavior: smooth;
    /* clip 不会像 hidden 那样破坏 position: sticky */
    overflow-x: clip;
}

@media (min-width: 1200px) and (max-width: 1919.98px) {
    html {
        font-size: calc(100vw / 120);
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

body {
    font-family: var(--font-cn);
    color: var(--text-dark);
    overflow-x: clip;
    width: 100%;
}

img,
svg,
video,
canvas {
    max-width: 100%;
}

a {
    text-decoration: none;
}

/* 锚点跳转时给顶部留一点余量 */
section[id] {
    scroll-margin-top: 1.25rem;
}

/* 键盘可达性：统一的可见焦点环 */
a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--brand-blue);
    outline-offset: 3px;
}

/* ==========================================================================
   2. 容器
   ========================================================================== */
.container {
    width: 100%;
    max-width: var(--content-w);
    margin-inline: auto;
    padding-left: 0;
    padding-right: 0;
}

/* 为什么选择区块内容更宽（1822px） */
.why-section .container {
    max-width: var(--content-w-wide);
}

/* ==========================================================================
   3. 通用标题
   ========================================================================== */
.section {
    padding: 5.625rem 0;
}

.section-title {
    /* 40px / 行高 61px / Bold */
    font-family: var(--font-cn);
    font-weight: 700;
    font-size: 2.5rem;
    line-height: 3.8125rem;
    color: var(--text-title);
    text-align: center;
    margin-bottom: 0;
}

.section-title .title-accent {
    color: var(--brand-blue);
}

.section-sub {
    /* 24px / 行高 48px / Regular */
    font-family: var(--font-cn);
    font-weight: 400;
    font-size: 1.5rem;
    line-height: 3rem;
    color: var(--text-muted);
    text-align: center;
    margin-top: var(--gap-sm);
    margin-bottom: var(--gap-lg);
}

/* ==========================================================================
   4. 导航栏
   ========================================================================== */
.navbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    height: 7.875rem; /* 126px */
    padding: 0;
}

.navbar .logo-img {
    width: 12.875rem; /* 206px */
    height: 5.625rem; /* 90px */
    object-fit: contain;
    display: block;
}

.navbar .nav-link {
    color: var(--text-dark);
    font-weight: 500;
    font-size: 1.125rem;
    margin: 0 0.875rem;
    padding: 0.25rem 0;
    position: relative;
    transition: color 0.2s ease;
}

.navbar .nav-link:hover,
.navbar .nav-link.is-active {
    color: var(--brand-blue);
}

.navbar .nav-link.is-active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.375rem;
    height: 2px;
    background: var(--brand-blue);
    border-radius: 2px;
}

.navbar .navbar-toggler {
    border: none;
    background: rgba(255, 255, 255, 0.75);
    border-radius: 8px;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: var(--text-dark);
}

.navbar .navbar-toggler:focus {
    box-shadow: none;
}

/* 移动端侧边导航 */
#mobileMenu {
    width: 78%;
    max-width: 320px;
}

#mobileMenu .logo-img {
    width: 154px;
    height: auto;
}

#mobileMenu .nav-link {
    display: block;
    padding: 14px 0;
    font-size: 1.0625rem;
    color: var(--text-dark);
    border-bottom: 1px solid #eef1f8;
    margin: 0;
}

/* ==========================================================================
   5. Hero 首屏
   ========================================================================== */
.hero {
    position: relative;
    min-height: 67.5rem; /* 1080px */
    display: flex;
    padding-top: 21.5625rem; /* 345px */
    padding-bottom: 7.9375rem; /* 127px */
    background-color: #dbe6ff;
    background-image: url("../imgs/hexo-bg.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}

/* 窄屏裁切背景后用于保证文字对比度的白色渐变，默认透明 */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0) 100%
    );
    pointer-events: none;
}

.hero .container {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 7.5rem; /* 120px */
}

.hero-text {
    width: 100%;
}

.hero h1 {
    font-family: var(--font-cn);
    font-weight: 700;
    font-size: 5rem; /* 80px */
    line-height: 5.6875rem; /* 91px */
    color: var(--brand-blue);
    margin-bottom: 0;
    text-align: left;
}

.hero h2 {
    font-family: var(--font-cn);
    font-weight: 700;
    font-size: 4.25rem; /* 68px */
    line-height: 5.6875rem;
    color: #000;
    margin-top: 1.875rem; /* 30px */
    margin-bottom: 0;
    text-align: left;
}

.hero .tagline {
    font-family: var(--font-cn);
    font-weight: 400;
    font-size: 2rem; /* 32px */
    line-height: 3rem;
    color: #373850;
    margin-top: 5rem; /* 80px */
    margin-bottom: 0;
    text-align: left;
}

/* 四张特性卡：4 × 340 + 3 × 30 = 1450px = 90.625rem */
.hero-feature-grid {
    display: grid;
    grid-template-columns: repeat(4, 21.25rem);
    gap: 1.875rem;
    max-width: 90.625rem;
}

.hero-feature-card {
    background: #fff;
    border-radius: 14px;
    padding: 2.125rem 1.25rem 2.125rem 2rem; /* 34 / 20 / 34 / 32 */
    min-height: 9.25rem; /* 148px，用 min-height 避免文案换行被撑破 */
    box-shadow: 0 6px 20px rgba(30, 60, 140, 0.06);
    display: flex;
    gap: var(--gap-sm);
    align-items: flex-start;
}

.hero-feature-card .placeholder-icon {
    width: 5rem; /* 80px */
    height: 5rem;
    border-radius: 50%;
    background: #eef2ff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.6875rem; /* 43px */
    color: var(--brand-blue);
    flex-shrink: 0;
}

.hero-feature-card h6 {
    font-family: var(--font-cn);
    font-weight: 500;
    font-size: 1.625rem; /* 26px */
    line-height: 1.5;
    color: #000;
    margin-bottom: 0;
    text-align: left;
}

.hero-feature-card p {
    font-family: var(--font-cn);
    font-weight: 400;
    font-size: 1.25rem; /* 20px */
    line-height: 2;
    color: var(--text-muted);
    margin: 0;
    text-align: left;
}

/* ==========================================================================
   6. 为什么选择 + 轮播
   ========================================================================== */
.why-section {
    padding-top: 6.875rem; /* 110px */
    padding-bottom: 3.75rem; /* 60px */
}

.why-card {
    border: 1px solid #e7ebf5;
    border-radius: 1.25rem; /* 20px */
    background: #f2f6fc;
    overflow: hidden;
    /* 设计稿 593 × 392 */
    width: 100%;
    aspect-ratio: 593 / 392;
}

.why-card .why-card-img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.whyswiper .swiper-slide {
    height: auto;
}

/* --- 轮播分页器（两个轮播共用） --- */
.whyswiper .swiper-pagination,
.appswiper .swiper-pagination {
    position: static;
    height: 1.25rem;
    margin-top: var(--gap-lg);
}

.appswiper .swiper-pagination {
    margin-top: 3.125rem; /* 50px */
}

.whyswiper .swiper-pagination-bullet,
.appswiper .swiper-pagination-bullet {
    width: 1.25rem; /* 20px */
    height: 1.25rem;
    background: #cbcdd2;
    opacity: 1;
    margin: 0 1.25rem;
    transition: background 0.2s ease;
}

.whyswiper .swiper-pagination-bullet-active,
.appswiper .swiper-pagination-bullet-active {
    background: var(--brand-blue);
}

/* ===== 蓝色统计条（图标 + 文字 + 背景色实现） ===== */
.stat-band {
    width: 100%;
    max-width: var(--content-w);
    display: flex;
    background: var(--brand-blue-soft);
    color: #fff;
    border-radius: 1.25rem;
    margin: var(--gap-lg) auto 3rem;
    padding: 0;
    box-sizing: border-box;
}

.stat-band .stat-item {
    position: relative;
    flex: 0 0 26.875rem; /* 430px = 349px 内容 + 左右内边距 40/41 */
    padding: 3rem 2.5625rem 2.875rem 2.5rem; /* 48 41 46 40 */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.stat-band .stat-item + .stat-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 0.125rem; /* 2px */
    height: 5.5rem; /* 88px */
    background: rgba(254, 254, 254, 0.4);
}

.stat-band .stat-head {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
}

.stat-band .stat-head i {
    font-size: 1.5rem;
    line-height: 1;
    color: #fff;
    flex: 0 0 auto;
}

.stat-band .stat-head h4 {
    margin: 0;
    font-size: 1.625rem; /* 26px */
    font-weight: 500;
    line-height: 3rem; /* 48px */
    color: #fff;
    white-space: nowrap;
}

.stat-band .stat-item p {
    margin: 0;
    font-size: 1.25rem; /* 20px */
    font-weight: 400;
    line-height: 1.875rem; /* 30px */
    color: rgba(255, 255, 255, 0.8);
}

/* ==========================================================================
   7. 六大核心课程体系
   ========================================================================== */
#courses {
    padding-top: 7.8125rem; /* 125px */
    padding-bottom: 1.0625rem;
    background: var(--bg-light);
}

.course-row {
    width: 100%;
    border-radius: 1.25rem;
    margin-bottom: var(--gap-md);
    overflow: hidden;
}

/* 课程图文详情卡（圆形图 + 标题 + 描述） */
.course-row.course-row-detail {
    --detail-bg: #d9f0ef;
    --detail-title: #0799c1;
    --detail-grad-from: #0799c1;
    --detail-grad-to: #bddf35;
    --detail-desc: #2d6964;

    aspect-ratio: auto;
    display: flex;
    align-items: center;
    gap: 4rem; /* 64px */
    padding: 2.1875rem 3.4375rem 2.1875rem 4rem; /* 35px 55px 35px 64px */
    background: var(--detail-bg);
}

/* 生物·沉浸互动：绿色主题 */
.course-row.course-row-detail-bio {
    --detail-bg: #e3f5e7;
    --detail-title: #29af60;
    --detail-grad-from: #29af60;
    --detail-grad-to: #c8eb2b;
    --detail-desc: #23683d;
}

/* 物理·在做中学：蓝色主题 */
.course-row.course-row-detail-phy {
    --detail-bg: #e0efff;
    --detail-title: #3c8ee9;
    --detail-grad-from: #3c8ee9;
    --detail-grad-to: #51d8e0;
    --detail-desc: #3d648e;
}

/* 化学·触手可及：蓝紫主题 */
.course-row.course-row-detail-chem {
    --detail-bg: #f2f6fc;
    --detail-title: #5769db;
    --detail-grad-from: #5769db;
    --detail-grad-to: #9059ee;
    --detail-desc: #3e3781;
}

/* 地理·纵览乾坤：绿色主题 */
.course-row.course-row-detail-geo {
    --detail-bg: #f3fed8;
    --detail-title: #00af7a;
    --detail-grad-from: #00af7a;
    --detail-grad-to: #85da66;
    --detail-desc: #2c5b4b;
}

/* 数学·数形变幻：粉色主题 */
.course-row.course-row-detail-math {
    --detail-bg: #feebf1;
    --detail-title: #e97abd;
    --detail-grad-from: #e97abd;
    --detail-grad-to: #ffa448;
    --detail-desc: #6d5763;
}

/* 图片在右的镜像布局 */
.course-row.course-row-detail-reverse {
    flex-direction: row-reverse;
    padding: 2.1875rem 4rem 2.1875rem 3.4375rem; /* 35px 64px 35px 55px */
}

.course-row-detail .course-detail-img {
    flex: 0 0 auto;
    width: 17.5rem; /* 280px */
    height: 17.5rem;
    border-radius: 12.5rem; /* 200px */
    border: 0.375rem solid #edfaff; /* 6px */
    object-fit: cover;
    display: block;
}

.course-row-detail .course-detail-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2rem; /* 32px */
}

.course-row-detail .course-detail-title {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.course-row-detail .course-detail-cn {
    margin: 0;
    font-size: 1.875rem; /* 30px */
    font-weight: 700;
    line-height: 2.5rem; /* 40px */
    color: var(--detail-title);
}

.course-row-detail .course-detail-en {
    font-size: 1.875rem; /* 30px */
    font-weight: 700;
    line-height: 2.5rem; /* 40px */
    background: linear-gradient(
        0deg,
        var(--detail-grad-from) 0%,
        var(--detail-grad-to) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.course-row-detail .course-detail-desc {
    margin: 0;
    max-width: 77.9375rem; /* 1247px */
    font-size: 1.5rem; /* 24px */
    font-weight: 400;
    line-height: 2.75rem; /* 44px */
    color: var(--detail-desc);
}

/* ==========================================================================
   8. 应用场景 & 全平台适配
   ========================================================================== */
#scenario {
    padding-top: 6.875rem;
    padding-bottom: 3.125rem;
}

.scenario-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap-md);
    margin-bottom: var(--gap-lg);
}

.scenario-card {
    border-radius: 14px;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 546 / 242;
}

.scenario-card .scenario-card-img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.app-banner {
    background: #eef3ff;
    border-radius: 18px;
    overflow: hidden;
}

.app-banner .app-banner-img {
    width: 100%;
    height: auto;
    display: block;
}

/* ==========================================================================
   9. 智能硬件终端
   ========================================================================== */
.hw-section {
    background: #f2f6fc;
    color: #fff;
}

.hw-media {
    position: relative;
    width: 100%;
    max-width: var(--stage-w);
    margin-inline: auto;
}

/* 用 <img> 替代背景图：任何宽度下都保持原始比例，不会被拉伸 */
.hw-media .hw-img {
    width: 100%;
    height: auto;
    display: block;
}

.hw-heading {
    position: absolute;
    left: 6.25rem; /* 100px */
    top: 5.625rem; /* 90px */
    z-index: 2;
}

.hw-heading h3 {
    font-family: var(--font-cn);
    font-weight: 700;
    font-size: 2.5rem;
    line-height: 3.8125rem;
    color: #fff;
    text-align: left;
    margin-bottom: 0;
}

.hw-heading p {
    font-family: var(--font-cn);
    font-weight: 400;
    font-size: 1.5rem;
    line-height: 3rem;
    color: rgba(255, 255, 255, 0.85);
    text-align: left;
    margin-top: var(--gap-sm);
    margin-bottom: 0;
}

/* ==========================================================================
   10. 培诺智能平板 Pro
   ========================================================================== */
.pad-section {
    background: #486aff;
    color: #fff;
    padding: 0;
}

.pad-media {
    position: relative;
    width: 100%;
    max-width: var(--stage-w);
    margin-inline: auto;
}

.pad-media .pad-img {
    width: 100%;
    height: auto;
    display: block;
}

.pad-heading {
    position: absolute;
    top: 5.625rem; /* 90px */
    left: 0;
    right: 0;
    z-index: 2;
}

.pad-heading .section-title {
    color: #fff;
}

.pad-heading .section-sub {
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 0;
}

/* ==========================================================================
   11. Footer
   ========================================================================== */
footer {
    background: var(--bg-dark);
    color: #aab2cf;
    padding: 0.3125rem 0 0.9375rem;
}

footer .footer-main {
    display: flex;
    align-items: center;
    gap: 2.5rem;
    min-height: 4.8125rem; /* 77px */
    margin-top: 1.6875rem;
}

footer .footer-main > div {
    flex: 1;
}

footer .footer-brand-row {
    display: flex;
    align-items: center;
    gap: 6.25rem; /* 100px */
}

footer .footer-logo-img {
    width: 14.8125rem; /* 237px */
    height: auto;
    display: block;
}

footer .qr-group {
    display: flex;
    gap: 1.25rem;
}

footer .qr-group .qr-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

footer .qr-img {
    width: 4.375rem; /* 70px */
    height: 4.375rem;
    object-fit: cover;
    display: block;
    flex-shrink: 0;
}

footer .qr-caption {
    font-family: var(--font-cn);
    font-weight: 500;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: #999;
    text-align: left;
    white-space: nowrap;
}

footer h6 {
    font-family: var(--font-cn);
    font-weight: 400;
    font-size: 1rem;
    line-height: 2.8125rem;
    color: #fff;
    text-align: left;
    margin-bottom: 0;
}

footer .footer-info {
    display: flex;
    justify-content: space-between;
    gap: 3.75rem;
}

footer .footer-info > div {
    font-family: var(--font-cn);
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 2rem;
    color: rgba(255, 255, 255, 0.5);
    text-align: left;
    white-space: nowrap;
}

footer .footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 1.625rem;
    min-height: 4.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

footer .footer-bottom span {
    font-family: "Roboto", var(--font-cn);
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.5);
}

/* ==========================================================================
   12. 平板 / 移动端（< 1200px）
   根字号回到 16px，全部改为流式布局
   ========================================================================== */
@media (max-width: 1199.98px) {
    .container,
    .why-section .container {
        max-width: 100%;
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    .section {
        padding: 3.5rem 0;
    }

    .section-title {
        font-size: clamp(1.375rem, 3.2vw, 2rem);
        line-height: 1.4;
    }

    .section-sub {
        font-size: clamp(0.9375rem, 2vw, 1.125rem);
        line-height: 1.7;
        margin-top: 0.5rem;
        margin-bottom: 2rem;
    }

    /* --- 导航 --- */
    .navbar {
        height: 4.5rem;
    }

    .navbar .logo-img {
        width: auto;
        height: 2.75rem;
    }

    /* --- Hero --- */
    .hero {
        min-height: auto;
        padding-top: 7.5rem;
        padding-bottom: 3rem;
        background-position: center top;
    }

    /* 背景被裁切后加一层白色渐变，保证标题可读 */
    .hero::before {
        background: linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.82) 0%,
            rgba(255, 255, 255, 0.55) 45%,
            rgba(255, 255, 255, 0.8) 100%
        );
    }

    .hero .container {
        gap: 2.5rem;
    }

    .hero h1 {
        font-size: clamp(2rem, 6.5vw, 3.25rem);
        line-height: 1.25;
    }

    .hero h2 {
        font-size: clamp(1.5rem, 5vw, 2.5rem);
        line-height: 1.3;
        margin-top: 0.75rem;
    }

    .hero .tagline {
        font-size: clamp(0.9375rem, 2.4vw, 1.25rem);
        line-height: 1.8;
        margin-top: 1.25rem;
    }

    .hero-feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
        max-width: none;
    }

    .hero-feature-card {
        min-height: 0;
        padding: 1rem;
        gap: 0.75rem;
        border-radius: 12px;
        align-items: center;
    }

    .hero-feature-card .placeholder-icon {
        width: 2.75rem;
        height: 2.75rem;
        font-size: 1.375rem;
    }

    .hero-feature-card h6 {
        font-size: 1rem;
        line-height: 1.4;
    }

    .hero-feature-card p {
        font-size: 0.8125rem;
        line-height: 1.5;
    }

    /* --- 为什么选择 --- */
    .why-section {
        padding-top: 3.5rem;
        padding-bottom: 2rem;
    }

    .whyswiper .swiper-pagination,
    .appswiper .swiper-pagination {
        margin-top: 1.5rem;
        height: auto;
    }

    .whyswiper .swiper-pagination-bullet,
    .appswiper .swiper-pagination-bullet {
        width: 0.5rem;
        height: 0.5rem;
        margin: 0 0.3125rem;
    }

    .stat-band {
        border-radius: 0.75rem;
        margin: 2rem auto 0;
        flex-wrap: wrap;
        gap: 1.5rem 2rem;
        padding: 0;
    }

    .stat-band .stat-item {
        flex: 1 1 calc(50% - 1rem);
        padding: 1.5rem;
    }

    .stat-band .stat-item + .stat-item::before {
        content: none;
    }

    .stat-band .stat-item:nth-child(even)::before {
        content: "";
        position: absolute;
        left: -1rem; /* 2rem 列间距的中点 */
        top: 50%;
        transform: translate(-50%, -50%);
        width: 0.125rem;
        height: 5.5rem;
        background: rgba(254, 254, 254, 0.4);
    }

    /* --- 课程体系 --- */
    #courses {
        padding-top: 3.5rem;
        padding-bottom: 2rem;
    }

    .course-row {
        border-radius: 0.75rem;
        margin-bottom: 1rem;
    }

    .course-row.course-row-detail {
        gap: 1.5rem;
        padding: 1.5rem;
    }

    .course-row-detail .course-detail-img {
        width: 9.375rem;
        height: 9.375rem;
        border-width: 0.25rem;
    }

    .course-row-detail .course-detail-cn,
    .course-row-detail .course-detail-en {
        font-size: 1.375rem;
        line-height: 1.875rem;
    }

    .course-row-detail .course-detail-desc {
        font-size: 1rem;
        line-height: 1.75rem;
    }

    /* --- 应用场景 --- */
    #scenario {
        padding-top: 3.5rem;
        padding-bottom: 2rem;
    }

    .scenario-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
        margin-bottom: 2rem;
    }

    .scenario-card {
        border-radius: 10px;
    }

    .app-banner {
        border-radius: 12px;
    }

    /* --- 智能硬件 / 平板 Pro：标题回到文档流，避免压住图内主体 --- */
    .hw-heading,
    .pad-heading {
        position: static;
        padding: 2.25rem 1.25rem 1.25rem;
    }

    .hw-heading h3 {
        font-size: clamp(1.375rem, 3.2vw, 2rem);
        line-height: 1.4;
        color: #486aff;
        text-align: center;
    }

    .hw-heading p {
        font-size: clamp(0.9375rem, 2vw, 1.125rem);
        line-height: 1.7;
        margin-top: 0.5rem;
        color: #486aff;
        text-align: center;
    }

    .pad-heading .section-sub {
        margin-bottom: 0;
    }

    /* --- Footer --- */
    footer {
        padding: 1.5rem 0 1rem;
    }

    footer .footer-main {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.75rem;
        min-height: 0;
        margin-top: 0;
    }

    footer .footer-main > div {
        width: 100%;
    }

    footer .footer-brand-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.25rem;
    }

    footer .footer-logo-img {
        width: 11.875rem;
    }

    footer .qr-group {
        flex-wrap: wrap;
        gap: 1.25rem 1.75rem;
    }

    footer h6 {
        line-height: 1.6;
        margin-bottom: 0.625rem;
    }

    footer .footer-info {
        flex-direction: column;
        gap: 0.25rem;
    }

    footer .footer-info > div {
        white-space: normal;
        line-height: 1.7;
    }

    footer .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        min-height: 0;
        padding-top: 1rem;
        gap: 0.375rem;
    }
}

/* ==========================================================================
   13. 手机（< 768px）
   ========================================================================== */
@media (max-width: 767.98px) {
    .container,
    .why-section .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .hero {
        padding-top: 6.5rem;
    }

    .hero-feature-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .scenario-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .course-row.course-row-detail {
        height: auto;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
        padding: 1.25rem;
    }

    .course-row-detail .course-detail-img {
        width: 8.75rem;
        height: 8.75rem;
    }

    .course-row-detail .course-detail-body {
        align-items: center;
    }

    .course-row-detail .course-detail-desc {
        max-width: none;
        text-align: left;
        font-size: 0.9375rem;
        line-height: 1.5rem;
    }

    .stat-band {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.25rem;
        padding: 0;
        margin: 1.5rem auto 0;
    }

    .stat-band .stat-item {
        flex: 1 1 auto;
        width: 100%;
        padding: 1.25rem;
    }

    .stat-band .stat-item + .stat-item::before,
    .stat-band .stat-item:nth-child(even)::before {
        content: none;
    }

    .stat-band .stat-head h4 {
        font-size: 1.125rem;
        line-height: 1.4;
    }

    .hw-heading,
    .pad-heading {
        padding: 1.75rem 1rem 1rem;
    }
}

/* ==========================================================================
   14. 超宽屏（≥ 1920px）：内容锁定设计稿尺寸并居中
   ========================================================================== */
@media (min-width: 1920px) {
    .hero,
    .hw-section,
    .pad-section {
        background-position: center top;
    }
}

/* ==========================================================================
   15. 回到顶部
   尺寸用固定 px：属于界面控件而非设计稿元素，
   不应随 PC 区间的根字号缩放而低于可点击尺寸。
   ========================================================================== */
.back-to-top {
    position: fixed;
    right: 40px;
    bottom: 60px;
    z-index: 100;
    width: 52px;
    height: 52px;
    border: none;
    border-radius: 50%;
    background: #fff;
    color: var(--brand-blue);
    font-size: 22px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 20px rgba(20, 45, 110, 0.18);
    cursor: pointer;

    /* 默认隐藏：不可见、不可点、不进 Tab 序列 */
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition:
        opacity 0.25s ease,
        transform 0.25s ease,
        visibility 0.25s,
        background-color 0.2s ease,
        color 0.2s ease;
}

.back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.back-to-top:hover {
    background: var(--brand-blue);
    color: #fff;
}

.back-to-top:active {
    transform: translateY(1px);
}

@media (max-width: 1199.98px) {
    .back-to-top {
        right: 16px;
        /* 避开 iOS 底部手势条 */
        bottom: calc(16px + env(safe-area-inset-bottom, 0px));
        width: 44px;
        height: 44px;
        font-size: 18px;
        box-shadow: 0 4px 14px rgba(20, 45, 110, 0.2);
    }
}