@font-face{font-family:"Figtree";src:url(fonts/figtree.woff2) format("woff2");font-weight:300 900;font-display:swap}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:#0d0e10;color:#ecebe8;font-family:"Figtree",system-ui,sans-serif;font-weight:500;letter-spacing:-.015em;-webkit-font-smoothing:antialiased;min-height:100vh}
.stage{position:relative;overflow:hidden;min-height:100vh;padding:48px 48px 64px}
.pill{position:fixed;top:20px;left:50%;transform:translateX(-50%);z-index:9;display:flex;gap:2px;padding:6px;border-radius:999px;background:rgba(40,42,46,.55);backdrop-filter:blur(22px) saturate(140%);-webkit-backdrop-filter:blur(22px) saturate(140%);border:1px solid rgba(255,255,255,.12);box-shadow:0 10px 30px rgba(0,0,0,.45)}
.pill a{color:#c9c7c2;text-decoration:none;font-size:15px;padding:9px 18px;border-radius:999px}
.pill a.on{background:rgba(255,255,255,.1);color:#fff}
.wrap{position:relative;max-width:1120px;margin:0 auto}
.hero{position:relative;container-type:inline-size;aspect-ratio:1120/390;margin-bottom:16px}
.panel{position:absolute;inset:0;background:rgba(255,255,255,.06)}
.edge{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.edge path{fill:none;stroke:rgba(255,255,255,.12);stroke-width:1}
.ln{position:absolute;font-size:8.6cqw;line-height:1;font-weight:600;letter-spacing:-.04em;color:#f3f2ef;height:33.3333%;display:flex;align-items:center;padding:0 2.6cqw;white-space:nowrap;width:max-content}
.l1{left:0;top:0}.l2{right:0;top:33.333%}.l3{right:0;top:66.667%}
.hero .card{position:absolute;padding:18px;border-radius:24px}
.tcat{align-items:center;justify-content:center}
.tcat svg{height:62%;width:auto;max-width:80%}
.tnote{justify-content:center;font-size:17px;line-height:1.35;padding:20px}.tnote p,.tnote span{font-size:17px}
.hero .tclock{flex-direction:row;align-items:center;justify-content:space-between}
.tclock .chip{margin:0}
.tclock .clock{font-size:4.4cqw}
.grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:195px;gap:16px}
.card{position:relative;border-radius:28px;padding:26px;background:rgba(255,255,255,.05);backdrop-filter:blur(26px) saturate(130%);-webkit-backdrop-filter:blur(26px) saturate(130%);border:1px solid rgba(255,255,255,.1);overflow:hidden;display:flex;flex-direction:column}
.p1{grid-column:1/3;grid-row:1/3}
.p2{grid-column:3;grid-row:1/4}
.contact{grid-column:1;grid-row:3}
.about{grid-column:2;grid-row:3}
.lead{font-size:21px;line-height:1.25;font-weight:500;color:#f3f2ef}
.sm2{color:#bdbbb6;margin-top:auto}
.note{font-size:14px;line-height:1.3;color:#a8a6a0}
.cap{margin-top:auto;font-size:18px;color:#d4d2cd;line-height:1.3}
.cap.top{margin:0 0 12px}
.chip{display:flex;align-items:center;gap:9px;font-size:16px;color:#e4e2de;margin-bottom:14px}
.ic{width:22px;height:22px;border-radius:7px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.14);display:inline-block}
.mock{margin:4px auto 18px;width:100%;flex:1;min-height:0;border-radius:18px;background:rgba(10,11,13,.55);border:1px solid rgba(255,255,255,.09);padding:14px;display:flex;flex-direction:column;gap:9px;position:relative}
.mock b{display:block;height:9px;border-radius:5px;background:rgba(255,255,255,.16);width:42%}
.mock b.w{width:70%;height:12px;background:rgba(255,255,255,.24)}
.mock b.s{width:30%}
.blk{flex:1;border-radius:12px;background:rgba(255,255,255,.07);border:1px dashed rgba(255,255,255,.14)}
.blk.b2{flex:.6}
.row{display:flex;gap:8px;height:34px}.row u{flex:1;border-radius:9px;background:rgba(255,255,255,.08)}
.phone{width:66%;border-radius:34px 34px 0 0;border:2px solid rgba(255,255,255,.2);border-bottom:0;padding-top:34px;margin-bottom:-26px;margin-top:0}
.notch{position:absolute;top:9px;left:50%;transform:translateX(-50%);width:54px;height:14px;border-radius:9px;background:#000}
.clock{font-size:44px;font-weight:600;letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:#f3f2ef;line-height:1}
.tclock .chip::after{content:"";width:7px;height:7px;border-radius:50%;background:#c47d63;margin-left:2px}
.ears{transform-origin:100px 60px;animation:ear 5s ease-in-out infinite}
@keyframes ear{0%,90%,100%{transform:rotate(0)}93%{transform:rotate(-4deg)}96%{transform:rotate(3deg)}}
.eye{transform-box:fill-box;transform-origin:center;animation:blink 4.5s infinite}
@keyframes blink{0%,94%,100%{transform:scaleY(1)}97%{transform:scaleY(.08)}}
@media(max-width:860px){
.stage{padding:20px 14px 40px}
.hero{aspect-ratio:auto;display:grid;grid-template-columns:1fr 1fr;column-gap:12px;row-gap:0}
.hero .card{margin-top:12px}
.panel,.edge{height:calc(3 * 84px)}
.ln{position:relative;grid-column:1/3;height:84px;font-size:10.8cqw;left:auto!important;top:auto!important;margin-top:0}
.hero>.panel,.hero>.edge{position:absolute;top:0;left:0;right:0;width:100%}
.l1{margin-left:0}.l2{margin-left:8%;right:auto}.l3{margin-left:17%;right:auto}
.tcat svg{height:auto;width:80%}
.hero .card{position:relative;left:auto!important;top:auto!important;width:auto!important;height:auto!important;min-height:150px}
.hero .tcat{grid-column:1;min-height:140px}
.hero .tnote{grid-column:2;min-height:140px}
.hero .tclock{grid-column:1/3;flex-direction:row;align-items:center;justify-content:space-between;min-height:90px}
.hero .tclock .clock{font-size:40px}
.grid{grid-template-columns:1fr;grid-auto-rows:auto}
.grid .card{grid-column:1!important;grid-row:auto!important}
.p1,.p2{min-height:380px}
.contact,.about{min-height:150px}
}

.kic{background:#a78bfa;border-color:#a78bfa}.mic{background:#3b6ff0;border-color:#3b6ff0}
.scene{margin:4px 0 16px;flex:1;min-height:0;border-radius:18px;overflow:hidden;position:relative;border:1px solid rgba(255,255,255,.1)}
.scene svg{position:absolute;inset:0;width:100%;height:100%;display:block;}
.sky{fill:#f7d9bf;animation:sky 32s ease-in-out infinite}
@keyframes sky{0%,32%,88%,100%{fill:#f7d9bf}50%,70%{fill:#1e2347}}
.dusk{fill:#10143a;opacity:0;animation:dusk 32s ease-in-out infinite}
@keyframes dusk{0%,32%,88%,100%{opacity:0}50%,70%{opacity:.5}}
.sunwrap{animation:sun 32s ease-in-out infinite}
@keyframes sun{0%,28%,92%,100%{transform:translateY(0)}48%,72%{transform:translateY(190px)}}
.moonwrap{transform:translateY(190px);animation:moon 32s ease-in-out infinite}
@keyframes moon{0%,28%,92%,100%{transform:translateY(190px)}50%,70%{transform:translateY(0)}}
.moonbite{fill:#1e2347;animation:bite 32s ease-in-out infinite}
@keyframes bite{0%,32%,88%,100%{fill:#f7d9bf}50%,70%{fill:#1e2347}}
.rays{animation:spin 90s linear infinite;transform-box:view-box}
@keyframes spin{to{transform:rotate(360deg)}}
.stars{opacity:0;animation:stars 32s ease-in-out infinite}
@keyframes stars{0%,38%,84%,100%{opacity:0}52%,68%{opacity:1}}
.cloud{animation:drift 50s ease-in-out infinite alternate}.c2{animation-duration:64s;animation-delay:-8s}
@keyframes drift{to{transform:translateX(40px)}}
.h1{animation:sway 18s ease-in-out infinite alternate}.h2{animation:sway 22s ease-in-out infinite alternate-reverse}
@keyframes sway{to{transform:translateX(-8px)}}
.mascot{animation:bob 6s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-3px)}}
.mise{margin:4px 0 16px;flex:1;min-height:0;border-radius:18px;background:#0a0b0d;border:1px solid rgba(255,255,255,.1);padding:16px;display:flex;flex-direction:column;gap:12px;overflow:hidden}
.mlogo{font-size:11px;letter-spacing:.1em;font-weight:700;color:#5b8bff}
.mpaste{border:1px solid rgba(255,255,255,.14);background:#14161b;border-radius:12px;padding:12px 14px;font-size:14px;color:#8d8b86;overflow:hidden;white-space:nowrap}
.typed{display:inline-block;overflow:hidden;vertical-align:bottom;white-space:nowrap;border-right:2px solid #5b8bff;width:0;animation:type 9s steps(19) infinite}
@keyframes type{0%,4%{width:0}22%,92%{width:19ch}96%,100%{width:0}}
.mrow{display:flex;align-items:center;gap:12px;background:#14161b;border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:10px 12px}
.mrow b{display:block;font-size:15px;color:#f1f0ed;font-weight:600}.mrow s{text-decoration:none;font-size:12px;color:#8d8b86}
.cover{width:42px;height:42px;border-radius:10px;background:#252830;flex:none}
.dots{margin-left:auto;position:relative;width:10px;height:10px}.dots i{position:absolute;inset:0;border-radius:50%}
.dg{background:#43b581}.dy{background:#e0b341}
.newrow{opacity:.3;animation:rowin 9s infinite}
@keyframes rowin{0%,24%{opacity:.3}30%,92%{opacity:1}98%,100%{opacity:.3}}
.newrow .dy{animation:dy 9s infinite}.newrow .dg{animation:dgo 9s infinite}
@keyframes dy{0%,30%{opacity:0}34%,50%{opacity:1;transform:scale(1.25)}54%,100%{opacity:0}}
@keyframes dgo{0%,52%{opacity:0}56%,100%{opacity:1}}
.msteps{display:flex;flex-direction:column;justify-content:center;flex:1;gap:20px;padding:2px 4px}
.msteps div{display:flex;align-items:center;gap:10px}
.msteps em{font-style:normal;font-size:12px;color:#8d8b86;width:16px}
.msteps u{display:block;height:10px;border-radius:5px;background:#3a3e48;transform-origin:left;transform:scaleX(1);opacity:.35;animation:line 9s infinite;width:100%}
.msteps div:nth-child(1) u{width:90%}.msteps div:nth-child(2) u{width:72%;--d:1}.msteps div:nth-child(3) u{width:82%}
.msteps div:nth-child(2) u{animation-name:line2}.msteps div:nth-child(3) u{animation-name:line3}
@keyframes line{0%,56%{opacity:.3}62%,92%{opacity:1}98%,100%{opacity:.3}}
@keyframes line2{0%,62%{opacity:.3}68%,92%{opacity:1}98%,100%{opacity:.3}}
@keyframes line3{0%,68%{opacity:.3}74%,92%{opacity:1}98%,100%{opacity:.3}}
.msteps div:nth-child(4) u{width:60%;animation-name:line3}
.cover{display:flex;align-items:center;justify-content:center}.cover svg{width:34px;height:34px}
@media(prefers-reduced-motion:reduce){.scene *,.mise *{animation:none!important}.typed{width:19ch}.newrow{opacity:1}.msteps u{transform:none}}



.sel{font-size:15px;font-weight:500;color:#9a9893;margin:28px 6px 12px;letter-spacing:.02em}
.tag{margin-left:auto;font-size:12px;color:#9a9893;border:1px solid rgba(255,255,255,.16);border-radius:99px;padding:3px 10px}
.tclock .chip::after{margin-left:6px}

.pill{display:none}
.grid{grid-template-rows:repeat(3,195px) auto}
.contact{cursor:pointer}
.arrow{position:absolute;top:20px;right:20px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#e4e2de;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .5s cubic-bezier(.2,.8,.2,1),background .3s,color .3s}
.arrow:hover{background:rgba(255,255,255,.14)}
.arrow:focus-visible,.fwrap input:focus-visible,.fwrap textarea:focus-visible,.send:focus-visible{outline:2px solid #8fb0ff;outline-offset:2px}
.arrow{transform:translate(var(--mx,0),var(--my,0))}
.arrow[aria-expanded=true]{transform:translate(var(--mx,0),var(--my,0)) rotate(135deg);background:#f1f0ed;color:#0d0e10}
.fwrap{grid-column:1/4;grid-row:4;display:grid;grid-template-rows:0fr;margin-top:-16px;opacity:0;transition:grid-template-rows .6s cubic-bezier(.2,.8,.2,1),margin-top .6s cubic-bezier(.2,.8,.2,1),opacity .45s ease;visibility:hidden}
.fwrap.open{grid-template-rows:1fr;margin-top:0;opacity:1;visibility:visible}
.fin{overflow:hidden;min-height:0;border-radius:28px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
.fwrap:not(.open) .fin{border-color:transparent}
.fin form{padding:26px;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fin label{display:flex;flex-direction:column;gap:8px;font-size:14px;color:#9a9893}
.fin .full{grid-column:1/3}
.fin input,.fin textarea{font:inherit;font-size:16px;color:#f1f0ed;background:#0d0e10;border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:13px 15px;resize:vertical;transition:border-color .25s}
.fin input:focus,.fin textarea:focus{border-color:rgba(255,255,255,.4);outline:none}
.frow{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.send{font:inherit;font-size:15px;font-weight:500;color:#0d0e10;background:#f1f0ed;border:0;border-radius:999px;padding:12px 24px;cursor:pointer;transition:transform .2s}
.send:hover{transform:translateY(-1px)}
.fnote{font-size:13px;color:#8d8b86;margin:0}
@media(max-width:860px){.grid{grid-template-rows:none}.fwrap{grid-column:1!important;grid-row:auto!important}.fin form{grid-template-columns:1fr}.fin .full{grid-column:1}}
@media(prefers-reduced-motion:reduce){.fwrap,.arrow{transition:none}}

.tl{display:flex;align-items:center;gap:14px;min-width:0}
.tl .chip{margin:0;flex-direction:column;align-items:flex-start;font-size:15px;white-space:nowrap}
.tl .chip::after{display:none}
#wmap{width:240px;height:auto;flex:none;fill:#4a4d57}
#wmap .mer{stroke:#c47d63;stroke-width:.8;opacity:.55}
#wmap .pin{fill:#c47d63}
#wmap .ring{fill:none;stroke:#c47d63;stroke-width:1;transform-box:fill-box;transform-origin:center;animation:ping 3s ease-out infinite}
@keyframes ping{0%{transform:scale(1);opacity:.8}100%{transform:scale(3);opacity:0}}
@media(max-width:860px){#wmap{width:150px}.tl .chip{font-size:13px}}
@media(prefers-reduced-motion:reduce){#wmap .ring{animation:none;opacity:0}}

html,body{overflow-anchor:none}
#pre{position:fixed;inset:0;z-index:50;background:#0b0c0e;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;transition:opacity .7s ease,visibility .7s;animation:preforce 0s linear 6s forwards}
#pre.out{opacity:0;visibility:hidden}
@keyframes preforce{to{opacity:0;visibility:hidden;pointer-events:none}}
.pk{display:flex;animation:pkb 1.1s cubic-bezier(.3,1.6,.5,1) infinite alternate}.pkit{width:84px;height:auto;display:block}
@keyframes pkb{from{transform:translateY(8px)}to{transform:translateY(-8px)}}
#pre i{display:block;width:120px;height:2px;border-radius:2px;background:rgba(255,255,255,.12);position:relative;overflow:hidden}
#pre i::after{content:"";position:absolute;inset:0;width:40%;background:#f1f0ed;border-radius:2px;animation:pbar 1.1s ease-in-out infinite}
@keyframes pbar{from{transform:translateX(-100%)}to{transform:translateX(260%)}}
body:not(.ready) .stage{opacity:0}
.ready .stage .card,.ready .stage .sel,.ready .hero .panel,.ready .hero .edge{animation:rise .9s cubic-bezier(.2,1.25,.4,1) backwards;animation-delay:calc(var(--i,0)*70ms)}
@keyframes rise{from{opacity:0;transform:translateY(26px) scale(.97)}}
.stage .card{will-change:transform}
.hop{animation:hop .7s cubic-bezier(.3,1.6,.5,1)}
@keyframes hop{0%{transform:scale(1,1)}25%{transform:scale(1.1,.88) translateY(4px)}55%{transform:scale(.94,1.1) translateY(-14px)}100%{transform:scale(1,1)}}
.clock{font-variant-numeric:tabular-nums}
@media(prefers-reduced-motion:reduce){#pre{display:none}body:not(.ready) .stage{opacity:1}.ready .stage .card,.ready .stage .sel{animation:none}}

html{-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%}
@media(max-width:860px){.note{font-size:18px;line-height:1.3}.sel{font-size:15px}.arrow{width:48px;height:48px}.send{min-height:48px}.fin input,.fin textarea{font-size:16px}}

.h1w{display:contents;font:inherit;margin:0}
@media(max-width:860px){
.hero .panel,.hero .edge{display:none}
.h1w{display:block;grid-column:1/3;position:relative;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:26px;padding:22px 20px 24px}
.h1w .ln{position:static!important;display:inline;height:auto;width:auto;max-width:none;white-space:normal;padding:0;margin:0!important;font-size:11.2cqw;line-height:1.08}
}

.khead{transform-box:view-box;transform-origin:100px 130px;transition:transform .35s cubic-bezier(.3,1.4,.5,1)}
.happy{opacity:0;transition:opacity .15s}
.tcat.joy .happy{opacity:1}.tcat.joy .eye{opacity:0}
.tcat.joy .khead{animation:wig .5s ease-in-out 2}
@keyframes wig{0%,100%{transform:rotate(0)}30%{transform:rotate(-5deg)}70%{transform:rotate(5deg)}}
.tcat.purr .khead{animation:purr .12s linear infinite}
@keyframes purr{0%,100%{transform:translate(0,0)}50%{transform:translate(1.2px,.8px)}}
.tcat.sleepy .eye{animation:none;transform:scaleY(.12);transition:transform 1.2s ease}
.tcat{position:relative;touch-action:manipulation;-webkit-user-select:none;user-select:none}
.fx{position:absolute;pointer-events:none;width:22px;height:22px;animation:fl 1.2s ease-out forwards}
@keyframes fl{0%{opacity:0;transform:translate(0,0) scale(.5)}15%{opacity:1}100%{opacity:0;transform:translate(var(--dx),-52px) scale(1.15) rotate(var(--r))}}
.zz{position:absolute;pointer-events:none;color:#a8a6a0;font-weight:600;font-size:18px;animation:fl 2.2s ease-out forwards}

.clock small{font-size:.34em;font-weight:600;letter-spacing:.02em;margin-left:.3em;color:#a8a6a0;vertical-align:baseline}

.wash{position:fixed;inset:0;z-index:30;pointer-events:none;opacity:0;background:radial-gradient(60% 50% at 18% 20%,rgba(255,170,190,.55),transparent 70%),radial-gradient(55% 55% at 85% 35%,rgba(255,190,210,.5),transparent 70%),radial-gradient(70% 60% at 45% 90%,rgba(255,160,185,.5),transparent 70%);animation:wash 6s ease-in-out forwards}
@keyframes wash{0%{opacity:0}25%{opacity:.7}65%{opacity:.6}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.wash{animation-duration:2s}}
@media(max-width:1000px) and (min-width:861px){.tnote{padding:12px}.tnote p,.tnote span,.note{font-size:14px;line-height:1.25}}