/* ══════════════════════════════════════════════════════════════
   TRUE STORE — Landing + Auth Pages
   Aesthetic: Sharp corporate with warm green accents
══════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800&family=DM+Sans:wght@300;400;500;600;700&display=swap');

*,*::before,*::after{box-sizing:border-box;}
html{font-size:16px;scroll-behavior:smooth;}
body{margin:0;font-family:'DM Sans',system-ui,sans-serif;background:#0c1427;color:#e2e8f0;line-height:1.6;-webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}

/* ─── LANDING PAGE ────────────────────────────── */

/* Navbar */
.ld-nav {
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:.8rem 2.5rem;
  background:rgba(12,20,39,.85);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.06);
  transition:background .3s;
}
.ld-nav.scrolled { background:rgba(12,20,39,.97); }

.ld-logo {
  display:flex;align-items:center;gap:.5rem;
}
.ld-logo-icon {
  width:32px;height:32px;background:linear-gradient(135deg,#00c37d,#00a567);
  border-radius:8px;display:flex;align-items:center;justify-content:center;
  font-weight:800;color:#0c1427;font-size:.9rem;font-family:'Sora',sans-serif;
}
.ld-logo-text {
  font-family:'Sora',sans-serif;font-weight:700;font-size:1.05rem;color:#fff;
  letter-spacing:-.02em;
}
.ld-logo-text span{color:#00c37d;}

.ld-nav-links { display:flex; align-items:center; gap:1.5rem; }
.ld-nav-links a {
  font-size:.85rem;font-weight:500;color:rgba(255,255,255,.6);
  transition:color .2s;
}
.ld-nav-links a:hover { color:#fff; }

.ld-nav-cta {
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.45rem 1.1rem;
  background:#00c37d;color:#0c1427;
  border-radius:8px;font-weight:700;font-size:.82rem;
  transition:all .2s;border:none;cursor:pointer;
  font-family:'DM Sans',sans-serif;
}
.ld-nav-cta:hover{background:#00a567;transform:translateY(-1px);box-shadow:0 4px 14px rgba(0,195,125,.35);}

/* Hero */
.ld-hero {
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  text-align:center;
  padding:6rem 2rem 4rem;
  position:relative;overflow:hidden;
  background:radial-gradient(ellipse at 30% 50%,#132042 0%,#0c1427 70%);
}
.ld-hero::before {
  content:'';position:absolute;top:-50%;right:-30%;
  width:800px;height:800px;
  background:radial-gradient(circle,rgba(0,195,125,.08) 0%,transparent 60%);
  pointer-events:none;
}
.ld-hero::after {
  content:'';position:absolute;bottom:-40%;left:-20%;
  width:600px;height:600px;
  background:radial-gradient(circle,rgba(59,130,246,.06) 0%,transparent 60%);
  pointer-events:none;
}

.ld-hero-inner { max-width:720px; position:relative; z-index:1; }

.ld-badge {
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.35rem .85rem;
  background:rgba(0,195,125,.1);border:1px solid rgba(0,195,125,.2);
  border-radius:999px;font-size:.72rem;font-weight:600;
  color:#00c37d;margin-bottom:1.5rem;letter-spacing:.03em;
}
.ld-badge .dot{width:6px;height:6px;background:#00c37d;border-radius:50%;animation:pulse 2s infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.4;}}

.ld-hero h1 {
  font-family:'Sora',sans-serif;
  font-size:clamp(2.2rem,5vw,3.5rem);
  font-weight:800;line-height:1.1;
  color:#fff;margin:0 0 1.25rem;
  letter-spacing:-.03em;
}
.ld-hero h1 .accent { color:#00c37d; }

.ld-hero p {
  font-size:1.1rem;color:#94a3b8;
  max-width:520px;margin:0 auto 2rem;line-height:1.7;
}

.ld-hero-btns{display:flex;justify-content:center;gap:.75rem;flex-wrap:wrap;}

.ld-btn-primary {
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.75rem 1.75rem;
  background:linear-gradient(135deg,#00c37d,#00a567);
  color:#0c1427;border:none;border-radius:10px;
  font-size:.95rem;font-weight:700;cursor:pointer;
  transition:all .25s;font-family:'DM Sans',sans-serif;
}
.ld-btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(0,195,125,.35);}

.ld-btn-ghost {
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.75rem 1.75rem;
  background:transparent;color:#e2e8f0;
  border:1px solid rgba(255,255,255,.15);border-radius:10px;
  font-size:.95rem;font-weight:600;cursor:pointer;
  transition:all .25s;font-family:'DM Sans',sans-serif;
}
.ld-btn-ghost:hover{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.3);}

/* Stats bar */
.ld-stats {
  display:flex;justify-content:center;gap:3rem;
  margin-top:3.5rem;flex-wrap:wrap;
}
.ld-stat { text-align:center; }
.ld-stat-value {
  font-family:'Sora',sans-serif;font-size:1.6rem;font-weight:800;color:#fff;
}
.ld-stat-label { font-size:.75rem;color:#64748b;margin-top:.15rem;text-transform:uppercase;letter-spacing:.08em; }

/* Features */
.ld-features {
  padding:5rem 2rem;
  background:#0a1120;
}
.ld-features-inner { max-width:1100px; margin:0 auto; }

.ld-section-tag {
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.3rem .7rem;
  background:rgba(59,130,246,.1);border:1px solid rgba(59,130,246,.2);
  border-radius:999px;font-size:.68rem;font-weight:600;
  color:#60a5fa;margin-bottom:1rem;letter-spacing:.04em;
  text-transform:uppercase;
}

.ld-section-title {
  font-family:'Sora',sans-serif;font-size:clamp(1.5rem,3vw,2.2rem);
  font-weight:800;color:#fff;margin:0 0 .5rem;letter-spacing:-.02em;
}
.ld-section-sub { font-size:.95rem;color:#64748b;margin:0 0 2.5rem;max-width:480px; }

.ld-feature-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.25rem;
}

.ld-feature-card {
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  border-radius:14px;padding:1.5rem;
  transition:all .25s;
}
.ld-feature-card:hover {
  background:rgba(255,255,255,.05);
  border-color:rgba(0,195,125,.2);
  transform:translateY(-3px);
}

.ld-feature-icon {
  width:42px;height:42px;
  border-radius:10px;display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;margin-bottom:.85rem;
}
.ld-fi-green  { background:rgba(0,195,125,.12); color:#00c37d; }
.ld-fi-blue   { background:rgba(59,130,246,.12); color:#60a5fa; }
.ld-fi-purple { background:rgba(139,92,246,.12); color:#a78bfa; }
.ld-fi-orange { background:rgba(245,158,11,.12); color:#fbbf24; }
.ld-fi-cyan   { background:rgba(6,182,212,.12); color:#22d3ee; }
.ld-fi-rose   { background:rgba(244,63,94,.12); color:#fb7185; }

.ld-feature-card h3 {
  font-family:'Sora',sans-serif;font-size:.92rem;font-weight:700;
  color:#fff;margin:0 0 .4rem;
}
.ld-feature-card p { font-size:.82rem;color:#64748b;margin:0;line-height:1.6; }

/* CTA section */
.ld-cta {
  padding:5rem 2rem;text-align:center;
  background:linear-gradient(180deg,#0a1120,#0c1427);
}
.ld-cta-box {
  max-width:600px;margin:0 auto;
  background:linear-gradient(135deg,rgba(0,195,125,.08),rgba(59,130,246,.06));
  border:1px solid rgba(0,195,125,.15);
  border-radius:20px;padding:3rem 2.5rem;
}
.ld-cta-box h2{font-family:'Sora',sans-serif;font-size:1.6rem;font-weight:800;color:#fff;margin:0 0 .6rem;}
.ld-cta-box p{color:#94a3b8;font-size:.92rem;margin:0 0 1.5rem;}

/* Footer */
.ld-footer {
  padding:2rem 2.5rem;border-top:1px solid rgba(255,255,255,.06);
  display:flex;justify-content:space-between;align-items:center;
  font-size:.75rem;color:#475569;flex-wrap:wrap;gap:.5rem;
}

/* ─── AUTH PAGES ───────────────────────────────── */
.auth-page {
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:2rem 1rem;
  background:#0c1427;
  position:relative;overflow:hidden;
}
.auth-page::before {
  content:'';position:absolute;top:-30%;right:-20%;
  width:600px;height:600px;
  background:radial-gradient(circle,rgba(0,195,125,.06) 0%,transparent 60%);
  pointer-events:none;
}

.auth-card {
  width:100%;max-width:400px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;padding:2.25rem;
  position:relative;z-index:1;
  backdrop-filter:blur(8px);
}

.auth-logo {
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  margin-bottom:1.75rem;
}
.auth-logo .ld-logo-icon { width:36px;height:36px;font-size:1rem; }
.auth-logo .ld-logo-text { font-size:1.15rem; }

.auth-title {
  font-family:'Sora',sans-serif;font-size:1.3rem;font-weight:700;
  color:#fff;text-align:center;margin:0 0 .3rem;
}
.auth-sub { font-size:.82rem;color:#64748b;text-align:center;margin:0 0 1.5rem; }

.auth-form { display:flex; flex-direction:column; gap:1rem; }

.auth-fg { display:flex; flex-direction:column; gap:.3rem; }
.auth-fg label {
  font-size:.7rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;color:#64748b;
}
.auth-fg input {
  height:42px;padding:0 .85rem;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  border-radius:10px;
  color:#fff;font-size:.88rem;
  font-family:'DM Sans',sans-serif;
  outline:none;transition:all .2s;
}
.auth-fg input::placeholder { color:#475569; }
.auth-fg input:focus {
  border-color:#00c37d;
  box-shadow:0 0 0 3px rgba(0,195,125,.12);
  background:rgba(255,255,255,.07);
}

.auth-submit {
  height:44px;margin-top:.5rem;
  background:linear-gradient(135deg,#00c37d,#00a567);
  color:#0c1427;border:none;border-radius:10px;
  font-size:.92rem;font-weight:700;cursor:pointer;
  font-family:'DM Sans',sans-serif;
  transition:all .2s;letter-spacing:.01em;
}
.auth-submit:hover { transform:translateY(-1px);box-shadow:0 6px 20px rgba(0,195,125,.3); }
.auth-submit:active { transform:none; }

.auth-footer {
  text-align:center;margin-top:1.25rem;
  font-size:.82rem;color:#64748b;
}
.auth-footer a { color:#00c37d; font-weight:600; }
.auth-footer a:hover { text-decoration:underline; }

.auth-divider {
  display:flex;align-items:center;gap:.75rem;
  margin:.5rem 0;color:#475569;font-size:.72rem;
}
.auth-divider::before,.auth-divider::after {
  content:'';flex:1;height:1px;background:rgba(255,255,255,.06);
}

/* Flash messages */
.auth-flash {
  padding:.6rem .85rem;border-radius:8px;
  font-size:.8rem;font-weight:500;margin-bottom:1rem;
  text-align:center;
}
.auth-flash.error { background:rgba(239,68,68,.12);color:#fca5a5;border:1px solid rgba(239,68,68,.2); }
.auth-flash.success { background:rgba(0,195,125,.12);color:#6ee7b7;border:1px solid rgba(0,195,125,.2); }

/* ─── Mobile hamburger for landing nav ─────── */
.ld-nav-toggle { display:none;background:none;border:none;color:#fff;font-size:1.3rem;cursor:pointer;padding:.25rem; }

/* ═══ RESPONSIVE ═══ */
@media (max-width: 768px) {
  .ld-nav { padding:.6rem 1rem; }
  .ld-nav-links { display:none; }
  .ld-nav-toggle { display:block; }
  .ld-nav-links.open {
    display:flex;flex-direction:column;
    position:absolute;top:100%;left:0;right:0;
    background:rgba(12,20,39,.97);
    padding:1rem 1.5rem;gap:.75rem;
    border-bottom:1px solid rgba(255,255,255,.06);
  }

  .ld-hero { padding:5rem 1.25rem 3rem; min-height:auto; }
  .ld-hero h1 { font-size:2rem; }
  .ld-hero p { font-size:.92rem; }
  .ld-stats { gap:1.5rem; }
  .ld-stat-value { font-size:1.3rem; }

  .ld-features { padding:3rem 1.25rem; }
  .ld-feature-grid { grid-template-columns:1fr;gap:1rem; }
  .ld-feature-card { padding:1.25rem; }

  .ld-cta { padding:3rem 1.25rem; }
  .ld-cta-box { padding:2rem 1.5rem; }

  .auth-card { padding:1.75rem 1.5rem; }
  .auth-title { font-size:1.15rem; }
}

@media (max-width: 480px) {
  .ld-hero-btns { flex-direction:column; }
  .ld-btn-primary,.ld-btn-ghost { width:100%;justify-content:center; }
  .ld-stats { flex-direction:column;gap:1rem; }
}

/* ── Auth logo flex ──────────────────────────────── */
.auth-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 4px;
}

/* same styles as normal input - defined by .auth-fg input */
}

/* ── Password field — unified box approach ── */
.pw-field {
    display: flex;
    align-items: center;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 10px;
    transition: border-color .2s, box-shadow .2s;
    overflow: hidden;
    width: 100%;
    height: 44px;
}
.pw-field:focus-within {
    border-color: #00c37d;
    box-shadow: 0 0 0 3px rgba(0,195,125,.12);
}
.pw-field input {
    flex: 1 !important;
    height: 100% !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 0 0 0 .9rem !important;
    color: #e2e8f0 !important;
    font-size: .9rem !important;
    width: 100% !important;
    min-width: 0 !important;
    border-radius: 0 !important;
}
.pw-field input::placeholder { color: #475569 !important; }
.pw-eye {
    flex-shrink: 0;
    width: 42px;
    height: 100%;
    background: transparent;
    border: none;
    border-left: 1px solid rgba(255,255,255,.07);
    color: #64748b;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    transition: color .15s;
    padding: 0;
}
.pw-eye:hover { color: #00c37d; }