/* ========== 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 5,000+ 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,389 reviews

92% customer satisfaction

2 minutes to create

✓ AI Powered ✓ Field Tested ✓ HR Approved

78+ Templates

Tested Resume Templates

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

AI Resume Formatting: Best Practices for 2026

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

Alfred

Andero

Apple

Arabic

Architect

Arrow

Aura

Awesome

Axiom

Baseline

Bold

Catics

Classic

Clean

Compact

Concept

Confidence

Corssa

Creative

Diamond

Editorial

Elegance

Elegant

Essential

Ethereal

Executive

Executive Neat

Feminine

Framed

Functional

Genial

Grid

Highlight

Horizon

Influx

Katrina

Leafish

Mark

Metrix

Metro

Minimal

Minimalist

Minimalist Elite

Modern

Modern Corporate

Modern Refined

Modernist

Newcast

Nexus

Noon

Onyx

Pinnacle

Polygon

Pre Classic

Prism

Pure

Rayhan

Rebbo

Sidebar

Simple

Simplified

Sireva

Slate

Smart

Split

Standard

Static

Straight

Studio

Stylish

Traditional