@font-face {
  font-family: Sora;
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('/assets/sora-latin.woff2') format('woff2');
}

:root {
  color-scheme: light;
  font-family: Sora, sans-serif;
  color: #332064;
  background: #f3efff;
  font-synthesis: none;
  --purple: #7548e7;
  --muted: #756792;
  --turquoise: #32d6c2;
}

* { box-sizing: border-box; }
body { margin: 0; }
img { display: block; max-width: 100%; }
.icon-library { position: absolute; width: 0; height: 0; overflow: hidden; }
svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.page { position: relative; isolation: isolate; height: 100vh; height: 100dvh; overflow: hidden; }
.background { position: absolute; inset: 0; z-index: -2; background: radial-gradient(ellipse at 49% 46%, #fff 0%, #faf8ff 30%, #f1ebff 68%, #e7ddfc 100%); }
.background::after { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%238c72b0' opacity='.16' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E"); opacity: .2; }
.tile { position: absolute; display: block; border-radius: 55px; background: linear-gradient(135deg, #ddd0fc80, #e9e0ff30); border: 1px solid #ffffff65; }
.tile-one { width: 245px; height: 260px; top: 15%; left: -150px; }
.tile-two { width: 135px; height: 100px; top: 8%; left: 31%; border-radius: 28px; opacity: .7; }
.tile-three { width: 370px; height: 350px; top: 17%; right: -170px; border-radius: 80px; transform: rotate(-5deg); }
.tile-four { width: 300px; height: 250px; bottom: -180px; left: 50%; }
.dot-field { position: absolute; width: 145px; height: 135px; background-image: radial-gradient(#b29bdd 1.2px, transparent 1.3px); background-size: 18px 18px; opacity: .42; }
.dots-one { left: 7%; top: 14%; }
.dots-two { right: 3%; top: 64%; }
.dots-three { left: 32%; bottom: 7%; width: 110px; height: 75px; }
.page-footer { position: absolute; left: 4.5%; right: 4.5%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.contact-email, .coming-next p { font-family: Sora, sans-serif; font-size: 12px; font-weight: 400; line-height: 20px; letter-spacing: .25px; }
.contact-email { padding: 6px 8px; color: #75608f; text-decoration: none; }
.contact-email:hover { color: #533080; text-decoration: underline; text-underline-offset: 4px; }
.contact-email:focus-visible { outline: 2px solid #7548e7; outline-offset: 3px; border-radius: 4px; }
.hero { position: relative; height: 100%; max-width: 1680px; margin: 0 auto; }
.hero-copy { position: absolute; z-index: 3; left: 50%; top: 48%; width: min(560px, 44%); transform: translate(-43%, -50%); text-align: center; }
.brand { width: 325px; height: auto; margin: 0 auto 36px; }
.brand-heading { margin: 0; }
.coming-next { margin-top: 45px; }
.building-line { display: block; height: 6px; width: 205px; margin: 0 auto; overflow: hidden; border-radius: 9px; background: #e7ddfa; box-shadow: 0 1px 1px #7453ae0a inset; }
.building-line > span { position: relative; display: block; width: 80%; height: 100%; overflow: hidden; background: linear-gradient(90deg, #a689f4, #7444e4); border-radius: inherit; }
.building-line > span::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; background: linear-gradient(100deg, transparent, #ffffff, transparent); opacity: 0; transform: translateX(-120%); animation: building-shine 6s ease-in-out infinite; }
.coming-next p { margin: 16px 0 0; color: #8b7aa7; }
.assembly { position: absolute; z-index: 2; width: 340px; height: 670px; left: calc(50% - 585px); top: calc(50% - 350px); }
.logo-upper { position: absolute; z-index: 2; width: 100%; height: auto; max-width: none; top: -420px; left: 0; animation: assemble 8s cubic-bezier(.45, 0, .3, 1) infinite; will-change: transform; }
.logo-lower { position: absolute; z-index: 2; width: 100%; height: auto; top: 340px; left: 0; }
.landing-shadow { position: absolute; z-index: 1; width: 150px; height: 22px; left: 38px; top: 510px; background: radial-gradient(ellipse, #53308080 0%, #68439550 45%, transparent 75%); opacity: .35; filter: blur(7px); border-radius: 50%; transform: rotate(-5deg); animation: shadow 8s cubic-bezier(.45, 0, .3, 1) infinite; }
.assembly-grid { position: absolute; z-index: 0; top: 350px; left: 16px; width: 340px; height: 220px; transform: rotate(-5deg) skewX(42deg) scaleY(.4); border: 1px dashed #bd9eee70; background-image: linear-gradient(#c4abef50 1px, transparent 1px), linear-gradient(90deg, #c4abef50 1px, transparent 1px); background-size: 40px 40px; mask-image: radial-gradient(ellipse, black 40%, transparent 75%); }
.fit-marks { position: absolute; top: 326px; right: -6px; width: 32px; height: 45px; transform: rotate(8deg); }
.fit-marks i { position: absolute; width: 20px; height: 4px; border-radius: 3px; background: #a586e6; }
.fit-marks i:nth-child(1) { transform: rotate(-48deg); top: 0; left: 0; }
.fit-marks i:nth-child(2) { transform: rotate(-12deg); top: 16px; left: 13px; }
.fit-marks i:nth-child(3) { transform: rotate(20deg); top: 33px; left: 7px; width: 13px; }
.decoration { pointer-events: none; }
.floating-card { position: absolute; z-index: 1; padding: 21px; border: 1px solid #fff; border-radius: 23px; background: linear-gradient(135deg, #ffffffba, #ffffff61); box-shadow: 0 15px 40px #7146b30a, inset 0 2px 2px #ffffffd9; color: #54417e; font-size: 12px; line-height: 1.65; }
.floating-card::before { content: ''; position: absolute; z-index: -1; inset: -12px 12px 11px -12px; border: 1px solid #ffffff85; border-radius: inherit; background: #ffffff15; }
.card-heading { display: flex; align-items: center; gap: 13px; font-weight: 500; }
.icon-box { display: grid; place-items: center; flex-shrink: 0; width: 45px; height: 45px; color: #8559dc; background: linear-gradient(135deg, #eee5ff, #dfd2fb); border-radius: 13px; }
.icon-box svg { width: 27px; height: 27px; }
.placeholder-line { display: block; width: 100%; height: 6px; border-radius: 6px; background: #e4daf7; margin-top: 15px; }
.placeholder-line.short { width: 71%; margin-top: 8px; }
.ideas-card { width: 183px; left: 2%; top: 22%; transform: rotate(-7deg); }
.mini-track { display: block; height: 11px; background: #e8defb; margin-top: 21px; border-radius: 9px; }
.mini-track i { display: block; width: 31%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #72e4d7, #35cebd); }
.features-card { top: 22%; right: 2.6%; width: 230px; transform: rotate(-6deg); }
.feature-bottom { display: flex; gap: 19px; align-items: center; margin-top: 4px; }
.feature-bottom > div { flex: 1; }
.decorative-toggle { display: block; width: 34px; height: 19px; margin-top: 14px; padding: 3px; background: #54d8c8; border-radius: 20px; }
.decorative-toggle::after { content: ''; display: block; width: 13px; height: 13px; background: white; margin-left: auto; border-radius: 50%; }
.learning-card { top: 49%; right: 5%; width: 183px; padding: 24px 22px; transform: rotate(5deg); }
.learning-card > div { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.learning-card > div:first-child { margin-top: 0; }
.check-circle, .spark-circle { width: 23px; height: 23px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg, #7ae8d7, #36cdbd); color: white; box-shadow: 0 3px 5px #40cdb41a; }
.check-circle svg, .spark-circle svg { width: 17px; height: 17px; stroke-width: 2; }
.spark-circle { background: #e8defa; color: #9a78d7; box-shadow: none; }
.last-step { color: #8d7ca7; }
.knowledge-card { bottom: 15%; left: 6%; width: 229px; transform: rotate(-5deg); }
.knowledge-card .placeholder-line { margin-left: 58px; width: 115px; margin-top: 9px; }
.impact-card { bottom: 12.5%; right: 3%; width: 236px; display: flex; align-items: center; gap: 17px; transform: rotate(5deg); padding: 20px; font-size: 11px; }
.bar-chart { display: flex; align-items: end; gap: 4px; height: 33px; }
.bar-chart i { width: 8px; height: 15px; border-radius: 3px; background: linear-gradient(90deg, #ae8af5, #ceb9fb); box-shadow: 0 4px 7px #8058c61a; }
.bar-chart i:nth-child(2) { height: 24px; }.bar-chart i:nth-child(3) { height: 33px; }
.small-spark { position: absolute; color: #b092e4; width: 26px; height: 26px; }
.small-spark svg { width: 100%; height: 100%; stroke-width: 1.3; }
.spark-one { top: 21%; left: 46%; width: 19px; }
.spark-two { top: 67%; right: 23%; width: 28px; }
.page-footer { bottom: max(12px, env(safe-area-inset-bottom)); color: #9a8aaa; font-size: 9px; letter-spacing: .25px; }

@keyframes assemble {
  0%, 100% { transform: translateY(-22px); }
  48% { transform: translateY(17px); }
}
@keyframes shadow {
  0%, 100% { opacity: .12; transform: rotate(-5deg) scale(1.15); filter: blur(9px); }
  48% { opacity: .7; transform: rotate(-5deg) scale(.94); filter: blur(5px); }
}
@keyframes building-shine {
  0%, 65% { transform: translateX(-120%); opacity: 0; }
  90% { transform: translateX(200%); opacity: .7; }
  95%, 100% { transform: translateX(350%); opacity: 0; }
}

@media (min-width: 1600px) {
  .assembly { left: calc(50% - 620px); }
  .ideas-card { left: 3%; }
  .features-card { right: 4%; }
  .hero-copy { transform: translate(-47%, -50%); }
}
@media (max-width: 1190px) {
  .assembly { left: -1%; width: 310px; top: calc(50% - 292px); }
  .logo-upper { top: -385px; }
  .logo-lower { top: 305px; }
  .assembly-grid { top: 310px; width: 300px; }
  .landing-shadow { top: 469px; width: 137px; left: 35px; }
  .fit-marks { top: 282px; right: -8px; }
  .ideas-card { display: none; }
  .features-card { right: 1.5%; width: 182px; top: 19%; padding: 16px; font-size: 10px; }
  .features-card .icon-box { width: 35px; height: 35px; }
  .learning-card { right: 2%; width: 160px; padding: 21px 16px; font-size: 11px; }
  .impact-card { width: 205px; right: 2%; font-size: 10px; }
  .knowledge-card { left: 3%; bottom: 13%; width: 215px; }
  .brand { width: 285px; }
  .hero-copy { width: 49%; transform: translate(-44%, -50%); }
}
@media (max-width: 900px) {
  .hero { display: flex; flex-direction: column; align-items: center; padding: 0 24px calc(96px + env(safe-area-inset-bottom)); }
  .hero-copy { position: relative; left: auto; top: auto; transform: none; width: 100%; max-width: 560px; }
  .brand { width: 225px; margin-bottom: 19px; }
  .coming-next { margin-top: 25px; }
  .coming-next p { margin-top: 13px; }
  .building-line { width: 160px; height: 5px; }
  .assembly { position: relative; order: 0; flex-shrink: 0; left: auto; top: auto; width: min(230px, calc((100dvh - 280px - env(safe-area-inset-bottom)) * .568)); height: auto; aspect-ratio: 230 / 405; margin: 0 0 32px; overflow: hidden; }
  .logo-upper { top: -66.667%; }
  .logo-lower { top: 62.716%; }
  .assembly-grid { top: 58.025%; left: 0; width: 100%; height: 54.321%; }
  .landing-shadow { top: 89.136%; left: 11.304%; width: 44.348%; height: 3.704%; }
  .fit-marks { display: none; }
  .features-card { top: 62%; right: 6%; width: 168px; }
  .knowledge-card { left: 6%; bottom: 19%; width: 177px; padding: 15px; font-size: 10px; }
  .knowledge-card .icon-box { width: 34px; height: 34px; }.knowledge-card .placeholder-line { margin-left: 47px; width: 90px; }
  .learning-card, .impact-card { display: none; }
  .spark-one { top: 18%; left: 12%; }.spark-two { top: 45%; right: 11%; width: 19px; }
  .dots-one { top: 59%; left: 5%; }.dots-two { top: 77%; right: 6%; }.dots-three { display: none; }
  .tile-two { left: 77%; top: 26%; }.tile-three { top: 61%; }.tile-four { left: -20%; bottom: -170px; }
  .page-footer { display: flex; flex-direction: column; gap: 6px; text-align: center; font-size: 8px; }
}
@media (max-width: 540px) {
  .hero { padding-left: 20px; padding-right: 20px; }
  .brand { width: 211px; margin-bottom: 23px; }
  .features-card, .knowledge-card { display: none; }
  .spark-one { top: 59%; left: 12%; }
  .spark-two { top: 79%; right: 14%; }
}
@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
  .hero { flex-direction: row; justify-content: center; gap: 36px; padding-bottom: 85px; }
  .assembly { align-self: flex-start; width: min(180px, calc((100dvh - 100px) * .568)); margin: 0; }
  .hero-copy { width: 48%; max-width: 360px; }
  .brand { width: 200px; margin-bottom: 0; }
  .coming-next { margin-top: 20px; }
  .features-card, .knowledge-card { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
  .logo-upper { transform: translateY(8px); will-change: auto; }
}