/* FIRE 2026 banner on the main Freadom site. Design from "FIRE 2026 - Website Banner.html". */
@keyframes fbLive{0%{box-shadow:0 0 0 0 rgba(46,173,97,.55)}70%{box-shadow:0 0 0 8px rgba(46,173,97,0)}100%{box-shadow:0 0 0 0 rgba(46,173,97,0)}}
@keyframes fbTick{0%{transform:translateY(-60%);opacity:0}100%{transform:none;opacity:1}}
@keyframes fbShine{0%{transform:translateX(-120%) skewX(-20deg)}60%,100%{transform:translateX(320%) skewX(-20deg)}}

/* Overlay on top of the hero section (it sits inside #hero): no space of its own, so the hero keeps its original size and position. */
.fb-wrap{position:absolute;top:12px;left:0;right:0;z-index:5;padding:0 24px;box-sizing:border-box;display:flex;justify-content:center;font-family:Rubik,sans-serif}
.fb{position:relative;display:block;width:100%;max-width:1440px;text-decoration:none;color:inherit;border-radius:26px;overflow:hidden;background:linear-gradient(105deg,#E9D6FB 0%,#F6ECFA 45%,#FFEBDA 100%);box-shadow:0 20px 44px rgba(73,26,108,.14);transition:box-shadow .25s}
.fb:hover{box-shadow:0 26px 54px rgba(73,26,108,.2)}
.fb-blob{position:absolute;border-radius:50%}
.fb-blob-1{left:-140px;top:-160px;width:460px;height:460px;background:radial-gradient(closest-side,#D9BDF7,#D9BDF700)}
.fb-blob-2{right:-120px;bottom:-200px;width:520px;height:520px;background:radial-gradient(closest-side,#FFD3B0,#FFD3B000)}
.fb-inner{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 28px;padding:clamp(16px,1.8vw,24px) clamp(24px,3vw,44px)}
.fb-left{flex:1 1 340px;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.fb-acr{display:inline-flex;align-items:baseline;flex-wrap:wrap;gap:6px;background:#fff;padding:5px 12px;border-radius:999px;box-shadow:0 5px 12px rgba(73,26,108,.08);font:500 11px Rubik,sans-serif;color:#524E59}
.fb-acr b{font:400 13px 'Lilita One',sans-serif}
.fb-title{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding-bottom:2px}
.fb-fire{display:flex;gap:5px}
.fb-fire span{font:400 clamp(32px,3.2vw,42px)/.9 'Lilita One',sans-serif;color:#9134D8;text-shadow:1px 1px 0 #7A2BC0,2px 2px 0 #6A24AA,3px 3px 0 #5A1E96,4px 4px 0 #4E1A80,0 10px 14px rgba(73,26,108,.24)}
.fb-champ{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.fb-champ-t{font:800 clamp(11px,1.1vw,14px) Rubik,sans-serif;letter-spacing:.22em;color:#491A6C}
.fb-year{font:400 clamp(14px,1.3vw,17px) 'Lilita One',sans-serif;color:#491A6C;background:#F2BD1D;padding:0 10px;border-radius:9px;transform:rotate(-4deg);box-shadow:0 3px 0 #B58400}
.fb-tags{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.fb-tag-line{font:600 clamp(13px,1.2vw,15px)/1.3 Rubik,sans-serif;color:#231F20}
.fb-tag-line i{font:400 clamp(15px,1.4vw,17px) 'Lilita One',sans-serif;color:#7927C2;font-style:normal}
.fb-pill{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1.5px solid #E6D2F8;border-radius:999px;padding:3px 10px;font:600 11px Rubik,sans-serif;color:#491A6C}
.fb-pill span{width:7px;height:7px;border-radius:50%}
.fb-right{flex:0 1 auto;display:flex;align-items:center;gap:18px}
.fb-trophy{position:relative;flex:0 0 230px;height:112px}
.fb-trophy svg{position:absolute;left:50%;top:50%;width:120px;height:140px;margin:-70px 0 0 -60px;transform:rotate(8deg);opacity:.42;overflow:visible}
.fb-trophy-t{position:absolute;left:50%;top:54%;transform:translate(-50%,-50%) rotate(-5deg);display:flex;flex-direction:column;align-items:center;gap:8px;white-space:nowrap}
.fb-become{font:700 11px/1.2 Inter,sans-serif;letter-spacing:.22em;color:#8A6500;background:#FFF3C4;padding:2px 9px;border-radius:999px}
.fb-champion{font:400 30px/1.1 'Lilita One',sans-serif;letter-spacing:.02em;color:#491A6C;text-shadow:0 2px 0 #fff,0 0 10px #fff}
.fb-card{flex:0 1 auto;display:flex;flex-direction:column;align-items:stretch;background:#fff;border-radius:22px;box-shadow:0 12px 26px rgba(73,26,108,.12);overflow:hidden}
.fb-counter{display:flex;flex-direction:column;align-items:center;gap:5px;padding:8px 14px}
.fb-counter[hidden]{display:none}
.fb-live{display:inline-flex;align-items:center;gap:7px;font:700 9px Inter,sans-serif;letter-spacing:.14em;color:#1E7A43}
.fb-dot{width:7px;height:7px;border-radius:50%;background:#2EAD61;animation:fbLive 1.8s ease-out infinite}
.fb-digits{display:flex;align-items:center;gap:3px}
.fb-d{position:relative;display:grid;place-items:center;width:clamp(20px,1.8vw,24px);height:clamp(28px,2.5vw,33px);border-radius:8px;overflow:hidden}
.fb-d::before{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;background:rgba(0,0,0,.14)}
.fb-d span{position:relative;font:400 clamp(17px,1.7vw,22px)/1 'Lilita One',sans-serif;color:#fff}
.fb-d.tick span{animation:fbTick .35s ease-out both}
.fb-sep{font:400 22px/1 'Lilita One',sans-serif;color:#491A6C;align-self:flex-end}
.fb-cta{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:10px;background:#9134D8;color:#fff;font:700 14px Rubik,sans-serif;padding:7px 16px;white-space:nowrap}
.fb-shine{position:absolute;top:0;bottom:0;left:0;width:40%;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.35),rgba(255,255,255,0));animation:fbShine 3.2s ease-in-out infinite}
.fb-arrow{position:relative;width:24px;height:24px;border-radius:50%;background:#fff;color:#9134D8;display:grid;place-items:center}

/* Desktop: keep the hero content (AI Literacy pill, heading) below the banner, even on short windows where the centred content rides up. */
#hero{padding-top:140px}

/* Narrow screens: the banner wraps taller, and the hero has no top padding there, so make room so it doesn't cover the hero text. */
@media (max-width:1000px){ #hero{padding-top:260px} }
@media (max-width:640px){
  #hero{padding-top:330px}
  .fb-wrap{padding:0 12px}
  .fb-right{width:100%;justify-content:center}
  .fb-trophy{display:none}
  .fb-card{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .fb-shine,.fb-dot,.fb-d.tick span{animation:none}
}

/* Wide screens: trophy sits in the middle of the banner (between the title and the counter card). */
@media (min-width:1200px){
  .fb-trophy{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);flex:none;width:250px}
}