/* Motion and surface system adapted from the supplied MAX reference. */
:root{--fo-ease:cubic-bezier(.16,1,.3,1);--fo-border:rgba(0,199,177,.27)}
html{scroll-padding-top:94px;overflow-x:clip}body{overflow-x:clip}::selection{background:#00c7b13b;color:var(--navy)}
:focus-visible{outline:3px solid var(--teal-dark);outline-offset:5px}
.fo-progress{position:fixed;inset:0 auto auto 0;width:100%;height:3px;z-index:1500;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,#00a896,#00c7b1,#c8fff6);pointer-events:none}
header{background:rgba(255,255,255,.9);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);transition:box-shadow .3s,border-color .3s}
body.fo-scrolled header{box-shadow:0 10px 30px -18px #081a3a60;border-bottom-color:#00c7b133}
.navlinks a{position:relative;transition:color .25s}.navlinks a:after{content:'';position:absolute;bottom:-10px;left:0;right:0;height:2px;border-radius:2px;background:var(--teal);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--fo-ease)}
.navlinks a[aria-current=true]{color:var(--navy)}.navlinks a[aria-current=true]:after,.navlinks a:hover:after{transform:scaleX(1)}
.hero{padding:94px 0 108px;background:radial-gradient(ellipse at 80% 30%,#113d54,var(--navy) 62%)}
.hero-photo{opacity:.34}.hero-overlay{background:linear-gradient(100deg,rgba(8,26,58,.97) 22%,rgba(8,26,58,.85) 65%,rgba(8,26,58,.76))}
.hero h1{font-size:clamp(34px,4.8vw,60px);line-height:1.13;letter-spacing:-.035em;text-wrap:balance;max-width:630px}
.hero h1 em{color:#43e2cd;background:linear-gradient(105deg,#00c7b1,#c7fff6,#00c7b1);background-size:220% 100%;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:fo-gradient 7s linear infinite}
@keyframes fo-gradient{to{background-position:220% 50%}}
.hero p.lead{color:#d2dce9;line-height:1.85}.hero .eyebrow{background:#00c7b113;border-color:#00c7b150;color:#60e4d2}
.hero-stats{background:linear-gradient(135deg,#ffffff0d,#00c7b108);backdrop-filter:blur(10px);border-color:#ffffff1c}
.compass-art{filter:drop-shadow(0 22px 46px #00c7b125);transform:perspective(1000px) rotateY(calc(var(--fo-mx,0)*6deg)) rotateX(calc(var(--fo-my,0)*-4deg));transition:transform .45s var(--fo-ease)}
.chip{background:linear-gradient(135deg,#ffffff15,#00c7b10b);border-color:#ffffff2a;box-shadow:0 12px 28px #00000012;backdrop-filter:blur(14px)}
.fo-hero-lines{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}.fo-hero-lines i{position:absolute;top:0;height:100%;width:1px;background:#ffffff05;left:65%;overflow:hidden}.fo-hero-lines i:nth-child(2){left:85%}.fo-hero-lines i:after{content:'';position:absolute;left:0;top:-30%;width:1px;height:25%;background:linear-gradient(transparent,#00c7b180,transparent);animation:fo-line 8s ease-in-out infinite}.fo-hero-lines i:nth-child(2):after{animation-delay:3s}@keyframes fo-line{to{top:120%}}
.btn{position:relative;overflow:hidden;isolation:isolate;transition:transform .25s var(--fo-ease),box-shadow .25s,background .25s,border-color .25s}
.btn-primary{background:linear-gradient(105deg,#00b8a5,#11dac0,#00c7b1);background-size:180% 100%;border:1px solid #61eddb66;box-shadow:0 10px 25px -12px #00c7b180}
.btn:after{content:'';position:absolute;inset:-70% auto -70% -80%;width:45%;pointer-events:none;background:linear-gradient(90deg,transparent,#ffffff28,transparent);transform:skewX(-20deg);transition:left .7s var(--fo-ease)}
.btn:hover:after{left:145%}.btn-primary:hover{background-position:100% 50%;box-shadow:0 14px 32px -12px #00c7b190;transform:translateY(-3px)}.btn svg{transition:transform .25s}.btn:hover svg{transform:translateX(3px)}
.eyebrow{border-style:solid;border-width:1px;background:#00c7b108;animation:none}.eyebrow:before{animation:none}
.section{padding-top:clamp(64px,7vw,96px);padding-bottom:clamp(64px,7vw,96px)}
h2{letter-spacing:-.025em;text-wrap:balance}.sec-head p{line-height:1.85}
.section-dark{position:relative;background:radial-gradient(ellipse at 100% 0%,#0b3447,var(--navy) 65%)}
.section-dark:after{content:'';position:absolute;inset:0;pointer-events:none;border-top:1px solid #00c7b118;border-bottom:1px solid #00c7b118}.section-dark>.wrap{position:relative;z-index:1}
.bg-offwhite{background:linear-gradient(160deg,#f5f7fa,#f2f8f8)}
.mcard,.diff-item,.plan-card,.id-card,.team-card,.feature-card{transition:transform .35s var(--fo-ease),box-shadow .35s,border-color .35s;box-shadow:0 12px 32px -26px #081a3a50}
.mcard:not(.mcard-feature),.plan-card:not(.teal),.feature-card{background:linear-gradient(145deg,#fff,#fbfdfd);border-color:#081a3a14}
.mcard-feature,.plan-card.teal{background:radial-gradient(at 100% 0%,#164b56,var(--navy) 75%);border:1px solid #00c7b13b}
.fo-light-card{position:relative;overflow:hidden}.fo-light-card:not(.mcard-feature):after{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;opacity:0;background:radial-gradient(330px circle at var(--fo-x,50%) var(--fo-y,50%),#00c7b11c,transparent 75%);transition:opacity .3s}.fo-light-card:not(.mcard-feature):hover:after{opacity:1}
.mcard:hover,.plan-card:hover,.feature-card:hover{border-color:#00c7b150;box-shadow:0 22px 45px -30px #00a89665}
.diff-item{border-color:#ffffff17;background:linear-gradient(145deg,#ffffff08,#ffffff03)}.diff-item:hover{border-color:#00c7b155;box-shadow:0 15px 40px -28px #00c7b170}
.team-card{border:1px solid #ffffff20;overflow:hidden}.team-card:hover{transform:translateY(-5px);border-color:#00c7b160}.team-card img{transition:transform .7s var(--fo-ease)}.team-card:hover img{transform:scale(1.035)}
.team-info{position:relative;z-index:1}.case-frame,.funciona-media{border-color:#00c7b12b;box-shadow:0 25px 55px -35px #081a3a70}
.fo-process-line{position:absolute;top:0;bottom:0;left:26px;width:2px;background:linear-gradient(#00c7b1,#008b7d);transform:scaleY(var(--fo-process,0));transform-origin:top;z-index:1;pointer-events:none;box-shadow:0 0 14px #00c7b130}
.step-card{transition:border-color .4s,box-shadow .4s,transform .4s var(--fo-ease)}.step.fo-current .step-card{border-color:#00c7b170;box-shadow:0 12px 30px -22px #00a89690}.step.fo-current .step-num{border-color:#00a896;background:#e8fffa;color:#008779;box-shadow:0 0 0 5px #00c7b10c}
.fo-heading-ready{opacity:0;translate:0 14px;transition:opacity .7s var(--fo-ease),translate .7s var(--fo-ease)}.fo-heading-visible{opacity:1;translate:0 0}
.reveal{transform:none;translate:0 22px}.reveal.in-view{opacity:1;translate:0 0;animation:fo-reveal .8s var(--fo-ease) backwards}@keyframes fo-reveal{from{opacity:0;translate:0 22px}to{opacity:1;translate:0 0}}
.fo-delay-1{animation-delay:60ms!important}.fo-delay-2{animation-delay:120ms!important}.fo-delay-3{animation-delay:180ms!important}
.fo-band{background:#081a3a;color:#d1ebe7;border-top:1px solid #00c7b126;border-bottom:1px solid #00c7b126;padding:18px 0;position:relative;overflow:hidden}.fo-band-track{display:flex;width:max-content;gap:0;animation:fo-marquee 42s linear infinite}.fo-band-unit{display:flex;align-items:center;gap:40px;padding-right:40px;white-space:nowrap;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}.fo-band-unit span:after{content:' /';margin-left:40px;color:#00c7b1}.fo-band:focus-within .fo-band-track,.fo-band:hover .fo-band-track,.fo-band.paused .fo-band-track{animation-play-state:paused}.fo-band-toggle{position:absolute;right:10px;top:10px;z-index:2;width:34px;height:34px;background:#081a3a;border:1px solid #00c7b144;border-radius:50%;color:#b4fff2;cursor:pointer;display:grid;place-items:center;font:inherit;font-size:11px}.fo-band-toggle:focus-visible{outline-offset:2px}
@keyframes fo-marquee{to{transform:translateX(-50%)}}
.faq details[open]{border-color:#00c7b150}.faq details[open] p{animation:fo-faq .35s var(--fo-ease)}@keyframes fo-faq{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.lead-form input:focus,.lead-form select:focus{border-color:#00a896;box-shadow:0 0 0 4px #00c7b112;outline:none}.modal-card{box-shadow:0 30px 100px #0005}.modal-overlay{backdrop-filter:blur(7px)}
.testi-swipe-hint{font-size:12px;text-align:center;color:var(--muted);font-weight:500}.testi-nav{flex-direction:column;gap:12px}
@media(min-width:901px){.bento .mcard:hover{transform:translateY(-5px)}.plan-grid{align-items:stretch}.plan-card{display:flex;flex-direction:column}.plan-card .plan-btn{margin-top:auto}.plan-card .plan-includes{margin-bottom:24px}}
@media(max-width:900px){.hero{padding:64px 0 72px}.hero h1{font-size:clamp(34px,6vw,48px)}.fo-band-unit{font-size:9px;gap:24px;padding-right:24px}.fo-band-unit span:after{margin-left:24px}.fo-band{padding:16px 0}.fo-band-track{animation:none;width:100%}.fo-band-unit:first-child{white-space:normal;width:100%;justify-content:center;flex-wrap:wrap;gap:8px 20px;padding:0 22px;line-height:1.6;letter-spacing:.07em}.fo-band-unit:nth-child(2){display:none}.fo-band-toggle{display:none}.fo-band-unit span:after{display:none}.fo-hero-lines{opacity:.5}.compass-art{transform:none!important}.fo-light-card:after{display:none}.funciona-media{position:relative;top:auto}}
@media(max-width:720px){.fo-process-line{left:19px}.hero .lead{font-size:15px}.hero h1{line-height:1.16}.section{padding-top:64px;padding-bottom:64px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.reveal{opacity:1!important;transform:none!important;translate:none!important}.fo-heading-ready{translate:none;opacity:1}.compass-art{transform:none!important}.fo-band-track{animation:none}.fo-band-toggle{display:none}.fo-process-line{transform:scaleY(1)}.hero h1 em{background:none;-webkit-text-fill-color:var(--teal);color:var(--teal)}}

/* Compatibility fixes for original components and responsive navigation. */
.brand{flex-shrink:0;white-space:nowrap}.nav{gap:18px}
@media(max-width:1100px){
 .navlinks{display:none}.hamburger-btn{display:flex}
 .mobile-drawer{display:flex;flex-direction:column;max-height:0;overflow:hidden;visibility:hidden;border-top:1px solid transparent;background:#fff;transition:max-height .3s ease,border-color .3s ease,visibility .3s}
 .mobile-drawer.is-open{max-height:340px;visibility:visible;border-top-color:var(--line)}
 .mobile-drawer a{padding:15px 24px;font-size:14.5px;font-weight:600;color:var(--navy);border-bottom:1px solid var(--line)}
 .nav-cta{margin-left:auto}
}
@media(min-width:901px){.testi-card.is-clone{display:none}}
.modal-overlay{z-index:1600;overscroll-behavior:contain;padding:32px 20px}
.modal-close{padding:0;color:var(--navy)}
@media(max-width:639px){.lead-form input,.lead-form select{font-size:16px}.modal-card .lead-form{padding:28px 22px}.modal-overlay{padding:26px 16px}}

/* Branded lead form: navy introduction, calm fields and restrained motion. */
#lead-modal{background:rgba(4,17,38,.76);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
#lead-modal.is-open{animation:fo-modal-backdrop .25s ease}
#lead-modal .modal-card{max-width:600px;box-shadow:none;animation:fo-form-open .5s var(--fo-ease)}
#lead-modal .lead-form{padding:0;border:1px solid #00c7b138;border-radius:28px;overflow:hidden;background:#fff;box-shadow:0 32px 100px -24px #0009}
.fo-form-header{position:relative;isolation:isolate;overflow:hidden;padding:30px 36px;background:radial-gradient(ellipse at 95% 0%,#164b56,#081a3a 75%);color:#fff;border-bottom:1px solid #00c7b140}
.fo-form-header:after{content:'';position:absolute;z-index:-1;pointer-events:none;width:220px;height:220px;border:1px solid #00c7b129;box-shadow:0 0 0 28px #00c7b107,0 0 0 58px #00c7b104;border-radius:50%;right:-120px;top:-100px}
.fo-form-eyebrow{display:flex;align-items:center;gap:8px;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#65e9d7;margin-bottom:14px;padding-right:42px}
.fo-form-eyebrow>span{width:6px;height:6px;border-radius:50%;background:#38ddc5;box-shadow:0 0 0 4px #00c7b119;flex-shrink:0}
#lead-form-title{font-size:clamp(21px,3vw,27px);font-weight:800;line-height:1.25;color:#fff;max-width:440px;margin:0;letter-spacing:-.025em;text-wrap:balance;padding-right:20px}
.fo-form-header p{color:#c7dce3;font-size:12.5px;line-height:1.7;max-width:420px;margin-top:12px}
.fo-form-body{padding:26px 36px 28px}
#lead-modal .form-grid{gap:18px 20px}
#lead-modal .form-field{min-width:0;gap:8px}
#lead-modal .form-field label{font-size:12px;line-height:1.5;font-weight:700;color:#18324e;transition:color .2s}
#lead-modal .form-field:focus-within label{color:#008779}
#lead-modal .form-field input,#lead-modal .form-field select{width:100%;min-width:0;min-height:48px;padding:12px 14px;border:1px solid #dce5e9;border-radius:12px;background:#f6f9fa;color:#18324e;font-size:16px;line-height:1.4;transition:background .2s,border-color .2s,box-shadow .2s}
#lead-modal .form-field input::placeholder{color:#768594;opacity:1}
#lead-modal .form-field select{appearance:none;-webkit-appearance:none;padding-right:40px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='m6 9 6 6 6-6' stroke='%23008779' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
#lead-modal .form-field select:invalid{color:#768594}
#lead-modal .form-field select option{color:#18324e;background:#fff}
#lead-modal .form-field input:focus,#lead-modal .form-field select:focus{background-color:#fff;border-color:#00a896;box-shadow:0 0 0 4px #00c7b114;outline:none}
#lead-modal .lead-form .btn{margin-top:24px;min-height:52px;border-radius:12px;font-size:14px;font-weight:800}
#lead-modal .lead-note{margin:16px auto 0;max-width:420px;font-size:11px;line-height:1.7;color:#657789}
#lead-modal .modal-close{top:17px;right:17px;width:36px;height:36px;background:#ffffff0d;border-color:#ffffff30;box-shadow:none;transition:background .2s,transform .2s}
#lead-modal .modal-close svg path{stroke:#fff}
#lead-modal .modal-close:hover{background:#ffffff20;transform:rotate(90deg)}
#lead-modal.is-open .form-field{animation:fo-field-enter .45s var(--fo-ease) backwards;animation-delay:calc(var(--fo-field-order,0)*35ms + 80ms)}
#lead-modal .form-field:nth-child(2){--fo-field-order:1}#lead-modal .form-field:nth-child(3){--fo-field-order:2}#lead-modal .form-field:nth-child(4){--fo-field-order:3}#lead-modal .form-field:nth-child(5){--fo-field-order:4}#lead-modal .form-field:nth-child(6){--fo-field-order:5}#lead-modal .form-field:nth-child(7){--fo-field-order:6}
@keyframes fo-modal-backdrop{from{opacity:0}to{opacity:1}}
@keyframes fo-form-open{from{opacity:0;transform:translateY(20px) scale(.98)}to{opacity:1;transform:none}}
@keyframes fo-field-enter{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
@media(max-width:560px){
 #lead-modal{padding:20px 12px}
 #lead-modal .lead-form{border-radius:22px}
 .fo-form-header{padding:26px 22px 24px}
 .fo-form-body{padding:24px 22px}
 #lead-form-title{font-size:23px;padding-right:12px}
 #lead-modal .form-grid{gap:16px}
 #lead-modal .modal-close{top:14px;right:14px}
}
@media(prefers-reduced-motion:reduce){#lead-modal.is-open,#lead-modal .modal-card,#lead-modal.is-open .form-field{animation:none!important}#lead-modal .modal-close:hover{transform:none}}

/* Opaque waypoints stay above both lines for the entire animation. */
#como-funciona .timeline{isolation:isolate}
#como-funciona .timeline::before{z-index:0}
#como-funciona .fo-process-line{z-index:1}
#como-funciona .step{position:relative;z-index:2}
#como-funciona .step-num{position:relative;z-index:2;background:#fff}
#como-funciona .step.fo-current .step-num{background:#e8fffa}
#como-funciona .step.is-teal .step-num{background:#eafffb}