root
7a62b0b340
- analysis.py: deterministic claim scorer + /analyze /approve /letter /advance-tier endpoints (auto-runs on intake) - packet.py + packet_fields.json: welcome-packet templating engine (6 onboarding docs, field catalog) - letterstream.py + letters.py: certified-mail send pipeline + letter lifecycle (webhook verified) - docuseal.py: DocuSeal signing integration - staff.py/models.py/schema.sql/auth.py: approval actor from staff key, tier gate (APPROVED+ACTIVE+onboarding docs), onboarding_docs table - frontend/: dependency-free static portal (intake, magic-link login/verify, dashboard) - landing-mockups/: 4 design-stance mockups + favicons - legal/: aup/privacy/sms-terms/terms HTML - docs/: letter-queue scope, letterstream API contract, 6 welcome-packet templates - review-dre-landing-2026-08-21.md: 3-variant landing feedback sprint - compliance/DRE_Compliance_Manual.md: updated Source synced from deployed /opt/dre-portal/app/ (was 4 days ahead of git).
1082 lines
32 KiB
HTML
1082 lines
32 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Debt Recovery Experts - Modern Recovery Platform</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root {
|
|
--bg-dark: #0b0e14;
|
|
--bg-dark-2: #11151f;
|
|
--bg-card: #161b26;
|
|
--border-dark: #232a38;
|
|
--accent: #35e0a1;
|
|
--accent-2: #22c3ff;
|
|
--accent-dim: rgba(53, 224, 161, 0.12);
|
|
--text-light: #f4f7fb;
|
|
--text-muted: #9aa5b8;
|
|
--text-dark: #10131a;
|
|
--bg-light: #f6f8fb;
|
|
--border-light: #e3e8f0;
|
|
--radius: 14px;
|
|
--shadow-soft: 0 20px 60px rgba(8, 12, 20, 0.35);
|
|
--shadow-card: 0 10px 30px rgba(15, 20, 30, 0.06);
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
|
|
html { scroll-behavior: smooth; }
|
|
|
|
body {
|
|
margin: 0;
|
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
|
color: var(--text-dark);
|
|
background: var(--bg-light);
|
|
line-height: 1.55;
|
|
}
|
|
|
|
a { color: inherit; text-decoration: none; }
|
|
img { max-width: 100%; display: block; }
|
|
|
|
.wrap {
|
|
max-width: 1180px;
|
|
margin: 0 auto;
|
|
padding: 0 24px;
|
|
}
|
|
|
|
/* ---------- Header ---------- */
|
|
header {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 50;
|
|
background: rgba(11, 14, 20, 0.92);
|
|
backdrop-filter: blur(10px);
|
|
border-bottom: 1px solid var(--border-dark);
|
|
}
|
|
|
|
.nav-inner {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 16px 24px;
|
|
max-width: 1180px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.logo {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
font-weight: 800;
|
|
font-size: 18px;
|
|
color: var(--text-light);
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
.logo-mark {
|
|
width: 34px;
|
|
height: 34px;
|
|
border-radius: 9px;
|
|
background: linear-gradient(135deg, var(--accent), var(--accent-2));
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: 800;
|
|
font-size: 13px;
|
|
color: #06110d;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
nav.main-nav {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 32px;
|
|
}
|
|
|
|
nav.main-nav a.nav-link {
|
|
color: var(--text-muted);
|
|
font-size: 14.5px;
|
|
font-weight: 500;
|
|
transition: color 0.15s ease;
|
|
}
|
|
|
|
nav.main-nav a.nav-link:hover { color: var(--text-light); }
|
|
|
|
.nav-ctas { display: flex; align-items: center; gap: 12px; }
|
|
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
padding: 11px 20px;
|
|
border-radius: 10px;
|
|
font-weight: 600;
|
|
font-size: 14.5px;
|
|
cursor: pointer;
|
|
border: 1px solid transparent;
|
|
white-space: nowrap;
|
|
transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: linear-gradient(135deg, var(--accent), var(--accent-2));
|
|
color: #06140f;
|
|
box-shadow: 0 8px 24px rgba(53, 224, 161, 0.25);
|
|
}
|
|
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 30px rgba(53, 224, 161, 0.35); }
|
|
|
|
.btn-ghost-dark {
|
|
background: transparent;
|
|
color: var(--text-light);
|
|
border: 1px solid var(--border-dark);
|
|
}
|
|
.btn-ghost-dark:hover { border-color: var(--accent); color: var(--accent); }
|
|
|
|
.btn-outline-light {
|
|
background: rgba(255,255,255,0.04);
|
|
color: var(--text-light);
|
|
border: 1px solid rgba(255,255,255,0.16);
|
|
}
|
|
.btn-outline-light:hover { border-color: var(--accent-2); }
|
|
|
|
.btn-dark {
|
|
background: var(--text-dark);
|
|
color: #fff;
|
|
}
|
|
.btn-dark:hover { transform: translateY(-1px); }
|
|
|
|
.btn-lg { padding: 15px 28px; font-size: 16px; border-radius: 12px; }
|
|
|
|
.mobile-toggle { display: none; }
|
|
|
|
/* ---------- Hero ---------- */
|
|
.hero {
|
|
background:
|
|
radial-gradient(circle at 15% 15%, rgba(53, 224, 161, 0.14), transparent 45%),
|
|
radial-gradient(circle at 85% 0%, rgba(34, 195, 255, 0.14), transparent 45%),
|
|
var(--bg-dark);
|
|
color: var(--text-light);
|
|
padding: 96px 24px 0;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hero-inner {
|
|
max-width: 1180px;
|
|
margin: 0 auto;
|
|
display: grid;
|
|
grid-template-columns: 1.05fr 0.95fr;
|
|
gap: 56px;
|
|
align-items: center;
|
|
}
|
|
|
|
.eyebrow {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 7px 14px;
|
|
background: var(--accent-dim);
|
|
border: 1px solid rgba(53, 224, 161, 0.3);
|
|
border-radius: 999px;
|
|
color: var(--accent);
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
margin-bottom: 22px;
|
|
letter-spacing: 0.01em;
|
|
}
|
|
|
|
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
|
|
|
|
.hero h1 {
|
|
font-size: 48px;
|
|
line-height: 1.1;
|
|
letter-spacing: -0.02em;
|
|
font-weight: 800;
|
|
margin: 0 0 20px;
|
|
}
|
|
|
|
.hero h1 .grad {
|
|
background: linear-gradient(135deg, var(--accent), var(--accent-2));
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
color: transparent;
|
|
}
|
|
|
|
.hero p.sub {
|
|
font-size: 18px;
|
|
color: var(--text-muted);
|
|
max-width: 520px;
|
|
margin: 0 0 32px;
|
|
}
|
|
|
|
.hero-ctas {
|
|
display: flex;
|
|
gap: 14px;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 28px;
|
|
}
|
|
|
|
.hero-meta {
|
|
display: flex;
|
|
gap: 24px;
|
|
flex-wrap: wrap;
|
|
color: var(--text-muted);
|
|
font-size: 13.5px;
|
|
}
|
|
|
|
.hero-meta span { display: flex; align-items: center; gap: 8px; }
|
|
.check-ico { color: var(--accent); font-weight: 800; }
|
|
|
|
/* Product/dashboard preview card in hero */
|
|
.product-preview {
|
|
background: var(--bg-dark-2);
|
|
border: 1px solid var(--border-dark);
|
|
border-radius: 18px;
|
|
box-shadow: var(--shadow-soft);
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
.preview-topbar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 14px 18px;
|
|
border-bottom: 1px solid var(--border-dark);
|
|
background: rgba(255,255,255,0.02);
|
|
}
|
|
|
|
.tb-dot { width: 10px; height: 10px; border-radius: 50%; background: #333c4d; }
|
|
.preview-url {
|
|
margin-left: 10px;
|
|
font-size: 12.5px;
|
|
color: var(--text-muted);
|
|
background: rgba(255,255,255,0.03);
|
|
border: 1px solid var(--border-dark);
|
|
padding: 4px 12px;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.preview-body { padding: 22px; }
|
|
|
|
.preview-head {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 18px;
|
|
}
|
|
|
|
.preview-head h4 { margin: 0; font-size: 15px; color: var(--text-light); font-weight: 700; }
|
|
.preview-head .badge {
|
|
font-size: 11.5px;
|
|
color: var(--accent);
|
|
background: var(--accent-dim);
|
|
padding: 4px 10px;
|
|
border-radius: 999px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.stat-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 12px;
|
|
margin-bottom: 18px;
|
|
}
|
|
|
|
.stat-box {
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border-dark);
|
|
border-radius: 10px;
|
|
padding: 14px;
|
|
}
|
|
|
|
.stat-box .label { font-size: 11.5px; color: var(--text-muted); margin-bottom: 6px; }
|
|
.stat-box .value { font-size: 20px; font-weight: 800; color: var(--text-light); }
|
|
.stat-box .value.accent { color: var(--accent); }
|
|
|
|
.mini-chart {
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border-dark);
|
|
border-radius: 10px;
|
|
padding: 16px;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
gap: 8px;
|
|
height: 100px;
|
|
}
|
|
|
|
.mini-chart .bar {
|
|
flex: 1;
|
|
background: linear-gradient(180deg, var(--accent-2), var(--accent));
|
|
border-radius: 4px 4px 0 0;
|
|
opacity: 0.85;
|
|
}
|
|
|
|
.case-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 10px 0;
|
|
border-top: 1px solid var(--border-dark);
|
|
font-size: 13px;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.case-row:first-of-type { border-top: none; margin-top: 16px; }
|
|
.case-row .case-name { color: var(--text-light); font-weight: 600; }
|
|
|
|
.status-chip {
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
padding: 3px 9px;
|
|
border-radius: 999px;
|
|
}
|
|
.status-chip.active { background: rgba(53, 224, 161, 0.14); color: var(--accent); }
|
|
.status-chip.pending { background: rgba(34, 195, 255, 0.14); color: var(--accent-2); }
|
|
|
|
.hero-bottom-fade {
|
|
height: 60px;
|
|
margin-top: 60px;
|
|
}
|
|
|
|
/* ---------- Sections shared ---------- */
|
|
section { padding: 90px 0; }
|
|
|
|
.section-tag {
|
|
display: inline-block;
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
color: #0f9d6f;
|
|
background: #e7faf1;
|
|
padding: 6px 14px;
|
|
border-radius: 999px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.section-head { max-width: 640px; margin: 0 auto 52px; text-align: center; }
|
|
.section-head h2 {
|
|
font-size: 34px;
|
|
letter-spacing: -0.015em;
|
|
margin: 0 0 14px;
|
|
color: var(--text-dark);
|
|
font-weight: 800;
|
|
}
|
|
.section-head p { color: #5b6474; font-size: 16.5px; margin: 0; }
|
|
|
|
/* ---------- Who we serve ---------- */
|
|
.audience-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 28px;
|
|
}
|
|
|
|
.audience-card {
|
|
background: #fff;
|
|
border: 1px solid var(--border-light);
|
|
border-radius: var(--radius);
|
|
padding: 36px;
|
|
box-shadow: var(--shadow-card);
|
|
position: relative;
|
|
}
|
|
|
|
.audience-card.primary { border: 1px solid #bdf3dc; background: linear-gradient(180deg, #f3fdf9, #ffffff); }
|
|
|
|
.audience-icon {
|
|
width: 52px;
|
|
height: 52px;
|
|
border-radius: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 22px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.audience-icon.green { background: var(--accent-dim); color: #0f9d6f; }
|
|
.audience-icon.blue { background: rgba(34, 195, 255, 0.12); color: #0a8fc4; }
|
|
|
|
.audience-card h3 { font-size: 21px; margin: 0 0 10px; font-weight: 700; }
|
|
.audience-card p.desc { color: #5b6474; font-size: 15px; margin: 0 0 22px; }
|
|
|
|
.audience-list { list-style: none; margin: 0 0 26px; padding: 0; }
|
|
.audience-list li {
|
|
display: flex;
|
|
gap: 10px;
|
|
align-items: flex-start;
|
|
font-size: 14.5px;
|
|
color: #3a4152;
|
|
padding: 8px 0;
|
|
border-top: 1px solid #f0f2f6;
|
|
}
|
|
.audience-list li:first-child { border-top: none; }
|
|
.audience-list li::before {
|
|
content: "\2713";
|
|
color: #0f9d6f;
|
|
font-weight: 800;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.pill-tag {
|
|
display: inline-block;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
padding: 4px 12px;
|
|
border-radius: 999px;
|
|
margin-bottom: 16px;
|
|
}
|
|
.pill-tag.primary-pill { background: var(--accent-dim); color: #0f9d6f; }
|
|
.pill-tag.secondary-pill { background: rgba(34, 195, 255, 0.12); color: #0a8fc4; }
|
|
|
|
/* ---------- How it works ---------- */
|
|
.steps-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 22px;
|
|
}
|
|
|
|
.step-card {
|
|
background: #fff;
|
|
border: 1px solid var(--border-light);
|
|
border-radius: var(--radius);
|
|
padding: 28px 24px;
|
|
box-shadow: var(--shadow-card);
|
|
position: relative;
|
|
}
|
|
|
|
.step-num {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 10px;
|
|
background: var(--text-dark);
|
|
color: #fff;
|
|
font-weight: 800;
|
|
font-size: 14px;
|
|
margin-bottom: 18px;
|
|
}
|
|
|
|
.step-card h4 { font-size: 16.5px; margin: 0 0 8px; font-weight: 700; }
|
|
.step-card p { font-size: 14px; color: #5b6474; margin: 0; }
|
|
|
|
/* ---------- Platform spotlight (dashboard as product) ---------- */
|
|
.platform-section {
|
|
background: var(--bg-dark);
|
|
color: var(--text-light);
|
|
padding: 100px 0;
|
|
}
|
|
|
|
.platform-inner {
|
|
display: grid;
|
|
grid-template-columns: 0.9fr 1.1fr;
|
|
gap: 56px;
|
|
align-items: center;
|
|
}
|
|
|
|
.platform-section .section-tag {
|
|
background: var(--accent-dim);
|
|
color: var(--accent);
|
|
}
|
|
|
|
.platform-inner h2 {
|
|
font-size: 32px;
|
|
letter-spacing: -0.015em;
|
|
margin: 0 0 16px;
|
|
font-weight: 800;
|
|
color: var(--text-light);
|
|
}
|
|
|
|
.platform-inner p.lead {
|
|
color: var(--text-muted);
|
|
font-size: 16.5px;
|
|
margin: 0 0 30px;
|
|
}
|
|
|
|
.feature-list-dark { list-style: none; margin: 0 0 32px; padding: 0; }
|
|
.feature-list-dark li {
|
|
display: flex;
|
|
gap: 14px;
|
|
align-items: flex-start;
|
|
padding: 14px 0;
|
|
border-top: 1px solid var(--border-dark);
|
|
}
|
|
.feature-list-dark li:first-child { border-top: none; padding-top: 0; }
|
|
.feature-icon-sm {
|
|
width: 30px;
|
|
height: 30px;
|
|
border-radius: 8px;
|
|
background: var(--accent-dim);
|
|
color: var(--accent);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: 800;
|
|
font-size: 13px;
|
|
flex-shrink: 0;
|
|
}
|
|
.feature-list-dark strong { display: block; color: var(--text-light); font-size: 15px; margin-bottom: 3px; }
|
|
.feature-list-dark span { color: var(--text-muted); font-size: 14px; }
|
|
|
|
.browser-mock {
|
|
background: var(--bg-dark-2);
|
|
border: 1px solid var(--border-dark);
|
|
border-radius: 16px;
|
|
overflow: hidden;
|
|
box-shadow: var(--shadow-soft);
|
|
}
|
|
|
|
.browser-topbar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 12px 16px;
|
|
background: rgba(255,255,255,0.02);
|
|
border-bottom: 1px solid var(--border-dark);
|
|
}
|
|
|
|
.browser-body { padding: 24px; }
|
|
|
|
.sidebar-nav {
|
|
display: flex;
|
|
gap: 10px;
|
|
margin-bottom: 20px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.sidebar-item {
|
|
font-size: 12.5px;
|
|
padding: 7px 13px;
|
|
border-radius: 8px;
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border-dark);
|
|
color: var(--text-muted);
|
|
}
|
|
.sidebar-item.active-item {
|
|
background: var(--accent-dim);
|
|
color: var(--accent);
|
|
border-color: rgba(53,224,161,0.3);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.table-mock { width: 100%; border-collapse: collapse; }
|
|
.table-mock th {
|
|
text-align: left;
|
|
font-size: 11.5px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
color: var(--text-muted);
|
|
padding: 0 0 12px;
|
|
border-bottom: 1px solid var(--border-dark);
|
|
font-weight: 600;
|
|
}
|
|
.table-mock td {
|
|
padding: 13px 0;
|
|
font-size: 13.5px;
|
|
color: var(--text-light);
|
|
border-bottom: 1px solid var(--border-dark);
|
|
}
|
|
.table-mock tr:last-child td { border-bottom: none; }
|
|
.table-mock td.muted { color: var(--text-muted); }
|
|
|
|
/* ---------- Compliance / trust ---------- */
|
|
.trust-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 24px;
|
|
}
|
|
|
|
.trust-card {
|
|
background: #fff;
|
|
border: 1px solid var(--border-light);
|
|
border-radius: var(--radius);
|
|
padding: 30px;
|
|
box-shadow: var(--shadow-card);
|
|
}
|
|
|
|
.trust-icon {
|
|
width: 46px;
|
|
height: 46px;
|
|
border-radius: 10px;
|
|
background: #f0f2f6;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 20px;
|
|
margin-bottom: 18px;
|
|
}
|
|
|
|
.trust-card h4 { font-size: 17px; margin: 0 0 10px; font-weight: 700; }
|
|
.trust-card p { font-size: 14.5px; color: #5b6474; margin: 0; }
|
|
|
|
.trust-note {
|
|
margin-top: 32px;
|
|
padding: 18px 22px;
|
|
border: 1px dashed #c9d0dc;
|
|
border-radius: 10px;
|
|
background: #fafbfd;
|
|
font-size: 13.5px;
|
|
color: #5b6474;
|
|
text-align: center;
|
|
}
|
|
|
|
/* ---------- CTA band ---------- */
|
|
.cta-band {
|
|
background: linear-gradient(135deg, #0d1e18, #0b0e14 55%, #08131c);
|
|
color: var(--text-light);
|
|
padding: 70px 0;
|
|
}
|
|
|
|
.cta-band-inner {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 24px;
|
|
}
|
|
|
|
.cta-box {
|
|
background: rgba(255,255,255,0.03);
|
|
border: 1px solid var(--border-dark);
|
|
border-radius: var(--radius);
|
|
padding: 36px;
|
|
}
|
|
|
|
.cta-box h3 { font-size: 21px; margin: 0 0 10px; font-weight: 700; }
|
|
.cta-box p { color: var(--text-muted); font-size: 14.5px; margin: 0 0 24px; }
|
|
|
|
/* ---------- Footer ---------- */
|
|
footer {
|
|
background: #060809;
|
|
color: #7c8598;
|
|
padding: 60px 0 30px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.footer-grid {
|
|
display: grid;
|
|
grid-template-columns: 1.4fr 1fr 1fr 1fr;
|
|
gap: 32px;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.footer-logo {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
color: var(--text-light);
|
|
font-weight: 800;
|
|
font-size: 16px;
|
|
margin-bottom: 14px;
|
|
}
|
|
|
|
footer h5 {
|
|
color: var(--text-light);
|
|
font-size: 13px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
margin: 0 0 16px;
|
|
}
|
|
|
|
footer ul { list-style: none; margin: 0; padding: 0; }
|
|
footer ul li { margin-bottom: 10px; }
|
|
footer ul li a:hover { color: var(--accent); }
|
|
|
|
.footer-bottom {
|
|
border-top: 1px solid #1b1f28;
|
|
padding-top: 24px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 12px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.compliance-notice {
|
|
max-width: 1180px;
|
|
margin: 0 auto 30px;
|
|
padding: 0 24px;
|
|
font-size: 12.5px;
|
|
color: #5f6779;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* ---------- Responsive ---------- */
|
|
@media (max-width: 960px) {
|
|
nav.main-nav { display: none; }
|
|
.mobile-toggle { display: inline-flex; }
|
|
.hero-inner { grid-template-columns: 1fr; }
|
|
.hero h1 { font-size: 36px; }
|
|
.audience-grid { grid-template-columns: 1fr; }
|
|
.steps-grid { grid-template-columns: 1fr 1fr; }
|
|
.platform-inner { grid-template-columns: 1fr; }
|
|
.trust-grid { grid-template-columns: 1fr; }
|
|
.cta-band-inner { grid-template-columns: 1fr; }
|
|
.footer-grid { grid-template-columns: 1fr 1fr; }
|
|
.stat-grid { grid-template-columns: 1fr 1fr; }
|
|
}
|
|
|
|
@media (max-width: 560px) {
|
|
.steps-grid { grid-template-columns: 1fr; }
|
|
.footer-grid { grid-template-columns: 1fr; }
|
|
.hero-ctas { flex-direction: column; align-items: stretch; }
|
|
.hero-ctas .btn { width: 100%; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<header>
|
|
<div class="nav-inner">
|
|
<a href="#" class="logo">
|
|
<span class="logo-mark">DRE</span>
|
|
Debt Recovery Experts
|
|
</a>
|
|
<nav class="main-nav">
|
|
<a class="nav-link" href="#services">Services</a>
|
|
<a class="nav-link" href="#how-it-works">How It Works</a>
|
|
<a class="nav-link" href="#creditors">For Creditors</a>
|
|
<a class="nav-link" href="#debtors">For Debtors</a>
|
|
<a class="nav-link" href="#contact">Contact</a>
|
|
</nav>
|
|
<div class="nav-ctas">
|
|
<a href="https://my.debtrecoveryexperts.com" class="btn btn-ghost-dark">Client Login</a>
|
|
<a href="https://portal.debtrecoveryexperts.com" class="btn btn-primary">Submit a Claim</a>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<section class="hero">
|
|
<div class="hero-inner">
|
|
<div>
|
|
<div class="eyebrow"><span class="dot"></span> Modern recovery infrastructure for creditors</div>
|
|
<h1>Recover what you're owed. <span class="grad">Track it in real time.</span></h1>
|
|
<p class="sub">Debt Recovery Experts pairs experienced Texas-based recovery specialists with a live client dashboard, so you always know exactly where your accounts stand, compliant with FDCPA and TDCPA every step of the way.</p>
|
|
<div class="hero-ctas">
|
|
<a href="https://portal.debtrecoveryexperts.com" class="btn btn-primary btn-lg">Submit a Claim</a>
|
|
<a href="https://pay.debtrecoveryexperts.com" class="btn btn-outline-light btn-lg">Make a Payment</a>
|
|
</div>
|
|
<div class="hero-meta">
|
|
<span><span class="check-ico">✓</span> FDCPA and TDCPA compliant process</span>
|
|
<span><span class="check-ico">✓</span> Secure account handling</span>
|
|
<span><span class="check-ico">✓</span> Live status dashboard included</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="product-preview">
|
|
<div class="preview-topbar">
|
|
<span class="tb-dot"></span><span class="tb-dot"></span><span class="tb-dot"></span>
|
|
<span class="preview-url">my.debtrecoveryexperts.com</span>
|
|
</div>
|
|
<div class="preview-body">
|
|
<div class="preview-head">
|
|
<h4>Recovery Dashboard</h4>
|
|
<span class="badge">Live</span>
|
|
</div>
|
|
<div class="stat-grid">
|
|
<div class="stat-box">
|
|
<div class="label">Active Claims</div>
|
|
<div class="value">[--]</div>
|
|
</div>
|
|
<div class="stat-box">
|
|
<div class="label">In Progress</div>
|
|
<div class="value accent">[--]</div>
|
|
</div>
|
|
<div class="stat-box">
|
|
<div class="label">Resolved</div>
|
|
<div class="value">[--]</div>
|
|
</div>
|
|
</div>
|
|
<div class="mini-chart">
|
|
<div class="bar" style="height: 35%;"></div>
|
|
<div class="bar" style="height: 55%;"></div>
|
|
<div class="bar" style="height: 40%;"></div>
|
|
<div class="bar" style="height: 70%;"></div>
|
|
<div class="bar" style="height: 50%;"></div>
|
|
<div class="bar" style="height: 85%;"></div>
|
|
<div class="bar" style="height: 60%;"></div>
|
|
</div>
|
|
<div class="case-row">
|
|
<span class="case-name">Account #[ID]</span>
|
|
<span class="status-chip active">Active</span>
|
|
</div>
|
|
<div class="case-row">
|
|
<span class="case-name">Account #[ID]</span>
|
|
<span class="status-chip pending">Pending Response</span>
|
|
</div>
|
|
<div class="case-row">
|
|
<span class="case-name">Account #[ID]</span>
|
|
<span class="status-chip active">Active</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="hero-bottom-fade"></div>
|
|
</section>
|
|
|
|
<section id="services">
|
|
<div class="wrap">
|
|
<div class="section-head">
|
|
<div class="section-tag">Who We Serve</div>
|
|
<h2>Built for creditors, fair to consumers</h2>
|
|
<p>Two sides of the same process, each with a clear, dedicated path forward.</p>
|
|
</div>
|
|
<div class="audience-grid">
|
|
<div class="audience-card primary" id="creditors">
|
|
<span class="pill-tag primary-pill">For Creditors</span>
|
|
<div class="audience-icon green">💼</div>
|
|
<h3>Recover outstanding accounts</h3>
|
|
<p class="desc">Submit past-due accounts and let our team pursue recovery while you track progress from a live dashboard, no spreadsheets or status calls required.</p>
|
|
<ul class="audience-list">
|
|
<li>Submit claims directly through the online intake portal</li>
|
|
<li>Track every account status in one dashboard</li>
|
|
<li>Compliant recovery process, documented at each step</li>
|
|
<li>Direct communication with your assigned recovery team</li>
|
|
</ul>
|
|
<a href="https://portal.debtrecoveryexperts.com" class="btn btn-dark">Submit a Claim →</a>
|
|
</div>
|
|
|
|
<div class="audience-card" id="debtors">
|
|
<span class="pill-tag secondary-pill">For Debtors</span>
|
|
<div class="audience-icon blue">💳</div>
|
|
<h3>Resolve an account you owe</h3>
|
|
<p class="desc">If you've received a notice from us, you can review your account, make a payment, or discuss options securely online, on your schedule.</p>
|
|
<ul class="audience-list">
|
|
<li>Make a secure payment online at any time</li>
|
|
<li>Review your account details and balance</li>
|
|
<li>Understand your rights under FDCPA and TDCPA</li>
|
|
<li>Contact our team to discuss payment options</li>
|
|
</ul>
|
|
<a href="https://pay.debtrecoveryexperts.com" class="btn btn-outline-dark" style="border:1px solid #d7dce4; color:#10131a; display:inline-flex; align-items:center; padding:11px 20px; border-radius:10px; font-weight:600; font-size:14.5px;">Make a Payment →</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="how-it-works" style="background:#fff;">
|
|
<div class="wrap">
|
|
<div class="section-head">
|
|
<div class="section-tag">How It Works</div>
|
|
<h2>From submission to resolution</h2>
|
|
<p>A straightforward process, visible to you at every stage.</p>
|
|
</div>
|
|
<div class="steps-grid">
|
|
<div class="step-card">
|
|
<div class="step-num">1</div>
|
|
<h4>Submit your claim</h4>
|
|
<p>Provide account details through the secure online intake portal in a few minutes.</p>
|
|
</div>
|
|
<div class="step-card">
|
|
<div class="step-num">2</div>
|
|
<h4>We review and assign</h4>
|
|
<p>Your claim is reviewed and assigned to a recovery specialist for action.</p>
|
|
</div>
|
|
<div class="step-card">
|
|
<div class="step-num">3</div>
|
|
<h4>Recovery begins</h4>
|
|
<p>We contact the debtor in accordance with FDCPA and TDCPA requirements.</p>
|
|
</div>
|
|
<div class="step-card">
|
|
<div class="step-num">4</div>
|
|
<h4>Track and get paid</h4>
|
|
<p>Monitor status in your dashboard and receive funds as accounts resolve.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="platform-section">
|
|
<div class="wrap">
|
|
<div class="platform-inner">
|
|
<div>
|
|
<div class="section-tag">The Client Portal</div>
|
|
<h2>Your recovery activity, in one dashboard</h2>
|
|
<p class="lead">my.debtrecoveryexperts.com gives creditors a real-time view into every submitted claim, no waiting on emails or phone calls for an update.</p>
|
|
<ul class="feature-list-dark">
|
|
<li>
|
|
<div class="feature-icon-sm">☰</div>
|
|
<div>
|
|
<strong>Live claim status</strong>
|
|
<span>See exactly where each account stands, updated as work happens.</span>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="feature-icon-sm">📄</div>
|
|
<div>
|
|
<strong>Document and correspondence log</strong>
|
|
<span>Every notice and communication tied to the account, in one place.</span>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="feature-icon-sm">🔔</div>
|
|
<div>
|
|
<strong>Status notifications</strong>
|
|
<span>Know when an account moves, resolves, or needs your input.</span>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="feature-icon-sm">🔒</div>
|
|
<div>
|
|
<strong>Secure, permissioned access</strong>
|
|
<span>Your data is scoped to your account with secure login.</span>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
<a href="https://my.debtrecoveryexperts.com" class="btn btn-primary btn-lg">Go to Client Dashboard →</a>
|
|
</div>
|
|
|
|
<div class="browser-mock">
|
|
<div class="browser-topbar">
|
|
<span class="tb-dot"></span><span class="tb-dot"></span><span class="tb-dot"></span>
|
|
<span class="preview-url">my.debtrecoveryexperts.com/accounts</span>
|
|
</div>
|
|
<div class="browser-body">
|
|
<div class="sidebar-nav">
|
|
<span class="sidebar-item active-item">Overview</span>
|
|
<span class="sidebar-item">Accounts</span>
|
|
<span class="sidebar-item">Documents</span>
|
|
<span class="sidebar-item">Payments</span>
|
|
<span class="sidebar-item">Settings</span>
|
|
</div>
|
|
<table class="table-mock">
|
|
<thead>
|
|
<tr>
|
|
<th>Account</th>
|
|
<th>Balance</th>
|
|
<th>Status</th>
|
|
<th>Updated</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>[Account name]</td>
|
|
<td class="muted">[$ Amount]</td>
|
|
<td><span class="status-chip active">Active</span></td>
|
|
<td class="muted">[Date]</td>
|
|
</tr>
|
|
<tr>
|
|
<td>[Account name]</td>
|
|
<td class="muted">[$ Amount]</td>
|
|
<td><span class="status-chip pending">Pending</span></td>
|
|
<td class="muted">[Date]</td>
|
|
</tr>
|
|
<tr>
|
|
<td>[Account name]</td>
|
|
<td class="muted">[$ Amount]</td>
|
|
<td><span class="status-chip active">Active</span></td>
|
|
<td class="muted">[Date]</td>
|
|
</tr>
|
|
<tr>
|
|
<td>[Account name]</td>
|
|
<td class="muted">[$ Amount]</td>
|
|
<td><span class="status-chip pending">Pending</span></td>
|
|
<td class="muted">[Date]</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section style="background:#fff;">
|
|
<div class="wrap">
|
|
<div class="section-head">
|
|
<div class="section-tag">Compliance and Trust</div>
|
|
<h2>Recovery, done the right way</h2>
|
|
<p>Every account is handled within the bounds of federal and Texas law.</p>
|
|
</div>
|
|
<div class="trust-grid">
|
|
<div class="trust-card">
|
|
<div class="trust-icon">⚖️</div>
|
|
<h4>FDCPA compliant</h4>
|
|
<p>All communication and recovery activity follows the federal Fair Debt Collection Practices Act.</p>
|
|
</div>
|
|
<div class="trust-card">
|
|
<div class="trust-icon">📜</div>
|
|
<h4>TDCPA compliant</h4>
|
|
<p>Our process also aligns with the Texas Debt Collection Practices Act and applicable state rules.</p>
|
|
</div>
|
|
<div class="trust-card">
|
|
<div class="trust-icon">🔐</div>
|
|
<h4>Secure data handling</h4>
|
|
<p>Claim and account data is handled with secure infrastructure and restricted access controls.</p>
|
|
</div>
|
|
</div>
|
|
<div class="trust-note">
|
|
This site is a design mockup. Compliance language, certifications, and specific claims will be reviewed and finalized with legal counsel before publication.
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="cta-band" id="contact">
|
|
<div class="wrap">
|
|
<div class="cta-band-inner">
|
|
<div class="cta-box">
|
|
<h3>Ready to submit a claim?</h3>
|
|
<p>Start the intake process online and get your account into the recovery pipeline.</p>
|
|
<a href="https://portal.debtrecoveryexperts.com" class="btn btn-primary">Submit a Claim →</a>
|
|
</div>
|
|
<div class="cta-box">
|
|
<h3>Already a client?</h3>
|
|
<p>Log in to your dashboard to check status, review documents, and track resolved accounts.</p>
|
|
<a href="https://my.debtrecoveryexperts.com" class="btn btn-outline-light">Go to Client Dashboard →</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<footer>
|
|
<div class="wrap">
|
|
<div class="footer-grid">
|
|
<div>
|
|
<div class="footer-logo">
|
|
<span class="logo-mark">DRE</span>
|
|
Debt Recovery Experts
|
|
</div>
|
|
<p style="max-width: 280px; color:#7c8598; font-size:13.5px;">Texas-based debt recovery services for creditors, with a compliant process for consumers who owe.</p>
|
|
</div>
|
|
<div>
|
|
<h5>Company</h5>
|
|
<ul>
|
|
<li><a href="#services">Services</a></li>
|
|
<li><a href="#how-it-works">How It Works</a></li>
|
|
<li><a href="#contact">Contact</a></li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h5>Portals</h5>
|
|
<ul>
|
|
<li><a href="https://portal.debtrecoveryexperts.com">Submit a Claim</a></li>
|
|
<li><a href="https://my.debtrecoveryexperts.com">Client Dashboard</a></li>
|
|
<li><a href="https://pay.debtrecoveryexperts.com">Make a Payment</a></li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h5>Legal</h5>
|
|
<ul>
|
|
<li><a href="#">Privacy Policy</a></li>
|
|
<li><a href="#">Terms of Service</a></li>
|
|
<li><a href="#">Consumer Rights (FDCPA / TDCPA)</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="footer-bottom">
|
|
<span>[Copyright year] Debt Recovery Experts. All rights reserved.</span>
|
|
<span>Licensed debt collection agency operating in Texas.</span>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<div class="compliance-notice">
|
|
Debt Recovery Experts is a debt collector. This communication is from a debt collector. This is an attempt to collect a debt, and any information obtained will be used for that purpose, where applicable. [Full compliance and licensing disclosures to be finalized with legal counsel.]
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|