@keyframes floatUp { from { transform: translateY(6px); opacity: .0 } to { transform: translateY(0); opacity: 1 } }
.reveal { opacity: 0; transform: translateY(6px); }
.reveal--visible { animation: floatUp .5s ease-out forwards; }
.header-accent { height: 3px; background: linear-gradient(90deg, #0284c7, #38bdf8, #0284c7); background-size: 200% 100%; animation: slideGradient 6s ease infinite; }
@keyframes slideGradient { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
.hero-wave { position: absolute; inset: auto 0 -1px 0; height: 80px; pointer-events: none;
  background: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1440 100\"><path fill=\"%230289d1\" fill-opacity=\"0.15\" d=\"M0,64L60,58.7C120,53,240,43,360,42.7C480,43,600,53,720,69.3C840,85,960,107,1080,106.7C1200,107,1320,85,1380,74.7L1440,64L1440,160L1380,160C1320,160,1200,160,1080,160C960,160,840,160,720,160C600,160,480,160,360,160C240,160,120,160,60,160L0,160Z\"></path></svg>') center/cover no-repeat; }
button, .btn { transition: transform .06s ease; } button:active, .btn:active { transform: translateY(1px); }
figure > picture, figure > img { display:block; width:100%; height:100%; object-fit:cover; }