@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("./assets/fonts/onest-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("./assets/fonts/onest-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("./assets/fonts/onest-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;
  --paper: #f4f1e9;
  --paper-deep: #e9e4d8;
  --ink: #17202b;
  --muted: #68717d;
  --blue: #3854ed;
  --blue-deep: #2439bc;
  --lime: #d6ee8a;
  --coral: #fc805b;
  --line: rgba(23, 32, 43, .12);
  --font: "Onest", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-family: var(--font);
  color: var(--ink);
  background: var(--paper);
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
  -webkit-text-size-adjust: 100%;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; min-width: 320px; overflow-x: hidden; background: var(--paper); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
h1, h2, h3, p { margin: 0; }
::selection { background: var(--lime); color: var(--ink); }
.skip { position: absolute; z-index: 100; top: -50px; left: 16px; padding: 10px 16px; border-radius: 12px; background: #fff; color: var(--ink); }
.skip:focus { top: 12px; }
.demo-strip { display: flex; min-height: 34px; align-items: center; justify-content: space-between; gap: 16px; padding: 7px max(22px, calc((100vw - 1440px) / 2)); background: var(--ink); color: #e7e7dd; font-size: 10px; font-weight: 650; letter-spacing: .11em; }
.demo-strip > span { display: inline-flex; align-items: center; gap: 9px; }
.demo-strip i { width: 6px; height: 6px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px rgba(214, 238, 138, .12); }
.demo-strip a { color: #fff; font-size: 11px; letter-spacing: .02em; }
.demo-strip a span { margin-left: 6px; color: var(--lime); }
.topbar { position: sticky; top: 10px; z-index: 20; display: flex; width: min(1440px, calc(100% - 40px)); min-height: 72px; align-items: center; gap: 32px; margin: 12px auto -84px; padding: 0 22px; border: 1px solid rgba(255, 255, 255, .72); border-radius: 22px; background: rgba(250, 249, 245, .74); box-shadow: 0 12px 32px rgba(31, 41, 52, .08), inset 0 1px rgba(255, 255, 255, .9); backdrop-filter: blur(22px) saturate(125%); -webkit-backdrop-filter: blur(22px) saturate(125%); }
.logo { flex: none; font-size: 25px; font-weight: 800; letter-spacing: -.095em; }
.logo span { color: var(--blue); }
.topbar nav { display: flex; align-items: center; justify-content: center; gap: clamp(18px, 3.4vw, 46px); margin: 0 auto; color: #59616c; font-size: 12px; font-weight: 650; }
.topbar nav a { transition: color .2s ease; }
.topbar nav a:hover { color: var(--blue); }
.top-cta { display: inline-flex; min-height: 42px; align-items: center; gap: 14px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; font-size: 11px; font-weight: 700; transition: background .2s ease, border-color .2s ease; }
.top-cta:hover { border-color: rgba(56, 84, 237, .32); background: rgba(56, 84, 237, .06); }
.top-cta span { color: var(--blue); }
.hero { position: relative; display: grid; width: min(1440px, calc(100% - 48px)); min-height: 810px; grid-template-columns: minmax(0, .92fr) minmax(460px, 1.08fr); align-items: center; gap: clamp(34px, 6vw, 96px); margin: 0 auto; padding: 148px 0 84px; }
.hero::before { position: absolute; z-index: -1; top: 155px; left: -12vw; width: 55vw; height: 570px; border-radius: 50%; background: radial-gradient(ellipse, rgba(255, 255, 255, .86), rgba(255, 255, 255, 0) 67%); content: ""; pointer-events: none; }
.hero-copy { position: relative; z-index: 2; padding: 8px 0 20px; }
.eyebrow, .section-no, .module-top, .module > small, .quiz-top, .quiz-bottom, .try-foot, .chart-labels, .chart-days, .lesson-top, .scene-index, .art-caption, .closing-coordinate { font-size: 10px; font-weight: 700; letter-spacing: .13em; }
.eyebrow { display: flex; align-items: center; gap: 11px; color: #59616b; }
.eyebrow span { color: var(--blue); }
.eyebrow i { width: 26px; height: 1px; background: #9da3a8; }
.hero h1 { margin: 30px 0 24px; font-size: clamp(54px, 6.5vw, 90px); font-weight: 690; letter-spacing: -.078em; line-height: .97; text-wrap: balance; }
.hero h1 em, .intro h2 em, .program h2 em, .try-copy h2 em, .closing h2 em { color: var(--blue); font-family: Georgia, "Times New Roman", serif; font-weight: 400; letter-spacing: -.07em; }
.lead { max-width: 460px; color: var(--muted); font-size: 16px; line-height: 1.75; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; margin-top: 30px; }
.button { display: inline-flex; min-height: 52px; align-items: center; justify-content: center; gap: 18px; padding: 0 21px; border-radius: 999px; font-size: 12px; font-weight: 700; transition: transform .22s ease, background .22s ease, box-shadow .22s ease; }
.button:hover { transform: translateY(-2px); }
.button span { font-size: 16px; }
.button-dark { background: var(--ink); color: #fff; box-shadow: 0 9px 20px rgba(23, 32, 43, .16); }
.button-dark:hover { background: var(--blue-deep); box-shadow: 0 12px 26px rgba(36, 57, 188, .22); }
.hero-meta { color: #707782; font-size: 11px; }
.hero-meta i { display: inline-block; width: 3px; height: 3px; margin: 0 7px 3px; border-radius: 50%; background: var(--coral); }
.hero-foot { display: flex; align-items: center; gap: 12px; margin-top: 64px; color: #8b9095; font-size: 9px; font-weight: 700; letter-spacing: .14em; }
.hero-foot b { width: 54px; height: 1px; background: #afb1ac; }

.hero-art { --pointer-rotate-x: 0deg; --pointer-rotate-y: 0deg; --scroll-shift: 0px; position: relative; min-height: 620px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .68); border-radius: 38px; background: radial-gradient(ellipse at 26% 17%, rgba(255, 255, 255, .32), transparent 36%), radial-gradient(ellipse at 78% 83%, rgba(214, 238, 138, .36), transparent 39%), linear-gradient(145deg, #293fd3 0%, #5168f2 46%, #8292fb 100%); box-shadow: 0 35px 70px -38px rgba(44, 59, 144, .68), inset 0 1px 0 rgba(255, 255, 255, .7); perspective: 1200px; isolation: isolate; }
.hero-art::after { position: absolute; z-index: 0; inset: 0; background: linear-gradient(120deg, rgba(255, 255, 255, .13), transparent 31% 65%, rgba(20, 31, 93, .1)); content: ""; pointer-events: none; }
.scene-grid { position: absolute; inset: 0; opacity: .23; background-image: linear-gradient(rgba(255,255,255,.17) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.17) 1px, transparent 1px); background-size: 46px 46px; mask-image: linear-gradient(135deg, #000, transparent 78%); }
.scene-orbit { position: absolute; z-index: -1; border: 1px solid rgba(255, 255, 255, .26); border-radius: 50%; pointer-events: none; }
.orbit-a { width: 590px; height: 310px; top: 15%; left: 17%; transform: rotate(-31deg); }
.orbit-b { width: 380px; height: 570px; right: -7%; top: 10%; transform: rotate(28deg); }
.scene-orb { position: absolute; z-index: -1; border-radius: 50%; filter: blur(1px); }
.orb-one { top: 13%; right: 12%; width: 82px; height: 82px; background: radial-gradient(circle at 33% 27%, #fff9d9, #f5c45f 63%, #d87a56); box-shadow: 0 18px 46px rgba(24, 33, 91, .28); animation: orb-drift 7s ease-in-out infinite; }
.orb-two { bottom: 15%; left: 9%; width: 25px; height: 25px; background: #d9ee92; box-shadow: 0 0 25px rgba(222, 245, 141, .75); animation: orb-drift 5s -2s ease-in-out infinite; }
.scene-parallax { position: absolute; z-index: 1; inset: 0; transform: translateY(var(--scroll-shift)) rotateX(var(--pointer-rotate-x)) rotateY(var(--pointer-rotate-y)); transform-style: preserve-3d; transition: transform .35s cubic-bezier(.2,.75,.25,1); }
.lesson-panel { position: absolute; top: 10%; left: 8%; display: flex; width: 79%; min-height: 77%; flex-direction: column; padding: 25px 27px 18px; border: 1px solid rgba(255, 255, 255, .65); border-radius: 28px; background: linear-gradient(145deg, rgba(250, 250, 255, .87), rgba(238, 239, 252, .76)); color: var(--ink); box-shadow: 0 25px 55px rgba(24, 30, 85, .2), inset 0 1px 0 #fff; backdrop-filter: blur(24px) saturate(135%); -webkit-backdrop-filter: blur(24px) saturate(135%); transform: translateZ(25px); }
.lesson-top { display: flex; align-items: center; gap: 9px; color: #838994; font-size: 8px; letter-spacing: .1em; }
.lesson-mark { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 9px; background: var(--blue); color: #fff; font-size: 14px; font-weight: 700; letter-spacing: -.06em; }
.lesson-top > span:nth-child(2) { margin-right: auto; }
.lesson-top i { color: #b3b7c0; font-style: normal; }
.lesson-live { display: flex; align-items: center; gap: 6px; }
.lesson-live i { width: 5px; height: 5px; border-radius: 50%; background: #81b871; box-shadow: 0 0 0 3px rgba(129, 184, 113, .15); }
.lesson-question { margin-top: 39px; }
.lesson-question small { color: var(--blue); font-size: 9px; font-weight: 700; letter-spacing: .13em; }
.lesson-question h2 { margin: 11px 0 6px; font-size: clamp(28px, 3vw, 40px); font-weight: 680; letter-spacing: -.06em; line-height: 1.05; }
.lesson-question p { color: #707987; font-size: 11px; }
.spend-chart { margin-top: auto; padding: 16px 16px 11px; border: 1px solid rgba(52, 68, 185, .11); border-radius: 17px; background: rgba(255, 255, 255, .72); }
.chart-labels { display: flex; align-items: center; justify-content: space-between; color: #7d8490; font-size: 8px; letter-spacing: .04em; text-transform: uppercase; }
.chart-labels b { color: #5e9d79; font-size: 11px; letter-spacing: 0; }
.spend-chart svg { width: 100%; height: 108px; overflow: visible; margin: 8px 0 0; }
.spend-chart svg circle { fill: #fff; stroke: var(--coral); stroke-width: 3px; }
.chart-area { fill: url(#chartFill); }
.chart-line { fill: none; stroke: var(--coral); stroke-width: 3px; stroke-linecap: round; stroke-dasharray: 700; stroke-dashoffset: 700; animation: draw-line 2s .3s ease forwards; }
.chart-days { display: flex; justify-content: space-between; color: #9ba1a9; font-size: 7px; letter-spacing: .02em; }
.lesson-bottom { display: flex; justify-content: space-between; gap: 6px; margin-top: 17px; padding-top: 13px; border-top: 1px solid rgba(23, 32, 43, .1); color: #757d88; font-size: 8px; font-weight: 600; }
.lesson-bottom span { display: flex; align-items: center; gap: 5px; }
.lesson-bottom i { display: grid; width: 17px; height: 17px; place-items: center; border-radius: 50%; background: #e8e9f8; color: var(--blue); font-size: 8px; font-style: normal; }
.float-card { position: absolute; z-index: 3; border: 1px solid rgba(255, 255, 255, .7); background: rgba(255, 255, 255, .48); color: #fff; box-shadow: 0 18px 36px rgba(18, 29, 93, .2), inset 0 1px 0 rgba(255,255,255,.75); backdrop-filter: blur(18px) saturate(135%); -webkit-backdrop-filter: blur(18px) saturate(135%); transform-style: preserve-3d; }
.float-spend { top: 55%; right: 1.5%; display: grid; gap: 5px; min-width: 142px; padding: 15px 18px; border-radius: 17px; animation: float-card 6s ease-in-out infinite; }
.float-spend small, .float-goal small { color: rgba(255,255,255,.83); font-size: 8px; font-weight: 700; letter-spacing: .11em; }
.float-spend strong { color: #fff; font-size: 16px; line-height: 1.15; }
.float-spend > span { color: rgba(255,255,255,.77); font-size: 9px; }
.float-goal { right: 8%; bottom: 4.5%; display: flex; align-items: center; gap: 12px; padding: 12px 17px 12px 12px; border-radius: 18px; animation: float-card 7s -2s ease-in-out infinite; }
.float-goal > div { display: grid; gap: 1px; }
.float-goal strong { color: #fff; font-size: 19px; line-height: 1.2; }
.float-goal > div span { color: rgba(255,255,255,.78); font-size: 9px; }
.goal-ring { display: grid; width: 43px; height: 43px; place-items: center; border: 1px solid rgba(255,255,255,.65); border-radius: 50%; background: conic-gradient(var(--lime) 0 62%, rgba(255,255,255,.25) 62%); box-shadow: inset 0 0 0 5px rgba(255,255,255,.18); }
.goal-ring i { width: 22px; height: 22px; border-radius: 50%; background: rgba(55, 77, 218, .6); }
.scene-index { position: absolute; right: 11%; bottom: 15%; z-index: 2; color: rgba(255,255,255,.88); font-size: 8px; letter-spacing: .1em; }
.scene-index i { color: var(--lime); font-style: normal; }
.art-caption { position: absolute; right: 0; bottom: 0; left: 0; z-index: 4; display: flex; min-height: 54px; align-items: center; gap: 11px; padding: 0 23px; border-top: 1px solid rgba(255,255,255,.3); background: rgba(27, 42, 142, .15); color: rgba(255,255,255,.78); font-size: 8px; }
.art-caption span:first-child { color: var(--lime); }
.art-caption b { margin-right: auto; color: #fff; font-size: 9px; letter-spacing: .04em; }

.section-wrap { width: min(1220px, calc(100% - 48px)); margin-inline: auto; }
.intro { display: grid; grid-template-columns: .52fr 1fr; gap: clamp(34px, 8vw, 120px); padding-top: 132px; padding-bottom: 138px; }
.section-no { padding-top: 8px; color: #858b8e; }
.section-no i { color: var(--coral); font-style: normal; }
.intro-copy h2, .program h2, .try-copy h2, .closing h2 { margin-bottom: 24px; font-size: clamp(42px, 5vw, 70px); font-weight: 650; letter-spacing: -.07em; line-height: 1.04; text-wrap: balance; }
.intro-copy > p, .program-heading > div > p, .try-copy > p:not(.section-no) { max-width: 600px; color: var(--muted); font-size: 15px; line-height: 1.8; }
.intro-stats { display: flex; flex-wrap: wrap; gap: clamp(20px, 4vw, 52px); margin-top: 37px; padding-top: 22px; border-top: 1px solid var(--line); }
.intro-stats div { display: grid; gap: 4px; }
.intro-stats b { color: var(--blue); font-size: 24px; font-weight: 650; letter-spacing: -.05em; }
.intro-stats span { color: #7c8288; font-size: 10px; }
.program { position: relative; overflow: hidden; padding: 112px 0 124px; background: #e8e8e1; }
.program::after { position: absolute; right: -150px; bottom: -230px; width: 500px; height: 500px; border: 1px solid rgba(56,84,237,.11); border-radius: 50%; box-shadow: 0 0 0 44px rgba(56,84,237,.025), 0 0 0 90px rgba(56,84,237,.02); content: ""; pointer-events: none; }
.program-heading { display: grid; grid-template-columns: .52fr 1fr; gap: clamp(34px, 8vw, 120px); padding-bottom: 58px; }
.program h2 { margin-bottom: 18px; }
.module-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.module { --card-rotate-x: 0deg; --card-rotate-y: 0deg; display: flex; min-height: 480px; flex-direction: column; overflow: hidden; padding: 20px 21px 24px; border: 1px solid rgba(255,255,255,.8); border-radius: 24px; background: linear-gradient(145deg, rgba(255,255,255,.86), rgba(247,247,241,.74)); box-shadow: 0 16px 40px rgba(43, 47, 54, .055), inset 0 1px #fff; transform: perspective(900px) rotateX(var(--card-rotate-x)) rotateY(var(--card-rotate-y)); transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.module:hover { border-color: rgba(56,84,237,.28); box-shadow: 0 24px 50px rgba(45, 53, 79, .12), inset 0 1px #fff; }
.module-top { display: flex; align-items: center; justify-content: space-between; color: #858a91; font-size: 8px; letter-spacing: .11em; }
.module-top span:last-child { color: var(--blue); font-size: 12px; }
.module-art { position: relative; display: grid; height: 230px; flex: none; place-items: center; overflow: hidden; margin: 17px 0 22px; border: 1px solid rgba(255,255,255,.8); border-radius: 18px; background: #eaedff; }
.art-receipt { background: radial-gradient(circle at 76% 24%, #fff 0, transparent 31%), linear-gradient(135deg, #e0e5ff, #f7e6d4); }
.receipt-card { position: relative; display: grid; width: 154px; gap: 9px; padding: 19px; border-radius: 13px; background: rgba(255,255,255,.81); box-shadow: 0 18px 36px rgba(57,72,145,.15); transform: rotate(-7deg); }
.receipt-card i { width: 75%; height: 5px; border-radius: 99px; background: #d9dce6; }
.receipt-card i:nth-child(2) { width: 56%; }
.receipt-card i:nth-child(3) { width: 86%; }
.receipt-card b { margin-top: 4px; color: #e97757; font-size: 19px; }
.receipt-card span { color: #737b86; font-size: 8px; }
.receipt-stamp { position: absolute; right: 15px; bottom: 17px; padding: 7px 9px; border: 1px solid rgba(56,84,237,.26); border-radius: 999px; color: var(--blue); font-size: 8px; font-weight: 700; letter-spacing: .08em; transform: rotate(-9deg); }
.art-choice { background: radial-gradient(circle at 35% 25%, #faf8e9, transparent 40%), linear-gradient(145deg, #dce5d1, #cbd5f1); }
.choice-chip { position: absolute; display: grid; width: 135px; height: 67px; place-items: center; border: 1px solid rgba(255,255,255,.9); border-radius: 17px; background: rgba(255,255,255,.68); box-shadow: 0 12px 25px rgba(34,46,74,.13); color: #65707c; font-size: 14px; font-weight: 650; backdrop-filter: blur(14px); }
.choice-one { top: 51px; left: calc(50% - 105px); transform: rotate(-9deg); }
.choice-two { top: 103px; left: calc(50% - 19px); border-color: rgba(56,84,237,.22); background: rgba(71,91,220,.88); color: #fff; transform: rotate(6deg); }
.choice-cursor { position: absolute; right: 22%; bottom: 32px; display: grid; width: 29px; height: 29px; place-items: center; border-radius: 50%; background: var(--coral); color: white; font-size: 13px; box-shadow: 0 6px 16px rgba(252,128,91,.38); animation: cursor-nudge 2.8s ease-in-out infinite; }
.art-plan { align-content: center; justify-items: start; padding: 0 35px; background: radial-gradient(circle at 80% 22%, rgba(255,255,255,.9), transparent 38%), linear-gradient(145deg, #f2e2c3, #f6d6c7); }
.plan-path { position: relative; display: flex; width: 100%; align-items: center; justify-content: space-between; margin-bottom: 26px; }
.plan-path::before { position: absolute; top: 50%; right: 9px; left: 9px; height: 2px; background: linear-gradient(90deg, var(--blue), var(--coral)); content: ""; }
.plan-path i, .plan-path b { position: relative; z-index: 1; width: 17px; height: 17px; border: 4px solid #fff; border-radius: 50%; background: var(--blue); box-shadow: 0 3px 8px rgba(32,47,110,.2); }
.plan-path i:nth-child(2) { background: #8291ec; }
.plan-path i:nth-child(3), .plan-path b { background: var(--coral); }
.art-plan > span { color: #6b7580; font-size: 8px; font-weight: 700; letter-spacing: .13em; }
.art-plan > strong { margin-top: 5px; color: var(--ink); font-family: Georgia, serif; font-size: 27px; font-weight: 400; font-style: italic; }
.module > small { color: var(--blue); font-size: 8px; letter-spacing: .12em; }
.module h3 { margin: 8px 0; font-size: 23px; font-weight: 650; letter-spacing: -.05em; }
.module p { max-width: 38ch; color: #727a84; font-size: 12px; line-height: 1.7; }

.try-section { display: grid; grid-template-columns: .78fr 1.22fr; align-items: center; gap: clamp(38px, 8vw, 115px); padding-top: 136px; padding-bottom: 145px; }
.try-copy h2 { margin: 21px 0; }
.try-copy > p:not(.section-no) { font-size: 14px; }
.try-foot { display: inline-flex; align-items: center; gap: 8px; margin-top: 32px; color: #81878d; font-size: 8px; }
.try-foot i { width: 7px; height: 7px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 4px rgba(252,128,91,.12); }
.quiz-shell { position: relative; padding: 15px; border: 1px solid rgba(56,84,237,.12); border-radius: 30px; background: linear-gradient(145deg, #e7eaff, #f8e6db); }
.quiz-window { position: relative; z-index: 1; padding: clamp(21px, 3vw, 34px); border: 1px solid rgba(255,255,255,.9); border-radius: 23px; background: rgba(255,255,255,.75); box-shadow: 0 22px 55px rgba(49,58,108,.12), inset 0 1px #fff; backdrop-filter: blur(18px); }
.quiz-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 17px; border-bottom: 1px solid var(--line); color: #838a95; font-size: 8px; letter-spacing: .09em; }
.quiz-top > span:first-child { display: flex; align-items: center; gap: 7px; }
.quiz-top i { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 4px rgba(56,84,237,.1); }
.quiz-top b { color: var(--blue); }
.quiz-progress { height: 3px; overflow: hidden; margin-top: -1px; background: rgba(56,84,237,.08); }
.quiz-progress i { display: block; width: 34%; height: 100%; border-radius: 99px; background: linear-gradient(90deg,var(--blue),#8897ff); }
.quiz-window h3 { max-width: 560px; margin: 28px 0 22px; font-size: clamp(23px, 3vw, 32px); font-weight: 650; letter-spacing: -.055em; line-height: 1.16; }
.options { display: grid; gap: 9px; }
.options button { display: grid; min-height: 61px; grid-template-columns: 30px 1fr 20px; align-items: center; gap: 12px; width: 100%; padding: 10px 14px; border: 1px solid rgba(23,32,43,.11); border-radius: 14px; background: rgba(255,255,255,.65); color: #424d5b; text-align: left; font-size: 12px; font-weight: 550; transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease; }
.options button:hover { transform: translateX(3px); border-color: rgba(56,84,237,.4); background: #fff; }
.option-key { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 9px; background: #eeeff4; color: #68717d; font-size: 10px; font-weight: 700; }
.options button > i { color: #a5abb4; font-size: 15px; font-style: normal; text-align: right; }
.options button.correct { border-color: rgba(62,142,95,.42); background: #edf6e9; box-shadow: 0 0 0 3px rgba(105,165,119,.08); }
.options button.correct .option-key { background: #d6edce; color: #39714a; }
.options button.wrong { border-color: rgba(225,113,80,.4); background: #fff1ea; }
.options button.wrong .option-key { background: #f9ddd2; color: #a64e37; }
.feedback { min-height: 43px; margin-top: 17px; color: #777f89; font-size: 11px; line-height: 1.6; }
.feedback.is-visible { color: #475261; }
.quiz-bottom { display: flex; justify-content: space-between; gap: 12px; padding-top: 13px; border-top: 1px solid var(--line); color: #9299a1; font-size: 8px; }
.quiz-bottom i { color: var(--coral); font-style: normal; }
.quiz-bottom b { color: var(--blue); }
.quiz-orbit { position: absolute; top: -20px; right: -21px; width: 80px; height: 80px; border: 1px solid rgba(56,84,237,.23); border-radius: 50%; box-shadow: 0 0 0 11px rgba(56,84,237,.035), 0 0 0 22px rgba(56,84,237,.025); }

.closing { position: relative; min-height: 505px; overflow: hidden; padding: 94px max(6%, calc((100% - 1220px) / 2)); background: var(--blue); color: #fff; isolation: isolate; }
.closing::before { position: absolute; z-index: -1; top: -55%; right: -8%; width: 830px; height: 830px; border: 1px solid rgba(255,255,255,.23); border-radius: 50%; box-shadow: 0 0 0 55px rgba(255,255,255,.035), 0 0 0 115px rgba(255,255,255,.025); content: ""; }
.closing::after { position: absolute; z-index: -1; inset: 0; background: radial-gradient(ellipse at 78% 45%, rgba(197,212,255,.34), transparent 36%), linear-gradient(110deg, transparent 45%, rgba(32,48,174,.25)); content: ""; }
.closing-inner { position: relative; z-index: 2; max-width: 650px; }
.closing .section-no { color: #d4dcff; }
.closing h2 { margin: 24px 0 20px; font-size: clamp(48px, 6vw, 76px); }
.closing h2 em { color: var(--lime); }
.closing-inner > p:not(.section-no) { max-width: 49ch; color: rgba(255,255,255,.79); font-size: 14px; line-height: 1.75; }
.button-paper { margin-top: 25px; background: var(--paper); color: var(--ink); }
.button-paper:hover { background: #fff; box-shadow: 0 14px 30px rgba(14,28,120,.22); }
.closing-mark { position: absolute; top: 50%; right: 12%; display: grid; width: 275px; height: 275px; place-items: center; border: 1px solid rgba(255,255,255,.43); border-radius: 50%; background: linear-gradient(145deg,rgba(255,255,255,.28),rgba(255,255,255,.07)); box-shadow: inset 0 1px rgba(255,255,255,.6), 0 22px 60px rgba(21,35,133,.23); transform: translateY(-50%) rotate(-12deg); backdrop-filter: blur(12px); }
.closing-mark span { color: rgba(255,255,255,.88); font-family: Georgia, serif; font-size: 164px; font-style: italic; letter-spacing: -.1em; transform: translateX(-8px); }
.closing-mark i, .closing-mark b { position: absolute; display: block; border: 1px solid rgba(255,255,255,.62); border-radius: 50%; }
.closing-mark i { inset: -23px 31px 31px -23px; }
.closing-mark b { inset: 31px -23px -23px 31px; border-color: rgba(214,238,138,.8); }
.closing-coordinate { position: absolute; right: max(6%, calc((100% - 1220px) / 2)); bottom: 26px; color: rgba(255,255,255,.61); font-size: 8px; }
footer { display: flex; min-height: 94px; align-items: center; justify-content: space-between; gap: 18px; width: min(1440px, calc(100% - 48px)); margin: auto; color: #7b8188; }
footer .logo { color: var(--ink); font-size: 22px; }
footer p { font-size: 10px; }
footer > a:last-child { font-size: 11px; font-weight: 650; }

.has-motion .module, .has-motion .intro-copy, .has-motion .quiz-shell { opacity: 0; transition: opacity .65s cubic-bezier(.2,.75,.25,1), transform .65s cubic-bezier(.2,.75,.25,1); }
.has-motion .module { transform: perspective(900px) rotateX(var(--card-rotate-x)) rotateY(var(--card-rotate-y)) translateY(18px); }
.has-motion .module.is-visible { opacity: 1; transform: perspective(900px) rotateX(var(--card-rotate-x)) rotateY(var(--card-rotate-y)); }
.has-motion .intro-copy, .has-motion .quiz-shell { transform: translateY(18px); }
.has-motion .intro-copy.is-visible, .has-motion .quiz-shell.is-visible { opacity: 1; transform: none; }
.module:nth-child(2) { transition-delay: 80ms; }
.module:nth-child(3) { transition-delay: 150ms; }
@keyframes orb-drift { 0%,100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(-10px,13px,0); } }
@keyframes float-card { 0%,100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes cursor-nudge { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-6px,-7px); } }
@keyframes draw-line { to { stroke-dashoffset: 0; } }

@media (max-width: 1060px) {
  .hero { grid-template-columns: minmax(0,.88fr) minmax(400px,1.12fr); gap: 34px; }
  .hero-art { min-height: 560px; }
  .lesson-panel { padding-inline: 21px; }
  .module { min-height: 455px; }
  .closing-mark { right: 6%; width: 230px; height: 230px; }
  .closing-mark span { font-size: 138px; }
}
@media (max-width: 820px) {
  .topbar { min-height: 64px; gap: 18px; padding-inline: 16px; }
  .topbar nav { gap: 17px; font-size: 10px; }
  .top-cta { min-height: 38px; padding-inline: 12px; font-size: 10px; }
  .hero { min-height: auto; grid-template-columns: 1fr; gap: 38px; padding-top: 141px; }
  .hero-copy { max-width: 660px; }
  .hero h1 { font-size: clamp(58px, 10vw, 84px); }
  .hero-art { min-height: min(74vw, 600px); }
  .lesson-panel { top: 8%; left: 8%; width: 78%; min-height: 79%; }
  .intro, .program-heading { grid-template-columns: .35fr 1fr; gap: 34px; }
  .module-grid { grid-template-columns: 1fr 1fr; }
  .module:last-child { grid-column: 1 / -1; min-height: 420px; }
  .module:last-child .module-art { height: 195px; }
  .try-section { grid-template-columns: 1fr; gap: 40px; }
  .try-copy { max-width: 620px; }
  .closing-mark { right: 4%; opacity: .6; }
}
@media (max-width: 600px) {
  .demo-strip { min-height: 31px; padding-inline: 15px; font-size: 8px; letter-spacing: .075em; }
  .demo-strip a { font-size: 10px; }
  .topbar { position: relative; top: auto; width: calc(100% - 24px); min-height: 59px; gap: 8px; margin: 10px auto -69px; padding: 0 13px; border-radius: 18px; }
  .logo { font-size: 22px; }
  .topbar nav { display: none; }
  .top-cta { min-height: 35px; gap: 8px; margin-left: auto; padding-inline: 11px; font-size: 9px; }
  .hero { width: calc(100% - 30px); gap: 27px; padding-top: 119px; padding-bottom: 55px; }
  .eyebrow { gap: 8px; font-size: 8px; letter-spacing: .1em; }
  .eyebrow i { width: 19px; }
  .hero h1 { margin: 23px 0 17px; font-size: clamp(49px, 13vw, 68px); line-height: .97; }
  .lead { max-width: 42ch; font-size: 13px; line-height: 1.68; }
  .hero-actions { align-items: flex-start; gap: 12px; margin-top: 22px; }
  .button { min-height: 47px; gap: 12px; padding-inline: 17px; font-size: 11px; }
  .hero-meta { align-self: center; font-size: 9px; }
  .hero-foot { margin-top: 35px; font-size: 7px; }
  .hero-art { min-height: 400px; border-radius: 25px; }
  .orbit-a { width: 380px; height: 210px; top: 17%; left: 8%; }
  .orbit-b { width: 290px; height: 430px; right: -16%; top: -2%; }
  .orb-one { top: 9%; right: 9%; width: 56px; height: 56px; }
  .lesson-panel { top: 9%; left: 5%; width: 86%; min-height: 78%; padding: 15px 14px 13px; border-radius: 20px; }
  .lesson-top { gap: 6px; font-size: 6px; }
  .lesson-mark { width: 23px; height: 23px; border-radius: 7px; font-size: 12px; }
  .lesson-question { margin-top: 25px; }
  .lesson-question small { font-size: 7px; }
  .lesson-question h2 { margin: 8px 0 4px; font-size: clamp(24px, 7vw, 34px); }
  .lesson-question p { font-size: 9px; }
  .spend-chart { padding: 10px 10px 8px; border-radius: 13px; }
  .chart-labels { font-size: 6px; }
  .chart-labels b { font-size: 9px; }
  .spend-chart svg { height: 73px; margin-top: 3px; }
  .chart-days { font-size: 6px; }
  .lesson-bottom { margin-top: 10px; padding-top: 9px; font-size: 6px; }
  .lesson-bottom span { gap: 3px; }
  .lesson-bottom i { width: 14px; height: 14px; font-size: 6px; }
  .float-spend { top: 56%; right: 1%; min-width: 106px; gap: 3px; padding: 10px 11px; border-radius: 13px; }
  .float-spend small, .float-goal small { font-size: 6px; }
  .float-spend strong { font-size: 12px; }
  .float-spend > span, .float-goal > div span { font-size: 7px; }
  .float-goal { right: 5%; bottom: 5%; gap: 7px; padding: 8px 10px 8px 8px; border-radius: 13px; }
  .float-goal strong { font-size: 14px; }
  .goal-ring { width: 32px; height: 32px; box-shadow: inset 0 0 0 4px rgba(255,255,255,.18); }
  .goal-ring i { width: 16px; height: 16px; }
  .scene-index { right: 9%; bottom: 15%; font-size: 6px; }
  .art-caption { min-height: 41px; gap: 7px; padding-inline: 12px; font-size: 6px; }
  .art-caption b { font-size: 7px; }
  .section-wrap { width: calc(100% - 36px); }
  .intro { grid-template-columns: 1fr; gap: 22px; padding-top: 75px; padding-bottom: 83px; }
  .section-no { font-size: 8px; }
  .intro-copy h2, .program h2, .try-copy h2 { margin-bottom: 17px; font-size: clamp(39px, 11vw, 56px); }
  .intro-copy > p, .program-heading > div > p, .try-copy > p:not(.section-no) { font-size: 13px; line-height: 1.72; }
  .intro-stats { gap: 17px 27px; margin-top: 27px; padding-top: 17px; }
  .intro-stats b { font-size: 20px; }
  .intro-stats span { max-width: 13ch; font-size: 9px; }
  .program { padding: 75px 0 82px; }
  .program-heading { grid-template-columns: 1fr; gap: 18px; padding-bottom: 31px; }
  .module-grid { grid-template-columns: 1fr; gap: 12px; }
  .module, .module:last-child { grid-column: auto; min-height: 0; padding: 16px; border-radius: 20px; }
  .module-art, .module:last-child .module-art { height: 190px; margin: 14px 0 17px; }
  .module p { font-size: 11px; }
  .try-section { gap: 29px; padding-top: 81px; padding-bottom: 91px; }
  .try-copy h2 { margin-top: 17px; }
  .try-foot { margin-top: 21px; font-size: 7px; }
  .quiz-shell { padding: 8px; border-radius: 22px; }
  .quiz-window { padding: 18px 15px 14px; border-radius: 17px; }
  .quiz-top { gap: 8px; font-size: 6px; }
  .quiz-window h3 { margin: 21px 0 16px; font-size: 22px; }
  .options { gap: 7px; }
  .options button { min-height: 55px; grid-template-columns: 25px 1fr 14px; gap: 8px; padding: 8px 9px; border-radius: 12px; font-size: 10px; }
  .option-key { width: 24px; height: 24px; border-radius: 7px; font-size: 9px; }
  .feedback { min-height: 48px; margin-top: 13px; font-size: 10px; }
  .quiz-bottom { font-size: 6px; }
  .quiz-orbit { width: 54px; height: 54px; top: -17px; right: -10px; }
  .closing { min-height: 440px; padding: 67px 21px 80px; }
  .closing h2 { margin: 20px 0 15px; font-size: clamp(45px, 12vw, 63px); }
  .closing-inner > p:not(.section-no) { max-width: 39ch; font-size: 12px; }
  .closing-mark { top: auto; right: 0; bottom: -78px; width: 175px; height: 175px; opacity: .33; transform: rotate(-12deg); }
  .closing-mark span { font-size: 105px; }
  .closing-coordinate { right: 20px; bottom: 15px; font-size: 6px; }
  footer { width: calc(100% - 36px); min-height: 104px; flex-wrap: wrap; gap: 2px 12px; padding: 18px 0; }
  footer .logo { font-size: 20px; }
  footer p { order: 3; width: 100%; font-size: 9px; }
  footer > a:last-child { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  :root { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}