/* Brightfold studio site. One stylesheet for the home page, app pages and legal pages. */
:root{
  --canvas:#0f1524;
  --canvas-deep:#0a0f1b;
  --panel:#161e31;
  --panel-2:#1c263d;
  --haze:#5b6b8e;
  --accent:#f4b393;
  --accent-hover:#f8c6ab;
  --accent-soft:#f6cfb9;
  --text-primary:#f1ece4;
  --text-secondary:#a3adc2;
  --line:rgba(163,173,194,.14);
  --line-strong:rgba(163,173,194,.4);
  --app:var(--accent);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --display:"Geist",ui-sans-serif,system-ui,-apple-system,sans-serif;
  --body:"Geist",ui-sans-serif,system-ui,-apple-system,sans-serif;
  --serif:"Instrument Serif",ui-serif,Georgia,serif;
  --mono:"Geist Mono",ui-monospace,monospace;
  --gutter:clamp(16px,5vw,72px);
  --maxw:1200px;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:hidden;overflow-x:clip;background:var(--canvas)}
body{margin:0;overflow-x:hidden;overflow-x:clip;background:var(--canvas);color:var(--text-primary);font:400 17px/1.6 var(--body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:inherit}
em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em;color:var(--accent-soft)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--accent);color:#1b1410;padding:10px 16px;border-radius:999px;font-weight:500;text-decoration:none;transition:top .3s var(--ease-out)}
.skip:focus{top:12px}
main:focus{outline:none}

/* ---------- the environment: one fixed layer behind everything ---------- */
.env{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:radial-gradient(120% 80% at 50% 0%,#151d31 0%,var(--canvas) 55%,var(--canvas-deep) 100%)}
.env::before,.env::after{content:"";position:absolute;width:90vmax;height:90vmax;border-radius:50%}
.env::before{left:-35vmax;top:-30vmax;background:radial-gradient(closest-side,rgba(91,107,142,.22),transparent);animation:drift1 90s var(--ease-io) -20s infinite alternate}
.env::after{right:-40vmax;bottom:-45vmax;background:radial-gradient(closest-side,rgba(244,179,147,.07),transparent);animation:drift2 110s var(--ease-io) -45s infinite alternate}
@keyframes drift1{to{transform:translate(18vmax,22vmax) scale(1.1)}}
@keyframes drift2{to{transform:translate(-22vmax,-16vmax) scale(.92)}}
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px var(--gutter);transition:background .6s var(--ease-out),border-color .6s var(--ease-out);border-bottom:1px solid transparent}
.nav.solid{background:rgba(12,17,30,.7);backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);border-bottom-color:var(--line)}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font:600 18px/1 var(--display);letter-spacing:-.02em}
.brand svg{width:28px;height:28px}
.nav ul{display:flex;align-items:center;gap:clamp(14px,2.6vw,34px);list-style:none;margin:0;padding:0}
.nav a.link{text-decoration:none;color:var(--text-secondary);font-size:14.5px;transition:color .3s var(--ease-out)}
.nav a.link:hover{color:var(--text-primary)}
@media (max-width:720px){.nav .hide-sm{display:none}}

/* ---------- buttons, chips, labels ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 24px;border-radius:999px;font:500 15.5px/1.1 var(--body);letter-spacing:-.005em;text-decoration:none;cursor:pointer;border:1px solid transparent;transition:transform .5s var(--ease-out),background .4s var(--ease-out),border-color .4s var(--ease-out),box-shadow .5s var(--ease-out)}
.btn-primary{background:var(--accent);color:#1f130c;box-shadow:0 10px 34px -12px rgba(244,179,147,.6),inset 0 1px 0 rgba(255,255,255,.35)}
.btn-primary:hover{background:var(--accent-hover);transform:translateY(-2px);box-shadow:0 16px 40px -12px rgba(244,179,147,.7),inset 0 1px 0 rgba(255,255,255,.35)}
.btn-ghost{border-color:var(--line-strong);color:var(--text-primary);background:rgba(15,21,36,.4)}
.btn-ghost:hover{border-color:var(--text-primary);transform:translateY(-2px)}
.btn-sm{padding:9px 16px;font-size:14px}
.btn svg{width:16px;height:16px;transition:transform .5s var(--ease-out)}
.btn:hover svg{transform:translateX(3px)}
.play-badge{display:inline-block;line-height:0;border-radius:10px;transition:transform .4s var(--ease-out),box-shadow .4s var(--ease-out)}
.play-badge img{height:56px;width:auto;border-radius:9px}
.play-badge:hover{transform:translateY(-2px);box-shadow:0 10px 30px -12px rgba(0,0,0,.8)}
@media (pointer:coarse){.btn{min-height:44px}}

.chip{display:inline-flex;align-items:center;gap:8px;font:400 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text-secondary);padding:7px 11px;border:1px solid var(--line);border-radius:999px;background:rgba(10,15,27,.45);white-space:nowrap}
.chip i{width:6px;height:6px;border-radius:50%;background:var(--text-secondary);display:block}
.chip.live{color:var(--text-primary)}
.chip.live i{background:#8fd6a8;animation:ping 3.2s var(--ease-out) -1.1s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(143,214,168,.45)}70%,100%{box-shadow:0 0 0 8px rgba(143,214,168,0)}}
.kicker{display:inline-block;font:400 11.5px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--text-secondary)}
.kicker::before{content:"";display:inline-block;width:6px;height:6px;margin-right:12px;vertical-align:1px;background:var(--accent);clip-path:polygon(0 0,60% 0,100% 40%,100% 100%,0 100%)}

/* =========================================================
   HERO: a live 3D stage. One real screen per app starts as one
   stacked sheet and opens into a fan as you scroll; the mark
   unfolds beneath the fan at the end.
   ========================================================= */
.hero{position:relative;height:320vh}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;isolation:isolate;--dt:64%;--pw:clamp(150px,min(15vw,27vh),260px)}
.sky{position:absolute;inset:0;z-index:-1;background:radial-gradient(90% 70% at 50% 72%,#1b2540 0%,var(--canvas) 62%,var(--canvas-deep) 100%)}
.sky i{position:absolute;border-radius:50%}
.sky .g1{left:50%;top:66%;width:80vmax;height:50vmax;margin:-25vmax 0 0 -40vmax;background:radial-gradient(closest-side,rgba(244,179,147,.2),rgba(244,179,147,0));opacity:var(--glow,.6)}
.sky .g2{left:-20vmax;top:-30vmax;width:70vmax;height:70vmax;background:radial-gradient(closest-side,rgba(98,112,170,.24),transparent);animation:drift1 60s var(--ease-io) -10s infinite alternate}
.sky .g3{right:-25vmax;top:10vh;width:60vmax;height:60vmax;background:radial-gradient(closest-side,rgba(147,132,255,.12),transparent);animation:drift2 70s var(--ease-io) -30s infinite alternate}

.deck{position:absolute;z-index:1;left:50%;top:var(--dt);width:0;height:0;--n:4}
.dev{position:absolute;width:var(--pw);left:calc(var(--pw)/-2);top:calc(var(--pw)*-0.93)}
.dev::before{content:"";position:absolute;inset:8% -30% -20%;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--app) 55%,transparent),transparent);opacity:var(--halo,0)}
.dev .phone{border:0;border-radius:calc(var(--pw)*.085);box-shadow:0 50px 80px -30px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.09),inset 0 1px 0 rgba(255,255,255,.2)}
.dev .phone img{aspect-ratio:9/16}
.dev .sheen{position:absolute;inset:0;border-radius:calc(var(--pw)*.085);pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.14) 46%,rgba(255,255,255,0) 60%);opacity:var(--sh,0)}
.floor{position:absolute;left:calc(var(--pw)*-.65*(var(--n) + 0.5));top:calc(var(--pw)*.7);width:calc(var(--pw)*1.3*(var(--n) + 0.5));height:calc(var(--pw)*.9);border-radius:50%;background:radial-gradient(closest-side,rgba(4,6,14,.75),rgba(4,6,14,0));opacity:var(--fl,.8)}

/* the mark under the fan: the square turns flat, the flaps open on their hinges, the name is drawn out */
.sign{position:absolute;z-index:2;left:50%;top:calc(var(--dt) + var(--pw)*.96);translate:-50% 0;display:flex;align-items:center;gap:calc(var(--pw)*.06 + 4px);visibility:hidden;pointer-events:none}
.sign.on{visibility:visible}
.sign svg{flex:none;width:clamp(26px,calc(var(--pw)*.17),40px);height:auto;overflow:visible;filter:drop-shadow(0 0 calc(var(--pw)*.1) rgba(244,179,147,calc(var(--w,1)*.35)))}
.sign svg *{transform-box:view-box}
.sign .sq{transform-origin:32px 32px;transform:rotate(calc((1 - var(--sq,1))*-45deg)) scale(calc(.25 + var(--sq,1)*.75));opacity:var(--sq,1)}
.sign .n{transform-origin:32px 24.93px;transform:scaleY(var(--f0,1))}
.sign .e{transform-origin:39.07px 32px;transform:scaleX(var(--f1,1))}
.sign .s{transform-origin:32px 39.07px;transform:scaleY(var(--f2,1))}
.sign .w{transform-origin:24.93px 32px;transform:scaleX(var(--f3,1))}
.sign .word{font:500 clamp(18px,calc(var(--pw)*.12),26px)/1 var(--display);letter-spacing:-.025em;color:var(--text-primary);clip-path:inset(-20% calc((1 - var(--w,1))*100%) -20% 0);transform:translateX(calc((1 - var(--w,1))*-8px));opacity:calc(.2 + var(--w,1)*.8)}
@media (max-height:520px){.sign{display:none}}

/* the copy bands */
.band{position:absolute;z-index:3;left:50%;top:13vh;top:13svh;width:min(92vw,1100px);translate:-50% 0;text-align:center;opacity:0;pointer-events:none;transform:translateY(calc(var(--o,0)*-28px))}
.band.live{pointer-events:auto}
.band h1,.band h2,.band p{margin:0}
.display{font:500 clamp(42px,6.4vw,96px)/1.02 var(--display);letter-spacing:-.05em;text-wrap:balance}
.display em{font-size:1.08em;letter-spacing:-.02em;line-height:.9}
.band .kicker{margin-bottom:26px}
.band .sub{margin:22px auto 0;max-width:40ch;font:400 clamp(16px,1.35vw,19px)/1.5 var(--body);color:var(--text-secondary)}
.band .row{margin-top:30px}
/* line-mask reveal: each line rises out of its own slot, scrubbed off --k */
.ln{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .04em .14em;margin-bottom:-.14em}
.ln>span{display:inline-block;--kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);transform:translateY(calc((1 - var(--kc))*105%));opacity:calc(.2 + var(--kc)*.8)}
.band .sub.ln,.band .row.ln,.band .kicker.ln{display:block;overflow:visible}
.band .sub.ln>span,.band .row.ln>span,.band .kicker.ln>span{transform:translateY(calc((1 - var(--kc))*14px));opacity:var(--kc)}
.band .row.ln{overflow:visible;padding-bottom:20px}

.cue{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;font:400 10.5px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--text-secondary);transition:opacity .6s var(--ease-out);z-index:2}
.cue span{width:1px;height:26px;background:linear-gradient(var(--text-secondary),transparent);transform-origin:top;animation:cue 2.4s var(--ease-io) -.6s infinite}
@keyframes cue{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
.cue.gone{opacity:0}

/* phones and tall screens */
@media (max-aspect-ratio:1/1){
  .stage{--dt:67%;--pw:clamp(120px,min(36vw,24svh),240px)}
  .band{top:12svh}
  .display{font-size:clamp(40px,11vw,72px)}
  .band .sub{max-width:30ch}
}
@media (max-height:560px){.cue{display:none}}

/* without JS: the open fan, the first band */
html:not(.js) .band.b1{opacity:1}
html:not(.js) .band.b1 .ln>span{--kc:1}
html:not(.js) .dev{--c:calc(var(--i,0) - (var(--n) - 1)/2);transform:translateX(calc(var(--c)*min(var(--pw)*1.12,(92vw - var(--pw))/(var(--n) - 1)))) rotateY(calc(var(--c)*-9deg))}
html:not(.js) .sign{visibility:visible}

/* reduced motion: one still, composed scene */
@media (prefers-reduced-motion:reduce){
  .hero{height:auto}
  .stage{position:relative;height:100svh;min-height:600px}
}

/* ---------- sections ---------- */
section{position:relative}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.sec{padding:clamp(44px,5.5vw,80px) 0}
#apps{padding-top:clamp(72px,9vw,120px)}
.cta{padding-bottom:clamp(72px,9vw,120px)}
.sec-head h2{margin:22px 0 0;font:500 clamp(36px,5.2vw,68px)/1.04 var(--display);letter-spacing:-.045em;max-width:18ch;text-wrap:balance}
.sec-head h2 em{font-size:1.08em}
.sec-head p{color:var(--text-secondary);max-width:50ch;margin:20px 0 0;font-size:18px}

/* reveal choreography: start/end prefixed with the container so they win the cascade */
[data-reveal] .rv{opacity:0;transform:translateY(26px);transition:opacity 1.1s var(--ease-out),transform 1.1s var(--ease-out);transition-delay:calc(var(--i,0)*90ms)}
[data-reveal].in .rv{opacity:1;transform:none}
[data-reveal].done .rv{transition-delay:0s}

/* ---------- the app counter (counted from the cards by site.js) ---------- */
.tally{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:16px clamp(20px,5vw,64px);margin:34px 0 0;padding:0}
.tally div{display:flex;flex-direction:column-reverse;gap:10px;padding-left:18px;border-left:1px solid var(--line-strong)}
.tally dt{font:400 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--text-secondary)}
.tally dd{margin:0;font:300 clamp(40px,4.4vw,60px)/.9 var(--display);letter-spacing:-.05em;font-variant-numeric:tabular-nums;color:var(--text-primary)}
.tally div:first-child dd{color:var(--accent-soft)}
@media (max-width:520px){.tally div{padding-left:12px}.tally dt{font-size:9.5px;letter-spacing:.1em}}

/* ---------- apps: folded-corner cards (the signature) ---------- */
.apps-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2vw,24px);margin-top:clamp(36px,4.5vw,56px)}
.card{--fold:30px;position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:8px;min-height:440px;padding:32px 0 0 32px;border-radius:26px;text-decoration:none;background:linear-gradient(160deg,var(--panel-2),var(--panel) 65%);overflow:hidden;isolation:isolate;
  clip-path:polygon(0 0,calc(100% - var(--fold)) 0,100% var(--fold),100% 100%,0 100%);transition:transform .8s var(--ease-out),--fold .8s var(--ease-out)}
.card::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 70% at 85% 100%,color-mix(in srgb,var(--app) 30%,transparent),transparent 70%);opacity:.7;transition:opacity .8s var(--ease-out)}
.card::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),inset 0 0 0 1px rgba(255,255,255,.04)}
.card .corner{position:absolute;top:0;right:0;width:var(--fold);height:var(--fold);background:linear-gradient(225deg,transparent 50%,color-mix(in srgb,var(--app) 55%,#efe8dd) 50%);border-bottom-left-radius:6px;box-shadow:-4px 4px 10px rgba(0,0,0,.25)}
@property --fold{syntax:"<length>";inherits:true;initial-value:30px}
.card:hover,.card:focus-visible{--fold:56px;transform:translateY(-6px)}
.card:hover::before{opacity:1}
.card .txt{display:flex;flex-direction:column;padding-bottom:32px;min-width:0}
.card .top{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.card .icon{width:56px;height:56px;border-radius:14px;box-shadow:0 10px 26px -10px rgba(0,0,0,.7)}
.card .cat{margin-top:44px;font:400 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:color-mix(in srgb,var(--app) 60%,#f1ece4)}
.card h3{margin:12px 0 0;font:500 clamp(30px,3vw,40px)/1 var(--display);letter-spacing:-.045em}
.card .promise{margin:12px 0 0;font-size:17px;color:var(--text-primary)}
.card .line{margin:8px 0 0;color:var(--text-secondary);font-size:15px;line-height:1.55}
.card .more{margin-top:20px;display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:500;color:var(--accent)}
.card .more svg{width:15px;height:15px;transition:transform .5s var(--ease-out)}
.card:hover .more svg{transform:translateX(4px)}
.card>.phone{align-self:end;width:min(100%,220px);justify-self:center;margin-right:24px;margin-bottom:-90px;transform:translateY(10px) rotate(3deg);transition:transform 1s var(--ease-out)}
.card:hover>.phone{transform:translateY(-14px) rotate(0deg)}
.phone{border-radius:26px;overflow:hidden;border:6px solid #090d17;background:#090d17;box-shadow:0 40px 70px -24px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.07)}
.phone img{width:100%;height:auto;aspect-ratio:9/16;object-fit:cover}
@media (max-width:1020px){.apps-grid{grid-template-columns:1fr;max-width:640px;margin-left:auto;margin-right:auto}}
@media (max-width:520px){.card{grid-template-columns:1fr;padding:26px 26px 0;min-height:0}.card .cat{margin-top:28px}.card>.phone{width:62%;margin:0 auto -70px}.card .txt{padding-bottom:28px}}

/* ---------- principles ---------- */
.principles{display:grid;grid-template-columns:repeat(4,1fr);gap:0 clamp(20px,3vw,40px);margin-top:clamp(36px,4.5vw,56px)}
.principle{padding:28px 0 0;border-top:1px solid var(--line-strong)}
.principle .n{font:400 11.5px/1 var(--mono);color:var(--accent);letter-spacing:.14em}
.principle h3{margin:26px 0 0;font:500 clamp(21px,1.9vw,25px)/1.15 var(--display);letter-spacing:-.03em}
.principle p{margin:12px 0 0;color:var(--text-secondary);font-size:16px;line-height:1.55}
@media (max-width:960px){.principles{grid-template-columns:1fr 1fr;row-gap:44px}}
@media (max-width:560px){.principles{grid-template-columns:1fr;row-gap:34px}.principle h3{margin-top:22px}}

/* ---------- note from the studio ---------- */
.note{padding:clamp(48px,6vw,84px) 0;text-align:center;overflow:hidden}
.note::before{content:"";position:absolute;left:50%;top:50%;width:min(1100px,140vw);height:min(700px,90vw);translate:-50% -50%;background:radial-gradient(closest-side,rgba(244,179,147,.09),transparent);pointer-events:none}
.note .wrap{position:relative;max-width:1000px}
.note-mark{width:56px;height:56px;margin:0 auto 34px;color:var(--text-primary);animation:breathe 8s var(--ease-io) -2s infinite}
@keyframes breathe{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-6px) rotate(-3deg)}}
.note blockquote{margin:30px auto 0;max-width:30ch;font:300 clamp(26px,3.3vw,44px)/1.24 var(--display);letter-spacing:-.035em;text-wrap:balance}
.note blockquote em{font-size:1.08em}
.note .sig{margin:36px 0 0;display:inline-flex;align-items:center;gap:14px;color:var(--text-secondary);font-size:15px}
.note .sig::before{content:"";width:32px;height:1px;background:var(--accent)}

/* ---------- good to know ---------- */
.qa{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px);margin-top:clamp(32px,4vw,48px)}
.q{padding:30px;border-radius:22px;background:rgba(22,30,49,.6);border:1px solid var(--line)}
.q h3{margin:0;font:500 20px/1.2 var(--display);letter-spacing:-.025em}
.q p{margin:12px 0 0;color:var(--text-secondary);font-size:16px;line-height:1.6}
.q a{color:var(--text-primary);text-underline-offset:3px;text-decoration-color:var(--line-strong)}
@media (max-width:900px){.qa{grid-template-columns:1fr}}

/* ---------- final CTA ---------- */
.cta{text-align:center}
.cta h2{margin:22px auto 0;font:500 clamp(46px,8vw,120px)/.98 var(--display);letter-spacing:-.055em;max-width:12ch;text-wrap:balance}
.cta h2 em{font-size:1.06em}
.cta .row{display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap;margin-top:36px}
.cta .micro{margin:20px auto 0;color:var(--text-secondary);font-size:14px;max-width:46ch}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line);padding:48px 0 60px;color:var(--text-secondary);font-size:14.5px}
.foot .wrap{display:flex;flex-wrap:wrap;gap:28px 56px;justify-content:space-between}
.foot .tag{margin:14px 0 0;max-width:32ch}
.foot h4{margin:0 0 14px;font:400 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--text-primary)}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.foot a{text-decoration:none;transition:color .3s var(--ease-out)}
.foot a:hover{color:var(--text-primary)}
.foot .legal{flex-basis:100%;font-size:13px;padding-top:12px}

/* ---------- app pages ---------- */
.app-hero{padding:clamp(120px,16vw,180px) 0 clamp(60px,8vw,100px)}
.app-hero .grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,6vw,90px);align-items:center}
.crumbs{display:inline-flex;gap:8px;align-items:center;font:400 12.5px/1 var(--mono);color:var(--text-secondary);text-decoration:none;letter-spacing:.06em}
.crumbs:hover{color:var(--text-primary)}
.app-id{display:flex;align-items:center;gap:18px;margin-top:30px}
.app-id img{width:84px;height:84px;border-radius:20px;box-shadow:0 16px 40px -14px rgba(0,0,0,.8)}
.app-id p{font-weight:500!important;letter-spacing:-.02em}
.app-hero h1{margin:28px 0 0;font:500 clamp(42px,6vw,84px)/1.02 var(--display);letter-spacing:-.05em;max-width:14ch;text-wrap:balance}
.app-hero .lede{margin:22px 0 0;font-size:clamp(17px,1.5vw,20px);color:var(--text-secondary);max-width:44ch}
.app-hero .row{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:34px}
.app-hero .micro{margin-top:14px;color:var(--text-secondary);font-size:14px}
.hero-phone{position:relative;justify-self:center;width:min(100%,330px)}
.hero-phone .phone{transform:rotate(3deg);animation:float 9s var(--ease-io) -3s infinite}
.hero-phone::before{content:"";position:absolute;inset:-20% -30%;z-index:-1;background:radial-gradient(closest-side,color-mix(in srgb,var(--app) 40%,transparent),transparent)}
@keyframes float{0%,100%{transform:rotate(3deg) translateY(0)}50%{transform:rotate(2deg) translateY(-12px)}}
@media (max-width:860px){.app-hero .grid{grid-template-columns:1fr}.hero-phone{width:min(70%,300px)}}

.strip-sec{padding:20px 0 clamp(80px,10vw,130px)}
.strip{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;padding:10px var(--gutter) 30px;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent;overscroll-behavior-x:contain}
.strip figure{flex:none;width:clamp(210px,22vw,270px);margin:0;scroll-snap-align:center}
.strip .phone{border-width:5px;border-radius:22px}
.strip-sec .hint{padding:0 var(--gutter);max-width:var(--maxw);margin:0 auto 18px;display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.strip-sec .hint h2{margin:0;font:500 clamp(28px,3.4vw,44px)/1 var(--display);letter-spacing:-.04em}
.strip-nav{display:flex;gap:8px}
.strip-nav button{width:44px;height:44px;border-radius:50%;border:1px solid var(--line-strong);background:transparent;color:var(--text-primary);cursor:pointer;display:grid;place-items:center;transition:border-color .3s var(--ease-out),transform .3s var(--ease-out)}
.strip-nav button:hover{border-color:var(--text-primary);transform:translateY(-2px)}
.strip-nav svg{width:18px;height:18px}

.features{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2vw,24px);margin-top:clamp(36px,5vw,60px)}
.feature{padding:30px;border-radius:22px;background:linear-gradient(165deg,var(--panel-2),var(--panel));border:1px solid var(--line)}
.feature .n{font:400 11.5px/1 var(--mono);color:var(--accent);letter-spacing:.14em}
.feature h3{margin:18px 0 0;font:500 23px/1.15 var(--display);letter-spacing:-.03em}
.feature p{margin:10px 0 0;color:var(--text-secondary)}
@media (max-width:760px){.features{grid-template-columns:1fr}}

.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:clamp(36px,5vw,60px);border-top:1px solid var(--line)}
.fact{padding:28px 28px 30px 0;border-right:1px solid var(--line)}
.fact+.fact{padding-left:28px}
.fact:last-child{border-right:0}
.fact h3{margin:0;font:400 11.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.fact p{margin:14px 0 0;color:var(--text-secondary)}
.fact a{color:var(--text-primary)}
@media (max-width:860px){.facts{grid-template-columns:1fr}.fact,.fact+.fact{padding:24px 0;border-right:0;border-bottom:1px solid var(--line)}}

.legal-strip{margin-top:clamp(28px,4vw,44px);padding:24px 28px;border-radius:18px;border:1px solid var(--line);background:rgba(22,30,49,.5)}
.legal-strip h3{margin:0;font:400 11.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.legal-strip ul{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px 28px;color:var(--text-secondary)}
.legal-strip a{color:var(--text-primary)}
.legal-strip .credit{margin:14px 0 0;color:var(--text-secondary);font-size:14.5px}
.legal-page{padding:clamp(120px,14vw,170px) 0 clamp(70px,9vw,120px)}
.legal-page .wrap{max-width:820px}
.legal-page h1{margin:18px 0 0;font:500 clamp(40px,5.6vw,72px)/1.02 var(--display);letter-spacing:-.05em}
.legal-page .updated{margin:16px 0 0;color:var(--text-secondary);font:400 12.5px/1 var(--mono);letter-spacing:.06em}
.legal-page h2{margin:44px 0 0;font:500 clamp(22px,2.2vw,28px)/1.2 var(--display);letter-spacing:-.03em}
.legal-page p,.legal-page li{color:var(--text-secondary);max-width:68ch}
.legal-page li+li{margin-top:8px}
.legal-page a{color:var(--text-primary)}
.next{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:34px 36px;border-radius:22px;text-decoration:none;background:linear-gradient(120deg,var(--panel-2),var(--panel));border:1px solid var(--line);transition:transform .6s var(--ease-out),border-color .6s var(--ease-out)}
.next:hover{transform:translateY(-4px);border-color:var(--line-strong)}
.next .l{display:flex;align-items:center;gap:18px}
.next img{width:56px;height:56px;border-radius:14px}
.next small{display:block;font:400 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-secondary)}
.next strong{display:block;margin-top:8px;font:500 clamp(22px,2.4vw,30px)/1.1 var(--display);letter-spacing:-.035em}
.next svg{width:26px;height:26px;color:var(--accent);flex:none;transition:transform .6s var(--ease-out)}
.next:hover svg{transform:translateX(6px)}

/* ---------- reduced motion: everything in its final state ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;transition-delay:0s!important}
  [data-reveal] .rv{opacity:1;transform:none}
  .hero-phone .phone{transform:rotate(3deg)}
  .card>.phone{transform:rotate(3deg)}
}