/* Reset and base styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
line-height: 1.6;
color: #fff !important;
background-color: #151e2e !important;
overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 {
color: #fff !important;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-weight: 800;
letter-spacing: -1px;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
background: transparent !important;
}
/* Navigation */
.navbar {
position: fixed;
top: 0;
width: 100%;
background: rgba(21, 30, 46, 0.95) !important;
backdrop-filter: blur(10px);
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
z-index: 1000;
padding: 0;
transition: all 0.3s ease;
}
.nav-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
height: 80px;
}
.nav-logo {
flex-shrink: 0;
}
.nav-logo a {
display: flex;
align-items: center;
text-decoration: none;
}
.nav-menu {
display: flex;
gap: 2.5rem;
align-items: center;
}
.nav-menu a {
text-decoration: none;
color: #e2e8f0;
font-weight: 500;
font-size: 1rem;
letter-spacing: 0.01em;
transition: all 0.3s ease;
position: relative;
padding: 0.5rem 0;
}
.nav-menu a:hover {
color: #1e40af;
transform: translateY(-1px);
}
.nav-menu a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%);
transition: width 0.3s ease;
}
.nav-menu a:hover::after {
width: 100%;
}
.nav-menu a.active {
color: #1e40af;
}
.nav-menu a.active::after {
width: 100%;
}
.nav-buttons {
display: flex;
gap: 1rem;
align-items: center;
}
.nav-buttons .btn-primary {
padding: 0.75rem 1.5rem;
font-size: 0.9rem;
font-weight: 600;
}
/* Mobile Navigation */
.nav-hamburger {
display: none;
background: none;
border: none;
color: #e2e8f0;
font-size: 1.5rem;
cursor: pointer;
padding: 0.5rem;
border-radius: 8px;
transition: all 0.3s ease;
z-index: 1001;
}
.nav-hamburger:hover {
background: rgba(255, 255, 255, 0.1);
color: #1e40af;
}
.nav-mobile-menu {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100vw !important;
height: 100vh !important;
display: flex !important;
flex-direction: column !important;
overflow: hidden !important;
z-index: 2000 !important;
background: rgba(21,30,46,0.95) !important;
backdrop-filter: blur(16px) !important;
box-shadow: 0 8px 32px rgba(0,0,0,0.25) !important;
}
.nav-mobile-scroll {
flex: 1 1 0 !important;
min-height: 0 !important;
display: flex !important;
flex-direction: column !important;
overflow-y: auto !important;
padding-bottom: 0 !important;
}
.nav-mobile-header {
display: flex; justify-content: space-between; align-items: center;
padding: 2rem 1.5rem 1rem 1.5rem;
}
.nav-logo-mobile {
height: 40px;
}
.nav-logo-mobile img {
height: 40px; width: auto;
}
.nav-mobile-close {
background: rgba(255,255,255,0.08); border: none; border-radius: 50%;
width: 44px; height: 44px; font-size: 2rem; color: #fff;
display: flex; align-items: center; justify-content: center;
transition: background 0.2s, color 0.2s;
}
.nav-mobile-close:hover {
background: rgba(255,255,255,0.18); color: #ef4444;
}
.nav-mobile-links {
display: flex; flex-direction: column; gap: 1rem;
padding: 1.5rem 1.5rem 0 1.5rem;
}
.nav-mobile-links a {
display: flex; align-items: center; gap: 1rem;
font-size: 1.1rem; font-weight: 600; color: #e2e8f0;
padding: 0.875rem 1rem; border-radius: 10px;
transition: background 0.2s, color 0.2s, transform 0.15s;
text-decoration: none;
}
.nav-mobile-links a:hover {
background: rgba(30,64,175,0.10); color: #1e40af; transform: translateX(6px);
}
.nav-mobile-links a i {
font-size: 1.3rem; width: 28px; text-align: center;
}
.nav-mobile-actions {
display: flex; flex-direction: column; gap: 1rem;
padding: 1.5rem; border-top: 1px solid rgba(255,255,255,0.08);
margin-top: auto; background: rgba(21,30,46,0.98);
position: sticky; bottom: 0; backdrop-filter: blur(10px);
}
.btn-mobile {
width: 100%; padding: 1rem 0; font-size: 1rem; font-weight: 700;
border-radius: 12px; border: none; text-align: center; cursor: pointer;
transition: background 0.2s, color 0.2s, box-shadow 0.2s;
display: inline-block;
}
.btn-mobile.btn-primary {
background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
color: #fff; box-shadow: 0 2px 12px rgba(30,64,175,0.18);
}
.btn-mobile.btn-primary:hover { background: #1e40af; }
.btn-mobile.btn-outline {
background: transparent; color: #2563eb; border: 2px solid #2563eb;
}
.btn-mobile.btn-outline:hover {
background: rgba(37,99,235,0.08); color: #1e40af;
}
/* Remove old conflicting mobile menu styles below this line */
/* Responsive Design */
@media (max-width: 768px) {
.nav-menu {
display: none;
}
.nav-buttons {
display: none;
}
.nav-hamburger {
display: block;
}
.nav-container {
height: 70px;
padding: 0 1rem;
}
}
@media (min-width: 769px) {
.nav-mobile-menu {
display: none !important;
}
.nav-hamburger {
display: none !important;
}
}
/* Buttons */
.btn-primary, .btn-secondary, .btn-outline {
padding: 0.75rem 1.5rem;
border: none;
border-radius: 12px;
font-weight: 600;
font-size: 0.9rem;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
display: inline-block;
text-align: center;
}
.btn-primary {
background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%) !important;
color: #fff !important;
border-radius: 12px;
font-size: 1.1rem;
font-weight: 700;
box-shadow: none;
padding: 1rem 2.5rem;
}
.btn-primary:hover {
background: linear-gradient(135deg, #1e3a8a 0%, #1e1b4b 100%) !important;
color: #fff !important;
}
.btn-secondary {
background: transparent;
color: #ffffff;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.btn-secondary:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.3);
}
.btn-outline {
border-radius: 12px;
font-size: 1.1rem;
font-weight: 700;
border: 1px solid #1e40af !important;
color: #fff !important;
background: transparent !important;
padding: 1rem 2.5rem;
transition: background 0.2s, color 0.2s;
}
.btn-outline:hover {
background: rgba(30, 64, 175, 0.1) !important;
color: #fff !important;
border-color: #1e3a8a !important;
}
.btn-large {
font-size: 1.2rem;
padding: 1.1rem 2.7rem;
}
.btn-full {
width: 100%;
margin-top: 1rem;
}
/* Hero Section */
.hero {
position: relative;
padding: 120px 0 80px;
background: linear-gradient(135deg, #151e2e 0%, #1a2332 50%, #151e2e 100%) !important;
min-height: 70vh;
display: flex;
align-items: center;
overflow: hidden;
color: #fff !important;
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 30% 20%, rgba(59, 230, 143, 0.05) 0%, transparent 50%),
radial-gradient(circle at 70% 80%, rgba(30, 64, 175, 0.05) 0%, transparent 50%);
pointer-events: none;
}
.hero-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
text-align: center;
position: relative;
z-index: 2;
}
.hero-content h1 {
font-size: 3.5rem;
font-weight: 900;
line-height: 1.1;
margin-bottom: 1.5rem;
color: #fff !important;
background: linear-gradient(135deg, #ffffff 0%, #3be68f 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
display: block;
text-align: center;
letter-spacing: -0.02em;
text-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
animation: fadeInUp 0.8s ease-out;
}
.hero-content p {
font-size: 1.25rem;
color: #cbd5e1 !important;
margin-bottom: 2.5rem;
max-width: 800px;
margin-left: auto;
margin-right: auto;
line-height: 1.6;
text-align: center;
font-weight: 400;
opacity: 0.9;
animation: fadeInUp 0.8s ease-out 0.2s both;
}
/* Desktop: Centered, horizontal, larger badges */
.hero-badges {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 1.5rem;
margin-bottom: 2rem;
animation: fadeInUp 0.8s ease-out 0.1s both;
}
/* Mobile: Smaller, side by side */
@media (max-width: 600px) {
.hero-badges {
gap: 10px !important;
}
.badge {
font-size: 0.95rem !important;
padding: 8px 14px !important;
min-width: unset !important;
margin: 0 !important;
flex: 1 1 0;
display: flex;
align-items: center;
justify-content: center;
}
}
.badge {
background: rgba(30, 64, 175, 0.1);
color: #3be68f !important;
border: 1px solid rgba(59, 230, 143, 0.2);
border-radius: 999px;
padding: 0.5rem 1.5rem;
font-size: 0.95rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 0.5rem;
box-shadow: 0 2px 12px rgba(59, 230, 143, 0.1);
backdrop-filter: blur(10px);
transition: all 0.3s ease;
}
.badge:hover {
background: rgba(30, 64, 175, 0.15);
border-color: rgba(59, 230, 143, 0.3);
transform: translateY(-2px);
box-shadow: 0 4px 20px rgba(59, 230, 143, 0.2);
}
.hero-stats {
display: flex;
gap: 2rem;
justify-content: center;
margin-bottom: 3rem;
background: none;
border: none;
padding: 0;
animation: fadeInUp 0.8s ease-out 0.3s both;
}
.stat-item {
background: rgba(30, 35, 54, 0.8) !important;
color: #fff !important;
border: 1px solid rgba(59, 230, 143, 0.1);
border-radius: 16px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
padding: 1.5rem 2.5rem;
display: flex;
flex-direction: column;
align-items: center;
min-width: 140px;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}
.stat-item:hover {
background: rgba(30, 35, 54, 0.9) !important;
border-color: rgba(59, 230, 143, 0.2);
transform: translateY(-4px);
box-shadow: 0 8px 30px rgba(59, 230, 143, 0.15);
}
.stat-number {
font-size: 2.1rem;
font-weight: 800;
color: #3be68f !important;
margin-bottom: 0.2rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.stat-label {
font-size: 1rem;
color: #e0e0e0 !important;
font-weight: 500;
text-align: center;
}
.btn-primary {
background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%) !important;
color: #fff !important;
border-radius: 12px;
font-size: 1.1rem;
font-weight: 700;
box-shadow: none;
padding: 1rem 2.5rem;
}
.btn-primary:hover {
background: linear-gradient(135deg, #1e3a8a 0%, #1e1b4b 100%) !important;
color: #fff !important;
}
.btn-outline {
border-radius: 12px;
font-size: 1.1rem;
font-weight: 700;
border: 1px solid #1e40af !important;
color: #fff !important;
background: transparent !important;
padding: 1rem 2.5rem;
transition: background 0.2s, color 0.2s;
}
.btn-outline:hover {
background: rgba(30, 64, 175, 0.1) !important;
color: #fff !important;
border-color: #1e3a8a !important;
}
.btn-large {
font-size: 1.2rem;
padding: 1.1rem 2.7rem;
}
.btn-full {
width: 100%;
margin-top: 1rem;
}
/* Calculator Section */
.calculator-section {
position: relative;
background: linear-gradient(135deg, #1a2332 0%, #151e2e 100%);
padding: 80px 0;
display: flex;
justify-content: center;
align-items: flex-start;
min-height: 100vh;
}
.calculator-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(30, 64, 175, 0.2), transparent);
}
.calculator-card {
background: #1b253b;
border-radius: 32px;
box-shadow: 0 8px 40px 0 rgba(255,255,255,0.10), 0 1.5px 8px 0 rgba(255,255,255,0.08);
padding: 2.5rem 2.5rem 2rem 2.5rem;
max-width: 1100px;
width: 100%;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
}
.calculator-card-content {
display: flex;
flex-direction: row;
gap: 3rem;
width: 100%;
align-items: flex-start;
justify-content: center;
}
.calculator-form {
background: none;
box-shadow: none;
border-radius: 24px;
padding: 0;
min-width: 340px;
max-width: 380px;
width: 100%;
}
.calculator-result {
background: none;
box-shadow: none;
border-radius: 0;
padding: 0;
min-width: 340px;
max-width: 420px;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
text-align: center;
}
.result-label {
color: #7ee6c7;
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 0.5rem;
text-align: center;
width: 100%;
}
.result-amount {
font-size: 4rem;
font-weight: 900;
margin-bottom: 2rem;
line-height: 1.1;
color: #3be68f;
text-align: center;
width: 100%;
}
.chart-in-result {
width: 100%;
max-width: 420px;
min-height: 260px;
margin: 0 0 1.5rem 0;
background: none;
border-radius: 16px;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
}
.security-badges {
display: flex;
gap: 1rem;
justify-content: center;
margin-bottom: 2rem;
}
.badge {
background: #232f47;
color: #7ee6c7;
padding: 0.5rem 1.2rem;
border-radius: 16px;
font-size: 0.95rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 0.5rem;
border: none;
}
.calculator-container {
display: grid;
grid-template-columns: 1fr 2.2fr;
gap: 3rem;
max-width: 1200px;
width: 90vw;
margin: 0 auto;
align-items: start;
}
.form-group {
margin-bottom: 1.5rem;
}
.form-group label {
color: #fff;
font-weight: 700;
margin-bottom: 0.25rem;
font-size: 1.05rem;
letter-spacing: 0.01em;
}
.form-hint {
color: #7c8ba1;
font-size: 0.95rem;
margin-bottom: 0.5rem;
}
.input-wrapper {
position: relative;
display: flex;
align-items: center;
}
.currency {
color: #7ee6c7;
left: 1rem;
font-weight: 700;
}
.input-wrapper input[type="number"],
.input-wrapper input[type="text"] {
width: 100%;
padding: 0.9rem 1.2rem 0.9rem 1.2rem;
border: none;
border-radius: 12px;
background: #232f47;
color: #fff;
font-size: 1.1rem;
margin-bottom: 0.2rem;
font-weight: 600;
box-shadow: 0 1px 2px rgba(0,0,0,0.04);
transition: box-shadow 0.2s;
}
.input-wrapper input[type="number"]:focus,
.input-wrapper input[type="text"]:focus {
outline: none;
box-shadow: 0 0 0 2px #7ee6c7;
}
.frequency-buttons {
display: flex;
gap: 0.7rem;
margin-bottom: 0.5rem;
margin-top: 0.5rem;
}
.freq-btn {
padding: 0.5rem 1.3rem;
border-radius: 999px;
border: none;
background: #232f47;
color: #fff;
font-weight: 600;
font-size: 1rem;
transition: background 0.2s, color 0.2s;
cursor: pointer;
box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.freq-btn.active, .freq-btn:focus {
background: #7ee6c7;
color: #1b253b;
}
.slider-container {
display: flex;
align-items: center;
gap: 1rem;
}
.slider-container input[type="range"] {
width: 100%;
accent-color: #7ee6c7;
margin-bottom: 0.2rem;
}
.slider-value {
color: #7ee6c7;
font-weight: 700;
font-size: 1rem;
margin-left: 0.5rem;
}
.calculator-buttons {
display: flex;
gap: 1rem;
margin-bottom: 1rem;
}
.calculator-disclaimer {
color: #7c8ba1;
font-size: 0.95rem;
margin-top: 0.5rem;
text-align: center;
}
.share-btn {
background: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.3);
color: #ffffff;
padding: 0.75rem 1.5rem;
border-radius: 12px;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 0.5rem;
font-weight: 600;
margin: 0 auto;
margin-bottom: 0;
}
.share-btn:hover {
background: rgba(255, 255, 255, 0.3);
transform: translateY(-2px);
}
/* Calculator Results Section */
.calculator-results {
padding: 60px 0;
background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%);
}
.results-container {
display: flex;
justify-content: center;
align-items: center;
}
.results-cta {
text-align: center;
padding: 2rem;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 20px;
backdrop-filter: blur(10px);
}
.results-cta p {
color: #a0a0a0;
margin-bottom: 1.5rem;
font-size: 1.1rem;
}
/* Chart Container */
.chart-container {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 20px;
padding: 2rem;
margin-top: 2rem;
backdrop-filter: blur(10px);
}
.chart-title {
color: #ffffff;
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 1rem;
text-align: center;
}
/* How It Works Section */
.how-it-works-section {
position: relative;
background: linear-gradient(135deg, #151e2e 0%, #1a2332 100%);
padding: 80px 0;
text-align: center;
}
.how-it-works-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(30, 64, 175, 0.2), transparent);
z-index: 0;
}
.how-it-works-section h2 {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 3rem;
color: #ffffff;
}
.how-it-works-steps {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.how-step {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
padding: 2rem;
transition: all 0.3s ease;
animation: fadeInUp 0.6s ease-out;
}
.how-step:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
border-color: #1e40af;
}
.how-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
font-size: 1.5rem;
color: #ffffff;
}
.how-step h3 {
color: #ffffff;
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 1rem;
}
.how-step p {
color: #a0a0a0;
line-height: 1.6;
}
.how-it-works-cta {
margin-top: 3rem;
padding-top: 2rem;
}
/* Features Section */
.features {
padding: 80px 0;
background: #151e2e !important;
}
.features h2 {
font-size: 2.5rem;
font-weight: 700;
text-align: center;
margin-bottom: 3rem;
color: #ffffff;
}
.feature-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: 2rem;
}
.feature-card {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 20px;
padding: 2.5rem;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}
.feature-card:hover {
transform: translateY(-4px);
border-color: rgba(30, 64, 175, 0.3);
}
.feature-card-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
font-size: 1.5rem;
color: #ffffff;
text-align: center;
}
.feature-card h3 {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 0.5rem;
color: #ffffff;
}
.feature-card h4 {
font-size: 1.1rem;
font-weight: 500;
margin-bottom: 1rem;
color: #1e40af;
}
.feature-card ul {
list-style: none;
margin-bottom: 1.5rem;
}
.feature-card li {
color: #a0a0a0;
margin-bottom: 0.5rem;
padding-left: 1.5rem;
position: relative;
}
.feature-card li::before {
content: '✓';
position: absolute;
left: 0;
color: #1e40af;
font-weight: bold;
}
/* Cash Flow Simulator */
.cash-flow {
position: relative;
background: linear-gradient(135deg, #1a2332 0%, #151e2e 100%);
padding: 80px 0;
}
.cash-flow::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(30, 64, 175, 0.2), transparent);
}
.cash-flow h2 {
font-size: 2.5rem;
font-weight: 700;
text-align: center;
margin-bottom: 3rem;
color: #ffffff;
}
.simulator-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
align-items: start;
}
.simulator-form {
background: none;
box-shadow: none;
border: none;
border-radius: 24px;
padding: 0;
min-width: 340px;
max-width: 380px;
width: 100%;
}
.simulator-results {
background: rgba(30, 64, 175, 0.1);
border: 1px solid rgba(30, 64, 175, 0.2);
border-radius: 20px;
padding: 2.5rem;
text-align: center;
}
.simulator-results h3 {
color: #ffffff;
margin-bottom: 1rem;
font-size: 1.25rem;
}
.cash-flow-amount {
font-size: 3rem;
font-weight: 700;
color: #1e40af;
margin-bottom: 1rem;
}
.simulator-results p {
color: #a0a0a0;
margin-bottom: 2rem;
}
.metrics-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
margin-top: 2rem;
}
.metric {
text-align: center;
padding: 1.5rem;
background: rgba(255, 255, 255, 0.05);
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
}
.metric:hover {
transform: translateY(-3px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
border-color: #1e40af;
}
.metric-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1rem;
font-size: 1.5rem;
color: #ffffff;
box-shadow: 0 4px 15px rgba(30, 64, 175, 0.3);
}
.metric-content h4 {
color: #a0a0a0;
font-size: 0.9rem;
font-weight: 500;
margin-bottom: 0.5rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.metric-value {
color: #ffffff;
font-size: 1.5rem;
font-weight: 700;
display: block;
}
.metrics-note {
color: #808080;
font-size: 0.9rem;
margin-bottom: 0.5rem;
}
/* CTA Section */
.cta {
padding: 80px 0;
background: #151e2e;
text-align: center;
}
.cta h2 {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 1rem;
color: #ffffff;
}
.cta p {
font-size: 1.25rem;
color: #a0a0a0;
margin-bottom: 2rem;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.cta-buttons {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
/* Footer */
.footer, .footer-content, .footer-section, .footer-bottom {
background: #101624 !important;
color: #fff !important;
border-top: none !important;
}
.footer-content {
padding: 2rem 0 !important;
display: flex;
justify-content: space-between;
gap: 2rem;
margin-bottom: 1.5rem;
}
.footer-section {
padding: 0 2rem !important;
}
.footer-section h4 {
font-size: 1.1rem;
font-weight: 700;
margin-bottom: 1rem;
color: #1A2236;
}
.footer-section a {
color: #a0a0a0 !important;
text-decoration: none;
display: block;
margin-bottom: 0.5rem;
font-size: 1rem;
transition: color 0.2s;
}
.footer-section a:hover {
color: #1e40af !important;
}
.footer-bottom {
padding: 1.5rem 0 0 0 !important;
text-align: center;
color: #fff !important;
font-size: 0.95rem;
margin-top: 0;
}
/* Responsive Design */
@media (max-width: 900px) {
.calculator-card-content {
flex-direction: column;
gap: 2rem;
align-items: center;
}
.calculator-form, .calculator-result {
min-width: unset;
max-width: 100%;
width: 100%;
}
.result-label {
font-size: 1.2rem;
}
.result-amount {
font-size: 2.2rem;
margin-bottom: 1.2rem;
}
.chart-in-result {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
height: 140px !important;
box-sizing: border-box;
margin-left: 0;
}
.calculator-result, .simulator-result-card {
max-width: 100% !important;
width: 100% !important;
min-width: 0 !important;
}
.nav-container {
justify-content: space-between;
gap: 1rem;
padding-left: 10px;
padding-right: 10px;
}
.nav-buttons {
gap: 0.5rem;
}
.security-badges {
flex-direction: column;
align-items: center;
gap: 0.75rem;
}
.badge {
width: 100%;
max-width: 300px;
margin: 0 auto;
text-align: center;
}
}
@media (max-width: 768px) {
.hero-content h1 {
font-size: 2.5rem;
margin-bottom: 1.2rem;
padding: 0 1rem;
}
.hero-content p {
font-size: 1.1rem;
margin-bottom: 2rem;
padding: 0 1rem;
}
.hero-badges {
flex-direction: column;
align-items: center;
gap: 0.8rem;
margin-bottom: 1.5rem;
}
.hero-stats {
flex-direction: column;
gap: 1rem;
margin-bottom: 2rem;
}
.stat-item {
min-width: 200px;
padding: 1.2rem 2rem;
}
.hero-signup-cta {
flex-direction: column;
gap: 1rem;
width: 100%;
padding: 0 1rem;
}
.hero-signup-cta .btn-large {
width: 100%;
max-width: 300px;
}
.calculator-container,
.simulator-container {
grid-template-columns: 1fr;
gap: 2rem;
}
.feature-grid {
grid-template-columns: 1fr;
}
.how-it-works-steps {
grid-template-columns: 1fr;
}
.metrics-grid {
grid-template-columns: 1fr;
}
.cta-buttons {
flex-direction: column;
align-items: center;
}
.cta-buttons button {
width: 100%;
max-width: 300px;
}
.footer-bottom {
flex-direction: column;
text-align: center;
}
.calculator-form {
min-width: unset;
max-width: 100%;
padding: 2rem 1rem;
}
.chart-in-result {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
height: 140px !important;
box-sizing: border-box;
margin-left: 0;
}
.calculator-result, .simulator-result-card {
max-width: 100% !important;
width: 100% !important;
min-width: 0 !important;
}
.nav-container {
gap: 0.25rem;
padding-left: 5px;
padding-right: 5px;
}
.nav-buttons {
gap: 0.25rem;
}
}
@media (max-width: 480px) {
.container {
padding: 0 15px;
}
.hero-content h1 {
font-size: 2rem;
margin-bottom: 1rem;
padding: 0 0.5rem;
}
.hero-content p {
font-size: 1rem;
margin-bottom: 1.5rem;
padding: 0 0.5rem;
}
.hero-badges {
margin-bottom: 1.2rem;
}
.badge {
padding: 0.4rem 1.2rem;
font-size: 0.9rem;
}
.hero-stats {
margin-bottom: 1.5rem;
}
.stat-item {
min-width: 180px;
padding: 1rem 1.5rem;
}
.stat-number {
font-size: 1.8rem;
}
.stat-label {
font-size: 0.9rem;
}
.hero-signup-cta {
padding: 0 0.5rem;
}
.hero-signup-cta .btn-large {
font-size: 1rem;
padding: 1rem 2rem;
}
}
@media (max-width: 1200px) {
.calculator-container {
max-width: 100vw;
width: 100vw;
gap: 2rem;
}
.calculator-form, .calculator-result {
min-width: 320px;
max-width: 100vw;
}
}
/* Animations */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideInLeft {
from {
opacity: 0;
transform: translateX(-30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes slideInRight {
from {
opacity: 0;
transform: translateX(30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* Apply animations to sections */
.calculator-section,
.value-proposition,
.how-it-works-section,
.ai-chat-section,
.cash-flow {
animation: fadeInUp 0.8s ease-out;
}
.value-cards .value-card:nth-child(1) {
animation: slideInLeft 0.8s ease-out 0.2s both;
}
.value-cards .value-card:nth-child(2) {
animation: slideInRight 0.8s ease-out 0.2s both;
}
.how-step {
animation: fadeInUp 0.6s ease-out;
}
.how-step:nth-child(1) { animation-delay: 0.1s; }
.how-step:nth-child(2) { animation-delay: 0.2s; }
.how-step:nth-child(3) { animation-delay: 0.3s; }
.how-step:nth-child(4) { animation-delay: 0.4s; }
/* Smooth scrolling */
html {
scroll-behavior: smooth;
}
/* Custom scrollbar */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #151e2e;
}
::-webkit-scrollbar-thumb {
background: #19253a;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #1a2236;
}
/* Simulator Card Styles */
.simulator-card {
background: #1b253b;
border-radius: 32px;
box-shadow: 0 8px 40px 0 rgba(255,255,255,0.10), 0 1.5px 8px 0 rgba(255,255,255,0.08);
padding: 2.5rem 2.5rem 2rem 2.5rem;
max-width: 1100px;
width: 100%;
margin: 0 auto 60px auto;
display: flex;
flex-direction: column;
align-items: center;
}
.simulator-card-content {
display: flex;
flex-direction: row;
gap: 3rem;
width: 100%;
align-items: flex-start;
justify-content: center;
}
.simulator-form {
background: none;
box-shadow: none;
border: none;
border-radius: 24px;
padding: 0;
min-width: 340px;
max-width: 380px;
width: 100%;
}
.simulator-results {
background: rgba(30, 64, 175, 0.1);
border: 1px solid rgba(30, 64, 175, 0.2);
border-radius: 20px;
padding: 2.5rem;
text-align: center;
}
.simulator-results h3 {
color: #ffffff;
margin-bottom: 1rem;
font-size: 1.25rem;
}
.cash-flow-amount {
font-size: 4rem;
font-weight: 900;
margin-bottom: 2rem;
line-height: 1.1;
color: #3be68f;
text-align: center;
width: 100%;
}
.metrics-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
margin-top: 2rem;
}
.metric {
text-align: center;
padding: 1.5rem;
background: rgba(255, 255, 255, 0.05);
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
}
.metric:hover {
transform: translateY(-3px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
border-color: #1e40af;
}
.metric-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1rem;
font-size: 1.5rem;
color: #ffffff;
box-shadow: 0 4px 15px rgba(30, 64, 175, 0.3);
}
.metric-content h4 {
color: #a0a0a0;
font-size: 0.9rem;
font-weight: 500;
margin-bottom: 0.5rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.metric-value {
color: #ffffff;
font-size: 1.5rem;
font-weight: 700;
display: block;
}
.metrics-note {
color: #808080;
font-size: 0.9rem;
margin-bottom: 0.5rem;
}
@media (max-width: 900px) {
.simulator-card-content {
flex-direction: column;
gap: 2rem;
align-items: center;
}
.simulator-form, .simulator-results {
min-width: unset;
max-width: 100%;
width: 100%;
}
.simulator-results .result-label {
font-size: 1.2rem;
}
.cash-flow-amount {
font-size: 2.2rem;
margin-bottom: 1.2rem;
}
.metrics-grid {
grid-template-columns: 1fr;
margin: 1.2rem 0 0.5rem 0;
}
}
.simulator-result-card {
background: none;
box-shadow: none;
border-radius: 0;
padding: 0;
min-width: 340px;
max-width: 420px;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
text-align: center;
}
.simulator-result-card .result-label {
color: #7ee6c7;
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 0.5rem;
text-align: center;
width: 100%;
}
.simulator-result-card .cash-flow-amount {
font-size: 4rem;
font-weight: 900;
margin-bottom: 2rem;
line-height: 1.1;
color: #3be68f;
text-align: center;
width: 100%;
}
.simulator-result-card .chart-in-result {
width: 100%;
max-width: 420px;
min-height: 260px;
margin: 0 0 1.5rem 0;
background: none;
border-radius: 16px;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
}
.simulator-result-card .metrics-grid {
display: flex;
gap: 1.5rem;
justify-content: center;
margin: 1.5rem 0 1rem 0;
width: 100%;
}
.simulator-result-card .metric {
background: #232f47;
border-radius: 16px;
padding: 1.2rem 1.5rem;
text-align: center;
min-width: 110px;
display: flex;
flex-direction: column;
align-items: center;
}
.simulator-result-card .metric h4 {
color: #a0a0a0;
font-size: 1rem;
font-weight: 600;
margin-bottom: 0.5rem;
display: flex;
align-items: center;
gap: 0.4rem;
}
.simulator-result-card .metric span {
color: #3be68f;
font-weight: 700;
font-size: 1.5rem;
}
.simulator-result-card .share-btn {
background: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.3);
color: #ffffff;
padding: 0.75rem 1.5rem;
border-radius: 12px;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 0.5rem;
font-weight: 600;
margin: 1.5rem auto 0 auto;
}
.simulator-result-card .share-btn:hover {
background: rgba(255, 255, 255, 0.3);
transform: translateY(-2px);
}
@media (max-width: 900px) {
.simulator-result-card {
min-width: unset;
max-width: 100%;
width: 100%;
}
.simulator-result-card .result-label {
font-size: 1.2rem;
}
.simulator-result-card .cash-flow-amount {
font-size: 2.2rem;
margin-bottom: 1.2rem;
}
.simulator-result-card .chart-in-result {
max-width: 100%;
min-width: 0;
height: 220px;
}
.simulator-result-card .metrics-grid {
flex-direction: column;
gap: 1rem;
margin: 1.2rem 0 0.5rem 0;
align-items: center;
}
}
.powerful-tool-section {
background: #19253a;
padding: 64px 0;
text-align: center;
}
.powerful-tool-section h2 {
color: #fff;
font-size: 2.5rem;
margin-bottom: 40px;
font-weight: 700;
}
.powerful-tool-steps {
display: flex;
justify-content: center;
gap: 32px;
flex-wrap: wrap;
}
.tool-step {
background: rgba(255,255,255,0.03);
border-radius: 20px;
box-shadow: 0 4px 32px 0 rgba(60,92,145,0.15);
padding: 32px 24px;
width: 260px;
display: flex;
flex-direction: column;
align-items: center;
transition: box-shadow 0.2s;
}
.tool-step:hover {
box-shadow: 0 8px 40px 0 rgba(60,92,145,0.25);
}
.tool-icon {
background: linear-gradient(135deg, #1e40af 60%, #2ecc71 100%);
color: #fff;
border-radius: 50%;
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
margin-bottom: 18px;
box-shadow: 0 2px 12px 0 rgba(30, 64, 175, 0.18);
}
.tool-step h3 {
color: #fff;
font-size: 1.2rem;
margin-bottom: 10px;
font-weight: 600;
}
.tool-step p {
color: #b6c3d6;
font-size: 1rem;
line-height: 1.5;
}
@media (max-width: 900px) {
.powerful-tool-steps {
flex-direction: column;
align-items: center;
gap: 24px;
}
.tool-step {
width: 90%;
max-width: 340px;
}
}
.tool-tabs {
display: flex;
justify-content: center;
gap: 16px;
margin-bottom: 32px;
flex-wrap: wrap;
}
.tool-tab {
background: rgba(30, 64, 175, 0.15);
color: #fff;
border: none;
border-radius: 18px 18px 0 0;
padding: 14px 28px;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s, color 0.2s;
display: flex;
align-items: center;
gap: 10px;
}
.tool-tab.active, .tool-tab:hover {
background: linear-gradient(135deg, #1e40af 60%, #2ecc71 100%);
color: #fff;
}
.tool-tab-content {
display: none;
background: rgba(255,255,255,0.03);
border-radius: 0 0 20px 20px;
box-shadow: 0 4px 32px 0 rgba(60,92,145,0.15);
padding: 40px 32px;
max-width: 540px;
margin: 0 auto;
text-align: center;
animation: fadeIn 0.4s;
}
.tool-tab-content.active {
display: block;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px);}
to { opacity: 1; transform: translateY(0);}
}
@media (max-width: 700px) {
.tool-tab-content {
padding: 28px 8px;
max-width: 98vw;
}
.tool-tabs {
gap: 8px;
}
.tool-tab {
padding: 10px 12px;
font-size: 1rem;
}
}
/* Auth Split Layout */
.auth-bg {
background: #19253a;
min-height: 100vh;
margin: 0;
font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
}
.auth-split {
display: flex;
min-height: 100vh;
}
.auth-left, .auth-right {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 48px 32px;
}
.auth-left {
background: #19253a;
color: #e6f6f3;
align-items: flex-start;
min-width: 340px;
max-width: 540px;
}
.auth-logo-large {
width: 64px;
margin-bottom: 18px;
}
.auth-logo-huge {
width: 320px;
margin-bottom: 32px;
}
.auth-brand {
display: none;
}
.auth-subtext {
margin-bottom: 32px;
font-size: 1.1rem;
color: #b6c3d6;
}
.auth-subtext a {
color: #8fffd7;
text-decoration: underline;
font-weight: 500;
}
.auth-form {
width: 100%;
max-width: 400px;
margin-bottom: 18px;
}
.input-group {
width: 100%;
margin-bottom: 18px;
}
.input-group input {
width: 100%;
padding: 18px 20px;
border: none;
border-radius: 18px;
background: #e6f0fa;
font-size: 1.1rem;
color: #222;
outline: none;
margin-bottom: 0;
box-sizing: border-box;
}
.auth-btn-large {
width: 100%;
padding: 18px 0;
border: none;
border-radius: 18px;
background: #1e40af;
color: #fff;
font-size: 1.2rem;
font-weight: 600;
margin-top: 8px;
margin-bottom: 8px;
cursor: pointer;
transition: background 0.2s;
}
.auth-btn-large:hover {
background: #2ecc71;
color: #19253a;
}
.auth-links-row {
margin-bottom: 18px;
}
.auth-links-row a {
color: #fff;
text-decoration: underline;
font-size: 1rem;
margin-right: 12px;
}
.google-signin-placeholder {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
max-width: 400px;
margin: 32px 0 0 0;
padding: 0.75rem 1.5rem;
background: #fff;
color: #222;
border: none;
border-radius: 12px;
font-size: 1.1rem;
font-weight: 600;
box-shadow: 0 2px 12px 0 rgba(30, 64, 175, 0.10);
cursor: pointer;
transition: background 0.2s, box-shadow 0.2s;
gap: 12px;
}
.google-signin-placeholder:hover, .google-signin-placeholder:focus {
background: #f5f5f5;
box-shadow: 0 4px 16px 0 rgba(30, 64, 175, 0.13);
outline: none;
}
.google-signin-placeholder .google-icon {
width: 28px;
height: 28px;
margin-right: 10px;
border-radius: 50%;
background: none;
display: inline-block;
}
@media (max-width: 600px) {
.google-signin-placeholder {
max-width: 100%;
font-size: 1rem;
padding: 0.75rem 0.5rem;
}
}
.auth-footer {
margin-top: 32px;
color: #b6c3d6;
font-size: 0.95rem;
opacity: 0.8;
}
.auth-right {
background: #fff;
padding: 0;
justify-content: center;
align-items: stretch;
}
.auth-side-image {
width: 100%;
height: 100vh;
object-fit: cover;
object-position: center;
display: block;
}
@media (max-width: 900px) {
.auth-split {
flex-direction: column;
}
.auth-left, .auth-right {
max-width: 100vw;
min-width: 0;
padding: 32px 8vw;
}
.auth-side-image {
height: 240px;
min-height: 180px;
max-height: 320px;
}
}
.auth-hero-heading {
font-size: 2.3rem;
font-weight: 700;
color: #fff;
margin-bottom: 32px;
margin-top: 0;
}
.input-row {
display: flex;
gap: 18px;
width: 100%;
margin-bottom: 18px;
}
.input-row .input-group {
flex: 1 1 0;
margin-bottom: 0;
}
@media (max-width: 600px) {
.input-row {
flex-direction: column;
gap: 0;
}
.input-row .input-group {
margin-bottom: 18px;
}
}
.auth-centered-container {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
max-width: 400px;
margin: 0 auto;
padding: 40px 24px 32px 24px;
background: #19253a;
border-radius: 20px;
box-shadow: 0 6px 32px 0 rgba(30, 64, 175, 0.18), 0 1.5px 8px 0 rgba(30, 64, 175, 0.10);
border: 1.5px solid #23325a;
}
.auth-form {
width: 100%;
max-width: 400px;
margin-bottom: 18px;
display: flex;
flex-direction: column;
gap: 18px;
}
.input-group input {
width: 100%;
padding: 18px 20px;
border: none;
border-radius: 14px;
background: #232f47;
font-size: 1.1rem;
color: #fff;
outline: none;
margin-bottom: 0;
box-sizing: border-box;
font-weight: 500;
transition: box-shadow 0.2s, background 0.2s;
}
.input-group input:focus {
box-shadow: 0 0 0 2px #7ee6c7;
background: #26355a;
}
.auth-btn-large {
width: 100%;
padding: 18px 0;
border: none;
border-radius: 14px;
background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%);
color: #fff;
font-size: 1.2rem;
font-weight: 600;
margin-top: 8px;
margin-bottom: 8px;
cursor: pointer;
transition: background 0.2s, color 0.2s, box-shadow 0.2s;
box-shadow: 0 2px 8px 0 rgba(30, 64, 175, 0.10);
}
.auth-btn-large:hover {
background: linear-gradient(135deg, #1e3a8a 0%, #1e1b4b 100%);
color: #7ee6c7;
box-shadow: 0 4px 16px 0 rgba(30, 64, 175, 0.18);
}
.auth-logo-huge {
width: 180px;
margin-bottom: 28px;
}
.auth-subtext {
margin-bottom: 28px;
font-size: 1.08rem;
color: #b6c3d6;
text-align: center;
}
.auth-links-row {
margin-bottom: 18px;
text-align: center;
}
.auth-links-row a {
color: #7ee6c7;
text-decoration: underline;
font-size: 1rem;
font-weight: 500;
}
.auth-footer {
margin-top: 28px;
color: #7c8ba1;
font-size: 0.95rem;
opacity: 0.85;
text-align: center;
}
@media (max-width: 600px) {
.auth-centered-container {
max-width: 98vw;
padding: 18px 2vw;
border-radius: 0;
box-shadow: none;
border: none;
}
.auth-logo-huge {
width: 120px;
margin-bottom: 18px;
}
}
/* Remove old split styles */
.auth-split, .auth-left, .auth-right, .auth-side-image { display: none !important; }
.auth-modern-bg {
min-height: 100vh;
width: 100vw;
background: linear-gradient(120deg, #151e2e 60%, #1e293b 100%);
display: flex;
align-items: center;
justify-content: flex-start;
position: relative;
/* overflow: hidden; */
}
.auth-modern-bg::after {
content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 45vw;
background: url('/images/landing/02-light.gif') center center/cover no-repeat;
opacity: 0.32;
z-index: 1;
}
.auth-modern-card {
position: relative;
z-index: 2;
background: #19253a;
border-radius: 24px;
max-width: 520px;
width: 100%;
padding: 44px 48px 36px 48px;
margin: 0 0 0 8vw;
display: flex;
flex-direction: column;
align-items: flex-start;
box-sizing: border-box;
box-shadow: 0 8px 40px 0 rgba(30,64,175,0.10);
border: 1.5px solid #23325a;
}
.auth-modern-card .auth-logo-huge {
width: 180px;
margin-bottom: 32px;
align-self: flex-start;
}
.auth-modern-card .auth-title {
font-size: 2.6rem;
font-weight: 900;
color: #fff;
margin-bottom: 10px;
letter-spacing: -1.5px;
line-height: 1.08;
text-align: left;
}
.auth-modern-card .auth-title .accent {
color: #3b82f6;
font-size: 2.8rem;
vertical-align: middle;
}
.auth-modern-card .auth-subtext {
color: #b6c3d6;
font-size: 1.08rem;
margin-bottom: 28px;
text-align: left;
}
.auth-modern-card .auth-form {
width: 100%;
display: flex;
flex-direction: column;
gap: 18px;
margin-bottom: 18px;
}
.auth-modern-card .input-row {
display: flex;
gap: 12px;
}
.auth-modern-card .input-group {
flex: 1 1 0;
}
.auth-modern-card .input-group input {
width: 100%;
padding: 18px 20px;
border: none;
border-radius: 14px;
background: #232f47;
color: #fff;
font-size: 1.08rem;
font-weight: 500;
box-sizing: border-box;
transition: box-shadow 0.2s, background 0.2s;
text-align: left;
}
.auth-modern-card .input-group input:focus {
outline: none;
box-shadow: 0 0 0 2px #3b82f6;
background: #26355a;
}
.auth-modern-card .auth-btn-large {
width: 100%;
padding: 18px 0;
border: none;
border-radius: 999px;
background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
color: #fff;
font-size: 1.18rem;
font-weight: 700;
margin-top: 10px;
margin-bottom: 10px;
cursor: pointer;
transition: background 0.2s, color 0.2s, box-shadow 0.2s;
box-shadow: 0 2px 8px 0 rgba(30, 64, 175, 0.10);
text-align: center;
}
.auth-modern-card .auth-btn-large:hover {
background: linear-gradient(135deg, #1e3a8a 0%, #1e1b4b 100%);
color: #3b82f6;
box-shadow: 0 4px 16px 0 rgba(30, 64, 175, 0.18);
}
.auth-modern-card .auth-links-row {
margin-bottom: 12px;
text-align: left;
}
.auth-modern-card .auth-links-row a {
color: #3be68f;
text-decoration: underline;
font-size: 1rem;
font-weight: 500;
}
.auth-modern-card .auth-footer {
margin-top: 18px;
color: #7c8ba1;
font-size: 0.93rem;
opacity: 0.85;
text-align: left;
}
@media (max-width: 1100px) {
.auth-modern-bg::after {
left: 0;
opacity: 0.18;
}
.auth-modern-card {
margin: 0 auto;
padding: 32px 6vw 24px 6vw;
max-width: 98vw;
}
}
@media (max-width: 600px) {
.auth-modern-card {
padding: 18px 2vw 12px 2vw;
border-radius: 0;
box-shadow: none;
border: none;
margin: 0 auto;
}
.auth-modern-card .auth-logo-huge {
width: 90px;
margin-bottom: 18px;
}
.auth-modern-card .auth-title {
font-size: 1.3rem;
}
}
.auth-divider {
width: 100%;
display: flex;
align-items: center;
text-align: center;
margin: 18px 0 16px 0;
}
.auth-divider span {
color: #7c8ba1;
font-size: 1.02rem;
padding: 0 16px;
background: #19253a;
z-index: 1;
}
.auth-divider:before, .auth-divider:after {
content: '';
flex: 1;
border-bottom: 1.5px solid #2a3755;
margin: 0 2px;
z-index: 0;
}
.google-signin-modern {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 14px 0;
border: none;
border-radius: 999px;
background: #fff;
color: #222;
font-size: 1.08rem;
font-weight: 600;
box-shadow: 0 2px 8px 0 rgba(30, 64, 175, 0.10);
cursor: pointer;
margin-bottom: 10px;
margin-top: 0;
transition: background 0.18s, color 0.18s, box-shadow 0.18s;
}
.google-signin-modern:hover {
background: #f3f7fa;
color: #1e40af;
box-shadow: 0 4px 16px 0 rgba(30, 64, 175, 0.13);
}
.google-icon-modern {
width: 24px;
height: 24px;
border-radius: 50%;
background: none;
margin-right: 8px;
display: inline-block;
}
/* Features Page Specific Styles */
.features-hero {
padding: 120px 0 80px;
background: linear-gradient(135deg, #151e2e 0%, #1a2332 100%);
text-align: center;
}
.features-hero h1 {
font-size: 3.5rem;
font-weight: 800;
margin-bottom: 1.5rem;
background: linear-gradient(135deg, #ffffff 0%, #1e40af 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.features-hero p {
font-size: 1.25rem;
color: #a0a0a0;
max-width: 600px;
margin: 0 auto 2rem;
}
.competitor-comparison {
padding: 80px 0;
background: #151e2e;
}
.comparison-header {
text-align: center;
margin-bottom: 3rem;
}
.comparison-header h2 {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 1rem;
color: #ffffff;
}
.comparison-header p {
color: #a0a0a0;
font-size: 1.1rem;
}
.competitor-selector {
display: flex;
justify-content: center;
gap: 1rem;
margin-bottom: 3rem;
flex-wrap: wrap;
}
.competitor-btn {
padding: 0.75rem 1.5rem;
border: 2px solid rgba(255, 255, 255, 0.2);
background: transparent;
color: #a0a0a0;
border-radius: 12px;
cursor: pointer;
transition: all 0.3s ease;
font-weight: 600;
}
.competitor-btn.active {
border-color: #1e40af;
background: #1e40af;
color: #ffffff;
}
.competitor-btn:hover {
border-color: #1e40af;
color: #1e40af;
}
.comparison-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.comparison-card {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
padding: 2rem;
transition: all 0.3s ease;
}
.comparison-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}
.comparison-card.vine {
border-color: #1e40af;
background: rgba(30, 64, 175, 0.1);
}
.platform-header {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 2rem;
}
.platform-logo {
width: 50px;
height: 50px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
color: #ffffff;
}
.vine-logo {
background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%);
}
.competitor-logo {
background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
}
.platform-info h3 {
color: #ffffff;
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 0.25rem;
}
.platform-info p {
color: #a0a0a0;
font-size: 0.9rem;
}
.feature-list {
list-style: none;
}
.feature-item {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1rem;
padding: 0.75rem;
border-radius: 8px;
transition: all 0.3s ease;
}
.feature-item:hover {
background: rgba(255, 255, 255, 0.05);
}
.feature-icon {
width: 24px;
height: 24px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
color: #ffffff;
}
.feature-icon.check {
background: #10b981;
}
.feature-icon.xmark {
background: #ef4444;
}
.feature-icon.partial {
background: #f59e0b;
}
.feature-text {
flex: 1;
color: #e0e0e0;
font-size: 0.95rem;
}
.feature-note {
color: #a0a0a0;
font-size: 0.8rem;
margin-top: 0.25rem;
}
.pricing-comparison {
background: rgba(255, 255, 255, 0.05);
border-radius: 12px;
padding: 1.5rem;
margin-top: 2rem;
}
.pricing-comparison h4 {
color: #ffffff;
margin-bottom: 1rem;
font-size: 1.1rem;
}
.price-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.5rem 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.price-item:last-child {
border-bottom: none;
}
.price-label {
color: #a0a0a0;
font-size: 0.9rem;
}
.price-value {
color: #ffffff;
font-weight: 600;
}
.vine-price {
color: #10b981;
}
.competitor-price {
color: #ef4444;
}
.feature-categories {
padding: 80px 0;
background: linear-gradient(135deg, #1a2332 0%, #151e2e 100%);
text-align: center;
}
.feature-categories .text-center {
margin-bottom: 4rem;
}
.feature-categories h2 {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 1.5rem;
color: #ffffff;
}
.feature-categories p {
color: #a0a0a0;
font-size: 1.1rem;
max-width: 600px;
margin: 0 auto;
line-height: 1.6;
}
.category-tabs {
display: flex;
justify-content: center;
gap: 1rem;
margin-bottom: 4rem;
flex-wrap: wrap;
padding: 0 20px;
}
.category-tab {
padding: 1rem 2rem;
border: 2px solid rgba(255, 255, 255, 0.2);
background: transparent;
color: #a0a0a0;
border-radius: 12px;
cursor: pointer;
transition: all 0.3s ease;
font-weight: 600;
}
.category-tab.active {
border-color: #1e40af;
background: #1e40af;
color: #ffffff;
}
.category-tab:hover {
border-color: #1e40af;
color: #1e40af;
}
.category-content {
display: none;
}
.category-content.active {
display: block;
}
.feature-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.feature-card {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
padding: 2rem;
transition: all 0.3s ease;
}
.feature-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
border-color: #1e40af;
}
.feature-card-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
font-size: 1.5rem;
color: #ffffff;
text-align: center;
}
.feature-card h3 {
color: #ffffff;
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 1rem;
}
.feature-card h4 {
font-size: 1.1rem;
font-weight: 600;
color: #ffffff;
margin-bottom: 16px;
}
.feature-card ul {
list-style: none;
padding: 0;
margin: 0;
}
.feature-card li {
color: #a0a0a0;
font-size: 0.9rem;
line-height: 1.6;
margin-bottom: 8px;
padding-left: 20px;
position: relative;
}
.feature-card li::before {
content: '✓';
position: absolute;
left: 0;
color: #3be68f;
font-weight: bold;
}
.feature-benefits {
list-style: none;
}
.feature-benefits li {
color: #e0e0e0;
margin-bottom: 0.5rem;
padding-left: 1.5rem;
position: relative;
}
.feature-benefits li::before {
content: "✓";
position: absolute;
left: 0;
color: #10b981;
font-weight: bold;
}
.cta-section {
padding: 80px 0;
background: #151e2e;
text-align: center;
}
.cta-section h2 {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 1rem;
color: #ffffff;
}
.cta-section p {
font-size: 1.25rem;
color: #a0a0a0;
margin-bottom: 2rem;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.cta-buttons {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
@media (max-width: 768px) {
.features-hero h1 {
font-size: 2.5rem;
}
.comparison-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.competitor-selector {
gap: 0.5rem;
}
.competitor-btn {
padding: 0.5rem 1rem;
font-size: 0.9rem;
}
.category-tabs {
gap: 0.5rem;
}
.category-tab {
padding: 0.75rem 1.5rem;
font-size: 0.9rem;
}
.feature-grid {
grid-template-columns: 1fr;
}
}
/* AI Chat Section */
.ai-chat-section {
position: relative;
padding: 120px 0;
background: linear-gradient(135deg, #1a2332 0%, #151e2e 100%);
overflow: hidden;
}
.ai-chat-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 30% 20%, rgba(30, 64, 175, 0.1) 0%, transparent 50%),
radial-gradient(circle at 70% 80%, rgba(59, 230, 143, 0.05) 0%, transparent 50%);
pointer-events: none;
}
.ai-chat-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
position: relative;
z-index: 1;
}
.ai-chat-text {
max-width: 500px;
}
.ai-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: linear-gradient(135deg, #3be68f 0%, #10b981 100%);
color: #ffffff;
padding: 8px 16px;
border-radius: 20px;
font-size: 0.85rem;
font-weight: 600;
margin-bottom: 24px;
animation: pulse 2s infinite;
}
.ai-badge i {
font-size: 1rem;
}
.ai-chat-text h2 {
font-size: 3rem;
font-weight: 800;
line-height: 1.1;
margin-bottom: 20px;
background: linear-gradient(135deg, #ffffff 0%, #3be68f 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.ai-subtitle {
font-size: 1.2rem;
color: #a0a0a0;
margin-bottom: 40px;
line-height: 1.6;
}
.ai-features {
display: flex;
flex-direction: column;
gap: 24px;
margin-bottom: 40px;
}
.ai-feature {
display: flex;
align-items: flex-start;
gap: 16px;
padding: 20px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
transition: all 0.3s ease;
}
.ai-feature:hover {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(59, 230, 143, 0.3);
transform: translateY(-2px);
}
.ai-feature-icon {
width: 48px;
height: 48px;
background: linear-gradient(135deg, #1e40af 0%, #3be68f 100%);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.ai-feature-icon i {
color: #ffffff;
font-size: 1.2rem;
}
.ai-feature-content h4 {
font-size: 1.1rem;
font-weight: 600;
color: #ffffff;
margin-bottom: 8px;
}
.ai-feature-content p {
color: #a0a0a0;
font-size: 0.95rem;
line-height: 1.5;
}
.ai-cta {
text-align: center;
}
.ai-cta-note {
color: #a0a0a0;
font-size: 0.9rem;
margin-top: 16px;
}
/* Chat Demo */
.ai-chat-demo {
display: flex;
flex-direction: column;
gap: 30px;
}
.chat-window {
background: #1a2332;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
overflow: hidden;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
animation: slideInUp 0.8s ease-out;
}
.chat-header {
display: flex;
align-items: center;
gap: 12px;
padding: 20px;
background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.chat-avatar {
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.chat-avatar i {
color: #ffffff;
font-size: 1.2rem;
}
.chat-info h4 {
color: #ffffff;
font-size: 1rem;
font-weight: 600;
margin-bottom: 2px;
}
.chat-status {
color: #3be68f;
font-size: 0.8rem;
font-weight: 500;
}
.chat-messages {
padding: 20px;
max-height: 300px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 16px;
}
.message {
display: flex;
flex-direction: column;
max-width: 80%;
}
.ai-message {
align-self: flex-start;
}
.user-message {
align-self: flex-end;
}
.message-content {
padding: 12px 16px;
border-radius: 18px;
font-size: 0.9rem;
line-height: 1.4;
}
.ai-message .message-content {
background: rgba(30, 64, 175, 0.2);
color: #ffffff;
border-bottom-left-radius: 4px;
}
.user-message .message-content {
background: linear-gradient(135deg, #3be68f 0%, #10b981 100%);
color: #ffffff;
border-bottom-right-radius: 4px;
}
.message-time {
font-size: 0.75rem;
color: #a0a0a0;
margin-top: 4px;
align-self: flex-end;
}
.user-message .message-time {
align-self: flex-start;
}
.chat-input {
display: flex;
align-items: center;
gap: 12px;
padding: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.chat-input input {
flex: 1;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 24px;
padding: 12px 20px;
color: #a0a0a0;
font-size: 0.9rem;
}
.chat-input input:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.chat-send {
width: 40px;
height: 40px;
background: linear-gradient(135deg, #3be68f 0%, #10b981 100%);
border: none;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
}
.chat-send:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.chat-send i {
color: #ffffff;
font-size: 0.9rem;
}
/* Demo Stats */
.demo-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.stat-item {
text-align: center;
padding: 20px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
transition: all 0.3s ease;
}
.stat-item:hover {
background: rgba(255, 255, 255, 0.05);
transform: translateY(-2px);
}
.stat-number {
font-size: 2rem;
font-weight: 800;
color: #3be68f;
margin-bottom: 8px;
}
.stat-label {
font-size: 0.85rem;
color: #a0a0a0;
line-height: 1.4;
}
/* Animations */
@keyframes pulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
}
@keyframes slideInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Responsive Design */
@media (max-width: 1200px) {
.ai-chat-content {
gap: 60px;
}
.ai-chat-text h2 {
font-size: 2.5rem;
}
}
@media (max-width: 900px) {
.ai-chat-content {
grid-template-columns: 1fr;
gap: 60px;
text-align: center;
}
.ai-chat-text {
max-width: none;
}
.ai-features {
max-width: 500px;
margin-left: auto;
margin-right: auto;
}
.demo-stats {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 768px) {
.ai-chat-section {
padding: 80px 0;
}
.ai-chat-text h2 {
font-size: 2rem;
}
.ai-subtitle {
font-size: 1.1rem;
}
.ai-feature {
padding: 16px;
}
.ai-feature-icon {
width: 40px;
height: 40px;
}
.ai-feature-icon i {
font-size: 1rem;
}
.chat-messages {
max-height: 250px;
}
.demo-stats {
grid-template-columns: 1fr;
gap: 16px;
}
.stat-item {
padding: 16px;
}
.stat-number {
font-size: 1.5rem;
}
}
@media (max-width: 480px) {
.ai-chat-text h2 {
font-size: 1.8rem;
}
.ai-subtitle {
font-size: 1rem;
}
.ai-feature {
flex-direction: column;
text-align: center;
gap: 12px;
}
.chat-header {
padding: 16px;
}
.chat-messages {
padding: 16px;
}
.chat-input {
padding: 16px;
}
}
/* Enhanced Real Estate Section */
.real-estate-header {
text-align: center;
margin-bottom: 60px;
}
.real-estate-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: linear-gradient(135deg, #1e40af 0%, #3be68f 100%);
color: #ffffff;
padding: 8px 16px;
border-radius: 20px;
font-size: 0.85rem;
font-weight: 600;
margin-bottom: 24px;
animation: pulse 2s infinite;
}
.real-estate-badge i {
font-size: 1rem;
}
.real-estate-header h2 {
font-size: 3rem;
font-weight: 800;
line-height: 1.1;
margin-bottom: 20px;
background: linear-gradient(135deg, #ffffff 0%, #3be68f 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.real-estate-subtitle {
font-size: 1.2rem;
color: #a0a0a0;
max-width: 700px;
margin: 0 auto;
line-height: 1.6;
}
/* Real Estate Benefits */
.real-estate-benefits {
margin-bottom: 60px;
}
.benefit-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
margin-bottom: 40px;
}
.benefit-item {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
padding: 30px;
text-align: center;
transition: all 0.3s ease;
}
.benefit-item:hover {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(59, 230, 143, 0.3);
transform: translateY(-5px);
}
.benefit-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, #1e40af 0%, #3be68f 100%);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
}
.benefit-icon i {
color: #ffffff;
font-size: 1.5rem;
}
.benefit-item h4 {
font-size: 1.2rem;
font-weight: 600;
color: #ffffff;
margin-bottom: 12px;
}
.benefit-item p {
color: #a0a0a0;
font-size: 0.95rem;
line-height: 1.5;
}
/* Real Estate CTA within form */
.real-estate-cta {
margin-top: 30px;
padding-top: 30px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.cta-highlight {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
background: rgba(59, 230, 143, 0.1);
border: 1px solid rgba(59, 230, 143, 0.3);
border-radius: 12px;
padding: 12px 16px;
margin-bottom: 20px;
color: #3be68f;
font-size: 0.9rem;
font-weight: 500;
}
.cta-highlight i {
color: #3be68f;
}
/* Real Estate Features */
.real-estate-features {
margin-top: 80px;
text-align: center;
}
.real-estate-features h3 {
font-size: 2.5rem;
font-weight: 700;
color: #ffffff;
margin-bottom: 50px;
background: linear-gradient(135deg, #ffffff 0%, #1e40af 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
margin-bottom: 60px;
}
.feature-card {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
padding: 30px;
text-align: left;
transition: all 0.3s ease;
}
.feature-card:hover {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(59, 230, 143, 0.3);
transform: translateY(-3px);
}
.feature-icon {
width: 50px;
height: 50px;
background: linear-gradient(135deg, #1e40af 0%, #3be68f 100%);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
}
.feature-icon i {
color: #ffffff;
font-size: 1.2rem;
}
.feature-card h4 {
font-size: 1.1rem;
font-weight: 600;
color: #ffffff;
margin-bottom: 16px;
}
.feature-card ul {
list-style: none;
padding: 0;
margin: 0;
}
.feature-card li {
color: #a0a0a0;
font-size: 0.9rem;
line-height: 1.6;
margin-bottom: 8px;
padding-left: 20px;
position: relative;
}
.feature-card li::before {
content: '✓';
position: absolute;
left: 0;
color: #3be68f;
font-weight: bold;
}
/* Real Estate CTA Section */
.real-estate-cta-section {
background: linear-gradient(135deg, #1a2332 0%, #151e2e 100%);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 20px;
padding: 60px 40px;
text-align: center;
margin-top: 80px;
position: relative;
overflow: hidden;
}
.real-estate-cta-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 30% 20%, rgba(30, 64, 175, 0.1) 0%, transparent 50%),
radial-gradient(circle at 70% 80%, rgba(59, 230, 143, 0.05) 0%, transparent 50%);
pointer-events: none;
}
.cta-content {
position: relative;
z-index: 1;
}
.cta-content h3 {
font-size: 2.5rem;
font-weight: 700;
color: #ffffff;
margin-bottom: 20px;
}
.cta-content p {
font-size: 1.1rem;
color: #a0a0a0;
margin-bottom: 40px;
max-width: 600px;
margin-left: auto;
margin-right: auto;
line-height: 1.6;
}
.cta-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 30px;
margin-bottom: 40px;
}
.stat {
text-align: center;
}
.stat-number {
font-size: 2.5rem;
font-weight: 800;
color: #3be68f;
margin-bottom: 8px;
}
.stat-label {
font-size: 0.9rem;
color: #a0a0a0;
line-height: 1.4;
}
.cta-buttons {
display: flex;
gap: 20px;
justify-content: center;
flex-wrap: wrap;
}
/* Responsive Design for Real Estate Section */
@media (max-width: 1200px) {
.real-estate-header h2 {
font-size: 2.5rem;
}
.real-estate-features h3 {
font-size: 2rem;
}
.cta-content h3 {
font-size: 2rem;
}
}
@media (max-width: 900px) {
.benefit-grid {
grid-template-columns: repeat(2, 1fr);
}
.features-grid {
grid-template-columns: repeat(2, 1fr);
}
.cta-stats {
grid-template-columns: repeat(3, 1fr);
}
.real-estate-cta-section {
padding: 40px 20px;
}
}
@media (max-width: 768px) {
.real-estate-header h2 {
font-size: 2rem;
}
.real-estate-subtitle {
font-size: 1.1rem;
}
.benefit-grid {
grid-template-columns: 1fr;
}
.features-grid {
grid-template-columns: 1fr;
}
.cta-stats {
grid-template-columns: 1fr;
gap: 20px;
}
.cta-buttons {
flex-direction: column;
align-items: center;
}
.cta-buttons .btn-large {
width: 100%;
max-width: 300px;
}
.real-estate-features h3 {
font-size: 1.8rem;
}
.cta-content h3 {
font-size: 1.8rem;
}
}
@media (max-width: 480px) {
.real-estate-header h2 {
font-size: 1.8rem;
}
.real-estate-subtitle {
font-size: 1rem;
}
.benefit-item {
padding: 20px;
}
.feature-card {
padding: 20px;
}
.real-estate-cta-section {
padding: 30px 15px;
}
.stat-number {
font-size: 2rem;
}
}
/* Enhanced Features Page Styles */
.features-hero {
padding: 120px 0 80px;
background: linear-gradient(135deg, #1a2332 0%, #151e2e 100%);
position: relative;
overflow: hidden;
}
.features-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 30% 20%, rgba(30, 64, 175, 0.1) 0%, transparent 50%),
radial-gradient(circle at 70% 80%, rgba(59, 230, 143, 0.05) 0%, transparent 50%);
pointer-events: none;
}
.features-hero .hero-content {
position: relative;
z-index: 1;
text-align: center;
}
.hero-badges {
display: flex;
justify-content: center;
gap: 20px;
margin-bottom: 30px;
flex-wrap: wrap;
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(59, 230, 143, 0.1);
border: 1px solid rgba(59, 230, 143, 0.3);
color: #3be68f;
padding: 8px 16px;
border-radius: 20px;
font-size: 0.85rem;
font-weight: 600;
}
.hero-badge i {
color: #3be68f;
}
.features-hero h1 {
font-size: 3.5rem;
font-weight: 800;
line-height: 1.1;
margin-bottom: 20px;
background: linear-gradient(135deg, #ffffff 0%, #3be68f 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-subtitle {
font-size: 1.3rem;
color: #a0a0a0;
max-width: 800px;
margin: 0 auto 40px;
line-height: 1.6;
}
/* Features page specific hero stats - don't affect index.html */
.features-hero .hero-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
margin-bottom: 40px;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.features-hero .hero-stats .stat-item {
text-align: center;
padding: 20px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
}
.features-hero .hero-stats .stat-number {
font-size: 2rem;
font-weight: 800;
color: #3be68f;
margin-bottom: 8px;
}
.features-hero .hero-stats .stat-label {
font-size: 0.9rem;
color: #a0a0a0;
}
.features-hero .hero-cta {
display: flex;
gap: 20px;
justify-content: center;
flex-wrap: wrap;
}
/* Key Benefits Section */
.key-benefits {
padding: 80px 0;
background: #151e2e;
}
.benefits-header {
text-align: center;
margin-bottom: 60px;
}
.benefits-header h2 {
font-size: 2.5rem;
font-weight: 700;
color: #ffffff;
margin-bottom: 20px;
}
.benefits-header p {
font-size: 1.1rem;
color: #a0a0a0;
max-width: 600px;
margin: 0 auto;
}
.benefits-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 40px;
}
.benefit-card {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
padding: 40px;
transition: all 0.3s ease;
}
.benefit-card:hover {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(59, 230, 143, 0.3);
transform: translateY(-5px);
}
.benefit-card .benefit-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, #1e40af 0%, #3be68f 100%);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 24px;
}
.benefit-card .benefit-icon i {
color: #ffffff;
font-size: 1.5rem;
}
.benefit-card h3, .benefit-card p {
text-align: center;
margin-left: auto;
margin-right: auto;
}
.benefit-card h3 {
font-size: 1.4rem;
font-weight: 600;
color: #ffffff;
margin-bottom: 16px;
}
.benefit-card p {
color: #a0a0a0;
font-size: 1rem;
line-height: 1.6;
margin-bottom: 24px;
}
.benefit-features {
list-style: none;
padding: 0;
margin: 0;
}
.benefit-features li {
color: #a0a0a0;
font-size: 0.95rem;
line-height: 1.6;
margin-bottom: 8px;
padding-left: 20px;
position: relative;
}
.benefit-features li::before {
content: '✓';
position: absolute;
left: 0;
color: #3be68f;
font-weight: bold;
}
/* Enhanced Comparison Section */
.comparison-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: linear-gradient(135deg, #1e40af 0%, #3be68f 100%);
color: #ffffff;
padding: 8px 16px;
border-radius: 20px;
font-size: 0.85rem;
font-weight: 600;
margin-bottom: 24px;
}
.comparison-badge i {
color: #ffffff;
}
.platform-rating {
display: flex;
align-items: center;
gap: 8px;
margin-top: 8px;
}
.stars {
display: flex;
gap: 2px;
}
.stars i {
color: #ffd700;
font-size: 0.8rem;
}
.platform-rating span {
color: #a0a0a0;
font-size: 0.8rem;
}
.comparison-cta {
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
/* Enhanced Categories */
.categories-header {
text-align: center;
margin-bottom: 50px;
}
.categories-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: linear-gradient(135deg, #3be68f 0%, #10b981 100%);
color: #ffffff;
padding: 8px 16px;
border-radius: 20px;
font-size: 0.85rem;
font-weight: 600;
margin-bottom: 24px;
}
.categories-badge i {
color: #ffffff;
}
.categories-header h2 {
font-size: 2.5rem;
font-weight: 700;
color: #ffffff;
margin-bottom: 20px;
}
.categories-header p {
font-size: 1.1rem;
color: #a0a0a0;
max-width: 600px;
margin: 0 auto;
}
.category-tabs {
display: flex;
justify-content: center;
gap: 10px;
margin-bottom: 50px;
flex-wrap: wrap;
}
.category-tab {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 20px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
color: #a0a0a0;
font-size: 0.9rem;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
}
.category-tab.active {
background: linear-gradient(135deg, #1e40af 0%, #3be68f 100%);
color: #ffffff;
border-color: transparent;
}
.category-tab:hover {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(59, 230, 143, 0.3);
}
.category-tab i {
font-size: 1rem;
}
.category-intro {
text-align: center;
margin-bottom: 50px;
}
.category-intro h3 {
font-size: 2rem;
font-weight: 700;
color: #ffffff;
margin-bottom: 16px;
}
.category-intro p {
font-size: 1.1rem;
color: #a0a0a0;
max-width: 700px;
margin: 0 auto;
line-height: 1.6;
}
/* Enhanced CTA Section - Features page specific */
.cta-section {
padding: 100px 0;
background: linear-gradient(135deg, #1a2332 0%, #151e2e 100%);
position: relative;
overflow: hidden;
}
.cta-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 30% 20%, rgba(30, 64, 175, 0.1) 0%, transparent 50%),
radial-gradient(circle at 70% 80%, rgba(59, 230, 143, 0.05) 0%, transparent 50%);
pointer-events: none;
}
.cta-content {
position: relative;
z-index: 1;
text-align: center;
}
.cta-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: linear-gradient(135deg, #3be68f 0%, #10b981 100%);
color: #ffffff;
padding: 8px 16px;
border-radius: 20px;
font-size: 0.85rem;
font-weight: 600;
margin-bottom: 24px;
}
.cta-badge i {
color: #ffffff;
}
.cta-content h2 {
font-size: 3rem;
font-weight: 700;
color: #ffffff;
margin-bottom: 20px;
}
.cta-content p {
font-size: 1.2rem;
color: #a0a0a0;
margin-bottom: 40px;
max-width: 700px;
margin-left: auto;
margin-right: auto;
line-height: 1.6;
}
/* Features page specific CTA stats - don't affect index.html */
.cta-section .cta-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
margin-bottom: 40px;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.cta-section .cta-stat {
text-align: center;
padding: 20px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
}
.cta-section .cta-stat-number {
font-size: 2rem;
font-weight: 800;
color: #3be68f;
margin-bottom: 8px;
}
.cta-section .cta-stat-label {
font-size: 0.9rem;
color: #a0a0a0;
}
.cta-section .cta-buttons {
display: flex;
gap: 20px;
justify-content: center;
margin-bottom: 30px;
flex-wrap: wrap;
}
.cta-guarantee {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
color: #a0a0a0;
font-size: 0.9rem;
}
.cta-guarantee i {
color: #3be68f;
}
/* Responsive Design for Features Page */
@media (max-width: 1200px) {
.features-hero h1 {
font-size: 3rem;
}
.cta-content h2 {
font-size: 2.5rem;
}
.benefits-header h2,
.categories-header h2 {
font-size: 2rem;
}
}
@media (max-width: 900px) {
.hero-badges {
flex-direction: column;
align-items: center;
}
.features-hero .hero-stats {
grid-template-columns: 1fr;
gap: 20px;
}
.benefits-grid {
grid-template-columns: 1fr;
}
.cta-section .cta-stats {
grid-template-columns: 1fr;
gap: 20px;
}
.category-tabs {
flex-direction: column;
align-items: center;
}
.category-tab {
width: 100%;
max-width: 300px;
justify-content: center;
}
}
@media (max-width: 768px) {
.features-hero {
padding: 100px 0 60px;
}
.features-hero h1 {
font-size: 2.5rem;
}
.hero-subtitle {
font-size: 1.1rem;
}
.cta-content h2 {
font-size: 2rem;
}
.cta-content p {
font-size: 1.1rem;
}
.benefit-card {
padding: 30px;
}
.category-intro h3 {
font-size: 1.8rem;
}
.features-hero .hero-cta,
.cta-section .cta-buttons {
flex-direction: column;
align-items: center;
}
.features-hero .hero-cta .btn-large,
.cta-section .cta-buttons .btn-large {
width: 100%;
max-width: 300px;
}
}
@media (max-width: 480px) {
.features-hero h1 {
font-size: 2rem;
}
.hero-subtitle {
font-size: 1rem;
}
.benefit-card {
padding: 20px;
}
.category-tab {
padding: 10px 16px;
font-size: 0.85rem;
}
.cta-content h2 {
font-size: 1.8rem;
}
.cta-content p {
font-size: 1rem;
}
}
/* Value Proposition Section */
.value-proposition {
margin-top: 120px !important;
position: relative;
z-index: 2;
background: transparent;
}
@media (max-width: 768px) {
.value-proposition {
margin-top: 64px !important;
}
}
.how-it-works-section {
padding-bottom: 80px;
}
.value-proposition::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(30, 64, 175, 0.2), transparent);
}
.value-proposition h2 {
text-align: center;
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 1rem;
background: linear-gradient(135deg, #ffffff 0%, #1e40af 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.section-subtitle {
text-align: center;
font-size: 1.1rem;
color: #a0a0a0;
margin-bottom: 3rem;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.value-cards {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
max-width: 1000px;
margin: 0 auto;
}
.value-card {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
padding: 2rem;
text-align: center;
transition: all 0.3s ease;
}
.value-card:hover {
transform: translateY(-5px);
border-color: rgba(30, 64, 175, 0.3);
box-shadow: 0 20px 40px rgba(30, 64, 175, 0.1);
}
.value-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
font-size: 2rem;
color: #ffffff;
}
.value-card h3 {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 1rem;
color: #ffffff;
}
.value-card p {
color: #a0a0a0;
margin-bottom: 1.5rem;
line-height: 1.6;
}
.value-features {
list-style: none;
text-align: left;
margin-bottom: 2rem;
}
.value-features li {
color: #e0e0e0;
margin-bottom: 0.5rem;
display: flex;
align-items: center;
}
.value-features li i {
color: #3be68f;
margin-right: 0.75rem;
font-size: 0.9rem;
}
.value-card .btn-outline {
margin-top: 1rem;
}
@media (max-width: 768px) {
.value-cards {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.value-proposition h2 {
font-size: 2rem;
}
.value-card {
padding: 1.5rem;
}
}
@media (max-width: 480px) {
.value-proposition {
padding: 60px 0;
}
.value-proposition h2 {
font-size: 1.75rem;
}
.section-subtitle {
font-size: 1rem;
}
.value-card {
padding: 1.25rem;
}
.value-icon {
width: 60px;
height: 60px;
font-size: 1.5rem;
}
}
/* Section Dividers and Visual Flow */
.section-divider {
height: 1px;
background: linear-gradient(90deg, transparent, rgba(30, 64, 175, 0.2), transparent);
margin: 60px auto;
max-width: 800px;
width: 100%;
}
.section-divider.thick {
height: 2px;
background: linear-gradient(90deg, transparent, rgba(30, 64, 175, 0.3), transparent);
margin: 80px auto;
}
/* Progress Bar */
.progress-bar {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background: rgba(255, 255, 255, 0.1);
overflow: hidden;
}
.progress-fill {
height: 100%;
background: linear-gradient(90deg, #1e40af, #3be68f);
width: 0%;
transition: width 0.3s ease;
}
.calculator-header, .retirement-header, .analytics-header, .section-header {
text-align: center !important;
margin: 0 auto !important;
padding: 2rem 0 1rem 0 !important;
max-width: 700px;
}
.retirement-features, .analytics-features {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 2rem;
margin: 0 auto;
max-width: 1100px;
padding-bottom: 2rem;
}
.retirement-feature, .analytics-feature {
flex: 1 1 250px;
max-width: 320px;
min-width: 220px;
background: #1e2336;
color: #fff;
border-radius: 14px;
padding: 1.5rem;
margin: 0.5rem;
text-align: center;
}
.retirement-cta, .analytics-cta {
text-align: center;
margin: 2rem 0 2.5rem 0;
}
@media (max-width: 900px) {
.retirement-features, .analytics-features {
flex-direction: column;
align-items: center;
gap: 1.2rem;
}
.retirement-feature, .analytics-feature {
max-width: 100%;
min-width: 0;
}
}
/* Pricing Page Styles */
.pricing-section {
padding: 80px 0;
background: #151e2e;
}
.pricing-card {
max-width: 600px;
margin: 0 auto;
background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
border-radius: 20px;
padding: 3rem;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
border: 1px solid rgba(255, 255, 255, 0.1);
position: relative;
overflow: hidden;
}
.pricing-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #1e40af, #3b82f6, #1e40af);
}
.pricing-header {
text-align: center;
margin-bottom: 2.5rem;
}
.pricing-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: linear-gradient(135deg, #1e40af, #3b82f6);
color: white;
padding: 0.5rem 1rem;
border-radius: 25px;
font-size: 0.9rem;
font-weight: 600;
margin-bottom: 1.5rem;
}
.pricing-badge i {
color: #fbbf24;
}
.pricing-header h2 {
font-size: 2.5rem;
margin-bottom: 1rem;
color: #fff;
}
.price {
margin-bottom: 1rem;
}
.price-amount {
font-size: 3.5rem;
font-weight: 900;
color: #10b981;
}
.price-period {
font-size: 1.2rem;
color: #94a3b8;
font-weight: 500;
}
.pricing-subtitle {
font-size: 1.1rem;
color: #cbd5e1;
line-height: 1.6;
}
.pricing-features {
margin-bottom: 2.5rem;
}
.pricing-features h3 {
font-size: 1.3rem;
margin-bottom: 1.5rem;
color: #fff;
}
.feature-list {
list-style: none;
padding: 0;
}
.feature-list li {
display: flex;
align-items: center;
gap: 1rem;
padding: 0.75rem 0;
color: #e2e8f0;
font-size: 1rem;
}
.feature-list li i {
color: #10b981;
font-size: 1.1rem;
min-width: 20px;
}
.pricing-cta {
text-align: center;
}
.pricing-cta .btn-primary {
width: 100%;
padding: 1.2rem;
font-size: 1.1rem;
margin-bottom: 1rem;
}
.pricing-note {
font-size: 0.9rem;
color: #94a3b8;
text-align: center;
}
/* Why Free Section */
.why-free-section {
padding: 80px 0;
background: #1e293b;
}
.why-free-reasons {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.reason-card {
background: linear-gradient(135deg, #334155 0%, #475569 100%);
padding: 2.5rem;
border-radius: 16px;
text-align: center;
border: 1px solid rgba(255, 255, 255, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.reason-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}
.reason-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, #1e40af, #3b82f6);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
}
.reason-icon i {
font-size: 2rem;
color: white;
}
.reason-card h3 {
font-size: 1.4rem;
margin-bottom: 1rem;
color: #fff;
}
.reason-card p {
color: #cbd5e1;
line-height: 1.6;
}
/* Value Comparison Section */
.value-comparison {
padding: 80px 0;
background: #151e2e;
}
.comparison-table {
max-width: 800px;
margin: 3rem auto 0;
background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
border-radius: 16px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.comparison-row {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
align-items: center;
padding: 1.5rem 2rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.comparison-row:last-child {
border-bottom: none;
}
.comparison-row.header {
background: linear-gradient(135deg, #1e40af, #3b82f6);
color: white;
font-weight: 700;
font-size: 1.1rem;
}
.comparison-feature {
font-weight: 600;
color: #e2e8f0;
}
.comparison-vine {
text-align: center;
color: #10b981;
font-weight: 600;
}
.comparison-vine i {
margin-right: 0.5rem;
}
.comparison-competitor {
text-align: center;
color: #ef4444;
font-weight: 600;
}
.comparison-row.total {
background: rgba(16, 185, 129, 0.1);
font-weight: 700;
font-size: 1.1rem;
}
.comparison-row.total .comparison-vine {
color: #10b981;
font-size: 1.2rem;
}
.comparison-row.total .comparison-competitor {
color: #ef4444;
font-size: 1.2rem;
}
.comparison-note {
text-align: center;
margin-top: 1.5rem;
color: #94a3b8;
font-size: 0.9rem;
}
.comparison-note i {
margin-right: 0.5rem;
color: #3b82f6;
}
/* FAQ Section */
.faq-section {
padding: 80px 0;
background: #1e293b;
}
.faq-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.faq-item {
background: linear-gradient(135deg, #334155 0%, #475569 100%);
padding: 2rem;
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.1);
transition: transform 0.3s ease;
}
.faq-item:hover {
transform: translateY(-3px);
}
.faq-item h3 {
font-size: 1.2rem;
margin-bottom: 1rem;
color: #fff;
line-height: 1.4;
}
.faq-item p {
color: #cbd5e1;
line-height: 1.6;
}
/* CTA Section */
.cta-section {
padding: 80px 0;
background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%);
position: relative;
overflow: hidden;
}
.cta-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
}
.cta-content {
position: relative;
z-index: 2;
text-align: center;
}
.cta-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: rgba(255, 255, 255, 0.2);
color: white;
padding: 0.5rem 1rem;
border-radius: 25px;
font-size: 0.9rem;
font-weight: 600;
margin-bottom: 1.5rem;
}
.cta-badge i {
color: #fbbf24;
}
.cta-content h2 {
font-size: 2.5rem;
margin-bottom: 1rem;
color: #fff;
}
.cta-content p {
font-size: 1.1rem;
color: #e2e8f0;
margin-bottom: 2rem;
max-width: 600px;
margin-left: auto;
margin-right: auto;
line-height: 1.6;
}
.cta-stats {
display: flex;
justify-content: center;
gap: 3rem;
margin-bottom: 2.5rem;
}
.cta-stat {
text-align: center;
}
.cta-stat-number {
font-size: 2.5rem;
font-weight: 900;
color: #fbbf24;
display: block;
}
.cta-stat-label {
color: #e2e8f0;
font-size: 0.9rem;
font-weight: 500;
}
.cta-buttons {
display: flex;
gap: 1rem;
justify-content: center;
margin-bottom: 2rem;
}
.cta-guarantee {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
color: #e2e8f0;
font-size: 0.9rem;
}
.cta-guarantee i {
color: #10b981;
}
/* Responsive Design */
@media (max-width: 768px) {
.pricing-card {
padding: 2rem;
margin: 0 1rem;
}
.pricing-header h2 {
font-size: 2rem;
}
.price-amount {
font-size: 3rem;
}
.why-free-reasons {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.comparison-table {
margin: 2rem 1rem 0;
}
.comparison-row {
grid-template-columns: 1fr;
gap: 0.5rem;
text-align: center;
padding: 1rem;
}
.comparison-row.header {
display: none;
}
.comparison-feature {
font-weight: 700;
color: #fff;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
padding-bottom: 0.5rem;
margin-bottom: 0.5rem;
}
.faq-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.cta-stats {
flex-direction: column;
gap: 1.5rem;
}
.cta-buttons {
flex-direction: column;
align-items: center;
}
.cta-content h2 {
font-size: 2rem;
}
}
@media (max-width: 480px) {
.pricing-card {
padding: 1.5rem;
}
.pricing-header h2 {
font-size: 1.8rem;
}
.price-amount {
font-size: 2.5rem;
}
.reason-card {
padding: 2rem;
}
.faq-item {
padding: 1.5rem;
}
.cta-content h2 {
font-size: 1.8rem;
}
}
@media (max-width: 600px) {
.nav-container {
flex-direction: row;
align-items: center;
justify-content: space-between;
position: relative;
}
.nav-buttons {
display: none !important;
}
.nav-hamburger {
position: static;
margin-left: auto;
z-index: 1300;
}
.nav-logo {
flex: 1 1 auto;
}
.nav-mobile-menu a.btn-primary {
display: block;
margin: 1rem 2rem 0 2rem;
width: calc(100% - 4rem);
font-size: 1.1rem;
padding: 1rem 0;
}
.nav-mobile-menu {
transition: max-height 0.3s cubic-bezier(.4,0,.2,1), opacity 0.3s;
max-height: 0;
opacity: 0;
overflow: hidden;
display: block;
}
.nav-mobile-menu.open {
max-height: 500px;
opacity: 1;
}
.badge {
padding: 0.5rem 1rem;
font-size: 1rem;
margin-bottom: 0.5rem;
width: 100%;
box-sizing: border-box;
}
.hero-content h1 {
font-size: 1.7rem;
}
.hero-stats {
flex-direction: column !important;
gap: 1.2rem;
margin-bottom: 2rem;
}
.stat-item {
margin-bottom: 0.5rem;
width: 100%;
}
}
@media (min-width: 601px) {
.nav-mobile-menu {
display: none !important;
}
.nav-hamburger {
display: none !important;
}
}
/* Center mobile features section and make inline on desktop */
.mobile-features {
display: flex;
flex-direction: row;
justify-content: center;
align-items: flex-start;
gap: 2rem;
}
.mobile-feature {
max-width: 400px;
margin: 0 1rem;
text-align: center;
}
@media (max-width: 900px) {
.mobile-features {
flex-direction: column;
align-items: center;
text-align: center;
}
.mobile-feature {
margin-left: auto;
margin-right: auto;
margin-bottom: 2rem;
text-align: center;
}
}
/* Center and space the mobile features section */
.mobile-management {
text-align: center;
padding: 80px 0 60px 0;
}
.mobile-management .section-header {
margin-bottom: 2.5rem;
}
.mobile-features {
display: flex;
flex-direction: row;
justify-content: center;
align-items: flex-start;
gap: 2rem;
margin-bottom: 60px;
}
.mobile-feature {
max-width: 400px;
margin: 0 1rem;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
.mobile-feature .feature-icon {
margin: 0 auto 1.2rem auto;
}
@media (max-width: 900px) {
.mobile-features {
flex-direction: column;
align-items: center;
text-align: center;
margin-bottom: 40px;
}
.mobile-feature {
margin: 0 auto 2rem auto;
}
}
/* Center and space the analytics features section */
.analytics-features {
display: flex;
flex-direction: row;
justify-content: center;
gap: 2rem;
text-align: center;
}
.analytics-feature {
max-width: 400px;
margin: 0 1rem;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.analytics-feature .feature-icon {
margin: 0 auto 1.2rem auto;
display: flex;
align-items: center;
justify-content: center;
}
@media (max-width: 900px) {
.analytics-features {
flex-direction: column;
align-items: center;
gap: 1.5rem;
}
.analytics-feature {
margin: 0 auto 2rem auto;
}
}
/* --- Modern Footer Redesign --- */
.footer {
background: #101624;
border-top: 1.5px solid rgba(255,255,255,0.08);
padding: 48px 0 24px 0;
color: #e2e8f0;
font-size: 1rem;
}
.footer-content {
max-width: 1200px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
gap: 2.5rem;
padding: 0 24px;
}
.footer-brand {
display: flex;
align-items: center;
gap: 12px;
font-size: 1.2rem;
font-weight: 700;
color: #fff;
margin-bottom: 2rem;
}
.footer-links {
display: flex;
gap: 5rem;
flex-wrap: wrap;
}
.footer-section {
min-width: 140px;
}
.footer-section h4 {
color: #fff;
font-size: 1.1rem;
font-weight: 700;
margin-bottom: 1rem;
letter-spacing: 0.02em;
}
.footer-section a {
display: block;
color: #a0aec0;
text-decoration: none;
margin-bottom: 0.7rem;
font-size: 1rem;
transition: color 0.2s;
}
.footer-section a:hover {
color: #3be68f;
text-decoration: underline;
}
.footer-bottom {
text-align: center;
color: #a0aec0;
font-size: 0.95rem;
margin-top: 2.5rem;
padding-top: 1.5rem;
border-top: 1px solid rgba(255,255,255,0.08);
}
@media (max-width: 900px) {
.footer-content, .footer-links {
flex-direction: column;
align-items: center;
gap: 2rem;
}
.footer-section {
min-width: 0;
text-align: center;
}
.footer-brand {
justify-content: center;
}
}
.hero-signup-cta {
display: flex;
gap: 1.5rem;
justify-content: center;
align-items: center;
flex-wrap: wrap;
animation: fadeInUp 0.8s ease-out 0.4s both;
}
/* How It Works Interactive Section */
.how-it-works-section {
padding: 120px 0 80px;
background: linear-gradient(135deg, #1a2332 0%, #151e2e 100%);
position: relative;
overflow: hidden;
}
.how-it-works-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.5;
}
.how-it-works-header {
text-align: center;
margin-bottom: 60px;
}
.how-it-works-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%);
color: #fff;
padding: 8px 16px;
border-radius: 20px;
font-size: 0.9rem;
font-weight: 600;
margin-bottom: 20px;
box-shadow: 0 4px 12px rgba(30, 64, 175, 0.3);
}
.how-it-works-badge i {
font-size: 1rem;
}
.how-it-works-header h2 {
font-size: 3rem;
margin-bottom: 20px;
background: linear-gradient(135deg, #fff 0%, #e2e8f0 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* Progress Indicator */
.progress-indicator {
margin-bottom: 60px;
}
.progress-line {
position: relative;
height: 4px;
background: rgba(255, 255, 255, 0.1);
border-radius: 2px;
margin: 0 40px 30px;
}
.progress-fill {
position: absolute;
top: 0;
left: 0;
height: 100%;
background: linear-gradient(90deg, #1e40af 0%, #3b82f6 100%);
border-radius: 2px;
transition: width 0.6s ease;
width: 25%;
}
.progress-steps {
display: flex;
justify-content: space-between;
align-items: center;
margin: 0 20px;
}
.progress-step {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
cursor: pointer;
transition: all 0.3s ease;
opacity: 0.5;
}
.progress-step.active {
opacity: 1;
}
.progress-step.completed {
opacity: 0.8;
}
.step-number {
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
border: 2px solid rgba(255, 255, 255, 0.2);
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 1rem;
color: #fff;
transition: all 0.3s ease;
}
.progress-step.active .step-number {
background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
border-color: #1e40af;
box-shadow: 0 4px 12px rgba(30, 64, 175, 0.4);
transform: scale(1.1);
}
.progress-step.completed .step-number {
background: linear-gradient(135deg, #059669 0%, #10b981 100%);
border-color: #059669;
}
.step-label {
font-size: 0.85rem;
font-weight: 500;
color: #e2e8f0;
text-align: center;
transition: color 0.3s ease;
}
.progress-step.active .step-label {
color: #fff;
font-weight: 600;
}
/* Interactive Steps Container */
.how-it-works-interactive {
position: relative;
margin-bottom: 80px;
}
.steps-container {
position: relative;
min-height: 500px;
}
.step-content {
position: absolute;
top: 0;
left: 0;
width: 100%;
opacity: 0;
transform: translateX(50px);
transition: all 0.6s ease;
pointer-events: none;
}
.step-content.active {
opacity: 1;
transform: translateX(0);
pointer-events: all;
}
.step-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
/* Step Visual */
.step-visual {
position: relative;
}
.step-animation {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
padding: 40px 32px;
backdrop-filter: blur(10px);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
padding-bottom: 56px;
}
/* Step 1: Bank Accounts */
.bank-accounts {
display: flex;
flex-direction: column;
gap: 24px;
margin-bottom: 24px;
}
.account-card {
display: flex;
align-items: center;
gap: 16px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
padding: 24px 20px;
transition: all 0.3s ease;
animation: slideInLeft 0.6s ease forwards;
}
.account-card:nth-child(1) { animation-delay: 0.1s; }
.account-card:nth-child(2) { animation-delay: 0.2s; }
.account-card:nth-child(3) { animation-delay: 0.3s; }
.account-card:hover {
background: rgba(255, 255, 255, 0.12);
transform: translateX(8px);
}
.card-icon {
width: 48px;
height: 48px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
color: #fff;
}
.chase .card-icon { background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%); }
.wells-fargo .card-icon { background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%); }
.fidelity .card-icon { background: linear-gradient(135deg, #059669 0%, #10b981 100%); }
.card-info {
flex: 1;
}
.card-name {
font-weight: 600;
color: #fff;
margin-bottom: 4px;
}
.card-balance {
font-size: 1.1rem;
font-weight: 700;
color: #10b981;
}
.connection-status {
color: #10b981;
font-size: 1.2rem;
}
.security-badges {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin-top: 20px;
}
.security-badge {
display: flex;
align-items: center;
gap: 6px;
background: rgba(16, 185, 129, 0.1);
border: 1px solid rgba(16, 185, 129, 0.2);
border-radius: 8px;
padding: 6px 12px;
font-size: 0.8rem;
color: #10b981;
font-weight: 500;
}
/* Step 2: Properties */
.properties-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-bottom: 24px;
}
.property-card {
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
padding: 20px;
transition: all 0.3s ease;
animation: slideInUp 0.6s ease forwards;
}
.property-card:nth-child(1) { animation-delay: 0.1s; }
.property-card:nth-child(2) { animation-delay: 0.2s; }
.property-card:hover {
background: rgba(255, 255, 255, 0.12);
transform: translateY(-4px);
}
.property-image {
width: 48px;
height: 48px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
color: #fff;
margin-bottom: 16px;
}
.primary .property-image { background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%); }
.rental .property-image { background: linear-gradient(135deg, #059669 0%, #10b981 100%); }
.property-name {
font-weight: 600;
color: #fff;
margin-bottom: 8px;
}
.property-value {
font-size: 1.2rem;
font-weight: 700;
color: #10b981;
margin-bottom: 8px;
}
.property-details {
font-size: 0.85rem;
color: #94a3b8;
margin-bottom: 16px;
}
.property-metrics {
display: flex;
flex-direction: column;
gap: 8px;
}
.metric {
display: flex;
justify-content: space-between;
align-items: center;
}
.metric-label {
font-size: 0.85rem;
color: #94a3b8;
}
.metric-value {
font-weight: 600;
color: #fff;
}
.metric-value.positive {
color: #10b981;
}
.property-summary {
display: flex;
justify-content: space-between;
background: rgba(255, 255, 255, 0.05);
border-radius: 8px;
padding: 16px;
}
.summary-item {
text-align: center;
}
.summary-label {
display: block;
font-size: 0.8rem;
color: #94a3b8;
margin-bottom: 4px;
}
.summary-value {
font-weight: 600;
color: #fff;
font-size: 1rem;
}
/* Step 3: AI Insights */
.ai-insights {
display: flex;
flex-direction: column;
gap: 24px;
}
.ai-chat-window {
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
overflow: hidden;
animation: slideInUp 0.6s ease forwards;
}
.ai-header {
display: flex;
align-items: center;
gap: 12px;
padding: 16px;
background: rgba(30, 64, 175, 0.1);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.ai-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 1rem;
}
.ai-name {
font-weight: 600;
color: #fff;
}
.ai-status {
font-size: 0.85rem;
color: #94a3b8;
}
.ai-messages {
padding: 16px;
max-height: 200px;
overflow-y: auto;
}
.ai-message {
margin-bottom: 12px;
animation: fadeInUp 0.6s ease forwards;
}
.ai-message:nth-child(1) { animation-delay: 0.1s; }
.ai-message:nth-child(2) { animation-delay: 0.3s; }
.ai-message:nth-child(3) { animation-delay: 0.5s; }
.message-content {
background: rgba(30, 64, 175, 0.1);
border: 1px solid rgba(30, 64, 175, 0.2);
border-radius: 12px;
padding: 12px;
}
.message-content p {
margin: 0;
color: #e2e8f0;
font-size: 0.9rem;
line-height: 1.5;
}
.message-content p:not(:last-child) {
margin-bottom: 8px;
}
.insights-metrics {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.insight-metric {
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
padding: 16px;
text-align: center;
transition: all 0.3s ease;
animation: slideInUp 0.6s ease forwards;
}
.insight-metric:nth-child(1) { animation-delay: 0.2s; }
.insight-metric:nth-child(2) { animation-delay: 0.4s; }
.insight-metric:nth-child(3) { animation-delay: 0.6s; }
.insight-metric:hover {
background: rgba(255, 255, 255, 0.12);
transform: translateY(-4px);
}
.metric-icon {
width: 40px;
height: 40px;
border-radius: 50%;
background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 1.1rem;
margin: 0 auto 12px;
}
.metric-content .metric-value {
font-size: 1.3rem;
font-weight: 700;
color: #fff;
margin-bottom: 4px;
}
.metric-content .metric-label {
font-size: 0.8rem;
color: #94a3b8;
}
/* Step 4: Growth Dashboard */
.growth-dashboard {
display: flex;
flex-direction: column;
gap: 24px;
}
.net-worth-chart {
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
padding: 20px;
animation: slideInUp 0.6s ease forwards;
}
.chart-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.chart-header h4 {
color: #fff;
font-size: 1.1rem;
margin: 0;
}
.chart-period {
font-size: 0.85rem;
color: #94a3b8;
}
.chart-container {
position: relative;
height: 120px;
margin-bottom: 16px;
}
.chart-line {
position: relative;
width: 100%;
height: 100%;
}
.chart-line::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(180deg, transparent 0%, rgba(30, 64, 175, 0.1) 100%);
border-radius: 8px;
}
.chart-point {
position: absolute;
width: 12px;
height: 12px;
background: rgba(255, 255, 255, 0.3);
border: 2px solid rgba(255, 255, 255, 0.5);
border-radius: 50%;
transform: translate(-50%, 50%);
transition: all 0.3s ease;
}
.chart-point.active {
background: #1e40af;
border-color: #3b82f6;
box-shadow: 0 0 12px rgba(30, 64, 175, 0.6);
transform: translate(-50%, 50%) scale(1.2);
}
.point-tooltip {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
background: rgba(0, 0, 0, 0.9);
color: #fff;
padding: 4px 8px;
border-radius: 4px;
font-size: 0.75rem;
white-space: nowrap;
opacity: 0;
transition: opacity 0.3s ease;
}
.chart-point:hover .point-tooltip {
opacity: 1;
}
.chart-stats {
display: flex;
justify-content: space-between;
}
.stat-item {
text-align: center;
}
.stat-label {
display: block;
font-size: 0.8rem;
color: #94a3b8;
margin-bottom: 4px;
}
.stat-value {
font-weight: 600;
color: #fff;
}
.stat-value.positive {
color: #10b981;
}
.goals-progress {
display: flex;
flex-direction: column;
gap: 16px;
}
.goal-item {
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
padding: 16px;
animation: slideInUp 0.6s ease forwards;
}
.goal-item:nth-child(1) { animation-delay: 0.2s; }
.goal-item:nth-child(2) { animation-delay: 0.4s; }
.goal-info {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
}
.goal-name {
font-weight: 600;
color: #fff;
}
.goal-target {
font-size: 0.9rem;
color: #94a3b8;
}
.goal-progress {
display: flex;
align-items: center;
gap: 12px;
}
.progress-bar {
flex: 1;
height: 8px;
background: rgba(255, 255, 255, 0.1);
border-radius: 4px;
overflow: hidden;
}
.progress-fill {
height: 100%;
background: linear-gradient(90deg, #1e40af 0%, #3b82f6 100%);
border-radius: 4px;
transition: width 0.6s ease;
}
.goal-current {
font-size: 0.9rem;
font-weight: 600;
color: #10b981;
min-width: 80px;
text-align: right;
}
/* Step Info */
.step-info {
display: flex;
flex-direction: column;
gap: 20px;
}
.step-icon {
width: 64px;
height: 64px;
border-radius: 16px;
background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 1.8rem;
box-shadow: 0 8px 24px rgba(30, 64, 175, 0.3);
}
.step-info h3 {
font-size: 2rem;
color: #fff;
margin: 0;
line-height: 1.2;
margin-bottom: 18px;
}
.step-info p {
font-size: 1.1rem;
color: #e2e8f0;
line-height: 1.6;
margin: 0;
margin-bottom: 24px;
}
.step-benefits {
display: flex;
flex-direction: column;
gap: 18px;
}
.benefit-item {
display: flex;
align-items: center;
gap: 12px;
color: #e2e8f0;
font-size: 1rem;
}
.benefit-item i {
color: #10b981;
font-size: 1.1rem;
}
/* Navigation Controls */
.step-navigation {
display: flex;
justify-content: center;
gap: 20px;
margin-top: 56px;
}
.nav-btn {
display: flex;
align-items: center;
gap: 8px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
color: #fff;
padding: 12px 24px;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
}
.nav-btn:hover:not(:disabled) {
background: rgba(255, 255, 255, 0.15);
transform: translateY(-2px);
}
.nav-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.nav-btn.next-btn {
background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
border-color: #1e40af;
}
.nav-btn.next-btn:hover:not(:disabled) {
background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
box-shadow: 0 4px 12px rgba(30, 64, 175, 0.4);
}
/* CTA Section */
.how-it-works-cta {
text-align: center;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
padding: 40px;
backdrop-filter: blur(10px);
}
.cta-content h3 {
font-size: 2.2rem;
color: #fff;
margin-bottom: 16px;
}
.cta-content p {
font-size: 1.1rem;
color: #e2e8f0;
margin-bottom: 32px;
}
.cta-stats {
display: flex;
justify-content: center;
gap: 40px;
margin-bottom: 32px;
}
.cta-stat {
text-align: center;
}
.cta-stat .stat-number {
font-size: 1.8rem;
font-weight: 700;
color: #fff;
margin-bottom: 4px;
}
.cta-stat .stat-label {
font-size: 0.9rem;
color: #94a3b8;
}
.cta-buttons {
display: flex;
justify-content: center;
gap: 16px;
}
/* Responsive Design */
@media (max-width: 1200px) {
.step-content {
grid-template-columns: 1fr;
gap: 40px;
}
.step-visual {
order: 2;
}
.step-info {
order: 1;
}
}
@media (max-width: 900px) {
.how-it-works-section {
padding: 80px 0 60px;
}
.how-it-works-header h2 {
font-size: 2.5rem;
}
.progress-steps {
flex-wrap: wrap;
gap: 20px;
}
.properties-grid {
grid-template-columns: 1fr;
}
.insights-metrics {
grid-template-columns: 1fr;
}
.cta-stats {
flex-direction: column;
gap: 20px;
}
.cta-buttons {
flex-direction: column;
align-items: center;
}
}
@media (max-width: 768px) {
.how-it-works-header h2 {
font-size: 2rem;
}
.step-info h3 {
font-size: 1.5rem;
}
.step-info p {
font-size: 1rem;
}
.step-animation {
padding: 20px;
}
.account-card {
padding: 12px;
}
.property-card {
padding: 16px;
}
.how-it-works-cta {
padding: 30px 20px;
}
.cta-content h3 {
font-size: 1.8rem;
}
}
@media (max-width: 480px) {
.how-it-works-header h2 {
font-size: 1.8rem;
}
.progress-line {
margin: 0 20px 20px;
}
.step-number {
width: 32px;
height: 32px;
font-size: 0.9rem;
}
.step-label {
font-size: 0.75rem;
}
.step-icon {
width: 48px;
height: 48px;
font-size: 1.4rem;
}
.nav-btn {
padding: 10px 16px;
font-size: 0.9rem;
}
}
/* Animations */
@keyframes slideInLeft {
from {
opacity: 0;
transform: translateX(-30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes slideInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Center icons in account cards and property cards */
.card-icon, .property-image, .step-icon {
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
padding: 0;
}
/* Fix overlay z-index so buttons are clickable */
.how-it-works-section::before {
z-index: 0;
}
.how-it-works-section,
.step-animation,
.steps-container {
position: relative;
z-index: 1;
}
.step-navigation {
position: relative;
z-index: 2;
}
.value-proposition {
margin-top: 120px;
}
@media (max-width: 768px) {
.value-proposition {
margin-top: 64px;
}
}
.property-card .metric {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.property-card .metric-label,
.property-card .metric-value {
text-align: center;
width: 100%;
}
/* Make chart points more visible and larger */
.chart-point {
background: #3b82f6;
border: 2px solid #fff;
width: 16px;
height: 16px;
border-radius: 50%;
z-index: 2;
position: absolute;
transition: all 0.3s;
}
.chart-point.active {
background: #1e40af;
border-color: #3b82f6;
box-shadow: 0 0 12px #3b82f6;
}
/* Increase chart container height */
.chart-container {
height: 180px;
min-width: 300px;
position: relative;
}
/* Add padding to the net worth chart */
.net-worth-chart {
padding: 32px 24px 56px 24px;
}
/* Style for SVG line */
.chart-svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
}
@media (max-width: 600px) {
.hero-badges {
flex-direction: row !important;
justify-content: center;
gap: 10px !important;
align-items: center;
}
.badge {
font-size: 0.95rem !important;
padding: 8px 14px !important;
min-width: unset !important;
margin: 0 !important;
flex: 1 1 0;
display: flex;
align-items: center;
justify-content: center;
}
}
.retirement-feature .feature-icon {
width: 70px;
height: 70px;
background: linear-gradient(135deg, #1e40af 0%, #3be68f 100%);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 24px auto;
box-shadow: 0 4px 24px rgba(30,64,175,0.10);
}
.retirement-feature .feature-icon i {
color: #fff;
font-size: 2rem;
}
.mobile-feature {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
padding: 40px;
transition: all 0.3s ease;
max-width: 400px;
margin: 0 1rem;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
.mobile-feature:hover {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(59, 230, 143, 0.3);
transform: translateY(-5px);
}
/* Problem Solution Page Styles */
.problem-section {
padding: 6rem 0;
background: linear-gradient(135deg, rgba(21, 30, 46, 0.95) 0%, rgba(30, 41, 59, 0.95) 100%);
position: relative;
}
.problem-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
pointer-events: none;
}
.problem-header {
text-align: center;
margin-bottom: 4rem;
}
.problem-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
color: #fff;
padding: 0.5rem 1rem;
border-radius: 50px;
font-size: 0.9rem;
font-weight: 600;
margin-bottom: 1.5rem;
}
.problem-badge i {
font-size: 1rem;
}
.problem-header h2 {
font-size: 3rem;
font-weight: 800;
margin-bottom: 1.5rem;
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.problem-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.problem-card {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
padding: 2rem;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.problem-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}
.problem-card:hover {
transform: translateY(-4px);
box-shadow: 0 20px 40px rgba(239, 68, 68, 0.1);
border-color: rgba(239, 68, 68, 0.3);
}
.problem-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.5rem;
font-size: 1.5rem;
color: #fff;
}
.problem-card h3 {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 1rem;
color: #fff;
}
.problem-card p {
color: #94a3b8;
margin-bottom: 1.5rem;
line-height: 1.6;
}
.problem-example {
background: rgba(239, 68, 68, 0.1);
border: 1px solid rgba(239, 68, 68, 0.2);
border-radius: 12px;
padding: 1.5rem;
}
.example-header {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 1rem;
font-weight: 600;
color: #ef4444;
}
.example-list {
list-style: none;
padding: 0;
margin: 0;
}
.example-list li {
color: #94a3b8;
padding: 0.5rem 0;
border-bottom: 1px solid rgba(239, 68, 68, 0.1);
position: relative;
padding-left: 1.5rem;
}
.example-list li:last-child {
border-bottom: none;
}
.example-list li::before {
content: '✗';
position: absolute;
left: 0;
color: #ef4444;
font-weight: bold;
}
/* Comparison Section */
.comparison-section {
padding: 6rem 0;
background: linear-gradient(135deg, rgba(21, 30, 46, 0.95) 0%, rgba(30, 41, 59, 0.95) 100%);
}
.comparison-header {
text-align: center;
margin-bottom: 4rem;
}
.comparison-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
color: #fff;
padding: 0.5rem 1rem;
border-radius: 50px;
font-size: 0.9rem;
font-weight: 600;
margin-bottom: 1.5rem;
}
.comparison-badge i {
font-size: 1rem;
}
.comparison-header h2 {
font-size: 3rem;
font-weight: 800;
margin-bottom: 1.5rem;
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.comparison-table {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
overflow: hidden;
}
.comparison-row {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
transition: background 0.3s ease;
}
.comparison-row:last-child {
border-bottom: none;
}
.comparison-row.header {
background: rgba(16, 185, 129, 0.1);
border-bottom: 2px solid rgba(16, 185, 129, 0.3);
}
.comparison-feature {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 1.5rem;
font-weight: 600;
color: #e2e8f0;
border-right: 1px solid rgba(255, 255, 255, 0.1);
}
.comparison-feature i {
color: #10b981;
font-size: 1.2rem;
}
.comparison-vine {
display: flex;
align-items: flex-start;
gap: 0.75rem;
padding: 1.5rem;
border-right: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(16, 185, 129, 0.05);
}
.comparison-vine i {
color: #10b981;
font-size: 1.2rem;
margin-top: 0.25rem;
}
.comparison-competitor {
display: flex;
align-items: flex-start;
gap: 0.75rem;
padding: 1.5rem;
background: rgba(239, 68, 68, 0.05);
}
.comparison-competitor i {
color: #ef4444;
font-size: 1.2rem;
margin-top: 0.25rem;
}
.comparison-vine span,
.comparison-competitor span {
color: #94a3b8;
line-height: 1.6;
font-size: 0.95rem;
}
/* Benefits Section */
.benefits-section {
padding: 6rem 0;
background: linear-gradient(135deg, rgba(21, 30, 46, 0.95) 0%, rgba(30, 41, 59, 0.95) 100%);
}
.benefits-header {
text-align: center;
margin-bottom: 4rem;
}
.benefits-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
color: #fff;
padding: 0.5rem 1rem;
border-radius: 50px;
font-size: 0.9rem;
font-weight: 600;
margin-bottom: 1.5rem;
}
.benefits-badge i {
font-size: 1rem;
}
.benefits-header h2 {
font-size: 3rem;
font-weight: 800;
margin-bottom: 1.5rem;
background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.benefits-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.benefit-card {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
padding: 2rem;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.benefit-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
}
.benefit-card:hover {
transform: translateY(-4px);
box-shadow: 0 20px 40px rgba(59, 130, 246, 0.1);
border-color: rgba(59, 130, 246, 0.3);
}
.benefit-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.5rem;
font-size: 1.5rem;
color: #fff;
}
.benefit-card h3 {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 1rem;
color: #fff;
}
.benefit-card p {
color: #94a3b8;
margin-bottom: 1.5rem;
line-height: 1.6;
}
.benefit-highlight {
display: flex;
align-items: center;
gap: 0.5rem;
background: rgba(59, 130, 246, 0.1);
border: 1px solid rgba(59, 130, 246, 0.2);
border-radius: 8px;
padding: 0.75rem 1rem;
color: #3b82f6;
font-weight: 600;
font-size: 0.9rem;
}
/* Elevator Section */
.elevator-section {
padding: 6rem 0;
background: linear-gradient(135deg, rgba(21, 30, 46, 0.95) 0%, rgba(30, 41, 59, 0.95) 100%);
}
.elevator-content {
text-align: center;
max-width: 800px;
margin: 0 auto;
}
.elevator-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
color: #fff;
padding: 0.5rem 1rem;
border-radius: 50px;
font-size: 0.9rem;
font-weight: 600;
margin-bottom: 2rem;
}
.elevator-badge i {
font-size: 1rem;
}
.elevator-quote {
font-size: 1.5rem;
font-weight: 600;
color: #e2e8f0;
line-height: 1.6;
margin-bottom: 2rem;
font-style: italic;
position: relative;
padding: 0 2rem;
}
.elevator-quote::before,
.elevator-quote::after {
content: '"';
font-size: 3rem;
color: #8b5cf6;
position: absolute;
top: -1rem;
}
.elevator-quote::before {
left: 0;
}
.elevator-quote::after {
right: 0;
}
.elevator-author {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
}
.author-info {
text-align: center;
}
.author-name {
font-size: 1.2rem;
font-weight: 700;
color: #fff;
margin-bottom: 0.25rem;
}
.author-title {
color: #8b5cf6;
font-size: 0.9rem;
font-weight: 600;
}
/* Responsive Design for Problem Solution Page */
@media (max-width: 768px) {
.problem-header h2,
.comparison-header h2,
.benefits-header h2 {
font-size: 2rem;
}
.problem-grid,
.benefits-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.comparison-row {
grid-template-columns: 1fr;
gap: 1rem;
}
.comparison-feature,
.comparison-vine,
.comparison-competitor {
border-right: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
padding: 1rem;
}
.comparison-row:last-child .comparison-competitor {
border-bottom: none;
}
.elevator-quote {
font-size: 1.2rem;
padding: 0 1rem;
}
}
@media (max-width: 480px) {
.problem-header h2,
.comparison-header h2,
.benefits-header h2 {
font-size: 1.75rem;
}
.problem-card,
.benefit-card {
padding: 1.5rem;
}
.elevator-quote {
font-size: 1.1rem;
}
}