:root{--bg:#fff;--tint:#eef7fb;--ink:#232323;--muted:#555b5e;--line:#d6e6ee;--blue:#4fb1d4;--blue-deep:#17789d;color-scheme:light}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:5rem}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.0625rem/1.6 Figtree,system-ui,-apple-system,"Segoe UI",sans-serif}
h1,h2,h3{font-family:"Bricolage Grotesque",Figtree,system-ui,sans-serif;line-height:1.1;margin:0}
a{color:inherit}:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.wrap{max-width:1120px;margin:0 auto;padding:0 1.25rem}
.topbar{background:var(--ink);color:#dfe8ec;font-size:.9rem}
.topbar .wrap{display:flex;flex-wrap:wrap;gap:.25rem 1.5rem;justify-content:space-between;padding-top:.5rem;padding-bottom:.5rem}
.topbar a{text-decoration:none}.topbar a:hover{color:var(--blue)}
header{position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem 0}
.logo{display:block;line-height:0}.logo img{height:34px;width:auto}
nav{display:flex;gap:1.5rem;font-weight:500}nav a{text-decoration:none;color:var(--muted)}nav a:hover{color:var(--ink)}
.menu{display:none;background:none;border:2px solid var(--ink);border-radius:.5rem;padding:.4rem .7rem;font:600 .95rem inherit;font-family:inherit;cursor:pointer}
.btn{display:inline-block;padding:.8rem 1.4rem;border-radius:.6rem;font-weight:600;text-decoration:none;border:0;cursor:pointer;font-size:1rem;font-family:inherit}
.btn-wa{background:var(--blue);color:var(--ink)}.btn-wa:hover{background:var(--ink);color:#fff}
.hero .btn-wa:hover{background:#fff;color:var(--ink)}
.btn-ghost{border:2px solid #fff;color:#fff}.btn-ghost:hover{background:#fff;color:var(--ink)}
.hero{background:var(--ink);color:#fff;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 88% 25%,rgba(79,177,212,.4),transparent 45%)}
.hero::after{content:"";position:absolute;right:-8rem;top:50%;width:26rem;height:26rem;margin-top:-13rem;border:3px solid rgba(79,177,212,.5);border-radius:50%}
.hero .wrap{position:relative;z-index:1;padding-top:4.5rem;padding-bottom:3.5rem}
.slides{display:grid}
.slide{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .6s,visibility .6s}.slide.on{opacity:1;visibility:visible}
.slide h1,.slide h2{font-size:clamp(2.2rem,5.2vw,3.8rem);font-weight:800;letter-spacing:-.03em;max-width:46rem}
.slide p{font-size:1.2rem;color:#d4dfe3;max-width:36rem;margin:1.2rem 0 2rem}
.actions{display:flex;flex-wrap:wrap;gap:.75rem}
.dots{display:flex;gap:.6rem;margin-top:2.5rem}
.dots button{width:2.2rem;height:.45rem;border:0;border-radius:1rem;background:rgba(255,255,255,.35);cursor:pointer;padding:0}.dots button.on{background:var(--blue)}
.chips{background:var(--tint);border-bottom:1px solid var(--line)}
.chips .wrap{display:flex;flex-wrap:wrap;gap:.5rem 1.75rem;justify-content:center;padding-top:1rem;padding-bottom:1rem;font-weight:600}
.chips span::before{content:"";display:inline-block;width:.6rem;height:.6rem;border-radius:50%;background:var(--blue);margin-right:.55rem}
section{padding:4.5rem 0}
h2.t{font-size:clamp(1.8rem,3.5vw,2.6rem);letter-spacing:-.02em;margin-bottom:.75rem}
.lead{color:var(--muted);max-width:38rem;margin:0 0 2.5rem}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem}
.card{border:2px solid var(--line);border-radius:.9rem;padding:1.5rem;display:flex;flex-direction:column;gap:.6rem;background:#fff;transition:border-color .2s,transform .2s}
.card:hover{border-color:var(--blue);transform:translateY(-3px)}
.card h3{font-size:1.2rem}.card p{margin:0;color:var(--muted);font-size:1rem;flex:1}
.card a{color:var(--blue-deep);font-weight:600;text-decoration:none}.card a:hover{text-decoration:underline}
.ic{width:3rem;height:3rem;padding:.7rem;border-radius:.8rem;background:var(--tint);stroke:var(--blue-deep);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.band{background:var(--blue);color:var(--ink);padding:3.5rem 0}
.band .wrap{display:flex;flex-wrap:wrap;gap:1.5rem 3rem;align-items:center;justify-content:space-between}
.band h2{font-size:clamp(1.7rem,3.4vw,2.4rem);max-width:34rem}
.band .btn{background:var(--ink);color:#fff}.band .btn:hover{background:#fff;color:var(--ink)}
.tint{background:var(--tint)}
.whys{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem 3rem}
.why{padding-top:1rem;border-top:3px solid var(--blue)}.why h3{font-size:1.3rem;margin-bottom:.4rem}.why p{margin:0;color:var(--muted)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;counter-reset:s;list-style:none;padding:0;margin:3rem 0 0}
.steps li{counter-increment:s;padding-top:1rem;border-top:2px solid var(--ink)}
.steps li::before{content:counter(s);display:block;font:800 2.5rem "Bricolage Grotesque",sans-serif;color:var(--blue)}
.steps h3{font-size:1.2rem;margin:.2rem 0 .4rem}.steps p{margin:0;color:var(--muted)}
.faq details{border-top:2px solid var(--blue);padding:1rem 0}.faq details:last-child{border-bottom:2px solid var(--blue)}
.faq summary{font:600 1.15rem "Bricolage Grotesque",Figtree,sans-serif;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem}
.faq summary::-webkit-details-marker{display:none}.faq summary::after{content:"+";font-size:1.5rem;line-height:1;color:var(--blue-deep)}
.faq details[open] summary::after{content:"\2212"}.faq p{margin:.75rem 0 0;color:var(--muted);max-width:42rem}
.contact{display:grid;grid-template-columns:1fr 1fr;gap:3rem}
form{display:grid;gap:1rem}label{font-weight:600;display:grid;gap:.35rem}
input,textarea{font:inherit;color:var(--ink);background:#fff;border:2px solid var(--line);border-radius:.6rem;padding:.75rem}
input:focus,textarea:focus{border-color:var(--blue);outline:none}textarea{min-height:7rem;resize:vertical}
.hint{font-size:.9rem;color:var(--muted);margin:0}
dl{margin:0;display:grid;gap:1.2rem}dt{font-weight:600}dd{margin:0;color:var(--muted)}dd a{color:var(--blue-deep)}
footer{background:var(--ink);color:#c9d6db;border-top:4px solid var(--blue);padding:3rem 0 1.5rem;font-size:.97rem}
.fcols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2.5rem}
footer h3{color:#fff;font-size:1.1rem;margin-bottom:.8rem}footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
footer a{text-decoration:none}footer a:hover{color:var(--blue)}
.flogo{display:inline-block;background:#fff;border-radius:.6rem;padding:.5rem .8rem;line-height:0;margin-bottom:.9rem}.flogo img{height:28px;width:auto}
.copy{border-top:1px solid #3a3f41;margin-top:2rem;padding-top:1.2rem;display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem}
.float-wa{position:fixed;right:1rem;bottom:calc(1rem + env(safe-area-inset-bottom,0px));z-index:30;background:var(--blue);color:var(--ink);font-weight:600;text-decoration:none;padding:.85rem 1.3rem;border-radius:3rem;box-shadow:0 4px 14px rgba(35,35,35,.35)}
.float-wa:hover{background:var(--ink);color:#fff}
@media (max-width:980px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:820px){
.menu{display:block}
nav{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;flex-direction:column;gap:0;border-bottom:1px solid var(--line)}
nav.open{display:flex}nav a{padding:.9rem 1.25rem;border-top:1px solid var(--line)}
header .btn{display:none}
.contact,.whys,.steps,.fcols{grid-template-columns:1fr}.hero::after{display:none}
.hero .wrap{padding-top:3rem}section{padding:3.2rem 0}.topbar .wrap{justify-content:center;text-align:center}
}
@media (max-width:560px){.grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.slide,.card{transition:none}}
.phero{background:var(--ink);color:#fff;position:relative;overflow:hidden;padding:1.2rem 0 3rem}
.phero::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 90% 20%,rgba(79,177,212,.4),transparent 45%)}
.phero .wrap{position:relative}
.crumbs{font-size:.9rem;color:#b9c8ce;margin-bottom:1.8rem}.crumbs a{text-decoration:none}.crumbs a:hover{color:var(--blue)}
.phero h1{font-size:clamp(2rem,4.6vw,3.2rem);font-weight:800;letter-spacing:-.03em;max-width:44rem}
.phero p{font-size:1.15rem;color:#d4dfe3;max-width:40rem;margin:1rem 0 1.8rem}
.phero .btn-wa:hover{background:#fff;color:var(--ink)}
.pg{display:grid;grid-template-columns:1fr 330px;gap:3.5rem;align-items:start;padding:3.5rem 0 4rem}
.pg h2{font-size:1.65rem;letter-spacing:-.02em;margin:2.4rem 0 .9rem}.pg h2:first-child{margin-top:0}
.ticks{list-style:none;padding:0;margin:0;display:grid;gap:.65rem}
.ticks li{padding-left:1.8rem;position:relative}.ticks li::before{content:"";position:absolute;left:0;top:.5rem;width:.75rem;height:.75rem;border-radius:50%;background:var(--blue)}
.side{position:sticky;top:5.5rem;border:2px solid var(--ink);border-radius:.9rem;padding:1.5rem;box-shadow:8px 8px 0 var(--blue);background:#fff}
.side h3{font-size:1.25rem;margin-bottom:.5rem}.side p{margin:0 0 1rem;color:var(--muted)}
.side .btn{display:block;text-align:center}.side h4{font:600 1rem Figtree,sans-serif;margin:1.4rem 0 .5rem}
.side ul{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}.side li a{color:var(--blue-deep);text-decoration:none;font-weight:500}.side li a:hover{text-decoration:underline}
@media (max-width:900px){.pg{grid-template-columns:1fr;gap:2rem}.side{position:static}}