body{margin:0;background:#F6F7FB}
a{color:#4F46E5}a:hover{color:#3730A3}
.vec path,.vec rect,.vec ellipse,.vec circle{stroke:#1D2440;stroke-width:2.6;stroke-linejoin:round;stroke-linecap:round}
.vec .nos{stroke:none}
.vec .ln{fill:none;stroke-width:2.3}
.leg,.arm{transform-box:fill-box;transform-origin:50% 0}
.leg-a{animation:swing 1s ease-in-out infinite}
.leg-b{animation:swing 1s ease-in-out infinite reverse}
.arm-a{animation:swing 1s ease-in-out infinite reverse}
.arm-b{animation:swing 1s ease-in-out infinite}
.bob{animation:bob .5s ease-in-out infinite alternate}
.float{animation:float 4.5s ease-in-out infinite}
.float2{animation:float 5.5s ease-in-out infinite reverse}
.twinkle{animation:twinkle 2.4s ease-in-out infinite}
.twinkle2{animation:twinkle 3.1s ease-in-out infinite .8s}
.steam{animation:steam 2.2s ease-in-out infinite}
.steam2{animation:steam 2.2s ease-in-out infinite .7s}
.wiggle{transform-box:fill-box;transform-origin:50% 100%;animation:wiggle 1.6s ease-in-out infinite}
.blink{transform-box:fill-box;transform-origin:50% 50%;animation:blink 4s infinite}
@keyframes swing{0%,100%{transform:rotate(16deg)}50%{transform:rotate(-16deg)}}
@keyframes bob{to{transform:translateY(-5px)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes twinkle{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes steam{0%{opacity:0;transform:translateY(6px)}40%{opacity:.9}100%{opacity:0;transform:translateY(-16px)}}
@keyframes wiggle{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@keyframes blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
.hero{height:780px}
.hero-aina{position:absolute;bottom:34px;left:max(58%,720px);width:124px}
.walkbob{animation:wbob .5s ease-in-out infinite}
.hero{background-color:#1E1B4B;transition:background-color .9s ease}
.hero .stars,.hero .clouds,.hero .cone{transition:opacity .9s ease}
.hero .bld,.hero .win,.hero .hill,.hero .bulb{transition:fill .9s ease}
.hero .ground,.hero .h-title,.hero .h-sub,.hero .h-pill,.hero .h-ghost{transition:background-color .9s ease,color .9s ease,border-color .9s ease}
.hero .clouds{opacity:0}
.hero.is-day{background-color:#A9DDF7}
.is-day .stars,.is-day .cone{opacity:0}
.is-day .clouds{opacity:1}
.is-day .bld{fill:#9AA9E3}
.is-day .win{fill:#E8EEFF}
.is-day .hill{fill:#7CC58A}
.is-day .bulb{fill:#E4E7EC}
.is-day .ground{background-color:#5A6488 !important}
.is-day .road{background-image:repeating-linear-gradient(90deg,#FFFFFF 0 40px,transparent 40px 74px) !important;opacity:.85 !important}
.is-day .h-title{color:#0F172A !important}
.is-day .h-sub{color:#1E293B !important}
.is-day .h-pill{background-color:#FFFFFF !important;color:#3730A3 !important}
.is-day .h-ghost{border-color:#3730A3 !important;color:#1E1B4B !important}
.loop-cloud{animation:slide 140s linear infinite}
.dn-toggle{position:relative;width:76px;height:44px;padding:0;border:0;border-radius:999px;cursor:pointer;flex:0 0 auto;transition:background-color .5s ease;overflow:hidden}
.dn-toggle:focus-visible{outline:3px solid #A5B4FC;outline-offset:3px}
.dn-knob{position:absolute;top:5px;left:5px;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:transform .45s cubic-bezier(.65,0,.35,1),background-color .5s ease;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.dn-dot{position:absolute;border-radius:50%;background:#FFFFFF;transition:opacity .4s ease}
.sun-rays{position:absolute;inset:-22px;border-radius:50%;border:5px dotted rgba(253,176,34,.75);animation:spin 24s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.hero-cat{position:absolute;bottom:30px;left:calc(max(58%,720px) + 118px);width:92px}
.cat-bob{animation:catbob .25s ease-in-out infinite alternate}
.cat-head{animation:cathead .5s ease-in-out infinite}
.cat-tail{animation:cattail 1.2s ease-in-out infinite}
.cleg-a{animation:catleg .5s ease-in-out infinite}
.cleg-b{animation:catleg .5s ease-in-out infinite -.25s}
@keyframes catbob{to{transform:translateY(-2px)}}
@keyframes cathead{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(1.5px) rotate(-3deg)}}
@keyframes cattail{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(12deg)}}
@keyframes catleg{0%,100%{transform:rotate(24deg)}50%{transform:rotate(-24deg)}}
.ft-a{animation:stepf 1s linear infinite}
.ft-b{animation:stepf 1s linear infinite -.5s}
.sk-a{animation:skirt 1s ease-in-out infinite}
.sk-b{animation:skirt 1s ease-in-out infinite -.5s}
@keyframes stepf{0%{transform:translate(16px,0)}50%{transform:translate(-16px,0)}75%{transform:translate(0,-9px)}100%{transform:translate(16px,0)}}
@keyframes skirt{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
.meet{height:600px}
.hov{transition:transform .3s ease,box-shadow .3s ease;cursor:default}
.hov:hover{animation:hrise .3s ease-out forwards,hfloat 1.8s ease-in-out .3s infinite}
.pk:hover > *{box-shadow:0 22px 44px rgba(16,24,40,.16) !important}
article.hov:hover{box-shadow:0 22px 44px rgba(0,0,0,.4);border-color:#4F46E5 !important}
@keyframes hrise{from{transform:translateY(0)}to{transform:translateY(-10px)}}
@keyframes hfloat{0%,100%{transform:translateY(-10px)}50%{transform:translateY(-17px)}}
.gest-u{animation:gu 2.2s ease-in-out infinite}
.gest-f{animation:gf 1.1s ease-in-out infinite}
@keyframes gu{0%,100%{transform:rotate(0)}50%{transform:rotate(-9deg)}}
@keyframes gf{0%,100%{transform:rotate(0)}50%{transform:rotate(16deg)}}
.talk{transform-box:fill-box;transform-origin:50% 0;animation:talk .45s ease-in-out infinite}
@keyframes talk{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.4)}}
.nod{animation:nod 1.8s ease-in-out infinite}
@keyframes nod{0%,50%,100%{transform:rotate(0) translateY(0)}14%{transform:rotate(6deg) translateY(4px)}28%{transform:rotate(0) translateY(0)}40%{transform:rotate(4deg) translateY(3px)}}
.sway{animation:sway 2.6s ease-in-out infinite}
.sway2{animation:sway 2.6s ease-in-out infinite -1.3s}
@keyframes sway{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
.meet-fig{height:400px;width:auto;display:block}
.th-a{animation:thigh 1s ease-in-out infinite}
.th-b{animation:thigh 1s ease-in-out infinite -.5s}
.sh-a{animation:shin 1s linear infinite}
.sh-b{animation:shin 1s linear infinite -.5s}
.am-a{animation:armsw 1s ease-in-out infinite}
.am-b{animation:armsw 1s ease-in-out infinite -.5s}
.loop-sky{animation:slide 80s linear infinite}
.loop-hill{animation:slide 40s linear infinite}
.loop-lamp{animation:slide 16s linear infinite}
.loop-road{animation:dash .82s linear infinite}
.phone-card{top:0}
@keyframes wbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes thigh{0%,100%{transform:rotate(-26deg)}50%{transform:rotate(24deg)}}
@keyframes shin{0%,100%{transform:rotate(4deg)}40%{transform:rotate(10deg)}62%{transform:rotate(64deg)}82%{transform:rotate(24deg)}}
@keyframes armsw{0%,100%{transform:rotate(22deg)}50%{transform:rotate(-24deg)}}
@keyframes slide{to{transform:translate3d(-1440px,0,0)}}
@keyframes dash{to{background-position:-74px 0}}
.story{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px;align-items:center}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.pkgs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
h1,h2,h3{letter-spacing:-0.02em}
.morph{position:fixed;left:0;top:0;z-index:30;display:flex;align-items:center;justify-content:center;box-sizing:border-box;pointer-events:none;font-family:'Inter',sans-serif;will-change:transform;transition:width .6s cubic-bezier(.65,0,.35,1),height .6s cubic-bezier(.65,0,.35,1),border-radius .6s cubic-bezier(.65,0,.35,1),background-color .6s ease,box-shadow .6s ease,border-color .6s ease}
.trail{position:fixed;left:0;top:0;width:100%;height:100%;z-index:29;pointer-events:none;overflow:visible}
.morph-tail{position:absolute;left:16px;bottom:-8px;width:18px;height:18px;background:#1E1B4B;transform:rotate(45deg);border-radius:3px;transition:opacity .4s ease}
.morph-label{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%);transition:opacity .4s ease,color .6s,background-color .6s;white-space:nowrap;font-size:12px;font-weight:600;letter-spacing:.4px;padding:4px 10px;border-radius:999px}
.pop-in{animation:popin .45s cubic-bezier(.34,1.56,.64,1) both}
.tdot{width:8px;height:8px;border-radius:50%;background:#FFFFFF;animation:tdot 1.2s ease-in-out infinite}
.tdot:nth-child(2){animation-delay:.15s}.tdot:nth-child(3){animation-delay:.3s}
@keyframes popin{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}
@keyframes tdot{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}
@media (max-width:860px){.morph-label{display:none}}
.field input,.field select{font:inherit;font-size:16px;padding:13px 14px;border:1px solid #D0D5DD;border-radius:10px;background:#FFFFFF;color:#0F172A;min-height:48px;box-sizing:border-box;width:100%}
.field input:focus,.field select:focus{outline:3px solid #A5B4FC;border-color:#4F46E5}
.btn:focus-visible,.pkg-btn:focus-visible{outline:3px solid #A5B4FC;outline-offset:3px}
@media (max-width:860px){
.hero{height:900px}
.hero-aina{left:50%;margin-left:-70px;width:100px;bottom:30px}
.hero-cat{left:calc(50% + 34px);width:76px;bottom:28px}
.meet{height:680px}
.meet-fig{height:320px}
.phone-card{top:118px}
.story,.pkgs{grid-template-columns:minmax(0,1fr);gap:32px}
.steps{grid-template-columns:repeat(2,minmax(0,1fr))}
.fields{grid-template-columns:minmax(0,1fr)}
.flip{order:-1}
}
@media (max-width:520px){.steps{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}