:root {
  color-scheme: light;
  --navy: #14295a;
  --purple: #6d4aff;
  --teal: #0aaea6;
  --coral: #ef5a50;
  --yellow: #f5b83d;
  --cream: #fffaf1;
  --ink: #18233b;
  --muted: #66728a;
  --line: #e8e6ef;
  --white: #fff;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #fffdf9; color: var(--ink); }
a { color: inherit; }
.programShell { width: min(1160px, calc(100% - 40px)); margin-inline: auto; }

.programHeader {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid rgba(20, 41, 90, 0.08);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
}
.headerInner { display: flex; min-height: 82px; align-items: center; gap: 28px; }
.programBrand { display: inline-flex; align-items: center; gap: 12px; margin-right: auto; text-decoration: none; }
.programBrand img { border-radius: 12px; }
.programBrand span { display: grid; gap: 2px; }
.programBrand strong { color: var(--navy); font-size: 1rem; letter-spacing: 0.09em; }
.programBrand small { color: var(--muted); font-size: 0.72rem; }
.programHeader nav { display: flex; align-items: center; gap: 22px; }
.programHeader nav a { color: var(--navy); font-size: 0.88rem; font-weight: 750; text-decoration: none; }
.programHeader nav a:hover { color: var(--purple); }
.programCall { padding: 11px 16px; border-radius: 999px; background: var(--navy); color: var(--white); font-size: 0.86rem; font-weight: 800; text-decoration: none; }
.programCall:hover { background: var(--purple); }

.breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-block: 24px 4px; color: var(--muted); font-size: 0.8rem; }
.breadcrumbs a { text-decoration: none; }
.breadcrumbs a:hover { color: var(--purple); }

.programHero {
  overflow: hidden;
  padding: 46px 0 76px;
  background:
    radial-gradient(circle at 85% 25%, rgba(109, 74, 255, 0.18), transparent 23%),
    radial-gradient(circle at 15% 90%, rgba(10, 174, 166, 0.15), transparent 28%),
    var(--cream);
}
.heroLayout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(230px, 0.65fr); gap: 60px; align-items: center; }
.kicker { margin: 0; color: var(--purple); font-size: 0.76rem; font-weight: 850; letter-spacing: 0.13em; text-transform: uppercase; }
.heroCopy h1 { max-width: 850px; margin: 12px 0 18px; color: var(--navy); font-size: clamp(2.65rem, 6vw, 5.15rem); line-height: 0.98; letter-spacing: -0.055em; }
.heroLead { max-width: 730px; margin: 0; color: #56627a; font-size: clamp(1.05rem, 2vw, 1.28rem); line-height: 1.7; }
.heroActions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.primaryButton,
.secondaryButton { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; padding: 12px 20px; border-radius: 999px; font-weight: 800; text-decoration: none; }
.primaryButton { background: var(--navy); color: var(--white); }
.primaryButton:hover { background: var(--purple); }
.secondaryButton { border: 1px solid rgba(20, 41, 90, 0.18); background: rgba(255,255,255,0.66); color: var(--navy); }
.secondaryButton:hover { border-color: var(--purple); color: var(--purple); }
.heroSymbol { position: relative; display: grid; aspect-ratio: 1; max-width: 310px; place-items: center; justify-self: end; border: 2px solid rgba(255,255,255,0.9); border-radius: 38% 62% 55% 45% / 48% 45% 55% 52%; background: linear-gradient(145deg, var(--purple), #8c72ff); color: var(--white); box-shadow: 0 30px 70px rgba(109, 74, 255, 0.24); transform: rotate(3deg); }
.heroSymbol::before,
.heroSymbol::after { position: absolute; border-radius: 50%; content: ""; }
.heroSymbol::before { top: -18px; right: 8%; width: 38px; height: 38px; background: var(--yellow); }
.heroSymbol::after { bottom: 8%; left: -20px; width: 30px; height: 30px; background: var(--teal); }
.heroSymbol span { font-size: clamp(5rem, 11vw, 8rem); font-weight: 850; line-height: 1; transform: rotate(-3deg); }
.heroSymbol small { position: absolute; bottom: 22%; letter-spacing: 0.16em; }

.detailLayout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 66px; align-items: start; padding-block: 76px; }
.programArticle { min-width: 0; }
.programArticle > section { margin-bottom: 72px; }
.programArticle h2,
.relatedSection h2 { margin: 10px 0 20px; color: var(--navy); font-size: clamp(1.8rem, 4vw, 2.8rem); line-height: 1.13; letter-spacing: -0.035em; }
.programArticle p { color: #56627a; font-size: 1.03rem; line-height: 1.82; }
.benefitsSection { padding: 34px; border-radius: 26px; background: #f4fbfa; }
.benefitsSection ul { display: grid; gap: 13px; margin: 24px 0 0; padding: 0; list-style: none; }
.benefitsSection li { position: relative; padding: 14px 16px 14px 48px; border-radius: 14px; background: var(--white); color: #39505d; line-height: 1.5; }
.benefitsSection li::before { position: absolute; top: 13px; left: 15px; display: grid; width: 23px; height: 23px; place-items: center; border-radius: 50%; background: var(--teal); color: var(--white); content: "✓"; font-size: 0.75rem; font-weight: 900; }

.programAside { position: sticky; top: 106px; display: grid; gap: 16px; }
.contactBox { display: grid; padding: 28px; border-radius: 24px; background: var(--navy); color: var(--white); box-shadow: 0 24px 55px rgba(20, 41, 90, 0.17); }
.contactBox small { color: #a9f0ea; font-weight: 800; }
.contactBox h2 { margin: 10px 0 12px; font-size: 1.55rem; line-height: 1.2; }
.contactBox p { margin: 0 0 18px; color: rgba(255,255,255,0.72); line-height: 1.6; }
.contactBox a { padding: 12px 0; border-top: 1px solid rgba(255,255,255,0.13); color: var(--white); font-weight: 750; text-decoration: none; }
.contactBox a:hover { color: #a9f0ea; }
.addressBox { display: flex; gap: 13px; padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: var(--white); }
.addressBox > span { display: grid; flex: 0 0 36px; height: 36px; place-items: center; border-radius: 11px; background: rgba(239, 90, 80, 0.1); color: var(--coral); }
.addressBox strong { color: var(--navy); }
.addressBox p { margin: 5px 0 0; color: var(--muted); font-size: 0.86rem; line-height: 1.5; }

.faqList { display: grid; gap: 10px; }
.faqList details { border: 1px solid var(--line); border-radius: 16px; background: var(--white); }
.faqList summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 19px 20px; color: var(--navy); cursor: pointer; font-weight: 800; list-style: none; }
.faqList summary::-webkit-details-marker { display: none; }
.faqList summary span { color: var(--purple); font-size: 1.3rem; }
.faqList details[open] summary span { transform: rotate(45deg); }
.faqList details p { margin: 0; padding: 0 20px 20px; font-size: 0.95rem; }

.relatedSection { margin-bottom: 0 !important; }
.relatedGrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.relatedCard { display: grid; min-height: 170px; align-content: space-between; gap: 12px; padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: var(--white); text-decoration: none; transition: transform 160ms ease, border-color 160ms ease; }
.relatedCard:hover { border-color: var(--purple); transform: translateY(-3px); }
.relatedCard > span { color: var(--purple); font-size: 2rem; }
.relatedCard strong { color: var(--navy); }
.relatedCard em { color: var(--muted); font-size: 0.78rem; font-style: normal; font-weight: 750; }

.bottomCta { padding: 58px 0; background: linear-gradient(135deg, #eef9f8, #f4f1ff); }
.bottomCta .programShell { display: flex; align-items: center; justify-content: space-between; gap: 34px; }
.bottomCta h2 { max-width: 760px; margin: 8px 0 0; color: var(--navy); font-size: clamp(1.8rem, 4vw, 2.8rem); line-height: 1.15; }
.bottomCta a { flex: 0 0 auto; padding: 14px 20px; border-radius: 999px; background: var(--coral); color: var(--white); font-weight: 850; text-decoration: none; }
.bottomCta a:hover { background: var(--navy); }

.programFooter { padding: 38px 0; background: var(--navy); color: var(--white); }
.footerInner { display: flex; align-items: flex-start; justify-content: space-between; gap: 30px; }
.footerInner strong { letter-spacing: 0.1em; }
.footerInner p { margin: 7px 0 0; color: rgba(255,255,255,0.64); }
.footerInner > div:last-child { display: grid; gap: 6px; text-align: right; }
.footerInner a { color: var(--white); text-decoration: none; }

.indexHero { padding: 88px 0 68px; background: var(--cream); text-align: center; }
.indexHero h1 { max-width: 900px; margin: 12px auto 18px; color: var(--navy); font-size: clamp(2.7rem, 6vw, 5rem); line-height: 1; letter-spacing: -0.055em; }
.indexHero > div > p:last-child { max-width: 720px; margin: 0 auto; color: var(--muted); font-size: 1.16rem; line-height: 1.65; }
.indexPrograms { padding-block: 64px 80px; }
.programIndexGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.programIndexCard { display: flex; gap: 20px; padding: 26px; border: 1px solid var(--line); border-radius: 22px; background: var(--white); text-decoration: none; transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease; }
.programIndexCard:hover { border-color: var(--purple); box-shadow: 0 18px 45px rgba(20, 41, 90, 0.09); transform: translateY(-3px); }
.indexIcon { display: grid; flex: 0 0 58px; height: 58px; place-items: center; border-radius: 17px; background: rgba(109, 74, 255, 0.1); color: var(--purple); font-size: 1.9rem; }
.programIndexCard h2 { margin: 3px 0 9px; color: var(--navy); font-size: 1.3rem; }
.programIndexCard p { margin: 0 0 13px; color: var(--muted); font-size: 0.91rem; line-height: 1.62; }
.programIndexCard em { color: var(--purple); font-size: 0.82rem; font-style: normal; font-weight: 800; }

@media (max-width: 930px) {
  .programHeader nav { display: none; }
  .heroLayout { grid-template-columns: 1fr 220px; gap: 30px; }
  .detailLayout { grid-template-columns: 1fr; }
  .programAside { position: static; grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .programShell { width: min(100% - 26px, 1160px); }
  .headerInner { min-height: 72px; }
  .programBrand small { display: none; }
  .programCall { padding: 10px 13px; font-size: 0.78rem; }
  .programHero { padding: 34px 0 54px; }
  .heroLayout { grid-template-columns: 1fr; }
  .heroSymbol { width: 180px; justify-self: start; }
  .detailLayout { gap: 36px; padding-block: 54px; }
  .programArticle > section { margin-bottom: 54px; }
  .benefitsSection { padding: 24px 18px; }
  .programAside { grid-template-columns: 1fr; }
  .relatedGrid,
  .programIndexGrid { grid-template-columns: 1fr; }
  .bottomCta .programShell { align-items: flex-start; flex-direction: column; }
  .footerInner { flex-direction: column; }
  .footerInner > div:last-child { text-align: left; }
  .indexHero { padding: 65px 0 52px; }
}

@media (max-width: 460px) {
  .programBrand strong { font-size: 0.87rem; }
  .programCall { white-space: nowrap; }
  .heroActions { align-items: stretch; flex-direction: column; }
  .primaryButton,
  .secondaryButton { width: 100%; }
  .programIndexCard { padding: 21px 18px; }
}