/* InvestoXpert login: live isometric city. Fully scoped to .lx, no Tailwind rebuild needed. */
.lx{--s1:#050a16;--s2:#10244a;--glow:#E14B8A;--win:#ffd58a;--fog:#0b1730;--oc:#e9f0ff;--ox:78%;--oy:14%;
  position:relative;min-height:100dvh;overflow:hidden;color:#fff;font-family:Inter,system-ui,sans-serif;
  background:linear-gradient(180deg,var(--s1) 0,var(--s2) 62%,var(--glow) 135%);transition:background .6s}
.lx[data-phase=dawn]{--s1:#24336a;--s2:#b4527f;--glow:#F5A623;--win:#ffe2a8;--fog:#2a2450;--oc:#ffd9a0;--oy:52%;--ox:20%}
.lx[data-phase=day]{--s1:#1f6fd8;--s2:#8ec8ff;--glow:#fff3d1;--win:rgba(255,255,255,.45);--fog:#456ea8;--oc:#fff1b8;--oy:10%;--ox:70%}
.lx[data-phase=dusk]{--s1:#1a1b4b;--s2:#e14b8a;--glow:#F5A623;--win:#ffd58a;--fog:#2a1d4a;--oc:#ffb35c;--oy:46%;--ox:84%}
.lx *{box-sizing:border-box}
.lx-sky{position:absolute;inset:0}
.lx-orb{position:absolute;left:var(--ox);top:var(--oy);width:84px;height:84px;border-radius:50%;background:var(--oc);
  box-shadow:0 0 90px 40px color-mix(in srgb,var(--oc) 45%,transparent);animation:lx-bob 9s ease-in-out infinite alternate}
@keyframes lx-bob{to{transform:translateY(18px)}}

/* ---------- 3D city ---------- */
.lx-stage{--rx:58deg;--rz:-45deg;--s:1;position:absolute;inset:0;display:grid;place-items:center;perspective:1700px;
  transition:transform 1s cubic-bezier(.6,0,.2,1),filter 1s}
.lx-world{position:relative;width:760px;height:620px;transform-style:preserve-3d;margin-left:-14vw;margin-top:6vh;
  transform:scale(var(--s)) rotateX(var(--rx)) rotateZ(var(--rz));transition:transform .35s ease-out,filter .5s}
.is-typing .lx-world{filter:brightness(1.3) saturate(1.2)}
.lx-ground{position:absolute;inset:-60px;border-radius:28px;overflow:hidden;
  background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--fog) 70%,#fff 8%),var(--fog));
  box-shadow:0 0 0 2px rgb(255 255 255/.06),0 60px 120px rgb(0 0 0/.5)}
.lx-road{position:absolute;background-color:rgb(0 0 0/.35);--rc:#ffd58a}
.lx-r1{left:0;right:0;top:230px;height:22px;background-image:repeating-linear-gradient(90deg,transparent 0 80px,var(--rc) 80px 120px,transparent 120px 260px);animation:lx-flow-x 5s linear infinite}
.lx-r2{left:0;right:0;top:560px;height:22px;--rc:#ff6a9c;background-image:repeating-linear-gradient(-90deg,transparent 0 60px,var(--rc) 60px 90px,transparent 90px 300px);animation:lx-flow-x 7s linear infinite reverse}
.lx-r3{top:0;bottom:0;left:300px;width:22px;background-image:repeating-linear-gradient(0deg,transparent 0 70px,var(--rc) 70px 110px,transparent 110px 280px);animation:lx-flow-y 6s linear infinite}
.lx-r4{top:0;bottom:0;left:610px;width:22px;--rc:#7fb5ff;background-image:repeating-linear-gradient(180deg,transparent 0 50px,var(--rc) 50px 80px,transparent 80px 240px);animation:lx-flow-y 8s linear infinite}
@keyframes lx-flow-x{to{background-position-x:260px}}
@keyframes lx-flow-y{to{background-position-y:-280px}}

/* logo diamond lying on the plaza, with radar rings */
.lx-emb{position:absolute;left:390px;top:330px;width:150px;height:150px;margin:-75px 0 0 -75px;transform:rotateZ(45deg) translateZ(2px);
  background:var(--logo) left center/auto 100% no-repeat;filter:drop-shadow(0 0 22px rgb(43 125 233/.7));animation:lx-pulse 3.2s ease-in-out infinite}
.lx-emb::before,.lx-emb::after{content:"";position:absolute;inset:-14px;border:2px solid rgb(255 255 255/.5);border-radius:50%;animation:lx-ring 3.2s ease-out infinite}
.lx-emb::after{animation-delay:1.6s}
@keyframes lx-ring{from{transform:scale(.6);opacity:.9}to{transform:scale(2.6);opacity:0}}
@keyframes lx-pulse{50%{transform:rotateZ(45deg) translateZ(2px) scale(1.08)}}

/* towers */
.lx-b{--c:#3b5688;position:absolute;left:calc(var(--x)*1px);top:calc(var(--y)*1px);width:calc(var(--w)*1px);height:calc(var(--d)*1px);
  transform-style:preserve-3d;transform-origin:50% 50% 0;animation:lx-rise 1.5s cubic-bezier(.2,.9,.2,1) both;animation-delay:calc(var(--i)*80ms + .2s)}
@keyframes lx-rise{from{transform:scale3d(1,1,.001)}to{transform:scale3d(1,1,1)}}
.lx-b .f,.lx-b .tp{position:absolute;display:block}
.lx-b .fr{left:0;top:100%;width:100%;height:calc(var(--h)*1px);transform-origin:top;transform:rotateX(90deg);
  background:color-mix(in srgb,var(--c) 38%,var(--fog))}
.lx-b .lf{left:0;top:0;width:calc(var(--h)*1px);height:100%;transform-origin:left;transform:rotateY(-90deg);
  background:color-mix(in srgb,var(--c) 22%,var(--fog))}
.lx-b .tp{inset:0;transform:translateZ(calc(var(--h)*1px));background:color-mix(in srgb,var(--c) 55%,#fff 10%)}
/* windows: two offset masked layers that flicker out of phase */
.lx-b .f::before,.lx-b .f::after{content:"";position:absolute;inset:8px;background:var(--win);
  -webkit-mask:repeating-linear-gradient(90deg,#000 0 6px,transparent 6px 15px),repeating-linear-gradient(0deg,#000 0 8px,transparent 8px 19px);
  -webkit-mask-composite:source-in;mask:repeating-linear-gradient(90deg,#000 0 6px,transparent 6px 15px),repeating-linear-gradient(0deg,#000 0 8px,transparent 8px 19px);
  mask-composite:intersect;animation:lx-tw 6s ease-in-out infinite;animation-delay:calc(var(--i)*-1.1s)}
.lx-b .f::after{-webkit-mask-position:7px 9px;mask-position:7px 9px;animation-duration:4.3s;animation-direction:reverse}
@keyframes lx-tw{0%,100%{opacity:.25}50%{opacity:.95}}
.lx-acc .tp{background:var(--c);box-shadow:0 0 40px 6px var(--c)}
.lx-acc .fr,.lx-acc .lf{background:color-mix(in srgb,var(--c) 55%,var(--fog))}

/* floating CRM moments */
.lx-chip{position:absolute;z-index:1;display:flex;align-items:center;gap:.6rem;padding:.55rem .95rem;border-radius:999px;font-size:.82rem;font-weight:500;
  background:rgb(10 20 40/.55);backdrop-filter:blur(10px);border:1px solid rgb(255 255 255/.16);animation:lx-float 6s ease-in-out infinite alternate}
.lx-chip b{width:9px;height:9px;border-radius:50%;background:var(--d,#2EAF4F);box-shadow:0 0 0 0 var(--d,#2EAF4F);animation:lx-ping 2s infinite}
.lx-c1{left:8%;top:28%;--d:#E14B8A}.lx-c2{left:40%;top:16%;--d:#F5A623;animation-delay:-2s}.lx-c3{left:30%;top:60%;--d:#2EAF4F;animation-delay:-4s}
@keyframes lx-float{to{transform:translateY(-16px)}}
@keyframes lx-ping{70%{box-shadow:0 0 0 9px transparent}}

/* ---------- layout ---------- */
.lx-shell{position:relative;z-index:2;min-height:100dvh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:4vw;
  padding:clamp(1.25rem,4vw,3.5rem);align-items:center}
.lx-hero{align-self:stretch;display:flex;flex-direction:column;justify-content:space-between;gap:2rem;pointer-events:none}
.lx-logo{height:clamp(46px,6vw,68px);width:auto;align-self:flex-start;animation:lx-in .9s .1s both}
.lx-hero h1{margin:0;font:900 clamp(3.4rem,9vw,8rem)/.9 "Big Shoulders Display",Impact,sans-serif;letter-spacing:-.01em;text-shadow:0 6px 40px rgb(0 0 0/.45);animation:lx-in 1s .9s both}
.lx-hero p{margin:1rem 0 0;max-width:34ch;font-size:1.05rem;line-height:1.5;color:rgb(255 255 255/.85);text-shadow:0 2px 16px rgb(0 0 0/.5);animation:lx-in 1s 1.1s both}
@keyframes lx-in{from{opacity:0;transform:translateY(22px)}}

.lx-card{position:relative;padding:2.4rem 2rem 1.6rem;border-radius:22px;background:rgb(8 16 32/.62);backdrop-filter:blur(22px) saturate(1.4);
  border:1px solid rgb(255 255 255/.16);box-shadow:0 40px 90px -20px rgb(0 0 0/.65);animation:lx-in 1s 1.3s both;transition:opacity .5s,transform .8s}
.lx-bar{position:absolute;left:2rem;right:2rem;top:0;height:4px;border-radius:0 0 4px 4px;
  background:linear-gradient(90deg,#2B7DE9 0 25%,#2EAF4F 25% 50%,#E14B8A 50% 75%,#F5A623 75%)}
.lx-card h2{margin:0;font:800 2.3rem/1 "Big Shoulders Display",Impact,sans-serif}
.lx-sub{margin:.4rem 0 1.6rem;color:rgb(255 255 255/.7);font-size:.95rem}
.lx-alert{margin-bottom:1.1rem;padding:.65rem .85rem;border-radius:10px;font-size:.88rem;background:rgb(225 75 138/.18);border:1px solid rgb(225 75 138/.55)}
.lx-card--error{animation:lx-in 1s 1.3s both,lx-shake .5s 1.9s}
@keyframes lx-shake{20%,60%{transform:translateX(-9px)}40%,80%{transform:translateX(9px)}}

.lx-f{position:relative;margin-bottom:1.1rem}
.lx-f input{width:100%;padding:1.45rem 3.6rem .55rem 1rem;font:inherit;color:#fff;background:rgb(255 255 255/.07);border:1.5px solid rgb(255 255 255/.16);border-radius:12px;outline:0;transition:border-color .2s,background .2s,box-shadow .2s}
.lx-f input:focus{border-color:#2B7DE9;background:rgb(43 125 233/.14);box-shadow:0 0 0 4px rgb(43 125 233/.25)}
.lx-f input:-webkit-autofill{-webkit-text-fill-color:#fff;box-shadow:0 0 0 40px #12274a inset}
.lx-f label{position:absolute;left:1rem;top:1.05rem;color:rgb(255 255 255/.6);pointer-events:none;transition:all .18s}
.lx-f input:focus+label,.lx-f input:not(:placeholder-shown)+label{top:.42rem;font-size:.72rem;color:#8fbcff}
.lx-eye{position:absolute;right:.9rem;top:50%;transform:translateY(-50%);background:none;border:0;color:rgb(255 255 255/.7);font:500 .8rem Inter,sans-serif;cursor:pointer;border-radius:6px;padding:.25rem .4rem}
.lx-eye:hover,.lx-eye:focus-visible{color:#fff;outline:2px solid #2B7DE9}
.lx-row{display:flex;justify-content:space-between;align-items:center;gap:.5rem;margin:.2rem 0 1.5rem;font-size:.86rem}
.lx-row label{display:flex;align-items:center;gap:.5rem;cursor:pointer;color:rgb(255 255 255/.8)}
.lx-row input{width:15px;height:15px;accent-color:#2B7DE9}
.lx-row a,.lx-help a{color:#fff;text-decoration:underline;text-decoration-color:rgb(255 255 255/.4);text-underline-offset:3px}
.lx-row a:hover,.lx-help a:hover{text-decoration-color:#F5A623}
.lx-help{margin:1.3rem 0 0;text-align:center;font-size:.84rem;color:rgb(255 255 255/.65)}

.lx-btn{position:relative;overflow:hidden;width:100%;display:flex;align-items:center;justify-content:center;gap:.7rem;padding:1rem;border:0;border-radius:12px;cursor:pointer;
  font:600 1rem Inter,sans-serif;color:#fff;background:linear-gradient(100deg,#2B7DE9,#E14B8A 55%,#F5A623);background-size:200% 100%;transition:background-position .6s,transform .2s,box-shadow .3s}
.lx-btn:hover{background-position:100% 0;transform:translateY(-2px);box-shadow:0 14px 30px -10px rgb(225 75 138/.7)}
.lx-btn:focus-visible{outline:3px solid #fff;outline-offset:3px}
.lx-key{width:14px;height:14px;background:#fff;transform:rotate(45deg);border-radius:3px 50% 3px 50%;transition:transform .5s}
.lx-btn:hover .lx-key{transform:rotate(225deg)}
.lx-btn-busy{display:none}
.is-busy .lx-btn-label{display:none}.is-busy .lx-btn-busy{display:inline}
.is-busy .lx-key{animation:lx-spin .8s linear infinite}
@keyframes lx-spin{to{transform:rotate(405deg)}}

/* success: fly into the skyline */
.lx-flash{position:absolute;inset:0;z-index:5;background:radial-gradient(circle,#fff,#bcd8ff);opacity:0;pointer-events:none;transition:opacity .45s .5s}
.lx-exit .lx-stage{transform:scale(2.8) translateY(6%);filter:brightness(1.6) blur(2px)}
.lx-exit .lx-card,.lx-exit .lx-hero,.lx-exit .lx-chip{opacity:0;transform:translateY(-20px)}
.lx-exit .lx-flash{opacity:1}

@media (max-width:900px){
  .lx-shell{grid-template-columns:1fr;align-content:end;gap:1.5rem}
  .lx-hero{gap:1rem}.lx-hero p,.lx-chip{display:none}
  .lx-world{margin-left:0;margin-top:-22vh}
  .lx-card{padding:2rem 1.4rem 1.3rem}
}
@media (prefers-reduced-motion:reduce){
  .lx *,.lx *::before,.lx *::after{animation:none!important;transition:none!important}
}