.wrap { max-width: 1160px; margin: 0 auto; padding-left: 16px; padding-right: 16px; }
header { position: fixed; top: 0; left: 0; right: 0; z-index: 30; transition: background .3s, box-shadow .3s, color .3s; color: #F6F1E7; }
header .logo { color: inherit; }
header.scrolled { background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); box-shadow: 0 1px 0 var(--line); color: var(--ink); }
header .wrap { display: flex; align-items: center; gap: 12px; height: 66px; }
header nav { margin-left: auto; display: flex; gap: 4px; align-items: center; }
header nav a.t { color: inherit; text-decoration: none; font-weight: 600; padding: 8px 12px; border-radius: 99px; transition: background .2s; }
header nav a.t:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
.btn.sm { padding: 10px 18px; font-size: 15px; }
@media (max-width: 640px) { header nav a.hide { display: none; } }

/* ---- hero: a night panel with drifting colour, the engine in a round cutout ---- */
.hero { position: relative; background: #141B2D; color: #F6F1E7; padding: 108px 0 110px; overflow: hidden; isolation: isolate; }
.aurora { position: absolute; inset: -20%; z-index: -1; filter: blur(70px); opacity: .85; }
.aurora i { position: absolute; border-radius: 50%; }
.aurora .a1 { width: 46vw; height: 46vw; left: 48%; top: 8%; background: #FF5B2E; opacity: .55; animation: drift1 18s ease-in-out infinite; }
.aurora .a2 { width: 40vw; height: 40vw; left: 4%; top: 40%; background: #5B3F99; opacity: .7; animation: drift2 22s ease-in-out infinite; }
.aurora .a3 { width: 30vw; height: 30vw; left: 30%; top: -10%; background: #13877A; opacity: .5; animation: drift1 26s ease-in-out infinite reverse; }
@keyframes drift1 { 50% { transform: translate(-8vw, 6vh) scale(1.15); } }
@keyframes drift2 { 50% { transform: translate(10vw, -8vh) scale(.9); } }
.hgrid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: center; }
.hero .chip.glass { background: rgba(246,241,231,.1); color: #F6F1E7; border: 1px solid rgba(246,241,231,.18); backdrop-filter: blur(6px); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #FF5B2E; display: inline-block; box-shadow: 0 0 0 0 rgba(255,91,46,.6); animation: ping 1.8s infinite; }
@keyframes ping { 70% { box-shadow: 0 0 0 8px rgba(255,91,46,0); } 100% { box-shadow: 0 0 0 0 rgba(255,91,46,0); } }
.hero h1 { font-size: clamp(40px, 6.2vw, 76px); font-weight: 800; margin: 18px 0 18px; color: #F6F1E7; }
.hl { position: relative; color: #FF7A4F; white-space: nowrap; display: inline-block; padding-right: .08em; }
.hl svg { position: absolute; left: 0; right: 0; bottom: -.12em; width: 100%; height: .3em; overflow: visible; }
.hl path { fill: none; stroke: #FFC23D; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 240; stroke-dashoffset: 240; }
.rv.in .hl path, h1.in .hl path { animation: draw 1.1s .6s var(--ease) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.lead { font-size: 19px; color: rgba(246,241,231,.78); max-width: 32em; margin: 0 0 28px; }
.ctas { display: flex; gap: 10px; flex-wrap: wrap; }
.glassbtn { background: rgba(246,241,231,.08); color: #F6F1E7; border: 1px solid rgba(246,241,231,.22); }
.glassbtn:hover { background: rgba(246,241,231,.16); }
.proof { display: flex; align-items: center; gap: 12px; margin-top: 26px; font-size: 14px; font-weight: 600; color: rgba(246,241,231,.65); flex-wrap: wrap; }
.proof i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.porthole { position: relative; aspect-ratio: 1; width: 100%; max-width: 520px; margin: 0 auto; }
.porthole .window { position: absolute; inset: 7%; border-radius: 50%; overflow: hidden;
  background: radial-gradient(70% 70% at 60% 35%, #2A3352, #141B2D 75%); box-shadow: inset 0 0 0 2px rgba(246,241,231,.16), inset 0 -30px 80px rgba(0,0,0,.5), 0 0 0 10px rgba(246,241,231,.04), 0 0 60px rgba(255,91,46,.18), 0 30px 80px rgba(0,0,0,.45); }
.porthole .eng { position: absolute; inset: 0; }
.orbit { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 40s linear infinite; }
.orbit circle { fill: none; stroke: rgba(246,241,231,.25); stroke-width: .6; stroke-dasharray: 2 5; }
.orbit.o2 { inset: -4%; width: 108%; height: 108%; animation-duration: 70s; animation-direction: reverse; }
.orbit.o2 circle { stroke: rgba(255,194,61,.3); stroke-dasharray: 30 14 2 14; }
@keyframes spin { to { transform: rotate(360deg); } }
.tag { position: absolute; padding: 9px 14px; border-radius: 14px; background: rgba(246,241,231,.94); color: #141B2D; font-size: 13px; font-weight: 600;
  box-shadow: 0 12px 30px rgba(0,0,0,.25); white-space: nowrap; animation: floaty 6s ease-in-out infinite; }
.tag b { color: #E0531F; }
.tag i { width: 7px; height: 7px; border-radius: 50%; background: #13877A; display: inline-block; margin-right: 4px; }
.tag.t1 { right: -2%; top: 16%; } .tag.t2 { left: -4%; bottom: 20%; animation-delay: -2s; } .tag.t3 { right: 6%; bottom: 2%; animation-delay: -4s; background: #FF5B2E; color: #fff; }
.wave { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 70px; }
.wave path { fill: var(--bg); }
@media (max-width: 860px) {
  .hero { padding: 92px 0 84px; }
  .hgrid { grid-template-columns: 1fr; gap: 26px; text-align: center; }
  .hero h1 { font-size: clamp(36px, 10.5vw, 52px); }
  .lead { margin-left: auto; margin-right: auto; font-size: 17px; }
  .ctas, .proof { justify-content: center; }
  .porthole { max-width: 360px; }
  .tag { font-size: 12px; padding: 7px 11px; } .tag.t1 { right: -2%; top: 4%; } .tag.t2 { left: -2%; bottom: 14%; }
}

/* ---- marquee of courses ---- */
.marquee { overflow: hidden; padding: 14px 0; background: var(--bg); -webkit-mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.track { display: flex; gap: 12px; width: max-content; animation: marq 38s linear infinite; }
.marquee:hover .track { animation-play-state: paused; }
.track span { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 99px; font-weight: 700; color: #fff; white-space: nowrap; font-size: 15px; }
@keyframes marq { to { transform: translateX(-50%); } }

section { padding: 72px 0; position: relative; }
.head { margin-bottom: 30px; }
section h2 { font-size: clamp(30px, 4.4vw, 48px); font-weight: 800; max-width: 18em; }
.head .sub { color: var(--muted); font-size: 18px; max-width: 36em; margin: 0; }
.eyebrow { font-weight: 800; color: var(--brand); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 10px; }
.eyebrow.light { color: #FFC23D; }
.serif { color: var(--brand); }
@media (max-width: 860px) { .head { text-align: center; } section h2, .head .sub { margin-left: auto; margin-right: auto; } section { padding: 56px 0; } }

/* ---- features ---- */
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 960px) { .grid4 { grid-template-columns: 1fr 1fr; } }
.feat { padding: 24px; transition: transform .4s var(--spring), box-shadow .3s; }
.feat:hover { transform: translateY(-6px) rotate(-.4deg); box-shadow: 0 20px 40px rgba(20,27,45,.12); }
.feat .ic { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; color: #fff; margin-bottom: 16px; transition: transform .5s var(--spring); }
.feat:hover .ic { transform: rotate(-10deg) scale(1.1); }
.feat h3 { font-size: 19px; } .feat p { margin: 0; color: var(--muted); }
@media (max-width: 560px) { .feat { text-align: center; } .feat .ic { margin-left: auto; margin-right: auto; } }

/* ---- timeline ---- */
.dayband { background: var(--bg2); }
.timeline { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; position: relative; }
.timeline::before { content: ''; position: absolute; left: 4%; right: 4%; top: 22px; height: 3px; border-radius: 3px; background: var(--line); }
.timeline::after { content: ''; position: absolute; left: 4%; top: 22px; height: 3px; border-radius: 3px; width: 0; background: linear-gradient(90deg, var(--brand), var(--sun)); transition: width 1.8s .3s var(--ease); }
.timeline.in::after { width: 92%; }
.timeline li { position: relative; padding-top: 58px; }
.timeline li::before { content: ''; position: absolute; z-index: 1; left: 0; top: 10px; width: 27px; height: 27px; border-radius: 50%; background: var(--card); border: 3px solid var(--brand); box-shadow: 0 0 0 6px var(--bg2);
  transform: scale(0); transition: transform .5s var(--spring); }
.timeline.in li::before { transform: scale(1); }
.timeline li:nth-child(2)::before { transition-delay: .35s; } .timeline li:nth-child(3)::before { transition-delay: .7s; } .timeline li:nth-child(4)::before { transition-delay: 1.05s; } .timeline li:nth-child(5)::before { transition-delay: 1.4s; background: var(--brand); }
.timeline .t { font-size: 13px; font-weight: 800; color: var(--brand); display: block; }
.timeline b { display: block; font-size: 18px; margin: 2px 0 4px; } .timeline li > span:last-child { color: var(--muted); font-size: 15px; }
@media (max-width: 860px) {
  /* phones: a centred stepper, each step under its own dot with a short glowing link between */
  .timeline { grid-template-columns: 1fr; gap: 0; max-width: 420px; margin: 0 auto; text-align: center; }
  .timeline::before, .timeline::after { display: none; }
  .timeline li { padding: 40px 0 46px; } .timeline li:last-child { padding-bottom: 0; }
  .timeline li::before { top: 0; left: calc(50% - 13.5px); }
  .timeline li:not(:last-child)::after { content: ''; position: absolute; left: calc(50% - 1.5px); bottom: 8px; width: 3px; height: 30px; border-radius: 3px;
    background: linear-gradient(var(--brand), var(--sun)); transform: scaleY(0); transform-origin: top; transition: transform .5s var(--ease); }
  .timeline.in li::after { transform: scaleY(1); }
  .timeline li:nth-child(2)::after { transition-delay: .35s; } .timeline li:nth-child(3)::after { transition-delay: .7s; } .timeline li:nth-child(4)::after { transition-delay: 1.05s; }
}

/* ---- courses ---- */
.courses { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 14px; }
.course { padding: 22px; position: relative; overflow: hidden; cursor: default; transition: transform .45s var(--spring), box-shadow .3s; transform-style: preserve-3d; }
.course::before { content: ''; position: absolute; right: -36px; top: -36px; width: 120px; height: 120px; border-radius: 50%; background: var(--c); opacity: .14; transition: transform .6s var(--spring); }
.course:hover::before { transform: scale(1.6); }
.course:hover { box-shadow: 0 22px 44px rgba(20,27,45,.14); }
.course .ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--c); color: #fff; margin-bottom: 14px; }
.course h3 { font-size: 20px; } .course p { margin: 0 0 14px; color: var(--muted); }
.course .meta { font-size: 13px; font-weight: 700; color: var(--c); display: flex; gap: 10px; }
@media (max-width: 560px) {
  .courses { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 16px 18px; margin: 0 -16px; gap: 12px; scrollbar-width: none; }
  .courses::-webkit-scrollbar { display: none; }
  .course { flex: 0 0 78%; scroll-snap-align: center; text-align: center; } .course .ic { margin-left: auto; margin-right: auto; } .course .meta { justify-content: center; }
}
.dots { display: none; justify-content: center; gap: 6px; margin-top: 4px; } .dots i { width: 7px; height: 7px; border-radius: 9px; background: var(--line); transition: all .3s; } .dots i.on { width: 22px; background: var(--brand); }
@media (max-width: 560px) { .dots { display: flex; } }

/* ---- plum band with the phone ---- */
.plumband { background: linear-gradient(140deg, #2A1B4D, #3E2A6B 55%, #5B3F99); color: #F6F1E7; overflow: hidden; }
.plumband h2 { color: #F6F1E7; } .plumband .serif { color: #FFC23D; } .plumband .sub { color: rgba(246,241,231,.8); }
.pgrid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; }
.ticks { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 10px; }
.ticks li { display: flex; gap: 10px; align-items: center; font-weight: 600; }
.ticks li::before { content: ''; width: 22px; height: 22px; border-radius: 50%; flex: none; background: #FFC23D url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141B2D' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat; }
.phone { width: 290px; margin: 0 auto; border-radius: 44px; padding: 12px; background: #0B0F1A; box-shadow: 0 40px 90px rgba(0,0,0,.45), inset 0 0 0 2px #2A3352; transform: rotate(4deg); }
.phone.in { animation: floaty 7s 1s ease-in-out infinite; }
.scr { border-radius: 34px; background: #F6F1E7; color: #141B2D; padding: 26px 16px 18px; min-height: 520px; display: grid; gap: 12px; align-content: start; }
.ph-top { display: flex; justify-content: space-between; align-items: center; } .ph-top b { font-size: 18px; }
.fl { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; color: #E0531F; background: #fff; padding: 5px 10px; border-radius: 99px; }
.fl svg { width: 16px; height: 16px; fill: #FF7A4F; animation: flicker 1.2s ease-in-out infinite; transform-origin: bottom; }
.ph-week { display: flex; justify-content: space-between; background: #fff; border-radius: 16px; padding: 10px; }
.ph-week i { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 11px; font-weight: 800; color: #5E6475; border: 2px solid #E3D8C6; }
.phone.in .ph-week i.on { background: #FF7A4F; border-color: #FF7A4F; color: #fff; animation: pop .5s var(--spring) both; animation-delay: calc(.6s + var(--i) * .12s); }
.ph-card { border-radius: 18px; padding: 16px; color: #fff; background: linear-gradient(135deg, #13877A, #0A4D45); display: grid; gap: 8px; }
.ph-card small { opacity: .85; font-weight: 700; font-size: 11px; } .ph-card b { font-size: 17px; line-height: 1.25; }
.ph-card .pb { background: #fff; color: #141B2D; border-radius: 99px; padding: 8px 12px; font-weight: 700; font-size: 13px; justify-self: start; }
.ph-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .ph-stats div { background: #fff; border-radius: 14px; padding: 10px 4px; text-align: center; }
.ph-stats b { display: block; font-size: 22px; } .ph-stats span { font-size: 11px; color: #5E6475; font-weight: 700; }
.ph-lvl { background: #fff; border-radius: 14px; padding: 12px; font-size: 12px; font-weight: 700; } .ph-lvl i { display: block; height: 8px; border-radius: 8px; background: #E3D8C6; margin-top: 8px; overflow: hidden; }
.ph-lvl em { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #FF5B2E, #FFC23D); border-radius: 8px; transition: width 1.6s 1s var(--ease); } .phone.in .ph-lvl em { width: 62%; }
@media (max-width: 860px) { .pgrid { grid-template-columns: 1fr; text-align: center; } .ticks { display: inline-grid; text-align: left; } .ticks li { align-items: flex-start; } .ticks li::before { margin-top: 1px; } .phone { transform: rotate(0); width: 270px; } }

/* ---- pricing ---- */
.prices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
@media (max-width: 900px) { .prices { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; } .price.best { order: -1; margin-top: 10px; } }
.price { padding: 26px; display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; transition: transform .45s var(--spring); }
.price ul { align-self: center; text-align: left; } .price .btn { align-self: stretch; }
.bill { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; width: 100%; margin: 8px 0 14px; }
.bill button { position: relative; border: 1.5px solid var(--line); background: transparent; border-radius: 14px; padding: 9px 4px 8px; cursor: pointer; display: grid; gap: 1px; transition: border-color .2s, background .25s, transform .3s var(--spring); }
.bill button span { font-size: 12px; font-weight: 700; color: var(--muted); } .bill button b { font-size: 15px; }
.bill button:hover { transform: translateY(-2px); }
.bill button.on { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 10%, transparent); }
.bill button.on span { color: var(--brand); }
.bill em { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); font-style: normal; font-size: 10px; font-weight: 800; background: var(--teal); color: #fff; padding: 2px 7px; border-radius: 99px; white-space: nowrap; }
.price:hover { transform: translateY(-6px); }
.price.best { border: 0; background: var(--card); isolation: isolate; }
.price.best::before { content: ''; position: absolute; inset: -2px; border-radius: calc(var(--r) + 2px); z-index: -2;
  background: conic-gradient(from var(--a, 0deg), #FF5B2E, #FFC23D, #13877A, #5B3F99, #FF5B2E); animation: rot 6s linear infinite; }
.price.best::after { content: ''; position: absolute; inset: 0; border-radius: var(--r); background: var(--card); z-index: -1; }
@property --a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes rot { to { --a: 360deg; } }
.price .chip.best { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--brand); color: #fff; white-space: nowrap; }
.price h3 { font-size: 18px; }
.price .amt { font-size: 44px; font-weight: 800; letter-spacing: -0.04em; } .price .amt small { font-size: 16px; color: var(--muted); font-weight: 600; letter-spacing: 0; }
.price ul { list-style: none; padding: 0; margin: 16px 0 22px; flex: 1; } .price li { display: flex; gap: 8px; margin: 9px 0; } .price li svg { color: var(--teal); flex: none; margin-top: 2px; }
.promise { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 20px; }
@media (max-width: 900px) { .promise { grid-template-columns: 1fr 1fr; } }
.promise div { padding: 18px; border-radius: var(--r); background: var(--bg2); text-align: center; }
.promise b { display: block; margin-bottom: 4px; } .promise span { color: var(--muted); font-size: 14px; }
.promise svg { color: var(--brand); margin-bottom: 6px; }

.faq { max-width: 820px; }
details { border-bottom: 1px solid var(--line); padding: 18px 0; }
summary { font-weight: 700; font-size: 17px; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 12px; align-items: center; }
summary::-webkit-details-marker { display: none; }
summary::after { content: '+'; color: var(--brand); font-size: 26px; line-height: 1; transition: transform .35s var(--spring); flex: none; }
details[open] summary::after { transform: rotate(45deg); }
details p { color: var(--muted); margin: 10px 0 0; animation: rise .4s var(--ease); }
@media (max-width: 860px) { .faq > h2 { text-align: center; } }

.final { position: relative; overflow: hidden; text-align: center; padding: 64px 22px; border-radius: 32px; color: #fff; isolation: isolate;
  background: linear-gradient(120deg, #FF5B2E, #E0531F 45%, #B7365A); }
.final h2 { color: #fff; margin: 0 auto 10px; } .final .serif { color: #FFE3A3; } .final p { opacity: .9; margin: 0 0 24px; font-size: 18px; }
.final .btn { background: #141B2D; color: #fff; }
.final i { position: absolute; z-index: -1; border-radius: 30%; background: rgba(255,255,255,.12); animation: floaty 9s ease-in-out infinite; }
.final .b1 { width: 160px; height: 160px; left: -40px; top: -50px; transform: rotate(20deg); }
.final .b2 { width: 90px; height: 90px; right: 8%; top: 18%; border-radius: 50%; animation-delay: -3s; }
.final .b3 { width: 220px; height: 220px; right: -80px; bottom: -110px; animation-delay: -6s; }
footer { padding: 36px 0 48px; color: var(--muted); font-size: 14px; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; }
footer a { color: var(--muted); }
@media (max-width: 860px) { footer .wrap { justify-content: center; text-align: center; } }

/* phones: features as a tidy 2 x 2, the last course card spans on wide screens */
@media (max-width: 560px) {
  .grid4 { grid-template-columns: 1fr 1fr; gap: 10px; }
  .feat { padding: 18px 12px; --n: 9px; } .feat .ic { width: 44px; height: 44px; border-radius: 14px; margin-bottom: 10px; }
  .feat h3 { font-size: 16px; } .feat p { font-size: 13.5px; line-height: 1.45; }
  footer .wrap { flex-direction: column; gap: 10px; }
}
@media (min-width: 1100px) { .courses { grid-template-columns: repeat(4, 1fr); } .course:last-child { grid-column: span 2; } }