Files
seo-services-landing/seo-services-landing.html

1432 lines
54 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<title>SEOIQ — SEO, которое меняет правила</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preload" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;700&display=swap" as="style">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet">
<style>
:root {
--bg: #030014;
--surface: rgba(255,255,255,0.03);
--surface-hover: rgba(255,255,255,0.06);
--text: #f0f0f5;
--text-muted: rgba(240,240,245,0.5);
--accent: #8b5cf6;
--accent-2: #06b6d4;
--green: #10b981;
--pink: #ec4899;
--orange: #f59e0b;
--border: rgba(255,255,255,0.06);
--border-hover: rgba(255,255,255,0.12);
--glow-purple: rgba(139,92,246,0.3);
--glow-cyan: rgba(6,182,212,0.3);
--radius: 16px;
--radius-sm: 10px;
--ease: cubic-bezier(0.16, 1, 0.3, 1);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html {
scroll-behavior: smooth;
scrollbar-width: thin;
scrollbar-color: var(--accent) transparent;
}
body {
font-family: 'Inter', -apple-system, sans-serif;
background: var(--bg);
color: var(--text);
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
overscroll-behavior-y: contain;
}
@supports (padding: max(0px)) {
body {
padding-top: max(0px, env(safe-area-inset-top));
padding-bottom: max(0px, env(safe-area-inset-bottom));
}
.nav {
padding-top: max(0px, env(safe-area-inset-top));
}
.content {
padding-left: max(24px, env(safe-area-inset-left));
padding-right: max(24px, env(safe-area-inset-right));
}
}
/* ── Touch feedback ── */
.btn {
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
}
.btn:active {
transform: scale(0.97);
}
.btn-primary:active {
transform: scale(0.97);
}
.btn-glass:active {
transform: scale(0.97);
}
.price-btn:active {
transform: scale(0.97);
}
/* ── Mobile menu ── */
.mobile-menu-btn {
display: none;
width: 44px;
height: 44px;
padding: 10px;
background: transparent;
border: 1px solid var(--border);
border-radius: 8px;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.mobile-menu-btn span {
display: block;
width: 20px;
height: 2px;
background: var(--text);
margin: 4px auto;
transition: all 0.3s;
}
.mobile-menu {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(3,0,20,0.98);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
z-index: 200;
display: flex;
flex-direction: column;
padding: 80px 24px 40px;
transform: translateX(100%);
transition: transform 0.3s var(--ease);
}
.mobile-menu.open {
transform: translateX(0);
}
.mobile-menu-close {
position: absolute;
top: 20px;
right: 20px;
width: 44px;
height: 44px;
background: transparent;
border: 1px solid var(--border);
border-radius: 8px;
font-size: 24px;
color: var(--text);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.mobile-menu a {
display: flex;
align-items: center;
gap: 12px;
padding: 16px 0;
color: var(--text);
text-decoration: none;
font-size: 18px;
font-weight: 500;
border-bottom: 1px solid var(--border);
min-height: 44px;
}
.mobile-menu a:active {
background: rgba(255,255,255,0.05);
}
/* ── Three.js Canvas ── */
#three-bg {
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
z-index: 0;
pointer-events: none;
}
/* ── Ambient gradient orbs ── */
.ambient {
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
z-index: 1;
pointer-events: none;
overflow: hidden;
}
.ambient-orb {
position: absolute;
border-radius: 50%;
filter: blur(120px);
opacity: 0.4;
will-change: transform;
}
.ambient-orb:nth-child(1) {
width: 600px; height: 600px;
background: radial-gradient(circle, var(--accent), transparent 70%);
top: -20%; left: -10%;
animation: orb-float 20s ease-in-out infinite;
}
.ambient-orb:nth-child(2) {
width: 500px; height: 500px;
background: radial-gradient(circle, var(--accent-2), transparent 70%);
bottom: -10%; right: -5%;
animation: orb-float 25s ease-in-out infinite reverse;
}
.ambient-orb:nth-child(3) {
width: 400px; height: 400px;
background: radial-gradient(circle, var(--pink), transparent 70%);
top: 50%; left: 50%;
transform: translate(-50%, -50%);
animation: orb-float 18s ease-in-out infinite 5s;
}
@keyframes orb-float {
0%, 100% { transform: translate(0, 0) scale(1); }
33% { transform: translate(30px, -40px) scale(1.1); }
66% { transform: translate(-20px, 30px) scale(0.95); }
}
/* ── Noise overlay ── */
.noise {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
z-index: 2;
pointer-events: none;
opacity: 0.03;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
background-size: 256px 256px;
}
/* ── Main content wrapper ── */
.content { position: relative; z-index: 3; }
/* ── Navigation ── */
.nav {
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
padding: 0 clamp(24px, 4vw, 64px);
display: flex; align-items: center; justify-content: space-between;
height: 72px;
transition: all 0.4s var(--ease);
}
.nav.scrolled {
background: rgba(3,0,20,0.85);
backdrop-filter: blur(24px) saturate(1.5);
border-bottom: 1px solid var(--border);
box-shadow: 0 1px 40px rgba(139,92,246,0.08);
}
.nav-logo {
font-size: 18px; font-weight: 900; letter-spacing: -1px;
background: linear-gradient(135deg, #fff, var(--accent-2));
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.nav-links { display: flex; gap: 32px; align-items: center; }
.nav-links a {
color: var(--text-muted); text-decoration: none;
font-size: 14px; font-weight: 500;
transition: color 0.2s;
position: relative;
}
.nav-links a:hover { color: var(--text); }
.nav-cta {
padding: 10px 24px; border-radius: 100px;
background: linear-gradient(135deg, var(--accent), var(--accent-2));
color: #fff !important; font-weight: 600; font-size: 14px;
text-decoration: none;
transition: all 0.3s var(--ease);
box-shadow: 0 2px 20px rgba(139,92,246,0.3);
}
.nav-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(139,92,246,0.5); }
/* ── Hero Section ── */
.hero {
min-height: 100dvh;
display: flex; flex-direction: column;
justify-content: center; align-items: center;
text-align: center;
padding: 120px clamp(24px, 5vw, 80px) 80px;
position: relative;
}
.hero-badge {
display: inline-flex; align-items: center; gap: 10px;
padding: 8px 20px; border-radius: 100px;
background: rgba(139,92,246,0.1);
border: 1px solid rgba(139,92,246,0.2);
font-size: 13px; font-weight: 600; color: var(--accent);
margin-bottom: 32px;
backdrop-filter: blur(10px);
}
.hero-badge .dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--green);
animation: pulse 2s ease-in-out infinite;
box-shadow: 0 0 12px var(--green);
}
@keyframes pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.6; transform: scale(0.8); }
}
.hero-title {
font-size: clamp(52px, 10vw, 112px);
font-weight: 900; letter-spacing: -4px;
line-height: 0.9;
max-width: 1000px;
margin-bottom: 24px;
}
.hero-title .gradient-text {
background: linear-gradient(135deg, var(--accent), var(--accent-2), var(--pink));
background-size: 200% 200%;
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
animation: gradient-shift 4s ease-in-out infinite;
}
@keyframes gradient-shift {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
.hero-sub {
font-size: clamp(16px, 2vw, 20px);
color: var(--text-muted); max-width: 560px;
line-height: 1.7; margin-bottom: 48px;
}
.hero-stats {
display: flex; gap: 48px; flex-wrap: wrap; justify-content: center;
margin-bottom: 48px;
}
.hero-stat {
text-align: center;
}
.hero-stat-value {
font-family: 'JetBrains Mono', monospace;
font-size: clamp(28px, 3vw, 40px);
font-weight: 700; color: var(--text);
}
.hero-stat-value .accent { color: var(--accent); }
.hero-stat-label {
font-size: 13px; color: var(--text-muted); margin-top: 4px;
}
.hero-actions {
display: flex; gap: 16px; flex-wrap: wrap; justify-content: center;
}
.btn {
display: inline-flex; align-items: center; gap: 8px;
padding: 16px 32px; border-radius: 100px;
font-size: 15px; font-weight: 600; cursor: pointer;
text-decoration: none; border: none;
transition: all 0.3s var(--ease);
}
.btn-primary {
background: linear-gradient(135deg, var(--accent), var(--accent-2));
color: #fff;
box-shadow: 0 4px 24px rgba(139,92,246,0.4);
}
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 8px 40px rgba(139,92,246,0.6); }
.btn-glass {
background: rgba(255,255,255,0.05);
border: 1px solid var(--border-hover);
backdrop-filter: blur(12px);
color: var(--text);
}
.btn-glass:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.2); }
.hero-scroll {
position: absolute; bottom: 40px; left: 50%;
transform: translateX(-50%);
display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.hero-scroll span {
font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
color: var(--text-dim, rgba(255,255,255,0.3));
}
.scroll-line {
width: 1px; height: 48px; background: var(--border);
position: relative; overflow: hidden;
}
.scroll-line::after {
content: ''; position: absolute; top: -100%; left: 0;
width: 100%; height: 50%;
background: linear-gradient(180deg, transparent, var(--accent));
animation: scroll-anim 2s ease-in-out infinite;
}
@keyframes scroll-anim {
0% { top: -50%; }
100% { top: 100%; }
}
/* ── Floating elements (3D effect) ── */
.floating-elements {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
pointer-events: none; z-index: 0;
}
.float-el {
position: absolute;
border-radius: var(--radius-sm);
background: var(--surface);
border: 1px solid var(--border);
backdrop-filter: blur(8px);
padding: 12px 16px;
font-family: 'JetBrains Mono', monospace;
font-size: 12px;
animation: float 6s ease-in-out infinite;
}
.float-el:nth-child(1) {
top: 25%; left: 8%;
animation-delay: 0s;
}
.float-el:nth-child(2) {
top: 35%; right: 8%;
animation-delay: 2s;
}
.float-el:nth-child(3) {
bottom: 30%; left: 12%;
animation-delay: 4s;
}
.float-el:nth-child(4) {
bottom: 25%; right: 12%;
animation-delay: 1s;
}
@keyframes float {
0%, 100% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(-20px) rotate(2deg); }
}
.float-value {
color: var(--green); font-weight: 700;
}
.float-label {
color: var(--text-muted); font-size: 10px;
}
/* ── Section base ── */
.section {
padding: clamp(80px, 10vw, 120px) clamp(24px, 4vw, 80px);
max-width: 1400px; margin: 0 auto;
}
.section-label {
font-family: 'JetBrains Mono', monospace;
font-size: 12px; font-weight: 700;
color: var(--accent); letter-spacing: 3px;
text-transform: uppercase; margin-bottom: 16px;
}
.section-title {
font-size: clamp(36px, 5vw, 64px);
font-weight: 800; letter-spacing: -2px;
line-height: 1.05; max-width: 700px;
margin-bottom: 20px;
}
.section-desc {
font-size: 17px; color: var(--text-muted);
max-width: 520px; line-height: 1.7;
margin-bottom: 64px;
}
/* ── Bento grid ── */
.bento-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
gap: 16px;
}
.bento-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 32px;
position: relative;
overflow: hidden;
transition: all 0.4s var(--ease);
}
.bento-card:hover {
border-color: var(--border-hover);
background: var(--surface-hover);
transform: translateY(-4px);
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.bento-card::before {
content: '';
position: absolute; top: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg, transparent, var(--accent), transparent);
opacity: 0;
transition: opacity 0.4s;
}
.bento-card:hover::before { opacity: 1; }
.bento-card.span-2 { grid-column: span 2; }
.bento-icon {
width: 48px; height: 48px; border-radius: 12px;
display: flex; align-items: center; justify-content: center;
font-size: 24px; margin-bottom: 20px;
}
.bento-icon.purple { background: rgba(139,92,246,0.12); }
.bento-icon.cyan { background: rgba(6,182,212,0.12); }
.bento-icon.green { background: rgba(16,185,129,0.12); }
.bento-icon.pink { background: rgba(236,72,153,0.12); }
.bento-icon.orange { background: rgba(245,158,11,0.12); }
.bento-card h3 {
font-size: 20px; font-weight: 700;
letter-spacing: -0.5px; margin-bottom: 8px;
}
.bento-card p {
font-size: 14px; color: var(--text-muted);
line-height: 1.6;
}
.bento-number {
font-family: 'JetBrains Mono', monospace;
font-size: 48px; font-weight: 700;
background: linear-gradient(135deg, var(--accent), var(--accent-2));
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
margin-top: 12px;
}
/* ── Chart demo section ── */
.chart-section {
padding: 80px 0;
}
.chart-container {
max-width: 1400px; margin: 0 auto;
padding: 0 clamp(24px, 4vw, 80px);
}
.chart-wrapper {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 40px;
position: relative;
overflow: hidden;
}
.chart-header {
display: flex; justify-content: space-between; align-items: flex-start;
margin-bottom: 32px;
}
.chart-title {
font-size: 24px; font-weight: 700; letter-spacing: -0.5px;
}
.chart-badge {
padding: 6px 16px; border-radius: 100px;
background: rgba(16,185,129,0.1);
border: 1px solid rgba(16,185,129,0.2);
font-family: 'JetBrains Mono', monospace;
font-size: 13px; font-weight: 600; color: var(--green);
}
.chart-svg {
width: 100%; height: 320px;
}
.chart-grid-line {
stroke: var(--border);
stroke-width: 1;
}
.chart-line {
fill: none;
stroke-width: 3;
stroke-linecap: round;
stroke-linejoin: round;
}
.chart-line.purple { stroke: var(--accent); }
.chart-line.cyan { stroke: var(--accent-2); }
.chart-line.green { stroke: var(--green); }
.chart-area {
opacity: 0.15;
}
.chart-area.purple { fill: var(--accent); }
.chart-area.green { fill: var(--green); }
.chart-dot {
fill: #fff;
stroke-width: 2;
r: 5;
}
.chart-label {
fill: var(--text-muted);
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
}
/* ── Pricing ── */
.pricing-grid {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 24px; align-items: start;
}
.price-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 40px 32px;
position: relative;
transition: all 0.4s var(--ease);
}
.price-card:hover {
border-color: var(--border-hover);
transform: translateY(-8px);
box-shadow: 0 24px 64px rgba(0,0,0,0.4);
}
.price-card.featured {
border-color: var(--accent);
background: linear-gradient(180deg, rgba(139,92,246,0.08), var(--surface) 40%);
}
.price-card.featured::before {
content: '';
position: absolute; top: 0; left: 0; right: 0; height: 2px;
background: linear-gradient(90deg, var(--accent), var(--accent-2));
}
.popular-tag {
position: absolute; top: -1px; left: 32px;
background: linear-gradient(135deg, var(--accent), var(--accent-2));
color: #fff;
font-family: 'JetBrains Mono', monospace;
font-size: 11px; font-weight: 700;
padding: 6px 16px; border-radius: 0 0 8px 8px;
letter-spacing: 1px; text-transform: uppercase;
}
.price-name {
font-family: 'JetBrains Mono', monospace;
font-size: 12px; font-weight: 700;
color: var(--accent); letter-spacing: 2px;
text-transform: uppercase; margin-bottom: 8px;
}
.price-title {
font-size: 24px; font-weight: 700;
letter-spacing: -0.5px; margin-bottom: 8px;
}
.price-desc {
font-size: 14px; color: var(--text-muted);
line-height: 1.5; margin-bottom: 24px;
}
.price-amount {
font-family: 'JetBrains Mono', monospace;
font-size: 40px; font-weight: 700;
letter-spacing: -2px; margin-bottom: 4px;
}
.price-period {
font-size: 13px; color: var(--text-dim, rgba(255,255,255,0.4));
margin-bottom: 28px;
}
.price-features {
list-style: none; margin-bottom: 32px;
}
.price-features li {
font-size: 14px; color: var(--text-muted);
padding: 8px 0;
border-bottom: 1px solid rgba(255,255,255,0.03);
display: flex; align-items: center; gap: 10px;
}
.price-features li::before {
content: '✓';
color: var(--green);
font-weight: 700; font-size: 14px;
flex-shrink: 0;
}
.price-btn {
width: 100%; justify-content: center;
padding: 14px 24px; border-radius: 100px;
font-size: 14px; font-weight: 600; cursor: pointer;
text-decoration: none; border: none;
transition: all 0.3s var(--ease);
display: inline-flex; align-items: center; gap: 8px;
}
.price-btn-primary {
background: linear-gradient(135deg, var(--accent), var(--accent-2));
color: #fff; box-shadow: 0 4px 20px rgba(139,92,246,0.4);
}
.price-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(139,92,246,0.6); }
.price-btn-ghost {
background: transparent; border: 1px solid var(--border-hover);
color: var(--text);
}
.price-btn-ghost:hover { background: rgba(255,255,255,0.05); }
/* ── Process ── */
.process-timeline {
position: relative;
padding-left: 60px;
}
.process-timeline::before {
content: '';
position: absolute; left: 20px; top: 0; bottom: 0;
width: 2px;
background: linear-gradient(180deg, var(--accent), var(--accent-2), var(--green));
border-radius: 100px;
}
.process-step {
position: relative;
padding: 0 0 56px 40px;
}
.process-step:last-child { padding-bottom: 0; }
.process-step::before {
content: '';
position: absolute; left: -30px; top: 6px;
width: 20px; height: 20px; border-radius: 50%;
background: var(--bg);
border: 2px solid var(--accent);
z-index: 1;
}
.process-step.active::before {
background: var(--accent);
box-shadow: 0 0 0 6px rgba(139,92,246,0.2);
}
.process-step-number {
font-family: 'JetBrains Mono', monospace;
font-size: 11px; color: var(--accent);
letter-spacing: 2px; text-transform: uppercase;
margin-bottom: 8px;
}
.process-step h3 {
font-size: 22px; font-weight: 700;
letter-spacing: -0.5px; margin-bottom: 8px;
}
.process-step p {
font-size: 15px; color: var(--text-muted);
line-height: 1.65; max-width: 480px;
}
.process-duration {
display: inline-flex; align-items: center; gap: 6px;
font-family: 'JetBrains Mono', monospace;
font-size: 12px; color: var(--text-dim, rgba(255,255,255,0.4));
margin-top: 12px; padding: 4px 14px;
border: 1px solid var(--border);
border-radius: 100px;
}
/* ── Testimonials ── */
.testimonials-grid {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.testimonial-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 32px;
transition: all 0.4s var(--ease);
}
.testimonial-card:hover {
border-color: var(--border-hover);
transform: translateY(-4px);
}
.testimonial-stars {
font-size: 16px; margin-bottom: 16px;
letter-spacing: 2px;
}
.testimonial-text {
font-size: 15px; color: var(--text);
line-height: 1.65; margin-bottom: 20px;
font-style: italic;
}
.testimonial-author {
display: flex; align-items: center; gap: 12px;
}
.testimonial-avatar {
width: 40px; height: 40px; border-radius: 50%;
background: linear-gradient(135deg, var(--accent), var(--accent-2));
display: flex; align-items: center; justify-content: center;
font-size: 16px; font-weight: 700;
}
.testimonial-name {
font-size: 14px; font-weight: 600;
}
.testimonial-role {
font-size: 12px; color: var(--text-muted);
}
.testimonial-metric {
display: inline-flex; align-items: center; gap: 4px;
font-family: 'JetBrains Mono', monospace;
font-size: 12px; color: var(--green);
margin-top: 8px; padding: 4px 10px;
border-radius: 100px;
background: rgba(16,185,129,0.1);
border: 1px solid rgba(16,185,129,0.15);
}
/* ── CTA ── */
.cta-section {
text-align: center;
padding: clamp(100px, 12vw, 160px) clamp(24px, 4vw, 80px);
position: relative;
}
.cta-section::before {
content: '';
position: absolute; top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 800px; height: 800px;
background: radial-gradient(circle, rgba(139,92,246,0.15), transparent 60%);
pointer-events: none;
}
.cta-title {
font-size: clamp(40px, 6vw, 72px);
font-weight: 900; letter-spacing: -2px;
line-height: 1; margin-bottom: 20px;
}
.cta-desc {
font-size: 18px; color: var(--text-muted);
max-width: 480px; margin: 0 auto 40px;
line-height: 1.6;
}
.cta-actions {
display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;
}
/* ── Footer ── */
footer {
border-top: 1px solid var(--border);
padding: 40px clamp(24px, 4vw, 80px);
display: flex; justify-content: space-between; align-items: center;
font-size: 13px; color: var(--text-dim, rgba(255,255,255,0.4));
}
footer a { color: var(--text-muted); text-decoration: none; transition: color 0.2s; }
footer a:hover { color: var(--text); }
/* ── Sticky CTA (mobile) ── */
.sticky-cta {
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: 12px 16px;
padding-bottom: max(12px, env(safe-area-inset-bottom));
background: rgba(3,0,20,0.95);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-top: 1px solid var(--border);
z-index: 90;
display: none;
flex-direction: column;
gap: 8px;
box-shadow: 0 -4px 12px rgba(0,0,0,0.3);
}
.sticky-cta__btn {
width: 100%;
text-align: center;
padding: 14px 24px;
}
.sticky-cta__hint {
text-align: center;
font-size: 12px;
color: var(--text-muted);
}
/* ── Responsive ── */
@media (max-width: 900px) {
.nav-links { display: none; }
.mobile-menu-btn { display: flex; }
.bento-grid { grid-template-columns: 1fr; }
.bento-card.span-2 { grid-column: span 1; }
.pricing-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
.testimonials-grid { grid-template-columns: 1fr; }
.hero-stats { gap: 32px; }
.float-el { display: none; }
.sticky-cta { display: flex; }
main { padding-bottom: 80px; }
}
@media (max-width: 600px) {
.hero-title { letter-spacing: -2px; }
}
/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.reveal { opacity: 1; transform: none; }
}
</style>
</head>
<body>
<canvas id="three-bg"></canvas>
<div class="ambient">
<div class="ambient-orb"></div>
<div class="ambient-orb"></div>
<div class="ambient-orb"></div>
</div>
<div class="noise"></div>
<div class="content">
<main>
<!-- Nav -->
<nav class="nav" id="nav">
<div class="nav-logo">SEOIQ</div>
<div class="nav-links">
<a href="#approach">Подход</a>
<a href="#results">Результаты</a>
<a href="#pricing">Тарифы</a>
<a href="#process">Процесс</a>
<a href="#contact" class="nav-cta">Обсудить проект →</a>
</div>
<button class="mobile-menu-btn" aria-label="Открыть меню" onclick="document.querySelector('.mobile-menu').classList.add('open'); document.body.style.overflow='hidden'">
<span></span><span></span><span></span>
</button>
</nav>
<!-- Mobile Menu -->
<div class="mobile-menu" id="mobile-menu">
<button class="mobile-menu-close" aria-label="Закрыть меню" onclick="document.querySelector('.mobile-menu').classList.remove('open'); document.body.style.overflow=''">✕</button>
<a href="#approach" onclick="document.querySelector('.mobile-menu').classList.remove('open'); document.body.style.overflow=''">📊 Подход</a>
<a href="#results" onclick="document.querySelector('.mobile-menu').classList.remove('open'); document.body.style.overflow=''">📈 Результаты</a>
<a href="#pricing" onclick="document.querySelector('.mobile-menu').classList.remove('open'); document.body.style.overflow=''">💰 Тарифы</a>
<a href="#process" onclick="document.querySelector('.mobile-menu').classList.remove('open'); document.body.style.overflow=''">⚡ Процесс</a>
<a href="#contact" onclick="document.querySelector('.mobile-menu').classList.remove('open'); document.body.style.overflow=''">📞 Обсудить проект →</a>
</div>
<!-- Hero -->
<section class="hero">
<div class="floating-elements">
<div class="float-el">
<div class="float-value">+247%</div>
<div class="float-label">трафик</div>
</div>
<div class="float-el">
<div class="float-value">+523%</div>
<div class="float-label">лиды</div>
</div>
<div class="float-el">
<div class="float-value">ROI 480%</div>
<div class="float-label">за год</div>
</div>
<div class="float-el">
<div class="float-value">#1-3</div>
<div class="float-label">позиции</div>
</div>
</div>
<div class="hero-badge">
<span class="dot"></span>
Принимаем проекты на Q3 2026
</div>
<h1 class="hero-title">
SEO, которое<br>
<span class="gradient-text">ломает рынок</span>
</h1>
<p class="hero-sub">
Мы не продаём «позиции». Мы продаём трафик, лиды и деньги.
Каждый рубль инвестируется с измеримым ROI.
</p>
<div class="hero-stats">
<div class="hero-stat">
<div class="hero-stat-value"><span class="accent" data-count="150">0</span>+</div>
<div class="hero-stat-label">проектов запущено</div>
</div>
<div class="hero-stat">
<div class="hero-stat-value"><span class="accent" data-count="480">0</span><span class="accent">%</span></div>
<div class="hero-stat-label">средний ROI</div>
</div>
<div class="hero-stat">
<div class="hero-stat-value"><span class="accent" data-count="12">0</span></div>
<div class="hero-stat-label">лет опыта</div>
</div>
<div class="hero-stat">
<div class="hero-stat-value"><span class="accent">24</span>/7</div>
<div class="hero-stat-label">мониторинг</div>
</div>
</div>
<div class="hero-actions">
<a href="#pricing" class="btn btn-primary">Посмотреть тарифы →</a>
<a href="#results" class="btn btn-glass">Кейсы и цифры</a>
</div>
<div class="hero-scroll">
<span>Scroll</span>
<div class="scroll-line"></div>
</div>
</section>
<!-- Bento: Problems -->
<section class="section" id="approach">
<div class="section-label">Почему другие не работают</div>
<h2 class="section-title">87% бюджетов<br>на SEO — <span class="gradient-text">на ветер</span></h2>
<p class="section-desc">Большинство агентств продают иллюзии. Мы показываем реальные цифры.</p>
<div class="bento-grid">
<div class="bento-card span-2">
<div class="bento-icon purple">📉</div>
<h3>Гонка за позициями вместо трафика</h3>
<p>«100 запросов в топе» — но трафик 50 визитов из некоммерческих фраз. Позиции без конверсий — это красивая картинка в отчёте, которая не приносит денег.</p>
<div class="bento-number">50–200K ₽</div>
<p>— теряют в месяц на «SEO» без результата</p>
</div>
<div class="bento-card">
<div class="bento-icon cyan">🤖</div>
<h3>AI-контент без экспертизы</h3>
<p>100 статей в месяц, сгенерированных за 5 минут. Яндекс фильтрует, пользователи уходят через 3 секунды.</p>
<div class="bento-number">0</div>
<p>— конверсий с AI-мусором</p>
</div>
<div class="bento-card">
<div class="bento-icon green">🔗</div>
<h3>Ссылочный спам</h3>
<p>Тысячи ссылок с бирж — некачественных, неавторитетных, из мусорных каталогов. Яндекс распознаёт за пару месяцев.</p>
<div class="bento-number">3–6</div>
<p>— месяцев на перезагрузку</p>
</div>
<div class="bento-card span-2">
<div class="bento-icon pink">📊</div>
<h3>Отчёты без контекста</h3>
<p>«Позиций стало больше» — а заявок нет. Нет сквозной аналитики, нет привязки к CRM, нет понимания, сколько стоит каждый лид. Вы платите за SEO вслепую.</p>
<div class="bento-number">∞</div>
<p>— неопределённость без данных</p>
</div>
</div>
</section>
<!-- Chart Demo -->
<section class="chart-section" id="results">
<div class="chart-container">
<div style="text-align:center; margin-bottom: 48px;">
<div class="section-label" style="margin-bottom:16px;">Кейс: E-commerce</div>
<h2 class="section-title" style="margin:0 auto 12px;">Рост трафика клиента</h2>
<p class="section-desc" style="margin:0 auto;">Мебельный магазин. 2 500 запросов. Регион — вся Россия.</p>
</div>
<div class="chart-wrapper">
<div class="chart-header">
<div class="chart-title">Органический трафик</div>
<div class="chart-badge">+347% за 8 мес.</div>
</div>
<svg class="chart-svg" viewBox="0 0 900 280" preserveAspectRatio="none">
<!-- Grid -->
<line class="chart-grid-line" x1="0" y1="70" x2="900" y2="70"/>
<line class="chart-grid-line" x1="0" y1="140" x2="900" y2="140"/>
<line class="chart-grid-line" x1="0" y1="210" x2="900" y2="210"/>
<!-- Purple line (client) -->
<path class="chart-line purple" d="M0,250 C80,245 120,240 180,235 C240,228 300,210 360,190 C420,165 480,130 540,100 C600,70 660,50 720,35 C780,22 840,18 900,12"/>
<!-- Area under purple -->
<path class="chart-area purple" d="M0,250 C80,245 120,240 180,235 C240,228 300,210 360,190 C420,165 480,130 540,100 C600,70 660,50 720,35 C780,22 840,18 900,12 L900,280 L0,280 Z"/>
<!-- Cyan line (competitors avg) -->
<path class="chart-line cyan" d="M0,240 C80,238 160,235 240,230 C320,225 400,218 480,210 C560,200 640,190 720,180 C800,170 860,165 900,160" style="stroke-dasharray:8,4; opacity:0.5"/>
<!-- Dots -->
<circle class="chart-dot" cx="900" cy="12" stroke="var(--accent)"/>
<circle class="chart-dot" cx="900" cy="160" stroke="var(--accent-2)"/>
<!-- Labels -->
<text class="chart-label" x="10" y="270">Янв</text>
<text class="chart-label" x="130" y="270">Мар</text>
<text class="chart-label" x="260" y="270">Май</text>
<text class="chart-label" x="390" y="270">Июл</text>
<text class="chart-label" x="520" y="270">Авг</text>
<text class="chart-label" x="650" y="270">Сен</text>
<text class="chart-label" x="780" y="270">Окт</text>
<text class="chart-label" x="870" y="270">Ноя</text>
<!-- Legend -->
<text class="chart-label" x="680" y="30" fill="var(--accent)">Наш клиент (+347%)</text>
<text class="chart-label" x="710" y="175" fill="var(--accent-2)" opacity="0.7">Среднее по рынку (+23%)</text>
</svg>
</div>
</div>
</section>
<!-- Bento: Our approach -->
<section class="section">
<div class="section-label">Наш подход</div>
<h2 class="section-title">Не позиции —<br>а <span class="gradient-text">деньги</span></h2>
<p class="section-desc">Каждый элемент стратегии нацелен на измеримый результат.</p>
<div class="bento-grid">
<div class="bento-card">
<div class="bento-icon purple">🔍</div>
<h3>Аудит 200+</h3>
<p>Проверяем 200+ параметров. Без технического фундамента — остальное трата бюджета.</p>
</div>
<div class="bento-card">
<div class="bento-icon cyan">🧠</div>
<h3>Семантическое ядро</h3>
<p>1 000–5 000 запросов, кластеризация по намерениям. Фокус на коммерческий интент.</p>
</div>
<div class="bento-card">
<div class="bento-icon green">✍️</div>
<h3>Экспертный контент</h3>
<p>Статьи пишут специалисты по вашей тематике. E-E-A-T — ключевой фактор Яндекса 2025.</p>
</div>
<div class="bento-card">
<div class="bento-icon pink">🔗</div>
<h3>Авторитетные ссылки</h3>
<p>Только ручная работа. СМИ, отраслевые порталы, каталоги с реальным трафиком.</p>
</div>
<div class="bento-card span-2">
<div class="bento-icon orange">📊</div>
<h3>Сквозная аналитика и ROI</h3>
<p>Настраиваем цели в Метрике, связываем с CRM. Каждый лид — с источником и стоимостью. Вы видите ROI в реальном времени. Ежемесячный дашборд с позициями, трафиком, лидами и деньгами.</p>
</div>
</div>
</section>
<!-- Testimonials -->
<section class="section">
<div class="section-label">Клиенты</div>
<h2 class="section-title">Что говорят <span class="gradient-text">результаты</span></h2>
<p class="section-desc">Не наши слова — цифры клиентов.</p>
<div class="testimonials-grid">
<div class="testimonial-card">
<div class="testimonial-stars">⭐⭐⭐⭐⭐</div>
<p class="testimonial-text">«За 4 месяца вышли в ТОП-3 по основным запросам. Трафик вырос в 3.2 раза. Заказы — в 2.8 раза. Лучшая инвестиция года.»</p>
<div class="testimonial-author">
<div class="testimonial-avatar">АК</div>
<div>
<div class="testimonial-name">Алексей К.</div>
<div class="testimonial-role">CEO, мебельный магазин</div>
</div>
</div>
<div class="testimonial-metric">↑ +347% трафик</div>
</div>
<div class="testimonial-card">
<div class="testimonial-stars">⭐⭐⭐⭐⭐</div>
<p class="testimonial-text">«Наконец-то агентство, которое говорит на языке денег. Каждый отчёт — это ROI, а не абстрактные «позиции». Рекомендую.»</p>
<div class="testimonial-author">
<div class="testimonial-avatar">МС</div>
<div>
<div class="testimonial-name">Марина С.</div>
<div class="testimonial-role">Маркетинг-директор, B2B</div>
</div>
</div>
<div class="testimonial-metric">↑ ROI 520%</div>
</div>
<div class="testimonial-card">
<div class="testimonial-stars">⭐⭐⭐⭐⭐</div>
<p class="testimonial-text">«Перешли от агентства, которое тратило бюджет впустую. Через полгода обогнали всех конкурентов по трафику в нише.»</p>
<div class="testimonial-author">
<div class="testimonial-avatar">ДВ</div>
<div>
<div class="testimonial-name">Дмитрий В.</div>
<div class="testimonial-role">Основатель, IT-компания</div>
</div>
</div>
<div class="testimonial-metric">↑ #1 в нише</div>
</div>
</div>
</section>
<!-- Pricing -->
<section class="section" id="pricing">
<div class="section-label">Тарифы</div>
<h2 class="section-title">Прозрачные цены.<br><span class="gradient-text">Без скрытых платежей.</span></h2>
<p class="section-desc">Каждая услуга включена. Никаких «аудит отдельно».</p>
<div class="pricing-grid">
<div class="price-card">
<div class="price-name">Starter</div>
<div class="price-title">Локальный бизнес</div>
<div class="price-desc">Для малого бизнеса и локальных услуг</div>
<div class="price-amount">40K ₽</div>
<div class="price-period">в месяц</div>
<ul class="price-features">
<li>Технический аудит (200+ параметров)</li>
<li>До 300 ключевых запросов</li>
<li>Он-пейдж оптимизация (до 20 стр.)</li>
<li>Яндекс.Метрика + GA4</li>
<li>Ежемесячный отчёт</li>
<li>Базовая контент-стратегия</li>
</ul>
<a href="#contact" class="price-btn price-btn-ghost">Начать →</a>
</div>
<div class="price-card featured">
<span class="popular-tag">Популярный</span>
<div class="price-name">Growth</div>
<div class="price-title">Региональное продвижение</div>
<div class="price-desc">Для компаний с оборотом от 1 млн ₽/мес</div>
<div class="price-amount">90K ₽</div>
<div class="price-period">в месяц</div>
<ul class="price-features">
<li>Всё из Starter</li>
<li>До 1 000 ключевых запросов</li>
<li>4 экспертных статьи/мес</li>
<li>До 10 качественных ссылок/мес</li>
<li>Конкурентный анализ</li>
<li>Сквозная аналитика</li>
<li>Приоритетная поддержка</li>
</ul>
<a href="#contact" class="price-btn price-btn-primary">Начать →</a>
</div>
<div class="price-card">
<div class="price-name">Enterprise</div>
<div class="price-title">Маркетплейс / E-commerce</div>
<div class="price-desc">Для высококонкурентных ниш</div>
<div class="price-amount">180K ₽</div>
<div class="price-period">в месяц</div>
<ul class="price-features">
<li>Всё из Growth</li>
<li>До 5 000 ключевых запросов</li>
<li>8+ статей/мес + экспертные материалы</li>
<li>PR-ссылки на СМИ</li>
<li>Техническая оптимизация (CMS, скорость)</li>
<li>Мультисайт-стратегия</li>
<li>Личный SEO-менеджер</li>
</ul>
<a href="#contact" class="price-btn price-btn-ghost">Обсудить →</a>
</div>
</div>
</section>
<!-- Process -->
<section class="section" id="process">
<div class="section-label">Процесс</div>
<h2 class="section-title">4 этапа к <span class="gradient-text">измеримому росту</span></h2>
<p class="section-desc">Прозрачный воркфлоу. Вы видите, за что платите.</p>
<div class="process-timeline">
<div class="process-step active">
<div class="process-step-number">Этап 01</div>
<h3>Аудит и стратегия</h3>
<p>Технический анализ 200+ параметров, разбор конкурентов, кластеризация семантики. Результат: roadmap с таймлайном и KPI.</p>
<span class="process-duration">⏱ 1 неделя</span>
</div>
<div class="process-step">
<div class="process-step-number">Этап 02</div>
<h3>Техническая база</h3>
<p>Исправляем ошибки CMS, скорость, мобильную адаптацию, внутреннюю перелинковку. Без этого контент не работает.</p>
<span class="process-duration">⏱ 2–3 недели</span>
</div>
<div class="process-step">
<div class="process-step-number">Этап 03</div>
<h3>Контент и ссылки</h3>
<p>Экспертный контент, написанный по вашему профилю. Качественные ссылки из авторитетных источников. Без бирж.</p>
<span class="process-duration">⏱ Месяцы 2–6</span>
</div>
<div class="process-step">
<div class="process-step-number">Этап 04</div>
<h3>Рост и масштабирование</h3>
<p>Ежемесячный мониторинг позиций, трафика, лидов. Масштабируем то, что работает. Отчитываемся по деньгам.</p>
<span class="process-duration">⏱ Месяцы 6–12+</span>
</div>
</div>
</section>
<!-- CTA -->
<section class="cta-section" id="contact">
<h2 class="cta-title">
Готовы <span class="gradient-text">доминировать?</span>
</h2>
<p class="cta-desc">Расскажите о вашем проекте — мы бесплатно проведём экспресс-аудит и покажем точки роста.</p>
<div class="cta-actions">
<a href="mailto:nikita@tarasov.top" class="btn btn-primary">nikita@tarasov.top →</a>
<a href="https://t.me/n1kt4r" class="btn btn-glass">Telegram →</a>
</div>
</section>
<!-- Footer -->
<footer>
<span>© 2026 SEOIQ — SEO, которое ломает рынок</span>
<span>Уфа, Россия · <a href="mailto:nikita@tarasov.top">nikita@tarasov.top</a></span>
</footer>
</main>
<!-- Sticky CTA (mobile only) -->
<div class="sticky-cta">
<a href="#contact" class="btn btn-primary sticky-cta__btn">Обсудить проект →</a>
<span class="sticky-cta__hint">Средний отклик — менее 2 часов</span>
</div>
</div>
<!-- Three.js + GSAP -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
<script>
gsap.registerPlugin(ScrollTrigger);
// ── Three.js 3D Background ──
const canvas = document.getElementById('three-bg');
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ canvas, alpha: true, antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
// Particles
const particlesCount = 2000;
const positions = new Float32Array(particlesCount * 3);
const colors = new Float32Array(particlesCount * 3);
for (let i = 0; i < particlesCount; i++) {
positions[i * 3] = (Math.random() - 0.5) * 20;
positions[i * 3 + 1] = (Math.random() - 0.5) * 20;
positions[i * 3 + 2] = (Math.random() - 0.5) * 20;
// Purple/cyan color variation
const mix = Math.random();
colors[i * 3] = mix > 0.5 ? 0.55 : 0.02;
colors[i * 3 + 1] = mix > 0.5 ? 0.36 : 0.71;
colors[i * 3 + 2] = mix > 0.5 ? 0.97 : 0.83;
}
const particlesGeometry = new THREE.BufferGeometry();
particlesGeometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
particlesGeometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));
const particlesMaterial = new THREE.PointsMaterial({
size: 0.02,
vertexColors: true,
transparent: true,
opacity: 0.6,
sizeAttenuation: true,
});
const particlesMesh = new THREE.Points(particlesGeometry, particlesMaterial);
scene.add(particlesMesh);
// Lines between close particles
const lineMaterial = new THREE.LineBasicMaterial({
color: 0x8b5cf6,
transparent: true,
opacity: 0.08,
});
camera.position.z = 5;
let mouseX = 0, mouseY = 0;
document.addEventListener('mousemove', (e) => {
mouseX = (e.clientX / window.innerWidth) * 2 - 1;
mouseY = -(e.clientY / window.innerHeight) * 2 + 1;
});
function animate() {
requestAnimationFrame(animate);
particlesMesh.rotation.y += 0.0003;
particlesMesh.rotation.x += 0.0001;
camera.position.x += (mouseX * 0.5 - camera.position.x) * 0.05;
camera.position.y += (mouseY * 0.5 - camera.position.y) * 0.05;
camera.lookAt(scene.position);
renderer.render(scene, camera);
}
animate();
window.addEventListener('resize', () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
// ── Nav scroll ──
const nav = document.getElementById('nav');
ScrollTrigger.create({
start: 'top -60',
onEnter: () => nav.classList.add('scrolled'),
onLeaveBack: () => nav.classList.remove('scrolled'),
});
// ── Hero animations ──
const tl = gsap.timeline();
tl.from('.hero-badge', { opacity: 0, y: 30, duration: 0.6, ease: 'power3.out' })
.from('.hero-title', { opacity: 0, y: 40, duration: 0.8, ease: 'power3.out' }, '-=0.3')
.from('.hero-sub', { opacity: 0, y: 30, duration: 0.6, ease: 'power3.out' }, '-=0.3')
.from('.hero-stats', { opacity: 0, y: 30, duration: 0.6, ease: 'power3.out' }, '-=0.3')
.from('.hero-actions', { opacity: 0, y: 30, duration: 0.6, ease: 'power3.out' }, '-=0.3')
.from('.hero-scroll', { opacity: 0, duration: 0.6 }, '-=0.2')
.from('.float-el', {
opacity: 0, scale: 0.8, duration: 0.5,
stagger: 0.1, ease: 'back.out(1.7)'
}, '-=0.5');
// ── Counter animation ──
document.querySelectorAll('[data-count]').forEach(el => {
const target = parseInt(el.dataset.count);
ScrollTrigger.create({
trigger: el,
start: 'top 85%',
onEnter: () => {
gsap.to({ val: 0 }, {
val: target,
duration: 2,
ease: 'power2.out',
onUpdate: function() {
el.textContent = Math.round(this.targets()[0].val);
}
});
},
once: true,
});
});
// ── Bento cards ──
gsap.utils.toArray('.bento-card').forEach((card, i) => {
gsap.to(card, {
opacity: 1, y: 0, duration: 0.6, delay: (i % 3) * 0.1,
ease: 'power3.out',
scrollTrigger: { trigger: card, start: 'top 85%', once: true }
});
});
// ── Chart animation ──
gsap.utils.toArray('.chart-wrapper').forEach(wrapper => {
const svg = wrapper.querySelector('.chart-svg');
const line = wrapper.querySelector('.chart-line.purple');
if (line) {
const length = line.getTotalLength();
line.style.strokeDasharray = length;
line.style.strokeDashoffset = length;
gsap.to(line, {
strokeDashoffset: 0,
duration: 2,
ease: 'power2.inOut',
scrollTrigger: { trigger: wrapper, start: 'top 75%', once: true }
});
}
});
// ── Pricing cards ──
gsap.utils.toArray('.price-card').forEach((card, i) => {
gsap.to(card, {
opacity: 1, y: 0, duration: 0.6, delay: i * 0.15,
ease: 'power3.out',
scrollTrigger: { trigger: card, start: 'top 85%', once: true }
});
});
// ── Process steps ──
gsap.utils.toArray('.process-step').forEach((step, i) => {
gsap.from(step, {
opacity: 0, x: -30, duration: 0.6, delay: i * 0.15,
ease: 'power3.out',
scrollTrigger: { trigger: step, start: 'top 80%', once: true }
});
});
// ── Testimonials ──
gsap.utils.toArray('.testimonial-card').forEach((card, i) => {
gsap.to(card, {
opacity: 1, y: 0, duration: 0.6, delay: i * 0.1,
ease: 'power3.out',
scrollTrigger: { trigger: card, start: 'top 85%', once: true }
});
});
// ── CTA ──
const ctaTl = gsap.timeline({
scrollTrigger: { trigger: '.cta-section', start: 'top 75%', once: true }
});
ctaTl.from('.cta-title', { opacity: 0, y: 40, duration: 0.8, ease: 'power3.out' })
.from('.cta-desc', { opacity: 0, y: 30, duration: 0.6, ease: 'power3.out' }, '-=0.3')
.from('.cta-actions', { opacity: 0, y: 30, duration: 0.6, ease: 'power3.out' }, '-=0.3');
window.addEventListener('resize', () => ScrollTrigger.refresh());
</script>
</body>
</html>