:root{--ease:cubic-bezier(.16,1,.3,1)}
.brand img{width:165px;height:auto;border-radius:0}
header{padding:15px 0;min-height:95px}
.hero{min-height:600px;padding:44px 56px;gap:55px}
.hero h1{font-size:clamp(52px,6vw,78px)}
.stage{padding-top:90px;padding-bottom:25px}
.wordmark{width:230px;top:-10px;transform:translateX(-50%) rotate(-4deg)}
.puzzle{transform:rotate(1.5deg);padding-top:30px}
.answer{min-height:60px;display:flex;align-items:center;justify-content:center;padding:14px 10px 0}
.answer [hidden]{display:none}
.button{transition:transform 180ms var(--ease),box-shadow 180ms var(--ease)}
.button:hover{transform:translateY(-3px)}
.button:active{transform:translateY(3px) scale(.98)}
nav a{transition:color 180ms ease}nav a:hover{color:#b70a68}
summary{display:flex;justify-content:space-between;gap:20px;list-style:none}summary::-webkit-details-marker{display:none}.faq-icon{transition:transform 220ms var(--ease)}details[open] .faq-icon{transform:rotate(45deg)}
.app-preview{position:relative;width:min(100%,285px);aspect-ratio:285/450;overflow:hidden;margin:auto;transform:rotate(-3deg)}
.showcase .app-preview img{position:absolute;top:0;left:0;width:100%;height:auto;max-width:none;border-radius:0;box-shadow:none;transform:translateY(-28.2%);margin:0;clip-path:url(#phone-silhouette)}
.confetti{position:absolute;left:50%;top:70%;width:7px;height:12px;border-radius:3px;pointer-events:none}
@keyframes arrive{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes card-arrive{from{opacity:0;transform:translateY(20px) rotate(5deg)}to{opacity:1;transform:translateY(0) rotate(1.5deg)}}
@media(prefers-reduced-motion:no-preference){
 .hero .eyebrow,.hero h1,.hero .intro,.hero .actions,.hero .availability{animation:arrive 650ms var(--ease) both}
 .hero h1{animation-delay:70ms}.hero .intro{animation-delay:140ms}.hero .actions{animation-delay:210ms}.hero .availability{animation-delay:260ms}
 .puzzle{animation:card-arrive 700ms var(--ease) 160ms both}
 details[open] p{animation:arrive 250ms var(--ease)}
}
@media(max-width:850px){.hero{padding:38px 28px;gap:22px}.stage{padding-top:90px}.hero h1{font-size:clamp(52px,8vw,76px)}.app-preview{width:245px}.showcase{gap:40px}}
@media(max-width:550px){.brand img{width:104px}header{min-height:78px;gap:12px}nav{gap:12px;font-size:14px}.lang{padding:7px 10px}.hero{padding:35px 22px;gap:24px}.hero h1{font-size:53px}.stage{padding-top:78px}.wordmark{width:200px;top:-5px}.puzzle{transform:none}.puzzle h3{font-size:26px}.actions{gap:20px}.button{padding:14px 22px}.app-preview{order:2}.showcase{padding:36px 24px}.note{padding-bottom:10px}.section{padding-top:50px;padding-bottom:50px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* Iconsax Linear: shared stroke, sizing and alignment. */
.icon{display:inline-block;width:22px;height:22px;flex:none;vertical-align:middle;pointer-events:none}.icon-outbound{transform:rotate(45deg)}.icon-down{transform:rotate(180deg)}.actions a,.end .button,nav a{display:inline-flex;align-items:center;justify-content:center;gap:9px}nav .icon{width:17px;height:17px}.faq-icon{width:24px;height:24px}summary:after{content:none}

/* Let the enlarged app preview sit directly on the section's lower edge. */
.showcase{overflow:hidden;padding-bottom:0;align-items:center}
.showcase>div:last-child{padding-bottom:65px}
.app-preview{width:min(100%,400px);aspect-ratio:1284/1994;align-self:end;margin:0 auto;transform:translateY(20px) rotate(-3deg)}
@media(max-width:850px){.app-preview{width:min(100%,340px)}.showcase>div:last-child{padding-bottom:40px}}
@media(max-width:550px){.showcase{padding-bottom:0;gap:12px}.showcase>div:last-child{padding-bottom:14px}.app-preview{width:min(100%,320px);transform:translateY(14px) rotate(-3deg)}}