/* shero.css: the schools-first hero. The art (a real lesson screenshot with achievement
 * chips, Qubi and the accreditation seal) is laid out in v4.css (.hero-art). */
.shero { min-height: 100vh; display: flex; align-items: center; }
.shero-in { position: relative; z-index: 2; width: 100%; max-width: 1480px; margin: 0 auto; padding: 120px var(--gut) 70px; display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(28px, 4vw, 72px); align-items: center; }
.shero-title { margin: 0; font: 600 clamp(36px, 3.7vw, 60px)/1.1 var(--display); letter-spacing: -0.012em; }
.shero .hero-sub { max-width: 600px; }

@keyframes floatA { 50% { margin-top: -10px; } }
@keyframes floatB { 50% { margin-top: 10px; } }
@keyframes leap { 50% { margin-top: -16px; } }
.st-leap { position: absolute; z-index: 4; transform: rotate(-10deg); filter: drop-shadow(0 26px 30px rgba(0,0,0,.55)); animation: leap 5s ease-in-out infinite; transition: translate .6s var(--swift); }
.ach { position: absolute; z-index: 6; display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; border-radius: 16px; background: rgba(255,255,255,.95); color: var(--ink);
       font: 800 15px var(--body); white-space: nowrap; box-shadow: 0 24px 50px -18px rgba(0,0,0,.65); transition: translate .6s var(--swift); }
.ach b { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #0FBD8C; color: #fff; font: 900 12px var(--body); margin-left: 2px; }
.ach-ic { width: 34px; height: 34px; border-radius: 10px; padding: 7px; display: block; flex: none; }
.ach-ic svg { width: 100%; height: 100%; display: block; }
.seal { position: absolute; aspect-ratio: 1; z-index: 5; transition: translate .6s var(--swift); filter: drop-shadow(0 18px 30px rgba(0,0,0,.5)); }
.seal svg { width: 100%; height: 100%; animation: spin 22s linear infinite; overflow: visible; }
.seal-bg { fill: #FFB820; stroke: #fff; stroke-width: 3; }
.seal-txt { font: 900 10px var(--body); letter-spacing: 0; fill: #101828; }
.seal-mid { position: absolute; inset: 30%; border-radius: 50%; background: #101828; color: #FFB820; display: grid; place-items: center; font: 900 clamp(16px, 2vw, 26px) var(--body); box-shadow: inset 0 0 0 2px rgba(255,255,255,.2); }