:root{
  --ink-900:#071923;
  --ink-800:#0B2733;
  --ink-700:#0F3444;
  --line-soft:rgba(234,240,246,0.12);
  --paper:#FFFFFF;
  --paper-soft:#F6F8FA;
  --text-on-dark:#EBF3F6;
  --text-on-dark-muted:#8FAAB8;
  --text-ink:#122029;
  --text-muted:#5C6E78;
  --teal:#1C87A3;
  --teal-deep:#0A4B63;
  --amber:#FFAF0A;
  --amber-deep:#E0930A;
  --error:#C1443A;
  --error-bg:#FCEEEC;
  --radius:10px;
  --font-body:'Inter',system-ui,-apple-system,sans-serif;
  --font-display:'Space Grotesk',var(--font-body);
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  font-family:var(--font-body);
  color:var(--text-ink);
  background:var(--paper-soft);
  -webkit-font-smoothing:antialiased;
}

/* ===================== SHELL ===================== */
.shell{min-height:100vh;display:flex;}

/* ===================== BRAND PANEL ===================== */
.brand-panel{
  position:relative;
  width:44%;
  min-height:100vh;
  background:
    radial-gradient(60% 50% at 85% 8%, rgba(28,135,163,0.20) 0%, rgba(28,135,163,0) 60%),
    radial-gradient(120% 140% at 15% 0%, var(--ink-700) 0%, var(--ink-800) 45%, var(--ink-900) 100%);
  background-size:200% 200%, 100% 100%;
  animation:brandGlow 14s ease-in-out infinite;
  color:var(--text-on-dark);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:3rem 3.25rem;
  overflow:hidden;
}
@keyframes brandGlow{
  0%,100%{background-position:0% 0%, 0 0;}
  50%{background-position:100% 40%, 0 0;}
}
.brand-panel::before{
  content:"";
  position:absolute;inset:0;
  background:
    linear-gradient(180deg, rgba(11,22,38,0) 0%, rgba(11,22,38,0.55) 100%);
  pointer-events:none;
}
.orb{
  position:absolute;
  border-radius:50%;
  filter:blur(50px);
  pointer-events:none;
  z-index:1;
  opacity:.55;
}
.orb-1{
  width:280px;height:280px;
  background:radial-gradient(circle, rgba(28,135,163,0.55) 0%, rgba(28,135,163,0) 70%);
  top:-60px;right:-80px;
  animation:orbFloat1 12s ease-in-out infinite;
}
.orb-2{
  width:220px;height:220px;
  background:radial-gradient(circle, rgba(255,175,10,0.35) 0%, rgba(255,175,10,0) 70%);
  bottom:10%;left:-60px;
  animation:orbFloat2 16s ease-in-out infinite;
}
@keyframes orbFloat1{
  0%,100%{transform:translate(0,0) scale(1);}
  50%{transform:translate(-30px,40px) scale(1.15);}
}
@keyframes orbFloat2{
  0%,100%{transform:translate(0,0) scale(1);}
  50%{transform:translate(25px,-30px) scale(1.1);}
}
.net-canvas{
  position:absolute;
  inset:0;
  z-index:0;
  opacity:0.55;
}
.brand-top,.brand-mid,.brand-bottom{position:relative;z-index:2;}

.aptzion-lockup{display:flex;align-items:center;gap:.65rem;}
.aptzion-mark{
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  flex:none;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,0.35));
}
.aptzion-mark img{width:100%;height:100%;border-radius:50%;display:block;}
.aptzion-name{font-family:var(--font-display);font-weight:600;font-size:.95rem;letter-spacing:.02em;color:var(--text-on-dark);}
.aptzion-sub{font-size:.68rem;color:var(--text-on-dark-muted);letter-spacing:.06em;text-transform:uppercase;}

.brand-mid{margin-top:auto;margin-bottom:auto;padding:3rem 0;}
.surveyo-word{
  font-family:var(--font-display);
  font-weight:700;
  font-size:3.1rem;
  line-height:1;
  letter-spacing:-.01em;
  color:#fff;
  margin-bottom:.6rem;
  display:flex;
  align-items:center;
  gap:.15rem;
}
.surveyo-word .accent-o{
  background:linear-gradient(135deg, var(--amber) 0%, #FFD066 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  position:relative;
}
.surveyo-word .spark{
  width:14px;height:14px;
  margin-left:.3rem;
  color:var(--amber);
  animation:sparkPulse 2.4s ease-in-out infinite;
}
@keyframes sparkPulse{
  0%,100%{opacity:.55; transform:scale(.9) rotate(0deg);}
  50%{opacity:1; transform:scale(1.15) rotate(12deg);}
}
.surveyo-tag{
  font-size:.95rem;
  color:var(--text-on-dark-muted);
  max-width:360px;
  line-height:1.5;
  margin-bottom:2rem;
}
.desc-block{
  border-left:2px solid rgba(28,135,163,0.45);
  padding-left:1rem;
  max-width:420px;
  font-size:.83rem;
  line-height:1.65;
  color:var(--text-on-dark-muted);
}
.desc-block strong{color:var(--text-on-dark);font-weight:600;}

.powered-row{
  display:flex;align-items:center;gap:.75rem;
  padding-top:1.75rem;margin-top:1.75rem;
  border-top:1px solid var(--line-soft);
}
.dkonnect-mark{
  width:30px;height:30px;border-radius:50%;
  background:linear-gradient(135deg, var(--teal) 0%, var(--teal-deep) 100%);
  border:none;
  box-shadow:0 2px 8px rgba(10,75,99,0.45), inset 0 0 0 1px rgba(255,255,255,0.15);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:.62rem;font-weight:600;color:#fff;
  flex:none;
  overflow:hidden;
}
.dkonnect-mark img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;}
.powered-text{line-height:1.3;}
.powered-text .p1{font-size:.72rem;color:var(--text-on-dark-muted);}
.powered-text .p2{font-size:.78rem;font-weight:600;color:var(--text-on-dark);font-family:var(--font-display);}
.powered-text .p3{font-size:.68rem;color:var(--text-on-dark-muted);font-style:italic;}

.brand-bottom{font-size:.68rem;color:var(--text-on-dark-muted);}

/* ===================== FORM PANEL ===================== */
.form-panel{
  width:56%;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:2.5rem;
  background:var(--paper-soft);
}
.form-card{
  width:100%;
  max-width:440px;
}
.session-tag{
  display:inline-flex;align-items:center;gap:.4rem;
  font-family:var(--font-mono);
  font-size:.68rem;
  color:var(--text-muted);
  letter-spacing:.03em;
  margin-bottom:1.4rem;
}
.session-tag i{color:var(--teal-deep);}

/* progress */
.flow-progress{
  display:flex;align-items:center;gap:.4rem;
  margin-bottom:2rem;
}
.flow-progress .seg{
  flex:1;height:3px;border-radius:3px;background:#DCE4EC;position:relative;overflow:hidden;
}
.flow-progress .seg.done,.flow-progress .seg.active{background:var(--teal);}
.flow-labels{
  display:flex;justify-content:space-between;
  font-size:.66rem;color:var(--text-muted);
  letter-spacing:.03em;text-transform:uppercase;
  margin-top:.4rem;margin-bottom:1.75rem;
}
.flow-labels span.current{color:var(--ink-800);font-weight:600;}

h1.step-title{
  font-family:var(--font-display);
  font-size:1.5rem;font-weight:600;color:var(--ink-800);
  margin-bottom:.3rem;
}
p.step-sub{font-size:.85rem;color:var(--text-muted);margin-bottom:1.6rem;line-height:1.5;}

.form-label{font-size:.78rem;font-weight:600;color:var(--ink-800);}
.form-control{
  border:1.5px solid #DCE4EC;
  border-radius:8px;
  padding:.65rem .85rem;
  font-size:.92rem;
}
.form-control:focus{
  border-color:var(--teal);
  box-shadow:0 0 0 3px rgba(28,135,163,0.15);
}
.form-control.is-invalid{border-color:var(--error);}

.form-select{
  border:1.5px solid #DCE4EC;
  border-radius:8px;
  padding:.65rem 2.2rem .65rem .85rem;
  font-size:.92rem;
  color:var(--text-ink);
}
.form-select:focus{
  border-color:var(--teal);
  box-shadow:0 0 0 3px rgba(28,135,163,0.15);
}
.form-select.is-invalid{border-color:var(--error);}

.ticket-number-chip{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  font-family:var(--font-mono);
  font-weight:600;
  font-size:.95rem;
  color:var(--teal-deep);
  background:var(--paper-soft);
  border:1.5px dashed var(--teal);
  border-radius:8px;
  padding:.5rem 1rem;
  letter-spacing:.02em;
}

.pw-wrap{position:relative;}
.pw-toggle{
  position:absolute;right:.7rem;top:50%;transform:translateY(-50%);
  background:none;border:none;color:var(--text-muted);font-size:.9rem;padding:.2rem;cursor:pointer;
}
.pw-toggle:hover{color:var(--ink-800);}

.identity-chip{
  display:flex;align-items:center;justify-content:space-between;
  background:var(--paper);
  border:1.5px solid #DCE4EC;
  border-radius:8px;
  padding:.6rem .85rem;
  margin-bottom:1.4rem;
  font-size:.85rem;
}
.identity-chip .em{font-weight:600;color:var(--ink-800);word-break:break-all;}
.identity-chip button{
  background:none;border:none;color:var(--teal-deep);font-size:.76rem;font-weight:600;padding:0;cursor:pointer;
}

.btn-brand{
  background:var(--ink-800);
  border:none;color:#fff;
  font-weight:600;font-size:.9rem;
  padding:.7rem 1rem;border-radius:8px;
  width:100%;
  transition:background .15s ease, transform .1s ease;
}
.btn-brand:hover{background:var(--teal-deep);color:#fff;}
.btn-brand:active{transform:scale(0.99);}
.btn-brand:disabled{background:#B7C2CF;cursor:not-allowed;}
.btn-brand .spinner-border{width:.9rem;height:.9rem;margin-right:.45rem;}

.link-quiet{
  font-size:.8rem;color:var(--teal-deep);text-decoration:none;font-weight:600;
}
.link-quiet:hover{color:var(--ink-800);text-decoration:underline;}

.alert-generic{
  background:var(--error-bg);
  border:1px solid rgba(193,68,58,0.25);
  color:var(--error);
  border-radius:8px;
  padding:.7rem .9rem;
  font-size:.82rem;
  display:flex;gap:.55rem;align-items:flex-start;
  margin-bottom:1.2rem;
}
.alert-generic i{margin-top:.15rem;flex:none;}

.toast-note{
  background:#EAF4F7;border:1px solid rgba(28,135,163,0.25);color:var(--teal-deep);
  border-radius:8px;padding:.65rem .85rem;font-size:.8rem;margin-bottom:1.2rem;
  display:flex;align-items:center;gap:.5rem;
}

/* OTP boxes */
.otp-row{display:flex;gap:.6rem;margin-bottom:.6rem;}
.otp-box{
  width:100%;
  aspect-ratio:1/1;
  text-align:center;
  font-family:var(--font-mono);
  font-size:1.35rem;
  font-weight:600;
  border:1.5px solid #DCE4EC;
  border-radius:8px;
  color:var(--ink-800);
}
.otp-box:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(28,135,163,0.15);outline:none;}
.otp-box.is-invalid{border-color:var(--error);}

.otp-meta{
  display:flex;justify-content:space-between;align-items:center;
  font-size:.78rem;color:var(--text-muted);margin-bottom:1.4rem;
}
.otp-meta .timer{font-family:var(--font-mono);color:var(--ink-800);font-weight:600;}
.resend-btn{background:none;border:none;color:var(--teal-deep);font-weight:600;font-size:.78rem;padding:0;}
.resend-btn:disabled{color:#B7C2CF;cursor:not-allowed;}

.shake{animation:shake .4s;}
@keyframes shake{
  10%,90%{transform:translateX(-1px);}
  20%,80%{transform:translateX(2px);}
  30%,50%,70%{transform:translateX(-4px);}
  40%,60%{transform:translateX(4px);}
}

/* ===================== ENTRANCE / MOTION SYSTEM ===================== */
@keyframes fadeInUp{
  from{opacity:0; transform:translateY(14px);}
  to{opacity:1; transform:translateY(0);}
}
@keyframes fadeInScale{
  from{opacity:0; transform:scale(.96);}
  to{opacity:1; transform:scale(1);}
}
@keyframes stepIn{
  from{opacity:0; transform:translateX(18px);}
  to{opacity:1; transform:translateX(0);}
}
@keyframes stepOut{
  from{opacity:1; transform:translateX(0);}
  to{opacity:0; transform:translateX(-18px);}
}
.reveal{opacity:0; animation:fadeInUp .7s cubic-bezier(.2,.7,.2,1) forwards;}
.reveal-1{animation-delay:.05s;}
.reveal-2{animation-delay:.16s;}
.reveal-3{animation-delay:.27s;}
.reveal-4{animation-delay:.38s;}
.reveal-5{animation-delay:.49s;}

.step-panel{animation:stepIn .45s cubic-bezier(.2,.7,.2,1) both;}
.step-panel.leaving{animation:stepOut .25s ease both;}

/* logo mark pulse */
.aptzion-mark, .dkonnect-mark{transition:transform .35s cubic-bezier(.3,1.6,.4,1);}
.aptzion-lockup:hover .aptzion-mark{transform:rotate(-6deg) scale(1.08);}
.powered-row:hover .dkonnect-mark{transform:rotate(6deg) scale(1.08);}

/* progress fill sweep */
.flow-progress .seg{transition:background .5s ease;}
.flow-progress .seg.active::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.9) 50%, rgba(255,255,255,0) 100%);
  animation:segSweep 1.6s ease-in-out infinite;
}

@keyframes segSweep{
  0%{transform:translateX(-100%);}
  100%{transform:translateX(100%);}
}

/* button shine */
.btn-brand{position:relative; overflow:hidden;}
.btn-brand::after{
  content:"";
  position:absolute; top:0; left:-60%;
  width:40%; height:100%;
  background:linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.18) 50%, rgba(255,255,255,0) 100%);
  transform:skewX(-20deg);
  transition:left .55s ease;
}
.btn-brand:hover::after{left:130%;}

/* otp fill pulse */
.otp-box.filled{animation:otpPop .28s cubic-bezier(.3,1.6,.4,1);}
@keyframes otpPop{
  0%{transform:scale(1);}
  40%{transform:scale(1.12); border-color:var(--teal);}
  100%{transform:scale(1);}
}

/* success checkmark */
.success-icon{position:relative;}
.success-ring{
  position:absolute; inset:-6px;
  border-radius:50%;
  border:2px solid rgba(28,135,163,0.35);
  animation:ringPulse 1.8s ease-out infinite;
}
@keyframes ringPulse{
  0%{transform:scale(.85); opacity:.9;}
  100%{transform:scale(1.6); opacity:0;}
}
.check-draw{stroke-dasharray:40; stroke-dashoffset:40; animation:drawCheck .5s .15s ease forwards;}
@keyframes drawCheck{ to{stroke-dashoffset:0;} }

.spin-slow{animation:spinSlow 1s linear infinite;}
@keyframes spinSlow{ to{transform:rotate(360deg);} }

.pop-in{animation:fadeInUp .35s cubic-bezier(.2,.7,.2,1);}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
}

.footer-links{
  margin-top:2.2rem;padding-top:1.2rem;border-top:1px solid #E3E9EF;
  display:flex;flex-wrap:wrap;gap:1rem;
  font-size:.74rem;
}
.footer-links a{color:var(--text-muted);text-decoration:none;}
.footer-links a:hover{color:var(--teal-deep);text-decoration:underline;}

.audit-note{
  font-size:.68rem;color:var(--text-muted);
  display:flex;align-items:center;gap:.4rem;margin-top:1.4rem;
}

/* success state */
.success-wrap{text-align:center;padding:1rem 0 .5rem;}
.success-icon{
  width:56px;height:56px;border-radius:50%;
  background:#EAF4F7;color:var(--teal-deep);
  display:flex;align-items:center;justify-content:center;
  font-size:1.5rem;margin:0 auto 1.1rem;
}

/* modal tweaks */
.modal-content{border-radius:12px;border:none;}
.modal-header{border-bottom:1px solid #E3E9EF;}
.modal-title{font-family:var(--font-display);font-weight:600;font-size:1.1rem;color:var(--ink-800);}
.policy-body{font-size:.85rem;line-height:1.7;color:var(--text-ink);}
.policy-body h6{font-family:var(--font-display);font-weight:600;font-size:.85rem;margin-top:1rem;color:var(--ink-800);}
.ack-check-wrap{
  background:var(--paper-soft);border:1px solid #E3E9EF;border-radius:8px;
  padding:.85rem 1rem;display:flex;gap:.7rem;align-items:flex-start;margin-top:1rem;
}
.ack-check-wrap label{font-size:.8rem;line-height:1.5;color:var(--ink-800);}
.form-check-input:checked{background-color:var(--teal);border-color:var(--teal);}

@media (max-width: 900px){
  .brand-panel{display:none;}
  .form-panel{width:100%;}
}

/* ===================== WELCOME / ENTRY SCREEN ===================== */
.shell-hidden{display:none !important;}

#welcomeScreen{
  position:fixed; inset:0; z-index:9999;
  background:
    radial-gradient(55% 50% at 82% 12%, rgba(255,175,10,0.14) 0%, rgba(255,175,10,0) 60%),
    radial-gradient(120% 140% at 18% 0%, var(--ink-700) 0%, var(--ink-800) 45%, var(--ink-900) 100%);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:var(--text-on-dark);
  transition:opacity .6s ease, visibility .6s ease;
}
#welcomeScreen.fade-out{opacity:0; visibility:hidden; pointer-events:none;}

.w-logo-wrap{
  width:104px; height:104px; margin-bottom:1.5rem;
  opacity:0; animation:logoPop .9s cubic-bezier(.2,.85,.25,1.15) forwards;
  filter:drop-shadow(0 10px 34px rgba(255,175,10,0.35));
}
.w-logo-wrap img{width:100%;height:100%;display:block;}
@keyframes logoPop{
  from{opacity:0; transform:scale(.45) rotate(-18deg);}
  to{opacity:1; transform:scale(1) rotate(0);}
}

.w-company{
  font-family:var(--font-mono); font-size:.78rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--text-on-dark-muted); opacity:0; animation:fadeInUp .6s ease forwards; animation-delay:.85s;
}
.w-divider{
  height:1px; width:0; margin:1.05rem 0;
  background:linear-gradient(90deg, transparent, var(--amber), transparent);
  animation:lineGrow .7s ease forwards; animation-delay:1.2s;
}
@keyframes lineGrow{ from{width:0;opacity:0;} to{width:150px;opacity:1;} }

.w-word{
  font-family:var(--font-display); font-weight:700; font-size:3.2rem; color:#fff;
  display:flex; align-items:center; gap:.2rem;
  opacity:0; animation:fadeInUp .7s cubic-bezier(.2,.7,.2,1) forwards; animation-delay:1.45s;
}
.w-word .accent-o{
  background:linear-gradient(135deg, var(--amber) 0%, #FFD066 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.w-tag{
  font-size:.84rem; color:var(--text-on-dark-muted); text-align:center; max-width:340px; line-height:1.5;
  margin-top:.5rem;
  opacity:0; animation:fadeInUp .6s ease forwards; animation-delay:2s;
}
.w-progress{
  width:160px; height:2px; border-radius:2px; overflow:hidden;
  background:rgba(255,255,255,0.12); margin-top:1.9rem;
  opacity:0; animation:fadeInUp .5s ease forwards; animation-delay:2.35s;
}
.w-progress-fill{
  height:100%; width:0%; border-radius:2px;
  background:linear-gradient(90deg, var(--teal), var(--amber));
  animation:fillBar 1.5s ease forwards; animation-delay:2.45s;
}
@keyframes fillBar{ to{width:100%;} }

.w-skip{
  position:absolute; bottom:2rem; right:2rem;
  background:none; border:1px solid var(--line-soft); color:var(--text-on-dark-muted);
  font-size:.72rem; padding:.45rem 1rem; border-radius:20px; cursor:pointer;
  opacity:0; animation:fadeInUp .5s ease forwards; animation-delay:1s;
  transition:color .2s ease, border-color .2s ease;
}
.w-skip:hover{color:#fff; border-color:rgba(255,255,255,0.4);}