/* Shared design system for soulfork.pt — loaded last on every page so it overrides per-page inline CSS. */
:root{
  --bg:#ececea; --surface:#f6f6f4; --ink:#141414; --ink-soft:#4a4a48; --ink-faint:#5f5f5c;
  --brand:#2f5fe0; --electric:#2f5fe0; --cyan:#2f5fe0; --violet:#2f5fe0; --violet-soft:#2f5fe0; --lime:#2f5fe0;
  --line:rgba(0,0,0,.08); --line-2:rgba(0,0,0,.16);
  --display:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --card-shadow:0 12px 32px -12px rgba(0,0,0,.14);
}
h1,h2,h3{font-family:var(--display);font-weight:800}
.hi-blue,h1 .g,h2 .g{background:none!important;-webkit-background-clip:initial!important;background-clip:initial!important;color:var(--brand)!important}

/* labels: one style instead of system monospace */
.kicker,.eyebrow,.payoff-tag,.foot-col h4,.copy,.compliance,.lf-or,.testi-sub,.pbadge,.plan .price small,.feat-n,.frow-n,.ask-list span{
  font-family:var(--sans,"Manrope",sans-serif);font-weight:600;letter-spacing:.12em}
.copy{letter-spacing:0;font-weight:500;text-transform:none}

/* buttons: one blue action, secondary is ink outline */
.btn{background:var(--brand);color:#fff;border-color:var(--brand);box-shadow:none}
.btn:hover{box-shadow:none;filter:brightness(1.08)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink);filter:none}
.plan .btn{background:transparent;color:var(--ink);border-color:var(--ink)}
.plan .btn:hover{background:var(--ink);color:#fff}
.plan.feat .btn{background:var(--brand);border-color:var(--brand);color:#fff}

/* cards: one surface, no glow */
.plan,.testi,.faq-list details,.service-card,.service-detail,.tier,.step,.card{background:var(--surface);border:1px solid var(--line);box-shadow:none;backdrop-filter:none}
.plan{--pc:var(--brand);--pcbg:rgba(47,95,224,.08);--pcbd:var(--line-2)}
.plan:hover,.testi:hover{box-shadow:var(--card-shadow)}
.plan.feat{border:1.5px solid var(--brand);box-shadow:none}
.plans-base{border:1px solid var(--line);border-style:solid;background:var(--surface)}
.service-list li::before{box-shadow:none}

/* closing block: soft blue glow on white, one blue action (owner preference) */
.cta-final,.cs-final,.sv-final,.cta-box{
  background:radial-gradient(70% 90% at 50% 0%,rgba(47,95,224,.30),rgba(47,95,224,.10) 45%,transparent 75%),linear-gradient(180deg,#e8ecfb,#fbfbfd)!important;
  border:1px solid rgba(47,95,224,.14)!important;box-shadow:none!important;color:var(--ink);text-align:center}
.cta-final h2,.cs-final h2,.sv-final h2,.cta-box b{color:var(--ink);margin-left:auto;margin-right:auto}
.cta-final .lead,.cs-final p,.sv-final p,.cta-box p{color:var(--ink-soft)!important;margin-left:auto;margin-right:auto}
.cta-final .kicker{color:var(--brand)!important}
.cta-final .btn,.cs-final .btn,.sv-final .btn,.cta-box .btn{background:var(--brand);color:#fff;border-color:var(--brand)}
.cta-final .btn.ghost,.cs-final .btn.ghost,.sv-final .btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.cta-final .btn.ghost:hover,.cs-final .btn.ghost:hover,.sv-final .btn.ghost:hover{background:var(--ink);color:#fff}

/* hero of inner pages: size to content, no full-screen void */
.journey{min-height:0!important;height:auto!important}
.jstage{min-height:0!important;height:auto!important;padding:clamp(120px,16vh,170px) 0 clamp(56px,8vh,90px)}
.jstage .payoff{position:relative;inset:auto;background:none;padding-bottom:0}
.jstage .payoff h1{padding-top:0}

/* mobile menu: burger stays above the panel so it can close it */
body.menu-open .nav{z-index:70;background:transparent;border-color:transparent;backdrop-filter:none}
body.menu-open .nav .brand{visibility:hidden}
.mnav{background:var(--bg)}
.mnav a.btn{color:#fff}

/* legibility */
#morph .x{color:var(--ink)}
.gstars i{color:#b46d00}
footer .foot-col a{padding:6px 0}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* depth: layered shadows (owner asked for a more 3D look) */
:root{
  --sh-1:0 1px 2px rgba(17,17,17,.06),0 2px 6px rgba(17,17,17,.06);
  --sh-2:0 2px 4px rgba(17,17,17,.05),0 10px 24px -6px rgba(17,17,17,.14),0 24px 48px -24px rgba(17,17,17,.18);
  --sh-3:0 4px 10px rgba(17,17,17,.08),0 24px 48px -12px rgba(17,17,17,.28),0 60px 90px -40px rgba(17,17,17,.35);
}
.plan,.testi,.faq-list details,.service-card,.tier,.step,.card,.est-open,.frow-vis,.gcard,.demo,.cs-final,.sv-final,.cta-final,.cta-box{box-shadow:var(--sh-2)!important}
.plan:hover,.testi:hover,.est-open:hover,.demo:hover{box-shadow:var(--sh-3)!important;transform:translateY(-3px)}
.plan,.testi,.est-open,.demo{transition:box-shadow .3s,transform .3s}
.phone,.est-phone,.est-device,.reel-phone{box-shadow:var(--sh-3),inset 0 0 0 1px rgba(255,255,255,.08),inset 0 2px 0 rgba(255,255,255,.12)!important}
.btn{box-shadow:0 1px 2px rgba(17,17,17,.12),0 6px 16px -6px rgba(47,95,224,.55)}
.btn.ghost,.btn.ghost:hover{box-shadow:var(--sh-1)}
.btn:hover{box-shadow:0 2px 4px rgba(17,17,17,.12),0 12px 24px -8px rgba(47,95,224,.6)}
.nav.scrolled{box-shadow:0 1px 0 var(--line),0 8px 24px -16px rgba(17,17,17,.25)}

/* motion system: one curve, staggered rise (07/10/2026 "premium" pass) */
:root{--ease:cubic-bezier(.2,.8,.2,1)}
.js .reveal{transition:opacity .9s var(--ease),transform .9s var(--ease)}
@keyframes sf-rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.js .reveal.in>*{animation:sf-rise .8s var(--ease) both}
.js .reveal.in>:nth-child(2){animation-delay:80ms}
.js .reveal.in>:nth-child(3){animation-delay:160ms}
.js .reveal.in>:nth-child(4){animation-delay:240ms}
.js .reveal.in>:nth-child(5){animation-delay:320ms}
.js .reveal.in>:nth-child(6){animation-delay:400ms}
.btn,.pill,.plan,.testi,.est-open,.demo{transition-timing-function:var(--ease)}
.btn{transition:transform .35s var(--ease),box-shadow .35s var(--ease),filter .2s}
.btn:hover{transform:translateY(-2px)}
/* 3D tilt for model cards (driven by site.js, [data-tilt] or .est-open) */
.est-open,.est-open:hover,[data-tilt],[data-tilt]:hover{transform:perspective(900px) rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg));transform-style:preserve-3d;transition:transform .5s var(--ease)}
.est-open .est-phone{transition:transform .5s var(--ease)}
.est-open:hover .est-phone{transform:translateY(-10px) translateZ(30px)}
/* model preview opens like a device turning towards you */
@keyframes sf-flip{from{opacity:0;transform:perspective(1400px) rotateY(-22deg) translateY(30px)}to{opacity:1;transform:none}}
.est-dlg[open] .est-device{animation:sf-flip .7s var(--ease) both}
@media(prefers-reduced-motion:reduce){.js .reveal.in>*{animation:none}.est-open,[data-tilt]{transform:none!important}.est-dlg[open] .est-device{animation:none}}

/* Fundo de tinta, nao o azul: no sistema o azul e acao, e um selo azul do lado
   do botao azul faz o olho ler o selo como se fosse clicavel. */
.pague-depois{display:inline-flex;align-items:center;gap:12px;margin-top:22px;
  padding:15px 24px;border-radius:999px;background:var(--ink);color:#fff;
  font-weight:800;font-size:clamp(15px,1.75vw,19px);line-height:1.25;
  letter-spacing:-.01em;box-shadow:var(--sh-2);text-wrap:balance}
.pague-depois svg{flex:none;color:#7fe08a}
.pague-depois small{display:block;font-weight:600;font-size:.76em;opacity:.88;letter-spacing:0}
@media(max-width:620px){
  .pague-depois{border-radius:22px;padding:14px 18px;align-items:flex-start;gap:10px}
}