:root {
--color-background: var(--bg);
--color-text-primary: var(--fg);
--color-text-secondary: var(--fg-muted);
--color-text-muted: var(--fg-dim);
--color-accent: var(--accent);
--color-success: var(--success);
--color-primary: var(--accent);
--color-black: #0b0b0d;
--shadow-card: var(--shadow);
--shadow-card-hover: var(--shadow-lg);
--shadow-elevated: var(--shadow-lg);
--transition-fast: var(--transition);
--transition-normal: var(--transition);
--transition-base: var(--transition);
--radius-full: 9999px;
--space-xs: 8px;
--space-sm: 12px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 32px;
--space-2xl: 48px;
--space-3xl: 64px;
--glass-border: rgba(255,255,255,0.1);
--gold: var(--accent);
--home-chip-bg: rgba(255,255,255,0.05);
--home-chip-border: rgba(255,255,255,0.08);
--home-card-bg: rgba(255,255,255,0.04);
--home-card-border: rgba(255,255,255,0.06);
--home-shell-bg: linear-gradient(180deg,rgba(21,21,25,0.75),rgba(15,15,19,0.45));
--home-panel-bg: linear-gradient(180deg, rgba(21,21,25,0.98), rgba(11,11,13,0.98));
--home-trust-bg: rgba(15,15,19,0.92);
--home-search-bg: rgba(255,255,255,0.05);
--home-input-bg: rgba(255,255,255,0.06);
}
html.light {
--home-chip-bg: rgba(17,16,16,0.035);
--home-chip-border: rgba(17,16,16,0.08);
--home-card-bg: rgba(17,16,16,0.03);
--home-card-border: rgba(17,16,16,0.08);
--home-shell-bg: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(244,241,234,0.95));
--home-panel-bg: linear-gradient(180deg, rgba(255,255,255,0.99), rgba(241,237,228,0.98));
--home-trust-bg: rgba(255,255,255,0.94);
--home-search-bg: rgba(17,16,16,0.03);
--home-input-bg: rgba(17,16,16,0.04);
}
.home-main { padding-top: 0; }
.home-stack {
	max-width: 1200px;
	width: 100%;
	margin: 0 auto;
	padding: 24px;
}
.hero.home-hero { min-height: auto; padding-top: 96px; padding-bottom: 72px; }
.home-hero-grid {
display: grid;
grid-template-columns: minmax(0,1.15fr) minmax(320px,0.85fr);
align-items: center;
gap: 36px;
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
}
.hero-kicker, .section-kicker {
display: inline-flex; align-items: center; gap: 10px;
padding: 8px 14px;
border: 1px solid var(--home-chip-border); border-radius: 9999px;
background: var(--home-chip-bg);
color: var(--accent); font-size: .85rem; font-weight: 700;
letter-spacing: .04em; text-transform: uppercase; margin-bottom: 18px;
}
.hero-title { margin-bottom: 18px; font-size: clamp(1.9rem,4vw,2.8rem); font-weight: 800; line-height: 1.15; }
.hero-lead { font-size: 1.05rem; max-width: 700px; color: var(--fg-muted); margin-bottom: 24px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 18px; }
.btn-large { padding: 14px 22px; font-size: .95rem; font-weight: 700; border-radius: var(--radius-lg); }
.hero-sub-actions { color: var(--fg-dim); margin-bottom: 22px; font-size: .95rem; }
.hero-sub-actions a { color: var(--accent); font-weight: 600; }
.hero-signal-list { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.signal-chip {
padding: 10px 14px; border-radius: 9999px;
background: var(--home-chip-bg); border: 1px solid var(--home-chip-border);
color: var(--fg-muted); font-size: .9rem; font-weight: 600;
}
.hero-search-shell {
max-width: 640px; background: var(--home-search-bg);
border: 1px solid var(--home-chip-border); border-radius: var(--radius-xl); padding: 16px;
}
.hero-search-title { font-size: .95rem; font-weight: 700; color: var(--fg); margin-bottom: 10px; }
.search-bar { display: flex; gap: 8px; }
.search-input {
flex: 1; background: var(--home-input-bg); border: 1px solid var(--home-chip-border);
border-radius: var(--radius); padding: 10px 14px; color: var(--fg); font-size: .95rem;
}
.search-input::placeholder { color: var(--fg-dim); }
.search-btn {
padding: 10px 18px; background: var(--accent); border: none; border-radius: var(--radius);
color: #000; font-weight: 700; cursor: pointer; display: flex; align-items: center; gap: 6px;
}
.home-hero-panel {
background: var(--home-panel-bg);
border: 1px solid var(--home-chip-border); border-radius: 28px; padding: 24px;
box-shadow: var(--shadow-lg);
}
.home-panel-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px; }
.live-badge {
display: inline-flex; align-items: center; gap: 8px;
font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--success);
}
.live-badge::before {
content: ''; width: 8px; height: 8px; border-radius: 50%;
background: var(--success); box-shadow: 0 0 0 6px rgba(62,207,142,.12);
}
.preview-status { font-size: .8rem; font-weight: 700; color: var(--fg-dim); text-transform: uppercase; letter-spacing: .05em; }
.home-panel-title { font-size: 1.3rem; font-weight: 700; margin-bottom: 8px; }
.home-panel-copy { font-size: .98rem; color: var(--fg-muted); margin-bottom: 18px; }
.workflow-list { display: grid; gap: 14px; margin-bottom: 20px; }
.workflow-step {
display: grid; grid-template-columns: 42px 1fr; gap: 14px; padding: 14px;
border-radius: 18px; background: var(--home-card-bg); border: 1px solid var(--home-card-border);
}
.workflow-index {
width: 42px; height: 42px; border-radius: 14px; display: flex; align-items: center;
justify-content: center; background: linear-gradient(135deg, var(--accent), #b8862e);
color: #000; font-weight: 800; font-size: 1.1rem; flex-shrink: 0;
}
.workflow-step strong { display: block; color: var(--fg); margin-bottom: 4px; font-weight: 700; }
.workflow-step p { color: var(--fg-muted); font-size: .95rem; }
.panel-metrics { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; }
.panel-metric {
padding: 14px; border-radius: 18px;
background: var(--home-card-bg); border: 1px solid var(--home-card-border);
}
.panel-metric-value { font-size: 1.35rem; font-weight: 700; color: var(--fg); margin-bottom: 4px; }
.panel-metric-label { font-size: .9rem; color: var(--fg-dim); }
.trust-band { max-width: 1200px; margin: -16px auto 0; padding: 0 24px; position: relative; z-index: 2; }
.trust-band-inner {
display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
padding: 18px 20px; background: var(--home-trust-bg); backdrop-filter: blur(12px);
border: 1px solid var(--home-chip-border); border-radius: 22px; box-shadow: var(--shadow);
}
.trust-band-title { color: var(--fg-muted); font-size: .95rem; font-weight: 600; margin-right: 6px; }
.trust-pill {
padding: 8px 12px; border-radius: 9999px;
background: var(--home-chip-bg); color: var(--fg); font-size: .85rem; font-weight: 600;
}
.section-shell {
padding: 24px; border-radius: 28px;
background: var(--home-shell-bg);
border: 1px solid var(--home-card-border); box-shadow: var(--shadow);
}
.home-stack > * + * { margin-top: 24px; }
.home-section-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; margin-bottom: 20px; }
.section-lead { max-width: 680px; color: var(--fg-muted); font-size: .98rem; }
.journey-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.benefit-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; }
.path-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; }
.faq-grid-home { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; }
.home-card {
padding: 22px; border-radius: 22px;
background: var(--home-card-bg); border: 1px solid var(--home-card-border);
}
.home-card-icon {
width: 48px; height: 48px; display: inline-flex; align-items: center;
justify-content: center; border-radius: 16px;
background: linear-gradient(135deg,rgba(212,168,67,.18),rgba(212,168,67,.08));
margin-bottom: 16px; font-size: 1.35rem;
}
.home-card h3 { margin-bottom: 10px; font-size: 1.05rem; font-weight: 700; }
.home-card p { color: var(--fg-muted); font-size: .93rem; line-height: 1.65; }
.creator-snapshot-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.marketplace-note { font-size: .95rem; color: var(--fg-dim); margin-bottom: 18px; }
.snapshot-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.snapshot-tag {
padding: 10px 14px; border-radius: 9999px;
background: var(--home-chip-bg); border: 1px solid var(--home-card-border);
color: var(--fg-muted); font-size: .9rem; font-weight: 600; text-decoration: none;
}
.snapshot-tag:hover { border-color: var(--accent); color: var(--accent); }
.path-list { list-style: none; margin: 16px 0 22px; display: grid; gap: 10px; }
.path-list li { position: relative; padding-left: 22px; color: var(--fg-muted); font-size: .95rem; }
.path-list li::before { content: '\\2022'; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
.faq-item {
padding: 18px 20px; border-radius: 20px;
background: var(--home-card-bg); border: 1px solid var(--home-card-border);
}
.faq-item summary { list-style: none; cursor: pointer; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-question { font-size: 1rem; font-weight: 700; color: var(--fg); }
.faq-answer { margin-top: 12px; color: var(--fg-muted); font-size: .95rem; line-height: 1.65; }
.home-cta { padding-top: 84px; padding-bottom: 84px; margin-top: 24px; text-align: center; }
.home-cta .hero-content { max-width: 860px; margin: 0 auto; }
.preview-fallback {
grid-column: 1/-1; padding: 28px; text-align: center; border-radius: 22px;
background: var(--home-card-bg); border: 1px solid var(--home-card-border);
}
.preview-fallback-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.offer-preview-grid, .blog-preview-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.offer-preview-card, .blog-preview-card {
display: block; border-radius: 22px;
background: var(--home-card-bg); border: 1px solid var(--home-card-border);
overflow: hidden; text-decoration: none;
transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.offer-preview-card:hover, .blog-preview-card:hover {
transform: translateY(-3px); border-color: rgba(212,168,67,0.3); box-shadow: var(--shadow-lg);
}
.offer-preview-image-wrap, .blog-preview-image-wrap {
position: relative; height: 190px;
background: linear-gradient(135deg,rgba(212,168,67,.12),rgba(212,168,67,.05)); overflow: hidden;
}
.offer-preview-image, .blog-preview-image { width: 100%; height: 100%; object-fit: cover; display: block; }
.offer-preview-image-fallback, .blog-preview-image-fallback {
width: 100%; height: 100%; display: flex; align-items: center;
justify-content: center; font-size: 3rem;
}
.offer-preview-content, .blog-preview-content { display: flex; flex-direction: column; gap: 14px; padding: 20px; }
.offer-preview-top, .blog-preview-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.offer-preview-platform, .blog-preview-category {
display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px;
border-radius: 9999px; font-size: .8rem; font-weight: 700;
background: var(--home-chip-bg); color: var(--fg-muted);
}
.offer-preview-price {
display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px;
border-radius: 9999px; font-size: .8rem; font-weight: 700;
background: rgba(212,168,67,.14); color: var(--accent);
}
.blog-preview-date {
display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px;
border-radius: 9999px; font-size: .8rem; font-weight: 700;
background: rgba(212,168,67,.14); color: var(--accent);
}
.offer-preview-card h3, .blog-preview-card h3 { font-size: 1.05rem; margin-bottom: 8px; color: var(--fg); font-weight: 700; }
.offer-preview-copy, .blog-preview-copy {
color: var(--fg-muted); font-size: .92rem; margin-bottom: 8px;
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.offer-meta-chip, .blog-meta-chip {
padding: 6px 10px; border-radius: 9999px;
background: var(--home-chip-bg); font-size: .82rem; font-weight: 600; color: var(--fg-muted);
}
.offer-preview-meta, .blog-preview-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.offer-preview-footer, .blog-preview-footer {
display: flex; justify-content: space-between; align-items: center; gap: 12px;
padding-top: 14px; border-top: 1px solid var(--home-card-border);
}
.offer-preview-creator, .blog-preview-author { font-size: .9rem; color: var(--fg-dim); }
.offer-preview-link, .blog-preview-link { font-size: .9rem; font-weight: 700; color: var(--accent); }
.loading { width: 32px; height: 32px; border: 3px solid var(--home-chip-border); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; margin: 0 auto; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading-state { text-align: center; padding: 48px; }
.loading-state p { margin-top: 16px; color: var(--fg-dim); }
.below-fold { content-visibility: auto; contain-intrinsic-size: 720px; }
.cards-section { margin-bottom: 0; }
.section-shell,
.home-card,
.workflow-step,
.panel-metric,
.faq-item,
.preview-fallback,
.blog-preview-card {
	background: var(--bg-card);
	border: 1px solid var(--border);
	box-shadow: var(--shadow);
}

.section-shell {
	border-radius: var(--radius-xl);
}

.home-card,
.workflow-step,
.panel-metric,
.faq-item,
.preview-fallback,
.blog-preview-card {
	border-radius: var(--radius-lg);
}

.offer-preview-grid .offer-card-modern,
.cards-grid .influencer-card-modern {
	height: 100%;
}
@media (max-width: 1024px) {
.home-hero-grid, .journey-grid, .benefit-grid, .path-grid, .faq-grid-home,
.offer-preview-grid, .blog-preview-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
.hero.home-hero { padding-top: 100px; padding-bottom: 52px; }
.home-stack { padding: 20px 16px; }
.section-shell { padding: 20px; }
.home-section-header { flex-direction: column; align-items: flex-start; }
.hero-actions, .preview-fallback-actions { flex-direction: column; }
.panel-metrics { grid-template-columns: 1fr; }
.trust-band { padding: 0 16px; }
}