:root {
  --bg0: #020B14;
  --bg1: #03121F;
  --bg2: #0A2436;
  --cyan: #2BC4E3;
  --cyan2: #1AA7D1;
  --red: #FF2D55;
  --text: rgba(255, 255, 255, 0.92);
  --muted: rgba(255, 255, 255, 0.68);
  --glass: rgba(255, 255, 255, 0.06);
  --stroke: rgba(43, 196, 227, 0.22);
  --radius: 18px;
  --radius-sm: 12px;
  --shadow-1: 0 24px 60px rgba(1, 10, 20, 0.48);
  --shadow-2: 0 10px 28px rgba(1, 10, 20, 0.34);
  --font-sans: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --oa-header-offset: 88px;
  --oa-scroll-offset: 106px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

html {
  scroll-padding-top: var(--oa-scroll-offset);
  background: #020b14;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-sans);
  color: var(--text);
  position: relative;
  isolation: isolate;
  background: transparent;
}

html.oaIndexNarrativeRoot,
body.oaIndexNarrative {
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

html.oaIndexNarrativeRoot {
  scroll-padding-top: 0;
}

body.oaIndexNarrative {
  min-height: 100dvh;
}

body.oaIndexNarrative::before,
body.oaIndexNarrative::after {
  position: fixed;
}

body::before,
body::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

body::before {
  z-index: -2;
  background:
    radial-gradient(1180px 520px at 50% 12%, rgba(29, 130, 178, 0.24), transparent 72%),
    radial-gradient(980px 520px at 50% 54%, rgba(19, 102, 148, 0.18), transparent 74%),
    linear-gradient(180deg, #03121f 0%, #041a2b 42%, #031320 67%, #020a14 84%, #01060d 100%);
}

body::after {
  z-index: -1;
  opacity: 0.92;
  background:
    radial-gradient(circle at 18% 22%, rgba(196, 236, 255, 0.12) 0 1px, transparent 2px) 0 0 / 180px 180px,
    radial-gradient(circle at 78% 68%, rgba(190, 234, 255, 0.08) 0 1px, transparent 2px) 0 0 / 200px 200px,
    linear-gradient(180deg, transparent 0%, rgba(1, 8, 14, 0.2) 56%, rgba(1, 6, 10, 0.52) 80%, rgba(0, 3, 7, 0.76) 100%);
}

a {
  color: inherit;
}

.oaHeader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1200;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(860px 140px at 50% 0%, rgba(43, 196, 227, 0.14), transparent 72%),
    linear-gradient(180deg, rgba(3, 18, 31, 0.96), rgba(2, 11, 20, 0.9));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.oaHeader__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 14px clamp(14px, 2.6vw, 28px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.oaBrand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.oaBrand__logo {
  width: 34px;
  height: 34px;
  display: block;
  filter: drop-shadow(0 0 18px rgba(43, 196, 227, 0.3));
}

.oaBrand__name {
  font-size: 16px;
  font-weight: 650;
  letter-spacing: 0.2px;
}

.oaNavDesktop {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
  justify-content: flex-end;
}

.oaNavDesktop__main {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border: 1px solid rgba(119, 220, 242, 0.26);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.035);
}

.oaNavDesktop__link {
  position: relative;
  border-radius: 999px;
  padding: 8px 12px;
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 560;
  letter-spacing: 0.02em;
  color: rgba(224, 244, 255, 0.8);
  transition: color 0.2s ease, background 0.2s ease;
}

.oaNavDesktop__link:hover {
  color: rgba(238, 250, 255, 0.98);
  background: rgba(255, 255, 255, 0.06);
}

.oaNavDesktop__link.is-current {
  color: rgba(241, 252, 255, 0.98);
  background: rgba(43, 196, 227, 0.16);
}

.oaNavDesktop__link.is-current::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 6px;
  height: 2px;
  border-radius: 99px;
  background: linear-gradient(90deg, rgba(130, 227, 247, 0.82), rgba(43, 196, 227, 0.92));
}

.oaNavDesktop__auth {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.oaNavDesktop__signin,
.oaNavDesktop__signup {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 8px 14px;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.oaNavDesktop__signin {
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(232, 247, 255, 0.92);
}

.oaNavDesktop__signin:hover {
  border-color: rgba(168, 232, 248, 0.44);
  background: rgba(255, 255, 255, 0.09);
  transform: translateY(-1px);
}

.oaNavDesktop__signup {
  color: #04131d;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: linear-gradient(118deg, var(--cyan), var(--cyan2));
  box-shadow: 0 10px 22px rgba(12, 130, 164, 0.3);
}

.oaNavDesktop__signup:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 26px rgba(14, 145, 184, 0.34);
}

.oaNavDesktop__link:focus-visible,
.oaNavDesktop__signin:focus-visible,
.oaNavDesktop__signup:focus-visible,
.oaNavMobile__link:focus-visible {
  outline: 2px solid rgba(128, 227, 247, 0.85);
  outline-offset: 2px;
}

.oaNavToggle {
  display: none;
  width: 46px;
  height: 46px;
  padding: 0;
  border-radius: 14px;
  border: 1px solid rgba(114, 216, 240, 0.36);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04));
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}

.oaNavToggle span {
  width: 19px;
  height: 2px;
  border-radius: 99px;
  background: rgba(223, 246, 255, 0.94);
  transition: transform 0.24s ease, opacity 0.24s ease;
}

body.is-nav-open .oaNavToggle span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

body.is-nav-open .oaNavToggle span:nth-child(2) {
  opacity: 0;
}

body.is-nav-open .oaNavToggle span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

html.is-nav-scroll-lock,
body.is-nav-scroll-lock {
  overflow: hidden !important;
  overscroll-behavior: none;
}

body.is-nav-scroll-lock {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
}

.oaNavMobile {
  position: fixed;
  inset: 0;
  z-index: 3000;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(0, -6%, 0);
  overflow: hidden;
  overscroll-behavior: contain;
  transition: opacity 0.3s ease, transform 0.34s cubic-bezier(0.2, 0.78, 0.24, 1), visibility 0.3s ease;
  background:
    radial-gradient(860px 380px at 50% -12%, rgba(43, 196, 227, 0.16), transparent 72%),
    linear-gradient(180deg, #020B14 0%, #03121F 48%, #061E2E 100%);
}

.oaNavMobile.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate3d(0, 0, 0);
}

.oaNavMobile__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100svh;
  min-height: 100dvh;
  margin: 0;
  padding:
    calc(var(--oa-header-offset) + 24px)
    clamp(18px, 6vw, 28px)
    max(28px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 22px;
  background:
    radial-gradient(880px 420px at 50% 0%, rgba(43, 196, 227, 0.09), transparent 64%),
    linear-gradient(180deg, rgba(2, 11, 20, 0.9), rgba(2, 11, 20, 0.86));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.oaNavMobile__brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.oaNavMobile__logo {
  width: 36px;
  height: 36px;
  display: block;
  filter: drop-shadow(0 0 12px rgba(43, 196, 227, 0.35));
}

.oaNavMobile__name {
  font-size: 1.08rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  color: rgba(229, 247, 255, 0.96);
}

.oaNavMobile__links {
  width: min(100%, 540px);
  display: grid;
  gap: 10px;
}

.oaNavMobile__auth {
  width: min(100%, 540px);
  display: grid;
  gap: 10px;
}

.oaNavMobile__link {
  width: 100%;
  min-height: 46px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(228, 245, 255, 0.88);
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.oaNavMobile__link:hover {
  border-color: rgba(169, 233, 248, 0.4);
  background: rgba(255, 255, 255, 0.085);
}

.oaNavMobile__link.is-current {
  color: rgba(240, 251, 255, 0.98);
  border-color: rgba(94, 214, 241, 0.56);
  background: rgba(43, 196, 227, 0.13);
}

.oaNavMobile__link--ghost {
  background: rgba(255, 255, 255, 0.06);
}

.oaNavMobile__link--primary {
  color: #04131d;
  border-color: rgba(255, 255, 255, 0.22);
  background: linear-gradient(120deg, var(--cyan), var(--cyan2));
  box-shadow: 0 14px 28px rgba(15, 132, 170, 0.28);
}

body.is-nav-open:not(.oa-boot-lock) {
  overflow: hidden;
}

.oaPill,
.oaBtn {
  border-radius: 999px;
  padding: 10px 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.oaPill {
  background: rgba(255, 255, 255, 0.04);
}

.oaPill:hover,
.oaBtn:hover {
  transform: translateY(-1px);
}

.oaBtn--ghost {
  background: rgba(255, 255, 255, 0.07);
}

.oaBtn--primary {
  color: #04131d;
  border-color: rgba(255, 255, 255, 0.18);
  background: linear-gradient(120deg, var(--cyan), var(--cyan2));
  box-shadow: 0 14px 28px rgba(15, 132, 170, 0.28);
}

.oaMain {
  flex: 1;
  padding-top: var(--oa-header-offset);
}

body.oaIndexNarrative .oaMain {
  position: fixed;
  inset: var(--oa-header-offset) 0 0;
  padding-top: 0;
  overflow: hidden;
  isolation: isolate;
}

body.oaIndexNarrative .oaFooter {
  display: none;
}

body.oaIndexNarrative .oaNavMobile__panel {
  overflow: hidden;
}

.oaNarrativeStage {
  position: relative;
}

.narrativeScreen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(0, 20px, 0) scale(0.986);
  filter: blur(26px);
  backface-visibility: hidden;
  contain: layout paint style;
  transition:
    opacity 0.62s cubic-bezier(0.2, 0.82, 0.2, 1),
    transform 0.72s cubic-bezier(0.2, 0.82, 0.2, 1),
    filter 0.72s cubic-bezier(0.2, 0.82, 0.2, 1),
    visibility 0s linear 0.72s;
}

.narrativeScreen.is-active,
.narrativeScreen.is-entering {
  visibility: visible;
  pointer-events: auto;
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
  transition-delay: 0s;
}

.narrativeScreen.is-leaving {
  visibility: visible;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(0, -12px, 0) scale(0.992);
  filter: blur(32px);
  transition-delay: 0s;
}

.narrativeScreen[hidden] {
  display: none !important;
}

body[data-narrative-transition="hero--responsive-intro"] .introHero.is-leaving {
  opacity: 0;
  transform: translate3d(-20vw, -1.4vh, 0) scale(0.984);
  filter: blur(26px);
  transition:
    opacity 0.82s cubic-bezier(0.2, 0.82, 0.2, 1),
    transform 0.92s cubic-bezier(0.16, 0.86, 0.18, 1),
    filter 0.92s cubic-bezier(0.16, 0.86, 0.18, 1),
    visibility 0s linear 0.92s;
}

body[data-narrative-transition="hero--responsive-intro"] .introHero.is-leaving .introHero__sharkSequence {
  transform: translate3d(-7vw, -10px, 0);
  transition: transform 0.92s cubic-bezier(0.16, 0.86, 0.18, 1);
}

body[data-narrative-transition="hero--responsive-intro"] .responsiveIntro.is-entering {
  opacity: 0.18;
  transform: translate3d(22vw, 1.2vh, 0) scale(0.986);
  filter: blur(24px);
}

body[data-narrative-transition="hero--responsive-intro"] .responsiveIntro.is-entering.is-active {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
  transition:
    opacity 0.7s cubic-bezier(0.18, 0.84, 0.2, 1),
    transform 0.9s cubic-bezier(0.16, 0.86, 0.18, 1),
    filter 0.9s cubic-bezier(0.16, 0.86, 0.18, 1),
    visibility 0s linear 0.92s;
}

body.oaIndexNarrative .introHero,
body.oaIndexNarrative .responsiveIntro,
body.oaIndexNarrative .hero,
body.oaIndexNarrative .whyArcys {
  min-height: 100%;
  height: 100%;
}

.pageHero {
  position: relative;
  min-height: calc(100vh - var(--oa-header-offset));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(30px, 6vw, 72px);
  text-align: center;
  background: transparent;
}

.pageHero::before,
.pageHero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.pageHero::before {
  opacity: 0.26;
  background:
    radial-gradient(circle at 12% 72%, rgba(190, 234, 255, 0.32) 0 1px, transparent 2px),
    radial-gradient(circle at 26% 56%, rgba(190, 234, 255, 0.2) 0 1px, transparent 2px),
    radial-gradient(circle at 72% 64%, rgba(190, 234, 255, 0.22) 0 1px, transparent 2px),
    radial-gradient(circle at 84% 40%, rgba(190, 234, 255, 0.2) 0 1px, transparent 2px),
    radial-gradient(circle at 64% 82%, rgba(190, 234, 255, 0.18) 0 1px, transparent 2px);
}

.pageHero::after {
  background:
    radial-gradient(900px 260px at 50% 100%, rgba(43, 196, 227, 0.16), transparent 72%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0));
}

.pageHero__inner {
  position: relative;
  z-index: 1;
}

.pageHero__title {
  margin: 0;
  font-size: clamp(2rem, 7vw, 4.6rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: rgba(232, 247, 255, 0.95);
  text-shadow:
    0 8px 28px rgba(8, 92, 134, 0.36),
    0 0 20px rgba(64, 206, 235, 0.22);
}

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

.introHero {
  position: relative;
  min-height: calc(100vh - var(--oa-header-offset));
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-user-select: none;
  user-select: none;
  background: transparent;
}

.introHero__bg,
.introHero__oceanLife,
.introHero__particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.introHero__bg {
  background:
    radial-gradient(1200px 500px at 50% 120%, rgba(43, 196, 227, 0.16), transparent 70%),
    radial-gradient(800px 300px at 50% -20%, rgba(96, 202, 255, 0.06), transparent 72%);
}

.introHero__oceanLife {
  z-index: 0;
  overflow: hidden;
}

.introHero__particles {
  opacity: 0.28;
  background:
    radial-gradient(circle at 10% 76%, rgba(190, 234, 255, 0.34) 0 1px, transparent 2px),
    radial-gradient(circle at 24% 60%, rgba(190, 234, 255, 0.24) 0 1px, transparent 2px),
    radial-gradient(circle at 70% 66%, rgba(190, 234, 255, 0.26) 0 1px, transparent 2px),
    radial-gradient(circle at 84% 46%, rgba(190, 234, 255, 0.22) 0 1px, transparent 2px),
    radial-gradient(circle at 64% 82%, rgba(190, 234, 255, 0.2) 0 1px, transparent 2px);
  background-size: 100% 100%;
}

.bubble {
  position: absolute;
  left: var(--x, 50%);
  bottom: -8%;
  width: var(--s, 5px);
  height: var(--s, 5px);
  border-radius: 50%;
  border: 1px solid rgba(218, 241, 255, 0.32);
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 64%);
  opacity: 0;
  animation: bubbleRise var(--dur, 10s) linear infinite;
  animation-delay: var(--delay, 0s);
}

.fish,
.shark {
  position: absolute;
  left: -26%;
  pointer-events: none;
  opacity: 0;
}

.fish {
  top: var(--y, 64%);
  width: var(--w, 64px);
  height: calc(var(--w, 64px) * 0.34);
  border-radius: 62% 40% 45% 40%;
  background: linear-gradient(180deg, rgba(220, 233, 240, 0.12), rgba(220, 233, 240, 0.05));
  filter: blur(0.55px);
  animation: fishDrift var(--dur, 20s) linear infinite;
  animation-delay: var(--delay, 0s);
}

.fish::before {
  content: "";
  position: absolute;
  left: -18%;
  top: 50%;
  width: 24%;
  height: 56%;
  transform: translateY(-50%);
  clip-path: polygon(100% 50%, 0 0, 0 100%);
  background: rgba(220, 233, 240, 0.11);
}

.fish::after {
  content: "";
  position: absolute;
  left: 42%;
  top: -20%;
  width: 16%;
  height: 38%;
  clip-path: polygon(50% 0, 0 100%, 100% 100%);
  background: rgba(220, 233, 240, 0.09);
}

.fish--a {
  --y: 66%;
  --w: clamp(40px, 4.4vw, 70px);
  --dur: 22s;
  --delay: 1s;
}

.fish--b {
  --y: 57%;
  --w: clamp(30px, 3.4vw, 52px);
  --dur: 25s;
  --delay: 7s;
}

.fish--c {
  --y: 73%;
  --w: clamp(34px, 3.8vw, 60px);
  --dur: 24s;
  --delay: 12s;
}

.shark {
  top: 62%;
  width: clamp(140px, 15vw, 230px);
  height: clamp(30px, 3.6vw, 50px);
  border-radius: 58% 40% 46% 36%;
  background: linear-gradient(180deg, rgba(214, 228, 238, 0.12), rgba(214, 228, 238, 0.05));
  filter: blur(1px);
  animation: sharkCruise 33s linear infinite;
  animation-delay: 14s;
}

.shark::before {
  content: "";
  position: absolute;
  left: -13%;
  top: 50%;
  width: 20%;
  height: 50%;
  transform: translateY(-50%);
  clip-path: polygon(100% 50%, 0 0, 0 100%);
  background: rgba(214, 228, 238, 0.1);
}

.shark::after {
  content: "";
  position: absolute;
  left: 40%;
  top: -24%;
  width: 14%;
  height: 50%;
  clip-path: polygon(50% 0, 0 100%, 100% 100%);
  background: rgba(214, 228, 238, 0.09);
}

.introHero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  min-height: 100%;
  margin: 0;
  display: block;
  padding: 0;
  text-align: center;
}

.introHero__sharkSequence {
  --hero-title-y: 34%;
  --hero-desc-y: 52%;
  --hero-cta-y: 66%;
  position: relative;
  width: min(100%, 1180px);
  max-width: 1180px;
  min-height: 100%;
  height: 100%;
  margin: 0 auto;
  isolation: isolate;
}

.introHero__storyBlock {
  position: absolute;
  left: 50%;
  z-index: 1;
  display: grid;
  justify-items: center;
  transform: translate(-50%, -50%);
  transform-origin: center top;
  opacity: 0;
  will-change: top, transform, filter, opacity;
  pointer-events: none;
}

.introHero__storyBlock.is-live {
  opacity: 1;
}

.introHero__titleBlock {
  top: var(--hero-title-y);
  --shark-pass-adjust: 0px;
  --story-float-y: 10px;
  --story-float-duration: 7.6s;
  width: min(calc(100% - 1.6rem), 1020px);
  gap: clamp(0.56rem, 1.2vw, 1.2rem);
  padding-inline: clamp(12px, 3vw, 30px);
}

.introHero__descriptionBlock {
  top: var(--hero-desc-y);
  --shark-pass-adjust: 0px;
  --story-float-y: 7px;
  --story-float-duration: 8.4s;
  width: min(calc(100% - 2rem), 760px);
  gap: clamp(0.44rem, 1vw, 0.7rem);
  padding-inline: clamp(12px, 2vw, 22px);
  padding-block: 0.25rem;
}

.introHero__ctaBlock {
  top: var(--hero-cta-y);
  --shark-pass-adjust: 0px;
  --story-float-y: 5px;
  --story-float-duration: 7.2s;
  width: auto;
  padding-inline: 0.6rem;
}

.introHero__storyBlock.is-ready {
  opacity: 1;
  animation: introHeroStoryFloat var(--story-float-duration, 7.4s) ease-in-out infinite;
}

.introHero__ctaBlock.is-ready {
  pointer-events: auto;
}

.introHero__titleLine {
  margin: 0;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex-wrap: nowrap;
  gap: clamp(0.01em, 0.08vw, 0.06em);
  overflow: visible;
  padding-inline: clamp(0.18rem, 1vw, 0.9rem);
  white-space: nowrap;
  line-height: 0.94;
  letter-spacing: -0.02em;
}

.introHero__titleLine--primary {
  font-size: clamp(2.8rem, 8.6vw, 6.9rem);
  font-weight: 790;
}

.introHero__titleLine--secondary {
  font-size: clamp(1.65rem, 4.4vw, 3.25rem);
  font-weight: 690;
  line-height: 1;
  letter-spacing: -0.015em;
}

.introHero__descriptionLine {
  margin: 0;
  width: auto;
  max-width: 100%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding-inline: 0.1em;
  white-space: nowrap;
  overflow: visible;
  font-size: clamp(1rem, 2vw, 1.42rem);
  line-height: 1.22;
  font-weight: 540;
  letter-spacing: -0.012em;
  color: rgba(220, 245, 255, 0.9);
  text-shadow:
    0 10px 24px rgba(4, 18, 29, 0.34),
    0 0 18px rgba(92, 219, 255, 0.14);
}

.introHero__titleChar {
  position: relative;
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  min-width: 0.34ch;
  opacity: 0;
  color: transparent;
  background:
    linear-gradient(180deg, rgba(240, 249, 255, 0.98) 0%, rgba(199, 240, 255, 0.94) 38%, rgba(125, 214, 255, 0.88) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: blur(12px);
  transform: translate3d(-36px, 12px, 0) scale(0.92) skewX(-10deg);
  text-shadow:
    0 0 12px rgba(175, 238, 255, 0.18),
    0 0 28px rgba(54, 190, 241, 0.18);
  will-change: opacity, transform, filter;
}

.introHero__titleChar::after {
  content: "";
  position: absolute;
  inset: 20% -22% 14%;
  border-radius: 999px;
  opacity: 0;
  background:
    linear-gradient(90deg, rgba(33, 129, 189, 0), rgba(189, 243, 255, 0.76) 42%, rgba(33, 129, 189, 0));
  filter: blur(7px);
  mix-blend-mode: screen;
  pointer-events: none;
}

.introHero__titleChar.is-visible {
  animation: sharkTitleCharReveal 80ms cubic-bezier(0.14, 0.84, 0.22, 1) forwards;
}

.introHero__titleChar.is-visible::after {
  animation: sharkTitleCharCurrent 72ms ease-out forwards;
}

.introHero__titleChar.is-static {
  opacity: 1;
  filter: none;
  transform: none;
  animation: none !important;
}

.introHero__titleChar.is-static::after {
  opacity: 0;
  animation: none !important;
}

.introHero__titleChar.is-space {
  min-width: 0.42em;
}

.introHero__titleChar.is-space::after {
  display: none;
}

.introHero__ctaAction {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  min-height: 58px;
  padding: 0.78rem 1.12rem 0.78rem 1.28rem;
  border: 1px solid rgba(107, 222, 255, 0.34);
  border-radius: 999px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(11, 33, 47, 0.84), rgba(4, 16, 28, 0.92)),
    radial-gradient(circle at 18% 50%, rgba(90, 216, 255, 0.2), transparent 52%);
  box-shadow:
    0 12px 30px rgba(4, 16, 28, 0.34),
    inset 0 0 0 1px rgba(183, 240, 255, 0.08);
  color: rgba(230, 247, 255, 0.96);
  opacity: 0;
  transform: translate3d(0, 10px, 0) scale(0.96);
  pointer-events: none;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition:
    opacity 180ms ease,
    transform 280ms cubic-bezier(0.18, 0.84, 0.2, 1),
    box-shadow 280ms cubic-bezier(0.18, 0.84, 0.2, 1),
    border-color 240ms ease,
    filter 280ms cubic-bezier(0.18, 0.84, 0.2, 1),
    background 280ms ease;
}

.introHero__ctaAction::before,
.introHero__ctaAction::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.introHero__ctaAction::before {
  inset: 2px;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0) 48%) top / 100% 68% no-repeat,
    linear-gradient(90deg, rgba(238, 250, 255, 0), rgba(238, 250, 255, 0.88) 50%, rgba(238, 250, 255, 0)) center 10px / 42% 1px no-repeat,
    linear-gradient(90deg, rgba(196, 244, 255, 0.68), rgba(119, 227, 255, 0.18) 28%, rgba(119, 227, 255, 0) 62%) left 18px top 0 / calc(50% - 30px) 1px no-repeat,
    linear-gradient(90deg, rgba(119, 227, 255, 0), rgba(119, 227, 255, 0.18) 72%, rgba(196, 244, 255, 0.68)) right 18px top 0 / calc(50% - 30px) 1px no-repeat;
  opacity: 0.88;
  z-index: 0;
  transition:
    opacity 280ms cubic-bezier(0.18, 0.84, 0.2, 1),
    transform 280ms cubic-bezier(0.18, 0.84, 0.2, 1);
}

.introHero__ctaAction::after {
  inset: -18% -12%;
  background:
    linear-gradient(112deg, rgba(255, 255, 255, 0) 24%, rgba(255, 255, 255, 0.34) 45%, rgba(120, 228, 255, 0.18) 56%, rgba(255, 255, 255, 0) 74%);
  mix-blend-mode: screen;
  opacity: 0;
  transform: translate3d(-56%, 0, 0);
  z-index: 0;
  transition:
    opacity 300ms cubic-bezier(0.18, 0.84, 0.2, 1),
    transform 680ms cubic-bezier(0.16, 0.86, 0.18, 1);
}

.introHero__ctaBlock.is-live .introHero__ctaAction {
  opacity: 0;
  transform: translate3d(0, 12px, 0) scale(0.94);
  background:
    linear-gradient(180deg, rgba(11, 33, 47, 0), rgba(4, 16, 28, 0)),
    radial-gradient(circle at 18% 50%, rgba(90, 216, 255, 0), transparent 52%);
  border-color: rgba(107, 222, 255, 0);
  box-shadow: none;
}

.introHero__ctaBlock.is-ready .introHero__ctaAction {
  opacity: 1;
  pointer-events: auto;
  background:
    linear-gradient(180deg, rgba(11, 33, 47, 0.84), rgba(4, 16, 28, 0.92)),
    radial-gradient(circle at 18% 50%, rgba(90, 216, 255, 0.2), transparent 52%);
  border-color: rgba(107, 222, 255, 0.34);
  box-shadow:
    0 12px 30px rgba(4, 16, 28, 0.34),
    inset 0 0 0 1px rgba(183, 240, 255, 0.08);
}

.introHero__fillGroup {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 520ms cubic-bezier(0.2, 0.82, 0.2, 1),
    filter 520ms cubic-bezier(0.2, 0.82, 0.2, 1),
    transform 760ms cubic-bezier(0.2, 0.82, 0.2, 1);
  filter: blur(18px);
  transform: translate3d(0, 24px, 0) scale(0.98);
}

.introHero__fillGroup.is-live {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0) scale(1);
}

.introHero__fillGroup.is-ready {
  animation: introHeroFillFloat 10s ease-in-out infinite;
}

.introHero__fillGroup > span {
  position: absolute;
  pointer-events: none;
}

.introHero__fillHalo {
  left: 50%;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
}

.introHero__fillHalo--title {
  top: var(--hero-title-y);
  width: min(78vw, 980px);
  height: min(34vh, 340px);
  background:
    radial-gradient(circle at center, rgba(88, 222, 255, 0.26) 0%, rgba(88, 222, 255, 0.1) 34%, rgba(88, 222, 255, 0) 74%);
  filter: blur(44px);
}

.introHero__fillHalo--description {
  top: var(--hero-desc-y);
  width: min(62vw, 760px);
  height: min(24vh, 220px);
  background:
    radial-gradient(circle at center, rgba(69, 183, 232, 0.22) 0%, rgba(69, 183, 232, 0.08) 34%, rgba(69, 183, 232, 0) 76%);
  filter: blur(36px);
}

.introHero__fillHalo--cta {
  top: var(--hero-cta-y);
  width: min(48vw, 440px);
  height: min(18vh, 140px);
  background:
    radial-gradient(circle at center, rgba(64, 190, 236, 0.2) 0%, rgba(64, 190, 236, 0.08) 36%, rgba(64, 190, 236, 0) 80%);
  filter: blur(28px);
}

.introHero__fillPanel {
  top: calc(var(--hero-title-y) + 1%);
  width: min(24vw, 300px);
  height: min(30vh, 250px);
  border: 1px solid rgba(94, 214, 255, 0.12);
  border-radius: 32px;
  background:
    linear-gradient(180deg, rgba(17, 54, 74, 0.16), rgba(6, 20, 32, 0.02)),
    radial-gradient(circle at 18% 28%, rgba(148, 233, 255, 0.14), transparent 48%);
  box-shadow:
    inset 0 0 0 1px rgba(187, 241, 255, 0.02),
    0 0 50px rgba(28, 108, 148, 0.08);
  clip-path: polygon(24px 0, calc(100% - 24px) 0, 100% 24px, 100% calc(100% - 20px), calc(100% - 20px) 100%, 20px 100%, 0 calc(100% - 20px), 0 24px);
}

.introHero__fillPanel--left {
  left: 4%;
}

.introHero__fillPanel--right {
  right: 4%;
}

.introHero__fillSweep {
  left: 50%;
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, rgba(126, 228, 255, 0), rgba(171, 240, 255, 0.82) 48%, rgba(126, 228, 255, 0));
  box-shadow: 0 0 18px rgba(73, 198, 239, 0.28);
}

.introHero__fillSweep--title {
  top: calc(var(--hero-title-y) - 10%);
  width: min(64vw, 820px);
}

.introHero__fillBand {
  left: 50%;
  width: min(70vw, 860px);
  height: 1px;
  border-radius: 999px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, rgba(117, 227, 255, 0), rgba(117, 227, 255, 0.46) 26%, rgba(219, 249, 255, 0.82) 50%, rgba(117, 227, 255, 0.46) 74%, rgba(117, 227, 255, 0));
  box-shadow: 0 0 18px rgba(66, 185, 228, 0.24);
}

.introHero__fillBand--top {
  top: calc(var(--hero-desc-y) - 5%);
}

.introHero__fillBand--bottom {
  top: calc(var(--hero-desc-y) + 6.5%);
}

.introHero__fillOrbit {
  left: 50%;
  top: var(--hero-desc-y);
  width: min(46vw, 560px);
  height: min(16vh, 160px);
  border: 1px solid rgba(101, 220, 255, 0.14);
  border-radius: 999px;
  transform: translate(-50%, -50%);
  box-shadow:
    inset 0 0 0 1px rgba(219, 249, 255, 0.02),
    0 0 32px rgba(55, 169, 214, 0.08);
}

.introHero__fillPlatform {
  left: 50%;
  top: calc(var(--hero-cta-y) + 2.2%);
  width: min(40vw, 380px);
  height: 76px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background:
    radial-gradient(circle at center, rgba(125, 226, 255, 0.22) 0%, rgba(125, 226, 255, 0.08) 42%, rgba(125, 226, 255, 0) 76%);
  filter: blur(22px);
}

.introHero__fillSweep--cta {
  top: calc(var(--hero-cta-y) - 4.8%);
  width: min(26vw, 220px);
  opacity: 0.7;
}

.introHero__fillBracket {
  top: calc(var(--hero-cta-y) - 0.6%);
  width: 56px;
  height: 56px;
  border-top: 1px solid rgba(124, 227, 255, 0.28);
  border-bottom: 1px solid rgba(124, 227, 255, 0.28);
  transform: translateY(-50%);
  opacity: 0.7;
}

.introHero__fillBracket::before,
.introHero__fillBracket::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 12px;
  height: 1px;
  background: rgba(171, 239, 255, 0.64);
  transform: translateY(-50%);
  box-shadow: 0 0 12px rgba(91, 211, 255, 0.28);
}

.introHero__fillBracket--left {
  left: calc(50% - min(19vw, 170px));
  border-left: 1px solid rgba(124, 227, 255, 0.28);
  border-top-left-radius: 18px;
  border-bottom-left-radius: 18px;
}

.introHero__fillBracket--left::before,
.introHero__fillBracket--left::after {
  left: 0;
}

.introHero__fillBracket--left::before {
  top: 0;
  transform: none;
}

.introHero__fillBracket--left::after {
  top: auto;
  bottom: 0;
  transform: none;
}

.introHero__fillBracket--right {
  right: calc(50% - min(19vw, 170px));
  border-right: 1px solid rgba(124, 227, 255, 0.28);
  border-top-right-radius: 18px;
  border-bottom-right-radius: 18px;
}

.introHero__fillBracket--right::before,
.introHero__fillBracket--right::after {
  right: 0;
}

.introHero__fillBracket--right::before {
  top: 0;
  transform: none;
}

.introHero__fillBracket--right::after {
  top: auto;
  bottom: 0;
  transform: none;
}

.introHero__ctaAction:hover {
  transform: translate3d(0, -3px, 0) scale(1.018);
  border-color: rgba(184, 242, 255, 0.74);
  background:
    linear-gradient(180deg, rgba(15, 43, 60, 0.92), rgba(5, 18, 31, 0.98)),
    radial-gradient(circle at 18% 50%, rgba(120, 227, 255, 0.3), transparent 54%);
  box-shadow:
    0 18px 36px rgba(4, 16, 28, 0.44),
    0 0 28px rgba(71, 201, 248, 0.24),
    0 0 54px rgba(82, 211, 252, 0.16),
    inset 0 0 0 1px rgba(203, 246, 255, 0.16);
  filter: saturate(1.08) brightness(1.04);
}

.introHero__ctaAction:hover::before {
  opacity: 1;
  transform: translate3d(0, -1px, 0);
}

.introHero__ctaAction:hover::after {
  opacity: 0.96;
  transform: translate3d(54%, 0, 0);
}

.introHero__ctaAction:hover .introHero__ctaArrow {
  transform: translate3d(4px, 0, 0);
}

.introHero__ctaAction:hover .introHero__ctaArrow svg {
  filter:
    drop-shadow(0 0 12px rgba(175, 239, 255, 0.62))
    drop-shadow(0 0 28px rgba(86, 209, 249, 0.26));
}

.introHero__ctaAction:hover .introHero__ctaLabel {
  text-shadow:
    0 0 12px rgba(188, 242, 255, 0.26),
    0 0 26px rgba(79, 206, 247, 0.12);
}

.introHero__ctaAction:active {
  transform: translate3d(0, -1px, 0) scale(0.992);
  box-shadow:
    0 12px 22px rgba(4, 16, 28, 0.34),
    0 0 18px rgba(71, 201, 248, 0.16),
    inset 0 0 0 1px rgba(183, 240, 255, 0.12);
}

.introHero__ctaAction:focus-visible {
  outline: 2px solid rgba(166, 238, 255, 0.88);
  outline-offset: 4px;
}

.introHero__ctaLabel {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font-size: clamp(1.08rem, 2.1vw, 1.34rem);
  font-weight: 640;
  line-height: 1;
  letter-spacing: -0.014em;
}

.introHero__ctaArrow {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  opacity: 0;
  transform: translate3d(-10px, 0, 0);
  transition:
    opacity 180ms ease,
    transform 240ms cubic-bezier(0.2, 0.82, 0.2, 1);
}

.introHero__ctaArrow svg {
  width: 100%;
  height: auto;
  fill: none;
  stroke: rgba(211, 247, 255, 0.96);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  filter:
    drop-shadow(0 0 10px rgba(129, 229, 255, 0.46))
    drop-shadow(0 0 24px rgba(71, 201, 248, 0.18));
}

.introHero__ctaBlock.is-ready .introHero__ctaArrow {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  animation: introHeroArrowFloat 2.4s ease-in-out infinite;
}

.introHero__ctaAction.is-attention {
  animation: introHeroCtaShake 1180ms cubic-bezier(0.2, 0.78, 0.22, 1) both;
}

.introHero__ctaAction.is-attention::before {
  opacity: 1;
  transform: translate3d(0, -1px, 0) scale(1.003);
}

.introHero__ctaAction.is-attention::after {
  opacity: 0.64;
  transform: translate3d(28%, 0, 0);
}

.introHero__wake {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: 0;
  height: clamp(28px, 6vw, 74px);
  opacity: 0;
  transform: translateY(-50%);
  transform-origin: left center;
  pointer-events: none;
  mix-blend-mode: screen;
}

.introHero__wakeCore,
.introHero__wakeGlow {
  position: absolute;
  inset: 0;
  border-radius: 999px;
}

.introHero__wakeCore {
  background:
    linear-gradient(90deg, rgba(4, 17, 29, 0) 0%, rgba(88, 219, 255, 0.4) 26%, rgba(196, 246, 255, 0.16) 62%, rgba(4, 17, 29, 0) 100%);
  filter: blur(1px);
}

.introHero__wakeGlow {
  inset: -12px -24px;
  background:
    linear-gradient(90deg, rgba(9, 29, 46, 0) 0%, rgba(70, 197, 255, 0.3) 30%, rgba(188, 243, 255, 0.18) 54%, rgba(9, 29, 46, 0) 100%);
  filter: blur(22px);
  opacity: 0.92;
}

.introHero__trail {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.introHero__trailParticle {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

.introHero__trailParticle--bubble {
  width: var(--size, 10px);
  height: var(--size, 10px);
  border-radius: 50%;
  border: 1px solid rgba(214, 243, 255, 0.34);
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.08) 44%, rgba(255, 255, 255, 0) 78%);
  box-shadow:
    0 0 12px rgba(111, 222, 255, 0.18),
    inset 0 0 10px rgba(190, 240, 255, 0.08);
  animation: sharkTrailBubble var(--dur, 240ms) ease-out forwards;
}

.introHero__trailParticle--spark {
  width: var(--w, 28px);
  height: var(--h, 2px);
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(96, 214, 255, 0) 0%, rgba(216, 247, 255, 0.92) 42%, rgba(96, 214, 255, 0.14) 100%);
  box-shadow:
    0 0 12px rgba(99, 210, 255, 0.54),
    0 0 24px rgba(60, 168, 236, 0.24);
  transform-origin: left center;
  animation: sharkTrailSpark var(--dur, 140ms) ease-out forwards;
}

.introHero__trailParticle--spark::after {
  content: "";
  position: absolute;
  right: -2px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: rgba(213, 247, 255, 0.96);
  box-shadow: 0 0 8px rgba(145, 231, 255, 0.72);
}

.introHero__shark {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  width: clamp(250px, 36vw, 620px);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-140%, 0, 0) translateY(-50%);
  filter:
    drop-shadow(0 0 24px rgba(116, 219, 255, 0.3))
    drop-shadow(0 18px 34px rgba(4, 16, 28, 0.44));
  will-change: transform, opacity;
}

.introHero__shark.is-active {
  opacity: 1;
}

.introHero__shark.is-reversed {
  --shark-flip: -1;
}

.introHero__shark.is-finished {
  opacity: 0;
  transition: opacity 80ms ease;
}

.introHero__sharkImage {
  display: block;
  width: 100%;
  height: auto;
  transform: scaleX(var(--shark-flip, 1)) translateY(var(--shark-bob, 0px)) rotate(var(--shark-tilt, 0deg));
  transform-origin: 46% 50%;
  will-change: transform;
}

.introHero__copy {
  margin: 0 auto;
  max-width: 980px;
}

.introHero__title {
  opacity: 0;
  transform: translate3d(0, 116px, 0) scale(0.985);
  filter: blur(11px);
  animation: introTitleRise 1.86s cubic-bezier(0.16, 0.86, 0.18, 1) forwards 0.12s;
  will-change: transform, opacity, filter;
  margin: 0;
  font-size: clamp(2.4rem, 7vw, 6.4rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
  color: transparent;
  text-shadow: none;
  position: relative;
  display: inline-block;
}

.introHero__title::after {
  content: "";
  position: absolute;
  inset: -14% -8%;
  pointer-events: none;
  opacity: 0;
  background-image:
    radial-gradient(circle at 16% 54%, rgba(190, 234, 255, 0.82) 0 1.2px, transparent 2px),
    radial-gradient(circle at 32% 38%, rgba(190, 234, 255, 0.66) 0 1px, transparent 1.8px),
    radial-gradient(circle at 48% 62%, rgba(190, 234, 255, 0.7) 0 1px, transparent 1.8px),
    radial-gradient(circle at 66% 44%, rgba(190, 234, 255, 0.66) 0 1px, transparent 1.8px),
    radial-gradient(circle at 84% 58%, rgba(190, 234, 255, 0.76) 0 1.2px, transparent 2px);
  animation: titleParticleBurst 1.58s ease-out forwards 0.5s;
}

.introHero__titleWord {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
}

.introHero__titleWord--desktop {
  display: inline-flex;
}

.introHero__titleWordMobile {
  display: none;
}

.introHero__titleWordMobileMain,
.introHero__titleWordMobileSub {
  display: inline-block;
  background-image: linear-gradient(
    165deg,
    rgba(247, 252, 255, 0.99) 0%,
    rgba(224, 246, 255, 0.96) 22%,
    rgba(145, 228, 255, 0.96) 47%,
    rgba(74, 201, 255, 0.97) 72%,
    rgba(230, 249, 255, 0.98) 100%
  );
  background-size: 180% 180%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 8px 22px rgba(73, 193, 236, 0.34));
}

.introHero__titleWord > span {
  display: inline-block;
  background-image: linear-gradient(
    165deg,
    rgba(247, 252, 255, 0.98) 0%,
    rgba(224, 246, 255, 0.94) 22%,
    rgba(145, 228, 255, 0.95) 47%,
    rgba(74, 201, 255, 0.96) 72%,
    rgba(230, 249, 255, 0.95) 100%
  );
  background-size: 180% 180%;
  background-position: 50% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 7px 20px rgba(73, 193, 236, 0.32));
}

.introHero__titleWord > span.is-space {
  width: 0.34em;
  background: none;
  filter: none;
}

.introHero__sub {
  opacity: 0;
  transform: translate3d(0, 34px, 0);
  filter: blur(6px);
  animation: introSubFormFromParticles 1.18s cubic-bezier(0.2, 0.82, 0.24, 1) forwards 1.54s;
  margin: clamp(1rem, 2.4vw, 1.6rem) auto 0;
  max-width: 66ch;
  font-size: clamp(1rem, 1.55vw, 1.36rem);
  line-height: 1.48;
  color: rgba(230, 247, 255, 0.84);
  position: relative;
  will-change: transform, opacity, filter;
}

.introHero__sub::before {
  content: "";
  position: absolute;
  left: -3%;
  right: -3%;
  top: -36%;
  bottom: -26%;
  pointer-events: none;
  opacity: 0;
  background-image:
    radial-gradient(circle at 8% 84%, rgba(216, 247, 255, 0.98) 0 1.8px, transparent 2.8px),
    radial-gradient(circle at 18% 72%, rgba(216, 247, 255, 0.92) 0 1.5px, transparent 2.6px),
    radial-gradient(circle at 30% 88%, rgba(216, 247, 255, 0.96) 0 1.8px, transparent 2.8px),
    radial-gradient(circle at 42% 74%, rgba(216, 247, 255, 0.9) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 54% 90%, rgba(216, 247, 255, 0.98) 0 1.8px, transparent 2.8px),
    radial-gradient(circle at 66% 76%, rgba(216, 247, 255, 0.9) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 78% 86%, rgba(216, 247, 255, 0.96) 0 1.8px, transparent 2.8px),
    radial-gradient(circle at 90% 70%, rgba(216, 247, 255, 0.88) 0 1.5px, transparent 2.5px);
  filter:
    drop-shadow(0 0 12px rgba(43, 196, 227, 0.38))
    drop-shadow(0 0 24px rgba(43, 196, 227, 0.18));
  animation: introSubParticlesRise 1.64s ease-out forwards 1.34s;
}

.introHero__sub::after {
  content: "";
  position: absolute;
  inset: -8% -4%;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(
    115deg,
    transparent 0%,
    rgba(230, 248, 255, 0.62) 48%,
    transparent 100%
  );
  mix-blend-mode: screen;
  transform: translateX(-38%);
  animation: introSubSpecSweep 1.14s ease-out forwards 1.86s;
}

.introHero__cta {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  filter: blur(4px);
  animation: introExploreReveal 0.9s cubic-bezier(0.18, 0.82, 0.24, 1) forwards 1.94s;
  margin-top: clamp(0.7rem, 2vw, 1.2rem);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.56rem, 1.4vw, 0.9rem);
  flex-wrap: wrap;
}

.introHero__cta .btn {
  min-width: clamp(132px, 12vw, 170px);
}

.introHero__explore {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  filter: blur(4px);
  animation: introExploreReveal 0.92s cubic-bezier(0.18, 0.82, 0.24, 1) forwards 2.1s;
  margin-top: clamp(1.32rem, 3vw, 2.2rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  justify-content: center;
  will-change: transform, opacity, filter;
}

.introHero__exploreLabel {
  margin: 0;
  font-size: clamp(1rem, 2.2vw, 1.14rem);
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(225, 246, 255, 0.86);
  text-shadow: 0 0 12px rgba(43, 196, 227, 0.2);
}

.introHero__exploreArrow {
  width: clamp(52px, 7vw, 74px);
  height: clamp(86px, 11vw, 122px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  text-decoration: none;
  color: rgba(232, 248, 255, 0.95);
  opacity: 0.78;
  animation: exploreArrowPulse 2.2s ease-in-out infinite;
}

.introHero__exploreGlyph {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.introHero__exploreGlyph path {
  fill: rgba(207, 245, 255, 0.96);
  stroke: rgba(188, 240, 255, 0.54);
  stroke-width: 1.4;
  stroke-linejoin: round;
  filter:
    drop-shadow(0 0 10px rgba(43, 196, 227, 0.44))
    drop-shadow(0 0 20px rgba(43, 196, 227, 0.24));
}

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

body.oa-boot-lock .introHero__title,
body.oa-boot-lock .introHero__sub,
body.oa-boot-lock .introHero__cta,
body.oa-boot-lock .introHero__explore {
  opacity: 0 !important;
  transform: translate3d(0, 84px, 0) !important;
  filter: blur(8px) !important;
  animation: none !important;
}

body.oa-boot-lock .introHero__titleWord > span {
  animation: none !important;
}

body.oa-boot-lock .introHero__sub::before,
body.oa-boot-lock .introHero__sub::after {
  animation: none !important;
  opacity: 0 !important;
}

.responsiveIntro {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: clamp(0.8rem, 1.6vw, 1.15rem);
  padding: clamp(24px, 5vh, 64px) clamp(18px, 5vw, 72px);
  background: transparent;
  margin-block: -1px;
  text-align: center;
}

.responsiveIntro::before {
  content: "";
  position: absolute;
  inset: -24% -12%;
  background:
    radial-gradient(900px 360px at 18% 54%, rgba(98, 230, 255, 0.24), transparent 72%),
    radial-gradient(980px 360px at 82% 44%, rgba(78, 190, 236, 0.22), transparent 74%),
    radial-gradient(560px 260px at 50% 86%, rgba(17, 98, 138, 0.2), transparent 75%);
  filter: blur(92px);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(12vw, 0, 0) scale(1.04);
  transition:
    opacity 0.94s cubic-bezier(0.16, 0.86, 0.18, 1),
    transform 1.08s cubic-bezier(0.16, 0.86, 0.18, 1),
    filter 1.08s cubic-bezier(0.16, 0.86, 0.18, 1);
}

.responsiveIntro::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(96px, 16vh, 180px);
  background: linear-gradient(180deg, transparent, rgba(1, 8, 14, 0.34));
  opacity: 0;
  pointer-events: none;
  transform: translate3d(8vw, 0, 0);
  transition:
    opacity 0.74s cubic-bezier(0.18, 0.84, 0.2, 1),
    transform 0.9s cubic-bezier(0.16, 0.86, 0.18, 1);
}

.responsiveIntro > * {
  position: relative;
  z-index: 1;
  opacity: 0;
  transform: translate3d(72px, 0, 0) scale(0.978);
  filter: blur(18px);
  transition:
    opacity 0.72s cubic-bezier(0.18, 0.84, 0.2, 1),
    transform 0.98s cubic-bezier(0.16, 0.86, 0.18, 1),
    filter 0.98s cubic-bezier(0.16, 0.86, 0.18, 1);
  animation: none;
}

.responsiveIntro.is-active::before {
  opacity: 0.86;
  filter: blur(82px);
  transform: translate3d(0, 0, 0) scale(1);
}

.responsiveIntro.is-active::after {
  opacity: 0.52;
  transform: translate3d(0, 0, 0);
}

.responsiveIntro.is-active > * {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
}

.responsiveIntro.is-active > .responsiveIntro__badge {
  transition-delay: 90ms;
}

.responsiveIntro.is-active > .responsiveIntro__title {
  transition-delay: 180ms;
}

.responsiveIntro.is-active > .responsiveIntro__desc {
  transition-delay: 270ms;
}

.responsiveIntro.is-active > .responsiveIntro__actions {
  transition-delay: 330ms;
}

.responsiveIntro.is-active > .responsiveIntro__panel {
  transition-delay: 420ms;
}

.responsiveIntro__badge,
.responsiveIntro__title,
.responsiveIntro__desc {
  width: min(100%, 1120px);
  margin-inline: auto;
}

.responsiveIntro__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.75rem, 1.8vw, 1.15rem);
  width: 100%;
}

.responsiveIntro__badgeLine {
  position: relative;
  flex: 1 1 112px;
  max-width: 132px;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(85, 204, 255, 0), rgba(119, 228, 255, 0.74) 38%, rgba(127, 232, 255, 0.16) 100%);
  box-shadow: 0 0 18px rgba(77, 198, 235, 0.28);
}

.responsiveIntro__badgeLine:last-child {
  background: linear-gradient(90deg, rgba(127, 232, 255, 0.16), rgba(119, 228, 255, 0.74) 62%, rgba(85, 204, 255, 0) 100%);
}

.responsiveIntro__badgeLine::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(171, 239, 255, 0.94);
  box-shadow: 0 0 12px rgba(132, 228, 255, 0.88);
  transform: translateY(-50%);
}

.responsiveIntro__badgeLine:first-child::after {
  right: 12px;
}

.responsiveIntro__badgeLine:last-child::after {
  left: 12px;
}

.responsiveIntro__eyebrow {
  margin: 0;
  font-size: clamp(0.7rem, 1.15vw, 0.84rem);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(177, 236, 255, 0.88);
  font-weight: 560;
  text-shadow: 0 0 18px rgba(53, 184, 228, 0.34);
}

.responsiveIntro__title {
  margin: clamp(0.7rem, 1.6vw, 0.95rem) auto 0;
  max-width: min(100%, 760px);
  margin-inline: auto;
  display: grid;
  justify-items: center;
  gap: 0.08em;
  line-height: 1.06;
  padding: 0.18em 0.16em 0.22em;
  overflow: visible;
}

.responsiveIntro__titleLine {
  display: inline-block;
  width: auto;
  max-width: 100%;
  margin-inline: auto;
  padding-inline: 0.08em 0.16em;
  white-space: nowrap;
  overflow: visible;
  background: linear-gradient(
    160deg,
    rgba(242, 251, 255, 0.99) 0%,
    rgba(214, 244, 255, 0.96) 30%,
    rgba(113, 221, 250, 0.98) 60%,
    rgba(236, 251, 255, 0.98) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow:
    0 12px 36px rgba(24, 137, 176, 0.26),
    0 0 22px rgba(92, 219, 255, 0.18);
}

.responsiveIntro__titleLine--primary {
  font-size: clamp(2.55rem, 7vw, 5rem);
  font-weight: 780;
  letter-spacing: -0.042em;
}

.responsiveIntro__titleLine--secondary {
  margin-top: 0.02em;
  font-size: clamp(2rem, 5.2vw, 3.38rem);
  font-weight: 750;
  letter-spacing: -0.044em;
}

.responsiveIntro__titleLine--tertiary {
  margin-top: 0.04em;
  font-size: clamp(1.52rem, 4vw, 2.54rem);
  font-weight: 720;
  letter-spacing: -0.036em;
}

.responsiveIntro__desc {
  margin: clamp(0.9rem, 1.8vw, 1.2rem) auto 0;
  width: min(100%, 40rem);
  text-wrap: pretty;
  font-size: clamp(0.98rem, 1.22vw, 1.1rem);
  line-height: 1.66;
  letter-spacing: 0;
  color: rgba(228, 244, 255, 0.84);
  text-shadow: 0 8px 24px rgba(4, 18, 29, 0.42);
}

.responsiveIntro__actions {
  width: min(100%, 40rem);
  display: flex;
  justify-content: center;
  margin-top: clamp(0.18rem, 0.8vw, 0.4rem);
}

.responsiveIntro__contentCta {
  --content-cta-fill-top: rgba(14, 39, 57, 0.92);
  --content-cta-fill-mid: rgba(8, 24, 38, 0.94);
  --content-cta-fill-bottom: rgba(4, 14, 24, 0.98);
  --content-cta-outline: rgba(123, 221, 244, 0.28);
  --content-cta-outline-strong: rgba(180, 239, 252, 0.46);
  --content-cta-glow: rgba(61, 186, 226, 0.12);
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  min-height: 52px;
  padding: 0.78rem 1.2rem 0.78rem 1.34rem;
  border: 1px solid var(--content-cta-outline);
  border-radius: 999px;
  overflow: hidden;
  cursor: pointer;
  background:
    linear-gradient(180deg, var(--content-cta-fill-top) 0%, var(--content-cta-fill-mid) 46%, var(--content-cta-fill-bottom) 100%);
  color: rgba(237, 247, 255, 0.96);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -14px 18px rgba(0, 0, 0, 0.18),
    0 12px 24px rgba(1, 7, 14, 0.2),
    0 0 22px var(--content-cta-glow);
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 14px rgba(94, 219, 255, 0.12);
  will-change: transform, box-shadow, filter;
  transition:
    transform 0.28s cubic-bezier(0.2, 0.82, 0.2, 1),
    box-shadow 0.28s cubic-bezier(0.2, 0.82, 0.2, 1),
    filter 0.28s cubic-bezier(0.2, 0.82, 0.2, 1);
}

.responsiveIntro__contentCta::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 56%) top / 100% 68% no-repeat,
    linear-gradient(90deg, rgba(206, 248, 255, 0), rgba(206, 248, 255, 0.78) 50%, rgba(206, 248, 255, 0)) center 10px / 36% 1px no-repeat,
    radial-gradient(circle at 16% 18%, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 34%);
  opacity: 0.92;
  pointer-events: none;
  transition:
    opacity 0.28s cubic-bezier(0.2, 0.82, 0.2, 1),
    transform 0.28s cubic-bezier(0.2, 0.82, 0.2, 1);
}

.responsiveIntro__contentCta::after {
  content: "";
  position: absolute;
  inset: -22% -18%;
  background:
    linear-gradient(112deg, rgba(255, 255, 255, 0) 24%, rgba(255, 255, 255, 0.22) 45%, rgba(120, 228, 255, 0.12) 56%, rgba(255, 255, 255, 0) 74%);
  mix-blend-mode: screen;
  opacity: 0;
  transform: translate3d(-56%, 0, 0);
  pointer-events: none;
  transition:
    opacity 300ms cubic-bezier(0.18, 0.84, 0.2, 1),
    transform 680ms cubic-bezier(0.16, 0.86, 0.18, 1);
}

.responsiveIntro__contentCta:hover {
  border-color: var(--content-cta-outline-strong);
  transform: translate3d(0, -2px, 0);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -12px 18px rgba(0, 0, 0, 0.14),
    0 16px 30px rgba(1, 7, 14, 0.24),
    0 0 28px rgba(71, 201, 248, 0.16);
  filter: saturate(1.03) brightness(1.03);
}

.responsiveIntro__contentCta:hover::before {
  opacity: 1;
  transform: translate3d(0, -1px, 0);
}

.responsiveIntro__contentCta:hover::after {
  opacity: 0.92;
  transform: translate3d(54%, 0, 0);
}

.responsiveIntro__contentCta:active {
  transform: translate3d(0, -1px, 0) scale(0.992);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.12),
    inset 0 -8px 14px rgba(0, 0, 0, 0.18),
    0 10px 18px rgba(1, 7, 14, 0.22),
    0 0 18px rgba(94, 220, 255, 0.16);
}

.responsiveIntro__contentCta:focus-visible {
  outline: 2px solid rgba(166, 238, 255, 0.88);
  outline-offset: 4px;
}

.responsiveIntro__contentCtaLabel,
.responsiveIntro__contentCtaArrow {
  position: relative;
  z-index: 1;
}

.responsiveIntro__contentCtaLabel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font-size: clamp(0.98rem, 1.12vw, 1.05rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
}

.responsiveIntro__contentCtaArrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  color: rgba(224, 247, 255, 0.96);
  transition: transform 240ms cubic-bezier(0.2, 0.82, 0.2, 1), color 240ms ease;
}

.responsiveIntro__contentCtaArrow svg {
  width: 100%;
  height: auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  filter:
    drop-shadow(0 0 8px rgba(129, 229, 255, 0.28))
    drop-shadow(0 0 18px rgba(71, 201, 248, 0.12));
}

.responsiveIntro__contentCta:hover .responsiveIntro__contentCtaArrow {
  transform: translate3d(4px, 0, 0);
}

.responsiveIntro__panel {
  position: relative;
  width: min(100%, 940px);
  margin-top: clamp(1.2rem, 3vw, 2rem);
  padding: clamp(14px, 2.1vw, 18px);
  overflow: hidden;
  background:
    radial-gradient(460px 150px at 50% 0%, rgba(88, 216, 252, 0.18), transparent 74%),
    radial-gradient(260px 84px at 50% 100%, rgba(60, 187, 231, 0.16), transparent 78%),
    linear-gradient(180deg, rgba(7, 29, 42, 0.9), rgba(3, 14, 24, 0.94) 48%, rgba(1, 7, 14, 0.96) 100%);
  clip-path: polygon(42px 0, calc(100% - 42px) 0, 100% 42px, 100% calc(100% - 34px), calc(100% - 28px) 100%, 28px 100%, 0 calc(100% - 34px), 0 42px);
  box-shadow:
    inset 0 0 0 1px rgba(150, 239, 255, 0.08),
    0 0 0 1px rgba(26, 99, 136, 0.46),
    0 28px 66px rgba(1, 8, 16, 0.56),
    0 0 48px rgba(64, 201, 245, 0.16);
}

.responsiveIntro__panel::before {
  content: "";
  position: absolute;
  inset: 12px;
  background:
    linear-gradient(90deg, rgba(219, 250, 255, 0.94), rgba(105, 222, 255, 0.34) 58%, rgba(105, 222, 255, 0)) left 76px top 14px / calc(50% - 136px) 2px no-repeat,
    linear-gradient(90deg, rgba(105, 222, 255, 0), rgba(105, 222, 255, 0.34) 42%, rgba(219, 250, 255, 0.94)) right 76px top 14px / calc(50% - 136px) 2px no-repeat,
    linear-gradient(180deg, rgba(219, 250, 255, 0.94), rgba(105, 222, 255, 0.34) 58%, rgba(105, 222, 255, 0)) left 14px top 76px / 2px calc(100% - 152px) no-repeat,
    linear-gradient(180deg, rgba(219, 250, 255, 0.94), rgba(105, 222, 255, 0.34) 58%, rgba(105, 222, 255, 0)) right 14px top 76px / 2px calc(100% - 152px) no-repeat,
    linear-gradient(90deg, rgba(219, 250, 255, 0.94), rgba(105, 222, 255, 0.34) 58%, rgba(105, 222, 255, 0)) left 76px bottom 14px / calc(50% - 136px) 2px no-repeat,
    linear-gradient(90deg, rgba(105, 222, 255, 0), rgba(105, 222, 255, 0.34) 42%, rgba(219, 250, 255, 0.94)) right 76px bottom 14px / calc(50% - 136px) 2px no-repeat,
    radial-gradient(circle at center, rgba(222, 251, 255, 0.98) 0, rgba(119, 230, 255, 0.74) 18%, rgba(119, 230, 255, 0.18) 38%, rgba(119, 230, 255, 0) 70%) center top 11px / 280px 20px no-repeat,
    radial-gradient(circle at center, rgba(206, 249, 255, 0.88) 0, rgba(119, 230, 255, 0.56) 16%, rgba(119, 230, 255, 0.16) 34%, rgba(119, 230, 255, 0) 68%) center bottom 12px / 190px 18px no-repeat;
  opacity: 0.96;
  pointer-events: none;
}

.responsiveIntro__panel::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 1;
  width: min(42%, 300px);
  height: 26px;
  transform: translateX(-50%);
  background:
    linear-gradient(180deg, rgba(16, 52, 73, 0.72), rgba(4, 16, 27, 0.08)),
    linear-gradient(90deg, rgba(140, 236, 255, 0), rgba(224, 252, 255, 0.92) 50%, rgba(140, 236, 255, 0));
  clip-path: polygon(0 100%, 18px 46%, calc(50% - 26px) 46%, calc(50% - 10px) 0, calc(50% + 10px) 0, calc(50% + 26px) 46%, calc(100% - 18px) 46%, 100% 100%);
  box-shadow:
    0 0 16px rgba(153, 238, 255, 0.72),
    0 0 34px rgba(70, 202, 248, 0.34);
  pointer-events: none;
}

.responsiveIntro__panelCorner {
  position: absolute;
  z-index: 2;
  width: clamp(98px, 9.6vw, 118px);
  height: clamp(90px, 8.8vw, 108px);
  pointer-events: none;
}

.responsiveIntro__panelCorner::before,
.responsiveIntro__panelCorner::after {
  content: "";
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
}

.responsiveIntro__panelCorner::before {
  background:
    linear-gradient(90deg, rgba(231, 252, 255, 0.96), rgba(108, 226, 255, 0.86) 54%, rgba(108, 226, 255, 0)) 32px 16px / calc(100% - 40px) 2px no-repeat,
    linear-gradient(180deg, rgba(231, 252, 255, 0.96), rgba(108, 226, 255, 0.86) 54%, rgba(108, 226, 255, 0)) 16px 32px / 2px calc(100% - 40px) no-repeat,
    linear-gradient(135deg, transparent 45%, rgba(149, 236, 255, 0.96) 49.2%, rgba(149, 236, 255, 0.96) 50.8%, transparent 55%) 16px 16px / 28px 28px no-repeat,
    linear-gradient(90deg, rgba(150, 236, 255, 0.48), rgba(150, 236, 255, 0)) 44px 30px / 36px 1px no-repeat,
    linear-gradient(180deg, rgba(150, 236, 255, 0.48), rgba(150, 236, 255, 0)) 30px 44px / 1px 36px no-repeat,
    radial-gradient(circle, rgba(224, 251, 255, 0.98) 0 1px, rgba(121, 230, 255, 0.72) 1.5px, rgba(121, 230, 255, 0) 4px) 24px 24px / 8px 8px no-repeat;
  filter: drop-shadow(0 0 10px rgba(77, 210, 251, 0.34));
}

.responsiveIntro__panelCorner::after {
  inset: 10px;
  opacity: 0.86;
  background:
    linear-gradient(90deg, rgba(223, 249, 255, 0.82), rgba(112, 227, 255, 0.68) 54%, rgba(112, 227, 255, 0)) 24px 11px / calc(100% - 30px) 1px no-repeat,
    linear-gradient(180deg, rgba(223, 249, 255, 0.82), rgba(112, 227, 255, 0.68) 54%, rgba(112, 227, 255, 0)) 11px 24px / 1px calc(100% - 30px) no-repeat,
    linear-gradient(135deg, transparent 45%, rgba(132, 233, 255, 0.86) 49%, rgba(132, 233, 255, 0.86) 51%, transparent 55%) 11px 11px / 20px 20px no-repeat;
}

.responsiveIntro__panelCorner--tl {
  top: 4px;
  left: 4px;
}

.responsiveIntro__panelCorner--tr {
  top: 4px;
  right: 4px;
  transform: scaleX(-1);
}

.responsiveIntro__panelCorner--bl {
  bottom: 4px;
  left: 4px;
  transform: scaleY(-1);
}

.responsiveIntro__panelCorner--br {
  right: 4px;
  bottom: 4px;
  transform: scale(-1);
}

.responsiveIntro__panelInner {
  position: relative;
  z-index: 2;
  display: grid;
  gap: clamp(0.82rem, 1.5vw, 1.18rem);
  padding: clamp(46px, 5vw, 60px) clamp(18px, 2.6vw, 28px) clamp(22px, 2.5vw, 28px);
  background:
    radial-gradient(320px 120px at 50% 0%, rgba(94, 219, 251, 0.1), transparent 74%),
    linear-gradient(180deg, rgba(4, 18, 30, 0.82), rgba(3, 12, 22, 0.9) 46%, rgba(1, 7, 14, 0.94));
  clip-path: polygon(32px 0, calc(100% - 32px) 0, 100% 32px, 100% calc(100% - 26px), calc(100% - 22px) 100%, 22px 100%, 0 calc(100% - 26px), 0 32px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 0 0 1px rgba(128, 232, 255, 0.08),
    inset 0 -18px 36px rgba(0, 0, 0, 0.18),
    0 0 30px rgba(79, 208, 248, 0.08);
}

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

.responsiveIntro__panelInner::before {
  content: "";
  position: absolute;
  inset: 10px;
  background:
    linear-gradient(90deg, rgba(223, 250, 255, 0.84), rgba(114, 227, 255, 0.26) 58%, rgba(114, 227, 255, 0)) left 64px top 12px / calc(50% - 116px) 1px no-repeat,
    linear-gradient(90deg, rgba(114, 227, 255, 0), rgba(114, 227, 255, 0.26) 42%, rgba(223, 250, 255, 0.84)) right 64px top 12px / calc(50% - 116px) 1px no-repeat,
    linear-gradient(180deg, rgba(223, 250, 255, 0.84), rgba(114, 227, 255, 0.26) 58%, rgba(114, 227, 255, 0)) left 12px top 64px / 1px calc(100% - 128px) no-repeat,
    linear-gradient(180deg, rgba(223, 250, 255, 0.84), rgba(114, 227, 255, 0.26) 58%, rgba(114, 227, 255, 0)) right 12px top 64px / 1px calc(100% - 128px) no-repeat,
    linear-gradient(90deg, rgba(223, 250, 255, 0.84), rgba(114, 227, 255, 0.26) 58%, rgba(114, 227, 255, 0)) left 64px bottom 12px / calc(50% - 116px) 1px no-repeat,
    linear-gradient(90deg, rgba(114, 227, 255, 0), rgba(114, 227, 255, 0.26) 42%, rgba(223, 250, 255, 0.84)) right 64px bottom 12px / calc(50% - 116px) 1px no-repeat;
  pointer-events: none;
}

.responsiveIntro__panelInner::after {
  content: "";
  position: absolute;
  inset: 1px;
  background:
    linear-gradient(rgba(135, 225, 250, 0.04) 1px, transparent 1px) center / 100% 16px,
    linear-gradient(90deg, rgba(135, 225, 250, 0.03) 1px, transparent 1px) center / 18px 100%;
  opacity: 0.24;
  z-index: 0;
  pointer-events: none;
}

.responsiveIntro__panelInner--media {
  display: block;
  padding: clamp(16px, 2vw, 22px);
}

.responsiveIntro__mediaShell {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 755 / 457;
  overflow: hidden;
  clip-path: polygon(18px 0, calc(100% - 18px) 0, 100% 18px, 100% calc(100% - 18px), calc(100% - 18px) 100%, 18px 100%, 0 calc(100% - 18px), 0 18px);
  background:
    radial-gradient(320px 120px at 50% 0%, rgba(94, 219, 251, 0.12), transparent 72%),
    linear-gradient(180deg, rgba(3, 13, 23, 0.94), rgba(2, 8, 16, 0.98));
  box-shadow:
    inset 0 0 0 1px rgba(128, 232, 255, 0.14),
    inset 0 20px 34px rgba(255, 255, 255, 0.03),
    inset 0 -20px 34px rgba(0, 0, 0, 0.22),
    0 18px 34px rgba(1, 8, 16, 0.28);
  opacity: 0;
  filter: blur(18px);
  transform: translate3d(54px, 0, 0) scale(0.986);
  transition:
    opacity 0.7s cubic-bezier(0.18, 0.84, 0.2, 1),
    transform 0.92s cubic-bezier(0.16, 0.86, 0.18, 1),
    filter 0.92s cubic-bezier(0.16, 0.86, 0.18, 1),
    box-shadow 0.4s ease;
}

.responsiveIntro__mediaShell::before,
.responsiveIntro__mediaShell::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.responsiveIntro__mediaShell::before {
  inset: 1px;
  clip-path: polygon(17px 0, calc(100% - 17px) 0, 100% 17px, 100% calc(100% - 17px), calc(100% - 17px) 100%, 17px 100%, 0 calc(100% - 17px), 0 17px);
  background:
    linear-gradient(90deg, rgba(223, 250, 255, 0.84), rgba(114, 227, 255, 0.24) 58%, rgba(114, 227, 255, 0)) left 26px top 10px / calc(50% - 44px) 1px no-repeat,
    linear-gradient(90deg, rgba(114, 227, 255, 0), rgba(114, 227, 255, 0.24) 42%, rgba(223, 250, 255, 0.84)) right 26px top 10px / calc(50% - 44px) 1px no-repeat,
    linear-gradient(180deg, rgba(223, 250, 255, 0.58), rgba(114, 227, 255, 0)) left 10px top 26px / 1px calc(100% - 52px) no-repeat,
    linear-gradient(180deg, rgba(223, 250, 255, 0.58), rgba(114, 227, 255, 0)) right 10px top 26px / 1px calc(100% - 52px) no-repeat,
    linear-gradient(90deg, rgba(223, 250, 255, 0.48), rgba(114, 227, 255, 0.18) 58%, rgba(114, 227, 255, 0)) left 26px bottom 10px / calc(50% - 44px) 1px no-repeat,
    linear-gradient(90deg, rgba(114, 227, 255, 0), rgba(114, 227, 255, 0.18) 42%, rgba(223, 250, 255, 0.48)) right 26px bottom 10px / calc(50% - 44px) 1px no-repeat;
  opacity: 0.92;
  z-index: 2;
}

.responsiveIntro__mediaShell::after {
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 18%),
    radial-gradient(380px 120px at 50% 0%, rgba(196, 246, 255, 0.1), rgba(196, 246, 255, 0) 74%);
  z-index: 2;
}

.responsiveIntro__mediaStage {
  position: absolute;
  inset: 0;
  isolation: isolate;
  background:
    radial-gradient(260px 100px at 50% 0%, rgba(58, 184, 228, 0.12), transparent 70%),
    linear-gradient(180deg, rgba(1, 7, 14, 0.42), rgba(1, 7, 14, 0.18));
}

.responsiveIntro__mediaStage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(210, 248, 255, 0.04), rgba(210, 248, 255, 0) 18%) top / 100% 18% no-repeat,
    linear-gradient(180deg, rgba(151, 233, 255, 0.014), rgba(151, 233, 255, 0)) bottom / 100% 34% no-repeat;
  opacity: 0.2;
  mix-blend-mode: screen;
}

.responsiveIntro__mediaStage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.022), rgba(255, 255, 255, 0) 24%, rgba(105, 222, 255, 0.018) 78%, rgba(105, 222, 255, 0) 100%);
  opacity: 0.22;
}

.responsiveIntro__scanLayer {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}

.responsiveIntro__scanLine {
  position: absolute;
  left: -2%;
  width: 104%;
  height: var(--scan-height, 7px);
  bottom: calc(var(--scan-height, 7px) * -1.8);
  opacity: 0;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(170, 238, 255, 0) 0%, rgba(170, 238, 255, calc(var(--scan-line-opacity, 0.18) * 0.82)) 18%, rgba(238, 251, 255, var(--scan-line-opacity, 0.18)) 48%, rgba(170, 238, 255, calc(var(--scan-line-opacity, 0.18) * 0.74)) 78%, rgba(170, 238, 255, 0) 100%);
  box-shadow:
    0 0 10px rgba(109, 222, 255, var(--scan-glow, 0.12)),
    0 0 18px rgba(109, 222, 255, calc(var(--scan-glow, 0.12) * 0.42));
  mix-blend-mode: screen;
  animation: responsiveIntroScanRise var(--scan-dur, 3000ms) linear forwards;
}

.responsiveIntro__scanLine::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: var(--scan-line-thickness, 1.4px);
  transform: translateY(-50%);
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(215, 248, 255, 0) 0%, rgba(215, 248, 255, 0.18) 20%, rgba(255, 255, 255, 0.42) 50%, rgba(215, 248, 255, 0.16) 80%, rgba(215, 248, 255, 0) 100%);
  opacity: 0.56;
}

.responsiveIntro__scanLine::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: calc(var(--scan-height, 7px) + 7px);
  transform: translate3d(var(--scan-shift, 0px), -50%, 0);
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(136, 232, 255, calc(var(--scan-alpha, 0.14) * 0.2)), rgba(136, 232, 255, var(--scan-alpha, 0.14)) 46%, rgba(136, 232, 255, calc(var(--scan-alpha, 0.14) * 0.18)));
  backdrop-filter: blur(0.35px) saturate(1.04) brightness(1.04);
  -webkit-backdrop-filter: blur(0.35px) saturate(1.04) brightness(1.04);
  opacity: 0.58;
}

.responsiveIntro__mediaStage.is-video-active .responsiveIntro__scanLine {
  box-shadow:
    0 0 7px rgba(109, 222, 255, calc(var(--scan-glow, 0.08) * 0.7)),
    0 0 14px rgba(109, 222, 255, calc(var(--scan-glow, 0.08) * 0.24));
}

.responsiveIntro__mediaStage.is-video-active .responsiveIntro__scanLine::before,
.responsiveIntro__scanLine.is-video-pass::before {
  opacity: 0.36;
}

.responsiveIntro__mediaStage.is-video-active .responsiveIntro__scanLine::after,
.responsiveIntro__scanLine.is-video-pass::after {
  background:
    linear-gradient(180deg, rgba(136, 232, 255, calc(var(--scan-alpha, 0.03) * 0.16)), rgba(136, 232, 255, calc(var(--scan-alpha, 0.03) * 0.7)) 48%, rgba(136, 232, 255, calc(var(--scan-alpha, 0.03) * 0.12)));
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  opacity: 0.3;
}

.responsiveIntro__mediaAsset {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  --responsive-intro-media-visible-opacity: 0.94;
  opacity: 0;
  visibility: hidden;
  filter: blur(18px);
  transform: scale(1.08);
  transform-origin: center center;
  transition:
    opacity 0.72s cubic-bezier(0.18, 0.84, 0.2, 1),
    transform 0.96s cubic-bezier(0.16, 0.86, 0.18, 1),
    filter 0.96s cubic-bezier(0.16, 0.86, 0.18, 1),
    visibility 0s linear 0.96s;
  background: rgba(2, 8, 16, 0.92);
}

.responsiveIntro__mediaAsset--video {
  background: #020810;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  image-rendering: auto;
}

.responsiveIntro__mediaAsset.is-current {
  opacity: var(--responsive-intro-media-visible-opacity);
  visibility: visible;
  filter: blur(0);
  transform: scale(1);
  transition-delay: 0s;
}

.responsiveIntro__mediaAsset.is-leaving {
  opacity: 0;
  visibility: visible;
  filter: blur(20px);
  transform: scale(0.94);
  transition-delay: 0s;
}

.responsiveIntro.is-active .responsiveIntro__mediaShell {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0) scale(1);
  transition-delay: 520ms;
}

.responsiveIntro.is-active .responsiveIntro__mediaShell.has-active-media {
  box-shadow:
    inset 0 0 0 1px rgba(148, 236, 255, 0.18),
    inset 0 20px 34px rgba(255, 255, 255, 0.04),
    inset 0 -20px 34px rgba(0, 0, 0, 0.24),
    0 22px 40px rgba(1, 8, 16, 0.32),
    0 0 36px rgba(64, 201, 245, 0.08);
}

.responsiveIntro__panelStatus {
  position: absolute;
  top: 14px;
  left: clamp(24px, 3vw, 38px);
  margin: 0;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0.28rem 0.74rem 0.28rem 0.82rem;
  border: 1px solid rgba(121, 229, 255, 0.18);
  background: linear-gradient(180deg, rgba(13, 41, 58, 0.92), rgba(5, 20, 32, 0.78));
  color: rgba(191, 243, 255, 0.92);
  font-size: clamp(0.6rem, 0.84vw, 0.7rem);
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  clip-path: polygon(10px 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 9px) 100%, 0 100%, 0 10px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 12px rgba(56, 186, 231, 0.16);
}

.responsiveIntro__panelTitle {
  margin: 0;
  display: grid;
  gap: 0.06em;
  justify-items: center;
  line-height: 0.98;
}

.responsiveIntro__panelTitle span {
  display: block;
  padding-inline: 0.1em;
  white-space: nowrap;
  background: linear-gradient(180deg, rgba(247, 252, 255, 0.99), rgba(184, 235, 255, 0.95) 58%, rgba(116, 218, 246, 0.98) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow:
    0 10px 28px rgba(14, 102, 140, 0.24),
    0 0 20px rgba(92, 219, 255, 0.14);
}

.responsiveIntro__panelTitle span:nth-child(1) {
  font-size: clamp(1.96rem, 4vw, 3.34rem);
  font-weight: 760;
  letter-spacing: -0.045em;
}

.responsiveIntro__panelTitle span:nth-child(2) {
  font-size: clamp(1.72rem, 3.45vw, 2.86rem);
  font-weight: 745;
  letter-spacing: -0.04em;
}

.responsiveIntro__panelTitle span:nth-child(3) {
  font-size: clamp(1.56rem, 3vw, 2.46rem);
  font-weight: 730;
  letter-spacing: -0.036em;
}

.responsiveIntro__featureGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.56rem, 1.4vw, 0.82rem);
}

.responsiveIntro__featureCard {
  position: relative;
  min-height: 146px;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 0.72rem;
  padding: clamp(15px, 1.5vw, 18px) clamp(10px, 1.2vw, 14px);
  background:
    linear-gradient(180deg, rgba(10, 36, 52, 0.78), rgba(6, 20, 32, 0.96)),
    linear-gradient(180deg, rgba(114, 228, 255, 0.12), rgba(114, 228, 255, 0));
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px);
  border: 1px solid rgba(120, 227, 255, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 0 1px rgba(68, 164, 196, 0.14),
    0 16px 30px rgba(1, 8, 16, 0.26);
}

.responsiveIntro__featureCard::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(183, 243, 255, 0.12), rgba(183, 243, 255, 0) 38%);
  opacity: 0.7;
  pointer-events: none;
}

.responsiveIntro__featureIcon {
  width: clamp(38px, 4.2vw, 50px);
  height: clamp(38px, 4.2vw, 50px);
  display: grid;
  place-items: center;
  color: rgba(164, 236, 255, 0.94);
  filter: drop-shadow(0 0 12px rgba(86, 213, 255, 0.34));
}

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

.responsiveIntro__featureText {
  margin: 0;
  display: grid;
  gap: 0.12rem;
  justify-items: center;
  font-size: clamp(0.92rem, 1.2vw, 1.06rem);
  line-height: 1.18;
  color: rgba(240, 248, 255, 0.96);
  text-align: center;
}

.responsiveIntro__featureText span {
  display: block;
}

.responsiveIntro__panelActions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.72rem;
  width: min(100%, 560px);
  margin-inline: auto;
}

.responsiveIntro__panelBtn {
  --panel-btn-fill-top: rgba(16, 52, 74, 0.96);
  --panel-btn-fill-mid: rgba(8, 28, 44, 0.98);
  --panel-btn-fill-bottom: rgba(3, 13, 24, 0.98);
  --panel-btn-outline: rgba(41, 126, 168, 0.72);
  --panel-btn-glow: rgba(71, 203, 248, 0.16);
  --panel-btn-text: rgba(237, 247, 255, 0.96);
  position: relative;
  isolation: isolate;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 52px;
  overflow: hidden;
  padding: 0.84rem 1.08rem;
  text-decoration: none;
  font-size: clamp(0.9rem, 1.08vw, 1rem);
  font-weight: 650;
  letter-spacing: 0.012em;
  color: var(--panel-btn-text);
  border: 0;
  background:
    linear-gradient(180deg, var(--panel-btn-fill-top) 0%, var(--panel-btn-fill-mid) 46%, var(--panel-btn-fill-bottom) 100%);
  clip-path: polygon(
    18px 0,
    calc(100% - 24px) 0,
    calc(100% - 16px) 8px,
    calc(100% - 8px) 8px,
    100% 50%,
    calc(100% - 8px) calc(100% - 8px),
    calc(100% - 16px) calc(100% - 8px),
    calc(100% - 24px) 100%,
    18px 100%,
    10px calc(100% - 8px),
    6px calc(100% - 8px),
    0 50%,
    6px 8px,
    10px 8px
  );
  box-shadow:
    0 0 0 1px var(--panel-btn-outline),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -14px 18px rgba(0, 0, 0, 0.22),
    0 14px 28px rgba(1, 7, 14, 0.28),
    0 0 24px var(--panel-btn-glow);
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 14px rgba(94, 219, 255, 0.12);
  filter: saturate(0.98) brightness(1);
  will-change: transform, box-shadow, filter;
  transition:
    transform 0.28s cubic-bezier(0.2, 0.82, 0.2, 1),
    box-shadow 0.28s cubic-bezier(0.2, 0.82, 0.2, 1),
    filter 0.28s cubic-bezier(0.2, 0.82, 0.2, 1);
}

.responsiveIntro__panelBtn::before {
  content: "";
  position: absolute;
  inset: 2px;
  clip-path: polygon(
    16px 0,
    calc(100% - 22px) 0,
    calc(100% - 14px) 7px,
    calc(100% - 7px) 7px,
    100% 50%,
    calc(100% - 7px) calc(100% - 7px),
    calc(100% - 14px) calc(100% - 7px),
    calc(100% - 22px) 100%,
    16px 100%,
    9px calc(100% - 7px),
    5px calc(100% - 7px),
    0 50%,
    5px 7px,
    9px 7px
  );
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0) 48%) top / 100% 62% no-repeat,
    linear-gradient(90deg, rgba(242, 252, 255, 0), rgba(242, 252, 255, 0.82) 50%, rgba(242, 252, 255, 0)) center 7px / 46% 1px no-repeat,
    linear-gradient(90deg, rgba(216, 249, 255, 0.74), rgba(116, 229, 255, 0.18) 22%, rgba(116, 229, 255, 0) 48%) left 19px top 0 / calc(50% - 28px) 1px no-repeat,
    linear-gradient(90deg, rgba(116, 229, 255, 0), rgba(116, 229, 255, 0.18) 78%, rgba(216, 249, 255, 0.74)) right 19px top 0 / calc(50% - 28px) 1px no-repeat,
    linear-gradient(90deg, rgba(216, 249, 255, 0.48), rgba(116, 229, 255, 0.1) 22%, rgba(116, 229, 255, 0) 48%) left 19px bottom 0 / calc(50% - 28px) 1px no-repeat,
    linear-gradient(90deg, rgba(116, 229, 255, 0), rgba(116, 229, 255, 0.1) 78%, rgba(216, 249, 255, 0.48)) right 19px bottom 0 / calc(50% - 28px) 1px no-repeat,
    linear-gradient(180deg, rgba(214, 249, 255, 0.46), rgba(116, 229, 255, 0)) left 0 top 16px / 1px calc(100% - 32px) no-repeat,
    linear-gradient(180deg, rgba(214, 249, 255, 0.46), rgba(116, 229, 255, 0)) right 0 top 16px / 1px calc(100% - 32px) no-repeat;
  opacity: 0.92;
  pointer-events: none;
  transition:
    opacity 0.28s cubic-bezier(0.2, 0.82, 0.2, 1),
    transform 0.28s cubic-bezier(0.2, 0.82, 0.2, 1);
}

.responsiveIntro__panelBtn::after {
  content: "";
  position: absolute;
  inset: 2px;
  clip-path: inherit;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0) 28%, rgba(255, 255, 255, 0.34) 44%, rgba(255, 255, 255, 0.08) 56%, rgba(255, 255, 255, 0) 72%) center / 180% 100% no-repeat,
    radial-gradient(120px 26px at 50% 0%, rgba(255, 255, 255, 0.14), transparent 72%) center top / 100% 70% no-repeat;
  mix-blend-mode: screen;
  opacity: 0;
  transform: translate3d(-18%, 0, 0);
  pointer-events: none;
  transition:
    opacity 0.34s cubic-bezier(0.2, 0.82, 0.2, 1),
    transform 0.52s cubic-bezier(0.18, 0.82, 0.22, 1);
}

.responsiveIntro__panelBtn:hover {
  transform: translate3d(0, -2px, 0) scale(1.012);
  box-shadow:
    0 0 0 1px rgba(184, 239, 255, 0.68),
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -10px 18px rgba(0, 0, 0, 0.16),
    0 22px 34px rgba(1, 7, 14, 0.34),
    0 0 32px rgba(94, 220, 255, 0.26);
  filter: saturate(1.06) brightness(1.04);
}

.responsiveIntro__panelBtn:hover::before {
  opacity: 1;
  transform: translate3d(0, -1px, 0);
}

.responsiveIntro__panelBtn:hover::after {
  opacity: 0.96;
  transform: translate3d(14%, 0, 0);
}

.responsiveIntro__panelBtn:active {
  transform: translate3d(0, 0, 0) scale(0.992);
  box-shadow:
    0 0 0 1px rgba(184, 239, 255, 0.62),
    inset 0 2px 0 rgba(255, 255, 255, 0.12),
    inset 0 -8px 14px rgba(0, 0, 0, 0.18),
    0 10px 18px rgba(1, 7, 14, 0.24),
    0 0 20px rgba(94, 220, 255, 0.18);
}

.responsiveIntro__panelBtn--primary {
  --panel-btn-fill-top: rgba(191, 246, 255, 0.99);
  --panel-btn-fill-mid: rgba(122, 227, 249, 0.98);
  --panel-btn-fill-bottom: rgba(83, 201, 233, 0.98);
  --panel-btn-outline: rgba(176, 241, 255, 0.88);
  --panel-btn-glow: rgba(96, 219, 255, 0.28);
  --panel-btn-text: #04131d;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.24),
    0 0 10px rgba(255, 255, 255, 0.16);
}

.responsiveIntro__panelBtn--primary::before {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0) 48%) top / 100% 62% no-repeat,
    linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.94) 50%, rgba(255, 255, 255, 0)) center 7px / 46% 1px no-repeat,
    linear-gradient(90deg, rgba(255, 255, 255, 0.9), rgba(202, 247, 255, 0.34) 22%, rgba(202, 247, 255, 0) 48%) left 19px top 0 / calc(50% - 28px) 1px no-repeat,
    linear-gradient(90deg, rgba(202, 247, 255, 0), rgba(202, 247, 255, 0.34) 78%, rgba(255, 255, 255, 0.9)) right 19px top 0 / calc(50% - 28px) 1px no-repeat,
    linear-gradient(90deg, rgba(255, 255, 255, 0.52), rgba(202, 247, 255, 0.18) 22%, rgba(202, 247, 255, 0) 48%) left 19px bottom 0 / calc(50% - 28px) 1px no-repeat,
    linear-gradient(90deg, rgba(202, 247, 255, 0), rgba(202, 247, 255, 0.18) 78%, rgba(255, 255, 255, 0.52)) right 19px bottom 0 / calc(50% - 28px) 1px no-repeat,
    linear-gradient(180deg, rgba(255, 255, 255, 0.54), rgba(202, 247, 255, 0)) left 0 top 16px / 1px calc(100% - 32px) no-repeat,
    linear-gradient(180deg, rgba(255, 255, 255, 0.54), rgba(202, 247, 255, 0)) right 0 top 16px / 1px calc(100% - 32px) no-repeat;
}

.responsiveIntro__panelBtn--secondary {
  --panel-btn-fill-top: rgba(18, 46, 66, 0.96);
  --panel-btn-fill-mid: rgba(8, 25, 39, 0.98);
  --panel-btn-fill-bottom: rgba(4, 13, 24, 0.98);
  --panel-btn-outline: rgba(48, 123, 160, 0.62);
  --panel-btn-glow: rgba(62, 188, 232, 0.12);
  --panel-btn-text: rgba(233, 246, 255, 0.96);
}

.responsiveIntro__panelBtn--primary:hover {
  box-shadow:
    0 0 0 1px rgba(229, 250, 255, 0.92),
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    inset 0 -10px 18px rgba(17, 89, 122, 0.16),
    0 24px 38px rgba(9, 105, 140, 0.32),
    0 0 40px rgba(119, 228, 255, 0.34);
  filter: saturate(1.08) brightness(1.05);
}

.responsiveIntro__panelBtn--secondary:hover {
  box-shadow:
    0 0 0 1px rgba(169, 234, 255, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -10px 18px rgba(0, 0, 0, 0.14),
    0 20px 34px rgba(1, 7, 14, 0.34),
    0 0 28px rgba(86, 209, 249, 0.18);
  filter: saturate(1.05) brightness(1.03);
}

.responsiveIntro__panelMeta {
  margin: 0.08rem 0 0;
  font-size: clamp(0.72rem, 0.88vw, 0.82rem);
  line-height: 1.42;
  letter-spacing: 0.06em;
  color: rgba(195, 231, 245, 0.76);
  text-align: center;
}

.responsiveIntro__panelMeta span {
  margin-inline: 0.52rem;
  color: rgba(113, 220, 248, 0.84);
}

.responsiveIntro__panelStatus,
.responsiveIntro__panelTitle span,
.responsiveIntro__featureCard,
.responsiveIntro__panelBtn,
.responsiveIntro__panelMeta {
  opacity: 0;
  filter: blur(16px);
  transform: translate3d(58px, 0, 0) scale(0.984);
  transition:
    opacity 0.66s cubic-bezier(0.18, 0.84, 0.2, 1),
    transform 0.94s cubic-bezier(0.16, 0.86, 0.18, 1),
    filter 0.94s cubic-bezier(0.16, 0.86, 0.18, 1);
}

.responsiveIntro__panelBtn {
  pointer-events: none;
  transition:
    opacity 0.66s cubic-bezier(0.18, 0.84, 0.2, 1),
    transform 0.94s cubic-bezier(0.16, 0.86, 0.18, 1),
    filter 0.94s cubic-bezier(0.16, 0.86, 0.18, 1),
    box-shadow 0.28s cubic-bezier(0.2, 0.82, 0.2, 1);
}

.responsiveIntro.is-active .responsiveIntro__panelStatus,
.responsiveIntro.is-active .responsiveIntro__panelTitle span,
.responsiveIntro.is-active .responsiveIntro__featureCard,
.responsiveIntro.is-active .responsiveIntro__panelBtn,
.responsiveIntro.is-active .responsiveIntro__panelMeta {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0) scale(1);
}

.responsiveIntro.is-active .responsiveIntro__panelStatus {
  transition-delay: 520ms;
}

.responsiveIntro.is-active .responsiveIntro__panelTitle span:nth-child(1) {
  transition-delay: 610ms;
}

.responsiveIntro.is-active .responsiveIntro__panelTitle span:nth-child(2) {
  transition-delay: 700ms;
}

.responsiveIntro.is-active .responsiveIntro__panelTitle span:nth-child(3) {
  transition-delay: 790ms;
}

.responsiveIntro.is-active .responsiveIntro__featureCard:nth-child(1) {
  transition-delay: 860ms;
}

.responsiveIntro.is-active .responsiveIntro__featureCard:nth-child(2) {
  transition-delay: 940ms;
}

.responsiveIntro.is-active .responsiveIntro__featureCard:nth-child(3) {
  transition-delay: 1020ms;
}

.responsiveIntro.is-active .responsiveIntro__panelBtn:nth-child(1) {
  transition-delay: 1090ms;
}

.responsiveIntro.is-active .responsiveIntro__panelBtn:nth-child(2) {
  transition-delay: 1160ms;
}

.responsiveIntro.is-active .responsiveIntro__panelBtn {
  pointer-events: auto;
}

.responsiveIntro.is-active .responsiveIntro__panelMeta {
  transition-delay: 1230ms;
}

@media (min-width: 1100px) {
  .responsiveIntro {
    width: min(100%, 1380px);
    margin-inline: auto;
    grid-template-columns: minmax(0, 540px) minmax(0, 700px);
    grid-template-areas:
      "badge panel"
      "title panel"
      "desc panel"
      "actions panel";
    justify-content: center;
    align-content: center;
    align-items: center;
    justify-items: center;
    column-gap: clamp(2rem, 4.2vw, 4.8rem);
    row-gap: clamp(0.72rem, 1.4vw, 1.06rem);
    padding: clamp(28px, 4.6vh, 56px) clamp(32px, 4vw, 68px);
  }

  .responsiveIntro__badge {
    grid-area: badge;
    width: min(100%, 500px);
    justify-self: center;
    align-self: end;
  }

  .responsiveIntro__title {
    grid-area: title;
    width: min(100%, 560px);
    max-width: 560px;
    margin: 0;
    justify-self: center;
  }

  .responsiveIntro__desc {
    grid-area: desc;
    width: min(100%, 35rem);
    max-width: 35rem;
    margin: 0.25rem auto 0;
    justify-self: center;
  }

  .responsiveIntro__actions {
    grid-area: actions;
    width: min(100%, 35rem);
    margin-top: 0.32rem;
    justify-self: center;
  }

  .responsiveIntro__panel {
    grid-area: panel;
    width: min(100%, 660px);
    margin-top: 0;
    justify-self: center;
    align-self: center;
    padding: 12px;
  }

  .responsiveIntro__panel::after {
    width: min(40%, 250px);
    height: 22px;
  }

  .responsiveIntro__panelCorner {
    width: clamp(84px, 7.2vw, 98px);
    height: clamp(78px, 6.8vw, 92px);
  }

  .responsiveIntro__panelInner {
    gap: 0.72rem;
    padding: 40px 14px 16px;
  }

  .responsiveIntro__panelInner--media {
    padding: 12px;
  }

  .responsiveIntro__mediaShell {
    aspect-ratio: 755 / 457;
  }

  .responsiveIntro__panelStatus {
    top: 12px;
    left: 18px;
    min-height: 21px;
    padding: 0.22rem 0.56rem 0.22rem 0.66rem;
    font-size: 0.56rem;
    letter-spacing: 0.16em;
  }

  .responsiveIntro__panelTitle span:nth-child(1) {
    font-size: clamp(1.88rem, 2.44vw, 2.72rem);
  }

  .responsiveIntro__panelTitle span:nth-child(2) {
    font-size: clamp(1.6rem, 2.08vw, 2.3rem);
  }

  .responsiveIntro__panelTitle span:nth-child(3) {
    font-size: clamp(1.42rem, 1.86vw, 1.96rem);
  }

  .responsiveIntro__featureGrid {
    gap: 0.5rem;
  }

  .responsiveIntro__featureCard {
    min-height: 112px;
    gap: 0.58rem;
    padding: 12px 8px 10px;
  }

  .responsiveIntro__featureIcon {
    width: 32px;
    height: 32px;
  }

  .responsiveIntro__featureText {
    font-size: 0.82rem;
    line-height: 1.16;
  }

  .responsiveIntro__panelActions {
    gap: 0.52rem;
    width: min(100%, 500px);
  }

  .responsiveIntro__panelBtn {
    min-height: 44px;
    padding: 0.72rem 0.68rem;
    font-size: 0.82rem;
  }

  .responsiveIntro__panelMeta {
    font-size: 0.62rem;
    line-height: 1.42;
    letter-spacing: 0.04em;
  }
}

@keyframes responsiveIntroFade {
  0% {
    opacity: 0;
    transform: translate3d(0, 30px, 0) scale(0.985);
    filter: blur(10px);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
  }
}

@keyframes responsiveIntroScanRise {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
  }

  8% {
    opacity: 0.9;
  }

  82% {
    opacity: 0.44;
  }

  100% {
    opacity: 0;
    transform: translate3d(0, calc(-100% - 110vh), 0);
  }
}

.hero {
  position: relative;
  min-height: calc(92vh + 32px);
  overflow: hidden;
  isolation: isolate;
  -webkit-user-select: none;
  user-select: none;
  background: transparent;
}

.hero--demo {
  border-top: 0;
}

.hero__stars,
.hero__fog,
.hero__vignette,
.hero__gridWrap {
  position: absolute;
  pointer-events: none;
}

.hero__stars {
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: none;
}

.hero__fog {
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(900px 380px at 66% 62%, rgba(43, 196, 227, 0.2), transparent 74%),
    radial-gradient(500px 220px at 35% 24%, rgba(43, 196, 227, 0.08), transparent 72%);
  display: none;
}

.hero__vignette {
  inset: 0;
  z-index: 1;
  background: radial-gradient(ellipse at center, transparent 44%, rgba(1, 8, 18, 0.65) 100%);
  display: none;
}

.hero__gridWrap {
  left: -12%;
  right: -12%;
  bottom: -36%;
  height: 64%;
  z-index: 2;
  transform-origin: center top;
  transform: perspective(1200px) rotateX(72deg);
}

.hero__horizon {
  position: absolute;
  left: 6%;
  right: 6%;
  top: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(43, 196, 227, 0.64), transparent);
  box-shadow: 0 0 20px rgba(43, 196, 227, 0.3);
}

.hero__grid {
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      to right,
      rgba(43, 196, 227, 0.26),
      rgba(43, 196, 227, 0.26) 1px,
      transparent 1px,
      transparent clamp(28px, 2.8vw, 44px)
    ),
    repeating-linear-gradient(
      to top,
      rgba(43, 196, 227, 0.2),
      rgba(43, 196, 227, 0.2) 1px,
      transparent 1px,
      transparent clamp(32px, 3.4vw, 52px)
    );
  opacity: 0.46;
  -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.95) 24%, rgba(0, 0, 0, 0.48) 62%, transparent 100%);
  mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.95) 24%, rgba(0, 0, 0, 0.48) 62%, transparent 100%);
}

.hero__grid::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(2, 11, 20, 0.08), rgba(2, 11, 20, 0.72) 72%, rgba(2, 11, 20, 0.95));
}

.hero__inner {
  position: relative;
  z-index: 3;
  max-width: 1320px;
  margin: 0 auto;
  min-height: inherit;
  padding: clamp(2.2rem, 4vw, 4.2rem) clamp(1rem, 2.8vw, 2.2rem) clamp(2.4rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  align-items: center;
  gap: clamp(1.4rem, 2.8vw, 2.8rem);
}

.hero__copy {
  max-width: 540px;
}

.hero__title {
  margin: 0;
  font-size: clamp(2rem, 5.2vw, 4.35rem);
  line-height: 1.03;
  letter-spacing: -0.02em;
}

.hero__sub {
  margin: clamp(0.9rem, 2vw, 1.3rem) 0 0;
  font-size: clamp(1rem, 1.6vw, 1.36rem);
  color: var(--text);
  max-width: 28ch;
}

.hero__micro {
  margin: 0.9rem 0 0;
  color: var(--muted);
  font-size: clamp(0.94rem, 1.16vw, 1.06rem);
}

.hero__cta {
  margin-top: clamp(1.2rem, 2.4vw, 1.8rem);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.btn {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 48px;
  padding: 12px 20px;
  border-radius: 999px;
  text-decoration: none;
  border: 1px solid transparent;
  font-size: 15px;
  font-weight: 640;
  letter-spacing: 0.01em;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  overflow: hidden;
}

.btn::before {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  top: 1px;
  height: 46%;
  border-radius: 999px;
  pointer-events: none;
  opacity: 0.7;
}

.btn--primary {
  color: #04131d;
  border-color: rgba(255, 255, 255, 0.25);
  background: linear-gradient(125deg, var(--cyan), var(--cyan2));
  box-shadow:
    0 16px 34px rgba(11, 114, 149, 0.34),
    inset 0 -6px 12px rgba(0, 0, 0, 0.12);
}

.btn--primary::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0));
}

.btn--ghost {
  color: var(--text);
  border-color: var(--stroke);
  background: linear-gradient(130deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.02));
}

.btn--ghost::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0));
}

.btn:hover {
  transform: translateY(-1px);
}

.hero__trust {
  margin: 0.95rem 0 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.hero__visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: clamp(72px, 7vw, 100px);
  padding-bottom: clamp(52px, 9vh, 120px);
  min-height: clamp(460px, 65vh, 760px);
  overflow: visible;
  touch-action: pan-y;
}

.hero__switch {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  scroll-margin-top: var(--oa-scroll-offset);
  z-index: 8;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: linear-gradient(130deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.03));
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.26);
  overflow: hidden;
  transition: box-shadow 0.22s ease, border-color 0.22s ease;
}

.hero__switch::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 999px;
  background: linear-gradient(110deg, transparent 0%, rgba(43, 196, 227, 0.18) 48%, transparent 100%);
  transform: translateX(-110%);
  animation: switchSweep 2.2s linear infinite;
  pointer-events: none;
}

.hero__switch.is-switching {
  border-color: rgba(43, 196, 227, 0.4);
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.28),
    0 0 22px rgba(43, 196, 227, 0.22);
}

.hero__switch.is-switching::before {
  animation-duration: 0.52s;
  opacity: 1;
}

.hero__switchBtn {
  position: relative;
  z-index: 1;
  min-width: 108px;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 640;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.hero__switchBtn:hover {
  color: var(--text);
}

.hero__switchBtn.is-active {
  color: #021922;
  border-color: rgba(255, 255, 255, 0.22);
  background: linear-gradient(120deg, rgba(43, 196, 227, 0.98), rgba(26, 167, 209, 0.92));
  box-shadow: 0 8px 18px rgba(6, 86, 114, 0.3);
}

.hero__gyroToggle {
  position: absolute;
  top: 54px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 8;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(117, 221, 244, 0.34);
  background: linear-gradient(130deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.03));
  color: rgba(224, 246, 255, 0.9);
  font-size: 11.5px;
  font-weight: 620;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.hero__gyroToggle i {
  font-size: 12px;
  color: rgba(131, 229, 248, 0.96);
  filter: drop-shadow(0 0 10px rgba(43, 196, 227, 0.34));
}

.hero__gyroToggle:hover {
  border-color: rgba(140, 228, 248, 0.5);
  color: rgba(242, 252, 255, 0.98);
  box-shadow: 0 8px 18px rgba(4, 71, 95, 0.24);
}

.hero__gyroToggle.is-active {
  border-color: rgba(112, 225, 248, 0.64);
  color: rgba(241, 252, 255, 0.98);
  background: linear-gradient(120deg, rgba(43, 196, 227, 0.3), rgba(15, 89, 117, 0.38));
  box-shadow:
    0 0 18px rgba(43, 196, 227, 0.26),
    0 8px 18px rgba(4, 73, 98, 0.24);
}

.hero__gyroToggle.is-active i {
  animation: gyroIconPulse 1.8s ease-in-out infinite;
}

.hero__gyroToggle[aria-pressed="false"]:not(.is-blocked) {
  border-color: rgba(128, 227, 247, 0.46);
  color: rgba(226, 246, 255, 0.96);
}

.hero__gyroToggle.is-blocked {
  border-color: rgba(255, 45, 85, 0.45);
  color: rgba(255, 214, 224, 0.96);
}

.hero__gyroToggle.is-blocked i {
  color: rgba(255, 103, 136, 0.95);
  filter: drop-shadow(0 0 10px rgba(255, 45, 85, 0.28));
}

.hero__gyroBanner {
  position: fixed;
  top: auto;
  bottom: calc(14px + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  z-index: 4200;
  width: min(calc(100vw - 22px), 420px);
  padding: 11px 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(124, 227, 248, 0.34);
  background:
    linear-gradient(160deg, rgba(5, 24, 38, 0.9), rgba(3, 17, 28, 0.88));
  backdrop-filter: blur(8px);
  box-shadow:
    0 14px 32px rgba(2, 11, 20, 0.46),
    0 0 14px rgba(43, 196, 227, 0.16);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.hero__gyroBanner.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.hero__gyroBannerText {
  margin: 0;
  color: rgba(228, 246, 255, 0.9);
  font-size: 12px;
  line-height: 1.42;
  letter-spacing: 0.01em;
}

.hero__gyroBannerBtn {
  margin-top: 8px;
  min-height: 30px;
  width: 100%;
  border-radius: 10px;
  border: 1px solid rgba(132, 226, 248, 0.44);
  background: linear-gradient(120deg, rgba(43, 196, 227, 0.24), rgba(26, 167, 209, 0.2));
  color: rgba(236, 250, 255, 0.98);
  font-size: 12px;
  font-weight: 640;
  letter-spacing: 0.02em;
  cursor: pointer;
}

.hero__gyroBannerBtn:hover {
  border-color: rgba(152, 233, 250, 0.66);
}

@keyframes gyroIconPulse {
  0%, 100% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(14deg) scale(1.08);
  }
}

.scene {
  position: relative;
  width: min(100%, clamp(360px, 56vw, 780px));
  height: clamp(430px, 62vh, 720px);
  margin-top: -28px;
  margin-left: clamp(0px, 3.6vw, 58px);
  transform-style: preserve-3d;
  --rx: 0deg;
  --ry: 0deg;
  transform: perspective(1120px) rotateX(var(--rx)) rotateY(var(--ry)) translateZ(0);
  will-change: transform;
}

.hero.is-dragging-3d .scene {
  cursor: grabbing;
}

.scene.is-switching .preview,
.scene.is-switching .metric {
  animation: technoFlash 0.42s ease;
}

.layer {
  --base-t: translate3d(-50%, -50%, 0px);
  --mx: 0px;
  --my: 0px;
  --mr: 0deg;
  --enter-y: 20px;
  position: absolute;
  transform-style: preserve-3d;
  transform: var(--base-t) translate3d(var(--mx), calc(var(--my) + var(--enter-y)), 0) rotateZ(var(--mr));
  opacity: 0;
  transition:
    transform 0.62s cubic-bezier(0.22, 0.86, 0.17, 1),
    opacity 0.56s ease;
  transition-delay: var(--delay, 0ms);
  will-change: transform, opacity;
}

.hero.is-ready .layer {
  --enter-y: 0px;
  opacity: 1;
}

.preview {
  border: 1px solid var(--stroke);
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.03));
  box-shadow:
    var(--shadow-1),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -30px 50px rgba(0, 0, 0, 0.18);
  overflow: hidden;
  transition: left 0.46s cubic-bezier(0.22, 0.86, 0.17, 1), top 0.46s cubic-bezier(0.22, 0.86, 0.17, 1), width 0.46s cubic-bezier(0.22, 0.86, 0.17, 1), opacity 0.36s ease, filter 0.36s ease;
}

.preview::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(112deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 48%);
  pointer-events: none;
}

.preview::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(43, 196, 227, 0.32);
  box-shadow: inset 0 0 22px rgba(43, 196, 227, 0.13);
  pointer-events: none;
}

.preview__noise {
  position: absolute;
  inset: 0;
  opacity: 0.075;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.55) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.3) 0 1px, transparent 1px 4px);
  mix-blend-mode: soft-light;
}

.preview--desktop {
  left: 57%;
  top: 49%;
  width: clamp(280px, 38vw, 500px);
  aspect-ratio: 16 / 10;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border-radius: clamp(20px, 2vw, 24px);
  --base-t: translate3d(-50%, -50%, 80px);
}

.window__bar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-bottom: 1px solid rgba(43, 196, 227, 0.2);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04));
}

.window__dots {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.dot--r {
  background: #ff5f57;
}

.dot--y {
  background: #febc2e;
}

.dot--g {
  background: #28c840;
}

.window__addr {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(2, 11, 20, 0.58);
  color: rgba(255, 255, 255, 0.74);
  font-size: 12px;
  letter-spacing: 0.01em;
}

.window__live {
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(5, 16, 28, 0.78);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.86);
  letter-spacing: 0.03em;
}

.window__live span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 8px rgba(255, 45, 85, 0.68);
}

.window__body {
  padding: 13px;
  display: grid;
  gap: 10px;
}

.preview--desktop .window__body {
  min-height: 0;
  overflow: hidden;
  align-content: start;
  padding: 11px;
  gap: 8px;
}

.miniNav {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 24px;
  white-space: nowrap;
  overflow: hidden;
}

.miniNav__brandWrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 6px;
}

.miniNav__logo {
  width: 18px;
  height: 18px;
  border-radius: 6px;
  border: 1px solid rgba(43, 196, 227, 0.55);
  background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.84), rgba(43, 196, 227, 0.1));
}

.miniNav__brand {
  font-size: 9px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.84);
  font-weight: 640;
}

.miniNav__link {
  position: relative;
  font-size: 9.5px;
  color: rgba(255, 255, 255, 0.72);
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 2px 2px;
}

.miniNav__link::after {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 0;
  height: 1px;
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(43, 196, 227, 0.95), transparent);
}

.miniNav__link--active {
  color: rgba(255, 255, 255, 0.92);
}

.miniNav__link--active::after {
  opacity: 1;
}

.miniNav__cta {
  margin-left: auto;
  min-height: 19px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 9px;
  font-weight: 700;
  color: #032132;
  background: linear-gradient(120deg, rgba(43, 196, 227, 0.95), rgba(26, 167, 209, 0.86));
}

.preview--desktop .window__bar {
  gap: 6px;
  padding: 8px 10px;
}

.preview--desktop .window__addr {
  min-height: 22px;
  padding: 0 8px;
  font-size: 11px;
}

.preview--desktop .window__live {
  min-height: 22px;
  padding: 0 7px;
  font-size: 10px;
}

.preview--desktop .window__live span {
  width: 5px;
  height: 5px;
}

.preview--desktop .miniNav {
  gap: 6px;
  min-height: 20px;
}

.preview--desktop .miniNav__brandWrap {
  gap: 5px;
  margin-right: 4px;
}

.preview--desktop .miniNav__logo {
  width: 15px;
  height: 15px;
  border-radius: 5px;
}

.preview--desktop .miniNav__brand {
  font-size: 8px;
}

.preview--desktop .miniNav__link {
  font-size: 8px;
  padding: 0 1px 1px;
}

.preview--desktop .miniNav__cta {
  min-height: 17px;
  padding: 0 6px;
  font-size: 8px;
}

.miniHero {
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.04));
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 10px;
}

.preview--desktop .miniHero {
  padding: 8px;
  gap: 8px;
  border-radius: 10px;
}

.miniHero__copy {
  min-width: 0;
}

.miniHero h3 {
  margin: 0;
  font-size: clamp(0.9rem, 1.05vw, 1.04rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.miniHero p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.preview--desktop .miniHero h3 {
  font-size: clamp(0.74rem, 0.82vw, 0.9rem);
}

.preview--desktop .miniHero p {
  margin-top: 4px;
  font-size: 9px;
  line-height: 1.28;
}

.miniHero__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #02202b;
  font-size: 11px;
  font-weight: 700;
  background: linear-gradient(120deg, var(--cyan), var(--cyan2));
}

.miniHero__actions {
  margin-top: 8px;
  display: flex;
  gap: 6px;
}

.preview--desktop .miniHero__actions {
  margin-top: 7px;
  gap: 5px;
}

.miniHero__btn--ghost {
  color: rgba(255, 255, 255, 0.86);
  background: rgba(255, 255, 255, 0.06);
}

.preview--desktop .miniHero__btn {
  min-height: 20px;
  padding: 0 8px;
  font-size: 9px;
}

.miniHero__media {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: 1fr auto;
  gap: 6px;
}

.preview--desktop .miniHero__media {
  gap: 5px;
}

.miniMedia {
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background:
    radial-gradient(180px 70px at 24% 26%, rgba(255, 255, 255, 0.28), transparent 62%),
    linear-gradient(145deg, rgba(43, 196, 227, 0.36), rgba(255, 255, 255, 0.05));
}

.miniMedia--main {
  grid-column: 1 / -1;
  min-height: 46px;
}

.preview--desktop .miniMedia--main {
  min-height: 38px;
}

.miniMedia--thumb {
  min-height: 21px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04)),
    linear-gradient(145deg, rgba(43, 196, 227, 0.24), rgba(255, 255, 255, 0.02));
}

.preview--desktop .miniMedia--thumb {
  min-height: 17px;
}

.miniServices {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.preview--desktop .miniServices {
  gap: 6px;
}

.svc {
  min-height: 52px;
  padding: 8px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  display: grid;
  align-content: start;
  gap: 6px;
}

.preview--desktop .svc {
  min-height: 44px;
  padding: 6px;
  gap: 5px;
  border-radius: 9px;
}

.svc__thumb {
  width: 100%;
  min-height: 20px;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background:
    radial-gradient(60px 20px at 24% 26%, rgba(255, 255, 255, 0.32), transparent 66%),
    linear-gradient(145deg, rgba(43, 196, 227, 0.3), rgba(255, 255, 255, 0.05));
}

.preview--desktop .svc__thumb {
  min-height: 15px;
  border-radius: 6px;
}

.svc__title {
  width: 64%;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.42);
}

.preview--desktop .svc__title,
.preview--desktop .svc__line {
  height: 4px;
}

.svc__line {
  width: 88%;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
}

.miniChart {
  min-height: 70px;
  border-radius: 10px;
  padding: 9px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  display: flex;
  align-items: flex-end;
}

.preview--desktop .miniChart {
  min-height: 54px;
  padding: 7px;
}

.miniChart__bars {
  width: 100%;
  height: 54px;
  display: flex;
  align-items: flex-end;
  gap: 5px;
}

.preview--desktop .miniChart__bars {
  height: 40px;
  gap: 4px;
}

.miniChart__bars span {
  flex: 1;
  height: var(--h);
  border-radius: 999px 999px 3px 3px;
  background: linear-gradient(180deg, rgba(43, 196, 227, 0.95), rgba(26, 167, 209, 0.38));
  transition: height 0.34s cubic-bezier(0.22, 0.86, 0.17, 1);
  transform-origin: 50% 100%;
}

.preview--mobile {
  left: 29%;
  top: 63%;
  width: clamp(160px, 16vw, 210px);
  aspect-ratio: 9 / 19.4;
  border-radius: 30px;
  --base-t: translate3d(-50%, -50%, 96px) scale(0.88);
}

.scene[data-mode="desktop"] .preview--desktop {
  width: clamp(280px, 38vw, 500px);
  --base-t: translate3d(-50%, -50%, 140px) scale(0.92);
  opacity: 1;
  filter: saturate(1);
  z-index: 9;
  pointer-events: auto;
}

.scene[data-mode="desktop"] .preview--mobile {
  width: clamp(110px, 11vw, 146px);
  --base-t: translate3d(-50%, -50%, -140px) scale(0.54);
  opacity: 0.3;
  filter: saturate(0.78);
  z-index: 1;
  pointer-events: none;
}

.scene[data-mode="mobile"] .preview--mobile {
  left: 50%;
  top: 55%;
  width: clamp(180px, 20.5vw, 252px);
  --base-t: translate3d(-50%, -50%, 118px) scale(0.84);
  opacity: 1;
  filter: saturate(1);
  z-index: 7;
  pointer-events: auto;
}

.scene[data-mode="mobile"] .preview--desktop {
  left: 52%;
  top: 69%;
  width: clamp(240px, 32vw, 360px);
  --base-t: translate3d(-50%, -50%, 40px) scale(0.66);
  opacity: 0.46;
  filter: saturate(0.8);
  z-index: 3;
  pointer-events: none;
}

.phone {
  position: relative;
  height: 100%;
  border-radius: 28px;
  padding: 9px 9px 12px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.3), rgba(158, 181, 201, 0.18) 40%, rgba(17, 36, 54, 0.52));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24);
}

.phone::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 5px;
  width: 44px;
  height: 3px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.35);
}

.phone__screen {
  position: relative;
  overflow: hidden;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-radius: 21px;
  padding: 10px 9px 13px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background:
    radial-gradient(260px 180px at 50% 0%, rgba(43, 196, 227, 0.14), transparent 74%),
    linear-gradient(180deg, rgba(4, 19, 33, 0.95), rgba(4, 19, 33, 0.78));
}

.phone__notch {
  width: 82px;
  height: 16px;
  border-radius: 999px;
  margin: 0 auto 8px;
  background: rgba(3, 11, 20, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.mSiteNav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
}

.mSiteBrand {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 22px;
}

.mSiteBrand__mark {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  border: 1px solid rgba(43, 196, 227, 0.62);
  background: radial-gradient(circle at 30% 26%, rgba(255, 255, 255, 0.9), rgba(43, 196, 227, 0.12));
}

.mSiteBrand__text {
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.76);
  font-weight: 620;
}

.mSiteHam {
  width: 18px;
  height: 14px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background-color: rgba(255, 255, 255, 0.03);
  background:
    linear-gradient(rgba(255, 255, 255, 0.76), rgba(255, 255, 255, 0.76)) center 3px / 72% 1.5px no-repeat,
    linear-gradient(rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.58)) center 7px / 72% 1.5px no-repeat,
    linear-gradient(rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.42)) center 11px / 72% 1.5px no-repeat;
}

.mSiteHero {
  padding: 9px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.03));
}

.mSiteKicker {
  margin: 0;
  font-size: 9px;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 660;
  letter-spacing: 0.01em;
}

.mSiteHero h4 {
  margin: 2px 0 0;
  font-size: 11px;
  line-height: 1.24;
  color: var(--text);
}

.mSiteLead {
  margin: 4px 0 0;
  font-size: 9px;
  line-height: 1.35;
  color: var(--muted);
}

.mSitePoster {
  display: block;
  height: 30px;
  margin-top: 7px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background:
    radial-gradient(72px 20px at 26% 24%, rgba(255, 255, 255, 0.3), transparent 64%),
    linear-gradient(145deg, rgba(43, 196, 227, 0.32), rgba(255, 255, 255, 0.04));
}

.mSiteActions {
  margin-top: 7px;
  display: flex;
  gap: 5px;
}

.mSiteBtn {
  min-height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 8.5px;
  font-weight: 700;
}

.mSiteBtn--primary {
  color: #021824;
  background: linear-gradient(120deg, var(--cyan), var(--cyan2));
}

.mSiteBtn--ghost {
  color: rgba(255, 255, 255, 0.82);
  background: rgba(255, 255, 255, 0.07);
}

.mSiteSections {
  flex: 1;
  min-height: 0;
  display: grid;
  gap: 6px;
  align-content: start;
  overflow: hidden;
}

.mSiteCard {
  min-height: 26px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
}

.mSiteCard--hero {
  min-height: 28px;
}

.mSiteCard--media {
  min-height: 34px;
  background:
    radial-gradient(90px 30px at 28% 26%, rgba(255, 255, 255, 0.3), transparent 65%),
    linear-gradient(145deg, rgba(43, 196, 227, 0.28), rgba(255, 255, 255, 0.03));
}

.mSiteRow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.mSiteRow span {
  min-height: 22px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
}

.mBook,
.mSticky {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 999px;
  min-height: 22px;
  font-size: 9.5px;
  font-weight: 700;
}

.mBook {
  margin-top: auto;
  padding: 0 9px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #031a2b;
  background: linear-gradient(120deg, var(--cyan), var(--cyan2));
}

.mSticky {
  margin-top: 6px;
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--text);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.metric {
  width: clamp(118px, 13vw, 176px);
  padding: 10px 11px;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.04));
  box-shadow: var(--shadow-2);
  --base-t: translate3d(0, 0, 178px);
  transition: left 0.46s cubic-bezier(0.22, 0.86, 0.17, 1), top 0.46s cubic-bezier(0.22, 0.86, 0.17, 1), opacity 0.3s ease;
}

.metric::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  width: 54px;
  height: 1px;
  background: linear-gradient(90deg, rgba(43, 196, 227, 0.42), rgba(43, 196, 227, 0));
  transform: translateY(-50%) rotate(8deg);
  pointer-events: none;
}

.metric__label {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--muted);
}

.metric__value {
  margin: 5px 0 0;
  font-size: clamp(1rem, 1.8vw, 1.32rem);
  line-height: 1.1;
  font-weight: 700;
}

.metric__value.is-updating {
  animation: valuePulse 0.46s ease;
}

.metric__trend {
  margin-top: 8px;
  height: 20px;
  display: flex;
  align-items: flex-end;
  gap: 4px;
}

.metric__trend span {
  flex: 1;
  height: var(--h);
  border-radius: 6px 6px 2px 2px;
  background: linear-gradient(180deg, rgba(43, 196, 227, 0.94), rgba(43, 196, 227, 0.3));
  transition: height 0.34s cubic-bezier(0.22, 0.86, 0.17, 1);
  transform-origin: 50% 100%;
  animation: barPulse 1.9s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 120ms);
}

.metric--bookings {
  left: 6%;
  top: 24%;
}

.metric--visitors {
  left: 76%;
  top: 19%;
}

.metric--visitors::after {
  left: auto;
  right: 100%;
  transform: translateY(-50%) rotate(-12deg);
  background: linear-gradient(90deg, rgba(43, 196, 227, 0), rgba(43, 196, 227, 0.42));
}

.metric--revenue {
  left: 68%;
  top: 74%;
}

.metric--revenue::after {
  left: auto;
  right: 100%;
  transform: translateY(-50%) rotate(11deg);
  background: linear-gradient(90deg, rgba(43, 196, 227, 0), rgba(43, 196, 227, 0.42));
}

.metric--leads {
  left: 14%;
  top: 78%;
}

.metric--payments {
  left: -1%;
  top: 51%;
}

.metric--seo {
  left: 84%;
  top: 50%;
}

.metric--seo::after {
  left: auto;
  right: 100%;
  transform: translateY(-50%) rotate(-6deg);
  background: linear-gradient(90deg, rgba(43, 196, 227, 0), rgba(43, 196, 227, 0.42));
}

.scene[data-mode="desktop"] .metric--bookings {
  left: 6%;
  top: 24%;
}

.scene[data-mode="desktop"] .metric--visitors {
  left: 76%;
  top: 19%;
}

.scene[data-mode="desktop"] .metric--revenue {
  left: 68%;
  top: 74%;
}

.scene[data-mode="desktop"] .metric--leads {
  left: 14%;
  top: 78%;
}

.scene[data-mode="desktop"] .metric--payments {
  left: -1%;
  top: 51%;
}

.scene[data-mode="desktop"] .metric--seo {
  left: 84%;
  top: 50%;
}

.scene[data-mode="mobile"] .metric--bookings {
  left: 6%;
  top: 34%;
}

.scene[data-mode="mobile"] .metric--visitors {
  left: 68%;
  top: 35%;
}

.scene[data-mode="mobile"] .metric--revenue {
  left: 64%;
  top: 79%;
}

.scene[data-mode="mobile"] .metric--leads {
  left: 8%;
  top: 79%;
}

.scene[data-mode="mobile"] .metric--payments {
  left: 2%;
  top: 58%;
}

.scene[data-mode="mobile"] .metric--seo {
  left: 76%;
  top: 58%;
}

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.56s cubic-bezier(0.21, 0.85, 0.14, 1),
    transform 0.56s cubic-bezier(0.21, 0.85, 0.14, 1);
}

.reveal--scene {
  transition-delay: 160ms;
}

.hero.is-ready .reveal {
  opacity: 1;
  transform: translateY(0);
}

@media (min-width: 1024px) {
  .hero__inner {
    grid-template-columns: 1fr;
    justify-items: center;
    align-content: start;
    gap: clamp(1.2rem, 2.2vw, 2rem);
    padding-top: clamp(2rem, 3.6vw, 3.2rem);
  }

  .hero__copy {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
  }

  .hero__sub {
    max-width: none;
  }

  .hero__cta {
    justify-content: center;
  }

  .hero__visual {
    width: 100%;
    min-height: clamp(520px, 66vh, 760px);
    padding-top: clamp(66px, 6vw, 92px);
    padding-bottom: clamp(70px, 10vh, 140px);
  }

  .scene {
    margin-left: 0;
    margin-top: -34px;
    width: min(100%, 780px);
    height: clamp(460px, 60vh, 700px);
  }

  .scene[data-mode="desktop"] .preview--desktop {
    left: 50%;
    top: 47%;
    width: clamp(250px, 34vw, 430px);
    --base-t: translate3d(-50%, -50%, 120px) scale(0.8);
    z-index: 9;
  }

  .scene[data-mode="desktop"] .preview--mobile {
    left: 30%;
    top: 60%;
    width: clamp(90px, 9vw, 118px);
    --base-t: translate3d(-50%, -50%, -140px) scale(0.5);
    z-index: 1;
    opacity: 0.3;
  }

  .scene[data-mode="mobile"] .preview--mobile {
    left: 50%;
    top: 53%;
    width: clamp(164px, 18vw, 228px);
    --base-t: translate3d(-50%, -50%, 118px) scale(0.8);
  }

  .scene[data-mode="mobile"] .preview--desktop {
    left: 50%;
    top: 69%;
    width: clamp(210px, 28vw, 320px);
    --base-t: translate3d(-50%, -50%, 38px) scale(0.58);
  }

  .scene[data-mode="desktop"] .metric--bookings {
    top: 19%;
  }

  .scene[data-mode="desktop"] .metric--visitors {
    top: 16%;
  }

  .scene[data-mode="desktop"] .metric--payments {
    top: 46%;
  }

  .scene[data-mode="desktop"] .metric--seo {
    top: 45%;
  }

  .scene[data-mode="desktop"] .metric--revenue {
    top: 67%;
  }

  .scene[data-mode="desktop"] .metric--leads {
    top: 69%;
  }

  .scene[data-mode="mobile"] .metric--bookings {
    top: 35%;
  }

  .scene[data-mode="mobile"] .metric--visitors {
    top: 36%;
  }

  .scene[data-mode="mobile"] .metric--payments {
    top: 57%;
  }

  .scene[data-mode="mobile"] .metric--seo {
    top: 57%;
  }

  .scene[data-mode="mobile"] .metric--revenue {
    top: 76%;
  }

  .scene[data-mode="mobile"] .metric--leads {
    top: 76%;
  }
}

@supports ((backdrop-filter: blur(14px)) or (-webkit-backdrop-filter: blur(14px))) {
  .preview,
  .metric,
  .btn--ghost,
  .oaBtn--ghost,
  .oaPill {
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
}

.miniChart__bars span {
  animation: barPulse 2.2s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 90ms);
}

@keyframes switchSweep {
  0% { transform: translateX(-115%); }
  100% { transform: translateX(115%); }
}

@keyframes bubbleRise {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(0.72);
  }
  12% {
    opacity: 0.24;
  }
  86% {
    opacity: 0.08;
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--drift, 10px), -116vh, 0) scale(1.06);
  }
}

@keyframes fishDrift {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(0.95);
  }
  8% {
    opacity: 0.12;
  }
  62% {
    opacity: 0.1;
  }
  92% {
    opacity: 0;
  }
  100% {
    opacity: 0;
    transform: translate3d(132vw, -10px, 0) scale(1.02);
  }
}

@keyframes sharkCruise {
  0%, 56% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(0.96);
  }
  64% {
    opacity: 0.12;
  }
  92% {
    opacity: 0.08;
  }
  100% {
    opacity: 0;
    transform: translate3d(136vw, -16px, 0) scale(1.02);
  }
}

@keyframes sharkTitleCharReveal {
  0% {
    opacity: 0;
    filter: blur(12px);
    transform: translate3d(-36px, 12px, 0) scale(0.92) skewX(-10deg);
  }

  46% {
    opacity: 1;
  }

  100% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0) scale(1) skewX(0deg);
  }
}

@keyframes sharkTitleCharCurrent {
  0% {
    opacity: 0;
    transform: translate3d(-26px, 0, 0) scaleX(0.7);
  }

  38% {
    opacity: 0.78;
  }

  100% {
    opacity: 0;
    transform: translate3d(18px, 0, 0) scaleX(1.16);
  }
}

@keyframes introHeroArrowFloat {
  0% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(8px, -5px, 0);
  }

  100% {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes introHeroCtaShake {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotate(0deg);
  }

  10% {
    transform: translate3d(0, -4px, 0) scale3d(1.016, 0.986, 1) rotate(-0.14deg);
  }

  20% {
    transform: translate3d(2.8px, -7px, 0) scale3d(0.995, 1.014, 1) rotate(0.22deg);
  }

  32% {
    transform: translate3d(-2.4px, -4px, 0) scale3d(1.01, 0.992, 1) rotate(-0.18deg);
  }

  46% {
    transform: translate3d(1.5px, -2px, 0) scale3d(0.998, 1.006, 1) rotate(0.12deg);
  }

  62% {
    transform: translate3d(-0.9px, -3px, 0) scale3d(1.004, 0.996, 1) rotate(-0.08deg);
  }

  78% {
    transform: translate3d(0.7px, 0, 0) scale3d(0.999, 1.002, 1) rotate(0.03deg);
  }

  90% {
    transform: translate3d(0, -1px, 0) scale3d(1.001, 0.999, 1) rotate(0deg);
  }
}

@keyframes introHeroStoryFloat {
  0% {
    transform: translate(-50%, -50%) translateY(0);
  }

  50% {
    transform: translate(-50%, -50%) translateY(calc(var(--story-float-y, 8px) * -1));
  }

  100% {
    transform: translate(-50%, -50%) translateY(0);
  }
}

@keyframes introHeroFillFloat {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }

  50% {
    transform: translate3d(0, -8px, 0) scale(1.01);
  }

  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes sharkTrailBubble {
  0% {
    opacity: 0;
    transform: translate3d(var(--x, 0), var(--y, 0), 0) scale(0.72);
  }

  18% {
    opacity: 0.84;
  }

  100% {
    opacity: 0;
    transform: translate3d(calc(var(--x, 0) + var(--drift-x, 0px)), calc(var(--y, 0) + var(--drift-y, -36px)), 0) scale(1.18);
  }
}

@keyframes sharkTrailSpark {
  0% {
    opacity: 0;
    transform: translate3d(var(--x, 0), var(--y, 0), 0) rotate(var(--rot, 0deg)) scaleX(0.4);
  }

  16% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate3d(calc(var(--x, 0) + var(--drift-x, -20px)), calc(var(--y, 0) + var(--drift-y, 0px)), 0) rotate(var(--rot, 0deg)) scaleX(1.22);
  }
}

@keyframes introTitleRise {
  0% {
    opacity: 0;
    filter: blur(11px);
    transform: translate3d(0, 116px, 0) scale(0.985);
  }
  75% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, -8px, 0) scale(1.005);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes introSubReveal {
  0% {
    opacity: 0;
    filter: blur(5px);
    transform: translate3d(0, 26px, 0);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes introSubFormFromParticles {
  0% {
    opacity: 0;
    color: rgba(230, 247, 255, 0.04);
    filter: blur(6px);
    transform: translate3d(0, 34px, 0);
  }
  52% {
    opacity: 0.42;
    color: rgba(230, 247, 255, 0.26);
    filter: blur(4px);
  }
  78% {
    opacity: 0.88;
    color: rgba(230, 247, 255, 0.72);
    filter: blur(1px);
    transform: translate3d(0, 6px, 0);
  }
  100% {
    opacity: 1;
    color: rgba(230, 247, 255, 0.84);
    filter: blur(0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes introSubParticlesRise {
  0% {
    opacity: 0;
    transform: translate3d(0, 34px, 0) scale(0.92);
  }
  26% {
    opacity: 0.98;
  }
  68% {
    opacity: 0.76;
    transform: translate3d(0, -8px, 0) scale(1.05);
  }
  100% {
    opacity: 0;
    transform: translate3d(0, -20px, 0) scale(1.08);
  }
}

@keyframes introSubSpecSweep {
  0% {
    opacity: 0;
    transform: translateX(-38%);
  }
  34% {
    opacity: 0.72;
  }
  100% {
    opacity: 0;
    transform: translateX(40%);
  }
}

@keyframes introExploreReveal {
  0% {
    opacity: 0;
    filter: blur(4px);
    transform: translate3d(0, 26px, 0);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes introExploreRevealDocked {
  0% {
    opacity: 0;
    filter: blur(4px);
    transform: translate3d(-50%, 26px, 0);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(-50%, 0, 0);
  }
}

@keyframes exploreArrowPulse {
  0%, 100% {
    transform: translateY(0) scale(1);
    filter: brightness(1);
  }
  50% {
    transform: translateY(11px) scale(1.07);
    filter: brightness(1.12);
  }
}

@keyframes titleParticleBurst {
  0% {
    opacity: 0;
    transform: translate3d(0, 18px, 0) scale(0.9);
    filter: blur(1px);
  }
  36% {
    opacity: 0.95;
  }
  100% {
    opacity: 0;
    transform: translate3d(0, -8px, 0) scale(1.04);
    filter: blur(0);
  }
}

@keyframes introRise {
  0% {
    opacity: 0;
    filter: blur(9px);
    transform: translate3d(0, 74px, 0);
  }
  72% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, -6px, 0);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes introFloat {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -6px, 0); }
}

@keyframes introBreath {
  0%, 100% { letter-spacing: -0.03em; }
  50% { letter-spacing: -0.026em; }
}

@keyframes titleLetterFloat {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  20% { transform: translate3d(0, -3px, 0) rotate(-0.45deg); }
  52% { transform: translate3d(0, -7px, 0) rotate(0.35deg); }
  78% { transform: translate3d(0, -2px, 0) rotate(-0.18deg); }
}

@keyframes titleLetterGlow {
  0%, 100% {
    filter: drop-shadow(0 5px 16px rgba(73, 193, 236, 0.28));
    background-position: 50% 52%;
  }
  50% {
    filter: drop-shadow(0 7px 22px rgba(167, 233, 255, 0.5));
    background-position: 62% 36%;
  }
}

@keyframes barPulse {
  0%, 100% { transform: scaleY(0.86); filter: brightness(0.86); }
  50% { transform: scaleY(1); filter: brightness(1.1); }
}

@keyframes valuePulse {
  0% { opacity: 0.72; transform: translateY(3px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes technoFlash {
  0% { filter: saturate(0.92) brightness(0.92); }
  40% { filter: saturate(1.18) brightness(1.08); }
  100% { filter: saturate(1) brightness(1); }
}

@media (max-width: 1023px) {
  .hero {
    min-height: calc(96vh + 54px);
  }

  .hero__inner {
    grid-template-columns: 1fr;
    align-items: start;
    padding-top: clamp(1.8rem, 5vw, 2.8rem);
    gap: clamp(1.2rem, 4.8vw, 2.4rem);
  }

  .hero__copy {
    max-width: 680px;
    margin: 0 auto;
    text-align: center;
  }

  .hero__sub,
  .hero__micro {
    max-width: none;
  }

  .hero__cta {
    flex-direction: column;
  }

  .hero__cta .btn {
    width: min(100%, 320px);
  }

  .hero__visual {
    min-height: clamp(620px, 84vh, 900px);
    padding-bottom: clamp(68px, 11vh, 130px);
  }

  .hero__gyroToggle {
    display: inline-flex;
    top: 56px;
  }

  .hero__gyroBanner {
    bottom: calc(14px + env(safe-area-inset-bottom));
    width: min(calc(100vw - 20px), 380px);
  }

  .scene {
    margin-left: 0;
    margin-top: -48px;
    width: min(100%, 580px);
    height: clamp(560px, 76vh, 820px);
  }

  .scene[data-mode="mobile"] .preview--mobile {
    left: 50%;
    top: 49%;
    width: clamp(174px, 42vw, 232px);
    --base-t: translate3d(-50%, -50%, 122px) scale(0.9);
  }

  .scene[data-mode="mobile"] .preview--desktop {
    left: 50%;
    top: 65%;
    width: clamp(220px, 66vw, 336px);
    --base-t: translate3d(-50%, -50%, 50px) scale(0.62);
    opacity: 0.45;
  }

  .scene[data-mode="desktop"] .preview--desktop {
    left: 50%;
    top: 44%;
    width: clamp(240px, 72vw, 400px);
    --base-t: translate3d(-50%, -50%, 120px) scale(0.78);
    opacity: 1;
  }

  .scene[data-mode="desktop"] .preview--mobile {
    left: 78%;
    top: 62%;
    width: clamp(94px, 20vw, 120px);
    --base-t: translate3d(-50%, -50%, -120px) scale(0.52);
    opacity: 0.3;
  }

  .metric {
    width: clamp(104px, 24vw, 142px);
    padding: 9px 9px;
  }

  .metric::after {
    width: 36px;
  }

  .scene[data-mode="mobile"] .metric--bookings {
    left: 8%;
    top: 40%;
  }

  .scene[data-mode="mobile"] .metric--visitors {
    left: 66%;
    top: 41%;
  }

  .scene[data-mode="mobile"] .metric--revenue {
    left: 62%;
    top: 78%;
  }

  .scene[data-mode="mobile"] .metric--leads {
    left: 7%;
    top: 78%;
  }

  .scene[data-mode="mobile"] .metric--payments {
    left: 2%;
    top: 60%;
  }

  .scene[data-mode="mobile"] .metric--seo {
    left: 72%;
    top: 60%;
  }

  .scene[data-mode="desktop"] .metric--bookings {
    left: 8%;
    top: 24%;
  }

  .scene[data-mode="desktop"] .metric--visitors {
    left: 66%;
    top: 24%;
  }

  .scene[data-mode="desktop"] .metric--revenue {
    left: 59%;
    top: 66%;
  }

  .scene[data-mode="desktop"] .metric--leads {
    left: 8%;
    top: 67%;
  }

  .scene[data-mode="desktop"] .metric--payments {
    left: 3%;
    top: 47%;
  }

  .scene[data-mode="desktop"] .metric--seo {
    left: 73%;
    top: 47%;
  }
}

@media (max-width: 760px) {
  .pageHero {
    min-height: calc(92vh - var(--oa-header-offset));
    padding: clamp(24px, 7vw, 40px);
  }

  .pageHero__title {
    font-size: clamp(1.8rem, 11vw, 2.5rem);
  }

  .scene[data-mode="desktop"] {
    height: clamp(470px, 68vh, 590px);
  }

  .scene[data-mode="desktop"] .preview--desktop {
    left: 50%;
    top: 29%;
    width: min(94vw, 420px);
    --base-t: translate3d(-50%, -50%, 120px) scale(0.96);
  }

  .scene[data-mode="desktop"] .preview--mobile {
    left: 50%;
    top: 29%;
    width: clamp(84px, 16vw, 96px);
    --base-t: translate3d(-50%, -50%, -120px) scale(0.44);
    opacity: 0;
  }

  .hero--demo .metric {
    width: clamp(92px, 22vw, 128px);
    padding: 8px 8px;
    border-radius: 12px;
  }

  .hero--demo .metric::after {
    width: 0;
    opacity: 0;
  }

  .hero--demo .metric__label {
    font-size: 10px;
  }

  .hero--demo .metric__value {
    margin-top: 4px;
    font-size: clamp(0.9rem, 4.6vw, 1.14rem);
  }

  .hero--demo .metric__trend {
    margin-top: 6px;
    height: 15px;
    gap: 3px;
  }

  .scene[data-mode="desktop"] .metric--bookings {
    left: 3%;
    top: 54%;
  }

  .scene[data-mode="desktop"] .metric--visitors {
    left: 68%;
    top: 54%;
  }

  .scene[data-mode="desktop"] .metric--payments {
    left: 2%;
    top: 70%;
  }

  .scene[data-mode="desktop"] .metric--seo {
    left: 69%;
    top: 70%;
  }

  .scene[data-mode="desktop"] .metric--leads {
    left: 10%;
    top: 85%;
  }

  .scene[data-mode="desktop"] .metric--revenue {
    left: 60%;
    top: 85%;
  }

  .scene[data-mode="desktop"] .preview--desktop .window__bar {
    gap: 5px;
    padding: 6px 8px;
  }

  .scene[data-mode="desktop"] .preview--desktop .window__addr {
    min-height: 18px;
    padding: 0 6px;
    font-size: 9px;
  }

  .scene[data-mode="desktop"] .preview--desktop .window__live {
    min-height: 18px;
    padding: 0 5px;
    font-size: 8px;
  }

  .scene[data-mode="desktop"] .preview--desktop .window__live span {
    width: 4px;
    height: 4px;
  }

  .scene[data-mode="desktop"] .preview--desktop .window__body {
    padding: 8px;
    gap: 6px;
  }

  .scene[data-mode="desktop"] .preview--desktop .miniNav {
    min-height: 16px;
    gap: 4px;
  }

  .scene[data-mode="desktop"] .preview--desktop .miniNav__brandWrap {
    gap: 4px;
    margin-right: 2px;
  }

  .scene[data-mode="desktop"] .preview--desktop .miniNav__logo {
    width: 12px;
    height: 12px;
    border-radius: 4px;
  }

  .scene[data-mode="desktop"] .preview--desktop .miniNav__brand {
    font-size: 6.5px;
    letter-spacing: 0.08em;
  }

  .scene[data-mode="desktop"] .preview--desktop .miniNav__link {
    font-size: 6px;
  }

  .scene[data-mode="desktop"] .preview--desktop .miniNav__cta {
    min-height: 14px;
    padding: 0 5px;
    font-size: 6px;
  }

  .scene[data-mode="desktop"] .preview--desktop .miniHero {
    padding: 6px;
    gap: 6px;
    border-radius: 8px;
  }

  .scene[data-mode="desktop"] .preview--desktop .miniHero h3 {
    font-size: 0.64rem;
    line-height: 1.08;
  }

  .scene[data-mode="desktop"] .preview--desktop .miniHero p {
    margin-top: 3px;
    font-size: 7px;
    line-height: 1.22;
  }

  .scene[data-mode="desktop"] .preview--desktop .miniHero__actions {
    margin-top: 5px;
    gap: 4px;
  }

  .scene[data-mode="desktop"] .preview--desktop .miniHero__btn {
    min-height: 15px;
    padding: 0 5px;
    font-size: 6px;
  }

  .scene[data-mode="desktop"] .preview--desktop .miniHero__media {
    gap: 4px;
  }

  .scene[data-mode="desktop"] .preview--desktop .miniMedia--main {
    min-height: 25px;
  }

  .scene[data-mode="desktop"] .preview--desktop .miniMedia--thumb {
    min-height: 12px;
  }

  .scene[data-mode="desktop"] .preview--desktop .miniServices {
    gap: 4px;
  }

  .scene[data-mode="desktop"] .preview--desktop .svc {
    min-height: 30px;
    padding: 5px;
    gap: 4px;
    border-radius: 7px;
  }

  .scene[data-mode="desktop"] .preview--desktop .svc__thumb {
    min-height: 10px;
    border-radius: 5px;
  }

  .scene[data-mode="desktop"] .preview--desktop .svc__title,
  .scene[data-mode="desktop"] .preview--desktop .svc__line {
    height: 3px;
  }

  .scene[data-mode="desktop"] .preview--desktop .miniChart {
    min-height: 34px;
    padding: 5px;
  }

  .scene[data-mode="desktop"] .preview--desktop .miniChart__bars {
    height: 23px;
    gap: 3px;
  }

  .responsiveIntro {
    min-height: calc(100svh - var(--oa-header-offset));
    align-content: center;
    gap: clamp(0.54rem, 2.4vw, 0.82rem);
    padding: clamp(14px, 3.2vh, 26px) clamp(14px, 5.4vw, 22px);
    margin-block: 0;
  }

  .responsiveIntro__badge {
    gap: 0.72rem;
  }

  .responsiveIntro__badgeLine {
    max-width: 76px;
  }

  .responsiveIntro__eyebrow {
    letter-spacing: 0.22em;
  }

  .responsiveIntro__title {
    max-width: 100%;
    gap: 0.06em;
    line-height: 1.08;
    padding: 0.14em 0.08em 0.18em;
  }

  .responsiveIntro__titleLine {
    padding-inline: 0.1em 0.18em;
  }

  .responsiveIntro__titleLine--primary {
    font-size: clamp(2.5rem, 11vw, 3.45rem);
  }

  .responsiveIntro__titleLine--secondary {
    font-size: clamp(1.82rem, 8.1vw, 2.52rem);
  }

  .responsiveIntro__titleLine--tertiary {
    font-size: clamp(1.36rem, 6.2vw, 1.94rem);
  }

  .responsiveIntro__desc {
    width: min(100%, 27rem);
    font-size: 0.94rem;
    line-height: 1.52;
  }

  .responsiveIntro__actions {
    width: min(100%, 27rem);
    margin-top: 0.14rem;
  }

  .responsiveIntro__contentCta {
    min-height: 48px;
    padding: 0.72rem 1rem 0.72rem 1.08rem;
  }

  .responsiveIntro__contentCtaLabel {
    font-size: 0.92rem;
  }

  .responsiveIntro__contentCtaArrow {
    width: 28px;
    height: 28px;
  }

  .responsiveIntro__panel {
    margin-top: clamp(0.95rem, 4.4vw, 1.4rem);
    padding: 10px;
    clip-path: polygon(28px 0, calc(100% - 28px) 0, 100% 28px, 100% calc(100% - 24px), calc(100% - 20px) 100%, 20px 100%, 0 calc(100% - 24px), 0 28px);
  }

  .responsiveIntro__panel::before {
    inset: 9px;
    background:
      linear-gradient(90deg, rgba(219, 250, 255, 0.92), rgba(105, 222, 255, 0.3) 58%, rgba(105, 222, 255, 0)) left 44px top 9px / calc(50% - 78px) 1px no-repeat,
      linear-gradient(90deg, rgba(105, 222, 255, 0), rgba(105, 222, 255, 0.3) 42%, rgba(219, 250, 255, 0.92)) right 44px top 9px / calc(50% - 78px) 1px no-repeat,
      linear-gradient(180deg, rgba(219, 250, 255, 0.92), rgba(105, 222, 255, 0.3) 58%, rgba(105, 222, 255, 0)) left 9px top 44px / 1px calc(100% - 88px) no-repeat,
      linear-gradient(180deg, rgba(219, 250, 255, 0.92), rgba(105, 222, 255, 0.3) 58%, rgba(105, 222, 255, 0)) right 9px top 44px / 1px calc(100% - 88px) no-repeat,
      linear-gradient(90deg, rgba(219, 250, 255, 0.92), rgba(105, 222, 255, 0.3) 58%, rgba(105, 222, 255, 0)) left 44px bottom 9px / calc(50% - 78px) 1px no-repeat,
      linear-gradient(90deg, rgba(105, 222, 255, 0), rgba(105, 222, 255, 0.3) 42%, rgba(219, 250, 255, 0.92)) right 44px bottom 9px / calc(50% - 78px) 1px no-repeat,
      radial-gradient(circle at center, rgba(222, 251, 255, 0.98) 0, rgba(119, 230, 255, 0.7) 18%, rgba(119, 230, 255, 0.16) 38%, rgba(119, 230, 255, 0) 70%) center top 7px / 178px 14px no-repeat,
      radial-gradient(circle at center, rgba(206, 249, 255, 0.82) 0, rgba(119, 230, 255, 0.48) 16%, rgba(119, 230, 255, 0.14) 34%, rgba(119, 230, 255, 0) 68%) center bottom 8px / 110px 12px no-repeat;
  }

  .responsiveIntro__panel::after {
    width: min(40%, 148px);
    height: 16px;
  }

  .responsiveIntro__panelCorner {
    width: 58px;
    height: 54px;
  }

  .responsiveIntro__panelInner {
    gap: 0.72rem;
    padding: 36px 10px 15px;
    clip-path: polygon(22px 0, calc(100% - 22px) 0, 100% 22px, 100% calc(100% - 18px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 18px), 0 22px);
  }

  .responsiveIntro__panelInner--media {
    padding: 8px;
  }

  .responsiveIntro__mediaShell {
    clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px);
  }

  .responsiveIntro__mediaShell::before {
    clip-path: polygon(11px 0, calc(100% - 11px) 0, 100% 11px, 100% calc(100% - 11px), calc(100% - 11px) 100%, 11px 100%, 0 calc(100% - 11px), 0 11px);
    background:
      linear-gradient(90deg, rgba(223, 250, 255, 0.78), rgba(114, 227, 255, 0.2) 58%, rgba(114, 227, 255, 0)) left 18px top 8px / calc(50% - 32px) 1px no-repeat,
      linear-gradient(90deg, rgba(114, 227, 255, 0), rgba(114, 227, 255, 0.2) 42%, rgba(223, 250, 255, 0.78)) right 18px top 8px / calc(50% - 32px) 1px no-repeat,
      linear-gradient(180deg, rgba(223, 250, 255, 0.5), rgba(114, 227, 255, 0)) left 8px top 18px / 1px calc(100% - 36px) no-repeat,
      linear-gradient(180deg, rgba(223, 250, 255, 0.5), rgba(114, 227, 255, 0)) right 8px top 18px / 1px calc(100% - 36px) no-repeat,
      linear-gradient(90deg, rgba(223, 250, 255, 0.38), rgba(114, 227, 255, 0.16) 58%, rgba(114, 227, 255, 0)) left 18px bottom 8px / calc(50% - 32px) 1px no-repeat,
      linear-gradient(90deg, rgba(114, 227, 255, 0), rgba(114, 227, 255, 0.16) 42%, rgba(223, 250, 255, 0.38)) right 18px bottom 8px / calc(50% - 32px) 1px no-repeat;
  }

  .responsiveIntro__panelInner::before {
    inset: 7px;
    background:
      linear-gradient(90deg, rgba(223, 250, 255, 0.8), rgba(114, 227, 255, 0.24) 58%, rgba(114, 227, 255, 0)) left 34px top 8px / calc(50% - 58px) 1px no-repeat,
      linear-gradient(90deg, rgba(114, 227, 255, 0), rgba(114, 227, 255, 0.24) 42%, rgba(223, 250, 255, 0.8)) right 34px top 8px / calc(50% - 58px) 1px no-repeat,
      linear-gradient(180deg, rgba(223, 250, 255, 0.8), rgba(114, 227, 255, 0.24) 58%, rgba(114, 227, 255, 0)) left 8px top 34px / 1px calc(100% - 68px) no-repeat,
      linear-gradient(180deg, rgba(223, 250, 255, 0.8), rgba(114, 227, 255, 0.24) 58%, rgba(114, 227, 255, 0)) right 8px top 34px / 1px calc(100% - 68px) no-repeat,
      linear-gradient(90deg, rgba(223, 250, 255, 0.8), rgba(114, 227, 255, 0.24) 58%, rgba(114, 227, 255, 0)) left 34px bottom 8px / calc(50% - 58px) 1px no-repeat,
      linear-gradient(90deg, rgba(114, 227, 255, 0), rgba(114, 227, 255, 0.24) 42%, rgba(223, 250, 255, 0.8)) right 34px bottom 8px / calc(50% - 58px) 1px no-repeat;
  }

  .responsiveIntro__panelStatus {
    top: 10px;
    left: 18px;
    min-height: 20px;
    padding: 0.22rem 0.54rem 0.22rem 0.62rem;
    font-size: 0.54rem;
    letter-spacing: 0.18em;
  }

  .responsiveIntro__panelTitle span:nth-child(1) {
    font-size: clamp(1.7rem, 7.6vw, 2.18rem);
  }

  .responsiveIntro__panelTitle span:nth-child(2) {
    font-size: clamp(1.46rem, 6.5vw, 1.84rem);
  }

  .responsiveIntro__panelTitle span:nth-child(3) {
    font-size: clamp(1.28rem, 5.8vw, 1.62rem);
  }

  .responsiveIntro__featureGrid {
    gap: 0.42rem;
  }

  .responsiveIntro__featureCard {
    min-height: 106px;
    gap: 0.54rem;
    padding: 12px 7px 10px;
    clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
  }

  .responsiveIntro__featureIcon {
    width: 30px;
    height: 30px;
  }

  .responsiveIntro__featureText {
    font-size: 0.8rem;
    line-height: 1.14;
  }

  .responsiveIntro__panelActions {
    gap: 0.48rem;
  }

  .responsiveIntro__panelBtn {
    min-height: 44px;
    padding: 0.7rem 0.58rem;
    font-size: 0.8rem;
    clip-path: polygon(
      12px 0,
      calc(100% - 16px) 0,
      calc(100% - 11px) 6px,
      calc(100% - 6px) 6px,
      100% 50%,
      calc(100% - 6px) calc(100% - 6px),
      calc(100% - 11px) calc(100% - 6px),
      calc(100% - 16px) 100%,
      12px 100%,
      7px calc(100% - 6px),
      4px calc(100% - 6px),
      0 50%,
      4px 6px,
      7px 6px
    );
  }

  .responsiveIntro__panelBtn::before {
    clip-path: polygon(
      10px 0,
      calc(100% - 14px) 0,
      calc(100% - 10px) 5px,
      calc(100% - 5px) 5px,
      100% 50%,
      calc(100% - 5px) calc(100% - 5px),
      calc(100% - 10px) calc(100% - 5px),
      calc(100% - 14px) 100%,
      10px 100%,
      6px calc(100% - 5px),
      3px calc(100% - 5px),
      0 50%,
      3px 5px,
      6px 5px
    );
  }

  .responsiveIntro__panelMeta {
    font-size: 0.62rem;
    line-height: 1.46;
    letter-spacing: 0.04em;
  }

  .responsiveIntro__panelMeta span {
    margin-inline: 0.34rem;
  }

  .introHero__inner {
    height: 100%;
    min-height: 100%;
    display: block;
    padding-top: 0;
    padding-bottom: 0;
  }

  .introHero__sharkSequence {
    --hero-title-y: 34%;
    --hero-desc-y: 50%;
    --hero-cta-y: 63%;
    min-height: 100%;
    height: 100%;
    width: min(100%, 680px);
  }

  .introHero__titleBlock {
    width: min(100%, 620px);
    gap: clamp(0.32rem, 1.8vh, 0.72rem);
  }

  .introHero__descriptionBlock {
    width: min(calc(100% - 1.2rem), 520px);
    gap: 0.42rem;
  }

  .introHero__descriptionLine {
    font-size: clamp(0.92rem, 3vw, 1.12rem);
  }

  .introHero__ctaAction {
    min-height: 54px;
    padding: 0.72rem 1rem 0.72rem 1.16rem;
  }

  .introHero__ctaLabel {
    font-size: clamp(1rem, 3.1vw, 1.18rem);
  }

  .introHero__fillPanel {
    top: calc(var(--hero-title-y) + 2%);
    width: min(28vw, 180px);
    height: min(22vh, 150px);
  }

  .introHero__fillSweep--title {
    top: calc(var(--hero-title-y) - 8%);
    width: min(72vw, 520px);
  }

  .introHero__fillBand {
    width: min(82vw, 560px);
  }

  .introHero__fillOrbit {
    width: min(60vw, 360px);
    height: min(12vh, 96px);
  }

  .introHero__fillPlatform {
    width: min(54vw, 280px);
  }

  .introHero__fillBracket {
    width: 40px;
    height: 44px;
  }

  .introHero__fillBracket--left {
    left: calc(50% - min(22vw, 128px));
  }

  .introHero__fillBracket--right {
    right: calc(50% - min(22vw, 128px));
  }

  .introHero__titleLine {
    padding-inline: clamp(0.4rem, 2vw, 0.8rem);
  }

  .introHero__titleLine--primary {
    font-size: clamp(2.18rem, 10.6vw, 4.8rem);
  }

  .introHero__titleLine--secondary {
    font-size: clamp(1.26rem, 5.8vw, 2.3rem);
  }

  .introHero__shark {
    width: clamp(220px, 63vw, 420px);
  }

  .introHero__wake {
    height: clamp(20px, 8vw, 48px);
  }

  .introHero__copy {
    position: static;
    width: min(100%, 680px);
    display: grid;
    justify-items: center;
    gap: clamp(12px, 2vh, 20px);
    text-align: center;
    padding-inline: clamp(4px, 2vw, 10px);
    padding-bottom: clamp(188px, 30vh, 272px);
  }

  .introHero__title {
    animation-duration: 1.7s;
    width: 100%;
    font-size: clamp(1.2rem, 4.4vw, 1.8rem);
    line-height: 1.06;
  }

  .introHero__titleWord--desktop {
    display: none;
  }

  .introHero__titleWordMobile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(2px, 0.7vh, 8px);
    width: 100%;
  }

  .introHero__titleWordMobileMain {
    text-transform: uppercase;
    font-size: clamp(2.96rem, 17vw, 5.6rem);
    font-weight: 780;
    line-height: 0.9;
    letter-spacing: 0.03em;
    filter:
      drop-shadow(0 10px 28px rgba(21, 118, 156, 0.44))
      drop-shadow(0 0 18px rgba(43, 196, 227, 0.24));
  }

  .introHero__titleWordMobileSub {
    font-size: clamp(2.02rem, 9.2vw, 3rem);
    font-weight: 700;
    line-height: 0.98;
    letter-spacing: 0.004em;
  }

  .introHero__titleWordMobileSub--last {
    font-size: clamp(1.86rem, 8.5vw, 2.64rem);
    letter-spacing: -0.004em;
  }

  .introHero__sub {
    animation-delay: 1.42s;
    font-size: clamp(0.98rem, 4.2vw, 1.1rem);
    text-align: center;
    text-align-last: center;
    max-width: 30ch;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
  }

  .introHero__cta {
    width: min(100%, 320px);
    gap: 0.56rem;
    display: grid;
    grid-template-columns: 1fr;
  }

  .introHero__cta .btn {
    width: 100%;
    min-width: 0;
  }

  .introHero__explore {
    position: absolute;
    left: 50%;
    bottom: max(18px, env(safe-area-inset-bottom));
    margin-top: 0;
    gap: clamp(0.44rem, 1.4vh, 0.72rem);
    animation: introExploreRevealDocked 0.92s cubic-bezier(0.18, 0.82, 0.24, 1) forwards 1.92s;
  }

  .introHero__exploreLabel {
    font-size: clamp(1.1rem, 4.4vw, 1.22rem);
    letter-spacing: 0.12em;
    color: rgba(233, 248, 255, 0.92);
  }

  .introHero__exploreArrow {
    width: clamp(66px, 19vw, 90px);
    height: clamp(112px, 30vw, 154px);
    opacity: 0.9;
  }

  .introHero__exploreGlyph path {
    stroke-width: 1.6;
    filter:
      drop-shadow(0 0 14px rgba(43, 196, 227, 0.54))
      drop-shadow(0 0 28px rgba(43, 196, 227, 0.32));
  }

  .oaHeader__inner {
    align-items: center;
    justify-content: space-between;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .oaNavDesktop {
    display: none;
  }

  .oaNavToggle {
    display: inline-flex;
  }

  .bubble:nth-child(n + 5) {
    display: none;
  }

  .hero__gridWrap {
    bottom: -42%;
  }

  .hero__switch {
    width: min(100%, 360px);
  }

  .hero__gyroToggle {
    top: 58px;
    min-height: 30px;
    padding: 0 11px;
    font-size: 11px;
  }

  .hero__gyroBanner {
    bottom: calc(12px + env(safe-area-inset-bottom));
    width: min(calc(100vw - 16px), 340px);
  }

  .hero__switchBtn {
    flex: 1;
    min-width: 0;
  }

  body.oa-boot-lock .introHero__explore {
    transform: translate3d(-50%, 84px, 0) !important;
  }

  body.is-reduced-motion .introHero__explore {
    transform: translateX(-50%) !important;
  }

  .introHero__sub::before {
    left: -7%;
    right: -7%;
    top: -42%;
    bottom: -30%;
    animation-duration: 1.82s;
  }

  .introHero__sub::after {
    animation-duration: 1.28s;
  }
}

@media (max-width: 520px) {
  .introHero__inner {
    padding-top: 0;
    padding-inline: 0;
  }

  .introHero__sharkSequence {
    --hero-title-y: 31%;
    --hero-desc-y: 46%;
    --hero-cta-y: 58%;
    min-height: 100%;
    height: 100%;
  }

  .introHero__titleBlock {
    width: min(calc(100% - 1rem), 360px);
    gap: 0.3rem;
  }

  .introHero__descriptionBlock {
    width: min(calc(100% - 1rem), 316px);
    gap: 0.34rem;
  }

  .introHero__descriptionLine {
    font-size: clamp(0.88rem, 4vw, 1rem);
    white-space: normal;
    text-wrap: balance;
    line-height: 1.26;
  }

  .introHero__ctaAction {
    min-height: 50px;
    gap: 0.7rem;
    padding: 0.68rem 0.96rem 0.68rem 1.02rem;
  }

  .introHero__ctaLabel {
    font-size: 1rem;
  }

  .introHero__ctaArrow {
    width: 30px;
    height: 30px;
  }

  .introHero__fillPanel {
    display: none;
  }

  .introHero__fillSweep--title {
    top: calc(var(--hero-title-y) - 7%);
    width: min(86vw, 320px);
  }

  .introHero__fillBand {
    width: min(88vw, 320px);
  }

  .introHero__fillBand--top {
    top: calc(var(--hero-desc-y) - 4.2%);
  }

  .introHero__fillBand--bottom {
    top: calc(var(--hero-desc-y) + 5%);
  }

  .introHero__fillOrbit {
    width: min(74vw, 250px);
    height: 74px;
  }

  .introHero__fillPlatform {
    width: min(68vw, 220px);
    height: 58px;
  }

  .introHero__fillSweep--cta {
    top: calc(var(--hero-cta-y) - 4%);
    width: min(42vw, 130px);
  }

  .introHero__fillBracket {
    width: 28px;
    height: 34px;
  }

  .introHero__fillBracket--left {
    left: calc(50% - min(28vw, 88px));
  }

  .introHero__fillBracket--right {
    right: calc(50% - min(28vw, 88px));
  }

  .introHero__titleLine {
    padding-inline: 0.35rem;
  }

  .introHero__titleLine--primary {
    font-size: clamp(1.92rem, 11vw, 3rem);
  }

  .introHero__titleLine--secondary {
    font-size: clamp(1.08rem, 6vw, 1.7rem);
  }

  .introHero__titleChar.is-space {
    min-width: 0.34em;
  }

  .introHero__shark {
    width: clamp(180px, 71vw, 320px);
  }

  .metric {
    width: clamp(96px, 29vw, 132px);
  }

  .metric::after {
    display: none;
  }

  .hero__visual {
    min-height: clamp(610px, 78vh, 780px);
    padding-bottom: clamp(74px, 12vh, 136px);
  }
}

.whyArcys {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: clamp(580px, 88vh, 940px);
  background: transparent;
}

.whyArcys::before {
  content: "";
  position: absolute;
  inset: -24% -8%;
  pointer-events: none;
  opacity: 0.78;
  filter: blur(72px);
  background:
    radial-gradient(760px 320px at 16% 58%, rgba(43, 196, 227, 0.26), transparent 74%),
    radial-gradient(920px 360px at 84% 42%, rgba(32, 156, 206, 0.2), transparent 76%);
}

.whyArcys__particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.42;
  background-image:
    radial-gradient(circle at 12% 22%, rgba(190, 234, 255, 0.52) 0 1px, transparent 1.8px),
    radial-gradient(circle at 76% 28%, rgba(190, 234, 255, 0.42) 0 1px, transparent 1.8px),
    radial-gradient(circle at 42% 64%, rgba(190, 234, 255, 0.3) 0 1px, transparent 1.8px),
    radial-gradient(circle at 86% 72%, rgba(190, 234, 255, 0.26) 0 1px, transparent 1.8px),
    radial-gradient(circle at 24% 78%, rgba(190, 234, 255, 0.24) 0 1px, transparent 1.8px),
    radial-gradient(circle at 62% 18%, rgba(190, 234, 255, 0.24) 0 1px, transparent 1.8px);
}

.whyArcys__particles::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 9px 11px, rgba(170, 229, 255, 0.32) 0 1px, transparent 1.8px) 0 0 / 124px 124px,
    radial-gradient(circle at 58px 76px, rgba(170, 229, 255, 0.18) 0 1px, transparent 1.8px) 0 0 / 136px 136px;
}

.whyArcys__inner {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
  min-height: inherit;
  padding: clamp(2.8rem, 6vw, 5rem) clamp(1rem, 4vw, 2.4rem) clamp(3rem, 6vw, 5rem);
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.4rem);
}

.whyArcys__head {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.whyArcys__eyebrow {
  margin: 0;
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(178, 235, 255, 0.78);
  font-weight: 640;
}

.whyArcys__title {
  margin: 0.56rem 0 0;
  text-align: center;
  text-wrap: balance;
  letter-spacing: -0.028em;
  font-size: clamp(2rem, 4.8vw, 4rem);
  font-weight: 680;
  background: linear-gradient(165deg, rgba(247, 253, 255, 0.98), rgba(128, 226, 250, 0.96) 56%, rgba(236, 251, 255, 0.98));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 10px 34px rgba(24, 137, 176, 0.22);
}

.whyArcys__lead {
  margin: 0.92rem auto 0;
  max-width: 65ch;
  text-wrap: pretty;
  font-size: clamp(1rem, 1.44vw, 1.22rem);
  line-height: 1.68;
  color: rgba(227, 244, 255, 0.82);
}

.whyArcys__carousel {
  position: relative;
  width: min(100%, 920px);
  margin: 0 auto;
  padding: clamp(10px, 1.8vw, 14px);
  border-radius: clamp(22px, 3vw, 30px);
  overflow: hidden;
  touch-action: pan-y;
  perspective: 1600px;
  perspective-origin: 50% 42%;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
    linear-gradient(145deg, rgba(5, 25, 40, 0.7), rgba(3, 18, 30, 0.86));
  border: 1px solid rgba(43, 196, 227, 0.24);
  box-shadow:
    0 28px 52px rgba(2, 12, 24, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.whyArcys__carousel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.22;
  background:
    repeating-linear-gradient(0deg, rgba(164, 229, 249, 0.2) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(164, 229, 249, 0.08) 0 1px, transparent 1px 4px);
}

.whyArcys__track {
  position: relative;
  width: 100%;
  min-height: clamp(300px, 36vw, 390px);
  transform-style: preserve-3d;
}

.whyCard {
  position: absolute;
  inset: 0;
  min-height: clamp(300px, 36vw, 390px);
  border-radius: clamp(16px, 2.2vw, 24px);
  border: 1px solid rgba(43, 196, 227, 0.26);
  background:
    radial-gradient(460px 210px at 18% 14%, rgba(127, 231, 252, 0.22), transparent 72%),
    radial-gradient(360px 160px at 84% 92%, rgba(36, 154, 203, 0.14), transparent 74%),
    linear-gradient(150deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.02)),
    linear-gradient(180deg, rgba(5, 26, 42, 0.74), rgba(4, 20, 33, 0.86));
  padding: clamp(18px, 2.8vw, 30px) clamp(16px, 3vw, 30px) clamp(16px, 2.7vw, 24px);
  display: grid;
  grid-template-rows: auto auto auto;
  align-content: center;
  justify-items: center;
  text-align: center;
  gap: clamp(11px, 1.6vw, 16px);
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  transform-origin: 50% 52%;
  transform: translate3d(126px, 18px, -240px) rotateY(-22deg) rotateX(9deg) scale(0.76);
  filter: blur(4px);
  transition:
    opacity 320ms ease,
    filter 320ms ease;
  box-shadow:
    0 22px 36px rgba(2, 12, 24, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(94, 211, 241, 0.14);
}

.whyCard.is-active {
  opacity: 1;
  pointer-events: auto;
  z-index: 3;
  filter: blur(0);
  transform: translate3d(0, 0, 0) rotateX(0deg) scale(1);
}

.whyCard.is-entering {
  animation: whyCardEnter3D 790ms cubic-bezier(0.16, 0.84, 0.24, 1) both;
}

.whyCard.is-exiting {
  z-index: 2;
  animation: whyCardExit3D 790ms cubic-bezier(0.24, 0.2, 0.2, 1) both;
}

@keyframes whyCardEnter3D {
  0% {
    opacity: 0;
    filter: blur(4px);
    transform: translate3d(126px, 18px, -240px) rotateY(-22deg) rotateX(9deg) scale(0.76);
  }
  54% {
    opacity: 1;
    filter: blur(0.5px);
    transform: translate3d(-4px, -1px, 24px) rotateY(2deg) rotateX(-1.2deg) scale(1.018);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0) rotateY(0deg) rotateX(0deg) scale(1);
  }
}

@keyframes whyCardExit3D {
  0% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0) rotateY(0deg) rotateX(0deg) scale(1);
  }
  100% {
    opacity: 0;
    filter: blur(4px);
    transform: translate3d(-126px, -14px, -230px) rotateY(20deg) rotateX(-8deg) scale(0.76);
  }
}

.whyCard::before {
  content: "";
  position: absolute;
  top: 14px;
  right: 14px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.9), rgba(43, 196, 227, 0.56));
  box-shadow: 0 0 14px rgba(43, 196, 227, 0.46);
}

.whyCard__title {
  margin: 0;
  max-width: 20ch;
  text-wrap: balance;
  font-size: clamp(1.4rem, 2.8vw, 2.26rem);
  line-height: 1.08;
  font-weight: 680;
  letter-spacing: 0.004em;
  color: rgba(242, 251, 255, 0.96);
  text-shadow: 0 8px 26px rgba(18, 104, 140, 0.26);
}

.whyCard__text {
  margin: 0;
  max-width: 54ch;
  text-wrap: pretty;
  font-size: clamp(1.02rem, 1.48vw, 1.28rem);
  line-height: 1.72;
  color: rgba(226, 244, 253, 0.9);
}

.whyCard__meta {
  margin: 0.22rem 0 0;
  font-size: clamp(0.8rem, 1.08vw, 0.94rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(169, 229, 251, 0.88);
}

.whyArcys__ctaWrap {
  display: grid;
  justify-items: center;
  gap: 0.72rem;
  margin-top: clamp(0.24rem, 1vw, 0.6rem);
}

.whyArcys__ctaButtons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.72rem;
  flex-wrap: wrap;
}

.whyArcys__ctaText {
  margin: 0;
  font-size: clamp(0.94rem, 1.2vw, 1.03rem);
  color: rgba(221, 243, 255, 0.82);
  text-align: center;
}

.whyArcys__cta {
  min-width: 170px;
}

@media (max-width: 1023px) {
  .whyArcys {
    min-height: clamp(540px, 86vh, 860px);
  }

  .whyArcys__inner {
    padding-inline: clamp(0.8rem, 4vw, 1.2rem);
  }

  .whyArcys__carousel {
    width: 100%;
  }
}

@media (max-width: 700px) {
  .whyArcys {
    min-height: auto;
  }

  .whyArcys__track {
    min-height: clamp(304px, 78vw, 430px);
  }

  .whyCard {
    min-height: clamp(304px, 78vw, 430px);
    padding: clamp(18px, 6.2vw, 24px) clamp(14px, 5vw, 18px);
  }

  .whyCard__title {
    font-size: clamp(1.22rem, 5.6vw, 1.52rem);
  }

  .whyCard__text {
    font-size: clamp(0.98rem, 4.2vw, 1.08rem);
    line-height: 1.64;
  }

  .whyCard__meta {
    font-size: clamp(0.74rem, 3vw, 0.84rem);
    letter-spacing: 0.1em;
  }

  .whyArcys__ctaButtons {
    width: min(100%, 340px);
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.56rem;
  }

  .whyArcys__ctaButtons .whyArcys__cta {
    width: 100%;
    min-width: 0;
  }
}

body.is-reduced-motion .hero,
body.is-reduced-motion .hero * {
  animation: none !important;
}

body.is-reduced-motion .introHero,
body.is-reduced-motion .introHero * {
  animation: none !important;
}

body.is-reduced-motion .responsiveIntro,
body.is-reduced-motion .responsiveIntro * {
  animation: none !important;
  transition: none !important;
}

body.is-reduced-motion .whyArcys__track,
body.is-reduced-motion .whyCard {
  transition: none !important;
  animation: none !important;
}

body.is-reduced-motion .whyCard {
  filter: none !important;
  transform: none !important;
  opacity: 0 !important;
}

body.is-reduced-motion .whyCard.is-active {
  opacity: 1 !important;
}

body.is-reduced-motion .reveal,
body.is-reduced-motion .layer {
  transition: none !important;
}

body.is-reduced-motion .preview,
body.is-reduced-motion .metric,
body.is-reduced-motion .hero__switchBtn,
body.is-reduced-motion .hero__gyroToggle {
  transition: none !important;
}

body.is-reduced-motion .hero__gyroBanner {
  transition: none !important;
}

body.is-reduced-motion .hero__gyroToggle i {
  animation: none !important;
}

body.is-reduced-motion .reveal,
body.is-reduced-motion .layer {
  opacity: 1 !important;
}

body.is-reduced-motion .introHero__title,
body.is-reduced-motion .introHero__sub,
body.is-reduced-motion .introHero__explore {
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}

body.is-reduced-motion .introHero__titleChar {
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}

body.is-reduced-motion .introHero__wake,
body.is-reduced-motion .introHero__trail,
body.is-reduced-motion .introHero__shark {
  opacity: 0 !important;
}

body.is-reduced-motion .responsiveIntro > * {
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}

body.is-reduced-motion .introHero__sub::before,
body.is-reduced-motion .introHero__sub::after {
  animation: none !important;
  opacity: 0 !important;
}

body.is-reduced-motion .scene {
  --rx: 0deg;
  --ry: 0deg;
}

body.is-reduced-motion .layer {
  --mx: 0px;
  --my: 0px;
  --mr: 0deg;
  --enter-y: 0px;
}

.hero.is-anim-paused,
.hero.is-anim-paused * {
  animation-play-state: paused !important;
}

.introHero.is-anim-paused,
.introHero.is-anim-paused * {
  animation-play-state: paused !important;
}

.introHero.is-anim-paused .introHero__sub::before,
.introHero.is-anim-paused .introHero__sub::after {
  animation-play-state: paused !important;
}

#demo-preview {
  --scene-base-width: 760;
  --scene-base-height: 820;
  --scene-fit-scale: 1;
  --scene-trace-duration: 1320ms;
  --scene-trace-loop-duration: 6200ms;
}

#demo-preview .hero__inner {
  width: 100%;
  max-width: none;
  margin: 0;
  min-height: calc(100svh - var(--oa-header-offset, 78px));
  grid-template-columns: 1fr;
  justify-items: center;
  align-items: stretch;
  padding-inline: clamp(14px, 2.4vw, 32px);
  padding-top: clamp(0.9rem, 2.2vh, 1.6rem);
  padding-bottom: clamp(0.9rem, 2.4vh, 1.8rem);
  align-content: stretch;
}

#demo-preview .hero__visual {
  width: 100%;
  justify-self: stretch;
  min-height: calc(100svh - var(--oa-header-offset, 78px) - clamp(1.8rem, 3.8vh, 3rem));
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  justify-items: center;
  align-content: stretch;
  gap: clamp(0.72rem, 1.8vh, 1.12rem);
  padding-top: clamp(0.25rem, 0.8vh, 0.5rem);
  padding-bottom: clamp(0.25rem, 1vh, 0.6rem);
}

#demo-preview .hero__sceneHeader {
  position: relative;
  z-index: 7;
  width: min(100%, 420px);
  display: grid;
  justify-items: center;
  gap: clamp(0.48rem, 1.2vh, 0.8rem);
  transition:
    opacity 0.56s cubic-bezier(0.21, 0.85, 0.14, 1),
    transform 0.56s cubic-bezier(0.21, 0.85, 0.14, 1),
    filter 0.56s cubic-bezier(0.21, 0.85, 0.14, 1);
}

#demo-preview .hero__sceneTitle {
  margin: 0;
  color: rgba(226, 247, 255, 0.96);
  font-size: clamp(1.2rem, 2.1vw, 1.62rem);
  font-weight: 720;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-align: center;
  text-shadow:
    0 0 20px rgba(107, 223, 255, 0.18),
    0 4px 20px rgba(3, 19, 33, 0.42);
}

#demo-preview .hero__switch {
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  width: min(100%, 360px);
  max-width: 100%;
}

#demo-preview .hero__switchBtn {
  flex: 1 1 0;
  min-width: 0;
  white-space: nowrap;
}

#demo-preview .hero__gyroToggle {
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  margin-top: 0.02rem;
}

#demo-preview .hero__sceneViewport {
  position: relative;
  align-self: stretch;
  width: 100%;
  min-height: 0;
  height: auto;
  display: grid;
  place-items: center;
  padding: 0;
  overflow: visible;
  isolation: auto;
}

#demo-preview .hero__sceneViewport::before {
  display: none;
}

.hero__sceneTrace {
  position: fixed;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  z-index: 4600;
  overflow: hidden;
  transition: opacity 0.16s ease;
}

.hero__sceneTraceCanvas {
  display: block;
  width: 100%;
  height: 100%;
}

#demo-preview .scene {
  position: relative;
  width: calc(var(--scene-base-width, 760) * 1px * var(--scene-fit-scale, 1));
  height: calc(var(--scene-base-height, 820) * 1px * var(--scene-fit-scale, 1));
  margin: 0;
  overflow: visible;
  transform-origin: 50% 50%;
  transition:
    opacity 0.56s cubic-bezier(0.21, 0.85, 0.14, 1),
    filter 0.56s cubic-bezier(0.21, 0.85, 0.14, 1);
}

#demo-preview .scene__fit {
  position: relative;
  width: calc(var(--scene-base-width, 760) * 1px);
  height: calc(var(--scene-base-height, 820) * 1px);
  transform: scale(var(--scene-fit-scale, 1));
  transform-origin: top left;
  transform-style: preserve-3d;
}

#demo-preview:not(.is-scene-ready) .hero__sceneHeader {
  opacity: 0;
  filter: blur(16px);
  transform: translate3d(0, 16px, 0) scale(0.985);
  pointer-events: none;
}

#demo-preview:not(.is-scene-ready) .scene {
  opacity: 0;
  filter: blur(18px);
  pointer-events: none;
}

#demo-preview.is-scene-ready .hero__sceneHeader,
#demo-preview.is-scene-ready .scene {
  opacity: 1;
  filter: none;
  pointer-events: auto;
}

#demo-preview .preview,
#demo-preview .metric {
  transition:
    left 0.46s cubic-bezier(0.22, 0.86, 0.17, 1),
    top 0.46s cubic-bezier(0.22, 0.86, 0.17, 1),
    width 0.46s cubic-bezier(0.22, 0.86, 0.17, 1),
    opacity 0.36s ease,
    filter 0.36s ease;
}

#demo-preview .preview--desktop {
  width: 476px;
  aspect-ratio: 16 / 10;
  border-radius: 24px;
}

#demo-preview .preview--mobile {
  width: 218px;
  aspect-ratio: 9 / 19.4;
  border-radius: 30px;
}

#demo-preview .preview--desktop .window__bar {
  gap: 6px;
  padding: 8px 10px;
}

#demo-preview .preview--desktop .window__addr,
#demo-preview .preview--desktop .window__live,
#demo-preview .miniNav__brand,
#demo-preview .miniNav__link,
#demo-preview .miniNav__cta,
#demo-preview .miniHero__btn,
#demo-preview .mSiteBrand__text,
#demo-preview .mSiteBtn,
#demo-preview .mSticky,
#demo-preview .mBook {
  white-space: nowrap;
  word-break: keep-all;
  text-wrap: nowrap;
}

#demo-preview .preview--desktop .window__addr {
  min-height: 22px;
  padding: 0 8px;
  font-size: 11px;
}

#demo-preview .preview--desktop .window__live {
  min-height: 22px;
  padding: 0 7px;
  font-size: 10px;
}

#demo-preview .preview--desktop .window__live span {
  width: 5px;
  height: 5px;
}

#demo-preview .preview--desktop .window__body {
  height: 100%;
  padding: 11px;
  gap: 8px;
  align-content: stretch;
  grid-template-rows: auto auto auto auto minmax(0, 1fr);
}

#demo-preview .preview--desktop .miniNav {
  gap: 6px;
  min-height: 20px;
}

#demo-preview .preview--desktop .miniNav__brandWrap {
  gap: 5px;
  margin-right: 4px;
}

#demo-preview .preview--desktop .miniNav__logo {
  width: 15px;
  height: 15px;
  border-radius: 5px;
}

#demo-preview .preview--desktop .miniNav__brand,
#demo-preview .preview--desktop .miniNav__link,
#demo-preview .preview--desktop .miniNav__cta {
  font-size: 8px;
}

#demo-preview .preview--desktop .miniNav__cta {
  min-height: 17px;
  padding: 0 6px;
}

#demo-preview .preview--desktop .miniHero {
  padding: 7px;
  gap: 7px;
  border-radius: 10px;
}

#demo-preview .preview--desktop .miniHero h3 {
  font-size: 0.8rem;
}

#demo-preview .preview--desktop .miniHero p {
  margin-top: 3px;
  font-size: 8px;
  line-height: 1.22;
}

#demo-preview .preview--desktop .miniHero__actions {
  margin-top: 6px;
  gap: 5px;
}

#demo-preview .preview--desktop .miniHero__btn {
  min-height: 18px;
  padding: 0 8px;
  font-size: 8px;
}

#demo-preview .preview--desktop .miniHero__media {
  gap: 5px;
}

#demo-preview .preview--desktop .miniMedia--main {
  min-height: 34px;
}

#demo-preview .preview--desktop .miniMedia--thumb {
  min-height: 15px;
}

#demo-preview .preview--desktop .miniServices {
  gap: 5px;
}

#demo-preview .preview--desktop .svc {
  min-height: 36px;
  padding: 5px;
  gap: 4px;
  border-radius: 9px;
}

#demo-preview .preview--desktop .svc__thumb {
  min-height: 12px;
  border-radius: 6px;
}

#demo-preview .preview--desktop .svc__title,
#demo-preview .preview--desktop .svc__line {
  height: 3px;
}

#demo-preview .preview--desktop .miniChart {
  min-height: 50px;
  padding: 6px;
  position: relative;
  overflow: hidden;
}

#demo-preview .preview--desktop .miniChart__bars {
  height: 36px;
  gap: 4px;
}

#demo-preview .preview--desktop .miniChart::after {
  content: "";
  position: absolute;
  inset: auto 7px 7px;
  height: 1px;
  background: linear-gradient(90deg, rgba(126, 239, 255, 0), rgba(126, 239, 255, 0.42), rgba(126, 239, 255, 0));
  opacity: 0.66;
}

#demo-preview .preview--desktop .miniDashboard {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.16fr) minmax(0, 0.84fr);
  gap: 5px;
}

#demo-preview .preview--desktop .miniPanel {
  min-height: 0;
  border-radius: 10px;
  padding: 6px;
  border: 1px solid rgba(122, 226, 247, 0.14);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025)),
    radial-gradient(circle at top left, rgba(67, 213, 255, 0.12), transparent 54%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.025),
    inset 0 20px 28px rgba(255, 255, 255, 0.028);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#demo-preview .preview--desktop .miniPanel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

#demo-preview .preview--desktop .miniPanel__tag {
  font-size: 6.4px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(209, 246, 255, 0.74);
}

#demo-preview .preview--desktop .miniPanel__pulse {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(116, 242, 255, 1), rgba(116, 242, 255, 0.18) 72%);
  box-shadow: 0 0 12px rgba(116, 242, 255, 0.34);
}

#demo-preview .preview--desktop .miniPanel__rail {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
}

#demo-preview .preview--desktop .miniPanel__rail span {
  min-height: 18px;
  border-radius: 9px;
  border: 1px solid rgba(122, 226, 247, 0.1);
  background:
    linear-gradient(180deg, rgba(118, 241, 255, 0.16), rgba(118, 241, 255, 0.03)),
    linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0));
  position: relative;
  overflow: hidden;
}

#demo-preview .preview--desktop .miniPanel__rail span::after {
  content: "";
  position: absolute;
  inset: auto 4px 4px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(61, 220, 255, 0.86), rgba(61, 220, 255, 0.2));
}

#demo-preview .preview--desktop .miniPanel__lines {
  display: grid;
  gap: 4px;
  margin-top: auto;
}

#demo-preview .preview--desktop .miniPanel__lines span,
#demo-preview .preview--desktop .miniPanel__stackList span {
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(229, 247, 255, 0.78), rgba(229, 247, 255, 0.14));
}

#demo-preview .preview--desktop .miniPanel__lines span:nth-child(1) {
  width: 88%;
}

#demo-preview .preview--desktop .miniPanel__lines span:nth-child(2) {
  width: 72%;
}

#demo-preview .preview--desktop .miniPanel__lines span:nth-child(3) {
  width: 94%;
}

#demo-preview .preview--desktop .miniPanel--stack {
  justify-content: space-between;
}

#demo-preview .preview--desktop .miniPanel__chipRow {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
}

#demo-preview .preview--desktop .miniPanel__chipRow span {
  min-height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(122, 226, 247, 0.12);
  background: rgba(255, 255, 255, 0.06);
}

#demo-preview .preview--desktop .miniPanel__stackList {
  display: grid;
  gap: 4px;
  margin-top: 1px;
}

#demo-preview .preview--desktop .miniPanel__stackList span:nth-child(1) {
  width: 100%;
}

#demo-preview .preview--desktop .miniPanel__stackList span:nth-child(2) {
  width: 82%;
}

#demo-preview .preview--desktop .miniPanel__stackList span:nth-child(3) {
  width: 92%;
}

#demo-preview .preview--desktop .miniPanel__stackList span:nth-child(4) {
  width: 68%;
}

#demo-preview .preview--desktop .miniPanel__footerBars {
  margin-top: auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
}

#demo-preview .preview--desktop .miniPanel__footerBars span {
  height: 9px;
  border-radius: 999px 999px 4px 4px;
  background: linear-gradient(180deg, rgba(43, 196, 227, 0.88), rgba(43, 196, 227, 0.26));
}

#demo-preview .metric {
  width: 150px;
  min-height: 96px;
  padding: 14px 12px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
  border-color: rgba(111, 229, 255, 0.28);
  background:
    linear-gradient(180deg, rgba(170, 244, 255, 0.09), rgba(111, 229, 255, 0.025)),
    linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.025));
  backdrop-filter: blur(12px) saturate(150%);
  box-shadow:
    inset 0 0 0 1px rgba(224, 248, 255, 0.08),
    inset 0 18px 36px rgba(168, 240, 255, 0.06),
    inset 0 -12px 18px rgba(4, 19, 36, 0.44),
    0 18px 34px rgba(2, 12, 24, 0.22);
}

#demo-preview .metric::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background:
    linear-gradient(135deg, rgba(137, 235, 255, 0.16), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 55%),
    repeating-linear-gradient(0deg, rgba(150, 240, 255, 0.045) 0 1px, transparent 1px 4px);
  opacity: 0.92;
  pointer-events: none;
  z-index: 0;
}

#demo-preview .metric::after {
  width: 34px;
  height: 2px;
  background: linear-gradient(90deg, rgba(108, 232, 255, 0.58), rgba(108, 232, 255, 0));
  opacity: 0.82;
}

#demo-preview .metric__label {
  position: relative;
  z-index: 1;
  margin: 0;
  display: grid;
  place-items: center;
  width: 100%;
  max-width: none;
  font-size: 12px;
  line-height: 1.16;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  white-space: normal;
  word-break: normal;
  overflow-wrap: normal;
  text-wrap: balance;
  color: rgba(225, 248, 255, 0.94);
  text-shadow:
    0 0 16px rgba(108, 232, 255, 0.22),
    0 1px 0 rgba(255, 255, 255, 0.08);
}

#demo-preview .metric__value,
#demo-preview .metric__trend {
  display: none;
}

#demo-preview .scene[data-mode="desktop"] .preview--desktop {
  left: 50%;
  top: 27%;
  width: 476px;
  --base-t: translate3d(-50%, -50%, 124px) scale(1);
  opacity: 1;
  filter: saturate(1);
  z-index: 9;
}

#demo-preview .scene[data-mode="desktop"] .preview--mobile {
  left: 50%;
  top: 29%;
  width: 132px;
  --base-t: translate3d(-50%, -50%, -120px) scale(0.24);
  opacity: 0;
  filter: saturate(0.78);
  z-index: 1;
  pointer-events: none;
}

#demo-preview .scene[data-mode="desktop"] .metric--bookings {
  left: 18%;
  top: 48%;
}

#demo-preview .scene[data-mode="desktop"] .metric--visitors {
  left: 82%;
  top: 48%;
}

#demo-preview .scene[data-mode="desktop"] .metric--payments {
  left: 18%;
  top: 67%;
}

#demo-preview .scene[data-mode="desktop"] .metric--seo {
  left: 82%;
  top: 67%;
}

#demo-preview .scene[data-mode="desktop"] .metric--leads {
  left: 28%;
  top: 86%;
}

#demo-preview .scene[data-mode="desktop"] .metric--revenue {
  left: 72%;
  top: 86%;
}

#demo-preview .scene[data-mode="mobile"] .preview--mobile {
  left: 50%;
  top: 37%;
  width: 218px;
  --base-t: translate3d(-50%, -50%, 122px) scale(1);
  opacity: 1;
  filter: saturate(1);
  z-index: 8;
}

#demo-preview .scene[data-mode="mobile"] .preview--desktop {
  left: 50%;
  top: 22%;
  width: 430px;
  --base-t: translate3d(-50%, -50%, 32px) scale(0.74);
  opacity: 0.34;
  filter: saturate(0.82);
  z-index: 2;
  pointer-events: none;
}

#demo-preview .scene[data-mode="mobile"] .metric--bookings {
  left: 18%;
  top: 53%;
}

#demo-preview .scene[data-mode="mobile"] .metric--visitors {
  left: 82%;
  top: 53%;
}

#demo-preview .scene[data-mode="mobile"] .metric--payments {
  left: 18%;
  top: 71%;
}

#demo-preview .scene[data-mode="mobile"] .metric--seo {
  left: 82%;
  top: 71%;
}

#demo-preview .scene[data-mode="mobile"] .metric--leads {
  left: 28%;
  top: 89%;
}

#demo-preview .scene[data-mode="mobile"] .metric--revenue {
  left: 72%;
  top: 89%;
}

#demo-preview .scene[data-mode="mobile"] .metric::after {
  display: none;
}

#demo-preview.is-scene-compact .metric {
  width: 142px;
  min-height: 90px;
  padding: 12px 10px;
}

#demo-preview.is-scene-compact .metric__label {
  font-size: 10.8px;
}

#demo-preview.is-scene-compact .metric::after {
  width: 18px;
  opacity: 0.28;
}

#demo-preview.is-scene-compact .preview--desktop {
  width: 452px;
}

#demo-preview.is-scene-compact .preview--mobile {
  width: 204px;
}

#demo-preview.is-scene-xcompact .metric {
  width: 132px;
  min-height: 84px;
  padding: 11px 9px;
}

#demo-preview.is-scene-xcompact .metric__label {
  font-size: 9.8px;
}

#demo-preview.is-scene-xcompact .metric::after {
  display: none;
}

#demo-preview.is-scene-xcompact .preview--desktop {
  width: 432px;
}

#demo-preview.is-scene-xcompact .preview--mobile {
  width: 192px;
}

#demo-preview.is-scene-xcompact .preview--desktop .window__addr,
#demo-preview.is-scene-xcompact .preview--desktop .window__live {
  font-size: 9px;
}

#demo-preview.is-scene-xcompact .preview--desktop .miniNav__brand,
#demo-preview.is-scene-xcompact .preview--desktop .miniNav__link,
#demo-preview.is-scene-xcompact .preview--desktop .miniNav__cta {
  font-size: 7px;
}

#demo-preview.is-scene-xcompact .preview--desktop .miniHero h3 {
  font-size: 0.76rem;
}

#demo-preview.is-scene-xcompact .preview--desktop .miniHero p {
  font-size: 8px;
}

#demo-preview.is-scene-xcompact .preview--desktop .miniHero__btn {
  font-size: 8px;
}

@media (max-width: 720px) {
  #demo-preview .hero__sceneHeader {
    width: min(100%, 360px);
  }

  #demo-preview .hero__sceneTitle {
    font-size: clamp(1.08rem, 4.9vw, 1.42rem);
  }

  #demo-preview .hero__sceneViewport {
    min-height: clamp(390px, 60svh, 640px);
    padding: 10px 8px;
  }
}

@keyframes sceneTraceMeasure {
  from {
    stroke-dashoffset: 100;
  }

  to {
    stroke-dashoffset: 0;
  }
}

@keyframes sceneTraceActive {
  from {
    stroke-dashoffset: 100;
  }

  to {
    stroke-dashoffset: 0;
  }
}

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

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