/* ===================================================================
   CONSOLIDATED STYLESHEET (v3 - FINAL, all 8 source files included)
   Merged in cascade order: styles, final-overrides, release-overrides,
   last-overrides, final-polish, z-release-final, zz-publish-lock,
   zzz-five-point-fix.
   Exact duplicate rules removed automatically (kept last occurrence).
   =================================================================== */


/* ---- from: styles.css ---- */

:root {
  --cyan: #0cc0df;
  --yellow: #ffde59;
  --gradient: linear-gradient(115deg, var(--cyan), #77d79d 52%, var(--yellow));
  --bg: #060707;
  --bg-soft: #0d1011;
  --surface: rgba(255, 255, 255, 0.055);
  --surface-strong: rgba(255, 255, 255, 0.105);
  --text: #f8fbfa;
  --muted: #9da7a8;
  --line: rgba(255, 255, 255, 0.13);
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.38);
  --radius: 8px;
  --content: min(1180px, calc(100vw - 40px));
  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg: #f7f8f8;
  --bg-soft: #ffffff;
  --surface: rgba(4, 8, 9, 0.055);
  --surface-strong: rgba(4, 8, 9, 0.09);
  --text: #080b0d;
  --muted: #5d676b;
  --line: rgba(4, 8, 9, 0.13);
  --shadow: 0 24px 70px rgba(20, 26, 28, 0.11);
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  position: relative;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.16) 0 1px, transparent 1.6px),
    radial-gradient(circle at 72% 28%, rgba(255, 255, 255, 0.14) 0 1px, transparent 1.7px),
    radial-gradient(circle at 36% 68%, rgba(255, 255, 255, 0.12) 0 1px, transparent 1.6px),
    radial-gradient(circle at 82% 8%, color-mix(in srgb, var(--cyan) 20%, transparent), transparent 26rem),
    radial-gradient(circle at 18% 30%, color-mix(in srgb, var(--yellow) 14%, transparent), transparent 22rem),
    linear-gradient(180deg, var(--bg), var(--bg-soft) 48%, var(--bg));
  background-size: auto, 520px 520px, 680px 680px, auto, auto, auto;
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  letter-spacing: 0;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), transparent 62%);
  animation: backgroundGridDrift 24s linear infinite alternate;
  content: "";
}

body::after {
  position: fixed;
  inset: -18%;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(118deg, transparent 22%, color-mix(in srgb, var(--cyan) 9%, transparent) 30%, transparent 42%),
    linear-gradient(28deg, transparent 58%, color-mix(in srgb, var(--yellow) 8%, transparent) 66%, transparent 76%),
    radial-gradient(ellipse at 72% 22%, color-mix(in srgb, var(--cyan) 12%, transparent), transparent 32%),
    repeating-linear-gradient(90deg, transparent 0 118px, color-mix(in srgb, var(--cyan) 4%, transparent) 119px 120px);
  opacity: 0.62;
  transform: translate3d(0, 0, 0) rotate(-2deg);
  animation: backgroundShapeDrift 30s ease-in-out infinite alternate;
  content: "";
}

main {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

main::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--cyan) 5%, transparent) 1px, transparent 1px),
    linear-gradient(0deg, color-mix(in srgb, var(--yellow) 4%, transparent) 1px, transparent 1px),
    radial-gradient(ellipse at 16% 16%, color-mix(in srgb, var(--cyan) 12%, transparent), transparent 34%),
    radial-gradient(ellipse at 84% 48%, color-mix(in srgb, var(--yellow) 10%, transparent), transparent 38%),
    linear-gradient(115deg, transparent 20%, color-mix(in srgb, var(--cyan) 6%, transparent) 42%, transparent 72%);
  background-size: 86px 86px, 86px 86px, 100% 100%, 100% 100%, 100% 100%;
  opacity: 0.72;
  transform: translate3d(0, 0, 0);
  animation: siteGeometryDrift 26s ease-in-out infinite alternate;
  content: "";
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.cursor-spark {
  position: fixed;
  z-index: 9999;
  width: 13px;
  height: 13px;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 18%, var(--yellow) 19% 44%, var(--cyan) 45% 100%);
  box-shadow:
    0 0 22px color-mix(in srgb, var(--cyan) 76%, transparent),
    0 0 44px color-mix(in srgb, var(--yellow) 42%, transparent);
  transform: translate(-50%, -50%);
  animation: sparkFade 950ms ease-out forwards;
}

.cursor-spark::after {
  position: absolute;
  top: 50%;
  right: 50%;
  width: 26px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--cyan), var(--yellow));
  transform: translateY(-50%) rotate(-18deg);
  content: "";
}

.gradient-text {
  background: var(--gradient);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.heading-accent {
  font-family: Fredoka, Inter, sans-serif;
  font-weight: 700;
  background: var(--gradient);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.site-header {
  position: sticky;
  top: 16px;
  z-index: 50;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  width: var(--content);
  min-height: 70px;
  margin: 16px auto 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

.brand {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.brand-logo-shell {
  position: relative;
  display: grid;
  width: clamp(196px, 18vw, 246px);
  min-width: 0;
  height: 44px;
  padding: 0;
  overflow: visible;
  place-items: center;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.brand-wordmark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(100% * 1.12);
  max-width: none;
  height: calc(100% * 6.15);
  object-fit: contain;
  transform: translate(-50%, -50%);
}

.brand-wordmark-dark {
  display: none;
  filter: none;
}

.brand-wordmark-light {
  display: block;
  filter: none;
}

:root[data-theme="light"] .brand-wordmark-dark {
  display: block;
  filter: none;
}

:root[data-theme="light"] .brand-wordmark-light {
  display: none;
}

:root[data-theme="dark"] .brand-wordmark-dark {
  display: none;
}

.desktop-nav {
  display: flex;
  justify-content: center;
  gap: clamp(12px, 2vw, 28px);
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}

.desktop-nav a {
  transition: color 180ms ease;
}

.desktop-nav a:hover {
  color: var(--text);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-self: end;
}

.lang-toggle,
.menu-toggle,
.theme-toggle,
.button {
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}

.lang-toggle,
.theme-toggle {
  display: grid;
  width: 42px;
  min-width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--line);
  place-items: center;
  background: var(--surface);
  color: var(--text);
  transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}

.lang-toggle {
  font-size: 12px;
  font-weight: 950;
}

.theme-icon {
  display: grid;
  width: 23px;
  height: 23px;
  place-items: center;
}

.theme-toggle:hover {
  border-color: color-mix(in srgb, var(--cyan) 42%, var(--line));
  transform: translateY(-1px);
}

.menu-toggle {
  display: none;
  width: 42px;
  min-width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--line);
  place-items: center;
  background: var(--surface);
  color: var(--text);
}

.menu-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transition: transform 180ms ease, opacity 180ms ease;
}

.site-header.menu-open .menu-toggle span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.site-header.menu-open .menu-toggle span:nth-child(2) {
  opacity: 0;
}

.site-header.menu-open .menu-toggle span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

.mobile-nav {
  grid-column: 1 / -1;
  display: grid;
  max-height: 0;
  gap: 6px;
  overflow: hidden;
  transition: max-height 260ms ease, padding-top 220ms ease, opacity 180ms ease;
  opacity: 0;
}

.site-header.menu-open .mobile-nav {
  max-height: 360px;
  padding-top: 8px;
  opacity: 1;
}

.mobile-nav a,
.mobile-lang {
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
  font-weight: 850;
}

.mobile-lang {
  width: 100%;
  appearance: none;
}

.theme-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.theme-icon-moon svg {
  fill: currentColor;
  stroke: none;
}

.theme-icon-sun {
  color: var(--cyan);
}

.theme-icon-moon {
  color: var(--cyan);
}

:root[data-theme="dark"] .theme-icon-sun,
:root[data-theme="light"] .theme-icon-moon {
  display: none;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 20px;
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.button:hover {
  transform: translateY(-2px);
}

.button-primary {
  background: var(--gradient);
  color: #071014;
  box-shadow: 0 18px 40px color-mix(in srgb, var(--cyan) 20%, transparent);
}

.button-secondary {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
}

.button-small {
  min-height: 42px;
  padding: 0 14px;
  font-size: 13px;
}

.section-pad {
  position: relative;
  isolation: isolate;
  width: var(--content);
  margin-inline: auto;
  padding: clamp(70px, 9vw, 128px) 0;
}

.section-pad::after {
  position: absolute;
  inset: 4% -8%;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(115deg, transparent 18%, color-mix(in srgb, var(--cyan) 5%, transparent) 31%, transparent 46%),
    linear-gradient(24deg, transparent 56%, color-mix(in srgb, var(--yellow) 5%, transparent) 68%, transparent 82%),
    repeating-linear-gradient(90deg, transparent 0 96px, color-mix(in srgb, var(--cyan) 3%, transparent) 97px 98px),
    repeating-linear-gradient(0deg, transparent 0 96px, color-mix(in srgb, var(--yellow) 2.4%, transparent) 97px 98px);
  opacity: 0.6;
  transform: translate3d(0, 0, 0) rotate(-1deg);
  animation: siteSectionDrift 18s ease-in-out infinite alternate;
  content: "";
}

.hero {
  position: relative;
  isolation: isolate;
  --hero-rocket-x: clamp(472px, 46vw, 656px);
  --hero-rocket-y: clamp(246px, 24vw, 330px);
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(360px, 0.82fr);
  align-items: center;
  gap: clamp(32px, 6vw, 90px);
  width: 100%;
  min-height: calc(100vh - 88px);
  padding-top: 56px;
  padding-right: max(20px, calc((100vw - 1180px) / 2));
  padding-left: max(20px, calc((100vw - 1180px) / 2));
  overflow: hidden;
}

.hero .reveal {
  opacity: 1;
  transform: none;
}

.hero::before {
  position: absolute;
  inset: -150px 0 -120px 34%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 68% 40%, color-mix(in srgb, var(--cyan) 28%, transparent), transparent 52%),
    radial-gradient(ellipse at 38% 60%, color-mix(in srgb, var(--yellow) 16%, transparent), transparent 58%),
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--cyan) 8%, transparent), transparent 72%);
  filter: blur(8px);
  content: "";
}

.hero h1 {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 0.96;
}

.section-heading h2,
.case-copy h2,
.about-panel h2,
.cta h2 {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 0.98;
}

.hero h1 {
  max-width: 720px;
  font-size: 74px;
}

.hero-title {
  display: grid;
  gap: 4px;
}

.hero-title > span:first-child {
  display: block;
  font-family: Fredoka, Inter, ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.06;
}

.word-rotator {
  position: relative;
  display: block;
  min-height: 1.36em;
  padding-bottom: 0.24em;
  overflow: visible;
  line-height: 1.12;
}

.word-rotator span {
  position: absolute;
  inset: 0 auto auto 0;
  width: max-content;
  max-width: 100%;
  font-family: Fredoka, Inter, sans-serif;
  font-weight: 700;
  background: var(--gradient);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  opacity: 0;
  transform: translateY(0.18em) scale(0.992);
  transform-origin: left bottom;
  animation: rotateWord 16s cubic-bezier(0.2, 0.72, 0.18, 1) infinite;
}

.hero-rocket {
  position: absolute;
  top: var(--hero-rocket-y);
  left: var(--hero-rocket-x);
  z-index: 2;
  width: 92px;
  aspect-ratio: 160 / 260;
  pointer-events: none;
  filter:
    drop-shadow(0 0 24px color-mix(in srgb, var(--cyan) 56%, transparent))
    drop-shadow(0 24px 34px rgba(0, 0, 0, 0.24));
  opacity: 1;
  transform-origin: 50% 74%;
  animation: heroRocketArrive 5.4s cubic-bezier(0.18, 0.82, 0.14, 1) 0.35s both;
}

.hero-rocket::after,
.mission-rocket::after {
  position: absolute;
  bottom: -38px;
  left: 50%;
  width: 42px;
  height: 78px;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 10%, #fff 0 7%, transparent 8%),
    radial-gradient(circle at 36% 34%, var(--yellow) 0 5%, transparent 6%),
    radial-gradient(circle at 68% 55%, var(--cyan) 0 4%, transparent 5%),
    linear-gradient(180deg, color-mix(in srgb, var(--yellow) 78%, transparent), color-mix(in srgb, var(--cyan) 62%, transparent) 58%, transparent);
  filter: blur(0.2px);
  opacity: 0.82;
  transform: translateX(-50%);
  transform-origin: 50% 0;
  animation: rocketSparkleTrail 760ms ease-in-out infinite alternate;
  content: "";
}

.hero-rocket img,
.mission-rocket img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.hero.rocket-released .hero-rocket {
  offset-path: path("M 0 0 C 92 -116 -92 -116 0 0 C 190 -34 455 -154 780 -286 C 1010 -380 1220 -414 1390 -456 C -360 256 -142 104 0 0");
  offset-rotate: auto 90deg;
  offset-anchor: 50% 74%;
  animation: heroRocketMotionPath 6.9s cubic-bezier(0.28, 0.74, 0.14, 1) both;
}

.hero.rocket-launching .hero-rocket {
  offset-path: path("M 0 0 C 72 -126 194 -100 184 2 C 174 118 18 116 -22 30 C -54 -44 34 -94 128 -40 C 276 44 560 -120 890 -294 C 1060 -384 1280 -416 1460 -462 C 1540 -484 1600 -510 1660 -540 C -640 180 -260 96 0 0");
  offset-rotate: auto 90deg;
  offset-anchor: 50% 74%;
  animation: heroRocketLoopDepart 5.9s cubic-bezier(0.18, 0.78, 0.13, 1) both;
}

.hero.hero-video-started .rocket-continue {
  pointer-events: none;
  opacity: 0;
  animation: none;
}

.hero.hero-video-started:not(.rocket-launching) .hero-rocket {
  animation: heroRocketArrive 3.45s cubic-bezier(0.2, 0.76, 0.16, 1) 0.18s both;
}

.rocket-continue {
  position: absolute;
  isolation: isolate;
  top: calc(var(--hero-rocket-y) - 126px);
  left: min(calc(var(--hero-rocket-x) + 84px), calc(100% - 250px));
  z-index: 4;
  display: inline-grid;
  width: 226px;
  min-height: 104px;
  padding: 12px 26px 32px 36px;
  place-items: center;
  appearance: none;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(circle at 34% 22%, rgba(255, 255, 255, 0.94), transparent 24%),
    linear-gradient(150deg, #fbfff6 0%, color-mix(in srgb, #fbfff6 92%, var(--cyan)) 58%, color-mix(in srgb, #fff9d6 88%, var(--yellow)) 100%);
  color: #071014;
  clip-path: polygon(7% 56%, 9% 38%, 17% 21%, 31% 10%, 52% 6%, 72% 9%, 88% 20%, 97% 38%, 96% 59%, 86% 76%, 67% 87%, 43% 90%, 25% 84%, 3% 100%, 14% 70%);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 950;
  line-height: 1;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.84);
  white-space: nowrap;
  box-shadow:
    0 0 34px color-mix(in srgb, var(--cyan) 20%, transparent),
    0 0 0 999px transparent,
    inset 0 -8px 16px rgba(7, 16, 20, 0.08),
    inset 0 4px 8px rgba(255, 255, 255, 0.78);
  filter:
    drop-shadow(2px 0 0 #111719)
    drop-shadow(-2px 0 0 #111719)
    drop-shadow(0 2px 0 #111719)
    drop-shadow(0 -2px 0 #111719)
    drop-shadow(0 0 10px color-mix(in srgb, var(--cyan) 24%, transparent));
  opacity: 0;
  transform: scale(0.86);
  animation: rocketPromptIn 520ms ease 6.1s forwards, rocketPromptPulse 1.6s ease-in-out 6.7s infinite;
}

.hero.rocket-released .rocket-continue {
  pointer-events: auto;
  animation: rocketPromptReturn 520ms ease 6.55s forwards, rocketPromptPulse 1.6s ease-in-out 7.1s infinite;
  opacity: 0;
  transform: translate3d(22px, 12px, 0) scale(0.72);
  transition: none;
}

.word-rotator span:nth-child(2) {
  animation-delay: 2s;
}

.word-rotator span:nth-child(3) {
  animation-delay: 4s;
}

.word-rotator span:nth-child(4) {
  animation-delay: 6s;
}

.word-rotator span:nth-child(5) {
  animation-delay: 8s;
}

.word-rotator span:nth-child(6) {
  animation-delay: 10s;
}

.word-rotator span:nth-child(7) {
  animation-delay: 12s;
}

.word-rotator span:nth-child(8) {
  animation-delay: 14s;
}

.hero-copy p {
  max-width: 680px;
  margin: 28px 0 0;
  color: var(--muted);
  font-size: 20px;
  line-height: 1.55;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

.proof-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(96px, 1fr));
  gap: 10px;
  max-width: 720px;
  margin-top: 38px;
}

.proof-grid div {
  position: relative;
  min-height: 94px;
  padding: 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 18px 38px color-mix(in srgb, var(--cyan) 6%, transparent);
  transition: transform 200ms ease, border-color 200ms ease, background 200ms ease;
}

.proof-grid div::before {
  position: absolute;
  inset: -70% -45%;
  background: linear-gradient(115deg, transparent 36%, color-mix(in srgb, var(--cyan) 26%, transparent) 48%, color-mix(in srgb, var(--yellow) 22%, transparent) 56%, transparent 68%);
  opacity: 0.58;
  transform: translateX(-56%) rotate(10deg);
  animation: proofSweep 7s ease-in-out infinite;
  content: "";
}

.proof-grid div::after {
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 38px;
  height: 2px;
  border-radius: 999px;
  background: var(--gradient);
  opacity: 0.74;
  transform-origin: right center;
  animation: proofLine 3.8s ease-in-out infinite;
  content: "";
}

.proof-grid div:nth-child(2)::before,
.proof-grid div:nth-child(2)::after {
  animation-delay: 0.45s;
}

.proof-grid div:nth-child(3)::before,
.proof-grid div:nth-child(3)::after {
  animation-delay: 0.9s;
}

.proof-grid div:nth-child(4)::before,
.proof-grid div:nth-child(4)::after {
  animation-delay: 1.35s;
}

.proof-grid div:hover {
  border-color: color-mix(in srgb, var(--cyan) 46%, var(--line));
  transform: translateY(-4px);
}

.proof-grid strong {
  position: relative;
  z-index: 1;
  display: block;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(25px, 2.1vw, 30px);
  line-height: 1.04;
  white-space: nowrap;
}

.proof-grid span {
  position: relative;
  z-index: 1;
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.hero-visual {
  position: relative;
  display: grid;
  min-height: 650px;
  place-items: center;
}

.phone-glow {
  position: absolute;
  width: min(44vw, 520px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--gradient);
  filter: blur(70px);
  opacity: 0.2;
}

.phone-shell {
  position: relative;
  width: min(330px, 74vw);
  aspect-ratio: 390 / 760;
  filter: drop-shadow(0 38px 80px rgba(0, 0, 0, 0.55));
}

.phone-shell::before {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  border: 4px solid #050708;
  border-radius: 48px;
  background: transparent;
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.38),
    inset 0 0 0 9px #070909,
    0 0 0 1px rgba(255, 255, 255, 0.26);
  content: "";
}

.phone-shell::after {
  position: absolute;
  top: 18px;
  left: 50%;
  z-index: 6;
  width: 96px;
  height: 26px;
  border-radius: 999px;
  background: #050708;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
  transform: translateX(-50%);
  content: "";
}

.phone-device {
  display: none;
}

.phone-screen {
  position: absolute;
  inset: 4.2% 5%;
  z-index: 2;
  width: auto;
  height: auto;
  overflow: hidden;
  border-radius: 42px;
  background:
    linear-gradient(180deg, rgba(6, 7, 7, 0.05), rgba(6, 7, 7, 0.8)),
    linear-gradient(140deg, #071014, #142023 48%, #0b1112);
}

.phone-screen::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(120deg, color-mix(in srgb, var(--cyan) 28%, transparent), transparent 42%),
    linear-gradient(320deg, color-mix(in srgb, var(--yellow) 28%, transparent), transparent 48%);
  animation: screenPulse 5s ease-in-out infinite alternate;
  content: "";
}

.hero-video {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #050708;
  opacity: 0;
  transition: opacity 240ms ease;
}

.phone-screen.video-playing .hero-video {
  opacity: 1;
}

.video-placeholder {
  position: absolute;
  inset: 20px 14px 22px;
  z-index: 2;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 12px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 34px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.01)),
    linear-gradient(145deg, rgba(12, 192, 223, 0.28), transparent 42%),
    linear-gradient(320deg, rgba(255, 222, 89, 0.26), transparent 48%),
    rgba(2, 5, 7, 0.58);
  color: #fff;
  text-align: center;
  transition: opacity 240ms ease, transform 240ms ease;
}

.phone-screen.video-playing .video-placeholder {
  pointer-events: none;
  opacity: 0;
  transform: scale(0.96);
}

.video-placeholder::before,
.video-placeholder::after {
  position: absolute;
  right: 18px;
  left: 18px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.32), transparent);
  content: "";
}

.video-placeholder::before {
  top: 26%;
}

.video-placeholder::after {
  bottom: 24%;
}

.play-mark {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  background: var(--gradient);
  box-shadow: 0 0 46px rgba(12, 192, 223, 0.28);
}

.play-mark::before {
  width: 0;
  height: 0;
  margin-left: 4px;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  border-left: 17px solid #071014;
  content: "";
}

.video-placeholder strong {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 27px;
  line-height: 1.02;
}

.video-placeholder span:last-child {
  max-width: 150px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.reel-card {
  position: absolute;
  left: 14px;
  right: 14px;
  display: grid;
  align-content: end;
  min-height: 174px;
  padding: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  color: #fff;
  background:
    linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.72)),
    var(--gradient);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.22);
}

.reel-card::before {
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  content: "";
}

.reel-card span,
.phone-bottom span {
  color: rgba(255, 255, 255, 0.74);
  font-size: 12px;
  font-weight: 800;
}

.reel-card strong {
  position: relative;
  z-index: 2;
  margin-top: 6px;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 22px;
  line-height: 1.04;
}

.reel-card-primary {
  top: 54px;
  animation: reelOne 10s ease-in-out infinite;
}

.reel-card-two {
  top: 246px;
  background:
    linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.72)),
    linear-gradient(135deg, #152123, #0cc0df 55%, #f4d553);
  animation: reelTwo 10s ease-in-out infinite;
}

.reel-card-three {
  top: 438px;
  background:
    linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.72)),
    linear-gradient(135deg, #171717, #d9f5f9 42%, #ffde59);
  animation: reelThree 10s ease-in-out infinite;
}

.phone-bottom {
  position: absolute;
  right: 14px;
  bottom: 24px;
  left: 14px;
  display: flex;
  justify-content: space-between;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.42);
  color: #fff;
  backdrop-filter: blur(14px);
}

.trust-strip {
  position: relative;
  isolation: isolate;
  width: 100%;
  padding: clamp(48px, 7vw, 82px) 0;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(ellipse at 18% 30%, color-mix(in srgb, var(--cyan) 10%, transparent), transparent 42%),
    radial-gradient(ellipse at 82% 72%, color-mix(in srgb, var(--yellow) 8%, transparent), transparent 38%),
    transparent;
}

:root[data-theme="light"] .trust-strip,
:root[data-theme="light"] .logo-marquee,
:root[data-theme="light"] .logo-row {
  background: transparent;
}

.trust-strip::before,
.trust-strip::after {
  position: absolute;
  inset: -22% -8%;
  z-index: -1;
  pointer-events: none;
  content: "";
}

.trust-strip::before {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--cyan) 5%, transparent) 1px, transparent 1px),
    linear-gradient(0deg, color-mix(in srgb, var(--yellow) 4%, transparent) 1px, transparent 1px),
    linear-gradient(118deg, transparent 22%, color-mix(in srgb, var(--cyan) 7%, transparent) 44%, transparent 72%);
  background-size: 92px 92px, 92px 92px, 100% 100%;
  opacity: 0.78;
  animation: siteGeometryDrift 22s ease-in-out infinite alternate;
}

.trust-strip::after {
  background:
    radial-gradient(circle at 12% 28%, rgba(255, 255, 255, 0.42) 0 1px, transparent 2px),
    radial-gradient(circle at 62% 20%, color-mix(in srgb, var(--cyan) 36%, transparent) 0 1px, transparent 2px),
    radial-gradient(circle at 84% 70%, color-mix(in srgb, var(--yellow) 34%, transparent) 0 1px, transparent 2px),
    repeating-linear-gradient(126deg, transparent 0 124px, color-mix(in srgb, var(--cyan) 3%, transparent) 125px 127px);
  opacity: 0.58;
  transform: rotate(-2deg);
  animation: backgroundShapeDrift 28s ease-in-out infinite alternate-reverse;
}

.trust-copy {
  width: var(--content);
  margin: 0 auto 24px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.logo-marquee {
  position: relative;
  display: grid;
  gap: 20px;
  overflow: hidden;
}

.logo-row {
  width: 100%;
  min-width: 0;
  max-width: 100vw;
  overflow: hidden;
}

:root[data-theme="light"] .logo-row {
  background: transparent;
}

.logo-marquee::before,
.logo-marquee::after {
  position: absolute;
  top: 0;
  z-index: 2;
  width: min(16vw, 180px);
  height: 100%;
  pointer-events: none;
  content: "";
}

.logo-marquee::before {
  left: 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--bg) 56%, transparent), transparent);
}

.logo-marquee::after {
  right: 0;
  background: linear-gradient(270deg, color-mix(in srgb, var(--bg) 56%, transparent), transparent);
}

:root[data-theme="light"] .logo-marquee::before {
  background: linear-gradient(90deg, color-mix(in srgb, var(--bg) 48%, transparent), transparent);
}

:root[data-theme="light"] .logo-marquee::after {
  background: linear-gradient(270deg, color-mix(in srgb, var(--bg) 48%, transparent), transparent);
}

.logo-track {
  display: flex;
  width: max-content;
  gap: 20px;
  animation: marquee 58s linear infinite;
}

.logo-track-reverse {
  animation-name: marqueeReverse;
  animation-duration: 66s;
}

.logo-track img {
  width: clamp(220px, 18vw, 286px);
  height: clamp(118px, 9vw, 146px);
  padding: 22px 30px;
  border: 1px solid rgba(7, 16, 20, 0.11);
  border-radius: 8px;
  background: #fff;
  filter: none;
  object-fit: contain;
  opacity: 1;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.18);
}

:root[data-theme="light"] .logo-track img {
  border-color: rgba(7, 16, 20, 0.075);
  background: #fff;
  box-shadow: 0 10px 22px rgba(18, 28, 30, 0.035);
}

:root[data-theme="dark"] .logo-track img {
  filter: none;
  mix-blend-mode: normal;
}

.section-heading {
  display: grid;
  gap: 22px;
  max-width: 860px;
  margin-bottom: 44px;
}

.section-heading.compact {
  max-width: 980px;
}

.section-index {
  display: none;
  width: fit-content;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--cyan);
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.section-heading h2,
.case-copy h2,
.about-panel h2,
.cta h2 {
  font-size: 64px;
}

.section-heading p,
.case-copy p,
.about-panel p,
.cta p {
  max-width: 760px;
  margin: 0;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.65;
}

.service-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  perspective: 1100px;
}

.service-grid::before {
  position: absolute;
  top: 64px;
  right: 10%;
  left: 10%;
  height: 178px;
  z-index: 0;
  border-top: 2px solid color-mix(in srgb, var(--cyan) 42%, transparent);
  border-radius: 50% 50% 0 0;
  background:
    radial-gradient(circle at 12% 0, color-mix(in srgb, var(--cyan) 70%, transparent) 0 2px, transparent 3px),
    radial-gradient(circle at 50% -2px, color-mix(in srgb, var(--yellow) 70%, transparent) 0 2px, transparent 3px),
    radial-gradient(circle at 88% 0, rgba(255, 255, 255, 0.72) 0 2px, transparent 3px);
  opacity: 0.7;
  transform-origin: left center;
  animation: missionRoute 10s ease-in-out infinite;
  content: "";
}

.mission-rocket {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  width: 86px;
  aspect-ratio: 160 / 260;
  pointer-events: none;
  transform: translate3d(var(--mission-x-orbit, calc(50% - 43px)), var(--mission-y-orbit, 72px), 0) rotate(88deg);
  transform-origin: 50% 74%;
  filter:
    drop-shadow(0 0 26px color-mix(in srgb, var(--cyan) 72%, transparent))
    drop-shadow(0 18px 28px rgba(0, 0, 0, 0.28));
  transition: transform 780ms cubic-bezier(0.22, 0.82, 0.21, 1);
}

.service-grid[data-active-planet="start"] .mission-rocket {
  transform: translate3d(var(--mission-x-start, 8%), var(--mission-y-start, 142px), 0) rotate(42deg);
}

.service-grid[data-active-planet="orbit"] .mission-rocket {
  transform: translate3d(var(--mission-x-orbit, calc(50% - 43px)), var(--mission-y-orbit, 72px), 0) rotate(88deg);
}

.service-grid[data-active-planet="landing"] .mission-rocket {
  transform: translate3d(var(--mission-x-landing, calc(100% - 160px)), var(--mission-y-landing, 62px), 0) rotate(0deg) scale(0.96);
}

.service-card,
.quote-card,
.process-steps article,
.about-panel,
.contact-form {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.service-card {
  position: relative;
  isolation: isolate;
  display: grid;
  align-content: start;
  gap: 18px;
  grid-template-rows: 278px 36px 76px auto 1fr auto;
  min-height: 500px;
  padding: 28px;
  overflow: visible;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--cyan) 5%, transparent), transparent 38%),
    linear-gradient(320deg, color-mix(in srgb, var(--yellow) 5%, transparent), transparent 40%),
    var(--surface);
  transition: transform 220ms ease, border-color 220ms ease, background 220ms ease;
}

.service-stage,
.service-card h3 {
  min-height: 1.1em;
}

.service-card h3 {
  min-height: 2.12em;
}

.service-card-featured {
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--cyan) 9%, transparent), transparent 38%),
    linear-gradient(320deg, color-mix(in srgb, var(--yellow) 8%, transparent), transparent 40%),
    var(--surface);
}

.service-card::before {
  position: absolute;
  inset: -40% -55%;
  z-index: -1;
  background: linear-gradient(110deg, transparent 30%, color-mix(in srgb, var(--cyan) 18%, transparent) 48%, color-mix(in srgb, var(--yellow) 16%, transparent) 58%, transparent 72%);
  opacity: 0.48;
  transform: translateX(-36%) rotate(8deg);
  animation: serviceSweep 9s ease-in-out infinite;
  content: "";
}

.service-card:hover {
  border-color: color-mix(in srgb, var(--cyan) 52%, var(--line));
  transform: translateY(-7px) rotateX(1.5deg);
}

.service-card:nth-child(2)::before {
  animation-delay: 1.2s;
}

.service-card:nth-child(3)::before {
  animation-delay: 2.4s;
}

.service-stage {
  align-self: start;
  width: fit-content;
  padding: 8px 11px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--cyan) 36%, var(--line));
  background: color-mix(in srgb, var(--bg-soft) 72%, transparent);
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.planet-orb {
  position: relative;
  display: grid;
  width: clamp(180px, 16vw, 228px);
  aspect-ratio: 1;
  place-items: center;
  justify-self: center;
  align-self: end;
  margin: 0 auto 6px;
  filter:
    drop-shadow(0 26px 48px rgba(0, 0, 0, 0.34))
    drop-shadow(0 0 34px color-mix(in srgb, var(--cyan) 12%, transparent));
  animation: planetFloat 6s ease-in-out infinite;
}

.planet-orb::before {
  position: absolute;
  inset: 10%;
  z-index: -1;
  border: 1px solid color-mix(in srgb, var(--cyan) 22%, transparent);
  border-radius: 50%;
  opacity: 0.52;
  animation: orbitSpin 12s linear infinite;
  content: "";
}

.planet-orb img {
  width: 124%;
  max-width: none;
  height: 124%;
  object-fit: contain;
}

.planet-orbit {
  animation-delay: 0.8s;
}

.planet-orbit img {
  width: 150%;
  height: 132%;
}

.planet-landing {
  animation-delay: 1.6s;
}

.service-card h3,
.tab-panel h3,
.quote-card strong,
.process-steps h3 {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 30px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.05;
}

.service-card p,
.tab-panel p,
.quote-card p,
.process-steps p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.service-card ul {
  display: grid;
  gap: 10px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.service-card li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
}

.service-card li::before {
  width: 8px;
  height: 8px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--gradient);
  content: "";
}

.service-more {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-bottom: 3px;
  background-image: linear-gradient(90deg, var(--cyan), color-mix(in srgb, var(--yellow) 82%, var(--cyan)));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 2px;
  color: var(--cyan);
  font-size: 14px;
  font-weight: 900;
}

.service-more::after {
  content: "→";
}

.format-route {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: 22px;
  padding-left: 72px;
}

.format-route::before {
  position: absolute;
  top: 18px;
  bottom: 18px;
  left: 28px;
  z-index: -1;
  width: 3px;
  border-radius: 999px;
  background:
    linear-gradient(180deg, transparent, var(--cyan) 14%, color-mix(in srgb, var(--yellow) 72%, var(--cyan)) 50%, var(--cyan) 86%, transparent),
    repeating-linear-gradient(180deg, transparent 0 44px, rgba(255, 255, 255, 0.38) 45px 47px);
  box-shadow:
    0 0 24px color-mix(in srgb, var(--cyan) 24%, transparent),
    0 0 42px color-mix(in srgb, var(--yellow) 10%, transparent);
  opacity: 0.88;
  animation: formatLiftPulse 4.8s ease-in-out infinite alternate;
  content: "";
}

.format-elevator {
  position: absolute;
  top: 28px;
  bottom: 28px;
  left: 14px;
  z-index: 2;
  width: 31px;
  pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--cyan) 34%, transparent);
  border-top: 0;
  border-bottom: 0;
  background:
    linear-gradient(180deg, transparent, color-mix(in srgb, var(--cyan) 24%, transparent), color-mix(in srgb, var(--yellow) 16%, transparent), transparent),
    repeating-linear-gradient(180deg, transparent 0 64px, color-mix(in srgb, var(--cyan) 18%, transparent) 65px 67px);
  box-shadow:
    inset 0 0 24px color-mix(in srgb, var(--cyan) 7%, transparent),
    0 0 28px color-mix(in srgb, var(--cyan) 14%, transparent);
}

.format-elevator::before {
  position: sticky;
  top: 26vh;
  display: block;
  width: 42px;
  height: 70px;
  margin-left: -6px;
  background: url("assets/graphics/rocket.svg") center / contain no-repeat;
  filter:
    drop-shadow(0 0 18px color-mix(in srgb, var(--cyan) 50%, transparent))
    drop-shadow(0 14px 18px rgba(0, 0, 0, 0.18));
  transform: rotate(0deg);
  animation: formatElevatorFloat 2.4s ease-in-out infinite alternate;
  content: "";
}

.format-route::after {
  position: absolute;
  right: -8%;
  bottom: 8%;
  z-index: -1;
  width: min(40vw, 470px);
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--cyan) 18%, transparent);
  border-radius: 50%;
  background:
    radial-gradient(circle at 52% 48%, color-mix(in srgb, var(--cyan) 12%, transparent), transparent 42%),
    repeating-radial-gradient(circle at 50% 50%, transparent 0 48px, color-mix(in srgb, var(--yellow) 5%, transparent) 49px 51px);
  opacity: 0.5;
  transform: rotate(18deg) scaleX(1.55);
  animation: formatOrbitDrift 17s ease-in-out infinite alternate-reverse;
  content: "";
}

.format-card {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(190px, 0.72fr) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 54px);
  align-items: center;
  min-height: 270px;
  padding: clamp(20px, 3.8vw, 42px);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--cyan) 8%, transparent), transparent 40%),
    linear-gradient(320deg, color-mix(in srgb, var(--yellow) 7%, transparent), transparent 46%),
    var(--surface);
  box-shadow: var(--shadow);
}

.format-card::after {
  position: absolute;
  top: 50%;
  left: -63px;
  z-index: 2;
  width: 24px;
  height: 24px;
  border: 3px solid #071014;
  border-radius: 50%;
  background: var(--gradient);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--cyan) 52%, transparent),
    0 0 26px color-mix(in srgb, var(--cyan) 22%, transparent);
  transform: translateY(-50%);
  content: "";
}

.format-card::before {
  position: absolute;
  inset: -36% -28%;
  z-index: -1;
  background:
    linear-gradient(115deg, transparent 28%, color-mix(in srgb, var(--cyan) 13%, transparent) 45%, color-mix(in srgb, var(--yellow) 11%, transparent) 56%, transparent 72%),
    repeating-linear-gradient(90deg, transparent 0 36px, color-mix(in srgb, var(--cyan) 6%, transparent) 37px 38px);
  opacity: 0.48;
  transform: translateX(-18%) rotate(4deg);
  animation: serviceSweep 11s ease-in-out infinite;
  content: "";
}

.format-card:nth-child(2)::before {
  animation-delay: 1.4s;
}

.format-card:nth-child(3)::before {
  animation-delay: 2.8s;
}

.format-card:nth-child(even) {
  grid-template-columns: minmax(0, 1fr) minmax(190px, 0.72fr);
}

.format-card:nth-child(even) .format-media {
  order: 2;
}

.format-copy {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.format-copy > span {
  width: fit-content;
  padding: 8px 11px;
  border: 1px solid color-mix(in srgb, var(--cyan) 36%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg-soft) 72%, transparent);
  color: var(--cyan);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.format-copy h3 {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(30px, 3.8vw, 50px);
  font-weight: 950;
  line-height: 0.96;
  overflow-wrap: anywhere;
}

.format-copy p {
  max-width: 680px;
  margin: 0;
  color: var(--muted);
  font-size: clamp(16px, 1.35vw, 18px);
  font-weight: 740;
  line-height: 1.65;
}

.format-media {
  display: grid;
  grid-template-columns: 0.82fr 1fr 0.76fr;
  align-items: end;
  gap: 10px;
  min-height: 210px;
}

.format-media-video,
.format-media-reels {
  position: relative;
  display: grid;
  min-height: clamp(230px, 24vw, 310px);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(120deg, color-mix(in srgb, var(--cyan) 9%, transparent), transparent 42%),
    linear-gradient(320deg, color-mix(in srgb, var(--yellow) 8%, transparent), transparent 50%),
    color-mix(in srgb, var(--bg-soft) 84%, transparent);
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.22);
}

.format-media-video {
  grid-template-columns: 1fr;
  place-items: stretch;
  aspect-ratio: 16 / 9;
}

.format-media-video video,
.reels-video-slot video {
  width: 100%;
  height: 100%;
  min-height: 100%;
  object-fit: cover;
  background: #050708;
}

.format-video-placeholder {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 8px;
  padding: 18px;
  background:
    radial-gradient(circle at 50% 36%, color-mix(in srgb, var(--cyan) 22%, transparent), transparent 42%),
    linear-gradient(145deg, color-mix(in srgb, var(--cyan) 18%, transparent), color-mix(in srgb, var(--yellow) 12%, transparent)),
    color-mix(in srgb, var(--bg) 80%, transparent);
  color: var(--text);
  text-align: center;
  pointer-events: none;
}

.format-video-placeholder strong {
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1;
}

.format-video-placeholder span {
  max-width: 210px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.35;
}

.format-media-video.is-video-loaded .format-video-placeholder,
.reels-video-slot.is-video-loaded .format-video-placeholder {
  opacity: 0;
  transition: opacity 220ms ease;
}

.format-media > span {
  position: relative;
  min-height: 174px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    radial-gradient(circle at 28% 20%, rgba(255, 255, 255, 0.86) 0 4%, transparent 5%),
    linear-gradient(120deg, rgba(255, 255, 255, 0.12), transparent 32%),
    linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.5)),
    var(--gradient);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.22);
  animation: mediaFloat 5.8s ease-in-out infinite;
}

.format-media > span:nth-child(2) {
  min-height: 230px;
  animation-delay: 0.65s;
}

.format-media > span:nth-child(3) {
  animation-delay: 1.3s;
}

.format-media > span::after {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 40px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 -11px 0 rgba(255, 255, 255, 0.36);
  content: "";
}

.format-media-landscape {
  grid-template-columns: 1fr;
  align-content: center;
}

.format-media-landscape > span {
  min-height: 118px;
  aspect-ratio: 16 / 8;
}

.format-media-landscape > span:nth-child(2) {
  min-height: 118px;
  width: 82%;
  justify-self: end;
}

.format-media-reels > span {
  background:
    radial-gradient(circle at 34% 30%, #fff 0 7%, transparent 8%),
    linear-gradient(135deg, #0cc0df, #77d79d 48%, #ffde59);
}

.format-media-reels {
  grid-template-columns: minmax(100px, 0.86fr) minmax(120px, 0.9fr) minmax(100px, 0.86fr);
  align-items: center;
  gap: clamp(10px, 1.8vw, 18px);
  min-height: clamp(240px, 24vw, 320px);
  padding: clamp(12px, 2vw, 20px);
}

.format-media-reels img,
.reels-video-slot {
  width: 100%;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg-soft) 78%, transparent);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.2);
}

.format-media-reels img {
  height: clamp(170px, 18vw, 246px);
  padding: 8px;
  object-fit: contain;
  animation: mediaFloat 5.8s ease-in-out infinite;
}

.format-media-reels img:nth-child(3) {
  animation-delay: 0.8s;
}

.reels-video-slot {
  position: relative;
  height: clamp(210px, 21vw, 286px);
  animation: mediaFloat 6.4s ease-in-out infinite 0.35s;
}

.media-tabs {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--cyan) 12%, transparent), transparent 38%),
    linear-gradient(320deg, color-mix(in srgb, var(--yellow) 10%, transparent), transparent 42%),
    var(--surface);
  box-shadow: var(--shadow);
}

.media-tabs::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent),
    linear-gradient(180deg, transparent 0 70%, color-mix(in srgb, var(--cyan) 8%, transparent));
  opacity: 0.56;
  transform: translateX(-45%);
  animation: tabLight 8s ease-in-out infinite;
  content: "";
}

.tab-buttons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 10px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 36%, transparent);
}

.tab-buttons button {
  position: relative;
  min-height: 58px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg-soft) 68%, transparent);
  color: var(--muted);
  cursor: pointer;
  font-weight: 900;
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease, transform 180ms ease;
}

.tab-buttons button::after {
  position: absolute;
  right: 14px;
  bottom: 9px;
  left: 14px;
  height: 3px;
  border-radius: 999px;
  background: var(--gradient);
  opacity: 0;
  transform: scaleX(0.26);
  transition: opacity 180ms ease, transform 180ms ease;
  content: "";
}

.tab-buttons button:hover {
  border-color: color-mix(in srgb, var(--cyan) 38%, var(--line));
  color: var(--text);
  transform: translateY(-1px);
}

.tab-buttons button.active {
  border-color: color-mix(in srgb, var(--cyan) 42%, var(--yellow));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--cyan) 10%, transparent), color-mix(in srgb, var(--yellow) 8%, transparent)),
    color-mix(in srgb, var(--bg-soft) 88%, transparent);
  color: var(--text);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--yellow) 10%, transparent);
}

.tab-buttons button.active::after {
  opacity: 1;
  transform: scaleX(1);
}

.tab-stage {
  position: relative;
  min-height: 470px;
}

.tab-panel {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  align-items: center;
  gap: 42px;
  padding: clamp(24px, 5vw, 58px);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 220ms ease, transform 220ms ease;
  pointer-events: none;
}

.tab-panel.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.tab-panel h3 {
  max-width: 520px;
  margin-bottom: 18px;
  font-size: 52px;
}

.mini-video-grid {
  display: grid;
  grid-template-columns: 0.8fr 1fr 0.8fr;
  align-items: end;
  gap: 14px;
  min-height: 320px;
}

.mini-video-grid span {
  position: relative;
  display: block;
  min-height: 260px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    radial-gradient(circle at 26% 22%, rgba(255, 255, 255, 0.75) 0 4%, transparent 5%),
    linear-gradient(120deg, rgba(255, 255, 255, 0.08), transparent 32%),
    linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.58)),
    var(--gradient);
  box-shadow: 0 22px 46px rgba(0, 0, 0, 0.22);
  overflow: hidden;
  animation: mediaFloat 5.8s ease-in-out infinite;
}

.mini-video-grid span::after {
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 42px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.66);
  box-shadow: 0 -11px 0 rgba(255, 255, 255, 0.36);
  content: "";
}

.mini-video-grid span:nth-child(2) {
  min-height: 320px;
  animation-delay: 0.7s;
}

.mini-video-grid span:nth-child(3) {
  animation-delay: 1.4s;
}

.mini-video-grid.landscape span {
  min-height: 190px;
  aspect-ratio: 16 / 10;
}

.mini-video-grid.animation span {
  background:
    radial-gradient(circle at 34% 30%, #fff 0 7%, transparent 8%),
    linear-gradient(135deg, #0cc0df, #ffde59);
}

.mini-video-grid.product span {
  background:
    linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.58)),
    linear-gradient(135deg, #101112, #c9eef3 42%, #ffde59);
}

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.testimonials {
  position: relative;
  isolation: isolate;
}

.testimonials::before {
  position: absolute;
  inset: 8% -8% auto auto;
  z-index: -1;
  width: min(42vw, 520px);
  height: 280px;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 24%, rgba(255, 255, 255, 0.5) 0 1px, transparent 2px),
    radial-gradient(circle at 52% 42%, rgba(255, 222, 89, 0.55) 0 1px, transparent 2px),
    radial-gradient(circle at 84% 18%, rgba(12, 192, 223, 0.6) 0 1px, transparent 2px),
    linear-gradient(120deg, transparent 22%, color-mix(in srgb, var(--cyan) 12%, transparent), transparent 68%);
  opacity: 0.72;
  filter: blur(0.2px);
  content: "";
}

.reference-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: -22px 0 32px;
}

.reference-wall {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin: -16px 0 34px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(120deg, color-mix(in srgb, var(--cyan) 6%, transparent), transparent 38%),
    color-mix(in srgb, var(--surface) 84%, transparent);
}

.reference-chips span {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  font-weight: 850;
  text-align: center;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease, background 180ms ease;
}

.reference-chips span:hover {
  border-color: color-mix(in srgb, var(--cyan) 48%, var(--yellow));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--cyan) 10%, transparent), color-mix(in srgb, var(--yellow) 8%, transparent)),
    var(--surface);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--cyan) 12%, transparent);
  transform: translateY(-2px);
}

.reference-wall span {
  min-height: 48px;
  background: color-mix(in srgb, var(--bg-soft) 70%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line) 72%, transparent);
}

.quote-card {
  display: block;
  min-height: 292px;
  padding: 0;
  overflow: hidden;
  transition: border-color 180ms ease, transform 180ms ease, background 180ms ease;
}

.quote-card[open] {
  border-color: color-mix(in srgb, var(--cyan) 48%, var(--line));
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--cyan) 8%, transparent), transparent 44%),
    var(--surface);
}

.quote-card.wide {
  grid-column: span 2;
}

.quote-card summary {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px 14px;
  min-height: 292px;
  padding: 24px;
  cursor: pointer;
  list-style: none;
}

.quote-card[open] summary {
  min-height: auto;
  padding-bottom: 14px;
}

.quote-card summary::-webkit-details-marker {
  display: none;
}

.stars {
  grid-column: 1 / -1;
  width: fit-content;
  color: var(--yellow);
  font-size: 18px;
  letter-spacing: 0;
}

.quote-preview {
  grid-column: 1 / -1;
}

.quote-card[open] .quote-preview {
  display: none;
}

.quote-meta {
  display: grid;
  gap: 3px;
  margin-top: auto;
}

.quote-meta strong,
.quote-card strong {
  font-size: 22px;
}

.quote-meta strong {
  margin-top: 0;
}

.quote-card small,
.quote-card span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.quote-toggle {
  display: grid;
  align-self: end;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface-strong);
  color: var(--text);
  transition: transform 180ms ease, border-color 180ms ease;
}

.quote-toggle::after {
  color: var(--cyan);
  font-size: 22px;
  line-height: 1;
  content: "+";
}

.quote-card[open] .quote-toggle::after {
  color: var(--yellow);
  content: "-";
}

.quote-full {
  padding: 0 24px 26px;
}

.quote-card[open] .quote-full {
  color: var(--text);
}

.process {
  position: relative;
}

.process-flow {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  gap: 12px;
  margin: -10px 0 28px;
}

.process-flow-line {
  position: absolute;
  right: 5%;
  left: 5%;
  --rocket-progress: 25%;
  height: 3px;
  overflow: visible;
  border-radius: 999px;
  background: var(--surface-strong);
}

.process-flow-line i {
  display: block;
  width: min(100%, calc(var(--rocket-progress, 25%) + 34px));
  height: 100%;
  border-radius: inherit;
  background: var(--gradient);
  transition: width 360ms cubic-bezier(0.22, 0.7, 0.16, 1);
}

.process-flow-line::before {
  position: absolute;
  top: 50%;
  left: calc(var(--rocket-progress, 8%) - 62px);
  width: 54px;
  height: 24px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 14% 50%, var(--yellow) 0 3px, transparent 4px),
    radial-gradient(circle at 38% 34%, rgba(255, 255, 255, 0.86) 0 2px, transparent 3px),
    radial-gradient(circle at 55% 58%, var(--cyan) 0 2px, transparent 3px),
    radial-gradient(ellipse at 82% 50%, color-mix(in srgb, var(--cyan) 34%, transparent), transparent 62%);
  filter: blur(0.2px);
  transform: translateY(-50%);
  transition: left 760ms cubic-bezier(0.22, 0.7, 0.16, 1), opacity 180ms ease;
  opacity: 0.78;
  content: "";
}

.process-flow-line::after {
  position: absolute;
  top: 50%;
  left: calc(var(--rocket-progress, 8%) - 22px);
  z-index: 2;
  display: block;
  width: 44px;
  height: 72px;
  background: url("assets/graphics/rocket.svg") center / contain no-repeat;
  filter:
    drop-shadow(0 0 18px color-mix(in srgb, var(--cyan) 52%, transparent))
    drop-shadow(0 8px 12px rgba(0, 0, 0, 0.18));
  transform: translateY(-50%) rotate(90deg);
  transform-origin: 50% 50%;
  transition: left 760ms cubic-bezier(0.22, 0.7, 0.16, 1), transform 760ms cubic-bezier(0.22, 0.7, 0.16, 1);
  content: "";
}

.process-flow-dot {
  position: relative;
  z-index: 1;
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--cyan) 42%, var(--line));
  border-radius: 50%;
  background: var(--bg-soft);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  justify-self: center;
  box-shadow: 0 0 34px color-mix(in srgb, var(--cyan) 14%, transparent);
  transition: background 220ms ease, border-color 220ms ease, color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}

.process[data-active="1"] .process-flow-line i {
  width: min(100%, calc(var(--rocket-progress, 25%) + 34px));
}

.process:has([data-process-step="1"]:is(:hover, :focus, :focus-visible)) .process-flow-line i,
.process[data-active="1"] .process-flow-line i {
  width: min(100%, calc(var(--rocket-progress, 25%) + 34px));
}

.process[data-active="2"] .process-flow-line i {
  width: min(100%, calc(var(--rocket-progress, 56%) + 34px));
}

.process:has([data-process-step="2"]:is(:hover, :focus, :focus-visible)) .process-flow-line i,
.process[data-active="2"] .process-flow-line i {
  width: min(100%, calc(var(--rocket-progress, 56%) + 34px));
}

.process[data-active="3"] .process-flow-line i {
  width: min(100%, calc(var(--rocket-progress, 92%) + 34px));
}

.process:has([data-process-step="3"]:is(:hover, :focus, :focus-visible)) .process-flow-line i,
.process[data-active="3"] .process-flow-line i {
  width: min(100%, calc(var(--rocket-progress, 92%) + 34px));
}

.process[data-active="1"] .process-flow-line,
.process:has([data-process-step="1"]:is(:hover, :focus, :focus-visible)) .process-flow-line {
  --rocket-progress: 25%;
}

.process[data-active="2"] .process-flow-line,
.process:has([data-process-step="2"]:is(:hover, :focus, :focus-visible)) .process-flow-line {
  --rocket-progress: 56%;
}

.process[data-active="3"] .process-flow-line,
.process:has([data-process-step="3"]:is(:hover, :focus, :focus-visible)) .process-flow-line {
  --rocket-progress: 92%;
}

.process[data-active="2"] .process-flow-line::after,
.process:has([data-process-step="2"]:is(:hover, :focus, :focus-visible)) .process-flow-line::after {
  transform: translateY(-50%) rotate(90deg);
}

.process[data-active="3"] .process-flow-line::after,
.process:has([data-process-step="3"]:is(:hover, :focus, :focus-visible)) .process-flow-line::after {
  transform: translateY(-50%) rotate(90deg);
}

.process[data-active="1"] .process-flow-dot:nth-child(2),
.process[data-active="2"] .process-flow-dot:nth-child(2),
.process[data-active="2"] .process-flow-dot:nth-child(3),
.process[data-active="3"] .process-flow-dot:nth-child(2),
.process[data-active="3"] .process-flow-dot:nth-child(3),
.process[data-active="3"] .process-flow-dot:nth-child(4) {
  border-color: transparent;
  background: var(--gradient);
  color: #071014;
  box-shadow: 0 0 34px color-mix(in srgb, var(--cyan) 24%, transparent);
  transform: translateY(-2px);
}

.process:has([data-process-step="1"]:is(:hover, :focus, :focus-visible)) .process-flow-dot:nth-child(2),
.process:has([data-process-step="2"]:is(:hover, :focus, :focus-visible)) .process-flow-dot:nth-child(2),
.process:has([data-process-step="2"]:is(:hover, :focus, :focus-visible)) .process-flow-dot:nth-child(3),
.process:has([data-process-step="3"]:is(:hover, :focus, :focus-visible)) .process-flow-dot:nth-child(2),
.process:has([data-process-step="3"]:is(:hover, :focus, :focus-visible)) .process-flow-dot:nth-child(3),
.process:has([data-process-step="3"]:is(:hover, :focus, :focus-visible)) .process-flow-dot:nth-child(4) {
  border-color: transparent;
  background: var(--gradient);
  color: #071014;
  box-shadow: 0 0 34px color-mix(in srgb, var(--cyan) 24%, transparent);
  transform: translateY(-2px);
}

.process-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.process-steps article {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: 18px;
  min-height: 260px;
  padding: 24px;
  overflow: hidden;
  transition: transform 200ms ease, border-color 200ms ease, background 200ms ease;
}

.process-steps article::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--cyan) 10%, transparent), transparent 42%),
    linear-gradient(320deg, color-mix(in srgb, var(--yellow) 8%, transparent), transparent 38%);
  opacity: 0;
  transition: opacity 200ms ease;
  content: "";
}

.process-steps article::after {
  display: none;
  content: none;
}

.process-steps article:hover {
  border-color: color-mix(in srgb, var(--yellow) 50%, var(--line));
  transform: translateY(-6px);
}

.process-steps article:hover::before {
  opacity: 1;
}

.process-steps span {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--cyan) 48%, var(--line));
  border-radius: 50%;
  background: color-mix(in srgb, var(--bg-soft) 76%, transparent);
  color: var(--cyan);
  font-weight: 900;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}

.process-steps article:hover span {
  border-color: transparent;
  background: var(--gradient);
  color: #071014;
}

.process-steps a {
  padding-bottom: 2px;
  background-image: linear-gradient(90deg, var(--cyan), color-mix(in srgb, var(--yellow) 80%, var(--cyan)));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 2px;
  color: var(--cyan);
  font-weight: 900;
  text-decoration: none;
}

.about {
  padding-top: 0;
}

.about-panel {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(280px, 0.72fr);
  grid-template-areas:
    "heading portrait"
    "copy portrait";
  align-items: center;
  gap: clamp(22px, 4vw, 42px);
  min-height: 0;
  overflow: hidden;
  padding: clamp(28px, 6vw, 64px);
  background:
    radial-gradient(circle at 24% 20%, rgba(255, 255, 255, 0.42) 0 1px, transparent 2px),
    radial-gradient(circle at 70% 72%, color-mix(in srgb, var(--cyan) 26%, transparent), transparent 26%),
    radial-gradient(circle at 36% 88%, color-mix(in srgb, var(--yellow) 14%, transparent), transparent 28%),
    linear-gradient(135deg, color-mix(in srgb, var(--yellow) 8%, transparent), transparent 38%),
    var(--surface);
}

.about-panel::before {
  position: absolute;
  inset: auto -8% -34% 24%;
  z-index: -1;
  height: 58%;
  border: 1px solid color-mix(in srgb, var(--cyan) 28%, transparent);
  border-radius: 50%;
  opacity: 0.5;
  content: "";
}

.about-panel::after {
  position: absolute;
  inset: 8% 4% auto auto;
  z-index: -1;
  width: min(36vw, 420px);
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--yellow) 18%, transparent);
  border-radius: 50%;
  opacity: 0.48;
  transform: rotate(-18deg) scaleX(1.28);
  animation: orbitSpin 28s linear infinite;
  content: "";
}

.about-heading {
  grid-area: heading;
  display: grid;
  gap: 20px;
  align-self: start;
  min-width: 0;
}

.about-panel h2 {
  max-width: 620px;
}

.about-copy {
  grid-area: copy;
  display: grid;
  gap: 16px;
  max-width: 650px;
}

.about-copy p,
.about-copy strong {
  margin: 0;
}

.about-panel strong {
  color: var(--text);
  font-weight: 900;
}

.portrait-placeholder {
  position: relative;
  display: grid;
  min-height: 430px;
  place-items: end center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--cyan) 26%, transparent), transparent 34%),
    linear-gradient(150deg, color-mix(in srgb, var(--bg-soft) 82%, transparent), color-mix(in srgb, var(--yellow) 10%, var(--bg-soft)));
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.24);
}

.portrait-placeholder::before {
  position: absolute;
  bottom: 70px;
  width: 54%;
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--cyan) 42%, var(--line));
  border-radius: 50%;
  background: color-mix(in srgb, var(--surface-strong) 82%, transparent);
  content: "";
}

.portrait-placeholder::after {
  position: absolute;
  bottom: -86px;
  width: 82%;
  height: 210px;
  border-radius: 50% 50% 0 0;
  background: var(--gradient);
  opacity: 0.86;
  content: "";
}

.portrait-placeholder span {
  position: relative;
  z-index: 1;
  margin-bottom: 28px;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}

.portrait-image {
  position: relative;
  grid-area: portrait;
  width: min(100%, 310px);
  min-height: auto;
  aspect-ratio: 1;
  place-items: center;
  justify-self: center;
  padding: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--cyan) 32%, var(--line));
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 44%, color-mix(in srgb, var(--cyan) 20%, transparent), transparent 38%),
    radial-gradient(circle at 54% 68%, color-mix(in srgb, var(--yellow) 12%, transparent), transparent 48%),
    linear-gradient(145deg, color-mix(in srgb, var(--bg-soft) 88%, transparent), color-mix(in srgb, var(--cyan) 7%, var(--bg)));
  box-shadow:
    0 0 0 12px color-mix(in srgb, var(--cyan) 5%, transparent),
    0 30px 80px rgba(0, 0, 0, 0.34);
  animation: portraitFloat 6s ease-in-out infinite alternate;
  transition: transform 240ms ease, box-shadow 240ms ease;
}

.portrait-image:hover {
  box-shadow:
    0 0 0 14px color-mix(in srgb, var(--cyan) 8%, transparent),
    0 34px 88px rgba(0, 0, 0, 0.38);
}

.portrait-image::before {
  position: absolute;
  inset: 4%;
  z-index: 1;
  border: 1px solid color-mix(in srgb, var(--yellow) 20%, transparent);
  border-radius: 50%;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.18), transparent 42%);
  pointer-events: none;
  content: "";
}

.portrait-image::after {
  position: absolute;
  inset: 8% 3% auto;
  z-index: 2;
  height: 72%;
  border: 1px solid color-mix(in srgb, var(--cyan) 24%, transparent);
  border-radius: 50%;
  background: transparent;
  opacity: 0.42;
  transform: rotate(-18deg) scaleX(1.28);
  content: "";
}

.portrait-image img {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: 305%;
  height: 305%;
  min-height: inherit;
  object-fit: cover;
  object-position: 50% 50%;
  border-radius: 50%;
  clip-path: none;
  transform: translate(-50%, -51%) scale(1);
  filter: drop-shadow(0 26px 54px rgba(0, 0, 0, 0.36));
}

.cta {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 4vw, 42px);
  align-items: center;
}

.cta.section-pad {
  width: 100%;
  padding-right: max(20px, calc((100vw - 1180px) / 2));
  padding-bottom: clamp(18px, 2.5vw, 34px);
  padding-left: max(20px, calc((100vw - 1180px) / 2));
}

.cta::before {
  position: absolute;
  inset: -14% 0 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 16% 22%, rgba(255, 255, 255, 0.52) 0 1px, transparent 2px),
    radial-gradient(circle at 74% 28%, rgba(255, 222, 89, 0.48) 0 1px, transparent 2px),
    radial-gradient(circle at 88% 72%, rgba(12, 192, 223, 0.58) 0 1px, transparent 2px),
    radial-gradient(ellipse at 23% 78%, color-mix(in srgb, var(--cyan) 18%, transparent), transparent 38%),
    radial-gradient(ellipse at 82% 22%, color-mix(in srgb, var(--yellow) 13%, transparent), transparent 34%),
    radial-gradient(ellipse at 78% 82%, color-mix(in srgb, var(--cyan) 16%, var(--yellow) 8%), transparent 35%),
    linear-gradient(180deg, transparent, color-mix(in srgb, var(--bg-soft) 82%, transparent));
  opacity: 0.88;
  content: "";
}

.cta::after {
  position: absolute;
  right: 4%;
  bottom: 8%;
  z-index: -1;
  width: min(54vw, 620px);
  height: min(30vw, 320px);
  pointer-events: none;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--cyan) 12%, transparent) 1px, transparent 1px),
    linear-gradient(0deg, color-mix(in srgb, var(--yellow) 9%, transparent) 1px, transparent 1px),
    linear-gradient(115deg, transparent 22%, color-mix(in srgb, var(--cyan) 14%, transparent), transparent 70%);
  background-size: 54px 54px, 54px 54px, 100% 100%;
  opacity: 0.48;
  transform: rotate(-8deg);
  animation: geometricDrift 13s ease-in-out infinite alternate;
  content: "";
}

.cta-intro {
  display: grid;
  max-width: 900px;
  gap: 22px;
  margin-inline: auto;
  text-align: center;
}

.form-intro {
  margin-top: clamp(24px, 5vw, 54px);
}

.mission-control {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  width: min(100%, 900px);
  max-height: 0;
  margin: -24px auto 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(14px);
  transition: max-height 520ms ease, opacity 320ms ease, transform 320ms ease, margin 320ms ease;
}

.mission-control.is-visible {
  max-height: 900px;
  margin: 0 auto;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.mission-panel {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: 14px;
  min-height: 0;
  padding: clamp(20px, 2.6vw, 30px);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.mission-panel::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 20% 18%, rgba(255, 255, 255, 0.45) 0 1px, transparent 2px),
    radial-gradient(circle at 82% 78%, color-mix(in srgb, var(--cyan) 18%, transparent), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 62%);
  content: "";
}

.mission-panel > span,
.game-intro > span {
  width: fit-content;
  color: var(--cyan);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.mission-panel h3,
.game-intro h3 {
  margin: 0;
  font-size: clamp(26px, 2.6vw, 36px);
  line-height: 1;
}

.mission-panel ul {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mission-panel li {
  position: relative;
  padding-left: 30px;
  color: var(--muted);
  font-weight: 760;
}

.mission-panel li strong {
  color: var(--text);
}

.mission-panel li::before {
  position: absolute;
  top: 0.1em;
  left: 0;
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1;
  content: "x";
}

.mission-panel-primary {
  border-color: color-mix(in srgb, var(--cyan) 38%, var(--yellow));
  background:
    radial-gradient(circle at 80% 78%, color-mix(in srgb, var(--yellow) 16%, transparent), transparent 30%),
    radial-gradient(circle at 12% 12%, color-mix(in srgb, var(--cyan) 14%, transparent), transparent 28%),
    var(--surface);
  box-shadow:
    var(--shadow),
    0 0 48px color-mix(in srgb, var(--cyan) 10%, transparent);
}

.mission-panel-primary li::before {
  border-color: color-mix(in srgb, var(--cyan) 38%, var(--yellow));
  color: var(--cyan);
  content: "✓";
}

.launch-game {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: 16px;
  width: min(100%, 780px);
  margin: 4px auto 26px;
  padding: clamp(16px, 3vw, 24px);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    radial-gradient(circle at 18% 20%, rgba(255, 255, 255, 0.38) 0 1px, transparent 2px),
    radial-gradient(circle at 82% 30%, color-mix(in srgb, var(--cyan) 14%, transparent), transparent 30%),
    linear-gradient(135deg, color-mix(in srgb, var(--cyan) 8%, transparent), transparent 40%),
    color-mix(in srgb, var(--surface) 92%, transparent);
  box-shadow: var(--shadow);
}

.launch-game::before {
  position: absolute;
  inset: auto -10% -18% 32%;
  z-index: -1;
  height: 210px;
  background:
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--cyan) 13%, transparent) 0 1px, transparent 1px 42px),
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--yellow) 8%, transparent) 0 1px, transparent 1px 42px);
  opacity: 0.36;
  transform: rotate(-8deg);
  animation: geometricDrift 12s ease-in-out infinite alternate-reverse;
  content: "";
}

.game-intro {
  display: grid;
  max-width: 680px;
  gap: 10px;
}

.game-intro p {
  margin: 0;
  color: var(--muted);
  font-weight: 760;
}

.launch-stage {
  position: relative;
  --rocket-x: calc(50% - 34px);
  --rocket-y: 224px;
  min-height: 360px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    radial-gradient(circle at 12% 24%, rgba(255, 255, 255, 0.72) 0 1px, transparent 2px),
    radial-gradient(circle at 48% 18%, rgba(255, 222, 89, 0.58) 0 1px, transparent 2px),
    radial-gradient(circle at 82% 68%, rgba(12, 192, 223, 0.66) 0 1px, transparent 2px),
    radial-gradient(circle at 72% 10%, color-mix(in srgb, var(--cyan) 16%, transparent), transparent 30%),
    radial-gradient(ellipse at 24% 94%, color-mix(in srgb, var(--yellow) 14%, transparent), transparent 42%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 96%, #000), color-mix(in srgb, var(--cyan) 8%, var(--bg-soft)));
  box-shadow: var(--shadow);
  touch-action: none;
}

.launch-level {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 5;
  width: fit-content;
  padding: 8px 11px;
  border: 1px solid color-mix(in srgb, var(--cyan) 40%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-soft) 78%, transparent);
  color: var(--cyan);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
  box-shadow: 0 0 22px color-mix(in srgb, var(--cyan) 12%, transparent);
}

.launch-game[data-level="content"] .launch-stage {
  background:
    radial-gradient(circle at 14% 24%, rgba(255, 255, 255, 0.72) 0 1px, transparent 2px),
    radial-gradient(circle at 42% 18%, rgba(255, 222, 89, 0.58) 0 1px, transparent 2px),
    radial-gradient(circle at 82% 68%, rgba(12, 192, 223, 0.66) 0 1px, transparent 2px),
    radial-gradient(ellipse at 20% 92%, color-mix(in srgb, var(--yellow) 16%, transparent), transparent 42%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 96%, #000), color-mix(in srgb, var(--cyan) 8%, var(--bg-soft)));
}

.launch-game[data-level="orbit"] .launch-stage {
  background:
    radial-gradient(circle at 28% 24%, color-mix(in srgb, var(--cyan) 18%, transparent), transparent 28%),
    radial-gradient(circle at 60% 38%, color-mix(in srgb, var(--yellow) 16%, transparent), transparent 32%),
    repeating-radial-gradient(ellipse at 52% 42%, transparent 0 48px, color-mix(in srgb, var(--cyan) 12%, transparent) 49px 51px),
    linear-gradient(180deg, #030707, color-mix(in srgb, var(--cyan) 12%, var(--bg-soft)));
}

.launch-game[data-level="landing"] .launch-stage {
  background:
    radial-gradient(ellipse at 48% 102%, color-mix(in srgb, var(--yellow) 24%, transparent), transparent 44%),
    radial-gradient(ellipse at 72% 42%, color-mix(in srgb, #77d79d 20%, transparent), transparent 34%),
    linear-gradient(120deg, color-mix(in srgb, var(--cyan) 10%, transparent), transparent 42%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 94%, #000), color-mix(in srgb, #77d79d 8%, var(--bg-soft)));
}

.launch-stage::before {
  position: absolute;
  inset: -80% 0 0;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.46) 0 1px, transparent 2px),
    radial-gradient(circle, color-mix(in srgb, var(--cyan) 40%, transparent) 0 1px, transparent 2px);
  background-position: 12px 0, 90px 40px;
  background-size: 120px 120px, 170px 170px;
  opacity: 0.58;
  animation: starFall 6s linear infinite;
  content: "";
}

.launch-stage::after {
  position: absolute;
  right: -12%;
  bottom: -18%;
  width: 54%;
  height: 42%;
  background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--cyan) 10%, transparent), transparent 48%);
  background-image:
    linear-gradient(90deg, color-mix(in srgb, var(--cyan) 12%, transparent) 1px, transparent 1px),
    linear-gradient(0deg, color-mix(in srgb, var(--yellow) 8%, transparent) 1px, transparent 1px);
  background-size: 38px 38px;
  opacity: 0.42;
  transform: rotate(-11deg);
  animation: geometricDrift 10s ease-in-out infinite alternate;
  content: "";
}

.launch-tutorial {
  position: absolute;
  inset: 50% auto auto 50%;
  z-index: 6;
  display: grid;
  width: min(88%, 430px);
  gap: 8px;
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--cyan) 34%, var(--yellow));
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--cyan) 12%, transparent), color-mix(in srgb, var(--yellow) 8%, transparent)),
    color-mix(in srgb, var(--bg-soft) 92%, transparent);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.34);
  text-align: center;
  transform: translate(-50%, -50%);
  transition: opacity 180ms ease, transform 180ms ease;
}

.launch-tutorial strong {
  font-size: 20px;
}

.launch-tutorial span,
.launch-tutorial small {
  color: var(--muted);
  font-weight: 800;
}

.launch-game.played .launch-tutorial {
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -46%) scale(0.96);
}

.launch-stage img {
  position: absolute;
  left: var(--rocket-x);
  top: var(--rocket-y);
  z-index: 2;
  width: 68px;
  filter:
    drop-shadow(0 0 24px color-mix(in srgb, var(--cyan) 54%, transparent))
    drop-shadow(0 16px 22px rgba(0, 0, 0, 0.26));
  cursor: grab;
  user-select: none;
  transition: filter 180ms ease;
}

.game-rocket-trail {
  position: absolute;
  left: calc(var(--rocket-x) + 13px);
  top: calc(var(--rocket-y) + 96px);
  z-index: 1;
  width: 42px;
  height: 76px;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 8%, #fff 0 6%, transparent 7%),
    radial-gradient(circle at 24% 32%, var(--yellow) 0 5%, transparent 6%),
    radial-gradient(circle at 72% 58%, var(--cyan) 0 4%, transparent 5%),
    linear-gradient(180deg, color-mix(in srgb, var(--yellow) 76%, transparent), color-mix(in srgb, var(--cyan) 58%, transparent) 56%, transparent);
  filter: blur(0.2px);
  opacity: 0;
  animation: rocketSparkleTrail 760ms ease-in-out infinite alternate;
}

.launch-game.active .game-rocket-trail,
.launch-game.success .game-rocket-trail {
  opacity: 0.86;
}

.launch-game.active .launch-stage img {
  cursor: grabbing;
}

.launch-game.active .launch-stage img {
  animation: gameRocketFloat 950ms ease-in-out infinite alternate;
}

.launch-obstacle {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  display: grid;
  min-width: 98px;
  min-height: 36px;
  place-items: center;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--yellow) 36%, var(--line));
  border-radius: 999px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--yellow) 12%, transparent), transparent 50%),
    color-mix(in srgb, var(--bg-soft) 86%, transparent);
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 0 22px color-mix(in srgb, var(--yellow) 10%, transparent);
  transform: translate3d(var(--obstacle-x, -240px), var(--obstacle-y, -80px), 0);
  will-change: transform;
}

.launch-obstacle.bonus {
  border-color: color-mix(in srgb, #77d79d 48%, var(--cyan));
  background:
    linear-gradient(135deg, color-mix(in srgb, #77d79d 38%, transparent), transparent 56%),
    color-mix(in srgb, var(--bg-soft) 88%, transparent);
  box-shadow:
    0 0 0 3px color-mix(in srgb, #77d79d 9%, transparent),
    0 0 24px color-mix(in srgb, #77d79d 24%, transparent);
}

.launch-obstacle.star {
  min-width: 52px;
  width: 52px;
  min-height: 36px;
  border-color: color-mix(in srgb, var(--cyan) 54%, var(--yellow));
  background: transparent;
  color: transparent;
  font-size: 0;
  box-shadow: none;
}

.launch-obstacle.star::before {
  width: 34px;
  height: 34px;
  margin: 0;
  background:
    radial-gradient(circle at 50% 50%, #fff 0 10%, var(--yellow) 11% 30%, transparent 31%),
    conic-gradient(from 18deg, transparent 0 12%, color-mix(in srgb, var(--yellow) 88%, #fff) 13% 16%, transparent 17% 32%, color-mix(in srgb, var(--cyan) 62%, #fff) 33% 36%, transparent 37% 100%);
  clip-path: polygon(50% 0, 61% 36%, 98% 36%, 68% 57%, 79% 93%, 50% 72%, 21% 93%, 32% 57%, 2% 36%, 39% 36%);
  filter: drop-shadow(0 0 14px color-mix(in srgb, var(--yellow) 44%, transparent));
  content: "";
}

.launch-obstacle.star::after {
  position: absolute;
  right: 28px;
  width: 72px;
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--cyan) 32%, transparent), color-mix(in srgb, var(--yellow) 44%, transparent));
  filter: blur(0.3px);
  content: "";
}

.launch-obstacle.bonus::before {
  margin-right: 6px;
  color: #77d79d;
  content: "✓";
}

.launch-obstacle.money::before {
  color: var(--yellow);
  content: "€";
}

.launch-obstacle.bonus.star::before {
  width: 34px;
  height: 34px;
  margin: 0;
  background:
    radial-gradient(circle at 50% 50%, #fff 0 10%, var(--yellow) 11% 30%, transparent 31%),
    conic-gradient(from 18deg, transparent 0 12%, color-mix(in srgb, var(--yellow) 88%, #fff) 13% 16%, transparent 17% 32%, color-mix(in srgb, var(--cyan) 62%, #fff) 33% 36%, transparent 37% 100%);
  clip-path: polygon(50% 0, 61% 36%, 98% 36%, 68% 57%, 79% 93%, 50% 72%, 21% 93%, 32% 57%, 2% 36%, 39% 36%);
  color: transparent;
  filter: drop-shadow(0 0 14px color-mix(in srgb, var(--yellow) 44%, transparent));
  content: "";
}

.launch-obstacle.hazard::before {
  margin-right: 6px;
  color: var(--yellow);
  content: "!";
}

.launch-obstacle.hazard {
  border-color: color-mix(in srgb, var(--yellow) 62%, var(--line));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--yellow) 22%, transparent), transparent 48%),
    color-mix(in srgb, var(--bg-soft) 88%, transparent);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--yellow) 8%, transparent),
    0 0 24px color-mix(in srgb, var(--yellow) 22%, transparent);
}

.launch-obstacle.comet,
.launch-obstacle.rock {
  min-width: 58px;
  width: 58px;
  min-height: 44px;
  border-radius: 50%;
  color: transparent;
  font-size: 0;
}

.launch-obstacle.comet::before,
.launch-obstacle.rock::before {
  width: 32px;
  height: 32px;
  margin: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.82) 0 12%, transparent 13%),
    linear-gradient(135deg, color-mix(in srgb, var(--yellow) 62%, #fff), color-mix(in srgb, var(--cyan) 54%, #222));
  content: "";
}

.launch-obstacle.comet::after {
  position: absolute;
  right: 38px;
  width: 54px;
  height: 18px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--yellow) 42%, transparent));
  content: "";
}

.launch-obstacle.collected {
  opacity: 0;
  transform: translate3d(var(--obstacle-x, -240px), var(--obstacle-y, -80px), 0) scale(0.4);
  transition: opacity 140ms ease, transform 140ms ease;
}

.launch-score {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
}

.launch-score span {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
}

.launch-score strong {
  color: var(--text);
}

.launch-status {
  margin: -4px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.launch-start-button {
  position: relative;
  overflow: hidden;
  min-height: 56px;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--cyan) 30%, transparent),
    0 14px 42px color-mix(in srgb, var(--cyan) 16%, transparent);
  animation: launchButtonPulse 1.7s ease-in-out infinite;
}

.launch-game.active .launch-status {
  color: var(--cyan);
}

.launch-game.hit .launch-status {
  color: var(--yellow);
}

.launch-game.success .launch-status {
  color: #77d79d;
}

.launch-game.hit .launch-stage img {
  filter:
    drop-shadow(0 0 24px color-mix(in srgb, var(--yellow) 62%, transparent))
    saturate(1.2);
  animation: none;
}

.launch-game.success .launch-stage img {
  filter: drop-shadow(0 0 30px color-mix(in srgb, #77d79d 60%, transparent));
  animation: gameRocketWin 780ms ease both;
}

.cta.section-pad {
  padding-bottom: clamp(18px, 3vw, 34px);
}

.contact-form {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  width: min(100%, 880px);
  margin: 0 auto;
  overflow: hidden;
  padding: 24px;
  background:
    linear-gradient(150deg, color-mix(in srgb, var(--cyan) 7%, transparent), transparent 42%),
    linear-gradient(330deg, color-mix(in srgb, var(--yellow) 7%, transparent), transparent 38%),
    var(--surface);
}

.contact-form::before {
  position: absolute;
  top: 0;
  right: 24px;
  left: 24px;
  height: 2px;
  border-radius: 999px;
  background: var(--gradient);
  content: "";
}

.contact-form label {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  color: var(--text);
  padding: 12px 14px;
  outline: none;
  transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: color-mix(in srgb, var(--cyan) 62%, var(--line));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--cyan) 12%, transparent);
}

.contact-form textarea {
  resize: vertical;
}

.contact-form .full {
  grid-column: 1 / -1;
}

.interest-select {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.interest-select[open],
.interest-select:hover {
  border-color: color-mix(in srgb, var(--cyan) 52%, var(--line));
}

.interest-select[open] {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--cyan) 10%, transparent);
}

.interest-select summary {
  display: grid;
  grid-template-columns: 1fr auto 30px;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 0 14px;
  cursor: pointer;
  list-style: none;
}

.interest-select summary::-webkit-details-marker {
  display: none;
}

.interest-select summary span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.interest-select summary strong {
  color: var(--text);
  font-size: 14px;
  font-weight: 900;
  text-align: right;
}

.interest-select summary::after {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--cyan);
  content: "+";
  transition: transform 180ms ease, color 180ms ease, border-color 180ms ease;
}

.interest-select[open] summary::after {
  border-color: color-mix(in srgb, var(--yellow) 58%, var(--line));
  color: var(--yellow);
  transform: rotate(45deg);
}

.interest-field {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0 14px 14px;
  border: 0;
}

.interest-field legend {
  grid-column: 1 / -1;
  margin: 0 0 -2px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.interest-field label {
  position: relative;
  display: flex;
  min-height: 56px;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0 10px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg) 60%, transparent);
  color: var(--text);
  cursor: pointer;
  text-align: center;
  transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}

.interest-field label:hover {
  border-color: color-mix(in srgb, var(--cyan) 48%, var(--line));
  transform: translateY(-1px);
}

.interest-field input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: auto;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
}

.interest-field span {
  position: relative;
  z-index: 1;
  color: inherit;
  font-size: 13px;
  font-weight: 900;
}

.interest-field label:has(input:checked) {
  border-color: transparent;
  background: var(--gradient);
  color: #071014;
  box-shadow: 0 16px 32px color-mix(in srgb, var(--cyan) 14%, transparent);
}

.form-note {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.form-note.success {
  color: var(--text);
}

.faq {
  position: relative;
  isolation: isolate;
  padding-top: 0;
}

.faq-inline {
  width: min(100%, 960px);
  margin: 6px auto 0;
}

.faq::before {
  position: absolute;
  inset: 4% -8% auto auto;
  z-index: -1;
  width: min(44vw, 520px);
  height: 320px;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 24%, rgba(255, 255, 255, 0.48) 0 1px, transparent 2px),
    radial-gradient(circle at 70% 38%, color-mix(in srgb, var(--cyan) 28%, transparent), transparent 36%),
    radial-gradient(circle at 52% 74%, color-mix(in srgb, var(--yellow) 16%, transparent), transparent 28%);
  opacity: 0.72;
  content: "";
}

.faq-list {
  display: grid;
  gap: 12px;
  width: min(100%, 960px);
  margin-inline: auto;
}

.faq-item {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--cyan) 5%, transparent), transparent 42%),
    var(--surface);
  box-shadow: 0 18px 56px rgba(0, 0, 0, 0.16);
  transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}

.faq-item:hover,
.faq-item[open] {
  border-color: color-mix(in srgb, var(--cyan) 42%, var(--yellow));
  transform: translateY(-2px);
}

.faq-item summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px;
  align-items: center;
  gap: 18px;
  min-height: 72px;
  padding: 0 18px 0 22px;
  cursor: pointer;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary span {
  color: var(--text);
  font-size: clamp(18px, 1.6vw, 24px);
  font-weight: 900;
}

.faq-item summary i {
  position: relative;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: color-mix(in srgb, var(--bg-soft) 76%, transparent);
  transition: transform 180ms ease, border-color 180ms ease;
}

.faq-item summary i::before,
.faq-item summary i::after {
  position: absolute;
  width: 14px;
  height: 2px;
  border-radius: 999px;
  background: var(--cyan);
  content: "";
}

.faq-item summary i::after {
  transform: rotate(90deg);
  transition: transform 180ms ease;
}

.faq-item[open] summary i {
  border-color: color-mix(in srgb, var(--yellow) 56%, var(--line));
  transform: rotate(45deg);
}

.faq-item[open] summary i::after {
  transform: rotate(0deg);
}

.faq-item p {
  max-width: 820px;
  margin: -6px 0 0;
  padding: 0 22px 22px;
  color: var(--muted);
  font-weight: 760;
  line-height: 1.65;
}

.legal {
  display: grid;
  gap: 14px;
  padding-top: 0;
}

.legal-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
}

.legal-card summary {
  display: flex;
  min-height: 62px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0 22px;
  cursor: pointer;
  color: var(--text);
  font-weight: 900;
  list-style: none;
}

.legal-card summary::-webkit-details-marker {
  display: none;
}

.legal-card summary::after {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--cyan);
  content: "+";
}

.legal-card[open] summary::after {
  color: var(--yellow);
  content: "-";
}

.legal-content {
  display: grid;
  gap: 14px;
  padding: 0 22px 24px;
  color: var(--muted);
  line-height: 1.66;
}

.legal-content p {
  max-width: 980px;
  margin: 0;
}

.legal-content strong {
  color: var(--text);
}

.legal-content a {
  color: var(--cyan);
  font-weight: 800;
}

.legal-page {
  min-height: calc(100vh - 190px);
  padding-top: clamp(44px, 7vw, 82px);
}

.legal-shell {
  display: grid;
  gap: 24px;
  max-width: 980px;
}

.legal-shell h1 {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(42px, 7vw, 76px);
  font-weight: 900;
  line-height: 0.98;
}

.legal-shell .legal-content {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  box-shadow: var(--shadow);
}

.legal-back {
  display: inline-flex;
  width: fit-content;
  min-height: 40px;
  align-items: center;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
  transition: border-color 180ms ease, transform 180ms ease;
}

.legal-back:hover {
  border-color: color-mix(in srgb, var(--cyan) 48%, var(--line));
  transform: translateY(-1px);
}

.site-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
  width: var(--content);
  margin: 0 auto;
  padding: 14px 0 max(8px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 560ms ease, transform 560ms ease;
}

.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@keyframes marqueeReverse {
  from {
    transform: translateX(-50%);
  }

  to {
    transform: translateX(0);
  }
}

@keyframes proofSweep {
  0%,
  100% {
    transform: translateX(-58%) rotate(10deg);
  }

  46%,
  58% {
    transform: translateX(56%) rotate(10deg);
  }
}

@keyframes proofLine {
  0%,
  100% {
    transform: scaleX(0.32);
    opacity: 0.46;
  }

  50% {
    transform: scaleX(1);
    opacity: 0.9;
  }
}

@keyframes rotateWord {
  0% {
    opacity: 0;
    transform: translateY(0.08em) scale(0.992);
  }

  4%,
  12% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  17%,
  100% {
    opacity: 0;
    transform: translateY(-0.06em) scale(0.998);
  }
}

@keyframes heroRocketArrive {
  0% {
    opacity: 0;
    transform: translate3d(-760px, 185px, 0) rotate(42deg) scale(0.9);
  }

  72% {
    opacity: 1;
    transform: translate3d(-78px, 50px, 0) rotate(55deg) scale(0.98);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(62deg) scale(1.04);
  }
}

@keyframes heroRocketDepart {
  0% {
    opacity: 1;
    transform: translate3d(60vw, -8px, 0) rotate(90deg) scale(1.04);
  }

  52% {
    opacity: 1;
    transform: translate3d(76vw, -70px, 0) rotate(64deg) scale(1.04);
  }

  100% {
    opacity: 0;
    transform: translate3d(calc(100vw + 180px), -170px, 0) rotate(58deg) scale(0.98);
  }
}

@keyframes heroRocketLoopDepart {
  0% {
    opacity: 1;
    offset-distance: 0%;
    transform: scale(1.04);
  }

  18% {
    opacity: 1;
    offset-distance: 10%;
    transform: scale(1.05);
  }

  36% {
    opacity: 1;
    offset-distance: 22%;
    transform: scale(1.05);
  }

  52% {
    opacity: 1;
    offset-distance: 34%;
    transform: scale(1.04);
  }

  70% {
    opacity: 1;
    offset-distance: 58%;
    transform: scale(1.02);
  }

  79% {
    opacity: 1;
    offset-distance: 70%;
    transform: scale(0.98);
  }

  81% {
    opacity: 0;
    offset-distance: 73%;
    transform: scale(0.98);
  }

  88% {
    opacity: 0;
    offset-distance: 89%;
    transform: scale(0.9);
  }

  97% {
    opacity: 1;
    offset-distance: 98%;
    transform: scale(1);
  }

  100% {
    opacity: 1;
    offset-distance: 100%;
    transform: scale(1.04);
  }
}

@keyframes heroRocketMotionPath {
  0% {
    opacity: 1;
    offset-distance: 0%;
    transform: scale(1.04);
  }

  42% {
    opacity: 1;
    offset-distance: 25%;
    transform: scale(1.04);
  }

  68% {
    opacity: 1;
    offset-distance: 60%;
    transform: scale(0.98);
  }

  70% {
    opacity: 0;
    offset-distance: 64%;
    transform: scale(0.96);
  }

  76% {
    opacity: 0;
    offset-distance: 0%;
    transform: scale(0.9);
  }

  92% {
    opacity: 0;
    offset-distance: 0%;
    transform: scale(1);
  }

  100% {
    opacity: 1;
    offset-distance: 0%;
    transform: scale(1.04);
  }
}

@keyframes mobileHeroRocketMotionPath {
  0% {
    opacity: 1;
    offset-distance: 0%;
    transform: scale(0.9);
  }

  42% {
    opacity: 1;
    offset-distance: 25%;
    transform: scale(0.9);
  }

  68% {
    opacity: 1;
    offset-distance: 60%;
    transform: scale(0.86);
  }

  70% {
    opacity: 0;
    offset-distance: 64%;
    transform: scale(0.84);
  }

  76% {
    opacity: 0;
    offset-distance: 0%;
    transform: scale(0.82);
  }

  92% {
    opacity: 0;
    offset-distance: 0%;
    transform: scale(0.88);
  }

  100% {
    opacity: 1;
    offset-distance: 0%;
    transform: scale(0.9);
  }
}

@keyframes portraitFloat {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-10px);
  }
}

@keyframes mobileHeroRocketArrive {
  0% {
    opacity: 0;
    transform: translate3d(-320px, 118px, 0) rotate(42deg) scale(0.8);
  }

  72% {
    opacity: 1;
    transform: translate3d(-48px, 34px, 0) rotate(54deg) scale(0.88);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(62deg) scale(0.9);
  }
}

@keyframes mobileHeroRocketLoopDepart {
  0% {
    opacity: 1;
    offset-distance: 0%;
    transform: scale(0.9);
  }

  18% {
    opacity: 1;
    offset-distance: 10%;
    transform: scale(0.92);
  }

  36% {
    opacity: 1;
    offset-distance: 22%;
    transform: scale(0.92);
  }

  52% {
    opacity: 1;
    offset-distance: 34%;
    transform: scale(0.92);
  }

  70% {
    opacity: 1;
    offset-distance: 58%;
    transform: scale(0.9);
  }

  79% {
    opacity: 1;
    offset-distance: 70%;
    transform: scale(0.86);
  }

  81% {
    opacity: 0;
    offset-distance: 73%;
    transform: scale(0.86);
  }

  88% {
    opacity: 0;
    offset-distance: 89%;
    transform: scale(0.82);
  }

  97% {
    opacity: 1;
    offset-distance: 98%;
    transform: scale(0.88);
  }

  100% {
    opacity: 1;
    offset-distance: 100%;
    transform: scale(0.9);
  }
}

@keyframes mobileHeroRocketFloat {
  from {
    transform: translate3d(0, 0, 0) rotate(62deg);
  }

  to {
    transform: translate3d(6px, -5px, 0) rotate(62deg);
  }
}

@keyframes rocketSparkleTrail {
  from {
    opacity: 0.56;
    transform: translateX(-50%) scaleY(0.78);
  }

  to {
    opacity: 0.95;
    transform: translateX(-50%) scaleY(1.08);
  }
}

@keyframes rocketPromptIn {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes rocketPromptReturn {
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes rocketPromptPulse {
  0%,
  100% {
    box-shadow:
      0 0 0 8px color-mix(in srgb, var(--cyan) 8%, transparent),
      0 0 34px color-mix(in srgb, var(--yellow) 28%, transparent);
  }

  50% {
    box-shadow:
      0 0 0 14px color-mix(in srgb, var(--cyan) 4%, transparent),
      0 0 42px color-mix(in srgb, var(--cyan) 36%, transparent);
  }
}

@keyframes driftWord {
  from {
    transform: translate3d(0, 0, 0) rotate(-2deg);
  }

  to {
    transform: translate3d(-120px, 36px, 0) rotate(2deg);
  }
}

@keyframes serviceSweep {
  0%,
  100% {
    transform: translateX(-46%) rotate(8deg);
  }

  50% {
    transform: translateX(36%) rotate(8deg);
  }
}

@keyframes geometricDrift {
  from {
    transform: translate3d(-16px, 8px, 0) rotate(-8deg);
  }

  to {
    transform: translate3d(18px, -10px, 0) rotate(-5deg);
  }
}

@keyframes formatOrbitDrift {
  from {
    filter: hue-rotate(0deg);
    transform: translate3d(-12px, 10px, 0) rotate(-16deg) scaleX(1.42);
  }

  to {
    filter: hue-rotate(8deg);
    transform: translate3d(16px, -12px, 0) rotate(-9deg) scaleX(1.54);
  }
}

@keyframes formatLiftPulse {
  from {
    opacity: 0.62;
    filter: saturate(0.9);
    transform: translateY(-12px);
  }

  to {
    opacity: 0.95;
    filter: saturate(1.18);
    transform: translateY(12px);
  }
}

@keyframes launchButtonPulse {
  0%,
  100% {
    transform: translateY(0);
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--cyan) 30%, transparent),
      0 14px 42px color-mix(in srgb, var(--cyan) 16%, transparent);
  }

  50% {
    transform: translateY(-2px);
    box-shadow:
      0 0 0 5px color-mix(in srgb, var(--cyan) 8%, transparent),
      0 18px 54px color-mix(in srgb, var(--yellow) 18%, transparent);
  }
}

@keyframes siteSectionDrift {
  from {
    transform: translate3d(-22px, 0, 0) rotate(-1deg);
  }

  to {
    transform: translate3d(24px, -18px, 0) rotate(1.4deg);
  }
}

@keyframes backgroundGridDrift {
  from {
    background-position: 0 0, 0 0;
  }

  to {
    background-position: 80px 48px, 48px 80px;
  }
}

@keyframes backgroundShapeDrift {
  from {
    transform: translate3d(-2%, -1%, 0) rotate(-2deg);
  }

  to {
    transform: translate3d(3%, 2%, 0) rotate(2.5deg);
  }
}

@keyframes siteGeometryDrift {
  from {
    background-position: 0 0, 0 0, 0 0, 0 0, 0 0;
    transform: translate3d(-1.5%, -0.8%, 0) rotate(-0.7deg);
  }

  to {
    background-position: 86px 42px, 42px 86px, 0 0, 0 0, 0 0;
    transform: translate3d(1.8%, 1.1%, 0) rotate(0.9deg);
  }
}

@keyframes missionRoute {
  0%,
  100% {
    opacity: 0.22;
    transform: scaleX(0.64);
  }

  50% {
    opacity: 0.62;
    transform: scaleX(1);
  }
}

@keyframes mobileMissionRocket {
  0%,
  100% {
    transform: translate3d(-6px, var(--mission-mobile-y-start, 0px), 0) rotate(180deg) scale(0.92);
  }

  34% {
    transform: translate3d(8px, var(--mission-mobile-y-orbit, 520px), 0) rotate(180deg) scale(0.95);
  }

  68% {
    transform: translate3d(-8px, var(--mission-mobile-y-landing, 1010px), 0) rotate(180deg) scale(0.95);
  }
}

@keyframes rocketFlame {
  from {
    opacity: 0.48;
    transform: rotate(-38deg) scaleX(0.72);
  }

  to {
    opacity: 0.95;
    transform: rotate(-38deg) scaleX(1.08);
  }
}

@keyframes starFall {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(50%);
  }
}

@keyframes gameRocketFloat {
  from {
    transform: translateY(0) scale(1);
  }

  to {
    transform: translateY(-7px) scale(1.02);
  }
}

@keyframes gameRocketWin {
  0% {
    transform: translateY(0) scale(1);
  }

  100% {
    transform: translateY(-22px) scale(1.08);
  }
}

@keyframes planetFloat {
  0%,
  100% {
    transform: translateY(0) rotate(-1deg);
  }

  50% {
    transform: translateY(-12px) rotate(1deg);
  }
}

@keyframes orbitSpin {
  from {
    transform: rotate(0deg) scaleX(1.32);
  }

  to {
    transform: rotate(360deg) scaleX(1.32);
  }
}

@keyframes tabLight {
  0%,
  100% {
    transform: translateX(-45%);
  }

  50% {
    transform: translateX(45%);
  }
}

@keyframes mediaFloat {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-13px);
  }
}

@keyframes frameFloat {
  0%,
  100% {
    translate: 0 0;
  }

  50% {
    translate: 0 -22px;
  }
}

@keyframes lineDrift {
  0%,
  100% {
    transform: translateX(-18px) scaleX(0.72);
    opacity: 0.16;
  }

  50% {
    transform: translateX(48px) scaleX(1);
    opacity: 0.52;
  }
}

@keyframes screenPulse {
  from {
    transform: scale(1);
    opacity: 0.9;
  }

  to {
    transform: scale(1.16);
    opacity: 0.55;
  }
}

@keyframes reelOne {
  0%,
  100% {
    transform: translateY(0);
  }

  45% {
    transform: translateY(-18px);
  }
}

@keyframes reelTwo {
  0%,
  100% {
    transform: translateY(0);
  }

  45% {
    transform: translateY(-28px);
  }
}

@keyframes reelThree {
  0%,
  100% {
    transform: translateY(0);
  }

  45% {
    transform: translateY(-38px);
  }
}

@keyframes sparkFade {
  from {
    opacity: 0.9;
    transform: translate(-50%, -50%) scale(1);
  }

  to {
    opacity: 0;
    transform: translate(calc(-50% + var(--spark-x, 18px)), calc(-50% + var(--spark-y, -22px))) scale(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }

  .word-rotator span {
    opacity: 0 !important;
    transform: none !important;
  }

  .word-rotator span:first-child {
    opacity: 1 !important;
  }
}

@media (max-width: 1080px) {
  .site-header {
    grid-template-columns: auto 1fr;
  }

  .desktop-nav {
    display: none;
  }

  .menu-toggle {
    display: grid;
  }

  .hero,
  .cta {
    grid-template-columns: 1fr;
  }

  .hero {
    min-height: auto;
    --hero-rocket-x: clamp(318px, 44vw, 438px);
    --hero-rocket-y: clamp(224px, 24vw, 294px);
  }

  .hero-rocket {
    top: var(--hero-rocket-y);
    left: var(--hero-rocket-x);
    display: block;
    width: 66px;
    animation: mobileHeroRocketArrive 5.8s cubic-bezier(0.2, 0.76, 0.16, 1) 0.45s both;
  }

  .hero.rocket-released .hero-rocket {
    offset-path: path("M 0 0 C 54 -72 -54 -72 0 0 C 118 -22 245 -92 420 -166 C 570 -230 690 -252 790 -272 C -220 154 -82 68 0 0");
    offset-rotate: auto 90deg;
    offset-anchor: 50% 74%;
    animation: mobileHeroRocketMotionPath 6.9s cubic-bezier(0.28, 0.74, 0.14, 1) both;
  }

  .hero.rocket-launching .hero-rocket {
    offset-path: path("M 0 0 C 54 -86 138 -76 136 0 C 132 78 26 86 -14 26 C -46 -24 24 -72 98 -34 C 218 28 380 -82 610 -190 C 720 -244 840 -270 930 -300 C -360 126 -144 64 0 0");
    offset-rotate: auto 90deg;
    offset-anchor: 50% 74%;
    animation: mobileHeroRocketLoopDepart 4.4s cubic-bezier(0.24, 0.76, 0.16, 1) both;
  }

  .rocket-continue {
    top: calc(var(--hero-rocket-y) - 90px);
    left: min(calc(var(--hero-rocket-x) + 70px), calc(100% - 188px));
    display: inline-grid;
    min-height: 42px;
    min-width: 156px;
    padding: 0 14px;
    font-size: 11.5px;
    animation: rocketPromptIn 520ms ease 6.2s forwards, rocketPromptPulse 1.6s ease-in-out 6.8s infinite;
  }

  .hero h1 {
    font-size: 68px;
  }

  .hero-copy p {
    font-size: 18px;
  }

  .section-heading h2,
  .case-copy h2,
  .about-panel h2,
  .cta h2 {
    font-size: 52px;
  }

  .tab-panel h3 {
    font-size: 42px;
  }

  .hero-visual {
    min-height: 560px;
  }

  .service-grid,
  .testimonial-grid,
  .process-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .service-grid {
    overflow: visible;
    padding-top: 8px;
  }

  .service-grid::before {
    top: 72px;
    right: 7%;
    left: 7%;
    display: block;
    height: 150px;
  }

  .mission-rocket {
    top: 50px;
    left: 8%;
    display: block;
    width: 62px;
  }

  .about-panel {
    grid-template-columns: 1fr;
    grid-template-areas:
      "heading"
      "portrait"
      "copy";
    justify-items: center;
    text-align: left;
  }

  .portrait-placeholder {
    min-height: 360px;
  }

  .portrait-image {
    width: min(100%, 300px);
  }

  .mission-control {
    grid-template-columns: 1fr;
  }

  .mission-panel {
    min-height: auto;
  }

  .launch-game,
  .contact-form,
  .faq-list {
    width: 100%;
  }

  .format-card,
  .format-card:nth-child(even) {
    grid-template-columns: 1fr;
  }

  .format-card:nth-child(even) .format-media {
    order: 0;
  }

  .format-route::before {
    top: 18px;
    bottom: 18px;
    left: 28px;
    width: 3px;
    height: auto;
    transform: none;
  }

  .format-route::after {
    right: -128px;
    bottom: 10%;
    left: auto;
    width: 260px;
  }
}

@media (max-width: 760px) {
  :root {
    --content: min(100vw - 28px, 1180px);
  }

  .site-header {
    top: 10px;
    grid-template-columns: auto 1fr;
    min-height: 62px;
    margin-top: 10px;
    gap: 10px;
    padding: 8px 9px;
  }

  .brand-logo-shell {
    width: clamp(146px, 44vw, 198px);
    min-width: 0;
    height: 36px;
  }

  .brand-wordmark {
    width: calc(100% * 1.14);
    height: calc(100% * 6.2);
  }

  .lang-toggle,
  .theme-toggle,
  .menu-toggle {
    width: 38px;
    min-width: 38px;
    height: 38px;
  }

  .header-actions {
    gap: 7px;
  }

  .header-actions .button {
    display: none;
  }

  .hero {
    gap: 28px;
    padding-top: 44px;
    --hero-rocket-x: clamp(154px, 48vw, 214px);
    --hero-rocket-y: clamp(210px, 52vw, 242px);
  }

  .hero-rocket {
    width: 46px;
    animation: mobileHeroRocketArrive 4.6s cubic-bezier(0.2, 0.76, 0.16, 1) 0.28s both;
  }

  .rocket-continue {
    top: calc(var(--hero-rocket-y) - 72px);
    left: min(calc(var(--hero-rocket-x) + 46px), calc(100vw - 158px));
    min-height: 38px;
    min-width: 138px;
    padding-inline: 14px;
    font-size: 10.2px;
  }

  .rocket-continue::before {
    left: 16px;
    bottom: -25px;
    width: 46px;
    height: 36px;
  }

  .hero-copy {
    display: contents;
  }

  .hero h1 {
    order: 1;
    font-size: 44px;
    margin-bottom: 112px;
  }

  .hero-copy p {
    order: 2;
    font-size: 16px;
  }

  .section-heading h2,
  .case-copy h2,
  .about-panel h2,
  .cta h2 {
    font-size: 38px;
  }

  .tab-panel h3 {
    font-size: 34px;
  }

  .proof-grid strong {
    font-size: 27px;
  }

  .hero-actions {
    order: 3;
    display: grid;
    margin-top: 0;
  }

  .button {
    width: 100%;
  }

  .proof-grid {
    order: 5;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 0;
  }

  .hero-visual {
    order: 4;
    min-height: 500px;
  }

  .phone-shell {
    width: min(310px, 82vw);
  }

  .logo-track {
    gap: 14px;
  }

  .logo-track img {
    width: 174px;
    height: 96px;
    padding: 16px 20px;
  }

  .service-grid,
  .testimonial-grid,
  .process-steps,
  .contact-form {
    grid-template-columns: 1fr;
  }

  .service-grid {
    gap: 46px;
    padding-top: 10px;
  }

  .service-grid::before {
    top: 198px;
    right: auto;
    bottom: 210px;
    left: 50%;
    width: 2px;
    height: auto;
    border-top: 0;
    border-left: 2px solid color-mix(in srgb, var(--cyan) 42%, transparent);
    border-radius: 999px;
    background:
      radial-gradient(circle at 50% 12%, color-mix(in srgb, var(--cyan) 70%, transparent) 0 2px, transparent 3px),
      radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--yellow) 70%, transparent) 0 2px, transparent 3px),
      radial-gradient(circle at 50% 88%, rgba(255, 255, 255, 0.72) 0 2px, transparent 3px);
  }

  .mission-rocket {
    top: 200px;
    left: calc(50% - 26px);
    width: 52px;
    animation: none;
    transform: translate3d(0, var(--mission-mobile-y-orbit, 480px), 0) rotate(180deg) scale(0.92);
    transition: transform 680ms cubic-bezier(0.22, 0.82, 0.21, 1);
  }

  .service-grid[data-active-planet="start"] .mission-rocket {
    transform: translate3d(0, var(--mission-mobile-y-start, 0px), 0) rotate(180deg) scale(0.92);
  }

  .service-grid[data-active-planet="orbit"] .mission-rocket {
    transform: translate3d(0, var(--mission-mobile-y-orbit, 480px), 0) rotate(180deg) scale(0.94);
  }

  .service-grid[data-active-planet="landing"] .mission-rocket {
    transform: translate3d(0, var(--mission-mobile-y-landing, 980px), 0) rotate(180deg) scale(0.94);
  }

  .service-card {
    min-height: 500px;
    padding-top: 30px;
  }

  .planet-orb {
    width: clamp(170px, 58vw, 228px);
    margin-bottom: 10px;
  }

  .reference-chips {
    margin-top: -14px;
  }

  .quote-card,
  .quote-card summary {
    min-height: 250px;
  }

  .process-flow {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: 22px;
  }

  .process-flow-dot {
    width: 38px;
    height: 38px;
    font-size: 13px;
  }

  .quote-card.wide {
    grid-column: auto;
  }

  .format-card {
    padding: 22px 18px;
    overflow: hidden;
  }

  .format-route {
    padding-left: 36px;
  }

  .format-route::before {
    left: 14px;
  }

  .format-card::after {
    top: 34px;
    left: -32px;
    width: 20px;
    height: 20px;
  }

  .format-copy h3 {
    font-size: clamp(28px, 10vw, 36px);
    line-height: 0.98;
  }

  .format-copy p {
    font-size: 16px;
    overflow-wrap: anywhere;
  }

  .format-media {
    min-height: 190px;
  }

  .format-media > span,
  .format-media > span:nth-child(2) {
    min-height: 190px;
  }

  .contact-form .full {
    grid-column: auto;
  }

  .interest-field {
    grid-template-columns: 1fr 1fr;
  }

  .mission-panel,
  .launch-game,
  .contact-form {
    padding: 18px;
  }

  .launch-stage {
    --rocket-y: 190px;
    min-height: 340px;
  }

  .launch-stage img {
    width: 58px;
  }

  .game-rocket-trail {
    left: calc(var(--rocket-x) + 9px);
    top: calc(var(--rocket-y) + 82px);
  }

  .launch-tutorial {
    width: min(90%, 360px);
    padding: 15px;
  }

  .faq-item summary {
    min-height: 66px;
    padding: 0 14px 0 16px;
  }

  .faq-item p {
    padding: 0 16px 18px;
  }

  .portrait-placeholder {
    min-height: 320px;
  }

  .portrait-image {
    width: min(76vw, 270px);
  }

  .site-footer {
    gap: 12px;
    margin-top: 0;
    padding-bottom: max(6px, env(safe-area-inset-bottom));
  }
}

@media (min-width: 981px) {
  html:root .site-header .brand {
    align-self: center !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    margin: 0 !important;
  }

  html:root .site-header .brand-logo-shell {
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    margin: 0 !important;
  }
}

html:root[data-theme="dark"] .phone-shell,
html:root:not([data-theme="light"]) .phone-shell {
  filter:
    drop-shadow(0 34px 42px rgba(0, 0, 0, 0.88))
    drop-shadow(0 46px 28px rgba(12, 192, 223, 0.20))
    drop-shadow(0 54px 38px rgba(108, 224, 170, 0.12)) !important;
}

html:root .phone-screen,
html:root .phone-screen video,
html:root .hero-preview-video,
html:root .hero-video {
  background: #000 !important;
  background-color: #000 !important;
}

.brand {
  overflow: visible;
}

.brand-logo-shell {
  width: clamp(178px, 17vw, 236px);
}

.hero {
  --hero-rocket-x: clamp(548px, 44vw, 660px);
  --hero-rocket-y: clamp(304px, 26vw, 350px);
}

.hero-rocket {
  width: 78px;
  transform-origin: 50% 74%;
}

.hero.rocket-launching .hero-rocket {
  animation: heroRocketLoopDepartSmooth 6.2s cubic-bezier(0.2, 0.78, 0.14, 1) both;
}

.rocket-continue {
  top: calc(var(--hero-rocket-y) - 150px);
  left: min(calc(var(--hero-rocket-x) + 60px), calc(100% - 250px));
}

.rocket-continue::before {
  content: none;
}

.process-flow-line i {
  width: min(100%, calc(var(--rocket-progress, 25%) + 74px));
}

.format-route::before {
  animation: formatLiftPulse 4.8s ease-in-out infinite alternate, routeLightTravel 3.4s ease-in-out infinite;
}

.format-copy > span {
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--yellow) 70%, var(--cyan));
  text-decoration-thickness: 2px;
  text-underline-offset: 7px;
}

.cta.section-pad {
  padding-bottom: clamp(22px, 3vw, 42px);
}

.site-footer {
  margin-top: 0;
  padding-top: 18px;
  padding-bottom: max(18px, env(safe-area-inset-bottom));
}

@keyframes heroRocketLoopDepartSmooth {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(62deg) scale(1.04);
  }

  14% {
    opacity: 1;
    transform: translate3d(76px, -72px, 0) rotate(128deg) scale(1.05);
  }

  30% {
    opacity: 1;
    transform: translate3d(24px, -142px, 0) rotate(218deg) scale(1.05);
  }

  46% {
    opacity: 1;
    transform: translate3d(-74px, -58px, 0) rotate(318deg) scale(1.04);
  }

  58% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(422deg) scale(1.04);
  }

  77% {
    opacity: 1;
    transform: translate3d(620px, -272px, 0) rotate(58deg) scale(1);
  }

  84% {
    opacity: 0;
    transform: translate3d(860px, -386px, 0) rotate(58deg) scale(0.96);
  }

  90% {
    opacity: 0;
    transform: translate3d(-560px, 190px, 0) rotate(42deg) scale(0.94);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(62deg) scale(1.04);
  }
}

@keyframes mobileHeroRocketLoopDepartSmooth {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(62deg) scale(1.02);
  }

  15% {
    opacity: 1;
    transform: translate3d(46px, -48px, 0) rotate(130deg) scale(1.04);
  }

  31% {
    opacity: 1;
    transform: translate3d(12px, -88px, 0) rotate(218deg) scale(1.03);
  }

  47% {
    opacity: 1;
    transform: translate3d(-48px, -32px, 0) rotate(318deg) scale(1.03);
  }

  60% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(422deg) scale(1.02);
  }

  78% {
    opacity: 1;
    transform: translate3d(330px, -184px, 0) rotate(58deg) scale(0.98);
  }

  84% {
    opacity: 0;
    transform: translate3d(430px, -248px, 0) rotate(58deg) scale(0.92);
  }

  91% {
    opacity: 0;
    transform: translate3d(-260px, 94px, 0) rotate(42deg) scale(0.9);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(62deg) scale(1.02);
  }
}

@keyframes routeLightTravel {
  0%,
  100% {
    filter: drop-shadow(0 0 10px color-mix(in srgb, var(--cyan) 30%, transparent));
  }

  50% {
    filter: drop-shadow(0 0 22px color-mix(in srgb, var(--yellow) 30%, transparent));
  }
}

@keyframes formatElevatorFloat {
  from {
    transform: translateY(0) rotate(0deg);
  }

  to {
    transform: translateY(16px) rotate(0deg);
  }
}

@media (max-width: 1080px) {
  .brand-logo-shell {
    width: clamp(156px, 25vw, 214px);
  }

  .hero {
    --hero-rocket-x: clamp(312px, 43vw, 430px);
    --hero-rocket-y: clamp(252px, 32vw, 304px);
  }

  .hero-rocket {
    width: 62px;
  }

  .hero.rocket-launching .hero-rocket {
    animation: mobileHeroRocketLoopDepartSmooth 6s cubic-bezier(0.2, 0.78, 0.14, 1) both;
  }

  .rocket-continue {
    top: calc(var(--hero-rocket-y) - 112px);
    left: min(calc(var(--hero-rocket-x) + 48px), calc(100% - 210px));
    width: 198px;
    min-height: 92px;
    padding-inline: 18px;
  }
}

@media (max-width: 760px) {
  .site-header {
    grid-template-columns: minmax(0, 1fr) auto;
    overflow: visible;
  }

  .brand-logo-shell {
    width: clamp(128px, 35vw, 172px);
    height: 34px;
  }

  .brand-wordmark {
    width: calc(100% * 1.08);
    height: calc(100% * 6.05);
  }

  .hero {
    --hero-rocket-x: clamp(176px, 50vw, 224px);
    --hero-rocket-y: clamp(214px, 53vw, 250px);
  }

  .hero h1 {
    margin-bottom: 124px;
  }

  .hero-rocket {
    width: 46px;
  }

  .rocket-continue {
    top: calc(var(--hero-rocket-y) - 96px);
    left: min(calc(var(--hero-rocket-x) + 34px), calc(100vw - 178px));
    width: 168px;
    min-height: 78px;
    padding: 9px 18px 25px 24px;
    font-size: 9.8px;
  }

  .rocket-continue::before {
    content: none;
  }

  .service-grid[data-active-planet="landing"] .mission-rocket {
    transform: translate3d(0, var(--mission-mobile-y-landing, 980px), 0) rotate(180deg) scale(0.94);
  }

  .format-route {
    gap: 18px;
    padding-left: 0;
  }

  .format-route::before {
    left: 20px;
    z-index: 0;
    opacity: 0.46;
  }

  .format-card,
  .format-card:nth-child(even) {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 24px 18px 24px 46px;
  }

  .format-card::after {
    top: 32px;
    left: 12px;
    z-index: 3;
  }

  .format-card:nth-child(even) .format-media {
    order: 0;
  }

  .format-copy h3 {
    font-size: clamp(27px, 8.6vw, 34px);
    line-height: 1;
  }

  .format-copy p {
    max-width: 100%;
    font-size: 15px;
    line-height: 1.55;
  }

  .format-media {
    min-height: 132px;
  }

  .format-media > span,
  .format-media > span:nth-child(2) {
    min-height: 126px;
  }

  .launch-stage {
    min-height: 360px;
  }

  .site-footer {
    padding-top: 8px;
    padding-bottom: max(2px, env(safe-area-inset-bottom));
  }
}

body {
  background-color: var(--bg);
}

main,
.hero,
.section-pad,
.trust-strip,
.cta,
.site-footer {
  background-color: transparent;
}

.section-pad::before,
.trust-strip .logo-row::before,
.cta::before {
  position: absolute;
  inset: -12% -10%;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(circle at 14% 26%, rgba(255, 255, 255, 0.42) 0 1px, transparent 2px),
    radial-gradient(circle at 72% 18%, color-mix(in srgb, var(--cyan) 36%, transparent) 0 1px, transparent 2px),
    radial-gradient(circle at 86% 76%, color-mix(in srgb, var(--yellow) 34%, transparent) 0 1px, transparent 2px),
    linear-gradient(90deg, color-mix(in srgb, var(--cyan) 5%, transparent) 1px, transparent 1px),
    linear-gradient(0deg, color-mix(in srgb, var(--yellow) 4%, transparent) 1px, transparent 1px),
    linear-gradient(118deg, transparent 22%, color-mix(in srgb, var(--cyan) 7%, transparent) 44%, transparent 72%);
  background-size: 140px 140px, 190px 190px, 220px 220px, 94px 94px, 94px 94px, 100% 100%;
  opacity: 0.44;
  transform: translate3d(0, 0, 0) rotate(-1deg);
  animation: siteGeometryDrift 24s ease-in-out infinite alternate;
  content: "";
}

.brand {
  overflow: hidden;
}

.brand-logo-shell {
  width: clamp(174px, 16vw, 226px);
  height: 44px;
  overflow: hidden;
}

.brand-wordmark {
  width: calc(100% * 1.12);
  height: calc(100% * 6.12);
}

.hero {
  --hero-rocket-x: clamp(486px, 39vw, 594px);
  --hero-rocket-y: clamp(292px, 24vw, 338px);
}

.hero-rocket {
  z-index: 3;
  width: 82px;
  transform-origin: 50% 74%;
}

.rocket-continue {
  top: calc(var(--hero-rocket-y) - 138px);
  left: min(calc(var(--hero-rocket-x) + 84px), calc(100% - 238px));
  width: 214px;
  min-height: 108px;
  padding: 14px 32px 38px 34px;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(ellipse at 42% 27%, #fff 0 20%, transparent 21%),
    linear-gradient(155deg, #fbfff7 0%, color-mix(in srgb, #fbfff7 91%, var(--cyan)) 61%, color-mix(in srgb, #fff8d2 86%, var(--yellow)) 100%);
  clip-path: polygon(9% 56%, 11% 36%, 22% 17%, 40% 8%, 63% 7%, 82% 15%, 95% 31%, 98% 51%, 92% 69%, 76% 82%, 54% 88%, 33% 85%, 6% 100%, 17% 73%);
  filter:
    drop-shadow(3px 0 0 #182023)
    drop-shadow(-3px 0 0 #182023)
    drop-shadow(0 3px 0 #182023)
    drop-shadow(0 -3px 0 #182023)
    drop-shadow(0 0 18px color-mix(in srgb, var(--cyan) 28%, transparent));
}

.hero.hero-video-started .rocket-continue,
.hero.rocket-launching .rocket-continue {
  pointer-events: none;
  opacity: 0;
  animation: none;
}

.hero.hero-video-started:not(.rocket-launching) .rocket-continue {
  display: none;
}

.hero.rocket-launching .hero-rocket,
.hero.rocket-released .hero-rocket {
  offset-path: none;
  offset-rotate: 0deg;
  offset-anchor: auto;
}

.hero.rocket-launching .hero-rocket {
  animation: heroRocketCleanLoop 6.1s cubic-bezier(0.18, 0.76, 0.14, 1) both;
}

.hero.hero-video-started:not(.rocket-launching) .hero-rocket {
  animation: heroRocketArrive 3.2s cubic-bezier(0.2, 0.76, 0.16, 1) 0.2s both;
}

.trust-strip {
  background:
    radial-gradient(ellipse at 18% 30%, color-mix(in srgb, var(--cyan) 10%, transparent), transparent 42%),
    radial-gradient(ellipse at 82% 72%, color-mix(in srgb, var(--yellow) 8%, transparent), transparent 38%),
    color-mix(in srgb, var(--bg) 92%, transparent);
}

:root[data-theme="light"] .trust-strip {
  background:
    radial-gradient(ellipse at 18% 30%, color-mix(in srgb, var(--cyan) 10%, transparent), transparent 42%),
    radial-gradient(ellipse at 82% 72%, color-mix(in srgb, var(--yellow) 8%, transparent), transparent 38%),
    color-mix(in srgb, var(--bg) 94%, transparent);
}

.logo-marquee::before,
.logo-marquee::after {
  width: min(7vw, 86px);
  opacity: 0.28;
}

.process-flow-line i {
  width: min(100%, calc(var(--rocket-progress, 25%) + 96px));
}

.service-grid[data-active-planet="start"] .mission-rocket {
  transform: translate3d(var(--mission-x-start, 0), var(--mission-y-start, 0), 0) rotate(66deg) scale(0.94);
}

.service-grid[data-active-planet="landing"] .mission-rocket {
  transform: translate3d(var(--mission-x-landing, 84%), var(--mission-y-landing, 0), 0) rotate(180deg) scale(0.94);
}

.format-route {
  overflow: visible;
}

.format-route::before {
  left: 29px;
  width: 4px;
  background:
    linear-gradient(180deg, transparent, var(--cyan) 10%, color-mix(in srgb, var(--yellow) 75%, var(--cyan)) 52%, var(--cyan) 90%, transparent),
    repeating-linear-gradient(180deg, transparent 0 34px, rgba(255, 255, 255, 0.3) 35px 37px);
}

.format-elevator {
  left: 13px;
  width: 36px;
  border-color: color-mix(in srgb, var(--cyan) 44%, transparent);
}

.format-elevator::before {
  width: 46px;
  height: 78px;
  margin-left: -5px;
}

.format-card::after {
  left: -63px;
}

.format-media-video,
.format-media-reels {
  background:
    radial-gradient(circle at 52% 42%, color-mix(in srgb, var(--cyan) 18%, transparent), transparent 42%),
    linear-gradient(120deg, color-mix(in srgb, var(--cyan) 8%, transparent), transparent 42%),
    linear-gradient(320deg, color-mix(in srgb, var(--yellow) 7%, transparent), transparent 50%),
    color-mix(in srgb, var(--bg-soft) 84%, transparent);
}

.format-media-reels img {
  background: color-mix(in srgb, var(--bg-soft) 72%, transparent);
}

.launch-game {
  margin-bottom: clamp(18px, 2.4vw, 34px);
}

.launch-stage {
  min-height: clamp(360px, 42vw, 430px);
}

.launch-obstacle {
  max-width: min(176px, 42vw);
  text-align: center;
}

.launch-obstacle.bonus {
  border-color: color-mix(in srgb, #77d79d 60%, var(--cyan));
}

.launch-obstacle.hazard {
  border-color: color-mix(in srgb, var(--yellow) 72%, var(--line));
}

.site-footer {
  gap: 10px 24px;
  padding: 18px 0 max(16px, env(safe-area-inset-bottom));
  line-height: 1.4;
}

@keyframes heroRocketCleanLoop {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(62deg) scale(1.04);
  }
  16% {
    opacity: 1;
    transform: translate3d(76px, -72px, 0) rotate(122deg) scale(1.05);
  }
  32% {
    opacity: 1;
    transform: translate3d(30px, -142px, 0) rotate(212deg) scale(1.05);
  }
  48% {
    opacity: 1;
    transform: translate3d(-66px, -58px, 0) rotate(322deg) scale(1.04);
  }
  62% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(422deg) scale(1.04);
  }
  80% {
    opacity: 1;
    transform: translate3d(620px, -272px, 0) rotate(58deg) scale(1);
  }
  86% {
    opacity: 0;
    transform: translate3d(860px, -386px, 0) rotate(58deg) scale(0.96);
  }
  93% {
    opacity: 0;
    transform: translate3d(-560px, 190px, 0) rotate(42deg) scale(0.94);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(62deg) scale(1.04);
  }
}

@keyframes heroRocketCleanLoopMobile {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(62deg) scale(1.02);
  }
  17% {
    opacity: 1;
    transform: translate3d(42px, -42px, 0) rotate(122deg) scale(1.03);
  }
  34% {
    opacity: 1;
    transform: translate3d(12px, -82px, 0) rotate(214deg) scale(1.03);
  }
  51% {
    opacity: 1;
    transform: translate3d(-42px, -30px, 0) rotate(322deg) scale(1.02);
  }
  64% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(422deg) scale(1.02);
  }
  81% {
    opacity: 1;
    transform: translate3d(300px, -176px, 0) rotate(58deg) scale(0.98);
  }
  87% {
    opacity: 0;
    transform: translate3d(410px, -238px, 0) rotate(58deg) scale(0.92);
  }
  93% {
    opacity: 0;
    transform: translate3d(-260px, 92px, 0) rotate(42deg) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(62deg) scale(1.02);
  }
}

@media (max-width: 1080px) {
  .hero {
    --hero-rocket-x: clamp(318px, 42vw, 430px);
    --hero-rocket-y: clamp(250px, 32vw, 308px);
  }

  .hero-rocket {
    width: 64px;
  }

  .rocket-continue {
    top: calc(var(--hero-rocket-y) - 112px);
    left: min(calc(var(--hero-rocket-x) + 58px), calc(100% - 210px));
    width: 194px;
    min-height: 96px;
    padding: 12px 24px 34px 30px;
  }

  .hero.rocket-launching .hero-rocket {
    animation: heroRocketCleanLoopMobile 6s cubic-bezier(0.18, 0.76, 0.14, 1) both;
  }
}

@media (max-width: 760px) {
  .site-header {
    width: min(100% - 20px, 560px);
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    padding: 8px;
  }

  .desktop-nav,
  .header-actions .button-small,
  .header-actions .button {
    display: none;
  }

  .menu-toggle {
    display: inline-grid;
  }

  .brand-logo-shell {
    width: clamp(126px, 38vw, 166px);
    height: 34px;
  }

  .brand-wordmark {
    width: calc(100% * 1.09);
    height: calc(100% * 6.1);
  }

  .hero {
    --hero-rocket-x: clamp(144px, 43vw, 196px);
    --hero-rocket-y: clamp(214px, 52vw, 250px);
    min-height: auto;
    padding-top: 42px;
  }

  .hero h1 {
    margin-bottom: 122px;
  }

  .hero-copy p {
    position: relative;
    z-index: 4;
    font-size: 18px;
  }

  .hero-rocket {
    width: 48px;
  }

  .rocket-continue {
    top: calc(var(--hero-rocket-y) - 92px);
    left: min(calc(var(--hero-rocket-x) + 48px), calc(100vw - 172px));
    width: 160px;
    min-height: 78px;
    padding: 9px 18px 27px 24px;
    font-size: 9.5px;
  }

  .service-grid[data-active-planet="start"] .mission-rocket {
    transform: translate3d(0, var(--mission-mobile-y-start, 0), 0) rotate(66deg) scale(0.92);
  }

  .service-grid[data-active-planet="orbit"] .mission-rocket {
    transform: translate3d(0, var(--mission-mobile-y-orbit, 430px), 0) rotate(90deg) scale(0.96);
  }

  .service-grid[data-active-planet="landing"] .mission-rocket {
    transform: translate3d(0, var(--mission-mobile-y-landing, 980px), 0) rotate(180deg) scale(0.92);
  }

  .format-route {
    padding-left: 0;
  }

  .format-route::before {
    left: 18px;
    width: 3px;
  }

  .format-elevator {
    left: 5px;
    width: 30px;
  }

  .format-elevator::before {
    width: 38px;
    height: 64px;
    margin-left: -4px;
  }

  .format-card,
  .format-card:nth-child(even) {
    padding: 24px 16px 24px 44px;
  }

  .format-card::after {
    left: 8px;
  }

  .format-copy h3 {
    font-size: clamp(24px, 8vw, 34px);
    line-height: 1.02;
  }

  .format-copy p {
    font-size: 15px;
    line-height: 1.52;
  }

  .format-media-video {
    min-height: 184px;
  }

  .format-media-reels {
    grid-template-columns: 0.76fr 0.96fr 0.76fr;
    min-height: 190px;
    padding: 10px;
  }

  .format-media-reels img {
    height: 136px;
    padding: 5px;
  }

  .reels-video-slot {
    height: 156px;
  }

  .launch-game {
    padding: 16px;
  }

  .launch-stage {
    min-height: 390px;
  }

  .launch-obstacle {
    min-width: 74px;
    max-width: 130px;
    min-height: 32px;
    padding: 7px 9px;
    font-size: 10px;
  }

  .site-footer {
    gap: 9px 14px;
    padding: 14px 0 max(10px, env(safe-area-inset-bottom));
    font-size: 12.5px;
  }
}

@media (max-width: 430px) {
  .brand-logo-shell {
    width: clamp(118px, 35vw, 138px);
  }

  .hero {
    --hero-rocket-x: clamp(132px, 39vw, 168px);
    --hero-rocket-y: clamp(212px, 55vw, 244px);
  }

  .rocket-continue {
    left: min(calc(var(--hero-rocket-x) + 40px), calc(100vw - 154px));
    width: 146px;
    min-height: 72px;
    padding: 8px 16px 24px 22px;
    font-size: 9px;
  }
}

@media (min-width: 1081px) {
  .hero {
    --hero-rocket-x: clamp(510px, 37.5vw, 560px);
    --hero-rocket-y: clamp(160px, 13vw, 188px);
  }

  .hero-rocket {
    width: 64px;
  }

  .rocket-continue {
    top: calc(var(--hero-rocket-y) - 22px);
    left: min(calc(var(--hero-rocket-x) + 32px), calc(100% - 218px));
    width: 194px;
    min-height: 96px;
    padding: 12px 27px 34px 31px;
  }
}

.hero:not(.hero-video-started) .rocket-continue {
  pointer-events: auto;
  opacity: 1;
  transform: scale(1);
  animation: rocketPromptPulse 1.6s ease-in-out infinite;
}

.rocket-continue {
  clip-path: polygon(
    8% 58%,
    9% 43%,
    14% 29%,
    24% 18%,
    38% 10%,
    55% 7%,
    72% 10%,
    86% 19%,
    95% 33%,
    98% 49%,
    94% 64%,
    84% 77%,
    69% 85%,
    51% 89%,
    35% 86%,
    6% 99%,
    18% 72%
  );
}

html,
body {
  min-height: 100%;
}

body {
  position: relative;
  overflow-x: clip;
  background:
    radial-gradient(circle at 14% 18%, color-mix(in srgb, var(--cyan) 18%, transparent), transparent 30rem),
    radial-gradient(circle at 88% 44%, color-mix(in srgb, var(--yellow) 12%, transparent), transparent 28rem),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 46%, var(--bg) 100%);
}

body::before,
body::after {
  position: fixed;
  inset: -18%;
  z-index: 0;
  pointer-events: none;
  content: "";
}

body::before {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--cyan) 7%, transparent) 1px, transparent 1px),
    linear-gradient(0deg, color-mix(in srgb, var(--yellow) 5%, transparent) 1px, transparent 1px),
    radial-gradient(circle at 22% 28%, rgba(255, 255, 255, 0.42) 0 1px, transparent 2px),
    radial-gradient(circle at 72% 38%, color-mix(in srgb, var(--cyan) 42%, transparent) 0 1px, transparent 2px),
    radial-gradient(circle at 42% 76%, color-mix(in srgb, var(--yellow) 34%, transparent) 0 1px, transparent 2px);
  background-size: 104px 104px, 104px 104px, 150px 150px, 190px 190px, 230px 230px;
  opacity: 0.36;
  animation: siteGeometryDriftV56 34s ease-in-out infinite alternate;
}

body::after {
  background:
    radial-gradient(ellipse at 18% 20%, color-mix(in srgb, var(--cyan) 24%, transparent), transparent 34rem),
    radial-gradient(ellipse at 78% 68%, color-mix(in srgb, var(--yellow) 17%, transparent), transparent 30rem),
    linear-gradient(116deg, transparent 26%, color-mix(in srgb, var(--cyan) 8%, transparent) 42%, transparent 64%);
  opacity: 0.58;
  filter: blur(6px);
  animation: siteAuraDriftV56 28s ease-in-out infinite alternate-reverse;
}

body > * {
  position: relative;
  z-index: 1;
}

main {
  overflow: clip;
}

.hero,
.trust-strip,
.services,
.specializations,
.testimonials,
.process,
.about,
.cta,
.section-pad,
.site-footer {
  background-color: transparent !important;
}

.hero::before,
.hero::after,
.trust-strip::before,
.services::before,
.specializations::before,
.testimonials::before,
.process::before,
.about::before,
.cta::before {
  opacity: 0.32;
  filter: blur(10px);
}

.trust-strip {
  background:
    radial-gradient(ellipse at 18% 34%, color-mix(in srgb, var(--cyan) 11%, transparent), transparent 42%),
    radial-gradient(ellipse at 84% 68%, color-mix(in srgb, var(--yellow) 9%, transparent), transparent 40%) !important;
}

.logo-row,
.logo-marquee {
  background: transparent !important;
}

.brand-logo-shell {
  display: inline-grid;
  place-items: center start;
  width: clamp(168px, 15vw, 216px);
  height: 46px;
  overflow: hidden;
}

.brand-wordmark {
  width: 100%;
  height: auto;
  transform: none;
}

.site-header .brand-logo-shell {
  width: clamp(168px, 14vw, 210px);
}

.hero {
  --hero-rocket-x: clamp(604px, 42vw, 650px);
  --hero-rocket-y: clamp(150px, 12vw, 178px);
}

.hero-rocket {
  width: 64px;
  transform-origin: 50% 74%;
  will-change: transform, offset-distance, opacity;
}

.rocket-continue {
  top: calc(var(--hero-rocket-y) - 112px);
  left: min(calc(var(--hero-rocket-x) + 42px), calc(100% - 188px));
  display: grid;
  width: 156px;
  min-height: 92px;
  padding: 11px 28px 30px 34px;
  place-items: center;
  color: #081014;
  font-family: Fredoka, Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.08;
  text-align: center;
  white-space: normal;
  text-wrap: balance;
  background:
    radial-gradient(ellipse at 48% 30%, rgba(255, 255, 255, 0.94), transparent 30%),
    linear-gradient(155deg, #fbfff5 0%, color-mix(in srgb, #fbfff5 92%, var(--cyan)) 58%, color-mix(in srgb, #fff7d0 88%, var(--yellow)) 100%);
  clip-path: polygon(5% 56%, 7% 39%, 15% 23%, 29% 12%, 49% 7%, 69% 10%, 86% 20%, 96% 36%, 99% 52%, 94% 68%, 82% 80%, 64% 87%, 44% 88%, 27% 82%, 4% 100%, 16% 70%);
  filter:
    drop-shadow(3px 0 0 #172022)
    drop-shadow(-3px 0 0 #172022)
    drop-shadow(0 3px 0 #172022)
    drop-shadow(0 -3px 0 #172022)
    drop-shadow(0 0 18px color-mix(in srgb, var(--cyan) 28%, transparent));
}

.hero:not(.hero-video-started) .rocket-continue {
  opacity: 1;
  transform: scale(1);
  animation: rocketPromptPulse 1.6s ease-in-out infinite;
}

.hero.hero-video-started .rocket-continue,
.hero.rocket-launching .rocket-continue {
  opacity: 0;
  pointer-events: none;
  animation: none;
}

.hero.rocket-launching .hero-rocket,
.hero.rocket-released .hero-rocket {
  offset-path: path("M 0 0 C 70 -46 66 -118 -6 -142 C -94 -172 -146 -68 -72 -12 C -40 10 -8 10 0 0 C 134 -42 342 -126 660 -282 C 850 -376 1040 -420 1230 -470");
  offset-rotate: auto 90deg;
  offset-anchor: 50% 74%;
  animation: heroRocketMotionPathV56 6.65s cubic-bezier(0.2, 0.72, 0.14, 1) both;
}

.hero.hero-video-started:not(.rocket-launching) .hero-rocket {
  offset-path: none;
  animation: heroRocketReturnV56 3.25s cubic-bezier(0.2, 0.76, 0.16, 1) 0.12s both;
}

.service-grid[data-active-planet="start"] .mission-rocket {
  transform: translate3d(var(--mission-x-start, 0), var(--mission-y-start, 0), 0) rotate(54deg) scale(0.94);
}

.service-grid[data-active-planet="orbit"] .mission-rocket {
  transform: translate3d(var(--mission-x-orbit, 42%), var(--mission-y-orbit, 0), 0) rotate(90deg) scale(0.98);
}

.service-grid[data-active-planet="landing"] .mission-rocket {
  transform: translate3d(var(--mission-x-landing, 84%), var(--mission-y-landing, 0), 0) rotate(0deg) scale(0.94);
}

.specializations {
  overflow: hidden;
}

.format-route {
  display: grid;
  gap: clamp(18px, 2.6vw, 30px);
  width: min(100%, 1220px);
  margin-inline: auto;
  overflow: visible;
}

.format-route::before {
  left: 28px;
  width: 4px;
  border-radius: 999px;
  background:
    linear-gradient(180deg, transparent, var(--cyan) 8%, color-mix(in srgb, var(--yellow) 72%, var(--cyan)) 52%, var(--cyan) 92%, transparent),
    repeating-linear-gradient(180deg, transparent 0 54px, rgba(255, 255, 255, 0.34) 55px 57px);
}

.format-elevator {
  left: 12px;
  width: 36px;
}

.format-elevator::before {
  width: 44px;
  height: 74px;
  margin-left: -4px;
  transform: rotate(180deg);
  animation: formatElevatorDescendV56 2.8s ease-in-out infinite alternate;
}

.format-card,
.format-card:nth-child(even) {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.78fr);
  gap: clamp(24px, 3.4vw, 48px);
  align-items: center;
  min-height: 0;
}

.format-card:nth-child(even) .format-media {
  order: 0;
}

.format-copy {
  position: relative;
  z-index: 3;
}

.format-copy h3 {
  font-size: clamp(32px, 3.3vw, 52px);
  line-height: 1;
}

.format-media-video,
.format-media-reels {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.format-media-reels {
  grid-template-columns: minmax(76px, 0.62fr) minmax(96px, 0.8fr) minmax(76px, 0.62fr);
}

.site-footer {
  gap: 10px 22px;
  padding: 16px 0 max(14px, env(safe-area-inset-bottom));
}

.cta.section-pad {
  padding-bottom: clamp(10px, 2.2vw, 24px);
}

@keyframes heroRocketMotionPathV56 {
  0% {
    opacity: 1;
    offset-distance: 0%;
    transform: scale(1.04);
  }
  52% {
    opacity: 1;
    offset-distance: 33%;
    transform: scale(1.04);
  }
  78% {
    opacity: 1;
    offset-distance: 100%;
    transform: scale(0.98);
  }
  88% {
    opacity: 0;
    offset-distance: 100%;
    transform: scale(0.94);
  }
  100% {
    opacity: 0;
    offset-distance: 100%;
    transform: scale(0.94);
  }
}

@keyframes heroRocketReturnV56 {
  0% {
    opacity: 0;
    transform: translate3d(-560px, 180px, 0) rotate(42deg) scale(0.92);
  }
  68% {
    opacity: 1;
    transform: translate3d(-56px, 32px, 0) rotate(54deg) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(62deg) scale(1.04);
  }
}

@keyframes formatElevatorDescendV56 {
  from {
    transform: translateY(-8px) rotate(180deg);
  }
  to {
    transform: translateY(18px) rotate(180deg);
  }
}

@keyframes siteGeometryDriftV56 {
  from {
    transform: translate3d(-1.4%, -0.7%, 0) rotate(-1deg);
  }
  to {
    transform: translate3d(1.6%, 1.1%, 0) rotate(1deg);
  }
}

@keyframes siteAuraDriftV56 {
  from {
    transform: translate3d(0, -1%, 0) scale(1);
  }
  to {
    transform: translate3d(-2%, 1.3%, 0) scale(1.035);
  }
}

@media (max-width: 1180px) {
  .format-card,
  .format-card:nth-child(even) {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .format-card .format-media,
  .format-card:nth-child(even) .format-media {
    order: 0;
  }

  .format-card .format-copy {
    order: 1;
  }

  .format-copy h3 {
    font-size: clamp(30px, 6vw, 48px);
  }
}

@media (max-width: 1080px) {
  .hero {
    --hero-rocket-x: clamp(298px, 42vw, 418px);
    --hero-rocket-y: clamp(250px, 32vw, 304px);
  }

  .hero-rocket {
    width: 60px;
  }

  .rocket-continue {
    top: calc(var(--hero-rocket-y) - 112px);
    left: min(calc(var(--hero-rocket-x) + 74px), calc(100% - 202px));
    width: 184px;
    min-height: 88px;
    padding: 10px 24px 28px 30px;
    font-size: 12px;
  }
}

@media (max-width: 760px) {
  .brand-logo-shell,
  .site-header .brand-logo-shell {
    width: clamp(128px, 35vw, 164px);
    height: 36px;
  }

  .brand-wordmark {
    width: 100%;
    height: auto;
  }

  .hero {
    --hero-rocket-x: clamp(178px, 48vw, 220px);
    --hero-rocket-y: clamp(214px, 51vw, 246px);
  }

  .hero-rocket {
    width: 46px;
  }

  .rocket-continue {
    top: calc(var(--hero-rocket-y) - 98px);
    left: min(calc(var(--hero-rocket-x) + 54px), calc(100vw - 164px));
    width: 150px;
    min-height: 74px;
    padding: 8px 17px 24px 22px;
    font-size: 9.6px;
  }

  .hero.rocket-launching .hero-rocket,
  .hero.rocket-released .hero-rocket {
    offset-path: path("M 0 0 C 44 -34 42 -86 -4 -100 C -58 -116 -90 -38 -42 -8 C -22 7 -4 7 0 0 C 80 -28 178 -82 330 -166 C 430 -222 540 -250 640 -282");
    offset-rotate: auto 90deg;
    animation: heroRocketMotionPathV56 6.45s cubic-bezier(0.2, 0.72, 0.14, 1) both;
  }

  .service-grid[data-active-planet="landing"] .mission-rocket {
    transform: translate3d(0, var(--mission-mobile-y-landing, 980px), 0) rotate(0deg) scale(0.92);
  }

  .format-route {
    gap: 18px;
    padding-left: 0;
  }

  .format-route::before {
    left: 20px;
    width: 3px;
  }

  .format-elevator {
    left: 6px;
    width: 30px;
  }

  .format-elevator::before {
    width: 38px;
    height: 64px;
  }

  .format-card,
  .format-card:nth-child(even) {
    grid-template-columns: 1fr;
    padding: 22px 16px 22px 46px;
  }

  .format-card::after {
    top: 30px;
    left: 10px;
  }

  .format-copy h3 {
    font-size: clamp(26px, 8vw, 34px);
  }

  .format-copy p {
    max-width: 100%;
    font-size: 15px;
    line-height: 1.55;
  }

  .format-media-video {
    min-height: 170px;
  }

  .format-media-reels {
    grid-template-columns: 0.72fr 0.94fr 0.72fr;
    min-height: 176px;
    padding: 10px;
  }

  .format-media-reels img {
    width: 100%;
    height: 130px;
    padding: 5px;
  }

  .reels-video-slot {
    height: 150px;
  }
}

@media (max-width: 430px) {
  .hero {
    --hero-rocket-x: clamp(160px, 45vw, 188px);
    --hero-rocket-y: clamp(214px, 54vw, 246px);
  }

  .rocket-continue {
    left: min(calc(var(--hero-rocket-x) + 46px), calc(100vw - 150px));
    width: 140px;
    min-height: 70px;
    padding: 8px 15px 22px 20px;
    font-size: 9px;
  }
}

html,
body {
  overflow-x: clip;
  background: var(--bg) !important;
}

body::before,
body::after {
  position: fixed;
  inset: -18vmax;
  z-index: -2;
  pointer-events: none;
  content: "";
}

body::before {
  background:
    radial-gradient(circle at 14% 18%, color-mix(in srgb, var(--cyan) 16%, transparent), transparent 28%),
    radial-gradient(circle at 86% 22%, color-mix(in srgb, var(--yellow) 12%, transparent), transparent 28%),
    radial-gradient(circle at 68% 78%, color-mix(in srgb, var(--cyan) 14%, transparent), transparent 34%),
    linear-gradient(115deg, color-mix(in srgb, var(--bg) 94%, var(--cyan)), var(--bg) 46%, color-mix(in srgb, var(--bg) 92%, var(--yellow)));
  animation: globalAuraDriftV58 18s ease-in-out infinite alternate;
}

body::after {
  z-index: -1;
  opacity: 0.58;
  background:
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--cyan) 10%, transparent) 0 1px, transparent 1px 92px),
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--cyan) 8%, transparent) 0 1px, transparent 1px 92px),
    radial-gradient(ellipse at 74% 38%, transparent 0 44%, color-mix(in srgb, var(--yellow) 14%, transparent) 45% 45.4%, transparent 46%),
    radial-gradient(ellipse at 28% 82%, transparent 0 42%, color-mix(in srgb, var(--cyan) 16%, transparent) 43% 43.5%, transparent 44%);
  animation: globalGeometryDriftV58 24s ease-in-out infinite alternate;
}

main,
section,
.hero,
.trust-strip,
.services,
.specializations,
.testimonials,
.process,
.about,
.mini-game,
.faq,
.cta {
  background-color: transparent !important;
}

.trust-strip,
.logo-marquee,
.logo-row {
  background: transparent !important;
}

.site-header {
  overflow: visible;
}

.brand {
  flex: 0 0 auto;
  overflow: visible;
}

.brand-logo-shell,
.site-header .brand-logo-shell {
  position: relative !important;
  display: block !important;
  width: clamp(172px, 14vw, 214px) !important;
  height: 42px !important;
  overflow: hidden !important;
  background: transparent !important;
}

.brand-wordmark {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: calc(100% * 1.16) !important;
  max-width: none !important;
  height: calc(100% * 6.2) !important;
  transform: translate(-50%, -50%) !important;
  object-fit: fill !important;
  object-position: center !important;
  filter: none !important;
}

.brand-wordmark-dark,
:root[data-theme="dark"] .brand-wordmark-dark,
:root[data-theme="light"] .brand-wordmark-light {
  display: none !important;
}

.brand-wordmark-light,
:root[data-theme="dark"] .brand-wordmark-light,
:root[data-theme="light"] .brand-wordmark-dark {
  display: block !important;
}

.hero {
  --hero-rocket-x: clamp(734px, 52vw, 780px);
  --hero-rocket-y: clamp(172px, 13vw, 204px);
  overflow: hidden;
}

.hero-rocket {
  z-index: 7;
  width: 66px;
  animation: none !important;
  transform: rotate(56deg) scale(1.03);
  transform-origin: 50% 74%;
}

.rocket-continue {
  top: calc(var(--hero-rocket-y) - 136px);
  left: min(calc(var(--hero-rocket-x) - 70px), calc(100% - 190px));
  z-index: 8;
  display: grid;
  width: 166px;
  min-height: 94px;
  padding: 12px 30px 31px 34px;
  place-items: center;
  color: #071114;
  font-family: Fredoka, Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.08;
  text-align: center;
  background:
    radial-gradient(ellipse at 42% 24%, rgba(255, 255, 255, 0.96), transparent 34%),
    linear-gradient(145deg, #fbfff5 0%, color-mix(in srgb, #fbfff5 90%, var(--cyan)) 62%, color-mix(in srgb, #fff4c8 86%, var(--yellow)) 100%);
  clip-path: polygon(3% 50%, 6% 34%, 18% 18%, 36% 8%, 58% 6%, 79% 13%, 94% 29%, 99% 49%, 94% 68%, 78% 83%, 55% 91%, 33% 87%, 7% 100%, 18% 74%, 8% 65%);
  filter:
    drop-shadow(3px 0 0 #142023)
    drop-shadow(-3px 0 0 #142023)
    drop-shadow(0 3px 0 #142023)
    drop-shadow(0 -3px 0 #142023)
    drop-shadow(0 0 20px color-mix(in srgb, var(--cyan) 28%, transparent));
}

.rocket-continue::before,
.rocket-continue::after {
  content: none !important;
}

.hero.rocket-launching .hero-rocket,
.hero.rocket-released .hero-rocket {
  offset-path: path("M 0 0 C 74 -42 80 -112 16 -140 C -62 -174 -138 -82 -96 -16 C -64 36 18 34 46 -8 C 178 -54 390 -136 694 -286 C 888 -382 1080 -430 1280 -482");
  offset-rotate: auto 90deg;
  offset-anchor: 50% 74%;
  animation: heroRocketLoopExitV58 7.05s cubic-bezier(0.18, 0.74, 0.13, 1) both !important;
}

.hero.hero-video-started:not(.rocket-launching) .hero-rocket {
  offset-path: none;
  animation: heroRocketReturnV58 3s cubic-bezier(0.2, 0.76, 0.16, 1) 0.08s both !important;
}

.service-grid[data-active-planet="landing"] .mission-rocket {
  transform: translate3d(var(--mission-x-landing, 84%), var(--mission-y-landing, 0), 0) rotate(0deg) scale(0.94) !important;
}

.format-route {
  position: relative;
  gap: clamp(20px, 3vw, 34px);
  overflow: visible;
}

.format-route::before {
  left: 29px;
  width: 4px;
  background:
    linear-gradient(180deg, transparent 0%, var(--cyan) 7%, color-mix(in srgb, var(--yellow) 72%, var(--cyan)) 54%, var(--cyan) 94%, transparent 100%),
    repeating-linear-gradient(180deg, transparent 0 48px, rgba(255, 255, 255, 0.35) 49px 51px);
}

.format-elevator {
  left: 10px;
  width: 42px;
  transform: translateY(8px);
}

.format-elevator::before {
  width: 48px;
  height: 78px;
  transform: rotate(180deg);
  animation: formatElevatorDescendV58 3.6s ease-in-out infinite alternate;
}

.format-card,
.format-card:nth-child(even) {
  display: grid !important;
  grid-template-columns: minmax(280px, 0.95fr) minmax(0, 1fr) !important;
  gap: clamp(26px, 4vw, 54px) !important;
  align-items: center !important;
}

.format-card > .format-media,
.format-card:nth-child(even) > .format-media,
.format-card > .format-copy {
  position: relative !important;
  grid-column: auto !important;
  grid-row: auto !important;
  order: initial !important;
  min-width: 0;
}

.format-card:nth-child(even) > .format-copy {
  order: 0 !important;
}

.format-card:nth-child(even) > .format-media {
  order: 1 !important;
}

.format-copy {
  z-index: 3;
}

.format-media-video,
.format-media-reels {
  z-index: 2;
  min-height: clamp(220px, 22vw, 300px);
}

.format-media-reels {
  grid-template-columns: minmax(82px, 0.68fr) minmax(96px, 0.84fr) minmax(82px, 0.68fr);
}

.site-footer {
  margin-bottom: 0;
  padding: 18px 0 max(18px, env(safe-area-inset-bottom));
}

.cta.section-pad {
  padding-bottom: clamp(8px, 1.7vw, 20px);
}

@keyframes heroRocketLoopExitV58 {
  0% {
    opacity: 1;
    offset-distance: 0%;
    transform: scale(1.03);
  }
  16% {
    opacity: 1;
    offset-distance: 18%;
    transform: scale(1.04);
  }
  39% {
    opacity: 1;
    offset-distance: 42%;
    transform: scale(1.04);
  }
  72% {
    opacity: 1;
    offset-distance: 100%;
    transform: scale(0.98);
  }
  100% {
    opacity: 0;
    offset-distance: 100%;
    transform: scale(0.94);
  }
}

@keyframes heroRocketReturnV58 {
  0% {
    opacity: 0;
    transform: translate3d(-640px, 190px, 0) rotate(42deg) scale(0.92);
  }
  68% {
    opacity: 1;
    transform: translate3d(-60px, 34px, 0) rotate(54deg) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(56deg) scale(1.03);
  }
}

@keyframes formatElevatorDescendV58 {
  from {
    transform: translateY(-4px) rotate(180deg);
  }
  to {
    transform: translateY(24px) rotate(180deg);
  }
}

@keyframes globalAuraDriftV58 {
  from {
    transform: translate3d(-1.6%, -0.8%, 0) scale(1);
  }
  to {
    transform: translate3d(1.4%, 1.2%, 0) scale(1.035);
  }
}

@keyframes globalGeometryDriftV58 {
  from {
    transform: translate3d(-1.2%, 0.6%, 0) rotate(-0.8deg);
  }
  to {
    transform: translate3d(1.6%, -0.7%, 0) rotate(0.8deg);
  }
}

@media (max-width: 1180px) {
  .format-card,
  .format-card:nth-child(even) {
    grid-template-columns: 1fr !important;
  }

  .format-card > .format-copy,
  .format-card:nth-child(even) > .format-copy {
    order: 0 !important;
  }

  .format-card > .format-media,
  .format-card:nth-child(even) > .format-media {
    order: 1 !important;
  }
}

@media (max-width: 1080px) {
  .hero {
    --hero-rocket-x: clamp(390px, 48vw, 510px);
    --hero-rocket-y: clamp(252px, 31vw, 306px);
  }

  .rocket-continue {
    top: calc(var(--hero-rocket-y) - 116px);
    left: min(calc(var(--hero-rocket-x) - 58px), calc(100% - 198px));
    width: 178px;
  }
}

@media (max-width: 760px) {
  .brand-logo-shell,
  .site-header .brand-logo-shell {
    width: clamp(124px, 38vw, 166px) !important;
    height: 36px !important;
  }

  .brand-wordmark {
    width: calc(100% * 1.2) !important;
    height: calc(100% * 6.35) !important;
  }

  .hero {
    --hero-rocket-x: clamp(166px, 48vw, 216px);
    --hero-rocket-y: clamp(220px, 52vw, 254px);
  }

  .hero-rocket {
    width: 48px;
  }

  .rocket-continue {
    top: calc(var(--hero-rocket-y) - 104px);
    left: min(calc(var(--hero-rocket-x) + 58px), calc(100vw - 154px));
    width: 140px;
    min-height: 72px;
    padding: 8px 16px 23px 20px;
    font-size: 9px;
  }

  .hero.rocket-launching .hero-rocket,
  .hero.rocket-released .hero-rocket {
    offset-path: path("M 0 0 C 48 -32 50 -88 8 -108 C -46 -134 -96 -62 -68 -10 C -42 24 12 22 32 -6 C 104 -34 204 -90 342 -166 C 456 -228 558 -252 652 -282");
    offset-rotate: auto 90deg;
  }

  .service-grid[data-active-planet="landing"] .mission-rocket {
    transform: translate3d(0, var(--mission-mobile-y-landing, 980px), 0) rotate(0deg) scale(0.92) !important;
  }

  .format-route {
    padding-left: 0;
  }

  .format-route::before {
    left: 19px;
  }

  .format-elevator {
    left: 4px;
    width: 32px;
  }

  .format-card,
  .format-card:nth-child(even) {
    padding: 22px 16px 22px 48px !important;
  }

  .format-copy h3 {
    font-size: clamp(27px, 8vw, 36px) !important;
  }

  .format-copy p {
    font-size: 15px;
    line-height: 1.55;
  }

  .format-media-video,
  .format-media-reels {
    min-height: 172px;
  }
}

@media (max-width: 430px) {
  .hero {
    --hero-rocket-x: clamp(154px, 44vw, 184px);
    --hero-rocket-y: clamp(218px, 55vw, 250px);
  }

  .rocket-continue {
    top: calc(var(--hero-rocket-y) - 62px);
    left: min(calc(var(--hero-rocket-x) + 50px), calc(100vw - 146px));
    width: 128px;
    min-height: 58px;
    padding: 7px 14px 19px 18px;
    font-size: 8.2px;
  }
}

html {
  min-height: 100%;
  background: #061012;
}

body {
  position: relative;
  min-height: 100%;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 18% 12%, color-mix(in srgb, var(--cyan) 24%, transparent) 0 18rem, transparent 32rem),
    radial-gradient(circle at 78% 20%, color-mix(in srgb, var(--yellow) 18%, transparent) 0 16rem, transparent 31rem),
    radial-gradient(circle at 58% 78%, color-mix(in srgb, #4ce6d6 18%, transparent) 0 18rem, transparent 34rem),
    linear-gradient(120deg, var(--bg) 0%, var(--bg-soft) 48%, var(--bg) 100%) !important;
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: -16vmax;
  z-index: -2;
  pointer-events: none;
}

body::before {
  opacity: var(--space-aura-opacity, 0.68);
  background:
    radial-gradient(circle at 18% 32%, color-mix(in srgb, var(--cyan) 26%, transparent) 0 8%, transparent 24%),
    radial-gradient(circle at 82% 26%, color-mix(in srgb, var(--yellow) 22%, transparent) 0 7%, transparent 22%),
    radial-gradient(circle at 64% 76%, color-mix(in srgb, var(--mint) 20%, transparent) 0 9%, transparent 25%);
  filter: blur(14px);
  animation: v63AuraMove 18s ease-in-out infinite alternate;
}

body::after {
  z-index: -1;
  opacity: var(--space-grid-opacity, 0.34);
  background:
    linear-gradient(rgba(12, 192, 223, 0.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(12, 192, 223, 0.12) 1px, transparent 1px),
    radial-gradient(circle, rgba(255, 255, 255, 0.5) 0 1px, transparent 1.8px);
  background-size: 96px 96px, 96px 96px, 160px 160px;
  transform-origin: center;
  animation: v63GridMove 24s linear infinite;
}

[data-theme="light"] {
  --space-aura-opacity: 0.56;
  --space-grid-opacity: 0.24;
}

.section-pad,
.hero,
.trust-strip,
.services,
.specializations,
.testimonials,
.process,
.about,
.cta,
.faq,
.legal-page {
  background: transparent !important;
}

.site-header {
  max-width: min(92vw, 1180px);
  overflow: visible !important;
}

.brand,
.brand-logo-shell,
.site-header .brand-logo-shell {
  overflow: visible !important;
}

.mobile-lang {
  display: none !important;
}

.hero {
  --hero-rocket-x: clamp(520px, 45vw, 735px);
  --hero-rocket-y: clamp(172px, 16vw, 238px);
  overflow: hidden !important;
  isolation: isolate;
}

.hero-rocket {
  top: var(--hero-rocket-y) !important;
  left: var(--hero-rocket-x) !important;
  width: clamp(68px, 6.2vw, 98px) !important;
  z-index: 7 !important;
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) rotate(54deg) scale(1) !important;
  filter: drop-shadow(0 0 22px rgba(12, 192, 223, 0.5)) !important;
}

.rocket-continue {
  top: calc(var(--hero-rocket-y) - clamp(92px, 8vw, 118px)) !important;
  left: clamp(560px, 53vw, 850px) !important;
  width: clamp(188px, 16vw, 238px) !important;
  min-height: clamp(86px, 7vw, 112px) !important;
  display: grid !important;
  place-items: center !important;
  padding: 12px 24px 31px 25px !important;
  color: #0b1618 !important;
  font-family: var(--font-display) !important;
  font-size: clamp(15px, 1.18vw, 18px) !important;
  font-weight: 800 !important;
  line-height: 1.06 !important;
  text-align: center !important;
  background: transparent !important;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 320 156' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23 65C34 25 84 9 157 10c75 1 136 20 147 61 11 42-38 68-114 74-35 3-67 1-94-6L28 156l27-42C31 102 16 88 23 65Z' fill='%23f5fff0' stroke='%230b3132' stroke-width='9' stroke-linejoin='round'/%3E%3Cpath d='M35 68c13-28 61-45 126-45 65 0 116 17 132 47' fill='none' stroke='%23ffffff' stroke-width='7' stroke-linecap='round' opacity='.56'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  clip-path: none !important;
  transform: none !important;
  opacity: 1 !important;
  z-index: 8 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}

.rocket-continue u {
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.rocket-continue::before,
.rocket-continue::after {
  display: none !important;
  content: none !important;
}

.hero.hero-video-started .rocket-continue,
.hero.rocket-launching .rocket-continue {
  opacity: 0 !important;
  transform: translate3d(12px, -10px, 0) scale(0.94) !important;
  pointer-events: none !important;
}

.hero.rocket-launching .hero-rocket {
  offset-path: path("M 0 0 C 52 -34 98 -74 136 -118 C 172 -161 120 -215 59 -203 C -10 -190 -34 -109 12 -64 C 48 -29 108 -28 150 -65 C 242 -146 382 -220 566 -310 C 714 -382 894 -442 1082 -502");
  offset-rotate: auto 90deg;
  animation: v63HeroRocketExit 6.2s cubic-bezier(0.2, 0.72, 0.18, 1) forwards !important;
  transform: none !important;
}

.hero.hero-video-started:not(.rocket-launching) .hero-rocket,
.hero.rocket-gone .hero-rocket {
  opacity: 0 !important;
  transform: translate3d(72vw, -42vh, 0) rotate(32deg) scale(0.9) !important;
  pointer-events: none !important;
  animation: none !important;
}

.phone-screen.video-ready:not(.video-playing) .hero-video,
.phone-screen.video-playing .hero-video {
  opacity: 1 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  filter: brightness(0.72) saturate(1.05) !important;
}

.phone-screen.video-ready:not(.video-playing) .video-placeholder {
  background: linear-gradient(180deg, rgba(8, 25, 27, 0.2), rgba(5, 12, 13, 0.58)) !important;
  cursor: pointer !important;
}

.phone-screen.video-ready:not(.video-playing) .play-mark {
  width: clamp(64px, 6vw, 86px) !important;
  height: clamp(64px, 6vw, 86px) !important;
  box-shadow: 0 0 36px rgba(12, 192, 223, 0.42) !important;
}

.proof-grid {
  grid-template-columns: repeat(4, minmax(132px, 1fr)) !important;
  gap: 12px !important;
  max-width: 690px;
}

.proof-grid div {
  min-width: 0 !important;
  overflow: visible !important;
  padding: clamp(15px, 1.5vw, 20px) !important;
}

.proof-grid strong {
  display: block !important;
  white-space: nowrap !important;
  font-size: clamp(27px, 2.45vw, 36px) !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

.trust-strip {
  background:
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--cyan) 8%, transparent), transparent),
    color-mix(in srgb, var(--bg-soft) 76%, transparent) !important;
}

.logo-row {
  background: transparent !important;
}

.logo-track::before,
.logo-track::after,
.logo-row::before,
.logo-row::after,
.logo-marquee::before,
.logo-marquee::after {
  display: none !important;
  content: none !important;
}

.format-route {
  max-width: 1180px !important;
  margin-inline: auto !important;
  padding-left: 0 !important;
}

.format-route::before,
.format-route::after,
.format-card::after,
.format-card::before,
.format-elevator,
.format-elevator::before {
  display: none !important;
  content: none !important;
}

.format-card,
.format-card:nth-child(even) {
  grid-template-columns: minmax(280px, 0.88fr) minmax(320px, 1fr) !important;
  padding: clamp(26px, 4vw, 52px) !important;
  overflow: hidden !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025)),
    color-mix(in srgb, var(--card) 88%, transparent) !important;
}

.format-media-video {
  width: 100% !important;
  max-width: 520px !important;
  min-height: 0 !important;
  aspect-ratio: 16 / 9 !important;
  margin-inline: auto !important;
  overflow: hidden !important;
}

.format-media-video video {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.format-media-video .format-video-placeholder {
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
}

.format-media-reels {
  width: 100% !important;
  max-width: 590px !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(118px, 0.72fr) minmax(132px, 0.78fr) minmax(118px, 0.72fr) !important;
  align-items: center !important;
  gap: clamp(14px, 2.2vw, 28px) !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.format-media-reels img {
  width: 100% !important;
  height: clamp(250px, 26vw, 356px) !important;
  object-fit: contain !important;
  background: #fff !important;
  border: 0 !important;
  border-radius: 14px !important;
  padding: 0 !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18) !important;
  filter: none !important;
}

.format-media-reels .reels-video-slot {
  width: 100% !important;
  height: clamp(260px, 28vw, 380px) !important;
  min-height: 0 !important;
  aspect-ratio: 9 / 16 !important;
  overflow: hidden !important;
}

.reels-video-slot video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.launch-game {
  overflow: hidden !important;
}

.launch-stage {
  touch-action: none !important;
}

.launch-start-button:disabled {
  cursor: default !important;
  opacity: 0.72 !important;
}

.launch-obstacle.bonus::before {
  content: "✓ ";
}

.launch-obstacle.hazard::before {
  content: "!";
  display: inline-grid;
  place-items: center;
  width: 1.1em;
  height: 1.1em;
  margin-right: 0.3em;
  border-radius: 999px;
  background: rgba(255, 222, 89, 0.95);
  color: #111;
}

.site-footer {
  width: min(100% - 48px, 1180px) !important;
  margin: 0 auto !important;
  padding: 16px 0 max(16px, env(safe-area-inset-bottom)) !important;
  gap: clamp(14px, 2vw, 26px) !important;
  align-items: center !important;
  justify-content: center !important;
}

.cta.section-pad {
  padding-bottom: 0 !important;
}

@media (max-width: 1180px) {
  .hero {
    --hero-rocket-x: clamp(400px, 48vw, 560px);
    --hero-rocket-y: clamp(206px, 25vw, 286px);
  }

  .rocket-continue {
    left: clamp(468px, 60vw, 700px) !important;
  }
}

@media (max-width: 900px) {
  .hero {
    --hero-rocket-x: clamp(292px, 47vw, 430px);
    --hero-rocket-y: clamp(206px, 35vw, 300px);
  }

  .rocket-continue {
    top: calc(var(--hero-rocket-y) - 84px) !important;
    left: min(calc(var(--hero-rocket-x) + 108px), calc(100vw - 232px)) !important;
  }

  .format-card,
  .format-card:nth-child(even) {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 760px) {
  .site-header {
    width: min(100% - 24px, 100%) !important;
    top: 10px !important;
  }

  .mobile-nav .mobile-lang {
    display: none !important;
  }

  .hero {
    --hero-rocket-x: clamp(172px, 50vw, 220px);
    --hero-rocket-y: clamp(226px, 61vw, 288px);
    padding-top: 112px !important;
  }

  .hero-rocket {
    width: clamp(58px, 15vw, 72px) !important;
  }

  .rocket-continue {
    top: calc(var(--hero-rocket-y) - 74px) !important;
    left: min(calc(var(--hero-rocket-x) + 54px), calc(100vw - 178px)) !important;
    width: 166px !important;
    min-height: 76px !important;
    padding: 9px 18px 24px 19px !important;
    font-size: 12px !important;
  }

  .hero.rocket-launching .hero-rocket {
    offset-path: path("M 0 0 C 36 -24 74 -58 100 -92 C 126 -127 88 -169 43 -157 C -10 -144 -26 -88 8 -55 C 34 -29 77 -28 106 -54 C 166 -106 258 -160 394 -230 C 500 -284 614 -320 748 -372");
  }

  .proof-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .proof-grid strong {
    font-size: clamp(25px, 8vw, 32px) !important;
  }

  .service-grid[data-active-planet="landing"] .mission-rocket {
    transform: translate3d(0, var(--mission-mobile-y-landing, 980px), 0) rotate(0deg) scale(0.9) !important;
  }

  .format-card,
  .format-card:nth-child(even) {
    padding: 24px 16px !important;
  }

  .format-copy h3 {
    font-size: clamp(30px, 11vw, 44px) !important;
    overflow-wrap: anywhere;
  }

  .format-media-video {
    max-width: 100% !important;
  }

  .format-media-reels {
    grid-template-columns: minmax(74px, 0.7fr) minmax(92px, 0.86fr) minmax(74px, 0.7fr) !important;
    gap: 10px !important;
  }

  .format-media-reels img {
    height: clamp(188px, 54vw, 260px) !important;
    border-radius: 10px !important;
  }

  .format-media-reels .reels-video-slot {
    height: clamp(212px, 62vw, 292px) !important;
  }

  .launch-obstacle {
    max-width: 148px !important;
    font-size: 11px !important;
  }

  .site-footer {
    width: min(100% - 28px, 100%) !important;
    padding-bottom: max(14px, env(safe-area-inset-bottom)) !important;
    row-gap: 8px !important;
  }
}

@media (max-width: 430px) {
  .hero {
    --hero-rocket-x: clamp(154px, 48vw, 190px);
    --hero-rocket-y: clamp(214px, 64vw, 270px);
  }

  .rocket-continue {
    top: calc(var(--hero-rocket-y) - 66px) !important;
    left: min(calc(var(--hero-rocket-x) + 44px), calc(100vw - 160px)) !important;
    width: 150px !important;
    min-height: 70px !important;
    font-size: 11px !important;
  }

  .hero-copy p {
    position: relative;
    z-index: 3;
  }
}

@keyframes v63HeroRocketExit {
  0% {
    opacity: 1;
    offset-distance: 0%;
    filter: drop-shadow(0 0 18px rgba(12, 192, 223, 0.44));
  }
  32% {
    opacity: 1;
    offset-distance: 21%;
    filter: drop-shadow(0 0 28px rgba(255, 222, 89, 0.52));
  }
  56% {
    opacity: 1;
    offset-distance: 40%;
    filter: drop-shadow(0 0 34px rgba(12, 192, 223, 0.58));
  }
  100% {
    opacity: 0;
    offset-distance: 100%;
    filter: drop-shadow(0 0 14px rgba(12, 192, 223, 0.12));
  }
}

@keyframes v63AuraMove {
  from {
    transform: translate3d(-2%, -1%, 0) scale(1);
  }
  to {
    transform: translate3d(2%, 1.5%, 0) scale(1.05);
  }
}

@keyframes v63GridMove {
  from {
    background-position: 0 0, 0 0, 0 0;
    transform: translate3d(-1%, 0, 0) rotate(-0.4deg);
  }
  to {
    background-position: 96px 96px, 96px 96px, 160px 160px;
    transform: translate3d(1%, -1%, 0) rotate(0.4deg);
  }
}

html {
  background: #061214 !important;
}

body {
  background:
    radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--cyan) 18%, transparent) 0 15rem, transparent 34rem),
    radial-gradient(circle at 86% 18%, color-mix(in srgb, var(--yellow) 15%, transparent) 0 13rem, transparent 31rem),
    radial-gradient(circle at 70% 78%, color-mix(in srgb, var(--mint) 18%, transparent) 0 18rem, transparent 38rem),
    linear-gradient(118deg, var(--bg) 0%, var(--bg-soft) 46%, var(--bg) 100%) !important;
}

body::before {
  opacity: var(--space-aura-opacity, 0.62) !important;
  background:
    radial-gradient(circle at 22% 34%, rgba(12, 192, 223, 0.3) 0 7%, transparent 23%),
    radial-gradient(circle at 76% 28%, rgba(255, 222, 89, 0.23) 0 6%, transparent 21%),
    radial-gradient(circle at 54% 74%, rgba(112, 224, 170, 0.23) 0 8%, transparent 24%),
    conic-gradient(from 70deg at 46% 50%, transparent 0 22%, rgba(12, 192, 223, 0.08) 28%, transparent 38% 68%, rgba(255, 222, 89, 0.08) 76%, transparent 90%) !important;
  animation: v64SpaceAura 22s ease-in-out infinite alternate !important;
}

body::after {
  opacity: var(--space-grid-opacity, 0.3) !important;
  background:
    linear-gradient(rgba(12, 192, 223, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(12, 192, 223, 0.1) 1px, transparent 1px),
    radial-gradient(circle, rgba(255, 255, 255, 0.42) 0 1px, transparent 1.8px),
    repeating-linear-gradient(115deg, transparent 0 118px, rgba(255, 222, 89, 0.055) 119px 121px, transparent 122px 240px) !important;
  background-size: 98px 98px, 98px 98px, 156px 156px, 340px 340px !important;
  animation: v64SpaceGrid 28s linear infinite !important;
}

[data-theme="light"] body {
  background:
    radial-gradient(circle at 14% 16%, rgba(12, 192, 223, 0.13) 0 15rem, transparent 34rem),
    radial-gradient(circle at 86% 18%, rgba(255, 222, 89, 0.12) 0 13rem, transparent 31rem),
    radial-gradient(circle at 64% 76%, rgba(112, 224, 170, 0.13) 0 18rem, transparent 38rem),
    linear-gradient(118deg, #f8fbfa 0%, #eefafa 46%, #fffdf7 100%) !important;
}

[data-theme="light"] {
  --space-aura-opacity: 0.44;
  --space-grid-opacity: 0.18;
}

.section-pad,
.hero,
.trust-strip,
.services,
.specializations,
.testimonials,
.process,
.about,
.cta,
.faq,
.legal-page {
  background-color: transparent !important;
  background-blend-mode: normal !important;
}

.site-header {
  width: min(100% - 40px, 1180px) !important;
}

.brand {
  min-width: 0 !important;
  flex: 0 1 auto !important;
}

.brand-logo-shell,
.site-header .brand-logo-shell {
  width: clamp(170px, 16vw, 230px) !important;
  height: clamp(30px, 3vw, 46px) !important;
  overflow: visible !important;
}

.brand-wordmark {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: left center !important;
}

.hero {
  --hero-rocket-x: clamp(520px, 41vw, 648px);
  --hero-rocket-y: clamp(184px, 15.4vw, 228px);
  overflow: hidden !important;
}

.hero-rocket {
  top: var(--hero-rocket-y) !important;
  left: var(--hero-rocket-x) !important;
  width: clamp(76px, 6.6vw, 104px) !important;
  transform: translate3d(0, 0, 0) rotate(54deg) scale(1) !important;
}

.hero:not(.hero-video-started) .hero-rocket {
  animation: v64RocketArrive 1150ms cubic-bezier(0.16, 0.86, 0.26, 1) both !important;
}

.rocket-continue {
  top: calc(var(--hero-rocket-y) - clamp(98px, 8vw, 122px)) !important;
  left: calc(var(--hero-rocket-x) + clamp(80px, 7vw, 112px)) !important;
  width: clamp(220px, 17vw, 268px) !important;
  min-height: clamp(104px, 8.2vw, 132px) !important;
  padding: 16px 30px 36px 31px !important;
  font-size: clamp(16px, 1.25vw, 20px) !important;
  line-height: 1.08 !important;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 420 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M38 91C48 34 113 12 210 14c99 2 167 31 179 82 12 54-51 88-149 96-46 4-89 1-124-8L38 220l37-58C47 143 30 120 38 91Z' fill='%23f3fff0' stroke='%230a2325' stroke-width='12' stroke-linejoin='round'/%3E%3Cpath d='M58 89c22-36 82-58 159-55 73 3 126 23 150 61' fill='none' stroke='%23ffffff' stroke-width='9' stroke-linecap='round' opacity='.6'/%3E%3C/svg%3E") !important;
  filter: drop-shadow(0 12px 30px rgba(12, 192, 223, 0.2)) !important;
}

.rocket-continue u {
  text-decoration-thickness: 2.5px !important;
  text-underline-offset: 4px !important;
}

.hero.rocket-launching .hero-rocket {
  offset-path: path("M 0 0 C 64 -40 118 -93 149 -143 C 178 -190 133 -236 80 -221 C 23 -205 7 -141 47 -103 C 83 -68 133 -76 165 -116 C 252 -224 448 -328 760 -462 C 914 -528 1040 -572 1180 -616") !important;
  offset-rotate: auto 90deg !important;
  animation: v64HeroRocketExit 5.4s cubic-bezier(0.16, 0.72, 0.18, 1) forwards !important;
  transform: none !important;
}

.hero.hero-video-started:not(.rocket-launching) .hero-rocket,
.hero.rocket-gone .hero-rocket {
  opacity: 0 !important;
  transform: translate3d(80vw, -44vh, 0) rotate(31deg) scale(0.86) !important;
  animation: none !important;
}

.phone-screen.video-ready:not(.video-playing) .hero-video,
.phone-screen.video-playing .hero-video {
  opacity: 1 !important;
}

.phone-screen.video-ready:not(.video-playing) .video-placeholder {
  background: linear-gradient(180deg, rgba(4, 15, 17, 0.1), rgba(4, 15, 17, 0.5)) !important;
}

.phone-screen.video-ready:not(.video-playing) .video-placeholder strong,
.phone-screen.video-ready:not(.video-playing) .video-placeholder span:last-child {
  display: none !important;
}

.phone-screen.video-ready:not(.video-playing) .play-mark,
.phone-screen.video-playing .play-mark {
  position: relative !important;
  width: clamp(68px, 6vw, 92px) !important;
  height: clamp(68px, 6vw, 92px) !important;
}

.proof-grid {
  grid-template-columns: repeat(4, minmax(142px, 1fr)) !important;
}

.proof-grid div {
  min-height: 102px !important;
}

.proof-grid strong {
  font-size: clamp(24px, 2.22vw, 34px) !important;
  max-width: 100% !important;
}

.trust-strip {
  background:
    radial-gradient(circle at 24% 20%, color-mix(in srgb, var(--cyan) 10%, transparent), transparent 36%),
    radial-gradient(circle at 82% 30%, color-mix(in srgb, var(--yellow) 8%, transparent), transparent 34%) !important;
}

[data-theme="light"] .trust-strip {
  background:
    radial-gradient(circle at 24% 20%, rgba(12, 192, 223, 0.09), transparent 36%),
    radial-gradient(circle at 82% 30%, rgba(255, 222, 89, 0.08), transparent 34%) !important;
}

.logo-row,
.logo-track {
  background: transparent !important;
}

.service-grid[data-active-planet="landing"] .mission-rocket {
  transform: translate3d(var(--mission-x-landing), var(--mission-y-landing), 0) rotate(0deg) scale(0.96) !important;
}

.format-route {
  display: grid !important;
  gap: clamp(22px, 3.2vw, 44px) !important;
  max-width: min(100% - 32px, 1120px) !important;
  padding-left: 0 !important;
}

.format-route::before,
.format-route::after,
.format-elevator,
.format-card::before,
.format-card::after {
  display: none !important;
}

.format-card,
.format-card:nth-child(even) {
  width: 100% !important;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr) !important;
  gap: clamp(22px, 4vw, 56px) !important;
  padding: clamp(26px, 4vw, 48px) !important;
  align-items: center !important;
}

.format-card:nth-child(even) > .format-copy,
.format-card > .format-copy {
  order: 0 !important;
}

.format-card:nth-child(even) > .format-media,
.format-card > .format-media {
  order: 1 !important;
}

.format-copy h3 {
  font-size: clamp(42px, 5.2vw, 72px) !important;
  line-height: 0.96 !important;
  overflow-wrap: normal !important;
}

.format-copy p {
  max-width: 54ch !important;
}

.format-media-video {
  aspect-ratio: 16 / 9 !important;
  width: min(100%, 520px) !important;
  min-height: 0 !important;
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.24) !important;
}

.format-media-video video,
.reels-video-slot video {
  object-fit: cover !important;
}

.format-media-video .format-video-placeholder,
.reels-video-slot .format-video-placeholder {
  inset: 0 !important;
  display: grid !important;
  place-items: center !important;
  text-align: center !important;
  padding: 18px !important;
}

.format-media-video.is-video-loaded .format-video-placeholder,
.reels-video-slot.is-video-loaded .format-video-placeholder {
  display: none !important;
}

.format-media-reels {
  grid-template-columns: minmax(112px, 0.78fr) minmax(140px, 0.86fr) minmax(112px, 0.78fr) !important;
  justify-items: center !important;
  gap: clamp(18px, 3vw, 32px) !important;
}

.format-media-reels img {
  width: 100% !important;
  max-width: 190px !important;
  height: clamp(276px, 29vw, 380px) !important;
  background: #fff !important;
  border-radius: 14px !important;
  filter: none !important;
}

.format-media-reels .reels-video-slot {
  width: min(100%, 190px) !important;
  height: clamp(300px, 32vw, 420px) !important;
}

.launch-game {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.03)),
    radial-gradient(circle at 70% 18%, rgba(12, 192, 223, 0.14), transparent 34%),
    color-mix(in srgb, var(--card) 90%, transparent) !important;
}

.launch-stage {
  min-height: clamp(310px, 32vw, 420px) !important;
  cursor: grab !important;
}

.launch-game.active .launch-stage {
  cursor: grabbing !important;
}

.launch-tutorial {
  max-width: min(92%, 460px) !important;
}

.launch-game.active .launch-tutorial,
.launch-game.played .launch-tutorial {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translate(-50%, -50%) scale(0.96) !important;
}

.launch-start-button:disabled {
  opacity: 0.7 !important;
}

.launch-obstacle {
  font-size: clamp(12px, 1.2vw, 15px) !important;
  line-height: 1.1 !important;
  border-width: 2px !important;
}

.launch-obstacle.bonus {
  color: #061214 !important;
  background: linear-gradient(135deg, #5de9cd, #ffde59) !important;
}

.launch-obstacle.hazard {
  color: #fff7d7 !important;
  background: rgba(16, 21, 21, 0.92) !important;
  border-color: rgba(255, 222, 89, 0.72) !important;
}

.site-footer {
  min-height: 48px !important;
  margin-top: clamp(12px, 2vw, 22px) !important;
  margin-bottom: 0 !important;
  padding: 14px 0 max(18px, env(safe-area-inset-bottom)) !important;
}

.legal-shell {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)),
    color-mix(in srgb, var(--card) 88%, transparent) !important;
}

.legal-content p,
.legal-content li {
  overflow-wrap: anywhere;
}

@media (max-width: 1180px) {
  .hero {
    --hero-rocket-x: clamp(386px, 42vw, 526px);
    --hero-rocket-y: clamp(214px, 24vw, 290px);
  }

  .rocket-continue {
    left: calc(var(--hero-rocket-x) + 74px) !important;
    width: clamp(198px, 18vw, 238px) !important;
  }
}

@media (max-width: 900px) {
  .hero {
    --hero-rocket-x: clamp(292px, 45vw, 410px);
    --hero-rocket-y: clamp(220px, 34vw, 304px);
  }

  .rocket-continue {
    left: min(calc(var(--hero-rocket-x) + 70px), calc(100vw - 218px)) !important;
    top: calc(var(--hero-rocket-y) - 92px) !important;
  }

  .format-card,
  .format-card:nth-child(even) {
    grid-template-columns: 1fr !important;
  }

  .format-card > .format-copy,
  .format-card:nth-child(even) > .format-copy {
    order: 0 !important;
  }

  .format-card > .format-media,
  .format-card:nth-child(even) > .format-media {
    order: 1 !important;
  }
}

@media (max-width: 760px) {
  .site-header {
    width: calc(100% - 18px) !important;
  }

  .brand-logo-shell,
  .site-header .brand-logo-shell {
    width: clamp(136px, 42vw, 168px) !important;
    height: 34px !important;
  }

  .hero {
    --hero-rocket-x: clamp(172px, 48vw, 214px);
    --hero-rocket-y: clamp(246px, 68vw, 306px);
    text-align: left !important;
  }

  .hero-rocket {
    width: clamp(58px, 16vw, 70px) !important;
  }

  .rocket-continue {
    left: min(calc(var(--hero-rocket-x) + 48px), calc(100vw - 178px)) !important;
    top: calc(var(--hero-rocket-y) - 84px) !important;
    width: 172px !important;
    min-height: 82px !important;
    padding: 10px 20px 25px 20px !important;
    font-size: 13px !important;
  }

  .hero.rocket-launching .hero-rocket {
    offset-path: path("M 0 0 C 42 -26 78 -65 98 -99 C 120 -136 88 -174 46 -160 C -8 -142 -22 -88 12 -58 C 42 -32 78 -37 105 -68 C 168 -140 276 -202 456 -286 C 574 -342 678 -382 780 -430") !important;
  }

  .proof-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .proof-grid div {
    min-height: 96px !important;
    padding: 16px 14px !important;
  }

  .proof-grid strong {
    font-size: clamp(22px, 7.2vw, 30px) !important;
  }

  .service-grid[data-active-planet="landing"] .mission-rocket {
    transform: translate3d(0, var(--mission-mobile-y-landing, 980px), 0) rotate(0deg) scale(0.9) !important;
  }

  .format-route {
    max-width: calc(100% - 18px) !important;
  }

  .format-card,
  .format-card:nth-child(even) {
    padding: 22px 16px !important;
  }

  .format-copy h3 {
    font-size: clamp(31px, 9.8vw, 43px) !important;
    line-height: 1 !important;
  }

  .format-copy p {
    font-size: 15px !important;
    line-height: 1.55 !important;
  }

  .format-media-video {
    width: 100% !important;
    max-width: 100% !important;
  }

  .format-media-reels {
    grid-template-columns: minmax(72px, 0.7fr) minmax(92px, 0.86fr) minmax(72px, 0.7fr) !important;
    gap: 10px !important;
  }

  .format-media-reels img {
    height: clamp(198px, 55vw, 270px) !important;
    border-radius: 10px !important;
  }

  .format-media-reels .reels-video-slot {
    height: clamp(220px, 64vw, 300px) !important;
  }

  .launch-stage {
    min-height: 330px !important;
  }

  .launch-obstacle {
    max-width: 132px !important;
    font-size: 11px !important;
  }

  .site-footer {
    width: calc(100% - 24px) !important;
    justify-content: center !important;
    padding-bottom: max(18px, env(safe-area-inset-bottom)) !important;
  }
}

@media (max-width: 430px) {
  .hero {
    --hero-rocket-x: clamp(154px, 45vw, 186px);
    --hero-rocket-y: clamp(246px, 70vw, 292px);
  }

  .rocket-continue {
    left: min(calc(var(--hero-rocket-x) + 42px), calc(100vw - 160px)) !important;
    top: calc(var(--hero-rocket-y) - 78px) !important;
    width: 154px !important;
    min-height: 76px !important;
    font-size: 12px !important;
  }
}

@keyframes v64RocketArrive {
  0% {
    opacity: 0;
    transform: translate3d(-42vw, 16vh, 0) rotate(54deg) scale(0.94);
  }
  72% {
    opacity: 1;
    transform: translate3d(6px, -3px, 0) rotate(54deg) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(54deg) scale(1);
  }
}

@keyframes v64HeroRocketExit {
  0% {
    opacity: 1;
    offset-distance: 0%;
  }
  34% {
    opacity: 1;
    offset-distance: 22%;
  }
  58% {
    opacity: 1;
    offset-distance: 38%;
  }
  100% {
    opacity: 0;
    offset-distance: 100%;
  }
}

@keyframes v64SpaceAura {
  from {
    transform: translate3d(-2.4%, -1.4%, 0) scale(1) rotate(-0.4deg);
  }
  to {
    transform: translate3d(2.2%, 1.6%, 0) scale(1.04) rotate(0.5deg);
  }
}

@keyframes v64SpaceGrid {
  from {
    background-position: 0 0, 0 0, 0 0, 0 0;
  }
  to {
    background-position: 98px 98px, 98px 98px, 156px 156px, 340px 340px;
  }
}

.hero {
  --hero-rocket-x: clamp(520px, 41vw, 610px);
  --hero-rocket-y: clamp(118px, 10.2vw, 142px);
}

.rocket-continue {
  top: calc(var(--hero-rocket-y) - clamp(96px, 7vw, 108px)) !important;
  left: min(calc(var(--hero-rocket-x) + 64px), calc(100% - 244px)) !important;
  width: clamp(214px, 16vw, 232px) !important;
  font-size: clamp(16px, 1.2vw, 19px) !important;
}

.proof-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: clamp(8px, 1vw, 12px) !important;
}

.proof-grid div {
  min-width: 0 !important;
  padding: 17px 12px !important;
}

.proof-grid strong {
  font-size: clamp(20px, 1.58vw, 29px) !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
}

.trust-strip {
  background: transparent !important;
}

.logo-marquee,
.logo-row {
  background: transparent !important;
}

@media (max-width: 1180px) {
  .hero {
    --hero-rocket-x: clamp(380px, 43vw, 500px);
    --hero-rocket-y: clamp(178px, 22vw, 246px);
  }

  .rocket-continue {
    left: min(calc(var(--hero-rocket-x) + 66px), calc(100% - 226px)) !important;
  }
}

@media (max-width: 900px) {
  .hero {
    --hero-rocket-x: clamp(286px, 44vw, 390px);
    --hero-rocket-y: clamp(204px, 33vw, 286px);
  }

  .rocket-continue {
    top: calc(var(--hero-rocket-y) - 86px) !important;
    left: min(calc(var(--hero-rocket-x) + 62px), calc(100vw - 212px)) !important;
  }
}

@media (max-width: 760px) {
  .hero {
    --hero-rocket-x: clamp(164px, 47vw, 208px);
    --hero-rocket-y: clamp(236px, 64vw, 292px);
  }

  .rocket-continue {
    top: calc(var(--hero-rocket-y) - 78px) !important;
    left: min(calc(var(--hero-rocket-x) + 48px), calc(100vw - 188px)) !important;
    width: 178px !important;
    min-height: 86px !important;
    font-size: clamp(14px, 3.8vw, 16px) !important;
    line-height: 1.03 !important;
  }

  .proof-grid strong {
    font-size: clamp(21px, 6.6vw, 28px) !important;
  }

  .proof-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .proof-grid div {
    padding: 16px 14px !important;
  }
}

@media (max-width: 430px) {
  .hero {
    --hero-rocket-x: clamp(152px, 45vw, 184px);
    --hero-rocket-y: clamp(240px, 68vw, 284px);
  }

  .rocket-continue {
    left: min(calc(var(--hero-rocket-x) + 48px), calc(100vw - 184px)) !important;
    width: 176px !important;
    min-height: 84px !important;
    font-size: 14px !important;
  }
}

.brand-logo-shell,
.site-header .brand-logo-shell {
  width: clamp(176px, 13vw, 226px) !important;
  height: clamp(42px, 3.4vw, 56px) !important;
  min-width: 0 !important;
  display: block !important;
  overflow: visible !important;
}

.brand-wordmark {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: left center !important;
}

.hero {
  --hero-rocket-x: clamp(538px, 42vw, 680px);
  --hero-rocket-y: clamp(196px, 16vw, 260px);
}

.hero-rocket {
  top: var(--hero-rocket-y) !important;
  left: var(--hero-rocket-x) !important;
}

.hero:not(.hero-video-started) .hero-rocket {
  animation: v66HeroRocketIn 1.65s cubic-bezier(0.18, 0.82, 0.17, 1) 0.25s both !important;
}

.hero.rocket-launching .hero-rocket {
  offset-path: none !important;
  offset-distance: auto !important;
  offset-rotate: 0deg !important;
  animation: v66HeroRocketOut 1.35s cubic-bezier(0.2, 0.82, 0.18, 1) both !important;
}

.hero.hero-video-started:not(.rocket-launching) .hero-rocket,
.hero.rocket-gone .hero-rocket {
  opacity: 0 !important;
  pointer-events: none !important;
  animation: none !important;
  transform: translate3d(38vw, -22vh, 0) rotate(50deg) scale(0.92) !important;
}

.rocket-continue {
  top: calc(var(--hero-rocket-y) - clamp(76px, 6.2vw, 96px)) !important;
  left: min(calc(var(--hero-rocket-x) + clamp(74px, 6vw, 104px)), calc(100% - 220px)) !important;
  z-index: 5 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: auto !important;
  min-width: 188px !important;
  min-height: 58px !important;
  padding: 12px 15px 12px 19px !important;
  border: 3px solid color-mix(in srgb, #071014 88%, var(--cyan)) !important;
  border-radius: 999px !important;
  background: linear-gradient(145deg, #fbfff4 0%, #f0fff4 55%, #fff7cf 100%) !important;
  clip-path: none !important;
  color: #071014 !important;
  font-size: clamp(14px, 1.05vw, 17px) !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-shadow: none !important;
  white-space: nowrap !important;
  box-shadow:
    0 0 28px color-mix(in srgb, var(--cyan) 24%, transparent),
    inset 0 2px 0 rgba(255, 255, 255, 0.9),
    inset 0 -6px 14px rgba(7, 16, 20, 0.08) !important;
  filter: none !important;
  opacity: 0 !important;
  transform: translate3d(0, 10px, 0) scale(0.92) !important;
  animation: v66BubbleIn 420ms ease 1.85s forwards, rocketPromptPulse 1.8s ease-in-out 2.35s infinite !important;
}

.rocket-continue::before {
  position: absolute !important;
  left: 25px !important;
  bottom: -17px !important;
  width: 34px !important;
  height: 24px !important;
  border-left: 3px solid color-mix(in srgb, #071014 88%, var(--cyan)) !important;
  border-bottom: 3px solid color-mix(in srgb, #071014 88%, var(--cyan)) !important;
  background: inherit !important;
  clip-path: polygon(0 0, 100% 0, 0 100%) !important;
  transform: skewX(-10deg) !important;
  content: "" !important;
}

.rocket-continue::after {
  content: none !important;
}

.rocket-continue span:first-child {
  display: inline-block !important;
}

.bubble-play {
  position: relative !important;
  display: inline-grid !important;
  flex: 0 0 auto !important;
  width: 30px !important;
  height: 30px !important;
  place-items: center !important;
  border-radius: 50% !important;
  background: var(--gradient) !important;
  box-shadow: 0 5px 14px color-mix(in srgb, var(--cyan) 24%, transparent) !important;
}

.bubble-play::before {
  width: 0 !important;
  height: 0 !important;
  margin-left: 3px !important;
  border-top: 7px solid transparent !important;
  border-bottom: 7px solid transparent !important;
  border-left: 10px solid #071014 !important;
  content: "" !important;
}

.hero.hero-video-started .rocket-continue,
.hero.rocket-launching .rocket-continue {
  pointer-events: none !important;
  opacity: 0 !important;
  animation: none !important;
  transform: translate3d(18px, -8px, 0) scale(0.88) !important;
}

.format-copy h3 {
  max-width: 100% !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}

.format-media-video,
.format-media-landscape,
.format-media-reels,
.reels-video-slot {
  min-width: 0 !important;
  max-width: 100% !important;
}

.format-media-reels {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(10px, 1.6vw, 18px) !important;
  max-width: min(680px, 100%) !important;
}

.format-media-reels img {
  display: none !important;
}

.format-media-reels .reels-video-slot {
  width: 100% !important;
  height: clamp(270px, 27vw, 382px) !important;
  aspect-ratio: 9 / 16 !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.34), transparent 20%),
    linear-gradient(160deg, rgba(12, 192, 223, 0.22), rgba(255, 222, 89, 0.18)) !important;
}

.launch-obstacle {
  will-change: transform, opacity !important;
}

.launch-obstacle.is-hidden {
  opacity: 0 !important;
  pointer-events: none !important;
}

.launch-start-button:not(:disabled) {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--cyan) 36%, transparent),
    0 18px 34px color-mix(in srgb, var(--cyan) 18%, transparent) !important;
}

@media (max-width: 1180px) {
  .hero {
    --hero-rocket-x: clamp(386px, 42vw, 520px);
    --hero-rocket-y: clamp(206px, 22vw, 286px);
  }
}

@media (max-width: 900px) {
  .hero {
    --hero-rocket-x: clamp(286px, 45vw, 410px);
    --hero-rocket-y: clamp(226px, 35vw, 306px);
  }

  .rocket-continue {
    left: min(calc(var(--hero-rocket-x) + 66px), calc(100vw - 208px)) !important;
    top: calc(var(--hero-rocket-y) - 86px) !important;
  }
}

@media (max-width: 760px) {
  .site-header {
    display: grid !important;
    grid-template-columns: minmax(144px, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
    width: calc(100% - 22px) !important;
    padding: 10px 12px !important;
    overflow: visible !important;
  }

  .brand-logo-shell,
  .site-header .brand-logo-shell {
    width: clamp(152px, 42vw, 186px) !important;
    height: 42px !important;
  }

  .header-actions {
    gap: 8px !important;
  }

  .hero {
    --hero-rocket-x: clamp(166px, 46vw, 214px);
    --hero-rocket-y: clamp(236px, 61vw, 288px);
  }

  .hero-rocket {
    width: clamp(58px, 16vw, 72px) !important;
  }

  .rocket-continue {
    min-width: 0 !important;
    width: auto !important;
    min-height: 50px !important;
    padding: 10px 12px 10px 14px !important;
    left: min(calc(var(--hero-rocket-x) + 52px), calc(100vw - 182px)) !important;
    top: calc(var(--hero-rocket-y) - 70px) !important;
    gap: 8px !important;
    font-size: 13px !important;
  }

  .rocket-continue::before {
    left: 19px !important;
    bottom: -14px !important;
    width: 27px !important;
    height: 19px !important;
  }

  .bubble-play {
    width: 26px !important;
    height: 26px !important;
  }

  .service-grid {
    --mission-mobile-x: 50%;
  }

  .mission-rocket {
    left: var(--mission-mobile-x) !important;
    top: 24px !important;
    width: 58px !important;
    transition: transform 520ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 200ms ease !important;
    transform: translate3d(-50%, var(--mission-mobile-y-orbit, 430px), 0) rotate(180deg) scale(0.84) !important;
  }

  .service-grid[data-active-planet="start"] .mission-rocket {
    transform: translate3d(-50%, var(--mission-mobile-y-start, 40px), 0) rotate(180deg) scale(0.84) !important;
  }

  .service-grid[data-active-planet="orbit"] .mission-rocket {
    transform: translate3d(-50%, var(--mission-mobile-y-orbit, 430px), 0) rotate(180deg) scale(0.84) !important;
  }

  .service-grid[data-active-planet="landing"] .mission-rocket {
    transform: translate3d(-50%, var(--mission-mobile-y-landing, 860px), 0) rotate(180deg) scale(0.84) !important;
  }

  .format-card,
  .format-card:nth-child(even) {
    grid-template-columns: minmax(0, 1fr) !important;
    padding: 22px 16px !important;
  }

  .format-card > .format-copy,
  .format-card:nth-child(even) > .format-copy,
  .format-card > .format-media,
  .format-card:nth-child(even) > .format-media {
    grid-column: 1 !important;
  }

  .format-copy h3 {
    font-size: clamp(30px, 8.4vw, 40px) !important;
    line-height: 1.02 !important;
  }

  .format-copy p {
    font-size: 15px !important;
    line-height: 1.55 !important;
  }

  .format-media-reels {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }

  .format-media-reels .reels-video-slot {
    height: clamp(176px, 50vw, 244px) !important;
    border-radius: 12px !important;
  }

  .launch-stage {
    min-height: 360px !important;
  }

  .launch-obstacle {
    max-width: min(142px, 39vw) !important;
    font-size: 11px !important;
  }
}

@media (max-width: 430px) {
  .site-header {
    grid-template-columns: minmax(128px, 1fr) auto !important;
  }

  .brand-logo-shell,
  .site-header .brand-logo-shell {
    width: clamp(136px, 39vw, 156px) !important;
    height: 38px !important;
  }

  .header-actions {
    gap: 6px !important;
  }

  .hero {
    --hero-rocket-x: clamp(154px, 45vw, 186px);
    --hero-rocket-y: clamp(230px, 64vw, 276px);
  }

  .rocket-continue {
    left: min(calc(var(--hero-rocket-x) + 42px), calc(100vw - 164px)) !important;
    top: calc(var(--hero-rocket-y) - 64px) !important;
    font-size: 12px !important;
  }

  .bubble-play {
    width: 24px !important;
    height: 24px !important;
  }

  .proof-grid strong {
    font-size: clamp(20px, 6.2vw, 26px) !important;
  }
}

@keyframes v66HeroRocketIn {
  0% {
    opacity: 0;
    transform: translate3d(-34vw, 13vh, 0) rotate(54deg) scale(0.92);
  }
  70% {
    opacity: 1;
    transform: translate3d(10px, -4px, 0) rotate(54deg) scale(1.03);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(54deg) scale(1);
  }
}

@keyframes v66HeroRocketOut {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(54deg) scale(1);
  }
  72% {
    opacity: 1;
    transform: translate3d(28vw, -16vh, 0) rotate(51deg) scale(1.02);
  }
  100% {
    opacity: 0;
    transform: translate3d(44vw, -26vh, 0) rotate(49deg) scale(0.94);
  }
}

@keyframes v66BubbleIn {
  from {
    opacity: 0;
    transform: translate3d(0, 10px, 0) scale(0.92);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

.brand-logo-shell,
.site-header .brand-logo-shell {
  width: clamp(190px, 15vw, 238px) !important;
  height: 50px !important;
  overflow: visible !important;
}

.brand-wordmark {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: contain !important;
}

.rocket-continue {
  isolation: isolate !important;
  overflow: visible !important;
  min-width: 194px !important;
  min-height: 58px !important;
  padding: 12px 14px 12px 18px !important;
  border: 2px solid color-mix(in srgb, var(--ink) 76%, transparent) !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--bg) 92%, white 8%) !important;
  background-image: none !important;
  color: var(--ink) !important;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--cyan) 26%, transparent),
    0 16px 28px color-mix(in srgb, var(--cyan) 18%, transparent) !important;
}

.rocket-continue::before {
  content: "" !important;
  position: absolute !important;
  left: 24px !important;
  bottom: -18px !important;
  width: 34px !important;
  height: 25px !important;
  background: inherit !important;
  border-left: 2px solid color-mix(in srgb, var(--ink) 76%, transparent) !important;
  border-bottom: 2px solid color-mix(in srgb, var(--ink) 76%, transparent) !important;
  clip-path: polygon(0 0, 100% 0, 0 100%) !important;
  transform: skewX(-13deg) !important;
  z-index: -1 !important;
}

.rocket-continue span:first-child {
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}

.bubble-play {
  display: inline-grid !important;
  place-items: center !important;
  width: 30px !important;
  height: 30px !important;
  flex: 0 0 auto !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, var(--cyan), var(--yellow)) !important;
  box-shadow: 0 0 18px color-mix(in srgb, var(--cyan) 32%, transparent) !important;
}

.bubble-play::before {
  content: "" !important;
  display: block !important;
  width: 0 !important;
  height: 0 !important;
  margin-left: 2px !important;
  border-top: 7px solid transparent !important;
  border-bottom: 7px solid transparent !important;
  border-left: 10px solid var(--ink) !important;
}

.hero:not(.hero-video-started) .hero-rocket {
  animation: v69HeroRocketIn 1.28s cubic-bezier(0.2, 0.8, 0.2, 1) both !important;
}

.hero.rocket-launching .hero-rocket {
  animation: v69HeroRocketOut 0.86s cubic-bezier(0.23, 1, 0.32, 1) forwards !important;
}

.format-copy,
.format-media {
  min-width: 0 !important;
}

.format-copy h3 {
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

.format-media video,
.format-media img {
  max-width: 100% !important;
}

.format-media-reels .reels-video-slot {
  min-width: 0 !important;
  overflow: hidden !important;
}

.launch-obstacle {
  will-change: transform !important;
}

@media (max-width: 760px) {
  .brand-logo-shell,
  .site-header .brand-logo-shell {
    width: clamp(168px, 46vw, 206px) !important;
    height: 46px !important;
  }

  .brand {
    min-width: clamp(168px, 46vw, 206px) !important;
  }

  .site-header {
    grid-template-columns: minmax(168px, 1fr) auto !important;
  }

  .rocket-continue {
    min-width: 174px !important;
    min-height: 52px !important;
    font-size: 13px !important;
    left: min(calc(var(--hero-rocket-x) + 54px), calc(100vw - 188px)) !important;
    top: calc(var(--hero-rocket-y) - 76px) !important;
  }

  .format-card,
  .format-card:nth-child(even) {
    gap: 18px !important;
  }

  .format-copy h3 {
    font-size: clamp(28px, 7.6vw, 38px) !important;
    max-inline-size: 100% !important;
  }
}

@media (max-width: 430px) {
  .brand-logo-shell,
  .site-header .brand-logo-shell {
    width: clamp(158px, 44vw, 184px) !important;
    height: 42px !important;
  }

  .brand {
    min-width: clamp(158px, 44vw, 184px) !important;
  }

  .site-header {
    grid-template-columns: minmax(158px, 1fr) auto !important;
  }

  .rocket-continue {
    min-width: 166px !important;
    left: min(calc(var(--hero-rocket-x) + 44px), calc(100vw - 176px)) !important;
    top: calc(var(--hero-rocket-y) - 70px) !important;
    font-size: 12.5px !important;
  }
}

@media (max-width: 370px) {
  .brand-logo-shell,
  .site-header .brand-logo-shell,
  .brand {
    width: 148px !important;
    min-width: 148px !important;
  }
}

@keyframes v69HeroRocketIn {
  0% {
    opacity: 0;
    transform: translate3d(-30vw, 12vh, 0) rotate(54deg) scale(0.92);
  }
  82% {
    opacity: 1;
    transform: translate3d(8px, -4px, 0) rotate(54deg) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(54deg) scale(1);
  }
}

@keyframes v69HeroRocketOut {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(54deg) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate3d(42vw, -24vh, 0) rotate(50deg) scale(0.94);
  }
}

.site-header {
  overflow: visible !important;
}

.brand,
.site-header .brand {
  flex: 0 0 auto !important;
  min-width: clamp(190px, 17vw, 250px) !important;
}

.brand-logo-shell,
.site-header .brand-logo-shell {
  width: clamp(190px, 17vw, 250px) !important;
  height: clamp(44px, 4vw, 58px) !important;
  display: block !important;
  overflow: visible !important;
}

.brand-wordmark {
  position: static !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: left center !important;
  transform: none !important;
}

.hero-cover-play {
  display: grid !important;
  place-items: center !important;
}

@media (max-width: 760px) {
  .hero {
    align-items: start !important;
    gap: 18px !important;
  }

  .hero-copy {
    display: contents !important;
  }

  .hero-title {
    order: 1 !important;
    width: 100% !important;
    font-size: clamp(42px, 12.6vw, 54px) !important;
  }

  .word-rotator {
    width: 100% !important;
    overflow: visible !important;
  }

  .hero-copy p {
    order: 2 !important;
    width: 100% !important;
  }

  .hero-visual {
    order: 3 !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .hero-actions {
    order: 4 !important;
    width: 100% !important;
    margin-top: 2px !important;
  }

  .proof-grid {
    order: 5 !important;
    width: 100% !important;
  }

  .phone-shell {
    width: min(58vw, 218px) !important;
  }

  .hero-cover-rocket {
    width: min(86%, 188px) !important;
  }
}

@media (max-width: 430px) {
  .hero-title {
    font-size: clamp(40px, 12.2vw, 50px) !important;
  }

  .phone-shell {
    width: min(58vw, 212px) !important;
  }
}

html,
body {
  min-height: 100%;
  background:
    radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--cyan) 18%, transparent), transparent 34%),
    radial-gradient(circle at 78% 22%, color-mix(in srgb, var(--yellow) 12%, transparent), transparent 32%),
    radial-gradient(circle at 46% 82%, color-mix(in srgb, var(--cyan) 11%, transparent), transparent 40%),
    var(--bg) !important;
}

body::before {
  position: fixed !important;
  inset: 0 !important;
  z-index: -3 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.52) 0 1px, transparent 2px),
    radial-gradient(circle, color-mix(in srgb, var(--cyan) 46%, transparent) 0 1px, transparent 2px),
    radial-gradient(circle, color-mix(in srgb, var(--yellow) 36%, transparent) 0 1px, transparent 2px);
  background-position: 12px 18px, 88px 62px, 156px 124px;
  background-size: 190px 190px, 270px 270px, 340px 340px;
  opacity: 0.34 !important;
  animation: v77StarDrift 46s linear infinite !important;
  content: "" !important;
}

body::after,
main::before {
  position: fixed !important;
  inset: -18% !important;
  z-index: -2 !important;
  pointer-events: none !important;
  background:
    radial-gradient(ellipse at 20% 28%, color-mix(in srgb, var(--cyan) 20%, transparent), transparent 42%),
    radial-gradient(ellipse at 74% 38%, color-mix(in srgb, var(--yellow) 12%, transparent), transparent 38%),
    radial-gradient(ellipse at 52% 86%, color-mix(in srgb, #6ee0a8 9%, transparent), transparent 46%) !important;
  filter: blur(12px) !important;
  opacity: 0.62 !important;
  transform: translate3d(0, 0, 0);
  animation: v77NebulaDrift 24s ease-in-out infinite alternate !important;
  content: "" !important;
}

main::before {
  animation-duration: 31s !important;
  animation-direction: alternate-reverse !important;
  opacity: 0.44 !important;
}

.section-pad::before,
.section-pad::after,
.hero::before,
.hero::after,
.trust-strip::before,
.trust-strip::after,
.services::before,
.services::after,
.specializations::before,
.specializations::after,
.testimonials::before,
.testimonials::after,
.process::before,
.process::after,
.about::before,
.about::after,
.cta::before,
.cta::after,
.launch-game::before {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  opacity: 0 !important;
}

.site-header {
  width: min(1040px, calc(100vw - 56px)) !important;
  min-height: 72px !important;
  margin-top: 16px !important;
  background: color-mix(in srgb, var(--bg) 80%, transparent) !important;
}

.brand,
.site-header .brand {
  flex: 0 0 auto !important;
  min-width: clamp(210px, 17vw, 250px) !important;
  width: clamp(210px, 17vw, 250px) !important;
  max-width: clamp(210px, 17vw, 250px) !important;
}

.brand-logo-shell,
.site-header .brand-logo-shell {
  width: 100% !important;
  height: 48px !important;
  overflow: visible !important;
}

.brand-wordmark {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  transform: translate(-50%, -50%) scale(1.18) !important;
}

.hero-copy {
  align-self: center !important;
}

.hero-title {
  margin: 0 !important;
  min-height: 0 !important;
}

.word-rotator {
  min-height: 1.04em !important;
}

.hero-copy p {
  margin: clamp(22px, 3vh, 32px) 0 0 !important;
  max-width: 680px !important;
}

.phone-screen {
  position: absolute !important;
  inset: 4.45% 5.35% 5.05% !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  border-radius: clamp(30px, 2.2vw, 43px) !important;
}

.phone-screen .video-placeholder {
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  min-height: 100% !important;
  border: 0 !important;
  border-radius: inherit !important;
}

.hero-cover-rocket {
  position: relative !important;
  display: grid !important;
  width: min(88%, 318px) !important;
  max-height: 54% !important;
  place-items: center !important;
  margin: 0 auto !important;
  filter: drop-shadow(0 0 34px color-mix(in srgb, var(--cyan) 46%, transparent)) !important;
}

.hero-cover-rocket img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
}

.hero-cover-play {
  position: absolute !important;
  top: 45% !important;
  left: 54% !important;
  display: grid !important;
  width: clamp(42px, 5vw, 58px) !important;
  height: clamp(42px, 5vw, 58px) !important;
  place-items: center !important;
  border-radius: 50% !important;
  background: var(--gradient) !important;
  box-shadow: 0 0 34px color-mix(in srgb, var(--cyan) 42%, transparent) !important;
  transform: translate(-50%, -50%) !important;
}

.hero-cover-title,
.hero-cover-label {
  position: relative !important;
  z-index: 2 !important;
}

.proof-grid strong {
  white-space: normal !important;
}

.format-card,
.format-card:nth-child(even) {
  overflow: clip !important;
}

.format-copy {
  min-width: 0 !important;
}

.format-copy h3 {
  line-height: 1.02 !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

.format-copy p,
.format-copy li,
.service-card p,
.service-card li {
  overflow-wrap: anywhere !important;
}

.format-media,
.format-media-video,
.format-media-landscape,
.format-media-reels {
  min-width: 0 !important;
  max-width: 100% !important;
}

.format-media-reels {
  align-items: center !important;
}

.reels-video-slot {
  aspect-ratio: 9 / 16 !important;
  min-height: 0 !important;
  height: min(30vw, 330px) !important;
}

.launch-game {
  background:
    radial-gradient(circle at 22% 18%, color-mix(in srgb, var(--cyan) 15%, transparent), transparent 34%),
    radial-gradient(circle at 86% 72%, color-mix(in srgb, var(--yellow) 12%, transparent), transparent 36%),
    color-mix(in srgb, var(--surface) 90%, transparent) !important;
}

.launch-stage {
  min-height: 420px !important;
}

.launch-obstacle,
.launch-obstacle.star,
.launch-obstacle.comet,
.launch-obstacle.rock {
  display: inline-flex !important;
  width: max-content !important;
  min-width: 118px !important;
  max-width: min(230px, 36vw) !important;
  height: auto !important;
  min-height: 38px !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px 12px !important;
  overflow: visible !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
  text-align: center !important;
  line-height: 1.08 !important;
  color: var(--text) !important;
  font-size: clamp(12px, 0.92vw, 14px) !important;
}

.launch-obstacle.star::before,
.launch-obstacle.comet::before,
.launch-obstacle.rock::before {
  flex: 0 0 auto !important;
  width: 18px !important;
  height: 18px !important;
  margin-right: 6px !important;
}

@media (max-width: 980px) {
  .site-header {
    width: calc(100vw - 32px) !important;
  }

  .desktop-nav {
    gap: 18px !important;
  }
}

@media (max-width: 760px) {
  .site-header {
    grid-template-columns: minmax(150px, 1fr) auto !important;
    width: calc(100% - 16px) !important;
    min-height: 58px !important;
    margin-top: 8px !important;
    padding: 7px 9px !important;
  }

  .site-header.menu-open {
    min-height: 58px !important;
  }

  .brand,
  .site-header .brand {
    min-width: clamp(150px, 44vw, 196px) !important;
    width: clamp(150px, 44vw, 196px) !important;
    max-width: clamp(150px, 44vw, 196px) !important;
    min-height: 42px !important;
  }

  .brand-logo-shell,
  .site-header .brand-logo-shell {
    height: 42px !important;
  }

  .header-actions {
    gap: 6px !important;
  }

  .lang-toggle,
  .theme-toggle,
  .menu-toggle {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
  }

  .mobile-nav {
    margin-top: 8px !important;
    gap: 7px !important;
  }

  .mobile-nav a {
    min-height: 40px !important;
    padding: 10px 12px !important;
  }

  .mobile-nav a[href="#strategie"] {
    display: block !important;
  }

  .hero {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
    padding-top: 42px !important;
    padding-bottom: 54px !important;
    gap: 28px !important;
  }

  .hero-copy {
    display: grid !important;
    gap: 18px !important;
    align-content: start !important;
  }

  .hero-title {
    gap: 2px !important;
    margin: 0 !important;
    font-size: clamp(48px, 15vw, 64px) !important;
  }

  .word-rotator {
    min-height: 1.04em !important;
  }

  .hero-copy p {
    margin: 0 !important;
    max-width: 100% !important;
    font-size: clamp(17px, 4.4vw, 20px) !important;
  }

  .hero-actions {
    margin-top: 2px !important;
  }

  .proof-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    margin-top: 0 !important;
  }

  .proof-grid strong {
    font-size: clamp(25px, 7.8vw, 32px) !important;
    line-height: 1.02 !important;
  }

  .phone-shell {
    width: min(74vw, 284px) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 390 / 760 !important;
  }

  .phone-screen {
    inset: 4.7% 5.6% 5.15% !important;
  }

  .hero-cover-rocket {
    width: min(88%, 232px) !important;
    max-height: 52% !important;
  }

  .hero-cover-play {
    width: 42px !important;
    height: 42px !important;
  }

  .hero-cover-title {
    font-size: clamp(21px, 6vw, 27px) !important;
  }

  .format-route {
    padding-left: 0 !important;
  }

  .format-card,
  .format-card:nth-child(even) {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    padding: 22px 16px !important;
  }

  .format-card > .format-copy,
  .format-card:nth-child(even) > .format-copy {
    order: 1 !important;
  }

  .format-card > .format-media,
  .format-card:nth-child(even) > .format-media {
    order: 2 !important;
  }

  .format-copy h3 {
    max-width: 100% !important;
    font-size: clamp(28px, 7.2vw, 36px) !important;
  }

  .format-copy p {
    font-size: 14px !important;
    line-height: 1.45 !important;
  }

  .format-media-video,
  .format-media-landscape {
    aspect-ratio: 16 / 9 !important;
  }

  .format-media-reels {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    padding: 10px !important;
  }

  .reels-video-slot,
  .format-media-reels .reels-video-slot {
    width: 100% !important;
    height: clamp(148px, 43vw, 214px) !important;
  }

  .launch-game {
    padding: 18px 16px !important;
  }

  .launch-stage {
    min-height: 430px !important;
  }

  .launch-obstacle,
  .launch-obstacle.star,
  .launch-obstacle.comet,
  .launch-obstacle.rock {
    min-width: 104px !important;
    max-width: min(150px, 38vw) !important;
    padding: 7px 9px !important;
    font-size: 12px !important;
  }
}

@media (max-width: 430px) {
  .site-header {
    grid-template-columns: minmax(136px, 1fr) auto !important;
  }

  .brand,
  .site-header .brand {
    min-width: 136px !important;
    width: 136px !important;
    max-width: 136px !important;
  }

  .brand-logo-shell,
  .site-header .brand-logo-shell {
    height: 38px !important;
  }

  .hero-title {
    font-size: clamp(44px, 14vw, 58px) !important;
  }

  .phone-shell {
    width: min(76vw, 270px) !important;
  }

  .launch-obstacle,
  .launch-obstacle.star,
  .launch-obstacle.comet,
  .launch-obstacle.rock {
    max-width: 132px !important;
    min-width: 96px !important;
  }
}

@keyframes v77StarDrift {
  0% {
    background-position: 12px 18px, 88px 62px, 156px 124px;
  }
  100% {
    background-position: 312px 548px, 408px 506px, 516px 644px;
  }
}

@keyframes v77NebulaDrift {
  0% {
    transform: translate3d(-2%, -1%, 0) scale(1);
  }
  100% {
    transform: translate3d(2%, 1.5%, 0) scale(1.04);
  }
}

:root {
  --space-bg-dark: #031112;
  --space-bg-light: #f3fbfc;
}

body {
  background:
    radial-gradient(circle at 14% 18%, color-mix(in srgb, var(--cyan) 22%, transparent), transparent 28rem),
    radial-gradient(circle at 82% 22%, color-mix(in srgb, var(--yellow) 14%, transparent), transparent 26rem),
    radial-gradient(circle at 52% 80%, color-mix(in srgb, var(--cyan) 12%, transparent), transparent 34rem),
    linear-gradient(180deg, #02090b 0%, var(--space-bg-dark) 48%, #020809 100%) !important;
}

:root[data-theme="light"] body {
  background:
    radial-gradient(circle at 16% 16%, color-mix(in srgb, var(--cyan) 20%, transparent), transparent 28rem),
    radial-gradient(circle at 82% 24%, color-mix(in srgb, var(--yellow) 16%, transparent), transparent 26rem),
    radial-gradient(circle at 52% 78%, color-mix(in srgb, var(--cyan) 12%, transparent), transparent 32rem),
    linear-gradient(180deg, #ffffff 0%, var(--space-bg-light) 48%, #ffffff 100%) !important;
}

body::before {
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.64) 0 1px, transparent 1.7px),
    radial-gradient(circle, color-mix(in srgb, var(--cyan) 46%, transparent) 0 1.2px, transparent 1.9px),
    radial-gradient(circle, color-mix(in srgb, var(--yellow) 36%, transparent) 0 1px, transparent 1.7px),
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px) !important;
  background-position: 0 0, 80px 44px, 140px 100px, 0 0, 0 0 !important;
  background-size: 260px 260px, 340px 340px, 420px 420px, 92px 92px, 92px 92px !important;
  mask-image: none !important;
  opacity: 0.72 !important;
  animation: v75SpaceField 48s linear infinite !important;
}

:root[data-theme="light"] body::before {
  opacity: 0.42 !important;
  filter: saturate(1.2);
}

body::after,
main::before {
  background:
    radial-gradient(ellipse at 18% 22%, color-mix(in srgb, var(--cyan) 15%, transparent), transparent 34%),
    radial-gradient(ellipse at 78% 36%, color-mix(in srgb, var(--yellow) 12%, transparent), transparent 36%),
    radial-gradient(ellipse at 56% 78%, color-mix(in srgb, var(--cyan) 9%, transparent), transparent 38%),
    linear-gradient(112deg, transparent 18%, color-mix(in srgb, var(--cyan) 5%, transparent) 42%, transparent 68%) !important;
  opacity: 0.72 !important;
  transform: translate3d(0, 0, 0) !important;
  animation: v75NebulaFlow 36s ease-in-out infinite alternate !important;
}

.hero,
.trust-strip,
.services,
.specializations,
.testimonials,
.process,
.about,
.cta,
.faq,
.legal-page,
.footer-wrap {
  background: transparent !important;
}

.site-header {
  width: min(1120px, calc(100vw - 56px)) !important;
  min-height: 76px !important;
  padding: 12px 18px !important;
  grid-template-columns: minmax(212px, auto) 1fr auto !important;
  gap: 22px !important;
}

.site-header .brand,
.brand {
  width: clamp(214px, 18vw, 258px) !important;
  min-width: clamp(214px, 18vw, 258px) !important;
  max-width: clamp(214px, 18vw, 258px) !important;
  min-height: 48px !important;
  overflow: visible !important;
}

.site-header .brand-logo-shell,
.brand-logo-shell {
  width: 100% !important;
  height: 48px !important;
  overflow: visible !important;
  place-items: center start !important;
}

.brand-wordmark {
  position: absolute !important;
  inset: 0 auto auto 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  object-fit: contain !important;
  object-position: left center !important;
  transform: none !important;
}

.desktop-nav {
  justify-content: center !important;
  gap: clamp(28px, 3vw, 48px) !important;
}

.hero > .hero-rocket,
.hero > .rocket-continue {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.hero {
  grid-template-columns: minmax(0, 0.98fr) minmax(282px, 0.78fr) !important;
  align-items: center !important;
  min-height: clamp(670px, 80vh, 850px) !important;
  padding-top: clamp(74px, 8vw, 110px) !important;
}

.hero-copy p {
  max-width: 620px !important;
}

.phone-shell {
  width: clamp(288px, 25vw, 394px) !important;
  aspect-ratio: 9 / 18.65 !important;
}

.phone-screen {
  position: absolute !important;
  inset: clamp(24px, 2vw, 33px) clamp(17px, 1.4vw, 25px) !important;
  display: block !important;
  overflow: hidden !important;
  border-radius: clamp(30px, 2.4vw, 43px) !important;
  background:
    radial-gradient(circle at 52% 42%, color-mix(in srgb, var(--cyan) 24%, transparent), transparent 33%),
    radial-gradient(circle at 48% 76%, color-mix(in srgb, var(--yellow) 16%, transparent), transparent 28%),
    linear-gradient(180deg, #031011, #010707) !important;
}

.hero-video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  opacity: 0 !important;
  transition: opacity 260ms ease !important;
}

.phone-screen.video-playing .hero-video {
  opacity: 1 !important;
}

.video-placeholder {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  display: grid !important;
  align-content: center !important;
  justify-items: center !important;
  gap: 15px !important;
  width: 100% !important;
  height: 100% !important;
  padding: 24px !important;
  border: 0 !important;
  background:
    radial-gradient(circle at 52% 45%, color-mix(in srgb, var(--cyan) 25%, transparent), transparent 36%),
    radial-gradient(circle at 48% 78%, color-mix(in srgb, var(--yellow) 18%, transparent), transparent 30%),
    linear-gradient(180deg, rgba(3, 14, 16, 0.98), rgba(0, 7, 8, 0.98)) !important;
  opacity: 1 !important;
}

.phone-screen.video-playing .video-placeholder,
.video-placeholder[aria-hidden="true"] {
  opacity: 0 !important;
  pointer-events: none !important;
}

.video-placeholder::before,
.video-placeholder::after {
  display: none !important;
}

.hero-cover-rocket {
  position: relative !important;
  display: block !important;
  width: min(78%, 274px) !important;
  aspect-ratio: 1 / 1 !important;
  transform: rotate(-20deg) !important;
  filter:
    drop-shadow(0 0 26px color-mix(in srgb, var(--cyan) 58%, transparent))
    drop-shadow(0 18px 26px rgba(0, 0, 0, 0.35)) !important;
}

.hero-cover-rocket img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

.hero-cover-play {
  position: absolute !important;
  left: 57% !important;
  top: 40% !important;
  width: clamp(50px, 5vw, 72px) !important;
  height: clamp(50px, 5vw, 72px) !important;
  border-radius: 50% !important;
  background: var(--gradient) !important;
  box-shadow: 0 0 30px color-mix(in srgb, var(--cyan) 44%, transparent) !important;
  transform: translate(-50%, -50%) rotate(20deg) !important;
}

.hero-cover-play::before {
  position: absolute;
  top: 50%;
  left: 54%;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid #021011;
  transform: translate(-50%, -50%);
  content: "";
}

.hero-cover-title {
  color: #fff !important;
  font-size: clamp(24px, 2vw, 34px) !important;
  line-height: 0.95 !important;
  text-align: center !important;
}

.hero-cover-label {
  color: rgba(255,255,255,0.68) !important;
  font-size: 13px !important;
}

.format-elevator,
.format-elevator::before {
  display: none !important;
}

.format-route {
  padding-left: 0 !important;
}

.format-copy h3 {
  overflow-wrap: anywhere !important;
  hyphens: auto !important;
}

.format-media-reels {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(12px, 2vw, 28px) !important;
  min-height: unset !important;
  padding: clamp(16px, 2vw, 28px) !important;
}

.format-media-reels .reels-video-slot {
  flex: 0 0 auto !important;
  width: clamp(96px, 11.5vw, 150px) !important;
  height: auto !important;
  aspect-ratio: 9 / 16 !important;
  max-height: 360px !important;
  overflow: hidden !important;
  border-radius: 18px !important;
}

.format-media-reels video,
.format-media-reels img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.format-media-video {
  overflow: hidden !important;
}

.format-media-video video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.launch-stage {
  min-height: clamp(430px, 42vw, 560px) !important;
  overflow: hidden !important;
  touch-action: none !important;
}

.launch-level {
  left: 18px !important;
  top: 18px !important;
  font-family: Fredoka, Inter, sans-serif !important;
  letter-spacing: 0 !important;
}

.launch-obstacle {
  min-width: 88px !important;
  max-width: min(176px, 34vw) !important;
  padding: 8px 12px !important;
  white-space: normal !important;
  overflow: visible !important;
  text-align: center !important;
  line-height: 1.05 !important;
  font-size: clamp(12px, 1.05vw, 15px) !important;
  transform: translate3d(var(--obstacle-x, 0), var(--obstacle-y, -120px), 0) !important;
}

.launch-obstacle.hazard::before,
.launch-obstacle.bonus::before {
  position: static !important;
  display: inline-grid !important;
  width: 18px !important;
  height: 18px !important;
  margin-right: 6px !important;
  vertical-align: -3px !important;
  place-items: center !important;
}

.launch-obstacle.is-hidden {
  opacity: 0 !important;
}

@media (max-width: 980px) {
  .site-header {
    width: min(100% - 28px, 980px) !important;
    grid-template-columns: auto 1fr auto !important;
  }

  .hero {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
    gap: 38px !important;
  }

  .hero-copy {
    max-width: 720px !important;
  }

  .hero-visual {
    justify-self: center !important;
  }
}

@media (max-width: 760px) {
  .site-header {
    width: calc(100% - 18px) !important;
    min-height: 64px !important;
    padding: 8px 10px !important;
    grid-template-columns: minmax(168px, 1fr) auto !important;
    gap: 8px !important;
  }

  .site-header .brand,
  .brand {
    width: clamp(168px, 48vw, 214px) !important;
    min-width: clamp(168px, 48vw, 214px) !important;
    max-width: clamp(168px, 48vw, 214px) !important;
    min-height: 44px !important;
  }

  .site-header .brand-logo-shell,
  .brand-logo-shell {
    height: 44px !important;
  }

  .header-actions {
    gap: 7px !important;
  }

  .header-actions .button-small {
    display: none !important;
  }

  .hero {
    padding-top: 54px !important;
  }

  .hero-copy p {
    margin-top: 22px !important;
  }

  .phone-shell {
    width: min(74vw, 316px) !important;
  }

  .format-card,
  .format-card:nth-child(even) {
    grid-template-columns: 1fr !important;
  }

  .format-card > .format-copy,
  .format-card:nth-child(even) > .format-copy {
    order: 1 !important;
  }

  .format-card > .format-media,
  .format-card:nth-child(even) > .format-media {
    order: 2 !important;
  }

  .format-copy h3 {
    max-width: 100% !important;
    font-size: clamp(31px, 9vw, 42px) !important;
    line-height: 0.98 !important;
  }

  .format-media-reels {
    gap: 8px !important;
    padding: 10px !important;
  }

  .format-media-reels .reels-video-slot {
    width: clamp(76px, 27vw, 112px) !important;
    border-radius: 15px !important;
  }

  .service-card h3 {
    overflow-wrap: anywhere !important;
  }

  .mission-rocket {
    left: 50% !important;
    top: 10px !important;
    width: 54px !important;
    transform: translate3d(-50%, var(--mission-mobile-y-orbit, 430px), 0) rotate(180deg) scale(0.82) !important;
  }

  .service-grid[data-active-planet="start"] .mission-rocket {
    transform: translate3d(-50%, var(--mission-mobile-y-start, 42px), 0) rotate(180deg) scale(0.82) !important;
  }

  .service-grid[data-active-planet="orbit"] .mission-rocket {
    transform: translate3d(-50%, var(--mission-mobile-y-orbit, 430px), 0) rotate(180deg) scale(0.82) !important;
  }

  .service-grid[data-active-planet="landing"] .mission-rocket {
    transform: translate3d(-50%, var(--mission-mobile-y-landing, 820px), 0) rotate(180deg) scale(0.82) !important;
  }

  .launch-stage {
    min-height: 440px !important;
  }

  .launch-obstacle {
    max-width: 132px !important;
    padding: 7px 9px !important;
    font-size: 12px !important;
  }
}

@media (max-width: 420px) {
  .site-header .brand,
  .brand {
    width: clamp(142px, 42vw, 176px) !important;
    min-width: clamp(142px, 42vw, 176px) !important;
    max-width: clamp(142px, 42vw, 176px) !important;
  }

  .site-header .brand-logo-shell,
  .brand-logo-shell {
    height: 40px !important;
  }

  .lang-toggle,
  .theme-toggle,
  .menu-toggle {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
  }

  .hero-title {
    font-size: clamp(48px, 15vw, 64px) !important;
  }

  .proof-grid strong {
    overflow-wrap: anywhere !important;
    font-size: clamp(25px, 8vw, 34px) !important;
  }
}

@keyframes v75SpaceField {
  0% {
    background-position: 0 0, 80px 44px, 140px 100px, 0 0, 0 0;
  }
  100% {
    background-position: 260px 520px, 420px 384px, 560px 520px, 92px 184px, 92px 184px;
  }
}

@keyframes v75NebulaFlow {
  0% {
    transform: translate3d(-2%, -1%, 0) scale(1);
  }
  100% {
    transform: translate3d(2%, 1%, 0) scale(1.04);
  }
}

body::after,
main::before {
  inset: -12% !important;
}

.section-pad::after,
.hero::before,
.hero::after,
.trust-strip::before,
.trust-strip::after,
.services::before,
.services::after,
.specializations::before,
.specializations::after,
.cta::before,
.cta::after,
.launch-game::before {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  opacity: 0 !important;
}

.hero {
  min-height: min(760px, calc(100vh - 98px)) !important;
  padding-top: clamp(46px, 5vh, 72px) !important;
  padding-bottom: clamp(34px, 5vh, 66px) !important;
  gap: clamp(24px, 4vw, 58px) !important;
}

.hero-visual {
  min-height: auto !important;
  align-self: center !important;
}

.phone-shell {
  position: relative !important;
  display: block !important;
  width: auto !important;
  height: min(64vh, 610px) !important;
  max-height: 610px !important;
  min-height: 430px !important;
  aspect-ratio: 390 / 760 !important;
}

.phone-screen {
  position: absolute !important;
  top: 4.4% !important;
  right: 5.2% !important;
  bottom: 4.8% !important;
  left: 5.2% !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  border-radius: clamp(28px, 2.2vw, 42px) !important;
}

.phone-screen .video-placeholder {
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: auto !important;
  height: auto !important;
  min-height: 100% !important;
  border-radius: inherit !important;
}

.hero-cover-rocket {
  width: min(86%, 310px) !important;
  max-height: 54% !important;
}

.hero-cover-title {
  margin-top: 2px !important;
}

.mobile-nav a[href="#strategie"] {
  display: block !important;
}

.game-intro > span {
  color: var(--cyan) !important;
}

.launch-obstacle {
  display: inline-flex !important;
  width: max-content !important;
  min-width: 118px !important;
  max-width: min(214px, 36vw) !important;
  height: auto !important;
  min-height: 36px !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px 12px !important;
  overflow: visible !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
  text-align: center !important;
  line-height: 1.05 !important;
  font-size: clamp(12px, 0.92vw, 14px) !important;
}

.launch-obstacle.star,
.launch-obstacle.comet,
.launch-obstacle.rock {
  width: max-content !important;
  min-width: 104px !important;
  max-width: min(190px, 34vw) !important;
  min-height: 38px !important;
  border-radius: 999px !important;
  color: var(--text) !important;
  font-size: clamp(12px, 0.92vw, 14px) !important;
}

.launch-obstacle.star::before {
  width: 18px !important;
  height: 18px !important;
  margin-right: 6px !important;
  clip-path: polygon(50% 0, 61% 36%, 98% 36%, 68% 57%, 79% 93%, 50% 72%, 21% 93%, 32% 57%, 2% 36%, 39% 36%) !important;
}

.launch-obstacle.comet::before,
.launch-obstacle.rock::before {
  width: 18px !important;
  height: 18px !important;
  margin-right: 6px !important;
}

@media (min-width: 761px) {
  .hero-copy {
    align-self: center !important;
  }

  .proof-grid {
    margin-top: clamp(24px, 3vh, 38px) !important;
  }
}

@media (max-width: 760px) {
  .site-header {
    width: calc(100% - 16px) !important;
    min-height: 58px !important;
    margin-top: 8px !important;
    padding: 7px 9px !important;
  }

  .site-header.menu-open {
    min-height: 58px !important;
  }

  .mobile-nav {
    margin-top: 8px !important;
    gap: 7px !important;
  }

  .mobile-nav a {
    min-height: 40px !important;
    padding: 10px 12px !important;
  }

  .hero {
    display: grid !important;
    min-height: auto !important;
    padding-top: 42px !important;
    padding-bottom: 54px !important;
    gap: 28px !important;
  }

  .hero-copy {
    display: grid !important;
    gap: 18px !important;
    align-content: start !important;
  }

  .hero-title {
    gap: 2px !important;
    min-height: 0 !important;
    margin: 0 !important;
  }

  .word-rotator {
    min-height: 1.02em !important;
  }

  .hero-copy p {
    margin: 0 !important;
    max-width: 100% !important;
  }

  .hero-actions {
    margin-top: 2px !important;
  }

  .proof-grid {
    margin-top: 0 !important;
  }

  .phone-shell {
    width: min(78vw, 292px) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 390 / 760 !important;
  }

  .phone-screen {
    top: 4.6% !important;
    right: 5.4% !important;
    bottom: 5% !important;
    left: 5.4% !important;
  }

  .hero-cover-rocket {
    width: min(88%, 238px) !important;
    max-height: 52% !important;
  }

  .hero-cover-title {
    font-size: clamp(22px, 6.2vw, 28px) !important;
  }

  .launch-game {
    padding: 18px 16px !important;
  }

  .launch-stage {
    min-height: 430px !important;
  }

  .launch-obstacle,
  .launch-obstacle.star,
  .launch-obstacle.comet,
  .launch-obstacle.rock {
    min-width: 104px !important;
    max-width: min(142px, 37vw) !important;
    padding: 7px 9px !important;
    font-size: 12px !important;
  }
}

@media (max-width: 390px) {
  .hero-title {
    font-size: clamp(44px, 14vw, 56px) !important;
  }

  .phone-shell {
    width: min(82vw, 270px) !important;
  }

  .launch-obstacle,
  .launch-obstacle.star,
  .launch-obstacle.comet,
  .launch-obstacle.rock {
    max-width: 126px !important;
    min-width: 96px !important;
  }
}

.brand,
.site-header .brand {
  min-width: clamp(210px, 18vw, 266px) !important;
  width: clamp(210px, 18vw, 266px) !important;
  max-width: clamp(210px, 18vw, 266px) !important;
  overflow: visible !important;
}

.brand-logo-shell,
.site-header .brand-logo-shell {
  width: 100% !important;
  min-width: 100% !important;
  height: clamp(54px, 5vw, 70px) !important;
  overflow: visible !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

.brand-wordmark {
  width: 100% !important;
  min-width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: left center !important;
  display: block !important;
}

.hero {
  --hero-rocket-x: clamp(540px, 41vw, 635px);
  --hero-rocket-y: clamp(112px, 9.5vw, 150px);
  overflow: hidden !important;
}

.hero-rocket {
  top: var(--hero-rocket-y) !important;
  left: var(--hero-rocket-x) !important;
  width: clamp(82px, 7vw, 108px) !important;
  z-index: 6 !important;
  pointer-events: auto !important;
}

.hero:not(.hero-video-started) .hero-rocket {
  animation: v74HeroRocketIn 1.1s cubic-bezier(0.16, 0.86, 0.18, 1) 0.12s both !important;
}

.hero.rocket-launching .hero-rocket {
  animation: v74HeroRocketOut 0.76s cubic-bezier(0.24, 0.82, 0.18, 1) forwards !important;
}

.rocket-continue {
  top: calc(var(--hero-rocket-y) - clamp(76px, 6vw, 96px)) !important;
  left: min(calc(var(--hero-rocket-x) + clamp(76px, 5.5vw, 104px)), calc(100% - 222px)) !important;
  min-width: 190px !important;
  min-height: 58px !important;
  padding: 12px 16px 12px 18px !important;
  gap: 10px !important;
  border: 2px solid color-mix(in srgb, var(--accent) 34%, var(--text)) !important;
  border-radius: 999px 999px 999px 18px !important;
  background: color-mix(in srgb, var(--surface) 92%, #ffffff 8%) !important;
  color: var(--text) !important;
  box-shadow: 0 18px 34px rgba(12, 192, 223, 0.22), 0 0 0 7px rgba(12, 192, 223, 0.07) !important;
  transform: none !important;
  clip-path: none !important;
}

.rocket-continue::before {
  content: "" !important;
  position: absolute !important;
  left: 26px !important;
  bottom: -24px !important;
  width: 42px !important;
  height: 32px !important;
  background: inherit !important;
  border-left: 2px solid color-mix(in srgb, var(--accent) 34%, var(--text)) !important;
  border-bottom: 2px solid color-mix(in srgb, var(--accent) 34%, var(--text)) !important;
  transform: skewX(-28deg) rotate(8deg) !important;
  clip-path: polygon(0 0, 100% 0, 0 100%) !important;
}

.rocket-continue::after {
  display: none !important;
}

.rocket-continue span:first-child {
  font-family: "Fredoka", "Inter", sans-serif !important;
  font-size: clamp(14px, 1.05vw, 17px) !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.bubble-play,
.play-mark {
  flex: 0 0 auto !important;
}

:root[data-theme="light"] .rocket-continue {
  background: rgba(249, 254, 253, 0.94) !important;
  color: #071313 !important;
  border-color: rgba(7, 19, 19, 0.72) !important;
  box-shadow: 0 16px 28px rgba(12, 192, 223, 0.18), 0 0 0 7px rgba(12, 192, 223, 0.06) !important;
}

:root[data-theme="light"] .rocket-continue::before {
  border-color: rgba(7, 19, 19, 0.72) !important;
}

.hero-copy {
  z-index: 4 !important;
}

.phone-screen,
.format-media-video,
.reels-video-slot {
  position: relative !important;
}

.video-sound-toggle {
  right: 12px !important;
  bottom: 12px !important;
  z-index: 8 !important;
  min-width: 54px !important;
  height: 32px !important;
  padding: 0 11px !important;
  border-radius: 999px !important;
  font-family: "Inter", sans-serif !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

.format-copy,
.format-card > .format-copy,
.format-card:nth-child(even) > .format-copy {
  min-width: 0 !important;
  max-width: 100% !important;
}

.format-copy h3,
.format-copy p,
.service-card li,
.service-card p,
.proof-grid strong,
.proof-grid span {
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

.service-card li {
  white-space: normal !important;
  line-height: 1.12 !important;
}

.format-media-video,
.format-media-landscape {
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

.format-media-video video,
.format-media-landscape video,
.format-media-reels video {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  object-fit: cover !important;
}

.launch-game.active .launch-start-button {
  visibility: hidden !important;
  pointer-events: none !important;
}

.launch-game:not(.active) .launch-start-button {
  visibility: visible !important;
}

@media (max-width: 1180px) {
  .hero {
    --hero-rocket-x: clamp(386px, 39vw, 520px);
    --hero-rocket-y: clamp(168px, 18vw, 242px);
  }

  .rocket-continue {
    left: min(calc(var(--hero-rocket-x) + 78px), calc(100% - 220px)) !important;
  }
}

@media (max-width: 880px) {
  .hero {
    --hero-rocket-x: clamp(266px, 42vw, 396px);
    --hero-rocket-y: clamp(214px, 32vw, 300px);
  }

  .hero-copy p {
    margin-top: clamp(150px, 30vw, 220px) !important;
  }

  .rocket-continue {
    left: min(calc(var(--hero-rocket-x) + 66px), calc(100vw - 212px)) !important;
    top: calc(var(--hero-rocket-y) - 82px) !important;
  }
}

@media (max-width: 760px) {
  .site-header {
    grid-template-columns: minmax(188px, 1fr) auto !important;
    align-items: center !important;
  }

  .brand,
  .site-header .brand {
    min-width: 190px !important;
    width: 190px !important;
    max-width: 190px !important;
  }

  .brand-logo-shell,
  .site-header .brand-logo-shell {
    height: 52px !important;
  }

  .hero {
    --hero-rocket-x: clamp(128px, 31vw, 178px);
    --hero-rocket-y: clamp(206px, 50vw, 254px);
  }

  .hero-rocket {
    width: clamp(68px, 16vw, 84px) !important;
  }

  .rocket-continue {
    left: min(calc(var(--hero-rocket-x) + 62px), calc(100vw - 188px)) !important;
    top: calc(var(--hero-rocket-y) - 76px) !important;
    min-width: 178px !important;
    min-height: 52px !important;
    font-size: 13px !important;
  }

  .rocket-continue::before {
    left: 20px !important;
    bottom: -19px !important;
    width: 34px !important;
    height: 26px !important;
  }

  .hero-copy p {
    margin-top: clamp(160px, 43vw, 214px) !important;
  }

  .format-card,
  .format-card:nth-child(even) {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 18px !important;
    padding: 22px 16px !important;
  }

  .format-card > .format-copy,
  .format-card:nth-child(even) > .format-copy {
    order: 1 !important;
  }

  .format-card > .format-media,
  .format-card:nth-child(even) > .format-media {
    order: 2 !important;
  }

  .format-copy h3 {
    font-size: clamp(28px, 8vw, 40px) !important;
    line-height: 1.02 !important;
  }

  .format-copy p {
    font-size: 14px !important;
    line-height: 1.42 !important;
  }

  .format-media-video,
  .format-media-landscape {
    aspect-ratio: 16 / 10 !important;
    min-height: 0 !important;
  }

  .format-media-reels {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    min-height: 0 !important;
    padding: 10px !important;
  }

  .format-media-reels .reels-video-slot {
    height: clamp(152px, 45vw, 224px) !important;
  }

  .service-grid {
    --mission-mobile-x: 50% !important;
  }

  .mission-rocket {
    left: var(--mission-mobile-x) !important;
    top: 10px !important;
    width: 50px !important;
    transform: translate3d(-50%, var(--mission-mobile-y-orbit, 420px), 0) rotate(180deg) scale(0.82) !important;
  }

  .service-grid[data-active-planet="start"] .mission-rocket {
    transform: translate3d(-50%, var(--mission-mobile-y-start, 40px), 0) rotate(180deg) scale(0.82) !important;
  }

  .service-grid[data-active-planet="orbit"] .mission-rocket {
    transform: translate3d(-50%, var(--mission-mobile-y-orbit, 430px), 0) rotate(180deg) scale(0.82) !important;
  }

  .service-grid[data-active-planet="landing"] .mission-rocket {
    transform: translate3d(-50%, var(--mission-mobile-y-landing, 820px), 0) rotate(180deg) scale(0.82) !important;
  }
}

@media (max-width: 430px) {
  .site-header {
    grid-template-columns: minmax(164px, 1fr) auto !important;
    padding: 9px 8px !important;
  }

  .brand,
  .site-header .brand {
    min-width: 168px !important;
    width: 168px !important;
    max-width: 168px !important;
  }

  .brand-logo-shell,
  .site-header .brand-logo-shell {
    height: 48px !important;
  }

  .hero {
    --hero-rocket-x: clamp(108px, 29vw, 138px);
    --hero-rocket-y: clamp(202px, 53vw, 244px);
  }

  .rocket-continue {
    left: min(calc(var(--hero-rocket-x) + 58px), calc(100vw - 170px)) !important;
    top: calc(var(--hero-rocket-y) - 68px) !important;
    min-width: 164px !important;
    min-height: 48px !important;
    padding: 9px 10px 9px 13px !important;
    gap: 7px !important;
  }

  .rocket-continue span:first-child {
    font-size: 12.5px !important;
  }

  .bubble-play {
    width: 25px !important;
    height: 25px !important;
  }

  .hero-copy p {
    margin-top: clamp(154px, 42vw, 204px) !important;
  }

  .proof-grid strong {
    font-size: clamp(25px, 7.4vw, 31px) !important;
    line-height: 1 !important;
  }
}

@media (max-width: 370px) {
  .brand,
  .site-header .brand {
    min-width: 154px !important;
    width: 154px !important;
    max-width: 154px !important;
  }

  .hero {
    --hero-rocket-x: clamp(96px, 28vw, 122px);
    --hero-rocket-y: clamp(196px, 54vw, 236px);
  }

  .rocket-continue {
    left: min(calc(var(--hero-rocket-x) + 52px), calc(100vw - 158px)) !important;
    min-width: 152px !important;
  }
}

@keyframes v74HeroRocketIn {
  0% {
    opacity: 0;
    transform: translate3d(-48vw, 9vh, 0) rotate(54deg) scale(0.9);
  }
  82% {
    opacity: 1;
    transform: translate3d(8px, -2px, 0) rotate(54deg) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(54deg) scale(1);
  }
}

@keyframes v74HeroRocketOut {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(54deg) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate3d(72vw, -9vh, 0) rotate(48deg) scale(0.92);
  }
}

.hero {
  --hero-rocket-x: clamp(560px, 43vw, 690px);
  --hero-rocket-y: clamp(104px, 9.6vw, 144px);
}

.hero-rocket {
  width: clamp(82px, 7.5vw, 112px) !important;
}

.rocket-continue {
  top: calc(var(--hero-rocket-y) - clamp(82px, 6vw, 100px)) !important;
}

@media (max-width: 1180px) {
  .hero {
    --hero-rocket-x: clamp(394px, 43vw, 540px);
    --hero-rocket-y: clamp(142px, 17vw, 224px);
  }
}

@media (max-width: 900px) {
  .hero {
    --hero-rocket-x: clamp(300px, 45vw, 414px);
    --hero-rocket-y: clamp(184px, 29vw, 270px);
  }
}

@media (max-width: 760px) {
  .hero {
    --hero-rocket-x: clamp(116px, 32vw, 158px);
    --hero-rocket-y: clamp(190px, 52vw, 244px);
  }

  .hero-copy p {
    margin-top: clamp(176px, 48vw, 224px) !important;
  }

  .hero-rocket {
    width: clamp(62px, 16.8vw, 76px) !important;
  }

  .rocket-continue {
    left: min(calc(var(--hero-rocket-x) + 66px), calc(100vw - 188px)) !important;
    top: calc(var(--hero-rocket-y) - 64px) !important;
  }
}

@media (max-width: 430px) {
  .hero {
    --hero-rocket-x: clamp(106px, 30vw, 132px);
    --hero-rocket-y: clamp(188px, 52vw, 238px);
  }

  .hero-copy p {
    margin-top: clamp(164px, 46vw, 210px) !important;
  }

  .rocket-continue {
    left: min(calc(var(--hero-rocket-x) + 58px), calc(100vw - 170px)) !important;
    top: calc(var(--hero-rocket-y) - 60px) !important;
  }
}

.hero {
  --hero-rocket-x: clamp(520px, 41vw, 680px);
  --hero-rocket-y: clamp(188px, 15vw, 250px);
}

.hero-rocket {
  pointer-events: auto !important;
  cursor: pointer !important;
}

.hero:not(.hero-video-started) .hero-rocket {
  animation: v70HeroRocketIn 1.32s cubic-bezier(0.18, 0.84, 0.19, 1) 0.1s both !important;
}

.hero.rocket-launching .hero-rocket {
  animation: v70HeroRocketOut 0.88s cubic-bezier(0.23, 1, 0.32, 1) forwards !important;
}

.hero.hero-video-started:not(.rocket-launching) .hero-rocket,
.hero.rocket-gone .hero-rocket {
  opacity: 0 !important;
  pointer-events: none !important;
  animation: none !important;
  transform: translate3d(46vw, -20vh, 0) rotate(50deg) scale(0.9) !important;
}

.rocket-continue {
  left: min(calc(var(--hero-rocket-x) + clamp(78px, 6vw, 112px)), calc(100% - 236px)) !important;
  top: calc(var(--hero-rocket-y) - clamp(86px, 6.8vw, 108px)) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  min-width: clamp(198px, 15vw, 226px) !important;
  min-height: 60px !important;
  padding: 13px 16px 13px 20px !important;
  border: 2px solid color-mix(in srgb, var(--text) 78%, var(--cyan)) !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--bg-soft) 88%, #f8fff4 12%) !important;
  color: var(--text) !important;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
  font-size: clamp(15px, 1.08vw, 17px) !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--cyan) 24%, transparent),
    0 18px 36px color-mix(in srgb, var(--cyan) 22%, transparent),
    inset 0 1px 0 color-mix(in srgb, white 50%, transparent) !important;
}

:root[data-theme="light"] .rocket-continue {
  background: #fbfff2 !important;
  color: #071014 !important;
  border-color: color-mix(in srgb, #071014 78%, var(--cyan)) !important;
}

.rocket-continue::before {
  left: 24px !important;
  bottom: -18px !important;
  width: 36px !important;
  height: 25px !important;
  border-left: 2px solid currentColor !important;
  border-bottom: 2px solid currentColor !important;
  background: inherit !important;
  clip-path: polygon(0 0, 100% 0, 0 100%) !important;
  transform: skewX(-14deg) !important;
}

.rocket-continue span:first-child {
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1 !important;
}

.bubble-play {
  width: 31px !important;
  height: 31px !important;
  background: var(--gradient) !important;
}

.video-sound-toggle {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 9;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, var(--cyan) 38%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-soft) 84%, transparent);
  color: var(--text);
  font-size: 11px;
  font-weight: 950;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(12px);
  transition: transform 160ms ease, background 160ms ease, opacity 160ms ease;
}

.video-sound-toggle:hover {
  transform: translateY(-1px);
}

.video-sound-toggle.is-on {
  border-color: color-mix(in srgb, var(--yellow) 54%, var(--cyan));
  background: var(--gradient);
  color: #071014;
}

.phone-screen:not(.video-playing) .video-sound-toggle,
.format-media-video:not(.is-video-loaded) .video-sound-toggle,
.reels-video-slot:not(.is-video-loaded) .video-sound-toggle {
  pointer-events: none;
  opacity: 0;
}

.service-card,
.format-card,
.proof-grid > div {
  min-width: 0 !important;
}

.service-card li,
.service-card p,
.format-copy p,
.proof-grid strong,
.proof-grid span {
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

.service-card ul {
  padding-right: 0 !important;
}

.format-card,
.format-card:nth-child(even) {
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr) !important;
  align-items: center !important;
}

.format-card:nth-child(even) {
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr) !important;
}

.format-media-video,
.format-media-landscape {
  min-height: 0 !important;
  aspect-ratio: 16 / 9 !important;
}

.format-media-video video,
.reels-video-slot video {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.launch-game.active .launch-start-button {
  opacity: 0.72;
  animation: none !important;
}

@media (max-width: 1180px) {
  .hero {
    --hero-rocket-x: clamp(382px, 42vw, 520px);
    --hero-rocket-y: clamp(204px, 22vw, 280px);
  }

  .rocket-continue {
    left: min(calc(var(--hero-rocket-x) + 72px), calc(100% - 224px)) !important;
  }
}

@media (max-width: 900px) {
  .hero {
    --hero-rocket-x: clamp(286px, 44vw, 400px);
    --hero-rocket-y: clamp(222px, 34vw, 300px);
  }

  .rocket-continue {
    left: min(calc(var(--hero-rocket-x) + 62px), calc(100vw - 210px)) !important;
    top: calc(var(--hero-rocket-y) - 88px) !important;
  }
}

@media (max-width: 760px) {
  .site-header {
    grid-template-columns: minmax(178px, 1fr) auto !important;
    gap: 9px !important;
    padding: 10px 12px !important;
  }

  .brand,
  .site-header .brand {
    min-width: clamp(178px, 52vw, 230px) !important;
  }

  .brand-logo-shell,
  .site-header .brand-logo-shell {
    width: clamp(178px, 52vw, 230px) !important;
    height: 46px !important;
  }

  .hero {
    --hero-rocket-x: clamp(158px, 42vw, 214px);
    --hero-rocket-y: clamp(238px, 62vw, 296px);
  }

  .hero-copy p {
    margin-top: clamp(118px, 32vw, 148px) !important;
  }

  .hero-rocket {
    width: clamp(62px, 17vw, 76px) !important;
  }

  .rocket-continue {
    left: min(calc(var(--hero-rocket-x) + 58px), calc(100vw - 184px)) !important;
    top: calc(var(--hero-rocket-y) - 76px) !important;
    min-width: 172px !important;
    min-height: 50px !important;
    padding: 10px 11px 10px 14px !important;
    gap: 7px !important;
    font-size: 13px !important;
  }

  .rocket-continue::before {
    left: 18px !important;
    bottom: -14px !important;
    width: 28px !important;
    height: 20px !important;
  }

  .bubble-play {
    width: 26px !important;
    height: 26px !important;
  }

  .service-card li {
    font-size: 13px !important;
    line-height: 1.22 !important;
  }

  .format-card,
  .format-card:nth-child(even) {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
    align-items: stretch !important;
    padding: 22px 16px !important;
  }

  .format-card > .format-copy,
  .format-card:nth-child(even) > .format-copy {
    order: 1 !important;
  }

  .format-card > .format-media,
  .format-card:nth-child(even) > .format-media {
    order: 2 !important;
  }

  .format-copy h3 {
    font-size: clamp(27px, 7vw, 36px) !important;
    line-height: 1.04 !important;
    overflow-wrap: anywhere !important;
  }

  .format-copy p {
    font-size: 14px !important;
    line-height: 1.48 !important;
  }

  .format-media-video,
  .format-media-landscape {
    width: 100% !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 9 !important;
  }

  .format-media-reels {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .format-media-reels .reels-video-slot {
    height: clamp(170px, 48vw, 236px) !important;
  }

  .video-sound-toggle {
    right: 9px;
    bottom: 9px;
    min-width: 42px;
    height: 29px;
    padding: 0 8px;
    font-size: 10px;
  }

  .mission-rocket {
    left: 50% !important;
    transform: translate3d(-50%, var(--mission-mobile-y-orbit, 430px), 0) rotate(180deg) scale(0.86) !important;
  }
}

@media (max-width: 430px) {
  .site-header {
    grid-template-columns: minmax(158px, 1fr) auto !important;
  }

  .brand,
  .site-header .brand {
    min-width: clamp(158px, 48vw, 190px) !important;
  }

  .brand-logo-shell,
  .site-header .brand-logo-shell {
    width: clamp(158px, 48vw, 190px) !important;
    height: 42px !important;
  }

  .hero {
    --hero-rocket-x: clamp(146px, 41vw, 184px);
    --hero-rocket-y: clamp(236px, 63vw, 282px);
  }

  .rocket-continue {
    left: min(calc(var(--hero-rocket-x) + 48px), calc(100vw - 168px)) !important;
    top: calc(var(--hero-rocket-y) - 70px) !important;
    min-width: 156px !important;
    font-size: 12px !important;
  }
}

@media (max-width: 370px) {
  .brand,
  .site-header .brand,
  .brand-logo-shell,
  .site-header .brand-logo-shell {
    min-width: 142px !important;
    width: 142px !important;
  }

  .rocket-continue {
    left: min(calc(var(--hero-rocket-x) + 42px), calc(100vw - 156px)) !important;
    min-width: 148px !important;
    gap: 5px !important;
  }
}

@keyframes v70HeroRocketIn {
  0% {
    opacity: 0;
    transform: translate3d(-32vw, 12vh, 0) rotate(54deg) scale(0.92);
  }
  76% {
    opacity: 1;
    transform: translate3d(7px, -3px, 0) rotate(54deg) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(54deg) scale(1);
  }
}

@keyframes v70HeroRocketOut {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(54deg) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate3d(48vw, -18vh, 0) rotate(50deg) scale(0.94);
  }
}

html {
  overflow-x: hidden !important;
}

body::before {
  opacity: 0.92 !important;
  animation: cosmicDrift 28s ease-in-out infinite alternate !important;
}

.site-header {
  align-items: center !important;
  min-height: 74px !important;
}

.brand,
.site-header .brand {
  display: flex !important;
  align-items: center !important;
  min-width: clamp(210px, 18vw, 270px) !important;
  max-width: min(270px, 42vw) !important;
  overflow: visible !important;
}

.brand-logo-shell,
.site-header .brand-logo-shell {
  display: block !important;
  width: clamp(210px, 18vw, 270px) !important;
  max-width: min(270px, 42vw) !important;
  height: clamp(50px, 4.2vw, 64px) !important;
  overflow: visible !important;
}

.brand-wordmark {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  object-fit: contain !important;
  object-position: left center !important;
  transform: none !important;
  opacity: 1 !important;
}

.hero {
  --hero-rocket-x: clamp(510px, 39vw, 650px);
  --hero-rocket-y: clamp(190px, 15vw, 248px);
}

.hero-rocket {
  top: var(--hero-rocket-y) !important;
  left: var(--hero-rocket-x) !important;
  z-index: 5 !important;
}

.hero:not(.hero-video-started) .hero-rocket {
  animation: v71HeroRocketIn 1.18s cubic-bezier(0.17, 0.86, 0.2, 1) 0.12s both !important;
}

.hero.rocket-launching .hero-rocket {
  animation: v71HeroRocketOut 0.72s cubic-bezier(0.28, 0.86, 0.24, 1) forwards !important;
}

.hero.hero-video-started:not(.rocket-launching) .hero-rocket,
.hero.rocket-gone .hero-rocket {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translate3d(52vw, -10vh, 0) rotate(50deg) scale(0.94) !important;
}

.rocket-continue {
  top: calc(var(--hero-rocket-y) - clamp(82px, 6.3vw, 102px)) !important;
  left: min(calc(var(--hero-rocket-x) + clamp(92px, 7vw, 124px)), calc(100% - 238px)) !important;
  z-index: 6 !important;
  min-width: 214px !important;
  min-height: 58px !important;
  padding: 12px 15px 12px 18px !important;
  border: 2px solid color-mix(in srgb, var(--text) 84%, var(--cyan)) !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--bg-soft) 88%, #fbfff2 12%) !important;
  background-image: none !important;
  color: var(--text) !important;
  font-size: 16px !important;
  line-height: 1 !important;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--cyan) 22%, transparent),
    0 0 28px color-mix(in srgb, var(--cyan) 24%, transparent),
    0 16px 34px rgba(0, 0, 0, 0.18) !important;
}

:root[data-theme="light"] .rocket-continue {
  background: #fbfff2 !important;
  color: #071014 !important;
  border-color: #182022 !important;
}

.rocket-continue::before {
  left: 28px !important;
  bottom: -18px !important;
  width: 38px !important;
  height: 28px !important;
  border: 0 !important;
  background: inherit !important;
  clip-path: polygon(0 0, 100% 0, 0 100%) !important;
  transform: rotate(-10deg) skewX(-12deg) !important;
  filter: drop-shadow(-2px 3px 0 currentColor) !important;
}

.rocket-continue::after {
  content: none !important;
  display: none !important;
}

.rocket-continue span:first-child {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
  font-size: inherit !important;
  font-weight: 950 !important;
  text-align: center !important;
}

.bubble-play {
  display: inline-grid !important;
  width: 32px !important;
  height: 32px !important;
  flex: 0 0 auto !important;
  place-items: center !important;
  border-radius: 50% !important;
  background: var(--gradient) !important;
  box-shadow: 0 0 20px color-mix(in srgb, var(--cyan) 22%, transparent) !important;
}

.bubble-play::before {
  display: block !important;
  width: 0 !important;
  height: 0 !important;
  margin-left: 2px !important;
  border-top: 7px solid transparent !important;
  border-bottom: 7px solid transparent !important;
  border-left: 10px solid #071014 !important;
  content: "" !important;
}

.service-card li,
.format-copy p,
.format-copy h3,
.proof-grid strong,
.proof-grid span {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere !important;
}

.format-card,
.format-card:nth-child(even) {
  overflow: hidden !important;
}

.format-copy h3 {
  max-width: 100% !important;
}

.format-media-video,
.format-media-landscape {
  width: 100% !important;
  max-width: 100% !important;
  aspect-ratio: 16 / 9 !important;
}

.format-media-video video,
.format-media-landscape video {
  border-radius: inherit !important;
}

.format-video-placeholder strong,
.video-placeholder strong {
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
}

.video-sound-toggle {
  position: absolute !important;
  right: 12px !important;
  bottom: 12px !important;
  z-index: 12 !important;
}

.launch-game.active .launch-start-button {
  opacity: 0.7 !important;
  cursor: not-allowed !important;
}

.launch-obstacle {
  max-width: min(210px, 42vw) !important;
  white-space: normal !important;
  text-align: center !important;
}

@media (max-width: 1180px) {
  .hero {
    --hero-rocket-x: clamp(382px, 42vw, 520px);
    --hero-rocket-y: clamp(214px, 23vw, 286px);
  }
}

@media (max-width: 900px) {
  .hero {
    --hero-rocket-x: clamp(286px, 44vw, 398px);
    --hero-rocket-y: clamp(232px, 35vw, 312px);
  }

  .rocket-continue {
    left: min(calc(var(--hero-rocket-x) + 76px), calc(100vw - 218px)) !important;
    top: calc(var(--hero-rocket-y) - 88px) !important;
  }
}

@media (max-width: 760px) {
  .site-header {
    grid-template-columns: minmax(176px, 1fr) auto !important;
    min-height: 82px !important;
    padding: 12px 10px !important;
  }

  .brand,
  .site-header .brand {
    min-width: clamp(174px, 50vw, 224px) !important;
    max-width: clamp(174px, 50vw, 224px) !important;
  }

  .brand-logo-shell,
  .site-header .brand-logo-shell {
    width: clamp(174px, 50vw, 224px) !important;
    max-width: clamp(174px, 50vw, 224px) !important;
    height: 50px !important;
  }

  .hero {
    --hero-rocket-x: clamp(132px, 37vw, 180px);
    --hero-rocket-y: clamp(270px, 71vw, 326px);
  }

  .hero-title {
    position: relative !important;
    z-index: 2 !important;
  }

  .hero-copy p {
    margin-top: clamp(156px, 39vw, 190px) !important;
  }

  .hero-rocket {
    width: clamp(64px, 18vw, 80px) !important;
  }

  .rocket-continue {
    left: min(calc(var(--hero-rocket-x) + 62px), calc(100vw - 188px)) !important;
    top: calc(var(--hero-rocket-y) - 78px) !important;
    min-width: 178px !important;
    min-height: 52px !important;
    padding: 10px 11px 10px 14px !important;
    gap: 7px !important;
    font-size: 13px !important;
  }

  .rocket-continue::before {
    left: 20px !important;
    bottom: -15px !important;
    width: 29px !important;
    height: 21px !important;
  }

  .bubble-play {
    width: 27px !important;
    height: 27px !important;
  }

  .bubble-play::before {
    border-top-width: 6px !important;
    border-bottom-width: 6px !important;
    border-left-width: 9px !important;
  }

  .service-card {
    padding: 26px 18px !important;
  }

  .service-card li {
    font-size: 13px !important;
    line-height: 1.24 !important;
  }

  .service-grid {
    --mission-mobile-x: 50%;
  }

  .mission-rocket {
    left: 50% !important;
    top: 18px !important;
    width: 56px !important;
    transition: transform 420ms cubic-bezier(0.22, 0.82, 0.22, 1), opacity 180ms ease !important;
    transform: translate3d(-50%, var(--mission-mobile-y-orbit, 420px), 0) rotate(180deg) scale(0.82) !important;
  }

  .service-grid[data-active-planet="start"] .mission-rocket {
    transform: translate3d(-50%, var(--mission-mobile-y-start, 38px), 0) rotate(180deg) scale(0.82) !important;
  }

  .service-grid[data-active-planet="orbit"] .mission-rocket {
    transform: translate3d(-50%, var(--mission-mobile-y-orbit, 420px), 0) rotate(180deg) scale(0.82) !important;
  }

  .service-grid[data-active-planet="landing"] .mission-rocket {
    transform: translate3d(-50%, var(--mission-mobile-y-landing, 820px), 0) rotate(180deg) scale(0.82) !important;
  }

  .format-route {
    padding-left: 0 !important;
  }

  .format-elevator,
  .format-route::before {
    display: none !important;
  }

  .format-card,
  .format-card:nth-child(even) {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
    align-items: stretch !important;
    padding: 22px 16px !important;
  }

  .format-card > .format-copy,
  .format-card:nth-child(even) > .format-copy {
    order: 1 !important;
  }

  .format-card > .format-media,
  .format-card:nth-child(even) > .format-media {
    order: 2 !important;
  }

  .format-copy h3 {
    font-size: clamp(28px, 7vw, 36px) !important;
    line-height: 1.04 !important;
  }

  .format-copy p {
    font-size: 14px !important;
    line-height: 1.48 !important;
  }

  .format-media-video,
  .format-media-landscape {
    min-height: 0 !important;
    aspect-ratio: 16 / 9 !important;
  }

  .format-media-reels {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .format-media-reels .reels-video-slot {
    height: clamp(170px, 48vw, 232px) !important;
  }
}

@media (max-width: 430px) {
  .site-header {
    grid-template-columns: minmax(164px, 1fr) auto !important;
  }

  .brand,
  .site-header .brand,
  .brand-logo-shell,
  .site-header .brand-logo-shell {
    min-width: 164px !important;
    max-width: 164px !important;
    width: 164px !important;
  }

  .brand-logo-shell,
  .site-header .brand-logo-shell {
    height: 46px !important;
  }

  .hero {
    --hero-rocket-x: clamp(122px, 35vw, 152px);
    --hero-rocket-y: clamp(258px, 72vw, 304px);
  }

  .hero-copy p {
    margin-top: clamp(148px, 42vw, 184px) !important;
  }

  .rocket-continue {
    left: min(calc(var(--hero-rocket-x) + 56px), calc(100vw - 172px)) !important;
    top: calc(var(--hero-rocket-y) - 72px) !important;
    min-width: 166px !important;
    font-size: 12px !important;
  }
}

@media (max-width: 370px) {
  .brand,
  .site-header .brand,
  .brand-logo-shell,
  .site-header .brand-logo-shell {
    min-width: 150px !important;
    max-width: 150px !important;
    width: 150px !important;
  }

  .hero {
    --hero-rocket-x: clamp(112px, 33vw, 138px);
    --hero-rocket-y: clamp(254px, 74vw, 292px);
  }

  .rocket-continue {
    left: min(calc(var(--hero-rocket-x) + 50px), calc(100vw - 160px)) !important;
    min-width: 154px !important;
    gap: 5px !important;
  }
}

@keyframes v71HeroRocketIn {
  0% {
    opacity: 0;
    transform: translate3d(-42vw, 9vh, 0) rotate(54deg) scale(0.9);
  }
  82% {
    opacity: 1;
    transform: translate3d(8px, -3px, 0) rotate(54deg) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(54deg) scale(1);
  }
}

@keyframes v71HeroRocketOut {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(54deg) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate3d(58vw, -12vh, 0) rotate(50deg) scale(0.94);
  }
}

.site-header {
  width: min(100% - 28px, var(--content)) !important;
  overflow: visible !important;
}

.brand,
.site-header .brand {
  min-width: clamp(230px, 19vw, 286px) !important;
  width: clamp(230px, 19vw, 286px) !important;
  max-width: clamp(230px, 19vw, 286px) !important;
  min-height: 56px !important;
  justify-self: start !important;
}

.brand-logo-shell,
.site-header .brand-logo-shell {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: 56px !important;
  overflow: visible !important;
}

.brand-wordmark {
  position: absolute !important;
  top: 50% !important;
  left: 0 !important;
  right: auto !important;
  bottom: auto !important;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: left center !important;
  transform: translateY(-50%) !important;
}

.hero {
  --hero-rocket-x: clamp(560px, 43vw, 690px);
  --hero-rocket-y: clamp(198px, 16vw, 262px);
}

.hero-rocket {
  width: clamp(94px, 8.4vw, 126px) !important;
  pointer-events: auto !important;
}

.hero:not(.hero-video-started) .hero-rocket {
  animation: v72HeroRocketIn 1.14s cubic-bezier(0.16, 0.86, 0.18, 1) 0.14s both !important;
}

.hero.rocket-launching .hero-rocket {
  animation: v72HeroRocketOut 0.78s cubic-bezier(0.24, 0.82, 0.18, 1) forwards !important;
}

.rocket-continue {
  top: calc(var(--hero-rocket-y) - clamp(90px, 6.6vw, 112px)) !important;
  left: min(calc(var(--hero-rocket-x) + clamp(86px, 6vw, 118px)), calc(100% - 244px)) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  min-width: 222px !important;
  min-height: 58px !important;
  padding: 12px 16px 12px 18px !important;
  border: 2px solid color-mix(in srgb, var(--text) 88%, var(--cyan)) !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--bg-soft) 94%, #fbfff2 6%) !important;
  background-image: none !important;
  color: var(--text) !important;
  font-size: 15px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

:root[data-theme="light"] .rocket-continue {
  background: #fbfff2 !important;
  color: #071014 !important;
}

.rocket-continue::before {
  left: 25px !important;
  bottom: -21px !important;
  width: 48px !important;
  height: 34px !important;
  border: 0 !important;
  background: inherit !important;
  clip-path: polygon(0 0, 100% 0, 0 100%) !important;
  filter: drop-shadow(-2px 3px 0 color-mix(in srgb, var(--text) 88%, var(--cyan))) !important;
  transform: rotate(-8deg) skewX(-10deg) !important;
}

.rocket-continue span:first-child {
  display: inline-block !important;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
  font-size: inherit !important;
  font-weight: 950 !important;
  text-align: center !important;
}

.bubble-play {
  width: 31px !important;
  height: 31px !important;
}

.phone-screen.video-ready:not(.video-playing) .hero-video,
.format-media-video.is-video-loaded video,
.reels-video-slot.is-video-loaded video {
  opacity: 1 !important;
}

.video-placeholder,
.format-video-placeholder {
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.28) !important;
}

.format-route {
  padding-left: clamp(28px, 4vw, 62px) !important;
}

.format-card,
.format-card:nth-child(even) {
  display: grid !important;
  grid-template-columns: minmax(0, 0.95fr) minmax(280px, 0.85fr) !important;
  align-items: center !important;
  gap: clamp(22px, 4vw, 58px) !important;
  overflow: hidden !important;
}

.format-card:nth-child(even) {
  grid-template-columns: minmax(280px, 0.85fr) minmax(0, 0.95fr) !important;
}

.format-copy,
.format-card > .format-copy,
.format-card:nth-child(even) > .format-copy {
  min-width: 0 !important;
  max-width: 100% !important;
  z-index: 2 !important;
}

.format-copy h3 {
  max-width: 100% !important;
  font-size: clamp(34px, 4.1vw, 64px) !important;
  overflow-wrap: anywhere !important;
}

.format-copy p,
.service-card p,
.service-card li {
  overflow-wrap: anywhere !important;
  hyphens: auto !important;
}

.format-media-video,
.format-media-landscape,
.format-media-reels {
  max-width: 100% !important;
  justify-self: stretch !important;
}

.format-media-video video,
.reels-video-slot video,
.format-media-video img,
.reels-video-slot img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.launch-game.active .launch-start-button {
  display: none !important;
}

.launch-game:not(.active) .launch-start-button {
  display: inline-flex !important;
}

.launch-obstacle {
  min-width: 84px !important;
  max-width: min(190px, 40vw) !important;
  padding: 7px 10px !important;
  line-height: 1.12 !important;
}

.launch-obstacle.star {
  min-width: 48px !important;
  width: 48px !important;
}

.launch-status {
  min-height: 1.45em !important;
}

@media (max-width: 1180px) {
  .hero {
    --hero-rocket-x: clamp(394px, 43vw, 540px);
    --hero-rocket-y: clamp(202px, 22vw, 286px);
  }
}

@media (max-width: 900px) {
  .hero {
    --hero-rocket-x: clamp(300px, 45vw, 414px);
    --hero-rocket-y: clamp(222px, 34vw, 302px);
  }

  .rocket-continue {
    left: min(calc(var(--hero-rocket-x) + 72px), calc(100vw - 214px)) !important;
    top: calc(var(--hero-rocket-y) - 86px) !important;
  }
}

@media (max-width: 760px) {
  .site-header {
    grid-template-columns: minmax(188px, 1fr) auto !important;
    width: min(100% - 18px, var(--content)) !important;
    min-height: 78px !important;
  }

  .brand,
  .site-header .brand {
    min-width: clamp(184px, 54vw, 238px) !important;
    width: clamp(184px, 54vw, 238px) !important;
    max-width: clamp(184px, 54vw, 238px) !important;
    min-height: 54px !important;
  }

  .brand-logo-shell,
  .site-header .brand-logo-shell {
    height: 54px !important;
  }

  .header-actions {
    gap: 7px !important;
  }

  .lang-toggle,
  .theme-toggle,
  .menu-toggle {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
  }

  .hero {
    --hero-rocket-x: clamp(126px, 34vw, 168px);
    --hero-rocket-y: clamp(226px, 60vw, 276px);
    min-height: auto !important;
  }

  .hero-copy p {
    margin-top: clamp(172px, 46vw, 220px) !important;
  }

  .hero-rocket {
    width: clamp(68px, 18vw, 82px) !important;
  }

  .rocket-continue {
    left: min(calc(var(--hero-rocket-x) + 68px), calc(100vw - 190px)) !important;
    top: calc(var(--hero-rocket-y) - 74px) !important;
    min-width: 180px !important;
    min-height: 50px !important;
    padding: 9px 10px 9px 14px !important;
    gap: 7px !important;
    font-size: 13px !important;
  }

  .rocket-continue::before {
    left: 18px !important;
    bottom: -16px !important;
    width: 32px !important;
    height: 23px !important;
  }

  .format-route {
    padding-left: 0 !important;
  }

  .format-card,
  .format-card:nth-child(even) {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    padding: 22px 16px !important;
  }

  .format-card > .format-copy,
  .format-card:nth-child(even) > .format-copy {
    order: 1 !important;
  }

  .format-card > .format-media,
  .format-card:nth-child(even) > .format-media {
    order: 2 !important;
  }

  .format-copy h3 {
    font-size: clamp(28px, 7.4vw, 38px) !important;
    line-height: 1.02 !important;
  }

  .format-copy p {
    font-size: 14px !important;
    line-height: 1.45 !important;
  }

  .format-media-video,
  .format-media-landscape {
    aspect-ratio: 16 / 9 !important;
    min-height: 0 !important;
  }

  .format-media-reels {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    min-height: 0 !important;
    padding: 10px !important;
  }

  .format-media-reels .reels-video-slot {
    height: clamp(158px, 46vw, 226px) !important;
  }

  .mission-rocket {
    left: 50% !important;
    top: 10px !important;
    width: 54px !important;
    transform: translate3d(-50%, var(--mission-mobile-y-orbit, 420px), 0) rotate(180deg) scale(0.82) !important;
  }

  .service-grid[data-active-planet="start"] .mission-rocket {
    transform: translate3d(-50%, var(--mission-mobile-y-start, 42px), 0) rotate(180deg) scale(0.82) !important;
  }

  .service-grid[data-active-planet="orbit"] .mission-rocket {
    transform: translate3d(-50%, var(--mission-mobile-y-orbit, 430px), 0) rotate(180deg) scale(0.82) !important;
  }

  .service-grid[data-active-planet="landing"] .mission-rocket {
    transform: translate3d(-50%, var(--mission-mobile-y-landing, 820px), 0) rotate(180deg) scale(0.82) !important;
  }
}

@media (max-width: 430px) {
  .site-header {
    grid-template-columns: minmax(178px, 1fr) auto !important;
    padding: 10px 8px !important;
  }

  .brand,
  .site-header .brand {
    min-width: 178px !important;
    width: 178px !important;
    max-width: 178px !important;
  }

  .brand-logo-shell,
  .site-header .brand-logo-shell {
    height: 50px !important;
  }

  .hero {
    --hero-rocket-x: clamp(116px, 31vw, 142px);
    --hero-rocket-y: clamp(218px, 58vw, 264px);
  }

  .hero-copy p {
    margin-top: clamp(164px, 44vw, 204px) !important;
  }

  .rocket-continue {
    left: min(calc(var(--hero-rocket-x) + 60px), calc(100vw - 172px)) !important;
    top: calc(var(--hero-rocket-y) - 66px) !important;
    min-width: 162px !important;
    min-height: 46px !important;
    font-size: 12px !important;
  }

  .bubble-play {
    width: 25px !important;
    height: 25px !important;
  }

  .proof-grid > div {
    padding: 14px 12px !important;
  }

  .proof-grid strong {
    font-size: clamp(25px, 7.3vw, 31px) !important;
    line-height: 1.02 !important;
  }
}

@media (max-width: 370px) {
  .brand,
  .site-header .brand {
    min-width: 164px !important;
    width: 164px !important;
    max-width: 164px !important;
  }

  .hero {
    --hero-rocket-x: clamp(104px, 30vw, 128px);
    --hero-rocket-y: clamp(214px, 58vw, 252px);
  }

  .rocket-continue {
    left: min(calc(var(--hero-rocket-x) + 54px), calc(100vw - 158px)) !important;
    min-width: 150px !important;
  }
}

@keyframes v72HeroRocketIn {
  0% {
    opacity: 0;
    transform: translate3d(-46vw, 10vh, 0) rotate(54deg) scale(0.88);
  }
  84% {
    opacity: 1;
    transform: translate3d(7px, -2px, 0) rotate(54deg) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(54deg) scale(1);
  }
}

@keyframes v72HeroRocketOut {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(54deg) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate3d(68vw, -8vh, 0) rotate(48deg) scale(0.92);
  }
}

:root[data-theme="light"] .brand-wordmark-dark {
  display: block !important;
}

:root[data-theme="light"] .brand-wordmark-light {
  display: none !important;
}

:root[data-theme="dark"] .brand-wordmark-dark,
:root:not([data-theme="light"]) .brand-wordmark-dark {
  display: none !important;
}

:root[data-theme="dark"] .brand-wordmark-light,
:root:not([data-theme="light"]) .brand-wordmark-light {
  display: block !important;
}

.hero {
  min-height: calc(100svh - 98px) !important;
  padding-top: clamp(46px, 6vh, 76px) !important;
  padding-bottom: clamp(46px, 6vh, 76px) !important;
  align-items: center !important;
  gap: clamp(26px, 4.5vw, 68px) !important;
  background: transparent !important;
}

.hero-cover-rocket {
  display: grid !important;
  width: min(88%, 318px) !important;
  max-height: 54% !important;
  place-items: center !important;
  margin: 0 auto !important;
}

.hero-cover-play {
  position: absolute !important;
  top: 45% !important;
  left: 54% !important;
  width: clamp(42px, 5vw, 58px) !important;
  height: clamp(42px, 5vw, 58px) !important;
  border-radius: 50% !important;
  background: var(--gradient) !important;
  transform: translate(-50%, -50%) !important;
}

@media (max-width: 760px) {
  .site-header {
    grid-template-columns: minmax(150px, 1fr) auto !important;
    width: calc(100% - 16px) !important;
    min-height: 58px !important;
    margin-top: 8px !important;
    padding: 7px 9px !important;
  }

  .brand,
  .site-header .brand {
    min-width: clamp(150px, 44vw, 196px) !important;
    width: clamp(150px, 44vw, 196px) !important;
    max-width: clamp(150px, 44vw, 196px) !important;
  }

  .brand-logo-shell,
  .site-header .brand-logo-shell {
    height: 42px !important;
  }

  .mobile-nav a[href="#strategie"] {
    display: block !important;
  }

  .hero {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
    padding-top: 42px !important;
    padding-bottom: 54px !important;
    gap: 28px !important;
  }

  .hero-copy {
    display: grid !important;
    gap: 18px !important;
  }

  .hero-title {
    min-height: 0 !important;
    margin: 0 !important;
    font-size: clamp(48px, 15vw, 64px) !important;
  }

  .hero-copy p {
    margin: 0 !important;
    max-width: 100% !important;
  }

  .proof-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    margin-top: 0 !important;
  }

  .proof-grid strong {
    white-space: normal !important;
    font-size: clamp(25px, 7.8vw, 32px) !important;
    line-height: 1.02 !important;
  }

  .phone-shell {
    width: min(74vw, 284px) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 390 / 760 !important;
  }

  .phone-screen {
    top: 4.7% !important;
    right: 5.6% !important;
    bottom: 5.15% !important;
    left: 5.6% !important;
  }

  .hero-cover-rocket {
    width: min(88%, 232px) !important;
  }

  .format-card,
  .format-card:nth-child(even) {
    grid-template-columns: 1fr !important;
    overflow: clip !important;
  }

  .format-copy h3 {
    max-width: 100% !important;
    font-size: clamp(28px, 7.2vw, 36px) !important;
    overflow-wrap: normal !important;
  }

  .reels-video-slot,
  .format-media-reels .reels-video-slot {
    height: clamp(148px, 43vw, 214px) !important;
  }

  .launch-obstacle,
  .launch-obstacle.star,
  .launch-obstacle.comet,
  .launch-obstacle.rock {
    min-width: 104px !important;
    max-width: min(150px, 38vw) !important;
    padding: 7px 9px !important;
    font-size: 12px !important;
  }
}

@media (max-width: 430px) {
  .brand,
  .site-header .brand {
    min-width: 136px !important;
    width: 136px !important;
    max-width: 136px !important;
  }

  .brand-logo-shell,
  .site-header .brand-logo-shell {
    height: 38px !important;
  }

  .phone-shell {
    width: min(76vw, 270px) !important;
  }
}


/* ---- from: final-overrides.css ---- */

.hero > .hero-rocket,
.hero > .rocket-continue {
  display: none !important;
}

.section-pad,
.hero,
.trust-strip,
.services,
.specializations,
.testimonials,
.process,
.about,
.cta {
  background: transparent !important;
}

.section-pad::before,
.section-pad::after,
.hero::before,
.hero::after,
.trust-strip::before,
.trust-strip::after,
.services::before,
.services::after,
.specializations::before,
.specializations::after,
.cta::before,
.cta::after,
.launch-game::before {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  opacity: 0 !important;
}

.site-header {
  width: min(1040px, calc(100vw - 56px)) !important;
  min-height: 72px !important;
}

.brand,
.site-header .brand {
  overflow: visible !important;
}

.hero {
  min-height: calc(100svh - 98px) !important;
  padding-top: clamp(46px, 6vh, 76px) !important;
  padding-bottom: clamp(46px, 6vh, 76px) !important;
  align-items: center !important;
  gap: clamp(26px, 4.5vw, 68px) !important;
}

.hero-copy p {
  margin: clamp(22px, 3vh, 32px) 0 0 !important;
}

.phone-shell {
  position: relative !important;
  display: block !important;
  width: auto !important;
  height: min(66svh, 610px) !important;
  min-height: 420px !important;
  max-height: 610px !important;
  aspect-ratio: 390 / 760 !important;
}

.phone-screen {
  position: absolute !important;
  top: 4.45% !important;
  right: 5.35% !important;
  bottom: 5.05% !important;
  left: 5.35% !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  border-radius: clamp(30px, 2.2vw, 43px) !important;
}

.phone-screen .video-placeholder {
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: auto !important;
  height: auto !important;
  min-height: 100% !important;
  border: 0 !important;
  border-radius: inherit !important;
}

.hero-cover-rocket {
  position: relative !important;
  display: grid !important;
  width: min(88%, 318px) !important;
  max-height: 54% !important;
  place-items: center !important;
  margin: 0 auto !important;
}

.hero-cover-rocket img {
  width: 100% !important;
  height: auto !important;
}

.hero-cover-play {
  position: absolute !important;
  top: 45% !important;
  left: 54% !important;
  display: grid !important;
  width: clamp(42px, 5vw, 58px) !important;
  height: clamp(42px, 5vw, 58px) !important;
  place-items: center !important;
  border-radius: 50% !important;
  background: var(--gradient) !important;
  transform: translate(-50%, -50%) !important;
}

.phone-screen.video-ready:not(.video-playing) .video-placeholder .hero-cover-play {
  display: grid !important;
}

.hero-cover-play::before {
  width: 0 !important;
  height: 0 !important;
  margin-left: 4px !important;
  border-top: 10px solid transparent !important;
  border-bottom: 10px solid transparent !important;
  border-left: 15px solid #071014 !important;
  content: "" !important;
}

body {
  background:
    radial-gradient(circle at 14% 16%, color-mix(in srgb, var(--cyan) 14%, transparent), transparent 31rem),
    radial-gradient(circle at 82% 24%, color-mix(in srgb, var(--yellow) 10%, transparent), transparent 29rem),
    radial-gradient(circle at 50% 86%, color-mix(in srgb, #77d79d 10%, transparent), transparent 34rem),
    linear-gradient(180deg, var(--bg), color-mix(in srgb, var(--bg-soft) 86%, var(--bg)) 52%, var(--bg)) !important;
  background-attachment: fixed !important;
}

body::before {
  inset: -20% !important;
  z-index: -1 !important;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.62) 0 1px, transparent 1.7px),
    radial-gradient(circle, color-mix(in srgb, var(--cyan) 56%, transparent) 0 1px, transparent 1.8px),
    linear-gradient(color-mix(in srgb, var(--cyan) 8%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--yellow) 5%, transparent) 1px, transparent 1px) !important;
  background-position: 0 0, 80px 48px, 0 0, 0 0 !important;
  background-size: 170px 170px, 240px 240px, 94px 94px, 94px 94px !important;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.96), rgba(0, 0, 0, 0.74)) !important;
  opacity: 0.54 !important;
  animation: finalStarDrift 32s linear infinite !important;
}

body::after,
main::before {
  inset: -18% !important;
  z-index: -1 !important;
  background:
    radial-gradient(ellipse at 28% 24%, color-mix(in srgb, var(--cyan) 9%, transparent), transparent 34%),
    radial-gradient(ellipse at 76% 64%, color-mix(in srgb, var(--yellow) 8%, transparent), transparent 36%),
    linear-gradient(116deg, transparent 20%, color-mix(in srgb, var(--cyan) 7%, transparent) 44%, transparent 72%) !important;
  opacity: 0.72 !important;
  animation: finalNebulaDrift 26s ease-in-out infinite alternate !important;
}

@keyframes finalStarDrift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-72px, 88px, 0); }
}

@keyframes finalNebulaDrift {
  from { transform: translate3d(-1.5%, -1%, 0) scale(1.02); }
  to { transform: translate3d(1.8%, 1.3%, 0) scale(1.06); }
}

.phone-screen.video-ready:not(.video-playing) .hero-video,
.phone-screen.video-playing .hero-video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.phone-screen.video-ready:not(.video-playing) .video-placeholder {
  display: grid !important;
  min-height: 100% !important;
  place-items: center !important;
}

.phone-screen.video-ready:not(.video-playing) .video-placeholder strong,
.phone-screen.video-ready:not(.video-playing) .video-placeholder span.hero-cover-label {
  display: none !important;
}

.phone-screen.video-ready:not(.video-playing) .video-placeholder .hero-cover-rocket {
  display: grid !important;
}

.phone-screen.video-ready:not(.video-playing) .video-placeholder .hero-cover-rocket > span.hero-cover-play:last-child {
  display: grid !important;
}

.format-card {
  overflow: clip !important;
}

.launch-obstacle,
.launch-obstacle.star,
.launch-obstacle.comet,
.launch-obstacle.rock {
  z-index: 4 !important;
  max-width: min(210px, 28vw) !important;
  transform: translate3d(var(--obstacle-x, 20px), var(--obstacle-y, -120px), 0) !important;
}

.launch-obstacle.hazard,
.launch-obstacle.bonus {
  color: var(--text) !important;
}

.launch-game.active .launch-start-button {
  pointer-events: none !important;
}

#mini-game {
  scroll-margin-top: 260px !important;
}

@media (max-width: 760px) {
  .site-header {
    width: calc(100% - 16px) !important;
    max-width: calc(100% - 16px) !important;
  }

  .site-header.menu-open {
    max-height: none !important;
  }

  .hero {
    max-width: calc(100vw - 24px) !important;
    padding-top: clamp(26px, 7vw, 38px) !important;
    padding-bottom: 34px !important;
    gap: 16px !important;
  }

  .hero-title {
    font-size: clamp(42px, 13.4vw, 56px) !important;
    line-height: 1.1 !important;
  }

  .word-rotator {
    display: block !important;
    min-height: 1.15em !important;
  }

  .hero-copy p {
    font-size: clamp(18px, 5.1vw, 21px) !important;
    line-height: 1.45 !important;
  }

  .phone-shell {
    width: min(68vw, 232px) !important;
    height: auto !important;
    max-height: none !important;
    margin-inline: auto !important;
  }

  .hero-cover-rocket {
    width: min(82%, 174px) !important;
  }

  .hero-cover-play {
    width: 44px !important;
    height: 44px !important;
  }

  .hero-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .format-route {
    padding-left: 0 !important;
  }

  .format-elevator {
    display: none !important;
  }

  .format-card,
  .format-card:nth-child(even) {
    width: 100% !important;
    min-width: 0 !important;
    padding: 18px !important;
  }

  .format-copy,
  .format-card > .format-copy,
  .format-card:nth-child(even) > .format-copy {
    min-width: 0 !important;
    width: 100% !important;
  }

  .format-copy h3 {
    font-size: clamp(29px, 8.5vw, 38px) !important;
    line-height: 1.02 !important;
  }

  .format-copy p {
    font-size: 15px !important;
  }

  .format-media-video,
  .format-media-landscape {
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 178px !important;
    aspect-ratio: 16 / 9 !important;
  }

  .format-media-reels {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .reels-video-slot,
  .format-media-reels .reels-video-slot {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 9 / 16 !important;
    min-height: 0 !important;
  }

  .launch-game {
    width: 100% !important;
    padding: 16px !important;
  }

  .launch-stage {
    min-height: 332px !important;
  }

  .launch-obstacle,
  .launch-obstacle.star,
  .launch-obstacle.comet,
  .launch-obstacle.rock {
    min-width: 88px !important;
    max-width: min(126px, 33vw) !important;
    padding: 7px 8px !important;
    font-size: 11px !important;
    line-height: 1.04 !important;
  }
}

@media (max-width: 430px) {
  .site-header {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  .brand,
  .site-header .brand {
    min-width: 154px !important;
    width: 154px !important;
    max-width: 154px !important;
  }

  .brand-logo-shell,
  .site-header .brand-logo-shell {
    height: 40px !important;
  }

  .hero {
    max-width: calc(100vw - 18px) !important;
  }

  .hero-title {
    font-size: clamp(40px, 13.2vw, 52px) !important;
  }

  .phone-shell {
    width: min(72vw, 224px) !important;
  }

  .proof-grid strong {
    font-size: clamp(23px, 7vw, 30px) !important;
  }
}

.launch-obstacle,
.launch-obstacle.star,
.launch-obstacle.comet,
.launch-obstacle.rock {
  display: inline-flex !important;
  width: max-content !important;
  min-width: 118px !important;
  max-width: min(230px, 36vw) !important;
  height: auto !important;
  min-height: 38px !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px 12px !important;
  overflow: visible !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  text-align: center !important;
  line-height: 1.08 !important;
  color: var(--text) !important;
  font-size: clamp(12px, 0.92vw, 14px) !important;
}

@media (max-width: 760px) {
  .site-header {
    grid-template-columns: minmax(150px, 1fr) auto !important;
    width: calc(100% - 16px) !important;
    min-height: 58px !important;
    margin-top: 8px !important;
    padding: 7px 9px !important;
  }

  .brand,
  .site-header .brand {
    min-width: clamp(150px, 44vw, 196px) !important;
    width: clamp(150px, 44vw, 196px) !important;
    max-width: clamp(150px, 44vw, 196px) !important;
  }

  .brand-logo-shell,
  .site-header .brand-logo-shell {
    height: 42px !important;
  }

  .mobile-nav a[href="#strategie"] {
    display: block !important;
  }

  .hero {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
    padding-top: 42px !important;
    padding-bottom: 54px !important;
    align-items: start !important;
    gap: 18px !important;
  }

  .hero-copy {
    display: contents !important;
  }

  .hero-title {
    order: 1 !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    font-size: clamp(42px, 12.6vw, 54px) !important;
  }

  .word-rotator {
    width: 100% !important;
    overflow: visible !important;
  }

  .hero-copy p {
    order: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  .hero-visual {
    order: 3 !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
  }

  .hero-actions {
    order: 4 !important;
    width: 100% !important;
    margin-top: 2px !important;
  }

  .proof-grid {
    order: 5 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    margin-top: 0 !important;
  }

  .proof-grid strong {
    white-space: normal !important;
    font-size: clamp(25px, 7.8vw, 32px) !important;
    line-height: 1.02 !important;
  }

  .phone-shell {
    width: min(58vw, 218px) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 390 / 760 !important;
  }

  .phone-screen {
    top: 4.7% !important;
    right: 5.6% !important;
    bottom: 5.15% !important;
    left: 5.6% !important;
  }

  .hero-cover-rocket {
    width: min(86%, 188px) !important;
  }

  .format-card,
  .format-card:nth-child(even) {
    grid-template-columns: 1fr !important;
    overflow: clip !important;
  }

  .format-copy h3 {
    max-width: 100% !important;
    font-size: clamp(28px, 7.2vw, 36px) !important;
    overflow-wrap: normal !important;
  }

  .reels-video-slot,
  .format-media-reels .reels-video-slot {
    height: clamp(148px, 43vw, 214px) !important;
  }

  .launch-obstacle,
  .launch-obstacle.star,
  .launch-obstacle.comet,
  .launch-obstacle.rock {
    min-width: 104px !important;
    max-width: min(150px, 38vw) !important;
    padding: 7px 9px !important;
    font-size: 12px !important;
  }
}

@media (max-width: 430px) {
  .brand,
  .site-header .brand {
    min-width: 136px !important;
    width: 136px !important;
    max-width: 136px !important;
  }

  .brand-logo-shell,
  .site-header .brand-logo-shell {
    height: 38px !important;
  }

  .hero-title {
    font-size: clamp(40px, 12.2vw, 50px) !important;
  }

  .phone-shell {
    width: min(58vw, 212px) !important;
  }
}

.phone-screen.video-ready:not(.video-playing) .video-placeholder .hero-cover-rocket > span.hero-cover-play:last-child,
.phone-screen:not(.video-playing) .video-placeholder .hero-cover-rocket > span.hero-cover-play:last-child {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.hero-cover-play::before {
  display: block !important;
  content: "" !important;
}

.hero {
  max-width: min(1180px, calc(100vw - 40px)) !important;
  min-height: calc(100svh - 108px) !important;
}

.phone-shell {
  height: clamp(420px, 56svh, 560px) !important;
  max-height: 560px !important;
}

.launch-obstacle,
.launch-obstacle.star,
.launch-obstacle.comet,
.launch-obstacle.rock {
  max-width: min(210px, 28vw) !important;
  overflow: visible !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  text-align: center !important;
}

@media (max-width: 760px) {
  .site-header {
    width: calc(100% - 16px) !important;
    max-width: calc(100% - 16px) !important;
  }

  .hero {
    max-width: calc(100vw - 24px) !important;
    padding-top: clamp(26px, 7vw, 38px) !important;
    padding-bottom: 34px !important;
    gap: 16px !important;
  }

  .hero-title {
    font-size: clamp(42px, 13.4vw, 56px) !important;
    line-height: 1.1 !important;
  }

  .hero-copy p {
    margin: 0 !important;
    font-size: clamp(18px, 5.1vw, 21px) !important;
    line-height: 1.45 !important;
  }

  .phone-shell {
    width: min(68vw, 232px) !important;
    height: auto !important;
    max-height: none !important;
    margin-inline: auto !important;
  }

  .format-route {
    padding-left: 0 !important;
  }

  .format-elevator {
    display: none !important;
  }

  .format-card,
  .format-card:nth-child(even) {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 18px !important;
    overflow: clip !important;
  }

  .format-copy,
  .format-card > .format-copy,
  .format-card:nth-child(even) > .format-copy {
    min-width: 0 !important;
    width: 100% !important;
  }

  .format-copy h3 {
    max-width: 100% !important;
    font-size: clamp(29px, 8.5vw, 38px) !important;
    line-height: 1.02 !important;
    overflow-wrap: anywhere !important;
  }

  .format-media-video,
  .format-media-landscape {
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 178px !important;
    aspect-ratio: 16 / 9 !important;
  }

  .format-media-reels {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .reels-video-slot,
  .format-media-reels .reels-video-slot {
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    flex: 0 1 auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 9 / 16 !important;
  }

  .launch-game {
    width: 100% !important;
    padding: 16px !important;
  }

  .launch-stage {
    min-height: 332px !important;
  }

  .launch-obstacle,
  .launch-obstacle.star,
  .launch-obstacle.comet,
  .launch-obstacle.rock {
    min-width: 86px !important;
    max-width: min(122px, 32vw) !important;
    padding: 7px 8px !important;
    font-size: 11px !important;
    line-height: 1.04 !important;
  }
}

@media (max-width: 430px) {
  .brand,
  .site-header .brand {
    min-width: 154px !important;
    width: 154px !important;
    max-width: 154px !important;
  }

  .brand-logo-shell,
  .site-header .brand-logo-shell {
    height: 40px !important;
  }

  .phone-shell {
    width: min(72vw, 224px) !important;
  }
}

html,
body {
  width: 100% !important;
  overflow-x: hidden !important;
}

.site-header {
  width: min(1040px, calc(100vw - 56px)) !important;
  min-height: 66px !important;
  padding: 8px 14px !important;
  overflow: visible !important;
}

@media (min-width: 761px) {
  .hero {
    display: grid !important;
    grid-template-columns: minmax(440px, 560px) minmax(300px, 420px) !important;
    width: min(1180px, calc(100vw - 48px)) !important;
    max-width: min(1180px, calc(100vw - 48px)) !important;
    min-height: calc(100svh - 90px) !important;
    gap: clamp(42px, 5vw, 88px) !important;
    justify-content: space-between !important;
  }

  .hero-copy,
  .hero-title,
  .hero-copy p {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 560px !important;
  }
}

.phone-screen.video-ready:not(.video-playing) .video-placeholder .hero-cover-action strong,
.phone-screen:not(.video-playing) .video-placeholder .hero-cover-action strong {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  color: #fff !important;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
  font-size: clamp(22px, 2vw, 28px) !important;
  font-weight: 950 !important;
  line-height: 1.06 !important;
  text-align: center !important;
}

.launch-obstacle,
.launch-obstacle.star,
.launch-obstacle.comet,
.launch-obstacle.rock {
  color: var(--text) !important;
  min-height: 38px !important;
  overflow: visible !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.32) !important;
}

@media (max-width: 760px) {
  .site-header {
    grid-template-columns: minmax(0, 1fr) auto !important;
    width: calc(100% - 16px) !important;
    max-width: calc(100% - 16px) !important;
    min-height: 58px !important;
    padding: 7px 9px !important;
    overflow: hidden !important;
  }

  .site-header.menu-open {
    overflow: visible !important;
  }

  .site-header .brand {
    min-width: clamp(150px, 44vw, 188px) !important;
    width: clamp(150px, 44vw, 188px) !important;
    max-width: clamp(150px, 44vw, 188px) !important;
    min-height: 40px !important;
  }

  .site-header .brand-logo-shell {
    height: 40px !important;
  }

  .hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: calc(100vw - 18px) !important;
    max-width: calc(100vw - 18px) !important;
    min-height: auto !important;
    padding-top: 30px !important;
    gap: 16px !important;
  }

  .hero-copy,
  .hero-title,
  .hero-copy p,
  .hero-actions,
  .proof-grid {
    width: 100% !important;
    max-width: 100% !important;
  }

  .phone-shell {
    width: min(68vw, 224px) !important;
    height: auto !important;
    margin-inline: auto !important;
  }

  .phone-screen.video-ready:not(.video-playing) .video-placeholder .hero-cover-action strong,
  .phone-screen:not(.video-playing) .video-placeholder .hero-cover-action strong {
    font-size: clamp(19px, 5.3vw, 22px) !important;
  }

  .phone-screen.video-ready:not(.video-playing) .video-placeholder .hero-cover-action .hero-cover-play,
  .phone-screen:not(.video-playing) .video-placeholder .hero-cover-action .hero-cover-play {
    width: 58px !important;
    height: 58px !important;
  }

  .format-copy h3 {
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  .faq {
    margin-top: 34px !important;
  }
}

:root {
  --release-header-height: 66px;
}

html,
body {
  width: 100% !important;
  min-width: 0 !important;
  overflow-x: hidden !important;
}

body {
  background:
    radial-gradient(circle at 20% 18%, color-mix(in srgb, var(--cyan) 11%, transparent), transparent 34rem),
    radial-gradient(circle at 78% 28%, color-mix(in srgb, var(--yellow) 8%, transparent), transparent 32rem),
    radial-gradient(circle at 46% 86%, color-mix(in srgb, #77d79d 9%, transparent), transparent 36rem),
    linear-gradient(180deg, var(--bg), color-mix(in srgb, var(--bg-soft) 88%, var(--bg)) 48%, var(--bg)) !important;
  background-attachment: fixed !important;
}

body::before {
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.56) 0 1px, transparent 1.8px),
    radial-gradient(circle, color-mix(in srgb, var(--cyan) 50%, transparent) 0 1px, transparent 1.9px),
    linear-gradient(color-mix(in srgb, var(--cyan) 6%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--yellow) 4%, transparent) 1px, transparent 1px) !important;
  background-size: 180px 180px, 250px 250px, 108px 108px, 108px 108px !important;
  opacity: 0.4 !important;
}

body::after,
main::before {
  background:
    radial-gradient(ellipse at 30% 26%, color-mix(in srgb, var(--cyan) 8%, transparent), transparent 38%),
    radial-gradient(ellipse at 74% 70%, color-mix(in srgb, var(--yellow) 6%, transparent), transparent 40%),
    linear-gradient(118deg, transparent 18%, color-mix(in srgb, var(--cyan) 5%, transparent) 45%, transparent 74%) !important;
  opacity: 0.54 !important;
}

.site-header {
  width: min(1040px, calc(100vw - 56px)) !important;
  min-height: var(--release-header-height) !important;
  padding: 8px 14px !important;
  overflow: visible !important;
  align-items: center !important;
}

@media (min-width: 761px) {
  .hero {
    display: grid !important;
    grid-template-columns: minmax(440px, 560px) minmax(300px, 420px) !important;
    width: min(1180px, calc(100vw - 48px)) !important;
    max-width: min(1180px, calc(100vw - 48px)) !important;
    min-height: calc(100svh - var(--release-header-height) - 24px) !important;
    gap: clamp(42px, 5vw, 88px) !important;
    justify-content: space-between !important;
  }

  .hero-copy,
  .hero-title,
  .hero-copy p {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 560px !important;
  }

  .hero-copy {
    justify-self: start !important;
  }

  .hero-visual {
    width: min(100%, 420px) !important;
    justify-self: end !important;
  }
}

.phone-screen,
.phone-screen video,
.phone-screen .video-placeholder {
  border-radius: inherit !important;
}

.phone-screen.video-ready:not(.video-playing) .video-placeholder .hero-cover-action strong,
.phone-screen:not(.video-playing) .video-placeholder .hero-cover-action strong {
  display: block !important;
  width: 100% !important;
  color: #fff !important;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
  font-size: clamp(22px, 2vw, 28px) !important;
  font-weight: 950 !important;
  line-height: 1.06 !important;
  text-align: center !important;
  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.68) !important;
}

.video-sound-toggle {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
  font-size: 18px !important;
}

@media (min-width: 761px) {
  .site-header {
    height: 74px !important;
    min-height: 74px !important;
    max-height: 74px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    overflow: visible !important;
  }

  .brand,
  .site-header .brand {
    min-height: 44px !important;
  }

  .brand-logo-shell,
  .site-header .brand-logo-shell {
    height: 44px !important;
  }
}

@media (max-width: 760px) {
  .site-header:not(.menu-open) {
    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;
    overflow: hidden !important;
  }

  .site-header.menu-open {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .site-header:not(.menu-open) .brand,
  .site-header:not(.menu-open) .site-header .brand {
    min-height: 40px !important;
  }

  .site-header:not(.menu-open) .brand-logo-shell,
  .site-header:not(.menu-open) .site-header .brand-logo-shell {
    height: 40px !important;
  }
}

:root {
  --final-header-width: min(1040px, calc(100vw - 48px));
}

body {
  background:
    radial-gradient(circle at 18% 14%, color-mix(in srgb, var(--cyan) 15%, transparent), transparent 34rem),
    radial-gradient(circle at 86% 18%, color-mix(in srgb, var(--yellow) 12%, transparent), transparent 30rem),
    radial-gradient(circle at 44% 72%, color-mix(in srgb, #77d79d 10%, transparent), transparent 36rem),
    linear-gradient(180deg, var(--bg) 0%, color-mix(in srgb, var(--bg-soft) 86%, var(--bg)) 48%, var(--bg) 100%) !important;
  background-attachment: fixed !important;
}

body::before {
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.58) 0 1px, transparent 1.7px),
    radial-gradient(circle, color-mix(in srgb, var(--cyan) 48%, transparent) 0 1px, transparent 1.8px),
    linear-gradient(color-mix(in srgb, var(--cyan) 7%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--yellow) 5%, transparent) 1px, transparent 1px) !important;
  background-size: 170px 170px, 238px 238px, 96px 96px, 96px 96px !important;
  opacity: 0.46 !important;
  animation: finalStarDrift 36s linear infinite !important;
}

body::after,
main::before {
  background:
    radial-gradient(ellipse at 30% 22%, color-mix(in srgb, var(--cyan) 10%, transparent), transparent 35%),
    radial-gradient(ellipse at 78% 58%, color-mix(in srgb, var(--yellow) 8%, transparent), transparent 37%),
    linear-gradient(120deg, transparent 18%, color-mix(in srgb, var(--cyan) 6%, transparent) 48%, transparent 76%) !important;
  opacity: 0.64 !important;
  animation: finalNebulaDrift 30s ease-in-out infinite alternate !important;
}

.section-pad,
.trust-strip,
.services,
.specializations,
.testimonials,
.process,
.about,
.cta,
.faq {
  background: transparent !important;
}

.section-pad::before,
.section-pad::after,
.trust-strip::before,
.trust-strip::after,
.services::before,
.services::after,
.specializations::before,
.specializations::after,
.testimonials::before,
.testimonials::after,
.process::before,
.process::after,
.about::before,
.about::after,
.cta::before,
.cta::after,
.faq::before,
.faq::after,
.launch-game::before {
  background: transparent !important;
  box-shadow: none !important;
  opacity: 0 !important;
}

.site-header {
  width: var(--final-header-width) !important;
  min-height: 64px !important;
  padding: 10px 16px !important;
  align-items: center !important;
}

.desktop-nav a {
  line-height: 1 !important;
}

.header-actions {
  align-items: center !important;
}

.brand,
.site-header .brand {
  min-width: clamp(220px, 18vw, 278px) !important;
  width: clamp(220px, 18vw, 278px) !important;
  max-width: clamp(220px, 18vw, 278px) !important;
  min-height: 46px !important;
}

.brand-logo-shell,
.site-header .brand-logo-shell {
  height: 46px !important;
}

@media (min-width: 761px) {
  .hero {
    display: grid !important;
    grid-template-columns: minmax(420px, 560px) minmax(310px, 430px) !important;
    justify-content: space-between !important;
    width: min(1180px, calc(100vw - 48px)) !important;
    max-width: min(1180px, calc(100vw - 48px)) !important;
    min-height: calc(100svh - 92px) !important;
    gap: clamp(36px, 5vw, 82px) !important;
    padding-top: clamp(46px, 7vh, 82px) !important;
    padding-bottom: clamp(42px, 6vh, 72px) !important;
  }

  .hero-copy {
    max-width: 560px !important;
    min-width: 0 !important;
    justify-self: start !important;
  }

  .hero-title {
    max-width: 560px !important;
  }

  .hero-copy p {
    max-width: 560px !important;
  }

  .hero-visual {
    justify-self: end !important;
    width: min(100%, 430px) !important;
    min-width: 0 !important;
  }
}

@media (min-width: 761px) and (max-width: 1080px) {
  .hero {
    grid-template-columns: minmax(360px, 1fr) minmax(270px, 360px) !important;
  }
}

.phone-shell {
  height: clamp(420px, 55svh, 560px) !important;
}

.phone-screen,
.phone-screen video,
.phone-screen .video-placeholder {
  overflow: hidden !important;
}

.phone-screen video {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.phone-screen.video-ready:not(.video-playing) .hero-video {
  opacity: 1 !important;
}

.phone-screen.video-ready:not(.video-playing) .video-placeholder {
  display: grid !important;
  place-items: center !important;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.38)) !important;
}

.hero-cover-title,
.hero-cover-label {
  display: none !important;
}

.hero-cover-action,
.phone-screen.video-ready:not(.video-playing) .video-placeholder .hero-cover-action {
  position: relative !important;
  display: grid !important;
  width: min(82%, 240px) !important;
  max-height: none !important;
  gap: 16px !important;
  place-items: center !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
}

.hero-cover-action img {
  display: none !important;
}

.hero-cover-action strong {
  display: block !important;
  color: #ffffff !important;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
  font-size: clamp(19px, 1.8vw, 26px) !important;
  font-weight: 950 !important;
  line-height: 1.05 !important;
  text-align: center !important;
  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.65) !important;
}

.hero-cover-action .hero-cover-play {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  display: grid !important;
  width: clamp(58px, 5.8vw, 78px) !important;
  height: clamp(58px, 5.8vw, 78px) !important;
  place-items: center !important;
  border-radius: 999px !important;
  background: var(--gradient) !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.2),
    0 0 34px color-mix(in srgb, var(--cyan) 36%, transparent) !important;
  transform: none !important;
}

.hero-cover-action .hero-cover-play::before {
  display: block !important;
  width: 0 !important;
  height: 0 !important;
  margin-left: 5px !important;
  border-top: 12px solid transparent !important;
  border-bottom: 12px solid transparent !important;
  border-left: 18px solid #061014 !important;
  content: "" !important;
}

.video-sound-toggle {
  display: grid !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  place-items: center !important;
  border-radius: 999px !important;
  font-size: 18px !important;
  line-height: 1 !important;
}

.mini-game-heading {
  width: min(100%, 780px) !important;
  margin: clamp(18px, 4vw, 52px) auto 0 !important;
  text-align: left !important;
}

.mini-game-heading h2 {
  font-size: clamp(42px, 7vw, 76px) !important;
}

.game-intro {
  gap: 8px !important;
}

.launch-game {
  margin-bottom: clamp(28px, 4vw, 48px) !important;
}

.faq {
  margin-top: clamp(26px, 5vw, 64px) !important;
}

.faq-list {
  gap: clamp(10px, 1.4vw, 16px) !important;
}

.faq-item {
  overflow: hidden !important;
}

.faq-item summary {
  gap: 14px !important;
}

.faq-item summary span,
.faq-item p {
  overflow-wrap: anywhere !important;
}

.launch-obstacle,
.launch-obstacle.star,
.launch-obstacle.comet,
.launch-obstacle.rock {
  display: inline-flex !important;
  width: max-content !important;
  min-width: 82px !important;
  max-width: min(182px, 24vw) !important;
  min-height: 36px !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 7px 10px !important;
  color: var(--text) !important;
  font-size: clamp(11px, 0.82vw, 13px) !important;
  line-height: 1.08 !important;
  text-align: center !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

.launch-obstacle.star {
  min-width: 92px !important;
  color: var(--text) !important;
  font-size: clamp(11px, 0.82vw, 13px) !important;
  background:
    linear-gradient(135deg, color-mix(in srgb, #77d79d 38%, transparent), transparent 56%),
    color-mix(in srgb, var(--bg-soft) 88%, transparent) !important;
  border-radius: 999px !important;
}

.launch-obstacle.star::before {
  width: auto !important;
  height: auto !important;
  margin-right: 6px !important;
  clip-path: none !important;
  background: none !important;
  color: var(--yellow) !important;
  filter: none !important;
  content: "★" !important;
}

.launch-obstacle.star::after,
.launch-obstacle.comet::after {
  display: none !important;
}

@media (max-width: 760px) {
  .site-header {
    grid-template-columns: minmax(0, 1fr) auto !important;
    width: calc(100% - 16px) !important;
    max-width: calc(100% - 16px) !important;
    min-height: 58px !important;
    padding: 7px 9px !important;
  }

  .brand,
  .site-header .brand {
    min-width: clamp(150px, 45vw, 190px) !important;
    width: clamp(150px, 45vw, 190px) !important;
    max-width: clamp(150px, 45vw, 190px) !important;
    min-height: 42px !important;
  }

  .brand-logo-shell,
  .site-header .brand-logo-shell {
    height: 42px !important;
  }

  .header-actions {
    gap: 6px !important;
  }

  .lang-toggle,
  .theme-toggle,
  .menu-toggle {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
  }

  .mobile-nav {
    grid-column: 1 / -1 !important;
    gap: 6px !important;
    padding-top: 8px !important;
  }

  .mobile-nav a {
    min-height: 41px !important;
    padding: 10px 12px !important;
  }

  .hero {
    display: grid !important;
    grid-template-columns: 1fr !important;
    max-width: calc(100vw - 18px) !important;
    padding-top: 26px !important;
    gap: 18px !important;
  }

  .hero-copy {
    display: contents !important;
  }

  .hero-title {
    order: 1 !important;
  }

  .hero-copy p {
    order: 2 !important;
    margin-top: 0 !important;
    font-size: clamp(17px, 4.9vw, 20px) !important;
    line-height: 1.43 !important;
  }

  .hero-visual {
    order: 3 !important;
  }

  .hero-actions {
    order: 4 !important;
  }

  .proof-grid {
    order: 5 !important;
  }

  .phone-shell {
    width: min(70vw, 232px) !important;
    height: auto !important;
    margin-inline: auto !important;
  }

  .hero-cover-action {
    width: min(86%, 184px) !important;
    gap: 12px !important;
  }

  .hero-cover-action strong {
    font-size: clamp(17px, 4.8vw, 21px) !important;
  }

  .hero-cover-action .hero-cover-play {
    width: 58px !important;
    height: 58px !important;
  }

  .mini-game-heading {
    width: 100% !important;
    margin-top: 34px !important;
  }

  .mini-game-heading h2 {
    font-size: clamp(40px, 11vw, 56px) !important;
  }

  .launch-game {
    padding: 16px !important;
  }

  .launch-obstacle,
  .launch-obstacle.star,
  .launch-obstacle.comet,
  .launch-obstacle.rock {
    min-width: 78px !important;
    max-width: min(120px, 31vw) !important;
    padding: 7px 8px !important;
    font-size: 11px !important;
  }

  .faq {
    margin-top: 38px !important;
  }

  .faq-item summary {
    align-items: flex-start !important;
  }
}

@media (max-width: 430px) {
  .brand,
  .site-header .brand {
    min-width: 150px !important;
    width: 150px !important;
    max-width: 150px !important;
  }

  .brand-logo-shell,
  .site-header .brand-logo-shell {
    height: 40px !important;
  }

  .phone-shell {
    width: min(72vw, 224px) !important;
  }
}


/* ---- from: release-overrides.css ---- */

html,
body {
  width: 100%;
  min-width: 0;
  overflow-x: hidden;
}

body {
  background:
    radial-gradient(circle at 20% 18%, color-mix(in srgb, var(--cyan) 11%, transparent), transparent 34rem),
    radial-gradient(circle at 78% 28%, color-mix(in srgb, var(--yellow) 8%, transparent), transparent 32rem),
    radial-gradient(circle at 46% 86%, color-mix(in srgb, #77d79d 9%, transparent), transparent 36rem),
    linear-gradient(180deg, var(--bg), color-mix(in srgb, var(--bg-soft) 88%, var(--bg)) 48%, var(--bg));
  background-attachment: fixed;
}

body::before {
  background-size: 180px 180px, 250px 250px, 108px 108px, 108px 108px !important;
  opacity: 0.4 !important;
}

body::after,
main::before {
  opacity: 0.54 !important;
}

.section-pad,
.hero,
.trust-strip,
.services,
.specializations,
.testimonials,
.process,
.about,
.cta,
.faq {
  background: transparent !important;
}

.site-header {
  width: min(1040px, calc(100vw - 56px)) !important;
  min-height: 66px !important;
  padding: 8px 14px !important;
  overflow: visible !important;
  align-items: center !important;
}

.site-header .brand {
  min-width: clamp(220px, 18vw, 278px) !important;
  width: clamp(220px, 18vw, 278px) !important;
  max-width: clamp(220px, 18vw, 278px) !important;
  min-height: 42px !important;
}

.site-header .brand-logo-shell {
  height: 42px !important;
}

.site-header .desktop-nav,
.site-header .header-actions {
  align-self: center !important;
}

@media (min-width: 761px) {
  .hero {
    display: grid !important;
    grid-template-columns: minmax(440px, 560px) minmax(300px, 420px) !important;
    width: min(1180px, calc(100vw - 48px)) !important;
    max-width: min(1180px, calc(100vw - 48px)) !important;
    min-height: calc(100svh - 90px) !important;
    gap: clamp(42px, 5vw, 88px) !important;
    justify-content: space-between !important;
  }

  .hero-copy,
  .hero-title,
  .hero-copy p {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 560px !important;
  }

  .hero-copy {
    justify-self: start !important;
  }

  .hero-visual {
    width: min(100%, 420px) !important;
    justify-self: end !important;
  }
}

.phone-screen video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
}

.phone-screen.video-ready:not(.video-playing) .video-placeholder,
.phone-screen:not(.video-playing) .video-placeholder {
  display: grid !important;
  place-items: center !important;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.42)) !important;
}

.phone-screen.video-ready:not(.video-playing) .video-placeholder .hero-cover-action,
.phone-screen:not(.video-playing) .video-placeholder .hero-cover-action {
  display: grid !important;
  gap: 14px !important;
  place-items: center !important;
  width: min(86%, 250px) !important;
  color: #fff !important;
}

.phone-screen.video-ready:not(.video-playing) .video-placeholder .hero-cover-action strong,
.phone-screen:not(.video-playing) .video-placeholder .hero-cover-action strong {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  color: #fff !important;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
  font-size: clamp(22px, 2vw, 28px) !important;
  font-weight: 950 !important;
  line-height: 1.06 !important;
  text-align: center !important;
  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.68) !important;
}

.phone-screen.video-ready:not(.video-playing) .video-placeholder .hero-cover-action .hero-cover-play,
.phone-screen:not(.video-playing) .video-placeholder .hero-cover-action .hero-cover-play {
  position: relative !important;
  inset: auto !important;
  display: grid !important;
  width: clamp(60px, 5.8vw, 78px) !important;
  height: clamp(60px, 5.8vw, 78px) !important;
  place-items: center !important;
  transform: none !important;
}

.video-sound-toggle {
  width: 42px !important;
  height: 42px !important;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
  font-size: 18px !important;
}

.mini-game-heading {
  margin-bottom: 14px !important;
}

.game-intro > span {
  display: none !important;
}

.launch-obstacle,
.launch-obstacle.star,
.launch-obstacle.comet,
.launch-obstacle.rock {
  max-width: min(190px, 30vw) !important;
  min-height: 38px !important;
  overflow: visible !important;
  color: var(--text) !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.32) !important;
}

.launch-obstacle.comet,
.launch-obstacle.rock {
  min-width: 74px !important;
  width: 74px !important;
}

@media (max-width: 760px) {
  .site-header {
    grid-template-columns: minmax(0, 1fr) auto !important;
    width: calc(100% - 16px) !important;
    max-width: calc(100% - 16px) !important;
    min-height: 58px !important;
    padding: 7px 9px !important;
    overflow: hidden !important;
  }

  .site-header.menu-open {
    overflow: visible !important;
  }

  .site-header .brand {
    min-width: clamp(150px, 44vw, 188px) !important;
    width: clamp(150px, 44vw, 188px) !important;
    max-width: clamp(150px, 44vw, 188px) !important;
    min-height: 40px !important;
  }

  .site-header .brand-logo-shell {
    height: 40px !important;
  }

  .hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: calc(100vw - 18px) !important;
    max-width: calc(100vw - 18px) !important;
    min-height: auto !important;
    padding-top: 30px !important;
    gap: 16px !important;
  }

  .hero-copy,
  .hero-title,
  .hero-copy p,
  .hero-actions,
  .proof-grid {
    width: 100% !important;
    max-width: 100% !important;
  }

  .hero-copy p {
    font-size: clamp(17px, 4.8vw, 20px) !important;
    line-height: 1.43 !important;
  }

  .phone-shell {
    width: min(68vw, 224px) !important;
    height: auto !important;
    margin-inline: auto !important;
  }

  .phone-screen.video-ready:not(.video-playing) .video-placeholder .hero-cover-action strong,
  .phone-screen:not(.video-playing) .video-placeholder .hero-cover-action strong {
    font-size: clamp(19px, 5.3vw, 22px) !important;
  }

  .phone-screen.video-ready:not(.video-playing) .video-placeholder .hero-cover-action .hero-cover-play,
  .phone-screen:not(.video-playing) .video-placeholder .hero-cover-action .hero-cover-play {
    width: 58px !important;
    height: 58px !important;
  }

  .format-copy h3 {
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  .launch-game {
    margin-top: 0 !important;
  }

  .faq {
    margin-top: 34px !important;
  }

  .launch-obstacle,
  .launch-obstacle.star,
  .launch-obstacle.comet,
  .launch-obstacle.rock {
    max-width: min(126px, 34vw) !important;
    min-width: 92px !important;
    font-size: 11px !important;
    line-height: 1.05 !important;
  }

  .launch-obstacle.comet,
  .launch-obstacle.rock {
    min-width: 58px !important;
    width: 58px !important;
  }
}

.mini-game-heading,
section .mini-game-heading {
  margin-bottom: 8px !important;
  padding-bottom: 0 !important;
}

@media (max-width: 760px) {
  section.faq,
  .faq,
  .faq.faq-inline,
  .faq-list,
  section.faq .section-heading,
  .faq .section-heading,
  .faq-inline .section-heading {
    width: min(100%, calc(100vw - 40px)) !important;
  }

  .mini-game-heading,
  section .mini-game-heading {
    margin-bottom: 6px !important;
  }

  .hero .phone-screen > video.hero-preview-video,
  .hero .phone-screen > video.hero-video,
  .hero .phone-screen.video-ready:not(.video-playing) > video.hero-preview-video,
  .hero .phone-screen.video-playing > video.hero-video {
    inset: -4% !important;
    width: 108% !important;
    height: 108% !important;
    min-width: 108% !important;
    min-height: 108% !important;
  }

  .phone-screen .video-sound-toggle,
  .hero .phone-screen .video-sound-toggle {
    right: 20px !important;
    bottom: 20px !important;
  }
}

@media (max-width: 980px) {
  .site-header .brand-logo-shell {
    width: clamp(142px, 43vw, 176px) !important;
    height: 36px !important;
    min-height: 36px !important;
  }
}

.hero .phone-screen > video.hero-preview-video,
.hero .phone-screen > video.hero-video,
.hero .phone-screen.video-ready:not(.video-playing) > video.hero-preview-video,
.hero .phone-screen.video-playing > video.hero-video {
  inset: -4% !important;
  width: 108% !important;
  height: 108% !important;
  min-width: 108% !important;
  min-height: 108% !important;
  object-position: center center !important;
}

.faq,
section.faq,
.faq.faq-inline,
.faq-list {
  width: min(960px, calc(100vw - 48px)) !important;
  max-width: 960px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.faq .section-heading,
section.faq .section-heading,
.faq-inline .section-heading {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: min(960px, calc(100vw - 48px)) !important;
  max-width: 960px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

.faq .section-heading h2,
.faq .section-heading p,
section.faq .section-heading h2,
section.faq .section-heading p,
.faq-inline .section-heading h2,
.faq-inline .section-heading p {
  width: 100% !important;
  max-width: 920px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

.mini-game-heading,
section .mini-game-heading {
  margin-bottom: clamp(8px, 1vw, 14px) !important;
  padding-bottom: 0 !important;
}

.hero .phone-screen > video.hero-preview-video,
.hero .phone-screen > video.hero-video,
.hero .phone-screen.video-ready:not(.video-playing) > video.hero-preview-video,
.hero .phone-screen.video-playing > video.hero-video {
  position: absolute !important;
  inset: -2% !important;
  width: 104% !important;
  height: 104% !important;
  min-width: 104% !important;
  min-height: 104% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  background: #020606 !important;
}

.phone-screen .video-sound-toggle,
.hero .phone-screen .video-sound-toggle {
  right: clamp(16px, 5%, 24px) !important;
  bottom: clamp(16px, 5%, 24px) !important;
  transform: none !important;
  z-index: 12 !important;
}

@media (max-width: 760px) {
  .faq,
  section.faq,
  .faq.faq-inline,
  .faq-list,
  .faq .section-heading,
  section.faq .section-heading,
  .faq-inline .section-heading {
    width: min(100%, calc(100vw - 40px)) !important;
  }

  .mini-game-heading,
  section .mini-game-heading {
    margin-bottom: 10px !important;
  }

  .launch-game#mini-game {
    margin-top: 0 !important;
  }

  .hero .phone-screen > video.hero-preview-video,
  .hero .phone-screen > video.hero-video,
  .hero .phone-screen.video-ready:not(.video-playing) > video.hero-preview-video,
  .hero .phone-screen.video-playing > video.hero-video {
    inset: -3% !important;
    width: 106% !important;
    height: 106% !important;
    min-width: 106% !important;
    min-height: 106% !important;
  }

  .phone-screen .video-sound-toggle,
  .hero .phone-screen .video-sound-toggle {
    right: 18px !important;
    bottom: 18px !important;
  }
}

.section-heading,
.section-heading.compact,
.faq .section-heading,
.contact .section-heading,
.strategy-section .section-heading,
.mini-game-heading {
  text-align: center !important;
  align-items: center !important;
  justify-content: center !important;
}

.section-heading h2,
.section-heading.compact h2,
.faq .section-heading h2,
.contact .section-heading h2,
.strategy-section .section-heading h2,
.mini-game-heading h2,
.section-heading p,
.section-heading.compact p,
.faq .section-heading p,
.contact .section-heading p,
.strategy-section .section-heading p,
.mini-game-heading p {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.mini-game-heading {
  margin-bottom: clamp(16px, 2vw, 26px) !important;
}

.mini-game-heading + .launch-game,
.launch-game#mini-game {
  margin-top: 0 !important;
}

.phone-shell {
  padding: 0 !important;
  border: 6px solid #101818 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.phone-screen {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 9 / 16 !important;
  border-radius: inherit !important;
  overflow: hidden !important;
}

.phone-screen .hero-preview-video,
.phone-screen .hero-video {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
}

.phone-screen .video-placeholder {
  inset: 0 !important;
}

@media (max-width: 1100px) {
  .site-header {
    width: min(100%, calc(100vw - 48px)) !important;
    grid-template-columns: minmax(180px, 1fr) auto !important;
    gap: 14px !important;
  }

  .desktop-nav {
    display: none !important;
  }

  .menu-toggle {
    display: inline-grid !important;
  }

  .header-actions {
    justify-self: end !important;
    min-width: 0 !important;
  }
}

@media (max-width: 860px) {
  .site-header {
    width: min(100%, calc(100vw - 28px)) !important;
    grid-template-columns: minmax(132px, 1fr) auto !important;
    padding: 12px !important;
  }

  .header-actions .button-small {
    display: none !important;
  }

  .lang-toggle,
  .theme-toggle,
  .menu-toggle {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
  }
}

@media (max-width: 520px) {
  .site-header {
    grid-template-columns: minmax(112px, 1fr) auto !important;
    gap: 8px !important;
  }

  .header-actions {
    gap: 6px !important;
  }
}

.section-heading,
.section-heading.compact,
section .section-heading,
section .section-heading.compact,
.mini-game-heading {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

.section-heading > h2,
.section-heading.compact > h2,
section .section-heading > h2,
section .section-heading.compact > h2,
.mini-game-heading > h2,
.section-heading > p,
.section-heading.compact > p,
section .section-heading > p,
section .section-heading.compact > p,
.mini-game-heading > p {
  display: block !important;
  width: 100% !important;
  max-width: 920px !important;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.mini-game-heading {
  margin-bottom: clamp(14px, 1.8vw, 22px) !important;
}

.mini-game-heading + .launch-game {
  margin-top: 0 !important;
}

.phone-screen > video.hero-preview-video,
.phone-screen > video.hero-video,
.phone-screen.video-ready:not(.video-playing) > video.hero-preview-video,
.phone-screen.video-playing > video.hero-video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  transform: none !important;
}

@media (max-width: 1100px) {
  .site-header .desktop-nav,
  header.site-header .desktop-nav,
  nav.desktop-nav {
    display: none !important;
    visibility: hidden !important;
  }

  .site-header .menu-toggle,
  header.site-header .menu-toggle,
  button.menu-toggle {
    display: inline-grid !important;
    visibility: visible !important;
  }
}

html,
body {
  background: var(--bg) !important;
}

body {
  position: relative;
  background:
    radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--cyan) 18%, transparent), transparent 32rem),
    radial-gradient(circle at 78% 24%, color-mix(in srgb, var(--yellow) 11%, transparent), transparent 34rem),
    radial-gradient(circle at 50% 74%, color-mix(in srgb, #68d89a 12%, transparent), transparent 38rem),
    linear-gradient(180deg, var(--bg) 0%, color-mix(in srgb, var(--bg-soft) 82%, var(--bg)) 46%, var(--bg) 100%) !important;
  background-size: 140% 140%, 130% 130%, 150% 150%, 100% 100% !important;
  animation: pepeSpaceDrift 24s ease-in-out infinite alternate !important;
}

body::before {
  background-image:
    radial-gradient(circle, color-mix(in srgb, #fff 78%, transparent) 0 1px, transparent 1.6px),
    radial-gradient(circle, color-mix(in srgb, var(--cyan) 72%, transparent) 0 1px, transparent 1.5px),
    linear-gradient(color-mix(in srgb, var(--cyan) 8%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--cyan) 8%, transparent) 1px, transparent 1px) !important;
  background-position: 0 0, 80px 110px, 0 0, 0 0 !important;
  background-size: 180px 180px, 260px 260px, 116px 116px, 116px 116px !important;
  animation: pepeStarDrift 36s linear infinite !important;
  opacity: 0.36 !important;
}

body::after,
main::before,
.hero::before,
.hero::after,
.specializations::before,
.specializations::after,
.faq::before,
.faq::after,
.launch-game::before {
  background: none !important;
  box-shadow: none !important;
}

main::before {
  content: "";
  position: fixed;
  inset: -20%;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(118deg, transparent 12%, color-mix(in srgb, var(--cyan) 8%, transparent) 24%, transparent 38%),
    linear-gradient(300deg, transparent 34%, color-mix(in srgb, var(--yellow) 6%, transparent) 50%, transparent 68%) !important;
  filter: blur(20px);
  animation: pepeNebulaSweep 30s ease-in-out infinite alternate !important;
  opacity: 0.58 !important;
}

@keyframes pepeSpaceDrift {
  0% { background-position: 0% 0%, 100% 0%, 50% 100%, 0 0; }
  100% { background-position: 8% 12%, 92% 18%, 45% 86%, 0 0; }
}

@keyframes pepeStarDrift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-92px, 136px, 0); }
}

@keyframes pepeNebulaSweep {
  from { transform: translate3d(-3%, -2%, 0) rotate(-2deg); }
  to { transform: translate3d(3%, 2%, 0) rotate(2deg); }
}

.site-header {
  min-height: 62px !important;
  padding-block: 7px !important;
}

.site-header .brand {
  min-width: clamp(214px, 17vw, 270px) !important;
  width: clamp(214px, 17vw, 270px) !important;
  max-width: clamp(214px, 17vw, 270px) !important;
}

.site-header .brand-logo-shell {
  height: 40px !important;
}

@media (min-width: 1061px) {
  .hero {
    grid-template-columns: minmax(470px, 560px) minmax(330px, 410px) !important;
    align-items: center !important;
    min-height: calc(100svh - 86px) !important;
  }

  .hero-copy {
    min-width: 470px !important;
  }
}

@media (min-width: 761px) and (max-width: 1060px) {
  .hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: min(760px, calc(100vw - 48px)) !important;
    min-height: auto !important;
    gap: 30px !important;
  }

  .hero-copy,
  .hero-title,
  .hero-copy p {
    max-width: 620px !important;
    min-width: 0 !important;
  }

  .hero-visual {
    justify-self: center !important;
  }
}

.phone-screen,
.phone-screen video,
.phone-screen .video-placeholder {
  overflow: hidden !important;
  border-radius: inherit !important;
}

.phone-screen .video-placeholder {
  pointer-events: auto !important;
}

.hero-cover-action,
.phone-screen.video-ready:not(.video-playing) .video-placeholder .hero-cover-action,
.phone-screen:not(.video-playing) .video-placeholder .hero-cover-action {
  position: relative !important;
  inset: auto !important;
  display: grid !important;
  place-items: center !important;
  gap: 12px !important;
  width: min(82%, 235px) !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  rotate: none !important;
  animation: none !important;
}

.hero-cover-action::before,
.hero-cover-action::after,
.hero-cover-action img,
.hero-cover-title,
.hero-cover-label {
  display: none !important;
  content: none !important;
}

.hero-cover-action strong {
  display: block !important;
  order: 1 !important;
  width: 100% !important;
  color: #fff !important;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
  font-size: clamp(24px, 2.2vw, 32px) !important;
  line-height: 1.04 !important;
  text-align: center !important;
  letter-spacing: 0 !important;
  text-shadow: 0 4px 22px rgba(0, 0, 0, 0.82) !important;
}

.hero-cover-action .hero-cover-play {
  order: 2 !important;
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  width: clamp(62px, 6vw, 82px) !important;
  height: clamp(62px, 6vw, 82px) !important;
  border-radius: 999px !important;
  background: var(--gradient) !important;
  box-shadow: 0 0 34px color-mix(in srgb, var(--cyan) 42%, transparent) !important;
}

.hero-cover-action .hero-cover-play::before {
  content: "" !important;
  width: 0 !important;
  height: 0 !important;
  margin-left: 5px !important;
  border-top: 13px solid transparent !important;
  border-bottom: 13px solid transparent !important;
  border-left: 19px solid color-mix(in srgb, #001416 90%, #000) !important;
  background: none !important;
  transform: none !important;
}

.format-card {
  overflow: hidden !important;
}

.format-copy,
.format-card > .format-copy,
.format-card:nth-child(even) > .format-copy {
  min-width: 0 !important;
  overflow: hidden !important;
}

.format-copy h3 {
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
}

.format-media-video video,
.reels-video-slot video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.format-media-reels {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: center !important;
  gap: clamp(10px, 2vw, 22px) !important;
}

.reels-video-slot {
  aspect-ratio: 9 / 16 !important;
  width: 100% !important;
  max-width: 170px !important;
  margin-inline: auto !important;
}

.mini-game-heading {
  display: block !important;
  margin-bottom: clamp(18px, 3vw, 32px) !important;
}

.mini-game-heading h2 {
  margin: 0 0 10px !important;
}

.game-intro {
  margin-bottom: 18px !important;
}

.game-intro > span,
.game-intro h3,
.game-intro p {
  display: none !important;
}

.launch-stage {
  overflow: hidden !important;
}

.launch-obstacle {
  display: inline-flex;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
  padding: 8px 11px !important;
  isolation: isolate !important;
}

.faq {
  margin-top: clamp(52px, 7vw, 96px) !important;
}

.faq-list {
  gap: 12px !important;
}

.faq-item summary {
  align-items: flex-start !important;
  gap: 14px !important;
}

.site-footer {
  padding-bottom: max(18px, env(safe-area-inset-bottom)) !important;
}

@media (max-width: 760px) {
  .site-header {
    min-height: 54px !important;
    padding: 6px 8px !important;
    align-items: center !important;
  }

  .site-header:not(.menu-open) {
    max-height: 54px !important;
  }

  .site-header.menu-open {
    max-height: none !important;
  }

  .site-header .brand {
    min-width: clamp(164px, 47vw, 206px) !important;
    width: clamp(164px, 47vw, 206px) !important;
    max-width: clamp(164px, 47vw, 206px) !important;
    min-height: 36px !important;
  }

  .site-header .brand-logo-shell {
    height: 36px !important;
  }

  .header-actions {
    gap: 6px !important;
  }

  .lang-toggle,
  .theme-toggle,
  .menu-toggle {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
  }

  .hero {
    padding-top: 24px !important;
    gap: 20px !important;
  }

  .hero-copy {
    display: grid !important;
    gap: 20px !important;
  }

  .hero-title {
    margin: 0 !important;
  }

  .hero-visual {
    margin-top: 0 !important;
  }

  .phone-shell {
    width: min(76vw, 258px) !important;
  }

  .hero-cover-action strong {
    font-size: clamp(20px, 5.8vw, 25px) !important;
  }

  .hero-cover-action .hero-cover-play {
    width: 58px !important;
    height: 58px !important;
  }

  .hero-cover-action .hero-cover-play::before {
    border-top-width: 10px !important;
    border-bottom-width: 10px !important;
    border-left-width: 15px !important;
  }

  .proof-grid strong {
    font-size: clamp(26px, 8vw, 34px) !important;
    line-height: 0.98 !important;
  }

  .format-card,
  .format-card:nth-child(even) {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .format-card .format-media,
  .format-card:nth-child(even) .format-media {
    grid-column: 1 !important;
    grid-row: auto !important;
  }

  .format-copy h3 {
    font-size: clamp(32px, 10vw, 44px) !important;
    line-height: 0.96 !important;
  }

  .format-copy p,
  .format-copy li {
    font-size: clamp(15px, 4.2vw, 17px) !important;
    line-height: 1.45 !important;
  }

  .format-media-reels {
    gap: 8px !important;
  }

  .reels-video-slot {
    max-width: 104px !important;
    border-radius: 18px !important;
  }

  .mini-game-heading {
    margin-bottom: 18px !important;
  }

  .launch-game {
    margin-top: 0 !important;
    padding: 16px !important;
  }

  .launch-stage {
    min-height: 360px !important;
  }

  .launch-obstacle {
    min-width: 72px !important;
    max-width: 118px !important;
    min-height: 34px !important;
    padding: 7px 9px !important;
    font-size: 10.5px !important;
    line-height: 1.04 !important;
  }

  .faq {
    margin-top: 52px !important;
  }

  .faq-item summary {
    align-items: flex-start !important;
  }

  .faq-item summary span,
  .faq-item p {
    font-size: clamp(17px, 4.8vw, 20px) !important;
    line-height: 1.28 !important;
  }
}

.launch-obstacle[style*="display: none"],
.launch-obstacle.is-hidden {
  display: none !important;
}

.proof-grid div::before,
.proof-grid div::after {
  display: none !important;
  content: none !important;
}

.site-header {
  display: grid !important;
  grid-template-columns: auto minmax(260px, 1fr) auto !important;
  column-gap: clamp(22px, 4vw, 54px) !important;
}

.site-header .desktop-nav {
  justify-self: center !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: clamp(34px, 5vw, 62px) !important;
}

.site-header .header-actions {
  justify-self: end !important;
  display: flex !important;
  align-items: center !important;
}

.phone-screen {
  background: #020606 !important;
}

.phone-screen video {
  background: #020606 !important;
  object-fit: contain !important;
}

.phone-screen.video-ready:not(.video-playing) .hero-video,
.phone-screen.video-playing .hero-video,
.phone-screen .hero-video {
  background: #020606 !important;
  object-fit: contain !important;
  object-position: center center !important;
}

.phone-screen.video-ready:not(.video-playing) .video-placeholder,
.phone-screen:not(.video-playing) .video-placeholder {
  background: #020606 !important;
}

.video-sound-toggle {
  display: grid !important;
  place-items: center !important;
  border: 1px solid color-mix(in srgb, var(--cyan) 42%, transparent) !important;
  background: color-mix(in srgb, #001418 74%, transparent) !important;
  color: #fff !important;
  overflow: hidden !important;
}

.video-sound-toggle::before {
  content: "" !important;
  width: 16px !important;
  height: 14px !important;
  background: #fff !important;
  clip-path: polygon(0 32%, 32% 32%, 72% 0, 72% 100%, 32% 68%, 0 68%) !important;
}

.video-sound-toggle::after {
  content: "" !important;
  position: absolute !important;
  width: 2px !important;
  height: 26px !important;
  border-radius: 999px !important;
  background: #fff !important;
  transform: rotate(45deg) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, #001418 35%, transparent) !important;
}

.video-sound-toggle.is-on::after {
  display: none !important;
}

.mini-game-heading h2 {
  color: var(--text) !important;
}

.mini-game-heading h2 .heading-accent {
  color: transparent !important;
}

.launch-status {
  color: var(--cyan) !important;
}

.faq-item[open] summary {
  margin-bottom: 10px !important;
}

.faq-item p {
  margin-top: 0 !important;
}

@media (max-width: 760px) {
  .site-header .desktop-nav {
    display: none !important;
  }

  .site-header {
    grid-template-columns: minmax(0, 1fr) auto !important;
    column-gap: 8px !important;
  }

  .site-header .header-actions {
    justify-self: end !important;
  }

  .hero {
    align-items: center !important;
    padding-top: 24px !important;
    row-gap: 18px !important;
  }

  .hero-copy {
    display: contents !important;
  }

  .hero-title {
    order: 1 !important;
  }

  .hero-visual {
    order: 2 !important;
    width: 100% !important;
    display: grid !important;
    place-items: center !important;
    margin: 0 auto !important;
  }

  .hero-copy > p {
    order: 3 !important;
  }

  .hero-actions {
    order: 4 !important;
  }

  .proof-grid {
    order: 5 !important;
  }

  .phone-shell {
    width: min(70vw, 238px) !important;
  }

  .hero-title {
    font-size: clamp(50px, 14.4vw, 68px) !important;
    line-height: 0.94 !important;
  }

  .hero-copy > p {
    margin-top: 0 !important;
  }

  .faq-list {
    gap: 12px !important;
  }

  .faq-item {
    padding: 14px 16px !important;
  }

  .faq-item summary {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 40px !important;
    align-items: start !important;
    gap: 10px !important;
    margin: 0 !important;
  }

  .faq-item[open] summary {
    margin-bottom: 10px !important;
  }

  .faq-item summary span {
    display: block !important;
    margin: 0 !important;
  }

  .faq-item p {
    margin: 0 !important;
    padding: 0 !important;
  }

  .mini-game-heading {
    margin-bottom: 20px !important;
  }

  .mini-game-heading p {
    font-size: clamp(17px, 4.9vw, 20px) !important;
    line-height: 1.35 !important;
  }
}

@media (min-width: 761px) and (max-width: 1180px) {
  .site-header {
    grid-template-columns: auto minmax(220px, 1fr) auto !important;
    column-gap: 22px !important;
  }

  .site-header .desktop-nav {
    gap: 28px !important;
  }
}

.phone-screen,
.phone-screen::before,
.phone-screen::after {
  background: #020606 !important;
}

.hero-preview-video,
.phone-screen .hero-preview-video {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: #020606 !important;
  opacity: 1 !important;
}

.phone-screen.video-playing .hero-preview-video {
  opacity: 0 !important;
}

.phone-screen .hero-video {
  z-index: 1 !important;
}

.phone-screen .video-placeholder,
.phone-screen.video-ready:not(.video-playing) .video-placeholder,
.phone-screen:not(.video-playing) .video-placeholder {
  z-index: 2 !important;
  display: grid !important;
  place-items: center !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  pointer-events: auto !important;
}

.hero-cover-title,
.hero-cover-label,
.hero-cover-action strong,
.hero-cover-action .hero-cover-play,
.hero-cover-action .hero-cover-play::before {
  display: none !important;
  content: none !important;
}

.hero-cover-action img,
.phone-screen.video-ready:not(.video-playing) .video-placeholder .hero-cover-action img,
.phone-screen:not(.video-playing) .video-placeholder .hero-cover-action img {
  display: block !important;
  width: clamp(78px, 7.4vw, 116px) !important;
  height: auto !important;
  max-width: 100% !important;
  filter: drop-shadow(0 0 28px color-mix(in srgb, var(--cyan) 42%, transparent)) !important;
}

.hero-actions {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 12px !important;
}

.hero-actions .button {
  width: auto !important;
  min-width: 0 !important;
  flex: 0 0 auto !important;
}

.section-heading,
.section-heading.compact {
  width: min(100%, 1120px) !important;
  max-width: 1120px !important;
  margin-inline: auto !important;
  text-align: left !important;
  align-items: flex-start !important;
}

.section-heading h2,
.section-heading.compact h2 {
  max-width: 1120px !important;
  font-size: clamp(42px, 5vw, 72px) !important;
  line-height: 0.98 !important;
  text-align: left !important;
}

.section-heading p,
.section-heading.compact p {
  max-width: 760px !important;
  text-align: left !important;
}

@media (min-width: 1061px) {
  .hero {
    width: min(1120px, calc(100vw - 72px)) !important;
    max-width: min(1120px, calc(100vw - 72px)) !important;
    grid-template-columns: minmax(500px, 570px) minmax(300px, 380px) !important;
    gap: clamp(36px, 5vw, 78px) !important;
    min-height: calc(100svh - 112px) !important;
    overflow: visible !important;
  }

  .hero-visual {
    width: min(100%, 380px) !important;
    min-height: 560px !important;
  }

  .phone-shell {
    width: min(100%, 330px) !important;
  }

  .testimonials .section-heading h2 {
    white-space: nowrap !important;
  }
}

@media (max-width: 760px) {
  .hero-cover-action img,
  .phone-screen.video-ready:not(.video-playing) .video-placeholder .hero-cover-action img,
  .phone-screen:not(.video-playing) .video-placeholder .hero-cover-action img {
    width: clamp(72px, 23vw, 94px) !important;
  }

  .hero-actions {
    flex-direction: column !important;
  }

  .hero-actions .button {
    width: 100% !important;
  }

  .section-heading,
  .section-heading.compact {
    width: calc(100vw - 40px) !important;
    margin-inline: auto !important;
  }

  .section-heading h2,
  .section-heading.compact h2 {
    font-size: clamp(38px, 10.5vw, 52px) !important;
    line-height: 1 !important;
  }
}

.phone-shell,
.phone-screen,
.phone-screen::before,
.phone-screen::after {
  background: #020606 !important;
}

.phone-screen .hero-preview-video,
.phone-screen .hero-video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: #020606 !important;
}

.phone-screen:not(.video-playing) .hero-preview-video {
  z-index: 1 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.phone-screen:not(.video-playing) .hero-video {
  z-index: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

.phone-screen.video-playing .hero-preview-video {
  opacity: 0 !important;
  visibility: hidden !important;
}

.phone-screen.video-playing .hero-video {
  z-index: 1 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.phone-screen .video-placeholder,
.phone-screen.video-ready:not(.video-playing) .video-placeholder,
.phone-screen:not(.video-playing) .video-placeholder {
  z-index: 2 !important;
  display: grid !important;
  place-items: center !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  min-height: 0 !important;
}

.hero-cover-action {
  display: grid !important;
  place-items: center !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

.hero-cover-action::before,
.hero-cover-action::after,
.hero-cover-title,
.hero-cover-label,
.hero-cover-action strong,
.hero-cover-action .hero-cover-play,
.hero-cover-action .hero-cover-play::before {
  display: none !important;
  content: none !important;
}

.hero-cover-action img {
  display: block !important;
  width: clamp(86px, 8vw, 124px) !important;
  height: auto !important;
  max-width: 44% !important;
  filter: drop-shadow(0 0 26px rgba(12, 192, 223, 0.42)) !important;
}

.hero-actions {
  display: flex !important;
  flex-flow: row wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
}

.hero-actions .button,
.hero-actions .button-primary,
.hero-actions .button-secondary {
  width: auto !important;
  min-width: max-content !important;
  max-width: 100% !important;
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

.section-heading,
.section-heading.compact {
  width: min(1120px, calc(100vw - 72px)) !important;
  max-width: 1120px !important;
  margin-inline: auto !important;
  text-align: left !important;
  align-items: flex-start !important;
}

.section-heading h2,
.section-heading.compact h2 {
  width: 100% !important;
  max-width: 1120px !important;
  font-size: clamp(44px, 4.7vw, 72px) !important;
  line-height: 0.98 !important;
  text-align: left !important;
  text-wrap: balance !important;
}

.section-heading p,
.section-heading.compact p {
  max-width: 780px !important;
  text-align: left !important;
}

@media (min-width: 1061px) {
  .hero {
    width: min(1120px, calc(100vw - 72px)) !important;
    grid-template-columns: minmax(500px, 590px) minmax(300px, 380px) !important;
    gap: clamp(42px, 5vw, 82px) !important;
    align-items: center !important;
    min-height: calc(100svh - 116px) !important;
    padding-top: clamp(18px, 3vh, 34px) !important;
    padding-bottom: clamp(26px, 4vh, 52px) !important;
    overflow: visible !important;
  }

  .hero-copy {
    min-width: 0 !important;
  }

  .hero-visual {
    width: min(100%, 380px) !important;
    min-height: 540px !important;
    justify-self: end !important;
  }

  .phone-shell {
    width: min(100%, 330px) !important;
  }

  .testimonials .section-heading h2 {
    white-space: nowrap !important;
    text-wrap: normal !important;
  }
}

@media (min-width: 761px) and (max-width: 1060px) {
  .hero {
    width: min(960px, calc(100vw - 48px)) !important;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 330px) !important;
    gap: 28px !important;
    overflow: visible !important;
  }

  .hero-actions .button,
  .hero-actions .button-primary,
  .hero-actions .button-secondary {
    min-width: 0 !important;
  }
}

@media (max-width: 760px) {
  .hero {
    width: min(100%, calc(100vw - 32px)) !important;
    overflow: hidden !important;
  }

  .hero-actions {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .hero-actions .button,
  .hero-actions .button-primary,
  .hero-actions .button-secondary {
    width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
  }

  .hero-cover-action img {
    width: clamp(74px, 24vw, 98px) !important;
    max-width: 48% !important;
  }

  .section-heading,
  .section-heading.compact {
    width: min(100%, calc(100vw - 40px)) !important;
  }

  .section-heading h2,
  .section-heading.compact h2 {
    font-size: clamp(38px, 10.5vw, 52px) !important;
    line-height: 1 !important;
  }
}

.site-header {
  width: min(1040px, calc(100vw - 56px)) !important;
  max-width: 1040px !important;
  margin: clamp(14px, 2.2vw, 28px) auto 0 !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  display: grid !important;
  grid-template-columns: minmax(210px, 1fr) auto minmax(260px, 1fr) !important;
  align-items: center !important;
  justify-items: stretch !important;
  gap: clamp(18px, 3vw, 48px) !important;
  padding: 16px 22px !important;
}

.site-header .brand {
  justify-self: start !important;
}

.desktop-nav {
  justify-self: center !important;
}

.header-actions {
  justify-self: end !important;
}

@media (min-width: 1061px) {
  .hero {
    width: min(1120px, calc(100vw - 72px)) !important;
    margin-inline: auto !important;
    grid-template-columns: minmax(470px, 560px) minmax(310px, 360px) !important;
    justify-content: center !important;
    gap: clamp(56px, 6vw, 96px) !important;
  }

  .hero-copy {
    justify-self: start !important;
  }

  .hero-visual {
    justify-self: end !important;
    width: min(100%, 350px) !important;
    min-height: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .phone-shell {
    width: min(100%, 318px) !important;
    aspect-ratio: 9 / 16 !important;
  }
}

.phone-shell {
  aspect-ratio: auto !important;
  padding: clamp(12px, 1.1vw, 16px) !important;
  background: #020606 !important;
  border-radius: clamp(34px, 4vw, 52px) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  display: grid !important;
  place-items: center !important;
}

.phone-screen {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 9 / 16 !important;
  min-height: 0 !important;
  border-radius: clamp(26px, 3.2vw, 42px) !important;
  background: #020606 !important;
  overflow: hidden !important;
}

.phone-screen::before,
.phone-screen::after {
  background: transparent !important;
  pointer-events: none !important;
}

.phone-screen .hero-preview-video,
.phone-screen .hero-video {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  background: #020606 !important;
}

.phone-screen:not(.video-playing) .hero-preview-video {
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 1 !important;
}

.phone-screen:not(.video-playing) .hero-video {
  opacity: 0 !important;
  visibility: hidden !important;
  z-index: 0 !important;
}

.phone-screen .video-placeholder {
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  display: grid !important;
  place-items: center !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

.phone-screen.video-playing .video-placeholder {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.hero-cover-action,
.hero-cover-action img {
  pointer-events: none !important;
}

.hero-cover-action {
  display: grid !important;
  place-items: center !important;
  width: clamp(88px, 7.3vw, 118px) !important;
  height: clamp(88px, 7.3vw, 118px) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.phone-screen.video-ready:not(.video-playing) .video-placeholder span.hero-cover-action,
.phone-screen:not(.video-playing) .video-placeholder span.hero-cover-action {
  display: grid !important;
  place-items: center !important;
  width: clamp(88px, 7.3vw, 118px) !important;
  height: clamp(88px, 7.3vw, 118px) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.hero-cover-action img {
  width: clamp(88px, 7.3vw, 118px) !important;
  height: clamp(88px, 7.3vw, 118px) !important;
  min-width: clamp(88px, 7.3vw, 118px) !important;
  min-height: clamp(88px, 7.3vw, 118px) !important;
  max-width: 42% !important;
  max-height: 42% !important;
  object-fit: contain !important;
  filter: drop-shadow(0 0 28px rgba(12, 192, 223, 0.52)) !important;
}

.section-heading,
.section-heading.compact,
.faq .section-heading,
.contact .section-heading,
.strategy-section .section-heading,
.mini-game-heading {
  width: min(1120px, calc(100vw - 72px)) !important;
  max-width: 1120px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: left !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
}

.section-heading h2,
.section-heading.compact h2,
.faq .section-heading h2,
.contact .section-heading h2,
.strategy-section .section-heading h2,
.mini-game-heading h2 {
  width: 100% !important;
  max-width: 1120px !important;
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  font-size: clamp(44px, 4.7vw, 72px) !important;
  line-height: 0.98 !important;
}

.testimonials .section-heading h2 {
  white-space: normal !important;
  text-wrap: balance !important;
}

@media (min-width: 1220px) {
  .testimonials .section-heading h2 {
    white-space: nowrap !important;
  }
}

@media (min-width: 761px) and (max-width: 1060px) {
  .site-header {
    width: min(940px, calc(100vw - 40px)) !important;
    grid-template-columns: minmax(190px, 1fr) auto minmax(210px, 1fr) !important;
    gap: 20px !important;
  }

  .hero {
    width: min(940px, calc(100vw - 48px)) !important;
    margin-inline: auto !important;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 320px) !important;
    gap: 30px !important;
  }

  .phone-shell {
    width: min(100%, 300px) !important;
  }
}

@media (max-width: 760px) {
  .site-header {
    width: min(100%, calc(100vw - 28px)) !important;
    grid-template-columns: minmax(120px, 1fr) auto !important;
    gap: 10px !important;
    padding: 12px 12px !important;
    margin-top: 12px !important;
  }

  .desktop-nav {
    display: none !important;
  }

  .header-actions {
    gap: 8px !important;
  }

  .hero {
    width: min(100%, calc(100vw - 30px)) !important;
    margin-inline: auto !important;
  }

  .phone-shell {
    width: min(100%, 318px) !important;
    margin-inline: auto !important;
  }

  .hero-cover-action img {
    width: clamp(82px, 25vw, 104px) !important;
    height: clamp(82px, 25vw, 104px) !important;
    min-width: clamp(82px, 25vw, 104px) !important;
    min-height: clamp(82px, 25vw, 104px) !important;
    max-width: 44% !important;
    max-height: 44% !important;
  }

  .hero-cover-action {
    width: clamp(82px, 25vw, 104px) !important;
    height: clamp(82px, 25vw, 104px) !important;
  }

  .section-heading,
  .section-heading.compact,
  .faq .section-heading,
  .contact .section-heading,
  .strategy-section .section-heading,
  .mini-game-heading {
    width: min(100%, calc(100vw - 40px)) !important;
  }

  .section-heading h2,
  .section-heading.compact h2,
  .faq .section-heading h2,
  .contact .section-heading h2,
  .strategy-section .section-heading h2,
  .mini-game-heading h2 {
    font-size: clamp(38px, 10.5vw, 52px) !important;
    line-height: 1 !important;
  }
}

section.faq,
.faq,
.faq.faq-inline,
.faq-list {
  width: min(960px, calc(100vw - 48px)) !important;
  max-width: 960px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

section.faq .section-heading,
.faq .section-heading,
.faq-inline .section-heading {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: min(960px, calc(100vw - 48px)) !important;
  max-width: 960px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

section.faq .section-heading h2,
section.faq .section-heading p,
.faq .section-heading h2,
.faq .section-heading p,
.faq-inline .section-heading h2,
.faq-inline .section-heading p {
  width: 100% !important;
  max-width: 920px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

.mini-game-heading,
section .mini-game-heading {
  margin-bottom: 6px !important;
  padding-bottom: 0 !important;
}

.mini-game-heading + .launch-game,
.launch-game#mini-game {
  margin-top: -28px !important;
}

.hero .phone-screen > video.hero-preview-video,
.hero .phone-screen > video.hero-video,
.hero .phone-screen.video-ready:not(.video-playing) > video.hero-preview-video,
.hero .phone-screen.video-playing > video.hero-video {
  position: absolute !important;
  inset: -3% !important;
  width: 106% !important;
  height: 106% !important;
  min-width: 106% !important;
  min-height: 106% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  background: #020606 !important;
}

.phone-screen .video-sound-toggle,
.hero .phone-screen .video-sound-toggle {
  right: clamp(18px, 5.5%, 26px) !important;
  bottom: clamp(18px, 5.5%, 26px) !important;
  transform: none !important;
  z-index: 12 !important;
}

@media (max-width: 760px) {
  section.faq,
  .faq,
  .faq.faq-inline,
  .faq-list,
  section.faq .section-heading,
  .faq .section-heading,
  .faq-inline .section-heading {
    width: min(100%, calc(100vw - 40px)) !important;
  }

  .mini-game-heading,
  section .mini-game-heading {
    margin-bottom: 4px !important;
  }

  .mini-game-heading + .launch-game,
  .launch-game#mini-game {
    margin-top: -20px !important;
  }

  .hero .phone-screen > video.hero-preview-video,
  .hero .phone-screen > video.hero-video,
  .hero .phone-screen.video-ready:not(.video-playing) > video.hero-preview-video,
  .hero .phone-screen.video-playing > video.hero-video {
    inset: -4% !important;
    width: 108% !important;
    height: 108% !important;
    min-width: 108% !important;
    min-height: 108% !important;
  }

  .phone-screen .video-sound-toggle,
  .hero .phone-screen .video-sound-toggle {
    right: 20px !important;
    bottom: 20px !important;
  }
}

.site-header .brand {
  display: flex !important;
  align-items: center !important;
  height: 44px !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  overflow: visible !important;
}

.site-header .brand-logo-shell {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: clamp(176px, 13vw, 218px) !important;
  height: 42px !important;
  min-height: 42px !important;
  overflow: visible !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

.site-header .brand-wordmark {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: left center !important;
  background: transparent !important;
}


/* ---- from: last-overrides.css ---- */

.format-media-reels.format-media-reels-single {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 0 !important;
  min-height: clamp(330px, 36vw, 460px) !important;
  padding: clamp(18px, 3vw, 32px) !important;
}

.format-media-reels.format-media-reels-single .reels-video-slot {
  flex: 0 0 auto !important;
  width: min(270px, 48vw) !important;
  max-width: 100% !important;
  aspect-ratio: 9 / 16 !important;
  margin-inline: auto !important;
}

.format-media-reels.format-media-reels-single .reels-video-slot video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
}

.hero .phone-screen > video.hero-preview-video,
.hero .phone-screen > video.hero-video,
.hero .phone-screen.video-ready:not(.video-playing) > video.hero-preview-video,
.hero .phone-screen.video-playing > video.hero-video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: 50% 50% !important;
  background: #020606 !important;
}

.hero .phone-screen {
  background: #020606 !important;
  padding: 0 !important;
}

.hero .phone-screen > video.hero-preview-video,
.hero .phone-screen.video-ready:not(.video-playing) > video.hero-preview-video {
  filter: brightness(0.74) saturate(0.98) !important;
}

.hero .phone-screen > video.hero-video,
.hero .phone-screen.video-ready:not(.video-playing) > video.hero-video,
.hero .phone-screen.video-playing > video.hero-video {
  filter: none !important;
}

@media (min-width: 961px) {
  .hero.section-pad {
    width: min(calc(100% - 56px), 1220px) !important;
    min-height: min(760px, calc(100svh - 112px)) !important;
    grid-template-columns: minmax(500px, 0.56fr) minmax(360px, 0.44fr) !important;
    gap: clamp(54px, 6.2vw, 108px) !important;
    align-items: center !important;
    justify-content: center !important;
    padding: clamp(58px, 7vh, 86px) 0 clamp(38px, 5vh, 58px) !important;
    margin-inline: auto !important;
  }

  .hero-copy {
    width: min(100%, 620px) !important;
    max-width: 620px !important;
    justify-self: end !important;
  }

  .hero-title {
    font-size: clamp(58px, 4.35vw, 76px) !important;
    line-height: 0.98 !important;
  }

  .hero-copy p {
    max-width: 610px !important;
    font-size: clamp(18px, 1.18vw, 21px) !important;
    line-height: 1.48 !important;
  }

  .hero .hero-visual {
    width: min(32vw, 460px) !important;
    max-width: 460px !important;
    min-height: min(650px, calc(100svh - 154px)) !important;
    justify-self: start !important;
  }

  .hero .phone-shell {
    width: min(100%, clamp(350px, 29vw, 460px)) !important;
    max-width: 460px !important;
  }
}

body::before,
body::after,
main::before {
  position: fixed !important;
  inset: -28vmax !important;
  width: auto !important;
  height: auto !important;
  pointer-events: none !important;
  transform-origin: center !important;
}

body::after {
  z-index: -3 !important;
  background:
    radial-gradient(circle at 12% 28%, rgba(12, 192, 223, 0.12), transparent 22%),
    radial-gradient(circle at 88% 44%, rgba(255, 222, 89, 0.09), transparent 24%),
    linear-gradient(118deg, transparent 0 42%, rgba(12, 192, 223, 0.055) 46%, rgba(255, 222, 89, 0.045) 50%, transparent 56%) !important;
  opacity: 0.62 !important;
  filter: blur(8px) !important;
  animation: sectionOrbitDrift 34s ease-in-out infinite alternate !important;
}

main::before {
  z-index: -2 !important;
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.42) 0 1px, transparent 1.4px),
    radial-gradient(circle, rgba(12,192,223,0.36) 0 1px, transparent 1.6px),
    linear-gradient(115deg, transparent 0 44%, rgba(12,192,223,0.055) 45%, rgba(255,222,89,0.045) 49%, transparent 55%) !important;
  background-size: 170px 170px, 260px 260px, 760px 760px !important;
  opacity: 0.22 !important;
  animation: starfieldDrift 46s linear infinite !important;
}

.format-route {
  overflow: visible !important;
}

.format-card,
.format-card:nth-child(even) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 420px !important;
  align-items: center !important;
  column-gap: clamp(36px, 5vw, 82px) !important;
}

.format-card > .format-copy,
.format-card:nth-child(even) > .format-copy {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

.format-card > .format-media,
.format-card:nth-child(even) > .format-media {
  grid-column: 2 !important;
  grid-row: 1 !important;
  justify-self: end !important;
  align-self: center !important;
}

.format-media-reels.format-media-reels-single .reels-video-slot {
  width: 280px !important;
  height: 498px !important;
  max-width: 100% !important;
  aspect-ratio: 9 / 16 !important;
  border-radius: 24px !important;
  background: #020606 !important;
  overflow: hidden !important;
  box-shadow: 0 22px 58px rgba(0, 0, 0, 0.24) !important;
}

.format-media-reels.format-media-reels-single .reels-video-slot video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: #020606 !important;
  border-radius: inherit !important;
}

@media (max-width: 960px) {
  .format-card,
  .format-card:nth-child(even) {
    grid-template-columns: 1fr !important;
    row-gap: 22px !important;
  }

  .format-card > .format-copy,
  .format-card:nth-child(even) > .format-copy {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  .format-card > .format-media,
  .format-card:nth-child(even) > .format-media {
    grid-column: 1 !important;
    grid-row: 2 !important;
    justify-self: center !important;
  }

  .format-media-video,
  .format-media-video.format-media-landscape,
  .format-card-primary .format-media-video {
    width: min(100%, 420px) !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
  }

  .format-media-reels.format-media-reels-single {
    width: min(100%, 420px) !important;
    height: auto !important;
    min-height: 0 !important;
  }

  .format-media-reels.format-media-reels-single .reels-video-slot {
    width: min(260px, 72vw) !important;
    height: auto !important;
    aspect-ratio: 9 / 16 !important;
  }
}

body {
  background:
    radial-gradient(circle at 18% 22%, rgba(12, 192, 223, 0.16), transparent 34%),
    radial-gradient(circle at 78% 30%, rgba(255, 222, 89, 0.12), transparent 31%),
    linear-gradient(135deg, #020807 0%, #061514 48%, #030504 100%) !important;
}

body::after {
  background:
    radial-gradient(circle at 12% 26%, rgba(12, 192, 223, 0.18), transparent 24%),
    radial-gradient(circle at 88% 42%, rgba(255, 222, 89, 0.14), transparent 26%),
    radial-gradient(circle at 48% 82%, rgba(109, 224, 170, 0.12), transparent 28%) !important;
  opacity: 0.72 !important;
  animation: spaceGradientDrift 18s ease-in-out infinite alternate !important;
}

main::before {
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.52) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(12,192,223,0.5) 0 1px, transparent 1.6px),
    linear-gradient(115deg, transparent 0 44%, rgba(12,192,223,0.07) 45%, rgba(255,222,89,0.06) 49%, transparent 55%) !important;
  background-size: 170px 170px, 260px 260px, 720px 720px !important;
  opacity: 0.26 !important;
  animation: starfieldDrift 34s linear infinite !important;
}

.section-pad,
.trust-strip,
.specializations,
.planet-system,
.references,
.about,
.process,
.mini-game-section,
.faq-section,
.contact {
  position: relative !important;
  overflow: hidden !important;
}

.section-pad::before,
.references::before,
.about::before,
.process::before,
.mini-game-section::before,
.faq-section::before,
.contact::before {
  content: "" !important;
  position: absolute !important;
  inset: -18% -12% !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background:
    linear-gradient(108deg, transparent 15%, rgba(12,192,223,0.08) 45%, rgba(255,222,89,0.055) 52%, transparent 72%),
    radial-gradient(circle at 18% 28%, rgba(12,192,223,0.13), transparent 24%),
    radial-gradient(circle at 82% 70%, rgba(255,222,89,0.1), transparent 22%) !important;
  opacity: 0.62 !important;
  transform: translate3d(-2%, 0, 0) rotate(-2deg) !important;
  animation: sectionOrbitDrift 22s ease-in-out infinite alternate !important;
}

.section-pad > *,
.trust-strip > *,
.specializations > *,
.planet-system > *,
.references > *,
.about > *,
.process > *,
.mini-game-section > *,
.faq-section > *,
.contact > * {
  position: relative !important;
  z-index: 1 !important;
}

@keyframes sectionOrbitDrift {
  0% {
    transform: translate3d(-3%, -1%, 0) rotate(-2deg) scale(1);
  }
  100% {
    transform: translate3d(3%, 2%, 0) rotate(2deg) scale(1.04);
  }
}

.site-header {
  grid-template-columns: auto minmax(260px, 430px) auto !important;
  align-items: center !important;
  column-gap: clamp(28px, 4vw, 58px) !important;
  min-height: 72px !important;
  padding: 12px clamp(22px, 2.4vw, 34px) !important;
}

.site-header .brand,
.site-header .brand-logo-shell,
.desktop-nav,
.desktop-nav a,
.header-actions {
  align-items: center !important;
  line-height: 1 !important;
}

.site-header .brand {
  display: flex !important;
  height: 46px !important;
}

.site-header .brand-logo-shell {
  display: flex !important;
  height: 46px !important;
}

.desktop-nav {
  display: flex !important;
  justify-content: center !important;
  gap: clamp(34px, 3vw, 48px) !important;
  transform: translateY(1px) !important;
}

.header-actions {
  gap: 10px !important;
  transform: translateY(0) !important;
}

.proof-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  max-width: 540px !important;
}

.proof-grid > div {
  min-height: 94px !important;
  padding: 16px 18px !important;
  border-radius: 10px !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.08), rgba(255,255,255,0.025)),
    radial-gradient(circle at 88% 92%, rgba(12,192,223,0.2), transparent 32%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 18px 42px rgba(0,0,0,0.16) !important;
}

.proof-grid > div::before {
  opacity: 0.44 !important;
}

.proof-grid strong {
  font-size: clamp(28px, 2.2vw, 38px) !important;
  line-height: 0.95 !important;
}

.proof-grid span {
  font-size: 13px !important;
  line-height: 1.15 !important;
}

.format-card > .format-media,
.format-card:nth-child(even) > .format-media,
.format-media-video,
.format-media-landscape {
  width: min(100%, 430px) !important;
  aspect-ratio: 16 / 9 !important;
  min-height: 0 !important;
  max-height: none !important;
}

.format-media-video video,
.format-media-landscape video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.format-media-reels.format-media-reels-single {
  min-height: 520px !important;
  justify-content: center !important;
  align-items: center !important;
}

.format-media-reels.format-media-reels-single .reels-video-slot {
  width: min(280px, 38vw) !important;
  aspect-ratio: 9 / 16 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  border-radius: 24px !important;
}

.format-media-reels.format-media-reels-single .reels-video-slot video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

@media (min-width: 961px) {
  .hero.section-pad {
    grid-template-columns: minmax(470px, 0.54fr) minmax(360px, 0.46fr) !important;
    gap: clamp(62px, 7vw, 128px) !important;
  }

  .hero-copy {
    transform: translateX(18px) !important;
  }
}

@media (max-width: 960px) {
  .site-header {
    grid-template-columns: minmax(0, 1fr) auto !important;
    min-height: 64px !important;
  }

  .desktop-nav {
    display: none !important;
  }

  .proof-grid {
    max-width: none !important;
  }

  .proof-grid > div {
    min-height: 86px !important;
    padding: 14px 16px !important;
  }

  .proof-grid strong {
    font-size: clamp(25px, 8vw, 34px) !important;
  }

  .format-card > .format-media,
  .format-card:nth-child(even) > .format-media,
  .format-media-video,
  .format-media-landscape {
    width: 100% !important;
  }

  .format-media-reels.format-media-reels-single {
    min-height: 440px !important;
  }

  .format-media-reels.format-media-reels-single .reels-video-slot {
    width: min(230px, 68vw) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
}

body::after {
  position: fixed !important;
  inset: -18% !important;
  z-index: -2 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 18% 22%, rgba(12, 192, 223, 0.16), transparent 25%),
    radial-gradient(circle at 74% 34%, rgba(255, 222, 89, 0.13), transparent 24%),
    radial-gradient(circle at 58% 78%, rgba(99, 220, 178, 0.12), transparent 28%);
  opacity: 0.78 !important;
  animation: spaceGradientDrift 18s ease-in-out infinite alternate !important;
  content: "" !important;
}

main::before {
  position: fixed !important;
  inset: 0 !important;
  z-index: -1 !important;
  pointer-events: none !important;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.32) 0 1px, transparent 1.7px),
    radial-gradient(circle, rgba(12, 192, 223, 0.28) 0 1px, transparent 1.9px);
  background-position: 0 0, 38px 28px !important;
  background-size: 180px 180px, 240px 240px !important;
  opacity: 0.22 !important;
  animation: starFieldDrift 32s linear infinite !important;
  content: "" !important;
}

@keyframes spaceGradientDrift {
  0% { transform: translate3d(-2%, -1%, 0) scale(1); }
  100% { transform: translate3d(2.5%, 2%, 0) scale(1.04); }
}

@keyframes starFieldDrift {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-42px, 38px, 0); }
}

.site-header {
  align-items: center !important;
  grid-template-columns: minmax(210px, auto) minmax(260px, 1fr) auto !important;
  gap: clamp(18px, 2.4vw, 34px) !important;
  min-height: 72px !important;
  padding: 11px 18px !important;
}

.site-header .brand {
  align-items: center !important;
  height: 48px !important;
}

.site-header .brand-logo-shell {
  align-self: center !important;
  width: clamp(210px, 15vw, 236px) !important;
  height: 46px !important;
}

.desktop-nav {
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(22px, 3.1vw, 48px) !important;
  height: 48px !important;
}

.header-actions {
  align-items: center !important;
  gap: 8px !important;
  height: 48px !important;
}

.header-actions > * {
  align-self: center !important;
}

@media (min-width: 961px) {
  .hero.section-pad {
    width: min(calc(100% - 56px), 1260px) !important;
    grid-template-columns: minmax(560px, 0.6fr) minmax(340px, 0.4fr) !important;
    gap: clamp(64px, 7.2vw, 128px) !important;
  }

  .hero-copy {
    max-width: 650px !important;
    transform: translateX(clamp(12px, 1.6vw, 26px)) !important;
  }

  .hero .hero-visual {
    transform: translateX(clamp(8px, 1vw, 18px)) !important;
  }

  .proof-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    max-width: 620px !important;
  }
}

.proof-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.faq-item summary span {
  font-size: clamp(16px, 1.18vw, 19px) !important;
  line-height: 1.18 !important;
}

.faq-item p {
  font-size: clamp(15px, 1vw, 17px) !important;
  line-height: 1.58 !important;
}

.cta.section-pad {
  padding-top: clamp(44px, 6vw, 78px) !important;
}

.mini-game-heading {
  margin-bottom: clamp(20px, 3vw, 34px) !important;
}

.launch-game {
  margin-top: 0 !important;
}

@media (max-width: 960px) {
  .site-header {
    grid-template-columns: auto auto !important;
    gap: 8px !important;
  }

  .hero-copy {
    transform: none !important;
  }

  .proof-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 560px) {
  .proof-grid {
    grid-template-columns: 1fr !important;
  }
}

.hero .phone-screen,
.hero .phone-screen::before,
.hero .phone-screen::after,
.hero .phone-screen .hero-preview-video,
.hero .phone-screen .hero-video,
.hero .phone-screen > video {
  background: #000 !important;
}

.hero .phone-screen {
  isolation: isolate !important;
}

.hero .phone-screen .hero-preview-video,
.hero .phone-screen .hero-video,
.hero .phone-screen > video {
  object-position: center center !important;
}

.section-heading,
.section-heading.compact,
.testimonials .section-heading,
.faq .section-heading,
.mini-game-heading,
.cta-intro,
.form-intro {
  display: grid !important;
  justify-content: center !important;
  justify-items: center !important;
  place-items: center !important;
  text-align: center !important;
  margin-inline: auto !important;
}

.section-heading h2,
.section-heading p,
.testimonials .section-heading h2,
.testimonials .section-heading p,
.faq .section-heading h2,
.faq .section-heading p,
.mini-game-heading h2,
.mini-game-heading p,
.cta-intro h2,
.cta-intro p,
.form-intro h2,
.form-intro p {
  text-align: center !important;
  margin-inline: auto !important;
}

.testimonials .section-heading h2 {
  max-width: min(100%, 1180px) !important;
}

@media (max-width: 520px) {
  .hero-title {
    max-width: calc(100vw - 48px) !important;
    font-size: clamp(42px, 12.7vw, 52px) !important;
  }

  .word-rotator,
  .word-rotator span {
    max-width: calc(100vw - 48px) !important;
  }

  .word-rotator span {
    width: auto !important;
    white-space: nowrap !important;
  }
}

@media (min-width: 961px) {
  .hero.section-pad {
    width: min(calc(100% - 56px), 1180px) !important;
    min-height: min(760px, calc(100svh - 96px)) !important;
    grid-template-columns: minmax(500px, 0.58fr) minmax(360px, 0.42fr) !important;
    gap: clamp(48px, 6vw, 96px) !important;
    align-items: center !important;
    padding-block: clamp(56px, 7vh, 82px) clamp(34px, 5vh, 54px) !important;
    margin-inline: auto !important;
  }

  .hero .hero-visual {
    width: min(34vw, 520px) !important;
    max-width: 520px !important;
    justify-self: center !important;
  }

  .hero .phone-shell {
    width: min(100%, clamp(390px, 31vw, 520px)) !important;
    max-width: 520px !important;
  }
}

@media (min-width: 961px) {
  .hero.section-pad {
    width: min(calc(100% - 56px), 1180px) !important;
    min-height: min(760px, calc(100svh - 96px)) !important;
    grid-template-columns: minmax(500px, 0.58fr) minmax(360px, 0.42fr) !important;
    gap: clamp(48px, 6vw, 96px) !important;
    align-items: center !important;
    padding-block: clamp(56px, 7vh, 82px) clamp(34px, 5vh, 54px) !important;
    margin-inline: auto !important;
  }

  .hero-copy {
    width: min(100%, 620px) !important;
    max-width: 620px !important;
    justify-self: start !important;
  }

  .hero-title {
    font-size: clamp(56px, 4.25vw, 74px) !important;
    line-height: 0.98 !important;
  }

  .hero-copy p {
    max-width: 600px !important;
    font-size: clamp(18px, 1.22vw, 21px) !important;
    line-height: 1.42 !important;
  }

  .hero-actions {
    flex-direction: row !important;
    align-items: center !important;
  }

  .hero .hero-visual {
    width: min(34vw, 520px) !important;
    max-width: 520px !important;
    justify-self: center !important;
  }

  .hero .phone-shell {
    width: min(100%, clamp(390px, 31vw, 520px)) !important;
  }
}

.section-heading,
.section-heading.compact,
.cta-intro,
.form-intro {
  text-align: center !important;
  margin-inline: auto !important;
}

.section-heading h2,
.section-heading p,
.cta-intro h2,
.cta-intro p,
.form-intro h2,
.form-intro p {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.faq.faq-inline,
.faq-list {
  width: min(100%, 960px) !important;
  max-width: 960px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (max-width: 960px) {
  .hero.section-pad {
    min-height: auto !important;
  }

  .section-heading h2,
  .cta-intro h2,
  .form-intro h2 {
    max-width: 11.5em !important;
  }

  .faq.faq-inline,
  .faq-list {
    width: min(100%, calc(100vw - 32px)) !important;
  }
}

@media (min-width: 961px) {
  .hero {
    grid-template-columns: minmax(320px, 0.86fr) minmax(520px, 1.14fr) !important;
  }

  .hero .hero-visual {
    width: min(50vw, 680px) !important;
    max-width: 680px !important;
    justify-self: center !important;
  }

  .hero .phone-shell {
    width: min(100%, clamp(520px, 43vw, 680px)) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 810 / 1012.5 !important;
  }
}

@media (max-width: 960px) {
  .hero .phone-shell {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 810 / 1012.5 !important;
  }
}

@media (max-width: 760px) {
  .hero .phone-shell {
    width: min(94vw, 460px) !important;
  }
}

.launch-stage {
  min-height: clamp(360px, 44vw, 520px) !important;
  overflow: hidden !important;
}

.launch-obstacle,
.launch-obstacle.star,
.launch-obstacle.comet,
.launch-obstacle.rock,
.launch-obstacle.money {
  box-sizing: border-box !important;
  width: clamp(128px, 14vw, 188px) !important;
  min-width: 0 !important;
  max-width: min(188px, calc(100vw - 48px)) !important;
  min-height: 44px !important;
  padding: 8px 12px !important;
  border: 1px solid color-mix(in srgb, var(--cyan) 70%, white 10%) !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  text-align: center !important;
  line-height: 1.08 !important;
  font-size: clamp(12px, 0.82vw, 14px) !important;
  font-weight: 950 !important;
  text-shadow: none !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28), 0 0 20px color-mix(in srgb, var(--cyan) 18%, transparent) !important;
}

.launch-obstacle.bonus {
  background: linear-gradient(135deg, #39d2e8 0%, #78dfa6 58%, #ffde59 100%) !important;
  color: #041115 !important;
  border-color: color-mix(in srgb, var(--yellow) 62%, white 12%) !important;
}

.launch-obstacle.hazard {
  background: linear-gradient(135deg, rgba(8, 12, 14, 0.98), rgba(36, 31, 15, 0.98)) !important;
  color: #ffffff !important;
  border-color: #ffde59 !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.34), 0 0 22px rgba(255, 222, 89, 0.22) !important;
}

.launch-obstacle::before,
.launch-obstacle::after,
.launch-obstacle.star::before,
.launch-obstacle.star::after,
.launch-obstacle.comet::before,
.launch-obstacle.comet::after,
.launch-obstacle.rock::before,
.launch-obstacle.rock::after {
  display: none !important;
  content: none !important;
}

.launch-obstacle.collected,
.launch-obstacle.is-hidden {
  opacity: 0 !important;
  transform: translate3d(var(--obstacle-x, 0), var(--obstacle-y, -120px), 0) scale(0.86) !important;
}

@media (max-width: 760px) {
  .launch-stage {
    min-height: clamp(330px, 88vw, 440px) !important;
  }

  .launch-obstacle,
  .launch-obstacle.star,
  .launch-obstacle.comet,
  .launch-obstacle.rock,
  .launch-obstacle.money {
    width: clamp(112px, 31vw, 136px) !important;
    max-width: 136px !important;
    min-height: 40px !important;
    padding: 7px 9px !important;
    font-size: 11.5px !important;
    line-height: 1.05 !important;
  }
}

.hero .phone-shell {
  position: relative !important;
  width: min(100%, clamp(400px, 40vw, 620px)) !important;
  aspect-ratio: 810 / 1012.5 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.hero .phone-shell::before,
.hero .phone-shell::after {
  display: none !important;
  content: none !important;
}

.hero .phone-frame-custom {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  z-index: 1 !important;
  pointer-events: none !important;
  user-select: none !important;
}

.hero .phone-screen {
  position: absolute !important;
  inset: 5.1% 25.1% 8.0% 25.1% !important;
  width: auto !important;
  height: auto !important;
  aspect-ratio: auto !important;
  background: #020606 !important;
  border: 0 !important;
  border-radius: clamp(22px, 2.4vw, 34px) !important;
  box-shadow: none !important;
  overflow: hidden !important;
  z-index: 2 !important;
}

.hero .phone-screen::before,
.hero .phone-screen::after {
  display: none !important;
  content: none !important;
}

.hero .phone-screen .video-placeholder,
.hero .phone-screen .video-sound-toggle {
  z-index: 4 !important;
}

.hero .phone-screen > video.hero-preview-video,
.hero .phone-screen > video.hero-video,
.hero .phone-screen.video-ready:not(.video-playing) > video.hero-preview-video,
.hero .phone-screen.video-playing > video.hero-video {
  object-fit: contain !important;
  object-position: center center !important;
  background: #020606 !important;
}

@media (max-width: 760px) {
  .hero .phone-shell {
    width: min(92vw, 430px) !important;
  }

  .hero .phone-screen {
    border-radius: clamp(20px, 7vw, 30px) !important;
  }
}

.format-media-video,
.format-media-video.format-media-landscape {
  width: min(100%, 420px) !important;
  max-width: 420px !important;
  aspect-ratio: 16 / 9 !important;
  padding: 0 !important;
  background: #020606 !important;
  border: 0 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  justify-self: center !important;
  box-shadow: none !important;
}

.format-card-primary .format-media-video {
  width: min(100%, 420px) !important;
  max-width: 420px !important;
}

.format-media-video video,
.format-media-video.format-media-landscape video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  border-radius: 8px !important;
}

.format-media-video::before,
.format-media-video::after,
.format-media-video.format-media-landscape::before,
.format-media-video.format-media-landscape::after {
  display: none !important;
}

.format-media-video .format-video-placeholder {
  inset: 0 !important;
  border-radius: 8px !important;
}

.format-media-video .video-sound-toggle,
.reels-video-slot .video-sound-toggle {
  display: inline-grid !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

@media (max-width: 960px) {
  .site-header {
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
    overflow: visible !important;
  }

  .site-header .desktop-nav {
    display: none !important;
  }

  .site-header .brand {
    min-width: 0 !important;
    max-width: min(48vw, 210px) !important;
    overflow: visible !important;
  }

  .site-header .brand-logo-shell {
    width: min(46vw, 190px) !important;
    min-width: 132px !important;
    overflow: visible !important;
  }

  .header-actions {
    min-width: 0 !important;
    justify-self: end !important;
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
  }

  .header-actions .button.button-small {
    display: none !important;
  }

  .lang-toggle,
  .theme-toggle,
  .menu-toggle {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
  }

  .menu-toggle {
    display: inline-grid !important;
  }
}

@media (max-width: 520px) {
  .site-header {
    width: min(100%, calc(100vw - 16px)) !important;
    padding: 10px !important;
  }

  .site-header .brand {
    max-width: calc(100vw - 190px) !important;
  }

  .site-header .brand-logo-shell {
    width: min(42vw, 168px) !important;
    min-width: 118px !important;
  }

  .header-actions {
    gap: 6px !important;
  }

  .lang-toggle,
  .theme-toggle,
  .menu-toggle {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
  }

  .format-media-reels.format-media-reels-single {
    min-height: 340px !important;
    padding: 18px !important;
  }

  .format-media-reels.format-media-reels-single .reels-video-slot {
    width: min(220px, 68vw) !important;
  }
}

.hero .phone-screen .hero-video,
.hero .phone-screen > video.hero-video,
.hero .phone-screen.video-ready:not(.video-playing) .hero-video,
.hero .phone-screen.video-ready:not(.video-playing) > video.hero-video,
.hero .phone-screen.video-playing .hero-video,
.hero .phone-screen.video-playing > video.hero-video {
  filter: none !important;
}

@media (min-width: 961px) {
  .hero.section-pad {
    width: min(calc(100% - 56px), 1220px) !important;
    min-height: min(760px, calc(100svh - 112px)) !important;
    grid-template-columns: minmax(500px, 0.58fr) minmax(340px, 0.42fr) !important;
    gap: clamp(54px, 6.2vw, 108px) !important;
    align-items: center !important;
    justify-content: center !important;
    padding: clamp(58px, 7vh, 86px) 0 clamp(38px, 5vh, 58px) !important;
    margin-inline: auto !important;
  }

  .hero-copy {
    width: min(100%, 620px) !important;
    max-width: 620px !important;
    justify-self: end !important;
  }

  .hero-title {
    font-size: clamp(58px, 4.35vw, 76px) !important;
    line-height: 0.98 !important;
  }

  .hero-copy p {
    max-width: 610px !important;
    font-size: clamp(18px, 1.18vw, 21px) !important;
    line-height: 1.48 !important;
  }

  .hero .hero-visual {
    width: min(31vw, 440px) !important;
    max-width: 440px !important;
    min-width: 0 !important;
    min-height: min(630px, calc(100svh - 154px)) !important;
    justify-self: start !important;
  }

  .hero .phone-shell {
    width: min(100%, clamp(330px, 28vw, 440px)) !important;
    max-width: 440px !important;
    min-width: 0 !important;
  }
}

.section-heading,
.section-heading.compact,
.cta-intro,
.form-intro {
  width: min(100%, 1120px) !important;
  max-width: 1120px !important;
  text-align: center !important;
  justify-items: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.section-heading h2,
.section-heading p,
.cta-intro h2,
.cta-intro p,
.form-intro h2,
.form-intro p {
  max-width: 1120px !important;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.section-heading p,
.cta-intro p,
.form-intro p {
  max-width: 820px !important;
}

.faq.faq-inline {
  width: min(100%, 1040px) !important;
  max-width: 1040px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.faq-list {
  width: min(100%, 960px) !important;
  max-width: 960px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.faq-item summary {
  min-height: 72px !important;
  align-items: center !important;
}

.faq-item summary span {
  align-self: center !important;
}

@media (max-width: 960px) {
  .section-heading,
  .section-heading.compact,
  .cta-intro,
  .form-intro {
    width: min(100%, calc(100vw - 32px)) !important;
  }

  .section-heading h2,
  .cta-intro h2,
  .form-intro h2 {
    max-width: 12em !important;
  }

  .faq.faq-inline,
  .faq-list {
    width: min(100%, calc(100vw - 32px)) !important;
  }
}


/* ---- from: final-polish.css ---- */

html,
body {
  background-color: #020807 !important;
}

.hero-visual > .results-medals {
  position: absolute !important;
  inset: 0 !important;
  z-index: 7 !important;
  display: block !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
}

.hero-visual > .results-medals .results-medal {
  position: absolute !important;
  width: clamp(118px, 9.6vw, 154px) !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  border-radius: 10px !important;
  padding: 11px 14px 12px !important;
  overflow: hidden !important;
  border: 1px solid rgba(198, 238, 108, 0.55) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.04) 42%, transparent 43%),
    radial-gradient(circle at 82% 15%, rgba(255, 222, 89, 0.18), transparent 34%),
    linear-gradient(140deg, rgba(12, 192, 223, 0.22), rgba(117, 220, 154, 0.2) 58%, rgba(255, 222, 89, 0.16)),
    rgba(18, 36, 25, 0.78) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 14px 34px rgba(0, 0, 0, 0.24),
    0 0 26px rgba(198, 238, 108, 0.12) !important;
  transform: translate3d(0, 0, 0) !important;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease !important;
}

.hero-visual > .results-medals .results-medal:hover {
  transform: translate3d(0, -3px, 0) !important;
  border-color: rgba(255, 222, 89, 0.82) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 18px 38px rgba(0, 0, 0, 0.28),
    0 0 30px rgba(198, 238, 108, 0.18) !important;
}

.hero-visual > .results-medals .results-medal:nth-child(1) {
  left: clamp(-68px, -5.2vw, -34px) !important;
  top: 34% !important;
}

.hero-visual > .results-medals .results-medal:nth-child(2) {
  right: clamp(-72px, -5vw, -38px) !important;
  top: 17% !important;
}

.hero-visual > .results-medals .results-medal:nth-child(3) {
  right: clamp(-78px, -5.4vw, -40px) !important;
  bottom: 22% !important;
}

.hero-visual > .results-medals .results-medal strong {
  font-size: clamp(1rem, 1.28vw, 1.18rem) !important;
  line-height: 1 !important;
  color: #fff !important;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.28) !important;
}

.hero-visual > .results-medals .results-medal span {
  max-width: none !important;
  margin-top: 5px !important;
  color: #d9ff74 !important;
  font-size: clamp(0.58rem, 0.7vw, 0.68rem) !important;
  font-weight: 900 !important;
  line-height: 1.14 !important;
  text-transform: none !important;
}

.trust-strip {
  padding-top: clamp(46px, 5.8vw, 84px) !important;
  padding-bottom: clamp(18px, 2.6vw, 36px) !important;
}

.trust-strip .trust-copy {
  margin-bottom: clamp(10px, 1.4vw, 18px) !important;
}

.portrait-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: scale(0.88) !important;
  scale: 1 !important;
}

.service-more,
.site-footer a[href*="instagram.com"] {
  text-decoration-thickness: 2px !important;
}

@media (max-width: 980px) {
  .hero-visual > .results-medals .results-medal:nth-child(1) {
    left: -22px !important;
    top: 38% !important;
  }

  .hero-visual > .results-medals .results-medal:nth-child(2) {
    right: -24px !important;
    top: 18% !important;
  }

  .hero-visual > .results-medals .results-medal:nth-child(3) {
    right: -26px !important;
    bottom: 20% !important;
  }
}

@media (max-width: 760px) {
  .hero-visual > .results-medals {
    position: relative !important;
    inset: auto !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: min(100%, 300px) !important;
    max-width: 300px !important;
    margin: 14px auto 0 !important;
  }

  .hero-visual > .results-medals .results-medal,
  .hero-visual > .results-medals .results-medal:nth-child(1),
  .hero-visual > .results-medals .results-medal:nth-child(2),
  .hero-visual > .results-medals .results-medal:nth-child(3) {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    min-height: 0 !important;
    border-radius: 12px !important;
    padding: 10px 14px !important;
  }

  .hero-visual > .results-medals .results-medal strong {
    font-size: 1rem !important;
  }

  .hero-visual > .results-medals .results-medal span {
    font-size: 0.66rem !important;
  }

  .trust-strip {
    padding-top: 34px !important;
  }
}

.phone-screen,
.phone-screen::before,
.phone-screen::after,
.phone-screen video,
.hero-preview-video,
.hero-video {
  background-color: #000 !important;
}

.site-header,
:root[data-theme="dark"] .site-header,
:root:not([data-theme]) .site-header {
  background:
    radial-gradient(circle at 18% 0%, rgba(12, 192, 223, 0.12), transparent 34%),
    radial-gradient(circle at 84% 100%, rgba(255, 222, 89, 0.1), transparent 32%),
    linear-gradient(135deg, rgba(4, 22, 20, 0.74), rgba(4, 13, 12, 0.64)) !important;
  align-items: center !important;
}

.brand {
  display: inline-flex !important;
  align-items: center !important;
  min-width: 0 !important;
  height: 52px !important;
}

.brand-logo-shell {
  position: relative !important;
  display: block !important;
  width: clamp(166px, 14vw, 226px) !important;
  height: 44px !important;
  overflow: visible !important;
  flex: 0 0 auto !important;
}

.brand-wordmark {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: contain !important;
  object-position: left center !important;
  transform: none !important;
  filter: none !important;
  background: transparent !important;
}

.desktop-nav,
.header-actions {
  align-items: center !important;
}

.desktop-nav {
  gap: clamp(18px, 2.8vw, 42px) !important;
}

.site-header .button-small::before,
.site-header .button-small::after,
.mobile-nav a::before,
.mobile-nav a::after {
  content: none !important;
  display: none !important;
}

.site-header .mobile-nav {
  grid-column: 1 / -1 !important;
  z-index: 30 !important;
}

.phone-screen video,
.hero-preview-video,
.hero-video {
  background-color: #000 !important;
}

.phone-screen::before,
.phone-screen::after {
  background: #000 !important;
}

.hero-visual > .results-medals {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  pointer-events: none !important;
  z-index: 5 !important;
}

.hero-visual > .results-medals .results-medal {
  position: absolute !important;
  width: clamp(138px, 11vw, 174px) !important;
  min-height: 56px !important;
  padding: 10px 14px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(210, 244, 113, 0.48) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.03)),
    rgba(101, 135, 47, 0.2) !important;
  box-shadow: 0 16px 40px rgba(188, 255, 77, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
  backdrop-filter: blur(12px) !important;
}

.hero-visual > .results-medals .results-medal:nth-child(1) {
  left: clamp(-62px, -4.4vw, -22px) !important;
  top: 46% !important;
}

.hero-visual > .results-medals .results-medal:nth-child(2) {
  right: clamp(-82px, -5.5vw, -26px) !important;
  top: 25% !important;
}

.hero-visual > .results-medals .results-medal:nth-child(3) {
  right: clamp(-84px, -5.4vw, -28px) !important;
  bottom: 25% !important;
}

.hero-visual > .results-medals .results-medal strong {
  display: block !important;
  color: #f4fff8 !important;
  font-size: clamp(1.02rem, 1.35vw, 1.28rem) !important;
  line-height: 1 !important;
}

.hero-visual > .results-medals .results-medal span {
  display: block !important;
  margin-top: 5px !important;
  color: #d7ff53 !important;
  font-size: 0.68rem !important;
  line-height: 1.15 !important;
  text-transform: none !important;
}

.trust-strip {
  padding-top: clamp(38px, 5vw, 74px) !important;
  padding-bottom: clamp(28px, 4vw, 56px) !important;
}

.trust-strip,
.logo-marquee,
.testimonials {
  border-top: 0 !important;
  border-bottom: 0 !important;
}

.trust-strip::before,
.trust-strip::after,
.logo-marquee::before,
.logo-marquee::after,
.testimonials::before,
.testimonials::after {
  content: none !important;
  display: none !important;
}

.trust-copy p {
  max-width: 760px !important;
  margin-inline: auto !important;
  color: var(--muted) !important;
  font-weight: 600 !important;
}

.portrait-image img {
  object-fit: contain !important;
  object-position: center center !important;
  transform: scale(0.62) !important;
  scale: 1 !important;
}

@media (max-width: 1120px) {
  .desktop-nav,
  .header-actions .button-small {
    display: none !important;
  }

  .menu-toggle {
    display: inline-flex !important;
  }
}

@media (max-width: 980px) {
  .hero-visual > .results-medals .results-medal:nth-child(1) {
    left: -10px !important;
    top: 48% !important;
  }

  .hero-visual > .results-medals .results-medal:nth-child(2) {
    right: -18px !important;
    top: 20% !important;
  }

  .hero-visual > .results-medals .results-medal:nth-child(3) {
    right: -18px !important;
    bottom: 22% !important;
  }
}

@media (max-width: 760px) {
  .brand {
    height: 44px !important;
  }

  .brand-logo-shell {
    width: clamp(136px, 42vw, 178px) !important;
    height: 36px !important;
  }

  .hero-visual > .results-medals {
    position: relative !important;
    inset: auto !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: min(100%, 360px) !important;
    max-width: 360px !important;
    margin: 14px auto 0 !important;
  }

  .hero-visual > .results-medals .results-medal,
  .hero-visual > .results-medals .results-medal:nth-child(1),
  .hero-visual > .results-medals .results-medal:nth-child(2),
  .hero-visual > .results-medals .results-medal:nth-child(3) {
    position: relative !important;
    inset: auto !important;
    width: auto !important;
    min-height: 58px !important;
    padding: 9px 8px !important;
    text-align: center !important;
  }

  .hero-visual > .results-medals .results-medal strong {
    font-size: 0.9rem !important;
  }

  .hero-visual > .results-medals .results-medal span {
    font-size: 0.58rem !important;
  }

  .portrait-image img {
    transform: scale(0.66) !important;
  }
}

.site-header,
:root[data-theme="dark"] .site-header,
:root:not([data-theme]) .site-header {
  align-items: center !important;
  background:
    radial-gradient(circle at 78% 50%, rgba(12, 192, 223, 0.1), transparent 42%),
    linear-gradient(135deg, rgba(4, 23, 21, 0.78), rgba(5, 18, 17, 0.62)) !important;
}

.site-header.menu-open .mobile-nav {
  display: grid !important;
  max-height: 560px !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  visibility: visible !important;
}

.hero-visual > .results-medals .results-medal {
  position: absolute !important;
  width: clamp(126px, 9.6vw, 162px) !important;
  min-height: auto !important;
  aspect-ratio: auto !important;
  border-radius: 10px !important;
  padding: 12px 15px !important;
  border: 1px solid rgba(207, 241, 102, 0.62) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.06) 42%, transparent 43%),
    linear-gradient(140deg, rgba(12, 192, 223, 0.28), rgba(116, 220, 154, 0.23) 58%, rgba(255, 222, 89, 0.2)),
    rgba(20, 34, 21, 0.8) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 16px 36px rgba(0, 0, 0, 0.32),
    0 0 30px rgba(198, 238, 108, 0.15) !important;
}

.trust-strip .trust-copy p {
  color: var(--muted) !important;
  font-weight: 600 !important;
}

@media (max-width: 980px) {
  .hero-visual > .results-medals .results-medal:nth-child(1) {
    left: -36px !important;
    top: 39% !important;
  }

  .hero-visual > .results-medals .results-medal:nth-child(2) {
    right: -38px !important;
    top: 18% !important;
  }

  .hero-visual > .results-medals .results-medal:nth-child(3) {
    right: -42px !important;
    bottom: 20% !important;
  }
}

.site-header,
:root[data-theme="dark"] .site-header,
:root:not([data-theme]) .site-header {
  background:
    radial-gradient(circle at 78% 50%, rgba(12, 192, 223, 0.1), transparent 42%),
    linear-gradient(135deg, rgba(4, 23, 21, 0.78), rgba(5, 18, 17, 0.62)) !important;
  align-items: center !important;
}

.site-header .brand,
.site-header .brand-logo-shell {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  overflow: visible !important;
  line-height: 1 !important;
}

.site-header .brand-wordmark {
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: left center !important;
  transform: none !important;
}

:root[data-theme="dark"] .brand-wordmark-dark,
:root:not([data-theme]) .brand-wordmark-dark {
  opacity: 1 !important;
  visibility: visible !important;
}

:root[data-theme="dark"] .brand-wordmark-light,
:root:not([data-theme]) .brand-wordmark-light {
  opacity: 0 !important;
  visibility: hidden !important;
}

:root[data-theme="light"] .brand-wordmark-dark {
  opacity: 0 !important;
  visibility: hidden !important;
}

:root[data-theme="light"] .brand-wordmark-light {
  opacity: 1 !important;
  visibility: visible !important;
}

.site-header .mobile-nav {
  grid-column: 1 / -1 !important;
  z-index: 20 !important;
}

.site-header.menu-open .mobile-nav {
  display: grid !important;
  max-height: 520px !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  visibility: visible !important;
}

.hero-visual {
  position: relative !important;
  overflow: visible !important;
}

.phone-screen,
.phone-screen .video-placeholder,
.phone-screen video,
.hero-preview-video,
.hero-video {
  background-color: #000 !important;
}

.phone-screen::before,
.phone-screen::after {
  display: none !important;
}

.phone-screen video,
.hero-preview-video,
.hero-video {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
}

.hero-visual > .results-medals {
  position: absolute !important;
  inset: 0 !important;
  z-index: 9 !important;
  display: block !important;
  pointer-events: none !important;
}

.hero-visual > .results-medals .results-medal {
  position: absolute !important;
  width: clamp(126px, 9.6vw, 162px) !important;
  padding: 12px 15px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(207, 241, 102, 0.62) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.06) 42%, transparent 43%),
    linear-gradient(140deg, rgba(12, 192, 223, 0.28), rgba(116, 220, 154, 0.23) 58%, rgba(255, 222, 89, 0.2)),
    rgba(20, 34, 21, 0.8) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 16px 36px rgba(0, 0, 0, 0.32),
    0 0 30px rgba(198, 238, 108, 0.15) !important;
}

.hero-visual > .results-medals .results-medal:nth-child(1) {
  left: clamp(-92px, -6vw, -46px) !important;
  top: 42% !important;
}

.hero-visual > .results-medals .results-medal:nth-child(2) {
  right: clamp(-104px, -6.4vw, -48px) !important;
  top: 21% !important;
}

.hero-visual > .results-medals .results-medal:nth-child(3) {
  right: clamp(-108px, -6.6vw, -50px) !important;
  bottom: 24% !important;
}

.hero-visual > .results-medals .results-medal strong {
  color: #fff !important;
  font-size: clamp(1.04rem, 1.28vw, 1.22rem) !important;
  line-height: 1 !important;
}

.hero-visual > .results-medals .results-medal span {
  color: #dcff6f !important;
  font-size: clamp(0.58rem, 0.66vw, 0.68rem) !important;
  line-height: 1.12 !important;
}

.trust-strip,
.logo-marquee,
.testimonials,
.testimonials::before,
.testimonials::after {
  border-top: 0 !important;
  border-bottom: 0 !important;
}

.trust-strip {
  padding-top: clamp(34px, 4vw, 58px) !important;
  padding-bottom: clamp(10px, 1.3vw, 18px) !important;
}

.trust-strip .trust-copy {
  margin-bottom: clamp(8px, 1vw, 12px) !important;
}

.trust-strip .trust-copy h2 {
  color: #fff !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
}

.trust-strip .trust-copy p {
  font-weight: 600 !important;
  color: var(--muted) !important;
}

.portrait-image img {
  object-fit: contain !important;
  object-position: center center !important;
  transform: scale(0.68) !important;
  transform-origin: center center !important;
}

@media (max-width: 980px) {
  .hero-visual > .results-medals .results-medal:nth-child(1) {
    left: -36px !important;
    top: 41% !important;
  }

  .hero-visual > .results-medals .results-medal:nth-child(2) {
    right: -38px !important;
    top: 19% !important;
  }

  .hero-visual > .results-medals .results-medal:nth-child(3) {
    right: -42px !important;
    bottom: 22% !important;
  }
}

@media (max-width: 760px) {
  .site-header {
    align-items: center !important;
  }

  .site-header .mobile-nav {
    margin-top: 8px !important;
  }

  .hero-visual > .results-medals {
    position: relative !important;
    inset: auto !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
    width: min(100%, 292px) !important;
    max-width: 292px !important;
    margin: 12px auto 0 !important;
  }

  .hero-visual > .results-medals .results-medal,
  .hero-visual > .results-medals .results-medal:nth-child(1),
  .hero-visual > .results-medals .results-medal:nth-child(2),
  .hero-visual > .results-medals .results-medal:nth-child(3) {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    padding: 10px 14px !important;
  }

  .trust-strip {
    padding-top: 30px !important;
  }

  .portrait-image img {
    transform: scale(0.72) !important;
  }
}

body {
  background:
    radial-gradient(circle at 16% 18%, rgba(12, 192, 223, 0.16), transparent 32%),
    radial-gradient(circle at 78% 26%, rgba(255, 222, 89, 0.11), transparent 34%),
    radial-gradient(circle at 45% 76%, rgba(109, 224, 170, 0.09), transparent 36%),
    linear-gradient(135deg, #020807 0%, #061514 52%, #030504 100%) !important;
}

body::before,
body::after,
main::before {
  position: fixed !important;
  inset: -100vh -100vw !important;
  width: auto !important;
  height: auto !important;
  min-width: 300vw !important;
  min-height: 300vh !important;
  pointer-events: none !important;
  transform-origin: center !important;
}

body::before {
  content: "" !important;
  z-index: -4 !important;
  background:
    radial-gradient(circle at 20% 28%, rgba(12, 192, 223, 0.18), transparent 28%),
    radial-gradient(circle at 72% 22%, rgba(255, 222, 89, 0.12), transparent 30%),
    radial-gradient(circle at 52% 82%, rgba(108, 224, 170, 0.13), transparent 32%) !important;
  filter: blur(10px) !important;
  opacity: 0.72 !important;
  animation: spaceGradientDrift 28s ease-in-out infinite alternate !important;
}

body::after {
  z-index: -3 !important;
  background:
    radial-gradient(circle at 12% 28%, rgba(12, 192, 223, 0.12), transparent 22%),
    radial-gradient(circle at 88% 44%, rgba(255, 222, 89, 0.09), transparent 24%),
    radial-gradient(ellipse at 46% 54%, rgba(75, 180, 156, 0.07), transparent 44%) !important;
  opacity: 0.62 !important;
  filter: blur(8px) !important;
  animation: sectionOrbitDrift 34s ease-in-out infinite alternate !important;
}

main::before {
  z-index: -2 !important;
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.42) 0 1px, transparent 1.4px),
    radial-gradient(circle, rgba(12,192,223,0.36) 0 1px, transparent 1.6px),
    radial-gradient(ellipse at 58% 52%, rgba(12,192,223,0.05), transparent 48%) !important;
  background-size: 170px 170px, 260px 260px, 760px 760px !important;
  opacity: 0.22 !important;
  animation: starfieldDrift 46s linear infinite !important;
}

.section-pad,
.trust-strip,
.specializations,
.planet-system,
.references,
.about,
.process,
.mini-game-section,
.faq-section,
.contact {
  background: transparent !important;
}

.section-pad::before,
.section-pad::after,
.trust-strip::before,
.trust-strip::after,
.specializations::before,
.specializations::after,
.planet-system::before,
.planet-system::after,
.references::before,
.references::after,
.about::before,
.about::after,
.process::before,
.process::after,
.mini-game-section::before,
.mini-game-section::after,
.faq-section::before,
.faq-section::after,
.contact::before,
.contact::after {
  background: none !important;
  box-shadow: none !important;
  opacity: 0 !important;
}

@media (min-width: 961px) {
  .format-card,
  .format-card:nth-child(even) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 420px !important;
    align-items: center !important;
    column-gap: clamp(36px, 5vw, 82px) !important;
  }

  .format-card > .format-copy,
  .format-card:nth-child(even) > .format-copy {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  .format-card > .format-media,
  .format-card:nth-child(even) > .format-media {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: center !important;
  }
}

.format-media-video,
.format-media-video.format-media-landscape,
.format-card-primary .format-media-video {
  width: 420px !important;
  height: 236px !important;
  max-width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  border-radius: 8px !important;
  background: #020606 !important;
  overflow: hidden !important;
}

.format-media-video video,
.format-media-video.format-media-landscape video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  border-radius: inherit !important;
}

.format-media-reels.format-media-reels-single {
  width: 420px !important;
  height: 520px !important;
  min-height: 520px !important;
  max-width: 100% !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.format-media-reels.format-media-reels-single .reels-video-slot,
.format-card .format-media-reels.format-media-reels-single .reels-video-slot,
.format-media-reels .reels-video-slot {
  width: 280px !important;
  height: 498px !important;
  max-width: 100% !important;
  aspect-ratio: 9 / 16 !important;
  border-radius: 24px !important;
  background: #020606 !important;
  overflow: hidden !important;
  box-shadow: 0 22px 58px rgba(0, 0, 0, 0.24) !important;
}

.format-media-reels.format-media-reels-single .reels-video-slot video,
.format-media-reels .reels-video-slot video,
.reels-video-slot video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: #020606 !important;
  border-radius: inherit !important;
}

.format-media-video .format-video-placeholder,
.reels-video-slot .format-video-placeholder {
  inset: 0 !important;
  border-radius: inherit !important;
}

@media (max-width: 960px) {
  .format-card,
  .format-card:nth-child(even) {
    grid-template-columns: 1fr !important;
    row-gap: 22px !important;
  }

  .format-card > .format-copy,
  .format-card:nth-child(even) > .format-copy {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  .format-card > .format-media,
  .format-card:nth-child(even) > .format-media {
    grid-column: 1 !important;
    grid-row: 2 !important;
    justify-self: center !important;
  }

  .format-media-video,
  .format-media-video.format-media-landscape,
  .format-card-primary .format-media-video {
    width: min(100%, 420px) !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
  }

  .format-media-reels.format-media-reels-single {
    width: min(100%, 420px) !important;
    height: auto !important;
    min-height: 0 !important;
  }

  .format-media-reels.format-media-reels-single .reels-video-slot,
  .format-card .format-media-reels.format-media-reels-single .reels-video-slot,
  .format-media-reels .reels-video-slot {
    width: min(260px, 72vw) !important;
    height: auto !important;
    aspect-ratio: 9 / 16 !important;
  }
}

:root[data-theme="dark"] .site-header,
:root:not([data-theme]) .site-header {
  background:
    linear-gradient(135deg, rgba(4, 42, 42, 0.78), rgba(7, 34, 29, 0.58)),
    rgba(2, 29, 30, 0.48) !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.14) !important;
}

:root[data-theme="dark"] .site-header.menu-open,
:root:not([data-theme]) .site-header.menu-open {
  background:
    linear-gradient(135deg, rgba(4, 42, 42, 0.9), rgba(7, 34, 29, 0.72)),
    rgba(2, 29, 30, 0.68) !important;
}

.site-header .mobile-nav {
  display: none !important;
  grid-column: 1 / -1 !important;
  width: 100% !important;
  margin-top: 12px !important;
  visibility: hidden !important;
  opacity: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

.site-header.menu-open .mobile-nav {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  max-height: 460px !important;
  overflow: visible !important;
  pointer-events: auto !important;
}

.site-header .mobile-nav a {
  background: rgba(255, 255, 255, 0.055) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

:root[data-theme="light"] .site-header .mobile-nav a {
  background: rgba(255, 255, 255, 0.72) !important;
  border-color: rgba(0, 0, 0, 0.11) !important;
}

.known-from-strip {
  margin-top: 22px !important;
  gap: 14px !important;
  font-size: 0.78rem !important;
  opacity: 1 !important;
}

.known-from-logos {
  gap: 12px !important;
}

.known-from-logos img {
  width: 84px !important;
  height: 42px !important;
  padding: 5px 8px !important;
  border-radius: 12px !important;
  transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease !important;
}

.known-from-logos img:hover {
  transform: translateY(-4px) scale(1.04) !important;
  border-color: rgba(12, 192, 223, 0.44) !important;
  box-shadow: 0 18px 34px rgba(12, 192, 223, 0.18), 0 10px 26px rgba(0, 0, 0, 0.18) !important;
}

.trust-strip {
  padding-top: clamp(70px, 8vw, 118px) !important;
  padding-bottom: clamp(42px, 5vw, 72px) !important;
}

.trust-strip .trust-copy {
  max-width: 920px !important;
  margin: 0 auto clamp(26px, 3vw, 42px) !important;
  text-align: center !important;
}

.trust-strip .trust-copy h2 {
  margin: 0 auto 16px !important;
}

.trust-strip .trust-copy p {
  max-width: 780px !important;
  margin-inline: auto !important;
}

.results-medals {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 210px)) !important;
  justify-content: center !important;
  gap: 16px !important;
  width: min(920px, calc(100% - 32px)) !important;
  margin: clamp(28px, 4vw, 46px) auto 0 !important;
}

.results-medal {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  min-height: 168px !important;
  padding: 28px 20px !important;
  text-align: center !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 999px 999px 24px 24px !important;
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 222, 89, 0.24), transparent 42%),
    linear-gradient(145deg, rgba(12, 192, 223, 0.18), rgba(255, 255, 255, 0.065)) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 22px 48px rgba(0, 0, 0, 0.18) !important;
}

.results-medal::before {
  content: "" !important;
  position: absolute !important;
  top: 14px !important;
  width: 46px !important;
  height: 7px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #0cc0df, #ffde59) !important;
  opacity: 0.9 !important;
}

.results-medal strong {
  margin-top: 14px !important;
  color: var(--text) !important;
  font-family: var(--font-display) !important;
  font-size: clamp(2.45rem, 4vw, 3.55rem) !important;
  line-height: 0.9 !important;
}

.results-medal span {
  color: var(--muted) !important;
  font-size: 0.9rem !important;
  font-weight: 850 !important;
  line-height: 1.25 !important;
}

@media (max-width: 760px) {
  .known-from-strip {
    align-items: center !important;
    text-align: center !important;
  }

  .known-from-logos {
    justify-content: center !important;
  }

  .known-from-logos img {
    width: 72px !important;
    height: 38px !important;
  }

  .results-medals {
    grid-template-columns: 1fr !important;
    width: min(100%, 340px) !important;
  }

  .results-medal {
    min-height: 132px !important;
    border-radius: 28px !important;
  }
}

.site-header {
  isolation: isolate !important;
}

.site-header .menu-toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: column !important;
  gap: 4px !important;
  cursor: pointer !important;
  color: var(--text) !important;
  pointer-events: auto !important;
}

.site-header .menu-toggle span {
  display: block !important;
  inline-size: 20px !important;
  block-size: 2px !important;
  border-radius: 999px !important;
  background: currentColor !important;
  opacity: 1 !important;
  transform: none !important;
  transition: transform 0.18s ease, opacity 0.18s ease !important;
}

.site-header.menu-open .menu-toggle span:nth-child(1) {
  transform: translateY(6px) rotate(45deg) !important;
}

.site-header.menu-open .menu-toggle span:nth-child(2) {
  opacity: 0 !important;
}

.site-header.menu-open .menu-toggle span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg) !important;
}

.site-header .mobile-nav {
  display: none !important;
  grid-column: 1 / -1 !important;
  inline-size: 100% !important;
  margin-top: 10px !important;
  visibility: hidden !important;
  opacity: 0 !important;
  max-height: 0 !important;
  pointer-events: none !important;
}

.site-header.menu-open .mobile-nav {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  max-height: 440px !important;
  pointer-events: auto !important;
  transform: none !important;
}

.hero-visual,
.phone-glow,
.phone-shell,
.phone-shell::before,
.phone-shell::after {
  background-color: transparent !important;
}

.hero-visual {
  background: transparent !important;
  box-shadow: none !important;
}

.hero-visual::before,
.hero-visual::after,
.phone-glow {
  opacity: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

.phone-frame-custom {
  filter: drop-shadow(0 22px 42px rgba(0, 0, 0, 0.34)) !important;
}

.proof-grid {
  grid-template-columns: repeat(3, minmax(0, 148px)) !important;
  gap: 12px !important;
  margin-top: 20px !important;
}

.proof-grid > div {
  min-height: 92px !important;
  padding: 16px 18px !important;
  border-radius: 10px !important;
}

.proof-grid strong {
  font-size: clamp(1.8rem, 2.25vw, 2.35rem) !important;
  line-height: 0.95 !important;
}

.proof-grid span {
  font-size: 0.78rem !important;
}

.known-from-strip {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-top: 12px !important;
  color: var(--muted) !important;
  font-size: 0.67rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.known-from-logos {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.known-from-logos img {
  inline-size: 58px !important;
  block-size: 30px !important;
  object-fit: contain !important;
  border-radius: 8px !important;
  padding: 3px 5px !important;
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.14) !important;
}

.portrait-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
  scale: 1 !important;
}

@media (max-width: 700px) {
  .proof-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .proof-grid > div {
    min-height: 82px !important;
    padding: 13px 12px !important;
  }

  .proof-grid strong {
    font-size: clamp(1.45rem, 7vw, 1.9rem) !important;
  }

  .known-from-strip {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 7px !important;
  }

  .known-from-logos img {
    inline-size: 50px !important;
    block-size: 28px !important;
  }
}

.site-header {
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  align-items: center !important;
  column-gap: clamp(14px, 2vw, 24px) !important;
}

.site-header .brand,
.site-header .header-actions {
  align-self: center !important;
  transform: none !important;
}

.site-header .brand {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
}

.site-header .brand-logo-shell {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  width: clamp(188px, 18vw, 238px) !important;
  height: 46px !important;
  max-width: 100% !important;
  overflow: hidden !important;
  line-height: 0 !important;
}

.site-header .brand-wordmark {
  position: absolute !important;
  inset: 50% auto auto 50% !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 36px !important;
  object-fit: contain !important;
  transform: translate(-50%, -50%) !important;
}

.site-header .header-actions {
  justify-self: end !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
}

.site-header .header-actions > .button {
  display: none !important;
}

.site-header .menu-toggle {
  display: grid !important;
  align-self: center !important;
}

.site-header .mobile-nav {
  grid-column: 1 / -1 !important;
  align-self: stretch !important;
}

.services::before,
.services::after,
.service-grid::before,
.service-grid::after,
.service-card::before,
.service-card::after {
  animation: none !important;
}

.services::before,
.services::after,
.service-grid::before,
.service-grid::after {
  background: none !important;
  opacity: 0 !important;
}

.service-card::before,
.service-card::after {
  opacity: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

@media (max-width: 640px) {
  .site-header {
    grid-template-columns: minmax(0, 1fr) auto !important;
    column-gap: 10px !important;
    padding-block: 8px !important;
  }

  .site-header .brand-logo-shell {
    width: clamp(152px, 44vw, 190px) !important;
    height: 38px !important;
  }

  .site-header .brand-wordmark {
    max-height: 30px !important;
  }
}

.format-card,
.format-card:nth-child(even) {
  background:
    radial-gradient(circle at 22% 18%, rgba(12, 192, 223, 0.075), transparent 38%),
    radial-gradient(circle at 82% 78%, rgba(255, 222, 89, 0.055), transparent 42%),
    rgba(255, 255, 255, 0.035) !important;
}

body main .specializations .format-route .format-card > .format-media-video,
body main .specializations .format-route .format-card:nth-child(even) > .format-media-video,
body main .specializations .format-route .format-card > .format-media-video.format-media-landscape,
body main .specializations .format-route .format-card:nth-child(even) > .format-media-video.format-media-landscape {
  inline-size: 420px !important;
  block-size: 236px !important;
  width: 420px !important;
  height: 236px !important;
  min-width: 420px !important;
  max-width: 420px !important;
  min-height: 236px !important;
  max-height: 236px !important;
  aspect-ratio: 16 / 9 !important;
}

body main .specializations .format-route .format-card > .format-media-video video,
body main .specializations .format-route .format-card:nth-child(even) > .format-media-video video,
body main .specializations .format-route .format-card > .format-media-video.format-media-landscape video,
body main .specializations .format-route .format-card:nth-child(even) > .format-media-video.format-media-landscape video {
  inline-size: 100% !important;
  block-size: 100% !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
}

body main .specializations .format-route .format-card .format-media-reels.format-media-reels-single {
  inline-size: 420px !important;
  block-size: 520px !important;
  width: 420px !important;
  height: 520px !important;
  min-height: 520px !important;
  display: grid !important;
  place-items: center !important;
  justify-self: end !important;
}

body main .specializations .format-route .format-card .format-media-reels.format-media-reels-single > .reels-video-slot {
  inline-size: 280px !important;
  block-size: 498px !important;
  width: 280px !important;
  height: 498px !important;
  min-width: 280px !important;
  max-width: 280px !important;
  min-height: 498px !important;
  max-height: 498px !important;
  aspect-ratio: 9 / 16 !important;
  transform: none !important;
  justify-self: center !important;
  align-self: center !important;
}

body main .specializations .format-route .format-card .format-media-reels.format-media-reels-single > .reels-video-slot video {
  inline-size: 100% !important;
  block-size: 100% !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
}

@media (max-width: 960px) {
  body main .specializations .format-route .format-card > .format-media-video,
  body main .specializations .format-route .format-card:nth-child(even) > .format-media-video,
  body main .specializations .format-route .format-card > .format-media-video.format-media-landscape,
  body main .specializations .format-route .format-card:nth-child(even) > .format-media-video.format-media-landscape {
    inline-size: min(100%, 420px) !important;
    block-size: auto !important;
    width: min(100%, 420px) !important;
    height: auto !important;
    min-width: 0 !important;
    max-width: 420px !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 16 / 9 !important;
  }

  body main .specializations .format-route .format-card .format-media-reels.format-media-reels-single {
    inline-size: min(100%, 420px) !important;
    block-size: calc(min(260px, 72vw) * 1.78) !important;
    width: min(100%, 420px) !important;
    height: calc(min(260px, 72vw) * 1.78) !important;
    min-height: 0 !important;
    justify-self: center !important;
  }

  body main .specializations .format-route .format-card .format-media-reels.format-media-reels-single > .reels-video-slot {
    inline-size: min(260px, 72vw) !important;
    block-size: auto !important;
    width: min(260px, 72vw) !important;
    height: auto !important;
    min-width: 0 !important;
    max-width: min(260px, 72vw) !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 9 / 16 !important;
  }
}

.site-header .brand,
.site-header .desktop-nav,
.site-header .header-actions {
  align-self: center !important;
  align-items: center !important;
}

.site-header .brand {
  display: inline-flex !important;
  line-height: 1 !important;
}

.site-header .brand-logo-shell {
  display: grid !important;
  align-items: center !important;
  justify-items: center !important;
  align-self: center !important;
  line-height: 1 !important;
}

.hero {
  background: transparent !important;
  overflow: visible !important;
}

.hero::before,
.hero::after {
  background: none !important;
  box-shadow: none !important;
  opacity: 0 !important;
}

.testimonials.section-pad {
  padding-top: clamp(76px, 8vw, 124px) !important;
}

.launch-game {
  margin-bottom: clamp(34px, 4vw, 58px) !important;
}

.mission-control {
  margin-bottom: clamp(44px, 5vw, 70px) !important;
}

.faq.faq-inline {
  margin-top: clamp(44px, 5vw, 72px) !important;
  margin-bottom: clamp(44px, 5vw, 70px) !important;
}

.cta-intro.form-intro {
  margin-top: clamp(44px, 5vw, 72px) !important;
}

@media (max-width: 960px) {
  .site-header {
    align-items: center !important;
    min-height: 0 !important;
    padding-block: 8px !important;
  }

  .site-header .brand,
  .site-header .header-actions,
  .site-header .lang-toggle,
  .site-header .theme-toggle,
  .site-header .menu-toggle {
    align-self: center !important;
  }

  .site-header .brand,
  .site-header .header-actions {
    transform: translateY(-3px) !important;
  }

  .site-header .brand-logo-shell {
    height: 42px !important;
  }

  .mobile-nav {
    align-self: stretch !important;
  }

  .testimonials.section-pad {
    padding-top: clamp(56px, 14vw, 82px) !important;
  }

  .launch-game,
  .mission-control,
  .faq.faq-inline,
  .cta-intro.form-intro {
    margin-top: clamp(28px, 8vw, 42px) !important;
    margin-bottom: clamp(28px, 8vw, 42px) !important;
  }
}

main {
  display: flex !important;
  flex-direction: column !important;
}

.hero {
  order: 1 !important;
}

.services {
  order: 2 !important;
}

.trust-strip {
  order: 3 !important;
}

.testimonials {
  order: 4 !important;
}

.process {
  order: 5 !important;
}

.about {
  order: 6 !important;
}

.cta {
  order: 7 !important;
}

.site-header,
:root[data-theme="dark"] .site-header,
:root:not([data-theme]) .site-header {
  background:
    linear-gradient(135deg, rgba(12, 192, 223, 0.08), rgba(255, 222, 89, 0.045)),
    rgba(4, 20, 20, 0.72) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.18) !important;
  backdrop-filter: blur(20px) saturate(128%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(128%) !important;
}

:root[data-theme="light"] .site-header {
  background:
    linear-gradient(135deg, rgba(12, 192, 223, 0.11), rgba(255, 222, 89, 0.055)),
    rgba(248, 253, 253, 0.82) !important;
  border-color: rgba(4, 20, 20, 0.13) !important;
}

.site-header .mobile-nav {
  display: none !important;
  grid-column: 1 / -1 !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
  inline-size: 100% !important;
  margin-top: 10px !important;
  visibility: hidden !important;
  opacity: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

.site-header.menu-open .mobile-nav {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  max-height: 520px !important;
  overflow: visible !important;
  pointer-events: auto !important;
}

.site-header .mobile-nav a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 44px !important;
}

.known-from-strip {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin-top: clamp(16px, 2.4vw, 26px) !important;
  color: var(--muted) !important;
  font-size: 0.72rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

.known-from-logos {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

.known-from-logos img {
  inline-size: 82px !important;
  block-size: 42px !important;
  object-fit: contain !important;
  border-radius: 12px !important;
  padding: 6px 10px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.17) !important;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease !important;
}

.known-from-logos img:hover {
  transform: translateY(-4px) scale(1.04) !important;
  border-color: rgba(12, 192, 223, 0.55) !important;
  box-shadow: 0 18px 36px rgba(12, 192, 223, 0.17) !important;
}

.trust-strip {
  padding-top: clamp(54px, 7vw, 96px) !important;
  padding-bottom: clamp(30px, 4.5vw, 58px) !important;
}

.trust-strip .trust-copy {
  max-width: 980px !important;
  margin-inline: auto !important;
  text-align: center !important;
}

.trust-strip .trust-copy h2 {
  margin: 0 auto clamp(12px, 1.8vw, 20px) !important;
  text-align: center !important;
}

.trust-strip .trust-copy p {
  max-width: 760px !important;
  margin-inline: auto !important;
  text-align: center !important;
}

.results-medals {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(12px, 2vw, 20px) !important;
  max-width: 860px !important;
  margin: clamp(24px, 3vw, 38px) auto 0 !important;
}

.results-medal {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  min-height: 132px !important;
  padding: 22px 18px !important;
  overflow: hidden !important;
  text-align: center !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 999px 999px 28px 28px !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 222, 89, 0.24), transparent 46%),
    linear-gradient(135deg, rgba(12, 192, 223, 0.16), rgba(255, 255, 255, 0.05), rgba(255, 222, 89, 0.11)) !important;
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.18) !important;
}

.results-medal strong {
  display: block !important;
  color: var(--text) !important;
  font-size: clamp(2rem, 4vw, 3.15rem) !important;
  line-height: 0.9 !important;
}

.results-medal span {
  display: block !important;
  max-width: 190px !important;
  color: var(--muted) !important;
  font-size: 0.82rem !important;
  font-weight: 850 !important;
  line-height: 1.18 !important;
}

.testimonials > .section-heading,
.reference-chips {
  display: none !important;
}

.testimonials.section-pad {
  padding-top: clamp(22px, 3vw, 46px) !important;
}

@media (max-width: 760px) {
  .known-from-strip {
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    gap: 10px !important;
    text-align: center !important;
  }

  .known-from-logos {
    justify-content: center !important;
  }

  .known-from-logos img {
    inline-size: 74px !important;
    block-size: 38px !important;
  }

  .results-medals {
    grid-template-columns: 1fr !important;
    max-width: 330px !important;
  }

  .results-medal {
    min-height: 116px !important;
    padding: 18px 16px !important;
  }
}

.site-header,
:root[data-theme="dark"] .site-header,
:root:not([data-theme]) .site-header {
  position: sticky !important;
  top: clamp(10px, 1.2vw, 18px) !important;
  z-index: 1000 !important;
  max-width: min(1180px, calc(100% - 40px)) !important;
  margin-inline: auto !important;
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  align-items: center !important;
  gap: clamp(14px, 2.2vw, 28px) !important;
  background:
    linear-gradient(135deg, rgba(12, 192, 223, 0.08), rgba(255, 222, 89, 0.045)),
    rgba(4, 27, 26, 0.58) !important;
}

:root[data-theme="light"] .site-header {
  background:
    linear-gradient(135deg, rgba(12, 192, 223, 0.1), rgba(255, 222, 89, 0.05)),
    rgba(246, 253, 253, 0.78) !important;
}

.site-header .brand,
.site-header .header-actions {
  transform: none !important;
}

.site-header .brand,
.site-header .brand-logo-shell,
.site-header .header-actions,
.site-header .lang-toggle,
.site-header .theme-toggle,
.site-header .menu-toggle {
  align-self: center !important;
}

.site-header .mobile-nav {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  width: 100% !important;
  margin-top: 0 !important;
  padding: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  border: 0 !important;
  background: transparent !important;
  transition: max-height 0.25s ease, opacity 0.2s ease, padding 0.2s ease, margin-top 0.2s ease !important;
}

.site-header.menu-open .mobile-nav {
  max-height: 420px !important;
  margin-top: 14px !important;
  padding: 12px !important;
  overflow: visible !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 15% 0%, rgba(12, 192, 223, 0.12), transparent 38%),
    radial-gradient(circle at 88% 100%, rgba(255, 222, 89, 0.11), transparent 42%),
    rgba(4, 21, 21, 0.76) !important;
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.26) !important;
}

:root[data-theme="light"] .site-header.menu-open .mobile-nav {
  background:
    radial-gradient(circle at 15% 0%, rgba(12, 192, 223, 0.13), transparent 38%),
    radial-gradient(circle at 88% 100%, rgba(255, 222, 89, 0.13), transparent 42%),
    rgba(246, 253, 253, 0.88) !important;
  border-color: rgba(4, 20, 20, 0.14) !important;
}

.site-header .mobile-nav a {
  min-height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.055) !important;
  color: var(--text) !important;
  font-size: 0.88rem !important;
  font-weight: 900 !important;
  text-align: center !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

:root[data-theme="light"] .site-header .mobile-nav a {
  background: rgba(4, 20, 20, 0.045) !important;
  border-color: rgba(4, 20, 20, 0.1) !important;
}

.site-header .mobile-nav a[href="#strategie"] {
  color: #041414 !important;
  border-color: rgba(255, 222, 89, 0.35) !important;
  background: linear-gradient(110deg, #0cc0df, #75dc9a 58%, #ffde59) !important;
  box-shadow: 0 14px 28px rgba(12, 192, 223, 0.18) !important;
}

.hero {
  max-width: min(1180px, calc(100% - 40px)) !important;
  margin-inline: auto !important;
}

.known-from-strip-mobile {
  display: none !important;
}

.known-from-strip-desktop {
  display: flex !important;
}

.trust-strip {
  display: flex !important;
  flex-direction: column !important;
}

.trust-strip .trust-copy {
  order: 1 !important;
}

.results-medals {
  order: 2 !important;
  grid-template-columns: repeat(3, minmax(142px, 168px)) !important;
  justify-content: center !important;
  align-items: start !important;
  gap: clamp(14px, 2.2vw, 24px) !important;
  max-width: 680px !important;
  margin-top: clamp(22px, 2.5vw, 34px) !important;
}

.logo-marquee {
  order: 3 !important;
}

.trust-strip .trust-copy p {
  max-width: 760px !important;
  color: var(--muted) !important;
  font-size: clamp(0.98rem, 1.18vw, 1.12rem) !important;
  font-weight: 650 !important;
  line-height: 1.65 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.results-medal {
  width: clamp(136px, 12vw, 166px) !important;
  min-height: clamp(136px, 12vw, 166px) !important;
  aspect-ratio: 1 !important;
  margin-inline: auto !important;
  padding: 22px 14px !important;
  overflow: visible !important;
  border-radius: 50% !important;
  border: 2px solid rgba(255, 222, 89, 0.58) !important;
  background:
    radial-gradient(circle at 34% 22%, rgba(255, 255, 255, 0.22), transparent 18%),
    radial-gradient(circle at 50% 72%, rgba(12, 192, 223, 0.18), transparent 42%),
    conic-gradient(from 218deg, rgba(12, 192, 223, 0.5), rgba(117, 220, 154, 0.36), rgba(255, 222, 89, 0.52), rgba(12, 192, 223, 0.5)),
    rgba(8, 35, 34, 0.74) !important;
  box-shadow:
    inset 0 0 0 8px rgba(0, 0, 0, 0.18),
    inset 0 1px 16px rgba(255, 255, 255, 0.08),
    0 24px 50px rgba(0, 0, 0, 0.24) !important;
  transform: translateZ(0) !important;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease !important;
}

.results-medal::before,
.results-medal::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  z-index: -1 !important;
  display: block !important;
}

.results-medal::before {
  inset: 10px !important;
  left: 10px !important;
  border-radius: inherit !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  z-index: 0 !important;
}

.results-medal::after {
  bottom: -18px !important;
  width: 42px !important;
  height: 34px !important;
  transform: translateX(-50%) !important;
  clip-path: polygon(0 0, 100% 0, 78% 100%, 50% 74%, 22% 100%) !important;
  background: linear-gradient(135deg, rgba(12, 192, 223, 0.8), rgba(255, 222, 89, 0.82)) !important;
  opacity: 0.42 !important;
}

.results-medal:hover {
  transform: translateY(-5px) scale(1.025) !important;
  border-color: rgba(12, 192, 223, 0.72) !important;
  box-shadow:
    inset 0 0 0 8px rgba(0, 0, 0, 0.18),
    0 26px 56px rgba(12, 192, 223, 0.18) !important;
}

.results-medal strong,
.results-medal span {
  position: relative !important;
  z-index: 1 !important;
}

.results-medal strong {
  font-size: clamp(1.7rem, 3vw, 2.2rem) !important;
  line-height: 0.95 !important;
}

.results-medal span {
  max-width: 118px !important;
  margin-top: 8px !important;
  font-size: 0.72rem !important;
  line-height: 1.15 !important;
}

.launch-game,
.mission-control,
.faq.faq-inline,
.cta-intro.form-intro {
  margin-top: clamp(26px, 3.6vw, 46px) !important;
  margin-bottom: clamp(24px, 3.4vw, 42px) !important;
}

@media (max-width: 920px) {
  .site-header {
    max-width: min(100% - 24px, 760px) !important;
    grid-template-columns: 1fr auto !important;
    gap: 10px !important;
  }

  .site-header .header-actions {
    gap: 8px !important;
  }

  .site-header .header-actions > .button {
    display: none !important;
  }

  .site-header.menu-open .mobile-nav {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 760px) {
  .hero {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .known-from-strip-desktop {
    display: none !important;
  }

  .known-from-strip-mobile {
    display: flex !important;
    grid-column: 1 / -1 !important;
    order: 3 !important;
    margin-top: 18px !important;
    margin-bottom: 0 !important;
  }

  .hero-copy {
    order: 1 !important;
  }

  .hero-visual {
    order: 2 !important;
  }

  .results-medals {
    grid-template-columns: 1fr !important;
    max-width: 260px !important;
    gap: 30px !important;
  }

  .results-medal {
    width: 152px !important;
    min-height: 152px !important;
  }
}

html,
body,
.page-shell {
  overflow-x: hidden !important;
}

.section-pad,
.trust-strip,
.services,
.testimonials,
.process,
.about,
.cta,
.faq,
.specializations,
.logo-marquee,
.logo-row,
.testimonial-grid,
.launch-game,
.mission-control {
  border-top: 0 !important;
  border-bottom: 0 !important;
}

.site-header .mobile-nav a[href="#strategie"] {
  border-left: 0 !important;
  text-decoration: none !important;
  background:
    linear-gradient(110deg, #0cc0df, #75dc9a 58%, #ffde59) !important;
  background-size: 100% 100% !important;
}

.trust-strip {
  padding-top: clamp(70px, 7.5vw, 112px) !important;
  padding-bottom: clamp(24px, 3.5vw, 48px) !important;
  row-gap: 0 !important;
}

.trust-strip .trust-copy {
  margin-bottom: clamp(18px, 2.2vw, 28px) !important;
}

.trust-strip .trust-copy h2 {
  visibility: visible !important;
  opacity: 1 !important;
  display: block !important;
  margin-inline: auto !important;
}

.trust-strip .trust-copy p {
  max-width: 760px !important;
  margin-inline: auto !important;
  color: var(--muted) !important;
  font-size: clamp(0.98rem, 1.05vw, 1.1rem) !important;
  font-weight: 500 !important;
  line-height: 1.55 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.results-medals {
  position: relative !important;
  z-index: 3 !important;
  max-width: 480px !important;
  grid-template-columns: repeat(3, minmax(96px, 122px)) !important;
  gap: clamp(12px, 1.5vw, 18px) !important;
  margin: clamp(16px, 2vw, 24px) auto clamp(28px, 4vw, 48px) !important;
  padding: 0 !important;
}

.results-medal {
  width: clamp(96px, 8vw, 118px) !important;
  min-height: clamp(96px, 8vw, 118px) !important;
  aspect-ratio: 1 !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  border: 1px solid rgba(117, 220, 154, 0.48) !important;
  padding: 14px 10px !important;
  background:
    radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.18), transparent 22%),
    radial-gradient(circle at 62% 78%, rgba(12, 192, 223, 0.16), transparent 42%),
    linear-gradient(145deg, rgba(12, 192, 223, 0.26), rgba(117, 220, 154, 0.2) 54%, rgba(255, 222, 89, 0.18)),
    rgba(9, 31, 30, 0.72) !important;
  box-shadow:
    inset 0 1px 16px rgba(255, 255, 255, 0.08),
    0 18px 34px rgba(0, 0, 0, 0.18) !important;
}

.results-medal::before,
.results-medal::after {
  content: none !important;
  display: none !important;
}

.results-medal strong {
  font-size: clamp(1.18rem, 1.9vw, 1.58rem) !important;
  line-height: 0.95 !important;
}

.results-medal span {
  max-width: 86px !important;
  margin-top: 6px !important;
  color: rgba(235, 244, 242, 0.68) !important;
  font-size: clamp(0.56rem, 0.72vw, 0.65rem) !important;
  font-weight: 700 !important;
  line-height: 1.12 !important;
  text-transform: none !important;
}

.logo-marquee {
  position: relative !important;
  z-index: 1 !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.testimonials.section-pad {
  margin-top: 0 !important;
  padding-top: clamp(14px, 2.4vw, 30px) !important;
}

@media (max-width: 760px) {
  .hero {
    width: 100% !important;
    max-width: 100% !important;
    padding-inline: 18px !important;
    margin-inline: auto !important;
    overflow: hidden !important;
  }

  .hero-copy {
    width: 100% !important;
    max-width: 350px !important;
    margin-inline: auto !important;
    align-items: center !important;
    text-align: center !important;
  }

  .hero-title {
    width: 100% !important;
    max-width: 330px !important;
    margin-inline: auto !important;
    text-align: center !important;
    font-size: clamp(2.55rem, 11vw, 3.15rem) !important;
    line-height: 1.04 !important;
  }

  .hero-title > span:first-child,
  .hero-title .word-rotator,
  .word-rotator span {
    text-align: center !important;
  }

  .hero-title .word-rotator {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .word-rotator span {
    left: 0 !important;
    right: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
  }

  .hero-copy p,
  .hero-actions,
  .known-from-strip-mobile {
    width: 100% !important;
    max-width: 330px !important;
    margin-inline: auto !important;
  }

  .hero-copy p {
    text-align: left !important;
  }

  .hero-visual {
    width: 100% !important;
    justify-self: center !important;
    margin-inline: auto !important;
  }

  .phone-shell {
    margin-inline: auto !important;
  }

  .results-medals {
    grid-template-columns: repeat(3, minmax(78px, 92px)) !important;
    max-width: 302px !important;
    gap: 10px !important;
    margin-bottom: 30px !important;
  }

  .results-medal {
    width: clamp(78px, 25vw, 92px) !important;
    min-height: clamp(78px, 25vw, 92px) !important;
    padding: 10px 7px !important;
  }

  .results-medal strong {
    font-size: clamp(1rem, 5.2vw, 1.22rem) !important;
  }

  .results-medal span {
    max-width: 70px !important;
    font-size: 0.52rem !important;
  }
}

.phone-shell {
  background: transparent !important;
}

.phone-screen,
.phone-screen .video-placeholder,
.phone-screen video,
.hero-preview-video,
.hero-video {
  background: #000 !important;
}

.phone-screen video {
  display: block !important;
}

.hero-visual > .results-medals {
  position: absolute !important;
  inset: 0 !important;
  z-index: 8 !important;
  display: block !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
}

.hero-visual > .results-medals .results-medal {
  position: absolute !important;
  width: clamp(118px, 9.2vw, 150px) !important;
  min-height: auto !important;
  aspect-ratio: auto !important;
  border-radius: 10px !important;
  padding: 11px 14px 12px !important;
  border: 1px solid rgba(198, 238, 108, 0.58) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.04) 42%, transparent 43%),
    radial-gradient(circle at 82% 15%, rgba(255, 222, 89, 0.2), transparent 36%),
    linear-gradient(140deg, rgba(12, 192, 223, 0.24), rgba(117, 220, 154, 0.2) 58%, rgba(255, 222, 89, 0.18)),
    rgba(15, 31, 22, 0.78) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 14px 34px rgba(0, 0, 0, 0.28),
    0 0 26px rgba(198, 238, 108, 0.14) !important;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease !important;
}

.hero-visual > .results-medals .results-medal:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(255, 222, 89, 0.85) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 18px 38px rgba(0, 0, 0, 0.3),
    0 0 30px rgba(198, 238, 108, 0.2) !important;
}

.hero-visual > .results-medals .results-medal:nth-child(1) {
  left: clamp(-72px, -5.3vw, -36px) !important;
  top: 38% !important;
}

.hero-visual > .results-medals .results-medal:nth-child(2) {
  right: clamp(-78px, -5.2vw, -40px) !important;
  top: 20% !important;
}

.hero-visual > .results-medals .results-medal:nth-child(3) {
  right: clamp(-82px, -5.5vw, -42px) !important;
  bottom: 23% !important;
}

.hero-visual > .results-medals .results-medal strong {
  color: #fff !important;
  font-size: clamp(1rem, 1.24vw, 1.16rem) !important;
  line-height: 1 !important;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.3) !important;
}

.hero-visual > .results-medals .results-medal span {
  max-width: none !important;
  margin-top: 5px !important;
  color: #dfff72 !important;
  font-size: clamp(0.58rem, 0.68vw, 0.68rem) !important;
  font-weight: 900 !important;
  line-height: 1.14 !important;
  text-transform: none !important;
}

.trust-strip {
  padding-top: clamp(42px, 5.2vw, 74px) !important;
  padding-bottom: clamp(14px, 2vw, 28px) !important;
}

.trust-strip .trust-copy {
  margin-bottom: clamp(8px, 1.1vw, 14px) !important;
}

.trust-strip .trust-copy h2 {
  color: var(--text) !important;
}

.trust-strip .trust-copy h2 .heading-accent {
  color: inherit !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
}

.about-panel h2 {
  text-align: center !important;
}

.portrait-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: scale(0.78) !important;
  scale: 1 !important;
}

.site-header,
:root[data-theme="dark"] .site-header,
:root:not([data-theme]) .site-header {
  background:
    linear-gradient(135deg, rgba(3, 13, 12, 0.84), rgba(6, 28, 26, 0.58)),
    rgba(2, 8, 7, 0.74) !important;
}

@media (max-width: 980px) {
  .hero-visual > .results-medals .results-medal:nth-child(1) {
    left: -20px !important;
    top: 39% !important;
  }

  .hero-visual > .results-medals .results-medal:nth-child(2) {
    right: -24px !important;
    top: 19% !important;
  }

  .hero-visual > .results-medals .results-medal:nth-child(3) {
    right: -26px !important;
    bottom: 21% !important;
  }
}

@media (max-width: 760px) {
  .hero-visual > .results-medals {
    position: relative !important;
    inset: auto !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: min(100%, 300px) !important;
    max-width: 300px !important;
    margin: 14px auto 0 !important;
  }

  .hero-visual > .results-medals .results-medal,
  .hero-visual > .results-medals .results-medal:nth-child(1),
  .hero-visual > .results-medals .results-medal:nth-child(2),
  .hero-visual > .results-medals .results-medal:nth-child(3) {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    border-radius: 12px !important;
    padding: 10px 14px !important;
  }

  .hero-visual > .results-medals .results-medal strong {
    font-size: 1rem !important;
  }

  .hero-visual > .results-medals .results-medal span {
    font-size: 0.66rem !important;
  }

  .trust-strip {
    padding-top: 34px !important;
  }
}


/* ---- from: z-release-final.css ---- */

:root {
  --header-surface: linear-gradient(135deg, rgba(7, 31, 28, 0.78), rgba(4, 16, 15, 0.64));
}

:root:not([data-theme="light"]),
:root[data-theme="dark"] {
  color-scheme: dark;
}

.site-header,
:root[data-theme="dark"] .site-header,
:root:not([data-theme="light"]) .site-header {
  position: sticky !important;
  top: max(14px, env(safe-area-inset-top)) !important;
  z-index: 1000 !important;
  width: min(100% - 32px, 1160px) !important;
  min-height: 72px !important;
  margin: max(14px, env(safe-area-inset-top)) auto 0 !important;
  padding: 12px 18px !important;
  display: grid !important;
  grid-template-columns: minmax(190px, 1fr) auto !important;
  align-items: center !important;
  gap: 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 8px !important;
  background:
    radial-gradient(circle at 18% 22%, rgba(12, 192, 223, 0.18), transparent 44%),
    radial-gradient(circle at 88% 18%, rgba(255, 222, 89, 0.12), transparent 40%),
    linear-gradient(135deg, rgba(8, 52, 48, 0.74), rgba(7, 34, 31, 0.66)) !important;
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.18) !important;
  backdrop-filter: blur(18px) saturate(135%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(135%) !important;
}

.site-header .brand-wordmark {
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  object-fit: contain !important;
  object-position: left center !important;
  transform: translateY(-50%) !important;
  background: transparent !important;
}

.site-header .mobile-nav {
  position: absolute !important;
  top: calc(100% + 10px) !important;
  right: 0 !important;
  left: auto !important;
  z-index: 1001 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(170px, 1fr)) !important;
  width: min(520px, calc(100vw - 32px)) !important;
  gap: 8px !important;
  padding: 10px !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(-8px) !important;
  border: 1px solid rgba(255, 255, 255, 0.13) !important;
  border-radius: 8px !important;
  background:
    radial-gradient(circle at 18% 14%, rgba(12, 192, 223, 0.18), transparent 44%),
    radial-gradient(circle at 92% 18%, rgba(255, 222, 89, 0.11), transparent 38%),
    linear-gradient(145deg, rgba(9, 54, 50, 0.95), rgba(7, 28, 27, 0.92)) !important;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28) !important;
  backdrop-filter: blur(18px) saturate(130%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(130%) !important;
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease !important;
  max-height: none !important;
  overflow: visible !important;
}

.site-header .mobile-nav a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 44px !important;
  padding: 10px 12px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.13) !important;
  background: rgba(255, 255, 255, 0.045) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  text-align: center !important;
  line-height: 1.1 !important;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease !important;
}

:root[data-theme="light"] .site-header .mobile-nav a {
  border-color: rgba(3, 21, 22, 0.12) !important;
  background: rgba(255, 255, 255, 0.74) !important;
  color: rgba(3, 21, 22, 0.88) !important;
}

:root[data-theme="light"] .known-from-strip .hero-metrics strong,
:root[data-theme="light"] .known-from-strip .hero-metrics span {
  color: #071312 !important;
  -webkit-text-fill-color: #071312 !important;
}

.trust-strip .trust-copy h2,
.trust-copy.section-heading h2 {
  text-align: center !important;
  overflow: visible !important;
  text-wrap: balance !important;
}

@media (max-width: 980px) {
  .site-header,
  :root[data-theme="dark"] .site-header,
  :root:not([data-theme="light"]) .site-header,
  :root[data-theme="light"] .site-header {
    width: calc(100vw - 24px) !important;
    min-height: 66px !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    padding: 10px 12px !important;
    gap: 8px !important;
  }

  .site-header .brand {
    height: 42px !important;
    min-height: 42px !important;
  }

  .site-header .brand-logo-shell {
    width: clamp(136px, 42vw, 172px) !important;
    height: 34px !important;
    min-height: 34px !important;
  }

  .site-header .header-actions {
    gap: 7px !important;
  }

  .site-header .lang-toggle,
  .site-header .theme-toggle,
  .site-header .menu-toggle {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
  }

  .site-header .mobile-nav {
    left: 0 !important;
    right: 0 !important;
    width: min(100%, calc(100vw - 24px)) !important;
    grid-template-columns: 1fr !important;
    margin-inline: auto !important;
  }

  .hero .known-from-strip.known-from-strip-desktop {
    display: flex !important;
    width: min(100%, 326px) !important;
    margin: 12px auto 0 !important;
  }

  .hero .known-from-strip.known-from-strip-desktop > span {
    display: none !important;
  }

  .known-from-strip .known-from-logos,
  .known-from-strip .hero-metrics {
    width: min(100%, 322px) !important;
  }

  .known-from-strip .known-from-logos {
    grid-template-columns: repeat(3, minmax(86px, 1fr)) !important;
  }

  .known-from-strip .hero-metrics {
    grid-template-columns: repeat(3, minmax(92px, 1fr)) !important;
    gap: 6px !important;
  }

  .known-from-strip .hero-metrics article {
    min-width: 92px !important;
    min-height: 54px !important;
    padding: 7px 5px !important;
  }

  .known-from-strip .hero-metrics strong {
    font-size: clamp(0.86rem, 3.8vw, 0.98rem) !important;
  }

  .known-from-strip .hero-metrics span {
    font-size: clamp(0.48rem, 1.9vw, 0.53rem) !important;
    letter-spacing: 0.03em !important;
  }

  .mini-game-heading,
  .launch-game,
  .mission-control,
  .faq,
  .faq .section-heading,
  .faq-list,
  .faq-item,
  .contact-section,
  .contact-section .section-heading,
  .contact-form,
  .site-footer,
  footer.site-footer {
    width: min(100%, 720px) !important;
    max-width: calc(100vw - 32px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    transform: none !important;
    justify-self: center !important;
  }

  .trust-strip .trust-copy,
  .trust-copy.section-heading {
    max-width: calc(100vw - 32px) !important;
    margin-inline: auto !important;
    padding-inline: 10px !important;
    text-align: center !important;
  }

  .trust-strip .trust-copy h2,
  .trust-copy.section-heading h2 {
    font-size: clamp(2rem, 8.8vw, 3.2rem) !important;
    line-height: 1 !important;
    padding-inline: 6px !important;
  }
}

.site-header,
:root[data-theme="dark"] .site-header,
:root:not([data-theme="light"]) .site-header {
  align-items: center !important;
  background:
    radial-gradient(circle at 14% 12%, rgba(12, 192, 223, 0.12), transparent 42%),
    radial-gradient(circle at 86% 18%, rgba(255, 222, 89, 0.1), transparent 44%),
    rgba(4, 22, 21, 0.78) !important;
}

:root[data-theme="light"] .site-header {
  background:
    radial-gradient(circle at 14% 12%, rgba(12, 192, 223, 0.13), transparent 42%),
    radial-gradient(circle at 86% 18%, rgba(255, 222, 89, 0.13), transparent 44%),
    rgba(247, 252, 250, 0.92) !important;
}

.hero {
  position: relative !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 76% 43%, rgba(12, 192, 223, 0.3), transparent 36%),
    radial-gradient(circle at 86% 61%, rgba(105, 213, 164, 0.23), transparent 50%),
    radial-gradient(circle at 96% 71%, rgba(255, 222, 89, 0.18), transparent 65%),
    radial-gradient(circle at 30% 80%, rgba(12, 192, 223, 0.12), transparent 44%),
    var(--bg) !important;
  box-shadow: 0 0 0 100vmax var(--bg) !important;
  clip-path: inset(0 -100vmax) !important;
}

:root[data-theme="light"] .hero {
  background:
    radial-gradient(circle at 76% 43%, rgba(12, 192, 223, 0.23), transparent 37%),
    radial-gradient(circle at 86% 61%, rgba(105, 213, 164, 0.18), transparent 51%),
    radial-gradient(circle at 96% 71%, rgba(255, 222, 89, 0.14), transparent 66%),
    radial-gradient(circle at 30% 80%, rgba(12, 192, 223, 0.1), transparent 45%),
    var(--bg) !important;
}

.service-card:hover .service-stage,
.service-card:focus-within .service-stage,
#videoproduktion:hover .service-stage,
#videoproduktion:focus-within .service-stage {
  border-color: rgba(255, 222, 89, 0.6) !important;
}

.site-header,
:root:not([data-theme="light"]) .site-header,
:root[data-theme="dark"] .site-header {
  background:
    radial-gradient(circle at 16% 42%, rgba(12, 192, 223, 0.10), transparent 36%),
    radial-gradient(circle at 86% 48%, rgba(255, 222, 89, 0.08), transparent 40%),
    rgba(5, 16, 15, 0.78) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
}

:root[data-theme="light"] .site-header {
  background:
    radial-gradient(circle at 16% 42%, rgba(12, 192, 223, 0.12), transparent 36%),
    radial-gradient(circle at 86% 48%, rgba(255, 222, 89, 0.13), transparent 40%),
    rgba(255, 255, 255, 0.74) !important;
  border-color: rgba(9, 30, 28, 0.12) !important;
}

.site-header .brand {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  height: 44px !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  overflow: visible !important;
}

.site-header .brand-logo-shell {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: clamp(170px, 12.6vw, 214px) !important;
  height: 42px !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

.site-header .brand-wordmark {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: left center !important;
  background: transparent !important;
  transform: none !important;
}

.hero {
  position: relative !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 79% 48%, rgba(12, 192, 223, 0.32), transparent 35%),
    radial-gradient(circle at 67% 63%, rgba(126, 227, 142, 0.18), transparent 34%),
    radial-gradient(circle at 74% 61%, rgba(255, 222, 89, 0.17), transparent 40%),
    radial-gradient(circle at 22% 76%, rgba(12, 192, 223, 0.13), transparent 38%),
    var(--bg) !important;
}

.hero::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: -20% -28% -14% -18% !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 82% 45%, rgba(12, 192, 223, 0.26), transparent 32%),
    radial-gradient(circle at 72% 59%, rgba(255, 222, 89, 0.18), transparent 38%),
    linear-gradient(90deg, transparent 0%, rgba(12, 192, 223, 0.08) 48%, rgba(255, 222, 89, 0.05) 74%, transparent 100%) !important;
  filter: blur(16px) !important;
  opacity: 0.96 !important;
}

.hero-visual::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: -22% -26% -18% -26% !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 50% 47%, rgba(12, 192, 223, 0.34), transparent 40%),
    radial-gradient(circle at 60% 63%, rgba(255, 222, 89, 0.17), transparent 42%),
    radial-gradient(circle at 42% 35%, rgba(126, 227, 142, 0.16), transparent 36%) !important;
  filter: blur(18px) !important;
  opacity: 0.98 !important;
}

.hero-visual::after,
.phone-shell::before,
.phone-shell::after,
.phone-frame-custom::before,
.phone-frame-custom::after {
  content: none !important;
  display: none !important;
}

.phone-shell,
.phone-frame-custom {
  position: relative !important;
  z-index: 1 !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

.hero-copy .proof-grid,
.proof-grid,
.known-from-strip.known-from-strip-mobile,
.hero .known-from-strip-mobile,
.hero-visual > .known-from-strip,
.hero-visual > .results-medals,
.trust-strip .results-medals {
  display: none !important;
}

.known-from-strip > span,
.known-from-strip.known-from-strip-desktop > span,
.hero .known-from-strip.known-from-strip-desktop > span {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

.hero-copy .known-from-strip.known-from-strip-desktop,
.hero .known-from-strip.known-from-strip-desktop {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  width: 338px !important;
  max-width: 100% !important;
  gap: 7px !important;
  margin: 12px 0 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.known-from-strip .known-from-logos,
.known-from-strip .hero-metrics {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  gap: 7px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.known-from-strip .known-from-logos img {
  object-fit: contain !important;
  padding: 6px 8px !important;
  background: #fff !important;
}

.known-from-strip .hero-metrics article {
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
  gap: 2px !important;
  padding: 5px 3px !important;
  overflow: visible !important;
  border: 1px solid rgba(12, 192, 223, 0.42) !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.10), rgba(255, 222, 89, 0.08)),
    rgba(11, 45, 41, 0.62) !important;
}

.known-from-strip .hero-metrics strong,
.known-from-strip .hero-metrics span {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

.known-from-strip .hero-metrics strong {
  font-family: var(--font-display) !important;
  font-size: clamp(0.82rem, 1.05vw, 0.94rem) !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

.known-from-strip .hero-metrics span {
  font-family: var(--font-body) !important;
  font-size: clamp(0.42rem, 0.52vw, 0.48rem) !important;
  line-height: 1.05 !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
}

.service-card:hover,
.service-card:focus-within,
.service-card.is-active,
.service-card.service-card-featured:hover,
.service-card.service-card-featured:focus-within {
  border-color: rgba(12, 192, 223, 0.70) !important;
  box-shadow: 0 0 0 1px rgba(12, 192, 223, 0.26), 0 22px 52px rgba(12, 192, 223, 0.16) !important;
  transform: translateY(-4px) !important;
}

.service-card:hover .service-stage,
.service-card:focus-within .service-stage {
  color: #021111 !important;
  background: linear-gradient(135deg, #0cc0df, #ffde59) !important;
  border-color: transparent !important;
}

@media (max-width: 980px) {
  .site-header,
  :root[data-theme="light"] .site-header,
  :root:not([data-theme="light"]) .site-header,
  :root[data-theme="dark"] .site-header {
    align-items: center !important;
  }

  .site-header .brand,
  .site-header .header-actions {
    align-items: center !important;
  }

  .site-header .brand-logo-shell {
    width: clamp(142px, 42vw, 176px) !important;
    height: 36px !important;
    min-height: 36px !important;
  }

  .hero-copy .known-from-strip.known-from-strip-desktop,
  .hero .known-from-strip.known-from-strip-desktop {
    width: min(100%, 338px) !important;
    margin: 12px auto 0 !important;
  }

  .known-from-strip .known-from-logos img,
  .known-from-strip .hero-metrics article {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
  }

  .known-from-strip .hero-metrics strong {
    font-size: clamp(0.78rem, 3.3vw, 0.92rem) !important;
  }

  .known-from-strip .hero-metrics span {
    font-size: clamp(0.42rem, 1.7vw, 0.48rem) !important;
  }

  .mini-game-heading,
  .launch-game,
  .mission-control,
  .faq,
  .faq .section-heading,
  .faq-list,
  .faq-item,
  .contact-section,
  .contact-section .section-heading,
  .contact-form,
  .site-footer,
  footer.site-footer,
  .testimonials,
  .testimonials .section-heading,
  .trust-copy,
  .trust-copy .section-heading,
  .trust-copy .section-heading h2 {
    width: min(100%, 720px) !important;
    max-width: calc(100vw - 32px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    transform: none !important;
    justify-self: center !important;
  }
}

@media (max-width: 390px) {
  .known-from-strip .hero-metrics {
    gap: 5px !important;
  }

  .known-from-strip .hero-metrics article {
    padding-inline: 2px !important;
  }

  .known-from-strip .hero-metrics strong {
    font-size: 0.74rem !important;
  }

  .known-from-strip .hero-metrics span {
    font-size: 0.39rem !important;
    letter-spacing: 0.02em !important;
  }

  .trust-copy .section-heading h2,
  .testimonials .section-heading h2 {
    font-size: clamp(2.05rem, 12vw, 2.75rem) !important;
    overflow: visible !important;
    padding-inline: 4px !important;
  }
}

.site-header,
:root[data-theme="dark"] .site-header,
:root:not([data-theme="light"]) .site-header {
  background:
    radial-gradient(circle at 12% 10%, rgba(12, 192, 223, 0.12), transparent 42%),
    radial-gradient(circle at 88% 16%, rgba(255, 222, 89, 0.08), transparent 38%),
    rgba(2, 12, 12, 0.82) !important;
}

:root[data-theme="light"] .site-header {
  background:
    radial-gradient(circle at 10% 8%, rgba(12, 192, 223, 0.16), transparent 42%),
    radial-gradient(circle at 82% 10%, rgba(255, 222, 89, 0.12), transparent 38%),
    rgba(246, 251, 249, 0.88) !important;
}

.site-header .brand {
  display: flex !important;
  align-items: center !important;
  align-self: center !important;
  height: 46px !important;
  min-height: 46px !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 0 !important;
}

.site-header .brand-logo-shell,
.site-header .brand-wordmark {
  display: block !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  overflow: visible !important;
}

.site-header .brand-logo-shell {
  width: clamp(168px, 13vw, 218px) !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  align-self: center !important;
}

.site-header .brand-wordmark {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: left center !important;
}

.hero {
  position: relative !important;
  isolation: isolate !important;
  overflow: visible !important;
  background:
    radial-gradient(circle at 72% 45%, rgba(12, 192, 223, 0.25), transparent 34%),
    radial-gradient(circle at 82% 57%, rgba(116, 215, 143, 0.2), transparent 38%),
    radial-gradient(circle at 58% 82%, rgba(255, 222, 89, 0.13), transparent 34%),
    linear-gradient(120deg, rgba(2, 12, 12, 0.98), rgba(3, 38, 36, 0.92) 52%, rgba(11, 32, 21, 0.86)) !important;
}

:root[data-theme="light"] .hero {
  background:
    radial-gradient(circle at 70% 42%, rgba(12, 192, 223, 0.22), transparent 35%),
    radial-gradient(circle at 83% 58%, rgba(112, 213, 146, 0.18), transparent 38%),
    radial-gradient(circle at 58% 82%, rgba(255, 222, 89, 0.14), transparent 36%),
    linear-gradient(120deg, #ffffff, #effcfd 52%, #fffdf0) !important;
}

.hero::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: -90px !important;
  bottom: -80px !important;
  left: 50% !important;
  width: 100vw !important;
  transform: translateX(-50%) !important;
  z-index: -2 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 76% 44%, rgba(12, 192, 223, 0.32), transparent 30%),
    radial-gradient(circle at 82% 62%, rgba(107, 215, 147, 0.24), transparent 35%),
    radial-gradient(circle at 62% 86%, rgba(255, 222, 89, 0.18), transparent 34%) !important;
  filter: blur(24px) !important;
  opacity: 0.98 !important;
}

:root[data-theme="light"] .hero::before {
  background:
    radial-gradient(circle at 76% 44%, rgba(12, 192, 223, 0.24), transparent 31%),
    radial-gradient(circle at 82% 62%, rgba(107, 215, 147, 0.2), transparent 36%),
    radial-gradient(circle at 62% 86%, rgba(255, 222, 89, 0.16), transparent 35%) !important;
}

.hero-visual {
  position: relative !important;
  isolation: isolate !important;
  overflow: visible !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

.hero-visual::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: -28% -34% -18% -28% !important;
  z-index: -1 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 50% 45%, rgba(12, 192, 223, 0.32), transparent 35%),
    radial-gradient(circle at 62% 66%, rgba(115, 216, 149, 0.25), transparent 38%),
    radial-gradient(circle at 42% 82%, rgba(255, 222, 89, 0.16), transparent 35%) !important;
  filter: blur(34px) !important;
  opacity: 0.92 !important;
}

.phone-shell,
.phone-frame-custom {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

.proof-grid,
.hero-copy .proof-grid,
.hero-visual > .results-medals,
.trust-strip .results-medals,
.known-from-strip.known-from-strip-mobile,
.hero .known-from-strip-mobile {
  display: none !important;
}

.known-from-strip > span,
.known-from-strip.known-from-strip-desktop > span,
.hero .known-from-strip.known-from-strip-desktop > span {
  display: none !important;
  visibility: hidden !important;
}

.hero-copy .known-from-strip.known-from-strip-desktop,
.hero .known-from-strip.known-from-strip-desktop {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: center !important;
  width: min(100%, 338px) !important;
  max-width: 338px !important;
  margin: 12px 0 0 !important;
  gap: 7px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.known-from-strip .known-from-logos,
.known-from-strip .hero-metrics {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  width: 100% !important;
  max-width: 338px !important;
  gap: 7px !important;
  margin: 0 !important;
}

.known-from-strip .known-from-logos img,
.known-from-strip .hero-metrics article {
  width: 100% !important;
  min-width: 0 !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  box-sizing: border-box !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}

.known-from-strip .known-from-logos img {
  object-fit: contain !important;
  padding: 6px 8px !important;
  background: rgba(255, 255, 255, 0.94) !important;
}

.known-from-strip .hero-metrics article {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  padding: 5px 3px !important;
  border: 1px solid rgba(12, 192, 223, 0.4) !important;
  background:
    radial-gradient(circle at 82% 105%, rgba(12, 192, 223, 0.2), transparent 48%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 222, 89, 0.08)),
    rgba(11, 45, 41, 0.58) !important;
}

.known-from-strip .hero-metrics strong {
  font-family: var(--font-display) !important;
  font-size: clamp(0.82rem, 1.14vw, 0.94rem) !important;
  line-height: 0.98 !important;
  letter-spacing: 0 !important;
}

.known-from-strip .hero-metrics span {
  font-family: var(--font-body) !important;
  font-size: clamp(0.39rem, 0.55vw, 0.48rem) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

.service-card.service-card-featured:hover,
.service-card.service-card-featured:focus-within,
.service-card.service-card-featured.is-active {
  border-color: rgba(12, 192, 223, 0.9) !important;
  box-shadow:
    0 24px 70px rgba(12, 192, 223, 0.16),
    inset 0 0 0 1px rgba(255, 222, 89, 0.18) !important;
  transform: translateY(-4px) !important;
}

@media (max-width: 980px) {
  .site-header .brand {
    height: 42px !important;
    min-height: 42px !important;
  }

  .site-header .brand-logo-shell {
    width: clamp(138px, 42vw, 176px) !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
  }

  .hero-copy .known-from-strip.known-from-strip-desktop,
  .hero .known-from-strip.known-from-strip-desktop {
    width: min(100%, 322px) !important;
    max-width: 322px !important;
    margin: 12px auto 0 !important;
    gap: 6px !important;
  }

  .known-from-strip .known-from-logos,
  .known-from-strip .hero-metrics {
    max-width: 322px !important;
    gap: 6px !important;
  }

  .known-from-strip .known-from-logos img,
  .known-from-strip .hero-metrics article {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
  }

  .known-from-strip .hero-metrics strong {
    font-size: clamp(0.76rem, 3.35vw, 0.9rem) !important;
  }

  .known-from-strip .hero-metrics span {
    font-size: clamp(0.38rem, 1.55vw, 0.46rem) !important;
  }

  .mini-game-heading,
  .launch-game,
  .mission-control,
  .faq,
  .faq .section-heading,
  .faq-list,
  .faq-item,
  .contact-section,
  .contact-section .section-heading,
  .contact-form,
  .site-footer,
  footer.site-footer,
  .trust-strip,
  .trust-strip .section-heading,
  .trust-copy,
  .trust-copy.section-heading,
  .testimonials {
    width: min(100%, calc(100vw - 32px)) !important;
    max-width: 720px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    transform: none !important;
    justify-self: center !important;
  }

  .trust-strip .trust-copy h2,
  .trust-copy h2 {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: auto !important;
    padding-inline: 4px !important;
    overflow: visible !important;
    font-size: clamp(2.3rem, 10.2vw, 3.35rem) !important;
    line-height: 1.03 !important;
    text-align: center !important;
  }
}

@media (max-width: 380px) {
  .known-from-strip .hero-metrics strong {
    font-size: 0.72rem !important;
  }

  .known-from-strip .hero-metrics span {
    font-size: 0.36rem !important;
  }
}

.site-header,
:root[data-theme="dark"] .site-header,
:root:not([data-theme="light"]) .site-header {
  display: grid !important;
  align-items: center !important;
  background:
    radial-gradient(circle at 16% 18%, rgba(12, 192, 223, 0.14), transparent 38%),
    radial-gradient(circle at 92% 22%, rgba(255, 222, 89, 0.1), transparent 40%),
    linear-gradient(135deg, rgba(7, 45, 42, 0.9), rgba(5, 24, 23, 0.86)) !important;
}

:root[data-theme="light"] .site-header {
  background:
    radial-gradient(circle at 16% 18%, rgba(12, 192, 223, 0.15), transparent 38%),
    radial-gradient(circle at 92% 22%, rgba(255, 222, 89, 0.18), transparent 40%),
    linear-gradient(135deg, rgba(241, 253, 252, 0.95), rgba(255, 252, 235, 0.94)) !important;
}

.site-header .brand {
  display: flex !important;
  align-items: center !important;
  align-self: center !important;
  height: 44px !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  overflow: visible !important;
}

.site-header .brand-logo-shell {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: clamp(176px, 13vw, 218px) !important;
  height: 42px !important;
  min-height: 42px !important;
  overflow: visible !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

.site-header .brand-wordmark {
  position: absolute !important;
  inset: 0 auto auto 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: left center !important;
  transform: none !important;
  background: transparent !important;
}

:root:not([data-theme="light"]) .site-header .brand-wordmark-light,
:root[data-theme="dark"] .site-header .brand-wordmark-light {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

:root:not([data-theme="light"]) .site-header .brand-wordmark-dark,
:root[data-theme="dark"] .site-header .brand-wordmark-dark {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

.hero {
  position: relative !important;
  overflow: hidden !important;
  background:
    radial-gradient(ellipse at 74% 46%, rgba(12, 192, 223, 0.25), transparent 38%),
    radial-gradient(ellipse at 80% 60%, rgba(255, 222, 89, 0.16), transparent 44%),
    radial-gradient(ellipse at 30% 70%, rgba(104, 225, 158, 0.16), transparent 46%),
    linear-gradient(135deg, rgba(2, 22, 22, 0.98), rgba(4, 54, 49, 0.96) 52%, rgba(34, 40, 18, 0.82)) !important;
}

:root[data-theme="light"] .hero {
  background:
    radial-gradient(ellipse at 74% 46%, rgba(12, 192, 223, 0.18), transparent 40%),
    radial-gradient(ellipse at 80% 60%, rgba(255, 222, 89, 0.18), transparent 46%),
    radial-gradient(ellipse at 30% 70%, rgba(104, 225, 158, 0.16), transparent 48%),
    linear-gradient(135deg, rgba(246, 254, 255, 0.98), rgba(240, 255, 253, 0.98) 52%, rgba(255, 253, 239, 0.95)) !important;
}

.hero::before {
  content: "" !important;
  position: absolute !important;
  inset: -28% !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 24% 34%, rgba(12, 192, 223, 0.16), transparent 30%),
    radial-gradient(circle at 80% 40%, rgba(104, 225, 158, 0.14), transparent 32%),
    radial-gradient(circle at 76% 66%, rgba(255, 222, 89, 0.12), transparent 34%) !important;
  filter: blur(22px) !important;
  opacity: 0.72 !important;
  animation: heroFinalNebula 22s ease-in-out infinite alternate !important;
}

@keyframes heroFinalNebula {
  from {
    transform: translate3d(-2%, 1%, 0) scale(1);
  }
  to {
    transform: translate3d(2%, -1%, 0) scale(1.04);
  }
}

.hero-visual {
  isolation: isolate !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.hero-visual::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: -16% -34% !important;
  z-index: -1 !important;
  pointer-events: none !important;
  border-radius: 999px !important;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(12, 192, 223, 0.26), transparent 42%),
    radial-gradient(ellipse at 64% 60%, rgba(255, 222, 89, 0.18), transparent 50%),
    radial-gradient(ellipse at 38% 62%, rgba(104, 225, 158, 0.2), transparent 48%) !important;
  filter: blur(20px) !important;
  opacity: 0.92 !important;
}

.hero-copy .known-from-strip.known-from-strip-desktop {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  width: min(100%, 338px) !important;
  max-width: 338px !important;
  margin: 10px 0 0 !important;
  gap: 6px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.known-from-strip.known-from-strip-desktop > span {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.known-from-strip .known-from-logos,
.known-from-strip .hero-metrics {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  width: 100% !important;
  max-width: 100% !important;
  gap: 6px !important;
  margin: 0 !important;
}

.known-from-strip .known-from-logos img,
.known-from-strip .hero-metrics article {
  width: 100% !important;
  min-width: 0 !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  padding: 5px 6px !important;
  box-sizing: border-box !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}

.known-from-strip .known-from-logos img {
  object-fit: contain !important;
  background: rgba(255, 255, 255, 0.96) !important;
}

.known-from-strip .hero-metrics article {
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
  gap: 2px !important;
  border: 1px solid rgba(12, 192, 223, 0.36) !important;
  background:
    radial-gradient(circle at 82% 105%, rgba(12, 192, 223, 0.18), transparent 48%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.07), rgba(255, 222, 89, 0.07)),
    rgba(11, 45, 41, 0.56) !important;
}

.known-from-strip .hero-metrics strong {
  font-family: var(--font-display) !important;
  font-size: clamp(0.72rem, 1vw, 0.88rem) !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

.known-from-strip .hero-metrics span {
  font-family: var(--font-body) !important;
  font-size: clamp(0.4rem, 0.62vw, 0.49rem) !important;
  line-height: 1 !important;
  letter-spacing: 0.045em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

.service-card:hover,
.service-card:focus-within,
.service-card.service-card-featured:hover,
.service-card.service-card-featured:focus-within {
  border-color: rgba(12, 192, 223, 0.72) !important;
  box-shadow: 0 22px 60px rgba(12, 192, 223, 0.18), inset 0 0 0 1px rgba(255, 222, 89, 0.14) !important;
  transform: translateY(-5px) !important;
}

.service-card:hover .service-stage,
.service-card:focus-within .service-stage {
  border-color: rgba(255, 222, 89, 0.75) !important;
  background: rgba(12, 192, 223, 0.13) !important;
}

@media (max-width: 980px) {
  .hero .known-from-strip.known-from-strip-desktop {
    width: min(100%, 326px) !important;
    max-width: 326px !important;
    margin: 12px auto 0 !important;
  }

  .known-from-strip .known-from-logos,
  .known-from-strip .hero-metrics {
    gap: 7px !important;
  }

  .known-from-strip .known-from-logos img,
  .known-from-strip .hero-metrics article {
    height: 43px !important;
    min-height: 43px !important;
  }

  .known-from-strip .hero-metrics strong {
    font-size: clamp(0.82rem, 3.7vw, 0.98rem) !important;
  }

  .known-from-strip .hero-metrics span {
    font-size: clamp(0.43rem, 1.8vw, 0.51rem) !important;
  }

  #referenzen,
  .testimonials,
  .faq,
  .contact-section,
  .mini-game-section,
  .launch-game,
  .mission-control,
  .site-footer {
    overflow-x: hidden !important;
  }

  #referenzen .section-heading,
  .trust-copy,
  .trust-copy.section-heading,
  .faq .section-heading,
  .mini-game-heading,
  .contact-section .section-heading {
    width: min(100%, calc(100vw - 32px)) !important;
    max-width: calc(100vw - 32px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    padding-inline: 0 !important;
    transform: none !important;
    justify-self: center !important;
  }

  #referenzen .section-heading h2,
  .trust-copy h2 {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
    overflow: visible !important;
    text-align: center !important;
    font-size: clamp(2.15rem, 10.5vw, 3.35rem) !important;
    line-height: 0.98 !important;
  }

  .faq-list,
  .faq-item,
  .launch-game,
  .mission-control,
  .contact-form,
  .site-footer,
  footer.site-footer {
    width: min(100%, 720px) !important;
    max-width: calc(100vw - 32px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    transform: none !important;
    justify-self: center !important;
  }
}

@media (max-width: 380px) {
  #referenzen .section-heading h2,
  .trust-copy h2 {
    font-size: clamp(2rem, 9.7vw, 3rem) !important;
  }
}

body {
  background:
    radial-gradient(circle at 18% 20%, rgba(12, 192, 223, 0.22), transparent 34rem),
    radial-gradient(circle at 76% 30%, rgba(255, 222, 89, 0.14), transparent 32rem),
    radial-gradient(circle at 50% 82%, rgba(105, 224, 170, 0.14), transparent 34rem),
    linear-gradient(135deg, #03110f 0%, #062522 48%, #06130f 100%) !important;
  background-attachment: fixed !important;
}

:root[data-theme="light"] body {
  background:
    radial-gradient(circle at 18% 20%, rgba(12, 192, 223, 0.16), transparent 34rem),
    radial-gradient(circle at 76% 30%, rgba(255, 222, 89, 0.13), transparent 32rem),
    radial-gradient(circle at 50% 82%, rgba(105, 224, 170, 0.12), transparent 34rem),
    linear-gradient(135deg, #f9fffe 0%, #eafafa 48%, #fffdf4 100%) !important;
}

.site-header,
:root[data-theme="dark"] .site-header,
:root:not([data-theme="light"]) .site-header {
  position: sticky !important;
  top: 14px !important;
  z-index: 500 !important;
  width: min(1080px, calc(100vw - 40px)) !important;
  height: 72px !important;
  min-height: 72px !important;
  margin: 14px auto 0 !important;
  padding: 0 18px !important;
  display: grid !important;
  grid-template-columns: minmax(180px, 1fr) auto !important;
  align-items: center !important;
  gap: 16px !important;
  overflow: visible !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  background:
    linear-gradient(135deg, rgba(7, 42, 37, 0.88), rgba(9, 58, 48, 0.78), rgba(9, 38, 34, 0.88)) !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.2) !important;
  backdrop-filter: blur(18px) !important;
}

:root[data-theme="light"] .site-header {
  border-color: rgba(6, 36, 34, 0.14) !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(235, 250, 250, 0.91), rgba(255, 251, 235, 0.88)) !important;
  box-shadow: 0 18px 44px rgba(12, 33, 33, 0.1) !important;
}

.site-header .brand {
  height: 72px !important;
  min-height: 72px !important;
  align-self: stretch !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  overflow: visible !important;
}

.site-header .brand-logo-shell {
  position: relative !important;
  display: block !important;
  flex: 0 0 auto !important;
  width: clamp(174px, 16vw, 220px) !important;
  height: 36px !important;
  min-height: 36px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  transform: none !important;
}

.site-header .brand-wordmark {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: contain !important;
  object-position: left center !important;
  max-width: none !important;
  max-height: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  background: transparent !important;
}

.site-header .header-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  align-self: center !important;
  min-height: 42px !important;
}

.site-header .menu-toggle {
  display: grid !important;
}

.site-header .mobile-nav {
  position: absolute !important;
  top: calc(100% + 10px) !important;
  right: 0 !important;
  left: auto !important;
  z-index: 800 !important;
  width: min(312px, calc(100vw - 40px)) !important;
  padding: 8px !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 7px !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(-8px) !important;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  background: linear-gradient(145deg, rgba(7, 31, 29, 0.96), rgba(11, 52, 43, 0.94)) !important;
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.35) !important;
}

:root[data-theme="light"] .site-header .mobile-nav {
  border-color: rgba(6, 36, 34, 0.12) !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.97), rgba(238, 251, 251, 0.95)) !important;
  box-shadow: 0 22px 50px rgba(12, 33, 33, 0.14) !important;
}

.site-header .mobile-nav a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 42px !important;
  padding: 10px 14px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--text) !important;
  font-family: var(--font-body) !important;
  font-weight: 900 !important;
  text-align: center !important;
  text-decoration: none !important;
  transition: transform 0.16s ease, background 0.16s ease, border-color 0.16s ease !important;
}

:root[data-theme="light"] .site-header .mobile-nav a {
  border-color: rgba(6, 36, 34, 0.1) !important;
  background: rgba(0, 0, 0, 0.035) !important;
}

.site-header .mobile-nav a:hover,
.site-header .mobile-nav a:focus-visible {
  transform: translateY(-1px) !important;
  border-color: rgba(12, 192, 223, 0.45) !important;
  background: rgba(12, 192, 223, 0.14) !important;
  outline: none !important;
}

.site-header .mobile-nav a[href="#strategie"] {
  border-color: transparent !important;
  background: linear-gradient(90deg, #0cc0df, #ffde59) !important;
  color: #03100f !important;
  box-shadow: 0 14px 28px rgba(12, 192, 223, 0.18) !important;
}

.hero-copy .proof-grid,
.known-from-strip.known-from-strip-mobile,
.hero-visual > .results-medals,
.trust-strip .results-medals,
.proof-grid {
  display: none !important;
}

.hero-visual,
.hero-visual::before,
.hero-visual::after,
.phone-shell,
.phone-shell::before,
.phone-shell::after,
.phone-frame-custom,
.phone-frame-custom::before,
.phone-frame-custom::after {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

.hero-visual::before,
.hero-visual::after,
.phone-shell::before,
.phone-shell::after,
.phone-frame-custom::before,
.phone-frame-custom::after {
  content: none !important;
  display: none !important;
}

.hero-copy .known-from-strip.known-from-strip-desktop {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: min(100%, 420px) !important;
  margin: 14px auto 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.known-from-strip.known-from-strip-desktop > span {
  display: block !important;
  margin: 0 !important;
  color: var(--muted) !important;
  font-family: var(--font-body) !important;
  font-size: 0.78rem !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  text-align: center !important;
}

.known-from-strip .known-from-logos {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(84px, 1fr)) !important;
  gap: 8px !important;
  width: min(100%, 340px) !important;
  margin: 0 auto !important;
}

.known-from-strip .known-from-logos img {
  width: 100% !important;
  height: 40px !important;
  padding: 8px 12px !important;
  object-fit: contain !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  background: #fff !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12) !important;
}

.known-from-strip .hero-metrics {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(96px, 1fr)) !important;
  gap: 8px !important;
  width: min(100%, 340px) !important;
  margin: 0 auto !important;
}

.known-from-strip .hero-metrics article {
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
  gap: 3px !important;
  min-width: 0 !important;
  min-height: 56px !important;
  padding: 8px 10px !important;
  overflow: visible !important;
  border-radius: 8px !important;
  border: 1px solid rgba(12, 192, 223, 0.42) !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.11), rgba(12, 192, 223, 0.11)) !important;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.12) !important;
  text-align: center !important;
}

.known-from-strip .hero-metrics strong {
  display: block !important;
  max-width: 100% !important;
  overflow: visible !important;
  color: #fff !important;
  font-family: var(--font-display) !important;
  font-size: clamp(0.96rem, 1.1vw, 1.08rem) !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
}

.known-from-strip .hero-metrics span {
  display: block !important;
  max-width: 100% !important;
  overflow: visible !important;
  color: rgba(255, 255, 255, 0.74) !important;
  font-family: var(--font-body) !important;
  font-size: clamp(0.48rem, 0.65vw, 0.56rem) !important;
  line-height: 1.05 !important;
  letter-spacing: 0.045em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

:root[data-theme="light"] .known-from-strip .hero-metrics strong {
  color: #081211 !important;
}

:root[data-theme="light"] .known-from-strip .hero-metrics span {
  color: rgba(8, 18, 17, 0.64) !important;
}

.trust,
.trust-strip,
.section-pad {
  border-top: 0 !important;
  border-bottom: 0 !important;
}

.trust-copy h2,
.section-heading h2,
.mini-game-heading h2 {
  max-width: min(100%, 1100px) !important;
  margin-inline: auto !important;
  padding-inline: 16px !important;
  overflow: visible !important;
  text-align: center !important;
}

.about .portrait-placeholder,
.about .portrait-image {
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  border-radius: 50% !important;
  background: #020807 !important;
}

.about .portrait-image img {
  position: relative !important;
  inset: auto !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
  opacity: 1 !important;
  background: #020807 !important;
}

@media (min-width: 981px) {
  .hero-copy {
    align-items: flex-start !important;
  }

  .hero-copy .known-from-strip.known-from-strip-desktop {
    align-self: center !important;
  }
}

@media (max-width: 980px) {
  .site-header,
  :root[data-theme="dark"] .site-header,
  :root:not([data-theme="light"]) .site-header,
  :root[data-theme="light"] .site-header {
    top: 10px !important;
    width: calc(100vw - 24px) !important;
    height: 66px !important;
    min-height: 66px !important;
    padding: 0 12px !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px !important;
  }

  .site-header .brand {
    height: 66px !important;
    min-height: 66px !important;
  }

  .site-header .brand-logo-shell {
    width: clamp(142px, 42vw, 174px) !important;
    height: 34px !important;
    min-height: 34px !important;
  }

  .site-header .header-actions {
    gap: 7px !important;
  }

  .site-header .lang-toggle,
  .site-header .theme-toggle,
  .site-header .menu-toggle {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
  }

  .site-header .mobile-nav {
    right: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: auto !important;
  }

  .hero .known-from-strip.known-from-strip-desktop {
    width: min(100%, 330px) !important;
    margin: 14px auto 0 !important;
    align-self: center !important;
  }

  .hero .known-from-strip.known-from-strip-desktop > span {
    display: none !important;
  }

  .known-from-strip .known-from-logos {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: min(100%, 312px) !important;
    gap: 8px !important;
  }

  .known-from-strip .known-from-logos img {
    height: 38px !important;
    padding: 7px 10px !important;
  }

  .known-from-strip .hero-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: min(100%, 312px) !important;
    gap: 7px !important;
  }

  .known-from-strip .hero-metrics article {
    min-width: 0 !important;
    min-height: 56px !important;
    padding: 7px 5px !important;
  }

  .known-from-strip .hero-metrics strong {
    font-size: clamp(0.76rem, 3.7vw, 0.94rem) !important;
  }

  .known-from-strip .hero-metrics span {
    font-size: clamp(0.43rem, 2.05vw, 0.52rem) !important;
    letter-spacing: 0.035em !important;
  }

  .mini-game-heading,
  .launch-game,
  .mission-control,
  .faq,
  .faq .section-heading,
  .faq-list,
  .faq-item,
  .contact-section,
  .contact-section .section-heading,
  .contact-form,
  .site-footer,
  footer.site-footer {
    width: min(100%, 720px) !important;
    max-width: calc(100vw - 32px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    justify-self: center !important;
    transform: none !important;
    text-align: center !important;
  }

  .faq-item summary {
    text-align: left !important;
  }
}

@media (max-width: 380px) {
  .known-from-strip .hero-metrics strong {
    font-size: 0.74rem !important;
  }

  .known-from-strip .hero-metrics span {
    font-size: 0.42rem !important;
    letter-spacing: 0.025em !important;
  }

  .known-from-strip .hero-metrics article {
    padding-inline: 3px !important;
  }
}

html,
body {
  min-width: 0 !important;
  overflow-x: hidden !important;
}

body {
  background-color: #031817 !important;
  background-image:
    radial-gradient(circle at 18% 18%, rgba(12, 192, 223, 0.16), transparent 36%),
    radial-gradient(circle at 82% 24%, rgba(255, 222, 89, 0.12), transparent 34%),
    radial-gradient(circle at 52% 82%, rgba(44, 208, 185, 0.12), transparent 44%),
    linear-gradient(135deg, #031817 0%, #06110f 48%, #092820 100%) !important;
  background-attachment: fixed !important;
}

:root[data-theme="light"] body {
  background-color: #f7fbfb !important;
  background-image:
    radial-gradient(circle at 18% 18%, rgba(12, 192, 223, 0.13), transparent 34%),
    radial-gradient(circle at 82% 20%, rgba(255, 222, 89, 0.16), transparent 32%),
    radial-gradient(circle at 52% 82%, rgba(44, 208, 185, 0.12), transparent 42%),
    linear-gradient(135deg, #ffffff 0%, #edfafa 52%, #fff9df 100%) !important;
}

.site-header,
:root[data-theme="dark"] .site-header,
:root:not([data-theme="light"]) .site-header {
  background:
    radial-gradient(circle at 20% 30%, rgba(12, 192, 223, 0.16), transparent 44%),
    radial-gradient(circle at 78% 36%, rgba(255, 222, 89, 0.09), transparent 42%),
    linear-gradient(120deg, rgba(4, 35, 32, 0.94), rgba(7, 58, 52, 0.86), rgba(15, 45, 37, 0.82)) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  min-height: 72px !important;
  padding: 10px 18px !important;
  display: grid !important;
  grid-template-columns: minmax(184px, 1fr) auto !important;
  align-items: center !important;
  column-gap: 18px !important;
  overflow: visible !important;
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.24) !important;
}

:root[data-theme="light"] .site-header {
  background:
    radial-gradient(circle at 20% 30%, rgba(12, 192, 223, 0.13), transparent 44%),
    radial-gradient(circle at 80% 34%, rgba(255, 222, 89, 0.12), transparent 40%),
    linear-gradient(120deg, rgba(255, 255, 255, 0.96), rgba(232, 251, 253, 0.9), rgba(255, 249, 224, 0.78)) !important;
  border-color: rgba(6, 46, 43, 0.14) !important;
  box-shadow: 0 18px 54px rgba(2, 38, 36, 0.08) !important;
}

.site-header .header-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  justify-self: end !important;
  gap: 8px !important;
}

.site-header .brand {
  align-self: center !important;
  justify-self: start !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: auto !important;
  height: 52px !important;
  min-height: 52px !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
  overflow: visible !important;
  transform: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.site-header .brand::before,
.site-header .brand::after,
.site-header .brand-logo-shell::before,
.site-header .brand-logo-shell::after,
.brand-logo-shell::before,
.brand-logo-shell::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

.site-header .brand-logo-shell {
  position: relative !important;
  display: block !important;
  flex: 0 0 auto !important;
  width: clamp(176px, 13vw, 220px) !important;
  height: 42px !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  clip-path: none !important;
}

.site-header .brand-wordmark {
  position: absolute !important;
  inset: auto !important;
  top: 50% !important;
  left: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: left center !important;
  transform: translateY(-50%) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  clip-path: none !important;
  filter: none !important;
}

.site-header .mobile-nav {
  position: absolute !important;
  top: calc(100% + 10px) !important;
  right: 18px !important;
  left: auto !important;
  z-index: 60 !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  width: min(360px, calc(100vw - 32px)) !important;
  padding: 10px !important;
  gap: 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 14px !important;
  background:
    radial-gradient(circle at 20% 10%, rgba(12, 192, 223, 0.14), transparent 42%),
    linear-gradient(145deg, rgba(7, 35, 32, 0.98), rgba(10, 49, 42, 0.94)) !important;
  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.35) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(-6px) !important;
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease !important;
}

:root[data-theme="light"] .site-header .mobile-nav {
  background:
    radial-gradient(circle at 20% 10%, rgba(12, 192, 223, 0.13), transparent 42%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(236, 251, 250, 0.94)) !important;
  border-color: rgba(5, 42, 40, 0.14) !important;
  box-shadow: 0 24px 72px rgba(2, 31, 29, 0.16) !important;
}

.site-header .mobile-nav a {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 44px !important;
  padding: 12px 14px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  color: var(--text-main) !important;
  text-decoration: none !important;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease !important;
}

:root[data-theme="light"] .site-header .mobile-nav a {
  border-color: rgba(5, 42, 40, 0.1) !important;
  background: rgba(255, 255, 255, 0.72) !important;
}

.site-header .mobile-nav a:hover,
.site-header .mobile-nav a:focus-visible {
  transform: translateX(3px) !important;
  border-color: rgba(12, 192, 223, 0.55) !important;
  background:
    linear-gradient(90deg, rgba(12, 192, 223, 0.18), rgba(255, 222, 89, 0.13)) !important;
}

.site-header .mobile-nav a[href="#strategie"] {
  color: #050807 !important;
  border-color: transparent !important;
  background: var(--gradient-brand) !important;
  box-shadow: 0 14px 34px rgba(12, 192, 223, 0.2) !important;
}

.hero-visual > .results-medals,
.trust-strip .results-medals,
.known-from-strip.known-from-strip-mobile,
.proof-grid {
  display: none !important;
}

.known-from-strip.known-from-strip-desktop {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: min(100%, 430px) !important;
  margin: 14px auto 0 !important;
  gap: 9px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.known-from-strip.known-from-strip-desktop > span {
  display: block !important;
  font-family: var(--font-body) !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
  color: var(--text-muted) !important;
  text-align: center !important;
}

.known-from-strip .known-from-logos {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  width: min(100%, 360px) !important;
  gap: 9px !important;
  margin-inline: auto !important;
}

.known-from-strip .known-from-logos img {
  width: 100% !important;
  height: 40px !important;
  object-fit: contain !important;
  padding: 6px 10px !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.94) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
}

.known-from-strip .hero-metrics {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(120px, 1fr)) !important;
  width: min(100%, 400px) !important;
  gap: 9px !important;
  margin: 2px auto 0 !important;
  overflow: visible !important;
}

.known-from-strip .hero-metrics article {
  min-width: 0 !important;
  min-height: 58px !important;
  padding: 8px 10px !important;
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
  gap: 4px !important;
  overflow: visible !important;
  border-radius: 8px !important;
  border: 1px solid rgba(12, 192, 223, 0.38) !important;
  background:
    radial-gradient(circle at 82% 105%, rgba(12, 192, 223, 0.22), transparent 48%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 222, 89, 0.08)),
    rgba(11, 45, 41, 0.6) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.14) !important;
}

.known-from-strip .hero-metrics strong,
.known-from-strip .hero-metrics span {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  letter-spacing: 0 !important;
}

.known-from-strip .hero-metrics strong {
  font-family: var(--font-display) !important;
  font-size: clamp(0.98rem, 1.15vw, 1.12rem) !important;
  line-height: 1 !important;
}

.known-from-strip .hero-metrics span {
  font-family: var(--font-body) !important;
  font-size: clamp(0.52rem, 0.56vw, 0.6rem) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: 0.035em !important;
  text-transform: uppercase !important;
}

.hero-visual,
.hero-visual::before,
.hero-visual::after,
.phone-glow,
.phone-shell,
.phone-shell::before,
.phone-shell::after,
.phone-frame-custom {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

.about .portrait-image {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(12, 192, 223, 0.08), transparent 60%),
    #020807 url("assets/portraits/pepe-astronaut-final.png") center center / contain no-repeat !important;
}

.about .portrait-image::before,
.about .portrait-image::after {
  content: none !important;
  display: none !important;
}

.about .portrait-image img {
  opacity: 0 !important;
  visibility: hidden !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
}

@media (max-width: 980px) {
  .site-header,
  :root[data-theme="dark"] .site-header,
  :root:not([data-theme="light"]) .site-header,
  :root[data-theme="light"] .site-header {
    width: calc(100vw - 24px) !important;
    min-height: 66px !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    padding: 10px 12px !important;
    gap: 8px !important;
  }

  .site-header .brand {
    height: 44px !important;
    min-height: 44px !important;
  }

  .site-header .brand-logo-shell {
    width: clamp(142px, 42vw, 176px) !important;
    height: 34px !important;
    min-height: 34px !important;
  }

  .site-header .header-actions {
    gap: 7px !important;
  }

  .site-header .lang-toggle,
  .site-header .theme-toggle,
  .site-header .menu-toggle {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
  }

  .site-header .mobile-nav {
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    margin-inline: auto !important;
  }

  .hero .known-from-strip.known-from-strip-desktop {
    display: flex !important;
    width: min(100%, 332px) !important;
    margin: 12px auto 0 !important;
  }

  .hero .known-from-strip.known-from-strip-desktop > span {
    display: none !important;
  }

  .known-from-strip .known-from-logos,
  .known-from-strip .hero-metrics {
    width: min(100%, 326px) !important;
  }

  .known-from-strip .known-from-logos {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  .known-from-strip .known-from-logos img {
    height: 38px !important;
    padding: 6px 8px !important;
  }

  .known-from-strip .hero-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  .known-from-strip .hero-metrics article {
    min-width: 0 !important;
    min-height: 54px !important;
    padding: 7px 5px !important;
  }

  .known-from-strip .hero-metrics strong {
    font-size: clamp(0.78rem, 3.55vw, 0.98rem) !important;
  }

  .known-from-strip .hero-metrics span {
    font-size: clamp(0.43rem, 1.75vw, 0.52rem) !important;
    letter-spacing: 0.025em !important;
  }

  .mini-game-heading,
  .launch-game,
  .mission-control,
  .faq,
  .faq .section-heading,
  .faq-list,
  .faq-item,
  .contact-section,
  .contact-section .section-heading,
  .contact-form,
  .site-footer,
  footer.site-footer,
  .trust-strip,
  .trust-copy,
  .trust-copy h2,
  .about,
  .about-panel,
  .cta-intro {
    width: min(100%, 720px) !important;
    max-width: calc(100vw - 32px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    transform: none !important;
    left: auto !important;
    right: auto !important;
    justify-self: center !important;
  }

  .trust-copy h2 {
    overflow: visible !important;
    font-size: clamp(2.4rem, 12vw, 4rem) !important;
    line-height: 0.98 !important;
  }
}

@media (max-width: 380px) {
  .known-from-strip .hero-metrics strong {
    font-size: 0.74rem !important;
  }

  .known-from-strip .hero-metrics span {
    font-size: 0.39rem !important;
  }

  .known-from-strip .hero-metrics article {
    padding-inline: 3px !important;
  }
}

:root[data-theme="light"] {
  --header-surface: linear-gradient(135deg, rgba(244, 252, 252, 0.86), rgba(231, 247, 245, 0.7));
}

.site-header,
:root[data-theme="dark"] .site-header,
:root:not([data-theme]) .site-header {
  position: sticky !important;
  top: max(12px, env(safe-area-inset-top)) !important;
  z-index: 1000 !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: clamp(16px, 2vw, 28px) !important;
  width: min(100% - 32px, 1180px) !important;
  margin: 20px auto 0 !important;
  padding: 14px 18px !important;
  background:
    radial-gradient(circle at 16% 10%, rgba(12, 192, 223, 0.12), transparent 34%),
    radial-gradient(circle at 84% 90%, rgba(255, 222, 89, 0.1), transparent 30%),
    var(--header-surface) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(22px) saturate(1.25) !important;
}

:root[data-theme="light"] .site-header {
  border-color: rgba(8, 32, 30, 0.13) !important;
  box-shadow: 0 24px 70px rgba(12, 46, 50, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
}

.site-header .brand,
.site-header .desktop-nav,
.site-header .header-actions,
.site-header .lang-toggle,
.site-header .theme-toggle,
.site-header .menu-toggle,
.site-header .button-small {
  align-self: center !important;
  align-items: center !important;
}

.site-header .brand {
  display: inline-flex !important;
  height: 48px !important;
  min-width: 0 !important;
}

.site-header .brand-logo-shell {
  position: relative !important;
  display: block !important;
  flex: 0 0 auto !important;
  width: clamp(174px, 14vw, 224px) !important;
  height: 42px !important;
  overflow: visible !important;
  background: transparent !important;
}

.site-header .brand-wordmark {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: contain !important;
  object-position: left center !important;
  transform: none !important;
  filter: none !important;
  background: transparent !important;
}

.site-header .desktop-nav {
  justify-content: center !important;
  gap: clamp(24px, 3vw, 56px) !important;
  margin: 0 !important;
}

.site-header .header-actions {
  justify-content: flex-end !important;
  gap: 8px !important;
}

.site-header .button-small::before,
.site-header .button-small::after,
.site-header .mobile-nav a::before,
.site-header .mobile-nav a::after {
  content: none !important;
  display: none !important;
}

.site-header .mobile-nav {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-rows: 0fr !important;
  gap: 8px !important;
  min-height: 0 !important;
  max-height: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: grid-template-rows 0.24s ease, max-height 0.24s ease, opacity 0.18s ease !important;
}

.site-header.menu-open .mobile-nav {
  grid-template-rows: 1fr !important;
  max-height: 420px !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.site-header .mobile-nav a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 44px !important;
  padding: 10px 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.055) !important;
  color: var(--text) !important;
  text-align: center !important;
}

:root[data-theme="light"] .site-header .mobile-nav a {
  border-color: rgba(4, 26, 24, 0.14) !important;
  background: rgba(255, 255, 255, 0.66) !important;
}

.site-header .mobile-nav a[href="#strategie"] {
  border: 0 !important;
  background: linear-gradient(90deg, #0cc0df, #ffde59) !important;
  color: #061210 !important;
}

.hero {
  overflow: hidden !important;
}

.hero-visual {
  position: relative !important;
  overflow: visible !important;
  isolation: isolate !important;
}

.phone-shell,
.phone-shell::before,
.phone-shell::after,
.phone-frame-custom {
  background: transparent !important;
  box-shadow: none !important;
}

.phone-frame-custom {
  z-index: 4 !important;
}

.phone-screen,
.phone-screen::before,
.phone-screen::after,
.phone-screen .video-placeholder,
.phone-screen video,
.hero-preview-video,
.hero-video {
  background-color: #000 !important;
}

.phone-screen video {
  object-fit: contain !important;
  object-position: center center !important;
}

.hero-visual > .results-medals {
  position: absolute !important;
  inset: 0 !important;
  z-index: 7 !important;
  display: block !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  pointer-events: none !important;
}

.hero-visual > .results-medals .results-medal {
  position: absolute !important;
  width: clamp(136px, 10.8vw, 172px) !important;
  min-height: 58px !important;
  padding: 10px 14px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(212, 246, 113, 0.5) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.035)),
    rgba(88, 116, 44, 0.26) !important;
  box-shadow: 0 16px 42px rgba(199, 255, 79, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
  backdrop-filter: blur(12px) saturate(1.25) !important;
  text-align: center !important;
}

.hero-visual > .results-medals .results-medal:nth-child(1) {
  left: clamp(-72px, -4.8vw, -28px) !important;
  top: 47% !important;
}

.hero-visual > .results-medals .results-medal:nth-child(2) {
  right: clamp(-84px, -5.8vw, -30px) !important;
  top: 23% !important;
}

.hero-visual > .results-medals .results-medal:nth-child(3) {
  right: clamp(-88px, -5.8vw, -34px) !important;
  bottom: 25% !important;
}

.hero-visual > .results-medals .results-medal strong {
  display: block !important;
  color: #fff !important;
  font-family: var(--font-display) !important;
  font-size: clamp(1.05rem, 1.32vw, 1.28rem) !important;
  line-height: 1 !important;
}

.hero-visual > .results-medals .results-medal span {
  display: block !important;
  margin-top: 5px !important;
  color: #dfff72 !important;
  font-size: 0.68rem !important;
  font-weight: 900 !important;
  line-height: 1.14 !important;
  text-transform: none !important;
}

.trust-strip::before,
.trust-strip::after,
.logo-marquee::before,
.logo-marquee::after,
.testimonials::before,
.testimonials::after,
.services::before,
.services::after,
.specializations::before,
.specializations::after,
.about::before,
.about::after,
.cta::before,
.cta::after {
  content: none !important;
  display: none !important;
}

.trust-strip {
  padding-top: clamp(34px, 4vw, 64px) !important;
  padding-bottom: clamp(18px, 3vw, 40px) !important;
}

.trust-strip .trust-copy {
  margin-bottom: clamp(16px, 2vw, 28px) !important;
}

.trust-strip .trust-copy h2,
.trust-copy h2 {
  color: #fff !important;
  background: none !important;
  -webkit-text-fill-color: #fff !important;
  text-align: center !important;
}

.trust-strip .trust-copy p,
.trust-copy p {
  max-width: 760px !important;
  margin-inline: auto !important;
  color: var(--muted) !important;
  font-weight: 600 !important;
  line-height: 1.55 !important;
}

.portrait-image {
  overflow: hidden !important;
}

.portrait-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
  scale: 1 !important;
  background: transparent !important;
}

.specializations,
.specializations * {
  scroll-margin-top: 120px !important;
}

@media (max-width: 1180px) {
  .site-header {
    width: min(100% - 24px, 1040px) !important;
    grid-template-columns: auto 1fr auto !important;
  }

  .site-header .desktop-nav,
  .site-header .header-actions > .button-small {
    display: none !important;
  }

  .site-header .menu-toggle {
    display: inline-flex !important;
  }
}

@media (max-width: 980px) {
  .hero-visual > .results-medals .results-medal:nth-child(1) {
    left: -12px !important;
    top: 50% !important;
  }

  .hero-visual > .results-medals .results-medal:nth-child(2) {
    right: -18px !important;
    top: 18% !important;
  }

  .hero-visual > .results-medals .results-medal:nth-child(3) {
    right: -18px !important;
    bottom: 22% !important;
  }
}

@media (max-width: 760px) {
  .site-header {
    width: calc(100% - 18px) !important;
    grid-template-columns: auto 1fr auto auto auto !important;
    gap: 8px !important;
    margin-top: 8px !important;
    padding: 9px !important;
  }

  .site-header .brand {
    height: 42px !important;
  }

  .site-header .brand-logo-shell {
    width: clamp(134px, 42vw, 174px) !important;
    height: 34px !important;
  }

  .site-header .lang-toggle,
  .site-header .theme-toggle,
  .site-header .menu-toggle {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
  }

  .hero-visual > .results-medals {
    position: relative !important;
    inset: auto !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: min(100%, 360px) !important;
    max-width: 360px !important;
    margin: 14px auto 0 !important;
  }

  .hero-visual > .results-medals .results-medal,
  .hero-visual > .results-medals .results-medal:nth-child(1),
  .hero-visual > .results-medals .results-medal:nth-child(2),
  .hero-visual > .results-medals .results-medal:nth-child(3) {
    position: relative !important;
    inset: auto !important;
    width: auto !important;
    min-height: 56px !important;
    padding: 8px 7px !important;
  }

  .hero-visual > .results-medals .results-medal strong {
    font-size: 0.88rem !important;
  }

  .hero-visual > .results-medals .results-medal span {
    font-size: 0.56rem !important;
  }

  .trust-strip {
    padding-top: 30px !important;
  }
}

@media (max-width: 390px) {
  .site-header {
    grid-template-columns: minmax(0, 1fr) auto auto auto !important;
  }

  .site-header .brand-logo-shell {
    width: clamp(118px, 36vw, 150px) !important;
  }
}

.site-header {
  background:
    radial-gradient(circle at 18% 18%, rgba(12, 192, 223, 0.1), transparent 34%),
    radial-gradient(circle at 86% 34%, rgba(255, 222, 89, 0.08), transparent 32%),
    rgba(5, 22, 20, 0.74) !important;
  align-items: center !important;
}

:root[data-theme="light"] .site-header {
  background:
    radial-gradient(circle at 18% 18%, rgba(12, 192, 223, 0.1), transparent 34%),
    radial-gradient(circle at 86% 34%, rgba(255, 222, 89, 0.1), transparent 32%),
    rgba(242, 250, 249, 0.82) !important;
}

.site-header .brand-logo-shell {
  display: block !important;
  overflow: visible !important;
  flex: 0 0 auto !important;
  min-width: 168px !important;
  width: clamp(168px, 15vw, 224px) !important;
  height: 44px !important;
}

.site-header .brand-wordmark {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: left center !important;
  transform: none !important;
}

.site-header .mobile-nav {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-rows: 0fr !important;
  overflow: hidden !important;
  max-height: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: grid-template-rows 220ms ease, max-height 220ms ease, opacity 180ms ease, margin 180ms ease !important;
}

.site-header .mobile-nav a {
  width: 100% !important;
  text-align: center !important;
  justify-content: center !important;
}

.hero-visual {
  overflow: visible !important;
}

.phone-shell {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.phone-shell::before,
.phone-shell::after {
  background: transparent !important;
  box-shadow: none !important;
}

.phone-frame-custom {
  background: transparent !important;
}

.phone-screen .video-placeholder,
.phone-screen video {
  background-color: #000 !important;
}

.hero-visual > .results-medals {
  pointer-events: none !important;
}

.hero-visual > .results-medals .results-medal {
  pointer-events: auto !important;
  width: clamp(122px, 8.6vw, 150px) !important;
  min-height: 72px !important;
  border: 1px solid rgba(210, 244, 124, 0.42) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.17), rgba(255, 255, 255, 0.04)),
    rgba(26, 48, 28, 0.72) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22), 0 0 28px rgba(210, 244, 124, 0.1) !important;
}

.hero-visual > .results-medals .results-medal:nth-child(1) {
  left: clamp(-112px, -7vw, -64px) !important;
  top: 46% !important;
}

.hero-visual > .results-medals .results-medal:nth-child(2) {
  right: clamp(-126px, -8vw, -74px) !important;
  top: 21% !important;
}

.hero-visual > .results-medals .results-medal:nth-child(3) {
  right: clamp(-126px, -8vw, -74px) !important;
  bottom: 23% !important;
}

.trust-strip {
  padding-top: clamp(52px, 6vw, 86px) !important;
}

.trust-strip .trust-copy {
  margin-bottom: clamp(20px, 2.5vw, 34px) !important;
}

.trust-strip .trust-copy h2,
.trust-copy h2 {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: none !important;
  font-size: clamp(2.5rem, 5.2vw, 5.4rem) !important;
  line-height: 0.98 !important;
}

:root[data-theme="light"] .trust-strip .trust-copy h2,
:root[data-theme="light"] .trust-copy h2 {
  color: #050c0c !important;
  -webkit-text-fill-color: #050c0c !important;
}

.trust-strip .trust-copy p,
.trust-copy p {
  font-weight: 500 !important;
  max-width: 760px !important;
  margin-inline: auto !important;
}

.about .portrait-image {
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
}

.about .portrait-image img {
  width: 86% !important;
  height: 86% !important;
  max-width: 86% !important;
  max-height: 86% !important;
  object-fit: contain !important;
  object-position: center center !important;
}

.services::before,
.services::after,
.services .section-orbit,
.services .section-orbit::before,
.services .section-orbit::after,
.services [class*="float"],
.services [class*="tile"],
.services [class*="shape"],
.services [class*="geo"] {
  display: none !important;
  opacity: 0 !important;
  animation: none !important;
}

@media (max-width: 1180px) {
  .site-header .menu-toggle {
    display: inline-flex !important;
  }

  .site-header .desktop-nav,
  .site-header .header-actions > .button-small {
    display: none !important;
  }
}

@media (max-width: 760px) {
  .site-header {
    align-items: center !important;
    grid-template-columns: minmax(0, 1fr) auto auto auto !important;
  }

  .site-header .brand {
    min-width: 0 !important;
    overflow: visible !important;
  }

  .site-header .brand-logo-shell {
    min-width: 0 !important;
    width: clamp(136px, 45vw, 184px) !important;
    height: 38px !important;
  }

  .site-header.menu-open {
    align-items: start !important;
  }

  .hero-visual > .results-medals {
    width: min(100%, 380px) !important;
    max-width: 380px !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .hero-visual > .results-medals .results-medal,
  .hero-visual > .results-medals .results-medal:nth-child(1),
  .hero-visual > .results-medals .results-medal:nth-child(2),
  .hero-visual > .results-medals .results-medal:nth-child(3) {
    width: auto !important;
    min-height: 62px !important;
  }

  .trust-strip .trust-copy h2,
  .trust-copy h2 {
    font-size: clamp(2.25rem, 14vw, 3.8rem) !important;
  }

  .about .portrait-image img {
    width: 82% !important;
    height: 82% !important;
  }
}

.site-header .brand,
.site-header .brand-logo-shell,
.site-header .brand-wordmark {
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}

.site-header .brand-logo-shell::before,
.site-header .brand-logo-shell::after,
.brand-logo-shell::before,
.brand-logo-shell::after {
  content: none !important;
  display: none !important;
  background: transparent !important;
}

.site-header .brand-logo-shell {
  display: block !important;
  overflow: visible !important;
  min-width: 168px !important;
  width: clamp(168px, 15vw, 224px) !important;
  height: 44px !important;
}

.site-header .brand-wordmark {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: left center !important;
  transform: none !important;
}

:root[data-theme="light"] .site-header .brand-wordmark-dark {
  opacity: 1 !important;
}

:root[data-theme="light"] .site-header .brand-wordmark-light {
  opacity: 0 !important;
}

:root:not([data-theme]) .site-header .brand-wordmark-dark,
:root[data-theme="dark"] .site-header .brand-wordmark-dark {
  opacity: 0 !important;
}

:root:not([data-theme]) .site-header .brand-wordmark-light,
:root[data-theme="dark"] .site-header .brand-wordmark-light {
  opacity: 1 !important;
}

.site-header .mobile-nav {
  display: grid !important;
  grid-column: 1 / -1 !important;
  grid-template-rows: 0fr !important;
  max-height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.site-header.menu-open .mobile-nav {
  grid-template-rows: 1fr !important;
  max-height: 620px !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  margin-top: 10px !important;
}

.site-header .mobile-nav a {
  justify-content: center !important;
  text-align: center !important;
}

.site-header .mobile-nav a[href="#strategie"] {
  border-left: 0 !important;
}

.hero-visual > .results-medals .results-medal {
  width: clamp(116px, 8.2vw, 142px) !important;
  min-height: 70px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(12, 192, 223, 0.32) !important;
  background:
    linear-gradient(135deg, rgba(12, 192, 223, 0.18), rgba(255, 222, 89, 0.14)),
    rgba(7, 27, 24, 0.72) !important;
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(18px) !important;
}

.hero-visual > .results-medals .results-medal:nth-child(1) {
  left: clamp(-118px, -7.6vw, -70px) !important;
  top: 50% !important;
}

.hero-visual > .results-medals .results-medal:nth-child(2) {
  right: clamp(-128px, -8.2vw, -76px) !important;
  top: 20% !important;
}

.hero-visual > .results-medals .results-medal:nth-child(3) {
  right: clamp(-112px, -7.2vw, -62px) !important;
  bottom: 14% !important;
}

.hero-visual > .results-medals .results-medal strong {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-family: Fredoka, Inter, ui-sans-serif, system-ui, sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

.hero-visual > .results-medals .results-medal span {
  color: rgba(255, 255, 255, 0.74) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.74) !important;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
  font-weight: 700 !important;
}

.trust-strip .trust-copy h2,
.trust-copy h2 {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: none !important;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
  text-transform: none !important;
}

.trust-strip .trust-copy h2 .heading-accent,
.trust-copy h2 .heading-accent,
.about-panel h2 .heading-accent {
  font-family: Fredoka, Inter, ui-sans-serif, system-ui, sans-serif !important;
  background: linear-gradient(100deg, #0cc0df 0%, #76d8a7 52%, #ffde59 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

.about .portrait-image {
  display: grid !important;
  place-items: center !important;
}

.about .portrait-image img {
  width: 76% !important;
  height: 76% !important;
  max-width: 76% !important;
  max-height: 76% !important;
  object-fit: contain !important;
  object-position: center center !important;
}

.phone-screen,
.phone-screen .video-placeholder,
.phone-screen video {
  background-color: #000 !important;
}

@media (max-width: 760px) {
  .site-header .brand-logo-shell {
    min-width: 0 !important;
    width: clamp(136px, 45vw, 184px) !important;
    height: 38px !important;
  }

  .site-header.menu-open {
    align-items: start !important;
  }

  .hero-visual > .results-medals {
    width: min(100%, 380px) !important;
    max-width: 380px !important;
  }

  .hero-visual > .results-medals .results-medal,
  .hero-visual > .results-medals .results-medal:nth-child(1),
  .hero-visual > .results-medals .results-medal:nth-child(2),
  .hero-visual > .results-medals .results-medal:nth-child(3) {
    width: auto !important;
    min-height: 62px !important;
    position: relative !important;
    inset: auto !important;
  }

  .about .portrait-image img {
    width: 74% !important;
    height: 74% !important;
  }
}

.site-header {
  background:
    linear-gradient(135deg, rgba(12, 192, 223, 0.08), rgba(255, 222, 89, 0.04)),
    rgba(5, 20, 18, 0.68) !important;
  align-items: center !important;
}

:root[data-theme="light"] .site-header {
  background:
    linear-gradient(135deg, rgba(12, 192, 223, 0.08), rgba(255, 222, 89, 0.04)),
    rgba(255, 255, 255, 0.72) !important;
}

.site-header .brand {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  min-width: 0 !important;
}

.site-header .desktop-nav,
.site-header .header-actions {
  align-items: center !important;
}

.site-header .desktop-nav {
  justify-content: center !important;
  gap: clamp(22px, 3vw, 42px) !important;
}

.site-header .brand-logo-shell {
  display: block !important;
  flex: 0 0 auto !important;
  width: clamp(164px, 14vw, 208px) !important;
  height: 42px !important;
}

.site-header .brand-wordmark {
  display: block !important;
  opacity: 1;
}

.proof-grid {
  display: none !important;
}

.hero-visual > .results-medals {
  display: none !important;
}

.known-from-strip {
  gap: 13px !important;
}

.known-from-strip .hero-metrics {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  width: min(100%, 430px);
  margin-top: 4px;
}

.known-from-strip .hero-metrics article {
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid rgba(12, 192, 223, 0.28);
  border-radius: 8px;
  background:
    radial-gradient(circle at 80% 100%, rgba(12, 192, 223, 0.2), transparent 48%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.075), rgba(255, 222, 89, 0.08)),
    rgba(9, 29, 27, 0.68);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.11), 0 12px 26px rgba(0, 0, 0, 0.16);
}

.known-from-strip .hero-metrics strong {
  display: block;
  color: #fff;
  -webkit-text-fill-color: #fff;
  font-family: Fredoka, Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(1.08rem, 2.4vw, 1.45rem);
  line-height: 0.95;
  font-weight: 800;
  letter-spacing: 0;
}

.known-from-strip .hero-metrics span {
  display: block;
  margin-top: 5px;
  color: rgba(255, 255, 255, 0.74);
  -webkit-text-fill-color: rgba(255, 255, 255, 0.74);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 0.72rem;
  line-height: 1.12;
  font-weight: 800;
}

:root[data-theme="light"] .known-from-strip .hero-metrics article {
  background:
    radial-gradient(circle at 80% 100%, rgba(12, 192, 223, 0.18), transparent 48%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.84), rgba(255, 222, 89, 0.14)),
    rgba(255, 255, 255, 0.72);
}

:root[data-theme="light"] .known-from-strip .hero-metrics strong {
  color: #071312;
  -webkit-text-fill-color: #071312;
}

:root[data-theme="light"] .known-from-strip .hero-metrics span {
  color: rgba(7, 19, 18, 0.66);
  -webkit-text-fill-color: rgba(7, 19, 18, 0.66);
}

.about .portrait-image img {
  width: 94% !important;
  height: 94% !important;
  max-width: 94% !important;
  max-height: 94% !important;
  object-fit: contain !important;
  object-position: center center !important;
}

@media (max-width: 980px) {
  .site-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 10px !important;
    justify-items: stretch !important;
    align-items: center !important;
  }

  .site-header .brand {
    justify-content: flex-start !important;
    align-self: center !important;
  }

  .site-header .header-actions {
    justify-self: end !important;
    align-self: center !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }
}

@media (max-width: 760px) {
  .hero {
    display: flex !important;
    flex-direction: column !important;
  }

  .hero .hero-visual {
    order: 1 !important;
    width: 100% !important;
    margin-inline: auto !important;
  }

  .hero .known-from-strip-mobile {
    order: 2 !important;
    width: min(100%, 360px) !important;
    margin: 14px auto 18px !important;
  }

  .hero .hero-copy {
    order: 3 !important;
    width: min(100%, 360px) !important;
    margin-inline: auto !important;
  }

  .known-from-strip .hero-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .known-from-strip .hero-metrics article {
    min-height: 52px;
    padding: 8px 7px;
  }

  .known-from-strip .hero-metrics strong {
    font-size: clamp(1rem, 5.2vw, 1.22rem);
  }

  .known-from-strip .hero-metrics span {
    font-size: 0.64rem;
  }

  .site-header .brand-logo-shell {
    width: clamp(128px, 41vw, 164px) !important;
    height: 36px !important;
  }

  .site-header .mobile-nav {
    justify-items: stretch !important;
  }
}

.site-header,
:root[data-theme="dark"] .site-header,
:root:not([data-theme="light"]) .site-header,
:root[data-theme="light"] .site-header {
  position: sticky !important;
  top: max(14px, env(safe-area-inset-top)) !important;
  z-index: 1000 !important;
  width: min(100% - 32px, 1160px) !important;
  margin: max(14px, env(safe-area-inset-top)) auto 0 !important;
  min-height: 70px !important;
  padding: 12px 18px !important;
  display: grid !important;
  grid-template-columns: minmax(180px, 1fr) auto minmax(180px, 1fr) !important;
  align-items: center !important;
  gap: clamp(14px, 2.2vw, 30px) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 8px !important;
  background:
    radial-gradient(circle at 18% 20%, rgba(12, 192, 223, 0.18), transparent 42%),
    radial-gradient(circle at 88% 20%, rgba(255, 222, 89, 0.12), transparent 38%),
    linear-gradient(135deg, rgba(10, 45, 42, 0.78), rgba(7, 21, 20, 0.68)) !important;
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.18) !important;
  backdrop-filter: blur(18px) saturate(135%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(135%) !important;
}

:root[data-theme="light"] .site-header {
  border-color: rgba(3, 21, 22, 0.12) !important;
  background:
    radial-gradient(circle at 18% 20%, rgba(12, 192, 223, 0.12), transparent 42%),
    radial-gradient(circle at 88% 20%, rgba(255, 222, 89, 0.13), transparent 38%),
    linear-gradient(135deg, rgba(239, 252, 252, 0.84), rgba(245, 250, 247, 0.72)) !important;
}

.site-header .brand {
  width: auto !important;
  min-width: 0 !important;
  justify-self: start !important;
  align-self: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

.site-header .brand-logo-shell {
  position: relative !important;
  display: block !important;
  width: clamp(178px, 15vw, 218px) !important;
  height: 44px !important;
  min-width: 0 !important;
  flex: 0 0 auto !important;
  overflow: visible !important;
  transform: none !important;
}

.site-header .brand-logo-shell::before,
.site-header .brand-logo-shell::after {
  display: none !important;
}

.site-header .brand-wordmark {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: contain !important;
  object-position: left center !important;
  transform: none !important;
}

:root[data-theme="light"] .site-header .brand-wordmark-dark {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

:root[data-theme="light"] .site-header .brand-wordmark-light {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

:root[data-theme="dark"] .site-header .brand-wordmark-dark,
:root:not([data-theme="light"]) .site-header .brand-wordmark-dark {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

:root[data-theme="dark"] .site-header .brand-wordmark-light,
:root:not([data-theme="light"]) .site-header .brand-wordmark-light {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.site-header .desktop-nav {
  justify-self: center !important;
  align-self: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(18px, 2vw, 30px) !important;
  margin: 0 !important;
}

.site-header .desktop-nav a {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 34px !important;
  line-height: 1 !important;
}

.site-header .header-actions {
  justify-self: end !important;
  align-self: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
}

.site-header .lang-toggle,
.site-header .theme-toggle,
.site-header .menu-toggle,
.site-header .button-small {
  align-self: center !important;
}

.site-header .button-small::before,
.site-header .button-small::after,
.site-header .mobile-nav a[href="#strategie"]::before,
.site-header .mobile-nav a[href="#strategie"]::after {
  display: none !important;
}

.site-header .mobile-nav {
  position: absolute !important;
  top: calc(100% + 10px) !important;
  left: 12px !important;
  right: 12px !important;
  z-index: 1001 !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
  max-height: 0 !important;
  overflow: hidden !important;
  padding: 0 10px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  border: 1px solid rgba(255, 255, 255, 0.13) !important;
  border-radius: 8px !important;
  background:
    radial-gradient(circle at 20% 15%, rgba(12, 192, 223, 0.18), transparent 44%),
    linear-gradient(145deg, rgba(10, 44, 40, 0.96), rgba(7, 20, 19, 0.94)) !important;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28) !important;
  backdrop-filter: blur(18px) saturate(130%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(130%) !important;
  transition: max-height 220ms ease, opacity 180ms ease, padding 220ms ease !important;
}

:root[data-theme="light"] .site-header .mobile-nav {
  border-color: rgba(3, 21, 22, 0.13) !important;
  background:
    radial-gradient(circle at 20% 15%, rgba(12, 192, 223, 0.16), transparent 44%),
    linear-gradient(145deg, rgba(241, 253, 252, 0.96), rgba(246, 250, 247, 0.94)) !important;
}

.site-header.menu-open .mobile-nav {
  max-height: 440px !important;
  padding: 10px !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.site-header .mobile-nav a {
  display: flex !important;
  min-height: 42px !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(255, 255, 255, 0.13) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.045) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  text-align: center !important;
}

:root[data-theme="light"] .site-header .mobile-nav a {
  border-color: rgba(3, 21, 22, 0.12) !important;
  background: rgba(255, 255, 255, 0.72) !important;
  color: rgba(3, 21, 22, 0.88) !important;
}

.site-header .mobile-nav a[href="#strategie"] {
  color: #051515 !important;
  background: linear-gradient(100deg, #0cc0df, #8ee0a1 54%, #ffde59) !important;
  border-color: transparent !important;
  box-shadow: 0 12px 28px rgba(12, 192, 223, 0.22) !important;
}

.hero {
  grid-template-columns: minmax(420px, 0.95fr) minmax(300px, 0.85fr) !important;
  column-gap: clamp(56px, 8vw, 132px) !important;
  align-items: center !important;
}

.hero-copy {
  justify-self: start !important;
  width: min(100%, 620px) !important;
}

.hero-visual {
  justify-self: center !important;
  background: transparent !important;
}

.phone-shell {
  background: transparent !important;
  box-shadow: none !important;
}

.phone-shell::before,
.phone-shell::after {
  display: none !important;
}

.phone-screen video {
  background: #000 !important;
}

.phone-glow {
  pointer-events: none !important;
}

.proof-grid,
.hero-visual > .results-medals,
.trust-strip .results-medals {
  display: none !important;
}

.known-from-strip {
  width: min(100%, 490px) !important;
  align-items: center !important;
  gap: 12px !important;
  margin-top: 16px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.known-from-strip > span {
  font-size: 0.74rem !important;
  color: rgba(255, 255, 255, 0.66) !important;
  text-align: center !important;
}

:root[data-theme="light"] .known-from-strip > span {
  color: rgba(7, 19, 18, 0.62) !important;
}

.known-from-logos {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 9px !important;
  width: min(100%, 340px) !important;
  margin-inline: auto !important;
}

.known-from-logos img {
  width: 100% !important;
  height: 40px !important;
  max-width: none !important;
  object-fit: contain !important;
  padding: 7px 10px !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.94) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.14) !important;
  transition: transform 180ms ease, box-shadow 180ms ease !important;
}

.known-from-logos img:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 16px 30px rgba(12, 192, 223, 0.2) !important;
}

.known-from-strip .hero-metrics {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 9px !important;
  width: min(100%, 430px) !important;
  margin: 5px auto 0 !important;
}

.known-from-strip .hero-metrics article {
  min-height: 54px !important;
  padding: 9px 11px !important;
  border: 1px solid rgba(12, 192, 223, 0.26) !important;
  border-radius: 8px !important;
  background:
    radial-gradient(circle at 82% 105%, rgba(12, 192, 223, 0.22), transparent 48%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.075), rgba(255, 222, 89, 0.08)),
    rgba(11, 45, 41, 0.56) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.11), 0 12px 24px rgba(0, 0, 0, 0.12) !important;
}

.known-from-strip .hero-metrics article:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(255, 222, 89, 0.42) !important;
}

.known-from-strip .hero-metrics strong {
  font-family: Fredoka, Inter, ui-sans-serif, system-ui, sans-serif !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-size: clamp(1rem, 2vw, 1.28rem) !important;
  line-height: 0.96 !important;
  letter-spacing: 0 !important;
}

.known-from-strip .hero-metrics span {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
  color: rgba(255, 255, 255, 0.72) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.72) !important;
  font-size: 0.68rem !important;
  line-height: 1.1 !important;
}

:root[data-theme="light"] .known-from-strip .hero-metrics article {
  background:
    radial-gradient(circle at 82% 105%, rgba(12, 192, 223, 0.18), transparent 48%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(255, 222, 89, 0.13)),
    rgba(255, 255, 255, 0.76) !important;
}

:root[data-theme="light"] .known-from-strip .hero-metrics strong {
  color: #071312 !important;
  -webkit-text-fill-color: #071312 !important;
}

:root[data-theme="light"] .known-from-strip .hero-metrics span {
  color: rgba(7, 19, 18, 0.62) !important;
  -webkit-text-fill-color: rgba(7, 19, 18, 0.62) !important;
}

.trust-strip,
.logo-marquee,
.testimonials,
.services,
.about,
.cta {
  border-top: 0 !important;
  border-bottom: 0 !important;
}

.trust-copy p {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
  font-weight: 700 !important;
  color: var(--muted) !important;
}

.service-grid::before,
.service-grid::after,
.services::before,
.services::after {
  display: none !important;
}

.about .portrait-placeholder,
.about .portrait-image {
  overflow: hidden !important;
}

.about .portrait-image img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center center !important;
  border-radius: inherit !important;
}

.section-pad,
.trust-strip,
.services,
.about,
.cta {
  overflow-x: clip !important;
}

@media (max-width: 1180px) {
  .site-header,
  :root[data-theme="dark"] .site-header,
  :root:not([data-theme="light"]) .site-header,
  :root[data-theme="light"] .site-header {
    width: min(100% - 24px, 1040px) !important;
    grid-template-columns: minmax(160px, 0.8fr) auto minmax(150px, 0.8fr) !important;
  }

  .site-header .desktop-nav {
    gap: 18px !important;
  }
}

@media (max-width: 980px) {
  .site-header,
  :root[data-theme="dark"] .site-header,
  :root:not([data-theme="light"]) .site-header,
  :root[data-theme="light"] .site-header {
    grid-template-columns: minmax(0, 1fr) auto !important;
    min-height: 64px !important;
    padding: 10px 12px !important;
    gap: 10px !important;
  }

  .site-header .desktop-nav,
  .site-header .header-actions > .button-small {
    display: none !important;
  }

  .site-header .menu-toggle {
    display: inline-flex !important;
  }

  .site-header .brand-logo-shell {
    width: clamp(150px, 42vw, 186px) !important;
    height: 38px !important;
  }

  .site-header .header-actions {
    gap: 7px !important;
  }

  .hero {
    grid-template-columns: 1fr !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
    padding-top: 42px !important;
  }

  .hero .hero-visual {
    order: 1 !important;
    width: 100% !important;
    margin: 0 auto !important;
  }

  .hero .known-from-strip-mobile {
    order: 2 !important;
    display: flex !important;
    width: min(100%, 390px) !important;
    margin: 2px auto 10px !important;
  }

  .hero .known-from-strip-desktop {
    display: none !important;
  }

  .hero .hero-copy {
    order: 3 !important;
    width: min(100%, 390px) !important;
    margin: 0 auto !important;
    text-align: left !important;
  }

  .hero-title {
    text-align: left !important;
  }

  .hero-actions {
    width: 100% !important;
  }

  .known-from-strip .hero-metrics {
    width: min(100%, 360px) !important;
  }
}

@media (max-width: 560px) {
  .site-header,
  :root[data-theme="dark"] .site-header,
  :root:not([data-theme="light"]) .site-header,
  :root[data-theme="light"] .site-header {
    width: min(100% - 16px, 520px) !important;
    padding: 8px 8px !important;
    gap: 6px !important;
  }

  .site-header .brand-logo-shell {
    width: clamp(136px, 43vw, 166px) !important;
    height: 34px !important;
  }

  .site-header .lang-toggle,
  .site-header .theme-toggle,
  .site-header .menu-toggle {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    padding: 0 !important;
  }

  .site-header .mobile-nav {
    left: 8px !important;
    right: 8px !important;
  }

  .hero {
    padding-inline: 18px !important;
  }

  .known-from-logos {
    width: min(100%, 300px) !important;
    gap: 8px !important;
  }

  .known-from-logos img {
    height: 36px !important;
    padding: 6px 8px !important;
  }

  .known-from-strip .hero-metrics {
    gap: 7px !important;
    width: min(100%, 326px) !important;
  }

  .known-from-strip .hero-metrics article {
    min-height: 50px !important;
    padding: 8px 6px !important;
  }

  .known-from-strip .hero-metrics strong {
    font-size: clamp(0.95rem, 4.8vw, 1.16rem) !important;
  }

  .known-from-strip .hero-metrics span {
    font-size: 0.61rem !important;
  }
}

.site-header,
:root[data-theme="dark"] .site-header,
:root:not([data-theme="light"]) .site-header {
  background:
    radial-gradient(circle at 18% 22%, rgba(12, 192, 223, 0.18), transparent 44%),
    radial-gradient(circle at 88% 20%, rgba(255, 222, 89, 0.12), transparent 40%),
    linear-gradient(135deg, rgba(9, 54, 50, 0.76), rgba(7, 34, 31, 0.64)) !important;
}

.site-header .brand-logo-shell {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

.site-header .brand-wordmark {
  opacity: 1;
  min-width: 0 !important;
  object-fit: contain !important;
  object-position: left center !important;
}

.site-header .mobile-nav {
  background:
    radial-gradient(circle at 16% 10%, rgba(12, 192, 223, 0.16), transparent 42%),
    radial-gradient(circle at 90% 18%, rgba(255, 222, 89, 0.11), transparent 38%),
    linear-gradient(135deg, rgba(9, 54, 50, 0.93), rgba(7, 34, 31, 0.88)) !important;
}

:root[data-theme="light"] .site-header .mobile-nav {
  background:
    radial-gradient(circle at 16% 10%, rgba(12, 192, 223, 0.11), transparent 42%),
    radial-gradient(circle at 90% 18%, rgba(255, 222, 89, 0.12), transparent 38%),
    linear-gradient(135deg, rgba(238, 252, 252, 0.96), rgba(246, 250, 247, 0.92)) !important;
}

.site-header.menu-open .mobile-nav {
  pointer-events: auto !important;
}

.hero-visual > .results-medals,
.trust-strip .results-medals,
.proof-grid {
  display: none !important;
}

.trust-copy h2 {
  text-align: center !important;
}

.trust-copy p {
  max-width: 760px !important;
  margin-inline: auto !important;
  text-align: center !important;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
  font-size: clamp(1rem, 1.35vw, 1.18rem) !important;
  font-weight: 600 !important;
  line-height: 1.55 !important;
}

.about .portrait-image img {
  object-fit: contain !important;
  object-position: center center !important;
  padding: 0 !important;
}

.services .section-heading h2 {
  text-align: center !important;
}

@media (max-width: 980px) {
  .site-header,
  :root[data-theme="dark"] .site-header,
  :root:not([data-theme="light"]) .site-header,
  :root[data-theme="light"] .site-header {
    display: grid !important;
    grid-template-columns: minmax(130px, 1fr) auto !important;
    align-items: center !important;
  }

  .site-header .brand {
    justify-self: start !important;
    display: flex !important;
  }

  .site-header .brand-logo-shell {
    width: clamp(142px, 40vw, 188px) !important;
    height: 38px !important;
  }

  .site-header .header-actions {
    justify-self: end !important;
  }

  .site-header .mobile-nav {
    display: grid !important;
  }

  .hero .hero-visual {
    order: 1 !important;
  }

  .hero .known-from-strip-mobile {
    order: 2 !important;
  }

  .hero .hero-copy {
    order: 3 !important;
  }

  .known-from-strip {
    gap: 9px !important;
  }
}

@media (max-width: 430px) {
  .site-header,
  :root[data-theme="dark"] .site-header,
  :root:not([data-theme="light"]) .site-header,
  :root[data-theme="light"] .site-header {
    width: min(100% - 14px, 420px) !important;
    grid-template-columns: minmax(116px, 1fr) auto !important;
    padding: 8px 7px !important;
  }

  .site-header .brand-logo-shell {
    width: clamp(124px, 34vw, 148px) !important;
    height: 32px !important;
  }

  .site-header .header-actions {
    gap: 5px !important;
  }

  .site-header .lang-toggle,
  .site-header .theme-toggle,
  .site-header .menu-toggle {
    width: 39px !important;
    height: 39px !important;
    min-width: 39px !important;
  }

  .hero .hero-copy,
  .hero .known-from-strip-mobile {
    width: min(100%, 350px) !important;
  }
}

.site-header,
:root[data-theme="dark"] .site-header,
:root:not([data-theme="light"]) .site-header,
:root[data-theme="light"] .site-header {
  grid-template-columns: minmax(170px, 1fr) auto !important;
  align-items: center !important;
  background:
    radial-gradient(circle at 16% 18%, rgba(12, 192, 223, 0.14), transparent 42%),
    radial-gradient(circle at 88% 22%, rgba(255, 222, 89, 0.1), transparent 40%),
    linear-gradient(135deg, rgba(9, 54, 50, 0.68), rgba(7, 34, 31, 0.58)) !important;
}

.site-header .brand {
  align-self: center !important;
  justify-self: start !important;
  display: inline-flex !important;
  align-items: center !important;
}

.site-header .brand-logo-shell {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  overflow: visible !important;
  transform: none !important;
}

.site-header .brand-wordmark {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: left center !important;
}

.site-header .header-actions {
  justify-self: end !important;
  align-self: center !important;
  display: inline-flex !important;
  align-items: center !important;
}

.site-header .mobile-nav {
  display: grid !important;
  position: absolute !important;
  top: calc(100% + 10px) !important;
  left: auto !important;
  right: 18px !important;
  width: min(360px, calc(100vw - 32px)) !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
  padding: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 12px !important;
  background:
    radial-gradient(circle at 14% 14%, rgba(12, 192, 223, 0.16), transparent 44%),
    radial-gradient(circle at 92% 22%, rgba(255, 222, 89, 0.12), transparent 38%),
    linear-gradient(135deg, rgba(9, 54, 50, 0.95), rgba(7, 34, 31, 0.9)) !important;
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.28) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  max-height: 0 !important;
  overflow: hidden !important;
  transform: translateY(-8px) !important;
  transition: opacity 180ms ease, transform 180ms ease, max-height 180ms ease, padding 180ms ease !important;
  z-index: 50 !important;
}

:root[data-theme="light"] .site-header .mobile-nav {
  background:
    radial-gradient(circle at 14% 14%, rgba(12, 192, 223, 0.12), transparent 44%),
    radial-gradient(circle at 92% 22%, rgba(255, 222, 89, 0.14), transparent 38%),
    linear-gradient(135deg, rgba(240, 252, 252, 0.97), rgba(247, 250, 246, 0.93)) !important;
  box-shadow: 0 24px 56px rgba(8, 31, 29, 0.18) !important;
}

.site-header.menu-open .mobile-nav {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  max-height: 620px !important;
  padding: 10px !important;
  transform: translateY(0) !important;
}

.site-header .mobile-nav a {
  display: flex !important;
  min-height: 46px !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 9px !important;
  background: rgba(255, 255, 255, 0.055) !important;
  color: var(--text) !important;
  font-family: Fredoka, Inter, ui-sans-serif, system-ui, sans-serif !important;
  font-weight: 700 !important;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease !important;
}

.site-header .mobile-nav a:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(12, 192, 223, 0.52) !important;
  background:
    radial-gradient(circle at 18% 40%, rgba(12, 192, 223, 0.18), transparent 46%),
    rgba(255, 255, 255, 0.085) !important;
  box-shadow: 0 10px 22px rgba(12, 192, 223, 0.12) !important;
}

.site-header .mobile-nav a[href="#strategie"] {
  color: #06100f !important;
  background: linear-gradient(100deg, #0cc0df, #8ddfa3 55%, #ffde59) !important;
  border-color: transparent !important;
}

.site-header .mobile-nav a[href="#strategie"]::before,
.site-header .mobile-nav a[href="#strategie"]::after {
  display: none !important;
}

.known-from-strip > span {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}

.known-from-strip .hero-metrics {
  align-items: stretch !important;
}

.known-from-strip .hero-metrics article {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-align: center !important;
}

.known-from-strip .hero-metrics strong,
.known-from-strip .hero-metrics span {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  white-space: nowrap !important;
}

.known-from-strip .hero-metrics strong {
  font-size: clamp(1rem, 1.45vw, 1.22rem) !important;
  line-height: 1 !important;
}

.known-from-strip .hero-metrics span {
  font-size: clamp(0.58rem, 0.72vw, 0.66rem) !important;
  line-height: 1.05 !important;
  text-transform: uppercase !important;
  font-weight: 800 !important;
}

.about .portrait-placeholder,
.about .portrait-image {
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
}

.about .portrait-image img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: scale(0.92) !important;
  transform-origin: center center !important;
}

@media (max-width: 980px) {
  .site-header,
  :root[data-theme="dark"] .site-header,
  :root:not([data-theme="light"]) .site-header,
  :root[data-theme="light"] .site-header {
    grid-template-columns: minmax(126px, 1fr) auto !important;
  }

  .site-header .mobile-nav {
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
  }

  .hero-copy p {
    text-align: center !important;
  }
}

@media (max-width: 560px) {
  .site-header .brand {
    justify-self: center !important;
  }

  .site-header .brand-logo-shell {
    justify-content: center !important;
  }

  .site-header .brand-wordmark {
    object-position: center center !important;
  }

  .known-from-strip .hero-metrics article {
    min-height: 48px !important;
    padding-block: 7px !important;
  }

  .known-from-strip .hero-metrics strong {
    font-size: clamp(0.95rem, 4.3vw, 1.12rem) !important;
  }

  .known-from-strip .hero-metrics span {
    font-size: clamp(0.53rem, 2.35vw, 0.6rem) !important;
  }
}

:root[data-theme="light"] .site-header {
  background:
    radial-gradient(circle at 14% 12%, rgba(12, 192, 223, 0.10), transparent 42%),
    radial-gradient(circle at 88% 18%, rgba(255, 222, 89, 0.10), transparent 40%),
    linear-gradient(135deg, rgba(246, 253, 253, 0.90), rgba(248, 250, 246, 0.84)) !important;
  border-color: rgba(4, 28, 26, 0.12) !important;
  box-shadow: 0 18px 50px rgba(6, 32, 30, 0.12) !important;
}

.site-header {
  align-items: center !important;
}

.site-header .brand {
  align-self: center !important;
  justify-self: start !important;
  min-height: 46px !important;
  display: inline-flex !important;
  align-items: center !important;
}

.site-header .brand-logo-shell {
  height: 38px !important;
  width: clamp(158px, 13vw, 218px) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 0 !important;
}

.site-header .brand-wordmark {
  height: 100% !important;
  width: 100% !important;
  object-fit: contain !important;
  object-position: left center !important;
}

.known-from-strip {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.known-from-strip .hero-metrics {
  width: min(100%, 380px) !important;
  grid-template-columns: repeat(3, minmax(108px, 1fr)) !important;
  justify-content: center !important;
  gap: 8px !important;
}

.known-from-strip .hero-metrics article {
  min-width: 108px !important;
  min-height: 58px !important;
  padding: 8px 10px !important;
  overflow: visible !important;
}

.known-from-strip .hero-metrics strong {
  font-size: clamp(1rem, 1.16vw, 1.16rem) !important;
  line-height: 1.02 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
}

.known-from-strip .hero-metrics span {
  font-size: clamp(0.56rem, 0.62vw, 0.62rem) !important;
  line-height: 1.05 !important;
  letter-spacing: 0.06em !important;
  white-space: nowrap !important;
}

.about .portrait-image img {
  position: static !important;
  inset: auto !important;
  width: 88% !important;
  height: 88% !important;
  max-width: 88% !important;
  max-height: 88% !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
}

@media (min-width: 981px) {
  .known-from-strip.known-from-strip-desktop {
    width: min(100%, 410px) !important;
    margin-inline: auto !important;
  }

  .known-from-strip.known-from-strip-desktop .known-from-logos {
    width: min(100%, 342px) !important;
  }
}

@media (max-width: 980px) {
  .site-header .brand {
    justify-self: start !important;
    min-height: 44px !important;
  }

  .site-header .brand-logo-shell {
    justify-content: flex-start !important;
    width: clamp(138px, 35vw, 172px) !important;
    height: 36px !important;
    transform: translateY(-1px) !important;
  }

  .site-header .brand-wordmark {
    object-position: left center !important;
  }

  .mini-game-heading,
  .launch-game,
  .faq,
  .faq .section-heading,
  .faq-list,
  .contact-section,
  .contact-form,
  .site-footer,
  footer.site-footer {
    width: min(100%, 720px) !important;
    max-width: calc(100vw - 32px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    transform: none !important;
  }

  .mini-game-heading,
  .faq .section-heading,
  .contact-section .section-heading,
  .site-footer {
    text-align: center !important;
  }
}

@media (max-width: 560px) {
  .known-from-strip .hero-metrics {
    width: min(100%, 330px) !important;
    grid-template-columns: repeat(3, minmax(94px, 1fr)) !important;
    gap: 6px !important;
  }

  .known-from-strip .hero-metrics article {
    min-width: 94px !important;
    min-height: 52px !important;
    padding: 7px 6px !important;
  }

  .known-from-strip .hero-metrics strong {
    font-size: clamp(0.92rem, 4vw, 1.04rem) !important;
  }

  .known-from-strip .hero-metrics span {
    font-size: clamp(0.5rem, 2.1vw, 0.56rem) !important;
    letter-spacing: 0.045em !important;
  }

  .about .portrait-image img {
    width: 92% !important;
    height: 92% !important;
    max-width: 92% !important;
    max-height: 92% !important;
  }
}

html,
body {
  background:
    radial-gradient(circle at 18% 8%, rgba(12, 192, 223, 0.14), transparent 30%),
    radial-gradient(circle at 78% 18%, rgba(255, 222, 89, 0.10), transparent 34%),
    radial-gradient(circle at 50% 80%, rgba(35, 142, 122, 0.14), transparent 36%),
    #020c0b !important;
}

:root[data-theme="light"] body {
  background:
    radial-gradient(circle at 18% 8%, rgba(12, 192, 223, 0.13), transparent 32%),
    radial-gradient(circle at 78% 18%, rgba(255, 222, 89, 0.10), transparent 34%),
    radial-gradient(circle at 50% 82%, rgba(35, 142, 122, 0.10), transparent 38%),
    #f8fbf8 !important;
}

main,
.hero,
.section-pad,
.trust-strip,
.about,
.cta,
.faq {
  background-color: transparent !important;
}

.site-header,
:root[data-theme="dark"] .site-header,
:root:not([data-theme="light"]) .site-header {
  position: sticky !important;
  top: 14px !important;
  z-index: 100 !important;
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  align-items: center !important;
  min-height: 74px !important;
  padding: 14px 28px !important;
  background:
    radial-gradient(circle at 16% 8%, rgba(12, 192, 223, 0.12), transparent 38%),
    radial-gradient(circle at 88% 20%, rgba(255, 222, 89, 0.10), transparent 42%),
    linear-gradient(135deg, rgba(8, 38, 35, 0.84), rgba(5, 23, 21, 0.74)) !important;
  border-color: rgba(154, 239, 221, 0.18) !important;
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.24) !important;
}

:root[data-theme="light"] .site-header {
  background:
    radial-gradient(circle at 16% 8%, rgba(12, 192, 223, 0.14), transparent 38%),
    radial-gradient(circle at 88% 20%, rgba(255, 222, 89, 0.11), transparent 42%),
    linear-gradient(135deg, rgba(246, 253, 253, 0.92), rgba(250, 250, 245, 0.86)) !important;
  border-color: rgba(4, 28, 26, 0.12) !important;
  box-shadow: 0 18px 52px rgba(6, 32, 30, 0.12) !important;
}

.site-header .header-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
}

.site-header .brand {
  align-self: center !important;
  justify-self: start !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 0 !important;
  overflow: visible !important;
}

.site-header .brand-logo-shell {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: clamp(158px, 13vw, 218px) !important;
  height: 36px !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

.site-header .brand-wordmark {
  position: absolute !important;
  inset: 0 auto auto 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: left center !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: none !important;
  background: transparent !important;
}

:root[data-theme="light"] .site-header .brand-wordmark-dark,
:root:not([data-theme="light"]) .site-header .brand-wordmark-light,
:root[data-theme="dark"] .site-header .brand-wordmark-light {
  opacity: 1 !important;
  visibility: visible !important;
}

:root[data-theme="light"] .site-header .brand-wordmark-light,
:root:not([data-theme="light"]) .site-header .brand-wordmark-dark,
:root[data-theme="dark"] .site-header .brand-wordmark-dark {
  opacity: 0 !important;
  visibility: hidden !important;
}

.site-header .mobile-nav {
  position: absolute !important;
  top: calc(100% + 10px) !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  padding: 12px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(-8px) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(12, 192, 223, 0.13), transparent 42%),
    linear-gradient(135deg, rgba(8, 34, 31, 0.94), rgba(7, 19, 18, 0.92)) !important;
  border: 1px solid rgba(154, 239, 221, 0.18) !important;
  border-radius: 12px !important;
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.28) !important;
}

:root[data-theme="light"] .site-header .mobile-nav {
  background:
    radial-gradient(circle at 18% 0%, rgba(12, 192, 223, 0.13), transparent 42%),
    linear-gradient(135deg, rgba(250, 253, 252, 0.96), rgba(241, 248, 244, 0.94)) !important;
  border-color: rgba(4, 28, 26, 0.12) !important;
}

.site-header.menu-open .mobile-nav {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

.site-header .mobile-nav a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 48px !important;
  padding: 12px 10px !important;
  border-radius: 10px !important;
  text-align: center !important;
  color: var(--text) !important;
  background: rgba(255, 255, 255, 0.045) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease !important;
}

:root[data-theme="light"] .site-header .mobile-nav a {
  background: rgba(3, 20, 19, 0.045) !important;
  border-color: rgba(3, 20, 19, 0.10) !important;
}

.site-header .mobile-nav a:hover,
.site-header .mobile-nav a:focus-visible {
  transform: translateY(-2px) !important;
  border-color: rgba(12, 192, 223, 0.55) !important;
  background: rgba(12, 192, 223, 0.11) !important;
}

.site-header .mobile-nav a[href="#strategie"] {
  color: #02100f !important;
  background: linear-gradient(135deg, var(--cyan), var(--mint), var(--yellow)) !important;
  border-color: transparent !important;
}

.hero-visual,
.hero-visual::before,
.hero-visual::after,
.phone-glow,
.phone-shell,
.phone-shell::before,
.phone-shell::after,
.phone-frame-custom {
  background-color: transparent !important;
  box-shadow: none !important;
}

.phone-glow {
  background:
    radial-gradient(circle at 52% 46%, rgba(12, 192, 223, 0.18), transparent 42%),
    radial-gradient(circle at 58% 62%, rgba(255, 222, 89, 0.11), transparent 44%) !important;
}

.known-from-strip.known-from-strip-desktop {
  display: flex !important;
}

.known-from-strip > span {
  font-family: var(--font-body) !important;
  font-size: 0.76rem !important;
  line-height: 1.2 !important;
  letter-spacing: 0.08em !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
}

.known-from-strip .hero-metrics {
  width: min(100%, 392px) !important;
  grid-template-columns: repeat(3, minmax(116px, 1fr)) !important;
  gap: 8px !important;
}

.known-from-strip .hero-metrics article {
  min-width: 116px !important;
  min-height: 56px !important;
  padding: 8px 10px !important;
  overflow: visible !important;
}

.known-from-strip .hero-metrics strong {
  font-size: clamp(1rem, 1.08vw, 1.16rem) !important;
  line-height: 1.02 !important;
}

.known-from-strip .hero-metrics span {
  font-size: clamp(0.55rem, 0.62vw, 0.64rem) !important;
  line-height: 1.06 !important;
  letter-spacing: 0.055em !important;
}

.trust-strip .trust-copy,
.trust-copy.section-heading {
  width: min(100%, 1180px) !important;
  max-width: calc(100vw - 40px) !important;
  margin-inline: auto !important;
  overflow: visible !important;
  text-align: center !important;
}

.trust-strip .trust-copy h2,
.trust-copy.section-heading h2 {
  width: 100% !important;
  max-width: 100% !important;
  overflow: visible !important;
  text-align: center !important;
}

.about .portrait-placeholder,
.about .portrait-image {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  border-radius: 50% !important;
  isolation: isolate !important;
}

.about .portrait-image img {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: 96% !important;
  height: 96% !important;
  max-width: 96% !important;
  max-height: 96% !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: translate(-50%, -50%) !important;
  transform-origin: center center !important;
}

@media (max-width: 980px) {
  .site-header,
  :root[data-theme="dark"] .site-header,
  :root:not([data-theme="light"]) .site-header,
  :root[data-theme="light"] .site-header {
    grid-template-columns: 1fr auto !important;
    min-height: 68px !important;
    padding: 12px 14px !important;
  }

  .site-header .brand {
    justify-self: start !important;
    height: 42px !important;
    min-height: 42px !important;
  }

  .site-header .brand-logo-shell {
    width: clamp(142px, 40vw, 178px) !important;
    height: 34px !important;
  }

  .site-header .header-actions {
    gap: 8px !important;
  }

  .site-header .mobile-nav {
    grid-template-columns: 1fr !important;
  }

  .known-from-strip.known-from-strip-desktop {
    display: flex !important;
    order: 3 !important;
    width: min(100%, 350px) !important;
    margin: 10px auto 0 !important;
  }

  .known-from-strip.known-from-strip-desktop > span {
    display: none !important;
  }

  .hero .known-from-strip-mobile {
    display: none !important;
  }

  .known-from-strip .known-from-logos {
    width: min(100%, 330px) !important;
  }

  .known-from-strip .hero-metrics {
    width: min(100%, 330px) !important;
    grid-template-columns: repeat(3, minmax(96px, 1fr)) !important;
    gap: 6px !important;
  }

  .known-from-strip .hero-metrics article {
    min-width: 96px !important;
    min-height: 52px !important;
    padding: 7px 6px !important;
  }

  .known-from-strip .hero-metrics strong {
    font-size: clamp(0.94rem, 4.1vw, 1.06rem) !important;
  }

  .known-from-strip .hero-metrics span {
    font-size: clamp(0.5rem, 2.15vw, 0.58rem) !important;
    letter-spacing: 0.04em !important;
  }

  .mini-game-heading,
  .launch-game,
  .mission-control,
  .faq,
  .faq .section-heading,
  .faq-list,
  .contact-section,
  .contact-form,
  .site-footer,
  footer.site-footer {
    width: min(100%, 720px) !important;
    max-width: calc(100vw - 32px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    transform: none !important;
  }

  .faq-list,
  .faq-item,
  .contact-form {
    justify-self: center !important;
  }

  .trust-strip .trust-copy,
  .trust-copy.section-heading {
    max-width: calc(100vw - 32px) !important;
  }

  .trust-strip .trust-copy h2,
  .trust-copy.section-heading h2 {
    font-size: clamp(2.15rem, 10vw, 3.45rem) !important;
    line-height: 0.98 !important;
    padding-inline: 2px !important;
  }
}

@media (max-width: 560px) {
  .site-header,
  :root[data-theme="dark"] .site-header,
  :root:not([data-theme="light"]) .site-header,
  :root[data-theme="light"] .site-header {
    width: calc(100vw - 24px) !important;
    padding: 10px 12px !important;
  }

  .site-header .brand {
    justify-self: start !important;
  }

  .site-header .brand-logo-shell {
    width: clamp(132px, 42vw, 164px) !important;
    height: 32px !important;
  }

  .site-header .lang-toggle,
  .site-header .theme-toggle,
  .site-header .menu-toggle {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
  }

  .known-from-strip.known-from-strip-desktop {
    width: min(100%, 322px) !important;
  }

  .known-from-strip .known-from-logos,
  .known-from-strip .hero-metrics {
    width: min(100%, 322px) !important;
  }

  .known-from-strip .hero-metrics {
    grid-template-columns: repeat(3, minmax(90px, 1fr)) !important;
  }

  .known-from-strip .hero-metrics article {
    min-width: 90px !important;
  }

  .known-from-strip .hero-metrics strong {
    font-size: clamp(0.88rem, 3.9vw, 1rem) !important;
  }

  .known-from-strip .hero-metrics span {
    font-size: clamp(0.48rem, 2vw, 0.54rem) !important;
    letter-spacing: 0.035em !important;
  }

  .about .portrait-image img {
    width: 97% !important;
    height: 97% !important;
    max-width: 97% !important;
    max-height: 97% !important;
  }
}

html:not([data-theme]),
html[data-theme="dark"] {
  color-scheme: dark !important;
}

body {
  overflow-x: hidden !important;
  background:
    radial-gradient(circle at 22% 18%, rgba(12, 192, 223, 0.18), transparent 34rem),
    radial-gradient(circle at 78% 32%, rgba(255, 222, 89, 0.13), transparent 36rem),
    linear-gradient(135deg, #020b0b 0%, #051817 46%, #07120f 100%) !important;
}

:root[data-theme="light"] body {
  background:
    radial-gradient(circle at 18% 12%, rgba(12, 192, 223, 0.16), transparent 34rem),
    radial-gradient(circle at 78% 28%, rgba(255, 222, 89, 0.13), transparent 36rem),
    linear-gradient(135deg, #f8fbfa 0%, #eefafa 52%, #fbfaf1 100%) !important;
}

.section-pad,
.hero,
.trust-strip,
.services-section,
.process-section,
.about,
.faq,
.contact-section {
  background-color: transparent !important;
}

.site-header,
:root[data-theme="dark"] .site-header,
:root:not([data-theme="light"]) .site-header {
  position: sticky !important;
  top: 18px !important;
  z-index: 200 !important;
  width: min(calc(100vw - 40px), 1120px) !important;
  min-height: 72px !important;
  margin: 18px auto 0 !important;
  padding: 14px 26px !important;
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  align-items: center !important;
  gap: 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 12px !important;
  background:
    radial-gradient(circle at 12% 50%, rgba(12, 192, 223, 0.13), transparent 22rem),
    linear-gradient(135deg, rgba(4, 18, 17, 0.92), rgba(7, 26, 22, 0.86)) !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.24) !important;
  backdrop-filter: blur(18px) !important;
}

:root[data-theme="light"] .site-header {
  border-color: rgba(4, 18, 17, 0.12) !important;
  background:
    radial-gradient(circle at 12% 50%, rgba(12, 192, 223, 0.13), transparent 22rem),
    linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(241, 250, 248, 0.88)) !important;
  box-shadow: 0 18px 48px rgba(5, 25, 24, 0.08) !important;
}

.site-header .brand {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  align-self: center !important;
  justify-self: start !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  line-height: 1 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.site-header .brand::before,
.site-header .brand::after,
.site-header .brand-logo-shell::before,
.site-header .brand-logo-shell::after,
.brand-logo-shell::before,
.brand-logo-shell::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

.site-header .brand-logo-shell {
  position: relative !important;
  display: block !important;
  flex: 0 0 auto !important;
  width: clamp(178px, 13vw, 218px) !important;
  height: 40px !important;
  min-height: 40px !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

.site-header .brand-wordmark {
  position: absolute !important;
  top: 50% !important;
  left: 0 !important;
  right: auto !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: contain !important;
  object-position: left center !important;
  transform: translateY(-50%) !important;
  max-width: none !important;
  max-height: none !important;
  filter: none !important;
}

:root:not([data-theme="light"]) .site-header .brand-wordmark-light,
:root[data-theme="dark"] .site-header .brand-wordmark-light {
  opacity: 1 !important;
  visibility: visible !important;
}

:root:not([data-theme="light"]) .site-header .brand-wordmark-dark,
:root[data-theme="dark"] .site-header .brand-wordmark-dark {
  opacity: 0 !important;
  visibility: hidden !important;
}

:root[data-theme="light"] .site-header .brand-wordmark-dark {
  opacity: 1 !important;
  visibility: visible !important;
}

:root[data-theme="light"] .site-header .brand-wordmark-light {
  opacity: 0 !important;
  visibility: hidden !important;
}

.site-header .header-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  margin: 0 !important;
}

.site-header .mobile-nav {
  position: absolute !important;
  top: calc(100% + 10px) !important;
  right: 0 !important;
  left: auto !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(180px, 1fr)) !important;
  width: min(520px, calc(100vw - 32px)) !important;
  padding: 10px !important;
  gap: 8px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  background: linear-gradient(135deg, rgba(5, 18, 17, 0.96), rgba(11, 35, 29, 0.94)) !important;
  box-shadow: 0 22px 52px rgba(0, 0, 0, 0.34) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(-8px) !important;
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease !important;
  z-index: 250 !important;
}

:root[data-theme="light"] .site-header .mobile-nav {
  border-color: rgba(4, 18, 17, 0.14) !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(238, 249, 246, 0.96)) !important;
  box-shadow: 0 22px 52px rgba(8, 32, 30, 0.14) !important;
}

.site-header .mobile-nav a {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 48px !important;
  padding: 12px 14px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: rgba(255, 255, 255, 0.045) !important;
  color: var(--text-primary) !important;
  text-decoration: none !important;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease !important;
}

:root[data-theme="light"] .site-header .mobile-nav a {
  background: rgba(5, 22, 20, 0.045) !important;
  border-color: rgba(5, 22, 20, 0.1) !important;
}

.site-header .mobile-nav a:hover,
.site-header .mobile-nav a:focus-visible {
  transform: translateY(-1px) !important;
  border-color: rgba(12, 192, 223, 0.58) !important;
  background: rgba(12, 192, 223, 0.12) !important;
}

.site-header .mobile-nav a[href="#strategie"] {
  color: #02110f !important;
  background: linear-gradient(90deg, #0cc0df, #ffde59) !important;
  border-color: transparent !important;
  box-shadow: 0 12px 30px rgba(12, 192, 223, 0.2) !important;
}

.hero-copy .proof-grid,
.hero-visual > .results-medals,
.known-from-strip.known-from-strip-mobile {
  display: none !important;
}

.known-from-strip.known-from-strip-desktop {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: min(100%, 380px) !important;
  margin: 14px auto 0 !important;
  order: initial !important;
}

.known-from-strip > span {
  display: block !important;
  font-family: var(--font-body) !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
}

.known-from-strip .known-from-logos {
  width: min(100%, 330px) !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(86px, 1fr)) !important;
  gap: 8px !important;
}

.known-from-strip .hero-metrics {
  width: min(100%, 350px) !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(104px, 1fr)) !important;
  gap: 8px !important;
}

.known-from-strip .hero-metrics article {
  min-width: 104px !important;
  min-height: 58px !important;
  padding: 8px 9px !important;
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
  gap: 3px !important;
  overflow: visible !important;
  border-radius: 8px !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(12, 192, 223, 0.12)) !important;
  border: 1px solid rgba(12, 192, 223, 0.36) !important;
}

.known-from-strip .hero-metrics strong,
.known-from-strip .hero-metrics span {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  color: var(--text-primary) !important;
}

.known-from-strip .hero-metrics strong {
  font-family: var(--font-display) !important;
  font-size: clamp(1rem, 0.95vw, 1.12rem) !important;
  line-height: 1 !important;
}

.known-from-strip .hero-metrics span {
  font-family: var(--font-body) !important;
  font-size: 0.55rem !important;
  line-height: 1.05 !important;
  letter-spacing: 0.055em !important;
  text-transform: uppercase !important;
}

.hero-visual,
.hero-visual::before,
.hero-visual::after,
.phone-shell,
.phone-shell::before,
.phone-shell::after {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

.phone-frame-custom {
  background: transparent !important;
  box-shadow: none !important;
}

.trust-strip .trust-copy h2,
.trust-copy.section-heading h2 {
  text-align: center !important;
  text-wrap: balance !important;
  overflow: visible !important;
}

.about .portrait-placeholder,
.about .portrait-image {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
}

.about .portrait-image img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  transform: none !important;
  z-index: 1 !important;
}

@media (max-width: 980px) {
  .site-header,
  :root[data-theme="dark"] .site-header,
  :root:not([data-theme="light"]) .site-header,
  :root[data-theme="light"] .site-header {
    width: calc(100vw - 24px) !important;
    min-height: 66px !important;
    grid-template-columns: auto auto !important;
    justify-content: space-between !important;
    padding: 10px 12px !important;
    gap: 10px !important;
  }

  .site-header .brand {
    height: 42px !important;
    min-height: 42px !important;
  }

  .site-header .brand-logo-shell {
    width: clamp(136px, 42vw, 172px) !important;
    height: 34px !important;
    min-height: 34px !important;
  }

  .site-header .header-actions {
    gap: 7px !important;
  }

  .site-header .lang-toggle,
  .site-header .theme-toggle,
  .site-header .menu-toggle {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
  }

  .site-header .mobile-nav {
    left: 0 !important;
    right: 0 !important;
    grid-template-columns: 1fr !important;
    width: min(100%, calc(100vw - 24px)) !important;
    margin-inline: auto !important;
  }

  .hero .known-from-strip.known-from-strip-desktop {
    display: flex !important;
    width: min(100%, 326px) !important;
    margin: 12px auto 0 !important;
  }

  .hero .known-from-strip.known-from-strip-desktop > span {
    display: none !important;
  }

  .known-from-strip .known-from-logos,
  .known-from-strip .hero-metrics {
    width: min(100%, 322px) !important;
  }

  .known-from-strip .known-from-logos {
    grid-template-columns: repeat(3, minmax(88px, 1fr)) !important;
  }

  .known-from-strip .hero-metrics {
    grid-template-columns: repeat(3, minmax(90px, 1fr)) !important;
    gap: 6px !important;
  }

  .known-from-strip .hero-metrics article {
    min-width: 90px !important;
    min-height: 54px !important;
    padding: 7px 6px !important;
  }

  .known-from-strip .hero-metrics strong {
    font-size: clamp(0.9rem, 3.8vw, 1rem) !important;
  }

  .known-from-strip .hero-metrics span {
    font-size: clamp(0.48rem, 1.9vw, 0.54rem) !important;
    letter-spacing: 0.035em !important;
  }

  .mini-game-heading,
  .launch-game,
  .mission-control,
  .faq,
  .faq .section-heading,
  .faq-list,
  .contact-section,
  .contact-section .section-heading,
  .contact-form,
  .site-footer,
  footer.site-footer {
    width: min(100%, 720px) !important;
    max-width: calc(100vw - 32px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    transform: none !important;
  }

  .faq-list,
  .faq-item,
  .contact-form {
    justify-self: center !important;
  }

  .trust-strip .trust-copy,
  .trust-copy.section-heading {
    max-width: calc(100vw - 32px) !important;
    margin-inline: auto !important;
    padding-inline: 8px !important;
    text-align: center !important;
  }

  .trust-strip .trust-copy h2,
  .trust-copy.section-heading h2 {
    font-size: clamp(2.05rem, 9.2vw, 3.25rem) !important;
    line-height: 0.98 !important;
    padding-inline: 4px !important;
  }

  .about .portrait-image img {
    object-fit: cover !important;
    object-position: center center !important;
  }
}

.site-header,
:root[data-theme="dark"] .site-header,
:root:not([data-theme="light"]) .site-header {
  position: sticky !important;
  top: max(14px, env(safe-area-inset-top)) !important;
  z-index: 1000 !important;
  width: min(100% - 32px, 1160px) !important;
  min-height: 72px !important;
  margin: max(14px, env(safe-area-inset-top)) auto 0 !important;
  padding: 12px 18px !important;
  display: grid !important;
  grid-template-columns: minmax(190px, 1fr) auto !important;
  align-items: center !important;
  gap: 16px !important;
  border-radius: 8px !important;
  background:
    radial-gradient(circle at 18% 22%, rgba(12, 192, 223, 0.18), transparent 44%),
    radial-gradient(circle at 88% 18%, rgba(255, 222, 89, 0.12), transparent 40%),
    linear-gradient(135deg, rgba(8, 52, 48, 0.74), rgba(7, 34, 31, 0.66)) !important;
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.18) !important;
}

:root[data-theme="light"] .site-header {
  border-color: rgba(3, 21, 22, 0.12) !important;
  background:
    radial-gradient(circle at 18% 22%, rgba(12, 192, 223, 0.12), transparent 44%),
    radial-gradient(circle at 88% 18%, rgba(255, 222, 89, 0.13), transparent 40%),
    linear-gradient(135deg, rgba(239, 252, 252, 0.86), rgba(247, 250, 246, 0.78)) !important;
  box-shadow: 0 18px 46px rgba(3, 21, 22, 0.08) !important;
}

.site-header .brand {
  justify-self: start !important;
  align-self: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  height: 48px !important;
  min-height: 48px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.site-header .brand::before,
.site-header .brand::after,
.site-header .brand-logo-shell::before,
.site-header .brand-logo-shell::after,
.brand-logo-shell::before,
.brand-logo-shell::after {
  content: none !important;
  display: none !important;
  background: none !important;
  box-shadow: none !important;
}

.site-header .brand-logo-shell {
  position: relative !important;
  display: block !important;
  width: clamp(176px, 13vw, 218px) !important;
  height: 42px !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  background: none !important;
  box-shadow: none !important;
  transform: none !important;
}

.site-header .brand-wordmark {
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: contain !important;
  object-position: left center !important;
  transform: translateY(-50%) !important;
  background: transparent !important;
}

:root[data-theme="light"] .site-header .brand-wordmark-dark,
:root:not([data-theme="light"]) .site-header .brand-wordmark-light,
:root[data-theme="dark"] .site-header .brand-wordmark-light {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

:root[data-theme="light"] .site-header .brand-wordmark-light,
:root:not([data-theme="light"]) .site-header .brand-wordmark-dark,
:root[data-theme="dark"] .site-header .brand-wordmark-dark {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

.site-header .header-actions {
  justify-self: end !important;
  align-self: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  margin: 0 !important;
}

.site-header .mobile-nav {
  position: absolute !important;
  top: calc(100% + 10px) !important;
  right: 0 !important;
  left: auto !important;
  z-index: 1001 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(170px, 1fr)) !important;
  width: min(520px, calc(100vw - 32px)) !important;
  gap: 8px !important;
  padding: 10px !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(-8px) !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.13) !important;
  background:
    radial-gradient(circle at 18% 14%, rgba(12, 192, 223, 0.18), transparent 44%),
    radial-gradient(circle at 92% 18%, rgba(255, 222, 89, 0.11), transparent 38%),
    linear-gradient(145deg, rgba(9, 54, 50, 0.95), rgba(7, 28, 27, 0.92)) !important;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28) !important;
  max-height: none !important;
  overflow: visible !important;
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease !important;
}

:root[data-theme="light"] .site-header .mobile-nav {
  border-color: rgba(3, 21, 22, 0.13) !important;
  background:
    radial-gradient(circle at 18% 14%, rgba(12, 192, 223, 0.12), transparent 44%),
    radial-gradient(circle at 92% 18%, rgba(255, 222, 89, 0.13), transparent 38%),
    linear-gradient(145deg, rgba(241, 253, 252, 0.96), rgba(246, 250, 247, 0.94)) !important;
  box-shadow: 0 18px 40px rgba(3, 21, 22, 0.12) !important;
}

.site-header.menu-open .mobile-nav {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: none !important;
}

.site-header .mobile-nav a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 44px !important;
  padding: 10px 12px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.13) !important;
  background: rgba(255, 255, 255, 0.045) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  text-align: center !important;
  line-height: 1.1 !important;
}

.site-header .mobile-nav a:hover,
.site-header .mobile-nav a:focus-visible {
  transform: translateY(-2px) !important;
  border-color: rgba(12, 192, 223, 0.55) !important;
  background: rgba(12, 192, 223, 0.12) !important;
  box-shadow: 0 12px 24px rgba(12, 192, 223, 0.16) !important;
}

:root[data-theme="light"] .site-header .mobile-nav a {
  color: rgba(3, 21, 22, 0.88) !important;
  background: rgba(255, 255, 255, 0.74) !important;
  border-color: rgba(3, 21, 22, 0.12) !important;
}

.site-header .mobile-nav a[href="#strategie"] {
  color: #041413 !important;
  background: linear-gradient(100deg, #0cc0df, #8ee0a1 54%, #ffde59) !important;
  border-color: transparent !important;
  box-shadow: 0 12px 28px rgba(12, 192, 223, 0.22) !important;
}

.proof-grid,
.known-from-strip.known-from-strip-mobile,
.hero-visual > .results-medals,
.trust-strip .results-medals {
  display: none !important;
}

.known-from-strip.known-from-strip-desktop {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: min(100%, 390px) !important;
  margin: 14px auto 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.known-from-strip.known-from-strip-desktop > span {
  display: block !important;
  font-family: var(--font-body) !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  color: var(--text-muted) !important;
}

.known-from-strip .known-from-logos {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  width: min(100%, 330px) !important;
  gap: 8px !important;
  margin-inline: auto !important;
}

.known-from-strip .known-from-logos img {
  width: 100% !important;
  height: 38px !important;
  object-fit: contain !important;
  padding: 6px 9px !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.94) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
}

.known-from-strip .hero-metrics {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(108px, 1fr)) !important;
  width: min(100%, 370px) !important;
  gap: 8px !important;
  margin: 4px auto 0 !important;
}

.known-from-strip .hero-metrics article {
  min-width: 108px !important;
  min-height: 58px !important;
  padding: 8px 8px !important;
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
  gap: 3px !important;
  overflow: visible !important;
  border-radius: 8px !important;
  border: 1px solid rgba(12, 192, 223, 0.34) !important;
  background:
    radial-gradient(circle at 82% 105%, rgba(12, 192, 223, 0.2), transparent 48%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 222, 89, 0.08)),
    rgba(11, 45, 41, 0.56) !important;
}

.known-from-strip .hero-metrics strong {
  font-family: var(--font-display) !important;
  font-size: 1.06rem !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

.known-from-strip .hero-metrics span {
  font-family: var(--font-body) !important;
  font-size: 0.56rem !important;
  line-height: 1.05 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

.hero-visual,
.hero-visual::before,
.hero-visual::after,
.phone-shell,
.phone-shell::before,
.phone-shell::after,
.phone-frame-custom {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

.hero-visual::before,
.hero-visual::after,
.phone-shell::before,
.phone-shell::after {
  content: none !important;
  display: none !important;
}

.phone-screen,
.phone-screen video {
  background: #000 !important;
}

.about .portrait-image {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
}

.about .portrait-image img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
  background: #020807 !important;
}

@media (max-width: 980px) {
  .site-header,
  :root[data-theme="dark"] .site-header,
  :root:not([data-theme="light"]) .site-header,
  :root[data-theme="light"] .site-header {
    width: calc(100vw - 24px) !important;
    min-height: 66px !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    padding: 10px 12px !important;
    gap: 8px !important;
  }

  .site-header .brand {
    height: 42px !important;
    min-height: 42px !important;
  }

  .site-header .brand-logo-shell {
    width: clamp(136px, 42vw, 172px) !important;
    height: 34px !important;
    min-height: 34px !important;
  }

  .site-header .header-actions {
    gap: 7px !important;
  }

  .site-header .lang-toggle,
  .site-header .theme-toggle,
  .site-header .menu-toggle {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
  }

  .site-header .mobile-nav {
    left: 0 !important;
    right: 0 !important;
    width: min(100%, calc(100vw - 24px)) !important;
    grid-template-columns: 1fr !important;
    margin-inline: auto !important;
  }

  .hero .known-from-strip.known-from-strip-desktop {
    display: flex !important;
    width: min(100%, 326px) !important;
    margin: 12px auto 0 !important;
  }

  .hero .known-from-strip.known-from-strip-desktop > span {
    display: none !important;
  }

  .known-from-strip .known-from-logos,
  .known-from-strip .hero-metrics {
    width: min(100%, 322px) !important;
  }

  .known-from-strip .known-from-logos {
    grid-template-columns: repeat(3, minmax(86px, 1fr)) !important;
  }

  .known-from-strip .hero-metrics {
    grid-template-columns: repeat(3, minmax(92px, 1fr)) !important;
    gap: 6px !important;
  }

  .known-from-strip .hero-metrics article {
    min-width: 92px !important;
    min-height: 54px !important;
    padding: 7px 5px !important;
  }

  .known-from-strip .hero-metrics strong {
    font-size: clamp(0.86rem, 3.8vw, 0.98rem) !important;
  }

  .known-from-strip .hero-metrics span {
    font-size: clamp(0.48rem, 1.9vw, 0.53rem) !important;
    letter-spacing: 0.03em !important;
  }

  .mini-game-heading,
  .launch-game,
  .mission-control,
  .faq,
  .faq .section-heading,
  .faq-list,
  .faq-item,
  .contact-section,
  .contact-section .section-heading,
  .contact-form,
  .site-footer,
  footer.site-footer {
    width: min(100%, 720px) !important;
    max-width: calc(100vw - 32px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    transform: none !important;
    justify-self: center !important;
  }
}

@media (max-width: 380px) {
  .known-from-strip .hero-metrics strong {
    font-size: 0.8rem !important;
  }

  .known-from-strip .hero-metrics span {
    font-size: 0.45rem !important;
  }

  .known-from-strip .hero-metrics article {
    min-width: 0 !important;
    padding-inline: 3px !important;
  }
}


/* ---- from: zz-publish-lock.css ---- */

.site-header,
:root[data-theme="dark"] .site-header,
:root:not([data-theme="light"]) .site-header {
  align-items: center !important;
  background:
    radial-gradient(circle at 12% 18%, rgba(12, 192, 223, 0.12), transparent 42%),
    radial-gradient(circle at 88% 18%, rgba(255, 222, 89, 0.10), transparent 44%),
    rgba(6, 32, 29, 0.82) !important;
}

.site-header,
:root[data-theme="dark"] .site-header,
:root:not([data-theme="light"]) .site-header {
  display: flex !important;
  align-items: center !important;
  background:
    radial-gradient(circle at 14% 50%, rgba(12, 192, 223, 0.15), transparent 42%),
    radial-gradient(circle at 86% 50%, rgba(255, 222, 89, 0.11), transparent 46%),
    rgba(6, 36, 32, 0.78) !important;
}

:root[data-theme="light"] .site-header {
  background:
    radial-gradient(circle at 14% 50%, rgba(12, 192, 223, 0.12), transparent 42%),
    radial-gradient(circle at 86% 50%, rgba(255, 222, 89, 0.11), transparent 46%),
    rgba(246, 252, 249, 0.90) !important;
}

.site-header .brand {
  align-self: stretch !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  box-shadow: none !important;
}

.site-header .brand-logo-shell {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: clamp(174px, 13vw, 214px) !important;
  height: 42px !important;
  min-height: 42px !important;
  margin: auto 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  transform: none !important;
}

.site-header .brand-wordmark {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: left center !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  transform: none !important;
}

.hero,
:root[data-theme="dark"] .hero,
:root:not([data-theme="light"]) .hero {
  overflow: hidden !important;
  background:
    radial-gradient(circle at 78% 45%, rgba(12, 192, 223, 0.34) 0%, rgba(12, 192, 223, 0.18) 24%, transparent 54%),
    radial-gradient(circle at 88% 62%, rgba(105, 213, 164, 0.24) 0%, transparent 50%),
    radial-gradient(circle at 96% 70%, rgba(255, 222, 89, 0.18) 0%, transparent 68%),
    radial-gradient(circle at 26% 56%, rgba(12, 192, 223, 0.14) 0%, transparent 50%),
    linear-gradient(115deg, rgba(0, 36, 34, 0.58), rgba(3, 22, 20, 0.24) 48%, rgba(0, 42, 38, 0.40)),
    var(--bg) !important;
  box-shadow: 0 0 0 100vmax var(--bg) !important;
  clip-path: inset(0 -100vmax) !important;
}

:root[data-theme="light"] .hero {
  background:
    radial-gradient(circle at 78% 45%, rgba(12, 192, 223, 0.25) 0%, rgba(12, 192, 223, 0.12) 25%, transparent 56%),
    radial-gradient(circle at 88% 62%, rgba(105, 213, 164, 0.18) 0%, transparent 51%),
    radial-gradient(circle at 96% 70%, rgba(255, 222, 89, 0.15) 0%, transparent 68%),
    radial-gradient(circle at 26% 56%, rgba(12, 192, 223, 0.10) 0%, transparent 50%),
    linear-gradient(115deg, rgba(248, 253, 251, 0.96), rgba(239, 253, 252, 0.72) 52%, rgba(250, 253, 244, 0.94)),
    var(--bg) !important;
}

.hero::before {
  content: "" !important;
  position: absolute !important;
  inset: -42% -120vw !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 72% 46%, rgba(12, 192, 223, 0.30), transparent 42%),
    radial-gradient(circle at 84% 61%, rgba(105, 213, 164, 0.22), transparent 50%),
    radial-gradient(circle at 94% 69%, rgba(255, 222, 89, 0.16), transparent 64%) !important;
  filter: blur(22px) !important;
}

.hero-visual,
.phone-shell,
.phone-frame-custom,
.phone-wrap,
.phone-halo {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

.hero-visual::before {
  content: "" !important;
  position: absolute !important;
  inset: -24% -42% !important;
  z-index: -1 !important;
  pointer-events: none !important;
  border-radius: 999px !important;
  background:
    radial-gradient(circle at 50% 44%, rgba(12, 192, 223, 0.36), transparent 36%),
    radial-gradient(circle at 61% 56%, rgba(105, 213, 164, 0.24), transparent 50%),
    radial-gradient(circle at 75% 64%, rgba(255, 222, 89, 0.18), transparent 64%) !important;
  filter: blur(18px) !important;
}

.known-from-strip .hero-metrics article {
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
  gap: 2px !important;
  overflow: visible !important;
  padding: 5px 4px !important;
  border: 1px solid rgba(12, 192, 223, 0.42) !important;
  background:
    radial-gradient(circle at 78% 100%, rgba(12, 192, 223, 0.24), transparent 45%),
    rgba(12, 54, 49, 0.70) !important;
}

.known-from-strip .hero-metrics strong {
  font-family: var(--font-display) !important;
  font-size: clamp(0.82rem, 0.86vw, 0.95rem) !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

.known-from-strip .hero-metrics span {
  font-family: var(--font-body) !important;
  font-size: clamp(0.42rem, 0.44vw, 0.5rem) !important;
  line-height: 1.05 !important;
  letter-spacing: 0.035em !important;
  text-transform: uppercase !important;
}

.service-card:hover,
.service-card:focus-within,
.service-card.is-active,
.service-card.service-card-featured:hover,
.service-card.service-card-featured:focus-within,
.service-card.service-card-featured.is-active,
#videoproduktion:hover,
#videoproduktion:focus-within,
#videoproduktion.is-active {
  border-color: rgba(12, 192, 223, 0.86) !important;
  box-shadow: 0 24px 70px rgba(12, 192, 223, 0.22), inset 0 0 0 1px rgba(255, 222, 89, 0.18) !important;
  transform: translateY(-4px) !important;
}

@media (max-width: 980px) {
  .site-header .brand-logo-shell {
    width: clamp(142px, 43vw, 176px) !important;
    height: 36px !important;
    min-height: 36px !important;
  }

  .hero-copy .known-from-strip.known-from-strip-desktop,
  .hero .known-from-strip.known-from-strip-desktop {
    width: min(100%, 326px) !important;
    max-width: 326px !important;
    margin: 12px auto 0 !important;
    align-items: stretch !important;
  }

  .known-from-strip .known-from-logos img,
  .known-from-strip .hero-metrics article {
    height: 42px !important;
    min-height: 42px !important;
  }

  .known-from-strip .hero-metrics strong {
    font-size: clamp(0.78rem, 3.15vw, 0.94rem) !important;
  }

  .known-from-strip .hero-metrics span {
    font-size: clamp(0.38rem, 1.65vw, 0.48rem) !important;
  }

  .trust-copy,
  .trust-copy .section-heading,
  .trust-copy h2,
  .mini-game-heading,
  .launch-game,
  .mission-control,
  .faq,
  .faq .section-heading,
  .faq-list,
  .faq-item,
  .contact-section,
  .contact-section .section-heading,
  .contact-form,
  .site-footer,
  footer.site-footer {
    width: min(100%, 720px) !important;
    max-width: calc(100vw - 32px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    transform: none !important;
    justify-self: center !important;
    left: auto !important;
    right: auto !important;
  }

  .trust-copy h2,
  .trust-copy .section-heading h2 {
    width: 100% !important;
    max-width: calc(100vw - 20px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0.42em !important;
    padding-right: 0.42em !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    word-break: normal !important;
    text-align: center !important;
    font-size: clamp(2.05rem, 10.5vw, 3.25rem) !important;
    line-height: 0.98 !important;
  }
}

@media (min-width: 761px) {
  .hero,
  :root[data-theme="light"] .hero,
  :root[data-theme="dark"] .hero,
  :root:not([data-theme="light"]) .hero {
    overflow: visible !important;
    isolation: isolate !important;
  }

  .hero::before,
  :root[data-theme="light"] .hero::before,
  :root[data-theme="dark"] .hero::before,
  :root:not([data-theme="light"]) .hero::before {
    content: "" !important;
    position: absolute !important;
    inset: -12% auto -12% 50% !important;
    width: 100vw !important;
    height: auto !important;
    transform: translateX(-50%) !important;
    z-index: -1 !important;
    border: 0 !important;
    pointer-events: none !important;
    filter: none !important;
    background:
      radial-gradient(circle at 72% 42%, rgba(12, 192, 223, 0.32), transparent 42%),
      radial-gradient(circle at 84% 64%, rgba(108, 224, 170, 0.22), transparent 44%),
      radial-gradient(circle at 94% 70%, rgba(255, 222, 89, 0.16), transparent 46%),
      radial-gradient(circle at 24% 48%, rgba(12, 192, 223, 0.12), transparent 42%) !important;
  }

  :root[data-theme="light"] .hero::before {
    background:
      radial-gradient(circle at 72% 42%, rgba(12, 192, 223, 0.24), transparent 44%),
      radial-gradient(circle at 84% 64%, rgba(108, 224, 170, 0.17), transparent 46%),
      radial-gradient(circle at 94% 70%, rgba(255, 222, 89, 0.14), transparent 48%),
      radial-gradient(circle at 24% 48%, rgba(12, 192, 223, 0.10), transparent 44%) !important;
  }
}

/* One continuous hero backdrop: remove the column-bound visual overlay. */
.hero-visual::before,
.hero-visual::after,
:root[data-theme="light"] .hero-visual::before,
:root[data-theme="light"] .hero-visual::after,
:root[data-theme="dark"] .hero-visual::before,
:root[data-theme="dark"] .hero-visual::after,
:root:not([data-theme="light"]) .hero-visual::before,
:root:not([data-theme="light"]) .hero-visual::after {
  content: none !important;
  display: none !important;
  background: none !important;
  box-shadow: none !important;
}

/* Viewport-anchored backdrop: no element or column edge can clip it. */
body,
:root[data-theme="dark"] body,
:root:not([data-theme="light"]) body {
  background:
    radial-gradient(ellipse at 16% 42%, rgba(12, 192, 223, 0.18), transparent 46%),
    radial-gradient(ellipse at 70% 44%, rgba(12, 192, 223, 0.20), transparent 50%),
    radial-gradient(ellipse at 84% 58%, rgba(108, 224, 170, 0.18), transparent 54%),
    radial-gradient(ellipse at 94% 68%, rgba(255, 222, 89, 0.13), transparent 58%),
    linear-gradient(120deg, #020807 0%, #041817 52%, #03100f 100%) !important;
  background-attachment: fixed !important;
  background-size: 100vw 100vh !important;
  background-repeat: no-repeat !important;
}

:root[data-theme="light"] body {
  background:
    radial-gradient(ellipse at 16% 42%, rgba(12, 192, 223, 0.13), transparent 48%),
    radial-gradient(ellipse at 70% 44%, rgba(12, 192, 223, 0.15), transparent 52%),
    radial-gradient(ellipse at 84% 58%, rgba(108, 224, 170, 0.13), transparent 56%),
    radial-gradient(ellipse at 94% 68%, rgba(255, 222, 89, 0.11), transparent 60%),
    linear-gradient(120deg, #f7fbfa 0%, #eefafa 52%, #f9fbf4 100%) !important;
  background-attachment: fixed !important;
  background-size: 100vw 100vh !important;
  background-repeat: no-repeat !important;
}

.hero::before,
:root[data-theme="light"] .hero::before,
:root[data-theme="dark"] .hero::before,
:root:not([data-theme="light"]) .hero::before {
  content: none !important;
  display: none !important;
  background: none !important;
}

.service-grid .service-card[data-planet] {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

@media (max-width: 760px) {
  .hero-copy .known-from-strip.known-from-strip-desktop,
  .hero .known-from-strip.known-from-strip-desktop {
    display: none !important;
  }

  .hero > .known-from-strip.known-from-strip-mobile {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    order: 3 !important;
    width: min(100%, 326px) !important;
    max-width: 326px !important;
    margin: 4px auto 0 !important;
    gap: 7px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .hero-copy {
    order: 1 !important;
  }

  .hero-visual {
    order: 2 !important;
  }
}

html,
body,
.site-shell,
main {
  overflow-x: clip !important;
}

.site-header,
.site-header *,
.brand,
.brand-logo-shell,
.brand-logo-shell *,
.brand-wordmark {
  box-sizing: border-box !important;
}

.site-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background:
    radial-gradient(circle at 18% 30%, rgba(12, 192, 223, 0.13), transparent 34%),
    radial-gradient(circle at 82% 24%, rgba(255, 222, 89, 0.12), transparent 32%),
    rgba(6, 18, 18, 0.72) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}

:root[data-theme="light"] .site-header {
  background:
    radial-gradient(circle at 18% 30%, rgba(12, 192, 223, 0.13), transparent 34%),
    radial-gradient(circle at 82% 24%, rgba(255, 222, 89, 0.12), transparent 32%),
    rgba(249, 252, 249, 0.78) !important;
}

.brand,
.site-header .brand {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}

.brand-logo-shell,
.site-header .brand-logo-shell {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: clamp(180px, 14vw, 232px) !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

.brand-logo-shell::before,
.brand-logo-shell::after,
.brand-wordmark::before,
.brand-wordmark::after,
.site-header .brand-logo-shell::before,
.site-header .brand-logo-shell::after {
  content: none !important;
  display: none !important;
}

.brand-wordmark,
.site-header .brand-wordmark {
  position: absolute !important;
  inset: 50% auto auto 0 !important;
  width: 100% !important;
  height: auto !important;
  max-height: 36px !important;
  object-fit: contain !important;
  object-position: left center !important;
  transform: translateY(-50%) !important;
  background: transparent !important;
  box-shadow: none !important;
}

:root[data-theme="light"] .brand-wordmark-dark,
:root:not([data-theme="light"]) .brand-wordmark-light,
:root[data-theme="dark"] .brand-wordmark-light {
  opacity: 1 !important;
  visibility: visible !important;
}

:root[data-theme="light"] .brand-wordmark-light,
:root:not([data-theme="light"]) .brand-wordmark-dark,
:root[data-theme="dark"] .brand-wordmark-dark {
  opacity: 0 !important;
  visibility: hidden !important;
}

.hero {
  background:
    radial-gradient(circle at 70% 45%, rgba(12, 192, 223, 0.22), transparent 34%),
    radial-gradient(circle at 83% 62%, rgba(255, 222, 89, 0.12), transparent 32%),
    radial-gradient(circle at 18% 48%, rgba(12, 192, 223, 0.10), transparent 38%),
    linear-gradient(115deg, rgba(1, 10, 11, 0.98), rgba(4, 37, 35, 0.97) 48%, rgba(8, 31, 21, 0.96) 100%) !important;
}

:root[data-theme="light"] .hero {
  background:
    radial-gradient(circle at 70% 45%, rgba(12, 192, 223, 0.25), transparent 36%),
    radial-gradient(circle at 84% 62%, rgba(255, 222, 89, 0.18), transparent 34%),
    radial-gradient(circle at 20% 46%, rgba(12, 192, 223, 0.11), transparent 42%),
    linear-gradient(115deg, #f8fcfb 0%, #effaf9 48%, #fbfbef 100%) !important;
}

.hero::before {
  opacity: 0.4 !important;
}

.hero-visual,
.phone-shell,
.hero .phone-shell,
.phone-frame-wrap,
.phone-halo {
  background: transparent !important;
  box-shadow: none !important;
}

.phone-shell::before,
.phone-shell::after,
.phone-frame-wrap::before,
.phone-frame-wrap::after,
.phone-halo::before,
.phone-halo::after {
  content: none !important;
  display: none !important;
}

.phone-screen,
.phone-video-box,
.phone-screen video {
  background: #000 !important;
}

.hero-copy .known-from-strip.known-from-strip-desktop,
.hero .known-from-strip.known-from-strip-desktop {
  display: grid !important;
  grid-template-rows: repeat(2, 42px) !important;
  gap: 7px !important;
  width: min(100%, 338px) !important;
  max-width: 338px !important;
  margin: 14px 0 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.known-from-strip .known-from-logos,
.known-from-strip .hero-metrics {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 7px !important;
  width: 100% !important;
  max-width: 100% !important;
}

.known-from-strip .known-from-logos img,
.known-from-strip .hero-metrics article {
  width: 100% !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  margin: 0 !important;
  border-radius: 7px !important;
}

.known-from-strip .known-from-logos img {
  object-fit: contain !important;
  padding: 8px 12px !important;
  background: rgba(255, 255, 255, 0.95) !important;
}

.known-from-strip .hero-metrics article {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  padding: 4px 3px !important;
  overflow: hidden !important;
  background: rgba(28, 82, 77, 0.58) !important;
  border: 1px solid rgba(12, 192, 223, 0.54) !important;
  box-shadow: 0 12px 30px rgba(12, 192, 223, 0.12) !important;
}

:root[data-theme="light"] .known-from-strip .hero-metrics article {
  background: rgba(255, 255, 255, 0.82) !important;
  border-color: rgba(12, 192, 223, 0.38) !important;
}

.known-from-strip .hero-metrics strong,
.known-from-strip .hero-metrics span {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

.known-from-strip .hero-metrics strong {
  font-family: "Fredoka", system-ui, sans-serif !important;
  font-size: clamp(0.82rem, 1.15vw, 0.98rem) !important;
  line-height: 0.92 !important;
  color: var(--text) !important;
}

.known-from-strip .hero-metrics span {
  font-family: "Inter", system-ui, sans-serif !important;
  font-size: clamp(0.4rem, 0.55vw, 0.5rem) !important;
  line-height: 1 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--muted) !important;
}

.service-card.service-card-featured:hover,
.service-card.service-card-featured:focus-within,
.service-card.service-card-featured.is-active,
#videoproduktion:hover,
#videoproduktion:focus-within {
  border-color: rgba(12, 192, 223, 0.88) !important;
  box-shadow: 0 26px 72px rgba(12, 192, 223, 0.24), inset 0 0 0 1px rgba(255, 222, 89, 0.2) !important;
  transform: translateY(-4px) !important;
}

@media (max-width: 980px) {
  .site-header {
    min-height: 74px !important;
  }

  .site-header .brand-logo-shell {
    width: clamp(148px, 43vw, 182px) !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
  }

  .site-header .brand-wordmark {
    max-height: 32px !important;
  }

  .hero {
    background:
      radial-gradient(circle at 50% 35%, rgba(12, 192, 223, 0.24), transparent 44%),
      radial-gradient(circle at 58% 60%, rgba(255, 222, 89, 0.12), transparent 36%),
      linear-gradient(160deg, rgba(1, 10, 11, 0.98), rgba(3, 44, 41, 0.98)) !important;
  }

  :root[data-theme="light"] .hero {
    background:
      radial-gradient(circle at 50% 35%, rgba(12, 192, 223, 0.22), transparent 46%),
      radial-gradient(circle at 58% 60%, rgba(255, 222, 89, 0.16), transparent 38%),
      linear-gradient(160deg, #f9fcfb, #eefaf8) !important;
  }

  .hero-copy .known-from-strip.known-from-strip-desktop,
  .hero .known-from-strip.known-from-strip-desktop {
    width: min(100%, 326px) !important;
    max-width: 326px !important;
    margin: 14px auto 0 !important;
  }

  .known-from-strip .known-from-logos img,
  .known-from-strip .hero-metrics article {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
  }

  .known-from-strip .hero-metrics strong {
    font-size: clamp(0.76rem, 3.25vw, 0.92rem) !important;
  }

  .known-from-strip .hero-metrics span {
    font-size: clamp(0.36rem, 1.75vw, 0.46rem) !important;
  }

  .trust-copy,
  .trust-copy .section-heading,
  .trust-copy h2,
  .mini-game-heading,
  .launch-game,
  .mission-control,
  .faq,
  .faq .section-heading,
  .faq-list,
  .faq-item,
  .contact-section,
  .contact-section .section-heading,
  .contact-form,
  .site-footer,
  footer.site-footer {
    width: min(100%, 720px) !important;
    max-width: calc(100vw - 32px) !important;
    left: auto !important;
    right: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    transform: none !important;
    justify-self: center !important;
  }

  .trust-copy h2,
  .trust-copy .section-heading h2 {
    width: 100% !important;
    max-width: calc(100vw - 18px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0.55em !important;
    padding-right: 0.55em !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    word-break: normal !important;
    text-align: center !important;
    font-size: clamp(1.95rem, 9.2vw, 3.05rem) !important;
    line-height: 1.03 !important;
  }
}

@media (max-width: 380px) {
  .known-from-strip .hero-metrics strong {
    font-size: 0.72rem !important;
  }

  .known-from-strip .hero-metrics span {
    font-size: 0.34rem !important;
  }
}

.site-header {
  align-items: center !important;
  background: linear-gradient(110deg, rgba(5, 23, 22, 0.86), rgba(8, 35, 32, 0.82), rgba(39, 48, 25, 0.72)) !important;
  min-height: 74px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

:root[data-theme="light"] .site-header {
  background: linear-gradient(110deg, rgba(241, 254, 255, 0.94), rgba(246, 255, 251, 0.93), rgba(255, 252, 231, 0.9)) !important;
}

.site-header .brand,
.site-header .brand-logo-shell {
  align-items: center !important;
  display: inline-flex !important;
  justify-content: flex-start !important;
  min-height: 44px !important;
}

.site-header .brand-logo-shell {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  height: 44px !important;
  margin: 0 !important;
  overflow: visible !important;
  position: relative !important;
  width: clamp(170px, 14vw, 220px) !important;
}

.site-header .brand-logo-shell::before,
.site-header .brand-logo-shell::after,
.brand-logo-shell::before,
.brand-logo-shell::after {
  content: none !important;
  display: none !important;
}

.site-header .brand-logo-shell img,
.brand-logo-shell img {
  display: block !important;
  height: auto !important;
  max-height: 38px !important;
  max-width: 100% !important;
  object-fit: contain !important;
  position: static !important;
  transform: none !important;
  width: 100% !important;
}

.hero {
  background:
    radial-gradient(circle at 70% 43%, rgba(12, 192, 223, 0.42), rgba(12, 192, 223, 0.12) 25%, transparent 55%),
    radial-gradient(circle at 63% 58%, rgba(255, 222, 89, 0.28), rgba(137, 218, 137, 0.12) 28%, transparent 58%),
    linear-gradient(115deg, rgba(0, 10, 11, 0.98), rgba(3, 42, 39, 0.92) 54%, rgba(11, 30, 18, 0.96)) !important;
  overflow: hidden !important;
}

:root[data-theme="light"] .hero {
  background:
    radial-gradient(circle at 70% 43%, rgba(12, 192, 223, 0.28), rgba(12, 192, 223, 0.1) 28%, transparent 58%),
    radial-gradient(circle at 63% 58%, rgba(255, 222, 89, 0.24), rgba(137, 218, 137, 0.1) 30%, transparent 62%),
    linear-gradient(115deg, rgba(251, 255, 255, 0.99), rgba(236, 255, 253, 0.94) 58%, rgba(255, 253, 234, 0.96)) !important;
}

.hero-visual,
.phone-shell,
.phone-frame-wrap,
.phone-halo {
  background: transparent !important;
  box-shadow: none !important;
}

.hero-copy .known-from-strip.known-from-strip-desktop,
.hero .known-from-strip.known-from-strip-desktop {
  display: grid !important;
  gap: 8px !important;
  grid-template-rows: repeat(2, 42px) !important;
  margin: 12px auto 0 0 !important;
  max-width: 338px !important;
  width: min(100%, 338px) !important;
}

.known-from-strip.known-from-strip-mobile,
.hero .known-from-strip-mobile,
.hero-visual > .known-from-strip,
.trust-strip .known-from-strip,
.known-from-strip + .known-from-strip {
  display: none !important;
}

.known-from-strip .known-from-logos,
.known-from-strip .hero-metrics {
  display: grid !important;
  gap: 8px !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  margin: 0 !important;
}

.known-from-strip .known-from-logos img,
.known-from-strip .hero-metrics article {
  align-items: center !important;
  box-sizing: border-box !important;
  display: flex !important;
  height: 42px !important;
  justify-content: center !important;
  max-height: 42px !important;
  min-height: 42px !important;
  overflow: hidden !important;
  width: 100% !important;
}

.known-from-strip .known-from-logos img {
  background: rgba(255, 255, 255, 0.94) !important;
  border-radius: 8px !important;
  object-fit: contain !important;
  padding: 8px 12px !important;
}

.known-from-strip .hero-metrics article {
  background: rgba(14, 80, 74, 0.62) !important;
  border: 1px solid rgba(12, 192, 223, 0.48) !important;
  border-radius: 8px !important;
  color: #fff !important;
  flex-direction: column !important;
  line-height: 1 !important;
  padding: 4px 4px 3px !important;
  text-align: center !important;
}

:root[data-theme="light"] .known-from-strip .hero-metrics article {
  background: rgba(235, 255, 253, 0.86) !important;
  color: #07100f !important;
}

.known-from-strip .hero-metrics strong {
  color: inherit !important;
  display: block !important;
  font-family: "Fredoka", "Inter", sans-serif !important;
  font-size: 0.96rem !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.known-from-strip .hero-metrics span {
  color: inherit !important;
  display: block !important;
  font-family: "Inter", system-ui, sans-serif !important;
  font-size: 0.49rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  line-height: 1.05 !important;
  margin-top: 3px !important;
  opacity: 0.82 !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

.service-card.service-card-featured:hover,
.service-card.service-card-featured:focus-within,
.service-card.service-card-featured.is-active {
  border-color: rgba(12, 192, 223, 0.9) !important;
  box-shadow: 0 24px 70px rgba(12, 192, 223, 0.22), inset 0 0 0 1px rgba(255, 222, 89, 0.2) !important;
  transform: translateY(-4px) !important;
}

@media (max-width: 980px) {
  .site-header {
    min-height: 64px !important;
  }

  .site-header .brand-logo-shell {
    height: 38px !important;
    min-height: 38px !important;
    width: clamp(148px, 42vw, 180px) !important;
  }

  .site-header .brand-logo-shell img {
    max-height: 34px !important;
  }

  .hero-copy .known-from-strip.known-from-strip-desktop,
  .hero .known-from-strip.known-from-strip-desktop {
    margin: 12px auto 0 !important;
    max-width: 326px !important;
    width: min(100%, 326px) !important;
  }

  .known-from-strip .known-from-logos img,
  .known-from-strip .hero-metrics article {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
  }

  .trust-copy,
  .trust-strip,
  .launch-game,
  .mission-control,
  .faq,
  .faq-list,
  .contact-section,
  .contact-form,
  .site-footer,
  footer.site-footer {
    box-sizing: border-box !important;
    left: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: calc(100vw - 32px) !important;
    right: auto !important;
    text-align: center !important;
    transform: none !important;
    width: min(100%, 720px) !important;
  }

  .trust-copy .section-heading,
  .trust-copy h2,
  .trust-strip .section-heading,
  .trust-strip h2 {
    box-sizing: border-box !important;
    font-size: clamp(2rem, 10vw, 3.2rem) !important;
    line-height: 1.02 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: calc(100vw - 24px) !important;
    overflow: visible !important;
    padding-left: 0.45em !important;
    padding-right: 0.45em !important;
    text-align: center !important;
    width: 100% !important;
  }
}

@media (max-width: 380px) {
  .known-from-strip .hero-metrics strong {
    font-size: 0.82rem !important;
  }

  .known-from-strip .hero-metrics span {
    font-size: 0.42rem !important;
  }
}

.site-header,
:root[data-theme="dark"] .site-header,
:root:not([data-theme="light"]) .site-header {
  background:
    radial-gradient(circle at 18% 48%, rgba(12, 192, 223, 0.16), transparent 40%),
    radial-gradient(circle at 72% 52%, rgba(116, 219, 166, 0.12), transparent 46%),
    rgba(4, 18, 16, 0.78) !important;
}

:root[data-theme="light"] .site-header {
  background:
    radial-gradient(circle at 18% 48%, rgba(12, 192, 223, 0.12), transparent 40%),
    radial-gradient(circle at 72% 52%, rgba(255, 222, 89, 0.10), transparent 46%),
    rgba(248, 252, 250, 0.84) !important;
}

.site-header .brand {
  align-self: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  min-height: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  box-shadow: none !important;
}

.site-header .brand-logo-shell {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: clamp(152px, 16vw, 202px) !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  overflow: visible !important;
  position: relative !important;
  background: transparent !important;
  box-shadow: none !important;
}

.site-header .brand-wordmark {
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: clamp(150px, 15.5vw, 196px) !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 36px !important;
  object-fit: contain !important;
  object-position: left center !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  clip-path: none !important;
}

:root[data-theme="light"] .site-header .brand-wordmark-dark {
  visibility: visible !important;
  opacity: 1 !important;
}

:root[data-theme="light"] .site-header .brand-wordmark-light {
  visibility: hidden !important;
  opacity: 0 !important;
}

:root[data-theme="dark"] .site-header .brand-wordmark-light,
:root:not([data-theme="light"]) .site-header .brand-wordmark-light {
  visibility: visible !important;
  opacity: 1 !important;
}

:root[data-theme="dark"] .site-header .brand-wordmark-dark,
:root:not([data-theme="light"]) .site-header .brand-wordmark-dark {
  visibility: hidden !important;
  opacity: 0 !important;
}

.hero,
:root[data-theme="dark"] .hero,
:root:not([data-theme="light"]) .hero {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  background:
    radial-gradient(ellipse at 74% 47%, rgba(12, 192, 223, 0.34), rgba(12, 192, 223, 0.18) 26%, transparent 58%),
    radial-gradient(ellipse at 82% 60%, rgba(116, 219, 166, 0.26), transparent 56%),
    radial-gradient(ellipse at 92% 70%, rgba(255, 222, 89, 0.18), transparent 72%),
    radial-gradient(ellipse at 30% 58%, rgba(12, 192, 223, 0.14), transparent 56%),
    linear-gradient(116deg, rgba(0, 22, 20, 0.76), rgba(2, 31, 28, 0.48) 50%, rgba(0, 38, 35, 0.62)),
    var(--bg) !important;
  box-shadow: 0 0 0 120vmax var(--bg) !important;
  clip-path: inset(0 -120vmax) !important;
}

:root[data-theme="light"] .hero {
  background:
    radial-gradient(ellipse at 74% 47%, rgba(12, 192, 223, 0.30), rgba(12, 192, 223, 0.14) 28%, transparent 60%),
    radial-gradient(ellipse at 82% 60%, rgba(116, 219, 166, 0.18), transparent 58%),
    radial-gradient(ellipse at 92% 70%, rgba(255, 222, 89, 0.16), transparent 74%),
    radial-gradient(ellipse at 30% 58%, rgba(12, 192, 223, 0.12), transparent 56%),
    linear-gradient(116deg, rgba(251, 253, 251, 0.94), rgba(239, 252, 252, 0.88) 52%, rgba(250, 253, 244, 0.92)),
    var(--bg) !important;
}

.hero::before {
  content: "" !important;
  position: absolute !important;
  z-index: -1 !important;
  pointer-events: none !important;
  inset: -45% -140vw !important;
  background:
    radial-gradient(ellipse at 74% 46%, rgba(12, 192, 223, 0.26), transparent 42%),
    radial-gradient(ellipse at 84% 58%, rgba(116, 219, 166, 0.22), transparent 48%),
    radial-gradient(ellipse at 92% 66%, rgba(255, 222, 89, 0.18), transparent 54%) !important;
  filter: blur(32px) !important;
}

.hero-visual,
.hero-visual *,
.phone-shell,
.phone-frame-custom,
.phone-wrap,
.phone-halo {
  background-color: transparent !important;
  box-shadow: none !important;
}

.hero-visual {
  position: relative !important;
  background: transparent !important;
}

.hero-visual::before {
  content: "" !important;
  position: absolute !important;
  z-index: -1 !important;
  inset: -28% -56% !important;
  pointer-events: none !important;
  border-radius: 999px !important;
  background:
    radial-gradient(ellipse at 48% 48%, rgba(12, 192, 223, 0.36), transparent 42%),
    radial-gradient(ellipse at 62% 54%, rgba(116, 219, 166, 0.24), transparent 50%),
    radial-gradient(ellipse at 76% 64%, rgba(255, 222, 89, 0.18), transparent 62%) !important;
  filter: blur(22px) !important;
}

.phone-screen,
.phone-screen video,
.phone-media,
.hero-video,
.hero-preview-video {
  background: #000 !important;
}

.hero .known-from-strip-mobile,
.known-from-strip.known-from-strip-mobile,
.hero-visual > .known-from-strip,
.hero-visual .known-from-strip,
.hero-visual > .results-medals,
.trust-strip .results-medals,
.proof-grid {
  display: none !important;
}

.known-from-strip > span,
.known-from-strip .known-from-label,
.known-from-strip .known-from-title,
.known-from-strip::before,
.known-from-strip::after,
.known-from-strip.known-from-strip-desktop > span,
.hero .known-from-strip.known-from-strip-desktop > span {
  display: none !important;
  content: none !important;
}

.hero-copy > .known-from-strip.known-from-strip-desktop,
.hero .hero-copy > .known-from-strip.known-from-strip-desktop {
  display: flex !important;
  flex-direction: column !important;
  width: min(100%, 338px) !important;
  max-width: 338px !important;
  margin: 12px auto 0 0 !important;
  gap: 7px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.hero-copy > .known-from-strip .known-from-logos img,
.hero-copy > .known-from-strip .hero-metrics article {
  width: 100% !important;
  min-width: 0 !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
}

.hero-copy > .known-from-strip .hero-metrics article {
  display: grid !important;
  align-content: center !important;
  justify-items: center !important;
  gap: 1px !important;
  padding: 4px 3px !important;
  overflow: visible !important;
  border: 1px solid rgba(12, 192, 223, 0.48) !important;
  background:
    radial-gradient(circle at 84% 86%, rgba(12, 192, 223, 0.20), transparent 46%),
    rgba(13, 66, 60, 0.72) !important;
}

:root[data-theme="light"] .hero-copy > .known-from-strip .hero-metrics article {
  background:
    radial-gradient(circle at 84% 86%, rgba(12, 192, 223, 0.15), transparent 46%),
    rgba(249, 253, 251, 0.92) !important;
}

.hero-copy > .known-from-strip .hero-metrics strong,
.hero-copy > .known-from-strip .hero-metrics span {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

.hero-copy > .known-from-strip .hero-metrics strong {
  font-family: Fredoka, var(--font-display), sans-serif !important;
  font-size: clamp(0.76rem, 0.78vw, 0.88rem) !important;
  line-height: 1 !important;
}

.hero-copy > .known-from-strip .hero-metrics span {
  font-family: var(--font-body), Inter, sans-serif !important;
  font-size: clamp(0.38rem, 0.42vw, 0.48rem) !important;
  line-height: 1.05 !important;
  letter-spacing: 0.055em !important;
  text-transform: uppercase !important;
}

.service-grid .service-card:first-of-type:hover,
.service-grid .service-card:first-of-type:focus-within,
.service-card.service-card-featured:hover,
.service-card.service-card-featured:focus-within,
#videoproduktion:hover,
#videoproduktion:focus-within {
  border-color: rgba(12, 192, 223, 0.9) !important;
  box-shadow: 0 24px 70px rgba(12, 192, 223, 0.22), inset 0 0 0 1px rgba(255, 222, 89, 0.18) !important;
  transform: translateY(-4px) !important;
}

@media (max-width: 980px) {
  .site-header .brand-logo-shell {
    width: clamp(150px, 42vw, 178px) !important;
    height: 44px !important;
    min-height: 44px !important;
  }

  .site-header .brand-wordmark {
    width: clamp(148px, 40vw, 174px) !important;
    max-height: 34px !important;
  }

  .hero-copy > .known-from-strip.known-from-strip-desktop,
  .hero .hero-copy > .known-from-strip.known-from-strip-desktop {
    width: min(100%, 326px) !important;
    max-width: 326px !important;
    margin: 12px auto 0 !important;
  }

  .hero-copy > .known-from-strip .known-from-logos img,
  .hero-copy > .known-from-strip .hero-metrics article {
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
  }

  .trust-copy,
  .trust-copy .section-heading,
  .trust-copy h2,
  .mini-game-heading,
  .launch-game,
  .mission-control,
  .faq,
  .faq .section-heading,
  .faq-list,
  .faq-item,
  .contact-section,
  .contact-section .section-heading,
  .contact-form,
  .site-footer,
  footer.site-footer {
    width: min(100%, 720px) !important;
    max-width: calc(100vw - 32px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    justify-self: center !important;
  }

  .trust-copy h2,
  .trust-copy .section-heading h2 {
    display: block !important;
    width: min(100%, calc(100vw - 20px)) !important;
    max-width: calc(100vw - 20px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0.55em !important;
    padding-right: 0.55em !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    text-align: center !important;
    word-break: normal !important;
    font-size: clamp(2rem, 9.6vw, 3.15rem) !important;
    line-height: 1.04 !important;
  }
}

@media (max-width: 380px) {
  .hero-copy > .known-from-strip .hero-metrics strong {
    font-size: 0.72rem !important;
  }

  .hero-copy > .known-from-strip .hero-metrics span {
    font-size: 0.34rem !important;
  }
}

.site-header,
:root[data-theme="dark"] .site-header,
:root[data-theme="light"] .site-header {
  position: sticky !important;
  top: clamp(10px, 1.5vw, 18px) !important;
  z-index: 1000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: clamp(58px, 5.1vw, 76px) !important;
  padding: clamp(10px, 1vw, 14px) clamp(14px, 2.2vw, 28px) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  background:
    radial-gradient(circle at 12% 25%, rgba(12, 192, 223, 0.16), transparent 34%),
    radial-gradient(circle at 88% 18%, rgba(255, 222, 89, 0.13), transparent 35%),
    rgba(4, 15, 14, 0.82) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.26) !important;
  backdrop-filter: blur(18px) !important;
}

:root[data-theme="light"] .site-header {
  border-color: rgba(4, 15, 14, 0.13) !important;
  background:
    radial-gradient(circle at 12% 25%, rgba(12, 192, 223, 0.16), transparent 34%),
    radial-gradient(circle at 88% 18%, rgba(255, 222, 89, 0.16), transparent 35%),
    rgba(248, 255, 254, 0.82) !important;
  box-shadow: 0 20px 60px rgba(12, 38, 38, 0.11) !important;
}

.site-header .brand,
.site-header .brand-logo-shell,
.site-header .brand-wordmark,
.site-header .brand img {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  clip-path: none !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
}

.site-header .brand {
  display: inline-flex !important;
  align-items: center !important;
  align-self: center !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
}

.site-header .brand-logo-shell {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: clamp(158px, 13.4vw, 210px) !important;
  height: clamp(30px, 2.8vw, 42px) !important;
  min-width: clamp(158px, 13.4vw, 210px) !important;
  min-height: clamp(30px, 2.8vw, 42px) !important;
  overflow: visible !important;
}

.site-header .brand-wordmark {
  position: absolute !important;
  inset: 0 auto 0 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: contain !important;
  object-position: left center !important;
  opacity: 1 !important;
  transform: none !important;
}

:root[data-theme="dark"] .brand-wordmark-dark,
:root[data-theme="light"] .brand-wordmark-light {
  visibility: visible !important;
}

:root[data-theme="dark"] .brand-wordmark-light,
:root[data-theme="light"] .brand-wordmark-dark {
  visibility: hidden !important;
}

.site-header .menu-toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
}

.site-header .mobile-nav {
  position: absolute !important;
  top: calc(100% + 10px) !important;
  right: clamp(10px, 2vw, 28px) !important;
  left: auto !important;
  z-index: 1001 !important;
  width: min(310px, calc(100vw - 28px)) !important;
  padding: 10px !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  background:
    radial-gradient(circle at 18% 10%, rgba(12, 192, 223, 0.18), transparent 42%),
    rgba(5, 18, 17, 0.94) !important;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.3) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
  transform: translateY(-8px) scale(0.98) !important;
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease !important;
}

:root[data-theme="light"] .site-header .mobile-nav {
  border-color: rgba(4, 15, 14, 0.12) !important;
  background:
    radial-gradient(circle at 18% 10%, rgba(12, 192, 223, 0.18), transparent 42%),
    rgba(250, 255, 253, 0.96) !important;
  box-shadow: 0 28px 70px rgba(12, 38, 38, 0.14) !important;
}

.site-header.menu-open .mobile-nav,
.site-header[data-menu-open="true"] .mobile-nav,
.site-header .mobile-nav.is-open,
.site-header:has(.menu-toggle[aria-expanded="true"]) .mobile-nav {
  opacity: 1 !important;
  pointer-events: auto !important;
  visibility: visible !important;
  transform: translateY(0) scale(1) !important;
}

.site-header .mobile-nav a {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 44px !important;
  padding: 11px 13px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: var(--text) !important;
  background: rgba(255, 255, 255, 0.055) !important;
  text-decoration: none !important;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, color 160ms ease !important;
}

.site-header .mobile-nav a:hover,
.site-header .mobile-nav a:focus-visible {
  transform: translateX(3px) !important;
  border-color: rgba(12, 192, 223, 0.8) !important;
  background: rgba(12, 192, 223, 0.13) !important;
}

.site-header .mobile-nav a[href="#strategie"] {
  border-color: transparent !important;
  color: #04100f !important;
  background: linear-gradient(90deg, #0cc0df, #7bdc9a 52%, #ffde59) !important;
}

.hero,
:root[data-theme="dark"] .hero,
:root[data-theme="light"] .hero {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  background:
    radial-gradient(circle at 70% 48%, rgba(12, 192, 223, 0.32), transparent 30%),
    radial-gradient(circle at 88% 58%, rgba(255, 222, 89, 0.18), transparent 34%),
    radial-gradient(circle at 22% 70%, rgba(123, 220, 154, 0.16), transparent 35%),
    linear-gradient(120deg, rgba(2, 13, 13, 0.98), rgba(5, 24, 23, 0.95) 58%, rgba(3, 13, 12, 0.98)) !important;
}

:root[data-theme="light"] .hero {
  background:
    radial-gradient(circle at 70% 48%, rgba(12, 192, 223, 0.22), transparent 31%),
    radial-gradient(circle at 88% 58%, rgba(255, 222, 89, 0.15), transparent 35%),
    radial-gradient(circle at 22% 70%, rgba(123, 220, 154, 0.14), transparent 35%),
    linear-gradient(120deg, #f8ffff, #eefcfa 58%, #fbfff8) !important;
}

.hero::before,
.hero::after {
  content: "" !important;
  position: absolute !important;
  inset: -24% -18% !important;
  z-index: -2 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 64% 34%, rgba(12, 192, 223, 0.18), transparent 30%),
    radial-gradient(circle at 80% 52%, rgba(255, 222, 89, 0.12), transparent 34%) !important;
  filter: blur(10px) !important;
}

.hero::after {
  z-index: -1 !important;
  opacity: 0.62 !important;
  background:
    linear-gradient(115deg, transparent 0 48%, rgba(12, 192, 223, 0.08) 52%, transparent 60%),
    radial-gradient(circle at 72% 52%, rgba(123, 220, 154, 0.14), transparent 32%) !important;
}

.hero-visual,
.phone-shell,
.phone-wrap,
.phone-halo,
.phone-frame-custom,
.hero-phone {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

.phone-screen,
.phone-screen::before,
.phone-screen::after {
  background-color: #000 !important;
}

.phone-shell,
.phone-wrap {
  overflow: visible !important;
}

.phone-screen {
  overflow: hidden !important;
}

.known-from-strip.known-from-strip-mobile,
.hero .known-from-strip-mobile,
.hero-visual > .known-from-strip,
.hero-visual .known-from-strip,
.trust-strip .known-from-strip,
.known-from-strip + .known-from-strip {
  display: none !important;
}

.hero-copy > .known-from-strip.known-from-strip-desktop,
.hero .hero-copy > .known-from-strip.known-from-strip-desktop {
  display: grid !important;
  width: min(100%, 338px) !important;
  max-width: 338px !important;
  min-width: 0 !important;
  margin: 12px auto 0 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  gap: 7px !important;
  overflow: visible !important;
}

.hero-copy > .known-from-strip .known-from-logos img,
.hero-copy > .known-from-strip .hero-metrics article {
  width: 100% !important;
  height: 42px !important;
  min-width: 0 !important;
  min-height: 42px !important;
  max-height: 42px !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.hero-copy > .known-from-strip .known-from-logos img {
  object-fit: contain !important;
  object-position: center !important;
  padding: 7px 9px !important;
  background: rgba(255, 255, 255, 0.94) !important;
}

.hero-copy > .known-from-strip .hero-metrics article {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 1px !important;
  padding: 4px 3px !important;
  border: 1px solid rgba(12, 192, 223, 0.46) !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.11), rgba(12, 192, 223, 0.08)),
    rgba(11, 54, 50, 0.72) !important;
  box-shadow: 0 12px 34px rgba(12, 192, 223, 0.1) !important;
}

:root[data-theme="light"] .hero-copy > .known-from-strip .hero-metrics article {
  color: #061211 !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.82), rgba(12, 192, 223, 0.11)),
    rgba(248, 255, 253, 0.8) !important;
}

.hero-copy > .known-from-strip .hero-metrics strong,
.hero-copy > .known-from-strip .hero-metrics span {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1 !important;
}

.hero-copy > .known-from-strip .hero-metrics strong {
  font-family: "Fredoka", sans-serif !important;
  font-size: 0.88rem !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  color: var(--text) !important;
}

.hero-copy > .known-from-strip .hero-metrics span {
  font-family: "Inter", sans-serif !important;
  font-size: 0.44rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.055em !important;
  text-transform: uppercase !important;
  color: var(--muted) !important;
}

#videoproduktion,
.service-card.service-card-featured {
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease !important;
}

#videoproduktion:hover,
#videoproduktion:focus,
#videoproduktion:focus-within,
#videoproduktion.is-active,
.service-card.service-card-featured:hover,
.service-card.service-card-featured:focus-within,
.service-card.service-card-featured.is-active {
  border-color: rgba(12, 192, 223, 0.86) !important;
  box-shadow: 0 24px 70px rgba(12, 192, 223, 0.22), inset 0 0 0 1px rgba(255, 222, 89, 0.18) !important;
  transform: translateY(-4px) !important;
}

.trust-copy h2,
.trust-copy .section-heading h2 {
  box-sizing: border-box !important;
  overflow: visible !important;
  max-width: calc(100vw - 32px) !important;
  padding-inline: 0.35em !important;
  margin-inline: auto !important;
  text-align: center !important;
}

@media (max-width: 980px) {
  .site-header {
    top: 8px !important;
    width: min(100% - 16px, 720px) !important;
    margin-inline: auto !important;
  }

  .site-header .brand-logo-shell {
    width: clamp(128px, 42vw, 172px) !important;
    min-width: clamp(128px, 42vw, 172px) !important;
    height: 34px !important;
    min-height: 34px !important;
  }

  .hero-copy > .known-from-strip.known-from-strip-desktop,
  .hero .hero-copy > .known-from-strip.known-from-strip-desktop {
    width: min(100%, 326px) !important;
    max-width: 326px !important;
    margin: 12px auto 0 !important;
  }

  .hero-copy > .known-from-strip .known-from-logos img,
  .hero-copy > .known-from-strip .hero-metrics article {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
  }

  .hero-copy > .known-from-strip .hero-metrics strong {
    font-size: 0.82rem !important;
  }

  .hero-copy > .known-from-strip .hero-metrics span {
    font-size: 0.4rem !important;
  }

  .mini-game-section,
  .mini-game-heading,
  .launch-game,
  .mission-control,
  .faq,
  .faq .section-heading,
  .faq-list,
  .faq-item,
  .contact-section,
  .contact-section .section-heading,
  .contact-form,
  .site-footer,
  footer.site-footer {
    width: min(100%, 720px) !important;
    max-width: calc(100vw - 32px) !important;
    left: auto !important;
    right: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    transform: none !important;
    justify-self: center !important;
  }

  .trust-copy h2,
  .trust-copy .section-heading h2 {
    width: 100% !important;
    max-width: calc(100vw - 16px) !important;
    padding-inline: 0.55em !important;
    font-size: clamp(1.95rem, 9.6vw, 3.2rem) !important;
    line-height: 1.03 !important;
  }
}

@media (max-width: 380px) {
  .hero-copy > .known-from-strip .hero-metrics strong {
    font-size: 0.76rem !important;
  }

  .hero-copy > .known-from-strip .hero-metrics span {
    font-size: 0.36rem !important;
  }
}

:root:not([data-theme="light"]) body {
  color-scheme: dark;
}

:root[data-theme="light"] body {
  color-scheme: light;
}

.site-header {
  display: flex !important;
  align-items: center !important;
  min-height: 72px !important;
  padding-block: 14px !important;
  background:
    radial-gradient(circle at 12% 22%, rgba(12, 192, 223, 0.16), transparent 38%),
    radial-gradient(circle at 85% 45%, rgba(255, 222, 89, 0.10), transparent 42%),
    rgba(4, 35, 32, 0.74) !important;
}

:root[data-theme="light"] .site-header {
  background:
    radial-gradient(circle at 12% 22%, rgba(12, 192, 223, 0.14), transparent 38%),
    radial-gradient(circle at 85% 45%, rgba(255, 222, 89, 0.12), transparent 42%),
    rgba(246, 252, 250, 0.92) !important;
}

.site-header .brand {
  display: flex !important;
  align-items: center !important;
  align-self: center !important;
  height: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.site-header .brand-logo-shell {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: clamp(164px, 13vw, 212px) !important;
  height: 44px !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

.site-header .brand-logo-shell::before,
.site-header .brand-logo-shell::after,
.brand-logo-shell::before,
.brand-logo-shell::after {
  display: none !important;
  content: none !important;
}

.site-header .brand-wordmark,
.site-header .brand-logo-shell img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: left center !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

.site-header .mobile-nav {
  position: absolute !important;
  top: calc(100% + 10px) !important;
  right: 0 !important;
  left: auto !important;
  width: min(320px, calc(100vw - 32px)) !important;
  display: grid !important;
  gap: 8px !important;
  padding: 12px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  background: rgba(4, 29, 27, 0.94) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(-6px) !important;
  pointer-events: none !important;
}

:root[data-theme="light"] .site-header .mobile-nav {
  background: rgba(246, 252, 250, 0.96) !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
}

.site-header.menu-open .mobile-nav,
.site-header[data-menu-open="true"] .mobile-nav,
.site-header .mobile-nav.is-open,
.site-header:has(.menu-toggle[aria-expanded="true"]) .mobile-nav {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

.site-header .mobile-nav a {
  border-radius: 10px !important;
  padding: 12px 14px !important;
  background: rgba(255, 255, 255, 0.055) !important;
  transition: background 0.2s ease, transform 0.2s ease !important;
}

.site-header .mobile-nav a:hover,
.site-header .mobile-nav a:focus-visible {
  background: linear-gradient(90deg, rgba(12, 192, 223, 0.18), rgba(255, 222, 89, 0.16)) !important;
  transform: translateX(3px) !important;
}

.site-header .mobile-nav a[href="#strategie"] {
  background: linear-gradient(90deg, #0cc0df, #ffde59) !important;
  color: #06100f !important;
  font-weight: 900 !important;
}

.site-header .mobile-nav a[href="#strategie"]::before,
.site-header .mobile-nav a[href="#strategie"]::after {
  display: none !important;
  content: none !important;
}

.hero {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 74% 45%, rgba(12, 192, 223, 0.32) 0%, rgba(12, 192, 223, 0.16) 27%, transparent 62%),
    radial-gradient(circle at 82% 60%, rgba(92, 220, 166, 0.22) 0%, transparent 58%),
    radial-gradient(circle at 92% 64%, rgba(255, 222, 89, 0.18) 0%, transparent 70%),
    radial-gradient(circle at 20% 58%, rgba(12, 192, 223, 0.12) 0%, transparent 55%),
    linear-gradient(115deg, rgba(0, 34, 32, 0.52), rgba(3, 22, 20, 0.20) 50%, rgba(0, 42, 38, 0.42)),
    var(--bg) !important;
  box-shadow: 0 0 0 100vmax var(--bg) !important;
  clip-path: inset(0 -100vmax) !important;
}

:root[data-theme="light"] .hero {
  background:
    radial-gradient(circle at 74% 45%, rgba(12, 192, 223, 0.22) 0%, rgba(12, 192, 223, 0.11) 27%, transparent 62%),
    radial-gradient(circle at 82% 60%, rgba(92, 220, 166, 0.16) 0%, transparent 58%),
    radial-gradient(circle at 92% 64%, rgba(255, 222, 89, 0.16) 0%, transparent 70%),
    radial-gradient(circle at 20% 58%, rgba(12, 192, 223, 0.10) 0%, transparent 55%),
    linear-gradient(115deg, rgba(246, 252, 250, 0.96), rgba(236, 252, 252, 0.86) 50%, rgba(250, 253, 244, 0.96)),
    var(--bg) !important;
}

.hero::before {
  content: "" !important;
  position: absolute !important;
  inset: -45% -120vw !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 70% 48%, rgba(12, 192, 223, 0.22), transparent 42%),
    radial-gradient(circle at 86% 64%, rgba(255, 222, 89, 0.15), transparent 46%),
    radial-gradient(circle at 28% 54%, rgba(92, 220, 166, 0.13), transparent 46%) !important;
  filter: blur(28px) !important;
}

.hero-visual::before {
  content: "" !important;
  position: absolute !important;
  inset: -24% -42% !important;
  z-index: -1 !important;
  pointer-events: none !important;
  border-radius: 999px !important;
  background:
    radial-gradient(circle at 48% 48%, rgba(12, 192, 223, 0.30), transparent 40%),
    radial-gradient(circle at 62% 54%, rgba(92, 220, 166, 0.22), transparent 48%),
    radial-gradient(circle at 72% 62%, rgba(255, 222, 89, 0.16), transparent 58%) !important;
  filter: blur(18px) !important;
}

.hero-visual::after,
.phone-shell::before,
.phone-shell::after {
  display: none !important;
  content: none !important;
}

.known-from-strip > span,
.known-from-strip .known-from-label,
.known-from-strip .known-from-title,
.known-from-strip::before,
.known-from-strip::after {
  display: none !important;
  content: none !important;
}

.known-from-strip.known-from-strip-mobile,
.hero .known-from-strip-mobile,
.hero-visual > .known-from-strip,
.hero-visual > .results-medals,
.trust-strip .known-from-strip,
.trust-strip .results-medals,
.proof-grid,
.known-from-strip + .known-from-strip {
  display: none !important;
}

.hero-copy > .known-from-strip.known-from-strip-desktop,
.hero .hero-copy > .known-from-strip.known-from-strip-desktop {
  --proof-width: min(100%, 338px);
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: var(--proof-width) !important;
  max-width: var(--proof-width) !important;
  margin: 12px auto 0 0 !important;
  gap: 7px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.hero-copy > .known-from-strip .hero-metrics article {
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
  gap: 2px !important;
  overflow: visible !important;
  padding: 5px 4px !important;
  border: 1px solid rgba(12, 192, 223, 0.42) !important;
  background:
    radial-gradient(circle at 82% 82%, rgba(12, 192, 223, 0.16), transparent 44%),
    rgba(12, 54, 49, 0.70) !important;
}

.hero-copy > .known-from-strip .hero-metrics span {
  font-family: var(--font-body), Inter, sans-serif !important;
  font-size: clamp(0.42rem, 0.44vw, 0.50rem) !important;
  line-height: 1.05 !important;
  letter-spacing: 0.035em !important;
  text-transform: uppercase !important;
}

@media (max-width: 980px) {
  .site-header {
    min-height: 66px !important;
    padding: 10px 12px !important;
  }

  .site-header .brand {
    height: 38px !important;
  }

  .site-header .brand-logo-shell {
    width: clamp(142px, 43vw, 176px) !important;
    height: 38px !important;
    min-height: 38px !important;
  }

  .hero-copy > .known-from-strip.known-from-strip-desktop,
  .hero .hero-copy > .known-from-strip.known-from-strip-desktop {
    width: min(100%, 326px) !important;
    max-width: 326px !important;
    margin: 12px auto 0 !important;
  }

  .hero-copy > .known-from-strip .known-from-logos img,
  .hero-copy > .known-from-strip .hero-metrics article {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
  }

  .trust-copy,
  .trust-copy .section-heading,
  .trust-copy h2,
  .mini-game-heading,
  .launch-game,
  .mission-control,
  .faq,
  .faq .section-heading,
  .faq-list,
  .faq-item,
  .contact-section,
  .contact-section .section-heading,
  .contact-form,
  .site-footer,
  footer.site-footer {
    width: min(100%, 720px) !important;
    max-width: calc(100vw - 32px) !important;
    left: auto !important;
    right: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    transform: none !important;
    justify-self: center !important;
  }

  .trust-copy h2,
  .trust-copy .section-heading h2 {
    width: 100% !important;
    max-width: calc(100vw - 20px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0.42em !important;
    padding-right: 0.42em !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    word-break: normal !important;
    text-align: center !important;
    font-size: clamp(2rem, 10.2vw, 3.25rem) !important;
    line-height: 1.02 !important;
  }
}

:root:not([data-theme="light"]) body {
  color-scheme: dark !important;
  background:
    radial-gradient(circle at 28% 28%, rgba(12, 192, 223, 0.18), transparent 34%),
    radial-gradient(circle at 70% 28%, rgba(255, 222, 89, 0.12), transparent 34%),
    linear-gradient(120deg, #010807 0%, #031b1a 46%, #071009 100%) !important;
}

:root[data-theme="light"] body {
  color-scheme: light !important;
  background:
    radial-gradient(circle at 32% 30%, rgba(12, 192, 223, 0.18), transparent 36%),
    radial-gradient(circle at 72% 28%, rgba(255, 222, 89, 0.16), transparent 36%),
    linear-gradient(120deg, #f7ffff 0%, #f8ffff 52%, #fffdf4 100%) !important;
}

body::before {
  content: "" !important;
  position: fixed !important;
  inset: -28vh -28vw !important;
  z-index: -2 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 18% 24%, rgba(12, 192, 223, 0.18), transparent 28%),
    radial-gradient(circle at 58% 48%, rgba(105, 220, 170, 0.13), transparent 30%),
    radial-gradient(circle at 82% 22%, rgba(255, 222, 89, 0.11), transparent 32%) !important;
  filter: blur(10px) !important;
  animation: cosmicDrift 22s ease-in-out infinite alternate !important;
}

body::after {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: -1 !important;
  pointer-events: none !important;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.30) 0 1px, transparent 1.3px),
    radial-gradient(circle, rgba(12, 192, 223, 0.20) 0 1px, transparent 1.4px) !important;
  background-size: 170px 170px, 230px 230px !important;
  background-position: 0 0, 52px 80px !important;
  opacity: 0.28 !important;
}

.site-header {
  align-items: center !important;
  min-height: 72px !important;
  padding-block: 14px !important;
  background:
    linear-gradient(115deg, rgba(3, 18, 17, 0.82), rgba(6, 42, 39, 0.70), rgba(24, 30, 14, 0.54)) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

:root[data-theme="light"] .site-header {
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.86), rgba(235, 253, 253, 0.78), rgba(255, 251, 229, 0.72)) !important;
  border-color: rgba(3, 18, 17, 0.14) !important;
}

.site-header .brand,
.site-header .brand-logo-shell {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  line-height: 0 !important;
  overflow: visible !important;
}

.site-header .brand {
  height: 44px !important;
  align-self: center !important;
}

.site-header .brand-logo-shell {
  width: clamp(150px, 13vw, 210px) !important;
  height: 44px !important;
  min-height: 44px !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  transform: none !important;
}

.site-header .brand-logo-shell::before,
.site-header .brand-logo-shell::after {
  content: none !important;
  display: none !important;
}

.site-header .brand-wordmark {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: left center !important;
  transform: none !important;
}

:root[data-theme="light"] .brand-wordmark-dark {
  display: block !important;
  opacity: 1 !important;
}

:root[data-theme="light"] .brand-wordmark-light {
  display: none !important;
  opacity: 0 !important;
}

:root:not([data-theme="light"]) .brand-wordmark-dark {
  display: none !important;
  opacity: 0 !important;
}

:root:not([data-theme="light"]) .brand-wordmark-light {
  display: block !important;
  opacity: 1 !important;
}

.site-header .desktop-nav,
.site-header .header-actions > .button-primary {
  display: none !important;
}

.site-header .mobile-nav {
  position: absolute !important;
  top: calc(100% + 10px) !important;
  right: 0 !important;
  left: auto !important;
  z-index: 1001 !important;
  display: grid !important;
  width: min(320px, calc(100vw - 32px)) !important;
  gap: 8px !important;
  padding: 12px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  background: rgba(4, 20, 19, 0.95) !important;
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.32) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(-8px) !important;
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease !important;
}

:root[data-theme="light"] .site-header .mobile-nav {
  background: rgba(248, 255, 254, 0.96) !important;
  border-color: rgba(3, 18, 17, 0.14) !important;
}

.site-header.menu-open .mobile-nav,
.site-header[data-menu-open="true"] .mobile-nav,
.site-header .mobile-nav.is-open,
.site-header:has(.menu-toggle[aria-expanded="true"]) .mobile-nav {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

.site-header .mobile-nav a {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 42px !important;
  padding: 10px 12px !important;
  border-radius: 8px !important;
  color: var(--text) !important;
  background: rgba(255, 255, 255, 0.055) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  text-decoration: none !important;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease !important;
}

.site-header .mobile-nav a:hover,
.site-header .mobile-nav a:focus-visible {
  transform: translateX(3px) !important;
  border-color: rgba(12, 192, 223, 0.68) !important;
  background: rgba(12, 192, 223, 0.12) !important;
}

.site-header .mobile-nav a[href="#strategie"] {
  color: #06110f !important;
  background: linear-gradient(90deg, #0cc0df, #ffde59) !important;
  border-color: transparent !important;
}

.hero {
  isolation: isolate !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 73% 47%, rgba(12, 192, 223, 0.24), transparent 25%),
    radial-gradient(circle at 79% 58%, rgba(107, 223, 165, 0.18), transparent 31%),
    radial-gradient(circle at 89% 41%, rgba(255, 222, 89, 0.12), transparent 35%),
    linear-gradient(118deg, rgba(2, 12, 11, 0.02), rgba(12, 192, 223, 0.055), rgba(255, 222, 89, 0.035)) !important;
}

:root[data-theme="light"] .hero {
  background:
    radial-gradient(circle at 73% 47%, rgba(12, 192, 223, 0.23), transparent 25%),
    radial-gradient(circle at 79% 58%, rgba(107, 223, 165, 0.18), transparent 32%),
    radial-gradient(circle at 89% 41%, rgba(255, 222, 89, 0.14), transparent 36%),
    linear-gradient(118deg, rgba(255, 255, 255, 0), rgba(12, 192, 223, 0.055), rgba(255, 222, 89, 0.045)) !important;
}

.hero::before {
  content: "" !important;
  position: absolute !important;
  inset: -34% -70vw -24% -70vw !important;
  z-index: -1 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 67% 47%, rgba(12, 192, 223, 0.26), transparent 28%),
    radial-gradient(circle at 79% 54%, rgba(105, 220, 170, 0.20), transparent 31%),
    radial-gradient(circle at 88% 42%, rgba(255, 222, 89, 0.14), transparent 36%) !important;
  filter: blur(30px) !important;
  opacity: 1 !important;
}

.hero::after,
.hero-bg-card,
.hero-visual::after,
.phone-shell::before,
.phone-shell::after,
.phone-frame-custom::before,
.phone-frame-custom::after {
  content: none !important;
  display: none !important;
}

.hero-visual::before {
  content: "" !important;
  position: absolute !important;
  inset: -22% -36% !important;
  z-index: -1 !important;
  pointer-events: none !important;
  border-radius: 999px !important;
  background:
    radial-gradient(circle at 44% 46%, rgba(12, 192, 223, 0.32), transparent 36%),
    radial-gradient(circle at 58% 52%, rgba(107, 223, 165, 0.23), transparent 45%),
    radial-gradient(circle at 72% 58%, rgba(255, 222, 89, 0.15), transparent 56%) !important;
  filter: blur(18px) !important;
}

.phone-frame-custom {
  filter: drop-shadow(0 26px 42px rgba(0, 0, 0, 0.36)) !important;
}

.hero-copy .known-from-strip.known-from-strip-desktop,
.hero .known-from-strip.known-from-strip-desktop {
  --hero-proof-width: min(100%, 338px);
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: var(--hero-proof-width) !important;
  max-width: var(--hero-proof-width) !important;
  margin: 12px auto 0 0 !important;
  gap: 7px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.known-from-strip > span,
.known-from-strip .known-from-label,
.known-from-strip::before,
.known-from-strip::after {
  content: none !important;
  display: none !important;
}

.proof-grid,
.known-from-strip.known-from-strip-mobile,
.hero .known-from-strip-mobile,
.hero-visual > .known-from-strip,
.hero-visual > .results-medals,
.trust-strip .results-medals,
.trust-strip .known-from-strip,
.known-from-strip + .known-from-strip {
  display: none !important;
}

.known-from-strip .known-from-logos img {
  object-fit: contain !important;
  padding: 7px 9px !important;
  background: rgba(255, 255, 255, 0.97) !important;
}

.known-from-strip .hero-metrics article {
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
  gap: 2px !important;
  overflow: visible !important;
  padding: 5px 4px !important;
  border: 1px solid rgba(12, 192, 223, 0.46) !important;
  background:
    radial-gradient(circle at 84% 84%, rgba(12, 192, 223, 0.16), transparent 46%),
    rgba(12, 54, 49, 0.70) !important;
}

:root[data-theme="light"] .known-from-strip .hero-metrics article {
  background:
    radial-gradient(circle at 84% 84%, rgba(12, 192, 223, 0.14), transparent 46%),
    rgba(249, 253, 250, 0.92) !important;
}

.known-from-strip .hero-metrics strong {
  font-family: Fredoka, var(--font-display), sans-serif !important;
  font-size: clamp(0.80rem, 0.84vw, 0.94rem) !important;
  line-height: 1 !important;
}

.known-from-strip .hero-metrics span {
  font-family: var(--font-body), Inter, sans-serif !important;
  font-size: clamp(0.40rem, 0.42vw, 0.49rem) !important;
  line-height: 1.06 !important;
  letter-spacing: 0.035em !important;
  text-transform: uppercase !important;
}

.about-portrait,
.portrait-image,
.founder-photo,
.crew-photo {
  overflow: visible !important;
}

.about-portrait img,
.portrait-image img,
.founder-photo img,
.crew-photo img {
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
}

@media (max-width: 980px) {
  .site-header {
    grid-template-columns: auto 1fr auto !important;
    min-height: 58px !important;
    padding: 10px 12px !important;
  }

  .site-header .brand {
    height: 38px !important;
  }

  .site-header .brand-logo-shell {
    width: clamp(142px, 42vw, 176px) !important;
    height: 38px !important;
    min-height: 38px !important;
  }

  .site-header .header-actions {
    gap: 6px !important;
  }

  .hero-copy .known-from-strip.known-from-strip-desktop,
  .hero .known-from-strip.known-from-strip-desktop {
    width: min(100%, 326px) !important;
    max-width: 326px !important;
    margin: 12px auto 0 !important;
  }

  .known-from-strip .known-from-logos img,
  .known-from-strip .hero-metrics article {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
  }

  #mini-game,
  #mini-game ~ section,
  #mini-game ~ footer,
  .launch-game,
  .mission-control,
  .faq,
  .faq .section-heading,
  .faq-list,
  .faq-item,
  .contact-section,
  .contact-section .section-heading,
  .contact-form,
  .site-footer,
  footer.site-footer {
    width: min(100%, 720px) !important;
    max-width: calc(100vw - 32px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    justify-self: center !important;
    text-align: center !important;
  }

  .trust-copy,
  .trust-copy .section-heading,
  .trust-copy h2,
  .section-heading h2 {
    max-width: calc(100vw - 20px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0.42em !important;
    padding-right: 0.42em !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    text-align: center !important;
    word-break: normal !important;
  }

  .trust-copy h2,
  .trust-copy .section-heading h2 {
    font-size: clamp(2rem, 9.7vw, 3.25rem) !important;
    line-height: 1.02 !important;
  }
}

:root {
  color-scheme: dark;
}

:root[data-theme="light"] {
  color-scheme: light;
}

body,
:root[data-theme="dark"] body,
:root:not([data-theme="light"]) body {
  background:
    radial-gradient(circle at 74% 30%, rgba(12, 192, 223, 0.16), transparent 36%),
    radial-gradient(circle at 88% 52%, rgba(106, 222, 167, 0.12), transparent 44%),
    radial-gradient(circle at 92% 72%, rgba(255, 222, 89, 0.10), transparent 52%),
    linear-gradient(135deg, #020807 0%, #041816 48%, #03100f 100%) !important;
}

:root[data-theme="light"] body {
  background:
    radial-gradient(circle at 74% 30%, rgba(12, 192, 223, 0.18), transparent 38%),
    radial-gradient(circle at 88% 52%, rgba(106, 222, 167, 0.14), transparent 46%),
    radial-gradient(circle at 92% 72%, rgba(255, 222, 89, 0.12), transparent 54%),
    linear-gradient(135deg, #fbfdfd 0%, #eefcfc 48%, #fffdf2 100%) !important;
}

.site-header {
  display: grid !important;
  grid-template-columns: minmax(150px, auto) 1fr auto !important;
  align-items: center !important;
  min-height: 72px !important;
  height: auto !important;
  padding-block: 12px !important;
  background:
    radial-gradient(circle at 22% 50%, rgba(12, 192, 223, 0.14), transparent 42%),
    radial-gradient(circle at 84% 50%, rgba(255, 222, 89, 0.10), transparent 50%),
    rgba(5, 18, 16, 0.74) !important;
}

:root[data-theme="light"] .site-header {
  background:
    radial-gradient(circle at 22% 50%, rgba(12, 192, 223, 0.17), transparent 42%),
    radial-gradient(circle at 84% 50%, rgba(255, 222, 89, 0.13), transparent 50%),
    rgba(246, 253, 252, 0.84) !important;
}

.brand,
.brand-logo-shell {
  align-self: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  overflow: visible !important;
}

.brand::before,
.brand::after,
.brand-logo-shell::before,
.brand-logo-shell::after,
.brand-wordmark::before,
.brand-wordmark::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

.brand-wordmark,
.brand-logo-shell img,
.brand img {
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  height: clamp(25px, 2.45vw, 34px) !important;
  min-height: 25px !important;
  object-fit: contain !important;
  object-position: left center !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

.desktop-nav,
.site-header > .button-primary,
.site-header > .header-cta,
.site-header > a.button {
  display: none !important;
}

.header-actions,
.nav-actions {
  grid-column: 3 !important;
  align-self: center !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  height: auto !important;
}

.menu-toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.mobile-nav {
  position: absolute !important;
  top: calc(100% + 10px) !important;
  right: 16px !important;
  left: auto !important;
  z-index: 80 !important;
  display: grid !important;
  width: min(320px, calc(100vw - 32px)) !important;
  padding: 10px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  background:
    radial-gradient(circle at 20% 0%, rgba(12, 192, 223, 0.16), transparent 46%),
    radial-gradient(circle at 90% 100%, rgba(255, 222, 89, 0.10), transparent 44%),
    rgba(5, 18, 16, 0.96) !important;
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.34) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(-6px) !important;
  transition: opacity 0.18s ease, transform 0.18s ease !important;
}

:root[data-theme="light"] .mobile-nav {
  background:
    radial-gradient(circle at 20% 0%, rgba(12, 192, 223, 0.15), transparent 46%),
    radial-gradient(circle at 90% 100%, rgba(255, 222, 89, 0.12), transparent 44%),
    rgba(248, 253, 251, 0.97) !important;
}

.site-header:has(.menu-toggle[aria-expanded="true"]) .mobile-nav,
.menu-toggle[aria-expanded="true"] ~ .mobile-nav,
.mobile-nav.is-open,
.site-header.menu-open .mobile-nav {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

.mobile-nav a {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 42px !important;
  padding: 10px 13px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: rgba(255, 255, 255, 0.045) !important;
  color: var(--text) !important;
  text-decoration: none !important;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease !important;
}

.mobile-nav a:hover,
.mobile-nav a:focus-visible {
  background: linear-gradient(90deg, rgba(12, 192, 223, 0.22), rgba(255, 222, 89, 0.16)) !important;
  border-color: rgba(12, 192, 223, 0.48) !important;
  transform: translateX(2px) !important;
}

.mobile-nav a[href="#strategie"] {
  background: linear-gradient(90deg, var(--cyan), var(--yellow)) !important;
  color: #020807 !important;
  border-color: transparent !important;
  font-weight: 900 !important;
}

.hero {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  border-bottom: 0 !important;
  background:
    radial-gradient(circle at 72% 46%, rgba(12, 192, 223, 0.38) 0%, rgba(12, 192, 223, 0.18) 28%, transparent 62%),
    radial-gradient(circle at 84% 55%, rgba(106, 222, 167, 0.30) 0%, transparent 58%),
    radial-gradient(circle at 93% 70%, rgba(255, 222, 89, 0.22) 0%, transparent 68%),
    radial-gradient(circle at 28% 48%, rgba(12, 192, 223, 0.16) 0%, transparent 58%),
    transparent !important;
  box-shadow: none !important;
  clip-path: none !important;
}

:root[data-theme="light"] .hero {
  background:
    radial-gradient(circle at 72% 46%, rgba(12, 192, 223, 0.28) 0%, rgba(12, 192, 223, 0.13) 28%, transparent 62%),
    radial-gradient(circle at 84% 55%, rgba(106, 222, 167, 0.22) 0%, transparent 58%),
    radial-gradient(circle at 93% 70%, rgba(255, 222, 89, 0.18) 0%, transparent 68%),
    radial-gradient(circle at 28% 48%, rgba(12, 192, 223, 0.12) 0%, transparent 58%),
    transparent !important;
}

.hero::before {
  inset: -34% -35% !important;
  z-index: -2 !important;
  background:
    radial-gradient(circle at 76% 45%, rgba(12, 192, 223, 0.24), transparent 44%),
    radial-gradient(circle at 88% 68%, rgba(255, 222, 89, 0.15), transparent 42%),
    radial-gradient(circle at 28% 48%, rgba(106, 222, 167, 0.10), transparent 52%) !important;
  filter: blur(20px) !important;
}

.hero::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -3 !important;
  pointer-events: none !important;
  background: transparent !important;
}

.hero-grid,
.hero-copy,
.hero-visual {
  position: relative !important;
  z-index: 1 !important;
}

.hero-visual,
.phone-stage,
.phone-shell,
.phone-wrap,
.phone-frame-custom,
.hero-phone {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

.phone-screen,
.phone-media,
.phone-video-wrap {
  background: #000 !important;
}

.hero-actions {
  --hero-primary-width: clamp(286px, 22vw, 338px);
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 12px !important;
}

.hero-actions .button-primary {
  flex: 0 0 var(--hero-primary-width) !important;
  width: var(--hero-primary-width) !important;
  max-width: 100% !important;
}

.hero-actions .button-secondary {
  flex: 0 0 clamp(160px, 13vw, 198px) !important;
  width: clamp(160px, 13vw, 198px) !important;
}

.hero-copy .known-from-strip.known-from-strip-desktop {
  width: var(--hero-primary-width) !important;
  max-width: var(--hero-primary-width) !important;
  margin: 10px 0 0 !important;
  align-items: stretch !important;
}

.known-from-strip > span,
.known-from-strip [class*="label"],
.known-from-strip [class*="eyebrow"] {
  display: none !important;
}

.known-from-strip .known-from-logos img,
.known-from-strip .hero-metrics article {
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  border-radius: 8px !important;
}

.known-from-strip .known-from-logos img {
  padding: 7px 9px !important;
}

.known-from-strip .hero-metrics strong {
  font-size: clamp(0.72rem, 0.78vw, 0.86rem) !important;
}

.known-from-strip .hero-metrics span {
  font-size: clamp(0.38rem, 0.40vw, 0.46rem) !important;
  letter-spacing: 0.02em !important;
}

.proof-grid,
.hero .known-from-strip.known-from-strip-mobile,
.hero-visual .known-from-strip,
.known-from-strip + .known-from-strip {
  display: none !important;
}

.services .service-grid > .service-card:first-of-type:hover,
.services .service-grid > .service-card:first-of-type:focus-within,
.services .service-grid > .service-card:first-of-type.is-active,
.service-card[data-planet="start"]:hover,
.service-card[data-planet="start"]:focus-within,
.service-card[data-planet="start"].is-active {
  border-color: rgba(12, 192, 223, 0.92) !important;
  box-shadow: 0 24px 70px rgba(12, 192, 223, 0.24), inset 0 0 0 1px rgba(255, 222, 89, 0.20) !important;
  transform: translateY(-4px) !important;
}

.services .service-grid > .service-card:first-of-type:hover .service-stage,
.services .service-grid > .service-card:first-of-type:focus-within .service-stage,
.services .service-grid > .service-card:first-of-type.is-active .service-stage {
  transform: translateY(-5px) scale(1.03) !important;
}

.about .portrait-image,
.about .portrait-placeholder {
  overflow: visible !important;
  background: transparent !important;
}

.about .portrait-image img,
.about .portrait-placeholder img,
img[src*="pepe-astronaut-final"] {
  object-fit: contain !important;
  object-position: center center !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  transform: none !important;
}

@media (max-width: 980px) {
  .site-header {
    grid-template-columns: minmax(132px, 1fr) auto !important;
    min-height: 58px !important;
    padding: 9px 10px !important;
  }

  .brand,
  .brand-logo-shell {
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
  }

  .brand-wordmark,
  .brand-logo-shell img,
  .brand img {
    height: clamp(23px, 7vw, 31px) !important;
  }

  .header-actions,
  .nav-actions {
    grid-column: 2 !important;
  }

  .hero {
    padding-top: clamp(32px, 8vw, 54px) !important;
  }

  .hero-actions {
    --hero-primary-width: min(100%, 332px);
    justify-content: center !important;
  }

  .hero-actions .button-primary,
  .hero-actions .button-secondary {
    flex: 0 0 min(100%, 332px) !important;
    width: min(100%, 332px) !important;
  }

  .hero-copy .known-from-strip.known-from-strip-desktop {
    width: min(100%, 326px) !important;
    max-width: 326px !important;
    margin: 10px auto 0 !important;
  }

  .known-from-strip .known-from-logos img,
  .known-from-strip .hero-metrics article {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
  }

  .mini-game-section,
  #mini-game,
  .launch-game,
  .mission-control,
  .faq,
  #faq,
  .faq-inline,
  .contact-section,
  #strategie,
  .site-footer,
  .footer-inner,
  .trust-copy,
  #referenzen {
    width: min(100%, 720px) !important;
    max-width: calc(100vw - 28px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    justify-self: center !important;
    text-align: center !important;
  }

  .trust-copy .section-heading,
  .trust-copy h2,
  .section-heading h2,
  .faq .section-heading h2 {
    max-width: calc(100vw - 20px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0.44em !important;
    padding-right: 0.44em !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    text-align: center !important;
  }
}

@media (max-width: 420px) {
  .known-from-strip .hero-metrics strong {
    font-size: 0.78rem !important;
  }

  .known-from-strip .hero-metrics span {
    font-size: 0.40rem !important;
  }
}

html:not([data-theme="light"]) {
  color-scheme: dark;
}

html[data-theme="light"] {
  color-scheme: light;
}

body {
  background:
    radial-gradient(circle at 68% 22%, rgba(12, 192, 223, 0.18), transparent 40%),
    radial-gradient(circle at 78% 35%, rgba(105, 222, 166, 0.14), transparent 46%),
    radial-gradient(circle at 88% 52%, rgba(255, 222, 89, 0.10), transparent 52%),
    linear-gradient(120deg, #031514 0%, #05120f 52%, #07130d 100%) !important;
}

:root[data-theme="light"] body {
  background:
    radial-gradient(circle at 68% 22%, rgba(12, 192, 223, 0.18), transparent 40%),
    radial-gradient(circle at 78% 35%, rgba(105, 222, 166, 0.14), transparent 46%),
    radial-gradient(circle at 88% 52%, rgba(255, 222, 89, 0.12), transparent 52%),
    linear-gradient(120deg, #f8fffe 0%, #f3fffd 52%, #fffdf1 100%) !important;
}

.site-header {
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  align-items: center !important;
  min-height: 72px !important;
  padding: 12px clamp(16px, 2.2vw, 28px) !important;
  background:
    linear-gradient(115deg, rgba(7, 31, 29, 0.78), rgba(5, 23, 21, 0.64), rgba(12, 192, 223, 0.10)) !important;
}

:root[data-theme="light"] .site-header {
  background:
    linear-gradient(115deg, rgba(246, 255, 254, 0.92), rgba(241, 254, 253, 0.84), rgba(255, 249, 218, 0.72)) !important;
}

.site-header .brand {
  align-self: center !important;
  display: flex !important;
  align-items: center !important;
  height: 48px !important;
  min-height: 48px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  overflow: visible !important;
}

.site-header .brand-logo-shell,
body.legal-page .site-header .brand-logo-shell,
.legal-page .brand-logo-shell {
  position: relative !important;
  width: clamp(172px, 14vw, 226px) !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  overflow: visible !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}

.site-header .brand-wordmark,
.site-header .brand-logo-shell img,
.brand-logo-shell img {
  position: static !important;
  width: 100% !important;
  height: 100% !important;
  max-height: 42px !important;
  object-fit: contain !important;
  object-position: left center !important;
  display: block !important;
  opacity: 1 !important;
  transform: none !important;
  background: transparent !important;
}

:root:not([data-theme="light"]) .site-header .brand-wordmark-dark,
:root[data-theme="dark"] .site-header .brand-wordmark-dark {
  display: none !important;
}

:root:not([data-theme="light"]) .site-header .brand-wordmark-light,
:root[data-theme="dark"] .site-header .brand-wordmark-light {
  display: block !important;
}

.site-header .header-actions {
  display: flex !important;
  align-items: center !important;
  justify-self: end !important;
  gap: 8px !important;
}

.site-header .menu-toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.site-header .mobile-nav {
  position: absolute !important;
  top: calc(100% + 10px) !important;
  right: clamp(12px, 2vw, 28px) !important;
  z-index: 120 !important;
  width: min(330px, calc(100vw - 32px)) !important;
  display: grid !important;
  gap: 8px !important;
  padding: 10px !important;
  border-radius: 14px !important;
  background: linear-gradient(145deg, rgba(7, 31, 29, 0.96), rgba(4, 16, 15, 0.92)) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(-8px) !important;
  visibility: hidden !important;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease !important;
}

:root[data-theme="light"] .site-header .mobile-nav {
  background: linear-gradient(145deg, rgba(250, 255, 254, 0.96), rgba(239, 253, 252, 0.94)) !important;
  border-color: rgba(2, 20, 18, 0.14) !important;
  box-shadow: 0 24px 70px rgba(12, 192, 223, 0.16) !important;
}

.site-header.menu-open .mobile-nav,
.site-header[data-menu-open="true"] .mobile-nav,
.site-header .mobile-nav.is-open,
.site-header:has(.menu-toggle[aria-expanded="true"]) .mobile-nav {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
  visibility: visible !important;
}

.site-header .mobile-nav a {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 44px !important;
  padding: 11px 13px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.11) !important;
  background: rgba(255, 255, 255, 0.045) !important;
  color: var(--text) !important;
  text-decoration: none !important;
  transition: border-color 0.16s ease, transform 0.16s ease, background 0.16s ease !important;
}

:root[data-theme="light"] .site-header .mobile-nav a {
  border-color: rgba(2, 20, 18, 0.10) !important;
  background: rgba(2, 20, 18, 0.035) !important;
}

.site-header .mobile-nav a:hover,
.site-header .mobile-nav a:focus-visible {
  transform: translateX(3px) !important;
  border-color: rgba(12, 192, 223, 0.55) !important;
  background: rgba(12, 192, 223, 0.12) !important;
  outline: none !important;
}

.site-header .mobile-nav a[href="#strategie"] {
  color: #031514 !important;
  border: 0 !important;
  background: linear-gradient(100deg, #0cc0df, #7fdc9f 58%, #ffde59) !important;
  box-shadow: 0 16px 42px rgba(12, 192, 223, 0.20) !important;
}

.hero {
  position: relative !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 68% 36%, rgba(12, 192, 223, 0.22), transparent 38%),
    radial-gradient(circle at 78% 47%, rgba(105, 222, 166, 0.18), transparent 44%),
    radial-gradient(circle at 88% 58%, rgba(255, 222, 89, 0.13), transparent 54%),
    linear-gradient(120deg, rgba(3, 20, 18, 0.06), rgba(3, 20, 18, 0)) !important;
  box-shadow: none !important;
  clip-path: none !important;
}

:root[data-theme="light"] .hero {
  background:
    radial-gradient(circle at 68% 36%, rgba(12, 192, 223, 0.20), transparent 39%),
    radial-gradient(circle at 78% 47%, rgba(105, 222, 166, 0.16), transparent 45%),
    radial-gradient(circle at 88% 58%, rgba(255, 222, 89, 0.14), transparent 55%),
    linear-gradient(120deg, rgba(248, 255, 254, 0), rgba(255, 255, 255, 0)) !important;
}

.hero::before {
  content: "" !important;
  position: absolute !important;
  inset: -22% -30% -18% -18% !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background:
    radial-gradient(ellipse at 72% 42%, rgba(12, 192, 223, 0.30), transparent 38%),
    radial-gradient(ellipse at 84% 52%, rgba(105, 222, 166, 0.20), transparent 46%),
    radial-gradient(ellipse at 92% 64%, rgba(255, 222, 89, 0.16), transparent 54%) !important;
  filter: blur(10px) !important;
}

.hero-visual,
.phone-shell,
.phone-frame-custom,
.phone-wrap,
.phone-halo,
.phone-device {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

.hero-visual::before {
  content: "" !important;
  position: absolute !important;
  inset: -24% -42% -20% -24% !important;
  z-index: -1 !important;
  pointer-events: none !important;
  border-radius: 999px !important;
  background:
    radial-gradient(circle at 48% 48%, rgba(12, 192, 223, 0.30), transparent 40%),
    radial-gradient(circle at 62% 54%, rgba(106, 222, 167, 0.22), transparent 48%),
    radial-gradient(circle at 72% 62%, rgba(255, 222, 89, 0.16), transparent 58%) !important;
  filter: blur(18px) !important;
}

.phone-screen,
.phone-screen::before,
.phone-screen::after {
  background: #000 !important;
}

.proof-grid,
.known-from-strip.known-from-strip-mobile,
.hero .known-from-strip-mobile,
.hero-visual > .known-from-strip,
.hero-visual .known-from-strip,
.hero-visual > .results-medals,
.trust-strip .known-from-strip,
.trust-strip .results-medals {
  display: none !important;
}

.hero-actions .button-primary {
  flex: 0 0 min(100%, 338px) !important;
}

.hero-copy .known-from-strip.known-from-strip-desktop,
.hero .hero-copy .known-from-strip.known-from-strip-desktop {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: min(100%, 338px) !important;
  max-width: 338px !important;
  margin: 12px auto 0 0 !important;
  gap: 7px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.hero-copy > .known-from-strip .hero-metrics article {
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
  gap: 2px !important;
  padding: 5px 4px !important;
  border: 1px solid rgba(12, 192, 223, 0.42) !important;
  background:
    radial-gradient(circle at 82% 82%, rgba(12, 192, 223, 0.18), transparent 44%),
    rgba(12, 54, 49, 0.70) !important;
}

:root[data-theme="light"] .hero-copy > .known-from-strip .hero-metrics article {
  background:
    radial-gradient(circle at 82% 82%, rgba(12, 192, 223, 0.14), transparent 44%),
    rgba(248, 253, 251, 0.90) !important;
}

.hero-copy > .known-from-strip .hero-metrics strong {
  font-family: Fredoka, var(--font-display), sans-serif !important;
  font-size: clamp(0.76rem, 0.74vw, 0.88rem) !important;
  line-height: 1 !important;
  color: var(--text) !important;
}

.hero-copy > .known-from-strip .hero-metrics span {
  font-family: var(--font-body), Inter, sans-serif !important;
  font-size: clamp(0.39rem, 0.41vw, 0.48rem) !important;
  line-height: 1.05 !important;
  letter-spacing: 0.035em !important;
  text-transform: uppercase !important;
  color: var(--muted) !important;
}

.service-card.service-card-featured:hover,
.service-card.service-card-featured:focus-within,
.service-card.service-card-featured.is-active,
.service-card[data-planet="start"]:hover,
.service-card[data-planet="start"]:focus-within,
.service-card[data-planet="start"].is-active,
#videoproduktion:hover,
#videoproduktion:focus-within,
#videoproduktion.is-active {
  border-color: rgba(12, 192, 223, 0.86) !important;
  box-shadow: 0 24px 70px rgba(12, 192, 223, 0.22), inset 0 0 0 1px rgba(255, 222, 89, 0.18) !important;
  transform: translateY(-4px) !important;
}

.trust-copy,
.trust-copy .section-heading,
.trust-copy h2 {
  overflow: visible !important;
}

.trust-copy h2,
.trust-copy .section-heading h2 {
  max-width: min(1120px, calc(100vw - 24px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0.25em !important;
  padding-right: 0.25em !important;
  box-sizing: border-box !important;
  text-align: center !important;
  overflow: visible !important;
}

.about .portrait-image img,
.portrait-placeholder.portrait-image img,
.about-card .portrait-image img,
.about-portrait img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
}

@media (max-width: 980px) {
  .site-header {
    min-height: 64px !important;
    padding: 10px 12px !important;
  }

  .site-header .brand,
  .site-header .brand-logo-shell {
    height: 38px !important;
    min-height: 38px !important;
  }

  .site-header .brand-logo-shell {
    width: clamp(142px, 43vw, 176px) !important;
    max-height: 38px !important;
  }

  .hero-actions {
    justify-content: center !important;
  }

  .hero-actions .button-primary,
  .hero-actions .button-secondary {
    flex: 0 0 min(100%, 326px) !important;
    width: min(100%, 326px) !important;
  }

  .hero-copy .known-from-strip.known-from-strip-desktop,
  .hero .hero-copy .known-from-strip.known-from-strip-desktop {
    width: min(100%, 326px) !important;
    max-width: 326px !important;
    margin: 12px auto 0 !important;
  }

  .hero-copy > .known-from-strip .known-from-logos img,
  .hero-copy > .known-from-strip .hero-metrics article {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
  }

  .trust-copy,
  .trust-copy .section-heading,
  .trust-copy h2,
  .mini-game-heading,
  .launch-game,
  .mission-control,
  .faq,
  .faq .section-heading,
  .faq-list,
  .faq-item,
  .contact-section,
  .contact-section .section-heading,
  .contact-form,
  .site-footer,
  footer.site-footer {
    width: min(100%, 720px) !important;
    max-width: calc(100vw - 32px) !important;
    left: auto !important;
    right: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    transform: none !important;
    justify-self: center !important;
  }

  .trust-copy h2,
  .trust-copy .section-heading h2 {
    width: 100% !important;
    max-width: calc(100vw - 20px) !important;
    padding-left: 0.52em !important;
    padding-right: 0.52em !important;
    font-size: clamp(2rem, 10vw, 3.25rem) !important;
    line-height: 1.02 !important;
    word-break: normal !important;
  }
}

@media (max-width: 380px) {
  .hero-copy > .known-from-strip .hero-metrics strong {
    font-size: 0.70rem !important;
  }

  .hero-copy > .known-from-strip .hero-metrics span {
    font-size: 0.35rem !important;
    letter-spacing: 0.02em !important;
  }
}

body {
  background:
    radial-gradient(circle at 76% 24%, rgba(255, 222, 89, 0.10), transparent 32%),
    radial-gradient(circle at 22% 30%, rgba(12, 192, 223, 0.18), transparent 36%),
    radial-gradient(circle at 58% 68%, rgba(75, 214, 164, 0.13), transparent 40%),
    #031716 !important;
}

:root[data-theme="light"] body {
  background:
    radial-gradient(circle at 76% 24%, rgba(255, 222, 89, 0.16), transparent 34%),
    radial-gradient(circle at 22% 30%, rgba(12, 192, 223, 0.18), transparent 38%),
    radial-gradient(circle at 58% 68%, rgba(75, 214, 164, 0.13), transparent 42%),
    #f8fbfa !important;
}

.site-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 74px !important;
  padding: 13px clamp(18px, 2.6vw, 30px) !important;
  background:
    radial-gradient(circle at 16% 50%, rgba(12, 192, 223, 0.12), transparent 32%),
    radial-gradient(circle at 88% 52%, rgba(255, 222, 89, 0.09), transparent 32%),
    rgba(3, 17, 16, 0.72) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.18) !important;
}

:root[data-theme="light"] .site-header {
  background:
    radial-gradient(circle at 16% 50%, rgba(12, 192, 223, 0.14), transparent 34%),
    radial-gradient(circle at 88% 52%, rgba(255, 222, 89, 0.14), transparent 34%),
    rgba(248, 253, 251, 0.86) !important;
  border-color: rgba(4, 23, 22, 0.12) !important;
  box-shadow: 0 18px 44px rgba(12, 54, 49, 0.10) !important;
}

.site-header .brand {
  align-self: stretch !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

.site-header .brand-logo-shell {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: clamp(176px, 13vw, 218px) !important;
  height: 48px !important;
  min-height: 48px !important;
  margin-top: auto !important;
  margin-bottom: auto !important;
  padding: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

.site-header .brand-wordmark {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: left center !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

.desktop-nav,
.site-header .header-actions > .button-small {
  display: none !important;
}

.mobile-nav {
  position: absolute !important;
  top: calc(100% + 10px) !important;
  right: clamp(12px, 2vw, 28px) !important;
  z-index: 60 !important;
  display: grid !important;
  width: min(320px, calc(100vw - 32px)) !important;
  padding: 10px !important;
  gap: 8px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  background:
    radial-gradient(circle at 16% 20%, rgba(12, 192, 223, 0.16), transparent 44%),
    radial-gradient(circle at 82% 86%, rgba(255, 222, 89, 0.12), transparent 46%),
    rgba(4, 18, 17, 0.96) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.32) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(-8px) scale(0.985) !important;
  transition: opacity 180ms ease, transform 180ms ease !important;
}

:root[data-theme="light"] .mobile-nav {
  background:
    radial-gradient(circle at 16% 20%, rgba(12, 192, 223, 0.16), transparent 44%),
    radial-gradient(circle at 82% 86%, rgba(255, 222, 89, 0.16), transparent 46%),
    rgba(250, 253, 251, 0.98) !important;
  border-color: rgba(4, 23, 22, 0.14) !important;
  box-shadow: 0 24px 70px rgba(12, 54, 49, 0.16) !important;
}

.site-header.menu-open .mobile-nav,
.mobile-nav.is-open {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) scale(1) !important;
}

.mobile-nav a {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 44px !important;
  padding: 10px 12px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  background: rgba(255, 255, 255, 0.045) !important;
  color: var(--text) !important;
  text-decoration: none !important;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease !important;
}

:root[data-theme="light"] .mobile-nav a {
  border-color: rgba(4, 23, 22, 0.10) !important;
  background: rgba(4, 23, 22, 0.045) !important;
}

.mobile-nav a:hover,
.mobile-nav a:focus-visible {
  border-color: rgba(12, 192, 223, 0.62) !important;
  background: linear-gradient(110deg, rgba(12, 192, 223, 0.14), rgba(255, 222, 89, 0.12)) !important;
  transform: translateX(2px) !important;
}

.mobile-nav a[href="#strategie"] {
  border-left: 0 !important;
  border-color: rgba(255, 222, 89, 0.36) !important;
  background: linear-gradient(100deg, #0cc0df, #7ad89f, #ffde59) !important;
  color: #061312 !important;
}

.hero {
  position: relative !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 74% 48%, rgba(12, 192, 223, 0.25), transparent 30%),
    radial-gradient(circle at 83% 57%, rgba(120, 222, 158, 0.19), transparent 34%),
    radial-gradient(circle at 91% 43%, rgba(255, 222, 89, 0.12), transparent 38%),
    radial-gradient(circle at 18% 50%, rgba(12, 192, 223, 0.13), transparent 38%),
    transparent !important;
  box-shadow: 0 0 0 100vmax transparent !important;
}

:root[data-theme="light"] .hero {
  background:
    radial-gradient(circle at 74% 48%, rgba(12, 192, 223, 0.20), transparent 30%),
    radial-gradient(circle at 83% 57%, rgba(120, 222, 158, 0.18), transparent 34%),
    radial-gradient(circle at 91% 43%, rgba(255, 222, 89, 0.16), transparent 38%),
    radial-gradient(circle at 18% 50%, rgba(12, 192, 223, 0.11), transparent 38%),
    transparent !important;
}

.hero::before {
  content: "" !important;
  position: absolute !important;
  inset: -22% -32% !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background:
    radial-gradient(ellipse at 78% 44%, rgba(12, 192, 223, 0.22), transparent 42%),
    radial-gradient(ellipse at 86% 61%, rgba(255, 222, 89, 0.13), transparent 46%),
    linear-gradient(115deg, transparent 0%, rgba(12, 192, 223, 0.06) 45%, transparent 74%) !important;
  filter: blur(10px) !important;
}

.hero-visual,
.phone-shell,
.phone-wrap,
.phone-halo,
.phone-stage {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

.hero-visual::after,
.phone-shell::before,
.phone-shell::after,
.phone-wrap::before,
.phone-wrap::after,
.phone-stage::before,
.phone-stage::after {
  content: none !important;
  display: none !important;
}

.hero-visual::before {
  content: "" !important;
  position: absolute !important;
  inset: -18% -38% !important;
  z-index: -1 !important;
  border-radius: 999px !important;
  background:
    radial-gradient(circle at 44% 46%, rgba(12, 192, 223, 0.34), transparent 34%),
    radial-gradient(circle at 62% 58%, rgba(102, 222, 168, 0.23), transparent 44%),
    radial-gradient(circle at 78% 62%, rgba(255, 222, 89, 0.16), transparent 54%) !important;
  filter: blur(18px) !important;
  pointer-events: none !important;
}

.known-from-strip.known-from-strip-mobile,
.hero .known-from-strip-mobile,
.hero-visual > .known-from-strip,
.hero-visual .known-from-strip,
.hero-visual > .results-medals,
.hero-visual .results-medals,
.trust-strip .results-medals,
.proof-grid {
  display: none !important;
}

.hero-copy .known-from-strip.known-from-strip-desktop {
  display: flex !important;
  flex-direction: column !important;
  width: min(100%, 338px) !important;
  max-width: 338px !important;
  margin: 12px 0 0 0 !important;
  gap: 7px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.hero-copy .known-from-logos img,
.hero-copy .hero-metrics article {
  width: 100% !important;
  min-width: 0 !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

.hero-copy .hero-metrics article {
  display: grid !important;
  align-content: center !important;
  justify-items: center !important;
  gap: 2px !important;
  padding: 5px 3px !important;
  border: 1px solid rgba(12, 192, 223, 0.44) !important;
  background:
    radial-gradient(circle at 82% 82%, rgba(12, 192, 223, 0.17), transparent 44%),
    rgba(12, 54, 49, 0.70) !important;
}

:root[data-theme="light"] .hero-copy .hero-metrics article {
  background:
    radial-gradient(circle at 82% 82%, rgba(12, 192, 223, 0.15), transparent 44%),
    rgba(248, 253, 251, 0.92) !important;
}

.hero-copy .hero-metrics strong {
  font-family: Fredoka, var(--font-display), sans-serif !important;
  font-size: clamp(0.80rem, 0.78vw, 0.92rem) !important;
  line-height: 1 !important;
}

.hero-copy .hero-metrics span {
  font-family: var(--font-body), Inter, sans-serif !important;
  font-size: clamp(0.38rem, 0.40vw, 0.48rem) !important;
  line-height: 1.05 !important;
  letter-spacing: 0.035em !important;
  text-transform: uppercase !important;
}

.service-card.service-card-featured:hover,
.service-card.service-card-featured:focus-within,
.service-card:first-child:hover,
.service-card:first-child:focus-within,
#videoproduktion:hover,
#videoproduktion:focus-within {
  border-color: rgba(12, 192, 223, 0.86) !important;
  box-shadow: 0 24px 70px rgba(12, 192, 223, 0.22), inset 0 0 0 1px rgba(255, 222, 89, 0.18) !important;
  transform: translateY(-4px) !important;
}

.trust-copy .section-heading,
.trust-copy h2,
.trust-copy .section-heading h2 {
  max-width: min(100%, 1180px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

.about .portrait-image,
.about .portrait-placeholder,
.portrait-image {
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
}

.about .portrait-image img,
.about .portrait-placeholder img,
.portrait-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
}

@media (max-width: 980px) {
  .site-header {
    min-height: 66px !important;
    padding: 10px 14px !important;
  }

  .site-header .brand-logo-shell {
    width: clamp(138px, 43vw, 176px) !important;
    height: 38px !important;
    min-height: 38px !important;
  }

  .site-header .brand-wordmark {
    object-position: left center !important;
  }

  .hero-copy .known-from-strip.known-from-strip-desktop {
    width: min(100%, 326px) !important;
    max-width: 326px !important;
    margin: 12px auto 0 !important;
  }

  .hero-copy .known-from-logos img,
  .hero-copy .hero-metrics article {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
  }

  .hero-copy .hero-metrics strong {
    font-size: clamp(0.78rem, 3.8vw, 0.92rem) !important;
  }

  .hero-copy .hero-metrics span {
    font-size: clamp(0.38rem, 2.4vw, 0.47rem) !important;
  }

  .trust-copy,
  .trust-copy .section-heading,
  .trust-copy h2,
  .mini-game-heading,
  .launch-game,
  .mission-control,
  .faq,
  .faq .section-heading,
  .faq-list,
  .faq-item,
  .contact-section,
  .contact-section .section-heading,
  .contact-form,
  .site-footer,
  footer.site-footer {
    width: min(100%, 720px) !important;
    max-width: calc(100vw - 32px) !important;
    left: auto !important;
    right: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    transform: none !important;
    justify-self: center !important;
  }

  .trust-copy h2,
  .trust-copy .section-heading h2 {
    width: 100% !important;
    max-width: calc(100vw - 18px) !important;
    padding-left: 0.52em !important;
    padding-right: 0.52em !important;
    text-align: center !important;
    overflow: visible !important;
    word-break: normal !important;
    font-size: clamp(1.95rem, 9.4vw, 3.1rem) !important;
    line-height: 1.02 !important;
  }

  .faq-list,
  .contact-form,
  .launch-game {
    text-align: left !important;
  }
}

@media (max-width: 380px) {
  .hero-copy .hero-metrics strong {
    font-size: 0.75rem !important;
  }

  .hero-copy .hero-metrics span {
    font-size: 0.36rem !important;
  }
}

html:not([data-theme]) {
  color-scheme: dark !important;
}

body {
  overflow-x: hidden !important;
}

.site-header {
  position: sticky !important;
  top: max(10px, env(safe-area-inset-top)) !important;
  z-index: 1000 !important;
  display: flex !important;
  align-items: center !important;
  min-height: 72px !important;
  padding: 0 clamp(18px, 2.2vw, 34px) !important;
  background:
    radial-gradient(circle at 18% 24%, rgba(12, 192, 223, 0.15), transparent 42%),
    radial-gradient(circle at 88% 40%, rgba(255, 222, 89, 0.10), transparent 45%),
    rgba(6, 39, 35, 0.76) !important;
  backdrop-filter: blur(20px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.2) !important;
}

:root[data-theme="light"] .site-header {
  background:
    radial-gradient(circle at 18% 24%, rgba(12, 192, 223, 0.16), transparent 42%),
    radial-gradient(circle at 88% 40%, rgba(255, 222, 89, 0.12), transparent 45%),
    rgba(246, 252, 250, 0.90) !important;
}

.site-header .brand {
  align-self: stretch !important;
  display: flex !important;
  align-items: center !important;
  min-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.site-header .brand-logo-shell {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: clamp(174px, 13vw, 214px) !important;
  height: 44px !important;
  min-height: 44px !important;
  margin: auto 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

.site-header .brand-wordmark {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: left center !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

.site-header .desktop-nav,
.site-header .header-actions > .button-small {
  display: none !important;
}

.mobile-nav {
  right: clamp(12px, 3vw, 30px) !important;
  left: auto !important;
  top: calc(100% + 10px) !important;
  width: min(330px, calc(100vw - 28px)) !important;
  padding: 10px !important;
  border-radius: 16px !important;
  background:
    radial-gradient(circle at 14% 10%, rgba(12, 192, 223, 0.14), transparent 38%),
    radial-gradient(circle at 92% 88%, rgba(255, 222, 89, 0.12), transparent 42%),
    rgba(6, 34, 31, 0.94) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.34) !important;
}

:root[data-theme="light"] .mobile-nav {
  background:
    radial-gradient(circle at 14% 10%, rgba(12, 192, 223, 0.16), transparent 38%),
    radial-gradient(circle at 92% 88%, rgba(255, 222, 89, 0.14), transparent 42%),
    rgba(248, 253, 250, 0.96) !important;
}

.mobile-nav a {
  display: flex !important;
  align-items: center !important;
  min-height: 44px !important;
  border-radius: 10px !important;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease !important;
}

.mobile-nav a:hover,
.mobile-nav a:focus-visible {
  transform: translateX(3px) !important;
  border-color: rgba(12, 192, 223, 0.62) !important;
  background:
    linear-gradient(90deg, rgba(12, 192, 223, 0.20), rgba(106, 222, 167, 0.12), rgba(255, 222, 89, 0.13)) !important;
}

.mobile-nav a[href="#strategie"] {
  background: linear-gradient(100deg, #0cc0df 0%, #7edb9c 55%, #ffde59 100%) !important;
  color: #020807 !important;
  border-color: transparent !important;
  box-shadow: 0 16px 40px rgba(12, 192, 223, 0.20) !important;
}

.hero,
:root[data-theme="dark"] .hero,
:root:not([data-theme="light"]) .hero {
  position: relative !important;
  overflow: hidden !important;
  background:
    radial-gradient(ellipse at 78% 48%, rgba(12, 192, 223, 0.34) 0%, rgba(12, 192, 223, 0.17) 25%, transparent 60%),
    radial-gradient(ellipse at 87% 60%, rgba(126, 219, 156, 0.24) 0%, transparent 54%),
    radial-gradient(ellipse at 95% 72%, rgba(255, 222, 89, 0.18) 0%, transparent 72%),
    radial-gradient(ellipse at 28% 58%, rgba(12, 192, 223, 0.15) 0%, transparent 56%),
    linear-gradient(115deg, rgba(0, 30, 28, 0.62), rgba(3, 22, 20, 0.24) 50%, rgba(0, 42, 38, 0.42)),
    var(--bg) !important;
  box-shadow: 0 0 0 100vmax var(--bg) !important;
  clip-path: inset(0 -100vmax) !important;
}

:root[data-theme="light"] .hero {
  background:
    radial-gradient(ellipse at 78% 48%, rgba(12, 192, 223, 0.28) 0%, rgba(12, 192, 223, 0.13) 26%, transparent 62%),
    radial-gradient(ellipse at 87% 60%, rgba(126, 219, 156, 0.18) 0%, transparent 56%),
    radial-gradient(ellipse at 95% 72%, rgba(255, 222, 89, 0.16) 0%, transparent 74%),
    radial-gradient(ellipse at 28% 58%, rgba(12, 192, 223, 0.11) 0%, transparent 58%),
    linear-gradient(115deg, rgba(250, 253, 252, 0.96), rgba(239, 252, 252, 0.86) 50%, rgba(253, 252, 243, 0.96)),
    var(--bg) !important;
}

.hero::before {
  content: "" !important;
  position: absolute !important;
  inset: -45% -120vw !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background:
    radial-gradient(ellipse at 74% 47%, rgba(12, 192, 223, 0.24), transparent 44%),
    radial-gradient(ellipse at 88% 66%, rgba(255, 222, 89, 0.14), transparent 42%),
    radial-gradient(ellipse at 38% 60%, rgba(126, 219, 156, 0.10), transparent 48%) !important;
  filter: blur(26px) !important;
}

.hero-visual::before {
  content: "" !important;
  position: absolute !important;
  inset: -26% -48% !important;
  z-index: -1 !important;
  pointer-events: none !important;
  border-radius: 999px !important;
  background:
    radial-gradient(ellipse at 48% 48%, rgba(12, 192, 223, 0.30), transparent 43%),
    radial-gradient(ellipse at 62% 54%, rgba(126, 219, 156, 0.24), transparent 51%),
    radial-gradient(ellipse at 74% 64%, rgba(255, 222, 89, 0.18), transparent 61%) !important;
  filter: blur(18px) !important;
}

.proof-grid,
.known-from-strip.known-from-strip-mobile,
.hero .known-from-strip-mobile,
.hero-visual > .known-from-strip,
.hero-visual .known-from-strip,
.hero-visual > .results-medals,
.trust-strip .results-medals {
  display: none !important;
}

.known-from-strip > span,
.known-from-strip::before,
.known-from-strip::after,
.known-from-strip .known-from-label,
.known-from-strip .known-from-title,
.known-from-strip.known-from-strip-desktop > span,
.hero .known-from-strip.known-from-strip-desktop > span {
  content: none !important;
  display: none !important;
}

.known-from-strip .hero-metrics article {
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
  gap: 2px !important;
  overflow: visible !important;
  padding: 5px 4px !important;
  border: 1px solid rgba(12, 192, 223, 0.44) !important;
  background:
    radial-gradient(circle at 82% 82%, rgba(12, 192, 223, 0.16), transparent 44%),
    rgba(12, 54, 49, 0.70) !important;
}

.known-from-strip .hero-metrics strong {
  font-family: Fredoka, var(--font-display), sans-serif !important;
  font-size: clamp(0.82rem, 0.86vw, 0.95rem) !important;
  line-height: 1 !important;
  text-transform: none !important;
}

.about .portrait-image,
.portrait-placeholder.portrait-image,
.about .portrait-placeholder,
.about-portrait {
  overflow: hidden !important;
}

.about .portrait-image img,
.portrait-placeholder.portrait-image img,
.about-card .portrait-image img,
.about-portrait img {
  object-fit: contain !important;
  object-position: center center !important;
  width: 100% !important;
  height: 100% !important;
}

.legal-page .site-header .brand-logo-shell,
body:has(.legal-page) .site-header .brand-logo-shell {
  width: clamp(174px, 13vw, 214px) !important;
  height: 44px !important;
}

@media (max-width: 980px) {
  .site-header {
    min-height: 62px !important;
    padding-inline: 12px !important;
  }

  .site-header .brand-logo-shell {
    width: clamp(142px, 42vw, 176px) !important;
    height: 36px !important;
    min-height: 36px !important;
  }

  .hero-copy .known-from-strip.known-from-strip-desktop,
  .hero .known-from-strip.known-from-strip-desktop {
    width: min(100%, 326px) !important;
    max-width: 326px !important;
    margin: 12px auto 0 !important;
  }

  .known-from-strip .known-from-logos img,
  .known-from-strip .hero-metrics article {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
  }

  .trust-copy,
  .trust-copy .section-heading,
  .trust-copy h2,
  .mini-game-heading,
  .launch-game,
  .mission-control,
  .faq,
  .faq .section-heading,
  .faq-list,
  .faq-item,
  .contact-section,
  .contact-section .section-heading,
  .contact-form,
  .site-footer,
  footer.site-footer {
    width: min(100%, 720px) !important;
    max-width: calc(100vw - 32px) !important;
    left: auto !important;
    right: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    transform: none !important;
    justify-self: center !important;
  }

  .trust-copy h2,
  .trust-copy .section-heading h2 {
    width: 100% !important;
    max-width: calc(100vw - 20px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0.48em !important;
    padding-right: 0.48em !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    word-break: normal !important;
    text-align: center !important;
    font-size: clamp(2rem, 10vw, 3.18rem) !important;
    line-height: 1.02 !important;
  }
}

@media (max-width: 380px) {
  .known-from-strip .hero-metrics strong {
    font-size: 0.76rem !important;
  }

  .known-from-strip .hero-metrics span {
    font-size: 0.38rem !important;
  }
}

:root:not([data-theme="light"]) {
  color-scheme: dark !important;
}

:root[data-theme="dark"] .site-header,
:root:not([data-theme="light"]) .site-header {
  background:
    linear-gradient(105deg, rgba(4, 24, 22, 0.88), rgba(7, 37, 33, 0.76) 54%, rgba(22, 40, 24, 0.72)),
    rgba(4, 23, 21, 0.80) !important;
}

:root[data-theme="light"] .site-header {
  background:
    linear-gradient(105deg, rgba(236, 254, 255, 0.78), rgba(251, 255, 250, 0.84) 52%, rgba(255, 253, 233, 0.78)),
    rgba(248, 254, 252, 0.86) !important;
}

.site-header {
  align-items: center !important;
  overflow: visible !important;
}

.site-header .brand,
.site-header .brand-logo-shell,
.brand-logo-shell {
  align-self: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  margin-top: auto !important;
  margin-bottom: auto !important;
  line-height: 1 !important;
  overflow: visible !important;
}

.site-header .brand-logo-shell,
.brand-logo-shell {
  width: clamp(172px, 16vw, 214px) !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
}

.site-header .brand-logo-shell::before,
.site-header .brand-logo-shell::after,
.brand-logo-shell::before,
.brand-logo-shell::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

.site-header .brand-logo-shell img,
.brand-logo-shell img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: left center !important;
}

body.legal-page .site-header .brand-logo-shell,
.legal-page .brand-logo-shell {
  width: clamp(172px, 16vw, 214px) !important;
  height: 42px !important;
}

.desktop-nav,
.header-actions > .button-small {
  display: none !important;
}

.mobile-nav {
  z-index: 30 !important;
}

.mobile-nav a {
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, color 180ms ease !important;
}

.mobile-nav a:hover,
.mobile-nav a:focus-visible {
  transform: translateX(3px) !important;
  border-color: rgba(12, 192, 223, 0.72) !important;
  background: linear-gradient(95deg, rgba(12, 192, 223, 0.18), rgba(255, 222, 89, 0.12)) !important;
}

.mobile-nav a[href="#strategie"]::before,
.mobile-nav a[href="#strategie"]::after {
  display: none !important;
  content: none !important;
}

.hero,
:root[data-theme="dark"] .hero,
:root:not([data-theme="light"]) .hero,
:root[data-theme="light"] .hero {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  background:
    radial-gradient(circle at 73% 44%, rgba(12, 192, 223, 0.34) 0%, rgba(12, 192, 223, 0.18) 24%, transparent 58%),
    radial-gradient(circle at 83% 62%, rgba(108, 220, 166, 0.24) 0%, transparent 54%),
    radial-gradient(circle at 92% 70%, rgba(255, 222, 89, 0.17) 0%, transparent 68%),
    radial-gradient(circle at 18% 58%, rgba(12, 192, 223, 0.12) 0%, transparent 55%),
    linear-gradient(115deg, rgba(3, 28, 26, 0.62), rgba(3, 28, 26, 0.26) 52%, rgba(5, 44, 39, 0.42)),
    var(--bg) !important;
  box-shadow: 0 0 0 100vmax var(--bg) !important;
  clip-path: inset(0 -100vmax) !important;
}

:root[data-theme="light"] .hero {
  background:
    radial-gradient(circle at 73% 44%, rgba(12, 192, 223, 0.30) 0%, rgba(12, 192, 223, 0.14) 24%, transparent 58%),
    radial-gradient(circle at 83% 62%, rgba(108, 220, 166, 0.20) 0%, transparent 54%),
    radial-gradient(circle at 92% 70%, rgba(255, 222, 89, 0.16) 0%, transparent 68%),
    radial-gradient(circle at 18% 58%, rgba(12, 192, 223, 0.10) 0%, transparent 55%),
    linear-gradient(115deg, rgba(244, 253, 253, 0.96), rgba(244, 254, 252, 0.86) 52%, rgba(255, 253, 236, 0.94)),
    var(--bg) !important;
}

.hero::before {
  content: "" !important;
  position: absolute !important;
  inset: -34% -140vw !important;
  z-index: -1 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 74% 48%, rgba(12, 192, 223, 0.24), transparent 42%),
    radial-gradient(circle at 88% 68%, rgba(255, 222, 89, 0.14), transparent 44%),
    radial-gradient(circle at 38% 58%, rgba(108, 220, 166, 0.12), transparent 46%) !important;
  filter: blur(24px) !important;
}

.hero-visual,
.hero-visual *,
.phone-shell,
.phone-frame-custom,
.phone-glow {
  box-shadow: none !important;
}

.hero-visual,
.phone-shell,
.phone-frame-custom,
.phone-glow {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

.hero-visual::before {
  content: "" !important;
  position: absolute !important;
  inset: -24% -46% !important;
  z-index: -1 !important;
  pointer-events: none !important;
  border-radius: 999px !important;
  background:
    radial-gradient(circle at 48% 48%, rgba(12, 192, 223, 0.34), transparent 40%),
    radial-gradient(circle at 62% 54%, rgba(108, 220, 166, 0.24), transparent 48%),
    radial-gradient(circle at 72% 62%, rgba(255, 222, 89, 0.18), transparent 58%) !important;
  filter: blur(18px) !important;
}

.known-from-strip > span,
.known-from-strip::before,
.known-from-strip::after,
.known-from-strip.known-from-strip-desktop > span,
.hero .known-from-strip.known-from-strip-desktop > span {
  display: none !important;
  content: none !important;
}

.known-from-strip.known-from-strip-mobile,
.hero .known-from-strip-mobile,
.hero-visual > .known-from-strip,
.hero-visual .known-from-strip,
.trust-strip .known-from-strip {
  display: none !important;
}

.hero-copy .known-from-strip.known-from-strip-desktop,
.hero .hero-copy .known-from-strip.known-from-strip-desktop {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: min(100%, 338px) !important;
  max-width: 338px !important;
  margin: 12px auto 0 0 !important;
  gap: 7px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.hero-copy .known-from-logos,
.hero-copy .hero-metrics {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  width: 100% !important;
  gap: 7px !important;
  margin: 0 !important;
}

.hero-copy .known-from-logos img,
.hero-copy .hero-metrics article {
  width: 100% !important;
  min-width: 0 !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
}

.hero-copy .known-from-logos img {
  object-fit: contain !important;
  padding: 7px 9px !important;
  background: rgba(255, 255, 255, 0.96) !important;
}

.hero-copy .hero-metrics article {
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
  gap: 2px !important;
  overflow: visible !important;
  padding: 5px 4px !important;
  border: 1px solid rgba(12, 192, 223, 0.42) !important;
  background:
    radial-gradient(circle at 82% 82%, rgba(12, 192, 223, 0.16), transparent 44%),
    rgba(12, 54, 49, 0.70) !important;
}

:root[data-theme="light"] .hero-copy .hero-metrics article {
  background:
    radial-gradient(circle at 82% 82%, rgba(12, 192, 223, 0.14), transparent 44%),
    rgba(248, 253, 251, 0.90) !important;
}

.hero-copy .hero-metrics strong,
.hero-copy .hero-metrics span {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

.hero-copy .hero-metrics strong {
  font-family: Fredoka, var(--font-display), sans-serif !important;
  font-size: clamp(0.80rem, 0.86vw, 0.94rem) !important;
  line-height: 1 !important;
  text-transform: none !important;
}

.hero-copy .hero-metrics span {
  font-family: var(--font-body), Inter, sans-serif !important;
  font-size: clamp(0.40rem, 0.44vw, 0.50rem) !important;
  line-height: 1.05 !important;
  letter-spacing: 0.035em !important;
  text-transform: uppercase !important;
}

#leistungen .service-card:first-of-type:hover,
#leistungen .service-card:first-of-type:focus-within,
#leistungen .service-card:first-of-type.is-active,
.service-card.service-card-featured:hover,
.service-card.service-card-featured:focus-within,
.service-card.service-card-featured.is-active,
#videoproduktion:hover,
#videoproduktion:focus-within,
#videoproduktion.is-active {
  border-color: rgba(12, 192, 223, 0.86) !important;
  box-shadow: 0 24px 70px rgba(12, 192, 223, 0.22), inset 0 0 0 1px rgba(255, 222, 89, 0.18) !important;
  transform: translateY(-4px) !important;
}

.about .portrait-image,
.portrait-placeholder.portrait-image {
  overflow: hidden !important;
}

.about .portrait-image img,
.portrait-placeholder.portrait-image img,
.about-card .portrait-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
}

@media (max-width: 980px) {
  .site-header .brand-logo-shell,
  .brand-logo-shell {
    width: clamp(142px, 43vw, 176px) !important;
    height: 36px !important;
    min-height: 36px !important;
  }

  .hero-copy .known-from-strip.known-from-strip-desktop,
  .hero .hero-copy .known-from-strip.known-from-strip-desktop {
    width: min(100%, 326px) !important;
    max-width: 326px !important;
    margin: 12px auto 0 !important;
  }

  .hero-copy .known-from-logos img,
  .hero-copy .hero-metrics article {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
  }

  .trust-copy,
  .trust-copy .section-heading,
  .trust-copy h2,
  #referenzen,
  #mini-game,
  .mini-game-heading,
  .launch-game,
  .mission-control,
  #faq,
  .faq,
  .faq .section-heading,
  .faq-list,
  .faq-item,
  #strategie,
  .contact-section,
  .contact-section .section-heading,
  .contact-form,
  .site-footer,
  footer.site-footer {
    width: min(100%, 720px) !important;
    max-width: calc(100vw - 32px) !important;
    left: auto !important;
    right: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    transform: none !important;
    justify-self: center !important;
  }

  .trust-copy h2,
  .trust-copy .section-heading h2 {
    width: 100% !important;
    max-width: calc(100vw - 20px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0.45em !important;
    padding-right: 0.45em !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    word-break: normal !important;
    text-align: center !important;
    font-size: clamp(1.95rem, 9.7vw, 3.15rem) !important;
    line-height: 1.03 !important;
  }
}

@media (max-width: 380px) {
  .hero-copy .hero-metrics strong {
    font-size: 0.76rem !important;
  }

  .hero-copy .hero-metrics span {
    font-size: 0.38rem !important;
  }
}

html:not([data-theme]) {
  color-scheme: dark;
}

.site-header .brand {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  align-self: center !important;
  flex: 0 0 auto !important;
  width: clamp(174px, 15vw, 218px) !important;
  height: 44px !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  line-height: 0 !important;
  transform: none !important;
}

.site-header .brand-logo-shell {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 44px !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  line-height: 0 !important;
  transform: none !important;
}

.site-header .brand-wordmark {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: left center !important;
  background: transparent !important;
  transform: none !important;
}

.site-header .mobile-nav a {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 44px !important;
  padding: 0 14px !important;
  border-radius: 9px !important;
  background: rgba(255, 255, 255, 0.045) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: var(--text) !important;
  text-decoration: none !important;
}

.hero::after,
.hero-visual::after,
.phone-glow,
.phone-shell::before,
.phone-shell::after {
  content: none !important;
  display: none !important;
}

.hero-visual {
  position: relative !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.hero-copy > .known-from-strip.known-from-strip-desktop {
  --hero-proof-width: min(100%, 338px);
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: var(--hero-proof-width) !important;
  max-width: var(--hero-proof-width) !important;
  margin: 12px auto 0 0 !important;
  gap: 7px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.hero-copy > .known-from-strip .hero-metrics article {
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
  gap: 2px !important;
  overflow: visible !important;
  padding: 5px 4px !important;
  border: 1px solid rgba(12, 192, 223, 0.48) !important;
  background: radial-gradient(circle at 82% 82%, rgba(12, 192, 223, 0.18), transparent 44%), rgba(12, 54, 49, 0.74) !important;
}

.about .portrait-image img,
.portrait-placeholder.portrait-image img,
.about-card .portrait-image img,
.about-portrait img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  padding: 0 !important;
}

@media (max-width: 980px) {
  .site-header {
    min-height: 64px !important;
    padding: 10px 12px !important;
  }

  .site-header .brand {
    width: clamp(142px, 43vw, 176px) !important;
    height: 36px !important;
    min-height: 36px !important;
  }

  .site-header .brand-logo-shell {
    height: 36px !important;
    min-height: 36px !important;
  }

  .hero-copy > .known-from-strip.known-from-strip-desktop {
    width: min(100%, 326px) !important;
    max-width: 326px !important;
    margin: 12px auto 0 !important;
  }

  .hero-copy > .known-from-strip .known-from-logos img,
  .hero-copy > .known-from-strip .hero-metrics article {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
  }

  .trust-strip,
  .trust-copy,
  .trust-copy .section-heading,
  .trust-copy h2,
  .testimonials,
  .testimonials .section-heading,
  .mini-game-heading,
  .launch-game,
  .mission-control,
  .faq,
  .faq .section-heading,
  .faq-list,
  .faq-item,
  .contact-section,
  .contact-section .section-heading,
  .contact-form,
  .site-footer,
  footer.site-footer {
    width: min(100%, 720px) !important;
    max-width: calc(100vw - 32px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    justify-self: center !important;
    text-align: center !important;
  }

  .trust-copy h2,
  .trust-copy .section-heading h2 {
    width: 100% !important;
    max-width: calc(100vw - 18px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0.62em !important;
    padding-right: 0.62em !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    word-break: normal !important;
    text-align: center !important;
    font-size: clamp(2rem, 9.2vw, 3.2rem) !important;
    line-height: 1.04 !important;
  }
}

.site-header,
:root:not([data-theme="light"]) .site-header {
  position: sticky !important;
  top: max(12px, env(safe-area-inset-top)) !important;
  z-index: 1000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 74px !important;
  padding: 14px 18px !important;
  gap: 16px !important;
  background:
    radial-gradient(circle at 78% 42%, rgba(12, 192, 223, 0.13), transparent 48%),
    radial-gradient(circle at 92% 70%, rgba(255, 222, 89, 0.08), transparent 56%),
    rgba(5, 32, 29, 0.72) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: 0 18px 70px rgba(0, 0, 0, 0.22) !important;
  backdrop-filter: blur(18px) !important;
}

:root[data-theme="light"] .site-header {
  background:
    radial-gradient(circle at 78% 42%, rgba(12, 192, 223, 0.16), transparent 48%),
    radial-gradient(circle at 92% 70%, rgba(255, 222, 89, 0.12), transparent 56%),
    rgba(248, 253, 250, 0.88) !important;
  border-color: rgba(10, 35, 34, 0.12) !important;
  box-shadow: 0 18px 70px rgba(6, 45, 47, 0.1) !important;
}

.site-header .brand {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  align-self: center !important;
  height: 44px !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  flex: 0 0 auto !important;
  overflow: visible !important;
  background: transparent !important;
  transform: none !important;
}

.site-header .brand::before,
.site-header .brand::after,
.site-header .brand-logo-shell::before,
.site-header .brand-logo-shell::after,
.site-header .brand-wordmark::before,
.site-header .brand-wordmark::after {
  content: none !important;
  display: none !important;
  background: none !important;
  box-shadow: none !important;
}

.site-header .brand-logo-shell {
  position: relative !important;
  display: block !important;
  width: clamp(174px, 15vw, 218px) !important;
  height: 44px !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  transform: none !important;
  line-height: 0 !important;
}

.site-header .brand-wordmark {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: left center !important;
  background: transparent !important;
  transform: none !important;
}

:root[data-theme="light"] .brand-wordmark-dark,
:root:not([data-theme="light"]) .brand-wordmark-light {
  opacity: 1 !important;
  visibility: visible !important;
}

:root[data-theme="light"] .brand-wordmark-light,
:root:not([data-theme="light"]) .brand-wordmark-dark {
  opacity: 0 !important;
  visibility: hidden !important;
}

.site-header .header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-left: auto !important;
}

.site-header .menu-toggle {
  display: grid !important;
  place-items: center !important;
  flex: 0 0 44px !important;
}

.site-header .mobile-nav {
  position: absolute !important;
  top: calc(100% + 10px) !important;
  right: 0 !important;
  width: min(360px, calc(100vw - 32px)) !important;
  display: grid !important;
  gap: 8px !important;
  padding: 12px !important;
  border-radius: 12px !important;
  background: rgba(5, 32, 29, 0.96) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: 0 22px 80px rgba(0, 0, 0, 0.34) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(-8px) !important;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease !important;
}

:root[data-theme="light"] .site-header .mobile-nav {
  background: rgba(248, 253, 250, 0.96) !important;
  border-color: rgba(10, 35, 34, 0.14) !important;
  box-shadow: 0 22px 70px rgba(6, 45, 47, 0.16) !important;
}

.site-header .mobile-nav a {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 44px !important;
  padding: 0 14px !important;
  border-radius: 9px !important;
  background: rgba(255, 255, 255, 0.045) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: var(--text) !important;
  text-decoration: none !important;
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease !important;
}

:root[data-theme="light"] .site-header .mobile-nav a {
  background: rgba(6, 30, 30, 0.045) !important;
  border-color: rgba(6, 30, 30, 0.1) !important;
}

.site-header .mobile-nav a:hover,
.site-header .mobile-nav a:focus-visible {
  background: linear-gradient(90deg, rgba(12, 192, 223, 0.18), rgba(106, 222, 167, 0.14), rgba(255, 222, 89, 0.13)) !important;
  border-color: rgba(12, 192, 223, 0.46) !important;
  transform: translateX(2px) !important;
}

.site-header .mobile-nav a[href="#strategie"] {
  justify-content: center !important;
  color: #061110 !important;
  font-weight: 900 !important;
  background: linear-gradient(90deg, #0cc0df, #84dea7, #ffde59) !important;
  border-color: transparent !important;
}

.site-header .mobile-nav a[href="#strategie"]::before,
.site-header .mobile-nav a[href="#strategie"]::after {
  content: none !important;
  display: none !important;
}

.hero,
:root:not([data-theme="light"]) .hero {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  background:
    radial-gradient(circle at 72% 48%, rgba(12, 192, 223, 0.36) 0%, rgba(12, 192, 223, 0.2) 25%, transparent 66%),
    radial-gradient(circle at 82% 58%, rgba(106, 222, 167, 0.24) 0%, transparent 64%),
    radial-gradient(circle at 96% 68%, rgba(255, 222, 89, 0.18) 0%, transparent 82%),
    radial-gradient(circle at 24% 56%, rgba(12, 192, 223, 0.13) 0%, transparent 60%),
    linear-gradient(110deg, rgba(1, 22, 20, 0.72), rgba(3, 20, 19, 0.4) 52%, rgba(1, 42, 37, 0.56)),
    var(--bg) !important;
  box-shadow: 0 0 0 100vmax var(--bg) !important;
  clip-path: inset(0 -100vmax) !important;
}

:root[data-theme="light"] .hero {
  background:
    radial-gradient(circle at 72% 48%, rgba(12, 192, 223, 0.28) 0%, rgba(12, 192, 223, 0.16) 25%, transparent 68%),
    radial-gradient(circle at 82% 58%, rgba(106, 222, 167, 0.2) 0%, transparent 66%),
    radial-gradient(circle at 96% 68%, rgba(255, 222, 89, 0.17) 0%, transparent 82%),
    radial-gradient(circle at 24% 56%, rgba(12, 192, 223, 0.12) 0%, transparent 60%),
    linear-gradient(110deg, rgba(248, 253, 250, 0.96), rgba(238, 252, 252, 0.9) 52%, rgba(252, 253, 244, 0.96)),
    var(--bg) !important;
}

.hero::after {
  content: none !important;
  display: none !important;
}

.hero-visual {
  position: relative !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.hero-visual::before {
  content: "" !important;
  position: absolute !important;
  inset: -34% -90% !important;
  z-index: -1 !important;
  pointer-events: none !important;
  border-radius: 999px !important;
  background:
    radial-gradient(circle at 42% 45%, rgba(12, 192, 223, 0.36), transparent 46%),
    radial-gradient(circle at 58% 53%, rgba(106, 222, 167, 0.25), transparent 52%),
    radial-gradient(circle at 76% 62%, rgba(255, 222, 89, 0.18), transparent 64%) !important;
  filter: blur(18px) !important;
}

.phone-shell,
.hero-phone,
.hero-phone-wrap,
.hero-phone-device,
.phone-device,
.phone-frame-custom,
.phone-wrap,
.phone-halo,
.phone-video-shell,
.phone-video-wrap {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

.phone-screen {
  background: #000 !important;
  overflow: hidden !important;
}

.proof-grid,
.known-from-strip.known-from-strip-mobile,
.hero .known-from-strip-mobile,
.hero-visual > .known-from-strip,
.hero-visual .known-from-strip,
.hero-visual > .results-medals,
.trust-strip .results-medals,
.trust-strip .known-from-strip {
  display: none !important;
}

.known-from-strip > span,
.known-from-strip .known-from-label,
.known-from-strip .known-from-title,
.known-from-strip::before,
.known-from-strip::after,
.known-from-strip.known-from-strip-desktop > span,
.known-from-strip [class*="label"],
.known-from-strip [class*="title"] {
  content: none !important;
  display: none !important;
}

.hero-copy > .known-from-strip.known-from-strip-desktop {
  --hero-proof-width: min(100%, 338px);
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: var(--hero-proof-width) !important;
  max-width: var(--hero-proof-width) !important;
  margin: 12px auto 0 0 !important;
  gap: 7px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.hero-copy > .known-from-strip .known-from-logos img,
.hero-copy > .known-from-strip .hero-metrics article {
  width: 100% !important;
  min-width: 0 !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
}

.hero-copy > .known-from-strip .hero-metrics article {
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
  overflow: visible !important;
  gap: 2px !important;
  padding: 5px 4px !important;
  border: 1px solid rgba(12, 192, 223, 0.48) !important;
  background: radial-gradient(circle at 82% 82%, rgba(12, 192, 223, 0.18), transparent 44%), rgba(12, 54, 49, 0.74) !important;
}

:root[data-theme="light"] .hero-copy > .known-from-strip .hero-metrics article {
  background: radial-gradient(circle at 82% 82%, rgba(12, 192, 223, 0.12), transparent 44%), rgba(248, 253, 251, 0.92) !important;
}

.hero-copy > .known-from-strip .hero-metrics strong,
.hero-copy > .known-from-strip .hero-metrics span {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  letter-spacing: 0 !important;
}

.hero-copy > .known-from-strip .hero-metrics strong {
  font-family: Fredoka, var(--font-display), sans-serif !important;
  font-size: clamp(0.82rem, 0.86vw, 0.95rem) !important;
  line-height: 1 !important;
}

.hero-copy > .known-from-strip .hero-metrics span {
  font-family: var(--font-body), Inter, sans-serif !important;
  font-size: clamp(0.42rem, 0.44vw, 0.5rem) !important;
  line-height: 1.05 !important;
  text-transform: uppercase !important;
}

#videoproduktion:hover,
#videoproduktion:focus-within,
#videoproduktion.is-active,
#leistungen .service-grid > .service-card:first-of-type:hover,
#leistungen .service-grid > .service-card:first-of-type:focus-within,
#leistungen .service-grid > .service-card:first-of-type.is-active,
.services .service-grid > .service-card:first-of-type:hover,
.services .service-grid > .service-card:first-of-type:focus-within,
.services .service-grid > .service-card:first-of-type.is-active {
  border-color: rgba(12, 192, 223, 0.86) !important;
  box-shadow: 0 24px 70px rgba(12, 192, 223, 0.22), inset 0 0 0 1px rgba(255, 222, 89, 0.18) !important;
  transform: translateY(-4px) !important;
}

.about .portrait-image,
.portrait-placeholder.portrait-image,
.about .portrait-placeholder,
.about-portrait {
  display: grid !important;
  place-items: center !important;
  overflow: visible !important;
  border-radius: 999px !important;
}

.about .portrait-image img,
.portrait-placeholder.portrait-image img,
.about-card .portrait-image img,
.about-portrait img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  max-width: 100% !important;
  max-height: 100% !important;
  padding: 0 !important;
}

@media (max-width: 980px) {
  .site-header {
    min-height: 64px !important;
    padding: 10px 12px !important;
  }

  .site-header .brand-logo-shell {
    width: clamp(142px, 43vw, 176px) !important;
    height: 36px !important;
    min-height: 36px !important;
  }

  .hero-copy > .known-from-strip.known-from-strip-desktop {
    width: min(100%, 326px) !important;
    max-width: 326px !important;
    margin: 12px auto 0 !important;
  }

  .hero-copy > .known-from-strip .known-from-logos img,
  .hero-copy > .known-from-strip .hero-metrics article {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
  }

  .trust-strip,
  .trust-copy,
  .trust-copy .section-heading,
  .trust-copy h2,
  .mini-game-heading,
  .launch-game,
  .mission-control,
  .faq,
  .faq .section-heading,
  .faq-list,
  .faq-item,
  .contact-section,
  .contact-section .section-heading,
  .contact-form,
  .site-footer,
  footer.site-footer {
    width: min(100%, 720px) !important;
    max-width: calc(100vw - 32px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    justify-self: center !important;
    text-align: center !important;
  }

  .trust-copy h2,
  .trust-copy .section-heading h2 {
    width: 100% !important;
    max-width: calc(100vw - 20px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0.52em !important;
    padding-right: 0.52em !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    word-break: normal !important;
    text-align: center !important;
    font-size: clamp(2rem, 9.6vw, 3.25rem) !important;
    line-height: 1.04 !important;
  }
}

@media (max-width: 380px) {
  .hero-copy > .known-from-strip .hero-metrics strong {
    font-size: 0.78rem !important;
  }

  .hero-copy > .known-from-strip .hero-metrics span {
    font-size: 0.39rem !important;
  }
}

.site-header {
  position: sticky !important;
  top: clamp(8px, 1.4vw, 18px) !important;
  z-index: 1000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  width: min(100% - 32px, 1120px) !important;
  min-height: 72px !important;
  margin-inline: auto !important;
  padding: 14px 22px !important;
  overflow: visible !important;
  border: 1px solid rgba(255, 255, 255, 0.13) !important;
  border-radius: 10px !important;
  background:
    linear-gradient(115deg, rgba(12, 54, 49, 0.82), rgba(5, 30, 28, 0.74) 48%, rgba(38, 62, 38, 0.70)),
    rgba(4, 35, 32, 0.74) !important;
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.20) !important;
  backdrop-filter: blur(18px) !important;
}

:root[data-theme="light"] .site-header {
  border-color: rgba(4, 37, 37, 0.12) !important;
  background:
    linear-gradient(115deg, rgba(235, 253, 253, 0.92), rgba(244, 252, 249, 0.84) 48%, rgba(255, 249, 223, 0.78)),
    rgba(248, 253, 252, 0.88) !important;
  box-shadow: 0 20px 60px rgba(13, 55, 55, 0.10) !important;
}

.site-header .brand {
  align-self: stretch !important;
  display: flex !important;
  align-items: center !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.site-header .brand-logo-shell {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: clamp(174px, 13vw, 214px) !important;
  height: 44px !important;
  min-height: 44px !important;
  margin: auto 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

.site-header .brand-wordmark {
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: 38px !important;
  object-fit: contain !important;
  object-position: left center !important;
  transform: translateY(-50%) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  visibility: visible !important;
}

:root[data-theme="light"] .site-header .brand-wordmark-dark,
:root[data-theme="dark"] .site-header .brand-wordmark-light,
:root:not([data-theme="light"]) .site-header .brand-wordmark-light {
  display: block !important;
  opacity: 1 !important;
}

:root[data-theme="light"] .site-header .brand-wordmark-light,
:root[data-theme="dark"] .site-header .brand-wordmark-dark,
:root:not([data-theme="light"]) .site-header .brand-wordmark-dark {
  display: none !important;
  opacity: 0 !important;
}

.header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-left: auto !important;
}

.site-header .mobile-nav {
  position: absolute !important;
  top: calc(100% + 10px) !important;
  right: 0 !important;
  display: grid !important;
  gap: 8px !important;
  width: min(320px, calc(100vw - 32px)) !important;
  padding: 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.13) !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, rgba(10, 55, 50, 0.96), rgba(9, 24, 23, 0.96)) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(-8px) !important;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease !important;
}

:root[data-theme="light"] .site-header .mobile-nav {
  border-color: rgba(4, 37, 37, 0.12) !important;
  background: linear-gradient(135deg, rgba(246, 253, 252, 0.98), rgba(236, 250, 248, 0.96)) !important;
  box-shadow: 0 22px 60px rgba(13, 55, 55, 0.16) !important;
}

.site-header .mobile-nav a {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 44px !important;
  padding: 0 14px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  background: rgba(255, 255, 255, 0.035) !important;
  color: var(--text) !important;
  text-decoration: none !important;
  font-family: Inter, var(--font-body), sans-serif !important;
  font-weight: 800 !important;
}

.site-header .mobile-nav a:hover,
.site-header .mobile-nav a:focus-visible {
  border-color: rgba(12, 192, 223, 0.55) !important;
  background: linear-gradient(90deg, rgba(12, 192, 223, 0.18), rgba(255, 222, 89, 0.10)) !important;
  transform: translateX(3px) !important;
}

.site-header .mobile-nav a[href="#strategie"] {
  border: 0 !important;
  background: linear-gradient(90deg, #0cc0df, #ffde59) !important;
  color: #021211 !important;
}

.hero {
  isolation: isolate !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 76% 45%, rgba(12, 192, 223, 0.36), rgba(12, 192, 223, 0.15) 26%, transparent 62%),
    radial-gradient(circle at 86% 62%, rgba(112, 224, 166, 0.26), transparent 58%),
    radial-gradient(circle at 96% 73%, rgba(255, 222, 89, 0.20), transparent 70%),
    linear-gradient(115deg, rgba(1, 39, 36, 0.62), rgba(3, 21, 20, 0.30) 50%, rgba(2, 44, 39, 0.48)),
    var(--bg) !important;
  box-shadow: 0 0 0 100vmax var(--bg) !important;
  clip-path: inset(0 -100vmax) !important;
}

:root[data-theme="light"] .hero {
  background:
    radial-gradient(circle at 76% 45%, rgba(12, 192, 223, 0.28), rgba(12, 192, 223, 0.12) 26%, transparent 62%),
    radial-gradient(circle at 86% 62%, rgba(112, 224, 166, 0.20), transparent 58%),
    radial-gradient(circle at 96% 73%, rgba(255, 222, 89, 0.16), transparent 70%),
    linear-gradient(115deg, rgba(246, 253, 252, 0.96), rgba(237, 252, 252, 0.90) 50%, rgba(255, 252, 233, 0.92)),
    var(--bg) !important;
}

.hero::before {
  content: "" !important;
  position: absolute !important;
  inset: -42% -120vw !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 73% 45%, rgba(12, 192, 223, 0.26), transparent 42%),
    radial-gradient(circle at 88% 64%, rgba(255, 222, 89, 0.18), transparent 44%),
    radial-gradient(circle at 30% 55%, rgba(112, 224, 166, 0.14), transparent 48%) !important;
  filter: blur(24px) !important;
}

.hero-visual,
.phone-shell,
.phone-frame-custom,
.phone-glow,
.phone-halo,
.phone-wrap {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

.hero-visual::before {
  content: "" !important;
  position: absolute !important;
  inset: -28% -48% !important;
  z-index: -1 !important;
  pointer-events: none !important;
  border-radius: 999px !important;
  background:
    radial-gradient(circle at 48% 48%, rgba(12, 192, 223, 0.34), transparent 42%),
    radial-gradient(circle at 63% 55%, rgba(112, 224, 166, 0.22), transparent 50%),
    radial-gradient(circle at 74% 63%, rgba(255, 222, 89, 0.17), transparent 60%) !important;
  filter: blur(18px) !important;
}

.hero-actions .button-primary {
  flex: 0 0 var(--hero-proof-width) !important;
  width: var(--hero-proof-width) !important;
  max-width: var(--hero-proof-width) !important;
}

.proof-grid,
.known-from-strip.known-from-strip-mobile,
.hero .known-from-strip-mobile,
.hero-visual > .known-from-strip,
.hero-visual .known-from-strip,
.hero-visual > .results-medals,
.trust-strip .known-from-strip,
.trust-strip .results-medals,
.results-medals {
  display: none !important;
}

.hero-copy > .known-from-strip.known-from-strip-desktop {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: var(--hero-proof-width) !important;
  max-width: var(--hero-proof-width) !important;
  margin: 12px 0 0 !important;
  gap: 7px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.hero-copy > .known-from-strip .known-from-logos,
.hero-copy > .known-from-strip .hero-metrics {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  width: 100% !important;
  gap: 7px !important;
  margin: 0 !important;
}

.hero-copy > .known-from-strip .hero-metrics article {
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
  gap: 2px !important;
  padding: 5px 3px !important;
  border: 1px solid rgba(12, 192, 223, 0.45) !important;
  background: radial-gradient(circle at 82% 82%, rgba(12, 192, 223, 0.16), transparent 44%), rgba(12, 54, 49, 0.72) !important;
}

.hero-copy > .known-from-strip .hero-metrics strong {
  font-family: Fredoka, var(--font-display), sans-serif !important;
  font-size: clamp(0.82rem, 0.86vw, 0.95rem) !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

.hero-copy > .known-from-strip .hero-metrics span {
  font-family: Inter, var(--font-body), sans-serif !important;
  font-size: clamp(0.42rem, 0.44vw, 0.50rem) !important;
  line-height: 1.05 !important;
  letter-spacing: 0.035em !important;
  text-transform: uppercase !important;
}

.service-card.service-card-featured:hover,
.service-card.service-card-featured:focus-within,
.service-card.service-card-featured.is-active,
#videoproduktion:hover,
#videoproduktion:focus-within,
#videoproduktion.is-active {
  border-color: rgba(12, 192, 223, 0.88) !important;
  box-shadow: 0 24px 70px rgba(12, 192, 223, 0.22), inset 0 0 0 1px rgba(255, 222, 89, 0.18) !important;
  transform: translateY(-4px) !important;
}

.about .portrait-image,
.portrait-placeholder.portrait-image {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
}

.about .portrait-image img,
.portrait-placeholder.portrait-image img {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  display: block !important;
  width: 92% !important;
  height: 92% !important;
  max-width: 92% !important;
  max-height: 92% !important;
  margin: auto !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
}

@media (max-width: 980px) {
  .site-header {
    width: min(100% - 16px, 760px) !important;
    min-height: 66px !important;
    padding: 10px 12px !important;
  }

  .site-header .brand {
    min-width: 0 !important;
  }

  .site-header .brand-logo-shell {
    width: clamp(142px, 43vw, 176px) !important;
    height: 38px !important;
    min-height: 38px !important;
  }

  .site-header .brand-wordmark {
    max-height: 32px !important;
  }

  .header-actions {
    gap: 6px !important;
  }

  .hero-copy {
    --hero-proof-width: min(100%, 326px);
  }

  .hero-actions .button-primary,
  .hero-actions .button-secondary {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .hero-copy > .known-from-strip.known-from-strip-desktop {
    width: var(--hero-proof-width) !important;
    max-width: var(--hero-proof-width) !important;
    margin: 12px auto 0 !important;
  }

  .hero-copy > .known-from-strip .known-from-logos img,
  .hero-copy > .known-from-strip .hero-metrics article {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
  }

  .trust-copy,
  .trust-copy .section-heading,
  .mini-game-heading,
  .launch-game,
  .mission-control,
  .faq,
  .faq .section-heading,
  .faq-list,
  .faq-item,
  .contact-section,
  .contact-section .section-heading,
  .contact-form,
  .site-footer,
  footer.site-footer {
    width: min(100%, 720px) !important;
    max-width: calc(100vw - 32px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    text-align: center !important;
    justify-self: center !important;
  }

  .trust-copy h2,
  .trust-copy .section-heading h2 {
    width: 100% !important;
    max-width: calc(100vw - 18px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0.42em !important;
    padding-right: 0.42em !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    word-break: normal !important;
    text-align: center !important;
    font-size: clamp(2rem, 10.2vw, 3.25rem) !important;
    line-height: 1.02 !important;
  }
}

@media (max-width: 380px) {
  .hero-copy > .known-from-strip .hero-metrics strong {
    font-size: 0.76rem !important;
  }

  .hero-copy > .known-from-strip .hero-metrics span {
    font-size: 0.38rem !important;
  }
}

.site-header {
  position: sticky !important;
  top: clamp(8px, 1.4vw, 18px) !important;
  z-index: 1000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  width: min(100% - 32px, 1120px) !important;
  min-height: 72px !important;
  margin-inline: auto !important;
  padding: 14px 22px !important;
  overflow: visible !important;
  border: 1px solid rgba(255, 255, 255, 0.13) !important;
  border-radius: 10px !important;
  background:
    linear-gradient(115deg, rgba(10, 55, 50, 0.78), rgba(5, 30, 28, 0.74) 45%, rgba(30, 58, 38, 0.70)),
    rgba(4, 22, 20, 0.72) !important;
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.20) !important;
  backdrop-filter: blur(18px) !important;
}

:root[data-theme="light"] .site-header {
  border-color: rgba(4, 37, 37, 0.12) !important;
  background:
    linear-gradient(115deg, rgba(235, 253, 253, 0.90), rgba(243, 252, 248, 0.82) 46%, rgba(255, 249, 223, 0.78)),
    rgba(248, 253, 252, 0.84) !important;
  box-shadow: 0 20px 60px rgba(13, 55, 55, 0.10) !important;
}

.site-header .brand {
  display: flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: flex-start !important;
  height: 44px !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

.site-header .brand-logo-shell {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: clamp(172px, 14vw, 210px) !important;
  height: 44px !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

.site-header .brand-wordmark {
  position: absolute !important;
  top: 50% !important;
  left: 0 !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 36px !important;
  object-fit: contain !important;
  object-position: left center !important;
  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(-50%) !important;
}

:root[data-theme="light"] .site-header .brand-wordmark-dark,
:root[data-theme="dark"] .site-header .brand-wordmark-light,
:root:not([data-theme="light"]) .site-header .brand-wordmark-light {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

:root[data-theme="light"] .site-header .brand-wordmark-light,
:root[data-theme="dark"] .site-header .brand-wordmark-dark,
:root:not([data-theme="light"]) .site-header .brand-wordmark-dark {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

.header-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  margin-left: auto !important;
}

.menu-toggle {
  display: inline-flex !important;
}

.mobile-nav {
  position: absolute !important;
  top: calc(100% + 10px) !important;
  right: 0 !important;
  display: grid !important;
  width: min(320px, calc(100vw - 32px)) !important;
  padding: 8px !important;
  gap: 7px !important;
  border: 1px solid rgba(255, 255, 255, 0.13) !important;
  border-radius: 12px !important;
  background: linear-gradient(145deg, rgba(8, 38, 35, 0.96), rgba(5, 25, 23, 0.94)) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28) !important;
  backdrop-filter: blur(18px) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(-8px) !important;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease !important;
}

:root[data-theme="light"] .mobile-nav {
  border-color: rgba(4, 37, 37, 0.12) !important;
  background: linear-gradient(145deg, rgba(249, 253, 252, 0.97), rgba(236, 250, 248, 0.95)) !important;
}

.mobile-nav a {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 42px !important;
  padding: 0 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.045) !important;
  color: var(--text) !important;
  text-decoration: none !important;
  font-weight: 800 !important;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease !important;
}

:root[data-theme="light"] .mobile-nav a {
  border-color: rgba(4, 37, 37, 0.10) !important;
  background: rgba(255, 255, 255, 0.60) !important;
}

.mobile-nav a:hover,
.mobile-nav a:focus-visible {
  border-color: rgba(12, 192, 223, 0.55) !important;
  background: linear-gradient(90deg, rgba(12, 192, 223, 0.18), rgba(255, 222, 89, 0.12)) !important;
  transform: translateY(-1px) !important;
}

.mobile-nav a[href="#strategie"] {
  justify-content: center !important;
  border: 0 !important;
  color: #04110f !important;
  background: linear-gradient(90deg, #0cc0df, #8fe0a8, #ffde59) !important;
}

.hero {
  position: relative !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 78% 45%, rgba(12, 192, 223, 0.34) 0%, rgba(80, 214, 174, 0.20) 26%, rgba(255, 222, 89, 0.13) 44%, transparent 70%),
    radial-gradient(circle at 18% 62%, rgba(12, 192, 223, 0.16) 0%, transparent 52%),
    linear-gradient(115deg, rgba(0, 38, 36, 0.60), rgba(4, 22, 20, 0.30) 44%, rgba(8, 44, 38, 0.48)),
    var(--bg) !important;
  box-shadow: 0 0 0 100vmax var(--bg) !important;
  clip-path: inset(0 -100vmax) !important;
}

:root[data-theme="light"] .hero {
  background:
    radial-gradient(circle at 78% 45%, rgba(12, 192, 223, 0.28) 0%, rgba(80, 214, 174, 0.17) 27%, rgba(255, 222, 89, 0.14) 46%, transparent 72%),
    radial-gradient(circle at 18% 62%, rgba(12, 192, 223, 0.11) 0%, transparent 52%),
    linear-gradient(115deg, rgba(246, 253, 252, 0.98), rgba(236, 250, 248, 0.90) 45%, rgba(255, 252, 235, 0.94)),
    var(--bg) !important;
}

.hero::before {
  content: "" !important;
  position: absolute !important;
  inset: -50% -140vw !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 74% 48%, rgba(12, 192, 223, 0.22), transparent 42%),
    radial-gradient(circle at 86% 64%, rgba(255, 222, 89, 0.16), transparent 44%),
    radial-gradient(circle at 34% 62%, rgba(111, 225, 165, 0.14), transparent 48%) !important;
  filter: blur(26px) !important;
}

.hero-visual,
.phone-glow,
.phone-shell,
.phone-wrap,
.phone-halo,
.phone-frame-custom {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

.hero-visual::before {
  content: "" !important;
  position: absolute !important;
  inset: -22% -52% !important;
  z-index: -1 !important;
  pointer-events: none !important;
  border-radius: 999px !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(12, 192, 223, 0.34), transparent 38%),
    radial-gradient(circle at 63% 58%, rgba(142, 224, 168, 0.25), transparent 48%),
    radial-gradient(circle at 72% 64%, rgba(255, 222, 89, 0.17), transparent 60%) !important;
  filter: blur(20px) !important;
}

.hero-visual::after,
.phone-glow,
.phone-shell::before,
.phone-shell::after {
  content: none !important;
  display: none !important;
}

.phone-screen,
.phone-media,
.phone-video-shell,
.phone-video-wrap {
  background: #000 !important;
}

.hero-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 12px !important;
}

.hero-actions .button-secondary {
  flex: 0 0 auto !important;
}

.proof-grid,
.known-from-strip.known-from-strip-mobile,
.hero .known-from-strip-mobile,
.hero-visual > .known-from-strip,
.hero-visual .known-from-strip,
.hero-visual > .results-medals,
.trust-strip .results-medals,
.results-medals {
  display: none !important;
}

.known-from-strip > span,
.known-from-strip::before,
.known-from-strip::after,
.known-from-strip .known-from-label,
.known-from-strip .known-from-title,
.known-from-strip.known-from-strip-desktop > span {
  content: none !important;
  display: none !important;
}

.hero-copy > .known-from-strip.known-from-strip-desktop,
.hero .hero-copy > .known-from-strip.known-from-strip-desktop {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: var(--hero-proof-width) !important;
  max-width: 338px !important;
  margin: 12px 0 0 !important;
  padding: 0 !important;
  gap: 7px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.known-from-strip .known-from-logos,
.known-from-strip .hero-metrics {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  width: 100% !important;
  margin: 0 !important;
  gap: 7px !important;
}

.about .portrait-placeholder,
.about .portrait-image,
.about-portrait,
.about-photo {
  overflow: visible !important;
}

.about .portrait-image img,
.about-card .portrait-image img,
.about-portrait img,
.about-photo img {
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
}

@media (max-width: 980px) {
  .site-header {
    top: 8px !important;
    width: calc(100% - 20px) !important;
    min-height: 64px !important;
    padding: 10px !important;
    gap: 8px !important;
  }

  .site-header .brand-logo-shell {
    width: clamp(138px, 43vw, 176px) !important;
    height: 38px !important;
    min-height: 38px !important;
  }

  .site-header .brand-wordmark {
    max-height: 32px !important;
  }

  .header-actions {
    gap: 6px !important;
  }

  .hero-actions .button-primary,
  .hero-actions .button-secondary {
    flex: 0 0 100% !important;
    width: 100% !important;
  }

  .hero-copy > .known-from-strip.known-from-strip-desktop,
  .hero .hero-copy > .known-from-strip.known-from-strip-desktop {
    width: min(100%, 326px) !important;
    max-width: 326px !important;
    margin: 12px auto 0 !important;
  }

  .known-from-strip .known-from-logos img,
  .known-from-strip .hero-metrics article {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
  }

  .trust-copy,
  .trust-copy .section-heading,
  .trust-copy h2,
  .mini-game-heading,
  .launch-game,
  .mission-control,
  .faq,
  .faq .section-heading,
  .faq-list,
  .faq-item,
  .contact-section,
  .contact-section .section-heading,
  .contact-form,
  .site-footer,
  footer.site-footer {
    width: min(100%, 720px) !important;
    max-width: calc(100vw - 32px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    justify-self: center !important;
    text-align: center !important;
  }

  .trust-copy h2,
  .trust-copy .section-heading h2 {
    width: 100% !important;
    max-width: calc(100vw - 18px) !important;
    margin-inline: auto !important;
    padding-inline: 0.38em !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    word-break: normal !important;
    text-align: center !important;
    font-size: clamp(2rem, 9.6vw, 3.25rem) !important;
    line-height: 1.02 !important;
  }
}

@media (max-width: 380px) {
  .site-header .brand-logo-shell {
    width: clamp(126px, 39vw, 152px) !important;
  }

  .known-from-strip .hero-metrics article {
    padding-inline: 2px !important;
  }

  .known-from-strip .hero-metrics strong {
    font-size: 0.74rem !important;
  }

  .known-from-strip .hero-metrics span {
    font-size: 0.36rem !important;
    letter-spacing: 0.025em !important;
  }
}

.site-header {
  position: sticky !important;
  top: 14px !important;
  z-index: 1000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 72px !important;
  padding: 12px clamp(16px, 2.4vw, 28px) !important;
  overflow: visible !important;
  background:
    radial-gradient(circle at 15% 35%, rgba(12, 192, 223, 0.10), transparent 36%),
    radial-gradient(circle at 82% 55%, rgba(255, 222, 89, 0.08), transparent 38%),
    rgba(6, 28, 25, 0.76) !important;
  border: 1px solid rgba(255, 255, 255, 0.13) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}

:root[data-theme="light"] .site-header {
  background:
    radial-gradient(circle at 15% 35%, rgba(12, 192, 223, 0.13), transparent 38%),
    radial-gradient(circle at 84% 55%, rgba(255, 222, 89, 0.10), transparent 42%),
    rgba(247, 253, 251, 0.88) !important;
  border-color: rgba(4, 32, 29, 0.11) !important;
}

.site-header .desktop-nav,
.site-header .button-small {
  display: none !important;
}

.site-header .brand,
.site-header .brand-logo-shell {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  align-self: center !important;
  height: 44px !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.site-header .brand {
  flex: 0 0 auto !important;
  width: auto !important;
}

.site-header .brand-logo-shell {
  position: relative !important;
  flex: 0 0 clamp(176px, 15vw, 224px) !important;
  width: clamp(176px, 15vw, 224px) !important;
  min-width: clamp(176px, 15vw, 224px) !important;
}

.site-header .brand::before,
.site-header .brand::after,
.site-header .brand-logo-shell::before,
.site-header .brand-logo-shell::after,
.site-header .brand-wordmark::before,
.site-header .brand-wordmark::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

.site-header .brand-wordmark {
  position: absolute !important;
  inset: 50% auto auto 0 !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: 34px !important;
  transform: translateY(-50%) !important;
  object-fit: contain !important;
  object-position: left center !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

:root[data-theme="light"] .site-header .brand-wordmark-dark,
:root[data-theme="dark"] .site-header .brand-wordmark-light,
:root:not([data-theme="light"]) .site-header .brand-wordmark-light {
  display: block !important;
}

:root[data-theme="light"] .site-header .brand-wordmark-light,
:root[data-theme="dark"] .site-header .brand-wordmark-dark,
:root:not([data-theme="light"]) .site-header .brand-wordmark-dark {
  display: none !important;
}

.site-header .header-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  margin-left: auto !important;
}

.site-header .menu-toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 42px !important;
  width: 42px !important;
  height: 42px !important;
}

.site-header .mobile-nav {
  position: absolute !important;
  top: calc(100% + 10px) !important;
  right: clamp(10px, 2vw, 24px) !important;
  left: auto !important;
  z-index: 1100 !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
  width: min(286px, calc(100vw - 24px)) !important;
  padding: 10px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  background:
    radial-gradient(circle at 12% 18%, rgba(12, 192, 223, 0.18), transparent 42%),
    rgba(7, 29, 26, 0.96) !important;
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.34) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(-6px) !important;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease !important;
}

:root[data-theme="light"] .site-header .mobile-nav {
  background:
    radial-gradient(circle at 12% 18%, rgba(12, 192, 223, 0.14), transparent 42%),
    rgba(248, 253, 251, 0.98) !important;
  border-color: rgba(4, 32, 29, 0.13) !important;
}

.site-header.menu-open .mobile-nav {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

.site-header .mobile-nav a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 42px !important;
  padding: 10px 12px !important;
  border-radius: 9px !important;
  border: 1px solid rgba(255, 255, 255, 0.11) !important;
  background: rgba(255, 255, 255, 0.045) !important;
  color: var(--text) !important;
  font-weight: 800 !important;
  text-align: center !important;
  text-decoration: none !important;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease !important;
}

:root[data-theme="light"] .site-header .mobile-nav a {
  background: rgba(4, 32, 29, 0.045) !important;
  border-color: rgba(4, 32, 29, 0.11) !important;
}

.site-header .mobile-nav a::before,
.site-header .mobile-nav a::after {
  content: none !important;
  display: none !important;
}

.site-header .mobile-nav a:hover,
.site-header .mobile-nav a:focus-visible {
  transform: translateY(-1px) !important;
  border-color: rgba(12, 192, 223, 0.62) !important;
  background:
    linear-gradient(90deg, rgba(12, 192, 223, 0.16), rgba(255, 222, 89, 0.12)),
    rgba(255, 255, 255, 0.06) !important;
}

.site-header .mobile-nav a[href="#strategie"] {
  color: #041716 !important;
  border-color: rgba(255, 222, 89, 0.28) !important;
  background: linear-gradient(90deg, #0cc0df 0%, #71dba7 54%, #ffde59 100%) !important;
}

.hero {
  position: relative !important;
  overflow: hidden !important;
  background: transparent !important;
}

.hero::before {
  content: "" !important;
  position: absolute !important;
  inset: -26% -44% -22% -28% !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 74% 42%, rgba(12, 192, 223, 0.36), transparent 35%),
    radial-gradient(circle at 83% 58%, rgba(104, 219, 168, 0.28), transparent 46%),
    radial-gradient(circle at 64% 76%, rgba(255, 222, 89, 0.16), transparent 50%),
    linear-gradient(90deg, rgba(12, 192, 223, 0.08), rgba(255, 222, 89, 0.06), transparent 88%) !important;
  filter: blur(20px) !important;
}

:root[data-theme="light"] .hero::before {
  background:
    radial-gradient(circle at 74% 42%, rgba(12, 192, 223, 0.23), transparent 35%),
    radial-gradient(circle at 83% 58%, rgba(104, 219, 168, 0.20), transparent 46%),
    radial-gradient(circle at 64% 76%, rgba(255, 222, 89, 0.14), transparent 50%),
    linear-gradient(90deg, rgba(12, 192, 223, 0.07), rgba(255, 222, 89, 0.06), transparent 92%) !important;
}

.hero-visual,
.phone-shell,
.phone-wrap,
.phone-halo,
.phone-frame-custom {
  background: transparent !important;
  box-shadow: none !important;
}

.hero-visual::before,
.hero-visual::after,
.phone-shell::before,
.phone-shell::after,
.phone-wrap::before,
.phone-wrap::after {
  content: none !important;
  display: none !important;
}

.phone-screen,
.phone-media,
.phone-video-shell {
  background: #000 !important;
}

.hero-copy {
  --hero-proof-width: min(100%, 338px);
}

.hero-copy .known-from-strip.known-from-strip-desktop,
.hero .known-from-strip.known-from-strip-desktop {
  display: grid !important;
  width: var(--hero-proof-width) !important;
  max-width: var(--hero-proof-width) !important;
  margin: 12px 0 0 !important;
  gap: 7px !important;
  align-self: flex-start !important;
  justify-self: start !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.known-from-strip.known-from-strip-mobile,
.hero .known-from-strip-mobile,
.hero-visual > .known-from-strip,
.hero-visual .known-from-strip {
  display: none !important;
}

.known-from-strip > span,
.known-from-strip::before,
.known-from-strip::after,
.known-from-strip .known-from-label,
.known-from-strip .known-from-title,
.known-from-strip.known-from-strip-desktop > span {
  content: none !important;
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.known-from-strip .known-from-logos,
.known-from-strip .hero-metrics {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 7px !important;
  width: 100% !important;
  margin: 0 !important;
}

.known-from-strip .known-from-logos img,
.known-from-strip .hero-metrics article {
  width: 100% !important;
  min-width: 0 !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  box-sizing: border-box !important;
  border-radius: 8px !important;
}

.known-from-strip .known-from-logos img {
  display: block !important;
  padding: 7px 9px !important;
  object-fit: contain !important;
  background: rgba(255, 255, 255, 0.96) !important;
}

.known-from-strip .hero-metrics article {
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
  gap: 2px !important;
  padding: 4px 4px !important;
  overflow: visible !important;
  border: 1px solid rgba(12, 192, 223, 0.46) !important;
  background:
    radial-gradient(circle at 78% 78%, rgba(12, 192, 223, 0.16), transparent 44%),
    rgba(12, 54, 49, 0.72) !important;
}

:root[data-theme="light"] .known-from-strip .hero-metrics article {
  background:
    radial-gradient(circle at 78% 78%, rgba(12, 192, 223, 0.13), transparent 44%),
    rgba(248, 253, 251, 0.92) !important;
}

.known-from-strip .hero-metrics strong {
  font-family: Fredoka, var(--font-display), sans-serif !important;
  font-size: clamp(0.82rem, 0.82vw, 0.94rem) !important;
  line-height: 0.98 !important;
  text-transform: uppercase !important;
}

.known-from-strip .hero-metrics span {
  font-family: var(--font-body), Inter, sans-serif !important;
  font-size: clamp(0.40rem, 0.42vw, 0.50rem) !important;
  line-height: 1 !important;
  letter-spacing: 0.035em !important;
  text-transform: uppercase !important;
}

#videoproduktion:hover,
#videoproduktion:focus-visible,
#videoproduktion:focus-within,
#videoproduktion.is-active {
  border-color: rgba(12, 192, 223, 0.86) !important;
  box-shadow: 0 24px 70px rgba(12, 192, 223, 0.22), inset 0 0 0 1px rgba(255, 222, 89, 0.18) !important;
  transform: translateY(-4px) !important;
}

#videoproduktion:hover .service-stage,
#videoproduktion:focus-within .service-stage,
#videoproduktion.is-active .service-stage {
  border-color: rgba(255, 222, 89, 0.62) !important;
  color: #eaffff !important;
}

.about .portrait-placeholder,
.about .portrait-image {
  overflow: hidden !important;
  background: transparent !important;
}

.about .portrait-image img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
  background: transparent !important;
}

@media (max-width: 980px) {
  .site-header {
    top: 8px !important;
    width: calc(100% - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    min-height: 66px !important;
    padding: 10px 12px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .site-header .brand-logo-shell {
    flex-basis: clamp(150px, 42vw, 182px) !important;
    width: clamp(150px, 42vw, 182px) !important;
    min-width: clamp(150px, 42vw, 182px) !important;
    height: 40px !important;
    min-height: 40px !important;
  }

  .site-header .brand-wordmark {
    max-height: 30px !important;
  }

  .site-header .header-actions {
    gap: 6px !important;
  }

  .hero-copy {
    --hero-proof-width: 100%;
  }

  .hero-copy .known-from-strip.known-from-strip-desktop,
  .hero .known-from-strip.known-from-strip-desktop {
    width: min(100%, 326px) !important;
    max-width: 326px !important;
    margin: 12px auto 0 !important;
    justify-self: center !important;
  }

  .known-from-strip .known-from-logos img,
  .known-from-strip .hero-metrics article {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
  }

  .known-from-strip .hero-metrics strong {
    font-size: 0.82rem !important;
  }

  .known-from-strip .hero-metrics span {
    font-size: 0.39rem !important;
  }

  .trust-copy,
  .trust-copy .section-heading,
  .trust-copy h2,
  .mini-game-heading,
  .launch-game,
  .mission-control,
  .faq,
  .faq .section-heading,
  .faq-list,
  .faq-item,
  .contact-section,
  .contact-section .section-heading,
  .contact-form,
  .site-footer,
  footer.site-footer {
    width: min(100%, 720px) !important;
    max-width: calc(100vw - 32px) !important;
    left: auto !important;
    right: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    transform: none !important;
    justify-self: center !important;
  }

  .trust-copy h2,
  .trust-copy .section-heading h2 {
    width: 100% !important;
    max-width: calc(100vw - 18px) !important;
    padding-left: 0.48em !important;
    padding-right: 0.48em !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    word-break: normal !important;
    text-align: center !important;
    font-size: clamp(1.85rem, 9.4vw, 3.2rem) !important;
    line-height: 1.04 !important;
  }
}

@media (max-width: 390px) {
  .site-header {
    padding: 9px 10px !important;
  }

  .site-header .brand-logo-shell {
    flex-basis: clamp(136px, 39vw, 158px) !important;
    width: clamp(136px, 39vw, 158px) !important;
    min-width: clamp(136px, 39vw, 158px) !important;
  }

  .lang-toggle,
  .theme-toggle,
  .menu-toggle {
    width: 38px !important;
    height: 38px !important;
    flex-basis: 38px !important;
  }

  .known-from-strip .known-from-logos,
  .known-from-strip .hero-metrics {
    gap: 6px !important;
  }

  .known-from-strip .hero-metrics strong {
    font-size: 0.74rem !important;
  }

  .known-from-strip .hero-metrics span {
    font-size: 0.34rem !important;
  }
}

:root {
  --hero-proof-width: 338px;
  --header-logo-w: clamp(174px, 13vw, 214px);
  --header-logo-h: 42px;
}

html,
body {
  min-height: 100%;
  background: var(--bg) !important;
}

body::before {
  content: "";
  position: fixed;
  inset: -18vh -18vw;
  z-index: -50;
  pointer-events: none;
  background:
    radial-gradient(circle at 14% 18%, rgba(12, 192, 223, 0.18), transparent 34%),
    radial-gradient(circle at 70% 30%, rgba(86, 219, 174, 0.15), transparent 38%),
    radial-gradient(circle at 86% 62%, rgba(255, 222, 89, 0.10), transparent 42%),
    linear-gradient(125deg, rgba(12, 192, 223, 0.06), rgba(88, 220, 173, 0.05) 48%, rgba(255, 222, 89, 0.05));
  filter: blur(10px);
  animation: pepeBackdropDriftFinal 24s ease-in-out infinite alternate;
}

:root[data-theme="light"] body::before {
  background:
    radial-gradient(circle at 14% 18%, rgba(12, 192, 223, 0.16), transparent 35%),
    radial-gradient(circle at 72% 30%, rgba(86, 219, 174, 0.14), transparent 39%),
    radial-gradient(circle at 86% 64%, rgba(255, 222, 89, 0.12), transparent 43%),
    linear-gradient(125deg, rgba(12, 192, 223, 0.08), rgba(88, 220, 173, 0.06) 50%, rgba(255, 222, 89, 0.07));
}

@keyframes pepeBackdropDriftFinal {
  from {
    transform: translate3d(-1.4%, -1%, 0) scale(1);
  }
  to {
    transform: translate3d(1.4%, 1%, 0) scale(1.04);
  }
}

.site-header,
:root[data-theme="dark"] .site-header,
:root:not([data-theme="light"]) .site-header {
  position: sticky !important;
  top: 14px !important;
  z-index: 80 !important;
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  align-items: center !important;
  min-height: 72px !important;
  padding: 12px clamp(16px, 2.4vw, 28px) !important;
  background:
    radial-gradient(circle at 16% 50%, rgba(12, 192, 223, 0.14), transparent 38%),
    radial-gradient(circle at 88% 50%, rgba(255, 222, 89, 0.10), transparent 42%),
    rgba(6, 36, 32, 0.78) !important;
  backdrop-filter: blur(18px) !important;
}

:root[data-theme="light"] .site-header {
  background:
    radial-gradient(circle at 16% 50%, rgba(12, 192, 223, 0.12), transparent 38%),
    radial-gradient(circle at 88% 50%, rgba(255, 222, 89, 0.10), transparent 42%),
    rgba(246, 252, 249, 0.88) !important;
}

.site-header .desktop-nav {
  display: none !important;
}

.site-header .brand {
  align-self: stretch !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.site-header .brand::before,
.site-header .brand::after,
.site-header .brand-logo-shell::before,
.site-header .brand-logo-shell::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

.site-header .brand-logo-shell {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: var(--header-logo-w) !important;
  height: var(--header-logo-h) !important;
  min-height: var(--header-logo-h) !important;
  max-height: var(--header-logo-h) !important;
  margin: auto 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  line-height: 0 !important;
}

.site-header .brand-logo-shell *,
.site-header .brand-wordmark {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

.site-header .brand-wordmark {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: contain !important;
  object-position: left center !important;
  transform: none !important;
}

.site-header .header-actions {
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
}

.site-header .menu-toggle {
  display: inline-flex !important;
}

.site-header .mobile-nav {
  position: absolute !important;
  top: calc(100% + 10px) !important;
  right: clamp(12px, 2vw, 24px) !important;
  width: min(300px, calc(100vw - 28px)) !important;
  display: grid !important;
  gap: 8px !important;
  padding: 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, rgba(6, 36, 32, 0.96), rgba(10, 52, 46, 0.92)) !important;
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.34) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(-8px) !important;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease !important;
}

:root[data-theme="light"] .site-header .mobile-nav {
  background: linear-gradient(135deg, rgba(248, 253, 251, 0.97), rgba(235, 252, 248, 0.94)) !important;
  border-color: rgba(4, 45, 42, 0.14) !important;
}

.site-header.menu-open .mobile-nav,
.site-header .mobile-nav.is-open,
.site-header[data-menu-open="true"] .mobile-nav,
.site-header:has(.menu-toggle[aria-expanded="true"]) .mobile-nav {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

.site-header .mobile-nav a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 42px !important;
  padding: 10px 12px !important;
  border-radius: 9px !important;
  color: var(--text) !important;
  text-decoration: none !important;
  font-weight: 850 !important;
  background: rgba(255, 255, 255, 0.045) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
}

.site-header .mobile-nav a:hover,
.site-header .mobile-nav a:focus-visible {
  color: #04110f !important;
  background: linear-gradient(90deg, var(--cyan), var(--mint), var(--yellow)) !important;
  border-color: transparent !important;
  transform: translateY(-1px) !important;
}

.site-header .mobile-nav a[href="#strategie"] {
  color: #04110f !important;
  background: linear-gradient(90deg, var(--cyan), var(--mint), var(--yellow)) !important;
}

.hero,
:root[data-theme="dark"] .hero,
:root:not([data-theme="light"]) .hero {
  position: relative !important;
  overflow: visible !important;
  clip-path: none !important;
  box-shadow: none !important;
  background: transparent !important;
  background-image: none !important;
}

.hero::before {
  content: "" !important;
  position: absolute !important;
  inset: -28vh -140vw !important;
  z-index: -2 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 76% 44%, rgba(12, 192, 223, 0.30), transparent 37%),
    radial-gradient(circle at 83% 54%, rgba(88, 220, 173, 0.20), transparent 45%),
    radial-gradient(circle at 92% 66%, rgba(255, 222, 89, 0.13), transparent 54%),
    radial-gradient(circle at 24% 52%, rgba(12, 192, 223, 0.12), transparent 44%) !important;
  filter: blur(22px) !important;
  animation: pepeBackdropDriftFinal 24s ease-in-out infinite alternate !important;
}

:root[data-theme="light"] .hero::before {
  background:
    radial-gradient(circle at 76% 44%, rgba(12, 192, 223, 0.24), transparent 38%),
    radial-gradient(circle at 83% 55%, rgba(88, 220, 173, 0.18), transparent 45%),
    radial-gradient(circle at 93% 66%, rgba(255, 222, 89, 0.15), transparent 55%),
    radial-gradient(circle at 24% 52%, rgba(12, 192, 223, 0.10), transparent 44%) !important;
}

.hero-visual,
.phone-shell,
.phone-frame-custom,
.phone-wrap,
.phone-halo,
.hero .phone-shell,
.hero .phone-frame-custom {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

.hero-visual::before {
  content: "" !important;
  position: absolute !important;
  inset: -32% -52% !important;
  z-index: -1 !important;
  pointer-events: none !important;
  border-radius: 999px !important;
  background:
    radial-gradient(circle at 48% 48%, rgba(12, 192, 223, 0.34), transparent 38%),
    radial-gradient(circle at 60% 55%, rgba(88, 220, 173, 0.24), transparent 50%),
    radial-gradient(circle at 72% 65%, rgba(255, 222, 89, 0.18), transparent 62%) !important;
  filter: blur(18px) !important;
}

.hero-visual::after,
.phone-shell::before,
.phone-shell::after,
.phone-wrap::before,
.phone-wrap::after {
  content: none !important;
  display: none !important;
  background: none !important;
  box-shadow: none !important;
}

.hero-actions {
  width: 100% !important;
  max-width: 100% !important;
}

.hero-actions .button-primary {
  flex: 0 0 var(--hero-proof-width) !important;
  width: var(--hero-proof-width) !important;
  max-width: 100% !important;
}

.hero-copy .known-from-strip.known-from-strip-desktop,
.hero .known-from-strip.known-from-strip-desktop {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: min(100%, var(--hero-proof-width)) !important;
  max-width: var(--hero-proof-width) !important;
  margin: 10px auto 0 0 !important;
  gap: 7px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.known-from-strip > span,
.known-from-strip::before,
.known-from-strip::after,
.known-from-strip .known-from-label,
.known-from-strip.known-from-strip-desktop > span {
  content: none !important;
  display: none !important;
}

.known-from-strip.known-from-strip-mobile,
.hero .known-from-strip-mobile,
.hero-visual > .known-from-strip,
.hero-visual > .results-medals,
.trust-strip .known-from-strip,
.trust-strip .results-medals {
  display: none !important;
}

.hero-copy > .known-from-strip .known-from-logos img,
.hero-copy > .known-from-strip .hero-metrics article {
  width: 100% !important;
  min-width: 0 !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

.hero-copy > .known-from-strip .known-from-logos img {
  object-fit: contain !important;
  padding: 7px 10px !important;
  background: rgba(255, 255, 255, 0.96) !important;
}

:root[data-theme="light"] .hero-copy > .known-from-strip .hero-metrics article {
  background:
    radial-gradient(circle at 82% 82%, rgba(12, 192, 223, 0.14), transparent 44%),
    rgba(248, 253, 251, 0.92) !important;
}

.hero-copy > .known-from-strip .hero-metrics strong {
  font-family: Fredoka, var(--font-display), sans-serif !important;
  font-size: clamp(0.78rem, 0.80vw, 0.9rem) !important;
  line-height: 1 !important;
}

.hero-copy > .known-from-strip .hero-metrics span {
  font-family: var(--font-body), Inter, sans-serif !important;
  font-size: clamp(0.40rem, 0.42vw, 0.48rem) !important;
  line-height: 1.05 !important;
  letter-spacing: 0.035em !important;
  text-transform: uppercase !important;
}

.service-more[href] {
  cursor: pointer !important;
}

@media (max-width: 980px) {
  :root {
    --hero-proof-width: 326px;
    --header-logo-w: clamp(140px, 43vw, 176px);
    --header-logo-h: 38px;
  }

  .site-header {
    grid-template-columns: auto auto !important;
    justify-content: space-between !important;
    min-height: 64px !important;
    padding: 10px 12px !important;
  }

  .site-header .button-small {
    display: none !important;
  }

  .site-header .brand-logo-shell {
    margin: auto 0 !important;
  }

  .hero-actions {
    justify-content: center !important;
    align-items: center !important;
  }

  .hero-actions .button-primary {
    width: min(100%, var(--hero-proof-width)) !important;
    flex-basis: min(100%, var(--hero-proof-width)) !important;
  }

  .hero-copy .known-from-strip.known-from-strip-desktop,
  .hero .known-from-strip.known-from-strip-desktop {
    width: min(100%, var(--hero-proof-width)) !important;
    max-width: var(--hero-proof-width) !important;
    margin: 10px auto 0 !important;
  }

  .hero-copy > .known-from-strip .known-from-logos img,
  .hero-copy > .known-from-strip .hero-metrics article {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
  }

  .trust-copy,
  .trust-copy .section-heading,
  .trust-copy h2,
  .mini-game-heading,
  .launch-game,
  .mission-control,
  .faq,
  .faq .section-heading,
  .faq-list,
  .faq-item,
  .contact-section,
  .contact-section .section-heading,
  .contact-form,
  .site-footer,
  footer.site-footer {
    width: min(100%, 720px) !important;
    max-width: calc(100vw - 32px) !important;
    left: auto !important;
    right: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    transform: none !important;
    justify-self: center !important;
  }

  .trust-copy h2,
  .trust-copy .section-heading h2,
  .testimonials .section-heading h2,
  #referenzen .section-heading h2 {
    width: 100% !important;
    max-width: calc(100vw - 18px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0.36em !important;
    padding-right: 0.36em !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    word-break: normal !important;
    text-align: center !important;
    font-size: clamp(2rem, 9.2vw, 3.2rem) !important;
    line-height: 1.04 !important;
  }
}

@media (max-width: 380px) {
  .hero-copy > .known-from-strip .hero-metrics strong {
    font-size: 0.75rem !important;
  }

  .hero-copy > .known-from-strip .hero-metrics span {
    font-size: 0.37rem !important;
  }
}

html,
body {
  overflow-x: hidden !important;
}

body {
  background:
    radial-gradient(circle at 68% 26%, rgba(12, 192, 223, 0.2), transparent 34vw),
    radial-gradient(circle at 74% 58%, rgba(109, 219, 159, 0.18), transparent 38vw),
    radial-gradient(circle at 64% 86%, rgba(255, 222, 89, 0.11), transparent 44vw),
    var(--bg) !important;
}

:root[data-theme="light"] body {
  background:
    radial-gradient(circle at 68% 26%, rgba(12, 192, 223, 0.18), transparent 36vw),
    radial-gradient(circle at 78% 58%, rgba(109, 219, 159, 0.16), transparent 42vw),
    radial-gradient(circle at 62% 88%, rgba(255, 222, 89, 0.12), transparent 46vw),
    #f7fbfa !important;
}

body::before {
  content: "" !important;
  position: fixed !important;
  inset: -24vmax !important;
  z-index: -2 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 18% 22%, rgba(12, 192, 223, 0.16), transparent 34vmax),
    radial-gradient(circle at 74% 34%, rgba(109, 219, 159, 0.14), transparent 38vmax),
    radial-gradient(circle at 56% 76%, rgba(255, 222, 89, 0.1), transparent 42vmax) !important;
  filter: blur(18px) !important;
  opacity: 0.74 !important;
  animation: finalSpaceDrift 32s ease-in-out infinite alternate !important;
}

:root[data-theme="light"] body::before {
  opacity: 0.5 !important;
}

@keyframes finalSpaceDrift {
  0% { transform: translate3d(-1.5%, -1%, 0) scale(1); }
  100% { transform: translate3d(1.5%, 1%, 0) scale(1.04); }
}

.site-header {
  align-items: center !important;
  background:
    linear-gradient(90deg, rgba(8, 42, 42, 0.84), rgba(20, 50, 38, 0.74)),
    rgba(8, 18, 18, 0.72) !important;
}

:root[data-theme="light"] .site-header {
  background:
    linear-gradient(90deg, rgba(231, 250, 252, 0.92), rgba(247, 251, 242, 0.9)),
    rgba(255, 255, 255, 0.82) !important;
}

.site-header .brand {
  align-self: stretch !important;
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  min-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.site-header .brand-logo-shell {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  height: clamp(30px, 3.1vw, 42px) !important;
  min-height: clamp(30px, 3.1vw, 42px) !important;
  width: clamp(168px, 14vw, 236px) !important;
  margin-top: auto !important;
  margin-bottom: auto !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.site-header .brand-logo-shell::before,
.site-header .brand-logo-shell::after,
.site-header .brand::before,
.site-header .brand::after {
  display: none !important;
  content: none !important;
  background: none !important;
}

.site-header .brand-wordmark {
  position: relative !important;
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: left center !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

.hero {
  isolation: isolate !important;
  overflow: visible !important;
  background: transparent !important;
  box-shadow: none !important;
  clip-path: none !important;
}

.hero::before {
  content: "" !important;
  position: absolute !important;
  inset: -26vh -44vw -18vh -44vw !important;
  z-index: -1 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 72% 42%, rgba(12, 192, 223, 0.22), transparent 34vw),
    radial-gradient(circle at 80% 58%, rgba(109, 219, 159, 0.2), transparent 38vw),
    radial-gradient(circle at 76% 76%, rgba(255, 222, 89, 0.13), transparent 42vw) !important;
  filter: blur(20px) !important;
  opacity: 0.98 !important;
}

:root[data-theme="light"] .hero::before {
  background:
    radial-gradient(circle at 72% 42%, rgba(12, 192, 223, 0.18), transparent 34vw),
    radial-gradient(circle at 82% 58%, rgba(109, 219, 159, 0.16), transparent 38vw),
    radial-gradient(circle at 76% 78%, rgba(255, 222, 89, 0.12), transparent 42vw) !important;
}

.hero-visual {
  position: relative !important;
  background: transparent !important;
  box-shadow: none !important;
  isolation: isolate !important;
}

.hero-visual::before {
  content: "" !important;
  position: absolute !important;
  inset: -18% -28% !important;
  z-index: -1 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 48% 44%, rgba(12, 192, 223, 0.24), transparent 42%),
    radial-gradient(circle at 58% 58%, rgba(109, 219, 159, 0.2), transparent 48%),
    radial-gradient(circle at 44% 74%, rgba(255, 222, 89, 0.13), transparent 54%) !important;
  filter: blur(18px) !important;
}

.hero-visual::after,
.phone-glow,
.phone-shell::before,
.phone-shell::after,
.phone-wrap::before,
.phone-wrap::after,
.phone-halo {
  display: none !important;
  content: none !important;
}

.phone-shell,
.phone-wrap,
.phone-frame-custom {
  background: transparent !important;
  box-shadow: none !important;
}

.hero-copy > .known-from-strip.known-from-strip-desktop {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  width: min(100%, 338px) !important;
  max-width: 338px !important;
  margin: 12px auto 0 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.known-from-strip > span,
.known-from-strip .known-from-label,
.known-from-strip::before,
.known-from-strip::after {
  display: none !important;
  content: none !important;
}

.hero-copy > .known-from-strip .known-from-logos img,
.hero-copy > .known-from-strip .hero-metrics article {
  width: 100% !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  border-radius: 8px !important;
}

.hero-copy > .known-from-strip .known-from-logos img {
  object-fit: contain !important;
  padding: 7px 11px !important;
  background: rgba(255, 255, 255, 0.94) !important;
}

.hero-copy > .known-from-strip .hero-metrics article {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  padding: 5px 4px !important;
  overflow: visible !important;
  border: 1px solid rgba(12, 192, 223, 0.48) !important;
  background: rgba(12, 54, 52, 0.58) !important;
}

:root[data-theme="light"] .hero-copy > .known-from-strip .hero-metrics article {
  background: rgba(255, 255, 255, 0.68) !important;
}

.hero-copy > .known-from-strip .hero-metrics strong {
  display: block !important;
  white-space: nowrap !important;
  font-size: 0.9rem !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  overflow: visible !important;
}

.hero-copy > .known-from-strip .hero-metrics span {
  display: block !important;
  white-space: nowrap !important;
  font-size: 0.48rem !important;
  line-height: 1 !important;
  letter-spacing: 0.05em !important;
  overflow: visible !important;
}

#videoproduktion:hover,
#videoproduktion:focus,
#videoproduktion:focus-within,
#videoproduktion.is-active,
.service-card-featured:hover,
.service-card-featured:focus,
.service-card-featured:focus-within,
.service-card-featured.is-active {
  border-color: rgba(12, 192, 223, 0.86) !important;
  box-shadow: 0 24px 70px rgba(12, 192, 223, 0.22), inset 0 0 0 1px rgba(255, 222, 89, 0.18) !important;
  transform: translateY(-4px) !important;
}

.trust-copy,
.trust-copy .section-heading,
.trust-copy h2,
.faq,
.contact-section,
.cta,
.launch-game,
.mission-control {
  margin-left: auto !important;
  margin-right: auto !important;
}

.trust-copy h2,
.trust-copy .section-heading h2 {
  overflow: visible !important;
  box-sizing: border-box !important;
}

@media (max-width: 980px) {
  .site-header .brand-logo-shell {
    width: clamp(142px, 43vw, 176px) !important;
    height: 36px !important;
    min-height: 36px !important;
  }

  .hero-copy > .known-from-strip.known-from-strip-desktop {
    width: min(100%, 326px) !important;
    max-width: 326px !important;
    margin: 12px auto 0 !important;
  }

  .hero-copy > .known-from-strip .known-from-logos img,
  .hero-copy > .known-from-strip .hero-metrics article {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
  }

  .hero-copy > .known-from-strip .hero-metrics strong {
    font-size: 0.84rem !important;
  }

  .hero-copy > .known-from-strip .hero-metrics span {
    font-size: 0.42rem !important;
  }

  .trust-copy,
  .trust-copy .section-heading,
  .trust-copy h2,
  .mini-game-heading,
  .launch-game,
  .mission-control,
  .faq,
  .faq .section-heading,
  .faq-list,
  .faq-item,
  .contact-section,
  .contact-section .section-heading,
  .contact-form,
  .site-footer,
  footer.site-footer {
    width: min(100%, 720px) !important;
    max-width: calc(100vw - 32px) !important;
    left: auto !important;
    right: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    transform: none !important;
    justify-self: center !important;
  }

  .trust-copy h2,
  .trust-copy .section-heading h2 {
    width: 100% !important;
    max-width: calc(100vw - 18px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0.5em !important;
    padding-right: 0.5em !important;
    overflow: visible !important;
    text-align: center !important;
    font-size: clamp(2rem, 9.8vw, 3.25rem) !important;
    line-height: 1.04 !important;
  }
}

@media (max-width: 370px) {
  .hero-copy > .known-from-strip .hero-metrics strong {
    font-size: 0.76rem !important;
  }

  .hero-copy > .known-from-strip .hero-metrics span {
    font-size: 0.36rem !important;
  }
}

.site-header {
  align-items: center !important;
  background:
    radial-gradient(circle at 16% 36%, rgba(12, 192, 223, 0.16), transparent 34%),
    radial-gradient(circle at 64% 42%, rgba(106, 222, 167, 0.12), transparent 38%),
    radial-gradient(circle at 96% 58%, rgba(255, 222, 89, 0.10), transparent 42%),
    rgba(4, 20, 18, 0.78) !important;
}

:root[data-theme="light"] .site-header {
  background:
    radial-gradient(circle at 16% 36%, rgba(12, 192, 223, 0.14), transparent 36%),
    radial-gradient(circle at 64% 42%, rgba(106, 222, 167, 0.12), transparent 40%),
    radial-gradient(circle at 96% 58%, rgba(255, 222, 89, 0.12), transparent 44%),
    rgba(255, 255, 255, 0.70) !important;
}

.site-header .brand,
.site-header .brand-logo-shell,
.site-header .brand-wordmark {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
}

.site-header .brand {
  display: flex !important;
  align-items: center !important;
  align-self: stretch !important;
  min-height: 0 !important;
}

.site-header .brand-logo-shell {
  display: block !important;
  position: relative !important;
  width: clamp(172px, 16vw, 232px) !important;
  height: 44px !important;
  min-height: 44px !important;
  overflow: visible !important;
}

.site-header .brand-logo-shell img,
.site-header .brand-wordmark {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}

.hero {
  position: relative !important;
  isolation: isolate !important;
  overflow: visible !important;
  background:
    radial-gradient(circle at 74% 48%, rgba(12, 192, 223, 0.26), transparent 34%),
    radial-gradient(circle at 78% 62%, rgba(106, 222, 167, 0.20), transparent 38%),
    radial-gradient(circle at 84% 72%, rgba(255, 222, 89, 0.15), transparent 45%),
    radial-gradient(circle at 20% 50%, rgba(12, 192, 223, 0.13), transparent 46%),
    transparent !important;
}

:root[data-theme="light"] .hero {
  background:
    radial-gradient(circle at 74% 48%, rgba(12, 192, 223, 0.23), transparent 34%),
    radial-gradient(circle at 78% 62%, rgba(106, 222, 167, 0.18), transparent 38%),
    radial-gradient(circle at 84% 72%, rgba(255, 222, 89, 0.14), transparent 45%),
    radial-gradient(circle at 20% 50%, rgba(12, 192, 223, 0.10), transparent 46%),
    transparent !important;
}

.hero::before {
  content: "" !important;
  position: absolute !important;
  inset: -38vh -100vw !important;
  z-index: -1 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at calc(50% + 30vw) 48%, rgba(12, 192, 223, 0.22), transparent 38%),
    radial-gradient(circle at calc(50% + 38vw) 60%, rgba(106, 222, 167, 0.16), transparent 46%),
    radial-gradient(circle at calc(50% + 48vw) 74%, rgba(255, 222, 89, 0.12), transparent 52%) !important;
  filter: blur(14px) !important;
}

.hero-visual,
.hero-visual::after,
.phone-glow,
.phone-shell,
.phone-frame-custom,
.phone-wrap,
.phone-halo {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

.phone-shell {
  box-shadow: none !important;
}

.known-from-strip {
  display: none !important;
}

.hero-copy > .known-from-strip.known-from-strip-desktop {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  width: min(100%, 338px) !important;
  max-width: 338px !important;
  margin: 12px auto 0 0 !important;
  padding: 0 !important;
  gap: 7px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.known-from-strip > span,
.known-from-strip::before,
.known-from-strip::after,
.hero-copy > .known-from-strip.known-from-strip-desktop > span {
  content: none !important;
  display: none !important;
}

.hero-copy > .known-from-strip .known-from-logos,
.hero-copy > .known-from-strip .hero-metrics {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 7px !important;
  width: 100% !important;
  margin: 0 !important;
}

.hero-copy > .known-from-strip .known-from-logos img,
.hero-copy > .known-from-strip .hero-metrics article {
  width: 100% !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}

.hero-copy > .known-from-strip .known-from-logos img {
  object-fit: contain !important;
  padding: 7px 9px !important;
  background: rgba(255, 255, 255, 0.96) !important;
}

.hero-copy > .known-from-strip .hero-metrics article {
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
  gap: 2px !important;
  padding: 5px 4px !important;
  border: 1px solid rgba(12, 192, 223, 0.42) !important;
  background:
    radial-gradient(circle at 82% 82%, rgba(12, 192, 223, 0.16), transparent 44%),
    rgba(12, 54, 49, 0.70) !important;
}

:root[data-theme="light"] .hero-copy > .known-from-strip .hero-metrics article {
  background:
    radial-gradient(circle at 82% 82%, rgba(12, 192, 223, 0.13), transparent 44%),
    rgba(248, 253, 251, 0.92) !important;
}

.hero-copy > .known-from-strip .hero-metrics strong,
.hero-copy > .known-from-strip .hero-metrics span {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

.hero-copy > .known-from-strip .hero-metrics strong {
  font-family: Fredoka, var(--font-display), sans-serif !important;
  font-size: clamp(0.78rem, 0.82vw, 0.92rem) !important;
  line-height: 1 !important;
}

.hero-copy > .known-from-strip .hero-metrics span {
  font-family: var(--font-body), Inter, sans-serif !important;
  font-size: clamp(0.38rem, 0.40vw, 0.48rem) !important;
  line-height: 1.05 !important;
  letter-spacing: 0.035em !important;
  text-transform: uppercase !important;
}

.service-card.service-card-featured:hover,
.service-card.service-card-featured:focus-within,
.service-card.service-card-featured.is-active,
#videoproduktion:hover,
#videoproduktion:focus-within,
#videoproduktion.is-active {
  border-color: rgba(12, 192, 223, 0.90) !important;
  box-shadow: 0 24px 70px rgba(12, 192, 223, 0.22), inset 0 0 0 1px rgba(255, 222, 89, 0.18) !important;
  transform: translateY(-4px) !important;
}

@media (max-width: 980px) {
  .site-header .brand-logo-shell {
    width: clamp(146px, 42vw, 184px) !important;
    height: 40px !important;
    min-height: 40px !important;
  }

  .hero {
    background:
      radial-gradient(circle at 50% 42%, rgba(12, 192, 223, 0.24), transparent 38%),
      radial-gradient(circle at 50% 56%, rgba(106, 222, 167, 0.18), transparent 44%),
      radial-gradient(circle at 50% 68%, rgba(255, 222, 89, 0.12), transparent 48%),
      transparent !important;
  }

  .hero-copy > .known-from-strip.known-from-strip-desktop {
    width: min(100%, 326px) !important;
    max-width: 326px !important;
    margin: 12px auto 0 !important;
  }

  .hero-copy > .known-from-strip .known-from-logos img,
  .hero-copy > .known-from-strip .hero-metrics article {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
  }

  #mini-game,
  #faq,
  #strategie,
  .launch-game,
  .mission-control,
  .faq,
  .faq-list,
  .faq-item,
  .contact-section,
  .contact-form,
  .site-footer,
  footer.site-footer {
    width: min(100%, 720px) !important;
    max-width: calc(100vw - 32px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    text-align: center !important;
    justify-self: center !important;
  }

  .trust-copy,
  .trust-copy h2,
  .trust-copy .section-heading h2 {
    width: 100% !important;
    max-width: calc(100vw - 16px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0.58rem !important;
    padding-right: 0.58rem !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    text-align: center !important;
    word-break: normal !important;
  }

  .trust-copy h2,
  .trust-copy .section-heading h2 {
    font-size: clamp(1.95rem, 9.6vw, 3.2rem) !important;
    line-height: 1.03 !important;
  }
}

@media (max-width: 380px) {
  .hero-copy > .known-from-strip .hero-metrics strong {
    font-size: 0.74rem !important;
  }

  .hero-copy > .known-from-strip .hero-metrics span {
    font-size: 0.36rem !important;
  }
}

.site-header {
  display: flex !important;
  align-items: center !important;
  min-height: clamp(70px, 7vw, 88px) !important;
  background:
    radial-gradient(circle at 12% 22%, rgba(12, 192, 223, 0.16), transparent 38%),
    radial-gradient(circle at 86% 40%, rgba(255, 222, 89, 0.10), transparent 42%),
    rgba(4, 35, 32, 0.74) !important;
}

.site-header .brand {
  align-self: stretch !important;
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

.site-header .brand-logo-shell {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: clamp(174px, 13vw, 214px) !important;
  height: 42px !important;
  min-height: 42px !important;
  margin: auto 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

.site-header .brand-wordmark {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: left center !important;
  overflow: visible !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

:root[data-theme="light"] .site-header .brand-wordmark-dark {
  display: block !important;
}

:root[data-theme="light"] .site-header .brand-wordmark-light {
  display: none !important;
}

:root[data-theme="dark"] .site-header .brand-wordmark-dark,
:root:not([data-theme="light"]) .site-header .brand-wordmark-dark {
  display: none !important;
}

:root[data-theme="dark"] .site-header .brand-wordmark-light,
:root:not([data-theme="light"]) .site-header .brand-wordmark-light {
  display: block !important;
}

.hero > * {
  position: relative;
  z-index: 1;
}

.known-from-strip .hero-metrics strong {
  font-family: Fredoka, var(--font-display), sans-serif !important;
  font-size: clamp(0.82rem, 0.86vw, 0.95rem) !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

@media (max-width: 980px) {
  .site-header .brand-logo-shell {
    width: clamp(142px, 43vw, 176px) !important;
    height: 36px !important;
    min-height: 36px !important;
  }

  .hero-copy .known-from-strip.known-from-strip-desktop,
  .hero .known-from-strip.known-from-strip-desktop {
    width: min(100%, 326px) !important;
    max-width: 326px !important;
    margin: 12px auto 0 !important;
    align-items: stretch !important;
  }

  .known-from-strip .known-from-logos img,
  .known-from-strip .hero-metrics article {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
  }

  .trust-copy,
  .trust-copy .section-heading,
  .trust-copy h2,
  .mini-game-heading,
  .launch-game,
  .mission-control,
  .faq,
  .faq .section-heading,
  .faq-list,
  .faq-item,
  .contact-section,
  .contact-section .section-heading,
  .contact-form,
  .site-footer,
  footer.site-footer {
    width: min(100%, 720px) !important;
    max-width: calc(100vw - 32px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    transform: none !important;
    justify-self: center !important;
    left: auto !important;
    right: auto !important;
  }

  .trust-copy h2,
  .trust-copy .section-heading h2 {
    width: 100% !important;
    max-width: calc(100vw - 20px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0.42em !important;
    padding-right: 0.42em !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    word-break: normal !important;
    text-align: center !important;
    font-size: clamp(2rem, 10.2vw, 3.25rem) !important;
    line-height: 1.02 !important;
  }
}

:root[data-theme="light"] .site-header {
  background:
    radial-gradient(circle at 12% 18%, rgba(12, 192, 223, 0.12), transparent 42%),
    radial-gradient(circle at 88% 18%, rgba(255, 222, 89, 0.12), transparent 44%),
    rgba(247, 252, 250, 0.92) !important;
}

.site-header .brand {
  align-self: stretch !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  box-shadow: none !important;
  line-height: 1 !important;
}

.site-header .brand-logo-shell {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: clamp(176px, 13vw, 218px) !important;
  height: 42px !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  transform: none !important;
}

.site-header .brand-wordmark {
  position: static !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: left center !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

.site-header .brand::before,
.site-header .brand::after,
.site-header .brand-logo-shell::before,
.site-header .brand-logo-shell::after,
.site-header .brand-wordmark::before,
.site-header .brand-wordmark::after {
  content: none !important;
  display: none !important;
}

.hero {
  position: relative !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 76% 43%, rgba(12, 192, 223, 0.30), transparent 36%),
    radial-gradient(circle at 86% 61%, rgba(105, 213, 164, 0.23), transparent 50%),
    radial-gradient(circle at 96% 71%, rgba(255, 222, 89, 0.18), transparent 65%),
    radial-gradient(circle at 30% 80%, rgba(12, 192, 223, 0.12), transparent 44%),
    var(--bg) !important;
  box-shadow: 0 0 0 100vmax var(--bg) !important;
  clip-path: inset(0 -100vmax) !important;
}

:root[data-theme="light"] .hero {
  background:
    radial-gradient(circle at 76% 43%, rgba(12, 192, 223, 0.23), transparent 37%),
    radial-gradient(circle at 86% 61%, rgba(105, 213, 164, 0.18), transparent 51%),
    radial-gradient(circle at 96% 71%, rgba(255, 222, 89, 0.14), transparent 66%),
    radial-gradient(circle at 30% 80%, rgba(12, 192, 223, 0.10), transparent 45%),
    var(--bg) !important;
}

.hero::before {
  content: "" !important;
  position: absolute !important;
  inset: -34% -90vw !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 72% 42%, rgba(12, 192, 223, 0.34), transparent 33%),
    radial-gradient(circle at 84% 58%, rgba(105, 213, 164, 0.24), transparent 49%),
    radial-gradient(circle at 92% 66%, rgba(255, 222, 89, 0.18), transparent 64%) !important;
  filter: blur(20px) !important;
}

.hero > * {
  position: relative !important;
  z-index: 1 !important;
}

.hero-visual {
  position: relative !important;
  overflow: visible !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

.hero-visual::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: -25% -46% !important;
  z-index: -1 !important;
  pointer-events: none !important;
  border-radius: 999px !important;
  background:
    radial-gradient(circle at 50% 44%, rgba(12, 192, 223, 0.34), transparent 35%),
    radial-gradient(circle at 62% 56%, rgba(105, 213, 164, 0.22), transparent 49%),
    radial-gradient(circle at 76% 64%, rgba(255, 222, 89, 0.17), transparent 62%) !important;
  filter: blur(18px) !important;
}

.phone-shell,
.phone-frame-custom {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

.known-from-strip > span,
.known-from-strip.known-from-strip-desktop > span,
.hero .known-from-strip.known-from-strip-desktop > span {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.hero-copy .known-from-strip.known-from-strip-desktop,
.hero .known-from-strip.known-from-strip-desktop {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  width: min(100%, 338px) !important;
  max-width: 338px !important;
  margin: 12px auto 0 0 !important;
  gap: 7px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.known-from-strip .known-from-logos img,
.known-from-strip .hero-metrics article {
  width: 100% !important;
  min-width: 0 !important;
  height: 42px !important;
  min-height: 42px !important;
  border-radius: 8px !important;
}

.known-from-strip .known-from-logos img {
  object-fit: contain !important;
  padding: 7px 9px !important;
  background: rgba(255, 255, 255, 0.95) !important;
}

.known-from-strip .hero-metrics article {
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
  gap: 2px !important;
  overflow: visible !important;
  padding: 5px 4px !important;
  border: 1px solid rgba(12, 192, 223, 0.38) !important;
  background:
    radial-gradient(circle at 78% 100%, rgba(12, 192, 223, 0.24), transparent 45%),
    rgba(12, 54, 49, 0.68) !important;
}

.known-from-strip .hero-metrics strong,
.known-from-strip .hero-metrics span {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

.known-from-strip .hero-metrics strong {
  font-family: var(--font-display) !important;
  font-size: clamp(0.78rem, 1.08vw, 0.96rem) !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

.known-from-strip .hero-metrics span {
  font-family: var(--font-body) !important;
  font-size: clamp(0.38rem, 0.52vw, 0.48rem) !important;
  line-height: 1.05 !important;
  letter-spacing: 0.035em !important;
  text-transform: uppercase !important;
}

.service-card:hover,
.service-card:focus-within,
.service-card.is-active,
.service-card.service-card-featured:hover,
.service-card.service-card-featured:focus-within,
.service-card.service-card-featured.is-active,
#videoproduktion:hover,
#videoproduktion:focus-within {
  border-color: rgba(12, 192, 223, 0.72) !important;
  box-shadow: 0 24px 70px rgba(12, 192, 223, 0.18), inset 0 0 0 1px rgba(255, 222, 89, 0.12) !important;
  transform: translateY(-4px) !important;
}

.service-card:hover .service-stage,
.service-card:focus-within .service-stage,
#videoproduktion:hover .service-stage,
#videoproduktion:focus-within .service-stage {
  border-color: rgba(255, 222, 89, 0.60) !important;
}

@media (max-width: 980px) {
  .site-header .brand-logo-shell {
    width: clamp(142px, 43vw, 176px) !important;
    height: 36px !important;
    min-height: 36px !important;
  }

  .hero-copy .known-from-strip.known-from-strip-desktop,
  .hero .known-from-strip.known-from-strip-desktop {
    width: min(100%, 326px) !important;
    max-width: 326px !important;
    margin: 12px auto 0 !important;
    align-items: stretch !important;
  }

  .known-from-strip .known-from-logos,
  .known-from-strip .hero-metrics {
    gap: 7px !important;
  }

  .known-from-strip .known-from-logos img,
  .known-from-strip .hero-metrics article {
    height: 42px !important;
    min-height: 42px !important;
  }

  .known-from-strip .hero-metrics strong {
    font-size: clamp(0.78rem, 3.15vw, 0.94rem) !important;
  }

  .known-from-strip .hero-metrics span {
    font-size: clamp(0.38rem, 1.65vw, 0.48rem) !important;
  }

  .trust-copy,
  .trust-copy .section-heading,
  .trust-copy h2,
  .mini-game-heading,
  .launch-game,
  .mission-control,
  .faq,
  .faq .section-heading,
  .faq-list,
  .faq-item,
  .contact-section,
  .contact-section .section-heading,
  .contact-form,
  .site-footer,
  footer.site-footer {
    width: min(100%, 720px) !important;
    max-width: calc(100vw - 32px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    transform: none !important;
    justify-self: center !important;
  }

  .trust-copy h2 {
    max-width: calc(100vw - 18px) !important;
    padding-left: 0.28em !important;
    padding-right: 0.28em !important;
    overflow: visible !important;
    word-break: normal !important;
    text-align: center !important;
  }
}

@media (max-width: 380px) {
  .known-from-strip .hero-metrics article {
    padding-inline: 3px !important;
  }

  .known-from-strip .hero-metrics strong {
    font-size: 0.74rem !important;
  }

  .known-from-strip .hero-metrics span {
    font-size: 0.36rem !important;
    letter-spacing: 0.02em !important;
  }
}

.site-header {
  min-height: clamp(70px, 7vw, 88px) !important;
}

.site-header .brand,
.site-header .brand-logo-shell {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  align-self: center !important;
  overflow: visible !important;
  line-height: 1 !important;
}

.site-header .brand,
.site-header .brand *,
.site-header .brand-logo-shell,
.site-header .brand-logo-shell * {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

.site-header .brand-wordmark {
  object-position: left center !important;
}

:root[data-theme="light"] .site-header .brand-wordmark-dark,
:root:not([data-theme="light"]) .site-header .brand-wordmark-light,
:root[data-theme="dark"] .site-header .brand-wordmark-light {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

:root[data-theme="light"] .site-header .brand-wordmark-light,
:root:not([data-theme="light"]) .site-header .brand-wordmark-dark,
:root[data-theme="dark"] .site-header .brand-wordmark-dark {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

.hero,
:root[data-theme="dark"] .hero,
:root:not([data-theme="light"]) .hero {
  background:
    radial-gradient(circle at 76% 48%, rgba(12, 192, 223, 0.34) 0%, rgba(12, 192, 223, 0.18) 24%, transparent 54%),
    radial-gradient(circle at 86% 64%, rgba(255, 222, 89, 0.18) 0%, transparent 42%),
    radial-gradient(circle at 32% 48%, rgba(45, 222, 202, 0.15) 0%, transparent 48%),
    linear-gradient(116deg, rgba(0, 28, 29, 0.52), rgba(3, 20, 19, 0.28) 48%, rgba(0, 36, 35, 0.36)),
    var(--bg) !important;
  overflow: visible !important;
}

:root[data-theme="light"] .hero {
  background:
    radial-gradient(circle at 76% 48%, rgba(12, 192, 223, 0.25) 0%, rgba(12, 192, 223, 0.13) 25%, transparent 56%),
    radial-gradient(circle at 86% 64%, rgba(255, 222, 89, 0.18) 0%, transparent 42%),
    radial-gradient(circle at 30% 50%, rgba(102, 224, 187, 0.16) 0%, transparent 46%),
    linear-gradient(116deg, rgba(247, 252, 250, 0.95), rgba(239, 253, 253, 0.74) 52%, rgba(250, 253, 245, 0.94)),
    var(--bg) !important;
}

.hero::before {
  inset: -48vh -130vw !important;
  background:
    radial-gradient(circle at 70% 46%, rgba(12, 192, 223, 0.26), transparent 42%),
    radial-gradient(circle at 84% 62%, rgba(255, 222, 89, 0.18), transparent 38%),
    radial-gradient(circle at 26% 52%, rgba(102, 224, 187, 0.14), transparent 44%) !important;
}

.hero-visual,
.phone-shell,
.phone-frame-custom,
.phone-wrap,
.phone-halo {
  background: transparent !important;
  background-color: transparent !important;
}

.hero-copy .known-from-strip.known-from-strip-desktop,
.hero .known-from-strip.known-from-strip-desktop {
  width: min(100%, 338px) !important;
  max-width: 338px !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

.known-from-strip > span,
.known-from-strip::before,
.known-from-strip::after,
.known-from-strip.known-from-strip-desktop > span,
.known-from-strip.known-from-strip-mobile,
.hero .known-from-strip-mobile {
  display: none !important;
  content: none !important;
}

.known-from-strip .known-from-logos img,
.known-from-strip .hero-metrics article {
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  box-sizing: border-box !important;
}

.known-from-strip .hero-metrics strong {
  font-size: clamp(0.82rem, 0.86vw, 0.95rem) !important;
}

.known-from-strip .hero-metrics span {
  font-size: clamp(0.42rem, 0.44vw, 0.5rem) !important;
}

@media (max-width: 980px) {
  .hero-copy .known-from-strip.known-from-strip-desktop,
  .hero .known-from-strip.known-from-strip-desktop {
    width: min(100%, 326px) !important;
    max-width: 326px !important;
    margin: 12px auto 0 !important;
  }

  .trust-copy,
  .trust-copy .section-heading,
  .trust-copy h2,
  .mini-game-heading,
  .launch-game,
  .mission-control,
  .faq,
  .faq .section-heading,
  .faq-list,
  .contact-section,
  .contact-section .section-heading,
  .contact-form,
  .site-footer,
  footer.site-footer {
    left: auto !important;
    right: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

  .trust-copy h2,
  .trust-copy .section-heading h2 {
    width: 100% !important;
    max-width: calc(100vw - 28px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-inline: 0.2em !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    font-size: clamp(2.15rem, 11.5vw, 3.35rem) !important;
    line-height: 0.98 !important;
  }
}

.site-header {
  align-items: center !important;
  min-height: clamp(70px, 7vw, 88px) !important;
  background:
    radial-gradient(circle at 12% 22%, rgba(12, 192, 223, 0.16), transparent 38%),
    radial-gradient(circle at 86% 40%, rgba(255, 222, 89, 0.10), transparent 42%),
    rgba(4, 35, 32, 0.74) !important;
}

:root[data-theme="light"] .site-header {
  background:
    radial-gradient(circle at 12% 22%, rgba(12, 192, 223, 0.16), transparent 38%),
    radial-gradient(circle at 86% 40%, rgba(255, 222, 89, 0.12), transparent 42%),
    rgba(246, 252, 250, 0.92) !important;
}

.site-header .brand {
  align-self: stretch !important;
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

.site-header .brand-logo-shell {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: clamp(174px, 13vw, 214px) !important;
  height: 42px !important;
  min-height: 42px !important;
  margin: auto 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

.site-header .brand-wordmark {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: left center !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

.site-header .brand::before,
.site-header .brand::after,
.site-header .brand-logo-shell::before,
.site-header .brand-logo-shell::after {
  content: none !important;
  display: none !important;
}

.hero,
:root[data-theme="dark"] .hero,
:root:not([data-theme="light"]) .hero {
  position: relative !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 74% 44%, rgba(12, 192, 223, 0.38) 0%, rgba(12, 192, 223, 0.20) 25%, transparent 58%),
    radial-gradient(circle at 84% 62%, rgba(106, 222, 167, 0.25) 0%, transparent 52%),
    radial-gradient(circle at 94% 70%, rgba(255, 222, 89, 0.20) 0%, transparent 70%),
    radial-gradient(circle at 28% 54%, rgba(12, 192, 223, 0.15) 0%, transparent 52%),
    linear-gradient(115deg, rgba(0, 34, 32, 0.58), rgba(3, 22, 20, 0.24) 48%, rgba(0, 42, 38, 0.40)),
    var(--bg) !important;
  box-shadow: 0 0 0 100vmax var(--bg) !important;
  clip-path: inset(0 -100vmax) !important;
}

:root[data-theme="light"] .hero {
  background:
    radial-gradient(circle at 74% 44%, rgba(12, 192, 223, 0.27) 0%, rgba(12, 192, 223, 0.13) 25%, transparent 58%),
    radial-gradient(circle at 84% 62%, rgba(106, 222, 167, 0.18) 0%, transparent 52%),
    radial-gradient(circle at 94% 70%, rgba(255, 222, 89, 0.16) 0%, transparent 70%),
    radial-gradient(circle at 28% 54%, rgba(12, 192, 223, 0.12) 0%, transparent 52%),
    linear-gradient(115deg, rgba(246, 252, 250, 0.94), rgba(236, 252, 252, 0.88) 46%, rgba(250, 253, 244, 0.94)),
    var(--bg) !important;
}

.hero::before {
  content: "" !important;
  position: absolute !important;
  inset: -45% -130vw !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 72% 46%, rgba(12, 192, 223, 0.24), transparent 42%),
    radial-gradient(circle at 86% 64%, rgba(255, 222, 89, 0.17), transparent 40%),
    radial-gradient(circle at 30% 54%, rgba(106, 222, 167, 0.13), transparent 46%) !important;
  filter: blur(24px) !important;
}

.hero-visual,
.phone-shell,
.phone-frame-custom,
.phone-wrap,
.phone-halo {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

.hero-visual::before {
  content: "" !important;
  position: absolute !important;
  inset: -24% -42% !important;
  z-index: -1 !important;
  pointer-events: none !important;
  border-radius: 999px !important;
  background:
    radial-gradient(circle at 48% 48%, rgba(12, 192, 223, 0.30), transparent 40%),
    radial-gradient(circle at 62% 54%, rgba(106, 222, 167, 0.22), transparent 48%),
    radial-gradient(circle at 72% 62%, rgba(255, 222, 89, 0.16), transparent 58%) !important;
  filter: blur(18px) !important;
}

.hero-visual::after,
.phone-shell::before,
.phone-shell::after {
  content: none !important;
  display: none !important;
}

.phone-screen {
  background: #000 !important;
}

.proof-grid,
.known-from-strip.known-from-strip-mobile,
.hero .known-from-strip-mobile,
.hero-visual > .known-from-strip,
.hero-visual > .results-medals,
.trust-strip .results-medals {
  display: none !important;
}

.known-from-strip > span,
.known-from-strip::before,
.known-from-strip::after,
.known-from-strip.known-from-strip-desktop > span,
.hero .known-from-strip.known-from-strip-desktop > span {
  content: none !important;
  display: none !important;
}

.hero-copy .known-from-strip.known-from-strip-desktop,
.hero .known-from-strip.known-from-strip-desktop {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: min(100%, 338px) !important;
  max-width: 338px !important;
  margin: 12px auto 0 0 !important;
  gap: 7px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.known-from-strip .known-from-logos,
.known-from-strip .hero-metrics {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  width: 100% !important;
  gap: 7px !important;
  margin: 0 !important;
}

.known-from-strip .known-from-logos img,
.known-from-strip .hero-metrics article {
  width: 100% !important;
  min-width: 0 !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
}

.known-from-strip .known-from-logos img {
  object-fit: contain !important;
  padding: 7px 9px !important;
  background: rgba(255, 255, 255, 0.96) !important;
}

.known-from-strip .hero-metrics article {
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
  gap: 2px !important;
  overflow: visible !important;
  padding: 5px 4px !important;
  border: 1px solid rgba(12, 192, 223, 0.42) !important;
  background:
    radial-gradient(circle at 82% 82%, rgba(12, 192, 223, 0.16), transparent 44%),
    rgba(12, 54, 49, 0.70) !important;
}

:root[data-theme="light"] .known-from-strip .hero-metrics article {
  background:
    radial-gradient(circle at 82% 82%, rgba(12, 192, 223, 0.14), transparent 44%),
    rgba(248, 253, 251, 0.90) !important;
}

.known-from-strip .hero-metrics strong,
.known-from-strip .hero-metrics span {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

.known-from-strip .hero-metrics strong {
  font-family: Fredoka, var(--font-display), sans-serif !important;
  font-size: clamp(0.82rem, 0.86vw, 0.95rem) !important;
  line-height: 1 !important;
}

.known-from-strip .hero-metrics span {
  font-family: var(--font-body), Inter, sans-serif !important;
  font-size: clamp(0.42rem, 0.44vw, 0.50rem) !important;
  line-height: 1.05 !important;
  letter-spacing: 0.035em !important;
  text-transform: uppercase !important;
}

.service-card.service-card-featured:hover,
.service-card.service-card-featured:focus-within,
.service-card.service-card-featured.is-active,
#videoproduktion:hover,
#videoproduktion:focus-within,
#videoproduktion.is-active {
  border-color: rgba(12, 192, 223, 0.86) !important;
  box-shadow: 0 24px 70px rgba(12, 192, 223, 0.22), inset 0 0 0 1px rgba(255, 222, 89, 0.18) !important;
  transform: translateY(-4px) !important;
}

@media (max-width: 980px) {
  .site-header .brand-logo-shell {
    width: clamp(142px, 43vw, 176px) !important;
    height: 36px !important;
    min-height: 36px !important;
  }

  .hero-copy .known-from-strip.known-from-strip-desktop,
  .hero .known-from-strip.known-from-strip-desktop {
    width: min(100%, 326px) !important;
    max-width: 326px !important;
    margin: 12px auto 0 !important;
  }

  .known-from-strip .known-from-logos img,
  .known-from-strip .hero-metrics article {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
  }

  .trust-copy,
  .trust-copy .section-heading,
  .trust-copy h2,
  .mini-game-heading,
  .launch-game,
  .mission-control,
  .faq,
  .faq .section-heading,
  .faq-list,
  .faq-item,
  .contact-section,
  .contact-section .section-heading,
  .contact-form,
  .site-footer,
  footer.site-footer {
    width: min(100%, 720px) !important;
    max-width: calc(100vw - 32px) !important;
    left: auto !important;
    right: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    transform: none !important;
    justify-self: center !important;
  }

  .trust-copy h2,
  .trust-copy .section-heading h2 {
    width: 100% !important;
    max-width: calc(100vw - 20px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0.42em !important;
    padding-right: 0.42em !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    word-break: normal !important;
    text-align: center !important;
    font-size: clamp(2rem, 10.2vw, 3.25rem) !important;
    line-height: 1.02 !important;
  }
}

@media (max-width: 380px) {
  .known-from-strip .hero-metrics strong {
    font-size: 0.78rem !important;
  }

  .known-from-strip .hero-metrics span {
    font-size: 0.39rem !important;
  }
}


/* ---- from: zzz-five-point-fix.css ---- */

.site-header,
:root[data-theme="light"] .site-header,
:root[data-theme="dark"] .site-header,
:root:not([data-theme="light"]) .site-header {
  top: 0 !important;
  margin-top: 0 !important;
}

@media (min-width: 761px) {
  .hero,
  :root[data-theme="light"] .hero,
  :root[data-theme="dark"] .hero,
  :root:not([data-theme="light"]) .hero {
    overflow: visible !important;
    isolation: isolate !important;
  }

  .hero::before,
  :root[data-theme="light"] .hero::before,
  :root[data-theme="dark"] .hero::before,
  :root:not([data-theme="light"]) .hero::before {
    content: "" !important;
    position: absolute !important;
    inset: -12% auto -12% 50% !important;
    width: 100vw !important;
    height: auto !important;
    transform: translateX(-50%) !important;
    z-index: -1 !important;
    pointer-events: none !important;
    border: 0 !important;
    filter: none !important;
    background:
      radial-gradient(circle at 72% 42%, rgba(12, 192, 223, 0.32), transparent 42%),
      radial-gradient(circle at 84% 64%, rgba(108, 224, 170, 0.22), transparent 44%),
      radial-gradient(circle at 94% 70%, rgba(255, 222, 89, 0.16), transparent 46%),
      radial-gradient(circle at 24% 48%, rgba(12, 192, 223, 0.12), transparent 42%) !important;
  }

  :root[data-theme="light"] .hero::before {
    background:
      radial-gradient(circle at 72% 42%, rgba(12, 192, 223, 0.24), transparent 44%),
      radial-gradient(circle at 84% 64%, rgba(108, 224, 170, 0.17), transparent 46%),
      radial-gradient(circle at 94% 70%, rgba(255, 222, 89, 0.14), transparent 48%),
      radial-gradient(circle at 24% 48%, rgba(12, 192, 223, 0.10), transparent 44%) !important;
  }
}

.site-header .mobile-nav {
  grid-template-columns: minmax(0, 1fr) !important;
  justify-items: stretch !important;
  align-items: stretch !important;
  gap: 8px !important;
  padding: 14px !important;
  box-sizing: border-box !important;
}

.site-header .mobile-nav a,
.site-header .mobile-nav a[href="#strategie"] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 46px !important;
  margin: 0 !important;
  padding: 10px 16px !important;
  box-sizing: border-box !important;
  text-align: center !important;
}

.service-grid .service-card[data-planet] {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.service-grid .service-card[data-planet]:not(.is-active) {
  transform: none !important;
  border-color: var(--line) !important;
  box-shadow: none !important;
}

.service-grid .service-card[data-planet].is-active {
  visibility: visible !important;
  opacity: 1 !important;
  border-color: rgba(12, 192, 223, 0.86) !important;
  box-shadow: 0 24px 70px rgba(12, 192, 223, 0.22), inset 0 0 0 1px rgba(255, 222, 89, 0.18) !important;
  transform: translateY(-4px) !important;
}

.known-from-strip.known-from-strip-mobile {
  display: none !important;
}

@media (max-width: 760px) {
  body main#top .hero .hero-copy > .known-from-strip.known-from-strip-desktop,
  body main#top .hero .known-from-strip.known-from-strip-desktop {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    pointer-events: none !important;
  }

  .hero > .known-from-strip.known-from-strip-mobile {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    order: 2 !important;
    width: min(100%, 326px) !important;
    max-width: 326px !important;
    margin: 4px auto 0 !important;
    gap: 7px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .hero-visual { order: 2 !important; }
  .hero-copy > p { order: 3 !important; }
  .hero-actions { order: 4 !important; }
}

/* Final corrective layer: header, seamless hero, menu and mission cards. */
html { scroll-padding-top: 118px; }

.site-header,
:root[data-theme="light"] .site-header,
:root[data-theme="dark"] .site-header,
:root:not([data-theme="light"]) .site-header {
  position: fixed !important;
  top: 20px !important;
  left: 0 !important;
  right: 0 !important;
  margin-inline: auto !important;
  box-sizing: border-box !important;
  height: 72px !important;
  min-height: 72px !important;
  max-height: 72px !important;
}

main,
main#top {
  padding-top: 96px !important;
}

body { overflow-x: clip !important; }

@media (min-width: 761px) {
  .hero,
  :root[data-theme="light"] .hero,
  :root[data-theme="dark"] .hero,
  :root:not([data-theme="light"]) .hero {
    overflow: visible !important;
    isolation: isolate !important;
    background: transparent !important;
    box-shadow: none !important;
    clip-path: none !important;
  }

  .hero::before,
  :root[data-theme="light"] .hero::before,
  :root[data-theme="dark"] .hero::before,
  :root:not([data-theme="light"]) .hero::before {
    content: "" !important;
    position: absolute !important;
    inset: -80vh auto -80vh 50% !important;
    width: 180vw !important;
    height: auto !important;
    transform: translateX(-50%) !important;
    z-index: -1 !important;
    pointer-events: none !important;
    border: 0 !important;
    filter: none !important;
    background:
      radial-gradient(ellipse at 68% 42%, rgba(12, 192, 223, 0.34), transparent 47%),
      radial-gradient(ellipse at 82% 62%, rgba(108, 224, 170, 0.24), transparent 51%),
      radial-gradient(ellipse at 92% 68%, rgba(255, 222, 89, 0.17), transparent 55%),
      radial-gradient(ellipse at 26% 48%, rgba(12, 192, 223, 0.12), transparent 50%) !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  :root[data-theme="light"] .hero::before {
    background:
      radial-gradient(ellipse at 68% 42%, rgba(12, 192, 223, 0.24), transparent 49%),
      radial-gradient(ellipse at 82% 62%, rgba(108, 224, 170, 0.18), transparent 53%),
      radial-gradient(ellipse at 92% 68%, rgba(255, 222, 89, 0.14), transparent 57%),
      radial-gradient(ellipse at 26% 48%, rgba(12, 192, 223, 0.10), transparent 52%) !important;
  }
}

.hero-title,
.hero-title > span:first-child,
.hero-title .word-rotator {
  width: 100% !important;
  max-width: 100% !important;
  text-align: center !important;
}

.hero-title .word-rotator span {
  inset-inline: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  text-align: center !important;
  transform-origin: center bottom !important;
}

.site-header .mobile-nav a,
.site-header .mobile-nav a[href="#strategie"] {
  background: color-mix(in srgb, var(--surface) 92%, transparent) !important;
  color: var(--text) !important;
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

:root[data-theme="light"] .site-header .mobile-nav a,
:root[data-theme="light"] .site-header .mobile-nav a[href="#strategie"] {
  background: rgba(255, 255, 255, 0.88) !important;
  color: #0b1716 !important;
  border-color: rgba(11, 23, 22, 0.24) !important;
}

.service-grid .service-card[data-planet],
.service-grid .service-card[data-planet].reveal,
.service-grid .service-card[data-planet].is-active {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: var(--text) !important;
  background: var(--surface) !important;
  transform: none !important;
  transition: border-color 220ms ease, box-shadow 220ms ease !important;
  contain: none !important;
  backface-visibility: visible !important;
}

.service-grid .service-card[data-planet]:not(.is-active) {
  transform: none !important;
  border-color: var(--line) !important;
  box-shadow: none !important;
}

.service-grid .service-card[data-planet].is-active {
  transform: none !important;
  border-color: rgba(12, 192, 223, 0.86) !important;
  box-shadow: 0 24px 70px rgba(12, 192, 223, 0.22), inset 0 0 0 1px rgba(255, 222, 89, 0.18) !important;
}

.service-grid .service-card[data-planet] > *:not(.planet-orb) {
  opacity: 1 !important;
  visibility: visible !important;
}

.service-grid .service-card.service-card-featured,
.service-grid .service-card.service-card-featured:hover,
.service-grid .service-card.service-card-featured:focus-within,
.service-grid .service-card.service-card-featured.is-active,
.service-grid #videoproduktion,
.service-grid #videoproduktion:hover,
.service-grid #videoproduktion:focus-within,
.service-grid #videoproduktion.is-active {
  transform: none !important;
  transition: border-color 220ms ease, box-shadow 220ms ease !important;
}

.service-grid .service-card[data-planet] .service-stage,
.service-grid .service-card[data-planet].is-active .service-stage {
  color: var(--text) !important;
  background: color-mix(in srgb, var(--surface) 88%, transparent) !important;
  border-color: var(--line) !important;
}

.service-grid .service-card[data-planet].is-active .service-stage {
  border-color: rgba(255, 222, 89, 0.62) !important;
  background: color-mix(in srgb, var(--cyan) 16%, var(--surface)) !important;
}

:root[data-theme="light"] .service-grid .service-card[data-planet],
:root[data-theme="light"] .service-grid .service-card[data-planet].reveal,
:root[data-theme="light"] .service-grid .service-card[data-planet].is-active,
:root[data-theme="light"] .service-grid .service-card[data-planet] .service-stage {
  color: #0b1716 !important;
}

:root[data-theme="light"] body .service-grid #videoproduktion .service-stage,
:root[data-theme="light"] body .service-grid #videoproduktion:hover .service-stage,
:root[data-theme="light"] body .service-grid #videoproduktion:focus-within .service-stage,
:root[data-theme="light"] body .service-grid #videoproduktion.is-active .service-stage {
  color: #0b1716 !important;
}

.about .portrait-placeholder.portrait-image img,
.about .portrait-image img,
img[src*="pepe-astronaut-final.png"] {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

@media (max-width: 760px) {
  .site-header,
  :root[data-theme="light"] .site-header,
  :root[data-theme="dark"] .site-header,
  :root:not([data-theme="light"]) .site-header {
    top: 12px !important;
    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;
  }

  main,
  main#top { padding-top: 82px !important; }
}

/* Final seamless viewport background. Keep this as the last background rule. */
html:root[data-theme="dark"] body,
html:root:not([data-theme="light"]) body {
  background:
    radial-gradient(ellipse at 12% 46%, rgba(12, 192, 223, 0.17), transparent 48%),
    radial-gradient(ellipse at 68% 44%, rgba(12, 192, 223, 0.22), transparent 52%),
    radial-gradient(ellipse at 84% 58%, rgba(108, 224, 170, 0.19), transparent 56%),
    radial-gradient(ellipse at 94% 68%, rgba(255, 222, 89, 0.14), transparent 60%),
    linear-gradient(120deg, #020807 0%, #041817 52%, #03100f 100%) !important;
  background-attachment: fixed !important;
  background-position: 0 0 !important;
  background-size: 100vw 100vh !important;
  background-repeat: no-repeat !important;
}

html:root[data-theme="light"] body {
  background:
    radial-gradient(ellipse at 12% 46%, rgba(12, 192, 223, 0.13), transparent 50%),
    radial-gradient(ellipse at 68% 44%, rgba(12, 192, 223, 0.16), transparent 54%),
    radial-gradient(ellipse at 84% 58%, rgba(108, 224, 170, 0.14), transparent 58%),
    radial-gradient(ellipse at 94% 68%, rgba(255, 222, 89, 0.11), transparent 62%),
    linear-gradient(120deg, #f7fbfa 0%, #eefafa 52%, #f9fbf4 100%) !important;
  background-attachment: fixed !important;
  background-position: 0 0 !important;
  background-size: 100vw 100vh !important;
  background-repeat: no-repeat !important;
}

html:root .hero,
html:root[data-theme="light"] .hero,
html:root[data-theme="dark"] .hero,
html:root:not([data-theme="light"]) .hero {
  background: transparent !important;
  box-shadow: none !important;
  clip-path: none !important;
}

html:root .hero::before,
html:root .hero::after,
html:root .hero-visual::before,
html:root .hero-visual::after {
  content: none !important;
  display: none !important;
  background: none !important;
  box-shadow: none !important;
}

@media (min-width: 981px) {
  html:root .hero-title,
  html:root .hero-title > span:first-child,
  html:root .hero-title .word-rotator,
  html:root .hero-title .word-rotator span {
    text-align: left !important;
  }
}

@media (max-width: 760px) {
  html:root .site-header,
  html:root[data-theme="light"] .site-header,
  html:root[data-theme="dark"] .site-header,
  html:root:not([data-theme="light"]) .site-header {
    display: flex !important;
    grid-template-columns: none !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: calc(100% - 24px) !important;
    max-width: none !important;
    padding: 10px 14px !important;
    gap: 8px !important;
  }

  html:root .site-header .brand,
  html:root[data-theme="light"] .site-header .brand,
  html:root[data-theme="dark"] .site-header .brand,
  html:root:not([data-theme="light"]) .site-header .brand {
    flex: 0 1 auto !important;
    margin: 0 !important;
  }

  html:root .site-header .header-actions,
  html:root[data-theme="light"] .site-header .header-actions,
  html:root[data-theme="dark"] .site-header .header-actions,
  html:root:not([data-theme="light"]) .site-header .header-actions {
    flex: 0 0 auto !important;
    margin: 0 0 0 auto !important;
    gap: 8px !important;
  }
}

html:root body .hero .phone-screen,
html:root body .hero .phone-screen video,
html:root body .hero video.hero-preview-video,
html:root body .hero video.hero-video {
  background: #000 !important;
  background-color: #000 !important;
}

html:root body main#top .hero .phone-shell .phone-screen video.hero-preview-video,
html:root body main#top .hero .phone-shell .phone-screen video.hero-video {
  background: #000 !important;
  background-color: #000 !important;
}

.form-honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}