/* HERO: gradient, flying plane, clouds, waves */
.hero{position:relative;padding:110px 6% 150px;text-align:center;color:#fff;background:linear-gradient(135deg,#1a237e,#4527a0 55%,#ff5722 130%);overflow:hidden}
.hero h1{font-size:clamp(2.2rem,6vw,4.4rem);font-weight:800;line-height:1.1;margin-bottom:18px;position:relative}
.hero p{max-width:620px;margin:0 auto 32px;opacity:.9;font-size:1.08rem;position:relative}
.hero .btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;position:relative}
.hero .btn.ghost{color:#fff!important;border-color:#fff}
.blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.35;animation:float 9s ease-in-out infinite}
.b1{width:300px;height:300px;background:#ff5722;top:-80px;left:-60px}.b2{width:260px;height:260px;background:#00bcd4;bottom:-60px;right:-40px;animation-delay:-4s}
.sky{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.trail{fill:none;stroke:#fff;stroke-opacity:.55;stroke-width:2.5;stroke-dasharray:4 14;stroke-linecap:round;animation:dash2 2s linear infinite}
.cl{fill:#fff;opacity:.22;animation:cdrift 40s linear infinite}
@keyframes dash2{to{stroke-dashoffset:-36}}
@keyframes cdrift{from{transform:translateX(-400px)}to{transform:translateX(1600px)}}
.waves{position:absolute;bottom:-1px;left:0;width:200%;height:90px;animation:drift 12s linear infinite}
@keyframes float{50%{transform:translateY(30px) scale(1.1)}}
@keyframes drift{to{transform:translateX(-50%)}}
@media(max-width:800px){.hero{padding:80px 6% 130px}}