/* ---------- interactivity ---------- */
.progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:60}
.progress i{display:block;height:100%;width:0;background:var(--yellow);box-shadow:0 0 10px var(--yellow)}
nav a.active:not(.btn)::after{width:100%}

.blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.5;pointer-events:none;transition:transform .3s ease-out}
.blob.b1{width:340px;height:340px;background:rgba(251,212,11,.35);top:10%;right:5%;animation:float 9s ease-in-out infinite}
.blob.b2{width:260px;height:260px;background:rgba(110,140,255,.35);bottom:-60px;left:8%;animation:float 11s ease-in-out infinite reverse}
@keyframes float{50%{margin:-40px 0 0 30px;scale:1.12}}
.rotator{font-family:Anton;font-size:clamp(1.3rem,2.6vw,1.9rem);text-transform:uppercase;letter-spacing:.04em;margin:0 0 1rem;color:#fff;min-height:1.3em}
.rotator span{color:var(--yellow)}
.caret{display:inline-block;width:3px;height:1em;background:var(--yellow);margin-left:4px;vertical-align:-.12em;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.hero-photo{perspective:900px}
.hero-photo img{transition:transform .15s ease-out}

.why li{transition:background .25s,transform .25s,border-color .25s}
.why li:hover{background:rgba(255,255,255,.13);border-color:var(--yellow);transform:translateY(-4px)}
.card:hover .ic{animation:pop .5s}
@keyframes pop{40%{transform:scale(1.25) rotate(-6deg)}}
.btn{position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-120%);pointer-events:none}
.btn:hover::after{transform:translateX(120%);transition:transform .6s}
.sticky-cta{animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(251,212,11,.7)}70%{box-shadow:0 0 0 16px rgba(251,212,11,0)}100%{box-shadow:0 0 0 0 rgba(251,212,11,0)}}

.hint{color:var(--mut);font-size:.95rem;margin:.4rem 0 0}

/* before/after slider */
.ba{position:relative;overflow:hidden;border-radius:14px;margin:0 0 1rem;break-inside:avoid;box-shadow:0 4px 16px rgba(31,52,105,.15);cursor:ew-resize;touch-action:pan-y;user-select:none;-webkit-user-select:none;background:#dfe4f1;transition:transform .3s,box-shadow .3s}
.ba:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(31,52,105,.25)}
.ba img{position:absolute;top:0;width:200%;max-width:none;height:100%;margin:0;border-radius:0;box-shadow:none;pointer-events:none}
.ba .b img{left:0}
.ba .a{position:absolute;inset:0;clip-path:inset(0 0 0 var(--p,50%))}
.ba .a img{left:-100%}
.ba .bar{position:absolute;top:0;bottom:0;left:var(--p,50%);width:3px;margin-left:-1.5px;background:var(--yellow);box-shadow:0 0 8px rgba(0,0,0,.4)}
.ba .knob{position:absolute;top:50%;left:var(--p,50%);width:42px;height:42px;margin:-21px 0 0 -21px;border-radius:50%;background:var(--yellow);color:var(--navy);display:grid;place-items:center;font-weight:700;box-shadow:0 4px 14px rgba(0,0,0,.35);transition:scale .2s}
.ba:hover .knob,.ba.drag .knob{scale:1.15}
.ba .tag{position:absolute;bottom:8px;padding:.15rem .6rem;background:rgba(20,34,74,.8);color:#fff;font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;border-radius:999px;pointer-events:none}
.ba .tag.l{left:8px}.ba .tag.r{right:8px;background:rgba(251,212,11,.95);color:var(--navy)}
.ba:focus-visible{outline:3px solid var(--navy);outline-offset:2px}

/* testimonial carousel */
.tcar-wrap{position:relative}
.tcar{display:flex;gap:1.4rem;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:.4rem .2rem 1.4rem;align-items:flex-start;scrollbar-width:none}
.tcar::-webkit-scrollbar{display:none}
.tcar .tcard{flex:0 0 min(380px,86%);scroll-snap-align:start;margin:0;transition:transform .3s,box-shadow .3s}
.tcar .tcard:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(31,52,105,.16)}
.car-btn{position:absolute;top:42%;z-index:5;width:48px;height:48px;border-radius:50%;border:0;background:var(--navy);color:var(--yellow);font-size:1.3rem;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.25);transition:scale .2s,background .2s}
.car-btn:hover{scale:1.1;background:var(--navy-d)}
.car-btn.prev{left:-22px}.car-btn.next{right:-22px}
.dots{display:flex;justify-content:center;gap:.5rem;margin-top:.4rem}
.dots button{width:10px;height:10px;border-radius:999px;border:0;padding:0;background:#c3cadd;cursor:pointer;transition:width .3s,background .3s}
.dots button.on{width:28px;background:var(--navy)}
@media (max-width:760px){.car-btn{display:none}}
@media (prefers-reduced-motion:reduce){.blob,.caret,.sticky-cta{animation:none}.btn::after{display:none}}