:root {
      --blue: #2439d8;
      --blue-2: #0768f2;
      --sky: #39b7f2;
      --yellow: #ffe36b;
      --green: #2db463;
      --orange: #f47a00;
      --ink: #101b38;
      --muted: #69738d;
      --line: #e8edf8;
      --soft: #f5f8ff;
      --white: #ffffff;
      --shadow: 0 20px 60px rgba(32, 55, 135, .12);
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      color: var(--ink);
      background: #fff;
      font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans SC", Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
    }
    button, a { font: inherit; }
    a { color: inherit; text-decoration: none; }
    img { display: block; max-width: 100%; }

    .container { width: min(1180px, calc(100% - 80px)); margin: 0 auto; }
    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: var(--blue);
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 2px;
      text-transform: uppercase;
    }
    .eyebrow::before { content: ""; width: 28px; height: 4px; border-radius: 99px; background: var(--yellow); }
    h2 { margin: 18px 0 16px; font-size: 46px; line-height: 1.16; letter-spacing: -1.5px; }
    .section-lead { margin: 0; color: var(--muted); font-size: 17px; line-height: 1.9; }
    .section-head { max-width: 720px; margin-bottom: 50px; }
    .section { padding: 110px 0; }

    .topbar {
      height: 38px;
      display: flex;
      align-items: center;
      background: var(--blue);
      color: #fff;
      font-size: 13px;
      letter-spacing: .5px;
    }
    .topbar .container { display: flex; justify-content: space-between; align-items: center; }
    .topbar .mini-links { display: flex; gap: 24px; opacity: .82; }

    .nav {
      position: relative;
      z-index: 40;
      height: 86px;
      background: rgba(255,255,255,.96);
      border-bottom: 1px solid var(--line);
    }
    .nav .container { height: 100%; display: flex; align-items: center; }
    .logo { width: 235px; }
    .menu { margin-left: auto; display: flex; align-items: center; gap: 38px; font-size: 15px; font-weight: 700; }
    .menu a { position: relative; padding: 32px 0; }
    .menu a.active { color: var(--blue); }
    .menu a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 20px; height: 4px; border-radius: 9px; background: var(--yellow); }
    .nav-cta { margin-left: 34px; padding: 13px 22px; border-radius: 999px; color: #fff; background: var(--blue); font-weight: 800; box-shadow: 0 10px 22px rgba(36,57,216,.22); }
    .menu-toggle { display: none; width: 44px; height: 44px; padding: 10px; border: 0; border-radius: 14px; background: var(--soft); cursor: pointer; }
    .menu-toggle span { display: block; width: 22px; height: 2px; margin: 4px auto; border-radius: 99px; background: var(--blue); transition: transform .2s ease, opacity .2s ease; }
    .nav.menu-open .menu-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
    .nav.menu-open .menu-toggle span:nth-child(2) { opacity: 0; }
    .nav.menu-open .menu-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

    .hero {
      position: relative;
      overflow: hidden;
      min-height: 680px;
      background:
        radial-gradient(circle at 6% 20%, rgba(57,183,242,.55), transparent 28%),
        linear-gradient(120deg, #1529bf 0%, #2439d8 48%, #0768f2 100%);
      color: #fff;
    }
    .hero::before, .hero::after {
      content: "";
      position: absolute;
      border: 1px solid rgba(255,255,255,.14);
      border-radius: 52% 48% 35% 65% / 38% 46% 54% 62%;
      transform: rotate(-9deg);
    }
    .hero::before { width: 760px; height: 760px; left: -330px; top: -390px; }
    .hero::after { width: 940px; height: 700px; right: -530px; bottom: -520px; border-width: 90px; opacity: .22; }
    .hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 48% 52%; align-items: center; min-height: 680px; gap: 34px; }
    .hero-copy { padding: 62px 0; }
    .hero-kicker { display: inline-flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: 999px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); font-size: 13px; font-weight: 700; }
    .hero-kicker i { width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 5px rgba(255,227,107,.18); }
    h1 { margin: 28px 0 24px; font-size: 72px; line-height: 1.08; letter-spacing: -3px; }
    h1 span { display: inline-block; position: relative; color: var(--yellow); }
    h1 span::after { content: ""; position: absolute; left: 3px; right: 3px; bottom: -6px; height: 8px; border-radius: 99px; background: rgba(255,227,107,.36); }
    .hero-copy p { max-width: 520px; margin: 0; color: rgba(255,255,255,.82); font-size: 18px; line-height: 1.9; }
    .hero-actions { display: flex; gap: 14px; margin-top: 38px; }
    .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 142px; padding: 15px 22px; border-radius: 999px; font-weight: 800; }
    .btn-primary { color: var(--blue); background: var(--yellow); box-shadow: 0 14px 30px rgba(0,0,0,.18); }
    .btn-light { color: #fff; border: 1px solid rgba(255,255,255,.38); background: rgba(255,255,255,.08); }
    .hero-note { display: flex; align-items: center; gap: 12px; margin-top: 26px; font-size: 13px; color: rgba(255,255,255,.7); }
    .hero-note b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; }
    .hero-visual { position: relative; height: 560px; }
    .hero-photo {
      position: absolute;
      inset: 35px 0 20px 10px;
      overflow: hidden;
      border: 12px solid rgba(255,255,255,.16);
      border-radius: 46% 54% 24% 76% / 38% 25% 75% 62%;
      box-shadow: 0 34px 80px rgba(0,14,79,.34);
      background: #fff;
    }
    .hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 60% center; }
    .floating-card {
      position: absolute;
      z-index: 3;
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 16px 18px;
      background: #fff;
      color: var(--ink);
      border-radius: 18px;
      box-shadow: 0 20px 40px rgba(5,20,92,.24);
      font-size: 13px;
      font-weight: 800;
    }
    .floating-card .icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: var(--yellow); color: var(--blue); font-size: 18px; }
    .fc-1 { left: -25px; bottom: 92px; }
    .fc-2 { right: -12px; top: 85px; }
    .fc-2 .icon { background: #dff8e9; color: var(--green); }

    .benefit-bar { position: relative; z-index: 5; margin-top: -34px; }
    .benefit-grid { display: grid; grid-template-columns: repeat(4, 1fr); overflow: hidden; border-radius: 24px; background: #fff; box-shadow: var(--shadow); }
    .benefit { padding: 28px 30px; display: flex; align-items: center; gap: 15px; border-right: 1px solid var(--line); }
    .benefit:last-child { border-right: 0; }
    .benefit .num { display: grid; place-items: center; flex: 0 0 46px; height: 46px; border-radius: 16px; color: #fff; background: var(--blue); font-size: 18px; font-weight: 900; }
    .benefit:nth-child(2) .num { background: var(--sky); }
    .benefit:nth-child(3) .num { background: var(--green); }
    .benefit:nth-child(4) .num { color: var(--blue); background: var(--yellow); }
    .benefit strong { display: block; font-size: 16px; margin-bottom: 5px; }
    .benefit small { color: var(--muted); }

    .story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 76px; align-items: center; }
    .story-visual { position: relative; min-height: 580px; }
    .story-photo { position: absolute; inset: 0 50px 60px 0; overflow: hidden; border-radius: 38px 120px 38px 38px; box-shadow: var(--shadow); }
    .story-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 60% center; transform: scale(1.12); }
    .story-bubble { position: absolute; right: 0; bottom: 0; width: 250px; padding: 26px; border-radius: 30px 30px 8px 30px; background: var(--yellow); box-shadow: var(--shadow); }
    .story-bubble b { display: block; color: var(--blue); font-size: 27px; margin-bottom: 8px; }
    .story-bubble p { margin: 0; color: #26315e; line-height: 1.7; font-size: 14px; }
    .story-copy h2 { max-width: 550px; }
    .story-points { display: grid; gap: 18px; margin: 34px 0 36px; }
    .story-point { display: grid; grid-template-columns: 46px 1fr; gap: 16px; }
    .story-point .check { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 15px; background: #edf1ff; color: var(--blue); font-size: 20px; font-weight: 900; }
    .story-point strong { display: block; margin: 2px 0 6px; font-size: 17px; }
    .story-point span { color: var(--muted); line-height: 1.7; font-size: 14px; }
    .text-link { display: inline-flex; align-items: center; gap: 10px; color: var(--blue); font-weight: 900; }
    .text-link i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--blue); color: #fff; font-style: normal; }

    .method { overflow: hidden; background: var(--soft); }
    .method .section-head { margin-left: auto; margin-right: auto; text-align: center; }
    .method .eyebrow::before { display: none; }
    .method-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
    .method-card { position: relative; min-height: 310px; padding: 34px 28px; overflow: hidden; border: 1px solid #e7ecfa; border-radius: 28px; background: #fff; transition: .2s ease; }
    .method-card::after { content: ""; position: absolute; width: 130px; height: 130px; right: -58px; bottom: -60px; border-radius: 50%; background: #edf1ff; }
    .method-card:nth-child(2)::after { background: #e8f8ff; }
    .method-card:nth-child(3)::after { background: #e8f8ed; }
    .method-card:nth-child(4)::after { background: #fff8d7; }
    .method-icon { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 20px; background: var(--blue); color: #fff; font-size: 25px; font-weight: 900; box-shadow: 0 14px 28px rgba(36,57,216,.22); }
    .method-card:nth-child(2) .method-icon { background: var(--sky); }
    .method-card:nth-child(3) .method-icon { background: var(--green); }
    .method-card:nth-child(4) .method-icon { color: var(--blue); background: var(--yellow); }
    .method-card .step { margin: 26px 0 7px; color: var(--blue); font-size: 12px; font-weight: 900; letter-spacing: 1.6px; }
    .method-card h3 { margin: 0 0 13px; font-size: 22px; }
    .method-card p { margin: 0; color: var(--muted); line-height: 1.8; font-size: 14px; }

    .courses { background: #fff; }
    .courses-top { display: flex; justify-content: space-between; align-items: stretch; gap: 56px; margin-bottom: 38px; }
    .courses-top .section-head { margin-bottom: 0; }
    .courses-top .section-head h2 { font-size: 44px; }
    .tabs { display: flex; gap: 8px; padding: 6px; border-radius: 999px; background: var(--soft); }
    .tab { min-width: 76px; padding: 10px 16px; text-align: center; border-radius: 999px; color: var(--muted); font-size: 14px; font-weight: 800; }
    .tab.active { color: #fff; background: var(--blue); box-shadow: 0 8px 18px rgba(36,57,216,.22); }
    .coverage-board { align-self: center; width: 500px; padding: 20px 22px; border: 1px solid #e5eafa; border-radius: 26px; background: var(--soft); box-shadow: 0 14px 35px rgba(31,57,123,.08); }
    .coverage-row { display: grid; grid-template-columns: 78px 1fr; align-items: center; gap: 14px; }
    .coverage-row + .coverage-row { margin-top: 13px; padding-top: 13px; border-top: 1px solid #dde5f7; }
    .coverage-label { color: var(--blue); font-size: 13px; font-weight: 900; letter-spacing: .8px; }
    .coverage-chips { display: flex; flex-wrap: wrap; gap: 8px; }
    .coverage-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 58px; padding: 8px 13px; border-radius: 999px; color: #32405f; background: #fff; font-size: 13px; font-weight: 800; box-shadow: 0 4px 12px rgba(31,57,123,.06); }
    .coverage-chip.primary { color: #fff; background: var(--blue); }
    .coverage-chip.subject::before { content: ""; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: var(--sky); }
    .coverage-chip.subject:nth-child(2)::before { background: var(--yellow); }
    .coverage-chip.subject:nth-child(3)::before { background: var(--green); }
    .coverage-chip.subject:nth-child(4)::before { background: var(--blue); }
    .coverage-chip.subject:nth-child(5)::before { background: #f39a43; }
    .course-panel { position: relative; overflow: hidden; padding: 58px; border-radius: 38px; color: #fff; background: linear-gradient(135deg, #1c31c8, #0768f2); box-shadow: var(--shadow); }
    .course-panel::before { content: "NEW THINKING"; position: absolute; right: -20px; top: -25px; color: rgba(255,255,255,.055); font-size: 118px; font-weight: 1000; letter-spacing: -6px; }
    .course-panel-head { position: relative; z-index: 2; display: flex; align-items: end; justify-content: space-between; margin-bottom: 35px; }
    .course-panel h3 { margin: 0; max-width: 500px; font-size: 34px; line-height: 1.3; }
    .course-panel-head p { max-width: 410px; margin: 0; color: rgba(255,255,255,.72); line-height: 1.8; font-size: 14px; }
    .course-cards { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
    .course-card { min-height: 250px; padding: 28px; border: 1px solid rgba(255,255,255,.17); border-radius: 24px; background: rgba(255,255,255,.11); backdrop-filter: blur(4px); }
    .course-card .course-tag { display: inline-flex; padding: 7px 11px; border-radius: 999px; color: var(--blue); background: var(--yellow); font-size: 12px; font-weight: 900; }
    .course-card:nth-child(2) .course-tag { color: #08743e; background: #dff8e9; }
    .course-card:nth-child(3) .course-tag { color: #1c31c8; background: #dff4ff; }
    .course-card h4 { margin: 26px 0 15px; font-size: 24px; }
    .course-card ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; color: rgba(255,255,255,.78); font-size: 14px; }
    .course-card li::before { content: "✓"; margin-right: 9px; color: var(--yellow); font-weight: 900; }

    .teacher { background: #f9fbff; }
    .teacher-grid { display: grid; grid-template-columns: 45% 55%; gap: 54px; align-items: stretch; }
    .teacher-copy { padding: 38px 20px 38px 0; }
    .teacher-copy h2 { font-size: 50px; }
    .teacher-quote { margin: 34px 0; padding: 26px 28px; border-left: 5px solid var(--yellow); border-radius: 0 20px 20px 0; background: #fff; box-shadow: 0 14px 34px rgba(24,50,133,.08); color: #34405e; font-size: 18px; line-height: 1.8; }
    .teacher-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
    .teacher-check { display: flex; align-items: center; gap: 10px; color: #35415f; font-weight: 700; font-size: 14px; }
    .teacher-check i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 10px; background: #edf1ff; color: var(--blue); font-style: normal; }
    .teacher-board { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
    .teacher-card { position: relative; overflow: hidden; min-height: 270px; padding: 30px; border-radius: 28px; background: #fff; box-shadow: 0 14px 34px rgba(24,50,133,.08); }
    .teacher-card.main { grid-column: 1 / -1; min-height: 300px; color: #fff; background: linear-gradient(120deg, rgba(18,35,153,.86), rgba(7,104,242,.45)), url('../assets/hero-classroom.png') center / cover no-repeat; }
    .teacher-card .pill { display: inline-flex; padding: 7px 11px; border-radius: 999px; background: var(--yellow); color: var(--blue); font-size: 12px; font-weight: 900; }
    .teacher-card.main h3 { max-width: 400px; margin: 88px 0 12px; font-size: 32px; line-height: 1.3; }
    .teacher-card.main p { max-width: 430px; margin: 0; color: rgba(255,255,255,.78); line-height: 1.8; }
    .teacher-card.mini { min-height: 210px; }
    .teacher-card.mini .round-icon { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 18px; color: #fff; background: var(--green); font-size: 22px; font-weight: 900; }
    .teacher-card.mini:nth-child(3) .round-icon { color: var(--blue); background: var(--yellow); }
    .teacher-card.mini h4 { margin: 24px 0 10px; font-size: 20px; }
    .teacher-card.mini p { margin: 0; color: var(--muted); line-height: 1.7; font-size: 13px; }

    .journey { overflow: hidden; }
    .journey .section-head { margin: 0 auto 56px; text-align: center; }
    .journey .eyebrow::before { display: none; }
    .timeline { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
    .timeline::before { content: ""; position: absolute; left: 10%; right: 10%; top: 28px; height: 3px; background: linear-gradient(90deg, var(--sky), var(--blue), var(--green)); opacity: .32; }
    .time-item { position: relative; z-index: 2; text-align: center; }
    .time-num { display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto 22px; border: 8px solid #eef2ff; border-radius: 50%; color: #fff; background: var(--blue); font-weight: 900; box-shadow: 0 10px 24px rgba(36,57,216,.2); }
    .time-item:nth-child(2) .time-num { background: var(--sky); }
    .time-item:nth-child(3) .time-num { background: var(--green); }
    .time-item:nth-child(4) .time-num { color: var(--blue); background: var(--yellow); }
    .time-item:nth-child(5) .time-num { background: var(--orange); }
    .time-item h4 { margin: 0 0 10px; font-size: 18px; }
    .time-item p { margin: 0 auto; max-width: 170px; color: var(--muted); font-size: 13px; line-height: 1.7; }

    .moments { padding: 105px 0; background: #1529bf; color: #fff; }
    .moments .section-head { max-width: none; display: flex; justify-content: space-between; align-items: end; }
    .moments .eyebrow { color: var(--yellow); }
    .moments .section-lead { color: rgba(255,255,255,.7); max-width: 470px; }
    .mosaic { display: grid; grid-template-columns: 1.25fr .75fr .75fr; grid-template-rows: 245px 245px; gap: 18px; }
    .tile { position: relative; overflow: hidden; padding: 28px; border-radius: 28px; background: rgba(255,255,255,.1); }
    .tile.photo { grid-row: 1 / 3; padding: 0; }
    .tile.photo img { width: 100%; height: 100%; object-fit: cover; object-position: 57% center; }
    .tile.photo::after { content: "真实的课堂，清晰的陪伴"; position: absolute; left: 24px; right: 24px; bottom: 24px; padding: 16px 18px; border-radius: 18px; color: #fff; background: rgba(17,28,92,.72); backdrop-filter: blur(8px); font-size: 18px; font-weight: 800; }
    .tile h4 { margin: 0 0 10px; font-size: 24px; }
    .tile p { margin: 0; color: rgba(255,255,255,.7); font-size: 13px; line-height: 1.8; }
    .tile.yellow { color: var(--blue); background: var(--yellow); }
    .tile.yellow p { color: #4b5793; }
    .tile.green { background: var(--green); }
    .tile.sky { background: #2e8eed; }
    .tile.white { color: var(--ink); background: #fff; }
    .tile.white p { color: var(--muted); }
    .tile .big-mark { position: absolute; right: 18px; bottom: -22px; font-size: 100px; font-weight: 1000; opacity: .12; }

    .cta-wrap { padding: 110px 0 80px; }
    .cta-panel { position: relative; display: grid; grid-template-columns: 1.35fr .85fr; align-items: center; gap: 70px; min-height: 390px; overflow: hidden; padding: 70px 80px; border-radius: 42px; color: #fff; background: linear-gradient(125deg, #2439d8, #0768f2); box-shadow: 0 30px 80px rgba(36,57,216,.2); }
    .cta-panel::before { content: ""; position: absolute; width: 420px; height: 420px; right: -90px; top: -160px; border: 90px solid rgba(255,255,255,.08); border-radius: 46% 54% 38% 62%; transform: rotate(-18deg); }
    .cta-panel .cta-copy { position: relative; z-index: 2; }
    .cta-panel .eyebrow { color: var(--yellow); }
    .cta-panel h2 { margin-top: 20px; font-size: 52px; }
    .cta-panel p { color: rgba(255,255,255,.75); line-height: 1.8; }
    .cta-panel .hero-actions { margin-top: 30px; }
    .cta-side { position: relative; z-index: 2; padding: 28px; border: 1px solid rgba(255,255,255,.22); border-radius: 30px; background: rgba(255,255,255,.12); box-shadow: 0 20px 50px rgba(0,25,90,.18); backdrop-filter: blur(8px); }
    .cta-side-tag { display: inline-flex; padding: 7px 12px; border-radius: 999px; color: var(--blue); background: var(--yellow); font-size: 12px; font-weight: 900; }
    .cta-side h3 { margin: 18px 0 20px; font-size: 22px; line-height: 1.45; }
    .cta-steps { display: grid; gap: 10px; }
    .cta-step { display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 16px; background: rgba(255,255,255,.1); font-size: 13px; font-weight: 700; }
    .cta-step b { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 12px; color: var(--blue); background: #fff; font-size: 12px; }

    footer { padding: 60px 0 34px; background: #0e1734; color: #fff; }
    .footer-grid { display: grid; grid-template-columns: 1.3fr .8fr .8fr 1fr; gap: 48px; }
    .footer-logo { width: 210px; padding: 10px; border-radius: 12px; background: #fff; }
    .footer-about { margin: 20px 0 0; color: rgba(255,255,255,.58); font-size: 13px; line-height: 1.8; }
    footer h4 { margin: 8px 0 20px; font-size: 15px; }
    .footer-links { display: grid; gap: 12px; color: rgba(255,255,255,.58); font-size: 13px; }
    .footer-note { padding: 18px; border: 1px solid rgba(255,255,255,.12); border-radius: 18px; color: rgba(255,255,255,.62); font-size: 12px; line-height: 1.7; }
    .copyright { display: flex; justify-content: space-between; margin-top: 46px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.36); font-size: 12px; }

    .concept-ribbon { position: fixed; right: 18px; bottom: 18px; z-index: 50; padding: 9px 12px; border-radius: 10px; color: #fff; background: rgba(16,27,56,.84); font-size: 11px; backdrop-filter: blur(6px); }

    /* 仅用于导出“整页一张图”的紧凑画幅；正常浏览版不受影响。 */
    body.compact .section { padding: 56px 0; }
    body.compact h2 { margin-top: 14px; font-size: 40px; }
    body.compact .section-head { margin-bottom: 34px; }
    body.compact .hero,
    body.compact .hero-grid { min-height: 560px; }
    body.compact .hero-visual { height: 460px; }
    body.compact h1 { margin-top: 22px; font-size: 60px; }
    body.compact .story-visual { min-height: 400px; }
    body.compact .story-photo { bottom: 40px; }
    body.compact .story-points { gap: 12px; margin: 24px 0 26px; }
    body.compact .method-card { min-height: 225px; padding: 22px; }
    body.compact .method-card .step { margin-top: 18px; }
    body.compact .courses-top { margin-bottom: 30px; }
    body.compact .course-panel { padding: 36px; }
    body.compact .course-card { min-height: 185px; padding: 21px; }
    body.compact .course-card h4 { margin: 18px 0 12px; }
    body.compact .teacher-copy { padding-top: 20px; padding-bottom: 20px; }
    body.compact .teacher-copy h2 { font-size: 42px; }
    body.compact .teacher-quote { margin: 22px 0; padding: 20px 22px; }
    body.compact .teacher-card.main { min-height: 220px; }
    body.compact .teacher-card.main h3 { margin-top: 40px; }
    body.compact .teacher-card.mini { min-height: 150px; padding: 20px; }
    body.compact .teacher-card.mini h4 { margin-top: 16px; }
    body.compact .journey { display: none; }
    body.compact .moments { display: none; }
    body.compact .cta-wrap { padding: 54px 0 38px; }
    body.compact .cta-panel { min-height: 280px; padding: 40px 60px; }
    body.compact .cta-panel h2 { font-size: 43px; }
    body.compact .cta-side { padding: 22px; }
    body.compact .cta-side h3 { margin: 14px 0 16px; font-size: 19px; }
    body.compact footer { padding: 40px 0 22px; }
    body.compact .copyright { margin-top: 28px; }
    body.compact .concept-ribbon { display: none; }

    /* 板块图导出模式：每次只渲染一个完整板块，避免长页面截图串图。 */
    body.export-view { overflow: hidden; }
    body.export-view .concept-ribbon { display: none; }
    body.export-view > .topbar,
    body.export-view > .nav,
    body.export-view > footer { display: none; }
    body.export-view main > * { display: none; }
    body.export-hero > .topbar,
    body.export-hero > .nav { display: block; }
    body.export-hero main > .hero,
    body.export-hero main > .benefit-bar { display: block; }
    body.export-story main > #story,
    body.export-method main > #method,
    body.export-courses main > #courses,
    body.export-teacher main > #teacher,
    body.export-journey main > .journey,
    body.export-moments main > .moments,
    body.export-contact main > #contact { display: block; }
    body.export-footer > main,
    body.export-footer > .topbar,
    body.export-footer > .nav { display: none; }
    body.export-footer > footer { display: block; }

    @media (max-width: 1024px) {
      .container { width: min(920px, calc(100% - 48px)); }
      .menu { gap: 20px; }
      .nav-cta { margin-left: 20px; padding-inline: 18px; }
      .logo { width: 205px; }
      h1 { font-size: 58px; }
      .hero-grid { grid-template-columns: 46% 54%; }
      .benefit { padding: 24px 20px; }
      .story-grid { gap: 46px; }
      .method-grid { grid-template-columns: repeat(2, 1fr); }
      .courses-top { flex-direction: column; gap: 28px; }
      .coverage-board { width: 100%; }
      .teacher-grid { grid-template-columns: 1fr; }
      .teacher-copy { padding-right: 0; }
      .cta-panel { gap: 38px; padding: 60px; }
      .cta-panel h2 { font-size: 44px; }
      .footer-grid { grid-template-columns: 1.2fr 1fr 1fr; }
      .footer-grid > :last-child { grid-column: 1 / -1; }
    }

    @media (max-width: 760px) {
      .container { width: calc(100% - 32px); }
      .section { padding: 72px 0; }
      h2, .courses-top .section-head h2 { font-size: 34px; letter-spacing: -1px; }
      .section-lead { font-size: 15px; }
      .topbar .mini-links { display: none; }
      .nav { height: 72px; }
      .logo { width: 178px; }
      .menu-toggle { display: block; margin-left: auto; }
      .menu {
        position: absolute;
        left: 16px;
        right: 16px;
        top: 64px;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        overflow: hidden;
        padding: 10px;
        border: 1px solid var(--line);
        border-radius: 20px;
        background: #fff;
        box-shadow: var(--shadow);
      }
      .nav.menu-open .menu { display: flex; }
      .menu a { padding: 14px 16px; border-radius: 12px; }
      .menu a.active { background: var(--soft); }
      .menu a.active::after { display: none; }
      .nav-cta { display: none; }
      .hero, .hero-grid { min-height: auto; }
      .hero-grid { grid-template-columns: 1fr; gap: 0; padding: 64px 0 74px; }
      .hero-copy { padding: 0; }
      h1 { margin-top: 22px; font-size: 46px; letter-spacing: -2px; }
      .hero-copy p { font-size: 16px; }
      .hero-visual { height: 370px; margin-top: 26px; }
      .hero-photo { inset: 20px 0 20px; }
      .fc-1 { left: 0; bottom: 34px; }
      .fc-2 { right: 0; top: 44px; }
      .benefit-bar { margin-top: -24px; }
      .benefit-grid { grid-template-columns: 1fr 1fr; }
      .benefit { padding: 20px 16px; }
      .benefit:nth-child(2) { border-right: 0; }
      .benefit:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
      .story-grid { grid-template-columns: 1fr; gap: 48px; }
      .story-visual { min-height: 430px; }
      .story-photo { inset: 0 30px 54px 0; border-radius: 28px 80px 28px 28px; }
      .story-bubble { width: 225px; padding: 22px; }
      .method-grid { grid-template-columns: 1fr; }
      .method-card { min-height: auto; }
      .courses-top { margin-bottom: 28px; }
      .coverage-row { grid-template-columns: 1fr; gap: 9px; }
      .coverage-board { padding: 18px; }
      .course-panel { padding: 28px 20px; border-radius: 28px; }
      .course-panel-head { flex-direction: column; align-items: flex-start; gap: 18px; }
      .course-panel h3 { font-size: 28px; }
      .course-cards { grid-template-columns: 1fr; }
      .course-card { min-height: auto; }
      .teacher-copy h2 { font-size: 36px; }
      .teacher-board { grid-template-columns: 1fr; }
      .teacher-card.main { grid-column: auto; }
      .teacher-checks { grid-template-columns: 1fr; }
      .timeline { grid-template-columns: 1fr; gap: 26px; }
      .timeline::before { left: 28px; right: auto; top: 24px; bottom: 24px; width: 3px; height: auto; }
      .time-item { display: grid; grid-template-columns: 58px 1fr; column-gap: 18px; text-align: left; }
      .time-num { grid-row: 1 / 3; margin: 0; }
      .time-item h4 { align-self: end; }
      .time-item p { max-width: none; margin: 0; }
      .moments .section-head { display: block; }
      .moments .section-lead { margin-top: 18px; }
      .mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: 360px 210px 210px; }
      .tile.photo { grid-column: 1 / -1; grid-row: auto; }
      .tile { padding: 22px; }
      .tile h4 { font-size: 20px; }
      .cta-wrap { padding: 72px 0 56px; }
      .cta-panel { grid-template-columns: 1fr; gap: 34px; padding: 42px 24px; border-radius: 30px; }
      .cta-panel h2 { font-size: 36px; }
      .cta-side { padding: 22px; }
      .footer-grid { grid-template-columns: 1fr; gap: 34px; }
      .footer-grid > :last-child { grid-column: auto; }
      .copyright { flex-direction: column; gap: 10px; }
      .concept-ribbon { display: none; }
    }

    @media (max-width: 430px) {
      h1 { font-size: 40px; }
      .hero-actions { flex-direction: column; align-items: stretch; }
      .btn { width: 100%; }
      .hero-visual { height: 320px; }
      .floating-card { padding: 12px; font-size: 11px; }
      .floating-card .icon { width: 30px; height: 30px; }
      .benefit-grid { grid-template-columns: 1fr; }
      .benefit { border-right: 0; border-bottom: 1px solid var(--line); }
      .benefit:last-child { border-bottom: 0; }
      .mosaic { grid-template-columns: 1fr; grid-template-rows: 330px repeat(4, 190px); }
      .tile.photo { grid-column: auto; }
    }