/* about */
.about{display:flex;gap:70px;align-items:center;padding:60px 20px;max-width:var(--max);margin:0 auto}
.about>*{flex:1 1 0}
.about h2{letter-spacing:.1em;font:400 clamp(30px,4.4vw,48px)/1 Comicy,Helvetica,sans-serif;text-transform:uppercase;margin:0 0 16px;background:linear-gradient(115deg,#55ccff 0%,#22a2ff 50%,#1e6cff 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.about p{color:#000}
@media(max-width:767px){
 .about{flex-direction:column;gap:30px}
}

/* team badges: hanging Boop Pass cards. assets/js/badges.js swings them with the mouse */
.team{display:block;text-align:center;position:relative;z-index:3;padding:0 20px 30px;overflow-x:clip}
/* badges hang from the hero, story card sits beside them; the stats below need a scroll */
.team-top{display:flex;flex-direction:column;align-items:center;max-width:1100px;margin:0 auto}
.story{position:relative;max-width:720px;margin:80px auto 0;padding:38px 42px;background:#f5f5f7;border-radius:30px;box-shadow:0 2px 6px rgba(0,0,0,.05),0 18px 40px rgba(0,0,0,.1);text-align:left}
.story h2{font-size:clamp(26px,3.3vw,40px)}
.story p{margin:0;font-size:17.5px;line-height:1.5;color:#3a4458}
.badges{position:relative;z-index:2;list-style:none;margin:-70px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:32px 60px}
.badge-wrap{width:220px;padding-top:16px}
.badge{--c:var(--yellow);position:relative;transform-origin:50% 8px;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;will-change:transform}
.badge.dragging{cursor:grabbing}
.badge.cyan{--c:var(--cyan)}
/* idle sway for visitors without JS or with reduced motion */
.badge:not(.js){animation:swing 4.5s ease-in-out infinite}
@keyframes swing{0%,100%{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg)}}
@media(prefers-reduced-motion:reduce){.badge:not(.js){animation:none}}
@media(max-width:767px){.badge:not(.js){animation:none}}
.card{position:relative;overflow:hidden;background:#f5f5f7;border-radius:30px;box-shadow:0 2px 6px rgba(0,0,0,.05),0 18px 40px rgba(0,0,0,.14);padding:0 14px 18px;text-align:center}
.photo img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.card h3{margin:0;font-family:Inter,Helvetica,Arial,sans-serif;font-weight:800;font-size:22px;line-height:1.15;letter-spacing:-.01em;text-transform:uppercase;color:#101a2b}
.card .role{position:relative;z-index:2;display:table;margin:-22px auto 6px;padding:3px 14px;background:var(--cyan);border:3px solid #fff;border-radius:999px;box-shadow:0 3px 8px rgba(0,0,0,.18);font:700 14px/1.2 Inter,Helvetica,Arial,sans-serif;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;color:#101a2b}
.card .role.yellow{background:var(--yellow)}
.card .where{margin:0;font-size:13px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--dark)}
.card .bio{margin:10px 0 0;min-height:4.2em;font-size:15px;line-height:1.4;color:#3a4458}
.card .top{position:relative;display:flex;align-items:flex-end;justify-content:center;height:124px;margin:0 -14px;padding:0 14px 36px;background:var(--c)}
.pass-logo{width:auto;height:50px;margin-bottom:0;pointer-events:none}
.photo{position:relative;width:140px;height:160px;margin:-20px auto 12px;border:4px solid #fff;border-radius:24px;box-shadow:0 8px 20px rgba(0,0,0,.18);background:var(--c);overflow:hidden}
.barcode{display:block;width:150px;height:40px;margin:12px auto 0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 44' shape-rendering='crispEdges'%3E%3Crect x='0' y='0' width='3' height='44'/%3E%3Crect x='5' y='0' width='1' height='44'/%3E%3Crect x='8' y='0' width='2' height='44'/%3E%3Crect x='12' y='0' width='4' height='44'/%3E%3Crect x='18' y='0' width='1' height='44'/%3E%3Crect x='21' y='0' width='2' height='44'/%3E%3Crect x='25' y='0' width='1' height='44'/%3E%3Crect x='28' y='0' width='3' height='44'/%3E%3Crect x='33' y='0' width='1' height='44'/%3E%3Crect x='36' y='0' width='4' height='44'/%3E%3Crect x='42' y='0' width='2' height='44'/%3E%3Crect x='46' y='0' width='1' height='44'/%3E%3Crect x='49' y='0' width='3' height='44'/%3E%3Crect x='54' y='0' width='1' height='44'/%3E%3Crect x='57' y='0' width='2' height='44'/%3E%3Crect x='61' y='0' width='4' height='44'/%3E%3Crect x='67' y='0' width='1' height='44'/%3E%3Crect x='70' y='0' width='2' height='44'/%3E%3Crect x='74' y='0' width='3' height='44'/%3E%3Crect x='79' y='0' width='1' height='44'/%3E%3Crect x='82' y='0' width='2' height='44'/%3E%3Crect x='86' y='0' width='1' height='44'/%3E%3Crect x='89' y='0' width='4' height='44'/%3E%3Crect x='95' y='0' width='2' height='44'/%3E%3Crect x='99' y='0' width='1' height='44'/%3E%3Crect x='102' y='0' width='3' height='44'/%3E%3Crect x='107' y='0' width='1' height='44'/%3E%3Crect x='110' y='0' width='2' height='44'/%3E%3Crect x='114' y='0' width='4' height='44'/%3E%3Crect x='120' y='0' width='1' height='44'/%3E%3Crect x='123' y='0' width='2' height='44'/%3E%3Crect x='127' y='0' width='1' height='44'/%3E%3Crect x='130' y='0' width='3' height='44'/%3E%3Crect x='135' y='0' width='2' height='44'/%3E%3Crect x='139' y='0' width='1' height='44'/%3E%3Crect x='142' y='0' width='4' height='44'/%3E%3Crect x='148' y='0' width='1' height='44'/%3E%3Crect x='151' y='0' width='2' height='44'/%3E%3Crect x='155' y='0' width='1' height='44'/%3E%3Crect x='158' y='0' width='2' height='44'/%3E%3C/svg%3E") center/100% 100% no-repeat}

/* flip card: front is the badge, back has the QR code and socials */
.flip{position:relative;transform-style:preserve-3d;transition:transform .75s cubic-bezier(.45,.05,.25,1);cursor:pointer;outline-offset:6px;will-change:transform}
.badge{perspective:1000px}
.flip.flipped{transform:rotateY(180deg)}
.flip .card{backface-visibility:hidden;-webkit-backface-visibility:hidden}
/* each face is its own composited 3D layer (isolate + translateZ) so positioned children like the role pill are culled with it */
.flip .card{isolation:isolate}
.flip .front{transform:translateZ(1px)}
.flip .back{position:absolute;inset:0;transform:rotateY(180deg) translateZ(1px);display:flex;flex-direction:column;align-items:center}
.flip .back .top{align-self:stretch;flex:none}
.hint{display:block;margin-top:12px;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--dark);opacity:.7}
.back .hint{margin-top:auto;padding-bottom:2px}
.back .top .barcode{width:160px;height:56px;margin:0;padding:6px 8px;box-sizing:border-box;background-color:#fff;background-origin:content-box;background-repeat:no-repeat;background-size:100% 100%;border-radius:12px}
.back h3{font-size:26px}
.back .socials{margin-bottom:auto}
.back .sbtn{width:68px;height:68px}
.back .sbtn svg{width:36px;height:36px}
.back h3{margin:auto 0 0}
.back .socials{justify-content:center;gap:8px;margin-top:12px}
/* QR code + socials */
.qr{display:block;width:84px;margin:14px auto 0;line-height:0;background:#fff;border-radius:6px;overflow:hidden}
.qr-svg{display:block;width:100%;height:auto;shape-rendering:crispEdges}
.socials{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:5px}
.sbtn{display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.15);color:#0a66c2;line-height:0;text-decoration:none;transition:transform .15s}
a.sbtn:hover{transform:translateY(-2px) rotate(-6deg);background:var(--c)}
.sbtn svg{width:24px;height:24px;fill:currentColor}
.sbtn.ghost{border-style:dashed;border-color:rgba(0,0,0,.35);background:none;color:rgba(0,0,0,.35);font-weight:800;font-size:22px}

/* reach: clean metric cards + world map */
.reach{max-width:1000px;margin:130px auto 0;text-align:left}
.reach h2{margin:0;text-align:center}
.reach .lead{margin:10px 0 40px;text-align:center;color:#3a4458;font-size:17.5px}
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.metric{position:relative;padding:24px 22px 22px;background:#f5f5f7;border-radius:24px;box-shadow:0 2px 6px rgba(0,0,0,.05),0 12px 28px rgba(0,0,0,.08)}
.metric span{display:block;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#6b7385}
.metric b{display:block;margin-top:4px;font:800 56px/1.05 Inter,Helvetica,sans-serif;letter-spacing:-.02em;color:#101a2b}
.reach-map{position:relative;margin:32px 0 0;padding:20px 20px 14px;background:#f5f5f7;border-radius:30px;box-shadow:0 2px 6px rgba(0,0,0,.05),0 18px 40px rgba(0,0,0,.1)}
.reach-map svg{display:block;width:100%;height:auto}
.land{fill:#dcdce2;stroke:#f5f5f7;stroke-width:.6;transition:fill .15s}
.land.on{fill:#1e6cff;cursor:pointer}
.land.on:hover{fill:#20D9FF}
.land.home{fill:#ffc514}
.hq .dot{fill:#ffc514;stroke:#fff;stroke-width:2}
.hq .pulse{fill:none;stroke:#ffc514;stroke-width:2;opacity:.5;transform-box:fill-box;transform-origin:center;animation:ping 2.4s ease-out infinite}
@keyframes ping{from{transform:scale(1);opacity:.6}to{transform:scale(3.4);opacity:0}}
@media(prefers-reduced-motion:reduce){.hq .pulse{animation:none;opacity:0}}
.map-tip{position:absolute;z-index:3;padding:5px 10px;background:#101a2b;color:#fff;border-radius:8px;font-size:13px;font-weight:600;pointer-events:none;white-space:nowrap;transform:translate(-50%,-130%)}
.chips{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.chips li{padding:6px 14px;background:rgba(255,210,30,.35);border-radius:999px;font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#101a2b}
.chips li.home{background:#ffd21e}
@media(max-width:860px){.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}
.metric{min-width:0}
@media(max-width:420px){.metrics{gap:12px}.metric{padding:18px 16px 16px}.metric b{font-size:clamp(30px,10vw,44px)}.metric span{font-size:11px;letter-spacing:.05em}}

/* hero: same gradient arch as the index page */
.hero.arch .float-ico{width:var(--s,110px)}
.hero.page.still.arch .container{padding-bottom:clamp(110px,14vw,190px)}
@media(max-width:767px){.badges{margin-top:-10px}}
.has-hero main{background:#fff}
/* golden "Boop Games conquers the world": flat hero yellow, no outline or glint */
.reach h2{background:#ffcf1d;-webkit-background-clip:text;background-clip:text;color:transparent;font-size:clamp(34px,5vw,56px)}
.reach h2 small{display:block;margin-top:.15em;font-size:.5em;letter-spacing:.1em}
/* Our reach: fly-in, count-up and country light-up (assets/js/reach.js adds .anim, then .in / .lit as things scroll into view) */
.reach.anim .fly{opacity:0;transform:translateY(40px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0s)}
.reach.anim h2.fly{transform:translateY(-40px)}
.reach.anim .metric.fly{transform:translateY(90px) scale(.9)}
.reach.anim .reach-map.fly{transform:translateY(70px) scale(.96)}
.reach.anim .fly.in,.reach.anim .metric.fly.in{opacity:1;transform:none}
.reach.anim .land.on:not(.lit),.reach.anim .land.home:not(.lit){fill:#dcdce2}
.reach.anim .land.on,.reach.anim .land.home{transition:fill .5s ease;transform-box:fill-box;transform-origin:center}
.reach.anim .land.lit{animation:pop .7s cubic-bezier(.3,1.6,.5,1)}
@keyframes pop{0%{transform:scale(.6);fill:#fff}35%{transform:scale(1.12);fill:#20D9FF}100%{transform:scale(1)}}
.reach.anim .hq{opacity:0;transition:opacity .6s ease 3.4s}
.reach.anim .reach-map.lit-all .hq{opacity:1}
@media(prefers-reduced-motion:reduce){.reach.anim .fly{opacity:1;transform:none;transition:none}}
/* entrance: badges drop in from above one by one, the story card slides in after them */
.badge-wrap{animation:drop .9s cubic-bezier(.3,1.4,.5,1) both}
.badge-wrap:nth-child(1){animation-delay:.15s}.badge-wrap:nth-child(2){animation-delay:.35s}.badge-wrap:nth-child(3){animation-delay:.55s}
@keyframes drop{from{opacity:0;transform:translateY(-420px)}60%{opacity:1}to{opacity:1;transform:none}}
.story{animation:slide-in .8s cubic-bezier(.2,.8,.2,1) .7s both}
@keyframes slide-in{from{opacity:0;transform:translateX(60px)}to{opacity:1;transform:none}}
/* stat cards lift on hover (only once they have flown in) */
.reach.anim .metric.fly.in{transition:transform .25s ease,box-shadow .25s ease}
.reach.anim .metric.fly.in:hover{transform:translateY(-6px);box-shadow:0 2px 6px rgba(0,0,0,.05),0 20px 36px rgba(0,0,0,.14)}
@media(prefers-reduced-motion:reduce){.badge-wrap,.story{animation:none}}
/* coloured stats: gameplays in gold, countries reached in the blue gradient */
/* hard 20% black drop shadow on the stat numbers (filter, because text-shadow would paint over the gradient fill) */
.metric b{filter:drop-shadow(0 3px 0 rgba(0,0,0,.2))}