*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --charcoal: #1a1a2e; --slate: #2d2d44; --purple: #6c5ce7; --purple-light: #a29bfe; --purple-pale: #f0eeff; --blue: #0984e3; --teal: #00b894; --coral: #ff6b6b; --gold: #fdcb6e; --white: #ffffff; --gray-50: #fafafa; --gray-100: #f8f9fa; --gray-200: #e9ecef; --gray-400: #ced4da; --gray-600: #6c757d; --gray-800: #343a40; --font: 'Plus Jakarta Sans', system-ui, sans-serif; --radius: 16px; --shadow: 0 4px 24px rgba(0,0,0,0.08); --shadow-lg: 0 12px 48px rgba(0,0,0,0.12); } html { scroll-behavior: smooth; } /* `overflow-x: hidden` on creates a scrolling root: the body becomes its own scroll container, html stops scrolling, and Element.scrollIntoView / window.scrollTo / native anchor (#hash) scrolling all break in subtle ways (Chrome MCP test env exposed this — anchor clicks updated location.hash but never scrolled). `overflow-x: clip` clips the same content without becoming a scroll container, so anchor scroll keeps working. Keep `hidden` as a fallback for browsers older than Chrome 90 / Safari 16 / Firefox 81. */ body { font-family: var(--font); background: var(--white); color: var(--gray-800); line-height: 1.6; overflow-x: hidden; overflow-x: clip; } .container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; } /* NAV */ .nav { position: fixed; top: 0; width: 100%; background: rgba(255,255,255,0.95); backdrop-filter: blur(10px); border-bottom: 1px solid var(--gray-200); z-index: 100; padding: 0.8rem 2rem; display: flex; align-items: center; justify-content: space-between; } .nav-logo { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.3px; color: var(--charcoal); text-decoration: none; } .nav-logo span { color: var(--purple); } @media (max-width: 375px) { .nav-logo { font-size: 1.25rem; } } .nav-links { display: flex; gap: 1.5rem; align-items: center; } .nav-links a { text-decoration: none; color: var(--gray-600); font-weight: 500; font-size: 0.85rem; transition: color 0.15s; } .nav-links a:hover { color: var(--charcoal); } .nav-cta { background: var(--purple) !important; color: var(--white) !important; padding: 0.5rem 1.4rem; border-radius: 8px; font-weight: 600; } .nav-cta:hover { background: #5b4bd5 !important; } /* HERO */ .hero { padding: 8rem 2rem 5rem; text-align: center; background: linear-gradient(135deg, #f8f9ff 0%, #f0f0ff 50%, #f8f9ff 100%); } .hero-badge { display: inline-block; background: #ede9fe; color: var(--purple); padding: 0.4rem 1rem; border-radius: 20px; font-size: 0.8rem; font-weight: 600; margin-bottom: 1.5rem; } .hero h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); color: var(--charcoal); line-height: 1.15; margin-bottom: 1.2rem; font-weight: 800; } .hero h1 .gradient { background: linear-gradient(135deg, var(--purple), var(--blue)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .hero p { font-size: 1.1rem; color: var(--gray-600); max-width: 620px; margin: 0 auto 2.5rem; } .hero-buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } .btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.85rem 2rem; border-radius: 10px; font-size: 1rem; font-weight: 600; text-decoration: none; cursor: pointer; border: none; transition: all 0.2s; } .btn-primary { background: var(--purple); color: var(--white); box-shadow: 0 4px 16px rgba(108,92,231,0.3); } .btn-primary:hover { background: #5b4bd5; transform: translateY(-2px); } .btn-outline { background: var(--white); color: var(--charcoal); border: 2px solid var(--gray-200); } .btn-outline:hover { border-color: var(--purple); color: var(--purple); } .hero-stats { display: flex; justify-content: center; gap: 3rem; margin-top: 3rem; flex-wrap: wrap; } .hero-stat { text-align: center; } .hero-stat .num { font-size: 2rem; font-weight: 800; color: var(--charcoal); } .hero-stat .label { font-size: 0.8rem; color: var(--gray-600); } /* LOGOS / TRUST */ .trust { padding: 3rem 2rem; text-align: center; border-bottom: 1px solid var(--gray-200); } .trust p { font-size: 0.8rem; color: var(--gray-600); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; margin-bottom: 1.5rem; } .trust-logos { display: flex; justify-content: center; gap: 2.5rem; flex-wrap: wrap; align-items: center; } .trust-logo { display: flex; align-items: center; gap: 0.5rem; opacity: 0.85; transition: opacity 0.2s; } .trust-logo:hover { opacity: 1; } .trust-logo img { height: 24px; width: auto; } .trust-logo span { font-size: 0.8rem; font-weight: 600; color: var(--gray-800); } /* AI SECTION */ .ai-section { padding: 5rem 2rem; background: var(--charcoal); color: var(--white); } .ai-section h2 { font-size: 2rem; text-align: center; margin-bottom: 0.5rem; font-weight: 800; } .ai-section .subtitle { text-align: center; color: rgba(255,255,255,0.6); margin-bottom: 3rem; font-size: 1.05rem; } .ai-grid { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; } .ai-card { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius); padding: 2rem; } .ai-card .icon { width: 48px; height: 48px; border-radius: 12px; background: rgba(108,92,231,0.2); display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; } .ai-card .icon svg { width: 24px; height: 24px; } .ai-card h4 { font-size: 1.05rem; margin-bottom: 0.5rem; } .ai-card p { font-size: 0.9rem; color: rgba(255,255,255,0.6); } .ai-badge { display: inline-block; background: var(--purple); color: var(--white); padding: 0.2rem 0.6rem; border-radius: 6px; font-size: 0.7rem; font-weight: 700; margin-bottom: 0.8rem; } /* FEATURES */ .features { padding: 5rem 2rem; } .features h2 { font-size: 2rem; text-align: center; color: var(--charcoal); margin-bottom: 0.5rem; font-weight: 800; } .features .subtitle { text-align: center; color: var(--gray-600); margin-bottom: 3rem; } .features-grid { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.5rem; } .feature-card { padding: 1.5rem; border-radius: var(--radius); border: 1px solid var(--gray-200); background: var(--white); transition: all 0.2s; } .feature-card:hover { border-color: var(--purple); box-shadow: var(--shadow); } .feature-card .icon { width: 40px; height: 40px; border-radius: 10px; background: var(--purple-pale); display: flex; align-items: center; justify-content: center; margin-bottom: 0.8rem; } .feature-card .icon svg { width: 20px; height: 20px; } .feature-card h4 { font-size: 0.95rem; margin-bottom: 0.3rem; color: var(--charcoal); } .feature-card p { font-size: 0.8rem; color: var(--gray-600); } /* INTEGRATIONS */ .integrations { padding: 4rem 2rem; background: var(--gray-50); } .integrations h2 { font-size: 2rem; text-align: center; color: var(--charcoal); margin-bottom: 0.5rem; font-weight: 800; } .integrations .subtitle { text-align: center; color: var(--gray-600); margin-bottom: 3rem; } .int-grid { max-width: 900px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1rem; } .int-card { background: var(--white); border: 1px solid var(--gray-200); border-radius: 12px; padding: 1.2rem; text-align: center; } .int-card img { height: 28px; width: auto; margin-bottom: 0.5rem; } .int-card .name { font-weight: 600; font-size: 0.85rem; color: var(--charcoal); } .int-card .desc { font-size: 0.7rem; color: var(--gray-600); margin-top: 0.2rem; } /* DEMOS */ .demos { padding: 5rem 2rem; } .demos h2 { font-size: 2rem; text-align: center; color: var(--charcoal); margin-bottom: 0.5rem; font-weight: 800; } .demos .subtitle { text-align: center; color: var(--gray-600); margin-bottom: 3rem; font-size: 1.05rem; } .demo-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; } .demo-card { background: var(--white); border: 2px solid var(--gray-200); border-radius: var(--radius); padding: 1.5rem; text-align: center; cursor: pointer; transition: all 0.2s; text-decoration: none; color: inherit; } .demo-card:hover { border-color: var(--purple); transform: translateY(-3px); box-shadow: var(--shadow-lg); } .demo-card .icon { width: 48px; height: 48px; border-radius: 12px; background: var(--purple-pale); display: flex; align-items: center; justify-content: center; margin: 0 auto 0.6rem; } .demo-card .icon svg { width: 24px; height: 24px; } .demo-card h3 { font-size: 0.95rem; margin-bottom: 0.3rem; color: var(--charcoal); } .demo-card p { font-size: 0.75rem; color: var(--gray-600); } /* HOW IT WORKS */ .how-it-works { background: var(--purple-pale); padding: 5rem 2rem; } .how-it-works h2 { font-size: 2rem; text-align: center; color: var(--charcoal); margin-bottom: 3rem; font-weight: 800; } .steps { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2rem; } .step { text-align: center; } .step-num { width: 48px; height: 48px; border-radius: 50%; background: var(--purple); color: var(--white); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.2rem; margin-bottom: 1rem; } .step h4 { font-size: 1rem; margin-bottom: 0.5rem; color: var(--charcoal); } .step p { font-size: 0.85rem; color: var(--gray-600); } /* PRICING */ .pricing { padding: 5rem 2rem; } .pricing h2 { font-size: 2rem; text-align: center; color: var(--charcoal); margin-bottom: 0.5rem; font-weight: 800; } .pricing .subtitle { text-align: center; color: var(--gray-600); margin-bottom: 3rem; } .pricing-grid { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; } .price-card { background: var(--white); border: 2px solid var(--gray-200); border-radius: var(--radius); padding: 2.5rem 2rem; } .price-card.featured { border-color: var(--purple); box-shadow: var(--shadow-lg); position: relative; } .price-card .popular-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--purple); color: var(--white); padding: 0.2rem 1rem; border-radius: 12px; font-size: 0.7rem; font-weight: 700; } .price-card .tier { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gray-600); font-weight: 600; } .price-card .amount { font-size: 2.5rem; font-weight: 800; color: var(--charcoal); margin: 0.5rem 0; } .price-card .amount span { font-size: 1rem; font-weight: 400; color: var(--gray-600); } .price-card .fee { font-size: 0.85rem; color: var(--gray-600); margin-bottom: 1.5rem; } .price-card ul { list-style: none; } .price-card li { padding: 0.35rem 0; font-size: 0.85rem; color: var(--gray-800); } .price-card li::before { content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 0.4rem; vertical-align: middle; background: url("data:image/svg+xml,%3Csvg fill='none' stroke='%2300b894' stroke-width='3' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") no-repeat center/contain; } .price-card .cta-row { margin-top: 1.5rem; } .price-card .btn { width: 100%; justify-content: center; font-size: 0.9rem; } /* COMPARE */ .compare { padding: 3rem 2rem 5rem; max-width: 900px; margin: 0 auto; } .compare h2 { font-size: 1.5rem; text-align: center; color: var(--charcoal); margin-bottom: 2rem; } .compare table { width: 100%; border-collapse: collapse; font-size: 0.85rem; } .compare th { text-align: left; padding: 0.8rem; border-bottom: 2px solid var(--gray-200); color: var(--gray-600); font-weight: 600; } .compare td { padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--gray-100); } .compare tr td:first-child { font-weight: 600; color: var(--charcoal); } .compare .us { background: var(--purple-pale); font-weight: 600; color: var(--purple); } .check { color: var(--teal); font-weight: 600; } .cross { color: var(--coral); font-weight: 600; } /* CTA */ .final-cta { padding: 5rem 2rem; text-align: center; background: linear-gradient(135deg, var(--charcoal) 0%, #2d2d54 100%); color: var(--white); } .final-cta h2 { font-size: 2rem; margin-bottom: 1rem; font-weight: 800; } .final-cta p { color: rgba(255,255,255,0.7); margin-bottom: 2rem; max-width: 480px; margin-left: auto; margin-right: auto; } /* FOOTER */ .footer { background: var(--charcoal); color: rgba(255,255,255,0.5); padding: 2rem; text-align: center; font-size: 0.8rem; } .footer a { color: var(--purple-light); text-decoration: none; } /* HAMBURGER */ .hamburger { display: none; background: none; border: none; cursor: pointer; padding: 0.5rem; color: var(--charcoal); } .hamburger svg { width: 24px; height: 24px; } .mobile-menu { display: none; position: fixed; inset: 0; background: var(--white); z-index: 999; flex-direction: column; padding: 5rem 2rem 2rem; gap: 1.5rem; } .mobile-menu.open { display: flex; } .mobile-menu a { font-size: 1.2rem; font-weight: 600; color: var(--charcoal); text-decoration: none; padding: 0.75rem 0; border-bottom: 1px solid var(--gray-100); } .mobile-menu .nav-cta { background: var(--purple); color: var(--white); text-align: center; border-radius: 10px; padding: 0.85rem; border: none; margin-top: 1rem; } .mobile-close { position: absolute; top: 1.25rem; right: 1.25rem; background: none; border: none; cursor: pointer; font-size: 1.5rem; color: var(--charcoal); } /* RESPONSIVE */ @media (max-width: 1024px) { .nav-links { display: none; } .hamburger { display: block; } } @media (max-width: 768px) { .hero h1 { font-size: 2rem; } .hero-stats { gap: 1.5rem; } .demo-grid { grid-template-columns: repeat(3, 1fr); } .compare { overflow-x: auto; } .pricing-grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; } } @media (max-width: 480px) { .demo-grid { grid-template-columns: repeat(2, 1fr); } .features-grid { grid-template-columns: 1fr; } .int-grid { grid-template-columns: repeat(3, 1fr); } .hero-buttons { flex-direction: column; align-items: center; } .hero-stats { flex-wrap: wrap; justify-content: center; } } @media (max-width: 375px) { .hero h1 { font-size: 1.6rem; } .hero p { font-size: 0.9rem; } .demo-grid { grid-template-columns: 1fr 1fr; gap: 0.5rem; } }