/* Pixai panel hero — panel-20260915-4. Keep outside the EE compression plugin. */
.pixai-sphere-hero{isolation:isolate;background:#00000d;width:100%;min-height:660px;padding-top:0;position:relative;overflow:hidden;height:max(100svh,660px)!important}.pixai-sphere-hero .sphere-atmosphere{pointer-events:none;background:radial-gradient(#16103a36,#00000d00 51%);position:absolute;top:0;bottom:0;left:0;right:0}.pixai-sphere-hero .sphere-stage{aspect-ratio:1;width:min(61vw,85svh,960px);transform:translate(-50%, -50%) scale(calc(.82 + var(--sphere-presence,1) * .18));opacity:var(--sphere-presence,1);pointer-events:none;transition:opacity .18s linear,transform .3s cubic-bezier(.2,.65,.3,1);position:absolute;top:50%;left:50%}.pixai-sphere-hero .sphere-stage[data-offscreen=true]{visibility:hidden;transition:none}.pixai-sphere-hero .sphere-video{object-fit:contain;width:100%;height:100%;position:absolute;top:0;bottom:0;left:0;right:0;-webkit-mask-image:radial-gradient(circle,#000 0 46%,#0000 53%);mask-image:radial-gradient(circle,#000 0 46%,#0000 53%)}.pixai-sphere-hero .sphere-products{opacity:0;width:100%;height:100%;transition:opacity .35s;display:block;position:absolute;top:0;bottom:0;left:0;right:0}.pixai-sphere-hero .sphere-stage[data-ready=true] .sphere-products{opacity:1}.pixai-sphere-hero .sphere-stage[data-ready=true] .sphere-video{opacity:0}.pixai-sphere-hero .sphere-fallback{object-fit:contain;opacity:0;filter:blur(4px);width:66%;height:66%;position:absolute;top:17%;left:17%}.pixai-sphere-hero .sphere-stage[data-fallback=true] .sphere-fallback{opacity:.48}.pixai-sphere-hero .sphere-stage[data-fallback=true] .sphere-products{display:none}.pixai-sphere-hero .sphere-stage[data-fallback=true] .sphere-video{opacity:1}.pixai-sphere-hero .sphere-copy-shade{z-index:2;pointer-events:none;background:linear-gradient(90deg,#00000d 0%,#00000de8 28%,#00000d4d 49%,#00000d00 67%);position:absolute;top:0;bottom:0;left:0;right:0}.pixai-sphere-hero .sphere-edge-fade{z-index:3;pointer-events:none;height:17%;position:absolute;left:0;right:0}.pixai-sphere-hero .sphere-edge-fade--top{background:linear-gradient(#00000d,#00000d00);top:0}.pixai-sphere-hero .sphere-edge-fade--bottom{background:linear-gradient(#00000d00,#00000d);height:19%;bottom:0}.pixai-sphere-hero .pixai-sphere-foreground{z-index:10;align-items:center;height:100%;display:flex;position:relative}@media (max-width:1100px) and (min-width:768px){.pixai-sphere-hero .sphere-stage{width:min(74vw,75svh)}}@media (max-width:767px){.pixai-sphere-hero{min-height:480px;height:max(100svh,480px)!important}.pixai-sphere-hero .sphere-stage{filter:blur(4px);width:min(105vw,430px)}.pixai-sphere-hero .pixai-sphere-content{margin-top:0}.pixai-sphere-hero .sphere-copy-shade{background:radial-gradient(at 30%,#00000d99 0%,#00000d66 48%,#00000d14 78%)}.pixai-sphere-hero .sphere-edge-fade--top{height:12%}}@media (max-width:767px) and (max-height:720px){.pixai-sphere-hero .sphere-edge-fade--bottom{height:9%}}@media (max-width:1024px) and (max-height:500px) and (orientation:landscape){.pixai-sphere-hero .sphere-stage{filter:blur(4px);width:min(48vw,90svh)}.pixai-sphere-hero .pixai-sphere-content{margin-top:0}}@media (prefers-reduced-motion:reduce){.pixai-sphere-hero .sphere-stage{transition:none;transform:translate(-50%,-50%)}.pixai-sphere-hero .sphere-products{transition:none}}.pixai-sphere-inspection{z-index:10000;color:#eff5ff;overflow-wrap:anywhere;background:#10233df5;border:1px solid #47708a;border-radius:8px;max-width:calc(100% - 24px);padding:12px;font:11px/1.6 monospace;position:fixed;bottom:12px;left:12px}
/*$vite$:1*/
/* Prototype-only layout. Pixai's source styles and the v12 hero bundle are unchanged. */
.panel-preview *, .panel-preview *::before, .panel-preview *::after { box-sizing: border-box; }
.panel-preview .pixai-panel-hero {
  min-height: 100svh;
  padding: clamp(72px, calc(4vw + 24px), 104px) max(24px, 8.2vw) clamp(48px, 5.2vw, 100px);
  background: radial-gradient(ellipse at 8% 9%, #080329 0, #00000d00 58%);
}
.panel-preview .panel-intro {
  max-width: 1320px;
  width: 84%;
  margin: 0 auto clamp(44px, 3.4vw, 68px);
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  column-gap: clamp(64px, 10vw, 200px);
  align-items: end;
}
.panel-preview .panel-headline {
  margin: 0;
  font-size: clamp(40px, 3.5vw, 68px);
  line-height: 1.07;
  letter-spacing: -0.035em;
  font-weight: 700;
}
.panel-preview .panel-headline > span {
  display: block;
  /* Include descenders in every line's gradient without changing line spacing. */
  padding-bottom: .15em;
  margin-bottom: -.15em;
}
.panel-preview .panel-headline > span:not(.panel-headline-accent) {
  background: -webkit-linear-gradient(rgba(255,255,255,.85), rgba(255,255,255,.65));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.panel-preview .panel-headline-accent {
  width: fit-content;
}
.panel-preview .panel-summary { max-width: 440px; padding-bottom: 3px; }
.panel-preview .panel-description {
  margin: 0 0 26px;
  font-size: clamp(16px, 1.04vw, 20px);
  line-height: 1.5;
  color: rgb(255 255 255 / 70%);
  font-weight: 400;
}
.panel-preview .panel-cta { width: fit-content; }
.panel-preview .panel-cta-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 0 12px 20px;
  border-radius: 9999px;
  font-size: 14px;
  line-height: 20px;
  text-decoration: none;
  white-space: nowrap;
}
.panel-preview .panel-cta-icon { display: inline-flex; align-items: center; margin-left: 4px; }
/* One continuous, feathered halo, colored by the bubble's moving rim. */
.panel-preview .panel-frame {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  border-radius: 10px;
}
.panel-preview .panel-ambient {
  --halo-spread: 48px;
  --halo-radius: calc(var(--halo-spread) + 10px);
  --halo-size: calc(var(--halo-radius) * 2);
  position: absolute;
  z-index: -1;
  inset: calc(-1 * var(--halo-spread));
  pointer-events: none;
  /* Matching edge/corner falloff gives a seamless rounded-rectangle halo.
     This static mask needs no blur filter or animated geometry. */
  --halo-edge: transparent 0, #00000014 calc(var(--halo-spread) * .375),
    #00000059 calc(var(--halo-spread) * .75), #000 var(--halo-spread);
  --halo-corner: #000 10px, #00000059 calc(10px + var(--halo-spread) * .25),
    #00000014 calc(10px + var(--halo-spread) * .625), transparent var(--halo-radius);
  mask-image:
    radial-gradient(circle at bottom right, var(--halo-corner)),
    linear-gradient(to bottom, var(--halo-edge)),
    radial-gradient(circle at bottom left, var(--halo-corner)),
    linear-gradient(to left, var(--halo-edge)),
    radial-gradient(circle at top left, var(--halo-corner)),
    linear-gradient(to top, var(--halo-edge)),
    radial-gradient(circle at top right, var(--halo-corner)),
    linear-gradient(to right, var(--halo-edge));
  mask-size:
    var(--halo-radius) var(--halo-radius), calc(100% - var(--halo-size)) var(--halo-radius),
    var(--halo-radius) var(--halo-radius), var(--halo-radius) calc(100% - var(--halo-size)),
    var(--halo-radius) var(--halo-radius), calc(100% - var(--halo-size)) var(--halo-radius),
    var(--halo-radius) var(--halo-radius), var(--halo-radius) calc(100% - var(--halo-size));
  mask-position: top left, top center, top right, right center,
    bottom right, bottom center, bottom left, left center;
  mask-repeat: no-repeat;
}
.panel-preview .panel-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 650ms linear;
}
.panel-preview .panel-frame:has(> .panel-scene[data-motion='still']) .panel-glow {
  transition: none;
}
.panel-preview .panel-glow-pop {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(120deg, #4484ff, #974aff 45%, #568dff);
}
.panel-preview .panel-scene {
  width: 100%;
  max-width: 1600px;
  height: auto !important;
  min-height: 0;
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: #00000d;
  overflow: hidden;
  container-type: size;
}
.panel-preview .panel-dots {
  --dot-pitch: 14px;
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, rgb(31 113 244 / 26%) .8px, transparent 1px);
  background-size: var(--dot-pitch) var(--dot-pitch);
  mask-image: radial-gradient(ellipse at 50% 50%, #000 25%, transparent 74%);
}
.panel-preview .panel-dot-light {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Exactly aligned with the base pattern: light changes only the dots. */
  mask-image: radial-gradient(circle, #000 .8px, transparent 1px);
  mask-size: var(--dot-pitch) var(--dot-pitch);
  mask-repeat: repeat;
}
.panel-preview .panel-scene .sphere-stage {
  /* Size follows the panel rather than the page. */
  width: min(96cqh, 96cqw);
  top: 50%;
  left: 50%;
  filter: none;
}
.panel-preview .panel-scene .sphere-fallback {
  width: 61.446%;
  height: 61.446%;
  left: 19.277%;
  top: 19.277%;
}
.panel-preview .panel-scene-fade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(#00000d66, transparent 14%, transparent 85%, #00000d66);
}
.panel-preview .panel-cta-link:focus-visible { outline: 2px solid #00e7ff; outline-offset: 5px; }
/* A single entrance on page load. Playback starts independently underneath.
   Backwards fill leaves no retained transform/compositing layer afterward. */
@media (prefers-reduced-motion: no-preference) {
  .panel-preview .panel-headline {
    animation: panel-text-open 440ms cubic-bezier(.22, 1, .36, 1) backwards;
  }
  .panel-preview .panel-summary {
    animation: panel-text-open 500ms cubic-bezier(.22, 1, .36, 1) 60ms backwards;
  }
  .panel-preview .panel-frame {
    animation: panel-media-open 600ms cubic-bezier(.22, 1, .36, 1) backwards;
  }
  .panel-preview .panel-ambient {
    animation: panel-glow-open 400ms ease-out 180ms backwards;
  }
}
@keyframes panel-text-open {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes panel-media-open {
  from { opacity: 0; transform: scale(.985); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes panel-glow-open {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (max-width: 1100px) {
  .panel-preview .pixai-panel-hero { padding-left: 32px; padding-right: 32px; }
  .panel-preview .panel-intro { width: 92%; column-gap: 48px; }
}
@media (max-width: 1023px) {
  .panel-preview .pixai-panel-hero { padding: 56px 20px 48px; }
  .panel-preview .panel-intro { width: 100%; grid-template-columns: 1fr; gap: 16px; margin-bottom: 20px; }
  .panel-preview .panel-headline { font-size: clamp(32px, 8.7vw, 38px); line-height: 1.08; }
  .panel-preview .panel-summary { max-width: 440px; padding: 0; }
  .panel-preview .panel-description { font-size: 15px; margin-bottom: 14px; }
  .panel-preview .panel-cta-icon { display: none; }
  .panel-preview .panel-cta-link,
  .panel-preview .panel-cta-link:hover { padding-inline: 20px; animation: none; }
  .panel-preview .panel-scene { aspect-ratio: 1 / 1.05; }
  .panel-preview .panel-dots { --dot-pitch: 12px; }
  .panel-preview .panel-ambient { --halo-spread: 24px; }
}
@media (max-width: 360px) {
  .panel-preview .pixai-panel-hero { padding-left: 16px; padding-right: 16px; }
  .panel-preview .panel-headline { font-size: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .panel-preview .panel-cta .btn-expand { animation: none; }
  .panel-preview .panel-glow { transition: none; }
}

/* Match the existing navigation container and balance the visible hero space.
   Navigation: top-3 + py-4 + 38px content = 82px bottom edge.
   Full bottom padding belongs inside the hero; the following section's margin
   stays outside it. Equal auto margins center the content below navigation
   when it fits on screen, and the full-screen minimum keeps Solutions below. */
.panel-homepage { color: #edf0f8; }
.panel-homepage .pixai-panel-hero {
  --panel-nav-bottom: 82px;
  --panel-section-gap: 112px;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  padding-top: calc(var(--panel-nav-bottom) + var(--panel-section-gap));
  padding-bottom: var(--panel-section-gap);
  padding-inline: 0;
}
.panel-homepage .panel-container { margin-block: auto; }
.panel-homepage .panel-frame,
.panel-homepage .panel-scene { max-width: none; }
@media (min-width: 640px) {
  .panel-homepage .pixai-panel-hero {
    --panel-section-gap: clamp(160px, 10vw, 176px);
  }
}
/* Mobile uses the remaining screen height after the navigation and text.
   The grid's content minimum still allows scrolling on very short screens
   or when text is enlarged. No shared container or desktop rules change. */
@media (max-width: 1023px) {
  .panel-homepage .pixai-panel-hero {
    --panel-section-gap: clamp(24px, 4svh, 36px);
    --panel-top-nudge: 24px;
    padding-top: calc(var(--panel-nav-bottom) + var(--panel-section-gap) + var(--panel-top-nudge));
    --panel-compact-container: 100vw;
  }
  .panel-homepage .panel-container {
    margin-block: 0;
    height: calc(100svh - var(--panel-nav-bottom) - var(--panel-section-gap) * 2 - var(--panel-top-nudge));
    min-height: min-content;
    display: grid;
    grid-template-rows: auto minmax(160px, 1fr);
    row-gap: 20px;
  }
  .panel-homepage .panel-intro { margin-bottom: 0; }
  .panel-homepage .panel-frame {
    height: 100%;
    max-height: calc((var(--panel-compact-container) - 32px) * 1.05);
    align-self: start;
  }
  .panel-homepage .panel-scene {
    height: 100% !important;
    aspect-ratio: auto;
  }
}
@media (max-width: 1023px) and (max-height: 640px) {
  .panel-homepage .pixai-panel-hero { --panel-top-nudge: 8px; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .panel-homepage .pixai-panel-hero { --panel-compact-container: 640px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .panel-homepage .pixai-panel-hero { --panel-compact-container: 768px; }
}