:root {
  color-scheme: light;
  --ink: #1d1d1f;
  --soft: #6e6e73;
  --canvas: #f5f5f7;
  --paper: #ffffff;
  --violet: #6d4aff;
  --violet-dark: #4b2fc7;
  --blue: #0a84ff;
  --mint: #31c7a1;
  --gold: #ffbd17;
  --line: rgba(29, 29, 31, .1);
  --shadow: 0 24px 70px rgba(29, 29, 31, .1);
}

body {
  background:
    radial-gradient(circle at 88% 5%, rgba(109, 74, 255, .08), transparent 30rem),
    radial-gradient(circle at 5% 22%, rgba(49, 199, 161, .05), transparent 28rem),
    var(--canvas);
}

.site-header { background: rgba(245, 245, 247, .82); }
.nav-shell { min-height: 68px; }

.hero {
  grid-template-columns: minmax(0, 1.02fr) minmax(460px, .98fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  min-height: 760px;
  padding: clamp(4.5rem, 8vw, 7.5rem) 0;
}
.hero-logo { width: clamp(220px, 26vw, 322px); margin-bottom: 1.35rem; }
.eyebrow, .kicker { font-size: .76rem; letter-spacing: .135em; }
.hero h1 { max-width: 720px; margin: .72rem 0 1.25rem; font-size: clamp(3.8rem, 7.2vw, 6.8rem); text-wrap: balance; }
.hero-word { padding-right: .09em; }
.hero-copy > p { max-width: 640px; margin-bottom: 1.85rem; }
.hero-trust { display: flex; flex-wrap: wrap; gap: .5rem 1.15rem; margin: 1.65rem 0 0; padding: 0; color: var(--soft); list-style: none; font-size: .82rem; font-weight: 700; }
.hero-trust li { display: inline-flex; align-items: center; gap: .45rem; }
.hero-trust li::before { content: ""; width: 6px; height: 6px; background: var(--mint); border-radius: 50%; box-shadow: 0 0 0 4px rgba(49, 199, 161, .12); }

.learning-showcase {
  min-height: 570px;
  padding: clamp(1.4rem, 3vw, 2rem);
  color: #fff;
  background: linear-gradient(145deg, #17171b 0%, #252038 54%, #3c2877 100%);
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 36px;
  box-shadow: 0 32px 78px rgba(35, 27, 54, .22);
}
.learning-showcase::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .16; background-image: linear-gradient(rgba(255,255,255,.13) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.13) 1px, transparent 1px); background-size: 44px 44px; mask-image: linear-gradient(to bottom, black, transparent 82%); }
.showcase-glow { filter: blur(8px); }
.glow-one { width: 330px; height: 330px; right: -110px; top: -120px; background: rgba(10, 132, 255, .42); }
.glow-two { width: 280px; height: 280px; left: -120px; bottom: -130px; background: rgba(49, 199, 161, .28); }
.showcase-heading { padding: .25rem .25rem 1.25rem; }
.showcase-heading span { display: block; margin-bottom: .35rem; color: #c9c1e9; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.showcase-heading strong { display: block; max-width: 440px; font-size: clamp(1.65rem, 3vw, 2.35rem); line-height: 1.05; letter-spacing: -.04em; }
.audience-stage { display: grid; gap: .7rem; }
.journey-card { display: grid; grid-template-columns: 112px 1fr; gap: 1rem; align-items: center; min-height: 118px; padding: .9rem 1rem; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .14); border-radius: 20px; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.journey-card:nth-child(2) { margin-inline: 1.2rem 0; background: rgba(255, 255, 255, .15); }
.journey-card > div:last-child { min-width: 0; }
.journey-card span { display: block; color: #c7b9ff; font-size: .7rem; font-weight: 850; letter-spacing: .11em; text-transform: uppercase; }
.journey-card strong, .journey-card small { display: block; }
.journey-card strong { margin: .1rem 0 .2rem; font-size: 1.08rem; letter-spacing: -.015em; }
.journey-card small { color: rgba(255, 255, 255, .67); line-height: 1.35; }
.journey-visual { position: relative; display: grid; place-items: center; width: 104px; height: 92px; }
.journey-visual > img { width: 96px; height: 96px; object-fit: contain; filter: drop-shadow(0 12px 16px rgba(0, 0, 0, .28)); }
.avatar-duo { display: block; }
.avatar-duo img { position: absolute; width: 82px; height: 82px; object-fit: contain; }
.avatar-duo img:first-child { left: -2px; bottom: 1px; z-index: 2; }
.avatar-duo img:last-child { right: -9px; top: -3px; z-index: 1; }
.custom-avatar { width: 78px; height: 78px; margin-inline: auto; background: linear-gradient(145deg, #6d4aff, #0a84ff 62%, #31c7a1); border: 1px solid rgba(255,255,255,.5); border-radius: 24px; box-shadow: 0 12px 28px rgba(0,0,0,.25); rotate: -4deg; }
.custom-avatar::before { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(255,255,255,.38); border-radius: 17px; }
.custom-avatar span { color: #fff; font-size: 2rem; line-height: 1; text-shadow: 0 4px 12px rgba(0,0,0,.25); }
.custom-avatar i { position: absolute; width: 5px; height: 5px; background: #fff; border-radius: 50%; }
.custom-avatar i:nth-of-type(1) { left: 15px; top: 17px; }
.custom-avatar i:nth-of-type(2) { right: 16px; top: 13px; }
.custom-avatar i:nth-of-type(3) { right: 13px; bottom: 17px; }
.showcase-foot { display: flex; align-items: center; gap: .55rem; padding: 1.15rem .35rem .15rem; color: rgba(255,255,255,.68); font-size: .77rem; }
.showcase-foot > span { width: 8px; height: 8px; background: var(--mint); border-radius: 50%; box-shadow: 0 0 0 5px rgba(49,199,161,.12); }

.promise-grid { scroll-margin-top: 90px; }
.promise-card { position: relative; min-height: 265px; overflow: hidden; padding: 1.65rem; background: var(--paper); border: 1px solid var(--line); border-radius: 24px; box-shadow: 0 12px 38px rgba(29,29,31,.055); }
.promise-card::after { content: ""; position: absolute; width: 190px; height: 190px; right: -95px; bottom: -110px; border-radius: 50%; background: var(--card-wash); }
.promise-purple { --card-accent: var(--violet); --card-wash: rgba(109,74,255,.16); }
.promise-blue { --card-accent: var(--blue); --card-wash: rgba(10,132,255,.15); }
.promise-mint { --card-accent: #169b78; --card-wash: rgba(49,199,161,.18); }
.promise-number { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 34px; color: var(--card-accent); border-bottom: 2px solid var(--card-accent); font-size: .78rem; font-weight: 850; letter-spacing: .08em; }
.promise-card > div { position: relative; z-index: 1; }
.audience-label { display: block; margin: 1.5rem 0 .35rem; color: var(--card-accent); font-size: .71rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.promise-card strong { display: block; max-width: 290px; margin-top: 0; font-size: 1.45rem; line-height: 1.1; letter-spacing: -.03em; }
.promise-card p { margin-top: .55rem; }

.finder, .courses, #para-todos { scroll-margin-top: 88px; }
.finder { border: 1px solid var(--line); border-radius: 30px; box-shadow: 0 16px 48px rgba(29,29,31,.065); }
.section-heading h2 { text-wrap: balance; }
.section-intro { max-width: 630px; margin: .7rem 0 0; color: var(--soft); font-size: 1.05rem; }
.result-count { flex: 0 0 auto; }
.search-box input { border-radius: 16px; }
.subject-icon { border-radius: 13px; }
.course-card { border-radius: 24px; box-shadow: 0 12px 36px rgba(29,29,31,.055); }
.course-emoji { width: 58px; height: 58px; border-radius: 16px; font-size: 1.7rem; }
.course-tags span { border-radius: 7px; }
.empty-state { border-radius: 24px; }
.empty-state > span { color: var(--violet); }

.install-card { background: linear-gradient(135deg, #17171a, #242031 52%, #442a8f); border-radius: 32px; }
.install-card::after { content: ""; position: absolute; width: 360px; height: 360px; left: 15%; bottom: -280px; background: radial-gradient(circle, rgba(49,199,161,.3), transparent 68%); }
.install-card h2 { text-wrap: balance; }
.install-note { display: flex; align-items: center; gap: .75rem; max-width: 590px; margin-top: 1.5rem; padding-top: 1.2rem; border-top: 1px solid rgba(255,255,255,.15); color: rgba(255,255,255,.74); font-size: .88rem; }
.install-note > span:first-child { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 auto; color: #fff; background: rgba(255,255,255,.12); border-radius: 9px; }
.device-screen { gap: .7rem; }
.device-screen small { color: var(--soft); font-weight: 650; }

@media (max-width: 1100px) {
  .hero { grid-template-columns: 1fr; min-height: auto; }
  .hero-trust { justify-content: center; }
  .learning-showcase { min-height: 560px; text-align: left; }
  .promise-card { display: grid; grid-template-columns: auto 1fr; gap: 1.2rem; align-items: start; min-height: 190px; }
  .audience-label { margin-top: .2rem; }
}

@media (max-width: 600px) {
  .hero h1 { font-size: clamp(3rem, 13.5vw, 4.2rem); }
  .hero-word { white-space: normal; }
  .hero-actions { gap: .55rem .8rem; }
  .primary-button, .text-button { font-size: .94rem; }
  .hero-trust { display: grid; justify-content: start; width: max-content; max-width: 100%; margin-inline: auto; text-align: left; }
  .learning-showcase { min-height: auto; padding: 1.15rem; border-radius: 28px; }
  .showcase-heading { padding: .25rem .1rem 1rem; }
  .journey-card { grid-template-columns: 88px 1fr; min-height: 108px; padding: .75rem; border-radius: 17px; }
  .journey-card:nth-child(2) { margin-inline: 0; }
  .journey-visual { width: 82px; height: 76px; }
  .journey-visual > img { width: 78px; height: 78px; }
  .avatar-duo img { width: 66px; height: 66px; }
  .custom-avatar { width: 66px; height: 66px; border-radius: 20px; }
  .custom-avatar span { font-size: 1.6rem; }
  .journey-card small { font-size: .74rem; }
  .promise-card { grid-template-columns: 1fr; min-height: 230px; }
  .finder { border-radius: 24px; }
  .install-card { border-radius: 26px; }
}

@media (prefers-reduced-transparency: reduce) {
  .journey-card { background: #fff; color: var(--ink); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .journey-card span { color: var(--violet-dark); }
  .journey-card small { color: var(--soft); }
}

@media (prefers-reduced-motion: no-preference) {
  .hero-trust { animation-delay: .46s; }
  .learning-showcase { animation-name: showcase-in; animation-delay: .18s; animation-duration: 1s; }
  .journey-card { transition: transform .25s ease, background .25s ease, border-color .25s ease; }
  .journey-card:hover { transform: translateX(-5px); background: rgba(255,255,255,.17); }
  .custom-avatar { animation: avatar-turn 5s ease-in-out infinite; }
  @keyframes avatar-turn { 50% { transform: translateY(-5px) rotate(7deg); } }
}

@media (prefers-reduced-motion: reduce) {
  .custom-avatar { rotate: 0; }
}