/* FLO-03 派对气球 — joyful balloon & kids-party decor */
.tpl-flo-03{--gut:clamp(16px,5vw,80px);--f3-round:"Fredoka","Noto Sans SC",system-ui,sans-serif;--f3-sans:"Outfit","Noto Sans SC",system-ui,sans-serif;font-family:var(--f3-sans);font-size:16.5px;line-height:1.7;--dock-bg:var(--fg);--dock-fg:var(--bg);overflow-x:clip}
.tpl-flo-03 h1,.tpl-flo-03 h2,.tpl-flo-03 h3{font-family:var(--f3-round);font-weight:600;letter-spacing:-.005em}
.f3-main{max-width:1440px;margin:0 auto;overflow-x:clip}
.f3-main>section{padding:clamp(64px,8vw,120px) var(--gut)}
.f3-main h2{font-size:clamp(32px,4.4vw,60px);line-height:1.15}
.f3-c0{--pop:var(--pop-a)}
.f3-c1{--pop:var(--pop-b)}
.f3-c2{--pop:var(--pop-c)}
.f3-bicon{width:16px;height:22px;flex:none}
.f3-tag{display:inline-flex;align-items:center;gap:8px;margin:0 0 16px;padding:6px 16px 6px 12px;border-radius:999px;background:var(--soft);font:600 13px/1.3 var(--f3-round);letter-spacing:.06em;color:var(--fg)}
.f3-tag .f3-bicon{color:var(--accent)}
.f3-center{text-align:center;max-width:780px;margin:0 auto clamp(36px,5vw,60px)}
.f3-intro{color:var(--muted);font-size:17px;max-width:32em;margin:14px auto 0}
.f3-intro p:last-child{margin:0}

/* header: pill bar */
.f3-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 20px;max-width:1440px;margin:0 auto;padding:16px var(--gut)}
.f3-brand{font:700 clamp(24px,2.4vw,30px)/1 var(--f3-round);text-decoration:none;min-height:44px;display:flex;align-items:center;color:var(--fg)}
.f3-nav{display:flex;flex-wrap:wrap;gap:2px;padding:4px;border-radius:999px;background:var(--soft)}
.f3-nav a{min-height:44px;display:inline-flex;align-items:center;padding:0 16px;border-radius:999px;text-decoration:none;font:500 15px/1 var(--f3-round);transition:background .2s,color .2s}
.f3-nav a:hover{background:var(--bg)}
.f3-nav a:last-child{background:var(--accent);color:var(--on-accent)}

/* buttons */
.f3-btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:14px 32px;border-radius:999px;background:var(--accent);color:var(--on-accent);text-decoration:none;font:600 17px/1.2 var(--f3-round);letter-spacing:.01em;text-align:center;max-width:100%;box-shadow:0 6px 0 color-mix(in srgb,var(--accent) 55%,var(--fg));transition:transform .15s,box-shadow .15s}
.f3-btn:hover{transform:translateY(-2px);box-shadow:0 8px 0 color-mix(in srgb,var(--accent) 55%,var(--fg))}
.f3-btn:active{transform:translateY(4px);box-shadow:0 2px 0 color-mix(in srgb,var(--accent) 55%,var(--fg))}
.f3-link{display:inline-flex;align-items:center;min-height:48px;padding:0 6px;font:600 17px/1 var(--f3-round);text-decoration:none;color:var(--fg);border-bottom:3px solid var(--pop-a)}
.f3-link:hover{color:var(--accent)}

/* hero */
.f3-hero{display:grid;grid-template-columns:minmax(0,11fr) minmax(0,10fr);gap:clamp(32px,5vw,80px);align-items:center;padding-top:clamp(24px,4vw,56px)!important}
.f3-hero--text{grid-template-columns:minmax(0,1fr) minmax(0,240px)}
.f3-hero-copy{position:relative;z-index:2}
.f3-sticker{display:inline-block;margin:0 0 22px;padding:8px 18px;border-radius:14px;background:var(--pop-a);color:var(--fg);font:600 13.5px/1.35 var(--f3-round);letter-spacing:.08em;transform:rotate(-3deg);box-shadow:0 4px 0 color-mix(in srgb,var(--fg) 18%,transparent)}
.f3-hero h1{font-size:clamp(44px,6.6vw,104px);line-height:1.06;font-weight:600}
.f3-squiggle{display:block;width:min(260px,60%);height:18px;margin:14px 0 26px;color:var(--accent)}
.f3-sub{font-size:clamp(17px,1.4vw,20px);color:var(--muted);max-width:30em;margin-bottom:30px}
.f3-sub p:last-child{margin:0}
.f3-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 26px}

.f3-hero-art{position:relative;isolation:isolate;padding:clamp(20px,3vw,40px) clamp(20px,3vw,40px) clamp(64px,7vw,96px)}
.f3-balloon{position:relative;z-index:2;margin:0;border-radius:50% 50% 50% 50%/44% 44% 56% 56%;overflow:hidden;box-shadow:0 0 0 clamp(8px,1vw,12px) var(--accent),0 30px 60px -30px color-mix(in srgb,var(--fg) 60%,transparent)}
.f3-balloon img{width:100%;aspect-ratio:4/5;object-fit:cover}
.f3-knot{position:absolute;z-index:1;left:50%;bottom:calc(clamp(64px,7vw,96px) - 22px);width:34px;height:30px;margin-left:-17px;background:var(--accent);clip-path:polygon(50% 0,100% 100%,0 100%)}
.f3-string{position:absolute;left:50%;bottom:0;width:40px;height:clamp(44px,5.4vw,76px);margin-left:-2px;border-left:2.5px solid var(--fg);border-radius:0 0 0 40px/0 0 0 100%;opacity:.55}
.f3-fly{position:absolute;z-index:3;width:clamp(48px,5vw,76px);aspect-ratio:5/6;border-radius:50% 50% 50% 50%/44% 44% 56% 56%;background:radial-gradient(circle at 32% 28%,color-mix(in srgb,var(--bg) 70%,transparent) 0 8%,transparent 22%),var(--pop,var(--pop-a))}
.f3-fly::after{content:"";position:absolute;left:50%;top:100%;width:1.5px;height:120%;background:currentColor;opacity:.4;color:var(--fg)}
.f3-fly1{--pop:var(--pop-a);top:2%;left:-2%}
.f3-fly2{--pop:var(--pop-b);top:26%;right:-3%;width:clamp(40px,4vw,60px)}
.f3-fly3{--pop:var(--pop-c);bottom:22%;left:2%;width:clamp(36px,3.4vw,52px)}
@media (prefers-reduced-motion:no-preference){
  .f3-fly{animation:f3-float 5s ease-in-out infinite alternate}
  .f3-fly2{animation-duration:6.5s;animation-delay:-2s}
  .f3-fly3{animation-duration:4.2s;animation-delay:-1s}
  .f3-card:hover{animation:f3-wiggle .5s ease}
}
@keyframes f3-float{from{transform:translateY(0) rotate(-4deg)}to{transform:translateY(-16px) rotate(4deg)}}
@keyframes f3-wiggle{25%{transform:rotate(-1.5deg)}75%{transform:rotate(1.5deg)}}
.f3-hero-art--empty{min-height:240px}
.f3-hero-art::before{content:"";position:absolute;inset:-6% -14% 0 -18%;z-index:-1;pointer-events:none;background-image:radial-gradient(circle,var(--pop-a) 0 5px,transparent 6px),radial-gradient(circle,var(--pop-b) 0 4px,transparent 5px),radial-gradient(circle,var(--accent) 0 4px,transparent 5px),radial-gradient(circle,var(--pop-c) 0 5px,transparent 6px);background-size:317px 241px,263px 337px,389px 283px,211px 401px;background-position:40px 30px,170px 120px,90px 210px,250px 60px;-webkit-mask-image:radial-gradient(closest-side,var(--fg) 55%,transparent);mask-image:radial-gradient(closest-side,var(--fg) 55%,transparent)}

/* tilted marquee ribbon */
.f3-ribbon-wrap{overflow:hidden;padding:28px 0}
.f3-ribbon{margin:0 -40px;transform:rotate(-2.2deg);background:var(--accent);color:var(--on-accent);padding:16px 0;box-shadow:0 8px 0 color-mix(in srgb,var(--fg) 12%,transparent)}
.f3-ribbon>span{gap:1.1em;padding-right:1.1em;align-items:center}
.f3-ribbon b{font:600 clamp(20px,2.2vw,30px)/1.2 var(--f3-round)}
.f3-ribbon i{display:inline-block;width:14px;height:14px;border-radius:50%;background:var(--pop-a);box-shadow:0 0 0 2px var(--on-accent)}
.f3-ribbon i:nth-of-type(3n+2){background:var(--pop-b)}
.f3-ribbon i:nth-of-type(3n){background:var(--pop-c)}

/* about */
.f3-about{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(36px,6vw,96px);align-items:center}
.f3-about--text{grid-template-columns:minmax(0,820px);justify-content:center}
.f3-round{position:relative;margin:0;padding:clamp(12px,1.4vw,18px);border-radius:50%;border:3px dashed var(--accent);aspect-ratio:1}
.f3-round img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.f3-about h2{margin-bottom:clamp(22px,3vw,36px)}
.f3-about-body{font-size:18px;color:var(--muted)}
.f3-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:14px}
.f3-step{display:flex;flex-direction:column;gap:12px;padding:22px 20px;border-radius:26px;background:color-mix(in srgb,var(--pop) 24%,var(--bg))}
.f3-step-n{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--bg);border:3px solid var(--pop);font:700 22px/1 var(--f3-round)}
.f3-step p{margin:0;font:500 17px/1.45 var(--f3-round)}

/* services: candy cards */
.f3-services{background:var(--soft);border-radius:clamp(36px,5vw,72px)}
@media (min-width:761px){.f3-main>.f3-services{margin:0 clamp(8px,1.5vw,24px)}}
.f3-cards{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(16px,1.8vw,24px)}
.f3-card{position:relative;flex:1 1 min(100%,300px);max-width:440px;display:flex;flex-direction:column;padding:clamp(56px,5vw,68px) clamp(22px,2.4vw,32px) clamp(24px,2.4vw,32px);margin-top:28px;border-radius:32px;background:color-mix(in srgb,var(--pop) 26%,var(--bg));border:3px solid color-mix(in srgb,var(--pop) 60%,var(--bg))}
.f3-num{position:absolute;top:-28px;left:24px;display:grid;place-items:center;width:62px;height:62px;border-radius:50%;background:var(--pop);color:var(--fg);font:700 28px/1 var(--f3-round);transform:rotate(-8deg);box-shadow:0 5px 0 color-mix(in srgb,var(--fg) 20%,transparent)}
.f3-card:nth-child(even) .f3-num{transform:rotate(7deg)}
.f3-card h3{font-size:clamp(22px,2vw,27px);line-height:1.25;margin-bottom:10px}
.f3-desc{color:var(--fg);opacity:.86;margin-bottom:auto}
.f3-desc p{margin:0 0 .6em}
.f3-price{margin:10px 0 0;font:600 20px/1.3 var(--f3-round)}
.f3-ask{align-self:flex-start;margin-top:18px;min-height:46px;display:inline-flex;align-items:center;padding:0 20px;border-radius:999px;background:var(--bg);color:var(--fg);text-decoration:none;font:600 15px/1 var(--f3-round);border:2px solid var(--fg);transition:background .2s,color .2s}
.f3-ask:hover{background:var(--fg);color:var(--bg)}

/* gallery: polaroids */
.f3-polaroids{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:clamp(18px,2.4vw,36px);max-width:1240px;margin:0 auto}
.f3-polaroids--one{max-width:520px}
.f3-pol{margin:0;padding:12px 12px 6px;background:var(--bg);border-radius:20px;box-shadow:0 18px 40px -22px color-mix(in srgb,var(--fg) 55%,transparent),0 0 0 1px var(--line);transform:rotate(-2deg);transition:transform .3s}
.f3-pol:nth-child(even){transform:rotate(2.2deg) translateY(18px)}
.f3-pol:nth-child(3n){transform:rotate(-1deg)}
.f3-pol:hover{transform:rotate(0) scale(1.03)}
.f3-pol-img{border-radius:12px;overflow:hidden;border-bottom:6px solid var(--pop)}
.f3-pol-img img{width:100%;aspect-ratio:1;object-fit:cover}
.f3-pol figcaption{padding:12px 4px 8px;text-align:center;font:500 16px/1.4 var(--f3-round)}

/* testimonials */
.f3-quote-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:20px;max-width:1160px;margin:0 auto}
.f3-quote-list figure{padding:28px;border-radius:28px;background:var(--soft)}
.f3-quote-list blockquote{font:500 19px/1.55 var(--f3-round)}
.f3-quote-list figcaption{margin-top:12px;font-weight:600;color:var(--muted)}

/* faq: speech bubbles */
.f3-faq-list{max-width:860px;margin:0 auto;display:grid;gap:14px}
.f3-faq-list details{position:relative;background:var(--soft);border-radius:28px;padding:0 clamp(20px,3vw,32px);border:3px solid transparent;transition:border-color .2s}
.f3-faq-list details[open]{border-color:var(--accent)}
.f3-faq-list summary{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:20px 0;min-height:44px;font:600 clamp(18px,1.7vw,21px)/1.4 var(--f3-round)}
.f3-faq-list summary::after{flex:none;margin:0;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--accent);color:var(--on-accent);font:700 22px/1 var(--f3-round)}
.f3-faq-list details p{margin:0 0 22px;color:var(--muted);font-size:17px}

/* contact: scalloped invitation */
.f3-invite{position:relative;max-width:1180px;margin:24px auto 0;text-align:center;padding:clamp(64px,8vw,104px) clamp(20px,6vw,96px) clamp(48px,6vw,80px);background:var(--accent);color:var(--on-accent);border-radius:0 0 clamp(36px,5vw,64px) clamp(36px,5vw,64px);--line:color-mix(in srgb,var(--on-accent) 26%,transparent)}
.f3-invite::before{content:"";position:absolute;left:0;right:0;top:-22px;height:24px;background:radial-gradient(circle at 50% 100%,var(--accent) 0 21px,transparent 22px) center bottom/44px 44px repeat-x}
.f3-tag--inv{background:color-mix(in srgb,var(--on-accent) 14%,transparent);color:inherit}
.f3-tag--inv .f3-bicon{color:inherit}
.f3-invite h2{max-width:14em;margin:0 auto 18px;font-size:clamp(34px,5vw,68px)}
.f3-contact-intro{max-width:32em;margin:0 auto 30px;font-size:18px;opacity:.92}
.f3-btn--inv{background:var(--on-accent);color:var(--accent);box-shadow:0 6px 0 color-mix(in srgb,var(--on-accent) 45%,var(--accent))}
.f3-btn--inv:hover{box-shadow:0 8px 0 color-mix(in srgb,var(--on-accent) 45%,var(--accent))}
.f3-contact-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:12px;margin-top:clamp(32px,4vw,48px);text-align:center}
.f3-contact-list li{padding:16px;border-radius:22px;background:color-mix(in srgb,var(--on-accent) 10%,transparent)}
.f3-contact-list .bc-k{margin-bottom:2px}
.f3-contact-list a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;font-weight:600}
.f3-social{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:18px}
.f3-social a{min-height:44px;display:inline-flex;align-items:center;padding:0 18px;border-radius:999px;border:2px solid currentColor;text-decoration:none;font:600 15px/1 var(--f3-round)}
.f3-fly4{--pop:var(--pop-b);top:-56px;left:6%}
.f3-fly5{--pop:var(--pop-c);top:-40px;right:8%;width:clamp(40px,4vw,58px)}
.f3-invite .f3-fly{z-index:2}

.f3-foot{display:flex;flex-direction:column;align-items:center;gap:4px;padding:40px var(--gut) 44px;text-align:center}
.f3-foot-brand{display:flex;align-items:center;gap:10px;margin:0;font:700 clamp(26px,3vw,36px)/1.2 var(--f3-round)}
.f3-foot-brand .f3-bicon{width:24px;height:32px;color:var(--accent)}
.f3-foot-meta{margin:0;font-size:13px;color:var(--muted)}

@media (max-width:860px){
  .f3-hero{grid-template-columns:minmax(0,1fr)}
  .f3-hero-art{max-width:460px;width:100%;margin:0 auto}
  .f3-hero--text .f3-hero-art--empty{display:none}
}
@media (max-width:760px){
  .f3-head{justify-content:center}
  .f3-nav a{padding:0 11px;font-size:14px}
  .f3-hero{text-align:left}
  .f3-hero h1{font-size:clamp(40px,11.6vw,60px)}
  .f3-actions>.f3-btn{flex:1 1 100%}
  .f3-about{grid-template-columns:minmax(0,1fr)}
  .f3-round{width:min(76%,340px);margin:0 auto}
  .f3-services{border-radius:36px}
  .f3-polaroids{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 14px}
  .f3-pol{padding:8px 8px 4px;border-radius:16px}
  .f3-pol:nth-child(even){transform:rotate(2deg) translateY(14px)}
  .f3-pol figcaption{font-size:14px;padding:8px 2px 6px}
  .f3-contact{padding-left:12px!important;padding-right:12px!important}
}
.tpl-flo-03 h1,.tpl-flo-03 h2{word-break:keep-all}