:root {
      --bg: #f6f8fb;
      --surface: #ffffff;
      --surface-soft: #eef3f9;
      --text: #142035;
      --muted: #526174;
      --line: #d9e2ee;
      --deep: #0f213f;
      --deep-2: #16345e;
      --primary: #2463c6;
      --primary-strong: #184db0;
      --accent: #c95d38;
      --amber: #e8ad42;
      --green: #0f766e;
      --container: 1140px;
      --shadow: 0 18px 44px rgba(23, 42, 72, 0.12);
      --soft-shadow: 0 12px 28px rgba(23, 42, 72, 0.09);
      --radius: 8px;
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      color: var(--text);
      background:
        radial-gradient(900px 420px at 100% 0%, rgba(36, 99, 198, 0.1) 0%, rgba(36, 99, 198, 0) 65%),
        linear-gradient(180deg, #fbfcff 0%, var(--bg) 100%);
      font-family: "Noto Sans JP", "Inter", sans-serif;
      font-weight: 600;
      line-height: 1.78;
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
    }

    a {
      color: inherit;
      text-underline-offset: 3px;
    }

    img {
      display: block;
      max-width: 100%;
    }

    :focus-visible {
      outline: 3px solid rgba(31, 95, 214, 0.4);
      outline-offset: 3px;
      border-radius: 8px;
    }

    .container {
      width: min(var(--container), calc(100% - 32px));
      margin-inline: auto;
    }

    .topbar {
      position: sticky;
      top: 0;
      z-index: 300;
      background: linear-gradient(135deg, var(--deep) 0%, #0c1a30 100%);
      border-bottom: 1px solid rgba(255, 255, 255, 0.15);
      box-shadow: 0 10px 24px rgba(6, 15, 30, 0.35);
    }

    .topbar-inner {
      min-height: 68px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: #f4f8ff;
      text-decoration: none;
      font-weight: 900;
      font-size: 1.02rem;
      white-space: nowrap;
    }

    .brand-mark {
      width: 34px;
      height: 34px;
      border-radius: 10px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 0.8rem;
      color: #fff;
      font-weight: 900;
      letter-spacing: 0.02em;
      background: linear-gradient(140deg, #3f87ff 0%, #2059c0 100%);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
    }

    .nav-links {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      flex-wrap: wrap;
      gap: 10px;
    }

    .nav-links a {
      color: #eef5ff;
      text-decoration: none;
      min-height: 40px;
      padding: 0 12px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 0.88rem;
      font-weight: 800;
      border: 1px solid rgba(191, 219, 254, 0.24);
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.08);
      white-space: nowrap;
    }

    .nav-links a:hover {
      color: #ffffff;
      background: rgba(255, 255, 255, 0.15);
      border-color: rgba(191, 219, 254, 0.42);
      text-decoration: none;
    }

    .nav-links .cta-link {
      border-color: rgba(255, 255, 255, 0.42);
      background: linear-gradient(135deg, #356ee8 0%, #1f5fd6 100%);
      color: #fff;
      box-shadow: 0 8px 20px rgba(31, 95, 214, 0.28);
    }

    .hero {
      position: relative;
      overflow: hidden;
      color: #f5f9ff;
      background:
        linear-gradient(90deg, rgba(7, 17, 34, 0.92) 0%, rgba(10, 25, 48, 0.86) 43%, rgba(10, 24, 45, 0.48) 70%, rgba(8, 18, 35, 0.42) 100%),
        url("../img/home-lecture-room.webp") center / cover no-repeat,
        #0f213f;
    }

    .hero::after {
      content: "";
      position: absolute;
      inset: auto 0 0;
      height: 150px;
      background: linear-gradient(180deg, rgba(246, 248, 251, 0) 0%, rgba(246, 248, 251, 0.96) 100%);
      pointer-events: none;
    }

    .hero-inner {
      position: relative;
      z-index: 1;
      min-height: min(690px, calc(100svh - 84px));
      padding: clamp(58px, 8vw, 96px) 0 clamp(66px, 8vw, 100px);
      display: flex;
      align-items: center;
    }

    .hero-copy {
      width: min(900px, 100%);
    }

    .kicker {
      margin: 0 0 15px;
      display: inline-flex;
      align-items: center;
      min-height: 32px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.34);
      background: rgba(255, 255, 255, 0.14);
      color: #edf4ff;
      padding: 0 13px;
      font-size: 0.77rem;
      font-weight: 900;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    h1,
    h2,
    h3,
    p {
      margin: 0;
    }

    h1,
    h2,
    h3 {
      line-height: 1.35;
      letter-spacing: 0;
    }

    h1 {
      max-width: 13.5em;
      font-size: clamp(2.36rem, 4.35vw, 4rem);
      font-weight: 900;
      text-wrap: balance;
    }

    .hero-title-line {
      display: block;
      white-space: nowrap;
    }

    .hero-title-keep {
      white-space: nowrap;
    }

    .hero-title-mobile-line {
      display: inline;
    }

    .hero-lead {
      margin-top: 18px;
      max-width: 58ch;
      color: #dce8ff;
      font-size: clamp(1rem, 1.45vw, 1.14rem);
      line-height: 1.92;
    }

    .hero-points {
      margin: 22px 0 0;
      padding: 0;
      list-style: none;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      max-width: 760px;
    }

    .hero-points li {
      min-height: 86px;
      border: 1px solid rgba(255, 255, 255, 0.24);
      border-radius: var(--radius);
      background: rgba(9, 25, 55, 0.56);
      padding: 13px;
      box-shadow: 0 12px 26px rgba(5, 14, 29, 0.2);
      backdrop-filter: blur(10px);
    }

    .hero-point-label {
      display: block;
      color: #a8c7ff;
      font-size: 0.75rem;
      font-weight: 900;
      letter-spacing: 0.06em;
    }

    .hero-point-main {
      display: block;
      margin-top: 4px;
      color: #ffffff;
      font-size: 0.95rem;
      font-weight: 900;
      line-height: 1.55;
    }

    .btn-row {
      margin-top: 22px;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .btn {
      min-height: 46px;
      padding: 0 17px;
      border-radius: 8px;
      border: 1px solid transparent;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      text-decoration: none;
      font-size: 0.91rem;
      font-weight: 900;
      line-height: 1.35;
      transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, border-color 0.16s ease;
    }

    .btn:hover {
      transform: translateY(-1px);
      text-decoration: none;
    }

    .btn.primary {
      background: #ffffff;
      color: #174da9;
      box-shadow: 0 12px 26px rgba(6, 15, 29, 0.34);
    }

    .btn.primary:hover {
      background: #f4f8ff;
    }

    .btn.secondary {
      border-color: rgba(255, 255, 255, 0.4);
      color: #f4f8ff;
      background: rgba(255, 255, 255, 0.09);
    }

    .btn.dark {
      background: linear-gradient(135deg, #173a6f 0%, #1f5fd6 100%);
      color: #ffffff;
      box-shadow: 0 12px 26px rgba(31, 95, 214, 0.24);
    }

    .section {
      position: relative;
      padding: clamp(52px, 7vw, 88px) 0;
    }

    .section.alt {
      background:
        linear-gradient(180deg, #eef3f9 0%, #fbfcff 100%);
      border-block: 1px solid rgba(20, 41, 77, 0.08);
    }

    .section-head {
      max-width: 76ch;
      margin-bottom: 22px;
    }

    .section-eyebrow {
      margin-bottom: 8px;
      color: var(--primary);
      font-size: 0.78rem;
      font-weight: 900;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    h2 {
      color: #142846;
      font-size: clamp(1.5rem, 3vw, 2.18rem);
      font-weight: 900;
      text-wrap: balance;
    }

    .section-head p {
      margin-top: 9px;
      color: var(--muted);
      font-size: 0.98rem;
    }

    .section-head.wide {
      max-width: 100%;
    }

    .intro-panel {
      margin: 0 0 18px;
      display: grid;
      grid-template-columns: minmax(0, 0.88fr) minmax(320px, 1.12fr);
      gap: 0;
      overflow: hidden;
      border: 1px solid rgba(36, 99, 198, 0.16);
      border-radius: var(--radius);
      background: #ffffff;
      box-shadow: var(--soft-shadow);
    }

    .intro-panel-copy {
      padding: clamp(20px, 3vw, 30px);
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 12px;
    }

    .intro-panel-copy h3 {
      color: #142846;
      font-size: clamp(1.15rem, 2vw, 1.42rem);
      font-weight: 900;
    }

    .intro-panel-copy p {
      color: var(--muted);
      font-size: 0.94rem;
      line-height: 1.82;
    }

    .intro-panel-media {
      min-height: 245px;
      position: relative;
    }

    .intro-panel-media img,
    .feature-media img,
    .flow-photo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .intro-panel-media::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 36%);
      pointer-events: none;
    }

    .service-summary-panel {
      margin: 0 0 18px;
      padding: clamp(20px, 3vw, 34px);
      border: 1px solid rgba(36, 99, 198, 0.18);
      border-radius: var(--radius);
      background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.99) 0%, rgba(242, 247, 255, 0.96) 100%),
        #ffffff;
      box-shadow: 0 22px 50px rgba(23, 42, 72, 0.10);
    }

    .service-overview-section {
      background: linear-gradient(180deg, #edf5ff 0%, #f8fbff 100%);
      border-block: 1px solid rgba(36, 99, 198, 0.10);
    }

    .service-overview-section .service-summary-panel {
      margin: 0;
    }

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

    .service-plan-card {
      position: relative;
      display: flex;
      flex-direction: column;
      min-height: 260px;
      padding: 20px 18px 18px;
      border: 1px solid rgba(36, 99, 198, 0.16);
      border-radius: var(--radius);
      background:
        linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
      box-shadow: 0 12px 28px rgba(23, 42, 72, 0.08);
    }

    .service-plan-card::before {
      content: "";
      position: absolute;
      inset: 0 0 auto;
      height: 4px;
      border-radius: var(--radius) var(--radius) 0 0;
      background: linear-gradient(90deg, #2463c6 0%, #7db2ff 100%);
    }

    .service-plan-card-strong {
      color: #ffffff;
      border-color: rgba(31, 95, 214, 0.46);
      background:
        linear-gradient(135deg, rgba(18, 50, 96, 0.98) 0%, rgba(31, 95, 214, 0.98) 100%);
      box-shadow: 0 18px 36px rgba(31, 95, 214, 0.24);
    }

    .service-plan-card-strong::before {
      background: linear-gradient(90deg, #e8ad42 0%, #ffffff 100%);
    }

    .service-plan-label {
      align-self: flex-start;
      display: inline-flex;
      align-items: center;
      min-height: 26px;
      padding: 0 10px;
      border-radius: 999px;
      color: var(--primary);
      background: rgba(36, 99, 198, 0.10);
      font-size: 0.72rem;
      font-weight: 900;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .service-plan-card-strong .service-plan-label {
      color: #ffffff;
      background: rgba(255, 255, 255, 0.16);
    }

    .service-plan-card h4 {
      margin: 14px 0 0;
      color: #142846;
      font-size: 1.14rem;
      font-weight: 900;
      line-height: 1.42;
    }

    .service-plan-card-strong h4 {
      color: #ffffff;
    }

    .service-plan-card p {
      margin-top: 12px;
      color: var(--muted);
      font-size: 0.91rem;
      line-height: 1.82;
    }

    .service-plan-card .service-plan-target {
      margin-top: 16px;
      padding-bottom: 14px;
      border-bottom: 1px solid rgba(36, 99, 198, 0.12);
      color: #16345e;
      font-size: 1rem;
      font-weight: 900;
      line-height: 1.62;
    }

    .service-plan-card-strong p {
      color: #e4efff;
    }

    .service-plan-card-strong .service-plan-target {
      color: #ffffff;
      border-bottom-color: rgba(255, 255, 255, 0.22);
    }

    .offer-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
      margin: 0 0 18px;
    }

    .offer-card {
      position: relative;
      overflow: hidden;
      min-height: 360px;
      border-radius: var(--radius);
      border: 1px solid rgba(36, 99, 198, 0.18);
      background: #ffffff;
      box-shadow: var(--shadow);
      padding: clamp(22px, 3vw, 30px);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 22px;
    }

    .offer-card::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 251, 255, 0.9) 55%, rgba(239, 245, 253, 0.82) 100%);
      pointer-events: none;
    }

    .offer-card.school {
      color: #f8fbff;
      border-color: rgba(255, 255, 255, 0.2);
      background:
        linear-gradient(135deg, rgba(8, 20, 40, 0.94) 0%, rgba(15, 39, 75, 0.86) 62%, rgba(36, 99, 198, 0.7) 100%),
        url("../img/home-lecture-room.webp") center / cover no-repeat,
        #0f213f;
    }

    .offer-card.school::before {
      display: none;
    }

    .offer-card > * {
      position: relative;
      z-index: 1;
    }

    .offer-badge {
      display: inline-flex;
      width: fit-content;
      min-height: 30px;
      align-items: center;
      border-radius: 999px;
      padding: 0 12px;
      color: #174da9;
      background: #e8f0ff;
      font-family: "Inter", sans-serif;
      font-size: 0.74rem;
      font-weight: 900;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .offer-card.school .offer-badge {
      color: #ffffff;
      background: rgba(255, 255, 255, 0.14);
      border: 1px solid rgba(255, 255, 255, 0.24);
    }

    .offer-card h3 {
      margin-top: 14px;
      color: #142846;
      font-size: clamp(1.38rem, 2.5vw, 1.85rem);
      font-weight: 900;
    }

    .offer-card.school h3 {
      color: #ffffff;
    }

    .offer-card p {
      margin-top: 10px;
      color: #526174;
      font-size: 0.98rem;
      line-height: 1.86;
    }

    .offer-card.school p {
      color: #deebff;
    }

    .offer-list {
      margin: 18px 0 0;
      padding: 0;
      list-style: none;
      display: grid;
      gap: 8px;
    }

    .offer-list li {
      position: relative;
      padding-left: 1.15rem;
      color: #314b6c;
      font-size: 0.9rem;
      line-height: 1.65;
    }

    .offer-list li::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0.72em;
      width: 7px;
      height: 7px;
      border-radius: 999px;
      background: var(--primary);
    }

    .offer-card.school .offer-list li {
      color: #edf4ff;
    }

    .offer-card.school .offer-list li::before {
      background: var(--amber);
    }

    .offer-card .btn-row {
      margin-top: 0;
    }

    .offer-card:not(.school) .btn.secondary {
      border-color: #c8d7ee;
      color: #173a6f;
      background: #ffffff;
    }

    .path-note {
      margin: 0 0 18px;
      border: 1px solid #d9e2ee;
      border-radius: var(--radius);
      background: #ffffff;
      box-shadow: var(--soft-shadow);
      padding: 16px 18px;
      color: #314b6c;
      font-size: 0.94rem;
      line-height: 1.75;
    }

    .path-note span {
      display: block;
    }

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

    .route-card {
      position: relative;
      min-height: 236px;
      border: 1px solid rgba(20, 40, 70, 0.08);
      border-radius: var(--radius);
      background:
        linear-gradient(90deg, rgba(246, 250, 255, 0.94) 0%, rgba(246, 250, 255, 0.82) 54%, rgba(246, 250, 255, 0.45) 100%),
        url("../img/route-cards/textbook.webp") center / cover no-repeat;
      box-shadow: var(--soft-shadow);
      padding: 20px;
      text-decoration: none;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      overflow: hidden;
      cursor: pointer;
      transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    }

    .route-card:nth-child(2) {
      background:
        linear-gradient(90deg, rgba(255, 248, 242, 0.94) 0%, rgba(255, 248, 242, 0.82) 54%, rgba(255, 248, 242, 0.44) 100%),
        url("../img/route-cards/school.webp") center / cover no-repeat;
      border-color: #f3c8b6;
    }

    .route-card:nth-child(3) {
      background:
        linear-gradient(90deg, rgba(249, 247, 255, 0.94) 0%, rgba(249, 247, 255, 0.82) 54%, rgba(249, 247, 255, 0.42) 100%),
        url("../img/route-cards/pricing.webp") center / cover no-repeat;
      border-color: #c9bdf4;
    }

    .route-card:nth-child(4) {
      background:
        linear-gradient(90deg, rgba(255, 251, 229, 0.94) 0%, rgba(255, 251, 229, 0.82) 54%, rgba(255, 251, 229, 0.42) 100%),
        url("../img/route-cards/faq.webp") center / cover no-repeat;
      border-color: #ead47d;
    }

    .route-card:nth-child(5) {
      background:
        linear-gradient(90deg, rgba(239, 250, 255, 0.94) 0%, rgba(239, 250, 255, 0.82) 54%, rgba(239, 250, 255, 0.42) 100%),
        url("../img/route-cards/preview.webp") center / cover no-repeat;
      border-color: #a7d5ec;
    }

    .route-card:hover {
      text-decoration: none;
      transform: translateY(-4px);
      border-color: #8fb1e8;
      box-shadow: 0 24px 54px rgba(10, 28, 56, 0.2);
    }

    .route-card span {
      display: block;
    }

    .route-card > span:not(.route-action) {
      position: relative;
      z-index: 1;
      padding: 0;
      text-align: center;
    }

    .route-label {
      width: 100%;
      color: #1f5fd6;
      font-size: 0.78rem;
      font-weight: 900;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      margin-inline: auto;
      text-align: center;
    }

    .route-card h3 {
      margin-top: 8px;
      color: #172a48;
      font-size: 1.18rem;
      font-weight: 900;
      text-align: center;
    }

    .route-card p {
      margin-top: 9px;
      color: #53627b;
      font-size: 0.92rem;
      line-height: 1.72;
    }

    .route-card .route-action {
      position: relative;
      z-index: 1;
      margin-top: 16px;
      margin-left: auto;
      width: fit-content;
      min-height: 36px;
      padding: 0 13px;
      border-radius: 999px;
      border: 1px solid #b9cbee;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: #173a6f;
      background: #ffffff;
      font-size: 0.9rem;
      font-weight: 900;
      box-shadow: 0 8px 18px rgba(23, 58, 111, 0.09);
    }

    .route-action::after {
      content: "→";
      font-family: "Inter", sans-serif;
      font-weight: 900;
    }

    .route-card:hover .route-action {
      border-color: #2463c6;
      color: #ffffff;
      background: #2463c6;
    }

    .feature-band {
      overflow: hidden;
      background:
        linear-gradient(105deg, rgba(7, 17, 34, 0.96) 0%, rgba(15, 33, 63, 0.92) 48%, rgba(22, 52, 94, 0.8) 100%),
        url("../img/home-study-desk.webp") center / cover no-repeat,
        #0f213f;
      color: #f4f8ff;
    }

    .feature-band::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 38%);
      pointer-events: none;
    }

    .feature-band h2 {
      color: #ffffff;
    }

    .feature-band .section-eyebrow,
    .feature-band .section-head p {
      color: #d8e6ff;
    }

    .feature-showcase {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 0.92fr) minmax(320px, 0.72fr);
      gap: clamp(18px, 3vw, 28px);
      align-items: end;
      margin-bottom: 18px;
    }

    .feature-showcase .section-head {
      margin-bottom: 0;
    }

    .feature-media {
      margin: 0;
      min-height: 270px;
      overflow: hidden;
      border-radius: var(--radius);
      border: 1px solid rgba(255, 255, 255, 0.22);
      box-shadow: 0 18px 38px rgba(4, 13, 28, 0.28);
    }

    .feature-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
      position: relative;
    }

    .feature-card {
      border: 1px solid rgba(255, 255, 255, 0.22);
      border-radius: var(--radius);
      background: rgba(255, 255, 255, 0.11);
      padding: 18px;
      min-height: 218px;
      box-shadow: 0 16px 34px rgba(5, 15, 31, 0.22);
      backdrop-filter: blur(14px);
    }

    .feature-num {
      width: 34px;
      height: 34px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: #ffffff;
      color: #174da9;
      font-family: "Inter", sans-serif;
      font-size: 0.88rem;
      font-weight: 900;
    }

    .feature-card h3 {
      margin-top: 14px;
      color: #ffffff;
      font-size: 1.16rem;
      font-weight: 900;
    }

    .feature-card p {
      margin-top: 9px;
      color: #dfebff;
      font-size: 0.92rem;
      line-height: 1.78;
    }

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

    .pain-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
    }

    .pain-card {
      position: relative;
      overflow: hidden;
      min-height: 300px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: #ffffff;
      box-shadow: var(--soft-shadow);
      padding: clamp(18px, 2.4vw, 24px);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 18px;
    }

    .pain-card.recommended {
      color: #f8fbff;
      border-color: rgba(255, 255, 255, 0.2);
      background:
        linear-gradient(145deg, rgba(8, 20, 40, 0.95) 0%, rgba(18, 48, 90, 0.9) 62%, rgba(36, 99, 198, 0.78) 100%),
        url("../img/home-lecture-room.webp") center / cover no-repeat,
        #0f213f;
      box-shadow: 0 22px 54px rgba(8, 20, 40, 0.22);
    }

    .pain-label {
      display: inline-flex;
      width: fit-content;
      min-height: 30px;
      align-items: center;
      border-radius: 999px;
      padding: 0 11px;
      color: #174da9;
      background: #e8f0ff;
      font-family: "Inter", sans-serif;
      font-size: 0.72rem;
      font-weight: 900;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .pain-card.recommended .pain-label {
      color: #ffffff;
      background: rgba(255, 255, 255, 0.14);
      border: 1px solid rgba(255, 255, 255, 0.24);
    }

    .pain-card h3 {
      margin-top: 14px;
      color: #142846;
      font-size: clamp(1.18rem, 2vw, 1.42rem);
      font-weight: 900;
    }

    .pain-card.recommended h3 {
      color: #ffffff;
    }

    .pain-card p {
      margin-top: 9px;
      color: #53627b;
      font-size: 0.92rem;
      line-height: 1.75;
    }

    .pain-card.recommended p {
      color: #dce8ff;
    }

    .pain-list {
      margin: 16px 0 0;
      padding: 0;
      list-style: none;
      display: grid;
      gap: 8px;
    }

    .pain-list li {
      position: relative;
      padding-left: 1.15rem;
      color: #314b6c;
      font-size: 0.9rem;
      line-height: 1.65;
    }

    .pain-list li::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0.72em;
      width: 7px;
      height: 7px;
      border-radius: 999px;
      background: var(--primary);
    }

    .pain-card.recommended .pain-list li {
      color: #eef5ff;
    }

    .pain-card.recommended .pain-list li::before {
      background: var(--amber);
    }

    .pain-solution {
      margin-top: 16px;
      color: #173a6f;
      font-size: 0.95rem;
      font-weight: 900;
    }

    .pain-card.recommended .pain-solution {
      color: #ffffff;
    }

    .pain-card .btn-row {
      margin-top: 0;
    }

    .pain-card:not(.recommended) .btn.secondary {
      border-color: #c8d7ee;
      color: #173a6f;
      background: #ffffff;
    }

    .pain-cta {
      margin-top: 16px;
      border: 1px solid #bcd0f3;
      border-radius: var(--radius);
      background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.96) 0%, rgba(244, 248, 255, 0.94) 58%, rgba(238, 245, 255, 0.78) 100%),
        url("../img/home-ai-study.webp") right center / min(42%, 500px) auto no-repeat,
        #ffffff;
      box-shadow: var(--soft-shadow);
      padding: clamp(18px, 3vw, 26px);
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 18px;
      align-items: center;
    }

    .pain-cta h3 {
      color: #142846;
      font-size: clamp(1.16rem, 2vw, 1.46rem);
      font-weight: 900;
    }

    .pain-cta p {
      margin-top: 8px;
      color: var(--muted);
      font-size: 0.94rem;
      line-height: 1.75;
    }

    .flow-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 16px;
    }

    .flow-photo {
      margin: 0;
      min-height: 260px;
      overflow: hidden;
      border-radius: var(--radius);
      border: 1px solid var(--line);
      box-shadow: var(--soft-shadow);
      order: -1;
    }

    .flow-step {
      position: relative;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: #ffffff;
      padding: 16px;
      min-height: 168px;
      box-shadow: var(--soft-shadow);
    }

    .flow-step::after {
      content: "";
      position: absolute;
      right: -8px;
      top: 28px;
      width: 14px;
      height: 2px;
      background: #b9c9e8;
    }

    .flow-step:last-child::after {
      display: none;
    }

    .flow-step .step {
      color: var(--primary);
      font-family: "Inter", sans-serif;
      font-size: 0.78rem;
      font-weight: 900;
      letter-spacing: 0.06em;
    }

    .flow-step h3 {
      margin-top: 8px;
      color: #172a48;
      font-size: 1.02rem;
      font-weight: 900;
    }

    .flow-step p {
      margin-top: 8px;
      color: #53627b;
      font-size: 0.88rem;
      line-height: 1.7;
    }

    .proof-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.02fr) minmax(300px, 0.98fr);
      gap: 14px;
      align-items: stretch;
    }

    .proof-panel {
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: #ffffff;
      box-shadow: var(--soft-shadow);
      padding: clamp(18px, 3vw, 26px);
    }

    #fit .section-head h2 {
      font-size: clamp(1.5rem, 2.55vw, 2.18rem);
    }

    .proof-panel.dark {
      background: linear-gradient(145deg, #122846 0%, #183e72 100%);
      border-color: rgba(255, 255, 255, 0.16);
      color: #f4f8ff;
    }

    .proof-panel h3 {
      color: inherit;
      font-size: clamp(1.16rem, 2vw, 1.38rem);
      font-weight: 900;
    }

    .proof-panel p {
      margin-top: 10px;
      color: #53627b;
      font-size: 0.94rem;
      line-height: 1.82;
    }

    .proof-panel.dark p {
      color: #dce8ff;
    }

    .check-list {
      margin: 14px 0 0;
      padding: 0;
      list-style: none;
      display: grid;
      gap: 8px;
    }

    .check-list li {
      position: relative;
      padding-left: 1.2rem;
      color: #314b6c;
      font-size: 0.92rem;
      line-height: 1.72;
    }

    .check-list li::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0.72em;
      width: 7px;
      height: 7px;
      border-radius: 999px;
      background: var(--primary);
    }

    .proof-panel.dark .check-list li {
      color: #e5efff;
    }

    .proof-panel.dark .check-list li::before {
      background: var(--amber);
    }

    .home-social-section {
      border-top: 1px solid rgba(178, 194, 219, 0.42);
      border-bottom: 1px solid rgba(178, 194, 219, 0.42);
    }

    .home-social-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 14px;
    }

    .home-social-link {
      display: grid;
      grid-template-columns: 50px minmax(0, 1fr);
      gap: 13px;
      align-items: center;
      min-height: 92px;
      padding: 16px;
      border: 1px solid rgba(178, 194, 219, 0.75);
      border-radius: 8px;
      background: #ffffff;
      color: #0f1f36;
      text-decoration: none;
      box-shadow: 0 14px 34px rgba(21, 47, 80, 0.08);
      transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
    }

    .home-social-link:hover {
      transform: translateY(-2px);
      border-color: rgba(37, 99, 235, 0.48);
      box-shadow: 0 18px 42px rgba(21, 47, 80, 0.14);
    }

    .home-social-mark {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 50px;
      height: 50px;
      border-radius: 8px;
      color: #ffffff;
    }

    .home-social-mark svg {
      width: 28px;
      height: 28px;
      fill: currentColor;
    }

    .home-social-link span:last-child {
      min-width: 0;
      font-weight: 900;
      line-height: 1.2;
    }

    .home-social-link small {
      display: block;
      margin-top: 6px;
      color: #5d708d;
      font-size: 0.78rem;
      font-weight: 800;
      line-height: 1.35;
    }

    .home-social-link.is-tiktok .home-social-mark {
      background: #111827;
    }

    .home-social-link.is-instagram .home-social-mark {
      background: #db2777;
    }

    .home-social-link.is-note .home-social-mark {
      background: #059669;
    }

    .home-social-link.is-line .home-social-mark {
      background: #16a34a;
    }

    .final-cta {
      color: #f4f8ff;
      background:
        linear-gradient(90deg, rgba(7, 17, 34, 0.92) 0%, rgba(15, 33, 63, 0.84) 54%, rgba(20, 56, 103, 0.64) 100%),
        url("../img/home-lecture-room.webp") center / cover no-repeat,
        #0f213f;
    }

    .final-cta h2 {
      color: #ffffff;
    }

    .final-cta p {
      margin-top: 10px;
      max-width: 68ch;
      color: #dce8ff;
      font-size: 0.98rem;
    }

    .footer {
      padding: 24px 0;
      background: #0c1a30;
      color: #c9d7ef;
      font-size: 0.88rem;
      text-align: center;
    }

    .reveal {
      animation: rise 0.7s ease both;
    }

    .d1 {
      animation-delay: 0.08s;
    }

    .d2 {
      animation-delay: 0.16s;
    }

    .d3 {
      animation-delay: 0.24s;
    }

    @keyframes rise {
      from {
        opacity: 0;
        transform: translateY(14px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
      }
    }

    @media (max-width: 980px) {
      .topbar-inner {
        min-height: 82px;
        align-items: flex-start;
        flex-direction: column;
        justify-content: center;
        padding: 12px 0;
      }

      .nav-links {
        width: 100%;
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: 4px;
        scrollbar-width: none;
      }

      .nav-links::-webkit-scrollbar {
        display: none;
      }

      .route-grid,
      .offer-grid,
      .pain-grid,
      .home-social-grid,
      .feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .intro-panel,
      .feature-showcase {
        grid-template-columns: 1fr;
      }

      .intro-panel-media,
      .feature-media,
      .flow-photo {
        min-height: 230px;
      }

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

      .flow-step::after {
        display: none;
      }

      .proof-grid,
      .pain-cta {
        grid-template-columns: 1fr;
      }

      .pain-cta {
        background:
          linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(244, 248, 255, 0.94) 100%),
          #ffffff;
      }

    }

    @media (max-width: 680px) {
      .container {
        width: min(100% - 32px, var(--container));
      }

      .topbar-inner {
        gap: 10px;
      }

      .nav-links a {
        min-height: 38px;
        padding: 0 11px;
        font-size: 0.82rem;
      }

      .hero {
        background-position: 74% center;
      }

      .hero-inner {
        min-height: auto;
        padding: 34px 0 54px;
        align-items: flex-start;
      }

      h1 {
        max-width: 100%;
        font-size: clamp(1.22rem, 5vw, 1.36rem);
        line-height: 1.5;
      }

      .hero-title-line {
        display: block;
      }

      .hero-lead {
        max-width: 30em;
        margin-top: 16px;
        font-size: 0.9rem;
        line-height: 1.82;
        font-weight: 700;
      }

      .hero-points {
        margin-top: 18px;
        gap: 10px;
      }

      .hero-points li {
        padding: 14px 12px;
      }

      .hero-point-label {
        font-size: 0.74rem;
      }

      .hero-point-main {
        margin-top: 5px;
        font-size: 0.94rem;
        line-height: 1.62;
      }

      h2 {
        font-size: clamp(1.42rem, 6.8vw, 1.78rem);
        line-height: 1.42;
      }

      .section-head {
        margin-bottom: 18px;
      }

      .section-head p {
        font-size: 0.92rem;
        line-height: 1.78;
      }

      .hero-points,
      .service-summary-panel,
      .offer-grid,
      .pain-grid,
      .route-grid,
      .home-social-grid,
      .feature-grid,
      .flow {
        grid-template-columns: 1fr;
      }

      .hero-points li {
        min-height: auto;
      }

      .section {
        padding: 42px 0;
      }

      .intro-panel-copy {
        padding: 18px 14px;
      }

      .service-summary-panel {
        padding: 0;
        overflow: hidden;
      }

      .service-plan-grid {
        display: block;
        border: 1px solid rgba(36, 99, 198, 0.18);
        border-radius: var(--radius);
        overflow: hidden;
        background: #ffffff;
      }

      .service-plan-card {
        display: grid;
        grid-template-columns: 76px minmax(0, 1fr);
        gap: 7px 12px;
        min-height: auto;
        padding: 16px 12px;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: #f8fbff;
      }

      .service-plan-card::before {
        display: none;
      }

      .service-plan-card + .service-plan-card {
        border-top: 1px solid rgba(36, 99, 198, 0.14);
      }

      .service-plan-card-strong {
        background: linear-gradient(135deg, #173a6f 0%, #1f5fd6 100%);
      }

      .service-plan-label {
        align-self: start;
        grid-row: 1 / span 2;
        display: block;
        min-height: auto;
        padding: 2px 0 0;
        border-radius: 0;
        background: transparent;
        font-size: 0.68rem;
        line-height: 1.35;
      }

      .service-plan-card-strong .service-plan-label {
        background: transparent;
      }

      .service-plan-card .service-plan-target {
        grid-column: 2;
        margin-top: 0;
        padding-bottom: 9px;
        font-size: 0.86rem;
        line-height: 1.58;
      }

      .service-plan-card h4 {
        grid-column: 2;
        margin: 0;
        font-size: 1rem;
        line-height: 1.45;
      }

      .service-plan-card p {
        grid-column: 2;
        margin-top: 0;
        font-size: 0.85rem;
        line-height: 1.72;
      }

      .intro-panel-media,
      .feature-media,
      .flow-photo {
        min-height: 196px;
      }

      .route-card {
        min-height: 0;
        padding-left: 14px;
        padding-right: 14px;
      }

      .feature-card,
      .flow-step {
        min-height: 0;
      }

      .offer-card,
      .feature-card,
      .proof-panel,
      .path-note {
        padding-left: 14px;
        padding-right: 14px;
      }

      .btn {
        width: 100%;
      }
    }