html{scroll-behavior:smooth}
.portfolio section[id]{scroll-margin-top:70px}
/* hero */
.hero{position:relative;overflow:hidden;text-align:center;padding:84px 16px 130px;color:#fff;
  background:radial-gradient(600px 360px at 50% 20%,rgba(59,130,246,.38),transparent 70%),radial-gradient(520px 320px at 85% 80%,rgba(56,189,248,.18),transparent 70%),linear-gradient(180deg,var(--navy-800),var(--black))}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(59,130,246,.07) 1px,transparent 1px) 0 0/48px 48px,linear-gradient(90deg,rgba(59,130,246,.07) 1px,transparent 1px) 0 0/48px 48px;-webkit-mask-image:radial-gradient(ellipse at center,#000 30%,transparent 75%);mask-image:radial-gradient(ellipse at center,#000 30%,transparent 75%)}
.hero-inner{position:relative;z-index:2}
.hero-emoji{font-size:clamp(64px,14vw,116px);display:inline-block;filter:drop-shadow(0 0 28px rgba(56,189,248,.55));animation:bob 3s ease-in-out infinite}
.hero h1{font-size:clamp(2.2rem,8vw,4.4rem);margin:.1em 0;background:linear-gradient(90deg,#fff 20%,var(--cyan) 70%,var(--blue));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:pop .8s cubic-bezier(.3,1.6,.5,1) both}
.hero-tag{font-size:clamp(1.1rem,3.5vw,1.7rem);margin:0 0 28px;font-weight:800;color:var(--muted)}
.btn-big{font-size:clamp(1.2rem,4vw,1.6rem);padding:16px 36px;background:linear-gradient(180deg,#2563eb,#1d4ed8);box-shadow:var(--shadow),0 0 36px rgba(59,130,246,.55);animation:wiggle 3s ease-in-out infinite}
.wave{position:absolute;left:0;bottom:-1px;width:100%;height:70px;z-index:1}
.wave path{fill:var(--black)}
.floaters span{position:absolute;bottom:-60px;opacity:.35;animation:rise linear infinite;user-select:none}
/* sections */
.sec{padding:60px 0}
.sec[hidden]{display:none}
.sec.alt{background:linear-gradient(180deg,rgba(15,26,51,.75),rgba(10,16,32,.75));border-block:1px solid var(--line)}
.sec h2{font-size:clamp(1.7rem,5vw,2.6rem);margin:0 0 10px;text-align:center;color:#fff}
.sec h2::after{content:"";display:block;width:64px;height:4px;margin:10px auto 0;border-radius:4px;background:linear-gradient(90deg,var(--blue),var(--cyan))}
.lead{font-size:clamp(1.05rem,2.4vw,1.25rem);line-height:1.6;max-width:720px;margin:0 auto 28px;text-align:center;color:var(--muted)}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.fact,.tip,.vid,.ph{background:linear-gradient(180deg,var(--navy-800),var(--navy-900));border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-lg);transition:transform .2s,border-color .2s,box-shadow .2s}
.fact,.tip{padding:18px;text-align:center}
.fact:hover,.tip:hover,.vid:hover,.ph:hover{transform:translateY(-5px);border-color:var(--blue);box-shadow:var(--glow)}
.fact .e{font-size:42px;display:block}.fact b{display:block;color:var(--cyan)}
.tip{text-align:left;display:flex;gap:12px;align-items:flex-start;font-size:1.1rem}
.tip .n{flex:none;width:34px;height:34px;border-radius:50%;background:var(--gold);color:#1c1400;display:grid;place-items:center;font-weight:900}
.vids{grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
.vid{overflow:hidden}
.vid .frame{position:relative;aspect-ratio:16/9;background:var(--black)}
.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,var(--navy-800),var(--navy-800) 20px,var(--navy-700) 20px,var(--navy-700) 40px);font-size:1.3rem;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;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:22px}
.chip{background:var(--navy-700);color:#fff;border:1px solid var(--blue);padding:8px 16px;border-radius:99px;font-weight:800}
.chip.y{background:rgba(251,191,36,.15);color:var(--gold);border-color:rgba(251,191,36,.5)}
.ball-scene{height:90px;position:relative;margin-bottom:16px;background:linear-gradient(#0000 72%,#0b3a2e 72%);border-radius:var(--radius);border:1px solid var(--line);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);border:1px solid var(--line);background:linear-gradient(#0c2a5c,#14224a);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,rgba(56,189,248,.35) 9px,#0000 10px) 0 0/40px 20px}
.gallery{grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))}
.ph{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(--black);color:var(--muted);border-top:1px solid var(--line)}
.foot a{color:var(--gold)}
.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 wiggle{0%,90%,100%{transform:rotate(0)}93%{transform:rotate(-3deg)}96%{transform:rotate(3deg)}}
@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}}