/* =========================================
   LENDENGINE v3 · CLARITY DESIGN SYSTEM
   Clean · Professional · Modern Fintech
   ========================================= */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,600;0,9..144,700;0,9..144,800;1,9..144,300;1,9..144,600;1,9..144,700&display=swap');

/* ── TOKENS ── */
:root {
  /* Whites & Surfaces */
  --white:      #FFFFFF;
  --off:        #F7F8FC;
  --surface:    #EEF0F7;
  --border:     #E4E7F0;
  --border-hi:  #CDD2E5;

  /* Ink */
  --ink:        #0A0C12;
  --ink-2:      #1E2230;
  --ink-3:      #3A3F52;
  --text-s:     #6B7191;
  --text-m:     #9DA3BB;

  /* Brand — Electric Blue */
  --blue:       #c725eb;
  --blue-light: #3B72F5;
  --blue-pale:  #EBF0FF;
  --blue-glow:  rgba(37,99,235,0.18);

  /* Accent — Amber (data & highlights) */
  --amber:      #F59E0B;
  --amber-pale: #FEF9EC;

  /* Dark section */
  --dark:       #080B14;
  --dark-2:     #0E1220;
  --dark-3:     #151B2E;
  --dark-border: rgba(255,255,255,0.08);

  /* Status */
  --ok:   #059669;
  --warn: #D97706;
  --fail: #DC2626;

  /* Typography */
  --font-d: 'Fraunces', Georgia, serif;
  --font-b: 'Manrope', system-ui, sans-serif;

  /* Scale */
  --t-xs:  0.72rem;
  --t-sm:  0.875rem;
  --t-md:  0.8rem;
  --t-lg:  1.125rem;
  --t-xl:  1.35rem;
  --t-2xl: 1.75rem;
  --t-3xl: 2.25rem;
  --t-4xl: 3rem;
  --t-5xl: 4rem;
  --t-6xl: 5.25rem;
  --t-7xl: 7rem;

  /* Space */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:24px;
  --s8:32px;--s10:40px;--s12:48px;--s16:64px;--s20:80px;--s24:96px;--s32:128px;

  /* Radius */
  --r-sm:  6px;
  --r-md:  10px;
  --r-lg:  16px;
  --r-xl:  22px;
  --r-2xl: 32px;
  --r-pill:9999px;

  /* Shadows */
  --sh-sm:  0 1px 4px rgba(10,12,18,.06), 0 2px 8px rgba(10,12,18,.04);
  --sh-md:  0 4px 16px rgba(10,12,18,.08), 0 2px 6px rgba(10,12,18,.05);
  --sh-lg:  0 12px 40px rgba(10,12,18,.12), 0 4px 12px rgba(10,12,18,.06);
  --sh-xl:  0 24px 64px rgba(10,12,18,.15), 0 8px 24px rgba(10,12,18,.08);
  --sh-blue: 0 8px 32px rgba(37,99,235,.24);

  /* Motion */
  --ease: cubic-bezier(0.16,1,0.3,1);
  --t-fast: 130ms;
  --t-base: 240ms;
  --t-slow: 420ms;

  --max-w:  1280px;
  --nav-h:  72px;
}

/* ── RESET ── */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:16px; scroll-behavior:smooth; -webkit-font-smoothing:antialiased; }
body { font-family:var(--font-b); background:var(--white); color:var(--ink); line-height:1.65; overflow-x:hidden; }
img,video { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
button { cursor:pointer; border:none; background:none; font-family:inherit; }
input,select,textarea { font-family:inherit; }
ul { list-style:none; }
#gl-maya-panel.pinned {
z-index: 9999;}
#gl-fb-trigger{
  left:20px;
  bottom:17px;
  right:unset !important;
}

.gl-dashboard .ticker-footer{display: none !important;}
/* ── TYPOGRAPHY ── */
.d-xl {
  font-family:var(--font-d);
  font-size:clamp(2.8rem,8vw,var(--t-7xl));
  font-weight:700;
  line-height:1;
  letter-spacing:-0.025em;
}
.d-lg {
  font-family:var(--font-d);
  font-size:clamp(2rem,5vw,var(--t-6xl));
  font-weight:700;
  line-height:1.02;
  letter-spacing:-0.02em;
}
.d-md {
  font-family:var(--font-d);
  font-size:clamp(1.6rem,4vw,var(--t-5xl));
  font-weight:700;
  line-height:1.07;
  letter-spacing:-0.018em;
}
.d-sm {
  font-family:var(--font-d);
  font-size:clamp(1.35rem,3vw,var(--t-3xl));
  font-weight:600;
  line-height:1.15;
  letter-spacing:-0.012em;
}
.eyebrow {
  font-size:var(--t-xs);
  font-weight:700;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--blue);
}
.lead {
  font-size:clamp(var(--t-md),1.5vw,var(--t-xl));
  font-weight:400;
  line-height:1.75;
  color:var(--text-s);
}
.accent { color:var(--blue); font-style:italic; }

.io{margin-left:-12px;}
/* ── LAYOUT ── */
.container { width:100%; max-width:var(--max-w); margin:0 auto; padding:0 var(--s8); }
.section    { padding:var(--s24) 0; }
.section-sm { padding:var(--s16) 0; }
.section-xl { padding:var(--s32) 0; }

/* ── DIVIDER ── */
hr.rule { border:none; height:1px; background:var(--border); }

/* ── NAV ── */
.nav {
  position:fixed; top:0; left:0; right:0;
  z-index:1000; height:var(--nav-h);
  display:flex; align-items:center;
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid var(--border);
  transition:box-shadow var(--t-base);
}
.nav--elevated { box-shadow:var(--sh-md); }
.nav__inner {
  display:flex; align-items:center; justify-content:space-between;
  width:100%; max-width:var(--max-w); margin:0 auto; padding:0 var(--s8);
}
.nav__logo {
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-b); font-size:1.1rem; font-weight:800;
  color:var(--ink); letter-spacing:-0.02em;
}
.nav__logo-mark {
  width:32px; height:32px;
  background:var(--blue); border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.nav__logo em { font-style:normal; color:var(--blue); }
.nav__links { display:flex; align-items:center; gap:var(--s8); }
.nav__link {
  font-size:var(--t-sm); font-weight:500; color:var(--text-s);
  transition:color var(--t-fast); padding-bottom:2px;
  position:relative;
}
.nav__link::after {
  content:''; position:absolute; bottom:0; left:0;
  height:2px; width:0; background:var(--blue);
  border-radius:1px;
  transition:width var(--t-base) var(--ease);
}
.nav__link:hover { color:var(--ink); }
.nav__link:hover::after { width:100%; }
.nav__actions { display:flex; align-items:center; gap:var(--s3); }
.nav__toggle { display:none; flex-direction:column; gap:5px; padding:var(--s2); }
.nav__toggle span { display:block; width:22px; height:2px; background:var(--ink); border-radius:1px; transition:transform var(--t-base); }

/* Mobile Nav */
.mobile-nav {
  position:fixed; top:var(--nav-h); left:0; right:0;
  background:var(--white); border-bottom:1px solid var(--border);
  padding:var(--s5) var(--s8); z-index:999;
  transform:translateY(-110%);
  transition:transform var(--t-slow) var(--ease);
  display:flex; flex-direction:column; gap:var(--s4);
  box-shadow:var(--sh-lg);
}
.mobile-nav.open { transform:translateY(0); }
.mobile-nav__link {
  display:block; padding:var(--s3) 0;
  font-size:var(--t-lg); font-weight:600; color:var(--ink-3);
  border-bottom:1px solid var(--border);
}
.mobile-nav__link:hover { color:var(--blue); }
.mobile-nav__actions { display:flex; flex-direction:column; gap:var(--s3); margin-top:var(--s3); }

/* ── BUTTONS ── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  font-family:var(--font-b); font-size:var(--t-sm); font-weight:700;
  border-radius:var(--r-md); padding:0.72rem 1.6rem;
  transition:all var(--t-base) var(--ease);
  white-space:nowrap; border:2px solid transparent; line-height:1;
}
.btn--primary {
  background:var(--blue); color:var(--white); border-color:var(--blue);
}
.btn--primary:hover {
  background:var(--blue-light); border-color:var(--blue-light);
  box-shadow:var(--sh-blue); transform:translateY(-1px);
}
.btn--outline {
  background:transparent; color:var(--ink); border-color:var(--border-hi);
}
.btn--outline:hover {
  border-color:var(--blue); color:var(--blue); background:var(--blue-pale);
}
.btn--outline-blue {
  background:transparent; color:var(--blue); border-color:var(--blue);
}
.btn--outline-blue:hover {
  background:var(--blue); color:var(--white); box-shadow:var(--sh-blue);
}
.btn--white {
  background:var(--white); color:var(--ink); border-color:var(--white);
}
.btn--white:hover {
  background:var(--off); box-shadow:var(--sh-md); transform:translateY(-1px);
}
.btn--ghost-white {
  background:transparent; color:rgba(255,255,255,.8); border-color:rgba(255,255,255,.25);
}
.btn--ghost-white:hover { border-color:rgba(255,255,255,.7); color:var(--white); background:rgba(255,255,255,.06); }
.btn--sm  { padding:0.5rem 0.5rem; font-size:var(--t-xs); border-radius:var(--r-sm); }
.btn--lg  { padding:0.7rem 1rem; font-size:var(--t-md); }
.btn--xl  {     padding: .7rem 1.2rem;
    font-size: var(--t-md);
    font-weight: 700;
    border-radius: var(--r-md);
    text-transform: lowercase;
 }
.btn:disabled { opacity:0.4; pointer-events:none; }

/* ── BADGE ── */
.badge {
  display:inline-flex; align-items:center; gap:var(--s1);
  padding:0.3rem 0.8rem; border-radius:var(--r-pill);
  font-size:var(--t-xs); font-weight:700;
  letter-spacing:0.05em; text-transform:uppercase;
}
.badge--blue   { background:var(--blue-pale); color:var(--blue); }
.badge--amber  { background:var(--amber-pale); color:var(--amber); }
.badge--ok     { background:rgba(5,150,105,.1); color:var(--ok); }
.badge--dark   { background:rgba(255,255,255,.1); color:rgba(255,255,255,.85); }

/* ── CARDS ── */
.card {
  background:var(--white); border:1px solid var(--border);
  border-radius:var(--r-xl); padding:var(--s6);
  transition:box-shadow var(--t-base), transform var(--t-base) var(--ease), border-color var(--t-base);
}
.card:hover { box-shadow:var(--sh-lg); transform:translateY(-4px); border-color:var(--border-hi); }
.card--blue { border-top:3px solid var(--blue); }
.card--surface { background:var(--off); border-color:var(--border); }

/* ── FORM ── */
.form-group { display:flex; flex-direction:column; gap:var(--s2); }
.form-label { font-size:var(--t-sm); font-weight:600; color:var(--ink-2); }
.form-input,.form-select,.form-textarea {
  width:100%; background:var(--white); border:2px solid var(--border);
  border-radius:var(--r-md); padding:0.875rem var(--s4);
  font-size:var(--t-md); color:var(--ink); outline:none;
  transition:border-color var(--t-fast), box-shadow var(--t-fast);
  appearance:none;
}
.form-input::placeholder { color:var(--text-m); }
.form-input:focus,.form-select:focus,.form-textarea:focus {
  border-color:var(--blue); box-shadow:0 0 0 4px var(--blue-glow);
}
.form-hint { font-size:var(--t-xs); color:var(--text-m); }
.form-error{ font-size:var(--t-xs); color:var(--fail); }

/* dark form variants */
.form-input--dark,.form-select--dark {
  background:var(--dark-3); border-color:var(--dark-border); color:rgba(255,255,255,.9);
}
.form-input--dark::placeholder { color:rgba(255,255,255,.3); }
.form-input--dark:focus,.form-select--dark:focus {
  border-color:var(--blue); box-shadow:0 0 0 4px rgba(37,99,235,.15);
}
.form-label--dark { color:rgba(255,255,255,.7); }

/* ── PROGRESS ── */
.progress { height:4px; background:var(--border); border-radius:var(--r-pill); overflow:hidden; }
.progress__fill {
  height:100%; background:var(--blue); border-radius:var(--r-pill);
  transition:width .6s var(--ease); position:relative; overflow:hidden;
}
.progress__fill::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);
  animation:shimmer 2s infinite;
}
@keyframes shimmer { from{transform:translateX(-100%)} to{transform:translateX(100%)} }

/* ── TOAST ── */
.toast-wrap { position:fixed; bottom:var(--s8); right:var(--s8); z-index:4000; display:flex; flex-direction:column; gap:var(--s3); }
.toast {
  background:var(--ink); color:var(--white); border-radius:var(--r-xl);
  padding:var(--s4) var(--s5); display:flex; align-items:center; gap:var(--s3);
  font-size:var(--t-sm); min-width:300px; box-shadow:var(--sh-xl);
  border-left:3px solid var(--blue);
  animation:slideToast .35s var(--ease) forwards;
}
@keyframes slideToast { from{opacity:0;transform:translateX(30px)} to{opacity:1;transform:translateX(0)} }

/* ── FOOTER ── */
.footer { background:var(--dark); padding:var(--s20) 0 var(--s8); }
.footer__grid { display:grid; grid-template-columns:2.2fr 1fr 1fr 1fr; gap:var(--s12); margin-bottom:var(--s16); }
.footer__tagline { font-size:var(--t-sm); color:rgba(255,255,255,.45); line-height:1.75; margin:var(--s4) 0 var(--s6); max-width:320px; }
.footer__col-title { font-size:var(--t-xs); font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.4); margin-bottom:var(--s5); }
.footer__links { display:flex; flex-direction:column; gap:var(--s3); }
.footer__link { font-size:var(--t-sm); color:rgba(255,255,255,.6); transition:color var(--t-fast); }
.footer__link:hover { color:var(--white); }
.footer__bottom { padding-top:var(--s8); border-top:1px solid rgba(255,255,255,.08); display:flex; align-items:center; justify-content:space-between; gap:var(--s6); flex-wrap:wrap; }
.footer__legal { font-size:var(--t-xs); color:rgba(255,255,255,.3); line-height:1.7; max-width:680px; }

/* ── ANIMATIONS ── */
@keyframes fadeUp { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes glRemove {
  0%   { opacity:1; transform:translateX(0) scale(1); max-height:200px; margin-bottom:var(--s4,16px); padding-top:var(--s5,20px); padding-bottom:var(--s5,20px); }
  40%  { opacity:.6; transform:translateX(30px) scale(.98); }
  100% { opacity:0; transform:translateX(80px) scale(.95); max-height:0; margin-bottom:0; padding-top:0; padding-bottom:0; overflow:hidden; }
}
@keyframes glRowRemove {
  0%   { opacity:1; transform:translateX(0); max-height:80px; }
  40%  { opacity:.5; transform:translateX(20px); background:rgba(239,68,68,.05); }
  100% { opacity:0; transform:translateX(60px); max-height:0; padding:0; margin:0; border-width:0; overflow:hidden; }
}
.gl-removing { animation: glRemove .45s var(--ease) forwards !important; pointer-events:none !important; }
.gl-row-removing { animation: glRowRemove .4s var(--ease) forwards !important; pointer-events:none !important; }
.anim-up { opacity:0; animation:fadeUp .75s var(--ease) forwards; }
.anim-in { opacity:0; animation:fadeIn  .6s  var(--ease) forwards; }
.d1{animation-delay:.1s}.d2{animation-delay:.2s}.d3{animation-delay:.3s}
.d4{animation-delay:.4s}.d5{animation-delay:.55s}.d6{animation-delay:.7s}
[data-animate] { opacity:0; transform:translateY(20px); transition:opacity .65s var(--ease), transform .65s var(--ease); }
[data-animate].visible { opacity:1; transform:translateY(0); }

/* ── UTILITIES ── */
.text-blue   { color:var(--blue); }
.text-amber  { color:var(--amber); }
.text-white  { color:var(--white); }
.text-s      { color:var(--text-s); }
.text-m      { color:var(--text-m); }
.text-ink    { color:var(--ink); }
.text-center { text-align:center; }
.italic      { font-style:italic; }
.mt-2{margin-top:var(--s2)}.mt-4{margin-top:var(--s4)}.mt-6{margin-top:var(--s6)}
.mt-8{margin-top:var(--s8)}.mt-10{margin-top:var(--s10)}.mt-12{margin-top:var(--s12)}
.mt-16{margin-top:var(--s16)}.mt-20{margin-top:var(--s20)}
.hidden{display:none!important}

/* ── RESPONSIVE ── */
@media(max-width:1024px) { .footer__grid{grid-template-columns:1fr 1fr;gap:var(--s8)} }
@media(max-width:768px) {
  :root{--nav-h:64px}
  .nav__links{display:none} .nav__toggle{display:flex}
  .section{padding:var(--s16) 0} .section-xl{padding:var(--s20) 0}
  .footer__grid{grid-template-columns:1fr 1fr;gap:var(--s6)}
  .footer__bottom{flex-direction:column;text-align:center}
}
@media(max-width:480px) {
  .body{overflow-x:hidden;}
  .nav__inner {padding:0 5px;}
  .container{padding:0 var(--s5)}
  .footer__grid{grid-template-columns:1fr;gap:var(--s6)}
  .btn--xl{padding:.9rem 2rem;font-size:var(--t-md)}
}

.io {color: var(--blue);}
.otp-box{width:40px; height: 40px; display: inline-flex;    background: #efefef;
    border: 1px solid #ccc; text-align: center;}
.otp-inputs{    display: flex;
    gap: 10px; margin-bottom: 15px;}
/* ── DARK THEME ── */
[data-theme="dark"] {
  --white:      #0E1220;
  --off:        #080B14;
  --surface:    #151B2E;
  --border:     rgba(255,255,255,0.08);
  --border-hi:  rgba(255,255,255,0.15);

  --ink:        #F0F2FA;
  --ink-2:      #C8CCDE;
  --ink-3:      #8B91AA;
  --text-s:     #6B7191;
  --text-m:     #4A4F65;

  --blue-pale:  rgba(199,37,235,0.12);
  --blue-glow:  rgba(199,37,235,0.22);
  --amber-pale: rgba(245,158,11,0.12);

  --sh-sm:  0 1px 4px rgba(0,0,0,.3), 0 2px 8px rgba(0,0,0,.2);
  --sh-md:  0 4px 16px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.25);
  --sh-lg:  0 12px 40px rgba(0,0,0,.45), 0 4px 12px rgba(0,0,0,.3);
  --sh-xl:  0 24px 64px rgba(0,0,0,.55), 0 8px 24px rgba(0,0,0,.35);
}

/* Dark theme surface overrides */
[data-theme="dark"] body {
  background: var(--off);
  color: var(--ink);
}
[data-theme="dark"] .card,
[data-theme="dark"] .db-card,
[data-theme="dark"] .case-card,
[data-theme="dark"] .stat-card {
  background: var(--white);
  border-color: var(--border);
}
[data-theme="dark"] .db-sidebar {
  background: #080B14;
  border-color: var(--border);
      border-right: 1px solid var(--border);
}
[data-theme="dark"] .db-header {
  background: #080B14;
  border-color: var(--border);
}
[data-theme="dark"] .panel {
      background: #161d2e;
}

[data-theme="dark"] .db-stages__track {
  border: 1px solid rgba(199, 37, 235, .2);
}

[data-theme="dark"] .verify-phone-banner__title,.action-banner__title, .db-ai__name {
  color: #ffffff;
}

.db-stages__track::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -60px;
    width: 280px;
    height: 280px;
    background: radial-gradient(circle, rgba(199, 37, 235, .2) 0%, transparent 70%);
    border-radius: 50%;
}

[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background: var(--surface);
  border-color: var(--border);
  color: var(--ink);
}
[data-theme="dark"] .badge {
  border-color: var(--border);
}