/* Homepage V2 - Elevated Direct Response Design */ /* Brutalist Terminal meets Editorial Clarity */ /* Note: Google Fonts import moved to HTML to avoid CSS bundling issues */ :root { --bg-black: #0a0a0a; --bg-dark: #111111; --bg-card: #161616; --bg-elevated: #1a1a1a; --text-white: #fafafa; --text-gray: #c4c4c4; --text-muted: #8a8a8a; --accent: #c8ff00; --accent-dim: rgba(200, 255, 0, 0.15); --accent-glow: rgba(200, 255, 0, 0.4); --red: #ff3b3b; --red-dim: rgba(255, 59, 59, 0.15); --border: #2a2a2a; --border-light: #333333; --font-display: 'Outfit', system-ui, sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); } /* Base */ .homepage-v2 { background: var(--bg-black); color: var(--text-white); font-family: var(--font-display); line-height: 1.7; letter-spacing: 0.01em; overflow-x: hidden; width: 100%; max-width: 100%; } .homepage-v2 *, .homepage-v2 *::before, .homepage-v2 *::after { box-sizing: border-box; max-width: 100%; } /* Sticky Header */ .header-v2 { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: rgba(10, 10, 10, 0.8); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--border); } .header-inner { max-width: 1200px; margin: 0 auto; padding: 16px 24px; display: flex; justify-content: space-between; align-items: center; } .homepage-v2 .logo-v2 { font-family: var(--font-display); font-size: 20px; font-weight: 800; color: var(--text-white); text-decoration: none; letter-spacing: -0.5px; } .homepage-v2 .logo-v2 span { color: var(--accent); font-weight: 700; } .nav-v2 { display: flex; align-items: center; gap: 24px; } .nav-link { color: var(--text-gray); text-decoration: none; font-size: 14px; font-weight: 500; transition: color 0.2s; } .nav-link:hover { color: var(--text-white); } .homepage-v2 .nav-cta { background: var(--accent); color: var(--bg-black); padding: 10px 20px; border-radius: 6px; font-size: 14px; font-weight: 700; text-decoration: none; transition: all 0.2s var(--ease-out); } .homepage-v2 .nav-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 24px var(--accent-glow); } /* Hero Section */ .hero-v2 { padding: 140px 24px 100px; min-height: 100vh; display: flex; align-items: center; } .hero-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } .hero-content-v2 { max-width: 560px; } /* Setup Badge */ .setup-badge { display: inline-flex; align-items: center; gap: 8px; background: var(--accent-dim); border: 1px solid rgba(200, 255, 0, 0.3); color: var(--accent); padding: 8px 16px; border-radius: 100px; font-size: 13px; font-weight: 600; font-family: var(--font-mono); margin-bottom: 32px; animation: pulse-badge-accent 3s infinite; } @keyframes pulse-badge-accent { 0%, 100% { box-shadow: 0 0 0 0 rgba(200, 255, 0, 0.3); } 50% { box-shadow: 0 0 20px 4px rgba(200, 255, 0, 0.2); } } .setup-icon { font-size: 14px; } /* Rotating Text */ .highlight-rotating { position: relative; display: inline-block; min-width: 380px; min-height: 1.2em; vertical-align: bottom; } .highlight-rotating.secondary { min-width: 320px; } .rotating-text { position: absolute; top: 0; left: 0; color: var(--accent); opacity: 0; transition: opacity 0.3s ease-in-out; white-space: nowrap; } .rotating-text.active { opacity: 1; } /* Hero Features List */ .hero-features { list-style: none; padding: 0; margin: 0 0 24px 0; } .hero-features li { position: relative; padding-left: 24px; margin-bottom: 12px; font-size: 17px; color: var(--text-gray); line-height: 1.7; } .hero-features li::before { content: "•"; position: absolute; left: 0; color: var(--accent); font-weight: 700; } /* Tech Stack V2 */ .tech-stack-v2 { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 32px; padding-top: 24px; border-top: 1px solid var(--border); } .tech-stack-v2 .tech-label { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; } .tech-stack-v2 .tech-item { font-size: 12px; color: var(--text-gray); background: var(--bg-elevated); padding: 6px 12px; border-radius: 6px; border: 1px solid var(--border); font-family: var(--font-mono); } /* Pain Badge - The contrarian hook (kept for compatibility) */ .pain-badge { display: inline-flex; align-items: center; gap: 8px; background: var(--red-dim); border: 1px solid rgba(255, 59, 59, 0.3); color: var(--red); padding: 8px 16px; border-radius: 100px; font-size: 13px; font-weight: 600; font-family: var(--font-mono); margin-bottom: 32px; animation: pulse-badge 3s infinite; } @keyframes pulse-badge { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 59, 59, 0.3); } 50% { box-shadow: 0 0 20px 4px rgba(255, 59, 59, 0.2); } } .pain-icon { font-size: 14px; } /* Hero Headline */ .hero-headline { font-size: clamp(40px, 5vw, 56px); font-weight: 800; line-height: 1.1; letter-spacing: -2px; margin: 0 0 24px 0; color: var(--text-white); } .highlight-text { color: var(--accent); position: relative; } .highlight-text::after { content: ''; position: absolute; bottom: 2px; left: 0; right: 0; height: 4px; background: var(--accent); opacity: 0.3; border-radius: 2px; } /* Hero Subhead */ .hero-subhead { font-size: 19px; line-height: 1.75; color: var(--text-gray); margin: 0 0 32px 0; } .hero-subhead strong { color: var(--text-white); font-weight: 600; } /* Proof Strip */ .proof-strip { display: flex; align-items: center; gap: 24px; padding: 20px 0; margin-bottom: 32px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .proof-item { display: flex; flex-direction: column; gap: 4px; } .proof-number { font-family: var(--font-mono); font-size: 24px; font-weight: 800; color: var(--accent); letter-spacing: -1px; } .proof-label { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; } .proof-divider { width: 1px; height: 40px; background: var(--border); } /* Hero CTA */ .hero-cta-group { display: flex; flex-direction: column; gap: 12px; } .homepage-v2 .cta-primary-v2 { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--accent); color: var(--bg-black); padding: 18px 36px; border-radius: 8px; font-size: 16px; font-weight: 700; text-decoration: none; transition: all 0.25s var(--ease-out); align-self: flex-start; } .homepage-v2 .cta-primary-v2:hover { transform: translateY(-3px); box-shadow: 0 12px 32px var(--accent-glow); } .cta-arrow { font-size: 18px; transition: transform 0.2s var(--ease-out); } .homepage-v2 .cta-primary-v2:hover .cta-arrow { transform: translateX(4px); } .cta-subtext { font-size: 13px; color: var(--text-muted); } /* Slack Demo Visual */ .hero-visual { position: relative; } .slack-demo-v2 { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255,255,255,0.05), 0 20px 60px rgba(0,0,0,0.5), 0 40px 80px rgba(0,0,0,0.3); transform: perspective(1000px) rotateY(-5deg) rotateX(2deg); transition: transform 0.5s var(--ease-out); } .slack-demo-v2:hover { transform: perspective(1000px) rotateY(-2deg) rotateX(1deg); } .slack-header-v2 { background: var(--bg-elevated); padding: 14px 20px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--border); } .slack-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--border-light); } .slack-dot:first-child { background: #ff5f56; } .slack-dot:nth-child(2) { background: #ffbd2e; } .slack-dot:nth-child(3) { background: #27c93f; } .slack-channel { margin-left: auto; font-family: var(--font-mono); font-size: 13px; color: var(--text-gray); } .slack-body-v2 { padding: 20px; display: flex; flex-direction: column; gap: 16px; } .slack-msg { display: flex; gap: 12px; animation: fadeInUp 0.5s var(--ease-out) backwards; } .slack-msg:nth-child(1) { animation-delay: 0.1s; } .slack-msg:nth-child(2) { animation-delay: 0.3s; } .slack-msg:nth-child(3) { animation-delay: 0.5s; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .slack-avatar-v2 { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; } .slack-avatar-v2.human { background: linear-gradient(135deg, #6366f1, #8b5cf6); color: white; } .slack-avatar-v2.bot { background: var(--accent); color: var(--bg-black); font-family: var(--font-mono); font-size: 10px; } .slack-msg-content { flex: 1; min-width: 0; } .slack-msg-header { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; } .slack-name-v2 { font-weight: 700; font-size: 14px; color: var(--text-white); } .slack-badge-v2 { background: var(--accent-dim); color: var(--accent); font-size: 10px; padding: 2px 6px; border-radius: 4px; font-weight: 700; font-family: var(--font-mono); } .slack-time { font-size: 11px; color: var(--text-muted); } .slack-msg-text { font-size: 15px; line-height: 1.7; color: var(--text-gray); } .slack-msg-text code { background: var(--bg-elevated); padding: 2px 6px; border-radius: 4px; font-family: var(--font-mono); font-size: 12px; color: var(--accent); } .slack-response-time { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 11px; color: var(--text-muted); } .response-dot { width: 6px; height: 6px; border-radius: 50%; background: #27c93f; } .bot-msg { background: rgba(200, 255, 0, 0.03); border-radius: 12px; padding: 12px; margin: -4px; } /* Typing Indicator */ .typing-indicator { display: flex; gap: 12px; align-items: flex-start; opacity: 0.7; } .typing-dots { display: flex; gap: 4px; padding: 12px 16px; background: var(--bg-elevated); border-radius: 12px; } .typing-dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: typing 1.4s infinite; } .typing-dots span:nth-child(2) { animation-delay: 0.2s; } .typing-dots span:nth-child(3) { animation-delay: 0.4s; } @keyframes typing { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-6px); opacity: 1; } } /* Research Callout in Hero */ .research-callout { background: var(--bg-card); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 8px; padding: 20px; margin: 24px 0; display: flex; gap: 20px; align-items: flex-start; } .research-stat { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; } .stat-number { font-family: var(--font-mono); font-size: 32px; font-weight: 800; color: var(--accent); } .stat-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; } .research-cite { font-size: 14px; color: var(--text-gray); line-height: 1.6; margin: 0; } .research-cite a { color: var(--accent); text-decoration: underline; } .hero-followup { font-size: 16px; color: var(--text-muted); line-height: 1.7; margin: 0; } /* Slack Interrupt Divider */ .slack-interrupt { display: flex; align-items: center; gap: 12px; padding: 12px 0; } .interrupt-line { flex: 1; height: 1px; background: var(--red); opacity: 0.3; } .interrupt-text { font-size: 12px; color: var(--red); font-style: italic; white-space: nowrap; } .slack-avatar-v2.eng { background: linear-gradient(135deg, #3b82f6, #1d4ed8); color: white; } /* Cost Section */ .cost-section { padding: 120px 24px; background: var(--bg-dark); border-top: 1px solid var(--border); } .cost-inner { max-width: 1100px; margin: 0 auto; } .section-tag { display: inline-block; font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--accent); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 16px; } .cost-header h2 { font-size: clamp(28px, 4vw, 40px); font-weight: 800; letter-spacing: -1px; margin: 0 0 48px 0; } /* Research Grid */ .research-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-bottom: 40px; } .research-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 28px; text-align: center; } .research-icon { font-size: 32px; margin-bottom: 12px; } .research-number { font-family: var(--font-mono); font-size: 32px; font-weight: 800; color: var(--accent); margin-bottom: 4px; } .research-desc { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 16px; } .research-card p { font-size: 15px; color: var(--text-gray); line-height: 1.7; margin: 0; } .research-card a { color: var(--accent); text-decoration: underline; } .cost-summary { text-align: center; padding: 32px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; } .cost-summary p { font-size: 20px; color: var(--text-gray); margin: 0; } .cost-summary strong { color: var(--text-white); } /* Solution Section */ .solution-section { padding: 120px 24px; background: var(--bg-black); border-top: 1px solid var(--border); } .solution-inner { max-width: 900px; margin: 0 auto; } .solution-header { text-align: center; margin-bottom: 48px; } .solution-header h2 { font-size: clamp(28px, 4vw, 40px); font-weight: 800; letter-spacing: -1px; margin: 0 0 16px 0; } .solution-subhead { font-size: 18px; color: var(--text-gray); line-height: 1.6; max-width: 700px; margin: 0 auto; } .solution-demo { margin-bottom: 32px; } .solution-slack { transform: none; max-width: 100%; } .solution-slack:hover { transform: none; } .solution-benefit { text-align: center; padding: 24px; background: rgba(200, 255, 0, 0.05); border: 1px solid rgba(200, 255, 0, 0.2); border-radius: 12px; } .solution-benefit p { font-size: 18px; color: var(--text-gray); margin: 0; } .solution-benefit strong { color: var(--accent); } /* Target Section */ .target-section { padding: 120px 24px; background: var(--bg-dark); border-top: 1px solid var(--border); } .target-inner { max-width: 1000px; margin: 0 auto; } .target-header { text-align: center; margin-bottom: 48px; } .target-header h2 { font-size: clamp(28px, 4vw, 40px); font-weight: 800; letter-spacing: -1px; margin: 0; } .target-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 48px; } .target-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 32px; } .target-card.yes { border-color: var(--accent); } .target-card.no { border-color: var(--text-muted); } .target-icon { font-size: 32px; margin-bottom: 16px; } .target-card.yes .target-icon { color: var(--accent); } .target-card.no .target-icon { color: var(--text-muted); } .target-card h3 { font-size: 20px; font-weight: 700; margin: 0 0 16px 0; } .target-card ul { list-style: none; padding: 0; margin: 0; } .target-card li { font-size: 16px; color: var(--text-gray); line-height: 1.7; padding: 8px 0; border-bottom: 1px solid var(--border); } .target-card li:last-child { border-bottom: none; } .target-roles { text-align: center; } .roles-header { font-size: 14px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 24px; } .roles-grid { display: flex; justify-content: center; gap: 32px; flex-wrap: wrap; } .role-item { display: flex; flex-direction: column; align-items: center; gap: 4px; } .role-title { font-weight: 700; font-size: 16px; color: var(--text-white); } .role-use { font-size: 13px; color: var(--text-muted); } /* Objections Section */ .objections-section { padding: 120px 24px; background: var(--bg-black); border-top: 1px solid var(--border); } .objections-inner { max-width: 1000px; margin: 0 auto; } .objections-header { text-align: center; margin-bottom: 48px; } .objections-header h2 { font-size: clamp(28px, 4vw, 40px); font-weight: 800; letter-spacing: -1px; margin: 0; } .objections-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .objection-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 28px; } .objection-q { font-size: 18px; font-weight: 700; color: var(--text-white); margin-bottom: 16px; font-style: italic; } .objection-a p { font-size: 16px; color: var(--text-gray); line-height: 1.75; margin: 0 0 12px 0; } .objection-a p:last-child { margin-bottom: 0; } .objection-a strong { color: var(--accent); } /* Testimonials Section */ .testimonials-section { padding: 120px 24px; background: var(--bg-dark); border-top: 1px solid var(--border); } .testimonials-inner { max-width: 1100px; margin: 0 auto; } .testimonials-header { text-align: center; margin-bottom: 48px; } .testimonials-header h2 { font-size: clamp(28px, 4vw, 40px); font-weight: 800; letter-spacing: -1px; margin: 0; } .testimonials-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .testimonial-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 32px; position: relative; } .testimonial-card.featured { grid-column: 1 / -1; border-color: var(--accent); } .testimonial-card blockquote { font-size: 16px; line-height: 1.7; color: var(--text-gray); margin: 0 0 24px 0; font-style: italic; } .testimonial-card.featured blockquote { font-size: 20px; } .testimonial-author { display: flex; align-items: center; gap: 16px; } /* Risk Section */ .risk-section { padding: 120px 24px; background: var(--bg-black); border-top: 1px solid var(--border); } .risk-inner { max-width: 800px; margin: 0 auto; } .risk-header { text-align: center; margin-bottom: 48px; } .risk-header h2 { font-size: clamp(28px, 4vw, 40px); font-weight: 800; letter-spacing: -1px; margin: 0; } .risk-content { background: var(--bg-card); border: 2px solid var(--accent); border-radius: 16px; padding: 40px; } .risk-points { display: flex; flex-direction: column; gap: 24px; } .risk-point { display: flex; gap: 16px; align-items: flex-start; } .risk-check { font-size: 24px; color: var(--accent); font-weight: 700; line-height: 1; } .risk-point strong { display: block; font-size: 18px; color: var(--text-white); margin-bottom: 4px; } .risk-point p { font-size: 16px; color: var(--text-gray); margin: 0; line-height: 1.7; } /* Uniqueness Section */ .unique-section { padding: 120px 24px; background: var(--bg-dark); border-top: 1px solid var(--border); } .unique-inner { max-width: 1000px; margin: 0 auto; } .unique-header { text-align: center; margin-bottom: 48px; } .unique-header h2 { font-size: clamp(28px, 4vw, 40px); font-weight: 800; letter-spacing: -1px; margin: 0; } .unique-comparison { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; margin-bottom: 32px; } .compare-row { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; border-bottom: 1px solid var(--border); } .compare-row:last-child { border-bottom: none; } .compare-row.header-row { background: var(--bg-elevated); } .compare-feature, .compare-option { padding: 16px 20px; font-size: 14px; } .compare-feature { color: var(--text-gray); font-weight: 500; } .compare-option { text-align: center; color: var(--text-muted); } .header-row .compare-option { font-weight: 700; color: var(--text-white); font-size: 13px; } .header-row .compare-option:first-of-type { color: var(--accent); } .compare-option.yes { color: var(--accent); font-weight: 700; } .compare-option.no { color: var(--red); } .compare-option.partial { color: var(--text-muted); } .unique-summary { text-align: center; padding: 24px; } .unique-summary p { font-size: 18px; color: var(--text-gray); margin: 0; } .unique-summary strong { color: var(--text-white); } /* How Section */ .how-section { padding: 120px 24px; background: var(--bg-black); border-top: 1px solid var(--border); } .how-inner { max-width: 1100px; margin: 0 auto; } .how-header { text-align: center; margin-bottom: 60px; } .how-header h2 { font-size: clamp(28px, 4vw, 40px); font-weight: 800; letter-spacing: -1px; margin: 0 0 12px 0; } .how-subhead { font-size: 18px; color: var(--text-gray); margin: 0; } .steps-grid { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 20px; align-items: start; margin-bottom: 60px; } .step-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 32px; transition: all 0.3s var(--ease-out); } .step-card:hover { border-color: var(--accent); transform: translateY(-4px); } .step-card.highlight-card { border-color: var(--accent); background: linear-gradient(135deg, var(--bg-card), rgba(200, 255, 0, 0.05)); } .step-number { font-family: var(--font-mono); font-size: 14px; font-weight: 700; color: var(--accent); margin-bottom: 16px; } .step-card h3 { font-size: 20px; font-weight: 700; margin: 0 0 12px 0; } .step-card p { font-size: 16px; color: var(--text-gray); margin: 0 0 20px 0; line-height: 1.7; } .step-detail code { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); background: var(--bg-elevated); padding: 8px 12px; border-radius: 6px; display: block; } .step-arrow { font-size: 32px; color: var(--accent); align-self: center; opacity: 0.5; } /* Prompt Card */ .setup-prompt-section { max-width: 700px; margin: 0 auto; } .prompt-card-v2 { background: var(--bg-card); border: 2px solid var(--accent); border-radius: 16px; overflow: hidden; box-shadow: 0 0 40px var(--accent-glow); } .prompt-header-v2 { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; background: var(--bg-elevated); border-bottom: 1px solid var(--border); } .prompt-label-v2 { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text-gray); } .prompt-icon { font-size: 16px; } .copy-btn-v2 { background: var(--accent); color: var(--bg-black); border: none; padding: 8px 16px; border-radius: 6px; font-size: 13px; font-weight: 700; cursor: pointer; transition: all 0.2s; } .copy-btn-v2:hover { transform: scale(1.05); } .copy-btn-v2.copied { background: #27c93f; } .prompt-body-v2 { padding: 24px; font-family: var(--font-mono); font-size: 14px; line-height: 1.7; color: var(--text-gray); white-space: pre-wrap; user-select: text; } /* Uses Section */ .uses-section { padding: 120px 24px; background: var(--bg-dark); border-top: 1px solid var(--border); } .uses-inner { max-width: 1100px; margin: 0 auto; } .uses-header { text-align: center; margin-bottom: 60px; } .uses-header h2 { font-size: clamp(28px, 4vw, 40px); font-weight: 800; letter-spacing: -1px; margin: 0; } .uses-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .use-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 32px; transition: all 0.3s var(--ease-out); } .use-card:hover { border-color: var(--accent); transform: translateY(-4px); } .use-icon { width: 48px; height: 48px; background: var(--accent-dim); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; color: var(--accent); } .use-icon svg { width: 24px; height: 24px; } .use-card h3 { font-size: 20px; font-weight: 700; margin: 0 0 12px 0; } .use-card p { font-size: 16px; color: var(--text-gray); line-height: 1.7; margin: 0 0 20px 0; } .use-example code { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); background: var(--bg-elevated); padding: 10px 14px; border-radius: 6px; display: block; } /* Trust Section */ .trust-section { padding: 120px 24px; background: var(--bg-black); border-top: 1px solid var(--border); } .trust-inner { max-width: 1100px; margin: 0 auto; } .trust-header { text-align: center; margin-bottom: 60px; } .trust-header h2 { font-size: clamp(28px, 4vw, 40px); font-weight: 800; letter-spacing: -1px; margin: 0; } .trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .trust-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 32px; } .trust-card h3 { font-size: 18px; font-weight: 700; margin: 0 0 12px 0; } .trust-card p { font-size: 16px; color: var(--text-gray); line-height: 1.7; margin: 0 0 20px 0; } .trust-providers { display: flex; gap: 8px; } .trust-providers span { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); background: var(--bg-elevated); padding: 6px 10px; border-radius: 4px; border: 1px solid var(--border); } .trust-badge { font-size: 13px; color: var(--accent); display: flex; align-items: center; gap: 8px; } .trust-check { font-weight: 700; } /* Proof/Quote Section */ .proof-section { padding: 120px 24px; background: var(--bg-dark); border-top: 1px solid var(--border); } .proof-inner { max-width: 800px; margin: 0 auto; } .quote-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 20px; padding: 48px; position: relative; } .quote-mark { position: absolute; top: 24px; left: 32px; font-size: 120px; font-family: Georgia, serif; color: var(--accent); opacity: 0.2; line-height: 1; } .quote-card blockquote { font-size: 20px; line-height: 1.7; color: var(--text-gray); margin: 0 0 32px 0; font-style: italic; position: relative; z-index: 1; } .quote-author { display: flex; align-items: center; gap: 16px; } .author-avatar { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), #22d3ee); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; color: var(--bg-black); } .author-info { display: flex; flex-direction: column; gap: 2px; } .author-name { font-weight: 700; font-size: 16px; } .author-title { font-size: 14px; color: var(--text-muted); } /* Final CTA */ .final-cta-v2 { padding: 120px 24px; background: linear-gradient(135deg, var(--bg-black), var(--bg-dark)); border-top: 1px solid var(--border); position: relative; overflow: hidden; } .final-cta-v2::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 600px; height: 600px; background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%); opacity: 0.15; pointer-events: none; } .final-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; position: relative; z-index: 1; } .final-content { max-width: 480px; } .final-content h2 { font-size: clamp(32px, 4vw, 44px); font-weight: 800; letter-spacing: -1px; line-height: 1.2; margin: 16px 0 16px 0; } .final-content p { font-size: 18px; color: var(--text-gray); margin: 0 0 32px 0; } .final-features { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 32px; } .final-features span { font-size: 14px; color: var(--text-gray); display: flex; align-items: center; gap: 6px; } .feat-check { color: var(--accent); font-weight: 700; } .homepage-v2 .cta-final { display: inline-flex; align-items: center; gap: 10px; background: var(--accent); color: var(--bg-black); padding: 20px 40px; border-radius: 10px; font-size: 18px; font-weight: 700; text-decoration: none; transition: all 0.25s var(--ease-out); margin-bottom: 16px; } .homepage-v2 .cta-final:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 16px 48px var(--accent-glow); } .homepage-v2 .cta-final .cta-arrow { font-size: 22px; transition: transform 0.2s; } .homepage-v2 .cta-final:hover .cta-arrow { transform: translateX(6px); } .final-note { display: block; font-size: 13px; color: var(--text-muted); } /* Terminal Visual */ .final-visual { display: flex; justify-content: center; } .terminal-v2 { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; width: 100%; max-width: 420px; box-shadow: 0 0 0 1px rgba(255,255,255,0.05), 0 20px 60px rgba(0,0,0,0.4); } .terminal-header-v2 { padding: 12px 16px; background: var(--bg-elevated); border-bottom: 1px solid var(--border); display: flex; gap: 8px; } .term-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--border-light); } .term-dot:first-child { background: #ff5f56; } .term-dot:nth-child(2) { background: #ffbd2e; } .term-dot:nth-child(3) { background: #27c93f; } .terminal-body-v2 { padding: 20px; font-family: var(--font-mono); font-size: 13px; line-height: 1.8; } .term-line { color: var(--text-gray); } .term-line.dim { color: var(--text-muted); } .term-line.success { color: #27c93f; } .term-prompt { color: var(--accent); margin-right: 8px; } .cursor { animation: blink 1s infinite; color: var(--accent); } @keyframes blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } } /* Footer */ .footer-v2 { padding: 40px 24px; background: var(--bg-black); border-top: 1px solid var(--border); } .footer-inner-v2 { max-width: 1100px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 24px; } .footer-brand-v2 { display: flex; flex-direction: column; gap: 4px; } .footer-logo { font-family: var(--font-mono); font-size: 18px; font-weight: 800; color: var(--text-white); } .footer-brand-v2 p { font-size: 13px; color: var(--text-muted); margin: 0; } .footer-links-v2 { display: flex; gap: 24px; } .footer-links-v2 a { color: var(--text-gray); text-decoration: none; font-size: 14px; transition: color 0.2s; } .footer-links-v2 a:hover { color: var(--accent); } .footer-copy { font-size: 13px; color: var(--text-muted); } /* Responsive */ @media (max-width: 1024px) { .hero-grid { grid-template-columns: 1fr; gap: 60px; } .slack-demo-v2 { transform: none; } .slack-demo-v2:hover { transform: none; } .research-grid { grid-template-columns: repeat(2, 1fr); } .target-grid { grid-template-columns: 1fr; } .objections-grid { grid-template-columns: 1fr; } .testimonials-grid { grid-template-columns: 1fr; } .compare-row { grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; font-size: 12px; } .compare-feature, .compare-option { padding: 12px 10px; } .steps-grid { grid-template-columns: 1fr; gap: 16px; } .step-arrow { display: none; } .uses-grid, .trust-grid { grid-template-columns: 1fr; } .final-inner { grid-template-columns: 1fr; gap: 60px; text-align: center; } .final-content { max-width: none; } .final-features { justify-content: center; } } @media (max-width: 768px) { /* CRITICAL: Force ALL content to fit viewport - override everything */ html, body { overflow-x: hidden !important; max-width: 100vw !important; } .homepage-v2 { width: 100% !important; max-width: 100vw !important; overflow-x: hidden !important; overflow-wrap: break-word !important; word-wrap: break-word !important; } .homepage-v2 *, .homepage-v2 *::before, .homepage-v2 *::after { max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; overflow-wrap: break-word !important; word-wrap: break-word !important; } /* Header */ .header-v2 { width: 100% !important; left: 0 !important; right: 0 !important; padding: 0 !important; } .header-inner { padding: 8px 12px !important; width: 100% !important; max-width: 100% !important; gap: 8px !important; } .homepage-v2 .logo-v2 { font-size: 14px !important; white-space: nowrap !important; } .nav-v2 { gap: 6px !important; } .nav-link { font-size: 11px !important; white-space: nowrap !important; padding: 4px 6px !important; } .homepage-v2 .nav-cta { padding: 4px 8px !important; font-size: 10px !important; white-space: nowrap; } /* Hero Section */ .hero-v2 { padding: 100px 16px 60px !important; min-height: auto !important; width: 100% !important; max-width: 100% !important; } .hero-grid { width: 100% !important; max-width: 100% !important; } .hero-content-v2 { width: 100% !important; max-width: 100% !important; } .setup-badge { white-space: normal !important; text-align: center; font-size: 11px; padding: 6px 12px; width: auto; max-width: 100% !important; display: inline-block; } .hero-headline { font-size: 26px !important; letter-spacing: -1px; word-wrap: break-word !important; overflow-wrap: break-word !important; width: 100% !important; white-space: normal !important; } /* Rotating text - disable animation complexity on mobile */ .highlight-rotating, .highlight-rotating.secondary { min-width: 0 !important; width: auto !important; display: inline !important; position: static !important; } .rotating-text { display: none !important; opacity: 0 !important; visibility: hidden !important; position: static !important; } .rotating-text.active { display: inline !important; opacity: 1 !important; visibility: visible !important; position: static !important; white-space: normal !important; } .hero-subhead { font-size: 14px !important; width: 100% !important; white-space: normal !important; } .hero-features { width: 100% !important; padding-right: 0 !important; padding-left: 0 !important; } .hero-features li { font-size: 14px; white-space: normal !important; } .tech-stack-v2 { flex-wrap: wrap; gap: 8px; } .tech-item { font-size: 11px; } .research-callout { flex-direction: column; gap: 16px; text-align: center; } .research-grid { grid-template-columns: 1fr; } .research-card { padding: 24px; } .research-number { font-size: 28px; } .roles-grid { flex-direction: column; gap: 24px; } .compare-row { grid-template-columns: 1fr; border-bottom: none; margin-bottom: 16px; background: var(--bg-card); border-radius: 8px; padding: 16px; } .compare-row.header-row { display: none; } .compare-feature { font-weight: 700; color: var(--text-white); padding: 0 0 8px 0; border-bottom: 1px solid var(--border); margin-bottom: 8px; } .compare-option { display: flex; justify-content: space-between; text-align: left; padding: 4px 0; } .compare-option::before { content: attr(data-label); color: var(--text-muted); font-size: 12px; } .risk-content { padding: 24px; } .proof-strip { flex-direction: column; gap: 16px; align-items: flex-start; } .proof-divider { width: 100%; height: 1px; } .cost-equation { flex-direction: column; gap: 16px; } .cost-operator { transform: rotate(90deg); } .comparison-item { grid-template-columns: 1fr; gap: 8px; } .footer-inner-v2 { flex-direction: column; text-align: center; } } /* Animation on scroll - optional enhancement */ @media (prefers-reduced-motion: no-preference) { .step-card, .use-card, .trust-card { opacity: 0; transform: translateY(20px); animation: revealUp 0.6s var(--ease-out) forwards; } .step-card:nth-child(1) { animation-delay: 0.1s; } .step-card:nth-child(3) { animation-delay: 0.2s; } .step-card:nth-child(5) { animation-delay: 0.3s; } .use-card:nth-child(1) { animation-delay: 0.1s; } .use-card:nth-child(2) { animation-delay: 0.2s; } .use-card:nth-child(3) { animation-delay: 0.3s; } .trust-card:nth-child(1) { animation-delay: 0.1s; } .trust-card:nth-child(2) { animation-delay: 0.2s; } .trust-card:nth-child(3) { animation-delay: 0.3s; } @keyframes revealUp { to { opacity: 1; transform: translateY(0); } } } /* ============================================ */ /* PRICING SECTION */ /* ============================================ */ .pricing-section { padding: 120px 24px; background: var(--bg-dark); } .pricing-inner { max-width: 1100px; margin: 0 auto; } .pricing-header { text-align: center; margin-bottom: 64px; } .pricing-header h2 { font-size: clamp(32px, 5vw, 48px); font-weight: 800; margin: 16px 0; letter-spacing: -1px; } .pricing-subhead { font-size: 18px; color: var(--text-gray); max-width: 500px; margin: 0 auto; } .pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; } @media (max-width: 900px) { .pricing-grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; } } .pricing-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 32px; display: flex; flex-direction: column; position: relative; transition: transform 0.3s var(--ease-out), border-color 0.3s; } .pricing-card:hover { transform: translateY(-4px); border-color: var(--accent); } .pricing-card.featured { border-color: var(--accent); background: linear-gradient(180deg, rgba(200, 255, 0, 0.05) 0%, var(--bg-card) 100%); } .pricing-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--accent); color: var(--bg-black); padding: 6px 16px; border-radius: 20px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; } .pricing-card-header { margin-bottom: 24px; } .pricing-card-header h3 { font-size: 24px; font-weight: 700; margin: 0 0 8px; color: var(--text-white); } .pricing-description { font-size: 14px; color: var(--text-gray); margin: 0; line-height: 1.5; } .pricing-amount { display: flex; align-items: baseline; margin-bottom: 32px; padding-bottom: 24px; border-bottom: 1px solid var(--border); } .pricing-currency { font-size: 24px; font-weight: 600; color: var(--text-gray); margin-right: 4px; } .pricing-value { font-size: 56px; font-weight: 800; color: var(--text-white); line-height: 1; letter-spacing: -2px; } .pricing-period { font-size: 16px; color: var(--text-gray); margin-left: 8px; } .pricing-features { list-style: none; padding: 0; margin: 0 0 32px; flex-grow: 1; } .pricing-features li { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; font-size: 15px; color: var(--text-gray); line-height: 1.6; } .pricing-features .feature-check { color: var(--accent); font-weight: 700; flex-shrink: 0; } .pricing-cta { margin-top: auto; } .homepage-v2 .pricing-button { display: block; width: 100%; padding: 16px 24px; border-radius: 8px; font-size: 15px; font-weight: 700; text-align: center; text-decoration: none; transition: all 0.2s var(--ease-out); } .homepage-v2 .pricing-button.primary { background: var(--accent); color: var(--bg-black); } .homepage-v2 .pricing-button.primary:hover { background: var(--text-white); transform: translateY(-2px); } .homepage-v2 .pricing-button.secondary { background: transparent; color: var(--text-white); border: 1px solid var(--border-light); } .homepage-v2 .pricing-button.secondary:hover { border-color: var(--accent); color: var(--accent); } .pricing-note { text-align: center; margin-top: 48px; padding: 24px; background: var(--bg-elevated); border-radius: 12px; border: 1px solid var(--border); } .pricing-note p { margin: 0; font-size: 15px; color: var(--text-gray); } .pricing-note strong { color: var(--text-white); } /* ============================================ */ /* DEMO SECTION V2 */ /* ============================================ */ .demo-section-v2 { padding: 80px 24px; background: var(--bg-dark); border-top: 1px solid var(--border); } .demo-inner { max-width: 1200px; margin: 0 auto; } .demo-grid-v2 { display: grid; grid-template-columns: 1fr auto 1fr; gap: 40px; align-items: start; } .demo-arrow-v2 { display: flex; align-items: center; justify-content: center; color: var(--accent); font-size: 48px; font-weight: 300; opacity: 0.5; align-self: center; margin-top: 80px; } .prompt-note-v2 { display: flex; align-items: center; gap: 12px; padding: 16px 20px; background: var(--bg-elevated); border-top: 1px solid var(--border); font-size: 14px; color: var(--text-muted); } .time-badge { background: var(--accent); color: var(--bg-black); padding: 4px 10px; border-radius: 4px; font-family: var(--font-mono); font-weight: 700; font-size: 12px; } .terminal-title-v2 { margin-left: auto; font-size: 12px; color: var(--text-muted); font-family: var(--font-mono); } .demo-cta-v2 { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 48px; padding-top: 48px; border-top: 1px solid var(--border); } .cta-text { color: var(--text-muted); font-size: 15px; } .homepage-v2 .btn-secondary-v2 { display: inline-block; padding: 12px 24px; background: transparent; color: var(--text-white); border: 1px solid var(--border-light); border-radius: 8px; font-size: 14px; font-weight: 600; text-decoration: none; transition: all 0.2s var(--ease-out); } .homepage-v2 .btn-secondary-v2:hover { border-color: var(--accent); color: var(--accent); } @media (max-width: 1024px) { .demo-grid-v2 { grid-template-columns: 1fr; gap: 40px; } .demo-arrow-v2 { display: none; } } /* ============================================ */ /* SPECS SECTION */ /* ============================================ */ .specs-section { padding: 100px 24px; background: var(--bg-black); border-top: 1px solid var(--border); } .specs-inner { max-width: 1100px; margin: 0 auto; } .specs-header { text-align: center; margin-bottom: 60px; } .specs-header h2 { font-size: clamp(28px, 4vw, 40px); font-weight: 800; letter-spacing: -1px; margin: 16px 0 0; } .specs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .spec-card-v2 { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 32px; transition: all 0.3s var(--ease-out); } .spec-card-v2:hover { border-color: var(--accent); transform: translateY(-4px); } .spec-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .spec-card-header h3 { font-size: 18px; font-weight: 700; margin: 0; } .spec-badge { background: var(--accent-dim); color: var(--accent); font-size: 10px; padding: 4px 10px; border-radius: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; } .spec-card-v2 p { font-size: 16px; color: var(--text-gray); line-height: 1.75; margin: 0 0 20px; } .spec-tags { display: flex; gap: 8px; flex-wrap: wrap; } .spec-tags code { background: var(--bg-elevated); color: var(--text-muted); padding: 6px 12px; border-radius: 6px; font-size: 12px; font-family: var(--font-mono); border: 1px solid var(--border); } @media (max-width: 900px) { .specs-grid { grid-template-columns: 1fr; } } /* ============================================ */ /* USE CASES SECTION V2 */ /* ============================================ */ .use-cases-section-v2 { padding: 100px 24px; background: var(--bg-dark); border-top: 1px solid var(--border); } .use-cases-inner { max-width: 1100px; margin: 0 auto; } .use-cases-header { text-align: center; margin-bottom: 60px; } .use-cases-header h2 { font-size: clamp(28px, 4vw, 40px); font-weight: 800; letter-spacing: -1px; margin: 16px 0; line-height: 1.3; } .section-subtitle { font-size: 18px; color: var(--text-gray); margin: 0; } .use-cases-grid-v2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .use-case-card-v2 { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 32px; transition: all 0.3s var(--ease-out); display: flex; flex-direction: column; } .use-case-card-v2:hover { border-color: var(--accent); transform: translateY(-4px); } .use-case-card-v2 h3 { font-size: 20px; font-weight: 700; margin: 0 0 16px; } .use-case-card-v2 p { font-size: 16px; color: var(--text-gray); line-height: 1.75; margin: 0 0 20px; flex: 1; } .use-case-benefit { display: flex; align-items: center; gap: 8px; padding-top: 16px; border-top: 1px solid var(--border); margin-top: auto; } .benefit-label { font-size: 12px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .benefit-value { font-size: 13px; color: var(--accent); font-weight: 600; } @media (max-width: 768px) { .use-cases-grid-v2 { grid-template-columns: 1fr; } } /* ============================================ */ /* DEBUG SECTION */ /* ============================================ */ .debug-section { padding: 100px 24px; background: var(--bg-black); border-top: 1px solid var(--border); } .debug-inner { max-width: 1200px; margin: 0 auto; } .debug-header { text-align: center; margin-bottom: 60px; } .debug-header h2 { font-size: clamp(28px, 4vw, 40px); font-weight: 800; letter-spacing: -1px; margin: 16px 0; } .debug-content { display: grid; grid-template-columns: 1fr 1.5fr; gap: 60px; align-items: start; } .debug-description h3 { font-size: 28px; font-weight: 700; margin: 0 0 16px; } .debug-description > p { font-size: 16px; color: var(--text-gray); line-height: 1.7; margin: 0 0 32px; } .debug-features { display: flex; flex-direction: column; gap: 24px; } .debug-feature { display: flex; gap: 16px; align-items: flex-start; } .debug-check { width: 28px; height: 28px; background: var(--accent-dim); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--accent); font-weight: 700; font-size: 14px; flex-shrink: 0; } .debug-feature div { flex: 1; } .debug-feature strong { display: block; font-size: 16px; color: var(--text-white); margin-bottom: 4px; } .debug-feature p { font-size: 15px; color: var(--text-gray); margin: 0; line-height: 1.7; } .debug-preview { position: relative; } .debug-panel-window { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); } .debug-panel-header { background: var(--bg-elevated); padding: 16px 20px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border); } .panel-title { font-size: 16px; font-weight: 700; font-family: var(--font-mono); } .filter-label { font-size: 13px; color: var(--text-muted); background: var(--bg-card); padding: 6px 12px; border-radius: 6px; border: 1px solid var(--border); font-family: var(--font-mono); } .debug-panel-table { font-family: var(--font-mono); font-size: 12px; } .debug-table-header { display: grid; grid-template-columns: 140px 100px 90px 1fr 1fr; gap: 12px; padding: 12px 16px; background: var(--bg-elevated); border-bottom: 1px solid var(--border); font-weight: 600; color: var(--text-muted); text-transform: uppercase; font-size: 10px; letter-spacing: 0.5px; } .debug-table-row { display: grid; grid-template-columns: 140px 100px 90px 1fr 1fr; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border); transition: background 0.2s; } .debug-table-row:hover { background: rgba(200, 255, 0, 0.03); } .debug-table-row.processing { animation: pulse-row 2s infinite; } @keyframes pulse-row { 0%, 100% { background: transparent; } 50% { background: rgba(251, 191, 36, 0.05); } } .debug-col-time { color: var(--text-muted); font-size: 11px; } .debug-col-payload, .debug-col-response { color: var(--text-gray); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; } .source-badge { display: inline-block; padding: 4px 8px; border-radius: 4px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; } .source-badge.slack { background: rgba(75, 85, 99, 0.2); color: #9ca3af; } .source-badge.api { background: rgba(59, 130, 246, 0.2); color: #60a5fa; } .source-badge.widget { background: rgba(168, 85, 247, 0.2); color: #c084fc; } .status-badge { display: inline-block; padding: 4px 10px; border-radius: 12px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; } .status-badge.success { background: rgba(16, 185, 129, 0.2); color: #10b981; } .status-badge.processing { background: rgba(251, 191, 36, 0.2); color: #fbbf24; } @media (max-width: 1024px) { .debug-content { grid-template-columns: 1fr; gap: 40px; } } /* ============================================ */ /* ENRICHMENT SECTION */ /* ============================================ */ .enrichment-section { padding: 100px 24px; background: var(--bg-dark); border-top: 1px solid var(--border); } .enrichment-inner { max-width: 1100px; margin: 0 auto; } .enrichment-header { text-align: center; margin-bottom: 60px; } .enrichment-header h2 { font-size: clamp(28px, 4vw, 40px); font-weight: 800; letter-spacing: -1px; margin: 16px 0; } .enrichment-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .enrichment-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 32px; transition: all 0.3s var(--ease-out); display: flex; flex-direction: column; } .enrichment-card:hover { border-color: var(--accent); transform: translateY(-4px); } .enrichment-number { width: 40px; height: 40px; background: var(--accent-dim); border: 2px solid var(--accent); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; color: var(--accent); margin-bottom: 20px; font-family: var(--font-mono); } .enrichment-card h3 { font-size: 18px; font-weight: 700; margin: 0 0 12px; line-height: 1.3; } .enrichment-card p { font-size: 16px; color: var(--text-gray); line-height: 1.75; margin: 0 0 20px; flex: 1; } .enrichment-code { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 8px; padding: 16px; overflow-x: auto; } .enrichment-code pre { margin: 0; font-family: var(--font-mono); font-size: 12px; line-height: 1.6; } .enrichment-code code { color: var(--text-gray); } .enrichment-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; } .enrichment-tag { background: var(--bg-elevated); color: var(--text-muted); padding: 6px 12px; border-radius: 6px; font-size: 12px; font-family: var(--font-mono); border: 1px solid var(--border); } @media (max-width: 900px) { .enrichment-grid { grid-template-columns: 1fr; } } /* ============================================ */ /* ROLE-BASED USE CASES */ /* ============================================ */ .use-case-role-section { margin-bottom: 80px; } .use-case-role-section:last-child { margin-bottom: 0; } .role-header { margin-bottom: 32px; padding-bottom: 24px; border-bottom: 1px solid var(--border); } .role-badge { display: inline-block; padding: 8px 16px; border-radius: 6px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; font-family: var(--font-mono); margin-bottom: 12px; } .role-badge.executive { background: rgba(251, 191, 36, 0.15); color: #fbbf24; border: 1px solid rgba(251, 191, 36, 0.3); } .role-badge.product { background: rgba(168, 85, 247, 0.15); color: #c084fc; border: 1px solid rgba(168, 85, 247, 0.3); } .role-badge.engineering { background: rgba(59, 130, 246, 0.15); color: #60a5fa; border: 1px solid rgba(59, 130, 246, 0.3); } .role-subtitle { font-size: 18px; color: var(--text-gray); margin: 0; line-height: 1.5; } /* Use case example styling */ .use-case-example { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; margin-bottom: 16px; } .example-label { display: block; font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; margin-bottom: 8px; } .use-case-example code { font-family: var(--font-mono); font-size: 13px; color: var(--accent); line-height: 1.5; display: block; word-break: break-word; } /* Make cards in role sections full width on smaller grids */ .use-case-role-section .use-cases-grid-v2 { grid-template-columns: repeat(3, 1fr); } @media (max-width: 1100px) { .use-case-role-section .use-cases-grid-v2 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .use-case-role-section .use-cases-grid-v2 { grid-template-columns: 1fr; } .use-case-role-section { margin-bottom: 60px; } } /* ============================================ */ /* FAQ SECTION */ /* ============================================ */ .faq-section { padding: 100px 24px; background: var(--bg-black); border-top: 1px solid var(--border); } .faq-inner { max-width: 1100px; margin: 0 auto; } .faq-header { text-align: center; margin-bottom: 60px; } .faq-header h2 { font-size: clamp(28px, 4vw, 40px); font-weight: 800; letter-spacing: -1px; margin: 16px 0; } .faq-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .faq-item { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 28px; transition: all 0.3s var(--ease-out); } .faq-item:hover { border-color: var(--accent); transform: translateY(-4px); } .faq-question { font-size: 18px; font-weight: 700; color: var(--text-white); margin-bottom: 16px; line-height: 1.4; } .faq-answer { } .faq-answer p { font-size: 16px; color: var(--text-gray); line-height: 1.75; margin: 0; } @media (max-width: 768px) { .faq-grid { grid-template-columns: 1fr; } .faq-question { font-size: 16px; } .faq-answer { padding-left: 0; } }