/* ========== RESET & BASE ========== */
:root {
–primary: #FF4F42; /* Enhancv Red-ish/Orange */
–primary-hover: #E04337;
–secondary: #1A1A2E;
–text: #33334F;
–text-light: #6E6E85;
–bg-light: #F9F9FB;
–white: #FFFFFF;
–border: #E5E5EA;
–success: #22C55E;
–font-main: ‘Inter’, -apple-system, BlinkMacSystemFont, ‘Segoe UI’, Roboto, sans-serif;
–font-serif: ‘Playfair Display’, Georgia, serif;
}

.ai-page {
font-family: var(–font-main);
color: var(–text);
line-height: 1.6;
overflow-x: hidden;
background: #fff;
}
.ai-page *, .ai-page *::before, .ai-page *::after { box-sizing: border-box; }
.ai-page img { max-width: 100%; height: auto; display: block; }
.ai-page a { text-decoration: none; transition: all 0.2s ease; }
.ai-page h1, .ai-page h2, .ai-page h3, .ai-page h4 {
line-height: 1.2;
font-weight: 800;
color: var(–secondary);
margin-bottom: 1rem;
}

/* ========== UTILITIES ========== */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
}
.text-center { text-align: center; }
.mb-2 { margin-bottom: 16px; }
.mb-4 { margin-bottom: 32px; }
.mb-6 { margin-bottom: 48px; }
.badge {
display: inline-flex;
align-items: center;
gap: 6px;
background: #FFF0EF;
color: var(–primary);
padding: 6px 14px;
border-radius: 100px;
font-size: 14px;
font-weight: 600;
margin-bottom: 16px;
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 14px 28px;
border-radius: 8px;
font-weight: 600;
font-size: 16px;
cursor: pointer;
transition: all 0.2s;
}
.btn-primary {
background: var(–primary);
color: white;
box-shadow: 0 4px 14px rgba(255, 79, 66, 0.3);
}
.btn-primary:hover {
background: var(–primary-hover);
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(255, 79, 66, 0.4);
}
.btn-outline {
background: transparent;
border: 2px solid var(–border);
color: var(–secondary);
}
.btn-outline:hover {
border-color: var(–secondary);
background: var(–bg-light);
}

/* ========== HERO SECTION ========== */
.hero {
padding: 60px 0 80px;
background: radial-gradient(circle at 50% 0%, #FFF0EF 0%, #fff 60%);
position: relative;
}
.hero-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
.hero-content h1 {
font-size: clamp(40px, 5vw, 64px);
letter-spacing: -1px;
}
.hero-content p {
font-size: 18px;
color: var(–text-light);
margin-bottom: 32px;
max-width: 500px;
}
.hero-visual {
position: relative;
}
.hero-visual-card {
background: white;
border-radius: 16px;
box-shadow: 0 20px 60px rgba(0,0,0,0.1);
padding: 20px;
border: 1px solid var(–border);
position: relative;
z-index: 1;
transform: rotate(-2deg);
transition: transform 0.5s ease;
}
.hero-visual-card:hover {
transform: rotate(0deg) scale(1.02);
}
.hero-visual-card::before {
content: ”;
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 100%);
z-index: 2;
pointer-events: none;
}
.ui-mockup-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
padding-bottom: 16px;
border-bottom: 1px solid var(–border);
}
.ui-avatar {
width: 48px;
height: 48px;
background: #E0E7FF;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
}
.ui-info h4 { margin: 0; font-size: 16px; }
.ui-info span { font-size: 13px; color: var(–text-light); }
.ui-body {
display: flex;
flex-direction: column;
gap: 12px;
}
.ui-line { height: 8px; background: #F3F4F6; border-radius: 4px; }
.ui-line.w-full { width: 100%; }
.ui-line.w-3-4 { width: 75%; }
.ui-line.w-1-2 { width: 50%; }

.floating-badge {
position: absolute;
background: white;
padding: 12px 20px;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0,0,0,0.12);
display: flex;
align-items: center;
gap: 10px;
z-index: 3;
font-weight: 600;
font-size: 14px;
animation: float 4s ease-in-out infinite;
}
.fb-1 { top: 20%; right: -20px; animation-delay: 0s; }
.fb-2 { bottom: 20%; left: -20px; animation-delay: 2s; }
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}

/* ========== FEATURES SECTION ========== */
.features-section {
padding: 100px 0;
}
.feature-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
margin-bottom: 100px;
}
.feature-row.reverse {
direction: rtl;
}
.feature-row.reverse .feature-content {
direction: ltr;
}
.feature-content h2 {
font-size: 36px;
margin-bottom: 20px;
}
.feature-content p {
font-size: 18px;
color: var(–text-light);
margin-bottom: 30px;
}
.feature-list {
list-style: none;
padding: 0;
margin: 0;
}
.feature-list li {
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 16px;
font-size: 16px;
color: var(–text);
}
.check-icon {
width: 20px;
height: 20px;
background: #DCFCE7;
color: #16A34A;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 12px;
margin-top: 3px;
}

/* Visuals for Features */
.feature-visual {
background: var(–bg-light);
border-radius: 24px;
padding: 40px;
position: relative;
overflow: hidden;
}
.ai-suggestion-box {
background: white;
border-radius: 12px;
padding: 20px;
box-shadow: 0 10px 30px rgba(0,0,0,0.08);
border: 1px solid var(–border);
margin-bottom: 16px;
position: relative;
}
.ai-suggestion-box::before {
content: ‘AI Suggestion’;
position: absolute;
top: -10px;
right: 20px;
background: #EEF2FF;
color: #4F46E5;
font-size: 10px;
font-weight: 700;
padding: 4px 10px;
border-radius: 100px;
text-transform: uppercase;
}
.suggestion-text {
font-size: 14px;
color: var(–text);
line-height: 1.6;
}
.suggestion-text strong { color: #4F46E5; background: #EEF2FF; padding: 0 2px; border-radius: 2px; }

/* ========== TEMPLATES GRID ========== */
.templates-section {
background: var(–secondary);
padding: 100px 0;
color: white;
text-align: center;
}
.templates-section h2 { color: white; margin-bottom: 16px; font-size: 40px; }
.templates-section p { color: rgba(255,255,255,0.7); max-width: 600px; margin: 0 auto 60px; font-size: 18px; }

.templates-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 30px;
margin-bottom: 60px;
}
.template-item {
background: white;
border-radius: 8px;
overflow: hidden;
transition: transform 0.3s;
cursor: pointer;
position: relative;
aspect-ratio: 1/1.414;
}
.template-item:hover {
transform: translateY(-8px);
}
.template-preview {
width: 100%;
height: 100%;
background: #fff;
padding: 10px;
display: flex;
flex-direction: column;
gap: 6px;
}
.tp-header { height: 15%; background: #F3F4F6; border-radius: 4px; }
.tp-body { display: flex; gap: 6px; height: 80%; }
.tp-col-1 { width: 35%; background: #F9FAFB; border-radius: 4px; }
.tp-col-2 { width: 65%; display: flex; flex-direction: column; gap: 6px; }
.tp-line { height: 6px; background: #E5E7EB; border-radius: 3px; }

/* ========== REVIEWS ========== */
.reviews-section {
padding: 100px 0;
background: #F9F9FB;
}
.reviews-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
.review-card {
background: white;
padding: 30px;
border-radius: 16px;
box-shadow: 0 4px 6px rgba(0,0,0,0.02);
}
.stars { color: #FBBF24; margin-bottom: 16px; font-size: 18px; }
.review-text { font-size: 16px; margin-bottom: 20px; font-style: italic; }
.reviewer { font-weight: 700; font-size: 14px; }

/* ========== FAQ ========== */
.faq-section {
padding: 100px 0;
max-width: 800px;
margin: 0 auto;
}
.faq-item {
border-bottom: 1px solid var(–border);
padding: 24px 0;
}
.faq-q {
font-size: 20px;
font-weight: 700;
margin-bottom: 12px;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
}
.faq-a {
font-size: 16px;
color: var(–text-light);
display: block; /* Simplified for static display */
}

/* ========== CTA ========== */
.cta-section {
padding: 100px 0;
background: var(–secondary);
color: white;
text-align: center;
border-radius: 24px;
margin: 0 24px 60px;
}
.cta-content h2 { color: white; font-size: 48px; margin-bottom: 24px; }
.cta-content p { font-size: 20px; color: rgba(255,255,255,0.8); margin-bottom: 40px; }

@media (max-width: 768px) {
.hero-grid, .feature-row, .reviews-grid { grid-template-columns: 1fr; gap: 40px; }
.feature-row.reverse { direction: ltr; }
.hero-content h1 { font-size: 36px; }
.templates-grid { grid-template-columns: repeat(2, 1fr); }
}

✨ AI-Powered Resume Builder

Build a job-winning resume in minutes

StylingCV’s AI resume assistant is the easiest way to create a tailored resume. Optimize keywords, improve writing, and highlight your strengths automatically.

AI resume builder guide

Build Your Resume with AI
View Features

★★★★★

4.8/5 from 37,369 reviews

👨‍💼

Alex Morgan

Senior Product Designer

Professional Summary
✨ AI Optimized

✓
ATS Friendly

⚡
AI Writing

Tailor your resume to the job description

Our AI job tailoring tool scans the job description and updates your resume to match what recruiters are looking for. Increase your interview chances by 3x.

✓ Match keywords automatically
✓ Highlight relevant skills
✓ Generate custom summaries

Looking for a Senior Project Manager with experience in Agile methodologies and team leadership…

⬇

Proven Senior Project Manager with 7+ years leading cross-functional teams using Agile methodologies…

Rewrite bullet points instantly

Struggling to describe your experience? The in-line AI assistant can rewrite your bullet points for impact, clarity, and professionalism.

✓ Turn weak verbs into power words
✓ Fix grammar and tone
✓ Add quantifiable metrics

Managed a team of people

Spearheaded a cross-functional team of 15+ members, improving productivity by 25% within Q1.

Professional Resume Templates

Choose from 30+ ATS-friendly templates designed by HR experts. Customizable, clean, and optimized for readability.

AI Builder is 10x faster than manual work

Only 2% of resumes win. Yours will be one of them.

Build a resume that gets you the job. In 2 minutes with our AI-powered resume builder.

39% higher chance of getting hired

4.5/5 from 37,369 reviews

92% customer satisfaction

2 minutes to create

✓ AI Powered ✓ Field Tested ✓ HR Approved

81 Templates

Tested Resume Templates

Every template is tested with real ATS systems and reviewed by hiring managers from top companies

Build a job-winning resume in minutes

Alex Morgan

Tailor your resume to the job description

Rewrite bullet points instantly

Professional Resume Templates

Only 2% of resumes win. Yours will be one of them.

Tested Resume Templates

accent

apex

arc

architect

aura

axiom

azure

blush

bold

capsule

cipher

classic

clean

cobalt

compact

confidence

corsa

creative

crest

dove

editorial

elegance

elegant

essential

ethereal

executive-neat

executive

feminine

folio

framed

gilt

graphite

grid

harbor

highlight

horizon

hush

impact

influx

ink

knight

lagoon

leafish

ledger

linen

meridian

metro

minimal

minimalist-elite

modern-corporate

modern-refined

modern

modernist

mono

newcast

nexus

noir

novus

onyx

pillar

pinnacle

prism

pure

rayhan

ridge

sage

sidebar

simple

slate

split

straight

stripe

studio