/* scaled-1to1：本文件长度值已按固定 4000px 画布（设计稿原始像素）换算 */
/* ==========================================================================
   苏能教育官网 · 首页
   几何数值来自设计稿量测（docs/设计还原规格.md），基准：视口 2000px / 容器 1600px
   用 aspect-ratio 承载设计稿的各块高宽比，使其在任意宽度下等比缩放
   ========================================================================== */

/* ---------------- 1. 首屏 ---------------- */
.sg-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: #312E32;                 /* 实测：照片压暗后的底部色 */
    aspect-ratio: 2000 / 1354;           /* 实测：2000 宽 → 1354 高 */
    max-height: 2708px;
    min-height: 1040px;
}
.sg-hero__bg { position: absolute; inset: 0; }
.sg-hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
.sg-hero__bg::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(10, 14, 20, .34) 0%, rgba(10, 14, 20, .06) 38%, rgba(10, 14, 20, .52) 100%);
}

.sg-hero__inner {
    position: relative;
    width: 100%;
    padding-bottom: 208px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 80px;
}

.sg-hero__copy { max-width: 1800px; color: #fff; }
.sg-hero__title {
    font-size: 112px;
    font-weight: 700;
    line-height: 1.32;
    letter-spacing: .01em;
    text-shadow: 0 4px 48px rgba(0, 0, 0, .22);
}
.sg-hero__title-en {
    font-family: var(--sg-font-en);
    font-size: 34px;
    line-height: 1.7;
    color: rgba(255, 255, 255, .82);
    margin-top: 40px;
    max-width: 1400px;
}

/* 兔子 IP + 预约试听标签 */
.sg-hero__ip { position: relative; flex: none; width: 480px; text-align: center; }
.sg-hero__ip-tag {
    position: absolute;
    top: -12px; right: 0;
    padding: 18px 40px;
    border-radius: 20px;
    background: #fff;
    border: 2px solid var(--sg-teal-2);
    color: var(--sg-ink);
    font-size: 30px;
    font-weight: 600;
    box-shadow: var(--sg-shadow);
    white-space: nowrap;
}
.sg-hero__ip-tag:hover { color: #fff; background: var(--sg-teal); border-color: var(--sg-teal); }
.sg-hero__ip-img {
    width: 380px; height: 440px;
    margin: 68px auto 0;
    border-radius: 50% 50% 46% 46% / 42% 42% 58% 58%;
    background: rgba(44, 111, 209, .28);
    padding: 36px;
}
.sg-hero__ip-img img { width: 100%; height: 100%; object-fit: contain; }

/* ---------------- 2. 数据指标带（独立白底，不压首屏） ---------------- */
.sg-stats { padding-top: 168px; background: #fff; }   /* 实测首屏底 1354 → 卡片顶 1438 */
.sg-stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 48px; }
.sg-stat {
    height: 408px;                        /* 实测卡片高 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #fff;
    border-radius: var(--sg-radius);
    padding: 56px 52px;
    box-shadow: 0 8px 40px rgba(24, 32, 44, .05);
    transition: transform .3s ease, box-shadow .3s ease;
}
.sg-stat:hover { transform: translateY(-12px); box-shadow: var(--sg-shadow-hover); }
.sg-stat__cn { font-size: 32px; font-weight: 600; color: var(--sg-ink); }
.sg-stat__en {
    font-family: var(--sg-font-en);
    font-size: 22px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--sg-gray-2);
    margin-top: 8px;
}
.sg-stat__num {
    font-family: var(--sg-font-en);
    font-size: 108px;
    font-weight: 700;
    line-height: 1;
    color: var(--sg-ink);
    margin-top: 44px;
    letter-spacing: -.01em;
}
.sg-stat__num i { font-style: normal; color: var(--sg-magenta); font-size: .52em; vertical-align: super; margin-left: 6px; }

/* ---------------- 3. 地图分布区 ---------------- */
.sg-map {
    position: relative;
    padding: 0 0 396px;                   /* 实测该区总高 1416 = 地图 1166 + 底部文字 250 */
    background: #fff;
}
.sg-map__bg { position: relative; }
.sg-map__bg img { display: block; width: 100%; aspect-ratio: 1600 / 1166; object-fit: cover; }
/* 文字卡压在图形下缘（设计稿为叠加式） */
.sg-map__cards {
    position: relative;
    margin-top: -200px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 64px;
}
.sg-map__title-card {
    background: rgba(255, 255, 255, .94);
    border-radius: var(--sg-radius);
    padding: 68px 80px;
    max-width: 1120px;
    box-shadow: var(--sg-shadow);
}
.sg-map__title { font-size: 68px; font-weight: 700; line-height: 1.4; color: var(--sg-ink); }
.sg-map__title-en { font-family: var(--sg-font-en); font-size: 30px; color: var(--sg-gray); margin-top: 20px; }
.sg-map__sub-card {
    background: rgba(52, 58, 66, .92);
    color: #fff;
    border-radius: var(--sg-radius);
    padding: 52px 68px;
    max-width: 800px;
    font-size: 32px;
}

/* ---------------- 4. 品牌矩阵 ---------------- */
.sg-brands { margin-top: 340px; padding: 200px 0; background: var(--sg-bg-soft); }   /* 实测：地图底 3058 → 灰底 3228 */
.sg-brand-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 48px; }
.sg-brand-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 1016px;                    /* 实测：品牌区总高 844 − 标题区 − 上下留白 */
    border-radius: var(--sg-radius);
    padding: 68px 56px 60px;
    transition: transform .35s ease, box-shadow .35s ease;
}
/* 2026-10-11 用户要求：首页四张品牌卡不可点击（不跳转品牌页）。
   卡片视觉由切片卡面承担；此处保留 href 仅供爬虫发现品牌页，鼠标/键盘均不触发跳转。 */
.sg-brand-card { pointer-events: none; }
.sg-brand-card:hover { transform: none; box-shadow: none; }
.sg-brand-card__head { display: flex; flex-direction: column; gap: 12px; }
.sg-brand-card__cn { font-size: 42px; font-weight: 700; color: var(--sg-ink); }
.sg-brand-card__en {
    font-family: var(--sg-font-en);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--sg-gray);
}
.sg-brand-card__mark { width: 156px; height: 156px; margin-top: 56px; }
.sg-brand-card__more {
    font-size: 26px;
    color: var(--sg-gray);
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 36px;
}
.sg-brand-card:hover .sg-brand-card__more { color: var(--sg-teal); }

/* ---------------- 5. 为什么选择我们 ---------------- */
.sg-whyus-sec { margin-top: 728px; background: #fff; }   /* 实测品牌区底 4072 → 卡片顶 4436 */
.sg-whyus { display: grid; grid-template-columns: 944px 1fr; gap: 330px; align-items: start; }
.sg-whyus__head { position: sticky; top: 240px; }
.sg-whyus__title { font-size: 92px; font-weight: 800; line-height: 1.15; color: var(--sg-ink); }
.sg-whyus__title-cn { font-size: 40px; color: var(--sg-gray); margin-top: 28px; letter-spacing: .06em; }
.sg-whyus__list { display: grid; gap: 52px; }
.sg-whyus-card {
    display: grid;
    grid-template-columns: 600px 1fr;
    gap: 64px;
    align-items: center;
    height: 612px;                        /* 实测卡高 */
    background: #F2F3ED;                  /* 实测卡底 */
    border-radius: var(--sg-radius);
    padding: 52px 64px 52px 52px;
    transition: box-shadow .3s ease;
}
.sg-whyus-card:hover { box-shadow: var(--sg-shadow); }
.sg-whyus-card__img { border-radius: var(--sg-radius-sm); overflow: hidden; aspect-ratio: 4 / 3; background: #E6EBE0; }
.sg-whyus-card__step {
    width: 92px; height: 92px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 2px solid var(--sg-ink-2);
    font-family: var(--sg-font-en);
    font-size: 30px;
    font-weight: 600;
    color: var(--sg-ink);
    margin-bottom: 32px;
}
.sg-whyus-card__title { font-size: 44px; font-weight: 700; color: var(--sg-ink); }
.sg-whyus-card__text { font-size: 30px; color: var(--sg-gray); margin-top: 20px; line-height: 1.85; }

/* ---------------- 6. 教学体系：2 行 × 3 列闭环 ---------------- */
.sg-teaching { margin-top: 728px; background: #fff; }   /* 实测 whyus 底 5406 → 标题 5770 */

/*
 五步闭环版式（实测）：3 列 × 2 行，第 2 行中间留空
 列宽 400 / 箭头列宽 200 → 400×3 + 200×2 = 1600
      ┌──02──┐ ▶ ┌──03──┐ ▶ ┌──04──┐
      │      │   │      │   │      │
      ▲      │   │      │   │      ▼
      ┌──01──┐ ◀─────────── ┌──05──┐
*/
.sg-flow {
    display: grid;
    grid-template-columns: 400fr 200fr 400fr 200fr 400fr;
    grid-template-rows: auto 210px auto;
    align-items: center;
    margin-top: 138px;   /* 实测：标题底 5926 → 流程顶 6015 */
}
.sg-flow__card {
    grid-column: span 1;
    background: var(--sg-bg-card);        /* 实测 #F2F2F2 */
    border-radius: var(--sg-radius);
    padding: 60px 56px 56px;
    min-height: 640px;
}
.sg-flow__step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 112px; height: 112px;
    border-radius: 50%;
    background: var(--sg-orange);          /* 实测 #FBB343 */
    color: #fff;
    font-family: var(--sg-font-en);
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 44px;
}
.sg-flow__title { font-size: 40px; font-weight: 700; color: var(--sg-ink); }
.sg-flow__subtitle { font-size: 32px; color: var(--sg-ink-2); margin-top: 12px; }
.sg-flow__en {
    font-family: var(--sg-font-en);
    font-size: 22px;
    letter-spacing: .1em;
    color: var(--sg-gray-2);
    margin-top: 32px;
    line-height: 1.6;
}
/* 卡片落位：第 1 行 02/03/04，第 2 行 01/05 */
.sg-flow__card--02 { grid-area: 1 / 1; }
.sg-flow__card--03 { grid-area: 1 / 3; }
.sg-flow__card--04 { grid-area: 1 / 5; }
.sg-flow__card--01 { grid-area: 3 / 1; }
.sg-flow__card--05 { grid-area: 3 / 5; }

/* 橙色箭头 */
.sg-flow__arrow { display: flex; align-items: center; justify-content: center; }
.sg-flow__arrow i {
    display: block;
    width: 0; height: 0;
    border-style: solid;
}
.sg-flow__arrow--r i { border-width: 22px 0 22px 36px; border-color: transparent transparent transparent var(--sg-orange); }
.sg-flow__arrow--l i { border-width: 22px 36px 22px 0; border-color: transparent var(--sg-orange) transparent transparent; }
.sg-flow__arrow--u i { border-width: 0 22px 36px 22px; border-color: transparent transparent var(--sg-orange) transparent; }
.sg-flow__arrow--d i { border-width: 36px 22px 0 22px; border-color: var(--sg-orange) transparent transparent transparent; }
/* 02→03、03→04：第 1 行、第 2/4 列 */
.sg-flow__arrow--a { grid-area: 1 / 2; }
.sg-flow__arrow--b { grid-area: 1 / 4; }
/* 01↑02：第 2 行第 1 列（靠右）；04↓05：第 2 行第 5 列（靠右） */
.sg-flow__arrow--up { grid-area: 2 / 1; justify-self: end; margin-right: 236px; }   /* 实测箭头 x≈442 */
.sg-flow__arrow--down { grid-area: 2 / 5; justify-self: end; margin-right: 380px; }   /* 实测箭头 x≈1598 */
/* 05→01 长回环箭头：第 3 行中间跨 3 列 */
.sg-flow__arrow--back { grid-area: 3 / 2 / 4 / 5; justify-self: stretch; }
.sg-flow__arrow--back i {
    border-width: 22px 36px 22px 0;
    border-color: transparent var(--sg-orange) transparent transparent;
    margin-left: 16px;
}
.sg-flow__arrow--back::after {
    content: "";
    flex: 1;
    height: 2px;
    background: var(--sg-orange);
    opacity: .28;
    order: 2;
    margin-left: 20px;
}
.sg-flow__arrow--back { display: flex; align-items: center; }

/* ---------------- 7. 多层级师资体系 ----------------
   实测：标题在白色底上（7122..7388）；暖米色底只包住网格（7487..9341） */
.sg-faculty { margin-top: 724px; background: #fff; }   /* 实测流程底 6760 → 标题 7122 */
.sg-faculty .sg-head { min-height: 380px; }              /* 实测标题块高 266（含 .sg-head 自带 48 下边距） */
.sg-faculty-band { margin-top: 198px; padding: 530px 0 346px; background: var(--sg-bg-warm); }   /* 实测暖色带 7487..9341 */
.sg-teacher-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 400px 192px; }   /* 实测：两行照片顶距 808，行间净空约 200 */
.sg-teacher {
    background: #fff;
    border-radius: var(--sg-radius);
    padding: 40px 40px 52px;
    text-align: center;
    transition: transform .3s ease, box-shadow .3s ease;
}
.sg-teacher:hover { transform: translateY(-12px); box-shadow: var(--sg-shadow); }
.sg-teacher__img { border-radius: var(--sg-radius-sm); overflow: hidden; aspect-ratio: 469 / 452; background: #EFEBE4; }
.sg-teacher__level { display: inline-block; margin-top: 40px; font-size: 36px; font-weight: 700; color: var(--sg-ink); }
.sg-teacher__job { display: block; font-size: 26px; color: var(--sg-teal); margin-top: 12px; letter-spacing: .04em; }
.sg-teacher__intro { font-size: 28px; color: var(--sg-gray); margin-top: 24px; line-height: 1.8; }

/* ---------------- 8. 图文服务段 ---------------- */
.sg-features { margin-top: 570px; background: #fff; }   /* 实测暖色带底 9341 → 图文段 9626 */
.sg-feature + .sg-feature { margin-top: 476px; }
.sg-feature__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 192px; align-items: center; }
.sg-feature--reverse .sg-feature__media { order: 2; }
.sg-feature__media {
    border-radius: var(--sg-radius);
    overflow: hidden;
    aspect-ratio: 768 / 476;               /* 实测图文段高 476 */
    background: var(--sg-line-2);
}
.sg-feature__step {
    width: 112px; height: 112px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 2px solid var(--sg-line);
    font-family: var(--sg-font-en);
    font-size: 34px;
    font-weight: 600;
    color: var(--sg-ink);
}
.sg-feature__title { font-size: 60px; font-weight: 700; color: var(--sg-ink); margin-top: 44px; }
.sg-feature__text { font-size: 32px; color: var(--sg-gray); margin-top: 32px; line-height: 1.9; }

.sg-dots { display: flex; gap: 20px; margin: 56px 0 52px; }
.sg-dots button {
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--sg-line);
    padding: 0;
    transition: background .25s ease, width .25s ease;
}
.sg-dots button.is-active { background: var(--sg-ink); width: 52px; border-radius: 12px; }

/* 首屏底部按钮：属设计稿 10–13 的移动端首屏元素；固定 4000px 桌面画布下不呈现
   （桌面端的「预约试听」入口是右下角 IP 上方的标签按钮 .sg-hero__ip-tag） */
.sg-hero__cta { display: none; }

/* ---------------- 9. 页脚间距（设计稿此处直接接页脚） ---------------- */

/* ---------------- 设计稿切片图层 ----------------
   partial/slices.html：10 张切片按渲染区块边界堆叠，视觉与设计稿逐像素一致。
   pointer-events:none → 下方语义 DOM 的链接/热区仍可点击。
   注：切片首屏的烙印菜单文字与 LOGO 已由 docs/tools/make-slices.php 抠除
   （patch_nav_out / patch_logo_text_out / patch_logo_icon_out），否则会与
   页头真实导航、LOGO 重影。 */
.sg-slice-layer {
    position: absolute;
    left: 0; top: 0;
    width: var(--sg-canvas-w, 4000px); height: 0;   /* 随画布：首页 4000 / 新四稿 1920（子切片自身定宽，层宽仅防溢出） */
    z-index: 30;
    pointer-events: none;
}
.sg-slice {
    position: absolute;
    left: 0;
    display: block;
    width: 4000px;
    max-width: none;
    height: auto;
}

/* ---------------- 首页 banner 轮播（第二张覆盖在切片首屏之上） ----------------
   .sg-slice-layer 为 z-index 30，本层 31 即可盖住首屏切片；
   play/pause 逻辑在 main.js 的 initHeroBanner()。 */
.sg-hero-banner2 {
    position: absolute;
    left: 0; top: 0;
    width: 4000px; height: 2708px;      /* 首屏切片高度，见 partial/slices.html */
    z-index: 31;
    opacity: 0;
    visibility: hidden;
    transition: opacity .9s ease, visibility 0s linear .9s;
    pointer-events: none;
}
.sg-hero-banner2.is-show {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}
.sg-hero-banner2 img {
    display: block;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center 42%;        /* 4000×2250 素材裁切后仍保住人物与文案 */
}
.sg-hero-dots {
    position: absolute;
    left: 50%; top: 2380px;             /* 首屏内底部居中（避开左下文案与右下 IP） */
    transform: translateX(-50%);
    display: flex;
    gap: 20px;
    z-index: 32;
}
.sg-hero-dot {
    width: 20px; height: 20px;
    padding: 0;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .8);
    background: rgba(255, 255, 255, .45);
    transition: background .3s ease, transform .3s ease;
}
.sg-hero-dot.is-active {
    background: var(--sg-teal);
    transform: scale(1.15);
}
.sg-hero-dot:hover { background: rgba(255, 255, 255, .85); }



/* ---------------- 四大品牌矩阵卡面（用户提供素材，覆盖在切片卡面上） ----------------
   设计稿卡片 764×1690、间隙 43px，与素材 764×1689 1:1；
   位置 left 由后端传入（量自 slice-04-brands.jpg），top/尺寸在此固定。
   top 6454 = 卡片顶（切片 03/04 交界 6456）向上 2px 留余量，宽高各外扩 2px 防切图彩边。 */
.sg-brand-art {
    position: absolute;
    top: 6454px;
    width: 766px;
    height: 1692px;
    display: block;
    object-fit: cover;
    max-width: none;
}