/* System font stack keeps the page fast and avoids a render-blocking font request. */

:root {
  --night: #171326;
  --night-2: #211a35;
  --blue: #49a1c8;
  --blue-bright: #62b8dc;
  --orange: #ff982e;
  --cream: #fff8e8;
  --muted: #c9c3d5;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100vh; color: var(--cream);
  background: radial-gradient(ellipse at 72% 28%, #302447 0%, transparent 38%),
              radial-gradient(ellipse at 12% 80%, #202747 0%, transparent 36%),
              var(--night);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; overflow-x: hidden;
}
.space { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.stars { position: absolute; inset: 0; opacity: .42; background-image:
  radial-gradient(1px 1px at 12% 18%, #fff 99%, transparent),
  radial-gradient(1px 1px at 76% 16%, #fff 99%, transparent),
  radial-gradient(1.5px 1.5px at 61% 72%, #fff 99%, transparent),
  radial-gradient(1px 1px at 31% 82%, #fff 99%, transparent),
  radial-gradient(1px 1px at 88% 58%, #fff 99%, transparent),
  radial-gradient(1px 1px at 46% 39%, #fff 99%, transparent);
  background-size: 370px 310px;
}
.stars-two { transform: translate(90px, 65px); opacity: .22; }
.spark { position: absolute; color: var(--orange); animation: twinkle 3.8s ease-in-out infinite; }
.spark-a { top: 17%; left: 8%; font-size: 27px; color: var(--blue-bright); }
.spark-b { top: 24%; right: 11%; font-size: 35px; animation-delay: .8s; }
.spark-c { bottom: 18%; left: 16%; font-size: 30px; animation-delay: 1.4s; }
.spark-d { bottom: 27%; right: 7%; font-size: 25px; color: var(--blue-bright); animation-delay: .5s; }
.planet { position: absolute; border: 1px solid rgba(98,184,220,.15); border-radius: 50%; }
.planet-one { width: 340px; height: 340px; right: -190px; top: 9%; box-shadow: 0 0 80px rgba(73,161,200,.08); }
.planet-two { width: 230px; height: 230px; left: -155px; bottom: 7%; }
.page-shell { position: relative; z-index: 1; width: min(1160px, calc(100% - 56px)); margin: auto; }
.topbar { height: 96px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.09); }
.brand { display: flex; align-items: center; gap: 11px; color: var(--cream); text-decoration: none; font-family: 'Trebuchet MS', Inter, ui-sans-serif, system-ui, sans-serif; font-size: 17px; font-weight: 700; letter-spacing: .08em; }
.brand b, .footer-brand b { color: var(--orange); }
.brand-mark { width: 43px; height: 43px; object-fit: contain; }
.top-tag { color: var(--muted); font-size: 12px; letter-spacing: .04em; }
.status-dot { display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: #7ed9a5; box-shadow: 0 0 12px #7ed9a5; }
.hero { min-height: 585px; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 24px; padding: 52px 0 58px; }
.hero-copy { max-width: 590px; }
.eyebrow, .section-kicker { color: var(--orange); font-size: 11px; font-weight: 800; letter-spacing: .18em; }
.eyebrow { display: flex; align-items: center; gap: 10px; }
.eyebrow-separator { color:var(--orange); margin:0 5px; }
h1 { margin: 22px 0 20px; font-family: 'Trebuchet MS', Inter, ui-sans-serif, system-ui, sans-serif; font-size: clamp(42px, 5.4vw, 69px); line-height: 1.04; letter-spacing: -.055em; font-weight: 700; }
h1 em { color: var(--blue-bright); font-style: normal; }
.intro { max-width: 510px; color: var(--muted); font-size: 16px; line-height: 1.8; }
.launch-note { display: flex; align-items: center; gap: 13px; margin: 28px 0; }
.launch-indicator { display:block; flex:0 0 9px; width:9px; height:9px; margin:0 14px 0 3px; border-radius:50%; background:var(--orange); box-shadow:0 0 0 5px rgba(255,152,46,.12); }
.launch-note strong, .launch-note small { display: block; }
.launch-note strong { font-size: 13px; }
.launch-note small { margin-top: 4px; color: var(--muted); font-size: 12px; }
.actions { display: flex; align-items: center; gap: 25px; }
.primary-button { display: inline-flex; align-items: center; gap: 18px; padding: 15px 20px; border-radius: 10px; color: #171326; background: var(--orange); font-weight: 800; font-size: 13px; text-decoration: none; transition: transform .2s, box-shadow .2s; box-shadow: 0 8px 28px rgba(255,152,46,.17); }
.primary-button:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(255,152,46,.28); }
.primary-button span { font-size: 18px; }
.text-link { color: var(--cream); font-size: 13px; text-decoration: none; }
.text-link:hover { color: var(--blue-bright); }
.mascot-stage { position: relative; min-height: 460px; display: grid; place-items: center; isolation: isolate; }
.glow { position: absolute; width: 300px; height: 300px; border-radius: 50%; background: rgba(73,161,200,.18); filter: blur(65px); z-index: -2; }
.mascot { width: min(78%, 390px); max-height: 430px; object-fit: contain; z-index: 2; filter: drop-shadow(0 22px 38px rgba(0,0,0,.28)); animation: bob 4.5s ease-in-out infinite; }
.orbit { position: absolute; width: 430px; height: 150px; border: 3px solid var(--orange); border-radius: 50%; transform: rotate(-17deg); z-index: 3; pointer-events: none; }
.orbit-back { width: 390px; height: 130px; border-color: rgba(73,161,200,.65); transform: rotate(28deg); z-index: 1; }
.orbit-front { border-left-color: transparent; border-bottom-color: transparent; }
.floating-star { position: absolute; z-index: 4; color: var(--orange); animation: twinkle 3s ease-in-out infinite; }
.star-1 { top: 15%; left: 13%; font-size: 28px; color: var(--blue-bright); }
.star-2 { top: 20%; right: 12%; font-size: 34px; animation-delay: .8s; }
.star-3 { bottom: 18%; left: 17%; font-size: 24px; animation-delay: 1.3s; }
.star-4 { bottom: 13%; right: 17%; font-size: 29px; color: var(--blue-bright); animation-delay: .4s; }
.floating-dot { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); }
.dot-1 { top: 22%; right: 4%; }.dot-2 { bottom: 25%; left: 7%; background: #f6a0a9; }.dot-3 { top: 9%; left: 30%; background: var(--orange); }
.bottom-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; padding: 34px 36px; border: 1px solid rgba(255,255,255,.1); border-radius: 18px; background: rgba(255,255,255,.045); backdrop-filter: blur(10px); }
.bottom-copy h2 { margin: 10px 0 8px; font-family: 'Trebuchet MS', Inter, ui-sans-serif, system-ui, sans-serif; font-size: 24px; letter-spacing: -.03em; }
.bottom-copy p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.socials { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.socials a { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px 13px; color: var(--cream); text-decoration: none; font-size: 12px; font-weight: 700; border: 1px solid rgba(255,255,255,.1); border-radius: 13px; background: linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.018)); box-shadow: 0 5px 0 rgba(0,0,0,.24), 0 12px 24px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.12); transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.socials a:hover { border-color: rgba(98,184,220,.55); transform: translateY(-4px); box-shadow: 0 8px 0 rgba(0,0,0,.2), 0 18px 28px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.16); }
.socials a:active { transform: translateY(1px); box-shadow: 0 2px 0 rgba(0,0,0,.25), inset 0 2px 5px rgba(0,0,0,.18); }
.social-icon { display: grid; place-items: center; flex: 0 0 38px; width: 38px; height: 38px; border-radius: 11px; padding: 5px; background: linear-gradient(145deg, rgba(255,255,255,.23), rgba(255,255,255,.035)); box-shadow: 0 4px 0 rgba(0,0,0,.28), inset 0 1px 1px rgba(255,255,255,.35), inset 0 -2px 4px rgba(0,0,0,.16); }
.social-icon img { display: block; width: 28px; height: 28px; filter: drop-shadow(0 2px 2px rgba(0,0,0,.25)); }
.instagram .social-icon { background: linear-gradient(145deg, #ffcf78, #df4d8d 58%, #7948cb); }
.facebook .social-icon { background: linear-gradient(145deg, #70c5ff, #1764d8); }
.tiktok .social-icon { background: linear-gradient(145deg, #36e5df, #29213b 55%, #ff4e72); }
.linkedin .social-icon { background: linear-gradient(145deg, #54c9f5, #0866a8); }
.arrow { margin-left: auto; color: var(--muted); font-size: 15px; }
.footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 28px 2px 32px; color: #928ba4; font-size: 11px; }
.footer-brand { color: var(--cream); font-family: 'Trebuchet MS', Inter, ui-sans-serif, system-ui, sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .1em; }
.footer p { margin: 0; }
@keyframes bob { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-13px) rotate(1deg); } }
@keyframes twinkle { 0%,100% { opacity: .45; transform: scale(.85) rotate(0deg); } 50% { opacity: 1; transform: scale(1.15) rotate(12deg); } }
@media (max-width: 780px) {
  .page-shell { width: min(100% - 36px, 560px); }
  .topbar { height: 76px; }.top-tag { max-width: 150px; text-align: right; line-height: 1.5; font-size: 10px; }
  .hero { grid-template-columns: 1fr; gap: 0; padding: 56px 0 38px; }
  .hero-copy { text-align: center; margin: auto; }
  .eyebrow { justify-content: center; font-size: 9px; }
  h1 { font-size: clamp(42px, 11vw, 60px); }
  .intro { margin-left: auto; margin-right: auto; font-size: 14px; }
  .launch-note { justify-content: center; text-align: left; }
  .actions { justify-content: center; }
  .mascot-stage { min-height: 340px; margin-top: 15px; }
  .mascot { width: min(70%, 300px); max-height: 330px; }
  .orbit { width: min(95%, 360px); height: 120px; }
  .orbit-back { width: min(88%, 330px); height: 105px; }
  .bottom-panel { grid-template-columns: 1fr; gap: 22px; padding: 25px 20px; text-align: center; }
  .bottom-copy h2 { font-size: 22px; }
  .socials { text-align: left; }
  .footer { flex-direction: column; gap: 8px; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}

/* Accessibility and small-screen polish */
a:focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; }
img { max-width: 100%; }
@media (max-width: 420px) {
  .socials { grid-template-columns: 1fr 1fr; gap: 8px; }
  .socials a { gap: 8px; padding: 10px 8px; font-size: 11px; }
  .social-icon { flex-basis: 34px; width: 34px; height: 34px; }
  .social-icon img { width: 25px; height: 25px; }
}


/* Version 3 refinements: restrained copy, clean separators and familiar social app marks. */
.brand { white-space: nowrap; }
.brand-name { display: inline-block; line-height: 1; letter-spacing: .075em; }
.top-tag { font-size: 10px; letter-spacing: .12em; font-weight: 700; }
.eyebrow { gap: 0; }
.launch-note { gap: 0; }
.launch-indicator { display: block; flex: 0 0 8px; width: 8px; height: 8px; margin: 0 16px 0 3px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 5px rgba(255,152,46,.11); }
.socials a { background: rgba(255,255,255,.025); box-shadow: none; border-color: rgba(255,255,255,.12); }
.socials a:hover { background: rgba(255,255,255,.07); box-shadow: 0 8px 20px rgba(0,0,0,.16); }
.social-icon { padding: 0; width: 34px; height: 34px; flex-basis: 34px; border-radius: 9px; background: transparent !important; box-shadow: none; }
.social-icon img { width: 32px; height: 32px; filter: none; }
.instagram .social-icon, .facebook .social-icon, .tiktok .social-icon, .linkedin .social-icon { background: transparent; }
@media (max-width: 780px) {
  .top-tag { max-width: 175px; }
  .brand-name { font-size: 14px; }
}
@media (max-width: 420px) {
  .social-icon { width: 31px; height: 31px; flex-basis: 31px; }
  .social-icon img { width: 29px; height: 29px; }
}


/* Version 4 — refined hero calls to action */
.actions { gap: 16px; flex-wrap: wrap; }
.primary-button {
  gap: 18px;
  min-height: 54px;
  padding: 8px 9px 8px 21px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  background: linear-gradient(135deg, #ffb14d 0%, #ff922e 100%);
  box-shadow: 0 8px 24px rgba(255,145,46,.18), inset 0 1px 0 rgba(255,255,255,.35);
  font-size: 13px;
  letter-spacing: .01em;
}
.primary-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(255,145,46,.28), inset 0 1px 0 rgba(255,255,255,.4);
}
.button-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--cream);
  background: #211a35;
  box-shadow: 0 3px 8px rgba(27,18,43,.22), inset 0 1px 0 rgba(255,255,255,.16);
  transition: transform .25s ease, background .25s ease;
}
.button-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.primary-button:hover .button-icon { transform: rotate(45deg); background: #302447; }
.secondary-button {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-height: 54px;
  padding: 7px 15px 7px 9px;
  color: var(--cream);
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 999px;
  background: rgba(255,255,255,.035);
  transition: background .22s ease, border-color .22s ease, transform .22s ease;
}
.secondary-button:hover {
  transform: translateY(-2px);
  border-color: rgba(98,184,220,.48);
  background: rgba(73,161,200,.09);
}
.secondary-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(98,184,220,.13);
  border: 1px solid rgba(98,184,220,.2);
}
.secondary-mark span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--blue-bright);
}
.secondary-mark span:nth-child(2) { width: 5px; height: 5px; background: var(--orange); }
.secondary-copy { display: flex; flex-direction: column; gap: 2px; text-align: left; }
.secondary-copy strong { font-size: 11px; font-weight: 700; }
.secondary-copy small { color: var(--muted); font-size: 9px; }
@media (max-width: 780px) {
  .actions { gap: 11px; }
  .primary-button, .secondary-button { min-height: 51px; }
}
@media (max-width: 420px) {
  .actions { flex-direction: column; align-items: stretch; }
  .primary-button, .secondary-button { justify-content: center; }
}


/* Version 5 — clearer, more confident calls to action; no generic arrow glyphs. */
.actions { gap: 13px; flex-wrap: wrap; }
.primary-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 11px;
  min-height: 54px; padding: 8px 22px 8px 9px; border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px; color: #211a35; background: linear-gradient(135deg,#ffb14d 0%,#ff922e 100%);
  box-shadow: 0 7px 22px rgba(255,145,46,.16),inset 0 1px 0 rgba(255,255,255,.4);
  font-size: 13px; font-weight: 800; letter-spacing: .005em;
  transition: transform .22s ease,box-shadow .22s ease,filter .22s ease;
}
.primary-button:hover { transform: translateY(-2px); filter: saturate(1.06); box-shadow: 0 11px 27px rgba(255,145,46,.25),inset 0 1px 0 rgba(255,255,255,.42); }
.primary-button .button-icon { display:grid; place-items:center; width:36px; height:36px; flex:0 0 36px; border-radius:50%; background:rgba(255,255,255,.94); box-shadow:0 2px 7px rgba(66,32,8,.12); }
.primary-button .button-icon img { display:block; width:23px; height:23px; filter:none; }
.secondary-button {
  display:inline-flex; align-items:center; justify-content:space-between; gap:20px; min-height:54px;
  padding:8px 13px 8px 17px; color:var(--cream); text-decoration:none;
  border:1px solid rgba(255,255,255,.14); border-radius:13px; background:rgba(255,255,255,.035);
  transition:background .22s ease,border-color .22s ease,transform .22s ease;
}
.secondary-button:hover { transform:translateY(-2px); border-color:rgba(98,184,220,.5); background:rgba(73,161,200,.09); }
.secondary-copy { display:flex; flex-direction:column; gap:3px; text-align:left; }
.secondary-copy strong { color:var(--cream); font-size:11px; font-weight:700; }
.secondary-copy small { color:var(--muted); font-size:9px; }
.secondary-mark { display:flex; align-items:center; justify-content:center; gap:3px; width:31px; height:31px; flex:0 0 31px; border:1px solid rgba(98,184,220,.25); border-radius:9px; background:rgba(98,184,220,.1); }
.secondary-mark span { width:4px; height:4px; border-radius:50%; background:var(--blue-bright); }
.secondary-mark span:nth-child(2) { width:5px; height:5px; background:var(--orange); }
@media (max-width:780px) { .actions { justify-content:center; gap:10px; } }
@media (max-width:420px) {
  .actions { flex-direction:column; align-items:stretch; }
  .primary-button,.secondary-button { width:100%; justify-content:center; }
  .secondary-button { justify-content:space-between; }
}


/* Version 6 — playful motion, pointer response and scroll storytelling. */
.scroll-progress { position: fixed; z-index: 20; inset: 0 auto auto 0; width: 100%; height: 3px; pointer-events: none; }
.scroll-progress span { display:block; width:100%; height:100%; transform:scaleX(0); transform-origin:left; background:linear-gradient(90deg,var(--blue-bright),var(--orange)); box-shadow:0 0 12px rgba(98,184,220,.55); }
.cursor-aura { position:fixed; z-index:0; width:390px; height:390px; left:0; top:0; border-radius:50%; pointer-events:none; opacity:0; background:radial-gradient(circle,rgba(73,161,200,.13),rgba(73,161,200,.045) 38%,transparent 70%); transform:translate(-50%,-50%); transition:opacity .35s ease; }
@media (hover:hover) and (pointer:fine) { .cursor-aura { opacity:1; } }
.hero-copy > *, .mascot-stage, .bottom-copy, .social-card, .footer { will-change:transform; }
.hero-copy .eyebrow { animation:rise-in .7s .05s both; }
.hero-copy h1 { animation:rise-in .8s .14s both; }
.hero-copy .intro { animation:rise-in .8s .24s both; }
.hero-copy .launch-note { animation:rise-in .8s .32s both; }
.hero-copy .actions { animation:rise-in .8s .4s both; }
.mascot-stage { --tilt-x:0deg; --tilt-y:0deg; }
.mascot { transform:perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)); transition:filter .35s ease; }
.mascot-stage:hover .mascot { filter:drop-shadow(0 28px 45px rgba(73,161,200,.24)); }
.orbit { transition:transform .25s ease; }
.floating-star { animation:star-drift 5s ease-in-out infinite; }
.floating-star.star-2 { animation-delay:-1.1s; }
.floating-star.star-3 { animation-delay:-2.3s; }
.floating-star.star-4 { animation-delay:-3.2s; }
.bottom-panel { position:relative; overflow:hidden; }
.bottom-panel::before { content:""; position:absolute; width:280px; height:280px; right:-110px; top:-160px; border-radius:50%; background:radial-gradient(circle,rgba(98,184,220,.13),transparent 68%); pointer-events:none; }
.bottom-copy h2 { max-width:440px; }
.social-card { position:relative; overflow:hidden; transform-style:preserve-3d; }
.social-card::after { content:""; position:absolute; inset:-1px; opacity:0; background:linear-gradient(115deg,transparent 20%,rgba(255,255,255,.10) 45%,transparent 70%); transform:translateX(-110%); transition:transform .65s ease,opacity .25s ease; pointer-events:none; }
.social-card:hover::after { opacity:1; transform:translateX(110%); }
.social-card:hover .social-icon { transform:scale(1.12) rotate(-5deg); }
.social-icon { transition:transform .25s ease; }
.reveal { opacity:0; transform:translateY(24px); transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.is-visible { opacity:1; transform:translateY(0); }
@keyframes rise-in { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } }
@keyframes star-drift { 0%,100% { translate:0 0; rotate:0deg; } 50% { translate:0 -11px; rotate:18deg; } }
@media (hover:hover) and (pointer:fine) {
 .primary-button:hover,.secondary-button:hover { transform:translateY(-4px) scale(1.025); }
 .socials a:hover { transform:translateY(-5px) scale(1.015); }
}
@media (max-width:780px) {
 .cursor-aura { display:none; }
 .reveal { transform:translateY(14px); }
}
@media (prefers-reduced-motion:reduce) {
 .cursor-aura,.scroll-progress { display:none; }
 .reveal { opacity:1; transform:none; transition:none; }
 .hero-copy > * { animation:none !important; }
 .mascot { transform:none !important; }
}


/* Version 7 — calmer motion, balanced calls to action and a tiny playable game. */
.cursor-aura,.scroll-progress { display:none !important; }
.reveal { opacity:0; transform:translateY(16px); transition:opacity .55s ease,transform .55s ease; }
.reveal.is-visible { opacity:1; transform:none; }
.hero-copy .eyebrow,.hero-copy h1,.hero-copy .intro,.hero-copy .launch-note,.hero-copy .actions { animation:none; }
.mascot { transform:none !important; animation:bob 5s ease-in-out infinite; }
.floating-star { animation:twinkle 4.5s ease-in-out infinite; }
.actions { display:flex; flex-direction:row; align-items:center; gap:12px; flex-wrap:nowrap; }
.primary-button,.secondary-button { min-height:54px; border-radius:999px; white-space:nowrap; }
.primary-button { padding:7px 19px 7px 8px; gap:10px; }
.primary-button .button-icon { width:36px; height:36px; }
.secondary-button { justify-content:flex-start; gap:10px; padding:7px 18px 7px 9px; color:#092a3a; background:linear-gradient(135deg,#91e4e5,#55b9d4); border:1px solid rgba(190,250,255,.5); box-shadow:0 7px 22px rgba(73,161,200,.18),inset 0 1px 0 rgba(255,255,255,.5); }
.secondary-button:hover { background:linear-gradient(135deg,#a8f0ed,#68c9df); border-color:#b6f5f0; transform:translateY(-2px); }
.secondary-copy strong { color:#092a3a; font-size:12px; }
.secondary-copy small { color:rgba(9,42,58,.76); font-size:9px; }
.secondary-mark { display:grid; place-items:center; width:36px; height:36px; flex:0 0 36px; border:1px solid rgba(255,255,255,.55); border-radius:50%; background:rgba(255,255,255,.55); }
.secondary-mark svg { width:20px; height:20px; fill:none; stroke:#087b98; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.mini-game { display:grid; grid-template-columns:.8fr 1.2fr; align-items:center; gap:34px; margin:6px 0 34px; padding:28px 32px; border:1px solid rgba(98,184,220,.2); border-radius:20px; background:linear-gradient(120deg,rgba(42,67,91,.55),rgba(255,255,255,.035)); }
.game-intro h2 { margin:10px 0 8px; font-family:'Trebuchet MS',Inter, sans-serif; font-size:clamp(25px,3vw,34px); letter-spacing:-.04em; }
.game-intro p { margin:0; color:var(--muted); font-size:13px; line-height:1.7; }
.game-card { min-width:0; padding:14px; border:1px solid rgba(255,255,255,.11); border-radius:16px; background:rgba(10,13,32,.48); }
.game-hud { display:flex; justify-content:space-between; color:#e8e5f0; font-size:12px; padding:0 3px 10px; }
.game-hud b { color:#ffd36b; }
.game-arena { position:relative; height:166px; overflow:hidden; border-radius:12px; border:1px solid rgba(98,184,220,.17); background:radial-gradient(circle at 50% 50%,rgba(73,161,200,.18),transparent 58%),linear-gradient(135deg,#1c2944,#211a35); }
.game-arena::before,.game-arena::after { content:""; position:absolute; border:1px solid rgba(98,184,220,.12); border-radius:50%; width:190px; height:190px; left:50%; top:50%; transform:translate(-50%,-50%); }
.game-arena::after { width:270px; height:270px; }
.game-start-state { position:absolute; inset:0; display:grid; place-content:center; text-align:center; color:#d2d9e9; font-size:12px; line-height:1.8; z-index:1; pointer-events:none; }
.game-start-state strong { color:#fff; font-size:15px; }
.energy-star { position:absolute; z-index:2; width:48px; height:48px; display:grid; place-items:center; border:1px solid rgba(255,236,157,.85); border-radius:50%; color:#6a3c00; font-size:27px; background:radial-gradient(circle at 35% 30%,#fff8c7,#ffc94e 65%,#ed8c26); box-shadow:0 0 0 7px rgba(255,197,74,.12),0 0 28px rgba(255,196,64,.55); cursor:pointer; animation:star-pop .35s ease-out,star-pulse 1.2s ease-in-out infinite alternate; }
.energy-star:hover { filter:brightness(1.12); }
.energy-star:focus-visible,.game-start:focus-visible { outline:3px solid #fff; outline-offset:3px; }
.game-controls { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:11px 2px 0; }
.game-controls p { margin:0; color:var(--muted); font-size:11px; }
.game-start { min-height:38px; padding:0 17px; border:0; border-radius:999px; color:#1d1930; background:var(--orange); font-size:12px; font-weight:800; cursor:pointer; transition:transform .2s,filter .2s; }
.game-start:hover { transform:translateY(-2px); filter:brightness(1.08); }
@keyframes star-pop { from { transform:scale(.4); opacity:0; } to { transform:scale(1); opacity:1; } }
@keyframes star-pulse { from { box-shadow:0 0 0 5px rgba(255,197,74,.1),0 0 18px rgba(255,196,64,.35); } to { box-shadow:0 0 0 10px rgba(255,197,74,.13),0 0 32px rgba(255,196,64,.65); } }
@media(max-width:900px) { .actions { flex-wrap:wrap; } .mini-game { grid-template-columns:1fr; gap:18px; } }
@media(max-width:780px) { .actions { justify-content:center; } .mini-game { margin-top:0; padding:23px 18px; text-align:center; } .game-controls { text-align:left; } }
@media(max-width:480px) { .actions { flex-direction:column; align-items:stretch; width:min(100%,330px); margin-inline:auto; } .primary-button,.secondary-button { width:100%; justify-content:center; } .secondary-copy { text-align:left; } .game-controls { align-items:stretch; flex-direction:column; } .game-start { width:100%; } }
@media(prefers-reduced-motion:reduce) { .reveal { opacity:1; transform:none; transition:none; } .mascot,.floating-star,.energy-star { animation:none; } }

/* Version 8 — bring the mascot back to life and turn the mini-game into a branded space mission. */
.mascot-stage { perspective:1000px; }
.mascot { transform:perspective(900px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)); transform-origin:50% 60%; transition:transform .28s ease-out,filter .35s ease; animation:bob 4.5s ease-in-out infinite; }
.mascot-stage:hover .mascot { filter:drop-shadow(0 28px 45px rgba(73,161,200,.3)); }
@media (hover:hover) and (pointer:fine) {
  .mascot-stage { cursor:default; }
}
.mini-game { position:relative; }
.mission-badges { display:flex; flex-wrap:wrap; gap:8px; margin-top:19px; }
.mission-badges span { padding:8px 11px; border:1px solid rgba(98,184,220,.2); border-radius:999px; color:#d8eaf3; background:rgba(73,161,200,.09); font-size:10px; font-weight:700; letter-spacing:.03em; }
.game-hud { align-items:center; font-size:10px; letter-spacing:.1em; font-weight:800; color:#c9d8e8; }
.hud-score b { margin-left:8px; color:#ffb04b; font-size:16px; letter-spacing:0; }
.hud-total { color:#8494ad; }
.hud-time { min-width:48px; padding:6px 10px; text-align:center; border:1px solid rgba(255,152,46,.28); border-radius:999px; color:#ffc16d; background:rgba(255,152,46,.09); font-weight:800; font-size:12px; letter-spacing:0; }
.power-track { height:5px; margin:0 3px 11px; overflow:hidden; border-radius:99px; background:rgba(255,255,255,.09); }
.power-track span { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,#49a1c8,#6be0db,#ffad49); box-shadow:0 0 12px rgba(98,184,220,.5); transition:width .35s ease; }
.game-arena { height:220px; isolation:isolate; background:radial-gradient(ellipse at 75% 45%,rgba(73,161,200,.24),transparent 34%),radial-gradient(circle at 20% 80%,rgba(255,152,46,.11),transparent 30%),linear-gradient(135deg,#101a35 0%,#1d2447 55%,#241b3b 100%); }
.game-arena::before,.game-arena::after { z-index:-1; border-color:rgba(113,188,220,.11); }
.arena-label { position:absolute; z-index:2; top:12px; left:14px; color:rgba(208,228,241,.55); font-size:8px; letter-spacing:.16em; font-weight:800; }
.arena-planet { position:absolute; width:84px; height:84px; right:12%; bottom:-34px; border-radius:50%; background:radial-gradient(circle at 32% 28%,#ffbf76,#e87943 48%,#804b76 100%); box-shadow:0 0 32px rgba(255,152,46,.18); opacity:.78; }
.arena-planet::after { content:""; position:absolute; width:130px; height:30px; left:-23px; top:27px; border:5px solid rgba(113,188,220,.55); border-left-color:rgba(113,188,220,.2); border-right-color:rgba(113,188,220,.2); border-radius:50%; transform:rotate(-18deg); }
.arena-asteroid { position:absolute; display:block; width:13px; height:13px; border-radius:38% 62% 55% 45%; background:linear-gradient(145deg,#9a9ab0,#4e5876); box-shadow:inset -3px -3px 0 rgba(15,20,43,.35),0 0 12px rgba(180,190,220,.16); }
.asteroid-one { right:29%; top:22%; animation:asteroid-float 6s ease-in-out infinite; }
.asteroid-two { right:9%; top:29%; width:8px; height:8px; animation:asteroid-float 7s -2s ease-in-out infinite; }
.game-robot { position:absolute; z-index:1; left:8%; bottom:12px; width:105px; height:130px; object-fit:contain; filter:drop-shadow(0 9px 16px rgba(0,0,0,.3)); animation:robot-hover 3.6s ease-in-out infinite; }
.robot-beam { position:absolute; left:20%; bottom:7px; width:70px; height:16px; border-radius:50%; background:rgba(73,161,200,.25); filter:blur(10px); }
.game-start-state { z-index:4; padding:0 14px; color:#9eb4ce; font-size:9px; font-weight:800; letter-spacing:.17em; text-shadow:0 2px 12px #11172b; }
.game-start-state strong { display:block; margin-top:8px; color:#fff8e8; font-size:15px; letter-spacing:0; }
.game-start-state small { display:block; margin-top:5px; color:#c3cce0; font-size:10px; font-weight:500; letter-spacing:0; }
.energy-star { position:absolute; z-index:5; display:grid; place-items:center; width:46px; height:46px; padding:0; border:2px solid rgba(255,255,255,.8); border-radius:50%; color:#fff8e8; background:radial-gradient(circle at 35% 30%,#fff4bd 0%,#ffb84d 38%,#f27b37 100%); box-shadow:0 0 0 6px rgba(255,173,73,.12),0 0 25px rgba(255,174,73,.65),inset 0 2px 5px rgba(255,255,255,.55); cursor:pointer; animation:core-pulse 1.25s ease-in-out infinite; transition:left .18s ease,top .18s ease,transform .15s ease; }
.energy-star span { font-size:23px; line-height:1; text-shadow:0 2px 5px rgba(113,54,13,.3); }
.energy-star:hover { transform:scale(1.14); }
.energy-star:active { transform:scale(.88); }
.mission-flash { position:absolute; z-index:6; left:50%; top:45%; opacity:0; color:#ffcb70; font-size:15px; font-weight:900; letter-spacing:.08em; transform:translate(-50%,-50%) scale(.7); pointer-events:none; text-shadow:0 2px 12px rgba(255,152,46,.5); }
.mission-flash.show { animation:flash-score .55s ease-out; }
.game-controls p { line-height:1.5; }
.game-start { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-width:145px; color:#20182f; background:linear-gradient(135deg,#ffbd61,#ff922e); box-shadow:0 6px 18px rgba(255,145,46,.2),inset 0 1px 0 rgba(255,255,255,.45); }
.game-start span { font-size:9px; }
@keyframes robot-hover { 0%,100% { transform:translateY(0) rotate(-2deg); } 50% { transform:translateY(-8px) rotate(2deg); } }
@keyframes asteroid-float { 0%,100% { transform:translate(0,0) rotate(0); } 50% { transform:translate(-9px,8px) rotate(70deg); } }
@keyframes core-pulse { 0%,100% { box-shadow:0 0 0 5px rgba(255,173,73,.1),0 0 18px rgba(255,174,73,.5),inset 0 2px 5px rgba(255,255,255,.55); } 50% { box-shadow:0 0 0 10px rgba(255,173,73,.08),0 0 30px rgba(255,174,73,.85),inset 0 2px 5px rgba(255,255,255,.65); } }
@keyframes flash-score { 0% { opacity:0; transform:translate(-50%,-15%) scale(.7); } 25% { opacity:1; transform:translate(-50%,-50%) scale(1.1); } 100% { opacity:0; transform:translate(-50%,-100%) scale(1); } }
@media(max-width:780px) { .mission-badges { justify-content:center; } .game-arena { height:210px; } .game-robot { width:88px; height:112px; left:5%; } .arena-planet { right:5%; } }
@media(prefers-reduced-motion:reduce) { .mascot,.game-robot,.arena-asteroid,.energy-star { animation:none !important; } }

.energy-star[hidden] { display:none !important; }

/* Version 9 — restore the original V3 mascot animation and make the game a playful character chase. */
.mascot-stage { perspective:none; }
.mascot { transform:none; transform-origin:initial; animation:bob 4.5s ease-in-out infinite; transition:filter .35s ease; }
.mascot-stage:hover .mascot { filter:drop-shadow(0 22px 38px rgba(0,0,0,.28)); }
.character-picker { display:flex; gap:8px; margin:0 0 12px; }
.character-choice { display:flex; align-items:center; gap:7px; min-width:0; flex:1; padding:7px 8px; border:1px solid rgba(255,255,255,.12); border-radius:11px; color:#dce7f5; background:rgba(255,255,255,.045); font:700 10px/1.2 inherit; cursor:pointer; transition:border-color .2s,background .2s,transform .2s; }
.character-choice img { width:30px; height:30px; object-fit:contain; }
.character-choice:hover:not(:disabled) { transform:translateY(-2px); border-color:rgba(98,184,220,.55); }
.character-choice.selected { border-color:#65c7e4; background:rgba(73,161,200,.17); box-shadow:inset 0 0 0 1px rgba(101,199,228,.16); }
.character-choice.orange-bot img { filter:hue-rotate(145deg) saturate(1.25); }
.character-choice.purple-bot img { filter:hue-rotate(235deg) saturate(1.2); }
.character-choice:disabled { opacity:.58; cursor:default; }
.catch-bot { position:absolute; z-index:5; display:grid; place-items:center; width:76px; height:82px; padding:0; border:1px solid rgba(121,213,239,.6); border-radius:18px; background:radial-gradient(circle at 50% 45%,rgba(94,196,229,.3),rgba(43,66,112,.8) 72%); box-shadow:0 0 0 5px rgba(73,161,200,.1),0 8px 22px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.22); cursor:pointer; animation:bot-zoom .55s cubic-bezier(.2,.8,.25,1) both,robot-hover 2.4s ease-in-out infinite; transition:left .2s ease,top .2s ease,transform .15s ease; }
.catch-bot img { width:62px; height:70px; object-fit:contain; pointer-events:none; filter:drop-shadow(0 4px 7px rgba(0,0,0,.25)); }
.catch-bot:hover { transform:scale(1.1) rotate(-4deg); }
.catch-bot:active { transform:scale(.82) rotate(8deg); }
.catch-bot:focus-visible,.character-choice:focus-visible { outline:3px solid #fff; outline-offset:3px; }
.catch-bot[hidden],.game-start-state[hidden] { display:none !important; }
@keyframes bot-zoom { from { opacity:0; scale:.45; rotate:-18deg; } to { opacity:1; scale:1; rotate:0deg; } }
@media(max-width:780px) { .character-picker { justify-content:center; } .character-choice { justify-content:center; flex-direction:column; min-height:66px; } .character-choice img { width:34px; height:34px; } }
@media(max-width:480px) { .character-picker { gap:6px; } .character-choice { padding:6px 3px; font-size:9px; } .catch-bot { width:70px; height:76px; } }
@media(prefers-reduced-motion:reduce) { .mascot { animation:none !important; } .catch-bot { animation:none !important; } }

/* Version 10 — two character cards, cleaner mission instructions, and the V3 hero mascot motion. */
.mascot-stage { perspective:none; }
.mascot { transform:none !important; transform-origin:initial; animation:bob 4.5s ease-in-out infinite !important; }
.floating-star { animation:twinkle 3s ease-in-out infinite; }
.floating-star.star-2 { animation-delay:-.8s; }
.floating-star.star-3 { animation-delay:-1.6s; }
.floating-star.star-4 { animation-delay:-2.2s; }

.mission-badges { display:flex; flex-wrap:wrap; gap:9px; margin-top:20px; }
.mission-badges span { display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border:1px solid rgba(139,183,218,.16); border-radius:999px; background:rgba(255,255,255,.045); color:#d9e4f2; font-size:11px; font-weight:650; letter-spacing:.01em; }
.mission-badges b { display:grid; place-items:center; width:19px; height:19px; border-radius:50%; color:#101b34; background:#8ed9e8; font-size:9px; }
.picker-label { margin:15px 0 9px; color:#8fa9c7; font-size:9px; font-weight:800; letter-spacing:.16em; }
.character-picker { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:0 0 14px; }
.character-choice { min-height:150px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:12px; border:1px solid rgba(255,255,255,.13); border-radius:16px; color:#eaf3ff; background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.025)); cursor:pointer; transition:transform .22s ease,border-color .22s ease,background .22s ease,box-shadow .22s ease; }
.character-choice:hover:not(:disabled) { transform:translateY(-3px); border-color:rgba(112,207,233,.65); }
.character-choice.selected { border-color:#6ecbe5; background:linear-gradient(145deg,rgba(67,166,207,.2),rgba(255,255,255,.045)); box-shadow:0 0 0 2px rgba(92,192,224,.12),0 10px 28px rgba(0,0,0,.14); }
.bot-card-art { width:92px; height:82px; display:grid; place-items:center; border-radius:13px; background:radial-gradient(circle,rgba(78,175,220,.24),rgba(78,175,220,.025) 72%); }
.bot-card-art img { width:74px; height:76px; object-fit:contain; }
.pink-art { background:radial-gradient(circle,rgba(246,129,183,.24),rgba(246,129,183,.025) 72%); }
.pink-art img { filter:hue-rotate(300deg) saturate(1.15); }
.bot-card-name { margin-top:5px; font-size:13px; font-weight:800; }
.bot-card-note { color:#91a8c5; font-size:10px; }
.character-choice:disabled { opacity:.65; cursor:default; }
.game-arena { min-height:210px; }
.catch-bot img { filter:drop-shadow(0 4px 7px rgba(0,0,0,.25)); }
@media(max-width:480px) { .character-picker { gap:9px; } .character-choice { min-height:136px; padding:9px 5px; } .bot-card-art { width:82px; height:72px; } .bot-card-art img { width:66px; height:68px; } .mission-badges { gap:6px; } .mission-badges span { font-size:10px; padding:7px 9px; } }
@media(prefers-reduced-motion:reduce) { .mascot,.floating-star { animation:none !important; } }


/* Version 11 — original Smarties mascot animation and true pink character artwork. */
.mascot-stage { position:relative; min-height:460px; display:grid; place-items:center; isolation:isolate; }
.mascot { width:min(78%,390px); max-height:430px; object-fit:contain; z-index:2; filter:drop-shadow(0 22px 38px rgba(0,0,0,.28)); animation:bob 4.5s ease-in-out infinite !important; transform:none !important; }
.orbit { position:absolute; width:430px; height:150px; border:3px solid var(--orange); border-radius:50%; transform:rotate(-17deg); z-index:3; pointer-events:none; }
.orbit-back { width:390px; height:130px; border-color:rgba(73,161,200,.65); transform:rotate(28deg); z-index:1; }
.orbit-front { border-left-color:transparent; border-bottom-color:transparent; }
.floating-star { position:absolute; z-index:4; color:var(--orange); animation:twinkle 3s ease-in-out infinite; }
.star-1 { top:15%; left:13%; font-size:28px; color:var(--blue-bright); }
.star-2 { top:20%; right:12%; font-size:34px; animation-delay:.8s; }
.star-3 { bottom:18%; left:17%; font-size:24px; animation-delay:1.3s; }
.star-4 { bottom:13%; right:17%; font-size:29px; color:var(--blue-bright); animation-delay:.4s; }
.pink-art img { filter:none !important; }
@media(max-width:780px) { .mascot-stage { min-height:340px; margin-top:15px; } .mascot { width:min(70%,300px); max-height:330px; } .orbit { width:min(95%,360px); height:120px; } .orbit-back { width:min(88%,330px); height:105px; } }
@media(prefers-reduced-motion:reduce) { .mascot,.floating-star { animation:none !important; } }


/* Version 12 — isolate the hero mascot motion so it remains visible and reliable. */
.mascot-stage { overflow:visible; }
.mascot-float { position:relative; z-index:2; display:grid; place-items:center; width:100%; animation:mascot-hover 4.2s ease-in-out infinite; will-change:transform; }
.mascot-float .mascot { display:block; animation:none !important; transform:none !important; }
@keyframes mascot-hover {
  0%,100% { transform:translate3d(0,0,0) rotate(-1deg); }
  50% { transform:translate3d(0,-16px,0) rotate(1deg); }
}
/* The Pinky Bot artwork is already pink; never hue-shift the complete image. */
.pink-art img { filter:none !important; }
@media(prefers-reduced-motion:reduce) { .mascot-float { animation:mascot-hover 7s ease-in-out infinite; } }