@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&display=swap');
:root{color:#282523;background:#f9f7f0;font:400 17px/1.55 'DM Sans',sans-serif;scrollbar-width:none;scroll-behavior:smooth}
::-webkit-scrollbar{display:none}
*{box-sizing:border-box}body,h1,h2,h3,p,ul{margin:0}button,input,select{font:inherit}a{color:inherit}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #655190;outline-offset:4px}[hidden]{display:none!important}
.skip{position:absolute;left:12px;top:12px;transform:translateY(-200%);background:white;z-index:3;padding:10px}.skip:focus{transform:none}
header,.wrap{width:min(1160px,calc(100% - 48px));margin-inline:auto}header{display:flex;gap:20px;justify-content:space-between;align-items:center;min-height:80px;border-bottom:1px solid #ded9cd}nav{display:flex;gap:clamp(12px,3vw,35px)}nav a,.brand{text-decoration:none}.brand{font-size:23px;letter-spacing:-.06em}nav a:hover{text-decoration:underline}
section{scroll-margin-top:16px}.hero{display:grid;grid-template-columns:1.18fr 1fr;align-items:center;gap:36px;padding-block:clamp(50px,9vw,130px)}h1,h2{font-family:'Instrument Serif',Georgia,serif;font-weight:400;line-height:.98;letter-spacing:-.035em}h1{font-size:clamp(60px,8.4vw,118px);max-width:10ch}h1 em{color:#655190}h2{font-size:clamp(45px,6vw,80px);max-width:18ch}h3{font-size:23px;line-height:1.15}.hero p,.intro{max-width:45ch;margin-block:20px 24px}
.cta{display:inline-flex;align-items:center;justify-content:center;gap:14px;border:1px solid #30293b;border-radius:99px;background:#30293b;color:white;padding:11px 20px;text-decoration:none;cursor:pointer;transition:transform .2s,background .2s}.cta:hover{transform:translateY(-3px);background:#534567}.cta:active{transform:scale(.97)}
.mascot-art{aspect-ratio:1.12;display:grid;place-items:center;position:relative;isolation:isolate;border-radius:48% 51% 46% 54%;background:radial-gradient(ellipse at 36% 29%,#f7edfb,#e7ddf2 67%,#e1d7ee);margin:0 4%}.mascot-name{position:absolute;bottom:13%;font-size:.8rem;letter-spacing:.08em;color:#55466a}
.monckey{width:55%;aspect-ratio:1.12;position:relative;display:grid;place-items:center;border-radius:49%;background:radial-gradient(circle at 30% 20%,#b391d9,#7d559e 75%);box-shadow:inset 0 2px 11px #fff6,0 12px 30px #5f47722c;transform:rotate(-8deg)}
.monckey::before,.monckey::after{content:'';position:absolute;width:35%;aspect-ratio:1;top:25%;border-radius:50%;background:#dabcdf;border:clamp(3px,.65vw,9px) solid #916bb6;z-index:-1}.monckey::before{left:-17%}.monckey::after{right:-17%}
.face{width:75%;height:67%;display:flex;justify-content:center;gap:4%;align-items:flex-start;padding-top:18%;position:relative;border-radius:52% 52% 48% 48%;background:#fff0df}.face i{width:27%;height:42%;border:clamp(2px,.5vw,7px) solid #392a44;border-bottom:0;border-radius:60% 60% 0 0;position:relative}.face i::after{content:'';position:absolute;left:37%;top:40%;width:28%;aspect-ratio:1;background:#392a44;border-radius:50%;transform:translate(var(--look-x,0px),var(--look-y,0px))}.face b{position:absolute;top:61%;width:20%;height:16%;border-bottom:clamp(2px,.3vw,5px) solid #392a44;border-radius:50%;transform:rotate(-8deg)}
.demo{background:#eee8f5;padding-block:clamp(54px,8vw,100px)}.demo-grid,.services-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.panel,.services article{padding:clamp(16px,2.5vw,28px);border:1px solid #dcd2e6;border-radius:24px;background:#fffcf8}.panel h3{margin-bottom:16px}.panel label{display:block;margin-top:12px;font-size:.9rem}.panel input,.panel select{width:100%;padding:8px;margin:4px 0;border:1px solid #b4a6bd;border-radius:8px;background:white;color:inherit}.panel .cta{margin-top:12px}.preview{background:#f4f0dc}.dish{border-block:1px solid #d5ccb1;padding-block:11px;display:flex;justify-content:space-between;gap:8px;overflow-wrap:anywhere}.dish strong{white-space:nowrap}.label{font-size:.8rem;color:#595166}.calendar ul{padding-left:20px}.secondary{background:#fbf7ff;color:#30293b}.secondary:hover{color:white}#result{min-height:1.6em;margin-top:16px}
.services{padding-block:75px}.services-grid{margin-top:25px}.services p{margin-top:10px}.contact{background:#e8e9d8;padding-block:65px}.contact .cta{margin-top:22px}footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;padding-block:25px 85px}
.guide{position:fixed;right:16px;bottom:16px;z-index:2;display:flex;align-items:end;gap:10px}.guide button{width:58px;height:58px;display:grid;place-items:center;border:1px solid #c2afd5;border-radius:50%;background:#f6edfa;cursor:pointer}.guide .face{padding-top:14%}.guide-note{max-width:min(235px,calc(100vw - 98px));border:1px solid #decfe8;padding:12px 16px;border-radius:15px;background:#fffaf4;box-shadow:0 8px 26px #38294022}.guide-note p{font-size:.88rem}
@media(max-width:740px){.hero,.demo-grid,.services-grid{grid-template-columns:1fr}.mascot-art{width:min(85%,390px);justify-self:center}.hero{gap:20px}.guide button{width:48px;height:48px}}
@media(max-width:450px){header{flex-wrap:wrap;gap:6px;padding-block:13px}nav{font-size:.9rem}}
@media(prefers-reduced-motion:reduce){:root{scroll-behavior:auto}.cta{transition:none}}