/* Reset and Base Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
/* Brand Colors - Updated to match NovoResume */
--primary-color: #6366f1;
--primary-hover: #4f46e5;
--primary-light: #eef2ff;
--secondary-color: #1f2937;
--accent-color: #10b981;
/* Grays */
--gray-50: #f9fafb;
--gray-100: #f3f4f6;
--gray-200: #e5e7eb;
--gray-300: #d1d5db;
--gray-400: #9ca3af;
--gray-500: #6b7280;
--gray-600: #4b5563;
--gray-700: #374151;
--gray-800: #1f2937;
--gray-900: #111827;
/* Status Colors */
--success-color: #10b981;
--warning-color: #f59e0b;
--error-color: #ef4444;
/* Typography */
--font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
--font-weight-light: 300;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--font-weight-extrabold: 800;
/* Spacing */
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.25rem;
--space-6: 1.5rem;
--space-8: 2rem;
--space-10: 2.5rem;
--space-12: 3rem;
--space-16: 4rem;
--space-20: 5rem;
--space-24: 6rem;
/* Border Radius */
--radius-sm: 0.375rem;
--radius-md: 0.5rem;
--radius-lg: 0.75rem;
--radius-xl: 1rem;
--radius-2xl: 1.5rem;
/* Shadows */
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
/* Transitions */
--transition-fast: 150ms ease-in-out;
--transition-normal: 250ms ease-in-out;
--transition-slow: 350ms ease-in-out;
/* Animation variables */
--animation-duration: 0.8s;
--animation-delay-increment: 0.1s;
/* Subtle, accessible focus ring */
--focus-ring-shadow: 0 0 0 2px #ffffff, 0 0 0 6px rgba(99, 102, 241, 0.18);
}
html {
scroll-behavior: smooth;
}
body {
font-family: var(--font-family);
font-weight: var(--font-weight-normal);
line-height: 1.6;
color: var(--gray-700);
background-color: #ffffff;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 var(--space-6);
}
@media (max-width: 768px) {
.container {
padding: 0 var(--space-4);
}
.hero-title {
font-size: 2.5rem;
}
.hero-subtitle {
font-size: 1.125rem;
}
.section-title {
font-size: 2rem;
}
.btn {
padding: 0.75rem 1.5rem;
font-size: 0.875rem;
}
}
/* Typography */
h1, h2, h3, h4, h5, h6 {
font-weight: var(--font-weight-bold);
line-height: 1.2;
color: var(--gray-900);
margin-bottom: var(--space-4);
}
h1 {
font-size: clamp(2rem, 5vw, 3.5rem);
font-weight: var(--font-weight-extrabold);
}
h2 {
font-size: clamp(1.75rem, 4vw, 2.5rem);
}
h3 {
font-size: clamp(1.25rem, 3vw, 1.5rem);
}
p {
margin-bottom: var(--space-4);
color: var(--gray-600);
}
.highlight {
background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* Buttons - Updated to match NovoResume style */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: 0.875rem 2rem;
font-weight: var(--font-weight-semibold);
font-size: 1rem;
border-radius: 0.5rem;
text-decoration: none;
border: 2px solid transparent;
transition: all 0.2s ease;
cursor: pointer;
white-space: nowrap;
}
.btn-primary {
background: var(--primary-color);
color: white;
box-shadow: 0 4px 14px 0 rgba(99, 102, 241, 0.25);
}
.btn-primary:hover {
background: var(--primary-hover);
transform: translateY(-1px);
box-shadow: 0 6px 20px 0 rgba(99, 102, 241, 0.35);
}
.btn-outline {
background: #ffffff;
color: var(--primary-color);
border-color: var(--primary-color);
border-width: 2px;
box-shadow: 0 6px 16px rgba(99, 102, 241, 0.12);
}
.btn-outline:hover {
background: var(--primary-color);
color: white;
}
.btn-large {
padding: var(--space-4) var(--space-8);
font-size: 1rem;
}
.btn-pricing {
width: 100%;
padding: var(--space-4) var(--space-6);
border-radius: 999px;
font-weight: 700;
}
/* Ensure outline buttons inside pricing cards are clearly visible */
.pricing-card .btn-outline.btn-pricing {
background: #ffffff;
color: var(--primary-color);
border-color: var(--primary-color);
}
.pricing-card .btn-outline.btn-pricing:hover {
background: var(--primary-color);
color: #ffffff;
}
/* Navigation */
.navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--gray-200);
z-index: 1000;
transition: all var(--transition-normal);
}
/* Help Center: Article page */
.help-article-page {
padding-top: 96px;
padding-bottom: var(--space-16);
background: #ffffff;
}
.help-breadcrumbs {
font-size: 0.875rem;
color: var(--gray-500);
margin-bottom: var(--space-4);
}
.help-breadcrumbs a {
color: var(--gray-600);
text-decoration: none;
}
.help-breadcrumbs a:hover { color: var(--primary-color); }
.help-article-layout {
display: grid;
grid-template-columns: 260px 1fr;
gap: var(--space-12);
}
@media (max-width: 992px) {
.help-article-layout { grid-template-columns: 1fr; }
}
.help-article-toc {
position: sticky;
top: 96px;
align-self: start;
padding: var(--space-6);
border: 1px solid var(--gray-200);
border-radius: var(--radius-lg);
background: var(--gray-50);
}
.help-article-toc h4 { margin-bottom: var(--space-3); }
.help-article-toc ul { list-style: none; }
.help-article-toc li { margin: var(--space-2) 0; }
.help-article-toc a {
color: var(--gray-700);
text-decoration: none;
font-size: 0.95rem;
}
.help-article-toc a:hover { color: var(--primary-color); }
.help-article-content {
padding: var(--space-8);
border: 1px solid var(--gray-200);
border-radius: var(--radius-lg);
background: #fff;
}
.help-article-content h2 { margin-top: var(--space-6); }
.help-article-content h3 { margin-top: var(--space-5); }
/* Custom small-section element for compact sections */
small-section {
display: block;
padding: var(--space-8); /* default fallback to maintain spacing where not overridden */
}
/* Article pages use compact spacing of 2rem */
.help-article-content small-section {
padding: var(--space-8); /* 2rem */
}
/* Ensure outline buttons are readable on article pages (light background) */
.help-article-content .btn-outline,
.article-modal-footer .btn.btn-secondary,
.help-article-feedback .btn.btn-outline {
background: #ffffff;
color: var(--primary-color);
border-color: var(--primary-color);
}
.help-article-content .btn-outline:hover,
.help-article-feedback .btn.btn-outline:hover {
background: var(--primary-color);
color: #ffffff;
}
.help-article-content pre, .help-article-content code {
background: var(--gray-50);
border: 1px solid var(--gray-200);
border-radius: var(--radius-sm);
}
.help-article-content pre {
padding: var(--space-4);
overflow: auto;
}
.help-article-meta {
display: flex;
gap: var(--space-4);
align-items: center;
color: var(--gray-500);
font-size: 0.9rem;
margin-bottom: var(--space-4);
}
.help-article-feedback {
display: flex;
align-items: center;
gap: var(--space-3);
margin-top: var(--space-8);
padding-top: var(--space-4);
border-top: 1px solid var(--gray-200);
}
.help-related {
margin-top: var(--space-12);
}
.help-related h3 { margin-bottom: var(--space-4); }
.help-related .related-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-6);
}
@media (max-width: 768px) {
.help-related .related-grid { grid-template-columns: 1fr; }
}
.nav-container {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-4) var(--space-6);
max-width: 1200px;
margin: 0 auto;
position: relative;
}
.nav-brand {
display: flex;
align-items: center;
gap: var(--space-3);
font-weight: var(--font-weight-bold);
font-size: 1.25rem;
color: var(--gray-900);
text-decoration: none;
}
/* Ensure brand link (logo + text) is aligned and not purple/underlined */
.nav-brand a {
display: inline-flex;
align-items: center;
gap: var(--space-2);
text-decoration: none;
color: var(--gray-900);
}
.nav-brand a:hover .nav-brand-text { color: var(--primary-color); }
.nav-brand-text { line-height: 1; display: inline-block; }
.nav-logo {
width: 40px;
height: 40px;
object-fit: contain;
}
.nav-menu {
display: flex;
align-items: center;
gap: var(--space-8);
}
.nav-link {
font-weight: var(--font-weight-medium);
color: var(--gray-700);
text-decoration: none;
transition: color var(--transition-normal);
}
.nav-link:hover {
color: var(--primary-color);
}
.nav-actions {
display: flex;
align-items: center;
gap: var(--space-4);
}
.nav-toggle {
display: none;
flex-direction: column;
gap: 4px;
cursor: pointer;
}
.nav-toggle span {
width: 24px;
height: 3px;
background: var(--gray-700);
border-radius: 2px;
transition: all var(--transition-normal);
transform-origin: center;
}
/* Navbar scrolled state */
.navbar.scrolled {
background: rgba(255, 255, 255, 0.98);
box-shadow: var(--shadow-sm);
}
/* Hamburger active (X) state */
.nav-toggle.active span:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.nav-toggle.active span:nth-child(2) {
opacity: 0;
}
.nav-toggle.active span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
@media (max-width: 768px) {
.nav-container { padding: var(--space-3) var(--space-4); }
.nav-brand { gap: var(--space-2); }
.nav-brand-text { font-size: 1.125rem; }
.nav-logo { width: 32px; height: 32px; }
.nav-menu {
display: none;
position: absolute;
top: 100%;
left: var(--space-4);
right: var(--space-4);
z-index: 1001;
background: #ffffff;
border: 1px solid var(--gray-200);
border-radius: 12px;
box-shadow: var(--shadow-lg);
flex-direction: column;
align-items: stretch;
gap: 0;
padding: var(--space-2) var(--space-3);
margin-top: var(--space-3);
opacity: 0;
transform: translateY(-8px) scale(0.98);
transition: opacity var(--transition-normal), transform var(--transition-normal);
}
.nav-menu.active {
display: flex;
opacity: 1;
transform: translateY(0) scale(1);
}
.nav-link {
padding: var(--space-3) var(--space-2);
border-radius: 8px;
}
.nav-link:hover { background: var(--gray-100); }
.nav-actions { display: none; }
.nav-toggle { display: flex; }
/* Mobile CTA inside menu */
.nav-cta-mobile {
display: block;
width: 100%;
margin-top: var(--space-2);
text-align: center;
}
}
/* Hide mobile CTA on desktop */
@media (min-width: 769px) {
.nav-cta-mobile { display: none !important; }
}
/* Index page: make containers full-bleed on mobile */
@media (max-width: 768px) {
body.index-page .container {
max-width: 100%;
width: 100%;
padding-left: 0;
padding-right: 0;
}
/* Fix inner elements to prevent overflow */
body.index-page .hero-content,
body.index-page .hero-cta,
body.index-page section > .container > *:not(.hero-visual) {
padding-left: var(--space-4);
padding-right: var(--space-4);
}
/* Ensure job titles wrap properly */
body.index-page .job-title {
white-space: normal;
line-height: 1.3;
font-size: 0.85rem;
}
/* Prevent hero visual from overflowing */
body.index-page .hero-visual {
padding-left: var(--space-4);
padding-right: var(--space-4);
}
/* Company logos grid responsive */
body.index-page .logos-grid {
padding-left: var(--space-4);
padding-right: var(--space-4);
grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
}
/* Section content padding */
body.index-page .section-title,
body.index-page .section-subtitle,
body.index-page .hero-stats,
body.index-page .featured-logos {
padding-left: var(--space-4);
padding-right: var(--space-4);
}
}
/* Overlay behind the mobile menu */
.nav-overlay {
display: none;
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(15, 23, 42, 0.35);
backdrop-filter: blur(2px);
z-index: 900; /* below navbar/menu but above page content */
}
.nav-overlay.active { display: block; }
/* Prevent background scroll when mobile menu is open */
body.menu-open { overflow: hidden; }
/* Hero Section - Updated to match NovoResume */
.hero {
padding: calc(80px + 5rem) 0 5rem;
background: radial-gradient(1200px 600px at 70% -10%, rgba(99,102,241,0.12), rgba(99,102,241,0)) ,
linear-gradient(180deg, #fbfdff 0%, #f8fafc 100%);
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,') center/cover no-repeat;
opacity: 0.5;
pointer-events: none;
}
.hero .container {
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: var(--space-16);
align-items: center;
position: relative;
z-index: 1;
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-4);
background: var(--primary-light);
color: var(--primary-color);
border-radius: var(--radius-2xl);
font-size: 0.875rem;
font-weight: var(--font-weight-medium);
margin-bottom: var(--space-6);
}
.hero-title {
font-size: clamp(2.25rem, 4vw + 1rem, 3.75rem);
font-weight: 900;
line-height: 1.08;
margin-bottom: var(--space-6);
color: var(--gray-900);
letter-spacing: -0.03em;
}
.hero-subtitle {
font-size: 1.125rem;
color: var(--gray-600);
margin-bottom: var(--space-6);
line-height: 1.6;
}
.hero-cta {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-3);
margin-bottom: var(--space-10);
}
/* CTA glass bar */
.hero-cta .btn {
box-shadow: 0 12px 28px rgba(99,102,241,0.25);
}
.hero-cta .btn.btn-primary {
background: linear-gradient(135deg, var(--primary-color), #8b5cf6);
}
.hero-guarantee {
color: var(--gray-500);
font-size: 0.875rem;
margin-top: var(--space-3);
}
/* Hero Featured Section */
.hero-featured {
margin-top: var(--space-12);
text-align: center;
}
.featured-text {
font-size: 1rem;
color: var(--gray-600);
margin-bottom: var(--space-6);
font-weight: var(--font-weight-semibold);
letter-spacing: .3px;
}
.featured-logos {
display: flex;
justify-content: center;
align-items: center;
gap: var(--space-10);
flex-wrap: wrap;
}
.featured-logo-wrapper {
display: flex;
align-items: center;
justify-content: center;
height: 42px;
}
.featured-logo {
height: 64px;
width: auto;
max-width: 140px;
opacity: 0.8;
filter: grayscale(100%);
transition: all var(--transition-normal);
}
.featured-logo:hover {
opacity: 1;
filter: grayscale(0%);
transform: scale(1.07);
}
.featured-logo-fallback {
font-size: 0.9rem;
color: var(--gray-600);
font-weight: var(--font-weight-semibold);
padding: var(--space-1) var(--space-2);
border: 1px solid var(--gray-300);
border-radius: 6px;
}
/* Post-hero support section */
.hero-support {
padding: var(--space-6) 0 var(--space-2);
background: linear-gradient(180deg, rgba(248,250,252,0), rgba(248,250,252,1) 60%);
}
.hero-support .hero-stats {
margin-top: var(--space-8);
}
.hero-stats {
display: flex;
flex-wrap: wrap;
gap: var(--space-6);
}
.stat {
position: relative;
text-align: center;
padding: 1rem 1.25rem;
background: rgba(255,255,255,0.65);
border: 1px solid rgba(255,255,255,0.6);
border-radius: 16px;
box-shadow: 0 20px 40px rgba(15,23,42,0.08), 0 2px 8px rgba(15,23,42,0.06);
backdrop-filter: blur(8px) saturate(120%);
-webkit-backdrop-filter: blur(8px) saturate(120%);
overflow: hidden;
transition: transform .3s ease, box-shadow .3s ease;
}
/* Ensure equal widths across row */
.hero-stats .stat { flex: 1 1 240px; }
@media (max-width: 768px) {
.hero-stats { gap: var(--space-4); }
}
.stat::before {
content: "";
position: absolute;
top: -40%;
left: -10%;
width: 60%;
height: 180%;
background: radial-gradient(120px 120px at 50% 50%, rgba(99,102,241,0.12), rgba(255,255,255,0));
transform: rotate(25deg);
}
.stat:hover {
transform: translateY(-4px);
box-shadow: 0 28px 60px rgba(15,23,42,0.12), 0 6px 16px rgba(15,23,42,0.08);
}
.stat-number { display: block; font-size: 2rem; font-weight: 900; background: linear-gradient(135deg, var(--primary-color), #8b5cf6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1; letter-spacing: -0.02em; }
.stat-label { color: var(--gray-700); font-size: 0.9rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
@media (max-width: 1024px) {
.hero .container { grid-template-columns: 1fr; gap: var(--space-10); }
.hero-visual { order: -1; }
}
@media (max-width: 768px) {
.hero-visual { order: 1; }
.hero-content { order: 0; }
}
@media (max-width: 768px) {
.hero-packaging-showcase {
grid-template-columns: 1fr 1fr;
grid-template-rows: repeat(3, 1fr);
gap: 12px;
padding: 16px;
}
.dashboard-card { padding: 16px; }
.score-circle { width: 80px; height: 80px; }
.score-circle svg { width: 80px; height: 80px; }
.score-circle circle { r: 28; }
.score-value { font-size: 1.5rem; }
}
/* Hero Visual - Personal Qualities Packaging Showcase */
.hero-packaging-showcase {
position: relative;
width: 100%;
aspect-ratio: 16 / 10;
min-height: 420px;
background: linear-gradient(180deg, rgba(248,250,252,0.7), rgba(241,245,249,0.35));
border: 1px solid transparent;
border-radius: 18px;
box-shadow: 0 24px 60px rgba(15,23,42,0.08), 0 2px 10px rgba(15,23,42,0.06);
margin-bottom: var(--space-8);
overflow: hidden;
padding: 56px 24px 24px;
backdrop-filter: blur(12px) saturate(140%);
-webkit-backdrop-filter: blur(12px) saturate(140%);
transform-style: preserve-3d;
transform: perspective(1200px) rotateX(var(--tiltX, 0deg)) rotateY(var(--tiltY, 0deg));
transition: transform .2s ease-out, box-shadow .3s ease;
background-image:
radial-gradient(1200px 600px at 85% -20%, rgba(99,102,241,0.12), rgba(99,102,241,0)),
radial-gradient(800px 400px at 10% 110%, rgba(6, 182, 212, 0.10), rgba(6, 182, 212, 0)),
linear-gradient(180deg, rgba(255,255,255,0.75), rgba(255,255,255,0.35));
}
/* Browser-like chrome */
.hero-packaging-showcase::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 40px;
background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.55));
border-bottom: 1px solid rgba(226,232,240,0.9);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
z-index: 2;
}
.hero-packaging-showcase::after {
content: "";
position: absolute;
top: 12px;
left: 16px;
width: 44px;
height: 12px;
background:
radial-gradient(circle at 6px 6px, #ef4444 5px, transparent 6px),
radial-gradient(circle at 22px 6px, #f59e0b 5px, transparent 6px),
radial-gradient(circle at 38px 6px, #10b981 5px, transparent 6px);
z-index: 3;
}
/* Jobs board visual inside the window */
.jobs-board {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
height: 100%;
overflow: hidden;
}
.job-card {
background: rgba(255,255,255,0.8);
border: 1px solid rgba(226,232,240,0.9);
border-radius: 12px;
padding: 12px;
box-shadow: 0 6px 16px rgba(15,23,42,0.06);
display: flex;
flex-direction: column;
gap: 10px;
max-width: 360px;
}
.job-header { display: flex; align-items: center; gap: 12px; }
.job-logo { width: 36px; height: 36px; border-radius: 8px; background: #eef2ff; color: #6366f1; display: flex; align-items: center; justify-content: center; font-weight: 800; overflow: hidden; }
.job-logo img { width: 100%; height: 100%; object-fit: contain; }
.job-meta { flex: 1; min-width: 0; }
.job-title { font-weight: 800; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.job-company { font-size: 0.8rem; color: #64748b; }
.job-actions { display: flex; align-items: center; gap: 10px; color: #64748b; }
.job-actions i { opacity: 0.9; }
.status-bar {
margin-top: 6px;
padding: 8px 10px;
border-radius: 8px;
font-size: 0.85rem;
font-weight: 700;
display: flex;
align-items: center;
gap: 8px;
}
.status-bar.saved { background: rgba(16,185,129,0.15); color: #047857; }
.status-bar.applied { background: rgba(59,130,246,0.15); color: #1d4ed8; }
.status-bar.interviewing { background: rgba(99,102,241,0.12); color: var(--primary-color); }
.status-bar.negotiating { background: rgba(245,158,11,0.15); color: #b45309; }
.status-bar.accepted { background: rgba(16,185,129,0.18); color: #065f46; }
@media (max-width: 768px) {
.jobs-board { grid-template-columns: 1fr; gap: 12px; }
}
/* Hero visual mobile sizing improvements */
@media (max-width: 768px) {
.hero-visual { max-width: 100%; width: 100%; }
.hero-packaging-showcase {
aspect-ratio: 16 / 11;
min-height: 260px;
padding: 40px 16px 16px;
margin-bottom: var(--space-6);
border-radius: 14px;
}
.job-logo { width: 30px; height: 30px; }
.job-title { font-size: 0.95rem; }
.job-company { font-size: 0.75rem; }
}
/* Raw Qualities (Left Side) */
.raw-qualities { display: none; }
.quality-cluster {
border-radius: var(--radius-xl);
padding: 0.875rem 1.25rem;
box-shadow: 0 10px 24px rgba(15,23,42,0.12);
border: 1px solid rgba(255,255,255,0.25);
min-width: 180px;
height: 72px;
display: flex;
align-items: center;
gap: 0.75rem;
animation: float 3s ease-in-out infinite;
transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
cursor: pointer;
backdrop-filter: blur(6px);
}
.quality-cluster:hover {
transform: translateY(-4px) scale(1.03);
box-shadow: 0 16px 36px rgba(15,23,42,0.18);
}
.quality-cluster:nth-child(1) { animation-delay: 0s; }
.quality-cluster:nth-child(2) { animation-delay: 0.3s; }
.quality-cluster:nth-child(3) { animation-delay: 0.6s; }
.quality-cluster:nth-child(4) { animation-delay: 0.9s; }
.quality-cluster:nth-child(5) { animation-delay: 1.2s; }
.quality-cluster:nth-child(6) { animation-delay: 1.5s; }
.cluster-icon { width: 36px; height: 36px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; color: #fff; background: rgba(255,255,255,0.15); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25), 0 4px 12px rgba(0,0,0,0.12); flex-shrink: 0; }
.cluster-title {
font-size: 0.875rem;
font-weight: var(--font-weight-bold);
text-transform: uppercase;
letter-spacing: 0.5px;
margin: 0;
color: white;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
/* Individual Quality Cluster Colors */
.skills-cluster {
background: linear-gradient(135deg, #3b82f6, #1d4ed8);
}
.experience-cluster {
background: linear-gradient(135deg, #10b981, #047857);
}
.achievements-cluster {
background: linear-gradient(135deg, #f59e0b, #d97706);
}
.personality-cluster {
background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}
.education-cluster {
background: linear-gradient(135deg, #ef4444, #dc2626);
}
.portfolio-cluster {
background: linear-gradient(135deg, #ec4899, #be185d);
}
/* AI Packaging Center */
.ai-packaging-center { display: none; }
.ai-processor {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-3);
}
.ai-brain { position: relative; width: 110px; height: 110px; background: radial-gradient(60px 60px at 50% 40%, var(--primary-color), #4f46e5); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 20px 40px rgba(99,102,241,0.35), 0 0 0 8px rgba(99,102,241,0.10); animation: aiPulse 2s ease-in-out infinite; border: 1px solid rgba(255,255,255,0.35); }
.ai-brain i {
font-size: 2.5rem;
color: white;
}
.processing-rings {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.ai-brain::before { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 2px dashed rgba(255,255,255,0.35); animation: rotate 10s linear infinite; }
.ring { position: absolute; border: 2px solid rgba(99,102,241,0.35); border-radius: 50%; animation: ringPulse 2s ease-in-out infinite; box-shadow: 0 0 20px rgba(99,102,241,0.25); }
.ring-1 {
width: 120px;
height: 120px;
top: -60px;
left: -60px;
animation-delay: 0s;
}
.ring-2 {
width: 140px;
height: 140px;
top: -70px;
left: -70px;
animation-delay: 0.7s;
}
.ring-3 {
width: 160px;
height: 160px;
top: -80px;
left: -80px;
animation-delay: 1.4s;
}
.ai-label {
font-size: 0.875rem;
font-weight: var(--font-weight-bold);
color: var(--primary-color);
text-transform: uppercase;
letter-spacing: 1px;
}
.transformation-particles {
position: absolute;
width: 100%;
height: 100%;
pointer-events: none;
}
.particle {
position: absolute;
width: 6px;
height: 6px;
background: var(--primary-color);
border-radius: 50%;
animation: particleFlow 3s ease-in-out infinite;
}
.particle-1 { top: 20%; left: -10%; animation-delay: 0s; }
.particle-2 { top: 40%; left: -15%; animation-delay: 0.5s; }
.particle-3 { top: 60%; left: -10%; animation-delay: 1s; }
.particle-4 { top: 20%; right: -10%; animation-delay: 1.5s; }
.particle-5 { top: 40%; right: -15%; animation-delay: 2s; }
.particle-6 { top: 60%; right: -10%; animation-delay: 2.5s; }
/* Perfectly Packaged Resume (Right Side) */
.packaged-result { display: contents; }
.perfect-resume { display: none; }
.resume-glow {
position: absolute;
top: -10px;
left: -10px;
right: -10px;
bottom: -10px;
background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
border-radius: var(--radius-xl);
opacity: 0.2;
animation: glowPulse 3s ease-in-out infinite;
z-index: 1;
}
/* Dashboard Cards */
.dashboard-card {
background: rgba(255,255,255,0.65);
border-radius: 16px;
padding: 18px;
box-shadow: 0 20px 40px rgba(15,23,42,0.08), 0 2px 8px rgba(15,23,42,0.06);
border: 1px solid rgba(255,255,255,0.6);
animation: fadeInUp .4s ease both;
backdrop-filter: blur(8px) saturate(120%);
-webkit-backdrop-filter: blur(8px) saturate(120%);
transform: translateZ(var(--depth, 0px)) translateY(0);
transition: transform .35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow .35s ease;
}
.dashboard-card:nth-child(1) { animation-delay: 0s; }
.dashboard-card:nth-child(2) { animation-delay: 0.1s; }
.dashboard-card:nth-child(3) { animation-delay: 0.2s; }
.dashboard-card:nth-child(4) { animation-delay: 0.3s; }
.dashboard-card:nth-child(5) { animation-delay: 0.4s; }
.dashboard-card:nth-child(6) { animation-delay: 0.5s; }
/* Parallax depth layering */
.dashboard-card:nth-child(1) { --depth: 36px; }
.dashboard-card:nth-child(2) { --depth: 24px; }
.dashboard-card:nth-child(3) { --depth: 30px; }
.dashboard-card:nth-child(4) { --depth: 20px; }
.dashboard-card:nth-child(5) { --depth: 28px; }
.dashboard-card:nth-child(6) { --depth: 22px; }
.dashboard-card:hover {
transform: translateZ(calc(var(--depth, 0px) + 18px)) translateY(-4px);
box-shadow: 0 28px 60px rgba(15,23,42,0.12), 0 6px 16px rgba(15,23,42,0.08);
}
/* Score Card */
.score-card { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.score-circle { position: relative; width: 120px; height: 120px; }
.score-circle svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.score-circle circle { fill: none; stroke-width: 8; }
.score-bg { stroke: #e2e8f0; }
.score-fill { stroke: var(--primary-color); stroke-linecap: round; stroke-dasharray: 251; stroke-dashoffset: 75; transition: stroke-dashoffset 1s ease-in-out; filter: drop-shadow(0 4px 10px rgba(99,102,241,0.35)); }
.score-text { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.score-value { font-size: 2rem; font-weight: 900; color: var(--gray-900); line-height: 1; }
.score-label { font-size: 0.875rem; color: var(--gray-600); font-weight: 600; }
.score-card:hover .score-circle {
transform: scale(1.02);
}
/* Applications Card */
.applications-card h4 { margin: 0 0 12px; font-size: 1rem; color: var(--gray-900); font-weight: 700; }
.apps-stats { display: flex; gap: 16px; margin-bottom: 16px; }
.app-stat { text-align: center; }
.app-stat-number { display: block; font-size: 1.5rem; font-weight: 800; color: var(--primary-color); line-height: 1; }
.app-stat-label { font-size: 0.75rem; color: var(--gray-600); font-weight: 600; text-transform: uppercase; letter-spacing: .4px; }
.recent-apps { display: flex; flex-direction: column; gap: 8px; }
.app-item { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; background: #f8fafc; border-radius: 8px; }
.app-company { font-size: 0.875rem; font-weight: 600; color: var(--gray-800); }
.app-status { font-size: 0.75rem; padding: 4px 8px; border-radius: 4px; font-weight: 600; }
.app-status.interview { background: rgba(99,102,241,0.1); color: var(--primary-color); }
.app-status.applied { background: rgba(16,185,129,0.1); color: #059669; }
/* Keywords Card */
.keywords-card h4 { margin: 0 0 12px; font-size: 1rem; color: var(--gray-900); font-weight: 700; }
.keyword-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.keyword-tag { padding: 4px 8px; border-radius: 6px; font-size: 0.75rem; font-weight: 600; }
.keyword-tag.primary { background: rgba(99,102,241,0.1); color: var(--primary-color); }
.keyword-tag.success { background: rgba(16,185,129,0.1); color: #059669; }
.keyword-tag.warning { background: rgba(245,158,11,0.1); color: #d97706; }
/* Progress Card */
.progress-card h4 { margin: 0 0 16px; font-size: 1rem; color: var(--gray-900); font-weight: 700; }
.progress-items { display: flex; flex-direction: column; gap: 12px; }
.progress-item { display: flex; justify-content: space-between; align-items: center; }
.progress-label { font-size: 0.875rem; color: var(--gray-700); font-weight: 500; }
.progress-bar { width: 60px; height: 6px; background: #e2e8f0; border-radius: 3px; overflow: hidden; }
.progress-fill { height: 100%; border-radius: 3px; transition: width .6s ease; }
.progress-fill.high { background: var(--primary-color); width: 85%; }
.progress-fill.medium { background: #f59e0b; width: 65%; }
.progress-fill.low { background: #ef4444; width: 35%; }
/* Analytics Card */
.analytics-card h4 { margin: 0 0 16px; font-size: 1rem; color: var(--gray-900); font-weight: 700; }
.metric-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.metric-item { text-align: center; }
.metric-number { display: block; font-size: 1.25rem; font-weight: 800; color: var(--primary-color); line-height: 1; }
.metric-desc { font-size: 0.75rem; color: var(--gray-600); font-weight: 500; margin-top: 2px; }
/* Insights Card */
.insights-card h4 { margin: 0 0 12px; font-size: 1rem; color: var(--gray-900); font-weight: 700; }
.insight-item { display: flex; align-items: flex-start; gap: 8px; padding: 8px 0; }
.insight-icon { width: 6px; height: 6px; border-radius: 50%; background: var(--primary-color); margin-top: 6px; flex-shrink: 0; }
.insight-text { font-size: 0.8rem; color: var(--gray-700); line-height: 1.4; }
.profile-section .name {
font-size: 1.25rem;
font-weight: var(--font-weight-bold);
color: var(--gray-900);
margin-bottom: var(--space-1);
}
.profile-section .title {
font-size: 0.875rem;
color: var(--primary-color);
font-weight: var(--font-weight-semibold);
}
.metrics-section {
display: flex;
gap: var(--space-3);
}
.metrics-section .metric {
text-align: center;
padding: var(--space-2);
background: var(--primary-light);
border-radius: var(--radius-md);
}
.metrics-section .metric-value {
display: block;
font-size: 1.25rem;
font-weight: var(--font-weight-bold);
color: var(--primary-color);
}
.metrics-section .metric-label {
display: block;
font-size: 0.625rem;
color: var(--gray-600);
text-transform: uppercase;
}
.optimized-section {
margin-bottom: var(--space-4);
}
.section-header {
font-size: 0.75rem;
font-weight: var(--font-weight-bold);
text-transform: uppercase;
letter-spacing: 1px;
color: var(--primary-color);
margin-bottom: var(--space-2);
}
.optimized-content {
display: flex;
flex-direction: column;
gap: 2px;
}
.content-line {
height: 4px;
background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
border-radius: 2px;
box-shadow: 0 0 8px rgba(99, 102, 241, 0.3);
animation: contentShimmer 2s ease-in-out infinite;
}
.content-line.short {
width: 70%;
}
.achievement-highlights {
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.highlight-item {
font-size: 0.75rem;
color: var(--gray-700);
padding: var(--space-1);
background: var(--gray-50);
border-radius: var(--radius-sm);
}
.skills-optimized {
display: flex;
gap: var(--space-1);
flex-wrap: wrap;
}
.skill-optimized {
background: var(--primary-color);
color: white;
padding: var(--space-1) var(--space-2);
border-radius: var(--radius-sm);
font-size: 0.625rem;
font-weight: var(--font-weight-semibold);
}
.perfection-badge {
position: absolute;
top: -8px;
right: -8px;
background: linear-gradient(135deg, var(--accent-color), #f97316);
color: white;
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-lg);
font-size: 0.75rem;
font-weight: var(--font-weight-semibold);
display: flex;
align-items: center;
gap: var(--space-1);
box-shadow: var(--shadow-md);
animation: badgePulse 2s ease-in-out infinite;
z-index: 3;
}
/* Transformation Flow Lines */
.transformation-flow, .transformation-particles { display: none; }
.flow-line { stroke: var(--primary-color); stroke-width: 2.5; fill: none; opacity: 0.6; animation: flowDash 4s ease-in-out infinite; stroke-linecap: round; filter: drop-shadow(0 2px 6px rgba(99,102,241,0.35)); }
.flow-1 { animation-delay: 0s; }
.flow-2 { animation-delay: 0.5s; }
.flow-3 { animation-delay: 1s; }
.flow-4 { animation-delay: 1.5s; }
.flow-5 { animation-delay: 2s; }
.flow-6 { animation-delay: 2.5s; }
.flow-7 { animation-delay: 3s; }
.flow-8 { animation-delay: 3.5s; }
.central-resume {
position: relative;
z-index: 5;
}
.resume-document {
width: 240px;
height: 320px;
background: white;
border-radius: var(--radius-xl);
box-shadow: 0 14px 24px rgba(15,23,42,0.08);
padding: var(--space-6);
position: relative;
border: 1px solid var(--gray-200);
animation: none;
}
.resume-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--space-6);
padding-bottom: var(--space-3);
border-bottom: 2px solid var(--gray-200);
}
.resume-title {
font-size: 1.125rem;
font-weight: var(--font-weight-bold);
color: var(--gray-900);
}
.ats-score {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-1);
}
.score-label {
font-size: 0.75rem;
color: var(--gray-500);
font-weight: var(--font-weight-medium);
}
.score-value {
font-size: 1.25rem;
font-weight: var(--font-weight-extrabold);
color: var(--success-color);
}
.resume-body {
margin-bottom: var(--space-6);
}
.resume-section {
margin-bottom: var(--space-6);
}
.section-title {
font-size: 0.875rem;
font-weight: var(--font-weight-semibold);
color: var(--gray-700);
margin-bottom: var(--space-3);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.resume-line {
height: 6px;
background: var(--gray-200);
border-radius: 3px;
margin-bottom: var(--space-2);
transition: all var(--transition-normal);
}
.resume-line.enhanced {
background: linear-gradient(90deg, var(--primary-color), var(--success-color));
box-shadow: 0 0 8px rgba(81, 131, 240, 0.3);
}
.resume-line.short {
width: 70%;
}
.skills-grid {
display: flex;
gap: var(--space-2);
flex-wrap: wrap;
}
.skill-tag {
background: var(--primary-light);
color: var(--primary-color);
padding: var(--space-1) var(--space-2);
border-radius: var(--radius-sm);
font-size: 0.75rem;
font-weight: var(--font-weight-semibold);
}
.optimization-badge {
position: absolute;
top: -8px;
right: -8px;
background: linear-gradient(135deg, var(--accent-color), #f97316);
color: white;
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-lg);
font-size: 0.75rem;
font-weight: var(--font-weight-bold);
display: flex;
align-items: center;
gap: var(--space-1);
box-shadow: var(--shadow-md);
animation: badgePulse 2s ease-in-out infinite;
}
/* Floating Tech Icons */
.floating-tech-icon {
position: absolute;
width: 80px;
height: 80px;
background: white;
border-radius: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-shadow: var(--shadow-lg);
border: 3px solid;
cursor: pointer;
transition: all var(--transition-normal);
animation: float 3s ease-in-out infinite;
z-index: 15;
}
.floating-tech-icon:hover {
transform: translateY(-10px) scale(1.15);
box-shadow: var(--shadow-xl);
}
.floating-tech-icon i {
font-size: 1.5rem;
margin-bottom: var(--space-1);
}
.icon-label {
font-size: 0.625rem;
font-weight: var(--font-weight-semibold);
text-align: center;
line-height: 1.2;
}
/* Individual Icon Color Schemes */
.icon-1 {
border-color: #3b82f6;
background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
}
.icon-1 i {
color: #3b82f6;
}
.icon-1 .icon-label {
color: #1e40af;
}
.icon-2 {
border-color: #8b5cf6;
background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);
}
.icon-2 i {
color: #8b5cf6;
}
.icon-2 .icon-label {
color: #6d28d9;
}
.icon-3 {
border-color: #10b981;
background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
}
.icon-3 i {
color: #10b981;
}
.icon-3 .icon-label {
color: #047857;
}
.icon-4 {
border-color: #f59e0b;
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
}
.icon-4 i {
color: #f59e0b;
}
.icon-4 .icon-label {
color: #92400e;
}
.icon-5 {
border-color: #ef4444;
background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
}
.icon-5 i {
color: #ef4444;
}
.icon-5 .icon-label {
color: #991b1b;
}
.icon-6 {
border-color: #06b6d4;
background: linear-gradient(135deg, #cffafe 0%, #a5f3fc 100%);
}
.icon-6 i {
color: #06b6d4;
}
.icon-6 .icon-label {
color: #0e7490;
}
.icon-7 {
border-color: #8b5cf6;
background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 100%);
}
.icon-7 i {
color: #8b5cf6;
}
.icon-7 .icon-label {
color: #5b21b6;
}
.icon-8 {
border-color: #f97316;
background: linear-gradient(135deg, #fed7aa 0%, #fdba74 100%);
}
.icon-8 i {
color: #f97316;
}
.icon-8 .icon-label {
color: #9a3412;
}
/* Tech Icon Positions */
.icon-1 { top: 20%; left: 10%; animation-delay: 0s; }
.icon-2 { top: 10%; right: 20%; animation-delay: 0.5s; }
.icon-3 { top: 30%; right: 5%; animation-delay: 1s; }
.icon-4 { bottom: 30%; right: 10%; animation-delay: 1.5s; }
.icon-5 { bottom: 20%; left: 15%; animation-delay: 2s; }
.icon-6 { top: 60%; left: 5%; animation-delay: 2.5s; }
.icon-7 { bottom: 10%; right: 30%; animation-delay: 3s; }
.icon-8 { top: 45%; left: 2%; animation-delay: 3.5s; }
/* Connection Lines */
.connection-lines {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
pointer-events: none;
}
.connection-line {
stroke-dashoffset: 50;
animation: dash 4s ease-in-out infinite;
stroke-width: 2;
opacity: 0.4;
}
/* Individual Connection Line Colors */
.line-1 { stroke: #3b82f6; animation-delay: 0s; }
.line-2 { stroke: #8b5cf6; animation-delay: 0.5s; }
.line-3 { stroke: #10b981; animation-delay: 1s; }
.line-4 { stroke: #f59e0b; animation-delay: 1.5s; }
.line-5 { stroke: #ef4444; animation-delay: 2s; }
.line-6 { stroke: #06b6d4; animation-delay: 2.5s; }
.line-7 { stroke: #8b5cf6; animation-delay: 3s; }
.line-8 { stroke: #f97316; animation-delay: 3.5s; }
/* Animations */
@keyframes float {
0%, 100% {
transform: translateY(0px);
}
50% {
transform: translateY(-15px);
}
}
@keyframes resumePulse {
0%, 100% {
transform: scale(1);
box-shadow: var(--shadow-xl);
}
50% {
transform: scale(1.02);
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
}
@keyframes badgePulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
}
@keyframes dash {
0% {
stroke-dashoffset: 50;
opacity: 0.1;
}
50% {
stroke-dashoffset: 0;
opacity: 0.6;
}
100% {
stroke-dashoffset: -50;
opacity: 0.1;
}
}
/* New animations for personal qualities packaging */
@keyframes aiPulse {
0%, 100% {
transform: scale(1);
box-shadow: 0 10px 30px rgba(99, 102, 241, 0.3);
}
50% {
transform: scale(1.05);
box-shadow: 0 15px 40px rgba(99, 102, 241, 0.5);
}
}
@keyframes ringPulse {
0% {
opacity: 0;
transform: scale(0.8);
}
50% {
opacity: 0.6;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(1.2);
}
}
@keyframes particleFlow {
0% {
opacity: 0;
transform: translateX(0) scale(0.5);
}
50% {
opacity: 1;
transform: translateX(50px) scale(1);
}
100% {
opacity: 0;
transform: translateX(100px) scale(0.5);
}
}
@keyframes perfectFloat {
0%, 100% {
transform: translateY(0px) rotate(0deg);
}
33% {
transform: translateY(-8px) rotate(1deg);
}
66% {
transform: translateY(-4px) rotate(-0.5deg);
}
}
@keyframes glowPulse {
0%, 100% {
opacity: 0.2;
transform: scale(1);
}
50% {
opacity: 0.4;
transform: scale(1.02);
}
}
@keyframes contentShimmer {
0%, 100% {
box-shadow: 0 0 8px rgba(99, 102, 241, 0.3);
}
50% {
box-shadow: 0 0 16px rgba(99, 102, 241, 0.6);
}
}
@keyframes flowDash {
0% {
stroke-dashoffset: 20;
opacity: 0.3;
}
50% {
stroke-dashoffset: 0;
opacity: 0.8;
}
100% {
stroke-dashoffset: -20;
opacity: 0.3;
}
}
/* Hero Metrics */
.hero-metrics {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-6);
padding: var(--space-6);
background: white;
border-radius: var(--radius-xl);
box-shadow: var(--shadow-md);
border: 1px solid var(--gray-200);
overflow: hidden;
}
.metric-item {
display: flex;
align-items: center;
gap: var(--space-3);
text-align: left;
}
.metric-icon {
width: 48px;
height: 48px;
background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.25rem;
flex-shrink: 0;
}
.metric-content {
flex: 1;
}
.metric-number {
font-size: 1.5rem;
font-weight: var(--font-weight-extrabold);
color: var(--gray-900);
line-height: 1;
}
.metric-label {
color: var(--gray-600);
font-size: 0.875rem;
font-weight: var(--font-weight-medium);
}
@media (max-width: 768px) {
.hero .container {
grid-template-columns: 1fr;
gap: var(--space-12);
text-align: center;
}
.hero-packaging-showcase {
grid-template-columns: 1fr;
height: auto;
gap: var(--space-6);
margin-bottom: var(--space-6);
}
.raw-qualities {
align-items: center;
padding-right: 0;
margin-bottom: var(--space-6);
}
.quality-cluster {
min-width: 200px;
height: 70px;
padding: var(--space-3) var(--space-4);
justify-content: center;
}
.cluster-icon {
font-size: 1.25rem;
}
.cluster-title {
font-size: 0.75rem;
}
.ai-packaging-center {
margin: var(--space-6) 0;
}
.ai-brain {
width: 80px;
height: 80px;
}
.ai-brain i {
font-size: 2rem;
}
.ring-1, .ring-2, .ring-3 {
width: 100px;
height: 100px;
top: -50px;
left: -50px;
}
.packaged-result {
justify-content: center;
padding-left: 0;
}
.perfect-resume {
width: 240px;
height: 300px;
}
.resume-content {
padding: var(--space-4);
}
.transformation-flow {
display: none;
}
.floating-tech-icon i {
font-size: 1.25rem;
}
.icon-label {
font-size: 0.5rem;
}
/* Adjust mobile positions */
.icon-1 { top: 15%; left: 5%; }
.icon-2 { top: 5%; right: 15%; }
.icon-3 { top: 25%; right: 0%; }
.icon-4 { bottom: 25%; right: 5%; }
.icon-5 { bottom: 15%; left: 10%; }
.icon-6 { top: 50%; left: 0%; }
.icon-7 { bottom: 5%; right: 25%; }
.icon-8 { top: 40%; left: -5%; }
.hero-stats {
gap: var(--space-6);
}
.hero-metrics {
grid-template-columns: 1fr;
gap: var(--space-4);
}
.metric-item {
justify-content: center;
text-align: center;
}
.optimization-badge {
top: -6px;
right: -6px;
padding: var(--space-1) var(--space-2);
font-size: 0.625rem;
}
}
/* Company Logos */
.logos {
padding: var(--space-16) 0;
background: var(--gray-50);
}
.logos-text {
text-align: center;
color: var(--gray-600);
font-size: var(--text-lg);
font-weight: var(--font-weight-medium);
margin-bottom: var(--space-12);
}
.logos-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: var(--space-8);
align-items: center;
justify-items: center;
max-width: 1000px;
margin: 0 auto;
}
.company-logo-wrapper {
display: flex;
align-items: center;
justify-content: center;
height: 60px;
width: 140px;
}
.company-logo {
height: 50px;
width: auto;
max-width: 120px;
opacity: 1;
transition: all var(--transition-normal);
filter: grayscale(0%) brightness(1);
object-fit: contain;
border-radius: 8px;
}
.company-logo:hover {
opacity: 1;
filter: grayscale(0%) brightness(1.05);
transform: scale(1.03);
}
/* Company Logo Fallback Styles */
.company-logo-fallback {
height: 50px;
width: 120px;
background-color: var(--gray-100);
display: flex;
align-items: center;
justify-content: center;
font-weight: var(--font-weight-bold);
font-size: 0.875rem;
color: var(--gray-700);
border: 2px solid var(--gray-200);
border-radius: 8px;
opacity: 1;
transition: all var(--transition-normal);
}
.company-logo-fallback:hover {
opacity: 1;
transform: scale(1.05);
}
/* Individual company colors for fallbacks */
.company-logo-wrapper:nth-child(1) .company-logo-fallback {
color: #4285f4;
border-color: #4285f4;
}
.company-logo-wrapper:nth-child(2) .company-logo-fallback {
color: #00a1f1;
border-color: #00a1f1;
}
.company-logo-wrapper:nth-child(3) .company-logo-fallback {
color: #ff9900;
border-color: #ff9900;
}
.company-logo-wrapper:nth-child(4) .company-logo-fallback {
color: #1877f2;
border-color: #1877f2;
}
.company-logo-wrapper:nth-child(5) .company-logo-fallback {
color: #007aff;
border-color: #007aff;
}
.company-logo-wrapper:nth-child(6) .company-logo-fallback {
color: #cc0000;
border-color: #cc0000;
}
.company-logo-wrapper:nth-child(7) .company-logo-fallback {
color: #e50914;
border-color: #e50914;
}
.company-logo-wrapper:nth-child(8) .company-logo-fallback {
color: #1db954;
border-color: #1db954;
}
@media (max-width: 768px) {
.logos-grid {
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
gap: var(--space-6);
}
.company-logo {
height: 40px;
max-width: 100px;
}
.featured-logos {
gap: var(--space-4);
}
.featured-logo {
height: 20px;
max-width: 80px;
}
}
/* Recruiter Section */
.recruiter-section {
padding: var(--space-20) 0;
background: white;
}
.recruiter-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-16);
align-items: center;
}
.recruiter-benefits {
margin-top: var(--space-8);
}
.benefit-item {
display: flex;
align-items: center;
gap: var(--space-3);
margin-bottom: var(--space-4);
}
.benefit-item i {
color: var(--success-color);
font-size: 1.25rem;
}
.video-container {
position: relative;
width: 100%;
max-width: 500px;
margin: 0 auto;
}
.video-placeholder {
background: linear-gradient(135deg, var(--gray-100) 0%, var(--gray-200) 100%);
border-radius: var(--radius-lg);
padding: var(--space-12);
text-align: center;
position: relative;
overflow: hidden;
cursor: pointer;
transition: all var(--transition-normal);
}
.video-placeholder:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-xl);
}
.video-play-button {
width: 80px;
height: 80px;
background: var(--primary-color);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto var(--space-6);
transition: all var(--transition-normal);
}
.video-play-button i {
color: white;
font-size: 2rem;
margin-left: 4px;
}
.video-placeholder:hover .video-play-button {
transform: scale(1.1);
}
.video-info h3 {
margin-bottom: var(--space-2);
color: var(--gray-900);
}
.video-info p {
color: var(--gray-600);
}
/* Resume Templates Section */
.templates {
padding: var(--space-20) 0;
background: var(--gray-50);
}
.templates-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--space-8);
margin: var(--space-12) 0;
}
.template-card {
background: white;
border-radius: 12px;
padding: var(--space-6);
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
transition: all 0.2s ease;
text-align: center;
border: 1px solid var(--gray-200);
}
.template-card:hover {
transform: translateY(-2px);
box-shadow: 0 10px 25px 0 rgba(0, 0, 0, 0.1), 0 4px 6px 0 rgba(0, 0, 0, 0.05);
border-color: var(--gray-300);
}
.template-preview {
position: relative;
margin-bottom: var(--space-4);
}
.template-content {
background: white;
border: 2px solid var(--gray-200);
border-radius: var(--radius-md);
padding: var(--space-4);
height: 200px;
overflow: hidden;
}
.template-header {
text-align: left;
margin-bottom: var(--space-3);
}
.template-name {
font-weight: var(--font-weight-bold);
font-size: 0.875rem;
color: var(--gray-900);
}
.template-title {
font-size: 0.75rem;
color: var(--gray-600);
}
.template-sections {
text-align: left;
}
.template-section {
margin-bottom: var(--space-3);
}
.template-section .section-title {
font-size: 0.625rem;
font-weight: var(--font-weight-semibold);
color: var(--gray-700);
margin-bottom: var(--space-1);
}
.section-lines {
display: flex;
flex-direction: column;
gap: 2px;
}
.section-line {
height: 3px;
background: var(--gray-300);
border-radius: 2px;
}
.section-line.short {
width: 60%;
}
.template-badge {
position: absolute;
top: var(--space-2);
right: var(--space-2);
background: var(--primary-color);
color: white;
padding: var(--space-1) var(--space-2);
border-radius: var(--radius-sm);
font-size: 0.625rem;
font-weight: var(--font-weight-semibold);
display: flex;
align-items: center;
gap: var(--space-1);
}
.template-card h3 {
margin-bottom: var(--space-2);
color: var(--gray-900);
}
.template-description {
color: var(--gray-600);
font-size: 0.875rem;
}
.templates-cta {
text-align: center;
margin-top: var(--space-8);
}
/* Process Section */
.process {
padding: var(--space-20) 0;
background: white;
}
.process-steps {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--space-8);
margin: var(--space-12) 0;
}
.process-step {
text-align: center;
padding: var(--space-6);
}
.step-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto var(--space-4);
transition: all var(--transition-normal);
}
.step-icon i {
color: white;
font-size: 2rem;
}
.process-step:hover .step-icon {
transform: scale(1.1);
}
.process-step h3 {
margin-bottom: var(--space-3);
color: var(--gray-900);
}
.process-step p {
color: var(--gray-600);
}
.process-cta {
text-align: center;
margin-top: var(--space-8);
}
/* Mobile Responsive */
@media (max-width: 768px) {
.recruiter-content {
grid-template-columns: 1fr;
gap: var(--space-8);
text-align: center;
}
.templates-grid {
grid-template-columns: 1fr;
}
.process-steps {
grid-template-columns: 1fr;
}
.video-placeholder {
padding: var(--space-8);
}
.video-play-button {
width: 60px;
height: 60px;
}
.video-play-button i {
font-size: 1.5rem;
}
}
@media (max-width: 768px) {
.logos-grid {
grid-template-columns: repeat(4, 1fr);
gap: var(--space-4);
}
.company-logo {
height: 30px;
}
}
/* Problem Section */
.problem {
padding: var(--space-24) 0;
background: var(--gray-50);
}
.problem-content {
text-align: center;
}
.section-title {
font-size: 2.5rem;
font-weight: 700;
line-height: 1.2;
margin-bottom: var(--space-6);
text-align: center;
color: var(--gray-900);
letter-spacing: -0.025em;
}
.section-subtitle {
font-size: 1.125rem;
color: var(--gray-600);
text-align: center;
margin-bottom: var(--space-16);
max-width: 600px;
margin-left: auto;
margin-right: auto;
line-height: 1.6;
}
.problem-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--space-12);
margin-top: var(--space-16);
}
.problem-item {
text-align: center;
padding: var(--space-8);
background: white;
border-radius: var(--radius-xl);
box-shadow: var(--shadow-sm);
transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}
.problem-item:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
}
.problem-icon {
width: 64px;
height: 64px;
background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto var(--space-6);
color: white;
font-size: 1.5rem;
}
.problem-item h3 {
color: var(--gray-900);
margin-bottom: var(--space-4);
}
.problem-item p {
color: var(--gray-600);
line-height: 1.6;
}
/* Features Section */
.features {
padding: var(--space-24) 0;
background: white;
}
.features-header {
text-align: center;
margin-bottom: var(--space-16);
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: var(--space-8);
}
.feature-card {
padding: var(--space-8);
background: var(--gray-50);
border-radius: var(--radius-xl);
transition: transform var(--transition-normal), box-shadow var(--transition-normal);
border: 1px solid var(--gray-200);
}
.feature-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
background: white;
}
.feature-icon {
width: 56px;
height: 56px;
background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
border-radius: var(--radius-lg);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: var(--space-6);
color: white;
font-size: 1.25rem;
}
.feature-card h3 {
color: var(--gray-900);
margin-bottom: var(--space-4);
}
.feature-card p {
color: var(--gray-600);
margin-bottom: var(--space-4);
line-height: 1.6;
}
.feature-benefit {
display: flex;
align-items: center;
gap: var(--space-2);
color: var(--success-color);
font-weight: var(--font-weight-semibold);
font-size: 0.875rem;
}
/* How It Works */
.how-it-works {
padding: var(--space-24) 0;
background: var(--gray-50);
}
.how-it-works .section-title {
text-align: center;
margin-bottom: var(--space-16);
}
.steps-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--space-12);
}
.step {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: var(--space-8);
background: white;
border-radius: var(--radius-xl);
box-shadow: var(--shadow-sm);
position: relative;
}
.step-number {
width: 64px;
height: 64px;
background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.5rem;
font-weight: var(--font-weight-bold);
margin-bottom: var(--space-6);
}
.step h3 {
margin-bottom: var(--space-4);
color: var(--gray-900);
}
.step p {
color: var(--gray-600);
line-height: 1.6;
margin-bottom: var(--space-6);
}
.step-visual {
font-size: 2rem;
color: var(--primary-color);
}
/* Testimonials */
.testimonials {
padding: var(--space-24) 0;
background: white;
}
.testimonials .section-title,
.testimonials .section-subtitle {
text-align: center;
}
.testimonials .section-subtitle {
margin-bottom: var(--space-16);
}
.testimonials-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: var(--space-8);
}
.testimonial-card {
padding: var(--space-8);
background: var(--gray-50);
border-radius: var(--radius-xl);
border: 1px solid var(--gray-200);
transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}
.testimonial-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
background: white;
}
.testimonial-rating {
display: flex;
gap: var(--space-1);
margin-bottom: var(--space-4);
color: var(--accent-color);
}
.testimonial-card blockquote {
font-size: 1.125rem;
line-height: 1.6;
color: var(--gray-700);
margin-bottom: var(--space-6);
font-style: italic;
}
.testimonial-author {
display: flex;
align-items: center;
gap: var(--space-4);
margin-bottom: var(--space-4);
}
.testimonial-author img {
width: 48px;
height: 48px;
border-radius: 50%;
object-fit: cover;
}
.author-name {
font-weight: var(--font-weight-semibold);
color: var(--gray-900);
}
.author-title {
color: var(--gray-600);
font-size: 0.875rem;
}
.testimonial-result {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-4);
background: var(--success-color);
color: white;
border-radius: var(--radius-lg);
font-weight: var(--font-weight-semibold);
font-size: 0.875rem;
}
/* Pricing */
.pricing {
padding: var(--space-24) 0;
background: var(--gray-50);
}
.pricing-header {
text-align: center;
margin-bottom: var(--space-16);
}
.pricing-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--space-8);
margin-bottom: var(--space-16);
}
.pricing-card {
background: white;
border-radius: var(--radius-xl);
padding: var(--space-8);
box-shadow: var(--shadow-sm);
border: 2px solid transparent;
transition: all var(--transition-normal);
position: relative;
}
.pricing-card.featured {
border-color: var(--primary-color);
transform: scale(1.05);
box-shadow: var(--shadow-xl);
}
.pricing-card:hover:not(.featured) {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
}
.pricing-ribbon {
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
background: var(--primary-color);
color: white;
padding: var(--space-2) var(--space-4);
border-radius: var(--radius-md);
font-size: 0.875rem;
font-weight: var(--font-weight-semibold);
}
.pricing-header-card h3 {
font-size: 1.25rem;
margin-bottom: var(--space-2);
color: var(--gray-900);
}
.pricing-badge {
background: var(--primary-light);
color: var(--primary-color);
padding: var(--space-1) var(--space-3);
border-radius: var(--radius-md);
font-size: 0.75rem;
font-weight: var(--font-weight-semibold);
margin-bottom: var(--space-6);
display: inline-block;
}
.pricing-price {
margin-bottom: var(--space-6);
text-align: center;
}
.currency {
font-size: 1.5rem;
font-weight: var(--font-weight-semibold);
color: var(--gray-700);
vertical-align: top;
}
.amount {
font-size: 3rem;
font-weight: var(--font-weight-extrabold);
color: var(--gray-900);
}
.period {
font-size: 1rem;
color: var(--gray-600);
}
.pricing-note {
font-size: 0.875rem;
color: var(--gray-500);
text-align: center;
margin-top: var(--space-2);
}
.pricing-features {
margin-bottom: var(--space-8);
}
.pricing-features .feature {
display: flex;
align-items: center;
gap: var(--space-3);
margin-bottom: var(--space-3);
color: var(--gray-700);
}
.pricing-features .feature i {
color: var(--success-color);
font-size: 0.875rem;
}
.pricing-guarantee {
max-width: 600px;
margin: 0 auto;
padding: var(--space-6);
background: white;
border-radius: var(--radius-xl);
box-shadow: var(--shadow-sm);
}
.guarantee-content {
display: flex;
align-items: center;
gap: var(--space-4);
text-align: left;
}
.guarantee-content i {
font-size: 2rem;
color: var(--success-color);
flex-shrink: 0;
}
.guarantee-content h4 {
color: var(--gray-900);
margin-bottom: var(--space-2);
}
.guarantee-content p {
color: var(--gray-600);
margin: 0;
}
/* FAQ */
.faq {
padding: var(--space-24) 0;
background: white;
}
.faq .section-title,
.faq .section-subtitle {
text-align: center;
}
.faq .section-subtitle {
margin-bottom: var(--space-16);
}
.faq-container {
max-width: 800px;
margin: 0 auto;
}
.faq-item {
border-bottom: 1px solid var(--gray-200);
}
.faq-question {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--space-6) 0;
background: none;
border: none;
font-size: 1.125rem;
font-weight: var(--font-weight-semibold);
color: var(--gray-900);
text-align: left;
cursor: pointer;
transition: color var(--transition-normal);
}
.faq-question:hover {
color: var(--primary-color);
}
.faq-question i {
transition: transform var(--transition-normal);
color: var(--gray-400);
}
.faq-item.active .faq-question i {
transform: rotate(180deg);
color: var(--primary-color);
}
.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height var(--transition-slow);
}
.faq-item.active .faq-answer {
max-height: 200px;
}
.faq-answer p {
padding-top: var(--space-6);
color: var(--gray-600);
line-height: 1.6;
}
/* Final CTA */
.final-cta {
padding: var(--space-24) 0;
background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
color: white;
text-align: center;
}
/* Improve layout for final CTA: ensure vertical stacking and centered content */
.final-cta .cta-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: var(--space-6);
max-width: 920px;
margin: 0 auto;
}
.final-cta h2 {
color: white;
margin-bottom: var(--space-4);
}
.final-cta p {
font-size: 1.25rem;
color: rgba(255, 255, 255, 0.9);
margin-bottom: var(--space-8);
}
.cta-stats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-6);
margin-bottom: var(--space-8);
max-width: 920px;
margin-left: auto;
margin-right: auto;
}
.cta-stat {
text-align: center;
background: rgba(0, 0, 0, 0.22);
border: 1px solid rgba(255, 255, 255, 0.28);
border-radius: 16px;
padding: var(--space-5) var(--space-6);
backdrop-filter: saturate(120%) blur(6px);
box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}
.cta-stat:hover {
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(0,0,0,0.3);
}
.cta-stat .stat-number {
display: block;
font-size: 2.5rem;
font-weight: var(--font-weight-extrabold);
color: #ffffff;
line-height: 1;
margin-bottom: var(--space-2);
text-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
.cta-stat .stat-label {
color: rgba(255, 255, 255, 0.96);
font-size: 0.9rem;
letter-spacing: 0.04em;
font-weight: var(--font-weight-semibold);
text-transform: uppercase;
}
.final-cta .btn {
margin-bottom: var(--space-4);
background: #ffffff !important;
color: #111827 !important; /* high-contrast text */
border: 2px solid #ffffff;
box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}
.final-cta .btn-large {
width: auto;
min-width: 320px;
padding-left: 2rem;
padding-right: 2rem;
}
.final-cta .btn:hover {
background: var(--gray-100);
transform: translateY(-2px);
}
.cta-note {
color: rgba(255, 255, 255, 0.8);
font-size: 0.875rem;
margin: 0;
}
/* Responsive refinements for final CTA */
@media (max-width: 1024px) {
.final-cta .cta-content {
max-width: 760px;
}
}
@media (max-width: 768px) {
.cta-stats {
grid-template-columns: 1fr;
gap: var(--space-4);
max-width: 520px;
}
.cta-stat .stat-number {
font-size: 2.125rem;
}
.final-cta .btn-large {
min-width: 0;
width: 100%;
}
}
/* Footer */
.footer {
padding: var(--space-16) 0 var(--space-8);
background: var(--gray-900);
color: var(--gray-300);
}
.footer-content {
display: grid;
grid-template-columns: 1fr 2fr;
gap: var(--space-16);
margin-bottom: var(--space-12);
}
.footer-brand {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.footer-logo {
width: 40px;
height: 40px;
object-fit: contain;
}
.footer-brand p {
color: var(--gray-400);
margin: 0;
}
.footer-links {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-8);
}
.footer-column h4 {
color: white;
margin-bottom: var(--space-4);
font-size: 0.875rem;
font-weight: var(--font-weight-semibold);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.footer-column a {
display: block;
color: var(--gray-400);
text-decoration: none;
margin-bottom: var(--space-3);
transition: color var(--transition-normal);
}
.footer-column a:hover {
color: white;
}
.footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: var(--space-8);
border-top: 1px solid var(--gray-800);
}
.footer-bottom p {
color: var(--gray-500);
margin: 0;
}
.footer-social {
display: flex;
gap: var(--space-4);
}
.footer-social a {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: var(--gray-800);
color: var(--gray-400);
border-radius: 50%;
text-decoration: none;
transition: all var(--transition-normal);
}
.footer-social a:hover {
background: var(--primary-color);
color: white;
}
/* Mobile Responsiveness */
@media (max-width: 768px) {
:root {
--space-24: 4rem;
--space-20: 3rem;
--space-16: 2.5rem;
--space-12: 2rem;
}
.features-grid {
grid-template-columns: 1fr;
}
.steps-container {
grid-template-columns: 1fr;
}
.testimonials-grid {
grid-template-columns: 1fr;
}
.pricing-grid {
grid-template-columns: 1fr;
}
.pricing-card.featured {
transform: none;
}
.cta-stats {
grid-template-columns: 1fr;
gap: var(--space-6);
}
.footer-content {
grid-template-columns: 1fr;
gap: var(--space-8);
}
.footer-links {
grid-template-columns: 1fr;
gap: var(--space-6);
}
.footer-bottom {
flex-direction: column;
gap: var(--space-4);
text-align: center;
}
}
/* Animations */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.hero-content,
.feature-card,
.testimonial-card,
.pricing-card {
animation: fadeInUp 0.6s ease-out;
}
/* Performance Optimizations */
.hero-visual,
.features-grid,
.testimonials-grid {
will-change: transform;
}
.hero-visual {
max-width: 800px;
}
/* Smooth scrolling for anchor links */
html {
scroll-behavior: smooth;
}
/* Focus styles for accessibility */
.btn:focus,
.nav-link:focus,
.faq-question:focus,
input:focus,
select:focus,
textarea:focus,
button:focus {
outline: none;
box-shadow: var(--focus-ring-shadow);
border-color: var(--primary-color);
}
/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
html {
scroll-behavior: auto;
}
}
/* ====================================
NEW PAGES STYLING - ENHANCED
==================================== */
/* Global improvements */
.container {
max-width: 1400px;
margin: 0 auto;
padding: 0 2rem;
}
@media (max-width: 768px) {
.container {
padding: 0 1rem;
}
}
/* Enhanced section spacing */
section {
padding: 5rem 0;
}
/* Features Page Styles */
.features-hero {
padding: calc(80px + 6rem) 0 6rem;
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
text-align: center;
position: relative;
overflow: hidden;
}
.features-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
pointer-events: none;
}
.features-hero-title {
font-size: 3rem;
font-weight: 800;
line-height: 1.1;
margin-bottom: var(--space-6);
color: var(--gray-900);
}
.features-hero-subtitle {
font-size: 1.25rem;
color: var(--gray-600);
margin-bottom: var(--space-8);
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
/* Features hero stats - comprehensive styling moved to later section */
.core-features {
padding: var(--space-24) 0;
background: white;
}
.features-showcase {
display: flex;
flex-direction: column;
gap: var(--space-24);
margin-top: var(--space-16);
}
.feature-showcase {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-16);
align-items: center;
}
.feature-showcase.reverse {
direction: rtl;
}
.feature-showcase.reverse > * {
direction: ltr;
}
.feature-content {
padding: var(--space-8);
}
.feature-icon-large {
width: 64px;
height: 64px;
background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
border-radius: var(--radius-lg);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: var(--space-6);
color: white;
font-size: 1.5rem;
}
.feature-showcase h3 {
font-size: 1.5rem;
margin-bottom: var(--space-4);
color: var(--gray-900);
}
.feature-showcase p {
color: var(--gray-600);
margin-bottom: var(--space-6);
line-height: 1.6;
}
.feature-benefits {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.benefit {
display: flex;
align-items: center;
gap: var(--space-3);
color: var(--gray-700);
font-size: 0.875rem;
}
.benefit i {
color: var(--success-color);
font-size: 1rem;
}
.feature-visual {
padding: var(--space-8);
background: var(--gray-50);
border-radius: var(--radius-xl);
border: 1px solid var(--gray-200);
}
.analysis-demo {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.job-posting-input,
.ai-analysis-result {
padding: var(--space-4);
background: white;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
}
.job-posting-input h4,
.ai-analysis-result h4 {
font-size: 0.875rem;
font-weight: var(--font-weight-semibold);
color: var(--gray-700);
margin-bottom: var(--space-3);
}
.posting-text {
color: var(--gray-600);
font-style: italic;
line-height: 1.5;
}
.analysis-arrow {
text-align: center;
color: var(--primary-color);
font-size: 1.5rem;
}
.keyword-tags {
display: flex;
gap: var(--space-2);
flex-wrap: wrap;
margin-bottom: var(--space-4);
}
.keyword-tag {
padding: var(--space-1) var(--space-2);
border-radius: var(--radius-sm);
font-size: 0.75rem;
font-weight: var(--font-weight-semibold);
color: white;
}
.keyword-tag.high {
background: var(--primary-color);
}
.keyword-tag.medium {
background: var(--accent-color);
}
.keyword-tag.low {
background: var(--gray-400);
}
.analysis-score {
display: flex;
align-items: center;
gap: var(--space-2);
}
.score-label {
font-size: 0.875rem;
color: var(--gray-600);
}
.score-value {
font-size: 1.25rem;
font-weight: var(--font-weight-bold);
color: var(--success-color);
}
.optimization-demo {
padding: var(--space-4);
background: linear-gradient(180deg, rgba(99,102,241,0.06), rgba(99,102,241,0.04));
border: 1px solid rgba(99,102,241,0.18);
border-radius: var(--radius-xl);
box-shadow: 0 10px 24px rgba(15,23,42,0.06);
}
.before-after {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: var(--space-4);
align-items: center;
}
.before,
.after {
position: relative;
padding: var(--space-4);
background: rgba(255,255,255,0.9);
border-radius: var(--radius-lg);
border: 1px solid #e5e7eb;
box-shadow: 0 12px 28px rgba(0,0,0,0.06);
}
.before::before,
.after::before {
content: "";
position: absolute;
top: -2px;
left: 0;
right: 0;
height: 4px;
border-top-left-radius: var(--radius-lg);
border-top-right-radius: var(--radius-lg);
background: linear-gradient(90deg, var(--primary-color), #8b5cf6);
}
.before h4,
.after h4 {
font-size: 0.875rem;
margin-bottom: var(--space-3);
color: var(--gray-700);
}
.before p,
.after p {
font-size: 0.875rem;
line-height: 1.5;
margin-bottom: var(--space-3);
}
.score {
font-size: 0.75rem;
font-weight: var(--font-weight-semibold);
padding: 0.25rem 0.5rem;
border-radius: 999px;
background: linear-gradient(135deg, #ef4444, #f97316);
color: white;
display: inline-flex;
align-items: center;
gap: 0.35rem;
box-shadow: 0 6px 16px rgba(239,68,68,0.25);
}
.score.optimized {
background: linear-gradient(135deg, #10b981, #34d399);
box-shadow: 0 6px 16px rgba(16,185,129,0.25);
}
.optimization-arrow {
color: white;
font-size: 1.25rem;
width: 48px;
height: 48px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--primary-color), #8b5cf6);
box-shadow: 0 10px 24px rgba(99,102,241,0.35);
animation: pulse 2.2s infinite;
}
@media (max-width: 768px) {
.before-after { grid-template-columns: 1fr; }
.optimization-arrow { transform: rotate(90deg); margin: 0 auto; }
}
/* ATS Compatibility demo – polished card visuals */
.ats-compatibility { background: linear-gradient(180deg, rgba(2,6,23,0.02), rgba(2,6,23,0.01)); border: 1px solid #e5e7eb; border-radius: 16px; padding: 1.25rem; box-shadow: 0 12px 30px rgba(0,0,0,0.06); }
.ats-systems h4 { margin: 0 0 0.75rem; font-size: 0.95rem; color: var(--gray-800); }
.ats-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem 1rem; }
.ats-item { display: flex; align-items: center; gap: 0.5rem; background: rgba(99,102,241,0.06); border: 1px solid rgba(99,102,241,0.18); color: var(--gray-800); padding: 0.5rem 0.75rem; border-radius: 10px; }
.ats-item i { color: var(--success-color); }
.compatibility-score { display: flex; justify-content: center; align-items: center; margin-top: 1rem; }
.score-circle { position: relative; width: 160px; height: 160px; border-radius: 50%; background: conic-gradient(var(--primary-color) 98%, #e5e7eb 0); box-shadow: 0 12px 30px rgba(99,102,241,0.25); }
.score-circle::after { content: ""; position: absolute; inset: 12px; background: white; border-radius: 50%; box-shadow: inset 0 0 0 1px #e5e7eb; }
.score-circle .score-number, .score-circle .score-text { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 1; }
.score-circle .score-number { font-size: 1.75rem; font-weight: 900; background: linear-gradient(135deg, var(--primary-color), #8b5cf6); -webkit-background-clip: text; -webkit-text-fill-color: black; background-clip: text; }
.score-circle .score-text { margin-top: 2.25rem; font-size: 0.8rem; font-weight: 700; color: var(--gray-600); text-transform: uppercase; letter-spacing: .5px; }
.advanced-features {
padding: var(--space-24) 0;
background: var(--gray-50);
}
.advanced-features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: var(--space-8);
margin-top: var(--space-16);
}
.advanced-feature-card {
background: white;
border-radius: var(--radius-xl);
padding: var(--space-8);
box-shadow: var(--shadow-sm);
border: 1px solid var(--gray-200);
transition: all var(--transition-normal);
}
.advanced-feature-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
}
.advanced-feature-card .feature-icon {
width: 48px;
height: 48px;
background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
border-radius: var(--radius-lg);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: var(--space-4);
color: white;
font-size: 1.25rem;
}
.advanced-feature-card h3 {
margin-bottom: var(--space-3);
color: var(--gray-900);
}
.advanced-feature-card p {
color: var(--gray-600);
margin-bottom: var(--space-6);
line-height: 1.6;
}
.feature-demo {
padding: var(--space-4);
background: rgba(99,102,241,0.06);
border-radius: var(--radius-lg);
border: 1px solid rgba(99,102,241,0.18);
}
/* Centered, sleek inner info boxes (blue cards) */
.export-options { display: flex; flex-direction: column; gap: 0.75rem; }
.export-format {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.75rem 1rem;
background: rgba(99,102,241,0.06);
border: 1px solid rgba(99,102,241,0.22);
border-radius: 12px;
color: var(--gray-700);
font-weight: 600;
text-align: center;
}
.export-format i { color: var(--primary-color); }
.download-stats {
margin-top: 0.75rem;
text-align: center;
padding: 0.6rem 0.75rem;
background: rgba(99,102,241,0.05);
border: 1px solid rgba(99,102,241,0.18);
border-radius: 10px;
color: var(--gray-600);
font-weight: 600;
}
.template-info {
display: flex;
justify-content: center;
align-items: center;
gap: 0.75rem;
padding: 0.6rem 0.9rem;
background: rgba(99,102,241,0.06);
border: 1px solid rgba(99,102,241,0.22);
border-radius: 10px;
color: var(--gray-700);
font-weight: 600;
text-align: center;
}
.template-info span { display: inline-block; }
/* Lightning-fast processing list boxes */
.processing-timeline {
display: flex;
flex-direction: column;
gap: 1rem;
background: rgba(99,102,241,0.05);
border: 1px solid #e5e7eb;
border-radius: 14px;
padding: 1rem;
}
.timeline-step {
display: grid;
grid-template-columns: 44px 1fr;
align-items: center;
gap: 0.75rem;
padding: 0.5rem 0.75rem;
background: rgba(99,102,241,0.06);
border: 1px solid rgba(99,102,241,0.18);
border-radius: 12px;
}
.timeline-step span { text-align: center; font-weight: 600; color: var(--gray-700); }
.total-time { margin-top: 0.5rem; text-align: center; color: var(--gray-700); }
.score-meter {
margin-bottom: var(--space-4);
}
.meter-background {
width: 100%;
height: 8px;
background: var(--gray-200);
border-radius: 4px;
overflow: hidden;
margin-bottom: var(--space-2);
}
.meter-fill {
height: 100%;
background: linear-gradient(90deg, var(--primary-color), var(--success-color));
border-radius: 4px;
transition: width var(--transition-normal);
}
.score-text {
font-weight: var(--font-weight-semibold);
color: var(--gray-900);
text-align: center;
}
.improvement-suggestions {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.suggestion {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: 0.875rem;
color: var(--gray-700);
}
.suggestion i {
color: var(--success-color);
}
/* Advanced Features – centered sleek blue boxes */
.customization-showcase { display: flex; flex-direction: column; gap: 0.875rem; }
.resume-versions { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }
.resume-version {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0.75rem;
background: rgba(99,102,241,0.06);
border: 1px solid rgba(99,102,241,0.22);
border-radius: 999px;
color: var(--gray-700);
font-weight: 600;
}
.customization-stats { display: flex; justify-content: center; gap: 0.75rem; color: var(--gray-700); font-weight: 700; }
.tracking-dashboard { display: flex; flex-direction: column; gap: 0.875rem; }
.tracking-stats { display: flex; justify-content: center; gap: 1rem; }
.stat-item { text-align: center; }
.stat-number { display: block; font-size: 1.5rem; font-weight: 800; color: var(--primary-color); }
.stat-label { display: block; font-size: 0.8rem; color: var(--gray-600); font-weight: 600; text-transform: uppercase; letter-spacing: .4px; }
.application-list { display: flex; flex-direction: column; gap: 0.5rem; align-items: center; }
.application-item { width: 100%; max-width: 320px; display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0.75rem; background: rgba(255,255,255,0.8); border: 1px solid #e5e7eb; border-radius: 10px; }
.application-item .company { font-weight: 600; color: var(--gray-800); }
.application-item .status { font-weight: 700; padding: 0.25rem 0.5rem; border-radius: 999px; font-size: 0.75rem; }
.application-item .status.interview { background: rgba(99,102,241,0.12); color: var(--primary-color); }
.application-item .status.applied { background: rgba(2,132,199,0.12); color: #0284c7; }
/* Pricing Page Styles - comprehensive styling moved to later section */
.billing-toggle {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-4);
margin-bottom: var(--space-8);
}
.toggle-label {
font-size: 1rem;
font-weight: var(--font-weight-medium);
color: var(--gray-700);
}
.toggle-switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.toggle-switch input {
opacity: 0;
width: 0;
height: 0;
}
.toggle-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: var(--gray-300);
transition: var(--transition-normal);
border-radius: 34px;
}
.toggle-slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
transition: var(--transition-normal);
border-radius: 50%;
}
input:checked + .toggle-slider {
background-color: var(--primary-color);
}
input:checked + .toggle-slider:before {
transform: translateX(26px);
}
.discount-badge {
background: var(--success-color);
color: white;
padding: var(--space-1) var(--space-2);
border-radius: var(--radius-sm);
font-size: 0.75rem;
font-weight: var(--font-weight-semibold);
margin-left: var(--space-2);
}
.pricing-trust {
display: flex;
justify-content: center;
gap: var(--space-8);
flex-wrap: wrap;
}
.trust-item {
display: flex;
align-items: center;
gap: var(--space-2);
color: var(--gray-600);
font-size: 0.875rem;
}
.trust-item i {
color: var(--success-color);
}
.pricing-plans {
padding: var(--space-16) 0;
background: white;
}
.pricing-plans-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--space-8);
margin-bottom: var(--space-8);
}
.pricing-plan {
background: white;
border-radius: var(--radius-xl);
padding: var(--space-8);
box-shadow: var(--shadow-sm);
border: 2px solid var(--gray-200);
transition: all var(--transition-normal);
position: relative;
}
.pricing-plan.featured {
border-color: var(--primary-color);
transform: scale(1.05);
box-shadow: var(--shadow-xl);
}
.pricing-subtext {
text-align: center;
color: var(--gray-600);
font-size: 0.95rem;
margin-top: var(--space-2);
}
.pricing-plan:hover:not(.featured) {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
}
.plan-ribbon {
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
background: var(--primary-color);
color: white;
padding: var(--space-2) var(--space-4);
border-radius: var(--radius-md);
font-size: 0.875rem;
font-weight: var(--font-weight-semibold);
}
.plan-header {
text-align: center;
margin-bottom: var(--space-6);
}
.plan-name {
font-size: 1.5rem;
font-weight: var(--font-weight-bold);
color: var(--gray-900);
margin-bottom: var(--space-2);
}
.plan-badge {
background: var(--primary-light);
color: var(--primary-color);
padding: var(--space-1) var(--space-3);
border-radius: var(--radius-md);
font-size: 0.75rem;
font-weight: var(--font-weight-semibold);
margin-bottom: var(--space-4);
display: inline-block;
}
.plan-price {
margin-bottom: var(--space-4);
}
.plan-price .currency {
font-size: 1.25rem;
font-weight: var(--font-weight-semibold);
color: var(--gray-700);
vertical-align: top;
}
.plan-price .amount {
font-size: 2.5rem;
font-weight: var(--font-weight-extrabold);
color: var(--gray-900);
}
.plan-price .period {
font-size: 1rem;
color: var(--gray-600);
}
.billing-note {
font-size: 0.75rem;
color: var(--gray-500);
margin-top: var(--space-1);
}
.plan-description {
color: var(--gray-600);
font-size: 0.875rem;
margin-bottom: var(--space-6);
}
.plan-features {
margin-bottom: var(--space-8);
}
.feature-category h4 {
font-size: 0.875rem;
font-weight: var(--font-weight-semibold);
color: var(--gray-700);
margin-bottom: var(--space-4);
}
.feature-list {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.feature {
display: flex;
align-items: center;
gap: var(--space-3);
font-size: 0.875rem;
}
.feature.included {
color: var(--gray-700);
}
.feature.not-included {
color: var(--gray-400);
}
.feature i {
font-size: 0.875rem;
}
.feature.included i {
color: var(--success-color);
}
.feature.not-included i {
color: var(--gray-400);
}
.feature .limited {
color: var(--warning-color);
font-weight: var(--font-weight-medium);
}
.plan-cta {
text-align: center;
}
.btn-plan {
width: 100%;
padding: var(--space-4) var(--space-6);
margin-bottom: var(--space-3);
}
.plan-note {
font-size: 0.75rem;
color: var(--gray-500);
margin: 0;
}
/* AI Agents Page Styles - COMPLETELY REDESIGNED */
.agents-hero {
padding: calc(80px + 8rem) 0 8rem;
background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
color: white;
position: relative;
overflow: hidden;
min-height: 100vh;
display: flex;
align-items: center;
}
.agents-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
}
.agents-hero-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
position: relative;
z-index: 2;
max-width: 1400px;
margin: 0 auto;
padding: 0 2rem;
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-4);
background: rgba(99, 102, 241, 0.2);
border: 1px solid rgba(99, 102, 241, 0.3);
color: var(--primary-color);
border-radius: var(--radius-2xl);
font-size: 0.875rem;
font-weight: var(--font-weight-medium);
margin-bottom: var(--space-6);
}
.agents-hero-title {
font-size: 4rem;
font-weight: 900;
line-height: 1.1;
margin-bottom: 2rem;
color: white;
letter-spacing: -0.02em;
}
.agents-hero-subtitle {
font-size: 1.3rem;
color: rgba(255, 255, 255, 0.85);
margin-bottom: 3rem;
line-height: 1.6;
max-width: 600px;
}
.hero-stats {
grid-template-columns: 1fr;
gap: 1.5rem;
margin-bottom: 3rem;
}
.hero-stat {
display: flex;
align-items: center;
gap: 1rem;
padding: 1.5rem;
background: rgba(255, 255, 255, 0.08);
border-radius: 16px;
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
}
.hero-stat:hover {
background: rgba(255, 255, 255, 0.12);
transform: translateX(8px);
}
.hero-stat .stat-icon {
width: 48px;
height: 48px;
background: linear-gradient(135deg, var(--primary-color), #8b5cf6);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.2rem;
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}
.hero-stat .stat-content {
flex: 1;
}
.hero-stat .stat-number {
display: block;
font-size: 1.8rem;
font-weight: 800;
color: white;
line-height: 1;
margin-bottom: 0.25rem;
}
.hero-stat .stat-label {
color: rgba(255, 255, 255, 0.8);
font-size: 0.9rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.hero-cta {
display: flex;
gap: 1rem;
flex-wrap: wrap;
margin-top: 2rem;
justify-content: center;
align-items: center;
}
.agent-network {
position: relative;
width: 100%;
height: 500px;
}
.sphere-container {
position: relative;
width: 100%;
height: 500px;
}
.particle-sphere {
width: 100%;
height: 100%;
display: block;
}
.nn-link {
stroke: rgba(255, 255, 255, 0.32);
stroke-width: 2.25;
stroke-linecap: round;
stroke-dasharray: 6 10;
animation: nnLinkFlow 3.5s linear infinite;
filter: url(#nnGlow);
}
.nn-link.nn-link--accent {
stroke: rgba(255, 255, 255, 0.45);
}
/* Depth variants for links */
.nn-link--far {
stroke-width: 1.25;
opacity: 0.35;
animation: nnLinkFlowReverse 5s linear infinite;
}
.nn-link--near {
stroke-width: 3.25;
opacity: 0.7;
animation-duration: 2.2s;
}
.nn-node {
fill: url(#nnNodeBlue);
filter: url(#nnGlow);
animation: nnNodePulse 4.5s ease-in-out infinite;
}
.nn-node--hub {
fill: transparent;
stroke: url(#nnGradient);
stroke-width: 3;
animation: nnHubPulse 3.2s ease-in-out infinite;
transform-box: fill-box;
transform-origin: center;
}
/* Depth variants for nodes */
.nn-node--far {
opacity: 0.65;
}
.nn-node--near {
opacity: 1;
}
.nn-node-focus {
fill: none;
stroke: rgba(255,255,255,0.35);
stroke-width: 2;
stroke-dasharray: 4 6;
animation: nnLinkFlow 4s linear infinite;
}
@keyframes nnLinkFlow {
from { stroke-dashoffset: 0; }
to { stroke-dashoffset: -160; }
}
@keyframes nnLinkFlowReverse {
from { stroke-dashoffset: 0; }
to { stroke-dashoffset: 160; }
}
@keyframes nnNodePulse {
0%, 100% { opacity: 0.9; }
50% { opacity: 0.6; }
}
@keyframes nnHubPulse {
0%, 100% { transform: scale(1); filter: url(#nnGlow); }
50% { transform: scale(1.08); }
}
/* 3D depth transforms for groups */
.nn-depth-far { transform: translateZ(-60px) scale(0.92); }
.nn-depth-mid { transform: translateZ(0); }
.nn-depth-near { transform: translateZ(60px) scale(1.12); }
/* Agent labels around the neural network */
.neural-network { position: relative; }
.agent-label {
position: absolute;
left: calc(var(--x) - 0%);
top: calc(var(--y) - 0%);
transform: translate(-50%, -50%);
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0.75rem;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
color: #fff;
border-radius: 999px;
backdrop-filter: blur(10px);
font-size: 0.875rem;
white-space: nowrap;
box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}
.agent-label .agent-icon {
width: 28px;
height: 28px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--primary-color), #8b5cf6);
color: #fff;
font-size: 0.9rem;
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35);
}
.agent-label.agent-job-hunter .agent-icon { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.agent-label.agent-app-crafter .agent-icon { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
.agent-label.agent-interview-coord .agent-icon { background: linear-gradient(135deg, #10b981, #047857); }
.agent-label.agent-performance-analyst .agent-icon { background: linear-gradient(135deg, #f59e0b, #d97706); }
@media (max-width: 768px) {
.agent-label { font-size: 0.8rem; padding: 0.4rem 0.6rem; }
.agent-label .agent-icon { width: 24px; height: 24px; font-size: 0.8rem; }
}
.central-hub {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
}
.hub-core {
width: 120px;
height: 120px;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
border-radius: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: white;
font-size: 2rem;
box-shadow: 0 0 30px rgba(99, 102, 241, 0.5);
animation: hubPulse 3s ease-in-out infinite;
}
.hub-core span {
font-size: 0.75rem;
font-weight: var(--font-weight-semibold);
margin-top: var(--space-1);
}
.agent-node {
position: absolute;
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: var(--radius-lg);
border: 1px solid rgba(255, 255, 255, 0.2);
animation: agentFloat 4s ease-in-out infinite;
}
.agent-node.job-hunter {
top: 10%;
left: 10%;
animation-delay: 0s;
}
.agent-node.app-crafter {
top: 10%;
right: 10%;
animation-delay: 1s;
}
.agent-node.interview-coord {
bottom: 20%;
left: 5%;
animation-delay: 2s;
}
.agent-node.performance-analyst {
bottom: 20%;
right: 5%;
animation-delay: 3s;
}
.agent-avatar {
width: 40px;
height: 40px;
background: var(--primary-color);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1rem;
}
.agent-info h4 {
font-size: 0.875rem;
font-weight: var(--font-weight-semibold);
color: white;
margin-bottom: var(--space-1);
}
.agent-status {
display: flex;
align-items: center;
gap: var(--space-1);
font-size: 0.75rem;
}
.agent-status.active {
color: var(--success-color);
}
.status-dot {
width: 6px;
height: 6px;
background: var(--success-color);
border-radius: 50%;
animation: statusBlink 2s ease-in-out infinite;
}
.data-flow {
position: absolute;
width: 4px;
height: 4px;
background: var(--primary-color);
border-radius: 50%;
animation: dataFlowing 3s ease-in-out infinite;
}
.data-flow.flow-1 {
top: 20%;
left: 20%;
animation-delay: 0s;
}
.data-flow.flow-2 {
top: 20%;
right: 20%;
animation-delay: 0.5s;
}
.data-flow.flow-3 {
bottom: 30%;
left: 15%;
animation-delay: 1s;
}
.data-flow.flow-4 {
bottom: 30%;
right: 15%;
animation-delay: 1.5s;
}
.agent-showcase {
padding: var(--space-24) 0;
background: white;
}
.agents-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: var(--space-8);
margin-top: var(--space-16);
}
.agent-card {
background: white;
border-radius: var(--radius-xl);
padding: var(--space-8);
box-shadow: var(--shadow-md);
border: 1px solid var(--gray-200);
transition: all var(--transition-normal);
}
.agent-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-xl);
}
.agent-header {
display: flex;
align-items: center;
gap: var(--space-4);
margin-bottom: var(--space-6);
}
.agent-icon {
width: 56px;
height: 56px;
border-radius: var(--radius-lg);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.5rem;
}
.job-hunter-icon {
background: linear-gradient(135deg, #3b82f6, #1d4ed8);
}
.app-crafter-icon {
background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}
.interview-coord-icon {
background: linear-gradient(135deg, #10b981, #047857);
}
.performance-analyst-icon {
background: linear-gradient(135deg, #f59e0b, #d97706);
}
.agent-title h3 {
font-size: 1.25rem;
font-weight: var(--font-weight-bold);
color: var(--gray-900);
margin-bottom: var(--space-1);
}
.agent-specialty {
font-size: 0.875rem;
color: var(--gray-600);
font-style: italic;
}
.agent-status-badge {
margin-left: auto;
display: flex;
align-items: center;
gap: var(--space-1);
padding: var(--space-1) var(--space-2);
border-radius: var(--radius-sm);
font-size: 0.75rem;
font-weight: var(--font-weight-semibold);
}
.agent-status-badge.active {
background: rgba(16, 185, 129, 0.1);
color: var(--success-color);
}
.status-indicator {
width: 6px;
height: 6px;
background: var(--success-color);
border-radius: 50%;
animation: statusBlink 2s ease-in-out infinite;
}
.agent-description {
color: var(--gray-600);
line-height: 1.6;
margin-bottom: var(--space-6);
}
.agent-capabilities h4 {
font-size: 0.875rem;
font-weight: var(--font-weight-semibold);
color: var(--gray-700);
margin-bottom: var(--space-3);
}
.agent-capabilities ul {
list-style: none;
padding: 0;
margin: 0;
}
.agent-capabilities li {
display: flex;
align-items: center;
gap: var(--space-2);
margin-bottom: var(--space-2);
font-size: 0.875rem;
color: var(--gray-700);
}
.agent-capabilities li i {
color: var(--success-color);
font-size: 0.75rem;
}
.agent-metrics {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-4);
margin-top: var(--space-6);
padding-top: var(--space-6);
border-top: 1px solid var(--gray-200);
}
.metric {
text-align: center;
}
.metric-value {
display: block;
font-size: 1.5rem;
font-weight: var(--font-weight-extrabold);
color: var(--primary-color);
line-height: 1;
margin-bottom: var(--space-1);
}
.metric-label {
font-size: 0.75rem;
color: var(--gray-600);
font-weight: var(--font-weight-medium);
}
/* Animations for AI Agents */
@keyframes hubPulse {
0%, 100% {
transform: translate(-50%, -50%) scale(1);
box-shadow: 0 0 30px rgba(99, 102, 241, 0.5);
}
50% {
transform: translate(-50%, -50%) scale(1.05);
box-shadow: 0 0 40px rgba(99, 102, 241, 0.7);
}
}
@keyframes agentFloat {
0%, 100% {
transform: translateY(0px);
}
50% {
transform: translateY(-10px);
}
}
@keyframes statusBlink {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.3;
}
}
@keyframes dataFlowing {
0% {
opacity: 0;
transform: scale(0.5);
}
50% {
opacity: 1;
transform: scale(1.2);
}
100% {
opacity: 0;
transform: scale(0.5);
}
}
/* Mobile Responsive for New Pages */
@media (max-width: 768px) {
.features-hero-title,
.pricing-hero-title,
.agents-hero-title {
font-size: 2.5rem;
}
.features-hero-stats,
.hero-stats {
grid-template-columns: 1fr;
gap: var(--space-4);
}
.feature-showcase {
grid-template-columns: 1fr;
gap: var(--space-8);
}
.feature-showcase.reverse {
direction: ltr;
}
.before-after {
grid-template-columns: 1fr;
gap: var(--space-4);
}
.optimization-arrow {
transform: rotate(90deg);
}
.advanced-features-grid,
.agents-grid {
grid-template-columns: 1fr;
}
.pricing-plans-grid {
grid-template-columns: 1fr;
}
.pricing-plan.featured {
transform: none;
}
.billing-toggle {
flex-direction: column;
gap: var(--space-2);
}
.pricing-trust {
flex-direction: column;
gap: var(--space-4);
}
.agents-hero-content {
grid-template-columns: 1fr;
gap: var(--space-8);
text-align: center;
}
.hero-cta {
justify-content: center;
align-items: center;
}
.agent-network {
height: 300px;
}
.neural-network {
height: 300px;
}
.agent-node {
position: relative;
margin-bottom: var(--space-4);
}
.agent-node.job-hunter,
.agent-node.app-crafter,
.agent-node.interview-coord,
.agent-node.performance-analyst {
position: relative;
top: auto;
left: auto;
right: auto;
bottom: auto;
}
.central-hub {
position: relative;
top: auto;
left: auto;
transform: none;
margin: var(--space-8) auto;
}
}
/* ====================================
CRITICAL CSS FIXES & ENHANCEMENTS
==================================== */
/* Fix dashboard section styling */
.agent-demo {
padding: 6rem 0;
background: #f8fafc;
}
.command-center {
max-width: 1200px;
margin: 0 auto;
background: white;
border-radius: 24px;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
border: 1px solid #e2e8f0;
overflow: hidden;
position: relative;
}
.command-center::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--primary-color), #8b5cf6, #10b981);
}
.dashboard-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 2rem 2.5rem 0;
margin-bottom: 2rem;
}
.dashboard-title {
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 1.5rem;
font-weight: 700;
color: var(--gray-900);
}
.dashboard-title i {
color: var(--primary-color);
font-size: 1.75rem;
}
.dashboard-status {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
background: rgba(16, 185, 129, 0.1);
border-radius: 12px;
font-size: 0.875rem;
font-weight: 600;
color: var(--success-color);
}
.status-indicator.active {
width: 8px;
height: 8px;
background: var(--success-color);
border-radius: 50%;
animation: statusBlink 2s ease-in-out infinite;
}
.dashboard-content {
padding: 0 2.5rem 2.5rem;
}
.dashboard-metrics {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
margin-bottom: 3rem;
}
.metric-card {
display: flex;
align-items: center;
gap: 1rem;
padding: 1.5rem;
background: var(--gray-50);
border-radius: 16px;
border: 1px solid var(--gray-200);
transition: all 0.3s ease;
}
.metric-card:hover {
background: white;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
transform: translateY(-2px);
}
.metric-card .metric-icon {
width: 48px;
height: 48px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.25rem;
}
.metric-card:nth-child(1) .metric-icon {
background: linear-gradient(135deg, #f59e0b, #d97706);
}
.metric-card:nth-child(2) .metric-icon {
background: linear-gradient(135deg, #3b82f6, #1d4ed8);
}
.metric-card:nth-child(3) .metric-icon {
background: linear-gradient(135deg, #10b981, #047857);
}
.metric-card:nth-child(4) .metric-icon {
background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}
.metric-info {
flex: 1;
}
.metric-number {
font-size: 1.75rem;
font-weight: 800;
color: var(--gray-900);
line-height: 1;
margin-bottom: 0.25rem;
}
.metric-label {
font-size: 0.875rem;
color: var(--gray-600);
font-weight: 500;
}
.metric-change {
font-size: 0.75rem;
font-weight: 600;
margin-top: 0.25rem;
}
.metric-change.positive {
color: var(--success-color);
}
.dashboard-activity {
background: white;
border-radius: 16px;
border: 1px solid var(--gray-200);
overflow: hidden;
}
.dashboard-activity h3 {
padding: 1.5rem 1.5rem 0;
margin-bottom: 1rem;
font-size: 1.125rem;
font-weight: 700;
color: var(--gray-900);
}
.activity-feed {
padding: 0 1.5rem 1.5rem;
}
.activity-item {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem;
border-radius: 12px;
margin-bottom: 0.75rem;
transition: all 0.3s ease;
}
.activity-item:hover {
background: var(--gray-50);
}
.activity-item:last-child {
margin-bottom: 0;
}
.activity-icon {
width: 40px;
height: 40px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1rem;
}
.activity-icon.job-hunter {
background: linear-gradient(135deg, #3b82f6, #1d4ed8);
}
.activity-icon.app-crafter {
background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}
.activity-icon.interview-coord {
background: linear-gradient(135deg, #10b981, #047857);
}
.activity-icon.performance-analyst {
background: linear-gradient(135deg, #f59e0b, #d97706);
}
.activity-content {
flex: 1;
}
.activity-text {
font-size: 0.875rem;
color: var(--gray-700);
font-weight: 500;
margin-bottom: 0.25rem;
}
.activity-time {
font-size: 0.75rem;
color: var(--gray-500);
}
/* Enhanced section titles */
.section-title {
font-size: 2.5rem;
font-weight: 800;
line-height: 1.1;
color: var(--gray-900);
text-align: center;
margin-bottom: 1rem;
letter-spacing: -0.02em;
}
.section-subtitle {
font-size: 1.125rem;
color: var(--gray-600);
text-align: center;
margin-bottom: 3rem;
max-width: 600px;
margin-left: auto;
margin-right: auto;
line-height: 1.6;
}
/* Improved buttons */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.875rem 1.75rem;
font-weight: 600;
font-size: 0.875rem;
border-radius: 12px;
text-decoration: none;
border: 2px solid transparent;
transition: all 0.3s ease;
cursor: pointer;
white-space: nowrap;
position: relative;
overflow: hidden;
}
.btn-primary {
background: linear-gradient(135deg, var(--primary-color), #8b5cf6);
color: white;
box-shadow: 0 4px 14px 0 rgba(99, 102, 241, 0.25);
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px 0 rgba(99, 102, 241, 0.35);
}
.btn-outline {
background: rgba(255, 255, 255, 0.1);
color: white;
border-color: rgba(255, 255, 255, 0.3);
backdrop-filter: blur(10px);
}
.btn-outline:hover {
background: rgba(255, 255, 255, 0.2);
border-color: rgba(255, 255, 255, 0.5);
}
/* High-contrast outline buttons inside pricing cards */
.pricing-plan .btn-outline {
background: #ffffff;
color: var(--primary-color);
border-color: var(--primary-color);
}
.pricing-plan .btn-outline:hover {
background: var(--primary-color);
color: #ffffff;
border-color: var(--primary-color);
}
.btn-large {
padding: 1rem 2rem;
font-size: 1rem;
}
/* Mobile improvements */
@media (max-width: 768px) {
.agents-hero {
padding: calc(80px + 4rem) 0 4rem;
min-height: auto;
}
.agents-hero-content {
grid-template-columns: 1fr;
gap: 3rem;
padding: 0 1rem;
}
.agents-hero-title {
font-size: 2.5rem;
}
.agents-hero-subtitle {
font-size: 1.125rem;
}
.dashboard-header,
.dashboard-content {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.dashboard-metrics {
grid-template-columns: 1fr;
}
.metric-card {
padding: 1.25rem;
}
.hero-stat:hover {
transform: none;
}
.hero-stat {
padding: 1.25rem;
}
}
/* ====================================
FEATURES & PRICING PAGE FIXES
==================================== */
/* Features Page Improvements */
.features-hero-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
max-width: 1000px;
margin: 4rem auto 0;
padding: 0 2rem;
}
.features-hero-stats .hero-stat {
background: rgba(255, 255, 255, 0.95);
border-radius: 24px;
padding: 3rem 2rem;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
border: 1px solid rgba(255, 255, 255, 0.2);
text-align: center;
transition: all 0.4s ease;
backdrop-filter: blur(10px);
position: relative;
overflow: hidden;
}
.features-hero-stats .hero-stat::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--primary-color), #8b5cf6, #10b981);
}
.features-hero-stats .hero-stat:hover {
transform: translateY(-8px);
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);
background: rgba(255, 255, 255, 1);
}
.features-hero-stats .stat-number {
font-size: 3.5rem;
font-weight: 900;
background: linear-gradient(135deg, var(--primary-color), #8b5cf6);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1;
margin-bottom: 0.75rem;
display: block;
letter-spacing: -0.02em;
}
.features-hero-stats .stat-label {
font-size: 0.95rem;
color: var(--gray-700);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
margin-top: 0.5rem;
}
/* Core Features Section */
.core-features {
padding: 6rem 0;
background: white;
}
.features-showcase {
margin-top: 4rem;
}
.feature-showcase {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
margin-bottom: 6rem;
padding: 0 2rem;
}
.feature-showcase:last-child {
margin-bottom: 0;
}
.feature-content {
padding: 2rem;
}
.feature-visual {
padding: 2.5rem;
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
border-radius: 24px;
border: 1px solid #e2e8f0;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
/* Advanced Features Grid */
.advanced-features {
padding: 6rem 0;
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}
.advanced-features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
gap: 2rem;
margin-top: 4rem;
}
.advanced-feature-card {
background: white;
border-radius: 24px;
padding: 2.5rem;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
border: 1px solid #e2e8f0;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.advanced-feature-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--primary-color), #8b5cf6, #10b981);
}
.advanced-feature-card:hover {
transform: translateY(-8px);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}
.advanced-feature-card .feature-icon {
width: 64px;
height: 64px;
background: linear-gradient(135deg, var(--primary-color), #8b5cf6);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.5rem;
color: white;
font-size: 1.5rem;
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}
.advanced-feature-card h3 {
font-size: 1.375rem;
font-weight: 700;
margin-bottom: 1rem;
color: var(--gray-900);
}
.advanced-feature-card p {
color: var(--gray-600);
margin-bottom: 2rem;
line-height: 1.6;
font-size: 0.95rem;
}
.feature-demo {
padding: 1.5rem;
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
border-radius: 16px;
border: 1px solid #e2e8f0;
}
/* Pricing Page Improvements */
.pricing-hero {
padding: calc(80px + 6rem) 0 6rem;
background: linear-gradient(135deg, var(--primary-light) 0%, #f1f5f9 100%);
text-align: center;
position: relative;
overflow: hidden;
}
.pricing-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
pointer-events: none;
}
.pricing-hero-title {
font-size: 3.5rem;
font-weight: 900;
line-height: 1.1;
margin-bottom: 1.5rem;
color: var(--gray-900);
letter-spacing: -0.02em;
}
.pricing-hero-subtitle {
font-size: 1.25rem;
color: var(--gray-600);
margin-bottom: 3rem;
max-width: 700px;
margin-left: auto;
margin-right: auto;
line-height: 1.6;
}
/* Billing Toggle Styling */
.billing-toggle {
display: flex;
align-items: center;
justify-content: center;
gap: 1.5rem;
margin-bottom: 3rem;
padding: 1rem 2rem;
background: white;
border-radius: 20px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
border: 1px solid #e2e8f0;
max-width: 400px;
margin-left: auto;
margin-right: auto;
margin-bottom: 3rem;
}
.toggle-label {
font-size: 1rem;
font-weight: 600;
color: var(--gray-700);
}
.toggle-switch {
position: relative;
display: inline-block;
width: 64px;
height: 36px;
}
.toggle-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, #e2e8f0, #cbd5e1);
transition: all 0.3s ease;
border-radius: 36px;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}
.toggle-slider:before {
position: absolute;
content: "";
height: 28px;
width: 28px;
left: 4px;
bottom: 4px;
background: white;
transition: all 0.3s ease;
border-radius: 50%;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
input:checked + .toggle-slider {
background: linear-gradient(135deg, var(--primary-color), #8b5cf6);
}
input:checked + .toggle-slider:before {
transform: translateX(28px);
}
.discount-badge {
background: linear-gradient(135deg, var(--success-color), #059669);
color: white;
padding: 0.25rem 0.75rem;
border-radius: 12px;
font-size: 0.75rem;
font-weight: 700;
margin-left: 0.5rem;
text-transform: uppercase;
letter-spacing: 0.5px;
box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3);
display: block;
}
/* Trust Indicators */
.pricing-trust {
display: flex;
justify-content: center;
gap: 3rem;
flex-wrap: wrap;
margin-bottom: 4rem;
}
.trust-item {
display: flex;
align-items: center;
gap: 0.75rem;
color: var(--gray-600);
font-size: 0.875rem;
font-weight: 500;
padding: 0.75rem 1.5rem;
background: white;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
border: 1px solid #e2e8f0;
}
.trust-item i {
color: var(--success-color);
font-size: 1rem;
}
/* Pricing Plans Grid */
.pricing-plans {
padding: 4rem 0 6rem;
background: white;
}
.pricing-plans-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 2rem;
margin-bottom: 4rem;
max-width: 1400px;
margin-left: auto;
margin-right: auto;
padding: 0 2rem;
}
.pricing-plan {
background: white;
border-radius: 24px;
padding: 2.5rem;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
border: 2px solid #e2e8f0;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.pricing-plan::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--gray-300), var(--gray-400));
transition: all 0.3s ease;
}
.pricing-plan.featured::before {
background: linear-gradient(90deg, var(--primary-color), #8b5cf6, #10b981);
height: 6px;
}
.pricing-plan.featured {
border-color: var(--primary-color);
transform: scale(1.05);
box-shadow: 0 12px 40px rgba(99, 102, 241, 0.15);
z-index: 2;
}
.pricing-plan:hover:not(.featured) {
transform: translateY(-8px);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}
.plan-ribbon {
position: absolute;
top: -1px;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(135deg, var(--primary-color), #8b5cf6);
color: white;
padding: 0.5rem 2rem;
border-radius: 0 0 12px 12px;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
box-shadow: 0 4px 8px rgba(99, 102, 241, 0.3);
}
.plan-header {
text-align: center;
margin-bottom: 2rem;
padding-top: 1rem;
}
.plan-name {
font-size: 1.75rem;
font-weight: 800;
color: var(--gray-900);
margin-bottom: 0.5rem;
}
.plan-badge {
background: linear-gradient(135deg, var(--primary-light), #ede9fe);
color: var(--primary-color);
padding: 0.375rem 1rem;
border-radius: 12px;
font-size: 0.75rem;
font-weight: 700;
margin-bottom: 1.5rem;
display: inline-block;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.plan-price {
margin-bottom: 1.5rem;
}
.plan-price .currency {
font-size: 1.5rem;
font-weight: 700;
color: var(--gray-600);
vertical-align: top;
}
.plan-price .amount {
font-size: 3rem;
font-weight: 900;
color: var(--gray-900);
letter-spacing: -0.02em;
}
.plan-price .period {
font-size: 1.125rem;
color: var(--gray-500);
font-weight: 600;
}
.billing-note {
font-size: 0.75rem;
color: var(--gray-500);
margin-top: 0.5rem;
font-weight: 500;
}
.plan-description {
color: var(--gray-600);
font-size: 0.95rem;
margin-bottom: 2rem;
line-height: 1.5;
text-align: center;
}
/* Feature Lists */
.plan-features {
margin-bottom: 2.5rem;
}
.feature-category h4 {
font-size: 0.875rem;
font-weight: 700;
color: var(--gray-700);
margin-bottom: 1rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.feature-list {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.feature {
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 0.875rem;
}
.feature.included {
color: var(--gray-700);
}
.feature.not-included {
color: var(--gray-400);
}
.feature i {
font-size: 1rem;
width: 16px;
text-align: center;
}
.feature.included i {
color: var(--success-color);
}
.feature.not-included i {
color: var(--gray-400);
}
.feature .limited {
color: var(--warning-color);
font-weight: var(--font-weight-medium);
}
.plan-cta {
text-align: center;
}
.btn-plan {
width: 100%;
padding: 1rem 2rem;
margin-bottom: 1rem;
font-weight: 700;
font-size: 0.95rem;
border-radius: 16px;
}
.plan-note {
font-size: 0.75rem;
color: var(--gray-500);
margin: 0;
}
/* Mobile Responsive Updates */
@media (max-width: 768px) {
.features-hero-stats {
grid-template-columns: 1fr;
gap: 1.5rem;
margin-top: 2rem;
}
.feature-showcase {
grid-template-columns: 1fr;
gap: 3rem;
margin-bottom: 4rem;
padding: 0 1rem;
}
.advanced-features-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.pricing-hero-title {
font-size: 2.5rem;
}
.billing-toggle {
flex-direction: column;
gap: 1rem;
padding: 1.5rem;
}
.pricing-trust {
flex-direction: column;
gap: 1rem;
align-items: center;
}
.pricing-plans-grid {
grid-template-columns: 1fr;
padding: 0 1rem;
}
.pricing-plan.featured {
transform: none;
}
.advanced-feature-card {
padding: 2rem;
}
.feature-content,
.feature-visual {
padding: 1.5rem;
}
}
/* ====================================
REAL RESULTS SECTION STYLING
==================================== */
.real-results {
padding: 8rem 0;
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 50%, #e2e8f0 100%);
position: relative;
overflow: hidden;
}
.real-results::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
pointer-events: none;
}
.real-results .container {
position: relative;
z-index: 2;
}
.real-results-title {
font-size: 3.5rem;
font-weight: 900;
text-align: center;
margin-bottom: 1.5rem;
color: var(--gray-900);
letter-spacing: -0.02em;
text-transform: uppercase;
}
.real-results-subtitle {
font-size: 1.25rem;
color: var(--gray-600);
text-align: center;
margin-bottom: 5rem;
max-width: 700px;
margin-left: auto;
margin-right: auto;
line-height: 1.6;
}
.results-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 3rem;
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
}
.result-card {
background: rgba(255, 255, 255, 0.95);
border-radius: 24px;
padding: 3rem 2.5rem;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
border: 1px solid rgba(255, 255, 255, 0.2);
transition: all 0.4s ease;
backdrop-filter: blur(10px);
position: relative;
overflow: hidden;
text-align: left;
}
.result-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 6px;
background: linear-gradient(90deg, var(--primary-color), #8b5cf6, #10b981, #f59e0b);
}
.result-card:hover {
transform: translateY(-12px);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
background: rgba(255, 255, 255, 1);
}
.result-stat {
font-size: 4rem;
font-weight: 900;
background: linear-gradient(135deg, var(--primary-color), #8b5cf6);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1;
margin-bottom: 1rem;
display: block;
letter-spacing: -0.03em;
}
.result-label {
font-size: 1.125rem;
font-weight: 700;
color: var(--gray-900);
margin-bottom: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.result-description {
font-size: 0.95rem;
color: var(--gray-600);
line-height: 1.6;
font-weight: 500;
}
/* Specific result card styling */
.result-card:nth-child(1) .result-stat {
background: linear-gradient(135deg, #10b981, #059669);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.result-card:nth-child(2) .result-stat {
background: linear-gradient(135deg, var(--primary-color), #8b5cf6);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.result-card:nth-child(3) .result-stat {
background: linear-gradient(135deg, #f59e0b, #d97706);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.result-card:nth-child(4) .result-stat {
background: linear-gradient(135deg, #8b5cf6, #7c3aed);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* AI Technology Section Enhancement */
.ai-technology {
padding: 8rem 0;
background: linear-gradient(135deg, var(--primary-light) 0%, #f8fafc 50%, #f1f5f9 100%);
position: relative;
overflow: hidden;
}
.ai-technology::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
pointer-events: none;
}
.ai-technology .container {
position: relative;
z-index: 2;
max-width: 1400px;
margin: 0 auto;
padding: 0 2rem;
}
.ai-tech-title {
font-size: 3.5rem;
font-weight: 900;
text-align: center;
margin-bottom: 2rem;
color: var(--gray-900);
letter-spacing: -0.02em;
text-transform: uppercase;
}
.ai-tech-subtitle {
font-size: 1.25rem;
color: var(--gray-600);
text-align: center;
margin-bottom: 6rem;
max-width: 700px;
margin-left: auto;
margin-right: auto;
line-height: 1.6;
}
.ai-tech-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6rem;
align-items: start;
}
.ai-tech-features {
display: flex;
flex-direction: column;
gap: 2rem;
}
.ai-feature {
display: flex;
align-items: flex-start;
gap: 1.5rem;
padding: 2.5rem;
background: rgba(255, 255, 255, 0.9);
border-radius: 24px;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.5);
transition: all 0.4s ease;
position: relative;
overflow: hidden;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}
.ai-feature::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--primary-color), #8b5cf6, #10b981);
}
.ai-feature:hover {
background: rgba(255, 255, 255, 1);
transform: translateY(-6px);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}
.ai-feature-icon {
width: 64px;
height: 64px;
background: linear-gradient(135deg, var(--primary-color), #8b5cf6);
border-radius: 18px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.75rem;
flex-shrink: 0;
box-shadow: 0 8px 24px rgba(99, 102, 241, 0.4);
}
.ai-feature-content h3 {
font-size: 1.375rem;
font-weight: 700;
margin-bottom: 0.75rem;
color: var(--gray-900);
}
.ai-feature-content p {
font-size: 0.95rem;
color: var(--gray-600);
line-height: 1.7;
margin: 0;
}
.ai-tech-stats {
display: flex;
flex-direction: column;
gap: 2rem;
position: sticky;
top: 2rem;
}
.ai-stat-card {
background: rgba(255, 255, 255, 0.95);
border-radius: 24px;
padding: 3rem 2.5rem;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
border: 1px solid rgba(255, 255, 255, 0.3);
backdrop-filter: blur(15px);
transition: all 0.4s ease;
position: relative;
overflow: hidden;
text-align: center;
}
.ai-stat-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 6px;
background: linear-gradient(90deg, var(--primary-color), #8b5cf6, #10b981);
}
.ai-stat-card:hover {
transform: translateY(-8px) scale(1.02);
box-shadow: 0 24px 80px rgba(0, 0, 0, 0.25);
background: rgba(255, 255, 255, 1);
}
.ai-stat-number {
font-size: 4rem;
font-weight: 900;
background: linear-gradient(135deg, var(--primary-color), #8b5cf6);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1;
margin-bottom: 1rem;
display: block;
letter-spacing: -0.03em;
}
.ai-stat-label {
font-size: 0.95rem;
color: var(--gray-700);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 0;
}
/* Specific stat card colors */
.ai-stat-card:nth-child(1) .ai-stat-number {
background: linear-gradient(135deg, var(--primary-color), #8b5cf6);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.ai-stat-card:nth-child(2) .ai-stat-number {
background: linear-gradient(135deg, #10b981, #059669);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.ai-stat-card:nth-child(3) .ai-stat-number {
background: linear-gradient(135deg, #f59e0b, #d97706);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* Mobile Responsive for new sections */
@media (max-width: 768px) {
.real-results-title,
.ai-tech-title {
font-size: 2.5rem;
}
.results-grid {
grid-template-columns: 1fr;
gap: 2rem;
padding: 0 1rem;
}
.result-card {
padding: 2rem;
text-align: center;
}
.ai-tech-content {
grid-template-columns: 1fr;
gap: 4rem;
}
.ai-tech-stats {
position: static;
order: 2;
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
}
.ai-tech-features {
order: 1;
}
.ai-feature {
padding: 2rem;
}
.ai-feature:hover {
transform: translateY(-4px);
}
.ai-stat-card {
padding: 2rem;
}
.ai-stat-card:hover {
transform: translateY(-4px) scale(1.01);
}
}
/* ====================================
ADDITIONAL PAGE SECTION STYLES
- Styles for elements present in pricing, features, and AI agents pages
- Only new selectors added to avoid overriding existing work
==================================== */
/* ---------- Pricing: Enterprise section ---------- */
.enterprise-section {
padding: 6rem 0;
background: white;
}
.enterprise-content {
display: grid;
grid-template-columns: 1.2fr 0.8fr;
gap: 3rem;
align-items: start;
}
.enterprise-info h2 {
font-size: 2rem;
font-weight: 800;
color: var(--gray-900);
margin-bottom: 1rem;
}
.enterprise-features {
display: flex;
flex-direction: column;
gap: 1rem;
margin-top: 1rem;
}
.enterprise-feature {
display: flex;
gap: 1rem;
padding: 1rem 1.25rem;
background: var(--gray-50);
border-radius: 14px;
border: 1px solid var(--gray-200);
}
.enterprise-feature i { color: var(--primary-color); font-size: 1.1rem; }
.enterprise-feature h4 { margin: 0 0 0.25rem; color: var(--gray-900); font-size: 1rem; }
.enterprise-feature p { margin: 0; font-size: 0.9rem; color: var(--gray-600); }
.enterprise-cta {
display: flex;
justify-content: center;
}
.enterprise-card {
background: linear-gradient(135deg, #f8fafc 0%, #eef2ff 100%);
border: 1px solid #e5e7eb;
border-radius: 20px;
padding: 2rem;
box-shadow: 0 8px 24px rgba(0,0,0,0.06);
text-align: center;
}
.enterprise-card h3 { margin-bottom: 0.5rem; }
.enterprise-price { font-size: 1.25rem; font-weight: 700; color: var(--gray-900); margin: 0.25rem 0 1rem; }
.enterprise-contact { margin-top: 0.75rem; color: var(--gray-600); }
@media (max-width: 900px) {
.enterprise-content { grid-template-columns: 1fr; }
}
/* ---------- Pricing: Comparison table ---------- */
.feature-comparison { padding: 5rem 0; background: var(--gray-50); }
.comparison-table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.comparison-table { width: 100%; border-collapse: separate; border-spacing: 0; background: white; border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; }
.comparison-table thead th { background: #f8fafc; color: var(--gray-700); font-weight: 700; padding: 1rem; text-align: left; border-bottom: 1px solid #e5e7eb; }
.comparison-table td { padding: 0.875rem 1rem; border-bottom: 1px solid #f1f5f9; color: var(--gray-700); }
.comparison-table .feature-column { width: 40%; }
.comparison-table .featured-column { color: var(--primary-color); }
.comparison-table .category-header td { background: #f8fafc; font-weight: 700; color: var(--gray-800); }
.comparison-table i { color: var(--success-color); }
.comparison-table .limited { color: var(--warning-color); font-weight: 600; }
/* ---------- Pricing: Additional FAQ/Testimonial/CTA ---------- */
.pricing-faq { padding: 5rem 0; background: white; }
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.faq-column { display: flex; flex-direction: column; gap: 1rem; }
.faq-column .faq-item { background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: 14px; padding: 1.25rem; }
.faq-column .faq-item h4 { margin: 0 0 0.25rem; color: var(--gray-900); }
.faq-column .faq-item p { margin: 0; color: var(--gray-600); }
.pricing-testimonials { padding: 5rem 0; background: white; }
.pricing-testimonials .testimonials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.5rem; }
.pricing-testimonials .testimonial-card { background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: 16px; padding: 1.5rem; }
.value-indicator .roi { background: rgba(16,185,129,.1); color: var(--success-color); font-weight: 700; padding: 0.25rem 0.5rem; border-radius: 8px; font-size: 0.8rem; }
.pricing-final-cta { padding: 5rem 0; background: linear-gradient(135deg, var(--primary-color), #8b5cf6); color: white; text-align: center; }
.pricing-final-cta h2 { color: white; margin-bottom: 0.5rem; }
.pricing-final-cta p { color: rgba(255,255,255,0.9); }
.cta-benefits { display: flex; gap: 1rem; justify-content: center; margin: 1rem 0 1.5rem; flex-wrap: wrap; }
.cta-benefit { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.2); border-radius: 12px; }
.final-cta-buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
@media (max-width: 768px) {
.faq-grid { grid-template-columns: 1fr; }
}
/* ---------- Features: Tech feature items mapping ---------- */
.tech-features { display: flex; flex-direction: column; gap: 1rem; }
.tech-feature { display: flex; align-items: flex-start; gap: 1rem; padding: 1.25rem; background: rgba(255,255,255,0.9); border: 1px solid #e5e7eb; border-radius: 16px; box-shadow: 0 6px 18px rgba(0,0,0,0.05); transition: transform .2s ease, box-shadow .2s ease; }
.tech-feature:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(0,0,0,0.08); }
.tech-icon { width: 48px; height: 48px; border-radius: 12px; background: linear-gradient(135deg, var(--primary-color), #8b5cf6); color: white; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(99,102,241,0.3); flex-shrink: 0; }
.tech-content h4 { margin: 0 0 0.25rem; color: var(--gray-900); }
.tech-content p { margin: 0; color: var(--gray-600); }
/* ---------- Features: AI brain visual ---------- */
.ai-tech-visual { display: flex; align-items: center; justify-content: center; }
.ai-brain-visual { position: relative; width: 320px; height: 320px; background: radial-gradient(100px 100px at 50% 50%, rgba(99,102,241,0.25), rgba(99,102,241,0.05)); border: 1px solid #e5e7eb; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 12px 30px rgba(0,0,0,0.08); }
.brain-core { width: 96px; height: 96px; border-radius: 50%; background: linear-gradient(135deg, var(--primary-color), #8b5cf6); display: flex; align-items: center; justify-content: center; color: white; font-size: 2rem; box-shadow: 0 10px 24px rgba(99,102,241,0.35); animation: aiPulse 2s ease-in-out infinite; }
.data-streams { position: absolute; inset: 0; pointer-events: none; }
.data-stream { position: absolute; width: 100%; height: 100%; animation: rotate 10s linear infinite; }
.data-stream.stream-2 { animation-duration: 14s; }
.data-stream.stream-3 { animation-duration: 18s; }
.data-point { position: absolute; width: 6px; height: 6px; background: var(--primary-color); border-radius: 50%; box-shadow: 0 0 10px rgba(99,102,241,.4); }
.stream-1 .data-point:nth-child(1){ top:10%; left:50%; }
.stream-1 .data-point:nth-child(2){ top:50%; left:90%; }
.stream-1 .data-point:nth-child(3){ top:80%; left:20%; }
.stream-2 .data-point:nth-child(1){ top:20%; left:15%; }
.stream-2 .data-point:nth-child(2){ top:60%; left:75%; }
.stream-2 .data-point:nth-child(3){ top:85%; left:45%; }
.stream-3 .data-point:nth-child(1){ top:30%; left:30%; }
.stream-3 .data-point:nth-child(2){ top:70%; left:60%; }
.stream-3 .data-point:nth-child(3){ top:40%; left:85%; }
@keyframes rotate { 0%{ transform: rotate(0deg);} 100%{ transform: rotate(360deg);} }
.ai-stats { position: absolute; bottom: -24px; left: 50%; transform: translateX(-50%); display: flex; gap: 1rem; }
.ai-stat { background: white; border: 1px solid #e5e7eb; border-radius: 12px; padding: 0.5rem 0.75rem; box-shadow: 0 6px 16px rgba(0,0,0,0.06); text-align: center; }
.ai-stat .stat-number { display:block; font-weight: 800; background: linear-gradient(135deg, var(--primary-color), #8b5cf6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.ai-stat .stat-label { font-size: 0.75rem; color: var(--gray-600); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }
/* ---------- Features: Results section mapping ---------- */
.features-results { padding: 6rem 0; background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); }
.features-results .results-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; }
.result-card .result-metric { margin-bottom: 0.5rem; }
.result-card .metric-number { font-size: 3rem; font-weight: 900; background: linear-gradient(135deg, var(--primary-color), #8b5cf6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; letter-spacing: -0.02em; }
.result-card .metric-label { font-weight: 700; color: var(--gray-900); text-transform: uppercase; letter-spacing: .5px; font-size: 0.9rem; }
/* ---------- AI Agents: Workflow / Benefits / Stories / Final CTA ---------- */
.agent-workflow { padding: 6rem 0; background: var(--gray-50); }
.workflow-visualization { display: grid; grid-template-columns: 1fr; gap: 2rem; max-width: 980px; margin: 0 auto; }
.workflow-step {
display: grid;
grid-template-columns: 64px 1fr 200px;
gap: 1.25rem;
align-items: center;
background: #ffffff;
border: 1px solid var(--gray-200);
border-radius: 20px;
padding: 1.25rem 1.5rem;
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.workflow-step:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(15,23,42,.1); border-color: #e2e8f0; }
.workflow-step .step-number {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 14px;
background: linear-gradient(135deg, #7c3aed, #6366f1);
color: #fff;
font-weight: 900;
font-size: 1.1rem;
box-shadow: 0 6px 16px rgba(99,102,241,.35);
}
.workflow-step .step-icon {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 12px;
background: linear-gradient(135deg, #6366f1, #4338ca);
color: #ffffff;
box-shadow: 0 6px 16px rgba(67,56,202,0.35), inset 0 0 0 1px rgba(255,255,255,0.25);
}
.workflow-step .step-content h3 { margin: 0 0 0.25rem; font-size: 1.125rem; font-weight: 800; color: var(--gray-900); letter-spacing: -0.01em; }
.workflow-step .step-content p { margin: 0; color: var(--gray-600); font-size: 0.95rem; }
.workflow-step .step-animation {
display: flex;
align-items: center;
justify-content: center;
height: 72px;
border: 1px dashed #cbd5e1;
border-radius: 14px;
background:
repeating-linear-gradient(
45deg,
rgba(15,23,42,0.03),
rgba(15,23,42,0.03) 6px,
rgba(15,23,42,0.06) 6px,
rgba(15,23,42,0.06) 12px
),
linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%);
box-shadow: inset 0 0 0 9999px rgba(255,255,255,.12);
}
.workflow-step .step-animation i { color: var(--gray-500); }
.workflow-arrow { display: flex; justify-content: center; color: var(--gray-400); }
.workflow-arrow i {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
background: #fff;
border: 1px solid #e5e7eb;
box-shadow: 0 6px 16px rgba(0,0,0,.06);
}
.workflow-visualization > .workflow-step + .workflow-arrow { margin-top: -0.5rem; }
.scanning-radar, .crafting-process, .submission-tracker, .optimization-chart { width: 140px; height: 72px; border: 1px dashed #d1d5db; border-radius: 14px; }
.scanning-radar { background: radial-gradient(closest-side, rgba(99,102,241,.12), transparent); animation: pulse 2s infinite; }
.optimization-chart {
background:
repeating-linear-gradient(
45deg,
rgba(15,23,42,0.04),
rgba(15,23,42,0.04) 6px,
rgba(15,23,42,0.08) 6px,
rgba(15,23,42,0.08) 12px
),
linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%);
border-color: #cbd5e1;
}
@keyframes pulse { 0%,100%{ transform: scale(1);} 50%{ transform: scale(1.04);} }
.agent-benefits { padding: 6rem 0; background: white; }
.benefits-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; }
.benefit-card { background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: 16px; padding: 1.5rem; transition: transform .2s ease, box-shadow .2s ease; }
.benefit-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0,0,0,0.08); }
.benefit-icon { width: 48px; height: 48px; border-radius: 12px; background: linear-gradient(135deg, var(--primary-color), #8b5cf6); display: flex; align-items: center; justify-content: center; color: white; margin-bottom: 0.5rem; }
.benefit-stat { display: inline-flex; gap: 0.25rem; align-items: baseline; padding: 0.25rem 0.5rem; background: rgba(99,102,241,.08); border: 1px solid rgba(99,102,241,.2); border-radius: 8px; color: var(--primary-color); font-weight: 700; margin-top: 0.75rem; }
.agent-success-stories { padding: 6rem 0; background: var(--gray-50); }
.success-stories-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 1.5rem; }
.success-story { background: white; border: 1px solid var(--gray-200); border-radius: 16px; padding: 1.5rem; }
.success-story .story-header { display: grid; grid-template-columns: 56px 1fr auto; gap: 1rem; align-items: center; margin-bottom: 0.75rem; }
.success-story .user-avatar img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.success-metric { text-align: right; }
.success-metric .metric-number { font-weight: 900; color: var(--primary-color); }
.story-results { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin-top: 0.75rem; }
.story-results .result-item { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; background: var(--gray-50); border-radius: 999px; color: var(--gray-700); border: 1px solid var(--gray-200); }
.agents-final-cta { padding: 6rem 0; background: linear-gradient(135deg, #0f172a 0%, #334155 100%); color: white; text-align: center; }
.agents-final-cta h2 { color: white; margin-bottom: 0.5rem; }
.agents-final-cta p { color: rgba(255,255,255,0.9); }
.cta-features { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; margin: 1rem 0 1.5rem; }
.cta-feature { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; border: 1px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.08); border-radius: 10px; }
.cta-buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
@media (max-width: 768px) {
.workflow-step { grid-template-columns: 48px 1fr; padding: 1rem; }
.workflow-step .step-animation { display: none; }
}
/* ===== SCROLL-TRIGGERED FADE-IN ANIMATIONS ===== */
/* Base animation states - elements start hidden */
.fade-in-element {
opacity: 0;
transform: translateY(30px);
transition: opacity var(--animation-duration) cubic-bezier(0.4, 0, 0.2, 1),
transform var(--animation-duration) cubic-bezier(0.4, 0, 0.2, 1);
}
/* Active state when element comes into view */
.fade-in-element.animate-in {
opacity: 1;
transform: translateY(0);
}
/* Staggered animation delays for multiple elements */
.fade-in-element:nth-child(1) { transition-delay: 0ms; }
.fade-in-element:nth-child(2) { transition-delay: 100ms; }
.fade-in-element:nth-child(3) { transition-delay: 200ms; }
.fade-in-element:nth-child(4) { transition-delay: 300ms; }
.fade-in-element:nth-child(5) { transition-delay: 400ms; }
.fade-in-element:nth-child(6) { transition-delay: 500ms; }
.fade-in-element:nth-child(7) { transition-delay: 600ms; }
.fade-in-element:nth-child(8) { transition-delay: 700ms; }
/* Alternative animation effects */
.fade-in-left {
opacity: 0;
transform: translateX(-30px);
transition: opacity var(--animation-duration) cubic-bezier(0.4, 0, 0.2, 1),
transform var(--animation-duration) cubic-bezier(0.4, 0, 0.2, 1);
}
.fade-in-left.animate-in {
opacity: 1;
transform: translateX(0);
}
.fade-in-right {
opacity: 0;
transform: translateX(30px);
transition: opacity var(--animation-duration) cubic-bezier(0.4, 0, 0.2, 1),
transform var(--animation-duration) cubic-bezier(0.4, 0, 0.2, 1);
}
.fade-in-right.animate-in {
opacity: 1;
transform: translateX(0);
}
.fade-in-scale {
opacity: 0;
transform: scale(0.9);
transition: opacity var(--animation-duration) cubic-bezier(0.4, 0, 0.2, 1),
transform var(--animation-duration) cubic-bezier(0.4, 0, 0.2, 1);
}
.fade-in-scale.animate-in {
opacity: 1;
transform: scale(1);
}
/* Section-specific animations */
.hero-content .fade-in-element:nth-child(1) { transition-delay: 0ms; }
.hero-content .fade-in-element:nth-child(2) { transition-delay: 200ms; }
.hero-content .fade-in-element:nth-child(3) { transition-delay: 400ms; }
.hero-visual .fade-in-element { transition-delay: 600ms; }
/* Feature cards with staggered delays */
.features-grid .feature-card:nth-child(1) { transition-delay: 0ms; }
.features-grid .feature-card:nth-child(2) { transition-delay: 150ms; }
.features-grid .feature-card:nth-child(3) { transition-delay: 300ms; }
.features-grid .feature-card:nth-child(4) { transition-delay: 450ms; }
.features-grid .feature-card:nth-child(5) { transition-delay: 600ms; }
.features-grid .feature-card:nth-child(6) { transition-delay: 750ms; }
/* Templates grid animations */
.templates-grid .template-card:nth-child(1) { transition-delay: 0ms; }
.templates-grid .template-card:nth-child(2) { transition-delay: 200ms; }
.templates-grid .template-card:nth-child(3) { transition-delay: 400ms; }
/* Process steps animations */
.process-steps .process-step:nth-child(1) { transition-delay: 0ms; }
.process-steps .process-step:nth-child(2) { transition-delay: 200ms; }
.process-steps .process-step:nth-child(3) { transition-delay: 400ms; }
/* Problem items */
.problem-grid .problem-item:nth-child(1) { transition-delay: 0ms; }
.problem-grid .problem-item:nth-child(2) { transition-delay: 150ms; }
.problem-grid .problem-item:nth-child(3) { transition-delay: 300ms; }
/* How it works steps */
.steps-container .step:nth-child(1) { transition-delay: 0ms; }
.steps-container .step:nth-child(2) { transition-delay: 200ms; }
.steps-container .step:nth-child(3) { transition-delay: 400ms; }
/* Testimonial cards */
.testimonials-grid .testimonial-card:nth-child(1) { transition-delay: 0ms; }
.testimonials-grid .testimonial-card:nth-child(2) { transition-delay: 200ms; }
.testimonials-grid .testimonial-card:nth-child(3) { transition-delay: 400ms; }
/* Pricing cards */
.pricing-grid .pricing-card:nth-child(1) { transition-delay: 0ms; }
.pricing-grid .pricing-card:nth-child(2) { transition-delay: 150ms; }
.pricing-grid .pricing-card:nth-child(3) { transition-delay: 300ms; }
/* FAQ items with slight stagger */
.faq-container .faq-item:nth-child(odd) { transition-delay: 0ms; }
.faq-container .faq-item:nth-child(even) { transition-delay: 100ms; }
/* Company logos horizontal scroll animation */
.logos-grid {
overflow: hidden;
position: relative;
mask: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
-webkit-mask: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}
.logos-scroll-container {
display: flex;
align-items: center;
gap: 4rem;
width: calc(200% + 4rem); /* Accommodate duplicated logos */
will-change: transform;
transition: transform 0.1s ease-out;
}
/* Create infinite scroll effect by duplicating logos */
.logos-scroll-container .company-logo-wrapper {
flex-shrink: 0;
min-width: 120px;
transition: opacity 0.3s ease, transform 0.3s ease;
}
/* Add subtle hover effects */
.logos-scroll-container .company-logo-wrapper:hover {
transform: scale(1.1);
opacity: 1;
}
.logos-scroll-container .company-logo-wrapper {
opacity: 0.7;
}
/* Smooth transition for scroll-triggered movement */
@media (hover: hover) and (pointer: fine) {
.logos-scroll-container {
transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
}
/* ===== MORPHING CIRCLE BACKGROUND ELEMENT ===== */
.morphing-circle-container {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
pointer-events: none;
z-index: 0;
overflow: hidden;
}
.morphing-circle {
position: absolute;
width: 520px; /* was 400px */
height: 520px; /* was 400px */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
will-change: transform, border-radius, width, height;
transition: all 0.1s ease-out;
}
.circle-core {
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(135deg,
rgba(99, 102, 241, 0.4) 0%,
rgba(59, 130, 246, 0.3) 100%);
border-radius: 50%;
box-shadow:
0 0 60px rgba(99, 102, 241, 0.6),
0 0 120px rgba(99, 102, 241, 0.3);
/* border removed */
/* border: 2px solid rgba(99, 102, 241, 0.5); */
animation: coreFloat 8s ease-in-out infinite;
will-change: transform, border-radius, background;
}
.circle-glow {
position: absolute;
width: 200%;
height: 200%;
top: -50%;
left: -50%;
background: radial-gradient(circle at center,
rgba(99, 102, 241, 0.3) 0%,
rgba(99, 102, 241, 0.15) 50%,
transparent 70%);
border-radius: 50%;
filter: blur(30px);
animation: glowPulse 6s ease-in-out infinite;
will-change: opacity, transform;
}
.particle-trail {
position: absolute;
width: 110%;
height: 110%;
top: -5%;
left: -5%;
border-radius: 50%;
opacity: 0;
background: linear-gradient(45deg,
rgba(99, 102, 241, 0.15),
rgba(139, 92, 246, 0.12),
rgba(59, 130, 246, 0.1));
filter: blur(3px);
animation: trailEffect 4s ease-in-out infinite;
will-change: opacity, transform;
}
/* Core blob morphing animations - Much more organic */
@keyframes coreFloat {
0% {
transform: rotate(0deg) scale(1);
border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%;
}
14% {
transform: rotate(45deg) scale(1.08);
border-radius: 36% 64% 47% 53% / 32% 68% 71% 29%;
}
28% {
transform: rotate(90deg) scale(0.95);
border-radius: 76% 24% 33% 67% / 68% 55% 45% 32%;
}
42% {
transform: rotate(135deg) scale(1.12);
border-radius: 28% 72% 69% 31% / 42% 71% 29% 58%;
}
57% {
transform: rotate(180deg) scale(0.88);
border-radius: 71% 29% 24% 76% / 58% 29% 71% 42%;
}
71% {
transform: rotate(225deg) scale(1.06);
border-radius: 35% 65% 43% 57% / 49% 62% 38% 51%;
}
85% {
transform: rotate(270deg) scale(0.97);
border-radius: 49% 51% 71% 29% / 36% 45% 55% 64%;
}
100% {
transform: rotate(360deg) scale(1);
border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%;
}
}
@keyframes glowPulse {
0% {
opacity: 0.7;
transform: scale(1) rotate(0deg);
border-radius: 60% 40% 30% 70% / 40% 50% 60% 50%;
}
33% {
opacity: 0.9;
transform: scale(1.2) rotate(120deg);
border-radius: 30% 60% 70% 40% / 60% 30% 70% 40%;
}
66% {
opacity: 1;
transform: scale(1.4) rotate(240deg);
border-radius: 70% 30% 40% 60% / 50% 40% 60% 50%;
}
100% {
opacity: 0.7;
transform: scale(1) rotate(360deg);
border-radius: 60% 40% 30% 70% / 40% 50% 60% 50%;
}
}
@keyframes trailEffect {
0% {
opacity: 0;
transform: scale(0.8) rotate(0deg);
border-radius: 45% 55% 65% 35% / 55% 45% 35% 65%;
}
25% {
opacity: 0.2;
transform: scale(1.05) rotate(90deg);
border-radius: 65% 35% 45% 55% / 35% 65% 55% 45%;
}
50% {
opacity: 0.4;
transform: scale(1.15) rotate(180deg);
border-radius: 35% 65% 55% 45% / 65% 35% 45% 55%;
}
75% {
opacity: 0.2;
transform: scale(1.0) rotate(270deg);
border-radius: 55% 45% 35% 65% / 45% 55% 65% 35%;
}
100% {
opacity: 0;
transform: scale(0.9) rotate(360deg);
border-radius: 45% 55% 65% 35% / 55% 45% 35% 65%;
}
}
/* Morphing states for different scroll positions - Organic blob shapes */
.morphing-circle.state-hero .circle-core {
background: linear-gradient(135deg,
rgba(99, 102, 241, 0.5) 0%,
rgba(59, 130, 246, 0.4) 100%);
border-radius: 58% 42% 63% 37% / 45% 55% 48% 52%;
animation-duration: 7s;
animation-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
.morphing-circle.state-features .circle-core {
background: linear-gradient(135deg,
rgba(139, 92, 246, 0.5) 0%,
rgba(167, 139, 250, 0.4) 100%);
border-radius: 73% 27% 44% 56% / 35% 68% 32% 65%;
animation-duration: 5s;
animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.morphing-circle.state-testimonials .circle-core {
background: linear-gradient(135deg,
rgba(16, 185, 129, 0.5) 0%,
rgba(59, 130, 246, 0.4) 100%);
border-radius: 31% 69% 74% 26% / 71% 39% 61% 29%;
animation-duration: 6s;
animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.morphing-circle.state-pricing .circle-core {
background: linear-gradient(135deg,
rgba(245, 158, 11, 0.5) 0%,
rgba(99, 102, 241, 0.4) 100%);
border-radius: 64% 36% 27% 73% / 52% 29% 71% 48%;
animation-duration: 4s;
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
/* Dynamic size variations (reduced to 20% of original variation) */
.morphing-circle.size-small {
width: 380px; /* Reduced from 300px (20px difference instead of 100px) */
height: 380px;
}
.morphing-circle.size-large {
width: 420px; /* Reduced from 500px (20px difference instead of 100px) */
height: 420px;
}
.morphing-circle.size-huge {
width: 440px; /* Reduced from 600px (40px difference instead of 200px) */
height: 440px;
}
/* Speed-based effects */
.morphing-circle.speed-fast .circle-core {
animation-duration: 2s;
}
.morphing-circle.speed-fast .circle-glow {
animation-duration: 1.5s;
}
.morphing-circle.speed-slow .circle-core {
animation-duration: 12s;
}
.morphing-circle.speed-slow .circle-glow {
animation-duration: 10s;
}
/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
.fade-in-element,
.fade-in-left,
.fade-in-right,
.fade-in-scale {
transition: none;
opacity: 1;
transform: none;
}
.logos-scroll-container {
transition: none;
transform: none !important;
}
.morphing-circle-container {
display: none;
}
.morphing-circle,
.circle-core,
.circle-glow,
.particle-trail {
animation: none !important;
transform: none !important;
}
}
/* Lite mode: completely disable morphing circle visuals and animations */
.lite-mode .morphing-circle-container {
display: none !important;
}
.lite-mode .morphing-circle,
.lite-mode .circle-core,
.lite-mode .circle-glow,
.lite-mode .particle-trail {
animation: none !important;
transform: none !important;
}
/* ================================
Templates Interactive Demo
================================ */
.templates .section-title { margin-bottom: 12px; }
.templates .section-subtitle { margin-bottom: 24px; }
.templates-demo {
background: var(--card-bg, #0f1221);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 16px;
padding: 20px;
box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}
.templates-demo .demo-controls { display: flex; flex-direction: column; gap: 16px; }
.templates-demo .control-group { display: flex; flex-direction: column; gap: 8px; }
.templates-demo .control-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.templates-demo .control-field { display: flex; flex-direction: column; gap: 6px; }
.templates-demo .control-label { font-weight: 600; font-size: 14px; color: #c7ccff; }
.templates-demo .control-input {
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.1);
color: #fff; border-radius: 10px; padding: 10px 12px;
}
.templates-demo .control-input::placeholder { color: #98a0d0; }
.templates-demo .control-hint { color: #98a0d0; font-size: 12px; }
.templates-demo .template-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.templates-demo .template-tabs .tab-button {
background: rgba(255,255,255,0.06);
color: #e8ebff; border: 1px solid rgba(255,255,255,0.08);
padding: 10px 12px; border-radius: 12px; cursor: pointer;
display: inline-flex; align-items: center; gap: 8px; font-weight: 600;
}
.templates-demo .template-tabs .tab-button .tab-benefit {
background: rgba(56, 189, 248, 0.18);
color: #8cd3ff; padding: 2px 8px; border-radius: 999px; font-size: 12px;
}
.templates-demo .template-tabs .tab-button.active {
background: linear-gradient(135deg, rgba(88,101,242,0.25), rgba(56,189,248,0.25));
border-color: rgba(255,255,255,0.2);
}
.templates-demo .before-after { display: flex; align-items: center; gap: 12px; }
.templates-demo .toggle { position: relative; display: inline-flex; align-items: center; gap: 10px; }
.templates-demo .toggle input { display: none; }
.templates-demo .toggle .slider { width: 56px; height: 28px; border-radius: 999px; background: rgba(255,255,255,0.12); position: relative; transition: background .2s ease; }
.templates-demo .toggle .slider::after { content: ''; position: absolute; width: 22px; height: 22px; border-radius: 50%; background: #fff; top: 3px; left: 4px; transition: transform .2s ease; }
.templates-demo .toggle input:checked + .slider { background: #5c6bff; }
.templates-demo .toggle input:checked + .slider::after { transform: translateX(28px); }
.templates-demo .toggle .toggle-labels { display: inline-flex; align-items: center; gap: 8px; color: #c7ccff; font-size: 12px; }
.templates-demo .demo-preview { margin-top: 16px; display: grid; grid-template-columns: 1fr; }
.templates-demo .resume-frame {
background: #fff; color: #111; border-radius: 14px; overflow: hidden; position: relative;
border: 1px solid rgba(0,0,0,0.08);
}
.templates-demo .resume-frame.template-modern { font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
.templates-demo .resume-frame.template-minimal { font-family: 'Inter', sans-serif; letter-spacing: .1px; }
.templates-demo .resume-frame.template-professional { font-family: Georgia, 'Times New Roman', serif; }
.templates-demo .resume-frame.template-creative { font-family: 'Trebuchet MS', 'Gill Sans', Arial, sans-serif; }
.templates-demo .resume-frame.template-executive { font-family: 'Inter', sans-serif; }
.templates-demo .resume-view { padding: 18px; display: none; }
.templates-demo .resume-view.active, .templates-demo .resume-view[aria-hidden="false"] { display: block; }
.templates-demo .resume-header { border-bottom: 2px solid #eaeaea; padding-bottom: 10px; margin-bottom: 10px; position: relative; }
.templates-demo .resume-header.ats { border-bottom-color: #d6ddff; }
.templates-demo .resume-name { font-weight: 800; font-size: 20px; }
.templates-demo .resume-title { color: #555; font-weight: 600; }
.templates-demo .resume-contact { color: #4b5563; font-size: 12px; margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px; }
.templates-demo .resume-contact a { color: #1d4ed8; text-decoration: none; }
.templates-demo .resume-contact .sep { color: #9ca3af; }
.templates-demo .resume-rule { height: 1px; background: #e5e7eb; margin: 8px 0 14px; }
.templates-demo .resume-section { margin: 10px 0; }
.templates-demo .section-heading { font-weight: 700; font-size: 13px; color: #333; margin-bottom: 6px; }
.templates-demo .section-heading.upper { text-transform: uppercase; letter-spacing: .04em; color: #111827; }
.templates-demo .subheading { font-weight: 700; color: #374151; margin: 6px 0 4px; font-size: 12px; }
.templates-demo .skills-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 6px 12px; }
.templates-demo .skills-list li { font-size: 13px; color: #222; }
.templates-demo .inline-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 10px; }
.templates-demo .inline-list li { font-size: 12px; color: #374151; }
.templates-demo .bullets { list-style: disc; padding-left: 18px; color: #222; }
.templates-demo .bullets li { margin-bottom: 6px; }
.templates-demo .experience-header, .templates-demo .experience-subheader { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.templates-demo .experience-header .company { font-weight: 700; color: #111827; }
.templates-demo .experience-header .location { color: #4b5563; font-size: 12px; }
.templates-demo .experience-subheader .position { font-weight: 700; color: #111827; }
.templates-demo .experience-subheader .dates { color: #4b5563; font-size: 12px; }
.templates-demo .keyword { background: #eef4ff; color: #1f3b8a; border: 1px solid #c9d7ff; padding: 0 6px; border-radius: 6px; font-weight: 700; }
.templates-demo .bullet-highlight { background: #f1fff4; border: 1px solid #c6f2d1; padding: 0 6px; border-radius: 6px; }
.templates-demo .callout { position: relative; }
.templates-demo .callout::after {
content: attr(data-tooltip);
position: absolute; left: 0; top: -26px; white-space: nowrap;
background: rgba(17, 24, 39, 0.95); color: #e5e7eb; padding: 6px 8px; border-radius: 6px; font-size: 12px;
opacity: 0; transform: translateY(-4px); transition: all .15s ease; pointer-events: none;
}
.templates-demo .callout.show-tooltip::after { opacity: 1; transform: translateY(0); }
/* mini gallery reuse */
.templates-gallery { margin-top: 18px; }
.templates-gallery .template-preview.small { height: 80px; background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)); border: 1px dashed rgba(255,255,255,0.12); border-radius: 12px; position: relative; }
.templates-gallery .template-badge { position: absolute; top: 8px; right: 8px; background: rgba(17,24,39,0.7); color: #c7ccff; padding: 4px 8px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.templates-gallery .template-badge i { color: #8cd3ff; }
@media (max-width: 800px) {
.templates-demo .control-row { grid-template-columns: 1fr; }
}
/* ================================
ATS Score Calculator
================================ */
.ats-calculator {
padding: 6rem 0;
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}
.calculator-widget {
background: white;
border-radius: 24px;
padding: 2.5rem;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
border: 1px solid #e2e8f0;
max-width: 1000px;
margin: 0 auto;
}
.input-section {
margin-bottom: 2rem;
}
.input-group {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
margin-bottom: 2rem;
}
.input-field {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.input-label {
font-weight: 600;
color: var(--gray-700);
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.95rem;
}
.input-label i {
color: var(--primary-color);
font-size: 1.1rem;
}
.input-textarea {
border: 2px solid #e2e8f0;
border-radius: 12px;
padding: 1rem;
font-family: inherit;
font-size: 0.9rem;
line-height: 1.5;
resize: vertical;
transition: all 0.3s ease;
background: #fafbfc;
}
.input-textarea:focus {
outline: none;
border-color: var(--primary-color);
background: white;
box-shadow: var(--focus-ring-shadow);
}
.input-textarea::placeholder {
color: #9ca3af;
}
.input-hint {
font-size: 0.8rem;
color: #6b7280;
}
.analyze-section {
text-align: center;
padding: 1.5rem 0;
border-top: 1px solid #e5e7eb;
}
.analyze-btn {
min-width: 280px;
position: relative;
overflow: hidden;
}
.analyze-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none !important;
}
.analyze-btn.ready {
background: linear-gradient(135deg, #10b981, #059669);
animation: pulse 2s infinite;
}
.analyze-note {
margin-top: 0.75rem;
font-size: 0.85rem;
color: #6b7280;
}
.results-section {
margin-top: 2rem;
padding-top: 2rem;
border-top: 2px solid #e5e7eb;
}
.score-display {
display: grid;
grid-template-columns: auto 1fr;
gap: 2.5rem;
align-items: center;
margin-bottom: 2rem;
}
.score-circle {
width: 140px;
height: 140px;
border-radius: 50%;
background: conic-gradient(from 0deg, #ef4444 0deg, #ef4444 var(--score-percentage, 0deg), #e5e7eb var(--score-percentage, 0deg));
display: flex;
align-items: center;
justify-content: center;
position: relative;
transition: all 0.6s ease;
}
.score-circle::before {
content: '';
position: absolute;
width: 110px;
height: 110px;
background: white;
border-radius: 50%;
}
.score-inner {
position: relative;
z-index: 2;
text-align: center;
bottom: 6px;
}
.score-number {
font-size: 2.5rem;
font-weight: 900;
color: var(--gray-900);
line-height: 1;
bottom: -20px;
}
.score-label {
position: absolute;
bottom: -30px;
left: 50%;
transform: translateX(-50%);
font-size: 0.8rem;
color: var(--gray-600);
font-weight: 600;
white-space: nowrap;
}
.score-circle {
margin-bottom: 32px;
position: relative;
}
.score-circle.score-low {
background: conic-gradient(from 0deg, #ef4444 0deg, #ef4444 var(--score-percentage, 0deg), #e5e7eb var(--score-percentage, 0deg));
}
.score-circle.score-medium {
background: conic-gradient(from 0deg, #f59e0b 0deg, #f59e0b var(--score-percentage, 0deg), #e5e7eb var(--score-percentage, 0deg));
}
.score-circle.score-high {
background: conic-gradient(from 0deg, #10b981 0deg, #10b981 var(--score-percentage, 0deg), #e5e7eb var(--score-percentage, 0deg));
}
.score-details {
flex: 1;
}
.score-status {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1.5rem;
font-size: 1.1rem;
font-weight: 600;
}
.score-status.status-low {
color: #dc2626;
}
.score-status.status-medium {
color: #d97706;
}
.score-status.status-high {
color: #059669;
}
.score-breakdown {
display: flex;
flex-direction: column;
gap: 1rem;
}
.breakdown-item {
display: flex;
align-items: center;
gap: 1rem;
}
.breakdown-label {
min-width: 100px;
font-size: 0.9rem;
font-weight: 500;
color: var(--gray-700);
}
.breakdown-bar {
flex: 1;
height: 8px;
background: #e5e7eb;
border-radius: 4px;
overflow: hidden;
}
.breakdown-fill {
height: 100%;
background: linear-gradient(90deg, #ef4444, #dc2626);
width: 0%;
transition: width 0.6s ease;
border-radius: 4px;
}
.breakdown-score {
min-width: 40px;
font-weight: 600;
font-size: 0.9rem;
color: var(--gray-700);
}
.insights-preview {
background: #f8fafc;
border-radius: 16px;
padding: 1.5rem;
margin-top: 2rem;
}
.insights-preview h3 {
font-size: 1.1rem;
font-weight: 700;
color: var(--gray-900);
margin-bottom: 1rem;
}
.insights-list {
list-style: none;
padding: 0;
margin: 0 0 2rem 0;
}
.insights-list li {
display: flex;
align-items: flex-start;
gap: 0.75rem;
margin-bottom: 0.75rem;
font-size: 0.9rem;
color: var(--gray-700);
line-height: 1.5;
}
.insights-list i {
color: #f59e0b;
margin-top: 0.1rem;
flex-shrink: 0;
}
.upgrade-cta {
background: linear-gradient(135deg, #6366f1, #8b5cf6);
border-radius: 12px;
padding: 1.5rem;
color: white;
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
align-items: start;
}
.cta-content h4 {
font-size: 1.1rem;
font-weight: 700;
margin-bottom: 0.5rem;
color: white;
}
.cta-content p {
font-size: 0.9rem;
opacity: 0.9;
margin-bottom: 1rem;
color: white;
}
.cta-content .btn {
background: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.3);
color: white;
backdrop-filter: blur(10px);
width: 100%;
}
.cta-content .btn:hover {
background: rgba(255, 255, 255, 0.3);
transform: translateY(-1px);
}
.cta-features {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.feature-item {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.85rem;
opacity: 0.9;
}
.feature-item i {
color: #10b981;
font-size: 0.9rem;
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.02); }
}
@media (max-width: 1024px) {
.input-group {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.score-display {
grid-template-columns: 1fr;
text-align: center;
gap: 1.5rem;
}
.upgrade-cta {
grid-template-columns: 1fr;
text-align: center;
}
.breakdown-item {
flex-direction: column;
align-items: stretch;
gap: 0.5rem;
}
.breakdown-label {
min-width: auto;
}
}
/* ================================
Legal Pages Styling
================================ */
.legal-page {
background: #fafbfc;
min-height: 100vh;
}
.legal-content {
padding: calc(72px + 2rem) 0 2.5rem;
}
.legal-header {
text-align: center;
margin-bottom: 1.75rem;
padding-bottom: 1.25rem;
border-bottom: 2px solid #e5e7eb;
}
.legal-header h1 {
font-size: 2rem;
font-weight: 800;
color: var(--gray-900);
margin-bottom: 0.5rem;
}
.legal-updated {
color: var(--gray-600);
font-size: 0.9rem;
margin: 0;
}
.legal-body {
max-width: 800px;
margin: 0 auto;
background: white;
border-radius: 16px;
padding: 2rem;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
border: 1px solid #e5e7eb;
}
.legal-section {
margin-bottom: 1.75rem;
padding: 1rem !important;
}
.legal-section:last-child {
margin-bottom: 0;
}
.legal-section h2 {
font-size: 1.25rem;
font-weight: 700;
color: var(--gray-900);
margin-bottom: 1rem;
padding-bottom: 0.25rem;
border-bottom: 1px solid #e5e7eb;
}
.legal-section h3 {
font-size: 1.05rem;
font-weight: 600;
color: var(--gray-800);
margin: 1.25rem 0 0.75rem 0;
}
.legal-section h4 {
font-size: 1rem;
font-weight: 600;
color: var(--gray-800);
margin: 1rem 0 0.5rem 0;
}
.legal-section p {
color: var(--gray-700);
line-height: 1.6;
margin-bottom: 0.9rem;
}
.legal-section ul, .legal-section ol {
margin-bottom: 1rem;
padding-left: 1.25rem;
}
.legal-section li {
color: var(--gray-700);
line-height: 1.6;
margin-bottom: 0.5rem;
}
.contact-info {
background: #f8fafc;
border-radius: 12px;
padding: 1.5rem;
border: 1px solid #e5e7eb;
}
.contact-info p {
margin-bottom: 0.75rem;
}
.contact-info p:last-child {
margin-bottom: 0;
}
.contact-info a {
color: var(--primary-color);
text-decoration: none;
}
.contact-info a:hover {
text-decoration: underline;
}
/* Refund Policy Specific Styles */
.guarantee-highlight {
display: flex;
align-items: center;
gap: 1rem;
background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
border: 2px solid #0ea5e9;
border-radius: 12px;
padding: 1.5rem;
margin: 2rem 0;
}
.guarantee-highlight i {
font-size: 2rem;
color: #0ea5e9;
flex-shrink: 0;
}
.guarantee-highlight h3 {
margin: 0 0 0.5rem 0;
color: #0c4a6e;
}
.guarantee-highlight p {
margin: 0;
color: #0c4a6e;
}
.refund-conditions {
list-style: none;
padding: 0;
}
.refund-conditions li {
display: flex;
align-items: flex-start;
gap: 0.75rem;
margin-bottom: 1rem;
padding: 0.75rem;
background: #f0fdf4;
border-radius: 8px;
border-left: 4px solid #10b981;
}
.refund-conditions i {
color: #10b981;
margin-top: 0.1rem;
flex-shrink: 0;
}
.non-refundable {
list-style: none;
padding: 0;
}
.non-refundable li {
display: flex;
align-items: flex-start;
gap: 0.75rem;
margin-bottom: 1rem;
padding: 0.75rem;
background: #fef2f2;
border-radius: 8px;
border-left: 4px solid #ef4444;
}
.non-refundable i {
color: #ef4444;
margin-top: 0.1rem;
flex-shrink: 0;
}
.important-notice {
display: flex;
align-items: flex-start;
gap: 1rem;
background: #fef3c7;
border: 2px solid #f59e0b;
border-radius: 12px;
padding: 1.5rem;
margin: 2rem 0;
}
.important-notice i {
font-size: 1.5rem;
color: #d97706;
flex-shrink: 0;
margin-top: 0.1rem;
}
.important-notice h4 {
margin: 0 0 0.5rem 0;
color: #92400e;
}
.important-notice p {
margin: 0;
color: #92400e;
}
.refund-process {
counter-reset: step-counter;
list-style: none;
padding: 0;
}
.refund-process li {
counter-increment: step-counter;
position: relative;
padding: 1.5rem 1.5rem 1.5rem 4rem;
margin-bottom: 1.5rem;
background: #f8fafc;
border-radius: 12px;
border-left: 4px solid var(--primary-color);
}
.refund-process li::before {
content: counter(step-counter);
position: absolute;
left: 1rem;
top: 1.5rem;
width: 2rem;
height: 2rem;
background: var(--primary-color);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 0.9rem;
}
.refund-process li ul {
margin-top: 0.75rem;
margin-bottom: 0;
}
.processing-note {
display: flex;
align-items: flex-start;
gap: 0.75rem;
background: #eff6ff;
border-radius: 8px;
padding: 1rem;
margin: 1.5rem 0;
}
.processing-note i {
color: #3b82f6;
margin-top: 0.1rem;
flex-shrink: 0;
}
.processing-note p {
margin: 0;
color: #1e40af;
}
.contact-method {
display: flex;
align-items: flex-start;
gap: 1rem;
margin-bottom: 1.5rem;
}
.contact-method:last-child {
margin-bottom: 0;
}
.contact-method i {
color: var(--primary-color);
font-size: 1.2rem;
margin-top: 0.1rem;
flex-shrink: 0;
}
.contact-method small {
display: block;
color: var(--gray-500);
font-size: 0.85rem;
margin-top: 0.25rem;
}
@media (max-width: 768px) {
.legal-content {
padding: calc(80px + 2rem) 0 2rem;
}
.legal-body {
padding: 2rem 1.5rem;
margin: 0 1rem;
}
.legal-header h1 {
font-size: 2rem;
}
.guarantee-highlight,
.important-notice {
flex-direction: column;
text-align: center;
}
.refund-process li {
padding: 1.5rem 1rem 1.5rem 3.5rem;
}
.refund-process li::before {
left: 0.75rem;
width: 1.75rem;
height: 1.75rem;
}
}
/* ================================
Cookie Consent Styling
================================ */
.cookie-banner {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: white;
border-top: 1px solid #e5e7eb;
box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
z-index: 10000;
transform: translateY(100%);
transition: transform 0.3s ease-in-out;
display: none;
}
.cookie-banner.show {
transform: translateY(0);
}
.cookie-content {
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
padding: 1.5rem 2rem;
max-width: 1200px;
margin: 0 auto;
}
.cookie-text h3 {
font-size: 1.1rem;
font-weight: 600;
color: var(--gray-900);
margin: 0 0 0.5rem 0;
}
.cookie-text p {
font-size: 0.9rem;
color: var(--gray-600);
margin: 0;
line-height: 1.5;
}
.cookie-text a {
color: var(--primary-color);
text-decoration: none;
}
.cookie-text a:hover {
text-decoration: underline;
}
.cookie-actions {
display: flex;
gap: 0.75rem;
flex-shrink: 0;
}
.cookie-actions .btn {
padding: 0.75rem 1.5rem;
font-size: 0.9rem;
white-space: nowrap;
}
/* Cookie Settings Modal */
.cookie-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
display: none;
align-items: center;
justify-content: center;
z-index: 10001;
padding: 2rem;
}
.cookie-modal-content {
background: white;
border-radius: 16px;
max-width: 600px;
width: 100%;
max-height: 80vh;
overflow-y: auto;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
.cookie-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 2rem 2rem 1rem 2rem;
border-bottom: 1px solid #e5e7eb;
}
.cookie-modal-header h2 {
font-size: 1.5rem;
font-weight: 700;
color: var(--gray-900);
margin: 0;
}
.close-btn {
background: none;
border: none;
font-size: 1.5rem;
color: var(--gray-500);
cursor: pointer;
padding: 0.5rem;
border-radius: 8px;
transition: all 0.2s ease;
}
.close-btn:hover {
background: #f3f4f6;
color: var(--gray-700);
}
.cookie-modal-body {
padding: 2rem;
}
.cookie-modal-body > p {
color: var(--gray-600);
margin-bottom: 2rem;
line-height: 1.6;
}
.cookie-category {
border: 1px solid #e5e7eb;
border-radius: 12px;
padding: 1.5rem;
margin-bottom: 1.5rem;
}
.cookie-category:last-child {
margin-bottom: 0;
}
.cookie-category-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0.75rem;
}
.cookie-category h3 {
font-size: 1.1rem;
font-weight: 600;
color: var(--gray-900);
margin: 0;
}
.cookie-required {
background: #fef3c7;
color: #92400e;
padding: 0.25rem 0.75rem;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 500;
}
.cookie-category p {
color: var(--gray-600);
font-size: 0.9rem;
line-height: 1.5;
margin: 0;
}
.cookie-toggle {
display: flex;
align-items: center;
gap: 0.5rem;
}
.toggle-label {
color: var(--gray-500);
font-size: 0.9rem;
cursor: not-allowed;
}
.toggle-switch {
position: relative;
width: 44px;
height: 24px;
background: #d1d5db;
border-radius: 12px;
cursor: pointer;
transition: background-color 0.2s ease;
}
.toggle-switch::after {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 20px;
height: 20px;
background: white;
border-radius: 50%;
transition: transform 0.2s ease;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
input[type="checkbox"]:checked + .toggle-switch {
background: var(--primary-color);
}
input[type="checkbox"]:checked + .toggle-switch::after {
transform: translateX(20px);
}
input[type="checkbox"] {
display: none;
}
.cookie-modal-footer {
display: flex;
gap: 1rem;
padding: 1rem 2rem 2rem 2rem;
border-top: 1px solid #e5e7eb;
}
.cookie-modal-footer .btn {
flex: 1;
}
/* Cookie Settings Button */
.cookie-settings-btn {
text-align: center;
margin: 2rem 0;
}
.cookie-settings-btn .btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
/* Cookie Type Details */
.cookie-type {
background: #f8fafc;
border-radius: 12px;
padding: 1.5rem;
margin: 1.5rem 0;
border: 1px solid #e5e7eb;
}
.cookie-type h3 {
color: var(--gray-900);
margin-bottom: 0.75rem;
}
.cookie-details {
margin-top: 1rem;
}
.cookie-details h4 {
font-size: 1rem;
font-weight: 600;
color: var(--gray-800);
margin: 1rem 0 0.5rem 0;
}
.cookie-details ul {
margin-bottom: 1rem;
}
.cookie-details p {
font-size: 0.9rem;
color: var(--gray-600);
margin-bottom: 0.75rem;
}
.third-party-service {
background: #f8fafc;
border-radius: 8px;
padding: 1.25rem;
margin: 1rem 0;
border-left: 4px solid var(--primary-color);
}
.third-party-service h3 {
font-size: 1rem;
font-weight: 600;
color: var(--gray-900);
margin-bottom: 0.75rem;
}
.third-party-service ul {
margin-bottom: 0.75rem;
}
.third-party-service p {
margin: 0;
font-size: 0.9rem;
}
.third-party-service a {
color: var(--primary-color);
text-decoration: none;
}
.third-party-service a:hover {
text-decoration: underline;
}
.browser-warning {
display: flex;
align-items: flex-start;
gap: 1rem;
background: #fef3c7;
border: 2px solid #f59e0b;
border-radius: 12px;
padding: 1.5rem;
margin: 2rem 0;
}
.browser-warning i {
font-size: 1.5rem;
color: #d97706;
flex-shrink: 0;
margin-top: 0.1rem;
}
.browser-warning h4 {
margin: 0 0 0.5rem 0;
color: #92400e;
}
.browser-warning p {
margin: 0;
color: #92400e;
}
/* Cookie Notification */
.cookie-notification {
position: fixed;
top: 2rem;
right: 2rem;
background: white;
border: 1px solid #e5e7eb;
border-radius: 12px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
z-index: 10002;
transform: translateX(100%);
transition: transform 0.3s ease-in-out;
}
.cookie-notification.show {
transform: translateX(0);
}
.cookie-notification-content {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 1rem 1.5rem;
}
.cookie-notification-content i {
color: #10b981;
font-size: 1.1rem;
}
.cookie-notification-content span {
color: var(--gray-700);
font-size: 0.9rem;
font-weight: 500;
}
/* Mobile Responsiveness */
@media (max-width: 768px) {
.cookie-content {
flex-direction: column;
align-items: stretch;
gap: 1.5rem;
padding: 1.5rem;
}
.cookie-actions {
justify-content: center;
flex-wrap: wrap;
}
.cookie-actions .btn {
flex: 1;
min-width: 120px;
}
.cookie-modal {
padding: 1rem;
}
.cookie-modal-content {
max-height: 90vh;
}
.cookie-modal-header,
.cookie-modal-body {
padding: 1.5rem;
}
.cookie-modal-footer {
padding: 1rem 1.5rem 1.5rem 1.5rem;
flex-direction: column;
}
.cookie-category-header {
flex-direction: column;
align-items: flex-start;
gap: 0.75rem;
}
.cookie-notification {
top: 1rem;
right: 1rem;
left: 1rem;
}
}
/* ================================
Contact Page Styling
================================ */
.contact-hero {
background: linear-gradient(135deg, var(--primary-color), #4f46e5);
color: white;
padding: calc(72px + 2rem) 0 2.5rem;
text-align: center;
}
.contact-hero-content h1 {
font-size: 2.25rem;
font-weight: 800;
margin-bottom: 1.5rem;
}
.contact-hero-content p {
font-size: 1.05rem;
opacity: 0.9;
max-width: 600px;
margin: 0 auto;
}
.contact-methods {
padding: 2.5rem 0;
background: #fafbfc;
}
.contact-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
max-width: 1000px;
margin: 0 auto;
}
.contact-card {
background: white;
border-radius: 16px;
padding: 2.5rem 2rem;
text-align: center;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
border: 1px solid #e5e7eb;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.contact-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}
.contact-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, var(--primary-color), #4f46e5);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
}
.contact-icon i {
font-size: 2rem;
color: white;
}
.contact-card h3 {
font-size: 1.5rem;
font-weight: 700;
color: var(--gray-900);
margin-bottom: 1rem;
}
.contact-card p {
color: var(--gray-600);
margin-bottom: 2rem;
line-height: 1.6;
}
.contact-card .btn {
margin-bottom: 1rem;
}
.contact-card small {
color: var(--gray-500);
font-size: 0.9rem;
}
/* Contact Form Section */
.contact-form-section {
padding: 2.5rem 0;
background: white;
}
.contact-form-container {
max-width: 800px;
margin: 0 auto;
background: #fafbfc;
border-radius: 20px;
padding: 3rem;
border: 1px solid #e5e7eb;
}
.contact-form-header {
text-align: center;
margin-bottom: 3rem;
}
.contact-form-header h2 {
font-size: 1.5rem;
font-weight: 700;
color: var(--gray-900);
margin-bottom: 1rem;
}
.contact-form-header p {
color: var(--gray-600);
font-size: 1.1rem;
}
.contact-form {
display: grid;
gap: 1.5rem;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
}
.form-group {
display: flex;
flex-direction: column;
}
.form-group label {
font-weight: 600;
color: var(--gray-700);
margin-bottom: 0.5rem;
font-size: 0.95rem;
}
.form-group input,
.form-group select,
.form-group textarea {
padding: 1rem;
border: 2px solid #e5e7eb;
border-radius: 12px;
font-size: 1rem;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
background: white;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: var(--focus-ring-shadow);
}
.form-group textarea {
resize: vertical;
min-height: 120px;
}
.checkbox-label {
display: flex;
align-items: flex-start;
gap: 0.75rem;
cursor: pointer;
font-size: 0.95rem;
color: var(--gray-600);
line-height: 1.5;
}
.checkbox-label input[type="checkbox"] {
display: none;
}
.checkmark {
width: 20px;
height: 20px;
border: 2px solid #d1d5db;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: all 0.2s ease;
margin-top: 2px;
}
.checkbox-label input[type="checkbox"]:checked + .checkmark {
background: var(--primary-color);
border-color: var(--primary-color);
}
.checkbox-label input[type="checkbox"]:checked + .checkmark::after {
content: '✓';
color: white;
font-size: 0.8rem;
font-weight: bold;
}
.form-actions {
margin-top: 1rem;
}
.btn-large {
padding: 1.25rem 2.5rem;
font-size: 1.1rem;
width: 100%;
}
.btn.loading {
opacity: 0.7;
cursor: not-allowed;
}
/* Form Messages */
.form-message {
text-align: center;
padding: 2.5rem;
border-radius: 16px;
margin-top: 2rem;
}
.form-message.success {
background: #f0fdf4;
border: 2px solid #10b981;
color: #065f46;
}
.form-message.error {
background: #fef2f2;
border: 2px solid #ef4444;
color: #991b1b;
}
.form-message i {
font-size: 3rem;
margin-bottom: 1rem;
display: block;
}
.form-message h3 {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 0.75rem;
}
.form-message p {
font-size: 1.1rem;
margin: 0;
}
.form-message a {
color: inherit;
text-decoration: underline;
}
/* FAQ Section */
.contact-faq {
padding: 4rem 0;
background: #fafbfc;
}
.faq-header {
text-align: center;
margin-bottom: 3rem;
}
.faq-header h2 {
font-size: 1.75rem;
font-weight: 800;
color: var(--gray-900);
margin-bottom: 1rem;
}
.faq-header p {
font-size: 1.05rem;
color: var(--gray-600);
}
.faq-grid {
max-width: 800px;
margin: 0 auto;
display: grid;
gap: 1rem;
}
.faq-item {
background: white;
border-radius: 12px;
border: 1px solid #e5e7eb;
overflow: hidden;
}
.faq-question {
width: 100%;
padding: 1.5rem;
background: none;
border: none;
text-align: left;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 1.1rem;
font-weight: 600;
color: var(--gray-900);
transition: background-color 0.2s ease;
}
.faq-question:hover {
background: #f8fafc;
}
.faq-question i {
color: var(--primary-color);
transition: transform 0.3s ease;
flex-shrink: 0;
margin-left: 1rem;
}
.faq-answer {
padding: 0 1.5rem 1.5rem;
color: var(--gray-700);
line-height: 1.7;
}
.faq-answer a {
color: var(--primary-color);
text-decoration: none;
}
.faq-answer a:hover {
text-decoration: underline;
}
/* FAQ – unified styling and layout overrides for index */
.faq .container { max-width: 960px; }
.faq-container {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.faq-trust-row { display:flex; gap:1rem; justify-content:center; margin: 0 0 1.25rem; flex-wrap: wrap; }
.faq-trust-row .trust-item { display:flex; align-items:center; gap:0.5rem; padding:0.5rem 0.75rem; background:#f8fafc; border:1px solid #e5e7eb; border-radius:12px; color:var(--gray-700); font-weight:600; }
.faq-trust-row .trust-item i { color: var(--primary-color); }
.faq .faq-item {
background: #ffffff;
border: 1px solid var(--gray-200);
border-radius: 14px;
box-shadow: 0 6px 18px rgba(0,0,0,0.06);
overflow: hidden;
}
.faq .faq-question {
padding: 1.25rem 1.25rem;
font-size: 1.05rem;
font-weight: 600;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
background: transparent;
}
.faq .faq-question span { flex: 1; text-align: left; }
.faq .faq-question i { color: var(--gray-400); }
.faq .faq-item.active .faq-question i { color: var(--primary-color); transform: rotate(180deg); }
.faq .faq-answer {
padding: 0 1.25rem;
max-height: 0;
overflow: hidden;
transition: max-height 300ms ease;
}
.faq .faq-item.active .faq-answer {
max-height: 600px;
padding-left: 2.5rem;
padding-right: 1rem;
}
@media (max-width: 768px) {
.faq .faq-question { font-size: 1rem; padding: 1rem; }
.faq .faq-answer { padding: 0 1rem; }
}
.faq-mini-cta { margin-top: 0.5rem; }
.faq-cta-link { color: var(--primary-color); text-decoration: none; font-weight: 700; }
.faq-cta-link:hover { text-decoration: underline; }
/* Contact Info Section */
.contact-info {
padding: 2rem 1.5rem;
background: white;
}
.contact-info-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
max-width: 1000px;
margin: 0 auto;
}
.contact-info-card {
text-align: center;
padding: 2rem;
}
.contact-info-card h3 {
font-size: 1.5rem;
font-weight: 700;
color: var(--gray-900);
margin-bottom: 1.5rem;
}
.info-item {
display: flex;
align-items: flex-start;
gap: 1rem;
margin-bottom: 1.5rem;
text-align: left;
}
.info-item:last-child {
margin-bottom: 0;
}
.info-item i {
color: var(--primary-color);
font-size: 1.2rem;
margin-top: 0.2rem;
flex-shrink: 0;
}
.info-item strong {
display: block;
color: var(--gray-900);
font-weight: 600;
margin-bottom: 0.25rem;
}
.info-item span {
color: var(--gray-600);
line-height: 1.5;
}
.social-links {
display: flex;
justify-content: center;
gap: 1rem;
flex-wrap: wrap;
}
.social-link {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.25rem;
background: #f8fafc;
border: 1px solid #e5e7eb;
border-radius: 8px;
color: var(--gray-700);
text-decoration: none;
transition: all 0.2s ease;
}
.social-link:hover {
background: var(--primary-color);
color: white;
border-color: var(--primary-color);
}
.social-link i {
font-size: 1.1rem;
}
/* Chat Fallback Modal */
.chat-fallback-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 10001;
opacity: 0;
transition: opacity 0.3s ease;
padding: 2rem;
}
.chat-fallback-modal.show {
opacity: 1;
}
.chat-fallback-content {
background: white;
border-radius: 16px;
max-width: 500px;
width: 100%;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
.chat-fallback-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 2rem 2rem 1rem;
border-bottom: 1px solid #e5e7eb;
}
.chat-fallback-header h3 {
font-size: 1.5rem;
font-weight: 700;
color: var(--gray-900);
margin: 0;
}
.close-modal {
background: none;
border: none;
font-size: 1.5rem;
color: var(--gray-500);
cursor: pointer;
padding: 0.5rem;
border-radius: 8px;
transition: all 0.2s ease;
}
.close-modal:hover {
background: #f3f4f6;
color: var(--gray-700);
}
.chat-fallback-body {
padding: 2rem;
}
.chat-fallback-body p {
color: var(--gray-600);
margin-bottom: 1.5rem;
line-height: 1.6;
}
.fallback-options {
display: grid;
gap: 1rem;
margin-bottom: 1.5rem;
}
.fallback-option {
display: flex;
align-items: center;
gap: 1rem;
padding: 1.25rem;
background: #f8fafc;
border: 1px solid #e5e7eb;
border-radius: 12px;
color: var(--gray-700);
text-decoration: none;
transition: all 0.2s ease;
}
.fallback-option:hover {
background: var(--primary-color);
color: white;
border-color: var(--primary-color);
}
.fallback-option i {
font-size: 1.5rem;
color: var(--primary-color);
flex-shrink: 0;
}
.fallback-option:hover i {
color: white;
}
.fallback-option strong {
display: block;
font-weight: 600;
margin-bottom: 0.25rem;
}
.fallback-option span {
font-size: 0.9rem;
opacity: 0.8;
}
/* Mobile Responsiveness */
@media (max-width: 768px) {
.contact-hero {
padding: calc(80px + 2rem) 0 2rem;
}
.contact-hero-content h1 {
font-size: 2.5rem;
}
.contact-hero-content p {
font-size: 1.1rem;
}
.contact-methods,
.contact-form-section,
.contact-faq,
.contact-info {
padding: 3rem 0;
}
.contact-grid,
.contact-info-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.contact-form-container {
padding: 2rem 1.5rem;
margin: 0 1rem;
}
.form-row {
grid-template-columns: 1fr;
gap: 1rem;
}
.faq-header h2 {
font-size: 2rem;
}
.faq-question {
padding: 1.25rem;
font-size: 1rem;
}
.faq-answer {
padding: 0 1.25rem 1.25rem;
}
.social-links {
flex-direction: column;
align-items: center;
}
.social-link {
width: 100%;
justify-content: center;
max-width: 200px;
}
.chat-fallback-modal {
padding: 1rem;
}
.chat-fallback-header,
.chat-fallback-body {
padding: 1.5rem;
}
}
/* ================================
Help Center Styling
================================ */
.help-hero {
/* Align Help Center hero theme with Blog header gradient */
background: linear-gradient(135deg, #ffffff 0%, #83a5ff 50%, #0f3460 100%);
color: white;
padding: calc(72px + 2rem) 0 2.5rem;
text-align: center;
}
.help-hero-content h1 {
font-size: 2.25rem;
font-weight: 800;
margin-bottom: 1rem;
}
.help-hero-content > p {
font-size: 1.05rem;
opacity: 0.9;
margin-bottom: 3rem;
}
/* Search Bar */
.help-search {
max-width: 600px;
margin: 0 auto 2rem;
position: relative;
}
.search-input-container {
position: relative;
display: flex;
align-items: center;
}
.search-icon {
position: absolute;
left: 1.25rem;
color: var(--gray-400);
font-size: 1.1rem;
z-index: 2;
}
#helpSearch {
width: 100%;
padding: 1.25rem 1.25rem 1.25rem 3.5rem;
font-size: 1.1rem;
border: none;
border-radius: 16px;
background: white;
color: var(--gray-900);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
transition: box-shadow 0.2s ease;
}
#helpSearch:focus {
outline: none;
box-shadow: var(--focus-ring-shadow);
}
#helpSearch::placeholder {
color: var(--gray-500);
}
.clear-search {
position: absolute;
right: 1rem;
background: none;
border: none;
color: var(--gray-400);
cursor: pointer;
padding: 0.5rem;
border-radius: 50%;
transition: all 0.2s ease;
z-index: 2;
}
.clear-search:hover {
background: #f3f4f6;
color: var(--gray-600);
}
/* Search Suggestions */
.search-suggestions {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: white;
border-radius: 12px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
z-index: 1000;
margin-top: 0.5rem;
display: none;
max-height: 300px;
overflow-y: auto;
}
.search-suggestion {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 1rem 1.25rem;
cursor: pointer;
transition: background-color 0.2s ease;
border-bottom: 1px solid #f3f4f6;
}
.search-suggestion:last-child {
border-bottom: none;
}
.search-suggestion:hover {
background: #f8fafc;
}
.search-suggestion i {
color: var(--gray-400);
font-size: 0.9rem;
flex-shrink: 0;
}
.search-suggestion.popular i {
color: #f59e0b;
}
.search-suggestion span {
color: var(--gray-700);
font-size: 0.95rem;
}
/* Quick Actions */
.quick-actions {
display: flex;
justify-content: center;
gap: 1rem;
flex-wrap: wrap;
}
.quick-action {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
background: rgba(255, 255, 255, 0.15);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 12px;
color: white;
text-decoration: none;
font-weight: 500;
transition: all 0.2s ease;
cursor: pointer;
}
.quick-action:hover {
background: rgba(255, 255, 255, 0.25);
border-color: rgba(255, 255, 255, 0.5);
transform: translateY(-2px);
}
.quick-action i {
font-size: 1rem;
}
/* Popular Articles */
.popular-articles {
padding: 2.5rem 0;
background: #fafbfc;
}
.popular-articles h2 {
text-align: center;
font-size: 2.5rem;
font-weight: 800;
color: var(--gray-900);
margin-bottom: 3rem;
}
.articles-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 2rem;
max-width: 1200px;
margin: 0 auto;
}
.help-article {
background: white;
border-radius: 16px;
padding: 2rem;
border: 1px solid #e5e7eb;
transition: all 0.2s ease;
cursor: pointer;
display: flex;
flex-direction: column;
}
.help-article:hover {
transform: translateY(-4px);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
border-color: var(--primary-color);
}
.article-icon {
width: 60px;
height: 60px;
/* Blog-like badge gradient */
background: linear-gradient(135deg, #83a5ff, #0f3460);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.5rem;
flex-shrink: 0;
}
.article-icon i {
font-size: 1.5rem;
color: white;
}
.help-article h3 {
font-size: 1.25rem;
font-weight: 700;
color: var(--gray-900);
margin-bottom: 1rem;
line-height: 1.4;
}
.help-article p {
color: var(--gray-600);
line-height: 1.6;
margin-bottom: 1.5rem;
flex-grow: 1;
}
.article-meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-top: auto;
}
.article-category {
background: #f3f4f6;
color: var(--gray-700);
padding: 0.25rem 0.75rem;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 500;
}
.article-time {
color: var(--gray-500);
font-size: 0.9rem;
}
/* Help Categories */
.help-categories {
padding: 2.5rem 0;
background: white;
}
.help-categories h2 {
text-align: center;
font-size: 2.5rem;
font-weight: 800;
color: var(--gray-900);
margin-bottom: 3rem;
}
.categories-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
max-width: 1200px;
margin: 0 auto;
}
.category-card {
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 16px;
padding: 2.5rem 2rem;
text-align: center;
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
position: relative;
box-shadow: 0 10px 15px -3px rgba(0,0,0,0.08);
}
.category-card:hover {
border-color: var(--primary-color);
transform: translateY(-4px);
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.18);
}
.category-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, #83a5ff, #0f3460);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
}
.category-icon i {
font-size: 2rem;
color: white;
}
.category-card h3 {
font-size: 1.5rem;
font-weight: 700;
color: var(--gray-900);
margin-bottom: 1rem;
}
.category-card p {
color: var(--gray-600);
line-height: 1.6;
margin-bottom: 1.5rem;
}
.article-count {
display: inline-block;
background: linear-gradient(135deg, #83a5ff, #0f3460);
color: white;
padding: 0.5rem 1rem;
border-radius: 20px;
font-size: 0.9rem;
font-weight: 600;
}
/* Search Results */
.search-results {
padding: 2.5rem 0;
background: #fafbfc;
}
.search-results-header {
text-align: center;
margin-bottom: 3rem;
}
.search-results-header h2 {
font-size: 2rem;
font-weight: 700;
color: var(--gray-900);
margin-bottom: 0.5rem;
}
.search-results-header p {
color: var(--gray-600);
font-size: 1.1rem;
}
.search-results-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 2rem;
max-width: 1200px;
margin: 0 auto;
}
.no-results {
text-align: center;
padding: 4rem 2rem;
max-width: 500px;
margin: 0 auto;
}
.no-results i {
font-size: 4rem;
color: var(--gray-300);
margin-bottom: 2rem;
}
.no-results h3 {
font-size: 1.5rem;
font-weight: 700;
color: var(--gray-900);
margin-bottom: 1rem;
}
.no-results p {
color: var(--gray-600);
margin-bottom: 2rem;
line-height: 1.6;
}
/* Support CTA */
.support-cta {
padding: 2.5rem 0;
background: linear-gradient(135deg, #f8fafc, #e5e7eb);
}
.cta-content {
display: flex;
align-items: center;
justify-content: space-between;
gap: 3rem;
max-width: 1000px;
margin: 0 auto;
}
.cta-text h2 {
font-size: 2rem;
font-weight: 700;
color: var(--gray-900);
margin-bottom: 1rem;
}
.cta-text p {
color: var(--gray-600);
font-size: 1.1rem;
line-height: 1.6;
}
.cta-actions {
display: flex;
gap: 1rem;
flex-shrink: 0;
}
.cta-actions .btn {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 1rem 2rem;
white-space: nowrap;
}
/* Ensure Help Center CTA buttons are readable on light background */
.support-cta .btn-primary {
background: var(--primary-color) !important;
color: #ffffff !important;
border-color: var(--primary-color) !important;
}
.support-cta .btn-primary:hover {
background: var(--primary-hover) !important;
color: #ffffff !important;
}
.support-cta .btn-secondary {
background: #ffffff !important;
color: var(--primary-color) !important;
border: 2px solid var(--primary-color) !important;
}
.support-cta .btn-secondary:hover {
background: var(--primary-color) !important;
color: #ffffff !important;
}
/* High-contrast buttons for Features page CTA on light background */
.features-cta .btn-primary {
background: linear-gradient(135deg, var(--primary-color), #8b5cf6) !important;
color: #ffffff !important;
border-color: var(--primary-color) !important;
}
.features-cta .btn-outline {
background: #ffffff !important;
color: var(--primary-color) !important;
border: 2px solid var(--primary-color) !important;
}
.features-cta .btn-outline:hover {
background: var(--primary-color) !important;
color: #ffffff !important;
}
/* Article Modal */
.article-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 10001;
opacity: 0;
transition: opacity 0.3s ease;
padding: 2rem;
}
.article-modal.show {
opacity: 1;
}
.article-modal-content {
background: white;
border-radius: 16px;
max-width: 800px;
width: 100%;
max-height: 90vh;
overflow-y: auto;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
.article-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 2rem 2rem 1rem;
border-bottom: 1px solid #e5e7eb;
}
.article-modal-header h2 {
font-size: 1.75rem;
font-weight: 700;
color: var(--gray-900);
margin: 0;
line-height: 1.3;
}
.article-modal-body {
padding: 2rem;
}
.article-modal-body .article-meta {
margin-bottom: 2rem;
padding-bottom: 1rem;
border-bottom: 1px solid #f3f4f6;
}
.article-content {
color: var(--gray-700);
line-height: 1.7;
}
.article-content h3 {
color: var(--gray-900);
font-weight: 600;
margin: 2rem 0 1rem;
}
.article-content ul {
margin: 1rem 0;
padding-left: 1.5rem;
}
.article-content li {
margin-bottom: 0.5rem;
}
.article-modal-footer {
display: flex;
gap: 1rem;
padding: 1rem 2rem 2rem;
border-top: 1px solid #e5e7eb;
}
.article-modal-footer .btn {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
/* Mobile Responsiveness */
@media (max-width: 768px) {
.help-hero {
padding: calc(80px + 2rem) 0 2rem;
}
.help-hero-content h1 {
font-size: 2.5rem;
}
.help-hero-content > p {
font-size: 1.1rem;
}
.help-search {
margin: 0 1rem 2rem;
}
#helpSearch {
padding: 1rem 1rem 1rem 3rem;
font-size: 1rem;
}
.quick-actions {
flex-direction: column;
align-items: center;
gap: 0.75rem;
}
.quick-action {
width: 100%;
max-width: 250px;
justify-content: center;
}
.popular-articles,
.help-categories,
.search-results {
padding: 3rem 0;
}
.popular-articles h2,
.help-categories h2 {
font-size: 2rem;
}
.articles-grid,
.categories-grid,
.search-results-list {
grid-template-columns: 1fr;
gap: 1.5rem;
margin: 0 1rem;
}
.help-article,
.category-card {
padding: 1.5rem;
}
.article-meta {
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
}
.cta-content {
flex-direction: column;
text-align: center;
gap: 2rem;
}
.cta-actions {
flex-direction: column;
width: 100%;
max-width: 300px;
}
.article-modal {
padding: 1rem;
}
.article-modal-header,
.article-modal-body {
padding: 1.5rem;
}
.article-modal-footer {
padding: 1rem 1.5rem 1.5rem;
flex-direction: column;
}
.search-suggestions {
margin: 0 1rem;
left: -1rem;
right: -1rem;
}
}
/* Upgrade Prompt for Used Free Scan */
.upgrade-prompt {
text-align: center;
padding: 3rem 2rem;
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
border-radius: 16px;
border: 2px solid #e2e8f0;
}
.upgrade-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, #6366f1, #8b5cf6);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
color: white;
font-size: 2rem;
box-shadow: 0 8px 25px rgba(99, 102, 241, 0.3);
}
.upgrade-prompt h3 {
font-size: 1.5rem;
font-weight: 700;
color: var(--gray-900);
margin-bottom: 0.75rem;
}
.upgrade-prompt p {
color: var(--gray-600);
margin-bottom: 2rem;
font-size: 1rem;
line-height: 1.6;
}
.upgrade-features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
margin-bottom: 2rem;
text-align: left;
}
.upgrade-features .feature-item {
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 0.9rem;
color: var(--gray-700);
font-weight: 500;
}
.upgrade-features .feature-item i {
color: #10b981;
font-size: 1rem;
flex-shrink: 0;
}
.upgrade-note {
font-size: 0.85rem;
color: var(--gray-500);
margin-top: 1rem !important;
margin-bottom: 0 !important;
}