html{scroll-behavior:smooth}
.portfolio section[id]{scroll-margin-top:70px}
.hero{position:relative;overflow:hidden;text-align:center;padding:70px 16px 120px;background:linear-gradient(160deg,var(--secondary),var(--primary) 70%);color:#fff}
.hero-inner{position:relative;z-index:2}
.hero-emoji{font-size:clamp(64px,14vw,120px);display:inline-block;animation:bob 2.2s ease-in-out infinite}
.hero h1{font-size:clamp(34px,8vw,68px);margin:.1em 0;text-shadow:0 4px 0 rgba(0,0,0,.2);animation:pop .8s cubic-bezier(.3,1.6,.5,1) both}
.hero-tag{font-size:clamp(18px,3.5vw,28px);margin:0 0 24px;font-weight:700;text-shadow:0 2px 0 rgba(0,0,0,.2)}
.btn-big{font-size:clamp(20px,4vw,28px);padding:16px 34px;animation:wiggle 2.5s ease-in-out infinite}
.wave{position:absolute;left:0;bottom:-1px;width:100%;height:70px;z-index:1}
.floaters span{position:absolute;bottom:-60px;opacity:.85;animation:rise linear infinite;user-select:none}
.sec{padding:56px 0}
.sec[hidden]{display:none}
.sec.alt{background:#fff1c9}
.sec h2{font-size:clamp(28px,5vw,42px);margin:0 0 10px;text-align:center}
.lead{font-size:clamp(17px,2.4vw,21px);line-height:1.55;max-width:720px;margin:0 auto 26px;text-align:center}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.fact,.tip{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;text-align:center;transition:transform .2s}
.fact:hover,.tip:hover{transform:translateY(-6px) rotate(-1.5deg)}
.fact .e{font-size:42px;display:block}.fact b{display:block;color:var(--primary)}
.tip{text-align:left;display:flex;gap:12px;align-items:flex-start;font-size:18px}
.tip .n{flex:none;width:34px;height:34px;border-radius:50%;background:var(--accent);display:grid;place-items:center;font-weight:800}
.vids{grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
.vid{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.vid .frame{position:relative;aspect-ratio:16/9;background:#2b2d42}
.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vid .soon{position:absolute;inset:0;display:grid;place-content:center;text-align:center;color:#fff;background:repeating-linear-gradient(45deg,#3a86ff,#3a86ff 20px,#5a9cff 20px,#5a9cff 40px);font-size:22px;font-weight:800}
.vid .soon span{font-size:54px;animation:bob 2s ease-in-out infinite}
.vid .cap{padding:12px 16px}.vid h3{margin:0 0 4px}.vid p{margin:0}
.chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:22px}
.chip{background:var(--secondary);color:#fff;padding:8px 16px;border-radius:99px;font-weight:700;box-shadow:0 4px 0 rgba(0,0,0,.15)}
.chip.y{background:var(--accent);color:var(--ink)}
.ball-scene{height:90px;position:relative;margin-bottom:16px;background:linear-gradient(#0000 70%,#06d6a0 70%);border-radius:var(--radius);overflow:hidden}
.ball{position:absolute;left:0;bottom:12px;font-size:48px;animation:roll 4s ease-in-out infinite alternate}
.pool{height:90px;position:relative;overflow:hidden;border-radius:var(--radius);background:linear-gradient(#7fc8ff,#3a86ff);margin-bottom:20px}
.swimmer{position:absolute;top:22px;font-size:46px;animation:swim 6s linear infinite}
.ripples{position:absolute;inset:auto 0 0 0;height:30px;background:radial-gradient(circle at 10px 0,#fff6 9px,#0000 10px) 0 0/40px 20px}
.gallery{grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))}
.ph{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;margin:0}
.ph img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.ph p{margin:0;padding:10px;text-align:center;font-weight:700}
.ph .big{font-size:64px;padding:18px 10px 0}
.links{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.foot{text-align:center;padding:30px 16px;background:var(--ink);color:#fff}
.foot a{color:var(--accent)}
.reveal>.wrap{opacity:0;transform:translateY(40px);transition:opacity .7s,transform .7s cubic-bezier(.3,1.4,.5,1)}
.reveal.in>.wrap{opacity:1;transform:none}
@keyframes bob{50%{transform:translateY(-14px) rotate(6deg)}}
@keyframes pop{from{transform:scale(.3);opacity:0}}
@keyframes wiggle{0%,90%,100%{transform:rotate(0)}93%{transform:rotate(-4deg)}96%{transform:rotate(4deg)}}
@keyframes rise{to{transform:translateY(-130vh) rotate(360deg)}}
@keyframes roll{to{left:calc(100% - 56px);transform:rotate(720deg)}}
@keyframes swim{from{left:-70px}to{left:100%}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal>.wrap{opacity:1;transform:none}}