/* Page-level UI and motion (v3). Everything here is CSS plus one small scroll handler in app.js.
   Hidden "before" states exist only under html.anim, which an inline script sets when
   motion is allowed, so the page is fully visible without JS or with reduced motion. */

/* reading progress */
.sprog{position:fixed;top:0;inset-inline:0;height:3px;z-index:70;pointer-events:none}
.sprog i{display:block;height:100%;background:var(--flag);transform:scaleX(0);transform-origin:right center}

/* reveal on scroll: uses `translate`, so rotated notes and polaroids keep their tilt */
html.anim .rv{opacity:0;translate:0 26px;transition:opacity .65s ease,translate .65s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i,0)*80ms)}
html.anim .rv.in{opacity:1;translate:0 0}
/* the marker is drawn when its heading scrolls in */
html.anim .mk{background-repeat:no-repeat;background-position:right center;background-size:0% 100%;transition:background-size .9s cubic-bezier(.3,.7,.2,1) .25s}
html.anim .mk.in{background-size:100% 100%}

/* ---- hero ---- */
.hero{position:relative;overflow:hidden}
.hero .wrap{position:relative;z-index:2}
@keyframes rise{from{opacity:0;translate:0 22px}}
html.anim .hero .wrap>*{animation:rise .7s cubic-bezier(.2,.8,.2,1) both}
html.anim .hero .wrap>:nth-child(2){animation-delay:.08s}
html.anim .hero .wrap>:nth-child(3){animation-delay:.16s}
html.anim .hero .wrap>:nth-child(4){animation-delay:.24s}
html.anim .hero .wrap>:nth-child(5){animation-delay:.32s}
html.anim .hero .wrap>:nth-child(6){animation-delay:.42s}
html.anim .hero .wrap>:nth-child(7){animation-delay:.52s}
.hero-facts b{font-family:Rubik;font-weight:800;color:var(--ink)}
.hero-cta .btn{position:relative;overflow:hidden}
.hero-cta .btn::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.28) 50%,transparent 60%);translate:120% 0;animation:shine 4.5s 1.6s ease-in-out infinite}
@keyframes shine{0%{translate:120% 0}35%,100%{translate:-120% 0}}
.hfloat{display:none}
@media (min-width:1200px){
  .hero h1,.hero .h1b,.hero .lead,.hero .kicker{max-width:740px;margin-inline:auto}
  .hero .h1b{margin-top:12px}
  .hfloat{display:block;position:absolute;inset:0;pointer-events:none;z-index:1;--sy:0}
  .hf{position:absolute;rotate:var(--r);transform:translateY(calc(var(--sy)*var(--k)*1px));filter:drop-shadow(0 14px 22px rgba(45,62,102,.18))}
  html.anim .hf{animation:hfin .9s cubic-bezier(.2,1.2,.4,1) both,hfloat 7s ease-in-out infinite;animation-delay:var(--dl),calc(var(--dl) + 1s)}
  @keyframes hfin{from{opacity:0;scale:.8}}
  @keyframes hfloat{50%{translate:0 -9px}}
  .hf1{right:max(18px,calc(50% - 622px));top:64px;width:166px;--r:5deg;--k:-.10;--dl:.5s}
  .hf2{right:max(18px,calc(50% - 640px));top:356px;width:226px;--r:-3deg;--k:-.22;--dl:.75s}
  .hf3{left:max(18px,calc(50% - 632px));top:96px;width:224px;--r:-4deg;--k:-.16;--dl:.6s}
  .hf4{left:max(30px,calc(50% - 600px));top:330px;width:124px;--r:5deg;--k:-.28;--dl:.9s}
  .hf5{right:max(40px,calc(50% - 590px));top:560px;--r:2deg;--k:-.34;--dl:1.2s}
  .hf-wa{background:#ECE5DD;border-radius:16px;padding:12px;display:flex;flex-direction:column;gap:7px;border:6px solid #2D3E66}
  .hf-wa .wm{font-size:13.5px;animation:none;max-width:92%}
  .hf-lp{background:#fff;border-radius:12px;overflow:hidden;border:1px solid #D9D3C4}
  .hf-lp .bar{display:flex;gap:4px;padding:7px 9px;background:#EFECE4;direction:ltr}
  .hf-lp .bar i{width:7px;height:7px;border-radius:50%;background:#D9D3C4}
  .hf-lp .pg{padding:14px 14px 16px;display:grid;gap:7px;text-align:right}
  .hf-lp b{font-family:Rubik;font-weight:900;font-size:17px;line-height:1.15;color:#16211f}
  .hf-lp span{height:6px;border-radius:4px;background:#E7E9EE}
  .hf-lp span.s{width:62%}
  .hf-lp em{font-style:normal;justify-self:start;background:var(--p);color:#fff;border-radius:8px;font-family:Rubik;font-weight:700;font-size:11.5px;padding:5px 12px;margin-top:4px}
  .hf-toast{display:inline-flex;gap:8px;background:#2D3E66;color:#fff;border-radius:12px;padding:9px 16px;font-size:14.5px}
  .hf-toast b{color:#9FE2C6;font-family:Rubik}
  .hf .cc{box-shadow:none}
  .hf .lmk{font-size:5.200cqw}
}
@media (min-width:1200px) and (max-width:1330px){.hf1,.hf3{scale:.88}.hf2{scale:.86}}

/* ---- the sharks ---- */
#team{padding-top:54px}
.team{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:38px}
.team-card{position:relative;background:var(--card);border:1.5px solid var(--line);border-radius:20px;padding:22px 20px 20px;text-align:center;transition:translate .2s,box-shadow .2s,border-color .2s}
.team-card:hover{translate:0 -6px;border-color:var(--ink);box-shadow:6px 6px 0 var(--sky)}
.team-card .av{position:relative;width:92px;height:92px;margin:0 auto 12px}
.team-card .av img{width:100%;height:100%;transition:rotate .3s}
.team-card:hover .av img{rotate:-8deg}
.team-card .av i{position:absolute;bottom:-4px;left:-8px;width:38px;height:38px;border-radius:12px;background:var(--card);border:2px solid var(--ink);display:grid;place-items:center;color:var(--ink);rotate:-6deg;box-shadow:2px 2px 0 var(--sky)}
.team-card .av i svg{width:20px;height:20px}
.team-card h3{font-size:22px;font-weight:900}
.team-card .role{font-family:"Amatic SC",cursive;font-weight:700;font-size:25px;color:var(--sky-text);line-height:1.1;margin:2px 0 8px}
.team-card p{font-size:16.5px;color:var(--ink-soft);line-height:1.5}
.noinvent{max-width:680px;margin:44px auto 0;transform:rotate(-.8deg);min-height:0;padding:28px 26px 24px;text-align:center}
.noinvent h5{justify-content:center;font-size:21px;font-weight:900}
.noinvent p{font-size:17.5px;color:var(--ink)}

/* ---- compare: the old way is struck out, the new way ticks in ---- */
html.anim .way.old li span{background:linear-gradient(currentColor,currentColor) right 56%/0% 1.5px no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size .55s ease,opacity .55s ease;transition-delay:calc(.35s + var(--j,0)*.16s)}
html.anim .way.old.in li span{background-size:100% 1.5px;opacity:.7}
html.anim .way.new li svg{scale:0;transition:scale .45s cubic-bezier(.2,1.7,.4,1);transition-delay:calc(.45s + var(--j,0)*.16s)}
html.anim .way.new.in li svg{scale:1}

/* ---- the journey: a line that fills while you scroll ---- */
.tl-legend{display:flex;justify-content:center;gap:8px 20px;flex-wrap:wrap;margin-top:16px;font-size:15px;color:var(--ink-soft)}
.tl-legend span{display:inline-flex;align-items:center;gap:6px}
.tl-legend svg{width:16px;height:16px;color:var(--flag)}
.tl-legend .fr{background:var(--green-soft);color:var(--green);border-radius:999px;padding:0 9px;font-weight:700;font-size:13px}
.tl{position:relative;margin-top:40px;padding-inline-start:78px;--p:0}
.tl-line{position:absolute;top:10px;bottom:10px;inset-inline-start:26px;width:4px;border-radius:4px;background:repeating-linear-gradient(to bottom,#C5D3EC 0 10px,transparent 10px 19px)}
.tl-line i{display:block;width:100%;height:calc(var(--p)*100%);background:var(--flag);border-radius:4px}
.tl-shark{position:absolute;inset-inline-start:0;top:calc(10px + var(--p)*(100% - 20px));width:56px;height:56px;translate:0 -50%;z-index:3;filter:drop-shadow(0 4px 8px rgba(45,62,102,.3));pointer-events:none}
.tl-ch{position:relative;margin-bottom:20px}
.tl-node{position:absolute;inset-inline-start:-72px;top:18px;width:44px;height:44px;border-radius:50%;background:var(--card);border:2.5px solid #C5D3EC;display:grid;place-items:center;font-family:Rubik;font-weight:900;font-size:19px;color:#9FB3DA;transition:background .35s,color .35s,border-color .35s,scale .45s cubic-bezier(.2,1.7,.4,1);z-index:2}
.tl-ch.on .tl-node{background:var(--flag);border-color:var(--flag);color:#fff;scale:1.12}
.tl-card{background:var(--card);border:1.5px solid var(--line);border-radius:18px;padding:18px 22px 16px;transition:border-color .3s,box-shadow .3s}
.tl-ch.on .tl-card{border-color:#BFD0F1;box-shadow:0 8px 22px rgba(45,62,102,.07)}
.tl-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tl-top h3{font-size:23px;font-weight:900}
.tl-top .fr{background:var(--green-soft);color:var(--green);border-radius:999px;padding:1px 11px;font-weight:700;font-size:13.5px}
.tl-card>p{color:var(--ink-soft);font-size:17px;margin-top:4px}
.tl-steps{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.tl-steps .pill{display:inline-flex;align-items:center;gap:7px;text-decoration:none;color:var(--ink);padding:5px 14px 5px 12px}
.tl-steps .pill b{font-family:Rubik;font-weight:800;color:var(--sky-text)}
.tl-steps .pill small{color:var(--ink-soft)}
.tl-steps a.pill{background:var(--card);border:1.5px solid var(--sky);color:var(--flag);transition:background .15s,box-shadow .15s}
.tl-steps a.pill:hover{background:var(--sky-pale);box-shadow:3px 3px 0 var(--sky)}
.tl-steps a.pill svg{width:15px;height:15px}
.tl-rank{display:inline-flex;align-items:center;gap:6px;margin-top:14px;background:var(--gold);color:#3D2C05;font-family:Rubik;font-weight:700;font-size:13.5px;padding:3px 14px;rotate:-1deg}
.tl-rank svg{width:14px;height:14px}

/* ---- small lifts ---- */
.quote{transition:translate .2s,box-shadow .2s}
.quote:hover{translate:0 -5px;box-shadow:0 12px 26px rgba(45,62,102,.10)}
.vid{transition:scale .2s}
.vid:hover{scale:1.03}
.vid i{transition:scale .2s}
.vid:hover i{scale:1.12}
.shots img{transition:rotate .25s,scale .25s}
.shots img:nth-child(odd){rotate:-1.2deg}
.shots img:nth-child(even){rotate:1deg}
.shots img:hover{rotate:0deg;scale:1.02}
.faq details{transition:border-color .2s,box-shadow .2s}
.faq details[open]{border-color:var(--sky);box-shadow:4px 4px 0 var(--sky-soft)}
.final-card .sh{transition:translate .7s cubic-bezier(.2,1.5,.4,1) .3s,opacity .4s .3s}
html.anim .final-card.rv .sh{translate:0 46px;opacity:0}
html.anim .final-card.rv.in .sh{translate:0 0;opacity:1}

/* ---- demo additions ---- */
.bl em{margin-inline-start:auto;font-style:normal;font-family:Assistant;font-weight:700;font-size:12.5px;color:var(--ink-soft);background:#F1EEE6;border-radius:999px;padding:1px 9px;white-space:nowrap}
.stp{display:block;font-size:13.5px;font-weight:700;color:var(--sky-text);margin-bottom:2px}
.bento.c{grid-template-columns:1fr 1fr 1.25fr}
.num-mini small{display:block;font-size:14px;color:var(--ink-soft)}
.num-mini>b{display:block;font-family:Rubik;font-weight:900;font-size:34px;line-height:1.1;color:var(--p)}
.num-mini .eq{display:flex;align-items:center;gap:10px;margin:10px 0;flex-wrap:wrap}
.num-mini .eq span{background:var(--l);border-radius:12px;padding:7px 12px;font-size:13.5px;color:var(--ink-soft);line-height:1.25}
.num-mini .eq i{display:block;font-style:normal;font-family:Rubik;font-weight:900;font-size:19px;color:var(--ink)}
.num-mini .eq .x{background:none;padding:0;font-size:18px}

@media (max-width:1000px){
  .team{grid-template-columns:1fr 1fr}
  .bento.c{grid-template-columns:1fr 1fr}
  .bento.c .bt-leads{grid-column:1/-1}
}
@media (max-width:620px){
  .team{grid-template-columns:1fr;gap:14px}
  .team-card{display:grid;grid-template-columns:76px 1fr;column-gap:16px;text-align:right;padding:18px}
  .team-card .av{width:72px;height:72px;margin:0;grid-row:span 3}
  .team-card .av i{width:32px;height:32px}
  .team-card h3{font-size:20px}
  .noinvent{transform:none}
  .bento.c{grid-template-columns:1fr}
  .tl{padding-inline-start:58px}
  .tl-line{inset-inline-start:18px}
  .tl-shark{width:44px;height:44px;inset-inline-start:-2px}
  .tl-node{inset-inline-start:-57px;width:38px;height:38px;font-size:17px;top:16px}
  .tl-card{padding:16px 16px 14px}
  .tl-top h3{font-size:21px}
}
@media (prefers-reduced-motion:reduce){
  .tl-shark{display:none}
}