:root {
  --purple: #AA61DA;
  --purple-deep: #542b70;
  --purple-mid: #7540b8;
  --lavender: #eadbff;
  --pink: #d4547e;
  --ink: #17131d;
  --muted: #85818c;
  --footer: #AA61DA;
  --page-width: 1240px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 68px; }
body { margin: 0; color: var(--ink); background: #fff; font-family: Inter, sans-serif; }
a { color: inherit; }
button { font: inherit; }

.site-header {
  height: 64px; width: 100%; padding: 0 clamp(24px, 5.5vw, 84px);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  background: var(--purple); position: top; top: 0; z-index: 50;
  box-shadow: 0 3px 14px #46205b12;
}
.brand { display: inline-flex; align-items: center; justify-self: start; text-decoration: none; }
.brand img { display: block; width: 70px; height: 49px; object-fit: contain; }
.main-nav { display: flex; align-items: center; justify-content: center; gap: clamp(30px, 4vw, 58px); }
.main-nav a { color: #fff; text-decoration: none; font-size: 14px; font-weight: 600; opacity: .88; padding: 9px 0; transition: opacity .2s, transform .2s; }
.main-nav a:hover, .main-nav a.active { opacity: 1; }
.main-nav a:hover { transform: translateY(-1px); }
.main-nav a.active { box-shadow: 0 1px 0 #fff; }
.header-spacer { justify-self: end; }
.menu-toggle { display: none; }

/* Each content section occupies at least one full viewport.
   Sections may grow naturally on compact screens so content is never clipped. */
section {
  min-height: 100vh;
  min-height: 100svh;
  height: auto;
  position: relative;
  overflow: hidden;
  scroll-margin-top: 0;
}
.hero {
  display: flex; align-items: center; padding: 110px clamp(28px, 10.5vw, 160px) 70px;
  min-height: 100vh; min-height: 100svh;
  background: radial-gradient(ellipse at 50% 48%, #fff 0%, #f8f2ff 48%, #eee1ff 100%);
  isolation: isolate;
}
.hero-bubbles { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.bubble { position: absolute; display: block; border-radius: 50%; opacity: 0; transform: scale(.55); animation: bubble-arrive 1.05s cubic-bezier(.2,.75,.25,1) forwards; }
.bubble-one { width: 560px; height: 560px; left: -190px; top: -315px; background: #e9dcff; animation-delay: .08s; }
.bubble-two { width: 720px; height: 720px; right: -270px; top: -470px; background: #dfc9ff; animation-delay: .18s; }
.bubble-three { width: 650px; height: 650px; left: -210px; bottom: -455px; background: #cda8fb; animation-delay: .28s; }
.bubble-four { width: 730px; height: 730px; right: -300px; bottom: -515px; background: #a56be9; animation-delay: .38s; }
.bubble-five { width: 660px; height: 660px; left: 17%; bottom: -570px; background: #dfc8fb; animation-delay: .48s; }
@keyframes bubble-arrive { 0% { opacity: 0; transform: scale(.55) translateY(30px); } 65% { opacity: 1; } 100% { opacity: 1; transform: scale(1) translateY(0); } }
.hero-inner { width: 100%; max-width: var(--page-width); margin: 0 auto; display: grid; grid-template-columns: 1.18fr .82fr; align-items: center; gap: 5vw; }
.hero-copy { position: relative; z-index: 1; padding-bottom: 10px; animation: copy-enter .8s .25s both; }
@keyframes copy-enter { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.hero-kicker { margin: 0 0 18px; color: var(--purple-mid); font-size: 12px; font-weight: 700; letter-spacing: 2.2px; text-transform: uppercase; }
.hero-copy h1 { color: var(--purple-deep); font-size: clamp(48px, 5.2vw, 80px); letter-spacing: -3.5px; line-height: 1.15; margin: 0 0 40px; font-weight: 700; }
.hero-copy h1 span { white-space: nowrap; }
.hero-actions { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }
.button-primary { display: inline-flex; align-items: center; justify-content: center; background: var(--pink); color: #fff; text-decoration: none; border-radius: 12px; padding: 16px 30px; font-size: 20px; font-weight: 500; transition: transform .2s, box-shadow .2s; box-shadow: 0 8px 22px #d4547e20; }
.button-primary:hover { transform: translateY(-3px); box-shadow: 0 12px 26px #d4547e35; }
.explore-link { color: var(--purple-deep); font-size: 19px; font-weight: 500; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.explore-link span { display: inline-block; margin-left: 3px; transition: transform .2s; }
.explore-link:hover span { transform: translateX(5px); }

.phone-stage { justify-self: center; position: relative; width: min(100%, 365px); padding: 10px 0 38px; animation: phone-enter .9s .35s both; }
@keyframes phone-enter { from { opacity: 0; transform: translateY(26px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
.phone { width: 100%; position: relative; padding: 8px; border-radius: 57px; background: linear-gradient(145deg, #333 0%, #080808 18%, #242424 52%, #050505 100%); box-shadow: 0 28px 60px #33204635, 0 7px 18px #1d12252b, inset 0 0 0 1px #777; }
.phone::before { content: ""; position: absolute; inset: 2px; border-radius: 55px; border: 1px solid #ffffff55; pointer-events: none; }
.phone-button { position: absolute; width: 3px; background: #333; border-radius: 3px 0 0 3px; }
.phone-button-left { height: 58px; left: -3px; top: 145px; box-shadow: 0 72px 0 #333; }
.phone-button-right { height: 86px; right: -3px; top: 185px; border-radius: 0 3px 3px 0; }
.phone-bezel { background: #050505; border-radius: 49px; padding: 7px; overflow: hidden; }
.phone-screen { position: relative; width: 100%; aspect-ratio: 9 / 19.45; border-radius: 42px; overflow: hidden; background: #fff; isolation: isolate; }
.phone-screen::before { content: ""; position: absolute; z-index: 3; inset: 0; border-radius: inherit; border: 1px solid #00000012; pointer-events: none; }
.dynamic-island { position: absolute; z-index: 5; top: 12px; left: 50%; transform: translateX(-50%); width: 34%; height: 25px; border-radius: 20px; background: #050505; box-shadow: inset 0 1px 1px #555; }
.dynamic-island span { position: absolute; right: 10px; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: #101a2a; box-shadow: 0 0 0 2px #171717; }
.app-video, .app-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: white; }
.app-video { z-index: 1; }
.app-poster { z-index: 0; }
.video-hint { position: absolute; z-index: 6; bottom: 12px; left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100% - 30px); padding: 7px 10px; border-radius: 20px; background: #16121dcc; color: white; font-size: 9px; text-align: center; opacity: 0; transition: opacity .2s; pointer-events: none; }
.phone-stage:hover .video-hint { opacity: 1; }
.video-upload { position: absolute; right: 0; bottom: 0; display: inline-flex; align-items: center; gap: 6px; border: 1px solid #ffffffa8; border-radius: 30px; padding: 8px 12px; color: #5b3377; background: #ffffffc9; backdrop-filter: blur(12px); font-size: 11px; font-weight: 600; cursor: pointer; box-shadow: 0 4px 16px #51376a12; transition: transform .2s, background .2s; }
.video-upload:hover { transform: translateY(-2px); background: #fff; }
.video-upload span { font-size: 16px; line-height: 10px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.about-section { background: #fff; display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
.about-section .stats-banner { flex: 0 0 auto; }
.about-section .about-content { flex: 1 0 auto; }
.stats-banner { min-height: 180px; background: linear-gradient(110deg, #a957d5, #9d55d0 55%, #b36cdd); color: #fff; display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; padding: 28px clamp(24px, 8vw, 120px); }
.stat { text-align: center; padding: 12px 18px; position: relative; }
.stat + .stat::before { content: ""; position: absolute; height: 64px; width: 1px; left: 0; top: 50%; transform: translateY(-50%); background: #ffffff65; }
.stat-number { display: block; font-size: clamp(35px, 4vw, 58px); line-height: 1.08; font-weight: 700; letter-spacing: -2px; }
.stat-label { display: block; font-size: clamp(14px, 1.4vw, 19px); margin-top: 9px; font-weight: 500; opacity: .95; }
.about-content { flex: 1; display: flex; align-items: center; padding: 80px clamp(28px, 10.7vw, 162px); }
.about-copy { max-width: 790px; }
.eyebrow { color: var(--purple-mid); text-transform: uppercase; letter-spacing: 2.5px; font-size: 12px; font-weight: 700; margin: 0 0 20px; }
.about-copy h2, .download-intro h2 { font-size: clamp(35px, 4.2vw, 58px); line-height: 1.13; letter-spacing: -2px; color: var(--purple-deep); margin: 0 0 24px; }
.about-copy > p:last-child { color: #77717f; max-width: 640px; font-size: 17px; line-height: 1.9; margin: 0; }

.download-section { background: linear-gradient(180deg, #fff 0%, #fdfbff 100%); display: flex; flex-direction: column; justify-content: center; padding: 34px clamp(24px, 9vw, 135px) 34px; }
.download-intro { text-align: center; margin-bottom: 16px; }
.download-intro .eyebrow { margin-bottom: 12px; }
.download-intro h2 { margin: 0; }
.download-options { width: 100%; max-width: 1050px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(35px, 8vw, 110px); align-items: start; }
.download-option { display: flex; flex-direction: column; align-items: center; }
.handwritten-prompt { font-family: Caveat, cursive; font-size: clamp(28px, 2.8vw, 38px); font-weight: 600; color: #34303a; display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 90px; margin-bottom: 6px; }
.handwritten-prompt svg { width: 105px; height: 56px; overflow: visible; }
.handwritten-prompt svg path { fill: none; stroke: #34303a; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 260; stroke-dashoffset: 0; }
.apple-option .handwritten-prompt { flex-direction: row-reverse; }
.store-art { width: min(100%, 390px); height: 300px; position: relative; display: block; text-decoration: none; }
.keam-app-icon { position: absolute; width: 220px; height: 220px; top: 0; left: 50%; transform: translateX(-34%); border-radius: 48px; overflow: hidden; background: var(--purple); box-shadow: 0 18px 36px #a957d52b; }
.keam-app-icon img { width: 100%; height: 100%; object-fit: cover; }
.store-app-icon { position: absolute; z-index: 2; width: 220px; height: 220px; left: 50%; top: 90px; transform: translateX(-70%); border-radius: 48px; display: grid; place-items: center; box-shadow: 0 20px 38px #21153b30, 0 4px 10px #21153b14; transition: transform .25s, box-shadow .25s; }
.store-mark { display: block; width: 100%; height: 100%; object-fit: contain; }
.play-icon .store-mark { width: 78%; height: 78%; }
.apple-icon { overflow: hidden; }
.apple-icon .app-store-mark { width: 100%; height: 100%; object-fit: cover; }
.play-icon { background: linear-gradient(155deg, #18c5ef, #1687fa 75%); }
.apple-icon { background: linear-gradient(155deg, #22c7f3, #1772f8 85%); }
.store-art:hover .store-app-icon { transform: translateX(-70%) translateY(-7px) rotate(-2deg); box-shadow: 0 27px 44px #21153b38; }
.store-caption { position: absolute; left: 57%; top: 185px; z-index: 3; display: flex; flex-direction: column; align-items: flex-start; min-width: 140px; padding: 12px 15px; border: 1px solid #eee7f5; border-radius: 14px; background: #fff; box-shadow: 0 8px 24px #33204616; }
.store-caption strong { font-size: 13px; color: #211b29; }
.store-caption small { color: #8b8491; font-size: 10px; margin-top: 3px; }
.store-caption em { color: var(--purple-mid); font-style: normal; font-size: 10px; font-weight: 700; margin-top: 9px; }
.store-caption em span { font-size: 13px; }

.site-footer { min-height: 330px; background: var(--footer); color: #fff; padding: 58px clamp(24px, 8vw, 120px) 24px; }
.footer-main { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.8fr 1fr 1fr 1fr; gap: 45px; padding-bottom: 55px; }
.footer-brand img { display: block; width: 95px; height: 65px; object-fit: contain; }
.footer-brand p { margin: 12px 0 0; color: #ffffffd9; font-size: 13px; }
.footer-column { display: flex; flex-direction: column; align-items: flex-start; gap: 13px; }
.footer-heading { margin-bottom: 5px; font-size: 12px; text-transform: uppercase; letter-spacing: 1.6px; font-weight: 700; color: #ffffffbd; }
.footer-column a { color: #fff; text-decoration: none; font-size: 13px; opacity: .88; transition: opacity .2s, transform .2s; }
.footer-column a:hover { opacity: 1; transform: translateX(3px); }
.footer-bottom { max-width: 1200px; margin: 0 auto; border-top: 1px solid #ffffff45; padding-top: 20px; display: flex; justify-content: space-between; gap: 20px; color: #ffffffc9; font-size: 11px; }

.back-to-top { position: fixed; right: 27px; bottom: 27px; width: 46px; height: 46px; border: 0; border-radius: 50%; background: var(--purple-mid); color: white; font-size: 23px; cursor: pointer; box-shadow: 0 7px 22px #59318a40; opacity: 0; visibility: hidden; transform: translateY(10px); transition: .25s; z-index: 60; }
.back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }

@media (max-width: 900px) {
  .hero { padding: 55px 6vw; }
  .hero-inner { grid-template-columns: 1fr .75fr; gap: 3vw; }
  .hero-copy h1 { font-size: clamp(42px, 6vw, 62px); letter-spacing: -2.5px; }
  .phone-stage { width: min(100%, 320px); }
  .phone { border-radius: 50px; }
  .phone-bezel { border-radius: 43px; }
  .phone-screen { border-radius: 37px; }
  .stats-banner { min-height: 160px; }
  .store-art { transform: scale(.82); transform-origin: top center; }
}
@media (max-width: 650px) {
  .site-header { height: 60px; padding: 0 20px; grid-template-columns: 1fr auto; }
  .brand img { width: 66px; height: 46px; }
  .header-spacer { display: none; }
  .menu-toggle { display: flex; flex-direction: column; justify-content: center; gap: 6px; width: 40px; height: 40px; border: 0; background: transparent; cursor: pointer; justify-self: end; }
  .menu-toggle span { display: block; width: 23px; height: 2px; background: white; border-radius: 3px; transition: transform .2s; }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
  .main-nav { display: none; position: absolute; top: 60px; left: 0; right: 0; padding: 18px 24px 22px; background: var(--purple); flex-direction: column; align-items: center; gap: 14px; box-shadow: 0 12px 20px #48225c20; }
  .main-nav.open { display: flex; }
  .hero { min-height: 100vh; min-height: 100svh; height: auto; padding: 105px 24px 55px; }
  .hero-inner { grid-template-columns: 1fr; text-align: center; gap: 38px; }
  .hero-kicker { margin-bottom: 13px; font-size: 10px; }
  .hero-copy h1 { font-size: clamp(42px, 11vw, 59px); line-height: 1.12; letter-spacing: -2.5px; margin-bottom: 28px; }
  .hero-copy h1 span { white-space: normal; }
  .hero-actions { justify-content: center; gap: 20px; }
  .button-primary { font-size: 16px; padding: 14px 21px; border-radius: 10px; }
  .explore-link { font-size: 16px; }
  .phone-stage { width: min(56vw, 235px); padding-bottom: 38px; }
  .phone { padding: 7px; border-radius: 44px; }
  .phone-bezel { padding: 6px; border-radius: 38px; }
  .phone-screen { border-radius: 32px; }
  .dynamic-island { top: 9px; height: 19px; }
  .video-upload { right: 50%; transform: translateX(50%); white-space: nowrap; }
  .video-upload:hover { transform: translateX(50%) translateY(-2px); }
  .bubble-one { width: 350px; height: 350px; left: -190px; top: -190px; }
  .bubble-two { width: 400px; height: 400px; right: -250px; top: -250px; }
  .bubble-three { width: 400px; height: 400px; left: -230px; bottom: -280px; }
  .bubble-four { width: 400px; height: 400px; right: -250px; bottom: -280px; }
  .about-section { min-height: 100vh; min-height: 100svh; height: auto; }
  .stats-banner { grid-template-columns: 1fr; padding: 22px 25px; gap: 4px; }
  .stat { padding: 10px 5px; }
  .stat + .stat::before { height: 1px; width: 65px; left: 50%; top: 0; transform: translateX(-50%); }
  .stat-number { font-size: 35px; }
  .stat-label { margin-top: 3px; font-size: 13px; }
  .about-content { padding: 65px 28px; align-items: flex-start; }
  .about-copy h2 { font-size: 38px; }
  .about-copy > p:last-child { font-size: 15px; line-height: 1.8; }
  .download-section { min-height: 100vh; min-height: 100svh; height: auto; padding: 88px 20px 58px; }
  .download-intro { margin-bottom: 20px; }
  .download-intro h2 { font-size: 37px; }
  .download-options { grid-template-columns: 1fr; gap: 24px; }
  .handwritten-prompt { min-height: 54px; margin-bottom: 0; font-size: 29px; }
  .handwritten-prompt svg { width: 92px; height: 48px; }
  .store-art { transform: scale(.78); transform-origin: top center; height: 270px; margin-bottom: -42px; }
  .site-footer { min-height: 390px; padding: 42px 25px 22px; }
  .footer-main { grid-template-columns: 1fr 1fr; gap: 35px 25px; padding-bottom: 35px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-brand img { width: 82px; height: 55px; }
  .footer-bottom { flex-direction: column; gap: 9px; }
  .back-to-top { right: 17px; bottom: 17px; width: 43px; height: 43px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}


/* Splash screen: compact logo and a fine loading line, then a curtain-like lift. */
.splash-screen {
  position: fixed; inset: 0; z-index: 999;
  display: grid; place-items: center;
  background: var(--purple);
  transform: translateY(0);
  transition: transform .72s cubic-bezier(.76, 0, .24, 1), visibility .72s;
}
.splash-screen.is-leaving { transform: translateY(-105%); visibility: hidden; }
.splash-content { width: min(190px, 48vw); display: flex; flex-direction: column; align-items: center; gap: 28px; }
.splash-content img { width: 100%; height: 110px; object-fit: contain; }
.splash-loader { width: 100%; height: 2px; background: #ffffff55; overflow: hidden; border-radius: 4px; }
.splash-loader span { display: block; width: 100%; height: 100%; background: #fff; transform: scaleX(0); transform-origin: left; animation: splash-load 1.15s cubic-bezier(.6, 0, .3, 1) forwards; }
@keyframes splash-load { to { transform: scaleX(1); } }

@media (max-height: 760px) and (min-width: 651px) {
  .hero { padding-top: 90px; padding-bottom: 35px; }
  .hero-copy h1 { font-size: clamp(42px, 4.5vw, 66px); margin-bottom: 25px; }
  .phone-stage { width: min(29vw, 300px); padding-bottom: 25px; }
  .about-content { padding-top: 42px; padding-bottom: 42px; }
  .stats-banner { min-height: 140px; }
  .download-section { padding-top: 78px; padding-bottom: 30px; }
  .store-art { transform: scale(.78); transform-origin: top center; height: 250px; }
}
@media (max-width: 650px) and (max-height: 760px) {
  .hero { padding-top: 90px; padding-bottom: 35px; }
  .hero-inner { gap: 20px; }
  .hero-copy h1 { font-size: clamp(36px, 9vw, 48px); margin-bottom: 20px; }
  .phone-stage { width: min(48vw, 205px); }
  .about-content { padding-top: 45px; padding-bottom: 45px; }
  .download-section { padding-top: 78px; }
  .store-art { transform: scale(.68); height: 230px; margin-bottom: -50px; }
}
@media (prefers-reduced-motion: reduce) {
  .splash-screen { transition: none; }
  .splash-loader span { animation-duration: .01ms; }
}