:root{
  --peri:#8aa8ee; --peri-d:#5f82d9; --peri-l:#dfe8fb; --peri-xl:#f1f5fe;
  --navy:#26327f; --choco:#5a3a29; --cream:#fffaf2; --neon:#3a5bff;
  --radius:28px;
  --display:'Fredoka',system-ui,sans-serif; --hand:'Caveat',cursive; --script:'Yellowtail',cursive;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{font-family:var(--display);color:var(--choco);background:var(--cream);line-height:1.5;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--neon);outline-offset:3px;border-radius:8px}

/* gingham */
.gingham,.section--gingham,.hero{--g:rgba(138,168,238,.38)}
.section--gingham{
  background-color:#fbfcff;
  background-image:linear-gradient(90deg,var(--g) 50%,transparent 50%),linear-gradient(var(--g) 50%,transparent 50%);
  background-size:72px 72px;
}

/* nav */
.nav{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:20px;padding:8px 24px;background:rgba(255,250,242,.92);backdrop-filter:blur(10px);border-bottom:2px dashed var(--peri)}
.nav__logo img{width:56px;height:auto;border-radius:12px}
.nav__links{display:flex;gap:6px;margin-left:auto}
.nav__links a{padding:8px 14px;border-radius:99px;text-decoration:none;font-weight:500;color:var(--navy);transition:background .2s}
.nav__links a:hover{background:var(--peri-l)}

/* buttons */
.btn{display:inline-block;padding:14px 28px;border-radius:99px;background:var(--peri-d);color:#fff;font-weight:600;font-size:1.05rem;text-decoration:none;border:3px solid var(--navy);box-shadow:0 5px 0 var(--navy);transition:transform .15s,box-shadow .15s;cursor:pointer;font-family:inherit}
.btn:hover{transform:translateY(2px);box-shadow:0 3px 0 var(--navy)}
.btn:active{transform:translateY(5px);box-shadow:0 0 0 var(--navy)}
.btn--ghost{background:#fff;color:var(--navy)}
.btn--small{padding:8px 20px;font-size:.95rem;box-shadow:0 4px 0 var(--navy)}

/* hero */
.hero{position:relative;min-height:calc(100svh - 74px);display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:32px;padding:132px 5vw 56px;overflow:hidden;color:var(--choco);background:#8ea9e1 url(img/pattern.svg) center top/120px}
.neon{position:absolute;top:28px;left:50%;transform:translateX(-50%);padding:8px 38px 14px;border-radius:99px;background:radial-gradient(120% 140% at 50% 0,#4d62c9,#26327f);border:4px solid #fff;box-shadow:0 10px 0 rgba(38,50,127,.35);font-family:var(--script);font-size:clamp(2rem,5.5vw,3.6rem);line-height:1.1;color:#cfe0ff;white-space:nowrap;text-shadow:0 0 6px #fff,0 0 14px var(--neon),0 0 28px var(--neon),0 0 54px var(--neon);animation:flicker 5s infinite;z-index:2}
@keyframes flicker{0%,18%,22%,60%,64%,100%{opacity:1}20%,62%{opacity:.55}}
.hero__inner{position:relative;z-index:1;justify-self:center;width:min(100%,640px);padding:clamp(70px,9vw,104px) clamp(56px,11vw,128px) clamp(70px,9vw,100px);text-align:center;background:url(img/cartouche.svg) center/100% 100% no-repeat;filter:drop-shadow(0 14px 0 rgba(38,50,127,.22))}
.hero__logo{width:min(240px,60%);margin:0 auto;mix-blend-mode:multiply}
.hero__tag{font-family:var(--hand);font-size:1.9rem;line-height:1;color:var(--peri-d);margin-top:-6px}
.hero__lead{font-size:1.1rem;margin:10px auto 22px;max-width:32ch}
.hero__cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.hero__cta .btn{padding:12px 22px;font-size:1rem}
.hero__photo{position:relative;z-index:1;background:#fff;padding:14px 14px 56px;border-radius:12px;transform:rotate(3deg);box-shadow:0 22px 40px rgba(38,50,127,.35);max-width:420px;justify-self:center}
.mascot{position:absolute;z-index:3;right:calc(5vw + min(400px,28vw));bottom:56px;width:clamp(120px,14vw,190px);height:auto;filter:drop-shadow(0 8px 0 rgba(38,50,127,.25));transform:rotate(-6deg)}
.mascot__wave{transform-box:fill-box;transform-origin:90% 90%;animation:wave 2.4s ease-in-out infinite}
@keyframes wave{0%,60%,100%{transform:rotate(0)}15%{transform:rotate(14deg)}30%{transform:rotate(-8deg)}45%{transform:rotate(12deg)}}
.hero__photo img{border-radius:6px;aspect-ratio:1;object-fit:cover}
.hero__photo .note{position:absolute;bottom:12px;left:0;right:0;text-align:center;font-family:var(--hand);font-size:1.7rem;color:var(--navy)}

/* ribbon */
.ribbon{background:var(--choco);color:var(--cream);overflow:hidden;border-block:3px solid var(--navy);padding:12px 0}
.ribbon__track{display:flex;gap:28px;width:max-content;font-family:var(--hand);font-size:1.7rem;animation:slide 28s linear infinite}
.ribbon i{font-style:normal;color:var(--peri)}
@keyframes slide{to{transform:translateX(-50%)}}

/* sections */
.section{padding:88px 6vw}
.section--soft{background:var(--peri-xl)}
.section__head{text-align:center;max-width:640px;margin:0 auto 40px}
.kicker{font-family:var(--hand);font-size:1.7rem;color:var(--peri-d)}
.title{font-size:clamp(2.4rem,6vw,4rem);font-weight:700;line-height:1.05;color:var(--choco);letter-spacing:-.01em}
.title span{color:var(--peri-d)}
.section__sub{margin-top:12px;font-size:1.1rem}

/* filters */
.filters{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:36px}
.chip{font-family:inherit;font-weight:500;font-size:1rem;padding:8px 20px;border-radius:99px;border:2px dashed var(--peri-d);background:#fff;color:var(--navy);cursor:pointer;transition:background .2s}
.chip:hover{background:var(--peri-l)}
.chip.is-on{background:var(--peri-d);color:#fff;border-style:solid}

/* gallery: framed works */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:36px 28px;max-width:1200px;margin:0 auto}
.work{display:flex;flex-direction:column;align-items:center;transition:transform .3s}
.work:nth-child(odd){transform:rotate(-1.2deg)}.work:nth-child(even){transform:rotate(1deg)}
.work:hover{transform:rotate(0) translateY(-6px)}
.work.is-hidden{display:none}
.frame{width:100%;padding:12px;background:#fff;border:3px solid var(--navy);border-radius:10px;box-shadow:8px 8px 0 var(--peri)}
.frame img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:4px}
.plaque{margin-top:18px;width:86%;padding:10px 14px;background:#fff;border:2px dashed var(--peri-d);border-radius:14px;text-align:center}
.plaque h3{font-size:1.15rem;color:var(--navy)}
.plaque p{font-family:var(--hand);font-size:1.25rem;line-height:1.15;color:var(--choco)}
.catalog-note{text-align:center;margin-top:40px;font-size:1.05rem}
.catalog-note a,.link{color:var(--peri-d);font-weight:600}

/* boxes */
.boxes{display:flex;flex-wrap:wrap;justify-content:center;gap:28px;max-width:1100px;margin:0 auto}
.box{flex:0 1 320px;background:#fff;border:3px solid var(--navy);border-radius:var(--radius);padding:14px 14px 22px;box-shadow:0 8px 0 var(--navy);display:flex;flex-direction:column;transition:transform .2s}
.box:hover{transform:translateY(-4px)}
.box img{aspect-ratio:1;object-fit:cover;width:100%;border-radius:18px}
.box h3{margin:16px 6px 0;font-size:1.4rem;color:var(--navy);line-height:1.15}
.box__desc{margin:4px 6px 0;font-family:var(--hand);font-size:1.3rem;line-height:1.1}
.box__foot{margin:auto 6px 0;padding-top:16px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.price{font-size:1.5rem;font-weight:700;color:var(--peri-d)}
.box .btn{padding:8px 18px;font-size:.95rem;box-shadow:0 4px 0 var(--navy)}

/* events */
.events{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;max-width:1200px;margin:0 auto}
.events__media{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.events__media img{width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:24px;border:3px solid var(--navy);box-shadow:6px 6px 0 var(--peri)}
.events__media img:nth-child(2){margin-top:44px}
.events__text p{margin:14px 0}
.ticks{list-style:none;padding:0;margin:0 0 28px}
.ticks li{padding:6px 0 6px 34px;position:relative}
.ticks li::before{content:"♡";position:absolute;left:0;color:var(--peri-d);font-size:1.3rem}
.demo-note{font-size:.85rem;opacity:.65}

/* reviews */
.rating{margin-top:10px;font-size:1.2rem}
.rating strong{font-size:2.4rem;color:var(--navy)}
.rating span{color:#f0a63b;letter-spacing:2px}
.reviews{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;max-width:1100px;margin:0 auto}
.review{background:#fff;padding:26px;border:2px dashed var(--peri-d);border-radius:22px}
.review p{font-size:1.1rem}
.review cite{display:block;margin-top:14px;font-family:var(--hand);font-size:1.5rem;font-style:normal;color:var(--peri-d)}

/* visit */
.visit{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:center;max-width:1100px;margin:0 auto}
.visit__mascot{border-radius:24px;border:3px solid var(--navy);box-shadow:8px 8px 0 var(--peri);transform:rotate(-2deg)}
.stitch{margin-top:18px;padding:16px 22px;background:#fff;border:2px dashed var(--peri-d);border-radius:22px}
.stitch h3{display:inline-block;margin:-34px 0 6px;padding:2px 16px;background:var(--peri-d);color:#fff;border-radius:99px;font-size:1.05rem}
.stitch p+p,.stitch p+a{margin-top:8px}

/* footer */
.footer{background:var(--navy);color:#e7eeff;text-align:center;padding:48px 20px 96px}
.footer__hi{font-family:var(--script);font-size:3rem;color:#cfe0ff;text-shadow:0 0 14px var(--neon)}
.footer p{margin-top:8px}
.footer a{color:#fff}
.footer__demo{opacity:.55;font-size:.85rem;margin-top:20px}

/* whatsapp */
.fab{position:fixed;right:18px;bottom:18px;z-index:30;width:58px;height:58px;display:grid;place-items:center;border-radius:50%;background:#25d366;color:#fff;border:3px solid var(--navy);box-shadow:0 5px 0 var(--navy)}

/* reveal */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s,transform .6s}
.reveal.in{opacity:1;transform:none}

@media (max-width:820px){
  .nav__links{display:none}.nav .btn{margin-left:auto}
  .hero{grid-template-columns:1fr;padding:120px 16px 56px}
  .neon{padding:6px 24px 10px;top:20px}
  .hero__photo{max-width:320px}
  .mascot{right:8px;bottom:12px;width:110px}
  .events,.visit{grid-template-columns:1fr;gap:36px}
  .visit__mascot{max-width:320px;margin:0 auto}
  .section{padding:64px 20px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .neon,.ribbon__track,.mascot__wave{animation:none}
  .reveal{opacity:1;transform:none;transition:none}
  .work,.box,.btn{transition:none}
}