.fw-landing *, .fw-landing *::before, .fw-landing *::after { margin: 0; padding: 0; box-sizing: border-box; }
.fw-landing { scroll-behavior: smooth; font-size: 16px; scroll-padding-top: 88px; max-width: 100%; overflow-x: hidden; }
.fw-landing {
font-family: var(--font-work-sans), 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
color: #1a1a2e;
background: #fff;
line-height: 1.6;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.fw-landing h1, .fw-landing h2, .fw-landing h3, .fw-landing h4, .fw-landing h5, .fw-landing h6 {
font-family: var(--font-outfit), 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.fw-landing img, .fw-landing video { max-width: 100%; height: auto; display: block; }
.fw-landing svg, .fw-landing table, .fw-landing iframe, .fw-landing canvas { max-width: 100%; }
.fw-landing a { text-decoration: none; color: inherit; cursor: pointer; }
.fw-landing button { cursor: pointer; border: none; font-family: inherit; }
.fw-landing .skip-link {
position: absolute;
top: -100%;
left: 16px;
z-index: 10000;
padding: 12px 24px;
background: var(--brand);
color: var(--white);
font-weight: 600;
border-radius: 0 0 8px 8px;
transition: top 0.2s ease;
}
.fw-landing .skip-link:focus {
top: 0;
}
.fw-landing :focus-visible {
outline: 2px solid var(--brand);
outline-offset: 2px;
border-radius: 4px;
}
.fw-landing :focus:not(:focus-visible) {
outline: none;
}
@media (prefers-reduced-motion: reduce) {.fw-landing *, .fw-landing *::before, .fw-landing *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.fw-landing.fw-animate .reveal { opacity: 1; transform: none; }
.fw-landing .testimonials-track { animation: none !important; }
}.fw-landing {
--brand: #6f3cc3;
--brand-light: #8d73d9;
--brand-dark: #512c91;
--brand-bg: #f4f1fa;
--brand-bg-alt: #faf9fd;
--text-primary: #0F172A;
--text-secondary: #374151;
--text-muted: #4B5563;
--text-on-brand: #ffffff;
--text-success: #047857;
--white: #ffffff;
--gray-50: #f8f9fb;
--gray-100: #f2f4f7;
--gray-200: #e5e7eb;
--gray-800: #1f2937;
--surface: #ffffff;
--surface-raised: #ffffff;
--surface-soft: #f5f6f9;
--border: #e6e8ee;
--border-brand: rgba(111,60,195,0.12);
--radius: 12px;
--radius-lg: 20px;
--radius-full: 100px;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;
--space-20: 80px;
--space-24: 96px;
--shadow-sm: 0 1px 2px rgba(15,23,42,0.04), 0 1px 1px rgba(15,23,42,0.03);
--shadow-md: 0 8px 24px rgba(15,23,42,0.06), 0 2px 8px rgba(15,23,42,0.04);
--shadow-lg: 0 16px 40px rgba(15,23,42,0.08), 0 4px 16px rgba(15,23,42,0.05);
--shadow-xl: 0 24px 56px rgba(15,23,42,0.10), 0 8px 24px rgba(15,23,42,0.06);
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--duration-fast: 150ms;
--duration-normal: 200ms;
--duration-slow: 300ms;
}
.fw-landing .container {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
}
.fw-landing .section {
padding: 100px 0;
}
.fw-landing .navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
background: rgba(255,255,255,0.86);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-bottom: 1px solid rgba(15,23,42,0.08);
transition: box-shadow 0.3s ease;
}
.fw-landing .navbar.scrolled {
box-shadow: 0 8px 24px rgba(15,23,42,0.06);
}
.fw-landing .navbar-inner {
display: flex;
align-items: center;
justify-content: space-between;
height: 72px;
}
.fw-landing .logo {
display: flex;
align-items: center;
gap: 10px;
font-weight: 800;
font-size: 1.35rem;
color: var(--brand);
}
.fw-landing .logo-icon {
width: 36px;
height: 36px;
background: linear-gradient(135deg, var(--brand), var(--brand-light));
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
}
.fw-landing .logo-icon svg { width: 20px; height: 20px; }
.fw-landing .nav-links {
display: flex;
align-items: center;
gap: 32px;
list-style: none;
}
.fw-landing .nav-links a {
font-size: 0.9rem;
font-weight: 500;
color: var(--text-secondary);
transition: color var(--duration-fast) ease;
position: relative;
padding-bottom: 2px;
}
.fw-landing .nav-links a::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
background: var(--brand);
border-radius: 1px;
transition: width var(--duration-normal) var(--ease-out);
}
.fw-landing .nav-links a:hover { color: var(--brand); }
.fw-landing .nav-links a:hover::after, .fw-landing .nav-links a.active::after { width: 100%; }
.fw-landing .nav-links a.active { color: var(--brand); font-weight: 600; }
.fw-landing .nav-cta {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 26px;
background: linear-gradient(135deg, #7B2FD4 0%, #9547E8 100%);
color: var(--white);
font-weight: 600;
font-size: 0.88rem;
border-radius: 10px;
transition: all var(--duration-normal) var(--ease-out);
box-shadow: 0 4px 14px rgba(123,47,212,0.2);
}
.fw-landing .nav-cta:hover {
background: linear-gradient(135deg, #6922BD 0%, #8538D8 100%);
transform: translateY(-1px);
box-shadow: 0 8px 22px rgba(123,47,212,0.26);
}
.fw-landing .nav-cta:active {
transform: translateY(0) scale(0.97);
}
.fw-landing .nav-actions { display: flex; align-items: center; gap: 14px; }
.fw-landing .nav-profile {
display: none;
width: 40px;
height: 40px;
border-radius: 50%;
overflow: hidden;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #7B2FD4 0%, #9547E8 100%);
color: var(--white);
font-weight: 700;
font-size: 0.9rem;
line-height: 1;
text-transform: uppercase;
border: 2px solid rgba(123,47,212,0.25);
box-shadow: 0 4px 14px rgba(123,47,212,0.2);
transition: all var(--duration-normal) var(--ease-out);
flex-shrink: 0;
}
.fw-landing .nav-profile:hover {
transform: translateY(-1px);
box-shadow: 0 8px 22px rgba(123,47,212,0.26);
}
.fw-landing .nav-profile img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.fw-landing .nav-dropdown-parent { position: relative; }
.fw-landing .nav-dropdown-trigger { display: inline-flex !important; align-items: center; }
.fw-landing .nav-dropdown {
position: absolute;
top: calc(100% + 12px);
left: 50%;
transform: translateX(-50%) translateY(6px);
background: var(--white);
border: 1px solid var(--border);
border-radius: 14px;
padding: 8px;
min-width: 260px;
box-shadow: 0 12px 36px rgba(15,23,42,0.12), 0 4px 12px rgba(15,23,42,0.06);
opacity: 0;
visibility: hidden;
transition: all 0.25s ease;
z-index: 200;
}
.fw-landing .nav-dropdown-parent:hover .nav-dropdown {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
.fw-landing .nav-dropdown-parent:hover .nav-dropdown-trigger svg {
transform: rotate(180deg);
}
.fw-landing .nav-dropdown-item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
border-radius: 10px;
transition: background 0.15s;
text-decoration: none;
}
.fw-landing .nav-dropdown-item:hover {
background: rgba(123,47,212,0.05);
}
.fw-landing .nav-dropdown-icon {
width: 36px; height: 36px;
border-radius: 8px;
background: rgba(123,47,212,0.06);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.fw-landing .nav-dropdown-title {
font-size: 0.84rem; font-weight: 600; color: var(--text-primary);
margin-bottom: 1px;
}
.fw-landing .nav-dropdown-desc {
font-size: 0.7rem; color: var(--text-muted); font-weight: 400;
}
.fw-landing .mobile-menu-btn {
display: none;
background: none;
padding: 8px;
}
.fw-landing .mobile-menu-btn span {
display: block;
width: 24px;
height: 2px;
background: var(--text-primary);
margin: 6px 0;
border-radius: 2px;
transition: all 0.3s;
}
.fw-landing .hero {
padding-top: 140px;
padding-bottom: 80px;
background: linear-gradient(180deg, #fbfbfd 0%, var(--gray-50) 44%, var(--white) 100%);
position: relative;
overflow: hidden;
}
.fw-landing .hero::before {
content: '';
position: absolute;
top: -200px;
right: -200px;
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(111,60,195,0.05) 0%, transparent 72%);
border-radius: 50%;
}
.fw-landing .hero::after {
content: '';
position: absolute;
bottom: -100px;
left: -150px;
width: 400px;
height: 400px;
background: radial-gradient(circle, rgba(111,60,195,0.03) 0%, transparent 70%);
border-radius: 50%;
}
.fw-landing .hero-content {
text-align: center;
position: relative;
z-index: 1;
}
.fw-landing .hero-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 20px;
background: #fff;
border: 1px solid rgba(0,0,0,0.1);
border-radius: 100px;
font-size: 0.9375rem;
font-weight: 600;
color: var(--text-secondary);
margin-bottom: 20px;
box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 1px 1px rgba(0,0,0,0.03);
}
.fw-landing .hero-badge-dot {
width: 9px;
height: 9px;
background: var(--brand);
border-radius: 50%;
animation: pulse-dot 2s infinite;
}
@keyframes pulse-dot {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(1.5); }
}.fw-landing .hero h1 {
font-size: clamp(2.5rem, 5vw, 4rem);
font-weight: 800;
line-height: 1.2;
color: var(--text-primary);
margin-bottom: 20px;
letter-spacing: -0.015em;
}
/* Second headline line: left-to-right purple gradient straight from the Figma text fill */
.fw-landing .hero h1 .gradient-text {
background: linear-gradient(90deg, #7540D1 0%, #4D0DBC 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: #4D0DBC;
}
.fw-landing .hero-subtitle {
font-size: 1.25rem;
color: var(--text-secondary);
max-width: 750px;
margin: 0 auto 40px;
line-height: 2.05;
}
.fw-landing .hero-ctas {
display: flex;
align-items: center;
justify-content: center;
gap: 24px;
margin-bottom: 56px;
}
/* Hero CTAs follow the Figma frame; other sections keep the shared button styling */
.fw-landing .hero-ctas .btn-primary {
padding: 16px 32px;
gap: 8px;
background: #5B14CA;
font-size: 1rem;
border-radius: 14px;
box-shadow: 0 10px 28px rgba(123,47,212,0.25);
}
.fw-landing .hero-ctas .btn-primary:hover {
background: #4B0FA8;
box-shadow: 0 16px 36px rgba(123,47,212,0.3);
}
.fw-landing .hero-ctas .btn-secondary {
padding: 16px 32px;
gap: 8px;
background: #F2EEFA;
border: 1px solid #7B2FD4;
font-size: 1rem;
border-radius: 14px;
}
.fw-landing .hero-ctas .btn-secondary:hover {
background: #E9E1F7;
border-color: #6922BD;
}
.fw-landing .btn-primary {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 17px 40px;
background: linear-gradient(135deg, #7B2FD4 0%, #9B4DFF 100%);
color: var(--white);
font-weight: 700;
font-size: 1.08rem;
border-radius: 14px;
transition: all var(--duration-normal) var(--ease-out);
box-shadow: 0 10px 28px rgba(123,47,212,0.28), 0 0 0 0 rgba(155,77,255,0);
letter-spacing: 0.01em;
}
.fw-landing .btn-primary:hover {
background: linear-gradient(135deg, #6922BD 0%, #8B3DEF 100%);
transform: translateY(-3px);
box-shadow: 0 16px 36px rgba(123,47,212,0.32), 0 0 0 4px rgba(155,77,255,0.1);
}
.fw-landing .btn-primary:active {
transform: translateY(0) scale(0.97);
box-shadow: 0 4px 12px rgba(123,47,212,0.18);
}
.fw-landing .btn-secondary {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 15px 32px;
background: rgba(123,47,212,0.06);
color: #6922BD;
font-weight: 600;
font-size: 1rem;
border-radius: 12px;
border: 1.5px solid rgba(123,47,212,0.18);
transition: all var(--duration-normal) var(--ease-out);
box-shadow: none;
}
.fw-landing .btn-secondary:hover {
border-color: rgba(123,47,212,0.35);
background: rgba(123,47,212,0.1);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(123,47,212,0.08);
}
.fw-landing .btn-secondary:active {
transform: translateY(0) scale(0.97);
}
.fw-landing .tabs-container {
width: 100%;
margin: 0 0 28px;
text-align: left;
}
.fw-landing .tabs-nav-shell {
display: flex;
justify-content: center;
margin-bottom: 28px;
}
.fw-landing .tabs-nav {
display: inline-flex;
background: rgba(255,255,255,0.9);
border: 1px solid var(--border);
box-shadow: var(--shadow-sm);
border-radius: 14px;
padding: 4px;
gap: 4px;
}
.fw-landing .tab-btn {
display: flex;
align-items: center;
justify-content: center;
padding: 12px 28px;
background: transparent;
color: var(--text-secondary);
font-weight: 600;
font-size: 0.9rem;
border-radius: 10px;
transition: all var(--duration-normal) var(--ease-out);
white-space: nowrap;
text-align: center;
}
.fw-landing .tab-btn.active {
background: var(--brand-dark);
color: var(--white);
box-shadow: 0 8px 20px rgba(81,44,145,0.14);
}
.fw-landing .tab-btn:not(.active):hover {
color: var(--text-primary);
background: rgba(15,23,42,0.04);
}
.fw-landing .tab-panels {
position: relative;
}
.fw-landing .tab-panel {
display: none;
animation: fadeInTab 0.4s ease;
}
.fw-landing .tab-panel.active {
display: block;
}
@keyframes fadeInTab {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}.fw-landing .tab-panel-inner {
background: transparent;
border-radius: 0;
box-shadow: none;
overflow: visible;
border: 0;
}
.fw-landing .tab-visual {
position: relative;
width: 100%;
padding: 30px 0 0;
background: transparent;
display: flex;
align-items: center;
justify-content: center;
overflow: visible;
}
.fw-landing .tab-visual video {
width: 100%;
height: auto;
display: block;
}
.fw-landing .tab-feature-stack {
width: 100%;
max-width: none;
margin: 0;
padding-top: 32px;
border-top: 1px solid rgba(15,23,42,0.08);
}
.fw-landing .tab-feature-shell {
display: grid;
grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
gap: 56px;
align-items: start;
}
.fw-landing .tab-feature-intro {
display: grid;
gap: 20px;
align-content: start;
}
.fw-landing .tab-feature-intro h3 {
font-size: clamp(1.8rem, 2.8vw, 2.25rem) !important;
font-weight: 800 !important;
color: var(--text-primary) !important;
text-align: left !important;
margin-bottom: 0 !important;
letter-spacing: -0.02em;
line-height: 1.02;
}
.fw-landing .tab-feature-intro > p {
max-width: none;
margin: 0 !important;
text-align: left !important;
color: var(--text-muted) !important;
font-size: 1rem !important;
line-height: 1.68 !important;
}
.fw-landing .tab-feature-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0;
min-width: 0;
background: var(--white);
border: 1px solid rgba(124,8,179,0.08);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
padding: 8px 32px 32px;
}
.fw-landing .tab-feature-item {
text-align: left;
padding: 28px 24px 0 0;
}
.fw-landing .tab-feature-item:not(:nth-child(3n+1)) {
padding-left: 24px;
border-left: 1px solid var(--gray-200);
}
.fw-landing .tab-feature-item-icon {
width: 48px;
height: 48px;
margin: 0 0 16px;
background: var(--brand-bg);
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
}
.fw-landing .tab-feature-item-icon svg {
width: 24px;
height: 24px;
stroke: var(--brand);
color: var(--brand);
}
.fw-landing .tab-feature-item-title {
font-weight: 700;
font-size: 1rem;
color: var(--text-primary);
margin-bottom: 8px;
line-height: 1.25;
}
.fw-landing .tab-feature-item-text {
font-size: 0.85rem;
color: var(--text-muted);
line-height: 1.5;
max-width: 260px;
}
.fw-landing .tab-caption {
padding: 22px 28px;
display: grid;
grid-template-columns: 52px minmax(0, 1fr);
align-items: center;
gap: 16px;
background: rgba(255,255,255,0.98);
}
.fw-landing .tab-caption-icon {
width: 44px;
height: 44px;
flex-shrink: 0;
background: linear-gradient(180deg, #faf7ff 0%, #f1ebfb 100%);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: inset 0 0 0 1px rgba(111,60,195,0.06);
}
.fw-landing .tab-caption-icon svg {
width: 24px;
height: 24px;
color: var(--brand);
}
.fw-landing .tab-caption-text h3 {
font-size: 1.08rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 6px;
}
.fw-landing .tab-caption-text p {
font-size: 0.86rem;
color: var(--text-muted);
line-height: 1.6;
max-width: 620px;
}
.fw-landing .mock-ui {
width: 100%;
height: 100%;
padding: 32px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 20px;
}
.fw-landing .mock-steps {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
justify-content: center;
}
.fw-landing .mock-step {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
padding: 20px;
background: var(--white);
border-radius: 16px;
box-shadow: var(--shadow-sm);
min-width: 140px;
border: 1px solid var(--border);
transition: transform var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out);
}
.fw-landing .mock-step:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-md);
}
.fw-landing .mock-step-num {
width: 32px;
height: 32px;
background: var(--brand);
color: var(--white);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 0.85rem;
}
.fw-landing .mock-step-label {
font-size: 0.82rem;
font-weight: 600;
color: var(--text-primary);
text-align: center;
}
.fw-landing .mock-arrow {
color: var(--brand-light);
font-size: 1.2rem;
}
.fw-landing .mock-metrics {
display: flex;
gap: 16px;
flex-wrap: wrap;
justify-content: center;
width: 100%;
}
.fw-landing .mock-metric-card {
flex: 1;
min-width: 160px;
padding: 20px;
background: var(--white);
border-radius: 16px;
box-shadow: var(--shadow-sm);
text-align: center;
border: 1px solid var(--gray-200);
transition: all 0.3s;
}
.fw-landing .mock-metric-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-md);
border-color: rgba(124,8,179,0.2);
}
.fw-landing .mock-metric-value {
font-size: 1.8rem;
font-weight: 800;
color: var(--brand);
margin-bottom: 4px;
}
.fw-landing .mock-metric-label {
font-size: 0.78rem;
font-weight: 500;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.fw-landing .mock-metric-change {
display: inline-flex;
align-items: center;
gap: 4px;
margin-top: 8px;
font-size: 0.78rem;
font-weight: 600;
color: #10b981;
background: #ecfdf5;
padding: 2px 8px;
border-radius: 6px;
}
.fw-landing .creatives {
background: var(--surface-soft);
}
.fw-landing .section-header {
text-align: center;
margin-bottom: 64px;
}
.fw-landing .section-header--left {
text-align: left;
max-width: 340px;
margin-bottom: 0;
}
.fw-landing .section-header.section-header--left p {
max-width: 100%;
margin: 0;
}
.fw-landing .section-shell {
display: grid;
grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
gap: 56px;
align-items: start;
}
.fw-landing .section-shell--sticky .section-header--left {
position: sticky;
top: 112px;
}
.fw-landing .section-main {
min-width: 0;
}
.fw-landing .section-label {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 14px;
background: rgba(255,255,255,0.9);
border: 1px solid var(--border);
border-radius: 100px;
font-size: 0.8rem;
font-weight: 600;
color: var(--text-secondary);
margin-bottom: 16px;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.fw-landing .section-header h2 {
font-size: clamp(1.8rem, 2.8vw, 2.25rem);
font-weight: 800;
color: var(--text-primary);
margin-bottom: 16px;
letter-spacing: -0.02em;
}
.fw-landing .section-header p {
font-size: 1rem;
color: var(--text-secondary);
max-width: 600px;
margin: 0 auto;
}
.fw-landing .creatives-tabs-nav {
display: inline-flex;
background: rgba(255,255,255,0.9);
border: 1px solid var(--border);
box-shadow: var(--shadow-sm);
border-radius: 14px;
padding: 4px;
gap: 4px;
margin-bottom: 48px;
}
.fw-landing .creatives-tab-btn {
padding: 12px 28px;
background: transparent;
color: var(--text-secondary);
font-weight: 600;
font-size: 0.9rem;
border-radius: 10px;
transition: all var(--duration-normal) var(--ease-out);
white-space: nowrap;
}
.fw-landing .creatives-tab-btn.active {
background: var(--brand-dark);
color: var(--white);
box-shadow: 0 8px 20px rgba(81,44,145,0.14);
}
.fw-landing .creatives-tab-btn:not(.active):hover {
color: var(--brand);
background: var(--gray-50);
}
.fw-landing .creatives-tab-panel {
display: none;
animation: fadeInTab 0.4s ease;
}
.fw-landing .creatives-tab-panel.active {
display: block;
}
.fw-landing .creatives-main {
min-width: 0;
}
.fw-landing .creatives-controls {
display: flex;
justify-content: flex-start;
margin-bottom: 48px;
}
.fw-landing .creatives-main .creatives-tabs-nav {
margin-bottom: 0;
}
.fw-landing .creatives-main .template-categories {
justify-content: flex-start;
}
.fw-landing .creatives-main .creatives-features {
margin-top: 56px;
}
.fw-landing .template-categories {
display: flex;
justify-content: center;
gap: 10px;
margin-bottom: 32px;
flex-wrap: wrap;
}
.fw-landing .category-chip {
padding: 8px 20px;
background: var(--gray-100);
color: var(--text-secondary);
font-size: 0.85rem;
font-weight: 600;
border-radius: 100px;
transition: all var(--duration-normal) var(--ease-out);
border: 1px solid transparent;
}
.fw-landing .category-chip.active {
background: var(--brand);
color: var(--white);
border-color: var(--brand);
}
.fw-landing .category-chip:not(.active):hover {
background: var(--gray-50);
color: var(--text-primary);
border-color: var(--border);
}
.fw-landing .template-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.fw-landing .template-card {
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-md);
border: 1px solid rgba(15,23,42,0.10);
transition: transform var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out);
background: #0d0d14;
}
.fw-landing .template-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-xl);
}
.fw-landing .template-card video {
width: 100%;
height: auto;
display: block;
aspect-ratio: 9/16;
object-fit: cover;
}
.fw-landing .template-card-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 16px;
background: linear-gradient(0deg, rgba(0,0,0,0.7) 0%, transparent 100%);
display: flex;
align-items: flex-end;
justify-content: space-between;
}
.fw-landing .template-card-label {
font-size: 0.82rem;
font-weight: 600;
color: var(--white);
}
.fw-landing .template-card-badge {
padding: 3px 10px;
background: rgba(124,8,179,0.8);
color: var(--white);
font-size: 0.7rem;
font-weight: 600;
border-radius: 6px;
}
.fw-landing .steps-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.fw-landing .step-card {
background: #0d0d14;
border-radius: var(--radius-lg);
overflow: hidden;
transition: transform var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out);
border: 1px solid rgba(255,255,255,0.06);
}
.fw-landing .step-card:hover {
transform: translateY(-6px);
box-shadow: 0 12px 40px rgba(0,0,0,0.2);
}
.fw-landing .step-card-visual {
position: relative;
width: 100%;
aspect-ratio: 4/3;
overflow: hidden;
}
.fw-landing .step-card-visual video {
width: 100%;
height: 100%;
object-fit: cover;
}
.fw-landing .step-card-visual img {
width: 100%;
height: 100%;
object-fit: cover;
}
.fw-landing .step-card-body {
padding: 20px 24px 24px;
text-align: center;
}
.fw-landing .step-card-num {
display: inline-block;
font-size: 0.72rem;
font-weight: 700;
color: var(--brand-light);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 8px;
}
.fw-landing .step-card-body h4 {
font-size: 1.1rem;
font-weight: 700;
color: var(--white);
margin-bottom: 8px;
}
.fw-landing .step-card-body p {
font-size: 0.85rem;
color: rgba(255,255,255,0.55);
line-height: 1.5;
}
.fw-landing .creatives-features {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0;
margin-top: 16px;
padding: 24px 28px;
background: var(--gray-50);
border: 1px solid var(--gray-200);
border-radius: var(--radius-lg);
}
.fw-landing .creative-feature-card {
text-align: left;
padding: 0 24px 0 0;
background: transparent;
border-radius: 0;
border: none;
box-shadow: none;
transition: none;
}
.fw-landing .creative-feature-card:not(:first-child) {
padding-left: 24px;
border-left: 1px solid var(--gray-200);
}
.fw-landing .creative-feature-card:hover {
transform: none;
box-shadow: none;
}
.fw-landing .creative-feature-icon {
width: 56px;
height: 56px;
margin: 0 0 16px;
background: var(--white);
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--shadow-sm);
}
.fw-landing .creative-feature-icon svg {
width: 28px;
height: 28px;
color: var(--brand);
}
.fw-landing .creative-feature-card h4 {
font-size: 1rem;
font-weight: 700;
margin-bottom: 8px;
color: var(--text-primary);
}
.fw-landing .creative-feature-card p {
font-size: 0.85rem;
color: var(--text-muted);
line-height: 1.5;
max-width: 260px;
}
.fw-landing .campaign {
background: var(--gray-50);
}
.fw-landing .metrics-shell {
display: grid;
grid-template-columns: minmax(280px, 320px) minmax(0, 1fr);
gap: 48px;
align-items: start;
}
.fw-landing .metrics-board {
min-width: 0;
}
.fw-landing .metrics-topbar {
margin-bottom: 24px !important;
}
.fw-landing .metrics-view-toggle {
margin-bottom: 24px !important;
}
.fw-landing .metrics-kpi-grid {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 0 !important;
margin-bottom: 0 !important;
border-top: 1px solid var(--border);
border-left: 1px solid var(--border);
}
.fw-landing .metrics-hidden {
display: none !important;
}
.fw-landing .metrics-3col {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
.fw-landing .metrics-kpi-card {
padding: 20px !important;
border: 0 !important;
border-right: 1px solid var(--border) !important;
border-bottom: 1px solid var(--border) !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
.fw-landing .metrics-summary {
display: grid !important;
grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr);
gap: 24px !important;
align-items: start !important;
margin-top: 24px;
}
.fw-landing .metrics-trend {
border-radius: 18px !important;
background: var(--gray-50) !important;
border: 1px solid var(--border) !important;
}
.fw-landing .metrics-active {
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
padding: 0 !important;
}
.fw-landing .metrics-active-item {
display: flex;
align-items: center;
gap: 12px;
padding: 16px 0 0 !important;
background: transparent !important;
border-radius: 0 !important;
border-top: 1px solid var(--border);
}
.fw-landing .campaign-flow {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
position: relative;
}
.fw-landing .campaign-main {
display: grid;
gap: 40px;
min-width: 0;
}
.fw-landing .campaign-flow::before {
content: '';
position: absolute;
top: 52px;
left: 15%;
right: 15%;
height: 2px;
background: linear-gradient(90deg, rgba(15,23,42,0.06), rgba(111,60,195,0.18), rgba(15,23,42,0.06));
opacity: 1;
z-index: 0;
}
.fw-landing .flow-step {
text-align: center;
position: relative;
z-index: 1;
}
.fw-landing .flow-step-circle {
width: 80px;
height: 80px;
margin: 0 auto 20px;
background: var(--white);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--shadow-sm);
border: 1px solid var(--border);
transition: border-color var(--duration-normal) ease, transform var(--duration-slow) var(--ease-spring), box-shadow var(--duration-normal) ease;
}
.fw-landing .flow-step:hover .flow-step-circle {
border-color: var(--brand);
transform: scale(1.08);
box-shadow: var(--shadow-md);
}
.fw-landing .flow-step-circle svg {
width: 32px;
height: 32px;
color: var(--brand);
}
.fw-landing .flow-step-num {
position: absolute;
top: -8px;
right: calc(50% - 52px);
width: 24px;
height: 24px;
background: var(--brand);
color: var(--white);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.72rem;
font-weight: 700;
}
.fw-landing .flow-step h4 {
font-size: 1rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 8px;
}
.fw-landing .flow-step p {
font-size: 0.85rem;
color: var(--text-muted);
line-height: 1.5;
max-width: 200px;
margin: 0 auto;
}
.fw-landing .campaign-highlight {
margin-top: 0;
padding: 40px;
background: var(--white);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
display: flex;
align-items: center;
gap: 40px;
border: 1px solid var(--border);
}
.fw-landing .campaign-highlight-icon {
width: 80px;
height: 80px;
flex-shrink: 0;
background: linear-gradient(135deg, var(--brand), var(--brand-light));
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
}
.fw-landing .campaign-highlight-icon svg {
width: 40px;
height: 40px;
color: var(--white);
}
.fw-landing .campaign-highlight h3 {
font-size: 1.3rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 8px;
}
.fw-landing .campaign-highlight p {
font-size: 0.95rem;
color: var(--text-muted);
line-height: 1.6;
}
.fw-landing .campaign-demo {
display: grid;
gap: 16px;
}
.fw-landing .campaign-demo-media {
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-lg);
border: 1px solid rgba(124,8,179,0.08);
}
.fw-landing .campaign-demo-media video {
width: 100%;
display: block;
}
.fw-landing .campaign-demo-note {
font-size: 0.88rem;
color: var(--text-muted);
text-align: center;
}
.fw-landing .metrics {
background: var(--white);
}
.fw-landing .metrics-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-bottom: 48px;
}
.fw-landing .metric-card {
padding: 36px;
background: var(--white);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
border: 1px solid var(--border);
text-align: center;
transition: transform var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out);
position: relative;
overflow: hidden;
}
.fw-landing .metric-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--brand), var(--brand-light));
opacity: 0;
transition: opacity var(--duration-normal) ease;
}
.fw-landing .metric-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-lg);
}
.fw-landing .metric-card:hover::before { opacity: 1; }
.fw-landing .metric-card-icon {
width: 56px;
height: 56px;
margin: 0 auto 20px;
background: var(--surface-soft);
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
}
.fw-landing .metric-card-icon svg {
width: 28px;
height: 28px;
color: var(--brand);
}
.fw-landing .metric-card-value {
font-size: 2.4rem;
font-weight: 800;
color: var(--brand);
margin-bottom: 4px;
}
.fw-landing .metric-card-label {
font-size: 1rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 8px;
}
.fw-landing .metric-card-desc {
font-size: 0.88rem;
color: var(--text-muted);
line-height: 1.5;
}
.fw-landing .optimization-features {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.fw-landing .opt-feature {
display: flex;
gap: 16px;
padding: 24px;
background: var(--white);
border-radius: 16px;
border: 1px solid var(--border);
box-shadow: var(--shadow-sm);
transition: all 0.3s;
}
.fw-landing .opt-feature:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-sm);
}
.fw-landing .opt-feature-icon {
width: 40px;
height: 40px;
flex-shrink: 0;
background: var(--surface-soft);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
}
.fw-landing .opt-feature-icon svg {
width: 20px;
height: 20px;
color: var(--brand);
}
.fw-landing .opt-feature h4 {
font-size: 0.95rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 4px;
}
.fw-landing .opt-feature p {
font-size: 0.82rem;
color: var(--text-muted);
line-height: 1.5;
}
.fw-landing .testimonials {
background: var(--gray-50);
overflow: hidden;
}
.fw-landing .testimonials-shell {
display: grid;
grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
gap: 56px;
}
.fw-landing .testimonials-shell .section-header--left {
position: sticky;
top: 112px;
}
.fw-landing .testimonials-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 28px 32px;
}
.fw-landing .testimonial-quote-card {
padding: 24px 0 0 !important;
border: 0 !important;
border-top: 1px solid var(--border) !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
transition: none !important;
}
.fw-landing .testimonials-grid > .testimonial-quote-card:nth-child(-n+2) {
border-top: 0 !important;
padding-top: 0 !important;
}
.fw-landing .testimonial-quote-card:hover {
box-shadow: none !important;
transform: none !important;
border-color: rgba(15,23,42,0.16) !important;
}
.fw-landing .testimonial-quote-card img {
width: 56px !important;
height: 56px !important;
}
.fw-landing .industries-section {
background: var(--gray-50);
}
.fw-landing .industry-shell {
display: grid;
grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
gap: 56px;
align-items: start;
}
.fw-landing .industry-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0 24px;
}
.fw-landing .industry-item {
display: flex !important;
align-items: flex-start;
gap: 16px;
padding: 24px 0 !important;
border: 0 !important;
border-top: 1px solid var(--border) !important;
border-radius: 0 !important;
background: transparent !important;
text-align: left !important;
box-shadow: none !important;
cursor: default !important;
}
.fw-landing .industry-item-icon {
width: 52px !important;
height: 52px !important;
margin: 0 !important;
background: var(--surface-soft) !important;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.fw-landing .industry-copy {
display: flex;
flex-direction: column;
gap: 4px;
padding-top: 2px;
}
.fw-landing .industry-item:hover {
border-color: rgba(15,23,42,0.16) !important;
background: transparent !important;
}
.fw-landing .industry-grid > .industry-item:nth-child(-n+2) {
border-top: 0 !important;
padding-top: 0 !important;
}
.fw-landing .faq-main {
min-width: 0;
}
.fw-landing .faq-actions {
text-align: left;
margin-top: 24px;
}
.fw-landing .testimonials-track-wrapper {
position: relative;
overflow: hidden;
margin: 0 -24px;
padding: 0 24px;
}
.fw-landing .testimonials-track {
display: flex;
gap: 24px;
animation: scrollTestimonials 40s linear infinite;
width: max-content;
}
.fw-landing .testimonials-track:hover {
animation-play-state: paused;
}
@keyframes scrollTestimonials {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}.fw-landing .testimonial-card {
flex-shrink: 0;
width: 380px;
padding: 32px;
background: var(--white);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
border: 1px solid var(--border);
transition: all 0.3s;
}
.fw-landing .testimonial-card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-4px);
}
.fw-landing .testimonial-quote {
font-size: 0.92rem;
color: var(--text-secondary);
line-height: 1.7;
margin-bottom: 24px;
font-style: italic;
}
.fw-landing .testimonial-quote::before {
content: '\201C';
font-size: 2rem;
color: var(--brand-light);
line-height: 0;
vertical-align: -0.4em;
margin-right: 4px;
}
.fw-landing .testimonial-author {
display: flex;
align-items: center;
gap: 14px;
}
.fw-landing .testimonial-avatar {
width: 44px;
height: 44px;
border-radius: 50%;
background: linear-gradient(135deg, var(--brand), var(--brand-light));
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
font-weight: 700;
font-size: 0.9rem;
}
.fw-landing .testimonial-name {
font-size: 0.9rem;
font-weight: 700;
color: var(--text-primary);
}
.fw-landing .testimonial-role {
font-size: 0.78rem;
color: var(--text-muted);
}
.fw-landing .testimonial-industry {
display: inline-flex;
padding: 3px 10px;
background: var(--surface-soft);
color: var(--text-secondary);
font-size: 0.72rem;
font-weight: 600;
border-radius: 6px;
margin-top: 6px;
}
.fw-landing .cta-section {
background: linear-gradient(135deg, #171a28 0%, #211c34 52%, #31284c 100%);
position: relative;
overflow: hidden;
}
.fw-landing .cta-section::before {
content: '';
position: absolute;
top: -50%;
right: -20%;
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(141,115,217,0.16) 0%, transparent 72%);
border-radius: 50%;
}
.fw-landing .cta-section::after {
content: '';
position: absolute;
bottom: -30%;
left: -10%;
width: 400px;
height: 400px;
background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 74%);
border-radius: 50%;
}
.fw-landing .cta-content {
text-align: center;
position: relative;
z-index: 1;
}
.fw-landing .cta-content h2 {
font-size: clamp(2rem, 3.5vw, 2.8rem);
font-weight: 800;
color: var(--white);
margin-bottom: 16px;
letter-spacing: -0.02em;
}
.fw-landing .cta-content p {
font-size: 1.15rem;
color: rgba(255,255,255,0.8);
max-width: 540px;
margin: 0 auto 40px;
line-height: 1.7;
}
.fw-landing .btn-cta-white {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 18px 48px;
background: var(--white);
color: #7B2FD4;
font-weight: 700;
font-size: 1.1rem;
border-radius: 14px;
transition: all var(--duration-normal) var(--ease-out);
box-shadow: 0 16px 32px rgba(0,0,0,0.16), 0 0 0 0 rgba(255,255,255,0);
letter-spacing: 0.01em;
}
.fw-landing .btn-cta-white:hover {
transform: translateY(-3px);
box-shadow: 0 20px 44px rgba(0,0,0,0.24), 0 0 0 4px rgba(255,255,255,0.12);
background: #f8f5ff;
}
.fw-landing .btn-cta-white:active {
transform: translateY(0) scale(0.97);
}
.fw-landing .footer {
background: #111827;
color: var(--white);
padding: 64px 0 32px;
}
.fw-landing .footer-inner {
display: grid;
grid-template-columns: minmax(240px, 1.6fr) repeat(2, minmax(140px, 1fr));
gap: 40px;
align-items: start;
}
.fw-landing .footer-brand-block {
max-width: 300px;
}
.fw-landing .footer-brand {
display: flex;
align-items: center;
gap: 10px;
font-weight: 700;
font-size: 1.1rem;
color: var(--white);
margin-bottom: 14px;
}
.fw-landing .footer-logo-icon {
width: 36px;
height: 36px;
background: linear-gradient(135deg, var(--brand), var(--brand-light));
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.fw-landing .footer-logo-icon svg {
width: 20px;
height: 20px;
}
.fw-landing .footer-tagline {
color: rgba(255,255,255,0.62);
font-size: 0.92rem;
line-height: 1.65;
margin-bottom: 20px;
}
.fw-landing .footer-heading {
color: var(--white);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.08em;
margin-bottom: 14px;
text-transform: uppercase;
}
.fw-landing .footer-list {
display: grid;
gap: 10px;
list-style: none;
}
.fw-landing .footer-list a, .fw-landing .footer-bottom a {
color: rgba(255,255,255,0.62);
font-size: 0.88rem;
transition: color 0.2s ease;
}
.fw-landing .footer-list a:hover, .fw-landing .footer-bottom a:hover {
color: var(--white);
}
.fw-landing .footer-bottom {
border-top: 1px solid rgba(255,255,255,0.1);
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
margin-top: 44px;
padding-top: 24px;
}
.fw-landing .footer-links {
display: flex;
flex-wrap: wrap;
gap: 24px;
list-style: none;
}
.fw-landing .footer-copy {
font-size: 0.8rem;
color: rgba(255,255,255,0.45);
}
.fw-landing.fw-animate .reveal {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
.fw-landing.fw-animate .reveal.visible {
opacity: 1;
transform: translateY(0);
}
.fw-landing.fw-animate .reveal.visible .stagger-child { opacity: 1; transform: translateY(0); }
.fw-landing.fw-animate .stagger-child {
opacity: 0;
transform: translateY(16px);
transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.fw-landing .stagger-child:nth-child(1) { transition-delay: 0ms; }
.fw-landing .stagger-child:nth-child(2) { transition-delay: 80ms; }
.fw-landing .stagger-child:nth-child(3) { transition-delay: 160ms; }
.fw-landing .stagger-child:nth-child(4) { transition-delay: 240ms; }
.fw-landing .testimonial-pause-btn {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: var(--white);
border: 1px solid var(--border);
border-radius: 50%;
margin: 24px auto 0;
transition: all var(--duration-fast) ease;
color: var(--text-secondary);
}
.fw-landing .testimonial-pause-btn:hover {
background: var(--brand-bg);
color: var(--brand);
border-color: var(--border-brand);
}
.fw-landing .testimonial-pause-btn svg { width: 16px; height: 16px; }
.fw-landing .testimonials-track.paused { animation-play-state: paused !important; }
@media (max-width: 1024px) {.fw-landing .metrics-kpi-card > div:first-of-type {
display:flex;
align-items: space-between;
justify-content: space-between;
margin-bottom: 0 !important;
}
.fw-landing .metrics-kpi-card > div:first-of-type div {
margin-bottom: 0 !important;
}
.fw-landing .metrics-kpi-card > div:first-of-type div:last-of-type {
font-size: 1.4rem !important;
}
.fw-landing .tab-feature-shell {
grid-template-columns: 1fr;
gap: 28px;
}
.fw-landing .campaign-flow {
grid-template-columns: repeat(2, 1fr);
gap: 32px;
}
.fw-landing .campaign-flow::before { display: none; }
.fw-landing .metrics-grid, .fw-landing .optimization-features {
grid-template-columns: 1fr 1fr;
}
.fw-landing .template-grid {
grid-template-columns: repeat(3, 1fr);
}
.fw-landing .steps-grid {
grid-template-columns: repeat(3, 1fr);
}
.fw-landing .section-shell, .fw-landing .metrics-shell, .fw-landing .testimonials-shell, .fw-landing .industry-shell {
grid-template-columns: minmax(0, 1fr);
gap: 32px;
}
.fw-landing .section-shell--sticky .section-header--left {
position: static;
}
.fw-landing .testimonials-shell .section-header--left {
position: static;
}
.fw-landing .creatives-features {
grid-template-columns: 1fr;
gap: 0;
padding: 8px 20px 20px;
}
.fw-landing .creative-feature-card {
padding: 20px 0 0;
border-top: 1px solid var(--gray-200);
}
.fw-landing .creative-feature-card:first-child {
border-top: none;
padding-top: 12px;
}
.fw-landing .creative-feature-card:not(:first-child) {
padding-left: 0;
border-left: none;
}
.fw-landing .metrics-kpi-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
@media (max-width: 768px) {.fw-landing .section { padding: 72px 0; }
.fw-landing .nav-links { display: none; }
.fw-landing .nav-cta { display: none; }
.fw-landing .nav-actions { margin-left: auto; }
.fw-landing .mobile-menu-btn { display: block; }
.fw-landing .tabs-nav {
flex-direction: column;
width: 100%;
}
.fw-landing .tab-btn { text-align: center; }
.fw-landing .tab-visual {
padding: 24px 0 0;
}
.fw-landing .tab-feature-grid {
grid-template-columns: 1fr;
gap: 0;
padding: 8px 24px 24px;
}
.fw-landing .tab-feature-item:not(:nth-child(3n+1)) {
padding-left: 0;
border-left: none;
}
.fw-landing .tab-feature-item:not(:first-child) {
border-top: 1px solid var(--gray-200);
padding-top: 24px;
}
.fw-landing .hero-ctas { flex-direction: column; }
.fw-landing .btn-primary, .fw-landing .btn-secondary { width: 100%; justify-content: center; }
.fw-landing .campaign-flow { grid-template-columns: 1fr 1fr; }
.fw-landing .metrics-grid { grid-template-columns: 1fr; }
.fw-landing .optimization-features { grid-template-columns: 1fr; }
.fw-landing .template-grid { grid-template-columns: 1fr 1fr; }
.fw-landing .steps-grid { grid-template-columns: 1fr; }
.fw-landing .creatives-tabs-nav {
flex-direction: column;
width: 100%;
}
.fw-landing .creatives-tab-btn { text-align: center; }
.fw-landing .campaign-highlight {
flex-direction: column;
text-align: center;
gap: 24px;
}
.fw-landing .campaign-demo-note, .fw-landing .faq-actions {
text-align: center;
}
.fw-landing .testimonial-card { width: 300px; }
.fw-landing .tab-caption {
grid-template-columns: 1fr;
text-align: center;
padding: 20px;
}
.fw-landing .tab-caption-icon {
margin: 0 auto;
}
.fw-landing .metrics-kpi-grid, .fw-landing .testimonials-grid, .fw-landing .industry-grid, .fw-landing .metrics-summary, .fw-landing .kpi-cards-grid {
grid-template-columns: 1fr !important;
}
.fw-landing .kpi-stats-strip {
justify-content: center !important;
}
.fw-landing .kpi-board, .fw-landing .testimonials-board, .fw-landing .industries-board {
padding: 20px !important;
}
.fw-landing .section-header--left {
max-width: none;
}
.fw-landing .footer-inner {
grid-template-columns: 1fr 1fr;
}
.fw-landing .footer-brand-block {
grid-column: 1 / -1;
max-width: none;
}
.fw-landing .footer-bottom {
align-items: flex-start;
flex-direction: column;
}
}
@media (max-width: 480px) {.fw-landing .campaign-flow { grid-template-columns: 1fr; }
.fw-landing .template-grid { grid-template-columns: 1fr; }
.fw-landing .mock-steps { flex-direction: column; }
.fw-landing .mock-arrow { transform: rotate(90deg); }
.fw-landing .footer {
padding: 48px 0 28px;
}
.fw-landing .footer-inner {
grid-template-columns: 1fr;
gap: 28px;
}
.fw-landing .footer-links {
gap: 14px 20px;
}
}.fw-landing .mock-steps {
flex-wrap: nowrap !important;
}
.fw-landing .mock-step {
max-width: 150px;
min-width: 120px !important;
padding: 16px 12px !important;
}
.fw-landing .mock-step-desc {
font-size: 0.68rem;
color: var(--text-muted);
display: block;
margin-top: 6px;
line-height: 1.35;
text-align: center;
}
.fw-landing .mock-arrow {
flex-shrink: 0;
}
.fw-landing .industry-card-item:hover {
border-color: rgba(15,23,42,0.16) !important;
background: transparent !important;
}
.fw-landing .faq-open .faq-answer { max-height: 300px !important; }
.fw-landing .faq-open .faq-toggle { transform: rotate(45deg); }
.fw-landing .faq-item:hover { border-color: rgba(124,8,179,0.2) !important; }
@media (max-width: 768px) {.fw-landing .industry-grid {
grid-template-columns: 1fr !important;
}
}.fw-landing .hiw-container {
display: grid;
grid-template-columns: minmax(340px, 2fr) 3fr;
gap: 0;
background: var(--white);
border-radius: var(--radius-lg);
overflow: hidden;
border: 1px solid rgba(124,8,179,0.08);
box-shadow: var(--shadow-lg);
}
.fw-landing .hiw-left {
padding: 36px 28px;
display: flex;
flex-direction: column;
gap: 24px;
}
.fw-landing .hiw-left-title {
font-size: 1.5rem;
font-weight: 800;
color: var(--text-primary);
line-height: 1.15;
letter-spacing: -0.02em;
white-space: nowrap;
}
.fw-landing .hiw-left-title .hiw-highlight {
background: linear-gradient(135deg, var(--brand-light), #c084fc);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.fw-landing .hiw-step-section {
display: flex;
flex-direction: column;
gap: 12px;
}
.fw-landing .hiw-step-label {
display: flex;
align-items: center;
gap: 10px;
font-size: 0.92rem;
font-weight: 700;
color: var(--text-primary);
}
.fw-landing .hiw-step-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
background: var(--brand);
color: var(--white);
border-radius: 50%;
font-size: 0.78rem;
font-weight: 700;
flex-shrink: 0;
}
.fw-landing .hiw-thumbs-row {
display: flex;
gap: 10px;
align-items: center;
}
.fw-landing .hiw-thumb {
position: relative;
width: 80px;
height: 80px;
border-radius: 12px;
overflow: hidden;
cursor: pointer;
border: 2px solid rgba(0,0,0,0.08);
transition: all var(--duration-normal) var(--ease-out);
flex-shrink: 0;
}
.fw-landing .hiw-thumb-template {
width: 110px;
height: auto;
aspect-ratio: 9 / 16;
}
.fw-landing .hiw-thumb:hover {
border-color: rgba(124,8,179,0.5);
transform: scale(1.05);
}
.fw-landing .hiw-thumb.selected {
border-color: var(--brand-light);
box-shadow: 0 0 0 2px rgba(159,119,227,0.3);
}
.fw-landing .hiw-thumb.selected::after {
content: '';
position: absolute;
top: 4px;
right: 4px;
width: 20px;
height: 20px;
background: var(--brand);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: 12px;
}
.fw-landing .hiw-thumb img, .fw-landing .hiw-thumb video {
width: 100%;
height: 100%;
object-fit: cover;
}
.fw-landing #hiwContent .hiw-thumb {
background: #f8f8fb;
}
.fw-landing #hiwContent .hiw-thumb img {
object-fit: contain;
padding: 8px;
box-sizing: border-box;
}
.fw-landing .hiw-plus-btn {
width: 80px;
height: 80px;
border-radius: 12px;
border: 2px dashed rgba(0,0,0,0.12);
background: rgba(0,0,0,0.02);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all var(--duration-normal) var(--ease-out);
flex-shrink: 0;
}
.fw-landing .hiw-plus-btn:hover {
border-color: var(--brand-light);
background: rgba(124,8,179,0.1);
}
.fw-landing .hiw-plus-btn svg {
width: 24px;
height: 24px;
color: rgba(0,0,0,0.3);
}
.fw-landing .hiw-generate-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
padding: 15px 28px;
background: linear-gradient(135deg, #8B3DEF 0%, #6D28D9 50%, #7B2FD4 100%);
color: var(--white);
font-weight: 700;
font-size: 0.95rem;
border-radius: 12px;
transition: all var(--duration-normal) var(--ease-out);
box-shadow: 0 6px 24px rgba(139,61,239,0.35);
border: none;
cursor: pointer;
position: relative;
overflow: hidden;
}
.fw-landing .hiw-generate-btn::after {
content: '';
position: absolute;
top: 0; left: -100%; width: 100%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
transition: left 0.5s ease;
}
.fw-landing .hiw-generate-btn:hover::after {
left: 100%;
}
.fw-landing .hiw-generate-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 32px rgba(139,61,239,0.45);
}
.fw-landing .hiw-generate-btn:active {
transform: translateY(0) scale(0.98);
}
.fw-landing .hiw-right {
position: relative;
overflow: hidden;
}
.fw-landing .hiw-video-wrapper {
position: absolute;
inset: 3% 6% 3% 14%;
overflow: hidden;
border-radius: 14px;
}
.fw-landing .hiw-loader {
position: absolute; inset: 0; display: none;
align-items: center; justify-content: center;
background: rgba(13,13,20,0.55); z-index: 2;
}
.fw-landing .hiw-loader.active { display: flex; }
.fw-landing .hiw-loader::after {
content: ''; width: 44px; height: 44px;
border: 3px solid rgba(255,255,255,0.25); border-top-color: #fff;
border-radius: 50%; animation: hiwSpin 0.8s linear infinite;
}
@keyframes hiwSpin { to { transform: rotate(360deg); } }.fw-landing .hiw-video-wrapper video {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.fw-landing .hiw-video-label {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
padding: 6px 20px;
background: rgba(255,255,255,0.9);
color: var(--text-primary);
font-size: 0.82rem;
font-weight: 700;
border-radius: 8px;
letter-spacing: 0.08em;
text-transform: uppercase;
backdrop-filter: blur(8px);
}
.fw-landing .hiw-badge {
position: absolute;
top: 16px;
right: 16px;
padding: 5px 14px;
background: rgba(255,255,255,0.9);
color: var(--brand);
font-size: 0.72rem;
font-weight: 700;
border-radius: 8px;
letter-spacing: 0.05em;
text-transform: uppercase;
backdrop-filter: blur(8px);
}
.fw-landing .hiw-char-count {
font-size: 0.78rem;
color: rgba(255,255,255,0.35);
margin-top: -4px;
}
.fw-landing .hiw-disclaimer {
font-size: 0.75rem;
color: rgba(0,0,0,0.35);
margin-top: 4px;
white-space: nowrap;
}
@media (max-width: 768px) {.fw-landing .hiw-container {
grid-template-columns: 1fr;
min-height: auto;
}
.fw-landing .hiw-right {
aspect-ratio: 2/3;
min-height: 300px;
}
.fw-landing .hiw-left {
padding: 28px 24px;
gap: 24px;
}
.fw-landing .hiw-left-title {
font-size: 1.5rem;
}
.fw-landing .hiw-thumb {
width: 25%;
height: 64px;
}
.fw-landing .hiw-thumb-template {
width: 33.3%;
height: auto;
}
.fw-landing .hiw-plus-btn {
width: 64px;
height: 64px;
}
.fw-landing .hiw-video-wrapper {
inset: 0% 6% 6% 6%;
}
}.fw-landing * {margin:0;padding:0;box-sizing:border-box}
.fw-landing .campaign-flow-widget h1, .fw-landing .campaign-flow-widget h2, .fw-landing .campaign-flow-widget h3, .fw-landing .campaign-flow-widget h4 {font-family:var(--font-outfit), 'Outfit',sans-serif}
.fw-landing .campaign-flow-widget {--surface:#ffffff;--surface-2:#f9fafb;--surface-3:#f3f4f6;--border:rgba(124,8,179,0.15);--radius:16px}
.fw-landing .campaign-flow-widget .flow-wrapper {max-width:940px;width:100%;margin:0 auto}
.fw-landing .campaign-flow-widget .flow-header {text-align:center;margin-bottom:40px}
.fw-landing .campaign-flow-widget .flow-header h2 {font-size:2rem;font-weight:800;margin-bottom:8px}
.fw-landing .campaign-flow-widget .flow-header h2 span {color:var(--brand-light)}
.fw-landing .campaign-flow-widget .flow-header p {font-size:0.95rem;color:var(--text-secondary)}
.fw-landing .campaign-flow-widget .flow-container {display:grid;grid-template-columns:260px 1fr;gap:0;background:var(--surface);border-radius:24px;overflow:hidden;border:1px solid var(--border);box-shadow:0 8px 32px rgba(124,8,179,0.08),0 4px 12px rgba(0,0,0,0.03)}
.fw-landing .campaign-flow-widget .flow-steps {padding:32px 24px;background:var(--surface);border-right:1px solid rgba(124,8,179,0.08);display:flex;flex-direction:column;gap:6px}
.fw-landing .campaign-flow-widget .flow-steps h3 {font-size:1.1rem;font-weight:700;margin-bottom:16px;color:var(--text-primary)}
.fw-landing .campaign-flow-widget .step-item {display:flex;align-items:flex-start;gap:14px;padding:14px 16px;border-radius:12px;cursor:pointer;transition:all 0.3s ease;position:relative}
.fw-landing .campaign-flow-widget .step-item:hover {background:rgba(124,8,179,0.06)}
.fw-landing .campaign-flow-widget .step-item.active {background:rgba(124,8,179,0.1);border:1px solid rgba(124,8,179,0.2)}
.fw-landing .campaign-flow-widget .step-item:not(.active) {border:1px solid transparent}
.fw-landing .campaign-flow-widget .step-num {width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:0.8rem;flex-shrink:0;transition:all 0.3s ease;background:var(--surface-3);color:var(--text-muted)}
.fw-landing .campaign-flow-widget .step-item.active .step-num {background:var(--brand);color:#fff;box-shadow:0 0 16px rgba(124,8,179,0.4)}
.fw-landing .campaign-flow-widget .step-item.completed .step-num {background:#10b981;color:#fff}
.fw-landing .campaign-flow-widget .step-item.completed .step-num::after {content:'✓';font-size:0.75rem}
.fw-landing .campaign-flow-widget .step-item.completed .step-num span {display:none}
.fw-landing .campaign-flow-widget .step-info {flex:1;min-width:0}
.fw-landing .campaign-flow-widget .step-title {font-size:0.85rem;font-weight:600;color:var(--text-secondary);transition:color 0.3s}
.fw-landing .campaign-flow-widget .step-item.active .step-title {color:var(--text-primary)}
.fw-landing .campaign-flow-widget .step-subtitle {font-size:0.72rem;color:var(--text-muted);margin-top:2px;line-height:1.3}
.fw-landing .campaign-flow-widget .step-progress {margin-top:auto;padding-top:20px}
.fw-landing .campaign-flow-widget .step-progress-bar {height:3px;background:var(--surface-3);border-radius:2px;overflow:hidden}
.fw-landing .campaign-flow-widget .step-progress-fill {height:100%;background:linear-gradient(90deg,var(--brand),var(--brand-light));border-radius:2px;transition:width 0.4s ease}
.fw-landing .campaign-flow-widget .flow-content {padding:32px;position:relative;min-height:480px;display:flex;flex-direction:column}
.fw-landing .campaign-flow-widget .flow-screen {display:none;flex-direction:column;height:100%;animation:fadeSlide 0.4s ease}
.fw-landing .campaign-flow-widget .flow-screen.active {display:flex}
@keyframes fadeSlide{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.fw-landing .meta-connect {text-align:center;padding:40px 20px;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center}
.fw-landing .meta-icon {position:relative;width:80px;height:80px;margin:0 auto 20px}
.fw-landing .meta-avatar {width:80px;height:80px;background:linear-gradient(135deg,var(--brand) 0%,var(--brand-light) 100%);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 28px rgba(124,8,179,0.28);color:#fff}
.fw-landing .meta-avatar svg {width:38px;height:38px;stroke:#fff;fill:#fff}
.fw-landing .meta-badge {position:absolute;bottom:-2px;right:-2px;width:30px;height:30px;background:linear-gradient(135deg,#0081FB,#00C2FF);border-radius:50%;display:flex;align-items:center;justify-content:center;border:3px solid var(--surface);box-shadow:0 4px 10px rgba(0,129,251,0.35)}
.fw-landing .meta-badge svg {width:14px;height:14px;fill:#fff}
.fw-landing .meta-connect h4 {font-size:1.3rem;font-weight:700;margin-bottom:8px}
.fw-landing .meta-connect p {font-size:0.88rem;color:var(--text-secondary);margin-bottom:28px}
.fw-landing .meta-input {width:100%;max-width:360px;padding:14px 18px;background:var(--surface-2);border:1px solid var(--border);border-radius:10px;color:var(--text-muted);font-size:0.88rem;font-family:inherit;margin-bottom:20px;outline:none}
.fw-landing .btn-brand {padding:14px 32px;background:linear-gradient(135deg,#7B2FD4,#9547E8);color:#fff;border:none;border-radius:10px;font-weight:600;font-size:0.92rem;cursor:pointer;transition:all 0.2s;display:inline-flex;align-items:center;gap:8px;font-family:inherit;box-shadow:0 4px 16px rgba(123,47,212,0.22)}
.fw-landing .btn-brand:hover {background:linear-gradient(135deg,#6922BD,#8538D8);transform:translateY(-2px);box-shadow:0 6px 24px rgba(123,47,212,0.3)}
.fw-landing .paste-link {text-align:center;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:30px 20px}
.fw-landing .paste-link h4 {font-size:1.6rem;font-weight:800;margin-bottom:24px;letter-spacing:-0.02em}
.fw-landing .link-input-wrap {width:100%;max-width:440px;margin-bottom:24px}
.fw-landing .link-input {width:100%;padding:16px 20px;background:var(--surface-2);border:1px solid var(--border);border-radius:12px;color:var(--text-primary);font-size:0.95rem;font-family:inherit;outline:none;transition:border-color 0.2s}
.fw-landing .link-input:focus {border-color:var(--brand)}
.fw-landing .paste-btns {display:flex;gap:12px;justify-content:center}
.fw-landing .btn-ai {padding:14px 28px;background:linear-gradient(135deg,#7B2FD4,#9547E8);color:#fff;border:none;border-radius:10px;font-weight:600;font-size:0.9rem;cursor:pointer;font-family:inherit;transition:all 0.2s;box-shadow:0 4px 16px rgba(123,47,212,0.22)}
.fw-landing .btn-manual {padding:14px 28px;background:transparent;color:#8B5CC8;border:1.5px solid rgba(123,47,212,0.2);border-radius:10px;font-weight:600;font-size:0.9rem;cursor:pointer;font-family:inherit;transition:all 0.2s}
.fw-landing .scanning {text-align:center;flex:1;display:flex;align-items:center;justify-content:center;gap:32px;padding:20px}
.fw-landing .scan-left {flex:1;display:flex;flex-direction:column;align-items:center}
.fw-landing .scan-ring {width:140px;height:140px;position:relative;margin-bottom:20px}
.fw-landing .scan-ring svg {width:140px;height:140px;transform:rotate(-90deg)}
.fw-landing .scan-ring circle {fill:none;stroke-width:8;stroke-linecap:round}
.fw-landing .scan-ring .bg {stroke:var(--surface-3)}
.fw-landing .scan-ring .fg {stroke:var(--brand);stroke-dasharray:377;stroke-dashoffset:377;transition:stroke-dashoffset 50ms linear}
.fw-landing .scan-percent {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:1.6rem;font-weight:800;color:var(--brand-light)}
.fw-landing .scan-left h4 {font-size:1.1rem;font-weight:700;margin-bottom:6px}
.fw-landing .scan-left p {font-size:0.82rem;color:var(--text-muted);margin-bottom:12px}
.fw-landing .scan-dots {display:flex;gap:6px;justify-content:center}
.fw-landing .scan-dots span {width:8px;height:8px;border-radius:50%;background:var(--brand-light);animation:pulse 1.4s ease infinite}
.fw-landing .scan-dots span:nth-child(2) {animation-delay:0.2s}
.fw-landing .scan-dots span:nth-child(3) {animation-delay:0.4s}
@keyframes pulse{0%,100%{opacity:0.3;transform:scale(0.8)}50%{opacity:1;transform:scale(1.1)}}.fw-landing .scan-right {flex:1;background:var(--surface-2);border-radius:14px;padding:16px;border:1px solid rgba(0,0,0,0.04);max-width:280px}
.fw-landing .scan-site-preview {background:var(--surface-3);border-radius:10px;height:200px;display:flex;flex-direction:column;overflow:hidden}
.fw-landing .scan-site-bar {height:28px;background:var(--surface);display:flex;align-items:center;gap:4px;padding:0 10px}
.fw-landing .scan-site-bar span {width:6px;height:6px;border-radius:50%}
.fw-landing .scan-site-bar span:nth-child(1) {background:#ef4444}
.fw-landing .scan-site-bar span:nth-child(2) {background:#f59e0b}
.fw-landing .scan-site-bar span:nth-child(3) {background:#10b981}
.fw-landing .scan-site-body {flex:1;padding:12px;display:flex;flex-direction:column;gap:8px}
.fw-landing .scan-site-line {height:8px;background:rgba(0,0,0,0.06);border-radius:4px}
.fw-landing .scan-site-line:nth-child(1) {width:70%}
.fw-landing .scan-site-line:nth-child(2) {width:100%}
.fw-landing .scan-site-line:nth-child(3) {width:85%}
.fw-landing .scan-site-line:nth-child(4) {width:45%}
.fw-landing .scan-site-line.highlight {background:rgba(124,8,179,0.2)}
.fw-landing .setup {flex:1;display:flex;gap:20px;padding:8px 0}
.fw-landing .setup-left {flex:1.1;display:flex;flex-direction:column;gap:14px}
.fw-landing .setup-right {flex:0.9;display:flex;flex-direction:column;gap:14px}
.fw-landing .setup-field {background:var(--surface-2);border-radius:10px;padding:14px;border:1px solid rgba(0,0,0,0.04)}
.fw-landing .setup-field-label {font-size:0.72rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:8px}
.fw-landing .setup-field-value {font-size:0.85rem;color:var(--text-primary);font-weight:500}
.fw-landing .goal-cards {display:flex;gap:8px}
.fw-landing .goal-card {flex:1;padding:10px 8px;background:var(--surface-3);border-radius:8px;text-align:center;border:1.5px solid transparent;transition:all 0.2s;cursor:pointer}
.fw-landing .goal-card.selected {border-color:var(--brand);background:rgba(124,8,179,0.1)}
.fw-landing .goal-card-icon {font-size:1rem;margin-bottom:4px}
.fw-landing .goal-card-name {font-size:0.72rem;font-weight:600;color:var(--text-secondary)}
.fw-landing .goal-card.selected .goal-card-name {color:var(--brand-light)}
.fw-landing .budget-slider {width:100%;height:4px;background:var(--surface-3);border-radius:2px;position:relative;margin:8px 0}
.fw-landing .budget-slider-fill {height:100%;width:60%;background:linear-gradient(90deg,var(--brand),var(--brand-light));border-radius:2px}
.fw-landing .budget-slider-thumb {width:14px;height:14px;background:#fff;border-radius:50%;position:absolute;top:-5px;left:58%;box-shadow:0 2px 8px rgba(0,0,0,0.3)}
.fw-landing .placement-pills {display:flex;gap:6px}
.fw-landing .placement-pill {padding:6px 12px;border-radius:6px;font-size:0.72rem;font-weight:600;background:var(--surface-3);color:var(--text-muted)}
.fw-landing .placement-pill.active {background:var(--brand);color:#fff}
.fw-landing .ad-preview {background:var(--surface-2);border-radius:10px;padding:14px;border:1px solid rgba(0,0,0,0.04);flex:1}
.fw-landing .ad-preview-header {display:flex;align-items:center;gap:8px;margin-bottom:10px}
.fw-landing .ad-preview-avatar {width:28px;height:28px;border-radius:50%;background:var(--brand);display:flex;align-items:center;justify-content:center;font-size:0.65rem;font-weight:700}
.fw-landing .ad-preview-name {font-size:0.78rem;font-weight:600}
.fw-landing .ad-preview-sponsored {font-size:0.65rem;color:var(--text-muted)}
.fw-landing .ad-preview-img {position:relative;width:100%;aspect-ratio:4/5;background:linear-gradient(135deg,var(--brand),var(--brand-light));border-radius:8px;margin-bottom:10px;overflow:hidden}
.fw-landing .ad-preview-img video {width:100%;height:100%;object-fit:cover;display:block}
.fw-landing .ad-preview-img .ad-preview-badge {position:absolute;top:8px;left:8px;display:inline-flex;align-items:center;gap:4px;padding:3px 8px;background:rgba(0,0,0,0.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-radius:999px;font-size:0.62rem;font-weight:600;color:#fff;letter-spacing:0.02em}
.fw-landing .ad-preview-img .ad-preview-badge svg {width:9px;height:9px;fill:#fff}
.fw-landing .ad-preview-text {font-size:0.75rem;color:var(--text-secondary);line-height:1.4;margin-bottom:8px}
.fw-landing .ad-preview-btn {display:inline-block;padding:6px 14px;background:var(--surface-3);border-radius:6px;font-size:0.72rem;font-weight:600;color:var(--text-primary)}
.fw-landing .review {flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px}
.fw-landing .review-card {width:100%;max-width:400px;background:var(--surface-2);border-radius:16px;padding:28px;border:1px solid var(--border)}
.fw-landing .review-card h4 {font-size:1.15rem;font-weight:700;margin-bottom:20px;text-align:center}
.fw-landing .review-row {display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid rgba(0,0,0,0.04);font-size:0.85rem}
.fw-landing .review-row:last-of-type {border-bottom:none}
.fw-landing .review-label {color:var(--text-muted);font-weight:500}
.fw-landing .review-value {color:var(--text-primary);font-weight:600;text-align:right}
.fw-landing .btn-confirm {width:100%;margin-top:20px;padding:14px;background:linear-gradient(135deg,#7B2FD4,#9547E8);color:#fff;border:none;border-radius:10px;font-weight:700;font-size:0.95rem;cursor:pointer;font-family:inherit;transition:all 0.2s;box-shadow:0 4px 16px rgba(123,47,212,0.22)}
.fw-landing .btn-confirm:hover {background:linear-gradient(135deg,#6922BD,#8538D8)}
.fw-landing .success-overlay {display:none;position:absolute;inset:0;background:rgba(255,255,255,0.97);border-radius:0 24px 24px 0;z-index:10;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px}
.fw-landing .success-overlay.show {display:flex}
.fw-landing .success-check {width:80px;height:80px;background:linear-gradient(135deg,#10b981,#34d399);border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:24px;animation:scaleIn 0.5s ease}
.fw-landing .success-check svg {width:40px;height:40px;stroke:#fff;fill:none;stroke-width:3}
@keyframes scaleIn{from{transform:scale(0)}to{transform:scale(1)}}.fw-landing .success-overlay h3 {font-size:1.4rem;font-weight:800;margin-bottom:8px}
.fw-landing .success-overlay p {color:var(--text-secondary);font-size:0.92rem;margin-bottom:24px}
.fw-landing .setup-field {opacity:0;transform:translateY(10px);transition:all 0.4s ease}
.fw-landing .setup-field.visible {opacity:1;transform:translateY(0)}
.fw-landing .ad-preview {opacity:0;transform:translateX(12px);transition:all 0.5s ease}
.fw-landing .ad-preview.visible {opacity:1;transform:translateX(0)}
.fw-landing .setup-publish-wrap {opacity:0;transform:translateY(8px);transition:all 0.4s ease}
.fw-landing .setup-publish-wrap.visible {opacity:1;transform:translateY(0)}
.fw-landing .btn-publish {width:100%;padding:13px;background:linear-gradient(135deg,#7B2FD4,#9547E8);color:#fff;border:none;border-radius:10px;font-weight:700;font-size:0.92rem;cursor:pointer;font-family:inherit;margin-top:12px;transition:all 0.2s;box-shadow:0 4px 16px rgba(123,47,212,0.22)}
.fw-landing .btn-publish:hover {background:linear-gradient(135deg,#6922BD,#8538D8)}
.fw-landing .setup-timer {font-size:0.78rem;color:var(--brand-light);font-weight:600;display:flex;align-items:center;gap:4px;margin-bottom:12px;justify-content:flex-end}
@media (max-width: 768px) {
.fw-landing .campaign-flow-widget .flow-container { grid-template-columns: 1fr; max-width: 100%; }
/* Step rail: numbers on one line, the current step's title takes the leftover
width and ellipsises. Replaces the horizontal scroll strip, which hid both
the active step and the progress bar. */
.fw-landing .campaign-flow-widget .flow-steps {
flex-direction: row; flex-wrap: wrap; align-items: center;
justify-content: space-between; gap: 4px; overflow: visible;
padding: 14px 12px 12px;
border-right: none; border-bottom: 1px solid rgba(0,0,0,0.04);
}
.fw-landing .campaign-flow-widget .flow-steps h3 { display: none; }
/* flex: 0 1 auto so space-between spreads the numbers evenly, and only the
active item -- the one with content -- shrinks if the title is too long. */
.fw-landing .campaign-flow-widget .step-item {
align-items: center; padding: 6px; gap: 6px; flex: 0 1 auto; min-width: 0;
}
.fw-landing .campaign-flow-widget .step-num { width: 28px; height: 28px; font-size: 0.74rem; }
.fw-landing .campaign-flow-widget .step-title { display: none; }
.fw-landing .campaign-flow-widget .step-item.active .step-title {
display: block; font-size: 0.76rem; max-width: 108px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fw-landing .campaign-flow-widget .step-subtitle { display: none; }
.fw-landing .campaign-flow-widget .step-progress {
display: block; order: 10; width: 100%; margin-top: 10px; padding-top: 0;
}
/* Screens size themselves; 480px was leaving the short ones half empty. */
.fw-landing .campaign-flow-widget .flow-content { min-width: 0; min-height: 300px; padding: 18px 16px 22px; }
/* Step 1 + 2 */
.fw-landing .meta-connect { padding: 20px 0; }
.fw-landing .meta-connect h4 { font-size: 1.15rem; }
.fw-landing .meta-connect p { font-size: 0.82rem; margin-bottom: 20px; }
.fw-landing .meta-input { padding: 12px 16px; margin-bottom: 16px; }
.fw-landing .paste-link { padding: 18px 0; }
.fw-landing .paste-link h4 { font-size: 1.25rem; margin-bottom: 18px; }
.fw-landing .link-input-wrap { margin-bottom: 18px; }
.fw-landing .link-input { padding: 13px 16px; font-size: 0.88rem; }
.fw-landing .paste-btns { width: 100%; gap: 10px; }
.fw-landing .btn-ai, .fw-landing .btn-manual { flex: 1 1 0; min-width: 0; padding: 13px 10px; font-size: 0.85rem; }
/* Step 3 */
.fw-landing .scanning { flex-direction: column; gap: 20px; padding: 8px 0; }
.fw-landing .scan-right { width: 100%; }
.fw-landing .scan-ring, .fw-landing .scan-ring svg { width: 116px; height: 116px; }
.fw-landing .scan-ring { margin-bottom: 16px; }
.fw-landing .scan-percent { font-size: 1.35rem; }
/* Step 4 */
.fw-landing .setup { flex-direction: column; gap: 0; }
/* flex:1.1/0.9 means flex-basis:0 -- harmless when these are columns, but once
stacked it makes their heights a share of free space instead of content. */
.fw-landing .setup-left, .fw-landing .setup-right { display: block; flex: 0 0 auto; }
.fw-landing .setup-field { padding: 12px; }
.fw-landing .ad-preview-img { aspect-ratio: 1 / 1; }
/* The blocks are revealed on a 0.3s -> 5.8s timeline. Fading opacity alone still
reserves every block's height, so stacked on mobile the card opened as a ~700px
blank slab and filled in from the top. Collapse the hidden ones so the card
grows as each block lands instead. */
.fw-landing .setup-left .setup-field,
.fw-landing .setup-right .ad-preview,
.fw-landing .setup-right .setup-publish-wrap {
max-height: 0; min-height: 0; overflow: hidden;
margin-bottom: 0; padding-top: 0; padding-bottom: 0;
border-top-width: 0; border-bottom-width: 0;
transform: none;
transition: max-height 0.45s var(--ease-out), margin-bottom 0.45s var(--ease-out),
padding 0.45s var(--ease-out), opacity 0.3s ease;
}
.fw-landing .setup-left .setup-field.visible {
max-height: 200px; margin-bottom: 12px;
padding-top: 12px; padding-bottom: 12px;
border-top-width: 1px; border-bottom-width: 1px;
}
.fw-landing .setup-right .ad-preview.visible {
max-height: 640px; margin-bottom: 0;
padding-top: 12px; padding-bottom: 12px;
border-top-width: 1px; border-bottom-width: 1px;
}
.fw-landing .setup-right .setup-publish-wrap.visible { max-height: 96px; }
/* Step 5 */
.fw-landing .review {
padding:0;
}
.fw-landing .review-card { padding: 18px 16px; border-radius: 14px; }
.fw-landing .review-card h4 { font-size: 1.05rem; margin-bottom: 14px; }
.fw-landing .review-row { font-size: 0.8rem; padding: 8px 0; gap: 12px; }
.fw-landing .btn-confirm { margin-top: 16px; padding: 13px; }
/* Stacked layout -- the overlay now caps the content column, not its right edge. */
.fw-landing .success-overlay { border-radius: 0 0 24px 24px; padding: 28px 20px; }
.fw-landing .success-check { width: 64px; height: 64px; margin-bottom: 18px; }
.fw-landing .success-check svg { width: 32px; height: 32px; }
.fw-landing .success-overlay h3 { font-size: 1.2rem; }
.fw-landing .founder-grid {grid-template-columns:1fr !important}
.fw-landing .founder-video-wrapper {
width: 100%;
}
}
@media (max-width: 400px) {
.fw-landing .campaign-flow-widget .flow-steps { padding: 12px 8px 10px; gap: 2px; }
.fw-landing .campaign-flow-widget .step-item { padding: 5px 4px; gap: 5px; }
.fw-landing .campaign-flow-widget .step-num { width: 25px; height: 25px; font-size: 0.68rem; }
.fw-landing .campaign-flow-widget .step-item.active .step-title { font-size: 0.7rem; }
.fw-landing .campaign-flow-widget .flow-content { padding: 16px 12px 20px; }
.fw-landing .paste-btns { flex-direction: column; }
.fw-landing .review-row { font-size: 0.76rem; }
}.fw-landing .pricing-card {
border-radius: 20px;
background: var(--white);
border: 1.5px solid var(--gray-200);
overflow: hidden;
transition: all 0.3s ease;
}
.fw-landing .pricing-card:hover {
box-shadow: 0 12px 32px rgba(15,23,42,0.08);
transform: translateY(-3px);
}
.fw-landing .pricing-card--featured {
border-color: #7B2FD4;
box-shadow: 0 8px 40px rgba(123,47,212,0.1);
}
.fw-landing .pricing-card-header {
background: linear-gradient(135deg, #7B2FD4, #9B4DFF);
color: #fff;
padding: 28px 28px 32px;
}
.fw-landing .pricing-plan-name {
font-family: var(--font-outfit), 'Outfit', sans-serif;
font-size: 1.4rem;
font-weight: 800;
margin-bottom: 4px;
display: flex;
align-items: center;
gap: 10px;
}
.fw-landing .pricing-badge {
font-size: 0.62rem;
font-weight: 700;
padding: 3px 10px;
background: rgba(255,255,255,0.2);
border-radius: 6px;
letter-spacing: 0.02em;
}
.fw-landing .pricing-plan-desc {
font-size: 0.82rem;
opacity: 0.8;
margin-bottom: 16px;
}
.fw-landing .pricing-price-row {
display: flex;
align-items: baseline;
gap: 10px;
}
.fw-landing .pricing-old {
font-size: 1.1rem;
text-decoration: line-through;
opacity: 0.5;
font-weight: 500;
}
.fw-landing .pricing-amount {
font-family: var(--font-outfit), 'Outfit', sans-serif;
font-size: 2.6rem;
font-weight: 800;
}
.fw-landing .pricing-period {
font-size: 0.9rem;
opacity: 0.7;
font-weight: 500;
}
.fw-landing .pricing-card-body {
padding: 24px 28px 32px;
}
.fw-landing .pricing-btn {
display: block;
width: 100%;
padding: 14px;
text-align: center;
border-radius: 10px;
font-size: 0.92rem;
font-weight: 700;
font-family: inherit;
transition: all 0.2s;
margin-bottom: 20px;
background: linear-gradient(135deg, #7B2FD4, #9B4DFF);
color: #fff;
box-shadow: 0 4px 16px rgba(123,47,212,0.2);
}
.fw-landing .pricing-btn:hover {
transform: translateY(-1px);
box-shadow: 0 6px 24px rgba(123,47,212,0.3);
}
.fw-landing .pricing-btn--light, .fw-landing .pricing-btn--outline {
background: transparent;
border: 1.5px solid rgba(123,47,212,0.2);
color: var(--text-primary);
box-shadow: none;
}
.fw-landing .pricing-btn--light:hover, .fw-landing .pricing-btn--outline:hover {
border-color: #7B2FD4;
background: rgba(123,47,212,0.06);
box-shadow: 0 4px 16px rgba(123,47,212,0.08);
}
.fw-landing .pricing-features {
list-style: none;
}
.fw-landing .pricing-features li {
font-size: 0.85rem;
color: var(--text-secondary);
padding: 9px 0;
border-bottom: 1px solid var(--gray-100);
display: flex;
align-items: center;
gap: 10px;
}
.fw-landing .pricing-features li:last-child { border-bottom: none; }
.fw-landing .pricing-features li::before {
content: '';
width: 16px; height: 16px;
border-radius: 50%;
background: rgba(123,47,212,0.08);
flex-shrink: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237B2FD4' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
background-size: 10px;
background-repeat: no-repeat;
background-position: center;
}
.fw-landing .pricing-features li.pricing-bonus {
color: #7B2FD4;
font-weight: 600;
}
.fw-landing .pricing-features li.pricing-bonus::before {
background-color: rgba(123,47,212,0.12);
}
@media (max-width: 768px) {.fw-landing .pricing-grid { grid-template-columns: 1fr !important; }
.fw-landing .pricing-grid-creative { grid-template-columns: 1fr !important; }
}.fw-landing .btn-section-cta {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 9px 22px;
background: rgba(123,47,212,0.08);
color: #7B2FD4;
font-weight: 600;
font-size: 0.82rem;
border-radius: 8px;
border: 1px solid rgba(123,47,212,0.15);
transition: all 0.2s ease;
margin-top: 14px;
}
.fw-landing .btn-section-cta:hover {
background: rgba(123,47,212,0.14);
border-color: rgba(123,47,212,0.25);
transform: translateY(-1px);
}
.fw-landing .hero-demo-section { margin-top: 10px; }
.fw-landing .hero-demo-cta-bar {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
margin-bottom: 24px;
flex-wrap: wrap;
}
.fw-landing .hero-demo-hook {
font-size: 0.92rem;
color: var(--text-secondary);
font-weight: 500;
text-align: center;
max-width: 480px;
}
.fw-landing .btn-demo-cta {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 28px;
background: linear-gradient(135deg, #9B7DD4 0%, #B394E8 100%);
color: #fff;
font-weight: 600;
font-size: 0.88rem;
border-radius: 10px;
transition: all 0.2s ease;
box-shadow: 0 4px 14px rgba(155,125,212,0.22);
white-space: nowrap;
flex-shrink: 0;
}
.fw-landing .btn-demo-cta:hover {
background: linear-gradient(135deg, #8B6DC4 0%, #A384D8 100%);
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(155,125,212,0.3);
}
.fw-landing .demo-widget {
width: 100%;
background: var(--white);
border-radius: 20px;
border: 1px solid rgba(124,8,179,0.08);
box-shadow: var(--shadow-lg);
overflow: hidden;
position: relative;
}
.fw-landing .demo-progress { height: 3px; background: var(--gray-100); }
.fw-landing .demo-progress-fill {
height: 100%;
background: linear-gradient(90deg, #7B2FD4, #9B4DFF);
border-radius: 0 2px 2px 0;
transition: width 0.6s var(--ease-out);
width: 0%;
}
.fw-landing .demo-steps {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 20px 32px 0;
}
.fw-landing .demo-step-dot {
display: flex;
align-items: center;
gap: 8px;
}
.fw-landing .demo-step-dot .dot {
width: 28px; height: 28px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 0.72rem; font-weight: 700;
background: var(--gray-100); color: var(--text-muted);
transition: all 0.4s ease;
flex-shrink: 0;
}
.fw-landing .demo-step-dot .dot.active {
background: linear-gradient(135deg, #7B2FD4, #9B4DFF);
color: #fff;
box-shadow: 0 0 16px rgba(123,47,212,0.3);
}
.fw-landing .demo-step-dot .dot.done { background: #10b981; color: #fff; }
.fw-landing .demo-step-dot .dot.done::after { content: '✓'; font-size: 0.68rem; }
.fw-landing .demo-step-dot .dot.done span { display: none; }
.fw-landing .demo-step-dot .label {
font-size: 0.75rem; font-weight: 600;
color: var(--text-muted); transition: color 0.3s; white-space: nowrap;
}
.fw-landing .demo-step-dot .label.active { color: var(--text-primary); }
.fw-landing .demo-step-dot .label.done { color: #10b981; }
.fw-landing .demo-step-line {
width: 40px; height: 2px;
background: var(--gray-200); border-radius: 1px; transition: background 0.3s;
}
.fw-landing .demo-step-line.done { background: #10b981; }
.fw-landing .demo-panel {
position: relative;
min-height: 670px;
padding: 28px 36px 36px;
overflow: hidden;
display: flex;
flex-direction: column;
}
.fw-landing .demo-screen {
position: absolute; inset: 0;
padding: 28px 36px 36px;
display: flex; flex-direction: column;
opacity: 0; transform: translateX(40px);
transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
pointer-events: none;
}
/* The active screen is taken back into flow so the panel sizes itself to whatever
step is showing. On desktop min-height wins; on mobile this replaces the old
fixed 950px slab that left the short steps mostly empty. */
.fw-landing .demo-screen.active {
position: relative; inset: auto; flex: 1 1 auto;
opacity: 1; transform: translateX(0); pointer-events: auto;
}
.fw-landing .url-screen { align-items: center; justify-content: center; text-align: center; }
.fw-landing .url-screen h3 { font-size: 1.4rem; font-weight: 800; color: var(--text-primary); margin-bottom: 8px; letter-spacing: -0.02em; }
.fw-landing .url-screen p { font-size: 0.88rem; color: var(--text-muted); margin-bottom: 28px; }
.fw-landing .url-input-group { width: 100%; max-width: 480px; margin-bottom: 20px; }
.fw-landing .url-input-box {
display: flex; align-items: center; gap: 10px;
padding: 14px 18px; background: var(--gray-50);
border: 1.5px solid var(--gray-200); border-radius: 12px; transition: border-color 0.3s;
}
.fw-landing .url-input-box.typing { border-color: #7B2FD4; }
.fw-landing .url-input-box .globe { width: 20px; height: 20px; color: var(--text-muted); flex-shrink: 0; }
.fw-landing .url-input-text { font-size: 0.92rem; color: var(--text-primary); font-weight: 500; min-height: 1.2em; }
.fw-landing .url-input-text .cursor-blink {
display: inline-block; width: 2px; height: 1em;
background: #7B2FD4; margin-left: 1px;
animation: demoBlink 0.8s step-end infinite; vertical-align: text-bottom;
}
@keyframes demoBlink { 50% { opacity: 0; } }.fw-landing .scan-btn {
width: 100%; max-width: 480px; padding: 14px;
background: linear-gradient(135deg, #7B2FD4, #9B4DFF);
color: #fff; border: none; border-radius: 12px;
font-weight: 700; font-size: 0.92rem; font-family: inherit;
display: flex; align-items: center; justify-content: center; gap: 8px;
box-shadow: 0 6px 20px rgba(123,47,212,0.25); transition: all 0.3s; cursor: pointer;
}
.fw-landing .scan-btn.loading { background: linear-gradient(135deg, #6922BD, #8538D8); }
.fw-landing .scan-btn .spinner {
width: 16px; height: 16px;
border: 2px solid rgba(255,255,255,0.3); border-top-color: #fff;
border-radius: 50%; animation: demoSpin 0.7s linear infinite; display: none;
}
.fw-landing .scan-btn.loading .spinner { display: block; }
.fw-landing .scan-btn.loading .btn-label { display: none; }
.fw-landing .scan-btn .loading-label { display: none; }
.fw-landing .scan-btn.loading .loading-label { display: inline; }
@keyframes demoSpin { to { transform: rotate(360deg); } }.fw-landing .setup-screen { flex-direction: row; gap: 24px; justify-content: center; }
.fw-landing .setup-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.fw-landing .setup-col-left { flex: 1.05; width: 100%; }
.fw-landing .setup-col-right { flex: 0.95; width: 100%; justify-content: center; }
.fw-landing .s-field {
background: var(--gray-50); border-radius: 12px;
padding: 12px 14px; border: 1px solid rgba(0,0,0,0.04);
opacity: 0; transform: translateY(10px); transition: all 0.4s ease;
}
.fw-landing .s-field.show { opacity: 1; transform: translateY(0); }
.fw-landing .s-field-label {
font-size: 0.66rem; font-weight: 700; color: var(--text-muted);
text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px;
display: flex; align-items: center; gap: 6px;
}
.fw-landing .s-field-label .ai-badge {
font-size: 0.56rem; background: linear-gradient(135deg, #7B2FD4, #9B4DFF);
color: #fff; padding: 1px 5px; border-radius: 3px; font-weight: 700;
letter-spacing: 0; text-transform: none;
}
.fw-landing .s-field-value { font-size: 0.82rem; color: var(--text-primary); font-weight: 600; min-height: 1.1em; }
.fw-landing .s-goals { display: flex; gap: 6px; }
.fw-landing .s-goal {
flex: 1; padding: 8px 6px; background: var(--white);
border: 1.5px solid var(--gray-200); border-radius: 8px;
text-align: center; transition: all 0.3s;
}
.fw-landing .s-goal.selected { border-color: #7B2FD4; background: rgba(123,47,212,0.06); }
.fw-landing .s-goal-icon { font-size: 0.92rem; margin-bottom: 2px; }
.fw-landing .s-goal-name { font-size: 0.65rem; font-weight: 600; color: var(--text-muted); }
.fw-landing .s-goal.selected .s-goal-name { color: #7B2FD4; }
.fw-landing .s-budget-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.fw-landing .s-slider-track { width: 100%; height: 4px; background: var(--gray-200); border-radius: 2px; position: relative; }
.fw-landing .s-slider-fill { height: 100%; background: linear-gradient(90deg, #7B2FD4, #9B4DFF); border-radius: 2px; width: 0%; transition: width 30ms linear; }
.fw-landing .s-slider-thumb {
width: 14px; height: 14px; background: #fff;
border: 2px solid #7B2FD4; border-radius: 50%;
position: absolute; top: -5px; left: 0%;
transition: left 30ms linear; box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.fw-landing .s-pills { display: flex; gap: 5px; flex-wrap: wrap; }
.fw-landing .s-pill {
padding: 5px 10px; border-radius: 6px;
font-size: 0.68rem; font-weight: 600;
background: var(--white); color: var(--text-muted);
border: 1px solid var(--gray-200); transition: all 0.3s;
}
.fw-landing .s-pill.on { background: #7B2FD4; color: #fff; border-color: #7B2FD4; }
.fw-landing .s-ad-header { display: flex; align-items: center; gap: 8px; padding: 12px 13px 8px; }
.fw-landing .s-ad-avatar {
width: 30px; height: 30px; border-radius: 50%;
background: linear-gradient(135deg, #7B2FD4, #9B4DFF);
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.fw-landing .s-ad-avatar svg { width: 12px; height: 12px; }
.fw-landing .s-ad-name { font-size: 0.72rem; font-weight: 700; color: #050505; line-height: 1.1; }
.fw-landing .s-ad-sponsored { font-size: 0.58rem; color: #65676b; line-height: 1.1; }
.fw-landing .s-ad-menu { margin-left: auto; color: #65676b; font-size: 1rem; line-height: 1; letter-spacing: 1px; }
.fw-landing .s-ad-text {
font-size: 0.72rem; color: #050505; line-height: 1.35;
padding: 0 13px 10px; min-height: 2em;
}
.fw-landing .s-link-preview {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
background: #f0f2f5; border-top: 1px solid rgba(0,0,0,0.05);
border-bottom: 1px solid rgba(0,0,0,0.05);
padding: 10px 11px;
}
.fw-landing .s-link-copy { min-width: 0; flex: 1; }
.fw-landing .s-link-meta {
font-size: 0.54rem; font-weight: 700; color: #65676b;
text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 2px;
}
.fw-landing .s-link-title {
font-size: 0.72rem; font-weight: 700; color: #050505;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fw-landing .s-link-description {
font-size: 0.58rem; color: #65676b;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fw-landing .s-ad-cta-btn {
flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
padding: 7px 12px; background: #e4e6eb; border-radius: 6px;
font-size: 0.66rem; font-weight: 700; color: #050505;
}
.fw-landing .s-engagement-row {
display: flex; align-items: center; justify-content: space-between;
padding: 8px 13px; color: #65676b; font-size: 0.62rem;
}
.fw-landing .s-reactions { display: inline-flex; align-items: center; gap: 4px; }
.fw-landing .s-reaction-icons { letter-spacing: -3px; font-size: 0.74rem; }
.fw-landing .s-action-row {
display: grid; grid-template-columns: repeat(3, 1fr);
border-top: 1px solid #e4e6eb; margin: 0 13px; padding: 7px 0;
}
.fw-landing .s-action {
display: flex; align-items: center; justify-content: center; gap: 4px;
color: #65676b; font-size: 0.66rem; font-weight: 700;
}
.fw-landing .video-screen { align-items: center; justify-content: center; }
.fw-landing .video-screen h3 { font-size: 1.2rem; font-weight: 800; color: var(--text-primary); margin-bottom: 6px; letter-spacing: -0.02em; }
.fw-landing .video-screen p { font-size: 0.82rem; color: var(--text-muted); margin-bottom: 24px; }
.fw-landing .template-row { display: flex; gap: 14px; justify-content: center; margin-bottom: 24px; }
.fw-landing .tpl-card {
width: 110px; aspect-ratio: 9/16; border-radius: 14px;
overflow: hidden; border: 2.5px solid var(--gray-200);
transition: all 0.4s var(--ease-spring); position: relative; cursor: pointer;
opacity: 0; transform: translateY(16px) scale(0.95);
}
.fw-landing .tpl-card.show { opacity: 1; transform: translateY(0) scale(1); }
.fw-landing .tpl-card.selected {
border-color: #7B2FD4;
box-shadow: 0 0 0 3px rgba(123,47,212,0.2);
transform: translateY(-4px) scale(1.04);
}
.fw-landing .tpl-card video { width: 100%; height: 100%; object-fit: cover; }
.fw-landing .tpl-card .check {
position: absolute; top: 6px; right: 6px;
width: 22px; height: 22px; background: #7B2FD4; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
opacity: 0; transform: scale(0); transition: all 0.3s var(--ease-spring);
}
.fw-landing .tpl-card.selected .check { opacity: 1; transform: scale(1); }
.fw-landing .tpl-card .check svg { width: 12px; height: 12px; }
.fw-landing .tpl-label { font-size: 0.68rem; font-weight: 600; color: var(--text-muted); text-align: center; margin-top: 6px; }
.fw-landing .generate-btn {
padding: 14px 48px;
background: linear-gradient(135deg, #7B2FD4, #9B4DFF);
color: #fff; border: none; border-radius: 12px;
font-weight: 700; font-size: 0.92rem; font-family: inherit;
display: flex; align-items: center; justify-content: center; gap: 8px;
box-shadow: 0 6px 20px rgba(123,47,212,0.25);
opacity: 0; transform: translateY(10px); transition: all 0.4s ease; cursor: pointer;
}
.fw-landing .generate-btn.show { opacity: 1; transform: translateY(0); }
.fw-landing .generate-btn .spinner {
width: 16px; height: 16px;
border: 2px solid rgba(255,255,255,0.3); border-top-color: #fff;
border-radius: 50%; animation: demoSpin 0.7s linear infinite; display: none;
}
.fw-landing .generate-btn.loading .spinner { display: block; }
.fw-landing .generate-btn.loading .gen-label { display: none; }
.fw-landing .generate-btn .gen-loading { display: none; }
.fw-landing .generate-btn.loading .gen-loading { display: inline; }
.fw-landing .success-screen { align-items: center; justify-content: center; }
.fw-landing .success-inner {
display: flex; gap: 34px; align-items: center; justify-content: center;
width: 100%; max-width: 680px;
opacity: 0; transform: scale(0.9); transition: all 0.6s var(--ease-spring);
}
@media (max-width: 768px) {.fw-landing .success-inner {
flex-direction: column;
}
}.fw-landing .success-inner.show { opacity: 1; transform: scale(1); }
.fw-landing .success-ad-card {
width: 282px; flex-shrink: 0; background: var(--white); border-radius: 10px;
padding: 0; overflow: hidden; box-shadow: 0 14px 44px rgba(15,23,42,0.14);
border: 1px solid #dadde1;
}
.fw-landing .success-details {
flex: 0 1 265px; min-width: 0; text-align: left;
opacity: 0.82;
}
.fw-landing .success-details-title {
font-size: 0.66rem; font-weight: 700; color: var(--text-muted);
text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 10px;
}
.fw-landing .success-detail-row {
display: flex; justify-content: space-between; align-items: center;
padding: 7px 0; border-bottom: 1px solid var(--gray-100);
font-size: 0.74rem;
}
.fw-landing .success-detail-row:last-child { border-bottom: none; }
.fw-landing .success-detail-label { color: var(--text-muted); font-weight: 500; }
.fw-landing .success-detail-value { color: var(--text-primary); font-weight: 600; text-align: right; }
.fw-landing .success-detail-pills { display: flex; gap: 4px; }
.fw-landing .success-detail-pills span {
padding: 2px 7px; border-radius: 4px; font-size: 0.62rem; font-weight: 600;
background: rgba(123,47,212,0.08); color: #7B2FD4;
}
.fw-landing .s-ad-video {
width: 100%; aspect-ratio: 4/5;
overflow: hidden; background: #0d0d14; position: relative;
}
.fw-landing .s-ad-video video { width: 100%; height: 100%; object-fit: cover; object-position: center 44%; }
.fw-landing .s-ad-video .badge {
position: absolute; top: 8px; left: 8px;
padding: 4px 8px; background: rgba(0,0,0,0.58); backdrop-filter: blur(6px);
border-radius: 999px; font-size: 0.62rem; font-weight: 700; color: #fff;
display: flex; align-items: center; gap: 4px;
}
.fw-landing .s-ad-video .badge svg { width: 9px; height: 9px; }
.fw-landing .success-bottom {
text-align: center; margin-top: 16px; width: 100%;
}
.fw-landing .success-badge {
display: inline-flex; align-items: center; gap: 6px;
padding: 8px 20px; background: #ecfdf5; border: 1px solid #d1fae5;
border-radius: 100px; font-size: 0.82rem; font-weight: 700; color: #047857;
margin-bottom: 6px; opacity: 0; transform: translateY(10px); transition: all 0.5s ease 0.3s;
}
.fw-landing .success-badge.show { opacity: 1; transform: translateY(0); }
.fw-landing .success-badge svg { width: 16px; height: 16px; }
.fw-landing .success-text { font-size: 0.78rem; color: var(--text-muted); opacity: 0; transition: opacity 0.5s ease 0.5s; }
.fw-landing .success-text.show { opacity: 1; }
.fw-landing .confetti-container { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 10; }
.fw-landing .confetti-piece {
position: absolute; width: 8px; height: 8px; border-radius: 2px; top: -10px;
animation: confettiFall 2.5s ease-in forwards;
}
@keyframes confettiFall {
0% { transform: translateY(0) rotate(0deg); opacity: 1; }
100% { transform: translateY(500px) rotate(720deg); opacity: 0; }
}
@media (max-width: 768px) {
/* Panel height follows the active step (see .demo-screen.active). The panel's
own padding is dropped so the only side gutter is the screen's -- previously
36px panel + 20px screen ate ~112px of a 360px viewport. */
.fw-landing .demo-panel { min-height: 380px; padding: 0; }
.fw-landing .demo-screen { padding: 18px 16px 24px; }
/* Step rail spans the full width; only the current step keeps its label. */
.fw-landing .demo-steps { gap: 6px; padding: 16px 14px 0; }
.fw-landing .demo-step-dot { gap: 6px; min-width: 0; }
.fw-landing .demo-step-dot .dot { width: 24px; height: 24px; font-size: 0.66rem; }
.fw-landing .demo-step-dot .label { display: none; font-size: 0.7rem; }
/* nowrap is inherited, so cap the one visible label rather than let a long
translation push the rail wider than the widget. */
.fw-landing .demo-step-dot .label.active {
display: block; max-width: 96px; overflow: hidden; text-overflow: ellipsis;
}
.fw-landing .demo-step-line { flex: 1 1 auto; width: auto; min-width: 8px; }
/* Step 1 */
.fw-landing .url-screen h3 { font-size: 1.15rem; }
.fw-landing .url-screen p { font-size: 0.8rem; margin-bottom: 20px; }
.fw-landing .url-input-group { margin-bottom: 14px; }
.fw-landing .url-input-box { padding: 12px 14px; }
/* Step 3: one column. The typed fields reserve their final height so the panel
doesn't grow line-by-line while the text types in. */
.fw-landing .setup-screen { flex-direction: column; gap: 10px; justify-content: flex-start; }
.fw-landing .setup-col { gap: 10px; }
.fw-landing .setup-col-right { justify-content: flex-start; }
.fw-landing .s-field { padding: 10px 12px; }
.fw-landing #sf-campaign .s-field-value,
.fw-landing #sf-audience .s-field-value,
.fw-landing #sf-headline .s-field-value { min-height: 2.3em; }
.fw-landing #sf-description .s-field-value {
display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
overflow: hidden; line-height: 1.45; min-height: 5.8em;
}
/* Step 4: templates scale with the width instead of overflowing a fixed px row. */
.fw-landing .video-screen h3 { font-size: 1.1rem; }
.fw-landing .video-screen p { font-size: 0.78rem; margin-bottom: 18px; }
.fw-landing .template-row {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 8px; width: 100%; margin-bottom: 20px;
}
.fw-landing .tpl-card { width: 100%; }
.fw-landing .generate-btn { width: 100%; padding: 13px 20px; }
/* Step 5 */
.fw-landing .success-inner { flex-direction: column; gap: 18px; max-width: 320px; }
.fw-landing .success-ad-card { width: 100%; margin-top: 0; }
.fw-landing .s-ad-video { aspect-ratio: 1 / 1; }
.fw-landing .success-details { flex: 0 0 auto; width: 100%; }
.fw-landing .success-detail-row { padding: 6px 0; }
.fw-landing .success-bottom { margin-top: 14px; }
.fw-landing .hero-demo-cta-bar { flex-direction: column; gap: 12px; }
.fw-landing .container {
padding: 0 12px;
}
}
@media (max-width: 400px) {
.fw-landing .demo-screen { padding: 16px 12px 20px; }
.fw-landing .demo-steps { padding: 14px 10px 0; gap: 5px; }
.fw-landing .demo-step-dot .dot { width: 22px; height: 22px; font-size: 0.62rem; }
.fw-landing .demo-step-dot .label.active { font-size: 0.66rem; max-width: 74px; }
.fw-landing .template-row { gap: 6px; }
.fw-landing .tpl-label { font-size: 0.62rem; }
}
@keyframes dpulse { 0%,100%{opacity:0.3;transform:scale(0.8)} 50%{opacity:1;transform:scale(1.1)} }
/* The app's Tailwind Preflight sets `line-height: inherit` on form controls, which the
original static page never had -- buttons there kept the UA default and were 6px shorter.
Restore UA behaviour inside the ported subtree so geometry matches the original exactly. */
.fw-landing button,
.fw-landing input,
.fw-landing select,
.fw-landing textarea {
line-height: normal;
}
/* Mobile nav: the language picker moved into the React drawer
(src/components/landing-shared/MobileMenu.tsx), so the top-bar switcher that
(LanguageSwitcher, #langSwitcher) is hidden below 768px. Everything else
about the switcher -- desktop included -- is untouched. */
@media (max-width: 768px) {
.fw-landing #langSwitcher { display: none; }
}
/* ==========================================================================
FIGMA MOBILE (390) -- overrides
Source: FastAdwise / "Campaign landing -- Mobile 390" (node 6890:7632).
One sub-block per design frame, appended at the end of the sheet so each can
be reverted on its own without touching the rules above.
========================================================================== */
/* --- Nav logo (node 6925:8866) -------------------------------------------
The design's logo slot is 141x36. logo.svg is natively 230x61 (ratio 3.77)
and the slot is 3.92, so pinning both axes outright would stretch it ~4%
horizontally; object-fit keeps the artwork's own ratio inside the exact box
the design calls for. `.fw-landing img { height: auto }` is why height has
to be set on this more specific selector. */
@media (max-width: 768px) {
.fw-landing .logo img {
width: 141px;
height: 36px;
object-fit: contain;
object-position: left center;
}
}
/* --- Hero (node 6890:7642) -----------------------------------------------
Frame: 36px top pad, 20px side gutter, 20px gap between every element.
Covers the badge, headline, subtitle and the two CTAs only -- the demo
widget below them is a separate frame and is not touched here. */
@media (max-width: 768px) {
/* 72px fixed navbar + the frame's own 36px top padding */
.fw-landing .hero { padding-top: 108px; }
/* The design's 350px content on a 390px screen; the global mobile gutter
is 12px, so it is widened for this section only. */
.fw-landing .hero > .container { padding-left: 20px; padding-right: 20px; }
/* Badge 6890:7643 -- flat lilac pill, no border or shadow in the design */
.fw-landing .hero-badge {
gap: 8px;
padding: 8px 14px;
background: #f2eefa;
border: none;
border-radius: 99px;
font-size: 12px;
color: #374151;
box-shadow: none;
margin-bottom: 20px;
}
.fw-landing .hero-badge-dot { width: 8px; height: 8px; }
/* Headline 6890:7646 -- 32/38, and the copy wraps on its own: the hard
from the desktop markup would break it in the wrong place at 350px. */
.fw-landing .hero h1 {
font-size: 32px;
line-height: 38px;
color: #0f172a;
margin-bottom: 20px;
}
.fw-landing .hero h1 br { display: none; }
/* The design paints the whole headline one colour -- no purple gradient on
the second line. Revert this rule to bring the gradient back on mobile. */
.fw-landing .hero h1 .gradient-text {
background: none;
-webkit-text-fill-color: #0f172a;
color: #0f172a;
}
/* Subtitle 6890:7647 */
.fw-landing .hero-subtitle {
font-size: 15px;
line-height: 23px;
color: #374151;
margin: 0 auto 20px;
}
/* CTAs 6890:7648 -- two full-width 52px pills, 24px apart. The design has
no icons inside either button, so the ported