landing.html / Original Version
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SmartBooks — Audit Automation for Accounting Professionals</title>
<meta name="description"
content="SmartBooks automates invoice extraction, bank statement classification and Tally ERP reporting for CA firms, auditors and finance teams.">
<link
href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,300;0,14..32,400;0,14..32,500;0,14..32,600;0,14..32,700;1,14..32,300&family=Outfit:wght@600;700;800&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<style>
:root {
/* Premium Neutral Palette */
--brand: #4f46e5;
--brand-dim: rgba(79, 70, 229, 0.08);
--brand-glow: rgba(79, 70, 229, 0.12);
--green: #059669;
--yellow: #ca8a04;
/* Backgrounds: Elevated Slate Grey theme */
--bg-0: #f1f5f9; /* Soft Slate background */
--bg-1: #ffffff; /* Pure white cards */
--bg-2: #f8fafc; /* Content light */
--bg-3: #e2e8f0; /* Borders/Separators */
--glass: rgba(241, 245, 249, 0.85);
--stroke: rgba(15, 23, 42, 0.06);
--stroke-hover: rgba(79, 70, 229, 0.2);
--text-1: #0f172a; /* Deep Slate */
--text-2: #334155; /* Slate Body */
--text-3: #4b5563; /* Darker grey for better visibility */
}
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 16px;
scroll-behavior: smooth;
}
body {
font-family: 'Inter', system-ui, sans-serif;
background: var(--bg-0);
color: var(--text-1);
line-height: 1.75;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
h1,
h2,
h3,
h4 {
font-family: 'Outfit', sans-serif;
letter-spacing: -0.025em;
}
/* ─── Global canvas effect ─── */
body::before {
content: '';
position: fixed;
inset: 0;
background:
radial-gradient(circle at 100% 0%, rgba(79, 70, 229, 0.05) 0%, transparent 40%),
radial-gradient(circle at 0% 100%, rgba(6, 182, 212, 0.04) 0%, transparent 40%),
var(--bg-0);
pointer-events: none;
z-index: -2;
}
/* Technical Grid Overlay */
body::after {
content: '';
position: fixed;
inset: 0;
background-image:
linear-gradient(var(--stroke) 1px, transparent 1px),
linear-gradient(90deg, var(--stroke) 1px, transparent 1px);
background-size: 40px 40px;
mask-image: radial-gradient(circle at 50% 50%, black, transparent 80%);
opacity: 0.4;
pointer-events: none;
z-index: -1;
}
/* ─── NAV ─── */
nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 999;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 7%;
height: 72px;
background: rgba(241, 245, 249, 0.85);
backdrop-filter: blur(24px) saturate(160%);
}
.logo {
display: flex;
align-items: center;
gap: 9px;
font-family: 'Outfit', sans-serif;
font-size: 1.25rem;
font-weight: 800;
color: var(--text-1);
text-decoration: none;
letter-spacing: -0.03em;
}
.logo-icon {
width: 30px;
height: 30px;
background: linear-gradient(135deg, #6366f1, #8b5cf6);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
}
.nav-links {
display: flex;
gap: 2.5rem;
list-style: none;
}
.nav-links a {
color: var(--text-2);
text-decoration: none;
font-size: 0.875rem;
font-weight: 500;
transition: color 0.2s;
}
.nav-links a:hover {
color: var(--text-1);
}
.btn-nav {
background: var(--brand);
color: #fff;
text-decoration: none;
padding: 0.55rem 1.25rem;
border-radius: 8px;
font-size: 0.875rem;
font-weight: 600;
transition: all 0.25s;
box-shadow: 0 0 0 0 var(--brand-glow);
}
.btn-nav:hover {
background: #4f46e5;
box-shadow: 0 0 0 4px var(--brand-glow);
}
/* ─── HERO ─── */
.hero {
position: relative;
z-index: 1;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 9rem 7% 6rem;
}
.hero-inner {
max-width: 860px;
}
.hero-pill {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--brand-dim);
color: var(--brand);
border: 1px solid rgba(99, 102, 241, 0.25);
padding: 5px 14px 5px 8px;
border-radius: 100px;
font-size: 0.78rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 2rem;
}
.hero-pill span {
background: var(--brand);
color: #fff;
border-radius: 100px;
padding: 2px 8px;
font-size: 0.7rem;
}
.hero h1 {
font-size: clamp(3rem, 6vw, 5.5rem);
line-height: 1.0;
font-weight: 800;
color: var(--text-1);
margin-bottom: 1.75rem;
}
.hero h1 em {
font-style: normal;
background: linear-gradient(135deg, #4f46e5 0%, #a855f7 50%, #4f46e5 100%);
background-size: 200% auto;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: textShimmer 4s linear infinite;
}
@keyframes textShimmer {
to { background-position: 200% center; }
}
.hero-sub {
font-size: 1.2rem;
color: var(--text-2);
max-width: 680px;
margin: 0 auto 3rem;
font-weight: 400;
line-height: 1.8;
}
.hero-actions {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
.btn-hero-primary {
background: linear-gradient(135deg, #4f46e5, #7c3aed);
color: #fff;
text-decoration: none;
padding: 1rem 2.5rem;
border-radius: 12px;
font-size: 1rem;
font-weight: 700;
transition: all 0.3s;
box-shadow: 0 10px 30px -8px rgba(79, 70, 229, 0.4);
animation: pulseBtn 3s infinite;
}
@keyframes pulseBtn {
0% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.4); }
70% { box-shadow: 0 0 0 20px rgba(79, 70, 229, 0); }
100% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0); }
}
.btn-hero-primary:hover {
transform: translateY(-2px);
box-shadow: 0 16px 40px -8px rgba(99, 102, 241, 0.6);
}
.btn-hero-ghost {
background: transparent;
color: var(--text-2);
text-decoration: none;
padding: 0.9rem 2.2rem;
border-radius: 10px;
font-size: 1rem;
font-weight: 600;
border: 1px solid var(--stroke);
transition: all 0.3s;
}
.btn-hero-ghost:hover {
border-color: var(--stroke-hover);
color: var(--text-1);
}
/* ─── DIVIDER ─── */
.section-divider {
width: 100%;
height: 1px;
background: linear-gradient(90deg, transparent, var(--stroke), transparent);
}
/* ─── WHY WE BUILT THIS ─── */
.why-section {
position: relative;
z-index: 1;
padding: 8rem 7%;
background: var(--bg-1);
}
.why-inner {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: 6rem;
align-items: center;
}
.section-label {
font-size: 0.72rem;
font-weight: 700;
color: var(--brand);
text-transform: uppercase;
letter-spacing: 0.12em;
margin-bottom: 1rem;
display: block;
}
.why-content h2 {
font-size: clamp(2rem, 3.5vw, 3rem);
line-height: 1.15;
margin-bottom: 1.75rem;
}
.why-content p {
color: var(--text-2);
font-size: 1.05rem;
margin-bottom: 1.5rem;
line-height: 1.85;
}
.why-stat-group {
display: flex;
gap: 2.5rem;
margin-top: 2.5rem;
}
.why-stat h3 {
font-size: 2rem;
font-weight: 700;
color: var(--text-1);
}
.why-stat p {
font-size: 0.85rem;
color: var(--text-3);
margin-top: 2px;
}
.why-card-stack {
display: flex;
flex-direction: column;
gap: 1rem;
}
.why-card {
background: var(--bg-1);
border: 1px solid var(--stroke);
border-radius: 24px;
padding: 2rem;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.why-card:hover {
background: #fff;
border-color: var(--stroke-hover);
transform: translateY(-8px);
box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.08);
}
.why-card-icon {
width: 40px;
height: 40px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
margin-bottom: 1rem;
}
.why-card h4 {
font-size: 1.05rem;
margin-bottom: 6px;
}
.why-card p {
font-size: 0.9rem;
color: var(--text-2);
line-height: 1.7;
}
/* ─── WHO IT'S FOR ─── */
.users-section {
position: relative;
z-index: 1;
padding: 8rem 7%;
}
.section-header {
text-align: center;
max-width: 600px;
margin: 0 auto 5rem;
}
.section-header h2 {
font-size: clamp(2rem, 3vw, 2.75rem);
margin-bottom: 1rem;
}
.section-header p {
color: var(--text-2);
font-size: 1.05rem;
}
.user-grid {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
.user-card {
background: linear-gradient(160deg, var(--bg-2), var(--bg-1));
border: 1px solid var(--stroke);
border-radius: 20px;
padding: 2.5rem;
transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.user-card:hover {
border-color: var(--stroke-hover);
transform: translateY(-6px);
box-shadow: 0 20px 50px -15px rgba(79, 70, 229, 0.12);
}
.user-avatar {
width: 52px;
height: 52px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.4rem;
margin-bottom: 1.5rem;
}
.user-card h3 {
font-size: 1.2rem;
margin-bottom: 0.75rem;
}
.user-card p {
color: var(--text-2);
font-size: 0.925rem;
line-height: 1.7;
}
/* ─── HOW IT WORKS ─── */
.how-section {
position: relative;
z-index: 1;
padding: 10rem 7%;
background: linear-gradient(to bottom, var(--bg-0), var(--bg-1), var(--bg-0));
}
.how-timeline {
max-width: 1000px;
margin: 5rem auto 0;
position: relative;
}
.how-timeline::before {
content: '';
position: absolute;
left: 50px;
top: 0;
bottom: 0;
width: 1px;
background: linear-gradient(to bottom, transparent, var(--stroke) 10%, var(--stroke) 90%, transparent);
}
.how-step {
display: flex;
gap: 3rem;
margin-bottom: 5rem;
position: relative;
}
.how-step-left {
width: 32px;
flex-shrink: 0;
margin-top: 6px;
}
.step-dot {
width: 20px;
height: 20px;
border-radius: 50%;
border: 2px solid var(--brand);
background: var(--bg-0);
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 2;
margin-left: 14px;
}
.step-dot::after {
content: '';
width: 8px;
height: 8px;
background: var(--brand);
border-radius: 50%;
}
.how-step-body {
background: var(--bg-2);
border: 1px solid var(--stroke);
border-radius: 20px;
padding: 2.5rem;
flex: 1;
transition: border-color 0.3s;
}
.how-step-body:hover {
border-color: var(--stroke-hover);
}
.step-phase {
font-size: 0.7rem;
font-weight: 700;
color: var(--brand);
text-transform: uppercase;
letter-spacing: 0.12em;
margin-bottom: 0.75rem;
display: block;
}
.how-step-body h3 {
font-size: 1.5rem;
margin-bottom: 1rem;
}
.how-step-body p {
color: var(--text-2);
font-size: 0.975rem;
line-height: 1.8;
}
.how-note {
margin-top: 1.5rem;
padding: 1rem 1.25rem;
background: var(--bg-3);
border-radius: 10px;
display: flex;
gap: 10px;
align-items: flex-start;
font-size: 0.875rem;
color: var(--text-2);
}
.how-note i {
color: var(--green);
margin-top: 3px;
flex-shrink: 0;
}
/* ─── RESULT (image placeholder) ─── */
.result-section {
position: relative;
z-index: 1;
padding: 8rem 7%;
text-align: center;
}
.result-image-wrap {
max-width: 1100px;
margin: 4rem auto 0;
border-radius: 24px;
overflow: hidden;
border: 1px solid var(--stroke);
box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.1);
background: #fff;
}
.image-toolbar {
background: var(--bg-2);
padding: 0.9rem 1.5rem;
display: flex;
align-items: center;
gap: 8px;
border-bottom: 1px solid var(--stroke);
}
.toolbar-dot {
width: 11px;
height: 11px;
border-radius: 50%;
}
.image-placeholder-inner {
height: 520px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: var(--text-3);
gap: 1rem;
background: repeating-linear-gradient(45deg,
var(--bg-1),
var(--bg-1) 10px,
var(--bg-2) 10px,
var(--bg-2) 20px);
}
.image-placeholder-inner i {
font-size: 3rem;
opacity: 0.25;
}
.image-placeholder-inner .img-label {
font-size: 0.78rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--text-3);
}
/* ─── MODALS ─── */
.modal-overlay {
position: fixed;
inset: 0;
z-index: 9999;
background: rgba(0, 0, 0, 0.75);
backdrop-filter: blur(8px);
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s;
}
.modal-overlay.open {
opacity: 1;
pointer-events: all;
}
.modal-box {
background: #fff;
border: 1px solid var(--stroke);
border-radius: 24px;
max-width: 720px;
width: 100%;
max-height: 85vh;
display: flex;
flex-direction: column;
transform: translateY(20px) scale(0.98);
transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.2);
}
.modal-overlay.open .modal-box {
transform: translateY(0) scale(1);
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.5rem 2rem;
border-bottom: 1px solid var(--stroke);
flex-shrink: 0;
}
.modal-header h3 {
font-size: 1.25rem;
font-weight: 700;
}
.modal-header .modal-close {
background: none;
border: none;
color: var(--text-3);
font-size: 1.3rem;
cursor: pointer;
line-height: 1;
transition: color 0.2s;
padding: 4px;
}
.modal-header .modal-close:hover {
color: var(--text-1);
}
.modal-body {
padding: 2rem;
overflow-y: auto;
color: var(--text-2);
font-size: 0.925rem;
line-height: 1.85;
}
.modal-body h4 {
font-size: 1rem;
color: var(--text-1);
margin: 1.75rem 0 0.5rem;
}
.modal-body h4:first-child {
margin-top: 0;
}
.modal-body p {
margin-bottom: 1rem;
}
.modal-body ul {
padding-left: 1.5rem;
margin-bottom: 1rem;
}
.modal-body ul li {
margin-bottom: 0.5rem;
}
.modal-footer-bar {
padding: 1.25rem 2rem;
border-top: 1px solid var(--stroke);
display: flex;
justify-content: flex-end;
flex-shrink: 0;
}
/* ─── GOOGLE BTN ─── */
.btn-google {
display: inline-flex;
align-items: center;
gap: 9px;
background: #fff;
color: #3c4043;
border: 1px solid #dadce0;
padding: 0.5rem 1rem;
border-radius: 8px;
font-size: 0.85rem;
font-weight: 600;
text-decoration: none;
transition: all 0.2s;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
white-space: nowrap;
}
.btn-google:hover {
background: #f8f9fa;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}
.btn-google svg {
width: 17px;
height: 17px;
flex-shrink: 0;
}
/* ─── BANK MODAL SPECIFIC ─── */
.password-demo {
background: var(--bg-3);
border: 1px solid var(--stroke);
border-radius: 12px;
padding: 1.5rem;
margin: 1.5rem 0;
}
.password-input-wrap {
position: relative;
display: flex;
align-items: center;
}
.password-input-wrap input {
width: 100%;
background: var(--bg-1);
border: 1px solid var(--stroke);
border-radius: 8px;
padding: 0.75rem 1rem;
color: var(--text-1);
font-family: inherit;
font-size: 0.9rem;
outline: none;
transition: border-color 0.25s;
}
.password-input-wrap input:focus {
border-color: var(--brand);
}
.password-input-wrap i {
position: absolute;
right: 1rem;
color: var(--text-3);
cursor: pointer;
}
.security-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(16, 185, 129, 0.1);
color: var(--green);
padding: 4px 10px;
border-radius: 6px;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 0.5rem;
}
/* ─── STICKY BOTTOM CTA ─── */
.sticky-cta {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 998;
background: rgba(241, 245, 249, 0.9);
backdrop-filter: blur(24px) saturate(180%);
border-top: 1px solid var(--stroke);
padding: 1rem 7%;
display: flex;
align-items: center;
justify-content: center;
gap: 2rem;
transform: translateY(110%);
opacity: 0;
transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s;
}
.sticky-cta.visible {
transform: translateY(0);
opacity: 1;
}
.sticky-cta-label {
font-size: 0.9rem;
color: var(--text-2);
}
.sticky-cta-label b {
color: var(--text-1);
}
.sticky-divider {
width: 1px;
height: 28px;
background: var(--stroke);
}
.btn-already {
font-size: 0.875rem;
font-weight: 600;
color: var(--text-2);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: all 0.2s;
}
.btn-already:hover {
color: var(--text-1);
border-bottom-color: var(--text-2);
}
/* ─── TRUST BAR ─── */
.trust-bar {
background: rgba(17, 24, 39, 0.4);
border-top: 1px solid var(--stroke);
border-bottom: 1px solid var(--stroke);
padding: 1.25rem 7%;
display: flex;
justify-content: center;
gap: 4rem;
backdrop-filter: blur(8px);
position: relative;
z-index: 2;
}
.trust-item {
display: flex;
align-items: center;
gap: 10px;
font-size: 0.85rem;
color: var(--text-2);
font-weight: 500;
}
.trust-item i {
color: var(--green);
font-size: 1rem;
}
.trust-item b {
color: var(--text-1);
font-weight: 600;
}
@media (max-width: 768px) {
.trust-bar {
flex-direction: column;
gap: 1rem;
align-items: flex-start;
padding: 1.5rem 7%;
}
}
/* ─── FOOTER ─── */
body {
padding-bottom: 72px;
}
/* prevent sticky CTA from covering content */
footer {
position: relative;
z-index: 1;
background: var(--bg-1);
border-top: 1px solid var(--stroke);
padding: 5rem 7% 0;
}
.footer-top {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: 4rem;
padding-bottom: 4rem;
border-bottom: 1px solid var(--stroke);
}
.footer-brand {
max-width: 340px;
}
.footer-tagline {
font-size: 0.875rem;
color: var(--text-3);
line-height: 1.75;
}
.footer-col h5 {
font-family: 'Outfit', sans-serif;
font-size: 0.8rem;
font-weight: 700;
color: var(--text-1);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 1.25rem;
}
.footer-col ul {
list-style: none;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.footer-col a {
color: var(--text-3);
text-decoration: none;
font-size: 0.9rem;
transition: color 0.2s;
}
.footer-col a:hover {
color: var(--text-1);
}
.footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.5rem 0;
font-size: 0.78rem;
color: var(--text-3);
flex-wrap: wrap;
gap: 1rem;
}
.footer-socials {
display: flex;
gap: 1.25rem;
}
.footer-socials a {
color: var(--text-3);
text-decoration: none;
font-size: 1rem;
transition: color 0.2s;
}
.footer-socials a:hover {
color: var(--text-1);
}
/* ─── SCROLL REVEAL ─── */
.reveal {
opacity: 0;
transform: translateY(30px);
transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.active {
opacity: 1;
transform: translateY(0);
}
/* ─── BEFORE / AFTER ─── */
.compare-section {
padding: 8rem 7%;
}
.compare-grid {
max-width: 1100px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
}
.compare-card {
border-radius: 20px;
padding: 2.5rem;
border: 1px solid var(--stroke);
}
.before-card {
background: rgba(239, 68, 68, 0.04);
border-color: rgba(239, 68, 68, 0.15);
}
.after-card {
background: rgba(16, 185, 129, 0.04);
border-color: rgba(16, 185, 129, 0.15);
}
.compare-tag {
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 1.5rem;
display: flex;
align-items: center;
gap: 8px;
}
.before-card .compare-tag {
color: #f87171;
}
.after-card .compare-tag {
color: #34d399;
}
.compare-card ul {
list-style: none;
display: flex;
flex-direction: column;
gap: 1rem;
}
.compare-card li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 0.925rem;
color: var(--text-2);
line-height: 1.5;
}
.before-card li i {
color: #f87171;
margin-top: 3px;
flex-shrink: 0;
}
.after-card li i {
color: #34d399;
margin-top: 3px;
flex-shrink: 0;
}
/* ─── WHAT WE SUPPORT ─── */
.support-section {
padding: 8rem 7%;
background: var(--bg-1);
}
.support-grid {
max-width: 1100px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
.support-card {
background: var(--bg-2);
border: 1px solid var(--stroke);
border-radius: 20px;
padding: 2rem;
transition: border-color 0.3s;
}
.support-card:hover {
border-color: var(--stroke-hover);
}
.support-icon {
font-size: 1.5rem;
color: var(--brand);
margin-bottom: 1.25rem;
}
.support-card h4 {
font-size: 1rem;
margin-bottom: 1rem;
color: var(--text-1);
}
.support-card ul {
list-style: none;
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.support-card li {
font-size: 0.875rem;
color: var(--text-2);
padding-left: 1rem;
position: relative;
}
.support-card li::before {
content: '';
position: absolute;
left: 0;
top: 8px;
width: 5px;
height: 5px;
background: var(--brand);
border-radius: 50%;
}
/* ─── FAQ ─── */
.faq-section {
padding: 8rem 7%;
}
.faq-list {
max-width: 800px;
margin: 0 auto;
}
.faq-item {
border-bottom: 1px solid var(--stroke);
}
.faq-q {
width: 100%;
background: none;
border: none;
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.5rem 0;
cursor: pointer;
color: var(--text-1);
text-align: left;
gap: 1rem;
}
.faq-q span {
font-size: 1rem;
font-weight: 600;
line-height: 1.5;
}
.faq-q i {
color: var(--text-3);
transition: transform 0.3s;
flex-shrink: 0;
font-size: 0.85rem;
}
.faq-q.open i {
transform: rotate(180deg);
color: var(--brand);
}
.faq-a {
display: none;
padding: 0 0 1.5rem;
}
.faq-a.open {
display: block;
}
.faq-a p {
color: var(--text-2);
font-size: 0.95rem;
line-height: 1.85;
}
/* ─── RESPONSIVE ─── */
@media (max-width:1024px) {
.why-inner,
.user-grid,
.support-grid {
grid-template-columns: 1fr;
}
.compare-grid {
grid-template-columns: 1fr;
}
.nav-links {
display: none;
}
.footer-top {
grid-template-columns: 1fr;
gap: 3rem;
}
}
@media (max-width:640px) {
.hero {
padding-top: 7rem;
}
.how-timeline::before {
display: none;
}
}
</style>
</head>
<body>
<!-- ═══════════════ NAV ═══════════════ -->
<nav>
<a class="logo" href="#">
<div class="logo-icon"><i class="fas fa-bolt" style="color:#fff;font-size:0.8rem;"></i></div>
SmartBooks
</a>
<ul class="nav-links">
<li><a href="#why">Why We Built This</a></li>
<li><a href="#users">Who It's For</a></li>
<li><a href="#how">How It Works</a></li>
<li><a href="#bank-pipeline">Bank Pipeline</a></li>
<li><a href="#result">The Output</a></li>
</ul>
<div style="display:flex; align-items:center; gap:0.75rem;">
<!-- Google Sign-In button (visual only) -->
<a href="index.html" class="btn-google">
<!-- Google G SVG -->
<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
<path fill="#4285F4"
d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v8.51h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.14z" />
<path fill="#34A853"
d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z" />
<path fill="#FBBC05"
d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z" />
<path fill="#EA4335"
d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z" />
</svg>
Sign in with Google
</a>
</div>
</nav>
<!-- ═══════════════ HERO ═══════════════ -->
<section class="hero">
<div class="hero-inner">
<div class="hero-pill">
<span>v1.0</span> Now in Active Use — Audit Automation Engine
</div>
<h1>From Raw Documents<br>to <em>Tally-Ready Reports</em><br>Without Typing a Word.</h1>
<p class="hero-sub">SmartBooks is a precision-built utility for audit professionals. It connects directly to
your Google Drive, reads your invoices and bank statements with structured intelligence, and delivers
clean, classified data ready for Tally ERP import.</p>
<div class="hero-actions">
<a href="index.html" class="btn-hero-primary">Launch Dashboard →</a>
<a href="#how" class="btn-hero-ghost">See How It Works</a>
</div>
</div>
</section>
<!-- ═══════════════ TRANSPARENCY SECTION ═══════════════ -->
<section class="transparency-section reveal" id="security" style="padding: 6rem 7%; position: relative; z-index: 1;">
<div class="section-header" style="max-width: 800px; margin-bottom: 4rem;">
<span class="section-label">Trust & Transparency</span>
<h2>Our Transparency Standard</h2>
<p>Professional auditing requires trust. SmartBooks is built on a technical architecture that ensures your
clients' financial data remains entirely under your control.</p>
</div>
<div class="transparency-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; max-width: 1200px; margin: 0 auto;">
<!-- Card 1: Storage -->
<div class="user-card">
<div class="user-avatar" style="background: rgba(16, 185, 129, 0.1); color: var(--green);">
<i class="fas fa-server-slash"></i>
</div>
<h3>Zero Server Storage</h3>
<p>We do not retain copies of your documents. Files are read, processed in RAM, and cleared instantly. Your files stay in your Google Drive.</p>
</div>
<!-- Card 2: E2E -->
<div class="user-card">
<div class="user-avatar" style="background: rgba(99, 102, 241, 0.1); color: var(--brand);">
<i class="fas fa-shield-halved"></i>
</div>
<h3>End-to-End Privacy</h3>
<p>Our pipeline is a direct tunnel between your storage and dashboard. We use OAuth 2.0 to ensure only you can authorize access.</p>
</div>
<!-- Card 3: Decryption -->
<div class="user-card">
<div class="user-avatar" style="background: rgba(245, 158, 11, 0.1); color: var(--yellow);">
<i class="fas fa-key"></i>
</div>
<h3>Local-Only Decryption</h3>
<p>Bank passwords are never saved on disk. They exist in volatile RAM only for the extraction cycle, ensuring 100% security.</p>
</div>
</div>
</section>
<div class="section-divider"></div>
<!-- ═══════════════ WHY ═══════════════ -->
<section class="why-section reveal" id="why">
<div class="why-inner">
<div class="why-content">
<span class="section-label">Why We Built This</span>
<h2>The audit process had a gap that nobody was solving honestly.</h2>
<p>Every accounting firm we spoke to described the same problem: hundreds of scanned invoices,
downloaded bank PDFs, and zero reliable way to get that data into Tally without manual entry — or
paying someone to do it all day.</p>
<p>We built SmartBooks to close that gap. Not with magic, but with a structured, transparent pipeline
that extracts, classifies, and formats financial data with precision. You retain full control. You
verify the output. We do the reading.</p>
<div class="why-stat-group">
<div class="why-stat">
<h3>3–4 hrs</h3>
<p>Avg. time saved per client file</p>
</div>
<div class="why-stat">
<h3>0 edits</h3>
<p>Manual entries needed after export</p>
</div>
</div>
</div>
<div class="why-card-stack">
<div class="why-card">
<div class="why-card-icon" style="background:rgba(99,102,241,0.12);">
<i class="fas fa-file-invoice" style="color:#818cf8;"></i>
</div>
<h4>Invoice Extraction</h4>
<p>Reads PDFs and scanned images. Extracts vendor names, GSTINs, tax breakdowns, invoice numbers,
and line items — then classifies them into Sales or Purchase registers automatically.</p>
</div>
<div class="why-card">
<div class="why-card-icon" style="background:rgba(6,182,212,0.1);">
<i class="fas fa-building-columns" style="color:#22d3ee;"></i>
</div>
<h4>Bank Statement Processing</h4>
<p>Converts bank PDFs into structured debit/credit/balance rows. We fully support password-protected
statements with a <b>strict privacy-first architecture</b>: your passwords are never saved on
our servers, and your financial privacy is our absolute priority.</p>
</div>
<div class="why-card">
<div class="why-card-icon" style="background:rgba(16,185,129,0.1);">
<i class="fas fa-circle-check" style="color:#34d399;"></i>
</div>
<h4>Tally Report Generation</h4>
<p>Produces an import-ready Excel or XML report mapped to Tally's sales and purchase registers. No
reformatting. No column juggling. Download and import directly.</p>
</div>
</div>
</div>
</section>
<div class="section-divider"></div>
<!-- ═══════════════ WHO IT'S FOR ═══════════════ -->
<section class="users-section reveal" id="users">
<div class="section-header">
<span class="section-label">Who Benefits</span>
<h2>Built for professionals dealing with real document volume.</h2>
<p>If your work involves processing financial documents at scale and reconciling them for regulatory or
internal reporting, SmartBooks was designed for you.</p>
</div>
<div class="user-grid">
<div class="user-card">
<div class="user-avatar" style="background:rgba(99,102,241,0.12);">
<i class="fas fa-user-tie" style="color:#818cf8;"></i>
</div>
<h3>Chartered Accountants</h3>
<p>You handle multiple client files every month. Invoice extraction across dozens of PDFs is a
productivity killer. SmartBooks handles document-level extraction per client folder so you review,
not transcribe.</p>
</div>
<div class="user-card">
<div class="user-avatar" style="background:rgba(6,182,212,0.1);">
<i class="fas fa-building" style="color:#22d3ee;"></i>
</div>
<h3>Audit Firms</h3>
<p>Your junior staff shouldn't spend time manually typing vendor amounts. Set up SmartBooks on a shared
Drive folder, trigger the automation cycle, and route structured output to your Tally operators.</p>
</div>
<div class="user-card">
<div class="user-avatar" style="background:rgba(245,158,11,0.1);">
<i class="fas fa-chart-pie" style="color:#fbbf24;"></i>
</div>
<h3>Finance Controllers</h3>
<p>You need clean, classified data before month-close. SmartBooks can watch your accounts payable folder
and auto-process incoming invoices continuously — so you're never catching up at month-end.</p>
</div>
</div>
</section>
<div class="section-divider"></div>
<!-- ═══════════════ HOW IT WORKS ═══════════════ -->
<section class="how-section reveal" id="how">
<div class="section-header" style="max-width:700px;">
<span class="section-label">Functionality</span>
<h2>Transparent by design. Here is exactly how your data moves.</h2>
<p>We believe professional tools should show their work. Below is the explicit step-by-step process — no
abstractions, no vague descriptions.</p>
</div>
<div class="how-timeline">
<div class="how-step">
<div class="how-step-left">
<div class="step-dot"></div>
</div>
<div class="how-step-body">
<span class="step-phase">Phase 01</span>
<h3>Connect Google Drive — Manually Select Your Folder</h3>
<p>Open the dashboard and authorize your Google Drive account. You are then shown a folder picker
where you <strong>manually select the specific folder</strong> that contains your invoices, bank
statements, or both. SmartBooks does not scan your entire Drive — it only accesses the path you
explicitly authorize. This is non-negotiable for compliance reasons.</p>
<div class="how-note">
<i class="fas fa-shield-halved"></i>
<span>We do not store Drive credentials. Folder selection is scoped per-session and re-confirmed
each run.</span>
</div>
</div>
</div>
<div class="how-step">
<div class="how-step-left">
<div class="step-dot"></div>
</div>
<div class="how-step-body">
<span class="step-phase">Phase 02</span>
<h3>Document Identification & Structural Extraction</h3>
<p>Each file is passed through a document classifier that identifies whether it is a Sales Invoice,
Purchase Invoice, or Bank Statement. For invoices, a structural parser locates GSTIN fields,
vendor/customer name blocks, tax breakdowns (CGST/SGST/IGST), and invoice totals — even in
scanned images with uneven formatting. For bank statements, we normalize every transaction row
into a standard Debit / Credit / Balance / Description format.</p>
<div class="how-note">
<i class="fas fa-circle-info"></i>
<span>Fields with low confidence are flagged in the output so you can quickly review only those
entries — not the entire file.</span>
</div>
</div>
</div>
<div class="how-step">
<div class="how-step-left">
<div class="step-dot"></div>
</div>
<div class="how-step-body">
<span class="step-phase">Phase 03</span>
<h3>Start the Automation Cycle from Drive</h3>
<p>Once your folder is mapped, you initiate the <strong>Automation Loop</strong> from the dashboard.
You choose your polling interval — every 5 minutes, every 30 minutes, or hourly. The background
agent monitors the source folder for new file arrivals, processes them, and deposits the
structured output directly into the Output folder you specify on your Drive. You do not need to
keep the app open for this to run.</p>
<div class="how-note">
<i class="fas fa-rotate"></i>
<span>Only new, unprocessed files are picked up each cycle. Already-processed files are tracked
to avoid duplication.</span>
</div>
</div>
</div>
<div class="how-step">
<div class="how-step-left">
<div class="step-dot"></div>
</div>
<div class="how-step-body">
<span class="step-phase">Phase 04</span>
<h3>Verify & Export Tally-Ready Report</h3>
<p>After each cycle, the extraction dashboard updates with a per-file review panel. Approve or
correct flagged rows. Once satisfied, click Export — and receive an Excel or XML file perfectly
formatted for Tally's Sales Register, Purchase Register or Ledger import. The file is also
auto-saved to your Drive output folder.</p>
<div class="how-note">
<i class="fas fa-circle-check"></i>
<span>The exported report maps directly to Tally voucher fields. No column renaming, no
reformatting needed before import.</span>
</div>
</div>
</div>
</div>
<!-- ── Dedicated Bank Flow ── -->
<div class="bank-flow-wrap" id="bank-pipeline" style="margin-top: 8rem; scroll-margin-top: 100px;">
<div class="section-header" style="max-width:700px; margin-bottom: 4rem; text-align: left; margin-left: 0;">
<span class="section-label">Bank Pipeline</span>
<h2>Detailed: How Bank Statements Work</h2>
<p>Processing bank statements requires a specialized security layer. Here is our dedicated 4-step
pipeline for handling your financial records.</p>
</div>
<div class="bank-steps-grid"
style="display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem;">
<!-- Step 1 -->
<div class="bank-step-card"
style="background: var(--bg-2); border: 1px solid var(--stroke); border-radius: 20px; padding: 2.5rem; position: relative; overflow: hidden; transition: transform 0.3s;"
onmouseover="this.style.transform='translateY(-5px)'"
onmouseout="this.style.transform='translateY(0)'">
<div
style="font-size: 0.72rem; font-weight: 700; color: var(--brand); letter-spacing: 0.12em; margin-bottom: 1.25rem; text-transform: uppercase;">
Step 01: Detect</div>
<h4 style="font-size: 1.15rem; margin-bottom: 0.85rem; color: var(--text-1);">Automatic Detection
</h4>
<p style="font-size: 0.925rem; color: var(--text-2); line-height: 1.7;">SmartBooks deep-scans your
PDF to check for password protection markers before any data extraction begins.</p>
<i class="fas fa-search"
style="position: absolute; bottom: -15px; right: -15px; font-size: 5rem; color: var(--text-1); opacity: 0.04;"></i>
</div>
<!-- Step 2 -->
<div class="bank-step-card"
style="background: var(--bg-2); border: 1px solid var(--stroke); border-radius: 20px; padding: 2.5rem; position: relative; overflow: hidden; transition: transform 0.3s;"
onmouseover="this.style.transform='translateY(-5px)'"
onmouseout="this.style.transform='translateY(0)'">
<div
style="font-size: 0.72rem; font-weight: 700; color: var(--brand); letter-spacing: 0.12em; margin-bottom: 1.25rem; text-transform: uppercase;">
Step 02: Unlock</div>
<h4 style="font-size: 1.15rem; margin-bottom: 0.85rem; color: var(--text-1);">Manual Entry</h4>
<p style="font-size: 0.925rem; color: var(--text-2); line-height: 1.7;">If protected, you enter the
password manually. <b>We never save your passwords</b>; they exist only for the duration of the
unlock.</p>
<i class="fas fa-key"
style="position: absolute; bottom: -15px; right: -15px; font-size: 5rem; color: var(--text-1); opacity: 0.04;"></i>
</div>
<!-- Step 3 -->
<div class="bank-step-card"
style="background: var(--bg-2); border: 1px solid var(--stroke); border-radius: 20px; padding: 2.5rem; position: relative; overflow: hidden; transition: transform 0.3s;"
onmouseover="this.style.transform='translateY(-5px)'"
onmouseout="this.style.transform='translateY(0)'">
<div
style="font-size: 0.72rem; font-weight: 700; color: var(--brand); letter-spacing: 0.12em; margin-bottom: 1.25rem; text-transform: uppercase;">
Step 03: Extract</div>
<h4 style="font-size: 1.15rem; margin-bottom: 0.85rem; color: var(--text-1);">In-Memory Extraction
</h4>
<p style="font-size: 0.925rem; color: var(--text-2); line-height: 1.7;">Once unlocked, the PDF
content is read into RAM, processed into structured rows, and instantly wiped from memory.</p>
<i class="fas fa-microchip"
style="position: absolute; bottom: -15px; right: -15px; font-size: 5rem; color: var(--text-1); opacity: 0.04;"></i>
</div>
<!-- Step 4 -->
<div class="bank-step-card"
style="background: var(--bg-2); border: 1px solid var(--stroke); border-radius: 20px; padding: 2.5rem; position: relative; overflow: hidden; transition: transform 0.3s;"
onmouseover="this.style.transform='translateY(-5px)'"
onmouseout="this.style.transform='translateY(0)'">
<div
style="font-size: 0.72rem; font-weight: 700; color: var(--brand); letter-spacing: 0.12em; margin-bottom: 1.25rem; text-transform: uppercase;">
Step 04: Result</div>
<h4 style="font-size: 1.15rem; margin-bottom: 0.85rem; color: var(--text-1);">Tally-Ready Sheets
</h4>
<p style="font-size: 0.925rem; color: var(--text-2); line-height: 1.7;">Your bank transactions are
normalized into a clean Excel/Tally format, saved directly back to your Output folder.</p>
<i class="fas fa-file-excel"
style="position: absolute; bottom: -15px; right: -15px; font-size: 5rem; color: var(--text-1); opacity: 0.04;"></i>
</div>
</div>
</div>
</section>
<div class="section-divider"></div>
<!-- ═══════════════ RESULT / IMAGE ═══════════════ -->
<section class="result-section reveal" id="result">
<div class="section-header" style="max-width:700px;">
<span class="section-label">The Output</span>
<h2>What a completed audit cycle looks like.</h2>
<p>Below is the Tally report generated at the end of an automation cycle — structured, reviewed, and ready
for one-click import.</p>
</div>
<div class="result-image-wrap">
<div class="image-toolbar">
<div class="toolbar-dot" style="background:#ef4444;"></div>
<div class="toolbar-dot" style="background:#f59e0b;"></div>
<div class="toolbar-dot" style="background:#10b981;"></div>
<span style="margin-left:12px; font-size:0.78rem; color:var(--text-3);">SmartBooks — Tally Export
Dashboard</span>
</div>
<div class="image-placeholder-inner">
<i class="fas fa-image"></i>
<div class="img-label">Place your Tally Report Screenshot here</div>
<p style="font-size:0.8rem; opacity:0.5;">(Replace this block with an <img> tag tomorrow)</p>
</div>
</div>
</section>
<!-- ═══════════════ BEFORE / AFTER ═══════════════ -->
<section class="compare-section reveal">
<div class="section-header">
<span class="section-label">The Real Difference</span>
<h2>Before SmartBooks. After SmartBooks.</h2>
<p>This is what changes when you stop doing it manually.</p>
</div>
<div class="compare-grid">
<div class="compare-card before-card">
<div class="compare-tag"><i class="fas fa-times-circle"></i> Without SmartBooks</div>
<ul>
<li><i class="fas fa-times"></i> Manually typing invoice data into Excel every day</li>
<li><i class="fas fa-times"></i> Scrolling through 10-20page bank PDFs to match entries</li>
<li><i class="fas fa-times"></i> Wrong GSTIN copied = GST filing error</li>
<li><i class="fas fa-times"></i> Junior staff spending 6 hrs/day on data entry</li>
<li><i class="fas fa-times"></i> Month-end chaos — all backlog piles up at once</li>
<li><i class="fas fa-times"></i> Tally import fails due to formatting mismatches</li>
</ul>
</div>
<div class="compare-card after-card">
<div class="compare-tag"><i class="fas fa-check-circle"></i> With SmartBooks</div>
<ul>
<li><i class="fas fa-check"></i> Files in Drive are read and extracted automatically</li>
<li><i class="fas fa-check"></i> Bank statements normalized and reconciled in seconds</li>
<li><i class="fas fa-check"></i> GSTINs extracted and validated field-by-field</li>
<li><i class="fas fa-check"></i> Staff focus on review, not repetitive input</li>
<li><i class="fas fa-check"></i> Continuous cycle runs — zero month-end backlog</li>
<li><i class="fas fa-check"></i> Export mapped directly to Tally register fields</li>
</ul>
</div>
</div>
</section>
<div class="section-divider"></div>
<!-- ═══════════════ WHAT WE SUPPORT ═══════════════ -->
<section class="support-section reveal">
<div class="section-header">
<span class="section-label">Compatibility</span>
<h2>What files can SmartBooks read?</h2>
<p>We are honest about what we support. These are the document types our extraction pipeline currently
handles reliably.</p>
</div>
<div class="support-grid">
<div class="support-card">
<div class="support-icon"><i class="fas fa-file-invoice"></i></div>
<h4>Invoice Documents</h4>
<ul>
<li>PDF invoices — digital or printed-to-PDF</li>
<li>Scanned invoices saved as image files</li>
<li>GST-format invoices with GSTIN fields</li>
<li>Multi-page documents (extraction per page)</li>
</ul>
</div>
<div class="support-card">
<div class="support-icon"><i class="fas fa-building-columns"></i></div>
<h4>Bank Statements</h4>
<ul>
<li>Standard Indian bank statement PDFs</li>
<li>Tabular statement layouts</li>
<li>Debit, credit, balance extraction</li>
<li>Date and description normalization</li>
</ul>
<a href="#" onclick="openModal('bankModal'); return false;"
style="display:inline-block; margin-top:1.25rem; font-size:0.8rem; color:var(--brand); text-decoration:none; font-weight:600; border-bottom:1px solid transparent; transition:0.2s;"
onmouseover="this.style.borderBottomColor='var(--brand)'"
onmouseout="this.style.borderBottomColor='transparent'">
<i class="fas fa-shield-halved" style="margin-right:5px;"></i> Security & Locked Files →
</a>
</div>
<div class="support-card">
<div class="support-icon"><i class="fas fa-file-excel"></i></div>
<h4>Output Format</h4>
<ul>
<li>Excel (.xlsx) structured for Tally import</li>
<li>Sales Register column layout</li>
<li>Purchase Register column layout</li>
<li>Bank ledger normalized format</li>
</ul>
</div>
</div>
</section>
<div class="section-divider"></div>
<!-- ═══════════════ FAQ ═══════════════ -->
<section class="faq-section reveal">
<div class="section-header">
<span class="section-label">Common Questions</span>
<h2>Things people ask before they start.</h2>
</div>
<div class="faq-list">
<div class="faq-item">
<button class="faq-q" onclick="toggleFaq(this)">
<span>Does SmartBooks access all my Google Drive files?</span>
<i class="fas fa-chevron-down"></i>
</button>
<div class="faq-a">
<p>No. SmartBooks operates on a strict "Permission-First" model. You manually select the specific
folder you want processed. We only read files inside that path — nothing else in your Drive is
accessible to us. You can revoke access at any time from your Google account settings.</p>
</div>
</div>
<div class="faq-item">
<button class="faq-q" onclick="toggleFaq(this)">
<span>What happens if the extraction is wrong for some fields?</span>
<i class="fas fa-chevron-down"></i>
</button>
<div class="faq-a">
<p>Our system flags any field where it has low confidence in the extracted value. These are
highlighted in the review dashboard so you can correct just those entries before exporting. You
do not need to re-check the entire file — only the flagged rows.</p>
</div>
</div>
<div class="faq-item">
<button class="faq-q" onclick="toggleFaq(this)">
<span>Do I need to keep the app open for automation to run?</span>
<i class="fas fa-chevron-down"></i>
</button>
<div class="faq-a">
<p>No. Once you start the Automation Cycle, a background agent monitors your folder on the server
side. You can close the browser and the agent will continue running, processing new files and
saving output to your Drive according to the interval you set.</p>
</div>
</div>
<div class="faq-item">
<button class="faq-q" onclick="toggleFaq(this)">
<span>Is the Tally export ready to import without changes?</span>
<i class="fas fa-chevron-down"></i>
</button>
<div class="faq-a">
<p>Yes — the exported file maps directly to Tally's register field structure. Column names, date
formats, and amount fields are pre-configured for Tally ERP 9 and Tally Prime. You do not need
to rename columns or reformat data before importing.</p>
</div>
</div>
<div class="faq-item">
<button class="faq-q" onclick="toggleFaq(this)">
<span>Is my financial data stored on your servers?</span>
<i class="fas fa-chevron-down"></i>
</button>
<div class="faq-a">
<p>No. We do not retain copies of your documents. Files are read from your Drive, processed through
the extraction pipeline, and the structured output is returned directly to your Drive. The only
data we retain are minimal operational logs (file count, processing time) which are deleted
after 30 days.</p>
</div>
</div>
<div class="faq-item">
<button class="faq-q" onclick="toggleFaq(this)">
<span>How does SmartBooks handle password-protected bank statements?</span>
<i class="fas fa-chevron-down"></i>
</button>
<div class="faq-a">
<p>SmartBooks is built to respect bank security. If a file is locked, you can manually enter the
password in the review dashboard to unlock it for that session. For automated cycles, the system
will flag the file as "Locked" and skip it until a password is provided. <b>We never store these
passwords on our server</b>; they are processed in volatile memory for the extraction cycle
only.</p>
</div>
</div>
<div class="faq-item">
<button class="faq-q" onclick="toggleFaq(this)">
<span>Do I need to upload invoices and bank statements separately?</span>
<i class="fas fa-chevron-down"></i>
</button>
<div class="faq-a">
<p>No. Your only job is to provide the data. Our system uses an intelligent document classifier that
automatically detects whether a file is an Invoice (Sales/Purchase) or a Bank Statement. You can
keep everything in a single folder, and SmartBooks will route them to the correct processing
pipeline automatically.</p>
</div>
</div>
<div class="faq-item">
<button class="faq-q" onclick="toggleFaq(this)">
<span>Can I manually upload files instead of using Google Drive?</span>
<i class="fas fa-chevron-down"></i>
</button>
<div class="faq-a">
<p>Yes. While our Google Drive automation is designed for high-volume hands-free work, you can
always use the "Manual Upload" feature in the dashboard. This allows you to drag and drop files
directly from your computer for instant one-off processing.</p>
</div>
</div>
</div>
</div>
</section>
<!-- ═══════════════ FOOTER ═══════════════ -->
<footer>
<div class="footer-top">
<!-- Left: Brand -->
<div class="footer-brand">
<div class="logo" style="margin-bottom:1.25rem;">
<div class="logo-icon"><i class="fas fa-bolt" style="color:#fff;font-size:0.8rem;"></i></div>
SmartBooks
</div>
<p class="footer-tagline">A precision audit automation utility for accounting professionals. Built to be
transparent, accurate, and production-ready.</p>
<a href="index.html" class="btn-google"
style="margin-top:1.5rem; display:inline-flex; padding:0.55rem 1rem; font-size:0.825rem;">
<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" style="width:15px;height:15px;">
<path fill="#4285F4"
d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v8.51h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.14z" />
<path fill="#34A853"
d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z" />
<path fill="#FBBC05"
d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z" />
<path fill="#EA4335"
d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z" />
</svg>
Sign in with Google
</a>
</div>
<!-- Mid: Navigation -->
<div class="footer-col">
<h5>Navigate</h5>
<ul>
<li><a href="#why">Why We Built This</a></li>
<li><a href="#users">Who It's For</a></li>
<li><a href="#how">How It Works</a></li>
<li><a href="#result">The Output</a></li>
<li><a href="index.html">Dashboard</a></li>
</ul>
</div>
<!-- Right: Legal -->
<div class="footer-col">
<h5>Legal</h5>
<ul>
<li><a href="#" onclick="openModal('privacyModal'); return false;">Privacy Policy</a></li>
<li><a href="#" onclick="openModal('termsModal'); return false;">Terms of Use</a></li>
<li><a href="https://policies.google.com/privacy" target="_blank">Google Data Policy</a></li>
</ul>
</div>
</div>
<!-- Bottom bar -->
<div class="footer-bottom">
<p>© 2026 SmartBooks Audit Lab. All rights reserved. Not affiliated with Tally Solutions or Google LLC.
</p>
<div class="footer-socials">
<a href="#" title="GitHub"><i class="fab fa-github"></i></a>
<a href="#" title="LinkedIn"><i class="fab fa-linkedin"></i></a>
<a href="#" title="Twitter"><i class="fab fa-twitter"></i></a>
</div>
</div>
</footer>
<!-- ═══════════════ BANK MODAL ═══════════════ -->
<div class="modal-overlay" id="bankModal" onclick="closeOnBackdrop(event, 'bankModal')">
<div class="modal-box" style="max-width:600px;">
<div class="modal-header">
<h3>Bank Statement Security</h3>
<button class="modal-close" onclick="closeModal('bankModal')">×</button>
</div>
<div class="modal-body">
<div class="security-badge"><i class="fas fa-lock"></i> End-to-End Encrypted</div>
<h4>Statement Processing Workflow</h4>
<p>SmartBooks uses a privacy-first approach to handle sensitive financial documents. Here is how we
manage protected statements:</p>
<div class="password-demo">
<span
style="font-size:0.75rem; color:var(--text-3); text-transform:uppercase; letter-spacing:0.05em; display:block; margin-bottom:8px;">Workflow
Showcase</span>
<div style="display:flex; flex-direction:column; gap:10px;">
<div
style="display:flex; align-items:center; gap:10px; font-size:0.85rem; color:var(--text-2);">
<i class="fas fa-search" style="color:var(--brand); width:15px;"></i>
<span><b>1. Detect:</b> We identify if the PDF is password-locked.</span>
</div>
<div
style="display:flex; align-items:center; gap:10px; font-size:0.85rem; color:var(--text-2);">
<i class="fas fa-keyboard" style="color:var(--brand); width:15px;"></i>
<span><b>2. Enter:</b> You enter the password manually in your dashboard.</span>
</div>
<div
style="display:flex; align-items:center; gap:10px; font-size:0.85rem; color:var(--text-2);">
<i class="fas fa-shield-slash" style="color:var(--green); width:15px;"></i>
<span><b>3. Process:</b> Unlocked in RAM (never saved to server).</span>
</div>
<div
style="display:flex; align-items:center; gap:10px; font-size:0.85rem; color:var(--text-2);">
<i class="fas fa-file-excel" style="color:var(--green); width:15px;"></i>
<span><b>4. Result:</b> Ready-to-use Sheet/Tally format generated.</span>
</div>
</div>
</div>
<h4>Security & Trust Commitment</h4>
<ul style="margin-top:0.5rem;">
<li><strong>Zero Password Logging:</strong> We never save your passwords in our database or logs.
They exist only for the duration of the unlocking session.</li>
<li><strong>Volatile Memory Extraction:</strong> Decryption happens strictly in volatile memory and
is wiped immediately after processing.</li>
<li><strong>Direct to Sheet:</strong> The unlocked data is converted into a structured Excel format
and returned directly to your Drive.</li>
</ul>
<h4>Automation Logic</h4>
<p>When running in <strong>Automation Mode</strong>, if the system encounters a locked file:</p>
<ol style="padding-left:1.5rem; color:var(--text-2); font-size:0.9rem;">
<li style="margin-bottom:0.5rem;">The file is flagged as <code>LOCKED / PENDING PASSWORD</code> in
your dashboard.</li>
<li>The automation agent skips the file temporarily to prevent pipeline stalls.</li>
<li>Once you provide the password manually, the system processes it and marks it as complete.</li>
</ol>
</div>
<div class="modal-footer-bar">
<button onclick="closeModal('bankModal')" class="btn-nav" style="cursor:pointer; border:none;">Got
it</button>
</div>
</div>
</div>
<!-- ═══════════════ PRIVACY MODAL ═══════════════ -->
<div class="modal-overlay" id="privacyModal" onclick="closeOnBackdrop(event, 'privacyModal')">
<div class="modal-box">
<div class="modal-header">
<h3>Privacy Policy</h3>
<button class="modal-close" onclick="closeModal('privacyModal')">×</button>
</div>
<div class="modal-body">
<p><em>Last updated: April 2026</em></p>
<h4>1. What We Are</h4>
<p>SmartBooks is a document processing utility that assists accounting professionals in extracting,
classifying, and exporting structured data from invoices and bank statements. We are not a financial
institution and do not provide financial advice.</p>
<h4>2. Information We Access</h4>
<p>SmartBooks requests access to specific Google Drive folders that <strong>you explicitly
select</strong>. We do not scan your entire Drive. The scope of access is limited to:</p>
<ul>
<li>Reading files you authorize in the selected folder(s)</li>
<li>Writing processed output files to the output folder you specify</li>
</ul>
<p>We do not access your contacts, emails, calendar, or any Google account data beyond the Drive folders
you authorize.</p>
<h4>3. Data Processing</h4>
<p>Document content (text extracted from invoices and bank statements) is processed locally or via our
secure extraction pipeline. We do not sell, share, or transmit your financial document content to
third parties. Extracted data is used solely to produce the structured report you request.</p>
<h4>4. Data Retention</h4>
<p>We do not store copies of your documents on our servers. Processing is ephemeral — files are read,
extracted, and the output is returned to your Drive. We retain only minimal operational logs (file
count, processing time) for debugging purposes, which are automatically deleted after 30 days.</p>
<h4>5. Authentication</h4>
<p>Authentication is handled exclusively through Google OAuth 2.0. We do not store your Google password
or any long-lived credentials. Access tokens are session-scoped and discarded after each use.</p>
<h4>6. Your Rights</h4>
<p>You may revoke SmartBooks' access to your Google Drive at any time via your <a
href="https://myaccount.google.com/permissions" style="color:var(--brand);">Google Account
Permissions</a> page. Revoking access immediately stops all future processing.</p>
<h4>7. Contact</h4>
<p>For any privacy-related questions, contact us at the email address listed in your dashboard account
settings.</p>
</div>
<div class="modal-footer-bar">
<button onclick="closeModal('privacyModal')" class="btn-nav"
style="cursor:pointer; border:none;">Close</button>
</div>
</div>
</div>
<!-- ═══════════════ TERMS MODAL ═══════════════ -->
<div class="modal-overlay" id="termsModal" onclick="closeOnBackdrop(event, 'termsModal')">
<div class="modal-box">
<div class="modal-header">
<h3>Terms of Use</h3>
<button class="modal-close" onclick="closeModal('termsModal')">×</button>
</div>
<div class="modal-body">
<p><em>Last updated: April 2026</em></p>
<h4>1. Acceptance of Terms</h4>
<p>By accessing or using SmartBooks, you agree to be bound by these Terms of Use. If you do not agree,
you may not use the platform.</p>
<h4>2. Permitted Use</h4>
<p>SmartBooks is designed for legitimate accounting, auditing, and financial data management purposes.
You may use SmartBooks to:</p>
<ul>
<li>Process your own business invoices and bank statements</li>
<li>Process client documents for which you are the authorized accountant or auditor</li>
<li>Generate Tally-compatible export reports for import into your own ERP system</li>
</ul>
<h4>3. Prohibited Use</h4>
<p>You may not use SmartBooks to process documents without explicit authorization from the document
owner. You may not reverse-engineer, resell, or sublicense any part of this platform. You may not
upload documents containing fabricated or fraudulent financial data.</p>
<h4>4. Accuracy Disclaimer</h4>
<p>SmartBooks uses automated extraction logic that achieves high accuracy under normal conditions.
However, extracted data should be reviewed before import into accounting systems. SmartBooks is a
tool, not an auditor. Final responsibility for the accuracy of submitted financial records rests
with the user.</p>
<h4>5. Google Drive Integration</h4>
<p>SmartBooks integrates with Google Drive via Google's OAuth 2.0 API. Your use of this integration is
also subject to <a href="https://policies.google.com/terms" target="_blank"
style="color:var(--brand);">Google's Terms of Service</a>. SmartBooks is not affiliated with or
endorsed by Google LLC.</p>
<h4>6. Limitation of Liability</h4>
<p>SmartBooks is provided "as is" without warranties of any kind. We are not liable for any financial
loss, regulatory penalty, or data inaccuracy arising from use of this tool. Maximum liability is
limited to the amount paid for the service in the last 12 months.</p>
<h4>7. Changes to Terms</h4>
<p>We reserve the right to update these terms with reasonable notice. Continued use of SmartBooks after
changes are posted constitutes acceptance of the revised terms.</p>
</div>
<div class="modal-footer-bar">
<button onclick="closeModal('termsModal')" class="btn-nav" style="cursor:pointer; border:none;">I
Understand</button>
</div>
</div>
</div>
<!-- ═══════════════ STICKY BOTTOM CTA BAR ═══════════════ -->
<div class="sticky-cta" id="stickyCta">
<span class="sticky-cta-label">Ready to automate your audit workflow?</span>
<a href="index.html" class="btn-google" style="padding:0.6rem 1.25rem; font-size:0.875rem;">
<!-- Google G SVG -->
<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" style="width:16px;height:16px;">
<path fill="#4285F4"
d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v8.51h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.14z" />
<path fill="#34A853"
d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z" />
<path fill="#FBBC05"
d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z" />
<path fill="#EA4335"
d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z" />
</svg>
Sign in with Google
</a>
<div class="sticky-divider"></div>
<a href="index.html" class="btn-already">Already have an account? →</a>
</div>
<script>
// ── Active nav highlight on scroll
const sections = document.querySelectorAll('section[id]');
const navLinks = document.querySelectorAll('.nav-links a');
const stickyCta = document.getElementById('stickyCta');
const heroHeight = document.querySelector('.hero').offsetHeight;
window.addEventListener('scroll', () => {
const scrollY = window.scrollY;
let current = '';
sections.forEach(s => {
if (scrollY >= s.offsetTop - 120) current = s.id;
});
navLinks.forEach(a => {
a.style.color = a.getAttribute('href') === `#${current}` ? '#f1f5f9' : '';
});
if (scrollY > heroHeight * 0.6) {
stickyCta.classList.add('visible');
} else {
stickyCta.classList.remove('visible');
}
});
// ── Scroll Reveal Observer
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -50px 0px'
};
const revealObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('active');
revealObserver.unobserve(entry.target);
}
});
}, observerOptions);
document.querySelectorAll('.reveal').forEach(el => revealObserver.observe(el));
// ── Modal helpers
function openModal(id) {
document.getElementById(id).classList.add('open');
document.body.style.overflow = 'hidden';
}
function closeModal(id) {
document.getElementById(id).classList.remove('open');
document.body.style.overflow = '';
}
function closeOnBackdrop(e, id) {
if (e.target === document.getElementById(id)) closeModal(id);
}
document.addEventListener('keydown', e => {
if (e.key === 'Escape') {
['privacyModal', 'termsModal', 'bankModal'].forEach(closeModal);
}
});
// ── FAQ accordion
function toggleFaq(btn) {
const answer = btn.nextElementSibling;
const isOpen = btn.classList.contains('open');
// Close all
document.querySelectorAll('.faq-q').forEach(b => b.classList.remove('open'));
document.querySelectorAll('.faq-a').forEach(a => a.classList.remove('open'));
// Open clicked if it was closed
if (!isOpen) {
btn.classList.add('open');
answer.classList.add('open');
}
}
</script>
</body>
</html>landing_1.html / Latest Version (Neutral Slate)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SmartBooks — Audit Automation for Accounting Professionals</title>
<meta name="description"
content="SmartBooks automates invoice extraction, bank statement classification and Tally ERP reporting for CA firms, auditors and finance teams.">
<link
href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,300;0,14..32,400;0,14..32,500;0,14..32,600;0,14..32,700;1,14..32,300&family=Outfit:wght@600;700;800&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<style>
:root {
/* Premium Neutral Palette */
--brand: #4f46e5;
--brand-dim: rgba(79, 70, 229, 0.08);
--brand-glow: rgba(79, 70, 229, 0.12);
--green: #059669;
--yellow: #ca8a04;
/* Backgrounds: Elevated Slate Grey theme */
--bg-0: #f1f5f9; /* Soft Slate background */
--bg-1: #ffffff; /* Pure white cards */
--bg-2: #f8fafc; /* Content light */
--bg-3: #e2e8f0; /* Borders/Separators */
--glass: rgba(241, 245, 249, 0.85);
--stroke: rgba(15, 23, 42, 0.06);
--stroke-hover: rgba(79, 70, 229, 0.2);
--text-1: #0f172a; /* Deep Slate */
--text-2: #334155; /* Slate Body */
--text-3: #4b5563; /* Darker grey for better visibility */
}
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 16px;
scroll-behavior: smooth;
}
body {
font-family: 'Inter', system-ui, sans-serif;
background: var(--bg-0);
color: var(--text-1);
line-height: 1.75;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
h1,
h2,
h3,
h4 {
font-family: 'Outfit', sans-serif;
letter-spacing: -0.025em;
}
/* ─── Global canvas effect ─── */
body::before {
content: '';
position: fixed;
inset: 0;
background:
radial-gradient(circle at 100% 0%, rgba(79, 70, 229, 0.05) 0%, transparent 40%),
radial-gradient(circle at 0% 100%, rgba(6, 182, 212, 0.04) 0%, transparent 40%),
var(--bg-0);
pointer-events: none;
z-index: -2;
}
/* Technical Grid Overlay */
body::after {
content: '';
position: fixed;
inset: 0;
background-image:
linear-gradient(var(--stroke) 1px, transparent 1px),
linear-gradient(90deg, var(--stroke) 1px, transparent 1px);
background-size: 40px 40px;
mask-image: radial-gradient(circle at 50% 50%, black, transparent 80%);
opacity: 0.4;
pointer-events: none;
z-index: -1;
}
/* ─── NAV ─── */
nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 999;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 7%;
height: 72px;
background: rgba(241, 245, 249, 0.85);
backdrop-filter: blur(24px) saturate(160%);
}
.logo {
display: flex;
align-items: center;
gap: 9px;
font-family: 'Outfit', sans-serif;
font-size: 1.25rem;
font-weight: 800;
color: var(--text-1);
text-decoration: none;
letter-spacing: -0.03em;
}
.logo-icon {
width: 30px;
height: 30px;
background: linear-gradient(135deg, #6366f1, #8b5cf6);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
}
.nav-links {
display: flex;
gap: 2.5rem;
list-style: none;
}
.nav-links a {
color: var(--text-2);
text-decoration: none;
font-size: 0.875rem;
font-weight: 500;
transition: color 0.2s;
}
.nav-links a:hover {
color: var(--text-1);
}
.btn-nav {
background: var(--brand);
color: #fff;
text-decoration: none;
padding: 0.55rem 1.25rem;
border-radius: 8px;
font-size: 0.875rem;
font-weight: 600;
transition: all 0.25s;
box-shadow: 0 0 0 0 var(--brand-glow);
}
.btn-nav:hover {
background: #4f46e5;
box-shadow: 0 0 0 4px var(--brand-glow);
}
/* ─── HERO ─── */
.hero {
position: relative;
z-index: 1;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 9rem 7% 6rem;
}
.hero-inner {
max-width: 860px;
}
.hero-pill {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--brand-dim);
color: var(--brand);
border: 1px solid rgba(99, 102, 241, 0.25);
padding: 5px 14px 5px 8px;
border-radius: 100px;
font-size: 0.78rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 2rem;
}
.hero-pill span {
background: var(--brand);
color: #fff;
border-radius: 100px;
padding: 2px 8px;
font-size: 0.7rem;
}
.hero h1 {
font-size: clamp(3rem, 6vw, 5.5rem);
line-height: 1.0;
font-weight: 800;
color: var(--text-1);
margin-bottom: 1.75rem;
}
.hero h1 em {
font-style: normal;
background: linear-gradient(135deg, #4f46e5 0%, #a855f7 50%, #4f46e5 100%);
background-size: 200% auto;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: textShimmer 4s linear infinite;
}
@keyframes textShimmer {
to { background-position: 200% center; }
}
.hero-sub {
font-size: 1.2rem;
color: var(--text-2);
max-width: 680px;
margin: 0 auto 3rem;
font-weight: 400;
line-height: 1.8;
}
.hero-actions {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
.btn-hero-primary {
background: linear-gradient(135deg, #4f46e5, #7c3aed);
color: #fff;
text-decoration: none;
padding: 1rem 2.5rem;
border-radius: 12px;
font-size: 1rem;
font-weight: 700;
transition: all 0.3s;
box-shadow: 0 10px 30px -8px rgba(79, 70, 229, 0.4);
animation: pulseBtn 3s infinite;
}
@keyframes pulseBtn {
0% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.4); }
70% { box-shadow: 0 0 0 20px rgba(79, 70, 229, 0); }
100% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0); }
}
.btn-hero-primary:hover {
transform: translateY(-2px);
box-shadow: 0 16px 40px -8px rgba(99, 102, 241, 0.6);
}
.btn-hero-ghost {
background: transparent;
color: var(--text-2);
text-decoration: none;
padding: 0.9rem 2.2rem;
border-radius: 10px;
font-size: 1rem;
font-weight: 600;
border: 1px solid var(--stroke);
transition: all 0.3s;
}
.btn-hero-ghost:hover {
border-color: var(--stroke-hover);
color: var(--text-1);
}
/* ─── DIVIDER ─── */
.section-divider {
width: 100%;
height: 1px;
background: linear-gradient(90deg, transparent, var(--stroke), transparent);
}
/* ─── WHY WE BUILT THIS ─── */
.why-section {
position: relative;
z-index: 1;
padding: 8rem 7%;
background: var(--bg-1);
}
.why-inner {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: 6rem;
align-items: center;
}
.section-label {
font-size: 0.72rem;
font-weight: 700;
color: var(--brand);
text-transform: uppercase;
letter-spacing: 0.12em;
margin-bottom: 1rem;
display: block;
}
.why-content h2 {
font-size: clamp(2rem, 3.5vw, 3rem);
line-height: 1.15;
margin-bottom: 1.75rem;
}
.why-content p {
color: var(--text-2);
font-size: 1.05rem;
margin-bottom: 1.5rem;
line-height: 1.85;
}
.why-stat-group {
display: flex;
gap: 2.5rem;
margin-top: 2.5rem;
}
.why-stat h3 {
font-size: 2rem;
font-weight: 700;
color: var(--text-1);
}
.why-stat p {
font-size: 0.85rem;
color: var(--text-3);
margin-top: 2px;
}
.why-card-stack {
display: flex;
flex-direction: column;
gap: 1rem;
}
.why-card {
background: var(--bg-1);
border: 1px solid var(--stroke);
border-radius: 24px;
padding: 2rem;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.why-card:hover {
background: #fff;
border-color: var(--stroke-hover);
transform: translateY(-8px);
box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.08);
}
.why-card-icon {
width: 40px;
height: 40px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
margin-bottom: 1rem;
}
.why-card h4 {
font-size: 1.05rem;
margin-bottom: 6px;
}
.why-card p {
font-size: 0.9rem;
color: var(--text-2);
line-height: 1.7;
}
/* ─── WHO IT'S FOR ─── */
.users-section {
position: relative;
z-index: 1;
padding: 8rem 7%;
}
.section-header {
text-align: center;
max-width: 600px;
margin: 0 auto 5rem;
}
.section-header h2 {
font-size: clamp(2rem, 3vw, 2.75rem);
margin-bottom: 1rem;
}
.section-header p {
color: var(--text-2);
font-size: 1.05rem;
}
.user-grid {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
.user-card {
background: linear-gradient(160deg, var(--bg-2), var(--bg-1));
border: 1px solid var(--stroke);
border-radius: 20px;
padding: 2.5rem;
transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.user-card:hover {
border-color: var(--stroke-hover);
transform: translateY(-6px);
box-shadow: 0 20px 50px -15px rgba(79, 70, 229, 0.12);
}
.user-avatar {
width: 52px;
height: 52px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.4rem;
margin-bottom: 1.5rem;
}
.user-card h3 {
font-size: 1.2rem;
margin-bottom: 0.75rem;
}
.user-card p {
color: var(--text-2);
font-size: 0.925rem;
line-height: 1.7;
}
/* ─── HOW IT WORKS ─── */
.how-section {
position: relative;
z-index: 1;
padding: 10rem 7%;
background: linear-gradient(to bottom, var(--bg-0), var(--bg-1), var(--bg-0));
}
.how-timeline {
max-width: 1000px;
margin: 5rem auto 0;
position: relative;
}
.how-timeline::before {
content: '';
position: absolute;
left: 50px;
top: 0;
bottom: 0;
width: 1px;
background: linear-gradient(to bottom, transparent, var(--stroke) 10%, var(--stroke) 90%, transparent);
}
.how-step {
display: flex;
gap: 3rem;
margin-bottom: 5rem;
position: relative;
}
.how-step-left {
width: 32px;
flex-shrink: 0;
margin-top: 6px;
}
.step-dot {
width: 20px;
height: 20px;
border-radius: 50%;
border: 2px solid var(--brand);
background: var(--bg-0);
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 2;
margin-left: 14px;
}
.step-dot::after {
content: '';
width: 8px;
height: 8px;
background: var(--brand);
border-radius: 50%;
}
.how-step-body {
background: var(--bg-2);
border: 1px solid var(--stroke);
border-radius: 20px;
padding: 2.5rem;
flex: 1;
transition: border-color 0.3s;
}
.how-step-body:hover {
border-color: var(--stroke-hover);
}
.step-phase {
font-size: 0.7rem;
font-weight: 700;
color: var(--brand);
text-transform: uppercase;
letter-spacing: 0.12em;
margin-bottom: 0.75rem;
display: block;
}
.how-step-body h3 {
font-size: 1.5rem;
margin-bottom: 1rem;
}
.how-step-body p {
color: var(--text-2);
font-size: 0.975rem;
line-height: 1.8;
}
.how-note {
margin-top: 1.5rem;
padding: 1rem 1.25rem;
background: var(--bg-3);
border-radius: 10px;
display: flex;
gap: 10px;
align-items: flex-start;
font-size: 0.875rem;
color: var(--text-2);
}
.how-note i {
color: var(--green);
margin-top: 3px;
flex-shrink: 0;
}
/* ─── RESULT (image placeholder) ─── */
.result-section {
position: relative;
z-index: 1;
padding: 8rem 7%;
text-align: center;
}
.result-image-wrap {
max-width: 1100px;
margin: 4rem auto 0;
border-radius: 24px;
overflow: hidden;
border: 1px solid var(--stroke);
box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.1);
background: #fff;
}
.image-toolbar {
background: var(--bg-2);
padding: 0.9rem 1.5rem;
display: flex;
align-items: center;
gap: 8px;
border-bottom: 1px solid var(--stroke);
}
.toolbar-dot {
width: 11px;
height: 11px;
border-radius: 50%;
}
.image-placeholder-inner {
height: 520px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: var(--text-3);
gap: 1rem;
background: repeating-linear-gradient(45deg,
var(--bg-1),
var(--bg-1) 10px,
var(--bg-2) 10px,
var(--bg-2) 20px);
}
.image-placeholder-inner i {
font-size: 3rem;
opacity: 0.25;
}
.image-placeholder-inner .img-label {
font-size: 0.78rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--text-3);
}
/* ─── MODALS ─── */
.modal-overlay {
position: fixed;
inset: 0;
z-index: 9999;
background: rgba(0, 0, 0, 0.75);
backdrop-filter: blur(8px);
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s;
}
.modal-overlay.open {
opacity: 1;
pointer-events: all;
}
.modal-box {
background: #fff;
border: 1px solid var(--stroke);
border-radius: 24px;
max-width: 720px;
width: 100%;
max-height: 85vh;
display: flex;
flex-direction: column;
transform: translateY(20px) scale(0.98);
transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.2);
}
.modal-overlay.open .modal-box {
transform: translateY(0) scale(1);
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.5rem 2rem;
border-bottom: 1px solid var(--stroke);
flex-shrink: 0;
}
.modal-header h3 {
font-size: 1.25rem;
font-weight: 700;
}
.modal-header .modal-close {
background: none;
border: none;
color: var(--text-3);
font-size: 1.3rem;
cursor: pointer;
line-height: 1;
transition: color 0.2s;
padding: 4px;
}
.modal-header .modal-close:hover {
color: var(--text-1);
}
.modal-body {
padding: 2rem;
overflow-y: auto;
color: var(--text-2);
font-size: 0.925rem;
line-height: 1.85;
}
.modal-body h4 {
font-size: 1rem;
color: var(--text-1);
margin: 1.75rem 0 0.5rem;
}
.modal-body h4:first-child {
margin-top: 0;
}
.modal-body p {
margin-bottom: 1rem;
}
.modal-body ul {
padding-left: 1.5rem;
margin-bottom: 1rem;
}
.modal-body ul li {
margin-bottom: 0.5rem;
}
.modal-footer-bar {
padding: 1.25rem 2rem;
border-top: 1px solid var(--stroke);
display: flex;
justify-content: flex-end;
flex-shrink: 0;
}
/* ─── GOOGLE BTN ─── */
.btn-google {
display: inline-flex;
align-items: center;
gap: 9px;
background: #fff;
color: #3c4043;
border: 1px solid #dadce0;
padding: 0.5rem 1rem;
border-radius: 8px;
font-size: 0.85rem;
font-weight: 600;
text-decoration: none;
transition: all 0.2s;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
white-space: nowrap;
}
.btn-google:hover {
background: #f8f9fa;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}
.btn-google svg {
width: 17px;
height: 17px;
flex-shrink: 0;
}
/* ─── BANK MODAL SPECIFIC ─── */
.password-demo {
background: var(--bg-3);
border: 1px solid var(--stroke);
border-radius: 12px;
padding: 1.5rem;
margin: 1.5rem 0;
}
.password-input-wrap {
position: relative;
display: flex;
align-items: center;
}
.password-input-wrap input {
width: 100%;
background: var(--bg-1);
border: 1px solid var(--stroke);
border-radius: 8px;
padding: 0.75rem 1rem;
color: var(--text-1);
font-family: inherit;
font-size: 0.9rem;
outline: none;
transition: border-color 0.25s;
}
.password-input-wrap input:focus {
border-color: var(--brand);
}
.password-input-wrap i {
position: absolute;
right: 1rem;
color: var(--text-3);
cursor: pointer;
}
.security-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(16, 185, 129, 0.1);
color: var(--green);
padding: 4px 10px;
border-radius: 6px;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 0.5rem;
}
/* ─── STICKY BOTTOM CTA ─── */
.sticky-cta {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 998;
background: rgba(241, 245, 249, 0.9);
backdrop-filter: blur(24px) saturate(180%);
border-top: 1px solid var(--stroke);
padding: 1rem 7%;
display: flex;
align-items: center;
justify-content: center;
gap: 2rem;
transform: translateY(110%);
opacity: 0;
transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s;
}
.sticky-cta.visible {
transform: translateY(0);
opacity: 1;
}
.sticky-cta-label {
font-size: 0.9rem;
color: var(--text-2);
}
.sticky-cta-label b {
color: var(--text-1);
}
.sticky-divider {
width: 1px;
height: 28px;
background: var(--stroke);
}
.btn-already {
font-size: 0.875rem;
font-weight: 600;
color: var(--text-2);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: all 0.2s;
}
.btn-already:hover {
color: var(--text-1);
border-bottom-color: var(--text-2);
}
/* ─── TRUST BAR ─── */
.trust-bar {
background: rgba(17, 24, 39, 0.4);
border-top: 1px solid var(--stroke);
border-bottom: 1px solid var(--stroke);
padding: 1.25rem 7%;
display: flex;
justify-content: center;
gap: 4rem;
backdrop-filter: blur(8px);
position: relative;
z-index: 2;
}
.trust-item {
display: flex;
align-items: center;
gap: 10px;
font-size: 0.85rem;
color: var(--text-2);
font-weight: 500;
}
.trust-item i {
color: var(--green);
font-size: 1rem;
}
.trust-item b {
color: var(--text-1);
font-weight: 600;
}
@media (max-width: 768px) {
.trust-bar {
flex-direction: column;
gap: 1rem;
align-items: flex-start;
padding: 1.5rem 7%;
}
}
/* ─── FOOTER ─── */
body {
padding-bottom: 72px;
}
/* prevent sticky CTA from covering content */
footer {
position: relative;
z-index: 1;
background: var(--bg-1);
border-top: 1px solid var(--stroke);
padding: 5rem 7% 0;
}
.footer-top {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: 4rem;
padding-bottom: 4rem;
border-bottom: 1px solid var(--stroke);
}
.footer-brand {
max-width: 340px;
}
.footer-tagline {
font-size: 0.875rem;
color: var(--text-3);
line-height: 1.75;
}
.footer-col h5 {
font-family: 'Outfit', sans-serif;
font-size: 0.8rem;
font-weight: 700;
color: var(--text-1);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 1.25rem;
}
.footer-col ul {
list-style: none;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.footer-col a {
color: var(--text-3);
text-decoration: none;
font-size: 0.9rem;
transition: color 0.2s;
}
.footer-col a:hover {
color: var(--text-1);
}
.footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.5rem 0;
font-size: 0.78rem;
color: var(--text-3);
flex-wrap: wrap;
gap: 1rem;
}
.footer-socials {
display: flex;
gap: 1.25rem;
}
.footer-socials a {
color: var(--text-3);
text-decoration: none;
font-size: 1rem;
transition: color 0.2s;
}
.footer-socials a:hover {
color: var(--text-1);
}
/* ─── SCROLL REVEAL ─── */
.reveal {
opacity: 0;
transform: translateY(30px);
transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.active {
opacity: 1;
transform: translateY(0);
}
/* ─── BEFORE / AFTER ─── */
.compare-section {
padding: 8rem 7%;
}
.compare-grid {
max-width: 1100px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
}
.compare-card {
border-radius: 20px;
padding: 2.5rem;
border: 1px solid var(--stroke);
}
.before-card {
background: rgba(239, 68, 68, 0.04);
border-color: rgba(239, 68, 68, 0.15);
}
.after-card {
background: rgba(16, 185, 129, 0.04);
border-color: rgba(16, 185, 129, 0.15);
}
.compare-tag {
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 1.5rem;
display: flex;
align-items: center;
gap: 8px;
}
.before-card .compare-tag {
color: #f87171;
}
.after-card .compare-tag {
color: #34d399;
}
.compare-card ul {
list-style: none;
display: flex;
flex-direction: column;
gap: 1rem;
}
.compare-card li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 0.925rem;
color: var(--text-2);
line-height: 1.5;
}
.before-card li i {
color: #f87171;
margin-top: 3px;
flex-shrink: 0;
}
.after-card li i {
color: #34d399;
margin-top: 3px;
flex-shrink: 0;
}
/* ─── WHAT WE SUPPORT ─── */
.support-section {
padding: 8rem 7%;
background: var(--bg-1);
}
.support-grid {
max-width: 1100px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
.support-card {
background: var(--bg-2);
border: 1px solid var(--stroke);
border-radius: 20px;
padding: 2rem;
transition: border-color 0.3s;
}
.support-card:hover {
border-color: var(--stroke-hover);
}
.support-icon {
font-size: 1.5rem;
color: var(--brand);
margin-bottom: 1.25rem;
}
.support-card h4 {
font-size: 1rem;
margin-bottom: 1rem;
color: var(--text-1);
}
.support-card ul {
list-style: none;
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.support-card li {
font-size: 0.875rem;
color: var(--text-2);
padding-left: 1rem;
position: relative;
}
.support-card li::before {
content: '';
position: absolute;
left: 0;
top: 8px;
width: 5px;
height: 5px;
background: var(--brand);
border-radius: 50%;
}
/* ─── FAQ ─── */
.faq-section {
padding: 8rem 7%;
}
.faq-list {
max-width: 800px;
margin: 0 auto;
}
.faq-item {
border-bottom: 1px solid var(--stroke);
}
.faq-q {
width: 100%;
background: none;
border: none;
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.5rem 0;
cursor: pointer;
color: var(--text-1);
text-align: left;
gap: 1rem;
}
.faq-q span {
font-size: 1rem;
font-weight: 600;
line-height: 1.5;
}
.faq-q i {
color: var(--text-3);
transition: transform 0.3s;
flex-shrink: 0;
font-size: 0.85rem;
}
.faq-q.open i {
transform: rotate(180deg);
color: var(--brand);
}
.faq-a {
display: none;
padding: 0 0 1.5rem;
}
.faq-a.open {
display: block;
}
.faq-a p {
color: var(--text-2);
font-size: 0.95rem;
line-height: 1.85;
}
/* ─── RESPONSIVE ─── */
@media (max-width:1024px) {
.why-inner,
.user-grid,
.support-grid {
grid-template-columns: 1fr;
}
.compare-grid {
grid-template-columns: 1fr;
}
.nav-links {
display: none;
}
.footer-top {
grid-template-columns: 1fr;
gap: 3rem;
}
}
@media (max-width:640px) {
.hero {
padding-top: 7rem;
}
.how-timeline::before {
display: none;
}
}
</style>
</head>
<body>
<!-- ═══════════════ NAV ═══════════════ -->
<nav>
<a class="logo" href="#">
<div class="logo-icon"><i class="fas fa-bolt" style="color:#fff;font-size:0.8rem;"></i></div>
SmartBooks
</a>
<ul class="nav-links">
<li><a href="#why">Why We Built This</a></li>
<li><a href="#users">Who It's For</a></li>
<li><a href="#how">How It Works</a></li>
<li><a href="#bank-pipeline">Bank Pipeline</a></li>
<li><a href="#result">The Output</a></li>
</ul>
<div style="display:flex; align-items:center; gap:0.75rem;">
<!-- Google Sign-In button (visual only) -->
<a href="index.html" class="btn-google">
<!-- Google G SVG -->
<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
<path fill="#4285F4"
d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v8.51h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.14z" />
<path fill="#34A853"
d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z" />
<path fill="#FBBC05"
d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z" />
<path fill="#EA4335"
d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z" />
</svg>
Sign in with Google
</a>
</div>
</nav>
<!-- ═══════════════ HERO ═══════════════ -->
<section class="hero">
<div class="hero-inner">
<div class="hero-pill">
<span>v1.0</span> Now in Active Use — Audit Automation Engine
</div>
<h1>From Raw Documents<br>to <em>Tally-Ready Reports</em><br>Without Typing a Word.</h1>
<p class="hero-sub">SmartBooks is a precision-built utility for audit professionals. It connects directly to
your Google Drive, reads your invoices and bank statements with structured intelligence, and delivers
clean, classified data ready for Tally ERP import.</p>
<div class="hero-actions">
<a href="index.html" class="btn-hero-primary">Launch Dashboard →</a>
<a href="#how" class="btn-hero-ghost">See How It Works</a>
</div>
</div>
</section>
<!-- ═══════════════ TRANSPARENCY SECTION ═══════════════ -->
<section class="transparency-section reveal" id="security" style="padding: 6rem 7%; position: relative; z-index: 1;">
<div class="section-header" style="max-width: 800px; margin-bottom: 4rem;">
<span class="section-label">Trust & Transparency</span>
<h2>Our Transparency Standard</h2>
<p>Professional auditing requires trust. SmartBooks is built on a technical architecture that ensures your
clients' financial data remains entirely under your control.</p>
</div>
<div class="transparency-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; max-width: 1200px; margin: 0 auto;">
<!-- Card 1: Storage -->
<div class="user-card">
<div class="user-avatar" style="background: rgba(16, 185, 129, 0.1); color: var(--green);">
<i class="fas fa-server-slash"></i>
</div>
<h3>Zero Server Storage</h3>
<p>We do not retain copies of your documents. Files are read, processed in RAM, and cleared instantly. Your files stay in your Google Drive.</p>
</div>
<!-- Card 2: E2E -->
<div class="user-card">
<div class="user-avatar" style="background: rgba(99, 102, 241, 0.1); color: var(--brand);">
<i class="fas fa-shield-halved"></i>
</div>
<h3>End-to-End Privacy</h3>
<p>Our pipeline is a direct tunnel between your storage and dashboard. We use OAuth 2.0 to ensure only you can authorize access.</p>
</div>
<!-- Card 3: Decryption -->
<div class="user-card">
<div class="user-avatar" style="background: rgba(245, 158, 11, 0.1); color: var(--yellow);">
<i class="fas fa-key"></i>
</div>
<h3>Local-Only Decryption</h3>
<p>Bank passwords are never saved on disk. They exist in volatile RAM only for the extraction cycle, ensuring 100% security.</p>
</div>
</div>
</section>
<div class="section-divider"></div>
<!-- ═══════════════ WHY ═══════════════ -->
<section class="why-section reveal" id="why">
<div class="why-inner">
<div class="why-content">
<span class="section-label">Why We Built This</span>
<h2>The audit process had a gap that nobody was solving honestly.</h2>
<p>Every accounting firm we spoke to described the same problem: hundreds of scanned invoices,
downloaded bank PDFs, and zero reliable way to get that data into Tally without manual entry — or
paying someone to do it all day.</p>
<p>We built SmartBooks to close that gap. Not with magic, but with a structured, transparent pipeline
that extracts, classifies, and formats financial data with precision. You retain full control. You
verify the output. We do the reading.</p>
<div class="why-stat-group">
<div class="why-stat">
<h3>3–4 hrs</h3>
<p>Avg. time saved per client file</p>
</div>
<div class="why-stat">
<h3>0 edits</h3>
<p>Manual entries needed after export</p>
</div>
</div>
</div>
<div class="why-card-stack">
<div class="why-card">
<div class="why-card-icon" style="background:rgba(99,102,241,0.12);">
<i class="fas fa-file-invoice" style="color:#818cf8;"></i>
</div>
<h4>Invoice Extraction</h4>
<p>Reads PDFs and scanned images. Extracts vendor names, GSTINs, tax breakdowns, invoice numbers,
and line items — then classifies them into Sales or Purchase registers automatically.</p>
</div>
<div class="why-card">
<div class="why-card-icon" style="background:rgba(6,182,212,0.1);">
<i class="fas fa-building-columns" style="color:#22d3ee;"></i>
</div>
<h4>Bank Statement Processing</h4>
<p>Converts bank PDFs into structured debit/credit/balance rows. We fully support password-protected
statements with a <b>strict privacy-first architecture</b>: your passwords are never saved on
our servers, and your financial privacy is our absolute priority.</p>
</div>
<div class="why-card">
<div class="why-card-icon" style="background:rgba(16,185,129,0.1);">
<i class="fas fa-circle-check" style="color:#34d399;"></i>
</div>
<h4>Tally Report Generation</h4>
<p>Produces an import-ready Excel or XML report mapped to Tally's sales and purchase registers. No
reformatting. No column juggling. Download and import directly.</p>
</div>
</div>
</div>
</section>
<div class="section-divider"></div>
<!-- ═══════════════ WHO IT'S FOR ═══════════════ -->
<section class="users-section reveal" id="users">
<div class="section-header">
<span class="section-label">Who Benefits</span>
<h2>Built for professionals dealing with real document volume.</h2>
<p>If your work involves processing financial documents at scale and reconciling them for regulatory or
internal reporting, SmartBooks was designed for you.</p>
</div>
<div class="user-grid">
<div class="user-card">
<div class="user-avatar" style="background:rgba(99,102,241,0.12);">
<i class="fas fa-user-tie" style="color:#818cf8;"></i>
</div>
<h3>Chartered Accountants</h3>
<p>You handle multiple client files every month. Invoice extraction across dozens of PDFs is a
productivity killer. SmartBooks handles document-level extraction per client folder so you review,
not transcribe.</p>
</div>
<div class="user-card">
<div class="user-avatar" style="background:rgba(6,182,212,0.1);">
<i class="fas fa-building" style="color:#22d3ee;"></i>
</div>
<h3>Audit Firms</h3>
<p>Your junior staff shouldn't spend time manually typing vendor amounts. Set up SmartBooks on a shared
Drive folder, trigger the automation cycle, and route structured output to your Tally operators.</p>
</div>
<div class="user-card">
<div class="user-avatar" style="background:rgba(245,158,11,0.1);">
<i class="fas fa-chart-pie" style="color:#fbbf24;"></i>
</div>
<h3>Finance Controllers</h3>
<p>You need clean, classified data before month-close. SmartBooks can watch your accounts payable folder
and auto-process incoming invoices continuously — so you're never catching up at month-end.</p>
</div>
</div>
</section>
<div class="section-divider"></div>
<!-- ═══════════════ HOW IT WORKS ═══════════════ -->
<section class="how-section reveal" id="how">
<div class="section-header" style="max-width:700px;">
<span class="section-label">Functionality</span>
<h2>Transparent by design. Here is exactly how your data moves.</h2>
<p>We believe professional tools should show their work. Below is the explicit step-by-step process — no
abstractions, no vague descriptions.</p>
</div>
<div class="how-timeline">
<div class="how-step">
<div class="how-step-left">
<div class="step-dot"></div>
</div>
<div class="how-step-body">
<span class="step-phase">Phase 01</span>
<h3>Connect Google Drive — Manually Select Your Folder</h3>
<p>Open the dashboard and authorize your Google Drive account. You are then shown a folder picker
where you <strong>manually select the specific folder</strong> that contains your invoices, bank
statements, or both. SmartBooks does not scan your entire Drive — it only accesses the path you
explicitly authorize. This is non-negotiable for compliance reasons.</p>
<div class="how-note">
<i class="fas fa-shield-halved"></i>
<span>We do not store Drive credentials. Folder selection is scoped per-session and re-confirmed
each run.</span>
</div>
</div>
</div>
<div class="how-step">
<div class="how-step-left">
<div class="step-dot"></div>
</div>
<div class="how-step-body">
<span class="step-phase">Phase 02</span>
<h3>Document Identification & Structural Extraction</h3>
<p>Each file is passed through a document classifier that identifies whether it is a Sales Invoice,
Purchase Invoice, or Bank Statement. For invoices, a structural parser locates GSTIN fields,
vendor/customer name blocks, tax breakdowns (CGST/SGST/IGST), and invoice totals — even in
scanned images with uneven formatting. For bank statements, we normalize every transaction row
into a standard Debit / Credit / Balance / Description format.</p>
<div class="how-note">
<i class="fas fa-circle-info"></i>
<span>Fields with low confidence are flagged in the output so you can quickly review only those
entries — not the entire file.</span>
</div>
</div>
</div>
<div class="how-step">
<div class="how-step-left">
<div class="step-dot"></div>
</div>
<div class="how-step-body">
<span class="step-phase">Phase 03</span>
<h3>Start the Automation Cycle from Drive</h3>
<p>Once your folder is mapped, you initiate the <strong>Automation Loop</strong> from the dashboard.
You choose your polling interval — every 5 minutes, every 30 minutes, or hourly. The background
agent monitors the source folder for new file arrivals, processes them, and deposits the
structured output directly into the Output folder you specify on your Drive. You do not need to
keep the app open for this to run.</p>
<div class="how-note">
<i class="fas fa-rotate"></i>
<span>Only new, unprocessed files are picked up each cycle. Already-processed files are tracked
to avoid duplication.</span>
</div>
</div>
</div>
<div class="how-step">
<div class="how-step-left">
<div class="step-dot"></div>
</div>
<div class="how-step-body">
<span class="step-phase">Phase 04</span>
<h3>Verify & Export Tally-Ready Report</h3>
<p>After each cycle, the extraction dashboard updates with a per-file review panel. Approve or
correct flagged rows. Once satisfied, click Export — and receive an Excel or XML file perfectly
formatted for Tally's Sales Register, Purchase Register or Ledger import. The file is also
auto-saved to your Drive output folder.</p>
<div class="how-note">
<i class="fas fa-circle-check"></i>
<span>The exported report maps directly to Tally voucher fields. No column renaming, no
reformatting needed before import.</span>
</div>
</div>
</div>
</div>
<!-- ── Dedicated Bank Flow ── -->
<div class="bank-flow-wrap" id="bank-pipeline" style="margin-top: 8rem; scroll-margin-top: 100px;">
<div class="section-header" style="max-width:700px; margin-bottom: 4rem; text-align: left; margin-left: 0;">
<span class="section-label">Bank Pipeline</span>
<h2>Detailed: How Bank Statements Work</h2>
<p>Processing bank statements requires a specialized security layer. Here is our dedicated 4-step
pipeline for handling your financial records.</p>
</div>
<div class="bank-steps-grid"
style="display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem;">
<!-- Step 1 -->
<div class="bank-step-card"
style="background: var(--bg-2); border: 1px solid var(--stroke); border-radius: 20px; padding: 2.5rem; position: relative; overflow: hidden; transition: transform 0.3s;"
onmouseover="this.style.transform='translateY(-5px)'"
onmouseout="this.style.transform='translateY(0)'">
<div
style="font-size: 0.72rem; font-weight: 700; color: var(--brand); letter-spacing: 0.12em; margin-bottom: 1.25rem; text-transform: uppercase;">
Step 01: Detect</div>
<h4 style="font-size: 1.15rem; margin-bottom: 0.85rem; color: var(--text-1);">Automatic Detection
</h4>
<p style="font-size: 0.925rem; color: var(--text-2); line-height: 1.7;">SmartBooks deep-scans your
PDF to check for password protection markers before any data extraction begins.</p>
<i class="fas fa-search"
style="position: absolute; bottom: -15px; right: -15px; font-size: 5rem; color: var(--text-1); opacity: 0.04;"></i>
</div>
<!-- Step 2 -->
<div class="bank-step-card"
style="background: var(--bg-2); border: 1px solid var(--stroke); border-radius: 20px; padding: 2.5rem; position: relative; overflow: hidden; transition: transform 0.3s;"
onmouseover="this.style.transform='translateY(-5px)'"
onmouseout="this.style.transform='translateY(0)'">
<div
style="font-size: 0.72rem; font-weight: 700; color: var(--brand); letter-spacing: 0.12em; margin-bottom: 1.25rem; text-transform: uppercase;">
Step 02: Unlock</div>
<h4 style="font-size: 1.15rem; margin-bottom: 0.85rem; color: var(--text-1);">Manual Entry</h4>
<p style="font-size: 0.925rem; color: var(--text-2); line-height: 1.7;">If protected, you enter the
password manually. <b>We never save your passwords</b>; they exist only for the duration of the
unlock.</p>
<i class="fas fa-key"
style="position: absolute; bottom: -15px; right: -15px; font-size: 5rem; color: var(--text-1); opacity: 0.04;"></i>
</div>
<!-- Step 3 -->
<div class="bank-step-card"
style="background: var(--bg-2); border: 1px solid var(--stroke); border-radius: 20px; padding: 2.5rem; position: relative; overflow: hidden; transition: transform 0.3s;"
onmouseover="this.style.transform='translateY(-5px)'"
onmouseout="this.style.transform='translateY(0)'">
<div
style="font-size: 0.72rem; font-weight: 700; color: var(--brand); letter-spacing: 0.12em; margin-bottom: 1.25rem; text-transform: uppercase;">
Step 03: Extract</div>
<h4 style="font-size: 1.15rem; margin-bottom: 0.85rem; color: var(--text-1);">In-Memory Extraction
</h4>
<p style="font-size: 0.925rem; color: var(--text-2); line-height: 1.7;">Once unlocked, the PDF
content is read into RAM, processed into structured rows, and instantly wiped from memory.</p>
<i class="fas fa-microchip"
style="position: absolute; bottom: -15px; right: -15px; font-size: 5rem; color: var(--text-1); opacity: 0.04;"></i>
</div>
<!-- Step 4 -->
<div class="bank-step-card"
style="background: var(--bg-2); border: 1px solid var(--stroke); border-radius: 20px; padding: 2.5rem; position: relative; overflow: hidden; transition: transform 0.3s;"
onmouseover="this.style.transform='translateY(-5px)'"
onmouseout="this.style.transform='translateY(0)'">
<div
style="font-size: 0.72rem; font-weight: 700; color: var(--brand); letter-spacing: 0.12em; margin-bottom: 1.25rem; text-transform: uppercase;">
Step 04: Result</div>
<h4 style="font-size: 1.15rem; margin-bottom: 0.85rem; color: var(--text-1);">Tally-Ready Sheets
</h4>
<p style="font-size: 0.925rem; color: var(--text-2); line-height: 1.7;">Your bank transactions are
normalized into a clean Excel/Tally format, saved directly back to your Output folder.</p>
<i class="fas fa-file-excel"
style="position: absolute; bottom: -15px; right: -15px; font-size: 5rem; color: var(--text-1); opacity: 0.04;"></i>
</div>
</div>
</div>
</section>
<div class="section-divider"></div>
<!-- ═══════════════ RESULT / IMAGE ═══════════════ -->
<section class="result-section reveal" id="result">
<div class="section-header" style="max-width:700px;">
<span class="section-label">The Output</span>
<h2>What a completed audit cycle looks like.</h2>
<p>Below is the Tally report generated at the end of an automation cycle — structured, reviewed, and ready
for one-click import.</p>
</div>
<div class="result-image-wrap">
<div class="image-toolbar">
<div class="toolbar-dot" style="background:#ef4444;"></div>
<div class="toolbar-dot" style="background:#f59e0b;"></div>
<div class="toolbar-dot" style="background:#10b981;"></div>
<span style="margin-left:12px; font-size:0.78rem; color:var(--text-3);">SmartBooks — Tally Export
Dashboard</span>
</div>
<div class="image-placeholder-inner">
<i class="fas fa-image"></i>
<div class="img-label">Place your Tally Report Screenshot here</div>
<p style="font-size:0.8rem; opacity:0.5;">(Replace this block with an <img> tag tomorrow)</p>
</div>
</div>
</section>
<!-- ═══════════════ BEFORE / AFTER ═══════════════ -->
<section class="compare-section reveal">
<div class="section-header">
<span class="section-label">The Real Difference</span>
<h2>Before SmartBooks. After SmartBooks.</h2>
<p>This is what changes when you stop doing it manually.</p>
</div>
<div class="compare-grid">
<div class="compare-card before-card">
<div class="compare-tag"><i class="fas fa-times-circle"></i> Without SmartBooks</div>
<ul>
<li><i class="fas fa-times"></i> Manually typing invoice data into Excel every day</li>
<li><i class="fas fa-times"></i> Scrolling through 10-20page bank PDFs to match entries</li>
<li><i class="fas fa-times"></i> Wrong GSTIN copied = GST filing error</li>
<li><i class="fas fa-times"></i> Junior staff spending 6 hrs/day on data entry</li>
<li><i class="fas fa-times"></i> Month-end chaos — all backlog piles up at once</li>
<li><i class="fas fa-times"></i> Tally import fails due to formatting mismatches</li>
</ul>
</div>
<div class="compare-card after-card">
<div class="compare-tag"><i class="fas fa-check-circle"></i> With SmartBooks</div>
<ul>
<li><i class="fas fa-check"></i> Files in Drive are read and extracted automatically</li>
<li><i class="fas fa-check"></i> Bank statements normalized and reconciled in seconds</li>
<li><i class="fas fa-check"></i> GSTINs extracted and validated field-by-field</li>
<li><i class="fas fa-check"></i> Staff focus on review, not repetitive input</li>
<li><i class="fas fa-check"></i> Continuous cycle runs — zero month-end backlog</li>
<li><i class="fas fa-check"></i> Export mapped directly to Tally register fields</li>
</ul>
</div>
</div>
</section>
<div class="section-divider"></div>
<!-- ═══════════════ WHAT WE SUPPORT ═══════════════ -->
<section class="support-section reveal">
<div class="section-header">
<span class="section-label">Compatibility</span>
<h2>What files can SmartBooks read?</h2>
<p>We are honest about what we support. These are the document types our extraction pipeline currently
handles reliably.</p>
</div>
<div class="support-grid">
<div class="support-card">
<div class="support-icon"><i class="fas fa-file-invoice"></i></div>
<h4>Invoice Documents</h4>
<ul>
<li>PDF invoices — digital or printed-to-PDF</li>
<li>Scanned invoices saved as image files</li>
<li>GST-format invoices with GSTIN fields</li>
<li>Multi-page documents (extraction per page)</li>
</ul>
</div>
<div class="support-card">
<div class="support-icon"><i class="fas fa-building-columns"></i></div>
<h4>Bank Statements</h4>
<ul>
<li>Standard Indian bank statement PDFs</li>
<li>Tabular statement layouts</li>
<li>Debit, credit, balance extraction</li>
<li>Date and description normalization</li>
</ul>
<a href="#" onclick="openModal('bankModal'); return false;"
style="display:inline-block; margin-top:1.25rem; font-size:0.8rem; color:var(--brand); text-decoration:none; font-weight:600; border-bottom:1px solid transparent; transition:0.2s;"
onmouseover="this.style.borderBottomColor='var(--brand)'"
onmouseout="this.style.borderBottomColor='transparent'">
<i class="fas fa-shield-halved" style="margin-right:5px;"></i> Security & Locked Files →
</a>
</div>
<div class="support-card">
<div class="support-icon"><i class="fas fa-file-excel"></i></div>
<h4>Output Format</h4>
<ul>
<li>Excel (.xlsx) structured for Tally import</li>
<li>Sales Register column layout</li>
<li>Purchase Register column layout</li>
<li>Bank ledger normalized format</li>
</ul>
</div>
</div>
</section>
<div class="section-divider"></div>
<!-- ═══════════════ FAQ ═══════════════ -->
<section class="faq-section reveal">
<div class="section-header">
<span class="section-label">Common Questions</span>
<h2>Things people ask before they start.</h2>
</div>
<div class="faq-list">
<div class="faq-item">
<button class="faq-q" onclick="toggleFaq(this)">
<span>Does SmartBooks access all my Google Drive files?</span>
<i class="fas fa-chevron-down"></i>
</button>
<div class="faq-a">
<p>No. SmartBooks operates on a strict "Permission-First" model. You manually select the specific
folder you want processed. We only read files inside that path — nothing else in your Drive is
accessible to us. You can revoke access at any time from your Google account settings.</p>
</div>
</div>
<div class="faq-item">
<button class="faq-q" onclick="toggleFaq(this)">
<span>What happens if the extraction is wrong for some fields?</span>
<i class="fas fa-chevron-down"></i>
</button>
<div class="faq-a">
<p>Our system flags any field where it has low confidence in the extracted value. These are
highlighted in the review dashboard so you can correct just those entries before exporting. You
do not need to re-check the entire file — only the flagged rows.</p>
</div>
</div>
<div class="faq-item">
<button class="faq-q" onclick="toggleFaq(this)">
<span>Do I need to keep the app open for automation to run?</span>
<i class="fas fa-chevron-down"></i>
</button>
<div class="faq-a">
<p>No. Once you start the Automation Cycle, a background agent monitors your folder on the server
side. You can close the browser and the agent will continue running, processing new files and
saving output to your Drive according to the interval you set.</p>
</div>
</div>
<div class="faq-item">
<button class="faq-q" onclick="toggleFaq(this)">
<span>Is the Tally export ready to import without changes?</span>
<i class="fas fa-chevron-down"></i>
</button>
<div class="faq-a">
<p>Yes — the exported file maps directly to Tally's register field structure. Column names, date
formats, and amount fields are pre-configured for Tally ERP 9 and Tally Prime. You do not need
to rename columns or reformat data before importing.</p>
</div>
</div>
<div class="faq-item">
<button class="faq-q" onclick="toggleFaq(this)">
<span>Is my financial data stored on your servers?</span>
<i class="fas fa-chevron-down"></i>
</button>
<div class="faq-a">
<p>No. We do not retain copies of your documents. Files are read from your Drive, processed through
the extraction pipeline, and the structured output is returned directly to your Drive. The only
data we retain are minimal operational logs (file count, processing time) which are deleted
after 30 days.</p>
</div>
</div>
<div class="faq-item">
<button class="faq-q" onclick="toggleFaq(this)">
<span>How does SmartBooks handle password-protected bank statements?</span>
<i class="fas fa-chevron-down"></i>
</button>
<div class="faq-a">
<p>SmartBooks is built to respect bank security. If a file is locked, you can manually enter the
password in the review dashboard to unlock it for that session. For automated cycles, the system
will flag the file as "Locked" and skip it until a password is provided. <b>We never store these
passwords on our server</b>; they are processed in volatile memory for the extraction cycle
only.</p>
</div>
</div>
<div class="faq-item">
<button class="faq-q" onclick="toggleFaq(this)">
<span>Do I need to upload invoices and bank statements separately?</span>
<i class="fas fa-chevron-down"></i>
</button>
<div class="faq-a">
<p>No. Your only job is to provide the data. Our system uses an intelligent document classifier that
automatically detects whether a file is an Invoice (Sales/Purchase) or a Bank Statement. You can
keep everything in a single folder, and SmartBooks will route them to the correct processing
pipeline automatically.</p>
</div>
</div>
<div class="faq-item">
<button class="faq-q" onclick="toggleFaq(this)">
<span>Can I manually upload files instead of using Google Drive?</span>
<i class="fas fa-chevron-down"></i>
</button>
<div class="faq-a">
<p>Yes. While our Google Drive automation is designed for high-volume hands-free work, you can
always use the "Manual Upload" feature in the dashboard. This allows you to drag and drop files
directly from your computer for instant one-off processing.</p>
</div>
</div>
</div>
</div>
</section>
<!-- ═══════════════ FOOTER ═══════════════ -->
<footer>
<div class="footer-top">
<!-- Left: Brand -->
<div class="footer-brand">
<div class="logo" style="margin-bottom:1.25rem;">
<div class="logo-icon"><i class="fas fa-bolt" style="color:#fff;font-size:0.8rem;"></i></div>
SmartBooks
</div>
<p class="footer-tagline">A precision audit automation utility for accounting professionals. Built to be
transparent, accurate, and production-ready.</p>
<a href="index.html" class="btn-google"
style="margin-top:1.5rem; display:inline-flex; padding:0.55rem 1rem; font-size:0.825rem;">
<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" style="width:15px;height:15px;">
<path fill="#4285F4"
d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v8.51h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.14z" />
<path fill="#34A853"
d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z" />
<path fill="#FBBC05"
d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z" />
<path fill="#EA4335"
d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z" />
</svg>
Sign in with Google
</a>
</div>
<!-- Mid: Navigation -->
<div class="footer-col">
<h5>Navigate</h5>
<ul>
<li><a href="#why">Why We Built This</a></li>
<li><a href="#users">Who It's For</a></li>
<li><a href="#how">How It Works</a></li>
<li><a href="#result">The Output</a></li>
<li><a href="index.html">Dashboard</a></li>
</ul>
</div>
<!-- Right: Legal -->
<div class="footer-col">
<h5>Legal</h5>
<ul>
<li><a href="#" onclick="openModal('privacyModal'); return false;">Privacy Policy</a></li>
<li><a href="#" onclick="openModal('termsModal'); return false;">Terms of Use</a></li>
<li><a href="https://policies.google.com/privacy" target="_blank">Google Data Policy</a></li>
</ul>
</div>
</div>
<!-- Bottom bar -->
<div class="footer-bottom">
<p>© 2026 SmartBooks Audit Lab. All rights reserved. Not affiliated with Tally Solutions or Google LLC.
</p>
<div class="footer-socials">
<a href="#" title="GitHub"><i class="fab fa-github"></i></a>
<a href="#" title="LinkedIn"><i class="fab fa-linkedin"></i></a>
<a href="#" title="Twitter"><i class="fab fa-twitter"></i></a>
</div>
</div>
</footer>
<!-- ═══════════════ BANK MODAL ═══════════════ -->
<div class="modal-overlay" id="bankModal" onclick="closeOnBackdrop(event, 'bankModal')">
<div class="modal-box" style="max-width:600px;">
<div class="modal-header">
<h3>Bank Statement Security</h3>
<button class="modal-close" onclick="closeModal('bankModal')">×</button>
</div>
<div class="modal-body">
<div class="security-badge"><i class="fas fa-lock"></i> End-to-End Encrypted</div>
<h4>Statement Processing Workflow</h4>
<p>SmartBooks uses a privacy-first approach to handle sensitive financial documents. Here is how we
manage protected statements:</p>
<div class="password-demo">
<span
style="font-size:0.75rem; color:var(--text-3); text-transform:uppercase; letter-spacing:0.05em; display:block; margin-bottom:8px;">Workflow
Showcase</span>
<div style="display:flex; flex-direction:column; gap:10px;">
<div
style="display:flex; align-items:center; gap:10px; font-size:0.85rem; color:var(--text-2);">
<i class="fas fa-search" style="color:var(--brand); width:15px;"></i>
<span><b>1. Detect:</b> We identify if the PDF is password-locked.</span>
</div>
<div
style="display:flex; align-items:center; gap:10px; font-size:0.85rem; color:var(--text-2);">
<i class="fas fa-keyboard" style="color:var(--brand); width:15px;"></i>
<span><b>2. Enter:</b> You enter the password manually in your dashboard.</span>
</div>
<div
style="display:flex; align-items:center; gap:10px; font-size:0.85rem; color:var(--text-2);">
<i class="fas fa-shield-slash" style="color:var(--green); width:15px;"></i>
<span><b>3. Process:</b> Unlocked in RAM (never saved to server).</span>
</div>
<div
style="display:flex; align-items:center; gap:10px; font-size:0.85rem; color:var(--text-2);">
<i class="fas fa-file-excel" style="color:var(--green); width:15px;"></i>
<span><b>4. Result:</b> Ready-to-use Sheet/Tally format generated.</span>
</div>
</div>
</div>
<h4>Security & Trust Commitment</h4>
<ul style="margin-top:0.5rem;">
<li><strong>Zero Password Logging:</strong> We never save your passwords in our database or logs.
They exist only for the duration of the unlocking session.</li>
<li><strong>Volatile Memory Extraction:</strong> Decryption happens strictly in volatile memory and
is wiped immediately after processing.</li>
<li><strong>Direct to Sheet:</strong> The unlocked data is converted into a structured Excel format
and returned directly to your Drive.</li>
</ul>
<h4>Automation Logic</h4>
<p>When running in <strong>Automation Mode</strong>, if the system encounters a locked file:</p>
<ol style="padding-left:1.5rem; color:var(--text-2); font-size:0.9rem;">
<li style="margin-bottom:0.5rem;">The file is flagged as <code>LOCKED / PENDING PASSWORD</code> in
your dashboard.</li>
<li>The automation agent skips the file temporarily to prevent pipeline stalls.</li>
<li>Once you provide the password manually, the system processes it and marks it as complete.</li>
</ol>
</div>
<div class="modal-footer-bar">
<button onclick="closeModal('bankModal')" class="btn-nav" style="cursor:pointer; border:none;">Got
it</button>
</div>
</div>
</div>
<!-- ═══════════════ PRIVACY MODAL ═══════════════ -->
<div class="modal-overlay" id="privacyModal" onclick="closeOnBackdrop(event, 'privacyModal')">
<div class="modal-box">
<div class="modal-header">
<h3>Privacy Policy</h3>
<button class="modal-close" onclick="closeModal('privacyModal')">×</button>
</div>
<div class="modal-body">
<p><em>Last updated: April 2026</em></p>
<h4>1. What We Are</h4>
<p>SmartBooks is a document processing utility that assists accounting professionals in extracting,
classifying, and exporting structured data from invoices and bank statements. We are not a financial
institution and do not provide financial advice.</p>
<h4>2. Information We Access</h4>
<p>SmartBooks requests access to specific Google Drive folders that <strong>you explicitly
select</strong>. We do not scan your entire Drive. The scope of access is limited to:</p>
<ul>
<li>Reading files you authorize in the selected folder(s)</li>
<li>Writing processed output files to the output folder you specify</li>
</ul>
<p>We do not access your contacts, emails, calendar, or any Google account data beyond the Drive folders
you authorize.</p>
<h4>3. Data Processing</h4>
<p>Document content (text extracted from invoices and bank statements) is processed locally or via our
secure extraction pipeline. We do not sell, share, or transmit your financial document content to
third parties. Extracted data is used solely to produce the structured report you request.</p>
<h4>4. Data Retention</h4>
<p>We do not store copies of your documents on our servers. Processing is ephemeral — files are read,
extracted, and the output is returned to your Drive. We retain only minimal operational logs (file
count, processing time) for debugging purposes, which are automatically deleted after 30 days.</p>
<h4>5. Authentication</h4>
<p>Authentication is handled exclusively through Google OAuth 2.0. We do not store your Google password
or any long-lived credentials. Access tokens are session-scoped and discarded after each use.</p>
<h4>6. Your Rights</h4>
<p>You may revoke SmartBooks' access to your Google Drive at any time via your <a
href="https://myaccount.google.com/permissions" style="color:var(--brand);">Google Account
Permissions</a> page. Revoking access immediately stops all future processing.</p>
<h4>7. Contact</h4>
<p>For any privacy-related questions, contact us at the email address listed in your dashboard account
settings.</p>
</div>
<div class="modal-footer-bar">
<button onclick="closeModal('privacyModal')" class="btn-nav"
style="cursor:pointer; border:none;">Close</button>
</div>
</div>
</div>
<!-- ═══════════════ TERMS MODAL ═══════════════ -->
<div class="modal-overlay" id="termsModal" onclick="closeOnBackdrop(event, 'termsModal')">
<div class="modal-box">
<div class="modal-header">
<h3>Terms of Use</h3>
<button class="modal-close" onclick="closeModal('termsModal')">×</button>
</div>
<div class="modal-body">
<p><em>Last updated: April 2026</em></p>
<h4>1. Acceptance of Terms</h4>
<p>By accessing or using SmartBooks, you agree to be bound by these Terms of Use. If you do not agree,
you may not use the platform.</p>
<h4>2. Permitted Use</h4>
<p>SmartBooks is designed for legitimate accounting, auditing, and financial data management purposes.
You may use SmartBooks to:</p>
<ul>
<li>Process your own business invoices and bank statements</li>
<li>Process client documents for which you are the authorized accountant or auditor</li>
<li>Generate Tally-compatible export reports for import into your own ERP system</li>
</ul>
<h4>3. Prohibited Use</h4>
<p>You may not use SmartBooks to process documents without explicit authorization from the document
owner. You may not reverse-engineer, resell, or sublicense any part of this platform. You may not
upload documents containing fabricated or fraudulent financial data.</p>
<h4>4. Accuracy Disclaimer</h4>
<p>SmartBooks uses automated extraction logic that achieves high accuracy under normal conditions.
However, extracted data should be reviewed before import into accounting systems. SmartBooks is a
tool, not an auditor. Final responsibility for the accuracy of submitted financial records rests
with the user.</p>
<h4>5. Google Drive Integration</h4>
<p>SmartBooks integrates with Google Drive via Google's OAuth 2.0 API. Your use of this integration is
also subject to <a href="https://policies.google.com/terms" target="_blank"
style="color:var(--brand);">Google's Terms of Service</a>. SmartBooks is not affiliated with or
endorsed by Google LLC.</p>
<h4>6. Limitation of Liability</h4>
<p>SmartBooks is provided "as is" without warranties of any kind. We are not liable for any financial
loss, regulatory penalty, or data inaccuracy arising from use of this tool. Maximum liability is
limited to the amount paid for the service in the last 12 months.</p>
<h4>7. Changes to Terms</h4>
<p>We reserve the right to update these terms with reasonable notice. Continued use of SmartBooks after
changes are posted constitutes acceptance of the revised terms.</p>
</div>
<div class="modal-footer-bar">
<button onclick="closeModal('termsModal')" class="btn-nav" style="cursor:pointer; border:none;">I
Understand</button>
</div>
</div>
</div>
<!-- ═══════════════ STICKY BOTTOM CTA BAR ═══════════════ -->
<div class="sticky-cta" id="stickyCta">
<span class="sticky-cta-label">Ready to automate your audit workflow?</span>
<a href="index.html" class="btn-google" style="padding:0.6rem 1.25rem; font-size:0.875rem;">
<!-- Google G SVG -->
<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" style="width:16px;height:16px;">
<path fill="#4285F4"
d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v8.51h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.14z" />
<path fill="#34A853"
d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z" />
<path fill="#FBBC05"
d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z" />
<path fill="#EA4335"
d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z" />
</svg>
Sign in with Google
</a>
<div class="sticky-divider"></div>
<a href="index.html" class="btn-already">Already have an account? →</a>
</div>
<script>
// ── Active nav highlight on scroll
const sections = document.querySelectorAll('section[id]');
const navLinks = document.querySelectorAll('.nav-links a');
const stickyCta = document.getElementById('stickyCta');
const heroHeight = document.querySelector('.hero').offsetHeight;
window.addEventListener('scroll', () => {
const scrollY = window.scrollY;
let current = '';
sections.forEach(s => {
if (scrollY >= s.offsetTop - 120) current = s.id;
});
navLinks.forEach(a => {
a.style.color = a.getAttribute('href') === `#${current}` ? '#f1f5f9' : '';
});
if (scrollY > heroHeight * 0.6) {
stickyCta.classList.add('visible');
} else {
stickyCta.classList.remove('visible');
}
});
// ── Scroll Reveal Observer
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -50px 0px'
};
const revealObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('active');
revealObserver.unobserve(entry.target);
}
});
}, observerOptions);
document.querySelectorAll('.reveal').forEach(el => revealObserver.observe(el));
// ── Modal helpers
function openModal(id) {
document.getElementById(id).classList.add('open');
document.body.style.overflow = 'hidden';
}
function closeModal(id) {
document.getElementById(id).classList.remove('open');
document.body.style.overflow = '';
}
function closeOnBackdrop(e, id) {
if (e.target === document.getElementById(id)) closeModal(id);
}
document.addEventListener('keydown', e => {
if (e.key === 'Escape') {
['privacyModal', 'termsModal', 'bankModal'].forEach(closeModal);
}
});
// ── FAQ accordion
function toggleFaq(btn) {
const answer = btn.nextElementSibling;
const isOpen = btn.classList.contains('open');
// Close all
document.querySelectorAll('.faq-q').forEach(b => b.classList.remove('open'));
document.querySelectorAll('.faq-a').forEach(a => a.classList.remove('open'));
// Open clicked if it was closed
if (!isOpen) {
btn.classList.add('open');
answer.classList.add('open');
}
}
</script>
</body>
</html>change.html / Modification Log
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bug Fix Summary — landing.html</title>
<style>
body { font-family: sans-serif; line-height: 1.6; padding: 2rem; color: #333; max-width: 800px; margin: 0 auto; }
h1 { color: #4f46e5; border-bottom: 2px solid #eee; padding-bottom: 0.5rem; }
.change-card { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 1.5rem; margin-top: 1.5rem; }
code { background: #eee; padding: 2px 4px; border-radius: 4px; font-family: monospace; }
.line-num { font-weight: bold; color: #666; margin-right: 10px; }
.diff { font-family: monospace; white-space: pre-wrap; background: #1e293b; color: #e2e8f0; padding: 1rem; border-radius: 6px; margin-top: 10px; }
.added { color: #4ade80; }
.removed { color: #f87171; }
</style>
</head>
<body>
<h1>landing.html Modification Log</h1>
<p>The following changes were implemented to fix the navigation highlight issue for the <strong>Bank Pipeline</strong> section.</p>
<div class="change-card">
<h3>1. Selector Update (Previously around Line 2101)</h3>
<p>Changed the generic <code>section[id]</code> selector to an explicit list. This fixed the bug where the "Bank Pipeline" section (which uses a <code><div></code> tag) was being ignored by the scroll highlighter.</p>
<div class="diff">
<span class="removed">- const sections = document.querySelectorAll('section[id]');</span>
<span class="added">+ const sections = document.querySelectorAll('#why, #users, #how, #bank-pipeline, #result');</span>
</div>
</div>
<div class="change-card">
<h3>2. Offset Calculation Fix (Previously around Line 2111)</h3>
<p>Replaced <code>offsetTop</code> with a document-absolute calculation. Because <code>#bank-pipeline</code> is nested inside the <code>#how</code> section, <code>offsetTop</code> was returning a value relative to the parent section, causing incorrect scroll detection. The new logic uses the viewport-relative position plus scroll offset.</p>
<div class="diff">
<span class="removed">- if (scrollY >= s.offsetTop - 120) current = s.id;</span>
<span class="added">+ const sectionTop = s.getBoundingClientRect().top + scrollY;</span>
<span class="added">+ if (scrollY >= sectionTop - 150) current = s.id;</span>
</div>
</div>
<div style="margin-top: 3rem; font-size: 0.8rem; color: #999; text-align: center;">
Log generated on April 15, 2026
chatgpt groupchatlink:-https://chatgpt.com/gg/v/69f0c871798081a3a6761988090e23bd?token=n940YuK4lgZhL9N7fZaHTw
</div>
</body>
</html>