.visual{overflow:hidden}
.visual>*:not(.login-ambient){position:relative;z-index:2}
.login-ambient{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.login-ambient span{position:absolute;display:block;border-radius:999px;filter:blur(1px);will-change:transform}
.login-ambient .orb-a{width:340px;height:340px;left:-120px;top:-110px;background:radial-gradient(circle,rgba(22,163,106,.3),rgba(22,163,106,0) 68%);animation:dteDriftA 13s ease-in-out infinite alternate}
.login-ambient .orb-b{width:520px;height:520px;right:-170px;top:18%;background:radial-gradient(circle,rgba(8,166,199,.3),rgba(8,166,199,0) 67%);animation:dteDriftB 16s ease-in-out infinite alternate}
.login-ambient .orb-c{width:420px;height:420px;left:22%;bottom:-260px;background:radial-gradient(circle,rgba(249,145,23,.18),rgba(249,145,23,0) 67%);animation:dteDriftC 18s ease-in-out infinite alternate}
.login-ambient:after{content:"";position:absolute;inset:-40%;background:linear-gradient(110deg,transparent 40%,rgba(255,255,255,.06) 49%,transparent 58%);transform:translateX(-38%);animation:dteScan 9s ease-in-out infinite}
.brand{min-height:126px}
.brand-motion{width:138px;height:126px;margin:-22px -6px -18px -25px;object-fit:contain;filter:drop-shadow(0 14px 26px rgba(0,0,0,.25))}
.brand-name{margin-left:-6px;text-shadow:0 2px 15px rgba(0,0,0,.25)}
.type-line{display:block;min-height:2.05em}
.type-cursor{display:inline-block;width:.055em;height:.82em;margin-left:.08em;border-radius:9px;background:#70e5ff;vertical-align:.02em;box-shadow:0 0 22px rgba(112,229,255,.8);animation:dteBlink .72s steps(1) infinite}
.intro p{min-height:3.4em;transition:opacity .25s ease,transform .25s ease}
.intro p.changing{opacity:.2;transform:translateY(4px)}
.feature{position:relative;overflow:hidden;transition:transform .35s ease,border-color .35s ease,background .35s ease,box-shadow .35s ease}
.feature:after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:linear-gradient(90deg,#4ade80,#22d3ee);transition:right .4s ease}
.feature.active{transform:translateY(-5px);border-color:rgba(112,229,255,.48);background:rgba(255,255,255,.13);box-shadow:0 14px 30px rgba(0,0,0,.13)}
.feature.active:after{right:0}
.visual-footer{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}
.visual-clock{font-size:12px;font-weight:850;color:#d6ebff;text-align:right;letter-spacing:.07em}
.visual-clock small{display:block;margin-bottom:4px;color:#81b7e8;font-size:8px;text-transform:uppercase}
.card{animation:dteCardIn .7s cubic-bezier(.2,.75,.25,1) both}
.login-side{position:relative;overflow:hidden}
.login-side:before{content:"";position:absolute;width:360px;height:360px;right:-180px;top:-170px;border-radius:50%;background:radial-gradient(circle,rgba(14,165,233,.16),transparent 68%);animation:dteSideGlow 11s ease-in-out infinite alternate}
.login-side .card{position:relative;z-index:1}
@keyframes dteDriftA{to{transform:translate(75px,55px) scale(1.12)}}
@keyframes dteDriftB{to{transform:translate(-100px,80px) scale(.88)}}
@keyframes dteDriftC{to{transform:translate(95px,-75px) scale(1.15)}}
@keyframes dteScan{0%,20%{transform:translateX(-42%)}65%,100%{transform:translateX(48%)}}
@keyframes dteBlink{50%{opacity:0}}
@keyframes dteCardIn{from{opacity:0;transform:translateY(20px) scale(.985)}to{opacity:1;transform:none}}
@keyframes dteSideGlow{to{transform:translate(-70px,80px) scale(1.25)}}
@media(max-width:1180px){.brand-motion{width:116px;height:108px}.intro h1{font-size:clamp(36px,4.7vw,58px)}.visual{padding-left:42px;padding-right:42px}}
@media(max-width:980px){.login-side:before{display:none}.mobile-brand img{width:96px;filter:drop-shadow(0 8px 16px rgba(15,42,73,.15))}}
@media(prefers-reduced-motion:reduce){.login-ambient span,.login-ambient:after,.type-cursor,.card,.login-side:before{animation:none!important}.feature{transition:none!important}}