/* ===== Polish pass: page transitions, press feedback, elevation, details (Impeccable + Make Interfaces Feel Better + Transitions) ===== */

/* cross-page transitions (native View Transitions, progressive enhancement) */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vtOut .22s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:vtIn .42s cubic-bezier(.2,0,0,1) both}
@keyframes vtOut{to{opacity:0;transform:translateY(-8px);filter:blur(4px)}}
@keyframes vtIn{from{opacity:0;transform:translateY(14px);filter:blur(6px)}}
.nav{view-transition-name:sitenav}
::view-transition-group(sitenav){animation:none}

/* text */
.sec p,.phead p,.card p,.article p,.faq p{text-wrap:pretty}
.big,.kpi b,.proof b,.case-num b,.g-items b,.stat b,.lines b{font-variant-numeric:tabular-nums}

/* press feedback: 0.96, never below; quick and interruptible */
.btn,.opt,.chips a,.ctabs button,.switch button,.play,.qback,.more{transition-property:transform,box-shadow,background-color,color,scale;transition-duration:.16s;transition-timing-function:cubic-bezier(.2,0,0,1)}
.btn:active,.opt:active,.chips a:active,.ctabs button:active,.switch button:active,.play:active{scale:.96}
a.card:active,.post:active{scale:.985}
.btn:hover{transform:translateY(-1px)}

/* elevation: layered soft shadows instead of fake borders on raised surfaces */
.card,.post,.step,.term,.proof,.case,.calc-in,.faq details{
  box-shadow:0 0 0 1px rgba(143,192,255,.12) inset,0 1px 2px rgba(0,0,0,.25),0 8px 24px -12px rgba(0,0,0,.55)}
a.card:hover,a.card:focus-visible,.post:hover,.post:focus-visible{
  box-shadow:0 0 0 1px rgba(143,192,255,.35) inset,0 2px 4px rgba(0,0,0,.25),0 22px 44px -18px rgba(58,129,237,.75)}
.card .ic,.mod-icon,.step .n{box-shadow:0 0 0 1px rgba(255,255,255,.22) inset,0 4px 10px -2px rgba(10,30,90,.6),0 0 22px rgba(58,129,237,.55)}

/* concentric radius: outer = inner + padding */
.phone{border-radius:31px}
.quiz .opt{border-radius:14px}

/* image outlines */
.photo img,.team-hero video,.phone video{outline:1px solid rgba(255,255,255,.1);outline-offset:-1px}

/* hit areas (44px on touch) */
@media (pointer:coarse){
  .rail button{min-height:44px;min-width:44px}
  .faq summary{min-height:44px}
  .chips a{min-height:44px;display:inline-flex;align-items:center}
}

/* smooth details open (where supported) */
:root{interpolate-size:allow-keywords}
.faq details::details-content{block-size:0;overflow:hidden;transition:block-size .32s cubic-bezier(.2,0,0,1),content-visibility .32s allow-discrete}
.faq details[open]::details-content{block-size:auto}
.assume::details-content{block-size:0;overflow:hidden;transition:block-size .3s cubic-bezier(.2,0,0,1),content-visibility .3s allow-discrete}
.assume[open]::details-content{block-size:auto}

/* mobile menu: staggered entrance, soft exit */
.mmenu nav > *{opacity:0;translate:0 12px;transition:opacity .25s ease-out,translate .25s ease-out}
.menu-open .mmenu nav > *{opacity:1;translate:0 0;transition-duration:.42s}
.menu-open .mmenu nav > *:nth-child(2){transition-delay:.04s}.menu-open .mmenu nav > *:nth-child(3){transition-delay:.08s}
.menu-open .mmenu nav > *:nth-child(4){transition-delay:.12s}.menu-open .mmenu nav > *:nth-child(5){transition-delay:.16s}
.menu-open .mmenu nav > *:nth-child(6){transition-delay:.2s}.menu-open .mmenu nav > *:nth-child(n+7){transition-delay:.24s}

/* GSAP-driven pieces: resting state is visible; JS only enhances */
.gs-par{will-change:transform}
.team-hero{clip-path:inset(0 round 32px)}
.scroll-cue{position:fixed;left:0;top:0;height:3px;width:100%;z-index:40;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,var(--azure),var(--azure-hi));box-shadow:0 0 12px rgba(58,129,237,.9);pointer-events:none}

/* horizontal pinned track for result cases on desktop */
@media (min-width:1000px){
  .hpin{overflow:hidden}
  .hpin .cases.hz{display:flex;gap:18px;width:max-content}
  .hpin .cases.hz .case{width:min(760px,70vw);flex:none}
}

@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
  .mmenu nav > *{opacity:1;translate:none;transition:none}
  .btn:active,.opt:active,.chips a:active{scale:1}
}
.consent{display:flex!important;gap:10px;align-items:flex-start;font-size:13.5px!important;line-height:1.45;color:#c2d1ec!important;cursor:pointer}
.consent input{width:20px!important;height:20px;flex:none;margin:1px 0 0;accent-color:var(--azure);padding:0!important;box-shadow:none!important}
.consent a{color:var(--azure-hi)}
.foot small a{color:#c2d1ec}
.legal h2{font-size:clamp(22px,2.4vw,28px)!important}
.legal .small{font-size:14px!important;color:#8fa0c2!important}
/* nav gets a solid glass background once the page scrolls */
.nav{transition:background-color .3s,backdrop-filter .3s,box-shadow .3s}
.nav.scrolled{background:rgba(4,10,28,.82);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);box-shadow:0 1px 0 rgba(143,192,255,.1)}
/* desktop hero: soft scrim so copy never fights the orbiting modules */
@media (min-width:761px){.vignette{background:linear-gradient(90deg,rgba(4,10,28,.88) 0%,rgba(4,10,28,.62) 30%,rgba(4,10,28,0) 52%),radial-gradient(120% 80% at 50% 40%,transparent 55%,rgba(4,10,28,.75) 100%)}}
.contact-box{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:24px;align-items:center;padding:clamp(24px,4vw,40px);border-radius:28px;background:rgba(255,255,255,.03);box-shadow:0 0 0 1px rgba(143,192,255,.15) inset}
.contact-box h2{margin:0 0 6px!important;font-size:clamp(26px,3vw,36px)!important}
.contact-box p{margin:0!important}
.contact-lines{display:grid;gap:10px}
.contact-lines a{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:16px 18px;border-radius:16px;text-decoration:none;background:rgba(58,129,237,.12);box-shadow:0 0 0 1px rgba(143,192,255,.22) inset;transition:background-color .15s,scale .16s}
.contact-lines a:hover{background:rgba(58,129,237,.24)}.contact-lines a:active{scale:.98}
.contact-lines b{font:700 16px/1.2 var(--f-display);color:#fff}.contact-lines span{color:#dce8ff;overflow-wrap:anywhere}
@media (max-width:760px){.contact-box{grid-template-columns:minmax(0,1fr)}}