:root{--navy:#0A2463;--blue:#1448C4;--cyan:#18B4E6;--yellow:#FFC629;--ink:#0F1B3A;--muted:#52607F;--paper:#F4F7FD;--white:#fff;--line:#DCE4F3;--ok:#14804A;
--f-display:"Bricolage Grotesque","Trebuchet MS",system-ui,sans-serif;--f-body:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color-scheme:light}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;font-family:var(--f-body);font-size:16px;line-height:1.55;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--f-display);line-height:1.1;margin:0;text-wrap:balance;letter-spacing:-.01em}
p{margin:0}a{color:inherit}
:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
.wrap{width:100%;max-width:1000px;margin-inline:auto;padding-inline:20px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;cursor:pointer;font:700 16px/1.2 var(--f-body);padding:16px 24px;border-radius:10px;text-decoration:none;text-align:center;transition:transform .15s,box-shadow .15s}
.btn-yellow{background:var(--yellow);color:var(--navy);box-shadow:0 6px 0 #D9A400}
.btn-yellow:hover{transform:translateY(-1px)}
.btn-wa{background:#25D366;color:#06371c;box-shadow:0 6px 0 #1a9a4b}
.btn-wa:hover{transform:translateY(-1px)}
.btn-line{background:#fff;color:var(--navy);border:2px solid var(--line)}
.btn-line:hover{border-color:var(--blue)}
/* header */
.top{background:var(--navy);box-shadow:0 2px 14px rgba(4,16,60,.25)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-block:12px}
.logo{display:block;height:54px;width:auto}
.top-call{color:#fff;text-decoration:none;font-weight:700;font-size:17px;white-space:nowrap}
.top-call small{display:block;font-weight:500;color:#A9BDF0;font-size:11px;letter-spacing:.06em;text-transform:uppercase}
/* hero */
.ty{position:relative;overflow:hidden;background:linear-gradient(160deg,#0A2463 0%,#0F3585 60%,#1448C4 100%);color:#fff;padding:64px 0 120px;text-align:center}
.ty .o{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none}
.ty .o1{width:420px;height:420px;right:-100px;top:-140px;background:#18B4E6;opacity:.35}
.ty .o2{width:380px;height:380px;left:-120px;bottom:-180px;background:#1B5BE8;opacity:.55}
.ty .wrap{position:relative;z-index:1}
.tick{width:92px;height:92px;margin:0 auto 22px;border-radius:50%;background:var(--yellow);display:grid;place-items:center;box-shadow:0 0 0 10px rgba(255,198,41,.2);animation:pop .6s cubic-bezier(.2,1.4,.4,1) both}
.tick svg{width:46px;height:46px}
.tick path{stroke:var(--navy);stroke-width:4;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:40;animation:draw .5s .35s ease forwards}
@keyframes pop{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes draw{to{stroke-dashoffset:0}}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#7FE0FF;margin-bottom:12px}
.ty h1{font-size:clamp(32px,5.4vw,52px);font-weight:800}
.ty h1 em{font-style:normal;color:var(--yellow)}
.ty .lead{max-width:600px;margin:16px auto 0;font-size:18px;color:#D5E1FF}
.ty .lead b{color:#fff}
/* steps card */
.card{position:relative;z-index:2;margin:-72px auto 0;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 20px 50px rgba(10,36,99,.14);padding:34px 28px}
.card h2{font-size:24px;font-weight:800;color:var(--navy);text-align:center}
.steps{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;counter-reset:s}
.steps li{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:22px 18px 18px;counter-increment:s}
.steps li::before{content:counter(s);position:absolute;top:-16px;left:18px;width:34px;height:34px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;font:800 16px/1 var(--f-display);box-shadow:0 0 0 4px #fff}
.steps b{display:block;font:700 17px/1.25 var(--f-display);color:var(--navy);margin-bottom:6px}
.steps span{font-size:14.5px;color:var(--muted)}
.urgent{margin-top:26px;display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;background:#FFF8E1;border:1px solid #F5DD93;border-radius:12px;padding:16px 18px;text-align:center}
.urgent p{font-weight:600;color:var(--navy)}
.acts{margin-top:22px;display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
/* extras */
.extra{padding:56px 0 64px}
.extra h3{text-align:center;font-size:22px;font-weight:800;color:var(--navy)}
.pills{margin-top:22px;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.pill{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 12px;text-align:center}
.pill b{display:block;font:800 30px/1 var(--f-display);color:var(--blue)}
.pill span{display:block;margin-top:6px;font-size:13.5px;color:var(--muted);font-weight:600}
.back{margin-top:30px;text-align:center}
.back a{color:var(--blue);font-weight:700}
footer{background:var(--navy);color:#A9BDF0;text-align:center;font-size:13.5px;padding:22px 20px}
footer a{color:#fff}
@media (max-width:760px){
 .steps{grid-template-columns:1fr;gap:26px}
 .pills{grid-template-columns:repeat(2,1fr)}
 .top-call small{display:none}.top-call{font-size:15px}.logo{height:44px}
 .ty{padding:44px 0 104px}.card{padding:30px 18px}
 .acts .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){.tick,.tick path{animation:none;stroke-dashoffset:0}}