/* Hero + Impressive-Demo section, ported from web2/page.css and scoped under
   .mova-hero-block so it never collides with the Fab-listing page's own CSS
   variables and class names (both pages happen to use classes like .buy).
   All colours are remapped onto MOVA's brand palette (same source as the
   listing page: blue #00AEEF, yellow #FFD83D, navy #0A2647, cream #FFFBEA)
   rather than web2's own blueprint palette, so the section reads as native
   to mova.games instead of a foreign page pasted in. */
.mova-hero-block {
  --deep:        #0A2647;
  --deep-2:      #0f335e;
  --panel:       #134078;
  --panel-2:     #1c4d85;
  --line:        #2a5486;
  --line-soft:   #1c4d85;
  --blue:        #00AEEF;
  --blue-bright: #4fc7ff;
  --blue-dim:    #2e8fc7;
  --blue-ink:    #04121e;
  --gold:        #FFD83D;
  --gold-soft:   #ffe473;
  --gold-dim:    #c9a319;
  --gold-ink:    #0A2647;
  --text:        #FFFBEA;
  --text-soft:   #c7d4e6;
  --text-faint:  #95a9c7;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-family: var(--sans);
}

/* ======================= CINEMATIC HERO ================== */
.mova-hero-block .hero {
	position: relative; overflow: hidden;
	background:
		radial-gradient(1200px 620px at 50% -10%, color-mix(in srgb, var(--blue) 22%, transparent) 0%, transparent 62%),
		linear-gradient(180deg, var(--deep-2), var(--deep));
	border-bottom: 1px solid var(--line-soft);
}
.mova-hero-block .hero .wrap { padding-top: 76px; padding-bottom: 60px; text-align: center; position: relative; z-index: 2; max-width: 1180px; margin: 0 auto; padding-left: 20px; padding-right: 20px; }
.mova-hero-block .badge {
	display: inline-block; border: 1px solid var(--line);
	background: color-mix(in srgb, var(--panel) 70%, transparent);
	color: var(--blue-bright); font-size: 11px; letter-spacing: .15em; text-transform: uppercase;
	padding: 6px 15px; border-radius: 100px; margin-bottom: 26px;
}
.mova-hero-block .hero h1 {
	font-size: 56px; line-height: 1.05; letter-spacing: -.035em; margin: 0 0 20px; font-weight: 800;
	text-shadow: 0 0 70px color-mix(in srgb, var(--blue) 30%, transparent); color: var(--text);
}
.mova-hero-block .hero h1 em {
	font-style: normal;
	background: linear-gradient(180deg, var(--gold-soft), var(--gold));
	-webkit-background-clip: text; background-clip: text; color: transparent;
}
.mova-hero-block .hero .sub { font-size: 17px; line-height: 1.65; color: var(--text-soft); max-width: 620px; margin: 0 auto 30px; }

.mova-hero-block .cta-row { display: flex; gap: 12px; justify-content: center; align-items: center; flex-wrap: wrap; }
.mova-hero-block .buy {
	display: inline-block; background: linear-gradient(180deg, var(--gold-soft), var(--gold));
	color: var(--gold-ink); font-weight: 750; padding: 15px 34px; border-radius: 8px;
	text-decoration: none; font-size: 16px;
	box-shadow: 0 10px 34px color-mix(in srgb, var(--gold) 28%, transparent);
}
.mova-hero-block .buy:hover { filter: brightness(1.06); text-decoration: none; }
.mova-hero-block .ghost {
	display: inline-block; border: 1px solid var(--line); color: var(--text);
	padding: 14px 24px; border-radius: 8px; text-decoration: none; font-size: 15px;
}
.mova-hero-block .ghost:hover { border-color: var(--blue); color: var(--blue-bright); text-decoration: none; }
.mova-hero-block .fineprint { font-size: 12px; color: var(--text-faint); margin-top: 14px; }

.mova-hero-block .hero-stats { display: flex; justify-content: center; gap: 40px; margin-top: 48px; flex-wrap: wrap; }
.mova-hero-block .hero-stats div b { display: block; font-size: 25px; font-weight: 700; color: var(--text); }
.mova-hero-block .hero-stats div span { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); }

/* ==================== IMPRESSIVE DEMO (real 3D objects) ==================
   Lives INSIDE the listing's own gallery box (.gal .shot), not a separate
   full-bleed section - the canvas fills the existing 16:9 shot placeholder,
   and the object switcher IS the gallery's own thumbnail strip. */
.mova-hero-block.impress-in-gallery { display: contents; }
.gal .shot.impress-host { position: relative; padding: 0; overflow: hidden; color: transparent; scroll-margin-top: 76px; }
.gal .shot.impress-host .impress-stage { position: absolute; inset: 0; height: 100%; }
.gal .shot.impress-host canvas { display: block; width: 100%; height: 100%; touch-action: none; position: relative; z-index: 1; }
.gal .shot.impress-host .impress-text {
	position: absolute; top: 16px; right: 16px; z-index: 2; max-width: 78%; text-align: right;
	pointer-events: none; color: var(--tx, #FFFBEA);
}
.gal .shot.impress-host .impress-text > * { pointer-events: auto; }
.gal .shot.impress-host .impress-eyebrow {
	font: 600 10.5px ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .14em;
	text-transform: uppercase; color: var(--gold, #FFD83D); margin-bottom: 8px;
}
.gal .shot.impress-host .impress-text h2 {
	margin: 0 0 6px; font-size: 20px; letter-spacing: -.02em; font-weight: 700; color: var(--tx, #FFFBEA);
	transition: opacity .35s ease; text-shadow: 0 2px 14px rgba(10,20,35,.85);
}
.gal .shot.impress-host .impress-text p {
	margin: 0; color: var(--dim, #c7d4e6); font-size: 12.5px; line-height: 1.5; margin-left: auto;
	max-width: 256px;
	transition: opacity .35s ease; text-shadow: 0 2px 10px rgba(10,20,35,.85);
}
.gal .shot.impress-host .impress-text.fading h2,
.gal .shot.impress-host .impress-text.fading p { opacity: 0; }
.gal .shot.impress-host .impress-remote { display: none; gap: 6px; margin-top: 12px; justify-content: flex-end; }
.gal .shot.impress-host .impress-remote.on { display: flex; }
.gal .shot.impress-host .impress-remote-btn {
	display: flex; flex-direction: column; align-items: center; gap: 3px;
	background: rgba(19,64,120,.8); border: 1px solid var(--line, #1c4d85);
	border-radius: 8px; padding: 6px 10px; color: var(--dim, #c7d4e6); cursor: pointer;
	font: 600 9.5px ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .04em; text-transform: uppercase;
	transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.gal .shot.impress-host .impress-remote-btn svg { width: 16px; height: 16px; }
.gal .shot.impress-host .impress-remote-btn:hover { color: var(--tx, #FFFBEA); border-color: var(--blue, #00AEEF); }
.gal .shot.impress-host .impress-remote-btn.on {
	color: var(--gold, #FFD83D); border-color: var(--gold, #FFD83D);
	background: rgba(255,216,61,.14);
}
/* Real object-switch buttons in the thumbnail strip: text labels, not shot placeholders. */
.thumbs .shot[data-i] {
	background: var(--card2, #134078); border: 1px solid var(--line, #1c4d85);
	cursor: pointer; font: 600 10.5px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	color: var(--dim, #c7d4e6); transition: border-color .15s ease, color .15s ease;
}
.thumbs .shot[data-i]:hover { border-color: var(--blue, #00AEEF); color: var(--tx, #FFFBEA); }
.thumbs .shot[data-i].sel { border-color: var(--gold, #FFD83D); color: var(--tx, #FFFBEA); font-weight: 700; }
@media (max-width: 720px) {
	.gal .shot.impress-host .impress-text { position: static; max-width: none; text-align: left; margin: 10px 0 0; }
	.gal .shot.impress-host .impress-text p { margin-left: 0; }
	.gal .shot.impress-host .impress-remote { justify-content: flex-start; }
}

@media (max-width: 900px) {
	.mova-hero-block .hero .wrap { padding-top: 46px; padding-bottom: 42px; }
	.mova-hero-block .hero h1 { font-size: 34px; }
	.mova-hero-block .hero .sub { font-size: 15px; }
	.mova-hero-block .hero-stats { gap: 20px; }
}

@media (max-width: 480px) {
	.mova-hero-block .hero .wrap { padding-top: 32px; padding-bottom: 28px; padding-left: 14px; padding-right: 14px; }
	.mova-hero-block .badge { font-size: 9.5px; padding: 5px 11px; margin-bottom: 16px; }
	.mova-hero-block .hero h1 { font-size: 24px; letter-spacing: -.02em; }
	.mova-hero-block .hero .sub { font-size: 13.5px; margin-bottom: 20px; }
	.mova-hero-block .cta-row { gap: 8px; }
	.mova-hero-block .buy, .mova-hero-block .ghost { padding: 11px 18px; font-size: 13px; }
	.mova-hero-block .hero-stats { gap: 14px 22px; margin-top: 28px; }
	.mova-hero-block .hero-stats div b { font-size: 18px; }
	.mova-hero-block .hero-stats div span { font-size: 9px; }

	/* The impress gallery box shrinks with the .gal>.shot aspect-ratio automatically, but the
	   overlaid text and remote buttons need smaller type to fit the narrower box. */
	.gal .shot.impress-host .impress-text { top: 10px; right: 10px; max-width: 85%; }
	.gal .shot.impress-host .impress-eyebrow { font-size: 8.5px; margin-bottom: 4px; }
	.gal .shot.impress-host .impress-text h2 { font-size: 14px; margin-bottom: 3px; }
	.gal .shot.impress-host .impress-text p { font-size: 10.5px; line-height: 1.4; }
	.gal .shot.impress-host .impress-remote { margin-top: 8px; gap: 4px; }
	.gal .shot.impress-host .impress-remote-btn { padding: 5px 8px; font-size: 8px; }
	.gal .shot.impress-host .impress-remote-btn svg { width: 13px; height: 13px; }
}

@media (max-width: 380px) {
	.mova-hero-block .hero h1 { font-size: 20px; }
	.mova-hero-block .hero .sub { font-size: 12.5px; }
	.mova-hero-block .buy, .mova-hero-block .ghost { padding: 9px 15px; font-size: 12px; }
	.mova-hero-block .hero-stats { gap: 10px 16px; }
	.mova-hero-block .hero-stats div b { font-size: 15px; }
	.mova-hero-block .hero-stats div span { font-size: 8px; }
}