/* ── RESET & BASE ─────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;}
html{height:100%;overflow:hidden;}
body{font-family:'Nunito',sans-serif;font-size:.9rem;font-weight:400;line-height:1.5;background:#F8F4FF;color:#18013A;height:100%;overflow:hidden;-webkit-font-smoothing:antialiased;margin:0;padding:0;}

/* ── ANIMATED BACKGROUND ─────────────────────────────────────────────── */
.lp-bg-canvas{position:fixed;inset:0;z-index:0;background:linear-gradient(135deg,#FAF7FF 0%,#F0E8FF 40%,#EDE0FF 70%,#F5EFFF 100%);overflow:hidden;}
.lp-orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:.55;animation:lpDrift 12s ease-in-out infinite alternate;}
.lp-orb-1{width:520px;height:520px;background:radial-gradient(circle,#C084FC 0%,#7C3AED 60%,transparent 100%);top:-140px;left:-100px;animation-delay:0s;}
.lp-orb-2{width:380px;height:380px;background:radial-gradient(circle,#A78BFA 0%,#6D28D9 60%,transparent 100%);bottom:-80px;right:-60px;animation-delay:-4s;}
.lp-orb-3{width:220px;height:220px;background:radial-gradient(circle,#DDD6FE 0%,#8B5CF6 70%,transparent 100%);top:55%;left:38%;animation-delay:-8s;}
.lp-mesh{position:absolute;inset:0;background-image:radial-gradient(rgba(139,92,246,.09) 1px,transparent 1px);background-size:36px 36px;opacity:.6;}
@keyframes lpDrift{0%{transform:translate(0,0) scale(1);}100%{transform:translate(40px,30px) scale(1.08);}}

/* ── PAGE GRID ───────────────────────────────────────────────────────── */
.lp-page-wrap{position:relative;z-index:1;display:grid;grid-template-columns:1fr 30%;height:100vh;overflow:hidden;}

/* ── LEFT PANEL ──────────────────────────────────────────────────────── */
.lp-left-panel{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:12px 16px;position:relative;overflow:hidden;animation:lpPanelIn .8s cubic-bezier(.4,0,.2,1) .1s both;}
.lp-left-logo-bar{position:absolute;top:16px;left:36px;display:flex;align-items:center;gap:10px;padding: 4px 4px;}
.lp-brand-logo-img{height:45px;width:auto;object-fit:contain;filter:drop-shadow(0 2px 6px rgba(75,15,168,.50));z-index: 1;}
.lp-brand-name{font-size:1.05rem;font-weight:700;color:#4B0FA8;letter-spacing:-.3px;}

/* ── SLIDE ARENA ─────────────────────────────────────────────────────── */
.lp-slide-arena{width:100%;max-width:88%;position:relative;min-height:400px;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.lp-slide{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;opacity:0;transform:translateX(60px) scale(.97);transition:opacity .6s cubic-bezier(.4,0,.2,1),transform .6s cubic-bezier(.4,0,.2,1);pointer-events:none;}
.lp-slide.lp-active{opacity:1;transform:translateX(0) scale(1);pointer-events:auto;}
.lp-slide.lp-exit{opacity:0;transform:translateX(-60px) scale(.97);}

/* ── 3D SCENE ────────────────────────────────────────────────────────── */
.lp-scene{width:88%;height:240px;position:relative;perspective:1100px;}
.lp-scene-inner{width:100%;height:100%;position:relative;}

/* ── SLIDE 3 — TRACKOBOX MAP CARD ───────────────────────────────────── */
.lp-s3-map{position:absolute;width:286px;height:174px;background:linear-gradient(145deg,#1E1256 0%,#3B0F8A 50%,#4B0FA8 100%);border-radius:22px;top:50%;left:50%;transform:translate(-50%,-50%) rotateX(8deg) rotateY(8deg);box-shadow:0 28px 55px rgba(75,15,168,.38);overflow:hidden;}
.lp-s3-map-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(139,92,246,.25) 1px,transparent 1px),linear-gradient(90deg,rgba(139,92,246,.25) 1px,transparent 1px);background-size:28px 28px;}
.lp-pin{position:absolute;display:flex;flex-direction:column;align-items:center;}
.lp-pin-icon{width:26px;height:26px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);display:flex;align-items:center;justify-content:center;}
.lp-pin-icon i{transform:rotate(45deg);font-size:.7rem;color:#fff;}
.lp-pin-pulse{position:absolute;width:40px;height:40px;border-radius:50%;border:2px solid;opacity:0;animation:lpPulse 2s ease-out infinite;}
@keyframes lpPulse{0%{transform:scale(.5);opacity:.8;}100%{transform:scale(1.6);opacity:0;}}
.lp-pin-a{top:22px;left:36px;}.lp-pin-a .lp-pin-icon{background:linear-gradient(135deg,#22C55E,#16A34A);}.lp-pin-a .lp-pin-pulse{border-color:#22C55E;top:-7px;left:-7px;}
.lp-pin-b{bottom:26px;right:38px;}.lp-pin-b .lp-pin-icon{background:linear-gradient(135deg,#F59E0B,#D97706);}.lp-pin-b .lp-pin-pulse{border-color:#F59E0B;top:-7px;left:-7px;animation-delay:1s;}
.lp-truck{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);animation:lpTruck 6s ease-in-out infinite;}
@keyframes lpTruck{0%,100%{transform:translate(-50%,-50%);}25%{transform:translate(-20%,-65%);}75%{transform:translate(-70%,-40%);}}
.lp-truck-ico{width:36px;height:36px;background:linear-gradient(135deg,#F97316,#EA580C);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(249,115,22,.5);font-size:.9rem;color:#fff;}

/* ── SLIDE 1 — SALESMATIC CHART CARD ────────────────────────────────── */
.lp-s1-chart{position:absolute;width:274px;height:164px;background:linear-gradient(135deg,#4B0FA8 0%,#7B2FE8 100%);border-radius:22px;top:50%;left:50%;transform:translate(-50%,-50%) rotateX(12deg) rotateY(-12deg);box-shadow:0 30px 60px rgba(75,15,168,.35);overflow:hidden;}
.lp-s1-chart::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.15) 0%,transparent 60%);}
.lp-s1-bars{position:absolute;top:18px;left:0;right:0;display:flex;align-items:flex-end;justify-content:center;gap:5px;height:62px;padding:0 16px;}
.lp-s1-bar{width:20px;border-radius:4px 4px 0 0;background:rgba(255,255,255,.3);animation:lpBarGrow 2s ease-out forwards;transform-origin:bottom;}
@keyframes lpBarGrow{from{transform:scaleY(0);}to{transform:scaleY(1);}}
.lp-s1-stats{position:absolute;bottom:15px;left:0;right:0;display:flex;justify-content:space-around;padding:0 14px;}
.lp-stat-val{font-size:1.3rem;font-weight:700;color:#fff;line-height:1;text-align:center;}
.lp-stat-lbl{font-size:.62rem;color:rgba(255,255,255,.7);margin-top:2px;text-align:center;}

/* ── SLIDE 2 — DISTOMATIC DONUT CARD ────────────────────────────────── */
.lp-s2-board{position:absolute;width:280px;height:178px;background:linear-gradient(135deg,#2D1B69 0%,#4C1D95 60%,#6D28D9 100%);border-radius:22px;top:50%;left:50%;transform:translate(-50%,-50%) rotateX(10deg) rotateY(-10deg);box-shadow:0 28px 55px rgba(75,15,168,.38);overflow:hidden;}
.lp-s2-hdr{position:absolute;top:12px;left:15px;right:15px;display:flex;align-items:center;justify-content:space-between;}
.lp-s2-title{font-size:.6rem;font-weight:600;color:rgba(255,255,255,.7);text-transform:uppercase;letter-spacing:.8px;}
.lp-s2-badge{background:rgba(34,197,94,.2);color:#4ADE80;font-size:.55rem;font-weight:600;padding:2px 7px;border-radius:20px;border:1px solid rgba(74,222,128,.3);}
.lp-s2-donut-wrap{position:absolute;top:50%;left:15px;transform:translateY(-50%);}
.lp-s2-donut{width:96px;height:96px;position:relative;}
.lp-s2-donut svg{transform:rotate(-90deg);}
.lp-s2-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.lp-s2-val{font-size:1.2rem;font-weight:700;color:#fff;line-height:1;}
.lp-s2-sub{font-size:.5rem;color:rgba(255,255,255,.6);}
.lp-s2-legend{position:absolute;right:14px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:6px;}
.lp-s2-leg{display:flex;align-items:center;gap:6px;}
.lp-s2-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.lp-s2-ltxt{font-size:.58rem;color:rgba(255,255,255,.8);}
.lp-s2-lval{font-size:.65rem;font-weight:600;color:#fff;}
.lp-s2-bottom{position:absolute;bottom:10px;left:15px;right:15px;display:flex;gap:6px;}
.lp-s2-mini{flex:1;background:rgba(255,255,255,.1);border-radius:8px;padding:6px 8px;text-align:center;}
.lp-s2-mini-val{font-size:.85rem;font-weight:700;color:#fff;}
.lp-s2-mini-lbl{font-size:.52rem;color:rgba(255,255,255,.6);}

/* ── FLOAT CARDS (shared) ────────────────────────────────────────────── */
.lp-fc{position:absolute;z-index:10;background:rgba(255,255,255,.92);backdrop-filter:blur(14px);border-radius:14px;padding:10px 14px;border:1px solid rgba(139,92,246,.2);box-shadow:0 8px 28px rgba(75,15,168,.15);}
.lp-fc-r{top:-10px;right:-22px;width:120px;animation:lpFcA 4s ease-in-out infinite alternate;}
.lp-fc-l{bottom:-14px;left:-22px;width:130px;animation:lpFcB 4.5s ease-in-out infinite alternate;}
@keyframes lpFcA{0%{transform:translateY(0) rotate(-2deg);}100%{transform:translateY(-12px) rotate(1deg);}}
@keyframes lpFcB{0%{transform:translateY(0) rotate(1deg);}100%{transform:translateY(-8px) rotate(-2deg);}}
.lp-fc-ico{font-size:1.3rem;margin-bottom:4px;}
.lp-fc-ico img{width:22px;height:22px;object-fit:contain;display:block;}
.lp-fc-ttl{font-size:.72rem;font-weight:600;color:#4B0FA8;}
.lp-fc-val{font-size:1.2rem;font-weight:700;color:#18013A;}
.lp-fc-sub{font-size:.65rem;color:#A0A0BC;}

/* ── ORBIT RINGS ─────────────────────────────────────────────────────── */
.lp-orbit{position:absolute;border-radius:50%;border:2px dashed rgba(139,92,246,.35);}
.lp-orbit-o{width:305px;height:305px;top:50%;left:50%;transform:translate(-50%,-50%);animation:lpSpin 18s linear infinite;}
.lp-orbit-i{width:214px;height:214px;top:50%;left:50%;transform:translate(-50%,-50%);animation:lpSpin 12s linear infinite reverse;}
.lp-orbit-dot{position:absolute;width:12px;height:12px;border-radius:50%;background:linear-gradient(135deg,#7B2FE8,#A855F7);top:-6px;left:50%;transform:translateX(-50%);box-shadow:0 0 12px rgba(123,47,232,.6);}
@keyframes lpSpin{to{transform:translate(-50%,-50%) rotate(360deg);}}

/* ── SLIDE TEXT ──────────────────────────────────────────────────────── */
.lp-slide-txt{text-align:center;max-width:none;}
.lp-prod-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(252, 252, 252);border:1px solid rgba(139,92,246,.25);border-radius:30px;padding:4px 12px 4px 6px;margin-bottom:8px;}
.lp-prod-img{height:28px;width:auto;object-fit:contain;}
.lp-prod-name{font-size:.78rem;font-weight:600;color:#4B0FA8;}
.lp-headline{font-size:1.6rem;font-weight:700;color:#18013A;letter-spacing:-.5px;line-height:1.25;margin-bottom:4px;}
.lp-headline span{background:linear-gradient(135deg,#4B0FA8,#A855F7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.lp-desc{font-size:1rem;color:#19191b;line-height:1.5;max-width:95%;margin:0 auto 6px;font-weight: 700;}
.lp-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;}
.lp-chip{background:rgba(139,92,246,.08);border:1px solid rgba(139,92,246,.2);border-radius:20px;padding:4px 12px;font-size:.82rem;font-weight:700;color:#4B0FA8;}

/* ── DOTS + NAV ──────────────────────────────────────────────────────── */
.lp-dots{display:flex;gap:8px;margin-top:10px;justify-content:center;}
.lp-dot{width:8px;height:8px;border-radius:50%;background:rgba(139,92,246,.2);cursor:pointer;transition:all .35s cubic-bezier(.4,0,.2,1);}
.lp-dot.lp-dot-on{width:24px;border-radius:4px;background:linear-gradient(90deg,#4B0FA8,#7B2FE8);}
.lp-dot:hover{background:rgba(139,92,246,.45);}

/* ── RIGHT PANEL ─────────────────────────────────────────────────────── */
.lp-right-panel{display:flex;align-items:center;justify-content:center;padding:16px 28px;height:100%;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none;background:rgba(255, 255, 255, 0.62);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-left:1px solid rgba(139,92,246,.12);position:relative;animation:lpPanelIn .8s cubic-bezier(.4,0,.2,1) .25s both;}
.lp-right-panel::-webkit-scrollbar{display:none;}
.lp-right-panel::before{content:'';position:absolute;inset:0;background:linear-gradient(160deg,rgba(255,255,255,.85) 0%,rgba(243,232,255,.4) 100%);pointer-events:none;}
@keyframes lpPanelIn{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}

/* ── LOGIN CARD ──────────────────────────────────────────────────────── */
.lp-card{position:relative;z-index:1;width: 100%;
    max-width: 440px;background: #fff;padding: 12px;
    border-radius: 22px;box-shadow: 0 30px 80px rgb(0 0 0 / .12);border: 1px solid rgb(112 32 129 / .08);transition: 0.3s ease;}

/* ── LOGO SECTION ────────────────────────────────────────────────────── */
.lp-logo-row{display:flex;align-items:center;gap:12px;margin-bottom:6px;justify-content: center;}
.lp-card-logo-img{height:60px;width:auto;object-fit:contain;flex-shrink:0;filter:drop-shadow(0 2px 8px rgba(75,15,168,.15));}
.lp-logo-words{display:flex;flex-direction:column;}
.lp-logo-name{font-size:1.1rem;font-weight:800;color:#18013A;letter-spacing:-.3px;line-height:1.1;}
.lp-logo-tag{font-size:.68rem;color:#A0A0BC;font-weight:400;}

/* ── HEADING ─────────────────────────────────────────────────────────── */
.lp-title{font-size:1.5rem;font-weight:700;color:#18013A;letter-spacing:-.5px;line-height:1.2;margin-bottom:0px;display: flex;justify-content: center;}
.lp-subtitle{font-size:.85rem;color:#6B6B8A;margin-bottom:0;display: flex;justify-content: center;}
.lp-divider{height:1px;background:linear-gradient(90deg,transparent,rgba(139,92,246,.15),transparent);margin:10px 0;}

/* ── FIELD GROUPS ────────────────────────────────────────────────────── */
.lp-fgroup{display:flex;flex-direction:column;gap:10px;margin-bottom:4px;}
.lp-fwrap{display:flex;flex-direction:column;gap:5px;}
.lp-flabel{font-size:.75rem;font-weight:600;color:#6B6B8A;letter-spacing:.2px;transition:color .25s;}
.lp-finner{position:relative;}
.lp-ficon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:#A0A0BC;font-size:.82rem;transition:color .25s;pointer-events:none;z-index:2;}
.lp-finner:focus-within .lp-ficon{color:#7B2FE8;}
.lp-fwrap:focus-within .lp-flabel{color:#7B2FE8;}
.lp-pw-eye{position:absolute;right:13px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:#A0A0BC;font-size:.82rem;padding:2px 4px;transition:color .25s;z-index:2;}
.lp-pw-eye:hover{color:#7B2FE8;}

/* ── INPUT FIELD (overrides Bootstrap .form-control) ─────────────────── */
.input_field{
  width:100%!important;
  height:48px!important;
  padding:12px 14px 12px 40px!important;
  border:1.5px solid rgba(139,92,246,.18)!important;
  border-radius:12px!important;
  background:rgba(255,255,255,.88)!important;
  font-family:'Nunito',sans-serif!important;
  font-size:.88rem!important;
  color:#18013A!important;
  outline:none!important;
  transition:border-color .25s,box-shadow .25s,background .25s!important;
  box-shadow:0 2px 8px rgba(75,15,168,.04)!important;
  display:block!important;
}
.input_field::placeholder{color:#A0A0BC;font-size:.85rem;}
.input_field:focus{
  border-color:#7B2FE8!important;
  background:#fff!important;
  box-shadow:0 0 0 4px rgba(123,47,232,.1),0 2px 8px rgba(75,15,168,.06)!important;
}
/* OTP: no left-icon, centered digits */
#otp_digit.input_field{padding-left:14px!important;letter-spacing:6px;text-align:center;font-weight:700;font-size:1rem!important;}
/* Password field: room for eye toggle */
#Password.input_field{padding-right:42px!important;}
/* Hide native browser password-reveal eye (Edge / IE / Chrome) */
#Password::-ms-reveal,
#Password::-ms-clear{display:none;}
#Password::-webkit-textfield-decoration-container{display:none;}

/* ── MESSAGE / ERROR ─────────────────────────────────────────────────── */
.message{
  background:rgba(254,226,226,.9)!important;
  border:1px solid rgba(252,165,165,.5)!important;
  border-left:3px solid #EF4444!important;
  color:#991b1b!important;
  padding:10px 14px!important;
  border-radius:10px!important;
  font-size:.8rem!important;
  margin-bottom:12px!important;
  backdrop-filter:blur(4px);
  display:none;
}

/* ── BUTTONS ─────────────────────────────────────────────────────────── */
button.Submit,button.next{
  height:48px!important;width:100%!important;
  border-radius:12px!important;
  background:linear-gradient(135deg,#4B0FA8 0%,#7B2FE8 60%,#A855F7 100%)!important;
  border:none!important;color:#fff!important;
  font-family:'Nunito',sans-serif!important;font-weight:700!important;font-size:.92rem!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;
  position:relative!important;overflow:hidden!important;
  box-shadow:0 8px 28px rgba(75,15,168,.35)!important;
  cursor:pointer!important;transition:transform .25s,box-shadow .25s!important;letter-spacing:.2px!important;
}
button.Submit::before,button.next::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.18) 0%,transparent 60%);opacity:0;transition:opacity .25s;}
button.Submit:hover,button.next:hover{transform:translateY(-2px)!important;box-shadow:0 14px 40px rgba(75,15,168,.42)!important;}
button.Submit:hover::before,button.next:hover::before{opacity:1;}
button.Submit:active,button.next:active{transform:translateY(0)!important;}
button.Submit *,button.next *{color:#fff!important;}

/* ── BACK BUTTON ─────────────────────────────────────────────────────── */
#back{
  cursor:pointer;background:linear-gradient(135deg,#4B0FA8,#7B2FE8)!important;
  color:#fff!important;border-radius:50%;width:34px;height:34px;
  display:none;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(75,15,168,.3);border:none;
  margin:6px auto 0;transition:transform .2s,box-shadow .2s;
  font-size:.85rem;
}
#back:hover{transform:scale(1.1);box-shadow:0 6px 20px rgba(75,15,168,.45);}

/* ── RESEND OTP ───────────────────────────────────────────────────────── */
.lp-resend-row{display:flex;justify-content:center;}
#resendOtp{color:#7B2FE8;font-size:.8rem;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:5px;padding:5px 14px;border-radius:20px;background:rgba(139,92,246,.08);border:1px solid rgba(139,92,246,.2);transition:background .2s;text-decoration:none;}
#resendOtp:hover{background:rgba(139,92,246,.16);}
#timer{font-size:.75rem;color:#A0A0BC;font-weight:600;}

/* ── FOOTER ──────────────────────────────────────────────────────────── */
.lp-foot{text-align:center;margin-top:10px;padding-top:10px;border-top:1px solid rgba(139,92,246,.1);}
.lp-foot-links{font-size:.72rem;color:#A0A0BC;margin-bottom:10px;}
.lp-foot-links a{color:#7B2FE8;text-decoration:none;font-weight:500;}
.lp-foot-links a:hover{text-decoration:underline;}
.lp-foot-powered{display:flex;align-items:center;justify-content:center;gap:6px;}
.lp-foot-powered span{font-size:.7rem;color:#A0A0BC;}

/* ── LINKS ────────────────────────────────────────────────────────────── */
.lp-card a{color:#7B2FE8;font-weight:500;}
.lp-card a:hover{color:#4B0FA8;}

/* ── PARTICLES ────────────────────────────────────────────────────────── */
.lp-particle{position:fixed;border-radius:50%;pointer-events:none;opacity:0;animation:lpPFloat linear infinite;z-index:0;}
@keyframes lpPFloat{0%{opacity:0;transform:translateY(100vh) scale(0);}10%{opacity:.6;}90%{opacity:.3;}100%{opacity:0;transform:translateY(-100px) scale(1);}}

/* ── PARALLAX ─────────────────────────────────────────────────────────── */
.lp-parallax{transition:transform .1s linear;}

/* ── RESPONSIVE ───────────────────────────────────────────────────────── */

/* ── Tablet landscape (1050px–1280px): tighten desktop layout ─────────── */
@media(max-width:1280px) and (min-width:1051px){
  .lp-page-wrap{grid-template-columns:1fr 34%;}
}

/* ── Tablet & Mobile (<1050px): hide slide panel, full-width login ──────── */
@media(max-width:1050px){
  html{height:auto;overflow-y:auto;}
  body{height:auto;overflow-y:auto;}
  .lp-page-wrap{display:block;height:auto;min-height:100vh;overflow:visible;}
  .lp-left-panel{display:none;}
  .lp-right-panel{
    width:100%;
    min-height:100vh;
    height:auto;
    overflow-y:visible;
    scrollbar-width:auto;
    -ms-overflow-style:auto;
    border-left:none;
    padding:48px 40px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,.75);
  }
  .lp-right-panel::-webkit-scrollbar{display:block;}
  .lp-card{max-width:460px;width:100%;}
}

/* ── Mobile (<600px): reduce padding ──────────────────────────────────── */
@media(max-width:600px){
  .lp-right-panel{padding:40px 24px;}
  .lp-card{max-width:100%;}
}

/* ── Small mobile (<400px) ─────────────────────────────────────────────── */
@media(max-width:400px){
  .lp-right-panel{padding:32px 16px;}
}