/* Pixai centered hero. Scoped styles; no shared website overrides. */
.pixai-centered-hero,
.pixai-centered-hero * { box-sizing: border-box; }
.pixai-centered-hero {
  --hero-ink: #00000d;
  --dot-pitch: 17px;
  --hero-top: clamp(160px, calc(14svh + 28px), 208px);
  --hero-bottom: clamp(64px, 8svh, 120px);
  --hero-media-gap: 24px;
  /* Use the space below the actual text, including the bottom glow clearance.
     Very short/zoomed viewports may scroll rather than make the sphere tiny. */
  --hero-bubble-room: max(160px, calc(100svh - var(--hero-top) - var(--hero-bottom) - var(--hero-intro-height, 320px) - var(--hero-media-gap)));
  position: relative;
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
  width: 100%;
  min-height: 100svh;
  padding: var(--hero-top) 0 var(--hero-bottom);
  color: #edf0f8;
  background: var(--hero-ink);
}
.pixai-centered-hero .centered-content { position: relative; z-index: 1; }
.pixai-centered-hero .centered-intro { position: relative; z-index: 2; text-align: center; }
.pixai-centered-hero .centered-headline {
  margin: 0 auto;
  max-width: 1240px;
  font-size: clamp(34px, 4.5vw, 72px);
  line-height: 1.10;
  letter-spacing: normal;
  font-weight: 700;
}
.pixai-centered-hero .centered-title-line {
  display: block;
  padding-bottom: .16em;
  margin-bottom: -.16em;
  background: linear-gradient(180deg, #f0f2fa 12%, #c3c3d4 92%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.pixai-centered-hero .centered-title-accent {
  display: block;
  width: fit-content;
  margin-inline: auto;
  padding-bottom: .16em;
  margin-bottom: -.16em;
  background: linear-gradient(110deg, #00dbea, #0084ff 85%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.pixai-centered-hero .centered-description {
  max-width: 540px;
  margin: 22px auto 0;
  color: rgb(230 233 255 / 65%);
  font-size: clamp(16px, 1.45vw, 21px);
  font-weight: 400;
  line-height: 1.5;
  text-wrap: balance;
}
.pixai-centered-hero .centered-cta { margin: 24px auto 0; width: fit-content; }
.pixai-centered-hero .cta {
  --pad: 20px;
  --slot: 19px;
  --grow: 10px;
  --spring: cubic-bezier(0.25, 1.1, 0.9, 1);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 40px;
  padding-inline: var(--pad);
  border: 0;
  border-radius: 9999px;
  color: #070039;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Inter, sans-serif;
  font-size: 14px;
  line-height: 14px;
  font-weight: 500;
  letter-spacing: normal;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  background-image: linear-gradient(160deg, #00ebff 0%, #0063ff 100%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: 0 0;
  box-shadow: 0 0 10px rgb(60 123 255 / .5), inset 0 1px 0 rgb(255 255 255 / .32);
  outline: 2px solid transparent;
  outline-offset: 2px;
  transition: background-size .5s ease, background-position .5s ease,
    box-shadow .4s ease, opacity .3s ease;
}
.pixai-centered-hero .cta[data-size="lg"] { --pad: 24px; height: 48px; font-size: 16px; line-height: 16px; }
@supports (transition-timing-function: linear(0, 1)) {
  .pixai-centered-hero .cta {
    --spring: linear(0, .137 2.5%, .25 5%, .348 7.5%, .432 10%, .573 15%, .686 20%,
      .778 25%, .854 30%, .916 35%, .966 40%, 1.04 50%, 1.083 60%, 1.101 70%,
      1.102 75%, 1.1 80%, 1.038 85%, 1.012 90%, 1.002 95%, 1);
  }
}
.pixai-centered-hero .cta__chevron {
  display: flex;
  margin-inline-start: -2px;
  opacity: 0;
  transform: translateX(-15px) scale(0);
  transition: transform .3s ease, opacity .3s ease;
}
.pixai-centered-hero .cta:hover .cta__chevron,
.pixai-centered-hero .cta:focus-visible .cta__chevron { opacity: 1; transform: none; }
@media (hover: hover) {
  .pixai-centered-hero .cta[data-chevron] {
    padding-inline-end: calc(var(--pad) - var(--slot));
    transition: background-size .5s ease, background-position .5s ease,
      box-shadow .4s ease, opacity .3s ease,
      padding-inline-end .5s var(--spring), margin-inline-end .5s var(--spring);
  }
  .pixai-centered-hero .cta[data-chevron]:hover,
  .pixai-centered-hero .cta[data-chevron]:focus-visible {
    padding-inline-end: calc(var(--pad) - var(--slot) + var(--grow));
    margin-inline-end: calc(var(--grow) * -1);
  }
  .pixai-centered-hero .cta:hover {
    background-size: 150% 100%;
    background-position: 100% 0;
    box-shadow: 0 0 18px rgb(60 123 255 / .62), inset 0 1px 0 rgb(255 255 255 / .32);
  }
}
@media (hover: none) { .pixai-centered-hero .cta__chevron { display: none; } }
.pixai-centered-hero .cta:active { box-shadow: 0 0 6px rgb(60 123 255 / .45), inset 0 1px 3px rgb(0 3 64 / .28); }
.pixai-centered-hero .cta:focus-visible { outline-color: #00e8ff; }
.pixai-centered-hero .cta:disabled { box-shadow: none; opacity: .5; pointer-events: none; }
.pixai-centered-hero .cta[aria-busy="true"] { opacity: .7; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .pixai-centered-hero .cta,
  .pixai-centered-hero .cta__chevron { transition: none; }
}
.pixai-centered-hero .centered-visual {
  position: relative;
  width: min(100%, 72vw, 66svh, 800px, var(--hero-bubble-room));
  aspect-ratio: 1;
  margin: var(--hero-media-gap) auto 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.pixai-centered-hero .sphere-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: var(--sphere-presence, 1);
  transform: scale(calc(.9 + var(--sphere-presence, 1) * .1));
  transition: opacity .2s linear, transform .35s ease-out;
}
.pixai-centered-hero .sphere-stage[data-offscreen=true] { visibility: hidden; transition: none; }
.pixai-centered-hero .sphere-video,
.pixai-centered-hero .sphere-products { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pixai-centered-hero .sphere-video { object-fit: contain; mask-image: radial-gradient(circle, #000 0 44%, transparent 51%); }
.pixai-centered-hero .sphere-products { opacity: 0; transition: opacity .4s ease-out; }
.pixai-centered-hero .sphere-stage[data-ready=true] .sphere-products { opacity: 1; }
.pixai-centered-hero .sphere-stage[data-ready=true] .sphere-video { opacity: 0; }
.pixai-centered-hero .sphere-fallback {
  position: absolute; width: 61.446%; height: 61.446%; left: 19.277%; top: 19.277%;
  object-fit: contain; opacity: 0; filter: blur(4px);
}
.pixai-centered-hero .sphere-stage[data-fallback=true] .sphere-fallback { opacity: .4; }
.pixai-centered-hero .sphere-stage[data-fallback=true] .sphere-products { display: none; }
.pixai-centered-hero .sphere-stage[data-fallback=true] .sphere-video { opacity: 1; }
/* One full-width atmosphere. The bottom feather is shared by every effect. */
.pixai-centered-hero .centered-atmosphere {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  contain: paint;
  mask-image: linear-gradient(transparent, #000 10%, #000 74%, transparent 100%);
}
.pixai-centered-hero .centered-dots {
  position: absolute;
  inset: 0;
  opacity: .44;
  background: radial-gradient(circle, rgb(82 103 192 / 32%) .7px, transparent 1px) 50% 0 / var(--dot-pitch) var(--dot-pitch);
  mask-image: radial-gradient(ellipse 78% 63% at 50% 60%, #000 18%, transparent 88%);
}
.pixai-centered-hero .centered-dot-mask {
  position: absolute;
  inset: 0;
  mask-image: radial-gradient(circle, #000 .7px, transparent 1px);
  mask-size: var(--dot-pitch) var(--dot-pitch);
  mask-position: 50% 0;
}
.pixai-centered-hero .centered-dot-light,
.pixai-centered-hero .centered-wash {
  position: absolute;
  inset: -10%;
  background: radial-gradient(ellipse 32% 37% at 37% 59%, #7455fa, transparent 78%), radial-gradient(ellipse 34% 39% at 64% 57%, #178afb, transparent 78%);
  opacity: .28;
  transition: transform 900ms linear, opacity 900ms linear;
}
.pixai-centered-hero .centered-wash {
  opacity: .065;
  background: radial-gradient(ellipse 36% 38% at 41% 65%, #6823b3, transparent 78%), radial-gradient(ellipse 30% 40% at 60% 64%, #1748b0, transparent 80%);
}
.pixai-centered-hero .centered-reveal {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(ellipse 65% 66% at 50% 59%, #834fff 0%, #345ed6 30%, transparent 76%);
}
.pixai-centered-hero[data-atmosphere=still] .centered-dot-light,
.pixai-centered-hero[data-atmosphere=still] .centered-wash { transition: none; }
@media (prefers-reduced-motion: no-preference) {
  .pixai-centered-hero .centered-intro { animation: pixai-centered-open 650ms cubic-bezier(.22, 1, .36, 1) backwards; }
  .pixai-centered-hero .centered-visual { animation: pixai-centered-media 850ms cubic-bezier(.22, 1, .36, 1) 70ms backwards; }
}
@keyframes pixai-centered-open { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes pixai-centered-media { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: none; } }
/* Keep the entire sphere in view on ordinary laptop screens. Taller screens
   retain the more generous composition, and very short screens may scroll. */
@media (min-width: 1024px) and (max-height: 1100px) {
  .pixai-centered-hero { --hero-top: 140px; --hero-bottom: 40px; --hero-media-gap: 20px; }
  .pixai-centered-hero .centered-headline { font-size: clamp(42px, 4vw, 57px); }
  .pixai-centered-hero .centered-description { margin-top: 16px; font-size: 18px; }
  .pixai-centered-hero .centered-cta { margin-top: 18px; }
  .pixai-centered-hero .centered-visual { width: min(100%, 64vw, 680px, var(--hero-bubble-room)); }
}
@media (max-width: 1023px) {
  .pixai-centered-hero { --hero-top: 146px; }
  .pixai-centered-hero .centered-headline { font-size: clamp(34px, 5.3vw, 53px); }
  .pixai-centered-hero .centered-description { max-width: 480px; font-size: 17px; }
  .pixai-centered-hero .centered-visual { width: min(100%, 80vw, 62svh, 650px, var(--hero-bubble-room)); }
}
@media (max-width: 639px) {
  .pixai-centered-hero { --dot-pitch: 15px; --hero-top: 140px; --hero-bottom: 44px; --hero-media-gap: 22px; }
  .pixai-centered-hero .centered-headline { font-size: clamp(20px, 6.4vw, 36px); line-height: 1.14; }
  .pixai-centered-hero .centered-title-line { white-space: nowrap; }
  .pixai-centered-hero .centered-description { max-width: 340px; margin-top: 17px; font-size: 15px; line-height: 1.5; }
  .pixai-centered-hero .centered-cta { margin-top: 20px; }
  .pixai-centered-hero .cta[data-size="lg"] { --pad: 20px; height: 40px; font-size: 14px; line-height: 14px; }
  .pixai-centered-hero .centered-visual { width: min(100%, 430px, var(--hero-bubble-room)); }
  .pixai-centered-hero .centered-dots { opacity: .34; }
}
@media (max-width: 639px) and (max-height: 680px) {
  .pixai-centered-hero { --hero-top: 122px; --hero-bottom: 32px; --hero-media-gap: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .pixai-centered-hero .sphere-stage,
  .pixai-centered-hero .sphere-products,
  .pixai-centered-hero .centered-dot-light,
  .pixai-centered-hero .centered-wash { transition: none; }
  .pixai-centered-hero .sphere-stage { transform: none; }
}
.pixai-sphere-inspection { position: fixed; z-index: 10000; bottom: 10px; left: 10px; max-width: min(640px, calc(100% - 20px)); padding: 10px; border: 1px solid #354566; border-radius: 8px; background: #071328ed; color: #dbe8ff; font: 11px/1.5 monospace; overflow-wrap: anywhere; }