/* v4: lighter hero on mobile, syrup panela, dolphin details, compact form + footer */
.hero-logo{width:220px;margin-bottom:1.6rem}
.story h2 .hand{color:var(--pink-ink)!important}
.pill a{color:inherit;text-decoration:none}
.band .lead a{color:var(--ink);font-weight:600}
.story,.merch{overflow:hidden}
.story{padding-bottom:clamp(8rem,15vw,11rem)}
.peek{position:absolute;pointer-events:none;z-index:0}
.peek-head{left:0;bottom:-8px;width:clamp(120px,16vw,230px)}
.peek-tail{right:0;top:clamp(2rem,6vw,4rem);width:clamp(110px,14vw,200px)}
.story .wrap,.merch .wrap{position:relative;z-index:1}
.cloud .ring:nth-child(3){background:none;box-shadow:0 30px 80px -20px rgba(160,92,26,.55)}
.syrup{position:absolute;inset:24%;border-radius:50%;overflow:hidden}
.syrup svg{width:100%;height:100%;display:block;animation:spin 40s linear infinite}
.cloud .word{color:#fff;text-shadow:0 2px 14px rgba(70,35,5,.55);z-index:1}
.socials{display:flex;gap:.6rem;margin-top:1rem}
.socials a{width:42px;height:42px;border-radius:50%;border:1px solid var(--line-d);display:grid;place-items:center;color:var(--white);transition:background .2s,color .2s}
.socials a:hover{background:var(--white);color:var(--ink)}
.socials svg{width:18px;height:18px;fill:currentColor}
footer{padding:3.2rem 0 1.4rem}
.foot{gap:2rem}
.foot img{width:150px;margin-bottom:.8rem}
.legal{margin-top:2.2rem;padding-top:1.2rem}
@media (max-width:600px){
section{padding:3.6rem 0}
.hero{min-height:auto;padding:104px 0 2.6rem}
.hero-logo{display:none}
.hero h1{font-size:2.35rem}
.hero .lead{font-size:1rem;margin-bottom:1.6rem}
.hero .ctas .btn{padding:.85rem 1.25rem;font-size:.82rem}
.pills{flex-direction:row;flex-wrap:wrap;gap:.5rem}
.pill{font-size:.78rem;padding:.5rem .9rem}
.nav .brand img{height:42px}
.panel{padding:1.2rem;border-radius:20px}
.fgrid{gap:.75rem}
.field{gap:.3rem}
.field label{font-size:.68rem;letter-spacing:.1em}
.field input,.field select,.field textarea{padding:.7rem .85rem;font-size:.95rem;border-radius:12px}
.field textarea{min-height:84px}
.form-foot{margin-top:1rem}
.form-foot .btn{width:100%;justify-content:center}
.perks{margin:1.4rem 0;gap:.7rem}
footer{padding:2.4rem 0 1.2rem}
.foot{grid-template-columns:1fr 1fr;gap:1.4rem}
.foot>div:first-child{grid-column:1/-1}
.foot img{width:120px}
footer ul{gap:.4rem;font-size:.88rem}
.legal{margin-top:1.6rem;font-size:.72rem}
.peek-head{width:110px;bottom:-6px}
.peek-tail{width:90px}
}