:root {
  --navy: #102a43;
  --navy-deep: #0a1929;
  --blue-mid: #243b53;
  --blue-soft: #334e68;
  --blue-glow: #486581;
  --mint: #3ebd93;
  --text: #f0f4f8;
  --text-muted: #bcccdc;
  --font-tagline: clamp(1.6rem, 0.9rem + 2.75vw, 3.85rem);
  --font-support: clamp(1.2rem, 0.75rem + 1.55vw, 2.45rem);
  --logo-width: clamp(280px, 46vw, 780px);
  --logo-max-height: clamp(145px, 22vh, 380px);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  min-height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto;
  font-family: "Outfit", system-ui, -apple-system, sans-serif;
  background-color: var(--navy-deep);
  color: var(--text);
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.sky-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: linear-gradient(180deg, var(--navy-deep) 0%, var(--navy) 58%, #081422 100%);
}

.sky-backdrop::before,
.sky-backdrop::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform, opacity;
}

.sky-backdrop::before {
  width: 165%;
  height: 95%;
  left: -32%;
  top: -42%;
  background: radial-gradient(ellipse at center, var(--blue-mid) 0%, var(--blue-soft) 32%, transparent 70%);
  opacity: 0.68;
  animation: sky-wash-top 7.5s ease-in-out infinite alternate;
}

.sky-backdrop::after {
  width: 130%;
  height: 75%;
  right: -35%;
  bottom: -28%;
  background: radial-gradient(ellipse at center, var(--blue-mid) 0%, rgba(16, 42, 67, 0.45) 44%, transparent 74%);
  opacity: 0.52;
  animation: sky-wash-bottom 9s ease-in-out infinite alternate-reverse;
}

@keyframes sky-wash-top {
  from {
    opacity: 0.48;
    transform: translate3d(-10%, -6%, 0) scale(1);
  }
  to {
    opacity: 0.72;
    transform: translate3d(14%, 22%, 0) scale(1.18);
  }
}

@keyframes sky-wash-bottom {
  from {
    opacity: 0.38;
    transform: translate3d(8%, 0, 0) scale(1.05);
  }
  to {
    opacity: 0.58;
    transform: translate3d(-16%, -14%, 0) scale(1.22);
  }
}

.bg {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(48px);
  opacity: 0.38;
}

.blob-a {
  width: min(90vw, 520px);
  height: min(90vw, 520px);
  background: radial-gradient(circle at 30% 30%, #627d98, #243b53 70%);
  top: -12%;
  left: -18%;
}

.blob-b {
  width: min(75vw, 440px);
  height: min(75vw, 440px);
  background: radial-gradient(circle at 60% 40%, #486581, #102a43 65%);
  top: 8%;
  right: -22%;
}

.blob-c {
  width: min(65vw, 380px);
  height: min(65vw, 380px);
  background: radial-gradient(circle at 50% 50%, rgba(62, 189, 147, 0.45), transparent 70%);
  bottom: -8%;
  left: 10%;
}

.blob-d {
  width: min(55vw, 320px);
  height: min(55vw, 320px);
  background: radial-gradient(circle at 40% 60%, #334e68, transparent 72%);
  bottom: 5%;
  right: 5%;
}

.decor {
  position: absolute;
  display: block;
  margin: 0;
  pointer-events: none;
}

.decor img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 24px 48px rgba(0, 0, 0, 0.28));
}

.decor-blue {
  --decor-anchor-x: -44%;
  width: min(58vw, 440px);
  top: -6%;
  left: 0;
  transform: translate(var(--decor-anchor-x), 0) rotate(-2deg);
}

.decor-mint {
  --decor-anchor-x: 38%;
  width: min(50vw, 380px);
  bottom: -10%;
  right: 0;
  left: auto;
  transform: translate(var(--decor-anchor-x), 0) rotate(2deg);
}

@media (prefers-reduced-motion: reduce) {
  .sky-backdrop::before,
  .sky-backdrop::after {
    animation: none !important;
    opacity: 0.58;
    transform: none;
  }

  .blob,
  .decor-blue,
  .decor-mint,
  .char-bubble,
  .char-betty,
  .char-motion {
    animation: none !important;
  }

  .char-bubble,
  .char-betty,
  .char-motion {
    opacity: 1;
    transform: none;
  }

  .decor-blue {
    transform: translate(var(--decor-anchor-x), 0) rotate(-2deg);
  }

  .decor-mint {
    transform: translate(var(--decor-anchor-x), 0) rotate(2deg);
  }

}

.hero {
  position: relative;
  z-index: 2;
  height: 100dvh;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: stretch;
  justify-items: center;
  padding: max(12px, env(safe-area-inset-top)) 16px max(4px, env(safe-area-inset-bottom));
  text-align: center;
  overflow-x: hidden;
  overflow-y: hidden;
  box-sizing: border-box;
}

.hero-stack {
  width: min(96vw, 920px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 0;
  padding-bottom: 0.25rem;
}

.logo-wrap {
  display: block;
  width: var(--logo-width);
  margin: 0;
}

.logo {
  width: 100%;
  height: auto;
  max-height: var(--logo-max-height);
  object-fit: contain;
  filter: drop-shadow(0 12px 40px rgba(0, 0, 0, 0.35));
}

.tagline {
  margin: 0.35rem 0 0;
  font-size: var(--font-tagline);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text);
  line-height: 1.15;
}

.support-rotator {
  min-height: clamp(3.35rem, 2.5rem + 2.8vh, 5rem);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: min(92vw, 40rem);
  margin: 0.2rem 0 0.45rem;
  padding: 0 0.5rem;
}

.support {
  margin: 0;
  font-size: var(--font-support);
  font-weight: 600;
  color: var(--text-muted);
  line-height: 1.45;
}

.support-typed {
  display: inline;
  white-space: normal;
  word-spacing: 0;
  transition: opacity 0.58s ease, transform 0.58s ease;
}

.support.is-fading-out .support-typed {
  opacity: 0;
  transform: translateY(-0.2em);
}

.support.is-fading-out .support-cursor {
  opacity: 0 !important;
  animation: none;
}

.support-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.2em);
  transition: opacity 0.16s ease, transform 0.16s ease;
  vertical-align: baseline;
}

.support-char--space {
  min-width: 0.34em;
  opacity: 0;
}

.support-char.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.support-char.is-deleting {
  opacity: 0;
  transform: translateY(-0.14em);
}

.support-cursor {
  display: inline-block;
  width: 0.085em;
  min-width: 2px;
  height: 0.95em;
  margin-left: 0.05em;
  vertical-align: -0.08em;
  border-radius: 1px;
  background: var(--text-muted);
  opacity: 0;
}

.support.is-typing .support-cursor {
  opacity: 0.85;
  animation: cursor-blink 0.95s step-end infinite;
}

@keyframes cursor-blink {
  50% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .support-cursor {
    display: none;
  }

  .support-char {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.characters {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  max-width: 920px;
  height: clamp(250px, 42vh, 460px);
  margin-top: 0;
  margin-bottom: 0;
  overflow: visible;
}

.char-glow {
  position: absolute;
  left: 50%;
  bottom: 8%;
  width: min(70vw, 520px);
  height: 42%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(72, 101, 129, 0.35) 0%, transparent 72%);
  pointer-events: none;
  z-index: 0;
}

.char {
  position: absolute;
  margin: 0;
  bottom: 0;
  z-index: 1;
  will-change: transform;
  display: flex;
  align-items: flex-end;
}

.char-motion {
  display: block;
  width: 100%;
  will-change: transform;
}

.char picture {
  display: block;
  width: 100%;
  line-height: 0;
}

.char img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  object-position: bottom center;
}

.char-bubble {
  --char-enter-dur: 1.05s;
  --char-enter-delay: 0s;
  left: 8%;
  bottom: clamp(44px, 8vh, 76px);
  width: min(38vw, 260px);
  max-height: 88%;
  z-index: 2;
  transform-origin: bottom center;
  animation: enter-char-opacity var(--char-enter-dur) cubic-bezier(0.22, 1, 0.36, 1) var(--char-enter-delay) both;
}

.char-bubble .char-motion {
  transform-origin: bottom center;
  animation: enter-bubble-motion var(--char-enter-dur) cubic-bezier(0.22, 1, 0.36, 1) var(--char-enter-delay) both;
}

.char-bubble .char-motion.is-idle {
  animation: float-bubble 7.6s cubic-bezier(0.42, 0.08, 0.48, 0.96) infinite;
}

.char-betty {
  --char-enter-dur: 1.15s;
  --char-enter-delay: 0.12s;
  right: clamp(8px, 3.5vw, 36px);
  bottom: 0;
  width: min(54vw, 400px);
  max-height: 100%;
  z-index: 3;
  transform-origin: 82% 100%;
  animation: enter-char-opacity var(--char-enter-dur) cubic-bezier(0.22, 1, 0.36, 1) var(--char-enter-delay) both;
}

.char-betty .char-motion {
  transform-origin: 82% 100%;
  animation: enter-betty-motion var(--char-enter-dur) cubic-bezier(0.22, 1, 0.36, 1) var(--char-enter-delay) both;
}

.char-betty .char-motion.is-idle {
  animation: rock-betty 4.4s cubic-bezier(0.34, 0, 0.24, 1) 0.85s infinite;
}

.char-bubble img {
  filter: drop-shadow(0 18px 36px rgba(0, 0, 0, 0.22));
}

.char-betty img {
  filter: drop-shadow(0 18px 36px rgba(0, 0, 0, 0.22));
  transform: translateY(7%);
  object-position: 50% 100%;
}

@keyframes enter-char-opacity {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes enter-bubble-motion {
  from {
    transform: translate3d(0, 28px, 0) scale(0.94);
  }
  to {
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes enter-betty-motion {
  from {
    transform: translate3d(0, 22px, 0) scale(0.96);
  }
  to {
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes float-bubble {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(-0.6deg) scale(1);
  }
  38% {
    transform: translate3d(2px, -22px, 0) rotate(0.9deg) scale(1.072);
  }
  62% {
    transform: translate3d(-1px, -8px, 0) rotate(-0.4deg) scale(1.028);
  }
}

@keyframes rock-betty {
  0%,
  100% {
    transform: rotate(0deg) translate3d(0, 0, 0);
  }
  28% {
    transform: rotate(-2.4deg) translate3d(-1px, 0, 0);
  }
  72% {
    transform: rotate(1.8deg) translate3d(1px, 0, 0);
  }
}

@media (min-width: 768px) {
  .hero-stack {
    gap: 0.45rem;
  }

  .characters {
    height: clamp(280px, 44vh, 480px);
    max-width: 960px;
  }

  .char-bubble {
    left: 14%;
    width: min(280px, 28vw);
  }

  .char-betty {
    right: clamp(12px, 2.5vw, 32px);
    width: min(420px, 36vw);
  }
}

@media (max-width: 767px) {
  :root {
    --logo-width: min(92vw, 420px);
    --logo-max-height: clamp(96px, 16dvh, 172px);
    --font-tagline: clamp(1.35rem, 0.8rem + 2.2vw, 2.05rem);
    --font-support: clamp(1.05rem, 0.7rem + 1.2vw, 1.35rem);
  }

  .hero-stack {
    gap: 0.2rem;
    padding-bottom: 0;
  }

  .support-rotator {
    min-height: clamp(2.5rem, 1.85rem + 2dvh, 3.25rem);
    margin: 0.1rem 0 0.2rem;
  }

  /* Keep decor subtle so hero mascots read clearly on small screens. */
  .decor-blue {
    --decor-anchor-x: -52%;
    width: min(42vw, 260px);
    top: 4%;
  }

  .decor-mint {
    --decor-anchor-x: 42%;
    width: min(36vw, 220px);
    bottom: -4%;
    opacity: 0.75;
  }

  .characters {
    height: clamp(228px, 36dvh, 310px);
    max-height: 40dvh;
  }

  .char-bubble {
    left: 6%;
    bottom: clamp(20px, 5dvh, 48px);
    width: min(36vw, 198px);
    max-height: 78%;
  }

  .char-betty {
    right: clamp(10px, 3vw, 22px);
    bottom: 0;
    left: auto;
    width: min(58vw, 300px);
    max-height: 100%;
  }

  .char-betty img {
    transform: translateY(4%);
    object-position: 58% 100%;
  }
}

@media (max-width: 420px) {
  .characters {
    height: clamp(210px, 34dvh, 280px);
  }

  .char-bubble {
    left: 4%;
    width: min(34vw, 176px);
  }

  .char-betty {
    right: clamp(6px, 2vw, 14px);
    width: min(56vw, 268px);
  }
}

@media (max-width: 767px) and (max-height: 640px) {
  :root {
    --logo-max-height: clamp(76px, 13dvh, 118px);
  }

  .characters {
    height: clamp(196px, 32dvh, 248px);
  }

  .char-bubble {
    bottom: clamp(14px, 3.5dvh, 36px);
    max-height: 72%;
  }

  .char-betty {
    width: min(54vw, 252px);
  }
}

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