.login-hero-col > .flex-row {
    width: 100%;
    max-width: 100%;
    padding-inline: clamp(2.5rem, 6vw, 5rem);
    padding-block: clamp(1.5rem, 4vh, 3rem);
  }
  .login-hero-scene {
    perspective: 1400px;
    perspective-origin: 50% 40%;
    width: 100%;
    max-width: min(720px, 78%);
    margin-inline: auto;
  }
  .login-hero-visual {
    position: relative;
    width: 100%;
    height: min(56vh, 560px);
    aspect-ratio: auto;
    transform-style: preserve-3d;
    opacity: 0;
    transform: translateY(24px) scale(0.97);
    animation: loginHeroIn 1s cubic-bezier(0.22, 1, 0.36, 1) 0.08s forwards;
  }
  .login-hero-visual.is-ready {
    animation: none;
    opacity: 1;
  }
  .login-hero-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    will-change: transform;
    transition: transform 0.12s ease-out;
    transform: translate3d(0, 0, 0);
  }
  .login-hero-layer--plants {
    filter: drop-shadow(0 8px 18px rgba(0,0,0,.06));
    z-index: 1;
  }
  .login-hero-layer--phone {
    filter: drop-shadow(0 16px 32px rgba(90,141,238,.16));
    z-index: 2;
  }
  .login-hero-layer--person {
    filter: drop-shadow(0 20px 36px rgba(9,8,20,.18));
    z-index: 3;
  }
  .login-hero-layer--orb {
    inset: auto;
    top: 3%;
    inset-inline-end: 5%;
    width: clamp(88px, 18%, 132px);
    height: auto;
    aspect-ratio: 1;
    z-index: 5;
    filter: drop-shadow(0 12px 28px rgba(90,141,238,.4));
  }
  .login-hero-layer--circle {
    inset: auto;
    top: 8%;
    inset-inline-start: 6%;
    width: clamp(72px, 15%, 110px);
    height: auto;
    aspect-ratio: 1;
    border-radius: 50%;
    z-index: 4;
    background: radial-gradient(circle at 35% 30%, rgba(90,141,238,.55), rgba(90,141,238,.08) 62%, transparent 72%);
    box-shadow: 0 10px 30px rgba(90,141,238,.25);
  }
  .login-hero-visual.is-tilting .login-hero-layer {
    transition: none;
  }
  .login-hero-shine {
    position: absolute;
    inset: 0;
    z-index: 6;
    pointer-events: none;
    border-radius: 1rem;
    background: radial-gradient(
      380px circle at var(--mx, 50%) var(--my, 40%),
      rgba(255,255,255,.3),
      transparent 55%
    );
    opacity: 0;
    mix-blend-mode: soft-light;
    transition: opacity .2s ease;
  }
  .login-hero-visual.is-tilting .login-hero-shine {
    opacity: 1;
  }
  .login-hero-title {
    opacity: 0;
    transform: translateY(14px);
    animation: loginFadeUp 0.75s ease-out 0.65s forwards;
  }
  .authentication-bg > .w-px-400 {
    opacity: 0;
    transform: translateX(-28px);
    animation: loginPanelIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.2s forwards;
  }
  [dir="rtl"] .authentication-bg > .w-px-400 {
    transform: translateX(28px);
  }
  @keyframes loginHeroIn {
    to { opacity: 1; transform: translateY(0) scale(1); }
  }
  @keyframes loginFadeUp {
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes loginPanelIn {
    to { opacity: 1; transform: translateX(0); }
  }
  @media (prefers-reduced-motion: reduce) {
    .login-hero-visual,
    .login-hero-title,
    .authentication-bg > .w-px-400 {
      animation: none !important;
      opacity: 1 !important;
      transform: none !important;
    }
    .login-hero-layer { transition: none !important; }
    .login-hero-shine { display: none; }
  }