:root {
      --red: #0078fe;
      --red-dark: #0078fe;
      --red-soft: #edf6ff;
      --ink: #111827;
      --text: #1f2937;
      --muted: #5b6472;
      --line: #d9e8f8;
      --paper: #ffffff;
      --soft: #f4f9ff;
      --teal: #0078fe;
      --teal-soft: #edf6ff;
      --blue: #0078fe;
      --blue-soft: #edf6ff;
      --shadow: 0 16px 36px rgba(0, 120, 254, 0.08);
    }

    * { box-sizing: border-box; }

    html { scroll-behavior: smooth; }

    body {
      margin: 0;
      color: var(--ink);
      font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
      background: #ffffff;
      line-height: 1.7;
    }

    .desktop-nav {
      position: sticky;
      top: 0;
      z-index: 30;
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: min(1080px, calc(100% - 32px));
      min-height: 72px;
      margin: 18px auto 0;
      padding: 12px 18px;
      background: rgba(255, 255, 255, 0.96);
      border: 1px solid rgba(0, 120, 254, 0.16);
      border-radius: 14px;
      box-shadow: 0 12px 28px rgba(0, 120, 254, 0.08);
      backdrop-filter: blur(12px);
    }

    .desktop-nav-logo,
    .mobile-nav-logo {
      display: block;
      width: 188px;
      height: 46px;
      object-fit: contain;
      object-position: left center;
      filter: brightness(0) saturate(100%) invert(35%) sepia(85%) saturate(3500%) hue-rotate(204deg) brightness(101%) contrast(101%);
    }

    .desktop-nav-actions {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .desktop-nav-date {
      padding: 7px 10px;
      color: var(--red-dark);
      background: var(--red-soft);
      border: 1px solid #cfe5ff;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 900;
      white-space: nowrap;
    }

    .nav-cta,
    .submit-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 38px;
      padding: 9px 16px;
      color: #fff;
      background: var(--red);
      border: 0;
      border-radius: 999px;
      box-shadow: 0 6px 16px rgba(0, 120, 254, 0.2);
      font-size: 14px;
      font-weight: 900;
      text-decoration: none;
      cursor: pointer;
    }

    .mobile-nav { display: none; }

    .page {
      width: min(1080px, calc(100% - 32px));
      margin: 18px auto 28px;
      background: #ffffff;
      border-radius: 24px;
      box-shadow: var(--shadow);
      overflow: hidden;
      border: 1px solid rgba(0, 120, 254, 0.12);
    }

    .hero {
      position: relative;
      padding: 42px 52px 36px;
      background: #ffffff;
      border-bottom: 1px solid var(--line);
      overflow: hidden;
    }

    .hero::after {
      content: "";
      position: absolute;
      inset: 0;
      background: url('assets/sns.jpg') center right / cover no-repeat;
      opacity: 0.5;
      pointer-events: none;
    }

    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.85) 45%, rgba(255,255,255,.45) 70%, rgba(255,255,255,.15) 100%);
      pointer-events: none;
      z-index: 1;
    }

    .hero > * { position: relative; z-index: 2; }

    .eyebrow {
      display: inline-flex;
      width: fit-content;
      padding: 7px 13px;
      color: #fff;
      background: var(--red);
      border-radius: 8px;
      font-size: 14px;
      font-weight: 800;
      margin-bottom: 14px;
    }

    h1 {
      margin: 0;
      color: #0078fe;
      font-size: clamp(38px, 5vw, 62px);
      line-height: 1.08;
      font-weight: 900;
      text-shadow: 0 2px 8px rgba(255,255,255,.6);
    }

    .subtitle {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin: 20px 0 0;
      padding: 0;
      list-style: none;
    }

    .subtitle li {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      color: var(--ink);
      background: rgba(255, 255, 255, 0.78);
      border: 1px solid #cfe5ff;
      border-radius: 999px;
      font-size: clamp(15px, 1.8vw, 18px);
      font-weight: 800;
    }

    .stats {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
      margin-top: 28px;
    }

    .stat {
      display: grid;
      grid-template-columns: auto 1fr;
      align-items: flex-start;
      gap: 13px;
      min-height: 118px;
      padding: 20px 18px;
      background: #ffffff;
      border: 1px solid #d9e8f8;
      border-radius: 8px;
      box-shadow: 0 10px 20px rgba(0,120,254,.06);
    }

    .stat-icon,
    .module-icon {
      display: grid;
      place-items: center;
      width: 46px;
      height: 46px;
      color: var(--red);
      background: var(--red-soft);
      border: 1px solid #cfe5ff;
      border-radius: 8px;
    }

    svg {
      width: 1em;
      height: 1em;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      fill: none;
    }

    .stat-icon svg,
    .module-icon svg { width: 24px; height: 24px; }

    .stat:nth-child(2) .stat-icon { color: var(--blue); background: var(--blue-soft); border-color: #cfe5ff; }
    .stat:nth-child(3) .stat-icon { color: var(--teal); background: var(--teal-soft); border-color: #cfe5ff; }

    .stat strong {
      display: block;
      color: var(--red-dark);
      font-size: 23px;
      line-height: 1.1;
      margin-bottom: 8px;
    }

    .stat span {
      color: var(--muted);
      font-size: 15px;
      line-height: 1.55;
    }

    .content { padding: 38px 52px 48px; }

    .section-head {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 24px;
      margin-bottom: 18px;
    }

    .section-title {
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 0;
      color: var(--red-dark);
      font-size: 26px;
      line-height: 1.25;
      font-weight: 900;
    }

    .section-title::before {
      content: "";
      width: 6px;
      height: 30px;
      background: var(--red);
      border-radius: 999px;
    }

    .section-note {
      margin: 0;
      color: var(--muted);
      font-size: 15px;
      text-align: right;
    }

    .flow {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 10px;
      margin-bottom: 36px;
      padding: 16px;
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: 8px;
    }

    .flow span {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      min-height: 42px;
      padding: 8px 10px;
      color: var(--ink);
      background: #fff;
      border: 1px solid #cfe5ff;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 800;
      white-space: nowrap;
    }

    .flow-icon {
      display: grid;
      place-items: center;
      width: 19px;
      height: 19px;
      color: #fff;
      background: var(--red);
      border-radius: 50%;
      font-size: 11px;
      line-height: 1;
    }

    .modules {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 20px;
    }

    .module {
      min-height: 304px;
      padding: 22px 21px 21px;
      background: #fff;
      border: 1px solid var(--line);
      border-top: 4px solid var(--red);
      border-radius: 8px;
      box-shadow: 0 10px 22px rgba(0,120,254,.06);
    }

    .module:nth-child(3n + 2) { border-top-color: var(--blue); }
    .module:nth-child(3n) { border-top-color: var(--teal); }
    .module:nth-child(3n + 2) .module-icon { color: var(--blue); background: var(--blue-soft); border-color: #cfe5ff; }
    .module:nth-child(3n) .module-icon { color: var(--teal); background: var(--teal-soft); border-color: #cfe5ff; }

    .module-head {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 15px;
    }

    .stage {
      color: var(--red);
      font-size: 13px;
      font-weight: 800;
      line-height: 1.3;
    }

    .module h3 {
      margin: 0 0 8px;
      color: var(--ink);
      font-size: 21px;
      line-height: 1.25;
      font-weight: 900;
    }

    .module h4 {
      display: inline-flex;
      width: fit-content;
      margin: 0 0 14px;
      padding: 4px 9px;
      color: var(--red-dark);
      background: var(--red-soft);
      border-radius: 6px;
      font-size: 14px;
      line-height: 1.4;
      font-weight: 800;
    }

    .module p {
      margin: 0;
      color: var(--muted);
      font-size: 15px;
    }

    .module strong { color: var(--ink); font-weight: 800; }

    .outcome-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 18px;
      margin-top: 34px;
    }

    .summary,
    .change {
      padding: 24px;
      border-radius: 8px;
      border: 1px solid var(--line);
      background: var(--paper);
    }

    .change {
      background: #f4f9ff;
      border-color: #cfe5ff;
    }

    .summary h2,
    .change h2 {
      margin: 0 0 10px;
      color: var(--red-dark);
      font-size: 24px;
      line-height: 1.3;
    }

    .change h2 { color: var(--red-dark); }

    .summary p,
    .change-list li {
      color: var(--muted);
      font-size: 16px;
    }

    .change-list {
      display: grid;
      gap: 12px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .change-list li {
      position: relative;
      padding-left: 22px;
      color: var(--text);
      line-height: 1.65;
    }

    .change-list li::before {
      content: "";
      position: absolute;
      left: 0;
      top: .72em;
      width: 8px;
      height: 8px;
      background: var(--red);
      border-radius: 50%;
      box-shadow: 0 0 0 4px rgba(0,120,254,.12);
    }

    .title-icon {
      display: inline-flex;
      width: 1.25em;
      height: 1.25em;
      margin-left: 8px;
      color: var(--red);
      vertical-align: -0.18em;
    }

    .change .title-icon { color: var(--teal); }

    @media (max-width: 900px) {
      .desktop-nav { display: none; }
      .hero, .content { padding-left: 28px; padding-right: 28px; }
      .modules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .stats, .outcome-grid, .form-grid { grid-template-columns: 1fr; }
      .section-head { align-items: flex-start; flex-direction: column; gap: 8px; }
      .section-note { text-align: left; }
    }

    @media (max-width: 620px) {
      body { background: #ffffff; line-height: 1.65; }

      .mobile-nav {
        position: sticky;
        top: 0;
        z-index: 20;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        min-height: 70px;
        padding: 13px 14px;
        background: rgba(255,255,255,.98);
        border-bottom: 1px solid rgba(0,120,254,.18);
        box-shadow: 0 8px 22px rgba(0,120,254,.1);
        backdrop-filter: blur(10px);
      }

      .mobile-nav-logo {
        display: block;
        width: 162px;
        height: 40px;
        object-fit: contain;
        object-position: left center;
      }

      .page {
        width: 100%;
        margin: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
      }

      .hero, .content { padding-left: 16px; padding-right: 16px; }
      .hero { padding-top: 22px; padding-bottom: 26px; }
      .content { padding-top: 28px; padding-bottom: 34px; }
      h1 { font-size: clamp(36px, 12vw, 44px); }

      /* 手机端 hero 背景图：缩小到顶部装饰条，整体淡化 */
      .hero::after {
        background-size: 220px auto;
        background-position: right -20px top -30px;
        background-repeat: no-repeat;
        opacity: 0.22;
      }
      .hero::before {
        background: linear-gradient(180deg, rgba(255,255,255,.88) 0%, rgba(255,255,255,.7) 40%, rgba(255,255,255,.4) 100%);
      }

      .subtitle { display: grid; grid-template-columns: 1fr; gap: 8px; }
      .subtitle li { width: 100%; border-radius: 8px; font-size: 15px; }
      .stats { gap: 10px; margin-top: 22px; }
      .stat { min-height: auto; padding: 16px; }
      .stat strong { font-size: 20px; }

      .flow {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        padding: 12px;
        margin-bottom: 24px;
      }

      .flow span {
        width: 100%;
        min-height: 40px;
        font-size: 13.5px;
        white-space: normal;
      }

      .modules { grid-template-columns: 1fr; gap: 14px; }
      .module { min-height: auto; padding: 18px 17px 17px; }
      .module h3 { font-size: 20px; }
      .module p { font-size: 14.5px; }

      .summary, .change, .core-signup-form { padding: 20px; }
      .summary h2, .change h2, .core-signup-form h2 { font-size: 22px; }
    }

    /* 报名表单标题统一改为品牌蓝 */
    .core-signup-form h2,
    .core-signup-form label {
      color: #0078fe !important;
    }

    /* 上课方式单选选项文字恢复黑色 */
    .core-signup-form .core-choice {
      color: #111827 !important;
    }