/**
 * Veyra Apps Home 0.14.4
 * Page-specific composition only. Reusable primitives live in global.css and
 * components.css. Paper Shaders provides the local animated WebGL canvas.
 */

/* ==========================================================================
   01. Premium page background
   ========================================================================== */

body.home {
  --veyra-home-surface-solid: #030712;
  position: relative;
  isolation: isolate;
  background: #02040b;
}

body.home .wp-site-blocks,
body.home main,
body.home .veyra-page-template,
body.home .wp-block-post-content,
body.home .wp-block-group.alignfull,
body.home .veyra-site-header,
body.home .veyra-site-footer,
body.home .veyra-header,
body.home .veyra-footer {
  background: transparent !important;
}

body.home .wp-site-blocks {
  position: relative;
  z-index: 2;
  gap: 0 !important;
  isolation: auto;
}

/* The contrast veil belongs to the fixed background layer rather than to a
   page section or template part. This keeps the same navy tint behind the
   header, content and footer and prevents visible joins while scrolling. */
body.home .wp-site-blocks::before {
  content: none !important;
}

/* Do not create one stacking context per template part. The previous z-index
   on every root child trapped the fixed header below the later main element,
   allowing headings and previews to paint over the navbar and its logo. */
body.home .wp-site-blocks > * {
  position: relative;
  z-index: auto;
  margin-block-start: 0 !important;
}

body.home .wp-site-blocks > header.wp-block-template-part,
body.home .wp-site-blocks > .wp-block-template-part:first-child,
body.home .veyra-header {
  z-index: 1000 !important;
}

body.home .wp-site-blocks > main {
  z-index: 1;
}

body.home .wp-site-blocks > footer.wp-block-template-part,
body.home .wp-site-blocks > main ~ .wp-block-template-part {
  z-index: 1;
}

body.home .veyra-page-template,
body.home .wp-block-post-content,
body.home .veyra-home,
body.home .veyra-home-content-surface {
  margin-bottom: 0 !important;
}

.veyra-home-background {
  position: fixed;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background: var(--veyra-gradient-page);
  opacity: 1;
}

.veyra-home-background canvas {
  width: 100% !important;
  height: 100% !important;
  max-width: none;
  opacity: .98;
  filter: saturate(132%) contrast(108%) brightness(.92);
}

.veyra-home-background canvas {
  position: relative;
  z-index: 1;
}

/* A single fixed navy veil sits above every animated shader layer. It is
   deliberately viewport-bound, so it cannot reveal seams at Gutenberg section
   boundaries or between template parts. */
.veyra-home-background::before {
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(3, 7, 18, .34) 0%,
      rgba(3, 7, 18, .40) 38%,
      rgba(3, 7, 18, .48) 72%,
      rgba(3, 7, 18, .56) 100%
    ),
    radial-gradient(circle at 50% 0%, rgba(3, 7, 18, .06), rgba(3, 7, 18, .18) 72%);
  content: "";
}

.veyra-home-background::after {
  position: absolute;
  z-index: 2;
  inset: -28%;
  pointer-events: none;
  background:
    radial-gradient(circle at 24% 32%, rgba(0, 196, 221, .20), transparent 24%),
    radial-gradient(circle at 72% 28%, rgba(166, 83, 255, .24), transparent 27%),
    radial-gradient(circle at 55% 78%, rgba(40, 120, 255, .18), transparent 30%);
  mix-blend-mode: screen;
  filter: blur(3rem);
  content: "";
  opacity: .54;
  transform-origin: center;
  animation: veyra-home-background-drift 18s cubic-bezier(.45, 0, .55, 1) infinite alternate;
}

@keyframes veyra-home-background-drift {
  0% { transform: translate3d(-3%, -2%, 0) rotate(-4deg) scale(1.02); }
  48% { transform: translate3d(4%, 1%, 0) rotate(3deg) scale(1.09); }
  100% { transform: translate3d(-1%, 4%, 0) rotate(7deg) scale(1.04); }
}

@keyframes veyra-home-atmosphere-drift {
  0% { transform: translate3d(-2%, -1%, 0) rotate(-2deg) scale(1.02); }
  50% { transform: translate3d(3%, 2%, 0) rotate(2deg) scale(1.08); }
  100% { transform: translate3d(-1%, 4%, 0) rotate(5deg) scale(1.04); }
}

/* The earlier body pseudo-elements sat above the navy veil and could brighten
   isolated bands again. The animated shader already provides enough depth, so
   these extra layers are disabled to preserve one predictable contrast plane. */
body.home::before,
body.home::after {
  display: none !important;
}

body.home.veyra-home-background-fallback {
  background: var(--veyra-gradient-page);
}

.veyra-home {
  position: relative;
  z-index: 2;
  overflow: clip;
}

/* The root wrapper now owns the continuous contrast veil. This inner wrapper
   remains visually transparent and only provides page-specific typography and
   spacing, eliminating the previous top and bottom surface boundaries. */
.veyra-home-content-surface {
  position: relative;
  margin-top: -1px;
  padding-block: clamp(1.6rem, 2.5vw, 2.35rem) clamp(1rem, 1.6vw, 1.5rem);
  --veyra-text-soft: rgba(246, 248, 255, .93);
  --veyra-text-muted: rgba(229, 235, 248, .80);
  background: transparent;
  box-shadow: none;
}

.veyra-home-content-surface .veyra-home-section:first-child {
  padding-top: 0;
}

.veyra-home-content-surface .veyra-home-section:last-child {
  padding-bottom: 0;
}

.veyra-home-content-surface .veyra-section-heading {
  margin-bottom: clamp(.85rem, 1.5vw, 1.2rem);
}

.veyra-home .veyra-home-section,
.veyra-home .veyra-home-section--bordered {
  border: 0;
  background: transparent;
}

.veyra-home .veyra-ambient::before {
  display: none;
}

/* The navigation and footer retain liquid glass, but receive a darker navy
   underlay so their labels remain readable over every shader frame. These are
   Home-only contextual refinements; the reusable shell component is unchanged. */
body.home .veyra-header,
body.home .veyra-footer {
  --veyra-text-soft: rgba(246, 248, 255, .94);
  --veyra-text-muted: rgba(229, 235, 248, .78);
}

body.home .veyra-header__desktop {
  position: relative;
  z-index: 2;
  border-color: rgba(156, 177, 226, .24);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .060), transparent 46%),
    rgba(3, 7, 18, .86);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .085),
    0 1rem 3rem rgba(0, 0, 0, .34),
    0 0 0 1px rgba(64, 92, 160, .025);
}

body.home .veyra-header__mobile {
  position: relative;
  z-index: 2;
  border-color: rgba(156, 177, 226, .24);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .055), transparent 46%),
    rgba(3, 7, 18, .88);
}

@supports ((-webkit-backdrop-filter: blur(1rem)) or (backdrop-filter: blur(1rem))) {
  body.home .veyra-header__desktop,
  body.home .veyra-header__mobile {
    -webkit-backdrop-filter: blur(1.7rem) saturate(138%);
    backdrop-filter: blur(1.7rem) saturate(138%);
  }
}

body.home.veyra-desktop-nav-is-collapsed .veyra-header__desktop,
body.home.veyra-nav-is-collapsed .veyra-header__desktop {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .065), transparent 46%),
    rgba(3, 7, 18, .91);
}

body.home .veyra-footer,
body.home .veyra-site-footer,
body.home .wp-site-blocks > footer.wp-block-template-part,
body.home .wp-site-blocks > footer.wp-block-template-part ~ .wp-block-template-part {
  margin-top: 0 !important;
  border-top: 0 !important;
  background: transparent !important;
}

body.home .veyra-footer__shell {
  border-color: rgba(156, 177, 226, .22);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .050), transparent 28%),
    rgba(3, 7, 18, .84);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .075),
    0 1.5rem 4rem rgba(0, 0, 0, .26),
    0 0 0 1px rgba(64, 92, 160, .02);
}

@supports ((-webkit-backdrop-filter: blur(1rem)) or (backdrop-filter: blur(1rem))) {
  body.home .veyra-footer__shell {
    -webkit-backdrop-filter: blur(1.7rem) saturate(135%);
    backdrop-filter: blur(1.7rem) saturate(135%);
  }
}

body.home .veyra-footer::before,
body.home .veyra-site-footer::before {
  display: none !important;
}


/* ==========================================================================
   02. Home hero
   ========================================================================== */

.veyra-home-hero {
  width: min(calc(100% - (2 * var(--veyra-gutter))), 94rem);
  min-height: clamp(33.5rem, 64svh, 41.5rem);
  margin: 0 auto;
  padding: clamp(3.55rem, 5vw, 4.75rem) var(--veyra-gutter) clamp(1.2rem, 2vw, 1.7rem);
  border: 1px solid var(--veyra-border-glass);
  border-radius: var(--veyra-radius-2xl);
  background:
    linear-gradient(145deg, rgba(246, 248, 255, .045), rgba(59, 140, 255, .012) 44%, rgba(138, 92, 255, .055)),
    rgba(4, 8, 18, .105);
  text-align: center;
  box-shadow:
    inset 0 1px 0 rgba(246, 248, 255, .08),
    inset 0 -1px 0 rgba(59, 140, 255, .04),
    0 2rem 7rem rgba(0, 0, 0, .24),
    0 0 5rem rgba(59, 140, 255, .05);
}

@supports ((-webkit-backdrop-filter: blur(1rem)) or (backdrop-filter: blur(1rem))) {
  .veyra-home-hero {
    -webkit-backdrop-filter: blur(1.6rem) saturate(135%);
    backdrop-filter: blur(1.6rem) saturate(135%);
  }
}

.veyra-home-hero::before {
  bottom: -45%;
  opacity: .72;
  animation: veyra-home-orbit 24s ease-in-out infinite alternate;
}

.veyra-home-hero::after {
  opacity: .62;
  animation: veyra-home-aurora 20s ease-in-out infinite alternate;
}

.veyra-home-hero__content {
  --veyra-stack-space: 1.15rem;
  width: 100%;
  align-items: center;
}

.veyra-home-hero .veyra-display {
  max-width: 16ch;
  font-size: clamp(3.5rem, 7vw, 6.65rem);
  font-weight: 500;
  line-height: .96;
  letter-spacing: -.06em;
}

.veyra-home-hero .veyra-lead {
  max-width: 50rem;
  color: var(--veyra-text-soft);
  font-size: clamp(1rem, 1.55vw, 1.16rem);
}

.veyra-home-hero-actions {
  justify-content: center;
  margin-top: .25rem;
}

.veyra-home-availability {
  justify-content: center;
  color: var(--veyra-text-muted);
  font-size: var(--wp--preset--font-size--body-small);
}

.veyra-home-ecosystem-strip {
  --veyra-grid-gap: .65rem;
  width: 100%;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(.85rem, 1.8vw, 1.4rem);
  padding: .5rem;
  border: 1px solid var(--veyra-border-glass);
  border-radius: var(--veyra-radius-xl);
  background: var(--veyra-surface-liquid);
  box-shadow: var(--veyra-shadow-liquid);
}

@supports ((-webkit-backdrop-filter: blur(1rem)) or (backdrop-filter: blur(1rem))) {
  .veyra-home-ecosystem-strip {
    -webkit-backdrop-filter: blur(1.25rem) saturate(140%);
    backdrop-filter: blur(1.25rem) saturate(140%);
  }
}

.veyra-home-ecosystem-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .72rem;
  align-items: center;
  min-height: 3.9rem;
  padding: .6rem;
  border: 1px solid transparent;
  border-radius: var(--veyra-radius-md);
  background: rgba(246, 248, 255, .014);
  text-align: left;
}

.veyra-home-ecosystem-item .veyra-card__icon {
  width: 2.35rem;
  height: 2.35rem;
}

.veyra-home-ecosystem-item p {
  margin: .12rem 0 0;
  color: var(--veyra-text-muted);
  font-size: var(--wp--preset--font-size--caption);
  line-height: 1.35;
}

/* ==========================================================================
   03. Shared home compositions
   ========================================================================== */

.veyra-home-section {
  position: relative;
  padding-block: clamp(1.35rem, 2.2vw, 2.15rem);
}

.veyra-home-section--bordered {
  border: 0;
  background: transparent;
}

.veyra-home-icon {
  width: 1.3rem;
  height: 1.3rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.veyra-home-icon--sm {
  width: 1rem;
  height: 1rem;
}

.veyra-home-link-card {
  color: inherit;
  text-decoration: none;
}

.veyra-home-link-card .veyra-link {
  margin-top: auto;
}

.veyra-home-kicker {
  margin: 0;
  color: var(--veyra-text-muted);
  font-size: var(--wp--preset--font-size--body-small);
  line-height: 1.6;
}

.veyra-home-feature-title {
  display: flex;
  align-items: center;
  gap: .65rem;
}

.veyra-home-feature-title .veyra-card__icon {
  flex: 0 0 auto;
}



/* ==========================================================================
   04. Veyra Custom Content Manager
   ========================================================================== */

.veyra-home-plugin {
  align-items: center;
}

.veyra-home-plugin-copy {
  --veyra-stack-space: .85rem;
}

.veyra-home-plugin-points {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .65rem;
}

.veyra-home-plugin-point {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .6rem;
  align-items: start;
  padding: .72rem .8rem;
  border: 1px solid var(--veyra-border-glass);
  border-radius: var(--veyra-radius-md);
  background: var(--veyra-surface-liquid);
  color: var(--veyra-text-soft);
  font-size: var(--wp--preset--font-size--body-small);
  box-shadow: inset 0 1px 0 rgba(246, 248, 255, .035);
}

.veyra-home-plugin-point svg {
  margin-top: .15rem;
  color: var(--veyra-cyan);
}

.veyra-home-plugin .veyra-feature-split__media {
  padding: .7rem;
  border-color: var(--veyra-border-glass);
  background:
    linear-gradient(145deg, rgba(246, 248, 255, .038), rgba(59, 140, 255, .008) 48%, rgba(138, 92, 255, .035)),
    rgba(8, 13, 24, .095);
  box-shadow: var(--veyra-shadow-liquid);
}

@supports ((-webkit-backdrop-filter: blur(1rem)) or (backdrop-filter: blur(1rem))) {
  .veyra-home-plugin .veyra-feature-split__media {
    -webkit-backdrop-filter: blur(1rem) saturate(130%);
    backdrop-filter: blur(1rem) saturate(130%);
  }
}

.veyra-home-plugin-window {
  overflow: hidden;
  min-height: 24rem;
  border: 1px solid var(--veyra-border-default);
  border-radius: calc(var(--veyra-radius-xl) - .3rem);
  background: rgba(5, 9, 17, .88);
  box-shadow:
    inset 0 1px 0 rgba(246, 248, 255, .07),
    0 1.5rem 5rem rgba(0, 0, 0, .28),
    0 1rem 4rem rgba(59, 140, 255, .06);
}

.veyra-home-window-bar {
  min-height: 3.1rem;
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .7rem 1rem;
  border-bottom: 1px solid var(--veyra-border-subtle);
  background: rgba(246, 248, 255, .025);
}

.veyra-home-window-dots {
  display: flex;
  gap: .35rem;
}

.veyra-home-window-dots span {
  width: .48rem;
  height: .48rem;
  border-radius: 50%;
  background: rgba(181, 190, 209, .42);
}

.veyra-home-window-title {
  margin-left: .35rem;
  color: var(--veyra-text-soft);
  font-size: var(--wp--preset--font-size--caption);
  font-weight: 650;
}

.veyra-home-plugin-ui {
  display: grid;
  grid-template-columns: 10.5rem minmax(0, 1fr);
  min-height: 20.9rem;
}

.veyra-home-plugin-nav {
  padding: .9rem .65rem;
  border-right: 1px solid rgba(246, 248, 255, .055);
  background: rgba(4, 7, 13, .66);
}

.veyra-home-plugin-nav strong {
  display: block;
  padding: .45rem .6rem .7rem;
  color: var(--veyra-text-muted);
  font-size: .65rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.veyra-home-plugin-nav span {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .58rem .6rem;
  border-radius: .55rem;
  color: var(--veyra-text-muted);
  font-size: .73rem;
}

.veyra-home-plugin-nav span[aria-current="page"] {
  color: var(--veyra-text);
  background: rgba(59, 140, 255, .13);
}

.veyra-home-plugin-content {
  padding: clamp(.9rem, 2.5vw, 1.5rem);
  background:
    radial-gradient(circle at 82% 8%, rgba(138, 92, 255, .11), transparent 17rem),
    rgba(7, 12, 22, .88);
}

.veyra-home-plugin-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.1rem;
}

.veyra-home-plugin-heading h3 {
  margin: 0;
  font-size: var(--wp--preset--font-size--h5);
}

.veyra-home-plugin-heading p {
  margin: .3rem 0 0;
  color: var(--veyra-text-muted);
  font-size: var(--wp--preset--font-size--caption);
}

.veyra-home-plugin-fields {
  display: grid;
  gap: .65rem;
}

.veyra-home-plugin-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  padding: .72rem .85rem;
  border: 1px solid var(--veyra-border-subtle);
  border-radius: var(--veyra-radius-md);
  background: rgba(246, 248, 255, .025);
}

.veyra-home-plugin-field strong,
.veyra-home-plugin-field small {
  display: block;
}

.veyra-home-plugin-field strong {
  font-size: .8rem;
}

.veyra-home-plugin-field small {
  margin-top: .15rem;
  color: var(--veyra-text-muted);
  font-size: .66rem;
}

.veyra-home-field-type {
  padding: .23rem .42rem;
  border-radius: var(--veyra-radius-pill);
  color: #d8c8ff;
  background: rgba(138, 92, 255, .12);
  font-size: .61rem;
  font-weight: 650;
}

/* ==========================================================================
   05. Studio ecosystem — editorial rail, not cards
   ========================================================================== */

.veyra-home-ecosystem-list {
  position: relative;
}

.veyra-home-ecosystem-row {
  display: grid;
  grid-template-columns: auto minmax(12rem, .8fr) minmax(18rem, 1.35fr) auto;
  gap: clamp(1rem, 2.5vw, 2rem);
  align-items: center;
  padding-block: clamp(.95rem, 1.8vw, 1.3rem);
}

.veyra-home-ecosystem-row + .veyra-home-ecosystem-row {
  margin-top: .25rem;
  border-top: 0;
}

.veyra-home-ecosystem-row h3,
.veyra-home-ecosystem-row p {
  margin: 0;
}

.veyra-home-ecosystem-row h3 {
  font-size: var(--wp--preset--font-size--h5);
  line-height: 1.25;
}

.veyra-home-ecosystem-row p {
  color: var(--veyra-text-muted);
  font-size: var(--wp--preset--font-size--body-small);
  line-height: 1.55;
}

.veyra-home-card-state {
  justify-self: end;
  white-space: nowrap;
}

/* ==========================================================================
   06. Product principles — open matrix
   ========================================================================== */

.veyra-home-principles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.veyra-home-principle {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  padding: clamp(1rem, 2vw, 1.4rem);
}

.veyra-home-principle:nth-child(odd) {
  border-right: 1px solid rgba(246, 248, 255, .055);
}

.veyra-home-principle:nth-child(n + 3) {
  border-top: 1px solid rgba(246, 248, 255, .055);
}

.veyra-home-principle h3,
.veyra-home-principle p {
  margin: 0;
}

.veyra-home-principle h3 {
  margin-bottom: .4rem;
  font-size: var(--wp--preset--font-size--body);
  line-height: 1.35;
}

.veyra-home-principle p {
  color: var(--veyra-text-muted);
  font-size: var(--wp--preset--font-size--body-small);
  line-height: 1.55;
}

/* ==========================================================================
   07. Studio workspace preview
   ========================================================================== */

.veyra-home-studio-section {
  --veyra-stack-space: clamp(1rem, 2vw, 1.6rem);
}

.veyra-home-studio-preview {
  overflow: hidden;
  min-height: 24.5rem;
  border: 1px solid var(--veyra-border-glass);
  border-radius: var(--veyra-radius-xl);
  background:
    linear-gradient(145deg, rgba(246, 248, 255, .035), rgba(59, 140, 255, .008) 50%, rgba(138, 92, 255, .035)),
    rgba(8, 13, 24, .10);
  box-shadow:
    inset 0 1px 0 rgba(246, 248, 255, .07),
    0 2rem 7rem rgba(0, 0, 0, .28),
    0 1.5rem 6rem rgba(138, 92, 255, .06);
}

@supports ((-webkit-backdrop-filter: blur(1rem)) or (backdrop-filter: blur(1rem))) {
  .veyra-home-studio-preview {
    -webkit-backdrop-filter: blur(1.2rem) saturate(130%);
    backdrop-filter: blur(1.2rem) saturate(130%);
  }
}

.veyra-home-studio-topbar {
  min-height: 3.15rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .6rem .8rem;
  border-bottom: 1px solid var(--veyra-border-subtle);
  background: rgba(246, 248, 255, .022);
}

.veyra-home-studio-brand,
.veyra-home-studio-actions {
  display: flex;
  align-items: center;
  gap: .55rem;
}

.veyra-home-studio-brand {
  color: var(--veyra-text-soft);
  font-size: .72rem;
  font-weight: 650;
}

.veyra-home-studio-actions span {
  width: 1.75rem;
  height: 1.75rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--veyra-border-subtle);
  border-radius: .5rem;
  color: var(--veyra-text-muted);
}

.veyra-home-studio-grid {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr) 13rem;
  min-height: 21.35rem;
}

.veyra-home-studio-panel {
  padding: .85rem .65rem;
  background: rgba(4, 7, 13, .58);
}

.veyra-home-studio-panel--left {
  border-right: 1px solid rgba(246, 248, 255, .055);
}

.veyra-home-studio-panel--right {
  border-left: 1px solid var(--veyra-border-subtle);
}

.veyra-home-studio-panel strong {
  display: block;
  margin-bottom: .65rem;
  color: var(--veyra-text-muted);
  font-size: .63rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.veyra-home-studio-panel span {
  display: block;
  margin-bottom: .3rem;
  padding: .5rem .55rem;
  border-radius: .45rem;
  color: var(--veyra-text-muted);
  font-size: .68rem;
}

.veyra-home-studio-panel span.is-active {
  color: var(--veyra-text);
  background: rgba(59, 140, 255, .13);
}

.veyra-home-studio-canvas {
  display: grid;
  place-items: center;
  padding: clamp(1rem, 2.5vw, 1.75rem);
  background:
    linear-gradient(rgba(246, 248, 255, .016) 1px, transparent 1px),
    linear-gradient(90deg, rgba(246, 248, 255, .016) 1px, transparent 1px),
    radial-gradient(circle at 75% 25%, rgba(59, 140, 255, .12), transparent 19rem),
    rgba(5, 10, 19, .76);
  background-size: 28px 28px, 28px 28px, auto, auto;
}

.veyra-home-studio-artboard {
  width: min(100%, 39rem);
  min-height: 14.5rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 11rem;
  gap: 1.15rem;
  align-items: center;
  padding: clamp(1.15rem, 2.6vw, 1.75rem);
  border: 1px solid rgba(96, 139, 255, .50);
  border-radius: var(--veyra-radius-lg);
  background:
    radial-gradient(circle at 78% 25%, rgba(59, 140, 255, .16), transparent 14rem),
    linear-gradient(145deg, rgba(13, 20, 33, .92), rgba(6, 10, 19, .90));
  box-shadow:
    0 0 0 1px rgba(138, 92, 255, .14),
    0 1.5rem 4rem rgba(0, 0, 0, .24);
}

.veyra-home-studio-artboard h3 {
  margin: 0;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  line-height: 1;
  letter-spacing: -.045em;
}

.veyra-home-studio-artboard p {
  margin: .7rem 0 0;
  color: var(--veyra-text-muted);
  font-size: .8rem;
}

.veyra-home-studio-art {
  position: relative;
  aspect-ratio: 1 / .78;
  overflow: hidden;
  border: 1px solid rgba(151, 181, 255, .38);
  border-radius: var(--veyra-radius-md);
  background:
    radial-gradient(circle at 30% 70%, rgba(0, 229, 255, .52), transparent 45%),
    radial-gradient(circle at 70% 30%, rgba(138, 92, 255, .62), transparent 48%),
    linear-gradient(135deg, #101934, #090b19);
  box-shadow: inset 0 1px 0 rgba(246, 248, 255, .18), 0 1rem 3rem rgba(59, 140, 255, .16);
}

.veyra-home-studio-art::before,
.veyra-home-studio-art::after {
  position: absolute;
  border: 1px solid rgba(246, 248, 255, .28);
  border-radius: 50%;
  content: "";
}

.veyra-home-studio-art::before {
  inset: 18% -25%;
  transform: rotate(-26deg);
  box-shadow: 0 0 1.5rem rgba(59, 140, 255, .35);
}

.veyra-home-studio-art::after {
  inset: -22% 12%;
  transform: rotate(36deg);
  box-shadow: 0 0 1.5rem rgba(138, 92, 255, .35);
}

/* ==========================================================================
   08. Resources and CTA
   ========================================================================== */

.veyra-home-resources {
  --veyra-grid-gap: .9rem;
}

.veyra-home-resources .veyra-feature-card {
  min-height: 9.6rem;
}

.veyra-home .veyra-cta-banner {
  background:
    linear-gradient(rgba(7, 12, 23, .18), rgba(7, 12, 23, .18)) padding-box,
    var(--veyra-gradient-border) border-box;
}

@supports ((-webkit-backdrop-filter: blur(1rem)) or (backdrop-filter: blur(1rem))) {
  .veyra-home .veyra-cta-banner {
    -webkit-backdrop-filter: blur(1.2rem) saturate(140%);
    backdrop-filter: blur(1.2rem) saturate(140%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .veyra-home-background::after,
  body.home::before,
  .veyra-home-hero::before,
  .veyra-home-hero::after {
    animation: none !important;
  }
}

/* ==========================================================================
   09. Responsive behaviour
   ========================================================================== */

@media (max-width: 64rem) {
  .veyra-home-hero {
    min-height: 42rem;
  }

  .veyra-home-ecosystem-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .veyra-home-ecosystem-row {
    grid-template-columns: auto minmax(10rem, .8fr) minmax(0, 1.2fr);
  }

  .veyra-home-card-state {
    grid-column: 2 / -1;
    justify-self: start;
  }

  .veyra-home-studio-grid {
    grid-template-columns: 9rem minmax(0, 1fr);
  }

  .veyra-home-studio-panel--right {
    display: none;
  }
}

@media (max-width: 48rem) {
  .veyra-home-content-surface {
    margin-top: .5rem;
    padding-block: 1.1rem 1.5rem;
    background:
      linear-gradient(180deg, rgba(3, 7, 18, .54), rgba(3, 7, 18, .72) 9rem, rgba(3, 7, 18, .66)),
      rgba(3, 7, 18, .38);
  }

  body.home::after {
    background: linear-gradient(180deg, rgba(2, 4, 10, .10), rgba(2, 4, 10, .54));
  }

  .veyra-home-hero {
    width: min(calc(100% - 1rem), 88rem);
    min-height: auto;
    padding: 4.5rem 1.15rem 1.35rem;
    border-radius: var(--veyra-radius-xl);
  }

  .veyra-home-hero .veyra-display {
    max-width: 12ch;
    font-size: clamp(3rem, 14vw, 4.4rem);
  }

  .veyra-home-hero::before {
    bottom: -8%;
    width: 190vw;
  }

  .veyra-home-hero-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .veyra-home-hero-actions > * {
    width: 100%;
  }

  .veyra-home-availability {
    align-items: flex-start;
    text-align: left;
  }

  .veyra-home-ecosystem-strip,
  .veyra-home-plugin-points,
  .veyra-home-principles {
    grid-template-columns: 1fr;
  }

  .veyra-home-ecosystem-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .veyra-home-ecosystem-row p,
  .veyra-home-card-state {
    grid-column: 2;
  }

  .veyra-home-principle:nth-child(odd) {
    border-right: 0;
  }

  .veyra-home-principle + .veyra-home-principle {
    border-top: 1px solid rgba(246, 248, 255, .055);
  }

  .veyra-home-plugin-ui {
    grid-template-columns: 1fr;
  }

  .veyra-home-plugin-nav {
    display: none;
  }

  .veyra-home-plugin-window {
    min-height: 24rem;
  }

  .veyra-home-plugin-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .veyra-home-studio-grid {
    grid-template-columns: 1fr;
  }

  .veyra-home-studio-panel--left {
    display: none;
  }

  .veyra-home-studio-artboard {
    grid-template-columns: 1fr;
  }

  .veyra-home-studio-art {
    max-width: 14rem;
  }
}

@keyframes veyra-home-orbit {
  0% { transform: translateX(-50%) rotate(-3deg) scale(.985); }
  100% { transform: translateX(-50%) rotate(3deg) scale(1.025); }
}

@keyframes veyra-home-aurora {
  0% { transform: translate3d(-1.5%, 0, 0) scale(1); opacity: .58; }
  100% { transform: translate3d(1.5%, -1%, 0) scale(1.04); opacity: .78; }
}

@media (prefers-reduced-motion: reduce) {
  .veyra-home-hero::before,
  .veyra-home-hero::after {
    animation: none;
  }
}