/* ctrloop.ai - shared styles ported from design-source/ (Claude Design export).
   Layout and colour live inline in each page; this file carries the
   keyframes, hover lift, reduced-motion and <=640px mobile rules. */
body{margin:0;background:#FFFFFF}
a{color:#1B2440}a:hover{color:#C2410C}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes spinr{to{transform:rotate(-360deg)}}
.spin{transform-box:fill-box;transform-origin:center;animation:spin 4s linear infinite}
.spinr{transform-box:fill-box;transform-origin:center;animation:spinr 6s linear infinite}
.spinslow{animation:spin 50s linear infinite}
@keyframes ripple{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.55);opacity:0}}
.ripple{transform-box:fill-box;transform-origin:center;animation:ripple 3s ease-out infinite}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.breathe{transform-box:fill-box;transform-origin:center;animation:breathe 3s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.float{animation:float 5s ease-in-out infinite}
@keyframes drift{0%,100%{transform:translate(0,0)}50%{transform:translate(14px,-16px)}}
.drift{animation:drift 10s ease-in-out infinite}
@keyframes marquee{to{transform:translateX(-50%)}}
.marquee{animation:marquee 30s linear infinite}
@keyframes words{0%,15%{transform:translateY(0)}20%,35%{transform:translateY(-1.1em)}40%,55%{transform:translateY(-2.2em)}60%,75%{transform:translateY(-3.3em)}80%,95%{transform:translateY(-4.4em)}100%{transform:translateY(-5.5em)}}
.words{animation:words 12.5s cubic-bezier(.7,0,.3,1) infinite}
@keyframes flip{0%,28%{transform:translateY(0)}33%,61%{transform:translateY(-1.1em)}66%,94%{transform:translateY(-2.2em)}100%{transform:translateY(-3.3em)}}
.flip{animation:flip 6s cubic-bezier(.7,0,.3,1) infinite}
@keyframes draw{0%{stroke-dashoffset:320}55%,100%{stroke-dashoffset:0}}
.draw{stroke-dasharray:320;animation:draw 4s ease-out infinite}
@keyframes dot{0%,50%{opacity:0;transform:scale(.4)}60%,100%{opacity:1;transform:scale(1)}}
.dot{transform-box:fill-box;transform-origin:center;animation:dot 4s ease-out infinite}
@keyframes pop{0%{opacity:0;transform:translateY(14px) scale(.94)}8%,60%{opacity:1;transform:none}70%,100%{opacity:0;transform:translateY(-8px)}}
.pop{opacity:0;animation:pop 6s ease-in-out infinite}
@keyframes cursor{0%{transform:translate(140px,90px);opacity:0}12%{opacity:1}40%,44%{transform:translate(0,0) scale(1)}47%{transform:translate(0,0) scale(.8)}52%{transform:translate(0,0) scale(1)}85%{opacity:1;transform:translate(0,0)}100%{opacity:0;transform:translate(0,0)}}
.cursor{animation:cursor 6s ease-in-out infinite}
@keyframes btn{0%,46%{background:#1B2440}50%,92%{background:#16A34A}100%{background:#1B2440}}
.btn{animation:btn 6s infinite}
@keyframes lblA{0%,46%{opacity:1}50%,92%{opacity:0}100%{opacity:1}}
@keyframes lblB{0%,46%{opacity:0}50%,92%{opacity:1}100%{opacity:0}}
.lblA{animation:lblA 6s infinite}.lblB{animation:lblB 6s infinite}
.sweep{transform-box:view-box;transform-origin:120px 120px;animation:spin 3.5s linear infinite}
@keyframes blip{0%,100%{opacity:.25;transform:scale(.7)}50%{opacity:1;transform:scale(1.25)}}
.blip{transform-box:fill-box;transform-origin:center;animation:blip 2.4s ease-in-out infinite}
@keyframes bar{0%,10%{transform:scaleY(.15)}50%,100%{transform:scaleY(1)}}
.bar{transform-box:fill-box;transform-origin:bottom;animation:bar 3s ease-out infinite alternate}
@keyframes type{0%,8%{transform:scaleX(0)}40%,100%{transform:scaleX(1)}}
.type{transform-origin:left;animation:type 4s ease-out infinite}
.orbit{transform-box:view-box;transform-origin:200px 200px;animation:spin 10s linear infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.55)}100%{box-shadow:0 0 0 12px rgba(34,197,94,0)}}
.pulse{animation:pulse 1.6s infinite}
.lift{transition:transform .25s ease,box-shadow .25s ease}
.lift:hover{transform:translateY(-8px);box-shadow:0 24px 48px rgba(27,36,64,.14)}
@media (prefers-reduced-motion: reduce){*{animation:none!important}.pop{opacity:1}
/* the Approve button and its two labels are styled only by keyframes; with motion off, show the resting state */
.btn{background:#1B2440}.lblB{visibility:hidden}
/* .climb figures start at opacity 0 and are placed by their keyframes; with motion off, show all four standing on the stairs */
g.climb{opacity:1;transform:translate(884px,222px)}.climb[style*="2.25s"]{transform:translate(756px,278px)}.climb[style*="4.5s"]{transform:translate(628px,333px)}.climb[style*="6.75s"]{transform:translate(500px,379px)}}

@keyframes travel{0%{left:0;opacity:0}10%,90%{opacity:1}100%{left:100%;opacity:0}}
.packet{position:absolute;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;animation:travel 2.4s linear infinite}
@keyframes t1{0%,10%{transform:scale(0)}18%,92%{transform:scale(1)}100%{transform:scale(0)}}
@keyframes t2{0%,35%{transform:scale(0)}43%,92%{transform:scale(1)}100%{transform:scale(0)}}
@keyframes t3{0%,60%{transform:scale(0)}68%,92%{transform:scale(1)}100%{transform:scale(0)}}
.t1{animation:t1 5s ease-out infinite}.t2{animation:t2 5s ease-out infinite}.t3{animation:t3 5s ease-out infinite}
@keyframes drop{0%{transform:translateY(-14px);opacity:0}25%{opacity:1}80%{opacity:1}100%{transform:translateY(34px);opacity:0}}
.drop{animation:drop 1.8s ease-in infinite}

@keyframes flap{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.5)}}
.flap{transform-box:fill-box;transform-origin:50% 100%;animation:flap .2s linear infinite}
@keyframes hover{0%,100%{transform:translate(0,0) rotate(-3deg)}25%{transform:translate(6px,-8px) rotate(2deg)}50%{transform:translate(0,-12px) rotate(4deg)}75%{transform:translate(-6px,-5px) rotate(-1deg)}}
.hover{transform-box:fill-box;transform-origin:center;animation:hover 4s ease-in-out infinite}
@keyframes wiggle{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}
.wiggle{transform-box:fill-box;transform-origin:50% 0;animation:wiggle 2.2s ease-in-out infinite}
@keyframes look{0%,35%,100%{transform:translateX(0)}45%,65%{transform:translateX(4px)}75%,88%{transform:translateX(-3px)}}
.look{animation:look 5s ease-in-out infinite}
@keyframes wag{0%,100%{transform:rotate(-12deg)}50%{transform:rotate(14deg)}}
.wag{transform-box:fill-box;transform-origin:0% 100%;animation:wag 1.1s ease-in-out infinite}
@keyframes blink{0%,90%,100%{transform:scaleY(1)}94%{transform:scaleY(.1)}}
.blink{transform-box:fill-box;transform-origin:center;animation:blink 4.5s infinite}
@keyframes ear{0%,80%,100%{transform:rotate(0)}85%{transform:rotate(-8deg)}90%{transform:rotate(4deg)}}
.ear{transform-box:fill-box;transform-origin:50% 100%;animation:ear 3.5s ease-in-out infinite}
.words2{animation:words 10s cubic-bezier(.7,0,.3,1) infinite;animation-delay:-1.2s}

@keyframes climb{0%{transform:translate(372px,443px);opacity:0}6%{opacity:1}88%{transform:translate(884px,222px);opacity:1}100%{transform:translate(930px,222px);opacity:0}}
.climb{opacity:0;animation:climb 9s linear infinite}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
.bounce{animation:bounce .5s ease-in-out infinite}
@keyframes leg{from{transform:rotate(-20deg)}to{transform:rotate(20deg)}}
@keyframes legb{from{transform:rotate(20deg)}to{transform:rotate(-20deg)}}
.lega{transform-box:fill-box;transform-origin:50% 0;animation:leg .5s ease-in-out infinite alternate}
.legb{transform-box:fill-box;transform-origin:50% 0;animation:legb .5s ease-in-out infinite alternate}
@keyframes glow{0%,70%,100%{fill:#FFFFFF}20%{fill:#FDD2B5}}
.glow{animation:glow 3s ease-in-out infinite}
@keyframes patrol{0%,100%{transform:translate(0,0)}50%{transform:translate(150px,26px)}}
.patrol{animation:patrol 8s ease-in-out infinite}
@keyframes win{0%,100%{opacity:.35}50%{opacity:1}}
.win{animation:win 2.4s ease-in-out infinite}
details summary{cursor:pointer;list-style:none}details summary::-webkit-details-marker{display:none}

@keyframes fillbar{0%{width:0}85%,100%{width:100%}}
.fillbar{animation:fillbar 9s linear infinite}
@keyframes stepon{0%{background:#FFFFFF;color:#1B2440;border-color:#E8E1D6}3%,80%{background:#E25E1A;color:#FFFFFF;border-color:#E25E1A}90%,100%{background:#FFFFFF;color:#1B2440;border-color:#E8E1D6}}
.stepon{animation:stepon 9s infinite}
@keyframes dial{0%,28%{left:4px}33%,61%{left:calc(33.33% + 2px)}66%,94%{left:calc(66.66% + 0px)}100%{left:4px}}
.dial{animation:dial 7.5s cubic-bezier(.7,0,.3,1) infinite}
.rev{transform:scaleX(-1)}
@keyframes dropin{0%{transform:translateY(-10px);opacity:0}30%,70%{opacity:1}100%{transform:translateY(26px);opacity:0}}
.dropin{animation:dropin 1.8s ease-in infinite}

@media (max-width: 640px){
section > div{padding-top:56px!important;padding-bottom:56px!important;padding-left:18px!important;padding-right:18px!important}
.hide-sm{display:none!important}
.scene-sm{height:440px!important}
}

html{scroll-padding-top:84px}
.navwrap{position:sticky;top:0;z-index:90;background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid #ECE7DF}
.nav-links a{text-decoration:none;color:#1B2440;padding:8px 2px}.nav-links a:hover{color:#C2410C}
.navtoggle{display:none;position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.nav-burger{display:none;width:44px;height:44px;border-radius:12px;border:1px solid #ECE7DF;background:#FFFFFF;align-items:center;justify-content:center;cursor:pointer;color:#1B2440}
.navtoggle:focus-visible ~ .nav-inner .nav-burger{outline:2px solid #C2410C;outline-offset:2px}
.mnav{display:none;flex-direction:column;padding:8px 24px 20px;border-top:1px solid #ECE7DF;background:#FFFFFF}
.mnav a{padding:14px 0;border-bottom:1px solid #F3EEE7;font-family:Outfit,sans-serif;font-weight:700;font-size:18px;color:#1B2440;text-decoration:none}
.mnav a.mcta{margin-top:14px;border:none;background:#C2410C;color:#FFFFFF;text-align:center;border-radius:999px;font-family:Inter,sans-serif;font-size:16px;font-weight:600}
.burger-x{display:none}
@media (max-width:1020px){.navtoggle{display:block}.nav-links{display:none!important}.nav-burger{display:flex}.mnav{box-sizing:border-box;max-height:calc(100vh - 72px);max-height:calc(100dvh - 72px);overflow-y:auto}.navtoggle:checked ~ .mnav{display:flex}.navtoggle:checked ~ .nav-inner .burger-open{display:none}.navtoggle:checked ~ .nav-inner .burger-x{display:block}}
@media (max-width:640px){.nav-cta{display:none!important}.nav-inner{height:62px!important;padding:0 16px!important}}