/* Apple-style motion layer for the promo page */
:root{--frame:#1d1f23}
body{overflow-x:clip}
header{transition:background .3s,border-color .3s}
header.top{background:rgba(17,19,23,0);border-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.phone{background:var(--frame);transition:background .6s ease}
.phone img{transition:opacity .5s ease}

/* reveal on enter */
.rv{opacity:0;transform:translateY(40px);transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.12s}.rv.d2{transition-delay:.24s}.rv.d3{transition-delay:.36s}

/* 1. pinned hero */
.hero2{height:260vh;position:relative}
.hero2 .stick{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;flex-direction:column;align-items:center;padding-top:calc(68px + 5vh)}
.hero2 .eyebrow{opacity:calc(1 - var(--p,0)*3)}
.hero2 h1{font-size:clamp(46px,9vw,112px);font-weight:700;letter-spacing:-1px;text-align:center;line-height:1.05;
  opacity:calc(1 - var(--p,0)*1.6);transform:translateY(calc(var(--p,0)*-60px)) scale(calc(1 - var(--p,0)*.15))}
.hero2 h1 span{color:var(--ac)}
.hero2 .rig{position:relative;flex:1;width:100%;perspective:1400px;display:flex;justify-content:center;margin-top:2vh}
.hero2 .rig .phone{position:absolute;top:0;width:min(300px,62vw,24vh);border-radius:44px;padding:11px}
.hero2 .rig .phone img{border-radius:34px}
.hero2 .main{z-index:3;transform-origin:50% 0;
  transform:translateY(calc((1 - var(--e,0))*22vh - var(--e,0)*var(--up,17vh))) rotateX(calc((1 - var(--e,0))*28deg)) scale(calc(1.3 - var(--e,0)*.3))}
.hero2 .side{z-index:2;opacity:var(--e,0);top:0}
.hero2 .side.l{transform:translateX(calc(-1 * (var(--e,0)*min(240px,34vw)))) translateY(calc((1 - var(--e,0))*30vh - var(--e,0)*var(--up2,14vh))) scale(.86) rotate(calc(var(--e,0)*-4deg))}
.hero2 .side.r{transform:translateX(calc(var(--e,0)*min(240px,34vw))) translateY(calc((1 - var(--e,0))*30vh - var(--e,0)*var(--up2,14vh))) scale(.86) rotate(calc(var(--e,0)*4deg))}
.hero2 .after{position:absolute;bottom:6vh;left:0;right:0;text-align:center;opacity:clamp(0,calc((var(--p,0) - .72)*5),1);transform:translateY(calc((1 - clamp(0,calc((var(--p,0) - .72)*5),1))*24px))}
.hero2 .after p{color:var(--mu);font-size:19px;margin:0 auto 18px;max-width:560px;padding:0 20px}
.hero2 .after .cta{justify-content:center}
.scrollhint{position:absolute;bottom:3vh;left:50%;transform:translateX(-50%);color:var(--mu);font-size:13px;opacity:calc(1 - var(--p,0)*6);display:flex;flex-direction:column;align-items:center;gap:4px}
.scrollhint svg{width:18px;height:18px;animation:nudge 1.6s ease-in-out infinite}
@keyframes nudge{50%{transform:translateY(5px)}}

/* 2. highlights gallery */
.hl h2{font-size:clamp(34px,5vw,56px)}
.hl-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:34px}
.hl-track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:0 max(20px,calc((100vw - var(--w))/2 + 20px));scroll-padding:0 max(20px,calc((100vw - var(--w))/2 + 20px))}
.hl-track::-webkit-scrollbar{display:none}
.hl-card{flex:none;width:min(860px,86vw);height:min(600px,74vh);border-radius:28px;background:var(--s1);border:1px solid var(--line);scroll-snap-align:start;position:relative;overflow:hidden;display:flex}
.hl-card .cap{position:relative;z-index:2;padding:42px;max-width:56%}
.hl-card .cap p{font-size:clamp(22px,2.6vw,30px);font-weight:700;line-height:1.3;margin:0}
.hl-card .cap p span{color:var(--mu)}
.hl-card .phone{position:absolute;bottom:-34%;inset-inline-end:8%;width:min(300px,42%);border-radius:40px;padding:10px;transform:translateY(40px);opacity:.4;transition:transform 1.2s cubic-bezier(.2,.7,.2,1),opacity 1.2s}
.hl-card.on .phone{transform:none;opacity:1}
@media(max-width:700px){.hl-card .cap{max-width:100%;padding:28px}.hl-card .phone{inset-inline-end:50%;transform:translateX(-50%) translateY(40px);width:58%;bottom:-40%}.hl-card.on .phone{transform:translateX(-50%)}}
.hl-ctrl{display:flex;justify-content:center;align-items:center;gap:14px;margin-top:28px}
.dots{display:flex;gap:10px;align-items:center;height:56px;padding:0 22px;border-radius:999px;background:var(--s2)}
.dots button{width:8px;height:8px;border-radius:999px;background:var(--dot);border:0;padding:0;cursor:pointer;position:relative;overflow:hidden;transition:width .45s cubic-bezier(.2,.7,.2,1)}
.dots button.on{width:48px;background:var(--dot)}
.dots button.on i{position:absolute;inset:0;background:var(--tx);transform-origin:right;transform:scaleX(var(--prog,0))}
.playbtn{width:56px;height:56px;border-radius:50%;background:var(--s2);border:0;color:var(--tx);display:grid;place-items:center;cursor:pointer}

/* 3. scroll-lit statement */
.lit{height:180vh;position:relative}
.lit .stick{position:sticky;top:0;height:100vh;display:grid;place-items:center}
.lit p{font-size:clamp(30px,4.6vw,60px);font-weight:700;line-height:1.35;max-width:980px;margin:0;padding:0 20px;text-align:center}
.lit p span{color:var(--dim);transition:color .3s}
.lit p span.on{color:var(--tx)}
.lit p span.red.on{color:var(--ac)}

/* 4. pinned scrollytelling */
.story{position:relative}
.story .grid{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.story .pin{position:sticky;top:0;height:100vh;display:grid;place-items:center}
.story .pin .phone{position:relative;width:min(320px,70vw);border-radius:46px;padding:11px}
.story .pin .phone img{position:absolute;inset:11px;width:calc(100% - 22px);height:calc(100% - 22px);opacity:0;border-radius:36px}
.story .pin .phone img.on{opacity:1}
.story .steps2{padding:30vh 0}
.story .st{min-height:70vh;display:flex;flex-direction:column;justify-content:center;opacity:.25;transition:opacity .5s}
.story .st.on{opacity:1}
.story .st small{color:var(--ac);font-weight:700;font-size:15px;margin-bottom:10px}
.story .st h3{font-size:clamp(28px,3.4vw,44px);margin-bottom:14px}
.story .st p{color:var(--mu);font-size:19px;margin:0;max-width:440px}
@media(max-width:800px){
  .story .grid{grid-template-columns:1fr;gap:0}
  .story .pin{align-items:start;padding-top:88px}
  .story .pin .phone{width:min(230px,56vw)}
  .story .steps2{padding:0 0 10vh;margin-top:-100vh;position:relative;z-index:2}
  .story .st{min-height:100vh;justify-content:flex-end;padding-bottom:5vh;opacity:0}
  .story .st.on{opacity:1}
  .story .st > div{background:var(--s1);border:1px solid var(--line);border-radius:22px;padding:22px}
  .story .st p{font-size:16px}
}

/* 5. counters */
.nums b{font-size:clamp(40px,5vw,64px)}

/* 6. color picker */
.colors{text-align:center}
.colors .stage{position:relative;height:620px;display:flex;justify-content:center;align-items:center;gap:30px;perspective:1600px}
.colors .phone{position:relative;width:min(290px,60vw);border-radius:44px;padding:11px;transition:background .6s ease,transform 1s cubic-bezier(.2,.7,.2,1)}
.colors .phone.back{transform:rotateY(-24deg) translateX(-10px) scale(.92)}
.colors .phone.back .bk{position:absolute;inset:11px;border-radius:34px;background:var(--frame);filter:brightness(.82);display:grid;place-items:center;transition:background .6s}
.colors .phone.back .bk span{width:76px;height:76px;border-radius:22px;background:rgba(255,255,255,.12);display:grid;place-items:center}
.colors .phone.back .bk svg{width:40px;height:40px;color:rgba(255,255,255,.75)}
.swatches{display:flex;justify-content:center;gap:14px;margin-top:6px}
.swatches button{width:34px;height:34px;border-radius:50%;border:2px solid transparent;padding:3px;background:none;cursor:pointer}
.swatches button i{display:block;width:100%;height:100%;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.swatches button.on{border-color:var(--tx)}
.cname{height:28px;margin-top:14px;font-weight:600;color:var(--mu);transition:opacity .3s}
@media(max-width:700px){.colors .stage{height:480px}.colors .phone.back{display:none}}

/* 7. segmented tabs */
.seg2{position:relative;display:inline-flex;background:var(--s2);border-radius:999px;padding:4px;margin:0 auto 40px}
.seg2 button{position:relative;z-index:2;border:0;background:none;color:var(--mu);font:inherit;font-weight:600;height:44px;padding:0 22px;border-radius:999px;cursor:pointer;transition:color .3s}
.seg2 button.on{color:var(--bg)}
.seg2 .ind{position:absolute;z-index:1;top:4px;bottom:4px;border-radius:999px;background:var(--tx);transition:left .45s cubic-bezier(.2,.7,.2,1),width .45s cubic-bezier(.2,.7,.2,1)}
.tabs{text-align:center}
.tabview{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;text-align:start;max-width:900px;margin:0 auto}
.tabview .phone{position:relative;width:min(280px,64vw);border-radius:42px;padding:10px;justify-self:center}
.tabview .phone img{transition:opacity .45s}
.tabview .copy h3{font-size:30px;margin-bottom:10px;transition:opacity .35s}
.tabview .copy p{color:var(--mu);font-size:18px;margin:0;transition:opacity .35s}
.tabview .fade{opacity:0}
@media(max-width:700px){.tabview{grid-template-columns:1fr;text-align:center}.seg2 button{padding:0 14px;font-size:14px}}

/* 8. growing closing headline */
.grow{height:160vh;position:relative}
.grow .stick{position:sticky;top:0;height:100vh;display:grid;place-items:center;text-align:center;padding:0 20px}
.grow h2{font-size:clamp(44px,10vw,140px);transform:scale(calc(.55 + var(--p,0)*.45));opacity:calc(.2 + var(--p,0)*.8);margin-bottom:24px}
.grow .after{opacity:clamp(0,calc((var(--p,0) - .6)*4),1)}

@media (prefers-reduced-motion: reduce){
  .rv{opacity:1;transform:none;transition:none}
  .hero2,.lit,.grow{height:auto}
  .hero2 .stick,.lit .stick,.grow .stick{position:relative;height:auto;padding-block:120px 60px}
  .hero2 .rig{min-height:640px}
  .scrollhint{display:none}
}

.grow .lead{margin:0 auto 26px}
.grow .cta{justify-content:center}
@media(max-width:700px){.hero2{--up:6vh;--up2:3vh}}

/* people marquee */
.marquee{overflow:hidden;padding:6px 0}
.ptrack{display:flex;gap:18px;width:max-content;animation:marq 48s linear infinite}
.marquee:hover .ptrack{animation-play-state:paused}
@keyframes marq{to{transform:translateX(50%)}}
.pc{margin:0;flex:none;width:230px;aspect-ratio:3/4;border-radius:24px;overflow:hidden;position:relative;background:var(--s2)}
.pc img{width:100%;height:100%;object-fit:cover}
.pc figcaption{position:absolute;inset:auto 10px 10px 10px;padding:10px 12px;border-radius:14px;background:rgba(17,19,23,.82);color:#fff}
.pc b{display:block;font-size:16px}
.pc small{color:rgba(255,255,255,.72);font-size:13px}
.pc .live{position:absolute;top:12px;inset-inline-start:12px;height:24px;padding:0 9px;border-radius:7px;background:var(--ac);color:#fff;font-size:12px;font-weight:700;display:inline-flex;align-items:center}
@media(max-width:700px){.pc{width:180px}}

/* parallax collage */
.collage{padding-top:40px}
.cols{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:18px;align-items:start}
.col{display:flex;flex-direction:column;gap:18px}
.col img{width:100%;border-radius:26px;object-fit:cover;background:var(--s2)}
.col.c1 img:first-child,.col.c3 img:last-child,.col.c2 img{aspect-ratio:9/14}
.col.c1 img:last-child,.col.c3 img:first-child{aspect-ratio:1}
.col.c1{transform:translateY(calc(80px - var(--q,0)*160px))}
.col.c2{transform:translateY(calc(-40px + var(--q,0)*80px))}
.col.c3{transform:translateY(calc(140px - var(--q,0)*240px))}
.col .cap{padding:30px 6px 10px}
.col .cap h2{font-size:clamp(30px,3.6vw,48px)}
@media(max-width:800px){.cols{grid-template-columns:1fr 1fr}.col.c2{grid-column:1/-1;order:-1}.col.c2 img{display:none}.col.c1,.col.c3{transform:none}}
@media (prefers-reduced-motion: reduce){.ptrack{animation:none}.marquee{overflow-x:auto}.col{transform:none!important}}

/* left-to-right (English) */
[dir=ltr] .dots button.on i{transform-origin:left}
[dir=ltr] .ptrack{animation-name:marqL}
@keyframes marqL{to{transform:translateX(-50%)}}
@media(max-width:700px){[dir=ltr] .hl-card .phone{transform:translateX(50%) translateY(40px)}[dir=ltr] .hl-card.on .phone{transform:translateX(50%)}}
[data-theme=light] .hl-card,[data-theme=light] .nums,[data-theme=light] .os,[data-theme=light] .feat{box-shadow:0 1px 2px rgba(0,0,0,.04)}