
body .screen{min-height:0;padding:48px 0}
.pg-hero{text-align:center;padding:40px 0 26px!important;background:linear-gradient(180deg,#F7FAFF,#EAF3FB 55%,#F7FAFF)}
.pg-hero .wrap{max-width:720px}
.pg-hero h1{font-size:clamp(30px,5vw,46px);color:var(--navy-900);margin-bottom:14px}
.pg-hero p.lead{font-size:18px;color:var(--ink-600);max-width:600px;margin:0 auto;line-height:1.8}
.sbadge{display:inline-flex;align-items:center;gap:8px;flex-direction:row-reverse;background:rgba(57,198,224,.16);color:#0F9D6E;font-weight:700;font-size:13px;border-radius:999px;padding:7px 16px;margin-bottom:16px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
@media(max-width:880px){.split{grid-template-columns:1fr;gap:24px}.split .illu{order:-1}}
.split h2{font-size:clamp(24px,3.4vw,34px);color:var(--navy-900);margin-bottom:14px}
.split p{font-size:16px;color:var(--ink-600);line-height:1.8;margin-bottom:12px}
.illu{display:flex;justify-content:center}
.illu svg{width:100%;max-width:300px;animation:floaty 6s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.clist{list-style:none;margin-top:8px}
.clist li{display:flex;gap:10px;align-items:flex-start;margin-bottom:12px;font-size:15px;color:var(--ink-600)}
.clist li .v{width:22px;height:22px;border-radius:50%;background:var(--mint);color:#fff;display:flex;align-items:center;justify-content:center;flex:none;font-size:12px;font-weight:800;margin-top:2px}
.clist li b{color:var(--navy-900)}
.steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;width:100%}
@media(max-width:880px){.steps3{grid-template-columns:1fr}}
.step3{background:#fff;border:1px solid var(--line);border-radius:22px;padding:28px;box-shadow:var(--sh-md);text-align:center;position:relative;transition:transform .3s,box-shadow .3s}
.step3:hover{transform:translateY(-6px);box-shadow:0 26px 50px rgba(47,107,255,.16)}
.step3 .n{width:46px;height:46px;margin:0 auto 16px;border-radius:50%;background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:20px}
.step3 h3{font-size:17px;color:var(--navy-900);margin-bottom:8px}
.step3 p{font-size:14px;color:var(--ink-600);line-height:1.7}
.vs-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;width:100%}
@media(max-width:880px){.vs-grid{grid-template-columns:1fr}}
.vs-card{border-radius:22px;padding:28px;box-shadow:var(--sh-md)}
.vs-card.good{background:#fff;border:2px solid var(--mint)}
.vs-card.bad{background:#FAFAFD;border:1px solid var(--line)}
.vs-card h3{font-size:18px;margin-bottom:14px;display:flex;align-items:center;gap:8px;flex-direction:row-reverse;justify-content:flex-end}
.vs-card .badge{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;color:#fff;flex:none}
.vs-card.good .badge{background:var(--mint)}.vs-card.bad .badge{background:var(--ink-400)}
.vs-card ul{list-style:none}
.vs-card li{font-size:14px;color:var(--ink-600);padding:7px 0;border-bottom:1px solid var(--paper-soft)}
.vs-card li:last-child{border-bottom:none}
.pg-cta{text-align:center;margin-top:30px}
@media(prefers-reduced-motion:reduce){.illu svg{animation:none}}

/* ═══ STAGE 3 UPGRADES ═══ */
.reveal-r{opacity:0;transform:translateX(-40px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal-r.in{opacity:1;transform:none}
.reveal-l{opacity:0;transform:translateX(40px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal-l.in{opacity:1;transform:none}
.reveal-scale{opacity:0;transform:scale(.92);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal-scale.in{opacity:1;transform:none}
.stagger>*{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.stagger.in>*{opacity:1;transform:none}
.stagger.in>*:nth-child(1){transition-delay:.05s}
.stagger.in>*:nth-child(2){transition-delay:.15s}
.stagger.in>*:nth-child(3){transition-delay:.25s}
.stagger.in>*:nth-child(4){transition-delay:.35s}
.stagger.in>*:nth-child(5){transition-delay:.45s}
.stagger.in>*:nth-child(6){transition-delay:.55s}
.tile,.sec-card,.svc-card,.bcard,.fee-card,.faq-item{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s cubic-bezier(.2,.7,.2,1)}
.tile:hover,.sec-card:hover,.svc-card:hover,.bcard:hover,.fee-card:hover{transform:translateY(-6px);box-shadow:0 24px 48px rgba(10,27,61,.14)}
@keyframes iconPop{0%{transform:scale(1)}40%{transform:scale(1.18) rotate(-4deg)}100%{transform:scale(1)}}
.tile:hover .icon,.sec-card:hover .icon,.svc-card:hover .icon{animation:iconPop .45s cubic-bezier(.2,.7,.2,1)}
.btn{position:relative;overflow:hidden;-webkit-tap-highlight-color:transparent}
.btn:not(.ghost)::after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.18) 50%,transparent 70%);transform:translateX(-100%);transition:transform .6s}
.btn:hover::after{transform:translateX(100%)}
.ripple-ink{position:absolute;border-radius:50%;background:rgba(255,255,255,.35);transform:scale(0);animation:rippleAnim .55s ease-out forwards;pointer-events:none}
@keyframes rippleAnim{to{transform:scale(3);opacity:0}}
.count-up{font-variant-numeric:tabular-nums}
.bigcircle{will-change:transform}
@media(prefers-reduced-motion:reduce){
  .reveal-r,.reveal-l,.reveal-scale,.stagger>*{opacity:1;transform:none;transition:none}
  .tile:hover,.sec-card:hover,.svc-card:hover,.bcard:hover,.fee-card:hover{transform:none}
  .btn::after{display:none}
}
