/* Rent-a-Mascot — pastel kawaii redesign, 20 Oct 2026 */
:root{
 --cream:#FFF9F2; --ink:#45304F; --ink-soft:#6E5A78;
 --pink:#FFD3E2; --pink-deep:#D6487C; --mint:#CDEEDF; --lav:#E4DAF7; --peach:#FFE3C7;
 --card:#FFFFFF; --ring:#F4C7D8; --radius:26px;
 font-size:16px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font-family:"Nunito",system-ui,sans-serif;line-height:1.55}
h1,h2,h3,.logo,.btn,.plan-amount{font-family:"Baloo 2","Nunito",system-ui,sans-serif}
h1{font-size:clamp(1.9rem,5.5vw,3.3rem);line-height:1.12;margin:.2em 0 .4em}
h1 em{font-style:normal;color:var(--pink-deep)}
h2{font-size:clamp(1.4rem,3.5vw,2.1rem);margin:0 0 .35em}
img{max-width:100%;height:auto}
a{color:var(--pink-deep)}
.sr-only{position:absolute !important;left:-9999px;width:1px;height:1px;overflow:hidden}

/* header */
.top{position:sticky;top:0;z-index:30;display:flex;flex-wrap:wrap;gap:.4rem .9rem;align-items:center;justify-content:space-between;padding:.6rem 5vw;background:rgba(255,249,242,.92);backdrop-filter:blur(8px);border-bottom:2px dashed var(--ring)}
.logo{font-weight:800;font-size:1.25rem;color:var(--ink);text-decoration:none}
.logo-dot{color:var(--pink-deep)}
.top nav{display:flex;flex-wrap:wrap;gap:.2rem .4rem;align-items:center}
.top nav a{text-decoration:none;color:var(--ink-soft);font-weight:700;padding:.35rem .6rem;border-radius:999px;transition:background .2s}
.top nav a:hover{background:var(--pink)}
.nav-cta{background:var(--pink-deep);color:#fff !important}
.nav-cta:hover{background:#b93a67 !important}

/* hero */
.hero{text-align:center;padding:3.2rem 6vw 2.4rem;max-width:62rem;margin:0 auto;position:relative}
.hero-float{display:flex;justify-content:center;gap:clamp(.4rem,2vw,1.2rem);margin-bottom:1.2rem}
.hero-m{width:clamp(56px,11vw,120px);height:auto;border-radius:30%;box-shadow:0 8px 20px rgba(214,72,124,.18);animation:bob 3.4s ease-in-out infinite}
.hero-m2{animation-delay:.4s}.hero-m3{animation-delay:.8s}.hero-m4{animation-delay:1.2s}.hero-m5{animation-delay:1.6s}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-10px) rotate(2deg)}}
.definition{font-size:1.12rem;max-width:44rem;margin:.4rem auto;color:var(--ink)}
.hero-sub{color:var(--ink-soft);font-weight:700}
.hero-ctas{margin-top:1.4rem}

/* buttons */
.btn{display:inline-block;background:var(--pink-deep);color:#fff;border:none;cursor:pointer;font-weight:700;font-size:1rem;padding:.7rem 1.4rem;border-radius:999px;text-decoration:none;box-shadow:0 4px 0 #b93a67;transition:transform .15s}
.btn:hover{transform:translateY(-2px) scale(1.03)}
.btn:active{transform:translateY(1px)}
.btn-big{font-size:1.1rem;padding:.85rem 1.7rem}
.btn-ghost{background:#fff;color:var(--pink-deep);box-shadow:0 4px 0 var(--ring);border:2px solid var(--ring)}

/* sections + dividers */
section{padding:2.6rem 5vw;max-width:72rem;margin:0 auto}
.answer{max-width:50rem;background:#fff;border:2px solid var(--ring);border-radius:var(--radius);padding:1.4rem 1.6rem;margin:0 auto 2rem;box-shadow:0 10px 24px rgba(214,72,124,.08)}
.answer h2{font-size:1.25rem}
.answer p{margin:0;color:var(--ink-soft)}
.divider{color:var(--cream);height:56px;margin-bottom:-1px}
.divider svg{display:block;width:100%;height:56px}
.tint-mint{background:var(--mint)}
.tint-pink{background:var(--pink)}
.tint-lav{background:var(--lav)}
.tint-mint,.tint-pink,.tint-lav{max-width:none}
.tint-mint>*,.tint-pink>*,.tint-lav>*{max-width:72rem;margin-left:auto;margin-right:auto}
.gallery .divider{color:var(--mint)}
.section-sub{color:var(--ink-soft);margin-top:0}

/* gallery */
.gallery-tools{display:flex;flex-wrap:wrap;gap:.9rem;align-items:flex-end;margin:1rem 0}
.search-wrap{margin:0;flex:1 1 230px}
.search-wrap label{display:block;font-weight:700;margin-bottom:.25rem}
#search{width:100%;padding:.65rem 1rem;border-radius:999px;border:2px solid var(--ring);font:inherit;background:#fff}
#search:focus{outline:3px solid var(--pink-deep);outline-offset:1px}
.chips{display:flex;flex-wrap:wrap;gap:.4rem}
.chip{border:2px solid var(--ring);background:#fff;color:var(--ink);font:inherit;font-weight:700;padding:.4rem .85rem;border-radius:999px;cursor:pointer;transition:transform .15s,background .2s}
.chip:hover{transform:translateY(-2px) rotate(-1deg)}
.chip.is-on{background:var(--pink-deep);border-color:var(--pink-deep);color:#fff}
.gallery-count{color:var(--ink-soft);font-weight:700}
.grid{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fill,minmax(165px,1fr))}
.card{display:block}
.card-btn{display:block;width:100%;text-align:left;background:var(--card);border:2px solid transparent;border-radius:var(--radius);padding:0;cursor:pointer;font:inherit;color:inherit;overflow:hidden;box-shadow:0 6px 16px rgba(69,48,79,.08);transition:transform .18s,box-shadow .18s,border-color .18s}
.card-btn:hover,.card-btn:focus-visible{transform:translateY(-6px) rotate(-1.2deg);box-shadow:0 14px 26px rgba(214,72,124,.2);border-color:var(--ring)}
.card-btn:focus-visible{outline:3px solid var(--pink-deep);outline-offset:2px}
.card-btn:hover img{animation:wiggle .5s ease-in-out}
@keyframes wiggle{0%,100%{transform:rotate(0)}30%{transform:rotate(-3deg) scale(1.04)}70%{transform:rotate(2.5deg) scale(1.04)}}
.card-btn img{display:block;width:100%;height:auto;background:#fdf1f6}
.card-body{display:block;padding:.7rem .85rem .85rem}
.card-name{display:block;font-family:"Baloo 2",sans-serif;font-size:1.08rem}
.card-niche{display:inline-block;background:var(--peach);border-radius:999px;padding:.05rem .55rem;font-size:.78rem;font-weight:700;color:#8a5a2b;margin:.2rem 0}
.tag-og{display:inline-block;background:var(--lav);border-radius:999px;padding:.05rem .55rem;font-size:.78rem;font-weight:700;color:#5d4a86;margin-left:.25rem}
.card-pers{display:block;color:var(--ink-soft);font-size:.86rem;margin-top:.25rem}

/* pricing */
.plans{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));align-items:stretch}
.plan{position:relative;background:#fff;border-radius:var(--radius);padding:1.3rem 1.3rem 1.5rem;box-shadow:0 8px 20px rgba(69,48,79,.1);display:flex;flex-direction:column;transition:transform .18s}
.plan:hover{transform:translateY(-5px)}
.plan-featured{border:3px solid var(--pink-deep)}
.plan-flag{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--pink-deep);color:#fff;font-weight:800;font-size:.8rem;padding:.15rem .8rem;border-radius:999px}
.plan h3{margin:.1rem 0}
.plan-price{margin:.1rem 0 .6rem}
.plan-amount{font-size:2rem;font-weight:800;color:var(--pink-deep)}
.plan-per{color:var(--ink-soft);font-weight:700}
.plan-list{list-style:none;padding:0;margin:0 0 1rem;flex:1}
.plan-list li{padding:.28rem 0 .28rem 1.5rem;position:relative}
.plan-list li::before{content:"♥";position:absolute;left:.2rem;color:var(--pink-deep)}
.btn-plan{width:100%;font-size:.92rem;padding:.7rem .8rem}
.pricing-note{color:var(--ink-soft);margin-top:1.2rem}

/* how + faq */
.steps{counter-reset:step;list-style:none;padding:0;display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.steps li{counter-increment:step;background:#fff;border-radius:var(--radius);padding:1.2rem 1.2rem 1.2rem 1.2rem;box-shadow:0 8px 20px rgba(69,48,79,.08)}
.steps li::before{content:counter(step);display:inline-grid;place-items:center;width:2rem;height:2rem;border-radius:50%;background:var(--pink);color:var(--pink-deep);font-weight:800;font-family:"Baloo 2",sans-serif;margin-bottom:.5rem}
.faq-item{background:#fff;border-radius:18px;padding:.2rem 1.1rem;margin:.6rem 0;box-shadow:0 5px 14px rgba(69,48,79,.08)}
.faq-item summary{cursor:pointer;font-weight:800;padding:.7rem 0;font-family:"Baloo 2",sans-serif}
.faq-item summary:hover{color:var(--pink-deep)}
.faq-item p{margin:.1rem 0 .9rem;color:var(--ink-soft)}

/* form */
.reserve{max-width:46rem}
#reserve-form{background:#fff;border:2px solid var(--ring);border-radius:var(--radius);padding:1.4rem;box-shadow:0 10px 26px rgba(214,72,124,.1)}
.field{margin:0 0 1rem}
.field label{display:block;font-weight:800;margin-bottom:.3rem}
.field input,.field select,.field textarea{width:100%;padding:.65rem .9rem;border-radius:14px;border:2px solid var(--ring);font:inherit;background:#FFFDFB;color:var(--ink)}
.field input:focus,.field select:focus,.field textarea:focus{outline:3px solid var(--pink-deep);outline-offset:1px}
#form-msg{font-weight:800;min-height:1.4em}
#form-msg.ok{color:#1c7a4f}
#form-msg.err{color:#b4232e}

/* footer */
footer{background:var(--ink);color:#F3E9F7;text-align:center;padding:2rem 6vw 2.4rem;margin-top:2.5rem}
footer p{max-width:46rem;margin:.45rem auto}
footer strong{font-family:"Baloo 2",sans-serif}

/* modal */
#mascot-modal{border:none;border-radius:var(--radius);padding:0;max-width:min(92vw,720px);width:100%;box-shadow:0 30px 80px rgba(0,0,0,.3)}
#mascot-modal::backdrop{background:rgba(69,48,79,.55);backdrop-filter:blur(3px)}
#mascot-modal[open]{display:grid;grid-template-columns:260px 1fr}
#modal-img{width:100%;height:100%;object-fit:cover;background:#fdf1f6}
.modal-body{padding:1.3rem 1.4rem;position:relative}
.modal-body h3{margin:0;font-size:1.5rem}
.modal-niche{display:inline-block;background:var(--peach);border-radius:999px;padding:.1rem .6rem;font-size:.82rem;font-weight:700;color:#8a5a2b;margin:.3rem 0}
.modal-pers{font-weight:800;color:var(--pink-deep);margin:.3rem 0}
.modal-video{width:100%;border-radius:14px;margin:.5rem 0}
.modal-close{position:absolute;top:.6rem;right:.6rem;z-index:2;background:#fff;border:2px solid var(--ring);border-radius:50%;width:2.3rem;height:2.3rem;font-size:1rem;cursor:pointer;font-weight:800;color:var(--ink)}
.modal-close:hover{background:var(--pink)}

@media (max-width:640px){
 #mascot-modal[open]{grid-template-columns:1fr;max-height:88vh;overflow:auto}
 #modal-img{max-height:40vh}
 .grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.8rem}
 section{padding:2rem 4vw}
}
@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none !important;transition:none !important}
 html{scroll-behavior:auto}
}