:root {
      --navy: #03132f;
      --navy-2: #071e45;
      --ink: #07132d;
      --muted: #5f6674;
      --gold: #f3b81f;
      --gold-2: #ffd466;
      --green: #17a16a;
      --red: #ed3f4f;
      --line: #e6e9ef;
      --panel: #f7f8fa;
      --shadow: 0 7px 18px rgba(7, 24, 57, .11);
    }

    * { box-sizing: border-box; }

    html {
      scroll-behavior: smooth;
      background: #f5f6f8;
    }

    body {
      margin: 0;
      color: var(--ink);
      background: #f5f6f8;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
      letter-spacing: 0;
    }

    button, a { font: inherit; }
    a { color: inherit; text-decoration: none; }
    img { display: block; max-width: 100%; }

    .page {
      width: min(100%, 710px);
      margin: 0 auto;
      overflow: hidden;
      background: #fff;
      box-shadow: 0 0 45px rgba(12, 25, 49, .08);
    }

    .hero {
      position: relative;
      min-height: 484px;
      overflow: hidden;
      padding: 15px 36px 18px;
      color: #fff;
      background-color: var(--navy);
      background-image: url("../image/learning-hero-background-v2.png");
      background-repeat: no-repeat;
      background-position: center top;
      background-size: 100% auto;
      isolation: isolate;
    }

    .hero::after {
      content: "";
      position: absolute;
      z-index: -2;
      inset: auto -80px -105px 44%;
      height: 270px;
      opacity: .35;
      background:
        linear-gradient(105deg, transparent 0 19%, rgba(34, 111, 210, .38) 19% 20%, transparent 20% 43%, rgba(246, 184, 31, .35) 43% 44%, transparent 44%),
        repeating-linear-gradient(90deg, transparent 0 22px, rgba(30, 91, 160, .2) 22px 27px);
      clip-path: polygon(0 82%, 12% 68%, 24% 73%, 34% 49%, 44% 56%, 56% 29%, 68% 38%, 80% 13%, 100% 0, 100% 100%, 0 100%);
    }

    .topbar {
      position: relative;
      z-index: 5;
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 43px;
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      line-height: 1;
    }

    .brand-mark {
      width: 31px;
      height: 37px;
      flex: 0 0 auto;
    }

    .brand strong {
      display: block;
      color: #fff;
      font-size: 15px;
      line-height: 1.05;
      font-weight: 800;
    }

    .brand small {
      display: block;
      margin-top: 5px;
      color: var(--gold);
      font-size: 8px;
      line-height: 1;
      font-weight: 900;
      letter-spacing: 1.6px;
    }

    .menu-button {
      display: grid;
      width: 34px;
      height: 34px;
      padding: 0;
      place-items: center;
      color: #fff;
      border: 0;
      background: transparent;
      cursor: pointer;
    }

    .hero-copy {
      position: relative;
      z-index: 3;
      width: 390px;
      max-width: 62%;
      padding-top: 24px;
    }

    h1 {
      margin: 0 0 10px;
      color: #fff;
      font-size: 34px;
      line-height: 1.07;
      font-weight: 880;
    }

    h1 .gold { color: var(--gold-2); }

    .hero-lead {
      width: 260px;
      max-width: 100%;
      margin: 0 0 14px;
      color: #f7f9ff;
      font-size: 14px;
      line-height: 1.22;
      font-weight: 590;
    }

    .cta-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
      min-width: 210px;
      min-height: 39px;
      padding: 9px 20px;
      color: #111827;
      border: 1px solid #f8c849;
      border-radius: 5px;
      background: linear-gradient(180deg, #ffd76d, #f4b61f);
      box-shadow: 0 6px 15px rgba(0, 0, 0, .2);
      font-size: 14px;
      line-height: 1;
      font-weight: 850;
      transition: transform .18s ease, filter .18s ease;
    }

    .cta-button:hover { transform: translateY(-2px); filter: brightness(1.04); }
    .cta-button:focus-visible, summary:focus-visible, .menu-button:focus-visible { outline: 3px solid rgba(255, 204, 68, .65); outline-offset: 3px; }

    .benefits {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 13px;
      width: 375px;
      max-width: 100%;
      margin-top: 18px;
    }

    .benefit { min-width: 0; }

    .benefit-icon {
      display: grid;
      width: 34px;
      height: 34px;
      margin-bottom: 6px;
      place-items: center;
      color: var(--gold);
      border-radius: 50%;
      background: rgba(9, 35, 78, .92);
    }

    .benefit h2 {
      margin: 0 0 3px;
      color: var(--gold-2);
      font-size: 12px;
      line-height: 1.08;
      font-weight: 850;
    }

    .benefit p {
      margin: 0;
      color: #f2f5fb;
      font-size: 9.5px;
      line-height: 1.18;
    }

    .social-proof {
      display: flex;
      align-items: center;
      gap: 11px;
      margin-top: 16px;
      color: #e8edf7;
      font-size: 12px;
      font-weight: 650;
    }

    .social-proof strong { color: var(--gold-2); font-size: 16px; }

    .avatar-group {
      display: flex;
      width: 148px;
      flex: 0 0 auto;
      align-items: center;
    }

    .avatar-group span {
      width: 39px;
      height: 39px;
      margin-left: -4px;
      border: 2px solid rgba(255, 255, 255, .72);
      border-radius: 50%;
      background-image: url("../image/learning-avatars.png");
      background-repeat: no-repeat;
      background-size: 400% auto;
      box-shadow: 0 2px 7px rgba(0, 0, 0, .25);
    }

    .avatar-group span:first-child { margin-left: 0; background-position: 0 25%; }
    .avatar-group span:nth-child(2) { background-position: 33.333% 25%; }
    .avatar-group span:nth-child(3) { background-position: 66.666% 25%; }
    .avatar-group span:nth-child(4) { background-position: 100% 25%; }

    .content {
      padding: 17px 25px 13px;
      background: linear-gradient(90deg, #fbfbfc 0, #fff 50%, #fbfbfc 100%);
    }

    .section-header {
      margin-bottom: 11px;
      text-align: center;
    }

    .eyebrow {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      margin: 0 0 5px;
      color: #af7b00;
      font-size: 10px;
      line-height: 1;
      font-weight: 900;
      letter-spacing: 1px;
      text-transform: uppercase;
    }

    .eyebrow::before, .eyebrow::after {
      content: "";
      width: 39px;
      height: 1px;
      background: #dca31b;
    }

    .section-header h2 {
      margin: 0;
      color: #10182a;
      font-size: 19px;
      line-height: 1.15;
      font-weight: 650;
    }

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

    .course-card {
      min-height: 202px;
      padding: 13px 16px 14px;
      border: 1px solid #eef0f4;
      border-radius: 7px;
      background: #fff;
      box-shadow: var(--shadow);
    }

    .course-top {
      display: grid;
      grid-template-columns: 50px minmax(0, 1fr);
      gap: 12px;
      align-items: center;
      min-height: 59px;
    }

    .circle-icon {
      display: grid;
      width: 50px;
      height: 50px;
      place-items: center;
      color: var(--gold-2);
      border-radius: 50%;
      background: var(--navy-2);
      box-shadow: 0 4px 10px rgba(6, 24, 62, .18);
    }

    .course-card h3 {
      margin: 0;
      color: #091329;
      font-size: 13px;
      line-height: 1.15;
      font-weight: 850;
    }

    .course-card p {
      min-height: 74px;
      margin: 11px 0 8px;
      color: #313a4d;
      font-size: 12px;
      line-height: 1.34;
    }

    .text-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: #101b34;
      font-size: 11.5px;
      font-weight: 850;
    }

    .journey {
      padding: 19px 4px 13px;
    }

    .journey-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      margin-top: 15px;
    }

    .journey-step {
      position: relative;
      min-width: 0;
      padding: 0 8px;
      text-align: center;
    }

    .journey-step:not(:last-child)::after {
      content: "";
      position: absolute;
      top: 28px;
      left: 76%;
      width: 49%;
      border-top: 2px dotted #788198;
    }

    .step-icon {
      position: relative;
      z-index: 1;
      display: grid;
      width: 58px;
      height: 58px;
      margin: 0 auto 9px;
      place-items: center;
      color: #c99610;
      border: 1px solid #efe3c2;
      border-radius: 50%;
      background: #fff;
      box-shadow: 0 5px 12px rgba(7, 28, 65, .12);
    }

    .journey-step:first-child .step-icon {
      color: #fff;
      background: var(--navy-2);
      border-color: var(--navy-2);
    }

    .step-number {
      position: absolute;
      right: -2px;
      bottom: -3px;
      display: grid;
      width: 19px;
      height: 19px;
      place-items: center;
      color: #fff;
      border: 2px solid #fff;
      border-radius: 50%;
      background: #a97d07;
      font-size: 8px;
      font-weight: 900;
    }

    .journey-step h3 {
      margin: 0 0 3px;
      font-size: 11.5px;
      line-height: 1.15;
      font-weight: 850;
    }

    .journey-step p {
      margin: 0;
      color: #333b4b;
      font-size: 10.5px;
      line-height: 1.22;
    }

    .market {
      padding-top: 6px;
    }

    .market-title {
      margin: 0 0 10px;
      color: #a97800;
      font-size: 10px;
      font-weight: 900;
      text-align: center;
      letter-spacing: 1px;
    }

    .market-panel {
      overflow: hidden;
      border: 1px solid #edf0f5;
      border-radius: 7px;
      background: rgba(255, 255, 255, .93);
      box-shadow: 0 4px 12px rgba(5, 24, 56, .05);
    }

    .market-table {
      width: 100%;
      border-collapse: collapse;
      table-layout: fixed;
    }

    .market-table th, .market-table td {
      height: 31px;
      padding: 5px 10px;
      border-bottom: 1px solid #edf0f4;
      color: #11182b;
      font-size: 10.5px;
      text-align: right;
      white-space: nowrap;
    }

    .market-table th {
      height: 28px;
      color: #4f5665;
      font-size: 8.5px;
      font-weight: 750;
    }

    .market-table th:first-child, .market-table td:first-child { width: 25%; text-align: left; }
    .market-table th:nth-child(2), .market-table td:nth-child(2) { width: 23%; text-align: center; }
    .market-table td:first-child, .market-table td:nth-child(3) { font-weight: 800; }
    .positive { color: var(--green) !important; font-weight: 800; }
    .negative { color: var(--red) !important; font-weight: 800; }

    .spark { width: 100%; height: 18px; }

    .market-foot {
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 34px;
      padding: 5px 10px;
      color: #626a79;
      font-size: 9.5px;
    }

    .market-foot a { color: #10182d; font-weight: 850; }

    .banner {
      position: relative;
      min-height: 151px;
      margin-top: 12px;
      overflow: hidden;
      border-radius: 7px;
      color: #fff;
      background-color: var(--navy);
      background-position: center;
      background-size: cover;
      box-shadow: 0 6px 16px rgba(7, 25, 57, .14);
    }

    .banner::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, rgba(2, 14, 35, .96) 0 41%, rgba(2, 14, 35, .55) 60%, rgba(2, 14, 35, .04) 100%);
    }

    .education-banner { background-image: url("../image/learning-education-banner.png"); }
    .journey-banner { background-image: url("../image/learning-journey-banner.png"); }

    .education-content, .journey-content {
      position: relative;
      z-index: 1;
      width: 49%;
      min-width: 270px;
      padding: 18px 25px;
    }

    .education-content {
      display: grid;
      grid-template-columns: 55px minmax(0, 1fr);
      gap: 14px;
      width: 53%;
    }

    .shield {
      display: grid;
      width: 52px;
      height: 52px;
      place-items: center;
      color: #fff;
      border: 1px solid #3c547d;
      border-radius: 50%;
    }

    .banner h2 {
      margin: 0 0 5px;
      color: #fff;
      font-size: 20px;
      line-height: 1.15;
      font-weight: 780;
    }

    .banner p {
      margin: 0;
      color: #f3f6fb;
      font-size: 11px;
      line-height: 1.22;
    }

    .journey-content { padding-top: 22px; }
    .journey-content p { margin-bottom: 12px; font-size: 12px; line-height: 1.35; }
    .journey-content .cta-button { min-width: 205px; min-height: 36px; }

    .faq-section {
      padding: 17px 35px 12px;
      background: #fafbfc;
    }

    .faq-section .section-header { margin-bottom: 10px; }
    .faq-section .section-header .eyebrow { display: none; }
    .faq-section .section-header h2 {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 13px;
      font-size: 17px;
    }

    .faq-section .section-header h2::before,
    .faq-section .section-header h2::after {
      content: "";
      width: 44px;
      height: 1px;
      background: #dca31b;
    }

    .faq-list {
      border: 1px solid #e5e8ee;
      border-radius: 7px;
      background: #fff;
      box-shadow: 0 5px 14px rgba(8, 27, 61, .1);
    }

    details + details { border-top: 1px solid #e5e8ee; }

    summary {
      display: grid;
      grid-template-columns: 32px minmax(0, 1fr) 22px;
      gap: 8px;
      align-items: center;
      min-height: 39px;
      padding: 5px 12px;
      list-style: none;
      cursor: pointer;
    }

    summary::-webkit-details-marker { display: none; }

    .faq-icon { display: grid; place-items: center; color: #101a31; }
    .faq-question { display: block; font-size: 12px; line-height: 1.05; font-weight: 850; }
    .faq-preview { display: block; margin-top: 2px; color: #555d6c; font-size: 10px; line-height: 1.05; }
    .chevron { display: grid; place-items: center; transition: transform .18s ease; }
    details[open] .chevron { transform: rotate(180deg); }

    .faq-answer {
      margin: -1px 34px 9px 52px;
      color: #626a79;
      font-size: 10.5px;
      line-height: 1.45;
    }

    .footer {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 18px;
      align-items: center;
      min-height: 63px;
      padding: 10px 35px 7px;
      color: #dce2ee;
      background: var(--navy);
    }

    .footer-links {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 28px;
      color: #d2d8e4;
      font-size: 8.5px;
    }

    .copyright {
      grid-column: 1 / -1;
      margin-top: -5px;
      color: #bac3d3;
      font-size: 8px;
      text-align: center;
    }

    @media (min-width: 561px) and (max-width: 700px) {
      .hero { min-height: 515px; padding-inline: 30px; }
      .hero-copy { width: 350px; max-width: 59%; padding-top: 21px; }
      h1 { font-size: 32px; }
      .hero-lead { width: 245px; font-size: 13px; }
      .benefits { width: 350px; gap: 10px; }
      .benefit h2 { font-size: 11px; }
      .benefit p { font-size: 9px; }
      .social-proof { margin-top: 13px; }
    }

    @media (max-width: 560px) {
      .hero {
        min-height: min(118vw, 682px);
        padding: 15px 20px 28px;
        background-position: 64% top;
        background-size: auto 100%;
      }
      .hero-copy { width: 61%; max-width: 250px; padding-top: 23px; }
      h1 { max-width: 250px; font-size: 28px; }
      .hero-lead { width: 225px; font-size: 12px; }
      .cta-button { min-width: 175px; min-height: 38px; padding-inline: 14px; }
      .benefits { width: 225px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px 9px; }
      .social-proof { position: relative; z-index: 2; width: 220px; flex-wrap: wrap; }
      .avatar-group { width: 132px; }
      .avatar-group span { width: 35px; height: 35px; }
      .content { padding-inline: 16px; }
      .course-grid { grid-template-columns: 1fr; }
      .course-card { min-height: 0; }
      .course-card p { min-height: 0; }
      .journey-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 22px; }
      .journey-step::after { display: none; }
      .market-panel { overflow-x: auto; }
      .market-table { min-width: 590px; }
      .banner { min-height: 210px; background-position: 64% center; }
      .banner::before { background: linear-gradient(90deg, rgba(2, 14, 35, .97) 0 64%, rgba(2, 14, 35, .24) 100%); }
      .education-content, .journey-content { width: 68%; min-width: 0; padding: 20px 18px; }
      .education-content { grid-template-columns: 1fr; }
      .shield { width: 42px; height: 42px; }
      .faq-section { padding-inline: 14px; }
      .footer { grid-template-columns: 1fr; justify-items: center; padding: 18px 16px 12px; }
      .footer-links { justify-content: center; gap: 16px; }
      .copyright { grid-column: 1; }
    }

    @media (max-width: 380px) {
      h1 { font-size: 26px; }
      .hero { min-height: 124vw; }
      .hero-copy { width: 63%; }
      .education-content, .journey-content { width: 76%; }
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      .cta-button, .chevron { transition: none; }
    }