/* =================================== */
/* ===== TABLE OF CONTENTS ========= */
/* =================================== */
/*
1. CSS RESET & BASE VARIABLES
2. TYPOGRAPHY & FONT SIZING
3. BASE HTML ELEMENTS
4. UTILITY CLASSES (Containers, Video Wrappers)
5. BUTTON SYSTEM
6. HEADER & NAVIGATION
7. HERO SECTION
8. SECTION STYLES (General)
9. TRUST SECTION
10. PACKAGES SECTION
11. WHY CHOOSE US / BENEFITS
12. FAQ SECTION
13. TESTIMONIALS / REVIEWS
14. PRE-FOOTER CTA
15. FOOTER
16. CONTACT PAGE
17. AI TOOL PAGES
18. TOOLS PAGE
19. BLOG & ARTICLES
20. NEWSLETTER SIGNUP
21. ANIMATIONS & KEYFRAMES
22. MOBILE RESPONSIVE (Progressive breakpoints)
23. PERFORMANCE & ACCESSIBILITY
24. PRINT STYLES
*/
/* =================================== */
/* 1. CSS RESET & BASE VARIABLES */
/* =================================== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
/* Site Layout - REFINED */
--site-max-width: 68rem;
/* Desktop Typography - REFINED */
--font-size-xs: 0.75rem;
--font-size-sm: 0.875rem;
--font-size-base: 0.9375rem;
--font-size-lg: 1.0625rem;
--font-size-xl: 1.1875rem;
--font-size-2xl: 1.375rem;
--font-size-3xl: 1.75rem;
--font-size-4xl: 2rem;
--font-size-5xl: 2.5rem;
--font-size-6xl: 3rem;
--font-size-7xl: 3.5rem;
--font-size-600: 2rem;
--font-size-700: 2.25rem;
/* Mobile Typography Overrides */
--font-size-mobile-xs: 0.65rem;
--font-size-mobile-sm: 0.8rem;
--font-size-mobile-base: 0.875rem;
--font-size-mobile-lg: 0.9375rem;
--font-size-mobile-xl: 1.0625rem;
--font-size-mobile-2xl: 1.1875rem;
--font-size-mobile-3xl: 1.375rem;
--font-size-mobile-4xl: 1.625rem;
--font-size-mobile-5xl: 1.875rem;
--font-size-mobile-6xl: 2rem;
/* Fixed Spacing System */
--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;
/* Semantic spacing aliases */
--space-2xs: var(--space-1);
--space-xs: var(--space-3);
--space-s: var(--space-4);
--space-m: var(--space-6);
--space-l: var(--space-8);
--space-xl: var(--space-12);
--space-2xl: var(--space-16);
/* Brand Color Palette */
--primary-50: #f5f3ff;
--primary-100: #ede9fe;
--primary-200: #ddd6fe;
--primary-500: #8b5cf6;
--primary-600: #6366f1;
--primary-700: #4f46e5;
--primary-800: #3730a3;
--primary-300: #c4b5fd;
--primary-400: #a78bfa;
--secondary-500: #ec4899;
--secondary-600: #db2777;
--accent-500: #06b6d4;
--accent-600: #0891b2;
/* Gradients */
--primary-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
--secondary-gradient: linear-gradient(135deg, #ec4899 0%, #f97316 100%);
--accent-gradient: linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%);
/* Neutral Colors */
--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;
--white: #ffffff;
--black: #000000;
/* Typography */
--font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
/* Shadows & Effects */
--shadow-xs: 0 1px 2px rgba(0,0,0,.06);
--shadow-sm: 0 0.0625rem 0.125rem 0 rgb(0 0 0 / 0.05);
--shadow-md: 0 0.25rem 0.375rem -1px rgb(0 0 0 / 0.1), 0 0.125rem 0.25rem -1px rgb(0 0 0 / 0.06);
--shadow-lg: 0 0.625rem 0.9375rem -3px rgb(0 0 0 / 0.1), 0 0.25rem 0.375rem -2px rgb(0 0 0 / 0.05);
--shadow-xl: 0 1.25rem 1.5625rem -5px rgb(0 0 0 / 0.1), 0 0.625rem 0.625rem -5px rgb(0 0 0 / 0.04);
--shadow-2xl: 0 1.5625rem 3.125rem -12px rgb(0 0 0 / 0.25);
--accent-glow: 0 0 0.9375rem 0 rgba(109, 40, 217, 0.5);
/* Border Radius */
--radius-sm: 0.375rem;
--radius-md: 0.5rem;
--radius-lg: 0.75rem;
--radius-xl: 1rem;
--radius-2xl: 1.5rem;
--radius-full: 624.9375rem;
/* Transitions */
--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--transition-fast: all 0.15s ease;
}
/* Mobile Typography Variable Swaps */
@media (max-width: 48rem) {
:root {
--font-size-xs: var(--font-size-mobile-xs);
--font-size-sm: var(--font-size-mobile-sm);
--font-size-base: var(--font-size-mobile-base);
--font-size-lg: var(--font-size-mobile-lg);
--font-size-xl: var(--font-size-mobile-xl);
--font-size-2xl: var(--font-size-mobile-2xl);
--font-size-3xl: var(--font-size-mobile-3xl);
--font-size-4xl: var(--font-size-mobile-4xl);
--font-size-5xl: var(--font-size-mobile-5xl);
--font-size-6xl: var(--font-size-mobile-6xl);
}
}
@media (max-width: 30rem) {
:root {
--site-max-width: 62.5rem;
--font-size-6xl: clamp(1.75rem, 8vw, 2.4rem);
--font-size-3xl: clamp(1.2rem, 5.5vw, 1.5rem);
}
}
/* =================================== */
/* 2. TYPOGRAPHY & FONT SIZING */
/* =================================== */
html {
scroll-behavior: smooth;
font-size: 100%;
}
@media (min-width: 120rem) {
html { font-size: 106.25%; }
}
@media (max-width: 85.375rem) {
html { font-size: 93.75%; }
}
@media (max-width: 64rem) {
html { font-size: 100%; }
}
@media (max-width: 48rem) {
html { font-size: 93.75%; }
}
@media (max-width: 48rem) {
html { font-size: 0.875rem !important; }
}
@media (max-width: 23.4375rem) {
html { font-size: 0.8125rem !important; }
}
/* =================================== */
/* 3. BASE HTML ELEMENTS */
/* =================================== */
body {
font-family: var(--font-family);
line-height: 1.6;
color: var(--gray-800);
background: var(--white);
font-size: var(--font-size-base);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
min-width: 320px;
}
img {
max-width: 100%;
height: auto;
}
a {
color: inherit;
text-decoration: none;
}
/* =================================== */
/* 4. UTILITY CLASSES */
/* =================================== */
.video-responsive, .video, .yt-embed, .hero-video {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
}
.video-responsive iframe, .video iframe, .yt-embed iframe, .hero-video iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.container, .wrap, .page-width, .site-container {
max-width: min(var(--site-max-width), 85vw);
margin-inline: auto;
padding-inline: var(--space-s);
}
@media (min-width: 64rem) {
.container, .wrap, .page-width, .site-container {
max-width: min(68rem, 80vw);
padding-inline: var(--space-m);
}
}
@media (min-width: 90rem) {
.container, .wrap, .page-width, .site-container {
max-width: 68rem;
padding-inline: var(--space-l);
}
}
@media (max-width: 48rem) {
.container { padding-inline: var(--space-s) !important; }
}
@media (max-width: 30rem) {
.container { padding-inline: var(--space-xs) !important; }
}
@media (max-width: 20rem) {
.container { padding-inline: var(--space-2xs) !important; }
}
/* =================================== */
/* 5. BUTTON SYSTEM */
/* =================================== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: 0.625rem 1.25rem;
font-weight: 600;
text-decoration: none;
border-radius: var(--radius-lg);
transition: var(--transition);
cursor: pointer;
border: none;
font-size: 0.9375rem;
position: relative;
overflow: hidden;
white-space: nowrap;
text-align: center;
}
.btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s;
}
.btn:hover::before {
left: 100%;
}
.btn-primary {
background: var(--primary-gradient);
color: var(--white);
box-shadow: var(--shadow-md);
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
.btn-secondary {
background: var(--white);
color: var(--gray-700);
border: 0.125rem solid var(--gray-300);
box-shadow: var(--shadow-sm);
}
.btn-secondary:hover {
background: var(--gray-50);
border-color: var(--primary-600);
color: var(--primary-600);
}
.btn-lg {
padding: 0.75rem 1.75rem;
font-size: 1.0625rem;
}
.btn-white {
background: var(--white);
color: var(--primary-600);
box-shadow: var(--shadow-lg);
padding: 0.75rem 1.75rem;
font-size: 1.0625rem;
font-weight: 700;
}
.btn-white:hover {
background: rgba(255, 255, 255, 0.95);
transform: translateY(-3px);
box-shadow: var(--shadow-xl);
}
@media (max-width: 48rem) {
.btn, .btn-lg {
padding: 0.625rem 1rem !important;
font-size: 0.9670rem !important;
min-height: 44px;
}
}
#social-share-bar .btn {
padding: var(--space-2) var(--space-4);
font-size: var(--font-size-sm);
}
/* =================================== */
/* 6. HEADER & NAVIGATION */
/* =================================== */
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(0.75rem);
border-bottom: 0.0625rem solid rgba(0, 0, 0, 0.06);
z-index: 1000;
transition: all 0.3s ease;
height: clamp(3.75rem, 8vw, 4rem);
}
.header.scrolled {
background: rgba(255, 255, 255, 0.98);
box-shadow: 0 0.125rem 1.25rem rgba(0, 0, 0, 0.08);
border-bottom-color: rgba(0, 0, 0, 0.1);
height: clamp(3.5rem, 7.5vw, 3.75rem);
}
.nav {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-3) clamp(var(--space-s), 2.5vw, var(--space-m));
max-width: min(68rem, 85vw);
margin: 0 auto;
height: 100%;
}
.nav-brand a {
display: flex;
align-items: center;
transition: transform 0.2s ease;
}
.nav-brand a:hover {
transform: scale(1.02);
}
.logo {
height: clamp(1.75rem, 4vw, 2rem);
width: auto;
}
.nav-menu {
display: flex;
list-style: none;
gap: 0.5rem;
align-items: center;
margin: 0 1.5rem;
padding: 0.5rem 1rem;
background: rgba(249, 250, 251, 0.7);
border-radius: var(--radius-full);
border: 1px solid rgba(0, 0, 0, 0.05);
}
.nav-link {
font-weight: 500;
color: var(--gray-600);
text-decoration: none;
padding: 0.375rem 0.75rem;
border-radius: var(--radius-full);
transition: all 0.2s ease;
cursor: pointer;
font-size: 0.875rem;
border-radius: var(--radius-full);
transition: all 0.2s ease;
cursor: pointer;
font-size: 0.875rem;
position: relative;
white-space: nowrap;
}
.nav-link:hover,
.nav-link.active {
color: var(--white);
background: var(--primary-600);
box-shadow: 0 0.125rem 0.5rem rgba(99, 102, 241, 0.3);
}
.nav-cta .btn-primary {
padding: 0.375rem 1.25rem;
font-weight: 600;
font-size: 0.875rem;
box-shadow: 0 2px 8px rgba(99, 102, 241, 0.25);
border: 1px solid rgba(99, 102, 241, 0.2);
height: 2.25rem;
min-width: 6.5rem;
}
.nav-cta .btn-primary:hover {
box-shadow: 0 0.25rem 0.75rem rgba(99, 102, 241, 0.35);
transform: translateY(-1px);
}
.nav-toggle {
display: none;
flex-direction: column;
gap: var(--space-2xs);
cursor: pointer;
padding: var(--space-2);
background: none;
border: none;
border-radius: var(--radius-md);
transition: background-color 0.2s ease;
width: clamp(2.25rem, 4.8vw, 2.5rem);
height: clamp(2.25rem, 4.8vw, 2.5rem);
align-items: center;
justify-content: center;
touch-action: manipulation;
}
.nav-toggle:hover {
background: rgba(0, 0, 0, 0.05);
}
.nav-toggle span {
width: clamp(1.125rem, 2.4vw, 1.375rem);
height: 0.125rem;
background: var(--gray-700);
border-radius: var(--radius-full);
transition: all 0.3s ease;
}
.desktop-only {
display: block;
}
.nav-cta-mobile {
display: none;
}
.main {
margin-top: clamp(3.75rem, 8vw, 4rem);
min-height: calc(100vh - clamp(3.75rem, 8vw, 4rem));
}
/* Mobile Navigation - Polished */
@media (max-width: 48rem) {
.desktop-only { display: none !important; }
.nav-cta-mobile { display: block; margin-top: 0; }
.nav-menu {
position: fixed;
top: 3.75rem;
left: 0.75rem;
right: 0.75rem;
background: var(--white);
backdrop-filter: blur(20px);
flex-direction: column;
padding: 1rem 0.75rem 1rem;
box-shadow: 0 10px 40px rgba(0,0,0,0.15);
border-radius: 1.25rem;
transform: translateY(-12px) scale(0.95);
opacity: 0;
visibility: hidden;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
gap: 0.375rem;
border: 1px solid var(--gray-200);
max-height: calc(100vh - 5.5rem);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
z-index: 999;
}
.nav-menu.active {
transform: translateY(0) scale(1);
opacity: 1;
visibility: visible;
}
.nav-link {
width: 100%;
text-align: center;
padding: 0.875rem 1rem;
font-size: 0.9375rem;
font-weight: 500;
margin: 0;
min-height: 44px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 0.75rem;
color: var(--gray-700);
background: transparent;
transition: all 0.2s ease;
}
.nav-link:hover {
background: var(--primary-50);
color: var(--primary-600);
}
.nav-link.active {
background: var(--primary-600);
color: var(--white);
font-weight: 600;
}
/* CTA Button in menu */
.nav-cta-mobile {
padding-top: 0.75rem;
margin-top: 0.5rem;
border-top: 1px solid var(--gray-200);
}
.nav-cta-mobile .btn-primary {
width: 100%;
justify-content: center;
padding: 0.875rem 1.5rem;
font-weight: 700;
}
/* Close button */
.nav-toggle {
display: flex;
z-index: 1000;
}
.nav-toggle.active span:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
}
.nav-toggle.active span:nth-child(2) {
opacity: 0;
transform: scale(0);
}
.nav-toggle.active span:nth-child(3) {
transform: rotate(-45deg) translate(7px, -6px);
}
.main {
margin-top: 3.75rem;
}
/* Body scroll lock */
body.menu-open {
overflow: hidden;
}
}
@media (max-width: 30rem) {
.header { height: clamp(3.25rem, 7vw, 3.5rem); }
.header.scrolled { height: clamp(3rem, 6.5vw, 3.25rem); }
.nav { padding: clamp(var(--space-2xs), 1.2vw, var(--space-xs)) clamp(var(--space-xs), 2vw, var(--space-s)); }
.logo { height: clamp(1.5rem, 3.5vw, 1.75rem); }
.nav-menu {
top: clamp(3.25rem, 7vw, 3.5rem);
left: clamp(0.5rem, 1.2vw, 0.75rem);
right: clamp(0.5rem, 1.2vw, 0.75rem);
padding: clamp(var(--space-xs), 2vw, var(--space-s));
}
.nav-link {
padding: clamp(var(--space-2xs), 1.2vw, var(--space-xs)) clamp(var(--space-xs), 2vw, var(--space-s));
font-size: 0.875rem;
}
.nav-toggle {
width: clamp(2rem, 4.5vw, 2.25rem);
height: clamp(2rem, 4.5vw, 2.25rem);
}
.nav-toggle span { width: clamp(1rem, 2.2vw, 1.125rem); }
.nav-cta .btn-primary {
padding: clamp(var(--space-2xs), 1vw, var(--space-2xs)) clamp(var(--space-xs), 2vw, var(--space-s));
min-width: clamp(5rem, 12vw, 6.25rem);
height: clamp(2rem, 4.5vw, 2.25rem);
font-size: 0.75rem;
}
.main {
margin-top: clamp(3.25rem, 7vw, 3.5rem);
min-height: calc(100vh - clamp(3.25rem, 7vw, 3.5rem));
}
}
@media (max-width: 20rem) {
.nav { padding: clamp(var(--space-2xs), 1vw, var(--space-2xs)) clamp(var(--space-2xs), 1.5vw, var(--space-xs)); }
.logo { height: clamp(1.25rem, 3vw, 1.5rem); }
.nav-menu {
left: clamp(0.25rem, 1vw, 0.5rem);
right: clamp(0.25rem, 1vw, 0.5rem);
padding: clamp(var(--space-2xs), 1.5vw, var(--space-xs));
}
.nav-link {
padding: clamp(var(--space-2xs), 1vw, var(--space-2xs)) clamp(var(--space-2xs), 1.5vw, var(--space-xs));
}
}
/* =================================== */
/* 7. HERO SECTION */
/* =================================== */
.hero {
background: linear-gradient(135deg, var(--gray-50) 0%, var(--white) 100%);
padding: clamp(3rem, 8vw, 4rem) 0;
position: relative;
overflow: hidden;
min-height: clamp(70vh, 80vh, 85vh);
display: flex;
align-items: center;
}
.hero-floating-icons {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
pointer-events: none;
z-index: 1;
}
.hero-floating-icons .floating-icon {
position: absolute;
opacity: 0.08;
}
.hero-floating-icons .floating-icon svg {
width: clamp(2rem, 4vw, 2.25rem);
height: clamp(2rem, 4vw, 2.25rem);
}
.floating-ig-1 svg,
.floating-ig-4 svg {
width: clamp(3rem, 6vw, 3.25rem);
height: clamp(3rem, 6vw, 3.25rem);
}
.floating-ig-2 svg,
.floating-ig-5 svg {
width: clamp(1.25rem, 2.5vw, 1.5rem);
height: clamp(1.25rem, 2.5vw, 1.5rem);
}
.floating-ig-1 {
top: 18%;
left: 12%;
animation: float-clean 20s infinite ease-in-out;
}
.floating-ig-2 {
top: 25%;
right: 18%;
animation: float-clean 25s infinite ease-in-out 5s;
}
.floating-ig-3 {
bottom: 35%;
left: 8%;
animation: float-clean 22s infinite ease-in-out 10s;
}
.floating-ig-4 {
bottom: 20%;
right: 12%;
animation: float-clean 28s infinite ease-in-out 15s;
}
.floating-ig-5 {
top: 50%;
left: 50%;
transform: translateX(-50%);
animation: float-clean 24s infinite ease-in-out 3s;
}
.hero-content {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(2rem, 6vw, 3rem);
align-items: center;
max-width: 68rem;
margin: 0 auto;
}
.hero-text {
max-width: 100%;
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: 0.375rem 0.875rem;
background: var(--white);
border: 0.0625rem solid var(--gray-200);
border-radius: var(--radius-full);
font-size: 0.8125rem;
font-weight: 600;
color: var(--gray-700);
margin-bottom: var(--space-6);
box-shadow: var(--shadow-sm);
}
.hero-title {
font-size: 2.5rem;
font-weight: 900;
line-height: 1.15;
margin-bottom: var(--space-6);
color: var(--gray-900);
}
.hero-title-wrapper {
display: inline-block;
}
.hero-title-gradient {
background: var(--primary-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-weight: 900;
}
.ig-gradient {
background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-weight: 900;
}
.hero-description {
font-size: 1.0625rem;
color: var(--gray-600);
margin-bottom: var(--space-8);
line-height: 1.7;
max-width: min(31.25rem, 90%);
}
@media (max-width: 90rem) {
.hero-title { font-size: 2.25rem; }
}
@media (max-width: 64rem) {
.hero-title { font-size: 2rem; }
}
.hero-stats {
display: flex;
gap: clamp(1.75rem, 3.5vw, 2.5rem);
margin-bottom: var(--space-8);
flex-wrap: wrap;
justify-content: flex-start;
}
.hero-stat {
text-align: center;
flex: 0 0 auto;
min-width: clamp(5rem, 12vw, 6.5rem);
}
.hero-stat-number {
font-size: 1.5rem;
font-weight: 900;
color: var(--primary-600);
line-height: 1;
margin-bottom: var(--space-1);
}
.hero-stat-label {
font-size: 0.75rem;
color: var(--gray-500);
font-weight: 500;
line-height: 1.3;
}
.hero-buttons {
display: flex;
gap: var(--space-4);
flex-wrap: wrap;
}
.hero-visual {
position: relative;
}
.hero-video {
aspect-ratio: 16/9;
border-radius: var(--radius-2xl);
overflow: hidden;
box-shadow: var(--shadow-xl);
background: var(--gray-900);
}
.hero-video iframe {
width: 100%;
height: 100%;
border: none;
}
.hero.hero--center .hero-content {
display: grid;
grid-template-columns: 1fr;
justify-items: center;
text-align: center;
gap: clamp(1rem, 3vw, 1.75rem);
}
.hero.hero--center .hero-description,
.hero.hero--center .hero-subtitle,
.hero.hero--center p {
max-width: 45rem;
margin-inline: auto;
text-align: center;
}
.hero.hero--center .hero-stats {
display: inline-grid;
grid-template-columns: repeat(3, minmax(6.5rem, max-content));
gap: clamp(0.75rem, 1.2vw, 1rem);
margin-inline: auto;
align-items: start;
justify-items: center;
}
.hero.hero--center .hero-stat {
text-align: center;
}
@media (max-width: 64rem) {
.hero-content {
grid-template-columns: 1fr;
text-align: center;
gap: clamp(var(--space-l), 4.8vw, var(--space-xl));
}
.hero-text {
max-width: 100%;
}
.hero-description {
margin-inline: auto;
max-width: 100%;
}
.hero-stats {
justify-content: center;
}
}
@media (max-width: 48rem) {
.hero {
padding: 3rem 0 2rem !important;
min-height: auto !important;
}
.hero-badge {
font-size: 0.75rem !important;
padding: 0.375rem 0.75rem !important;
margin-bottom: 1rem !important;
}
.hero-title {
font-size: 1.625rem !important;
line-height: 1.2 !important;
margin-bottom: 1rem !important;
}
.hero-description {
font-size: 0.9375rem !important;
line-height: 1.5 !important;
margin-bottom: 1.5rem !important;
}
.hero-stats {
gap: 0.75rem !important;
margin-bottom: 1.5rem !important;
}
.hero-stat {
min-width: 4rem !important;
}
.hero-stat-number {
font-size: 1.25rem !important;
margin-bottom: 0.25rem !important;
}
.hero-stat-label {
font-size: 0.65rem !important;
line-height: 1.1 !important;
}
.hero-buttons {
gap: 0.75rem !important;
flex-direction: column;
align-items: center;
width: 100%;
}
.btn {
width: 100%;
max-width: 18rem;
justify-content: center;
}
.hero-floating-icons .floating-icon svg {
width: 1.5rem !important;
height: 1.5rem !important;
}
.floating-ig-3, .floating-ig-4, .floating-ig-5 {
display: none !important;
}
}
@media (max-width: 30rem) {
.hero { padding: clamp(2.5rem, 6vw, 3rem) 0; }
.hero-stats { gap: clamp(0.5rem, 1.5vw, 0.75rem); }
.hero-stat { min-width: clamp(3.75rem, 10vw, 4rem); }
.hero-stat-number { font-size: 1.125rem; }
.hero-stat-label {
font-size: clamp(0.5625rem, 1.2vw, 0.625rem);
line-height: 1.2;
}
.hero-floating-icons .floating-icon svg {
width: clamp(1.25rem, 2.5vw, 1.5rem);
height: clamp(1.25rem, 2.5vw, 1.5rem);
}
.floating-ig-4 { display: none; }
.hero-description { line-height: 1.5; }
}
@media (max-width: 23.4375rem) {
.hero-title { font-size: 1.5rem !important; }
.hero-stat { min-width: 3.75rem !important; }
.hero-stat-number { font-size: 1.1rem !important; }
.hero-stat-label { font-size: 0.6rem !important; }
}
@media (max-width: 20rem) {
.hero-stat { min-width: clamp(2.8125rem, 8vw, 3.4375rem); }
.hero-stat-number { font-size: 1rem; }
.hero-stat-label { font-size: clamp(0.5rem, 1vw, 0.5625rem); }
}
/* =================================== */
/* 8. SECTION STYLES (General) */
/* =================================== */
.section {
padding: clamp(3rem, 8vw, 4rem) 0;
}
.section-header {
text-align: center;
margin-bottom: clamp(2.5rem, 6vw, 3rem);
max-width: min(42rem, 85vw);
margin-left: auto;
margin-right: auto;
}
.section-title {
font-size: 2rem;
font-weight: 800;
color: var(--gray-900);
margin-bottom: var(--space-4);
line-height: 1.2;
}
.section-subtitle {
font-size: 1.0625rem;
color: var(--gray-600);
max-width: min(35rem, 85vw);
margin: 0 auto;
line-height: 1.6;
}
@media (max-width: 90rem) {
.section-title { font-size: var(--font-size-600); }
}
@media (max-width: 48rem) {
.section { padding: 2.5rem 0 !important; }
.section-header { margin-bottom: 2rem !important; }
.section-title {
font-size: 1.5rem !important;
margin-bottom: 0.75rem !important;
}
.section-subtitle { font-size: 0.9375rem !important; }
}
@media (max-width: 30rem) {
.section { padding: clamp(2rem, 6vw, 2.5rem) 0; }
.section-header { margin-bottom: clamp(1.5rem, 4vw, 2rem); }
.section-title { font-size: clamp(1.35rem, 3vw, 1.5rem) !important; }
}
/* =================================== */
/* 9. TRUST SECTION */
/* =================================== */
.trust-section {
background: var(--gray-50);
}
.trust-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(clamp(15rem, 30vw, 16rem), 1fr));
gap: clamp(1.25rem, 3.6vw, 1.5rem);
max-width: 62rem;
margin: 0 auto;
}
.trust-item {
text-align: center;
padding: clamp(1.5rem, 3.6vw, 2rem);
background: var(--white);
border-radius: var(--radius-xl);
transition: var(--transition);
border: 0.0625rem solid var(--gray-200);
}
.trust-item:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-lg);
}
.trust-icon {
font-size: 2.5rem;
margin-bottom: var(--space-4);
}
.trust-item h3 {
font-size: 1.1875rem;
font-weight: 700;
color: var(--gray-900);
margin-bottom: var(--space-3);
}
.trust-item p {
color: var(--gray-600);
line-height: 1.6;
font-size: 0.9375rem;
}
@media (min-width: 75rem) {
.trust-item {
aspect-ratio: 1 / 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
}
@media (max-width: 48rem) {
.trust-grid {
grid-template-columns: 1fr;
}
.trust-item, .benefit-card { padding: 1.5rem !important; }
.trust-icon, .benefit-icon {
font-size: 2rem !important;
margin-bottom: 0.75rem !important;
}
.trust-item h3, .benefit-card h3 {
font-size: 1.0625rem !important;
margin-bottom: 0.5rem !important;
}
.trust-item p, .benefit-card p {
font-size: 0.875rem !important;
line-height: 1.5 !important;
}
}
/* =================================== */
/* 10. PACKAGES SECTION */
/* =================================== */
.packages {
background: var(--gray-50);
}
.packages-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(clamp(16rem, 35vw, 18rem), 1fr));
gap: clamp(1.25rem, 3.6vw, 1.5rem);
margin-bottom: clamp(2.5rem, 6vw, 3rem);
max-width: 68rem;
margin-left: auto;
margin-right: auto;
}
@media (min-width: 1024px) {
.packages-grid {
grid-template-columns: repeat(3, minmax(0, 20rem));
justify-content: center;
}
}
@media (min-width: 1440px) {
.packages-grid {
grid-template-columns: repeat(4, minmax(0, 17rem));
}
}
.package-card {
overflow: hidden;
background: var(--white);
border-radius: var(--radius-2xl);
padding: 2rem 1.5rem;
text-align: center;
position: relative;
box-shadow: var(--shadow-md);
transition: var(--transition);
border: 0.125rem solid transparent;
}
.package-card::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.05), transparent);
transition: left 0.6s;
}
.package-card:hover::before {
left: 100%;
}
.package-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-xl);
}
.package-card.featured {
border: 0.125rem solid var(--primary-600);
transform: scale(1.01);
background: var(--primary-gradient);
color: var(--white);
padding-right: 1.5rem;
}
.package-card:not(.featured) .package-badge {
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
background: var(--secondary-gradient);
color: var(--white);
padding: 0.5rem 1.25rem;
border-radius: var(--radius-full);
font-size: 0.875rem;
font-weight: 600;
box-shadow: var(--shadow-md);
}
.package-card.featured .package-badge {
position: absolute;
top: 22px;
right: -32px;
z-index: 5;
display: inline-block;
width: 135px;
padding: 0.45rem 0;
text-align: center;
font-weight: 800;
font-size: 10.5px;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #fff;
background: var(--secondary-gradient);
transform: rotate(45deg);
box-shadow: var(--shadow-md);
pointer-events: none;
border: 0;
line-height: 1.15;
white-space: nowrap;
}
.package-card.featured .package-badge::before {
content: "⭐";
margin-right: 0.2rem;
font-size: 10px;
}
.package-card.featured .package-badge::after {
content: "";
position: absolute;
right: 0;
bottom: -7px;
border: 7px solid transparent;
border-top-color: rgba(0,0,0,.08);
}
/* Tablets (768px - 1024px) */
@media (max-width: 64rem) {
.package-card.featured .package-badge {
width: 130px;
right: -30px;
top: 20px;
font-size: 10px;
}
}
/* Small tablets and large phones (481px - 767px) */
@media (max-width: 48rem) {
.package-card.featured .package-badge {
width: 115px;
right: -25px;
top: 19px;
font-size: 9px;
padding: 0.38rem 0;
}
.package-card.featured .package-badge::before {
font-size: 8.5px;
}
}
/* Standard phones (376px - 480px) */
@media (max-width: 30rem) {
.package-card.featured .package-badge {
width: 105px;
right: -22px;
top: 20px;
font-size: 8.5px;
padding: 0.35rem 0;
letter-spacing: 0.02em;
}
.package-card.featured .package-badge::before {
font-size: 8px;
margin-right: 0.15rem;
}
}
/* Small phones (320px - 375px) */
@media (max-width: 23.4375rem) {
.package-card.featured .package-badge {
width: 98px;
right: -20px;
top: 21px;
font-size: 8px;
padding: 0.32rem 0;
}
.package-card.featured .package-badge::before {
font-size: 7.5px;
}
}
.package-discount-badge {
position: absolute;
top: 1rem;
left: 1rem;
background: #ff4444;
color: white;
padding: 0.25rem 0.5rem;
border-radius: var(--radius-md);
font-size: 0.75rem;
font-weight: 600;
z-index: 10;
}
.package-instagram-icon {
width: 3.5rem;
height: 3.5rem;
margin: 0 auto var(--space-4);
border-radius: 1rem;
background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
box-shadow: var(--shadow-lg);
transition: var(--transition);
}
.package-card:hover .package-instagram-icon {
transform: translateY(-2px) scale(1.03);
}
.package-instagram-icon svg {
width: clamp(1.75rem, 3.6vw, 2rem);
height: clamp(1.75rem, 3.6vw, 2rem);
fill: var(--white);
}
.package-card.featured .package-instagram-icon {
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(0.625rem);
}
.package-card.featured .package-instagram-icon svg {
fill: var(--primary-600);
}
.package-followers-count,
.package-counter {
font-size: 2rem;
font-weight: 900;
color: var(--gray-900);
margin-bottom: var(--space-2);
line-height: 1.2;
}
.package-card.featured .package-followers-count,
.package-card.featured .package-counter {
color: var(--white);
}
.package-followers-label {
font-size: 1.0625rem;
color: var(--gray-600);
margin-bottom: var(--space-6);
font-weight: 500;
}
.package-card.featured .package-followers-label {
color: rgba(255, 255, 255, 0.9);
}
.package-features {
list-style: none;
margin-bottom: clamp(1.25rem, 3.6vw, 1.5rem);
text-align: left;
}
.package-features li {
padding: 0.5rem 0;
color: var(--gray-700);
font-weight: 500;
display: flex;
align-items: center;
gap: var(--space-3);
font-size: 0.9375rem;
}
.package-card.featured .package-features li {
color: rgba(255, 255, 255, 0.95);
}
.package-features .check-icon {
width: 1.4rem;
height: 1.4rem;
border-radius: 9999px;
background: color-mix(in oklab, var(--primary-50) 55%, white);
border: 2px solid var(--primary-300);
color: var(--primary-600);
display: inline-grid;
place-items: center;
box-shadow: 0 1px 2px rgba(0,0,0,.06);
flex-shrink: 0;
margin-right: var(--space-3);
font-size: 0.95rem;
line-height: 1;
}
.package-features .check-icon svg {
width: 16px;
height: 16px;
display: block;
}
.package-card.featured .package-features .check-icon {
background: color-mix(in oklab, var(--primary-50) 55%, white) !important;
border-color: var(--primary-300) !important;
color: var(--primary-600) !important;
box-shadow: 0 1px 2px rgba(0,0,0,.06) !important;
}
@media (prefers-contrast: more) {
.package-features .check-icon { border-width: 3px; }
}
.package-btn {
width: 100%;
font-size: 1.0625rem;
padding: clamp(0.625rem, 1.6vw, 0.75rem) clamp(1rem, 2.4vw, 1.25rem);
font-weight: 700;
}
.package-card.featured .btn-primary {
background: var(--white);
color: var(--primary-600);
}
.package-card.featured .btn-primary:hover {
background: rgba(255, 255, 255, 0.95);
transform: translateY(-2px);
}
@media (max-width: 64rem) {
.packages-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 48rem) {
.package-card {
overflow: hidden;
padding: 1.5rem 1rem !important;
}
.package-instagram-icon {
width: 3rem !important;
height: 3rem !important;
margin-bottom: 0.75rem !important;
}
.package-followers-count, .package-counter {
font-size: 1.625rem !important;
margin-bottom: 0.5rem !important;
}
.package-followers-label {
font-size: 0.9375rem !important;
margin-bottom: 1rem !important;
}
.package-features li {
padding: 0.375rem 0 !important;
font-size: 0.875rem !important;
}
.package-card.featured {
transform: none;
margin-bottom: var(--space-4);
}
.packages-grid { grid-template-columns: 1fr; }
}
@media (max-width: 23.4375rem) {
.package-followers-count, .package-counter { font-size: 1.5rem !important; }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.spinner {
display: inline-block;
vertical-align: middle;
}
/* =================================== */
/* 11. WHY CHOOSE US / BENEFITS */
/* =================================== */
.why-choose {
background: var(--white);
}
.benefits-grid {
display: grid;
grid-template-columns: repeat(auto-fit, clamp(16rem, 35vw, 20rem));
gap: clamp(1.25rem, 3.6vw, 1.5rem);
justify-content: center;
max-width: 62rem;
margin: 0 auto;
}
.benefit-card {
text-align: center;
padding: clamp(1.5rem, 3.6vw, 2rem);
background: var(--gray-50);
border-radius: var(--radius-xl);
transition: var(--transition);
border: 0.0625rem solid var(--gray-200);
}
.benefit-card:hover {
transform: translateY(-6px);
background: var(--white);
box-shadow: var(--shadow-lg);
}
.benefit-icon {
font-size: 2.5rem;
margin-bottom: var(--space-4);
}
.benefit-card h3 {
font-size: 1.1875rem;
font-weight: 700;
color: var(--gray-900);
margin-bottom: var(--space-3);
}
.benefit-card p {
color: var(--gray-600);
line-height: 1.6;
font-size: 0.9375rem;
}
@media (min-width: 75rem) {
.benefits-grid {
grid-template-columns: repeat(3, 1fr);
gap: var(--space-l);
}
.benefit-card {
aspect-ratio: 1 / 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
}
@media (max-width: 48rem) {
.benefits-grid { grid-template-columns: 1fr; }
}
/* =================================== */
/* 12. FAQ SECTION */
/* =================================== */
.faq {
background: var(--white);
}
.faq-grid {
display: grid;
gap: var(--space-4);
max-width: min(42rem, 85vw);
margin: 0 auto;
}
.faq-item {
background: var(--gray-50);
border-radius: var(--radius-xl);
overflow: hidden;
transition: var(--transition);
border: 0.0625rem solid var(--gray-200);
}
.faq-item:hover {
background: var(--white);
box-shadow: var(--shadow-md);
}
.faq-item.active {
border-color: var(--primary-600);
box-shadow: var(--shadow-lg);
}
.faq-question {
width: 100%;
padding: clamp(1rem, 3vw, 1.25rem) clamp(12px, 1.6vw, 18px);
background: none;
border: none;
text-align: left;
font-size: 1.0625rem;
font-weight: 600;
color: var(--gray-900);
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
transition: var(--transition);
}
.faq-question:hover {
background: rgba(99, 102, 241, 0.05);
}
.faq-question:focus-visible {
outline: 3px solid color-mix(in oklab, var(--primary-600) 50%, transparent);
outline-offset: 3px;
}
.faq-icon {
position: relative;
width: clamp(1.25rem, 2.4vw, 1.5rem);
height: clamp(1.25rem, 2.4vw, 1.5rem);
display: inline-grid;
place-items: center;
border-radius: 9999px;
background: var(--primary-700);
border: 2px solid var(--primary-700);
color: var(--white);
box-shadow: var(--shadow-md);
font-size: 0;
line-height: 0;
flex-shrink: 0;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.faq-icon::before {
content: "+";
font-size: clamp(0.9rem, 1.8vw, 1rem);
line-height: 1;
color: currentColor;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
font-weight: 400;
display: block;
transition: transform 0.2s ease;
}
.faq-item.active .faq-icon,
.faq-question[aria-expanded="true"] .faq-icon {
background: var(--white);
border-color: var(--gray-300);
color: var(--primary-700);
box-shadow: var(--shadow-sm);
}
.faq-item.active .faq-icon::before,
.faq-question[aria-expanded="true"] .faq-icon::before {
content: "\2212";
}
@media (max-width: 48rem) {
.faq-question {
font-size: 0.9375rem;
padding: 1rem;
min-height: 56px;
}
.faq-answer {
padding: 0 1rem;
}
.faq-item.active .faq-answer {
padding: 0 1rem 1rem;
}
}
/* =================================== */
/* 13. TESTIMONIALS / REVIEWS */
/* =================================== */
.testimonials {
background: linear-gradient(135deg, var(--gray-50) 0%, rgba(255, 255, 255, 0.8) 100%);
padding: clamp(4rem, 10vw, 5rem) 0;
}
.testimonials-carousel {
position: relative;
overflow: hidden;
border-radius: var(--radius-2xl);
}
.testimonials-container {
display: flex;
transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.testimonial-slide {
min-width: 100%;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(clamp(18rem, 40vw, 24rem), 1fr));
gap: clamp(1.25rem, 3.6vw, 1.5rem);
padding: var(--space-4);
max-width: 68rem;
margin: 0 auto;
}
.testimonial-card {
background: var(--white);
padding: clamp(1.5rem, 3.6vw, 2rem);
border-radius: var(--radius-2xl);
text-align: left;
position: relative;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
border: 0.0625rem solid rgba(99, 102, 241, 0.08);
overflow: hidden;
box-shadow:
0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.05),
0 0.25rem 0.75rem rgba(0, 0, 0, 0.04),
0 0.5rem 1.5rem rgba(0, 0, 0, 0.03),
0 0 0 0.0625rem rgba(99, 102, 241, 0.02);
}
.testimonial-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 0.25rem;
background: var(--primary-gradient);
opacity: 0;
transition: opacity 0.3s ease;
}
.testimonial-card:hover {
transform: translateY(-6px) scale(1.01);
border-color: rgba(99, 102, 241, 0.12);
box-shadow:
0 0.125rem 0.5rem rgba(0, 0, 0, 0.06),
0 0.5rem 1.5rem rgba(0, 0, 0, 0.08),
0 1rem 2.5rem rgba(0, 0, 0, 0.06),
0 0 0 0.0625rem rgba(99, 102, 241, 0.06);
}
.testimonial-card:hover::before {
opacity: 1;
}
.testimonial-stars {
color: #f59e0b;
font-size: 1.0625rem;
margin-bottom: var(--space-4);
display: flex;
gap: var(--space-2xs);
}
.testimonial-text {
font-size: 1.0625rem;
line-height: 1.7;
color: var(--gray-700);
margin-bottom: var(--space-6);
position: relative;
padding-left: var(--space-4);
}
.testimonial-text::before {
content: '"';
position: absolute;
left: 0;
top: -8px;
font-size: clamp(2.4rem, 3.6vw, 3rem);
color: var(--primary-600);
opacity: 0.2;
font-family: serif;
}
.testimonial-author {
display: flex;
align-items: center;
gap: var(--space-4);
padding-top: var(--space-4);
border-top: 0.0625rem solid rgba(0, 0, 0, 0.06);
}
.testimonial-avatar {
width: clamp(2.5rem, 5vw, 3rem);
height: clamp(2.5rem, 5vw, 3rem);
background: var(--primary-gradient);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 600;
font-size: 1.0625rem;
flex-shrink: 0;
}
.testimonial-info {
flex: 1;
}
.testimonial-name {
font-weight: 600;
color: var(--gray-900);
font-size: 1.0625rem;
margin-bottom: var(--space-1);
}
.testimonial-role {
font-size: 0.875rem;
color: var(--gray-500);
font-weight: 500;
}
.testimonial-country {
font-size: clamp(1.2rem, 1.8vw, 1.5rem);
margin-left: auto;
}
@media (min-width: 75rem) {
.testimonial-slide {
grid-template-columns: repeat(3, minmax(0, 21rem));
justify-content: center;
}
.testimonial-card {
display: flex;
flex-direction: column;
}
.testimonial-text {
flex-grow: 1;
margin-bottom: var(--space-4);
}
}
@media (max-width: 48rem) {
.testimonial-slide {
grid-template-columns: 1fr;
padding: var(--space-2);
}
.testimonial-card { padding: 1.25rem !important; }
.testimonial-text {
font-size: 0.9375rem !important;
}
}
@media (max-width: 30rem) {
.testimonial-text { font-size: var(--font-size-base); }
.testimonial-author { gap: clamp(var(--space-2xs), 1.5vw, var(--space-xs)); }
.testimonial-avatar {
width: clamp(2rem, 4.5vw, 2.25rem);
height: clamp(2rem, 4.5vw, 2.25rem);
}
}
/* =================================== */
/* 14. PRE-FOOTER CTA */
/* =================================== */
.pre-footer-cta {
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #6366f1 100%);
padding: clamp(3rem, 8vw, 4rem) 0;
text-align: center;
position: relative;
overflow: hidden;
}
.pre-footer-cta::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
}
.pre-footer-content {
position: relative;
z-index: 2;
max-width: min(42rem, 85vw);
margin: 0 auto;
}
.pre-footer-title {
font-size: 2.5rem;
font-weight: 800;
color: var(--white);
margin-bottom: var(--space-4);
}
.pre-footer-subtitle {
font-size: 1.1875rem;
color: rgba(255, 255, 255, 0.95);
margin-bottom: var(--space-8);
line-height: 1.6;
}
.pre-footer-features {
display: flex;
justify-content: center;
gap: clamp(1.5rem, 3vw, 2rem);
margin-bottom: var(--space-8);
flex-wrap: wrap;
}
.pre-footer-feature {
color: var(--white);
font-weight: 500;
display: flex;
align-items: center;
gap: var(--space-2);
font-size: 0.9375rem;
}
.pre-footer-contact {
margin-top: var(--space-6);
color: rgba(255, 255, 255, 0.9);
font-size: 0.9375rem;
}
.pre-footer-contact a {
color: var(--white);
text-decoration: underline;
}
@media (max-width: 48rem) {
.pre-footer-title { font-size: 1.75rem !important; }
.pre-footer-subtitle { font-size: 1rem !important; }
.pre-footer-features {
flex-direction: column;
gap: var(--space-4);
align-items: center;
}
}
@media (max-width: 30rem) {
.pre-footer-title { font-size: 1.5rem !important; }
.pre-footer-subtitle { font-size: 0.9375rem !important; }
}
/* =================================== */
/* 15. FOOTER */
/* =================================== */
.footer {
background: linear-gradient(180deg, var(--gray-900) 0%, #0a0a0a 100%);
color: var(--gray-300);
padding: clamp(3rem, 6vw, 4rem) 0 clamp(1.5rem, 3vw, 2rem);
}
.footer-wrapper {
position: relative;
}
.footer-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(clamp(12.5rem, 25vw, 15rem), 1fr));
gap: clamp(2rem, 4.8vw, 2.5rem);
margin-bottom: clamp(2rem, 4.8vw, 2.5rem);
padding-bottom: clamp(2rem, 4.8vw, 2.5rem);
border-bottom: 0.0625rem solid rgba(255, 255, 255, 0.1);
max-width: 62rem;
margin-left: auto;
margin-right: auto;
}
.footer-brand h3 {
color: var(--white);
font-size: 1.375rem;
font-weight: 700;
margin-bottom: var(--space-4);
background: linear-gradient(135deg, var(--primary-600), var(--primary-500));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.footer-description {
line-height: 1.6;
margin-bottom: var(--space-6);
font-size: 0.9375rem;
}
.footer-social {
display: flex;
gap: var(--space-3);
flex-wrap: wrap;
}
.social-link {
width: clamp(2.5rem, 5vw, 2.75rem);
height: clamp(2.5rem, 5vw, 2.75rem);
background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1));
border: 0.0625rem solid rgba(99, 102, 241, 0.2);
border-radius: var(--radius-lg);
display: flex;
align-items: center;
justify-content: center;
color: var(--gray-300);
transition: var(--transition);
}
.social-link:hover {
background: linear-gradient(135deg, var(--primary-600), var(--primary-500));
border-color: transparent;
color: var(--white);
transform: translateY(-2px);
}
.social-link svg {
width: clamp(1rem, 2vw, 1.25rem);
height: clamp(1rem, 2vw, 1.25rem);
fill: currentColor;
}
.footer-title {
color: var(--white);
font-weight: 600;
margin-bottom: var(--space-6);
font-size: 1.0625rem;
}
.footer-links {
list-style: none;
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.footer-links a {
color: var(--gray-400);
text-decoration: none;
transition: var(--transition);
font-size: 0.9375rem;
}
.footer-links a:hover {
color: var(--white);
}
.footer-bottom {
text-align: center;
padding-top: clamp(1.5rem, 3vw, 2rem);
color: var(--gray-500);
font-size: 0.875rem;
}
@media (max-width: 64rem) {
.footer-content {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 48rem) {
.footer-content {
grid-template-columns: 1fr;
text-align: center;
}
.footer-social { justify-content: center; }
}
/* =================================== */
/* 16. CONTACT PAGE */
/* =================================== */
.contact-hero {
background: linear-gradient(135deg, var(--gray-50) 0%, var(--white) 100%);
padding: clamp(3rem, 8vw, 4rem) 0;
position: relative;
overflow: hidden;
}
.contact-hero-floating {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
pointer-events: none;
}
.floating-element {
position: absolute;
width: clamp(3.75rem, 8vw, 5rem);
height: clamp(3.75rem, 8vw, 5rem);
background: linear-gradient(135deg, var(--primary-600), var(--primary-500));
border-radius: 50%;
opacity: 0.05;
animation: float-clean 15s infinite ease-in-out;
}
.floating-element-1 {
top: 20%;
left: 10%;
animation-delay: 0s;
}
.floating-element-2 {
bottom: 30%;
right: 15%;
animation-delay: 7s;
}
.contact-badge {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-4);
background: var(--white);
border: 0.0625rem solid var(--gray-200);
border-radius: var(--radius-full);
font-size: 0.875rem;
font-weight: 600;
color: var(--gray-700);
margin-bottom: var(--space-6);
box-shadow: var(--shadow-sm);
}
.contact-badge-dot {
width: 0.5rem;
height: 0.5rem;
background: #10b981;
border-radius: 50%;
animation: pulse 2s infinite;
}
.contact-trust-stats {
display: flex;
justify-content: center;
gap: clamp(1.5rem, 4vw, 2.5rem);
margin-top: var(--space-8);
flex-wrap: wrap;
}
.contact-trust-item {
text-align: center;
flex: 1;
min-width: clamp(5rem, 12vw, 7rem);
}
.contact-trust-number {
font-size: 1.375rem;
font-weight: 900;
color: var(--primary-600);
line-height: 1;
margin-bottom: var(--space-1);
}
.contact-trust-label {
font-size: 0.75rem;
color: var(--gray-500);
font-weight: 500;
}
.contact-form-section {
background: var(--white);
padding: clamp(3rem, 8vw, 4rem) 0;
}
.contact-form-container {
max-width: min(42rem, 85vw);
margin: 0 auto;
}
.contact-form {
background: var(--white);
border-radius: var(--radius-2xl);
padding: clamp(1.5rem, 5vw, 2.5rem);
box-shadow: var(--shadow-xl);
border: 0.0625rem solid var(--gray-200);
margin-bottom: clamp(2.5rem, 6vw, 3rem);
}
.contact-form-header {
text-align: center;
margin-bottom: clamp(1.5rem, 5vw, 2rem);
}
.contact-form-header h2 {
font-size: 1.75rem;
font-weight: 800;
color: var(--gray-900);
margin-bottom: var(--space-4);
}
.contact-form-header p {
color: var(--gray-600);
font-size: 1.0625rem;
}
.contact-form-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr));
gap: clamp(1rem, 3vw, 1.5rem);
margin-bottom: clamp(1rem, 4vw, 1.5rem);
}
.form-group {
margin-bottom: clamp(1rem, 3vw, 1.5rem);
}
.form-group label {
display: block;
font-weight: 600;
color: var(--gray-800);
margin-bottom: var(--space-2);
font-size: 0.9375rem;
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
padding: clamp(0.75rem, 2vw, 1rem);
border: 0.125rem solid var(--gray-300);
border-radius: var(--radius-lg);
font-size: 0.9375rem;
color: var(--gray-800);
background: var(--white);
transition: var(--transition);
font-family: var(--font-family);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none;
border-color: var(--primary-600);
box-shadow: 0 0 0 0.25rem rgba(99, 102, 241, 0.1);
}
.form-group select {
cursor: pointer;
background-image: url('data:image/svg+xml;charset=US-ASCII,');
background-repeat: no-repeat;
background-position: right 1rem center;
background-size: 0.75rem;
padding-right: var(--space-xl);
appearance: none;
}
.form-group textarea {
resize: vertical;
min-height: 7.5rem;
}
.form-help-text {
font-size: 0.875rem;
color: var(--gray-500);
margin-top: var(--space-1);
}
.error-message {
display: none;
color: #ef4444;
font-size: 0.875rem;
margin-top: var(--space-1);
font-weight: 500;
}
.form-group input.error,
.form-group select.error,
.form-group textarea.error {
border-color: #ef4444;
}
.btn-contact {
width: 100%;
padding: clamp(0.75rem, 2.5vw, 1rem) clamp(1.5rem, 5vw, 2rem);
font-size: 1.0625rem;
font-weight: 700;
margin-bottom: clamp(1rem, 4vw, 1.5rem);
}
.contact-form-footer {
text-align: center;
padding-top: clamp(1rem, 4vw, 1.5rem);
border-top: 0.0625rem solid var(--gray-200);
}
.contact-response-text {
color: var(--gray-600);
font-weight: 600;
margin-bottom: var(--space-2);
}
.contact-help-text {
color: var(--gray-500);
font-size: 0.875rem;
}
.contact-help-text a {
color: var(--primary-600);
text-decoration: none;
font-weight: 600;
}
.contact-help-text a:hover {
text-decoration: underline;
}
.contact-direct-info {
background: var(--gray-50);
border-radius: var(--radius-2xl);
padding: clamp(1.5rem, 4vw, 2rem);
text-align: center;
border: 0.0625rem solid var(--gray-200);
}
.contact-direct-info h3 {
font-size: 1.1875rem;
font-weight: 700;
color: var(--gray-900);
margin-bottom: var(--space-4);
}
.contact-direct-info p {
color: var(--gray-600);
margin-bottom: var(--space-6);
}
.contact-email-btn {
display: inline-block;
background: var(--primary-gradient);
color: var(--white);
padding: clamp(0.625rem, 2vw, 0.75rem) clamp(1.25rem, 4vw, 1.75rem);
border-radius: var(--radius-lg);
font-weight: 600;
text-decoration: none;
box-shadow: var(--shadow-md);
transition: var(--transition);
margin-bottom: var(--space-6);
}
.contact-email-btn:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
.contact-online-status {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
color: var(--gray-600);
font-size: 0.875rem;
font-weight: 500;
}
.contact-online-dot {
width: 0.5rem;
height: 0.5rem;
background: #10b981;
border-radius: 50%;
animation: pulse 2s infinite;
}
.contact-cta-buttons {
display: flex;
gap: var(--space-4);
justify-content: center;
margin-bottom: var(--space-6);
flex-wrap: wrap;
}
@media (max-width: 48rem) {
.contact-form-section .contact-info-below {
margin-top: var(--space-8);
}
.contact-form-grid { grid-template-columns: 1fr; }
.contact-cta-buttons {
flex-direction: column;
gap: var(--space-4);
align-items: center;
}
.form-group input,
.form-group select,
.form-group textarea {
font-size: 16px;
min-height: 44px;
}
}
@media (max-width: 30rem) {
.contact-hero { padding: clamp(2.5rem, 6vw, 3rem) 0; }
.contact-form {
padding: clamp(1rem, 2.4vw, 1.5rem);
margin: 0 clamp(0.25rem, 1.2vw, 0.75rem);
}
.contact-trust-stats { gap: clamp(0.5rem, 1.5vw, 0.75rem); }
.contact-trust-item { min-width: clamp(3.125rem, 8vw, 3.75rem); }
.contact-trust-number { font-size: 1rem; }
.contact-trust-label {
font-size: clamp(0.5rem, 1vw, 0.5625rem);
line-height: 1.2;
}
.form-group { margin-bottom: clamp(0.75rem, 2vw, 1rem); }
.form-group input,
.form-group textarea,
.form-group select { padding: clamp(0.75rem, 1.5vw, 0.75rem); }
.form-group textarea { min-height: clamp(6.25rem, 14vw, 7.5rem); }
.btn-lg {
padding: clamp(0.75rem, 1.5vw, 0.75rem) clamp(1.25rem, 3vw, 1.5rem);
font-size: 0.9375rem;
}
}
@media (max-width: 20rem) {
.contact-form {
margin: 0;
padding: clamp(0.75rem, 2vw, 1rem);
}
.contact-trust-number { font-size: 1rem; }
.contact-trust-label { font-size: clamp(0.4375rem, 0.8vw, 0.5rem); }
}
/* =================================== */
/* 17. AI TOOL PAGES */
/* =================================== */
.ai-tool-page {
background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%);
min-height: 100vh;
color: var(--white);
position: relative;
}
.ai-tool-page::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 25% 25%, rgba(99, 102, 241, 0.1) 0%, transparent 50%),
radial-gradient(circle at 75% 75%, rgba(139, 92, 246, 0.1) 0%, transparent 50%);
pointer-events: none;
}
.ai-tool-header {
position: relative;
z-index: 2;
text-align: center;
padding: clamp(3rem, 12vw, 5rem) 0 clamp(3rem, 8vw, 4rem);
}
.ai-tool-title {
font-size: clamp(2.5rem, 6vw, 4rem);
font-weight: 900;
background: linear-gradient(135deg, #60a5fa, #a78bfa, #f472b6);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: var(--space-6);
line-height: 1.1;
}
.ai-tool-subtitle {
font-size: clamp(1.1rem, 2.5vw, 1.4rem);
color: rgba(255, 255, 255, 0.8);
max-width: 43.75rem;
margin: 0 auto var(--space-8);
line-height: 1.6;
}
.ai-feature-badges {
display: flex;
justify-content: center;
gap: clamp(0.75rem, 2vw, 1rem);
flex-wrap: wrap;
margin-top: var(--space-6);
}
.ai-badge {
background: rgba(255, 255, 255, 0.1);
border: 0.0625rem solid rgba(255, 255, 255, 0.2);
color: var(--white);
padding: clamp(0.375rem, 1.2vw, 0.5rem) clamp(0.75rem, 2.4vw, 1rem);
border-radius: var(--radius-full);
font-size: clamp(0.8rem, 1.2vw, 0.9rem);
font-weight: 600;
backdrop-filter: blur(0.625rem);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.ai-badge::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
transition: left 0.8s;
}
.ai-badge:hover {
background: rgba(255, 255, 255, 0.15);
border-color: rgba(255, 255, 255, 0.3);
transform: translateY(-2px);
}
.ai-badge:hover::before {
left: 100%;
}
.ai-form-container {
position: relative;
z-index: 2;
max-width: min(48rem, 85vw);
margin: 0 auto;
background: rgba(255, 255, 255, 0.02);
border: 0.0625rem solid rgba(255, 255, 255, 0.1);
border-radius: clamp(1.25rem, 3vw, 2rem);
padding: clamp(1.5rem, 5vw, 2.5rem);
backdrop-filter: blur(1.25rem);
box-shadow:
0 0.5rem 2rem rgba(0, 0, 0, 0.3),
inset 0 0.0625rem 0 rgba(255, 255, 255, 0.1);
}
.ai-form-title {
font-size: clamp(1.5rem, 3vw, 2rem);
font-weight: 700;
color: var(--white);
margin-bottom: clamp(1.5rem, 4vw, 2rem);
text-align: center;
position: relative;
}
.ai-form-title::after {
content: '';
position: absolute;
bottom: -8px;
left: 50%;
transform: translateX(-50%);
width: 3.75rem;
height: 0.1875rem;
background: linear-gradient(90deg, #60a5fa, #a78bfa);
border-radius: 0.125rem;
}
.ai-form-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr));
gap: clamp(1rem, 3vw, 1.5rem);
margin-bottom: clamp(1rem, 4vw, 1.5rem);
}
.ai-form-group {
position: relative;
}
.ai-form-label {
display: block;
font-weight: 600;
color: rgba(255, 255, 255, 0.9);
margin-bottom: clamp(0.375rem, 1.2vw, 0.5rem);
font-size: clamp(0.9rem, 1.3vw, 1rem);
}
.ai-form-input,
.ai-form-select,
.ai-form-textarea {
width: 100%;
padding: clamp(0.75rem, 2vw, 1rem);
background: rgba(255, 255, 255, 0.05);
border: 0.125rem solid rgba(255, 255, 255, 0.1);
border-radius: clamp(0.75rem, 2vw, 1rem);
color: var(--white);
font-size: 1rem !important;
transition: all 0.3s ease;
backdrop-filter: blur(0.625rem);
}
@media (min-width: 48rem) {
.ai-form-input,
.ai-form-select,
.ai-form-textarea {
font-size: clamp(0.9rem, 1.3vw, 1rem) !important;
}
}
.ai-form-input::placeholder,
.ai-form-textarea::placeholder {
color: rgba(255, 255, 255, 0.4);
}
.ai-form-input:focus,
.ai-form-select:focus,
.ai-form-textarea:focus {
outline: none;
border-color: #60a5fa;
background: rgba(255, 255, 255, 0.08);
box-shadow: 0 0 0 0.25rem rgba(96, 165, 250, 0.1);
}
.ai-form-select,
.ai-tool-page select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: rgba(255, 255, 255, 0.1) !important;
color: white !important;
border: 0.125rem solid rgba(255, 255, 255, 0.2) !important;
cursor: pointer;
background-image: url('data:image/svg+xml;charset=US-ASCII,');
background-repeat: no-repeat;
background-position: right 1rem center;
background-size: 0.75rem;
padding-right: var(--space-xl);
}
.ai-form-select option,
.ai-tool-page select option {
background-color: #374151 !important;
color: white !important;
padding: var(--space-xs) !important;
}
.ai-form-select option:hover,
.ai-form-select option:focus,
.ai-form-select option:checked,
.ai-tool-page select option:hover,
.ai-tool-page select option:focus,
.ai-tool-page select option:checked {
background-color: #6366f1 !important;
color: white !important;
}
@-moz-document url-prefix() {
.ai-form-select,
.ai-tool-page select {
background-color: #374151 !important;
color: white !important;
}
}
.ai-checkbox-box{
width:1.25rem;height:1.25rem;border-radius:.25rem;
background: rgba(255,255,255,0.1);
border: .125rem solid rgba(255,255,255,0.3);
position:relative;display:inline-block;flex:0 0 auto;
}
.ai-checkbox:checked + .ai-checkbox-box{
background: linear-gradient(135deg,#60a5fa,#a78bfa);
border-color:#60a5fa;
}
.ai-checkbox-box::after{
content:"";
position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
width:14px;height:14px;display:none;background-repeat:no-repeat;background-size:contain;background-position:center;
background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M5 12.5l4.5 4.5L19 7.5%27 fill=%27none%27 stroke=%27white%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E");
}
.ai-checkbox:checked + .ai-checkbox-box::after{display:block;}
.ai-checkbox-group {
display: flex;
flex-wrap: wrap;
gap: clamp(0.75rem, 3vw, 1rem);
margin: clamp(1rem, 4vw, 1.5rem) 0;
}
.ai-checkbox-item {
display: flex;
align-items: center;
gap: clamp(0.375rem, 1.2vw, 0.5rem);
cursor: pointer;
padding: clamp(0.375rem, 1.2vw, 0.5rem) clamp(0.75rem, 2vw, 1rem);
background: rgba(255, 255, 255, 0.03);
border: 0.0625rem solid rgba(255, 255, 255, 0.1);
border-radius: clamp(0.5rem, 1.5vw, 0.75rem);
transition: all 0.3s ease;
}
.ai-checkbox-item:hover {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.2);
}
.ai-checkbox{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none;}
.ai-checkbox:checked {
background: linear-gradient(135deg, #60a5fa, #a78bfa);
border-color: #60a5fa;
}
.ai-checkbox-label {
color: rgba(255, 255, 255, 0.8);
font-weight: 500;
cursor: pointer;
}
.ai-generate-btn {
background: linear-gradient(135deg, #60a5fa, #a78bfa, #f472b6);
color: var(--white);
border: none;
padding: clamp(0.75rem, 2.5vw, 1rem) clamp(1.5rem, 5vw, 2.5rem);
border-radius: clamp(0.75rem, 2vw, 1rem);
font-size: clamp(1rem, 1.5vw, 1.2rem);
font-weight: 700;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
min-width: 12.5rem;
box-shadow: 0 0.5rem 2rem rgba(96, 165, 250, 0.3);
}
.ai-generate-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.6s;
}
.ai-generate-btn:hover {
transform: translateY(-2px);
box-shadow: 0 0.75rem 2.5rem rgba(96, 165, 250, 0.4);
}
.ai-generate-btn:hover::before {
left: 100%;
}
.ai-generate-btn:disabled {
opacity: 0.7;
cursor: not-allowed;
transform: none;
}
@media (max-width: 48rem) {
.ai-form-grid { grid-template-columns: 1fr; }
.ai-form-input,
.ai-form-select,
.ai-form-textarea {
font-size: 16px !important;
}
.ai-generate-btn {
width: 100%;
max-width: none;
}
}
.ai-results-section {
position: relative;
z-index: 2;
margin-top: clamp(3rem, 8vw, 4rem);
padding: clamp(2.5rem, 6vw, 3rem) 0;
}
.ai-results-header {
text-align: center;
margin-bottom: clamp(2.5rem, 6vw, 3rem);
}
.ai-results-title {
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 800;
background: linear-gradient(135deg, #60a5fa, #a78bfa);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: var(--space-4);
}
.ai-results-subtitle {
color: rgba(255, 255, 255, 0.7);
font-size: clamp(1rem, 1.5vw, 1.2rem);
}
.ai-results-controls {
display: flex;
justify-content: center;
gap: clamp(0.75rem, 2vw, 1rem);
margin-bottom: clamp(1.5rem, 5vw, 2rem);
flex-wrap: wrap;
}
.ai-control-btn {
background: rgba(255, 255, 255, 0.1);
border: 0.0625rem solid rgba(255, 255, 255, 0.2);
color: var(--white);
padding: clamp(0.625rem, 1.5vw, 0.75rem) clamp(0.75rem, 2.5vw, 1rem);
border-radius: clamp(0.5rem, 1.5vw, 0.75rem);
font-size: clamp(0.8rem, 1.2vw, 0.9rem);
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
backdrop-filter: blur(0.625rem);
}
.ai-control-btn:hover {
background: rgba(255, 255, 255, 0.15);
transform: translateY(-1px);
}
.ai-results-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(clamp(18.75rem, 40vw, 25rem), 1fr));
gap: clamp(1.25rem, 3vw, 1.5rem);
max-width: min(68rem, 85vw);
margin: 0 auto;
}
.ai-result-card {
background: rgba(255, 255, 255, 0.03);
border: 0.0625rem solid rgba(255, 255, 255, 0.1);
border-radius: clamp(1rem, 2.5vw, 1.25rem);
padding: clamp(1.25rem, 3vw, 1.5rem);
backdrop-filter: blur(0.9375rem);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.ai-result-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 0.125rem;
background: linear-gradient(90deg, #60a5fa, #a78bfa, #f472b6);
transform: scaleX(0);
transition: transform 0.3s ease;
}
.ai-result-card:hover {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.2);
transform: translateY(-4px);
}
.ai-result-card:hover::before {
transform: scaleX(1);
}
.ai-result-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: clamp(0.75rem, 2.5vw, 1rem);
}
.ai-result-title {
font-size: clamp(1.1rem, 1.6vw, 1.3rem);
font-weight: 700;
color: var(--white);
margin: 0;
}
.ai-result-actions {
display: flex;
gap: clamp(0.375rem, 1.2vw, 0.5rem);
align-items: center;
}
.ai-copy-btn {
background: rgba(96, 165, 250, 0.2);
border: 0.0625rem solid rgba(96, 165, 250, 0.3);
color: #60a5fa;
padding: clamp(0.375rem, 1vw, 0.5rem) clamp(0.75rem, 2vw, 1rem);
border-radius: clamp(0.375rem, 1vw, 0.5rem);
font-size: clamp(0.75rem, 1.1vw, 0.85rem);
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.ai-copy-btn:hover {
background: rgba(96, 165, 250, 0.3);
color: var(--white);
}
.ai-copy-btn.copied {
background: rgba(34, 197, 94, 0.2);
border-color: rgba(34, 197, 94, 0.3);
color: #22c55e;
}
.ai-result-content {
background: rgba(0, 0, 0, 0.2);
padding: clamp(0.75rem, 2.5vw, 1rem);
border-radius: clamp(0.625rem, 1.5vw, 0.75rem);
border-left: 0.1875rem solid #60a5fa;
font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
font-size: clamp(0.9rem, 1.3vw, 1rem);
line-height: 1.6;
color: rgba(255, 255, 255, 0.9);
white-space: pre-wrap;
word-break: break-word;
}
.ai-result-meta {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: clamp(0.75rem, 2vw, 1rem);
font-size: clamp(0.8rem, 1.1vw, 0.9rem);
color: rgba(255, 255, 255, 0.6);
}
.ai-char-count {
font-weight: 500;
}
.ai-char-count.over-limit {
color: #f87171;
}
.ai-quality-badge {
background: rgba(34, 197, 94, 0.2);
color: #22c55e;
padding: 0.25rem 0.5rem;
border-radius: 0.25rem;
font-size: clamp(0.7rem, 1vw, 0.8rem);
font-weight: 600;
}
.ai-share-section {
text-align: center;
margin: clamp(3rem, 8vw, 4rem) 0 clamp(2.5rem, 6vw, 3rem);
position: relative;
z-index: 2;
}
.ai-share-title {
font-size: clamp(1.3rem, 2vw, 1.6rem);
font-weight: 700;
color: var(--white);
margin-bottom: clamp(1rem, 3vw, 1.5rem);
}
.share-icons {
display: flex;
justify-content: center;
gap: clamp(0.75rem, 2vw, 1rem);
flex-wrap: wrap;
}
.share-ico {
width: clamp(2.75rem, 6vw, 3.25rem);
height: clamp(2.75rem, 6vw, 3.25rem);
background: rgba(255, 255, 255, 0.05);
border: 0.0625rem solid rgba(255, 255, 255, 0.1);
border-radius: clamp(0.625rem, 1.5vw, 0.75rem);
display: flex;
align-items: center;
justify-content: center;
color: rgba(255, 255, 255, 0.7);
text-decoration: none;
transition: all 0.3s ease;
backdrop-filter: blur(0.625rem);
}
.share-ico:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.2);
color: var(--white);
transform: translateY(-2px);
}
.share-ico svg {
width: clamp(1.125rem, 2.5vw, 1.375rem);
height: clamp(1.125rem, 2.5vw, 1.375rem);
fill: currentColor;
}
.ai-tools-section {
background: rgba(255, 255, 255, 0.02);
border: 0.0625rem solid rgba(255, 255, 255, 0.05);
border-radius: clamp(1.25rem, 3vw, 2rem);
padding: clamp(2.5rem, 6vw, 3rem) clamp(1.5rem, 4vw, 2rem);
margin: clamp(2.5rem, 6vw, 3rem) auto;
max-width: min(48rem, 85vw);
backdrop-filter: blur(0.9375rem);
position: relative;
z-index: 2;
}
.ai-tools-title {
font-size: clamp(1.8rem, 3.5vw, 2.4rem);
font-weight: 800;
background: linear-gradient(135deg, #a78bfa, #f472b6);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-align: center;
margin-bottom: clamp(1.5rem, 5vw, 2rem);
}
.ai-tools-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
max-width: 68rem;
margin: 0 auto;
}
.ai-tool-card {
background: rgba(255, 255, 255, 0.03);
border: 0.0625rem solid rgba(255, 255, 255, 0.08);
border-radius: clamp(1rem, 2.5vw, 1.25rem);
padding: clamp(1.5rem, 4vw, 2rem);
text-decoration: none;
display: block;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.ai-tool-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 0.1875rem;
background: linear-gradient(90deg, #a78bfa, #f472b6);
transform: scaleX(0);
transition: transform 0.3s ease;
}
.ai-tool-card:hover {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.15);
transform: translateY(-6px);
}
.ai-tool-card:hover::before {
transform: scaleX(1);
}
.ai-tool-icon {
font-size: clamp(2.5rem, 4vw, 3rem);
margin-bottom: clamp(0.75rem, 2.5vw, 1rem);
display: block;
}
.ai-tool-name {
font-size: clamp(1.2rem, 2vw, 1.4rem);
font-weight: 700;
color: var(--white);
margin-bottom: clamp(0.375rem, 1.2vw, 0.5rem);
}
.ai-tool-desc {
color: rgba(255, 255, 255, 0.7);
line-height: 1.5;
font-size: clamp(0.9rem, 1.3vw, 1rem);
margin-bottom: clamp(0.75rem, 2.5vw, 1rem);
}
.ai-tool-arrow {
color: #a78bfa;
font-weight: 600;
font-size: clamp(0.85rem, 1.2vw, 0.95rem);
display: flex;
align-items: center;
gap: clamp(0.25rem, 0.8vw, 0.375rem);
transition: all 0.3s ease;
}
.ai-tool-card:hover .ai-tool-arrow {
color: #f472b6;
transform: translateX(0.25rem);
}
.ai-benefits-section {
background: rgba(255, 255, 255, 0.02);
border: 0.0625rem solid rgba(255, 255, 255, 0.05);
border-radius: clamp(1.25rem, 3vw, 2rem);
padding: clamp(2.5rem, 6vw, 3rem) clamp(1.5rem, 4vw, 2rem);
margin: clamp(3rem, 8vw, 4rem) auto;
max-width: min(48rem, 85vw);
backdrop-filter: blur(0.9375rem);
position: relative;
z-index: 2;
}
.ai-benefits-title {
font-size: clamp(1.8rem, 3.5vw, 2.4rem);
font-weight: 800;
background: linear-gradient(135deg, #60a5fa, #a78bfa);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-align: center;
margin-bottom: clamp(1.5rem, 5vw, 2rem);
}
.ai-benefits-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(clamp(15.625rem, 30vw, 17.5rem), 1fr));
gap: clamp(1.25rem, 4vw, 1.5rem);
margin-bottom: clamp(1.5rem, 5vw, 2rem);
}
.ai-benefit-item {
text-align: center;
padding: clamp(1.25rem, 3vw, 1.5rem);
background: rgba(255, 255, 255, 0.03);
border: 0.0625rem solid rgba(255, 255, 255, 0.08);
border-radius: clamp(0.75rem, 2vw, 1rem);
transition: all 0.3s ease;
}
.ai-benefit-item:hover {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.15);
transform: translateY(-4px);
}
.ai-benefit-icon {
font-size: clamp(2.5rem, 4vw, 3rem);
margin-bottom: clamp(0.75rem, 2.5vw, 1rem);
display: block;
}
.ai-benefit-title {
font-size: clamp(1.1rem, 1.8vw, 1.3rem);
font-weight: 700;
color: var(--white);
margin-bottom: clamp(0.375rem, 1.2vw, 0.5rem);
}
.ai-benefit-desc {
color: rgba(255, 255, 255, 0.8);
line-height: 1.5;
font-size: clamp(0.9rem, 1.3vw, 1rem);
}
.ai-cta-section {
text-align: center;
padding-top: clamp(1rem, 4vw, 1.5rem);
border-top: 0.0625rem solid rgba(255, 255, 255, 0.1);
}
.ai-cta-text {
color: rgba(255, 255, 255, 0.9);
font-size: clamp(1rem, 1.5vw, 1.2rem);
margin-bottom: clamp(0.75rem, 2.5vw, 1rem);
}
.ai-cta-link {
color: #60a5fa;
font-weight: 700;
text-decoration: none;
padding: clamp(0.375rem, 0.5vw, 0.5rem) clamp(0.5rem, 1.2vw, 0.75rem);
border-radius: clamp(0.25rem, 0.8vw, 0.375rem);
transition: all 0.3s ease;
background: rgba(96, 165, 250, 0.1);
}
.ai-cta-link:hover {
background: rgba(96, 165, 250, 0.2);
transform: translateY(-1px);
}
@media (max-width: 48rem) {
.ai-form-grid { grid-template-columns: 1fr; }
.ai-results-grid { grid-template-columns: 1fr; }
}
/* =================================== */
/* 18. TOOLS PAGE */
/* =================================== */
.tools-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
gap: clamp(1.25rem, 3.3vw, 1.5rem);
margin-bottom: clamp(2.5rem, 6.6vw, 3rem);
max-width: 68rem;
margin-left: auto;
margin-right: auto;
}
.tool-card {
background: var(--white);
border: 0.0625rem solid var(--gray-200);
border-radius: var(--radius-xl);
padding: clamp(1.5rem, 3.3vw, 2rem);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
height: 100%;
display: flex;
flex-direction: column;
box-shadow: var(--shadow-sm);
}
.tool-card::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.03), transparent);
transition: left 0.6s;
}
.tool-card:hover::before {
left: 100%;
}
.tool-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
border-color: var(--primary-500);
}
.tool-icon {
width: 3.3125rem;
height: 3.3125rem;
background: var(--primary-gradient);
border-radius: var(--radius-lg);
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
margin-bottom: clamp(0.75rem, 2.4vw, 1rem);
box-shadow: 0 0.25rem 0.75rem rgba(99, 102, 241, 0.25);
transition: var(--transition);
flex-shrink: 0;
}
.tool-card:hover .tool-icon {
transform: translateY(-1px) scale(1.02);
}
.tool-icon svg {
width: 1.375rem;
height: 1.375rem;
}
.tool-card h3 {
font-size: clamp(1.1rem, 1.65vw, 1.24rem);
font-weight: 700;
color: var(--gray-900);
margin-bottom: clamp(0.75rem, 2vw, 1rem);
line-height: 1.3;
}
.tool-card p {
color: var(--gray-600);
line-height: 1.5;
margin-bottom: clamp(1rem, 2.7vw, 1.5rem);
font-size: clamp(0.88rem, 1.32vw, 0.97rem);
flex-grow: 1;
}
.tool-features {
list-style: none;
margin-bottom: clamp(1rem, 3.3vw, 1.5rem);
padding: 0;
}
.tool-features li {
display: flex;
align-items: center;
gap: clamp(0.75rem, 1.35vw, 1rem);
padding: clamp(0.375rem, 0.75vw, 0.5rem) 0;
color: var(--gray-600);
font-weight: 500;
font-size: clamp(0.8rem, 1.2vw, 0.88rem);
}
.tool-features .check-icon {
width: 1.125rem;
height: 1.125rem;
background: var(--primary-600);
color: var(--white);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 68.75%;
font-weight: 700;
flex-shrink: 0;
}
.tool-card .btn {
margin-top: auto;
padding: clamp(0.625rem, 1.35vw, 0.75rem) clamp(1rem, 2.2vw, 1.25rem);
font-size: clamp(0.88rem, 1.32vw, 0.97rem);
font-weight: 600;
}
.use-cases-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(2.5rem, 5.5vw, 3rem);
align-items: start;
max-width: 62rem;
margin: 0 auto;
}
.use-cases-list {
list-style: none;
padding: 0;
margin: 0;
}
.use-cases-list li {
display: flex;
align-items: flex-start;
gap: clamp(0.75rem, 2vw, 1rem);
margin-bottom: clamp(1rem, 2.75vw, 1.5rem);
padding: clamp(0.75rem, 2.2vw, 1rem);
background: var(--gray-50);
border-radius: var(--radius-md);
transition: var(--transition);
font-size: clamp(0.88rem, 1.32vw, 0.97rem);
}
.use-cases-list li:hover {
background: var(--white);
box-shadow: var(--shadow-sm);
}
.use-cases-list .check-icon {
width: 1.4rem;
height: 1.4rem;
border-radius: 50%;
background: var(--primary-100);
border: 2px solid var(--primary-300);
color: var(--primary-700);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 0.85rem;
font-weight: 700;
}
.use-cases-list strong {
color: var(--gray-900);
font-weight: 700;
}
@media (max-width: 64rem) {
.tools-page .tools-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 48rem) {
.tools-grid {
grid-template-columns: 1fr !important;
gap: clamp(1rem, 4vw, 1.5rem) !important;
}
.tool-card {
padding: clamp(1.25rem, 4.5vw, 1.5rem);
}
.tool-card .btn {
white-space: normal !important;
overflow: visible !important;
line-height: 1.3;
width: 100%;
}
.tool-features li {
display: flex;
align-items: flex-start;
gap: 0.5rem;
}
.use-cases-grid { grid-template-columns: 1fr; }
}
/* =================================== */
/* 19. BLOG & ARTICLES */
/* =================================== */
#breadcrumb ol,
#breadcrumb ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
gap: var(--space-2xs);
justify-content: center;
flex-wrap: wrap;
}
#breadcrumb li {
display: inline-flex;
align-items: center;
color: var(--gray-500);
}
#breadcrumb li+li::before {
content: "›";
margin: 0 var(--space-2xs);
color: var(--gray-400);
}
#breadcrumb a {
color: var(--gray-600);
text-decoration: none;
}
#breadcrumb a:hover {
text-decoration: underline;
}
.blog-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
gap: clamp(1.25rem, 4vw, 1.5rem);
margin-bottom: clamp(2.5rem, 6vw, 3rem);
max-width: 68rem;
margin-left: auto;
margin-right: auto;
}
.blog-card {
background: var(--white);
border-radius: var(--radius-2xl);
overflow: hidden;
box-shadow: var(--shadow-md);
transition: all 0.3s ease;
border: 0.0625rem solid var(--gray-200);
height: 100%;
display: flex;
flex-direction: column;
}
.blog-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-xl);
border-color: var(--primary-300);
}
.blog-card-image {
height: 12.5rem;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
font-size: 375%;
}
.blog-card-content {
padding: var(--space-6);
flex: 1;
display: flex;
flex-direction: column;
}
.blog-card-meta {
display: flex;
gap: var(--space-3);
margin-bottom: var(--space-3);
font-size: 0.875rem;
color: var(--gray-500);
flex-wrap: wrap;
}
.blog-card-title {
font-size: 1.1875rem;
font-weight: 700;
color: var(--gray-900);
margin-bottom: var(--space-3);
line-height: 1.4;
}
.blog-card-excerpt {
color: var(--gray-600);
line-height: 1.5;
margin-bottom: var(--space-4);
font-size: 0.875rem;
flex: 1;
}
.blog-card-link {
color: var(--primary-600);
font-weight: 600;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: var(--space-2);
transition: all 0.3s ease;
}
.blog-card-link:hover {
color: var(--primary-700);
transform: translateX(0.25rem);
}
.article-header {
text-align: center;
margin-bottom: clamp(1.5rem, 4.8vw, 2rem);
padding-top: clamp(1rem, 3.6vw, 1.5rem);
}
.breadcrumb {
margin-bottom: var(--space-6);
font-size: 0.875rem;
color: var(--gray-500);
}
.breadcrumb a {
color: var(--primary-600);
text-decoration: none;
transition: var(--transition);
}
.breadcrumb a:hover {
color: var(--primary-700);
}
.article-title {
font-size: 2.5rem;
font-weight: 800;
color: var(--gray-900);
margin-bottom: var(--space-4);
line-height: 1.2;
}
.article-meta {
font-size: 0.875rem;
color: var(--gray-500);
margin-bottom: clamp(1rem, 3.6vw, 1.5rem);
}
.article-content {
max-width: min(42rem, 85%);
margin: 0 auto;
line-height: 1.8;
font-size: 1.0625rem;
color: var(--gray-700);
}
.article-content h2 {
font-size: 1.375rem;
font-weight: 700;
color: var(--gray-900);
margin: clamp(1.5rem, 4.8vw, 2rem) 0 var(--space-4);
border-left: 0.25rem solid var(--primary-600);
padding-left: var(--space-4);
}
.article-content h3 {
font-size: 1.1875rem;
font-weight: 600;
color: var(--gray-800);
margin: clamp(1rem, 3.6vw, 1.5rem) 0 var(--space-3);
}
.article-content p {
margin-bottom: var(--space-6);
}
.article-content ul,
.article-content ol {
margin-bottom: var(--space-6);
padding-left: clamp(1rem,3vw, 1.5rem);
}
.article-content li {
margin-bottom: var(--space-2);
color: var(--gray-700);
}
.article-content a {
color: var(--primary-600);
font-weight: 600;
text-decoration: none;
border-bottom: 0.125rem solid transparent;
transition: var(--transition);
}
.article-content a:hover {
border-bottom-color: var(--primary-600);
}
.article-content strong {
font-weight: 700;
color: var(--gray-900);
}
.article-footer {
margin-top: clamp(2.5rem, 7.2vw, 3rem);
padding-top: clamp(1.5rem, 3.6vw, 2rem);
border-top: 0.0625rem solid var(--gray-200);
}
.article-tags,
.post-tags {
max-width: 51.25rem;
margin: 0 auto clamp(0.75rem, 1.6vw, 1rem);
display: flex;
flex-wrap: wrap;
gap: clamp(0.375rem, 1vw, 0.5rem);
justify-content: center;
}
.tag {
background: var(--primary-100);
color: var(--primary-700);
padding: var(--space-1) var(--space-3);
border-radius: var(--radius-full);
font-size: 0.875rem;
font-weight: 500;
}
.article-cta,
.post-cta,
.read-more-cta {
margin-top: clamp(1rem, 3.2vw, 1.5rem);
margin-bottom: clamp(1.5rem, 3.6vw, 2rem);
padding: clamp(1.5rem, 3vw, 2rem);
border-radius: 0.875rem;
border: 0.0625rem solid var(--gray-200);
background: var(--white);
box-shadow: 0 0.375rem 1.125rem rgba(17, 24, 39, .06);
max-width: 51.25rem;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.article-cta .cta-meta,
.post-cta .cta-meta,
.read-more-cta .cta-meta,
.article-cta small,
.post-cta small,
.article-cta .subtext,
.post-cta .subtext {
display: block;
margin-top: clamp(0.375rem, 1.2vw, 0.5rem);
color: var(--primary-600);
}
.article-cta h3 {
font-size: 1.375rem;
font-weight: 700;
color: var(--gray-900);
margin-bottom: var(--space-3);
}
.article-cta p {
color: var(--gray-600);
margin-bottom: var(--space-6);
}
.related-articles {
background: var(--gray-50);
}
.related-article-card {
background: var(--white);
border-radius: var(--radius-xl);
padding: clamp(1rem, 3vw, 1.5rem);
box-shadow: var(--shadow-md);
transition: var(--transition);
border: 0.0625rem solid var(--gray-200);
}
.related-article-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
}
@media (max-width: 48rem) {
.blog-grid {
grid-template-columns: 1fr;
gap: clamp(1rem, 3vw, 1.25rem);
}
.blog-card-image {
height: 10rem;
font-size: 300%;
}
.blog-card-content {
padding: clamp(1rem, 4vw, 1.5rem);
}
}
@media (max-width: 30rem) {
.blog-card-meta {
flex-direction: column;
gap: var(--space-1);
}
.blog-card-title {
font-size: 1.0625rem;
}
.blog-card-image {
height: 8.75rem;
font-size: 250%;
}
.article-content {
font-size: 0.9375rem;
padding: 0 clamp(0.25rem, 1.2vw, 0.75rem);
}
.article-content h2 {
font-size: 1.1875rem;
padding-left: clamp(0.5rem, 1vw, 0.75rem);
border-left-width: 0.125rem;
}
.article-content h3 {
font-size: 1.0625rem;
}
.article-content ul,
.article-content ol {
padding-left: clamp(0.75rem, 2vw, 1rem);
}
.article-cta {
margin: 0 clamp(0.25rem, 1.2vw, 0.75rem);
padding: clamp(1rem, 2.4vw, 1.5rem);
}
.article-cta h3 {
font-size: 1.1875rem;
}
}
/* =================================== */
/* 20. NEWSLETTER SIGNUP */
/* =================================== */
.newsletter-form {
display: flex;
gap: var(--space-4);
max-width: 31.25rem;
margin: 0 auto;
flex-wrap: wrap;
}
.newsletter-input {
flex: 1;
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-lg);
border: 0.125rem solid rgba(255, 255, 255, 0.2);
background: rgba(255, 255, 255, 0.1);
font-size: 0.9375rem;
color: white;
min-width: 15.625rem;
backdrop-filter: blur(0.625rem);
transition: all 0.3s ease;
}
.newsletter-input::placeholder {
color: rgba(255, 255, 255, 0.7);
}
.newsletter-input:focus {
outline: none;
border-color: rgba(255, 255, 255, 0.5);
background: rgba(255, 255, 255, 0.15);
}
.newsletter-submit {
background: var(--white);
color: var(--primary-600);
border: none;
padding: var(--space-3) var(--space-6);
border-radius: var(--radius-lg);
font-weight: 700;
font-size: 0.9375rem;
cursor: pointer;
transition: all 0.3s ease;
white-space: nowrap;
box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
}
.newsletter-submit:hover {
background: rgba(255, 255, 255, 0.95);
transform: translateY(-2px);
box-shadow: 0 0.375rem 1rem rgba(0, 0, 0, 0.2);
}
.newsletter-submit:disabled {
opacity: 0.7;
cursor: not-allowed;
transform: none;
}
.newsletter-message {
margin-top: var(--space-4);
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-lg);
font-weight: 600;
text-align: center;
opacity: 0;
transition: all 0.3s ease;
}
.newsletter-message.show {
opacity: 1;
}
.newsletter-message.success {
background: rgba(16, 185, 129, 0.2);
border: 0.0625rem solid rgba(16, 185, 129, 0.3);
color: #10b981;
}
.newsletter-message.error {
background: rgba(239, 68, 68, 0.2);
border: 0.0625rem solid rgba(239, 68, 68, 0.3);
color: #ef4444;
}
@media (max-width: 48rem) {
.newsletter-form {
flex-direction: column;
align-items: center;
}
.newsletter-input {
width: 100%;
min-width: auto;
font-size: 16px;
}
.newsletter-submit {
width: 100%;
max-width: 12.5rem;
}
}
/* =================================== */
/* 21. ANIMATIONS & KEYFRAMES */
/* =================================== */
@keyframes float-clean {
0%, 100% {
transform: translate(0, 0) rotate(0deg) scale(1);
opacity: 0.08;
}
50% {
transform: translate(0.9375rem, -25px) rotate(-5deg) scale(1.1);
opacity: 0.12;
}
}
@keyframes pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
@keyframes ai-pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
.ai-loading {
animation: ai-pulse 1.5s infinite;
}
@keyframes float-ai {
0%, 100% {
transform: translate(0, 0) rotate(0deg);
opacity: 0.1;
}
50% {
transform: translate(1.25rem, -30px) rotate(180deg);
opacity: 0.3;
}
}
.ai-particle {
position: absolute;
width: 0.25rem;
height: 0.25rem;
background: linear-gradient(45deg, #60a5fa, #a78bfa);
border-radius: 50%;
animation: float-ai 8s infinite ease-in-out;
}
.ai-particle:nth-child(1) {
top: 20%;
left: 20%;
animation-delay: 0s;
}
.ai-particle:nth-child(2) {
top: 50%;
left: 80%;
animation-delay: 2s;
}
.ai-particle:nth-child(3) {
top: 80%;
left: 30%;
animation-delay: 4s;
}
.ai-particle:nth-child(4) {
top: 30%;
left: 70%;
animation-delay: 6s;
}
/* =================================== */
/* 22. MOBILE RESPONSIVE */
/* =================================== */
@media (max-width: 48rem) {
.desktop-only { display: none !important; }
.nav-cta-mobile { display: block; margin-top: var(--space-4); }
.ai-tools-grid {
grid-template-columns: 1fr;
}
}
/* Timeline Responsive Styles */
.timeline-desktop {
display: block;
}
.timeline-mobile {
display: none !important;
}
@media (max-width: 48rem) {
.timeline-desktop {
display: none !important;
}
.timeline-mobile {
display: block !important;
}
/* Adjust mobile timeline spacing */
.timeline-mobile > div > div {
gap: clamp(1.5rem, 4vw, 2rem) !important;
}
/* Make numbered circles smaller on mobile */
.timeline-mobile [style*="width: 60px"] {
width: 48px !important;
height: 48px !important;
font-size: 1.125rem !important;
}
/* Adjust vertical line position */
.timeline-mobile [style*="left: 30px"] {
left: 24px !important;
}
/* Better padding for cards */
.timeline-mobile [style*="padding: var(--space-5)"] {
padding: 1rem !important;
}
}
@media (max-width: 30rem) {
.timeline-mobile [style*="width: 60px"] {
width: 40px !important;
height: 40px !important;
font-size: 1rem !important;
}
.timeline-mobile [style*="left: 30px"],
.timeline-mobile [style*="left: 24px"] {
left: 20px !important;
}
.timeline-mobile [style*="gap: var(--space-4)"] {
gap: 0.75rem !important;
}
}
/* =================================== */
/* 23. PERFORMANCE & ACCESSIBILITY */
/* =================================== */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.hero-floating-icons .floating-icon svg {
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
}
.logo {
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
}
}
*:focus-visible {
outline: 3px solid var(--primary-600);
outline-offset: 2px;
}
/* =================================== */
/* 24. PRINT STYLES */
/* =================================== */
@media print {
.header,
.nav-toggle,
.hero-floating-icons,
.footer,
.btn,
.floating-element {
display: none !important;
}
.main {
margin-top: 0 !important;
}
.article-content,
.section {
padding: 0 !important;
margin: 0 !important;
}
.article-content {
font-size: 12pt !important;
line-height: 1.4 !important;
color: #000 !important;
}
.article-content h2,
.article-content h3 {
page-break-after: avoid;
margin-top: 24pt !important;
margin-bottom: 12pt !important;
}
.article-content p {
margin-bottom: 12pt !important;
}
}
/* =================================== */
/* END OF STYLESHEET */
/* =================================== */