JoeBot/HOALedgerIQ_Website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: JoeBot:84e33ce23df6aafca6b4c43948e775cb66b4cea1
Branches Tags
JoeBot:main JoeBot:feature-insights-2026-04-21 JoeBot:feature/deployment-files
...
compare: JoeBot:b746116edef6def1e0487b4ebc1d252706f20677
Branches Tags
JoeBot:main JoeBot:feature-insights-2026-04-21 JoeBot:feature/deployment-files

2 Commits
84e33ce23d ... b746116ede

Author SHA1 Message Date
JoeBot
b746116ede Merge pull request 'Improve SEO pages layout, styling, and add screenshot carousel' (#6) from feature/seo-pages-improvements into main 
Reviewed-on: #6
 2026-04-01 11:22:21 -04:00
olsch01
99ec08624e Improve SEO pages layout, styling, and add screenshot carousel 
- Fix nav on both pages to use correct .nav/.nav-inner structure (was
  using .navbar which had no styles defined), matching index.html
- Add coming-soon banner and Login button to both SEO pages
- Add screenshot carousel (hero-visual) to both pages matching index.html
- Fix footer to use full footer-inner/footer-col structure with logo
- Add 200+ lines of missing CSS to styles.css: .problem-section,
  .solution-section, .comparison-table, .strategies-section,
  .calculator-section, .compliance-section, .cta-section, and all
  child components — all matching the dark theme design system
- Fix investment calculator element IDs to avoid conflicts with
  the main ROI calculator in app.js
- Add Chatwoot support widget to both pages for consistency
- Full mobile responsiveness for all new components

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
 2026-04-01 11:21:24 -04:00
3 changed files with 808 additions and 388 deletions
Expand all files Collapse all files

530
investment-management.html
View File

@@ -7,6 +7,8 @@
<meta name="description" content="Maximize your HOA's investment income with AI-powered investment management. Smart strategies for reserve funds, operating accounts, and capital projects. Free analysis.">
<meta name="keywords" content="HOA investment management, HOA reserve fund investment, HOA investment policy, HOA cash management, HOA investment strategy">
<link rel="canonical" href="https://www.hoaledgeriq.com/investment-management" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="styles.css" />
<!-- Google tag (gtag.js) -->
@@ -19,241 +21,323 @@
</script>
</head>
<body>
<!-- Navigation -->
<nav class="navbar">
<div class="container">
<img src="logo_house_transparent.svg" alt="HOA LedgerIQ" class="logo-img" />
<div class="nav-links">
<a href="index.html">Home</a>
<a href="#features">Features</a>
<a href="#strategies">Strategies</a>
<a href="#calculator">Calculator</a>
<a href="index.html#preview-signup" class="btn btn-primary nav-btn">Get Early Access</a>
<!-- COMING SOON BANNER -->
<div class="coming-soon-banner">
<span class="banner-badge" id="bannerCountdown">Launching Soon</span>
<span class="banner-text">HOA LedgerIQ is almost here — be first in line.</span>
<a href="index.html#preview-signup" class="banner-cta">Get Early Access →</a>
</div>
<!-- NAV -->
<nav class="nav">
<div class="nav-inner">
<a href="index.html" class="nav-logo">
<img src="logo_house_transparent.svg" alt="HOA LedgerIQ" class="logo-img" />
</a>
<ul class="nav-links">
<li><a href="index.html">Home</a></li>
<li><a href="#features">Features</a></li>
<li><a href="#strategies">Strategies</a></li>
<li><a href="#calculator">Calculator</a></li>
</ul>
<a href="index.html#preview-signup" class="btn btn-primary nav-btn">Get Early Access</a>
<a href="https://app.hoaledgeriq.com" class="btn btn-outline nav-btn nav-login" target="_blank" rel="noopener">Login</a>
</div>
</nav>
<!-- HERO -->
<section class="hero">
<div class="hero-glow"></div>
<div class="container">
<div class="hero-badge">
<span class="pulse-dot"></span>
Smart Investment Management
</div>
<h1 class="hero-headline">
HOA Investment Management<br />
<span class="gradient-text">That Maximizes Returns</span>
</h1>
<p class="hero-sub">
Stop leaving money on the table. HOA LedgerIQ's AI-powered investment management
helps you maximize returns on reserve funds while maintaining the liquidity needed
for operations and capital projects.
</p>
<div class="hero-actions">
<a href="#calculator" class="btn btn-primary btn-lg">Calculate Potential Earnings</a>
<a href="#strategies" class="btn btn-ghost btn-lg">View Strategies →</a>
</div>
<div class="hero-trust">
<p>✓ FDIC-insured options &nbsp;&nbsp; ✓ State-compliant &nbsp;&nbsp; ✓ Risk-adjusted strategies</p>
</div>
</div>
<!-- Screenshot Carousel -->
<div class="hero-visual">
<div class="screenshot-carousel" id="screenshotCarousel">
<div class="carousel-frame">
<div class="carousel-slides">
<div class="carousel-slide active">
<img src="img/screenshot-dashboard.png" alt="HOA LedgerIQ Dashboard — Fund health scores, operating and reserve balances" />
<div class="slide-caption">Dashboard — Fund Health &amp; At-a-Glance Metrics</div>
</div>
<div class="carousel-slide">
<img src="img/screenshot-cashflow.png" alt="HOA LedgerIQ Cash Flow — Projected balances with forward forecasting chart" />
<div class="slide-caption">Cash Flow — Actuals &amp; Forward Projections</div>
</div>
<div class="carousel-slide">
<img src="img/screenshot-capital.png" alt="HOA LedgerIQ Capital Planning — Multi-year project timeline and budget view" />
<div class="slide-caption">Capital Planning — 5-Year Project Pipeline</div>
</div>
</div>
</div>
</nav>
<!-- Hero Section -->
<section class="hero investment-hero">
<div class="container">
<div class="hero-badge">Smart Investment Management</div>
<h1 class="hero-headline">
HOA Investment Management<br />
<span class="gradient-text">That Actually Works</span>
</h1>
<p class="hero-sub">
Stop leaving money on the table. HOA LedgerIQ's AI-powered investment management
helps you maximize returns on reserve funds while maintaining liquidity for operations
and capital projects.
</p>
<div class="hero-actions">
<a href="#calculator" class="btn btn-primary btn-lg">Calculate Potential Earnings</a>
<a href="#strategies" class="btn btn-ghost btn-lg">View Strategies →</a>
</div>
<div class="hero-trust">
<p>✓ FDIC-insured options &nbsp; ✓ State-compliant &nbsp; ✓ Risk-adjusted strategies</p>
</div>
<div class="carousel-controls">
<button class="carousel-btn carousel-prev" aria-label="Previous screenshot">&#8592;</button>
<div class="carousel-dots">
<span class="carousel-dot active" data-index="0"></span>
<span class="carousel-dot" data-index="1"></span>
<span class="carousel-dot" data-index="2"></span>
</div>
<button class="carousel-btn carousel-next" aria-label="Next screenshot">&#8594;</button>
</div>
</section>
</div>
</div>
</section>
<!-- Problem Section -->
<section class="problem-section">
<div class="container">
<h2>Most HOAs Are Losing Money on Their Reserves</h2>
<div class="problem-grid">
<div class="problem-card">
<div class="problem-icon">💰</div>
<h3>Sitting in Checking Accounts</h3>
<p>Most HOAs keep reserve funds in non-interest-bearing accounts, losing 3-5% annually to inflation. That's thousands in lost income every year.</p>
</div>
<div class="problem-card">
<div class="problem-icon">📉</div>
<h3>Too Conservative</h3>
<p>Even "safe" investments like money markets now yield 4-5%, but many HOAs still earn 0.01% in traditional savings accounts.</p>
</div>
<div class="problem-card">
<div class="problem-icon">⚖️</div>
<h3>Compliance Concerns</h3>
<p>Board members worry about making investment decisions. What's allowed? What's safe? What's fiduciary?</p>
</div>
<div class="problem-card">
<div class="problem-icon">📊</div>
<h3>No Strategy</h3>
<p>Without a formal investment policy, HOAs miss opportunities and leave money on the table year after year.</p>
</div>
</div>
<!-- PROBLEM SECTION -->
<section class="problem-section">
<div class="container">
<h2>Most HOAs Are Losing Money on Their Reserves</h2>
<div class="problem-grid">
<div class="problem-card">
<div class="problem-icon">💰</div>
<h3>Sitting in Checking Accounts</h3>
<p>Most HOAs keep reserve funds in non-interest-bearing accounts, losing 3–5% annually to inflation. That's thousands in lost income every year.</p>
</div>
</section>
<!-- Solution Section -->
<section class="solution-section">
<div class="container">
<h2 class="section-title">Smart Investment Strategies for HOAs</h2>
<p class="section-sub">AI-powered recommendations tailored to your HOA's specific needs and risk tolerance.</p>
<div class="solution-grid">
<div class="solution-card">
<div class="solution-icon">🏦</div>
<h3>Operating Account Optimization</h3>
<p>Keep 3-6 months of operating expenses in a high-yield account. Earn 4-5% APY with full liquidity. Typical HOA: +$2,000-5,000/year.</p>
</div>
<div class="solution-card">
<div class="solution-icon">📈</div>
<h3>Reserve Fund Laddering</h3>
<p>CD ladders and Treasury ladders match your capital project timeline. Earn higher yields on money you won't need for 1-5 years.</p>
</div>
<div class="solution-card">
<div class="solution-icon">🎯</div>
<h3>Investment Policy Creation</h3>
<p>AI generates a compliant investment policy statement tailored to your state's HOA laws and your community's risk tolerance.</p>
</div>
<div class="solution-card">
<div class="solution-icon">📊</div>
<h3>Performance Tracking</h3>
<p>Monitor investment performance across all accounts. Get alerts when rebalancing is needed or better rates become available.</p>
</div>
</div>
<div class="problem-card">
<div class="problem-icon">📉</div>
<h3>Too Conservative</h3>
<p>Even "safe" investments like money markets now yield 4–5%, but many HOAs still earn 0.01% in traditional savings accounts.</p>
</div>
</section>
<!-- Investment Strategies Section -->
<section id="strategies" class="strategies-section">
<div class="container">
<h2>Investment Strategies by Risk Level</h2>
<div class="strategy-card conservative">
<h3>🛡️ Conservative Strategy</h3>
<p><strong>For:</strong> HOAs with low reserves or near-term capital projects</p>
<ul>
<li>✓ FDIC-insured accounts only</li>
<li>✓ High-yield savings accounts (4-5% APY)</li>
<li>✓ Money market funds</li>
<li>✓ Short-term CDs (3-12 months)</li>
<li><strong>Expected Return:</strong> 4-5% annually</li>
<li><strong>Risk Level:</strong> Very Low</li>
</ul>
</div>
<div class="strategy-card moderate">
<h3>⚖️ Moderate Strategy</h3>
<p><strong>For:</strong> HOAs with healthy reserves and 2-5 year project timeline</p>
<ul>
<li>✓ Treasury securities (T-bills, notes)</li>
<li>✓ CD laddering strategy</li>
<li>✓ Government bond funds</li>
<li>✓ Mix of liquid and term investments</li>
<li><strong>Expected Return:</strong> 5-7% annually</li>
<li><strong>Risk Level:</strong> Low</li>
</ul>
</div>
<div class="strategy-card aggressive">
<h3>📈 Growth Strategy</h3>
<p><strong>For:</strong> HOAs with substantial reserves and long-term horizon (5+ years)</p>
<ul>
<li>✓ Diversified bond funds</li>
<li>✓ Conservative equity exposure (10-20%)</li>
<li>✓ REITs for income</li>
<li>✓ Balanced fund approach</li>
<li><strong>Expected Return:</strong> 7-9% annually</li>
<li><strong>Risk Level:</strong> Moderate</li>
</ul>
</div>
<div class="problem-card">
<div class="problem-icon">⚖️</div>
<h3>Compliance Concerns</h3>
<p>Board members worry about making investment decisions. What's allowed? What's safe? What fulfills our fiduciary duty?</p>
</div>
</section>
<!-- Calculator Section -->
<section id="calculator" class="calculator-section">
<div class="container">
<h2>How Much Could Your HOA Earn?</h2>
<p>Calculate the potential investment income your HOA is leaving on the table.</p>
<div class="calc-wrapper">
<div class="calc-input-group">
<label>Total Reserve Funds</label>
<input type="number" id="reserveAmount" placeholder="e.g., 500000" />
</div>
<div class="calc-input-group">
<label>Current Annual Return (%)</label>
<input type="number" id="currentReturn" placeholder="e.g., 0.5" value="0.5" />
</div>
<div class="calc-input-group">
<label>Potential Return (%)</label>
<input type="number" id="potentialReturn" placeholder="e.g., 5.0" value="5.0" />
</div>
<button class="btn btn-primary btn-lg" onclick="calculateInvestment()">Calculate Potential</button>
<div id="calcResults" class="calc-results" style="display:none;">
<h3>Your HOA Could Earn:</h3>
<div class="result-highlight">$<span id="yearlyGain">0</span> more per year</div>
<p>That's <span id="totalGain">0</span> over 10 years!</p>
<a href="index.html#preview-signup" class="btn btn-primary">Start Optimizing Today</a>
</div>
</div>
<div class="problem-card">
<div class="problem-icon">📊</div>
<h3>No Formal Strategy</h3>
<p>Without a formal investment policy, HOAs miss opportunities and leave money on the table year after year.</p>
</div>
</section>
</div>
</div>
</section>
<!-- Compliance Section -->
<section class="compliance-section">
<div class="container">
<h2>State-Compliant Investment Guidance</h2>
<p>Every state has different laws about HOA investments. HOA LedgerIQ ensures compliance:</p>
<ul class="compliance-list">
<li>✓ Permitted investment types by state</li>
<li>✓ Diversification requirements</li>
<li>✓ Fiduciary duty guidance</li>
<li>✓ Investment policy templates</li>
<li>✓ Regular compliance updates</li>
</ul>
<!-- SOLUTION SECTION -->
<section id="features" class="solution-section">
<div class="container">
<div class="section-label">Smart Investment Management</div>
<h2 class="section-title">AI-Powered Strategies for HOAs</h2>
<p class="section-sub">Personalized investment recommendations tailored to your HOA's specific cash flow needs and risk tolerance.</p>
<div class="solution-grid">
<div class="solution-card">
<div class="solution-icon">🏦</div>
<h3>Operating Account Optimization</h3>
<p>Keep 3–6 months of operating expenses in a high-yield account. Earn 4–5% APY with full liquidity. Typical HOA: +$2,000–5,000/year.</p>
</div>
</section>
<!-- CTA Section -->
<section class="cta-section">
<div class="container">
<h2>Start Maximizing Your HOA's Investment Income</h2>
<p>Get personalized investment recommendations for your community.</p>
<div class="cta-form">
<a href="index.html#preview-signup" class="btn btn-primary btn-lg">Get Free Investment Analysis</a>
<p class="cta-note">No credit card required • 14-day free trial • State-compliant strategies</p>
</div>
<div class="solution-card">
<div class="solution-icon">📈</div>
<h3>Reserve Fund Laddering</h3>
<p>CD and Treasury ladders matched to your capital project timeline. Earn higher yields on money you won't need for 1–5 years.</p>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="container">
<p>&copy; 2026 HOA LedgerIQ. All rights reserved.</p>
<div class="footer-links">
<a href="index.html">Home</a>
<a href="index.html#features">Features</a>
<a href="index.html#pricing">Pricing</a>
<a href="index.html#contact">Contact</a>
</div>
<div class="solution-card">
<div class="solution-icon">🎯</div>
<h3>Investment Policy Creation</h3>
<p>AI generates a compliant investment policy statement tailored to your state's HOA laws and your community's risk tolerance.</p>
</div>
</footer>
<div class="solution-card">
<div class="solution-icon">📊</div>
<h3>Performance Tracking</h3>
<p>Monitor investment performance across all accounts. Get alerts when rebalancing is needed or better rates become available.</p>
</div>
</div>
</div>
</section>
<script src="app.js"></script>
<script>
function calculateInvestment() {
const reserves = parseFloat(document.getElementById('reserveAmount').value) || 0;
const currentRate = parseFloat(document.getElementById('currentReturn').value) || 0;
const potentialRate = parseFloat(document.getElementById('potentialReturn').value) || 0;
const yearlyGain = reserves * ((potentialRate - currentRate) / 100);
const totalGain = yearlyGain * 10;
document.getElementById('yearlyGain').textContent = yearlyGain.toLocaleString('en-US', {minimumFractionDigits: 0, maximumFractionDigits: 0});
document.getElementById('totalGain').textContent = totalGain.toLocaleString('en-US', {minimumFractionDigits: 0, maximumFractionDigits: 0});
document.getElementById('calcResults').style.display = 'block';
// Track event
if (typeof gtag !== 'undefined') {
gtag('event', 'calculator_submit', {
'event_category': 'conversion',
'event_label': 'Investment Calculator'
});
}
}
</script>
<!-- INVESTMENT STRATEGIES SECTION -->
<section id="strategies" class="strategies-section">
<div class="container">
<h2>Investment Strategies by Risk Level</h2>
<div class="strategy-card conservative">
<h3>🛡️ Conservative Strategy</h3>
<p><strong>For:</strong> HOAs with low reserves or near-term capital projects</p>
<ul>
<li>✓ FDIC-insured accounts only</li>
<li>✓ High-yield savings accounts (4–5% APY)</li>
<li>✓ Money market funds</li>
<li>✓ Short-term CDs (3–12 months)</li>
<li><strong>Expected Return:</strong> 4–5% annually</li>
<li><strong>Risk Level:</strong> Very Low</li>
</ul>
</div>
<div class="strategy-card moderate">
<h3>⚖️ Moderate Strategy</h3>
<p><strong>For:</strong> HOAs with healthy reserves and a 2–5 year project timeline</p>
<ul>
<li>✓ Treasury securities (T-bills, notes)</li>
<li>✓ CD laddering strategy</li>
<li>✓ Government bond funds</li>
<li>✓ Mix of liquid and term investments</li>
<li><strong>Expected Return:</strong> 5–7% annually</li>
<li><strong>Risk Level:</strong> Low</li>
</ul>
</div>
<div class="strategy-card aggressive">
<h3>📈 Growth Strategy</h3>
<p><strong>For:</strong> HOAs with substantial reserves and a long-term horizon (5+ years)</p>
<ul>
<li>✓ Diversified bond funds</li>
<li>✓ Conservative equity exposure (10–20%)</li>
<li>✓ REITs for income</li>
<li>✓ Balanced fund approach</li>
<li><strong>Expected Return:</strong> 7–9% annually</li>
<li><strong>Risk Level:</strong> Moderate</li>
</ul>
</div>
</div>
</section>
<!-- CALCULATOR SECTION -->
<section id="calculator" class="calculator-section">
<div class="container">
<h2>How Much Could Your HOA Earn?</h2>
<p>Calculate the potential investment income your HOA is leaving on the table.</p>
<div class="calc-wrapper">
<div class="calc-input-group">
<label for="reserveAmount">Total Reserve Funds</label>
<input type="number" id="reserveAmount" placeholder="e.g. 500,000" />
</div>
<div class="calc-input-group">
<label for="currentReturn">Current Annual Return (%)</label>
<input type="number" id="currentReturn" placeholder="e.g. 0.5" value="0.5" />
</div>
<div class="calc-input-group">
<label for="potentialReturn">Potential Return (%)</label>
<input type="number" id="potentialReturn" placeholder="e.g. 5.0" value="5.0" />
</div>
<button class="btn btn-primary btn-lg" style="width:100%; justify-content:center;" onclick="calculateInvestment()">Calculate Potential</button>
<div id="investCalcResults" class="calc-results" style="display:none;">
<h3>Your HOA Could Earn:</h3>
<div class="result-highlight">$<span id="yearlyGain">0</span> more per year</div>
<p>That's <strong>$<span id="totalGain">0</span></strong> more over 10 years</p>
<a href="index.html#preview-signup" class="btn btn-primary">Start Optimizing Today</a>
</div>
</div>
</div>
</section>
<!-- COMPLIANCE SECTION -->
<section class="compliance-section">
<div class="container">
<h2>State-Compliant Investment Guidance</h2>
<p>Every state has different laws about HOA investments. HOA LedgerIQ keeps you compliant:</p>
<ul class="compliance-list">
<li>✓ Permitted investment types by state</li>
<li>✓ Diversification requirements</li>
<li>✓ Fiduciary duty guidance</li>
<li>✓ Investment policy templates</li>
<li>✓ Regular compliance updates</li>
</ul>
</div>
</section>
<!-- CTA SECTION -->
<section class="cta-section">
<div class="container">
<h2>Start Maximizing Your HOA's Investment Income</h2>
<p>Get personalized investment recommendations for your community — free during early access.</p>
<div class="cta-form">
<a href="index.html#preview-signup" class="btn btn-primary btn-lg">Get Free Investment Analysis</a>
<p class="cta-note">No credit card required &nbsp;·&nbsp; 30-day free trial &nbsp;·&nbsp; State-compliant strategies</p>
</div>
</div>
</section>
<!-- FOOTER -->
<footer class="footer">
<div class="container footer-inner">
<div class="footer-logo">
<img src="logo_house.svg" alt="HOA LedgerIQ" class="logo-img logo-img--footer" />
<p>AI-powered HOA investment &amp; finance management.</p>
</div>
<div class="footer-links">
<div class="footer-col">
<div class="footer-col-title">Product</div>
<a href="index.html#features">Features</a>
<a href="index.html#pricing">Pricing</a>
<a href="index.html#preview-signup">Early Access</a>
</div>
<div class="footer-col">
<div class="footer-col-title">Pages</div>
<a href="investment-management.html">Investment Management</a>
<a href="reserve-study-software.html">Reserve Studies</a>
</div>
<div class="footer-col">
<div class="footer-col-title">Legal</div>
<a href="privacy.html">Privacy Policy</a>
<a href="terms.html">Terms of Service</a>
</div>
</div>
</div>
<div class="footer-bottom">
<div class="container">
<span>&copy; 2026 HOA LedgerIQ. All rights reserved.</span>
</div>
</div>
</footer>
<script src="app.js"></script>
<script>
function calculateInvestment() {
const reserves = parseFloat(document.getElementById('reserveAmount').value) || 0;
const currentRate = parseFloat(document.getElementById('currentReturn').value) || 0;
const potentialRate = parseFloat(document.getElementById('potentialReturn').value) || 0;
const yearlyGain = reserves * ((potentialRate - currentRate) / 100);
const totalGain = yearlyGain * 10;
document.getElementById('yearlyGain').textContent = yearlyGain.toLocaleString('en-US', {minimumFractionDigits: 0, maximumFractionDigits: 0});
document.getElementById('totalGain').textContent = totalGain.toLocaleString('en-US', {minimumFractionDigits: 0, maximumFractionDigits: 0});
document.getElementById('investCalcResults').style.display = 'block';
if (typeof gtag !== 'undefined') {
gtag('event', 'calculator_submit', {
'event_category': 'conversion',
'event_label': 'Investment Calculator'
});
}
}
</script>
<!-- Support Chat Widget -->
<script>
(function(d,t) {
var BASE_URL="https://chat.hoaledgeriq.com";
var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src=BASE_URL+"/packs/js/sdk.js";
g.async = true;
s.parentNode.insertBefore(g,s);
g.onload=function(){
window.chatwootSDK.run({
websiteToken: '1QMW1fycL5xHvd6XMfg4Dbb4',
baseUrl: BASE_URL
})
}
})(document,"script");
</script>
</body>
</html>

415
reserve-study-software.html
View File

@@ -7,6 +7,8 @@
<meta name="description" content="Modernize your HOA reserve studies with AI-powered continuous planning. Replace static 5-year studies with dynamic, real-time reserve funding analysis. Free preview access.">
<meta name="keywords" content="HOA reserve study software, reserve study analysis, HOA capital planning, HOA asset management, reserve funding calculator">
<link rel="canonical" href="https://www.hoaledgeriq.com/reserve-study-software" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="styles.css" />
<!-- Google tag (gtag.js) -->
@@ -19,181 +21,264 @@
</script>
</head>
<body>
<!-- Navigation -->
<nav class="navbar">
<div class="container">
<img src="logo_house_transparent.svg" alt="HOA LedgerIQ" class="logo-img" />
<div class="nav-links">
<a href="index.html">Home</a>
<a href="#features">Features</a>
<a href="#comparison">Comparison</a>
<a href="#pricing">Pricing</a>
<a href="index.html#preview-signup" class="btn btn-primary nav-btn">Get Early Access</a>
</div>
</div>
</nav>
<!-- Hero Section -->
<section class="hero reserve-study-hero">
<div class="container">
<div class="hero-badge">AI-Powered Reserve Planning</div>
<h1 class="hero-headline">
HOA Reserve Study Software<br />
<span class="gradient-text">That Actually Works</span>
</h1>
<p class="hero-sub">
Replace outdated, static reserve studies with AI-powered continuous planning.
Get real-time funding analysis, capital project forecasts, and confidence
that your HOA is financially prepared.
</p>
<div class="hero-actions">
<a href="index.html#preview-signup" class="btn btn-primary btn-lg">Start Free Preview</a>
<a href="#comparison" class="btn btn-ghost btn-lg">See Comparison →</a>
</div>
<div class="hero-trust">
<p>✓ No credit card required &nbsp; ✓ 14-day free trial &nbsp; ✓ Cancel anytime</p>
</div>
</div>
</section>
<!-- COMING SOON BANNER -->
<div class="coming-soon-banner">
<span class="banner-badge" id="bannerCountdown">Launching Soon</span>
<span class="banner-text">HOA LedgerIQ is almost here — be first in line.</span>
<a href="index.html#preview-signup" class="banner-cta">Get Early Access →</a>
</div>
<!-- Problem Section -->
<section class="problem-section">
<div class="container">
<h2>The Problem with Traditional Reserve Studies</h2>
<div class="problem-grid">
<div class="problem-card">
<div class="problem-icon">📅</div>
<h3>Outdated Immediately</h3>
<p>Traditional studies are static snapshots. By the time you get the report, it's already outdated. Construction costs change, emergencies happen, and your study doesn't adapt.</p>
</div>
<div class="problem-card">
<div class="problem-icon">💸</div>
<h3>Expensive & Infrequent</h3>
<p>Professional reserve studies cost $1,500-$5,000 and are only done every 3-5 years. That's like navigating with a 5-year-old map.</p>
</div>
<div class="problem-card">
<div class="problem-icon">📊</div>
<h3>Spreadsheet Chaos</h3>
<p>Most HOAs track reserves in spreadsheets that are error-prone, hard to update, and impossible to share with the board in real-time.</p>
</div>
<div class="problem-card">
<div class="problem-icon">😰</div>
<h3>Surprise Special Assessments</h3>
<p>Without continuous monitoring, HOAs often discover funding shortfalls too late, leading to emergency special assessments that homeowners hate.</p>
</div>
<!-- NAV -->
<nav class="nav">
<div class="nav-inner">
<a href="index.html" class="nav-logo">
<img src="logo_house_transparent.svg" alt="HOA LedgerIQ" class="logo-img" />
</a>
<ul class="nav-links">
<li><a href="index.html">Home</a></li>
<li><a href="#features">Features</a></li>
<li><a href="#comparison">Comparison</a></li>
<li><a href="index.html#pricing">Pricing</a></li>
</ul>
<a href="index.html#preview-signup" class="btn btn-primary nav-btn">Get Early Access</a>
<a href="https://app.hoaledgeriq.com" class="btn btn-outline nav-btn nav-login" target="_blank" rel="noopener">Login</a>
</div>
</nav>
<!-- HERO -->
<section class="hero">
<div class="hero-glow"></div>
<div class="container">
<div class="hero-badge">
<span class="pulse-dot"></span>
AI-Powered Reserve Planning
</div>
<h1 class="hero-headline">
HOA Reserve Study Software<br />
<span class="gradient-text">That Actually Works</span>
</h1>
<p class="hero-sub">
Replace outdated, static reserve studies with AI-powered continuous planning.
Get real-time funding analysis, capital project forecasts, and the confidence
that your HOA is financially prepared — year round.
</p>
<div class="hero-actions">
<a href="index.html#preview-signup" class="btn btn-primary btn-lg">Start Free Preview</a>
<a href="#comparison" class="btn btn-ghost btn-lg">See Comparison →</a>
</div>
<div class="hero-trust">
<p>✓ No credit card required &nbsp;&nbsp; ✓ 30-day free trial &nbsp;&nbsp; ✓ Cancel anytime</p>
</div>
</div>
<!-- Screenshot Carousel -->
<div class="hero-visual">
<div class="screenshot-carousel" id="screenshotCarousel">
<div class="carousel-frame">
<div class="carousel-slides">
<div class="carousel-slide active">
<img src="img/screenshot-dashboard.png" alt="HOA LedgerIQ Dashboard — Fund health scores, operating and reserve balances" />
<div class="slide-caption">Dashboard — Fund Health &amp; At-a-Glance Metrics</div>
</div>
</div>
</section>
<!-- Solution Section -->
<section class="solution-section">
<div class="container">
<h2 class="section-title">The AI-Powered Alternative</h2>
<p class="section-sub">HOA LedgerIQ replaces your static reserve study with dynamic, continuous planning that adapts to real-world changes.</p>
<div class="solution-grid">
<div class="solution-card">
<div class="solution-icon">🤖</div>
<h3>Continuous Monitoring</h3>
<p>Real-time tracking of reserve balances, expenses, and funding levels. Get alerts before problems become crises.</p>
</div>
<div class="solution-card">
<div class="solution-icon">📈</div>
<h3>Dynamic Forecasting</h3>
<p>AI-powered projections that adjust based on actual spending, inflation, and construction cost trends.</p>
</div>
<div class="solution-card">
<div class="solution-icon">🎯</div>
<h3>Smart Recommendations</h3>
<p>Get actionable insights: "Increase monthly reserves by $X" or "Delay roof project by 6 months to optimize cash flow."</p>
</div>
<div class="solution-card">
<div class="solution-icon">📱</div>
<h3>Board-Ready Reports</h3>
<p>Generate professional reserve funding reports in seconds, not hours. Perfect for board meetings and homeowner communications.</p>
</div>
<div class="carousel-slide">
<img src="img/screenshot-cashflow.png" alt="HOA LedgerIQ Cash Flow — Projected balances with forward forecasting chart" />
<div class="slide-caption">Cash Flow — Actuals &amp; Forward Projections</div>
</div>
</div>
</section>
<!-- Comparison Section -->
<section id="comparison" class="comparison-section">
<div class="container">
<h2>Traditional vs. AI-Powered Reserve Studies</h2>
<div class="comparison-table">
<div class="comparison-row header">
<div class="comparison-feature">Feature</div>
<div class="comparison-traditional">Traditional Study</div>
<div class="comparison-ai">HOA LedgerIQ</div>
</div>
<div class="comparison-row">
<div class="comparison-feature">Update Frequency</div>
<div class="comparison-traditional">Every 3-5 years</div>
<div class="comparison-ai">Real-time ✓</div>
</div>
<div class="comparison-row">
<div class="comparison-feature">Cost</div>
<div class="comparison-traditional">$1,500-$5,000</div>
<div class="comparison-ai">$99/month ✓</div>
</div>
<div class="comparison-row">
<div class="comparison-feature">Accuracy</div>
<div class="comparison-traditional">Static snapshot</div>
<div class="comparison-ai">Dynamic AI adjustments ✓</div>
</div>
<div class="comparison-row">
<div class="comparison-feature">Board Reports</div>
<div class="comparison-traditional">Manual creation</div>
<div class="comparison-ai">One-click generation ✓</div>
</div>
<div class="comparison-row">
<div class="comparison-feature">Alerts</div>
<div class="comparison-traditional">None</div>
<div class="comparison-ai">Proactive notifications ✓</div>
</div>
<div class="comparison-row">
<div class="comparison-feature">Special Assessment Prevention</div>
<div class="comparison-traditional">Reactive</div>
<div class="comparison-ai">Predictive ✓</div>
</div>
<div class="carousel-slide">
<img src="img/screenshot-capital.png" alt="HOA LedgerIQ Capital Planning — Multi-year project timeline and budget view" />
<div class="slide-caption">Capital Planning — 5-Year Project Pipeline</div>
</div>
</div>
</div>
</section>
<!-- Calculator Section -->
<section class="calculator-section">
<div class="container">
<h2>Calculate Your Reserve Funding Needs</h2>
<p>See how much your HOA should have in reserves with our free calculator.</p>
<a href="index.html#calculator" class="btn btn-primary btn-lg">Open Reserve Calculator</a>
<div class="carousel-controls">
<button class="carousel-btn carousel-prev" aria-label="Previous screenshot">&#8592;</button>
<div class="carousel-dots">
<span class="carousel-dot active" data-index="0"></span>
<span class="carousel-dot" data-index="1"></span>
<span class="carousel-dot" data-index="2"></span>
</div>
<button class="carousel-btn carousel-next" aria-label="Next screenshot">&#8594;</button>
</div>
</section>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="cta-section">
<div class="container">
<h2>Ready to Modernize Your Reserve Planning?</h2>
<p>Join forward-thinking HOAs that have replaced outdated reserve studies with AI-powered continuous planning.</p>
<div class="cta-form">
<a href="index.html#preview-signup" class="btn btn-primary btn-lg">Start Your Free 30-Day Trial</a>
<p class="cta-note">No credit card required • Cancel anytime • Free preview access</p>
</div>
<!-- PROBLEM SECTION -->
<section class="problem-section">
<div class="container">
<h2>The Problem with Traditional Reserve Studies</h2>
<div class="problem-grid">
<div class="problem-card">
<div class="problem-icon">📅</div>
<h3>Outdated Immediately</h3>
<p>Traditional studies are static snapshots. By the time you get the report, it's already outdated. Construction costs change, emergencies happen, and your study doesn't adapt.</p>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="container">
<p>&copy; 2026 HOA LedgerIQ. All rights reserved.</p>
<div class="footer-links">
<a href="index.html">Home</a>
<a href="index.html#features">Features</a>
<a href="index.html#pricing">Pricing</a>
<a href="index.html#contact">Contact</a>
</div>
<div class="problem-card">
<div class="problem-icon">💸</div>
<h3>Expensive &amp; Infrequent</h3>
<p>Professional reserve studies cost $1,500–$5,000 and are only done every 3–5 years. That's like navigating with a 5-year-old map.</p>
</div>
</footer>
<div class="problem-card">
<div class="problem-icon">📊</div>
<h3>Spreadsheet Chaos</h3>
<p>Most HOAs track reserves in spreadsheets that are error-prone, hard to update, and impossible to share with the board in real-time.</p>
</div>
<div class="problem-card">
<div class="problem-icon">😰</div>
<h3>Surprise Special Assessments</h3>
<p>Without continuous monitoring, HOAs often discover funding shortfalls too late, leading to emergency special assessments that homeowners hate.</p>
</div>
</div>
</div>
</section>
<script src="app.js"></script>
<!-- SOLUTION SECTION -->
<section id="features" class="solution-section">
<div class="container">
<div class="section-label">The AI-Powered Alternative</div>
<h2 class="section-title">Continuous Planning That Adapts</h2>
<p class="section-sub">HOA LedgerIQ replaces your static reserve study with dynamic, continuous planning that adjusts to real-world changes automatically.</p>
<div class="solution-grid">
<div class="solution-card">
<div class="solution-icon">🤖</div>
<h3>Continuous Monitoring</h3>
<p>Real-time tracking of reserve balances, expenses, and funding levels. Get alerts before problems become crises.</p>
</div>
<div class="solution-card">
<div class="solution-icon">📈</div>
<h3>Dynamic Forecasting</h3>
<p>AI-powered projections that adjust based on actual spending, inflation, and construction cost trends.</p>
</div>
<div class="solution-card">
<div class="solution-icon">🎯</div>
<h3>Smart Recommendations</h3>
<p>Get actionable insights: "Increase monthly reserves by $X" or "Delay roof project by 6 months to optimize cash flow."</p>
</div>
<div class="solution-card">
<div class="solution-icon">📱</div>
<h3>Board-Ready Reports</h3>
<p>Generate professional reserve funding reports in seconds, not hours. Perfect for board meetings and homeowner communications.</p>
</div>
</div>
</div>
</section>
<!-- COMPARISON SECTION -->
<section id="comparison" class="comparison-section">
<div class="container">
<h2>Traditional vs. AI-Powered Reserve Studies</h2>
<div class="comparison-table">
<div class="comparison-row header">
<div class="comparison-feature">Feature</div>
<div class="comparison-traditional">Traditional Study</div>
<div class="comparison-ai">HOA LedgerIQ</div>
</div>
<div class="comparison-row">
<div class="comparison-feature">Update Frequency</div>
<div class="comparison-traditional">Every 3–5 years</div>
<div class="comparison-ai">Real-time ✓</div>
</div>
<div class="comparison-row">
<div class="comparison-feature">Cost</div>
<div class="comparison-traditional">$1,500–$5,000</div>
<div class="comparison-ai">From $29/month ✓</div>
</div>
<div class="comparison-row">
<div class="comparison-feature">Accuracy</div>
<div class="comparison-traditional">Static snapshot</div>
<div class="comparison-ai">Dynamic AI adjustments ✓</div>
</div>
<div class="comparison-row">
<div class="comparison-feature">Board Reports</div>
<div class="comparison-traditional">Manual creation</div>
<div class="comparison-ai">One-click generation ✓</div>
</div>
<div class="comparison-row">
<div class="comparison-feature">Alerts</div>
<div class="comparison-traditional">None</div>
<div class="comparison-ai">Proactive notifications ✓</div>
</div>
<div class="comparison-row">
<div class="comparison-feature">Special Assessment Prevention</div>
<div class="comparison-traditional">Reactive</div>
<div class="comparison-ai">Predictive ✓</div>
</div>
</div>
</div>
</section>
<!-- CALCULATOR CTA SECTION -->
<section class="calculator-section">
<div class="container">
<h2>Calculate Your Reserve Funding Needs</h2>
<p>See how much your HOA should have in reserves with our free AI-powered calculator.</p>
<a href="index.html#preview-signup" class="btn btn-primary btn-lg">Open Reserve Calculator</a>
</div>
</section>
<!-- CTA SECTION -->
<section class="cta-section">
<div class="container">
<h2>Ready to Modernize Your Reserve Planning?</h2>
<p>Join forward-thinking HOAs that have replaced outdated reserve studies with AI-powered continuous planning.</p>
<div class="cta-form">
<a href="index.html#preview-signup" class="btn btn-primary btn-lg">Start Your Free 30-Day Trial</a>
<p class="cta-note">No credit card required &nbsp;·&nbsp; Cancel anytime &nbsp;·&nbsp; Free preview access</p>
</div>
</div>
</section>
<!-- FOOTER -->
<footer class="footer">
<div class="container footer-inner">
<div class="footer-logo">
<img src="logo_house.svg" alt="HOA LedgerIQ" class="logo-img logo-img--footer" />
<p>AI-powered HOA reserve study &amp; finance management.</p>
</div>
<div class="footer-links">
<div class="footer-col">
<div class="footer-col-title">Product</div>
<a href="index.html#features">Features</a>
<a href="index.html#pricing">Pricing</a>
<a href="index.html#preview-signup">Early Access</a>
</div>
<div class="footer-col">
<div class="footer-col-title">Pages</div>
<a href="investment-management.html">Investment Management</a>
<a href="reserve-study-software.html">Reserve Studies</a>
</div>
<div class="footer-col">
<div class="footer-col-title">Legal</div>
<a href="privacy.html">Privacy Policy</a>
<a href="terms.html">Terms of Service</a>
</div>
</div>
</div>
<div class="footer-bottom">
<div class="container">
<span>&copy; 2026 HOA LedgerIQ. All rights reserved.</span>
</div>
</div>
</footer>
<script src="app.js"></script>
<!-- Support Chat Widget -->
<script>
(function(d,t) {
var BASE_URL="https://chat.hoaledgeriq.com";
var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src=BASE_URL+"/packs/js/sdk.js";
g.async = true;
s.parentNode.insertBefore(g,s);
g.onload=function(){
window.chatwootSDK.run({
websiteToken: '1QMW1fycL5xHvd6XMfg4Dbb4',
baseUrl: BASE_URL
})
}
})(document,"script");
</script>
</body>
</html>

251
styles.css
View File

@@ -1047,3 +1047,254 @@ body {
.banner-text { display: none; }
.dash-body { grid-template-columns: 1fr; }
}
/* =============================================
SEO Landing Pages — Shared Component Styles
============================================= */
/* ---- Problem Section ---- */
.problem-section { padding: 80px 0; }
.problem-section h2 {
font-size: clamp(24px, 3.5vw, 40px);
font-weight: 800;
color: #fff;
text-align: center;
letter-spacing: -0.02em;
margin-bottom: 48px;
}
.problem-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.problem-card {
background: var(--gray-800);
border: 1px solid rgba(255,255,255,0.07);
border-radius: var(--radius);
padding: 28px;
transition: transform 0.18s, box-shadow 0.18s;
}
.problem-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.problem-icon { font-size: 32px; margin-bottom: 14px; }
.problem-card h3 { font-size: 16px; font-weight: 700; color: #fff; margin-bottom: 10px; }
.problem-card p { font-size: 14px; color: var(--gray-400); line-height: 1.65; }
/* ---- Solution Section ---- */
.solution-section {
background: linear-gradient(180deg, rgba(79,70,229,0.07) 0%, transparent 100%);
border-top: 1px solid rgba(255,255,255,0.06);
border-bottom: 1px solid rgba(255,255,255,0.06);
padding: 80px 0;
text-align: center;
}
.solution-section .section-title { margin-bottom: 12px; }
.solution-section .section-sub { margin: 0 auto 48px; }
.solution-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
text-align: left;
}
.solution-card {
background: var(--gray-800);
border: 1px solid rgba(255,255,255,0.07);
border-radius: var(--radius);
padding: 28px;
transition: transform 0.18s, box-shadow 0.18s;
}
.solution-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.solution-icon { font-size: 28px; margin-bottom: 14px; }
.solution-card h3 { font-size: 16px; font-weight: 700; color: #fff; margin-bottom: 10px; }
.solution-card p { font-size: 14px; color: var(--gray-400); line-height: 1.65; }
/* ---- Comparison Section ---- */
.comparison-section { padding: 80px 0; }
.comparison-section h2 {
font-size: clamp(24px, 3vw, 38px);
font-weight: 800;
color: #fff;
text-align: center;
letter-spacing: -0.02em;
margin-bottom: 48px;
}
.comparison-table {
border: 1px solid rgba(255,255,255,0.08);
border-radius: var(--radius-lg);
overflow: hidden;
}
.comparison-row {
display: grid;
grid-template-columns: 2fr 1.5fr 1.5fr;
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.comparison-row:last-child { border-bottom: none; }
.comparison-row.header {
background: var(--gray-800);
}
.comparison-row.header > div {
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--gray-500);
}
.comparison-feature,
.comparison-traditional,
.comparison-ai { padding: 16px 20px; font-size: 14px; }
.comparison-feature { color: var(--gray-200); font-weight: 500; }
.comparison-traditional { color: var(--gray-600); }
.comparison-ai { color: var(--green); font-weight: 600; }
.comparison-row:not(.header) { background: var(--gray-900); }
.comparison-row:not(.header):hover { background: rgba(255,255,255,0.02); }
/* ---- Inline Calculator Section (investment page) ---- */
.calculator-section {
padding: 80px 0;
text-align: center;
background: rgba(255,255,255,0.02);
border-top: 1px solid rgba(255,255,255,0.06);
}
.calculator-section h2 {
font-size: clamp(22px, 3vw, 36px);
font-weight: 800;
color: #fff;
letter-spacing: -0.02em;
margin-bottom: 12px;
}
.calculator-section > .container > p {
font-size: 16px;
color: var(--gray-400);
margin-bottom: 28px;
}
.calc-wrapper {
max-width: 560px;
margin: 0 auto;
background: var(--gray-800);
border: 1px solid rgba(255,255,255,0.08);
border-radius: var(--radius-lg);
padding: 36px;
text-align: left;
}
.calc-input-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.calc-input-group label { font-size: 13px; font-weight: 600; color: var(--gray-400); }
.calc-input-group input {
background: var(--gray-900);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 8px;
padding: 12px 14px;
color: var(--gray-100);
font-size: 15px;
font-family: inherit;
width: 100%;
outline: none;
transition: border-color 0.15s;
}
.calc-input-group input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37,99,235,0.2); }
.calc-input-group input::placeholder { color: var(--gray-700); }
.calc-results {
margin-top: 24px;
padding: 28px;
background: linear-gradient(135deg, rgba(79,70,229,0.15), rgba(14,165,233,0.1));
border: 1px solid rgba(79,70,229,0.35);
border-radius: var(--radius);
text-align: center;
}
.calc-results h3 { font-size: 15px; font-weight: 700; color: var(--gray-300); margin-bottom: 10px; }
.calc-results .result-highlight {
font-size: 40px;
font-weight: 900;
color: var(--green);
letter-spacing: -0.03em;
margin-bottom: 8px;
}
.calc-results p { font-size: 14px; color: var(--gray-400); margin-bottom: 20px; }
/* ---- CTA Section ---- */
.cta-section {
padding: 100px 0;
text-align: center;
background: linear-gradient(180deg, transparent 0%, rgba(79,70,229,0.08) 100%);
border-top: 1px solid rgba(255,255,255,0.06);
}
.cta-section h2 {
font-size: clamp(24px, 3.5vw, 42px);
font-weight: 800;
color: #fff;
letter-spacing: -0.025em;
margin-bottom: 16px;
}
.cta-section > .container > p {
font-size: 18px;
color: var(--gray-400);
margin-bottom: 36px;
max-width: 560px;
margin-left: auto;
margin-right: auto;
}
.cta-form { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.cta-note { font-size: 13px; color: var(--gray-600); }
/* ---- Investment Strategies Section ---- */
.strategies-section { padding: 80px 0; }
.strategies-section h2 {
font-size: clamp(24px, 3vw, 38px);
font-weight: 800;
color: #fff;
text-align: center;
letter-spacing: -0.02em;
margin-bottom: 48px;
}
.strategy-card {
background: var(--gray-800);
border: 1px solid rgba(255,255,255,0.08);
border-radius: var(--radius-lg);
padding: 36px;
margin-bottom: 20px;
border-left-width: 4px;
}
.strategy-card h3 { font-size: 20px; font-weight: 800; color: #fff; margin-bottom: 10px; }
.strategy-card > p { font-size: 14px; color: var(--gray-400); margin-bottom: 20px; }
.strategy-card ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.strategy-card ul li { font-size: 14px; color: var(--gray-400); line-height: 1.5; }
.strategy-card ul li strong { color: var(--gray-200); }
.strategy-card.conservative { border-left-color: var(--green); }
.strategy-card.moderate { border-left-color: var(--blue); }
.strategy-card.aggressive { border-left-color: var(--amber); }
/* ---- Compliance Section ---- */
.compliance-section {
background: rgba(255,255,255,0.02);
border-top: 1px solid rgba(255,255,255,0.06);
padding: 80px 0;
}
.compliance-section h2 {
font-size: clamp(22px, 3vw, 36px);
font-weight: 800;
color: #fff;
letter-spacing: -0.02em;
margin-bottom: 12px;
}
.compliance-section > .container > p {
font-size: 16px;
color: var(--gray-400);
margin-bottom: 28px;
}
.compliance-list { list-style: none; display: flex; flex-direction: column; gap: 12px; max-width: 440px; }
.compliance-list li { font-size: 16px; color: var(--gray-300); font-weight: 500; }
/* ---- SEO Page Responsive ---- */
@media (max-width: 900px) {
.problem-grid { grid-template-columns: repeat(2, 1fr); }
.solution-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
.problem-grid { grid-template-columns: 1fr; }
.solution-grid { grid-template-columns: 1fr; }
.comparison-row { grid-template-columns: 1fr; }
.comparison-row.header { display: none; }
.comparison-feature { font-weight: 700; background: rgba(255,255,255,0.03); border-bottom: 1px solid rgba(255,255,255,0.04); }
.comparison-traditional::before { content: 'Traditional: '; color: var(--gray-600); font-size: 12px; display: block; margin-bottom: 2px; }
.comparison-ai::before { content: 'HOA LedgerIQ: '; color: var(--blue); font-size: 12px; display: block; margin-bottom: 2px; }
.calc-wrapper { padding: 24px 20px; }
.strategy-card { padding: 24px; }
}